@carbon/web-components 2.52.0 → 2.53.0-rc.0

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

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { filter } from "../../globals/internal/collection-helpers.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 FormMixin from "../../globals/mixins/form.js";
 import if_non_empty_default from "../../globals/directives/if-non-empty.js";
-import { INPUT_SIZE } from "../text-input/defs.js";
+import "../text-input/defs.js";
 import "../text-input/text-input.js";
 import select_default$1 from "./select.scss.js";
 import { LitElement, html } from "lit";
@@ -22,7 +22,6 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import WarningFilled16 from "@carbon/icons/es/warning--filled/16.js";
 import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16.js";
 import ChevronDown16 from "@carbon/icons/es/chevron--down/16.js";
-
 //#region src/components/select/select.ts
 /**
 * Copyright IBM Corp. 2020, 2026
@@ -45,7 +44,7 @@ let CDSSelect = class CDSSelect extends FormMixin(LitElement) {
 		super(..._args);
 		this._hasAILabel = false;
 		this._observerMutation = null;
-		this._placeholderItemValue = `__${prefix}-select-placeholder_${Math.random().toString(36).slice(2)}`;
+		this._placeholderItemValue = `__cds-custom-select-placeholder_${Math.random().toString(36).slice(2)}`;
 		this.isFluid = false;
 		this._handleMutation = () => {
 			this.requestUpdate();
@@ -54,12 +53,13 @@ let CDSSelect = class CDSSelect extends FormMixin(LitElement) {
 		this.disabled = false;
 		this.helperText = "";
 		this.hideLabel = false;
-		this.id = "";
+		this.id = "select";
 		this.invalid = false;
 		this.invalidText = "";
 		this.warn = false;
 		this.warnText = "";
 		this.labelText = "";
+		this.labelStylesDisable = false;
 		this.inline = false;
 		this.name = "";
 		this.pattern = "";
@@ -67,7 +67,7 @@ let CDSSelect = class CDSSelect extends FormMixin(LitElement) {
 		this.readonly = false;
 		this.required = false;
 		this.requiredValidityMessage = "Please fill out this field.";
-		this.size = INPUT_SIZE.MEDIUM;
+		this.size = "md";
 		this.value = "";
 	}
 	/**
@@ -101,7 +101,7 @@ let CDSSelect = class CDSSelect extends FormMixin(LitElement) {
 			const { textContent } = item;
 			return item.matches(selectorLeafItem) ? html`
               <option
-                class="${prefix}--select-option"
+                class="${"cds-custom"}--select-option"
                 ?disabled="${disabled}"
                 label="${if_non_empty_default(label)}"
                 ?selected="${selected}"
@@ -110,7 +110,7 @@ let CDSSelect = class CDSSelect extends FormMixin(LitElement) {
               </option>
             ` : html`
               <optgroup
-                class="${prefix}--select-optgroup"
+                class="${"cds-custom"}--select-optgroup"
                 ?disabled="${disabled}"
                 label="${ifDefined(label)}">
                 ${this._renderItems(item)}
@@ -195,36 +195,36 @@ let CDSSelect = class CDSSelect extends FormMixin(LitElement) {
 		}
 		const label = this.shadowRoot?.querySelector("slot[name='ai-label']");
 		if (label) {
-			if (label.assignedNodes()?.length) this._inputNode?.classList.add(`${prefix}--select-input-has--ai-label`);
-			label?.classList.toggle(`${prefix}--slug--revert`, this.querySelector(`${prefix}-ai-label`)?.hasAttribute("revert-active"));
-		} else this.shadowRoot?.querySelector("slot[name='slug']")?.classList.toggle(`${prefix}--slug--revert`, this.querySelector(`${prefix}-slug`)?.hasAttribute("revert-active"));
+			if (label.assignedNodes()?.length) this._selectNode?.classList.add(`cds-custom--select-input-has--ai-label`);
+			label?.classList.toggle(`cds-custom--slug--revert`, this.querySelector(`cds-custom-ai-label`)?.hasAttribute("revert-active"));
+		} else this.shadowRoot?.querySelector("slot[name='slug']")?.classList.toggle(`cds-custom--slug--revert`, this.querySelector(`cds-custom-slug`)?.hasAttribute("revert-active"));
 	}
 	render() {
-		const { disabled, helperText, hideLabel, inline, invalid, invalidText, labelText, placeholder, readonly, size, warn, warnText, value, _placeholderItemValue: placeholderItemValue, _handleInput: handleInput, _handleAILabelSlotChange: handleAILabelSlotChange } = this;
+		const { disabled, helperText, hideLabel, id, inline, invalid, invalidText, labelStylesDisable, labelText, placeholder, readonly, size, warn, warnText, value, _placeholderItemValue: placeholderItemValue, _handleInput: handleInput, _handleAILabelSlotChange: handleAILabelSlotChange } = this;
 		const normalizedProps = {
 			disabled: !readonly && disabled,
 			invalid: !readonly && !disabled && invalid,
 			warn: !readonly && !invalid && !disabled && warn
 		};
 		const inputClasses = classMap({
-			[`${prefix}--select-input`]: true,
-			[`${prefix}--select-input--${size}`]: size
+			[`cds-custom--select-input`]: true,
+			[`cds-custom--select-input--${size}`]: size
 		});
 		const labelClasses = classMap({
-			[`${prefix}--label`]: true,
-			[`${prefix}--label--disabled`]: normalizedProps.disabled,
-			[`${prefix}--visually-hidden`]: hideLabel
+			[`cds-custom--label`]: !labelStylesDisable,
+			[`cds-custom--label--disabled`]: normalizedProps.disabled,
+			[`cds-custom--visually-hidden`]: hideLabel
 		});
 		const helperTextClasses = classMap({
-			[`${prefix}--form__helper-text`]: true,
-			[`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
+			[`cds-custom--form__helper-text`]: true,
+			[`cds-custom--form__helper-text--disabled`]: normalizedProps.disabled
 		});
 		const supplementalText = helperText ? html`
           <div id="helper-text" class="${helperTextClasses}">
             <slot name="helper-text"> ${helperText} </slot>
           </div>
         ` : null;
-		const errorText = normalizedProps.invalid || normalizedProps.warn ? html` <div id="error-text" class="${prefix}--form-requirement">
+		const errorText = normalizedProps.invalid || normalizedProps.warn ? html` <div id="error-text" class="${"cds-custom"}--form-requirement">
             ${normalizedProps.invalid ? invalidText : warnText}
           </div>` : null;
 		let describedBy;
@@ -232,7 +232,7 @@ let CDSSelect = class CDSSelect extends FormMixin(LitElement) {
 		else if (helperText) describedBy = "helper-text";
 		const input = html`
       <select
-        id="input"
+        id="${id}"
         class="${inputClasses}"
         ?disabled="${disabled}"
         title="${value}"
@@ -244,7 +244,7 @@ let CDSSelect = class CDSSelect extends FormMixin(LitElement) {
               <option
                 disabled
                 hidden
-                class="${prefix}--select-option"
+                class="${"cds-custom"}--select-option"
                 value="${placeholderItemValue}">
                 ${placeholder}
               </option>
@@ -252,36 +252,36 @@ let CDSSelect = class CDSSelect extends FormMixin(LitElement) {
         ${this._renderItems(this)}
       </select>
       ${iconLoader(ChevronDown16, {
-			class: `${prefix}--select__arrow`,
+			class: `cds-custom--select__arrow`,
 			"aria-hidden": "true"
 		})}
       <slot
         name="ai-label"
-        style="--${prefix}-show-before: ${normalizedProps.warn || normalizedProps.invalid ? "block" : "none"}"
+        style="--${"cds-custom"}-show-before: ${normalizedProps.warn || normalizedProps.invalid ? "block" : "none"}"
         @slotchange=${handleAILabelSlotChange}></slot>
       <slot name="slug" @slotchange=${handleAILabelSlotChange}></slot>
-      ${!normalizedProps.invalid ? void 0 : iconLoader(WarningFilled16, { class: `${prefix}--select__invalid-icon` })}
-      ${!normalizedProps.invalid && normalizedProps.warn ? iconLoader(WarningAltFilled16, { class: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning` }) : null}
+      ${!normalizedProps.invalid ? void 0 : iconLoader(WarningFilled16, { class: `cds-custom--select__invalid-icon` })}
+      ${!normalizedProps.invalid && normalizedProps.warn ? iconLoader(WarningAltFilled16, { class: `cds-custom--select__invalid-icon cds-custom--select__invalid-icon--warning` }) : null}
     `;
 		return html`
-      <label class="${labelClasses}" for="input">
-        <slot name="label-text"> ${labelText} </slot>
+      <label class="${labelClasses}" for=${id}>
+        <slot name="label-text">${labelText}</slot>
       </label>
 
       ${inline ? html`<div
-            class="${prefix}--select-input--inline__wrapper"
+            class="${"cds-custom"}--select-input--inline__wrapper"
             ?data-invalid="${normalizedProps.invalid}">
             <div
-              class="${prefix}--select-input__wrapper"
+              class="${"cds-custom"}--select-input__wrapper"
               ?data-invalid="${normalizedProps.invalid}">
               ${input}
             </div>
           </div>` : html`<div
-            class="${prefix}--select-input__wrapper"
+            class="${"cds-custom"}--select-input__wrapper"
             ?data-invalid="${normalizedProps.invalid}">
             ${input}
             ${this.isFluid ? html`
-                  <hr class="${prefix}--select__divider" />
+                  <hr class="${"cds-custom"}--select__divider" />
                   ${errorText ? errorText : null}
                 ` : null}
           </div> `}
@@ -292,13 +292,13 @@ let CDSSelect = class CDSSelect extends FormMixin(LitElement) {
 	* A selector selecting child pseudo `<optgroup>`/`<option>`.
 	*/
 	static get selectorItem() {
-		return `${prefix}-select-item-group,${prefix}-select-item`;
+		return `cds-custom-select-item-group,cds-custom-select-item`;
 	}
 	/**
 	* A selector selecting child pseudo `<option>`.
 	*/
 	static get selectorLeafItem() {
-		return `${prefix}-select-item`;
+		return `cds-custom-select-item`;
 	}
 	/**
 	* A selector that will return the slug item.
@@ -306,19 +306,19 @@ let CDSSelect = class CDSSelect extends FormMixin(LitElement) {
 	* 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 item is selected.
 	*/
 	static get eventSelect() {
-		return `${prefix}-select-selected`;
+		return `cds-custom-select-selected`;
 	}
 	static {
 		this.shadowRootOptions = {
@@ -331,8 +331,7 @@ let CDSSelect = class CDSSelect extends FormMixin(LitElement) {
 	}
 };
 __decorate([query("select")], CDSSelect.prototype, "_selectNode", void 0);
-__decorate([query("#input")], CDSSelect.prototype, "_inputNode", void 0);
-__decorate([queryAll(`.${prefix}--select-option[selected]`)], CDSSelect.prototype, "_selectedOptionNodes", void 0);
+__decorate([queryAll(`.cds-custom--select-option[selected]`)], CDSSelect.prototype, "_selectedOptionNodes", void 0);
 __decorate([property({ type: Boolean })], CDSSelect.prototype, "isFluid", void 0);
 __decorate([property({ type: Boolean })], CDSSelect.prototype, "autofocus", void 0);
 __decorate([property({
@@ -356,6 +355,10 @@ __decorate([property({
 })], CDSSelect.prototype, "warn", void 0);
 __decorate([property({ attribute: "warn-text" })], CDSSelect.prototype, "warnText", void 0);
 __decorate([property({ attribute: "label-text" })], CDSSelect.prototype, "labelText", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "label-styles-disable"
+})], CDSSelect.prototype, "labelStylesDisable", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -376,9 +379,9 @@ __decorate([property({ attribute: "required-validity-message" })], CDSSelect.pro
 __decorate([property({ type: Number })], CDSSelect.prototype, "selectedIndex", null);
 __decorate([property({ reflect: true })], CDSSelect.prototype, "size", void 0);
 __decorate([property({ reflect: true })], CDSSelect.prototype, "value", void 0);
-CDSSelect = __decorate([carbonElement(`${prefix}-select`)], CDSSelect);
+CDSSelect = __decorate([carbonElement(`cds-custom-select`)], CDSSelect);
 var select_default = CDSSelect;
-
 //#endregion
 export { select_default as default };
+
 //# sourceMappingURL=select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["ifNonEmpty","styles","customElement"],"sources":["../../../src/components/select/select.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 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, query, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronDown16 from '@carbon/icons/es/chevron--down/16.js';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport FormMixin from '../../globals/mixins/form';\nimport { filter } from '../../globals/internal/collection-helpers';\nimport { INPUT_SIZE } from '../text-input/text-input';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport styles from './select.scss?lit';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Select box.\n *\n * @element cds-custom-select\n * @fires cds-custom-select-selected\n *   The name of the custom event fired after an item is selected.\n * @slot helper-text - The helper text.\n * @slot label-text - The label text.\n * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.\n */\n@customElement(`${prefix}-select`)\nclass CDSSelect extends FormMixin(LitElement) {\n  /**\n   * `true` if there is an AI Label.\n   */\n  protected _hasAILabel = false;\n\n  /**\n   * The mutation observer DOM mutation.\n   */\n  private _observerMutation: MutationObserver | null = null;\n\n  /**\n   * The `value` for placeholder `<option>`.\n   */\n  private _placeholderItemValue = `__${prefix}-select-placeholder_${Math.random()\n    .toString(36)\n    .slice(2)}`;\n\n  /**\n   * The select box.\n   */\n  @query('select')\n  private _selectNode!: HTMLSelectElement;\n\n  /**\n   * Input node of `select` element\n   */\n  @query('#input')\n  private _inputNode!: HTMLInputElement;\n\n  /**\n   * Select all <option> nodes with `selected` attribute\n   */\n  @queryAll(`.${prefix}--select-option[selected]`)\n  private _selectedOptionNodes!: HTMLOptionElement[];\n\n  /**\n   * Specify whether the textarea is fluid or not\n   */\n  @property({ type: Boolean })\n  isFluid = false;\n\n  /**\n   * Handles `oninput` event on the `<input>`.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   */\n  private _handleInput({ target }: Event) {\n    const { value } = target as HTMLSelectElement;\n    this.value = value;\n    const { eventSelect } = this.constructor as typeof CDSSelect;\n    this.dispatchEvent(\n      new CustomEvent(eventSelect, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles DOM mutation of `<cds-custom-select-item>` or `<cds-custom-select-item-group>` put in `<cds-custom-select>`, or their changes.\n   * In such event, `<cds-custom-select>` creates the corresponding `<option>` and `<optgroup>`, respectively, into shadow DOM,\n   * with `._renderItems()`.\n   * Doing so allows the shadow DOM style of `<cds-custom-select>` to control the style of the `<option>` and `<optgroup>`,\n   * notably the disabled ones.\n   */\n  private _handleMutation = () => {\n    this.requestUpdate();\n  };\n\n  /**\n   * @param element The parent element containing pseudo `<optgroup>`/`<option>`.\n   * @returns The template containing child `<optgroup>`/`<option>` that will be rendered to shadow DOM.\n   */\n  private _renderItems(element: CDSSelect | HTMLOptGroupElement) {\n    const { selectorItem, selectorLeafItem } = this\n      .constructor as typeof CDSSelect;\n    // Harvests attributes from `<cds-custom-select-item>` and `<cds-custom-select-item-group>`.\n    // Does not use properties to avoid delay in attribute to property mapping, which runs in custom element reaction cycle:\n    // https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-reactions\n    return html`\n      ${filter(\n        element.childNodes,\n        (item) =>\n          item.nodeType === Node.ELEMENT_NODE &&\n          (item as Element).matches(selectorItem)\n      ).map((item) => {\n        const disabled = item.hasAttribute('disabled');\n        const label = item.getAttribute('label');\n        const selected = item.hasAttribute('selected');\n        const value = item.getAttribute('value');\n        const { textContent } = item;\n        return item.matches(selectorLeafItem)\n          ? html`\n              <option\n                class=\"${prefix}--select-option\"\n                ?disabled=\"${disabled}\"\n                label=\"${ifNonEmpty(label)}\"\n                ?selected=\"${selected}\"\n                value=\"${ifDefined(value)}\">\n                ${textContent}\n              </option>\n            `\n          : html`\n              <optgroup\n                class=\"${prefix}--select-optgroup\"\n                ?disabled=\"${disabled}\"\n                label=\"${ifDefined(label)}\">\n                ${this._renderItems(item)}\n              </optgroup>\n            `;\n      })}\n    `;\n  }\n\n  _handleFormdata(event: FormDataEvent) {\n    const { formData } = event;\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, value);\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleAILabelSlotChange({ 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 CDSSelect).aiLabelItem\n            ) ||\n            // remove reference to slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSSelect).slugItem\n            )\n          : false\n      );\n\n    this._hasAILabel = Boolean(hasContent);\n    this.setAttribute('slug', `${this._hasAILabel}`);\n    (hasContent[0] as HTMLElement).setAttribute('size', 'mini');\n    this.requestUpdate();\n  }\n\n  /**\n   * The count of child `<option>`s.\n   * If the placeholder is in effect, it includes the `<option>` for the placeholder.\n   */\n  get length() {\n    return this._selectNode.length;\n  }\n\n  /**\n   * The child `<option>`s.\n   */\n  get options() {\n    return this._selectNode.options;\n  }\n\n  /**\n   * This form control's type.\n   */\n  get type() {\n    return this._selectNode.type;\n  }\n\n  /**\n   * Sets the select to be focussed automatically on page load. Defaults to false\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * Controls the disabled state of the select\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * Specify whether the label should be hidden, or not\n   */\n  @property({ type: Boolean, attribute: 'hide-label' })\n  hideLabel = false;\n\n  /**\n   * ID to link the `label` and `select`\n   */\n  @property()\n  id = '';\n\n  /**\n   * Specify if the currently value is invalid.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * Message which is displayed if the value is invalid.\n   */\n  @property({ attribute: 'invalid-text' })\n  invalidText = '';\n\n  /**\n   * Specify if the currently value is warn.\n   */\n  @property({ type: Boolean, reflect: true })\n  warn = false;\n\n  /**\n   * Message which is displayed if the value is warn.\n   */\n  @property({ attribute: 'warn-text' })\n  warnText = '';\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * Specify whether you want the inline version of this control\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * `true` to enable multiple selection.\n   */\n  @property({ type: Boolean })\n  get multiple() {\n    return false;\n  }\n\n  /**\n   * Name for the select in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * Pattern to validate the select against for HTML validity checking\n   */\n  @property()\n  pattern = '';\n\n  /**\n   * Value to display when the select has an empty `value`\n   */\n  @property({ reflect: true })\n  placeholder = '';\n\n  /**\n   * Controls the readonly state of the select\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Boolean property to set the required status\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The special validity message for `required`.\n   */\n  @property({ attribute: 'required-validity-message' })\n  requiredValidityMessage = 'Please fill out this field.';\n\n  /**\n   * The selected index.\n   */\n  @property({ type: Number })\n  get selectedIndex() {\n    return this._selectNode?.selectedIndex;\n  }\n\n  set selectedIndex(value) {\n    this._selectNode.selectedIndex = value;\n    this.value = this._selectNode.value;\n  }\n\n  /**\n   * The input box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.MEDIUM;\n\n  /**\n   * The value of the text area.\n   */\n  @property({ reflect: true })\n  value = '';\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observerMutation = new MutationObserver(this._handleMutation);\n    this._observerMutation.observe(this, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this._observerMutation) {\n      this._observerMutation.disconnect();\n      this._observerMutation = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('value')) {\n      const { value, _placeholderItemValue: placeholderItemValue } = this;\n      // Ensures setting the `value` after rendering child `<option>`s/`<optgroup>`s when there is a change in `value`,\n      // given reflecting `value` requires child `<option>`s/`<optgroup>`s being there beforehand\n\n      const lastOption =\n        this._selectedOptionNodes?.[this._selectedOptionNodes?.length - 1]?.[\n          'value'\n        ];\n\n      if (value) {\n        this._selectNode.value = value;\n      } else if (lastOption) {\n        this._selectNode.value = lastOption;\n      } else {\n        this._selectNode.value = placeholderItemValue;\n      }\n    }\n\n    const label = this.shadowRoot?.querySelector(\"slot[name='ai-label']\");\n\n    if (label) {\n      if ((label as HTMLSlotElement).assignedNodes()?.length) {\n        this._inputNode?.classList.add(`${prefix}--select-input-has--ai-label`);\n      }\n\n      label?.classList.toggle(\n        `${prefix}--slug--revert`,\n        this.querySelector(`${prefix}-ai-label`)?.hasAttribute('revert-active')\n      );\n    } else {\n      this.shadowRoot\n        ?.querySelector(\"slot[name='slug']\")\n        ?.classList.toggle(\n          `${prefix}--slug--revert`,\n          this.querySelector(`${prefix}-slug`)?.hasAttribute('revert-active')\n        );\n    }\n  }\n\n  render() {\n    const {\n      disabled,\n      helperText,\n      hideLabel,\n      inline,\n      invalid,\n      invalidText,\n      labelText,\n      placeholder,\n      readonly,\n      size,\n      warn,\n      warnText,\n      value,\n      _placeholderItemValue: placeholderItemValue,\n      _handleInput: handleInput,\n      _handleAILabelSlotChange: handleAILabelSlotChange,\n    } = this;\n\n    const normalizedProps: {\n      disabled: boolean;\n      invalid: boolean;\n      warn: boolean;\n    } = {\n      disabled: !readonly && disabled,\n      invalid: !readonly && !disabled && invalid,\n      warn: !readonly && !invalid && !disabled && warn,\n    };\n\n    const inputClasses = classMap({\n      [`${prefix}--select-input`]: true,\n      [`${prefix}--select-input--${size}`]: size,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: normalizedProps.disabled,\n      [`${prefix}--visually-hidden`]: hideLabel,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,\n    });\n\n    const supplementalText = helperText\n      ? html`\n          <div id=\"helper-text\" class=\"${helperTextClasses}\">\n            <slot name=\"helper-text\"> ${helperText} </slot>\n          </div>\n        `\n      : null;\n\n    const errorText =\n      normalizedProps.invalid || normalizedProps.warn\n        ? html` <div id=\"error-text\" class=\"${prefix}--form-requirement\">\n            ${normalizedProps.invalid ? invalidText : warnText}\n          </div>`\n        : null;\n\n    let describedBy: string | undefined;\n    if (normalizedProps.invalid || normalizedProps.warn) {\n      describedBy = 'error-text';\n    } else if (helperText) {\n      describedBy = 'helper-text';\n    }\n\n    const input = html`\n      <select\n        id=\"input\"\n        class=\"${inputClasses}\"\n        ?disabled=\"${disabled}\"\n        title=\"${value}\"\n        aria-readonly=\"${String(readonly)}\"\n        aria-invalid=\"${String(normalizedProps.invalid)}\"\n        aria-describedby=\"${ifDefined(describedBy)}\"\n        @input=\"${handleInput}\">\n        ${!placeholder || value\n          ? undefined\n          : html`\n              <option\n                disabled\n                hidden\n                class=\"${prefix}--select-option\"\n                value=\"${placeholderItemValue}\">\n                ${placeholder}\n              </option>\n            `}\n        ${this._renderItems(this)}\n      </select>\n      ${iconLoader(ChevronDown16, {\n        class: `${prefix}--select__arrow`,\n        'aria-hidden': 'true',\n      })}\n      <slot\n        name=\"ai-label\"\n        style=\"--${prefix}-show-before: ${normalizedProps.warn ||\n        normalizedProps.invalid\n          ? 'block'\n          : 'none'}\"\n        @slotchange=${handleAILabelSlotChange}></slot>\n      <slot name=\"slug\" @slotchange=${handleAILabelSlotChange}></slot>\n      ${!normalizedProps.invalid\n        ? undefined\n        : iconLoader(WarningFilled16, {\n            class: `${prefix}--select__invalid-icon`,\n          })}\n      ${!normalizedProps.invalid && normalizedProps.warn\n        ? iconLoader(WarningAltFilled16, {\n            class: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning`,\n          })\n        : null}\n    `;\n\n    return html`\n      <label class=\"${labelClasses}\" for=\"input\">\n        <slot name=\"label-text\"> ${labelText} </slot>\n      </label>\n\n      ${inline\n        ? html`<div\n            class=\"${prefix}--select-input--inline__wrapper\"\n            ?data-invalid=\"${normalizedProps.invalid}\">\n            <div\n              class=\"${prefix}--select-input__wrapper\"\n              ?data-invalid=\"${normalizedProps.invalid}\">\n              ${input}\n            </div>\n          </div>`\n        : html`<div\n            class=\"${prefix}--select-input__wrapper\"\n            ?data-invalid=\"${normalizedProps.invalid}\">\n            ${input}\n            ${this.isFluid\n              ? html`\n                  <hr class=\"${prefix}--select__divider\" />\n                  ${errorText ? errorText : null}\n                `\n              : null}\n          </div> `}\n      ${!this.isFluid && errorText ? errorText : supplementalText}\n    `;\n  }\n\n  /**\n   * A selector selecting child pseudo `<optgroup>`/`<option>`.\n   */\n  static get selectorItem() {\n    return `${prefix}-select-item-group,${prefix}-select-item`;\n  }\n\n  /**\n   * A selector selecting child pseudo `<option>`.\n   */\n  static get selectorLeafItem() {\n    return `${prefix}-select-item`;\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 item is selected.\n   */\n  static get eventSelect() {\n    return `${prefix}-select-selected`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSSelect;\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":["ifNonEmpty","styles","customElement"],"sources":["../../../src/components/select/select.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 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, query, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronDown16 from '@carbon/icons/es/chevron--down/16.js';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport FormMixin from '../../globals/mixins/form';\nimport { filter } from '../../globals/internal/collection-helpers';\nimport { INPUT_SIZE } from '../text-input/text-input';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport styles from './select.scss?lit';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Select box.\n *\n * @element cds-custom-select\n * @fires cds-custom-select-selected\n *   The name of the custom event fired after an item is selected.\n * @slot helper-text - The helper text.\n * @slot label-text - The label text.\n * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.\n */\n@customElement(`${prefix}-select`)\nclass CDSSelect extends FormMixin(LitElement) {\n  /**\n   * `true` if there is an AI Label.\n   */\n  protected _hasAILabel = false;\n\n  /**\n   * The mutation observer DOM mutation.\n   */\n  private _observerMutation: MutationObserver | null = null;\n\n  /**\n   * The `value` for placeholder `<option>`.\n   */\n  private _placeholderItemValue = `__${prefix}-select-placeholder_${Math.random()\n    .toString(36)\n    .slice(2)}`;\n\n  /**\n   * The select box.\n   */\n  @query('select')\n  private _selectNode!: HTMLSelectElement;\n\n  /**\n   * Select all <option> nodes with `selected` attribute\n   */\n  @queryAll(`.${prefix}--select-option[selected]`)\n  private _selectedOptionNodes!: HTMLOptionElement[];\n\n  /**\n   * Specify whether the textarea is fluid or not\n   */\n  @property({ type: Boolean })\n  isFluid = false;\n\n  /**\n   * Handles `oninput` event on the `<input>`.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   */\n  private _handleInput({ target }: Event) {\n    const { value } = target as HTMLSelectElement;\n    this.value = value;\n    const { eventSelect } = this.constructor as typeof CDSSelect;\n    this.dispatchEvent(\n      new CustomEvent(eventSelect, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles DOM mutation of `<cds-custom-select-item>` or `<cds-custom-select-item-group>` put in `<cds-custom-select>`, or their changes.\n   * In such event, `<cds-custom-select>` creates the corresponding `<option>` and `<optgroup>`, respectively, into shadow DOM,\n   * with `._renderItems()`.\n   * Doing so allows the shadow DOM style of `<cds-custom-select>` to control the style of the `<option>` and `<optgroup>`,\n   * notably the disabled ones.\n   */\n  private _handleMutation = () => {\n    this.requestUpdate();\n  };\n\n  /**\n   * @param element The parent element containing pseudo `<optgroup>`/`<option>`.\n   * @returns The template containing child `<optgroup>`/`<option>` that will be rendered to shadow DOM.\n   */\n  private _renderItems(element: CDSSelect | HTMLOptGroupElement) {\n    const { selectorItem, selectorLeafItem } = this\n      .constructor as typeof CDSSelect;\n    // Harvests attributes from `<cds-custom-select-item>` and `<cds-custom-select-item-group>`.\n    // Does not use properties to avoid delay in attribute to property mapping, which runs in custom element reaction cycle:\n    // https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-reactions\n    return html`\n      ${filter(\n        element.childNodes,\n        (item) =>\n          item.nodeType === Node.ELEMENT_NODE &&\n          (item as Element).matches(selectorItem)\n      ).map((item) => {\n        const disabled = item.hasAttribute('disabled');\n        const label = item.getAttribute('label');\n        const selected = item.hasAttribute('selected');\n        const value = item.getAttribute('value');\n        const { textContent } = item;\n        return item.matches(selectorLeafItem)\n          ? html`\n              <option\n                class=\"${prefix}--select-option\"\n                ?disabled=\"${disabled}\"\n                label=\"${ifNonEmpty(label)}\"\n                ?selected=\"${selected}\"\n                value=\"${ifDefined(value)}\">\n                ${textContent}\n              </option>\n            `\n          : html`\n              <optgroup\n                class=\"${prefix}--select-optgroup\"\n                ?disabled=\"${disabled}\"\n                label=\"${ifDefined(label)}\">\n                ${this._renderItems(item)}\n              </optgroup>\n            `;\n      })}\n    `;\n  }\n\n  _handleFormdata(event: FormDataEvent) {\n    const { formData } = event;\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, value);\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleAILabelSlotChange({ 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 CDSSelect).aiLabelItem\n            ) ||\n            // remove reference to slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSSelect).slugItem\n            )\n          : false\n      );\n\n    this._hasAILabel = Boolean(hasContent);\n    this.setAttribute('slug', `${this._hasAILabel}`);\n    (hasContent[0] as HTMLElement).setAttribute('size', 'mini');\n    this.requestUpdate();\n  }\n\n  /**\n   * The count of child `<option>`s.\n   * If the placeholder is in effect, it includes the `<option>` for the placeholder.\n   */\n  get length() {\n    return this._selectNode.length;\n  }\n\n  /**\n   * The child `<option>`s.\n   */\n  get options() {\n    return this._selectNode.options;\n  }\n\n  /**\n   * This form control's type.\n   */\n  get type() {\n    return this._selectNode.type;\n  }\n\n  /**\n   * Sets the select to be focussed automatically on page load. Defaults to false\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * Controls the disabled state of the select\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * Specify whether the label should be hidden, or not\n   */\n  @property({ type: Boolean, attribute: 'hide-label' })\n  hideLabel = false;\n\n  /**\n   * ID to link the `label` and `select`\n   */\n  @property()\n  id = 'select';\n\n  /**\n   * Specify if the currently value is invalid.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * Message which is displayed if the value is invalid.\n   */\n  @property({ attribute: 'invalid-text' })\n  invalidText = '';\n\n  /**\n   * Specify if the currently value is warn.\n   */\n  @property({ type: Boolean, reflect: true })\n  warn = false;\n\n  /**\n   * Message which is displayed if the value is warn.\n   */\n  @property({ attribute: 'warn-text' })\n  warnText = '';\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * Specify if you want to disable the default label styling\n   */\n  @property({ type: Boolean, attribute: 'label-styles-disable' })\n  labelStylesDisable = false;\n\n  /**\n   * Specify whether you want the inline version of this control\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * `true` to enable multiple selection.\n   */\n  @property({ type: Boolean })\n  get multiple() {\n    return false;\n  }\n\n  /**\n   * Name for the select in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * Pattern to validate the select against for HTML validity checking\n   */\n  @property()\n  pattern = '';\n\n  /**\n   * Value to display when the select has an empty `value`\n   */\n  @property({ reflect: true })\n  placeholder = '';\n\n  /**\n   * Controls the readonly state of the select\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Boolean property to set the required status\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The special validity message for `required`.\n   */\n  @property({ attribute: 'required-validity-message' })\n  requiredValidityMessage = 'Please fill out this field.';\n\n  /**\n   * The selected index.\n   */\n  @property({ type: Number })\n  get selectedIndex() {\n    return this._selectNode?.selectedIndex;\n  }\n\n  set selectedIndex(value) {\n    this._selectNode.selectedIndex = value;\n    this.value = this._selectNode.value;\n  }\n\n  /**\n   * The input box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.MEDIUM;\n\n  /**\n   * The value of the text area.\n   */\n  @property({ reflect: true })\n  value = '';\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observerMutation = new MutationObserver(this._handleMutation);\n    this._observerMutation.observe(this, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this._observerMutation) {\n      this._observerMutation.disconnect();\n      this._observerMutation = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('value')) {\n      const { value, _placeholderItemValue: placeholderItemValue } = this;\n      // Ensures setting the `value` after rendering child `<option>`s/`<optgroup>`s when there is a change in `value`,\n      // given reflecting `value` requires child `<option>`s/`<optgroup>`s being there beforehand\n\n      const lastOption =\n        this._selectedOptionNodes?.[this._selectedOptionNodes?.length - 1]?.[\n          'value'\n        ];\n\n      if (value) {\n        this._selectNode.value = value;\n      } else if (lastOption) {\n        this._selectNode.value = lastOption;\n      } else {\n        this._selectNode.value = placeholderItemValue;\n      }\n    }\n\n    const label = this.shadowRoot?.querySelector(\"slot[name='ai-label']\");\n\n    if (label) {\n      if ((label as HTMLSlotElement).assignedNodes()?.length) {\n        this._selectNode?.classList.add(\n          `${prefix}--select-input-has--ai-label`\n        );\n      }\n\n      label?.classList.toggle(\n        `${prefix}--slug--revert`,\n        this.querySelector(`${prefix}-ai-label`)?.hasAttribute('revert-active')\n      );\n    } else {\n      this.shadowRoot\n        ?.querySelector(\"slot[name='slug']\")\n        ?.classList.toggle(\n          `${prefix}--slug--revert`,\n          this.querySelector(`${prefix}-slug`)?.hasAttribute('revert-active')\n        );\n    }\n  }\n\n  render() {\n    const {\n      disabled,\n      helperText,\n      hideLabel,\n      id,\n      inline,\n      invalid,\n      invalidText,\n      labelStylesDisable,\n      labelText,\n      placeholder,\n      readonly,\n      size,\n      warn,\n      warnText,\n      value,\n      _placeholderItemValue: placeholderItemValue,\n      _handleInput: handleInput,\n      _handleAILabelSlotChange: handleAILabelSlotChange,\n    } = this;\n\n    const normalizedProps: {\n      disabled: boolean;\n      invalid: boolean;\n      warn: boolean;\n    } = {\n      disabled: !readonly && disabled,\n      invalid: !readonly && !disabled && invalid,\n      warn: !readonly && !invalid && !disabled && warn,\n    };\n\n    const inputClasses = classMap({\n      [`${prefix}--select-input`]: true,\n      [`${prefix}--select-input--${size}`]: size,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: !labelStylesDisable,\n      [`${prefix}--label--disabled`]: normalizedProps.disabled,\n      [`${prefix}--visually-hidden`]: hideLabel,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,\n    });\n\n    const supplementalText = helperText\n      ? html`\n          <div id=\"helper-text\" class=\"${helperTextClasses}\">\n            <slot name=\"helper-text\"> ${helperText} </slot>\n          </div>\n        `\n      : null;\n\n    const errorText =\n      normalizedProps.invalid || normalizedProps.warn\n        ? html` <div id=\"error-text\" class=\"${prefix}--form-requirement\">\n            ${normalizedProps.invalid ? invalidText : warnText}\n          </div>`\n        : null;\n\n    let describedBy: string | undefined;\n    if (normalizedProps.invalid || normalizedProps.warn) {\n      describedBy = 'error-text';\n    } else if (helperText) {\n      describedBy = 'helper-text';\n    }\n\n    const input = html`\n      <select\n        id=\"${id}\"\n        class=\"${inputClasses}\"\n        ?disabled=\"${disabled}\"\n        title=\"${value}\"\n        aria-readonly=\"${String(readonly)}\"\n        aria-invalid=\"${String(normalizedProps.invalid)}\"\n        aria-describedby=\"${ifDefined(describedBy)}\"\n        @input=\"${handleInput}\">\n        ${!placeholder || value\n          ? undefined\n          : html`\n              <option\n                disabled\n                hidden\n                class=\"${prefix}--select-option\"\n                value=\"${placeholderItemValue}\">\n                ${placeholder}\n              </option>\n            `}\n        ${this._renderItems(this)}\n      </select>\n      ${iconLoader(ChevronDown16, {\n        class: `${prefix}--select__arrow`,\n        'aria-hidden': 'true',\n      })}\n      <slot\n        name=\"ai-label\"\n        style=\"--${prefix}-show-before: ${normalizedProps.warn ||\n        normalizedProps.invalid\n          ? 'block'\n          : 'none'}\"\n        @slotchange=${handleAILabelSlotChange}></slot>\n      <slot name=\"slug\" @slotchange=${handleAILabelSlotChange}></slot>\n      ${!normalizedProps.invalid\n        ? undefined\n        : iconLoader(WarningFilled16, {\n            class: `${prefix}--select__invalid-icon`,\n          })}\n      ${!normalizedProps.invalid && normalizedProps.warn\n        ? iconLoader(WarningAltFilled16, {\n            class: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning`,\n          })\n        : null}\n    `;\n\n    return html`\n      <label class=\"${labelClasses}\" for=${id}>\n        <slot name=\"label-text\">${labelText}</slot>\n      </label>\n\n      ${inline\n        ? html`<div\n            class=\"${prefix}--select-input--inline__wrapper\"\n            ?data-invalid=\"${normalizedProps.invalid}\">\n            <div\n              class=\"${prefix}--select-input__wrapper\"\n              ?data-invalid=\"${normalizedProps.invalid}\">\n              ${input}\n            </div>\n          </div>`\n        : html`<div\n            class=\"${prefix}--select-input__wrapper\"\n            ?data-invalid=\"${normalizedProps.invalid}\">\n            ${input}\n            ${this.isFluid\n              ? html`\n                  <hr class=\"${prefix}--select__divider\" />\n                  ${errorText ? errorText : null}\n                `\n              : null}\n          </div> `}\n      ${!this.isFluid && errorText ? errorText : supplementalText}\n    `;\n  }\n\n  /**\n   * A selector selecting child pseudo `<optgroup>`/`<option>`.\n   */\n  static get selectorItem() {\n    return `${prefix}-select-item-group,${prefix}-select-item`;\n  }\n\n  /**\n   * A selector selecting child pseudo `<option>`.\n   */\n  static get selectorLeafItem() {\n    return `${prefix}-select-item`;\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 item is selected.\n   */\n  static get eventSelect() {\n    return `${prefix}-select-selected`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSSelect;\n"],"mappings":"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"}

package/es-custom/components/select/select.scss.js

@@ -6,10 +6,9 @@
  */
 
 import { css } from "lit";
-
 //#region src/components/select/select.scss?lit
 var select_default = css([".cds-custom--layer-one,:root{--cds-layer:var(--cds-layer-01,#f4f4f4);--cds-layer-active:var(--cds-layer-active-01,#c6c6c6);--cds-layer-background:var(--cds-layer-background-01,#fff);--cds-layer-hover:var(--cds-layer-hover-01,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01,#a8a8a8);--cds-field:var(--cds-field-01,#f4f4f4);--cds-field-hover:var(--cds-field-hover-01,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01,#c6c6c6);--cds-border-strong:var(--cds-border-strong-01,#8d8d8d);--cds-border-tile:var(--cds-border-tile-01,#c6c6c6)}.cds-custom--layer-two{--cds-layer:var(--cds-layer-02,#fff);--cds-layer-active:var(--cds-layer-active-02,#c6c6c6);--cds-layer-background:var(--cds-layer-background-02,#f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02,#a8a8a8);--cds-field:var(--cds-field-02,#fff);--cds-field-hover:var(--cds-field-hover-02,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01,#c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02,#c6c6c6);--cds-border-strong:var(--cds-border-strong-02,#8d8d8d);--cds-border-tile:var(--cds-border-tile-02,#a8a8a8)}.cds-custom--layer-three{--cds-layer:var(--cds-layer-03,#f4f4f4);--cds-layer-active:var(--cds-layer-active-03,#c6c6c6);--cds-layer-background:var(--cds-layer-background-03,#fff);--cds-layer-hover:var(--cds-layer-hover-03,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03,#a8a8a8);--cds-field:var(--cds-field-03,#f4f4f4);--cds-field-hover:var(--cds-field-hover-03,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03,#c6c6c6);--cds-border-strong:var(--cds-border-strong-03,#8d8d8d);--cds-border-tile:var(--cds-border-tile-03,#c6c6c6)}.cds-custom--layer-one.cds-custom--layer__with-background,.cds-custom--layer-three.cds-custom--layer__with-background,.cds-custom--layer-two.cds-custom--layer__with-background{background-color:var(--cds-layer-background)}@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds-custom--fieldset{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds-custom--fieldset *,.cds-custom--fieldset :after,.cds-custom--fieldset :before{box-sizing:inherit}.cds-custom--form-item{align-items:flex-start;display:flex;flex:1 1 auto;flex-direction:column;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.cds-custom--label html{font-size:100%}.cds-custom--label body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds-custom--label code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds-custom--label strong{font-weight:600}.cds-custom--label{color:var(--cds-text-secondary,#525252);display:inline-block;font-weight:var(--cds-label-01-font-weight,400);font-weight:400;line-height:var(--cds-label-01-line-height,1.33333);line-height:1rem;margin-block-end:.5rem;vertical-align:baseline}.cds-custom--label,.cds-custom--label .cds-custom--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds-custom--label .cds-custom--toggletip-label{font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333)}.cds-custom--label--no-margin{margin-block-end:0}.cds-custom--label+.cds-custom--tooltip{inset-block-start:.2rem;inset-inline-start:.5rem;position:relative}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:inherit;font-size:100%;inline-size:100%;margin:0;padding:0;text-align:start;vertical-align:baseline}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger *,.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger :after,.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger :before{box-sizing:inherit}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger::-moz-focus-inner{border:0}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger{align-items:center;display:flex;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);justify-content:center;letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333)}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds-custom--label+.cds-custom--toggletip{inset-block-start:.2rem;inset-inline-start:.5rem}.cds-custom--label.cds-custom--skeleton{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--label.cds-custom--skeleton:active,.cds-custom--label.cds-custom--skeleton:focus,.cds-custom--label.cds-custom--skeleton:hover{border:none;cursor:default;outline:none}.cds-custom--label.cds-custom--skeleton:before{animation:cds-custom--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds-custom--label.cds-custom--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--label.cds-custom--skeleton{background:CanvasText}.cds-custom--label.cds-custom--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds-custom--label.cds-custom--skeleton{block-size:.875rem;inline-size:4.6875rem}input[type=number],input[type=text].cds-custom--number{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif}.cds-custom--combo-box[data-invalid]:not(.cds-custom--multi-select--selected) .cds-custom--text-input:not(:focus),.cds-custom--list-box[data-invalid]:not(.cds-custom--multi-select--invalid--focused,.cds-custom--combo-box--invalid--focused),.cds-custom--number[data-invalid] input[type=number]:not(:focus),.cds-custom--number[data-invalid] input[type=text]:not(:focus),.cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input:not(:focus),.cds-custom--text-area__wrapper[data-invalid]>.cds-custom--text-area--invalid:not(:focus),.cds-custom--text-input__field-wrapper[data-invalid]>.cds-custom--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--combo-box[data-invalid]:not(.cds-custom--multi-select--selected) .cds-custom--text-input:not(:focus),.cds-custom--list-box[data-invalid]:not(.cds-custom--multi-select--invalid--focused,.cds-custom--combo-box--invalid--focused),.cds-custom--number[data-invalid] input[type=number]:not(:focus),.cds-custom--number[data-invalid] input[type=text]:not(:focus),.cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input:not(:focus),.cds-custom--text-area__wrapper[data-invalid]>.cds-custom--text-area--invalid:not(:focus),.cds-custom--text-input__field-wrapper[data-invalid]>.cds-custom--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds-custom--date-picker-input__wrapper--invalid~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper--warn~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper~.cds-custom--form-requirement,.cds-custom--list-box--warning~.cds-custom--form-requirement,.cds-custom--list-box[data-invalid]~.cds-custom--form-requirement,.cds-custom--number[data-invalid] .cds-custom--number__input-wrapper~.cds-custom--form-requirement,.cds-custom--number__input-wrapper--warning~.cds-custom--form-requirement,.cds-custom--select--warning .cds-custom--select-input__wrapper~.cds-custom--form-requirement,.cds-custom--select-input__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-area__wrapper--warn~.cds-custom--form-requirement,.cds-custom--text-area__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper--warning>.cds-custom--text-input~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper--warning~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--time-picker--invalid~.cds-custom--form-requirement,.cds-custom--time-picker--warning~.cds-custom--form-requirement,.cds-custom--time-picker[data-invalid]~.cds-custom--form-requirement,:host(cds-custom-select[warn]) .cds-custom--select-input__wrapper~.cds-custom--form-requirement,input[data-invalid]~.cds-custom--form-requirement{display:block;font-weight:400;max-block-size:12.5rem;overflow:visible}.cds-custom--select--inline.cds-custom--select--warning .cds-custom--select-input--inline__wrapper~.cds-custom--form-requirement,.cds-custom--select-input--inline__wrapper[data-invalid]~.cds-custom--form-requirement,:host(cds-custom-select[inline]):host(cds-custom-select[warn]) .cds-custom--select-input--inline__wrapper~.cds-custom--form-requirement{display:inline-flex;inline-size:100%;margin:0;margin-block-end:0;max-block-size:100%;overflow:visible;padding-inline-start:.5rem}.cds-custom--date-picker-input__wrapper--invalid~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper~.cds-custom--form-requirement,.cds-custom--list-box[data-invalid]~.cds-custom--form-requirement,.cds-custom--number[data-invalid] .cds-custom--number__input-wrapper~.cds-custom--form-requirement,.cds-custom--select-input--inline__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--select-input__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-area__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--time-picker--invalid~.cds-custom--form-requirement,.cds-custom--time-picker[data-invalid]~.cds-custom--form-requirement,input[data-invalid]~.cds-custom--form-requirement{color:var(--cds-text-error,#da1e28)}.cds-custom--form--fluid .cds-custom--text-input__field-wrapper--warning,.cds-custom--form--fluid .cds-custom--text-input__field-wrapper[data-invalid]{display:block}.cds-custom--form--fluid input[data-invalid]{outline:none}.cds-custom--form--fluid .cds-custom--form-requirement{margin:0;padding:.5rem 2.5rem .5rem 1rem}input:not(output,[data-invalid]):-moz-ui-invalid{box-shadow:none}.cds-custom--form-requirement html{font-size:100%}.cds-custom--form-requirement body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds-custom--form-requirement code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds-custom--form-requirement strong{font-weight:600}.cds-custom--form-requirement{display:none;font-size:var(--cds-helper-text-01-font-size,.75rem);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);line-height:var(--cds-helper-text-01-line-height,1.33333);margin:.25rem 0 0;max-block-size:0;overflow:hidden}.cds-custom--select--inline .cds-custom--form__helper-text,:host(cds-custom-select[inline]) .cds-custom--form__helper-text{margin-block-start:0}.cds-custom--form__helper-text{color:var(--cds-text-helper,#6f6f6f);font-size:var(--cds-helper-text-01-font-size,.75rem);inline-size:100%;letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);line-height:var(--cds-helper-text-01-line-height,1.33333);margin-block-start:.25rem;opacity:1;z-index:0}.cds-custom--form__helper-text--disabled,.cds-custom--label--disabled,fieldset[disabled] .cds-custom--form__helper-text,fieldset[disabled] .cds-custom--label{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds-custom--select,:host(cds-custom-select){border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds-custom--select *,.cds-custom--select :after,.cds-custom--select :before,:host(cds-custom-select) *,:host(cds-custom-select) :after,:host(cds-custom-select) :before{box-sizing:inherit}.cds-custom--select,:host(cds-custom-select){align-items:flex-start;display:flex;flex-direction:column;inline-size:100%;position:relative}.cds-custom--select-input__wrapper{align-items:center;display:flex;inline-size:100%;position:relative}.cds-custom--select-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--cds-field);block-size:2.5rem;border:none;border-block-end:1px solid var(--cds-border-strong);border-radius:0;color:var(--cds-text-primary,#161616);cursor:pointer;display:block;font-family:inherit;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);inline-size:100%;letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572);opacity:1;outline:2px solid transparent;outline-offset:-2px;padding-block:0;padding-inline:1rem 3rem;text-overflow:ellipsis;transition:outline 70ms cubic-bezier(.2,0,.38,.9)}.cds-custom--select-input:hover{background-color:var(--cds-field-hover)}.cds-custom--select-input::-ms-expand{display:none}@-moz-document url-prefix(){.cds-custom--select-input:-moz-focusring,.cds-custom--select-input::-moz-focus-inner{background-image:none;color:transparent;text-shadow:0 0 0 #000}}.cds-custom--select-input:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--select-input:focus{outline-style:dotted}}.cds-custom--select-input:focus{color:var(--cds-text-primary,#161616)}.cds-custom--select-input:disabled,.cds-custom--select-input:hover:disabled{background-color:var(--cds-field);border-block-end-color:transparent;color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed}.cds-custom--select-input--sm{block-size:2rem;max-block-size:2rem}.cds-custom--select-input--lg{block-size:3rem;max-block-size:3rem}.cds-custom--select--disabled .cds-custom--form__helper-text,.cds-custom--select--disabled .cds-custom--label,:host(cds-custom-select[disabled]) .cds-custom--form__helper-text,:host(cds-custom-select[disabled]) .cds-custom--label{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds-custom--select--warning .cds-custom--select-input,.cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input,:host(cds-custom-select[warn]) .cds-custom--select-input{padding-inline-end:4rem}.cds-custom--select-input:disabled~.cds-custom--select__arrow{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds-custom--select--light .cds-custom--select-input{background-color:var(--cds-field-02,#fff)}.cds-custom--select--light .cds-custom--select-input:hover{background-color:var(--cds-field-hover)}.cds-custom--select--light .cds-custom--select-input:disabled,.cds-custom--select--light .cds-custom--select-input:hover:disabled{background-color:var(--cds-field-02,#fff);color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed}.cds-custom--select__arrow{block-size:100%;position:absolute;fill:var(--cds-icon-primary,#161616);inset-block-start:0;inset-inline-end:1rem;pointer-events:none}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds-custom--select__arrow path{fill:ButtonText}}.cds-custom--select__invalid-icon{inset-inline-end:2.5rem;position:absolute}.cds-custom--select-input--inline__wrapper[data-invalid] .cds-custom--select__invalid-icon,.cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input~.cds-custom--select__invalid-icon{fill:var(--cds-support-error,#da1e28)}.cds-custom--select__invalid-icon--warning{fill:var(--cds-support-warning,#f1c21b)}.cds-custom--select__invalid-icon--warning path[fill]{fill:#000;opacity:1}.cds-custom--select-option,optgroup.cds-custom--select-optgroup{background-color:var(--cds-layer-hover);color:var(--cds-text-primary,#161616)}.cds-custom--select-option:disabled,optgroup.cds-custom--select-optgroup:disabled{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds-custom--select--inline,:host(cds-custom-select[inline]){align-items:center;display:flex;flex-direction:row}.cds-custom--select--inline .cds-custom--form__helper-text,:host(cds-custom-select[inline]) .cds-custom--form__helper-text{margin-block-end:0;margin-inline-start:.5rem}.cds-custom--select--inline .cds-custom--label,:host(cds-custom-select[inline]) .cds-custom--label{margin:0 .5rem 0 0;white-space:nowrap}.cds-custom--select--inline .cds-custom--select-input,:host(cds-custom-select[inline]) .cds-custom--select-input{background-color:transparent;border-block-end:none;color:var(--cds-text-primary,#161616);inline-size:100%;padding-inline:.5rem 3rem}.cds-custom--select--inline .cds-custom--select-input:hover,:host(cds-custom-select[inline]) .cds-custom--select-input:hover{background-color:var(--cds-field-hover)}.cds-custom--select--inline .cds-custom--select-input:focus,.cds-custom--select--inline .cds-custom--select-input:focus optgroup,.cds-custom--select--inline .cds-custom--select-input:focus option,:host(cds-custom-select[inline]) .cds-custom--select-input:focus,:host(cds-custom-select[inline]) .cds-custom--select-input:focus optgroup,:host(cds-custom-select[inline]) .cds-custom--select-input:focus option{background-color:var(--cds-background,#fff)}.cds-custom--select--inline .cds-custom--select-input:focus optgroup:hover,.cds-custom--select--inline .cds-custom--select-input:focus option:hover,.cds-custom--select--inline .cds-custom--select-input:focus:hover,:host(cds-custom-select[inline]) .cds-custom--select-input:focus optgroup:hover,:host(cds-custom-select[inline]) .cds-custom--select-input:focus option:hover,:host(cds-custom-select[inline]) .cds-custom--select-input:focus:hover{background-color:var(--cds-field-hover)}.cds-custom--select--inline .cds-custom--select-input[disabled],.cds-custom--select--inline .cds-custom--select-input[disabled]:hover,:host(cds-custom-select[inline]) .cds-custom--select-input[disabled]{background-color:var(--cds-background,#fff)}.cds-custom--select--inline .cds-custom--select__arrow,:host(cds-custom-select[inline]) .cds-custom--select__arrow{inset-inline-end:.5rem}.cds-custom--select--inline.cds-custom--select--invalid .cds-custom--select-input,:host(cds-custom-select[inline]):host(cds-custom-select[invalid]) .cds-custom--select-input{padding-inline-end:3.5rem}.cds-custom--select--inline.cds-custom--select--invalid .cds-custom--select-input~.cds-custom--select__invalid-icon,.cds-custom--select--inline.cds-custom--select--warning .cds-custom--select-input~.cds-custom--select__invalid-icon--warning,:host(cds-custom-select[inline]):host(cds-custom-select[invalid]) .cds-custom--select-input~.cds-custom--select__invalid-icon,:host(cds-custom-select[inline]):host(cds-custom-select[warn]) .cds-custom--select-input~.cds-custom--select__invalid-icon--warning{inset-inline-end:2rem}.cds-custom--select--inline .cds-custom--select-input:disabled,:host(cds-custom-select[inline]) .cds-custom--select-input:disabled{color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed}.cds-custom--select--inline .cds-custom--select-input:disabled~*,:host(cds-custom-select[inline]) .cds-custom--select-input:disabled~*{cursor:not-allowed}.cds-custom--select--readonly .cds-custom--select-input{background-color:transparent;border-block-end-color:var(--cds-border-subtle);cursor:default}.cds-custom--select--readonly .cds-custom--select__arrow{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds-custom--select--readonly.cds-custom--select--inline .cds-custom--select-input:hover{background-color:transparent}.cds-custom--select.cds-custom--skeleton{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds-custom--select.cds-custom--skeleton:active,.cds-custom--select.cds-custom--skeleton:focus,.cds-custom--select.cds-custom--skeleton:hover{border:none;cursor:default;outline:none}.cds-custom--select.cds-custom--skeleton:before{animation:cds-custom--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds-custom--select.cds-custom--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--select.cds-custom--skeleton{background:CanvasText}.cds-custom--select.cds-custom--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds-custom--select.cds-custom--skeleton{block-size:2.5rem;inline-size:100%}.cds-custom--select.cds-custom--skeleton .cds-custom--select-input{display:none}.cds-custom--select--decorator .cds-custom--select__inner-wrapper--decorator>*,.cds-custom--select--slug .cds-custom--ai-label,.cds-custom--select--slug .cds-custom--slug,:host(cds-custom-select[slug]) .cds-custom--ai-label,:host(cds-custom-select[slug]) .cds-custom--slug{inset-block-start:50%;inset-inline-end:calc(2.5rem + 9px);margin-block-start:.03125rem;position:absolute;transform:translateY(-50%)}.cds-custom--select--decorator .cds-custom--select__inner-wrapper--decorator>:after,.cds-custom--select--decorator .cds-custom--select__inner-wrapper--decorator>:before,.cds-custom--select--slug .cds-custom--ai-label:after,.cds-custom--select--slug .cds-custom--ai-label:before,.cds-custom--select--slug .cds-custom--slug:after,.cds-custom--select--slug .cds-custom--slug:before,:host(cds-custom-select[slug]) .cds-custom--ai-label:after,:host(cds-custom-select[slug]) .cds-custom--ai-label:before,:host(cds-custom-select[slug]) .cds-custom--slug:after,:host(cds-custom-select[slug]) .cds-custom--slug:before{background-color:var(--cds-border-subtle-01,#c6c6c6);block-size:1rem;content:\"\";inline-size:.0625rem;position:absolute}.cds-custom--select--decorator .cds-custom--select__inner-wrapper--decorator>:before,.cds-custom--select--slug .cds-custom--ai-label:before,.cds-custom--select--slug .cds-custom--slug:before,:host(cds-custom-select[slug]) .cds-custom--ai-label:before,:host(cds-custom-select[slug]) .cds-custom--slug:before{display:none;inset-inline-start:calc(-.5rem - 1px)}.cds-custom--select--decorator .cds-custom--select__inner-wrapper--decorator>:after,.cds-custom--select--slug .cds-custom--ai-label:after,.cds-custom--select--slug .cds-custom--slug:after,:host(cds-custom-select[slug]) .cds-custom--ai-label:after,:host(cds-custom-select[slug]) .cds-custom--slug:after{display:block;inset-block-start:0;inset-inline-end:calc(-.5rem - 1px)}.cds-custom--select--decorator .cds-custom--select__inner-wrapper--decorator>.cds-custom--ai-label--revert:before,.cds-custom--select--slug .cds-custom--ai-label--revert:before,.cds-custom--select--slug .cds-custom--slug--revert:before,:host(cds-custom-select[slug]) .cds-custom--ai-label--revert:before,:host(cds-custom-select[slug]) .cds-custom--slug--revert:before{inset-block-start:.5rem;inset-inline-start:0}.cds-custom--select--decorator .cds-custom--select__inner-wrapper--decorator>.cds-custom--ai-label--revert,.cds-custom--select--slug .cds-custom--ai-label--revert,:host(cds-custom-select[slug]) .cds-custom--ai-label--revert{inset-inline-end:2.5625rem}.cds-custom--select--decorator .cds-custom--ai-label--revert:after,.cds-custom--select--slug .cds-custom--ai-label--revert:after,.cds-custom--select--slug .cds-custom--slug--revert:after,:host(cds-custom-select[slug]) .cds-custom--ai-label--revert:after,:host(cds-custom-select[slug]) .cds-custom--slug--revert:after{inset-block-start:.5rem;inset-inline-end:-1px}.cds-custom--select--decorator .cds-custom--select-input:has(~.cds-custom--select__inner-wrapper--decorator),.cds-custom--select--slug .cds-custom--select-input:has(~.cds-custom--ai-label),.cds-custom--select--slug .cds-custom--select-input:has(~.cds-custom--slug),:host(cds-custom-select[slug]) .cds-custom--select-input:has(~.cds-custom--ai-label),:host(cds-custom-select[slug]) .cds-custom--select-input:has(~.cds-custom--slug){padding-inline-end:4rem}.cds-custom--select--decorator:has(.cds-custom--select__invalid-icon) .cds-custom--select-input:has(~.cds-custom--select__inner-wrapper--decorator),.cds-custom--select--slug:has(.cds-custom--select__invalid-icon) .cds-custom--select-input:has(~.cds-custom--ai-label),.cds-custom--select--slug:has(.cds-custom--select__invalid-icon) .cds-custom--select-input:has(~.cds-custom--slug),:has(.cds-custom--select__invalid-icon):host(cds-custom-select[slug]) .cds-custom--select-input:has(~.cds-custom--ai-label),:has(.cds-custom--select__invalid-icon):host(cds-custom-select[slug]) .cds-custom--select-input:has(~.cds-custom--slug){padding-inline-end:6rem}.cds-custom--select--decorator .cds-custom--select-input:has(~.cds-custom--select__inner-wrapper--decorator .cds-custom--ai-label):not(:has(~.cds-custom--select__inner-wrapper--decorator .cds-custom--ai-label--revert)),.cds-custom--select--slug .cds-custom--select-input:has(~.cds-custom--ai-label):not(:has(~.cds-custom--ai-label--revert)),.cds-custom--select--slug .cds-custom--select-input:has(~.cds-custom--slug):not(:has(~.cds-custom--slug--revert)),.cds-custom--select-input-has--ai-label,:host(cds-custom-select[slug]) .cds-custom--select-input:has(~.cds-custom--ai-label):not(:has(~.cds-custom--ai-label--revert)),:host(cds-custom-select[slug]) .cds-custom--select-input:has(~.cds-custom--slug):not(:has(~.cds-custom--slug--revert)){background-image:linear-gradient(0deg,var(--cds-ai-aura-start-sm,rgba(69,137,255,.16)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%,transparent 100%);border-block-end-color:var(--cds-ai-border-strong,#4589ff)}.cds-custom--select--decorator:has(.cds-custom--select__invalid-icon) .cds-custom--select__inner-wrapper--decorator>:before,.cds-custom--select--slug:has(.cds-custom--select__invalid-icon) .cds-custom--ai-label:before,.cds-custom--select--slug:has(.cds-custom--select__invalid-icon) .cds-custom--slug:before,:has(.cds-custom--select__invalid-icon):host(cds-custom-select[slug]) .cds-custom--ai-label:before,:has(.cds-custom--select__invalid-icon):host(cds-custom-select[slug]) .cds-custom--slug:before{display:block}.cds-custom--select--decorator .cds-custom--select-input__wrapper .cds-custom--select-input~.cds-custom--select__invalid-icon,.cds-custom--select--slug .cds-custom--select-input__wrapper .cds-custom--select-input~.cds-custom--select__invalid-icon,.cds-custom--select--slug .cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input~.cds-custom--select__invalid-icon,:host(cds-custom-select[slug]) .cds-custom--select-input__wrapper .cds-custom--select-input~.cds-custom--select__invalid-icon{inset-inline-end:5rem}.cds-custom--select--fluid .cds-custom--select,.cds-custom--select--fluid :host(cds-custom-select){background:var(--cds-field);block-size:100%;position:relative;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds-custom--select--fluid .cds-custom--label{align-items:center;block-size:1rem;display:flex;inline-size:calc(100% - 2rem);inset-block-start:.8125rem;inset-inline-start:1rem;margin:0;position:absolute;z-index:1}.cds-custom--select--fluid .cds-custom--label .cds-custom--toggletip-label::-webkit-scrollbar,.cds-custom--select--fluid .cds-custom--label::-webkit-scrollbar{display:none}.cds-custom--select--fluid .cds-custom--label .cds-custom--toggletip-label,.cds-custom--select--fluid .cds-custom--label:not(:has(.cds-custom--toggletip-label)){-ms-overflow-style:none;overflow-x:scroll;scrollbar-width:none;white-space:nowrap}.cds-custom--select--fluid .cds-custom--select-input{min-block-size:4rem;outline:none;padding:2rem 2rem .8125rem 1rem;text-overflow:ellipsis}.cds-custom--select--fluid .cds-custom--select__arrow{block-size:1rem;inset-block-start:2.125rem;inset-inline-end:.75rem}.cds-custom--select--fluid .cds-custom--select__divider{display:none;transition:border-color 70ms cubic-bezier(.2,0,.38,.9)}.cds-custom--select--fluid .cds-custom--select--invalid .cds-custom--select-input__wrapper,.cds-custom--select--fluid :host(cds-custom-select[invalid]) .cds-custom--select-input__wrapper{outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--select--fluid .cds-custom--select--invalid .cds-custom--select-input__wrapper,.cds-custom--select--fluid :host(cds-custom-select[invalid]) .cds-custom--select-input__wrapper{outline-style:dotted}}.cds-custom--select--fluid .cds-custom--select--invalid .cds-custom--select__divider,.cds-custom--select--fluid .cds-custom--select--warning .cds-custom--select__divider,.cds-custom--select--fluid :host(cds-custom-select[invalid]) .cds-custom--select__divider,.cds-custom--select--fluid :host(cds-custom-select[warn]) .cds-custom--select__divider{border:none;border-block-end:1px solid var(--cds-border-subtle);display:block;inline-size:calc(100% - 2rem);margin:0 1rem}.cds-custom--select--fluid .cds-custom--select--warning .cds-custom--select-input,.cds-custom--select--fluid .cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input,.cds-custom--select--fluid :host(cds-custom-select[warn]) .cds-custom--select-input{border-block-end:1px solid transparent;padding-inline-end:2rem}.cds-custom--select--fluid .cds-custom--select--warning,.cds-custom--select--fluid :host(cds-custom-select[warn]){border-block-end:1px solid var(--cds-border-strong)}.cds-custom--select--fluid .cds-custom--select-input__wrapper{display:block}.cds-custom--select--fluid .cds-custom--select--warning .cds-custom--select-input:not(:focus),.cds-custom--select--fluid .cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input:not(:focus),.cds-custom--select--fluid :host(cds-custom-select[warn]) .cds-custom--select-input:not(:focus){outline:none}.cds-custom--select--fluid .cds-custom--select--warning .cds-custom--form-requirement,.cds-custom--select--fluid .cds-custom--select-input__wrapper[data-invalid] .cds-custom--form-requirement,.cds-custom--select--fluid :host(cds-custom-select[warn]) .cds-custom--form-requirement{display:block;max-block-size:100%;overflow:visible}.cds-custom--select--fluid .cds-custom--select-input__wrapper[data-invalid] .cds-custom--form-requirement{color:var(--cds-text-error,#da1e28)}.cds-custom--select--fluid .cds-custom--form-requirement{margin:0;padding:.5rem 2.5rem .5rem 1rem}.cds-custom--select--fluid .cds-custom--select--warning .cds-custom--select-input__wrapper:hover+.cds-custom--select__divider,.cds-custom--select--fluid .cds-custom--select-input__wrapper[data-invalid]:hover+.cds-custom--select__divider,.cds-custom--select--fluid :host(cds-custom-select[warn]) .cds-custom--select-input__wrapper:hover+.cds-custom--select__divider{border-color:transparent}.cds-custom--select--fluid .cds-custom--select--invalid .cds-custom--select-input__wrapper[data-invalid] .cds-custom--select__invalid-icon,.cds-custom--select--fluid .cds-custom--select--warning .cds-custom--select-input__wrapper .cds-custom--select__invalid-icon,.cds-custom--select--fluid :host(cds-custom-select[invalid]) .cds-custom--select-input__wrapper[data-invalid] .cds-custom--select__invalid-icon,.cds-custom--select--fluid :host(cds-custom-select[warn]) .cds-custom--select-input__wrapper .cds-custom--select__invalid-icon{inset-block-start:4.5625rem;inset-inline-end:1rem;pointer-events:none}.cds-custom--select--fluid .cds-custom--select--fluid--focus .cds-custom--select-input__wrapper{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--select--fluid .cds-custom--select--fluid--focus .cds-custom--select-input__wrapper{outline-style:dotted}}.cds-custom--select--fluid .cds-custom--select--fluid--focus .cds-custom--select-input,.cds-custom--select--fluid .cds-custom--select--fluid--focus.cds-custom--select--warning{border-block-end:1px solid transparent}.cds-custom--select--fluid .cds-custom--select--disabled .cds-custom--toggletip-label,.cds-custom--select--fluid :host(cds-custom-select[disabled]) .cds-custom--toggletip-label{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds-custom--select--fluid .cds-custom--select--disabled .cds-custom--toggletip-button,.cds-custom--select--fluid :host(cds-custom-select[disabled]) .cds-custom--toggletip-button{pointer-events:none}.cds-custom--select--fluid .cds-custom--select--disabled .cds-custom--toggletip-button svg,.cds-custom--select--fluid :host(cds-custom-select[disabled]) .cds-custom--toggletip-button svg{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds-custom--select--fluid .cds-custom--select--decorator .cds-custom--select__inner-wrapper--decorator>*,.cds-custom--select--fluid .cds-custom--select--slug .cds-custom--ai-label,.cds-custom--select--fluid .cds-custom--select--slug .cds-custom--slug,.cds-custom--select--fluid :host(cds-custom-select[slug]) .cds-custom--ai-label,.cds-custom--select--fluid :host(cds-custom-select[slug]) .cds-custom--slug{inset-block-start:2.625rem;inset-inline-end:3rem}.cds-custom--select--fluid .cds-custom--select--slug .cds-custom--select-input,.cds-custom--select--fluid :host(cds-custom-select[slug]) .cds-custom--select-input{padding-inline-end:4rem}.cds-custom--select--fluid .cds-custom--select--decorator .cds-custom--select__inner-wrapper--decorator>.cds-custom--ai-label:before,.cds-custom--select--fluid .cds-custom--select--slug:has(.cds-custom--select__invalid-icon) .cds-custom--ai-label:before,.cds-custom--select--fluid .cds-custom--select--slug:has(.cds-custom--select__invalid-icon) .cds-custom--slug:before,.cds-custom--select--fluid :has(.cds-custom--select__invalid-icon):host(cds-custom-select[slug]) .cds-custom--ai-label:before,.cds-custom--select--fluid :has(.cds-custom--select__invalid-icon):host(cds-custom-select[slug]) .cds-custom--slug:before{display:none}.cds-custom--select--fluid__skeleton{background:var(--cds-skeleton-background,#e8e8e8);block-size:4rem;border-block-end:1px solid var(--cds-skeleton-element,#c6c6c6);position:relative}.cds-custom--select--fluid__skeleton .cds-custom--skeleton{block-size:.5rem;inline-size:25%;inset-block-start:1rem;inset-inline-start:1rem;position:absolute}.cds-custom--select--fluid__skeleton .cds-custom--label{block-size:.5rem;inline-size:50%;inset-block-start:2.25rem;inset-inline-start:1rem;padding:0;position:absolute}.cds-custom--assistive-text,.cds-custom--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}:host(cds-custom-select){outline:none}:host(cds-custom-select) ::slotted(cds-custom-ai-label),:host(cds-custom-select) ::slotted(cds-custom-slug){inset-block-start:50%;inset-inline-end:3rem;position:absolute}:host(cds-custom-select) ::slotted(cds-custom-ai-label:not([revert-active])),:host(cds-custom-select) ::slotted(cds-custom-slug:not([revert-active])){transform:translateY(-50%)}:host(cds-custom-select) ::slotted(cds-custom-ai-label):after,:host(cds-custom-select) ::slotted(cds-custom-ai-label):before{background-color:var(--cds-border-subtle-01,#c6c6c6);block-size:1rem;content:\"\";inline-size:.0625rem;inset-inline-start:calc(1.5rem - 1px);position:absolute}:host(cds-custom-select) ::slotted(cds-custom-ai-label):before{display:var(--cds-show-before);inset-inline-start:calc(-.5rem - 1px)}:host(cds-custom-select[readonly]) select{pointer-events:none}:host(cds-custom-select[pagination]) .cds-custom--label{margin:0}:host(cds-custom-select[pagination]) .cds-custom--select-input{padding:0 2.25rem 0 1rem}:host(cds-custom-select[pagination]) .cds-custom--select-input:focus{background-color:transparent}:host(cds-custom-select[pagination]) .cds-custom--select__arrow{inset-block-start:50%;transform:translate(-.5rem,-50%)}:host(cds-custom-select[pagination][left-select]) .cds-custom--select-input{border-inline-end:1px solid var(--cds-border-subtle)}:host(cds-custom-select[invalid]) ::slotted(cds-custom-ai-label),:host(cds-custom-select[invalid]) ::slotted(cds-custom-slug),:host(cds-custom-select[warn]) ::slotted(cds-custom-ai-label),:host(cds-custom-select[warn]) ::slotted(cds-custom-slug){inset-inline-end:3rem}"]);
-
 //#endregion
 export { select_default as default };
+
 //# sourceMappingURL=select.scss.js.map

package/es-custom/components/shape-indicator/defs.js

@@ -62,7 +62,7 @@ let SHAPE_INDICATOR_KIND = /* @__PURE__ */ function(SHAPE_INDICATOR_KIND) {
 	SHAPE_INDICATOR_KIND["DRAFT"] = "draft";
 	return SHAPE_INDICATOR_KIND;
 }({});
-
 //#endregion
 export { SHAPE_INDICATOR_KIND };
+
 //# sourceMappingURL=defs.js.map

package/es-custom/components/shape-indicator/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/shape-indicator/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025\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\n/**\n * Shape indicator kinds.\n */\nexport enum SHAPE_INDICATOR_KIND {\n  /**\n   * Failed status\n   */\n  FAILED = 'failed',\n  /**\n   * Critical status\n   */\n  CRITICAL = 'critical',\n  /**\n   * High severity\n   */\n  HIGH = 'high',\n  /**\n   * Medium severity\n   */\n  MEDIUM = 'medium',\n  /**\n   * Low severity\n   */\n  LOW = 'low',\n  /**\n   * Cautious status\n   */\n  CAUTIOUS = 'cautious',\n  /**\n   * Undefined status\n   */\n  UNDEFINED = 'undefined',\n  /**\n   * Stable status\n   */\n  STABLE = 'stable',\n  /**\n   * Informative status\n   */\n  INFORMATIVE = 'informative',\n  /**\n   * Incomplete status\n   */\n  INCOMPLETE = 'incomplete',\n  /**\n   * Draft status\n   */\n  DRAFT = 'draft',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,sEAAL;;;;AAIL;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/shape-indicator/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025\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\n/**\n * Shape indicator kinds.\n */\nexport enum SHAPE_INDICATOR_KIND {\n  /**\n   * Failed status\n   */\n  FAILED = 'failed',\n  /**\n   * Critical status\n   */\n  CRITICAL = 'critical',\n  /**\n   * High severity\n   */\n  HIGH = 'high',\n  /**\n   * Medium severity\n   */\n  MEDIUM = 'medium',\n  /**\n   * Low severity\n   */\n  LOW = 'low',\n  /**\n   * Cautious status\n   */\n  CAUTIOUS = 'cautious',\n  /**\n   * Undefined status\n   */\n  UNDEFINED = 'undefined',\n  /**\n   * Stable status\n   */\n  STABLE = 'stable',\n  /**\n   * Informative status\n   */\n  INFORMATIVE = 'informative',\n  /**\n   * Incomplete status\n   */\n  INCOMPLETE = 'incomplete',\n  /**\n   * Draft status\n   */\n  DRAFT = 'draft',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,uBAAL,yBAAA,sBAAA;;;;AAIL,sBAAA,YAAA;;;;AAIA,sBAAA,cAAA;;;;AAIA,sBAAA,UAAA;;;;AAIA,sBAAA,YAAA;;;;AAIA,sBAAA,SAAA;;;;AAIA,sBAAA,cAAA;;;;AAIA,sBAAA,eAAA;;;;AAIA,sBAAA,YAAA;;;;AAIA,sBAAA,iBAAA;;;;AAIA,sBAAA,gBAAA;;;;AAIA,sBAAA,WAAA;;KACD"}

package/es-custom/components/shape-indicator/shape-indicator.js

@@ -5,12 +5,12 @@
  * 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 shape_indicator_default$1 from "./shape-indicator.scss.js";
-import { SHAPE_INDICATOR_KIND } from "./defs.js";
+import "./defs.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import Critical from "@carbon/icons/es/critical/index.js";
@@ -20,7 +20,6 @@ import LowSeverity from "@carbon/icons/es/low-severity/index.js";
 import Caution from "@carbon/icons/es/caution/index.js";
 import CircleFill from "@carbon/icons/es/circle-fill/index.js";
 import CircleStroke from "@carbon/icons/es/circle-stroke/index.js";
-
 //#region src/components/shape-indicator/shape-indicator.ts
 /**
 * Copyright IBM Corp. 2025, 2025
@@ -50,17 +49,17 @@ const IncompleteIcon = `<svg
 * Map of shape indicators to their corresponding icons
 */
 const shapeMap = {
-	[SHAPE_INDICATOR_KIND.FAILED]: Critical,
-	[SHAPE_INDICATOR_KIND.CRITICAL]: CriticalSeverity,
-	[SHAPE_INDICATOR_KIND.HIGH]: Caution,
-	[SHAPE_INDICATOR_KIND.MEDIUM]: DiamondFill,
-	[SHAPE_INDICATOR_KIND.LOW]: LowSeverity,
-	[SHAPE_INDICATOR_KIND.CAUTIOUS]: Caution,
-	[SHAPE_INDICATOR_KIND.UNDEFINED]: DiamondFill,
-	[SHAPE_INDICATOR_KIND.STABLE]: CircleFill,
-	[SHAPE_INDICATOR_KIND.INFORMATIVE]: LowSeverity,
-	[SHAPE_INDICATOR_KIND.INCOMPLETE]: IncompleteIcon,
-	[SHAPE_INDICATOR_KIND.DRAFT]: CircleStroke
+	["failed"]: Critical,
+	["critical"]: CriticalSeverity,
+	["high"]: Caution,
+	["medium"]: DiamondFill,
+	["low"]: LowSeverity,
+	["cautious"]: Caution,
+	["undefined"]: DiamondFill,
+	["stable"]: CircleFill,
+	["informative"]: LowSeverity,
+	["incomplete"]: IncompleteIcon,
+	["draft"]: CircleStroke
 };
 /**
 * Shape Indicator.
@@ -84,9 +83,9 @@ let CDSShapeIndicator = class CDSShapeIndicator extends LitElement {
 __decorate([property({ attribute: "text-size" })], CDSShapeIndicator.prototype, "textSize", void 0);
 __decorate([property()], CDSShapeIndicator.prototype, "label", void 0);
 __decorate([property()], CDSShapeIndicator.prototype, "kind", void 0);
-CDSShapeIndicator = __decorate([carbonElement(`${prefix}-shape-indicator`)], CDSShapeIndicator);
+CDSShapeIndicator = __decorate([carbonElement(`cds-custom-shape-indicator`)], CDSShapeIndicator);
 var shape_indicator_default = CDSShapeIndicator;
-
 //#endregion
 export { shape_indicator_default as default };
+
 //# sourceMappingURL=shape-indicator.js.map

package/es-custom/components/shape-indicator/shape-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"shape-indicator.js","names":["styles","customElement"],"sources":["../../../src/components/shape-indicator/shape-indicator.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2025\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 { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport styles from './shape-indicator.scss?lit';\n\n// Import Carbon icons\nimport Critical from '@carbon/icons/es/critical/index.js';\nimport CriticalSeverity from '@carbon/icons/es/critical-severity/index.js';\nimport DiamondFill from '@carbon/icons/es/diamond-fill/index.js';\nimport LowSeverity from '@carbon/icons/es/low-severity/index.js';\nimport Caution from '@carbon/icons/es/caution/index.js';\nimport CircleFill from '@carbon/icons/es/circle-fill/index.js';\nimport CircleStroke from '@carbon/icons/es/circle-stroke/index.js';\nimport { SHAPE_INDICATOR_KIND } from './defs';\n\n/**\n * Custom incomplete icon implementation\n */\nconst IncompleteIcon = `<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"16\"\n  height=\"16\"\n  fill=\"none\"\n  aria-hidden=\"true\">\n  <path\n    fill=\"#fff\"\n    fillOpacity=\"0.01\"\n    d=\"M0 0h16v16H0z\"\n    style=\"mix-blend-mode: multiply;\" />\n  <path\n    fill=\"#161616\"\n    d=\"M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 2a4.004 4.004 0 0 1 4 4H4a4.004 4.004 0 0 1 4-4Z\" />\n</svg>`;\n\n/**\n * Map of shape indicators to their corresponding icons\n */\nconst shapeMap = {\n  [SHAPE_INDICATOR_KIND.FAILED]: Critical,\n  [SHAPE_INDICATOR_KIND.CRITICAL]: CriticalSeverity,\n  [SHAPE_INDICATOR_KIND.HIGH]: Caution,\n  [SHAPE_INDICATOR_KIND.MEDIUM]: DiamondFill,\n  [SHAPE_INDICATOR_KIND.LOW]: LowSeverity,\n  [SHAPE_INDICATOR_KIND.CAUTIOUS]: Caution,\n  [SHAPE_INDICATOR_KIND.UNDEFINED]: DiamondFill,\n  [SHAPE_INDICATOR_KIND.STABLE]: CircleFill,\n  [SHAPE_INDICATOR_KIND.INFORMATIVE]: LowSeverity,\n  [SHAPE_INDICATOR_KIND.INCOMPLETE]: IncompleteIcon,\n  [SHAPE_INDICATOR_KIND.DRAFT]: CircleStroke,\n};\n\n/**\n * Shape Indicator.\n * @element cds-custom-shape-indicator\n */\n@customElement(`${prefix}-shape-indicator`)\nclass CDSShapeIndicator extends LitElement {\n  /**\n   * Shape indicator size (12 or 14)\n   */\n  @property({ attribute: 'text-size' })\n  textSize = 12;\n\n  /**\n   * Label next to the shape.\n   */\n  @property()\n  label!: string;\n\n  /**\n   * Shape Indicator kind\n   */\n  @property()\n  kind!: SHAPE_INDICATOR_KIND;\n\n  render() {\n    const shape = shapeMap[this.kind];\n\n    if (!shape) {\n      return null;\n    }\n\n    // Handle custom SVG string vs Carbon icon descriptor\n    if (typeof shape === 'string') {\n      return html` ${iconLoader(null, {}, shape)} ${this.label} `;\n    }\n\n    return html` ${iconLoader(shape)} ${this.label} `;\n  }\n\n  /**\n   * Styles are imported from the SCSS file\n   */\n  static styles = styles;\n}\n\nexport default CDSShapeIndicator;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;AAmBvB,MAAM,WAAW;EACd,qBAAqB,SAAS;EAC9B,qBAAqB,WAAW;EAChC,qBAAqB,OAAO;EAC5B,qBAAqB,SAAS;EAC9B,qBAAqB,MAAM;EAC3B,qBAAqB,WAAW;EAChC,qBAAqB,YAAY;EACjC,qBAAqB,SAAS;EAC9B,qBAAqB,cAAc;EACnC,qBAAqB,aAAa;EAClC,qBAAqB,QAAQ;CAC/B;;;;;AAMD,8BACM,0BAA0B,WAAW;;;kBAK9B;;CAcX,SAAS;EACP,MAAM,QAAQ,SAAS,KAAK;AAE5B,MAAI,CAAC,MACH,QAAO;AAIT,MAAI,OAAO,UAAU,SACnB,QAAO,IAAI,IAAI,WAAW,MAAM,EAAE,EAAE,MAAM,CAAC,GAAG,KAAK,MAAM;AAG3D,SAAO,IAAI,IAAI,WAAW,MAAM,CAAC,GAAG,KAAK,MAAM;;;gBAMjCA;;;YAjCf,SAAS,EAAE,WAAW,aAAa,CAAC;YAMpC,UAAU;YAMV,UAAU;gCAjBZC,cAAc,GAAG,OAAO,kBAAkB;AAyC3C,8BAAe"}
+{"version":3,"file":"shape-indicator.js","names":["styles","customElement"],"sources":["../../../src/components/shape-indicator/shape-indicator.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2025\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 { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport styles from './shape-indicator.scss?lit';\n\n// Import Carbon icons\nimport Critical from '@carbon/icons/es/critical/index.js';\nimport CriticalSeverity from '@carbon/icons/es/critical-severity/index.js';\nimport DiamondFill from '@carbon/icons/es/diamond-fill/index.js';\nimport LowSeverity from '@carbon/icons/es/low-severity/index.js';\nimport Caution from '@carbon/icons/es/caution/index.js';\nimport CircleFill from '@carbon/icons/es/circle-fill/index.js';\nimport CircleStroke from '@carbon/icons/es/circle-stroke/index.js';\nimport { SHAPE_INDICATOR_KIND } from './defs';\n\n/**\n * Custom incomplete icon implementation\n */\nconst IncompleteIcon = `<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"16\"\n  height=\"16\"\n  fill=\"none\"\n  aria-hidden=\"true\">\n  <path\n    fill=\"#fff\"\n    fillOpacity=\"0.01\"\n    d=\"M0 0h16v16H0z\"\n    style=\"mix-blend-mode: multiply;\" />\n  <path\n    fill=\"#161616\"\n    d=\"M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 2a4.004 4.004 0 0 1 4 4H4a4.004 4.004 0 0 1 4-4Z\" />\n</svg>`;\n\n/**\n * Map of shape indicators to their corresponding icons\n */\nconst shapeMap = {\n  [SHAPE_INDICATOR_KIND.FAILED]: Critical,\n  [SHAPE_INDICATOR_KIND.CRITICAL]: CriticalSeverity,\n  [SHAPE_INDICATOR_KIND.HIGH]: Caution,\n  [SHAPE_INDICATOR_KIND.MEDIUM]: DiamondFill,\n  [SHAPE_INDICATOR_KIND.LOW]: LowSeverity,\n  [SHAPE_INDICATOR_KIND.CAUTIOUS]: Caution,\n  [SHAPE_INDICATOR_KIND.UNDEFINED]: DiamondFill,\n  [SHAPE_INDICATOR_KIND.STABLE]: CircleFill,\n  [SHAPE_INDICATOR_KIND.INFORMATIVE]: LowSeverity,\n  [SHAPE_INDICATOR_KIND.INCOMPLETE]: IncompleteIcon,\n  [SHAPE_INDICATOR_KIND.DRAFT]: CircleStroke,\n};\n\n/**\n * Shape Indicator.\n * @element cds-custom-shape-indicator\n */\n@customElement(`${prefix}-shape-indicator`)\nclass CDSShapeIndicator extends LitElement {\n  /**\n   * Shape indicator size (12 or 14)\n   */\n  @property({ attribute: 'text-size' })\n  textSize = 12;\n\n  /**\n   * Label next to the shape.\n   */\n  @property()\n  label!: string;\n\n  /**\n   * Shape Indicator kind\n   */\n  @property()\n  kind!: SHAPE_INDICATOR_KIND;\n\n  render() {\n    const shape = shapeMap[this.kind];\n\n    if (!shape) {\n      return null;\n    }\n\n    // Handle custom SVG string vs Carbon icon descriptor\n    if (typeof shape === 'string') {\n      return html` ${iconLoader(null, {}, shape)} ${this.label} `;\n    }\n\n    return html` ${iconLoader(shape)} ${this.label} `;\n  }\n\n  /**\n   * Styles are imported from the SCSS file\n   */\n  static styles = styles;\n}\n\nexport default CDSShapeIndicator;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;AAmBvB,MAAM,WAAW;aACgB;eACE;WACJ;aACE;UACH;eACK;gBACC;aACH;kBACK;iBACD;YACL;CAC/B;;;;;AAMD,IAAA,oBAAA,MACM,0BAA0B,WAAW;;;kBAK9B;;CAcX,SAAS;EACP,MAAM,QAAQ,SAAS,KAAK;AAE5B,MAAI,CAAC,MACH,QAAO;AAIT,MAAI,OAAO,UAAU,SACnB,QAAO,IAAI,IAAI,WAAW,MAAM,EAAE,EAAE,MAAM,CAAC,GAAG,KAAK,MAAM;AAG3D,SAAO,IAAI,IAAI,WAAW,MAAM,CAAC,GAAG,KAAK,MAAM;;;gBAMjCA;;;YAjCf,SAAS,EAAE,WAAW,aAAa,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAMpC,UAAU,CAAA,EAAA,kBAAA,WAAA,SAAA,KAAA,EAAA;YAMV,UAAU,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;gCAjBZC,cAAc,sBAA4B,CAAA,EAAA,kBAAA;AAyC3C,IAAA,0BAAe"}

package/es-custom/components/shape-indicator/shape-indicator.scss.js

@@ -6,10 +6,9 @@
  */
 
 import { css } from "lit";
-
 //#region src/components/shape-indicator/shape-indicator.scss?lit
 var shape_indicator_default = css([".cds-custom--shape-indicator,:host(cds-custom-shape-indicator){color:var(--cds-text-secondary,#525252);display:flex;font-size:var(--cds-helper-text-01-font-size,.75rem);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);line-height:var(--cds-helper-text-01-line-height,1.33333)}.cds-custom--shape-indicator svg,:host(cds-custom-shape-indicator) svg{align-self:center;margin-inline-end:.5rem}.cds-custom--shape-indicator--14,:host(cds-custom-shape-indicator[text-size=\"14\"]){font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.cds-custom--shape-indicator--failed,:host(cds-custom-shape-indicator[kind=failed]) svg{fill:var(--cds-status-red,#da1e28)}.cds-custom--shape-indicator--critical,:host(cds-custom-shape-indicator[kind=critical]) svg{fill:var(--cds-status-red,#da1e28)}.cds-custom--shape-indicator--high,:host(cds-custom-shape-indicator[kind=high]) svg{fill:var(--cds-status-red,#da1e28)}.cds-custom--shape-indicator--medium,:host(cds-custom-shape-indicator[kind=medium]) svg{fill:var(--cds-status-orange,#ff832b)}.cds-custom--shape-indicator--medium path:first-of-type,:host(cds-custom-shape-indicator[kind=medium]) svg path:first-of-type{fill:var(--cds-status-orange-outline,#ba4e00)}.cds-custom--shape-indicator--low,:host(cds-custom-shape-indicator[kind=low]) svg{fill:var(--cds-status-yellow,#f1c21b)}.cds-custom--shape-indicator--low path:nth-of-type(2),:host(cds-custom-shape-indicator[kind=low]) svg path:nth-of-type(2){fill:var(--cds-status-yellow-outline,#8e6a00)}.cds-custom--shape-indicator--cautious,:host(cds-custom-shape-indicator[kind=cautious]) svg{fill:var(--cds-status-yellow,#f1c21b)}.cds-custom--shape-indicator--cautious path:first-of-type,:host(cds-custom-shape-indicator[kind=cautious]) svg path:first-of-type{fill:var(--cds-status-yellow-outline,#8e6a00)}.cds-custom--shape-indicator--undefined,:host(cds-custom-shape-indicator[kind=undefined]) svg{fill:var(--cds-status-purple,#8a3ffc)}.cds-custom--shape-indicator--stable,:host(cds-custom-shape-indicator[kind=stable]) svg{fill:var(--cds-status-green,#24a148)}.cds-custom--shape-indicator--informative,:host(cds-custom-shape-indicator[kind=informative]) svg{fill:var(--cds-status-blue,#0043ce)}.cds-custom--shape-indicator--incomplete path:nth-of-type(2),:host(cds-custom-shape-indicator[kind=incomplete]) svg path:nth-of-type(2){fill:var(--cds-status-blue,#0043ce)}.cds-custom--shape-indicator--draft,:host(cds-custom-shape-indicator[kind=draft]) svg{fill:var(--cds-status-gray,#6f6f6f)}"]);
-
 //#endregion
 export { shape_indicator_default as default };
+
 //# sourceMappingURL=shape-indicator.scss.js.map

package/es-custom/components/side-panel/defs.js

@@ -45,7 +45,7 @@ let SIDE_PANEL_PLACEMENT = /* @__PURE__ */ function(SIDE_PANEL_PLACEMENT) {
 	SIDE_PANEL_PLACEMENT["LEFT"] = "left";
 	return SIDE_PANEL_PLACEMENT;
 }({});
-
 //#endregion
 export { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE };
+
 //# sourceMappingURL=defs.js.map

package/es-custom/components/side-panel/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/side-panel/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 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\n/**\n * Modal size.\n */\nexport enum SIDE_PANEL_SIZE {\n  /**\n   * Extra small size.\n   */\n  EXTRA_SMALL = 'xs',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * 2X-Large size.\n   */\n  EXTRA_EXTRA_LARGE = '2xl',\n}\n\nexport enum SIDE_PANEL_PLACEMENT {\n  /** right / default */\n  RIGHT = 'right',\n\n  /** left  */\n  LEFT = 'left',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,4DAAL;;;;AAIL;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAKA;;;AAGF,IAAY,sEAAL;;AAEL;;AAGA"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/side-panel/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 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\n/**\n * Modal size.\n */\nexport enum SIDE_PANEL_SIZE {\n  /**\n   * Extra small size.\n   */\n  EXTRA_SMALL = 'xs',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * 2X-Large size.\n   */\n  EXTRA_EXTRA_LARGE = '2xl',\n}\n\nexport enum SIDE_PANEL_PLACEMENT {\n  /** right / default */\n  RIGHT = 'right',\n\n  /** left  */\n  LEFT = 'left',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,kBAAL,yBAAA,iBAAA;;;;AAIL,iBAAA,iBAAA;;;;AAKA,iBAAA,WAAA;;;;AAKA,iBAAA,YAAA;;;;AAKA,iBAAA,WAAA;;;;AAKA,iBAAA,uBAAA;;KACD;AAED,IAAY,uBAAL,yBAAA,sBAAA;;AAEL,sBAAA,WAAA;;AAGA,sBAAA,UAAA;;KACD"}