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

package/es/components/add-select/add-select-selection-summary-item.js

@@ -0,0 +1,279 @@
+/**
+ * Copyright IBM Corp. 2020, 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 "../../globals/settings.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
+import add_select_selection_summary_item_default$1 from "./add-select-selection-summary-item.scss.js";
+import { classMap } from "lit/directives/class-map.js";
+import { LitElement, html, nothing } from "lit";
+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 ChevronRight16 from "@carbon/icons/es/chevron--right/16";
+import SubtractAlt16 from "@carbon/icons/es/subtract--alt/16";
+//#region src/components/add-select/add-select-selection-summary-item.ts
+/**
+* @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.
+*/
+const blockClass = `c4p--add-select__next`;
+/**
+* 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 }
+*/
+let CDSAddSelectSelectionSummaryItem = class CDSAddSelectSelectionSummaryItem extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.item = null;
+		this.useAccordion = false;
+		this.removeButtonLabel = "Remove item";
+		this.hideRemoveButton = false;
+		this._hasDefaultSlot = false;
+		this._hasRenderItemSlot = false;
+		this._hasAccordionTitleSlot = false;
+		this._hasAccordionBodySlot = false;
+		this._accordionOpen = false;
+	}
+	_handleDefaultSlotChange(e) {
+		const slot = e.target;
+		this._hasDefaultSlot = slot.assignedElements({ flatten: true }).length > 0;
+	}
+	_handleAccordionTitleSlotChange(e) {
+		const slot = e.target;
+		this._hasAccordionTitleSlot = slot.assignedElements({ flatten: true }).length > 0;
+	}
+	_handleAccordionBodySlotChange(e) {
+		const slot = e.target;
+		this._hasAccordionBodySlot = slot.assignedElements({ flatten: true }).length > 0;
+	}
+	_handleRenderItemSlotChange(e) {
+		const slot = e.target;
+		this._hasRenderItemSlot = slot.assignedElements({ flatten: true }).length > 0;
+	}
+	_handleRemove() {
+		if (!this.item) return;
+		this.dispatchEvent(new CustomEvent(this.constructor.eventRemove, {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			detail: { itemId: this.item.id }
+		}));
+	}
+	_renderDefaultItemDetails() {
+		const { item } = this;
+		if (!item?.itemDetails || !Array.isArray(item.itemDetails)) return nothing;
+		if (item.itemDetails.length === 0) return nothing;
+		return html`
+      ${item.itemDetails.map(({ label, value: val }) => html`
+          <div class="${blockClass}__selection-summary-item-entry">
+            <p class="${blockClass}__selection-summary-item-header">${label}</p>
+            <p class="${blockClass}__selection-summary-item-body">
+              ${String(val)}
+            </p>
+          </div>
+        `)}
+    `;
+	}
+	_renderRemoveButton() {
+		if (this.hideRemoveButton) return nothing;
+		return html`
+      <div
+        class="${blockClass}__selection-summary-item-remove-button-container"
+      >
+        <cds-icon-button
+          tooltip-text=${this.removeButtonLabel}
+          autoalign
+          kind="ghost"
+          size="sm"
+          class="${blockClass}__selection-summary-item-remove-button"
+          @click=${(e) => {
+			e.stopPropagation();
+			this._handleRemove();
+		}}
+        >
+          ${iconLoader(SubtractAlt16, { slot: "icon" })}
+        </cds-icon-button>
+      </div>
+    `;
+	}
+	render() {
+		const { item, useAccordion } = this;
+		const itemClasses = classMap({
+			[`${blockClass}__selection-summary-item`]: true,
+			[`${blockClass}__selection-summary-item--accordion`]: useAccordion,
+			[`${blockClass}__selection-summary-item--default`]: !useAccordion
+		});
+		const defaultTitle = item ? html`
+          <div class="${blockClass}__selection-summary-item-selected-item">
+            <p class="${blockClass}__selection-summary-item-title">
+              ${item.title}
+            </p>
+            ${item.subtitle ? html`<p class="${blockClass}__selection-summary-item-subtitle">
+                  ${item.subtitle}
+                </p>` : nothing}
+          </div>
+        ` : nothing;
+		const showDefault = this._hasDefaultSlot;
+		const showRenderItem = !showDefault && this._hasRenderItemSlot;
+		const showAccordion = !showDefault && !showRenderItem && useAccordion;
+		const showPlain = !showDefault && !showRenderItem && !useAccordion;
+		return html`
+      <div class=${itemClasses}>
+        <!--
+          Each named slot exists exactly once in this shadow root.
+          Browser assigns light-DOM children to the first matching slot —
+          having duplicates causes the hidden detector to steal content.
+          Slots that are not currently "active" are hidden via display:none
+          on their wrapper; the single slot element is always present so
+          slotchange always fires reliably.
+        -->
+
+        <!-- Default slot — hidden wrapper, always present for detection -->
+        <div style=${showDefault ? "" : "display:none"}>
+          <slot @slotchange=${this._handleDefaultSlotChange}></slot>
+        </div>
+
+        <!-- render-item slot — slot content owns full width; remove button is absolute -->
+        <div
+          class="${blockClass}__selection-summary-item-render-item-wrapper"
+          style=${showRenderItem ? "" : "display:none"}
+        >
+          <slot
+            name="render-item"
+            @slotchange=${this._handleRenderItemSlotChange}
+          ></slot>
+          ${showRenderItem ? this._renderRemoveButton() : nothing}
+        </div>
+
+        <!--
+          accordion-title and accordion-body slots are always present at the
+          top shadow level — never nested inside cds-accordion-item's slot="title"
+          which crosses a shadow boundary and makes them unreachable.
+          The custom accordion heading/body is built from scratch so all slots
+          remain direct shadow children.
+        -->
+
+        <!--
+          accordion-title and accordion-body each exist exactly once.
+          Their wrappers are always in the DOM (so slotchange fires);
+          display:none hides them when not applicable.
+        -->
+
+        <!-- accordion mode wrapper — always rendered when useAccordion, hidden otherwise -->
+        <div style=${showAccordion ? "" : "display:none"}>
+          <div class="${blockClass}__selection-summary-item-accordion">
+            <button
+              type="button"
+              class="${blockClass}__selection-summary-item-accordion-heading"
+              aria-expanded=${this._accordionOpen}
+              @click=${() => {
+			this._accordionOpen = !this._accordionOpen;
+		}}
+            >
+              <span
+                class="${blockClass}__selection-summary-item-accordion-arrow ${this._accordionOpen ? `${blockClass}__selection-summary-item-accordion-arrow--open` : ""}"
+              >
+                ${iconLoader(ChevronRight16, {})}
+              </span>
+
+              <!-- accordion-title: use span (valid inside button); display:block via CSS -->
+              <span
+                class="${blockClass}__selection-summary-item-accordion-title"
+                style=${this._hasAccordionTitleSlot ? "display:none" : ""}
+              >
+                ${defaultTitle}
+              </span>
+              <span
+                class="${blockClass}__selection-summary-item-accordion-title ${blockClass}__selection-summary-item-accordion-title--slot"
+                style=${this._hasAccordionTitleSlot ? "" : "display:none"}
+              >
+                <slot
+                  name="accordion-title"
+                  @slotchange=${this._handleAccordionTitleSlotChange}
+                ></slot>
+              </span>
+
+              ${this._renderRemoveButton()}
+            </button>
+
+            <!-- accordion-body: shown only when open -->
+            <div
+              class="${blockClass}__selection-summary-item-accordion-body"
+              style=${this._accordionOpen ? "" : "display:none"}
+            >
+              <!-- accordion-body slot — one instance, always in DOM -->
+              <div style=${this._hasAccordionBodySlot ? "display:none" : ""}>
+                ${this._renderDefaultItemDetails()}
+              </div>
+              <div style=${this._hasAccordionBodySlot ? "" : "display:none"}>
+                <slot
+                  name="accordion-body"
+                  @slotchange=${this._handleAccordionBodySlotChange}
+                ></slot>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- plain (non-accordion) mode -->
+        ${showPlain ? html`
+              <div class="${blockClass}__selection-summary-item-title-wrapper">
+                ${defaultTitle} ${this._renderRemoveButton()}
+              </div>
+              <div class="${blockClass}__selection-summary-item-content">
+                ${this._renderDefaultItemDetails()}
+              </div>
+            ` : nothing}
+      </div>
+    `;
+	}
+	/**
+	* The name of the custom event fired when the remove button is clicked.
+	* detail: { itemId: string }
+	*/
+	static get eventRemove() {
+		return `c4p-add-select-selection-summary-item-remove`;
+	}
+	static {
+		this.styles = add_select_selection_summary_item_default$1;
+	}
+};
+__decorate([property({ attribute: false })], CDSAddSelectSelectionSummaryItem.prototype, "item", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "use-accordion",
+	reflect: true
+})], CDSAddSelectSelectionSummaryItem.prototype, "useAccordion", void 0);
+__decorate([property({
+	type: String,
+	attribute: "remove-button-label"
+})], CDSAddSelectSelectionSummaryItem.prototype, "removeButtonLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "hide-remove-button"
+})], CDSAddSelectSelectionSummaryItem.prototype, "hideRemoveButton", void 0);
+__decorate([state()], CDSAddSelectSelectionSummaryItem.prototype, "_hasDefaultSlot", void 0);
+__decorate([state()], CDSAddSelectSelectionSummaryItem.prototype, "_hasRenderItemSlot", void 0);
+__decorate([state()], CDSAddSelectSelectionSummaryItem.prototype, "_hasAccordionTitleSlot", void 0);
+__decorate([state()], CDSAddSelectSelectionSummaryItem.prototype, "_hasAccordionBodySlot", void 0);
+__decorate([state()], CDSAddSelectSelectionSummaryItem.prototype, "_accordionOpen", void 0);
+CDSAddSelectSelectionSummaryItem = __decorate([carbonElement(`c4p-add-select-selection-summary-item`)], CDSAddSelectSelectionSummaryItem);
+var add_select_selection_summary_item_default = CDSAddSelectSelectionSummaryItem;
+//#endregion
+export { add_select_selection_summary_item_default as default };
+
+//# sourceMappingURL=add-select-selection-summary-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"add-select-selection-summary-item.js","names":["styles","customElement"],"sources":["../../../src/components/add-select/add-select-selection-summary-item.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/icon-button/index.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport SubtractAlt16 from '@carbon/icons/es/subtract--alt/16';\nimport ChevronRight16 from '@carbon/icons/es/chevron--right/16';\nimport { prefix } from '../../globals/settings';\nimport type { AddSelectItem } from '@carbon/ibm-products-utilities';\nimport styles from './add-select-selection-summary-item.scss?lit';\n\nconst blockClass = `${prefix}--add-select__next`;\n\n/**\n * Add Select Selection Summary Item — individual selected item display.\n * @element c4p-add-select-selection-summary-item\n * @slot default - Highest priority: replaces all rendering when populated\n * @slot render-item - Custom full-row renderer; replaces title/subtitle/body but keeps remove button (second priority after default slot)\n * @slot accordion-title - Custom accordion title (used when use-accordion is true)\n * @slot accordion-body - Custom accordion body (used when use-accordion is true)\n * @fires c4p-add-select-selection-summary-item-remove - Fired when remove button clicked; detail: { itemId }\n */\n@customElement(`${prefix}-add-select-selection-summary-item`)\nclass CDSAddSelectSelectionSummaryItem extends LitElement {\n  /**\n   * Item data (set via JS property)\n   */\n  @property({ attribute: false })\n  item: AddSelectItem | null = null;\n\n  /**\n   * Use accordion pattern for display\n   */\n  @property({ type: Boolean, attribute: 'use-accordion', reflect: true })\n  useAccordion = false;\n\n  /**\n   * Accessible label for the remove button\n   */\n  @property({ type: String, attribute: 'remove-button-label' })\n  removeButtonLabel = 'Remove item';\n\n  /**\n   * When true, the remove button is not rendered\n   */\n  @property({ type: Boolean, attribute: 'hide-remove-button' })\n  hideRemoveButton = false;\n\n  /** Whether the default slot has assigned elements */\n  @state()\n  private _hasDefaultSlot = false;\n\n  /** Whether the render-item slot has assigned elements */\n  @state()\n  private _hasRenderItemSlot = false;\n\n  /** Whether the accordion-title slot has assigned elements */\n  @state()\n  private _hasAccordionTitleSlot = false;\n\n  /** Whether the accordion-body slot has assigned elements */\n  @state()\n  private _hasAccordionBodySlot = false;\n\n  /** Whether the custom accordion is open */\n  @state()\n  private _accordionOpen = false;\n\n  private _handleDefaultSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasDefaultSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _handleAccordionTitleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasAccordionTitleSlot =\n      slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _handleAccordionBodySlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasAccordionBodySlot =\n      slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _handleRenderItemSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasRenderItemSlot =\n      slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  private _handleRemove() {\n    if (!this.item) {\n      return;\n    }\n    this.dispatchEvent(\n      new CustomEvent(\n        (\n          this.constructor as typeof CDSAddSelectSelectionSummaryItem\n        ).eventRemove,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: { itemId: this.item.id },\n        }\n      )\n    );\n  }\n\n  private _renderDefaultItemDetails() {\n    const { item } = this;\n    if (!item?.itemDetails || !Array.isArray(item.itemDetails)) {\n      return nothing;\n    }\n    if (item.itemDetails.length === 0) {\n      return nothing;\n    }\n    return html`\n      ${item.itemDetails.map(\n        ({ label, value: val }) => html`\n          <div class=\"${blockClass}__selection-summary-item-entry\">\n            <p class=\"${blockClass}__selection-summary-item-header\">${label}</p>\n            <p class=\"${blockClass}__selection-summary-item-body\">\n              ${String(val)}\n            </p>\n          </div>\n        `\n      )}\n    `;\n  }\n\n  private _renderRemoveButton() {\n    if (this.hideRemoveButton) {\n      return nothing;\n    }\n    return html`\n      <div\n        class=\"${blockClass}__selection-summary-item-remove-button-container\"\n      >\n        <cds-icon-button\n          tooltip-text=${this.removeButtonLabel}\n          autoalign\n          kind=\"ghost\"\n          size=\"sm\"\n          class=\"${blockClass}__selection-summary-item-remove-button\"\n          @click=${(e: Event) => {\n            e.stopPropagation();\n            this._handleRemove();\n          }}\n        >\n          ${iconLoader(SubtractAlt16, { slot: 'icon' })}\n        </cds-icon-button>\n      </div>\n    `;\n  }\n\n  render() {\n    const { item, useAccordion } = this;\n\n    const itemClasses = classMap({\n      [`${blockClass}__selection-summary-item`]: true,\n      [`${blockClass}__selection-summary-item--accordion`]: useAccordion,\n      [`${blockClass}__selection-summary-item--default`]: !useAccordion,\n    });\n\n    const defaultTitle = item\n      ? html`\n          <div class=\"${blockClass}__selection-summary-item-selected-item\">\n            <p class=\"${blockClass}__selection-summary-item-title\">\n              ${item.title}\n            </p>\n            ${item.subtitle\n              ? html`<p class=\"${blockClass}__selection-summary-item-subtitle\">\n                  ${item.subtitle}\n                </p>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n\n    // Priority flags (high → low):\n    // 1. default slot has content\n    // 2. render-item slot has content\n    // 3. useAccordion (with optional accordion-title / accordion-body slots)\n    // 4. plain default rendering from item data\n\n    const showDefault = this._hasDefaultSlot;\n    const showRenderItem = !showDefault && this._hasRenderItemSlot;\n    const showAccordion = !showDefault && !showRenderItem && useAccordion;\n    const showPlain = !showDefault && !showRenderItem && !useAccordion;\n\n    return html`\n      <div class=${itemClasses}>\n        <!--\n          Each named slot exists exactly once in this shadow root.\n          Browser assigns light-DOM children to the first matching slot —\n          having duplicates causes the hidden detector to steal content.\n          Slots that are not currently \"active\" are hidden via display:none\n          on their wrapper; the single slot element is always present so\n          slotchange always fires reliably.\n        -->\n\n        <!-- Default slot — hidden wrapper, always present for detection -->\n        <div style=${showDefault ? '' : 'display:none'}>\n          <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n        </div>\n\n        <!-- render-item slot — slot content owns full width; remove button is absolute -->\n        <div\n          class=\"${blockClass}__selection-summary-item-render-item-wrapper\"\n          style=${showRenderItem ? '' : 'display:none'}\n        >\n          <slot\n            name=\"render-item\"\n            @slotchange=${this._handleRenderItemSlotChange}\n          ></slot>\n          ${showRenderItem ? this._renderRemoveButton() : nothing}\n        </div>\n\n        <!--\n          accordion-title and accordion-body slots are always present at the\n          top shadow level — never nested inside cds-accordion-item's slot=\"title\"\n          which crosses a shadow boundary and makes them unreachable.\n          The custom accordion heading/body is built from scratch so all slots\n          remain direct shadow children.\n        -->\n\n        <!--\n          accordion-title and accordion-body each exist exactly once.\n          Their wrappers are always in the DOM (so slotchange fires);\n          display:none hides them when not applicable.\n        -->\n\n        <!-- accordion mode wrapper — always rendered when useAccordion, hidden otherwise -->\n        <div style=${showAccordion ? '' : 'display:none'}>\n          <div class=\"${blockClass}__selection-summary-item-accordion\">\n            <button\n              type=\"button\"\n              class=\"${blockClass}__selection-summary-item-accordion-heading\"\n              aria-expanded=${this._accordionOpen}\n              @click=${() => {\n                this._accordionOpen = !this._accordionOpen;\n              }}\n            >\n              <span\n                class=\"${blockClass}__selection-summary-item-accordion-arrow ${this\n                  ._accordionOpen\n                  ? `${blockClass}__selection-summary-item-accordion-arrow--open`\n                  : ''}\"\n              >\n                ${iconLoader(ChevronRight16, {})}\n              </span>\n\n              <!-- accordion-title: use span (valid inside button); display:block via CSS -->\n              <span\n                class=\"${blockClass}__selection-summary-item-accordion-title\"\n                style=${this._hasAccordionTitleSlot ? 'display:none' : ''}\n              >\n                ${defaultTitle}\n              </span>\n              <span\n                class=\"${blockClass}__selection-summary-item-accordion-title ${blockClass}__selection-summary-item-accordion-title--slot\"\n                style=${this._hasAccordionTitleSlot ? '' : 'display:none'}\n              >\n                <slot\n                  name=\"accordion-title\"\n                  @slotchange=${this._handleAccordionTitleSlotChange}\n                ></slot>\n              </span>\n\n              ${this._renderRemoveButton()}\n            </button>\n\n            <!-- accordion-body: shown only when open -->\n            <div\n              class=\"${blockClass}__selection-summary-item-accordion-body\"\n              style=${this._accordionOpen ? '' : 'display:none'}\n            >\n              <!-- accordion-body slot — one instance, always in DOM -->\n              <div style=${this._hasAccordionBodySlot ? 'display:none' : ''}>\n                ${this._renderDefaultItemDetails()}\n              </div>\n              <div style=${this._hasAccordionBodySlot ? '' : 'display:none'}>\n                <slot\n                  name=\"accordion-body\"\n                  @slotchange=${this._handleAccordionBodySlotChange}\n                ></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- plain (non-accordion) mode -->\n        ${showPlain\n          ? html`\n              <div class=\"${blockClass}__selection-summary-item-title-wrapper\">\n                ${defaultTitle} ${this._renderRemoveButton()}\n              </div>\n              <div class=\"${blockClass}__selection-summary-item-content\">\n                ${this._renderDefaultItemDetails()}\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when the remove button is clicked.\n   * detail: { itemId: string }\n   */\n  static get eventRemove() {\n    return `${prefix}-add-select-selection-summary-item-remove`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSAddSelectSelectionSummaryItem;\n"],"mappings":"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"}

