@carbon/ibm-products-web-components 0.39.0 → 0.40.0

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

@@ -16,7 +16,9 @@ import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-lis
 import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
 import "@carbon/web-components/es/components/layer/index.js";
-import ChevronDown20 from "@carbon/icons/es/chevron--down/20";
+import ChevronDown16 from "@carbon/icons/es/chevron--down/16";
+import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16";
+import Locked16 from "@carbon/icons/es/locked/16";
 //#region src/components/options-tile/options-tile.ts
 /**
 * @license
@@ -43,8 +45,13 @@ let CDSOptionsTile = class CDSOptionsTile extends HostListenerMixin(LitElement)
 		this.size = "lg";
 		this.titleId = "";
 		this.titleText = "";
+		this.locked = false;
+		this.lockedText = "";
+		this.warn = false;
+		this.warnText = "";
 		this._open = false;
 		this._hasToggle = false;
+		this._hasBody = false;
 	}
 	static get eventOpen() {
 		return `${blockEvent}-open`;
@@ -56,6 +63,10 @@ let CDSOptionsTile = class CDSOptionsTile extends HostListenerMixin(LitElement)
 		const toggleElements = e.target?.assignedElements();
 		this._hasToggle = toggleElements && toggleElements.length > 0;
 	}
+	_handleBodySlotChange(e) {
+		const bodyElements = e.target?.assignedElements();
+		this._hasBody = bodyElements && bodyElements.length > 0;
+	}
 	_toggle(evt) {
 		const { newState } = evt;
 		this._open = newState === "open";
@@ -78,7 +89,7 @@ let CDSOptionsTile = class CDSOptionsTile extends HostListenerMixin(LitElement)
 		this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
 	}
 	render() {
-		const { _open, _hasToggle, defaultOpen, size, titleId, titleText } = this;
+		const { _open, _hasToggle, _hasBody, defaultOpen, size, titleId, titleText, locked, lockedText, warn, warnText } = this;
 		const classes = classMap({
 			[`${blockClass}`]: true,
 			[`${blockClass}--xl`]: size === "xl",
@@ -88,40 +99,73 @@ let CDSOptionsTile = class CDSOptionsTile extends HostListenerMixin(LitElement)
 			[`${blockClass}__header`]: true,
 			[`${blockClass}__header--has-toggle`]: _hasToggle
 		});
-		return html`
-      <details
-        @toggle=${this._toggle}
-        class="${classes}"
-        part="options-tile"
-        open=${defaultOpen || nothing}
-      >
-        <summary class="${headerClasses}">
-          <div class="${blockClass}__header-right">
-            <slot
-              name="toggle"
-              @slotchange=${this._handleToggleSlotChange}
-            ></slot>
-          </div>
-          <div class="${blockClass}__header-left">
-            ${iconLoader(ChevronDown20, {
+		const summaryClasses = classMap({
+			[`${blockClass}__summary`]: true,
+			[`${blockClass}__summary--warn`]: !!warn,
+			[`${blockClass}__summary--locked`]: !!locked
+		});
+		const renderTitle = () => html`
+      <div class="${blockClass}__title-block">
+        <p class="${blockClass}__title" id="${titleId}">${titleText}</p>
+        <div class="${summaryClasses}">
+          ${locked && lockedText ? html`
+                ${iconLoader(Locked16, { class: `${blockClass}__summary-icon` })}
+                <span class="${blockClass}__summary-text">${lockedText}</span>
+              ` : warn && warnText ? html`
+                  ${iconLoader(WarningAltFilled16, { class: `${blockClass}__summary-icon` })}
+                  <span class="${blockClass}__summary-text">${warnText}</span>
+                ` : html`<slot name="summary"></slot>`}
+        </div>
+      </div>
+    `;
+		return _hasBody ? html`
+          <details
+            @toggle=${this._toggle}
+            class="${classes}"
+            part="options-tile"
+            open=${defaultOpen || nothing}
+          >
+            <summary class="${headerClasses}">
+              <div class="${blockClass}__header-right">
+                <slot
+                  name="toggle"
+                  @slotchange=${this._handleToggleSlotChange}
+                ></slot>
+              </div>
+              <div class="${blockClass}__header-left">
+                ${iconLoader(ChevronDown16, {
 			slot: "icon",
 			class: `${blockClass}__chevron`
 		})}
-            <div class="${blockClass}__title-block">
-              <p class="${blockClass}__title" id="${titleId}">${titleText}</p>
-              <div class="${blockClass}__summary">
-                <slot name="summary"></slot>
+                ${renderTitle()}
               </div>
+            </summary>
+            <div class="${blockClass}__body">
+              <cds-layer level="1">
+                <slot
+                  name="body"
+                  @slotchange=${this._handleBodySlotChange}
+                ></slot>
+              </cds-layer>
+            </div>
+          </details>
+        ` : html`
+          <div class="${classes}">
+            <div class="${blockClass}__static-content">
+              <slot
+                name="toggle"
+                @slotchange=${this._handleToggleSlotChange}
+                style="display: none;"
+              ></slot>
+              <slot
+                name="body"
+                @slotchange=${this._handleBodySlotChange}
+                style="display: none;"
+              ></slot>
+              ${renderTitle()}
             </div>
           </div>
-        </summary>
-        <div class="${blockClass}__body">
-          <cds-layer level="1">
-            <slot name="body"></slot>
-          </cds-layer>
-        </div>
-      </details>
-    `;
+        `;
 	}
 	static {
 		this.styles = options_tile_default$1;
@@ -143,8 +187,25 @@ __decorate([property({
 	type: String,
 	reflect: true
 })], CDSOptionsTile.prototype, "titleText", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSOptionsTile.prototype, "locked", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSOptionsTile.prototype, "lockedText", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSOptionsTile.prototype, "warn", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSOptionsTile.prototype, "warnText", void 0);
 __decorate([state()], CDSOptionsTile.prototype, "_open", void 0);
 __decorate([state()], CDSOptionsTile.prototype, "_hasToggle", void 0);
+__decorate([state()], CDSOptionsTile.prototype, "_hasBody", void 0);
 CDSOptionsTile = __decorate([carbonElement(`c4p-options-tile`)], CDSOptionsTile);
 var options_tile_default = CDSOptionsTile;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"options-tile.js","names":["styles","customElement"],"sources":["../../../src/components/options-tile/options-tile.ts"],"sourcesContent":["/**\n * @license\n *\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\nimport { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport styles from './options-tile.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport ChevronDown20 from '@carbon/icons/es/chevron--down/20';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport '@carbon/web-components/es/components/button/index.js';\nimport '@carbon/web-components/es/components/layer/index.js';\n\nexport const blockClass = `${prefix}--options-tile`;\nconst blockEvent = `${prefix}-options-tile`;\n\n/**\n * OptionsTile.\n *\n * @element c4p-options-tile\n * @csspart options-tile The options tile\n * @fires c4p-options-tile-open Custom event fired when tile is opened\n * @fires c4p-options-tile-close Custom event fired when tile is closed\n * */\n\n@customElement(`${prefix}-options-tile`)\nclass CDSOptionsTile extends HostListenerMixin(LitElement) {\n  /**\n   * Determines if the tile is open by default\n   */\n  @property({ type: Boolean, reflect: true })\n  defaultOpen?: boolean = false;\n\n  /**\n   * Determines the size of the header\n   */\n  @property({ type: String, reflect: true })\n  size?: 'lg' | 'xl' = 'lg';\n\n  /**\n   * ID for the title\n   */\n  @property({ type: String, reflect: true })\n  titleId: string = '';\n\n  /**\n   * Text for the title\n   */\n  @property({ type: String, reflect: true })\n  titleText: string = '';\n\n  /**\n   * Using the native toggle event handler in details can cause an infinite loop\n   * when setting the native open attribute. To combat this, the open state is kept\n   * here and only referenced internally.\n   */\n  @state()\n  private _open = false;\n\n  /**\n   * Tracks whether the toggle slot has content\n   */\n  @state()\n  private _hasToggle = false;\n\n  static get eventOpen() {\n    return `${blockEvent}-open`;\n  }\n\n  static get eventClose() {\n    return `${blockEvent}-close`;\n  }\n\n  private _handleToggleSlotChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const toggleElements = target?.assignedElements();\n    this._hasToggle = toggleElements && toggleElements.length > 0;\n  }\n\n  private _toggle(evt: ToggleEvent) {\n    const { newState } = evt;\n    this._open = newState === 'open';\n    this._open ? this._handleOpen() : this._handleClose();\n  }\n\n  private _handleOpen() {\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        open: this._open,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSOptionsTile).eventOpen,\n        init\n      )\n    );\n  }\n\n  private _handleClose() {\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        open: this._open,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSOptionsTile).eventClose,\n        init\n      )\n    );\n  }\n\n  render() {\n    const { _open, _hasToggle, defaultOpen, size, titleId, titleText } = this;\n    const classes = classMap({\n      [`${blockClass}`]: true,\n      [`${blockClass}--xl`]: size === 'xl',\n      [`${blockClass}--open`]: _open,\n    });\n\n    const headerClasses = classMap({\n      [`${blockClass}__header`]: true,\n      [`${blockClass}__header--has-toggle`]: _hasToggle,\n    });\n\n    return html`\n      <details\n        @toggle=${this._toggle}\n        class=\"${classes}\"\n        part=\"options-tile\"\n        open=${defaultOpen || nothing}\n      >\n        <summary class=\"${headerClasses}\">\n          <div class=\"${blockClass}__header-right\">\n            <slot\n              name=\"toggle\"\n              @slotchange=${this._handleToggleSlotChange}\n            ></slot>\n          </div>\n          <div class=\"${blockClass}__header-left\">\n            ${iconLoader(ChevronDown20, {\n              slot: 'icon',\n              class: `${blockClass}__chevron`,\n            })}\n            <div class=\"${blockClass}__title-block\">\n              <p class=\"${blockClass}__title\" id=\"${titleId}\">${titleText}</p>\n              <div class=\"${blockClass}__summary\">\n                <slot name=\"summary\"></slot>\n              </div>\n            </div>\n          </div>\n        </summary>\n        <div class=\"${blockClass}__body\">\n          <cds-layer level=\"1\">\n            <slot name=\"body\"></slot>\n          </cds-layer>\n        </div>\n      </details>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSOptionsTile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,aAAa;AAC1B,MAAM,aAAa;;;;;;;;;AAWnB,IAAA,iBAAA,MACM,uBAAuB,kBAAkB,WAAW,CAAC;;;qBAKjC;cAMH;iBAMH;mBAME;eAQJ;oBAMK;;CAErB,WAAW,YAAY;AACrB,SAAO,GAAG,WAAW;;CAGvB,WAAW,aAAa;AACtB,SAAO,GAAG,WAAW;;CAGvB,wBAAgC,GAAU;EAExC,MAAM,iBADS,EAAE,QACc,kBAAkB;AACjD,OAAK,aAAa,kBAAkB,eAAe,SAAS;;CAG9D,QAAgB,KAAkB;EAChC,MAAM,EAAE,aAAa;AACrB,OAAK,QAAQ,aAAa;AAC1B,OAAK,QAAQ,KAAK,aAAa,GAAG,KAAK,cAAc;;CAGvD,cAAsB;EACpB,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,QAAQ,EACN,MAAM,KAAK,OACZ;GACF;AACD,OAAK,cACH,IAAI,YACD,KAAK,YAAsC,WAC5C,KACD,CACF;;CAGH,eAAuB;EACrB,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,QAAQ,EACN,MAAM,KAAK,OACZ;GACF;AACD,OAAK,cACH,IAAI,YACD,KAAK,YAAsC,YAC5C,KACD,CACF;;CAGH,SAAS;EACP,MAAM,EAAE,OAAO,YAAY,aAAa,MAAM,SAAS,cAAc;EACrE,MAAM,UAAU,SAAS;IACtB,GAAG,eAAe;IAClB,GAAG,WAAW,QAAQ,SAAS;IAC/B,GAAG,WAAW,UAAU;GAC1B,CAAC;EAEF,MAAM,gBAAgB,SAAS;IAC5B,GAAG,WAAW,YAAY;IAC1B,GAAG,WAAW,wBAAwB;GACxC,CAAC;AAEF,SAAO,IAAI;;kBAEG,KAAK,QAAQ;iBACd,QAAQ;;eAEV,eAAe,QAAQ;;0BAEZ,cAAc;wBAChB,WAAW;;;4BAGP,KAAK,wBAAwB;;;wBAGjC,WAAW;cACrB,WAAW,eAAe;GAC1B,MAAM;GACN,OAAO,GAAG,WAAW;GACtB,CAAC,CAAC;0BACW,WAAW;0BACX,WAAW,eAAe,QAAQ,IAAI,UAAU;4BAC9C,WAAW;;;;;;sBAMjB,WAAW;;;;;;;;;gBASfA;;;YAxIf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,eAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,QAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,WAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,aAAA,KAAA,EAAA;YAQzC,OAAO,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAMP,OAAO,CAAA,EAAA,eAAA,WAAA,cAAA,KAAA,EAAA;6BArCTC,cAAc,mBAAyB,CAAA,EAAA,eAAA;AAgJxC,IAAA,uBAAe"}
+{"version":3,"file":"options-tile.js","names":["styles","customElement"],"sources":["../../../src/components/options-tile/options-tile.ts"],"sourcesContent":["/**\n * @license\n *\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\nimport { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport styles from './options-tile.scss?lit';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport ChevronDown16 from '@carbon/icons/es/chevron--down/16';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16';\nimport Locked16 from '@carbon/icons/es/locked/16';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport '@carbon/web-components/es/components/button/index.js';\nimport '@carbon/web-components/es/components/layer/index.js';\n\nexport const blockClass = `${prefix}--options-tile`;\nconst blockEvent = `${prefix}-options-tile`;\n\n/**\n * OptionsTile.\n *\n * @element c4p-options-tile\n * @csspart options-tile The options tile\n * @fires c4p-options-tile-open Custom event fired when tile is opened\n * @fires c4p-options-tile-close Custom event fired when tile is closed\n * */\n\n@customElement(`${prefix}-options-tile`)\nclass CDSOptionsTile extends HostListenerMixin(LitElement) {\n  /**\n   * Determines if the tile is open by default\n   */\n  @property({ type: Boolean, reflect: true })\n  defaultOpen?: boolean = false;\n\n  /**\n   * Determines the size of the header\n   */\n  @property({ type: String, reflect: true })\n  size?: 'lg' | 'xl' = 'lg';\n\n  /**\n   * ID for the title\n   */\n  @property({ type: String, reflect: true })\n  titleId: string = '';\n\n  /**\n   * Text for the title\n   */\n  @property({ type: String, reflect: true })\n  titleText: string = '';\n\n  /**\n   * Whether the OptionsTile is in locked validation state.\n   */\n  @property({ type: Boolean, reflect: true })\n  locked?: boolean = false;\n\n  /**\n   * Provide a text explaining why the OptionsTile is in locked state.\n   */\n  @property({ type: String, reflect: true })\n  lockedText?: string = '';\n\n  /**\n   * Whether the OptionsTile is in warning validation state.\n   */\n  @property({ type: Boolean, reflect: true })\n  warn?: boolean = false;\n\n  /**\n   * Provide a text explaining why the OptionsTile is in warning state.\n   */\n  @property({ type: String, reflect: true })\n  warnText?: string = '';\n\n  /**\n   * Using the native toggle event handler in details can cause an infinite loop\n   * when setting the native open attribute. To combat this, the open state is kept\n   * here and only referenced internally.\n   */\n  @state()\n  private _open = false;\n\n  /**\n   * Tracks whether the toggle slot has content\n   */\n  @state()\n  private _hasToggle = false;\n\n  /**\n   * Tracks whether the body slot has content\n   */\n  @state()\n  private _hasBody = false;\n\n  static get eventOpen() {\n    return `${blockEvent}-open`;\n  }\n\n  static get eventClose() {\n    return `${blockEvent}-close`;\n  }\n\n  private _handleToggleSlotChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const toggleElements = target?.assignedElements();\n    this._hasToggle = toggleElements && toggleElements.length > 0;\n  }\n\n  private _handleBodySlotChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const bodyElements = target?.assignedElements();\n    this._hasBody = bodyElements && bodyElements.length > 0;\n  }\n\n  private _toggle(evt: ToggleEvent) {\n    const { newState } = evt;\n    this._open = newState === 'open';\n    this._open ? this._handleOpen() : this._handleClose();\n  }\n\n  private _handleOpen() {\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        open: this._open,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSOptionsTile).eventOpen,\n        init\n      )\n    );\n  }\n\n  private _handleClose() {\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        open: this._open,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSOptionsTile).eventClose,\n        init\n      )\n    );\n  }\n\n  render() {\n    const {\n      _open,\n      _hasToggle,\n      _hasBody,\n      defaultOpen,\n      size,\n      titleId,\n      titleText,\n      locked,\n      lockedText,\n      warn,\n      warnText,\n    } = this;\n    const classes = classMap({\n      [`${blockClass}`]: true,\n      [`${blockClass}--xl`]: size === 'xl',\n      [`${blockClass}--open`]: _open,\n    });\n\n    const headerClasses = classMap({\n      [`${blockClass}__header`]: true,\n      [`${blockClass}__header--has-toggle`]: _hasToggle,\n    });\n\n    const summaryClasses = classMap({\n      [`${blockClass}__summary`]: true,\n      [`${blockClass}__summary--warn`]: !!warn,\n      [`${blockClass}__summary--locked`]: !!locked,\n    });\n\n    const renderTitle = () => html`\n      <div class=\"${blockClass}__title-block\">\n        <p class=\"${blockClass}__title\" id=\"${titleId}\">${titleText}</p>\n        <div class=\"${summaryClasses}\">\n          ${locked && lockedText\n            ? html`\n                ${iconLoader(Locked16, {\n                  class: `${blockClass}__summary-icon`,\n                })}\n                <span class=\"${blockClass}__summary-text\">${lockedText}</span>\n              `\n            : warn && warnText\n              ? html`\n                  ${iconLoader(WarningAltFilled16, {\n                    class: `${blockClass}__summary-icon`,\n                  })}\n                  <span class=\"${blockClass}__summary-text\">${warnText}</span>\n                `\n              : html`<slot name=\"summary\"></slot>`}\n        </div>\n      </div>\n    `;\n\n    return _hasBody\n      ? html`\n          <details\n            @toggle=${this._toggle}\n            class=\"${classes}\"\n            part=\"options-tile\"\n            open=${defaultOpen || nothing}\n          >\n            <summary class=\"${headerClasses}\">\n              <div class=\"${blockClass}__header-right\">\n                <slot\n                  name=\"toggle\"\n                  @slotchange=${this._handleToggleSlotChange}\n                ></slot>\n              </div>\n              <div class=\"${blockClass}__header-left\">\n                ${iconLoader(ChevronDown16, {\n                  slot: 'icon',\n                  class: `${blockClass}__chevron`,\n                })}\n                ${renderTitle()}\n              </div>\n            </summary>\n            <div class=\"${blockClass}__body\">\n              <cds-layer level=\"1\">\n                <slot\n                  name=\"body\"\n                  @slotchange=${this._handleBodySlotChange}\n                ></slot>\n              </cds-layer>\n            </div>\n          </details>\n        `\n      : html`\n          <div class=\"${classes}\">\n            <div class=\"${blockClass}__static-content\">\n              <slot\n                name=\"toggle\"\n                @slotchange=${this._handleToggleSlotChange}\n                style=\"display: none;\"\n              ></slot>\n              <slot\n                name=\"body\"\n                @slotchange=${this._handleBodySlotChange}\n                style=\"display: none;\"\n              ></slot>\n              ${renderTitle()}\n            </div>\n          </div>\n        `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSOptionsTile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,aAAa;AAC1B,MAAM,aAAa;;;;;;;;;AAWnB,IAAA,iBAAA,MACM,uBAAuB,kBAAkB,WAAW,CAAC;;;qBAKjC;cAMH;iBAMH;mBAME;gBAMD;oBAMG;cAML;kBAMG;eAQJ;oBAMK;kBAMF;;CAEnB,WAAW,YAAY;AACrB,SAAO,GAAG,WAAW;;CAGvB,WAAW,aAAa;AACtB,SAAO,GAAG,WAAW;;CAGvB,wBAAgC,GAAU;EAExC,MAAM,iBADS,EAAE,QACc,kBAAkB;AACjD,OAAK,aAAa,kBAAkB,eAAe,SAAS;;CAG9D,sBAA8B,GAAU;EAEtC,MAAM,eADS,EAAE,QACY,kBAAkB;AAC/C,OAAK,WAAW,gBAAgB,aAAa,SAAS;;CAGxD,QAAgB,KAAkB;EAChC,MAAM,EAAE,aAAa;AACrB,OAAK,QAAQ,aAAa;AAC1B,OAAK,QAAQ,KAAK,aAAa,GAAG,KAAK,cAAc;;CAGvD,cAAsB;EACpB,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,QAAQ,EACN,MAAM,KAAK,OACZ;GACF;AACD,OAAK,cACH,IAAI,YACD,KAAK,YAAsC,WAC5C,KACD,CACF;;CAGH,eAAuB;EACrB,MAAM,OAAO;GACX,SAAS;GACT,UAAU;GACV,QAAQ,EACN,MAAM,KAAK,OACZ;GACF;AACD,OAAK,cACH,IAAI,YACD,KAAK,YAAsC,YAC5C,KACD,CACF;;CAGH,SAAS;EACP,MAAM,EACJ,OACA,YACA,UACA,aACA,MACA,SACA,WACA,QACA,YACA,MACA,aACE;EACJ,MAAM,UAAU,SAAS;IACtB,GAAG,eAAe;IAClB,GAAG,WAAW,QAAQ,SAAS;IAC/B,GAAG,WAAW,UAAU;GAC1B,CAAC;EAEF,MAAM,gBAAgB,SAAS;IAC5B,GAAG,WAAW,YAAY;IAC1B,GAAG,WAAW,wBAAwB;GACxC,CAAC;EAEF,MAAM,iBAAiB,SAAS;IAC7B,GAAG,WAAW,aAAa;IAC3B,GAAG,WAAW,mBAAmB,CAAC,CAAC;IACnC,GAAG,WAAW,qBAAqB,CAAC,CAAC;GACvC,CAAC;EAEF,MAAM,oBAAoB,IAAI;oBACd,WAAW;oBACX,WAAW,eAAe,QAAQ,IAAI,UAAU;sBAC9C,eAAe;YACzB,UAAU,aACR,IAAI;kBACA,WAAW,UAAU,EACrB,OAAO,GAAG,WAAW,iBACtB,CAAC,CAAC;+BACY,WAAW,kBAAkB,WAAW;kBAEzD,QAAQ,WACN,IAAI;oBACA,WAAW,oBAAoB,EAC/B,OAAO,GAAG,WAAW,iBACtB,CAAC,CAAC;iCACY,WAAW,kBAAkB,SAAS;oBAEvD,IAAI,+BAA+B;;;;AAK/C,SAAO,WACH,IAAI;;sBAEU,KAAK,QAAQ;qBACd,QAAQ;;mBAEV,eAAe,QAAQ;;8BAEZ,cAAc;4BAChB,WAAW;;;gCAGP,KAAK,wBAAwB;;;4BAGjC,WAAW;kBACrB,WAAW,eAAe;GAC1B,MAAM;GACN,OAAO,GAAG,WAAW;GACtB,CAAC,CAAC;kBACD,aAAa,CAAC;;;0BAGN,WAAW;;;;gCAIL,KAAK,sBAAsB;;;;;YAMnD,IAAI;wBACY,QAAQ;0BACN,WAAW;;;8BAGP,KAAK,wBAAwB;;;;;8BAK7B,KAAK,sBAAsB;;;gBAGzC,aAAa,CAAC;;;;;;gBAMZA;;;YArOf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,eAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,QAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,WAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,aAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,UAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,cAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,QAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,YAAA,KAAA,EAAA;YAQzC,OAAO,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAMP,OAAO,CAAA,EAAA,eAAA,WAAA,cAAA,KAAA,EAAA;YAMP,OAAO,CAAA,EAAA,eAAA,WAAA,YAAA,KAAA,EAAA;6BAnETC,cAAc,mBAAyB,CAAA,EAAA,eAAA;AA6OxC,IAAA,uBAAe"}

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

