@carbon/web-components 2.62.0 → 2.63.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.62.0",
+  "version": "2.63.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -11,7 +11,11 @@
     "directory": "packages/web-components"
   },
   "bugs": "https://github.com/carbon-design-system/carbon/issues",
+  "bin": {
+    "create-prefixed-build": "./bin/create-prefixed-build.js"
+  },
   "files": [
+    "bin/**/*",
     "custom-elements.json",
     "es/**/*",
     "es-custom/**/*",
@@ -51,9 +55,10 @@
     "build": "yarn clean && node tasks/build.js && yarn wca",
     "build:dist": "node tasks/build-dist.js",
     "build:cdn": "yarn clean && yarn build:dist",
-    "ci-check": "yarn wca && yarn typecheck",
+    "ci-check": "yarn registration-coverage && yarn wca && yarn typecheck",
     "clean": "rimraf es es-custom lib scss dist storybook-static storybook-static-v12 .storybook-v12/generated",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
+    "registration-coverage": "node tasks/registration-coverage.mjs",
     "serve": "node tasks/build.js --serve",
     "start": "yarn storybook",
     "storybook": "storybook dev -p 6011",
@@ -61,27 +66,28 @@
     "storybook:v12": "yarn storybook:v12:prepare && storybook dev -p 6012 --config-dir .storybook-v12",
     "storybook:v12:build": "yarn storybook:v12:prepare && storybook build --config-dir .storybook-v12 --output-dir storybook-static-v12",
     "storybook:v12:prepare": "node ../../tasks/prepare-v12-storybook.mjs .",
-    "test": "web-test-runner \"src/components/**/__tests__/**/*.js\" --node-resolve --concurrency=1",
+    "test": "web-test-runner --node-resolve --concurrency=1",
     "test:updateSnapshots": "yarn test --update-snapshots",
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "wca": "web-component-analyzer analyze src --outFile custom-elements.json",
+    "wca": "web-component-analyzer analyze src --outFile custom-elements.json && node tasks/wca-deprecation.mjs",
     "telemetry:config": "npx -y @ibm/telemetry-js-config-generator generate --wc --id 8cf8b3b8-a121-47d3-9eec-e4bea0ff23f5 --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components"
   },
   "dependencies": {
     "@carbon/icon-helpers": "10.47.0",
-    "@carbon/icons": "^11.87.0",
-    "@carbon/styles": "^1.114.0",
+    "@carbon/icons": "^11.88.0",
+    "@carbon/styles": "^1.115.0",
     "@carbon/utilities": "^0.25.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.10.2",
+    "@lit-labs/signals": "^0.3.0",
     "@lit/context": "^1.1.3",
     "lit": "^3.1.0",
     "lodash-es": "^4.17.21",
     "tslib": "^2.6.3"
   },
   "devDependencies": {
-    "@carbon/layout": "^11.58.0",
-    "@carbon/motion": "^11.51.0",
+    "@carbon/layout": "^11.59.0",
+    "@carbon/motion": "^11.52.0",
     "@juggle/resize-observer": "^3.4.0",
     "@mordech/vite-lit-loader": "^0.40.0",
     "@open-wc/testing": "^5.0.0",
@@ -97,7 +103,7 @@
     "@web/test-runner-puppeteer": "^1.0.0",
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "autoprefixer": "^10.4.0",
-    "cssnano": "^8.0.0",
+    "cssnano": "^9.0.0",
     "flatpickr": "4.6.13",
     "globby": "^16.0.0",
     "remark-gfm": "^4.0.0",
@@ -130,5 +136,5 @@
       }
     ]
   },
-  "gitHead": "7518c84ffd00f22434fe19d83119692c12fccb2f"
+  "gitHead": "acdc7d80f45eb01c892b1697403726c4dbc24a57"
 }

package/scss/components/ai-label/ai-label.scss

@@ -4,8 +4,6 @@
 * 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 'sass:map';
-
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/theme' as *;
@@ -16,26 +14,14 @@
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/components/slug/index' as *;
 
