@carbon/styles 1.68.0-rc.0 → 1.68.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.68.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": "3141442e5ef367667c8f1d379a1b4a23f67992ad"
 }

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,7 +40,8 @@
     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);
   }
 
@@ -79,7 +80,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 +383,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 +403,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

@@ -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);
   }
 

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 {

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -40,7 +40,8 @@
     cursor: pointer;
     inline-size: convert.to-rem(40px);
     min-block-size: convert.to-rem(40px);
-    transition: outline $duration-fast-02 motion(entrance, productive),
+    transition:
+      outline $duration-fast-02 motion(entrance, productive),
       background-color $duration-fast-02 motion(entrance, productive);
 
     &:focus {
@@ -272,7 +273,8 @@
     inline-size: 100%;
     max-inline-size: 11.25rem;
     text-align: start;
-    transition: outline $duration-fast-02 motion(entrance, productive),
+    transition:
+      outline $duration-fast-02 motion(entrance, productive),
       background-color $duration-fast-02 motion(entrance, productive),
       color $duration-fast-02 motion(entrance, productive);
 

package/scss/components/pagination/_pagination.scss

@@ -220,7 +220,8 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     min-block-size: convert.to-rem(32px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
   }
 

package/scss/components/pagination/_unstable_pagination.scss

@@ -85,7 +85,8 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     min-block-size: convert.to-rem(32px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
   }
 

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -88,7 +88,8 @@
     outline: 0;
     text-align: center;
     text-decoration: none;
-    transition: background-color $duration-fast-02 motion(standard, productive),
+    transition:
+      background-color $duration-fast-02 motion(standard, productive),
       color $duration-fast-02 motion(standard, productive);
     user-select: none;
 

package/scss/components/popover/_popover.scss

@@ -104,11 +104,10 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Drop shadow modifier
-  .#{$prefix}--popover--drop-shadow .#{$prefix}--popover {
-    @include custom-property.declaration(
-      'popover-drop-shadow',
-      drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))
-    );
+  .#{$prefix}--popover--drop-shadow
+    .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
+    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
   }
 
   // Caret tip modifier

package/scss/components/progress-indicator/_progress-indicator.scss

@@ -91,7 +91,8 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     line-height: 1.45;
     max-inline-size: convert.to-rem(88px);
     text-overflow: ellipsis;
-    transition: box-shadow $duration-fast-02 motion(standard, productive),
+    transition:
+      box-shadow $duration-fast-02 motion(standard, productive),
       color $duration-fast-02 motion(standard, productive);
     white-space: nowrap;
 

package/scss/components/search/_search.scss

@@ -54,7 +54,8 @@
 
     inline-size: 100%;
     text-overflow: ellipsis;
-    transition: background-color $duration-fast-02 motion(standard, productive),
+    transition:
+      background-color $duration-fast-02 motion(standard, productive),
       outline $duration-fast-02 motion(standard, productive);
 
     &:focus {
@@ -199,7 +200,8 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     opacity: 1;
-    transition: opacity $duration-fast-02 motion(standard, productive),
+    transition:
+      opacity $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive),
       outline $duration-fast-02 motion(standard, productive),
       border $duration-fast-02 motion(standard, productive);
@@ -324,7 +326,8 @@
   .#{$prefix}--search--expandable .#{$prefix}--search-input {
     padding: 0;
     inline-size: 0;
-    transition: padding $duration-fast-01 motion(standard, productive),
+    transition:
+      padding $duration-fast-01 motion(standard, productive),
       width 0s linear $duration-fast-01;
 
     &::placeholder {

package/scss/components/slider/_slider.scss

@@ -187,10 +187,13 @@
     position: absolute;
     border-radius: 50%;
     background: $layer-selected-inverse;
-    box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
+    box-shadow:
+      inset 0 0 0 1px transparent,
+      inset 0 0 0 2px transparent;
     inset: 0;
     outline: none;
-    transition: transform $duration-fast-02 motion(standard, productive),
+    transition:
+      transform $duration-fast-02 motion(standard, productive),
       background $duration-fast-02 motion(standard, productive),
       box-shadow $duration-fast-02 motion(standard, productive);
 
@@ -201,7 +204,9 @@
 
     &:focus {
       background-color: $interactive;
-      box-shadow: inset 0 0 0 2px $interactive, inset 0 0 0 3px $layer;
+      box-shadow:
+        inset 0 0 0 2px $interactive,
+        inset 0 0 0 3px $layer;
       // 20px / 14px = 1.4286
       transform: scale(1.4286);
     }