@carbon/styles 1.67.0 → 1.68.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.67.0",
+  "version": "1.68.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,18 +40,18 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.27.0",
-    "@carbon/feature-flags": "^0.23.0",
-    "@carbon/grid": "^11.28.0",
-    "@carbon/layout": "^11.27.0",
-    "@carbon/motion": "^11.23.0",
-    "@carbon/themes": "^11.42.0",
-    "@carbon/type": "^11.32.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": "a4e466817cb1f68711d5691468dd12a6756c275e"
+  "gitHead": "3141442e5ef367667c8f1d379a1b4a23f67992ad"
 }

package/scss/__tests__/zone-test.js

@@ -63,7 +63,7 @@ describe('zone', () => {
         ([token, value]) => {
           return rule.declarations.find((declaration) => {
             return (
-              declaration.property.includes(token) &&
+              declaration?.property?.includes(token) &&
               declaration.value === value
             );
           });

package/scss/_reset.scss

@@ -150,8 +150,6 @@
   blockquote::after,
   q::before,
   q::after {
-    content: '';
-    // stylelint-disable-next-line declaration-block-no-duplicate-properties
     content: none;
   }
 

package/scss/_zone.scss

@@ -40,7 +40,7 @@ $-components: (
     color: custom-property.get-var('text-primary');
 
     @each $key, $value in $theme {
-      @if type-of($value) == color {
+      @if meta.type-of($value) == color {
         @include custom-property.declaration($key, $value);
       }
     }

package/scss/components/accordion/_accordion.scss

@@ -50,7 +50,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
     @include layout.use('density', $default: 'normal');
 
     @include component-reset.reset;
-    /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-duplicate-selectors */
+
     & {
       inline-size: 100%;
       list-style: none;
@@ -86,7 +86,6 @@ $content-padding: 0 0 0 $spacing-05 !default;
     transition: background-color motion(standard, productive) $duration-fast-02;
     @include button-reset.reset;
 
-    /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-duplicate-selectors */
     & {
       position: relative;
       display: flex;
@@ -110,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;
     }
@@ -150,7 +152,6 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
     transition: all $duration-fast-02 motion(standard, productive);
 
-    /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-duplicate-selectors */
     & {
       flex: 0 0 1rem;
       block-size: 1rem;
@@ -165,7 +166,6 @@ $content-padding: 0 0 0 $spacing-05 !default;
   .#{$prefix}--accordion__title {
     @include type-style('body-01');
 
-    /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-duplicate-selectors */
     & {
       z-index: 1;
       inline-size: 100%;
@@ -176,11 +176,13 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
   .#{$prefix}--accordion__wrapper {
     // Properties for when the accordion is closed
+    display: none;
     overflow: hidden;
     padding: 0;
     max-block-size: 0;
     opacity: 0;
-    transition: all $duration-fast-02 motion(entrance, productive);
+    transition: all $duration-fast-02 motion(entrance, productive)
+      allow-discrete;
     writing-mode: horizontal-tb;
   }
 
@@ -231,6 +233,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
     > .#{$prefix}--accordion__wrapper {
       // Properties for when the accordion is open
+      display: block;
       overflow: visible;
       max-block-size: fit-content;
       opacity: 1;
@@ -245,6 +248,21 @@ $content-padding: 0 0 0 $spacing-05 !default;
       }
     }
   }
+  /** starting style also not supported widely
+    * https://caniuse.com/mdn-css_at-rules_starting-style
+    */
+  /* Needs to be after the previous accordion__item--active rule
+     to take effect, as the specificity is the same */
+
+  @starting-style {
+    .#{$prefix}--accordion__item--active {
+      > .#{$prefix}--accordion__wrapper {
+        padding: 0;
+        max-block-size: 0;
+        opacity: 0;
+      }
+    }
+  }
 
   // flush
   .#{$prefix}--accordion--flush .#{$prefix}--accordion__item {
@@ -383,15 +401,3 @@ $content-padding: 0 0 0 $spacing-05 !default;
     padding-inline-start: 0;
   }
 }
-
-@mixin -content-visible {
-  block-size: 100%;
-  opacity: 1;
-  visibility: inherit;
-}
-
-@mixin -content-hidden {
-  block-size: 0;
-  opacity: 0;
-  visibility: hidden;
-}

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -163,6 +163,6 @@
   .#{$prefix}--breadcrumb
     .#{$prefix}--overflow-menu.#{$prefix}--btn--icon-only {
     min-block-size: 1.125rem;
-    padding-inline: 0 0;
+    padding-inline: 0;
   }
 }

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)
     );
@@ -413,7 +414,7 @@
   }
 
   // Windows HCM fix
-  // stylelint-disable-next-line no-duplicate-selectors
+
   .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
     .#{$prefix}--btn__icon
     path:not([data-icon-path]):not([fill='none']),

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/code-snippet/_code-snippet.scss

@@ -555,7 +555,7 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--snippet__icon {
     @include high-contrast-mode('icon-fill');
   }
@@ -568,5 +568,4 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--multi {
     @include high-contrast-mode('outline');
   }
-  /* stylelint-enable */
 }

package/scss/components/contained-list/_contained-list.scss

@@ -198,7 +198,7 @@
     block-size: 1px;
     content: '';
     inset-block-end: 0;
