diff --git a/package-lock.json b/package-lock.json
index 1f1d7ebe10d..421c4a0e860 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.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.6.0",
+      "version": "2.7.0-next.1",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.6.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.6.0",
+      "version": "2.7.0-next.1",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.6.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 04af696bd59..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,14 @@
 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
+
 ## [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..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.6.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.6.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 d0d21ceea3d..2c00cb8f05a 100644
--- a/packages/calcite-components-react/CHANGELOG.md
+++ b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,14 @@
 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
+
 ## [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..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.6.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.6.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 dee0d288e53..74f61e20f95 100644
--- a/packages/calcite-components/CHANGELOG.md
+++ b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,22 @@
 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
+
+- **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/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);
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index 55a243bfb0d..2e8be11ed22 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.1",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
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/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/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index 13a20cb2d88..33614dc6562 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.
  *
  */
@@ -27,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));
   }
 }
 
@@ -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/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 = {
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-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",
diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss
index 1af4e777291..9389b3f92d7 100644
--- a/packages/calcite-components/src/components/card/card.scss
+++ b/packages/calcite-components/src/components/card/card.scss
@@ -3,18 +3,23 @@
  *
  * 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.
+ 
+ * @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
  *
  */
 
@@ -82,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;
 }
@@ -140,12 +138,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 {
@@ -220,5 +216,11 @@ slot[name="footer-end"]::slotted(*) {
   @apply flex gap-1;
 }
 
+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/card/card.stories.ts b/packages/calcite-components/src/components/card/card.stories.ts
index 47e44241474..99ce346becd 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>
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/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;
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>
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;
   }
 }
diff --git a/packages/calcite-components/src/components/icon/icon.scss b/packages/calcite-components/src/components/icon/icon.scss
index 4d19f1fdb4d..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 2267a37dc51..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/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);
-}
diff --git a/packages/calcite-components/src/components/scrim/scrim.scss b/packages/calcite-components/src/components/scrim/scrim.scss
index d15973b4144..a92e8c42bc9 100644
--- a/packages/calcite-components/src/components/scrim/scrim.scss
+++ b/packages/calcite-components/src/components/scrim/scrim.scss
@@ -5,10 +5,11 @@
  *
  * @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));
-}
 
 :host {
   @apply absolute
@@ -40,11 +41,20 @@
   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 {
   @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();
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();