@cumulus-ui/components 0.5.9 → 0.5.11

package/dist/index.js

@@ -6587,8 +6587,8 @@ var containRe = /paint|layout|strict|content/;
 var isNotNone = (value) => !!value && value !== "none";
 var isWebKitValue;
 function isContainingBlock(elementOrCss) {
-  const css182 = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
-  return isNotNone(css182.transform) || isNotNone(css182.translate) || isNotNone(css182.scale) || isNotNone(css182.rotate) || isNotNone(css182.perspective) || !isWebKit() && (isNotNone(css182.backdropFilter) || isNotNone(css182.filter)) || willChangeRe.test(css182.willChange || "") || containRe.test(css182.contain || "");
+  const css183 = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
+  return isNotNone(css183.transform) || isNotNone(css183.translate) || isNotNone(css183.scale) || isNotNone(css183.rotate) || isNotNone(css183.perspective) || !isWebKit() && (isNotNone(css183.backdropFilter) || isNotNone(css183.filter)) || willChangeRe.test(css183.willChange || "") || containRe.test(css183.contain || "");
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -6673,9 +6673,9 @@ function getFrameElement(win) {
 
 // node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
 function getCssDimensions(element) {
-  const css182 = getComputedStyle2(element);
-  let width = parseFloat(css182.width) || 0;
-  let height = parseFloat(css182.height) || 0;
+  const css183 = getComputedStyle2(element);
+  let width = parseFloat(css183.width) || 0;
+  let height = parseFloat(css183.height) || 0;
   const hasOffset = isHTMLElement(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
@@ -6769,9 +6769,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css182 = getComputedStyle2(currentIFrame);
-      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css182.paddingLeft)) * iframeScale.x;
-      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css182.paddingTop)) * iframeScale.y;
+      const css183 = getComputedStyle2(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css183.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css183.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
@@ -6848,15 +6848,15 @@ function getClientRects(element) {
   return Array.from(element.getClientRects());
 }
 function getDocumentRect(element) {
-  const html83 = getDocumentElement(element);
+  const html84 = getDocumentElement(element);
   const scroll = getNodeScroll(element);
   const body = element.ownerDocument.body;
-  const width = max(html83.scrollWidth, html83.clientWidth, body.scrollWidth, body.clientWidth);
-  const height = max(html83.scrollHeight, html83.clientHeight, body.scrollHeight, body.clientHeight);
+  const width = max(html84.scrollWidth, html84.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html84.scrollHeight, html84.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
   if (getComputedStyle2(body).direction === "rtl") {
-    x += max(html83.clientWidth, body.clientWidth) - width;
+    x += max(html84.clientWidth, body.clientWidth) - width;
   }
   return {
     width,
@@ -6868,10 +6868,10 @@ function getDocumentRect(element) {
 var SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
-  const html83 = getDocumentElement(element);
+  const html84 = getDocumentElement(element);
   const visualViewport = win.visualViewport;
-  let width = html83.clientWidth;
-  let height = html83.clientHeight;
+  let width = html84.clientWidth;
+  let height = html84.clientHeight;
   let x = 0;
   let y = 0;
   if (visualViewport) {
@@ -6883,13 +6883,13 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
-  const windowScrollbarX = getWindowScrollBarX(html83);
+  const windowScrollbarX = getWindowScrollBarX(html84);
   if (windowScrollbarX <= 0) {
-    const doc = html83.ownerDocument;
+    const doc = html84.ownerDocument;
     const body = doc.body;
     const bodyStyles = getComputedStyle(body);
     const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
-    const clippingStableScrollbarWidth = Math.abs(html83.clientWidth - body.clientWidth - bodyMarginInline);
+    const clippingStableScrollbarWidth = Math.abs(html84.clientWidth - body.clientWidth - bodyMarginInline);
     if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
       width -= clippingStableScrollbarWidth;
     }
@@ -9515,6 +9515,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 +9527,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 +9564,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 +10170,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 +10183,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 +10269,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 +12204,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 +12617,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 +12658,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 +12705,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 +12990,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 +13044,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 +13057,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 +13405,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 +13874,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 +13889,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 +13928,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 +14282,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 +14365,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 +14414,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 +14938,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 +14947,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 +14981,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 +15529,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 +16076,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 +16113,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 +16153,7 @@ var CsSelectInternal = class extends Base6 {
           <div class="dropdown" @click=${(e) => e.stopPropagation()}>
             ${this._renderDropdownContent()}
           </div>
-        ` : nothing19}
+        ` : nothing20}
       </div>
     `;
   }
@@ -16159,7 +16210,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 +16700,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 +16735,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 +16792,7 @@ var CsMultiselectInternal = class extends Base7 {
           <div class="dropdown" @click=${(e) => e.stopPropagation()}>
             ${this._renderDropdownContent()}
           </div>
-        ` : nothing20}
+        ` : nothing21}
         ${this._renderTokens()}
       </div>
     `;
@@ -16802,7 +16853,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 +17284,7 @@ var CsAutosuggestInternal = class extends Base8 {
             >
               ${filtered.map((opt, i) => this._renderOption(opt, i))}
             </div>
-          ` : nothing21}
+          ` : nothing22}
         </div>
       </div>
     `;
@@ -17633,7 +17684,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 +17947,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 +17978,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 +17989,7 @@ var CsCardsInternal = class extends CsBaseElement {
                   @change=${() => this._onSelectionChange(item)}
                 ></cs-checkbox>
               </div>
-            ` : nothing22}
+            ` : nothing23}
           </div>
           ${this._renderCardSections(item)}
         </cs-container>
@@ -17968,7 +18019,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 +18081,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 +18330,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 +18349,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 +18357,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 +18370,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 +18383,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 +18437,7 @@ var CsCollectionPreferencesInternal = class extends CsBaseElement {
               <cs-button variant="primary" @click=${this._confirm}>${this.confirmLabel}</cs-button>
             </div>
           </div>
-        ` : nothing23}
+        ` : nothing24}
       </div>
     `;
   }
@@ -18434,7 +18485,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 +18738,7 @@ var CsProgressBarInternal = class extends CsBaseElement {
                   @click=${this._onResultButtonClick}
                 >${this.resultButtonText}</button>
               </span>
-            ` : nothing24}
+            ` : nothing25}
           </div>
         `}
 
@@ -18726,7 +18777,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 +18933,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 +18952,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 +19007,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 +19103,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 +19112,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 +19168,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 +19437,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 +19502,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 +19518,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 +19558,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 +19571,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 +19919,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 +19939,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 +19988,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 +20040,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 +20061,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 +20069,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 +20090,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 +20136,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 +20153,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 +20190,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 +20241,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 +20254,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 +20338,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 +20780,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 +20978,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 +21008,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 +21020,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 +21085,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 +21581,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 +21785,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 +22024,7 @@ var CsDatePickerInternal = class extends Base10 {
                     ></cs-calendar>
                   </div>
                 </div>
-              ` : nothing32}
+              ` : nothing33}
         </div>
       </div>
     `;
@@ -22014,7 +22091,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 +22704,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 +22792,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 +22852,7 @@ var CsDateRangePickerInternal = class extends Base11 {
             </div>
             ${this._renderFooter()}
           </div>
-        ` : nothing33}
+        ` : nothing34}
       </div>
     `;
   }
@@ -22856,7 +22933,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 +23061,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 +23208,7 @@ var CsInputInternal = class extends Base12 {
                 <cs-icon name="close" size="small"></cs-icon>
               </button>
             </span>
-          ` : nothing34}
+          ` : nothing35}
         </div>
       </div>
     `;