-    inset-inline: 0 0;
+    inset-inline: 0;
   }
 
   .#{$prefix}--contained-list--inset-rulers
@@ -248,7 +248,7 @@
     display: flex;
     justify-content: flex-end;
     inset-block-start: 0;
-    inset-inline: 0 0;
+    inset-inline: 0;
     pointer-events: none;
   }
 

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 {
@@ -231,7 +233,7 @@
   }
 
   // Windows HCM fix
-  // stylelint-disable-next-line no-duplicate-selectors
+
   .#{$prefix}--content-switcher-btn:focus {
     @include high-contrast-mode('focus');
   }

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
@@ -319,7 +329,7 @@
   .#{$prefix}--data-table--xs td.#{$prefix}--table-column-menu,
   .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu {
     block-size: convert.to-rem(24px);
-    padding-block: 0 0;
+    padding-block: 0;
   }
 
   .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu {
@@ -583,7 +593,7 @@
       .#{$prefix}--data-table--top-aligned-header
     )
     th.#{$prefix}--table-column-checkbox {
-    padding-block: 0 0;
+    padding-block: 0;
   }
 
   .#{$prefix}--data-table.#{$prefix}--data-table--xs
@@ -827,7 +837,7 @@
     }
 
     //hides ff scrollbar
-    @-moz-document url-prefix() {
+    @document url-prefix() {
       thead,
       tbody {
         scrollbar-width: none;
@@ -1076,7 +1086,7 @@
     td.#{$prefix}--table-cell--column-slug,
 
   // Windows HCM fix
-  // stylelint-disable-next-line no-duplicate-selectors
+  
   .#{$prefix}--data-table-content {
     @include high-contrast-mode('outline');
   }

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);
   }
 
@@ -396,11 +399,12 @@
     background-color: $background-brand;
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
     inset-block-end: 0;
-    inset-inline: 0 0;
+    inset-inline: 0;
     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;
@@ -646,7 +650,7 @@
   .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary {
     block-size: convert.to-rem(32px);
     min-block-size: auto;
-    padding-block: 0.375rem 0.375rem;
+    padding-block: 0.375rem;
   }
 
   .#{$prefix}--table-toolbar--sm

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

@@ -49,8 +49,9 @@
     td {
     border: 0;
     background-color: $layer-hover;
-    padding-block: 0 0;
-    transition: padding $duration-moderate-01 motion(standard, productive),
+    padding-block: 0;
+    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);
   }
@@ -484,7 +496,6 @@
     @include high-contrast-mode('focus');
   }
 
-  // stylelint-disable-next-line no-duplicate-selectors
   .#{$prefix}--table-expand__svg {
     @include high-contrast-mode('icon-fill');
   }

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);
   }
 
@@ -106,7 +107,7 @@
     th.#{$prefix}--table-sort__header
     .#{$prefix}--table-sort__flex
     .#{$prefix}--table-header-label {
-    padding-block: 0 0;
+    padding-block: 0;
   }
 
   .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--sm

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

@@ -236,7 +236,7 @@
   }
 
   // Windows HCM fix
-  // stylelint-disable-next-line no-duplicate-selectors
+
   .#{$prefix}--date-picker__icon {
     @include high-contrast-mode('icon-fill');
   }

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,
@@ -83,7 +85,7 @@
     /*   Before-open state  */
     /* Needs to be after the previous dialog[open] rule to take effect,
     as the specificity is the same */
-    /* stylelint-disable-next-line scss/at-rule-no-unknown */
+
     @starting-style {
       &[open] {
         opacity: 0;
@@ -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) {
@@ -140,7 +143,7 @@
   */
   /* This starting-style rule cannot be nested inside the above selector
 because the nesting selector cannot represent pseudo-elements. */
-  /* stylelint-disable-next-line scss/at-rule-no-unknown */
+
   @starting-style {
     .#{$prefix}--dialog[open]::backdrop {
       opacity: 0;

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;
@@ -461,7 +462,7 @@
   }
 
   // Windows HCM fix
-  // stylelint-disable-next-line no-duplicate-selectors
+
   .#{$prefix}--dropdown .#{$prefix}--list-box__field {
     @include high-contrast-mode('outline');
   }

package/scss/components/file-uploader/_file-uploader.scss

@@ -189,7 +189,7 @@
       .#{$prefix}--file-filename-tooltip {
         inline-size: -webkit-fill-available;
         padding-inline-start: $spacing-05;
-        @-moz-document url-prefix() {
+        @document url-prefix() {
           inline-size: -moz-available;
         }
       }
@@ -197,7 +197,7 @@
 
     .#{$prefix}--file-filename-tooltip {
       inline-size: -webkit-fill-available;
-      @-moz-document url-prefix() {
+      @document url-prefix() {
         inline-size: -moz-available;
       }
     }
@@ -217,7 +217,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
 
-      @-moz-document url-prefix() {
+      @document url-prefix() {
         inline-size: -moz-available;
       }
     }
@@ -401,7 +401,7 @@
   }
 
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--file__selected-file {
     @include high-contrast-mode('outline');
   }
@@ -409,5 +409,4 @@
   .#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
     @include high-contrast-mode('icon-fill');
   }
-  /* stylelint-enable */
 }

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