@carbon/ibm-products-web-components 0.32.0 → 0.33.0

package/es-custom/packages/ibm-products-web-components/package.json.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var version = "0.32.0-rc.0";
+var version = "0.33.0-rc.0";
 var packageJson = {
 	version: version};
 

package/lib/components/coachmark/coachmark.d.ts

@@ -376,6 +376,9 @@ declare const CDSCoachmark_base: {
 /**
  * coachmark main component
  * @element c4p-coachmark
+ * @fires c4p-coachmark-opened
+ *   The custom event fired when the coachmark is opened.
+ *   This event can be used to perform actions such as focusing elements when the coachmark becomes visible.
  */
 declare class CDSCoachmark extends CDSCoachmark_base {
     /**
@@ -411,6 +414,10 @@ declare class CDSCoachmark extends CDSCoachmark_base {
     firstUpdated(): void;
     updated(changedProps: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * The name of the custom event fired when this coachmark is opened.
+     */
+    static get eventOpen(): string;
     static styles: any;
 }
 export default CDSCoachmark;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -55,11 +55,11 @@
     "telemetry-config": "ibmtelemetry-config generate --wc --id 8a79d901-a9c0-4672-94a4-fa8eea139832 --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components"
   },
   "dependencies": {
-    "@carbon-labs/wc-empty-state": "^0.11.0",
-    "@carbon/ibm-products-styles": "^2.79.0",
-    "@carbon/styles": "^1.96.0",
-    "@carbon/utilities": "^0.15.0",
-    "@carbon/web-components": "2.44.0",
+    "@carbon-labs/wc-empty-state": "^0.13.0",
+    "@carbon/ibm-products-styles": "^2.80.0",
+    "@carbon/styles": "^1.100.0",
+    "@carbon/utilities": "^0.16.0",
+    "@carbon/web-components": "2.48.0",
     "@figma/code-connect": "^1.3.6",
     "@ibm/telemetry-js": "^1.10.2",
     "@lit-labs/signals": "^0.1.2",
@@ -69,9 +69,9 @@
   "devDependencies": {
     "@aarsteinmedia/dotlottie-player": "^6.0.5",
     "@blockquote/rollup-plugin-externalize-source-dependencies": "^1.0.0",
-    "@carbon/icon-helpers": "^10.69.0",
-    "@carbon/icons": "^11.71.0",
-    "@carbon/motion": "^11.38.0",
+    "@carbon/icon-helpers": "^10.72.0",
+    "@carbon/icons": "^11.75.0",
+    "@carbon/motion": "^11.41.0",
     "@figma/code-connect": "^1.3.6",
     "@ibm/telemetry-js-config-generator": "^2.1.0",
     "@mordech/vite-lit-loader": "^0.37.0",
@@ -83,10 +83,10 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.1",
     "@stackblitz/sdk": "^1.11.0",
-    "@storybook/addon-a11y": "^9.1.10",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-links": "^9.1.10",
-    "@storybook/web-components-vite": "^9.1.10",
+    "@storybook/addon-a11y": "^9.1.15",
+    "@storybook/addon-docs": "^9.1.15",
+    "@storybook/addon-links": "^9.1.15",
+    "@storybook/web-components-vite": "^9.1.15",
     "@types/jest": "^29.5.13",
     "@vitest/browser": "^3.2.0",
     "@vitest/coverage-v8": "^3.2.0",
@@ -104,14 +104,14 @@
     "rollup": "^4.27.3",
     "rollup-plugin-copy": "^3.5.0",
     "sass": "^1.93.2",
-    "storybook": "^9.1.10",
+    "storybook": "^9.1.15",
     "storybook-addon-accessibility-checker": ">=9.2.0-rc.0",
     "tslib": "^2.8.1",
     "typescript": "^5.5.3",
-    "vite": "^7.0.0",
+    "vite": "npm:rolldown-vite@latest",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.0",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "30bb896c821dbc206f87874b66b97e3121efe15a"
+  "gitHead": "7b0c5737d123755ee2ed937568fcd568e9c76b3f"
 }

package/scss/components/about-modal/about-modal.scss

@@ -1,5 +1,5 @@
 /*
-* Copyright IBM Corp. 2025
+* Copyright IBM Corp. 2025, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -11,7 +11,7 @@ $css--plex: true !default;
 @use '@carbon/styles' as styles;
 @use '@carbon/styles/scss/reset';
 @use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/themes/scss/themes';
@@ -24,7 +24,6 @@ $css--plex: true !default;
 @use 'sass:map';
 
 $prefix: 'c4p';
-$carbon-prefix: 'cds';
 
 @use '@carbon/ibm-products-styles/scss/components/AboutModal/index' as *;
 
@@ -32,12 +31,12 @@ $carbon-prefix: 'cds';
   .#{$prefix}--about-modal__logo {
     margin: $spacing-05 $spacing-05 $spacing-07 $spacing-05;
   }
-  #{$carbon-prefix}-modal-header {
+  #{carbon-config.$prefix}-modal-header {
     padding: 0 20% 0 $spacing-05;
     grid-row: auto;
     margin-block-end: 0;
   }
-  #{$carbon-prefix}-modal-body {
+  #{carbon-config.$prefix}-modal-body {
     @include type.type-style('body-compact-02');
 
     overflow: hidden auto;
@@ -50,11 +49,11 @@ $carbon-prefix: 'cds';
       padding-block-end: 0;
     }
     &.#{$prefix}--about-modal-scroll-content {
-      @extend .#{$carbon-prefix}--modal-scroll-content;
+      @extend .#{carbon-config.$prefix}--modal-scroll-content;
     }
   }
 
-  #{$carbon-prefix}-modal-heading {
+  #{carbon-config.$prefix}-modal-heading {
     @include type.type-style('heading-04');
 
     color: $text-primary;
@@ -81,20 +80,20 @@ $carbon-prefix: 'cds';
   .#{$prefix}--about-modal__copyright-text:first-child {
     margin-block-start: $spacing-07;
   }
-  #{$carbon-prefix}-link {
+  #{carbon-config.$prefix}-link {
     display: inline-flex;
   }
   .#{$prefix}--about-modal__links-container {
     @include type.type-style('body-compact-01');
 
     margin-block-start: $spacing-06;
-    #{$carbon-prefix}-link + #{$carbon-prefix}-link {
+    #{carbon-config.$prefix}-link + #{carbon-config.$prefix}-link {
       border-inline-start: 1px solid $border-strong-01;
       margin-inline-start: $spacing-03;
       padding-inline-start: $spacing-03;
     }
   }
-  #{$carbon-prefix}-modal-footer {
+  #{carbon-config.$prefix}-modal-footer {
     @include styles.theme(styles.$g100);
 
     display: block;

package/scss/components/coachmark/coachmark.scss

@@ -17,6 +17,10 @@ $carbon-prefix: config.$carbon-prefix;
 
 $block-class: #{$prefix}--coachmark;
 
+:host {
+  display: inline-block;
+}
+
 .#{$block-class}--popover {
   position: fixed;
 

package/scss/components/full-page-error/full-page-error.scss

@@ -19,7 +19,6 @@ $css--plex: true !default;
 
 // Local vars
 $prefix: 'c4p';
-$carbon-prefix: 'cds';
 $block-class: #{$prefix}--side-panel;
 
 :host(#{$prefix}-full-page-error) {

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

@@ -12,9 +12,9 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/reset';
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config' as carbon-config;
 
 $prefix: 'c4p';
-$carbon-prefix: 'cds';
 $block-class: #{$prefix}--options-tile;
 
 :host(#{$prefix}-options-tile) {

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

@@ -1,5 +1,5 @@
 /*
-* Copyright IBM Corp. 2023, 2024
+* Copyright IBM Corp. 2023, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -16,9 +16,9 @@ $css--plex: true !default;
 @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/config' as carbon-config;
 
 $prefix: 'c4p';
-$carbon-prefix: 'cds';
 @use '@carbon/ibm-products-styles/scss/components/ActionSet/index' as *;
 @use '@carbon/ibm-products-styles/scss/components/SidePanel/index' as *;
 @use '@carbon/ibm-products-styles/scss/components/SidePanel/side-panel-variables'
@@ -169,7 +169,7 @@ $block-class-action-set: #{$prefix}--action-set;
 
   .#{$block-class}__subtitle-text {
     &[hidden] {
-      @extend .#{$carbon-prefix}--visually-hidden !optional;
+      @extend .#{carbon-config.$prefix}--visually-hidden !optional;
     }
   }
 
@@ -178,12 +178,12 @@ $block-class-action-set: #{$prefix}--action-set;
     padding-inline-start: 0;
 
     &[hidden] {
-      @extend .#{$carbon-prefix}--visually-hidden !optional;
+      @extend .#{carbon-config.$prefix}--visually-hidden !optional;
     }
   }
 
   .#{$block-class} .#{$block-class}__action-toolbar[hidden] {
-    @extend .#{$carbon-prefix}--visually-hidden !optional;
+    @extend .#{carbon-config.$prefix}--visually-hidden !optional;
   }
 
   .#{$block-class}[has-slug] {
@@ -214,14 +214,15 @@ $block-class-action-set: #{$prefix}--action-set;
     }
 
     ::slotted(#{$prefix}-button[hidden]) {
-      @extend .#{$carbon-prefix}--visually-hidden !optional;
+      @extend .#{carbon-config.$prefix}--visually-hidden !optional;
 
       display: none;
     }
 
     // -1 in @container query is for 1px left border
     @container (width <= #{map.get(spv.$side-panel-sizes, lg)}) {
-      &:not([actions-multiple='triple']) ::slotted(#{$carbon-prefix}-button) {
+      &:not([actions-multiple='triple'])
+        ::slotted(#{carbon-config.$prefix}-button) {
         // double and single on lg use 50%
         flex: 0 1 50%;
         max-inline-size: none;
@@ -232,12 +233,12 @@ $block-class-action-set: #{$prefix}--action-set;
     @container (width <= #{map.get(spv.$side-panel-sizes, md)}) {
       // md is 50% for two and 100% for one
       // column for triple
-      &[actions-multiple] ::slotted(#{$carbon-prefix}-button) {
+      &[actions-multiple] ::slotted(#{carbon-config.$prefix}-button) {
         flex: 0 0 100%;
         max-inline-size: none;
       }
 
-      &[actions-multiple='double'] ::slotted(#{$carbon-prefix}-button) {
+      &[actions-multiple='double'] ::slotted(#{carbon-config.$prefix}-button) {
         flex: 0 1 50%;
         max-inline-size: none;
       }
@@ -245,7 +246,7 @@ $block-class-action-set: #{$prefix}--action-set;
       &[actions-multiple='triple'] {
         --flex-direction: column;
 
-        ::slotted(#{$carbon-prefix}-button) {
+        ::slotted(#{carbon-config.$prefix}-button) {
           flex: initial;
           inline-size: 100%;
           max-inline-size: none;
@@ -257,7 +258,7 @@ $block-class-action-set: #{$prefix}--action-set;
     @container (width <= #{map.get(spv.$side-panel-sizes, sm)}) {
       --flex-direction: column;
 
-      ::slotted(#{$carbon-prefix}-button) {
+      ::slotted(#{carbon-config.$prefix}-button) {
         flex: initial;
         inline-size: 100%;
         max-inline-size: none;
@@ -272,12 +273,12 @@ $block-class-action-set: #{$prefix}--action-set;
     display: flex;
     inline-size: 100%;
 
-    ::slotted(#{$carbon-prefix}-button) {
+    ::slotted(#{carbon-config.$prefix}-button) {
       @extend .#{$block-class-action-set}__action-button;
     }
 
     &[hidden] {
-      @extend .#{$carbon-prefix}--visually-hidden !optional;
+      @extend .#{carbon-config.$prefix}--visually-hidden !optional;
 
       display: none;
     }
@@ -285,7 +286,7 @@ $block-class-action-set: #{$prefix}--action-set;
     $multiples: 'single' 'double' 'triple';
     @each $m in $multiples {
       &[actions-multiple='#{$m}'] {
-        @extend .#{$carbon-prefix}--action-set--row-#{$m} !optional;
+        @extend .#{carbon-config.$prefix}--action-set--row-#{$m} !optional;
       }
     }
 
@@ -298,7 +299,7 @@ $block-class-action-set: #{$prefix}--action-set;
   }
 
   .sentinel {
-    @extend .#{$carbon-prefix}--visually-hidden !optional;
+    @extend .#{carbon-config.$prefix}--visually-hidden !optional;
   }
 
   .#{$block-class}__close-button {

package/scss/components/tearsheet/tearsheet.scss

@@ -1,5 +1,5 @@
 /*
-* Copyright IBM Corp. 2023, 2024
+* Copyright IBM Corp. 2023, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -10,7 +10,6 @@ $css--plex: true !default;
 /* Other Carbon settings. */
 @use '@carbon/styles/scss/reset';
 @use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
@@ -19,10 +18,11 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/components/modal' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use 'sass:map';
 
 $prefix: 'c4p';
-$carbon-prefix: 'cds';
 
 @use '@carbon/ibm-products-styles/scss/components/Tearsheet/index' as *;
 @use '@carbon/ibm-products-styles/scss/components/ActionSet/index' as *;
@@ -34,7 +34,7 @@ $motion-duration: $duration-moderate-02;
 :host(#{$prefix}-tearsheet) {
   --content-padding: #{$spacing-05};
 
-  @extend .#{$carbon-prefix}--modal;
+  @extend .#{carbon-config.$prefix}--modal;
   @extend .#{$prefix}--tearsheet;
 
   .#{$block-class}__header,
@@ -75,12 +75,12 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__buttons[hidden] {
-    @extend .#{$carbon-prefix}--visually-hidden;
+    @extend .#{carbon-config.$prefix}--visually-hidden;
 
     display: none;
   }
 
-  .#{$block-class}__buttons ::slotted(#{$carbon-prefix}-button) {
+  .#{$block-class}__buttons ::slotted(#{carbon-config.$prefix}-button) {
     @extend .#{$block-class-action-set}__action-button;
 
     flex: 0 1 25%;
@@ -88,13 +88,14 @@ $motion-duration: $duration-moderate-02;
     max-inline-size: to-rem(232px);
   }
 
-  .#{$block-class}__buttons ::slotted(#{$carbon-prefix}-button[kind='ghost']) {
+  .#{$block-class}__buttons
+    ::slotted(#{carbon-config.$prefix}-button[kind='ghost']) {
     flex: 1 1 25%;
     max-inline-size: none;
   }
 
-  .#{$block-class}__buttons ::slotted(#{$carbon-prefix}-button[hidden]) {
-    @extend .#{$carbon-prefix}--visually-hidden;
+  .#{$block-class}__buttons ::slotted(#{carbon-config.$prefix}-button[hidden]) {
+    @extend .#{carbon-config.$prefix}--visually-hidden;
 
     display: none;
   }