@@ -23246,7 +23323,7 @@ var CsAttributeEditorInternal = class extends CsBaseElement {
                   @click=${this._handleRemoveClick(itemIndex)}
                 >${this.removeButtonText}</cs-button>
               </div>
-            ` : nothing35}
+            ` : nothing36}
       </div>
     `;
   }
@@ -23256,9 +23333,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 +23378,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 +23581,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 +23641,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 +24018,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 +24049,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 +24063,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 +24084,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 +24959,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 +25360,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 +25373,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 +25397,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 +25412,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 +25430,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 +25476,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 +25792,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 +25808,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 +25826,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 +25858,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 +25889,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 +25911,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 +26523,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 +26944,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 +26977,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 +27342,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 +27433,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 +27596,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 +27712,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 +27733,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 +27745,7 @@ var CsHotspotInternal = class extends CsBaseElement {
           `}
         </div>
       </div>
-    ` : nothing42;
+    ` : nothing43;
     return html76`
       <div class="wrapper">
         <div class="elementWrapper">
@@ -27702,7 +27779,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 +27880,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 +27901,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 +27916,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 +27978,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 +27987,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 +28032,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 +29575,7 @@ var CsAppLayoutInternal = class extends CsBaseElement {
             >
               <slot name="navigation"></slot>
             </div>
-          ` : nothing44}
+          ` : nothing45}
 
           <div
             class=${classMap63(layoutMainClasses)}
@@ -29528,7 +29605,7 @@ var CsAppLayoutInternal = class extends CsBaseElement {
             >
               <slot name="tools"></slot>
             </div>
-          ` : nothing44}
+          ` : nothing45}
         </div>
 
         ${!this.navigationHide && !this.navigationOpen ? html78`