@@ -7,7 +7,7 @@
 
 import { css } from "lit";
 //#region src/components/options-tile/options-tile.scss?lit
-var options_tile_default = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-feature-settings:\"liga\" 1;font-size:100%;margin:0;padding:0;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}:root{color-scheme:var(--cds-color-scheme,light)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}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}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);letter-spacing:var(--cds-heading-06-letter-spacing,0);line-height:var(--cds-heading-06-line-height,1.199)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);letter-spacing:var(--cds-heading-05-letter-spacing,0);line-height:var(--cds-heading-05-line-height,1.25)}h3{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);letter-spacing:var(--cds-heading-04-letter-spacing,0);line-height:var(--cds-heading-04-line-height,1.28572)}h4{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);letter-spacing:var(--cds-heading-02-letter-spacing,0);line-height:var(--cds-heading-02-line-height,1.5)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-heading-01-line-height,1.42857)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);letter-spacing:var(--cds-body-02-letter-spacing,0);line-height:var(--cds-body-02-line-height,1.5)}a{color:var(--cds-link-primary,#0062fe)}em{font-style:italic}:host(c4p-options-tile){position:relative}:host(c4p-options-tile) .c4p--options-tile{background:var(--cds-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);position:relative}:host(c4p-options-tile) .c4p--options-tile ::-webkit-details-marker,:host(c4p-options-tile) .c4p--options-tile ::marker{content:\"\";display:none}:host(c4p-options-tile) .c4p--options-tile__header{align-items:center;block-size:3rem;cursor:pointer;display:flex;justify-content:space-between;padding-inline:1rem;padding-inline-end:1rem}:host(c4p-options-tile) .c4p--options-tile__header:hover{background:var(--cds-background-hover,hsla(0,0%,55%,.12))}:host(c4p-options-tile) .c4p--options-tile__header:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(c4p-options-tile) .c4p--options-tile__header-left{align-items:center;display:flex}:host(c4p-options-tile) .c4p--options-tile__header-right{align-items:center;block-size:3rem;display:flex;inset-block-start:0;inset-inline-end:0;padding-inline:1rem;position:absolute}:host(c4p-options-tile) .c4p--options-tile__header--has-toggle{inline-size:calc(100% - 6rem)}:host(c4p-options-tile) .c4p--options-tile__title{font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-heading-compact-01-line-height,1.28572)}:host(c4p-options-tile) .c4p--options-tile__title-block{margin-inline-end:1rem;margin-inline-start:1rem}:host(c4p-options-tile) .c4p--options-tile__summary{color:var(--cds-text-secondary,#525252);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)}:host(c4p-options-tile) .c4p--options-tile__body{padding-block-end:1.5rem;padding-block-start:.5rem;padding-inline:1rem;padding-inline-start:3rem}:host(c4p-options-tile) .c4p--options-tile--xl .c4p--options-tile__header{block-size:4rem}:host(c4p-options-tile) .c4p--options-tile--xl .c4p--options-tile__summary{margin-block-start:.125rem}:host(c4p-options-tile) .c4p--options-tile--open .c4p--options-tile__chevron{transform:rotate(-180deg)}:host(c4p-options-tile) .c4p--options-tile--open .c4p--options-tile__summary{display:none}"]);
+var options_tile_default = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-feature-settings:\"liga\" 1;font-size:100%;margin:0;padding:0;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}:root{color-scheme:var(--cds-color-scheme,light)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}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}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);letter-spacing:var(--cds-heading-06-letter-spacing,0);line-height:var(--cds-heading-06-line-height,1.199)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);letter-spacing:var(--cds-heading-05-letter-spacing,0);line-height:var(--cds-heading-05-line-height,1.25)}h3{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);letter-spacing:var(--cds-heading-04-letter-spacing,0);line-height:var(--cds-heading-04-line-height,1.28572)}h4{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);letter-spacing:var(--cds-heading-02-letter-spacing,0);line-height:var(--cds-heading-02-line-height,1.5)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-heading-01-line-height,1.42857)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);letter-spacing:var(--cds-body-02-letter-spacing,0);line-height:var(--cds-body-02-line-height,1.5)}a{color:var(--cds-link-primary,#0062fe)}em{font-style:italic}:host(c4p-options-tile){position:relative}:host(c4p-options-tile) .c4p--options-tile{background:var(--cds-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);position:relative}:host(c4p-options-tile) .c4p--options-tile ::-webkit-details-marker,:host(c4p-options-tile) .c4p--options-tile ::marker{content:\"\";display:none}:host(c4p-options-tile) .c4p--options-tile__header,:host(c4p-options-tile) .c4p--options-tile__static-content{align-items:center;block-size:3rem;display:flex;justify-content:space-between;padding-inline:1rem;padding-inline-end:1rem}:host(c4p-options-tile) .c4p--options-tile__header{cursor:pointer}:host(c4p-options-tile) .c4p--options-tile__header:hover{background:var(--cds-background-hover,hsla(0,0%,55%,.12))}:host(c4p-options-tile) .c4p--options-tile__header:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(c4p-options-tile) .c4p--options-tile__header-left{align-items:center;display:flex}:host(c4p-options-tile) .c4p--options-tile__header-right{align-items:center;block-size:3rem;display:flex;inset-block-start:0;inset-inline-end:0;padding-inline:1rem;position:absolute}:host(c4p-options-tile) .c4p--options-tile__header--has-toggle{inline-size:calc(100% - 6rem)}:host(c4p-options-tile) .c4p--options-tile__title{font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-heading-compact-01-line-height,1.28572)}:host(c4p-options-tile) .c4p--options-tile__title-block{margin-inline-end:1rem;margin-inline-start:1rem}:host(c4p-options-tile) .c4p--options-tile__summary{align-items:center;color:var(--cds-text-secondary,#525252);display:flex;font-size:var(--cds-helper-text-01-font-size,.75rem);gap:.25rem;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}:host(c4p-options-tile) .c4p--options-tile__summary--locked{color:var(--cds-text-secondary,#525252)}:host(c4p-options-tile) .c4p--options-tile__summary--warn{color:var(--cds-text-primary,#161616)}:host(c4p-options-tile) .c4p--options-tile__summary--warn svg{color:var(--cds-support-warning,#f1c21b)}:host(c4p-options-tile) .c4p--options-tile__summary--warn svg path[fill=none]{fill:#000}:host(c4p-options-tile) .c4p--options-tile__summary-icon{flex-shrink:0}:host(c4p-options-tile) .c4p--options-tile__summary-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(c4p-options-tile) .c4p--options-tile__body{padding-block-end:1.5rem;padding-block-start:.5rem;padding-inline:1rem;padding-inline-start:3rem}:host(c4p-options-tile) .c4p--options-tile--lg .c4p--options-tile__summary{margin-block-start:.125rem}:host(c4p-options-tile) .c4p--options-tile--xl .c4p--options-tile__header{block-size:4rem}:host(c4p-options-tile) .c4p--options-tile--xl .c4p--options-tile__summary{margin-block-start:.125rem}:host(c4p-options-tile) .c4p--options-tile--open .c4p--options-tile__chevron{transform:rotate(-180deg)}:host(c4p-options-tile) .c4p--options-tile--open .c4p--options-tile__summary{display:none}"]);
 //#endregion
 export { options_tile_default as default };
 

