@carbon/styles 1.83.0 → 1.84.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.83.0",
+  "version": "1.84.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.34.0",
+    "@carbon/colors": "^11.35.0",
     "@carbon/feature-flags": "^0.27.0",
-    "@carbon/grid": "^11.37.0",
-    "@carbon/layout": "^11.35.0",
-    "@carbon/motion": "^11.29.0",
-    "@carbon/themes": "^11.54.0",
-    "@carbon/type": "^11.41.0",
+    "@carbon/grid": "^11.38.0",
+    "@carbon/layout": "^11.36.0",
+    "@carbon/motion": "^11.30.0",
+    "@carbon/themes": "^11.55.0",
+    "@carbon/type": "^11.42.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "0.0.3-alpha.0",
     "@ibm/plex-sans": "0.0.3-alpha.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "f6debacbfe06fa5c31f70809e15762dc30096d70"
+  "gitHead": "faed0dec20f49fc7a98d7509c2c0170dff9992fc"
 }

package/scss/_config.scss

@@ -41,7 +41,7 @@ $css--default-type: true !default;
 /// @access public
 /// @type String
 /// @group config
-$font-display: 'swap' !default;
+$font-display: swap !default;
 
 /// Specify the base path for loading IBM Plex
 /// @access public

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

@@ -837,8 +837,11 @@
       display: none;
     }
 
-    //hides ff scrollbar
-    @document url-prefix() {
+    /* This is for targeting styles specific to firefox */
+    /* To hide the firefox scrollbar */
+    /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
+    /* stylelint-disable-next-line at-rule-no-vendor-prefix */
+    @-moz-document url-prefix() {
       thead,
       tbody {
         scrollbar-width: none;

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

@@ -447,4 +447,17 @@
     ) {
     @include ai-gradient;
   }
+
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__input-inner-wrapper--decorator
+    > *::before,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--ai-label::before,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--slug::before {
+    display: none;
+  }
 }

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

@@ -218,6 +218,10 @@
   }
 
   // remove ai-label divider when element is invalid and fluid
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--decorator
+    .#{$prefix}--select__inner-wrapper--decorator
+    > .#{$prefix}--ai-label::before,
   .#{$prefix}--select--fluid
     .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
     .#{$prefix}--ai-label::before,

package/scss/components/form/_form.scss

@@ -165,6 +165,20 @@ $input-label-weight: 400 !default;
     }
   }
 
+  .#{$prefix}--select--inline.#{$prefix}--select--warning
+    .#{$prefix}--select-input--inline__wrapper,
+  .#{$prefix}--select-input--inline__wrapper[data-invalid] {
+    ~ .#{$prefix}--form-requirement {
+      display: inline-flex;
+      overflow: visible;
+      margin: 0;
+      inline-size: 100%;
+      margin-block-end: 0;
+      max-block-size: 100%;
+      padding-inline-start: $spacing-03;
+    }
+  }
+
   input[data-invalid],
   .#{$prefix}--number[data-invalid] .#{$prefix}--number__input-wrapper,
   .#{$prefix}--date-picker-input__wrapper,
@@ -174,7 +188,8 @@ $input-label-weight: 400 !default;
   .#{$prefix}--text-area__wrapper[data-invalid],
   .#{$prefix}--select-input__wrapper[data-invalid],
   .#{$prefix}--time-picker[data-invalid],
-  .#{$prefix}--list-box[data-invalid] {
+  .#{$prefix}--list-box[data-invalid],
+  .#{$prefix}--select-input--inline__wrapper[data-invalid] {
     ~ .#{$prefix}--form-requirement {
       color: $text-error;
     }

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

@@ -518,6 +518,7 @@
     content: '';
     inline-size: convert.to-rem(1px);
   }
+
   .#{$prefix}--number__input-wrapper--decorator
     .#{$prefix}--number__input-inner-wrapper--decorator
     > *::before,
@@ -527,6 +528,16 @@
     inset-inline-start: convert.to-rem(-16px);
   }
 
+  .#{$prefix}--number__input-wrapper--decorator
+    .#{$prefix}--number__input-inner-wrapper--decorator
+    .#{$prefix}--ai-label--revert::before,
+  .#{$prefix}--number__input-wrapper--slug
+    .#{$prefix}--ai-label--revert::before,
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug--revert::before {
+    inset-block-start: convert.to-rem(8px);
+    inset-inline-start: convert.to-rem(-8px);
+  }
+
   .#{$prefix}--number__control-btn::after {
     display: block;
     inset-inline-end: 0;

