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

package/scss/components/card/card.scss

@@ -0,0 +1,212 @@
+//
+// 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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+// `@use` runs the module's `_index.scss` once, which already includes the
+// `card.card` mixin — do not `@include` it again here or every rule from
+// the shared @carbon/styles card mixin gets emitted twice.
+@use '@carbon/styles/scss/components/card' as card;
+
+:host-context(#{$prefix}-card-header) .#{$prefix}--card__title {
+  margin-block: $spacing-05;
+}
+
+:host(#{$prefix}-card-title) .#{$prefix}--card__title-text-row {
+  // Base / fallback — productive is the default density.
+  @include type-style('heading-compact-02');
+}
+
+:host-context(#{$prefix}-card[density='productive'])
+  .#{$prefix}--card__title-text-row {
+  @include type-style('heading-compact-02');
+}
+
+:host-context(#{$prefix}-card[density='expressive'])
+  .#{$prefix}--card__title-text-row {
+  @include type-style('heading-03');
+}
+
+:host-context(#{$prefix}-card[disabled]) .#{$prefix}--card__label {
+  color: $text-disabled;
+}
+
+:host-context(#{$prefix}-card[disabled]) .#{$prefix}--card__description {
+  color: $text-disabled;
+}
+
+:host-context(#{$prefix}-card[horizontal]) .#{$prefix}--card__body {
+  flex: 1 0 auto;
+}
+
+:host-context(#{$prefix}-card[horizontal]) .#{$prefix}--card__footer {
+  margin-block-start: auto;
+}
+
+:host-context(#{$prefix}-card[has-ai-label]) .#{$prefix}--card__title {
+  padding-inline-end: calc($spacing-07 + $spacing-05);
+}
+
+:host-context(#{$prefix}-card[has-ai-label]) .#{$prefix}--card__label {
+  padding-inline-end: calc($spacing-07 + $spacing-05);
+}
+
+:host-context(#{$prefix}-card[has-ai-label]) .#{$prefix}--card__description {
+  padding-inline-end: calc($spacing-07 + $spacing-05);
+}
+
+:host-context(#{$prefix}-card[has-ai-label][has-actions])
+  .#{$prefix}--card__title {
+  padding-inline-end: $spacing-13;
+}
+
+:host-context(#{$prefix}-card[has-ai-label][has-actions])
+  .#{$prefix}--card__label {
+  padding-inline-end: $spacing-13;
+}
+
+:host-context(#{$prefix}-card[has-ai-label][has-actions])
+  .#{$prefix}--card__description {
+  padding-inline-end: $spacing-13;
+}
+
+:host-context(#{$prefix}-card-header[has-title-media])
+  .#{$prefix}--card__title {
+  grid-column: 2;
+  margin-inline-start: 0;
+}
+
+:host(#{$prefix}-card-footer[has-actions]) .#{$prefix}--card__footer {
+  overflow: hidden;
+  justify-content: flex-end;
+  padding: 0;
+  border-block-start: 1px solid $border-subtle;
+  gap: 1px;
+}
+
+:host(#{$prefix}-card-action:not([icon-only])) {
+  flex: 1 0 0;
+  min-inline-size: 0;
+
+  .#{$prefix}--card__action {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--card__action > ::slotted(*) {
+    inline-size: 100%;
+    max-inline-size: none;
+  }
+}
+
+// Icon-only actions: fixed width. The footer container's justify-content:flex-end
+// pushes the whole group to the trailing edge, so no per-item margin trick needed.
+// Original: .cds--card__footer > .cds--card__action:has(.cds--btn--icon-only)
+
+:host(#{$prefix}-card-action[icon-only]) {
+  flex: 0 0 auto;
+}
+
+// ─── Host-level display ───────────────────────────────────────────────────────
+
+:host(#{$prefix}-card) {
+  display: block;
+}
+
+:host(#{$prefix}-card) a[part='link'] {
+  color: inherit;
+  text-decoration: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+:host(#{$prefix}-card-header) {
+  display: block;
+}
+
+:host(#{$prefix}-card-body) {
+  display: block;
+}
+
+:host(#{$prefix}-card-footer) {
+  display: block;
+}
+
+:host(#{$prefix}-card-media) {
+  display: block;
+}
+
+:host(#{$prefix}-card-header-media) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  grid-column: 1 / -1;
+  margin-block: $spacing-05;
+  margin-inline: $spacing-05;
+  max-block-size: $spacing-10;
+}
+
+:host(#{$prefix}-card-header-media) .#{$prefix}--card__header-media {
+  display: contents;
+}
+
+:host(#{$prefix}-card-title) {
+  display: block;
+  min-inline-size: 0;
+}
+
+:host(#{$prefix}-card-title-media) {
+  display: block;
+}
+
+:host(#{$prefix}-card-header)
+  .#{$prefix}--card__header
+  ::slotted(#{$prefix}-card-actions) {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  block-size: $spacing-07;
+  gap: $spacing-02;
+  inline-size: 50%;
+  inset-block-start: $spacing-03;
+  inset-inline-end: $spacing-03;
+  max-inline-size: 50%;
+}
+
+:host(#{$prefix}-card-actions) {
+  // Provide a positioning context for the shadow-DOM overflow menu.
+  position: relative;
+}
+
+// The overflow menu renders in shadow DOM but visually aligns with the
+// sentinel (which is hidden when not overflowing). `position:absolute` takes
+// it out of flow; the host's `position:relative` is the containing block.
+:host(#{$prefix}-card-actions) .#{$prefix}--card__actions-overflow-menu {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+
+:host(#{$prefix}-card-action) {
+  display: block;
+}
+
+// The overflow handler sets data-hidden on items that don't fit.
+// This hides them from view while keeping them in the DOM for measurement.
+:host(#{$prefix}-card-action[data-hidden]) {
+  display: none;
+}

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

@@ -658,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