diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs
index 3861302ec13..2e02214db54 100644
--- a/packages/calcite-components/.stylelintrc.cjs
+++ b/packages/calcite-components/.stylelintrc.cjs
@@ -6,7 +6,7 @@ const customFunctions = [
   "medium-modular-scale",
   "modular-scale",
   "scale-duration",
-  "small-modular-scale",
+  "small-modular-scale"
 ];
 // ⚠️ END OF AUTO-GENERATED CODE
 
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index dd887407571..b75f3419c32 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, InteractionMode, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
+import { Alignment, Appearance, CollapseDirection, FlipContext, Height, IconType, InteractionMode, 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";
@@ -98,7 +98,7 @@ import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces
 import { TipMessages } from "./components/tip/assets/tip/t9n";
 import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
-export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, InteractionMode, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
+export { Alignment, Appearance, CollapseDirection, FlipContext, Height, IconType, InteractionMode, 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";
@@ -833,9 +833,9 @@ 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": Width;
+        "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteCard {
         /**
@@ -1839,6 +1839,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 {
@@ -1896,6 +1901,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 {
@@ -3689,6 +3699,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 {
@@ -3838,9 +3853,9 @@ 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": Width;
+        "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteOption {
         /**
@@ -4362,7 +4377,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>;
     }
@@ -4457,9 +4472,9 @@ 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": Width;
+        "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteSheet {
         /**
@@ -4483,8 +4498,13 @@ export namespace Components {
           * When `true`, prevents focus trapping.
          */
         "focusTrapDisabled": boolean;
+        /**
+          * Specifies the height of the component.
+         */
+        "height": Height;
         /**
           * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale": Scale;
         /**
@@ -4515,8 +4535,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;
     }
@@ -4534,8 +4559,13 @@ export namespace Components {
           * When `true`, the content area displays like a floating panel.
          */
         "detached": boolean;
+        /**
+          * Specifies the height of the component.
+         */
+        "height": Height;
         /**
           * Specifies the maximum height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale": Scale;
         /**
@@ -4555,15 +4585,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": Height;
         /**
           * When `layout` is `horizontal`, specifies the maximum height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale": Scale;
         /**
@@ -4586,8 +4621,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;
     }
@@ -4900,9 +4940,9 @@ 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": Width;
+        "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteStack {
         /**
@@ -5668,7 +5708,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>;
     }
@@ -8658,9 +8698,9 @@ 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"?: Width;
+        "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteCard {
         /**
@@ -9750,6 +9790,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 {
@@ -9818,6 +9863,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 {
@@ -11715,6 +11765,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 {
@@ -11868,9 +11923,9 @@ 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"?: Width;
+        "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteOption {
         /**
@@ -12396,7 +12451,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>;
     }
@@ -12495,9 +12550,9 @@ 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"?: Width;
+        "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteSheet {
         /**
@@ -12521,8 +12576,13 @@ declare namespace LocalJSX {
           * When `true`, prevents focus trapping.
          */
         "focusTrapDisabled"?: boolean;
+        /**
+          * Specifies the height of the component.
+         */
+        "height"?: Height;
         /**
           * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale"?: Scale;
         /**
@@ -12561,8 +12621,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;
     }
@@ -12580,8 +12645,13 @@ declare namespace LocalJSX {
           * When `true`, the content area displays like a floating panel.
          */
         "detached"?: boolean;
+        /**
+          * Specifies the height of the component.
+         */
+        "height"?: Height;
         /**
           * Specifies the maximum height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale"?: Scale;
         /**
@@ -12601,15 +12671,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"?: Height;
         /**
           * When `layout` is `horizontal`, specifies the maximum height of the component.
+          * @deprecated Use the `height` property instead.
          */
         "heightScale"?: Scale;
         /**
@@ -12634,8 +12709,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;
     }
@@ -12980,9 +13060,9 @@ 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"?: Width;
+        "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteStack {
         /**
@@ -13760,7 +13840,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 625e2b396c6..d8fc80af756 100644
--- a/packages/calcite-components/src/components/button/button.tsx
+++ b/packages/calcite-components/src/components/button/button.tsx
@@ -165,8 +165,8 @@ export class Button
    */
   @Prop({ reflect: true }) type = "button";
 
-  /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Width = "auto";
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
+  @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.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
index a8a3e9ea2d4..d16033fb156 100644
--- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -126,6 +126,10 @@ describe("calcite-dialog", () => {
         propertyName: "widthScale",
         value: "s",
       },
+      {
+        propertyName: "width",
+        value: "s",
+      },
     ]);
   });
 
diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 0700e9981a2..d7a7d2dbecb 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -188,33 +188,32 @@ calcite-panel {
 /**
  * Sizes
  */
+
 @mixin dialog-size($size, $width) {
-  :host([width-scale="#{$size}"]) .dialog {
+  .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}"]) {
-      .dialog {
-        @apply m-0
+    .width-#{$size} {
+      @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;
         }
       }
     }
   }
 }
 
-:host([width="small"]) .dialog {
+.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 277568b76ad..bf0e46d94e6 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -29,8 +29,9 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
+import { getDimensionClass } from "../../utils/dynamicClasses";
 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,
@@ -204,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>;
+
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -269,7 +277,12 @@ export class Dialog
             aria-description={description}
             aria-label={heading}
             aria-modal={toAriaBoolean(this.modal)}
-            class={CSS.dialog}
+            class={{
+              [CSS.dialog]: true,
+              [getDimensionClass("width", this.width, this.widthScale)]: !!(
+                this.width || this.widthScale
+              ),
+            }}
             onKeyDown={this.handleKeyDown}
             ref={this.setTransitionEl}
             role="dialog"
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
index 1ad2fc06a1f..fcd2f32b116 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -50,6 +50,14 @@ describe("calcite-dropdown", () => {
         propertyName: "scale",
         value: "m",
       },
+      {
+        propertyName: "widthScale",
+        value: "m",
+      },
+      {
+        propertyName: "width",
+        value: "m",
+      },
       {
         propertyName: "placement",
         value: "bottom-start",
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.scss b/packages/calcite-components/src/components/dropdown/dropdown.scss
index 6c3c8105e3d..676e8e540ea 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.scss
+++ b/packages/calcite-components/src/components/dropdown/dropdown.scss
@@ -39,14 +39,15 @@
   }
 }
 
-// width
-:host([width-scale="s"]) {
+.width-s {
   --calcite-dropdown-width: theme("spacing.48");
 }
-:host([width-scale="m"]) {
+
+.width-m {
   --calcite-dropdown-width: theme("spacing.56");
 }
-:host([width-scale="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 d8f981d267d..01331f9a46c 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -45,8 +45,9 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
+import { getDimensionClass } from "../../utils/dynamicClasses";
 import { RequestedItem } from "../dropdown-group/interfaces";
-import { Scale } from "../interfaces";
+import { Scale, Width } from "../interfaces";
 import { ItemKeyboardEvent } from "./interfaces";
 import { CSS, SLOTS } from "./resources";
 
@@ -170,9 +171,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>;
+
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
@@ -251,7 +257,16 @@ export class Dropdown
               onSlotchange={this.updateTriggers}
             />
           </div>
-          <div aria-hidden={toAriaBoolean(!open)} class={CSS.wrapper} ref={this.setFloatingEl}>
+          <div
+            aria-hidden={toAriaBoolean(!open)}
+            class={{
+              [CSS.wrapper]: true,
+              [getDimensionClass("width", this.width, this.widthScale)]: !!(
+                this.width || this.widthScale
+              ),
+            }}
+            ref={this.setFloatingEl}
+          >
             <div
               aria-labelledby={`${guid}-menubutton`}
               class={{
diff --git a/packages/calcite-components/src/components/interfaces.ts b/packages/calcite-components/src/components/interfaces.ts
index 8246f37943a..5dd3f85a3b0 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";
 export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
 export type Layout =
   | "horizontal"
@@ -28,7 +29,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" | "half" | "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.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index e2091a17c5a..e5edf76c0b8 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, waitForAnimationFrame } from "../../tests/utils";
 import { CSS, SLOTS } from "./resources";
@@ -26,6 +26,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>");
diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss
index 7411a70b924..302e94bc5e5 100644
--- a/packages/calcite-components/src/components/modal/modal.scss
+++ b/packages/calcite-components/src/components/modal/modal.scss
@@ -271,14 +271,14 @@ slot[name="primary"] {
  * Sizes
  */
 @mixin modal-size($size, $width) {
-  :host([width-scale="#{$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}"]) {
+    .width-#{$size} {
       .modal {
         @apply m-0 h-full max-h-full w-full max-w-full;
       }
@@ -287,7 +287,7 @@ slot[name="primary"] {
         max-block-size: unset;
       }
     }
-    :host([width-scale="#{$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 aa0f8388554..ae5c5e65d44 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -33,7 +33,8 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { Kind, Scale } from "../interfaces";
+import { getDimensionClass } from "../../utils/dynamicClasses";
+import { Kind, Scale, Width } from "../interfaces";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
   connectMessages,
@@ -130,9 +131,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>;
+
   /** Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */
   @Prop({ reflect: true }) fullscreen: boolean;
 
@@ -229,6 +237,9 @@ export class Modal
           <div
             class={{
               [CSS.modal]: true,
+              [getDimensionClass("width", this.width, this.widthScale)]: !!(
+                this.width || this.widthScale
+              ),
             }}
             ref={this.setTransitionEl}
           >
diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx
index 3e4e5a1cee2..840ad32fe41 100644
--- a/packages/calcite-components/src/components/notice/notice.tsx
+++ b/packages/calcite-components/src/components/notice/notice.tsx
@@ -88,8 +88,8 @@ export class Notice
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Width = "auto";
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
+  @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/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
index fb96cb4a527..90b0f3c0e41 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
@@ -157,7 +157,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 66df7f65696..e40e995e1ae 100644
--- a/packages/calcite-components/src/components/select/select.tsx
+++ b/packages/calcite-components/src/components/select/select.tsx
@@ -152,10 +152,8 @@ export class Select
     this.value = selectedOption?.value;
   }
 
-  /**
-   * Specifies the width of the component.
-   */
-  @Prop({ reflect: true }) width: Width = "auto";
+  /** 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/sheet/resources.ts b/packages/calcite-components/src/components/sheet/resources.ts
index 25d55a3c949..2cc07f3086e 100644
--- a/packages/calcite-components/src/components/sheet/resources.ts
+++ b/packages/calcite-components/src/components/sheet/resources.ts
@@ -4,4 +4,5 @@ export const CSS = {
   containerOpen: "container--open",
   content: "content",
   containerEmbedded: "container--embedded",
+  height: "height",
 };
diff --git a/packages/calcite-components/src/components/sheet/sheet.e2e.ts b/packages/calcite-components/src/components/sheet/sheet.e2e.ts
index 56b6f4421b3..d84396d8adf 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", () => {
diff --git a/packages/calcite-components/src/components/sheet/sheet.scss b/packages/calcite-components/src/components/sheet/sheet.scss
index 50d9dd990f3..da7077046a3 100644
--- a/packages/calcite-components/src/components/sheet/sheet.scss
+++ b/packages/calcite-components/src/components/sheet/sheet.scss
@@ -115,37 +115,37 @@
   min-inline-size: calc(100% - 1.5rem);
 }
 
-: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-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 {
   --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 {
   --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-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-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 ee6b9c80445..8c79b52d96c 100644
--- a/packages/calcite-components/src/components/sheet/sheet.tsx
+++ b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -27,7 +27,8 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { LogicalFlowPosition, Scale } from "../interfaces";
+import { getDimensionClass } from "../../utils/dynamicClasses";
+import { Height, LogicalFlowPosition, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS } from "./resources";
 import { DisplayMode } from "./interfaces";
@@ -70,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: Height;
+
   /**
    * When `true`, prevents focus trapping.
    */
@@ -128,9 +134,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>;
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -183,6 +193,12 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
             [CSS.containerOpen]: this.opened,
             [CSS.containerEmbedded]: this.embedded,
             [CSS_UTILITY.rtl]: dir === "rtl",
+            [getDimensionClass("width", this.width, this.widthScale)]: !!(
+              this.width || this.widthScale
+            ),
+            [getDimensionClass("height", this.height, this.heightScale)]: !!(
+              this.height || this.heightScale
+            ),
           }}
           ref={this.setTransitionEl}
         >
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.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 a7f22f5c530..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
@@ -7,6 +7,10 @@
     z-default;
 }
 
+.container {
+  @apply flex flex-auto;
+}
+
 .content {
   @apply m-0
     flex
@@ -36,19 +40,19 @@
   @apply self-start;
 }
 
-:host([height-scale="s"]) {
-  block-size: theme("width[1/3]");
+.height-s {
+  block-size: 33.333vh;
 }
 
-:host([height-scale="m"]) {
-  block-size: 70%;
+.height-m {
+  block-size: 70vh;
 }
 
-:host([height-scale="l"]) {
-  @apply h-full;
+.height-l {
+  block-size: 100vh;
 }
 
-:host([height-scale="l"][detached]) {
+:host([detached]) .height-l {
   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 4f757c03527..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
@@ -1,6 +1,7 @@
-import { Component, Element, Fragment, h, Prop, State, VNode } from "@stencil/core";
-import { Position, Scale } from "../interfaces";
+import { Component, Element, h, Prop, State, VNode } from "@stencil/core";
 import { slotChangeGetAssignedElements } from "../../utils/dom";
+import { Height, Position, Scale } from "../interfaces";
+import { getDimensionClass } from "../../utils/dynamicClasses";
 import { logger } from "../../utils/logger";
 import { CSS, SLOTS } from "./resources";
 
@@ -28,9 +29,14 @@ export class ShellCenterRow {
 
   /**
    * 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: Height;
+
   /**
    * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
    */
@@ -87,7 +93,18 @@ export class ShellCenterRow {
       children.reverse();
     }
 
-    return <Fragment>{children}</Fragment>;
+    return (
+      <div
+        class={{
+          [CSS.container]: true,
+          [getDimensionClass("height", this.height, this.heightScale)]: !!(
+            this.height || this.heightScale
+          ),
+        }}
+      >
+        {children}
+      </div>
+    );
   }
 
   private handleActionBarSlotChange = (event: Event): void => {
diff --git a/packages/calcite-components/src/components/shell-panel/resources.ts b/packages/calcite-components/src/components/shell-panel/resources.ts
index 7f437f725b9..60fe12589cd 100644
--- a/packages/calcite-components/src/components/shell-panel/resources.ts
+++ b/packages/calcite-components/src/components/shell-panel/resources.ts
@@ -3,11 +3,12 @@ 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",
 };
 
 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 900fea8acca..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
@@ -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",
+      },
     ]);
   });
 
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..3f2d8112376 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
@@ -52,40 +52,40 @@
   flex: 2;
 }
 
-:host([layout="vertical"][width-scale="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"][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 {
   --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"][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"]: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"][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 {
   --calcite-internal-shell-panel-max-height: var(
     --calcite-shell-panel-max-height,
     var(--calcite-shell-panel-detached-max-height, 20vh)
@@ -100,7 +100,7 @@
   );
 }
 
-:host([layout="horizontal"][height-scale="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 e4dc6966254..8bc1af57c3f 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -18,6 +18,7 @@ import {
 } from "../../utils/dom";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import { clamp } from "../../utils/math";
+import { getDimensionClass } from "../../utils/dynamicClasses";
 import {
   connectMessages,
   disconnectMessages,
@@ -25,7 +26,7 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
-import { Layout, Position, Scale } 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";
@@ -92,7 +93,7 @@ export class ShellPanel implements LocalizedComponent, T9nComponent {
   /**
    * 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;
 
@@ -103,6 +104,8 @@ export class ShellPanel implements LocalizedComponent, T9nComponent {
 
   /**
    * When `layout` is `horizontal`, specifies the maximum height of the component.
+   *
+   * @deprecated Use the `height` property instead.
    */
   @Prop({ reflect: true }) heightScale: Scale;
 
@@ -111,12 +114,19 @@ export class ShellPanel implements LocalizedComponent, T9nComponent {
     this.detachedHeightScale = value;
   }
 
+  /** Specifies the height of the component. */
+  @Prop({ reflect: true }) height: Height;
+
   /**
    * 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>;
+
   /**
    *  The direction of the component.
    */
@@ -332,6 +342,12 @@ export class ShellPanel implements LocalizedComponent, T9nComponent {
           [CSS.floatContent]: displayMode === "float-content" || displayMode === "float",
           [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
           [getAnimationDir()]: displayMode === "overlay",
+          [getDimensionClass("width", this.width, this.widthScale)]: !!(
+            this.width || this.widthScale
+          ),
+          [getDimensionClass("height", this.height, this.heightScale)]: !!(
+            this.height || this.heightScale
+          ),
         }}
         hidden={collapsed}
         key="content"
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 1547dd2b1a1..d82b1a5935a 100644
--- a/packages/calcite-components/src/components/split-button/split-button.tsx
+++ b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -128,8 +128,8 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Width = "auto";
+  /** Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead. */
+  @Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
 
   /**
    * Fires when the primary button is clicked.
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 a9405d111fd..0bf4dda5f30 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.tsx
+++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx
@@ -94,7 +94,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";
 
   //--------------------------------------------------------------------------
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..990997e3e72
--- /dev/null
+++ b/packages/calcite-components/src/utils/dynamicClasses.spec.ts
@@ -0,0 +1,18 @@
+import { getDimensionClass } from "./dynamicClasses";
+
+describe("getDimension", () => {
+  const types = ["width", "height"] 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) => {
+      scales.forEach((scale) => {
+        const expected = size ? `${type}-${size}` : scale ? `${type}-${scale}` : "";
+        it(`should return "${expected}" for type="${type}", size="${size}", scale="${scale}"`, () => {
+          expect(getDimensionClass(type, size, scale)).toBe(expected);
+        });
+      });
+    });
+  });
+});
diff --git a/packages/calcite-components/src/utils/dynamicClasses.ts b/packages/calcite-components/src/utils/dynamicClasses.ts
new file mode 100644
index 00000000000..09651fdf6fc
--- /dev/null
+++ b/packages/calcite-components/src/utils/dynamicClasses.ts
@@ -0,0 +1,9 @@
+import { Scale, Width, Height } from "../components/interfaces";
+
+export function getDimensionClass(
+  type: "width" | "height",
+  size: Width | Height,
+  scale: Scale,
+): `${typeof type}-${Scale | Width | Height}` {
+  return size ? `${type}-${size}` : scale ? `${type}-${scale}` : "width-m";
+}