package/es/components/options-tile/options-tile.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"options-tile.scss.js","names":[],"sources":["../../../src/components/options-tile/options-tile.scss?lit"],"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\n$css--plex: true !default;\n\n@use 'sass:map';\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/reset';\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/config' as carbon-config;\n\n$prefix: 'c4p';\n$block-class: #{$prefix}--options-tile;\n\n:host(#{$prefix}-options-tile) {\n  position: relative;\n\n  .#{$block-class} {\n    position: relative;\n    background: $layer-01;\n    border-block-end: 1px solid $border-subtle-01;\n\n    ::marker,\n    ::-webkit-details-marker {\n      display: none;\n      content: '';\n    }\n\n    &__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      block-size: $spacing-09;\n      cursor: pointer;\n      padding-inline: $spacing-05;\n      padding-inline-end: $spacing-05;\n\n      &:hover {\n        background: $background-hover;\n      }\n\n      &:focus {\n        outline: 2px solid $focus;\n        outline-offset: -2px;\n      }\n\n      &-left {\n        display: flex;\n        align-items: center;\n      }\n\n      &-right {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        block-size: $spacing-09;\n        inset-block-start: 0;\n        inset-inline-end: 0;\n        padding-inline: $spacing-05;\n      }\n\n      &--has-toggle {\n        inline-size: calc(100% - ($spacing-09 + ($spacing-05 * 3)));\n      }\n    }\n\n    &__title {\n      @include type.type-style('heading-compact-01');\n\n      &-block {\n        margin-inline-end: $spacing-05;\n        margin-inline-start: $spacing-05;\n      }\n    }\n\n    &__summary {\n      @include type.type-style('helper-text-01');\n\n      color: $text-secondary;\n    }\n\n    &__body {\n      padding-block-end: $spacing-06;\n      padding-block-start: $spacing-03;\n      padding-inline: $spacing-05;\n      padding-inline-start: $spacing-09;\n    }\n  }\n\n  .#{$block-class}--xl {\n    .#{$block-class}__header {\n      block-size: $spacing-10;\n    }\n\n    .#{$block-class}__summary {\n      margin-block-start: $spacing-01;\n    }\n  }\n\n  .#{$block-class}--open {\n    .#{$block-class}__chevron {\n      transform: rotate(-180deg);\n    }\n\n    .#{$block-class}__summary {\n      display: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"options-tile.scss.js","names":[],"sources":["../../../src/components/options-tile/options-tile.scss?lit"],"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\n$css--plex: true !default;\n\n@use 'sass:map';\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/colors' as *;\n@use '@carbon/styles/scss/reset';\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/config' as carbon-config;\n\n$prefix: 'c4p';\n$block-class: #{$prefix}--options-tile;\n\n:host(#{$prefix}-options-tile) {\n  position: relative;\n\n  .#{$block-class} {\n    position: relative;\n    background: $layer-01;\n    border-block-end: 1px solid $border-subtle-01;\n\n    ::marker,\n    ::-webkit-details-marker {\n      display: none;\n      content: '';\n    }\n\n    &__header,\n    &__static-content {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      block-size: $spacing-09;\n      padding-inline: $spacing-05;\n      padding-inline-end: $spacing-05;\n    }\n\n    &__header {\n      cursor: pointer;\n\n      &:hover {\n        background: $background-hover;\n      }\n\n      &:focus {\n        outline: 2px solid $focus;\n        outline-offset: -2px;\n      }\n\n      &-left {\n        display: flex;\n        align-items: center;\n      }\n\n      &-right {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        block-size: $spacing-09;\n        inset-block-start: 0;\n        inset-inline-end: 0;\n        padding-inline: $spacing-05;\n      }\n\n      &--has-toggle {\n        inline-size: calc(100% - ($spacing-09 + ($spacing-05 * 3)));\n      }\n    }\n\n    &__title {\n      @include type.type-style('heading-compact-01');\n\n      &-block {\n        margin-inline-end: $spacing-05;\n        margin-inline-start: $spacing-05;\n      }\n    }\n\n    &__summary {\n      @include type.type-style('helper-text-01');\n\n      display: flex;\n      align-items: center;\n      color: $text-secondary;\n      gap: $spacing-02;\n      margin-block-start: $spacing-02;\n\n      &--locked {\n        color: $text-secondary;\n      }\n\n      &--warn {\n        color: $text-primary;\n\n        svg {\n          color: $support-warning;\n\n          path[fill='none'] {\n            fill: $black-100;\n          }\n        }\n      }\n\n      &-icon {\n        flex-shrink: 0;\n      }\n\n      &-text {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n    }\n\n    &__body {\n      padding-block-end: $spacing-06;\n      padding-block-start: $spacing-03;\n      padding-inline: $spacing-05;\n      padding-inline-start: $spacing-09;\n    }\n  }\n\n  .#{$block-class}--lg {\n    .#{$block-class}__summary {\n      margin-block-start: $spacing-01;\n    }\n  }\n\n  .#{$block-class}--xl {\n    .#{$block-class}__header {\n      block-size: $spacing-10;\n    }\n\n    .#{$block-class}__summary {\n      margin-block-start: $spacing-01;\n    }\n  }\n\n  .#{$block-class}--open {\n    .#{$block-class}__chevron {\n      transform: rotate(-180deg);\n    }\n\n    .#{$block-class}__summary {\n      display: none;\n    }\n  }\n}\n"],"mappings":""}

