@carbon/styles 1.68.0-rc.0 → 1.69.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.68.0-rc.0",
+  "version": "1.69.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,18 +40,18 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.28.0-rc.0",
-    "@carbon/feature-flags": "^0.24.0-rc.0",
-    "@carbon/grid": "^11.29.0-rc.0",
-    "@carbon/layout": "^11.28.0-rc.0",
-    "@carbon/motion": "^11.24.0-rc.0",
-    "@carbon/themes": "^11.43.0-rc.0",
-    "@carbon/type": "^11.33.0-rc.0",
+    "@carbon/colors": "^11.28.0",
+    "@carbon/feature-flags": "^0.24.0",
+    "@carbon/grid": "^11.29.0",
+    "@carbon/layout": "^11.28.0",
+    "@carbon/motion": "^11.24.0",
+    "@carbon/themes": "^11.43.0",
+    "@carbon/type": "^11.33.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.33.0",
+    "@carbon/test-utils": "^10.34.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
@@ -67,5 +67,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "e48f5e6815bd93e518e8da73c7555590b85cda22"
+  "gitHead": "8708f6dfd38bea7d5bd6d14ce34293c014cba87c"
 }

package/scss/components/accordion/_accordion.scss

@@ -109,9 +109,12 @@ $content-padding: 0 0 0 $spacing-05 !default;
       position: relative;
       z-index: 2;
       box-shadow:
-        /* Border top */ 0 -1px 0 0 $focus,
-        inset 0 1px 0 0 $focus, /* Border right */ inset 2px 0 0 0 $focus,
-        /* Border bottom */ 0 1px 0 0 $focus, inset 0 -1px 0 0 $focus,
+        /* Border top */
+        0 -1px 0 0 $focus,
+        inset 0 1px 0 0 $focus,
+        /* Border right */ inset 2px 0 0 0 $focus,
+        /* Border bottom */ 0 1px 0 0 $focus,
+        inset 0 -1px 0 0 $focus,
         /* Border left */ inset -2px 0 0 0 $focus;
       outline: none;
     }

package/scss/components/button/_button.scss

@@ -322,8 +322,9 @@
 
     padding-block: min(
       calc(
-        (layout.size('height') - var(--temp-expressive-1lh)) / 2 -
-          convert.to-rem(1px)
+        (layout.size('height') - var(--temp-expressive-1lh)) / 2 - convert.to-rem(
+            1px
+          )
       ),
       var(--temp-padding-block-max)
     );

package/scss/components/button/_mixins.scss

@@ -63,12 +63,14 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   );
   padding-inline: calc(layout.density('padding-inline') - convert.to-rem(1px))
     calc(
-      layout.density('padding-inline') * 3 + convert.to-rem(16px) -
-        convert.to-rem(1px)
+      layout.density('padding-inline') * 3 + convert.to-rem(16px) - convert.to-rem(
+          1px
+        )
     );
   text-align: start;
   text-decoration: none;
-  transition: background $duration-fast-01 motion(entrance, productive),
+  transition:
+    background $duration-fast-01 motion(entrance, productive),
     box-shadow $duration-fast-01 motion(entrance, productive),
     border-color $duration-fast-01 motion(entrance, productive),
     outline $duration-fast-01 motion(entrance, productive);
@@ -127,7 +129,8 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 
   &:focus {
     border-color: $button-focus-color;
-    box-shadow: inset 0 0 0 $button-outline-width $button-focus-color,
+    box-shadow:
+      inset 0 0 0 $button-outline-width $button-focus-color,
       inset 0 0 0 $button-border-width $background;
   }
 

package/scss/components/content-switcher/_content-switcher.scss

@@ -72,7 +72,9 @@
     &:focus {
       z-index: 3;
       border-color: $focus;
-      box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
+      box-shadow:
+        inset 0 0 0 2px $focus,
+        inset 0 0 0 3px $focus-inset;
     }
 
     &:focus::after {

package/scss/components/data-table/_data-table.scss

@@ -205,7 +205,7 @@
 
   .#{$prefix}--data-table td,
   .#{$prefix}--data-table tbody th {
-    border-block-end: 1px solid $border-subtle;
+    border-block-end: 1px solid $border-subtle-01;
     border-block-start: 1px solid $layer;
     color: $text-secondary;
     padding-inline: $spacing-05 $spacing-05;
@@ -215,6 +215,16 @@
     }
   }
 
