@carbon/styles 1.68.0 → 1.69.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.68.0",
+  "version": "1.69.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -67,5 +67,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "3141442e5ef367667c8f1d379a1b4a23f67992ad"
+  "gitHead": "aa67ac9b298f921c558984fa6abbb90c33e9ef93"
 }

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

@@ -45,10 +45,6 @@
       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

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');

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

@@ -261,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);
@@ -272,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%;
@@ -279,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/modal/_modal.scss

@@ -297,6 +297,9 @@
     margin: 0;
     block-size: convert.to-rem(64px);
     max-inline-size: none;
+  }
+
+  .#{$prefix}--modal-footer .#{$prefix}--btn:not(.#{$prefix}--skeleton) {
     padding-block: calc($spacing-05 - convert.to-rem(2px)) $spacing-07;
   }
 

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

@@ -445,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;
@@ -459,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;
@@ -480,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],
@@ -500,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,
@@ -526,6 +548,7 @@
     @include high-contrast-mode('icon-fill');
   }
 }
+
 .#{$prefix}--number__controls:hover .#{$prefix}--number__control-btn::after {
   display: none;
 }
@@ -538,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 {

package/scss/components/toggle/_toggle.scss

@@ -79,9 +79,16 @@
     .#{$prefix}--toggle__switch,
   .#{$prefix}--toggle:not(.#{$prefix}--toggle--disabled):active
     .#{$prefix}--toggle__switch {
-    box-shadow:
-      0 0 0 1px $focus-inset,
-      0 0 0 3px $focus;
+    &::after {
+      display: block;
+      border: 2px solid $focus;
+      border-radius: convert.to-rem(16px);
+      block-size: calc(100% + convert.to-rem(6px));
+      content: '';
+      inline-size: calc(100% + convert.to-rem(6px));
+      margin-block-start: convert.to-rem(-3px);
+      margin-inline-start: convert.to-rem(-3px);
+    }
   }
 
   .#{$prefix}--toggle__switch--checked {