@carbon/web-components 2.62.0 → 2.63.0

package/scss/components/tag/tag.scss

@@ -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]) {
@@ -261,7 +265,7 @@ $css--plex: true !default;
 
 :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/user-avatar/story-styles.scss

@@ -0,0 +1,53 @@
+/*
+ * 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/theme';
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/spacing' as *;
+
+#main-content {
+  align-content: center;
+  padding: $spacing-05;
+  min-block-size: 100vh;
+}
+
+.user-avatar-story__theme-section {
+  padding: $spacing-05;
+  inline-size: 100%;
+
+  &--white {
+    @include theme.theme(themes.$white, true);
+
+    background: theme.$background;
+    color: theme.$text-primary;
+  }
+
+  &--g10 {
+    @include theme.theme(themes.$g10, true);
+
+    background: theme.$background;
+    color: theme.$text-primary;
+  }
+
+  &--g90 {
+    @include theme.theme(themes.$g90, true);
+
+    background: theme.$background;
+    color: theme.$text-primary;
+  }
+
+  &--g100 {
+    @include theme.theme(themes.$g100, true);
+
+    background: theme.$background;
+    color: theme.$text-primary;
+  }
+}
+
+.user-avatar-story__theme-text {
+  margin-block-end: $spacing-03;
+}

package/scss/components/user-avatar/user-avatar.scss

@@ -0,0 +1,113 @@
+/*
+ * 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/type';
+@use '@carbon/styles/scss/colors' as *;
+
+@use '@carbon/styles/scss/components/user-avatar' as *;
+$block-class: #{$prefix}--user-avatar;
+
+:host(#{$prefix}-user-avatar) {
+  display: inline-block;
+
+  .#{$block-class} {
+    box-sizing: border-box;
+  }
+}
+
+:host(#{$prefix}-user-avatar) .#{$block-class}--xl {
+  ::slotted([slot='rendericon']) {
+    block-size: $spacing-07;
+    inline-size: $spacing-07;
+  }
+}
+
+:host(#{$prefix}-user-avatar) .#{$block-class}--lg {
+  ::slotted([slot='rendericon']) {
+    block-size: $spacing-06;
+    inline-size: $spacing-06;
+  }
+}
+
+:host(#{$prefix}-user-avatar) .#{$block-class}--md {
+  ::slotted([slot='rendericon']) {
+    block-size: $spacing-04 + $spacing-03;
+    inline-size: $spacing-04 + $spacing-03;
+  }
+}
+
+:host(#{$prefix}-user-avatar) .#{$block-class}--sm {
+  ::slotted([slot='rendericon']) {
+    block-size: $spacing-05;
+    inline-size: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-user-avatar) .#{$block-class}__tooltip-trigger {
+  padding: 0;
+  border: 0;
+  background: none;
+  outline: none;
+}
+
+:host(#{$prefix}-user-avatar) .#{$block-class}__tooltip-content {
+  --cds-tooltip-padding-block: #{$spacing-01};
+
+  &:focus-within {
+    outline: $spacing-01 solid $focus;
+    outline-offset: 1px;
+  }
+}
+
+@mixin setBgColor($color) {
+  background-color: $color;
+}
+
+// this mixin allows you to set background color based on the lighter themes such as g10 and white
+@mixin setLightBg($order, $color) {
+  :host(#{$prefix}-user-avatar) .#{$block-class}--#{$order},
+  :host(#{$prefix}-user-avatar[theme='light']) .#{$block-class}--#{$order} {
+    @include setBgColor($color);
+  }
+}
+
+@mixin setDarkBg($order, $color) {
+  :host(#{$prefix}-user-avatar[theme='dark']) .#{$block-class}--#{$order} {
+    @include setBgColor($color);
+  }
+}
+
+@include setLightBg(order-1-cyan, $cyan-60);
+@include setLightBg(order-2-gray, $gray-60);
+@include setLightBg(order-3-green, $green-60);
+@include setLightBg(order-4-magenta, $magenta-60);
+@include setLightBg(order-5-purple, $purple-60);
+@include setLightBg(order-6-teal, $teal-60);
+@include setLightBg(order-7-cyan, $cyan-80);
+@include setLightBg(order-8-gray, $gray-80);
+@include setLightBg(order-9-green, $green-80);
+@include setLightBg(order-10-magenta, $magenta-80);
+@include setLightBg(order-11-purple, $purple-80);
+@include setLightBg(order-12-teal, $teal-80);
+@include setDarkBg(order-1-cyan, $cyan-50);
+@include setDarkBg(order-2-gray, $gray-50);
+@include setDarkBg(order-3-green, $green-50);
+@include setDarkBg(order-4-magenta, $magenta-50);
+@include setDarkBg(order-5-purple, $purple-50);
+@include setDarkBg(order-6-teal, $teal-50);
+@include setDarkBg(order-7-cyan, $cyan-30);
+@include setDarkBg(order-8-gray, $gray-30);
+@include setDarkBg(order-9-green, $green-30);
+@include setDarkBg(order-10-magenta, $magenta-30);
+@include setDarkBg(order-11-purple, $purple-30);
+@include setDarkBg(order-12-teal, $teal-30);

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
@@ -615,6 +658,11 @@ collect:
         - is-expanded
         - oneventSelected
         - oneventToggled
+        # cds-user-avatar
+        - background-color
+        - image
+        - image-description
+        - theme
         # feature-flags
         - enable-experimental-focus-wrap-without-sentinels
         - enable-focus-wrap-without-sentinels
@@ -655,11 +703,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 +729,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