package/es/components/add-select/add-select-selection-summary-item.scss.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2020, 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 { css } from "lit";
+//#region src/components/add-select/add-select-selection-summary-item.scss?lit
+var add_select_selection_summary_item_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-selection-summary-item){display:block}:host(c4p-add-select-selection-summary-item) .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}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item:hover{background-color:var(--cds-layer-hover-01,#e8e8e8)}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-accordion-heading{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:var(--cds-text-primary,#161616);cursor:pointer;display:flex;inline-size:100%;padding-block:.75rem;padding-inline:1rem;position:relative}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-accordion-heading:hover{background-color:var(--cds-layer-hover-01,#e8e8e8)}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-accordion-heading:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-accordion-heading:focus:not(:focus-visible){outline:none}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-accordion-arrow{align-items:center;display:flex;flex-shrink:0;margin-inline-end:.5rem;margin-inline-start:0;transform:rotate(90deg);transition:transform 70ms cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-accordion-arrow{transition:none}}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-accordion-arrow svg{fill:var(--cds-icon-primary,#161616)}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-accordion-arrow--open{transform:rotate(-90deg)}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-accordion-title{display:block;flex:1;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-inline-end:2rem;text-align:start}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-accordion-title--slot{align-items:flex-start;display:flex}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-accordion-body{padding-block:1rem;padding-inline:1rem}:host(c4p-add-select-selection-summary-item) .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}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-content{padding-block-end:.75rem;padding-inline:1rem}:host(c4p-add-select-selection-summary-item) .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)}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-title-wrapper{align-items:center;display:flex;justify-content:space-between}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-selected-item{display:flex;flex:1;flex-direction:column}:host(c4p-add-select-selection-summary-item) .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);margin:0}:host(c4p-add-select-selection-summary-item) .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);margin:0}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-content{margin-block-start:0}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-entry{margin-block-end:1rem}:host(c4p-add-select-selection-summary-item) .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:0;margin-block-end:.5rem}:host(c4p-add-select-selection-summary-item) .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:0;margin-block-end:1rem}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-render-item-wrapper{position:relative}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-remove-button-container{align-items:center;display:inline-flex;justify-content:center;padding-inline-start:.5rem}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-accordion-heading .c4p--add-select__next__selection-summary-item-remove-button-container,:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-render-item-wrapper .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%)}:host(c4p-add-select-selection-summary-item) .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){:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item-remove-button{transition:none}}:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item:focus-within .c4p--add-select__next__selection-summary-item-remove-button,:host(c4p-add-select-selection-summary-item) .c4p--add-select__next__selection-summary-item:hover .c4p--add-select__next__selection-summary-item-remove-button{opacity:1}"]);
+//#endregion
+export { add_select_selection_summary_item_default as default };
+
+//# sourceMappingURL=add-select-selection-summary-item.scss.js.map

package/es/components/add-select/add-select-selection-summary-item.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-select-selection-summary-item.scss.js","names":[],"sources":["../../../src/components/add-select/add-select-selection-summary-item.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@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@use '@carbon/ibm-products-styles/scss/components/AddSelect/add-select_next'\n  as *;\n\n:host(#{$prefix}-add-select-selection-summary-item) {\n  display: block;\n\n  // ── Wrapper ─────────────────────────────────────────────────────────────────\n  .#{$block-class__next}__selection-summary-item {\n    position: relative;\n    background-color: $layer-01;\n    border-block-end: 1px solid $border-subtle-01;\n\n    &:hover {\n      background-color: $layer-hover-01;\n    }\n  }\n\n  // ── Accordion variant (custom — avoids shadow-boundary slot problems) ─────────\n\n  .#{$block-class__next}__selection-summary-item-accordion {\n    // No extra borders — wrapper owns the border-block-end\n  }\n\n  .#{$block-class__next}__selection-summary-item-accordion-heading {\n    position: relative; // anchor for absolutely-positioned remove button\n    display: flex;\n    align-items: center;\n    appearance: none;\n    border: none; // stylelint-disable-line order/properties-order\n    background: none;\n    color: $text-primary;\n    cursor: pointer;\n    inline-size: 100%;\n    // Figma: py-[10px] px-[16px]\n    padding-block: $spacing-04;\n    padding-inline: $spacing-05;\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    &:focus:not(:focus-visible) {\n      outline: none;\n    }\n  }\n\n  .#{$block-class__next}__selection-summary-item-accordion-arrow {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    margin-inline-end: $spacing-03; // 8px gap to title (= 16px total from edge)\n    margin-inline-start: 0;\n    transform: rotate(90deg); // collapsed: chevron points down ∨\n    transition: transform $duration-fast-01 motion(standard, productive);\n\n    @media screen and (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    svg {\n      fill: $icon-primary;\n    }\n\n    &--open {\n      transform: rotate(-90deg); // expanded: chevron points up ∧\n    }\n  }\n\n  .#{$block-class__next}__selection-summary-item-accordion-title {\n    @include type.type-style('body-compact-01');\n\n    display: block; // <span> inside <button> needs explicit block to honour flex layout\n    flex: 1;\n    padding-inline-end: $spacing-07; // Reserve 32px — prevents overlap with remove button\n    text-align: start;\n\n    // When wrapping slotted content, act as a flex container so the\n    // slot children (e.g. UserAvatar + text group) lay out correctly\n    &--slot {\n      display: flex;\n      align-items: flex-start;\n    }\n  }\n\n  .#{$block-class__next}__selection-summary-item-accordion-body {\n    // Figma: p-[16px] on all sides for expanded content\n    padding-block: $spacing-05;\n    padding-inline: $spacing-05;\n  }\n\n  // ── Non-accordion (default) variant ─────────────────────────────────────────\n  .#{$block-class__next}__selection-summary-item--default {\n    .#{$block-class__next}__selection-summary-item-title-wrapper {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding-block: $spacing-04; // 10px\n      padding-inline: $spacing-05; // 16px\n    }\n\n    .#{$block-class__next}__selection-summary-item-content {\n      padding-block-end: $spacing-04;\n      padding-inline: $spacing-05;\n    }\n\n    .#{$block-class__next}__selection-summary-item-title {\n      @include type.type-style('heading-compact-01');\n    }\n  }\n\n  // ── Shared item sub-elements ─────────────────────────────────────────────────\n  .#{$block-class__next}__selection-summary-item-title-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .#{$block-class__next}__selection-summary-item-selected-item {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n  }\n\n  .#{$block-class__next}__selection-summary-item-title {\n    @include type.type-style('body-compact-01');\n\n    margin: 0;\n    color: $text-primary;\n  }\n\n  .#{$block-class__next}__selection-summary-item-subtitle {\n    @include type.type-style('body-01');\n\n    margin: 0;\n    color: $text-secondary;\n  }\n\n  .#{$block-class__next}__selection-summary-item-content {\n    margin-block-start: 0;\n  }\n\n  .#{$block-class__next}__selection-summary-item-entry {\n    margin-block-end: $spacing-05;\n  }\n\n  .#{$block-class__next}__selection-summary-item-header {\n    @include type.type-style('label-01');\n\n    margin: 0;\n    color: $text-secondary;\n    margin-block-end: $spacing-03;\n  }\n\n  .#{$block-class__next}__selection-summary-item-body {\n    @include type.type-style('body-01');\n\n    margin: 0;\n    margin-block-end: $spacing-05;\n  }\n\n  // ── Remove button ────────────────────────────────────────────────────────────\n\n  // render-item wrapper — `position:relative` anchors the absolute remove button;\n  // no flex so the slot content's own layout owns the full row width.\n  .#{$block-class__next}__selection-summary-item-render-item-wrapper {\n    position: relative;\n  }\n\n  // Default (non-accordion) — inline at the right of the title row.\n  .#{$block-class__next}__selection-summary-item-remove-button-container {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding-inline-start: $spacing-03; // 8px gap before the 32px button\n  }\n\n  // Accordion heading and render-item — absolutely positioned, vertically centred.\n  // Both parents have `position: relative`.\n  .#{$block-class__next}__selection-summary-item-accordion-heading\n    .#{$block-class__next}__selection-summary-item-remove-button-container,\n  .#{$block-class__next}__selection-summary-item-render-item-wrapper\n    .#{$block-class__next}__selection-summary-item-remove-button-container {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: $spacing-05; // 16px from inline-end\n    padding-inline-start: 0;\n    transform: translateY(-50%);\n  }\n\n  // Remove button is hidden until hover/focus\n  .#{$block-class__next}__selection-summary-item-remove-button {\n    opacity: 0;\n    transition: opacity $duration-fast-01 motion(standard, productive);\n\n    @media screen and (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  .#{$block-class__next}__selection-summary-item:hover\n    .#{$block-class__next}__selection-summary-item-remove-button,\n  .#{$block-class__next}__selection-summary-item:focus-within\n    .#{$block-class__next}__selection-summary-item-remove-button {\n    opacity: 1;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,48 @@
+/**
+ * @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/tag/index.js';
+import '@carbon/web-components/es/components/icon-button/index.js';
+/**
+ * Add Select Selection Summary — displays the list of selected items.
+ * @element c4p-add-select-selection-summary
+ * @slot default - SelectionSummaryItem components or custom body content
+ * @slot header - Replaces the entire header section
+ * @slot header-actions - Custom actions alongside the edit icon
+ * @slot empty-state - Shown when selectedItemCount is 0 or not set
+ * @fires c4p-add-select-selection-summary-edit - Fired when edit icon is clicked
+ */
+declare class CDSAddSelectSelectionSummary extends LitElement {
+    /**
+     * Panel title
+     */
+    title: string;
+    /**
+     * Number of selected items — shown as a badge next to the title when provided.
+     * Badge is hidden when this is omitted/undefined.
+     */
+    selectedItemCount: number | undefined;
+    /**
+     * Show edit icon next to title
+     */
+    showEditIcon: boolean;
+    /**
+     * Accessible label for the edit icon button
+     */
+    editIconDescription: string;
+    private _handleEdit;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * The name of the custom event fired when the edit icon is clicked.
+     */
+    static get eventEdit(): string;
+    static styles: any;
+}
+export default CDSAddSelectSelectionSummary;
+//# sourceMappingURL=add-select-selection-summary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"add-select-selection-summary.d.ts","sourceRoot":"","sources":["../../../src/components/add-select/add-select-selection-summary.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAGhD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,2DAA2D,CAAC;AAQnE;;;;;;;;GAQG;AACH,cACM,4BAA6B,SAAQ,UAAU;IACnD;;OAEG;IAEH,KAAK,SAAoB;IAEzB;;;OAGG;IAEH,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAa;IAElD;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,mBAAmB,SAAqB;IAExC,OAAO,CAAC,WAAW;IASnB,MAAM;IA+CN;;OAEG;IACH,MAAM,KAAK,SAAS,WAEnB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,4BAA4B,CAAC"}

package/es/components/add-select/add-select-selection-summary.js

@@ -0,0 +1,118 @@
+/**
+ * Copyright IBM Corp. 2020, 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 "../../globals/settings.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
+import add_select_selection_summary_default$1 from "./add-select-selection-summary.scss.js";
+import { LitElement, html, nothing } from "lit";
+import { property } 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 Edit16 from "@carbon/icons/es/edit/16";
+import "@carbon/web-components/es/components/tag/index.js";
+//#region src/components/add-select/add-select-selection-summary.ts
+/**
+* @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.
+*/
+const blockClass = `c4p--add-select__next`;
+/**
+* Add Select Selection Summary — displays the list of selected items.
+* @element c4p-add-select-selection-summary
+* @slot default - SelectionSummaryItem components or custom body content
+* @slot header - Replaces the entire header section
+* @slot header-actions - Custom actions alongside the edit icon
+* @slot empty-state - Shown when selectedItemCount is 0 or not set
+* @fires c4p-add-select-selection-summary-edit - Fired when edit icon is clicked
+*/
+let CDSAddSelectSelectionSummary = class CDSAddSelectSelectionSummary extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.title = "Selected items";
+		this.selectedItemCount = void 0;
+		this.showEditIcon = false;
+		this.editIconDescription = "Edit selections";
+	}
+	_handleEdit() {
+		this.dispatchEvent(new CustomEvent(this.constructor.eventEdit, {
+			bubbles: true,
+			cancelable: true,
+			composed: true
+		}));
+	}
+	render() {
+		const { title, selectedItemCount, showEditIcon, editIconDescription } = this;
+		const showBody = selectedItemCount !== void 0 && selectedItemCount > 0;
+		return html`
+      <div class="${blockClass}__selection-summary">
+        <!-- Header -->
+        <div class="${blockClass}__selection-summary-header">
+          <slot name="header">
+            <p class="${blockClass}__selection-summary-title">${title}</p>
+            ${selectedItemCount !== void 0 ? html`<cds-tag type="gray" size="sm"
+                  >${selectedItemCount}</cds-tag
+                >` : nothing}
+            ${showEditIcon ? html`
+                  <div class="${blockClass}__selection-summary-header-actions">
+                    <slot name="header-actions"></slot>
+                    <cds-icon-button
+                      tooltip-text=${editIconDescription}
+                      autoalign
+                      kind="ghost"
+                      size="sm"
+                      class="${blockClass}__selection-summary-edit-button"
+                      @click=${this._handleEdit}
+                    >
+                      ${iconLoader(Edit16, { slot: "icon" })}
+                    </cds-icon-button>
+                  </div>
+                ` : html`<slot name="header-actions"></slot>`}
+          </slot>
+        </div>
+
+        <!-- Body: empty state or items -->
+        <div class="${blockClass}__selection-summary-body">
+          ${showBody ? html`<slot></slot>` : html`<slot name="empty-state"></slot>`}
+        </div>
+      </div>
+    `;
+	}
+	/**
+	* The name of the custom event fired when the edit icon is clicked.
+	*/
+	static get eventEdit() {
+		return `c4p-add-select-selection-summary-edit`;
+	}
+	static {
+		this.styles = add_select_selection_summary_default$1;
+	}
+};
+__decorate([property({ type: String })], CDSAddSelectSelectionSummary.prototype, "title", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "selected-item-count"
+})], CDSAddSelectSelectionSummary.prototype, "selectedItemCount", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-edit-icon",
+	reflect: true
+})], CDSAddSelectSelectionSummary.prototype, "showEditIcon", void 0);
+__decorate([property({
+	type: String,
+	attribute: "edit-icon-description"
+})], CDSAddSelectSelectionSummary.prototype, "editIconDescription", void 0);
+CDSAddSelectSelectionSummary = __decorate([carbonElement(`c4p-add-select-selection-summary`)], CDSAddSelectSelectionSummary);
+var add_select_selection_summary_default = CDSAddSelectSelectionSummary;
+//#endregion
+export { add_select_selection_summary_default as default };
+
+//# sourceMappingURL=add-select-selection-summary.js.map

