npm - @carbon/ibm-products-web-components - Versions diffs - 0.45.0 → 0.46.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

package/es-custom/components/add-select/add-select-row.js CHANGED Viewed

@@ -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-custom/components/icon-button/index.js';
+import '@carbon/web-components/es-custom/components/skeleton-text/index.js';
 import '@carbon/web-components/es-custom/components/checkbox/index.js';
 import '@carbon/web-components/es-custom/components/radio-button/index.js';
+import '@carbon/web-components/es-custom/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-custom-skeleton-icon></cds-custom-skeleton-icon>
+                      </div>
+                    ` : nothing}
+                <div class="${blockClass}__text">
+                  <cds-custom-skeleton-text
+                    class="${blockClass}__skeleton-title"
+                  ></cds-custom-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-custom-checkbox
                     class="${blockClass}__checkbox"
                     ?checked=${selected}
+                    ?indeterminate=${indeterminate}
                     ?disabled=${disabled}
                     @cds-custom-checkbox-changed=${handleSelect}
                     label-text=${title}
                     ?hide-label=${true}
                     tabindex="-1"
-                  >
-                  </cds-custom-checkbox>
+                  ></cds-custom-checkbox>
                 ` : html`
                   <cds-custom-radio-button
+                    class="${blockClass}__radio"
                     ?checked=${selected}
                     ?disabled=${disabled}
                     @cds-custom-radio-button-changed=${handleSelect}
-                    label-text=${title}
+                    label-text=" "
+                    aria-label=${title}
                     value=${itemId}
                     tabindex="-1"
-                  >
-                  </cds-custom-radio-button>
+                  ></cds-custom-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-custom-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-custom-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-custom/components/add-select/add-select-row.js.map CHANGED Viewed

	@@ -1 +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-custom/components/checkbox/index.js';\nimport '@carbon/web-components/es-custom/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-custom-checkbox\n class=\"${blockClass}__checkbox\"\n ?checked=${selected}\n ?disabled=${disabled}\n @cds-custom-checkbox-changed=${handleSelect}\n label-text=${title}\n ?hide-label=${true}\n tabindex=\"-1\"\n >\n </cds-custom-checkbox>\n `\n : html`\n <cds-custom-radio-button\n ?checked=${selected}\n ?disabled=${disabled}\n @cds-custom-radio-button-changed=${handleSelect}\n label-text=${title}\n value=${itemId}\n tabindex=\"-1\"\n >\n </cds-custom-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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"}
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, 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-custom/components/checkbox/index.js';\nimport '@carbon/web-components/es-custom/components/radio-button/index.js';\nimport '@carbon/web-components/es-custom/components/skeleton-text/index.js';\nimport '@carbon/web-components/es-custom/components/skeleton-icon/index.js';\nimport '@carbon/web-components/es-custom/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-custom-skeleton-icon></cds-custom-skeleton-icon>\n </div>\n `\n : nothing}\n <div class=\"${blockClass}__text\">\n <cds-custom-skeleton-text\n class=\"${blockClass}__skeleton-title\"\n ></cds-custom-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-custom-checkbox\n class=\"${blockClass}__checkbox\"\n ?checked=${selected}\n ?indeterminate=${indeterminate}\n ?disabled=${disabled}\n @cds-custom-checkbox-changed=${handleSelect}\n label-text=${title}\n ?hide-label=${true}\n tabindex=\"-1\"\n ></cds-custom-checkbox>\n `\n : html`\n <cds-custom-radio-button\n class=\"${blockClass}__radio\"\n ?checked=${selected}\n ?disabled=${disabled}\n @cds-custom-radio-button-changed=${handleSelect}\n label-text=\" \"\n aria-label=${title}\n value=${itemId}\n tabindex=\"-1\"\n ></cds-custom-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-custom-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-custom-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-custom/components/add-select/add-select-row.scss.js CHANGED Viewed

