@carbon/web-components 2.58.1 → 2.59.0

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

@@ -7,7 +7,7 @@
 
 $css--plex: true !default;
 @use '@carbon/styles/scss/components/fluid-select/index';
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;

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

@@ -8,7 +8,7 @@
 $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/components/fluid-text-input/index';
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/type' as *;

package/scss/components/fluid-textarea/fluid-textarea.scss

@@ -8,7 +8,7 @@
 $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/components/fluid-text-area/index';
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/spacing' as *;
 
 :host(#{$prefix}-fluid-textarea) {

package/scss/components/fluid-time-picker/fluid-time-picker.scss

@@ -9,7 +9,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/fluid-time-picker/index' as
   fluid-time-picker;
 @use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;

package/scss/components/icon-button/icon-button.scss

@@ -10,7 +10,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/theme' as *;
 
 :host(#{$prefix}-icon-button) {

package/scss/components/icon-indicator/icon-indicator.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.
@@ -8,7 +8,10 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/icon-indicator/index' as *;
+@use '@carbon/styles/scss/utilities/custom-property';
+@use '@carbon/styles/scss/utilities/visually-hidden' as *;
 
 :host(#{$prefix}-icon-indicator) {
   @extend .#{$prefix}--icon-indicator;
@@ -65,3 +68,18 @@ $css--plex: true !default;
 :host(#{$prefix}-icon-indicator[kind='informative']) svg {
   @extend .#{$prefix}--icon-indicator--informative;
 }
+
+:host(#{$prefix}-icon-indicator[compact]) {
+  #{$prefix}-definition-tooltip {
+    @include custom-property.declaration('tooltip-padding-block', $spacing-01);
+  }
+
+  #{$prefix}-definition-tooltip::part(definition-term) {
+    display: flex;
+    border: none;
+  }
+}
+
+.#{$prefix}--visually-hidden {
+  @extend .#{$prefix}--visually-hidden;
+}

package/scss/components/layout/layout.scss

@@ -10,7 +10,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 
 :host(#{$prefix}-layout) {
   @include emit-layout-tokens();

package/scss/components/menu/menu-item.scss

@@ -92,6 +92,10 @@ $css--plex: true !default;
   color: $text-on-color;
 }
 
+:host(.#{$prefix}--menu-item--danger:focus) {
+  box-shadow: inset 0 0 0 to-rem(3px) $background;
+}
+
 .#{$prefix}--menu-item__icon,
 .#{$prefix}--menu-item__selection-icon {
   display: none;

package/scss/components/notification/actionable-notification.scss

@@ -15,7 +15,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/button';
 @use '@carbon/styles/scss/components/button/mixins' as button-mixins;
 @use '@carbon/styles/scss/components/button/vars' as button-vars;
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 
 @include actionable-notification;
 

package/scss/components/notification/inline-notification.scss

@@ -13,7 +13,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
 @use '@carbon/styles/scss/components/notification/index' as *;
 @use '@carbon/styles/scss/components/button';
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include inline-notification;

package/scss/components/notification/toast-notification.scss

@@ -12,7 +12,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/components/notification/index' as *;
 @use '@carbon/styles/scss/components/button';
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include toast-notification;

package/scss/components/overflow-menu/overflow-menu.scss

@@ -10,13 +10,22 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/utilities/convert';
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
 @use '@carbon/styles/scss/components/overflow-menu/overflow-menu' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include overflow-menu;
 
