@carbon/web-components 2.52.0 → 2.53.0

package/es-custom/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-custom--tile`]: true,
+			[`cds-custom--tile--selectable`]: true,
+			[`cds-custom--tile--radio`]: true,
+			[`cds-custom--tile--disabled`]: disabled,
+			[`cds-custom--tile--is-selected`]: selected,
+			[`cds-custom--tile--${colorScheme}`]: colorScheme,
+			[`cds-custom--tile--slug-rounded`]: hasAILabel && hasRoundedCorners
 		});
 		return html`
       <input
         type="radio"
         id="input"
-        class="${prefix}--tile-input"
+        class="${"cds-custom"}--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-custom--tile__checkmark`,
 			title: checkmarkLabel
 		})}
-        <div class="${prefix}--tile-content"><slot></slot></div>
+        <div class="${"cds-custom"}--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-custom-radio-tile-selected`;
 	}
 };
-CDSRadioTile = __decorate([carbonElement(`${prefix}-radio-tile`)], CDSRadioTile);
+CDSRadioTile = __decorate([carbonElement(`cds-custom-radio-tile`)], CDSRadioTile);
 var radio_tile_default = CDSRadioTile;
-
 //#endregion
 export { radio_tile_default as default };
+
 //# sourceMappingURL=radio-tile.js.map

package/es-custom/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-custom-radio-tile\n * @fires cds-custom-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-custom-radio-tile\n * @fires cds-custom-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-custom/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-custom--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-custom--tile`]: true,
+			[`cds-custom--tile--disabled`]: disabled,
+			[`cds-custom--tile--selectable`]: true,
+			[`cds-custom--tile--is-selected`]: selected,
+			[`cds-custom--tile--${colorScheme}`]: colorScheme,
+			[`cds-custom--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-custom"}--tile__checkmark ${"cds-custom"}--tile__checkmark--persistent">
           ${this._renderIcon()}
         </span>
-        <label class="${prefix}--tile-content">
+        <label class="${"cds-custom"}--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-custom-slug`;
 	}
 	/**
 	* A selector that will return the AI Label item.
 	*/
 	static get aiLabelItem() {
-		return `${prefix}-ai-label`;
+		return `cds-custom-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-custom-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-custom-selectable-tile`)], CDSSelectableTile);
 var selectable_tile_default = CDSSelectableTile;
-
 //#endregion
 export { selectable_tile_default as default };
+
 //# sourceMappingURL=selectable-tile.js.map

package/es-custom/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-custom-selectable-tile\n * @fires cds-custom-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-custom-selectable-tile\n * @fires cds-custom-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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"}

package/es-custom/components/tile/tile-group.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 HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
-import { NAVIGATION_DIRECTION } from "../../globals/internal/radio-group-manager.js";
+import "../../globals/internal/radio-group-manager.js";
 import tile_default from "./tile.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