@@ -102,8 +103,9 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class}__influencer[wide] {
     @extend .#{$block-class}__influencer--wide;
   }
+
   ::slotted([slot='decorator']),
-  ::slotted(#{$carbon-prefix}-slug) {
+  ::slotted(#{carbon-config.$prefix}-slug) {
     position: absolute;
     display: flex;
     inset-block-start: to-rem(10px);
@@ -171,7 +173,7 @@ $motion-duration: $duration-moderate-02;
 }
 
 :host(#{$prefix}-tearsheet[hidden]) {
-  @extend .#{$carbon-prefix}--visually-hidden;
+  @extend .#{carbon-config.$prefix}--visually-hidden;
 }
 
 :host(#{$prefix}-tearsheet[slug]),
@@ -260,7 +262,7 @@ $motion-duration: $duration-moderate-02;
     }
   }
 
-  .#{$carbon-prefix}--modal-header__heading.#{$block-class}__heading {
+  .#{carbon-config.$prefix}--modal-header__heading.#{$block-class}__heading {
     @include type.type-style('heading-04');
   }
 
@@ -283,34 +285,35 @@ $motion-duration: $duration-moderate-02;
 
   .#{$block-class}__content {
     // Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54
-    .#{$carbon-prefix}--pagination,
-    .#{$carbon-prefix}--pagination__control-buttons,
-    .#{$carbon-prefix}--text-input,
-    .#{$carbon-prefix}--text-area,
-    .#{$carbon-prefix}--search-input,
-    .#{$carbon-prefix}--select-input,
-    .#{$carbon-prefix}--dropdown,
-    .#{$carbon-prefix}--dropdown-list,
-    .#{$carbon-prefix}--number input[type='number'],
-    .#{$carbon-prefix}--date-picker__input {
+    .#{carbon-config.$prefix}--pagination,
+    .#{carbon-config.$prefix}--pagination__control-buttons,
+    .#{carbon-config.$prefix}--text-input,
+    .#{carbon-config.$prefix}--text-area,
+    .#{carbon-config.$prefix}--search-input,
+    .#{carbon-config.$prefix}--select-input,
+    .#{carbon-config.$prefix}--dropdown,
+    .#{carbon-config.$prefix}--dropdown-list,
+    .#{carbon-config.$prefix}--number input[type='number'],
+    .#{carbon-config.$prefix}--date-picker__input {
       background-color: $field;
     }
 