+// Fallback visible focus style when the trigger's native focus ring is not shown.
+:host(#{$prefix}-overflow-menu[data-programmatic-focus]),
+:host(#{$prefix}-breadcrumb-overflow-menu[data-programmatic-focus]) {
+  @include focus-outline('outline');
+}
+
 :host(#{$prefix}-overflow-menu),
 :host(#{$prefix}-breadcrumb-overflow-menu) {
+  @include emit-layout-tokens();
   @extend .#{$prefix}--overflow-menu;
 
   ::slotted(.#{$prefix}--overflow-menu__icon) {
@@ -24,21 +33,6 @@
   }
 }
 
-:host(#{$prefix}-overflow-menu[size='xs']),
-:host(#{$prefix}-breadcrumb-overflow-menu[size='xs']) {
-  @extend .#{$prefix}--overflow-menu--xs;
-}
-
-:host(#{$prefix}-overflow-menu[size='sm']),
-:host(#{$prefix}-breadcrumb-overflow-menu[size='sm']) {
-  @extend .#{$prefix}--overflow-menu--sm;
-}
-
-:host(#{$prefix}-overflow-menu[size='lg']),
-:host(#{$prefix}-breadcrumb-overflow-menu[size='lg']) {
-  @extend .#{$prefix}--overflow-menu--lg;
-}
-
 :host(#{$prefix}-overflow-menu[disabled]),
 :host(#{$prefix}-breadcrumb-overflow-menu[disabled]) {
   cursor: not-allowed;
@@ -66,6 +60,7 @@
 }
 
 :host(#{$prefix}-overflow-menu-body) {
+  @include emit-layout-tokens();
   @extend .#{$prefix}--overflow-menu-options;
 
   &::after {
@@ -89,18 +84,6 @@
   @extend .#{$prefix}--overflow-menu-options--open;
 }
 
-:host(#{$prefix}-overflow-menu-body[size='xs']) {
-  @extend .#{$prefix}--overflow-menu-options--xs;
-}
-
-:host(#{$prefix}-overflow-menu-body[size='sm']) {
-  @extend .#{$prefix}--overflow-menu-options--sm;
-}
-
-:host(#{$prefix}-overflow-menu-body[size='lg']) {
-  @extend .#{$prefix}--overflow-menu-options--lg;
-}
-
 :host(#{$prefix}-overflow-menu-item) {
   @extend .#{$prefix}--overflow-menu-options__option;
 
@@ -115,18 +98,6 @@
   }
 }
 
-:host(#{$prefix}-overflow-menu-item[size='xs']) {
-  block-size: $spacing-06;
-}
-
-:host(#{$prefix}-overflow-menu-item[size='sm']) {
-  block-size: $spacing-07;
-}
-
-:host(#{$prefix}-overflow-menu-item[size='lg']) {
-  block-size: $spacing-09;
-}
-
 :host(#{$prefix}-overflow-menu-item[danger]) {
   @extend .#{$prefix}--overflow-menu-options__option--danger;
 }
@@ -245,3 +216,6 @@ $caret-size: convert.to-rem(7px);
     direction: ltr;
   }
 }
+@include emit-layout-tokens-to-shadow-host(#{$prefix}-overflow-menu-body);
+@include emit-layout-tokens-to-shadow-host(#{$prefix}-overflow-menu);
+@include emit-layout-tokens-to-shadow-host(#{$prefix}-breadcrumb-overflow-menu);

package/scss/components/pagination/pagination.scss

@@ -14,7 +14,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/components/pagination' as *;
 @use '@carbon/styles/scss/utilities/visually-hidden' as *;
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 
 :host(#{$prefix}-pagination) {
   @extend .#{$prefix}--pagination;

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

@@ -9,9 +9,11 @@ $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/components/pagination-nav' as *;
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/theme' as *;
 
+@include emit-layout-context-classes();
+
 :host(#{$prefix}-pagination-nav) {
   @extend .#{$prefix}--pagination-nav;
   @include emit-layout-tokens();

package/scss/components/password-input/password-input.scss

@@ -10,11 +10,13 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/text-input/index';
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/utilities/skeleton' as *;
 @use '@carbon/styles/scss/utilities/convert';
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
 
+@include emit-layout-context-classes();
+
 :host(#{$prefix}-password-input) {
   @include emit-layout-tokens();
 

package/scss/components/popover/popover.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2025
+ * 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.
@@ -46,6 +46,8 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-popover) {
   ::slotted(.#{$prefix}--popover--tab-tip__button) {
     @include popover-tab-tip-button;
+
+    color: theme.$icon-primary;
   }
 }
 

package/scss/components/select/select.scss

@@ -15,7 +15,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/fluid-select' as *;
 @use '@carbon/styles/scss/utilities/visually-hidden' as *;
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 
 $divider-width: 1px;
 

package/scss/components/shape-indicator/shape-indicator.scss

@@ -1,12 +1,15 @@
 //
-// Copyright IBM Corp. 2025, 2025
+// Copyright IBM Corp. 2025, 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.
 //
 $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/shape-indicator/index' as *;
+@use '@carbon/styles/scss/utilities/custom-property';
+@use '@carbon/styles/scss/utilities/visually-hidden' as *;
 
 :host(#{$prefix}-shape-indicator) {
   @extend .#{$prefix}--shape-indicator;
@@ -59,3 +62,18 @@ $css--plex: true !default;
 :host(#{$prefix}-shape-indicator[kind='draft']) svg {
   @extend .#{$prefix}--shape-indicator--draft;
 }
+
+:host(#{$prefix}-shape-indicator[compact]) {
+  #{$prefix}-definition-tooltip {
+    @include custom-property.declaration('tooltip-padding-block', $spacing-01);
+  }
+
+  #{$prefix}-definition-tooltip::part(definition-term) {
+    display: flex;
+    border: none;
+  }
+}
+
+.#{$prefix}--visually-hidden {
+  @extend .#{$prefix}--visually-hidden;
+}

package/scss/components/slider/slider.scss

@@ -11,7 +11,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/components/slider';
 @use '@carbon/styles/scss/type' as type;
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 
 :host(#{$prefix}-slider),
 :host(#{$prefix}-slider-skeleton) {

package/scss/components/slug/slug.scss

@@ -12,7 +12,7 @@
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/components/slug/index' as *;
 

package/scss/components/tabs/tabs.scss

@@ -16,12 +16,15 @@
 @use '@carbon/styles/scss/components/tabs/index';
 @use '@carbon/styles/scss/components/tabs/vars' as *;
 @use '@carbon/styles/scss/utilities/button-reset';
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 @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 *;
 
+@include emit-layout-context-classes();
+@include emit-layout-context-classes('density');
+
 $inset-transition: inset 110ms motion(standard, productive);
 
 :host(#{$prefix}-tabs),

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

@@ -12,9 +12,11 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/text-input/index';
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 
+@include emit-layout-context-classes();
+
 :host(#{$prefix}-text-input),
 :host(#{$prefix}-text-input-skeleton) {
   @include emit-layout-tokens();

package/scss/components/textarea/textarea.scss

@@ -7,7 +7,7 @@
 
 $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/text-area/index';
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;

package/scss/components/tile/tile.scss

@@ -16,7 +16,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/form/index' as *;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 
 :host(#{$prefix}-tile) {
   @extend .#{$prefix}--tile;

package/scss/components/time-picker/time-picker.scss

@@ -13,7 +13,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/time-picker/index';
 @use '@carbon/styles/scss/components/select';
-@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/layout' as *;
 @use '@carbon/styles/scss/utilities/convert' as convert;
 
 :host(#{$prefix}-time-picker) {

package/scss/components/tooltip/tooltip.scss

@@ -8,8 +8,10 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/components/tooltip';
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/custom-property';
 @use '@carbon/styles/scss/utilities/layout';
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 // For some reason `#{prefix}-tooltip` doesn't work here, will need to investigate
 :host(#{$prefix}-tooltip[data-table]) {
@@ -47,8 +49,19 @@
 }
 
 // Definition tooltip
-:host(#{$prefix}-definition-tooltip) #{$prefix}-popover-content::part(content) {
-  @extend .#{$prefix}--definition-tooltip;
+:host(#{$prefix}-definition-tooltip) {
+  #{$prefix}-popover {
+    display: flex;
+  }
+
+  #{$prefix}-popover-content::part(content) {
+    @extend .#{$prefix}--definition-tooltip;
+
+    padding-block: custom-property.get-var(
+      'tooltip-padding-block',
+      to-rem(8px)
+    );
+  }
 }
 
 // Password input "Show/Hide Password" tooltip