From 85aff93f600a588293220167677f81296a2109f7 Mon Sep 17 00:00:00 2001
From: Adam Tirella <adam@tirel.la>
Date: Wed, 28 Feb 2024 14:42:52 -0800
Subject: [PATCH 01/15] refactor(card-group): Remove unused `scale` property
 (#8849)

**Related Issue:** #

## Summary
Removes this unused property that made it through review.

Initially there was a plan to add scale to Card, but that change was
removed and this property was not cleaned up. Should be safe to remove
as it had no effect.
---
 packages/calcite-components/src/components.d.ts           | 8 --------
 .../src/components/card-group/card-group.tsx              | 5 +----
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index dd09af52c61..6d32fbd9e30 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -805,10 +805,6 @@ export namespace Components {
           * Accessible name for the component.
          */
         "label": string;
-        /**
-          * Specifies the size of the component. Child `calcite-card`s inherit the component's value.
-         */
-        "scale": Scale;
         /**
           * Specifies the component's selected items.
           * @readonly
@@ -8191,10 +8187,6 @@ declare namespace LocalJSX {
           * Emits when the component's selection changes and the `selectionMode` is not `none`.
          */
         "onCalciteCardGroupSelect"?: (event: CalciteCardGroupCustomEvent<void>) => void;
-        /**
-          * Specifies the size of the component. Child `calcite-card`s inherit the component's value.
-         */
-        "scale"?: Scale;
         /**
           * Specifies the component's selected items.
           * @readonly
diff --git a/packages/calcite-components/src/components/card-group/card-group.tsx b/packages/calcite-components/src/components/card-group/card-group.tsx
index 0f25a836eeb..30c4d2ce6c2 100644
--- a/packages/calcite-components/src/components/card-group/card-group.tsx
+++ b/packages/calcite-components/src/components/card-group/card-group.tsx
@@ -19,7 +19,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import { Scale, SelectionMode } from "../interfaces";
+import { SelectionMode } from "../interfaces";
 import {
   LoadableComponent,
   componentLoaded,
@@ -57,9 +57,6 @@ export class CardGroup implements InteractiveComponent, LoadableComponent {
   /** Accessible name for the component. */
   @Prop() label!: string;
 
-  /** Specifies the size of the component. Child `calcite-card`s inherit the component's value. */
-  @Prop({ reflect: true }) scale: Scale = "m";
-
   /** Specifies the selection mode of the component. */
   @Prop({ reflect: true }) selectionMode: Extract<
     "multiple" | "single" | "single-persist" | "none",

From 17ede290926f3423cac25df2c2dc568b556883f0 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 28 Feb 2024 22:44:34 +0000
Subject: [PATCH 02/15] chore: release next

---
 package-lock.json                                      | 10 +++++-----
 .../projects/component-library/CHANGELOG.md            |  4 ++++
 .../projects/component-library/package.json            |  4 ++--
 packages/calcite-components-react/CHANGELOG.md         |  4 ++++
 packages/calcite-components-react/package.json         |  4 ++--
 packages/calcite-components/CHANGELOG.md               |  6 ++++++
 packages/calcite-components/package.json               |  2 +-
 7 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1f1d7ebe10d..3bfae08af1a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47160,7 +47160,7 @@
     },
     "packages/calcite-components": {
       "name": "@esri/calcite-components",
-      "version": "2.6.0",
+      "version": "2.7.0-next.0",
       "license": "SEE LICENSE.md",
       "dependencies": {
         "@floating-ui/dom": "1.6.3",
@@ -47210,10 +47210,10 @@
     },
     "packages/calcite-components-angular/projects/component-library": {
       "name": "@esri/calcite-components-angular",
-      "version": "2.6.0",
+      "version": "2.7.0-next.0",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.6.0",
+        "@esri/calcite-components": "^2.7.0-next.0",
         "tslib": "2.6.2"
       },
       "peerDependencies": {
@@ -47223,10 +47223,10 @@
     },
     "packages/calcite-components-react": {
       "name": "@esri/calcite-components-react",
-      "version": "2.6.0",
+      "version": "2.7.0-next.0",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.6.0"
+        "@esri/calcite-components": "^2.7.0-next.0"
       },
       "peerDependencies": {
         "react": ">=16.7",
diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
index 04af696bd59..5aff7d8fa58 100644
--- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
+++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.6.0...@esri/calcite-components-angular@2.7.0-next.0) (2024-02-28)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.6.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.5.1...@esri/calcite-components-angular@2.6.0) (2024-02-27)
 
 ### Miscellaneous Chores
diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json
index 343e31142ac..27bcdb2c904 100644
--- a/packages/calcite-components-angular/projects/component-library/package.json
+++ b/packages/calcite-components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-angular",
-  "version": "2.6.0",
+  "version": "2.7.0-next.0",
   "sideEffects": false,
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "A set of Angular components that wrap Esri's Calcite Components.",
@@ -20,7 +20,7 @@
     "@angular/core": ">=16.0.0"
   },
   "dependencies": {
-    "@esri/calcite-components": "^2.6.0",
+    "@esri/calcite-components": "^2.7.0-next.0",
     "tslib": "2.6.2"
   },
   "lerna": {
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
index d0d21ceea3d..58e4c5c59f4 100644
--- a/packages/calcite-components-react/CHANGELOG.md
+++ b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.6.0...@esri/calcite-components-react@2.7.0-next.0) (2024-02-28)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.6.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.5.1...@esri/calcite-components-react@2.6.0) (2024-02-27)
 
 ### Miscellaneous Chores
diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
index 80e8542c928..04a45eddacd 100644
--- a/packages/calcite-components-react/package.json
+++ b/packages/calcite-components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "2.6.0",
+  "version": "2.7.0-next.0",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
@@ -23,7 +23,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^2.6.0"
+    "@esri/calcite-components": "^2.7.0-next.0"
   },
   "peerDependencies": {
     "react": ">=16.7",
diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
index dee0d288e53..f7cce4f2b8f 100644
--- a/packages/calcite-components/CHANGELOG.md
+++ b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.6.0...@esri/calcite-components@2.7.0-next.0) (2024-02-28)
+
+### Features
+
+- **tabs:** make component responsive ([#8616](https://github.com/Esri/calcite-design-system/issues/8616)) ([83a2ef4](https://github.com/Esri/calcite-design-system/commit/83a2ef47157f88007af0ae528758fb5952a3f3bc)), closes [#6689](https://github.com/Esri/calcite-design-system/issues/6689)
+
 ## [2.6.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.5.1...@esri/calcite-components@2.6.0) (2024-02-27)
 
 ### Features
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index 55a243bfb0d..fcbe2134f70 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.6.0",
+  "version": "2.7.0-next.0",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",

From f4d016b0998f360f376c03705c98bd6c399143f6 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Wed, 28 Feb 2024 18:30:16 -0800
Subject: [PATCH 03/15] perf: update `transition-default` Tailwind util to only
 target common, animatable properties (#8797)

**Related Issue:** #8571

## Summary

This updates the `transition-default` to explicitly list common,
animatable properties to the following:

* `background-color`
* `block-size`
* `border-color`
* `box-shadow`
* `color`
* `inset-block-end`
* `inset-block-start`
* `inset-inline-end`
* `inset-inline-start`
* `inset-size`
* `opacity`
* `outline-color`
* `transform`

This should improve rendering performance by omitting other props that
are unintentionally being animated (see
https://vallek.github.io/animatable-css/#anim).
---
 packages/calcite-components/calcite-preset.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts
index d72c1eabe57..b38f1e9432d 100644
--- a/packages/calcite-components/calcite-preset.ts
+++ b/packages/calcite-components/calcite-preset.ts
@@ -280,7 +280,9 @@ export default {
           "outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
         },
         ".transition-default": {
-          transition: "all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s",
+          transition:
+            // we explicitly list these properties to avoid animating properties that are not intended to be animated and that might affect performance
+            "background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s",
         },
       };
       addUtilities(newUtilities);

From 54b76b7445979c30288ba797c6ec34c3b3c712a9 Mon Sep 17 00:00:00 2001
From: Adam Tirella <adam@tirel.la>
Date: Thu, 29 Feb 2024 10:44:43 -0800
Subject: [PATCH 04/15] refactor(chip): Remove deprecated component patterns
 (#8802)

**Related Issue:** None

## Summary
Removes now-deprecated coding patterns from Chip and replaces the
functionality following current practices.
---
 .../src/components/chip/chip.tsx              | 26 +++++--------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx
index ef19b2f58b6..459cfd0b803 100644
--- a/packages/calcite-components/src/components/chip/chip.tsx
+++ b/packages/calcite-components/src/components/chip/chip.tsx
@@ -16,11 +16,7 @@ import {
 import { toAriaBoolean, slotChangeHasAssignedElement } from "../../utils/dom";
 import { CSS, SLOTS, ICONS } from "./resources";
 import { Appearance, Kind, Scale, SelectionMode } from "../interfaces";
-import {
-  ConditionalSlotComponent,
-  connectConditionalSlotComponent,
-  disconnectConditionalSlotComponent,
-} from "../../utils/conditionalSlot";
+
 import {
   componentFocusable,
   LoadableComponent,
@@ -43,7 +39,6 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import { createObserver } from "../../utils/observers";
 import { isActivationKey } from "../../utils/key";
 import { ChipMessages } from "./assets/chip/t9n";
 import { getIconScale } from "../../utils/component";
@@ -59,12 +54,7 @@ import { getIconScale } from "../../utils/component";
   assetsDirs: ["assets"],
 })
 export class Chip
-  implements
-    ConditionalSlotComponent,
-    InteractiveComponent,
-    LoadableComponent,
-    LocalizedComponent,
-    T9nComponent
+  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent
 {
   //--------------------------------------------------------------------------
   //
@@ -166,8 +156,6 @@ export class Chip
 
   private closeButtonEl: HTMLButtonElement;
 
-  private mutationObserver = createObserver("mutation", () => this.updateHasText());
-
   // --------------------------------------------------------------------------
   //
   //  Events
@@ -196,11 +184,9 @@ export class Chip
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
-    connectConditionalSlotComponent(this);
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
   componentDidLoad(): void {
@@ -212,11 +198,9 @@ export class Chip
   }
 
   disconnectedCallback(): void {
-    disconnectConditionalSlotComponent(this);
     disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
-    this.mutationObserver?.disconnect();
   }
 
   async componentWillLoad(): Promise<void> {
@@ -282,6 +266,10 @@ export class Chip
   //
   // --------------------------------------------------------------------------
 
+  private handleDefaultSlotChange = (): void => {
+    this.updateHasText();
+  };
+
   private close = (): void => {
     this.calciteChipClose.emit();
     this.selected = false;
@@ -419,7 +407,7 @@ export class Chip
             {this.renderChipImage()}
             {this.icon && this.renderIcon()}
             <span class={CSS.title}>
-              <slot />
+              <slot onSlotchange={this.handleDefaultSlotChange} />
             </span>
             {this.closable && this.renderCloseButton()}
           </div>

From 30a206867d5f4b19d9cdfcc540f0286405b6d984 Mon Sep 17 00:00:00 2001
From: Adam Tirella <adam@tirel.la>
Date: Thu, 29 Feb 2024 11:01:36 -0800
Subject: [PATCH 05/15] fix(card): Do not apply text color to slotted footer
 items (#8839)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Related Issue:** #8855

## Summary
This removes the styles set on footer elements, as it could
unintentionally style components slotted directly that themselves do not
ensure a text color is set. The workaround is to add a wrapping div that
itself is slotted in `footer-end` or `footer-start`.

<img width="439" alt="Screenshot 2024-02-27 at 12 01 36 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/eec057d9-b6ab-45b7-bc50-b283e1f4f9d8">


The `heading` and `description` (and deprecated `title` and `subtitle`)
should keep their default text styles as these are most often text
slotted directly. In the future it might be good to make these string
properties to incentivize consistency, keeping the option to slot in
rich content like links, icons, etc., when needed.
---
 .../src/components/card/card.scss             |  2 --
 .../src/components/card/card.stories.ts       | 22 +++++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss
index 6b80ccd8fe7..8b6b3fdfb9a 100644
--- a/packages/calcite-components/src/components/card/card.scss
+++ b/packages/calcite-components/src/components/card/card.scss
@@ -153,12 +153,10 @@
 @include slotted("footer-start", "*") {
   @apply text-n2-wrap self-center;
   margin-inline-end: auto;
-  color: var(--calcite-color-text-3);
 }
 
 @include slotted("footer-end", "*") {
   @apply text-n2-wrap self-center;
-  color: var(--calcite-color-text-3);
 }
 
 .checkbox-wrapper-deprecated {
diff --git a/packages/calcite-components/src/components/card/card.stories.ts b/packages/calcite-components/src/components/card/card.stories.ts
index d5436c665de..7bb6b24fcb1 100644
--- a/packages/calcite-components/src/components/card/card.stories.ts
+++ b/packages/calcite-components/src/components/card/card.stories.ts
@@ -231,6 +231,28 @@ export const deprecatedSlotsSelectable_TestOnly = (): string => html`
   </calcite-card>
 `;
 
+export const slottedFooterItems_TestOnly = (): string => html`
+  <div id="card-container" style="width:260px;">
+    <calcite-card>
+      ${thumbnailHtml}
+      <h3 slot="heading">Portland Businesses</h3>
+      <span slot="description"
+        >by
+        <calcite-link href="">example_user</calcite-link>
+      </span>
+      <div>
+        Created: Apr 22, 2019
+        <br />
+        Updated: Dec 9, 2019
+        <br />
+        View Count: 0
+      </div>
+      <calcite-chip slot="footer-start" value="calcite chip" kind="brand" icon="clock-forward">Recent</calcite-chip>
+      <calcite-chip slot="footer-end" value="calcite chip" icon="walking">Recreation</calcite-chip>
+    </calcite-card>
+  </div>
+`;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <div dir="rtl" style="width:260px;">
     <calcite-card>${thumbnailHtml}${titleHtml}${footerStartTextHtml}${footerEndButtonsHtml}</calcite-card>

From c95edfe591c72e84ff07a459ab8cba7a79a9d40a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 29 Feb 2024 19:03:10 +0000
Subject: [PATCH 06/15] chore: release next

---
 package-lock.json                                      | 10 +++++-----
 .../projects/component-library/CHANGELOG.md            |  4 ++++
 .../projects/component-library/package.json            |  4 ++--
 packages/calcite-components-react/CHANGELOG.md         |  4 ++++
 packages/calcite-components-react/package.json         |  4 ++--
 packages/calcite-components/CHANGELOG.md               | 10 ++++++++++
 packages/calcite-components/package.json               |  2 +-
 7 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3bfae08af1a..421c4a0e860 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47160,7 +47160,7 @@
     },
     "packages/calcite-components": {
       "name": "@esri/calcite-components",
-      "version": "2.7.0-next.0",
+      "version": "2.7.0-next.1",
       "license": "SEE LICENSE.md",
       "dependencies": {
         "@floating-ui/dom": "1.6.3",
@@ -47210,10 +47210,10 @@
     },
     "packages/calcite-components-angular/projects/component-library": {
       "name": "@esri/calcite-components-angular",
-      "version": "2.7.0-next.0",
+      "version": "2.7.0-next.1",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.7.0-next.0",
+        "@esri/calcite-components": "^2.7.0-next.1",
         "tslib": "2.6.2"
       },
       "peerDependencies": {
@@ -47223,10 +47223,10 @@
     },
     "packages/calcite-components-react": {
       "name": "@esri/calcite-components-react",
-      "version": "2.7.0-next.0",
+      "version": "2.7.0-next.1",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.7.0-next.0"
+        "@esri/calcite-components": "^2.7.0-next.1"
       },
       "peerDependencies": {
         "react": ">=16.7",
diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
index 5aff7d8fa58..9cd2424a1a6 100644
--- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
+++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.7.0-next.0...@esri/calcite-components-angular@2.7.0-next.1) (2024-02-29)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.7.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.6.0...@esri/calcite-components-angular@2.7.0-next.0) (2024-02-28)
 
 **Note:** Version bump only for package @esri/calcite-components-angular
diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json
index 27bcdb2c904..7dd166b891f 100644
--- a/packages/calcite-components-angular/projects/component-library/package.json
+++ b/packages/calcite-components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-angular",
-  "version": "2.7.0-next.0",
+  "version": "2.7.0-next.1",
   "sideEffects": false,
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "A set of Angular components that wrap Esri's Calcite Components.",
@@ -20,7 +20,7 @@
     "@angular/core": ">=16.0.0"
   },
   "dependencies": {
-    "@esri/calcite-components": "^2.7.0-next.0",
+    "@esri/calcite-components": "^2.7.0-next.1",
     "tslib": "2.6.2"
   },
   "lerna": {
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
index 58e4c5c59f4..2c00cb8f05a 100644
--- a/packages/calcite-components-react/CHANGELOG.md
+++ b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.7.0-next.0...@esri/calcite-components-react@2.7.0-next.1) (2024-02-29)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.7.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.6.0...@esri/calcite-components-react@2.7.0-next.0) (2024-02-28)
 
 **Note:** Version bump only for package @esri/calcite-components-react
diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
index 04a45eddacd..eb1ba54ebd0 100644
--- a/packages/calcite-components-react/package.json
+++ b/packages/calcite-components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "2.7.0-next.0",
+  "version": "2.7.0-next.1",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
@@ -23,7 +23,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^2.7.0-next.0"
+    "@esri/calcite-components": "^2.7.0-next.1"
   },
   "peerDependencies": {
     "react": ">=16.7",
diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
index f7cce4f2b8f..74f61e20f95 100644
--- a/packages/calcite-components/CHANGELOG.md
+++ b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.7.0-next.0...@esri/calcite-components@2.7.0-next.1) (2024-02-29)
+
+### Bug Fixes
+
+- **card:** Do not apply text color to slotted footer items ([#8839](https://github.com/Esri/calcite-design-system/issues/8839)) ([30a2068](https://github.com/Esri/calcite-design-system/commit/30a206867d5f4b19d9cdfcc540f0286405b6d984)), closes [#8855](https://github.com/Esri/calcite-design-system/issues/8855)
+
+### Performance Improvements
+
+- update `transition-default` Tailwind util to only target common, animatable properties ([#8797](https://github.com/Esri/calcite-design-system/issues/8797)) ([f4d016b](https://github.com/Esri/calcite-design-system/commit/f4d016b0998f360f376c03705c98bd6c399143f6)), closes [#8571](https://github.com/Esri/calcite-design-system/issues/8571)
+
 ## [2.7.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.6.0...@esri/calcite-components@2.7.0-next.0) (2024-02-28)
 
 ### Features
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index fcbe2134f70..2e8be11ed22 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.7.0-next.0",
+  "version": "2.7.0-next.1",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",

From 93146c2f45bd175ac20ee48648d8c7784de8220b Mon Sep 17 00:00:00 2001
From: Ali Stump <alisonailea@users.noreply.github.com>
Date: Fri, 1 Mar 2024 16:11:02 -0800
Subject: [PATCH 07/15] feat(checkbox, tree-item, card): add component tokens
 with fallbacks (#8838)

**Related Issue:** #7180

## Summary

### Checkbox

--calcite-checkbox-background-color: defines the background color of the
component
--calcite-checkbox-background-color-checked: defines the background
color of the component when it's in a ::checked state
--calcite-checkbox-icon-color: defines the icon color of the checkbox.
--calcite-checkbox-shadow: defines the shadow of the component
--calcite-checkbox-shadow-checked: defines the shadow of the component
in a ::checked state
--calcite-checkbox-shadow-hover: defines the shadow of the component in
a :hover state.
--calcite-checkbox-shadow-invalid: defines the shadow of the component
in an invalid state.
--calcite-checkbox-size: defines the checkbox's size vertically and
horizontally.

### Tree Item
--calcite-tree-item-checkbox-background-color: defines the
background-color of the sub-component.
--calcite-tree-item-checkbox-background-color-checked: defines the
background-color of the sub-component when checked.
--calcite-tree-item-checkbox-icon-color: defines the checkmark color of
the sub-component.
--calcite-tree-item-checkbox-shadow: defines the shadow of the
sub-component.
--calcite-tree-item-checkbox-shadow-checked: defines the shadow of the
sub-component when checked.
--calcite-tree-item-checkbox-shadow-hover: defines the shadow of the
sub-component when hovered.
--calcite-tree-item-checkbox-shadow-invalid: defines the shadow of the
sub-component when invalid.
--calcite-tree-item-checkbox-size: defines the size of the
sub-component.
---
 .../components/action-group/action-group.scss |   6 +-
 .../src/components/card/card.scss             |  20 ++-
 .../src/components/checkbox/checkbox.scss     | 117 ++++++++++--------
 .../src/components/icon/icon.scss             |   2 +-
 .../input-message/input-message.scss          |   2 +-
 .../src/components/tree-item/tree-item.scss   |  22 ++++
 6 files changed, 104 insertions(+), 65 deletions(-)

diff --git a/packages/calcite-components/src/components/action-group/action-group.scss b/packages/calcite-components/src/components/action-group/action-group.scss
index 3b39776de97..cb3fa6ec9aa 100755
--- a/packages/calcite-components/src/components/action-group/action-group.scss
+++ b/packages/calcite-components/src/components/action-group/action-group.scss
@@ -15,9 +15,9 @@
  * @prop --calcite-action-group-action-menu-text-color: The text color of the sub-component.
  * @prop --calcite-action-group-action-text-color: defines the text color of an action sub-component inside the component.
  * @prop --calcite-action-group-background-color: defines the background color of the component.
- * @prop --calcite-action-group-columns: *deprecated* Sets number of grid-template-columns when the `layout` property is `"grid"`.
- * @prop --calcite-action-group-gap: *deprecated* Sets the gap (gutters) between rows and columns when the `layout` property is `"grid"`.
- * @prop --calcite-action-group-padding: *deprecated* Sets the padding when the `layout` property is `"grid"`.
+ * @prop --calcite-action-group-columns: [Deprecated]  Sets number of grid-template-columns when the `layout` property is `"grid"`.
+ * @prop --calcite-action-group-gap: [Deprecated]  Sets the gap (gutters) between rows and columns when the `layout` property is `"grid"`.
+ * @prop --calcite-action-group-padding: [Deprecated]  Sets the padding when the `layout` property is `"grid"`.
  * @prop --calcite-internal-action-group-columns: Sets number of grid-template-columns when the `layout` property is `"grid"`.
  * @prop --calcite-internal-action-group-gap, var(te-internal-action-group-gap: Sets the gap (gutters) between rows and columns when the `layout` property is `"grid"`).
  *
diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss
index 1af4e777291..40deda7877c 100644
--- a/packages/calcite-components/src/components/card/card.scss
+++ b/packages/calcite-components/src/components/card/card.scss
@@ -3,18 +3,19 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
+ *
+ * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.
  * @prop --calcite-card-background-color: Specifies the background color of the component.
  * @prop --calcite-card-border-color: Specifies the border color of the component.
- * @prop --calcite-card-shadow: Specifies the shadow of the component.
  * @prop --calcite-card-corner-radius: Specifies the corner radius of the component.
- * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.
- * @prop --calcite-card-selection-background-color: Specifies the background color of the component's selection element.
- * @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered.
  * @prop --calcite-card-selection-background-color-active: Specifies the background color of the component's selection element when active.
+ * @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered.
  * @prop --calcite-card-selection-background-color-selected: Specifies the icon color of the component's selection element when `selected`.
- * @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.
+ * @prop --calcite-card-selection-background-color: Specifies the background color of the component's selection element.
  * @prop --calcite-card-selection-icon-color-hover: Specifies the icon color of the component's selection element when hovered.
  * @prop --calcite-card-selection-icon-color-selected: Specifies the icon color of the component's selection element when `selected`.
+ * @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.
+ * @prop --calcite-card-shadow: Specifies the shadow of the component.
  *
  */
 
@@ -220,5 +221,14 @@ slot[name="footer-end"]::slotted(*) {
   @apply flex gap-1;
 }
 
+calcite-checkbox {
+  --calcite-checkbox-background-color: var(--calcite-card-checkbox-background-color);
+  --calcite-checkbox-background-color-checked: var(--calcite-card-checkbox-background-color-checked);
+  --calcite-checkbox-icon-color: var(--calcite-card-checkbox-icon-color);
+  --calcite-checkbox-shadow: var(--calcite-card-checkbox-shadow);
+  --calcite-checkbox-shadow-checked: var(--calcite-card-checkbox-shadow-checked);
+  --calcite-checkbox-shadow-hover: var(--calcite-card-checkbox-shadow-hover);
+}
+
 @include base-component();
 @include disabled();
diff --git a/packages/calcite-components/src/components/checkbox/checkbox.scss b/packages/calcite-components/src/components/checkbox/checkbox.scss
index 2ee668f6eb6..8af4e1d7708 100644
--- a/packages/calcite-components/src/components/checkbox/checkbox.scss
+++ b/packages/calcite-components/src/components/checkbox/checkbox.scss
@@ -3,72 +3,36 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-checkbox-size: defines the checkbox's size vertically and horizontally.
- * @prop --calcite-checkbox-background-color: defines the background color of the checkbox.
- * @prop --calcite-checkbox-shadow: defines the box shadow of the checkbox.
+ * @prop --calcite-checkbox-background-color: defines the background color of the component
+ * @prop --calcite-checkbox-background-color-checked: defines the background color of the component when it's in a ::checked state
  * @prop --calcite-checkbox-icon-color: defines the icon color of the checkbox.
+ * @prop --calcite-checkbox-shadow: defines the shadow of the component
+ * @prop --calcite-checkbox-shadow-checked: defines the shadow of the component in a ::checked state
+ * @prop --calcite-checkbox-shadow-hover: defines the shadow of the component in a :hover state.
+ * @prop --calcite-checkbox-shadow-invalid: defines the shadow of the component in an invalid state.
+ * @prop --calcite-checkbox-size: defines the checkbox's size vertically and horizontally.
  */
 
-:host {
-  --calcite-checkbox-background-color: var(--calcite-color-foreground-1);
-  --calcite-checkbox-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
-  --calcite-checkbox-icon-color: var(--calcite-color-background);
-}
-
-:host([scale="s"]) {
-  --calcite-checkbox-size: theme("spacing.3");
-}
-:host([scale="m"]) {
-  --calcite-checkbox-size: theme("fontSize.n1");
-}
-:host([scale="l"]) {
-  --calcite-checkbox-size: theme("spacing.4");
-}
-
 :host {
   @apply relative
     inline-flex
     cursor-pointer
     select-none;
   -webkit-tap-highlight-color: transparent;
-
-  .check-svg,
-  .toggle {
-    inline-size: var(--calcite-checkbox-size);
-    block-size: var(--calcite-checkbox-size);
-  }
-
-  .check-svg {
-    @apply pointer-events-none
-      box-border
-      block
-      overflow-hidden
-      fill-current
-      stroke-current
-      stroke-1
-      transition-default;
-    background-color: var(--calcite-checkbox-background-color);
-    box-shadow: var(--calcite-checkbox-shadow);
-    color: var(--calcite-checkbox-icon-color);
-  }
-}
-
-:host([status="invalid"]:not([checked])) {
-  --calcite-checkbox-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);
-
-  .toggle:focus {
-    @apply focus-outset-danger;
-  }
 }
 
-:host([checked]),
-:host([indeterminate]) {
-  --calcite-checkbox-shadow: inset 0 0 0 1px var(--calcite-color-brand);
-  --calcite-checkbox-background-color: var(--calcite-color-brand);
-}
-:host([hovered]) .toggle,
-:host .toggle:hover {
-  --calcite-checkbox-shadow: inset 0 0 0 2px var(--calcite-color-brand);
+.check-svg {
+  @apply pointer-events-none
+    box-border
+    block
+    overflow-hidden
+    fill-current
+    stroke-current
+    stroke-1
+    transition-default;
+  background-color: var(--calcite-checkbox-background-color, var(--calcite-color-foreground-1));
+  box-shadow: var(--calcite-checkbox-shadow, inset 0 0 0 1px var(--calcite-color-border-input));
+  color: var(--calcite-checkbox-icon-color, var(--calcite-color-background));
 }
 
 .toggle {
@@ -91,6 +55,49 @@
   }
 }
 
+:host([scale="s"]) {
+  .check-svg,
+  .toggle {
+    inline-size: var(--calcite-checkbox-size, theme("spacing.3"));
+    block-size: var(--calcite-checkbox-size, theme("spacing.3"));
+  }
+}
+:host([scale="m"]) {
+  .check-svg,
+  .toggle {
+    inline-size: var(--calcite-checkbox-size, theme("fontSize.n1"));
+    block-size: var(--calcite-checkbox-size, theme("fontSize.n1"));
+  }
+}
+:host([scale="l"]) {
+  .check-svg,
+  .toggle {
+    inline-size: var(--calcite-checkbox-size, theme("spacing.4"));
+    block-size: var(--calcite-checkbox-size, theme("spacing.4"));
+  }
+}
+
+:host([status="invalid"]:not([checked])) {
+  .check-svg {
+    box-shadow: var(--calcite-checkbox-shadow-invalid, inset 0 0 0 1px var(--calcite-color-status-danger));
+  }
+
+  .toggle:focus {
+    @apply focus-outset-danger;
+  }
+}
+:host([checked]),
+:host([indeterminate]) {
+  .check-svg {
+    background-color: var(--calcite-checkbox-background-color-checked, var(--calcite-color-brand));
+    box-shadow: var(--calcite-checkbox-shadow-checked, inset 0 0 0 1px var(--calcite-color-brand));
+  }
+}
+:host([hovered]) .toggle,
+:host .toggle:hover {
+  box-shadow: var(--calcite-checkbox-shadow-hover, inset 0 0 0 2px var(--calcite-color-brand));
+}
+
 @include disabled();
 @include hidden-form-input();
 @include base-component();
diff --git a/packages/calcite-components/src/components/icon/icon.scss b/packages/calcite-components/src/components/icon/icon.scss
index 4d19f1fdb4d..9f257d63806 100644
--- a/packages/calcite-components/src/components/icon/icon.scss
+++ b/packages/calcite-components/src/components/icon/icon.scss
@@ -3,7 +3,7 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-ui-icon-color: *deprecated* in favor of `--calcite-icon-color`. The component's color. Defaults to `currentColor`.
+ * @prop --calcite-ui-icon-color: [Deprecated]  in favor of `--calcite-icon-color`. The component's color. Defaults to `currentColor`.
  * @props --calcite-icon-color: defines the color of the component. Defaults to `currentColor`.
  */
 
diff --git a/packages/calcite-components/src/components/input-message/input-message.scss b/packages/calcite-components/src/components/input-message/input-message.scss
index 2267a37dc51..fceaf1abae1 100644
--- a/packages/calcite-components/src/components/input-message/input-message.scss
+++ b/packages/calcite-components/src/components/input-message/input-message.scss
@@ -4,7 +4,7 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-input-message-icon-color: defines the icon color in the component.
- * @prop --calcite-input-message-spacing-value: *deprecated* The top margin spacing above the component.
+ * @prop --calcite-input-message-spacing-value: [Deprecated]  The top margin spacing above the component.
  * @prop --calcite-input-message-text-color: defines the text color of the component.
  *
  */
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.scss b/packages/calcite-components/src/components/tree-item/tree-item.scss
index ee490c4af94..7abbeb68e8a 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.scss
+++ b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -1,3 +1,16 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-tree-item-checkbox-background-color: defines the background-color of the sub-component.
+ * @prop --calcite-tree-item-checkbox-background-color-checked: defines the background-color of the sub-component when checked.
+ * @prop --calcite-tree-item-checkbox-icon-color: defines the checkmark color of the sub-component.
+ * @prop --calcite-tree-item-checkbox-shadow: defines the shadow of the sub-component.
+ * @prop --calcite-tree-item-checkbox-shadow-checked: defines the shadow of the sub-component when checked.
+ * @prop --calcite-tree-item-checkbox-shadow-hover: defines the shadow of the sub-component when hovered.
+ */
+
 :host {
   @apply text-color-3
     block
@@ -248,4 +261,13 @@
   }
 }
 
+calcite-checkbox {
+  --calcite-checkbox-background-color: var(--calcite-tree-item-checkbox-background-color);
+  --calcite-checkbox-background-color-checked: var(--calcite-tree-item-checkbox-background-color-checked);
+  --calcite-checkbox-icon-color: var(--calcite-tree-item-checkbox-icon-color);
+  --calcite-checkbox-shadow: var(--calcite-tree-item-checkbox-shadow);
+  --calcite-checkbox-shadow-checked: var(--calcite-tree-item-checkbox-shadow-checked);
+  --calcite-checkbox-shadow-hover: var(--calcite-tree-item-checkbox-shadow-hover);
+}
+
 @include base-component();

From 3cbd874bf6a7ddaeaafd0ea47caa1f769713b38d Mon Sep 17 00:00:00 2001
From: Ali Stump <alisonailea@users.noreply.github.com>
Date: Fri, 1 Mar 2024 16:16:03 -0800
Subject: [PATCH 08/15] feat(loader): add fallback component tokens (#8857)

**Related Issue:** #7180

## Summary

### Loader
--calcite-loader-bar-width: *deprecated* defines the width of the loader
animation.
--calcite-loader-color-oneThird: defines the color of a loader. Applies
to --calcite-loader-color between 33% - 66% of the animation.
--calcite-loader-color-start: defines the starting color of a loader.
Applies to --calcite-loader-color between 0% - 33% of the animation.
--calcite-loader-color-twoThirds: defines the color of a loader. Applies
to --calcite-loader-color between 66% - 99% of the animation.
--calcite-loader-font-size: *deprecated* Specifies the font size of the
loading percentage when type is `"determinate"`.
--calcite-loader-padding: *deprecated* Specifies the padding of the
loader.
--calcite-loader-size-inline: *deprecated* The width and height of an
inline loader.
--calcite-loader-size: *deprecated* The width and height of a non-inline
loader.
--calcite-loader-text-color: var(--calcite-color-text-1); defines the
text color of a loader.
--calcite-loader-track-color-determinate: var(--calcite-color-border-3);
defines the track color of a "determinate" loader

### Action

--calcite-action-loader-color-oneThird: Specifies the starting color of
the loader
--calcite-action-loader-color-start: Specifies the starting color of the
loader
--calcite-action-loader-color-twoThirds: Specifies the starting color of
the loader

### Block

--calcite-block-loader-color-oneThird: Specifies the starting color of
the loader
--calcite-block-loader-color-start: Specifies the starting color of the
loader
--calcite-block-loader-color-twoThirds: Specifies the starting color of
the loader

### Button

--calcite-button-loader-color-oneThird: Specifies the starting color of
the loader
--calcite-button-loader-color-start: Specifies the starting color of the
loader
--calcite-button-loader-color-twoThirds: Specifies the starting color of
the loader

### Card

--calcite-card-loader-color-oneThird: Specifies the starting color of
the loader
--calcite-card-loader-color-start: Specifies the starting color of the
loader
--calcite-card-loader-color-twoThirds: Specifies the starting color of
the loader

### Scrim

--calcite-scrim-loader-color-oneThird: Specifies the starting color of
the loader
--calcite-scrim-loader-color-start: Specifies the starting color of the
loader
--calcite-scrim-loader-color-twoThirds: Specifies the starting color of
the loader
---
 .../src/components/action/action.scss         |  11 +-
 .../src/components/block/block.scss           |  44 ++++----
 .../src/components/button/button.scss         |  11 ++
 .../src/components/card/card.scss             |  10 ++
 .../src/components/icon/icon.scss             |   2 +-
 .../input-message/input-message.scss          |   2 +-
 .../src/components/loader/loader.scss         | 101 ++++++++++--------
 .../src/components/scrim/scrim.scss           |  10 ++
 8 files changed, 121 insertions(+), 70 deletions(-)

diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index 13a20cb2d88..e850db1c1a0 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -5,6 +5,9 @@
  *
  * @prop --calcite-action-background-color: Specifies the background color of the component.
  * @prop --calcite-action-indicator-color: Specifies the color of the component's indicator.
+ * @prop --calcite-action-loader-color-one-third: Specifies the starting color of the loader
+ * @prop --calcite-action-loader-color-start: Specifies the starting color of the loader
+ * @prop --calcite-action-loader-color-two-thirds: Specifies the starting color of the loader
  * @prop --calcite-action-text-color: Specifies the text color of the component.
  *
  */
@@ -238,9 +241,9 @@ button {
 }
 
 calcite-loader {
-  //TODO: sub-component tokens
+  --calcite-loader-color-one-third: var(--calcite-action-loader-color-one-third);
+  --calcite-loader-color-start: var(--calcite-action-loader-color-start);
+  --calcite-loader-color-two-thirds: var(--calcite-action-loader-color-two-thirds);
 }
 
-calcite-icon {
-  //TODO: sub-component tokens
-}
+@include base-component();
diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss
index 62cdfcd3d44..fe348a50a56 100644
--- a/packages/calcite-components/src/components/block/block.scss
+++ b/packages/calcite-components/src/components/block/block.scss
@@ -1,22 +1,24 @@
 /**
-* CSS Custom Properties
-*
-* These properties can be overridden using the component's tag as selector.
-*
-* @prop --calcite-block-action-menu-border-color: The border color of the sub-component.
-* @prop --calcite-block-action-menu-text-color: The text color of the sub-component.
-* @prop --calcite-block-padding: Specifies the padding of the block `default` slot.
-*
-* @prop --calcite-block-handle-icon-color: Specifies the icon color of the sub-component.
-* @prop --calcite-block-handle-icon-color-hover: Specifies the icon color of the sub-component when in hover state.
-* @prop --calcite-block-handle-icon-color-focus: Specifies the icon color of the sub-component when in focus state.
-* @prop --calcite-block-handle-icon-color-selected: Specifies the icon color of the sub-component when selected.
-
-* @prop --calcite-block-handle-background-color: Specifies the background color of the sub-component.
-* @prop --calcite-block-handle-background-color-hover: Specifies the background color of the sub-component when in hover state.
-* @prop --calcite-block-handle-background-color-focus: Specifies the background color of the sub-component when in focus state.
-* @prop --calcite-block-handle-background-color-selected: Specifies the background color of the sub-component when selected.
-*/
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-block-action-menu-border-color: The border color of the sub-component.
+ * @prop --calcite-block-action-menu-text-color: The text color of the sub-component.
+ * @prop --calcite-block-handle-background-color-focus: Specifies the background color of the sub-component when in focus state.
+ * @prop --calcite-block-handle-background-color-hover: Specifies the background color of the sub-component when in hover state.
+ * @prop --calcite-block-handle-background-color-selected: Specifies the background color of the sub-component when selected.
+ * @prop --calcite-block-handle-background-color: Specifies the background color of the sub-component.
+ * @prop --calcite-block-handle-icon-color-focus: Specifies the icon color of the sub-component when in focus state.
+ * @prop --calcite-block-handle-icon-color-hover: Specifies the icon color of the sub-component when in hover state.
+ * @prop --calcite-block-handle-icon-color-selected: Specifies the icon color of the sub-component when selected.
+ * @prop --calcite-block-handle-icon-color: Specifies the icon color of the sub-component.
+ * @prop --calcite-block-loader-color-one-third: Specifies the starting color of the loader
+ * @prop --calcite-block-loader-color-start: Specifies the starting color of the loader
+ * @prop --calcite-block-loader-color-two-thirds: Specifies the starting color of the loader
+ * @prop --calcite-block-padding: Specifies the padding of the block `default` slot.
+ *
+ */
 
 :host {
   @extend %component-host;
@@ -189,4 +191,10 @@ calcite-handle {
   --calcite-handle-background-color-selected: var(--calcite-block-handle-background-color-selected);
 }
 
+calcite-loader {
+  --calcite-loader-color-one-third: var(--calcite-block-loader-color-one-third);
+  --calcite-loader-color-start: var(--calcite-block-loader-color-start);
+  --calcite-loader-color-two-thirds: var(--calcite-block-loader-color-two-thirds);
+}
+
 @include base-component();
diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
index f9572f7603b..ea3a9d6520f 100644
--- a/packages/calcite-components/src/components/button/button.scss
+++ b/packages/calcite-components/src/components/button/button.scss
@@ -27,6 +27,11 @@
  * @prop --calcite-button-border-color-hover: Specifies border colors of the component when in hover state.
  * @prop --calcite-button-border-color-focus: Specifies border colors of the component when in focus state.
  * @prop --calcite-button-border-color-active: Specifies border colors of the component when in active state.
+ *
+ * @prop --calcite-button-loader-color-one-third: defines the color of the loader when 1/3 complete.
+ * @prop --calcite-button-loader-color-start: defines the color of the loader at start and end.
+ * @prop --calcite-button-loader-color-two-thirds: defines the color of the loader when 2/3 complete.
+ *
  */
 
 :host {
@@ -839,4 +844,10 @@
   --calcite-button-padding-x-internal: theme("padding.11");
 }
 
+calcite-loader {
+  --calcite-loader-bar-color-one-third: var(--calcite-button-loader-bar-color-one-third);
+  --calcite-loader-bar-color-start: var(--calcite-button-loader-bar-color-start);
+  --calcite-loader-bar-color-two-thirds: var(--calcite-button-loader-bar-color-two-thirds);
+}
+
 @include base-component();
diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss
index 40deda7877c..c6c331eb633 100644
--- a/packages/calcite-components/src/components/card/card.scss
+++ b/packages/calcite-components/src/components/card/card.scss
@@ -14,6 +14,10 @@
  * @prop --calcite-card-selection-background-color: Specifies the background color of the component's selection element.
  * @prop --calcite-card-selection-icon-color-hover: Specifies the icon color of the component's selection element when hovered.
  * @prop --calcite-card-selection-icon-color-selected: Specifies the icon color of the component's selection element when `selected`.
+ 
+ * @prop --calcite-card-loader-color-one-third: Specifies the starting color of the loader
+ * @prop --calcite-card-loader-color-start: Specifies the starting color of the loader
+ * @prop --calcite-card-loader-color-two-thirds: Specifies the starting color of the loader
  * @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.
  * @prop --calcite-card-shadow: Specifies the shadow of the component.
  *
@@ -230,5 +234,11 @@ calcite-checkbox {
   --calcite-checkbox-shadow-hover: var(--calcite-card-checkbox-shadow-hover);
 }
 
+calcite-loader {
+  --calcite-loader-color-one-third: var(--calcite-card-loader-color-one-third);
+  --calcite-loader-color-start: var(--calcite-card-loader-color-start);
+  --calcite-loader-color-two-thirds: var(--calcite-card-loader-color-two-thirds);
+}
+
 @include base-component();
 @include disabled();
diff --git a/packages/calcite-components/src/components/icon/icon.scss b/packages/calcite-components/src/components/icon/icon.scss
index 9f257d63806..e9ccce0306b 100644
--- a/packages/calcite-components/src/components/icon/icon.scss
+++ b/packages/calcite-components/src/components/icon/icon.scss
@@ -3,7 +3,7 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-ui-icon-color: [Deprecated]  in favor of `--calcite-icon-color`. The component's color. Defaults to `currentColor`.
+ * @prop --calcite-ui-icon-color: [Deprecated] in favor of `--calcite-icon-color`. The component's color. Defaults to `currentColor`.
  * @props --calcite-icon-color: defines the color of the component. Defaults to `currentColor`.
  */
 
diff --git a/packages/calcite-components/src/components/input-message/input-message.scss b/packages/calcite-components/src/components/input-message/input-message.scss
index fceaf1abae1..9907cb1db74 100644
--- a/packages/calcite-components/src/components/input-message/input-message.scss
+++ b/packages/calcite-components/src/components/input-message/input-message.scss
@@ -4,7 +4,7 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-input-message-icon-color: defines the icon color in the component.
- * @prop --calcite-input-message-spacing-value: [Deprecated]  The top margin spacing above the component.
+ * @prop --calcite-input-message-spacing-value: [Deprecated] The top margin spacing above the component.
  * @prop --calcite-input-message-text-color: defines the text color of the component.
  *
  */
diff --git a/packages/calcite-components/src/components/loader/loader.scss b/packages/calcite-components/src/components/loader/loader.scss
index 7363729a1ae..1d082889f1a 100644
--- a/packages/calcite-components/src/components/loader/loader.scss
+++ b/packages/calcite-components/src/components/loader/loader.scss
@@ -3,10 +3,17 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-loader-font-size: Specifies the font size of the loading percentage when type is `"determinate"`.
- * @prop --calcite-loader-size: The width and height of a non-inline loader.
- * @prop --calcite-loader-size-inline: The width and height of an inline loader
- * @prop --calcite-loader-padding : Specifies the padding of the loader.
+ * @prop --calcite-loader-color-one-third: defines the color of a loader. Applies to --calcite-loader-color between 33% - 66% of the animation.
+ * @prop --calcite-loader-color-start:  defines the starting color of a loader. Applies to --calcite-loader-color between 0% - 33% of the animation.
+ * @prop --calcite-loader-color-two-thirds: defines the color of a loader. Applies to --calcite-loader-color between 66% - 99% of the animation.
+ * @prop --calcite-loader-bar-width:  [Deprecated] defines the width of the loader animation. 
+ * @prop --calcite-loader-font-size: [Deprecated] Specifies the font size of the loading percentage when type is `"determinate"`.
+ * @prop --calcite-loader-padding: [Deprecated] Specifies the padding of the loader.
+ * @prop --calcite-loader-size-inline: [Deprecated] The width and height of an inline loader.
+ * @prop --calcite-loader-size: [Deprecated] The width and height of a non-inline loader.
+ * @prop --calcite-loader-text-color: var(--calcite-color-text-1); defines the text color of a loader.
+ * @prop --calcite-loader-track-color-determinate: var(--calcite-color-border-3); defines the track color of a "determinate" loader
+ *
  */
 
 $stroke-width: 3;
@@ -20,35 +27,46 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
 }
 
 :host {
+  --calcite-internal-loader-bar-width: 3;
+  --calcite-internal-loader-spacing-vertical: theme("spacing.16");
+
   @apply relative mx-auto hidden items-center justify-center opacity-100;
-  min-block-size: var(--calcite-loader-size);
-  font-size: var(--calcite-loader-font-size);
-  stroke: var(--calcite-color-brand);
-  stroke-width: $stroke-width;
+  font-size: var(--calcite-loader-font-size, var(--calcite-internal-loader-font-size));
+  stroke: var(--calcite-internal-loader-bar-color, var(--calcite-color-brand));
+  stroke-width: var(--calcite-internal-loader-bar-width);
   fill: none;
   transform: scale(1, 1);
   animation: loader-color-shift scaleDuration(--calcite-internal-animation-timing-slow, 2) alternate-reverse infinite
     linear;
   padding-block: var(--calcite-loader-padding, theme("spacing.16"));
   will-change: contents;
+  block-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size));
+  min-block-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size));
+  inline-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size));
 }
 
 :host([scale="s"]) {
-  --calcite-loader-font-size: theme("fontSize.n2");
-  --calcite-loader-size: theme("spacing.8");
-  --calcite-loader-size-inline: theme("spacing.3");
+  --calcite-internal-loader-font-size: theme("fontSize.n2");
+  --calcite-internal-loader-size: theme("spacing.8");
+}
+:host([scale="s"][inline]) {
+  --calcite-internal-loader-size: theme("spacing.3");
 }
 
 :host([scale="m"]) {
-  --calcite-loader-font-size: theme("fontSize.0");
-  --calcite-loader-size: theme("spacing.16");
-  --calcite-loader-size-inline: theme("spacing.4");
+  --calcite-internal-loader-font-size: theme("fontSize.0");
+  --calcite-internal-loader-size: theme("spacing.16");
+}
+:host([scale="m"][inline]) {
+  --calcite-internal-loader-size: theme("spacing.4");
 }
 
 :host([scale="l"]) {
-  --calcite-loader-font-size: theme("fontSize.2");
-  --calcite-loader-size: theme("spacing.24");
-  --calcite-loader-size-inline: theme("spacing.6");
+  --calcite-internal-loader-font-size: theme("fontSize.2");
+  --calcite-internal-loader-size: theme("spacing.24");
+}
+:host([scale="l"][inline]) {
+  --calcite-internal-loader-size: theme("spacing.6");
 }
 
 :host([no-padding]) {
@@ -61,28 +79,29 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
 
 .loader__text {
   @apply text-n2h
-  text-color-1
   block
   text-center;
-  margin-block-start: calc(var(--calcite-loader-size) + theme("spacing.6"));
+  color: var(--calcite-loader-text-color, var(--calcite-color-text-1));
+  margin-block-start: calc(var(--calcite-loader-size, var(--calcite-internal-loader-font-size)) + theme("spacing.6"));
 }
 
 .loader__percentage {
-  @apply text-color-1 absolute block text-center;
-  font-size: var(--calcite-loader-font-size);
-  inline-size: var(--calcite-loader-size);
+  @apply absolute block text-center;
+  color: var(--calcite-loader-text-color, var(--calcite-color-text-1));
+  font-size: var(--calcite-loader-font-size, var(--calcite-internal-loader-font-size));
+  inline-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size));
   inset-inline-start: 50%;
-  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);
+  margin-inline-start: calc(var(--calcite-loader-size, var(--calcite-internal-loader-font-size)) / 2 * -1);
   line-height: 0.25;
   transform: scale(1, 1);
 }
 
 .loader__svgs {
   @apply absolute overflow-visible opacity-100;
-  inline-size: var(--calcite-loader-size);
-  block-size: var(--calcite-loader-size);
+  inline-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size));
+  block-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size));
   inset-inline-start: 50%;
