From c533b3878a07166e6b5ae25da146a59f3271b184 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Sun, 1 Sep 2024 10:39:56 -0700
Subject: [PATCH 01/45] refactor: consolidate width and widthScale into one
 width prop

---
 .../src/components/dialog/dialog.tsx                  | 11 +++++++++--
 .../src/components/dropdown/dropdown.tsx              |  7 ++++++-
 .../calcite-components/src/components/interfaces.ts   |  2 +-
 .../calcite-components/src/components/modal/modal.tsx | 11 +++++++++--
 .../calcite-components/src/components/sheet/sheet.tsx |  6 +++++-
 .../src/components/shell-panel/shell-panel.tsx        |  8 ++++++--
 6 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 34d18356aea..59a4ce012ab 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -31,7 +31,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { Kind, Scale } from "../interfaces";
+import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
   connectMessages,
@@ -205,9 +205,16 @@ export class Dialog
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /** Specifies the width of the component. */
+  /**
+   * Specifies the width of the component.
+   *
+   * @deprecated Use the `width` property instead.
+   */
   @Prop({ reflect: true }) widthScale: Scale = "m";
 
+  /** Specifies the width of the component. */
+  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width> = "m";
+
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 30063d80107..6509615b473 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -45,7 +45,7 @@ import {
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { RequestedItem } from "../dropdown-group/interfaces";
-import { Scale } from "../interfaces";
+import { Scale, Width } from "../interfaces";
 import { ItemKeyboardEvent } from "./interfaces";
 import { SLOTS } from "./resources";
 
@@ -169,9 +169,14 @@ export class Dropdown
 
   /**
    * Specifies the width of the component.
+   *
+   * @deprecated Use the `width` property instead.
    */
   @Prop({ reflect: true }) widthScale: Scale;
 
+  /** Specifies the width of the component. */
+  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width> = "m";
+
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
diff --git a/packages/calcite-components/src/components/interfaces.ts b/packages/calcite-components/src/components/interfaces.ts
index bce851b606e..8443e7e2fcd 100644
--- a/packages/calcite-components/src/components/interfaces.ts
+++ b/packages/calcite-components/src/components/interfaces.ts
@@ -28,7 +28,7 @@ export type SelectionMode =
   | "multiple";
 export type Scale = "s" | "m" | "l";
 export type Status = "invalid" | "valid" | "idle";
-export type Width = "auto" | "half" | "full";
+export type Width = "s" | "m" | "l" | "auto" | "full";
 export type IconType = "chevron" | "caret" | "ellipsis" | "overflow" | "plus-minus";
 export type CollapseDirection = "down" | "up";
 export type Dir = "ltr" | "rtl";
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index cbd94477bf0..d1edd891fe4 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -39,7 +39,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { Kind, Scale } from "../interfaces";
+import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
   connectMessages,
@@ -143,9 +143,16 @@ export class Modal
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /** Specifies the width of the component. */
+  /**
+   * Specifies the width of the component.
+   *
+   * @deprecated Use the `width` property instead.
+   */
   @Prop({ reflect: true }) widthScale: Scale = "m";
 
+  /** Specifies the width of the component. */
+  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width> = "m";
+
   /** Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */
   @Prop({ reflect: true }) fullscreen: boolean;
 
diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
index 8cc68f2dbf1..31d26b23efb 100644
--- a/packages/calcite-components/src/components/sheet/sheet.tsx
+++ b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -28,7 +28,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { LogicalFlowPosition, Scale } from "../interfaces";
+import { LogicalFlowPosition, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS } from "./resources";
 import { DisplayMode } from "./interfaces";
@@ -129,9 +129,13 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
 
   /**
    * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
+   *
+   * @deprecated Use the `width` property instead.
    */
   @Prop({ reflect: true }) widthScale: Scale = "m";
 
+  /** Specifies the width of the component. */
+  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width> = "m";
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index eaca7014097..0194f1da1f3 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -30,7 +30,7 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
-import { Layout, Position, Scale } from "../interfaces";
+import { Layout, Position, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { ShellPanelMessages } from "./assets/shell-panel/t9n";
 import { CSS, SLOTS } from "./resources";
@@ -118,10 +118,14 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
 
   /**
    * When `layout` is `vertical`, specifies the width of the component.
+   *
+   * @deprecated Use the `width` property instead.
    */
-
   @Prop({ reflect: true }) widthScale: Scale = "m";
 
+  /** Specifies the width of the component. */
+  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width> = "m";
+
   /**
    *  The direction of the component.
    */

From 448af217f771b85c70cca9a3e33a310a319c8b1b Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Sun, 1 Sep 2024 11:04:10 -0700
Subject: [PATCH 02/45] provide new property in the css, extract auto and full
 from interface

---
 .../calcite-components/src/components.d.ts    | 66 ++++++++++++++++---
 .../src/components/button/button.tsx          |  2 +-
 .../src/components/dialog/dialog.scss         |  8 ++-
 .../src/components/dropdown/dropdown.scss     |  9 ++-
 .../src/components/modal/modal.scss           |  9 ++-
 .../src/components/notice/notice.tsx          |  2 +-
 .../src/components/select/select.tsx          |  2 +-
 .../src/components/sheet/sheet.scss           |  9 ++-
 .../components/shell-panel/shell-panel.scss   | 18 +++--
 .../components/split-button/split-button.tsx  |  2 +-
 10 files changed, 98 insertions(+), 29 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 718aac02da7..0da56880f09 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -817,7 +817,7 @@ export namespace Components {
         /**
           * Specifies the width of the component.
          */
-        "width": Width;
+        "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteCard {
         /**
@@ -1784,6 +1784,11 @@ export namespace Components {
         /**
           * Specifies the width of the component.
          */
+        "width": Extract<"s" | "m" | "l", Width>;
+        /**
+          * Specifies the width of the component.
+          * @deprecated Use the `width` property instead.
+         */
         "widthScale": Scale;
     }
     interface CalciteDropdown {
@@ -1841,6 +1846,11 @@ export namespace Components {
         /**
           * Specifies the width of the component.
          */
+        "width": Extract<"s" | "m" | "l", Width>;
+        /**
+          * Specifies the width of the component.
+          * @deprecated Use the `width` property instead.
+         */
         "widthScale": Scale;
     }
     interface CalciteDropdownGroup {
@@ -3599,6 +3609,11 @@ export namespace Components {
         /**
           * Specifies the width of the component.
          */
+        "width": Extract<"s" | "m" | "l", Width>;
+        /**
+          * Specifies the width of the component.
+          * @deprecated Use the `width` property instead.
+         */
         "widthScale": Scale;
     }
     interface CalciteNavigation {
@@ -3744,7 +3759,7 @@ export namespace Components {
         /**
           * Specifies the width of the component.
          */
-        "width": Width;
+        "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteOption {
         /**
@@ -4469,7 +4484,7 @@ export namespace Components {
         /**
           * Specifies the width of the component.
          */
-        "width": Width;
+        "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteSheet {
         /**
@@ -4525,8 +4540,13 @@ export namespace Components {
           * Updates the element(s) that are used within the focus-trap of the component.
          */
         "updateFocusTrapElements": () => Promise<void>;
+        /**
+          * Specifies the width of the component.
+         */
+        "width": Extract<"s" | "m" | "l", Width>;
         /**
           * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
+          * @deprecated Use the `width` property instead.
          */
         "widthScale": Scale;
     }
@@ -4593,8 +4613,13 @@ export namespace Components {
           * When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable.
          */
         "resizable": boolean;
+        /**
+          * Specifies the width of the component.
+         */
+        "width": Extract<"s" | "m" | "l", Width>;
         /**
           * When `layout` is `vertical`, specifies the width of the component.
+          * @deprecated Use the `width` property instead.
          */
         "widthScale": Scale;
     }
@@ -4827,7 +4852,7 @@ export namespace Components {
         /**
           * Specifies the width of the component.
          */
-        "width": Width;
+        "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteStack {
         /**
@@ -8763,7 +8788,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the width of the component.
          */
-        "width"?: Width;
+        "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteCard {
         /**
@@ -9809,6 +9834,11 @@ declare namespace LocalJSX {
         /**
           * Specifies the width of the component.
          */
+        "width"?: Extract<"s" | "m" | "l", Width>;
+        /**
+          * Specifies the width of the component.
+          * @deprecated Use the `width` property instead.
+         */
         "widthScale"?: Scale;
     }
     interface CalciteDropdown {
@@ -9877,6 +9907,11 @@ declare namespace LocalJSX {
         /**
           * Specifies the width of the component.
          */
+        "width"?: Extract<"s" | "m" | "l", Width>;
+        /**
+          * Specifies the width of the component.
+          * @deprecated Use the `width` property instead.
+         */
         "widthScale"?: Scale;
     }
     interface CalciteDropdownGroup {
@@ -11728,6 +11763,11 @@ declare namespace LocalJSX {
         /**
           * Specifies the width of the component.
          */
+        "width"?: Extract<"s" | "m" | "l", Width>;
+        /**
+          * Specifies the width of the component.
+          * @deprecated Use the `width` property instead.
+         */
         "widthScale"?: Scale;
     }
     interface CalciteNavigation {
@@ -11877,7 +11917,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the width of the component.
          */
-        "width"?: Width;
+        "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteOption {
         /**
@@ -12624,7 +12664,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the width of the component.
          */
-        "width"?: Width;
+        "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteSheet {
         /**
@@ -12688,8 +12728,13 @@ declare namespace LocalJSX {
           * Determines where the component will be positioned.
          */
         "position"?: LogicalFlowPosition;
+        /**
+          * Specifies the width of the component.
+         */
+        "width"?: Extract<"s" | "m" | "l", Width>;
         /**
           * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
+          * @deprecated Use the `width` property instead.
          */
         "widthScale"?: Scale;
     }
@@ -12758,8 +12803,13 @@ declare namespace LocalJSX {
           * When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable.
          */
         "resizable"?: boolean;
+        /**
+          * Specifies the width of the component.
+         */
+        "width"?: Extract<"s" | "m" | "l", Width>;
         /**
           * When `layout` is `vertical`, specifies the width of the component.
+          * @deprecated Use the `width` property instead.
          */
         "widthScale"?: Scale;
     }
@@ -13004,7 +13054,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the width of the component.
          */
-        "width"?: Width;
+        "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteStack {
         /**
diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
index e6ab5713a08..3fa7ebae7be 100644
--- a/packages/calcite-components/src/components/button/button.tsx
+++ b/packages/calcite-components/src/components/button/button.tsx
@@ -163,7 +163,7 @@ export class Button
   @Prop({ reflect: true }) type = "button";
 
   /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Width = "auto";
+  @Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   /**
    * Made into a prop for testing purposes only
diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 0b5de775088..13b02d5b4f8 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -187,13 +187,17 @@ calcite-panel {
  * Sizes
  */
 @mixin dialog-size($size, $width) {
-  :host([width-scale="#{$size}"]) .dialog {
+  :host([width-scale="#{$size}"]) .dialog,
+  :host([width="#{$size}"]) .dialog {
+    @apply max-h-full
+      max-w-full;
     inline-size: var(--calcite-dialog-size-x, $width);
     block-size: var(--calcite-dialog-size-y, auto);
   }
 
   @media screen and (max-width: $width + 2 * $baseline) {
-    :host([width-scale="#{$size}"]) {
+    :host([width-scale="#{$size}"]),
+    :host([width="#{$size}"]) {
       .dialog {
         @apply m-0
           h-full
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.scss b/packages/calcite-components/src/components/dropdown/dropdown.scss
index 9405506833e..e6f1a09518e 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.scss
+++ b/packages/calcite-components/src/components/dropdown/dropdown.scss
@@ -44,13 +44,16 @@
 }
 
 // width
-:host([width-scale="s"]) {
+:host([width-scale="s"]),
+:host([width="s"]) {
   --calcite-dropdown-width: theme("spacing.48");
 }
-:host([width-scale="m"]) {
+:host([width-scale="m"]),
+:host([width="m"]) {
   --calcite-dropdown-width: theme("spacing.56");
 }
-:host([width-scale="l"]) {
+:host([width-scale="l"]),
+:host([width="l"]) {
   --calcite-dropdown-width: theme("spacing.64");
 }
 
diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss
index 7411a70b924..ba06803b3df 100644
--- a/packages/calcite-components/src/components/modal/modal.scss
+++ b/packages/calcite-components/src/components/modal/modal.scss
@@ -271,14 +271,16 @@ slot[name="primary"] {
  * Sizes
  */
 @mixin modal-size($size, $width) {
-  :host([width-scale="#{$size}"]) .modal {
+  :host([width-scale="#{$size}"]) .modal,
+  :host([width="#{$size}"]) .modal {
     @apply max-h-full max-w-full;
     inline-size: var(--calcite-modal-width, $width);
     block-size: var(--calcite-modal-height, auto);
   }
 
   @media screen and (max-width: $width + 2 * $baseline) {
-    :host([width-scale="#{$size}"]) {
+    :host([width-scale="#{$size}"]),
+    :host([width="#{$size}"]) {
       .modal {
         @apply m-0 h-full max-h-full w-full max-w-full;
       }
@@ -287,7 +289,8 @@ slot[name="primary"] {
         max-block-size: unset;
       }
     }
-    :host([width-scale="#{$size}"][docked]) .container {
+    :host([width-scale="#{$size}"][docked]) .container,
+    :host([width="#{$size}"][docked]) .container {
       align-items: flex-end;
     }
   }
diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx
index 676c8820d52..4b89f319a21 100644
--- a/packages/calcite-components/src/components/notice/notice.tsx
+++ b/packages/calcite-components/src/components/notice/notice.tsx
@@ -101,7 +101,7 @@ export class Notice
   @Prop({ reflect: true }) scale: Scale = "m";
 
   /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Width = "auto";
+  @Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   /**
    * Made into a prop for testing purposes only
diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx
index eb818bba742..6489471e9e1 100644
--- a/packages/calcite-components/src/components/select/select.tsx
+++ b/packages/calcite-components/src/components/select/select.tsx
@@ -155,7 +155,7 @@ export class Select
   /**
    * Specifies the width of the component.
    */
-  @Prop({ reflect: true }) width: Width = "auto";
+  @Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   //--------------------------------------------------------------------------
   //
diff --git a/packages/calcite-components/src/components/sheet/sheet.scss b/packages/calcite-components/src/components/sheet/sheet.scss
index 50d9dd990f3..a3f18fa3a6d 100644
--- a/packages/calcite-components/src/components/sheet/sheet.scss
+++ b/packages/calcite-components/src/components/sheet/sheet.scss
@@ -115,19 +115,22 @@
   min-inline-size: calc(100% - 1.5rem);
 }
 
-:host([position^="inline"][width-scale="s"]) {
+:host([position^="inline"][width-scale="s"]),
+:host([position^="inline"][width="s"]) {
   --calcite-sheet-width-internal: var(--calcite-sheet-width, 15vw);
   --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 360px);
   --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 260px);
 }
 
-:host([position^="inline"][width-scale="m"]) {
+:host([position^="inline"][width-scale="m"]),
+:host([position^="inline"][width="m"]) {
   --calcite-sheet-width-internal: var(--calcite-sheet-width, 25vw);
   --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 420px);
   --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 300px);
 }
 
-:host([position^="inline"][width-scale="l"]) {
+:host([position^="inline"][width-scale="l"]),
+:host([position^="inline"][width="l"]) {
   --calcite-sheet-width-internal: var(--calcite-sheet-width, 45vw);
   --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 680px);
   --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px);
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.scss b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
index 268cc627992..6bb5c67de10 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
@@ -52,35 +52,41 @@
   flex: 2;
 }
 
-:host([layout="vertical"][width-scale="s"]:not([display-mode="float-all"])) .content {
+:host([layout="vertical"][width-scale="s"]:not([display-mode="float-all"])) .content,
+:host([layout="vertical"][width="s"]:not([display-mode="float-all"])) .content {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);
   --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 300px);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px);
 }
 
-:host([layout="vertical"][width-scale="s"][display-mode="float-all"]) .content {
+:host([layout="vertical"][width-scale="s"][display-mode="float-all"]) .content,
+:host([layout="vertical"][width="s"][display-mode="float-all"]) .content {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px);
 }
 
-:host([layout="vertical"][width-scale="m"]:not([display-mode="float-all"])) .content {
+:host([layout="vertical"][width-scale="m"]:not([display-mode="float-all"])) .content,
+:host([layout="vertical"][width="m"]:not([display-mode="float-all"])) .content {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);
   --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 420px);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px);
 }
 
-:host([layout="vertical"][width-scale="m"][display-mode="float-all"]) .content {
+:host([layout="vertical"][width-scale="m"][display-mode="float-all"]) .content,
+:host([layout="vertical"][width="m"][display-mode="float-all"]) .content {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px);
 }
 
-:host([layout="vertical"][width-scale="l"]:not([display-mode="float-all"])) .content {
+:host([layout="vertical"][width-scale="l"]:not([display-mode="float-all"])) .content,
+:host([layout="vertical"][width="l"]:not([display-mode="float-all"])) .content {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);
   --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 680px);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px);
 }
 
-:host([layout="vertical"][width-scale="l"][display-mode="float-all"]) .content {
+:host([layout="vertical"][width-scale="l"][display-mode="float-all"]) .content,
+:host([layout="vertical"][width="l"][display-mode="float-all"]) .content {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px);
 }
diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx
index 5522a49df2d..dd45ff51d22 100644
--- a/packages/calcite-components/src/components/split-button/split-button.tsx
+++ b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -129,7 +129,7 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
   @Prop({ reflect: true }) scale: Scale = "m";
 
   /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Width = "auto";
+  @Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   /**
    * Fires when the primary button is clicked.

From 72f100809ab22f49a9610cceef140d717288df30 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Sun, 1 Sep 2024 14:11:47 -0700
Subject: [PATCH 03/45] deprecate heightScale, define new height prop in the
 interface

---
 .../calcite-components/src/components.d.ts    | 38 +++++++++++++++++--
 .../src/components/interfaces.ts              |  1 +
 .../src/components/sheet/sheet.scss           |  9 +++--
 .../src/components/sheet/sheet.tsx            |  7 +++-
 .../shell-center-row/shell-center-row.scss    | 12 ++++--
 .../shell-center-row/shell-center-row.tsx     |  7 +++-
 .../components/shell-panel/shell-panel.scss   |  6 ++-
 .../components/shell-panel/shell-panel.tsx    |  9 ++++-
 8 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 0da56880f09..bc96921704b 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
+import { Alignment, Appearance, CollapseDirection, FlipContext, Height, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 import { RequestedItem } from "./components/accordion/interfaces";
 import { IconNameOrString } from "./components/icon/interfaces";
 import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
@@ -101,7 +101,7 @@ import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/
 import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
 import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 import { ListItemAndHandle } from "./components/value-list-item/interfaces";
-export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
+export { Alignment, Appearance, CollapseDirection, FlipContext, Height, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 export { RequestedItem } from "./components/accordion/interfaces";
 export { IconNameOrString } from "./components/icon/interfaces";
 export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
@@ -4508,8 +4508,13 @@ export namespace Components {
           * When `true`, prevents focus trapping.
          */
         "focusTrapDisabled": boolean;
+        /**
+          * Specifies the height of the component.
+         */
+        "height": Extract<"s" | "m" | "l", Height>;
         /**
           * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale": Scale;
         /**
@@ -4561,8 +4566,13 @@ export namespace Components {
           * When `true`, the content area displays like a floating panel.
          */
         "detached": boolean;
+        /**
+          * Specifies the height of the component.
+         */
+        "height": Extract<"s" | "m" | "l", Height>;
         /**
           * Specifies the maximum height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale": Scale;
         /**
@@ -4582,15 +4592,20 @@ export namespace Components {
         "detached": boolean;
         /**
           * When `displayMode` is `float-content` or `float`, specifies the maximum height of the component.
-          * @deprecated Use `heightScale` instead.
+          * @deprecated Use the `height` property instead.
          */
         "detachedHeightScale": Scale;
         /**
           * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content.
          */
         "displayMode": DisplayMode1;
+        /**
+          * Specifies the height of the component.
+         */
+        "height": Extract<"s" | "m" | "l", Height>;
         /**
           * When `layout` is `horizontal`, specifies the maximum height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale": Scale;
         /**
@@ -12688,8 +12703,13 @@ declare namespace LocalJSX {
           * When `true`, prevents focus trapping.
          */
         "focusTrapDisabled"?: boolean;
+        /**
+          * Specifies the height of the component.
+         */
+        "height"?: Extract<"s" | "m" | "l", Height>;
         /**
           * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale"?: Scale;
         /**
@@ -12749,8 +12769,13 @@ declare namespace LocalJSX {
           * When `true`, the content area displays like a floating panel.
          */
         "detached"?: boolean;
+        /**
+          * Specifies the height of the component.
+         */
+        "height"?: Extract<"s" | "m" | "l", Height>;
         /**
           * Specifies the maximum height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale"?: Scale;
         /**
@@ -12770,15 +12795,20 @@ declare namespace LocalJSX {
         "detached"?: boolean;
         /**
           * When `displayMode` is `float-content` or `float`, specifies the maximum height of the component.
-          * @deprecated Use `heightScale` instead.
+          * @deprecated Use the `height` property instead.
          */
         "detachedHeightScale"?: Scale;
         /**
           * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content.
          */
         "displayMode"?: DisplayMode1;
+        /**
+          * Specifies the height of the component.
+         */
+        "height"?: Extract<"s" | "m" | "l", Height>;
         /**
           * When `layout` is `horizontal`, specifies the maximum height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale"?: Scale;
         /**
diff --git a/packages/calcite-components/src/components/interfaces.ts b/packages/calcite-components/src/components/interfaces.ts
index 8443e7e2fcd..f9576a73f18 100644
--- a/packages/calcite-components/src/components/interfaces.ts
+++ b/packages/calcite-components/src/components/interfaces.ts
@@ -2,6 +2,7 @@
 export type Alignment = "start" | "center" | "end";
 export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
 export type FlipContext = "both" | "start" | "end";
+export type Height = "s" | "m" | "l" | "auto" | "full";
 export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
 export type Layout =
   | "horizontal"
diff --git a/packages/calcite-components/src/components/sheet/sheet.scss b/packages/calcite-components/src/components/sheet/sheet.scss
index a3f18fa3a6d..de60d3277c1 100644
--- a/packages/calcite-components/src/components/sheet/sheet.scss
+++ b/packages/calcite-components/src/components/sheet/sheet.scss
@@ -136,19 +136,22 @@
   --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px);
 }
 
-:host([position^="block"][height-scale="s"]) {
+:host([position^="block"][height-scale="s"]),
+:host([position^="block"][height="s"]) {
   --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 160px);
   --calcite-sheet-height-internal: var(--calcite-sheet-height, 30vh);
   --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh);
 }
 
-:host([position^="block"][height-scale="m"]) {
+:host([position^="block"][height-scale="m"]),
+:host([position^="block"][height="s"]) {
   --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 200px);
   --calcite-sheet-height-internal: var(--calcite-sheet-height, 45vh);
   --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh);
 }
 
-:host([position^="block"][height-scale="l"]) {
+:host([position^="block"][height-scale="l"]),
+:host([position^="block"][height="s"]) {
   --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 240px);
   --calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);
   --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh);
diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
index 31d26b23efb..69879b80b5b 100644
--- a/packages/calcite-components/src/components/sheet/sheet.tsx
+++ b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -28,7 +28,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { LogicalFlowPosition, Scale, Width } from "../interfaces";
+import { Height, LogicalFlowPosition, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS } from "./resources";
 import { DisplayMode } from "./interfaces";
@@ -71,9 +71,14 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
 
   /**
    * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
+   *
+   * @deprecated Use the `height` property instead.
    */
   @Prop({ reflect: true }) heightScale: Scale = "m";
 
+  /** Specifies the height of the component. */
+  @Prop({ reflect: true }) height: Extract<"s" | "m" | "l", Height> = "m";
+
   /**
    * When `true`, prevents focus trapping.
    */
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
index a7f22f5c530..ee43d6ab7c6 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
@@ -36,19 +36,23 @@
   @apply self-start;
 }
 
-:host([height-scale="s"]) {
+:host([height-scale="s"]),
+:host([height="s"]) {
   block-size: theme("width[1/3]");
 }
 
-:host([height-scale="m"]) {
+:host([height-scale="m"]),
+:host([height="m"]) {
   block-size: 70%;
 }
 
-:host([height-scale="l"]) {
+:host([height-scale="l"]),
+:host([height="l"]) {
   @apply h-full;
 }
 
-:host([height-scale="l"][detached]) {
+:host([height-scale="l"][detached]),
+:host([height="l"][detached]) {
   block-size: calc(theme("height.full") - theme("spacing.8"));
 }
 
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index 6c526f8ea27..a5cb20e6c73 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -5,7 +5,7 @@ import {
   disconnectConditionalSlotComponent,
 } from "../../utils/conditionalSlot";
 import { getSlotted } from "../../utils/dom";
-import { Position, Scale } from "../interfaces";
+import { Height, Position, Scale } from "../interfaces";
 import { CSS, SLOTS } from "./resources";
 
 /**
@@ -31,9 +31,14 @@ export class ShellCenterRow implements ConditionalSlotComponent {
 
   /**
    * Specifies the maximum height of the component.
+   *
+   * @deprecated Use the `height` property instead.
    */
   @Prop({ reflect: true }) heightScale: Scale = "s";
 
+  /** Specifies the height of the component. */
+  @Prop({ reflect: true }) height: Extract<"s" | "m" | "l", Height> = "s";
+
   /**
    * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
    */
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.scss b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
index 6bb5c67de10..2c9688d22a5 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
@@ -91,7 +91,8 @@
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px);
 }
 
-:host([layout="horizontal"][height-scale="s"]) .content {
+:host([layout="horizontal"][height-scale="s"]) .content,
+:host([layout="horizontal"][height="s"]) .content {
   --calcite-internal-shell-panel-max-height: var(
     --calcite-shell-panel-max-height,
     var(--calcite-shell-panel-detached-max-height, 20vh)
@@ -106,7 +107,8 @@
   );
 }
 
-:host([layout="horizontal"][height-scale="l"]) .content {
+:host([layout="horizontal"][height-scale="l"]) .content,
+:host([layout="horizontal"][height="l"]) .content {
   --calcite-internal-shell-panel-max-height: var(
     --calcite-shell-panel-max-height,
     var(--calcite-shell-panel-detached-max-height, 40vh)
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index 0194f1da1f3..7fdfabc2159 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -30,7 +30,7 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
-import { Layout, Position, Scale, Width } from "../interfaces";
+import { Height, Layout, Position, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { ShellPanelMessages } from "./assets/shell-panel/t9n";
 import { CSS, SLOTS } from "./resources";
@@ -97,7 +97,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
   /**
    * When `displayMode` is `float-content` or `float`, specifies the maximum height of the component.
    *
-   * @deprecated Use `heightScale` instead.
+   * @deprecated Use the `height` property instead.
    */
   @Prop({ reflect: true }) detachedHeightScale: Scale;
 
@@ -108,6 +108,8 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
 
   /**
    * When `layout` is `horizontal`, specifies the maximum height of the component.
+   *
+   * @deprecated Use the `height` property instead.
    */
   @Prop({ reflect: true }) heightScale: Scale;
 
@@ -116,6 +118,9 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
     this.detachedHeightScale = value;
   }
 
+  /** Specifies the height of the component. */
+  @Prop({ reflect: true }) height: Extract<"s" | "m" | "l", Height> = "m";
+
   /**
    * When `layout` is `vertical`, specifies the width of the component.
    *

From 434ac8dc196a2adc1e62041c2592c3df2e3c619e Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 3 Sep 2024 17:38:04 -0700
Subject: [PATCH 04/45] half to be deprecated

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

diff --git a/packages/calcite-components/src/components/interfaces.ts b/packages/calcite-components/src/components/interfaces.ts
index f9576a73f18..5b30ec459e4 100644
--- a/packages/calcite-components/src/components/interfaces.ts
+++ b/packages/calcite-components/src/components/interfaces.ts
@@ -2,7 +2,7 @@
 export type Alignment = "start" | "center" | "end";
 export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
 export type FlipContext = "both" | "start" | "end";
-export type Height = "s" | "m" | "l" | "auto" | "full";
+export type Height = "s" | "m" | "l" | "auto" | "half" | "full";
 export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
 export type Layout =
   | "horizontal"
@@ -29,7 +29,7 @@ export type SelectionMode =
   | "multiple";
 export type Scale = "s" | "m" | "l";
 export type Status = "invalid" | "valid" | "idle";
-export type Width = "s" | "m" | "l" | "auto" | "full";
+export type Width = "s" | "m" | "l" | "auto" | "half" | "full";
 export type IconType = "chevron" | "caret" | "ellipsis" | "overflow" | "plus-minus";
 export type CollapseDirection = "down" | "up";
 export type Dir = "ltr" | "rtl";

From d3fe676ceb3229efa4a77daa5689c7fb0a107172 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 4 Sep 2024 13:08:00 -0700
Subject: [PATCH 05/45] remove unnecessary values from Height interface

---
 packages/calcite-components/src/components.d.ts      | 12 ++++++------
 .../calcite-components/src/components/interfaces.ts  |  2 +-
 .../src/components/sheet/sheet.tsx                   |  2 +-
 .../components/shell-center-row/shell-center-row.tsx |  2 +-
 .../src/components/shell-panel/shell-panel.tsx       |  2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index bc96921704b..8dba3a2d67e 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -4511,7 +4511,7 @@ export namespace Components {
         /**
           * Specifies the height of the component.
          */
-        "height": Extract<"s" | "m" | "l", Height>;
+        "height": Height;
         /**
           * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
           * @deprecated Use the `height` property instead.
@@ -4569,7 +4569,7 @@ export namespace Components {
         /**
           * Specifies the height of the component.
          */
-        "height": Extract<"s" | "m" | "l", Height>;
+        "height": Height;
         /**
           * Specifies the maximum height of the component.
           * @deprecated Use the `height` property instead.
@@ -4602,7 +4602,7 @@ export namespace Components {
         /**
           * Specifies the height of the component.
          */
-        "height": Extract<"s" | "m" | "l", Height>;
+        "height": Height;
         /**
           * When `layout` is `horizontal`, specifies the maximum height of the component.
           * @deprecated Use the `height` property instead.
@@ -12706,7 +12706,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the height of the component.
          */
-        "height"?: Extract<"s" | "m" | "l", Height>;
+        "height"?: Height;
         /**
           * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
           * @deprecated Use the `height` property instead.
@@ -12772,7 +12772,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the height of the component.
          */
-        "height"?: Extract<"s" | "m" | "l", Height>;
+        "height"?: Height;
         /**
           * Specifies the maximum height of the component.
           * @deprecated Use the `height` property instead.
@@ -12805,7 +12805,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the height of the component.
          */
-        "height"?: Extract<"s" | "m" | "l", Height>;
+        "height"?: Height;
         /**
           * When `layout` is `horizontal`, specifies the maximum height of the component.
           * @deprecated Use the `height` property instead.
diff --git a/packages/calcite-components/src/components/interfaces.ts b/packages/calcite-components/src/components/interfaces.ts
index 5b30ec459e4..66434036e50 100644
--- a/packages/calcite-components/src/components/interfaces.ts
+++ b/packages/calcite-components/src/components/interfaces.ts
@@ -2,7 +2,7 @@
 export type Alignment = "start" | "center" | "end";
 export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
 export type FlipContext = "both" | "start" | "end";
-export type Height = "s" | "m" | "l" | "auto" | "half" | "full";
+export type Height = "s" | "m" | "l";
 export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
 export type Layout =
   | "horizontal"
diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
index 69879b80b5b..245a2b39c4c 100644
--- a/packages/calcite-components/src/components/sheet/sheet.tsx
+++ b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -77,7 +77,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
   @Prop({ reflect: true }) heightScale: Scale = "m";
 
   /** Specifies the height of the component. */
-  @Prop({ reflect: true }) height: Extract<"s" | "m" | "l", Height> = "m";
+  @Prop({ reflect: true }) height: Height = "m";
 
   /**
    * When `true`, prevents focus trapping.
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index a5cb20e6c73..587dfa43461 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -37,7 +37,7 @@ export class ShellCenterRow implements ConditionalSlotComponent {
   @Prop({ reflect: true }) heightScale: Scale = "s";
 
   /** Specifies the height of the component. */
-  @Prop({ reflect: true }) height: Extract<"s" | "m" | "l", Height> = "s";
+  @Prop({ reflect: true }) height: Height = "s";
 
   /**
    * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index 7fdfabc2159..23e39ac62f2 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -119,7 +119,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
   }
 
   /** Specifies the height of the component. */
-  @Prop({ reflect: true }) height: Extract<"s" | "m" | "l", Height> = "m";
+  @Prop({ reflect: true }) height: Height = "m";
 
   /**
    * When `layout` is `vertical`, specifies the width of the component.

From 197f85251fba640a0655c3bcda69fc983043d6da Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 4 Sep 2024 15:17:43 -0700
Subject: [PATCH 06/45] Doc for deprecated  value

---
 .../calcite-components/src/components.d.ts    | 24 +++++++++----------
 .../src/components/button/button.tsx          |  2 +-
 .../src/components/notice/notice.tsx          |  2 +-
 .../segmented-control/segmented-control.tsx   |  2 +-
 .../src/components/select/select.tsx          |  4 +---
 .../components/split-button/split-button.tsx  |  2 +-
 .../components/tile-select/tile-select.tsx    |  2 +-
 7 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 8dba3a2d67e..d0777330ec3 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -815,7 +815,7 @@ export namespace Components {
          */
         "type": string;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width": Extract<"auto" | "full", Width>;
     }
@@ -3757,7 +3757,7 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width": Extract<"auto" | "full", Width>;
     }
@@ -4387,7 +4387,7 @@ export namespace Components {
          */
         "value": string;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width": Extract<"auto" | "full", Width>;
     }
@@ -4482,7 +4482,7 @@ export namespace Components {
          */
         "value": string;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width": Extract<"auto" | "full", Width>;
     }
@@ -4865,7 +4865,7 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width": Extract<"auto" | "full", Width>;
     }
@@ -5630,7 +5630,7 @@ export namespace Components {
          */
         "value": any;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width": Extract<"auto" | "full", Width>;
     }
@@ -8801,7 +8801,7 @@ declare namespace LocalJSX {
          */
         "type"?: string;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width"?: Extract<"auto" | "full", Width>;
     }
@@ -11930,7 +11930,7 @@ declare namespace LocalJSX {
          */
         "scale"?: Scale;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width"?: Extract<"auto" | "full", Width>;
     }
@@ -12578,7 +12578,7 @@ declare namespace LocalJSX {
          */
         "value"?: string;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width"?: Extract<"auto" | "full", Width>;
     }
@@ -12677,7 +12677,7 @@ declare namespace LocalJSX {
          */
         "value"?: string;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width"?: Extract<"auto" | "full", Width>;
     }
@@ -13082,7 +13082,7 @@ declare namespace LocalJSX {
          */
         "scale"?: Scale;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width"?: Extract<"auto" | "full", Width>;
     }
@@ -13859,7 +13859,7 @@ declare namespace LocalJSX {
          */
         "value"?: any;
         /**
-          * Specifies the width of the component.
+          * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
          */
         "width"?: Extract<"auto" | "full", Width>;
     }
diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
index 3fa7ebae7be..4c201d54c7c 100644
--- a/packages/calcite-components/src/components/button/button.tsx
+++ b/packages/calcite-components/src/components/button/button.tsx
@@ -162,7 +162,7 @@ export class Button
    */
   @Prop({ reflect: true }) type = "button";
 
-  /** Specifies the width of the component. */
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
   @Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   /**
diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx
index 4b89f319a21..ad43eebfee7 100644
--- a/packages/calcite-components/src/components/notice/notice.tsx
+++ b/packages/calcite-components/src/components/notice/notice.tsx
@@ -100,7 +100,7 @@ export class Notice
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /** Specifies the width of the component. */
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
   @Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   /**
diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
index fb52158ddac..ed2ca4eed0c 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
@@ -158,7 +158,7 @@ export class SegmentedControl
     valueMissing: false,
   };
 
-  /** Specifies the width of the component. */
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
   @Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   //--------------------------------------------------------------------------
diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx
index 6489471e9e1..9d3c7bff898 100644
--- a/packages/calcite-components/src/components/select/select.tsx
+++ b/packages/calcite-components/src/components/select/select.tsx
@@ -152,9 +152,7 @@ export class Select
     this.value = selectedOption?.value;
   }
 
-  /**
-   * Specifies the width of the component.
-   */
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
   @Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   //--------------------------------------------------------------------------
diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx
index dd45ff51d22..1f66941c558 100644
--- a/packages/calcite-components/src/components/split-button/split-button.tsx
+++ b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -128,7 +128,7 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /** Specifies the width of the component. */
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
   @Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   /**
diff --git a/packages/calcite-components/src/components/tile-select/tile-select.tsx b/packages/calcite-components/src/components/tile-select/tile-select.tsx
index 6f6586d3c69..c3767a4c789 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.tsx
+++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx
@@ -100,7 +100,7 @@ export class TileSelect implements InteractiveComponent, LoadableComponent {
   /** The component's value. */
   @Prop() value: any;
 
-  /** Specifies the width of the component. */
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
   @Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   //--------------------------------------------------------------------------

From e0bcfc9760f7b7c57b175b41811e71bef59033ab Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 6 Sep 2024 22:23:21 -0700
Subject: [PATCH 07/45] cleanup accidental add

---
 packages/calcite-components/src/components/dialog/dialog.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 13b02d5b4f8..11aaa105012 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -189,8 +189,6 @@ calcite-panel {
 @mixin dialog-size($size, $width) {
   :host([width-scale="#{$size}"]) .dialog,
   :host([width="#{$size}"]) .dialog {
-    @apply max-h-full
-      max-w-full;
     inline-size: var(--calcite-dialog-size-x, $width);
     block-size: var(--calcite-dialog-size-y, auto);
   }

From bfa503a53342e60b41c2bddfc9addba01e4c3101 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Sat, 7 Sep 2024 20:43:29 -0700
Subject: [PATCH 08/45] remove default value

---
 packages/calcite-components/src/components/dialog/dialog.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 59a4ce012ab..bbc1544d45e 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -210,10 +210,10 @@ export class Dialog
    *
    * @deprecated Use the `width` property instead.
    */
-  @Prop({ reflect: true }) widthScale: Scale = "m";
+  @Prop({ reflect: true }) widthScale: Scale;
 
   /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width> = "m";
+  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width>;
 
   //--------------------------------------------------------------------------
   //

From 880bb92ba7a7f769c0234433690b041b10e0fe22 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Sat, 7 Sep 2024 21:16:42 -0700
Subject: [PATCH 09/45] remove default from dropdown

---
 .../calcite-components/src/components/dropdown/dropdown.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 6509615b473..651378e4392 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -175,7 +175,7 @@ export class Dropdown
   @Prop({ reflect: true }) widthScale: Scale;
 
   /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width> = "m";
+  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width>;
 
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";

From 435ce0dca8f8b62477e34a142d5eb182258c804c Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Sat, 7 Sep 2024 21:40:34 -0700
Subject: [PATCH 10/45] WIP

---
 packages/calcite-components/src/components/dialog/dialog.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index bbc1544d45e..59a4ce012ab 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -210,10 +210,10 @@ export class Dialog
    *
    * @deprecated Use the `width` property instead.
    */
-  @Prop({ reflect: true }) widthScale: Scale;
+  @Prop({ reflect: true }) widthScale: Scale = "m";
 
   /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width>;
+  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width> = "m";
 
   //--------------------------------------------------------------------------
   //

From 4b33315fbe330ad1226513ea05dc16b5bb64ee32 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 20 Sep 2024 14:03:26 -0700
Subject: [PATCH 11/45] dialog width takes precedence over widthScale if both
 are defined

---
 .../src/components/dialog/dialog.scss         | 44 ++++++++++++++++---
 .../src/components/dialog/dialog.tsx          |  8 +++-
 .../src/components/dialog/resources.ts        |  2 +
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 11aaa105012..eb4d8b09c49 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -186,16 +186,44 @@ calcite-panel {
 /**
  * Sizes
  */
+// @mixin dialog-size($size, $width) {
+//   :host([width-scale="#{$size}"]) .dialog,
+//   :host([width="#{$size}"]) .dialog {
+//     inline-size: var(--calcite-dialog-size-x, $width);
+//     block-size: var(--calcite-dialog-size-y, auto);
+//   }
+
+//   @media screen and (max-width: $width + 2 * $baseline) {
+//     :host([width-scale="#{$size}"]),
+//     :host([width="#{$size}"]) {
+//       .dialog {
+//         @apply m-0
+//           h-full
+//           max-h-full
+//           w-full
+//           max-w-full;
+//         inset-inline-start: 0;
+//         inset-block-start: var(--calcite-internal-dialog-animation-offset);
+//         &--opening {
+//           &-active {
+//             inset-block-start: 0;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
 @mixin dialog-size($size, $width) {
-  :host([width-scale="#{$size}"]) .dialog,
-  :host([width="#{$size}"]) .dialog {
-    inline-size: var(--calcite-dialog-size-x, $width);
+  :host .width-scale-#{$size} .dialog,
+  :host .width-#{$size} .dialog {
+    inline-size: var(--calcite-dialog-size-x, width);
     block-size: var(--calcite-dialog-size-y, auto);
   }
 
   @media screen and (max-width: $width + 2 * $baseline) {
-    :host([width-scale="#{$size}"]),
-    :host([width="#{$size}"]) {
+    :host .width-scale-#{$size},
+    :host .width-#{$size} {
       .dialog {
         @apply m-0
           h-full
@@ -214,7 +242,11 @@ calcite-panel {
   }
 }
 
-:host([width="small"]) .dialog {
+// :host([width="small"]) .dialog {
+//   @apply w-auto;
+// }
+
+:host .width-s .dialog {
   @apply w-auto;
 }
 
diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 59a4ce012ab..24a79a941b6 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -213,7 +213,7 @@ export class Dialog
   @Prop({ reflect: true }) widthScale: Scale = "m";
 
   /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width> = "m";
+  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width>;
 
   //--------------------------------------------------------------------------
   //
@@ -271,7 +271,11 @@ export class Dialog
             aria-description={description}
             aria-label={heading}
             aria-modal={toAriaBoolean(this.modal)}
-            class={CSS.dialog}
+            class={{
+              [CSS.dialog]: true,
+              [`${this.width ? `${CSS.width}-${this.width}` : this.widthScale ? `${CSS.widthScale}-${this.widthScale}` : ""}`]:
+                !!this.width || !!this.widthScale,
+            }}
             onKeyDown={this.handleKeyDown}
             ref={this.setTransitionEl}
             role="dialog"
diff --git a/packages/calcite-components/src/components/dialog/resources.ts b/packages/calcite-components/src/components/dialog/resources.ts
index 31298ddf31a..d99b0aa7a36 100644
--- a/packages/calcite-components/src/components/dialog/resources.ts
+++ b/packages/calcite-components/src/components/dialog/resources.ts
@@ -9,6 +9,8 @@ export const CSS = {
   containerEmbedded: "container--embedded",
   assistiveText: "assistive-text",
   openingActive: "dialog--opening-active",
+  width: "width",
+  widthScale: "width-scale",
 };
 
 export const SLOTS = {

From 0e83ac0d5fa00140a2adfa057757e21f44851ad9 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 20 Sep 2024 15:08:34 -0700
Subject: [PATCH 12/45] typo

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

diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index eb4d8b09c49..8e02a96131c 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -217,7 +217,7 @@ calcite-panel {
 @mixin dialog-size($size, $width) {
   :host .width-scale-#{$size} .dialog,
   :host .width-#{$size} .dialog {
-    inline-size: var(--calcite-dialog-size-x, width);
+    inline-size: var(--calcite-dialog-size-x, $width);
     block-size: var(--calcite-dialog-size-y, auto);
   }
 

From 23848e386b9dea3f0acedb9513d4f8a8c0712a46 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 20 Sep 2024 15:31:18 -0700
Subject: [PATCH 13/45] simplify selectors'

---
 .../calcite-components/src/components/dialog/dialog.scss  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 8e02a96131c..7275b202baf 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -215,15 +215,15 @@ calcite-panel {
 // }
 
 @mixin dialog-size($size, $width) {
-  :host .width-scale-#{$size} .dialog,
-  :host .width-#{$size} .dialog {
+  .width-scale-#{$size},
+  .width-#{$size} {
     inline-size: var(--calcite-dialog-size-x, $width);
     block-size: var(--calcite-dialog-size-y, auto);
   }
 
   @media screen and (max-width: $width + 2 * $baseline) {
-    :host .width-scale-#{$size},
-    :host .width-#{$size} {
+    .width-scale-#{$size},
+    .width-#{$size} {
       .dialog {
         @apply m-0
           h-full

From 8515421943f6b34036be098569987527240644e6 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 20 Sep 2024 16:31:19 -0700
Subject: [PATCH 14/45] WIP and add test for deprecated widthScale

---
 .../src/components/dialog/dialog.e2e.ts       | 15 +++++++++
 .../src/components/dialog/dialog.scss         | 31 -------------------
 .../src/components/dialog/dialog.tsx          |  2 +-
 3 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
index f4e02be30b8..989dff331d7 100644
--- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -131,6 +131,10 @@ describe("calcite-dialog", () => {
         propertyName: "widthScale",
         value: "s",
       },
+      {
+        propertyName: "width",
+        value: "s",
+      },
     ]);
   });
 
@@ -1120,4 +1124,15 @@ describe("calcite-dialog", () => {
       expect(await dialog.getProperty("open")).toBe(true);
     });
   });
+
+  describe("deprecate widthScale", () => {
+    it("width takes precedence over widthScale", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-dialog ${CSS.widthScale}="l" ${CSS.width}="s"></calcite-dialog>`);
+      const dialog = await page.find(`calcite-dialog >>> .${CSS.dialog}`);
+      await page.waitForChanges();
+
+      expect(dialog.classList.contains(`${CSS.width}-s`)).toBe(true);
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 7275b202baf..9069bc1f9dc 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -186,33 +186,6 @@ calcite-panel {
 /**
  * Sizes
  */
-// @mixin dialog-size($size, $width) {
-//   :host([width-scale="#{$size}"]) .dialog,
-//   :host([width="#{$size}"]) .dialog {
-//     inline-size: var(--calcite-dialog-size-x, $width);
-//     block-size: var(--calcite-dialog-size-y, auto);
-//   }
-
-//   @media screen and (max-width: $width + 2 * $baseline) {
-//     :host([width-scale="#{$size}"]),
-//     :host([width="#{$size}"]) {
-//       .dialog {
-//         @apply m-0
-//           h-full
-//           max-h-full
-//           w-full
-//           max-w-full;
-//         inset-inline-start: 0;
-//         inset-block-start: var(--calcite-internal-dialog-animation-offset);
-//         &--opening {
-//           &-active {
-//             inset-block-start: 0;
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
 
 @mixin dialog-size($size, $width) {
   .width-scale-#{$size},
@@ -242,10 +215,6 @@ calcite-panel {
   }
 }
 
-// :host([width="small"]) .dialog {
-//   @apply w-auto;
-// }
-
 :host .width-s .dialog {
   @apply w-auto;
 }
diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 24a79a941b6..4da722c13e3 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -273,7 +273,7 @@ export class Dialog
             aria-modal={toAriaBoolean(this.modal)}
             class={{
               [CSS.dialog]: true,
-              [`${this.width ? `${CSS.width}-${this.width}` : this.widthScale ? `${CSS.widthScale}-${this.widthScale}` : ""}`]:
+              [`${this.width ? `${CSS.width}-${this.width}` : this.widthScale ? `${CSS.width}-${this.widthScale}` : ""}`]:
                 !!this.width || !!this.widthScale,
             }}
             onKeyDown={this.handleKeyDown}

From ceec250363fee25fd25badd7d10c6b9e92d51539 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 20 Sep 2024 17:46:10 -0700
Subject: [PATCH 15/45] WIP and dropdown tests, width priority of width-scale

---
 .../src/components/dropdown/dropdown.e2e.ts   | 24 +++++++++++++++++++
 .../src/components/dropdown/dropdown.scss     | 12 ++++------
 .../src/components/dropdown/dropdown.tsx      | 10 +++++---
 .../src/components/dropdown/resources.ts      |  6 +++++
 4 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
index 1d7029959a0..856bdc6e30e 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -18,6 +18,7 @@ import {
   isElementFocused,
   skipAnimations,
 } from "../../tests/utils";
+import { CSS } from "./resources";
 
 describe("calcite-dropdown", () => {
   const simpleDropdownHTML = html`
@@ -37,6 +38,10 @@ describe("calcite-dropdown", () => {
         propertyName: "scale",
         defaultValue: "m",
       },
+      {
+        propertyName: "widthScale",
+        defaultValue: "m",
+      },
       {
         propertyName: "placement",
         defaultValue: "bottom-start",
@@ -50,6 +55,14 @@ describe("calcite-dropdown", () => {
         propertyName: "scale",
         value: "m",
       },
+      {
+        propertyName: "widthScale",
+        value: "m",
+      },
+      {
+        propertyName: "width",
+        value: "m",
+      },
       {
         propertyName: "placement",
         value: "bottom-start",
@@ -1309,4 +1322,15 @@ describe("calcite-dropdown", () => {
       expect(await isElementFocused(page, "#item-3")).toBe(true);
     });
   });
+
+  describe("deprecate widthScale", () => {
+    it("width takes precedence over widthScale", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-dropdown ${CSS.widthScale}="l" ${CSS.width}="s"></calcite-dropdown>`);
+      const wrapper = await page.find(`calcite-dropdown >>> .${CSS.calciteDropdownWrapper}`);
+      await page.waitForChanges();
+
+      expect(wrapper.classList.contains(`${CSS.width}-s`)).toBe(true);
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.scss b/packages/calcite-components/src/components/dropdown/dropdown.scss
index e6f1a09518e..4188ae6e25c 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.scss
+++ b/packages/calcite-components/src/components/dropdown/dropdown.scss
@@ -43,17 +43,15 @@
   }
 }
 
-// width
-:host([width-scale="s"]),
-:host([width="s"]) {
+.width-s {
   --calcite-dropdown-width: theme("spacing.48");
 }
-:host([width-scale="m"]),
-:host([width="m"]) {
+
+.width-m {
   --calcite-dropdown-width: theme("spacing.56");
 }
-:host([width-scale="l"]),
-:host([width="l"]) {
+
+.width-l {
   --calcite-dropdown-width: theme("spacing.64");
 }
 
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 651378e4392..55caa7f34d7 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -47,7 +47,7 @@ import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/open
 import { RequestedItem } from "../dropdown-group/interfaces";
 import { Scale, Width } from "../interfaces";
 import { ItemKeyboardEvent } from "./interfaces";
-import { SLOTS } from "./resources";
+import { SLOTS, CSS } from "./resources";
 
 /**
  * @slot - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
@@ -172,7 +172,7 @@ export class Dropdown
    *
    * @deprecated Use the `width` property instead.
    */
-  @Prop({ reflect: true }) widthScale: Scale;
+  @Prop({ reflect: true }) widthScale: Scale = "m";
 
   /** Specifies the width of the component. */
   @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width>;
@@ -257,7 +257,11 @@ export class Dropdown
           </div>
           <div
             aria-hidden={toAriaBoolean(!open)}
-            class="calcite-dropdown-wrapper"
+            class={{
+              [`${CSS.calciteDropdownWrapper}`]: true,
+              [`${this.width ? `${CSS.width}-${this.width}` : this.widthScale ? `${CSS.width}-${this.widthScale}` : ""}`]:
+                !!this.width || !!this.widthScale,
+            }}
             ref={this.setFloatingEl}
           >
             <div
diff --git a/packages/calcite-components/src/components/dropdown/resources.ts b/packages/calcite-components/src/components/dropdown/resources.ts
index 27b82a111a3..6a499caedae 100644
--- a/packages/calcite-components/src/components/dropdown/resources.ts
+++ b/packages/calcite-components/src/components/dropdown/resources.ts
@@ -1,3 +1,9 @@
 export const SLOTS = {
   dropdownTrigger: "trigger",
 };
+
+export const CSS = {
+  calciteDropdownWrapper: "calcite-dropdown-wrapper",
+  width: "width",
+  widthScale: "width-scale",
+};

From fe85cbe32b3b93dc3eca7b6dcc08d1c78c43d800 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 20 Sep 2024 23:20:20 -0700
Subject: [PATCH 16/45] cleanup and modal tests

---
 .../src/components/dialog/dialog.e2e.ts       |  2 +-
 .../src/components/dialog/dialog.scss         |  2 --
 .../src/components/dialog/resources.ts        |  1 -
 .../src/components/dropdown/dropdown.e2e.ts   |  2 +-
 .../src/components/modal/modal.e2e.ts         | 35 ++++++++++++++++++-
 .../src/components/modal/modal.scss           |  6 ++--
 .../src/components/modal/modal.tsx            |  4 ++-
 .../src/components/modal/resources.ts         |  1 +
 8 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
index 989dff331d7..850c7a1a4e3 100644
--- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -1128,7 +1128,7 @@ describe("calcite-dialog", () => {
   describe("deprecate widthScale", () => {
     it("width takes precedence over widthScale", async () => {
       const page = await newE2EPage();
-      await page.setContent(`<calcite-dialog ${CSS.widthScale}="l" ${CSS.width}="s"></calcite-dialog>`);
+      await page.setContent(`<calcite-dialog width-scale="l" width="s"></calcite-dialog>`);
       const dialog = await page.find(`calcite-dialog >>> .${CSS.dialog}`);
       await page.waitForChanges();
 
diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 9069bc1f9dc..d6aa7807a4b 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -188,14 +188,12 @@ calcite-panel {
  */
 
 @mixin dialog-size($size, $width) {
-  .width-scale-#{$size},
   .width-#{$size} {
     inline-size: var(--calcite-dialog-size-x, $width);
     block-size: var(--calcite-dialog-size-y, auto);
   }
 
   @media screen and (max-width: $width + 2 * $baseline) {
-    .width-scale-#{$size},
     .width-#{$size} {
       .dialog {
         @apply m-0
diff --git a/packages/calcite-components/src/components/dialog/resources.ts b/packages/calcite-components/src/components/dialog/resources.ts
index d99b0aa7a36..da4c488ba5d 100644
--- a/packages/calcite-components/src/components/dialog/resources.ts
+++ b/packages/calcite-components/src/components/dialog/resources.ts
@@ -10,7 +10,6 @@ export const CSS = {
   assistiveText: "assistive-text",
   openingActive: "dialog--opening-active",
   width: "width",
-  widthScale: "width-scale",
 };
 
 export const SLOTS = {
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
index 856bdc6e30e..32c087ecd68 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -1326,7 +1326,7 @@ describe("calcite-dropdown", () => {
   describe("deprecate widthScale", () => {
     it("width takes precedence over widthScale", async () => {
       const page = await newE2EPage();
-      await page.setContent(`<calcite-dropdown ${CSS.widthScale}="l" ${CSS.width}="s"></calcite-dropdown>`);
+      await page.setContent(`<calcite-dropdown width-scale="l" width="s"></calcite-dropdown>`);
       const wrapper = await page.find(`calcite-dropdown >>> .${CSS.calciteDropdownWrapper}`);
       await page.waitForChanges();
 
diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index d1914311e15..7ca956defcb 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -1,5 +1,5 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { focusable, hidden, openClose, renders, slots, t9n } from "../../tests/commonTests";
+import { defaults, focusable, hidden, openClose, reflects, renders, slots, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { GlobalTestProps, isElementFocused, skipAnimations } from "../../tests/utils";
 import { CSS, SLOTS } from "./resources";
@@ -31,6 +31,28 @@ describe("calcite-modal", () => {
     t9n("calcite-modal");
   });
 
+  describe("reflects", () => {
+    reflects("calcite-modal", [
+      {
+        propertyName: "width-scale",
+        value: "m",
+      },
+      {
+        propertyName: "width",
+        value: "m",
+      },
+    ]);
+  });
+
+  describe("defaults", () => {
+    defaults("calcite-modal", [
+      {
+        propertyName: "widthScale",
+        defaultValue: "m",
+      },
+    ]);
+  });
+
   it("should hide closeButton when disabled", async () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-modal></calcite-modal>");
@@ -657,4 +679,15 @@ describe("calcite-modal", () => {
     closeIcon = await page.find('calcite-modal >>> calcite-icon[scale="m"]');
     expect(closeIcon).not.toBe(null);
   });
+
+  describe("deprecate widthScale", () => {
+    it("width takes precedence over widthScale", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-modal width-scale="l" width="s"></calcite-modal>`);
+      const modal = await page.find(`calcite-modal >>> .${CSS.modal}`);
+      await page.waitForChanges();
+
+      expect(modal.classList.contains(`${CSS.width}-s`)).toBe(true);
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss
index ba06803b3df..c1443aec415 100644
--- a/packages/calcite-components/src/components/modal/modal.scss
+++ b/packages/calcite-components/src/components/modal/modal.scss
@@ -271,16 +271,14 @@ slot[name="primary"] {
  * Sizes
  */
 @mixin modal-size($size, $width) {
-  :host([width-scale="#{$size}"]) .modal,
-  :host([width="#{$size}"]) .modal {
+  .width-#{$size} {
     @apply max-h-full max-w-full;
     inline-size: var(--calcite-modal-width, $width);
     block-size: var(--calcite-modal-height, auto);
   }
 
   @media screen and (max-width: $width + 2 * $baseline) {
-    :host([width-scale="#{$size}"]),
-    :host([width="#{$size}"]) {
+    .width-#{$size} {
       .modal {
         @apply m-0 h-full max-h-full w-full max-w-full;
       }
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index d1edd891fe4..6d54284df15 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -151,7 +151,7 @@ export class Modal
   @Prop({ reflect: true }) widthScale: Scale = "m";
 
   /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width> = "m";
+  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width>;
 
   /** Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */
   @Prop({ reflect: true }) fullscreen: boolean;
@@ -239,6 +239,8 @@ export class Modal
           <div
             class={{
               [CSS.modal]: true,
+              [`${this.width ? `${CSS.width}-${this.width}` : this.widthScale ? `${CSS.width}-${this.widthScale}` : ""}`]:
+                !!this.width || !!this.widthScale,
             }}
             ref={this.setTransitionEl}
           >
diff --git a/packages/calcite-components/src/components/modal/resources.ts b/packages/calcite-components/src/components/modal/resources.ts
index d9fd23662e8..dceeb3a8e83 100644
--- a/packages/calcite-components/src/components/modal/resources.ts
+++ b/packages/calcite-components/src/components/modal/resources.ts
@@ -15,6 +15,7 @@ export const CSS = {
   contentNoFooter: "content--no-footer",
   contentBottom: "content-bottom",
   contentTop: "content-top",
+  width: "width",
 
   // these classes help apply the animation in phases to only set transform on open/close
   // this helps avoid a positioning issue for any floating-ui-owning children

From 2e78022f8a344ee3a7fb6a39a221d397c6d70c6e Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 20 Sep 2024 23:47:37 -0700
Subject: [PATCH 17/45] sheet scss and test

---
 .../src/components/sheet/resources.ts         |  2 +
 .../src/components/sheet/sheet.e2e.ts         | 50 ++++++++++++++++++-
 .../src/components/sheet/sheet.scss           | 18 +++----
 .../src/components/sheet/sheet.tsx            |  8 ++-
 4 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/packages/calcite-components/src/components/sheet/resources.ts b/packages/calcite-components/src/components/sheet/resources.ts
index 25d55a3c949..0a3c442bd27 100644
--- a/packages/calcite-components/src/components/sheet/resources.ts
+++ b/packages/calcite-components/src/components/sheet/resources.ts
@@ -4,4 +4,6 @@ export const CSS = {
   containerOpen: "container--open",
   content: "content",
   containerEmbedded: "container--embedded",
+  height: "height",
+  width: "width",
 };
diff --git a/packages/calcite-components/src/components/sheet/sheet.e2e.ts b/packages/calcite-components/src/components/sheet/sheet.e2e.ts
index 94b50a9d8df..7a05c9e4e78 100644
--- a/packages/calcite-components/src/components/sheet/sheet.e2e.ts
+++ b/packages/calcite-components/src/components/sheet/sheet.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
-import { accessible, defaults, focusable, hidden, openClose, renders } from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, openClose, reflects, renders } from "../../tests/commonTests";
 import { GlobalTestProps, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils";
 import { CSS } from "./resources";
 
@@ -39,7 +39,36 @@ describe("calcite-sheet properties", () => {
         propertyName: "opened",
         defaultValue: false,
       },
+      {
+        propertyName: "widthScale",
+        defaultValue: "m",
+      },
+      {
+        propertyName: "heightScale",
+        defaultValue: "m",
+      },
     ]);
+
+    describe("reflects", () => {
+      reflects("calcite-sheet", [
+        {
+          propertyName: "height",
+          value: "m",
+        },
+        {
+          propertyName: "heightScale",
+          value: "m",
+        },
+        {
+          propertyName: "width",
+          value: "m",
+        },
+        {
+          propertyName: "widthScale",
+          value: "m",
+        },
+      ]);
+    });
   });
 
   describe("renders", () => {
@@ -555,4 +584,23 @@ describe("calcite-sheet properties", () => {
       expect(closeSpy).toHaveReceivedEventTimes(1);
     });
   });
+
+  describe("deprecate widthScale and heightScale", () => {
+    it("width takes precedence over widthScale", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-sheet width-scale="l" width="s"></calcite-dropdown>`);
+      const container = await page.find(`calcite-sheet >>> .${CSS.container}`);
+      await page.waitForChanges();
+
+      expect(container.classList.contains(`${CSS.width}-s`)).toBe(true);
+    });
+    it("height takes precedence over heightScale", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-sheet height-scale="l" height="s"></calcite-dropdown>`);
+      const container = await page.find(`calcite-sheet >>> .${CSS.container}`);
+      await page.waitForChanges();
+
+      expect(container.classList.contains(`${CSS.height}-s`)).toBe(true);
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/sheet/sheet.scss b/packages/calcite-components/src/components/sheet/sheet.scss
index de60d3277c1..da7077046a3 100644
--- a/packages/calcite-components/src/components/sheet/sheet.scss
+++ b/packages/calcite-components/src/components/sheet/sheet.scss
@@ -115,43 +115,37 @@
   min-inline-size: calc(100% - 1.5rem);
 }
 
-:host([position^="inline"][width-scale="s"]),
-:host([position^="inline"][width="s"]) {
+:host([position^="inline"]) .width-s {
   --calcite-sheet-width-internal: var(--calcite-sheet-width, 15vw);
   --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 360px);
   --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 260px);
 }
 
-:host([position^="inline"][width-scale="m"]),
-:host([position^="inline"][width="m"]) {
+:host([position^="inline"]) .width-m {
   --calcite-sheet-width-internal: var(--calcite-sheet-width, 25vw);
   --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 420px);
   --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 300px);
 }
 
-:host([position^="inline"][width-scale="l"]),
-:host([position^="inline"][width="l"]) {
+:host([position^="inline"]) .width-l {
   --calcite-sheet-width-internal: var(--calcite-sheet-width, 45vw);
   --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 680px);
   --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px);
 }
 
-:host([position^="block"][height-scale="s"]),
-:host([position^="block"][height="s"]) {
+:host([position^="block"]) .height-s {
   --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 160px);
   --calcite-sheet-height-internal: var(--calcite-sheet-height, 30vh);
   --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh);
 }
 
-:host([position^="block"][height-scale="m"]),
-:host([position^="block"][height="s"]) {
+:host([position^="block"]) .height-m {
   --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 200px);
   --calcite-sheet-height-internal: var(--calcite-sheet-height, 45vh);
   --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh);
 }
 
-:host([position^="block"][height-scale="l"]),
-:host([position^="block"][height="s"]) {
+:host([position^="block"]) .height-l {
   --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 240px);
   --calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);
   --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh);
diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
index 245a2b39c4c..5563b0674db 100644
--- a/packages/calcite-components/src/components/sheet/sheet.tsx
+++ b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -77,7 +77,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
   @Prop({ reflect: true }) heightScale: Scale = "m";
 
   /** Specifies the height of the component. */
-  @Prop({ reflect: true }) height: Height = "m";
+  @Prop({ reflect: true }) height: Height;
 
   /**
    * When `true`, prevents focus trapping.
@@ -140,7 +140,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
   @Prop({ reflect: true }) widthScale: Scale = "m";
 
   /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width> = "m";
+  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width>;
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -186,6 +186,10 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
             [CSS.containerOpen]: this.opened,
             [CSS.containerEmbedded]: this.embedded,
             [CSS_UTILITY.rtl]: dir === "rtl",
+            [`${this.width ? `${CSS.width}-${this.width}` : this.widthScale ? `${CSS.width}-${this.widthScale}` : ""}`]:
+              !!this.width || !!this.widthScale,
+            [`${this.height ? `${CSS.height}-${this.height}` : this.heightScale ? `${CSS.height}-${this.heightScale}` : ""}`]:
+              !!this.height || !!this.heightScale,
           }}
           ref={this.setTransitionEl}
         >

From 371babb04428c1cffa9d62933b304ef73f874474 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Sat, 21 Sep 2024 07:40:48 -0700
Subject: [PATCH 18/45] shell-panel prop precedence and tests

---
 .../src/components/shell-panel/resources.ts   |  6 ++-
 .../components/shell-panel/shell-panel.e2e.ts | 38 ++++++++++++++++++-
 .../components/shell-panel/shell-panel.scss   | 23 ++++-------
 .../components/shell-panel/shell-panel.tsx    | 10 +++--
 4 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/packages/calcite-components/src/components/shell-panel/resources.ts b/packages/calcite-components/src/components/shell-panel/resources.ts
index 7f437f725b9..978c618f967 100644
--- a/packages/calcite-components/src/components/shell-panel/resources.ts
+++ b/packages/calcite-components/src/components/shell-panel/resources.ts
@@ -3,11 +3,13 @@ export const CSS = {
   content: "content",
   contentHeader: "content__header",
   contentBody: "content__body",
-  floatContent: "float--content",
   contentOverlay: "content--overlay",
-  separator: "separator",
   float: "float",
   floatAll: "float-all",
+  floatContent: "float--content",
+  height: "height",
+  separator: "separator",
+  width: "width",
 };
 
 export const SLOTS = {
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
index 2df4cb585e2..eb2f9d4b83d 100644
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
@@ -1,5 +1,5 @@
 import { E2EElement, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders, slots, t9n } from "../../tests/commonTests";
+import { accessible, defaults, hidden, reflects, renders, slots, t9n } from "../../tests/commonTests";
 import { getElementXY } from "../../tests/utils";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS, SLOTS } from "./resources";
@@ -31,6 +31,23 @@ describe("calcite-shell-panel", () => {
         propertyName: "displayMode",
         defaultValue: "dock",
       },
+      {
+        propertyName: "widthScale",
+        defaultValue: "m",
+      },
+    ]);
+  });
+
+  describe("reflects", () => {
+    reflects("calcite-shell-panel", [
+      {
+        propertyName: "widthScale",
+        value: "m",
+      },
+      {
+        propertyName: "width",
+        value: "m",
+      },
     ]);
   });
 
@@ -571,4 +588,23 @@ describe("calcite-shell-panel", () => {
   describe("translation support", () => {
     t9n("calcite-shell-panel");
   });
+
+  describe("deprecate widthScale and heightScale", () => {
+    it("width takes precedence over widthScale", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-shell-panel width-scale="l" width="s"></calcite-shell-panel>`);
+      const content = await page.find(`calcite-shell-panel >>> .${CSS.content}`);
+      await page.waitForChanges();
+
+      expect(content.classList.contains(`${CSS.width}-s`)).toBe(true);
+    });
+    it("height takes precedence over heightScale", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-shell-panel height-scale="l" height="s"></calcite-shell-panel>`);
+      const content = await page.find(`calcite-shell-panel >>> .${CSS.content}`);
+      await page.waitForChanges();
+
+      expect(content.classList.contains(`${CSS.height}-s`)).toBe(true);
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.scss b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
index 2c9688d22a5..0f2b98c0dcd 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
@@ -52,47 +52,41 @@
   flex: 2;
 }
 
-:host([layout="vertical"][width-scale="s"]:not([display-mode="float-all"])) .content,
-:host([layout="vertical"][width="s"]:not([display-mode="float-all"])) .content {
+:host([layout="vertical"]:not([display-mode="float-all"])) .width-s {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);
   --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 300px);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px);
 }
 
-:host([layout="vertical"][width-scale="s"][display-mode="float-all"]) .content,
-:host([layout="vertical"][width="s"][display-mode="float-all"]) .content {
+:host([layout="vertical"][display-mode="float-all"]) .width-s {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px);
 }
 
-:host([layout="vertical"][width-scale="m"]:not([display-mode="float-all"])) .content,
+:host([layout="vertical"]:not([display-mode="float-all"])) .width-m,
 :host([layout="vertical"][width="m"]:not([display-mode="float-all"])) .content {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);
   --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 420px);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px);
 }
 
-:host([layout="vertical"][width-scale="m"][display-mode="float-all"]) .content,
-:host([layout="vertical"][width="m"][display-mode="float-all"]) .content {
+:host([layout="vertical"][display-mode="float-all"]) .width-m {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px);
 }
 
-:host([layout="vertical"][width-scale="l"]:not([display-mode="float-all"])) .content,
-:host([layout="vertical"][width="l"]:not([display-mode="float-all"])) .content {
+:host([layout="vertical"]:not([display-mode="float-all"])) .width-l {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);
   --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 680px);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px);
 }
 
-:host([layout="vertical"][width-scale="l"][display-mode="float-all"]) .content,
-:host([layout="vertical"][width="l"][display-mode="float-all"]) .content {
+:host([layout="vertical"][display-mode="float-all"]) .width-l {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px);
 }
 
-:host([layout="horizontal"][height-scale="s"]) .content,
-:host([layout="horizontal"][height="s"]) .content {
+:host([layout="horizontal"]) .height-s {
   --calcite-internal-shell-panel-max-height: var(
     --calcite-shell-panel-max-height,
     var(--calcite-shell-panel-detached-max-height, 20vh)
@@ -107,8 +101,7 @@
   );
 }
 
-:host([layout="horizontal"][height-scale="l"]) .content,
-:host([layout="horizontal"][height="l"]) .content {
+:host([layout="horizontal"]) .height-l {
   --calcite-internal-shell-panel-max-height: var(
     --calcite-shell-panel-max-height,
     var(--calcite-shell-panel-detached-max-height, 40vh)
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index 23e39ac62f2..25bedc4b9ce 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -111,7 +111,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
    *
    * @deprecated Use the `height` property instead.
    */
-  @Prop({ reflect: true }) heightScale: Scale;
+  @Prop({ reflect: true }) heightScale: Scale = "m";
 
   @Watch("heightScale")
   handleHeightScale(value: Scale): void {
@@ -119,7 +119,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
   }
 
   /** Specifies the height of the component. */
-  @Prop({ reflect: true }) height: Height = "m";
+  @Prop({ reflect: true }) height: Height;
 
   /**
    * When `layout` is `vertical`, specifies the width of the component.
@@ -129,7 +129,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
   @Prop({ reflect: true }) widthScale: Scale = "m";
 
   /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width> = "m";
+  @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width>;
 
   /**
    *  The direction of the component.
@@ -348,6 +348,10 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
           [CSS.floatContent]: displayMode === "float-content" || displayMode === "float",
           [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
           [getAnimationDir()]: displayMode === "overlay",
+          [`${this.width ? `${CSS.width}-${this.width}` : this.widthScale ? `${CSS.width}-${this.widthScale}` : ""}`]:
+            !!this.width || !!this.widthScale,
+          [`${this.height ? `${CSS.height}-${this.height}` : this.heightScale ? `${CSS.height}-${this.heightScale}` : ""}`]:
+            !!this.height || !!this.heightScale,
         }}
         hidden={collapsed}
         key="content"

From 7296c37d129f925e37874fc7103fe7dcac60b1c0 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Sat, 21 Sep 2024 08:08:09 -0700
Subject: [PATCH 19/45] modify test to get the className

---
 .../src/components/shell-panel/shell-panel.e2e.ts               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
index eb2f9d4b83d..614a214557c 100644
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
@@ -135,7 +135,7 @@ describe("calcite-shell-panel", () => {
       "calcite-shell-panel",
       (panel: HTMLCalciteShellPanelElement, containerClass: string, contentClass: string) => {
         const container = panel.shadowRoot.querySelector(containerClass);
-        return container.firstElementChild.className == contentClass;
+        return container.firstElementChild.className.split(" ")[0] == contentClass;
       },
       `.${CSS.container}`,
       CSS.content,

From d9e514641211d54fb9749db338fbfdf017ceaaff Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 24 Sep 2024 22:31:32 -0700
Subject: [PATCH 20/45] extract dynamicCSSConst util

---
 .../calcite-components/src/components/dialog/dialog.tsx    | 4 ++--
 .../src/components/dropdown/dropdown.tsx                   | 4 ++--
 packages/calcite-components/src/components/modal/modal.tsx | 4 ++--
 packages/calcite-components/src/components/sheet/sheet.tsx | 7 +++----
 .../src/components/shell-center-row/shell-center-row.tsx   | 4 ++--
 .../src/components/shell-panel/shell-panel.tsx             | 7 +++----
 packages/calcite-components/src/utils/dynamicCSSConst.ts   | 7 +++++++
 7 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 packages/calcite-components/src/utils/dynamicCSSConst.ts

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 4da722c13e3..d3efd9e5b1e 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -30,6 +30,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
+import { getWidth } from "../../utils/dynamicCSSConst";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
@@ -273,8 +274,7 @@ export class Dialog
             aria-modal={toAriaBoolean(this.modal)}
             class={{
               [CSS.dialog]: true,
-              [`${this.width ? `${CSS.width}-${this.width}` : this.widthScale ? `${CSS.width}-${this.widthScale}` : ""}`]:
-                !!this.width || !!this.widthScale,
+              [getWidth(this.width, this.widthScale)]: !!this.width || !!this.widthScale,
             }}
             onKeyDown={this.handleKeyDown}
             ref={this.setTransitionEl}
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 55caa7f34d7..4193d81db12 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -44,6 +44,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
+import { getWidth } from "../../utils/dynamicCSSConst";
 import { RequestedItem } from "../dropdown-group/interfaces";
 import { Scale, Width } from "../interfaces";
 import { ItemKeyboardEvent } from "./interfaces";
@@ -259,8 +260,7 @@ export class Dropdown
             aria-hidden={toAriaBoolean(!open)}
             class={{
               [`${CSS.calciteDropdownWrapper}`]: true,
-              [`${this.width ? `${CSS.width}-${this.width}` : this.widthScale ? `${CSS.width}-${this.widthScale}` : ""}`]:
-                !!this.width || !!this.widthScale,
+              [getWidth(this.width, this.widthScale)]: !!this.width || !!this.widthScale,
             }}
             ref={this.setFloatingEl}
           >
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index 6d54284df15..9689c81e09a 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -39,6 +39,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
+import { getWidth } from "../../utils/dynamicCSSConst";
 import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
@@ -239,8 +240,7 @@ export class Modal
           <div
             class={{
               [CSS.modal]: true,
-              [`${this.width ? `${CSS.width}-${this.width}` : this.widthScale ? `${CSS.width}-${this.widthScale}` : ""}`]:
-                !!this.width || !!this.widthScale,
+              [getWidth(this.width, this.widthScale)]: !!this.width || !!this.widthScale,
             }}
             ref={this.setTransitionEl}
           >
diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
index 5563b0674db..9b61fed76a4 100644
--- a/packages/calcite-components/src/components/sheet/sheet.tsx
+++ b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -28,6 +28,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
+import { getHeight, getWidth } from "../../utils/dynamicCSSConst";
 import { Height, LogicalFlowPosition, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS } from "./resources";
@@ -186,10 +187,8 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
             [CSS.containerOpen]: this.opened,
             [CSS.containerEmbedded]: this.embedded,
             [CSS_UTILITY.rtl]: dir === "rtl",
-            [`${this.width ? `${CSS.width}-${this.width}` : this.widthScale ? `${CSS.width}-${this.widthScale}` : ""}`]:
-              !!this.width || !!this.widthScale,
-            [`${this.height ? `${CSS.height}-${this.height}` : this.heightScale ? `${CSS.height}-${this.heightScale}` : ""}`]:
-              !!this.height || !!this.heightScale,
+            [getWidth(this.width, this.widthScale)]: !!this.width || !!this.widthScale,
+            [getHeight(this.height, this.heightScale)]: !!this.height || !!this.heightScale,
           }}
           ref={this.setTransitionEl}
         >
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index 587dfa43461..045b2c852fd 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Fragment, h, Prop, VNode } from "@stencil/core";
+import { Component, Element, h, Prop, VNode } from "@stencil/core";
 import {
   ConditionalSlotComponent,
   connectConditionalSlotComponent,
@@ -95,6 +95,6 @@ export class ShellCenterRow implements ConditionalSlotComponent {
       children.reverse();
     }
 
-    return <Fragment>{children}</Fragment>;
+    return <div>{children}</div>;
   }
 }
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index 25bedc4b9ce..b2c331a24d8 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -23,6 +23,7 @@ import {
 } from "../../utils/dom";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import { clamp } from "../../utils/math";
+import { getHeight, getWidth } from "../../utils/dynamicCSSConst";
 import {
   connectMessages,
   disconnectMessages,
@@ -348,10 +349,8 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
           [CSS.floatContent]: displayMode === "float-content" || displayMode === "float",
           [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
           [getAnimationDir()]: displayMode === "overlay",
-          [`${this.width ? `${CSS.width}-${this.width}` : this.widthScale ? `${CSS.width}-${this.widthScale}` : ""}`]:
-            !!this.width || !!this.widthScale,
-          [`${this.height ? `${CSS.height}-${this.height}` : this.heightScale ? `${CSS.height}-${this.heightScale}` : ""}`]:
-            !!this.height || !!this.heightScale,
+          [getWidth(this.width, this.widthScale)]: !!this.width || !!this.widthScale,
+          [getHeight(this.height, this.heightScale)]: !!this.height || !!this.heightScale,
         }}
         hidden={collapsed}
         key="content"
diff --git a/packages/calcite-components/src/utils/dynamicCSSConst.ts b/packages/calcite-components/src/utils/dynamicCSSConst.ts
new file mode 100644
index 00000000000..47b897063f6
--- /dev/null
+++ b/packages/calcite-components/src/utils/dynamicCSSConst.ts
@@ -0,0 +1,7 @@
+export const getWidth = (width: string, widthScale: string): string => {
+  return width ? `width-${width}` : widthScale ? `width-${widthScale}` : "";
+};
+
+export const getHeight = (height: string, heightScale: string): string => {
+  return height ? `height-${height}` : heightScale ? `width-${heightScale}` : "";
+};

From 472d15e7bc762a4ef3c878c3ae58b0456a6a15e5 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 24 Sep 2024 22:33:17 -0700
Subject: [PATCH 21/45] typo

---
 packages/calcite-components/src/utils/dynamicCSSConst.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/utils/dynamicCSSConst.ts b/packages/calcite-components/src/utils/dynamicCSSConst.ts
index 47b897063f6..fa4df95b10f 100644
--- a/packages/calcite-components/src/utils/dynamicCSSConst.ts
+++ b/packages/calcite-components/src/utils/dynamicCSSConst.ts
@@ -3,5 +3,5 @@ export const getWidth = (width: string, widthScale: string): string => {
 };
 
 export const getHeight = (height: string, heightScale: string): string => {
-  return height ? `height-${height}` : heightScale ? `width-${heightScale}` : "";
+  return height ? `height-${height}` : heightScale ? `height-${heightScale}` : "";
 };

From c82417fcdf60acf5a860236e31e46b0f7ff9c9b0 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 8 Oct 2024 14:15:20 -0700
Subject: [PATCH 22/45] apply container and height to shell-center-row

---
 .../components/shell-center-row/resources.ts   |  1 +
 .../shell-center-row/shell-center-row.scss     | 11 ++++-------
 .../shell-center-row/shell-center-row.tsx      | 18 ++++++++++++++++--
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/shell-center-row/resources.ts b/packages/calcite-components/src/components/shell-center-row/resources.ts
index f19efa7ad55..ecc4bf6db61 100644
--- a/packages/calcite-components/src/components/shell-center-row/resources.ts
+++ b/packages/calcite-components/src/components/shell-center-row/resources.ts
@@ -1,5 +1,6 @@
 export const CSS = {
   actionBarContainer: "action-bar-container",
+  container: "container",
   content: "content",
 };
 
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
index ee43d6ab7c6..4b9a9191dc5 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
@@ -1,4 +1,4 @@
-:host {
+.container {
   @extend %component-host;
   @apply flex
     flex-auto
@@ -36,18 +36,15 @@
   @apply self-start;
 }
 
-:host([height-scale="s"]),
-:host([height="s"]) {
+:host .height-s {
   block-size: theme("width[1/3]");
 }
 
-:host([height-scale="m"]),
-:host([height="m"]) {
+:host .height-m {
   block-size: 70%;
 }
 
-:host([height-scale="l"]),
-:host([height="l"]) {
+:host .height-l {
   @apply h-full;
 }
 
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index 816014ce7f8..6d2a52c7fc5 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -1,6 +1,7 @@
 import { Component, Element, h, Prop, State, VNode } from "@stencil/core";
 import { slotChangeGetAssignedElements } from "../../utils/dom";
 import { Height, Position, Scale } from "../interfaces";
+import { getHeight } from "../../utils/dynamicCSSConst";
 import { CSS, SLOTS } from "./resources";
 
 /**
@@ -59,7 +60,12 @@ export class ShellCenterRow {
     const { actionBar } = this;
 
     const contentNode = (
-      <div class={CSS.content}>
+      <div
+        class={{
+          [CSS.content]: true,
+          [getHeight(this.height, this.heightScale)]: !!this.height || !!this.heightScale,
+        }}
+      >
         <slot />
       </div>
     );
@@ -76,7 +82,15 @@ export class ShellCenterRow {
       children.reverse();
     }
 
-    return <div>{children}</div>;
+    return (
+      <div
+        class={{
+          [CSS.container]: true,
+        }}
+      >
+        {children}
+      </div>
+    );
   }
 
   private handleActionBarSlotChange = (event: Event): void => {

From 0c83c5b6ce3d5d0c243de7f79616309f8b82f48a Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 8 Oct 2024 14:26:44 -0700
Subject: [PATCH 23/45] detached height

---
 .../src/components/shell-center-row/shell-center-row.scss      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
index 4b9a9191dc5..aa4ba77ac50 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
@@ -48,8 +48,7 @@
   @apply h-full;
 }
 
-:host([height-scale="l"][detached]),
-:host([height="l"][detached]) {
+:host([detached]) .height-l {
   block-size: calc(theme("height.full") - theme("spacing.8"));
 }
 

From 697cb8960cf9aea767c57825b1fe6d0aa0614c03 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 8 Oct 2024 14:43:44 -0700
Subject: [PATCH 24/45] cleanup

---
 .../src/components/shell-center-row/shell-center-row.scss | 6 +++++-
 .../src/components/shell-center-row/shell-center-row.tsx  | 8 ++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
index aa4ba77ac50..ab9ae2f0c19 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
@@ -1,4 +1,4 @@
-.container {
+:host {
   @extend %component-host;
   @apply flex
     flex-auto
@@ -7,6 +7,10 @@
     z-default;
 }
 
+.container {
+  @apply flex;
+}
+
 .content {
   @apply m-0
     flex
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index 6d2a52c7fc5..3db069bc2e4 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -60,12 +60,7 @@ export class ShellCenterRow {
     const { actionBar } = this;
 
     const contentNode = (
-      <div
-        class={{
-          [CSS.content]: true,
-          [getHeight(this.height, this.heightScale)]: !!this.height || !!this.heightScale,
-        }}
-      >
+      <div class={CSS.content}>
         <slot />
       </div>
     );
@@ -86,6 +81,7 @@ export class ShellCenterRow {
       <div
         class={{
           [CSS.container]: true,
+          [getHeight(this.height, this.heightScale)]: !!this.height || !!this.heightScale,
         }}
       >
         {children}

From 7f22fdaf281c30999c2513796409353e3759eb08 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 8 Oct 2024 18:32:00 -0700
Subject: [PATCH 25/45] adjust tests to account for added container div instead
 of fragment

---
 .../src/components/shell-center-row/shell-center-row.e2e.ts | 6 +++---
 .../src/components/shell-center-row/shell-center-row.scss   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts b/packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts
index 5b6beef2233..0ef5c0eb160 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts
@@ -55,7 +55,7 @@ describe("calcite-shell-center-row", () => {
     `;
     await page.setContent(pageContent);
 
-    const element = await page.find("calcite-shell-center-row >>> div:first-of-type");
+    const element = await page.find(`calcite-shell-center-row >>> .${CSS.container} div:first-of-type`);
 
     await page.waitForChanges();
     expect(element).toHaveClass(CSS.actionBarContainer);
@@ -79,10 +79,10 @@ describe("calcite-shell-center-row", () => {
     await page.setContent(pageContent);
 
     const element = await page.find("calcite-shell-center-row");
-
+    const containerEl = element.shadowRoot.querySelector(`.${CSS.container}`);
     await page.waitForChanges();
 
-    expect(element.shadowRoot.lastElementChild).toHaveClass(CSS.actionBarContainer);
+    expect(containerEl.lastElementChild).toHaveClass(CSS.actionBarContainer);
   });
 
   describe("accessible", () => {
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
index ab9ae2f0c19..6cd891d73b0 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
@@ -8,7 +8,7 @@
 }
 
 .container {
-  @apply flex;
+  @apply flex flex-auto;
 }
 
 .content {

From f7016a7dd27dae817ac9b868f24d746d7f16bf47 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 11 Oct 2024 12:43:55 -0700
Subject: [PATCH 26/45] adjust test to the new changes

---
 .../calcite-components/src/components/dialog/dialog.e2e.ts    | 4 ++--
 packages/calcite-components/src/components/dialog/dialog.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
index d157d6f3a9f..52da33d7867 100644
--- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -357,8 +357,8 @@ describe("calcite-dialog", () => {
 
     const internalDialog = await page.find(`calcite-dialog >>> .${CSS.dialog}`);
     const style = await internalDialog.getComputedStyle();
-    expect(style.width).toEqual("800px");
-    expect(style.height).toEqual("800px");
+    expect(style.width).toEqual("752px");
+    expect(style.height).toEqual("752px");
   });
 
   it("escapeDisabled", async () => {
diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 6d2a01cf357..ca20323c328 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -215,7 +215,7 @@ calcite-panel {
   }
 }
 
-:host .width-s .dialog {
+.width-s .dialog {
   @apply w-auto;
 }
 

From 64522f29bb25c0abe99ef59d63df04d4df480d70 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 11 Oct 2024 16:04:17 -0700
Subject: [PATCH 27/45] remove deprecation e2e test, adjust expected pixel
 values for style width and height

---
 .../src/components/dialog/dialog.e2e.ts             | 13 +------------
 .../src/components/dropdown/dropdown.e2e.ts         |  2 +-
 .../src/components/modal/modal.e2e.ts               | 11 -----------
 3 files changed, 2 insertions(+), 24 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
index 52da33d7867..3506cd15c2c 100644
--- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -358,7 +358,7 @@ describe("calcite-dialog", () => {
     const internalDialog = await page.find(`calcite-dialog >>> .${CSS.dialog}`);
     const style = await internalDialog.getComputedStyle();
     expect(style.width).toEqual("752px");
-    expect(style.height).toEqual("752px");
+    expect(style.height).toEqual("800px");
   });
 
   it("escapeDisabled", async () => {
@@ -1154,15 +1154,4 @@ describe("calcite-dialog", () => {
       expect(await dialog.getProperty("open")).toBe(true);
     });
   });
-
-  describe("deprecate widthScale", () => {
-    it("width takes precedence over widthScale", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-dialog width-scale="l" width="s"></calcite-dialog>`);
-      const dialog = await page.find(`calcite-dialog >>> .${CSS.dialog}`);
-      await page.waitForChanges();
-
-      expect(dialog.classList.contains(`${CSS.width}-s`)).toBe(true);
-    });
-  });
 });
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
index dfdfa19254c..a5a537f3ac8 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -1188,7 +1188,7 @@ describe("calcite-dropdown", () => {
       filterInput.value = "numbers";
     });
 
-    expect(dropdownContentHeight.height).toBe("88px");
+    expect(dropdownContentHeight.height).toBe("72px");
   });
 
   describe("owns a floating-ui", () => {
diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index 1e503aeaa2f..9f437e39b8b 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -684,15 +684,4 @@ describe("calcite-modal", () => {
     closeIcon = await page.find('calcite-modal >>> calcite-icon[scale="m"]');
     expect(closeIcon).not.toBe(null);
   });
-
-  describe("deprecate widthScale", () => {
-    it("width takes precedence over widthScale", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-modal width-scale="l" width="s"></calcite-modal>`);
-      const modal = await page.find(`calcite-modal >>> .${CSS.modal}`);
-      await page.waitForChanges();
-
-      expect(modal.classList.contains(`${CSS.width}-s`)).toBe(true);
-    });
-  });
 });

From 938e2d7fcb56f316650b72caa3dc6d6206de1983 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 11 Oct 2024 16:29:34 -0700
Subject: [PATCH 28/45] remove deprecation tests

---
 .../src/components/dropdown/dropdown.e2e.ts   | 12 ------------
 .../components/shell-panel/shell-panel.e2e.ts | 19 -------------------
 2 files changed, 31 deletions(-)

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
index a5a537f3ac8..b2980626693 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -18,7 +18,6 @@ import {
   isElementFocused,
   skipAnimations,
 } from "../../tests/utils";
-import { CSS } from "./resources";
 
 describe("calcite-dropdown", () => {
   const simpleDropdownHTML = html`
@@ -1450,15 +1449,4 @@ describe("calcite-dropdown", () => {
       expect(await isElementFocused(page, "#item-2")).toBe(true);
     });
   });
-
-  describe("deprecate widthScale", () => {
-    it("width takes precedence over widthScale", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-dropdown width-scale="l" width="s"></calcite-dropdown>`);
-      const wrapper = await page.find(`calcite-dropdown >>> .${CSS.calciteDropdownWrapper}`);
-      await page.waitForChanges();
-
-      expect(wrapper.classList.contains(`${CSS.width}-s`)).toBe(true);
-    });
-  });
 });
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
index 614a214557c..046e15b10f5 100644
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
@@ -588,23 +588,4 @@ describe("calcite-shell-panel", () => {
   describe("translation support", () => {
     t9n("calcite-shell-panel");
   });
-
-  describe("deprecate widthScale and heightScale", () => {
-    it("width takes precedence over widthScale", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-shell-panel width-scale="l" width="s"></calcite-shell-panel>`);
-      const content = await page.find(`calcite-shell-panel >>> .${CSS.content}`);
-      await page.waitForChanges();
-
-      expect(content.classList.contains(`${CSS.width}-s`)).toBe(true);
-    });
-    it("height takes precedence over heightScale", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-shell-panel height-scale="l" height="s"></calcite-shell-panel>`);
-      const content = await page.find(`calcite-shell-panel >>> .${CSS.content}`);
-      await page.waitForChanges();
-
-      expect(content.classList.contains(`${CSS.height}-s`)).toBe(true);
-    });
-  });
 });

From 04f4c4af5ae636ff51dbb0f879ece229a33c05df Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 11 Oct 2024 16:33:02 -0700
Subject: [PATCH 29/45] remove deprecation tests

---
 .../src/components/sheet/sheet.e2e.ts         | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/packages/calcite-components/src/components/sheet/sheet.e2e.ts b/packages/calcite-components/src/components/sheet/sheet.e2e.ts
index ccac42b31ce..d84396d8adf 100644
--- a/packages/calcite-components/src/components/sheet/sheet.e2e.ts
+++ b/packages/calcite-components/src/components/sheet/sheet.e2e.ts
@@ -581,23 +581,4 @@ describe("calcite-sheet properties", () => {
       expect(closeSpy).toHaveReceivedEventTimes(1);
     });
   });
-
-  describe("deprecate widthScale and heightScale", () => {
-    it("width takes precedence over widthScale", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-sheet width-scale="l" width="s"></calcite-dropdown>`);
-      const container = await page.find(`calcite-sheet >>> .${CSS.container}`);
-      await page.waitForChanges();
-
-      expect(container.classList.contains(`${CSS.width}-s`)).toBe(true);
-    });
-    it("height takes precedence over heightScale", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-sheet height-scale="l" height="s"></calcite-dropdown>`);
-      const container = await page.find(`calcite-sheet >>> .${CSS.container}`);
-      await page.waitForChanges();
-
-      expect(container.classList.contains(`${CSS.height}-s`)).toBe(true);
-    });
-  });
 });

From b8efa8b6a35e213e8a379e4d882294c4b78b3537 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 31 Oct 2024 10:06:22 -0700
Subject: [PATCH 30/45] cleanup

---
 .../calcite-components/src/components/dialog/dialog.tsx    | 4 ++--
 .../src/components/dropdown/dropdown.tsx                   | 6 +++---
 .../src/components/dropdown/resources.ts                   | 2 +-
 packages/calcite-components/src/components/modal/modal.tsx | 4 ++--
 packages/calcite-components/src/components/sheet/sheet.tsx | 4 ++--
 .../src/components/shell-center-row/shell-center-row.scss  | 6 +++---
 .../src/components/shell-center-row/shell-center-row.tsx   | 2 +-
 .../src/components/shell-panel/shell-panel.tsx             | 4 ++--
 packages/calcite-components/src/utils/dynamicClasses.ts    | 7 +++++++
 9 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 packages/calcite-components/src/utils/dynamicClasses.ts

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 2e823d11610..99f37dea472 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -29,7 +29,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
-import { getWidth } from "../../utils/dynamicCSSConst";
+import { getWidth } from "../../utils/dynamicClasses";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
@@ -279,7 +279,7 @@ export class Dialog
             aria-modal={toAriaBoolean(this.modal)}
             class={{
               [CSS.dialog]: true,
-              [getWidth(this.width, this.widthScale)]: !!this.width || !!this.widthScale,
+              [getWidth(this.width, this.widthScale)]: !!(this.width || this.widthScale),
             }}
             onKeyDown={this.handleKeyDown}
             ref={this.setTransitionEl}
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 68b06daf556..8fc29169fd2 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -44,7 +44,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getWidth } from "../../utils/dynamicCSSConst";
+import { getWidth } from "../../utils/dynamicClasses";
 import { RequestedItem } from "../dropdown-group/interfaces";
 import { Scale, Width } from "../interfaces";
 import { ItemKeyboardEvent } from "./interfaces";
@@ -259,8 +259,8 @@ export class Dropdown
           <div
             aria-hidden={toAriaBoolean(!open)}
             class={{
-              [`${CSS.calciteDropdownWrapper}`]: true,
-              [getWidth(this.width, this.widthScale)]: !!this.width || !!this.widthScale,
+              [CSS.wrapper]: true,
+              [getWidth(this.width, this.widthScale)]: !!(this.width || this.widthScale),
             }}
             ref={this.setFloatingEl}
           >
diff --git a/packages/calcite-components/src/components/dropdown/resources.ts b/packages/calcite-components/src/components/dropdown/resources.ts
index 6a499caedae..bea9fdb782e 100644
--- a/packages/calcite-components/src/components/dropdown/resources.ts
+++ b/packages/calcite-components/src/components/dropdown/resources.ts
@@ -3,7 +3,7 @@ export const SLOTS = {
 };
 
 export const CSS = {
-  calciteDropdownWrapper: "calcite-dropdown-wrapper",
+  wrapper: "calcite-dropdown-wrapper",
   width: "width",
   widthScale: "width-scale",
 };
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index 95b03f7a111..d37ce2f4433 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -33,7 +33,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getWidth } from "../../utils/dynamicCSSConst";
+import { getWidth } from "../../utils/dynamicClasses";
 import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
@@ -237,7 +237,7 @@ export class Modal
           <div
             class={{
               [CSS.modal]: true,
-              [getWidth(this.width, this.widthScale)]: !!this.width || !!this.widthScale,
+              [getWidth(this.width, this.widthScale)]: !!(this.width || this.widthScale),
             }}
             ref={this.setTransitionEl}
           >
diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
index e632cc42736..e9f24880d3d 100644
--- a/packages/calcite-components/src/components/sheet/sheet.tsx
+++ b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -27,7 +27,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getHeight, getWidth } from "../../utils/dynamicCSSConst";
+import { getHeight, getWidth } from "../../utils/dynamicClasses";
 import { Height, LogicalFlowPosition, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS } from "./resources";
@@ -194,7 +194,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
             [CSS.containerEmbedded]: this.embedded,
             [CSS_UTILITY.rtl]: dir === "rtl",
             [getWidth(this.width, this.widthScale)]: !!this.width || !!this.widthScale,
-            [getHeight(this.height, this.heightScale)]: !!this.height || !!this.heightScale,
+            [getHeight(this.height, this.heightScale)]: !!(this.width || this.widthScale),
           }}
           ref={this.setTransitionEl}
         >
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
index 6cd891d73b0..59f55ce2113 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
@@ -40,15 +40,15 @@
   @apply self-start;
 }
 
-:host .height-s {
+.height-s {
   block-size: theme("width[1/3]");
 }
 
-:host .height-m {
+.height-m {
   block-size: 70%;
 }
 
-:host .height-l {
+.height-l {
   @apply h-full;
 }
 
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index be116396ce1..7e3d8ff07a4 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, h, Prop, State, VNode } from "@stencil/core";
 import { slotChangeGetAssignedElements } from "../../utils/dom";
 import { Height, Position, Scale } from "../interfaces";
-import { getHeight } from "../../utils/dynamicCSSConst";
+import { getHeight } from "../../utils/dynamicClasses";
 import { logger } from "../../utils/logger";
 import { CSS, SLOTS } from "./resources";
 
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index 8c686a02d83..c8a2f120154 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -18,7 +18,7 @@ import {
 } from "../../utils/dom";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import { clamp } from "../../utils/math";
-import { getHeight, getWidth } from "../../utils/dynamicCSSConst";
+import { getHeight, getWidth } from "../../utils/dynamicClasses";
 import {
   connectMessages,
   disconnectMessages,
@@ -343,7 +343,7 @@ export class ShellPanel implements LocalizedComponent, T9nComponent {
           [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
           [getAnimationDir()]: displayMode === "overlay",
           [getWidth(this.width, this.widthScale)]: !!this.width || !!this.widthScale,
-          [getHeight(this.height, this.heightScale)]: !!this.height || !!this.heightScale,
+          [getHeight(this.height, this.heightScale)]: !!(this.width || this.widthScale),
         }}
         hidden={collapsed}
         key="content"
diff --git a/packages/calcite-components/src/utils/dynamicClasses.ts b/packages/calcite-components/src/utils/dynamicClasses.ts
new file mode 100644
index 00000000000..fa4df95b10f
--- /dev/null
+++ b/packages/calcite-components/src/utils/dynamicClasses.ts
@@ -0,0 +1,7 @@
+export const getWidth = (width: string, widthScale: string): string => {
+  return width ? `width-${width}` : widthScale ? `width-${widthScale}` : "";
+};
+
+export const getHeight = (height: string, heightScale: string): string => {
+  return height ? `height-${height}` : heightScale ? `height-${heightScale}` : "";
+};

From 4321c43e31e2111403ee7f5046102c116c6805d8 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 31 Oct 2024 12:48:08 -0700
Subject: [PATCH 31/45] consolidate dynamicClasses const getHeight and getWidth
 inot getDimension

---
 .../src/components/dialog/dialog.tsx                   |  6 ++++--
 .../src/components/dropdown/dropdown.tsx               |  6 ++++--
 .../calcite-components/src/components/modal/modal.scss |  3 +--
 .../calcite-components/src/components/modal/modal.tsx  |  6 ++++--
 .../calcite-components/src/components/sheet/sheet.tsx  |  8 +++++---
 .../components/shell-center-row/shell-center-row.tsx   |  6 ++++--
 .../src/components/shell-panel/shell-panel.e2e.ts      |  2 +-
 .../src/components/shell-panel/shell-panel.tsx         |  8 +++++---
 .../calcite-components/src/utils/dynamicCSSConst.ts    |  7 -------
 .../calcite-components/src/utils/dynamicClasses.ts     | 10 ++++------
 10 files changed, 32 insertions(+), 30 deletions(-)
 delete mode 100644 packages/calcite-components/src/utils/dynamicCSSConst.ts

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 99f37dea472..f41fdbd0041 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -29,7 +29,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
-import { getWidth } from "../../utils/dynamicClasses";
+import { getDimension } from "../../utils/dynamicClasses";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
@@ -279,7 +279,9 @@ export class Dialog
             aria-modal={toAriaBoolean(this.modal)}
             class={{
               [CSS.dialog]: true,
-              [getWidth(this.width, this.widthScale)]: !!(this.width || this.widthScale),
+              [getDimension("width", this.width, this.widthScale)]: !!(
+                this.width || this.widthScale
+              ),
             }}
             onKeyDown={this.handleKeyDown}
             ref={this.setTransitionEl}
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 8fc29169fd2..3cf1f178afb 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -44,7 +44,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getWidth } from "../../utils/dynamicClasses";
+import { getDimension } from "../../utils/dynamicClasses";
 import { RequestedItem } from "../dropdown-group/interfaces";
 import { Scale, Width } from "../interfaces";
 import { ItemKeyboardEvent } from "./interfaces";
@@ -260,7 +260,9 @@ export class Dropdown
             aria-hidden={toAriaBoolean(!open)}
             class={{
               [CSS.wrapper]: true,
-              [getWidth(this.width, this.widthScale)]: !!(this.width || this.widthScale),
+              [getDimension("width", this.width, this.widthScale)]: !!(
+                this.width || this.widthScale
+              ),
             }}
             ref={this.setFloatingEl}
           >
diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss
index c1443aec415..302e94bc5e5 100644
--- a/packages/calcite-components/src/components/modal/modal.scss
+++ b/packages/calcite-components/src/components/modal/modal.scss
@@ -287,8 +287,7 @@ slot[name="primary"] {
         max-block-size: unset;
       }
     }
-    :host([width-scale="#{$size}"][docked]) .container,
-    :host([width="#{$size}"][docked]) .container {
+    :host([docked]) .container .width-#{$size} {
       align-items: flex-end;
     }
   }
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index d37ce2f4433..b4a8f82a22e 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -33,7 +33,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getWidth } from "../../utils/dynamicClasses";
+import { getDimension } from "../../utils/dynamicClasses";
 import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
@@ -237,7 +237,9 @@ export class Modal
           <div
             class={{
               [CSS.modal]: true,
-              [getWidth(this.width, this.widthScale)]: !!(this.width || this.widthScale),
+              [getDimension("width", this.width, this.widthScale)]: !!(
+                this.width || this.widthScale
+              ),
             }}
             ref={this.setTransitionEl}
           >
diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
index e9f24880d3d..1d9cacb1c5c 100644
--- a/packages/calcite-components/src/components/sheet/sheet.tsx
+++ b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -27,7 +27,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getHeight, getWidth } from "../../utils/dynamicClasses";
+import { getDimension } from "../../utils/dynamicClasses";
 import { Height, LogicalFlowPosition, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS } from "./resources";
@@ -193,8 +193,10 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
             [CSS.containerOpen]: this.opened,
             [CSS.containerEmbedded]: this.embedded,
             [CSS_UTILITY.rtl]: dir === "rtl",
-            [getWidth(this.width, this.widthScale)]: !!this.width || !!this.widthScale,
-            [getHeight(this.height, this.heightScale)]: !!(this.width || this.widthScale),
+            [getDimension("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
+            [getDimension("height", this.height, this.heightScale)]: !!(
+              this.height || this.heightScale
+            ),
           }}
           ref={this.setTransitionEl}
         >
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index 7e3d8ff07a4..229c26e91f2 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, h, Prop, State, VNode } from "@stencil/core";
 import { slotChangeGetAssignedElements } from "../../utils/dom";
 import { Height, Position, Scale } from "../interfaces";
-import { getHeight } from "../../utils/dynamicClasses";
+import { getDimension } from "../../utils/dynamicClasses";
 import { logger } from "../../utils/logger";
 import { CSS, SLOTS } from "./resources";
 
@@ -97,7 +97,9 @@ export class ShellCenterRow {
       <div
         class={{
           [CSS.container]: true,
-          [getHeight(this.height, this.heightScale)]: !!this.height || !!this.heightScale,
+          [getDimension("height", this.height, this.heightScale)]: !!(
+            this.height || this.heightScale
+          ),
         }}
       >
         {children}
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
index 046e15b10f5..37559d8ad48 100644
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
@@ -135,7 +135,7 @@ describe("calcite-shell-panel", () => {
       "calcite-shell-panel",
       (panel: HTMLCalciteShellPanelElement, containerClass: string, contentClass: string) => {
         const container = panel.shadowRoot.querySelector(containerClass);
-        return container.firstElementChild.className.split(" ")[0] == contentClass;
+        return container.firstElementChild.classList.contains(contentClass);
       },
       `.${CSS.container}`,
       CSS.content,
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index c8a2f120154..b35732b9b11 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -18,7 +18,7 @@ import {
 } from "../../utils/dom";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import { clamp } from "../../utils/math";
-import { getHeight, getWidth } from "../../utils/dynamicClasses";
+import { getDimension } from "../../utils/dynamicClasses";
 import {
   connectMessages,
   disconnectMessages,
@@ -342,8 +342,10 @@ export class ShellPanel implements LocalizedComponent, T9nComponent {
           [CSS.floatContent]: displayMode === "float-content" || displayMode === "float",
           [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
           [getAnimationDir()]: displayMode === "overlay",
-          [getWidth(this.width, this.widthScale)]: !!this.width || !!this.widthScale,
-          [getHeight(this.height, this.heightScale)]: !!(this.width || this.widthScale),
+          [getDimension("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
+          [getDimension("height", this.height, this.heightScale)]: !!(
+            this.height || this.heightScale
+          ),
         }}
         hidden={collapsed}
         key="content"
diff --git a/packages/calcite-components/src/utils/dynamicCSSConst.ts b/packages/calcite-components/src/utils/dynamicCSSConst.ts
deleted file mode 100644
index fa4df95b10f..00000000000
--- a/packages/calcite-components/src/utils/dynamicCSSConst.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const getWidth = (width: string, widthScale: string): string => {
-  return width ? `width-${width}` : widthScale ? `width-${widthScale}` : "";
-};
-
-export const getHeight = (height: string, heightScale: string): string => {
-  return height ? `height-${height}` : heightScale ? `height-${heightScale}` : "";
-};
diff --git a/packages/calcite-components/src/utils/dynamicClasses.ts b/packages/calcite-components/src/utils/dynamicClasses.ts
index fa4df95b10f..9e3c0285f09 100644
--- a/packages/calcite-components/src/utils/dynamicClasses.ts
+++ b/packages/calcite-components/src/utils/dynamicClasses.ts
@@ -1,7 +1,5 @@
-export const getWidth = (width: string, widthScale: string): string => {
-  return width ? `width-${width}` : widthScale ? `width-${widthScale}` : "";
-};
+export const CSS = {};
 
-export const getHeight = (height: string, heightScale: string): string => {
-  return height ? `height-${height}` : heightScale ? `height-${heightScale}` : "";
-};
+export function getDimension(type: "width" | "height", size: string, scale: string): string {
+  return size ? `${type}-${size}` : scale ? `${type}-${scale}` : "";
+}

From 347c4edca7b37d5fe4dd5d46acb2473693eabfac Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 31 Oct 2024 13:53:55 -0700
Subject: [PATCH 32/45] add spec test for dynamicClasses to systematically
 check all valid permutations

---
 .../src/utils/dynamicClasses.spec.ts          | 19 +++++++++++++++++++
 .../src/utils/dynamicClasses.ts               |  2 --
 2 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 packages/calcite-components/src/utils/dynamicClasses.spec.ts

diff --git a/packages/calcite-components/src/utils/dynamicClasses.spec.ts b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
new file mode 100644
index 00000000000..53590d5b4ce
--- /dev/null
+++ b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
@@ -0,0 +1,19 @@
+import { getDimension } from "./dynamicClasses";
+
+it("getDimension", () => {
+  const types = ["width", "height"] as const;
+  const sizes = ["small", "medium", "large", ""] as const;
+  const scales = ["small", "medium", "large", ""] as const;
+
+  types.forEach((type) => {
+    sizes.forEach((size) => {
+      scales.forEach((scale) => {
+        const expected = size ? `${type}-${size}` : scale ? `${type}-${scale}` : "";
+        it(`should return "${expected}" for type="${type}", size="${size}", scale="${scale}"`, () => {
+          const result = getDimension(type, size, scale);
+          expect(result).toBe(expected);
+        });
+      });
+    });
+  });
+});
diff --git a/packages/calcite-components/src/utils/dynamicClasses.ts b/packages/calcite-components/src/utils/dynamicClasses.ts
index 9e3c0285f09..8c0f381d47c 100644
--- a/packages/calcite-components/src/utils/dynamicClasses.ts
+++ b/packages/calcite-components/src/utils/dynamicClasses.ts
@@ -1,5 +1,3 @@
-export const CSS = {};
-
 export function getDimension(type: "width" | "height", size: string, scale: string): string {
   return size ? `${type}-${size}` : scale ? `${type}-${scale}` : "";
 }

From 8f6209a2ee5c0c3dc046fe01061327a3a2867d8b Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 31 Oct 2024 14:08:38 -0700
Subject: [PATCH 33/45] use describe block instead of it, to keep it blocks on
 the same level, as jest does not support nesting of it blocks

---
 packages/calcite-components/src/utils/dynamicClasses.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/utils/dynamicClasses.spec.ts b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
index 53590d5b4ce..16ecf678265 100644
--- a/packages/calcite-components/src/utils/dynamicClasses.spec.ts
+++ b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
@@ -1,6 +1,6 @@
 import { getDimension } from "./dynamicClasses";
 
-it("getDimension", () => {
+describe("getDimension", () => {
   const types = ["width", "height"] as const;
   const sizes = ["small", "medium", "large", ""] as const;
   const scales = ["small", "medium", "large", ""] as const;

From 7441e50f92dce345eed3d3e5a3e472cd92d7ddf2 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 31 Oct 2024 14:16:16 -0700
Subject: [PATCH 34/45] typo

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

diff --git a/packages/calcite-components/src/utils/dynamicClasses.spec.ts b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
index 16ecf678265..6a49fa0717e 100644
--- a/packages/calcite-components/src/utils/dynamicClasses.spec.ts
+++ b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
@@ -2,8 +2,8 @@ import { getDimension } from "./dynamicClasses";
 
 describe("getDimension", () => {
   const types = ["width", "height"] as const;
-  const sizes = ["small", "medium", "large", ""] as const;
-  const scales = ["small", "medium", "large", ""] as const;
+  const sizes = ["s", "m", "l", ""] as const;
+  const scales = ["s", "m", "l", ""] as const;
 
   types.forEach((type) => {
     sizes.forEach((size) => {

From 7cfdb9d260fcf0fbafc0395c2ce91890d82fb8df Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 31 Oct 2024 14:38:04 -0700
Subject: [PATCH 35/45] template literal types

---
 .../calcite-components/src/components/dialog/resources.ts | 1 -
 .../src/components/dropdown/resources.ts                  | 2 --
 .../calcite-components/src/components/modal/resources.ts  | 1 -
 .../calcite-components/src/components/sheet/resources.ts  | 1 -
 .../src/components/shell-panel/resources.ts               | 1 -
 .../calcite-components/src/utils/dynamicClasses.spec.ts   | 3 +--
 packages/calcite-components/src/utils/dynamicClasses.ts   | 8 ++++++--
 7 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/resources.ts b/packages/calcite-components/src/components/dialog/resources.ts
index da4c488ba5d..31298ddf31a 100644
--- a/packages/calcite-components/src/components/dialog/resources.ts
+++ b/packages/calcite-components/src/components/dialog/resources.ts
@@ -9,7 +9,6 @@ export const CSS = {
   containerEmbedded: "container--embedded",
   assistiveText: "assistive-text",
   openingActive: "dialog--opening-active",
-  width: "width",
 };
 
 export const SLOTS = {
diff --git a/packages/calcite-components/src/components/dropdown/resources.ts b/packages/calcite-components/src/components/dropdown/resources.ts
index bea9fdb782e..63f0a0e1544 100644
--- a/packages/calcite-components/src/components/dropdown/resources.ts
+++ b/packages/calcite-components/src/components/dropdown/resources.ts
@@ -4,6 +4,4 @@ export const SLOTS = {
 
 export const CSS = {
   wrapper: "calcite-dropdown-wrapper",
-  width: "width",
-  widthScale: "width-scale",
 };
diff --git a/packages/calcite-components/src/components/modal/resources.ts b/packages/calcite-components/src/components/modal/resources.ts
index dceeb3a8e83..d9fd23662e8 100644
--- a/packages/calcite-components/src/components/modal/resources.ts
+++ b/packages/calcite-components/src/components/modal/resources.ts
@@ -15,7 +15,6 @@ export const CSS = {
   contentNoFooter: "content--no-footer",
   contentBottom: "content-bottom",
   contentTop: "content-top",
-  width: "width",
 
   // these classes help apply the animation in phases to only set transform on open/close
   // this helps avoid a positioning issue for any floating-ui-owning children
diff --git a/packages/calcite-components/src/components/sheet/resources.ts b/packages/calcite-components/src/components/sheet/resources.ts
index 0a3c442bd27..2cc07f3086e 100644
--- a/packages/calcite-components/src/components/sheet/resources.ts
+++ b/packages/calcite-components/src/components/sheet/resources.ts
@@ -5,5 +5,4 @@ export const CSS = {
   content: "content",
   containerEmbedded: "container--embedded",
   height: "height",
-  width: "width",
 };
diff --git a/packages/calcite-components/src/components/shell-panel/resources.ts b/packages/calcite-components/src/components/shell-panel/resources.ts
index 978c618f967..60fe12589cd 100644
--- a/packages/calcite-components/src/components/shell-panel/resources.ts
+++ b/packages/calcite-components/src/components/shell-panel/resources.ts
@@ -9,7 +9,6 @@ export const CSS = {
   floatContent: "float--content",
   height: "height",
   separator: "separator",
-  width: "width",
 };
 
 export const SLOTS = {
diff --git a/packages/calcite-components/src/utils/dynamicClasses.spec.ts b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
index 6a49fa0717e..bd069102972 100644
--- a/packages/calcite-components/src/utils/dynamicClasses.spec.ts
+++ b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
@@ -10,8 +10,7 @@ describe("getDimension", () => {
       scales.forEach((scale) => {
         const expected = size ? `${type}-${size}` : scale ? `${type}-${scale}` : "";
         it(`should return "${expected}" for type="${type}", size="${size}", scale="${scale}"`, () => {
-          const result = getDimension(type, size, scale);
-          expect(result).toBe(expected);
+          expect(getDimension(type, size, scale)).toBe(expected);
         });
       });
     });
diff --git a/packages/calcite-components/src/utils/dynamicClasses.ts b/packages/calcite-components/src/utils/dynamicClasses.ts
index 8c0f381d47c..96e498fd054 100644
--- a/packages/calcite-components/src/utils/dynamicClasses.ts
+++ b/packages/calcite-components/src/utils/dynamicClasses.ts
@@ -1,3 +1,7 @@
-export function getDimension(type: "width" | "height", size: string, scale: string): string {
-  return size ? `${type}-${size}` : scale ? `${type}-${scale}` : "";
+export function getDimension(
+  type: "width" | "height",
+  size: "s" | "m" | "l",
+  scale: "s" | "m" | "l",
+): "width-s" | "width-m" | "width-l" | "height-s" | "height-m" | "height-l" | "width" | "height" {
+  return size ? `${type}-${size}` : scale ? `${type}-${scale}` : undefined;
 }

From 919acb2f449236a1a0fc3ccc81a382e38de51e0f Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 31 Oct 2024 16:52:38 -0700
Subject: [PATCH 36/45] use existing interface types

---
 .../calcite-components/src/components.d.ts    | 183 ++++++++++++++++++
 .../src/components/dialog/dialog.tsx          |   2 +-
 .../src/components/dropdown/dropdown.tsx      |   2 +-
 .../src/components/modal/modal.tsx            |   2 +-
 .../src/components/sheet/sheet.tsx            |   2 +-
 .../shell-center-row/shell-center-row.tsx     |   2 +-
 .../components/shell-panel/shell-panel.tsx    |   2 +-
 .../src/utils/dynamicClasses.ts               |   7 -
 ...sses.spec.ts => getDimensionClass.spec.ts} |   6 +-
 .../src/utils/getDimensionClass.ts            |   9 +
 10 files changed, 201 insertions(+), 16 deletions(-)
 delete mode 100644 packages/calcite-components/src/utils/dynamicClasses.ts
 rename packages/calcite-components/src/utils/{dynamicClasses.spec.ts => getDimensionClass.spec.ts} (74%)
 create mode 100644 packages/calcite-components/src/utils/getDimensionClass.ts

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index ba008549bcc..32b681d53e1 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -79,6 +79,9 @@ import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 import { DisplayMode } from "./components/sheet/interfaces";
 import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
 import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
+import { FlipPlacement as FlipPlacement1, MenuPlacement as MenuPlacement1, OverlayPositioning as OverlayPositioning1 } from "./components";
+import { SortHandleMessages } from "./components/sort-handle/assets/sort-handle/t9n";
+import { MoveEventDetail, MoveTo, ReorderEventDetail } from "./components/sort-handle/interfaces";
 import { DragDetail } from "./utils/sortableComponent";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
 import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
@@ -174,6 +177,9 @@ export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 export { DisplayMode } from "./components/sheet/interfaces";
 export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
 export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
+export { FlipPlacement as FlipPlacement1, MenuPlacement as MenuPlacement1, OverlayPositioning as OverlayPositioning1 } from "./components";
+export { SortHandleMessages } from "./components/sort-handle/assets/sort-handle/t9n";
+export { MoveEventDetail, MoveTo, ReorderEventDetail } from "./components/sort-handle/interfaces";
 export { DragDetail } from "./utils/sortableComponent";
 export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
 export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
@@ -4876,6 +4882,70 @@ export namespace Components {
          */
         "value": null | number | number[];
     }
+    interface CalciteSortHandle {
+        /**
+          * When `true`, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled": boolean;
+        /**
+          * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "flipPlacements": FlipPlacement1[];
+        /**
+          * Specifies the label of the component.
+         */
+        "label": string;
+        /**
+          * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.
+         */
+        "maxItems": number;
+        /**
+          * Use this property to override individual strings used by the component.
+         */
+        "messageOverrides": Partial<SortHandleMessages>;
+        /**
+          * Made into a prop for testing purposes only.
+          * @readonly
+         */
+        "messages": SortHandleMessages;
+        /**
+          * Defines the "Move to" items.
+         */
+        "moveToItems": MoveTo[];
+        /**
+          * When `true`, displays and positions the component.
+         */
+        "open": boolean;
+        /**
+          * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+         */
+        "overlayPositioning": OverlayPositioning1;
+        /**
+          * Determines where the component will be positioned relative to the container element.
+          * @default "bottom-start"
+         */
+        "placement": MenuPlacement1;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale": Scale;
+        /**
+          * Sets focus on the component.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * The current position of the handle.
+         */
+        "setPosition": number;
+        /**
+          * The total number of sortable items.
+         */
+        "setSize": number;
+        /**
+          * Specifies the width of the component.
+         */
+        "widthScale": Scale;
+    }
     interface CalciteSortableList {
         /**
           * When provided, the method will be called to determine whether the element can  move from the list.
@@ -6340,6 +6410,10 @@ export interface CalciteSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteSliderElement;
 }
+export interface CalciteSortHandleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteSortHandleElement;
+}
 export interface CalciteSortableListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteSortableListElement;
@@ -7729,6 +7803,28 @@ declare global {
         prototype: HTMLCalciteSliderElement;
         new (): HTMLCalciteSliderElement;
     };
+    interface HTMLCalciteSortHandleElementEventMap {
+        "calciteSortHandleBeforeClose": void;
+        "calciteSortHandleBeforeOpen": void;
+        "calciteSortHandleReorder": ReorderEventDetail;
+        "calciteSortHandleMove": MoveEventDetail;
+        "calciteSortHandleClose": void;
+        "calciteSortHandleOpen": void;
+    }
+    interface HTMLCalciteSortHandleElement extends Components.CalciteSortHandle, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCalciteSortHandleElementEventMap>(type: K, listener: (this: HTMLCalciteSortHandleElement, ev: CalciteSortHandleCustomEvent<HTMLCalciteSortHandleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCalciteSortHandleElementEventMap>(type: K, listener: (this: HTMLCalciteSortHandleElement, ev: CalciteSortHandleCustomEvent<HTMLCalciteSortHandleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCalciteSortHandleElement: {
+        prototype: HTMLCalciteSortHandleElement;
+        new (): HTMLCalciteSortHandleElement;
+    };
     interface HTMLCalciteSortableListElementEventMap {
         "calciteListOrderChange": void;
     }
@@ -8267,6 +8363,7 @@ declare global {
         "calcite-shell-center-row": HTMLCalciteShellCenterRowElement;
         "calcite-shell-panel": HTMLCalciteShellPanelElement;
         "calcite-slider": HTMLCalciteSliderElement;
+        "calcite-sort-handle": HTMLCalciteSortHandleElement;
         "calcite-sortable-list": HTMLCalciteSortableListElement;
         "calcite-split-button": HTMLCalciteSplitButtonElement;
         "calcite-stack": HTMLCalciteStackElement;
@@ -13219,6 +13316,90 @@ declare namespace LocalJSX {
          */
         "value"?: null | number | number[];
     }
+    interface CalciteSortHandle {
+        /**
+          * When `true`, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled"?: boolean;
+        /**
+          * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "flipPlacements"?: FlipPlacement1[];
+        /**
+          * Specifies the label of the component.
+         */
+        "label"?: string;
+        /**
+          * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.
+         */
+        "maxItems"?: number;
+        /**
+          * Use this property to override individual strings used by the component.
+         */
+        "messageOverrides"?: Partial<SortHandleMessages>;
+        /**
+          * Made into a prop for testing purposes only.
+          * @readonly
+         */
+        "messages"?: SortHandleMessages;
+        /**
+          * Defines the "Move to" items.
+         */
+        "moveToItems"?: MoveTo[];
+        /**
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteSortHandleBeforeClose"?: (event: CalciteSortHandleCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteSortHandleBeforeOpen"?: (event: CalciteSortHandleCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteSortHandleClose"?: (event: CalciteSortHandleCustomEvent<void>) => void;
+        /**
+          * Fires when a move item has been selected.
+         */
+        "onCalciteSortHandleMove"?: (event: CalciteSortHandleCustomEvent<MoveEventDetail>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteSortHandleOpen"?: (event: CalciteSortHandleCustomEvent<void>) => void;
+        /**
+          * Fires when a reorder has been selected.
+         */
+        "onCalciteSortHandleReorder"?: (event: CalciteSortHandleCustomEvent<ReorderEventDetail>) => void;
+        /**
+          * When `true`, displays and positions the component.
+         */
+        "open"?: boolean;
+        /**
+          * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+         */
+        "overlayPositioning"?: OverlayPositioning1;
+        /**
+          * Determines where the component will be positioned relative to the container element.
+          * @default "bottom-start"
+         */
+        "placement"?: MenuPlacement1;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale"?: Scale;
+        /**
+          * The current position of the handle.
+         */
+        "setPosition"?: number;
+        /**
+          * The total number of sortable items.
+         */
+        "setSize"?: number;
+        /**
+          * Specifies the width of the component.
+         */
+        "widthScale"?: Scale;
+    }
     interface CalciteSortableList {
         /**
           * When provided, the method will be called to determine whether the element can  move from the list.
@@ -14567,6 +14748,7 @@ declare namespace LocalJSX {
         "calcite-shell-center-row": CalciteShellCenterRow;
         "calcite-shell-panel": CalciteShellPanel;
         "calcite-slider": CalciteSlider;
+        "calcite-sort-handle": CalciteSortHandle;
         "calcite-sortable-list": CalciteSortableList;
         "calcite-split-button": CalciteSplitButton;
         "calcite-stack": CalciteStack;
@@ -14702,6 +14884,7 @@ declare module "@stencil/core" {
             "calcite-shell-center-row": LocalJSX.CalciteShellCenterRow & JSXBase.HTMLAttributes<HTMLCalciteShellCenterRowElement>;
             "calcite-shell-panel": LocalJSX.CalciteShellPanel & JSXBase.HTMLAttributes<HTMLCalciteShellPanelElement>;
             "calcite-slider": LocalJSX.CalciteSlider & JSXBase.HTMLAttributes<HTMLCalciteSliderElement>;
+            "calcite-sort-handle": LocalJSX.CalciteSortHandle & JSXBase.HTMLAttributes<HTMLCalciteSortHandleElement>;
             "calcite-sortable-list": LocalJSX.CalciteSortableList & JSXBase.HTMLAttributes<HTMLCalciteSortableListElement>;
             "calcite-split-button": LocalJSX.CalciteSplitButton & JSXBase.HTMLAttributes<HTMLCalciteSplitButtonElement>;
             "calcite-stack": LocalJSX.CalciteStack & JSXBase.HTMLAttributes<HTMLCalciteStackElement>;
diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index f41fdbd0041..61818344023 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -29,7 +29,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
-import { getDimension } from "../../utils/dynamicClasses";
+import { getDimension } from "../../utils/getDimensionClass";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 3cf1f178afb..270fc6907dc 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -44,7 +44,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getDimension } from "../../utils/dynamicClasses";
+import { getDimension } from "../../utils/getDimensionClass";
 import { RequestedItem } from "../dropdown-group/interfaces";
 import { Scale, Width } from "../interfaces";
 import { ItemKeyboardEvent } from "./interfaces";
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index b4a8f82a22e..9152b304098 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -33,7 +33,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getDimension } from "../../utils/dynamicClasses";
+import { getDimension } from "../../utils/getDimensionClass";
 import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
index 1d9cacb1c5c..d0b5b4b7eeb 100644
--- a/packages/calcite-components/src/components/sheet/sheet.tsx
+++ b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -27,7 +27,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getDimension } from "../../utils/dynamicClasses";
+import { getDimension } from "../../utils/getDimensionClass";
 import { Height, LogicalFlowPosition, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS } from "./resources";
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index 229c26e91f2..2147518e558 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, h, Prop, State, VNode } from "@stencil/core";
 import { slotChangeGetAssignedElements } from "../../utils/dom";
 import { Height, Position, Scale } from "../interfaces";
-import { getDimension } from "../../utils/dynamicClasses";
+import { getDimension } from "../../utils/getDimensionClass";
 import { logger } from "../../utils/logger";
 import { CSS, SLOTS } from "./resources";
 
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index b35732b9b11..20439228850 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -18,7 +18,7 @@ import {
 } from "../../utils/dom";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import { clamp } from "../../utils/math";
-import { getDimension } from "../../utils/dynamicClasses";
+import { getDimension } from "../../utils/getDimensionClass";
 import {
   connectMessages,
   disconnectMessages,
diff --git a/packages/calcite-components/src/utils/dynamicClasses.ts b/packages/calcite-components/src/utils/dynamicClasses.ts
deleted file mode 100644
index 96e498fd054..00000000000
--- a/packages/calcite-components/src/utils/dynamicClasses.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function getDimension(
-  type: "width" | "height",
-  size: "s" | "m" | "l",
-  scale: "s" | "m" | "l",
-): "width-s" | "width-m" | "width-l" | "height-s" | "height-m" | "height-l" | "width" | "height" {
-  return size ? `${type}-${size}` : scale ? `${type}-${scale}` : undefined;
-}
diff --git a/packages/calcite-components/src/utils/dynamicClasses.spec.ts b/packages/calcite-components/src/utils/getDimensionClass.spec.ts
similarity index 74%
rename from packages/calcite-components/src/utils/dynamicClasses.spec.ts
rename to packages/calcite-components/src/utils/getDimensionClass.spec.ts
index bd069102972..ddb041f8732 100644
--- a/packages/calcite-components/src/utils/dynamicClasses.spec.ts
+++ b/packages/calcite-components/src/utils/getDimensionClass.spec.ts
@@ -1,9 +1,9 @@
-import { getDimension } from "./dynamicClasses";
+import { getDimension } from "./getDimensionClass";
 
 describe("getDimension", () => {
   const types = ["width", "height"] as const;
-  const sizes = ["s", "m", "l", ""] as const;
-  const scales = ["s", "m", "l", ""] as const;
+  const sizes = ["s", "m", "l", "auto", "half", "full"] as const;
+  const scales = ["s", "m", "l"] as const;
 
   types.forEach((type) => {
     sizes.forEach((size) => {
diff --git a/packages/calcite-components/src/utils/getDimensionClass.ts b/packages/calcite-components/src/utils/getDimensionClass.ts
new file mode 100644
index 00000000000..de5efeeec3a
--- /dev/null
+++ b/packages/calcite-components/src/utils/getDimensionClass.ts
@@ -0,0 +1,9 @@
+import { Scale, Width, Height } from "../components/interfaces";
+
+export function getDimension(
+  type: "width" | "height",
+  size: Width | Height,
+  scale: Scale,
+): `${typeof type}-${Scale | Width | Height}` {
+  return size ? `${type}-${size}` : scale ? `${type}-${scale}` : undefined;
+}

From 9bf32d5cb6e0b0fbd025d84fd7d6ce5084073270 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 31 Oct 2024 17:26:11 -0700
Subject: [PATCH 37/45] refactor

---
 packages/calcite-components/src/components/dialog/dialog.tsx    | 2 +-
 .../calcite-components/src/components/dropdown/dropdown.tsx     | 2 +-
 packages/calcite-components/src/components/modal/modal.tsx      | 2 +-
 packages/calcite-components/src/components/sheet/sheet.tsx      | 2 +-
 .../src/components/shell-center-row/shell-center-row.tsx        | 2 +-
 .../src/components/shell-panel/shell-panel.tsx                  | 2 +-
 .../utils/{getDimensionClass.spec.ts => dynamicClasses.spec.ts} | 2 +-
 .../src/utils/{getDimensionClass.ts => dynamicClasses.ts}       | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)
 rename packages/calcite-components/src/utils/{getDimensionClass.spec.ts => dynamicClasses.spec.ts} (91%)
 rename packages/calcite-components/src/utils/{getDimensionClass.ts => dynamicClasses.ts} (88%)

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 61818344023..f41fdbd0041 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -29,7 +29,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
-import { getDimension } from "../../utils/getDimensionClass";
+import { getDimension } from "../../utils/dynamicClasses";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 270fc6907dc..3cf1f178afb 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -44,7 +44,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getDimension } from "../../utils/getDimensionClass";
+import { getDimension } from "../../utils/dynamicClasses";
 import { RequestedItem } from "../dropdown-group/interfaces";
 import { Scale, Width } from "../interfaces";
 import { ItemKeyboardEvent } from "./interfaces";
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index 9152b304098..b4a8f82a22e 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -33,7 +33,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getDimension } from "../../utils/getDimensionClass";
+import { getDimension } from "../../utils/dynamicClasses";
 import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
index d0b5b4b7eeb..1d9cacb1c5c 100644
--- a/packages/calcite-components/src/components/sheet/sheet.tsx
+++ b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -27,7 +27,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getDimension } from "../../utils/getDimensionClass";
+import { getDimension } from "../../utils/dynamicClasses";
 import { Height, LogicalFlowPosition, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS } from "./resources";
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index 2147518e558..229c26e91f2 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, h, Prop, State, VNode } from "@stencil/core";
 import { slotChangeGetAssignedElements } from "../../utils/dom";
 import { Height, Position, Scale } from "../interfaces";
-import { getDimension } from "../../utils/getDimensionClass";
+import { getDimension } from "../../utils/dynamicClasses";
 import { logger } from "../../utils/logger";
 import { CSS, SLOTS } from "./resources";
 
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index 20439228850..b35732b9b11 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -18,7 +18,7 @@ import {
 } from "../../utils/dom";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import { clamp } from "../../utils/math";
-import { getDimension } from "../../utils/getDimensionClass";
+import { getDimension } from "../../utils/dynamicClasses";
 import {
   connectMessages,
   disconnectMessages,
diff --git a/packages/calcite-components/src/utils/getDimensionClass.spec.ts b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
similarity index 91%
rename from packages/calcite-components/src/utils/getDimensionClass.spec.ts
rename to packages/calcite-components/src/utils/dynamicClasses.spec.ts
index ddb041f8732..8a6cc95b87f 100644
--- a/packages/calcite-components/src/utils/getDimensionClass.spec.ts
+++ b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
@@ -1,4 +1,4 @@
-import { getDimension } from "./getDimensionClass";
+import { getDimension } from "./dynamicClasses";
 
 describe("getDimension", () => {
   const types = ["width", "height"] as const;
diff --git a/packages/calcite-components/src/utils/getDimensionClass.ts b/packages/calcite-components/src/utils/dynamicClasses.ts
similarity index 88%
rename from packages/calcite-components/src/utils/getDimensionClass.ts
rename to packages/calcite-components/src/utils/dynamicClasses.ts
index de5efeeec3a..3086a94eecb 100644
--- a/packages/calcite-components/src/utils/getDimensionClass.ts
+++ b/packages/calcite-components/src/utils/dynamicClasses.ts
@@ -1,6 +1,6 @@
 import { Scale, Width, Height } from "../components/interfaces";
 
-export function getDimension(
+export function getDimensionClass(
   type: "width" | "height",
   size: Width | Height,
   scale: Scale,

From 36d302c459b0bdb006e9296f708a1dfdb5dff3ba Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 31 Oct 2024 17:43:31 -0700
Subject: [PATCH 38/45] imports

---
 .../calcite-components/src/components/dialog/dialog.tsx   | 4 ++--
 .../src/components/dropdown/dropdown.tsx                  | 4 ++--
 .../calcite-components/src/components/modal/modal.tsx     | 4 ++--
 .../calcite-components/src/components/sheet/sheet.tsx     | 8 +++++---
 .../src/components/shell-center-row/shell-center-row.tsx  | 4 ++--
 .../src/components/shell-panel/shell-panel.tsx            | 8 +++++---
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index f41fdbd0041..bf0e46d94e6 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -29,7 +29,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
-import { getDimension } from "../../utils/dynamicClasses";
+import { getDimensionClass } from "../../utils/dynamicClasses";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
@@ -279,7 +279,7 @@ export class Dialog
             aria-modal={toAriaBoolean(this.modal)}
             class={{
               [CSS.dialog]: true,
-              [getDimension("width", this.width, this.widthScale)]: !!(
+              [getDimensionClass("width", this.width, this.widthScale)]: !!(
                 this.width || this.widthScale
               ),
             }}
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 3cf1f178afb..a3f192a1565 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -44,7 +44,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getDimension } from "../../utils/dynamicClasses";
+import { getDimensionClass } from "../../utils/dynamicClasses";
 import { RequestedItem } from "../dropdown-group/interfaces";
 import { Scale, Width } from "../interfaces";
 import { ItemKeyboardEvent } from "./interfaces";
@@ -260,7 +260,7 @@ export class Dropdown
             aria-hidden={toAriaBoolean(!open)}
             class={{
               [CSS.wrapper]: true,
-              [getDimension("width", this.width, this.widthScale)]: !!(
+              [getDimensionClass("width", this.width, this.widthScale)]: !!(
                 this.width || this.widthScale
               ),
             }}
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index b4a8f82a22e..ae5c5e65d44 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -33,7 +33,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getDimension } from "../../utils/dynamicClasses";
+import { getDimensionClass } from "../../utils/dynamicClasses";
 import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
@@ -237,7 +237,7 @@ export class Modal
           <div
             class={{
               [CSS.modal]: true,
-              [getDimension("width", this.width, this.widthScale)]: !!(
+              [getDimensionClass("width", this.width, this.widthScale)]: !!(
                 this.width || this.widthScale
               ),
             }}
diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
index 1d9cacb1c5c..8c79b52d96c 100644
--- a/packages/calcite-components/src/components/sheet/sheet.tsx
+++ b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -27,7 +27,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { getDimension } from "../../utils/dynamicClasses";
+import { getDimensionClass } from "../../utils/dynamicClasses";
 import { Height, LogicalFlowPosition, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS } from "./resources";
@@ -193,8 +193,10 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
             [CSS.containerOpen]: this.opened,
             [CSS.containerEmbedded]: this.embedded,
             [CSS_UTILITY.rtl]: dir === "rtl",
-            [getDimension("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
-            [getDimension("height", this.height, this.heightScale)]: !!(
+            [getDimensionClass("width", this.width, this.widthScale)]: !!(
+              this.width || this.widthScale
+            ),
+            [getDimensionClass("height", this.height, this.heightScale)]: !!(
               this.height || this.heightScale
             ),
           }}
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index 229c26e91f2..6d2e68c8605 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, h, Prop, State, VNode } from "@stencil/core";
 import { slotChangeGetAssignedElements } from "../../utils/dom";
 import { Height, Position, Scale } from "../interfaces";
-import { getDimension } from "../../utils/dynamicClasses";
+import { getDimensionClass } from "../../utils/dynamicClasses";
 import { logger } from "../../utils/logger";
 import { CSS, SLOTS } from "./resources";
 
@@ -97,7 +97,7 @@ export class ShellCenterRow {
       <div
         class={{
           [CSS.container]: true,
-          [getDimension("height", this.height, this.heightScale)]: !!(
+          [getDimensionClass("height", this.height, this.heightScale)]: !!(
             this.height || this.heightScale
           ),
         }}
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index b35732b9b11..22c6f551e4d 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -18,7 +18,7 @@ import {
 } from "../../utils/dom";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import { clamp } from "../../utils/math";
-import { getDimension } from "../../utils/dynamicClasses";
+import { getDimensionClass } from "../../utils/dynamicClasses";
 import {
   connectMessages,
   disconnectMessages,
@@ -342,8 +342,10 @@ export class ShellPanel implements LocalizedComponent, T9nComponent {
           [CSS.floatContent]: displayMode === "float-content" || displayMode === "float",
           [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
           [getAnimationDir()]: displayMode === "overlay",
-          [getDimension("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
-          [getDimension("height", this.height, this.heightScale)]: !!(
+          [getDimensionClass("width", this.width, this.widthScale)]: !!(
+            this.width || this.widthScale
+          ),
+          [getDimensionClass("height", this.height, this.heightScale)]: !!(
             this.height || this.heightScale
           ),
         }}

From a6be544c0a71ebdc9d0dd6035dbbb98e2fe6cd87 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 31 Oct 2024 17:58:57 -0700
Subject: [PATCH 39/45] imports

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

diff --git a/packages/calcite-components/src/utils/dynamicClasses.spec.ts b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
index 8a6cc95b87f..990997e3e72 100644
--- a/packages/calcite-components/src/utils/dynamicClasses.spec.ts
+++ b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
@@ -1,4 +1,4 @@
-import { getDimension } from "./dynamicClasses";
+import { getDimensionClass } from "./dynamicClasses";
 
 describe("getDimension", () => {
   const types = ["width", "height"] as const;
@@ -10,7 +10,7 @@ describe("getDimension", () => {
       scales.forEach((scale) => {
         const expected = size ? `${type}-${size}` : scale ? `${type}-${scale}` : "";
         it(`should return "${expected}" for type="${type}", size="${size}", scale="${scale}"`, () => {
-          expect(getDimension(type, size, scale)).toBe(expected);
+          expect(getDimensionClass(type, size, scale)).toBe(expected);
         });
       });
     });

From a0899f749c8cd777d8618f5f5f89b566181a39db Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 7 Nov 2024 17:18:47 -0800
Subject: [PATCH 40/45] remove new defaults to revert screenshot diffs

---
 .../src/components/dialog/dialog.scss              | 14 ++++++--------
 .../src/components/dropdown/dropdown.tsx           |  2 +-
 .../shell-center-row/shell-center-row.tsx          |  2 +-
 .../src/components/shell-panel/shell-panel.tsx     |  2 +-
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index ca20323c328..d7a7d2dbecb 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -197,18 +197,16 @@ calcite-panel {
 
   @media screen and (max-width: $width + 2 * $baseline) {
     .width-#{$size} {
-      .dialog {
-        @apply m-0
+      @apply m-0
           h-full
           max-h-full
           w-full
           max-w-full;
-        inset-inline-start: 0;
-        inset-block-start: var(--calcite-internal-dialog-animation-offset);
-        &--opening {
-          &-active {
-            inset-block-start: 0;
-          }
+      inset-inline-start: 0;
+      inset-block-start: var(--calcite-internal-dialog-animation-offset);
+      &--opening {
+        &-active {
+          inset-block-start: 0;
         }
       }
     }
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index e4508ec21bb..01331f9a46c 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -174,7 +174,7 @@ export class Dropdown
    *
    * @deprecated Use the `width` property instead.
    */
-  @Prop({ reflect: true }) widthScale: Scale = "m";
+  @Prop({ reflect: true }) widthScale: Scale;
 
   /** Specifies the width of the component. */
   @Prop({ reflect: true }) width: Extract<"s" | "m" | "l", Width>;
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index 6d2e68c8605..a923fa8d4bb 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -35,7 +35,7 @@ export class ShellCenterRow {
   @Prop({ reflect: true }) heightScale: Scale = "s";
 
   /** Specifies the height of the component. */
-  @Prop({ reflect: true }) height: Height = "s";
+  @Prop({ reflect: true }) height: Height;
 
   /**
    * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index 22c6f551e4d..8bc1af57c3f 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -107,7 +107,7 @@ export class ShellPanel implements LocalizedComponent, T9nComponent {
    *
    * @deprecated Use the `height` property instead.
    */
-  @Prop({ reflect: true }) heightScale: Scale = "m";
+  @Prop({ reflect: true }) heightScale: Scale;
 
   @Watch("heightScale")
   handleHeightScale(value: Scale): void {

From e578ab801eb085499495185ebe7475348b6aaa79 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 8 Nov 2024 15:18:24 -0800
Subject: [PATCH 41/45] remove default value in e2e for dropdown

---
 .../src/components/dropdown/dropdown.e2e.ts                   | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
index 3e81c952ef9..fcd2f32b116 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -37,10 +37,6 @@ describe("calcite-dropdown", () => {
         propertyName: "scale",
         defaultValue: "m",
       },
-      {
-        propertyName: "widthScale",
-        defaultValue: "m",
-      },
       {
         propertyName: "placement",
         defaultValue: "bottom-start",

From 9fa539d724610c2fe479bec38c3548660accd6b4 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 8 Nov 2024 15:38:44 -0800
Subject: [PATCH 42/45] revert test adjustment

---
 packages/calcite-components/src/components/dialog/dialog.e2e.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
index e54ae12c118..d16033fb156 100644
--- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -357,7 +357,7 @@ describe("calcite-dialog", () => {
 
     const internalDialog = await page.find(`calcite-dialog >>> .${CSS.dialog}`);
     const style = await internalDialog.getComputedStyle();
-    expect(style.width).toEqual("752px");
+    expect(style.width).toEqual("800px");
     expect(style.height).toEqual("800px");
   });
 

From 5f2ddbaf899096f3a296712ccfdf7e9a64b72bc2 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 12 Nov 2024 15:51:24 -0800
Subject: [PATCH 43/45] use vh vs % on container, cleanup

---
 .../src/components/shell-center-row/shell-center-row.scss   | 6 +++---
 .../src/components/shell-panel/shell-panel.scss             | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
index 59f55ce2113..0cbb07c7159 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
@@ -41,15 +41,15 @@
 }
 
 .height-s {
-  block-size: theme("width[1/3]");
+  block-size: 33.333vh;
 }
 
 .height-m {
-  block-size: 70%;
+  block-size: 70vh;
 }
 
 .height-l {
-  @apply h-full;
+  @apply 100vh;
 }
 
 :host([detached]) .height-l {
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.scss b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
index 0f2b98c0dcd..3f2d8112376 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
@@ -63,8 +63,7 @@
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px);
 }
 
-:host([layout="vertical"]:not([display-mode="float-all"])) .width-m,
-:host([layout="vertical"][width="m"]:not([display-mode="float-all"])) .content {
+:host([layout="vertical"]:not([display-mode="float-all"])) .width-m {
   --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);
   --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 420px);
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px);

From 61b3395c0339cac33defeb46ee4dbcd648807efd Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 12 Nov 2024 15:53:04 -0800
Subject: [PATCH 44/45] tidy up

---
 .../src/components/shell-center-row/shell-center-row.scss       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
index 0cbb07c7159..605ad3d59ff 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
@@ -49,7 +49,7 @@
 }
 
 .height-l {
-  @apply 100vh;
+  block-size: 100vh;
 }
 
 :host([detached]) .height-l {

From fba447f1d7763ea52bf3a00187708c2ba25547d1 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 12 Nov 2024 17:34:37 -0800
Subject: [PATCH 45/45] return a valid key from util

---
 packages/calcite-components/src/utils/dynamicClasses.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/utils/dynamicClasses.ts b/packages/calcite-components/src/utils/dynamicClasses.ts
index 3086a94eecb..09651fdf6fc 100644
--- a/packages/calcite-components/src/utils/dynamicClasses.ts
+++ b/packages/calcite-components/src/utils/dynamicClasses.ts
@@ -5,5 +5,5 @@ export function getDimensionClass(
   size: Width | Height,
   scale: Scale,
 ): `${typeof type}-${Scale | Width | Height}` {
-  return size ? `${type}-${size}` : scale ? `${type}-${scale}` : undefined;
+  return size ? `${type}-${size}` : scale ? `${type}-${scale}` : "width-m";
 }