@carbon/web-components 2.52.0 → 2.53.0

package/es/components/tile/clickable-tile.js

@@ -5,18 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import link_default from "../link/link.js";
-import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
+import "../../globals/shared-enums.js";
 import tile_default from "./tile.scss.js";
 import { html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import AILabel24 from "@carbon/icons/es/ai-label/24.js";
-
 //#region src/components/tile/clickable-tile.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -32,7 +31,7 @@ import AILabel24 from "@carbon/icons/es/ai-label/24.js";
 let CDSClickableTile = class CDSClickableTile extends link_default {
 	constructor(..._args) {
 		super(..._args);
-		this.colorScheme = FORM_ELEMENT_COLOR_SCHEME.REGULAR;
+		this.colorScheme = "";
 		this.linkRole = "button";
 		this.hasRoundedCorners = false;
 		this.aiLabel = false;
@@ -41,12 +40,12 @@ let CDSClickableTile = class CDSClickableTile extends link_default {
 	get _classes() {
 		const { colorScheme, disabled, hasRoundedCorners, aiLabel, slug } = this;
 		return classMap({
-			[`${prefix}--link`]: true,
-			[`${prefix}--link--disabled`]: disabled,
-			[`${prefix}--tile`]: true,
-			[`${prefix}--tile--clickable`]: true,
-			[`${prefix}--tile--${colorScheme}`]: colorScheme,
-			[`${prefix}--tile--slug-rounded`]: (aiLabel || slug) && hasRoundedCorners
+			[`cds--link`]: true,
+			[`cds--link--disabled`]: disabled,
+			[`cds--tile`]: true,
+			[`cds--tile--clickable`]: true,
+			[`cds--tile--${colorScheme}`]: colorScheme,
+			[`cds--tile--slug-rounded`]: (aiLabel || slug) && hasRoundedCorners
 		});
 	}
 	/**
@@ -68,7 +67,7 @@ let CDSClickableTile = class CDSClickableTile extends link_default {
 	_renderInner() {
 		return html`
       ${super._renderInner()}
-      ${this.aiLabel || this.slug ? iconLoader(AILabel24, { class: `${prefix}--tile--ai-label-icon` }) : ""}
+      ${this.aiLabel || this.slug ? iconLoader(AILabel24, { class: `cds--tile--ai-label-icon` }) : ""}
       <slot name="decorator"></slot>
     `;
 	}
@@ -78,13 +77,13 @@ let CDSClickableTile = class CDSClickableTile extends link_default {
 	* remove in v12
 	*/
 	static get slugItem() {
-		return `${prefix}-slug`;
+		return `cds-slug`;
 	}
 	/**
 	* A selector that will return the AI Label item.
 	*/
 	static get aiLabelItem() {
-		return `${prefix}-ai-label`;
+		return `cds-ai-label`;
 	}
 	static {
 		this.styles = tile_default;
@@ -104,9 +103,9 @@ __decorate([property({
 	attribute: "ai-label"
 })], CDSClickableTile.prototype, "aiLabel", void 0);
 __decorate([property({ type: Boolean })], CDSClickableTile.prototype, "slug", void 0);
-CDSClickableTile = __decorate([carbonElement(`${prefix}-clickable-tile`)], CDSClickableTile);
+CDSClickableTile = __decorate([carbonElement(`cds-clickable-tile`)], CDSClickableTile);
 var clickable_tile_default = CDSClickableTile;
-
 //#endregion
 export { clickable_tile_default as default };
+
 //# sourceMappingURL=clickable-tile.js.map

package/es/components/tile/clickable-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"clickable-tile.js","names":["CDSLink","TILE_COLOR_SCHEME","styles","customElement"],"sources":["../../../src/components/tile/clickable-tile.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSLink from '../link/link';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport AILabel24 from '@carbon/icons/es/ai-label/24.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n/**\n * Clickable tile.\n *\n * @element cds-clickable-tile\n */\n@customElement(`${prefix}-clickable-tile`)\nclass CDSClickableTile extends CDSLink {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n  protected get _classes(): any {\n    const { colorScheme, disabled, hasRoundedCorners, aiLabel, slug } = this;\n    return classMap({\n      [`${prefix}--link`]: true,\n      [`${prefix}--link--disabled`]: disabled,\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--clickable`]: true,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n      [`${prefix}--tile--slug-rounded`]: (aiLabel || slug) && hasRoundedCorners,\n    });\n  }\n\n  /**\n   * The color scheme.\n   *\n   * @default\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The a11y role for `<a>`.\n   */\n  @property({ attribute: 'link-role' })\n  linkRole = 'button';\n\n  /**\n   * Specify if the `ClickableTile` component should be rendered with rounded corners.\n   * Only valid when `ai-label` prop is present\n   */\n  @property({ type: Boolean, attribute: 'has-rounded-corners' })\n  hasRoundedCorners = false;\n\n  @property({ type: Boolean, attribute: 'ai-label' })\n  aiLabel = false;\n\n  /**\n   * deprecated - remove in v12\n   */\n  @property({ type: Boolean })\n  slug = false;\n\n  /**\n   * If using `slug`, set `ai-label` attribute to true so\n   * the styles are applied for slug as well\n   *\n   * remove in v12\n   */\n  connectedCallback() {\n    if (this.slug) {\n      this.setAttribute('ai-Label', '');\n      this.aiLabel = true;\n    }\n    super.connectedCallback();\n  }\n\n  /**\n   * @returns The inner content.\n   */\n  protected _renderInner() {\n    return html`\n      ${super._renderInner()}\n      ${this.aiLabel || this.slug\n        ? iconLoader(AILabel24, { class: `${prefix}--tile--ai-label-icon` })\n        : ''}\n      <slot name=\"decorator\"></slot>\n    `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSClickableTile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,6BACM,yBAAyBA,aAAQ;;;qBAoBvBC,0BAAkB;kBAMrB;2BAOS;iBAGV;cAMH;;CAxCP,IAAc,WAAgB;EAC5B,MAAM,EAAE,aAAa,UAAU,mBAAmB,SAAS,SAAS;AACpE,SAAO,SAAS;IACb,GAAG,OAAO,UAAU;IACpB,GAAG,OAAO,oBAAoB;IAC9B,GAAG,OAAO,UAAU;IACpB,GAAG,OAAO,qBAAqB;IAC/B,GAAG,OAAO,UAAU,gBAAgB;IACpC,GAAG,OAAO,yBAAyB,WAAW,SAAS;GACzD,CAAC;;;;;;;;CAuCJ,oBAAoB;AAClB,MAAI,KAAK,MAAM;AACb,QAAK,aAAa,YAAY,GAAG;AACjC,QAAK,UAAU;;AAEjB,QAAM,mBAAmB;;;;;CAM3B,AAAU,eAAe;AACvB,SAAO,IAAI;QACP,MAAM,cAAc,CAAC;QACrB,KAAK,WAAW,KAAK,OACnB,WAAW,WAAW,EAAE,OAAO,GAAG,OAAO,wBAAwB,CAAC,GAClE,GAAG;;;;;;;;;CAUX,WAAW,WAAW;AACpB,SAAO,GAAG,OAAO;;;;;CAMnB,WAAW,cAAc;AACvB,SAAO,GAAG,OAAO;;;gBAGHC;;;YApEf,SAAS;CAAE,WAAW;CAAgB,SAAS;CAAM,CAAC;YAMtD,SAAS,EAAE,WAAW,aAAa,CAAC;YAOpC,SAAS;CAAE,MAAM;CAAS,WAAW;CAAuB,CAAC;YAG7D,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,CAAC;YAMlD,SAAS,EAAE,MAAM,SAAS,CAAC;+BA1C7BC,cAAc,GAAG,OAAO,iBAAiB;AA2F1C,6BAAe"}
+{"version":3,"file":"clickable-tile.js","names":["CDSLink","styles","customElement"],"sources":["../../../src/components/tile/clickable-tile.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSLink from '../link/link';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport AILabel24 from '@carbon/icons/es/ai-label/24.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n/**\n * Clickable tile.\n *\n * @element cds-clickable-tile\n */\n@customElement(`${prefix}-clickable-tile`)\nclass CDSClickableTile extends CDSLink {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n  protected get _classes(): any {\n    const { colorScheme, disabled, hasRoundedCorners, aiLabel, slug } = this;\n    return classMap({\n      [`${prefix}--link`]: true,\n      [`${prefix}--link--disabled`]: disabled,\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--clickable`]: true,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n      [`${prefix}--tile--slug-rounded`]: (aiLabel || slug) && hasRoundedCorners,\n    });\n  }\n\n  /**\n   * The color scheme.\n   *\n   * @default\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The a11y role for `<a>`.\n   */\n  @property({ attribute: 'link-role' })\n  linkRole = 'button';\n\n  /**\n   * Specify if the `ClickableTile` component should be rendered with rounded corners.\n   * Only valid when `ai-label` prop is present\n   */\n  @property({ type: Boolean, attribute: 'has-rounded-corners' })\n  hasRoundedCorners = false;\n\n  @property({ type: Boolean, attribute: 'ai-label' })\n  aiLabel = false;\n\n  /**\n   * deprecated - remove in v12\n   */\n  @property({ type: Boolean })\n  slug = false;\n\n  /**\n   * If using `slug`, set `ai-label` attribute to true so\n   * the styles are applied for slug as well\n   *\n   * remove in v12\n   */\n  connectedCallback() {\n    if (this.slug) {\n      this.setAttribute('ai-Label', '');\n      this.aiLabel = true;\n    }\n    super.connectedCallback();\n  }\n\n  /**\n   * @returns The inner content.\n   */\n  protected _renderInner() {\n    return html`\n      ${super._renderInner()}\n      ${this.aiLabel || this.slug\n        ? iconLoader(AILabel24, { class: `${prefix}--tile--ai-label-icon` })\n        : ''}\n      <slot name=\"decorator\"></slot>\n    `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSClickableTile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAA,mBAAA,MACM,yBAAyBA,aAAQ;;;;kBA0B1B;2BAOS;iBAGV;cAMH;;CAxCP,IAAc,WAAgB;EAC5B,MAAM,EAAE,aAAa,UAAU,mBAAmB,SAAS,SAAS;AACpE,SAAO,SAAS;IACb,cAAoB;IACpB,wBAA8B;IAC9B,cAAoB;IACpB,yBAA+B;IAC/B,cAAoB,gBAAgB;IACpC,6BAAmC,WAAW,SAAS;GACzD,CAAC;;;;;;;;CAuCJ,oBAAoB;AAClB,MAAI,KAAK,MAAM;AACb,QAAK,aAAa,YAAY,GAAG;AACjC,QAAK,UAAU;;AAEjB,QAAM,mBAAmB;;;;;CAM3B,eAAyB;AACvB,SAAO,IAAI;QACP,MAAM,cAAc,CAAC;QACrB,KAAK,WAAW,KAAK,OACnB,WAAW,WAAW,EAAE,OAAO,4BAAkC,CAAC,GAClE,GAAG;;;;;;;;;CAUX,WAAW,WAAW;AACpB,SAAO;;;;;CAMT,WAAW,cAAc;AACvB,SAAO;;;gBAGOC;;;YApEf,SAAS;CAAE,WAAW;CAAgB,SAAS;CAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,eAAA,KAAA,EAAA;YAMtD,SAAS,EAAE,WAAW,aAAa,CAAC,CAAA,EAAA,iBAAA,WAAA,YAAA,KAAA,EAAA;YAOpC,SAAS;CAAE,MAAM;CAAS,WAAW;CAAuB,CAAC,CAAA,EAAA,iBAAA,WAAA,qBAAA,KAAA,EAAA;YAG7D,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,CAAC,CAAA,EAAA,iBAAA,WAAA,WAAA,KAAA,EAAA;YAMlD,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,iBAAA,WAAA,QAAA,KAAA,EAAA;+BA1C7BC,cAAc,qBAA2B,CAAA,EAAA,iBAAA;AA2F1C,IAAA,yBAAe"}

package/es/components/tile/defs.js

@@ -6,5 +6,4 @@
  */
 
 import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
-
-export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME };
+export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME };

package/es/components/tile/expandable-tile.js

@@ -5,21 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
-import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
+import "../../globals/shared-enums.js";
 import tile_default from "./tile.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import ChevronDown16 from "@carbon/icons/es/chevron--down/16.js";
-
 //#region src/components/tile/expandable-tile.ts
 /**
 * Copyright IBM Corp. 2019, 2026
@@ -44,7 +43,7 @@ let CDSExpandableTile = class CDSExpandableTile extends HostListenerMixin(FocusM
 		this._handleClick = () => {
 			if (!this.withInteractive) this._handleExpand();
 		};
-		this.colorScheme = FORM_ELEMENT_COLOR_SCHEME.REGULAR;
+		this.colorScheme = "";
 		this.expanded = false;
 		this.hasRoundedCorners = false;
 		this.withInteractive = false;
@@ -101,8 +100,8 @@ let CDSExpandableTile = class CDSExpandableTile extends HostListenerMixin(FocusM
 		return html`
       <button
         class="${classMap({
-			[`${prefix}--tile__chevron`]: true,
-			[`${prefix}--tile__chevron--interactive`]: withInteractive
+			[`cds--tile__chevron`]: true,
+			[`cds--tile__chevron--interactive`]: withInteractive
 		})}"
         aria-labelledby="above-the-fold-content"
         aria-controls="below-the-fold-content"
@@ -114,10 +113,10 @@ let CDSExpandableTile = class CDSExpandableTile extends HostListenerMixin(FocusM
       <slot name="ai-label" @slotchange="${this._handleSlotChange}"></slot>
       <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>
       <slot name="decorator"></slot>
-      <div id="content" class="${prefix}--tile-content">
+      <div id="content" class="${"cds"}--tile-content">
         <div><slot name="above-the-fold-content"></slot></div>
         <div
-          class="${prefix}-ce--expandable-tile--below-the-fold-content"
+          class="${"cds"}-ce--expandable-tile--below-the-fold-content"
           style="${ifDefined(!expanded ? void 0 : `max-height: ${belowTheContentHeight}px`)}">
           <slot @slotchange="${handleSlotChangeBelowTheFoldContent}"></slot>
         </div>
@@ -130,26 +129,26 @@ let CDSExpandableTile = class CDSExpandableTile extends HostListenerMixin(FocusM
 	* remove in v12
 	*/
 	static get slugItem() {
-		return `${prefix}-slug`;
+		return `cds-slug`;
 	}
 	/**
 	* A selector that will return the AI Label item.
 	*/
 	static get aiLabelItem() {
-		return `${prefix}-ai-label`;
+		return `cds-ai-label`;
 	}
 	/**
 	* The name of the custom event fired before the expanded state is changed upon a user gesture.
 	* Cancellation of this event stops changing the user-initiated change in expanded state.
 	*/
 	static get eventBeforeToggle() {
-		return `${prefix}-expandable-tile-beingtoggled`;
+		return `cds-expandable-tile-beingtoggled`;
 	}
 	/**
 	* The name of the custom event fired after a the expanded state is changed upon a user gesture.
 	*/
 	static get eventToggle() {
-		return `${prefix}-expandable-tile-toggled`;
+		return `cds-expandable-tile-toggled`;
 	}
 	static {
 		this.styles = tile_default;
@@ -173,9 +172,9 @@ __decorate([property({
 	reflect: true,
 	attribute: "with-interactive"
 })], CDSExpandableTile.prototype, "withInteractive", void 0);
-CDSExpandableTile = __decorate([carbonElement(`${prefix}-expandable-tile`)], CDSExpandableTile);
+CDSExpandableTile = __decorate([carbonElement(`cds-expandable-tile`)], CDSExpandableTile);
 var expandable_tile_default = CDSExpandableTile;
-
 //#endregion
 export { expandable_tile_default as default };
+
 //# sourceMappingURL=expandable-tile.js.map

package/es/components/tile/expandable-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-tile.js","names":["TILE_COLOR_SCHEME","styles","customElement"],"sources":["../../../src/components/tile/expandable-tile.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/es/chevron--down/16.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss?lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Expandable tile.\n *\n * @element cds-expandable-tile\n * @fires cds-expandable-tile-beingtoggled\n *   The custom event fired before the expanded state is changed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n */\n@customElement(`${prefix}-expandable-tile`)\nclass CDSExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The computed height of the below-the-fold content.\n   */\n  private _belowTheContentHeight = 0;\n\n  /**\n   * `true` if there is an AI Label.\n   */\n  protected _hasAILabel = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSExpandableTile)?.aiLabelItem\n            ) ||\n            // remove reference of slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSExpandableTile)?.slugItem\n            )\n          : false\n      );\n\n    if (hasContent.length > 0) {\n      this._hasAILabel = Boolean(hasContent);\n      (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `slotchange` event on the below-the-fold content.\n   *\n   * @param event The event.\n   */\n  private _handleSlotChangeBelowTheFoldContent(event: Event) {\n    this._belowTheContentHeight = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .reduce(\n        (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n        0\n      );\n\n    if (!this._belowTheContentHeight) {\n      const element = getComputedStyle(\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n        this.querySelector('cds-tile-below-the-fold-content') as any\n      );\n      this._belowTheContentHeight = parseInt(element.height, 10);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleExpand() {\n    const expanded = !this.expanded;\n    this.focus();\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    const constructor = this.constructor as typeof CDSExpandableTile;\n    const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n      ...init,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(beforeChangeEvent)) {\n      this.expanded = expanded;\n      const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n      this.dispatchEvent(afterChangeEvent);\n    }\n  }\n\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    if (!this.withInteractive) {\n      this._handleExpand();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Specify if the `ExpandableTile` component should be rendered with rounded corners.\n   * Only valid when `ai-label` prop is present\n   */\n  @property({ type: Boolean, attribute: 'has-rounded-corners' })\n  hasRoundedCorners = false;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n  withInteractive = false;\n\n  updated() {\n    if (this._hasAILabel) {\n      this.setAttribute('ai-label', '');\n    } else {\n      this.removeAttribute('ai-label');\n    }\n  }\n\n  render() {\n    const {\n      expanded,\n      withInteractive,\n      _belowTheContentHeight: belowTheContentHeight,\n      _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n    } = this;\n\n    const classes = classMap({\n      [`${prefix}--tile__chevron`]: true,\n      [`${prefix}--tile__chevron--interactive`]: withInteractive,\n    });\n    return html`\n      <button\n        class=\"${classes}\"\n        aria-labelledby=\"above-the-fold-content\"\n        aria-controls=\"below-the-fold-content\"\n        tabindex=\"0\"\n        @click=\"${withInteractive ? this._handleExpand : ''}\"\n        aria-expanded=\"${String(expanded)}\">\n        ${iconLoader(ChevronDown16, { id: 'icon' })}\n      </button>\n      <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n      <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n      <slot name=\"decorator\"></slot>\n      <div id=\"content\" class=\"${prefix}--tile-content\">\n        <div><slot name=\"above-the-fold-content\"></slot></div>\n        <div\n          class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n          style=\"${ifDefined(\n            !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n          )}\">\n          <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state is changed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated change in expanded state.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-expandable-tile-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after a the expanded state is changed upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-expandable-tile-toggled`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSExpandableTile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,8BACM,0BAA0B,kBAAkB,WAAW,WAAW,CAAC,CAAC;;;gCAIvC;qBAKT;4BA2EK;AAC3B,OAAI,CAAC,KAAK,gBACR,MAAK,eAAe;;qBAQVA,0BAAkB;kBAMrB;2BAOS;yBAMF;;;;;CAnGlB,AAAU,kBAAkB,EAAE,UAAiB;EAC7C,MAAM,aAAc,OACjB,eAAe,CACf,QAAQ,SACN,KAAqB,YAAY,SAC7B,KAAqB,QACnB,KAAK,aAA0C,YACjD,IAEA,KAAqB,QACnB,KAAK,aAA0C,SACjD,GACD,MACL;AAEH,MAAI,WAAW,SAAS,GAAG;AACzB,QAAK,cAAc,QAAQ,WAAW;AACtC,GAAC,WAAW,GAAmB,aAAa,QAAQ,KAAK;;AAE3D,OAAK,eAAe;;;;;;;CAQtB,AAAQ,qCAAqC,OAAc;AACzD,OAAK,yBAA0B,MAAM,OAClC,eAAe,CACf,QACE,KAAK,SAAS,OAAQ,KAAqB,gBAAgB,IAC5D,EACD;AAEH,MAAI,CAAC,KAAK,wBAAwB;GAChC,MAAM,UAAU,iBAEd,KAAK,cAAc,kCAAkC,CACtD;AACD,QAAK,yBAAyB,SAAS,QAAQ,QAAQ,GAAG;;AAE5D,OAAK,eAAe;;CAGtB,AAAQ,gBAAgB;EACtB,MAAM,WAAW,CAAC,KAAK;AACvB,OAAK,OAAO;EACZ,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,QAAQ,EACN,UACD;GACF;EACD,MAAM,cAAc,KAAK;EACzB,MAAM,oBAAoB,IAAI,YAAY,YAAY,mBAAmB;GACvE,GAAG;GACH,YAAY;GACb,CAAC;AACF,MAAI,KAAK,cAAc,kBAAkB,EAAE;AACzC,QAAK,WAAW;GAChB,MAAM,mBAAmB,IAAI,YAAY,YAAY,aAAa,KAAK;AACvE,QAAK,cAAc,iBAAiB;;;CAsCxC,UAAU;AACR,MAAI,KAAK,YACP,MAAK,aAAa,YAAY,GAAG;MAEjC,MAAK,gBAAgB,WAAW;;CAIpC,SAAS;EACP,MAAM,EACJ,UACA,iBACA,wBAAwB,uBACxB,sCAAsC,wCACpC;AAMJ,SAAO,IAAI;;iBAJK,SAAS;IACtB,GAAG,OAAO,mBAAmB;IAC7B,GAAG,OAAO,gCAAgC;GAC5C,CAAC,CAGmB;;;;kBAIP,kBAAkB,KAAK,gBAAgB,GAAG;yBACnC,OAAO,SAAS,CAAC;UAChC,WAAW,eAAe,EAAE,IAAI,QAAQ,CAAC,CAAC;;2CAET,KAAK,kBAAkB;uCAC3B,KAAK,kBAAkB;;iCAE7B,OAAO;;;mBAGrB,OAAO;mBACP,UACP,CAAC,WAAW,SAAY,eAAe,sBAAsB,IAC9D,CAAC;+BACmB,oCAAoC;;;;;;;;;;CAWjE,WAAW,WAAW;AACpB,SAAO,GAAG,OAAO;;;;;CAMnB,WAAW,cAAc;AACvB,SAAO,GAAG,OAAO;;;;;;CAOnB,WAAW,oBAAoB;AAC7B,SAAO,GAAG,OAAO;;;;;CAMnB,WAAW,cAAc;AACvB,SAAO,GAAG,OAAO;;;gBAGHC;;;YA/Gf,aAAa,QAAQ;YAYrB,SAAS;CAAE,WAAW;CAAgB,SAAS;CAAM,CAAC;YAMtD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAO1C,SAAS;CAAE,MAAM;CAAS,WAAW;CAAuB,CAAC;YAM7D,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAoB,CAAC;gCAjH3EC,cAAc,GAAG,OAAO,kBAAkB;AAoM3C,8BAAe"}
+{"version":3,"file":"expandable-tile.js","names":["styles","customElement"],"sources":["../../../src/components/tile/expandable-tile.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/es/chevron--down/16.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss?lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Expandable tile.\n *\n * @element cds-expandable-tile\n * @fires cds-expandable-tile-beingtoggled\n *   The custom event fired before the expanded state is changed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n */\n@customElement(`${prefix}-expandable-tile`)\nclass CDSExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The computed height of the below-the-fold content.\n   */\n  private _belowTheContentHeight = 0;\n\n  /**\n   * `true` if there is an AI Label.\n   */\n  protected _hasAILabel = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSExpandableTile)?.aiLabelItem\n            ) ||\n            // remove reference of slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSExpandableTile)?.slugItem\n            )\n          : false\n      );\n\n    if (hasContent.length > 0) {\n      this._hasAILabel = Boolean(hasContent);\n      (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `slotchange` event on the below-the-fold content.\n   *\n   * @param event The event.\n   */\n  private _handleSlotChangeBelowTheFoldContent(event: Event) {\n    this._belowTheContentHeight = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .reduce(\n        (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n        0\n      );\n\n    if (!this._belowTheContentHeight) {\n      const element = getComputedStyle(\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n        this.querySelector('cds-tile-below-the-fold-content') as any\n      );\n      this._belowTheContentHeight = parseInt(element.height, 10);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleExpand() {\n    const expanded = !this.expanded;\n    this.focus();\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    const constructor = this.constructor as typeof CDSExpandableTile;\n    const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n      ...init,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(beforeChangeEvent)) {\n      this.expanded = expanded;\n      const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n      this.dispatchEvent(afterChangeEvent);\n    }\n  }\n\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    if (!this.withInteractive) {\n      this._handleExpand();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Specify if the `ExpandableTile` component should be rendered with rounded corners.\n   * Only valid when `ai-label` prop is present\n   */\n  @property({ type: Boolean, attribute: 'has-rounded-corners' })\n  hasRoundedCorners = false;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n  withInteractive = false;\n\n  updated() {\n    if (this._hasAILabel) {\n      this.setAttribute('ai-label', '');\n    } else {\n      this.removeAttribute('ai-label');\n    }\n  }\n\n  render() {\n    const {\n      expanded,\n      withInteractive,\n      _belowTheContentHeight: belowTheContentHeight,\n      _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n    } = this;\n\n    const classes = classMap({\n      [`${prefix}--tile__chevron`]: true,\n      [`${prefix}--tile__chevron--interactive`]: withInteractive,\n    });\n    return html`\n      <button\n        class=\"${classes}\"\n        aria-labelledby=\"above-the-fold-content\"\n        aria-controls=\"below-the-fold-content\"\n        tabindex=\"0\"\n        @click=\"${withInteractive ? this._handleExpand : ''}\"\n        aria-expanded=\"${String(expanded)}\">\n        ${iconLoader(ChevronDown16, { id: 'icon' })}\n      </button>\n      <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n      <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n      <slot name=\"decorator\"></slot>\n      <div id=\"content\" class=\"${prefix}--tile-content\">\n        <div><slot name=\"above-the-fold-content\"></slot></div>\n        <div\n          class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n          style=\"${ifDefined(\n            !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n          )}\">\n          <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state is changed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated change in expanded state.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-expandable-tile-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after a the expanded state is changed upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-expandable-tile-toggled`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSExpandableTile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAA,oBAAA,MACM,0BAA0B,kBAAkB,WAAW,WAAW,CAAC,CAAC;;;gCAIvC;qBAKT;4BA2EK;AAC3B,OAAI,CAAC,KAAK,gBACR,MAAK,eAAe;;;kBAcb;2BAOS;yBAMF;;;;;CAnGlB,kBAA4B,EAAE,UAAiB;EAC7C,MAAM,aAAc,OACjB,eAAe,CACf,QAAQ,SACN,KAAqB,YAAY,KAAA,IAC7B,KAAqB,QACnB,KAAK,aAA0C,YACjD,IAEA,KAAqB,QACnB,KAAK,aAA0C,SACjD,GACD,MACL;AAEH,MAAI,WAAW,SAAS,GAAG;AACzB,QAAK,cAAc,QAAQ,WAAW;AACrC,cAAW,GAAmB,aAAa,QAAQ,KAAK;;AAE3D,OAAK,eAAe;;;;;;;CAQtB,qCAA6C,OAAc;AACzD,OAAK,yBAA0B,MAAM,OAClC,eAAe,CACf,QACE,KAAK,SAAS,OAAQ,KAAqB,gBAAgB,IAC5D,EACD;AAEH,MAAI,CAAC,KAAK,wBAAwB;GAChC,MAAM,UAAU,iBAEd,KAAK,cAAc,kCAAkC,CACtD;AACD,QAAK,yBAAyB,SAAS,QAAQ,QAAQ,GAAG;;AAE5D,OAAK,eAAe;;CAGtB,gBAAwB;EACtB,MAAM,WAAW,CAAC,KAAK;AACvB,OAAK,OAAO;EACZ,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,QAAQ,EACN,UACD;GACF;EACD,MAAM,cAAc,KAAK;EACzB,MAAM,oBAAoB,IAAI,YAAY,YAAY,mBAAmB;GACvE,GAAG;GACH,YAAY;GACb,CAAC;AACF,MAAI,KAAK,cAAc,kBAAkB,EAAE;AACzC,QAAK,WAAW;GAChB,MAAM,mBAAmB,IAAI,YAAY,YAAY,aAAa,KAAK;AACvE,QAAK,cAAc,iBAAiB;;;CAsCxC,UAAU;AACR,MAAI,KAAK,YACP,MAAK,aAAa,YAAY,GAAG;MAEjC,MAAK,gBAAgB,WAAW;;CAIpC,SAAS;EACP,MAAM,EACJ,UACA,iBACA,wBAAwB,uBACxB,sCAAsC,wCACpC;AAMJ,SAAO,IAAI;;iBAJK,SAAS;IACtB,uBAA6B;IAC7B,oCAA0C;GAC5C,CAAC,CAGmB;;;;kBAIP,kBAAkB,KAAK,gBAAgB,GAAG;yBACnC,OAAO,SAAS,CAAC;UAChC,WAAW,eAAe,EAAE,IAAI,QAAQ,CAAC,CAAC;;2CAET,KAAK,kBAAkB;uCAC3B,KAAK,kBAAkB;;uCAEtB;;;yBAGd;mBACP,UACP,CAAC,WAAW,KAAA,IAAY,eAAe,sBAAsB,IAC9D,CAAC;+BACmB,oCAAoC;;;;;;;;;;CAWjE,WAAW,WAAW;AACpB,SAAO;;;;;CAMT,WAAW,cAAc;AACvB,SAAO;;;;;;CAOT,WAAW,oBAAoB;AAC7B,SAAO;;;;;CAMT,WAAW,cAAc;AACvB,SAAO;;;gBAGOA;;;YA/Gf,aAAa,QAAQ,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;YAYrB,SAAS;CAAE,WAAW;CAAgB,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,eAAA,KAAA,EAAA;YAMtD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAO1C,SAAS;CAAE,MAAM;CAAS,WAAW;CAAuB,CAAC,CAAA,EAAA,kBAAA,WAAA,qBAAA,KAAA,EAAA;YAM7D,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAoB,CAAC,CAAA,EAAA,kBAAA,WAAA,mBAAA,KAAA,EAAA;gCAjH3EC,cAAc,sBAA4B,CAAA,EAAA,kBAAA;AAoM3C,IAAA,0BAAe"}

package/es/components/tile/radio-tile.js

@@ -5,16 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import selectable_tile_default from "./selectable-tile.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import CheckmarkFilled16 from "@carbon/icons/es/checkmark--filled/16.js";
-
 //#region src/components/tile/radio-tile.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -55,19 +54,19 @@ let CDSRadioTile = class CDSRadioTile extends selectable_tile_default {
 	render() {
 		const { colorScheme, checkmarkLabel, disabled, hasRoundedCorners, name, selected, value, _handleChange: handleChange, _handleKeydown: handleKeydown, _hasAILabel: hasAILabel } = this;
 		const classes = classMap({
-			[`${prefix}--tile`]: true,
-			[`${prefix}--tile--selectable`]: true,
-			[`${prefix}--tile--radio`]: true,
-			[`${prefix}--tile--disabled`]: disabled,
-			[`${prefix}--tile--is-selected`]: selected,
-			[`${prefix}--tile--${colorScheme}`]: colorScheme,
-			[`${prefix}--tile--slug-rounded`]: hasAILabel && hasRoundedCorners
+			[`cds--tile`]: true,
+			[`cds--tile--selectable`]: true,
+			[`cds--tile--radio`]: true,
+			[`cds--tile--disabled`]: disabled,
+			[`cds--tile--is-selected`]: selected,
+			[`cds--tile--${colorScheme}`]: colorScheme,
+			[`cds--tile--slug-rounded`]: hasAILabel && hasRoundedCorners
 		});
 		return html`
       <input
         type="radio"
         id="input"
-        class="${prefix}--tile-input"
+        class="${"cds"}--tile-input"
         ?disabled="${disabled}"
         tabindex="${selected ? 0 : -1}"
         name="${ifDefined(name)}"
@@ -77,10 +76,10 @@ let CDSRadioTile = class CDSRadioTile extends selectable_tile_default {
         @keydown="${!disabled ? handleKeydown : void 0}" />
       <label part="label" for="input" class="${classes}">
         ${iconLoader(CheckmarkFilled16, {
-			class: `${prefix}--tile__checkmark`,
+			class: `cds--tile__checkmark`,
 			title: checkmarkLabel
 		})}
-        <div class="${prefix}--tile-content"><slot></slot></div>
+        <div class="${"cds"}--tile-content"><slot></slot></div>
       </label>
       <slot name="decorator"></slot>
       <slot name="ai-label" @slotchange="${this._handleSlotChange}"></slot>
@@ -90,12 +89,12 @@ let CDSRadioTile = class CDSRadioTile extends selectable_tile_default {
 	* The name of the custom event fired after this selectable tile changes its selected state.
 	*/
 	static get eventRadioChange() {
-		return `${prefix}-radio-tile-selected`;
+		return `cds-radio-tile-selected`;
 	}
 };
-CDSRadioTile = __decorate([carbonElement(`${prefix}-radio-tile`)], CDSRadioTile);
+CDSRadioTile = __decorate([carbonElement(`cds-radio-tile`)], CDSRadioTile);
 var radio_tile_default = CDSRadioTile;
-
 //#endregion
 export { radio_tile_default as default };
+
 //# sourceMappingURL=radio-tile.js.map

package/es/components/tile/radio-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-tile.js","names":["SelectableTile","customElement"],"sources":["../../../src/components/tile/radio-tile.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport SelectableTile from './selectable-tile';\nimport CheckmarkFilled16 from '@carbon/icons/es/checkmark--filled/16.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/**\n * Radio tile.\n *\n * @element cds-radio-tile\n * @fires cds-radio-tile-selected\n *   The name of the custom event fired after this radio tile changes its selected state.\n */\n@customElement(`${prefix}-radio-tile`)\nclass CDSRadioTile extends SelectableTile {\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = true;\n    const { selected, name } = this;\n    const { eventRadioChange } = this.constructor as typeof CDSRadioTile;\n    this.dispatchEvent(\n      new CustomEvent(eventRadioChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n          name,\n        },\n      })\n    );\n  }\n\n  protected _handleKeydown = (event: KeyboardEvent) => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n    }\n  };\n\n  render() {\n    const {\n      colorScheme,\n      checkmarkLabel,\n      disabled,\n      hasRoundedCorners,\n      name,\n      selected,\n      value,\n      _handleChange: handleChange,\n      _handleKeydown: handleKeydown,\n      _hasAILabel: hasAILabel,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--radio`]: true,\n      [`${prefix}--tile--disabled`]: disabled,\n      [`${prefix}--tile--is-selected`]: selected,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n      [`${prefix}--tile--slug-rounded`]: hasAILabel && hasRoundedCorners,\n    });\n\n    return html`\n      <input\n        type=\"radio\"\n        id=\"input\"\n        class=\"${prefix}--tile-input\"\n        ?disabled=\"${disabled}\"\n        tabindex=\"${selected ? 0 : -1}\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${!disabled ? handleChange : undefined}\n        @keydown=\"${!disabled ? handleKeydown : undefined}\" />\n      <label part=\"label\" for=\"input\" class=\"${classes}\">\n        ${iconLoader(CheckmarkFilled16, {\n          class: `${prefix}--tile__checkmark`,\n          title: checkmarkLabel,\n        })}\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n      <slot name=\"decorator\"></slot>\n      <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventRadioChange() {\n    return `${prefix}-radio-tile-selected`;\n  }\n}\n\nexport default CDSRadioTile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,yBACM,qBAAqBA,wBAAe;;;yBAoBZ,UAAyB;AACnD,OAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,QACrC,OAAM,gBAAgB;;;;;;CAlB1B,AAAU,gBAAgB;AACxB,OAAK,WAAW;EAChB,MAAM,EAAE,UAAU,SAAS;EAC3B,MAAM,EAAE,qBAAqB,KAAK;AAClC,OAAK,cACH,IAAI,YAAY,kBAAkB;GAChC,SAAS;GACT,UAAU;GACV,QAAQ;IACN;IACA;IACD;GACF,CAAC,CACH;;CASH,SAAS;EACP,MAAM,EACJ,aACA,gBACA,UACA,mBACA,MACA,UACA,OACA,eAAe,cACf,gBAAgB,eAChB,aAAa,eACX;EACJ,MAAM,UAAU,SAAS;IACtB,GAAG,OAAO,UAAU;IACpB,GAAG,OAAO,sBAAsB;IAChC,GAAG,OAAO,iBAAiB;IAC3B,GAAG,OAAO,oBAAoB;IAC9B,GAAG,OAAO,uBAAuB;IACjC,GAAG,OAAO,UAAU,gBAAgB;IACpC,GAAG,OAAO,wBAAwB,cAAc;GAClD,CAAC;AAEF,SAAO,IAAI;;;;iBAIE,OAAO;qBACH,SAAS;oBACV,WAAW,IAAI,GAAG;gBACtB,UAAU,KAAK,CAAC;iBACf,UAAU,MAAM,CAAC;mBACf,SAAS;kBACV,CAAC,WAAW,eAAe,OAAU;oBACnC,CAAC,WAAW,gBAAgB,OAAU;+CACX,QAAQ;UAC7C,WAAW,mBAAmB;GAC9B,OAAO,GAAG,OAAO;GACjB,OAAO;GACR,CAAC,CAAC;sBACW,OAAO;;;2CAGc,KAAK,kBAAkB;;;;;;CAOhE,WAAW,mBAAmB;AAC5B,SAAO,GAAG,OAAO;;;2BA9EpBC,cAAc,GAAG,OAAO,aAAa;AAkFtC,yBAAe"}
+{"version":3,"file":"radio-tile.js","names":["SelectableTile","customElement"],"sources":["../../../src/components/tile/radio-tile.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport SelectableTile from './selectable-tile';\nimport CheckmarkFilled16 from '@carbon/icons/es/checkmark--filled/16.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/**\n * Radio tile.\n *\n * @element cds-radio-tile\n * @fires cds-radio-tile-selected\n *   The name of the custom event fired after this radio tile changes its selected state.\n */\n@customElement(`${prefix}-radio-tile`)\nclass CDSRadioTile extends SelectableTile {\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = true;\n    const { selected, name } = this;\n    const { eventRadioChange } = this.constructor as typeof CDSRadioTile;\n    this.dispatchEvent(\n      new CustomEvent(eventRadioChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n          name,\n        },\n      })\n    );\n  }\n\n  protected _handleKeydown = (event: KeyboardEvent) => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n    }\n  };\n\n  render() {\n    const {\n      colorScheme,\n      checkmarkLabel,\n      disabled,\n      hasRoundedCorners,\n      name,\n      selected,\n      value,\n      _handleChange: handleChange,\n      _handleKeydown: handleKeydown,\n      _hasAILabel: hasAILabel,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--radio`]: true,\n      [`${prefix}--tile--disabled`]: disabled,\n      [`${prefix}--tile--is-selected`]: selected,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n      [`${prefix}--tile--slug-rounded`]: hasAILabel && hasRoundedCorners,\n    });\n\n    return html`\n      <input\n        type=\"radio\"\n        id=\"input\"\n        class=\"${prefix}--tile-input\"\n        ?disabled=\"${disabled}\"\n        tabindex=\"${selected ? 0 : -1}\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        .checked=${selected}\n        @change=${!disabled ? handleChange : undefined}\n        @keydown=\"${!disabled ? handleKeydown : undefined}\" />\n      <label part=\"label\" for=\"input\" class=\"${classes}\">\n        ${iconLoader(CheckmarkFilled16, {\n          class: `${prefix}--tile__checkmark`,\n          title: checkmarkLabel,\n        })}\n        <div class=\"${prefix}--tile-content\"><slot></slot></div>\n      </label>\n      <slot name=\"decorator\"></slot>\n      <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventRadioChange() {\n    return `${prefix}-radio-tile-selected`;\n  }\n}\n\nexport default CDSRadioTile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAA,eAAA,MACM,qBAAqBA,wBAAe;;;yBAoBZ,UAAyB;AACnD,OAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,QACrC,OAAM,gBAAgB;;;;;;CAlB1B,gBAA0B;AACxB,OAAK,WAAW;EAChB,MAAM,EAAE,UAAU,SAAS;EAC3B,MAAM,EAAE,qBAAqB,KAAK;AAClC,OAAK,cACH,IAAI,YAAY,kBAAkB;GAChC,SAAS;GACT,UAAU;GACV,QAAQ;IACN;IACA;IACD;GACF,CAAC,CACH;;CASH,SAAS;EACP,MAAM,EACJ,aACA,gBACA,UACA,mBACA,MACA,UACA,OACA,eAAe,cACf,gBAAgB,eAChB,aAAa,eACX;EACJ,MAAM,UAAU,SAAS;IACtB,cAAoB;IACpB,0BAAgC;IAChC,qBAA2B;IAC3B,wBAA8B;IAC9B,2BAAiC;IACjC,cAAoB,gBAAgB;IACpC,4BAAkC,cAAc;GAClD,CAAC;AAEF,SAAO,IAAI;;;;uBAIS;qBACH,SAAS;oBACV,WAAW,IAAI,GAAG;gBACtB,UAAU,KAAK,CAAC;iBACf,UAAU,MAAM,CAAC;mBACf,SAAS;kBACV,CAAC,WAAW,eAAe,KAAA,EAAU;oBACnC,CAAC,WAAW,gBAAgB,KAAA,EAAU;+CACX,QAAQ;UAC7C,WAAW,mBAAmB;GAC9B,OAAO;GACP,OAAO;GACR,CAAC,CAAC;4BACkB;;;2CAGc,KAAK,kBAAkB;;;;;;CAOhE,WAAW,mBAAmB;AAC5B,SAAO;;;2BA9EVC,cAAc,iBAAuB,CAAA,EAAA,aAAA;AAkFtC,IAAA,qBAAe"}

package/es/components/tile/selectable-tile.js

@@ -5,20 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
-import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
+import "../../globals/shared-enums.js";
 import tile_default from "./tile.scss.js";
 import { LitElement, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import Checkbox16 from "@carbon/icons/es/checkbox/16.js";
 import CheckboxCheckedFilled16 from "@carbon/icons/es/checkbox--checked--filled/16.js";
-
 //#region src/components/tile/selectable-tile.ts
 /**
 * Copyright IBM Corp. 2019, 2023
@@ -50,7 +49,7 @@ let CDSSelectableTile = class CDSSelectableTile extends HostListenerMixin(FocusM
 			const { key } = event;
 			if ((key === " " || key === "Enter") && !event.target?.matches(this.constructor.aiLabelItem) && !event.target?.matches(this.constructor.slugItem)) this.selected = !this.selected;
 		};
-		this.colorScheme = FORM_ELEMENT_COLOR_SCHEME.REGULAR;
+		this.colorScheme = "";
 		this.disabled = false;
 		this.hasRoundedCorners = false;
 		this.selected = false;
@@ -86,7 +85,7 @@ let CDSSelectableTile = class CDSSelectableTile extends HostListenerMixin(FocusM
 		const { selected, checkmarkLabel } = this;
 		return iconLoader(selected ? CheckboxCheckedFilled16 : Checkbox16, {
 			"aria-label": checkmarkLabel || void 0,
-			class: `${prefix}--selectable-tile__icon`
+			class: `cds--selectable-tile__icon`
 		});
 	}
 	updated() {
@@ -98,12 +97,12 @@ let CDSSelectableTile = class CDSSelectableTile extends HostListenerMixin(FocusM
 		return html`
       <div
         class=${classMap({
-			[`${prefix}--tile`]: true,
-			[`${prefix}--tile--disabled`]: disabled,
-			[`${prefix}--tile--selectable`]: true,
-			[`${prefix}--tile--is-selected`]: selected,
-			[`${prefix}--tile--${colorScheme}`]: colorScheme,
-			[`${prefix}--tile--slug-rounded`]: hasAILabel && hasRoundedCorners
+			[`cds--tile`]: true,
+			[`cds--tile--disabled`]: disabled,
+			[`cds--tile--selectable`]: true,
+			[`cds--tile--is-selected`]: selected,
+			[`cds--tile--${colorScheme}`]: colorScheme,
+			[`cds--tile--slug-rounded`]: hasAILabel && hasRoundedCorners
 		})}
         role="checkbox"
         aria-checked=${selected}
