@carbon/styles 1.62.0-rc.0 → 1.63.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.62.0-rc.0",
+  "version": "1.63.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,14 +40,21 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.24.0-rc.0",
-    "@carbon/feature-flags": "^0.21.0-rc.0",
-    "@carbon/grid": "^11.25.0-rc.0",
-    "@carbon/layout": "^11.24.0-rc.0",
-    "@carbon/motion": "^11.20.0-rc.0",
-    "@carbon/themes": "^11.38.0-rc.0",
-    "@carbon/type": "^11.29.0-rc.0",
-    "@ibm/plex": "6.0.0-next.6",
+    "@carbon/colors": "^11.24.0",
+    "@carbon/feature-flags": "^0.21.0",
+    "@carbon/grid": "^11.25.0",
+    "@carbon/layout": "^11.24.0",
+    "@carbon/motion": "^11.20.0",
+    "@carbon/themes": "^11.38.0",
+    "@carbon/type": "^11.29.0",
+    "@ibm/plex-mono": "0.0.3-alpha.0",
+    "@ibm/plex-sans": "0.0.3-alpha.0",
+    "@ibm/plex-sans-arabic": "0.0.3-alpha.0",
+    "@ibm/plex-sans-devanagari": "0.0.3-alpha.0",
+    "@ibm/plex-sans-hebrew": "0.0.3-alpha.0",
+    "@ibm/plex-sans-thai": "0.0.3-alpha.0",
+    "@ibm/plex-sans-thai-looped": "0.0.3-alpha.0",
+    "@ibm/plex-serif": "0.0.3-alpha.0",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
@@ -56,7 +63,6 @@
     "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
     "cssnano": "^7.0.0",
-    "lodash.isequal": "^4.5.0",
     "postcss": "^8.4.14",
     "postcss-flexbugs-fixes": "^5.0.2",
     "rimraf": "^5.0.0",
@@ -68,5 +74,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "326ac312c2b669937ede1c0c68c0e3a6d9c34135"
+  "gitHead": "51d2a214ec7d870b4f807ed08a05031d091bfd46"
 }

package/scss/__tests__/zone-test.js

@@ -11,7 +11,7 @@
 
 const { SassRenderer } = require('@carbon/test-utils/scss');
 const css = require('css');
-const isEqual = require('lodash.isequal');
+const isEqual = require('react-fast-compare');
 
 const { render } = SassRenderer.create(__dirname);
 

package/scss/_reset.scss

@@ -99,6 +99,7 @@
     border: 0;
     margin: 0;
     font: inherit;
+    font-feature-settings: 'liga' 1;
     font-size: 100%;
     vertical-align: baseline;
   }

package/scss/components/_index.scss

@@ -6,6 +6,7 @@
 //
 
 @use 'accordion';
+@use 'ai-label';
 @use 'aspect-ratio';
 @use 'breadcrumb';
 @use 'button';

package/scss/components/accordion/_accordion.scss

@@ -217,7 +217,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
   .#{$prefix}--accordion__item--active {
     overflow: visible;
 
-    .#{$prefix}--accordion__wrapper {
+    > .#{$prefix}--accordion__wrapper {
       // Properties for when the accordion is open
       overflow: visible;
       max-block-size: fit-content;
@@ -226,9 +226,11 @@ $content-padding: 0 0 0 $spacing-05 !default;
       padding-block-end: $spacing-06;
     }
 
-    .#{$prefix}--accordion__arrow {
-      fill: $icon-primary;
-      transform: rotate(-90deg) #{'/*rtl:ignore*/'};
+    > .#{$prefix}--accordion__heading {
+      > .#{$prefix}--accordion__arrow {
+        fill: $icon-primary;
+        transform: rotate(-90deg) #{'/*rtl:ignore*/'};
+      }
     }
   }
 

package/scss/components/ai-label/_ai-label.scss

@@ -0,0 +1,18 @@
+//
+// Copyright IBM Corp. 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//-----------------------------
+// AILabel
+//-----------------------------
+@use '../slug';
+
+/// AILabel styles
+/// @access public
+/// @group AI
+@mixin ai-label {
+  // Style overrides can be added here as needed
+}

package/scss/components/ai-label/_index.scss

@@ -0,0 +1,4 @@
+@forward 'ai-label';
+@use 'ai-label';
+
+@include ai-label.ai-label;