package/es/components/add-select/add-select-selection-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-select-selection-summary.js","names":["styles","customElement"],"sources":["../../../src/components/add-select/add-select-selection-summary.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 { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es/components/tag/index.js';\nimport '@carbon/web-components/es/components/icon-button/index.js';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport Edit16 from '@carbon/icons/es/edit/16';\nimport { prefix } from '../../globals/settings';\nimport styles from './add-select-selection-summary.scss?lit';\n\nconst blockClass = `${prefix}--add-select__next`;\n\n/**\n * Add Select Selection Summary — displays the list of selected items.\n * @element c4p-add-select-selection-summary\n * @slot default - SelectionSummaryItem components or custom body content\n * @slot header - Replaces the entire header section\n * @slot header-actions - Custom actions alongside the edit icon\n * @slot empty-state - Shown when selectedItemCount is 0 or not set\n * @fires c4p-add-select-selection-summary-edit - Fired when edit icon is clicked\n */\n@customElement(`${prefix}-add-select-selection-summary`)\nclass CDSAddSelectSelectionSummary extends LitElement {\n  /**\n   * Panel title\n   */\n  @property({ type: String })\n  title = 'Selected items';\n\n  /**\n   * Number of selected items — shown as a badge next to the title when provided.\n   * Badge is hidden when this is omitted/undefined.\n   */\n  @property({ type: Number, attribute: 'selected-item-count' })\n  selectedItemCount: number | undefined = undefined;\n\n  /**\n   * Show edit icon next to title\n   */\n  @property({ type: Boolean, attribute: 'show-edit-icon', reflect: true })\n  showEditIcon = false;\n\n  /**\n   * Accessible label for the edit icon button\n   */\n  @property({ type: String, attribute: 'edit-icon-description' })\n  editIconDescription = 'Edit selections';\n\n  private _handleEdit() {\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSAddSelectSelectionSummary).eventEdit,\n        { bubbles: true, cancelable: true, composed: true }\n      )\n    );\n  }\n\n  render() {\n    const { title, selectedItemCount, showEditIcon, editIconDescription } =\n      this;\n\n    const showBody = selectedItemCount !== undefined && selectedItemCount > 0;\n\n    return html`\n      <div class=\"${blockClass}__selection-summary\">\n        <!-- Header -->\n        <div class=\"${blockClass}__selection-summary-header\">\n          <slot name=\"header\">\n            <p class=\"${blockClass}__selection-summary-title\">${title}</p>\n            ${selectedItemCount !== undefined\n              ? html`<cds-tag type=\"gray\" size=\"sm\"\n                  >${selectedItemCount}</cds-tag\n                >`\n              : nothing}\n            ${showEditIcon\n              ? html`\n                  <div class=\"${blockClass}__selection-summary-header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                    <cds-icon-button\n                      tooltip-text=${editIconDescription}\n                      autoalign\n                      kind=\"ghost\"\n                      size=\"sm\"\n                      class=\"${blockClass}__selection-summary-edit-button\"\n                      @click=${this._handleEdit}\n                    >\n                      ${iconLoader(Edit16, { slot: 'icon' })}\n                    </cds-icon-button>\n                  </div>\n                `\n              : html`<slot name=\"header-actions\"></slot>`}\n          </slot>\n        </div>\n\n        <!-- Body: empty state or items -->\n        <div class=\"${blockClass}__selection-summary-body\">\n          ${showBody\n            ? html`<slot></slot>`\n            : html`<slot name=\"empty-state\"></slot>`}\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when the edit icon is clicked.\n   */\n  static get eventEdit() {\n    return `${prefix}-add-select-selection-summary-edit`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSAddSelectSelectionSummary;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,aAAa;;;;;;;;;;AAWnB,IAAA,+BAAA,MACM,qCAAqC,WAAW;;;eAK5C;2BAOgC,KAAA;sBAMzB;6BAMO;;CAEtB,cAAsB;AACpB,OAAK,cACH,IAAI,YACD,KAAK,YAAoD,WAC1D;GAAE,SAAS;GAAM,YAAY;GAAM,UAAU;GAAM,CACpD,CACF;;CAGH,SAAS;EACP,MAAM,EAAE,OAAO,mBAAmB,cAAc,wBAC9C;EAEF,MAAM,WAAW,sBAAsB,KAAA,KAAa,oBAAoB;AAExE,SAAO,IAAI;oBACK,WAAW;;sBAET,WAAW;;wBAET,WAAW,6BAA6B,MAAM;cACxD,sBAAsB,KAAA,IACpB,IAAI;qBACC,kBAAkB;qBAEvB,QAAQ;cACV,eACE,IAAI;gCACY,WAAW;;;qCAGN,oBAAoB;;;;+BAI1B,WAAW;+BACX,KAAK,YAAY;;wBAExB,WAAW,QAAQ,EAAE,MAAM,QAAQ,CAAC,CAAC;;;oBAI7C,IAAI,sCAAsC;;;;;sBAKpC,WAAW;YACrB,WACE,IAAI,kBACJ,IAAI,mCAAmC;;;;;;;;CASnD,WAAW,YAAY;AACrB,SAAO;;;gBAGOA;;;YArFf,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,6BAAA,WAAA,SAAA,KAAA,EAAA;YAO1B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAuB,CAAC,CAAA,EAAA,6BAAA,WAAA,qBAAA,KAAA,EAAA;YAM5D,SAAS;CAAE,MAAM;CAAS,WAAW;CAAkB,SAAS;CAAM,CAAC,CAAA,EAAA,6BAAA,WAAA,gBAAA,KAAA,EAAA;YAMvE,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAyB,CAAC,CAAA,EAAA,6BAAA,WAAA,uBAAA,KAAA,EAAA;2CAxBhEC,cAAc,mCAAyC,CAAA,EAAA,6BAAA;AA6FxD,IAAA,uCAAe"}