@carbon/web-components 2.54.0 → 2.55.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.54.0",
+  "version": "2.55.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -66,8 +66,8 @@
   },
   "dependencies": {
     "@carbon/icon-helpers": "10.47.0",
-    "@carbon/icons": "^11.80.0",
-    "@carbon/styles": "^1.106.0",
+    "@carbon/icons": "^11.81.0",
+    "@carbon/styles": "^1.107.0",
     "@carbon/utilities": "^0.17.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.10.2",
@@ -77,8 +77,8 @@
     "tslib": "^2.6.3"
   },
   "devDependencies": {
-    "@carbon/layout": "^11.52.0",
-    "@carbon/motion": "^11.45.0",
+    "@carbon/layout": "^11.53.0",
+    "@carbon/motion": "^11.46.0",
     "@juggle/resize-observer": "^3.4.0",
     "@mordech/vite-lit-loader": "^0.40.0",
     "@open-wc/testing": "^4.0.0",
@@ -94,16 +94,16 @@
     "@web/test-runner-puppeteer": "^0.18.0",
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "autoprefixer": "^10.4.0",
-    "cssnano": "^7.1.0",
+    "cssnano": "^8.0.0",
     "flatpickr": "4.6.13",
     "globby": "^16.0.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.1",
     "sass": "^1.93.2",
     "storybook": "^10.3.5",
-    "storybook-addon-accessibility-checker": "^9.2.0-rc.3",
+    "storybook-addon-accessibility-checker": "^9.2.0-rc.4",
     "tsdown": "^0.21.0",
-    "typescript-config-carbon": "^0.9.0",
+    "typescript-config-carbon": "^0.10.0",
     "vite": "^7.2.4",
     "web-component-analyzer": "2.0.0"
   },
@@ -126,5 +126,5 @@
       }
     ]
   },
-  "gitHead": "13c5c427ad4413aea5184a0a593e6452bc163e4a"
+  "gitHead": "2d98f4ee9914fa44acba58f62599c3f5382acad0"
 }

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

@@ -23,7 +23,8 @@ $css--plex: true !default;
   @extend .#{$prefix}--date-picker;
 
   #floating-menu-container {
-    position: absolute;
+    position: fixed;
+    z-index: z('dropdown');
     inline-size: 100%;
   }
 

package/scss/components/dialog/dialog.scss

@@ -17,10 +17,6 @@
 @use '@carbon/styles/scss/components/button' as *;
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
 
-:host(#{$prefix}-dialog) dialog {
-  @extend .#{$prefix}--dialog;
-}
-
 :host(#{$prefix}-dialog[has-scrolling-content])
   ::slotted(#{$prefix}-dialog-body),
 :host(#{$prefix}-dialog) ::slotted(#{$prefix}-dialog-body[is-scrollable]) {
@@ -90,6 +86,9 @@
   ::slotted(#{$prefix}-dialog-footer-button) {
     flex: 0 1 25%;
   }
+  ::slotted(#{$prefix}-inline-loading) {
+    flex: 0 1 25%;
+  }
 }
 
 :host(#{$prefix}-dialog-footer-button:first-of-type) .#{$prefix}--btn {
@@ -113,6 +112,13 @@
   }
 }
 
+:host(#{$prefix}-dialog-footer) ::slotted(#{$prefix}-inline-loading) {
+  flex: 0 1 50%;
+  cursor: not-allowed;
+  padding-block: $spacing-05 $spacing-07;
+  padding-inline-start: $spacing-05;
+}
+
 :host(#{$prefix}-dialog-footer) ::slotted(#{$prefix}-button),
 :host(#{$prefix}-dialog-footer-button) {
   flex: 0 1 50%;

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

@@ -45,6 +45,10 @@
   }
 }
 
+:host(#{$prefix}-file-uploader-item[disabled]) {
+  @extend .#{$prefix}--file__selected-file--disabled;
+}
+
 :host(#{$prefix}-file-uploader-item[size='md']) {
   @extend .#{$prefix}--file__selected-file--md;
 }

package/scss/components/modal/modal.scss

@@ -28,7 +28,6 @@
   visibility: inherit;
 
   .#{$prefix}--modal-container {
-    overflow: hidden;
     transform: translate3d(0, 0, 0);
     transition: transform $duration-moderate-02 motion(entrance, expressive);
   }
@@ -231,3 +230,31 @@
   inset-block-start: to-rem(10px);
   inset-inline-end: to-rem(48px);
 }
+
+// `enable-dialog-element` feature flag styles
+:host(#{$prefix}-modal[enable-dialog-element]) #{$prefix}-dialog::part(dialog) {
+  @extend .#{$prefix}--modal-container;
+
+  // Prevent a 2px border when using `enable-dialog-element` feature flag
+  border: none;
+}
+
+:host(#{$prefix}-modal[enable-dialog-element][size='xs'])
+  #{$prefix}-dialog::part(dialog) {
+  @extend .#{$prefix}--modal-container--xs;
+}
+
+:host(#{$prefix}-modal[enable-dialog-element][size='sm'])
+  #{$prefix}-dialog::part(dialog) {
+  @extend .#{$prefix}--modal-container--sm;
+}
+
+:host(#{$prefix}-modal[enable-dialog-element][size='lg'])
+  #{$prefix}-dialog::part(dialog) {
+  @extend .#{$prefix}--modal-container--lg;
+}
+
+:host(#{$prefix}-modal[enable-dialog-element]:not([open]))
+  #{$prefix}-dialog::part(dialog) {
+  display: none;
+}

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

@@ -4,6 +4,8 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+// @deprecated PageHeader has moved to Carbon for IBM Products.
+// See https://github.com/carbon-design-system/carbon/issues/21926
 
 @use 'sass:math';
 

package/scss/components/tabs/tabs-story.scss

@@ -46,3 +46,8 @@ body {
 #{$prefix}-tabs[type='contained'] ~ .#{$prefix}--tab-content {
   background: $layer;
 }
+
+.#{$prefix}-ce-demo-devenv--tab-story-button {
+  display: inline-block;
+  inline-size: auto;
+}

package/scss/components/tabs/tabs.scss

@@ -20,6 +20,7 @@
 @use '@carbon/styles/scss/utilities/layout';
 @use '@carbon/styles/scss/utilities/convert';
 @use '@carbon/styles/scss/utilities/skeleton' as *;
+@use '@carbon/styles/scss/utilities/update_fields_on_layer' as *;
 
 $inset-transition: inset 110ms motion(standard, productive);
 
@@ -27,6 +28,7 @@ $inset-transition: inset 110ms motion(standard, productive);
 :host(#{$prefix}-tabs-skeleton) {
   @extend .#{$prefix}--tabs;
   @include emit-layout-tokens();
+
   .#{$prefix}--tabs-nav-content-container {
     position: relative;
     overflow: scroll;
@@ -60,6 +62,10 @@ $inset-transition: inset 110ms motion(standard, productive);
   .#{$prefix}--tab--overflow-nav-button {
     background-color: var(--tabs-overflow-button-background, $background);
   }
+
+  .#{$prefix}--tab--overflow-nav-button--hidden {
+    display: none;
+  }
 }
 
 :host(#{$prefix}-tabs) {
@@ -103,6 +109,121 @@ $inset-transition: inset 110ms motion(standard, productive);
   }
 }
 