package/scss/components/combo-box/_combo-box.scss

@@ -37,7 +37,9 @@
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--list-box--expanded
+  .#{$prefix}--combo-box.#{$prefix}--list-box--expanded:has(
+      input[aria-activedescendant]:not([aria-activedescendant=''])
+    )
     .#{$prefix}--combo-box--input--focus.#{$prefix}--text-input {
     outline-offset: convert.to-rem(-1px);
     outline-width: convert.to-rem(1px);

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

@@ -1012,7 +1012,7 @@
     background-attachment: fixed;
   }
 
-  tr.#{$prefix}--parent-row.cds--data-table--selected.#{$prefix}--data-table--slug-row,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row,
   .#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row,
   tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row
     + .#{$prefix}--expandable-row {
@@ -1031,7 +1031,7 @@
     border-block-end-color: $border-subtle;
   }
 
-  tr.#{$prefix}--expandable-row.cds--data-table--selected.#{$prefix}--data-table--slug-row[data-parent-row]
+  tr.#{$prefix}--expandable-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row[data-parent-row]
     > td:not(.#{$prefix}--table-expand):not(
       .#{$prefix}--table-column-checkbox
     ):not(.#{$prefix}--table-column-slug) {

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

@@ -464,7 +464,7 @@
   .#{$prefix}--parent-row .#{$prefix}--table-column-slug,
   .#{$prefix}--parent-row
     .#{$prefix}--table-column-slug
-    + td.cds--table-expand[data-previous-value='collapsed'] {
+    + td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
     box-shadow: none;
   }
 
@@ -472,7 +472,7 @@
     .#{$prefix}--table-column-slug,
   .#{$prefix}--parent-row.#{$prefix}--expandable-row
     .#{$prefix}--table-column-slug
-    + td.cds--table-expand[data-previous-value='collapsed'] {
+    + td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
     border-block-end: 1px solid transparent;
   }
 

package/scss/components/dropdown/_dropdown.scss

@@ -93,7 +93,7 @@
     border-block-end-color: $border-subtle;
   }
 
-  .#{$prefix}--dropdown--open .cds--list-box__field {
+  .#{$prefix}--dropdown--open .#{$prefix}--list-box__field {
     outline: none;
   }
 

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

@@ -37,10 +37,13 @@
     white-space: nowrap;
   }
 
