From 9507e9a2fb4991d2519d46f63c6afe60efa7c6e9 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Tue, 27 Aug 2024 15:48:37 -0700
Subject: [PATCH 01/16] feat(chip): refactor chip for component tokens

---
 .../src/components/chip/chip.scss             | 621 +++++++++---------
 1 file changed, 301 insertions(+), 320 deletions(-)

diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index a84a83f8e90..b40adcb997c 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -1,319 +1,389 @@
-.container,
-.select-icon,
-.title {
-  padding-inline-start: var(--calcite-internal-chip-padding-start);
-  padding-inline-end: var(--calcite-internal-chip-padding-end);
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-chip-background-color: Specifies
+ * @prop --calcite-chip-background-color-hover: Specifies
+ * @prop --calcite-chip-background-color-press: Specifies
+ * @prop --calcite-chip-border-color: Specifies
+ * @prop --calcite-chip-corner-radius: Specifies
+ * @prop --calcite-chip-text-color: Specifies
+ *
+ */
+
+:host {
+  @apply inline-flex
+    cursor-default;
 }
 
-.select-icon:not(.select-icon--active) {
-  padding-inline: 0;
+/* Host Prop Variant styles */
+:host([closed]) {
+  display: none;
 }
 
-:host([scale="s"]) {
-  @apply text-n2 h-6;
+:host([appearance="outline"]),
+:host([appearance="outline-fill"]) {
+  .container {
+    color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
+  }
 
-  --calcite-chip-spacing-s-internal: theme("spacing[1]");
-  --calcite-chip-spacing-l-internal: theme("spacing[2]");
+  &:host([kind="brand"]) .container {
+    border-color: var(--calcite-chip-border-color, var(--calcite-color-brand));
+  }
 
-  .close,
-  .select-icon--active {
-    @apply h-4 w-4;
+  &:host([kind="inverse"]) .container {
+    border-color: var(--calcite-chip-border-color, var(--calcite-color-inverse));
   }
 
-  .image-container {
-    @apply h-5 w-5;
+  &:host([kind="neutral"]) .container {
+    border-color: var(--calcite-chip-border-color, var(--calcite-color-border-1));
   }
 
-  .container.is-circle,
-  .container.is-circle.image--slotted {
-    @apply w-6 h-6;
+  .close {
+    color: var(--calcite-close-icon-color, var(--calcite-color-text-3));
+  }
+}
+:host([appearance="outline"]) .container {
+  @apply bg-transparent;
 
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-px);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-px);
+  &:hover,
+  &:focus {
+    background-color: var(--calcite-color-transparent-hover);
   }
+  &:active {
+    background-color: var(--calcite-color-transparent-press);
+  }
+}
+:host([appearance="outline-fill"]) .container {
+  background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-1));
 
-  .multiple {
-    .select-icon {
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-    }
+  &:hover,
+  &:focus {
+    background-color: var(--calcite-chip-background-color-hover, var(--calcite-color-foreground-2));
+  }
+  &:active {
+    background-color: var(--calcite-chip-background-color-press, var(--calcite-color-foreground-3));
+  }
+}
+:host([appearance="solid"]) {
+  .container {
+    border-color: transparent;
+  }
 
-    &.image--slotted {
-      .select-icon {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);
-      }
+  &:host([kind="brand"]),
+  &:host([kind="inverse"]) {
+    .container {
+      color: var(--calcite-chip-text-color, var(--calcite-color-text-inverse));
 
-      &.text--slotted {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-px);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
+      // I think this only applies to .close. Maybe change the selector to .close?
+      button {
+        outline-color: var(--calcite-color-text-inverse);
       }
     }
   }
 
-  .container {
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
+  &:host([kind="brand"]) {
+    .container {
+      background-color: var(--calcite-chip-background-color, var(--calcite-color-brand));
 
-    &.image--slotted {
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-px);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-
-      &.closable {
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
+      &:host(:hover),
+      &:host(:focus) {
+        background-color: var(--calcite-chip-background-color-hover, var(--calcite-color-brand-hover));
+      }
+      &:host(:active) {
+        background-color: var(--calcite-chip-background-color-press, var(--calcite-color-brand-press));
       }
     }
   }
 
-  .container:not(.is-circle):not(.multiple) {
-    &:not(.image-slotted) .select-icon.select-icon--active {
-      padding-inline-start: 0;
-      padding-inline-end: var(--calcite-spacing-xs);
-    }
+  &:host([kind="inverse"]) {
+    .container {
+      background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse));
 
-    &.image--slotted .select-icon.select-icon--active {
-      padding-inline-start: var(--calcite-spacing-base);
-      padding-inline-end: var(--calcite-spacing-sm);
+      &:host(:hover),
+      &:host(:focus) {
+        background-color: var(--calcite-chip-background-color-hover, var(--calcite-color-inverse-hover));
+      }
+      &:host(:active) {
+        background-color: var(--calcite-chip-background-color-press, var(--calcite-color-inverse-press));
+      }
     }
   }
-}
 
-:host([scale="s"][closable]) .container {
-  --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-  --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
+  &:host([kind="neutral"]) .container {
+    background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-2));
+  }
 }
+:host([kind="neutral"]) .container {
+  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
 
-:host([scale="m"]) {
-  @apply text-n1 h-8;
-  --calcite-chip-spacing-s-internal: theme("spacing[1.5]");
-  --calcite-chip-spacing-l-internal: theme("spacing[2]");
+  .close {
+    color: var(--calcite-color-text-3);
+  }
+}
 
-  .close,
-  .image-container,
-  .select-icon--active {
-    @apply h-6 w-6;
+:host([selected]) .select-icon {
+  opacity: 1;
+}
 
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-  }
+:host([scale="s"]) {
+  .container {
+    --calcite-internal-chip-space-s: theme("spacing[1]");
+    --calcite-internal-chip-font-size: var(--calcite-font-size--2);
+    --calcite-internal-chip-block-size: 1.5rem /* 24px */;
+    --calcite-internal-chip-icon-size: 1rem /* 16px */;
+    --calcite-internal-chip-image-size: 1.25rem /* 20px */;
+    --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xxs);
+    --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xxs);
 
-  .container.is-circle,
-  .container.is-circle.image--slotted {
-    @apply w-8 h-8;
+    &.image--slotted {
+      --calcite-internal-chip-container-padding-start: var(--calcite-spacing-px);
 
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-px);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-px);
-  }
+      &.closable {
+        --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xxs);
+      }
+    }
 
-  .multiple {
-    .select-icon {
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-base);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-base);
+    &.is-circle,
+    &.is-circle.image--slotted {
+      --calcite-internal-chip-inline-size: 1.5rem /* 24px */;
+      --calcite-internal-chip-padding-start: var(--calcite-spacing-px);
+      --calcite-internal-chip-padding-end: var(--calcite-spacing-px);
     }
 
-    &.image--slotted {
-      .select-icon {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);
+    &:not(.is-circle):not(.multiple) {
+      &.image--slotted {
+        --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-base);
+        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-sm);
       }
-
-      &.text--slotted {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
+      &:not(.image-slotted) {
+        --calcite-internal-chip-select-icon-padding-start: 0;
+        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-xs);
       }
     }
-  }
 
-  .container {
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
-
-    &.image--slotted {
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
+    &.multiple {
+      --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-xxs);
+      --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-xxs);
 
-      &.closable {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
+      &.image--slotted {
+        --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-xs);
+        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-sm);
       }
     }
-  }
 
-  .container:not(.is-circle):not(.multiple) {
-    &:not(.image-slotted) .select-icon.select-icon--active {
-      padding-inline-start: 0;
-      padding-inline-end: var(--calcite-spacing-px);
+    &.selectable.single.image--slotted {
+      --calcite-internal-chip-container-padding-end: calc(theme("spacing[0.5]") / 2);
     }
-
-    &.image--slotted .select-icon.select-icon--active {
-      padding-inline-start: 0;
-      padding-inline-end: var(--calcite-spacing-sm);
+    &:not(.selected):not(.multiple).image--slotted {
+      --calcite-internal-chip-container-padding-start: calc(theme("spacing[0.5]") / 2);
     }
   }
 }
 
-:host([scale="m"][closable]) .container {
-  --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
-  --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-}
+:host([scale="m"]) {
+  &:host([closable]) .container {
+    --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xxs);
+  }
 
-:host([scale="l"]) {
-  @apply text-0 h-11;
+  .container {
+    --calcite-internal-chip-space-s: theme("spacing[1.5]");
+    --calcite-internal-chip-font-size: var(--calcite-font-size--1);
+    --calcite-internal-chip-block-size: 2rem /* 32px */;
+    --calcite-internal-chip-icon-size: 1.5rem /* 24px */;
+    --calcite-internal-chip-image-size: 1.5rem /* 24px */;
+    --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xs);
+    --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xs);
 
-  --calcite-chip-spacing-s-internal: theme("spacing[2]");
-  --calcite-chip-spacing-l-internal: theme("spacing[3]");
+    &.image--slotted {
+      --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xxs);
 
-  .image-container,
-  .close,
-  .select-icon--active {
-    @apply h-8 w-8;
+      &.closable {
+        --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xxs);
+      }
+    }
 
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-  }
+    &.is-circle,
+    &.is-circle.image--slotted {
+      --calcite-internal-chip-inline-size: 2rem /* 32px */;
+      --calcite-internal-chip-padding-start: var(--calcite-spacing-px);
+      --calcite-internal-chip-padding-end: var(--calcite-spacing-px);
+    }
 
-  .container.is-circle,
-  .container.is-circle.image--slotted {
-    @apply w-11 h-11;
+    &:not(.is-circle):not(.multiple) {
+      &.image--slotted {
+        --calcite-internal-chip-select-icon-padding-start: 0;
+        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-sm);
+      }
+      &:not(.image-slotted) {
+        --calcite-internal-chip-select-icon-padding-start: 0;
+        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-px);
+      }
+    }
 
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-  }
+    &.multiple {
+      --calcite-internal-chip-container-padding-end: var(--calcite-spacing-base);
+      --calcite-internal-chip-container-padding-start: var(--calcite-spacing-base);
+      --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-base);
+      --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-base);
 
-  .multiple {
-    .select-icon {
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
-    }
+      &.image--slotted {
+        --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-xxs);
+        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-sm);
 
-    &.image--slotted {
-      .select-icon {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-md);
+        &.text--slotted {
+          --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xxs);
+          --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xs);
+        }
       }
     }
   }
+}
+
+:host([scale="l"]) {
+  &:host([closable]) .container {
+    --calcite-internal-chip-container-padding-start: var(--calcite-spacing-sm);
+    --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xs);
+  }
 
   .container {
-    --calcite-internal-chip-padding-start: var(--calcite-spacing-sm);
-    --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);
+    --calcite-internal-chip-space-s: theme("spacing[2]");
+    --calcite-internal-chip-font-size: var(--calcite-font-size-0);
+    --calcite-internal-chip-block-size: 2.75rem /* 44px */;
+    --calcite-internal-chip-icon-size: 2rem /* 32px */;
+    --calcite-internal-chip-image-size: 2rem /* 32px */;
+    --calcite-internal-chip-container-padding-start: var(--calcite-spacing-sm);
+    --calcite-internal-chip-container-padding-end: var(--calcite-spacing-sm);
 
     &.image--slotted {
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);
+      --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xs);
+      --calcite-internal-chip-container-padding-end: var(--calcite-spacing-sm);
 
       &.closable {
-        --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);
-        --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
+        --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xs);
       }
     }