-  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);
+  margin-inline-start: calc(var(--calcite-loader-size, var(--calcite-internal-loader-font-size)) / 2 * -1);
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   animation-duration: scaleDuration(--calcite-internal-animation-timing-slow, 6.66);
@@ -92,8 +111,8 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
 .loader__svg {
   @apply absolute top-0 origin-center overflow-visible;
   inset-inline-start: 0;
-  inline-size: var(--calcite-loader-size);
-  block-size: var(--calcite-loader-size);
+  inline-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size));
+  block-size: var(--calcite-loader-size, var(--calcite-internal-loader-font-size));
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
@@ -113,13 +132,13 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
 
 :host([type="determinate"]) {
   @apply animate-none;
-  stroke: var(--calcite-color-border-3);
+  stroke: var(--calcite-loader-track-color-determinate, var(--calcite-color-border-3));
   .loader__svgs {
     @apply animate-none;
   }
   .loader__svg--3 {
     @apply animate-none;
-    stroke: var(--calcite-color-brand);
+    stroke: var(--calcite-internal-loader-bar-color, var(--calcite-color-brand));
     stroke-dasharray: $loader-circumference;
     transform: rotate(-90deg);
     transition: all var(--calcite-internal-animation-timing-fast) linear;
@@ -128,23 +147,13 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
 
 :host([inline]) {
   @apply relative m-0 animate-none stroke-current stroke-2 py-0;
-  block-size: var(--calcite-loader-size-inline);
-  min-block-size: var(--calcite-loader-size-inline);
-  inline-size: var(--calcite-loader-size-inline);
-  margin-inline-end: calc(var(--calcite-loader-size-inline) * 0.5);
-  vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);
+  margin-inline-end: calc(var(--calcite-loader-size, var(--calcite-internal-loader-font-size)) * 0.5);
+  vertical-align: calc(var(--calcite-loader-size, var(--calcite-internal-loader-font-size)) * -1 * 0.2);
 }
 
 :host([inline]) .loader__svgs {
   @apply top-0 m-0;
   inset-inline-start: 0;
-  inline-size: var(--calcite-loader-size-inline);
-  block-size: var(--calcite-loader-size-inline);
-}
-
-:host([inline]) .loader__svg {
-  inline-size: var(--calcite-loader-size-inline);
-  block-size: var(--calcite-loader-size-inline);
 }
 
 :host([complete]) {
@@ -213,16 +222,16 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
 
 @keyframes loader-color-shift {
   0% {
-    stroke: var(--calcite-color-brand);
+    --calcite-internal-loader-bar-color: var(--calcite-loader-color-start, var(--calcite-color-brand));
   }
   33% {
-    stroke: var(--calcite-color-brand-press);
+    --calcite-internal-loader-bar-color: var(--calcite-loader-color-one-third, var(--calcite-color-brand-press));
   }
   66% {
-    stroke: var(--calcite-color-brand-hover);
+    --calcite-internal-loader-bar-color: var(--calcite-loader-color-two-thirds, var(--calcite-color-brand-hover));
   }
   100% {
-    stroke: var(--calcite-color-brand);
+    --calcite-internal-loader-bar-color: var(--calcite-loader-color-start, var(--calcite-color-brand));
   }
 }
 
diff --git a/packages/calcite-components/src/components/scrim/scrim.scss b/packages/calcite-components/src/components/scrim/scrim.scss
index d15973b4144..736e6739f17 100644
--- a/packages/calcite-components/src/components/scrim/scrim.scss
+++ b/packages/calcite-components/src/components/scrim/scrim.scss
@@ -5,6 +5,10 @@
  *
  * @prop --calcite-scrim-background: [Deprecated] Use the `--calcite-scrim-background-color` property instead. Specifies the background color of the component.
  * @prop --calcite-scrim-background-color: Specifies the background color of the component.
+ 
+ * @prop --calcite-scrim-loader-color-one-third: Specifies the starting color of the loader
+ * @prop --calcite-scrim-loader-color-start: Specifies the starting color of the loader
+ * @prop --calcite-scrim-loader-color-two-thirds: Specifies the starting color of the loader
  */
 :host {
   --calcite-scrim-background-color: var(--calcite-scrim-background, var(--calcite-color-transparent-scrim));
@@ -47,4 +51,10 @@
   @apply p-4;
 }
 
+calcite-loader {
+  --calcite-loader-color-one-third: var(--calcite-scrim-loader-color-one-third);
+  --calcite-loader-color-start: var(--calcite-scrim-loader-color-start);
+  --calcite-loader-color-two-thirds: var(--calcite-scrim-loader-color-two-thirds);
+}
+
 @include base-component();

From efc4a30970eb2e5549bac65aed67ca80ab2d2e4a Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Sat, 2 Mar 2024 08:30:41 -0800
Subject: [PATCH 09/15] fix(action): restore missing CSS lookup props (#8871)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Related Issue:** N/A

## Summary

✨💻🔨✨
---
 .../src/components/action/resources.ts                 | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/action/resources.ts b/packages/calcite-components/src/components/action/resources.ts
index 6e8763b201f..f5939e276ae 100644
--- a/packages/calcite-components/src/components/action/resources.ts
+++ b/packages/calcite-components/src/components/action/resources.ts
@@ -1,12 +1,16 @@
 export const CSS = {
+  actionIndicator: "action-indicator",
   button: "button",
-  buttonTextVisible: "button--text-visible",
   buttonCompact: "button--compact",
-  indicatorText: "indicator-text",
+  buttonTextVisible: "button--text-visible",
   iconContainer: "icon-container",
+  indicatorText: "indicator-text",
+  indicatorWithIcon: "indicator-with-icon",
+  indicatorWithoutIcon: "indicator-without-icon",
+  slotContainer: "slot-container",
+  slotContainerHidden: "slot-container--hidden",
   textContainer: "text-container",
   textContainerVisible: "text-container--visible",
-  actionIndicator: "action-indicator",
 };
 
 export const SLOTS = {

From 56a8b8a2f311a1e95977c108a9c34d7c80ea6583 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Sat, 2 Mar 2024 09:41:03 -0800
Subject: [PATCH 10/15] fix(action): add indicator fallback color (#8872)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Related Issue:** N/A

## Summary

✨⚪➡️🔵✨
---
 packages/calcite-components/src/components/action/action.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index e850db1c1a0..33614dc6562 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -30,7 +30,7 @@
       rounded-full;
     inset-block-end: calc(-0.275rem);
     inset-inline-end: calc(-0.275rem);
-    background-color: var(--calcite-action-indicator-color);
+    background-color: var(--calcite-action-indicator-color, var(--calcite-color-brand));
   }
 }
 

From 1df6ae7cb2bca749cd3ede0eacfc97b1692051c9 Mon Sep 17 00:00:00 2001
From: Adam Tirella <adam@tirel.la>
Date: Sun, 3 Mar 2024 20:21:35 -0800
Subject: [PATCH 11/15] refactor(scrim): Update token pattern (#8861)

**Related Issue:** #7180

## Summary
Updates token implementation to match latest recommended pattern.
---
 .../calcite-components/src/components/scrim/scrim.scss    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/scrim/scrim.scss b/packages/calcite-components/src/components/scrim/scrim.scss
index 736e6739f17..a92e8c42bc9 100644
--- a/packages/calcite-components/src/components/scrim/scrim.scss
+++ b/packages/calcite-components/src/components/scrim/scrim.scss
@@ -10,9 +10,6 @@
  * @prop --calcite-scrim-loader-color-start: Specifies the starting color of the loader
  * @prop --calcite-scrim-loader-color-two-thirds: Specifies the starting color of the loader
  */
-:host {
-  --calcite-scrim-background-color: var(--calcite-scrim-background, var(--calcite-color-transparent-scrim));
-}
 
 :host {
   @apply absolute
@@ -44,7 +41,10 @@
   justify-center
   overflow-hidden;
   animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
-  background-color: var(--calcite-scrim-background-color);
+  background-color: var(
+    --calcite-scrim-background-color,
+    var(--calcite-scrim-background, var(--calcite-color-transparent-scrim))
+  );
 }
 
 .content {

From 4758acd7b98f91ad802fcdf77d241c456c64d9ba Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Sun, 3 Mar 2024 21:23:40 -0800
Subject: [PATCH 12/15] refactor(graph): rename to use accent vs highlight
 (#8847)

**Related Issue:** #7180

## Summary

Renames prop for consistency.
---
 .../calcite-components/src/components/graph/graph.scss   | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/calcite-components/src/components/graph/graph.scss b/packages/calcite-components/src/components/graph/graph.scss
index 1c45a2f3abe..d786cdd8273 100644
--- a/packages/calcite-components/src/components/graph/graph.scss
+++ b/packages/calcite-components/src/components/graph/graph.scss
@@ -4,23 +4,20 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-graph-background-color: Specifies the background color of the component.
- * @prop --calcite-graph-highlight-color: Specifies the highlight color of the component.
+ * @prop --calcite-graph-accent-color: Specifies the accent color of the component.
  */
 
 :host {
-  --calcite-graph-background-color: currentColor;
-  --calcite-graph-highlight-color: var(--calcite-color-brand);
-
   @apply block;
   block-size: 100%;
 }
 
 .svg {
-  fill: var(--calcite-graph-background-color);
+  fill: var(--calcite-graph-background-color, currentColor);
   @apply m-0 block h-full w-full p-0;
 
   .graph-path--highlight {
-    fill: var(--calcite-graph-highlight-color);
+    fill: var(--calcite-graph-accent-color, var(--calcite-color-brand));
     @apply opacity-50;
   }
 }

From 9c37bea575fb6e133fb2a95a4ca88ad2eab9dd4f Mon Sep 17 00:00:00 2001
From: Adam Tirella <adam@tirel.la>
Date: Mon, 4 Mar 2024 12:05:21 -0800
Subject: [PATCH 13/15] refactor(card): Update token pattern (#8874)

**Related Issue:** #7180

## Summary
Clean up from token implementation.
---
 .../src/components/card/card.scss             | 20 ++-----------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss
index 9089a5a9e28..9389b3f92d7 100644
--- a/packages/calcite-components/src/components/card/card.scss
+++ b/packages/calcite-components/src/components/card/card.scss
@@ -14,12 +14,12 @@
  * @prop --calcite-card-selection-background-color: Specifies the background color of the component's selection element.
  * @prop --calcite-card-selection-icon-color-hover: Specifies the icon color of the component's selection element when hovered.
  * @prop --calcite-card-selection-icon-color-selected: Specifies the icon color of the component's selection element when `selected`.
+ * @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.
+ * @prop --calcite-card-shadow: Specifies the shadow of the component.
  
  * @prop --calcite-card-loader-color-one-third: Specifies the starting color of the loader
  * @prop --calcite-card-loader-color-start: Specifies the starting color of the loader
  * @prop --calcite-card-loader-color-two-thirds: Specifies the starting color of the loader
- * @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.
- * @prop --calcite-card-shadow: Specifies the shadow of the component.
  *
  */
 
@@ -87,13 +87,6 @@
   }
 }
 
-.footer {
-  @apply flex mt-auto flex-row content-between justify-between;
-  padding-inline: var(--calcite-spacing-md);
-  padding-block-start: var(--calcite-spacing-xxs);
-  padding-block-end: var(--calcite-spacing-md);
-}
-
 .card-content {
   @apply h-auto text-n2-wrap;
 }
@@ -223,15 +216,6 @@ slot[name="footer-end"]::slotted(*) {
   @apply flex gap-1;
 }
 
-calcite-checkbox {
-  --calcite-checkbox-background-color: var(--calcite-card-checkbox-background-color);
-  --calcite-checkbox-background-color-checked: var(--calcite-card-checkbox-background-color-checked);
-  --calcite-checkbox-icon-color: var(--calcite-card-checkbox-icon-color);
-  --calcite-checkbox-shadow: var(--calcite-card-checkbox-shadow);
-  --calcite-checkbox-shadow-checked: var(--calcite-card-checkbox-shadow-checked);
-  --calcite-checkbox-shadow-hover: var(--calcite-card-checkbox-shadow-hover);
-}
-
 calcite-loader {
   --calcite-loader-color-one-third: var(--calcite-card-loader-color-one-third);
   --calcite-loader-color-start: var(--calcite-card-loader-color-start);

From 7a7e65ffefabb8ab85fe9dd2b60dd1d47cf425c2 Mon Sep 17 00:00:00 2001
From: Adam Tirella <adam@tirel.la>
Date: Mon, 4 Mar 2024 12:05:33 -0800
Subject: [PATCH 14/15] refactor(meter): Update token pattern (#8873)

**Related Issue:** #7180

## Summary
Updates token implementation to match latest recommended pattern.
---
 .../src/components/meter/meter.scss           | 98 +++++++++----------
 1 file changed, 48 insertions(+), 50 deletions(-)

diff --git a/packages/calcite-components/src/components/meter/meter.scss b/packages/calcite-components/src/components/meter/meter.scss
index 8b7bb84c848..dd87dd96806 100644
--- a/packages/calcite-components/src/components/meter/meter.scss
+++ b/packages/calcite-components/src/components/meter/meter.scss
@@ -17,8 +17,6 @@
   * Local props
   * These properties are intended for internal component use only. It is not recommended that these properties be overwritten.
   *
-  * --calcite-internal-meter-fill-color
-  * --calcite-internal-meter-background-color
   * --calcite-internal-meter-space
   * --calcite-internal-meter-height
   * --calcite-internal-meter-font-size
@@ -32,14 +30,6 @@
   --calcite-internal-meter-space: var(--calcite-spacing-base);
   --calcite-internal-meter-height: var(--calcite-size-lg);
   --calcite-internal-meter-font-size: var(--calcite-font-size--1);
-  --calcite-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-brand));
-  --calcite-meter-background-color: var(--calcite-color-foreground-2);
-  --calcite-meter-border-color: var(--calcite-color-border-3);
-  --calcite-meter-shadow: var(--calcite-shadow-none);
-  --calcite-meter-range-text-color: var(--calcite-color-text-3);
-  --calcite-meter-value-text-color: var(--calcite-color-text-1);
-  --calcite-meter-shadow: var(--calcite-shadow-none);
-  --calcite-meter-corner-radius: 9999px;
 }
 
 :host([scale="s"]) {
@@ -52,40 +42,67 @@
   --calcite-internal-meter-font-size: var(--calcite-font-size-0);
 }
 
-:host([appearance="solid"]) {
-  --calcite-meter-border-color: var(--calcite-color-foreground-3);
-  --calcite-meter-background-color: var(--calcite-color-foreground-3);
+.container {
+  @apply flex relative items-center;
+  margin: 0;
+  inline-size: var(--calcite-container-size-content-fluid);
+  block-size: var(--calcite-internal-meter-height);
+  background-color: var(--calcite-meter-background-color, var(--calcite-color-foreground-2));
+  border: var(--calcite-border-width-sm) solid var(--calcite-meter-border-color, var(--calcite-color-border-3));
+  border-radius: var(--calcite-meter-corner-radius, 9999px);
+  box-shadow: var(--calcite-meter-shadow, var(--calcite-shadow-none));
+}
+
+.container.solid {
+  background-color: var(--calcite-meter-background-color, var(--calcite-color-foreground-3));
+  border-color: var(--calcite-meter-border-color, var(--calcite-color-foreground-3));
 }
 
-:host([appearance="outline"]) {
-  --calcite-meter-background-color: transparent;
+.container.outline {
+  background-color: var(--calcite-meter-background-color, transparent);
 }
 
 .fill {
-  --calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-brand));
+  @apply block absolute duration-150 ease-in-out z-default;
+  inset-inline-start: var(--calcite-internal-meter-space);
+  inset-block: var(--calcite-internal-meter-space);
+  border-radius: var(--calcite-meter-corner-radius, 9999px);
+  max-inline-size: calc(100% - (var(--calcite-internal-meter-space) * 2));
+  min-inline-size: calc(var(--calcite-internal-meter-height) - (var(--calcite-internal-meter-space) * 2));
+  background-color: var(--calcite-meter-fill-color, var(--calcite-color-brand));
+  transition-property: inline-size, background-color, box-shadow;
+}
+
+.solid .fill {
+  inset-block: 0;
+  inset-inline-start: 0;
+  max-inline-size: 100%;
+  min-inline-size: calc(var(--calcite-internal-meter-height));
+  box-shadow: 0 0 0 1px var(--calcite-meter-fill-color, var(--calcite-color-brand));
 }
 
 .fill-danger {
-  --calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-danger));
+  background-color: var(--calcite-meter-fill-color, var(--calcite-color-status-danger));
 }
 
 .fill-success {
-  --calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-success));
+  background-color: var(--calcite-meter-fill-color, var(--calcite-color-status-success));
 }
 
 .fill-warning {
-  --calcite-internal-meter-fill-color: var(--calcite-meter-fill-color, var(--calcite-color-status-warning));
+  background-color: var(--calcite-meter-fill-color, var(--calcite-color-status-warning));
 }
 
