@cumulus-ui/components 0.5.10 → 0.5.12

package/dist/index.js

@@ -1124,6 +1124,7 @@ var CsButtonInternal = class extends Base {
         e.stopPropagation();
         return;
       }
+      e.stopPropagation();
       if (this.href) {
         const isModified = e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey;
         if (!isModified) {
@@ -9515,6 +9516,9 @@ var CsContentLayoutInternal = class extends CsBaseElement {
     this.headerVariant = "default";
     this.defaultPadding = false;
     this._hasHeader = false;
+    this._hasNotifications = false;
+    this._hasBreadcrumbs = false;
+    this._hasSecondaryHeader = false;
   }
   static {
     this.styles = [sharedStyles, componentStyles24, hostStyles26];
@@ -9524,6 +9528,21 @@ var CsContentLayoutInternal = class extends CsBaseElement {
     this._hasHeader = slot.assignedNodes({ flatten: true }).length > 0;
     this.requestUpdate();
   }
+  _onNotificationsSlotChange(e) {
+    const slot = e.target;
+    this._hasNotifications = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+  _onBreadcrumbsSlotChange(e) {
+    const slot = e.target;
+    this._hasBreadcrumbs = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
+  _onSecondaryHeaderSlotChange(e) {
+    const slot = e.target;
+    this._hasSecondaryHeader = slot.assignedNodes({ flatten: true }).length > 0;
+    this.requestUpdate();
+  }
   render() {
     const layoutClasses = {
       "layout": true,
@@ -9546,8 +9565,11 @@ var CsContentLayoutInternal = class extends CsBaseElement {
         <div class=${classMap23(backgroundClasses)}>
           ${this.headerBackgroundStyle ? html27`<div class="header-background" style="background: ${this.headerBackgroundStyle}"></div>` : nothing10}
         </div>
+        ${this._hasNotifications ? html27`<div class="notifications"><slot name="notifications" @slotchange=${this._onNotificationsSlotChange}></slot></div>` : html27`<slot name="notifications" @slotchange=${this._onNotificationsSlotChange} style="display:none"></slot>`}
+        ${this._hasBreadcrumbs ? html27`<div class="breadcrumbs"><slot name="breadcrumbs" @slotchange=${this._onBreadcrumbsSlotChange}></slot></div>` : html27`<slot name="breadcrumbs" @slotchange=${this._onBreadcrumbsSlotChange} style="display:none"></slot>`}
         <div class=${classMap23(headerClasses)}>
           <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
+          ${this._hasSecondaryHeader ? html27`<div class="secondary-header"><slot name="secondary-header" @slotchange=${this._onSecondaryHeaderSlotChange}></slot></div>` : html27`<slot name="secondary-header" @slotchange=${this._onSecondaryHeaderSlotChange} style="display:none"></slot>`}
         </div>
         <div class="content">
           <slot></slot>
@@ -10149,6 +10171,7 @@ var CsTokenInternal = class extends CsBaseElement {
     this.description = "";
     this.disabled = false;
     this.readOnly = false;
+    this.dismissible = false;
     this.dismissLabel = "Remove";
     this.variant = "normal";
     this._onDismiss = () => {
@@ -10161,7 +10184,7 @@ var CsTokenInternal = class extends CsBaseElement {
   }
   render() {
     const isInline = this.variant === "inline";
-    const showDismiss = !this.disabled && !this.readOnly;
+    const showDismiss = this.dismissible && !this.disabled && !this.readOnly;
     const boxClasses = {
       "token-box": !isInline,
       "token-box-inline": isInline,
@@ -10247,6 +10270,9 @@ __decorateClass([
 __decorateClass([
   property28({ type: Boolean, reflect: true })
 ], CsTokenInternal.prototype, "readOnly", 2);
+__decorateClass([
+  property28({ type: Boolean, reflect: true })
+], CsTokenInternal.prototype, "dismissible", 2);
 __decorateClass([
   property28({ type: String })
 ], CsTokenInternal.prototype, "dismissLabel", 2);
@@ -12179,7 +12205,7 @@ var CsToggleButton = class extends CsToggleButtonInternal {
 customElements.define("cs-toggle-button", CsToggleButton);
 
 // src/slider/internal.ts
-import { css as css76, html as html35 } from "lit";
+import { css as css76, html as html35, nothing as nothing16 } from "lit";
 import { property as property34 } from "lit/decorators.js";
 import { classMap as classMap31 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined17 } from "lit/directives/if-defined.js";
@@ -12592,6 +12618,8 @@ var CsSliderInternal = class extends CsBaseElement {
     this.max = 100;
     this.step = 1;
     this.disabled = false;
+    this.hideFillLine = false;
+    this.tickMarks = [];
     this.ariaLabel = null;
     this.ariaDescription = null;
     this._onInput = (e) => {
@@ -12631,10 +12659,14 @@ var CsSliderInternal = class extends CsBaseElement {
       <div class="root">
         <div class="slider">
           <div class=${classMap31(trackClasses)}></div>
-          <div
-            class=${classMap31(rangeClasses)}
-            style="--awsui-slider-range-inline-size-6b9ypa: ${percent}%"
-          ></div>
+          ${this.hideFillLine ? nothing16 : html35`<div
+                class=${classMap31(rangeClasses)}
+                style="--awsui-slider-range-inline-size-6b9ypa: ${percent}%"
+              ></div>`}
+          ${this.tickMarks.length > 0 ? html35`<div class="tick-marks">${this.tickMarks.map((tick) => {
+      const tickPercent = this.max === this.min ? 0 : (tick - this.min) / (this.max - this.min) * 100;
+      return html35`<div class="tick-mark" style="inset-inline-start: ${tickPercent}%"></div>`;
+    })}</div>` : nothing16}
           <input
             type="range"
             class=${classMap31(thumbClasses)}
@@ -12674,6 +12706,12 @@ __decorateClass([
 __decorateClass([
   property34({ type: Boolean, reflect: true })
 ], CsSliderInternal.prototype, "disabled", 2);
+__decorateClass([
+  property34({ type: Boolean, reflect: true })
+], CsSliderInternal.prototype, "hideFillLine", 2);
+__decorateClass([
+  property34({ attribute: false })
+], CsSliderInternal.prototype, "tickMarks", 2);
 __decorateClass([
   property34({ type: String })
 ], CsSliderInternal.prototype, "ariaLabel", 2);
@@ -12953,6 +12991,18 @@ var CsPromptInputInternal = class extends CsBaseElement {
     this.actionButtonIconName = "send";
     this.disableActionButton = false;
     this.ariaLabel = null;
+    this._hasSecondaryContent = false;
+    this._hasSecondaryActions = false;
+    this._onSecondaryContentSlotChange = (e) => {
+      const slot = e.target;
+      this._hasSecondaryContent = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+    this._onSecondaryActionsSlotChange = (e) => {
+      const slot = e.target;
+      this._hasSecondaryActions = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
     this._onTextareaInput = (e) => {
       const textarea = e.target;
       this.value = textarea.value;
@@ -12995,6 +13045,7 @@ var CsPromptInputInternal = class extends CsBaseElement {
     };
     return html36`
       <div class=${classMap32(rootClasses)}>
+        ${this._hasSecondaryContent ? html36`<div class="secondary-content"><slot name="secondary-content" @slotchange=${this._onSecondaryContentSlotChange}></slot></div>` : html36`<slot name="secondary-content" @slotchange=${this._onSecondaryContentSlotChange} style="display:none"></slot>`}
         <div class="textarea-wrapper">
           <textarea
             class=${classMap32(textareaClasses)}
@@ -13007,6 +13058,7 @@ var CsPromptInputInternal = class extends CsBaseElement {
             @input=${this._onTextareaInput}
             @keydown=${this._onTextareaKeyDown}
           ></textarea>
+          ${this._hasSecondaryActions ? html36`<span class="secondary-actions"><slot name="secondary-actions" @slotchange=${this._onSecondaryActionsSlotChange}></slot></span>` : html36`<slot name="secondary-actions" @slotchange=${this._onSecondaryActionsSlotChange} style="display:none"></slot>`}
           <span class="primary-action">
             <cs-button
               class="action-button"
@@ -13354,7 +13406,7 @@ var CsFileInput = class extends CsFileInputInternal {
 customElements.define("cs-file-input", CsFileInput);
 
 // src/tabs/internal.ts
-import { css as css84, html as html39, nothing as nothing16 } from "lit";
+import { css as css84, html as html39, nothing as nothing17 } from "lit";
 import { property as property38, state as state9 } from "lit/decorators.js";
 import { classMap as classMap34 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined20 } from "lit/directives/if-defined.js";
@@ -13823,7 +13875,7 @@ var CsTabsInternal = class extends CsBaseElement {
                     tabindex=${tab.id === activeId ? 0 : -1}
                   >
                     <slot name=${tab.id}></slot>
-                    ${tab.content != null && tab.id === activeId ? html39`<span>${tab.content}</span>` : nothing16}
+                    ${tab.content != null && tab.id === activeId ? html39`<span>${tab.content}</span>` : nothing17}
                   </div>
                 `)}
               </div>` : this.tabs.map((tab) => html39`
@@ -13838,7 +13890,7 @@ var CsTabsInternal = class extends CsBaseElement {
                   tabindex=${tab.id === activeId ? 0 : -1}
                 >
                   <slot name=${tab.id}></slot>
-                  ${tab.content != null && tab.id === activeId ? html39`<span>${tab.content}</span>` : nothing16}
+                  ${tab.content != null && tab.id === activeId ? html39`<span>${tab.content}</span>` : nothing17}
                 </div>
               `)}
         </div>
@@ -13877,7 +13929,7 @@ var CsTabs = class extends CsTabsInternal {
 customElements.define("cs-tabs", CsTabs);
 
 // src/expandable-section/internal.ts
-import { css as css86, html as html40, nothing as nothing17 } from "lit";
+import { css as css86, html as html40, nothing as nothing18 } from "lit";
 import { property as property39, state as state10 } from "lit/decorators.js";
 import { classMap as classMap35 } from "lit/directives/class-map.js";
 
@@ -14231,7 +14283,7 @@ var CsExpandableSectionInternal = class extends CsBaseElement {
   _renderHeadingContent() {
     const headerTextContent = html40`
       <span class="header-text">${this.headerText}</span>
-      ${this.headerCounter ? html40`<span class="header-counter">&nbsp;${this.headerCounter}</span>` : nothing17}
+      ${this.headerCounter ? html40`<span class="header-counter">&nbsp;${this.headerCounter}</span>` : nothing18}
     `;
     return headerTextContent;
   }
@@ -14314,7 +14366,7 @@ var CsExpandableSectionInternal = class extends CsBaseElement {
             </div>
             <div class=${isContainer ? "header-container" : "header-text-wrapper"}>
               ${this._renderHeading()}
-              ${this.headerDescription ? html40`<span class="header-description">${this.headerDescription}</span>` : nothing17}
+              ${this.headerDescription ? html40`<span class="header-description">${this.headerDescription}</span>` : nothing18}
             </div>
           </div>
           <slot name="headerActions"></slot>
@@ -14363,7 +14415,7 @@ var CsExpandableSection = class extends CsExpandableSectionInternal {
 customElements.define("cs-expandable-section", CsExpandableSection);
 
 // src/button-dropdown/internal.ts
-import { css as css89, html as html41, nothing as nothing18 } from "lit";
+import { css as css89, html as html41, nothing as nothing19 } from "lit";
 import { property as property40, state as state11, query as query2 } from "lit/decorators.js";
 import { classMap as classMap36 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined21 } from "lit/directives/if-defined.js";
@@ -14887,7 +14939,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
         tabindex=${tabIndex}
         @click=${this._onTriggerClick}
       >
-        ${this.loading ? html41`<span class="icon icon-left"><cs-icon name="status-in-progress"></cs-icon></span>` : nothing18}
+        ${this.loading ? html41`<span class="icon icon-left"><cs-icon name="status-in-progress"></cs-icon></span>` : nothing19}
         <slot></slot>
         <span class=${classMap36(caretClasses)}>
           <cs-icon name="caret-down-filled"></cs-icon>
@@ -14896,7 +14948,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     `;
   }
   _renderItems() {
-    if (!this._open) return nothing18;
+    if (!this._open) return nothing19;
     const flatItems = this._flatItems();
     return html41`
       <div class="dropdown" role="menu">
@@ -14930,12 +14982,12 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
         if (item.disabled) e.preventDefault();
       }}
                     >
-                      ${item.iconName ? html41`<span class="button-dropdown-item-element--icon"><cs-icon name=${item.iconName}></cs-icon></span>` : nothing18}
+                      ${item.iconName ? html41`<span class="button-dropdown-item-element--icon"><cs-icon name=${item.iconName}></cs-icon></span>` : nothing19}
                       <span>${item.text}</span>
                     </a>
                   ` : html41`
                     <span class=${classMap36(menuItemClasses)} tabindex="-1">
-                      ${item.iconName ? html41`<span class="button-dropdown-item-element--icon"><cs-icon name=${item.iconName}></cs-icon></span>` : nothing18}
+                      ${item.iconName ? html41`<span class="button-dropdown-item-element--icon"><cs-icon name=${item.iconName}></cs-icon></span>` : nothing19}
                       <span>${item.text}</span>
                     </span>
                   `}
@@ -15478,7 +15530,7 @@ var CsBreadcrumbGroup = class extends CsBreadcrumbGroupInternal {
 customElements.define("cs-breadcrumb-group", CsBreadcrumbGroup);
 
 // src/select/internal.ts
-import { css as css97, html as html44, nothing as nothing19 } from "lit";
+import { css as css97, html as html44, nothing as nothing20 } from "lit";
 import { property as property43, state as state12, query as query3 } from "lit/decorators.js";
 import { classMap as classMap38 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined24 } from "lit/directives/if-defined.js";
@@ -16025,12 +16077,12 @@ var CsSelectInternal = class extends Base6 {
         <div class="option-content">
           <div class="option-label">
             ${opt.label || opt.value || ""}
-            ${opt.labelTag ? html44`<span class="option-label-tag">${opt.labelTag}</span>` : nothing19}
+            ${opt.labelTag ? html44`<span class="option-label-tag">${opt.labelTag}</span>` : nothing20}
           </div>
-          ${opt.description ? html44`<div class="option-description">${opt.description}</div>` : nothing19}
-          ${opt.tags && opt.tags.length > 0 ? html44`<div class="option-tags">${opt.tags.join(", ")}</div>` : nothing19}
+          ${opt.description ? html44`<div class="option-description">${opt.description}</div>` : nothing20}
+          ${opt.tags && opt.tags.length > 0 ? html44`<div class="option-tags">${opt.tags.join(", ")}</div>` : nothing20}
         </div>
-        ${isSelected ? html44`<span class="selected-icon"><cs-icon name="check"></cs-icon></span>` : nothing19}
+        ${isSelected ? html44`<span class="selected-icon"><cs-icon name="check"></cs-icon></span>` : nothing20}
       </li>
     `;
   }
@@ -16062,7 +16114,7 @@ var CsSelectInternal = class extends Base6 {
             @click=${(e) => e.stopPropagation()}
           />
         </div>
-      ` : nothing19}
+      ` : nothing20}
       <ul class="option-list" role="listbox" aria-label=${ifDefined24(this.ariaLabel || void 0)}>
         ${items}
       </ul>
@@ -16102,7 +16154,7 @@ var CsSelectInternal = class extends Base6 {
           <div class="dropdown" @click=${(e) => e.stopPropagation()}>
             ${this._renderDropdownContent()}
           </div>
-        ` : nothing19}
+        ` : nothing20}
       </div>
     `;
   }
@@ -16159,7 +16211,7 @@ var CsSelect = class extends CsSelectInternal {
 customElements.define("cs-select", CsSelect);
 
 // src/multiselect/internal.ts
-import { css as css99, html as html45, nothing as nothing20 } from "lit";
+import { css as css99, html as html45, nothing as nothing21 } from "lit";
 import { property as property44, state as state13, query as query4 } from "lit/decorators.js";
 import { classMap as classMap39 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined25 } from "lit/directives/if-defined.js";
@@ -16649,9 +16701,9 @@ var CsMultiselectInternal = class extends Base7 {
         <div class="option-content">
           <div class="option-label">
             ${opt.label || opt.value || ""}
-            ${opt.labelTag ? html45`<span class="option-label-tag">${opt.labelTag}</span>` : nothing20}
+            ${opt.labelTag ? html45`<span class="option-label-tag">${opt.labelTag}</span>` : nothing21}
           </div>
-          ${opt.description ? html45`<div class="option-description">${opt.description}</div>` : nothing20}
+          ${opt.description ? html45`<div class="option-description">${opt.description}</div>` : nothing21}
         </div>
       </li>
     `;
@@ -16684,14 +16736,14 @@ var CsMultiselectInternal = class extends Base7 {
             @click=${(e) => e.stopPropagation()}
           />
         </div>
-      ` : nothing20}
+      ` : nothing21}
       <ul class="option-list" role="listbox" aria-multiselectable="true" aria-label=${ifDefined25(this.ariaLabel || void 0)}>
         ${items}
       </ul>
     `;
   }
   _renderTokens() {
-    if (this.hideTokens || this.selectedOptions.length === 0) return nothing20;
+    if (this.hideTokens || this.selectedOptions.length === 0) return nothing21;
     const tokenItems = this.selectedOptions.map((opt) => ({
       label: opt.label || opt.value || "",
       description: opt.description,
@@ -16741,7 +16793,7 @@ var CsMultiselectInternal = class extends Base7 {
           <div class="dropdown" @click=${(e) => e.stopPropagation()}>
             ${this._renderDropdownContent()}
           </div>
-        ` : nothing20}
+        ` : nothing21}
         ${this._renderTokens()}
       </div>
     `;
@@ -16802,7 +16854,7 @@ var CsMultiselect = class extends CsMultiselectInternal {
 customElements.define("cs-multiselect", CsMultiselect);
 
 // src/autosuggest/internal.ts
-import { css as css102, html as html46, nothing as nothing21 } from "lit";
+import { css as css102, html as html46, nothing as nothing22 } from "lit";
 import { property as property45, state as state14, query as query5 } from "lit/decorators.js";
 import { classMap as classMap40 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined26 } from "lit/directives/if-defined.js";
@@ -17233,7 +17285,7 @@ var CsAutosuggestInternal = class extends Base8 {
             >
               ${filtered.map((opt, i) => this._renderOption(opt, i))}
             </div>
-          ` : nothing21}
+          ` : nothing22}
         </div>
       </div>
     `;
@@ -17633,7 +17685,7 @@ var CsSegmentedControl = class extends CsSegmentedControlInternal {
 customElements.define("cs-segmented-control", CsSegmentedControl);
 
 // src/cards/internal.ts
-import { css as css106, html as html48, nothing as nothing22 } from "lit";
+import { css as css106, html as html48, nothing as nothing23 } from "lit";
 import { property as property47, state as state15 } from "lit/decorators.js";
 import { classMap as classMap42 } from "lit/directives/class-map.js";
 
@@ -17896,14 +17948,14 @@ var CsCardsInternal = class extends CsBaseElement {
   }
   _renderCardSections(item) {
     const sections = this.cardDefinition.sections;
-    if (!sections?.length) return nothing22;
+    if (!sections?.length) return nothing23;
     const visible = this.visibleSections;
     return html48`${sections.filter((section) => !visible || !section.id || visible.includes(section.id)).map((section) => {
       const width = section.width ?? 100;
       return html48`
           <div class="section" style="inline-size: ${width}%">
-            ${section.header ? html48`<div class="section-header">${section.header}</div>` : nothing22}
-            ${section.content ? html48`<div class="section-content">${section.content(item)}</div>` : nothing22}
+            ${section.header ? html48`<div class="section-header">${section.header}</div>` : nothing23}
+            ${section.content ? html48`<div class="section-content">${section.content(item)}</div>` : nothing23}
           </div>
         `;
     })}`;
@@ -17927,7 +17979,7 @@ var CsCardsInternal = class extends CsBaseElement {
         <cs-container variant="default">
           <div slot="header" style="position: relative;">
             <div class=${classMap42(cardHeaderClasses)}>
-              ${headerContent ?? nothing22}
+              ${headerContent ?? nothing23}
             </div>
             ${isSelectable ? html48`
               <div class="selection-control">
@@ -17938,7 +17990,7 @@ var CsCardsInternal = class extends CsBaseElement {
                   @change=${() => this._onSelectionChange(item)}
                 ></cs-checkbox>
               </div>
-            ` : nothing22}
+            ` : nothing23}
           </div>
           ${this._renderCardSections(item)}
         </cs-container>
@@ -17968,7 +18020,7 @@ var CsCardsInternal = class extends CsBaseElement {
           ${showLoading ? html48`
             <div class="loading" role="status">
               <cs-spinner size="large"></cs-spinner>
-              ${this.loadingText ? html48`<span>${this.loadingText}</span>` : nothing22}
+              ${this.loadingText ? html48`<span>${this.loadingText}</span>` : nothing23}
             </div>
           ` : showEmpty ? html48`
             <div class="empty">
@@ -18030,7 +18082,7 @@ var CsCards = class extends CsCardsInternal {
 customElements.define("cs-cards", CsCards);
 
 // src/collection-preferences/internal.ts
-import { css as css108, html as html49, nothing as nothing23 } from "lit";
+import { css as css108, html as html49, nothing as nothing24 } from "lit";
 import { property as property48, state as state16 } from "lit/decorators.js";
 
 // src/collection-preferences/styles.ts
@@ -18279,11 +18331,11 @@ var CsCollectionPreferencesInternal = class extends CsBaseElement {
     this._draft = { ...this._draft, visibleContent: current };
   }
   _renderPageSizePreference() {
-    if (!this.pageSizePreference) return nothing23;
+    if (!this.pageSizePreference) return nothing24;
     const pref = this.pageSizePreference;
     return html49`
       <div class="panel-section">
-        ${pref.title ? html49`<div class="panel-section-title">${pref.title}</div>` : nothing23}
+        ${pref.title ? html49`<div class="panel-section-title">${pref.title}</div>` : nothing24}
         <div class="page-size-options" role="radiogroup" aria-label=${pref.title ?? "Page size"}>
           ${pref.options.map((opt) => html49`
             <label class="page-size-option">
@@ -18298,7 +18350,7 @@ var CsCollectionPreferencesInternal = class extends CsBaseElement {
     `;
   }
   _renderWrapLinesPreference() {
-    if (!this.wrapLinesPreference) return nothing23;
+    if (!this.wrapLinesPreference) return nothing24;
     const pref = this.wrapLinesPreference;
     return html49`
       <div class="panel-section">
@@ -18306,12 +18358,12 @@ var CsCollectionPreferencesInternal = class extends CsBaseElement {
           .checked=${this._draft.wrapLines ?? false}
           @change=${(e) => this._onWrapLinesChange(e.detail.checked)}
         >${pref.label ?? "Wrap lines"}</cs-checkbox>
-        ${pref.description ? html49`<div class="content-display-description">${pref.description}</div>` : nothing23}
+        ${pref.description ? html49`<div class="content-display-description">${pref.description}</div>` : nothing24}
       </div>
     `;
   }
   _renderStripedRowsPreference() {
-    if (!this.stripedRowsPreference) return nothing23;
+    if (!this.stripedRowsPreference) return nothing24;
     const pref = this.stripedRowsPreference;
     return html49`
       <div class="panel-section">
@@ -18319,12 +18371,12 @@ var CsCollectionPreferencesInternal = class extends CsBaseElement {
           .checked=${this._draft.stripedRows ?? false}
           @change=${(e) => this._onStripedRowsChange(e.detail.checked)}
         >${pref.label ?? "Striped rows"}</cs-checkbox>
-        ${pref.description ? html49`<div class="content-display-description">${pref.description}</div>` : nothing23}
+        ${pref.description ? html49`<div class="content-display-description">${pref.description}</div>` : nothing24}
       </div>
     `;
   }
   _renderContentDensityPreference() {
-    if (!this.contentDensityPreference) return nothing23;
+    if (!this.contentDensityPreference) return nothing24;
     const pref = this.contentDensityPreference;
     return html49`
       <div class="panel-section">
@@ -18332,17 +18384,17 @@ var CsCollectionPreferencesInternal = class extends CsBaseElement {
           .checked=${this._draft.contentDensity === "compact"}
           @change=${(e) => this._onContentDensityChange(e.detail.checked)}
         >${pref.label ?? "Compact mode"}</cs-checkbox>
-        ${pref.description ? html49`<div class="content-display-description">${pref.description}</div>` : nothing23}
+        ${pref.description ? html49`<div class="content-display-description">${pref.description}</div>` : nothing24}
       </div>
     `;
   }
   _renderVisibleContentPreference() {
-    if (!this.visibleContentPreference) return nothing23;
+    if (!this.visibleContentPreference) return nothing24;
     const pref = this.visibleContentPreference;
     const visibleIds = this._draft.visibleContent ?? [];
     return html49`
       <div class="panel-section">
-        ${pref.title ? html49`<div class="panel-section-title">${pref.title}</div>` : nothing23}
+        ${pref.title ? html49`<div class="panel-section-title">${pref.title}</div>` : nothing24}
         ${pref.options.map((group) => html49`
           <div class="visible-content-group">
             <div class="visible-content-group-label">${group.label}</div>
@@ -18386,7 +18438,7 @@ var CsCollectionPreferencesInternal = class extends CsBaseElement {
               <cs-button variant="primary" @click=${this._confirm}>${this.confirmLabel}</cs-button>
             </div>
           </div>
-        ` : nothing23}
+        ` : nothing24}
       </div>
     `;
   }
@@ -18434,7 +18486,7 @@ var CsCollectionPreferences = class extends CsCollectionPreferencesInternal {
 customElements.define("cs-collection-preferences", CsCollectionPreferences);
 
 // src/progress-bar/internal.ts
-import { css as css110, html as html50, nothing as nothing24 } from "lit";
+import { css as css110, html as html50, nothing as nothing25 } from "lit";
 import { property as property49 } from "lit/decorators.js";
 import { classMap as classMap43 } from "lit/directives/class-map.js";
 
@@ -18687,7 +18739,7 @@ var CsProgressBarInternal = class extends CsBaseElement {
                   @click=${this._onResultButtonClick}
                 >${this.resultButtonText}</button>
               </span>
-            ` : nothing24}
+            ` : nothing25}
           </div>
         `}
 
@@ -18726,7 +18778,7 @@ var CsProgressBar = class extends CsProgressBarInternal {
 customElements.define("cs-progress-bar", CsProgressBar);
 
 // src/steps/internal.ts
-import { css as css112, html as html51, nothing as nothing25 } from "lit";
+import { css as css112, html as html51, nothing as nothing26 } from "lit";
 import { property as property50 } from "lit/decorators.js";
 import { classMap as classMap44 } from "lit/directives/class-map.js";
 
@@ -18882,10 +18934,10 @@ var CsStepsInternal = class extends CsBaseElement {
           </span>
           <span class="title">${step.header}</span>
         </div>
-        ${!isLast ? html51`<hr class="connector" aria-hidden="true" />` : nothing25}
+        ${!isLast ? html51`<hr class="connector" aria-hidden="true" />` : nothing26}
         ${step.details ? html51`
           <div class="details">${step.details}</div>
-        ` : nothing25}
+        ` : nothing26}
       </li>
     `;
   }
@@ -18901,14 +18953,14 @@ var CsStepsInternal = class extends CsBaseElement {
           >
             ${this._renderIcon(step)}
           </span>
-          ${!isLast ? html51`<hr class="connector" aria-hidden="true" />` : nothing25}
+          ${!isLast ? html51`<hr class="connector" aria-hidden="true" />` : nothing26}
         </div>
         <div class="horizontal-header">
           <span class="title">${step.header}</span>
         </div>
         ${step.details ? html51`
           <div class="details">${step.details}</div>
-        ` : nothing25}
+        ` : nothing26}
       </li>
     `;
   }
@@ -18956,7 +19008,7 @@ var CsSteps = class extends CsStepsInternal {
 customElements.define("cs-steps", CsSteps);
 
 // src/key-value-pairs/internal.ts
-import { css as css114, html as html52, nothing as nothing26 } from "lit";
+import { css as css114, html as html52, nothing as nothing27 } from "lit";
 import { property as property51 } from "lit/decorators.js";
 
 // src/key-value-pairs/styles.ts
@@ -19052,7 +19104,7 @@ var CsKeyValuePairsInternal = class extends CsBaseElement {
       <div class="pair">
         <dt class="term">
           <span class="key-label">${pair.label}</span>
-          ${pair.info ? html52`<span class="info">${pair.info}</span>` : nothing26}
+          ${pair.info ? html52`<span class="info">${pair.info}</span>` : nothing27}
         </dt>
         <dd class="detail">${pair.value}</dd>
       </div>
@@ -19061,7 +19113,7 @@ var CsKeyValuePairsInternal = class extends CsBaseElement {
   _renderGroup(group) {
     return html52`
       <div class="group">
-        ${group.title ? html52`<div class="group-title"><strong>${group.title}</strong></div>` : nothing26}
+        ${group.title ? html52`<div class="group-title"><strong>${group.title}</strong></div>` : nothing27}
         <dl class="group-list">
           ${group.items.map((pair) => this._renderPair(pair))}
         </dl>
@@ -19117,7 +19169,7 @@ var CsKeyValuePairs = class extends CsKeyValuePairsInternal {
 customElements.define("cs-key-value-pairs", CsKeyValuePairs);
 
 // src/property-filter/internal.ts
-import { css as css116, html as html53, nothing as nothing27 } from "lit";
+import { css as css116, html as html53, nothing as nothing28 } from "lit";
 import { property as property52, state as state17 } from "lit/decorators.js";
 import { createRef as createRef6, ref as ref6 } from "lit/directives/ref.js";
 
@@ -19386,7 +19438,14 @@ var CsPropertyFilterInternal = class extends CsBaseElement {
     this.filteringOptions = [];
     this.disabled = false;
     this.filteringPlaceholder = "Filter by text";
+    this.filteringConstraintText = "";
     this._inputValue = "";
+    this._hasCustomControl = false;
+    this._onCustomControlSlotChange = (e) => {
+      const slot = e.target;
+      this._hasCustomControl = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
     this._inputRef = createRef6();
   }
   static {
@@ -19444,6 +19503,7 @@ var CsPropertyFilterInternal = class extends CsBaseElement {
     return html53`
       <div class="root">
         <div class="search-field">
+          ${this._hasCustomControl ? html53`<div class="custom-control"><slot name="custom-control" @slotchange=${this._onCustomControlSlotChange}></slot></div>` : html53`<slot name="custom-control" @slotchange=${this._onCustomControlSlotChange} style="display:none"></slot>`}
           <div class="input-wrapper">
             <input
               ${ref6(this._inputRef)}
@@ -19459,20 +19519,24 @@ var CsPropertyFilterInternal = class extends CsBaseElement {
           </div>
         </div>
 
+        ${this.filteringConstraintText ? html53`
+          <div class="filtering-constraint-text">${this.filteringConstraintText}</div>
+        ` : nothing28}
+
         ${hasTokens ? html53`
           <div class="tokens">
             <ul class="token-list" role="list">
               ${this.query.tokens.map((token, i) => html53`
-                ${i > 0 ? html53`<li class="operation-label" aria-hidden="true">${operationLabel}</li>` : nothing27}
+                ${i > 0 ? html53`<li class="operation-label" aria-hidden="true">${operationLabel}</li>` : nothing28}
                 ${this._renderToken(token, i)}
               `)}
             </ul>
           </div>
-        ` : nothing27}
+        ` : nothing28}
 
         ${this.countText && hasTokens ? html53`
           <div class="results">${this.countText}</div>
-        ` : nothing27}
+        ` : nothing28}
       </div>
     `;
   }
@@ -19495,6 +19559,9 @@ __decorateClass([
 __decorateClass([
   property52({ type: String })
 ], CsPropertyFilterInternal.prototype, "countText", 2);
+__decorateClass([
+  property52({ type: String })
+], CsPropertyFilterInternal.prototype, "filteringConstraintText", 2);
 __decorateClass([
   state17()
 ], CsPropertyFilterInternal.prototype, "_inputValue", 2);
@@ -19505,7 +19572,7 @@ var CsPropertyFilter = class extends CsPropertyFilterInternal {
 customElements.define("cs-property-filter", CsPropertyFilter);
 
 // src/table/internal.ts
-import { css as css118, html as html54, nothing as nothing28 } from "lit";
+import { css as css118, html as html54, nothing as nothing29 } from "lit";
 import { property as property53 } from "lit/decorators.js";
 import { classMap as classMap45 } from "lit/directives/class-map.js";
 
@@ -19853,9 +19920,11 @@ var CsTableInternal = class extends CsBaseElement {
     this.wrapLines = false;
     this.stickyHeader = false;
     this.contentDensity = "comfortable";
+    this.resizableColumns = false;
     this._hasHeader = false;
     this._hasFilter = false;
     this._hasPagination = false;
+    this._hasFooter = false;
     this._onHeaderSlotChange = (e) => {
       const slot = e.target;
       this._hasHeader = slot.assignedNodes({ flatten: true }).length > 0;
@@ -19871,6 +19940,11 @@ var CsTableInternal = class extends CsBaseElement {
       this._hasPagination = slot.assignedNodes({ flatten: true }).length > 0;
       this.requestUpdate();
     };
+    this._onFooterSlotChange = (e) => {
+      const slot = e.target;
+      this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
     /** Stops selection-cell clicks from triggering the row click handler. */
     this._onSelectionCellClick = (e) => {
       e.stopPropagation();
@@ -19915,7 +19989,7 @@ var CsTableInternal = class extends CsBaseElement {
   }
   _getAriaSort(col) {
     const isSortable = !!(col.sortingField || col.sortingComparator);
-    if (!isSortable) return nothing28;
+    if (!isSortable) return nothing29;
     if (!this.sortingColumn) return "none";
     if (!this._isSameColumn(col, this.sortingColumn)) return "none";
     return this.sortingDescending ? "descending" : "ascending";
@@ -19967,7 +20041,7 @@ var CsTableInternal = class extends CsBaseElement {
     };
     return html54`
       <div class=${classMap45(rootClasses)}>
-        <div class=${classMap45(headerSecondaryClasses)} style=${this._hasHeader || this._hasTools ? nothing28 : "display:none"}>
+        <div class=${classMap45(headerSecondaryClasses)} style=${this._hasHeader || this._hasTools ? nothing29 : "display:none"}>
           <div class=${classMap45(headerControlsClasses)}>
             <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
             ${this._hasTools ? html54`
@@ -19988,6 +20062,7 @@ var CsTableInternal = class extends CsBaseElement {
           </div>
         </div>
         ${this.loading ? this._renderLoading() : this.items.length === 0 ? this._renderEmpty() : this._renderTable()}
+        ${this._hasFooter ? html54`<div class="footer"><slot name="footer" @slotchange=${this._onFooterSlotChange}></slot></div>` : html54`<slot name="footer" @slotchange=${this._onFooterSlotChange} style="display:none"></slot>`}
       </div>
     `;
   }
@@ -19995,7 +20070,7 @@ var CsTableInternal = class extends CsBaseElement {
     return html54`
       <div class="table-loading" role="status">
         <cs-spinner size="normal"></cs-spinner>
-        ${this.loadingText ? html54`<span>${this.loadingText}</span>` : nothing28}
+        ${this.loadingText ? html54`<span>${this.loadingText}</span>` : nothing29}
       </div>
     `;
   }
@@ -20016,7 +20091,7 @@ var CsTableInternal = class extends CsBaseElement {
         <table class="table" role="table">
           <thead>
             <tr>
-              ${this._hasSelection ? this._renderSelectionHeader() : nothing28}
+              ${this._hasSelection ? this._renderSelectionHeader() : nothing29}
               ${this.columnDefinitions.map((col) => this._renderHeaderCell(col))}
             </tr>
           </thead>
@@ -20062,11 +20137,11 @@ var CsTableInternal = class extends CsBaseElement {
       <th
         class=${classMap45(cellClasses)}
         aria-sort=${ariaSort}
-        style=${widthStyle ?? nothing28}
+        style=${widthStyle ?? nothing29}
         @click=${() => this._onSort(col)}
       >
         <span class="header-cell-text">${col.header}</span>
-        ${isSortable ? html54`<span class=${classMap45(iconClasses)}><cs-icon name="caret-down-filled" size="small"></cs-icon></span>` : nothing28}
+        ${isSortable ? html54`<span class=${classMap45(iconClasses)}><cs-icon name="caret-down-filled" size="small"></cs-icon></span>` : nothing29}
       </th>
     `;
   }
@@ -20079,7 +20154,7 @@ var CsTableInternal = class extends CsBaseElement {
     };
     return html54`
       <tr class=${classMap45(rowClasses)} @click=${() => this._onRowClick(item, index)}>
-        ${this._hasSelection ? this._renderSelectionCell(item) : nothing28}
+        ${this._hasSelection ? this._renderSelectionCell(item) : nothing29}
         ${this.columnDefinitions.map((col) => this._renderBodyCell(item, col, index))}
       </tr>
     `;
@@ -20116,7 +20191,7 @@ var CsTableInternal = class extends CsBaseElement {
     };
     const widthStyle = col.width ? `width: ${typeof col.width === "number" ? `${col.width}px` : col.width}` : void 0;
     return html54`
-      <td class=${classMap45(cellClasses)} style=${widthStyle ?? nothing28}>
+      <td class=${classMap45(cellClasses)} style=${widthStyle ?? nothing29}>
         <span class="body-cell-content">${col.cell(item)}</span>
       </td>
     `;
@@ -20167,6 +20242,9 @@ __decorateClass([
 __decorateClass([
   property53({ type: String })
 ], CsTableInternal.prototype, "contentDensity", 2);
+__decorateClass([
+  property53({ type: Boolean, reflect: true })
+], CsTableInternal.prototype, "resizableColumns", 2);
 __decorateClass([
   property53({ attribute: false })
 ], CsTableInternal.prototype, "ariaLabels", 2);
@@ -20177,7 +20255,7 @@ var CsTable = class extends CsTableInternal {
 customElements.define("cs-table", CsTable);
 
 // src/form/internal.ts
-import { css as css120, html as html55, nothing as nothing29 } from "lit";
+import { css as css120, html as html55, nothing as nothing30 } from "lit";
 import { property as property54 } from "lit/decorators.js";
 
 // src/form/styles.ts
@@ -20261,7 +20339,7 @@ var CsFormInternal = class extends CsBaseElement {
                 type="error"
                 status-icon-aria-label=${this.errorIconAriaLabel || "Error"}
               >${this.errorText}</cs-alert>
-            ` : nothing29}
+            ` : nothing30}
           <slot></slot>
         </div>
 
@@ -20703,7 +20781,7 @@ var CsModal = class extends CsModalInternal {
 customElements.define("cs-modal", CsModal);
 
 // src/file-upload/internal.ts
-import { css as css124, html as html57, nothing as nothing30 } from "lit";
+import { css as css124, html as html57, nothing as nothing31 } from "lit";
 import { property as property56 } from "lit/decorators.js";
 import { classMap as classMap47 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined29 } from "lit/directives/if-defined.js";
@@ -20901,15 +20979,15 @@ var CsFileUploadInternal = class extends CsBaseElement {
     };
     return html57`
       <li class=${classMap47(itemClasses)}>
-        ${this.showFileThumbnail && isImage ? html57`<img class="file-thumbnail" src=${this._getThumbnailUrl(file)} alt="" />` : nothing30}
+        ${this.showFileThumbnail && isImage ? html57`<img class="file-thumbnail" src=${this._getThumbnailUrl(file)} alt="" />` : nothing31}
         <div class="file-info">
           <div class="file-name">${file.name}</div>
           <div class="file-metadata">
-            ${this.showFileSize ? html57`<span>${this._formatFileSize(file.size)}</span>` : nothing30}
-            ${this.showFileSize && this.showFileLastModified ? html57`<span> · </span>` : nothing30}
-            ${this.showFileLastModified ? html57`<span>${this._formatLastModified(new Date(file.lastModified))}</span>` : nothing30}
+            ${this.showFileSize ? html57`<span>${this._formatFileSize(file.size)}</span>` : nothing31}
+            ${this.showFileSize && this.showFileLastModified ? html57`<span> · </span>` : nothing31}
+            ${this.showFileLastModified ? html57`<span>${this._formatLastModified(new Date(file.lastModified))}</span>` : nothing31}
           </div>
-          ${error ? html57`<div class="file-error">${error}</div>` : nothing30}
+          ${error ? html57`<div class="file-error">${error}</div>` : nothing31}
         </div>
         <button
           class="dismiss-button"
@@ -20931,7 +21009,7 @@ var CsFileUploadInternal = class extends CsBaseElement {
     };
     return html57`
       <div class="file-upload-root">
-        ${this.label ? html57`<label class="label">${this.label}</label>` : nothing30}
+        ${this.label ? html57`<label class="label">${this.label}</label>` : nothing31}
 
         <cs-file-input
           variant="button"
@@ -20943,15 +21021,15 @@ var CsFileUploadInternal = class extends CsBaseElement {
           @change=${this._onFileInputChange}
         >${uploadButtonText}</cs-file-input>
 
-        ${this.constraintText ? html57`<div class="constraint-text hints">${this.constraintText}</div>` : nothing30}
+        ${this.constraintText ? html57`<div class="constraint-text hints">${this.constraintText}</div>` : nothing31}
 
-        ${this.errorText ? html57`<div class="error-text">${this.errorText}</div>` : nothing30}
+        ${this.errorText ? html57`<div class="error-text">${this.errorText}</div>` : nothing31}
 
         ${hasFiles ? html57`
             <ul class=${classMap47(listClasses)} role="list">
               ${this.value.map((file, i) => this._renderFileItem(file, i))}
             </ul>
-          ` : nothing30}
+          ` : nothing31}
       </div>
     `;
   }
@@ -21008,7 +21086,7 @@ var CsFileUpload = class extends CsFileUploadInternal {
 customElements.define("cs-file-upload", CsFileUpload);
 
 // src/calendar/internal.ts
-import { css as css126, html as html58, nothing as nothing31 } from "lit";
+import { css as css126, html as html58, nothing as nothing32 } from "lit";
 import { property as property57, state as state18 } from "lit/decorators.js";
 import { classMap as classMap48 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined30 } from "lit/directives/if-defined.js";
@@ -21504,7 +21582,7 @@ var CsCalendarInternal = class extends CsBaseElement {
                           role="gridcell"
                           tabindex=${this._getTabIndex(day)}
                           aria-selected=${isSelected ? "true" : "false"}
-                          aria-disabled=${!isEnabled ? "true" : nothing31}
+                          aria-disabled=${!isEnabled ? "true" : nothing32}
                           data-date=${day.date}
                           @click=${() => this._onDateClick(day.date)}
                         >
@@ -21708,7 +21786,7 @@ var CsDateInput = class extends CsDateInputInternal {
 customElements.define("cs-date-input", CsDateInput);
 
 // src/date-picker/internal.ts
-import { css as css130, html as html60, nothing as nothing32 } from "lit";
+import { css as css130, html as html60, nothing as nothing33 } from "lit";
 import { property as property59, state as state19, query as query6 } from "lit/decorators.js";
 import { ifDefined as ifDefined32 } from "lit/directives/if-defined.js";
 import { consume as consume3 } from "@lit/context";
@@ -21947,7 +22025,7 @@ var CsDatePickerInternal = class extends Base10 {
                     ></cs-calendar>
                   </div>
                 </div>
-              ` : nothing32}
+              ` : nothing33}
         </div>
       </div>
     `;
@@ -22014,7 +22092,7 @@ var CsDatePicker = class extends CsDatePickerInternal {
 customElements.define("cs-date-picker", CsDatePicker);
 
 // src/date-range-picker/internal.ts
-import { css as css133, html as html61, nothing as nothing33 } from "lit";
+import { css as css133, html as html61, nothing as nothing34 } from "lit";
 import { property as property60, state as state20, query as query7 } from "lit/decorators.js";
 import { classMap as classMap50 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined33 } from "lit/directives/if-defined.js";
@@ -22627,7 +22705,7 @@ var CsDateRangePickerInternal = class extends Base11 {
   }
   // ── Render ──────────────────────────────────────────────────────────
   _renderModeSwitch() {
-    if (!this._showModeSwitch) return nothing33;
+    if (!this._showModeSwitch) return nothing34;
     const absLabel = this.i18nStrings?.absoluteModeTitle ?? "Absolute";
     const relLabel = this.i18nStrings?.relativeModeTitle ?? "Relative";
     return html61`
@@ -22715,7 +22793,7 @@ var CsDateRangePickerInternal = class extends Base11 {
             <cs-icon name="status-negative" size="small"></cs-icon>
             <span>${this._errorMessage}</span>
           </div>
-        ` : nothing33}
+        ` : nothing34}
         <div class="footer-button-wrapper">
           <cs-button variant="link" @click=${this._onCancel}>${cancelLabel}</cs-button>
         </div>
@@ -22775,7 +22853,7 @@ var CsDateRangePickerInternal = class extends Base11 {
             </div>
             ${this._renderFooter()}
           </div>
-        ` : nothing33}
+        ` : nothing34}
       </div>
     `;
   }
@@ -22856,7 +22934,7 @@ var CsDateRangePicker = class extends CsDateRangePickerInternal {
 customElements.define("cs-date-range-picker", CsDateRangePicker);
 
 // src/attribute-editor/internal.ts
-import { css as css136, html as html63, nothing as nothing35 } from "lit";
+import { css as css136, html as html63, nothing as nothing36 } from "lit";
 import { property as property62 } from "lit/decorators.js";
 
 // src/attribute-editor/styles.ts
@@ -22984,7 +23062,7 @@ var componentStyles60 = css134`
 `;
 
 // src/input/internal.ts
-import { css as css135, html as html62, nothing as nothing34 } from "lit";
+import { css as css135, html as html62, nothing as nothing35 } from "lit";
 import { property as property61 } from "lit/decorators.js";
 import { classMap as classMap51 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined34 } from "lit/directives/if-defined.js";
@@ -23131,7 +23209,7 @@ var CsInputInternal = class extends Base12 {
                 <cs-icon name="close" size="small"></cs-icon>
               </button>
             </span>
-          ` : nothing34}
+          ` : nothing35}
         </div>
       </div>
     `;
@@ -23246,7 +23324,7 @@ var CsAttributeEditorInternal = class extends CsBaseElement {
                   @click=${this._handleRemoveClick(itemIndex)}
                 >${this.removeButtonText}</cs-button>
               </div>
-            ` : nothing35}
+            ` : nothing36}
       </div>
     `;
   }
@@ -23256,9 +23334,9 @@ var CsAttributeEditorInternal = class extends CsBaseElement {
     const gridCols = cols > 0 ? `repeat(${cols}, 1fr) auto` : "1fr";
     return html63`
       <div class="root" style="grid-template-columns: ${gridCols}">
-        ${!hasItems && this.empty ? html63`<div class="empty empty-appear">${this.empty}</div>` : nothing35}
+        ${!hasItems && this.empty ? html63`<div class="empty empty-appear">${this.empty}</div>` : nothing36}
         ${this.items.map((item, idx) => html63`
-          ${idx > 0 ? html63`<div class="divider"></div>` : nothing35}
+          ${idx > 0 ? html63`<div class="divider"></div>` : nothing36}
           ${this._renderRow(item, idx)}
         `)}
         <div class="add-row">
@@ -23301,7 +23379,7 @@ var CsAttributeEditor = class extends CsAttributeEditorInternal {
 customElements.define("cs-attribute-editor", CsAttributeEditor);
 
 // src/tag-editor/internal.ts
-import { css as css138, html as html64, nothing as nothing36 } from "lit";
+import { css as css138, html as html64, nothing as nothing37 } from "lit";
 import { property as property63 } from "lit/decorators.js";
 import { classMap as classMap52 } from "lit/directives/class-map.js";
 
@@ -23504,9 +23582,9 @@ var CsTagEditorInternal = class extends CsBaseElement {
     const limitReached = this.tagLimit != null && this.tags.length >= this.tagLimit;
     return html64`
       <div class="root">
-        ${this.loading ? html64`<div class="loading">Loading...</div>` : nothing36}
+        ${this.loading ? html64`<div class="loading">Loading...</div>` : nothing37}
         <div class="tag-list">
-          ${this.tags.length === 0 && !this.loading ? html64`<div>${this.i18nStrings?.emptyTags ?? "No tags"}</div>` : nothing36}
+          ${this.tags.length === 0 && !this.loading ? html64`<div>${this.i18nStrings?.emptyTags ?? "No tags"}</div>` : nothing37}
           ${this.tags.map((tag, idx) => this._renderTagRow(tag, idx))}
         </div>
         <div class="add-section">
@@ -23564,7 +23642,7 @@ var CsTagEditor = class extends CsTagEditorInternal {
 customElements.define("cs-tag-editor", CsTagEditor);
 
 // src/wizard/internal.ts
-import { css as css140, html as html65, nothing as nothing37 } from "lit";
+import { css as css140, html as html65, nothing as nothing38 } from "lit";
 import { property as property64 } from "lit/decorators.js";
 import { classMap as classMap53 } from "lit/directives/class-map.js";
 
@@ -23941,15 +24019,15 @@ var CsWizardInternal = class extends CsBaseElement {
                   class="navigation-link"
                   role=${isEnabled ? "button" : "text"}
                   tabindex=${isEnabled ? "0" : "-1"}
-                  aria-current=${isActive ? "step" : nothing37}
-                  aria-disabled=${isDisabled ? "true" : nothing37}
-                  @click=${isEnabled ? () => this._onStepClick(i) : nothing37}
+                  aria-current=${isActive ? "step" : nothing38}
+                  aria-disabled=${isDisabled ? "true" : nothing38}
+                  @click=${isEnabled ? () => this._onStepClick(i) : nothing38}
                   @keydown=${isEnabled ? (e) => {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
           this._onStepClick(i);
         }
-      } : nothing37}
+      } : nothing38}
                 >
                   <span class="circle"></span>
                   <span class="title">${step.title}${optionalLabel}</span>
@@ -23972,7 +24050,7 @@ var CsWizardInternal = class extends CsBaseElement {
             ${this._stepNumberLabel(this._clampedIndex + 1)}
             <span>${step.title}${optionalLabel}</span>
           </h2>
-          ${step.description ? html65`<p>${step.description}</p>` : nothing37}
+          ${step.description ? html65`<p>${step.description}</p>` : nothing38}
         </div>
       </div>
     `;
@@ -23986,7 +24064,7 @@ var CsWizardInternal = class extends CsBaseElement {
           <cs-alert type="error" aria-label=${this.i18nStrings?.errorIconAriaLabel ?? "Error"}>
             ${step.errorText}
           </cs-alert>
-        ` : nothing37}
+        ` : nothing38}
         <div class="step-content">${step.content}</div>
       </div>
     `;
@@ -24007,7 +24085,7 @@ var CsWizardInternal = class extends CsBaseElement {
               variant="normal"
               @click=${() => this._onPrevious()}
             >${this._previousText}</cs-button>
-          ` : nothing37}
+          ` : nothing38}
           <cs-button
             variant="primary"
             ?loading=${this.isLoadingNextStep}
@@ -24882,7 +24960,7 @@ var CsCodeEditor = class extends CsCodeEditorInternal {
 customElements.define("cs-code-editor", CsCodeEditor);
 
 // src/top-navigation/internal.ts
-import { css as css144, html as html67, nothing as nothing38 } from "lit";
+import { css as css144, html as html67, nothing as nothing39 } from "lit";
 import { property as property66 } from "lit/decorators.js";
 import { classMap as classMap55 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined35 } from "lit/directives/if-defined.js";
@@ -25283,7 +25361,7 @@ var CsTopNavigationInternal = class extends CsBaseElement {
     });
   }
   _renderIdentity() {
-    if (!this.identity) return nothing38;
+    if (!this.identity) return nothing39;
     const hasLogo = !!this.identity.logo;
     const identityClasses = {
       "identity": true,
@@ -25296,8 +25374,8 @@ var CsTopNavigationInternal = class extends CsBaseElement {
           href=${ifDefined35(this.identity.href)}
           @click=${(e) => this._onIdentityClick(e)}
         >
-          ${hasLogo ? html67`<img class="logo" src=${this.identity.logo.src} alt=${ifDefined35(this.identity.logo.alt)} />` : nothing38}
-          ${this.identity.title ? html67`<span class="title">${this.identity.title}</span>` : nothing38}
+          ${hasLogo ? html67`<img class="logo" src=${this.identity.logo.src} alt=${ifDefined35(this.identity.logo.alt)} />` : nothing39}
+          ${this.identity.title ? html67`<span class="title">${this.identity.title}</span>` : nothing39}
         </a>
       </div>
     `;
@@ -25320,9 +25398,9 @@ var CsTopNavigationInternal = class extends CsBaseElement {
             aria-label=${ifDefined35(utility.ariaLabel)}
             @click=${(e) => this._onUtilityButtonClick(utility, e)}
           >
-            ${utility.iconName ? html67`<span class="utility-link-icon"><cs-icon name=${utility.iconName}></cs-icon></span>` : nothing38}
-            ${utility.text ? html67`<span>${utility.text}</span>` : nothing38}
-            ${utility.external ? html67`<span class="utility-button-external-icon"><cs-icon name="external" size="inherit"></cs-icon></span>` : nothing38}
+            ${utility.iconName ? html67`<span class="utility-link-icon"><cs-icon name=${utility.iconName}></cs-icon></span>` : nothing39}
+            ${utility.text ? html67`<span>${utility.text}</span>` : nothing39}
+            ${utility.external ? html67`<span class="utility-button-external-icon"><cs-icon name="external" size="inherit"></cs-icon></span>` : nothing39}
           </a>
         </div>
       `;
@@ -25335,8 +25413,8 @@ var CsTopNavigationInternal = class extends CsBaseElement {
           aria-label=${ifDefined35(utility.ariaLabel)}
           @click=${(e) => this._onUtilityButtonClick(utility, e)}
         >
-          ${utility.iconName ? html67`<span class="utility-link-icon"><cs-icon name=${utility.iconName}></cs-icon></span>` : nothing38}
-          ${utility.text ? html67`<span>${utility.text}</span>` : nothing38}
+          ${utility.iconName ? html67`<span class="utility-link-icon"><cs-icon name=${utility.iconName}></cs-icon></span>` : nothing39}
+          ${utility.text ? html67`<span>${utility.text}</span>` : nothing39}
         </button>
       </div>
     `;
@@ -25353,7 +25431,7 @@ var CsTopNavigationInternal = class extends CsBaseElement {
           variant="normal"
           aria-label=${ifDefined35(utility.ariaLabel)}
         >
-          ${utility.iconName ? html67`<cs-icon name=${utility.iconName}></cs-icon>` : nothing38}
+          ${utility.iconName ? html67`<cs-icon name=${utility.iconName}></cs-icon>` : nothing39}
           ${utility.text ?? ""}
         </cs-button-dropdown>
       </div>
@@ -25399,7 +25477,7 @@ var CsTopNavigation = class extends CsTopNavigationInternal {
 customElements.define("cs-top-navigation", CsTopNavigation);
 
 // src/side-navigation/internal.ts
-import { css as css146, html as html68, nothing as nothing39 } from "lit";
+import { css as css146, html as html68, nothing as nothing40 } from "lit";
 import { property as property67, state as state21 } from "lit/decorators.js";
 import { classMap as classMap56 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined36 } from "lit/directives/if-defined.js";
@@ -25715,7 +25793,7 @@ var CsSideNavigationInternal = class extends CsBaseElement {
     });
   }
   _renderHeader() {
-    if (!this.header) return nothing39;
+    if (!this.header) return nothing40;
     const hasLogo = !!this.header.logo;
     const headerLinkClasses = {
       "header-link": true,
@@ -25731,8 +25809,8 @@ var CsSideNavigationInternal = class extends CsBaseElement {
       e
     )}
         >
-          ${hasLogo ? html68`<img class="header-logo" src=${this.header.logo.src} alt=${ifDefined36(this.header.logo.alt)} />` : nothing39}
-          ${this.header.text ? html68`<span class="header-link-text">${this.header.text}</span>` : nothing39}
+          ${hasLogo ? html68`<img class="header-logo" src=${this.header.logo.src} alt=${ifDefined36(this.header.logo.alt)} />` : nothing40}
+          ${this.header.text ? html68`<span class="header-link-text">${this.header.text}</span>` : nothing40}
         </a>
       </div>
       <hr class="divider divider-header" />
@@ -25749,13 +25827,13 @@ var CsSideNavigationInternal = class extends CsBaseElement {
         <a
           class=${classMap56(linkClasses)}
           href=${item.href}
-          aria-current=${isActive ? "page" : nothing39}
-          target=${item.external ? "_blank" : nothing39}
-          rel=${item.external ? "noopener" : nothing39}
+          aria-current=${isActive ? "page" : nothing40}
+          target=${item.external ? "_blank" : nothing40}
+          rel=${item.external ? "noopener" : nothing40}
           @click=${(e) => this._onLinkClick(item, e)}
         >
           ${item.text}
-          ${item.external ? html68`<span class="external-icon"><cs-icon name="external" size="inherit"></cs-icon></span>` : nothing39}
+          ${item.external ? html68`<span class="external-icon"><cs-icon name="external" size="inherit"></cs-icon></span>` : nothing40}
         </a>
       </li>
     `;
@@ -25781,7 +25859,7 @@ var CsSideNavigationInternal = class extends CsBaseElement {
               </span>
             </button>
           </div>
-          ${expanded ? html68`<ul class="list">${item.items.map((child) => this._renderItem(child))}</ul>` : nothing39}
+          ${expanded ? html68`<ul class="list">${item.items.map((child) => this._renderItem(child))}</ul>` : nothing40}
         </div>
       </li>
     `;
@@ -25812,13 +25890,13 @@ var CsSideNavigationInternal = class extends CsBaseElement {
             <a
               class=${classMap56(linkClasses)}
               href=${item.href}
-              aria-current=${isActive ? "page" : nothing39}
+              aria-current=${isActive ? "page" : nothing40}
               @click=${(e) => this._onLinkClick(item, e)}
             >
               ${item.text}
             </a>
           </div>
-          ${expanded ? html68`<ul class="list list-variant-expandable-link-group">${item.items.map((child) => this._renderItem(child))}</ul>` : nothing39}
+          ${expanded ? html68`<ul class="list list-variant-expandable-link-group">${item.items.map((child) => this._renderItem(child))}</ul>` : nothing40}
         </div>
       </li>
     `;
@@ -25834,12 +25912,12 @@ var CsSideNavigationInternal = class extends CsBaseElement {
         <a
           class=${classMap56(linkClasses)}
           href=${item.href}
-          aria-current=${isActive ? "page" : nothing39}
+          aria-current=${isActive ? "page" : nothing40}
           @click=${(e) => this._onLinkClick(item, e)}
         >
           ${item.text}
         </a>
-        ${item.items.length ? html68`<ul class="list">${item.items.map((child) => this._renderItem(child))}</ul>` : nothing39}
+        ${item.items.length ? html68`<ul class="list">${item.items.map((child) => this._renderItem(child))}</ul>` : nothing40}
       </li>
     `;
   }
@@ -26446,7 +26524,7 @@ var CsDrawer = class extends CsDrawerInternal {
 customElements.define("cs-drawer", CsDrawer);
 
 // src/split-panel/internal.ts
-import { css as css152, html as html71, nothing as nothing40 } from "lit";
+import { css as css152, html as html71, nothing as nothing41 } from "lit";
 import { property as property70, state as state22 } from "lit/decorators.js";
 import { classMap as classMap58 } from "lit/directives/class-map.js";
 
@@ -26867,7 +26945,7 @@ var CsSplitPanelInternal = class extends CsBaseElement {
                             @click=${this._onPreferencesClick}
                           ></cs-button>
                           <div class="divider"></div>
-                        ` : nothing40}
+                        ` : nothing41}
                       <cs-button
                         variant="icon"
                         icon-name="angle-down"
@@ -26900,7 +26978,7 @@ var CsSplitPanelInternal = class extends CsBaseElement {
                               @click=${this._onPreferencesClick}
                             ></cs-button>
                             <div class="divider"></div>
-                          ` : nothing40}
+                          ` : nothing41}
                         <cs-button
                           variant="icon"
                           icon-name="close"
@@ -27265,7 +27343,7 @@ var CsTextarea = class extends CsTextareaInternal {
 customElements.define("cs-textarea", CsTextarea);
 
 // src/text-filter/internal.ts
-import { css as css156, html as html74, nothing as nothing41 } from "lit";
+import { css as css156, html as html74, nothing as nothing42 } from "lit";
 import { property as property73 } from "lit/decorators.js";
 
 // src/text-filter/styles.ts
@@ -27356,7 +27434,7 @@ var CsTextFilterInternal = class extends CsBaseElement {
             @change=${this._onInputChange}
           ></cs-input>
         </div>
-        ${showResults ? html74`<span class="results">${this.countText}</span>` : nothing41}
+        ${showResults ? html74`<span class="results">${this.countText}</span>` : nothing42}
       </div>
     `;
   }
@@ -27519,7 +27597,7 @@ var CsTimeInput = class extends CsTimeInputInternal {
 customElements.define("cs-time-input", CsTimeInput);
 
 // src/hotspot/internal.ts
-import { css as css160, html as html76, nothing as nothing42 } from "lit";
+import { css as css160, html as html76, nothing as nothing43 } from "lit";
 import { property as property75, state as state23 } from "lit/decorators.js";
 import { classMap as classMap61 } from "lit/directives/class-map.js";
 import { consume as consume7 } from "@lit/context";
@@ -27635,7 +27713,7 @@ var CsHotspotInternal = class extends CsBaseElement {
           @click=${this._onHotspotClick}
         ></cs-button>
       </div>
-    ` : nothing42;
+    ` : nothing43;
     const currentStep = this._currentStep;
     const popoverContent = this._popoverOpen && isActive && currentStep && ctx ? html76`
       <div class="annotation-popover" role="dialog" aria-label="Annotation">
@@ -27656,7 +27734,7 @@ var CsHotspotInternal = class extends CsBaseElement {
             <cs-button variant="link" @click=${this._onPrevious}>
               ${ctx.i18nStrings.previousButtonText}
             </cs-button>
-          ` : nothing42}
+          ` : nothing43}
           ${currentStep.globalIndex < ctx.totalSteps - 1 ? html76`
             <cs-button variant="primary" @click=${this._onNext}>
               ${ctx.i18nStrings.nextButtonText}
@@ -27668,7 +27746,7 @@ var CsHotspotInternal = class extends CsBaseElement {
           `}
         </div>
       </div>
-    ` : nothing42;
+    ` : nothing43;
     return html76`
       <div class="wrapper">
         <div class="elementWrapper">
@@ -27702,7 +27780,7 @@ var CsHotspot = class extends CsHotspotInternal {
 customElements.define("cs-hotspot", CsHotspot);
 
 // src/tutorial-panel/internal.ts
-import { css as css162, html as html77, nothing as nothing43 } from "lit";
+import { css as css162, html as html77, nothing as nothing44 } from "lit";
 import { property as property76, state as state24 } from "lit/decorators.js";
 import { classMap as classMap62 } from "lit/directives/class-map.js";
 
@@ -27803,7 +27881,7 @@ var CsTutorialPanelInternal = class extends CsBaseElement {
               ${this.i18nStrings.tutorialListDownloadLinkText}
             </cs-link>
           </div>
-        ` : nothing43}
+        ` : nothing44}
 
         <ul class="tutorial-list" role="list">
           ${this.tutorials.map((tutorial) => this._renderTutorialItem(tutorial))}
@@ -27824,11 +27902,11 @@ var CsTutorialPanelInternal = class extends CsBaseElement {
           <cs-status-indicator type="success">
             ${this.i18nStrings.tutorialCompletedText}
           </cs-status-indicator>
-        ` : nothing43}
+        ` : nothing44}
 
         ${isDisabled && tutorial.prerequisitesAlert ? html77`
           <div class="prerequisites-alert">${tutorial.prerequisitesAlert}</div>
-        ` : nothing43}
+        ` : nothing44}
 
         <div class="tutorial-description">${tutorial.description}</div>
 
@@ -27839,7 +27917,7 @@ var CsTutorialPanelInternal = class extends CsBaseElement {
               aria-label=${this.i18nStrings.labelLearnMoreLink ?? this.i18nStrings.learnMoreLinkText}>
               ${this.i18nStrings.learnMoreLinkText}
             </cs-link>
-          ` : nothing43}
+          ` : nothing44}
         </div>
 
         <cs-button
@@ -27901,7 +27979,7 @@ var CsTutorialPanelInternal = class extends CsBaseElement {
         <div class="completed-screen">
           <cs-icon name="status-positive" size="big"></cs-icon>
           <h2>${this.i18nStrings.completionScreenTitle}</h2>
-          ${tutorial ? html77`<p>${tutorial.completedScreenDescription}</p>` : nothing43}
+          ${tutorial ? html77`<p>${tutorial.completedScreenDescription}</p>` : nothing44}
           <div class="completed-actions">
             <cs-button variant="primary" @click=${this._onBackToList}>
               ${this.i18nStrings.dismissTutorialButtonText}
@@ -27910,7 +27988,7 @@ var CsTutorialPanelInternal = class extends CsBaseElement {
               <cs-button variant="link" @click=${() => fireNonCancelableEvent(this, "feedbackClick", { tutorial })}>
                 ${this.i18nStrings.feedbackLinkText}
               </cs-button>
-            ` : nothing43}
+            ` : nothing44}
           </div>
         </div>
       </div>
@@ -27955,7 +28033,7 @@ var CsTutorialPanel = class extends CsTutorialPanelInternal {
 customElements.define("cs-tutorial-panel", CsTutorialPanel);
 
 // src/app-layout/internal.ts
-import { css as css173, html as html78, nothing as nothing44 } from "lit";
+import { css as css173, html as html78, nothing as nothing45 } from "lit";
 import { property as property77 } from "lit/decorators.js";
 import { classMap as classMap63 } from "lit/directives/class-map.js";
 
@@ -29498,7 +29576,7 @@ var CsAppLayoutInternal = class extends CsBaseElement {
             >
               <slot name="navigation"></slot>
             </div>
-          ` : nothing44}
+          ` : nothing45}
 
           <div
             class=${classMap63(layoutMainClasses)}
@@ -29528,7 +29606,7 @@ var CsAppLayoutInternal = class extends CsBaseElement {
             >
               <slot name="tools"></slot>
             </div>
-          ` : nothing44}
+          ` : nothing45}
         </div>
 
         ${!this.navigationHide && !this.navigationOpen ? html78`
@@ -29540,7 +29618,7 @@ var CsAppLayoutInternal = class extends CsBaseElement {
           >
             <cs-icon name="menu"></cs-icon>
           </button>
-        ` : nothing44}
+        ` : nothing45}
 
         ${!this.navigationHide && this.navigationOpen ? html78`
           <button
@@ -29551,7 +29629,7 @@ var CsAppLayoutInternal = class extends CsBaseElement {
           >
             <cs-icon name="close"></cs-icon>
           </button>
-        ` : nothing44}
+        ` : nothing45}
 
         ${!this.toolsHide && !this.toolsOpen ? html78`
           <button
@@ -29562,7 +29640,7 @@ var CsAppLayoutInternal = class extends CsBaseElement {
           >
             <cs-icon name="status-info"></cs-icon>
           </button>
-        ` : nothing44}
+        ` : nothing45}
 
         ${!this.toolsHide && this.toolsOpen ? html78`
           <button
@@ -29573,7 +29651,7 @@ var CsAppLayoutInternal = class extends CsBaseElement {
           >
             <cs-icon name="close"></cs-icon>
           </button>
-        ` : nothing44}
+        ` : nothing45}
 
         <slot name="drawers" style="display:none"></slot>
       </div>
@@ -29623,7 +29701,7 @@ var CsAppLayout = class extends CsAppLayoutInternal {
 customElements.define("cs-app-layout", CsAppLayout);
 
 // src/file-token-group/internal.ts
-import { css as css175, html as html79, nothing as nothing45 } from "lit";
+import { css as css175, html as html79, nothing as nothing46 } from "lit";
 import { property as property78, state as state25 } from "lit/decorators.js";
 import { classMap as classMap64 } from "lit/directives/class-map.js";
 
@@ -29912,7 +29990,7 @@ var CsFileTokenGroupInternal = class extends CsBaseElement {
     return file.type.startsWith("image/");
   }
   _renderThumbnail(file) {
-    if (!this.showFileThumbnail || !this._isImageFile(file)) return nothing45;
+    if (!this.showFileThumbnail || !this._isImageFile(file)) return nothing46;
     const url = URL.createObjectURL(file);
     return html79`
       <div class="file-option-thumbnail">
@@ -29961,12 +30039,12 @@ var CsFileTokenGroupInternal = class extends CsBaseElement {
             <div class=${classMap64(metadataClasses)}>
               <div class="file-name-container" tabindex="0">
                 <div class="file-option-name">${file.name}</div>
-                ${this.showFileSize && file.size != null ? html79`<div class="file-option-size">${this._formatSize(file.size)}</div>` : nothing45}
-                ${this.showFileLastModified && file.lastModified ? html79`<div class="file-option-last-modified">${this._formatLastModified(new Date(file.lastModified))}</div>` : nothing45}
+                ${this.showFileSize && file.size != null ? html79`<div class="file-option-size">${this._formatSize(file.size)}</div>` : nothing46}
+                ${this.showFileLastModified && file.lastModified ? html79`<div class="file-option-last-modified">${this._formatLastModified(new Date(file.lastModified))}</div>` : nothing46}
               </div>
             </div>
           </div>
-          ${loading ? html79`<div class="file-loading-overlay${!hasThumbnail ? " file-loading-overlay-single-row" : ""}"><cs-spinner size="normal"></cs-spinner></div>` : nothing45}
+          ${loading ? html79`<div class="file-loading-overlay${!hasThumbnail ? " file-loading-overlay-single-row" : ""}"><cs-spinner size="normal"></cs-spinner></div>` : nothing46}
           ${showDismiss ? html79`
               <button
                 class="dismiss-button"
@@ -29976,16 +30054,16 @@ var CsFileTokenGroupInternal = class extends CsBaseElement {
               >
                 <cs-icon name="close" size="small"></cs-icon>
               </button>
-            ` : nothing45}
+            ` : nothing46}
         </div>
         ${errorText ? html79`<div class="file-error-text">
               <cs-icon name="status-negative" size="small"></cs-icon>
               <span>${errorText}</span>
-            </div>` : nothing45}
+            </div>` : nothing46}
         ${!errorText && warningText ? html79`<div class="file-warning-text">
               <cs-icon name="status-warning" size="small"></cs-icon>
               <span>${warningText}</span>
-            </div>` : nothing45}
+            </div>` : nothing46}
       </li>
     `;
   }
@@ -30018,7 +30096,7 @@ var CsFileTokenGroupInternal = class extends CsBaseElement {
             >
               ${this._expanded ? showFewerLabel : showMoreLabel}
             </button>
-          ` : nothing45}
+          ` : nothing46}
       </div>
     `;
   }
@@ -30275,6 +30353,7 @@ var CsItemCardInternal = class extends CsBaseElement {
     this._hasFooter = false;
     this._hasActions = false;
     this._hasDescription = false;
+    this._hasIcon = false;
     this._onHeaderSlotChange = (e) => {
       const slot = e.target;
       this._hasHeader = slot.assignedNodes({ flatten: true }).length > 0;
@@ -30295,6 +30374,11 @@ var CsItemCardInternal = class extends CsBaseElement {
       this._hasDescription = slot.assignedNodes({ flatten: true }).length > 0;
       this.requestUpdate();
     };
+    this._onIconSlotChange = (e) => {
+      const slot = e.target;
+      this._hasIcon = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
   }
   static {
     this.styles = [sharedStyles, componentStyles76, hostStyles78];
@@ -30334,8 +30418,9 @@ var CsItemCardInternal = class extends CsBaseElement {
     return html80`
       <div class=${classMap65(rootClasses)} style=${styleMap(rootStyleOverrides)}>
         <div class="inner-card">
-          ${this._hasHeader || this._hasActions || this._hasDescription ? html80`
+          ${this._hasHeader || this._hasActions || this._hasDescription || this._hasIcon ? html80`
               <div class=${classMap65(headerClasses)}>
+                ${this._hasIcon ? html80`<div class="icon"><slot name="icon" @slotchange=${this._onIconSlotChange}></slot></div>` : html80`<slot name="icon" @slotchange=${this._onIconSlotChange} style="display:none"></slot>`}
                 <div class="header-inner">
                   <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
                 </div>
@@ -30343,6 +30428,7 @@ var CsItemCardInternal = class extends CsBaseElement {
                 ${this._hasActions ? html80`<div class="actions"><slot name="actions" @slotchange=${this._onActionsSlotChange}></slot></div>` : html80`<slot name="actions" @slotchange=${this._onActionsSlotChange} style="display:none"></slot>`}
               </div>
             ` : html80`
+              <slot name="icon" @slotchange=${this._onIconSlotChange} style="display:none"></slot>
               <slot name="header" @slotchange=${this._onHeaderSlotChange} style="display:none"></slot>
               <slot name="description" @slotchange=${this._onDescriptionSlotChange} style="display:none"></slot>
               <slot name="actions" @slotchange=${this._onActionsSlotChange} style="display:none"></slot>
@@ -30387,7 +30473,7 @@ var CsItemCard = class extends CsItemCardInternal {
 customElements.define("cs-item-card", CsItemCard);
 
 // src/panel-layout/internal.ts
-import { css as css179, html as html81, nothing as nothing46 } from "lit";
+import { css as css179, html as html81, nothing as nothing47 } from "lit";
 import { property as property80, state as state26 } from "lit/decorators.js";
 import { classMap as classMap66 } from "lit/directives/class-map.js";
 import { styleMap as styleMap2 } from "lit/directives/style-map.js";
@@ -30567,7 +30653,7 @@ var CsPanelLayoutInternal = class extends CsBaseElement {
     handle?.focus();
   }
   _renderHandle() {
-    if (!this.resizable || this.display !== "all") return nothing46;
+    if (!this.resizable || this.display !== "all") return nothing47;
     const ariaLabel = this.i18nStrings?.resizeHandleAriaLabel ?? "Resize panel";
     const tooltip = this.i18nStrings?.resizeHandleTooltipText;
     return html81`
@@ -30579,7 +30665,7 @@ var CsPanelLayoutInternal = class extends CsBaseElement {
         aria-valuemin=${this.minPanelSize ?? MIN_DEFAULT}
         aria-valuemax=${this.maxPanelSize ?? this.clientWidth}
         aria-label=${ariaLabel}
-        title=${tooltip ?? nothing46}
+        title=${tooltip ?? nothing47}
         tabindex="0"
         @pointerdown=${this._onPointerDown}
         @pointermove=${this._onPointerMove}
@@ -30614,24 +30700,24 @@ var CsPanelLayoutInternal = class extends CsBaseElement {
     const panelFirst = this.panelPosition === "side-start";
     const panelSection = html81`
       <div class="panel" style=${styleMap2(panelStyle)}>
-        ${!panelFirst ? html81`<div class="handle">${this._renderHandle()}</div>` : nothing46}
+        ${!panelFirst ? html81`<div class="handle">${this._renderHandle()}</div>` : nothing47}
         <div
           class="panel-content"
-          tabindex=${this.panelFocusable ? "0" : nothing46}
-          aria-label=${this.panelFocusable?.ariaLabel ?? nothing46}
-          aria-labelledby=${this.panelFocusable?.ariaLabelledby ?? nothing46}
+          tabindex=${this.panelFocusable ? "0" : nothing47}
+          aria-label=${this.panelFocusable?.ariaLabel ?? nothing47}
+          aria-labelledby=${this.panelFocusable?.ariaLabelledby ?? nothing47}
         >
           <slot name="panel"></slot>
         </div>
-        ${panelFirst ? html81`<div class="handle">${this._renderHandle()}</div>` : nothing46}
+        ${panelFirst ? html81`<div class="handle">${this._renderHandle()}</div>` : nothing47}
       </div>
     `;
     const mainSection = html81`
       <div
         class="content"
-        tabindex=${this.mainFocusable ? "0" : nothing46}
-        aria-label=${this.mainFocusable?.ariaLabel ?? nothing46}
-        aria-labelledby=${this.mainFocusable?.ariaLabelledby ?? nothing46}
+        tabindex=${this.mainFocusable ? "0" : nothing47}
+        aria-label=${this.mainFocusable?.ariaLabel ?? nothing47}
+        aria-labelledby=${this.mainFocusable?.ariaLabelledby ?? nothing47}
       >
         <slot name="main"></slot>
       </div>
@@ -30687,7 +30773,7 @@ var CsPanelLayout = class extends CsPanelLayoutInternal {
 customElements.define("cs-panel-layout", CsPanelLayout);
 
 // src/s3-resource-selector/internal.ts
-import { css as css181, html as html82, nothing as nothing47 } from "lit";
+import { css as css181, html as html82, nothing as nothing48 } from "lit";
 import { property as property81, state as state27 } from "lit/decorators.js";
 
 // src/s3-resource-selector/styles.ts
@@ -30947,12 +31033,12 @@ var CsS3ResourceSelectorInternal = class extends CsBaseElement {
             .value=${this._uri}
             placeholder=${placeholder}
             ?invalid=${this.invalid}
-            aria-describedby=${this.inputAriaDescribedby ?? nothing47}
+            aria-describedby=${this.inputAriaDescribedby ?? nothing48}
             @change=${this._onUriChange}
             style="flex:1"
           ></cs-input>
           <cs-button @click=${this._openModal}>${browseLabel}</cs-button>
-          ${this.viewHref ? html82`<cs-button variant="normal" href=${this.viewHref}>${strings?.inContextViewButton ?? "View"}</cs-button>` : nothing47}
+          ${this.viewHref ? html82`<cs-button variant="normal" href=${this.viewHref}>${strings?.inContextViewButton ?? "View"}</cs-button>` : nothing48}
         </div>
 
         <slot name="alert"></slot>
@@ -31073,7 +31159,7 @@ var CsS3ResourceSelector = class extends CsS3ResourceSelectorInternal {
 customElements.define("cs-s3-resource-selector", CsS3ResourceSelector);
 
 // src/app-layout-toolbar/internal.ts
-import { css as css182, html as html83, nothing as nothing48 } from "lit";
+import { css as css182, html as html83, nothing as nothing49 } from "lit";
 import { property as property82 } from "lit/decorators.js";
 import { classMap as classMap67 } from "lit/directives/class-map.js";
 var toolbarStyles = css182`
@@ -31083,8 +31169,8 @@ var toolbarStyles = css182`
     gap: 4px;
     height: 48px;
     padding: 0 12px;
-    background: var(--color-background-container-content-ljv8l6, #ffffff);
-    border-bottom: 1px solid var(--color-border-divider-default-cx07f2, #e9ebed);
+    background: var(--color-background-container-content, #ffffff);
+    border-bottom: 1px solid var(--color-border-divider-default, #e9ebed);
     box-sizing: border-box;
   }
 
@@ -31100,7 +31186,7 @@ var toolbarStyles = css182`
     border: none;
     border-radius: 8px;
     background: transparent;
-    color: var(--color-text-interactive-default-waj0dj, #414d5c);
+    color: var(--color-text-interactive-default, #414d5c);
     cursor: pointer;
     position: relative;
   }
@@ -31108,19 +31194,19 @@ var toolbarStyles = css182`
   .toolbar__nav-trigger:hover,
   .toolbar__tools-trigger:hover,
   .toolbar__drawer-trigger:hover {
-    background: var(--color-background-button-normal-hover-7jklbd, #f2f3f3);
+    background: var(--color-background-button-normal-hover, #f2f3f3);
   }
 
   .toolbar__nav-trigger:focus-visible,
   .toolbar__tools-trigger:focus-visible,
   .toolbar__drawer-trigger:focus-visible {
-    outline: 2px solid var(--color-border-item-focused-nv6mhz, #0972d3);
+    outline: 2px solid var(--color-border-item-focused, #0972d3);
     outline-offset: 2px;
   }
 
   .toolbar__drawer-trigger--active {
-    background: var(--color-background-button-normal-active-clrtfe, #e9ebed);
-    color: var(--color-text-interactive-active-vol84d, #0972d3);
+    background: var(--color-background-button-normal-active, #e9ebed);
+    color: var(--color-text-interactive-active, #0972d3);
   }
 
   .toolbar__breadcrumbs {
@@ -31132,7 +31218,7 @@ var toolbarStyles = css182`
   .toolbar__separator {
     width: 1px;
     height: 24px;
-    background: var(--color-border-divider-default-cx07f2, #e9ebed);
+    background: var(--color-border-divider-default, #e9ebed);
     margin: 0 4px;
     flex-shrink: 0;
   }
@@ -31144,11 +31230,11 @@ var toolbarStyles = css182`
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background: var(--color-background-notification-badge-3847ch, #d91515);
+    background: var(--color-background-notification-badge, #d91515);
   }
 
   .toolbar__drawer-panel {
-    border-left: 1px solid var(--color-border-divider-default-cx07f2, #e9ebed);
+    border-left: 1px solid var(--color-border-divider-default, #e9ebed);
   }
 `;
 var CsAppLayoutToolbarInternal = class extends CsAppLayoutInternal {
@@ -31217,7 +31303,7 @@ var CsAppLayoutToolbarInternal = class extends CsAppLayoutInternal {
               <cs-icon name="menu"></cs-icon>
             </button>
             <div class="toolbar__separator"></div>
-          ` : nothing48}
+          ` : nothing49}
 
           <div class="toolbar__breadcrumbs">
             <slot name="breadcrumbs"></slot>
@@ -31234,10 +31320,10 @@ var CsAppLayoutToolbarInternal = class extends CsAppLayoutInternal {
                 @click=${() => this._handleToggleDrawer(drawer.id)}
               >
                 <cs-icon name="${drawer.trigger?.iconName ?? "status-info"}"></cs-icon>
-                ${drawer.badge ? html83`<span class="toolbar__badge"></span>` : nothing48}
+                ${drawer.badge ? html83`<span class="toolbar__badge"></span>` : nothing49}
               </button>
             `)}
-          ` : nothing48}
+          ` : nothing49}
 
           ${!this.toolsHide ? html83`
             <div class="toolbar__separator"></div>
@@ -31250,7 +31336,7 @@ var CsAppLayoutToolbarInternal = class extends CsAppLayoutInternal {
             >
               <cs-icon name="status-info"></cs-icon>
             </button>
-          ` : nothing48}
+          ` : nothing49}
         </div>
 
         <div class="layout">
@@ -31263,7 +31349,7 @@ var CsAppLayoutToolbarInternal = class extends CsAppLayoutInternal {
             >
               <slot name="navigation"></slot>
             </div>
-          ` : nothing48}
+          ` : nothing49}
 
           <div
             class=${classMap67(layoutMainClasses)}
@@ -31290,7 +31376,7 @@ var CsAppLayoutToolbarInternal = class extends CsAppLayoutInternal {
             >
               <slot name="tools"></slot>
             </div>
-          ` : nothing48}
+          ` : nothing49}
 
           ${activeDrawer ? html83`
             <div
@@ -31301,7 +31387,7 @@ var CsAppLayoutToolbarInternal = class extends CsAppLayoutInternal {
             >
               <slot name="drawer-${activeDrawer.id}"></slot>
             </div>
-          ` : nothing48}
+          ` : nothing49}
         </div>
 
         <slot name="drawers" style="display:none"></slot>