-  }
 
-  .container:not(.is-circle):not(.multiple) {
-    &:not(.image-slotted) .select-icon.select-icon--active {
-      padding-inline-start: 0;
-      padding-inline-end: var(--calcite-spacing-xxs);
+    &.is-circle,
+    &.is-circle.image--slotted {
+      --calcite-internal-chip-inline-size: 2.75rem /* 44px */;
     }
 
-    &.image--slotted .select-icon.select-icon--active {
-      padding-inline-start: 0;
-      padding-inline-end: var(--calcite-spacing-md);
+    &:not(.is-circle):not(.multiple) {
+      &.image--slotted {
+        --calcite-internal-chip-select-icon-padding-start: 0;
+        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-md);
+      }
+      &:not(.image-slotted) {
+        --calcite-internal-chip-select-icon-padding-start: 0;
+        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-xxs);
+      }
     }
-  }
-}
 
-:host([scale="l"][closable]) .container {
-  --calcite-internal-chip-padding-start: var(--calcite-spacing-sm);
-  --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);
-}
+    &.multiple {
+      --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-xxs);
+      --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-xxs);
 
-:host {
-  @apply inline-flex
-    cursor-default
-    rounded-full;
+      &.image--slotted {
+        .select-icon {
+          --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-xxs);
+          --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-sm);
+        }
+      }
+    }
+  }
 }
 
+// Sub-element styles
 .container {
   @apply inline-flex
   h-full
   max-w-full
   items-center
-  rounded-full
   focus-base
   justify-center
-  border
-  border-solid
-  border-color-1
   box-border
   font-medium;
 
+  border-radius: var(--calcite-chip-corner-radius, 9999px);
+  border-width: var(--calcite-border-width-sm);
+  border-style: solid;
+  font-size: var(--calcite-internal-chip-font-size, var(--calcite-font-size));
+  padding-inline-start: var(--calcite-internal-chip-container-padding-start);
+  padding-inline-end: var(--calcite-internal-chip-container-padding-end);
+  block-size: var(--calcite-internal-chip-block-size, auto);
+  inline-size: var(--calcite-internal-chip-inline-size, auto);
+
+  &:hover .select-icon--active {
+    opacity: 1;
+  }
+
   &.selectable {
     @apply cursor-pointer;
   }
   &:not(.non-interactive):focus {
     @apply focus-outset;
   }
-}
-
-:host([scale="s"]) .container.selectable.single.image--slotted {
-  --calcite-internal-chip-padding-end: calc(theme("spacing[0.5]") / 2);
-}
-
-:host([scale="s"]) .container:not(.selected):not(.multiple).image--slotted {
-  --calcite-internal-chip-padding-start: calc(theme("spacing[0.5]") / 2);
-}
-
-.container.text--slotted .title {
-  @apply truncate;
-
-  --calcite-internal-chip-padding-start: var(--calcite-chip-spacing-s-internal);
-  --calcite-internal-chip-padding-end: var(--calcite-chip-spacing-s-internal);
-}
-
-.container:not(.text--slotted) .title {
-  display: none;
-}
-
-.container:not(.image--slotted) .image-container {
-  display: none;
-}
 
-.container:not(.is-circle) {
-  &.image--slotted .image-container {
-    margin-inline-end: var(--calcite-chip-spacing-s-internal);
+  &.text--slotted .title {
+    @apply truncate;
   }
 
-  &.image--slotted .image-container ~ .chip-icon {
-    margin-inline-start: var(--calcite-chip-spacing-s-internal);
+  &:not(.text--slotted) .title,
+  &:not(.image--slotted) .image-container {
+    display: none;
   }
 
-  &.selectable:not(.text--slotted) .chip-icon {
-    margin-inline-end: var(--calcite-chip-spacing-s-internal);
-  }
+  &:not(.is-circle) {
+    &.image--slotted {
+      .image-container {
+        margin-inline-end: var(--calcite-internal-chip-space-s);
 
-  &:not(.selectable):not(.text--slotted) .chip-icon {
-    margin-inline-start: var(--calcite-chip-spacing-s-internal);
-  }
+        ~ .chip-icon {
+          margin-inline-start: var(--calcite-internal-chip-space-s);
+        }
+      }
+    }
 
-  &:not(.text--slotted) .chip-icon {
-    margin-inline-end: var(--calcite-chip-spacing-s-internal);
-  }
+    &:not(.text--slotted) {
+      &.selectable .chip-icon {
+        margin-inline-end: var(--calcite-internal-chip-space-s);
+      }
 
-  &:not(.text-slotted).image--slotted .image-container {
-    margin-inline-end: var(--calcite-chip-spacing-s-internal);
-  }
+      &:not(.selectable) .chip-icon {
+        margin-inline-start: var(--calcite-internal-chip-space-s);
+      }
+
+      &.image--slotted .image-container {
+        margin-inline-end: var(--calcite-internal-chip-space-s);
+      }
 
-  &:not(.closable):not(.text--slotted).image--slotted.selectable .image-container {
-    margin-inline-end: 0;
-    ~ .chip-icon {
-      margin-inline-start: calc(var(--calcite-chip-spacing-s-internal) * 2);
+      &:not(.closable).image--slotted.selectable .image-container {
+        margin-inline-end: 0;
+        ~ .chip-icon {
+          margin-inline-start: calc(var(--calcite-internal-chip-space-s) * 2);
+        }
+      }
     }
   }
 }
 
-.chip-icon {
-  @apply relative my-0 inline-flex duration-150 ease-in-out;
-  margin-inline: var(--calcite-chip-spacing-s-internal);
+.close,
+.select-icon--active {
+  @apply h-4 w-4;
+  block-size: var(--calcite-internal-chip-icon-size, 1rem);
+  inline-size: var(--calcite-internal-chip-icon-size, 1rem);
+}
+
+.select-icon--active {
+  padding-inline-start: var(--calcite-internal-chip-select-icon-padding-start);
+  padding-inline-end: var(--calcite-internal-chip-select-icon-padding-end);
+}
+
+.title {
+  padding-inline-start: var(--calcite-internal-chip-title-padding-start);
+  padding-inline-end: var(--calcite-internal-chip-title-padding-end);
 }
 
 .image-container {
@@ -321,37 +391,43 @@
   align-items: center;
   justify-content: center;
   pointer-events: none;
+  block-size: var(--calcite-internal-chip-image-size, 1.25rem /* 20px */);
+  inline-size: var(--calcite-internal-chip-image-size, 1.25rem /* 20px */);
+}
+
+.chip-icon {
+  @apply relative my-0 inline-flex duration-150 ease-in-out;
+  margin-inline: var(--calcite-internal-chip-space-s);
 }
 
 .close {
-  @apply focus-base
-    transition-default
-    text-color-1
-    m-0
+  @apply bg-transparent
+    border-none
     cursor-pointer
+    focus-base
     items-center
-    border-none
-    bg-transparent;
+    m-0
+    rounded-half 
+    transition-default;
+
   -webkit-appearance: none;
   display: flex;
-  border-radius: 50%;
   align-content: center;
   justify-content: center;
-  --calcite-chip-transparent-hover: var(--calcite-color-transparent-hover);
-  --calcite-chip-transparent-press: var(--calcite-color-transparent-press);
-  --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);
-  --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);
+  color: var(--calcite-close-icon-color, var(--calcite-color-text-1));
+
   &:hover {
-    background-color: var(--calcite-chip-transparent-hover);
+    background-color: var(--calcite-color-transparent-hover);
   }
   &:focus {
-    background-color: var(--calcite-chip-transparent-hover);
+    background-color: var(--calcite-color-transparent-hover);
     @apply focus-inset;
   }
   &:active {
-    background-color: var(--calcite-chip-transparent-press);
+    background-color: var(--calcite-color-transparent-press);
   }
-  & calcite-icon {
+
+  calcite-icon {
     color: inherit;
   }
 }
@@ -375,14 +451,6 @@
   }
 }
 
-:host([selected]) .select-icon {
-  opacity: 1;
-}
-
-.container:hover .select-icon--active {
-  opacity: 1;
-}
-
 .multiple .select-icon {
   @apply flex justify-center items-center;
 }
@@ -391,92 +459,5 @@ slot[name="image"]::slotted(*) {
   @apply rounded-half flex h-full w-full overflow-hidden;
 }
 
-:host([kind="neutral"]) {
-  background-color: var(--calcite-color-foreground-2);
-  color: var(--calcite-color-text-1);
-  .container {
-    border-color: transparent;
-  }
-  .close {
-    color: var(--calcite-color-text-3);
-  }
-  .chip-icon {
-    color: var(--calcite-ui-icon-color, var(--calcite-color-text-3));
-  }
-}
-
-:host([kind="inverse"]) {
-  background-color: var(--calcite-color-inverse);
-  @apply text-color-inverse;
-  .container {
-    border-color: transparent;
-  }
-  .close {
-    @apply text-color-inverse;
-  }
-  .chip-icon {
-    color: var(--calcite-ui-icon-color, var(--calcite-color-text-inverse));
-  }
-}
-
-:host([kind="brand"]) {
-  background-color: var(--calcite-color-brand);
-  color: var(--calcite-color-text-inverse);
-  .container {
-    border-color: transparent;
-  }
-  .close {
-    @apply text-color-inverse;
-  }
-  .chip-icon {
-    color: var(--calcite-ui-icon-color, var(--calcite-color-text-inverse));
-  }
-}
-
-:host([appearance="outline-fill"]),
-:host([appearance="outline"]) {
-  @apply text-color-1 bg-foreground-1;
-  .close {
-    @apply text-color-3;
-  }
-  .chip-icon {
-    color: var(--calcite-ui-icon-color, var(--calcite-color-text-3));
-  }
-}
-
-:host([appearance="outline-fill"]) {
-  @apply bg-foreground-1;
-}
-
-:host([appearance="outline"]) {
-  @apply bg-transparent;
-}
-
-:host([kind="neutral"][appearance="outline-fill"]) .container,
-:host([kind="neutral"][appearance="outline"]) .container {
-  border-color: var(--calcite-color-border-1);
-}
-
-:host([kind="inverse"][appearance="outline-fill"]) .container,
-:host([kind="inverse"][appearance="outline"]) .container {
-  border-color: var(--calcite-color-border-inverse);
-}
-
-:host([kind="brand"][appearance="outline-fill"]) .container,
-:host([kind="brand"][appearance="outline"]) .container {
-  border-color: var(--calcite-color-brand);
-}
-
-:host([kind="brand"][appearance="solid"]),
-:host([kind="inverse"][appearance="solid"]) {
-  button {
-    outline-color: var(--calcite-color-text-inverse);
-  }
-}
-
-:host([closed]) {
-  display: none;
-}
-
 @include disabled();
 @include base-component();

From c6d5f1bcacba22bd12e06781cceb317042bad529 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Wed, 28 Aug 2024 10:12:00 -0700
Subject: [PATCH 02/16] test(chip): add component tokens to stories

---
 .../src/custom-theme.stories.ts                  |  4 +++-
 .../calcite-components/src/custom-theme/chips.ts | 16 ++++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 6c4cd630844..f61b330fe65 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -14,7 +14,7 @@ import { accordion } from "./custom-theme/accordion";
 import { buttons } from "./custom-theme/button";
 import { card, cardTokens } from "./custom-theme/card";
 import { checkbox } from "./custom-theme/checkbox";
-import { chips } from "./custom-theme/chips";
+import { chips, chipTokens } from "./custom-theme/chips";
 import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
 import { icon } from "./custom-theme/icon";
@@ -118,6 +118,7 @@ export default {
     ...actionPadTokens,
     ...actionGroupTokens,
     ...cardTokens,
+    ...chipTokens,
   },
 };
 
@@ -134,6 +135,7 @@ export const theming_TestOnly = (): string => {
       ...actionPadTokens,
       ...actionGroupTokens,
       ...cardTokens,
+      ...chipTokens,
     },
     true,
   );