-.container {
-  @apply flex relative items-center;
-  margin: 0;
-  inline-size: var(--calcite-container-size-content-fluid);
-  block-size: var(--calcite-internal-meter-height);
-  background-color: var(--calcite-meter-background-color);
-  border: var(--calcite-border-width-sm) solid var(--calcite-meter-border-color);
-  border-radius: var(--calcite-meter-corner-radius);
-  box-shadow: var(--calcite-meter-shadow);
+.solid .fill-danger {
+  box-shadow: 0 0 0 1px var(--calcite-meter-fill-color, var(--calcite-color-status-danger));
+}
+
+.solid .fill-success {
+  box-shadow: 0 0 0 1px var(--calcite-meter-fill-color, var(--calcite-color-status-success));
+}
+
+.solid .fill-warning {
+  box-shadow: 0 0 0 1px var(--calcite-meter-fill-color, var(--calcite-color-status-warning));
 }
 
 .value-visible {
@@ -99,7 +116,7 @@
 .step-line {
   @apply block absolute inset-y-0;
   inline-size: var(--calcite-internal-meter-space);
-  background-color: var(--calcite-meter-border-color);
+  background-color: var(--calcite-meter-border-color, var(--calcite-color-border-3));
 }
 
 .label {
@@ -114,33 +131,14 @@
 .label-value {
   inset-block-end: calc(100% + 0.5em);
   font-weight: var(--calcite-font-weight-bold);
-  color: var(--calcite-meter-value-text-color);
+  color: var(--calcite-meter-value-text-color, var(--calcite-color-text-1));
 }
 
 .label-range {
-  color: var(--calcite-meter-range-text-color);
+  color: var(--calcite-meter-range-text-color, var(--calcite-color-text-3));
   inset-block-start: calc(100% + 0.5em);
 }
 
 .label-range .unit-label {
   font-weight: var(--calcite-font-weight-medium);
 }
-
-.fill {
-  @apply block absolute duration-150 ease-in-out z-default;
-  inset-inline-start: var(--calcite-internal-meter-space);
-  inset-block: var(--calcite-internal-meter-space);
-  border-radius: var(--calcite-meter-corner-radius);
-  max-inline-size: calc(100% - (var(--calcite-internal-meter-space) * 2));
-  min-inline-size: calc(var(--calcite-internal-meter-height) - (var(--calcite-internal-meter-space) * 2));
-  background-color: var(--calcite-internal-meter-fill-color);
-  transition-property: inline-size, background-color, box-shadow;
-}
-
-.solid .fill {
-  inset-block: 0;
-  inset-inline-start: 0;
-  max-inline-size: 100%;
-  min-inline-size: calc(var(--calcite-internal-meter-height));
-  box-shadow: 0 0 0 1px var(--calcite-internal-meter-fill-color);
-}

From dc433c93346fc4a8c01248f53a1d800be50a4dbb Mon Sep 17 00:00:00 2001
From: Adam Tirella <adam@tirel.la>
Date: Mon, 4 Mar 2024 12:41:55 -0800
Subject: [PATCH 15/15] refactor(chip): Update token pattern (#8876)

**Related Issue:** #7180

## Summary
Updates token implementation to match latest recommended pattern.
---
 .../src/components/chip/chip.scss             | 173 +++++++++---------
 1 file changed, 87 insertions(+), 86 deletions(-)

diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index ca93d6508e9..3bbf2780e55 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -31,17 +31,6 @@
 
 :host {
   @apply inline-flex;
-  --calcite-chip-background-color: var(--calcite-color-foreground-2);
-  --calcite-chip-border-color: var(--calcite-color-border-3);
-  --calcite-chip-shadow: var(--calcite-shadow-none);
-  --calcite-chip-corner-radius: 9999px;
-  --calcite-chip-close-icon-color: var(--calcite-color-text-3);
-  --calcite-chip-icon-color: var(--calcite-color-text-1);
-  --calcite-chip-close-background-color: var(--calcite-color-transparent);
-  --calcite-chip-close-background-color-hover: var(--calcite-color-transparent-hover);
-  --calcite-chip-close-background-color-focus: var(--calcite-color-transparent-hover);
-  --calcite-chip-close-background-color-active: var(--calcite-color-transparent-press);
-  --calcite-chip-close-focus-outline-color: var(--calcite-color-brand);
 }
 
 :host([scale="s"]) {
@@ -71,97 +60,110 @@
   --calcite-internal-chip-container-size: 44px;
 }
 
-:host([appearance="outline-fill"]) {
-  --calcite-chip-background-color: var(--calcite-color-foreground-1);
+.container {
+  @apply inline-flex
+  items-center
+  focus-base
+  justify-center
+  cursor-default
+  box-border
+  font-medium;
+  max-inline-size: var(--calcite-container-size-content-fluid);
+  border: var(--calcite-border-width-sm) solid var(--calcite-chip-border-color, var(--calcite-color-border-3));
+  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
+  border-radius: var(--calcite-chip-corner-radius, 9999px);
+  background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-2));
+  box-shadow: var(--calcite-chip-shadow, var(--calcite-shadow-none));
+  block-size: var(--calcite-internal-chip-container-size);
+  &.is-circle {
+    inline-size: var(--calcite-internal-chip-container-size);
+  }
+  &:not(.is-circle) {
+    padding-inline: var(--calcite-internal-chip-spacing-s);
+  }
+  &.selectable {
+    @apply cursor-pointer;
+  }
+  &:not(.non-interactive):focus {
+    @apply focus-outset;
+  }
 }
 
-:host([appearance="outline"]) {
-  --calcite-chip-background-color: transparent;
+:host([appearance="outline-fill"]) .container {
+  background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-1));
 }
 
-:host([kind="neutral"]) {
-  --calcite-chip-text-color: var(--calcite-color-text-1);
-  --calcite-chip-close-icon-color: var(--calcite-color-text-3);
-  --calcite-chip-icon-color: var(--calcite-color-text-1);
+:host([appearance="outline"]) .container {
+  background-color: var(--calcite-chip-background-color, transparent);
 }
 
-:host([kind="neutral"][appearance="solid"]) {
-  --calcite-chip-border-color: transparent;
+:host([kind="neutral"]) .container {
+  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
+  .close {
+    color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-3));
+  }
+  .chip-icon {
+    color: var(--calcite-chip-icon-color, var(--calcite-color-text-1));
+  }
 }
 
-:host([kind="neutral"][appearance="outline-fill"]),
-:host([kind="neutral"][appearance="outline"]) {
-  --calcite-chip-border-color: var(--calcite-color-border-1);
+:host([kind="neutral"][appearance="solid"]) .container {
+  border-color: var(--calcite-chip-border-color, transparent);
 }
 
-:host([kind="inverse"]) {
-  --calcite-chip-icon-color: var(--calcite-color-text-inverse);
+:host([kind="neutral"][appearance="outline-fill"]) .container,
+:host([kind="neutral"][appearance="outline"]) .container {
+  border-color: var(--calcite-chip-border-color, var(--calcite-color-border-1));
 }
 
-:host([kind="inverse"][appearance="solid"]) {
-  --calcite-chip-background-color: var(--calcite-color-inverse);
-  --calcite-chip-border-color: transparent;
-  --calcite-chip-text-color: var(--calcite-color-text-inverse);
-  --calcite-chip-close-icon-color: var(--calcite-color-text-inverse);
+:host([kind="inverse"]) .container .chip-icon {
+  color: var(--calcite-chip-icon-color, var(--calcite-color-text-inverse));
 }
 
-:host([kind="inverse"][appearance="outline-fill"]),
-:host([kind="inverse"][appearance="outline"]) {
-  --calcite-chip-border-color: var(--calcite-color-inverse);
-  --calcite-chip-text-color: var(--calcite-color-text-1);
-  --calcite-chip-icon-color: var(--calcite-color-inverse);
+:host([kind="inverse"][appearance="solid"]) .container {
+  background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse));
+  border-color: var(--calcite-chip-border-color, transparent);
+  color: var(--calcite-chip-text-color, var(--calcite-color-text-inverse));
+  .close {
+    color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-inverse));
+  }
 }
 
-:host([kind="brand"]) {
-  --calcite-chip-icon-color: var(--calcite-color-text-inverse);
+:host([kind="inverse"][appearance="outline-fill"]) .container,
+:host([kind="inverse"][appearance="outline"]) .container {
+  border-color: var(--calcite-chip-border-color, var(--calcite-color-inverse));
+  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
+  .chip-icon {
+    color: var(--calcite-chip-icon-color, var(--calcite-color-inverse));
+  }
 }
 
-:host([kind="brand"][appearance="solid"]) {
-  --calcite-chip-close-icon-color: var(--calcite-color-text-inverse);
-  --calcite-chip-background-color: var(--calcite-color-brand);
-  --calcite-chip-border-color: transparent;
-  --calcite-chip-text-color: var(--calcite-color-text-inverse);
+:host([kind="brand"]) .container .chip-icon {
+  color: var(--calcite-chip-icon-color, var(--calcite-color-text-inverse));
 }
 
-:host([kind="brand"][appearance="outline-fill"]),
-:host([kind="brand"][appearance="outline"]) {
-  --calcite-chip-border-color: var(--calcite-color-brand);
-  --calcite-chip-text-color: var(--calcite-color-text-1);
-  --calcite-chip-icon-color: var(--calcite-color-inverse);
+:host([kind="brand"][appearance="solid"]) .container {
+  background-color: var(--calcite-chip-background-color, var(--calcite-color-brand));
+  border-color: var(--calcite-chip-border-color, transparent);
+  color: var(--calcite-chip-text-color, var(--calcite-color-text-inverse));
+  .close {
+    color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-inverse));
+  }
 }
 
-:host([kind="brand"][appearance="solid"]),
-:host([kind="inverse"][appearance="solid"]) {
-  --calcite-chip-close-focus-outline-color: var(--calcite-color-text-inverse);
+:host([kind="brand"][appearance="outline-fill"]) .container,
+:host([kind="brand"][appearance="outline"]) .container {
+  border-color: var(--calcite-chip-border-color, var(--calcite-color-brand));
+  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
+  .chip-icon {
+    color: var(--calcite-chip-icon-color, var(--calcite-color-inverse));
+  }
 }
 
-.container {
-  @apply inline-flex
-  h-full
-  max-w-full
-  items-center
-  focus-base
-  justify-center
-  cursor-default
-  box-border
-  font-medium;
-  border: var(--calcite-border-width-sm) solid var(--calcite-chip-border-color);
-  color: var(--calcite-chip-text-color);
-  border-radius: var(--calcite-chip-corner-radius);
-  background-color: var(--calcite-chip-background-color);
-  box-shadow: var(--calcite-chip-shadow);
-  block-size: var(--calcite-internal-chip-container-size);
-  &.is-circle {
-    inline-size: var(--calcite-internal-chip-container-size);
-  }
-  &:not(.is-circle) {
-    padding-inline: var(--calcite-internal-chip-spacing-s);
-  }
-  &.selectable {
-    @apply cursor-pointer;
-  }
-  &:not(.non-interactive):focus {
-    @apply focus-outset;
+:host([kind="brand"][appearance="solid"]) .container,
+:host([kind="inverse"][appearance="solid"]) .container {
+  .close:focus {
+    outline-color: var(--calcite-chip-close-focus-outline-color, var(--calcite-color-text-inverse));
   }
 }
 
@@ -230,7 +232,6 @@
 .chip-icon {
   @apply relative my-0 inline-flex duration-150 ease-in-out;
   margin-inline: var(--calcite-internal-chip-spacing-s);
-  color: var(--calcite-chip-icon-color);
 }
 
 .image-container {
@@ -250,24 +251,24 @@
     border-none;
   -webkit-appearance: none;
   display: flex;
-  border-radius: var(--calcite-chip-corner-radius);
+  border-radius: var(--calcite-chip-corner-radius, 9999px);
   align-content: center;
   justify-content: center;
   margin: 0;
-  color: var(--calcite-chip-close-icon-color);
+  color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-3));
   block-size: var(--calcite-internal-chip-icon-size);
   inline-size: var(--calcite-internal-chip-icon-size);
-  background-color: var(--calcite-chip-close-background-color);
+  background-color: var(--calcite-chip-close-background-color, var(--calcite-color-transparent));
   &:hover {
-    background-color: var(--calcite-chip-close-background-color-focus);
+    background-color: var(--calcite-chip-close-background-color-hover, var(--calcite-color-transparent-hover));
   }
   &:focus {
-    background-color: var(--calcite-chip-close-background-color-focus);
+    background-color: var(--calcite-chip-close-background-color-focus, var(--calcite-color-transparent-hover));
     @apply focus-inset;
-    outline-color: var(--calcite-chip-close-focus-outline-color);
+    outline-color: var(--calcite-chip-close-focus-outline-color, var(--calcite-color-brand));
   }
   &:active {
-    background-color: var(--calcite-chip-close-background-color-active);
+    background-color: var(--calcite-chip-close-background-color-active, var(--calcite-color-transparent-press));
   }
   & calcite-icon {
     color: inherit;