@carbon/styles 1.97.0 → 1.98.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.97.0",
+  "version": "1.98.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.44.0",
+    "@carbon/colors": "^11.45.0",
     "@carbon/feature-flags": ">=0.32.0",
-    "@carbon/grid": "^11.47.0",
-    "@carbon/layout": "^11.45.0",
+    "@carbon/grid": "^11.48.0",
+    "@carbon/layout": "^11.46.0",
     "@carbon/motion": "^11.39.0",
-    "@carbon/themes": "^11.65.0",
-    "@carbon/type": "^11.51.0",
+    "@carbon/themes": "^11.66.0",
+    "@carbon/type": "^11.52.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
@@ -59,7 +59,7 @@
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.38.0",
+    "@carbon/test-utils": "^10.39.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "57fdbc7bfad9349b5c4359c7d621e709cd4daa25"
+  "gitHead": "ce7846aab8a3a1afe9b03d2d07d267af6cdb6ac2"
 }

package/scss/__tests__/theme-test.js

@@ -172,6 +172,51 @@ describe('@carbon/styles/scss/theme', () => {
         "syntax-escape",
         "syntax-url",
         "syntax-color",
+        "syntax-operator",
+        "syntax-deref-operator",
+        "syntax-arithmetic-operator",
+        "syntax-logic-operator",
+        "syntax-bitwise-operator",
+        "syntax-compare-operator",
+        "syntax-update-operator",
+        "syntax-definition-operator",
+        "syntax-type-operator",
+        "syntax-control-operator",
+        "syntax-modifier",
+        "syntax-punctuation",
+        "syntax-separator",
+        "syntax-bracket",
+        "syntax-angle-bracket",
+        "syntax-square-bracket",
+        "syntax-paren",
+        "syntax-brace",
+        "syntax-content",
+        "syntax-heading",
+        "syntax-heading-1",
+        "syntax-heading-2",
+        "syntax-heading-3",
+        "syntax-heading-4",
+        "syntax-heading-5",
+        "syntax-heading-6",
+        "syntax-content-separator",
+        "syntax-list",
+        "syntax-quote",
+        "syntax-emphasis",
+        "syntax-strong",
+        "syntax-monospace",
+        "syntax-link",
+        "syntax-strikethrough",
+        "syntax-invalid",
+        "syntax-meta",
+        "syntax-document-meta",
+        "syntax-annotation",
+        "syntax-processing-instruction",
+        "syntax-definition",
+        "syntax-constant",
+        "syntax-function",
+        "syntax-standard",
+        "syntax-local",
+        "syntax-special",
         "ai-popover-background",
         "ai-popover-shadow-outer-01",
         "ai-popover-shadow-outer-02",

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

@@ -186,6 +186,14 @@
     border-block-end: 1px solid $border-strong;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--form-requirement:empty,
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--warning
+    ~ .#{$prefix}--form-requirement:empty {
+    block-size: convert.to-rem(32px);
+  }
+
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
     .#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__invalid-icon,
@@ -428,7 +436,7 @@
 
   .#{$prefix}--list-box__wrapper--fluid:has(.#{$prefix}--dropdown)
     .#{$prefix}--list-box__menu-icon {
-    inset-inline-end: $spacing-04;
+    inset-inline-end: $spacing-05;
   }
 
   // remove ai-label divider when element is invalid and fluid

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2023
+// Copyright IBM Corp. 2018, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -49,6 +49,11 @@
       inset-inline-start: auto;
     }
   }
+  .#{$prefix}--text-input--fluid.#{$prefix}--text-input-wrapper--readonly
+    .#{$prefix}--text-input__field-wrapper
+    .#{$prefix}--text-input {
+    color: $text-secondary;
+  }
 
   .#{$prefix}--text-input--fluid .#{$prefix}--label::-webkit-scrollbar,
   .#{$prefix}--text-input--fluid

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

@@ -533,6 +533,11 @@ $list-box-menu-width: convert.to-rem(300px);
     }
   }
 
+  // Allow auto-alignment to control inline placement
+  .#{$prefix}--autoalign .#{$prefix}--list-box__menu {
+    inset-inline: auto;
+  }
+
   .#{$prefix}--list-box .#{$prefix}--list-box__field[aria-expanded='false'] {
     .#{$prefix}--list-box__menu {
       display: none;
@@ -885,7 +890,7 @@ $list-box-menu-width: convert.to-rem(300px);
   // When handling input, we need to target nodes that specifically opt-in to
   // the type text in order to make sure the text input is styled
   // correctly.
-  .#{$prefix}--list-box input[type='text'] {
+  .#{$prefix}--list-box .#{$prefix}--text-input {
     background-color: inherit;
     min-inline-size: 0;
     text-overflow: ellipsis;

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -152,21 +152,13 @@
 
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
     svg {
-    fill: $icon-secondary;
-    transition: fill $duration-fast-01 motion(standard, productive);
+    fill: $icon-primary;
   }
 
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus {
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
-    svg,
-  .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus
-    svg {
-    fill: $icon-primary;
-  }
-
   .#{$prefix}--text-input--invalid,
   .#{$prefix}--text-input--warning {
     padding-inline-end: $spacing-08;

package/scss/utilities/_tooltip.scss

@@ -37,7 +37,7 @@
 
   z-index: z('floating');
   padding: if(
-    $tooltip-type == 'definition',
+    sass($tooltip-type == 'definition'),
     convert.to-rem(8px) convert.to-rem(16px),
     convert.to-rem(3px) convert.to-rem(16px)
   );
@@ -234,7 +234,7 @@
 ) {
   // position and alignment
   $caret-spacing: if(
-    $tooltip-type == 'definition',
+    sass($tooltip-type == 'definition'),
     convert.to-rem(4px),
     convert.to-rem(8px)
   );