diff --git a/packages/calcite-components/src/custom-theme/chips.ts b/packages/calcite-components/src/custom-theme/chips.ts
index d51857fc62e..b2ec44e5213 100644
--- a/packages/calcite-components/src/custom-theme/chips.ts
+++ b/packages/calcite-components/src/custom-theme/chips.ts
@@ -1,12 +1,24 @@
 import { html } from "../../support/formatting";
 
+export const chipTokens = {
+  calciteChipBackgroundColor: "",
+  calciteChipBorderColor: "",
+  calciteChipCornerRadius: "",
+  calciteChipTextColor: "",
+};
+
 export const chips = html`<div>
     <calcite-chip>Neutral</calcite-chip>
     <calcite-chip kind="inverse">Inverse</calcite-chip>
     <calcite-chip kind="brand">Brand</calcite-chip>
   </div>
   <div>
-    <calcite-chip appearance="transparent">Neutral</calcite-chip>
-    <calcite-chip appearance="transparent" kind="inverse">Inverse</calcite-chip>
+    <calcite-chip appearance="outline-fill">Neutral</calcite-chip>
+    <calcite-chip appearance="outline-fill" kind="inverse">Inverse</calcite-chip>
     <calcite-chip appearance="outline-fill" kind="brand">Brand</calcite-chip>
+  </div>
+  <div>
+    <calcite-chip appearance="outline">Neutral</calcite-chip>
+    <calcite-chip appearance="outline" kind="inverse">Inverse</calcite-chip>
+    <calcite-chip appearance="outline" kind="brand">Brand</calcite-chip>
   </div>`;

From a7ddcc20fd1c7c76221639c718c77cf106fd4985 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Wed, 28 Aug 2024 10:12:35 -0700
Subject: [PATCH 03/16] fix(chip): remove mouse state tokens

---
 .../src/components/chip/chip.scss             | 48 ++++---------------
 1 file changed, 10 insertions(+), 38 deletions(-)

diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index b40adcb997c..898a064a9ad 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -3,12 +3,10 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-chip-background-color: Specifies
- * @prop --calcite-chip-background-color-hover: Specifies
- * @prop --calcite-chip-background-color-press: Specifies
- * @prop --calcite-chip-border-color: Specifies
- * @prop --calcite-chip-corner-radius: Specifies
- * @prop --calcite-chip-text-color: Specifies
+ * @prop --calcite-chip-background-color: Specifies the background color of the component.
+ * @prop --calcite-chip-border-color: Specifies the border color of the component.
+ * @prop --calcite-chip-corner-radius: Specifies the border radius of the component.
+ * @prop --calcite-chip-text-color: Specifies the text color of the component.
  *
  */
 
@@ -46,25 +44,9 @@
 }
 :host([appearance="outline"]) .container {
   @apply bg-transparent;
-
-  &:hover,
-  &:focus {
-    background-color: var(--calcite-color-transparent-hover);
-  }
-  &:active {
-    background-color: var(--calcite-color-transparent-press);
-  }
 }
 :host([appearance="outline-fill"]) .container {
   background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-1));
-
-  &:hover,
-  &:focus {
-    background-color: var(--calcite-chip-background-color-hover, var(--calcite-color-foreground-2));
-  }
-  &:active {
-    background-color: var(--calcite-chip-background-color-press, var(--calcite-color-foreground-3));
-  }
 }
 :host([appearance="solid"]) {
   .container {
@@ -86,28 +68,12 @@
   &:host([kind="brand"]) {
     .container {
       background-color: var(--calcite-chip-background-color, var(--calcite-color-brand));
-
-      &:host(:hover),
-      &:host(:focus) {
-        background-color: var(--calcite-chip-background-color-hover, var(--calcite-color-brand-hover));
-      }
-      &:host(:active) {
-        background-color: var(--calcite-chip-background-color-press, var(--calcite-color-brand-press));
-      }
     }
   }
 
   &:host([kind="inverse"]) {
     .container {
       background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse));
-
-      &:host(:hover),
-      &:host(:focus) {
-        background-color: var(--calcite-chip-background-color-hover, var(--calcite-color-inverse-hover));
-      }
-      &:host(:active) {
-        background-color: var(--calcite-chip-background-color-press, var(--calcite-color-inverse-press));
-      }
     }
   }
 
@@ -136,6 +102,8 @@
     --calcite-internal-chip-image-size: 1.25rem /* 20px */;
     --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xxs);
     --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xxs);
+    --calcite-internal-chip-title-padding-start: var(--calcite-spacing-xxs);
+    --calcite-internal-chip-title-padding-end: var(--calcite-spacing-xxs);
 
     &.image--slotted {
       --calcite-internal-chip-container-padding-start: var(--calcite-spacing-px);
@@ -195,6 +163,8 @@
     --calcite-internal-chip-image-size: 1.5rem /* 24px */;
     --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xs);
     --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xs);
+    --calcite-internal-chip-title-padding-start: var(--calcite-spacing-xs);
+    --calcite-internal-chip-title-padding-end: var(--calcite-spacing-xs);
 
     &.image--slotted {
       --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xxs);
@@ -255,6 +225,8 @@
     --calcite-internal-chip-image-size: 2rem /* 32px */;
     --calcite-internal-chip-container-padding-start: var(--calcite-spacing-sm);
     --calcite-internal-chip-container-padding-end: var(--calcite-spacing-sm);
+    --calcite-internal-chip-title-padding-start: var(--calcite-spacing-sm);
+    --calcite-internal-chip-title-padding-end: var(--calcite-spacing-sm);
 
     &.image--slotted {
       --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xs);

From b226cb9c834462d830b63eae50101b811c265ee1 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Wed, 28 Aug 2024 13:10:24 -0700
Subject: [PATCH 04/16] test(chip): update e2e tests

---
 .../src/components/chip/chip.e2e.ts           | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts
index b769e2c2382..8bf181a2117 100644
--- a/packages/calcite-components/src/components/chip/chip.e2e.ts
+++ b/packages/calcite-components/src/components/chip/chip.e2e.ts
@@ -1,5 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests";
+import { accessible, disabled, focusable, hidden, renders, slots, t9n, themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-chip", () => {
@@ -238,4 +239,32 @@ describe("calcite-chip", () => {
   describe("translation support", () => {
     t9n("calcite-chip");
   });
+
+  describe("themed", () => {
+    describe("default", () => {
+      themed(html`calcite-chip`, {
+        "--calcite-chip-background-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-chip-text-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "color",
+        },
+        "--calcite-chip-corner-radius": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderRadius",
+        },
+      });
+    });
+
+    describe("outline", () => {
+      themed(html`<calcite-chip appearance="outline" kind="neutral">Layers</calcite-chip>`, {
+        "--calcite-chip-border-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderColor",
+        },
+      });
+    });
+  });
 });

From b052c8d06ecb0e44f9eeb18d38b951859d42e7ba Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Wed, 28 Aug 2024 13:26:23 -0700
Subject: [PATCH 05/16] feat(chip-group): add component tokens

---
 .../src/components/chip-group/chip-group.scss | 19 ++++++++++++++++---
 .../src/custom-theme.stories.ts               |  4 +++-
 .../src/custom-theme/chips.ts                 |  8 ++++++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/calcite-components/src/components/chip-group/chip-group.scss b/packages/calcite-components/src/components/chip-group/chip-group.scss
index 978bb621adb..353e6572882 100644
--- a/packages/calcite-components/src/components/chip-group/chip-group.scss
+++ b/packages/calcite-components/src/components/chip-group/chip-group.scss
@@ -1,3 +1,12 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-chip-group-items-space: Specifies spacing between items in the component.
+ *
+ */
+
 :host {
   display: flex;
 }
@@ -6,7 +15,7 @@
   display: flex;
   inline-size: 100%;
   flex-wrap: wrap;
-  gap: theme("spacing.2");
+  gap: var(--calcite-chip-group-items-space, var(--calcite-internal-chip-group-items-space, theme("spacing.2")));
 }
 
 ::slotted(calcite-chip) {
@@ -14,11 +23,15 @@
 }
 
 :host([scale="s"]) .container {
-  gap: theme("spacing.1");
+  --calcite-internal-chip-group-items-space: theme("spacing.1");
+}
+
+:host([scale="m"]) .container {
+  --calcite-internal-chip-group-items-space: theme("spacing.2");
 }
 
 :host([scale="l"]) .container {
-  gap: theme("spacing.3");
+  --calcite-internal-chip-group-items-space: theme("spacing.3");
 }
 
 @include disabled();
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index f61b330fe65..0bbc09922c3 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -14,7 +14,7 @@ import { accordion } from "./custom-theme/accordion";
 import { buttons } from "./custom-theme/button";
 import { card, cardTokens } from "./custom-theme/card";
 import { checkbox } from "./custom-theme/checkbox";
-import { chips, chipTokens } from "./custom-theme/chips";
+import { chips, chipGroupTokens, chipTokens } from "./custom-theme/chips";
 import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
 import { icon } from "./custom-theme/icon";
@@ -119,6 +119,7 @@ export default {
     ...actionGroupTokens,
     ...cardTokens,
     ...chipTokens,
+    ...chipGroupTokens,
   },
 };
 
@@ -136,6 +137,7 @@ export const theming_TestOnly = (): string => {
       ...actionGroupTokens,
       ...cardTokens,
       ...chipTokens,
+      ...chipGroupTokens,
     },
     true,
   );
diff --git a/packages/calcite-components/src/custom-theme/chips.ts b/packages/calcite-components/src/custom-theme/chips.ts
index b2ec44e5213..bba1b218777 100644
--- a/packages/calcite-components/src/custom-theme/chips.ts
+++ b/packages/calcite-components/src/custom-theme/chips.ts
@@ -7,6 +7,10 @@ export const chipTokens = {
   calciteChipTextColor: "",
 };
 
+export const chipGroupTokens = {
+  calciteChipGroupItemsSpace: "",
+};
+
 export const chips = html`<div>
     <calcite-chip>Neutral</calcite-chip>
     <calcite-chip kind="inverse">Inverse</calcite-chip>
@@ -17,8 +21,8 @@ export const chips = html`<div>
     <calcite-chip appearance="outline-fill" kind="inverse">Inverse</calcite-chip>
     <calcite-chip appearance="outline-fill" kind="brand">Brand</calcite-chip>
   </div>
-  <div>
+  <calcite-chip-group>
     <calcite-chip appearance="outline">Neutral</calcite-chip>
     <calcite-chip appearance="outline" kind="inverse">Inverse</calcite-chip>
     <calcite-chip appearance="outline" kind="brand">Brand</calcite-chip>
-  </div>`;
+  </calcite-chip-group>`;