+  .#{$prefix}--layer-two .#{$prefix}--data-table td,
+  .#{$prefix}--layer-two .#{$prefix}--data-table tbody th {
+    border-block-end: 1px solid $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three .#{$prefix}--data-table td,
+  .#{$prefix}--layer-three .#{$prefix}--data-table tbody th {
+    border-block-end: 1px solid $border-subtle-03;
+  }
+
   @supports (-moz-appearance: none) {
     .#{$prefix}--data-table td {
       // Fix to show borders in ff

package/scss/components/data-table/action/_data-table-action.scss

@@ -40,14 +40,11 @@
     block-size: $spacing-09;
     inline-size: 100%;
     transform: translate3d(0, 0, 0);
-    transition: transform $duration-fast-02 motion(standard, productive),
+    transition:
+      transform $duration-fast-02 motion(standard, productive),
       clip-path $duration-fast-02 motion(standard, productive);
   }
 
-  .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-content {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-  }
-
   .#{$prefix}--toolbar-content .#{$prefix}--search .#{$prefix}--search-input {
     padding: 0 3rem;
     // For toolbar animation with (esp.) persistent search box
@@ -79,7 +76,8 @@
     box-shadow: none;
     cursor: pointer;
     inline-size: $spacing-09;
-    transition: width $transition-expansion $standard-easing,
+    transition:
+      width $transition-expansion $standard-easing,
       background-color $duration-fast-02 motion(entrance, productive);
 
     &:hover {
@@ -381,7 +379,8 @@
   .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-content {
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
     transform: translate3d(0, 48px, 0);
-    transition: transform $duration-fast-02 motion(standard, productive),
+    transition:
+      transform $duration-fast-02 motion(standard, productive),
       clip-path $duration-fast-02 motion(standard, productive);
   }
 
@@ -400,7 +399,8 @@
     opacity: 0;
     pointer-events: none;
     transform: translate3d(0, 48px, 0);
-    transition: transform $duration-fast-02 motion(standard, productive),
+    transition:
+      transform $duration-fast-02 motion(standard, productive),
       clip-path $duration-fast-02 motion(standard, productive),
       opacity $duration-fast-02 motion(standard, productive);
     will-change: transform;

package/scss/components/data-table/expandable/_data-table-expandable.scss

@@ -50,7 +50,8 @@
     border: 0;
     background-color: $layer-hover;
     padding-block: 0;
-    transition: padding $duration-moderate-01 motion(standard, productive),
+    transition:
+      padding $duration-moderate-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
   }
 
@@ -64,15 +65,16 @@
 
   //child row visible
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
-    transition: height $duration-moderate-01 motion(standard, productive),
+    transition:
+      height $duration-moderate-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
     border-block-end: 1px solid $border-subtle;
     padding-inline-start: 3.5rem;
-    transition: padding-bottom $duration-moderate-01
-        motion(standard, productive),
+    transition:
+      padding-bottom $duration-moderate-01 motion(standard, productive),
       transform $duration-moderate-01 motion(standard, productive);
   }
 
@@ -128,7 +130,8 @@
   tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) td,
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row td,
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row {
-    transition: height $duration-moderate-01 motion(standard, productive),
+    transition:
+      height $duration-moderate-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive),
       border-color $duration-fast-01 motion(standard, productive);
   }
@@ -189,7 +192,15 @@
   // Expand icon column
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table td.#{$prefix}--table-expand {
-    border-block-end: 1px solid $border-subtle;
+    border-block-end: 1px solid $border-subtle-01;
+  }
+
+  .#{$prefix}--layer-two .#{$prefix}--data-table td.#{$prefix}--table-expand {
+    border-block-end: 1px solid $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three .#{$prefix}--data-table td.#{$prefix}--table-expand {
+    border-block-end: 1px solid $border-subtle-03;
   }
 
   .#{$prefix}--data-table
