@carbon/web-components 2.58.1 → 2.59.0-rc.0

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

package/telemetry.yml

@@ -53,6 +53,7 @@ collect:
         - collapse-mode
         - color-scheme
         - cols
+        - compact
         - condensed
         - contained
         - counter-mode
@@ -186,6 +187,8 @@ collect:
         - oncds-tag-closed
         - onchange
         - onClick
+        - onfocus
+        - onfocusout
         - oninput
         - oninvalid
         - open
@@ -468,6 +471,7 @@ collect:
         - oncds-selectable-tag-beforeselected
         - oncds-selectable-tag-selected
         # cds-shape-indicator
+        - shape-description
         - text-size
         # cds-side-nav
         - is-not-persistent
@@ -588,68 +592,9 @@ collect:
         # General - boolean attributes
         - "true"
         - "false"
-        # General - align
-        - bottom
-        - bottom-end
-        - bottom-left
-        - bottom-right
-        - bottom-start
-        - left
-        - left-bottom
-        - left-end
-        - left-start
-        - left-top
-        - right
-        - right-bottom
-        - right-end
-        - right-start
-        - right-top
-        - top
-        - top-end
-        - top-left
-        - top-right
-        - top-start
-        # General - alignment
-        - bottom
-        - bottom-end
-        - bottom-left
-        - bottom-right
-        - bottom-start
-        - END
-        - left
-        - left-bottom
-        - left-end
-        - left-start
-        - left-top
-        - right
-        - right-bottom
-        - right-end
-        - right-start
-        - right-top
-        - start
-        - top
-        - top-end
-        - top-left
-        - top-right
-        - top-start
-        # General - backgroundToken
-        - background
-        - layer
-        # General - collapse-mode
-        - fixed
-        - rail
-        - responsive
-        # General - color-scheme
-        - ""
-        - light
         # General - counter-mode
         - character
         - word
-        # General - direction
-        - bottom
-        - left
-        - right
-        - top
         # General - input-mode
         - decimal
         - email
@@ -660,179 +605,26 @@ collect:
         - text
         - url
         # General - kind
-        - ""
-        - caution-major
-        - caution-minor
-        - cautious
-        - critical
-        - danger
-        - danger-ghost
-        - danger-primary
-        - danger-tertiary
-        - default
         - disclosed
-        - draft
-        - error
-        - failed
-        - from
-        - ghost
-        - high
-        - in-progress
-        - incomplete
-        - info
-        - info-square
-        - informative
-        - inline
-        - low
-        - medium
-        - normal
-        - not-started
         - on-page
-        - pending
-        - primary
-        - secondary
-        - simple
-        - single
-        - stable
-        - succeeded
-        - success
-        - tertiary
-        - to
-        - undefined
-        - unknown
-        - warning
-        - warning-alt
-        # General - label-position
-        - left
-        - right
         # General - loading-status
         - active
         - error
         - finished
         - inactive
-        # General - menu-alignment
-        - bottom
-        - bottom-end
-        - bottom-left
-        - bottom-right
-        - bottom-start
-        - left
-        - left-bottom
-        - left-end
-        - left-start
-        - left-top
-        - right
-        - right-bottom
-        - right-end
-        - right-start
-        - right-top
-        - top
-        - top-end
-        - top-left
-        - top-right
-        - top-start
-        # General - orientation
-        - horizontal
-        - vertical
         # General - role
         - alertdialog
         - dialog
-        # General - selection-feedback
-        - fixed
-        - top
-        - top-after-reopen
         # General - size
-        - ""
         - 2xl
-        - 2xs
-        - big
         - lg
         - md
-        - mini
         - sm
-        - small
         - xl
         - xs
-        # General - state
-        - complete
-        - current
-        - edit
-        - incomplete
-        - invalid
-        - uploading
-        # General - status
-        - active
-        - error
-        - finished
-        - inactive
-        # General - tooltip-alignment
-        - ""
-        - bottom
-        - bottom-left
-        - bottom-right
-        - center
-        - end
-        - left
-        - right
-        - start
-        - top
-        - top-left
-        - top-right
-        # General - tooltip-position
-        - bottom
-        - left
-        - right
-        - top
-        # General - tooltipAlignment
-        - center
-        - end
-        - start
-        # General - tooltipDirection
-        - bottom
-        - left
-        - right
-        - top
         # General - type
-        - ""
-        - blue
-        - button
-        - contained
-        - container
-        - cool-gray
-        - cyan
-        - default
-        - email
-        - gray
-        - green
-        - heading
-        - indented
-        - inline
-        - magenta
-        - multi
         - number
-        - password
-        - purple
-        - red
-        - reset
-        - single
-        - submit
-        - teal
-        - tel
         - text
-        - url
-        - warm-gray
-        # General - width
-        - narrow
-        - wide
-        # cds-file-uploader-button - button-kind
-        - danger
-        - danger-ghost
-        - danger-primary
-        - danger-tertiary
-        - ghost
-        - primary
-        - secondary
-        - tertiary
         # cds-layout - density
         - condensed
         - normal
@@ -857,28 +649,6 @@ collect:
         - sm
         - xl
         - xs
-        # cds-menu-button - menu-background-token
-        - background
-        - layer
-        # cds-pagination - backward-text-tooltip-position
-        - bottom
-        - left
-        - right
-        - top
-        # cds-pagination - forward-text-tooltip-position
-        - bottom
-        - left
-        - right
-        - top
-        # cds-side-panel - placement
-        - left
-        - right
-        # cds-tearsheet - influencer-placement
-        - left
-        - right
-        # cds-tearsheet - influencer-width
-        - narrow
-        - wide
   npm:
     dependencies: null
   js: