@carbon/web-components 2.61.0 → 2.62.0

package/scss/components/side-panel/side-panel.scss

@@ -0,0 +1,363 @@
+/*
+ * Copyright IBM Corp. 2023, 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 'sass:map';
+
+/* Other Carbon settings. */
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/utilities' as *;
+
+@use '@carbon/styles/scss/components/side-panel' as side-panel-styles;
+@use '@carbon/styles/scss/components/side-panel/side-panel-variables' as spv;
+@use '@carbon/styles/scss/components/action-set' as action-set-styles;
+
+// Emit Carbon side-panel and action-set class rules
+@include side-panel-styles.side-panel;
+@include action-set-styles.action-set;
+
+$block-class: #{$prefix}--side-panel;
+$block-class-action-set: #{$prefix}--action-set;
+
+:host(#{$prefix}-side-panel) {
+  /* Replaces use of Framer for slide in / out animation */
+  --#{$block-class}--displaced: 100%;
+
+  * {
+    /* not sure why things are coming out as content-box */
+    box-sizing: border-box;
+  }
+
+  .#{$block-class} {
+    @extend .#{$block-class} !optional;
+
+    /* for actions container query - note this changes the size calculation */
+    container-name: side-panel;
+    container-type: inline-size;
+
+    &[placement='left'] {
+      --#{$block-class}--displaced: -100%;
+    }
+
+    &[opening] {
+      transform: translateX(var(--#{$block-class}--displaced));
+    }
+
+    &[open] {
+      transform: translateX(0);
+      transition: all $duration-moderate-02 motion(standard, productive);
+    }
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      &[open] {
+        transition: none;
+      }
+    }
+
+    &[closing] {
+      transform: translateX(var(--#{$block-class}--displaced));
+      transition: all $duration-moderate-01 motion(exit, productive);
+    }
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      &[closing] {
+        transition: none;
+      }
+    }
+
+    &[placement='right'] {
+      @extend .#{$block-class}--right-placement !optional;
+
+      /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
+      border-inline-end: none;
+      inset-inline-end: 0;
+    }
+
+    &[placement='left'] {
+      @extend .#{$block-class}--left-placement !optional;
+
+      /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
+      border-inline-end: 1px solid $border-subtle-01;
+      inset-inline-start: 0;
+    }
+
+    @each $size, $size_value in spv.$side-panel-sizes {
+      &[size='#{$size}'] {
+        @extend .#{$block-class}--#{$size} !optional;
+      }
+    }
+
+    &[condensed-actions] {
+      @extend .#{$block-class}--condensed-actions !optional;
+    }
+  }
+
+  #{$prefix}-layer {
+    display: contents;
+  }
+
+  .#{$block-class}__overlay {
+    &[opening] {
+      opacity: 0;
+    }
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      &[open] {
+        opacity: 1;
+        transition: none;
+      }
+    }
+
+    &[open] {
+      opacity: 1;
+      transition: all $duration-moderate-02 motion(standard, productive);
+    }
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      &[closing] {
+        opacity: 0;
+        transition: none;
+      }
+    }
+
+    &[closing] {
+      opacity: 0;
+      transition: all $duration-moderate-01 motion(exit, productive);
+    }
+  }
+
+  // Slide-in panels should use border not shadows since they don't layer
+  .#{$block-class}[slide-in]:not(.#{$block-class}__overlay) {
+    box-shadow: none;
+  }
+
+  .#{$block-class}__header {
+    &::before {
+      z-index: 99; /* must be higher than action toolbar */
+    }
+
+    &[detail-step] {
+      @extend .#{$block-class}__header--on-detail-step !optional;
+    }
+
+    &[no-title-animation] {
+      @extend .#{$block-class}__header--no-title-animation !optional;
+    }
+
+    &[reduced-motion] {
+      @extend .#{$block-class}__header--reduced-motion !optional;
+    }
+
+    &[has-action-toolbar] {
+      margin-block-end: $spacing-03;
+      padding-block-end: 0;
+    }
+  }
+
+  .#{$block-class} .#{$block-class}__header[has-action-toolbar]::before {
+    content: initial; /* remove border below */
+  }
+
+  .#{$block-class}__custom-header-wrapper--hidden {
+    position: absolute;
+    overflow: hidden;
+    padding: 0;
+    border: 0;
+    margin: -1px;
+    block-size: 1px;
+    clip: rect(0, 0, 0, 0);
+    inline-size: 1px;
+    visibility: inherit;
+    white-space: nowrap;
+  }
+
+  .#{$block-class}__title-text {
+    padding-inline-end: 0;
+  }
+
+  .#{$block-class}__subtitle-text {
+    &[hidden] {
+      @extend .#{$prefix}--visually-hidden !optional;
+
+      display: none;
+    }
+  }
+
+  .#{$block-class}__action-toolbar {
+    margin-block-end: 0;
+    padding-inline-start: 0;
+
+    &[hidden] {
+      @extend .#{$prefix}--visually-hidden !optional;
+    }
+
+    ::slotted(.#{$block-class}__action-toolbar-leading-button) {
+      margin-inline-end: $spacing-03;
+    }
+  }
+
+  .#{$block-class} .#{$block-class}__action-toolbar[hidden] {
+    @extend .#{$prefix}--visually-hidden !optional;
+  }
+
+  .#{$block-class}[has-slug] {
+    @extend .#{$block-class}--has-slug !optional;
+  }
+
+  .#{$block-class}[has-slug] [scrolls] {
+    /* override carbon ai removing background gradient */
+    background:
+      linear-gradient(
+          to top,
+          var(--cds-layer) 0%,
+          $ai-aura-start 0%,
+          15%,
+          $ai-aura-end 50%
+        )
+        padding-box,
+      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,
+      linear-gradient(to bottom, $ai-border-start, $ai-border-end) border-box,
+      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
+  }
+
+  [scrolls] {
+    @extend .#{$block-class}--scrolls !optional;
+  }
+
+  @mixin actions-placement() {
+    --flex-direction: row;
+    /* non carbon for IBM Products adjustment */
+    flex-direction: var(--flex-direction);
+
+    ::slotted(#{$prefix}-button) {
+      flex: 0 1 25%;
+      max-inline-size: to-rem(232px);
+    }
+
+    ::slotted(#{$prefix}-button[kind='ghost']) {
+      flex: 1 1 25%;
+      max-inline-size: none;
+    }
+
+    ::slotted(#{$prefix}-button[hidden]) {
+      @extend .#{$prefix}--visually-hidden !optional;
+
+      display: none;
+    }
+
+    // -1 in @container query is for 1px left border
+    @container (width <= #{map.get(spv.$side-panel-sizes, lg)}) {
+      &[actions-multiple='double'] ::slotted(#{$prefix}-button) {
+        // double on lg uses 50%
+        flex: 0 1 50%;
+        max-inline-size: none;
+      }
+    }
+
+    // -1 in @container query is for 1px left border
+    @container (width <= #{map.get(spv.$side-panel-sizes, md)}) {
+      // md is 50% for two and 100% for one
+      // column for triple
+      &[actions-multiple] ::slotted(#{$prefix}-button) {
+        flex: 0 0 100%;
+        max-inline-size: none;
+      }
+
+      &[actions-multiple='double'] ::slotted(#{$prefix}-button) {
+        flex: 0 1 50%;
+        max-inline-size: none;
+      }
+
+      &[actions-multiple='triple'] {
+        --flex-direction: column-reverse;
+
+        ::slotted(#{$prefix}-button) {
+          flex: initial;
+          inline-size: 100%;
+          max-inline-size: none;
+        }
+      }
+    }
+
+    // -1 in @container query is for 1px left border
+    @container (width <= #{map.get(spv.$side-panel-sizes, sm)}) {
+      --flex-direction: column-reverse;
+
+      ::slotted(#{$prefix}-button) {
+        flex: initial;
+        inline-size: 100%;
+        max-inline-size: none;
+      }
+    }
+  }
+
+  .#{$block-class}__actions-container {
+    @extend .#{$block-class-action-set} !optional;
+
+    inline-size: 100%;
+
+    &[hidden] {
+      @extend .#{$prefix}--visually-hidden !optional;
+
+      display: none;
+    }
+
+    // Override ActionSet styles for side-panel specific behavior
+    // Single button should always be full width in side-panel
+    &[actions-multiple='single'] ::slotted(#{$prefix}-button) {
+      flex: 0 0 100%;
+      max-inline-size: none;
+    }
+
+    // Double buttons should be 50% width each
+    &[actions-multiple='double'] ::slotted(#{$prefix}-button) {
+      flex: 0 1 50%;
+      max-inline-size: none;
+    }
+
+    // Triple buttons should be 33% width each
+    &[actions-multiple='triple'] ::slotted(#{$prefix}-button) {
+      flex: 0 1 33.33%;
+      max-inline-size: none;
+    }
+
+    @include actions-placement();
+  }
+
+  .sentinel {
+    @extend .#{$prefix}--visually-hidden !optional;
+  }
+
+  .#{$block-class}__close-button {
+    inline-size: 2rem;
+  }
+
+  .#{$block-class}__resizer {
+    position: absolute;
+    z-index: z('modal');
+    inset-block-end: 0;
+    inset-block-start: 0;
+    --resizer-thickness: 4px;
+    --resizer-grab-thickness: 4px;
+    --resizer-grab-color: transparent;
+  }
+
+  .#{$block-class}[placement='right'] .#{$block-class}__resizer {
+    inset-inline-start: 0;
+  }
+
+  .#{$block-class}[placement='left'] .#{$block-class}__resizer {
+    inset-inline-end: 0;
+  }
+}