@@ -114,10 +113,10 @@ let CDSSelectableTile = class CDSSelectableTile extends HostListenerMixin(FocusM
         @click=${!disabled ? this._handleClick : void 0}
         @keydown=${this._handleKeydown}>
         <span
-          class="${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent">
+          class="${"cds"}--tile__checkmark ${"cds"}--tile__checkmark--persistent">
           ${this._renderIcon()}
         </span>
-        <label class="${prefix}--tile-content">
+        <label class="${"cds"}--tile-content">
           <slot></slot>
         </label>
         <slot name="decorator"></slot>
@@ -132,19 +131,19 @@ let CDSSelectableTile = class CDSSelectableTile extends HostListenerMixin(FocusM
 	* remove in v12
 	*/
 	static get slugItem() {
-		return `${prefix}-slug`;
+		return `cds-slug`;
 	}
 	/**
 	* A selector that will return the AI Label item.
 	*/
 	static get aiLabelItem() {
-		return `${prefix}-ai-label`;
+		return `cds-ai-label`;
 	}
 	/**
 	* The name of the custom event fired after this selectable tile changes its selected state.
 	*/
 	static get eventChange() {
-		return `${prefix}-selectable-tile-changed`;
+		return `cds-selectable-tile-changed`;
 	}
 	static {
 		this.shadowRootOptions = {
@@ -176,9 +175,9 @@ __decorate([property({
 	reflect: true
 })], CDSSelectableTile.prototype, "selected", void 0);
 __decorate([property()], CDSSelectableTile.prototype, "value", void 0);
-CDSSelectableTile = __decorate([carbonElement(`${prefix}-selectable-tile`)], CDSSelectableTile);
+CDSSelectableTile = __decorate([carbonElement(`cds-selectable-tile`)], CDSSelectableTile);
 var selectable_tile_default = CDSSelectableTile;
-
 //#endregion
 export { selectable_tile_default as default };
+
 //# sourceMappingURL=selectable-tile.js.map

package/es/components/tile/selectable-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectable-tile.js","names":["TILE_COLOR_SCHEME","styles","customElement"],"sources":["../../../src/components/tile/selectable-tile.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport Checkbox16 from '@carbon/icons/es/checkbox/16.js';\nimport CheckboxCheckedFilled16 from '@carbon/icons/es/checkbox--checked--filled/16.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/**\n * Multi-selectable tile.\n *\n * @element cds-selectable-tile\n * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.\n */\n@customElement(`${prefix}-selectable-tile`)\nclass CDSSelectableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  @query('input')\n  protected _inputNode!: HTMLInputElement;\n\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'checkbox';\n\n  /**\n   * `true` if there is an AI Label.\n   */\n  protected _hasAILabel = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSSelectableTile)?.aiLabelItem\n            ) ||\n            // remove reference of slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSSelectableTile)?.slugItem\n            )\n          : false\n      );\n    if (hasContent.length > 0) {\n      this._hasAILabel = Boolean(hasContent);\n      (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = this._inputNode.checked;\n\n    const selected = this.selected;\n    const { eventChange } = this.constructor as typeof CDSSelectableTile;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles the rendering of the icon.\n   */\n  protected _renderIcon() {\n    const { selected, checkmarkLabel } = this;\n\n    return iconLoader(selected ? CheckboxCheckedFilled16 : Checkbox16, {\n      'aria-label': checkmarkLabel || undefined,\n      class: `${prefix}--selectable-tile__icon`,\n    });\n  }\n\n  /**\n   * Listener function for click interaction.\n   *\n   */\n  private _handleClick = () => {\n    this.selected = !this.selected; // Toggle selection\n    const { eventChange } = this.constructor as typeof CDSSelectableTile;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected: this.selected,\n        },\n      })\n    );\n  };\n\n  /**\n   * Listener function for keyboard interaction.\n   *\n   * @param event to get the key pressed\n   */\n  protected _handleKeydown = (event: KeyboardEvent) => {\n    const { key } = event;\n    if (\n      (key === ' ' || key === 'Enter') &&\n      !(event.target as HTMLElement)?.matches(\n        (this.constructor as typeof CDSSelectableTile).aiLabelItem\n      ) &&\n      !(event.target as HTMLElement)?.matches(\n        (this.constructor as typeof CDSSelectableTile).slugItem\n      )\n    ) {\n      this.selected = !this.selected;\n    }\n  };\n\n  /**\n   * The a11y text for the checkmark icon of the selected state.\n   */\n  @property({ attribute: 'checkmark-label' })\n  checkmarkLabel!: string;\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` if the seletable tile should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify if the `SeletableTile` component should be rendered with rounded corners.\n   * Only valid when `ai-label` prop is present\n   */\n  @property({ type: Boolean, attribute: 'has-rounded-corners' })\n  hasRoundedCorners = false;\n\n  /**\n   * @deprecated\n   *\n   * The form name.\n   */\n  @property()\n  name!: string;\n\n  /**\n   * `true` to show the selected state.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * @deprecated\n   *\n   * The form value.\n   */\n  @property()\n  value!: string;\n\n  updated() {\n    if (this._hasAILabel) {\n      this.setAttribute('ai-label', '');\n    } else {\n      this.removeAttribute('ai-label');\n    }\n  }\n\n  render() {\n    const {\n      colorScheme,\n      disabled,\n      hasRoundedCorners,\n      name,\n      selected,\n      value,\n      _handleChange: handleChange,\n      _hasAILabel: hasAILabel,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--disabled`]: disabled,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n      [`${prefix}--tile--slug-rounded`]: hasAILabel && hasRoundedCorners,\n    });\n    return html`\n      <div\n        class=${classes}\n        role=\"checkbox\"\n        aria-checked=${selected}\n        @change=${handleChange}\n        tabindex=${!disabled ? 0 : undefined}\n        name=${name}\n        value=${value}\n        @click=${!disabled ? this._handleClick : undefined}\n        @keydown=${this._handleKeydown}>\n        <span\n          class=\"${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent\">\n          ${this._renderIcon()}\n        </span>\n        <label class=\"${prefix}--tile-content\">\n          <slot></slot>\n        </label>\n        <slot name=\"decorator\"></slot>\n        <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n        <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventChange() {\n    return `${prefix}-selectable-tile-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSSelectableTile;\n"],"mappings":"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"}
+{"version":3,"file":"selectable-tile.js","names":["styles","customElement"],"sources":["../../../src/components/tile/selectable-tile.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport Checkbox16 from '@carbon/icons/es/checkbox/16.js';\nimport CheckboxCheckedFilled16 from '@carbon/icons/es/checkbox--checked--filled/16.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/**\n * Multi-selectable tile.\n *\n * @element cds-selectable-tile\n * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.\n */\n@customElement(`${prefix}-selectable-tile`)\nclass CDSSelectableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  @query('input')\n  protected _inputNode!: HTMLInputElement;\n\n  /**\n   * The `type` attribute of the `<input>`.\n   */\n  protected _inputType = 'checkbox';\n\n  /**\n   * `true` if there is an AI Label.\n   */\n  protected _hasAILabel = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSSelectableTile)?.aiLabelItem\n            ) ||\n            // remove reference of slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSSelectableTile)?.slugItem\n            )\n          : false\n      );\n    if (hasContent.length > 0) {\n      this._hasAILabel = Boolean(hasContent);\n      (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `change` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    this.selected = this._inputNode.checked;\n\n    const selected = this.selected;\n    const { eventChange } = this.constructor as typeof CDSSelectableTile;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles the rendering of the icon.\n   */\n  protected _renderIcon() {\n    const { selected, checkmarkLabel } = this;\n\n    return iconLoader(selected ? CheckboxCheckedFilled16 : Checkbox16, {\n      'aria-label': checkmarkLabel || undefined,\n      class: `${prefix}--selectable-tile__icon`,\n    });\n  }\n\n  /**\n   * Listener function for click interaction.\n   *\n   */\n  private _handleClick = () => {\n    this.selected = !this.selected; // Toggle selection\n    const { eventChange } = this.constructor as typeof CDSSelectableTile;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selected: this.selected,\n        },\n      })\n    );\n  };\n\n  /**\n   * Listener function for keyboard interaction.\n   *\n   * @param event to get the key pressed\n   */\n  protected _handleKeydown = (event: KeyboardEvent) => {\n    const { key } = event;\n    if (\n      (key === ' ' || key === 'Enter') &&\n      !(event.target as HTMLElement)?.matches(\n        (this.constructor as typeof CDSSelectableTile).aiLabelItem\n      ) &&\n      !(event.target as HTMLElement)?.matches(\n        (this.constructor as typeof CDSSelectableTile).slugItem\n      )\n    ) {\n      this.selected = !this.selected;\n    }\n  };\n\n  /**\n   * The a11y text for the checkmark icon of the selected state.\n   */\n  @property({ attribute: 'checkmark-label' })\n  checkmarkLabel!: string;\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` if the seletable tile should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify if the `SeletableTile` component should be rendered with rounded corners.\n   * Only valid when `ai-label` prop is present\n   */\n  @property({ type: Boolean, attribute: 'has-rounded-corners' })\n  hasRoundedCorners = false;\n\n  /**\n   * @deprecated\n   *\n   * The form name.\n   */\n  @property()\n  name!: string;\n\n  /**\n   * `true` to show the selected state.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * @deprecated\n   *\n   * The form value.\n   */\n  @property()\n  value!: string;\n\n  updated() {\n    if (this._hasAILabel) {\n      this.setAttribute('ai-label', '');\n    } else {\n      this.removeAttribute('ai-label');\n    }\n  }\n\n  render() {\n    const {\n      colorScheme,\n      disabled,\n      hasRoundedCorners,\n      name,\n      selected,\n      value,\n      _handleChange: handleChange,\n      _hasAILabel: hasAILabel,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--disabled`]: disabled,\n      [`${prefix}--tile--selectable`]: true,\n      [`${prefix}--tile--is-selected`]: selected,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n      [`${prefix}--tile--slug-rounded`]: hasAILabel && hasRoundedCorners,\n    });\n    return html`\n      <div\n        class=${classes}\n        role=\"checkbox\"\n        aria-checked=${selected}\n        @change=${handleChange}\n        tabindex=${!disabled ? 0 : undefined}\n        name=${name}\n        value=${value}\n        @click=${!disabled ? this._handleClick : undefined}\n        @keydown=${this._handleKeydown}>\n        <span\n          class=\"${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent\">\n          ${this._renderIcon()}\n        </span>\n        <label class=\"${prefix}--tile-content\">\n          <slot></slot>\n        </label>\n        <slot name=\"decorator\"></slot>\n        <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n        <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  /**\n   * The name of the custom event fired after this selectable tile changes its selected state.\n   */\n  static get eventChange() {\n    return `${prefix}-selectable-tile-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSSelectableTile;\n"],"mappings":"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"}