@@ -29540,7 +29617,7 @@ var CsAppLayoutInternal = class extends CsBaseElement {
           >
             <cs-icon name="menu"></cs-icon>
           </button>
-        ` : nothing44}
+        ` : nothing45}
 
         ${!this.navigationHide && this.navigationOpen ? html78`
           <button
@@ -29551,7 +29628,7 @@ var CsAppLayoutInternal = class extends CsBaseElement {
           >
             <cs-icon name="close"></cs-icon>
           </button>
-        ` : nothing44}
+        ` : nothing45}
 
         ${!this.toolsHide && !this.toolsOpen ? html78`
           <button
@@ -29562,7 +29639,7 @@ var CsAppLayoutInternal = class extends CsBaseElement {
           >
             <cs-icon name="status-info"></cs-icon>
           </button>
-        ` : nothing44}
+        ` : nothing45}
 
         ${!this.toolsHide && this.toolsOpen ? html78`
           <button
@@ -29573,7 +29650,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 +29700,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 +29989,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 +30038,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 +30053,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 +30095,7 @@ var CsFileTokenGroupInternal = class extends CsBaseElement {
             >
               ${this._expanded ? showFewerLabel : showMoreLabel}
             </button>
-          ` : nothing45}
+          ` : nothing46}
       </div>
     `;
   }