package/es/components/page-header/page-header-actions-set/page-header-actions-set.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-actions-set.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/page-header-actions-set/page-header-actions-set.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,6DAA6D,CAAC;AAQrE,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,MAAM,CAAC,OAAO,OAAO,uBAAwB,SAAQ,UAAU;IAC7D;;OAEG;IAEH,WAAW,EAAE,UAAU,EAAE,CAAM;IAE/B;;OAEG;IAEH,WAAW,EAAE,UAAU,EAAE,CAAM;IAE/B;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC;;OAEG;IAEH,OAAO,CAAC,cAAc,CAAe;IAErC,OAAO,CAAC,cAAc,CAA6B;IACnD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,aAAa,CAAqB;IAC1C,OAAO,CAAC,kBAAkB,CAAK;IAE/B,iBAAiB,IAAI,IAAI;IAKzB,YAAY;IAcZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAa/C,OAAO,CAAC,sBAAsB;IAkG9B,oBAAoB;IAQpB,OAAO,CAAC,uBAAuB;IAY/B,MAAM;IAuCN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,uBAAuB,CAAC;KACxD;CACF"}
+{"version":3,"file":"page-header-actions-set.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/page-header-actions-set/page-header-actions-set.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,6DAA6D,CAAC;AAQrE,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,MAAM,CAAC,OAAO,OAAO,uBAAwB,SAAQ,UAAU;IAC7D;;OAEG;IAEH,WAAW,EAAE,UAAU,EAAE,CAAM;IAE/B;;OAEG;IAEH,WAAW,EAAE,UAAU,EAAE,CAAM;IAE/B;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC;;OAEG;IAEH,OAAO,CAAC,cAAc,CAAe;IAErC,OAAO,CAAC,cAAc,CAA6B;IACnD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,aAAa,CAAqB;IAC1C,OAAO,CAAC,kBAAkB,CAAK;IAE/B,iBAAiB,IAAI,IAAI;IAKzB,YAAY;IAcZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAa/C,OAAO,CAAC,sBAAsB;IAkG9B,oBAAoB;IAQpB,OAAO,CAAC,uBAAuB;IAY/B,MAAM;IAuCN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,uBAAuB,CAAC;KACxD;CACF"}

package/es/components/page-header/page-header-actions-set/page-header-actions-set.js

@@ -9,7 +9,8 @@ import "../../../globals/settings.js";
 import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
 import page_header_actions_set_default$1 from "./page-header-actions-set.scss.js";
 import { LitElement, html } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
+import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
 import { repeat } from "lit/directives/repeat.js";
 import "@carbon/web-components/es/components/overflow-menu/index.js";
@@ -153,7 +154,7 @@ __decorate([property({
 })], CDSPageHeaderActionsSet.prototype, "actionsData", void 0);
 __decorate([query(`.${blockClass}`)], CDSPageHeaderActionsSet.prototype, "container", void 0);
 __decorate([query(`.${blockClass}__items`)], CDSPageHeaderActionsSet.prototype, "itemsContainer", void 0);
-CDSPageHeaderActionsSet = __decorate([customElement(`c4p-page-header-actions-set`)], CDSPageHeaderActionsSet);
+CDSPageHeaderActionsSet = __decorate([carbonElement(`c4p-page-header-actions-set`)], CDSPageHeaderActionsSet);
 var page_header_actions_set_default = CDSPageHeaderActionsSet;
 //#endregion
 export { page_header_actions_set_default as default };

package/es/components/page-header/page-header-actions-set/page-header-actions-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-actions-set.js","names":["styles"],"sources":["../../../../src/components/page-header/page-header-actions-set/page-header-actions-set.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 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 { customElement, property, query, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@carbon/web-components/es/components/overflow-menu/index.js';\nimport OverflowMenuVertical16 from '@carbon/icons/es/overflow-menu--vertical/16.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport styles from './page-header-actions-set.scss?lit';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-actions-set`;\n\ninterface PageAction {\n  label: string;\n}\n\n@customElement(`${prefix}-page-header-actions-set`)\nexport default class CDSPageHeaderActionsSet extends LitElement {\n  /**\n   * Hidden actions that will be rendered in the overflow menu.\n   */\n  @state()\n  hiddenItems: PageAction[] = [];\n\n  /**\n   * The list of page action labels for overflow menu.\n   */\n  @property({ type: Array, attribute: 'actions-data', reflect: true })\n  actionsData: PageAction[] = [];\n\n  /**\n   * Container holding all action buttons and the overflow menu.\n   */\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  /**\n   * Items wrapper containing the slotted elements.\n   */\n  @query(`.${blockClass}__items`)\n  private itemsContainer!: HTMLElement;\n\n  private resizeObserver: ResizeObserver | undefined;\n  private isSetup = false;\n  private resizeTimeout: number | undefined;\n  private lastContainerWidth = 0;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    if (!this.container) {\n      return;\n    }\n\n    this.updateComplete.then(() => {\n      requestAnimationFrame(() => {\n        this.setupOverflowDetection();\n        this.isSetup = true;\n        this.style.visibility = 'visible';\n      });\n    });\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    // Only re-setup if actionsData changed and we've already done initial setup\n    if (\n      this.isSetup &&\n      changedProperties.has('actionsData') &&\n      !changedProperties.has('hiddenItems')\n    ) {\n      this.updateComplete.then(() => {\n        requestAnimationFrame(() => this.setupOverflowDetection());\n      });\n    }\n  }\n\n  private setupOverflowDetection() {\n    if (!this.itemsContainer) {\n      return;\n    }\n\n    // Disconnect existing observer if any\n    this.resizeObserver?.disconnect();\n\n    // Get slotted elements\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;\n\n    const checkOverflow = () => {\n      const slottedElements = slot?.assignedElements() as HTMLElement[];\n\n      if (!slottedElements || slottedElements.length === 0) {\n        return;\n      }\n\n      // Use the host element's width as it reflects the actual available space\n      const containerWidth =\n        this.offsetWidth || this.itemsContainer.clientWidth;\n      const overflowMenuWidth = 48; // Approximate width of overflow menu button\n\n      // If container has no width yet, skip check\n      if (containerWidth === 0) {\n        return;\n      }\n\n      // Prevent resize loop - only recalculate if width changed significantly (>5px)\n      if (Math.abs(containerWidth - this.lastContainerWidth) < 5) {\n        return;\n      }\n      this.lastContainerWidth = containerWidth;\n\n      // First, check if all items fit without overflow menu\n      let totalWidth = 0;\n      for (let i = 0; i < slottedElements.length; i++) {\n        totalWidth += slottedElements[i].offsetWidth;\n      }\n\n      // If all items fit, show all and hide overflow menu\n      if (totalWidth <= containerWidth) {\n        slottedElements.forEach((el) => {\n          el.removeAttribute('data-hidden');\n        });\n        this.hiddenItems = [];\n        return;\n      }\n\n      // Items don't fit, calculate how many can fit with overflow menu\n      totalWidth = 0;\n      let visibleCount = 0;\n\n      for (let i = 0; i < slottedElements.length; i++) {\n        const itemWidth = slottedElements[i].offsetWidth;\n\n        // Check if this item plus overflow menu would fit\n        if (totalWidth + itemWidth + overflowMenuWidth <= containerWidth) {\n          totalWidth += itemWidth;\n          visibleCount = i + 1;\n        } else {\n          break;\n        }\n      }\n\n      // Update visibility\n      slottedElements.forEach((el, index) => {\n        if (index >= visibleCount) {\n          el.setAttribute('data-hidden', '');\n        } else {\n          el.removeAttribute('data-hidden');\n        }\n      });\n\n      // Update hidden items for overflow menu\n      this.hiddenItems = this.actionsData?.slice(visibleCount) || [];\n    };\n\n    // Initial check\n    checkOverflow();\n\n    // Observe both the host element and items container for size changes with debouncing\n    this.resizeObserver = new ResizeObserver(() => {\n      // Clear existing timeout\n      if (this.resizeTimeout) {\n        clearTimeout(this.resizeTimeout);\n      }\n\n      // Debounce the check to prevent rapid recalculations\n      this.resizeTimeout = window.setTimeout(() => {\n        checkOverflow();\n      }, 100);\n    });\n\n    this.resizeObserver.observe(this);\n    this.resizeObserver.observe(this.itemsContainer);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    if (this.resizeTimeout) {\n      clearTimeout(this.resizeTimeout);\n    }\n  }\n\n  private handleOverflowItemClick(index: number) {\n    // Get the slot and find the corresponding slotted element\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;\n    const slottedElements = slot?.assignedElements() as HTMLElement[];\n    const hiddenIndex =\n      this.actionsData.length - this.hiddenItems.length + index;\n    const button = slottedElements[hiddenIndex];\n    if (button) {\n      button.click();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"${blockClass}\">\n        <div class=\"${blockClass}__items\">\n          <slot></slot>\n        </div>\n\n        <div data-offset ?data-hidden=${this.hiddenItems.length === 0}>\n          <cds-overflow-menu\n            size=\"md\"\n            close-on-activation\n            enter-delay-ms=\"0\"\n            leave-delay-ms=\"0\"\n            align=\"left\"\n            data-floating-menu-container\n          >\n            ${iconLoader(OverflowMenuVertical16, {\n              class: `${blockClass}__overflow-svg`,\n              slot: 'icon',\n            })}\n            <span slot=\"tooltip-content\">More actions</span>\n            <cds-overflow-menu-body flipped>\n              ${repeat(\n                this.hiddenItems ?? [],\n                (_item, index) => index,\n                (item, index) => html`\n                  <cds-overflow-menu-item\n                    @click=\"${() => this.handleOverflowItemClick(index)}\"\n                  >\n                    ${item.label}\n                  </cds-overflow-menu-item>\n                `\n              )}\n            </cds-overflow-menu-body>\n          </cds-overflow-menu>\n        </div>\n      </div>\n    `;\n  }\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-actions-set': CDSPageHeaderActionsSet;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"page-header-actions-set.js","names":["styles","customElement"],"sources":["../../../../src/components/page-header/page-header-actions-set/page-header-actions-set.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 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, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@carbon/web-components/es/components/overflow-menu/index.js';\nimport OverflowMenuVertical16 from '@carbon/icons/es/overflow-menu--vertical/16.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport styles from './page-header-actions-set.scss?lit';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-actions-set`;\n\ninterface PageAction {\n  label: string;\n}\n\n@customElement(`${prefix}-page-header-actions-set`)\nexport default class CDSPageHeaderActionsSet extends LitElement {\n  /**\n   * Hidden actions that will be rendered in the overflow menu.\n   */\n  @state()\n  hiddenItems: PageAction[] = [];\n\n  /**\n   * The list of page action labels for overflow menu.\n   */\n  @property({ type: Array, attribute: 'actions-data', reflect: true })\n  actionsData: PageAction[] = [];\n\n  /**\n   * Container holding all action buttons and the overflow menu.\n   */\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  /**\n   * Items wrapper containing the slotted elements.\n   */\n  @query(`.${blockClass}__items`)\n  private itemsContainer!: HTMLElement;\n\n  private resizeObserver: ResizeObserver | undefined;\n  private isSetup = false;\n  private resizeTimeout: number | undefined;\n  private lastContainerWidth = 0;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    if (!this.container) {\n      return;\n    }\n\n    this.updateComplete.then(() => {\n      requestAnimationFrame(() => {\n        this.setupOverflowDetection();\n        this.isSetup = true;\n        this.style.visibility = 'visible';\n      });\n    });\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    // Only re-setup if actionsData changed and we've already done initial setup\n    if (\n      this.isSetup &&\n      changedProperties.has('actionsData') &&\n      !changedProperties.has('hiddenItems')\n    ) {\n      this.updateComplete.then(() => {\n        requestAnimationFrame(() => this.setupOverflowDetection());\n      });\n    }\n  }\n\n  private setupOverflowDetection() {\n    if (!this.itemsContainer) {\n      return;\n    }\n\n    // Disconnect existing observer if any\n    this.resizeObserver?.disconnect();\n\n    // Get slotted elements\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;\n\n    const checkOverflow = () => {\n      const slottedElements = slot?.assignedElements() as HTMLElement[];\n\n      if (!slottedElements || slottedElements.length === 0) {\n        return;\n      }\n\n      // Use the host element's width as it reflects the actual available space\n      const containerWidth =\n        this.offsetWidth || this.itemsContainer.clientWidth;\n      const overflowMenuWidth = 48; // Approximate width of overflow menu button\n\n      // If container has no width yet, skip check\n      if (containerWidth === 0) {\n        return;\n      }\n\n      // Prevent resize loop - only recalculate if width changed significantly (>5px)\n      if (Math.abs(containerWidth - this.lastContainerWidth) < 5) {\n        return;\n      }\n      this.lastContainerWidth = containerWidth;\n\n      // First, check if all items fit without overflow menu\n      let totalWidth = 0;\n      for (let i = 0; i < slottedElements.length; i++) {\n        totalWidth += slottedElements[i].offsetWidth;\n      }\n\n      // If all items fit, show all and hide overflow menu\n      if (totalWidth <= containerWidth) {\n        slottedElements.forEach((el) => {\n          el.removeAttribute('data-hidden');\n        });\n        this.hiddenItems = [];\n        return;\n      }\n\n      // Items don't fit, calculate how many can fit with overflow menu\n      totalWidth = 0;\n      let visibleCount = 0;\n\n      for (let i = 0; i < slottedElements.length; i++) {\n        const itemWidth = slottedElements[i].offsetWidth;\n\n        // Check if this item plus overflow menu would fit\n        if (totalWidth + itemWidth + overflowMenuWidth <= containerWidth) {\n          totalWidth += itemWidth;\n          visibleCount = i + 1;\n        } else {\n          break;\n        }\n      }\n\n      // Update visibility\n      slottedElements.forEach((el, index) => {\n        if (index >= visibleCount) {\n          el.setAttribute('data-hidden', '');\n        } else {\n          el.removeAttribute('data-hidden');\n        }\n      });\n\n      // Update hidden items for overflow menu\n      this.hiddenItems = this.actionsData?.slice(visibleCount) || [];\n    };\n\n    // Initial check\n    checkOverflow();\n\n    // Observe both the host element and items container for size changes with debouncing\n    this.resizeObserver = new ResizeObserver(() => {\n      // Clear existing timeout\n      if (this.resizeTimeout) {\n        clearTimeout(this.resizeTimeout);\n      }\n\n      // Debounce the check to prevent rapid recalculations\n      this.resizeTimeout = window.setTimeout(() => {\n        checkOverflow();\n      }, 100);\n    });\n\n    this.resizeObserver.observe(this);\n    this.resizeObserver.observe(this.itemsContainer);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    if (this.resizeTimeout) {\n      clearTimeout(this.resizeTimeout);\n    }\n  }\n\n  private handleOverflowItemClick(index: number) {\n    // Get the slot and find the corresponding slotted element\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;\n    const slottedElements = slot?.assignedElements() as HTMLElement[];\n    const hiddenIndex =\n      this.actionsData.length - this.hiddenItems.length + index;\n    const button = slottedElements[hiddenIndex];\n    if (button) {\n      button.click();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"${blockClass}\">\n        <div class=\"${blockClass}__items\">\n          <slot></slot>\n        </div>\n\n        <div data-offset ?data-hidden=${this.hiddenItems.length === 0}>\n          <cds-overflow-menu\n            size=\"md\"\n            close-on-activation\n            enter-delay-ms=\"0\"\n            leave-delay-ms=\"0\"\n            align=\"left\"\n            data-floating-menu-container\n          >\n            ${iconLoader(OverflowMenuVertical16, {\n              class: `${blockClass}__overflow-svg`,\n              slot: 'icon',\n            })}\n            <span slot=\"tooltip-content\">More actions</span>\n            <cds-overflow-menu-body flipped>\n              ${repeat(\n                this.hiddenItems ?? [],\n                (_item, index) => index,\n                (item, index) => html`\n                  <cds-overflow-menu-item\n                    @click=\"${() => this.handleOverflowItemClick(index)}\"\n                  >\n                    ${item.label}\n                  </cds-overflow-menu-item>\n                `\n              )}\n            </cds-overflow-menu-body>\n          </cds-overflow-menu>\n        </div>\n      </div>\n    `;\n  }\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-actions-set': CDSPageHeaderActionsSet;\n  }\n}\n"],"mappings":"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"}