-  .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--combo-box
-    .#{$prefix}--text-input:focus {
-    outline: none;
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus
+    .#{$prefix}--combo-box.#{$prefix}--list-box--expanded:has(
+      input[aria-activedescendant]:not([aria-activedescendant=''])
+    )
+    .#{$prefix}--combo-box--input--focus.#{$prefix}--text-input {
+    outline-offset: convert.to-rem(-1px);
+    outline-width: convert.to-rem(1px);
   }
 
   .#{$prefix}--list-box__wrapper--fluid

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -408,14 +408,18 @@
 
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper--slug:not(
-      :has(~ .#{$prefix}--slug--revert)
+      :has(.#{$prefix}--slug--revert)
     ) {
     @include ai-gradient;
   }
 
   .#{$prefix}--date-picker--fluid
-    .#{$prefix}--date-picker-input__wrapper--slug
-    .#{$prefix}--date-picker__input:not(.cds--date-picker__input--invalid) {
+    .#{$prefix}--date-picker-input__wrapper--slug:not(
+      :has(.#{$prefix}--slug--revert)
+    )
+    .#{$prefix}--date-picker__input:not(
+      .#{$prefix}--date-picker__input--invalid
+    ) {
     border-block-end-color: $ai-border-strong;
   }
 

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

@@ -114,6 +114,12 @@
     outline-offset: 0;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus:has(
+      .#{$prefix}--combo-box
+    ) {
+    outline: none;
+  }
+
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus:has(
       .#{$prefix}--list-box--expanded
     ) {

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

@@ -305,7 +305,7 @@
 
   .#{$prefix}--number-input--fluid
     .#{$prefix}--number__input-wrapper--slug:not(
-      :has(~ .#{$prefix}--slug--revert)
+      :has(.#{$prefix}--slug--revert)
     ) {
     @include ai-gradient;
   }

package/scss/components/form/_form.scss

@@ -129,7 +129,8 @@ $input-label-weight: 400 !default;
   .#{$prefix}--select-input__wrapper[data-invalid]
     .#{$prefix}--select-input:not(:focus),
   .#{$prefix}--list-box[data-invalid]:not(
-      .#{$prefix}--multi-select--invalid--focused
+      .#{$prefix}--multi-select--invalid--focused,
+      .#{$prefix}--combo-box--invalid--focused
     ),
   .#{$prefix}--combo-box[data-invalid]:not(.#{$prefix}--multi-select--selected)
     .#{$prefix}--text-input:not(:focus) {

package/scss/components/list-box/_list-box.scss

@@ -917,6 +917,11 @@ $list-box-menu-width: convert.to-rem(300px);
     inset-inline-end: convert.to-rem(-9px);
   }
 
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug--revert::after {
+    inset-block-start: convert.to-rem(8px);
+    inset-inline-end: convert.to-rem(-1px);
+  }
+
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box:not(:has(.#{$prefix}--slug--revert)) {
     @include ai-gradient;

package/scss/components/multiselect/_multiselect.scss

@@ -92,7 +92,7 @@
     .#{$prefix}--list-box__field--wrapper--input-focused:has(
       button[aria-expanded='false']
     ),
-  .#{$prefix}--multi-select.#{$prefix}--multi-select--selected
+  .#{$prefix}--multi-select
     .#{$prefix}--list-box__field--wrapper--input-focused:has(
       button[aria-expanded='true']
     ) {

package/scss/components/select/_select.scss

@@ -311,6 +311,11 @@
     inset-inline-end: calc(-#{$spacing-03} - #{$divider-width});
   }
 
+  .#{$prefix}--select--slug .#{$prefix}--slug--revert::after {
+    inset-block-start: convert.to-rem(8px);
+    inset-inline-end: convert.to-rem(-1px);
+  }
+
   .#{$prefix}--select--slug
     .#{$prefix}--select-input:not(:has(~ .#{$prefix}--slug--revert)) {
     @include ai-gradient;

package/scss/components/slug/_slug.scss

@@ -56,7 +56,7 @@ $sizes: (
 
 /// Slug styles
 /// @access public
-/// @group slider
+/// @group AI
 @mixin slug {
   .#{$prefix}--slug {
     display: flex;
@@ -92,18 +92,21 @@ $sizes: (
     }
   }
 
+  // Add 24px click target for mini, 2xs sizes
+  .#{$prefix}--slug__button--mini::after,
+  .#{$prefix}--slug__button--2xs::after {
+    position: absolute;
+    display: block;
+    block-size: 24px;
+    content: '';
+    inline-size: 24px;
+  }
+
   .#{$prefix}--slug .#{$prefix}--slug__button:focus {
     border: 1px solid $focus;
     box-shadow: inset 0 0 0 1px $focus;
   }
 
-  .#{$prefix}--slug
-    .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus,
-  .#{$prefix}--slug
-    .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:focus {
-    box-shadow: none;
-  }
-
   .#{$prefix}--slug .#{$prefix}--slug__button:hover {
     background: $border-inverse;
     color: $text-inverse;

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

@@ -132,7 +132,11 @@
   }
 
   .#{$prefix}--toggle-password-tooltip .#{$prefix}--popover {
-    inset-inline-start: -(convert.to-rem(40px));
+    inset-inline-start: -($spacing-08);
+  }
+
+  .#{$prefix}--toggle-password-tooltip .#{$prefix}--popover-content {
+    min-inline-size: $spacing-08;
   }
 
   .#{$prefix}--text-input--sm
@@ -398,14 +402,15 @@
     flex-direction: column;
   }
 
-  .#{$prefix}--text-input-wrapper--inline .cds--form-requirement {
+  .#{$prefix}--text-input-wrapper--inline .#{$prefix}--form-requirement {
     display: block;
     overflow: visible;
     font-weight: 400;
     max-block-size: convert.to-rem(200px);
   }
 
-  .#{$prefix}--text-input-wrapper--inline--invalid .cds--form-requirement {
+  .#{$prefix}--text-input-wrapper--inline--invalid
+    .#{$prefix}--form-requirement {
     color: $text-error;
   }
 

package/scss/components/tile/_tile.scss

@@ -502,7 +502,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
-    .#{$prefix}--slug:has(> .cds--popover--open) {
+    .#{$prefix}--slug:has(> .#{$prefix}--popover--open) {
     z-index: 2;
   }