package/scss/components/side-panel/story-styles.scss

@@ -0,0 +1,51 @@
+/*
+* Copyright IBM Corp. 2023, 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/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+$story-prefix: 'side-panel-stories__';
+
+.#{$story-prefix}body-content {
+  display: flex;
+  flex-direction: column;
+  padding: $spacing-05;
+  gap: $spacing-05;
+}
+
+.#{$story-prefix}text-inputs {
+  display: flex;
+  gap: $spacing-05;
+
+  > * {
+    flex-basis: 50%;
+  }
+}
+
+.#{$story-prefix}story-container {
+  position: fixed;
+  display: grid;
+  block-size: 100vh;
+  grid-template-rows: 3rem 1fr;
+  inline-size: 100vw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.#{$story-prefix}story-header {
+  background: $background-inverse;
+}
+
+.#{$story-prefix}story-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{$story-prefix}custom-header-content {
+  margin-block-end: $spacing-03;
+}

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

@@ -342,6 +342,10 @@ $inset-transition: inset 110ms motion(standard, productive);
     --#{$prefix}-popover-offset: #{convert.to-rem(8px)};
   }
 
+  #{$prefix}-tooltip-content {
+    --#{$prefix}-popover-offset: #{convert.to-rem(8px)};
+  }
+
   #{$prefix}-tooltip::part(popover-container) {
     display: block;
     block-size: 100%;

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.
@@ -234,11 +234,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,9 +251,11 @@ $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;
+    }
   }
 }
 

package/scss/components/textarea/textarea.scss

@@ -15,6 +15,8 @@ $css--plex: true !default;
 :host(#{$prefix}-textarea) {
   @include emit-layout-tokens();
 
+  display: flex;
+  flex-direction: column;
   outline: none;
   ::slotted(#{$prefix}-ai-label),
   ::slotted(#{$prefix}-slug) {
@@ -61,6 +63,10 @@ $css--plex: true !default;
   @include ai-gradient;
 }
 
+.#{$prefix}--text-area__wrapper {
+  flex: 1 1 auto;
+}
+
 .#{$prefix}--text-area__wrapper--cols {
   display: inline-flex;
 }

package/scss/components/truncated-text/truncated-text-story.scss

@@ -0,0 +1,14 @@
+//
+// 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';
+
+.truncated-text-stories__viewport {
+  @include type.type-style('body-01');
+
+  inline-size: 100%;
+  max-inline-size: 900px;
+}

package/scss/components/truncated-text/truncated-text.scss

@@ -0,0 +1,122 @@
+/*
+* 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/utilities' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/motion' as *;
+
+$block-class: #{$prefix}--truncated-text;
+
+// Common reset button style
+%reset-button {
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  line-height: inherit;
+}
+
+// Mixin for directional gradients
+@mixin gradient-bg($direction, $color) {
+  background: linear-gradient($direction, rgba(255, 255, 255, 0) 0%, $color 0%);
+}
+
+:host(#{$prefix}-truncated-text) {
+  display: block;
+  inline-size: 100%;
+
+  .#{$block-class}_transition {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: max-height $duration-fast-02 motion(standard, productive);
+    }
+  }
+
+  .#{$block-class}_content {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--line-clamp, 0);
+    text-overflow: clip;
+    white-space: normal;
+
+    &:focus-visible {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$block-class}_content--closing {
+    -webkit-line-clamp: none;
+  }
+
+  #{$prefix}-tooltip {
+    display: inline-flex;
+  }
+
+  .#{$block-class}_tooltip-trigger {
+    display: inline;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    cursor: default;
+    font: inherit;
+    text-align: inherit;
+
+    &:focus-visible {
+      @include focus-outline('outline');
+    }
+  }
+
+  button:focus-visible,
+  .#{$block-class}_button-expand:focus-visible,
+  .#{$block-class}_button-collapse:focus-visible {
+    @include focus-outline('outline');
+  }
+}
+
+.#{$block-class}_button-expand,
+.#{$block-class}_button-collapse {
+  @extend %reset-button;
+
+  padding: 0 $spacing-01;
+  color: theme.$link-primary;
+
+  &.#{$block-class}_button-hide {
+    display: none;
+  }
+}
+
+.#{$block-class}_button-expand {
+  &.#{$block-class}_button-layered {
+    background-color: theme.$layer;
+  }
+
+  // Gradient LTR
+  &:dir(ltr)::before {
+    @include gradient-bg(90deg, theme.$background);
+  }
+
+  &.#{$block-class}_button-layered:dir(ltr)::before {
+    @include gradient-bg(90deg, theme.$layer);
+  }
+
+  // Gradient RTL
+  &:dir(rtl)::before {
+    @include gradient-bg(270deg, theme.$background);
+  }
+
+  &.#{$block-class}_button-layered:dir(rtl)::before {
+    @include gradient-bg(270deg, theme.$layer);
+  }
+}
+
+.#{$block-class}_button-collapse {
+  background-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) {