@cumulus-ui/components 0.3.0 → 0.3.1

package/dist/index.js

@@ -64,8 +64,8 @@ function FormAssociatedMixin(superClass) {
       this._defaultValue = this.value;
     }
     // ── Public API (thin wrappers around ElementInternals) ────────────
-    setFormValue(value, state15) {
-      this._internals.setFormValue(value, state15);
+    setFormValue(value, state18) {
+      this._internals.setFormValue(value, state18);
     }
     setValidity(flags, message, anchor) {
       if (flags && message) {
@@ -99,9 +99,9 @@ function FormAssociatedMixin(superClass) {
      * @param state  - Previously saved value or `FormData` entry.
      * @param _mode  - `'restore'` (bfcache) or `'autocomplete'`.
      */
-    formStateRestoreCallback(state15, _mode) {
-      if (typeof state15 === "string") {
-        this.value = state15;
+    formStateRestoreCallback(state18, _mode) {
+      if (typeof state18 === "string") {
+        this.value = state18;
       }
     }
   }
@@ -5844,7 +5844,7 @@ var CsAlertInternal = class extends CsBaseElement {
     const alertClasses = {
       "alert": true,
       [`type-${this.type}`]: true,
-      "icon-size-medium": true
+      "icon-size-normal": true
     };
     return html18`
       <div class=${classMap16(rootClasses)}>
@@ -5854,13 +5854,12 @@ var CsAlertInternal = class extends CsBaseElement {
               <div class="text icon">
                 <cs-icon
                   name=${iconName}
-                  size="medium"
                   aria-label=${ifDefined9(this.statusIconAriaLabel || void 0)}
                 ></cs-icon>
               </div>
               <div class="text message">
                 ${this.header ? html18`<div class="header">${this.header}</div>` : nothing5}
-                <div>
+                <div class="content">
                   <slot></slot>
                 </div>
               </div>
@@ -6097,7 +6096,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   }
   return coords;
 }
-async function detectOverflow(state15, options) {
+async function detectOverflow(state18, options) {
   var _await$platform$isEle;
   if (options === void 0) {
     options = {};
@@ -6109,14 +6108,14 @@ async function detectOverflow(state15, options) {
     rects,
     elements,
     strategy
-  } = state15;
+  } = state18;
   const {
     boundary = "clippingAncestors",
     rootBoundary = "viewport",
     elementContext = "floating",
     altBoundary = false,
     padding = 0
-  } = evaluate(options, state15);
+  } = evaluate(options, state18);
   const paddingObject = getPaddingObject(padding);
   const altContext = elementContext === "floating" ? "reference" : "floating";
   const element = elements[altBoundary ? altContext : elementContext];
@@ -6248,7 +6247,7 @@ var flip = function(options) {
   return {
     name: "flip",
     options,
-    async fn(state15) {
+    async fn(state18) {
       var _middlewareData$arrow, _middlewareData$flip;
       const {
         placement,
@@ -6257,7 +6256,7 @@ var flip = function(options) {
         initialPlacement,
         platform: platform2,
         elements
-      } = state15;
+      } = state18;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true,
@@ -6266,7 +6265,7 @@ var flip = function(options) {
         fallbackAxisSideDirection = "none",
         flipAlignment = true,
         ...detectOverflowOptions
-      } = evaluate(options, state15);
+      } = evaluate(options, state18);
       if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -6280,7 +6279,7 @@ var flip = function(options) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements2 = [initialPlacement, ...fallbackPlacements];
-      const overflow = await platform2.detectOverflow(state15, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state18, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -6351,19 +6350,19 @@ var flip = function(options) {
   };
 };
 var originSides = /* @__PURE__ */ new Set(["left", "top"]);
-async function convertValueToCoords(state15, options) {
+async function convertValueToCoords(state18, options) {
   const {
     placement,
     platform: platform2,
     elements
-  } = state15;
+  } = state18;
   const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === "y";
   const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = evaluate(options, state15);
+  const rawValue = evaluate(options, state18);
   let {
     mainAxis,
     crossAxis,
@@ -6395,15 +6394,15 @@ var offset = function(options) {
   return {
     name: "offset",
     options,
-    async fn(state15) {
+    async fn(state18) {
       var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
         y,
         placement,
         middlewareData
-      } = state15;
-      const diffCoords = await convertValueToCoords(state15, options);
+      } = state18;
+      const diffCoords = await convertValueToCoords(state18, options);
       if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -6425,13 +6424,13 @@ var shift = function(options) {
   return {
     name: "shift",
     options,
-    async fn(state15) {
+    async fn(state18) {
       const {
         x,
         y,
         placement,
         platform: platform2
-      } = state15;
+      } = state18;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = false,
@@ -6448,12 +6447,12 @@ var shift = function(options) {
           }
         },
         ...detectOverflowOptions
-      } = evaluate(options, state15);
+      } = evaluate(options, state18);
       const coords = {
         x,
         y
       };
-      const overflow = await platform2.detectOverflow(state15, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state18, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -6473,7 +6472,7 @@ var shift = function(options) {
         crossAxisCoord = clamp(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
-        ...state15,
+        ...state18,
         [mainAxis]: mainAxisCoord,
         [crossAxis]: crossAxisCoord
       });
@@ -6564,8 +6563,8 @@ var containRe = /paint|layout|strict|content/;
 var isNotNone = (value) => !!value && value !== "none";
 var isWebKitValue;
 function isContainingBlock(elementOrCss) {
-  const css105 = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
-  return isNotNone(css105.transform) || isNotNone(css105.translate) || isNotNone(css105.scale) || isNotNone(css105.rotate) || isNotNone(css105.perspective) || !isWebKit() && (isNotNone(css105.backdropFilter) || isNotNone(css105.filter)) || willChangeRe.test(css105.willChange || "") || containRe.test(css105.contain || "");
+  const css119 = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
+  return isNotNone(css119.transform) || isNotNone(css119.translate) || isNotNone(css119.scale) || isNotNone(css119.rotate) || isNotNone(css119.perspective) || !isWebKit() && (isNotNone(css119.backdropFilter) || isNotNone(css119.filter)) || willChangeRe.test(css119.willChange || "") || containRe.test(css119.contain || "");
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -6650,9 +6649,9 @@ function getFrameElement(win) {
 
 // node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
 function getCssDimensions(element) {
-  const css105 = getComputedStyle2(element);
-  let width = parseFloat(css105.width) || 0;
-  let height = parseFloat(css105.height) || 0;
+  const css119 = getComputedStyle2(element);
+  let width = parseFloat(css119.width) || 0;
+  let height = parseFloat(css119.height) || 0;
   const hasOffset = isHTMLElement(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
@@ -6746,9 +6745,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css105 = getComputedStyle2(currentIFrame);
-      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css105.paddingLeft)) * iframeScale.x;
-      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css105.paddingTop)) * iframeScale.y;
+      const css119 = getComputedStyle2(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css119.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css119.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
@@ -6825,15 +6824,15 @@ function getClientRects(element) {
   return Array.from(element.getClientRects());
 }
 function getDocumentRect(element) {
-  const html48 = getDocumentElement(element);
+  const html55 = getDocumentElement(element);
   const scroll = getNodeScroll(element);
   const body = element.ownerDocument.body;
-  const width = max(html48.scrollWidth, html48.clientWidth, body.scrollWidth, body.clientWidth);
-  const height = max(html48.scrollHeight, html48.clientHeight, body.scrollHeight, body.clientHeight);
+  const width = max(html55.scrollWidth, html55.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html55.scrollHeight, html55.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
   if (getComputedStyle2(body).direction === "rtl") {
-    x += max(html48.clientWidth, body.clientWidth) - width;
+    x += max(html55.clientWidth, body.clientWidth) - width;
   }
   return {
     width,
@@ -6845,10 +6844,10 @@ function getDocumentRect(element) {
 var SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
-  const html48 = getDocumentElement(element);
+  const html55 = getDocumentElement(element);
   const visualViewport = win.visualViewport;
-  let width = html48.clientWidth;
-  let height = html48.clientHeight;
+  let width = html55.clientWidth;
+  let height = html55.clientHeight;
   let x = 0;
   let y = 0;
   if (visualViewport) {
@@ -6860,13 +6859,13 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
-  const windowScrollbarX = getWindowScrollBarX(html48);
+  const windowScrollbarX = getWindowScrollBarX(html55);
   if (windowScrollbarX <= 0) {
-    const doc = html48.ownerDocument;
+    const doc = html55.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(html48.clientWidth - body.clientWidth - bodyMarginInline);
+    const clippingStableScrollbarWidth = Math.abs(html55.clientWidth - body.clientWidth - bodyMarginInline);
     if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
       width -= clippingStableScrollbarWidth;
     }
@@ -16426,7 +16425,7 @@ var CsMultiselectInternal = class extends Base7 {
           />
         </div>
       ` : nothing20}
-      <ul class="option-list" role="listbox" aria-label=${ifDefined24(this.ariaLabel || void 0)}>
+      <ul class="option-list" role="listbox" aria-multiselectable="true" aria-label=${ifDefined24(this.ariaLabel || void 0)}>
         ${items}
       </ul>
     `;
@@ -17376,6 +17375,2467 @@ __decorateClass([
 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 { property as property47, state as state15 } from "lit/decorators.js";
+import { classMap as classMap41 } from "lit/directives/class-map.js";
+
+// src/cards/styles.ts
+import { css as css105 } from "lit";
+var componentStyles46 = css105`
+.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+.header-variant-full-page.header-refresh {
+  padding-block-start: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  padding-block-end: calc(var(--space-container-header-bottom-2taq8v, 8px) + var(--space-table-header-tools-full-page-bottom-9m47g6, 4px));
+}
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  padding-block: 0;
+  padding-inline: 0;
+  list-style: none;
+  margin-block: 0;
+  margin-inline-start: calc(var(--space-grid-gutter-whc3jp, 20px) * -1);
+  margin-inline-end: 0;
+}
+.list.list-grid-1 > .card {
+  inline-size: 100%;
+}
+.list.list-grid-2 > .card {
+  inline-size: 50%;
+}
+.list.list-grid-3 > .card {
+  inline-size: 33.3333333333%;
+}
+.list.list-grid-4 > .card {
+  inline-size: 25%;
+}
+.list.list-grid-5 > .card {
+  inline-size: 20%;
+}
+.list.list-grid-6 > .card {
+  inline-size: 16.6666666667%;
+}
+.list.list-grid-7 > .card {
+  inline-size: 14.2857142857%;
+}
+.list.list-grid-8 > .card {
+  inline-size: 12.5%;
+}
+.list.list-grid-9 > .card {
+  inline-size: 11.1111111111%;
+}
+.list.list-grid-10 > .card {
+  inline-size: 10%;
+}
+.list.list-grid-11 > .card {
+  inline-size: 9.0909090909%;
+}
+.list.list-grid-12 > .card {
+  inline-size: 8.3333333333%;
+}
+.list.list-grid-13 > .card {
+  inline-size: 7.6923076923%;
+}
+.list.list-grid-14 > .card {
+  inline-size: 7.1428571429%;
+}
+.list.list-grid-15 > .card {
+  inline-size: 6.6666666667%;
+}
+.list.list-grid-16 > .card {
+  inline-size: 6.25%;
+}
+.list.list-grid-17 > .card {
+  inline-size: 5.8823529412%;
+}
+.list.list-grid-18 > .card {
+  inline-size: 5.5555555556%;
+}
+.list.list-grid-19 > .card {
+  inline-size: 5.2631578947%;
+}
+.list.list-grid-20 > .card {
+  inline-size: 5%;
+}
+
+.selection-control {
+  position: absolute;
+  box-sizing: border-box;
+  inline-size: calc(var(--size-control-adm93y, 16px) + 2 * var(--space-card-horizontal-default-pihe12, 20px));
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  padding-block: var(--space-card-vertical-default-e40tif, 16px);
+  padding-inline: var(--space-card-horizontal-default-pihe12, 20px);
+}
+
+.loading,
+.empty {
+  overflow: hidden;
+  text-align: center;
+  color: var(--color-text-empty-tlohug, #656871);
+  margin-block-end: var(--space-scaled-l-sej05l, 20px);
+}
+
+.has-header {
+  margin-block-start: var(--space-grid-gutter-whc3jp, 20px);
+}
+.has-header.refresh.header-variant-full-page {
+  margin-block-start: var(--space-scaled-s-8ozaad, 12px);
+}
+
+.card {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  box-sizing: border-box;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block-start: 0;
+  padding-block-end: var(--space-grid-gutter-whc3jp, 20px);
+  padding-inline-start: var(--space-grid-gutter-whc3jp, 20px);
+  padding-inline-end: 0;
+  list-style: none;
+}
+.card-header {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-m-170yiy, 18px);
+  line-height: var(--line-height-heading-m-uoaqdh, 22px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  font-weight: var(--font-weight-heading-m-zf82dr, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.card-header-inner-selectable {
+  inline-size: 90%;
+}
+.card-selected {
+  /* Used in test utils */
+}
+
+.section {
+  display: inline-block;
+  box-sizing: border-box;
+  padding-block-end: var(--space-scaled-xs-xwoogq, 8px);
+  padding-inline: 0;
+  vertical-align: top;
+}
+.section-header {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  font-weight: var(--font-display-label-weight-zavpeo, 700);
+  color: var(--color-text-label-28gfmc, #0f141a);
+}
+
+.section:not(:first-child) {
+  padding-block-start: var(--space-xs-ymlm0b, 8px);
+}
+
+.section:last-child {
+  padding-block-end: 0;
+}
+
+.footer-pagination {
+  display: flex;
+  justify-content: flex-end;
+}
+`;
+
+// src/cards/internal.ts
+var hostStyles47 = css106`:host { display: block; }`;
+var DEFAULT_CARDS_PER_ROW = [
+  { cards: 1 },
+  { minWidth: 768, cards: 2 },
+  { minWidth: 992, cards: 3 },
+  { minWidth: 1200, cards: 4 },
+  { minWidth: 1400, cards: 5 },
+  { minWidth: 1920, cards: 6 }
+];
+var CsCardsInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.cardDefinition = {};
+    this.selectedItems = [];
+    this.selectionType = "none";
+    this.loading = false;
+    this.loadingText = "";
+    this.variant = "container";
+    this._columns = 1;
+    this._hasHeader = false;
+    this._onHeaderSlotChange = (e) => {
+      const slot = e.target;
+      this._hasHeader = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles46, hostStyles47];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver(() => this._updateColumns());
+    this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+  }
+  _updateColumns() {
+    const width = this.clientWidth;
+    const layouts = this.cardsPerRow ?? DEFAULT_CARDS_PER_ROW;
+    let cols = 1;
+    for (const layout of layouts) {
+      if (!layout.minWidth || width >= layout.minWidth) {
+        cols = layout.cards;
+      }
+    }
+    this._columns = Math.min(Math.max(cols, 1), 20);
+  }
+  _getItemKey(item, index) {
+    if (!this.trackBy) return String(index);
+    if (typeof this.trackBy === "function") return this.trackBy(item);
+    return String(item[this.trackBy]);
+  }
+  _isSelected(item) {
+    if (!this.selectedItems.length) return false;
+    const key = this._getItemKey(item, -1);
+    return this.selectedItems.some((sel, i) => this._getItemKey(sel, i) === key);
+  }
+  _isDisabled(item) {
+    return this.isItemDisabled ? this.isItemDisabled(item) : false;
+  }
+  _onSelectionChange(item) {
+    if (this._isDisabled(item)) return;
+    let newSelection;
+    if (this.selectionType === "single") {
+      newSelection = [item];
+    } else {
+      if (this._isSelected(item)) {
+        const key = this._getItemKey(item, -1);
+        newSelection = this.selectedItems.filter(
+          (sel, i) => this._getItemKey(sel, i) !== key
+        );
+      } else {
+        newSelection = [...this.selectedItems, item];
+      }
+    }
+    const detail = {
+      selectedItems: newSelection
+    };
+    fireNonCancelableEvent(this, "selectionChange", detail);
+  }
+  _renderCardSections(item) {
+    const sections = this.cardDefinition.sections;
+    if (!sections?.length) return nothing22;
+    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}
+          </div>
+        `;
+    })}`;
+  }
+  _renderCard(item, index) {
+    const isSelectable = this.selectionType !== "none";
+    const isSelected = isSelectable && this._isSelected(item);
+    const isDisabled = isSelectable && this._isDisabled(item);
+    const headerContent = this.cardDefinition.header?.(item);
+    const cardClasses = {
+      "card": true,
+      "card-selected": isSelected
+    };
+    const cardHeaderClasses = {
+      "card-header": true,
+      "card-header-inner-selectable": isSelectable
+    };
+    const selectionLabel = this.ariaLabels?.itemSelectionLabel ? this.ariaLabels.itemSelectionLabel({ selectedItems: [...this.selectedItems] }, item) : void 0;
+    return html48`
+      <li class=${classMap41(cardClasses)} data-item-index=${index}>
+        <cs-container variant="default">
+          <div slot="header" style="position: relative;">
+            <div class=${classMap41(cardHeaderClasses)}>
+              ${headerContent ?? nothing22}
+            </div>
+            ${isSelectable ? html48`
+              <div class="selection-control">
+                <cs-checkbox
+                  .checked=${isSelected}
+                  ?disabled=${isDisabled}
+                  aria-label=${selectionLabel ?? `Select item ${index + 1}`}
+                  @change=${() => this._onSelectionChange(item)}
+                ></cs-checkbox>
+              </div>
+            ` : nothing22}
+          </div>
+          ${this._renderCardSections(item)}
+        </cs-container>
+      </li>
+    `;
+  }
+  render() {
+    const hasItems = this.items.length > 0;
+    const showLoading = this.loading;
+    const showEmpty = !showLoading && !hasItems;
+    const listClasses = {
+      "list": true,
+      [`list-grid-${this._columns}`]: true
+    };
+    const bodyClasses = {
+      "has-header": this._hasHeader
+    };
+    const groupLabel = this.ariaLabels?.selectionGroupLabel ?? "Items";
+    return html48`
+      <div class="root">
+        <div class="header">
+          <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
+        </div>
+        <slot name="filter"></slot>
+        <slot name="pagination"></slot>
+        <div class=${classMap41(bodyClasses)}>
+          ${showLoading ? html48`
+            <div class="loading" role="status">
+              <cs-spinner size="large"></cs-spinner>
+              ${this.loadingText ? html48`<span>${this.loadingText}</span>` : nothing22}
+            </div>
+          ` : showEmpty ? html48`
+            <div class="empty">
+              <slot name="empty"></slot>
+            </div>
+          ` : html48`
+            <ol class=${classMap41(listClasses)} aria-label=${groupLabel}>
+              ${this.items.map((item, i) => this._renderCard(item, i))}
+            </ol>
+          `}
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property47({ attribute: false })
+], CsCardsInternal.prototype, "items", 2);
+__decorateClass([
+  property47({ attribute: false })
+], CsCardsInternal.prototype, "cardDefinition", 2);
+__decorateClass([
+  property47({ attribute: false })
+], CsCardsInternal.prototype, "selectedItems", 2);
+__decorateClass([
+  property47({ type: String, reflect: true })
+], CsCardsInternal.prototype, "selectionType", 2);
+__decorateClass([
+  property47({ attribute: false })
+], CsCardsInternal.prototype, "trackBy", 2);
+__decorateClass([
+  property47({ type: Boolean, reflect: true })
+], CsCardsInternal.prototype, "loading", 2);
+__decorateClass([
+  property47({ type: String })
+], CsCardsInternal.prototype, "loadingText", 2);
+__decorateClass([
+  property47({ attribute: false })
+], CsCardsInternal.prototype, "cardsPerRow", 2);
+__decorateClass([
+  property47({ type: String, reflect: true })
+], CsCardsInternal.prototype, "variant", 2);
+__decorateClass([
+  property47({ attribute: false })
+], CsCardsInternal.prototype, "visibleSections", 2);
+__decorateClass([
+  property47({ attribute: false })
+], CsCardsInternal.prototype, "ariaLabels", 2);
+__decorateClass([
+  property47({ attribute: false })
+], CsCardsInternal.prototype, "isItemDisabled", 2);
+__decorateClass([
+  state15()
+], CsCardsInternal.prototype, "_columns", 2);
+
+// src/cards/index.ts
+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 { property as property48, state as state16 } from "lit/decorators.js";
+
+// src/collection-preferences/styles.ts
+import { css as css107 } from "lit";
+var componentStyles47 = css107`
+.visible-content,
+.visible-content-toggle,
+.visible-content-groups,
+.visible-content-group {
+
+.content-display-option-content {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  display: flex;
+  align-items: flex-start;
+  padding-block: var(--space-scaled-xs-xwoogq, 8px);
+  padding-inline-end: var(--space-xs-ymlm0b, 8px);
+  border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
+}
+
+.content-display-option-label {
+  flex-grow: 1;
+  min-inline-size: 0;
+  word-break: break-word;
+  padding-inline-end: var(--space-l-2ud1p3, 20px);
+}
+
+.content-display-title {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  font-weight: var(--font-display-label-weight-zavpeo, 700);
+  color: var(--color-text-form-label-6sbm75, #0f141a);
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.content-display-description {
+  color: var(--color-text-form-secondary-1nm780, #656871);
+  font-size: var(--font-size-body-s-smc8cv, 12px);
+  line-height: var(--line-height-body-s-nu5hx1, 16px);
+  letter-spacing: var(--letter-spacing-body-s-gq78ok, 0.005em);
+  margin-block-start: var(--space-scaled-xxxs-oo06c7, 2px);
+}
+
+.content-display-option-list {
+  position: relative;
+  list-style: none;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.second-column-small {
+  padding-block-start: calc(2 * var(--space-scaled-l-sej05l, 20px));
+}
+`;
+
+// src/collection-preferences/internal.ts
+var hostStyles48 = css108`:host { display: inline-block; }`;
+var panelStyles = css108`
+  .panel {
+    position: absolute;
+    z-index: 1000;
+    inset-inline-end: 0;
+    inset-block-start: 100%;
+    margin-block-start: 4px;
+    background: var(--color-background-container-content-ylugqs, #ffffff);
+    border: 1px solid var(--color-border-container-top-tdnwla, #e9ebed);
+    border-radius: var(--border-radius-container-5jaqo3, 16px);
+    box-shadow: var(--shadow-panel-fheubh, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
+    padding: var(--space-scaled-l-sej05l, 20px);
+    min-inline-size: 280px;
+    max-inline-size: 400px;
+  }
+  .panel-title {
+    font-size: var(--font-size-heading-m-170yiy, 18px);
+    font-weight: var(--font-weight-heading-m-zf82dr, 700);
+    line-height: var(--line-height-heading-m-uoaqdh, 22px);
+    margin-block-end: var(--space-scaled-l-sej05l, 20px);
+  }
+  .panel-section {
+    margin-block-end: var(--space-scaled-s-8ozaad, 12px);
+  }
+  .panel-section-title {
+    font-size: var(--font-size-body-m-a7nh2n, 14px);
+    font-weight: var(--font-display-label-weight-zavpeo, 700);
+    margin-block-end: var(--space-scaled-xxs-v1m6s9, 4px);
+  }
+  .panel-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-xs-ymlm0b, 8px);
+    margin-block-start: var(--space-scaled-l-sej05l, 20px);
+    padding-block-start: var(--space-scaled-s-8ozaad, 12px);
+    border-block-start: 1px solid var(--color-border-divider-default-djbamr, #e9ebed);
+  }
+  .page-size-options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-scaled-xxs-v1m6s9, 4px);
+  }
+  .page-size-option {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs-ymlm0b, 8px);
+    cursor: pointer;
+  }
+  .page-size-option input {
+    margin: 0;
+  }
+  .visible-content-option {
+    padding-block: var(--space-scaled-xxs-v1m6s9, 4px);
+  }
+  .visible-content-group-label {
+    font-weight: var(--font-display-label-weight-zavpeo, 700);
+    font-size: var(--font-size-body-s-smc8cv, 12px);
+    color: var(--color-text-form-secondary-1nm780, #656871);
+    padding-block-end: var(--space-scaled-xxs-v1m6s9, 4px);
+  }
+`;
+var CsCollectionPreferencesInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.title = "Preferences";
+    this.confirmLabel = "Confirm";
+    this.cancelLabel = "Cancel";
+    this.disabled = false;
+    this._open = false;
+    this._draft = {};
+    this._cleanupOutsideClick = null;
+    this._onKeyDown = (e) => {
+      if (e.key === "Escape" && this._open) {
+        e.stopPropagation();
+        this._cancel();
+      }
+    };
+    this._onTriggerClick = (e) => {
+      if (e instanceof CustomEvent) return;
+      if (this.disabled) return;
+      this._draft = { ...this.preferences };
+      this._open = !this._open;
+      if (this._open) {
+        this._addOutsideClickListener();
+      }
+    };
+    this._confirm = () => {
+      fireNonCancelableEvent(this, "confirm", { ...this._draft });
+      this._open = false;
+      this._removeOutsideClickListener();
+    };
+    this._cancel = () => {
+      fireNonCancelableEvent(this, "cancel", {});
+      this._open = false;
+      this._removeOutsideClickListener();
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles47, panelStyles, hostStyles48];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._onKeyDown);
+    this._removeOutsideClickListener();
+  }
+  _addOutsideClickListener() {
+    this._removeOutsideClickListener();
+    const handler = (e) => {
+      const path = e.composedPath();
+      if (!path.includes(this)) {
+        this._cancel();
+      }
+    };
+    requestAnimationFrame(() => {
+      document.addEventListener("click", handler, true);
+      this._cleanupOutsideClick = () => {
+        document.removeEventListener("click", handler, true);
+      };
+    });
+  }
+  _removeOutsideClickListener() {
+    this._cleanupOutsideClick?.();
+    this._cleanupOutsideClick = null;
+  }
+  _onPageSizeChange(value) {
+    this._draft = { ...this._draft, pageSize: value };
+  }
+  _onWrapLinesChange(checked) {
+    this._draft = { ...this._draft, wrapLines: checked };
+  }
+  _onStripedRowsChange(checked) {
+    this._draft = { ...this._draft, stripedRows: checked };
+  }
+  _onContentDensityChange(checked) {
+    this._draft = { ...this._draft, contentDensity: checked ? "compact" : "comfortable" };
+  }
+  _onVisibleContentChange(id, checked) {
+    const current = [...this._draft.visibleContent ?? []];
+    if (checked && !current.includes(id)) {
+      current.push(id);
+    } else if (!checked) {
+      const idx = current.indexOf(id);
+      if (idx >= 0) current.splice(idx, 1);
+    }
+    this._draft = { ...this._draft, visibleContent: current };
+  }
+  _renderPageSizePreference() {
+    if (!this.pageSizePreference) return nothing23;
+    const pref = this.pageSizePreference;
+    return html49`
+      <div class="panel-section">
+        ${pref.title ? html49`<div class="panel-section-title">${pref.title}</div>` : nothing23}
+        <div class="page-size-options" role="radiogroup" aria-label=${pref.title ?? "Page size"}>
+          ${pref.options.map((opt) => html49`
+            <label class="page-size-option">
+              <input type="radio" name="page-size"
+                .checked=${this._draft.pageSize === opt.value}
+                @change=${() => this._onPageSizeChange(opt.value)} />
+              ${opt.label ?? `${opt.value} items`}
+            </label>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+  _renderWrapLinesPreference() {
+    if (!this.wrapLinesPreference) return nothing23;
+    const pref = this.wrapLinesPreference;
+    return html49`
+      <div class="panel-section">
+        <cs-checkbox
+          .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}
+      </div>
+    `;
+  }
+  _renderStripedRowsPreference() {
+    if (!this.stripedRowsPreference) return nothing23;
+    const pref = this.stripedRowsPreference;
+    return html49`
+      <div class="panel-section">
+        <cs-checkbox
+          .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}
+      </div>
+    `;
+  }
+  _renderContentDensityPreference() {
+    if (!this.contentDensityPreference) return nothing23;
+    const pref = this.contentDensityPreference;
+    return html49`
+      <div class="panel-section">
+        <cs-checkbox
+          .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}
+      </div>
+    `;
+  }
+  _renderVisibleContentPreference() {
+    if (!this.visibleContentPreference) return nothing23;
+    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.options.map((group) => html49`
+          <div class="visible-content-group">
+            <div class="visible-content-group-label">${group.label}</div>
+            ${group.options.map((opt) => {
+      const isEditable = opt.editable !== false;
+      return html49`
+                <div class="visible-content-option">
+                  <cs-checkbox
+                    .checked=${visibleIds.includes(opt.id)}
+                    ?disabled=${!isEditable}
+                    @change=${(e) => this._onVisibleContentChange(opt.id, e.detail.checked)}
+                  >${opt.label}</cs-checkbox>
+                </div>
+              `;
+    })}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+  render() {
+    return html49`
+      <div class="root" style="position: relative; display: inline-block;">
+        <cs-button
+          variant="icon"
+          icon-name="settings"
+          aria-label=${this.title}
+          ?disabled=${this.disabled}
+          @click=${this._onTriggerClick}
+        ></cs-button>
+        ${this._open ? html49`
+          <div class="panel" role="dialog" aria-label=${this.title}>
+            <div class="panel-title">${this.title}</div>
+            ${this._renderPageSizePreference()}
+            ${this._renderWrapLinesPreference()}
+            ${this._renderStripedRowsPreference()}
+            ${this._renderContentDensityPreference()}
+            ${this._renderVisibleContentPreference()}
+            <div class="panel-footer">
+              <cs-button variant="link" @click=${this._cancel}>${this.cancelLabel}</cs-button>
+              <cs-button variant="primary" @click=${this._confirm}>${this.confirmLabel}</cs-button>
+            </div>
+          </div>
+        ` : nothing23}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property48({ type: String })
+], CsCollectionPreferencesInternal.prototype, "title", 2);
+__decorateClass([
+  property48({ type: String })
+], CsCollectionPreferencesInternal.prototype, "confirmLabel", 2);
+__decorateClass([
+  property48({ type: String })
+], CsCollectionPreferencesInternal.prototype, "cancelLabel", 2);
+__decorateClass([
+  property48({ type: Boolean, reflect: true })
+], CsCollectionPreferencesInternal.prototype, "disabled", 2);
+__decorateClass([
+  property48({ attribute: false })
+], CsCollectionPreferencesInternal.prototype, "preferences", 2);
+__decorateClass([
+  property48({ attribute: false })
+], CsCollectionPreferencesInternal.prototype, "pageSizePreference", 2);
+__decorateClass([
+  property48({ attribute: false })
+], CsCollectionPreferencesInternal.prototype, "wrapLinesPreference", 2);
+__decorateClass([
+  property48({ attribute: false })
+], CsCollectionPreferencesInternal.prototype, "stripedRowsPreference", 2);
+__decorateClass([
+  property48({ attribute: false })
+], CsCollectionPreferencesInternal.prototype, "contentDensityPreference", 2);
+__decorateClass([
+  property48({ attribute: false })
+], CsCollectionPreferencesInternal.prototype, "visibleContentPreference", 2);
+__decorateClass([
+  state16()
+], CsCollectionPreferencesInternal.prototype, "_open", 2);
+__decorateClass([
+  state16()
+], CsCollectionPreferencesInternal.prototype, "_draft", 2);
+
+// src/collection-preferences/index.ts
+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 { property as property49 } from "lit/decorators.js";
+import { classMap as classMap42 } from "lit/directives/class-map.js";
+
+// src/progress-bar/styles.ts
+import { css as css109 } from "lit";
+var componentStyles48 = css109`
+.progress::-webkit-progress-value {
+  -webkit-transition: width var(--motion-duration-moderate-c9utmg, 135ms) linear;
+  transition: width var(--motion-duration-moderate-c9utmg, 135ms) linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .progress::-webkit-progress-value {
+    animation: none;
+    -webkit-transition: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .progress::-webkit-progress-value, .awsui-mode-entering .progress::-webkit-progress-value {
+  animation: none;
+  -webkit-transition: none;
+  transition: none;
+}
+
+.result-state {
+  animation: awsui_awsui-motion-fade-in_11huc_1uqsz_1 var(--motion-duration-transition-show-paced-t8d1os, 180ms) var(--motion-easing-transition-show-paced-x2k7uh, ease-out);
+}
+@keyframes awsui_awsui-motion-fade-in_11huc_1uqsz_1 {
+  from {
+    opacity: 0.2;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .result-state {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .result-state, .awsui-mode-entering .result-state {
+  animation: none;
+  transition: none;
+}
+
+.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+.with-result-button {
+  padding-inline-end: var(--space-m-dsumyt, 16px);
+}
+
+.result-button {
+  display: inline-block;
+  margin-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  margin-inline: 0;
+}
+
+.word-wrap {
+  min-inline-size: 0;
+  word-break: break-word;
+}
+
+.label-flash {
+  color: inherit;
+  font-weight: 700;
+}
+.label-key-value {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  font-weight: var(--font-display-label-weight-zavpeo, 700);
+  color: var(--color-text-label-28gfmc, #0f141a);
+  margin-block-end: var(--space-scaled-xxxs-oo06c7, 2px);
+}
+
+.flash {
+  color: inherit;
+}
+
+.progress-container {
+  display: flex;
+  align-items: center;
+  max-inline-size: 800px;
+  block-size: var(--line-height-body-m-2mh3ke, 20px);
+}
+
+.percentage-container {
+  inline-size: 33px;
+  flex-shrink: 0;
+  white-space: nowrap;
+  text-align: end;
+  font-size: var(--font-size-body-s-smc8cv, 12px);
+  line-height: var(--line-height-body-s-nu5hx1, 16px);
+  letter-spacing: var(--letter-spacing-body-s-gq78ok, 0.005em);
+}
+
+.progress {
+  inline-size: 100%;
+  margin-inline-end: var(--space-s-tvghoh, 12px);
+  min-inline-size: 0;
+  block-size: var(--awsui-progress-bar-height-6b9ypa, 4px);
+  border-block: 0;
+  border-inline: none;
+  box-sizing: border-box;
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-start-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-end-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  background-color: var(--awsui-progress-bar-background-color-6b9ypa, var(--color-background-progress-bar-default-j8kyxd, #ebebf0));
+}
+.progress::-webkit-progress-bar {
+  block-size: var(--awsui-progress-bar-height-6b9ypa, 4px);
+  border-block: 0;
+  border-inline: none;
+  box-sizing: border-box;
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-start-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-end-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  background-color: var(--awsui-progress-bar-background-color-6b9ypa, var(--color-background-progress-bar-default-j8kyxd, #ebebf0));
+}
+.progress::-webkit-progress-value {
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-end-end-radius: 0;
+  background-color: var(--awsui-progress-value-background-color-6b9ypa, var(--color-background-progress-bar-value-default-69ydqg, #006ce0));
+}
+.progress.complete::-webkit-progress-value {
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-start-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-end-end-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+}
+.progress::-moz-progress-bar {
+  border-start-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--awsui-progress-bar-border-radius-6b9ypa, 10px);
+  border-end-end-radius: 0;
+  background-color: var(--awsui-progress-value-background-color-6b9ypa, var(--color-background-progress-bar-value-default-69ydqg, #006ce0));
+}
+`;
+
+// src/progress-bar/internal.ts
+var hostStyles49 = css110`:host { display: block; }`;
+var CsProgressBarInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.value = 0;
+    this.status = "in-progress";
+    this.variant = "standalone";
+    this.ariaLabel = null;
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles48, hostStyles49];
+  }
+  get _clampedValue() {
+    return Math.round(Math.min(100, Math.max(0, this.value ?? 0)));
+  }
+  _onResultButtonClick() {
+    fireNonCancelableEvent(this, "resultButtonClick", null);
+  }
+  render() {
+    const isInProgress = this.status === "in-progress";
+    const clamped = this._clampedValue;
+    const rootClasses = {
+      "root": true,
+      [`variant-${this.variant}`]: true
+    };
+    const progressClasses = {
+      "progress": true,
+      "complete": clamped >= 100
+    };
+    const statusType = this.status === "success" ? "success" : "error";
+    return html50`
+      <div class=${classMap42(rootClasses)}>
+        <div class="label">
+          <slot name="label"></slot>
+        </div>
+        <div class="description">
+          <slot name="description"></slot>
+        </div>
+
+        ${isInProgress ? html50`
+          <div class="progress-container">
+            <progress
+              class=${classMap42(progressClasses)}
+              value=${clamped}
+              max="100"
+              aria-label=${this.ariaLabel || "Progress"}
+              aria-valuenow=${clamped}
+              aria-valuemin=${0}
+              aria-valuemax=${100}
+            ></progress>
+            <span class="percentage-container">${clamped}%</span>
+          </div>
+        ` : html50`
+          <div class="result-state ${this.resultButtonText ? "with-result-button" : ""}">
+            <cs-status-indicator type=${statusType}>
+              <slot name="resultText"></slot>
+            </cs-status-indicator>
+            ${this.resultButtonText && this.variant !== "flash" ? html50`
+              <span class="result-button">
+                <button
+                  type="button"
+                  class="result-button-trigger"
+                  @click=${this._onResultButtonClick}
+                >${this.resultButtonText}</button>
+              </span>
+            ` : nothing24}
+          </div>
+        `}
+
+        <div class="additional-info word-wrap">
+          <slot name="additionalInfo"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property49({ type: Number })
+], CsProgressBarInternal.prototype, "value", 2);
+__decorateClass([
+  property49({ type: String, reflect: true })
+], CsProgressBarInternal.prototype, "status", 2);
+__decorateClass([
+  property49({ type: String, reflect: true })
+], CsProgressBarInternal.prototype, "variant", 2);
+__decorateClass([
+  property49({ type: String })
+], CsProgressBarInternal.prototype, "resultButtonText", 2);
+__decorateClass([
+  property49({ type: String })
+], CsProgressBarInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property49({ type: String })
+], CsProgressBarInternal.prototype, "ariaLabelledby", 2);
+__decorateClass([
+  property49({ type: String })
+], CsProgressBarInternal.prototype, "ariaDescribedby", 2);
+
+// src/progress-bar/index.ts
+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 { property as property50 } from "lit/decorators.js";
+import { classMap as classMap43 } from "lit/directives/class-map.js";
+
+// src/steps/styles.ts
+import { css as css111 } from "lit";
+var componentStyles49 = css111`
+.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  min-inline-size: 0;
+  word-break: break-word;
+}
+.root > .list {
+  list-style: none;
+  padding-inline-start: 0;
+  margin-block: 0;
+}
+.root > .list > .container {
+  display: grid;
+  grid-template-columns: var(--space-static-l-n53k41, 20px) 1fr;
+  grid-template-rows: minmax(var(--space-static-l-n53k41, 20px), auto);
+}
+.root > .list > .container > .header {
+  display: flex;
+  gap: var(--space-xxs-hwfkai, 4px);
+  grid-row: 1;
+  grid-column: 1/span 2;
+}
+.root > .list > .container > .details {
+  align-items: center;
+  grid-row: 2;
+  grid-column: 2;
+  margin-block-end: var(--space-static-xs-gnm0mz, 8px);
+}
+.root > .list > .container > .connector {
+  grid-row: 2;
+  grid-column: 1;
+  background-color: var(--color-border-divider-default-nr68jt, #c6c6cd);
+  margin-block: 0;
+  border-block: 0;
+  border-inline: 0;
+  inline-size: var(--border-divider-list-width-tdfx1x, 1px);
+  block-size: auto;
+  min-block-size: var(--space-static-xs-gnm0mz, 8px);
+  position: relative;
+  inset-inline-end: var(--space-static-xxxs-yidks1, 2px);
+}
+.root > .list > :last-of-type > .connector {
+  display: none;
+}
+.root > .list.custom > .details {
+  margin-block-end: 0;
+}
+
+.horizontal > .list {
+  display: grid;
+  align-items: flex-start;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  grid-auto-flow: column;
+}
+.horizontal > .list > .container {
+  display: grid;
+  grid-template-columns: var(--space-static-l-n53k41, 20px) 1fr;
+  grid-template-rows: minmax(var(--space-static-l-n53k41, 20px), auto);
+  align-items: center;
+}
+.horizontal > .list > .container > .header {
+  display: flex;
+  grid-row: 1;
+  grid-column: 1/span 2;
+  align-items: center;
+}
+.horizontal > .list > .container > .header > .connector {
+  display: block;
+  flex: 1;
+  background-color: var(--color-border-divider-default-nr68jt, #c6c6cd);
+  margin-block: 0;
+  border-block: 0;
+  border-inline: 0;
+  min-block-size: 0;
+  inset-inline-end: 0;
+  block-size: var(--border-divider-list-width-tdfx1x, 1px);
+  inline-size: auto;
+  min-inline-size: var(--space-static-xs-gnm0mz, 8px);
+  margin-inline-end: var(--space-static-xxs-ns94dp, 4px);
+}
+.horizontal > .list > .container > .horizontal-header {
+  grid-row: 2;
+  grid-column: 1/span 3;
+  padding-inline-end: var(--space-xs-ymlm0b, 8px);
+}
+.horizontal > .list > .container > .details {
+  grid-row: 3;
+  grid-column: 1/span 3;
+  padding-inline-end: var(--space-xs-ymlm0b, 8px);
+}
+.horizontal > .list > .container:last-child > .header > .connector {
+  display: none;
+}
+`;
+
+// src/steps/internal.ts
+var hostStyles50 = css112`:host { display: block; }`;
+var iconNameMap4 = {
+  "success": "status-positive",
+  "error": "status-negative",
+  "warning": "status-warning",
+  "info": "status-info",
+  "stopped": "status-stopped",
+  "pending": "status-pending",
+  "in-progress": "status-in-progress"
+};
+var CsStepsInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.steps = [];
+    this.orientation = "vertical";
+    this.ariaLabel = null;
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles49, hostStyles50];
+  }
+  _renderIcon(step) {
+    if (step.status === "loading") {
+      return html51`<cs-spinner size="normal"></cs-spinner>`;
+    }
+    const iconName = iconNameMap4[step.status] || "status-info";
+    return html51`<cs-icon name=${iconName} size="small"></cs-icon>`;
+  }
+  _renderVerticalStep(step, index, total) {
+    const isLast = index === total - 1;
+    return html51`
+      <li class="container" role="listitem">
+        <div class="header">
+          <span
+            class="icon"
+            role="img"
+            aria-label=${step.statusIconAriaLabel || step.status}
+          >
+            ${this._renderIcon(step)}
+          </span>
+          <span class="title">${step.header}</span>
+        </div>
+        ${!isLast ? html51`<hr class="connector" aria-hidden="true" />` : nothing25}
+        ${step.details ? html51`
+          <div class="details">${step.details}</div>
+        ` : nothing25}
+      </li>
+    `;
+  }
+  _renderHorizontalStep(step, index, total) {
+    const isLast = index === total - 1;
+    return html51`
+      <li class="container" role="listitem">
+        <div class="header">
+          <span
+            class="icon"
+            role="img"
+            aria-label=${step.statusIconAriaLabel || step.status}
+          >
+            ${this._renderIcon(step)}
+          </span>
+          ${!isLast ? html51`<hr class="connector" aria-hidden="true" />` : nothing25}
+        </div>
+        <div class="horizontal-header">
+          <span class="title">${step.header}</span>
+        </div>
+        ${step.details ? html51`
+          <div class="details">${step.details}</div>
+        ` : nothing25}
+      </li>
+    `;
+  }
+  render() {
+    const isHorizontal = this.orientation === "horizontal";
+    const rootClasses = {
+      "root": true,
+      "horizontal": isHorizontal
+    };
+    const total = this.steps.length;
+    return html51`
+      <div class=${classMap43(rootClasses)}>
+        <ol
+          class="list"
+          role="list"
+          aria-label=${this.ariaLabel || "Steps"}
+        >
+          ${this.steps.map(
+      (step, i) => isHorizontal ? this._renderHorizontalStep(step, i, total) : this._renderVerticalStep(step, i, total)
+    )}
+        </ol>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property50({ attribute: false })
+], CsStepsInternal.prototype, "steps", 2);
+__decorateClass([
+  property50({ type: String, reflect: true })
+], CsStepsInternal.prototype, "orientation", 2);
+__decorateClass([
+  property50({ type: String })
+], CsStepsInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property50({ type: String })
+], CsStepsInternal.prototype, "ariaLabelledby", 2);
+__decorateClass([
+  property50({ type: String })
+], CsStepsInternal.prototype, "ariaDescribedby", 2);
+
+// src/steps/index.ts
+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 { property as property51 } from "lit/decorators.js";
+
+// src/key-value-pairs/styles.ts
+import { css as css113 } from "lit";
+var componentStyles50 = css113`
+.key-value-pairs {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+.group-title {
+  padding-block-end: var(--space-scaled-m-m892r9, 16px);
+}
+
+.group-list {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--space-scaled-m-m892r9, 16px);
+}
+
+.term {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  font-weight: var(--font-display-label-weight-zavpeo, 700);
+  color: var(--color-text-label-28gfmc, #0f141a);
+  margin-block-end: var(--space-key-value-gap-9glmqc, 0px);
+}
+
+.key-label {
+  display: inline-flex;
+  margin-inline-end: var(--space-xs-ymlm0b, 8px);
+}
+.key-label:only-child {
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.detail {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  margin-inline-start: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+.info {
+  display: inline-flex;
+  padding-inline-start: var(--space-xs-ymlm0b, 8px);
+  border-inline-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+`;
+
+// src/key-value-pairs/internal.ts
+var hostStyles51 = css114`:host { display: block; }`;
+var layoutStyles = css114`
+  .grid {
+    display: grid;
+    gap: var(--space-scaled-m-m892r9, 16px);
+  }
+`;
+var CsKeyValuePairsInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.columns = 1;
+    this.ariaLabel = null;
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles50, layoutStyles, hostStyles51];
+  }
+  _renderPair(pair) {
+    return html52`
+      <div class="pair">
+        <dt class="term">
+          <span class="key-label">${pair.label}</span>
+          ${pair.info ? html52`<span class="info">${pair.info}</span>` : nothing26}
+        </dt>
+        <dd class="detail">${pair.value}</dd>
+      </div>
+    `;
+  }
+  _renderGroup(group) {
+    return html52`
+      <div class="group">
+        ${group.title ? html52`<div class="group-title"><strong>${group.title}</strong></div>` : nothing26}
+        <dl class="group-list">
+          ${group.items.map((pair) => this._renderPair(pair))}
+        </dl>
+      </div>
+    `;
+  }
+  render() {
+    const cols = Math.min(4, Math.max(1, this.columns));
+    const minWidth = this.minColumnWidth ?? 150;
+    const gridStyle = `grid-template-columns: repeat(${cols}, minmax(${minWidth}px, 1fr));`;
+    return html52`
+      <div
+        class="key-value-pairs"
+        role="group"
+        aria-label=${this.ariaLabel || "Key-value pairs"}
+      >
+        <div class="grid" style=${gridStyle}>
+          ${this.items.map((item) => {
+      if (item.type === "group") {
+        return this._renderGroup(item);
+      }
+      const pair = item;
+      return html52`
+              <dl class="group-list">
+                ${this._renderPair(pair)}
+              </dl>
+            `;
+    })}
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property51({ attribute: false })
+], CsKeyValuePairsInternal.prototype, "items", 2);
+__decorateClass([
+  property51({ type: Number })
+], CsKeyValuePairsInternal.prototype, "columns", 2);
+__decorateClass([
+  property51({ type: String })
+], CsKeyValuePairsInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property51({ type: String })
+], CsKeyValuePairsInternal.prototype, "ariaLabelledby", 2);
+__decorateClass([
+  property51({ type: Number })
+], CsKeyValuePairsInternal.prototype, "minColumnWidth", 2);
+
+// src/key-value-pairs/index.ts
+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 { property as property52, state as state17, query as queryDecorator } from "lit/decorators.js";
+
+// src/property-filter/styles.ts
+import { css as css115 } from "lit";
+var componentStyles51 = css115`
+.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+.search-field {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: var(--space-xs-ymlm0b, 8px) var(--space-s-tvghoh, 12px);
+}
+
+.input-wrapper {
+  flex-grow: 1;
+  display: flex;
+  align-items: flex-end;
+  max-inline-size: calc(688px - 2 * var(--space-l-2ud1p3, 20px));
+}
+
+.add-token {
+  border-inline-start: 1px solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+  box-sizing: border-box;
+  margin-inline-start: var(--space-m-dsumyt, 16px);
+  padding-inline-start: var(--space-m-dsumyt, 16px);
+}
+
+.tokens {
+  margin-block: var(--space-xs-ymlm0b, 8px);
+  margin-inline: 0;
+}
+
+.token-operator {
+  font-weight: bold;
+}
+
+.property-editor {
+  overflow-y: auto;
+}
+.property-editor-header {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  font-weight: bold;
+  padding-block-start: var(--space-s-tvghoh, 12px);
+  padding-block-end: var(--space-xxs-hwfkai, 4px);
+  padding-inline: var(--space-s-tvghoh, 12px);
+}
+.property-editor-header-enum {
+  display: flex;
+  gap: var(--space-xs-ymlm0b, 8px);
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  font-weight: bold;
+  color: var(--color-text-dropdown-group-label-2tmyik, #424650);
+  padding-block: calc(var(--space-xs-ymlm0b, 8px) + var(--border-item-width-miijiw, 2px) - var(--border-divider-list-width-tdfx1x, 1px));
+  padding-inline: calc(var(--space-field-horizontal-0aq2ch, 12px) + var(--border-item-width-miijiw, 2px));
+}
+.property-editor-form {
+  padding-block-start: var(--space-xxs-hwfkai, 4px);
+  padding-block-end: var(--space-s-tvghoh, 12px);
+  padding-inline: var(--space-s-tvghoh, 12px);
+}
+.property-editor-cancel {
+  margin-inline-end: var(--space-xs-ymlm0b, 8px);
+}
+.property-editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  border-block-start: var(--border-divider-list-width-tdfx1x, 1px) solid var(--color-border-dropdown-item-default-kape37, #c6c6cd);
+  padding-inline: var(--space-l-2ud1p3, 20px);
+  padding-block: var(--space-s-tvghoh, 12px);
+}
+
+.property-editor-enum {
+  display: flex;
+  flex-direction: column;
+}
+
+.token-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s-tvghoh, 12px);
+  margin-block: var(--space-xxs-hwfkai, 4px);
+  margin-inline: var(--space-xxs-hwfkai, 4px);
+}
+.token-editor-field-property {
+  flex-grow: 2;
+}
+.token-editor-field-operator {
+  flex-grow: 1;
+}
+.token-editor-field-value {
+  flex-grow: 2;
+}
+.token-editor-multiselect-wrapper {
+  position: relative;
+  block-size: var(--size-vertical-input-p1d7xx, 32px);
+  min-inline-size: 200px;
+}
+.token-editor-multiselect-wrapper-inner {
+  position: absolute;
+  inline-size: 100%;
+}
+.token-editor-cancel {
+  margin-inline-end: var(--space-xs-ymlm0b, 8px);
+}
+.token-editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding-block-start: var(--space-s-tvghoh, 12px);
+  border-block-start: 1px solid var(--color-border-dropdown-item-default-kape37, #c6c6cd);
+  padding-inline-end: calc(var(--space-m-dsumyt, 16px) + var(--space-xxs-hwfkai, 4px));
+  margin-inline: calc(-1 * var(--space-m-dsumyt, 16px) + -1 * var(--space-xxs-hwfkai, 4px));
+  margin-block-start: var(--space-s-tvghoh, 12px);
+}
+.token-editor-grid {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  display: grid;
+  gap: var(--space-s-tvghoh, 12px);
+  grid-template-columns: minmax(min-content, 2fr) minmax(min-content, 120px) minmax(min-content, 3fr) min-content;
+}
+.token-editor-grid-group {
+  display: contents;
+}
+.token-editor-grid.token-editor-narrow {
+  grid-template-columns: minmax(100px, 1fr);
+  gap: var(--space-m-dsumyt, 16px);
+}
+.token-editor-grid.token-editor-narrow > .token-editor-grid-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s-tvghoh, 12px);
+}
+.token-editor-grid.token-editor-narrow > .token-editor-grid-group.token-editor-supports-groups {
+  padding-block-end: var(--space-m-dsumyt, 16px);
+  border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+.token-editor-grid-header {
+  color: var(--color-text-column-header-e6urd1, #424650);
+  font-weight: var(--font-weight-heading-s-lcx0ai, 700);
+  padding-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  text-align: start;
+}
+.token-editor-grid-cell:not(.token-editor-narrow) {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+.token-editor-grid-cell.token-editor-narrow:nth-child(4) {
+  display: flex;
+  justify-content: flex-end;
+}
+.token-editor-add-token {
+  margin-block-start: var(--space-s-tvghoh, 12px);
+}
+
+.custom-content-wrapper {
+  display: contents;
+}
+
+.input {
+  flex: 1;
+}
+
+.results {
+  padding-block: calc(var(--space-scaled-xxs-pfm1nx, 4px) + var(--border-width-field-2xc78x, 1px));
+  padding-inline: 0;
+}
+
+.token-trigger {
+  min-inline-size: 0;
+  word-break: break-word;
+}
+
+.constraint {
+  padding-block-start: var(--space-xxs-hwfkai, 4px);
+  color: var(--color-text-form-secondary-1nm780, #656871);
+  font-size: var(--font-size-body-s-smc8cv, 12px);
+  line-height: var(--line-height-body-s-nu5hx1, 16px);
+  letter-spacing: var(--letter-spacing-body-s-gq78ok, 0.005em);
+}
+`;
+
+// src/property-filter/internal.ts
+var hostStyles52 = css116`:host { display: block; }`;
+var filterInputStyles = css116`
+  .filter-input {
+    flex: 1;
+    min-inline-size: 120px;
+    padding-block: var(--space-scaled-xxs-pfm1nx, 4px);
+    padding-inline: var(--space-field-horizontal-0aq2ch, 12px);
+    font-size: var(--font-size-body-m-a7nh2n, 14px);
+    line-height: var(--line-height-body-m-2mh3ke, 20px);
+    font-family: inherit;
+    border: var(--border-width-field-2xc78x, 1px) solid var(--color-border-input-default-t4n2s0, #8c8c94);
+    border-radius: var(--border-radius-input-0z3fnq, 8px);
+    background: var(--color-background-input-default-m6twru, #ffffff);
+    color: var(--color-text-body-default-vvtq8u, #0f141a);
+    outline: none;
+    box-sizing: border-box;
+  }
+  .filter-input:focus {
+    border-color: var(--color-border-input-focused-0mhils, #006ce0);
+    box-shadow: 0 0 0 1px var(--color-border-input-focused-0mhils, #006ce0);
+  }
+  .filter-input:disabled {
+    background: var(--color-background-input-disabled-kxocba, #ebebf0);
+    border-color: var(--color-border-input-disabled-zgnzvk, #ebebf0);
+    color: var(--color-text-input-disabled-tvmsyk, #b4b4bb);
+    cursor: default;
+  }
+  .token-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs-ymlm0b, 8px);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .token-item {
+    display: inline-flex;
+    max-inline-size: 100%;
+  }
+  .operation-label {
+    display: inline-flex;
+    align-items: center;
+    font-size: var(--font-size-body-s-smc8cv, 12px);
+    line-height: var(--line-height-body-s-nu5hx1, 16px);
+    color: var(--color-text-form-secondary-1nm780, #656871);
+    font-weight: bold;
+    text-transform: uppercase;
+    padding-inline: var(--space-xxs-hwfkai, 4px);
+  }
+`;
+var CsPropertyFilterInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.query = { tokens: [], operation: "and" };
+    this.filteringProperties = [];
+    this.filteringOptions = [];
+    this.disabled = false;
+    this.filteringPlaceholder = "Filter by text";
+    this._inputValue = "";
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles51, componentStyles26, filterInputStyles, hostStyles52];
+  }
+  focus(options) {
+    this._inputEl?.focus(options);
+  }
+  _onInput(e) {
+    this._inputValue = e.target.value;
+  }
+  _onKeyDown(e) {
+    if (e.key === "Enter" && this._inputValue.trim()) {
+      e.preventDefault();
+      const newToken = { value: this._inputValue.trim() };
+      const newQuery = {
+        tokens: [...this.query.tokens, newToken],
+        operation: this.query.operation
+      };
+      this._inputValue = "";
+      fireNonCancelableEvent(this, "change", { query: newQuery });
+    }
+  }
+  _onDismiss(index) {
+    const newTokens = this.query.tokens.filter((_, i) => i !== index);
+    const newQuery = {
+      tokens: newTokens,
+      operation: this.query.operation
+    };
+    fireNonCancelableEvent(this, "change", { query: newQuery });
+  }
+  _renderToken(token, index) {
+    const label = token.propertyKey ? `${token.propertyKey} ${token.operator || "="} ${token.value}` : token.value;
+    return html53`
+      <li class="token-item">
+        <div class="token-box" role="group" aria-label=${label}>
+          <span class="token-normal">
+            <div class="token-trigger">${label}</div>
+          </span>
+          <button
+            class="dismiss-button"
+            type="button"
+            aria-label="Remove filter ${label}"
+            @click=${() => this._onDismiss(index)}
+          >
+            <cs-icon name="close" size="small"></cs-icon>
+          </button>
+        </div>
+      </li>
+    `;
+  }
+  render() {
+    const hasTokens = this.query.tokens.length > 0;
+    const operationLabel = this.query.operation === "and" ? "and" : "or";
+    return html53`
+      <div class="root">
+        <div class="search-field">
+          <div class="input-wrapper">
+            <input
+              class="filter-input"
+              type="text"
+              .value=${this._inputValue}
+              placeholder=${this.filteringPlaceholder}
+              ?disabled=${this.disabled}
+              aria-label=${this.filteringPlaceholder}
+              @input=${this._onInput}
+              @keydown=${this._onKeyDown}
+            />
+          </div>
+        </div>
+
+        ${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}
+                ${this._renderToken(token, i)}
+              `)}
+            </ul>
+          </div>
+        ` : nothing27}
+
+        ${this.countText && hasTokens ? html53`
+          <div class="results">${this.countText}</div>
+        ` : nothing27}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property52({ attribute: false })
+], CsPropertyFilterInternal.prototype, "query", 2);
+__decorateClass([
+  property52({ attribute: false })
+], CsPropertyFilterInternal.prototype, "filteringProperties", 2);
+__decorateClass([
+  property52({ attribute: false })
+], CsPropertyFilterInternal.prototype, "filteringOptions", 2);
+__decorateClass([
+  property52({ type: Boolean, reflect: true })
+], CsPropertyFilterInternal.prototype, "disabled", 2);
+__decorateClass([
+  property52({ type: String })
+], CsPropertyFilterInternal.prototype, "filteringPlaceholder", 2);
+__decorateClass([
+  property52({ type: String })
+], CsPropertyFilterInternal.prototype, "countText", 2);
+__decorateClass([
+  state17()
+], CsPropertyFilterInternal.prototype, "_inputValue", 2);
+__decorateClass([
+  queryDecorator(".filter-input")
+], CsPropertyFilterInternal.prototype, "_inputEl", 2);
+
+// src/property-filter/index.ts
+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 { property as property53 } from "lit/decorators.js";
+import { classMap as classMap44 } from "lit/directives/class-map.js";
+
+// src/table/styles.ts
+import { css as css117 } from "lit";
+var componentStyles52 = css117`
+.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  inline-size: 100%;
+}
+
+.tools {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: var(--space-scaled-xs-xwoogq, 8px) var(--space-l-2ud1p3, 20px);
+  padding-block-start: var(--space-scaled-xs-xwoogq, 8px);
+  padding-block-end: var(--space-table-header-tools-bottom-d9u5kf, 0px);
+  padding-inline: 0;
+}
+.tools-filtering {
+  max-inline-size: 100%;
+}
+@supports (flex-basis: fit-content) {
+  .tools-filtering {
+    flex: 1 1 fit-content;
+  }
+}
+@supports not (flex-basis: fit-content) {
+  .tools-filtering {
+    flex: 1 1 auto;
+  }
+}
+.tools-align-right {
+  display: flex;
+  margin-inline-start: auto;
+}
+.tools-pagination + .tools-preferences {
+  border-inline-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+  box-sizing: border-box;
+  margin-inline-start: var(--space-xs-ymlm0b, 8px);
+  padding-inline-start: var(--space-xs-ymlm0b, 8px);
+}
+.tools-small > .tools-filtering {
+  flex-basis: 100%;
+}
+
+.table {
+  inline-size: 100%;
+  border-spacing: 0;
+  position: relative;
+  box-sizing: border-box;
+}
+.table-layout-fixed {
+  table-layout: fixed;
+}
+
+.wrapper {
+  position: relative;
+  box-sizing: border-box;
+  inline-size: 100%;
+  overflow-x: auto;
+  scrollbar-width: none; /* Hide scrollbar in Firefox */
+}
+.wrapper.variant-stacked > .table, .wrapper.variant-stacked > .wrapper-content-measure, .wrapper.variant-container > .table, .wrapper.variant-container > .wrapper-content-measure {
+  padding-inline: var(--space-table-horizontal-suurzj, 20px);
+}
+.wrapper.variant-stacked:not(.has-footer), .wrapper.variant-container:not(.has-footer) {
+  padding-block-end: var(--space-table-content-bottom-tlfqmq, 4px);
+}
+.wrapper:not(.has-header) {
+  border-start-end-radius: var(--border-radius-container-nsfwmm, 16px);
+  border-start-start-radius: var(--border-radius-container-nsfwmm, 16px);
+}
+.wrapper::-webkit-scrollbar {
+  display: none; /* Hide scrollbar in Safari and Chrome */
+}
+:host-context([data-awsui-focus-visible=true]) .wrapper:focus {
+  outline: 2px dotted transparent;
+  outline-offset: 2px;
+  border-start-start-radius: var(--border-radius-container-nsfwmm, 16px);
+  border-start-end-radius: var(--border-radius-container-nsfwmm, 16px);
+  border-end-start-radius: var(--border-radius-container-nsfwmm, 16px);
+  border-end-end-radius: var(--border-radius-container-nsfwmm, 16px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+}
+
+.cell-merged {
+  text-align: center;
+  padding-block: 0;
+  padding-inline: 0;
+}
+.cell-merged.has-footer {
+  /*
+  Add a bottom border to the body cell of an empty table as a separator between the
+  table and the footer
+  */
+  border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+.cell-merged-content {
+  box-sizing: border-box;
+  inline-size: 100%;
+  padding-block-start: var(--space-scaled-m-m892r9, 16px);
+  padding-block-end: var(--space-scaled-l-sej05l, 20px);
+  padding-inline: var(--space-l-2ud1p3, 20px);
+}
+@supports (position: sticky) {
+  .cell-merged-content {
+    position: sticky;
+    inset-inline-start: 0;
+    margin-block: 0;
+    margin-inline: calc(-2 * var(--space-table-horizontal-suurzj, 20px));
+  }
+}
+
+.empty {
+  color: var(--color-text-empty-tlohug, #656871);
+}
+
+/*
+The min/max/width token values in Visual Refresh should align
+the table header and body cells selection control with the table
+filter search icon.
+*/
+.selection-control {
+  box-sizing: border-box;
+  max-inline-size: var(--size-table-selection-horizontal-qqiajd, 40px);
+  min-inline-size: var(--size-table-selection-horizontal-qqiajd, 40px);
+  position: relative;
+  inline-size: var(--size-table-selection-horizontal-qqiajd, 40px);
+}
+.selection-control.selection-control-header {
+  padding-block: var(--space-scaled-xs-xwoogq, 8px);
+  padding-inline: var(--space-scaled-l-sej05l, 20px);
+  border-inline-start: var(--border-item-width-miijiw, 2px) solid transparent;
+}
+
+.header-secondary {
+  overflow: auto;
+  scrollbar-width: none; /* Firefox */
+  box-sizing: border-box;
+  inline-size: 100%;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  background: var(--color-background-table-header-hdjxos, #ffffff);
+}
+.header-secondary.variant-full-page {
+  background: var(--color-background-layout-main-5ilwcb, #ffffff);
+}
+.header-secondary.variant-stacked > .table, .header-secondary.variant-container > .table {
+  padding-inline: var(--space-table-horizontal-suurzj, 20px);
+}
+.header-secondary.variant-stacked:not(.table-has-header), .header-secondary.variant-container:not(.table-has-header) {
+  border-start-start-radius: var(--border-radius-container-nsfwmm, 16px);
+  border-start-end-radius: var(--border-radius-container-nsfwmm, 16px);
+}
+.header-secondary::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+.header-secondary.table-has-header {
+  border-block-start: var(--border-divider-list-width-tdfx1x, 1px) solid var(--color-border-container-divider-9huz1a, transparent);
+}
+
+.header-controls {
+  padding-block: var(--space-container-header-top-am4vzw, 12px) var(--space-container-header-bottom-2taq8v, 8px);
+}
+.header-controls.variant-full-page {
+  padding-block: 0 calc(var(--space-container-header-bottom-2taq8v, 8px) + var(--space-table-header-tools-full-page-bottom-9m47g6, 4px));
+}
+.header-controls.variant-stacked, .header-controls.variant-container {
+  padding-inline: calc(var(--space-table-horizontal-suurzj, 20px) + var(--space-table-header-horizontal-kb5ww2, 0px));
+}
+.header-controls.variant-embedded, .header-controls.variant-borderless {
+  padding-inline: var(--space-table-header-horizontal-kb5ww2, 0px);
+  padding-block-start: var(--space-table-embedded-header-top-twu628, 0px);
+}
+
+.footer-wrapper.variant-stacked, .footer-wrapper.variant-container {
+  padding-inline: var(--space-table-horizontal-suurzj, 20px);
+}
+
+.footer {
+  padding-block: var(--space-scaled-s-8ozaad, 12px);
+  padding-inline: var(--space-table-footer-horizontal-l5g495, 0px);
+}
+.footer-with-pagination {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-scaled-s-8ozaad, 12px);
+}
+.footer-pagination {
+  margin-inline-start: auto;
+}
+`;
+
+// src/table/internal.ts
+var hostStyles53 = css118`:host { display: block; }`;
+var tableElementStyles = css118`
+  .header-cell {
+    padding-block: var(--space-scaled-xs-xwoogq, 8px);
+    padding-inline: var(--space-l-2ud1p3, 20px);
+    border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid
+      var(--color-border-divider-default-nr68jt, #c6c6cd);
+    font-weight: 700;
+    font-size: var(--font-size-body-s-3sui0u, 12px);
+    line-height: var(--line-height-body-s-yzq0ol, 16px);
+    color: var(--color-text-column-header-huer4g, #0f141a);
+    text-align: start;
+    white-space: nowrap;
+    box-sizing: border-box;
+    background: var(--color-background-table-header-hdjxos, #ffffff);
+    vertical-align: middle;
+  }
+  .header-cell-sortable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .header-cell-sortable:hover {
+    color: var(--color-text-interactive-hover-awk0mg, #002b66);
+  }
+  .header-cell-sorted {
+    color: var(--color-text-interactive-active-vol84d, #002b66);
+  }
+
+  .sorting-icon {
+    display: inline-block;
+    margin-inline-start: var(--space-xxs-ysj0na, 4px);
+    vertical-align: middle;
+    transition: transform 0.135s ease-in-out;
+  }
+  .sorting-icon-ascending {
+    transform: rotate(180deg);
+  }
+
+  .body-cell {
+    padding-block: var(--space-scaled-xs-xwoogq, 8px);
+    padding-inline: var(--space-l-2ud1p3, 20px);
+    border-block-end: var(--border-divider-list-width-tdfx1x, 1px) solid
+      var(--color-border-divider-default-nr68jt, #c6c6cd);
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+  .body-cell-wrap {
+    white-space: normal;
+    word-break: break-word;
+  }
+
+  .row {
+    background: var(--color-background-container-content-vp98t4, #ffffff);
+  }
+  .row:hover {
+    background: var(--color-background-dropdown-item-hover-b9eaac, #f0f0f0);
+  }
+  .row-selected {
+    background: var(--color-background-item-selected-y06wdv, #f0f4ff);
+  }
+  .row-selected:hover {
+    background: var(--color-background-item-selected-y06wdv, #f0f4ff);
+  }
+  .row-striped:not(.row-selected) {
+    background: var(--color-background-striped-rows-khb4zg, #fafafa);
+  }
+
+  .selection-cell {
+    box-sizing: border-box;
+    inline-size: var(--size-table-selection-horizontal-qqiajd, 40px);
+    min-inline-size: var(--size-table-selection-horizontal-qqiajd, 40px);
+    max-inline-size: var(--size-table-selection-horizontal-qqiajd, 40px);
+    padding-block: var(--space-scaled-xs-xwoogq, 8px);
+    padding-inline-start: var(--space-scaled-l-sej05l, 20px);
+    padding-inline-end: var(--space-xs-ymlm0b, 8px);
+    vertical-align: middle;
+  }
+
+  .table-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-xs-ymlm0b, 8px);
+    padding-block: var(--space-scaled-l-sej05l, 20px);
+    padding-inline: var(--space-l-2ud1p3, 20px);
+    color: var(--color-text-body-secondary-vxiqkp, #656871);
+  }
+
+  .table-empty {
+    padding-block-start: var(--space-scaled-m-m892r9, 16px);
+    padding-block-end: var(--space-scaled-l-sej05l, 20px);
+    padding-inline: var(--space-l-2ud1p3, 20px);
+    text-align: center;
+  }
+
+  .content-density-compact .header-cell {
+    padding-block: var(--space-scaled-xxs-95dhkm, 4px);
+  }
+  .content-density-compact .body-cell {
+    padding-block: var(--space-scaled-xxs-95dhkm, 4px);
+  }
+
+  input[type="radio"] {
+    cursor: pointer;
+    margin: 0;
+    inline-size: 16px;
+    block-size: 16px;
+    accent-color: var(--color-border-control-checked-hzwbsk, #006ce0);
+  }
+
+  .screenreader-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+var CsTableInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.columnDefinitions = [];
+    this.sortingDescending = false;
+    this.sortingDisabled = false;
+    this.selectedItems = [];
+    this.loading = false;
+    this.loadingText = "";
+    this.variant = "container";
+    this.stripedRows = false;
+    this.wrapLines = false;
+    this.stickyHeader = false;
+    this.contentDensity = "comfortable";
+    this._hasHeader = false;
+    this._hasFilter = false;
+    this._hasPagination = false;
+    this._onHeaderSlotChange = (e) => {
+      const slot = e.target;
+      this._hasHeader = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+    this._onFilterSlotChange = (e) => {
+      const slot = e.target;
+      this._hasFilter = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+    this._onPaginationSlotChange = (e) => {
+      const slot = e.target;
+      this._hasPagination = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+    /** Stops selection-cell clicks from triggering the row click handler. */
+    this._onSelectionCellClick = (e) => {
+      e.stopPropagation();
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles52, hostStyles53, tableElementStyles];
+  }
+  get _hasSelection() {
+    return this.selectionType === "single" || this.selectionType === "multi";
+  }
+  get _hasTools() {
+    return this._hasFilter || this._hasPagination;
+  }
+  get _allSelected() {
+    if (!this.items.length) return false;
+    return this.items.every((item) => this._isSelected(item));
+  }
+  get _someSelected() {
+    if (!this.items.length) return false;
+    const count = this.items.filter((item) => this._isSelected(item)).length;
+    return count > 0 && count < this.items.length;
+  }
+  _getItemKey(item) {
+    if (!this.trackBy) return "";
+    if (typeof this.trackBy === "function") return this.trackBy(item);
+    return String(item[this.trackBy]);
+  }
+  _isSelected(item) {
+    if (!this.selectedItems?.length) return false;
+    if (this.trackBy) {
+      const key = this._getItemKey(item);
+      return this.selectedItems.some((s) => this._getItemKey(s) === key);
+    }
+    return this.selectedItems.includes(item);
+  }
+  _isSameColumn(a, b) {
+    if (a.sortingComparator && b.sortingComparator) {
+      return a.sortingComparator === b.sortingComparator;
+    }
+    return !!a.sortingField && a.sortingField === b.sortingField;
+  }
+  _getAriaSort(col) {
+    const isSortable = !!(col.sortingField || col.sortingComparator);
+    if (!isSortable) return nothing28;
+    if (!this.sortingColumn) return "none";
+    if (!this._isSameColumn(col, this.sortingColumn)) return "none";
+    return this.sortingDescending ? "descending" : "ascending";
+  }
+  _onSort(col) {
+    if (!col.sortingField && !col.sortingComparator) return;
+    if (this.sortingDisabled) return;
+    const isSame = this.sortingColumn && this._isSameColumn(col, this.sortingColumn);
+    const isDescending = isSame ? !this.sortingDescending : false;
+    fireNonCancelableEvent(this, "sortingChange", {
+      sortingColumn: { sortingField: col.sortingField, sortingComparator: col.sortingComparator },
+      isDescending
+    });
+  }
+  _toggleSelection(item) {
+    const selected = this.selectedItems ? [...this.selectedItems] : [];
+    const idx = this.trackBy ? selected.findIndex((s) => this._getItemKey(s) === this._getItemKey(item)) : selected.indexOf(item);
+    if (idx >= 0) {
+      selected.splice(idx, 1);
+    } else {
+      selected.push(item);
+    }
+    fireNonCancelableEvent(this, "selectionChange", { selectedItems: selected });
+  }
+  _selectSingle(item) {
+    fireNonCancelableEvent(this, "selectionChange", { selectedItems: [item] });
+  }
+  _toggleAll() {
+    const selectedItems = this._allSelected ? [] : [...this.items];
+    fireNonCancelableEvent(this, "selectionChange", { selectedItems });
+  }
+  _onRowClick(item, rowIndex) {
+    fireNonCancelableEvent(this, "rowClick", { item, rowIndex });
+  }
+  render() {
+    const rootClasses = {
+      "root": true,
+      [`content-density-${this.contentDensity}`]: true
+    };
+    const headerSecondaryClasses = {
+      "header-secondary": true,
+      [`variant-${this.variant}`]: true,
+      "table-has-header": this._hasHeader
+    };
+    const headerControlsClasses = {
+      "header-controls": true,
+      [`variant-${this.variant}`]: true
+    };
+    return html54`
+      <div class=${classMap44(rootClasses)}>
+        <div class=${classMap44(headerSecondaryClasses)} style=${this._hasHeader || this._hasTools ? nothing28 : "display:none"}>
+          <div class=${classMap44(headerControlsClasses)}>
+            <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
+            ${this._hasTools ? html54`
+              <div class="tools">
+                <div class="tools-filtering">
+                  <slot name="filter" @slotchange=${this._onFilterSlotChange}></slot>
+                </div>
+                <div class="tools-align-right">
+                  <div class="tools-pagination">
+                    <slot name="pagination" @slotchange=${this._onPaginationSlotChange}></slot>
+                  </div>
+                </div>
+              </div>
+            ` : html54`
+              <slot name="filter" @slotchange=${this._onFilterSlotChange} style="display:none"></slot>
+              <slot name="pagination" @slotchange=${this._onPaginationSlotChange} style="display:none"></slot>
+            `}
+          </div>
+        </div>
+        ${this.loading ? this._renderLoading() : this.items.length === 0 ? this._renderEmpty() : this._renderTable()}
+      </div>
+    `;
+  }
+  _renderLoading() {
+    return html54`
+      <div class="table-loading" role="status">
+        <cs-spinner size="normal"></cs-spinner>
+        ${this.loadingText ? html54`<span>${this.loadingText}</span>` : nothing28}
+      </div>
+    `;
+  }
+  _renderEmpty() {
+    return html54`
+      <div class="table-empty empty">
+        <slot name="empty"></slot>
+      </div>
+    `;
+  }
+  _renderTable() {
+    const wrapperClasses = {
+      "wrapper": true,
+      [`variant-${this.variant}`]: true
+    };
+    return html54`
+      <div class=${classMap44(wrapperClasses)}>
+        <table class="table" role="table">
+          <thead>
+            <tr>
+              ${this._hasSelection ? this._renderSelectionHeader() : nothing28}
+              ${this.columnDefinitions.map((col) => this._renderHeaderCell(col))}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.items.map((item, i) => this._renderRow(item, i))}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+  _renderSelectionHeader() {
+    const label = this.ariaLabels?.selectionGroupLabel || "Selection";
+    return html54`
+      <th class="header-cell selection-cell" aria-label=${label} @click=${this._onSelectionCellClick}>
+        ${this.selectionType === "multi" ? html54`
+            <cs-checkbox
+              .checked=${this._allSelected}
+              .indeterminate=${this._someSelected}
+              @change=${(e) => {
+      e.stopPropagation();
+      this._toggleAll();
+    }}
+              aria-label=${label}
+            ></cs-checkbox>` : html54`<span class="screenreader-only">${label}</span>`}
+      </th>
+    `;
+  }
+  _renderHeaderCell(col) {
+    const isSortable = !!(col.sortingField || col.sortingComparator);
+    const isSorted = isSortable && this.sortingColumn && this._isSameColumn(col, this.sortingColumn);
+    const ariaSort = this._getAriaSort(col);
+    const cellClasses = {
+      "header-cell": true,
+      "header-cell-sortable": isSortable,
+      "header-cell-sorted": !!isSorted
+    };
+    const iconClasses = {
+      "sorting-icon": true,
+      "sorting-icon-ascending": !!isSorted && !this.sortingDescending
+    };
+    const widthStyle = col.width ? `width: ${typeof col.width === "number" ? `${col.width}px` : col.width}` : void 0;
+    return html54`
+      <th
+        class=${classMap44(cellClasses)}
+        aria-sort=${ariaSort}
+        style=${widthStyle ?? nothing28}
+        @click=${() => this._onSort(col)}
+      >
+        <span class="header-cell-text">${col.header}</span>
+        ${isSortable ? html54`<span class=${classMap44(iconClasses)}><cs-icon name="caret-down-filled" size="small"></cs-icon></span>` : nothing28}
+      </th>
+    `;
+  }
+  _renderRow(item, index) {
+    const selected = this._isSelected(item);
+    const rowClasses = {
+      "row": true,
+      "row-selected": selected,
+      "row-striped": this.stripedRows && index % 2 === 1
+    };
+    return html54`
+      <tr class=${classMap44(rowClasses)} @click=${() => this._onRowClick(item, index)}>
+        ${this._hasSelection ? this._renderSelectionCell(item) : nothing28}
+        ${this.columnDefinitions.map((col) => this._renderBodyCell(item, col))}
+      </tr>
+    `;
+  }
+  _renderSelectionCell(item) {
+    const selected = this._isSelected(item);
+    return html54`
+      <td class="body-cell selection-cell" @click=${this._onSelectionCellClick}>
+        ${this.selectionType === "multi" ? html54`
+            <cs-checkbox
+              .checked=${selected}
+              @change=${(e) => {
+      e.stopPropagation();
+      this._toggleSelection(item);
+    }}
+              aria-label="Select row"
+            ></cs-checkbox>` : html54`
+            <input
+              type="radio"
+              name="table-selection"
+              .checked=${selected}
+              @change=${() => this._selectSingle(item)}
+              aria-label="Select row"
+            />`}
+      </td>
+    `;
+  }
+  _renderBodyCell(item, col) {
+    const cellClasses = {
+      "body-cell": true,
+      "body-cell-wrap": this.wrapLines
+    };
+    const widthStyle = col.width ? `width: ${typeof col.width === "number" ? `${col.width}px` : col.width}` : void 0;
+    return html54`
+      <td class=${classMap44(cellClasses)} style=${widthStyle ?? nothing28}>
+        ${col.cell(item)}
+      </td>
+    `;
+  }
+};
+__decorateClass([
+  property53({ attribute: false })
+], CsTableInternal.prototype, "items", 2);
+__decorateClass([
+  property53({ attribute: false })
+], CsTableInternal.prototype, "columnDefinitions", 2);
+__decorateClass([
+  property53({ attribute: false })
+], CsTableInternal.prototype, "sortingColumn", 2);
+__decorateClass([
+  property53({ type: Boolean })
+], CsTableInternal.prototype, "sortingDescending", 2);
+__decorateClass([
+  property53({ type: Boolean })
+], CsTableInternal.prototype, "sortingDisabled", 2);
+__decorateClass([
+  property53({ attribute: false })
+], CsTableInternal.prototype, "selectedItems", 2);
+__decorateClass([
+  property53({ type: String })
+], CsTableInternal.prototype, "selectionType", 2);
+__decorateClass([
+  property53({ attribute: false })
+], CsTableInternal.prototype, "trackBy", 2);
+__decorateClass([
+  property53({ type: Boolean, reflect: true })
+], CsTableInternal.prototype, "loading", 2);
+__decorateClass([
+  property53({ type: String })
+], CsTableInternal.prototype, "loadingText", 2);
+__decorateClass([
+  property53({ type: String, reflect: true })
+], CsTableInternal.prototype, "variant", 2);
+__decorateClass([
+  property53({ type: Boolean })
+], CsTableInternal.prototype, "stripedRows", 2);
+__decorateClass([
+  property53({ type: Boolean })
+], CsTableInternal.prototype, "wrapLines", 2);
+__decorateClass([
+  property53({ type: Boolean })
+], CsTableInternal.prototype, "stickyHeader", 2);
+__decorateClass([
+  property53({ type: String })
+], CsTableInternal.prototype, "contentDensity", 2);
+__decorateClass([
+  property53({ attribute: false })
+], CsTableInternal.prototype, "ariaLabels", 2);
+
+// src/table/index.ts
+var CsTable = class extends CsTableInternal {
+};
+customElements.define("cs-table", CsTable);
 export {
   CsAlert,
   CsAnchorNavigation,
@@ -17386,7 +19846,9 @@ export {
   CsButton,
   CsButtonDropdown,
   CsButtonGroup,
+  CsCards,
   CsCheckbox,
+  CsCollectionPreferences,
   CsColumnLayout,
   CsContainer,
   CsContentLayout,
@@ -17401,13 +19863,16 @@ export {
   CsHeader,
   CsIcon,
   CsIconProvider,
+  CsKeyValuePairs,
   CsLink,
   CsList,
   CsLiveRegion,
   CsMultiselect,
   CsPagination,
   CsPopover,
+  CsProgressBar,
   CsPromptInput,
+  CsPropertyFilter,
   CsRadioGroup,
   CsSegmentedControl,
   CsSelect,
@@ -17415,6 +19880,8 @@ export {
   CsSpaceBetween,
   CsSpinner,
   CsStatusIndicator,
+  CsSteps,
+  CsTable,
   CsTabs,
   CsTextContent,
   CsTiles,