@@ -344,7 +355,8 @@
     tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
     + tr[data-child-row]
     td {
-    transition: transform $duration-moderate-01 motion(standard, productive),
+    transition:
+      transform $duration-moderate-01 motion(standard, productive),
       border-bottom $duration-fast-01 motion(standard, productive),
       border-top $duration-fast-01 motion(standard, productive);
   }

package/scss/components/data-table/sort/_data-table-sort.scss

@@ -51,7 +51,8 @@
     min-block-size: 100%;
     padding-inline-start: $spacing-05;
     text-align: start;
-    transition: background-color $duration-fast-01 motion(entrance, productive),
+    transition:
+      background-color $duration-fast-01 motion(entrance, productive),
       outline $duration-fast-01 motion(entrance, productive);
   }
 

package/scss/components/date-picker/_flatpickr.scss

@@ -406,7 +406,8 @@
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeft {
-    animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    animation:
+      fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
       fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
@@ -416,18 +417,21 @@
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeftNew {
-    animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    animation:
+      fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
       fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideRight {
-    animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    animation:
+      fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
       fp-slide-right 400ms cubic-bezier(0.23, 1, 0.32, 1);
     transform: translate3d(100%, 0, 0);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideRightNew {
-    animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    animation:
+      fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
       fp-slide-right-new 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 

package/scss/components/dialog/_dialog.scss

@@ -39,7 +39,8 @@
     /** opening and closing is used in as allow-discrete is not currently supported wide enough
      * https://caniuse.com/mdn-css_properties_display_is_transitionable
      */
-    transition: opacity $duration-moderate-02 motion(exit, expressive),
+    transition:
+      opacity $duration-moderate-02 motion(exit, expressive),
       transform $duration-moderate-02 motion(exit, expressive),
       overlay $duration-moderate-02 motion(exit, expressive) allow-discrete,
       display $duration-moderate-02 motion(exit, expressive) allow-discrete;
@@ -65,7 +66,8 @@
       opacity: 1;
       transform: translateY(0);
 
-      transition: opacity $duration-moderate-02 motion(entrance, expressive),
+      transition:
+        opacity $duration-moderate-02 motion(entrance, expressive),
         transform $duration-moderate-02 motion(entrance, expressive),
         overlay $duration-moderate-02 motion(entrance, expressive)
           allow-discrete,
@@ -115,8 +117,8 @@
     /* opening and closing is used in as allow-discrete is not currently supported wide enough
      * https://caniuse.com/mdn-css_properties_display_is_transitionable
      */
-    transition: background-color $duration-moderate-02
-        motion(entrance, expressive),
+    transition:
+      background-color $duration-moderate-02 motion(entrance, expressive),
       opacity $duration-moderate-02 motion(entrance, expressive);
 
     @media (prefers-reduced-motion) {
@@ -127,7 +129,8 @@
   .#{$prefix}--dialog[open]::backdrop {
     opacity: 1;
 
-    transition: background-color $duration-moderate-02 motion(exit, expressive),
+    transition:
+      background-color $duration-moderate-02 motion(exit, expressive),
       opacity $duration-moderate-02 motion(exit, expressive);
 
     @media (prefers-reduced-motion) {

package/scss/components/dropdown/_dropdown.scss

@@ -27,7 +27,7 @@
     display: inline-grid;
     align-items: center;
     grid-gap: 0 convert.to-rem(24px);
-    grid-template: auto auto / auto min-content;
+    grid-template: auto / auto min-content;
 
     .#{$prefix}--label {
       @include type-style('body-compact-01');
@@ -215,7 +215,8 @@
   .#{$prefix}--dropdown-item {
     position: relative;
     opacity: 0;
-    transition: visibility $duration-fast-01 motion(standard, productive),
+    transition:
+      visibility $duration-fast-01 motion(standard, productive),
       opacity $duration-fast-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
     visibility: inherit;

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -27,7 +27,8 @@
     position: relative;
     block-size: 100%;
     inline-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 

package/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -21,7 +21,8 @@
     position: relative;
     background: $field;
     block-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 
@@ -260,6 +261,8 @@
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--skeleton
     .#{$prefix}--list-box__field {
+    @include skeleton;
+
     position: absolute;
     padding: 0;
     block-size: convert.to-rem(8px);
@@ -271,6 +274,8 @@
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--skeleton
     .#{$prefix}--list-box__label {
+    @include skeleton;
+
     position: absolute;
     block-size: convert.to-rem(8px);
     inline-size: 25%;
@@ -278,16 +283,6 @@
     inset-inline-start: $spacing-05;
   }
 
-  .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--skeleton
-    .#{$prefix}--list-box__field,
-  .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--skeleton
-    .#{$prefix}--list-box__label {
-    animation: 3000ms ease-in-out skeleton infinite;
-    background: $skeleton-element;
-  }
-
   // Slug styles
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--slug {

package/scss/components/fluid-number-input/_fluid-number-input.scss

@@ -84,7 +84,9 @@
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type {
-    box-shadow: inset 0 -1px $focus, inset -2px 0 $focus;
+    box-shadow:
+      inset 0 -1px $focus,
+      inset -2px 0 $focus;
   }
 
   .#{$prefix}--number-input--fluid

package/scss/components/fluid-select/_fluid-select.scss

@@ -21,7 +21,8 @@
     position: relative;
     background: $field;
     block-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 

package/scss/components/fluid-text-input/_fluid-text-input.scss

@@ -21,7 +21,8 @@
     position: relative;
     background: $field;
     block-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 

package/scss/components/list-box/_list-box.scss

@@ -669,7 +669,8 @@ $list-box-menu-width: convert.to-rem(300px);
     padding-inline-end: $spacing-06;
     text-decoration: none;
     text-overflow: ellipsis;
-    transition: border-color $duration-fast-01 motion(standard, productive),
+    transition:
+      border-color $duration-fast-01 motion(standard, productive),
       color $duration-fast-01 motion(standard, productive);
     white-space: nowrap;
 

package/scss/components/loading/_animation.scss

@@ -30,7 +30,8 @@
 
 @mixin stop {
   // Animate the container
-  animation: #{$prefix}--rotate-end-p1 700ms motion.$ease-out forwards,
+  animation:
+    #{$prefix}--rotate-end-p1 700ms motion.$ease-out forwards,
     #{$prefix}--rotate-end-p2 700ms motion.$ease-out 700ms forwards;
 
   // Animate the stroke

package/scss/components/modal/_modal.scss

@@ -37,13 +37,15 @@
     inset-block-start: 0;
     inset-inline-start: 0;
     opacity: 0;
-    transition: opacity $duration-moderate-02 motion(exit, expressive),
+    transition:
+      opacity $duration-moderate-02 motion(exit, expressive),
       visibility 0ms linear $duration-moderate-02;
     visibility: hidden;
 
     &.is-visible {
       opacity: 1;
-      transition: opacity $duration-moderate-02 motion(entrance, expressive),
+      transition:
+        opacity $duration-moderate-02 motion(entrance, expressive),
         visibility 0ms linear;
       visibility: inherit;
 
@@ -370,7 +372,8 @@
 
     border: 1px solid transparent;
     background-color: $layer;
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 24px 40px -24px $ai-drop-shadow;
   }
 
@@ -378,7 +381,8 @@
     .#{$prefix}--modal-container:has(.#{$prefix}--modal-footer) {
     @include ai-popover-gradient('default', 64px, 'layer');
 
-    box-shadow: inset 0 -80px 0 -16px $layer,
+    box-shadow:
+      inset 0 -80px 0 -16px $layer,
       inset 0 -160px 70px -65px $ai-inner-shadow,
       0 24px 40px -24px $ai-drop-shadow;
   }

package/scss/components/notification/_actionable-notification.scss

@@ -373,7 +373,8 @@
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:focus {
     border-color: $focus-inverse;
     background-color: $notification-action-tertiary-inverse;
-    box-shadow: inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
+    box-shadow:
+      inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
       inset 0 0 0 button-vars.$button-border-width $background-inverse;
     color: $notification-action-tertiary-inverse-text;
   }
@@ -439,7 +440,8 @@
     inset-inline-end: 0;
     max-inline-size: convert.to-rem(48px);
     min-inline-size: convert.to-rem(48px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
 
     &:focus {

package/scss/components/notification/_inline-notification.scss

@@ -277,7 +277,8 @@
     inset-inline-end: 0;
     max-inline-size: convert.to-rem(48px);
     min-inline-size: convert.to-rem(48px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
 
     &:focus {

package/scss/components/notification/_toast-notification.scss

@@ -165,7 +165,9 @@
     margin-inline-start: auto;
     min-block-size: convert.to-rem(48px);
     min-inline-size: convert.to-rem(48px);
-    transition: outline $transition-base, background-color $transition-base;
+    transition:
+      outline $transition-base,
+      background-color $transition-base;
 
     &:focus {
       outline: 2px solid $focus-inverse;

package/scss/components/number-input/_number-input.scss

@@ -60,7 +60,8 @@
     inline-size: 100%;
     min-inline-size: 9.375rem;
     padding-inline: $spacing-05 $spacing-12;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 
     &:focus {
@@ -444,10 +445,12 @@
     content: '';
     inline-size: convert.to-rem(1px);
   }
+
   .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug::before {
     display: none;
     inset-inline-start: convert.to-rem(-16px);
   }
+
   .#{$prefix}--number__control-btn::after {
     display: block;
     inset-inline-end: 0;
@@ -458,19 +461,23 @@
     display: block;
     inset-inline-end: $spacing-08;
   }
+
   .#{$prefix}--number__input-wrapper--slug
     .#{$prefix}--number__control-btn:focus::before {
     display: none;
   }
+
   .#{$prefix}--number__control-btn:hover::after,
   .#{$prefix}--number__control-btn:hover::before {
     display: none;
     inset-inline-end: 0;
   }
+
   .#{$prefix}--number__input-wrapper:has(.#{$prefix}--number__control-btn:hover)
     ~ .#{$prefix}--number__input-wrapper--slug::after {
     display: none;
   }
+
   .#{$prefix}--number__control-btn:has(.up-icon)::after,
   .#{$prefix}--number__control-btn:has(.up-icon)::before {
     display: none;
@@ -479,10 +486,12 @@
   .#{$prefix}--number__input-wrapper--slug .#{$prefix}--number__invalid {
     inset-inline-end: $spacing-13 - $spacing-05;
   }
+
   .#{$prefix}--number__input-wrapper--slug:has(.#{$prefix}--number__invalid)
     .#{$prefix}--slug::before {
     display: block;
   }
+
   .#{$prefix}--number
     .#{$prefix}--number__input-wrapper--slug
     input[data-invalid],
@@ -499,17 +508,31 @@
 
     padding-inline-end: convert.to-rem(145px);
   }
+
   // Skeleton State
+
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;
 
-    block-size: 2.5rem;
     inline-size: 100%;
 
     input[type='number'] {
       display: none;
     }
   }
+
+  .#{$prefix}--number.#{$prefix}--skeleton.#{$prefix}--number--sm {
+    block-size: $spacing-07;
+  }
+
+  .#{$prefix}--number.#{$prefix}--skeleton.#{$prefix}--number--md {
+    block-size: $spacing-08;
+  }
+
+  .#{$prefix}--number.#{$prefix}--skeleton.#{$prefix}--number--lg {
+    block-size: $spacing-09;
+  }
+
   // Windows HCM fix
 
   .#{$prefix}--number__control-btn:hover,
@@ -525,6 +548,7 @@
     @include high-contrast-mode('icon-fill');
   }
 }
+
 .#{$prefix}--number__controls:hover .#{$prefix}--number__control-btn::after {
   display: none;
 }
@@ -537,6 +561,7 @@
   .#{$prefix}--number__control-btn:hover {
   box-shadow: 0 -1px 0 $ai-border-strong inset;
 }
+
 //hide dividers on button focus
 .#{$prefix}--number__controls:focus-within
   .#{$prefix}--number__control-btn::after {