-    .#{$carbon-prefix}--select--inline .#{$carbon-prefix}--select-input {
+    .#{carbon-config.$prefix}--select--inline
+      .#{carbon-config.$prefix}--select-input {
       background-color: transparent;
     }
 
     // and restore the 'light' prop in case light fields are wanted
-    .#{$carbon-prefix}--text-input--light,
-  .#{$carbon-prefix}--text-area--light,
-  .#{$carbon-prefix}--search--light .#{$carbon-prefix}--search-input,
-  .#{$carbon-prefix}--select--light .#{$carbon-prefix}--select-input,
-  .#{$carbon-prefix}--dropdown--light,
-  .#{$carbon-prefix}--dropdown--light .#{$carbon-prefix}--dropdown-list,
+    .#{carbon-config.$prefix}--text-input--light,
+  .#{carbon-config.$prefix}--text-area--light,
+  .#{carbon-config.$prefix}--search--light .#{carbon-config.$prefix}--search-input,
+  .#{carbon-config.$prefix}--select--light .#{carbon-config.$prefix}--select-input,
+  .#{carbon-config.$prefix}--dropdown--light,
+  .#{carbon-config.$prefix}--dropdown--light .#{carbon-config.$prefix}--dropdown-list,
   /* stylelint-disable-next-line prettier/prettier */