From 3b0ac611b7601b1aa505cd5929435dcfadcee5b2 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Fri, 30 Aug 2024 11:02:03 -0700
Subject: [PATCH 06/16] Revert "feat(chip-group): add component tokens"

This reverts commit b052c8d06ecb0e44f9eeb18d38b951859d42e7ba.
---
 .../src/components/chip-group/chip-group.scss | 19 +++----------------
 .../src/custom-theme.stories.ts               |  4 +---
 .../src/custom-theme/chips.ts                 |  8 ++------
 3 files changed, 6 insertions(+), 25 deletions(-)

diff --git a/packages/calcite-components/src/components/chip-group/chip-group.scss b/packages/calcite-components/src/components/chip-group/chip-group.scss
index 353e6572882..978bb621adb 100644
--- a/packages/calcite-components/src/components/chip-group/chip-group.scss
+++ b/packages/calcite-components/src/components/chip-group/chip-group.scss
@@ -1,12 +1,3 @@
-/**
- * CSS Custom Properties
- *
- * These properties can be overridden using the component's tag as selector.
- *
- * @prop --calcite-chip-group-items-space: Specifies spacing between items in the component.
- *
- */
-
 :host {
   display: flex;
 }
@@ -15,7 +6,7 @@
   display: flex;
   inline-size: 100%;
   flex-wrap: wrap;
-  gap: var(--calcite-chip-group-items-space, var(--calcite-internal-chip-group-items-space, theme("spacing.2")));
+  gap: theme("spacing.2");
 }
 
 ::slotted(calcite-chip) {
@@ -23,15 +14,11 @@
 }
 
 :host([scale="s"]) .container {
-  --calcite-internal-chip-group-items-space: theme("spacing.1");
-}
-
-:host([scale="m"]) .container {
-  --calcite-internal-chip-group-items-space: theme("spacing.2");
+  gap: theme("spacing.1");
 }
 
 :host([scale="l"]) .container {
-  --calcite-internal-chip-group-items-space: theme("spacing.3");
+  gap: theme("spacing.3");
 }
 
 @include disabled();
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 030e2502ba8..c18e4602ab9 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -14,7 +14,7 @@ import { accordion } from "./custom-theme/accordion";
 import { buttons } from "./custom-theme/button";
 import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
 import { checkbox } from "./custom-theme/checkbox";
-import { chips, chipGroupTokens, chipTokens } from "./custom-theme/chips";
+import { chips, chipTokens } from "./custom-theme/chips";
 import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
 import { icon } from "./custom-theme/icon";
@@ -120,7 +120,6 @@ export default {
     ...actionGroupTokens,
     ...cardTokens,
     ...chipTokens,
-    ...chipGroupTokens,
   },
 };
 
@@ -138,7 +137,6 @@ export const theming_TestOnly = (): string => {
       ...actionGroupTokens,
       ...cardTokens,
       ...chipTokens,
-      ...chipGroupTokens,
     },
     true,
   );
diff --git a/packages/calcite-components/src/custom-theme/chips.ts b/packages/calcite-components/src/custom-theme/chips.ts
index bba1b218777..b2ec44e5213 100644
--- a/packages/calcite-components/src/custom-theme/chips.ts
+++ b/packages/calcite-components/src/custom-theme/chips.ts
@@ -7,10 +7,6 @@ export const chipTokens = {
   calciteChipTextColor: "",
 };
 
-export const chipGroupTokens = {
-  calciteChipGroupItemsSpace: "",
-};
-
 export const chips = html`<div>
     <calcite-chip>Neutral</calcite-chip>
     <calcite-chip kind="inverse">Inverse</calcite-chip>
@@ -21,8 +17,8 @@ export const chips = html`<div>
     <calcite-chip appearance="outline-fill" kind="inverse">Inverse</calcite-chip>
     <calcite-chip appearance="outline-fill" kind="brand">Brand</calcite-chip>
   </div>
-  <calcite-chip-group>
+  <div>
     <calcite-chip appearance="outline">Neutral</calcite-chip>
     <calcite-chip appearance="outline" kind="inverse">Inverse</calcite-chip>
     <calcite-chip appearance="outline" kind="brand">Brand</calcite-chip>
-  </calcite-chip-group>`;
+  </div>`;

From 2332a09f5f3dd1d642bfbf7f3e02d3fa3156cc20 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Fri, 30 Aug 2024 18:51:48 -0700
Subject: [PATCH 07/16] fix(chip): chip element spacing

After an inspection of the chip component in figma this adds additional internal variables to clarify what elements are changing and based on what state changes.
Also breaks out reusable .close mixin
---
 .../src/assets/styles/includes.scss           |  37 +++
 .../calcite-components/src/components.d.ts    | 100 +++++++
 .../src/components/chip/chip.scss             | 279 ++++--------------
 3 files changed, 197 insertions(+), 219 deletions(-)

diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
index 08e11b696e2..5470d9ebfba 100644
--- a/packages/calcite-components/src/assets/styles/includes.scss
+++ b/packages/calcite-components/src/assets/styles/includes.scss
@@ -152,3 +152,40 @@
     }
   }
 }
+
+@mixin close-button($size: "var(--calcite-internal-close-size, 1.5rem /* 24px */)", $padding: "0") {
+  .close {
+    @apply border-none
+      cursor-pointer
+      focus-base
+      items-center
+      m-0
+      rounded-half 
+      transition-default;
+
+    background-color: var(--calcite-close-background-color, var(--calcite-color-transparent));
+    -webkit-appearance: none;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    color: var(--calcite-close-icon-color, var(--calcite-color-text-1));
+    block-size: #{$size};
+    inline-size: #{$size};
+    padding: #{$padding};
+
+    &:hover,
+    &:focus {
+      background-color: var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover));
+    }
+    &:focus {
+      @apply focus-inset;
+    }
+    &:active {
+      background-color: var(--calcite-close-background-color-press, var(--calcite-color-transparent-press));
+    }
+
+    calcite-icon {
+      color: inherit;
+    }
+  }
+}
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 7f6ae2a934b..b9bb50416b7 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -9,93 +9,193 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind,
 import { RequestedItem } from "./components/accordion/interfaces";
 import { IconNameOrString } from "./components/icon/interfaces";
 import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+import { ActionMessages } from "./components/action/assets/action/t9n";
 import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 import { Columns } from "./components/action-group/interfaces";
+import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 import { AlertDuration, AlertQueue } from "./components/alert/interfaces";
 import { NumberingSystem } from "./utils/locale";
+import { AlertMessages } from "./components/alert/assets/alert/t9n";
 import { HeadingLevel } from "./components/functional/Heading";
+import { BlockMessages } from "./components/block/assets/block/t9n";
 import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+import { ButtonMessages } from "./components/button/assets/button/t9n";
+import { CardMessages } from "./components/card/assets/card/t9n";
 import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 import { MutableValidityState } from "./utils/form";
+import { ChipMessages } from "./components/chip/assets/chip/t9n";
 import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 import { Format } from "./components/color-picker/utils";
+import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
+import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
 import { OverlayPositioning as OverlayPositioning1 } from "./components";
 import { DialogPlacement } from "./components/dialog/interfaces";
 import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+import { FilterMessages } from "./components/filter/assets/filter/t9n";
 import { FlowItemLikeElement } from "./components/flow/interfaces";
+import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 import { ColorStop, DataSeries } from "./components/graph/interfaces";
+import { HandleMessages } from "./components/handle/assets/handle/t9n";
 import { HandleChange, HandleNudge } from "./components/handle/interfaces";
+import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 import { InputPlacement } from "./components/input/interfaces";
+import { InputMessages } from "./components/input/assets/input/t9n";
+import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 import { ListDragDetail } from "./components/list/interfaces";
 import { ItemData } from "./components/list-item/interfaces";
+import { ListMessages } from "./components/list/assets/list/t9n";
 import { SelectionAppearance } from "./components/list/resources";
+import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+import { MenuMessages } from "./components/menu/assets/menu/t9n";
+import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+import { ModalMessages } from "./components/modal/assets/modal/t9n";
+import { NoticeMessages } from "./components/notice/assets/notice/t9n";
+import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+import { PanelMessages } from "./components/panel/assets/panel/t9n";
 import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 import { ICON_TYPES } from "./components/pick-list/resources";
+import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+import { PopoverMessages } from "./components/popover/assets/popover/t9n";
+import { RatingMessages } from "./components/rating/assets/rating/t9n";
+import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 import { DisplayMode } from "./components/sheet/interfaces";
 import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 import { DragDetail } from "./utils/sortableComponent";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 import { Element } from "@stencil/core";
 import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+import { TableMessages } from "./components/table/assets/table/t9n";
+import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 import { TileSelectType } from "./components/tile-select/interfaces";
 import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+import { TipMessages } from "./components/tip/assets/tip/t9n";
+import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 import { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 export { RequestedItem } from "./components/accordion/interfaces";
 export { IconNameOrString } from "./components/icon/interfaces";
 export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+export { ActionMessages } from "./components/action/assets/action/t9n";
 export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 export { Columns } from "./components/action-group/interfaces";
+export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 export { AlertDuration, AlertQueue } from "./components/alert/interfaces";
 export { NumberingSystem } from "./utils/locale";
+export { AlertMessages } from "./components/alert/assets/alert/t9n";
 export { HeadingLevel } from "./components/functional/Heading";
+export { BlockMessages } from "./components/block/assets/block/t9n";
 export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+export { ButtonMessages } from "./components/button/assets/button/t9n";
+export { CardMessages } from "./components/card/assets/card/t9n";
 export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 export { MutableValidityState } from "./utils/form";
+export { ChipMessages } from "./components/chip/assets/chip/t9n";
 export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 export { Format } from "./components/color-picker/utils";
+export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 export { DateLocaleData } from "./components/date-picker/utils";
 export { HoverRange } from "./utils/date";
+export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
 export { OverlayPositioning as OverlayPositioning1 } from "./components";
 export { DialogPlacement } from "./components/dialog/interfaces";
 export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+export { FilterMessages } from "./components/filter/assets/filter/t9n";
 export { FlowItemLikeElement } from "./components/flow/interfaces";
+export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 export { ColorStop, DataSeries } from "./components/graph/interfaces";
+export { HandleMessages } from "./components/handle/assets/handle/t9n";
 export { HandleChange, HandleNudge } from "./components/handle/interfaces";
+export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 export { InputPlacement } from "./components/input/interfaces";
+export { InputMessages } from "./components/input/assets/input/t9n";
+export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+export { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 export { ListDragDetail } from "./components/list/interfaces";
 export { ItemData } from "./components/list-item/interfaces";
+export { ListMessages } from "./components/list/assets/list/t9n";
 export { SelectionAppearance } from "./components/list/resources";
+export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+export { MenuMessages } from "./components/menu/assets/menu/t9n";
+export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+export { ModalMessages } from "./components/modal/assets/modal/t9n";
+export { NoticeMessages } from "./components/notice/assets/notice/t9n";
+export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+export { PanelMessages } from "./components/panel/assets/panel/t9n";
 export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 export { ICON_TYPES } from "./components/pick-list/resources";
+export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+export { PopoverMessages } from "./components/popover/assets/popover/t9n";
+export { RatingMessages } from "./components/rating/assets/rating/t9n";
+export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 export { DisplayMode } from "./components/sheet/interfaces";
 export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 export { DragDetail } from "./utils/sortableComponent";
 export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 export { Element } from "@stencil/core";
 export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+export { TableMessages } from "./components/table/assets/table/t9n";
+export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 export { TileSelectType } from "./components/tile-select/interfaces";
 export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+export { TipMessages } from "./components/tip/assets/tip/t9n";
+export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 export { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export namespace Components {
     interface CalciteAccordion {
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index 53d7be061bf..2bd7fd1b169 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -94,174 +94,84 @@
 
 :host([scale="s"]) {
   .container {
-    --calcite-internal-chip-space-s: theme("spacing[1]");
-    --calcite-internal-chip-font-size: var(--calcite-font-size--2);
     --calcite-internal-chip-block-size: 1.5rem /* 24px */;
+    --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;
+    --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
+    --calcite-internal-chip-font-size: var(--calcite-font-size--2);
     --calcite-internal-chip-icon-size: 1rem /* 16px */;
+    --calcite-internal-chip-icon-space: 0.25rem /* 4px */;
     --calcite-internal-chip-image-size: 1.25rem /* 20px */;
-    --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xxs);
-    --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xxs);
-    --calcite-internal-chip-title-padding-start: var(--calcite-spacing-xxs);
-    --calcite-internal-chip-title-padding-end: var(--calcite-spacing-xxs);
+    --calcite-internal-chip-title-space: 0.25rem /* 4px */;
+    --calcite-internal-close-size: 1rem /* 16px */;
 
     &.image--slotted {
-      --calcite-internal-chip-container-padding-start: var(--calcite-spacing-px);
-
-      &.closable {
-        --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xxs);
-      }
-    }
-
-    &.is-circle,
-    &.is-circle.image--slotted {
-      --calcite-internal-chip-inline-size: 1.5rem /* 24px */;
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-px);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-px);
-    }
-
-    &:not(.is-circle):not(.multiple) {
-      &.image--slotted {
-        --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-base);
-        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-sm);
-      }
-      &:not(.image-slotted) {
-        --calcite-internal-chip-select-icon-padding-start: 0;
-        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-xs);
-      }
+      --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;
+      --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+      --calcite-internal-chip-image-space-x-end: 0.25rem /* 4px */;
+      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+      --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
     }
 
-    &.multiple {
-      --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-xxs);
-      --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-xxs);
-
-      &.image--slotted {
-        --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-xs);
-        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-sm);
-      }
-    }
-
-    &.selectable.single.image--slotted {
-      --calcite-internal-chip-container-padding-end: calc(theme("spacing[0.5]") / 2);
-    }
-    &:not(.selected):not(.multiple).image--slotted {
-      --calcite-internal-chip-container-padding-start: calc(theme("spacing[0.5]") / 2);
+    &:not(.image--slotted) {
+      --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;
+      --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;
     }
   }
 }
 
 :host([scale="m"]) {
-  &:host([closable]) .container {
-    --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xxs);
-  }
-
   .container {
-    --calcite-internal-chip-space-s: theme("spacing[1.5]");
-    --calcite-internal-chip-font-size: var(--calcite-font-size--1);
     --calcite-internal-chip-block-size: 2rem /* 32px */;
+    --calcite-internal-chip-container-space-x-end: 0.375rem /* 6px */;
+    --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;
+    --calcite-internal-chip-font-size: var(--calcite-font-size--1);
     --calcite-internal-chip-icon-size: 1.5rem /* 24px */;
+    --calcite-internal-chip-icon-space: 0.375rem /* 6px */;
     --calcite-internal-chip-image-size: 1.5rem /* 24px */;
-    --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xs);
-    --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xs);
-    --calcite-internal-chip-title-padding-start: var(--calcite-spacing-xs);
-    --calcite-internal-chip-title-padding-end: var(--calcite-spacing-xs);
+    --calcite-internal-chip-title-space: 0.375rem /* 6px */;
+    --calcite-internal-close-size: 1.5rem /* 24px */;
 
     &.image--slotted {
-      --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xxs);
-
-      &.closable {
-        --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xxs);
-      }
-    }
-
-    &.is-circle,
-    &.is-circle.image--slotted {
-      --calcite-internal-chip-inline-size: 2rem /* 32px */;
-      --calcite-internal-chip-padding-start: var(--calcite-spacing-px);
-      --calcite-internal-chip-padding-end: var(--calcite-spacing-px);
+      --calcite-internal-chip-image-space-x-end: 0.375rem /* 6px */;
+      --calcite-internal-chip-select-space-x-end: 0.75rem /* 12px */;
+      --calcite-internal-chip-select-space-x-start: 0.5rem /* 8px */;
     }
 
-    &:not(.is-circle):not(.multiple) {
-      &.image--slotted {
-        --calcite-internal-chip-select-icon-padding-start: 0;
-        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-sm);
-      }
-      &:not(.image-slotted) {
-        --calcite-internal-chip-select-icon-padding-start: 0;
-        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-px);
-      }
-    }
-
-    &.multiple {
-      --calcite-internal-chip-container-padding-end: var(--calcite-spacing-base);
-      --calcite-internal-chip-container-padding-start: var(--calcite-spacing-base);
-      --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-base);
-      --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-base);
-
-      &.image--slotted {
-        --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-xxs);
-        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-sm);
-
-        &.text--slotted {
-          --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xxs);
-          --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xs);
-        }
-      }
+    &:not(.image--slotted) {
+      --calcite-internal-chip-select-space-x-end: 0.375rem /* 6px */;
+      --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
     }
   }
 }
 
 :host([scale="l"]) {
-  &:host([closable]) .container {
-    --calcite-internal-chip-container-padding-start: var(--calcite-spacing-sm);
-    --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xs);
+  .container {
+    --calcite-internal-chip-font-size: var(--calcite-font-size-0);
+    --calcite-internal-chip-block-size: 2.75rem /* 44px */;
+    --calcite-internal-chip-icon-size: 2rem /* 32px */;
+    --calcite-internal-chip-image-size: 2rem /* 32px */;
   }
 
   .container {
-    --calcite-internal-chip-space-s: theme("spacing[2]");
-    --calcite-internal-chip-font-size: var(--calcite-font-size-0);
     --calcite-internal-chip-block-size: 2.75rem /* 44px */;
+    --calcite-internal-chip-container-space-x-end: 0.375rem /* 6px */;
+    --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;
+    --calcite-internal-chip-font-size: var(--calcite-font-size--0);
     --calcite-internal-chip-icon-size: 2rem /* 32px */;
+    --calcite-internal-chip-icon-space: 0.5rem /* 8px */;
     --calcite-internal-chip-image-size: 2rem /* 32px */;
-    --calcite-internal-chip-container-padding-start: var(--calcite-spacing-sm);
-    --calcite-internal-chip-container-padding-end: var(--calcite-spacing-sm);
-    --calcite-internal-chip-title-padding-start: var(--calcite-spacing-sm);
-    --calcite-internal-chip-title-padding-end: var(--calcite-spacing-sm);
+    --calcite-internal-chip-title-space: 0.5rem /* 8px */;
+    --calcite-internal-close-size: 2rem /* 32px */;
 
     &.image--slotted {
-      --calcite-internal-chip-container-padding-start: var(--calcite-spacing-xs);
-      --calcite-internal-chip-container-padding-end: var(--calcite-spacing-sm);
-
-      &.closable {
-        --calcite-internal-chip-container-padding-end: var(--calcite-spacing-xs);
-      }
+      --calcite-internal-chip-image-space-x-end: 0.5rem /* 8px */;
+      --calcite-internal-chip-select-space-x-end: 1rem /* 16px */;
+      --calcite-internal-chip-select-space-x-start: 0.625rem /* 10px */;
     }
 
-    &.is-circle,
-    &.is-circle.image--slotted {
-      --calcite-internal-chip-inline-size: 2.75rem /* 44px */;
-    }
-
-    &:not(.is-circle):not(.multiple) {
-      &.image--slotted {
-        --calcite-internal-chip-select-icon-padding-start: 0;
-        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-md);
-      }
-      &:not(.image-slotted) {
-        --calcite-internal-chip-select-icon-padding-start: 0;
-        --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-xxs);
-      }
-    }
-
-    &.multiple {
-      --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-xxs);
-      --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-xxs);
-
-      &.image--slotted {
-        .select-icon {
-          --calcite-internal-chip-select-icon-padding-start: var(--calcite-spacing-xxs);
-          --calcite-internal-chip-select-icon-padding-end: var(--calcite-spacing-sm);
-        }
-      }
+    &:not(.image--slotted) {
+      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+      --calcite-internal-chip-select-space-x-start: 0.5rem /* 8px */;
     }
   }
 }
@@ -281,10 +191,11 @@
   border-width: var(--calcite-border-width-sm);
   border-style: solid;
   font-size: var(--calcite-internal-chip-font-size, var(--calcite-font-size));
-  padding-inline-start: var(--calcite-internal-chip-container-padding-start);
-  padding-inline-end: var(--calcite-internal-chip-container-padding-end);
+  padding-inline-start: var(--calcite-internal-chip-container-space-x-start);
+  padding-inline-end: var(--calcite-internal-chip-container-space-x-end);
   block-size: var(--calcite-internal-chip-block-size, auto);
   inline-size: var(--calcite-internal-chip-inline-size, auto);