@@ -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-custom-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-custom-text-primary,#161616);font-size:var(--cds-custom-heading-compact-02-font-size,1rem);font-weight:var(--cds-custom-heading-compact-02-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-02-letter-spacing,0);line-height:var(--cds-custom-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-custom-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-custom-layer-selected-01,#e0e0e0)}.c4p--add-select__next-row--selected .c4p--add-select__next-row__cell-wrapper{border-block-end-color:var(--cds-custom-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-custom-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-custom-icon-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled){background:var(--cds-custom-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-custom-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-custom-icon-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled){background:var(--cds-custom-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-custom-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-custom-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-custom-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-custom--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-custom-text-primary,#161616);display:block;font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--add-select__next-row__subtitle{color:var(--cds-custom-text-secondary,#525252);display:block;font-size:var(--cds-custom-helper-text-01-font-size,.75rem);letter-spacing:var(--cds-custom-helper-text-01-letter-spacing,.32px);line-height:var(--cds-custom-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-custom-layer-hover-01,#e8e8e8);border-inline-start:.125rem solid var(--cds-custom-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-custom-background-hover,hsla(0,0%,55%,.12))}.c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-custom-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-custom-background-hover,hsla(0,0%,55%,.12))}.c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-custom-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-custom-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-custom--icon--skeleton{block-size:2rem;border-radius:50%;inline-size:2rem}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon .cds-custom--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-custom-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-custom-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-custom--checkbox-wrapper{margin-block-end:.5rem}.c4p--add-select__next-column__filter-popover .cds-custom--checkbox-wrapper:last-child{margin-block-end:0}.c4p--add-select__next-column__header{align-items:center;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column__select-all .cds-custom--checkbox-label{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__select-all .cds-custom--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-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom-link-primary,#0f62fe);cursor:pointer;font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom-link-primary-hover,#0043ce);text-decoration:underline}.c4p--add-select__next__breadcrumb-button:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:.125rem}.c4p--add-select__next__breadcrumb-separator{align-items:center;color:var(--cds-custom-text-secondary,#525252);display:flex}.c4p--add-select__next__breadcrumb-separator svg{fill:currentColor}.c4p--add-select__next__breadcrumb-current{color:var(--cds-custom-text-primary,#161616);font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom-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-custom-heading-compact-02-font-size,1rem);font-weight:var(--cds-custom-heading-compact-02-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-02-letter-spacing,0);line-height:var(--cds-custom-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-custom-border-subtle-01,#c6c6c6);padding-block:.75rem;padding-inline:1rem}.c4p--add-select__next__selection-summary-item-default-title{color:var(--cds-custom-text-primary,#161616);font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary-item-default-subtitle{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-body-01-line-height,1.42857)}.c4p--add-select__next__selection-summary-item{background-color:var(--cds-custom-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);position:relative}.c4p--add-select__next__selection-summary-item:hover{background-color:var(--cds-custom-layer-hover-01,#e8e8e8)}.c4p--add-select__next__selection-summary-item--accordion .cds-custom--accordion__item,.c4p--add-select__next__selection-summary-item--accordion .cds-custom--accordion__item:last-child{border-block-end:none;border-block-start:none}.c4p--add-select__next__selection-summary-item--accordion .cds-custom--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-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom-text-primary,#161616);font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary-item-subtitle{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);margin-block-end:.5rem}.c4p--add-select__next__selection-summary-item-body{font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom--accordion__arrow{transform:rotate(90deg)}.c4p--add-select__next__selection-summary .cds-custom--accordion__item--active .cds-custom--accordion__arrow{transform:rotate(-90deg)}.c4p--add-select__next__selection-summary .cds-custom--accordion--start .cds-custom--accordion__arrow{margin-block:0;margin-inline-end:0;margin-inline-start:1rem}.c4p--add-select__next__selection-summary .cds-custom--accordion--start .cds-custom--accordion__title{margin-inline-end:0;margin-inline-start:.5rem;padding-inline-end:2rem}.c4p--add-select__next__selection-summary .cds-custom--accordion__item--active .cds-custom--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-custom-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-custom-heading-compact-02-font-size,1rem);font-weight:var(--cds-custom-heading-compact-02-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-02-letter-spacing,0);line-height:var(--cds-custom-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-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572)}.c4p--add-select__next__item-summary-panel-entry-body{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom-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-custom-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-custom-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-custom-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-custom-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-custom-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-custom-text-primary,#161616);display:block;font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}:host(c4p-add-select-row) .c4p--add-select__next-row__subtitle{color:var(--cds-custom-text-secondary,#525252);display:block;font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-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-custom-layer-hover-01,#e8e8e8)}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator:focus{outline:2px solid var(--cds-custom-focus,#0f62fe);outline-offset:-2px}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-custom-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-custom-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-custom-text-primary,#161616);font-size:var(--cds-custom-heading-compact-02-font-size,1rem);font-weight:var(--cds-custom-heading-compact-02-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-02-letter-spacing,0);line-height:var(--cds-custom-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-custom-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-custom-layer-selected-01,#e0e0e0)}.c4p--add-select__next-row--selected .c4p--add-select__next-row__cell-wrapper{border-block-end-color:var(--cds-custom-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-custom-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-custom-icon-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled){background:var(--cds-custom-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-custom-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-custom-icon-disabled,hsla(0,0%,9%,.25))}.c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled){background:var(--cds-custom-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-custom-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-custom-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-custom-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-custom--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-custom-text-primary,#161616);display:block;font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--add-select__next-row__subtitle{color:var(--cds-custom-text-secondary,#525252);display:block;font-size:var(--cds-custom-helper-text-01-font-size,.75rem);letter-spacing:var(--cds-custom-helper-text-01-letter-spacing,.32px);line-height:var(--cds-custom-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-custom-layer-hover-01,#e8e8e8);border-inline-start:.125rem solid var(--cds-custom-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-custom-background-hover,hsla(0,0%,55%,.12))}.c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-custom-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-custom-background-hover,hsla(0,0%,55%,.12))}.c4p--add-select__next-row__nav-indicator:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:-.125rem}.c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-custom-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-custom-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-custom--icon--skeleton{block-size:2rem;border-radius:50%;inline-size:2rem}.c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon .cds-custom--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-custom-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-custom-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-custom--checkbox-wrapper{margin-block-end:.5rem}.c4p--add-select__next-column__filter-popover .cds-custom--checkbox-wrapper:last-child{margin-block-end:0}.c4p--add-select__next-column__header{align-items:center;border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);display:flex;padding-block:1rem;padding-inline:1rem}.c4p--add-select__next-column__select-all .cds-custom--checkbox-label{align-items:center;display:flex;gap:0}.c4p--add-select__next-column__select-all .cds-custom--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-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom-link-primary,#0f62fe);cursor:pointer;font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom-link-primary-hover,#0043ce);text-decoration:underline}.c4p--add-select__next__breadcrumb-button:focus{outline:.125rem solid var(--cds-custom-focus,#0f62fe);outline-offset:.125rem}.c4p--add-select__next__breadcrumb-separator{align-items:center;color:var(--cds-custom-text-secondary,#525252);display:flex}.c4p--add-select__next__breadcrumb-separator svg{fill:currentColor}.c4p--add-select__next__breadcrumb-current{color:var(--cds-custom-text-primary,#161616);font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom-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-custom-heading-compact-02-font-size,1rem);font-weight:var(--cds-custom-heading-compact-02-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-02-letter-spacing,0);line-height:var(--cds-custom-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-custom-layer-01,#f4f4f4);border-block-end:1px solid var(--cds-custom-border-subtle-01,#c6c6c6);position:relative}.c4p--add-select__next__selection-summary-item:hover{background-color:var(--cds-custom-layer-hover-01,#e8e8e8)}.c4p--add-select__next__selection-summary-item--accordion .cds-custom--accordion__item,.c4p--add-select__next__selection-summary-item--accordion .cds-custom--accordion__item:last-child{border-block-end:none;border-block-start:none}.c4p--add-select__next__selection-summary-item--accordion .cds-custom--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-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom-text-primary,#161616);font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}.c4p--add-select__next__selection-summary-item-subtitle{color:var(--cds-custom-text-secondary,#525252);font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom-text-secondary,#525252);font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-label-01-line-height,1.33333);margin-block-end:.5rem}.c4p--add-select__next__selection-summary-item-body{font-size:var(--cds-custom-body-01-font-size,.875rem);font-weight:var(--cds-custom-body-01-font-weight,400);letter-spacing:var(--cds-custom-body-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom--accordion__arrow{transform:rotate(90deg)}.c4p--add-select__next__selection-summary .cds-custom--accordion__item--active .cds-custom--accordion__arrow{transform:rotate(-90deg)}.c4p--add-select__next__selection-summary .cds-custom--accordion--start .cds-custom--accordion__arrow{margin-block:0;margin-inline-end:0;margin-inline-start:1rem}.c4p--add-select__next__selection-summary .cds-custom--accordion--start .cds-custom--accordion__title{margin-inline-end:0;margin-inline-start:.5rem;padding-inline-end:2rem}.c4p--add-select__next__selection-summary .cds-custom--accordion__item--active .cds-custom--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-custom-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-custom-heading-compact-02-font-size,1rem);font-weight:var(--cds-custom-heading-compact-02-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-02-letter-spacing,0);line-height:var(--cds-custom-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-custom-heading-compact-01-font-size,.875rem);font-weight:var(--cds-custom-heading-compact-01-font-weight,600);letter-spacing:var(--cds-custom-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-heading-compact-01-line-height,1.28572)}.c4p--add-select__next__item-summary-panel-entry-body{font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-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-custom-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-custom-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-custom-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-custom-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-custom-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-custom-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-custom-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-custom-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-custom-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-custom-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-custom-text-primary,#161616);display:block;font-size:var(--cds-custom-body-compact-01-font-size,.875rem);font-weight:var(--cds-custom-body-compact-01-font-weight,400);letter-spacing:var(--cds-custom-body-compact-01-letter-spacing,.16px);line-height:var(--cds-custom-body-compact-01-line-height,1.28572)}:host(c4p-add-select-row) .c4p--add-select__next-row__subtitle{color:var(--cds-custom-text-secondary,#525252);display:block;font-size:var(--cds-custom-label-01-font-size,.75rem);font-weight:var(--cds-custom-label-01-font-weight,400);letter-spacing:var(--cds-custom-label-01-letter-spacing,.32px);line-height:var(--cds-custom-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-custom-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-custom-focus,#0f62fe);outline-offset:-.125rem}:host(c4p-add-select-row) .c4p--add-select__next-row__nav-indicator svg{fill:var(--cds-custom-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-custom-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-custom-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-custom-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-custom/components/add-select/add-select-row.scss.js.map CHANGED Viewed

	@@ -1 +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":""}
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/* 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-custom-skeleton-icon host size to match the circular icon placeholder\n .#{$block-class__next}-row__icon cds-custom-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":""}