+:host(#{$prefix}-tabs[type='contained']) {
+  .#{$prefix}--tab--overflow-nav-button {
+    background-color: $layer-accent;
+    inline-size: $spacing-09;
+
+    &:hover {
+      background-color: $layer-accent-hover;
+    }
+
+    &:active {
+      background-color: $layer-accent-active;
+    }
+  }
+}
+
+:host(#{$prefix}-tabs[type='contained'][has-secondary-labels])
+  .#{$prefix}--tabs-nav-content-container {
+  block-size: $spacing-10;
+}
+
+:host(#{$prefix}-tabs[type='contained'][has-secondary-labels]) #{$prefix}-tab {
+  block-size: $spacing-10;
+}
+
+:host(#{$prefix}-tab[type='contained'][secondary-label]) {
+  block-size: $spacing-10;
+
+  a.#{$prefix}--tabs__nav-link {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 0 $spacing-05;
+    block-size: $spacing-10;
+    line-height: normal;
+  }
+
+  .#{$prefix}--tabs__nav-item-label-wrapper {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .#{$prefix}--tabs__nav-item-label {
+    line-height: var(--cds-body-compact-01-line-height);
+  }
+}
+
+:host(#{$prefix}-tab[type='contained'][secondary-label][selected]),
+:host(#{$prefix}-tab[type='contained'][secondary-label][selected]:hover) {
+  a.#{$prefix}--tabs__nav-link {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 0 $spacing-05;
+    line-height: normal;
+  }
+}
+
+:host(#{$prefix}-tab[type='contained']) {
+  .#{$prefix}--tabs__nav-item-secondary-label {
+    @include type-style('label-01');
+
+    display: block;
+    overflow: hidden;
+    color: $text-secondary;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+:host(#{$prefix}-tab[type='contained'][selected]) {
+  .#{$prefix}--tabs__nav-item-secondary-label {
+    color: $text-primary;
+  }
+}
+
+:host(#{$prefix}-tab[type='contained'][disabled]) {
+  .#{$prefix}--tabs__nav-item-secondary-label {
+    color: $text-on-color-disabled;
+  }
+}
+
+:host(#{$prefix}-tabs[type='contained'][full-width]) {
+  display: flex;
+  inline-size: 100%;
+
+  .#{$prefix}--tabs-nav-content-container {
+    overflow: visible;
+    flex: 1 1 0%;
+  }
+
+  .#{$prefix}--tabs-nav-content,
+  .#{$prefix}--tabs-nav,
+  .#{$prefix}--tab--list {
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--tab--list {
+    display: flex;
+  }
+}
+
+:host(#{$prefix}-tabs[type='contained'][full-width]) #{$prefix}-tab {
+  flex: 1 1 0%;
+  min-inline-size: 0;
+
+  .#{$prefix}--tabs__nav-link {
+    overflow: hidden;
+    inline-size: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
 :host(#{$prefix}-tab),
 :host(#{$prefix}-tab-skeleton) {
   display: flex;
@@ -111,7 +232,7 @@ $inset-transition: inset 110ms motion(standard, productive);
 
   .#{$prefix}--tabs__nav-item-label-wrapper {
     display: flex;
-    align-items: center;
+    align-items: inherit;
     gap: $spacing-03;
   }
 
@@ -145,6 +266,9 @@ $inset-transition: inset 110ms motion(standard, productive);
   outline: none;
 }
 
+:host(#{$prefix}-tab:not([type='contained']):not([vertical])) {
+  margin-inline-end: convert.to-rem(1px);
+}
 :host(#{$prefix}-tab:not([type='contained'])) {
   .#{$prefix}--tabs__nav-link {
     padding-block-end: calc(#{$spacing-03} + #{convert.to-rem(1px)});
@@ -152,10 +276,19 @@ $inset-transition: inset 110ms motion(standard, productive);
   }
 }
 
+:host(#{$prefix}-tab:not([type='contained']):not([vertical]):last-of-type) {
+  margin-inline-end: 0;
+}
 :host(#{$prefix}-tab:not([type='contained']))
   + :host(#{$prefix}-tab:not([type='contained'])) {
   margin-inline-start: convert.to-rem(1px);
 }
+:host(#{$prefix}-tab[vertical]) {
+  .#{$prefix}--tabs__nav-link {
+    padding-block-end: $spacing-03;
+    padding-block-start: $spacing-03;
+  }
+}
 
 :host(#{$prefix}-tab[badge-indicator][icon-only]:not([icon-size='lg']))
   #{$prefix}-badge-indicator,
@@ -249,7 +382,7 @@ $inset-transition: inset 110ms motion(standard, productive);
   }
 }
 