-// importing tag color tokens for the styling slug in tag component
-@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
-
-$colorMap: (
-  'red': tag-tokens.$tag-color-red,
-  'magenta': tag-tokens.$tag-color-magenta,
-  'purple': tag-tokens.$tag-color-purple,
-  'blue': tag-tokens.$tag-color-blue,
-  'cyan': tag-tokens.$tag-color-cyan,
-  'teal': tag-tokens.$tag-color-teal,
-  'green': tag-tokens.$tag-color-green,
-  'gray': tag-tokens.$tag-color-gray,
-  'cool-gray': tag-tokens.$tag-color-cool-gray,
-  'warm-gray': tag-tokens.$tag-color-warm-gray,
-  'high-contrast': $text-inverse,
-);
-
 :host(#{$prefix}-ai-label) {
   @extend .#{$prefix}--slug;
 
+  .#{$prefix}--slug__button {
+    border-color: transparent;
+    color: currentColor;
+  }
+
   .#{$prefix}--slug__text {
     @include font-family('sans');
   }
@@ -315,24 +301,29 @@ $colorMap: (
   }
 }
 
-@each $color, $token in $colorMap {
-  :host(#{$prefix}-ai-label[tag='#{$color}']) {
-    .#{$prefix}--slug__text {
-      color: $token;
-    }
+:host(#{$prefix}-ai-label[tag]) {
+  .#{$prefix}--slug__button {
+    margin-inline-start: to-rem(1px);
+  }
 
-    .#{$prefix}--slug__text::before {
-      background: $token;
-    }
+  .#{$prefix}--slug__text::before {
+    background-color: currentColor;
+  }
 
-    @media (any-hover: hover) {
-      button:hover {
-        border-color: $token;
+  @media (any-hover: hover) {
+    .#{$prefix}--slug__button:hover {
+      border-color: currentColor;
+      background: transparent;
+      box-shadow: none;
+      color: currentColor;
 
-        .#{$prefix}--slug__text::before {
-          background-color: $token;
-        }
+      .#{$prefix}--slug__text::before {
+        background-color: currentColor;
       }
     }
+
+    .#{$prefix}--slug__button:hover:active {
+      color: $text-secondary;
+    }
   }
 }

package/scss/components/big-number/big-number-skeleton.scss

@@ -0,0 +1,58 @@
+// 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 *;
+
+$skeleton-block-class: #{$prefix}--big-number-skeleton;
+
+:host(#{$prefix}-big-number-skeleton) {
+  .#{$skeleton-block-class} {
+    inline-size: $spacing-10;
+  }
+
+  .#{$skeleton-block-class}--lg {
+    inline-size: $spacing-11;
+  }
+
+  .#{$skeleton-block-class}--xl {
+    inline-size: $spacing-12;
+  }
+
+  .#{$skeleton-block-class}__label {
+    block-size: $spacing-04;
+    inline-size: 70%;
+    margin-block: 0 $spacing-03;
+  }
+
+  .#{$skeleton-block-class}__value::part(placeholder) {
+    margin: 0;
+    block-size: $spacing-08;
+    inline-size: 100%;
+  }
+
+  .#{$skeleton-block-class}.#{$skeleton-block-class}--lg
+    .#{$skeleton-block-class}__label {
+    margin-block: 0 $spacing-04;
+  }
+
+  .#{$skeleton-block-class}.#{$skeleton-block-class}--lg
+    .#{$skeleton-block-class}__value::part(placeholder) {
+    block-size: $spacing-09;
+  }
+
+  .#{$skeleton-block-class}.#{$skeleton-block-class}--xl
+    .#{$skeleton-block-class}__label {
+    margin-block: 0 $spacing-05;
+  }
+
+  .#{$skeleton-block-class}.#{$skeleton-block-class}--xl
+    .#{$skeleton-block-class}__value::part(placeholder) {
+    block-size: $spacing-10;
+  }
+}

package/scss/components/big-number/big-number.scss

@@ -0,0 +1,29 @@
+// 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/components/big-number' as big-number-styles;
+
+// Emit Carbon big-number class rules at file root (not inside :host)
+@include big-number-styles.big-number;
+
+$block-class: #{$prefix}--big-number;
+
+:host(#{$prefix}-big-number) {
+  .#{$block-class}__trend {
+    margin-block-start: $spacing-03;
+    vertical-align: top;
+  }
+
+  .#{$block-class}--xl {
+    .#{$block-class}__trend {
+      margin-block-start: $spacing-04;
+    }
+  }
+}

package/scss/components/big-number/story-styles.scss