package/scss/components/page-header/_page-header.scss

@@ -159,13 +159,6 @@
     max-inline-size: convert.to-rem(640px);
   }
 
-  .#{$prefix}--page-header__content:not(
-      :has(.#{$prefix}--page-header__content__sub-title)
-    )
-    .#{$prefix}--page-header__content__body {
-    margin-block-start: $spacing-05;
-  }
-
   [data-hidden]:not([data-fixed]) {
     display: none;
   }

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

@@ -141,8 +141,10 @@
     appearance: none;
     max-block-size: layout.size('height');
     text-indent: calc(50% - 4.5px);
-    // Override some Firefox user-agent styles
-    @document url-prefix() {
+    /* This is for targeting styles specific to firefox */
+    /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
+    /* stylelint-disable-next-line at-rule-no-vendor-prefix */
+    @-moz-document url-prefix() {
       text-indent: 0;
     }
   }

package/scss/components/select/_select.scss

@@ -73,9 +73,12 @@
       display: none;
     }
 
-    // Select text renders a little high on Firefox
-    @document url-prefix() {
-      // Removes dotted inner focus
+    //
+    /* This is for targeting styles specific to firefox */
+    /* Removes dotted inner focus */
+    /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
+    /* stylelint-disable-next-line at-rule-no-vendor-prefix */
+    @-moz-document url-prefix() {
       &:-moz-focusring,
       &::-moz-focus-inner {
         background-image: none;
@@ -167,6 +170,12 @@
     fill: $support-error;
   }
 
+  .#{$prefix}--select-input--inline__wrapper[data-invalid] {
+    .#{$prefix}--select__invalid-icon {
+      fill: $support-error;
+    }
+  }
+
   .#{$prefix}--select__invalid-icon--warning {
     fill: $support-warning;
   }
@@ -193,14 +202,6 @@
     align-items: center;
   }
 
-  .#{$prefix}--select--inline.#{$prefix}--select--invalid .#{$prefix}--label,
-  .#{$prefix}--select--inline.#{$prefix}--select--invalid
-    .#{$prefix}--form__helper-text {
-    align-self: flex-start;
-    // Offset label text margin
-    margin-block-start: convert.to-rem(13px);
-  }
-
   .#{$prefix}--select--inline .#{$prefix}--form__helper-text {
     margin-block-end: 0;
     margin-inline-start: $spacing-03;
@@ -215,19 +216,27 @@
     background-color: transparent;
     border-block-end: none;
     color: $text-primary;
-    inline-size: auto;
-    padding-inline: $spacing-03 $spacing-07;
+    inline-size: 100%;
+    padding-inline: $spacing-03 $spacing-09;
+
+    &:hover {
+      background-color: $field-hover;
+    }
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select-input:focus,
   .#{$prefix}--select--inline .#{$prefix}--select-input:focus option,
   .#{$prefix}--select--inline .#{$prefix}--select-input:focus optgroup {
     background-color: $background;
+
+    &:hover {
+      background-color: $field-hover;
+    }
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled],
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled]:hover {
-    background-color: $field;
+    background-color: $background;
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select__arrow {
@@ -241,7 +250,10 @@
 
   .#{$prefix}--select--inline.#{$prefix}--select--invalid
     .#{$prefix}--select-input
-    ~ .#{$prefix}--select__invalid-icon {
+    ~ .#{$prefix}--select__invalid-icon,
+  .#{$prefix}--select--inline.#{$prefix}--select--warning
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon--warning {
     inset-inline-end: $spacing-07;
   }
 
@@ -265,6 +277,11 @@
     fill: $icon-disabled;
   }
 
+  .#{$prefix}--select--readonly.#{$prefix}--select--inline
+    .#{$prefix}--select-input:hover {
+    background-color: transparent;
+  }
+
   // Skeleton State
   .#{$prefix}--select.#{$prefix}--skeleton {
     @include skeleton;
@@ -390,7 +407,8 @@
   .#{$prefix}--select--slug
     .#{$prefix}--select-input:has(~ .#{$prefix}--slug):not(
       :has(~ .#{$prefix}--slug--revert)
-    ) {
+    ),
+  .#{$prefix}--select-input-has--ai-label {
     @include ai-gradient;
   }
 

package/scss/components/slug/_slug.scss