-:host(#{$prefix}-tab:hover:not([selected])) {
+:host(#{$prefix}-tab:hover:not([selected]):not([vertical])) {
   background-color: transparent;
 
   a.#{$prefix}--tabs__nav-link {
@@ -265,7 +398,7 @@ $inset-transition: inset 110ms motion(standard, productive);
 
 :host(#{$prefix}-tabs[type='contained'])
   .#{$prefix}--tabs-nav-content-container {
-  block-size: $spacing-09;
+  block-size: layout.size('height');
 }
 
 :host(#{$prefix}-tab[type='contained']) {
@@ -273,9 +406,9 @@ $inset-transition: inset 110ms motion(standard, productive);
 
   a.#{$prefix}--tabs__nav-link {
     padding: $spacing-03 $spacing-05;
-    block-size: $spacing-09;
+    block-size: layout.size('height');
     // height - vertical padding
-    line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));
+    line-height: calc(#{layout.size('height')} - (#{$spacing-03} * 2));
   }
 }
 
@@ -327,7 +460,7 @@ $inset-transition: inset 110ms motion(standard, productive);
     // Draws the border without affecting the inner-content
     box-shadow: inset 0 $spacing-01 0 0 $interactive;
     // height - vertical padding
-    line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));
+    line-height: calc(#{layout.size('height')} - (#{$spacing-03} * 2));
   }
 
   .#{$prefix}--tabs__nav-link:focus,
@@ -440,9 +573,159 @@ $inset-transition: inset 110ms motion(standard, productive);
   }
 }
 
+:host(#{$prefix}-tab[vertical]) .#{$prefix}--tabs__nav-link {
+  display: flex;
+  align-items: center;
+  border-block-end: 1px solid $border-subtle;
+}
+
+:host(#{$prefix}-tab[vertical][selected]) .#{$prefix}--tabs__nav-link {
+  border-block-end: 1px solid $border-subtle;
+}
+
+:host(#{$prefix}-tab[vertical][disabled]) .#{$prefix}--tabs__nav-link {
+  border-block-end: 1px solid $border-subtle;
+}
+
+//-----------------------------
+// Vertical Tabs Wrapper
+//-----------------------------
+
+:host(#{$prefix}-tabs-vertical) {
+  @include emit-layout-tokens();
+  @include layout.use('density', $default: 'normal');
+
+  grid-column: span 2;
+  max-block-size: none;
+
+  &.#{$prefix}--css-grid {
+    box-shadow: inset -1px 0 $border-subtle;
+  }
+
+  ::slotted(#{$prefix}-tabs) {
+    grid-column: span 2;
+
+    @include breakpoint(lg) {
+      grid-column: span 4;
+    }
+  }
+
+  // Shadow-DOM wrapper for the panel slot — styled directly (no ::slotted needed)
+  .#{$prefix}-panel-container {
+    @include update_fields_on_layer;
+
+    background: $layer;
+    grid-column: 3 / -1;
+    overflow-y: auto;
+
+    @include breakpoint(lg) {
+      grid-column: 5 / -1;
+    }
+  }
+}
+
+// Slotted tab panel divs — match React's cds--tab-content styles
+:host(#{$prefix}-tabs-vertical) ::slotted([role='tabpanel']) {
+  // stylelint-disable-next-line declaration-no-important
+  padding: layout.density('padding-inline') !important;
+  outline: none;
+}
+
+:host(#{$prefix}-tabs-vertical)
+  .panel-container
+  ::slotted([role='tabpanel']:focus) {
+  @include focus-outline('outline');
+}
+
+// cds-tabs when slotted inside cds-tabs-vertical (slot="tabs")
+:host(#{$prefix}-tabs-vertical) ::slotted(#{$prefix}-tabs) {
+  background: $layer;
+  box-shadow: inset -1px 0 $border-subtle;
+  max-block-size: none;
+}
+
+// Internal styles for cds-tabs when inside cds-tabs-vertical
+// These are applied via a CSS custom property / attribute set by the wrapper
+:host(#{$prefix}-tabs[vertical]) {
+  .#{$prefix}--tabs-nav-content-container {
+    block-size: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .#{$prefix}--tabs-nav-content {
+    position: relative;
+    block-size: 100%;
+  }
+
+  .#{$prefix}--tabs-nav {
+    position: relative;
+  }
+
+  .#{$prefix}--tab--list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .#{$prefix}--tab--overflow-nav-button {
+    display: none;
+  }
+
+  .#{$prefix}--tabs__nav-item-label {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-height: var(--cds-body-compact-01-line-height);
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+}
+
+:host(#{$prefix}-tab[vertical]) {
+  flex: none;
+  background-color: $layer-01;
+  block-size: $spacing-10;
+  border-inline-end: 1px solid $border-subtle;
+  box-shadow: inset 3px 0 0 0 $border-subtle;
+  inline-size: 100%;
+
+  .#{$prefix}--tabs__nav-item-label {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-height: var(--cds-body-compact-01-line-height);
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+}
+
+:host(#{$prefix}-tab[vertical][disabled]) {
+  border-inline-end: 1px solid $border-subtle;
+  box-shadow: inset 3px 0 0 0 $border-subtle;
+}
+
+:host(#{$prefix}-tab[vertical]:hover),
+:host(#{$prefix}-tab[vertical][disabled]:hover) {
+  .#{$prefix}--tabs__nav-link {
+    border-block-end: 1px solid $border-subtle;
+  }
+}
+
+:host(#{$prefix}-tab[vertical][selected]) {
+  border-inline: none;
+  box-shadow: inset 3px 0 0 0 $border-interactive;
+}
+
+:host(#{$prefix}-tab[vertical]:not([selected]):not([disabled]):hover) {
+  background-color: $layer-hover;
+  box-shadow: inset 3px 0 0 0 $border-strong;
+}
 :host(#{$prefix}-tab) {
   .#{$prefix}--tabs__nav-link--dismissable {
     display: flex;
+    align-items: flex-start;
     padding-inline-end: $spacing-08;
   }
   .#{$prefix}--tabs--dismissable.#{$prefix}--tabs--contained {