-
 //#region src/components/tile/tile-group.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -26,14 +25,14 @@ import { property } from "lit/decorators.js";
 * Map of navigation direction by key.
 */
 const navigationDirectionForKey = {
-	ArrowUp: NAVIGATION_DIRECTION.BACKWARD,
-	Up: NAVIGATION_DIRECTION.BACKWARD,
-	ArrowLeft: NAVIGATION_DIRECTION.BACKWARD,
-	Left: NAVIGATION_DIRECTION.BACKWARD,
-	ArrowDown: NAVIGATION_DIRECTION.FORWARD,
-	Down: NAVIGATION_DIRECTION.FORWARD,
-	ArrowRight: NAVIGATION_DIRECTION.FORWARD,
-	Right: NAVIGATION_DIRECTION.FORWARD
+	ArrowUp: -1,
+	Up: -1,
+	ArrowLeft: -1,
+	Left: -1,
+	ArrowDown: 1,
+	Down: 1,
+	ArrowRight: 1,
+	Right: 1
 };
 /**
 * Tile group.
@@ -51,7 +50,7 @@ let CDSTileGroup = class CDSTileGroup extends HostListenerMixin(LitElement) {
 			const { target, key } = event;
 			const { radioTiles, selectableTiles } = this;
 			const navigationDirection = navigationDirectionForKey[key];
-			if (target?.matches(`${prefix}-ai-label`)) return;
+			if (target?.matches(`cds-custom-ai-label`)) return;
 			const tiles = radioTiles.length ? radioTiles : selectableTiles;
 			const nextIndex = [...tiles].findIndex((e) => e == target) + navigationDirection;
 			const nextSibling = nextIndex !== -1 ? tiles[nextIndex % tiles.length] : tiles[tiles.length - 1];
@@ -63,7 +62,7 @@ let CDSTileGroup = class CDSTileGroup extends HostListenerMixin(LitElement) {
 		};
 		this._handleFocus = (event) => {
 			const { relatedTarget, target } = event;
-			if (target?.matches(`${prefix}-ai-label`)) return;
+			if (target?.matches(`cds-custom-ai-label`)) return;
 			if (this.radioTiles.length) {
 				if (!this.currentRadioSelection) {
 					target.toggleAttribute("selected");
@@ -77,7 +76,7 @@ let CDSTileGroup = class CDSTileGroup extends HostListenerMixin(LitElement) {
 		const { target } = event;
 		const { currentRadioSelection } = this;
 		const { eventCurrentRadioTileSelection } = this.constructor;
-		if (target.matches(`${prefix}-ai-label`)) return;
+		if (target.matches(`cds-custom-ai-label`)) return;
 		if (!currentRadioSelection) this.currentRadioSelection = target;
 		else if (currentRadioSelection !== target) {
 			currentRadioSelection.toggleAttribute("selected");
@@ -154,7 +153,7 @@ let CDSTileGroup = class CDSTileGroup extends HostListenerMixin(LitElement) {
 		const { fieldsetClassName, disabled } = this;
 		return html`
       <fieldset class="${fieldsetClassName}" ?disabled=${disabled}>
-        <slot name="legend" class="${prefix}--label"></slot>
+        <slot name="legend" class="${"cds-custom"}--label"></slot>
         <slot></slot>
       </fieldset>
     `;
@@ -163,25 +162,25 @@ let CDSTileGroup = class CDSTileGroup extends HostListenerMixin(LitElement) {
 	* A selector that selects a radio tile component.
 	*/
 	static get selectorRadioTile() {
-		return `${prefix}-radio-tile`;
+		return `cds-custom-radio-tile`;
 	}
 	/**
 	* A selector that selects a selectable tile component.
 	*/
 	static get selectorSelectableTile() {
-		return `${prefix}-selectable-tile`;
+		return `cds-custom-selectable-tile`;
 	}
 	/**
 	* The name of the custom event fired after a radio tile changes its selected state.
 	*/
 	static get eventCurrentRadioTileSelection() {
-		return `${prefix}-current-radio-tile-selection`;
+		return `cds-custom-current-radio-tile-selection`;
 	}
 	/**
 	* The name of the custom event fired after a radio tile changes its selected state.
 	*/
 	static get eventCurrentSelectableTilesSelection() {
-		return `${prefix}-current-selectable-tile-selections`;
+		return `cds-custom-current-selectable-tile-selections`;
 	}
 	static {
 		this.styles = tile_default;
@@ -202,9 +201,9 @@ __decorate([property()], CDSTileGroup.prototype, "currentRadioSelection", void 0
 __decorate([property()], CDSTileGroup.prototype, "currentSelections", void 0);
 __decorate([property()], CDSTileGroup.prototype, "radioTiles", void 0);
 __decorate([property()], CDSTileGroup.prototype, "selectableTiles", void 0);
-CDSTileGroup = __decorate([carbonElement(`${prefix}-tile-group`)], CDSTileGroup);
+CDSTileGroup = __decorate([carbonElement(`cds-custom-tile-group`)], CDSTileGroup);
 var tile_group_default = CDSTileGroup;
-
 //#endregion
 export { tile_group_default as default };
+
 //# sourceMappingURL=tile-group.js.map

package/es-custom/components/tile/tile-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-group.js","names":["styles","customElement"],"sources":["../../../src/components/tile/tile-group.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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { NAVIGATION_DIRECTION } from '../../globals/internal/radio-group-manager';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport styles from './tile.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Map of navigation direction by key.\n */\nconst navigationDirectionForKey = {\n  ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n  Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n  ArrowLeft: NAVIGATION_DIRECTION.BACKWARD,\n  Left: NAVIGATION_DIRECTION.BACKWARD, // IE\n  ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n  Down: NAVIGATION_DIRECTION.FORWARD, // IE\n  ArrowRight: NAVIGATION_DIRECTION.FORWARD,\n  Right: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * Tile group.\n *\n * @element cds-custom-tile-group\n * @fires cds-custom-current-radio-tile-selection\n *   The name of the custom event fired after a radio tile changes its selected state.\n * @fires cds-custom-current-selectable-tile-selections\n *   The name of the custom event fired after a selectable tile changes its selected state.\n */\n@customElement(`${prefix}-tile-group`)\nclass CDSTileGroup extends HostListenerMixin(LitElement) {\n  private _handleRadioClick(event) {\n    const { target } = event;\n    const { currentRadioSelection } = this;\n    const { eventCurrentRadioTileSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (target.matches(`${prefix}-ai-label`)) {\n      return;\n    }\n\n    if (!currentRadioSelection) {\n      this.currentRadioSelection = target;\n    } else if (currentRadioSelection !== target) {\n      currentRadioSelection.toggleAttribute('selected');\n      this.currentRadioSelection = target;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentRadioTileSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          target,\n        },\n      })\n    );\n  }\n\n  /**\n   * Click listener to ensure selectability.\n   *\n   * @param event click\n   */\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  private _handleTileSelect(event: Event) {\n    if (this.radioTiles.length) {\n      this._handleRadioClick(event);\n    }\n  }\n\n  /**\n   * Handle keyboard navigation for radio tiles\n   *\n   * @param nextSibling to focus on\n   */\n  private _handleKeydownRadio(nextSibling) {\n    const { currentRadioSelection } = this;\n\n    const { eventCurrentRadioTileSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (currentRadioSelection) {\n      currentRadioSelection.toggleAttribute('selected');\n    }\n    nextSibling.focus();\n    nextSibling.toggleAttribute('selected');\n    this.currentRadioSelection = nextSibling;\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentRadioTileSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          nextSibling,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handle keyboard navigation for selectable tiles\n   *\n   * @param event to get target\n   * @param nextSibling to focus on\n   */\n  private _handleKeydownSelectable(event, nextSibling?) {\n    const { target } = event;\n    const { currentSelections } = this;\n    const { eventCurrentSelectableTilesSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (nextSibling) {\n      nextSibling.focus();\n    } else {\n      if (!currentSelections.includes(target)) {\n        currentSelections.push(target);\n      } else {\n        currentSelections.splice(currentSelections.indexOf(target), 1);\n      }\n\n      this.dispatchEvent(\n        new CustomEvent(eventCurrentSelectableTilesSelection, {\n          bubbles: true,\n          composed: true,\n          detail: {\n            currentSelections,\n          },\n        })\n      );\n    }\n  }\n\n  /**\n   * Keyboard listener to ensure keyboard navigation.\n   *\n   * @param event to get key pressed\n   */\n  @HostListener('keydown')\n  // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = (event: KeyboardEvent) => {\n    const { target, key } = event;\n    const { radioTiles, selectableTiles } = this;\n    const navigationDirection = navigationDirectionForKey[key];\n\n    if ((target as HTMLElement)?.matches(`${prefix}-ai-label`)) {\n      return;\n    }\n\n    const tiles = radioTiles.length ? radioTiles : selectableTiles;\n    const currentIndex = [...tiles].findIndex((e) => e == target);\n    const nextIndex = currentIndex + navigationDirection;\n    const nextSibling =\n      nextIndex !== -1\n        ? tiles[nextIndex % tiles.length]\n        : tiles[tiles.length - 1];\n\n    if (navigationDirection) {\n      event.preventDefault(); // Prevent default (scrolling) behavior\n\n      if (this.radioTiles.length) {\n        this._handleKeydownRadio(nextSibling);\n      } else {\n        this._handleKeydownSelectable(event, nextSibling);\n      }\n    } else if (key === ' ' || key === 'Enter') {\n      this._handleKeydownSelectable(event);\n    }\n  };\n\n  /**\n   * Focus listener to focus on selected element upon focusing\n   *\n   * @param event to get focused\n   */\n  @HostListener('focusin')\n  // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocus = (event: KeyboardEvent) => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n    const { relatedTarget, target } = event as any;\n    if ((target as HTMLElement)?.matches(`${prefix}-ai-label`)) {\n      return;\n    }\n\n    if (this.radioTiles.length) {\n      if (!this.currentRadioSelection) {\n        target.toggleAttribute('selected');\n        this.currentRadioSelection = target;\n      } else if (\n        !relatedTarget?.matches(\n          (this.constructor as typeof CDSTileGroup).selectorRadioTile\n        ) &&\n        target !== this.currentRadioSelection\n      ) {\n        this.currentRadioSelection.focus();\n      }\n    }\n  };\n\n  /**\n   * Provide an optional className to be applied to the component\n   */\n  @property({ reflect: true, attribute: 'fieldset-class-name' })\n  fieldsetClassName;\n\n  /**\n   * Specify whether the group is disabled\n   */\n  @property({ reflect: true, type: Boolean })\n  disabled;\n\n  @property()\n  currentRadioSelection;\n\n  @property()\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n  currentSelections = [] as any;\n\n  @property()\n  radioTiles;\n\n  @property()\n  selectableTiles;\n\n  firstUpdated() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n\n    if (!this.radioTiles) {\n      this.radioTiles = this.querySelectorAll(\n        (this.constructor as typeof CDSTileGroup).selectorRadioTile\n      );\n      this.radioTiles.forEach((tile) => {\n        if (tile.selected) {\n          this.currentRadioSelection = tile;\n        }\n      });\n    }\n\n    if (!this.selectableTiles) {\n      this.selectableTiles = this.querySelectorAll(\n        (this.constructor as typeof CDSTileGroup).selectorSelectableTile\n      );\n    }\n\n    if (this.disabled) {\n      this.radioTiles.forEach((e) => e.toggleAttribute('disabled'));\n      this.selectableTiles.forEach((e) => e.toggleAttribute('disabled'));\n    }\n  }\n\n  render() {\n    const { fieldsetClassName, disabled } = this;\n    return html`\n      <fieldset class=\"${fieldsetClassName}\" ?disabled=${disabled}>\n        <slot name=\"legend\" class=\"${prefix}--label\"></slot>\n        <slot></slot>\n      </fieldset>\n    `;\n  }\n\n  /**\n   * A selector that selects a radio tile component.\n   */\n  static get selectorRadioTile() {\n    return `${prefix}-radio-tile`;\n  }\n\n  /**\n   * A selector that selects a selectable tile component.\n   */\n  static get selectorSelectableTile() {\n    return `${prefix}-selectable-tile`;\n  }\n\n  /**\n   * The name of the custom event fired after a radio tile changes its selected state.\n   */\n  static get eventCurrentRadioTileSelection() {\n    return `${prefix}-current-radio-tile-selection`;\n  }\n\n  /**\n   * The name of the custom event fired after a radio tile changes its selected state.\n   */\n  static get eventCurrentSelectableTilesSelection() {\n    return `${prefix}-current-selectable-tile-selections`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTileGroup;\n"],"mappings":"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"}
+{"version":3,"file":"tile-group.js","names":["styles","customElement"],"sources":["../../../src/components/tile/tile-group.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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { NAVIGATION_DIRECTION } from '../../globals/internal/radio-group-manager';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport styles from './tile.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Map of navigation direction by key.\n */\nconst navigationDirectionForKey = {\n  ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n  Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n  ArrowLeft: NAVIGATION_DIRECTION.BACKWARD,\n  Left: NAVIGATION_DIRECTION.BACKWARD, // IE\n  ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n  Down: NAVIGATION_DIRECTION.FORWARD, // IE\n  ArrowRight: NAVIGATION_DIRECTION.FORWARD,\n  Right: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * Tile group.\n *\n * @element cds-custom-tile-group\n * @fires cds-custom-current-radio-tile-selection\n *   The name of the custom event fired after a radio tile changes its selected state.\n * @fires cds-custom-current-selectable-tile-selections\n *   The name of the custom event fired after a selectable tile changes its selected state.\n */\n@customElement(`${prefix}-tile-group`)\nclass CDSTileGroup extends HostListenerMixin(LitElement) {\n  private _handleRadioClick(event) {\n    const { target } = event;\n    const { currentRadioSelection } = this;\n    const { eventCurrentRadioTileSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (target.matches(`${prefix}-ai-label`)) {\n      return;\n    }\n\n    if (!currentRadioSelection) {\n      this.currentRadioSelection = target;\n    } else if (currentRadioSelection !== target) {\n      currentRadioSelection.toggleAttribute('selected');\n      this.currentRadioSelection = target;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentRadioTileSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          target,\n        },\n      })\n    );\n  }\n\n  /**\n   * Click listener to ensure selectability.\n   *\n   * @param event click\n   */\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  private _handleTileSelect(event: Event) {\n    if (this.radioTiles.length) {\n      this._handleRadioClick(event);\n    }\n  }\n\n  /**\n   * Handle keyboard navigation for radio tiles\n   *\n   * @param nextSibling to focus on\n   */\n  private _handleKeydownRadio(nextSibling) {\n    const { currentRadioSelection } = this;\n\n    const { eventCurrentRadioTileSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (currentRadioSelection) {\n      currentRadioSelection.toggleAttribute('selected');\n    }\n    nextSibling.focus();\n    nextSibling.toggleAttribute('selected');\n    this.currentRadioSelection = nextSibling;\n\n    this.dispatchEvent(\n      new CustomEvent(eventCurrentRadioTileSelection, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          nextSibling,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handle keyboard navigation for selectable tiles\n   *\n   * @param event to get target\n   * @param nextSibling to focus on\n   */\n  private _handleKeydownSelectable(event, nextSibling?) {\n    const { target } = event;\n    const { currentSelections } = this;\n    const { eventCurrentSelectableTilesSelection } = this\n      .constructor as typeof CDSTileGroup;\n\n    if (nextSibling) {\n      nextSibling.focus();\n    } else {\n      if (!currentSelections.includes(target)) {\n        currentSelections.push(target);\n      } else {\n        currentSelections.splice(currentSelections.indexOf(target), 1);\n      }\n\n      this.dispatchEvent(\n        new CustomEvent(eventCurrentSelectableTilesSelection, {\n          bubbles: true,\n          composed: true,\n          detail: {\n            currentSelections,\n          },\n        })\n      );\n    }\n  }\n\n  /**\n   * Keyboard listener to ensure keyboard navigation.\n   *\n   * @param event to get key pressed\n   */\n  @HostListener('keydown')\n  // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = (event: KeyboardEvent) => {\n    const { target, key } = event;\n    const { radioTiles, selectableTiles } = this;\n    const navigationDirection = navigationDirectionForKey[key];\n\n    if ((target as HTMLElement)?.matches(`${prefix}-ai-label`)) {\n      return;\n    }\n\n    const tiles = radioTiles.length ? radioTiles : selectableTiles;\n    const currentIndex = [...tiles].findIndex((e) => e == target);\n    const nextIndex = currentIndex + navigationDirection;\n    const nextSibling =\n      nextIndex !== -1\n        ? tiles[nextIndex % tiles.length]\n        : tiles[tiles.length - 1];\n\n    if (navigationDirection) {\n      event.preventDefault(); // Prevent default (scrolling) behavior\n\n      if (this.radioTiles.length) {\n        this._handleKeydownRadio(nextSibling);\n      } else {\n        this._handleKeydownSelectable(event, nextSibling);\n      }\n    } else if (key === ' ' || key === 'Enter') {\n      this._handleKeydownSelectable(event);\n    }\n  };\n\n  /**\n   * Focus listener to focus on selected element upon focusing\n   *\n   * @param event to get focused\n   */\n  @HostListener('focusin')\n  // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocus = (event: KeyboardEvent) => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n    const { relatedTarget, target } = event as any;\n    if ((target as HTMLElement)?.matches(`${prefix}-ai-label`)) {\n      return;\n    }\n\n    if (this.radioTiles.length) {\n      if (!this.currentRadioSelection) {\n        target.toggleAttribute('selected');\n        this.currentRadioSelection = target;\n      } else if (\n        !relatedTarget?.matches(\n          (this.constructor as typeof CDSTileGroup).selectorRadioTile\n        ) &&\n        target !== this.currentRadioSelection\n      ) {\n        this.currentRadioSelection.focus();\n      }\n    }\n  };\n\n  /**\n   * Provide an optional className to be applied to the component\n   */\n  @property({ reflect: true, attribute: 'fieldset-class-name' })\n  fieldsetClassName;\n\n  /**\n   * Specify whether the group is disabled\n   */\n  @property({ reflect: true, type: Boolean })\n  disabled;\n\n  @property()\n  currentRadioSelection;\n\n  @property()\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n  currentSelections = [] as any;\n\n  @property()\n  radioTiles;\n\n  @property()\n  selectableTiles;\n\n  firstUpdated() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n\n    if (!this.radioTiles) {\n      this.radioTiles = this.querySelectorAll(\n        (this.constructor as typeof CDSTileGroup).selectorRadioTile\n      );\n      this.radioTiles.forEach((tile) => {\n        if (tile.selected) {\n          this.currentRadioSelection = tile;\n        }\n      });\n    }\n\n    if (!this.selectableTiles) {\n      this.selectableTiles = this.querySelectorAll(\n        (this.constructor as typeof CDSTileGroup).selectorSelectableTile\n      );\n    }\n\n    if (this.disabled) {\n      this.radioTiles.forEach((e) => e.toggleAttribute('disabled'));\n      this.selectableTiles.forEach((e) => e.toggleAttribute('disabled'));\n    }\n  }\n\n  render() {\n    const { fieldsetClassName, disabled } = this;\n    return html`\n      <fieldset class=\"${fieldsetClassName}\" ?disabled=${disabled}>\n        <slot name=\"legend\" class=\"${prefix}--label\"></slot>\n        <slot></slot>\n      </fieldset>\n    `;\n  }\n\n  /**\n   * A selector that selects a radio tile component.\n   */\n  static get selectorRadioTile() {\n    return `${prefix}-radio-tile`;\n  }\n\n  /**\n   * A selector that selects a selectable tile component.\n   */\n  static get selectorSelectableTile() {\n    return `${prefix}-selectable-tile`;\n  }\n\n  /**\n   * The name of the custom event fired after a radio tile changes its selected state.\n   */\n  static get eventCurrentRadioTileSelection() {\n    return `${prefix}-current-radio-tile-selection`;\n  }\n\n  /**\n   * The name of the custom event fired after a radio tile changes its selected state.\n   */\n  static get eventCurrentSelectableTilesSelection() {\n    return `${prefix}-current-selectable-tile-selections`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTileGroup;\n"],"mappings":"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"}

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

@@ -5,14 +5,13 @@
  * 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 { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
 import tile_default$1 from "./tile.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
-
 //#region src/components/tile/tile.ts
 /**
 * Copyright IBM Corp. 2019, 2023
@@ -29,7 +28,7 @@ let CDSTile = class CDSTile extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this._hasAILabel = false;
-		this.colorScheme = FORM_ELEMENT_COLOR_SCHEME.REGULAR;
+		this.colorScheme = "";
 		this.hasRoundedCorners = false;
 	}
 	/**
@@ -59,13 +58,13 @@ let CDSTile = class CDSTile extends LitElement {
 	* TODO: remove in v12
 	*/
 	static get slugItem() {
-		return `${prefix}-slug`;
+		return `cds-custom-slug`;
 	}
 	/**
 	* A selector that will return the AI Label item.
 	*/
 	static get aiLabelItem() {
-		return `${prefix}-ai-label`;
+		return `cds-custom-ai-label`;
 	}
 	static {
 		this.styles = tile_default$1;
@@ -79,9 +78,9 @@ __decorate([property({
 	type: Boolean,
 	attribute: "has-rounded-corners"
 })], CDSTile.prototype, "hasRoundedCorners", void 0);
-CDSTile = __decorate([carbonElement(`${prefix}-tile`)], CDSTile);
+CDSTile = __decorate([carbonElement(`cds-custom-tile`)], CDSTile);
 var tile_default = CDSTile;
-
 //#endregion
 export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME, tile_default as default };
+
 //# sourceMappingURL=tile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tile.js","names":["TILE_COLOR_SCHEME","styles","customElement"],"sources":["../../../src/components/tile/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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TILE_COLOR_SCHEME };\n\n/**\n * Basic tile.\n *\n * @element cds-custom-tile\n */\n@customElement(`${prefix}-tile`)\nclass CDSTile extends LitElement {\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 CDSTile).aiLabelItem\n            ) ||\n            // remove reference of slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSTile).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   * The color scheme.\n   *\n   * @deprecated\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * Specify if the `Tile` 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  updated() {\n    if (this._hasAILabel) {\n      this.setAttribute('ai-label', '');\n    } else {\n      this.removeAttribute('ai-label');\n    }\n  }\n\n  render() {\n    return html` <slot></slot\n      ><slot name=\"decorator\" @slotchange=\"${this._handleSlotChange}\"></slot>\n      <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot\n      ><slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>`;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * TODO: 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 CDSTile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,oBACM,gBAAgB,WAAW;;;qBAIP;qBAgCVA,0BAAkB;2BAOZ;;;;;CAlCpB,AAAU,kBAAkB,EAAE,UAAiB;EAC7C,MAAM,aAAc,OACjB,eAAe,CACf,QAAQ,SACN,KAAqB,YAAY,SAC7B,KAAqB,QACnB,KAAK,YAA+B,YACtC,IAEA,KAAqB,QACnB,KAAK,YAA+B,SACtC,GACD,MACL;AACH,MAAI,WAAW,SAAS,GAAG;AACzB,QAAK,cAAc,QAAQ,WAAW;AACtC,GAAC,WAAW,GAAmB,aAAa,QAAQ,KAAK;;AAE3D,OAAK,eAAe;;CAkBtB,UAAU;AACR,MAAI,KAAK,YACP,MAAK,aAAa,YAAY,GAAG;MAEjC,MAAK,gBAAgB,WAAW;;CAIpC,SAAS;AACP,SAAO,IAAI;6CAC8B,KAAK,kBAAkB;2CACzB,KAAK,kBAAkB;wCAC1B,KAAK,kBAAkB;;;;;;;CAQ7D,WAAW,WAAW;AACpB,SAAO,GAAG,OAAO;;;;;CAMnB,WAAW,cAAc;AACvB,SAAO,GAAG,OAAO;;;gBAGHC;;;YAzCf,SAAS;CAAE,WAAW;CAAgB,SAAS;CAAM,CAAC;YAOtD,SAAS;CAAE,MAAM;CAAS,WAAW;CAAuB,CAAC;sBA3C/DC,cAAc,GAAG,OAAO,OAAO;AAgFhC,mBAAe"}
+{"version":3,"file":"tile.js","names":["styles","customElement"],"sources":["../../../src/components/tile/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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TILE_COLOR_SCHEME };\n\n/**\n * Basic tile.\n *\n * @element cds-custom-tile\n */\n@customElement(`${prefix}-tile`)\nclass CDSTile extends LitElement {\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 CDSTile).aiLabelItem\n            ) ||\n            // remove reference of slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSTile).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   * The color scheme.\n   *\n   * @deprecated\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * Specify if the `Tile` 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  updated() {\n    if (this._hasAILabel) {\n      this.setAttribute('ai-label', '');\n    } else {\n      this.removeAttribute('ai-label');\n    }\n  }\n\n  render() {\n    return html` <slot></slot\n      ><slot name=\"decorator\" @slotchange=\"${this._handleSlotChange}\"></slot>\n      <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot\n      ><slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>`;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * TODO: 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 CDSTile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAA,UAAA,MACM,gBAAgB,WAAW;;;qBAIP;;2BAuCJ;;;;;CAlCpB,kBAA4B,EAAE,UAAiB;EAC7C,MAAM,aAAc,OACjB,eAAe,CACf,QAAQ,SACN,KAAqB,YAAY,KAAA,IAC7B,KAAqB,QACnB,KAAK,YAA+B,YACtC,IAEA,KAAqB,QACnB,KAAK,YAA+B,SACtC,GACD,MACL;AACH,MAAI,WAAW,SAAS,GAAG;AACzB,QAAK,cAAc,QAAQ,WAAW;AACrC,cAAW,GAAmB,aAAa,QAAQ,KAAK;;AAE3D,OAAK,eAAe;;CAkBtB,UAAU;AACR,MAAI,KAAK,YACP,MAAK,aAAa,YAAY,GAAG;MAEjC,MAAK,gBAAgB,WAAW;;CAIpC,SAAS;AACP,SAAO,IAAI;6CAC8B,KAAK,kBAAkB;2CACzB,KAAK,kBAAkB;wCAC1B,KAAK,kBAAkB;;;;;;;CAQ7D,WAAW,WAAW;AACpB,SAAO;;;;;CAMT,WAAW,cAAc;AACvB,SAAO;;;gBAGOA;;;YAzCf,SAAS;CAAE,WAAW;CAAgB,SAAS;CAAM,CAAC,CAAA,EAAA,QAAA,WAAA,eAAA,KAAA,EAAA;YAOtD,SAAS;CAAE,MAAM;CAAS,WAAW;CAAuB,CAAC,CAAA,EAAA,QAAA,WAAA,qBAAA,KAAA,EAAA;sBA3C/DC,cAAc,WAAiB,CAAA,EAAA,QAAA;AAgFhC,IAAA,eAAe"}