package/es/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-breadcrumbs-set.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,0DAA0D,CAAC;AAClE,OAAO,6DAA6D,CAAC;AAIrE,OAAO,sBAAsB,CAAC;AAE9B,OAAO,iCAAiC,CAAC;AAKzC,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,MAAM,CAAC,OAAO,OAAO,2BAA4B,SAAQ,UAAU;IACjE;;OAEG;IAEH,WAAW,EAAE,UAAU,EAAE,CAAM;IAE/B;;OAEG;IAEH,eAAe,EAAE,UAAU,EAAE,CAAM;IAEnC;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC,OAAO,CAAC,eAAe,CAAyC;IAEhE,iBAAiB,IAAI,IAAI;IAKzB,YAAY;IA6CZ,oBAAoB;IAOpB,MAAM;IAsDN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,2BAA2B,CAAC;KAChE;CACF"}
+{"version":3,"file":"page-header-breadcrumbs-set.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,0DAA0D,CAAC;AAClE,OAAO,6DAA6D,CAAC;AAIrE,OAAO,sBAAsB,CAAC;AAE9B,OAAO,iCAAiC,CAAC;AAKzC,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,MAAM,CAAC,OAAO,OAAO,2BAA4B,SAAQ,UAAU;IACjE;;OAEG;IAEH,WAAW,EAAE,UAAU,EAAE,CAAM;IAE/B;;OAEG;IAEH,eAAe,EAAE,UAAU,EAAE,CAAM;IAEnC;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC,OAAO,CAAC,eAAe,CAAyC;IAEhE,iBAAiB,IAAI,IAAI;IAKzB,YAAY;IA6CZ,oBAAoB;IAOpB,MAAM;IAsDN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,2BAA2B,CAAC;KAChE;CACF"}

package/es/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.js

@@ -13,7 +13,8 @@ import "../page-header-title-breadcrumb.js";
 import page_header_breadcrumbs_set_default$1 from "./page-header-breadcrumbs-set.scss.js";
 import { classMap } from "lit/directives/class-map.js";
 import { LitElement, html } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
+import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
 import { repeat } from "lit/directives/repeat.js";
 import "@carbon/web-components/es/components/breadcrumb/index.js";
@@ -127,7 +128,7 @@ __decorate([property({
 })], CDSPageHeaderBreadcrumbsSet.prototype, "breadcrumbsData", void 0);
 __decorate([property({ type: String })], CDSPageHeaderBreadcrumbsSet.prototype, "title", void 0);
 __decorate([query(`.${blockClass}`)], CDSPageHeaderBreadcrumbsSet.prototype, "container", void 0);
-CDSPageHeaderBreadcrumbsSet = __decorate([customElement(`c4p-page-header-breadcrumbs-set`)], CDSPageHeaderBreadcrumbsSet);
+CDSPageHeaderBreadcrumbsSet = __decorate([carbonElement(`c4p-page-header-breadcrumbs-set`)], CDSPageHeaderBreadcrumbsSet);
 var page_header_breadcrumbs_set_default = CDSPageHeaderBreadcrumbsSet;
 //#endregion
 export { page_header_breadcrumbs_set_default as default };