+  min-inline-size: var(--calcite-internal-chip-block-size, auto);
 
   &:hover .select-icon--active {
     opacity: 1;
@@ -305,56 +216,10 @@
   &:not(.image--slotted) .image-container {
     display: none;
   }
-
-  &:not(.is-circle) {
-    &.image--slotted {
-      .image-container {
-        margin-inline-end: var(--calcite-internal-chip-space-s);
-
-        ~ .chip-icon {
-          margin-inline-start: var(--calcite-internal-chip-space-s);
-        }
-      }
-    }
-
-    &:not(.text--slotted) {
-      &.selectable .chip-icon {
-        margin-inline-end: var(--calcite-internal-chip-space-s);
-      }
-
-      &:not(.selectable) .chip-icon {
-        margin-inline-start: var(--calcite-internal-chip-space-s);
-      }
-
-      &.image--slotted .image-container {
-        margin-inline-end: var(--calcite-internal-chip-space-s);
-      }
-
-      &:not(.closable).image--slotted.selectable .image-container {
-        margin-inline-end: 0;
-        ~ .chip-icon {
-          margin-inline-start: calc(var(--calcite-internal-chip-space-s) * 2);
-        }
-      }
-    }
-  }
-}
-
-.close,
-.select-icon--active {
-  @apply h-4 w-4;
-  block-size: var(--calcite-internal-chip-icon-size, 1rem);
-  inline-size: var(--calcite-internal-chip-icon-size, 1rem);
-}
-
-.select-icon--active {
-  padding-inline-start: var(--calcite-internal-chip-select-icon-padding-start);
-  padding-inline-end: var(--calcite-internal-chip-select-icon-padding-end);
 }
 
 .title {
-  padding-inline-start: var(--calcite-internal-chip-title-padding-start);
-  padding-inline-end: var(--calcite-internal-chip-title-padding-end);
+  padding-inline: var(--calcite-internal-chip-title-space);
 }
 
 .image-container {
@@ -362,45 +227,15 @@
   align-items: center;
   justify-content: center;
   pointer-events: none;
-  block-size: var(--calcite-internal-chip-image-size, 1.25rem /* 20px */);
-  inline-size: var(--calcite-internal-chip-image-size, 1.25rem /* 20px */);
+  block-size: var(--calcite-internal-chip-image-size, 1.5rem /* 24px */);
+  inline-size: var(--calcite-internal-chip-image-size, 1.5rem /* 24px */);
+  padding-inline-start: 0;
+  padding-inline-end: var(--calcite-internal-chip-image-space-x-end, 0);
 }
 
 .chip-icon {
   @apply relative my-0 inline-flex duration-150 ease-in-out;
-  margin-inline: var(--calcite-internal-chip-space-s);
-}
-
-.close {
-  @apply bg-transparent
-    border-none
-    cursor-pointer
-    focus-base
-    items-center
-    m-0
-    rounded-half 
-    transition-default;
-
-  -webkit-appearance: none;
-  display: flex;
-  align-content: center;
-  justify-content: center;
-  color: var(--calcite-close-icon-color, var(--calcite-color-text-1));
-
-  &:hover {
-    background-color: var(--calcite-color-transparent-hover);
-  }
-  &:focus {
-    background-color: var(--calcite-color-transparent-hover);
-    @apply focus-inset;
-  }
-  &:active {
-    background-color: var(--calcite-color-transparent-press);
-  }
-
-  calcite-icon {
-    color: inherit;
-  }
+  padding-inline: var(--calcite-internal-chip-icon-space, 0.375rem /* 6px */);
 }
 
 .select-icon {
@@ -409,27 +244,33 @@
   align-items: center;
   display: flex;
   inset-block-start: -1px;
-  position: relative;
+  position: absolute;
   visibility: hidden;
-  inline-size: 0;
+  inline-size: auto;
   opacity: 0;
   transition:
     opacity 0.15s ease-in-out,
     inline-size 0.15s ease-in-out;
 
   &.select-icon--active {
+    position: relative;
     visibility: visible;
     opacity: 0.5;
+    padding-inline-start: var(--calcite-internal-chip-select-space-x-start);
+    padding-inline-end: var(--calcite-internal-chip-select-space-x-end);
   }
 }
 
 .multiple .select-icon {
   @apply flex justify-center items-center;
+  padding-inline-start: var(--calcite-internal-chip-select-space-x-start);
+  padding-inline-end: var(--calcite-internal-chip-select-space-x-end);
 }
 
 slot[name="image"]::slotted(*) {
   @apply rounded-half flex h-full w-full overflow-hidden;
 }
 
+@include close-button();
 @include disabled();
 @include base-component();

From 5fe9b0cac34e24908c71adbbd5c544929c40a6b7 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Mon, 2 Sep 2024 00:16:47 -0700
Subject: [PATCH 08/16] fix(chip): internal variables in selection states

---
 .../src/components/chip/chip.scss             | 91 +++++++++++++++----
 1 file changed, 72 insertions(+), 19 deletions(-)

diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index 2bd7fd1b169..7f355d49b0d 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -104,18 +104,32 @@
     --calcite-internal-chip-title-space: 0.25rem /* 4px */;
     --calcite-internal-close-size: 1rem /* 16px */;
 
-    &.image--slotted {
-      --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;
+    &.is-circle {
+      --calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);
       --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
-      --calcite-internal-chip-image-space-x-end: 0.25rem /* 4px */;
-      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+    }
+
+    &.image--slotted:not(.is-circle) {
       --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
+      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+      --calcite-internal-chip-image-space-x-end: 0.25rem /* 4px */;
+      --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
     }
 
-    &:not(.image--slotted) {
+    &:not(.image--slotted, .is-circle) {
       --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;
       --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;
     }
+
+    &.selected.single {
+      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+      --calcite-internal-chip-select-space-x-start: 0.15rem /* 2px */;
+    }
+
+    &.multiple {
+      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+      --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
+    }
   }
 }
 
@@ -131,44 +145,76 @@
     --calcite-internal-chip-title-space: 0.375rem /* 6px */;
     --calcite-internal-close-size: 1.5rem /* 24px */;
 
-    &.image--slotted {
+    &.is-circle {
+      --calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);
+      --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+    }
+
+    &.image--slotted:not(.is-circle) {
       --calcite-internal-chip-image-space-x-end: 0.375rem /* 6px */;
       --calcite-internal-chip-select-space-x-end: 0.75rem /* 12px */;
       --calcite-internal-chip-select-space-x-start: 0.5rem /* 8px */;
+      --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
     }
 
-    &:not(.image--slotted) {
+    &.closable:not(.is-circle) {
+      --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;
+    }
+
+    &:not(.image--slotted, .is-circle) {
       --calcite-internal-chip-select-space-x-end: 0.375rem /* 6px */;
       --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
     }
+
+    &.selected.single {
+      --calcite-internal-chip-select-space-x-end: 0.75rem /* 12px */;
+      --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;
+    }
+    &.multiple {
+      --calcite-internal-chip-select-space-x-end: 0.75rem /* 12px */;
+      --calcite-internal-chip-select-space-x-start: 0.5rem /* 8px */;
+    }
   }
 }
 
 :host([scale="l"]) {
-  .container {
-    --calcite-internal-chip-font-size: var(--calcite-font-size-0);
-    --calcite-internal-chip-block-size: 2.75rem /* 44px */;
-    --calcite-internal-chip-icon-size: 2rem /* 32px */;
-    --calcite-internal-chip-image-size: 2rem /* 32px */;
-  }
-
   .container {
     --calcite-internal-chip-block-size: 2.75rem /* 44px */;
-    --calcite-internal-chip-container-space-x-end: 0.375rem /* 6px */;
-    --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;
-    --calcite-internal-chip-font-size: var(--calcite-font-size--0);
+    --calcite-internal-chip-container-space-x-end: 0.5rem /* 8px */;
+    --calcite-internal-chip-container-space-x-start: 0.5rem /* 8px */;
+    --calcite-internal-chip-font-size: var(--calcite-font-size-0);
     --calcite-internal-chip-icon-size: 2rem /* 32px */;
     --calcite-internal-chip-icon-space: 0.5rem /* 8px */;
     --calcite-internal-chip-image-size: 2rem /* 32px */;
     --calcite-internal-chip-title-space: 0.5rem /* 8px */;
     --calcite-internal-close-size: 2rem /* 32px */;
 
-    &.image--slotted {
+    &.is-circle {
+      --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;
+      --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
+    }
+
+    &.image--slotted:not(.is-circle) {
+      --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;
       --calcite-internal-chip-image-space-x-end: 0.5rem /* 8px */;
       --calcite-internal-chip-select-space-x-end: 1rem /* 16px */;
       --calcite-internal-chip-select-space-x-start: 0.625rem /* 10px */;
     }
 
+    &.closable:not(.is-circle) {
+      --calcite-internal-chip-container-space-x-end: 0.375rem /* 6px */;
+    }
+
+    &.selected.single {
+      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+      --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;
+    }
+
+    &.multiple {
+      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+      --calcite-internal-chip-select-space-x-start: 0.65rem /* 10px */;
+    }
+
     &:not(.image--slotted) {
       --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
       --calcite-internal-chip-select-space-x-start: 0.5rem /* 8px */;
@@ -216,6 +262,13 @@
   &:not(.image--slotted) .image-container {
     display: none;
   }
+
+  &.is-circle {
+    .chip-icon,
+    .image-container {
+      padding: 0;
+    }
+  }
 }
 
 .title {
@@ -256,7 +309,7 @@
     position: relative;
     visibility: visible;
     opacity: 0.5;
-    padding-inline-start: var(--calcite-internal-chip-select-space-x-start);
+    // padding-inline-start: var(--calcite-internal-chip-select-space-x-start);
     padding-inline-end: var(--calcite-internal-chip-select-space-x-end);
   }
 }

From 819021c5e6d0d3ca7b2e24df7e49548c13fb3027 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Fri, 6 Sep 2024 15:03:50 -0700
Subject: [PATCH 09/16] fix(chip): minor issues with spacing

resolves some issues with internal component spacing. It also normalizes internal variables and makes future maintenance easier by breaking variables out by sub-element.
---
 .../src/components/chip/chip.scss             | 180 ++++++++++++------
 .../src/components/tile/tile.stories.ts       |   4 +-
 2 files changed, 124 insertions(+), 60 deletions(-)

diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index 7f355d49b0d..118500cc2b7 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -13,6 +13,7 @@
 :host {
   @apply inline-flex
     cursor-default;
+  border-radius: var(--calcite-chip-corner-radius, 9999px);
 }
 
 /* Host Prop Variant styles */
@@ -104,31 +105,54 @@
     --calcite-internal-chip-title-space: 0.25rem /* 4px */;
     --calcite-internal-close-size: 1rem /* 16px */;
 
-    &.is-circle {
-      --calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);
-      --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+    &:not(.closable) {
+      &.is-circle {
+        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+        --calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);
+      }
+    }
+
+    &.image--slotted {
+      &:has(.chip-icon),
+      &.text--slotted,
+      &.closable {
+        --calcite-internal-chip-image-space-x-end: 0.25rem /* 4px */;
+      }
+      &:not(.text--slotted, :has(.chip-icon)),
+      &:not(.selectable) {
+        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+      }
     }
 
-    &.image--slotted:not(.is-circle) {
-      --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
-      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
-      --calcite-internal-chip-image-space-x-end: 0.25rem /* 4px */;
-      --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+    &.selectable.single:not(.is-circle) {
+      &.image--slotted {
+        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+      }
+      &.selected {
+        --calcite-internal-chip-select-space-x-end: 0.375rem /* 6px */;
+        --calcite-internal-chip-select-space-x-start: 0;
+
+        &.image--slotted {
+          --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+          --calcite-internal-chip-select-space-x-start: 0.125rem /* 2px */;
+        }
+      }
     }
 
-    &:not(.image--slotted, .is-circle) {
+    &.multiple:not(.is-circle) {
+      --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
       --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;
       --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;
-    }
 
-    &.selected.single {
-      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
-      --calcite-internal-chip-select-space-x-start: 0.15rem /* 2px */;
-    }
+      &.image--slotted {
+        --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+        --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
+        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
 
-    &.multiple {
-      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
-      --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
+        &:not(.text--slotted) {
+          --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
+        }
+      }
     }
   }
 }
@@ -145,34 +169,52 @@
     --calcite-internal-chip-title-space: 0.375rem /* 6px */;
     --calcite-internal-close-size: 1.5rem /* 24px */;
 
-    &.is-circle {
-      --calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);
-      --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+    &:not(.closable) {
+      &.is-circle {
+        --calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);
+        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);
+      }
     }
 