-  .#{$carbon-prefix}--number--light input[type='number'],
-  .#{$carbon-prefix}--date-picker--light
-    .#{$carbon-prefix}--date-picker__input {
+  .#{carbon-config.$prefix}--number--light input[type='number'],
+  .#{carbon-config.$prefix}--date-picker--light
+    .#{carbon-config.$prefix}--date-picker__input {
       background-color: $field-02;
     }
   }
@@ -322,10 +325,10 @@ $motion-duration: $duration-moderate-02;
 
 :host(#{$prefix}-tearsheet[width='narrow'])
   .#{$block-class}__buttons[actions-multiple='single']
-  ::slotted(#{$carbon-prefix}-button),
+  ::slotted(#{carbon-config.$prefix}-button),
 :host(#{$prefix}-tearsheet[width='narrow'])
   .#{$block-class}__buttons[actions-multiple='double']
-  ::slotted(#{$carbon-prefix}-button) {
+  ::slotted(#{carbon-config.$prefix}-button) {
   // double and single on lg use 50%
   flex: 0 1 50%;
   max-inline-size: none;
@@ -333,7 +336,7 @@ $motion-duration: $duration-moderate-02;
 
 :host(#{$prefix}-tearsheet[width='narrow'])
   .#{$block-class}__buttons
-  ::slotted(#{$carbon-prefix}-button) {
+  ::slotted(#{carbon-config.$prefix}-button) {
   block-size: $spacing-10;
 }
 :host(#{$prefix}-tearsheet[width='narrow']) {

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

@@ -10,12 +10,12 @@
 @use 'sass:map';
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/config';
+@use '@carbon/styles/scss/config' as carbon-config;
 
 $prefix: 'c4p';
-$carbon-prefix: config.$prefix;
+$carbon-prefix: carbon-config.$prefix;
 $block-class: #{$prefix}--truncated-text;
 
 // Common reset button style
@@ -74,7 +74,7 @@ $block-class: #{$prefix}--truncated-text;
   @extend %reset-button;
 
   padding: 0 $spacing-01;
-  color: $link-primary;
+  color: theme.$link-primary;
 
   &.#{$block-class}_button-hide {
     display: none;
@@ -83,25 +83,25 @@ $block-class: #{$prefix}--truncated-text;
 
 .#{$block-class}_button-expand {
   &.#{$block-class}_button-layered {
-    background-color: $layer;
+    background-color: theme.$layer;
   }
 
   // Gradient LTR
   &:dir(ltr)::before {
-    @include gradient-bg(90deg, $background);
+    @include gradient-bg(90deg, theme.$background);
   }
 
   &.#{$block-class}_button-layered:dir(ltr)::before {
-    @include gradient-bg(90deg, $layer);
+    @include gradient-bg(90deg, theme.$layer);
   }
 
   // Gradient RTL
   &:dir(rtl)::before {
-    @include gradient-bg(270deg, $background);
+    @include gradient-bg(270deg, theme.$background);
   }
 
   &.#{$block-class}_button-layered:dir(rtl)::before {
-    @include gradient-bg(270deg, $layer);
+    @include gradient-bg(270deg, theme.$layer);
   }
 }
 

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

@@ -23,7 +23,6 @@ $css--plex: true !default;
 @use '@carbon/ibm-products-styles/scss/components/UserAvatar' as *;
 
 $prefix: 'c4p';
-$carbon-prefix: 'cds';
 
 $block-class: #{$prefix}--user-avatar;
 

package/telemetry.yml

@@ -67,6 +67,7 @@ collect:
         - dropShadow
         - floating
         - highContrast
+        - onc4p-coachmark-opened
         - position
         # c4p-coachmark-beacon
         - expanded