@carbon/styles 1.67.0 → 1.68.0-rc.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-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "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-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",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/telemetry-js": "^1.5.0"
   },
@@ -67,5 +67,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "a4e466817cb1f68711d5691468dd12a6756c275e"
+  "gitHead": "e48f5e6815bd93e518e8da73c7555590b85cda22"
 }

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;
@@ -150,7 +149,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 +163,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 +173,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 +230,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 +245,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 +398,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

@@ -413,7 +413,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/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

@@ -231,7 +231,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

@@ -319,7 +319,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 +583,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 +827,7 @@
     }
 
     //hides ff scrollbar
-    @-moz-document url-prefix() {
+    @document url-prefix() {
       thead,
       tbody {
         scrollbar-width: none;
@@ -1076,7 +1076,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

@@ -396,7 +396,7 @@
     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);
@@ -646,7 +646,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,7 +49,7 @@
     td {
     border: 0;
     background-color: $layer-hover;
-    padding-block: 0 0;
+    padding-block: 0;
     transition: padding $duration-moderate-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
   }
@@ -484,7 +484,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

@@ -106,7 +106,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/dialog/_dialog.scss

@@ -83,7 +83,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;
@@ -140,7 +140,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

@@ -461,7 +461,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/list-box/_list-box.scss

@@ -515,7 +515,7 @@ $list-box-menu-width: convert.to-rem(300px);
     display: none;
     background-color: $layer;
     inline-size: $list-box-width;
-    inset-inline: 0 0;
+    inset-inline: 0;
     overflow-y: auto;
     transition: max-height $duration-fast-02 motion(standard, productive);
 

package/scss/components/modal/_modal.scss

@@ -416,7 +416,7 @@
   }
 
   // Windows HCM fix
-  /* stylelint-disable no-duplicate-selectors */
+
   .#{$prefix}--modal-close__icon {
     @include high-contrast-mode('icon-fill');
   }
@@ -424,5 +424,4 @@
   .#{$prefix}--modal-close:focus {
     @include high-contrast-mode('focus');
   }
-  /* stylelint-enable no-duplicate-selectors */
 }

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

@@ -475,7 +475,7 @@
   }
 
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--actionable-notification {
     @include high-contrast-mode('outline');
   }
@@ -491,5 +491,4 @@
     .#{$prefix}--actionable-notification__close-icon {
     @include high-contrast-mode('icon-fill');
   }
-  /* stylelint-enable */
 }

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

@@ -306,7 +306,7 @@
   }
 
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--inline-notification {
     @include high-contrast-mode('outline');
   }
@@ -323,5 +323,4 @@
     .#{$prefix}--inline-notification__close-icon {
     @include high-contrast-mode('icon-fill');
   }
-  /* stylelint-enable */
 }

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

@@ -222,7 +222,7 @@
   }
 
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--toast-notification {
     @include high-contrast-mode('outline');
   }
@@ -235,5 +235,4 @@
   .#{$prefix}--toast-notification .#{$prefix}--toast-notification__icon {
     @include high-contrast-mode('icon-fill');
   }
-  /* stylelint-enable */
 }

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

@@ -511,7 +511,7 @@
     }
   }
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--number__control-btn:hover,
   .#{$prefix}--number__control-btn:focus {
     @include high-contrast-mode('focus');
@@ -524,7 +524,6 @@
   .#{$prefix}--number__control-btn svg {
     @include high-contrast-mode('icon-fill');
   }
-  /* stylelint-enable */
 }
 .#{$prefix}--number__controls:hover .#{$prefix}--number__control-btn::after {
   display: none;

package/scss/components/pagination/_pagination.scss

@@ -283,7 +283,7 @@
   }
 
   // Windows HCM fix
-  // stylelint-disable-next-line no-duplicate-selectors
+
   .#{$prefix}--pagination__button,
   .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
     @include high-contrast-mode('outline');

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

@@ -142,7 +142,7 @@
     max-block-size: layout.size('height');
     text-indent: calc(50% - 4.5px);
     // Override some Firefox user-agent styles
-    @-moz-document url-prefix() {
+    @document url-prefix() {
       text-indent: 0;
     }
   }

package/scss/components/popover/_popover.scss

@@ -62,7 +62,6 @@ $popover-text-color: custom-property.get-var(
 // The distance between the popover container and the triggering element
 // Specify the distance between the popover and the trigger. This value must
 // have a unit otherwise the `calc()` expression will not work
-// stylelint-disable-next-line length-zero-no-unit
 $popover-offset: custom-property.get-var('popover-offset', 0rem);
 
 // Customize the dimensions of the caret by specifying its width or height.
@@ -297,7 +296,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover-content::before {
     block-size: $popover-offset;
     inset-block-start: 0;
-    inset-inline: 0 0;
+    inset-inline: 0;
     transform: translateY(-100%);
   }
 
@@ -460,7 +459,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover-content::before {
     block-size: $popover-offset;
     inset-block-end: 0;
-    inset-inline: 0 0;
+    inset-inline: 0;
     transform: translateY(100%);
   }
 
@@ -616,7 +615,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content::before {
     inline-size: $popover-offset;
-    inset-block: 0 0;
+    inset-block: 0;
     inset-inline-start: 0;
     transform: translateX(-100%);
   }
@@ -783,7 +782,7 @@ $popover-caret-height: custom-property.get-var(
     > .#{$prefix}--popover
     > .#{$prefix}--popover-content::before {
     inline-size: $popover-offset;
-    inset-block: 0 0;
+    inset-block: 0;
     inset-inline-end: 0;
     transform: translateX(100%);
   }

package/scss/components/select/_select.scss

@@ -75,7 +75,7 @@
     }
 
     // Select text renders a little high on Firefox
-    @-moz-document url-prefix() {
+    @document url-prefix() {
       // Removes dotted inner focus
       &:-moz-focusring,
       &::-moz-focus-inner {
@@ -344,7 +344,7 @@
   }
 
   // Windows HCM fix
-  // stylelint-disable-next-line no-duplicate-selectors
+
   .#{$prefix}--select__arrow {
     @include high-contrast-mode('icon-fill');
   }

package/scss/components/slider/_slider.scss

@@ -372,19 +372,36 @@
 
     &:hover {
       cursor: not-allowed;
-      transform: translate(-50%, -50%);
+      transform: none;
     }
 
     &:focus {
       background-color: $border-disabled;
       box-shadow: none;
       outline: none;
-      transform: translate(-50%, -50%);
+      transform: none;
     }
 
     &:active {
       background: $border-disabled;
-      transform: translate(-50%, -50%);
+      box-shadow: none;
+      transform: none;
+    }
+  }
+
+  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb--lower,
+  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb--upper {
+    background-color: transparent;
+
+    &:active,
+    &:hover,
+    &:focus {
+      background-color: transparent;
+      transform: none;
+    }
+
+    .#{$prefix}--slider__thumb-icon {
+      fill: $border-disabled;
     }
   }
 
@@ -479,7 +496,7 @@
   }
 
   // Windows HCM fix
-  /* stylelint-disable */
+
   .#{$prefix}--slider__thumb {
     @include high-contrast-mode('outline');
   }
@@ -489,5 +506,4 @@
   .#{$prefix}--slider__track {
     @include high-contrast-mode('outline');
   }
-  /* stylelint-enable */
 }