-    &.image--slotted:not(.is-circle) {
-      --calcite-internal-chip-image-space-x-end: 0.375rem /* 6px */;
-      --calcite-internal-chip-select-space-x-end: 0.75rem /* 12px */;
-      --calcite-internal-chip-select-space-x-start: 0.5rem /* 8px */;
-      --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
-    }
+    &.image--slotted {
+      &:not(.is-circle) {
+        --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
+      }
 
-    &.closable:not(.is-circle) {
-      --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;
+      &:has(.chip-icon),
+      &.text--slotted,
+      &.closable {
+        --calcite-internal-chip-image-space-x-end: 0.375rem /* 6px */;
+      }
     }
 
-    &:not(.image--slotted, .is-circle) {
-      --calcite-internal-chip-select-space-x-end: 0.375rem /* 6px */;
-      --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
+    &.selectable.single:not(.is-circle) {
+      &.image--slotted {
+        --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
+      }
+      &.selected {
+        --calcite-internal-chip-select-space-x-end: var(--calcite-spacing-px);
+        --calcite-internal-chip-select-space-x-start: 0;
+
+        &.image--slotted {
+          --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;
+          --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;
+        }
+      }
     }
 
-    &.selected.single {
-      --calcite-internal-chip-select-space-x-end: 0.75rem /* 12px */;
-      --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;
+    &.multiple:not(.is-circle) {
+      --calcite-internal-chip-select-space-x-end: 0.125rem /* 2px */;
+      --calcite-internal-chip-select-space-x-start: 0.125rem /* 2px */;
+
+      &.image--slotted {
+        --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+        --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;
+      }
     }
-    &.multiple {
-      --calcite-internal-chip-select-space-x-end: 0.75rem /* 12px */;
-      --calcite-internal-chip-select-space-x-start: 0.5rem /* 8px */;
+
+    &.closable:not(.is-circle) {
+      --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;
     }
   }
 }
@@ -189,35 +231,53 @@
     --calcite-internal-chip-title-space: 0.5rem /* 8px */;
     --calcite-internal-close-size: 2rem /* 32px */;
 
-    &.is-circle {
-      --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;
-      --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
+    &:not(.closable) {
+      &.is-circle {
+        --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;
+        --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;
+      }
     }
 
-    &.image--slotted:not(.is-circle) {
-      --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;
-      --calcite-internal-chip-image-space-x-end: 0.5rem /* 8px */;
-      --calcite-internal-chip-select-space-x-end: 1rem /* 16px */;
-      --calcite-internal-chip-select-space-x-start: 0.625rem /* 10px */;
+    &.image--slotted {
+      &:not(.is-circle) {
+        --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;
+      }
+
+      &:has(.chip-icon),
+      &.text--slotted,
+      &.closable {
+        --calcite-internal-chip-image-space-x-end: 0.5rem /* 8px */;
+      }
     }
 
-    &.closable:not(.is-circle) {
-      --calcite-internal-chip-container-space-x-end: 0.375rem /* 6px */;
+    &.selectable.single:not(.is-circle) {
+      &.image--slotted {
+        --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;
+      }
+      &.selected {
+        --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;
+        --calcite-internal-chip-select-space-x-start: 0;
+
+        &.image--slotted {
+          --calcite-internal-chip-select-space-x-end: 0.375rem /* 6px */;
+          --calcite-internal-chip-select-space-x-start: 0.5rem /* 8px */;
+        }
+      }
     }
 
-    &.selected.single {
-      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
+    &.multiple:not(.is-circle) {
+      --calcite-internal-chip-container-space-x-start: 0.5rem /* 8px */;
+
+      --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;
       --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;
-    }
 
-    &.multiple {
-      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
-      --calcite-internal-chip-select-space-x-start: 0.65rem /* 10px */;
+      &.image--slotted {
+        --calcite-internal-chip-select-space-x-end: 0.75rem /* 12px */;
+      }
     }
 
-    &:not(.image--slotted) {
-      --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;
-      --calcite-internal-chip-select-space-x-start: 0.5rem /* 8px */;
+    &.closable:not(.is-circle) {
+      --calcite-internal-chip-container-space-x-end: 0.375rem /* 6px */;
     }
   }
 }
@@ -309,15 +369,19 @@
     position: relative;
     visibility: visible;
     opacity: 0.5;
-    // padding-inline-start: var(--calcite-internal-chip-select-space-x-start);
-    padding-inline-end: var(--calcite-internal-chip-select-space-x-end);
   }
 }
 
 .multiple .select-icon {
   @apply flex justify-center items-center;
+}
+
+.multiple .select-icon,
+.single .select-icon--active {
   padding-inline-start: var(--calcite-internal-chip-select-space-x-start);
   padding-inline-end: var(--calcite-internal-chip-select-space-x-end);
+  block-size: var(--calcite-internal-chip-icon-size, 1.5rem /* 24px */);
+  inline-size: var(--calcite-internal-chip-icon-size, 1.5rem /* 24px */);
 }
 
 slot[name="image"]::slotted(*) {
diff --git a/packages/calcite-components/src/components/tile/tile.stories.ts b/packages/calcite-components/src/components/tile/tile.stories.ts
index a3847920380..d8561844c30 100644
--- a/packages/calcite-components/src/components/tile/tile.stories.ts
+++ b/packages/calcite-components/src/components/tile/tile.stories.ts
@@ -77,8 +77,8 @@ export const allVariants = (): string => html`
       border-top: 1px solid var(--calcite-color-border-2);
     }
     calcite-chip.new {
-      background-color: #d8efda;
-      color: #13631f;
+      --calcite-chip-background-color: #d8efda;
+      --calcite-chip-text-color: #13631f;
     }
   </style>
   <div class="parent">

From 798c7c4af45adf6bd6d1d43058c89d244d00af60 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Tue, 10 Sep 2024 12:46:09 -0700
Subject: [PATCH 10/16] fix(chip): add chip-icon-color token

---
 .../src/components/chip/chip.e2e.ts           | 26 +++++++------------
 .../src/components/chip/chip.scss             |  5 +++-
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts
index 8bf181a2117..3bdad7c6735 100644
--- a/packages/calcite-components/src/components/chip/chip.e2e.ts
+++ b/packages/calcite-components/src/components/chip/chip.e2e.ts
@@ -152,21 +152,6 @@ describe("calcite-chip", () => {
     let chipCloseButtonFocusStyle;
     let chipCloseButtonHoverStyle;
 
-    it("should have defined CSS custom properties", async () => {
-      page = await newE2EPage({ html: chipSnippet });
-      const chipStyles = await page.evaluate(() => {
-        const chip = document.querySelector("calcite-chip");
-        chip.style.setProperty("--calcite-chip-transparent-hover", "rgba(3, 2, 20, 0.14)");
-        chip.style.setProperty("--calcite-chip-transparent-press", "rgba(4, 10, 4, 0.31");
-        return {
-          hoverFocus: window.getComputedStyle(chip).getPropertyValue("--calcite-chip-transparent-hover"),
-          active: window.getComputedStyle(chip).getPropertyValue("--calcite-chip-transparent-press"),
-        };
-      });
-      expect(chipStyles.hoverFocus).toEqual("rgba(3, 2, 20, 0.14)");
-      expect(chipStyles.active).toEqual("rgba(4, 10, 4, 0.31");
-    });
-
     describe("when mode attribute is not provided", () => {
       it("should render chip pseudo classes with default values tied to mode", async () => {
         page = await newE2EPage({ html: chipSnippet });
@@ -258,7 +243,7 @@ describe("calcite-chip", () => {
       });
     });
 
-    describe("outline", () => {
+    describe("appearance='outline'", () => {
       themed(html`<calcite-chip appearance="outline" kind="neutral">Layers</calcite-chip>`, {
         "--calcite-chip-border-color": {
           shadowSelector: `.${CSS.container}`,
@@ -266,5 +251,14 @@ describe("calcite-chip", () => {
         },
       });
     });
+
+    describe("icon", () => {
+      themed(html`<calcite-chip icon="layer">Layers</calcite-chip>`, {
+        "--calcite-chip-icon-color": {
+          shadowSelector: `.${CSS.chipIcon}`,
+          targetProp: "color",
+        },
+      });
+    });
   });
 });
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index 118500cc2b7..d1d8c5b59fe 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -7,6 +7,8 @@
  * @prop --calcite-chip-border-color: Specifies the border color of the component.
  * @prop --calcite-chip-corner-radius: Specifies the border radius of the component.
  * @prop --calcite-chip-text-color: Specifies the text color of the component.
+ * @prop --calcite-chip-icon-color: Specifies the icon color of the component.
+ * @prop --calcite-close-icon-color: Specifies the icon color of the close element of the component.
  *
  */
 
@@ -85,7 +87,7 @@
   color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
 
   .close {
-    color: var(--calcite-color-text-3);
+    color: var(--calcite-close-icon-color, var(--calcite-color-text-3));
   }
 }
 
@@ -348,6 +350,7 @@
 
 .chip-icon {
   @apply relative my-0 inline-flex duration-150 ease-in-out;
+  color: var(--calcite-chip-icon-color, var(--calcite-chip-text-color, currentColor));
   padding-inline: var(--calcite-internal-chip-icon-space, 0.375rem /* 6px */);
 }
 

From f9d0ec0ebd93621e9dcbdfe439169eaf6267a36b Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Tue, 10 Sep 2024 14:22:52 -0700
Subject: [PATCH 11/16] fix(chip): add select and close token options

---
 .../src/components/chip/chip.e2e.ts           | 28 +++++++++++++++++++
 .../src/components/chip/chip.scss             | 16 ++++++++---
 .../src/custom-theme/chips.ts                 |  4 +++
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts
index 3bdad7c6735..5facfeb79bf 100644
--- a/packages/calcite-components/src/components/chip/chip.e2e.ts
+++ b/packages/calcite-components/src/components/chip/chip.e2e.ts
@@ -252,6 +252,34 @@ describe("calcite-chip", () => {
       });
     });
 
+    describe("closable", () => {
+      themed(html`<calcite-chip closable>Layers</calcite-chip>`, {
+        "--calcite-chip-close-icon-color": {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("selectable", () => {
+      describe("default", () => {
+        themed(html`<calcite-chip select="single">Layers</calcite-chip>`, {
+          "--calcite-chip-select-icon-color": {
+            shadowSelector: `.${CSS.selectIcon}`,
+            targetProp: "color",
+          },
+        });
+      });
+      describe("selected", () => {
+        themed(html`<calcite-chip select="single" selected>Layers</calcite-chip>`, {
+          "--calcite-chip-select-icon-color-pressed": {
+            shadowSelector: `.${CSS.selectIcon}`,
+            targetProp: "color",
+          },
+        });
+      });
+    });
+
     describe("icon", () => {
       themed(html`<calcite-chip icon="layer">Layers</calcite-chip>`, {
         "--calcite-chip-icon-color": {
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index d1d8c5b59fe..1a039b90726 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -5,10 +5,12 @@
  *
  * @prop --calcite-chip-background-color: Specifies the background color of the component.
  * @prop --calcite-chip-border-color: Specifies the border color of the component.
- * @prop --calcite-chip-corner-radius: Specifies the border radius of the component.
+ * @prop --calcite-chip-corner-radius: Specifies the corner radius of the component.
  * @prop --calcite-chip-text-color: Specifies the text color of the component.
  * @prop --calcite-chip-icon-color: Specifies the icon color of the component.
- * @prop --calcite-close-icon-color: Specifies the icon color of the close element of the component.
+ * @prop --calcite-chip-close-icon-color: Specifies the icon color of the close element of the component.
+ * @prop --calcite-chip-select-icon-color: Specifies the icon color of the selection element of the component.
+ * @prop --calcite-chip-select-icon-color-pressed: Specifies the icon color of the selection element of the component when active.
  *
  */
 
@@ -42,7 +44,7 @@
   }
 
   .close {
-    color: var(--calcite-close-icon-color, var(--calcite-color-text-3));
+    color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)));
   }
 }
 :host([appearance="outline"]) .container {
@@ -87,7 +89,7 @@
   color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
 
   .close {
-    color: var(--calcite-close-icon-color, var(--calcite-color-text-3));
+    color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)));
   }
 }
 
@@ -367,11 +369,13 @@
   transition:
     opacity 0.15s ease-in-out,
     inline-size 0.15s ease-in-out;
+  color: var(--calcite-chip-select-icon-color, currentColor);
 
   &.select-icon--active {
     position: relative;
     visibility: visible;
     opacity: 0.5;
+    color: var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor));
   }
 }
 
@@ -387,6 +391,10 @@
   inline-size: var(--calcite-internal-chip-icon-size, 1.5rem /* 24px */);
 }
 
+.close {
+  color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, currentColor));
+}
+
 slot[name="image"]::slotted(*) {
   @apply rounded-half flex h-full w-full overflow-hidden;
 }
diff --git a/packages/calcite-components/src/custom-theme/chips.ts b/packages/calcite-components/src/custom-theme/chips.ts
index b2ec44e5213..441d045591e 100644
--- a/packages/calcite-components/src/custom-theme/chips.ts
+++ b/packages/calcite-components/src/custom-theme/chips.ts
@@ -5,6 +5,10 @@ export const chipTokens = {
   calciteChipBorderColor: "",
   calciteChipCornerRadius: "",
   calciteChipTextColor: "",
+  calciteChipIconColor: "",
+  calciteChipCloseIconColor: "",
+  calciteChipSelectIconColor: "",
+  calciteChipSelectIconColorPressed: "",
 };
 
 export const chips = html`<div>

From b6e6c97eb9fa4fc2d869aa2ad48adcb80d562de6 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Wed, 11 Sep 2024 11:18:54 -0700
Subject: [PATCH 12/16] test(chip): simplify theme tests

---
 package-lock.json                             | 28 +++++++++++--------
 .../src/components/chip/chip.e2e.ts           |  2 +-
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 91b5a613f2a..42291e6470f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3727,15 +3727,16 @@
       }
     },
     "node_modules/@inquirer/core": {
-      "version": "9.0.10",
-      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-9.0.10.tgz",
-      "integrity": "sha512-TdESOKSVwf6+YWDz8GhS6nKscwzkIyakEzCLJ5Vh6O3Co2ClhCJ0A4MG909MUWfaWdpJm7DE45ii51/2Kat9tA==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-9.1.0.tgz",
+      "integrity": "sha512-RZVfH//2ytTjmaBIzeKT1zefcQZzuruwkpTwwbe/i2jTl4o9M+iML5ChULzz6iw1Ok8iUBBsRCjY2IEbD8Ft4w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@inquirer/figures": "^1.0.5",
-        "@inquirer/type": "^1.5.2",
+        "@inquirer/type": "^1.5.3",
         "@types/mute-stream": "^0.0.4",
-        "@types/node": "^22.1.0",
+        "@types/node": "^22.5.2",
         "@types/wrap-ansi": "^3.0.0",
         "ansi-escapes": "^4.3.2",
         "cli-spinners": "^2.9.2",
@@ -3751,10 +3752,11 @@
       }
     },
     "node_modules/@inquirer/core/node_modules/@types/node": {
-      "version": "22.4.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.4.1.tgz",
-      "integrity": "sha512-1tbpb9325+gPnKK0dMm+/LMriX0vKxf6RnB0SZUqfyVkQ4fMgUSySqhxE/y8Jvs4NyF1yHzTfG9KlnkIODxPKg==",
+      "version": "22.5.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.4.tgz",
+      "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "undici-types": "~6.19.2"
       }
@@ -3787,7 +3789,8 @@
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@inquirer/figures": {
       "version": "1.0.5",
@@ -3799,10 +3802,11 @@
       }
     },
     "node_modules/@inquirer/type": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-1.5.2.tgz",