@@ -0,0 +1,48 @@
+/*
+ * 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/config' as *;
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+$story-prefix: #{$prefix}--big-number-stories;
+
+#storybook-root #main-content {
+  padding: 0;
+}
+
+.#{$story-prefix}__viewport {
+  display: grid;
+  align-items: center;
+  padding: spacing.$spacing-05;
+  block-size: spacing.$spacing-13;
+}
+
+.custom-label {
+  @include type-style('label-01');
+
+  display: inline-block;
+  margin: 0;
+  color: $text-secondary;
+}
+
+.#{$prefix}--big-number--xl {
+  .custom-label {
+    @include type-style('body-compact-01');
+  }
+}
+
+.#{$story-prefix}__label-with-tooltip {
+  display: inline-flex;
+  align-items: center;
+  gap: spacing.$spacing-03;
+}
+
+.#{$story-prefix}__tooltip {
+  display: inline-flex;
+  align-items: center;
+}

package/scss/components/card/card-story.scss

@@ -0,0 +1,29 @@
+//
+// 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';
+
+#storybook-root {
+  // 2rem
+  padding-block-start: spacing.$spacing-07;
+}
+
+// Aligns the Enable/Disable toggle button to the card bottom in Disabled story
+.card-story-disabled-toggle {
+  display: flex;
+  align-items: flex-end;
+  padding-block-end: spacing.$spacing-05;
+}
+
+// Metadata row used in horizontal card footer (WithHorizontalMedia story)
+.card-story-time {
+  display: flex;
+  align-items: center;
+  padding: 0 spacing.$spacing-05;
+  font-size: calc(spacing.$spacing-04 + spacing.$spacing-01);
+  gap: spacing.$spacing-03;
+}

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/coachmark/coachmark-beacon/coachmark-beacon.scss

@@ -0,0 +1,89 @@
+//
+// 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/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/coachmark/coachmark-beacon' as
+  coachmark-beacon-styles;
+
+@include coachmark-beacon-styles.coachmark-beacon;
+
+$block-class: #{$prefix}--coachmark-beacon;
+
+:host(#{$prefix}-coachmark-beacon) {
+  position: relative;
+}
+
+:host(.#{$prefix}--coachmark-beacon-default) {
+  .#{$block-class}__target {
+    &::before {
+      display: none;
+    }
+    // the blue dot
+    &::after {
+      position: absolute;
+      border-radius: 50%;
+      background-color: $blue-50;
+      block-size: $spacing-04;
+      content: '';
+      inline-size: $spacing-04;
+      inset-block-start: calc($spacing-01 + $spacing-03);
+      inset-inline-start: calc($spacing-01 + $spacing-03);
+    }
+
+    &:focus {
+      outline: transparent;
+
+      &::before {
+        position: absolute;
+        display: block;
+        border-radius: 100%;
+        block-size: 18px;
+        content: '';
+        inline-size: 18px;
+        inset-block-start: 7px;
+        inset-inline-start: 7px;
+        outline: $spacing-01 $focus solid;
+      }
+    }
+  }
+
+  .#{$block-class}__target {
+    display: flex;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    block-size: $spacing-07;
+    box-shadow: none;
+    cursor: pointer;
+    inline-size: $spacing-07;
+
+    &[aria-expanded='true'] {
+      circle {
+        animation: none;
+      }
+    }
+  }
+
+  .#{$block-class}__target::part(button) {
+    background-color: transparent;
+    box-shadow: none;
+    max-block-size: 0;
+    min-block-size: 0;
+    padding-inline: 0;
+
+    &:focus {
+      border-color: transparent;
+      box-shadow: none;
+    }
+  }
+}

package/scss/components/coachmark/coachmark-body.scss

@@ -0,0 +1,16 @@
+//
+// 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/spacing' as *;
+@use '@carbon/styles/scss/config' as *;
+
+:host(#{$prefix}-coachmark-body) {
+  display: block;
+  padding: 0 $spacing-05 $spacing-05;
+}

package/scss/components/coachmark/coachmark-header.scss

@@ -0,0 +1,28 @@
+//
+// 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/theme' as *;
+@use '@carbon/styles/scss/config' as *;
+
+:host(#{$prefix}-coachmark-header) {
+  display: flex;
+  justify-content: flex-end;
+
+  .#{$prefix}--coachmark-header-drag-handle {
+    margin-inline-end: auto;
+  }
+
+  .#{$prefix}--coachmark-header-drag-icon {
+    fill: $background;
+  }
+
+  .#{$prefix}--coachmark-header-close-icon {
+    fill: $background;
+  }
+}