diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss
index 00cb5216cbf..097078288b1 100644
--- a/packages/calcite-components/src/components/modal/modal.scss
+++ b/packages/calcite-components/src/components/modal/modal.scss
@@ -265,14 +265,14 @@ slot[name="primary"] {
  * Sizes
  */
 @mixin modal-size($size, $width) {
-  :host([width="#{$size}"]) .modal {
+  :host([width-scale="#{$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="#{$size}"]) {
+    :host([width-scale="#{$size}"]) {
       .modal {
         @apply m-0 h-full max-h-full w-full max-w-full;
       }
@@ -281,7 +281,7 @@ slot[name="primary"] {
         max-block-size: unset;
       }
     }
-    :host([width="#{$size}"][docked]) .container {
+    :host([width-scale="#{$size}"][docked]) .container {
       align-items: flex-end;
     }
   }
diff --git a/packages/calcite-components/src/components/modal/modal.stories.ts b/packages/calcite-components/src/components/modal/modal.stories.ts
index 1b336372c26..5892bd26983 100644
--- a/packages/calcite-components/src/components/modal/modal.stories.ts
+++ b/packages/calcite-components/src/components/modal/modal.stories.ts
@@ -20,7 +20,7 @@ export const simple = (): string => html`
     ${boolean("open", true)}
     kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "s")}"
+    width-scale="${select("width-scale", ["s", "m", "l"], "s")}"
     ${boolean("fullscreen", false)}
     ${boolean("docked", false)}
     ${boolean("escape-disabled", false)}
@@ -52,7 +52,7 @@ export const slots = (): string => html`
     ${boolean("open", true)}
     kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "s")}"
+    width-scale="${select("width-scale", ["s", "m", "l"], "s")}"
     ${boolean("fullscreen", false)}
     ${boolean("docked", false)}
     ${boolean("escape-disabled", false)}
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index 02b76609e28..ace7cf1348b 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -128,7 +128,7 @@ export class Modal
   @Prop({ reflect: true }) scale: Scale = "m";
 
   /** Specifies the width of the component. */
-  @Prop({ reflect: true }) width: Scale = "m";
+  @Prop({ reflect: true }) widthScale: Scale = "m";
 
   /** Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`). */
   @Prop({ reflect: true }) fullscreen: boolean;
diff --git a/packages/calcite-components/src/demos/modal.html b/packages/calcite-components/src/demos/modal.html
index 16fa4782b92..057faddf03d 100644
--- a/packages/calcite-components/src/demos/modal.html
+++ b/packages/calcite-components/src/demos/modal.html
@@ -53,12 +53,12 @@ <h1 style="margin: 0 auto; text-align: center">Modal</h1>
       **************************************************
     -->
       <div class="parent">
-        <div class="child right-aligned-text">Width S</div>
+        <div class="child right-aligned-text">WidthScale S</div>
 
-        <!-- small width & scale -->
+        <!-- small widthScale & scale -->
         <div class="child">
-          <calcite-modal class="js-modal-s-s" width="s" scale="s">
-            <h3 slot="header">Small width and small scale modal</h3>
+          <calcite-modal class="js-modal-s-s" width-scale="s" scale="s">
+            <h3 slot="header">Small widthScale and small scale modal</h3>
             <div slot="content">
               <p>
                 The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.
@@ -82,10 +82,10 @@ <h3 slot="header">Small width and small scale modal</h3>
           </calcite-button>
         </div>
 
-        <!-- small width & medium scale -->
+        <!-- small widthScale & medium scale -->
         <div class="child">
-          <calcite-modal class="js-modal-s-m" width="s" scale="m">
-            <h3 slot="header">Small width and medium scale modal</h3>
+          <calcite-modal class="js-modal-s-m" width-scale="s" scale="m">
+            <h3 slot="header">Small widthScale and medium scale modal</h3>
             <div slot="content">
               <p>
                 The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.
@@ -109,10 +109,10 @@ <h3 slot="header">Small width and medium scale modal</h3>
           </calcite-button>
         </div>
 
-        <!-- small width & large scale -->
+        <!-- small widthScale & large scale -->
         <div class="child">
-          <calcite-modal class="js-modal-s-l" width="s" scale="l">
-            <h3 slot="header">Small width and large scale modal</h3>
+          <calcite-modal class="js-modal-s-l" width-scale="s" scale="l">
+            <h3 slot="header">Small widthScale and large scale modal</h3>
             <div slot="content">
               <p>
                 The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.
@@ -143,12 +143,12 @@ <h3 slot="header">Small width and large scale modal</h3>
       **************************************************
     -->
       <div class="parent">
-        <div class="child right-aligned-text">Width M</div>
+        <div class="child right-aligned-text">WidthScale M</div>
 
-        <!-- medium width & small scale -->
+        <!-- medium widthScale & small scale -->
         <div class="child">
-          <calcite-modal class="js-modal-m-s" width="m" scale="s">
-            <h3 slot="header">Medium wdith and small scale modal</h3>
+          <calcite-modal class="js-modal-m-s" width-scale="m" scale="s">
+            <h3 slot="header">Medium wdithScale and small scale modal</h3>
             <div slot="content">
               <table>
                 <tbody>
@@ -184,10 +184,10 @@ <h3 slot="header">Medium wdith and small scale modal</h3>
           </calcite-button>
         </div>
 
-        <!-- medium width & medium scale -->
+        <!-- medium widthScale & medium scale -->
         <div class="child">
-          <calcite-modal class="js-modal-m-m" width="m" scale="m">
-            <h3 slot="header">Medium width and medium scale modal</h3>
+          <calcite-modal class="js-modal-m-m" width-scale="m" scale="m">
+            <h3 slot="header">Medium widthScale and medium scale modal</h3>
             <div slot="content">
               <table>
                 <tbody>
@@ -223,10 +223,10 @@ <h3 slot="header">Medium width and medium scale modal</h3>
           </calcite-button>
         </div>
 
-        <!-- medium width & large scale -->
+        <!-- medium widthScale & large scale -->
         <div class="child">
-          <calcite-modal class="js-modal-m-l" width="m" scale="l">
-            <h3 slot="header">Medium width and large scale modal</h3>
+          <calcite-modal class="js-modal-m-l" width-scale="m" scale="l">
+            <h3 slot="header">Medium widthScale and large scale modal</h3>
             <div slot="content">
               <table>
                 <tbody>
@@ -269,12 +269,12 @@ <h3 slot="header">Medium width and large scale modal</h3>
       **************************************************
     -->
       <div class="parent">
-        <div class="child right-aligned-text">Width L</div>
+        <div class="child right-aligned-text">WidthScale L</div>
 
-        <!-- large width & small scale -->
+        <!-- large widthScale & small scale -->
         <div class="child">
-          <calcite-modal class="js-modal-l-s" width="l" scale="s">
-            <h3 slot="header">Large width and small scale modal</h3>
+          <calcite-modal class="js-modal-l-s" width-scale="l" scale="s">
+            <h3 slot="header">Large widthScale and small scale modal</h3>
             <div slot="content">
               <p>
                 This modal will be fullscreen until it is as wide as the calcite-web grid's max-width. This enables you
@@ -300,10 +300,10 @@ <h3 slot="header">Large width and small scale modal</h3>
           </calcite-button>
         </div>
 
-        <!-- large width & medium scale -->
+        <!-- large widthScale & medium scale -->
         <div class="child">
-          <calcite-modal class="js-modal-l-m" width="l" scale="m">
-            <h3 slot="header">Large width and medium scale modal</h3>
+          <calcite-modal class="js-modal-l-m" width-scale="l" scale="m">
+            <h3 slot="header">Large widthScale and medium scale modal</h3>
             <div slot="content">
               <p>
                 This modal will be fullscreen until it is as wide as the calcite-web grid's max-width. This enables you
@@ -329,10 +329,10 @@ <h3 slot="header">Large width and medium scale modal</h3>
           </calcite-button>
         </div>
 
-        <!-- large width & large scale -->
+        <!-- large widthScale & large scale -->
         <div class="child">
-          <calcite-modal class="js-modal-l-l" width="l" scale="l">
-            <h3 slot="header">Large width and large scale modal</h3>
+          <calcite-modal class="js-modal-l-l" width-scale="l" scale="l">
+            <h3 slot="header">Large widthScale and large scale modal</h3>
             <div slot="content">
               <p>
                 This modal will be fullscreen until it is as wide as the calcite-web grid's max-width. This enables you
@@ -873,7 +873,7 @@ <h3 slot="header">Fullscreen modal</h3>
         **************************************************
        -->
         <div class="child">
-          <calcite-modal class="js-modal-docked" status="info" docked width="s">
+          <calcite-modal class="js-modal-docked" status="info" docked width-scale="s">
             <h3 slot="header">Docked</h3>
             <div slot="content">
               <p>