package/scss/components/tile/tile.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -122,6 +122,17 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-radio-tile[enable-v12-tile-radio-icons]) {
+  .#{$prefix}--tile__checkmark {
+    opacity: 1;
+  }
+}
+
+:host(#{$prefix}-radio-tile[enable-v12-tile-radio-icons])
+  ::slotted([slot='ai-label']) {
+  inset-inline-end: 2.5rem;
+}
+
 :host(#{$prefix}-radio-tile) ::slotted(:not([slot])),
 :host(#{$prefix}-clickable-tile) ::slotted(*),
 :host(#{$prefix}-selectable-tile) ::slotted(:not([slot])) {
@@ -292,3 +303,58 @@ $css--plex: true !default;
     border-end-end-radius: $spacing-03;
   }
 }
+
+:host(#{$prefix}-clickable-tile[enable-tile-contrast]) {
+  .#{$prefix}--tile--clickable {
+    box-sizing: border-box;
+    border: 1px solid $border-tile;
+  }
+
+  .#{$prefix}--link--disabled {
+    box-sizing: border-box;
+    border: 1px solid $border-disabled;
+  }
+}
+
+:host(#{$prefix}-selectable-tile[enable-tile-contrast]) {
+  .#{$prefix}--tile--selectable {
+    border: 1px solid $border-tile;
+  }
+
+  .#{$prefix}--tile--is-selected {
+    border: 1px solid $layer-selected-inverse;
+  }
+
+  .#{$prefix}--tile--disabled {
+    border: 1px solid $border-disabled;
+  }
+}
+
+:host(#{$prefix}-expandable-tile[enable-tile-contrast]) {
+  .#{$prefix}--tile__chevron--interactive {
+    border: 1px solid $border-disabled;
+  }
+}
+
+:host(
+    #{$prefix}-expandable-tile[enable-tile-contrast]:not([with-interactive])
+  ) {
+  border: 1px solid $border-tile;
+}
+
+:host(#{$prefix}-radio-tile[enable-tile-contrast]) {
+  .#{$prefix}--tile--selectable {
+    box-sizing: border-box;
+    border: 1px solid $border-tile;
+  }
+
+  .#{$prefix}--tile--is-selected {
+    box-sizing: border-box;
+    border: 1px solid $layer-selected-inverse;
+  }
+
+  .#{$prefix}--tile--disabled {
+    box-sizing: border-box;
+    border: 1px solid $border-disabled;
+  }
+}