package/es/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-breadcrumbs-set.js","names":["styles"],"sources":["../../../../src/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.ts"],"sourcesContent":["// cspell:words currentpage\n/**\n * @license\n *\n * Copyright IBM Corp. 2025, 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 { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@carbon/web-components/es/components/breadcrumb/index.js';\nimport '@carbon/web-components/es/components/overflow-menu/index.js';\nimport { createOverflowHandler } from '../utils';\nimport OverflowMenuHorizontal16 from '@carbon/icons/es/overflow-menu--horizontal/16.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport '../../truncated-text';\nimport styles from './page-header-breadcrumbs-set.scss?lit';\nimport '../page-header-title-breadcrumb';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-breadcrumbs-set`;\n\ninterface Breadcrumb {\n  text: string;\n  href: string;\n}\n\n@customElement(`${prefix}-page-header-breadcrumbs-set`)\nexport default class CDSPageHeaderBreadcrumbsSet extends LitElement {\n  /**\n   * Hidden items that will be rendered in the overflow menu.\n   */\n  @property({ type: Array })\n  hiddenItems: Breadcrumb[] = [];\n\n  /**\n   * The list of breadcrumbs.\n   */\n  @property({ type: Array, attribute: 'breadcrumbs-data', reflect: true })\n  breadcrumbsData: Breadcrumb[] = [];\n\n  /**\n   * The page title to display in the title breadcrumb.\n   */\n  @property({ type: String })\n  title = '';\n\n  /**\n   * Container holding all breadcrumbs and the overflow menu.\n   */\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  private overflowHandler: { disconnect: () => void } | undefined;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    if (!this.container) {\n      return;\n    }\n    const sr = this.shadowRoot;\n    const breadcrumb = sr?.querySelector(\n      'cds-breadcrumb'\n    ) as HTMLElement | null;\n\n    if (breadcrumb) {\n      breadcrumb.style.display = 'block';\n\n      requestAnimationFrame(() => {\n        const ol = breadcrumb.shadowRoot?.querySelector(\n          'ol'\n        ) as HTMLElement | null;\n        if (ol) {\n          ol.style.display = 'flex';\n          ol.style.flexWrap = 'unset';\n        }\n      });\n    }\n\n    this.updateComplete.then(() => {\n      requestAnimationFrame(() => {\n        this.overflowHandler = createOverflowHandler({\n          offsetValue: 14,\n          container: this.container,\n          onChange: (visibleItems: HTMLElement[], _) => {\n            const totalItems = (this.breadcrumbsData?.length ?? 1) - 1; // Exclude last item\n            const hiddenCount = totalItems - visibleItems.length;\n            this.hiddenItems =\n              this.breadcrumbsData?.slice(0, hiddenCount) ?? [];\n          },\n        });\n      });\n    });\n    // On first render, all elements are initially visible. so hiding `this` visibility in connectedCallback\n    // The handler runs on the second render to hide specific elements as needed.\n    // The following line restores visibility after layout settles, allowing for smoother transitions.\n    setTimeout(() => {\n      this.style.visibility = 'visible';\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.overflowHandler) {\n      this.overflowHandler.disconnect();\n    }\n  }\n\n  render() {\n    return html`\n      <cds-breadcrumb\n        aria-label=\"breadcrumbs\"\n        class=${classMap({\n          [`${blockClass}`]: true,\n        })}\n      >\n        <cds-breadcrumb-item\n          data-fixed\n          data-offset\n          style=\"display: ${this.hiddenItems?.length >= 1 ? 'flex' : 'none'}\"\n        >\n          <cds-overflow-menu breadcrumb=\"\" align=\"bottom\">\n            ${iconLoader(OverflowMenuHorizontal16, {\n              slot: 'icon',\n            })}\n            <span slot=\"tooltip-content\"> Breadcrumbs </span>\n            <cds-overflow-menu-body size=\"sm\">\n              ${repeat(\n                this.hiddenItems ?? [],\n                (item) => item.href ?? item.text,\n                (item) => html`\n                  <cds-overflow-menu-item href=${item.href}>\n                    ${item.text}\n                  </cds-overflow-menu-item>\n                `\n              )}\n            </cds-overflow-menu-body>\n          </cds-overflow-menu>\n        </cds-breadcrumb-item>\n        ${repeat(\n          this.breadcrumbsData?.slice(this.hiddenItems?.length ?? 0, -1) ?? [],\n          (item) => item.href ?? item.text,\n          (item) => html`\n            <cds-breadcrumb-item>\n              <cds-breadcrumb-link href=\"${item.href}\">\n                ${item.text}\n              </cds-breadcrumb-link>\n            </cds-breadcrumb-item>\n          `\n        )}\n        <c4p-page-header-title-breadcrumb data-fixed>\n          <cds-breadcrumb-link is-currentpage=\"\">\n            <c4p-truncated-text\n              value=\"${this.title}\"\n              lines=\"1\"\n              autoalign\n            ></c4p-truncated-text>\n          </cds-breadcrumb-link>\n        </c4p-page-header-title-breadcrumb>\n      </cds-breadcrumb>\n    `;\n  }\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-breadcrumbs-set': CDSPageHeaderBreadcrumbsSet;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,aAAa;AAQJ,IAAA,8BAAA,MAAM,oCAAoC,WAAW;;;qBAKtC,EAAE;yBAME,EAAE;eAM1B;;CAUR,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,MAAM,aAAa;;CAG1B,eAAe;AACb,MAAI,CAAC,KAAK,UACR;EAGF,MAAM,aADK,KAAK,YACO,cACrB,iBACD;AAED,MAAI,YAAY;AACd,cAAW,MAAM,UAAU;AAE3B,+BAA4B;IAC1B,MAAM,KAAK,WAAW,YAAY,cAChC,KACD;AACD,QAAI,IAAI;AACN,QAAG,MAAM,UAAU;AACnB,QAAG,MAAM,WAAW;;KAEtB;;AAGJ,OAAK,eAAe,WAAW;AAC7B,+BAA4B;AAC1B,SAAK,kBAAkB,sBAAsB;KAC3C,aAAa;KACb,WAAW,KAAK;KAChB,WAAW,cAA6B,MAAM;MAE5C,MAAM,eADc,KAAK,iBAAiB,UAAU,KAAK,IACxB,aAAa;AAC9C,WAAK,cACH,KAAK,iBAAiB,MAAM,GAAG,YAAY,IAAI,EAAE;;KAEtD,CAAC;KACF;IACF;AAIF,mBAAiB;AACf,QAAK,MAAM,aAAa;IACxB;;CAGJ,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,MAAI,KAAK,gBACP,MAAK,gBAAgB,YAAY;;CAIrC,SAAS;AACP,SAAO,IAAI;;;gBAGC,SAAS,GACd,GAAG,eAAe,MACpB,CAAC,CAAC;;;;;4BAKiB,KAAK,aAAa,UAAU,IAAI,SAAS,OAAO;;;cAG9D,WAAW,0BAA0B,EACrC,MAAM,QACP,CAAC,CAAC;;;gBAGC,OACA,KAAK,eAAe,EAAE,GACrB,SAAS,KAAK,QAAQ,KAAK,OAC3B,SAAS,IAAI;iDACmB,KAAK,KAAK;sBACrC,KAAK,KAAK;;kBAGjB,CAAC;;;;UAIN,OACA,KAAK,iBAAiB,MAAM,KAAK,aAAa,UAAU,GAAG,GAAG,IAAI,EAAE,GACnE,SAAS,KAAK,QAAQ,KAAK,OAC3B,SAAS,IAAI;;2CAEmB,KAAK,KAAK;kBACnC,KAAK,KAAK;;;YAInB,CAAC;;;;uBAIa,KAAK,MAAM;;;;;;;;;;gBAShBA;;;YAtIf,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,EAAA,4BAAA,WAAA,eAAA,KAAA,EAAA;YAMzB,SAAS;CAAE,MAAM;CAAO,WAAW;CAAoB,SAAS;CAAM,CAAC,CAAA,EAAA,4BAAA,WAAA,mBAAA,KAAA,EAAA;YAMvE,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,4BAAA,WAAA,SAAA,KAAA,EAAA;YAM1B,MAAM,IAAI,aAAa,CAAA,EAAA,4BAAA,WAAA,aAAA,KAAA,EAAA;0CAvBzB,cAAc,kCAAwC,CAAA,EAAA,4BAAA"}
+{"version":3,"file":"page-header-breadcrumbs-set.js","names":["styles","customElement"],"sources":["../../../../src/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.ts"],"sourcesContent":["// cspell:words currentpage\n/**\n * @license\n *\n * Copyright IBM Corp. 2025, 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 } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es/components/breadcrumb/index.js';\nimport '@carbon/web-components/es/components/overflow-menu/index.js';\nimport { createOverflowHandler } from '../utils';\nimport OverflowMenuHorizontal16 from '@carbon/icons/es/overflow-menu--horizontal/16.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport '../../truncated-text';\nimport styles from './page-header-breadcrumbs-set.scss?lit';\nimport '../page-header-title-breadcrumb';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-breadcrumbs-set`;\n\ninterface Breadcrumb {\n  text: string;\n  href: string;\n}\n\n@customElement(`${prefix}-page-header-breadcrumbs-set`)\nexport default class CDSPageHeaderBreadcrumbsSet extends LitElement {\n  /**\n   * Hidden items that will be rendered in the overflow menu.\n   */\n  @property({ type: Array })\n  hiddenItems: Breadcrumb[] = [];\n\n  /**\n   * The list of breadcrumbs.\n   */\n  @property({ type: Array, attribute: 'breadcrumbs-data', reflect: true })\n  breadcrumbsData: Breadcrumb[] = [];\n\n  /**\n   * The page title to display in the title breadcrumb.\n   */\n  @property({ type: String })\n  title = '';\n\n  /**\n   * Container holding all breadcrumbs and the overflow menu.\n   */\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  private overflowHandler: { disconnect: () => void } | undefined;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    if (!this.container) {\n      return;\n    }\n    const sr = this.shadowRoot;\n    const breadcrumb = sr?.querySelector(\n      'cds-breadcrumb'\n    ) as HTMLElement | null;\n\n    if (breadcrumb) {\n      breadcrumb.style.display = 'block';\n\n      requestAnimationFrame(() => {\n        const ol = breadcrumb.shadowRoot?.querySelector(\n          'ol'\n        ) as HTMLElement | null;\n        if (ol) {\n          ol.style.display = 'flex';\n          ol.style.flexWrap = 'unset';\n        }\n      });\n    }\n\n    this.updateComplete.then(() => {\n      requestAnimationFrame(() => {\n        this.overflowHandler = createOverflowHandler({\n          offsetValue: 14,\n          container: this.container,\n          onChange: (visibleItems: HTMLElement[], _) => {\n            const totalItems = (this.breadcrumbsData?.length ?? 1) - 1; // Exclude last item\n            const hiddenCount = totalItems - visibleItems.length;\n            this.hiddenItems =\n              this.breadcrumbsData?.slice(0, hiddenCount) ?? [];\n          },\n        });\n      });\n    });\n    // On first render, all elements are initially visible. so hiding `this` visibility in connectedCallback\n    // The handler runs on the second render to hide specific elements as needed.\n    // The following line restores visibility after layout settles, allowing for smoother transitions.\n    setTimeout(() => {\n      this.style.visibility = 'visible';\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.overflowHandler) {\n      this.overflowHandler.disconnect();\n    }\n  }\n\n  render() {\n    return html`\n      <cds-breadcrumb\n        aria-label=\"breadcrumbs\"\n        class=${classMap({\n          [`${blockClass}`]: true,\n        })}\n      >\n        <cds-breadcrumb-item\n          data-fixed\n          data-offset\n          style=\"display: ${this.hiddenItems?.length >= 1 ? 'flex' : 'none'}\"\n        >\n          <cds-overflow-menu breadcrumb=\"\" align=\"bottom\">\n            ${iconLoader(OverflowMenuHorizontal16, {\n              slot: 'icon',\n            })}\n            <span slot=\"tooltip-content\"> Breadcrumbs </span>\n            <cds-overflow-menu-body size=\"sm\">\n              ${repeat(\n                this.hiddenItems ?? [],\n                (item) => item.href ?? item.text,\n                (item) => html`\n                  <cds-overflow-menu-item href=${item.href}>\n                    ${item.text}\n                  </cds-overflow-menu-item>\n                `\n              )}\n            </cds-overflow-menu-body>\n          </cds-overflow-menu>\n        </cds-breadcrumb-item>\n        ${repeat(\n          this.breadcrumbsData?.slice(this.hiddenItems?.length ?? 0, -1) ?? [],\n          (item) => item.href ?? item.text,\n          (item) => html`\n            <cds-breadcrumb-item>\n              <cds-breadcrumb-link href=\"${item.href}\">\n                ${item.text}\n              </cds-breadcrumb-link>\n            </cds-breadcrumb-item>\n          `\n        )}\n        <c4p-page-header-title-breadcrumb data-fixed>\n          <cds-breadcrumb-link is-currentpage=\"\">\n            <c4p-truncated-text\n              value=\"${this.title}\"\n              lines=\"1\"\n              autoalign\n            ></c4p-truncated-text>\n          </cds-breadcrumb-link>\n        </c4p-page-header-title-breadcrumb>\n      </cds-breadcrumb>\n    `;\n  }\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-breadcrumbs-set': CDSPageHeaderBreadcrumbsSet;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,aAAa;AAQJ,IAAA,8BAAA,MAAM,oCAAoC,WAAW;;;qBAKtC,EAAE;yBAME,EAAE;eAM1B;;CAUR,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,MAAM,aAAa;;CAG1B,eAAe;AACb,MAAI,CAAC,KAAK,UACR;EAGF,MAAM,aADK,KAAK,YACO,cACrB,iBACD;AAED,MAAI,YAAY;AACd,cAAW,MAAM,UAAU;AAE3B,+BAA4B;IAC1B,MAAM,KAAK,WAAW,YAAY,cAChC,KACD;AACD,QAAI,IAAI;AACN,QAAG,MAAM,UAAU;AACnB,QAAG,MAAM,WAAW;;KAEtB;;AAGJ,OAAK,eAAe,WAAW;AAC7B,+BAA4B;AAC1B,SAAK,kBAAkB,sBAAsB;KAC3C,aAAa;KACb,WAAW,KAAK;KAChB,WAAW,cAA6B,MAAM;MAE5C,MAAM,eADc,KAAK,iBAAiB,UAAU,KAAK,IACxB,aAAa;AAC9C,WAAK,cACH,KAAK,iBAAiB,MAAM,GAAG,YAAY,IAAI,EAAE;;KAEtD,CAAC;KACF;IACF;AAIF,mBAAiB;AACf,QAAK,MAAM,aAAa;IACxB;;CAGJ,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,MAAI,KAAK,gBACP,MAAK,gBAAgB,YAAY;;CAIrC,SAAS;AACP,SAAO,IAAI;;;gBAGC,SAAS,GACd,GAAG,eAAe,MACpB,CAAC,CAAC;;;;;4BAKiB,KAAK,aAAa,UAAU,IAAI,SAAS,OAAO;;;cAG9D,WAAW,0BAA0B,EACrC,MAAM,QACP,CAAC,CAAC;;;gBAGC,OACA,KAAK,eAAe,EAAE,GACrB,SAAS,KAAK,QAAQ,KAAK,OAC3B,SAAS,IAAI;iDACmB,KAAK,KAAK;sBACrC,KAAK,KAAK;;kBAGjB,CAAC;;;;UAIN,OACA,KAAK,iBAAiB,MAAM,KAAK,aAAa,UAAU,GAAG,GAAG,IAAI,EAAE,GACnE,SAAS,KAAK,QAAQ,KAAK,OAC3B,SAAS,IAAI;;2CAEmB,KAAK,KAAK;kBACnC,KAAK,KAAK;;;YAInB,CAAC;;;;uBAIa,KAAK,MAAM;;;;;;;;;;gBAShBA;;;YAtIf,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,EAAA,4BAAA,WAAA,eAAA,KAAA,EAAA;YAMzB,SAAS;CAAE,MAAM;CAAO,WAAW;CAAoB,SAAS;CAAM,CAAC,CAAA,EAAA,4BAAA,WAAA,mBAAA,KAAA,EAAA;YAMvE,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,4BAAA,WAAA,SAAA,KAAA,EAAA;YAM1B,MAAM,IAAI,aAAa,CAAA,EAAA,4BAAA,WAAA,aAAA,KAAA,EAAA;0CAvBzBC,cAAc,kCAAwC,CAAA,EAAA,4BAAA"}

package/es/components/page-header/page-header-scroller.js

@@ -17,8 +17,8 @@ import { carbonElement } from "@carbon/web-components/es/globals/decorators/carb
 import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
 import Chevron20 from "@carbon/icons/es/chevron--up/20";
 import CDSButton from "@carbon/web-components/es/components/button/button";
-import ChevronDown20 from "@carbon/icons/es/chevron--down/20";
 import { consume } from "@lit/context";
+import ChevronDown20 from "@carbon/icons/es/chevron--down/20";
 //#region src/components/page-header/page-header-scroller.ts
 /**
 * @license

package/es/components/page-header/page-header-tags-set/page-header-tags-set.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-tags-set.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/page-header-tags-set/page-header-tags-set.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAEhD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,oDAAoD,CAAC;AAC5D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,sDAAsD,CAAC;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAOlC,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,UAAU;IAE1D,UAAU,EAAE,OAAO,EAAE,CAAM;IAG3B,QAAQ,EAAE,OAAO,EAAE,CAAM;IAGzB,OAAO,CAAC,SAAS,CAAe;IAGhC,OAAO,CAAC,MAAM,CAAe;IAG7B,OAAO,CAAC,aAAa,CAAS;IAG9B,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,YAAY,CAAM;IAE1B,OAAO,CAAC,eAAe,CAAyC;IAChE,OAAO,CAAC,cAAc,CAA6B;IAEnD,iBAAiB,IAAI,IAAI;IAKzB,YAAY;IAkBZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAmB/C,oBAAoB;IAOpB,OAAO,CAAC,oBAAoB;IAyB5B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,aAAa,CAenB;IAEF,MAAM;IA6HN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,oBAAoB,CAAC;KAClD;CACF"}
+{"version":3,"file":"page-header-tags-set.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/page-header-tags-set/page-header-tags-set.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAGhD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,oDAAoD,CAAC;AAC5D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,sDAAsD,CAAC;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAOlC,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,UAAU;IAE1D,UAAU,EAAE,OAAO,EAAE,CAAM;IAG3B,QAAQ,EAAE,OAAO,EAAE,CAAM;IAGzB,OAAO,CAAC,SAAS,CAAe;IAGhC,OAAO,CAAC,MAAM,CAAe;IAG7B,OAAO,CAAC,aAAa,CAAS;IAG9B,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,YAAY,CAAM;IAE1B,OAAO,CAAC,eAAe,CAAyC;IAChE,OAAO,CAAC,cAAc,CAA6B;IAEnD,iBAAiB,IAAI,IAAI;IAKzB,YAAY;IAkBZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAmB/C,oBAAoB;IAOpB,OAAO,CAAC,oBAAoB;IAyB5B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,aAAa,CAenB;IAEF,MAAM;IA6HN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,oBAAoB,CAAC;KAClD;CACF"}

package/es/components/page-header/page-header-tags-set/page-header-tags-set.js

@@ -9,7 +9,8 @@ import "../../../globals/settings.js";
 import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
 import page_header_tags_set_default$1 from "./page-header-tags-set.scss.js";
 import { LitElement, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
+import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import "@carbon/web-components/es/components/modal/index.js";
 import "@carbon/web-components/es/components/link/index.js";
 import { createOverflowHandler } from "@carbon/utilities";
@@ -201,7 +202,7 @@ __decorate([query("[data-offset]")], CDSPageHeaderTagsSet.prototype, "offset", v
 __decorate([state()], CDSPageHeaderTagsSet.prototype, "isPopoverOpen", void 0);
 __decorate([state()], CDSPageHeaderTagsSet.prototype, "modalOpen", void 0);
 __decorate([state()], CDSPageHeaderTagsSet.prototype, "searchString", void 0);
-CDSPageHeaderTagsSet = __decorate([customElement(`c4p-page-header-tags-set`)], CDSPageHeaderTagsSet);
+CDSPageHeaderTagsSet = __decorate([carbonElement(`c4p-page-header-tags-set`)], CDSPageHeaderTagsSet);
 var page_header_tags_set_default = CDSPageHeaderTagsSet;
 //#endregion
 export { page_header_tags_set_default as default };

package/es/components/page-header/page-header-tags-set/page-header-tags-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-tags-set.js","names":["styles"],"sources":["../../../../src/components/page-header/page-header-tags-set/page-header-tags-set.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 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, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport '@carbon/web-components/es/components/tag/index.js';\nimport '@carbon/web-components/es/components/link/index.js';\nimport '@carbon/web-components/es/components/modal/index.js';\nimport '@carbon/web-components/es/components/search/index.js';\nimport { createOverflowHandler } from '@carbon/utilities';\nimport { TagType } from './utils';\nimport styles from './page-header-tags-set.scss?lit';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-tags-set`;\n\n@customElement(`${prefix}-page-header-tags-set`)\nexport default class CDSPageHeaderTagsSet extends LitElement {\n  @state()\n  hiddenTags: TagType[] = [];\n\n  @property({ type: Array, attribute: 'tags-data', reflect: true })\n  tagsData: TagType[] = [];\n\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  @query('[data-offset]')\n  private offset!: HTMLElement;\n\n  @state()\n  private isPopoverOpen = false;\n\n  @state()\n  private modalOpen = false;\n\n  @state()\n  private searchString = '';\n\n  private overflowHandler: { disconnect: () => void } | undefined;\n  private resizeObserver: ResizeObserver | undefined; // only for observing width changes of offset\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    // setup overflow handler by observing offset by default\n    // dynamic changes in offset sizes re-initializes the handler to account for the new offset size\n    this.resizeObserver = new ResizeObserver(() => {\n      this.setupOverflowHandler();\n    });\n    this.resizeObserver.observe(this.offset);\n\n    // On first render, all elements are initially visible. so hiding `this` visibility in connectedCallback\n    // The handler runs on the second render to hide specific elements as needed.\n    // The following line restores visibility after layout settles, allowing for smoother transitions.\n    setTimeout(() => {\n      this.style.visibility = 'visible';\n    });\n\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    // setup overflow handler whenever tags data changes to account for the new item sizes\n    if (changedProperties.has('tagsData')) {\n      const previousIsPopoverOpen = this.isPopoverOpen;\n      this.updateComplete.then(() => {\n        this.hiddenTags = [];\n        this.isPopoverOpen = previousIsPopoverOpen;\n        this.setupOverflowHandler();\n      });\n    }\n\n    if (!this.hiddenTags.length) {\n      const lastItem = this.shadowRoot?.querySelector(\n        '[data-hidden]:not([data-offset])'\n      );\n      lastItem?.removeAttribute('data-hidden');\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.overflowHandler?.disconnect();\n    this.resizeObserver?.disconnect();\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  private setupOverflowHandler() {\n    if (!this.container) {\n      return;\n    }\n\n    // Disconnect existing handler if any\n    this.overflowHandler?.disconnect();\n\n    this.overflowHandler = createOverflowHandler({\n      container: this.container,\n      onChange: (_, hiddenItems: HTMLElement[]) => {\n        const filteredChildren = Array.from(this.container.children).filter(\n          (child) =>\n            !child.hasAttribute('data-offset') &&\n            !child.hasAttribute('data-fixed')\n        );\n\n        this.hiddenTags = hiddenItems.map((hiddenItem) => {\n          const index = filteredChildren.indexOf(hiddenItem);\n          return this.tagsData[index];\n        });\n      },\n    });\n  }\n\n  private handleTogglePopover(event: Event) {\n    if (\n      event instanceof PointerEvent ||\n      (event instanceof KeyboardEvent && [' ', 'Enter'].includes(event.key))\n    ) {\n      this.isPopoverOpen = !this.isPopoverOpen;\n    }\n  }\n\n  private handleDocumentClick = (event: Event) => {\n    if (event.target !== this) {\n      this.isPopoverOpen = false;\n    }\n  };\n\n  private handleDismiss = (e: CustomEvent, tag: TagType) => {\n    e.stopPropagation();\n    e.preventDefault();\n\n    this.tagsData = this.tagsData.filter((t) => t.text !== tag.text);\n    this.shadowRoot\n      ?.querySelectorAll('[data-hidden]:not([data-offset])')\n      .forEach((el) => el.removeAttribute('data-hidden'));\n\n    const remaining = this.hiddenTags.filter((t) => t.text !== tag.text);\n    if (this.hiddenTags.length === 2 && remaining[0]) {\n      this.shadowRoot\n        ?.querySelector(`#${remaining[0].text}`)\n        ?.removeAttribute('data-hidden');\n    }\n  };\n\n  render() {\n    return html` <div class=${blockClass}>\n        ${this.tagsData.map(\n          (tag) => html`\n            <span id=${tag?.text}>\n              ${tag?.onClose\n                ? html`<cds-dismissible-tag\n                    @cds-dismissible-tag-beingclosed=${(e: CustomEvent) =>\n                      this.handleDismiss(e, tag)}\n                    text=${tag?.text}\n                    tag-title=\"Provide a custom title to the tag\"\n                    type=${tag.type}\n                    size=${tag.size}\n                  ></cds-dismissible-tag>`\n                : html`<cds-tag type=${tag.type} size=${tag.size}\n                    >${tag?.text}</cds-tag\n                  >`}\n            </span>\n          `\n        )}\n        <span data-offset ?data-hidden=${this.hiddenTags.length === 0}>\n          <cds-popover\n            ?open=${this.isPopoverOpen}\n            ?highContrast=${true}\n            align=${document.dir === 'rtl' ? 'bottom-left' : 'bottom-right'}\n          >\n            <cds-operational-tag\n              size=${this.tagsData[0]?.size}\n              title=\"+${this.hiddenTags.length}\"\n              text=\"+${this.hiddenTags.length}\"\n              @click=${this.handleTogglePopover}\n              @keydown=${this.handleTogglePopover}\n            ></cds-operational-tag>\n            <cds-popover-content>\n              <div class=\"${`${blockClass}__popover-container`}\">\n                ${this.hiddenTags.length > 0\n                  ? this.hiddenTags.slice(0, 10).map((tag) =>\n                      tag.onClose\n                        ? html`\n                            <div>\n                              <cds-dismissible-tag\n                                @cds-dismissible-tag-beingclosed=${(\n                                  e: CustomEvent\n                                ) => this.handleDismiss(e, tag)}\n                                text=${tag?.text}\n                                tag-title=\"Provide a custom title to the tag\"\n                                type=${tag.type}\n                                size=${tag.size}\n                              ></cds-dismissible-tag>\n                            </div>\n                          `\n                        : html`<p class=\"${blockClass}__popover-tag\">\n                            ${tag?.text}\n                          </p>`\n                    )\n                  : nothing}\n                ${this.hiddenTags.length > 10\n                  ? html`\n                      <cds-link\n                        class=\"${blockClass}__view-all\"\n                        @click=${() => (this.modalOpen = true)}\n                        @keydown=${(e: KeyboardEvent) => {\n                          if (e.key === ' ') {\n                            this.modalOpen = true;\n                          }\n                        }}\n                      >\n                        View all tags\n                      </cds-link>\n                    `\n                  : nothing}\n              </div>\n            </cds-popover-content>\n          </cds-popover>\n        </span>\n      </div>\n      ${this.hiddenTags.length > 10\n        ? html`<cds-modal\n            ?open=${this.modalOpen}\n            size=\"sm\"\n            @cds-modal-closed=${(_: CustomEvent) => (this.modalOpen = false)}\n          >\n            <cds-modal-header>\n              <cds-modal-close-button></cds-modal-close-button>\n              <cds-modal-heading>All tags</cds-modal-heading>\n              <cds-search\n                size=\"lg\"\n                close-button-label-text=\"Clear search input\"\n                value=\"${this.searchString}\"\n                class=\"${blockClass}__modal-tags-search\"\n                label-text=\"Search\"\n                placeholder=\"Search all tags\"\n                type=\"text\"\n                @cds-search-input=${(e: CustomEvent) =>\n                  (this.searchString = e.detail.value)}\n              ></cds-search>\n            </cds-modal-header>\n            <cds-modal-body>\n              <div class=\"${blockClass}__modal-tags-container\">\n                ${this.tagsData\n                  .filter(\n                    (tag) =>\n                      tag.text &&\n                      new RegExp(this.searchString, 'i').test(tag.text)\n                  )\n                  .map((tag) =>\n                    tag.onClose\n                      ? html`<cds-dismissible-tag\n                          @cds-dismissible-tag-beingclosed=${(e: CustomEvent) =>\n                            this.handleDismiss(e, tag)}\n                          text=${tag?.text}\n                          tag-title=\"Provide a custom title to the tag\"\n                          type=${tag.type}\n                          size=${tag.size}\n                        ></cds-dismissible-tag>`\n                      : html`<cds-tag type=${tag.type} size=${tag.size}\n                          >${tag?.text}</cds-tag\n                        >`\n                  )}\n              </div>\n            </cds-modal-body>\n          </cds-modal>`\n        : nothing}`;\n  }\n\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-tags-set': CDSPageHeaderTagsSet;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"page-header-tags-set.js","names":["styles","customElement"],"sources":["../../../../src/components/page-header/page-header-tags-set/page-header-tags-set.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 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, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es/components/tag/index.js';\nimport '@carbon/web-components/es/components/link/index.js';\nimport '@carbon/web-components/es/components/modal/index.js';\nimport '@carbon/web-components/es/components/search/index.js';\nimport { createOverflowHandler } from '@carbon/utilities';\nimport { TagType } from './utils';\nimport styles from './page-header-tags-set.scss?lit';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-tags-set`;\n\n@customElement(`${prefix}-page-header-tags-set`)\nexport default class CDSPageHeaderTagsSet extends LitElement {\n  @state()\n  hiddenTags: TagType[] = [];\n\n  @property({ type: Array, attribute: 'tags-data', reflect: true })\n  tagsData: TagType[] = [];\n\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  @query('[data-offset]')\n  private offset!: HTMLElement;\n\n  @state()\n  private isPopoverOpen = false;\n\n  @state()\n  private modalOpen = false;\n\n  @state()\n  private searchString = '';\n\n  private overflowHandler: { disconnect: () => void } | undefined;\n  private resizeObserver: ResizeObserver | undefined; // only for observing width changes of offset\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    // setup overflow handler by observing offset by default\n    // dynamic changes in offset sizes re-initializes the handler to account for the new offset size\n    this.resizeObserver = new ResizeObserver(() => {\n      this.setupOverflowHandler();\n    });\n    this.resizeObserver.observe(this.offset);\n\n    // On first render, all elements are initially visible. so hiding `this` visibility in connectedCallback\n    // The handler runs on the second render to hide specific elements as needed.\n    // The following line restores visibility after layout settles, allowing for smoother transitions.\n    setTimeout(() => {\n      this.style.visibility = 'visible';\n    });\n\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    // setup overflow handler whenever tags data changes to account for the new item sizes\n    if (changedProperties.has('tagsData')) {\n      const previousIsPopoverOpen = this.isPopoverOpen;\n      this.updateComplete.then(() => {\n        this.hiddenTags = [];\n        this.isPopoverOpen = previousIsPopoverOpen;\n        this.setupOverflowHandler();\n      });\n    }\n\n    if (!this.hiddenTags.length) {\n      const lastItem = this.shadowRoot?.querySelector(\n        '[data-hidden]:not([data-offset])'\n      );\n      lastItem?.removeAttribute('data-hidden');\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.overflowHandler?.disconnect();\n    this.resizeObserver?.disconnect();\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  private setupOverflowHandler() {\n    if (!this.container) {\n      return;\n    }\n\n    // Disconnect existing handler if any\n    this.overflowHandler?.disconnect();\n\n    this.overflowHandler = createOverflowHandler({\n      container: this.container,\n      onChange: (_, hiddenItems: HTMLElement[]) => {\n        const filteredChildren = Array.from(this.container.children).filter(\n          (child) =>\n            !child.hasAttribute('data-offset') &&\n            !child.hasAttribute('data-fixed')\n        );\n\n        this.hiddenTags = hiddenItems.map((hiddenItem) => {\n          const index = filteredChildren.indexOf(hiddenItem);\n          return this.tagsData[index];\n        });\n      },\n    });\n  }\n\n  private handleTogglePopover(event: Event) {\n    if (\n      event instanceof PointerEvent ||\n      (event instanceof KeyboardEvent && [' ', 'Enter'].includes(event.key))\n    ) {\n      this.isPopoverOpen = !this.isPopoverOpen;\n    }\n  }\n\n  private handleDocumentClick = (event: Event) => {\n    if (event.target !== this) {\n      this.isPopoverOpen = false;\n    }\n  };\n\n  private handleDismiss = (e: CustomEvent, tag: TagType) => {\n    e.stopPropagation();\n    e.preventDefault();\n\n    this.tagsData = this.tagsData.filter((t) => t.text !== tag.text);\n    this.shadowRoot\n      ?.querySelectorAll('[data-hidden]:not([data-offset])')\n      .forEach((el) => el.removeAttribute('data-hidden'));\n\n    const remaining = this.hiddenTags.filter((t) => t.text !== tag.text);\n    if (this.hiddenTags.length === 2 && remaining[0]) {\n      this.shadowRoot\n        ?.querySelector(`#${remaining[0].text}`)\n        ?.removeAttribute('data-hidden');\n    }\n  };\n\n  render() {\n    return html` <div class=${blockClass}>\n        ${this.tagsData.map(\n          (tag) => html`\n            <span id=${tag?.text}>\n              ${tag?.onClose\n                ? html`<cds-dismissible-tag\n                    @cds-dismissible-tag-beingclosed=${(e: CustomEvent) =>\n                      this.handleDismiss(e, tag)}\n                    text=${tag?.text}\n                    tag-title=\"Provide a custom title to the tag\"\n                    type=${tag.type}\n                    size=${tag.size}\n                  ></cds-dismissible-tag>`\n                : html`<cds-tag type=${tag.type} size=${tag.size}\n                    >${tag?.text}</cds-tag\n                  >`}\n            </span>\n          `\n        )}\n        <span data-offset ?data-hidden=${this.hiddenTags.length === 0}>\n          <cds-popover\n            ?open=${this.isPopoverOpen}\n            ?highContrast=${true}\n            align=${document.dir === 'rtl' ? 'bottom-left' : 'bottom-right'}\n          >\n            <cds-operational-tag\n              size=${this.tagsData[0]?.size}\n              title=\"+${this.hiddenTags.length}\"\n              text=\"+${this.hiddenTags.length}\"\n              @click=${this.handleTogglePopover}\n              @keydown=${this.handleTogglePopover}\n            ></cds-operational-tag>\n            <cds-popover-content>\n              <div class=\"${`${blockClass}__popover-container`}\">\n                ${this.hiddenTags.length > 0\n                  ? this.hiddenTags.slice(0, 10).map((tag) =>\n                      tag.onClose\n                        ? html`\n                            <div>\n                              <cds-dismissible-tag\n                                @cds-dismissible-tag-beingclosed=${(\n                                  e: CustomEvent\n                                ) => this.handleDismiss(e, tag)}\n                                text=${tag?.text}\n                                tag-title=\"Provide a custom title to the tag\"\n                                type=${tag.type}\n                                size=${tag.size}\n                              ></cds-dismissible-tag>\n                            </div>\n                          `\n                        : html`<p class=\"${blockClass}__popover-tag\">\n                            ${tag?.text}\n                          </p>`\n                    )\n                  : nothing}\n                ${this.hiddenTags.length > 10\n                  ? html`\n                      <cds-link\n                        class=\"${blockClass}__view-all\"\n                        @click=${() => (this.modalOpen = true)}\n                        @keydown=${(e: KeyboardEvent) => {\n                          if (e.key === ' ') {\n                            this.modalOpen = true;\n                          }\n                        }}\n                      >\n                        View all tags\n                      </cds-link>\n                    `\n                  : nothing}\n              </div>\n            </cds-popover-content>\n          </cds-popover>\n        </span>\n      </div>\n      ${this.hiddenTags.length > 10\n        ? html`<cds-modal\n            ?open=${this.modalOpen}\n            size=\"sm\"\n            @cds-modal-closed=${(_: CustomEvent) => (this.modalOpen = false)}\n          >\n            <cds-modal-header>\n              <cds-modal-close-button></cds-modal-close-button>\n              <cds-modal-heading>All tags</cds-modal-heading>\n              <cds-search\n                size=\"lg\"\n                close-button-label-text=\"Clear search input\"\n                value=\"${this.searchString}\"\n                class=\"${blockClass}__modal-tags-search\"\n                label-text=\"Search\"\n                placeholder=\"Search all tags\"\n                type=\"text\"\n                @cds-search-input=${(e: CustomEvent) =>\n                  (this.searchString = e.detail.value)}\n              ></cds-search>\n            </cds-modal-header>\n            <cds-modal-body>\n              <div class=\"${blockClass}__modal-tags-container\">\n                ${this.tagsData\n                  .filter(\n                    (tag) =>\n                      tag.text &&\n                      new RegExp(this.searchString, 'i').test(tag.text)\n                  )\n                  .map((tag) =>\n                    tag.onClose\n                      ? html`<cds-dismissible-tag\n                          @cds-dismissible-tag-beingclosed=${(e: CustomEvent) =>\n                            this.handleDismiss(e, tag)}\n                          text=${tag?.text}\n                          tag-title=\"Provide a custom title to the tag\"\n                          type=${tag.type}\n                          size=${tag.size}\n                        ></cds-dismissible-tag>`\n                      : html`<cds-tag type=${tag.type} size=${tag.size}\n                          >${tag?.text}</cds-tag\n                        >`\n                  )}\n              </div>\n            </cds-modal-body>\n          </cds-modal>`\n        : nothing}`;\n  }\n\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-tags-set': CDSPageHeaderTagsSet;\n  }\n}\n"],"mappings":"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"}