@@ -30275,6 +30352,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 +30373,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 +30417,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 +30427,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 +30472,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 +30652,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 +30664,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 +30699,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 +30772,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 +31032,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>
@@ -31071,11 +31156,264 @@ __decorateClass([
 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 nothing49 } from "lit";
+import { property as property82 } from "lit/decorators.js";
+import { classMap as classMap67 } from "lit/directives/class-map.js";
+var toolbarStyles = css182`
+  .toolbar {
+    display: flex;
+    align-items: center;
+    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);
+    box-sizing: border-box;
+  }
+
+  .toolbar__nav-trigger,
+  .toolbar__tools-trigger,
+  .toolbar__drawer-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--color-text-interactive-default-waj0dj, #414d5c);
+    cursor: pointer;
+    position: relative;
+  }
+
+  .toolbar__nav-trigger:hover,
+  .toolbar__tools-trigger:hover,
+  .toolbar__drawer-trigger:hover {
+    background: var(--color-background-button-normal-hover-7jklbd, #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-offset: 2px;
+  }
+
+  .toolbar__drawer-trigger--active {
+    background: var(--color-background-button-normal-active-clrtfe, #e9ebed);
+    color: var(--color-text-interactive-active-vol84d, #0972d3);
+  }
+
+  .toolbar__breadcrumbs {
+    flex: 1;
+    min-width: 0;
+    padding: 0 8px;
+  }
+
+  .toolbar__separator {
+    width: 1px;
+    height: 24px;
+    background: var(--color-border-divider-default-cx07f2, #e9ebed);
+    margin: 0 4px;
+    flex-shrink: 0;
+  }
+
+  .toolbar__badge {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-background-notification-badge-3847ch, #d91515);
+  }
+
+  .toolbar__drawer-panel {
+    border-left: 1px solid var(--color-border-divider-default-cx07f2, #e9ebed);
+  }
+`;
+var CsAppLayoutToolbarInternal = class extends CsAppLayoutInternal {
+  constructor() {
+    super(...arguments);
+    this.navigationTriggerHide = false;
+    this.activeDrawerId = null;
+    this.toolbarDrawers = [];
+  }
+  static {
+    this.styles = [
+      ...CsAppLayoutInternal.styles,
+      toolbarStyles
+    ];
+  }
+  _handleToggleDrawer(id) {
+    const newId = this.activeDrawerId === id ? null : id;
+    this.activeDrawerId = newId;
+    fireNonCancelableEvent(this, "drawerChange", {
+      activeDrawerId: newId
+    });
+  }
+  _handleNavToggle(open) {
+    this.navigationOpen = open;
+    fireNonCancelableEvent(this, "navigationChange", { open });
+  }
+  _handleToolsToggle(open) {
+    this.toolsOpen = open;
+    fireNonCancelableEvent(this, "toolsChange", { open });
+  }
+  focusNavigation() {
+    const navTrigger = this.shadowRoot?.querySelector(".toolbar__nav-trigger");
+    navTrigger?.focus();
+  }
+  render() {
+    const effectiveNavWidth = !this.navigationHide && this.navigationOpen ? this.navigationWidth : 0;
+    const activeDrawer = this.toolbarDrawers.find((d) => d.id === this.activeDrawerId);
+    const activeDrawerWidth = activeDrawer?.defaultSize ?? 290;
+    const effectiveToolsWidth = !this.toolsHide && this.toolsOpen ? this.toolsWidth : 0;
+    const effectiveRightWidth = effectiveToolsWidth || (activeDrawer ? activeDrawerWidth : 0);
+    const layoutMainClasses = {
+      "layout-main": true,
+      "layout-main-scrollable": true
+    };
+    const contentWrapperClasses = {
+      "content-wrapper": true,
+      "app-layout-content-wrapper--content-wrapper": !this.disableContentPaddings
+    };
+    const navigationClasses = {
+      "app-layout-drawer--drawer": true
+    };
+    const toolsClasses = {
+      "app-layout-drawer--drawer": true
+    };
+    return html83`
+      <div class="root">
+        <div class="toolbar" role="toolbar" aria-label="Application toolbar">
+          ${!this.navigationHide && !this.navigationTriggerHide ? html83`
+            <button
+              type="button"
+              class="toolbar__nav-trigger"
+              aria-label="${this.navigationOpen ? "Close navigation" : "Open navigation"}"
+              aria-expanded="${this.navigationOpen}"
+              @click=${() => this._handleNavToggle(!this.navigationOpen)}
+            >
+              <cs-icon name="menu"></cs-icon>
+            </button>
+            <div class="toolbar__separator"></div>
+          ` : nothing49}
+
+          <div class="toolbar__breadcrumbs">
+            <slot name="breadcrumbs"></slot>
+          </div>
+
+          ${this.toolbarDrawers.length > 0 ? html83`
+            <div class="toolbar__separator"></div>
+            ${this.toolbarDrawers.map((drawer) => html83`
+              <button
+                type="button"
+                class="toolbar__drawer-trigger ${this.activeDrawerId === drawer.id ? "toolbar__drawer-trigger--active" : ""}"
+                aria-label="${drawer.ariaLabels?.triggerButton ?? drawer.ariaLabels?.drawerName ?? drawer.id}"
+                aria-expanded="${this.activeDrawerId === drawer.id}"
+                @click=${() => this._handleToggleDrawer(drawer.id)}
+              >
+                <cs-icon name="${drawer.trigger?.iconName ?? "status-info"}"></cs-icon>
+                ${drawer.badge ? html83`<span class="toolbar__badge"></span>` : nothing49}
+              </button>
+            `)}
+          ` : nothing49}
+
+          ${!this.toolsHide ? html83`
+            <div class="toolbar__separator"></div>
+            <button
+              type="button"
+              class="toolbar__tools-trigger"
+              aria-label="${this.toolsOpen ? "Close tools" : "Open tools"}"
+              aria-expanded="${this.toolsOpen}"
+              @click=${() => this._handleToolsToggle(!this.toolsOpen)}
+            >
+              <cs-icon name="status-info"></cs-icon>
+            </button>
+          ` : nothing49}
+        </div>
+
+        <div class="layout">
+          ${!this.navigationHide ? html83`
+            <div
+              class=${classMap67(navigationClasses)}
+              style="width: ${this.navigationWidth}px; ${!this.navigationOpen ? "display: none" : ""}"
+              role="navigation"
+              aria-label="Navigation drawer"
+            >
+              <slot name="navigation"></slot>
+            </div>
+          ` : nothing49}
+
+          <div
+            class=${classMap67(layoutMainClasses)}
+            style="margin-left: ${effectiveNavWidth}px; margin-right: ${effectiveRightWidth}px"
+          >
+            <div class="app-layout-notifications--notifications">
+              <slot name="notifications"></slot>
+            </div>
+            <main
+              class=${classMap67(contentWrapperClasses)}
+              style="${this.maxContentWidth ? `max-width: ${this.maxContentWidth}px` : ""};
+                     ${this.minContentWidth ? `min-width: ${this.minContentWidth}px` : ""}"
+            >
+              <slot></slot>
+            </main>
+          </div>
+
+          ${!this.toolsHide && this.toolsOpen ? html83`
+            <div
+              class=${classMap67(toolsClasses)}
+              style="width: ${this.toolsWidth}px"
+              role="complementary"
+              aria-label="Tools drawer"
+            >
+              <slot name="tools"></slot>
+            </div>
+          ` : nothing49}
+
+          ${activeDrawer ? html83`
+            <div
+              class="app-layout-drawer--drawer toolbar__drawer-panel"
+              style="width: ${activeDrawerWidth}px"
+              role="complementary"
+              aria-label="${activeDrawer.ariaLabels?.drawerName ?? activeDrawer.id}"
+            >
+              <slot name="drawer-${activeDrawer.id}"></slot>
+            </div>
+          ` : nothing49}
+        </div>
+
+        <slot name="drawers" style="display:none"></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property82({ type: Boolean, reflect: true })
+], CsAppLayoutToolbarInternal.prototype, "navigationTriggerHide", 2);
+__decorateClass([
+  property82({ type: String, reflect: true })
+], CsAppLayoutToolbarInternal.prototype, "activeDrawerId", 2);
+__decorateClass([
+  property82({ type: Array })
+], CsAppLayoutToolbarInternal.prototype, "toolbarDrawers", 2);
+
+// src/app-layout-toolbar/index.ts
+var CsAppLayoutToolbar = class extends CsAppLayoutToolbarInternal {
+};
+customElements.define("cs-app-layout-toolbar", CsAppLayoutToolbar);
 export {
   CsAlert,
   CsAnchorNavigation,
   CsAnnotationContext,
   CsAppLayout,
+  CsAppLayoutToolbar,
   CsAttributeEditor,
   CsAutosuggest,
   CsBadge,