@carbon/web-components 2.62.0-rc.0 → 2.63.0-rc.0

package/scss/components/options-tile/options-tile.scss

@@ -0,0 +1,157 @@
+/*
+* 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/reset';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/components/options-tile/index' as *;
+
+$block-class: #{$prefix}--options-tile;
+
+:host(#{$prefix}-options-tile) {
+  position: relative;
+
+  .#{$block-class} {
+    @extend .#{$block-class} !optional;
+
+    position: relative;
+    display: block;
+    background: $layer-01;
+    border-block-end: 1px solid $border-subtle-01;
+
+    ::marker,
+    ::-webkit-details-marker {
+      display: none;
+      content: '';
+    }
+
+    &__header,
+    &__static-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      block-size: $spacing-09;
+      padding-inline: $spacing-05;
+      padding-inline-end: $spacing-05;
+    }
+
+    &__header {
+      cursor: pointer;
+
+      &:hover {
+        background: $background-hover;
+      }
+
+      &:focus {
+        outline: 2px solid $focus;
+        outline-offset: -2px;
+      }
+
+      &-left {
+        display: flex;
+        align-items: center;
+      }
+
+      &-right {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        block-size: $spacing-09;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+        padding-inline: $spacing-05;
+      }
+
+      &--has-toggle {
+        inline-size: calc(100% - ($spacing-09 + ($spacing-05 * 3)));
+      }
+    }
+
+    &__title {
+      @include type.type-style('heading-compact-01');
+
+      &-block {
+        margin-inline-end: $spacing-05;
+        margin-inline-start: $spacing-05;
+      }
+    }
+
+    &__summary {
+      @include type.type-style('helper-text-01');
+
+      display: flex;
+      align-items: center;
+      color: $text-secondary;
+      gap: $spacing-02;
+      margin-block-start: $spacing-02;
+
+      &--locked {
+        color: $text-secondary;
+      }
+
+      &--warn {
+        color: $text-primary;
+
+        svg {
+          color: $support-warning;
+
+          path[fill='none'] {
+            fill: $black-100;
+          }
+        }
+      }
+
+      &-icon {
+        flex-shrink: 0;
+      }
+
+      &-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    &__body {
+      padding-block-end: $spacing-06;
+      padding-block-start: $spacing-03;
+      padding-inline: $spacing-05;
+      padding-inline-start: $spacing-09;
+    }
+  }
+
+  .#{$block-class}--lg {
+    .#{$block-class}__summary {
+      margin-block-start: $spacing-01;
+    }
+  }
+
+  .#{$block-class}--xl {
+    .#{$block-class}__header {
+      block-size: $spacing-10;
+    }
+
+    .#{$block-class}__summary {
+      margin-block-start: $spacing-01;
+    }
+  }
+
+  .#{$block-class}--open {
+    .#{$block-class}__chevron {
+      transform: rotate(-180deg);
+    }
+
+    .#{$block-class}__summary {
+      display: none;
+    }
+  }
+}

package/scss/components/options-tile/story-styles.scss

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing' as *;
+
+.options-tile-stories__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  min-block-size: 100vh;
+}
+
+.options-tile-stories__viewport {
+  inline-size: 80vw;
+  max-inline-size: 48rem;
+  min-inline-size: 16rem;
+}
+
+.options-tile-stories__body p {
+  @include type.type-style('body-01');
+
+  margin-block-end: $spacing-05;
+}
+
+.options-tile-stories__dropdown:first-of-type {
+  margin-block-end: $spacing-05;
+}

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

@@ -43,9 +43,11 @@
   }
 }
 
-:host(#{$prefix}-overflow-menu[disabled]:hover),
-:host(#{$prefix}-breadcrumb-overflow-menu[disabled]:hover) {
-  background-color: transparent;
+@media (any-hover: hover) {
+  :host(#{$prefix}-overflow-menu[disabled]:hover),
+  :host(#{$prefix}-breadcrumb-overflow-menu[disabled]:hover) {
+    background-color: transparent;
+  }
 }
 
 :host(#{$prefix}-overflow-menu[open]),
@@ -54,8 +56,10 @@
   box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3);
   transition: none;
 
-  :hover {
-    background-color: $layer;
+  @media (any-hover: hover) {
+    :hover {
+      background-color: $layer;
+    }
   }
 }
 
@@ -124,7 +128,6 @@
     inline-size: $spacing-05;
     min-block-size: 1.125rem;
 
-    &:hover,
     &:active,
     &:focus {
       box-sizing: border-box;
@@ -137,14 +140,29 @@
       }
     }
 
+    @media (any-hover: hover) {
+      &:hover {
+        box-sizing: border-box;
+        background: none;
+        box-shadow: none;
+        outline-offset: 0;
+
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+
     &:active,
     &:focus {
       outline: 1px solid $focus;
     }
 
-    &:hover {
-      &::after {
-        background: $link-primary-hover;
+    @media (any-hover: hover) {
+      &:hover {
+        &::after {
+          background: $link-primary-hover;
+        }
       }
     }
 
@@ -176,8 +194,10 @@
   transform: translateY(4px);
 }
 
-:host(#{$prefix}-overflow-menu[breadcrumb]:hover) ::slotted([slot='icon']) {
-  fill: $link-primary-hover;
+@media (any-hover: hover) {
+  :host(#{$prefix}-overflow-menu[breadcrumb]:hover) ::slotted([slot='icon']) {
+    fill: $link-primary-hover;
+  }
 }
 
 :host(#{$prefix}-overflow-menu[breadcrumb]:active) ::slotted([slot='icon']) {

package/scss/components/search/search.scss

@@ -41,6 +41,13 @@ $css--plex: true !default;
   outline: none;
 }
 
+:host(#{$prefix}-search[expandable]:not([expanded])) {
+  .#{$prefix}--search-input {
+    border: 0;
+    background: none;
+  }
+}
+
 :host(#{$prefix}-search[expandable][expanded]) {
   @extend .#{$prefix}--search--expanded;
 

package/scss/components/select/select.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2024
+// Copyright IBM Corp. 2020, 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.
@@ -75,8 +75,12 @@ $divider-width: 1px;
   @extend .#{$prefix}--select--slug;
 }
 
-:host(#{$prefix}-select[readonly]) select {
-  pointer-events: none;
+:host(#{$prefix}-select[readonly]) {
+  @extend .#{$prefix}--select--readonly;
+
+  select {
+    pointer-events: none;
+  }
 }
 
 :host(#{$prefix}-select[pagination]) {

package/scss/components/slider/slider.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.
@@ -12,6 +12,8 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/slider';
 @use '@carbon/styles/scss/type' as type;
 @use '@carbon/styles/scss/utilities/layout' as *;
+@use '@carbon/styles/scss/border-radius' as *;
+@use '@carbon/styles/scss/feature-flags' as flags;
 
 :host(#{$prefix}-slider),
 :host(#{$prefix}-slider-skeleton) {
@@ -78,7 +80,12 @@ $css--plex: true !default;
 
 :host(#{$prefix}-slider-input[readonly]) {
   input {
-    background-color: transparent;
+    background: transparent;
+    border-block-end-color: var(--cds-border-subtle);
+
+    @if flags.enabled('enable-v12-release') {
+      border-radius: $border-radius-00;
+    }
   }
 }
 .#{$prefix}--slider__thumb-wrapper:focus-within .#{$prefix}--slider__thumb-icon,

package/scss/components/structured-list/structured-list.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.
@@ -72,13 +72,15 @@ $css--plex: true !default;
 }
 
 // selection
-:host(#{$prefix}-structured-list-row[selection-value]:hover) {
-  background-color: $layer-hover;
-  border-block-end: 1px solid $layer-hover;
-  cursor: pointer;
-
-  ::slotted(#{$prefix}-structured-list-cell) {
-    color: $text-primary;
+@media (any-hover: hover) {
+  :host(#{$prefix}-structured-list-row[selection-value]:hover) {
+    background-color: $layer-hover;
+    border-block-end: 1px solid $layer-hover;
+    cursor: pointer;
+
+    ::slotted(#{$prefix}-structured-list-cell) {
+      color: $text-primary;
+    }
   }
 }
 

package/scss/components/tabs/tabs.scss

@@ -88,6 +88,7 @@ $inset-transition: inset 110ms motion(standard, productive);
 
 :host(#{$prefix}-tabs[size='sm']) {
   @extend .#{$prefix}--layout--size-sm;
+  --#{$prefix}-tabs-icon-only-badge-indicator-offset: #{$spacing-02};
 }
 
 :host(#{$prefix}-tabs[size='md']) {
@@ -318,8 +319,14 @@ $inset-transition: inset 110ms motion(standard, productive);
       )
   )
   #{$prefix}-badge-indicator {
-  margin-block-start: $spacing-02;
-  margin-inline-end: $spacing-02;
+  margin-block-start: var(
+    --#{$prefix}-tabs-icon-only-badge-indicator-offset,
+    #{$spacing-03}
+  );
+  margin-inline-end: var(
+    --#{$prefix}-tabs-icon-only-badge-indicator-offset,
+    #{$spacing-03}
+  );
 }
 
 :host(#{$prefix}-tab[icon-only]),

package/scss/components/tag/tag-story.scss

@@ -0,0 +1,19 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+@use '@carbon/styles/scss/spacing' as *;
+
+.tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-02;
+}
+
+.tag-group--column {
+  flex-direction: column;
+  padding: $spacing-05;
+}

package/scss/components/tag/tag.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.
@@ -72,6 +72,8 @@ $css--plex: true !default;
 :host(#{$prefix}-dismissible-tag) #{$prefix}-tooltip {
   @extend .#{$prefix}--icon-tooltip;
   @extend .#{$prefix}--tag-label-tooltip;
+
+  display: inline-flex;
 }
 
 :host(#{$prefix}-dismissible-tag) .#{$prefix}--tag__close-icon {
@@ -109,7 +111,6 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-tag[size='lg']),
-:host(#{$prefix}-dismissible-tag[size='lg']),
 :host(#{$prefix}-tag-skeleton[size='lg']) {
   @extend .#{$prefix}--layout--size-lg;
   @extend .#{$prefix}--tag--lg;
@@ -117,6 +118,10 @@ $css--plex: true !default;
   padding-inline: $spacing-04;
 }
 
+:host(#{$prefix}-dismissible-tag[size='lg']) {
+  @extend .#{$prefix}--layout--size-lg;
+}
+
 :host(#{$prefix}-tag[size='lg'][has-custom-icon]),
 :host(#{$prefix}-dismissible-tag[size='lg'][has-custom-icon]),
 :host(#{$prefix}-tag-skeleton[size='lg'][has-custom-icon]) {
@@ -191,20 +196,19 @@ $css--plex: true !default;
   @include tag-theme(
     $background-inverse,
     $text-inverse,
-    $background-inverse-hover
+    $background-inverse-hover,
+    $close-focus-color: $focus-inverse
   );
 }
 
 :host(#{$prefix}-dismissible-tag[type='outline']:not([disabled])),
 :host(#{$prefix}-tag[type='outline']:not([disabled])) {
-  @include tag-theme($background, $text-primary, $layer-hover);
-
-  outline: 1px solid $background-inverse;
-  outline-offset: -1px;
-}
-
-:host(#{$prefix}-tag[disabled]) {
-  @extend .#{$prefix}--tag--disabled;
+  @include tag-theme(
+    $background,
+    $text-primary,
+    $layer-hover,
+    $outline-color: $background-inverse
+  );
 }
 
 :host(#{$prefix}-tag[filter]) {
@@ -234,11 +238,13 @@ $css--plex: true !default;
 :host(#{$prefix}-dismissible-tag[disabled]),
 :host(#{$prefix}-tag[filter][disabled]) {
   .#{$prefix}--tag__close-icon {
+    background-color: transparent;
     cursor: not-allowed;
 
-    &,
-    &:hover {
-      background-color: transparent;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: transparent;
+      }
     }
   }
 }
@@ -249,15 +255,17 @@ $css--plex: true !default;
   background-color: $layer;
   color: $text-disabled;
 
-  &:hover {
-    background-color: $layer;
-    cursor: not-allowed;
+  @media (any-hover: hover) {
+    &:hover {
+      background-color: $layer;
+      cursor: not-allowed;
+    }
   }
 }
 
 :host(#{$prefix}-dismissible-tag[disabled]),
 :host(#{$prefix}-tag[disabled]) {
-  @extend .#{$prefix}--tag--disabled;
+  @include tag-theme($layer, $text-disabled);
 }
 
 // Skeleton state

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

@@ -8,7 +8,9 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/feature-flags' as flags;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/text-input/index';
@@ -64,5 +66,25 @@ $css--plex: true !default;
     @include ai-gradient;
 
     padding-inline-end: $spacing-08;
+
+    @if flags.enabled('enable-v12-release') {
+      background:
+        linear-gradient(
+            0deg,
+            $ai-aura-start-sm 0%,
+            15%,
+            $ai-aura-end 50%,
+            transparent 100%
+          )
+          padding-box,
+        linear-gradient($field, $field) padding-box,
+        linear-gradient(
+            to bottom,
+            $ai-border-start calc(100% - 4px),
+            $ai-border-strong 100%
+          )
+          border-box;
+      border-block-end-color: transparent;
+    }
   }
 }

package/scss/components/ui-shell/side-nav.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.
@@ -126,12 +126,14 @@ $css--plex: true !default;
   padding-inline-start: 4.5rem;
 }
 
-:host(#{$prefix}-side-nav-item) .#{$prefix}--side-nav__link:hover,
-:host(#{$prefix}-side-nav-menu) .#{$prefix}--side-nav__submenu:hover,
-:host(#{$prefix}-side-nav-menu-item) .#{$prefix}--side-nav__link:hover {
-  // TODO: audit
-  background-color: $background-hover;
-  color: $text-primary;
+@media (any-hover: hover) {
+  :host(#{$prefix}-side-nav-item) .#{$prefix}--side-nav__link:hover,
+  :host(#{$prefix}-side-nav-menu) .#{$prefix}--side-nav__submenu:hover,
+  :host(#{$prefix}-side-nav-menu-item) .#{$prefix}--side-nav__link:hover {
+    // TODO: audit
+    background-color: $background-hover;
+    color: $text-primary;
+  }
 }
 
 :host(#{$prefix}-header-side-nav-items) {

package/telemetry.yml

@@ -297,6 +297,13 @@ collect:
         - custom-styles
         # cds-badge-indicator
         - count
+        # cds-big-number
+        - fraction-digits
+        - loading
+        - percentage
+        - total
+        - trending
+        - truncate
         # cds-breadcrumb
         - no-trailing-slash
         # cds-breadcrumb-link
@@ -311,6 +318,21 @@ collect:
         # cds-clickable-tile
         - ai-label
         - slug
+        # cds-coachmark
+        - drag-aria-label
+        - floating
+        - oncds-coachmark-closed
+        - oncds-coachmark-opened
+        - position
+        - selector-primary-focus
+        # cds-coachmark-beacon
+        - oncds-coachmark-beacon-clicked
+        # cds-coachmark-header
+        - closeIconDescription
+        - dragIconDescription
+        # cds-coachmark-tagline
+        - oncds-coachmark-tagline-close
+        - oncds-coachmark-tagline-cta-click
         # cds-code-snippet
         - copy-text
         - hide-copy-button
@@ -346,6 +368,19 @@ collect:
         - oncds-dismissible-tag-beingclosed
         - oncds-dismissible-tag-closed
         - tag-title
+        # cds-edit-in-place
+        - cancel-label
+        - edit-always-visible
+        - edit-label
+        - inherit-typography
+        - oncds-edit-in-place-blur
+        - oncds-edit-in-place-cancel
+        - oncds-edit-in-place-change
+        - oncds-edit-in-place-save
+        - read-only-label
+        - read-only-toggletip-text
+        - save-label
+        - toggletip-alignment
         # cds-expandable-tile
         - oncds-expandable-tile-beingtoggled
         - oncds-expandable-tile-toggled
@@ -428,6 +463,14 @@ collect:
         # cds-operational-tag
         - oncds-operational-tag-beforeselected
         - oncds-operational-tag-selected
+        # cds-options-tile
+        - locked
+        - lockedText
+        - oncds-options-tile-close
+        - oncds-options-tile-open
+        - titleId
+        - titleText
+        - warnText
         # cds-ordered-list
         - native
         # cds-overflow-menu-item
@@ -655,11 +698,21 @@ collect:
         - dialog
         # General - size
         - 2xl
+        - default
         - lg
         - md
         - sm
         - xl
         - xs
+        # General - tooltip-alignment
+        - bottom
+        - bottom-left
+        - bottom-right
+        - left
+        - right
+        - top
+        - top-left
+        - top-right
         # General - type
         - expand
         - number
@@ -671,6 +724,15 @@ collect:
         - md
         - sm
         - xl
+        # cds-edit-in-place - toggletip-alignment
+        - bottom
+        - bottom-left
+        - bottom-right
+        - left
+        - right
+        - top
+        - top-left
+        - top-right
         # cds-fluid-date-picker-skeleton - date-picker-type
         - range
         - simple