@@ -75,8 +75,8 @@ $sizes: (
     z-index: 2;
   }
 
-  .#{$prefix}--ai-label .#{$prefix}--ai-label__button,
-  .#{$prefix}--slug .#{$prefix}--slug__button {
+  .#{$prefix}--ai-label__button,
+  .#{$prefix}--slug__button {
     position: relative;
     display: flex;
     align-items: center;

package/scss/components/tabs/_tabs.scss

@@ -502,7 +502,6 @@
     &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--vertical)
       .#{$prefix}--tabs__nav-link {
       border-block-end: 0;
-      padding-inline: layout.density('padding-inline');
     }
 
     &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall)

package/scss/components/text-area/_text-area.scss

@@ -214,6 +214,12 @@
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--text-area--invalid
+    ~ .#{$prefix}--text-area__inner-wrapper--decorator
+    > .#{$prefix}--ai-label.#{$prefix}--ai-label--revert,
+  .#{$prefix}--text-area--warn
+    ~ .#{$prefix}--text-area__inner-wrapper--decorator
+    > .#{$prefix}--ai-label.#{$prefix}--ai-label--revert,
   .#{$prefix}--text-area--invalid
     ~ .#{$prefix}--ai-label.#{$prefix}--ai-label--revert,
   .#{$prefix}--text-area--warn

package/scss/components/treeview/_treeview.scss

@@ -57,7 +57,10 @@
   .#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label {
     @include focus-outline('outline');
   }
-
+  .#{$prefix}--tree-node.#{$prefix}--tree-parent-node
+    > .#{$prefix}--tree-node__label {
+    inline-size: auto;
+  }
   .#{$prefix}--tree-node--disabled:focus > .#{$prefix}--tree-node__label {
     outline: none;
   }
@@ -110,10 +113,14 @@
   .#{$prefix}--tree-node__label {
     @include type-style('body-compact-01');
 
+    position: relative;
     display: flex;
+    box-sizing: border-box;
     flex: 1;
     align-items: center;
+    inline-size: 100%;
     min-block-size: convert.to-rem(32px);
+    padding-inline-end: 1rem;
 
     &:hover {
       background-color: $layer-hover-01;
@@ -154,6 +161,7 @@
   .#{$prefix}--tree-node__label__details {
     display: flex;
     align-items: center;
+    min-inline-size: 0;
   }
 
   .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-parent-node__toggle {
@@ -247,4 +255,51 @@
   .#{$prefix}--tree--xs .#{$prefix}--tree-parent-node__toggle {
     margin-block-start: 0;
   }
+  .#{$prefix}--tree-node__label__text {
+    @include type-style('body-compact-01');
+
+    display: block;
+    overflow: hidden;
+    line-height: 1.2;
+    padding-inline-start: convert.to-rem(4px);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--tree-node__label .#{$prefix}--icon-tooltip {
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--tree-node__label
+    .#{$prefix}--icon-tooltip
+    .#{$prefix}--btn--icon-only {
+    padding: 0;
+    border: none;
+    background: transparent;
+    block-size: auto;
+    color: inherit;
+    inline-size: 100%;
+    min-block-size: unset;
+    text-align: start;
+  }
+
+  .#{$prefix}--tree-node__label
+    .#{$prefix}--icon-tooltip
+    .#{$prefix}--btn--icon-only
+    .#{$prefix}--tree-node__label__text {
+    color: inherit;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--tree-node__label .#{$prefix}--tooltip-content {
+    padding: 1rem;
+  }
+
+  .#{$prefix}--tree-node__label .#{$prefix}--popover-container {
+    inline-size: 100%;
+  }
+  .#{$prefix}--tooltip-trigger__wrapper .#{$prefix}--btn--ghost:focus {
+    box-shadow: none;
+    outline: 2px solid $focus;
+  }
 }

package/scss/fonts/unicode/_index.scss

@@ -12,104 +12,104 @@
 /// @type {List}
 $ranges: (
   Cyrillic: (
-    'U+0400-045F',
-    'U+0472-0473',
-    'U+0490-049D',
-    'U+04A0-04A5',
-    'U+04AA-04AB',
-    'U+04AE-04B3',
-    'U+04B6-04BB',
-    'U+04C0-04C2',
-    'U+04CF-04D9',
-    'U+04DC-04DF',
-    'U+04E2-04E9',
-    'U+04EE-04F5',
-    'U+04F8-04F9',
+    U+0400-045F,
+    U+0472-0473,
+    U+0490-049D,
+    U+04A0-04A5,
+    U+04AA-04AB,
+    U+04AE-04B3,
+    U+04B6-04BB,
+    U+04C0-04C2,
+    U+04CF-04D9,
+    U+04DC-04DF,
+    U+04E2-04E9,
+    U+04EE-04F5,
+    U+04F8-04F9,
   ),
   Greek: (
-    'U+0384-038A',
-    'U+038C',
-    'U+038E-03A1',
-    'U+03A3-03CE',
+    U+0384-038A,
+    U+038C,
+    U+038E-03A1,
+    U+03A3-03CE,
   ),
   Latin1: (
-    'U+0000',
-    'U+000D',
-    'U+0020-007E',
-    'U+00A0-00A3',
-    'U+00A4-00FF',
-    'U+0131',
-    'U+0152-0153',
-    'U+02C6',
-    'U+02DA',
-    'U+02DC',
-    'U+2013-2014',
-    'U+2018-201A',
-    'U+201C-201E',
-    'U+2020-2022',
-    'U+2026',
-    'U+2030',
-    'U+2039-203A',
-    'U+2044',
-    'U+2074',
-    'U+20AC',
-    'U+2122',
-    'U+2212',
-    'U+FB01-FB02',
+    U+0000,
+    U+000D,
+    U+0020-007E,
+    U+00A0-00A3,
+    U+00A4-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+2013-2014,
+    U+2018-201A,
+    U+201C-201E,
+    U+2020-2022,
+    U+2026,
+    U+2030,
+    U+2039-203A,
+    U+2044,
+    U+2074,
+    U+20AC,
+    U+2122,
+    U+2212,
+    U+FB01-FB02,
   ),
   Latin2: (
-    'U+0100-024F',
-    'U+0259',
-    'U+1E00-1EFF',
-    'U+20A0-20AB',
-    'U+20AD-20CF',
-    'U+2C60-2C7F',
-    'U+A720-A7FF',
-    'U+FB01-FB02',
+    U+0100-024F,
+    U+0259,
+    U+1E00-1EFF,
+    U+20A0-20AB,
+    U+20AD-20CF,
+    U+2C60-2C7F,
+    U+A720-A7FF,
+    U+FB01-FB02,
   ),
   Latin3: (
-    'U+0102-0103',
-    'U+1EA0-1EF9',
-    'U+20AB',
+    U+0102-0103,
+    U+1EA0-1EF9,
+    U+20AB,
   ),
   Pi: (
-    'U+0E3F',
-    'U+2032-2033',
-    'U+2070',
-    'U+2075-2079',
-    'U+2080-2081',
-    'U+2083',
-    'U+2085-2089',
-    'U+2113',
-    'U+2116',
-    'U+2126',
-    'U+212E',
-    'U+2150-2151',
-    'U+2153-215E',
-    'U+2190-2199',
-    'U+21A9-21AA',
-    'U+21B0-21B3',
-    'U+21B6-21B7',
-    'U+21BA-21BB',
-    'U+21C4',
-    'U+21C6',
-    'U+2202',
-    'U+2206',
-    'U+220F',
-    'U+2211',
-    'U+221A',
-    'U+221E',
-    'U+222B',
-    'U+2248',
-    'U+2260',
-    'U+2264-2265',
-    'U+25CA',
-    'U+2713',
-    'U+274C',
-    'U+2B0E-2B11',
-    'U+EBE1-EBE7',
-    'U+ECE0',
-    'U+EFCC',
+    U+0E3F,
+    U+2032-2033,
+    U+2070,
+    U+2075-2079,
+    U+2080-2081,
+    U+2083,
+    U+2085-2089,
+    U+2113,
+    U+2116,
+    U+2126,
+    U+212E,
+    U+2150-2151,
+    U+2153-215E,
+    U+2190-2199,
+    U+21A9-21AA,
+    U+21B0-21B3,
+    U+21B6-21B7,
+    U+21BA-21BB,
+    U+21C4,
+    U+21C6,
+    U+2202,
+    U+2206,
+    U+220F,
+    U+2211,
+    U+221A,
+    U+221E,
+    U+222B,
+    U+2248,
+    U+2260,
+    U+2264-2265,
+    U+25CA,
+    U+2713,
+    U+274C,
+    U+2B0E-2B11,
+    U+EBE1-EBE7,
+    U+ECE0,
+    U+EFCC,
   ),
 );