@carbon/ibm-products-web-components 0.45.0 → 0.46.0

package/es/components/add-select/add-select-row.d.ts

@@ -9,6 +9,9 @@
 import { LitElement } from 'lit';
 import '@carbon/web-components/es/components/checkbox/index.js';
 import '@carbon/web-components/es/components/radio-button/index.js';
+import '@carbon/web-components/es/components/skeleton-text/index.js';
+import '@carbon/web-components/es/components/skeleton-icon/index.js';
+import '@carbon/web-components/es/components/icon-button/index.js';
 /**
  * Add Select Row component - represents a single selectable row
  * @element c4p-add-select-row
@@ -17,12 +20,15 @@ import '@carbon/web-components/es/components/radio-button/index.js';
  * @slot meta - Optional metadata slot
  * @fires c4p-add-select-row-select - Fired when row is selected/deselected
  * @fires c4p-add-select-row-navigate - Fired when navigating to children
+ * @fires c4p-add-select-row-item-panel-click - Fired when the item panel icon button is clicked
  */
 declare class CDSAddSelectRow extends LitElement {
     /**
-     * Whether this is part of a multi-select list (inherited from parent c4p-add-select)
-     * @private
+     * Whether this row renders a checkbox (multi) or radio button (single).
+     * Set by the parent c4p-add-select-column via the _column-multi attribute.
+     * Falls back to reading the nearest c4p-add-select wrapper when not set.
      */
+    private _columnMulti;
     private get _multi();
     /**
      * Unique identifier for the item
@@ -44,10 +50,36 @@ declare class CDSAddSelectRow extends LitElement {
      * Whether the item is selected
      */
     selected: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state (multi hierarchical)
+     */
+    indeterminate: boolean;
     /**
      * Whether the item is disabled
      */
     disabled: boolean;
+    /**
+     * Whether to render the row as a skeleton (loading) state
+     */
+    skeleton: boolean;
+    /** Whether the icon slot has assigned content */
+    private _hasIconSlot;
+    private _handleIconSlotChange;
+    /** Whether the rowContent slot has assigned content */
+    private _hasRowContentSlot;
+    private _handleRowContentSlotChange;
+    /**
+     * Whether to show the item details icon button
+     */
+    hasItemPanel: boolean;
+    /**
+     * Whether the item panel is currently open for this item
+     */
+    itemPanelOpen: boolean;
+    /**
+     * Accessible label for the item panel icon button
+     */
+    itemPanelIconDescription: string;
     /**
      * Whether the item has children (for navigation)
      */
@@ -56,6 +88,10 @@ declare class CDSAddSelectRow extends LitElement {
      * Parent ID for hierarchical navigation
      */
     parentId: string;
+    /**
+     * Handle item panel icon button click
+     */
+    private _handleItemPanelClick;
     /**
      * Handle navigation to children
      */
@@ -77,6 +113,10 @@ declare class CDSAddSelectRow extends LitElement {
      * The name of the custom event fired when navigating to children
      */
     static get eventNavigate(): string;
+    /**
+     * The name of the custom event fired when item panel icon button is clicked
+     */
+    static get eventItemPanelClick(): string;
     static styles: any;
 }
 export default CDSAddSelectRow;

package/es/components/add-select/add-select-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-select-row.d.ts","sourceRoot":"","sources":["../../../src/components/add-select/add-select-row.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAIhD,OAAO,wDAAwD,CAAC;AAChE,OAAO,4DAA4D,CAAC;AASpE;;;;;;;;GAQG;AACH,cACM,eAAgB,SAAQ,UAAU;IACtC;;;OAGG;IACH,OAAO,KAAK,MAAM,GAGjB;IACD;;OAEG;IAEH,MAAM,SAAM;IAEZ;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IACH,OAAO,CAAC,eAAe;IA0BvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAcrB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAmB3B,MAAM;IAsFN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"add-select-row.d.ts","sourceRoot":"","sources":["../../../src/components/add-select/add-select-row.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAIhD,OAAO,wDAAwD,CAAC;AAChE,OAAO,4DAA4D,CAAC;AACpE,OAAO,6DAA6D,CAAC;AACrE,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAUnE;;;;;;;;;GASG;AACH,cACM,eAAgB,SAAQ,UAAU;IACtC;;;;OAIG;IAEH,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,KAAK,MAAM,GAMjB;IAED;;OAEG;IAEH,MAAM,SAAM;IAEZ;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB,iDAAiD;IAEjD,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,qBAAqB;IAK7B,uDAAuD;IAEvD,OAAO,CAAC,kBAAkB,CAAS;IAEnC,OAAO,CAAC,2BAA2B;IAMnC;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,wBAAwB,SAAkB;IAE1C;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAgB7B;;OAEG;IACH,OAAO,CAAC,eAAe;IA0BvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAcrB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAmB3B,MAAM;IA4JN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,eAAe,CAAC"}

package/es/components/add-select/add-select-row.js

@@ -10,12 +10,16 @@ import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers
 import add_select_row_default$1 from "./add-select-row.scss.js";
 import { classMap } from "lit/directives/class-map.js";
 import { LitElement, html, nothing } from "lit";
-import { property } from "lit/decorators.js";
+import { property, 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 "@carbon/web-components/es/components/icon-button/index.js";
+import "@carbon/web-components/es/components/skeleton-text/index.js";
 import "@carbon/web-components/es/components/checkbox/index.js";
 import "@carbon/web-components/es/components/radio-button/index.js";
+import "@carbon/web-components/es/components/skeleton-icon/index.js";
 import ChevronRight16 from "@carbon/icons/es/chevron--right/16";
+import View16 from "@carbon/icons/es/view/16";
 //#region src/components/add-select/add-select-row.ts
 /**
 * @license
@@ -34,26 +38,53 @@ const blockClass = `c4p--add-select__next-row`;
 * @slot meta - Optional metadata slot
 * @fires c4p-add-select-row-select - Fired when row is selected/deselected
 * @fires c4p-add-select-row-navigate - Fired when navigating to children
+* @fires c4p-add-select-row-item-panel-click - Fired when the item panel icon button is clicked
 */
 let CDSAddSelectRow = class CDSAddSelectRow extends LitElement {
 	constructor(..._args) {
 		super(..._args);
+		this._columnMulti = false;
 		this.itemId = "";
 		this.title = "";
 		this.subtitle = "";
 		this.value = "";
 		this.selected = false;
+		this.indeterminate = false;
 		this.disabled = false;
+		this.skeleton = false;
+		this._hasIconSlot = false;
+		this._hasRowContentSlot = false;
+		this.hasItemPanel = false;
+		this.itemPanelOpen = false;
+		this.itemPanelIconDescription = "View details";
 		this.hasChildren = false;
 		this.parentId = "";
 	}
-	/**
-	* Whether this is part of a multi-select list (inherited from parent c4p-add-select)
-	* @private
-	*/
 	get _multi() {
+		if (this.hasAttribute("_column-multi")) return this._columnMulti;
 		return this.closest(`c4p-add-select`)?.multi ?? false;
 	}
+	_handleIconSlotChange(e) {
+		const slot = e.target;
+		this._hasIconSlot = slot.assignedElements({ flatten: true }).length > 0;
+	}
+	_handleRowContentSlotChange(e) {
+		const slot = e.target;
+		this._hasRowContentSlot = slot.assignedElements({ flatten: true }).length > 0;
+	}
+	/**
+	* Handle item panel icon button click
+	*/
+	_handleItemPanelClick(event) {
+		event.stopPropagation();
+		const init = {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			detail: { itemId: this.itemId }
+		};
+		this.dispatchEvent(new CustomEvent(this.constructor.eventItemPanelClick, init));
+	}
 	/**
 	* Handle navigation to children
 	*/
@@ -101,14 +132,43 @@ let CDSAddSelectRow = class CDSAddSelectRow extends LitElement {
 		this.dispatchEvent(new CustomEvent(this.constructor.eventSelect, init));
 	}
 	render() {
-		const { itemId, title, subtitle, selected, disabled, hasChildren, _handleSelect: handleSelect } = this;
-		return html`
-      <div
-        class=${classMap({
+		const { itemId, title, subtitle, selected, indeterminate, disabled, hasChildren, hasItemPanel, itemPanelOpen, itemPanelIconDescription, skeleton, _handleSelect: handleSelect } = this;
+		const rowClasses = classMap({
 			[`${blockClass}`]: true,
 			[`${blockClass}--selected`]: selected,
-			[`${blockClass}--disabled`]: disabled
-		})}
+			[`${blockClass}--disabled`]: disabled,
+			[`${blockClass}--skeleton`]: skeleton
+		});
+		if (skeleton) return html`
+        <div class=${rowClasses} aria-hidden="true">
+          <div class="${blockClass}__cell">
+            <div class="${blockClass}__cell-wrapper">
+              <div class="${blockClass}__skeleton-control"></div>
+              <div class="${blockClass}__content">
+                <!-- Hidden slot kept so slotchange fires and _hasIconSlot is accurate -->
+                <slot
+                  name="icon"
+                  style="display:none"
+                  @slotchange=${this._handleIconSlotChange}
+                ></slot>
+                ${this._hasIconSlot ? html`
+                      <div class="${blockClass}__icon">
+                        <cds-skeleton-icon></cds-skeleton-icon>
+                      </div>
+                    ` : nothing}
+                <div class="${blockClass}__text">
+                  <cds-skeleton-text
+                    class="${blockClass}__skeleton-title"
+                  ></cds-skeleton-text>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+		return html`
+      <div
+        class=${rowClasses}
         role="row"
         aria-selected=${selected}
         tabindex="-1"
@@ -120,42 +180,68 @@ let CDSAddSelectRow = class CDSAddSelectRow extends LitElement {
                   <cds-checkbox
                     class="${blockClass}__checkbox"
                     ?checked=${selected}
+                    ?indeterminate=${indeterminate}
                     ?disabled=${disabled}
                     @cds-checkbox-changed=${handleSelect}
                     label-text=${title}
                     ?hide-label=${true}
                     tabindex="-1"
-                  >
-                  </cds-checkbox>
+                  ></cds-checkbox>
                 ` : html`
                   <cds-radio-button
+                    class="${blockClass}__radio"
                     ?checked=${selected}
                     ?disabled=${disabled}
                     @cds-radio-button-changed=${handleSelect}
-                    label-text=${title}
+                    label-text=" "
+                    aria-label=${title}
                     value=${itemId}
                     tabindex="-1"
-                  >
-                  </cds-radio-button>
+                  ></cds-radio-button>
                 `}
 
             <div class="${blockClass}__content">
-              <slot name="icon" class="${blockClass}__icon"></slot>
-              <div class="${blockClass}__text">
-                <div class="${blockClass}__title">${title}</div>
-                ${subtitle && html`<div class="${blockClass}__subtitle">${subtitle}</div>`}
-              </div>
-              <slot></slot>
+              <slot
+                name="icon"
+                class="${blockClass}__icon"
+                @slotchange=${this._handleIconSlotChange}
+              ></slot>
+              ${this._hasRowContentSlot ? nothing : html`
+                    <div class="${blockClass}__text">
+                      <div class="${blockClass}__title">${title}</div>
+                      ${subtitle ? html`<div class="${blockClass}__subtitle">
+                            ${subtitle}
+                          </div>` : nothing}
+                    </div>
+                    <slot></slot>
+                  `}
+              <slot
+                name="row-content"
+                @slotchange=${this._handleRowContentSlotChange}
+              ></slot>
               <slot name="meta"></slot>
             </div>
 
+            ${hasItemPanel ? html`
+                  <cds-icon-button
+                    class="${blockClass}__view-item-panel"
+                    kind="ghost"
+                    size="sm"
+                    tooltip-text=${itemPanelIconDescription}
+                    autoalign
+                    ?aria-pressed=${itemPanelOpen}
+                    @click=${this._handleItemPanelClick}
+                  >
+                    ${iconLoader(View16, { slot: "icon" })}
+                  </cds-icon-button>
+                ` : nothing}
             ${hasChildren ? html`
                   <div
                     class="${blockClass}__nav-indicator"
                     @click=${this._handleNavigate}
                     role="button"
                     tabindex="-1"
-                    aria-label="Navigate to children"
+                    aria-label="Navigate into ${title}"
                   >
                     <slot name="nav-icon">
                       ${iconLoader(ChevronRight16, { slot: "icon" })}
@@ -179,10 +265,21 @@ let CDSAddSelectRow = class CDSAddSelectRow extends LitElement {
 	static get eventNavigate() {
 		return `c4p-add-select-row-navigate`;
 	}
+	/**
+	* The name of the custom event fired when item panel icon button is clicked
+	*/
+	static get eventItemPanelClick() {
+		return `c4p-add-select-row-item-panel-click`;
+	}
 	static {
 		this.styles = add_select_row_default$1;
 	}
 };
+__decorate([property({
+	type: Boolean,
+	attribute: "_column-multi",
+	reflect: true
+})], CDSAddSelectRow.prototype, "_columnMulti", void 0);
 __decorate([property({
 	type: String,
 	attribute: "item-id"
@@ -194,7 +291,30 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], CDSAddSelectRow.prototype, "selected", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSAddSelectRow.prototype, "indeterminate", void 0);
 __decorate([property({ type: Boolean })], CDSAddSelectRow.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSAddSelectRow.prototype, "skeleton", void 0);
+__decorate([state()], CDSAddSelectRow.prototype, "_hasIconSlot", void 0);
+__decorate([state()], CDSAddSelectRow.prototype, "_hasRowContentSlot", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "has-item-panel"
+})], CDSAddSelectRow.prototype, "hasItemPanel", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "item-panel-open",
+	reflect: true
+})], CDSAddSelectRow.prototype, "itemPanelOpen", void 0);
+__decorate([property({
+	type: String,
+	attribute: "item-panel-icon-description"
+})], CDSAddSelectRow.prototype, "itemPanelIconDescription", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: "has-children"

package/es/components/add-select/add-select-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"add-select-row.js","names":["styles","customElement"],"sources":["../../../src/components/add-select/add-select-row.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 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 } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es/components/checkbox/index.js';\nimport '@carbon/web-components/es/components/radio-button/index.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport ChevronRight16 from '@carbon/icons/es/chevron--right/16';\n\nimport { prefix } from '../../globals/settings';\nimport styles from './add-select-row.scss?lit';\n\nconst blockClass = `${prefix}--add-select__next-row`;\n\n/**\n * Add Select Row component - represents a single selectable row\n * @element c4p-add-select-row\n * @slot default - Custom content to render after the title/subtitle section. Useful for adding badges, tags, or other metadata to the row.\n * @slot icon - Optional icon slot\n * @slot meta - Optional metadata slot\n * @fires c4p-add-select-row-select - Fired when row is selected/deselected\n * @fires c4p-add-select-row-navigate - Fired when navigating to children\n */\n@customElement(`${prefix}-add-select-row`)\nclass CDSAddSelectRow extends LitElement {\n  /**\n   * Whether this is part of a multi-select list (inherited from parent c4p-add-select)\n   * @private\n   */\n  private get _multi(): boolean {\n    const parent = this.closest(`${prefix}-add-select`) as any;\n    return parent?.multi ?? false;\n  }\n  /**\n   * Unique identifier for the item\n   */\n  @property({ type: String, attribute: 'item-id' })\n  itemId = '';\n\n  /**\n   * Item title\n   */\n  @property({ type: String })\n  title = '';\n\n  /**\n   * Item subtitle\n   */\n  @property({ type: String })\n  subtitle = '';\n\n  /**\n   * Item value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Whether the item is selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Whether the item is disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Whether the item has children (for navigation)\n   */\n  @property({ type: Boolean, attribute: 'has-children' })\n  hasChildren = false;\n\n  /**\n   * Parent ID for hierarchical navigation\n   */\n  @property({ type: String, attribute: 'parent-id' })\n  parentId = '';\n\n  /**\n   * Handle navigation to children\n   */\n  private _handleNavigate(event: Event) {\n    event.stopPropagation();\n\n    if (!this.hasChildren) {\n      return;\n    }\n\n    // Emit navigation event\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        itemId: this.itemId,\n        title: this.title,\n        parentId: this.parentId,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSAddSelectRow).eventNavigate,\n        init\n      )\n    );\n  }\n\n  /**\n   * Handle selection change from checkbox/radio button\n   */\n  private _handleSelect(event: Event) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // Get the new checked state from the event\n    const target = event.target as any;\n    this.selected = target.checked || false;\n\n    // Emit selection event\n    this._emitSelectionEvent();\n  }\n\n  /**\n   * Emit selection event\n   */\n  private _emitSelectionEvent() {\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        itemId: this.itemId,\n        selected: this.selected,\n        value: this.value,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSAddSelectRow).eventSelect,\n        init\n      )\n    );\n  }\n\n  render() {\n    const {\n      itemId,\n      title,\n      subtitle,\n      selected,\n      disabled,\n      hasChildren,\n      _handleSelect: handleSelect,\n    } = this;\n\n    const rowClasses = classMap({\n      [`${blockClass}`]: true,\n      [`${blockClass}--selected`]: selected,\n      [`${blockClass}--disabled`]: disabled,\n    });\n\n    return html`\n      <div\n        class=${rowClasses}\n        role=\"row\"\n        aria-selected=${selected}\n        tabindex=\"-1\"\n        ?data-has-children=${hasChildren}\n      >\n        <div class=\"${blockClass}__cell\" role=\"gridcell\">\n          <div class=\"${blockClass}__cell-wrapper\">\n            ${this._multi\n              ? html`\n                  <cds-checkbox\n                    class=\"${blockClass}__checkbox\"\n                    ?checked=${selected}\n                    ?disabled=${disabled}\n                    @cds-checkbox-changed=${handleSelect}\n                    label-text=${title}\n                    ?hide-label=${true}\n                    tabindex=\"-1\"\n                  >\n                  </cds-checkbox>\n                `\n              : html`\n                  <cds-radio-button\n                    ?checked=${selected}\n                    ?disabled=${disabled}\n                    @cds-radio-button-changed=${handleSelect}\n                    label-text=${title}\n                    value=${itemId}\n                    tabindex=\"-1\"\n                  >\n                  </cds-radio-button>\n                `}\n\n            <div class=\"${blockClass}__content\">\n              <slot name=\"icon\" class=\"${blockClass}__icon\"></slot>\n              <div class=\"${blockClass}__text\">\n                <div class=\"${blockClass}__title\">${title}</div>\n                ${subtitle &&\n                html`<div class=\"${blockClass}__subtitle\">${subtitle}</div>`}\n              </div>\n              <slot></slot>\n              <slot name=\"meta\"></slot>\n            </div>\n\n            ${hasChildren\n              ? html`\n                  <div\n                    class=\"${blockClass}__nav-indicator\"\n                    @click=${this._handleNavigate}\n                    role=\"button\"\n                    tabindex=\"-1\"\n                    aria-label=\"Navigate to children\"\n                  >\n                    <slot name=\"nav-icon\">\n                      ${iconLoader(ChevronRight16, {\n                        slot: 'icon',\n                      })}\n                    </slot>\n                  </div>\n                `\n              : nothing}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when row is selected/deselected\n   */\n  static get eventSelect() {\n    return `${prefix}-add-select-row-select`;\n  }\n\n  /**\n   * The name of the custom event fired when navigating to children\n   */\n  static get eventNavigate() {\n    return `${prefix}-add-select-row-navigate`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSAddSelectRow;\n"],"mappings":"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"}
+{"version":3,"file":"add-select-row.js","names":["styles","customElement"],"sources":["../../../src/components/add-select/add-select-row.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 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, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es/components/checkbox/index.js';\nimport '@carbon/web-components/es/components/radio-button/index.js';\nimport '@carbon/web-components/es/components/skeleton-text/index.js';\nimport '@carbon/web-components/es/components/skeleton-icon/index.js';\nimport '@carbon/web-components/es/components/icon-button/index.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport ChevronRight16 from '@carbon/icons/es/chevron--right/16';\nimport View16 from '@carbon/icons/es/view/16';\n\nimport { prefix } from '../../globals/settings';\nimport styles from './add-select-row.scss?lit';\n\nconst blockClass = `${prefix}--add-select__next-row`;\n\n/**\n * Add Select Row component - represents a single selectable row\n * @element c4p-add-select-row\n * @slot default - Custom content to render after the title/subtitle section. Useful for adding badges, tags, or other metadata to the row.\n * @slot icon - Optional icon slot\n * @slot meta - Optional metadata slot\n * @fires c4p-add-select-row-select - Fired when row is selected/deselected\n * @fires c4p-add-select-row-navigate - Fired when navigating to children\n * @fires c4p-add-select-row-item-panel-click - Fired when the item panel icon button is clicked\n */\n@customElement(`${prefix}-add-select-row`)\nclass CDSAddSelectRow extends LitElement {\n  /**\n   * Whether this row renders a checkbox (multi) or radio button (single).\n   * Set by the parent c4p-add-select-column via the _column-multi attribute.\n   * Falls back to reading the nearest c4p-add-select wrapper when not set.\n   */\n  @property({ type: Boolean, attribute: '_column-multi', reflect: true })\n  private _columnMulti = false;\n\n  private get _multi(): boolean {\n    if (this.hasAttribute('_column-multi')) {\n      return this._columnMulti;\n    }\n    const parent = this.closest(`${prefix}-add-select`) as any;\n    return parent?.multi ?? false;\n  }\n\n  /**\n   * Unique identifier for the item\n   */\n  @property({ type: String, attribute: 'item-id' })\n  itemId = '';\n\n  /**\n   * Item title\n   */\n  @property({ type: String })\n  title = '';\n\n  /**\n   * Item subtitle\n   */\n  @property({ type: String })\n  subtitle = '';\n\n  /**\n   * Item value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Whether the item is selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Whether the checkbox is in an indeterminate state (multi hierarchical)\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Whether the item is disabled\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Whether to render the row as a skeleton (loading) state\n   */\n  @property({ type: Boolean, reflect: true })\n  skeleton = false;\n\n  /** Whether the icon slot has assigned content */\n  @state()\n  private _hasIconSlot = false;\n\n  private _handleIconSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasIconSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  /** Whether the rowContent slot has assigned content */\n  @state()\n  private _hasRowContentSlot = false;\n\n  private _handleRowContentSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasRowContentSlot =\n      slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  /**\n   * Whether to show the item details icon button\n   */\n  @property({ type: Boolean, attribute: 'has-item-panel' })\n  hasItemPanel = false;\n\n  /**\n   * Whether the item panel is currently open for this item\n   */\n  @property({ type: Boolean, attribute: 'item-panel-open', reflect: true })\n  itemPanelOpen = false;\n\n  /**\n   * Accessible label for the item panel icon button\n   */\n  @property({ type: String, attribute: 'item-panel-icon-description' })\n  itemPanelIconDescription = 'View details';\n\n  /**\n   * Whether the item has children (for navigation)\n   */\n  @property({ type: Boolean, attribute: 'has-children' })\n  hasChildren = false;\n\n  /**\n   * Parent ID for hierarchical navigation\n   */\n  @property({ type: String, attribute: 'parent-id' })\n  parentId = '';\n\n  /**\n   * Handle item panel icon button click\n   */\n  private _handleItemPanelClick(event: Event) {\n    event.stopPropagation();\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: { itemId: this.itemId },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSAddSelectRow).eventItemPanelClick,\n        init\n      )\n    );\n  }\n\n  /**\n   * Handle navigation to children\n   */\n  private _handleNavigate(event: Event) {\n    event.stopPropagation();\n\n    if (!this.hasChildren) {\n      return;\n    }\n\n    // Emit navigation event\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        itemId: this.itemId,\n        title: this.title,\n        parentId: this.parentId,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSAddSelectRow).eventNavigate,\n        init\n      )\n    );\n  }\n\n  /**\n   * Handle selection change from checkbox/radio button\n   */\n  private _handleSelect(event: Event) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // Get the new checked state from the event\n    const target = event.target as any;\n    this.selected = target.checked || false;\n\n    // Emit selection event\n    this._emitSelectionEvent();\n  }\n\n  /**\n   * Emit selection event\n   */\n  private _emitSelectionEvent() {\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        itemId: this.itemId,\n        selected: this.selected,\n        value: this.value,\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSAddSelectRow).eventSelect,\n        init\n      )\n    );\n  }\n\n  render() {\n    const {\n      itemId,\n      title,\n      subtitle,\n      selected,\n      indeterminate,\n      disabled,\n      hasChildren,\n      hasItemPanel,\n      itemPanelOpen,\n      itemPanelIconDescription,\n      skeleton,\n      _handleSelect: handleSelect,\n    } = this;\n\n    const rowClasses = classMap({\n      [`${blockClass}`]: true,\n      [`${blockClass}--selected`]: selected,\n      [`${blockClass}--disabled`]: disabled,\n      [`${blockClass}--skeleton`]: skeleton,\n    });\n\n    // Skeleton state — non-interactive placeholder\n    if (skeleton) {\n      return html`\n        <div class=${rowClasses} aria-hidden=\"true\">\n          <div class=\"${blockClass}__cell\">\n            <div class=\"${blockClass}__cell-wrapper\">\n              <div class=\"${blockClass}__skeleton-control\"></div>\n              <div class=\"${blockClass}__content\">\n                <!-- Hidden slot kept so slotchange fires and _hasIconSlot is accurate -->\n                <slot\n                  name=\"icon\"\n                  style=\"display:none\"\n                  @slotchange=${this._handleIconSlotChange}\n                ></slot>\n                ${this._hasIconSlot\n                  ? html`\n                      <div class=\"${blockClass}__icon\">\n                        <cds-skeleton-icon></cds-skeleton-icon>\n                      </div>\n                    `\n                  : nothing}\n                <div class=\"${blockClass}__text\">\n                  <cds-skeleton-text\n                    class=\"${blockClass}__skeleton-title\"\n                  ></cds-skeleton-text>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      `;\n    }\n\n    return html`\n      <div\n        class=${rowClasses}\n        role=\"row\"\n        aria-selected=${selected}\n        tabindex=\"-1\"\n        ?data-has-children=${hasChildren}\n      >\n        <div class=\"${blockClass}__cell\" role=\"gridcell\">\n          <div class=\"${blockClass}__cell-wrapper\">\n            ${this._multi\n              ? html`\n                  <cds-checkbox\n                    class=\"${blockClass}__checkbox\"\n                    ?checked=${selected}\n                    ?indeterminate=${indeterminate}\n                    ?disabled=${disabled}\n                    @cds-checkbox-changed=${handleSelect}\n                    label-text=${title}\n                    ?hide-label=${true}\n                    tabindex=\"-1\"\n                  ></cds-checkbox>\n                `\n              : html`\n                  <cds-radio-button\n                    class=\"${blockClass}__radio\"\n                    ?checked=${selected}\n                    ?disabled=${disabled}\n                    @cds-radio-button-changed=${handleSelect}\n                    label-text=\" \"\n                    aria-label=${title}\n                    value=${itemId}\n                    tabindex=\"-1\"\n                  ></cds-radio-button>\n                `}\n\n            <div class=\"${blockClass}__content\">\n              <slot\n                name=\"icon\"\n                class=\"${blockClass}__icon\"\n                @slotchange=${this._handleIconSlotChange}\n              ></slot>\n              ${this._hasRowContentSlot\n                ? nothing\n                : html`\n                    <div class=\"${blockClass}__text\">\n                      <div class=\"${blockClass}__title\">${title}</div>\n                      ${subtitle\n                        ? html`<div class=\"${blockClass}__subtitle\">\n                            ${subtitle}\n                          </div>`\n                        : nothing}\n                    </div>\n                    <slot></slot>\n                  `}\n              <slot\n                name=\"row-content\"\n                @slotchange=${this._handleRowContentSlotChange}\n              ></slot>\n              <slot name=\"meta\"></slot>\n            </div>\n\n            ${hasItemPanel\n              ? html`\n                  <cds-icon-button\n                    class=\"${blockClass}__view-item-panel\"\n                    kind=\"ghost\"\n                    size=\"sm\"\n                    tooltip-text=${itemPanelIconDescription}\n                    autoalign\n                    ?aria-pressed=${itemPanelOpen}\n                    @click=${this._handleItemPanelClick}\n                  >\n                    ${iconLoader(View16, { slot: 'icon' })}\n                  </cds-icon-button>\n                `\n              : nothing}\n            ${hasChildren\n              ? html`\n                  <div\n                    class=\"${blockClass}__nav-indicator\"\n                    @click=${this._handleNavigate}\n                    role=\"button\"\n                    tabindex=\"-1\"\n                    aria-label=\"Navigate into ${title}\"\n                  >\n                    <slot name=\"nav-icon\">\n                      ${iconLoader(ChevronRight16, {\n                        slot: 'icon',\n                      })}\n                    </slot>\n                  </div>\n                `\n              : nothing}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when row is selected/deselected\n   */\n  static get eventSelect() {\n    return `${prefix}-add-select-row-select`;\n  }\n\n  /**\n   * The name of the custom event fired when navigating to children\n   */\n  static get eventNavigate() {\n    return `${prefix}-add-select-row-navigate`;\n  }\n\n  /**\n   * The name of the custom event fired when item panel icon button is clicked\n   */\n  static get eventItemPanelClick() {\n    return `${prefix}-add-select-row-item-panel-click`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSAddSelectRow;\n"],"mappings":"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"}

package/es/components/add-select/add-select-row.scss.js

@@ -7,7 +7,7 @@
 
 import { css } from "lit";
 //#region src/components/add-select/add-select-row.scss?lit
-var add_select_row_default = css([".c4p--add-select__next{position:relative}.c4p--add-select__next,.c4p--add-select__next__body{block-size:100%;display:flex;flex-direction:column;inline-size:100%}.c4p--add-select__next__header{border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);padding-block-end:.5rem;padding-block-start:1rem;padding-inline:1rem}.c4p--add-select__next__search{margin-block-end:1rem}.c4p--add-select__next__search--with-actions{align-items:flex-end;display:flex}.c4p--add-select__next__search-input{flex:1}.c4p--add-select__next__global-actions{align-items:flex-end;display:flex}.c4p--add-select__next__sub-header{align-items:center;display:flex;justify-content:space-between}.c4p--add-select__next__tags{align-items:center;display:flex;gap:.5rem}.c4p--add-select__next__tags-label{color:var(--cds-text-primary,#161616);font-size:var(--cds-heading-compact-02-font-size,1rem);font-weight:var(--cds-heading-compact-02-font-weight,600);letter-spacing:var(--cds-heading-compact-02-letter-spacing,0);line-height:var(--cds-heading-compact-02-line-height,1.375);margin:0}.c4p--add-select__next__sub-header-actions{align-items:center;display:flex;gap:.5rem;margin-inline-start:1rem}.c4p--add-select__next__content{display:flex;flex:1;flex-direction:column;overflow:auto}.c4p--add-select__next-list{display:flex;flex:1;flex-direction:column;overflow-y:auto}@supports (overflow-block:auto){.c4p--add-select__next-list{overflow-block:auto}}.c4p--add-select__next-list:focus{outline:none}.c4p--add-select__next-list-body{display:flex;flex-direction:column}.c4p--add-select__next-list-body--horizontal{align-items:stretch;block-size:100%;flex-direction:row}.c4p--add-select__next-list-body--horizontal .c4p--add-select__next-column{padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-row{border-inline-start:.125rem solid transparent;display:flex;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}.c4p--add-select__next-row:focus{outline:.125rem solid var(--cds-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row:focus:not(:focus-visible){outline:none}.c4p--add-select__next-row--selected{background-color:var(--cds-layer-selected-01,#e0e0e0)}.c4p--add-select__next-row--selected .c4p--add-select__next-row__cell-wrapper{border-block-end-color:var(--cds-border-subtle-selected-01,#c6c6c6)}.c4p--add-select__next-row--disabled{cursor:not-allowed}.c4p--add-select__next-row--disabled .c4p--add-select__next-row__subtitle,.c4p--add-select__next-row--disabled .c4p--add-select__next-row__title{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row--disabled .c4p--add-select__next-row__icon svg,.c4p--add-select__next-row--disabled .c4p--add-select__next-row__nav-indicator svg,.c4p--add-select__next-row--disabled .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled){background:var(--cds-layer-hover-01,#e8e8e8)}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title{color:var(--cds-link-primary,#0f62fe)}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg,.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled){background:var(--cds-layer-selected-hover-01,#d1d1d1)}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title{color:var(--cds-text-primary,#161616)}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg,.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-icon-primary,#161616)}.c4p--add-select__next-row__cell{display:flex;flex:1;flex-direction:column}.c4p--add-select__next-row__cell-wrapper{align-items:center;border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;justify-content:space-between;min-block-size:3rem;padding-block:.5rem;padding-inline:1rem}.c4p--add-select__next-row__content{align-items:center;align-self:center;display:flex;flex:1}.c4p--add-select__next-row__checkbox{align-self:center;flex:none;margin-inline-end:1rem}.c4p--add-select__next-row__radio{align-self:center}.c4p--add-select__next-row__radio .cds--radio-button__appearance{margin-inline-end:0}.c4p--add-select__next-row__icon{align-items:center;display:flex;margin-inline-end:.5rem}.c4p--add-select__next-row__text{display:flex;flex:1;flex-direction:column}.c4p--add-select__next-row__title{color:var(--cds-text-primary,#161616);display:block;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--add-select__next-row__subtitle{color:var(--cds-text-secondary,#525252);display:block;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)}.c4p--add-select__next-row__meta{align-items:center;display:flex;margin-inline-start:.5rem}.c4p--add-select__next-row__view-item-panel{margin-inline-start:auto}.c4p--add-select__next-row-item-panel--selected{background-color:var(--cds-layer-hover-01,#e8e8e8);border-inline-start:.125rem solid var(--cds-interactive,#0f62fe)}@media screen and (prefers-reduced-motion:reduce){.c4p--add-select__next-row__nav-indicator{align-items:center;cursor:pointer;display:flex;justify-content:center;margin-inline-start:.5rem;padding-block:.25rem;padding-inline:.25rem;transition:none}.c4p--add-select__next-row__nav-indicator:hover{background-color:var(--cds-background-hover,hsla(0,0%,55%,.12))}.c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-icon-primary,#161616)}}.c4p--add-select__next-row__nav-indicator{align-items:center;cursor:pointer;display:flex;justify-content:center;margin-inline-start:.5rem;padding-block:.25rem;padding-inline:.25rem;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}.c4p--add-select__next-row__nav-indicator:hover{background-color:var(--cds-background-hover,hsla(0,0%,55%,.12))}.c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-icon-primary,#161616)}.c4p--add-select__next-row--skeleton{cursor:default;pointer-events:none}.c4p--add-select__next-row--skeleton:hover{background:none}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__skeleton-control{background-color:var(--cds-skeleton-element,#c6c6c6);block-size:1rem;border-radius:.125rem;flex:none;inline-size:1rem;margin-inline-end:1rem}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon .cds--icon--skeleton{block-size:2rem;border-radius:50%;inline-size:2rem}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon .cds--icon--skeleton:before{animation:none;border-radius:50%}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__skeleton-title{margin-block-end:0}.c4p--add-select__next-column{block-size:100%;border-inline-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;flex-direction:column;min-inline-size:300px;padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column:last-child{border-inline-end:none}.c4p--add-select__next-list-body--horizontal .c4p--add-select__next-column:last-child{border-inline-end:1px solid var(--cds-border-subtle-01,#c6c6c6)}.c4p--add-select__next-column__actions,.c4p--add-select__next-column__search--with-actions{align-items:flex-end;display:flex}.c4p--add-select__next-column__search-bar{padding-block-end:0;padding-block-start:1rem;padding-inline:1rem}.c4p--add-select__next-column__search-wrapper{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__search-input{flex:1}.c4p--add-select__next-column__controls{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__filter-button,.c4p--add-select__next-column__sort-button{flex:none}.c4p--add-select__next-column__filter-popover{padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column__filter-popover .cds--checkbox-wrapper{margin-block-end:.5rem}.c4p--add-select__next-column__filter-popover .cds--checkbox-wrapper:last-child{margin-block-end:0}.c4p--add-select__next-column__header{align-items:center;border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column__select-all .cds--checkbox-label{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__select-all .cds--checkbox-label-text{align-items:center;display:flex;gap:.5rem;margin-inline-start:.5rem}.c4p--add-select__next-column__title-wrapper{align-items:center;display:flex;gap:.5rem}.c4p--add-select__next-column__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)}.c4p--add-select__next-column__rows{display:flex;flex:1;flex-direction:column;overflow-y:auto}@supports (overflow-block:auto){.c4p--add-select__next-column__rows{overflow-block:auto}}.c4p--add-select__next__breadcrumbs{flex-wrap:wrap}.c4p--add-select__next__breadcrumb-item,.c4p--add-select__next__breadcrumbs{align-items:center;display:flex;gap:.25rem}.c4p--add-select__next__breadcrumb-button{background:none;border:none;color:var(--cds-link-primary,#0f62fe);cursor:pointer;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572);padding-block:0;padding-inline:0;text-decoration:none}.c4p--add-select__next__breadcrumb-button:hover{color:var(--cds-link-primary-hover,#0043ce);text-decoration:underline}.c4p--add-select__next__breadcrumb-button:focus{outline:.125rem solid var(--cds-focus,#0f62fe);outline-offset:.125rem}.c4p--add-select__next__breadcrumb-separator{align-items:center;color:var(--cds-text-secondary,#525252);display:flex}.c4p--add-select__next__breadcrumb-separator svg{fill:currentColor}.c4p--add-select__next__breadcrumb-current{color:var(--cds-text-primary,#161616);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary{display:flex;flex-direction:column}.c4p--add-select__next__selection-summary-header{align-items:center;border-block-end:1px solid var(--cds-layer-accent-01,#e0e0e0);display:flex;padding-block-end:.5rem;padding-block-start:1.5rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-title{font-size:var(--cds-heading-compact-02-font-size,1rem);font-weight:var(--cds-heading-compact-02-font-weight,600);letter-spacing:var(--cds-heading-compact-02-letter-spacing,0);line-height:var(--cds-heading-compact-02-line-height,1.375);margin-inline-end:.5rem}.c4p--add-select__next__selection-summary-header-actions{align-items:center;display:flex;gap:.5rem;margin-inline-start:auto}.c4p--add-select__next__selection-summary-item-default{border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);padding-block:.75rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-item-default-title{color:var(--cds-text-primary,#161616);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary-item-default-subtitle{color:var(--cds-text-secondary,#525252);font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857)}.c4p--add-select__next__selection-summary-item{background-color:var(--cds-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);position:relative}.c4p--add-select__next__selection-summary-item:hover{background-color:var(--cds-layer-hover-01,#e8e8e8)}.c4p--add-select__next__selection-summary-item--accordion .cds--accordion__item,.c4p--add-select__next__selection-summary-item--accordion .cds--accordion__item:last-child{border-block-end:none;border-block-start:none}.c4p--add-select__next__selection-summary-item--accordion .cds--accordion__heading{min-block-size:unset;padding-block:.75rem;padding-inline-end:1rem}.c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-title-wrapper{align-items:center;display:flex;justify-content:space-between;padding-block:.75rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-content{padding-block-end:.75rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-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)}.c4p--add-select__next__selection-summary-item-title-wrapper{align-items:center;display:flex;justify-content:space-between}.c4p--add-select__next__selection-summary-item-selected-item{flex:1}.c4p--add-select__next__selection-summary-item-title{color:var(--cds-text-primary,#161616);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary-item-subtitle{color:var(--cds-text-secondary,#525252);font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857)}.c4p--add-select__next__selection-summary-item-entry{margin-block-end:1rem}.c4p--add-select__next__selection-summary-item-header{color:var(--cds-text-secondary,#525252);font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333);margin-block-end:.5rem}.c4p--add-select__next__selection-summary-item-body{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);margin-block-end:1rem}.c4p--add-select__next__selection-summary-item-remove-button-container{align-items:center;display:inline-flex;justify-content:center;padding-inline-start:.5rem}.c4p--add-select__next__selection-summary-item--accordion .c4p--add-select__next__selection-summary-item-remove-button-container{inset-block-start:50%;inset-inline-end:1rem;padding-inline-start:0;position:absolute;transform:translateY(-50%)}.c4p--add-select__next__selection-summary-item-remove-button{opacity:0;transition:opacity 70ms cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.c4p--add-select__next__selection-summary-item-remove-button{transition:none}}.c4p--add-select__next__selection-summary-item:focus-within .c4p--add-select__next__selection-summary-item-remove-button,.c4p--add-select__next__selection-summary-item:hover .c4p--add-select__next__selection-summary-item-remove-button{opacity:1}.c4p--add-select__next__selection-summary-item-content{margin-block-start:0}.c4p--add-select__next__selection-summary .cds--accordion__arrow{transform:rotate(90deg)}.c4p--add-select__next__selection-summary .cds--accordion__item--active .cds--accordion__arrow{transform:rotate(-90deg)}.c4p--add-select__next__selection-summary .cds--accordion--start .cds--accordion__arrow{margin-block:0;margin-inline-end:0;margin-inline-start:1rem}.c4p--add-select__next__selection-summary .cds--accordion--start .cds--accordion__title{margin-inline-end:0;margin-inline-start:.5rem;padding-inline-end:2rem}.c4p--add-select__next__selection-summary .cds--accordion__item--active .cds--accordion__content{margin-block-start:0;padding-block:1rem;padding-inline:1rem}.c4p--add-select__next__item-summary-panel-header{align-items:center;border-block-end:1px solid var(--cds-layer-accent-01,#e0e0e0);display:flex;gap:.5rem;justify-content:space-between;padding-block-end:.5rem;padding-block-start:2rem;padding-inline:1rem}.c4p--add-select__next__item-summary-panel-title{font-size:var(--cds-heading-compact-02-font-size,1rem);font-weight:var(--cds-heading-compact-02-font-weight,600);letter-spacing:var(--cds-heading-compact-02-letter-spacing,0);line-height:var(--cds-heading-compact-02-line-height,1.375)}.c4p--add-select__next__item-summary-panel-body{padding-block:1rem;padding-inline:1rem}.c4p--add-select__next__item-summary-panel-entry{margin-block-end:1rem}.c4p--add-select__next__item-summary-panel-entry-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)}.c4p--add-select__next__item-summary-panel-entry-body{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}:host(c4p-add-select-row){display:block}:host(c4p-add-select-row) .c4p--add-select__next-row{border-inline-start:.125rem solid transparent;display:flex;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}:host(c4p-add-select-row) .c4p--add-select__next-row:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(c4p-add-select-row) .c4p--add-select__next-row:focus:not(:focus-visible){outline:none}:host(c4p-add-select-row) .c4p--add-select__next-row--selected{background-color:var(--cds-layer-selected-01,#e0e0e0)}:host(c4p-add-select-row) .c4p--add-select__next-row--disabled{cursor:not-allowed;opacity:.5}:host(c4p-add-select-row) .c4p--add-select__next-row:hover:not(:host(c4p-add-select-row) .c4p--add-select__next-row--disabled){background:var(--cds-layer-hover-01,#e8e8e8)}:host(c4p-add-select-row) .c4p--add-select__next-row:hover:not(:host(c4p-add-select-row) .c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title{color:var(--cds-interactive,#0f62fe)}:host(c4p-add-select-row) .c4p--add-select__next-row:hover:not(:host(c4p-add-select-row) .c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg{color:var(--cds-interactive,#0f62fe)}:host(c4p-add-select-row) .c4p--add-select__next-row__cell{display:flex;flex:1;flex-direction:column;justify-content:center}:host(c4p-add-select-row) .c4p--add-select__next-row__cell-wrapper{align-items:center;block-size:3rem;border-block-end:1px solid var(--cds-layer-accent-01,#e0e0e0);display:flex;justify-content:space-between;padding:0 1rem}:host(c4p-add-select-row) .c4p--add-select__next-row__content{align-items:center;display:flex;flex:1}:host(c4p-add-select-row) .c4p--add-select__next-row__icon{align-items:center;display:flex;margin-inline-end:.5rem}:host(c4p-add-select-row) .c4p--add-select__next-row__text{display:flex;flex:1;flex-direction:column}:host(c4p-add-select-row) .c4p--add-select__next-row__title{color:var(--cds-text-primary,#161616);display:block;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}:host(c4p-add-select-row) .c4p--add-select__next-row__subtitle{color:var(--cds-text-secondary,#525252);display:block;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333)}:host(c4p-add-select-row) .c4p--add-select__next-row__meta{align-items:center;display:flex;margin-inline-start:.5rem}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator{align-items:center;border-radius:4px;cursor:pointer;display:flex;justify-content:center;margin-inline-start:.5rem;padding:.25rem;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator:hover{background-color:var(--cds-layer-hover-01,#e8e8e8)}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-icon-primary,#161616)}@media screen and (prefers-reduced-motion:reduce){:host(c4p-add-select-row) .c4p--add-select__next-row{transition:none}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator{transition:none}}"]);
+var add_select_row_default = css([".c4p--add-select__next{position:relative}.c4p--add-select__next,.c4p--add-select__next__body{block-size:100%;display:flex;flex-direction:column;inline-size:100%}.c4p--add-select__next__header{border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);padding-block-end:.5rem;padding-block-start:1rem;padding-inline:1rem}.c4p--add-select__next__search{margin-block-end:1rem}.c4p--add-select__next__search--with-actions{align-items:flex-end;display:flex}.c4p--add-select__next__search-input{flex:1}.c4p--add-select__next__global-actions{align-items:flex-end;display:flex}.c4p--add-select__next__sub-header{align-items:center;display:flex;justify-content:space-between}.c4p--add-select__next__tags{align-items:center;display:flex;gap:.5rem}.c4p--add-select__next__tags-label{color:var(--cds-text-primary,#161616);font-size:var(--cds-heading-compact-02-font-size,1rem);font-weight:var(--cds-heading-compact-02-font-weight,600);letter-spacing:var(--cds-heading-compact-02-letter-spacing,0);line-height:var(--cds-heading-compact-02-line-height,1.375);margin:0}.c4p--add-select__next__sub-header-actions{align-items:center;display:flex;gap:.5rem;margin-inline-start:1rem}.c4p--add-select__next__content{display:flex;flex:1;flex-direction:column;overflow:auto}.c4p--add-select__next-list{display:flex;flex:1;flex-direction:column;overflow-y:auto}@supports (overflow-block:auto){.c4p--add-select__next-list{overflow-block:auto}}.c4p--add-select__next-list:focus{outline:none}.c4p--add-select__next-list-body{display:flex;flex-direction:column}.c4p--add-select__next-list-body--horizontal{align-items:stretch;block-size:100%;flex-direction:row}.c4p--add-select__next-list-body--horizontal .c4p--add-select__next-column{padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-row{border-inline-start:.125rem solid transparent;display:flex;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}.c4p--add-select__next-row:focus{outline:.125rem solid var(--cds-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row:focus:not(:focus-visible){outline:none}.c4p--add-select__next-row--selected{background-color:var(--cds-layer-selected-01,#e0e0e0)}.c4p--add-select__next-row--selected .c4p--add-select__next-row__cell-wrapper{border-block-end-color:var(--cds-border-subtle-selected-01,#c6c6c6)}.c4p--add-select__next-row--disabled{cursor:not-allowed}.c4p--add-select__next-row--disabled .c4p--add-select__next-row__subtitle,.c4p--add-select__next-row--disabled .c4p--add-select__next-row__title{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row--disabled .c4p--add-select__next-row__icon svg,.c4p--add-select__next-row--disabled .c4p--add-select__next-row__nav-indicator svg,.c4p--add-select__next-row--disabled .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled){background:var(--cds-layer-hover-01,#e8e8e8)}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title{color:var(--cds-link-primary,#0f62fe)}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg,.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled){background:var(--cds-layer-selected-hover-01,#d1d1d1)}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title{color:var(--cds-text-primary,#161616)}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg,.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-icon-primary,#161616)}.c4p--add-select__next-row__cell{display:flex;flex:1;flex-direction:column}.c4p--add-select__next-row__cell-wrapper{align-items:center;border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;justify-content:space-between;min-block-size:3rem;padding-block:.5rem;padding-inline:1rem}.c4p--add-select__next-row__content{align-items:center;align-self:center;display:flex;flex:1}.c4p--add-select__next-row__checkbox{align-self:center;flex:none;margin-inline-end:1rem}.c4p--add-select__next-row__radio{align-self:center}.c4p--add-select__next-row__radio .cds--radio-button__appearance{margin-inline-end:0}.c4p--add-select__next-row__icon{align-items:center;display:flex;margin-inline-end:.5rem}.c4p--add-select__next-row__text{display:flex;flex:1;flex-direction:column}.c4p--add-select__next-row__title{color:var(--cds-text-primary,#161616);display:block;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--add-select__next-row__subtitle{color:var(--cds-text-secondary,#525252);display:block;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)}.c4p--add-select__next-row__meta{align-items:center;display:flex;margin-inline-start:.5rem}.c4p--add-select__next-row__view-item-panel{margin-inline-start:auto}.c4p--add-select__next-row-item-panel--selected{background-color:var(--cds-layer-hover-01,#e8e8e8);border-inline-start:.125rem solid var(--cds-interactive,#0f62fe)}@media screen and (prefers-reduced-motion:reduce){.c4p--add-select__next-row__nav-indicator{align-items:center;cursor:pointer;display:flex;justify-content:center;margin-inline-start:.5rem;padding-block:.25rem;padding-inline:.25rem;transition:none}.c4p--add-select__next-row__nav-indicator:hover{background-color:var(--cds-background-hover,hsla(0,0%,55%,.12))}.c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-icon-primary,#161616)}}.c4p--add-select__next-row__nav-indicator{align-items:center;cursor:pointer;display:flex;justify-content:center;margin-inline-start:.5rem;padding-block:.25rem;padding-inline:.25rem;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}.c4p--add-select__next-row__nav-indicator:hover{background-color:var(--cds-background-hover,hsla(0,0%,55%,.12))}.c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-icon-primary,#161616)}.c4p--add-select__next-row--skeleton{cursor:default;pointer-events:none}.c4p--add-select__next-row--skeleton:hover{background:none}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__skeleton-control{background-color:var(--cds-skeleton-element,#c6c6c6);block-size:1rem;border-radius:.125rem;flex:none;inline-size:1rem;margin-inline-end:1rem}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon .cds--icon--skeleton{block-size:2rem;border-radius:50%;inline-size:2rem}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon .cds--icon--skeleton:before{animation:none;border-radius:50%}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__skeleton-title{margin-block-end:0}.c4p--add-select__next-column{block-size:100%;border-inline-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;flex-direction:column;min-inline-size:300px;padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column:last-child{border-inline-end:none}.c4p--add-select__next-list-body--horizontal .c4p--add-select__next-column:last-child{border-inline-end:1px solid var(--cds-border-subtle-01,#c6c6c6)}.c4p--add-select__next-column__actions,.c4p--add-select__next-column__search--with-actions{align-items:flex-end;display:flex}.c4p--add-select__next-column__search-bar{padding-block-end:0;padding-block-start:1rem;padding-inline:1rem}.c4p--add-select__next-column__search-wrapper{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__search-input{flex:1}.c4p--add-select__next-column__controls{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__filter-button,.c4p--add-select__next-column__sort-button{flex:none}.c4p--add-select__next-column__filter-popover{padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column__filter-popover .cds--checkbox-wrapper{margin-block-end:.5rem}.c4p--add-select__next-column__filter-popover .cds--checkbox-wrapper:last-child{margin-block-end:0}.c4p--add-select__next-column__header{align-items:center;border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);display:flex;padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column__select-all .cds--checkbox-label{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__select-all .cds--checkbox-label-text{align-items:center;display:flex;gap:.5rem;margin-inline-start:.5rem}.c4p--add-select__next-column__title-wrapper{align-items:center;display:flex;gap:.5rem}.c4p--add-select__next-column__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)}.c4p--add-select__next-column__rows{display:flex;flex:1;flex-direction:column;overflow-y:auto}@supports (overflow-block:auto){.c4p--add-select__next-column__rows{overflow-block:auto}}.c4p--add-select__next__breadcrumbs{flex-wrap:wrap}.c4p--add-select__next__breadcrumb-item,.c4p--add-select__next__breadcrumbs{align-items:center;display:flex;gap:.25rem}.c4p--add-select__next__breadcrumb-button{background:none;border:none;color:var(--cds-link-primary,#0f62fe);cursor:pointer;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572);padding-block:0;padding-inline:0;text-decoration:none}.c4p--add-select__next__breadcrumb-button:hover{color:var(--cds-link-primary-hover,#0043ce);text-decoration:underline}.c4p--add-select__next__breadcrumb-button:focus{outline:.125rem solid var(--cds-focus,#0f62fe);outline-offset:.125rem}.c4p--add-select__next__breadcrumb-separator{align-items:center;color:var(--cds-text-secondary,#525252);display:flex}.c4p--add-select__next__breadcrumb-separator svg{fill:currentColor}.c4p--add-select__next__breadcrumb-current{color:var(--cds-text-primary,#161616);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary{display:flex;flex-direction:column}.c4p--add-select__next__selection-summary-header{align-items:center;border-block-end:1px solid var(--cds-layer-accent-01,#e0e0e0);display:flex;padding-block-end:.5rem;padding-block-start:1.5rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-title{font-size:var(--cds-heading-compact-02-font-size,1rem);font-weight:var(--cds-heading-compact-02-font-weight,600);letter-spacing:var(--cds-heading-compact-02-letter-spacing,0);line-height:var(--cds-heading-compact-02-line-height,1.375);margin-inline-end:.5rem}.c4p--add-select__next__selection-summary-header-actions{align-items:center;display:flex;gap:.5rem;margin-inline-start:auto}.c4p--add-select__next__selection-summary-item{background-color:var(--cds-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-border-subtle-01,#c6c6c6);position:relative}.c4p--add-select__next__selection-summary-item:hover{background-color:var(--cds-layer-hover-01,#e8e8e8)}.c4p--add-select__next__selection-summary-item--accordion .cds--accordion__item,.c4p--add-select__next__selection-summary-item--accordion .cds--accordion__item:last-child{border-block-end:none;border-block-start:none}.c4p--add-select__next__selection-summary-item--accordion .cds--accordion__heading{min-block-size:unset;padding-block:.75rem;padding-inline-end:1rem}.c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-title-wrapper{align-items:center;display:flex;justify-content:space-between;padding-block:.75rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-content{padding-block-end:.75rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-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)}.c4p--add-select__next__selection-summary-item-title-wrapper{align-items:center;display:flex;justify-content:space-between}.c4p--add-select__next__selection-summary-item-selected-item{flex:1}.c4p--add-select__next__selection-summary-item-title{color:var(--cds-text-primary,#161616);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary-item-subtitle{color:var(--cds-text-secondary,#525252);font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857)}.c4p--add-select__next__selection-summary-item-entry{margin-block-end:1rem}.c4p--add-select__next__selection-summary-item-header{color:var(--cds-text-secondary,#525252);font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333);margin-block-end:.5rem}.c4p--add-select__next__selection-summary-item-body{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);margin-block-end:1rem}.c4p--add-select__next__selection-summary-item-remove-button-container{align-items:center;display:inline-flex;justify-content:center;padding-inline-start:.5rem}.c4p--add-select__next__selection-summary-item--accordion .c4p--add-select__next__selection-summary-item-remove-button-container{inset-block-start:50%;inset-inline-end:1rem;padding-inline-start:0;position:absolute;transform:translateY(-50%)}.c4p--add-select__next__selection-summary-item-remove-button{opacity:0;transition:opacity 70ms cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.c4p--add-select__next__selection-summary-item-remove-button{transition:none}}.c4p--add-select__next__selection-summary-item:focus-within .c4p--add-select__next__selection-summary-item-remove-button,.c4p--add-select__next__selection-summary-item:hover .c4p--add-select__next__selection-summary-item-remove-button{opacity:1}.c4p--add-select__next__selection-summary-item-content{margin-block-start:0}.c4p--add-select__next__selection-summary .cds--accordion__arrow{transform:rotate(90deg)}.c4p--add-select__next__selection-summary .cds--accordion__item--active .cds--accordion__arrow{transform:rotate(-90deg)}.c4p--add-select__next__selection-summary .cds--accordion--start .cds--accordion__arrow{margin-block:0;margin-inline-end:0;margin-inline-start:1rem}.c4p--add-select__next__selection-summary .cds--accordion--start .cds--accordion__title{margin-inline-end:0;margin-inline-start:.5rem;padding-inline-end:2rem}.c4p--add-select__next__selection-summary .cds--accordion__item--active .cds--accordion__content{margin-block-start:0;padding-block:1rem;padding-inline:1rem}@keyframes add-select-item-panel-entrance{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes add-select-item-panel-exit{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}@keyframes add-select-item-panel-entrance-reduced{0%{opacity:0}to{opacity:1}}@keyframes add-select-item-panel-exit-reduced{0%{opacity:1}to{opacity:0}}.c4p--add-select__next__item-summary-panel{block-size:100%;display:none;inline-size:100%;transform:translateX(0);transition-behavior:allow-discrete;transition-duration:.15s;transition-property:display,opacity,transform}.c4p--add-select__next__item-summary-panel--open{animation:add-select-item-panel-entrance .15s cubic-bezier(0,0,.38,.9) forwards;display:flex;flex-direction:column}@starting-style{.c4p--add-select__next__item-summary-panel--open{opacity:0;transform:translateX(100%)}}@media (prefers-reduced-motion){.c4p--add-select__next__item-summary-panel--open{animation:add-select-item-panel-entrance-reduced .15s cubic-bezier(0,0,.38,.9) forwards}@starting-style{.c4p--add-select__next__item-summary-panel--open{opacity:0;transform:translateX(0)}}}.c4p--add-select__next__item-summary-panel-header{align-items:center;border-block-end:1px solid var(--cds-layer-accent-01,#e0e0e0);display:flex;gap:.5rem;justify-content:space-between;padding-block-end:.5rem;padding-block-start:2rem;padding-inline:1rem}.c4p--add-select__next__item-summary-panel-title{font-size:var(--cds-heading-compact-02-font-size,1rem);font-weight:var(--cds-heading-compact-02-font-weight,600);letter-spacing:var(--cds-heading-compact-02-letter-spacing,0);line-height:var(--cds-heading-compact-02-line-height,1.375)}.c4p--add-select__next__item-summary-panel-body{padding-block:1rem;padding-inline:1rem}.c4p--add-select__next__item-summary-panel-entry{margin-block-end:1rem}.c4p--add-select__next__item-summary-panel-entry-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)}.c4p--add-select__next__item-summary-panel-entry-body{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}:host(c4p-add-select-row[item-panel-open]) .c4p--add-select__next-row{border-inline-start-color:var(--cds-interactive,#0f62fe)}:host(c4p-add-select-row){display:block}:host(c4p-add-select-row) .c4p--add-select__next-row{border-inline-start:.125rem solid transparent;display:flex;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}:host(c4p-add-select-row) .c4p--add-select__next-row:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(c4p-add-select-row) .c4p--add-select__next-row:focus:not(:focus-visible){outline:none}:host(c4p-add-select-row) .c4p--add-select__next-row--selected{background-color:var(--cds-layer-selected-01,#e0e0e0)}:host(c4p-add-select-row) .c4p--add-select__next-row--disabled{cursor:not-allowed;opacity:.5}:host(c4p-add-select-row) .c4p--add-select__next-row:hover:not(:host(c4p-add-select-row) .c4p--add-select__next-row--disabled){background:var(--cds-layer-hover-01,#e8e8e8)}:host(c4p-add-select-row) .c4p--add-select__next-row:hover:not(:host(c4p-add-select-row) .c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title{color:var(--cds-link-primary,#0f62fe)}:host(c4p-add-select-row) .c4p--add-select__next-row:hover:not(:host(c4p-add-select-row) .c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg,:host(c4p-add-select-row) .c4p--add-select__next-row:hover:not(:host(c4p-add-select-row) .c4p--add-select__next-row--disabled) .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}:host(c4p-add-select-row) .c4p--add-select__next-row--selected:hover:not(:host(c4p-add-select-row) .c4p--add-select__next-row--disabled){background:var(--cds-layer-selected-hover-01,#d1d1d1)}:host(c4p-add-select-row) .c4p--add-select__next-row--selected:hover:not(:host(c4p-add-select-row) .c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title{color:var(--cds-text-primary,#161616)}:host(c4p-add-select-row) .c4p--add-select__next-row--selected:hover:not(:host(c4p-add-select-row) .c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg,:host(c4p-add-select-row) .c4p--add-select__next-row--selected:hover:not(:host(c4p-add-select-row) .c4p--add-select__next-row--disabled) .c4p--add-select__next-row__view-item-panel svg{fill:var(--cds-icon-primary,#161616)}:host(c4p-add-select-row) .c4p--add-select__next-row__cell{display:flex;flex:1;flex-direction:column;justify-content:center}:host(c4p-add-select-row) .c4p--add-select__next-row__cell-wrapper{align-items:center;border-block-end:1px solid var(--cds-layer-accent-01,#e0e0e0);box-sizing:border-box;display:flex;justify-content:space-between;min-block-size:3rem;padding-block:.5rem;padding-inline:1rem}:host(c4p-add-select-row) .c4p--add-select__next-row__content{align-items:center;display:flex;flex:1}:host(c4p-add-select-row) .c4p--add-select__next-row__icon{align-items:center;display:flex;margin-inline-end:.5rem}:host(c4p-add-select-row) .c4p--add-select__next-row__text{display:flex;flex:1;flex-direction:column}:host(c4p-add-select-row) .c4p--add-select__next-row__title{color:var(--cds-text-primary,#161616);display:block;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}:host(c4p-add-select-row) .c4p--add-select__next-row__subtitle{color:var(--cds-text-secondary,#525252);display:block;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333)}:host(c4p-add-select-row) .c4p--add-select__next-row__meta{align-items:center;display:flex;margin-inline-start:.5rem}:host(c4p-add-select-row) .c4p--add-select__next-row__view-item-panel{margin-inline-start:auto}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator{align-items:center;cursor:pointer;display:flex;justify-content:center;margin-inline-start:.5rem;padding-block:.25rem;padding-inline:.25rem;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator:hover{background-color:var(--cds-background-hover,hsla(0,0%,55%,.12))}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-focus,#0f62fe);outline-offset:-.125rem}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-icon-primary,#161616)}:host(c4p-add-select-row) .c4p--add-select__next-row--skeleton{cursor:default;pointer-events:none}:host(c4p-add-select-row) .c4p--add-select__next-row--skeleton:hover{background:none}:host(c4p-add-select-row) .c4p--add-select__next-row--skeleton .c4p--add-select__next-row__skeleton-control{background-color:var(--cds-skeleton-element,#c6c6c6);block-size:1rem;border-radius:.125rem;flex:none;inline-size:1rem;margin-inline-end:1rem}:host(c4p-add-select-row) .c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon cds-skeleton-icon{block-size:2rem;border-radius:50%;inline-size:2rem}:host(c4p-add-select-row) .c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon cds-skeleton-icon:before{animation:none;border-radius:50%}:host(c4p-add-select-row) .c4p--add-select__next-row--skeleton .c4p--add-select__next-row__skeleton-title{margin-block-end:0;margin-block-start:.5rem}@media screen and (prefers-reduced-motion:reduce){:host(c4p-add-select-row) .c4p--add-select__next-row{transition:none}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator{transition:none}}"]);
 //#endregion
 export { add_select_row_default as default };
 

package/es/components/add-select/add-select-row.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"add-select-row.scss.js","names":[],"sources":["../../../src/components/add-select/add-select-row.scss?lit"],"sourcesContent":["/**\n * Copyright IBM Corp. 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\n$css--plex: true !default;\n\n/* Carbon and IBM Products styles */\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/motion' as *;\n\n$prefix: 'c4p';\n\n/* Import shared AddSelect composable/next styles from ibm-products-styles */\n@use '@carbon/ibm-products-styles/scss/components/AddSelect/add-select_next'\n  as *;\n\n/* Web Component specific overrides */\n:host(#{$prefix}-add-select-row) {\n  display: block;\n\n  /* Apply shared styles within shadow DOM */\n  .#{$block-class__next}-row {\n    display: flex;\n    border-inline-start: 0.125rem solid transparent;\n    transition: background-color $duration-fast-01 motion(standard, productive);\n\n    &:focus {\n      outline: 2px solid $focus;\n      outline-offset: -2px;\n    }\n\n    // Only show focus outline when navigating via keyboard, not mouse clicks\n    &:focus:not(:focus-visible) {\n      outline: none;\n    }\n\n    &--selected {\n      background-color: $layer-selected-01;\n    }\n\n    &--disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n\n    &:hover:not(&--disabled) {\n      background: $layer-hover-01;\n\n      .#{$block-class__next}-row__title {\n        color: $interactive;\n      }\n\n      .#{$block-class__next}-row__nav-indicator svg {\n        color: $interactive;\n      }\n    }\n  }\n\n  .#{$block-class__next}-row__cell {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .#{$block-class__next}-row__cell-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 $spacing-05;\n    block-size: 3rem;\n    border-block-end: 1px solid $layer-accent-01;\n  }\n\n  .#{$block-class__next}-row__content {\n    display: flex;\n    flex: 1;\n    align-items: center;\n  }\n\n  .#{$block-class__next}-row__icon {\n    display: flex;\n    align-items: center;\n    margin-inline-end: $spacing-03;\n  }\n\n  .#{$block-class__next}-row__text {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n  }\n\n  .#{$block-class__next}-row__title {\n    @include type.type-style('body-compact-01');\n\n    display: block;\n    color: $text-primary;\n  }\n\n  .#{$block-class__next}-row__subtitle {\n    @include type.type-style('label-01');\n\n    display: block;\n    color: $text-secondary;\n  }\n\n  .#{$block-class__next}-row__meta {\n    display: flex;\n    align-items: center;\n    margin-inline-start: $spacing-03;\n  }\n\n  .#{$block-class__next}-row__nav-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: $spacing-02;\n    border-radius: 4px;\n    cursor: pointer;\n    margin-inline-start: $spacing-03;\n    transition: background-color $duration-fast-01 motion(standard, productive);\n\n    &:hover {\n      background-color: $layer-hover-01;\n    }\n\n    &:focus {\n      outline: 2px solid $focus;\n      outline-offset: -2px;\n    }\n\n    svg {\n      fill: $icon-primary;\n    }\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    .#{$block-class__next}-row {\n      transition: none;\n    }\n\n    .#{$block-class__next}-row__nav-indicator {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"add-select-row.scss.js","names":[],"sources":["../../../src/components/add-select/add-select-row.scss?lit"],"sourcesContent":["/**\n * Copyright IBM Corp. 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\n$css--plex: true !default;\n\n/* Carbon and IBM Products styles */\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/type';\n@use '@carbon/styles/scss/motion' as *;\n\n$prefix: 'c4p';\n\n/* Import shared AddSelect composable/next styles from ibm-products-styles */\n@use '@carbon/ibm-products-styles/scss/components/AddSelect/add-select_next'\n  as *;\n\n/* Item panel open — blue left border, mirrors React's -row-item-panel--selected */\n:host(#{$prefix}-add-select-row[item-panel-open]) {\n  .#{$block-class__next}-row {\n    border-inline-start-color: $interactive;\n  }\n}\n\n/* Web Component specific overrides */\n:host(#{$prefix}-add-select-row) {\n  display: block;\n\n  /* Apply shared styles within shadow DOM */\n  .#{$block-class__next}-row {\n    display: flex;\n    border-inline-start: 0.125rem solid transparent;\n    transition: background-color $duration-fast-01 motion(standard, productive);\n\n    &:focus {\n      outline: 2px solid $focus;\n      outline-offset: -2px;\n    }\n\n    // Only show focus outline when navigating via keyboard, not mouse clicks\n    &:focus:not(:focus-visible) {\n      outline: none;\n    }\n\n    &--selected {\n      background-color: $layer-selected-01;\n    }\n  }\n\n  .#{$block-class__next}-row {\n    &--disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n\n    &:hover:not(&--disabled) {\n      background: $layer-hover-01;\n\n      .#{$block-class__next}-row__title {\n        color: $link-primary;\n      }\n\n      .#{$block-class__next}-row__view-item-panel svg,\n      .#{$block-class__next}-row__nav-indicator svg {\n        fill: $icon-disabled;\n      }\n    }\n\n    // Must come after &:hover to win the specificity tie\n    &--selected:hover:not(&--disabled) {\n      background: $layer-selected-hover-01;\n\n      .#{$block-class__next}-row__title {\n        color: $text-primary;\n      }\n\n      .#{$block-class__next}-row__view-item-panel svg,\n      .#{$block-class__next}-row__nav-indicator svg {\n        fill: $icon-primary;\n      }\n    }\n  }\n\n  .#{$block-class__next}-row__cell {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .#{$block-class__next}-row__cell-wrapper {\n    display: flex;\n    /* Shadow DOM doesn't inherit Carbon's global border-box reset */\n    box-sizing: border-box;\n    align-items: center;\n    justify-content: space-between;\n    border-block-end: 1px solid $layer-accent-01;\n    min-block-size: $spacing-09;\n    padding-block: $spacing-03;\n    padding-inline: $spacing-05;\n  }\n\n  .#{$block-class__next}-row__content {\n    display: flex;\n    flex: 1;\n    align-items: center;\n  }\n\n  .#{$block-class__next}-row__icon {\n    display: flex;\n    align-items: center;\n    margin-inline-end: $spacing-03;\n  }\n\n  .#{$block-class__next}-row__text {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n  }\n\n  .#{$block-class__next}-row__title {\n    @include type.type-style('body-compact-01');\n\n    display: block;\n    color: $text-primary;\n  }\n\n  .#{$block-class__next}-row__subtitle {\n    @include type.type-style('label-01');\n\n    display: block;\n    color: $text-secondary;\n  }\n\n  .#{$block-class__next}-row__meta {\n    display: flex;\n    align-items: center;\n    margin-inline-start: $spacing-03;\n  }\n\n  .#{$block-class__next}-row__view-item-panel {\n    margin-inline-start: auto;\n  }\n\n  .#{$block-class__next}-row__nav-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    margin-inline-start: $spacing-03;\n    padding-block: $spacing-02;\n    padding-inline: $spacing-02;\n    transition: background-color $duration-fast-01 motion(standard, productive);\n\n    &:hover {\n      background-color: $background-hover;\n    }\n\n    &:focus {\n      outline: $spacing-01 solid $focus;\n      outline-offset: calc(-1 * $spacing-01);\n    }\n\n    svg {\n      fill: $icon-primary;\n    }\n  }\n\n  // Skeleton state\n  .#{$block-class__next}-row--skeleton {\n    cursor: default;\n    pointer-events: none;\n\n    &:hover {\n      background: none;\n    }\n\n    .#{$block-class__next}-row__skeleton-control {\n      flex: none;\n      border-radius: $spacing-01;\n      background-color: $skeleton-element;\n      block-size: $spacing-05;\n      inline-size: $spacing-05;\n      margin-inline-end: $spacing-05;\n    }\n\n    // Override cds-skeleton-icon host size to match the circular icon placeholder\n    .#{$block-class__next}-row__icon cds-skeleton-icon {\n      border-radius: 50%;\n      block-size: $spacing-07;\n      inline-size: $spacing-07;\n\n      &::before {\n        border-radius: 50%;\n        animation: none;\n      }\n    }\n\n    .#{$block-class__next}-row__skeleton-title {\n      margin-block-end: 0;\n      margin-block-start: $spacing-03;\n    }\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    .#{$block-class__next}-row {\n      transition: none;\n    }\n\n    .#{$block-class__next}-row__nav-indicator {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/es/components/add-select/add-select-selection-summary-item.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+import '@carbon/web-components/es/components/icon-button/index.js';
+import type { AddSelectItem } from '@carbon/ibm-products-utilities';
+/**
+ * Add Select Selection Summary Item — individual selected item display.
+ * @element c4p-add-select-selection-summary-item
+ * @slot default - Highest priority: replaces all rendering when populated
+ * @slot render-item - Custom full-row renderer; replaces title/subtitle/body but keeps remove button (second priority after default slot)
+ * @slot accordion-title - Custom accordion title (used when use-accordion is true)
+ * @slot accordion-body - Custom accordion body (used when use-accordion is true)
+ * @fires c4p-add-select-selection-summary-item-remove - Fired when remove button clicked; detail: { itemId }
+ */
+declare class CDSAddSelectSelectionSummaryItem extends LitElement {
+    /**
+     * Item data (set via JS property)
+     */
+    item: AddSelectItem | null;
+    /**
+     * Use accordion pattern for display
+     */
+    useAccordion: boolean;
+    /**
+     * Accessible label for the remove button
+     */
+    removeButtonLabel: string;
+    /**
+     * When true, the remove button is not rendered
+     */
+    hideRemoveButton: boolean;
+    /** Whether the default slot has assigned elements */
+    private _hasDefaultSlot;
+    /** Whether the render-item slot has assigned elements */
+    private _hasRenderItemSlot;
+    /** Whether the accordion-title slot has assigned elements */
+    private _hasAccordionTitleSlot;
+    /** Whether the accordion-body slot has assigned elements */
+    private _hasAccordionBodySlot;
+    /** Whether the custom accordion is open */
+    private _accordionOpen;
+    private _handleDefaultSlotChange;
+    private _handleAccordionTitleSlotChange;
+    private _handleAccordionBodySlotChange;
+    private _handleRenderItemSlotChange;
+    private _handleRemove;
+    private _renderDefaultItemDetails;
+    private _renderRemoveButton;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * The name of the custom event fired when the remove button is clicked.
+     * detail: { itemId: string }
+     */
+    static get eventRemove(): string;
+    static styles: any;
+}
+export default CDSAddSelectSelectionSummaryItem;
+//# sourceMappingURL=add-select-selection-summary-item.d.ts.map

package/es/components/add-select/add-select-selection-summary-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-select-selection-summary-item.d.ts","sourceRoot":"","sources":["../../../src/components/add-select/add-select-selection-summary-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAIhD,OAAO,2DAA2D,CAAC;AAKnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAKpE;;;;;;;;GAQG;AACH,cACM,gCAAiC,SAAQ,UAAU;IACvD;;OAEG;IAEH,IAAI,EAAE,aAAa,GAAG,IAAI,CAAQ;IAElC;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,iBAAiB,SAAiB;IAElC;;OAEG;IAEH,gBAAgB,UAAS;IAEzB,qDAAqD;IAErD,OAAO,CAAC,eAAe,CAAS;IAEhC,yDAAyD;IAEzD,OAAO,CAAC,kBAAkB,CAAS;IAEnC,6DAA6D;IAE7D,OAAO,CAAC,sBAAsB,CAAS;IAEvC,4DAA4D;IAE5D,OAAO,CAAC,qBAAqB,CAAS;IAEtC,2CAA2C;IAE3C,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,+BAA+B;IAMvC,OAAO,CAAC,8BAA8B;IAMtC,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,yBAAyB;IAsBjC,OAAO,CAAC,mBAAmB;IAyB3B,MAAM;IAuJN;;;OAGG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gCAAgC,CAAC"}