-      "integrity": "sha512-w9qFkumYDCNyDZmNQjf/n6qQuvQ4dMC3BJesY4oF+yr0CxR5vxujflAVeIcS6U336uzi9GM0kAfZlLrZ9UTkpA==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-1.5.3.tgz",
+      "integrity": "sha512-xUQ14WQGR/HK5ei+2CvgcwoH9fQ4PgPGmVFSN0pc1+fVyDL3MREhyAY7nxEErSu6CkllBM3D7e3e+kOvtu+eIg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "mute-stream": "^1.0.0"
       },
diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts
index 5facfeb79bf..8fd151c9339 100644
--- a/packages/calcite-components/src/components/chip/chip.e2e.ts
+++ b/packages/calcite-components/src/components/chip/chip.e2e.ts
@@ -244,7 +244,7 @@ describe("calcite-chip", () => {
     });
 
     describe("appearance='outline'", () => {
-      themed(html`<calcite-chip appearance="outline" kind="neutral">Layers</calcite-chip>`, {
+      themed(html`<calcite-chip appearance="outline">Layers</calcite-chip>`, {
         "--calcite-chip-border-color": {
           shadowSelector: `.${CSS.container}`,
           targetProp: "borderColor",

From d9cad9ab8209380872b5d098833194c87fa7de8a Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Wed, 11 Sep 2024 11:34:16 -0700
Subject: [PATCH 13/16] test(chip): fix theme setup

---
 packages/calcite-components/src/components/chip/chip.e2e.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts
index 8fd151c9339..5288e6183da 100644
--- a/packages/calcite-components/src/components/chip/chip.e2e.ts
+++ b/packages/calcite-components/src/components/chip/chip.e2e.ts
@@ -263,7 +263,7 @@ describe("calcite-chip", () => {
 
     describe("selectable", () => {
       describe("default", () => {
-        themed(html`<calcite-chip select="single">Layers</calcite-chip>`, {
+        themed(html`<calcite-chip selection-mode="single">Layers</calcite-chip>`, {
           "--calcite-chip-select-icon-color": {
             shadowSelector: `.${CSS.selectIcon}`,
             targetProp: "color",
@@ -271,7 +271,7 @@ describe("calcite-chip", () => {
         });
       });
       describe("selected", () => {
-        themed(html`<calcite-chip select="single" selected>Layers</calcite-chip>`, {
+        themed(html`<calcite-chip selection-mode="single" selected>Layers</calcite-chip>`, {
           "--calcite-chip-select-icon-color-pressed": {
             shadowSelector: `.${CSS.selectIcon}`,
             targetProp: "color",

From be4ac0f9680d4633f172805b9b88c5999ab854c6 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Wed, 11 Sep 2024 13:13:06 -0700
Subject: [PATCH 14/16] =?UTF-8?q?Revert=20package.json=20in=20test(chip):?=
 =?UTF-8?q?=20simplify=20theme=20tests=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit b6e6c97eb9fa4fc2d869aa2ad48adcb80d562de6.
---
 package-lock.json | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 42291e6470f..91b5a613f2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3727,16 +3727,15 @@
       }
     },
     "node_modules/@inquirer/core": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-9.1.0.tgz",
-      "integrity": "sha512-RZVfH//2ytTjmaBIzeKT1zefcQZzuruwkpTwwbe/i2jTl4o9M+iML5ChULzz6iw1Ok8iUBBsRCjY2IEbD8Ft4w==",
+      "version": "9.0.10",
+      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-9.0.10.tgz",
+      "integrity": "sha512-TdESOKSVwf6+YWDz8GhS6nKscwzkIyakEzCLJ5Vh6O3Co2ClhCJ0A4MG909MUWfaWdpJm7DE45ii51/2Kat9tA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@inquirer/figures": "^1.0.5",
-        "@inquirer/type": "^1.5.3",
+        "@inquirer/type": "^1.5.2",
         "@types/mute-stream": "^0.0.4",
-        "@types/node": "^22.5.2",
+        "@types/node": "^22.1.0",
         "@types/wrap-ansi": "^3.0.0",
         "ansi-escapes": "^4.3.2",
         "cli-spinners": "^2.9.2",
@@ -3752,11 +3751,10 @@
       }
     },
     "node_modules/@inquirer/core/node_modules/@types/node": {
-      "version": "22.5.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.4.tgz",
-      "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==",
+      "version": "22.4.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.4.1.tgz",
+      "integrity": "sha512-1tbpb9325+gPnKK0dMm+/LMriX0vKxf6RnB0SZUqfyVkQ4fMgUSySqhxE/y8Jvs4NyF1yHzTfG9KlnkIODxPKg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "undici-types": "~6.19.2"
       }
@@ -3789,8 +3787,7 @@
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "dev": true,
-      "license": "MIT"
+      "dev": true
     },
     "node_modules/@inquirer/figures": {
       "version": "1.0.5",
@@ -3802,11 +3799,10 @@
       }
     },
     "node_modules/@inquirer/type": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-1.5.3.tgz",
-      "integrity": "sha512-xUQ14WQGR/HK5ei+2CvgcwoH9fQ4PgPGmVFSN0pc1+fVyDL3MREhyAY7nxEErSu6CkllBM3D7e3e+kOvtu+eIg==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-1.5.2.tgz",
+      "integrity": "sha512-w9qFkumYDCNyDZmNQjf/n6qQuvQ4dMC3BJesY4oF+yr0CxR5vxujflAVeIcS6U336uzi9GM0kAfZlLrZ9UTkpA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "mute-stream": "^1.0.0"
       },

From a70917726667bc1371208967d995050876d7f843 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Wed, 11 Sep 2024 18:21:44 -0700
Subject: [PATCH 15/16] =?UTF-8?q?refactor(chip):=20restore=20=E2=80=94calc?=
 =?UTF-8?q?ite-icon-color=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/calcite-components/src/components/chip/chip.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index 1a039b90726..1390e67fa25 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -352,7 +352,7 @@
 
 .chip-icon {
   @apply relative my-0 inline-flex duration-150 ease-in-out;
-  color: var(--calcite-chip-icon-color, var(--calcite-chip-text-color, currentColor));
+  color: var(--calcite-chip-icon-color, var(--calcite-chip-text-color, var(--calcite-icon-color, currentColor)));
   padding-inline: var(--calcite-internal-chip-icon-space, 0.375rem /* 6px */);
 }
 

From fa3f3e7c08a7dbcb0389fff391288d3b0c0d25be Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Mon, 16 Sep 2024 09:40:19 -0700
Subject: [PATCH 16/16] chore(custom-theme): fix imports

---
 packages/calcite-components/src/custom-theme.stories.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index f92afe36d35..f3e4c9d9165 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -10,12 +10,13 @@ import {
   actionPadTokens,
   actionGroupTokens,
 } from "./custom-theme/action";
-import { accordionItemTokens } from "./custom-theme/accordion-item";
 import { accordion, accordionTokens } from "./custom-theme/accordion";
+import { accordionItemTokens } from "./custom-theme/accordion-item";
 import { buttons } from "./custom-theme/button";
+import { calciteSwitch } from "./custom-theme/switch";
 import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
 import { checkbox, checkboxTokens } from "./custom-theme/checkbox";
-import { chips } from "./custom-theme/chips";
+import { chips, chipTokens } from "./custom-theme/chips";
 import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
 import { handle, handleTokens } from "./custom-theme/handle";
@@ -29,7 +30,6 @@ import { pagination } from "./custom-theme/pagination";
 import { progress, progressTokens } from "./custom-theme/progress";
 import { segmentedControl } from "./custom-theme/segmented-control";
 import { slider } from "./custom-theme/slider";
-import { calciteSwitch } from "./custom-theme/switch";
 import { tabs } from "./custom-theme/tabs";
 
 const globalTokens = {