@cumulus-ui/components 0.5.0 → 0.5.1

package/dist/index.js

@@ -64,8 +64,8 @@ function FormAssociatedMixin(superClass) {
       this._defaultValue = this.value;
     }
     // ── Public API (thin wrappers around ElementInternals) ────────────
-    setFormValue(value, state23) {
-      this._internals.setFormValue(value, state23);
+    setFormValue(value, state27) {
+      this._internals.setFormValue(value, state27);
     }
     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(state23, _mode) {
-      if (typeof state23 === "string") {
-        this.value = state23;
+    formStateRestoreCallback(state27, _mode) {
+      if (typeof state27 === "string") {
+        this.value = state27;
       }
     }
   }
@@ -6119,7 +6119,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   }
   return coords;
 }
-async function detectOverflow(state23, options) {
+async function detectOverflow(state27, options) {
   var _await$platform$isEle;
   if (options === void 0) {
     options = {};
@@ -6131,14 +6131,14 @@ async function detectOverflow(state23, options) {
     rects,
     elements,
     strategy
-  } = state23;
+  } = state27;
   const {
     boundary = "clippingAncestors",
     rootBoundary = "viewport",
     elementContext = "floating",
     altBoundary = false,
     padding = 0
-  } = evaluate(options, state23);
+  } = evaluate(options, state27);
   const paddingObject = getPaddingObject(padding);
   const altContext = elementContext === "floating" ? "reference" : "floating";
   const element = elements[altBoundary ? altContext : elementContext];
@@ -6270,7 +6270,7 @@ var flip = function(options) {
   return {
     name: "flip",
     options,
-    async fn(state23) {
+    async fn(state27) {
       var _middlewareData$arrow, _middlewareData$flip;
       const {
         placement,
@@ -6279,7 +6279,7 @@ var flip = function(options) {
         initialPlacement,
         platform: platform2,
         elements
-      } = state23;
+      } = state27;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true,
@@ -6288,7 +6288,7 @@ var flip = function(options) {
         fallbackAxisSideDirection = "none",
         flipAlignment = true,
         ...detectOverflowOptions
-      } = evaluate(options, state23);
+      } = evaluate(options, state27);
       if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -6302,7 +6302,7 @@ var flip = function(options) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements2 = [initialPlacement, ...fallbackPlacements];
-      const overflow = await platform2.detectOverflow(state23, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state27, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -6373,19 +6373,19 @@ var flip = function(options) {
   };
 };
 var originSides = /* @__PURE__ */ new Set(["left", "top"]);
-async function convertValueToCoords(state23, options) {
+async function convertValueToCoords(state27, options) {
   const {
     placement,
     platform: platform2,
     elements
-  } = state23;
+  } = state27;
   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, state23);
+  const rawValue = evaluate(options, state27);
   let {
     mainAxis,
     crossAxis,
@@ -6417,15 +6417,15 @@ var offset = function(options) {
   return {
     name: "offset",
     options,
-    async fn(state23) {
+    async fn(state27) {
       var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
         y,
         placement,
         middlewareData
-      } = state23;
-      const diffCoords = await convertValueToCoords(state23, options);
+      } = state27;
+      const diffCoords = await convertValueToCoords(state27, options);
       if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -6447,13 +6447,13 @@ var shift = function(options) {
   return {
     name: "shift",
     options,
-    async fn(state23) {
+    async fn(state27) {
       const {
         x,
         y,
         placement,
         platform: platform2
-      } = state23;
+      } = state27;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = false,
@@ -6470,12 +6470,12 @@ var shift = function(options) {
           }
         },
         ...detectOverflowOptions
-      } = evaluate(options, state23);
+      } = evaluate(options, state27);
       const coords = {
         x,
         y
       };
-      const overflow = await platform2.detectOverflow(state23, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state27, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -6495,7 +6495,7 @@ var shift = function(options) {
         crossAxisCoord = clamp(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
-        ...state23,
+        ...state27,
         [mainAxis]: mainAxisCoord,
         [crossAxis]: crossAxisCoord
       });
@@ -6586,8 +6586,8 @@ var containRe = /paint|layout|strict|content/;
 var isNotNone = (value) => !!value && value !== "none";
 var isWebKitValue;
 function isContainingBlock(elementOrCss) {
-  const css153 = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
-  return isNotNone(css153.transform) || isNotNone(css153.translate) || isNotNone(css153.scale) || isNotNone(css153.rotate) || isNotNone(css153.perspective) || !isWebKit() && (isNotNone(css153.backdropFilter) || isNotNone(css153.filter)) || willChangeRe.test(css153.willChange || "") || containRe.test(css153.contain || "");
+  const css180 = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
+  return isNotNone(css180.transform) || isNotNone(css180.translate) || isNotNone(css180.scale) || isNotNone(css180.rotate) || isNotNone(css180.perspective) || !isWebKit() && (isNotNone(css180.backdropFilter) || isNotNone(css180.filter)) || willChangeRe.test(css180.willChange || "") || containRe.test(css180.contain || "");
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -6672,9 +6672,9 @@ function getFrameElement(win) {
 
 // node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
 function getCssDimensions(element) {
-  const css153 = getComputedStyle2(element);
-  let width = parseFloat(css153.width) || 0;
-  let height = parseFloat(css153.height) || 0;
+  const css180 = getComputedStyle2(element);
+  let width = parseFloat(css180.width) || 0;
+  let height = parseFloat(css180.height) || 0;
   const hasOffset = isHTMLElement(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
@@ -6768,9 +6768,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css153 = getComputedStyle2(currentIFrame);
-      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css153.paddingLeft)) * iframeScale.x;
-      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css153.paddingTop)) * iframeScale.y;
+      const css180 = getComputedStyle2(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css180.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css180.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
@@ -6847,15 +6847,15 @@ function getClientRects(element) {
   return Array.from(element.getClientRects());
 }
 function getDocumentRect(element) {
-  const html73 = getDocumentElement(element);
+  const html82 = getDocumentElement(element);
   const scroll = getNodeScroll(element);
   const body = element.ownerDocument.body;
-  const width = max(html73.scrollWidth, html73.clientWidth, body.scrollWidth, body.clientWidth);
-  const height = max(html73.scrollHeight, html73.clientHeight, body.scrollHeight, body.clientHeight);
+  const width = max(html82.scrollWidth, html82.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html82.scrollHeight, html82.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
   if (getComputedStyle2(body).direction === "rtl") {
-    x += max(html73.clientWidth, body.clientWidth) - width;
+    x += max(html82.clientWidth, body.clientWidth) - width;
   }
   return {
     width,
@@ -6867,10 +6867,10 @@ function getDocumentRect(element) {
 var SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
-  const html73 = getDocumentElement(element);
+  const html82 = getDocumentElement(element);
   const visualViewport = win.visualViewport;
-  let width = html73.clientWidth;
-  let height = html73.clientHeight;
+  let width = html82.clientWidth;
+  let height = html82.clientHeight;
   let x = 0;
   let y = 0;
   if (visualViewport) {
@@ -6882,13 +6882,13 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
-  const windowScrollbarX = getWindowScrollBarX(html73);
+  const windowScrollbarX = getWindowScrollBarX(html82);
   if (windowScrollbarX <= 0) {
-    const doc = html73.ownerDocument;
+    const doc = html82.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(html73.clientWidth - body.clientWidth - bodyMarginInline);
+    const clippingStableScrollbarWidth = Math.abs(html82.clientWidth - body.clientWidth - bodyMarginInline);
     if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
       width -= clippingStableScrollbarWidth;
     }
@@ -26503,10 +26503,2869 @@ __decorateClass([
 var CsAnnotationContext = class extends CsAnnotationContextInternal {
 };
 customElements.define("cs-annotation-context", CsAnnotationContext);
+
+// src/textarea/internal.ts
+import { css as css154, html as html73 } from "lit";
+import { property as property72 } from "lit/decorators.js";
+import { classMap as classMap59 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined36 } from "lit/directives/if-defined.js";
+import { consume as consume5 } from "@lit/context";
+
+// src/textarea/styles.ts
+import { css as css153 } from "lit";
+var componentStyles69 = css153`
+.root {
+  /* used for test-utils */
+}
+
+.textarea {
+  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;
+  resize: auto;
+  cursor: text;
+  white-space: pre-wrap;
+  padding-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  padding-inline: var(--space-field-horizontal-0aq2ch, 12px);
+  color: var(--awsui-style-color-default-6b9ypa, var(--color-text-body-default-vvtq8u, #0f141a));
+  max-inline-size: 100%;
+  inline-size: 100%;
+  display: block;
+  box-sizing: border-box;
+  background-color: var(--awsui-style-background-default-6b9ypa, var(--color-background-input-default-ifz5bb, #ffffff));
+  border-start-start-radius: var(--border-radius-input-7q0str, 8px);
+  border-start-end-radius: var(--border-radius-input-7q0str, 8px);
+  border-end-start-radius: var(--border-radius-input-7q0str, 8px);
+  border-end-end-radius: var(--border-radius-input-7q0str, 8px);
+  border-block: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-default-6b9ypa, var(--color-border-input-default-317xk5, #8c8c94));
+  border-inline: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-default-6b9ypa, var(--color-border-input-default-317xk5, #8c8c94));
+  box-shadow: var(--awsui-style-box-shadow-default-6b9ypa);
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+}
+.textarea:hover {
+  border-color: var(--awsui-style-border-color-hover-6b9ypa, var(--awsui-style-border-color-default-6b9ypa, var(--color-border-input-default-317xk5, #8c8c94)));
+  color: var(--awsui-style-color-hover-6b9ypa, var(--awsui-style-border-color-default-6b9ypa, var(--color-text-body-default-vvtq8u, #0f141a)));
+  background-color: var(--awsui-style-background-hover-6b9ypa, var(--awsui-style-background-default-6b9ypa, var(--color-background-input-default-ifz5bb, #ffffff)));
+  box-shadow: var(--awsui-style-box-shadow-hover-6b9ypa, --awsui-style-box-shadow-default-6b9ypa);
+}
+.textarea.textarea-readonly {
+  background-color: var(--awsui-style-background-readonly-6b9ypa, var(--awsui-style-background-default-6b9ypa, var(--color-background-input-default-ifz5bb, #ffffff)));
+  border-block: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-readonly-6b9ypa, var(--awsui-style-border-color-default-6b9ypa, var(--color-border-input-disabled-zgnzvk, #ebebf0)));
+  border-inline: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-readonly-6b9ypa, var(--awsui-style-border-color-default-6b9ypa, var(--color-border-input-disabled-zgnzvk, #ebebf0)));
+  color: var(--awsui-style-color-readonly-6b9ypa, var(--awsui-style-color-default-6b9ypa, var(--color-text-body-default-vvtq8u, #0f141a)));
+  box-shadow: var(--awsui-style-box-shadow-readonly-6b9ypa);
+}
+.textarea::placeholder {
+  color: var(--awsui-style-placeholder-color-6b9ypa, var(--color-text-input-placeholder-dclg8u, #656871));
+  font-size: var(--awsui-style-placeholder-font-size-6b9ypa);
+  font-style: var(--awsui-style-placeholder-font-style-6b9ypa, italic);
+  font-weight: var(--awsui-style-placeholder-font-weight-6b9ypa);
+  opacity: 1;
+}
+.textarea:focus {
+  outline: 2px dotted transparent;
+  border-block: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-focus-6b9ypa, var(--color-border-input-focused-4z0pgn, #006ce0));
+  border-inline: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-focus-6b9ypa, var(--color-border-input-focused-4z0pgn, #006ce0));
+  border-start-start-radius: var(--border-radius-input-7q0str, 8px);
+  border-start-end-radius: var(--border-radius-input-7q0str, 8px);
+  border-end-start-radius: var(--border-radius-input-7q0str, 8px);
+  border-end-end-radius: var(--border-radius-input-7q0str, 8px);
+  box-shadow: var(--awsui-style-box-shadow-focus-6b9ypa, 0 0 0 var(--border-control-focus-ring-shadow-spread-9mjajk, 1px) var(--color-border-item-focused-uk47pl, #006ce0));
+  color: var(--awsui-style-color-focus-6b9ypa, var(--color-text-body-default-vvtq8u, #0f141a));
+  background-color: var(--awsui-style-background-focus-6b9ypa, var(--color-background-input-default-ifz5bb, #ffffff));
+}
+.textarea:invalid {
+  box-shadow: none;
+}
+.textarea:disabled {
+  background-color: var(--awsui-style-background-disabled-6b9ypa, var(--color-background-input-disabled-dihaja, #ebebf0));
+  border-block: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-disabled-6b9ypa, var(--color-border-input-disabled-zgnzvk, #ebebf0));
+  border-inline: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-disabled-6b9ypa, var(--color-border-input-disabled-zgnzvk, #ebebf0));
+  color: var(--awsui-style-color-disabled-6b9ypa, var(--color-text-input-disabled-wh1f3y, #b4b4bb));
+  cursor: default;
+  box-shadow: var(--awsui-style-box-shadow-disabled-6b9ypa);
+}
+.textarea:disabled::placeholder {
+  color: var(--color-text-input-placeholder-disabled-wg87og, #b4b4bb);
+  opacity: 1;
+}
+.textarea.textarea-invalid {
+  color: var(--awsui-style-color-default-6b9ypa, var(--color-text-status-error-ksqavh, #db0000));
+  border-color: var(--awsui-style-border-color-default-6b9ypa, var(--color-text-status-error-ksqavh, #db0000));
+  padding-inline-start: calc(var(--space-field-horizontal-0aq2ch, 12px) - (var(--border-invalid-width-3xd6e1, 8px) - var(--border-width-field-2xc78x, 1px)));
+  border-inline-start-width: var(--border-invalid-width-3xd6e1, 8px);
+}
+.textarea.textarea-invalid:focus {
+  box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-9jjf96, 2px) var(--color-border-item-focused-uk47pl, #006ce0);
+}
+.textarea.textarea-warning {
+  color: var(--awsui-style-color-default-6b9ypa, var(--color-text-status-warning-6meo06, #855900));
+  border-color: var(--awsui-style-border-color-default-6b9ypa, var(--color-text-status-warning-6meo06, #855900));
+  padding-inline-start: calc(var(--space-field-horizontal-0aq2ch, 12px) - (var(--border-invalid-width-3xd6e1, 8px) - var(--border-width-field-2xc78x, 1px)));
+  border-inline-start-width: var(--border-invalid-width-3xd6e1, 8px);
+}
+.textarea.textarea-warning:focus {
+  box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-9jjf96, 2px) var(--color-border-item-focused-uk47pl, #006ce0);
+}
+`;
+
+// src/textarea/internal.ts
+var Base13 = FormAssociatedMixin(CsBaseElement);
+var hostStyles71 = css154`:host { display: block; }`;
+var CsTextareaInternal = class extends Base13 {
+  constructor() {
+    super(...arguments);
+    this._formFieldCtx = defaultFormFieldContext;
+    this.value = "";
+    this.placeholder = "";
+    this.readOnly = false;
+    this.invalid = false;
+    this.warning = false;
+    this.rows = 3;
+    this.autoFocus = false;
+    this.ariaLabel = null;
+    this.ariaDescribedby = null;
+    this._onInput = (e) => {
+      const target = e.target;
+      this.value = target.value;
+      const detail = { value: this.value };
+      fireNonCancelableEvent(this, "change", detail);
+    };
+    this._onBlur = () => {
+      fireNonCancelableEvent(this, "blur", null);
+    };
+    this._onFocus = () => {
+      fireNonCancelableEvent(this, "focus", null);
+    };
+    this._onKeyDown = (e) => {
+      const detail = {
+        keyCode: e.keyCode,
+        key: e.key,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey,
+        metaKey: e.metaKey,
+        isComposing: e.isComposing
+      };
+      fireNonCancelableEvent(this, "keydown", detail);
+    };
+    this._onKeyUp = (e) => {
+      const detail = {
+        keyCode: e.keyCode,
+        key: e.key,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey,
+        metaKey: e.metaKey,
+        isComposing: e.isComposing
+      };
+      fireNonCancelableEvent(this, "keyup", detail);
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles69, hostStyles71];
+  }
+  focus(options) {
+    this._getTextarea()?.focus(options);
+  }
+  _getTextarea() {
+    return this.shadowRoot?.querySelector("textarea");
+  }
+  get _isInvalid() {
+    return this.invalid || this._formFieldCtx.invalid;
+  }
+  get _isWarning() {
+    return (this.warning || this._formFieldCtx.warning) && !this._isInvalid;
+  }
+  get _resolvedAriaDescribedby() {
+    const parts = [];
+    if (this.ariaDescribedby) parts.push(this.ariaDescribedby);
+    if (this._formFieldCtx.ariaDescribedby) parts.push(this._formFieldCtx.ariaDescribedby);
+    return parts.length ? parts.join(" ") : void 0;
+  }
+  render() {
+    const textareaClasses = {
+      "textarea": true,
+      "textarea-readonly": this.readOnly,
+      "textarea-invalid": this._isInvalid,
+      "textarea-warning": this._isWarning
+    };
+    const controlId = this._formFieldCtx.controlId || void 0;
+    const ariaLabelledby = this._formFieldCtx.ariaLabelledby || void 0;
+    return html73`
+      <div class="root">
+        <textarea
+          class=${classMap59(textareaClasses)}
+          .value=${this.value}
+          placeholder=${ifDefined36(this.placeholder || void 0)}
+          rows=${this.rows}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readOnly}
+          ?autofocus=${this.autoFocus}
+          id=${ifDefined36(controlId)}
+          aria-label=${ifDefined36(this.ariaLabel || void 0)}
+          aria-labelledby=${ifDefined36(!this.ariaLabel ? ariaLabelledby : void 0)}
+          aria-describedby=${ifDefined36(this._resolvedAriaDescribedby)}
+          aria-invalid=${ifDefined36(this._isInvalid ? "true" : void 0)}
+          @input=${this._onInput}
+          @blur=${this._onBlur}
+          @focus=${this._onFocus}
+          @keydown=${this._onKeyDown}
+          @keyup=${this._onKeyUp}
+        ></textarea>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  consume5({ context: formFieldContext, subscribe: true })
+], CsTextareaInternal.prototype, "_formFieldCtx", 2);
+__decorateClass([
+  property72({ type: String })
+], CsTextareaInternal.prototype, "value", 2);
+__decorateClass([
+  property72({ type: String })
+], CsTextareaInternal.prototype, "placeholder", 2);
+__decorateClass([
+  property72({ type: Boolean, reflect: true })
+], CsTextareaInternal.prototype, "readOnly", 2);
+__decorateClass([
+  property72({ type: Boolean, reflect: true })
+], CsTextareaInternal.prototype, "invalid", 2);
+__decorateClass([
+  property72({ type: Boolean, reflect: true })
+], CsTextareaInternal.prototype, "warning", 2);
+__decorateClass([
+  property72({ type: Number })
+], CsTextareaInternal.prototype, "rows", 2);
+__decorateClass([
+  property72({ type: Boolean })
+], CsTextareaInternal.prototype, "autoFocus", 2);
+__decorateClass([
+  property72({ type: String })
+], CsTextareaInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property72({ type: String })
+], CsTextareaInternal.prototype, "ariaDescribedby", 2);
+
+// src/textarea/index.ts
+var CsTextarea = class extends CsTextareaInternal {
+};
+customElements.define("cs-textarea", CsTextarea);
+
+// src/text-filter/internal.ts
+import { css as css156, html as html74, nothing as nothing41 } from "lit";
+import { property as property73 } from "lit/decorators.js";
+
+// src/text-filter/styles.ts
+import { css as css155 } from "lit";
+var componentStyles70 = css155`
+.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;
+  display: flex;
+  align-items: center;
+  max-inline-size: calc(688px - 2 * var(--space-l-2ud1p3, 20px));
+}
+
+.input {
+  flex: 1;
+}
+
+.results {
+  color: var(--color-text-form-label-6sbm75, #0f141a);
+  display: inline-block;
+  box-sizing: border-box;
+  white-space: nowrap;
+  padding-inline-start: var(--space-s-tvghoh, 12px);
+}
+`;
+
+// src/text-filter/internal.ts
+var hostStyles72 = css156`:host { display: block; }`;
+var CsTextFilterInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.filteringText = "";
+    this.filteringPlaceholder = "";
+    this.filteringAriaLabel = "";
+    this.filteringClearAriaLabel = "";
+    this.countText = "";
+    this.disabled = false;
+    this._debounceTimer = null;
+    this._onInputChange = (e) => {
+      e.stopPropagation();
+      const detail = e.detail;
+      this.filteringText = detail.value;
+      const changeDetail = { filteringText: this.filteringText };
+      fireNonCancelableEvent(this, "change", changeDetail);
+      this._clearDebounce();
+      this._debounceTimer = setTimeout(() => {
+        const delayedDetail = { filteringText: this.filteringText };
+        fireNonCancelableEvent(this, "delayedChange", delayedDetail);
+      }, 400);
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles70, hostStyles72];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._clearDebounce();
+  }
+  focus(options) {
+    const input = this.shadowRoot?.querySelector("cs-input");
+    if (input) {
+      input.focus(options);
+    }
+  }
+  _clearDebounce() {
+    if (this._debounceTimer !== null) {
+      clearTimeout(this._debounceTimer);
+      this._debounceTimer = null;
+    }
+  }
+  render() {
+    const showResults = this.filteringText.length > 0 && !!this.countText;
+    return html74`
+      <div class="root">
+        <div class="input">
+          <cs-input
+            type="search"
+            .value=${this.filteringText}
+            placeholder=${this.filteringPlaceholder}
+            ?disabled=${this.disabled}
+            aria-label=${this.filteringAriaLabel || "Filter"}
+            clear-aria-label=${this.filteringClearAriaLabel || "Clear filter"}
+            @change=${this._onInputChange}
+          ></cs-input>
+        </div>
+        ${showResults ? html74`<span class="results">${this.countText}</span>` : nothing41}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property73({ type: String })
+], CsTextFilterInternal.prototype, "filteringText", 2);
+__decorateClass([
+  property73({ type: String })
+], CsTextFilterInternal.prototype, "filteringPlaceholder", 2);
+__decorateClass([
+  property73({ type: String })
+], CsTextFilterInternal.prototype, "filteringAriaLabel", 2);
+__decorateClass([
+  property73({ type: String })
+], CsTextFilterInternal.prototype, "filteringClearAriaLabel", 2);
+__decorateClass([
+  property73({ type: String })
+], CsTextFilterInternal.prototype, "countText", 2);
+__decorateClass([
+  property73({ type: Boolean, reflect: true })
+], CsTextFilterInternal.prototype, "disabled", 2);
+
+// src/text-filter/index.ts
+var CsTextFilter = class extends CsTextFilterInternal {
+};
+customElements.define("cs-text-filter", CsTextFilter);
+
+// src/time-input/internal.ts
+import { css as css158, html as html75 } from "lit";
+import { property as property74 } from "lit/decorators.js";
+import { classMap as classMap60 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined37 } from "lit/directives/if-defined.js";
+import { consume as consume6 } from "@lit/context";
+
+// src/time-input/styles.ts
+import { css as css157 } from "lit";
+var componentStyles71 = css157`
+
+`;
+
+// src/time-input/internal.ts
+var Base14 = FormAssociatedMixin(CsBaseElement);
+var hostStyles73 = css158`:host { display: block; }`;
+var CsTimeInputInternal = class extends Base14 {
+  constructor() {
+    super(...arguments);
+    this._formFieldCtx = defaultFormFieldContext;
+    this.value = "";
+    this.format = "hh:mm";
+    this.placeholder = "";
+    this.readOnly = false;
+    this.invalid = false;
+    this.warning = false;
+    this.autoFocus = false;
+    this.ariaLabel = null;
+    this.ariaDescribedby = null;
+    this._onInput = (e) => {
+      const target = e.target;
+      this.value = target.value;
+      const detail = { value: this.value };
+      fireNonCancelableEvent(this, "change", detail);
+    };
+    this._onBlur = () => {
+      fireNonCancelableEvent(this, "blur", null);
+    };
+    this._onFocus = () => {
+      fireNonCancelableEvent(this, "focus", null);
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles44, componentStyles71, hostStyles73];
+  }
+  focus(options) {
+    this.shadowRoot?.querySelector("input")?.focus(options);
+  }
+  get _isInvalid() {
+    return this.invalid || this._formFieldCtx.invalid;
+  }
+  get _isWarning() {
+    return (this.warning || this._formFieldCtx.warning) && !this._isInvalid;
+  }
+  get _resolvedAriaDescribedby() {
+    const parts = [];
+    if (this.ariaDescribedby) parts.push(this.ariaDescribedby);
+    if (this._formFieldCtx.ariaDescribedby) parts.push(this._formFieldCtx.ariaDescribedby);
+    return parts.length ? parts.join(" ") : void 0;
+  }
+  get _resolvedPlaceholder() {
+    return this.placeholder || this.format;
+  }
+  render() {
+    const inputClasses = {
+      "input": true,
+      "input-readonly": this.readOnly,
+      "input-invalid": this._isInvalid,
+      "input-warning": this._isWarning
+    };
+    const controlId = this._formFieldCtx.controlId || void 0;
+    const ariaLabelledby = this._formFieldCtx.ariaLabelledby || void 0;
+    return html75`
+      <div class="root">
+        <div class="input-container">
+          <input
+            class=${classMap60(inputClasses)}
+            type="text"
+            .value=${this.value}
+            placeholder=${this._resolvedPlaceholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readOnly}
+            ?autofocus=${this.autoFocus}
+            id=${ifDefined37(controlId)}
+            aria-label=${ifDefined37(this.ariaLabel || void 0)}
+            aria-labelledby=${ifDefined37(!this.ariaLabel ? ariaLabelledby : void 0)}
+            aria-describedby=${ifDefined37(this._resolvedAriaDescribedby)}
+            aria-invalid=${ifDefined37(this._isInvalid ? "true" : void 0)}
+            @input=${this._onInput}
+            @blur=${this._onBlur}
+            @focus=${this._onFocus}
+          />
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  consume6({ context: formFieldContext, subscribe: true })
+], CsTimeInputInternal.prototype, "_formFieldCtx", 2);
+__decorateClass([
+  property74({ type: String })
+], CsTimeInputInternal.prototype, "value", 2);
+__decorateClass([
+  property74({ type: String })
+], CsTimeInputInternal.prototype, "format", 2);
+__decorateClass([
+  property74({ type: String })
+], CsTimeInputInternal.prototype, "placeholder", 2);
+__decorateClass([
+  property74({ type: Boolean, reflect: true })
+], CsTimeInputInternal.prototype, "readOnly", 2);
+__decorateClass([
+  property74({ type: Boolean, reflect: true })
+], CsTimeInputInternal.prototype, "invalid", 2);
+__decorateClass([
+  property74({ type: Boolean, reflect: true })
+], CsTimeInputInternal.prototype, "warning", 2);
+__decorateClass([
+  property74({ type: Boolean })
+], CsTimeInputInternal.prototype, "autoFocus", 2);
+__decorateClass([
+  property74({ type: String })
+], CsTimeInputInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property74({ type: String })
+], CsTimeInputInternal.prototype, "ariaDescribedby", 2);
+
+// src/time-input/index.ts
+var CsTimeInput = class extends CsTimeInputInternal {
+};
+customElements.define("cs-time-input", CsTimeInput);
+
+// src/hotspot/internal.ts
+import { css as css160, html as html76, nothing as nothing42 } from "lit";
+import { property as property75, state as state23 } from "lit/decorators.js";
+import { classMap as classMap61 } from "lit/directives/class-map.js";
+import { consume as consume7 } from "@lit/context";
+
+// src/hotspot/styles.ts
+import { css as css159 } from "lit";
+var componentStyles72 = css159`
+.wrapper {
+  position: relative;
+}
+
+.elementWrapper {
+  flex: 1;
+}
+
+.markerWrapper {
+  position: absolute;
+  inset-block-start: 0;
+}
+
+.placement-right {
+  inset-inline-start: 100%;
+  margin-inline-start: var(--space-xxs-hwfkai, 4px);
+}
+
+.placement-left {
+  inset-inline-end: 100%;
+  margin-inline-end: var(--space-xxs-hwfkai, 4px);
+}
+
+.inlineWrapper {
+  margin-inline: var(--space-xxs-hwfkai, 4px);
+}
+`;
+
+// src/hotspot/internal.ts
+var hostStyles74 = css160`:host { display: inline-block; }`;
+var CsHotspotInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.hotspotId = "";
+    this.side = "right";
+    this.direction = "top";
+    this._popoverOpen = false;
+    this._onHotspotClick = () => {
+      if (this._isActive) {
+        this._popoverOpen = !this._popoverOpen;
+      }
+    };
+    this._onDismiss = () => {
+      this._popoverOpen = false;
+      this._annotationCtx?.onDismiss();
+    };
+    this._onNext = () => {
+      const ctx = this._annotationCtx;
+      if (!ctx) return;
+      this._popoverOpen = false;
+      ctx.onStepChange({ step: ctx.currentStepIndex + 1, reason: "next" });
+    };
+    this._onPrevious = () => {
+      const ctx = this._annotationCtx;
+      if (!ctx) return;
+      this._popoverOpen = false;
+      ctx.onStepChange({ step: ctx.currentStepIndex - 1, reason: "previous" });
+    };
+    this._onFinish = () => {
+      this._popoverOpen = false;
+      this._annotationCtx?.onDismiss();
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles72, hostStyles74];
+  }
+  get _isActive() {
+    const ctx = this._annotationCtx;
+    if (!ctx?.currentTutorial) return false;
+    let stepIndex = 0;
+    for (const task of ctx.currentTutorial.tasks) {
+      for (const step of task.steps) {
+        if (stepIndex === ctx.currentStepIndex && step.hotspotId === this.hotspotId) {
+          return true;
+        }
+        stepIndex++;
+      }
+    }
+    return false;
+  }
+  get _currentStep() {
+    const ctx = this._annotationCtx;
+    if (!ctx?.currentTutorial) return null;
+    let stepIndex = 0;
+    for (const task of ctx.currentTutorial.tasks) {
+      for (const step of task.steps) {
+        if (stepIndex === ctx.currentStepIndex && step.hotspotId === this.hotspotId) {
+          return { step, globalIndex: stepIndex };
+        }
+        stepIndex++;
+      }
+    }
+    return null;
+  }
+  render() {
+    const isActive = this._isActive;
+    const ctx = this._annotationCtx;
+    const placementClass = this.side === "left" ? "placement-left" : "placement-right";
+    const hotspotButton = isActive ? html76`
+      <div class="${classMap61({ markerWrapper: true, [placementClass]: true })}">
+        <cs-button
+          variant="icon"
+          icon-name="status-info"
+          aria-label=${ctx?.i18nStrings?.labelHotspot(this._popoverOpen, ctx.currentStepIndex, ctx.totalSteps) ?? "Hotspot"}
+          aria-expanded=${this._popoverOpen}
+          @click=${this._onHotspotClick}
+        ></cs-button>
+      </div>
+    ` : nothing42;
+    const currentStep = this._currentStep;
+    const popoverContent = this._popoverOpen && isActive && currentStep && ctx ? html76`
+      <div class="annotation-popover" role="dialog" aria-label="Annotation">
+        <div class="annotation-header">
+          <span class="annotation-step-counter">
+            ${ctx.i18nStrings.stepCounterText(currentStep.globalIndex + 1, ctx.totalSteps)}
+          </span>
+          <cs-button
+            variant="icon"
+            icon-name="close"
+            aria-label=${ctx.i18nStrings.labelDismissAnnotation}
+            @click=${this._onDismiss}
+          ></cs-button>
+        </div>
+        <div class="annotation-content">${currentStep.step.content}</div>
+        <div class="annotation-actions">
+          ${currentStep.globalIndex > 0 ? html76`
+            <cs-button variant="link" @click=${this._onPrevious}>
+              ${ctx.i18nStrings.previousButtonText}
+            </cs-button>
+          ` : nothing42}
+          ${currentStep.globalIndex < ctx.totalSteps - 1 ? html76`
+            <cs-button variant="primary" @click=${this._onNext}>
+              ${ctx.i18nStrings.nextButtonText}
+            </cs-button>
+          ` : html76`
+            <cs-button variant="primary" @click=${this._onFinish}>
+              ${ctx.i18nStrings.finishButtonText}
+            </cs-button>
+          `}
+        </div>
+      </div>
+    ` : nothing42;
+    return html76`
+      <div class="wrapper">
+        <div class="elementWrapper">
+          <slot></slot>
+        </div>
+        ${hotspotButton}
+        ${popoverContent}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property75({ type: String })
+], CsHotspotInternal.prototype, "hotspotId", 2);
+__decorateClass([
+  property75({ type: String })
+], CsHotspotInternal.prototype, "side", 2);
+__decorateClass([
+  property75({ type: String })
+], CsHotspotInternal.prototype, "direction", 2);
+__decorateClass([
+  consume7({ context: annotationContext, subscribe: true })
+], CsHotspotInternal.prototype, "_annotationCtx", 2);
+__decorateClass([
+  state23()
+], CsHotspotInternal.prototype, "_popoverOpen", 2);
+
+// src/hotspot/index.ts
+var CsHotspot = class extends CsHotspotInternal {
+};
+customElements.define("cs-hotspot", CsHotspot);
+
+// src/tutorial-panel/internal.ts
+import { css as css162, html as html77, nothing as nothing43 } from "lit";
+import { property as property76, state as state24 } from "lit/decorators.js";
+import { classMap as classMap62 } from "lit/directives/class-map.js";
+
+// src/tutorial-panel/styles.ts
+import { css as css161 } from "lit";
+var componentStyles73 = css161`
+.tutorial-panel {
+  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;
+  padding-block-start: 0;
+  padding-block-end: var(--space-m-dsumyt, 16px);
+  padding-inline: var(--space-l-2ud1p3, 20px);
+}
+.tutorial-panel:focus {
+  outline: none;
+}
+:host-context([data-awsui-focus-visible=true]) .tutorial-panel:focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .tutorial-panel:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(0px - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .tutorial-panel:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * 0px);
+  inset-block-start: calc(-1 * 0px);
+  inline-size: calc(100% + 0px + 0px);
+  block-size: calc(100% + 0px + 0px);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+}
+`;
+
+// src/tutorial-panel/internal.ts
+var hostStyles75 = css162`:host { display: block; }`;
+var CsTutorialPanelInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.tutorials = [];
+    this.loading = false;
+    this._viewState = "list";
+    this._activeTutorial = null;
+    this._onDismissTutorial = () => {
+      const tutorial = this._activeTutorial;
+      this._activeTutorial = null;
+      this._viewState = "list";
+      if (tutorial) {
+        fireNonCancelableEvent(this, "feedbackClick", { tutorial });
+      }
+    };
+    this._onCompleteTutorial = () => {
+      this._viewState = "completed";
+    };
+    this._onBackToList = () => {
+      this._activeTutorial = null;
+      this._viewState = "list";
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles73, hostStyles75];
+  }
+  _onStartTutorial(tutorial) {
+    this._activeTutorial = tutorial;
+    this._viewState = "detail";
+    fireNonCancelableEvent(this, "feedbackClick", { tutorial });
+  }
+  _renderLoading() {
+    return html77`
+      <div class="tutorial-panel" role="region" aria-label="${this.i18nStrings.loadingText}">
+        <div class="loading-state">
+          <cs-spinner size="normal"></cs-spinner>
+          <span>${this.i18nStrings.loadingText}</span>
+        </div>
+      </div>
+    `;
+  }
+  _renderTutorialList() {
+    return html77`
+      <div class="tutorial-panel" role="region" aria-label="${this.i18nStrings.tutorialListTitle}" tabindex="-1">
+        <h2 class="tutorial-list-title">${this.i18nStrings.tutorialListTitle}</h2>
+        <div class="tutorial-list-description">${this.i18nStrings.tutorialListDescription}</div>
+
+        ${this.downloadUrl ? html77`
+          <div class="download-link">
+            <cs-link href=${this.downloadUrl} external
+              aria-label=${this.i18nStrings.labelTutorialListDownloadLink ?? this.i18nStrings.tutorialListDownloadLinkText}>
+              ${this.i18nStrings.tutorialListDownloadLinkText}
+            </cs-link>
+          </div>
+        ` : nothing43}
+
+        <ul class="tutorial-list" role="list">
+          ${this.tutorials.map((tutorial) => this._renderTutorialItem(tutorial))}
+        </ul>
+        <slot></slot>
+      </div>
+    `;
+  }
+  _renderTutorialItem(tutorial) {
+    const totalSteps = tutorial.tasks.reduce((acc, task) => acc + task.steps.length, 0);
+    const isCompleted = tutorial.completed;
+    const isDisabled = tutorial.prerequisitesNeeded === true;
+    return html77`
+      <li class=${classMap62({ "tutorial-item": true, "tutorial-completed": isCompleted })}>
+        <div class="tutorial-title">${tutorial.title}</div>
+
+        ${isCompleted ? html77`
+          <cs-status-indicator type="success">
+            ${this.i18nStrings.tutorialCompletedText}
+          </cs-status-indicator>
+        ` : nothing43}
+
+        ${isDisabled && tutorial.prerequisitesAlert ? html77`
+          <div class="prerequisites-alert">${tutorial.prerequisitesAlert}</div>
+        ` : nothing43}
+
+        <div class="tutorial-description">${tutorial.description}</div>
+
+        <div class="tutorial-meta">
+          <span>${this.i18nStrings.labelTotalSteps(totalSteps)}</span>
+          ${tutorial.learnMoreUrl ? html77`
+            <cs-link href=${tutorial.learnMoreUrl} external
+              aria-label=${this.i18nStrings.labelLearnMoreLink ?? this.i18nStrings.learnMoreLinkText}>
+              ${this.i18nStrings.learnMoreLinkText}
+            </cs-link>
+          ` : nothing43}
+        </div>
+
+        <cs-button
+          variant="normal"
+          ?disabled=${isDisabled}
+          @click=${() => this._onStartTutorial(tutorial)}
+        >
+          ${isCompleted ? this.i18nStrings.restartTutorialButtonText : this.i18nStrings.startTutorialButtonText}
+        </cs-button>
+      </li>
+    `;
+  }
+  _renderDetailView() {
+    const tutorial = this._activeTutorial;
+    return html77`
+      <div class="tutorial-panel" role="region" aria-label="${tutorial.title}" tabindex="-1">
+        <div class="detail-header">
+          <cs-button
+            variant="icon"
+            icon-name="close"
+            aria-label=${this.i18nStrings.labelExitTutorial}
+            @click=${this._onDismissTutorial}
+          ></cs-button>
+          <h2 class="detail-title">${tutorial.title}</h2>
+        </div>
+
+        <ol class="task-list" role="list">
+          ${tutorial.tasks.map((task, taskIndex) => html77`
+            <li class="task-item">
+              <div class="task-title">
+                ${this.i18nStrings.taskTitle(taskIndex + 1, task.title)}
+              </div>
+              <ul class="step-list" role="list">
+                ${task.steps.map((step, stepIndex) => html77`
+                  <li class="step-item">
+                    ${this.i18nStrings.stepTitle(stepIndex + 1, step.title)}
+                  </li>
+                `)}
+              </ul>
+            </li>
+          `)}
+        </ol>
+
+        <div class="detail-actions">
+          <cs-button variant="link" @click=${this._onDismissTutorial}>
+            ${this.i18nStrings.dismissTutorialButtonText}
+          </cs-button>
+          <cs-button variant="primary" @click=${this._onCompleteTutorial}>
+            ${this.i18nStrings.completionScreenTitle}
+          </cs-button>
+        </div>
+      </div>
+    `;
+  }
+  _renderCompletedView() {
+    const tutorial = this._activeTutorial;
+    return html77`
+      <div class="tutorial-panel" role="region" aria-label="${this.i18nStrings.completionScreenTitle}" tabindex="-1">
+        <div class="completed-screen">
+          <cs-icon name="status-positive" size="big"></cs-icon>
+          <h2>${this.i18nStrings.completionScreenTitle}</h2>
+          ${tutorial ? html77`<p>${tutorial.completedScreenDescription}</p>` : nothing43}
+          <div class="completed-actions">
+            <cs-button variant="primary" @click=${this._onBackToList}>
+              ${this.i18nStrings.dismissTutorialButtonText}
+            </cs-button>
+            ${tutorial ? html77`
+              <cs-button variant="link" @click=${() => fireNonCancelableEvent(this, "feedbackClick", { tutorial })}>
+                ${this.i18nStrings.feedbackLinkText}
+              </cs-button>
+            ` : nothing43}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    if (this.loading) {
+      return this._renderLoading();
+    }
+    switch (this._viewState) {
+      case "detail":
+        return this._renderDetailView();
+      case "completed":
+        return this._renderCompletedView();
+      default:
+        return this._renderTutorialList();
+    }
+  }
+};
+__decorateClass([
+  property76({ attribute: false })
+], CsTutorialPanelInternal.prototype, "tutorials", 2);
+__decorateClass([
+  property76({ type: Boolean })
+], CsTutorialPanelInternal.prototype, "loading", 2);
+__decorateClass([
+  property76({ attribute: false })
+], CsTutorialPanelInternal.prototype, "i18nStrings", 2);
+__decorateClass([
+  property76({ type: String })
+], CsTutorialPanelInternal.prototype, "downloadUrl", 2);
+__decorateClass([
+  state24()
+], CsTutorialPanelInternal.prototype, "_viewState", 2);
+__decorateClass([
+  state24()
+], CsTutorialPanelInternal.prototype, "_activeTutorial", 2);
+
+// src/tutorial-panel/index.ts
+var CsTutorialPanel = class extends CsTutorialPanelInternal {
+};
+customElements.define("cs-tutorial-panel", CsTutorialPanel);
+
+// src/app-layout/internal.ts
+import { css as css173, html as html78, nothing as nothing44 } from "lit";
+import { property as property77 } from "lit/decorators.js";
+import { classMap as classMap63 } from "lit/directives/class-map.js";
+
+// src/app-layout/styles.ts
+import { css as css163 } from "lit";
+var componentStyles74 = css163`
+.root {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+}
+
+.root-no-scroll {
+  position: relative;
+  z-index: 1;
+}
+
+.layout {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: stretch;
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+}
+.layout-no-scroll {
+  overflow: hidden;
+}
+
+.layout-main {
+  flex: 1;
+  min-inline-size: 0;
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  position: relative;
+}
+.layout-main-scrollable {
+  overflow: auto;
+}
+
+.unfocusable * {
+  visibility: hidden;
+}
+
+.breadcrumbs-desktop {
+  padding-block-start: var(--space-scaled-m-m892r9, 16px);
+  padding-block-end: var(--space-scaled-s-8ozaad, 12px);
+}
+
+.content-header-wrapper {
+  padding-block-end: var(--space-content-header-padding-bottom-rvy5xz, 16px);
+}
+
+.content-wrapper {
+  padding-block-end: var(--space-layout-content-bottom-zeb1g9, 40px);
+}
+
+.content-overlapped {
+  margin-block-start: calc(-1 * var(--space-dark-header-overlap-distance-ld45ap, 36px));
+}
+
+.content-extra-top-padding {
+  padding-block-start: var(--space-scaled-m-m892r9, 16px);
+}
+`;
+
+// src/internal/styles/app-layout-content-wrapper.ts
+import { css as css164 } from "lit";
+var appLayoutContentWrapperStyles = css164`
+.app-layout-content-wrapper--content-wrapper {
+  padding-inline-start: var(--space-layout-content-horizontal-buc0zz, 24px);
+  padding-inline-end: var(--space-layout-content-horizontal-buc0zz, 24px);
+}
+.app-layout-content-wrapper--content-wrapper-mobile {
+  padding-inline-start: var(--space-l-2ud1p3, 20px);
+  padding-inline-end: var(--space-l-2ud1p3, 20px);
+}
+
+.app-layout-content-wrapper--content-type-dashboard {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}
+@media (min-width: 1401px) {
+  .app-layout-content-wrapper--content-type-dashboard {
+    max-inline-size: 1280px;
+  }
+}
+@media (min-width: 1921px) {
+  .app-layout-content-wrapper--content-type-dashboard {
+    max-inline-size: 1620px;
+  }
+}
+@media (min-width: 2541px) {
+  .app-layout-content-wrapper--content-type-dashboard {
+    max-inline-size: 2160px;
+  }
+}
+`;
+
+// src/internal/styles/app-layout-drawer.ts
+import { css as css165 } from "lit";
+var appLayoutDrawerStyles = css165`
+.app-layout-drawer--toggle {
+  box-sizing: border-box;
+  padding-block: var(--space-xxs-hwfkai, 4px);
+  padding-inline: 7px;
+}
+
+.app-layout-drawer--drawer-triggers {
+  box-sizing: border-box;
+}
+
+.app-layout-drawer--drawer {
+  flex-shrink: 0;
+  position: relative;
+  word-wrap: break-word;
+  box-shadow: var(--shadow-panel-vk7iea, 0px 0px 0px 1px #b6bec9);
+}
+.app-layout-drawer--drawer:not(.app-layout-drawer--drawer-mobile) {
+  z-index: 830;
+}
+.app-layout-drawer--drawer-closed {
+  min-inline-size: 40px;
+}
+.app-layout-drawer--drawer-closed.app-layout-drawer--drawer-mobile {
+  display: none;
+}
+
+.app-layout-drawer--drawer-content {
+  position: fixed;
+  overflow: auto;
+  background-color: var(--color-background-layout-panel-content-xto15e, #ffffff);
+  display: flex;
+  flex-direction: column;
+}
+.app-layout-drawer--drawer-mobile > .app-layout-drawer--drawer-content {
+  z-index: 1001;
+  inset: 0;
+}
+.app-layout-drawer--drawer-closed > .app-layout-drawer--drawer-content {
+  inline-size: 40px;
+}
+.app-layout-drawer--drawer-closed > .app-layout-drawer--drawer-content.app-layout-drawer--drawer-content-clickable {
+  cursor: pointer;
+  color: var(--color-text-interactive-default-ugh9wp, #424650);
+}
+.app-layout-drawer--drawer-closed > .app-layout-drawer--drawer-content.app-layout-drawer--drawer-content-clickable:hover {
+  background: var(--color-background-layout-panel-hover-tguulw, #ebebf0);
+}
+.app-layout-drawer--drawer-content > [aria-hidden=true] {
+  display: none;
+}
+.app-layout-drawer--drawer-content > .app-layout-drawer--drawer-resize-content {
+  overflow: auto;
+  block-size: 100%;
+  position: relative;
+}
+.app-layout-drawer--drawer-content > .app-layout-drawer--drawer-content-wrapper {
+  flex: 1;
+}
+
+.app-layout-drawer--drawer-triggers-wrapper {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: stretch;
+}
+
+.app-layout-drawer--drawer-trigger {
+  padding-block: var(--space-xxs-hwfkai, 4px);
+  padding-inline: 7px;
+  cursor: pointer;
+  color: var(--color-text-interactive-default-ugh9wp, #424650);
+}
+.app-layout-drawer--drawer-trigger:not(:first-child) {
+  border-block-start: 1px solid var(--color-border-layout-ayg8vb, #c6c6cd);
+}
+.app-layout-drawer--drawer-trigger:hover {
+  color: var(--color-text-layout-toggle-hover-9jwdce, #006ce0);
+}
+.app-layout-drawer--drawer-trigger-active, .app-layout-drawer--drawer-trigger-active:hover {
+  background-color: var(--color-background-layout-toggle-selected-default-izfana, #006ce0);
+  color: var(--color-text-layout-toggle-active-ifu7qp, #ffffff);
+}
+.app-layout-drawer--drawer-content-clickable > .app-layout-drawer--drawer-triggers-wrapper > .app-layout-drawer--drawer-trigger:hover {
+  color: var(--color-text-interactive-default-ugh9wp, #424650);
+}
+
+.app-layout-drawer--resize-handle-wrapper {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+}
+
+.app-layout-drawer--hide {
+  display: none;
+}
+`;
+
+// src/internal/styles/app-layout-mobile-toolbar.ts
+import { css as css166 } from "lit";
+var appLayoutMobileToolbarStyles = css166`
+.app-layout-mobile-toolbar--block-body-scroll {
+  overflow: hidden;
+}
+
+.app-layout-mobile-toolbar--mobile-bar {
+  position: sticky;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  z-index: 1000;
+  inline-size: 100%;
+  box-sizing: border-box;
+  background-color: var(--color-background-layout-mobile-panel-ed0ava, #0f141a);
+  box-shadow: var(--shadow-panel-vk7iea, 0px 0px 0px 1px #b6bec9);
+  block-size: calc(2 * var(--space-m-dsumyt, 16px) + var(--space-scaled-xs-xwoogq, 8px));
+}
+
+.app-layout-mobile-toolbar--mobile-bar-breadcrumbs {
+  min-inline-size: 0;
+  flex: 1;
+  margin-inline-start: var(--space-m-dsumyt, 16px);
+  margin-inline-end: var(--space-m-dsumyt, 16px);
+}
+
+.app-layout-mobile-toolbar--mobile-toggle {
+  box-sizing: border-box;
+  cursor: pointer;
+  z-index: 1;
+  padding-block: var(--space-xxs-hwfkai, 4px);
+  padding-inline: 7px;
+  inline-size: 40px;
+  color: var(--color-text-interactive-default-ugh9wp, #424650);
+}
+.app-layout-mobile-toolbar--mobile-toggle-type-navigation {
+  border-inline-end: 1px solid var(--color-border-layout-ayg8vb, #c6c6cd);
+}
+.app-layout-mobile-toolbar--mobile-toggle-type-tools, .app-layout-mobile-toolbar--mobile-toggle-type-drawer {
+  border-inline-start: 1px solid var(--color-border-layout-ayg8vb, #c6c6cd);
+}
+.app-layout-mobile-toolbar--mobile-toggle:hover {
+  background: var(--color-background-layout-panel-hover-tguulw, #ebebf0);
+}
+
+.app-layout-mobile-toolbar--drawers-container {
+  display: flex;
+  align-items: stretch;
+}
+`;
+
+// src/internal/styles/app-layout-notifications.ts
+import { css as css167 } from "lit";
+var appLayoutNotificationsStyles = css167`
+.app-layout-notifications--notifications,
+.app-layout-notifications--notifications-sticky {
+  z-index: 850;
+}
+
+.app-layout-notifications--notifications {
+  /* This is necessary for the z-index to have effect */
+  position: relative;
+}
+
+.app-layout-notifications--notifications-sticky {
+  inset-block-start: 0;
+  position: sticky;
+  --awsui-flashbar-sticky-bottom-margin-6b9ypa: var(--space-xxl-32srm4, 32px);
+}
+
+.app-layout-notifications--no-content-paddings {
+  /*
+  When using the disableContentPaddings option, the Flashbar will use this custom property to add additional space
+  when the notification bar is rendered, to prevent it from overlapping the content.
+   */
+  --awsui-stacked-notifications-bottom-margin-6b9ypa: var(--space-scaled-l-sej05l, 20px);
+}
+`;
+
+// src/internal/styles/app-layout-resize.ts
+import { css as css168 } from "lit";
+var appLayoutResizeStyles = css168`
+@media (min-width: 689px) {
+  .app-layout-resize--with-motion-vertical {
+    transition: var(--motion-duration-refresh-only-medium-5rbn3k, 165ms);
+    transition-property: border-color, opacity, block-size, inset-block-start, inset-block-end;
+  }
+}
+@media (min-width: 689px) and (prefers-reduced-motion: reduce) {
+  .app-layout-resize--with-motion-vertical {
+    animation: none;
+    transition: none;
+  }
+}
+@media (min-width: 689px) {
+  .awsui-motion-disabled .app-layout-resize--with-motion-vertical, .awsui-mode-entering .app-layout-resize--with-motion-vertical {
+    animation: none;
+    transition: none;
+  }
+}
+
+@media (min-width: 689px) {
+  .app-layout-resize--with-motion-horizontal {
+    transition: var(--motion-duration-refresh-only-medium-5rbn3k, 165ms);
+    transition-property: border-color, opacity, inline-size, inset-inline-start;
+  }
+}
+@media (min-width: 689px) and (prefers-reduced-motion: reduce) {
+  .app-layout-resize--with-motion-horizontal {
+    animation: none;
+    transition: none;
+  }
+}
+@media (min-width: 689px) {
+  .awsui-motion-disabled .app-layout-resize--with-motion-horizontal, .awsui-mode-entering .app-layout-resize--with-motion-horizontal {
+    animation: none;
+    transition: none;
+  }
+}
+
+.app-layout-resize--resize-active * {
+  -webkit-user-select: none;
+          user-select: none;
+}
+.app-layout-resize--resize-active * .app-layout-resize--with-motion-vertical,
+.app-layout-resize--resize-active * .app-layout-resize--with-motion-horizontal {
+  transition: none;
+  animation: none;
+}
+.app-layout-resize--resize-active iframe {
+  pointer-events: none;
+}
+.app-layout-resize--resize-side * {
+  cursor: ew-resize;
+}
+.app-layout-resize--resize-bottom * {
+  cursor: ns-resize;
+}
+`;
+
+// src/internal/styles/app-layout-runtime-drawer.ts
+import { css as css169 } from "lit";
+var appLayoutRuntimeDrawerStyles = css169`
+.app-layout-runtime-drawer--runtime-content-wrapper {
+  display: contents;
+}
+
+.app-layout-runtime-drawer--runtime-header-wrapper {
+  display: contents;
+}
+`;
+
+// src/internal/styles/app-layout-split-panel.ts
+import { css as css170 } from "lit";
+var appLayoutSplitPanelStyles = css170`
+.app-layout-split-panel--drawer-displayed {
+  min-inline-size: 40px;
+}
+
+.app-layout-split-panel--drawer-content {
+  position: fixed;
+  z-index: 830;
+}
+`;
+
+// src/internal/styles/app-layout-toggles.ts
+import { css as css171 } from "lit";
+var appLayoutTogglesStyles = css171`
+.app-layout-toggles--toggle-button {
+  cursor: pointer;
+  border-block: 0;
+  border-inline: 0;
+  padding-block: calc(var(--space-scaled-xxs-pfm1nx, 4px) + 1px);
+  padding-inline: calc(var(--space-xxs-hwfkai, 4px) + 1px);
+  background: transparent;
+  color: currentColor;
+}
+.app-layout-toggles--toggle-button:focus {
+  outline: none;
+  text-decoration: none;
+}
+:host-context([data-awsui-focus-visible=true]) .app-layout-toggles--toggle-button:focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .app-layout-toggles--toggle-button:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(var(--space-button-inline-icon-focus-outline-gutter-zbfgku, 0px) - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .app-layout-toggles--toggle-button:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * var(--space-button-inline-icon-focus-outline-gutter-zbfgku, 0px));
+  inset-block-start: calc(-1 * var(--space-button-inline-icon-focus-outline-gutter-zbfgku, 0px));
+  inline-size: calc(100% + var(--space-button-inline-icon-focus-outline-gutter-zbfgku, 0px) + var(--space-button-inline-icon-focus-outline-gutter-zbfgku, 0px));
+  block-size: calc(100% + var(--space-button-inline-icon-focus-outline-gutter-zbfgku, 0px) + var(--space-button-inline-icon-focus-outline-gutter-zbfgku, 0px));
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+}
+
+.app-layout-toggles--close-button {
+  position: absolute;
+  outline: none;
+  inset-inline-end: var(--space-m-dsumyt, 16px);
+  inset-block-start: var(--size-vertical-panel-icon-offset-z959cw, 15px);
+  z-index: 1;
+}
+`;
+
+// src/internal/styles/app-layout-visual-refresh.ts
+import { css as css172 } from "lit";
+var appLayoutVisualRefreshStyles = css172`
+.app-layout-visual-refresh--breadcrumbs {
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  grid-area: breadcrumbs;
+}
+
+.app-layout-visual-refresh--drawers-container {
+  background-color: transparent;
+  display: flex;
+  grid-column: 5;
+  grid-row: 1/span 9;
+  block-size: var(--awsui-content-height-6b9ypa);
+  pointer-events: none;
+  position: sticky;
+  inset-block-start: var(--awsui-offset-top-6b9ypa);
+  z-index: 830;
+}
+.app-layout-visual-refresh--drawers-container.app-layout-visual-refresh--has-open-drawer {
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+}
+@media (min-width: 689px) {
+  .app-layout-visual-refresh--drawers-container {
+    max-inline-size: calc(var(--awsui-layout-width-6b9ypa) - var(--awsui-main-offset-left-6b9ypa) - var(--awsui-default-min-content-width-6b9ypa) - var(--awsui-content-gap-right-6b9ypa));
+  }
+}
+@media (max-width: 688px) {
+  .app-layout-visual-refresh--drawers-container {
+    position: fixed;
+    inset-inline-end: 0;
+    z-index: 1001;
+
+header.app-layout-visual-refresh--content {
+  grid-area: header;
+}
+
+.app-layout-visual-refresh--container {
+  grid-area: main;
+  padding-block-end: var(--space-layout-content-bottom-zeb1g9, 40px);
+
+
+section.app-layout-visual-refresh--mobile-toolbar {
+  align-items: center;
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  border-block-end: 1px solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+  box-shadow: var(--shadow-sticky-lolw8j, 0px 4px 8px 1px rgba(0, 7, 22, 0.1));
+  box-sizing: border-box;
+  block-size: var(--awsui-mobile-bar-height-6b9ypa);
+  display: grid;
+  grid-area: mobileToolbar;
+  grid-column: 1/span 5;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding-block: 0;
+  padding-inline: var(--space-m-dsumyt, 16px);
+  position: sticky;
+  inset-block-start: var(--awsui-offset-top-6b9ypa);
+  z-index: 1000;
+}
+section.app-layout-visual-refresh--mobile-toolbar:not(.app-layout-visual-refresh--remove-high-contrast-header) {
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  box-shadow: var(--shadow-panel-toggle-qddz27, 0px 6px 12px 1px rgba(0, 7, 22, 0.12));
+}
+section.app-layout-visual-refresh--mobile-toolbar > .app-layout-visual-refresh--mobile-toolbar-nav {
+  grid-column: 1;
+  margin-inline-end: var(--space-m-dsumyt, 16px);
+}
+section.app-layout-visual-refresh--mobile-toolbar > .app-layout-visual-refresh--mobile-toolbar-breadcrumbs {
+  grid-column: 2;
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+}
+section.app-layout-visual-refresh--mobile-toolbar > .app-layout-visual-refresh--mobile-toolbar-tools {
+  grid-column: 3;
+  margin-inline-start: var(--space-m-dsumyt, 16px);
+}
+
+.app-layout-visual-refresh--navigation-container {
+  display: flex;
+  grid-column: 1;
+  grid-row: 1/span 9;
+  block-size: var(--awsui-content-height-6b9ypa);
+  position: sticky;
+  inset-block-start: var(--awsui-offset-top-6b9ypa);
+  z-index: 830;
+
+.app-layout-visual-refresh--notifications {
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  grid-area: notifications;
+  z-index: 850;
+}
+.app-layout-visual-refresh--notifications.app-layout-visual-refresh--has-notification-content {
+  padding-block-start: var(--space-scaled-s-8ozaad, 12px);
+}
+@media (min-width: 689px) {
+  .app-layout-visual-refresh--notifications.app-layout-visual-refresh--sticky-notifications {
+    --awsui-flashbar-sticky-bottom-margin-6b9ypa: var(--space-xxl-32srm4, 32px);
+    position: sticky;
+    inset-block-start: var(--awsui-offset-top-6b9ypa);
+  }
+  .app-layout-visual-refresh--notifications.app-layout-visual-refresh--sticky-notifications:not(.app-layout-visual-refresh--high-contrast) {
+    background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  }
+  .app-layout-visual-refresh--notifications.app-layout-visual-refresh--has-notification-content {
+    padding-block-start: var(--space-xs-ymlm0b, 8px);
+  }
+}
+
+.app-layout-visual-refresh--trigger-button-styles {
+  background: var(--color-background-layout-toggle-default-2hgjdu, #424650);
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+  block-size: var(--space-layout-toggle-diameter-j2qffw, 36px);
+  inline-size: var(--space-layout-toggle-diameter-j2qffw, 36px);
+}
+.app-layout-visual-refresh--trigger-button-styles:hover {
+  background: var(--color-background-layout-toggle-hover-0cpm7g, #656871);
+}
+.app-layout-visual-refresh--trigger-button-styles:active {
+  background: var(--color-background-layout-toggle-active-ap91vm, #424650);
+}
+
+.app-layout-visual-refresh--trigger-badge-wrapper {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  clip-path: path("M34.2193 10.1845C33.3961 10.579 32.4739 10.8 31.5 10.8C28.0206 10.8 25.2 7.97939 25.2 4.5C25.2 3.52614 25.421 2.6039 25.8155 1.78066C23.4518 0.639587 20.8006 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36C27.9411 36 36 27.9411 36 18C36 15.1994 35.3604 12.5482 34.2193 10.1845Z");
+
+}
+.app-layout-visual-refresh--trigger-badge-wrapper:dir(rtl) {
+  clip-path: path("M1.78066 10.1845C2.6039 10.579 3.52615 10.8 4.5 10.8C7.97939 10.8 10.8 7.97939 10.8 4.5C10.8 3.52614 10.579 2.6039 10.1845 1.78066C12.5482 0.639587 15.1994 0 18 0C27.9411 0 36 8.05887 36 18C36 27.9411 27.9411 36 18 36C8.05887 36 0 27.9411 0 18C0 15.1994 0.639587 12.5482 1.78066 10.1845Z");
+}
+
+/*
+Warning! If these design tokens for width change it will adversely impact
+the calculation used to determine the Split Panel maximum width in the
+handleSplitPanelMaxWidth function in the context.
+*/
+.app-layout-visual-refresh--trigger {
+  border-block: none;
+  border-inline: none;
+  padding-inline: 0;
+  color: var(--color-text-layout-toggle-1a15s3, #ffffff);
+  cursor: pointer;
+  pointer-events: auto;
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .app-layout-visual-refresh--trigger:focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .app-layout-visual-refresh--trigger:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(3px - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .app-layout-visual-refresh--trigger:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * 3px);
+  inset-block-start: calc(-1 * 3px);
+  inline-size: calc(100% + 3px + 3px);
+  block-size: calc(100% + 3px + 3px);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+}
+.app-layout-visual-refresh--trigger:focus {
+  outline: none;
+}
+.app-layout-visual-refresh--trigger.app-layout-visual-refresh--selected {
+  background: var(--color-background-layout-toggle-selected-default-izfana, #006ce0);
+  color: var(--color-text-layout-toggle-selected-xpximc, #ffffff);
+}
+.app-layout-visual-refresh--trigger.app-layout-visual-refresh--selected:hover {
+  background: var(--color-background-layout-toggle-selected-hover-7953u1, #004a9e);
+}
+.app-layout-visual-refresh--trigger.app-layout-visual-refresh--selected:active {
+  background: var(--color-background-layout-toggle-selected-active-zcl8w3, #006ce0);
+}
+.app-layout-visual-refresh--trigger.app-layout-visual-refresh--selected > .app-layout-visual-refresh--trigger-badge-wrapper {
+  background: var(--color-background-layout-toggle-selected-default-izfana, #006ce0);
+  color: var(--color-text-layout-toggle-selected-xpximc, #ffffff);
+}
+.app-layout-visual-refresh--trigger.app-layout-visual-refresh--selected > .app-layout-visual-refresh--trigger-badge-wrapper:hover {
+  background: var(--color-background-layout-toggle-selected-hover-7953u1, #004a9e);
+}
+.app-layout-visual-refresh--trigger.app-layout-visual-refresh--selected > .app-layout-visual-refresh--trigger-badge-wrapper:active {
+  background: var(--color-background-layout-toggle-selected-active-zcl8w3, #006ce0);
+}
+.app-layout-visual-refresh--trigger.app-layout-visual-refresh--badge, .app-layout-visual-refresh--trigger.app-layout-visual-refresh--badge:hover, .app-layout-visual-refresh--trigger.app-layout-visual-refresh--badge:active {
+  background: transparent;
+}
+
+.app-layout-visual-refresh--trigger-wrapper {
+  position: relative;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+}
+.app-layout-visual-refresh--trigger-wrapper:not(.app-layout-visual-refresh--remove-high-contrast-header) {
+  box-shadow: var(--shadow-panel-toggle-qddz27, 0px 6px 12px 1px rgba(0, 7, 22, 0.12));
+}
+
+.app-layout-visual-refresh--dot {
+  position: absolute;
+  inline-size: 9px;
+  block-size: 9px;
+  border-start-start-radius: 8px;
+  border-start-end-radius: 8px;
+  border-end-start-radius: 8px;
+  border-end-end-radius: 8px;
+  background-color: var(--color-background-badge-icon-jyxnxa, #db0000);
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+`;
+
+// src/app-layout/internal.ts
+var hostStyles76 = css173`
+  :host {
+    display: block;
+    min-height: 100vh;
+  }
+`;
+var CsAppLayoutInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.navigationOpen = false;
+    this.navigationWidth = 280;
+    this.navigationHide = false;
+    this.toolsOpen = false;
+    this.toolsWidth = 290;
+    this.toolsHide = false;
+    this.contentType = "default";
+    this.headerSelector = "";
+    this.footerSelector = "";
+    this.maxContentWidth = 0;
+    this.minContentWidth = 280;
+    this.disableContentPaddings = false;
+  }
+  static {
+    this.styles = [
+      sharedStyles,
+      componentStyles74,
+      appLayoutContentWrapperStyles,
+      appLayoutDrawerStyles,
+      appLayoutMobileToolbarStyles,
+      appLayoutNotificationsStyles,
+      appLayoutResizeStyles,
+      appLayoutRuntimeDrawerStyles,
+      appLayoutSplitPanelStyles,
+      appLayoutTogglesStyles,
+      appLayoutVisualRefreshStyles,
+      hostStyles76
+    ];
+  }
+  _toggleNav(open) {
+    this.navigationOpen = open;
+    fireNonCancelableEvent(this, "navigationChange", { open });
+  }
+  _toggleTools(open) {
+    this.toolsOpen = open;
+    fireNonCancelableEvent(this, "toolsChange", { open });
+  }
+  render() {
+    const effectiveNavWidth = !this.navigationHide && this.navigationOpen ? this.navigationWidth : 0;
+    const effectiveToolsWidth = !this.toolsHide && this.toolsOpen ? this.toolsWidth : 0;
+    const rootClasses = {
+      "root": true
+    };
+    const layoutClasses = {
+      "layout": true
+    };
+    const layoutMainClasses = {
+      "layout-main": true,
+      "layout-main-scrollable": true
+    };
+    const contentWrapperClasses = {
+      "content-wrapper": true,
+      "app-layout-content-wrapper--content-wrapper": !this.disableContentPaddings
+    };
+    const breadcrumbsClasses = {
+      "breadcrumbs-desktop": true
+    };
+    const navigationClasses = {
+      "app-layout-drawer--drawer": true
+    };
+    const toolsClasses = {
+      "app-layout-drawer--drawer": true
+    };
+    return html78`
+      <div class=${classMap63(rootClasses)}>
+        <div class=${classMap63(layoutClasses)}>
+
+          ${!this.navigationHide ? html78`
+            <div
+              class=${classMap63(navigationClasses)}
+              style="width: ${this.navigationWidth}px; ${!this.navigationOpen ? "display: none" : ""}"
+              role="navigation"
+              aria-label="Navigation drawer"
+            >
+              <slot name="navigation"></slot>
+            </div>
+          ` : nothing44}
+
+          <div
+            class=${classMap63(layoutMainClasses)}
+            style="margin-left: ${effectiveNavWidth}px; margin-right: ${effectiveToolsWidth}px"
+          >
+            <div class="app-layout-notifications--notifications">
+              <slot name="notifications"></slot>
+            </div>
+            <div class=${classMap63(breadcrumbsClasses)}>
+              <slot name="breadcrumbs"></slot>
+            </div>
+            <main
+              class=${classMap63(contentWrapperClasses)}
+              style="${this.maxContentWidth ? `max-width: ${this.maxContentWidth}px` : ""};
+                     ${this.minContentWidth ? `min-width: ${this.minContentWidth}px` : ""}"
+            >
+              <slot></slot>
+            </main>
+          </div>
+
+          ${!this.toolsHide ? html78`
+            <div
+              class=${classMap63(toolsClasses)}
+              style="width: ${this.toolsWidth}px; ${!this.toolsOpen ? "display: none" : ""}"
+              role="complementary"
+              aria-label="Tools drawer"
+            >
+              <slot name="tools"></slot>
+            </div>
+          ` : nothing44}
+        </div>
+
+        ${!this.navigationHide && !this.navigationOpen ? html78`
+          <button
+            type="button"
+            class="app-layout-toggles--toggle-button"
+            aria-label="Open navigation"
+            @click=${() => this._toggleNav(true)}
+          >
+            <cs-icon name="menu"></cs-icon>
+          </button>
+        ` : nothing44}
+
+        ${!this.navigationHide && this.navigationOpen ? html78`
+          <button
+            type="button"
+            class="app-layout-toggles--toggle-button app-layout-toggles--close-button"
+            aria-label="Close navigation"
+            @click=${() => this._toggleNav(false)}
+          >
+            <cs-icon name="close"></cs-icon>
+          </button>
+        ` : nothing44}
+
+        ${!this.toolsHide && !this.toolsOpen ? html78`
+          <button
+            type="button"
+            class="app-layout-toggles--toggle-button"
+            aria-label="Open tools"
+            @click=${() => this._toggleTools(true)}
+          >
+            <cs-icon name="status-info"></cs-icon>
+          </button>
+        ` : nothing44}
+
+        ${!this.toolsHide && this.toolsOpen ? html78`
+          <button
+            type="button"
+            class="app-layout-toggles--toggle-button app-layout-toggles--close-button"
+            aria-label="Close tools"
+            @click=${() => this._toggleTools(false)}
+          >
+            <cs-icon name="close"></cs-icon>
+          </button>
+        ` : nothing44}
+
+        <slot name="drawers" style="display:none"></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property77({ type: Boolean, reflect: true })
+], CsAppLayoutInternal.prototype, "navigationOpen", 2);
+__decorateClass([
+  property77({ type: Number })
+], CsAppLayoutInternal.prototype, "navigationWidth", 2);
+__decorateClass([
+  property77({ type: Boolean, reflect: true })
+], CsAppLayoutInternal.prototype, "navigationHide", 2);
+__decorateClass([
+  property77({ type: Boolean, reflect: true })
+], CsAppLayoutInternal.prototype, "toolsOpen", 2);
+__decorateClass([
+  property77({ type: Number })
+], CsAppLayoutInternal.prototype, "toolsWidth", 2);
+__decorateClass([
+  property77({ type: Boolean, reflect: true })
+], CsAppLayoutInternal.prototype, "toolsHide", 2);
+__decorateClass([
+  property77({ type: String })
+], CsAppLayoutInternal.prototype, "contentType", 2);
+__decorateClass([
+  property77({ type: String })
+], CsAppLayoutInternal.prototype, "headerSelector", 2);
+__decorateClass([
+  property77({ type: String })
+], CsAppLayoutInternal.prototype, "footerSelector", 2);
+__decorateClass([
+  property77({ type: Number })
+], CsAppLayoutInternal.prototype, "maxContentWidth", 2);
+__decorateClass([
+  property77({ type: Number })
+], CsAppLayoutInternal.prototype, "minContentWidth", 2);
+__decorateClass([
+  property77({ type: Boolean, reflect: true })
+], CsAppLayoutInternal.prototype, "disableContentPaddings", 2);
+
+// src/app-layout/index.ts
+var CsAppLayout = class extends CsAppLayoutInternal {
+};
+customElements.define("cs-app-layout", CsAppLayout);
+
+// src/file-token-group/internal.ts
+import { css as css175, html as html79, nothing as nothing45 } from "lit";
+import { property as property78, state as state25 } from "lit/decorators.js";
+import { classMap as classMap64 } from "lit/directives/class-map.js";
+
+// src/file-token-group/styles.ts
+import { css as css174 } from "lit";
+var componentStyles75 = css174`
+.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;
+}
+
+.file-loading-overlay {
+  position: absolute;
+  inset-inline-end: var(--space-static-xs-gnm0mz, 8px);
+  inset-block-end: var(--space-static-xxs-ns94dp, 4px);
+}
+.file-loading-overlay-single-row {
+  inset-inline-end: var(--space-static-xxl-ifa9j8, 32px);
+}
+
+.file-name-container {
+  all: unset;
+  display: block;
+  inline-size: 100%;
+  min-inline-size: 0;
+  cursor: default;
+  text-align: start;
+}
+:host-context([data-awsui-focus-visible=true]) .file-name-container:focus-visible:focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .file-name-container:focus-visible:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(var(--space-button-focus-outline-gutter-jj138g, 4px) - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .file-name-container:focus-visible:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * var(--space-button-focus-outline-gutter-jj138g, 4px));
+  inset-block-start: calc(-1 * var(--space-button-focus-outline-gutter-jj138g, 4px));
+  inline-size: calc(100% + var(--space-button-focus-outline-gutter-jj138g, 4px) + var(--space-button-focus-outline-gutter-jj138g, 4px));
+  block-size: calc(100% + var(--space-button-focus-outline-gutter-jj138g, 4px) + var(--space-button-focus-outline-gutter-jj138g, 4px));
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+}
+
+.file-option-name,
+.file-option-size,
+.file-option-last-modified {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.file-option {
+  inline-size: 100%;
+  min-inline-size: 0;
+  display: flex;
+  gap: var(--space-scaled-xs-xwoogq, 8px);
+}
+
+.file-option-thumbnail {
+  margin-block-start: var(--space-static-xxs-ns94dp, 4px);
+}
+
+.file-option-thumbnail-image {
+  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);
+  inline-size: 48px;
+  block-size: 48px;
+  object-fit: cover;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.file-option-metadata {
+  inline-size: 100%;
+}
+.file-option-metadata.with-image {
+  inline-size: calc(100% - 48px);
+}
+.file-option-metadata.single-row-loading {
+  inline-size: calc(100% - var(--size-icon-normal-levt08, 16px));
+}
+
+.token {
+  position: relative;
+  block-size: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xxs-hwfkai, 4px);
+}
+.token-grid {
+  display: grid;
+  grid-template-rows: max-content auto;
+}
+@media (max-width: 688px) {
+  .token-grid {
+    display: flex;
+  }
+}
+.token-contains-image {
+  grid-template-rows: 68px auto;
+}
+
+.token-box {
+  position: relative;
+  block-size: 100%;
+  border-block: var(--border-width-token-2ukdpu, 2px) solid var(--awsui-token-style-border-color-default-6b9ypa, var(--color-border-item-selected-wl5ttm, #006ce0));
+  border-inline: var(--border-width-token-2ukdpu, 2px) solid var(--awsui-token-style-border-color-default-6b9ypa, var(--color-border-item-selected-wl5ttm, #006ce0));
+  padding-block-start: var(--space-scaled-xxs-pfm1nx, 4px);
+  padding-block-end: var(--space-scaled-xxs-pfm1nx, 4px);
+  padding-inline-start: var(--space-field-horizontal-0aq2ch, 12px);
+  padding-inline-end: var(--space-xxs-hwfkai, 4px);
+  display: flex;
+  align-items: flex-start;
+  background: var(--awsui-token-style-background-default-6b9ypa, var(--color-background-item-selected-9gppru, #f0fbff));
+  border-start-start-radius: var(--border-radius-token-ycnemh, 8px);
+  border-start-end-radius: var(--border-radius-token-ycnemh, 8px);
+  border-end-start-radius: var(--border-radius-token-ycnemh, 8px);
+  border-end-end-radius: var(--border-radius-token-ycnemh, 8px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  box-sizing: border-box;
+}
+.token-box.horizontal {
+  max-inline-size: 230px;
+}
+@media (max-width: 688px) {
+  .token-box.horizontal {
+    max-inline-size: 100%;
+  }
+}
+.token-box.error {
+  border-color: var(--color-border-status-error-j8acpp, #db0000);
+  border-inline-start-width: var(--border-invalid-width-3xd6e1, 8px);
+}
+.token-box.error > .dismiss-button {
+  color: var(--color-text-interactive-default-ugh9wp, #424650);
+}
+.token-box.error > .dismiss-button:hover {
+  color: var(--color-text-interactive-hover-6naf7i, #0f141a);
+}
+.token-box.warning {
+  border-color: var(--color-border-status-warning-j40pg7, #855900);
+  border-inline-start-width: var(--border-invalid-width-3xd6e1, 8px);
+}
+.token-box.warning > .dismiss-button {
+  color: var(--color-text-interactive-default-ugh9wp, #424650);
+}
+.token-box.warning > .dismiss-button:hover {
+  color: var(--color-text-interactive-hover-6naf7i, #0f141a);
+}
+.token-box.read-only {
+  border-color: var(--color-border-input-disabled-zgnzvk, #ebebf0);
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+  pointer-events: none;
+}
+.token-box.read-only > .dismiss-button {
+  color: var(--color-text-button-inline-icon-disabled-82hho0, #b4b4bb);
+}
+.token-box.read-only > .dismiss-button:hover {
+
+  cursor: initial;
+  color: var(--color-text-button-inline-icon-disabled-82hho0, #b4b4bb);
+}
+.token-box.loading {
+  border-color: var(--color-border-control-disabled-uj7t08, #dedee3);
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+}
+`;
+
+// src/file-token-group/internal.ts
+var hostStyles77 = css175`:host { display: block; }`;
+var tokenListStyles2 = css175`
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs-ymlm0b, 8px);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.list-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-button-inline-icon-default-sm4ql6, #006ce0);
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  padding: 0;
+  margin-block-start: var(--space-xs-ymlm0b, 8px);
+}
+.toggle:hover {
+  color: var(--color-text-button-inline-icon-hover-rbyzfc, #002b66);
+  text-decoration: underline;
+}
+.dismiss-button {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  color: var(--color-text-button-inline-icon-default-sm4ql6, #006ce0);
+  padding: var(--space-static-xxs-ns94dp, 4px);
+}
+.dismiss-button:hover {
+  color: var(--color-text-button-inline-icon-hover-rbyzfc, #002b66);
+}
+.file-error-text,
+.file-warning-text {
+  font-size: var(--font-size-body-s-smc8cv, 12px);
+  line-height: var(--line-height-body-s-nu5hx1, 16px);
+  display: flex;
+  align-items: center;
+  gap: var(--space-xxs-hwfkai, 4px);
+}
+.file-error-text {
+  color: var(--color-text-status-error-5676bj, #db0000);
+}
+.file-warning-text {
+  color: var(--color-text-status-warning-cxbpkd, #855900);
+}
+`;
+function defaultFormatFileSize(sizeInBytes) {
+  if (sizeInBytes < 1024) return `${sizeInBytes} bytes`;
+  if (sizeInBytes < 1024 * 1024) return `${(sizeInBytes / 1024).toFixed(1)} KB`;
+  if (sizeInBytes < 1024 * 1024 * 1024) return `${(sizeInBytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+function defaultFormatFileLastModified(date) {
+  return date.toLocaleDateString();
+}
+var CsFileTokenGroupInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.alignment = "horizontal";
+    this.showFileSize = false;
+    this.showFileLastModified = false;
+    this.showFileThumbnail = false;
+    this.readOnly = false;
+    this.limitShowFewerAriaLabel = "";
+    this.limitShowMoreAriaLabel = "";
+    this._expanded = false;
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles75, tokenListStyles2, hostStyles77];
+  }
+  _onDismiss(fileIndex) {
+    if (this.readOnly) return;
+    fireNonCancelableEvent(
+      this,
+      "dismiss",
+      { fileIndex }
+    );
+  }
+  _toggleExpand() {
+    this._expanded = !this._expanded;
+  }
+  _formatSize(sizeInBytes) {
+    return this.i18nStrings?.formatFileSize ? this.i18nStrings.formatFileSize(sizeInBytes) : defaultFormatFileSize(sizeInBytes);
+  }
+  _formatLastModified(date) {
+    return this.i18nStrings?.formatFileLastModified ? this.i18nStrings.formatFileLastModified(date) : defaultFormatFileLastModified(date);
+  }
+  _isImageFile(file) {
+    return file.type.startsWith("image/");
+  }
+  _renderThumbnail(file) {
+    if (!this.showFileThumbnail || !this._isImageFile(file)) return nothing45;
+    const url = URL.createObjectURL(file);
+    return html79`
+      <div class="file-option-thumbnail">
+        <img
+          class="file-option-thumbnail-image"
+          src=${url}
+          alt=${file.name}
+          @load=${() => URL.revokeObjectURL(url)}
+        />
+      </div>
+    `;
+  }
+  _renderFileToken(item, index) {
+    const { file, loading, errorText, warningText } = item;
+    const showDismiss = !this.readOnly && !loading;
+    const isHorizontal = this.alignment === "horizontal";
+    const hasThumbnail = this.showFileThumbnail && this._isImageFile(file);
+    const boxClasses = {
+      "token-box": true,
+      "horizontal": isHorizontal,
+      "error": !!errorText,
+      "warning": !errorText && !!warningText,
+      "read-only": this.readOnly,
+      "loading": !!loading
+    };
+    const tokenClasses = {
+      "token": true,
+      "token-grid": hasThumbnail,
+      "token-contains-image": hasThumbnail
+    };
+    const metadataClasses = {
+      "file-option-metadata": true,
+      "with-image": hasThumbnail,
+      "single-row-loading": !!loading && !hasThumbnail
+    };
+    const removeAriaLabel = this.i18nStrings?.removeFileAriaLabel ? this.i18nStrings.removeFileAriaLabel(index, file.name) : `Remove ${file.name}`;
+    return html79`
+      <li class=${classMap64(tokenClasses)}>
+        <div
+          class=${classMap64(boxClasses)}
+          role="group"
+          aria-label=${file.name}
+        >
+          <div class="file-option">
+            ${this._renderThumbnail(file)}
+            <div class=${classMap64(metadataClasses)}>
+              <div class="file-name-container" tabindex="0">
+                <div class="file-option-name">${file.name}</div>
+                ${this.showFileSize && file.size != null ? html79`<div class="file-option-size">${this._formatSize(file.size)}</div>` : nothing45}
+                ${this.showFileLastModified && file.lastModified ? html79`<div class="file-option-last-modified">${this._formatLastModified(new Date(file.lastModified))}</div>` : nothing45}
+              </div>
+            </div>
+          </div>
+          ${loading ? html79`<div class="file-loading-overlay${!hasThumbnail ? " file-loading-overlay-single-row" : ""}"><cs-spinner size="normal"></cs-spinner></div>` : nothing45}
+          ${showDismiss ? html79`
+              <button
+                class="dismiss-button"
+                type="button"
+                aria-label=${removeAriaLabel}
+                @click=${() => this._onDismiss(index)}
+              >
+                <cs-icon name="close" size="small"></cs-icon>
+              </button>
+            ` : nothing45}
+        </div>
+        ${errorText ? html79`<div class="file-error-text">
+              <cs-icon name="status-negative" size="small"></cs-icon>
+              <span>${errorText}</span>
+            </div>` : nothing45}
+        ${!errorText && warningText ? html79`<div class="file-warning-text">
+              <cs-icon name="status-warning" size="small"></cs-icon>
+              <span>${warningText}</span>
+            </div>` : nothing45}
+      </li>
+    `;
+  }
+  render() {
+    const hasItems = this.items.length > 0;
+    const isLimited = this.limit != null && this.limit < this.items.length && !this._expanded;
+    const visibleItems = isLimited ? this.items.slice(0, this.limit) : this.items;
+    const hiddenCount = this.items.length - visibleItems.length;
+    const showMoreLabel = this.i18nStrings?.limitShowMore || `Show more (+${hiddenCount})`;
+    const showFewerLabel = this.i18nStrings?.limitShowFewer || "Show fewer";
+    const rootClasses = {
+      "root": true,
+      "has-items": hasItems
+    };
+    const listClasses = {
+      "list": true,
+      "list-vertical": this.alignment === "vertical"
+    };
+    return html79`
+      <div class=${classMap64(rootClasses)}>
+        <ul class=${classMap64(listClasses)} role="list" aria-label="File tokens">
+          ${visibleItems.map((item, i) => this._renderFileToken(item, i))}
+        </ul>
+        ${this.limit != null && this.items.length > this.limit ? html79`
+            <button
+              class="toggle"
+              type="button"
+              aria-label=${this._expanded ? this.limitShowFewerAriaLabel || showFewerLabel : this.limitShowMoreAriaLabel || showMoreLabel}
+              @click=${this._toggleExpand}
+            >
+              ${this._expanded ? showFewerLabel : showMoreLabel}
+            </button>
+          ` : nothing45}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property78({ attribute: false })
+], CsFileTokenGroupInternal.prototype, "items", 2);
+__decorateClass([
+  property78({ type: String, reflect: true })
+], CsFileTokenGroupInternal.prototype, "alignment", 2);
+__decorateClass([
+  property78({ type: Boolean, reflect: true, attribute: "show-file-size" })
+], CsFileTokenGroupInternal.prototype, "showFileSize", 2);
+__decorateClass([
+  property78({ type: Boolean, reflect: true, attribute: "show-file-last-modified" })
+], CsFileTokenGroupInternal.prototype, "showFileLastModified", 2);
+__decorateClass([
+  property78({ type: Boolean, reflect: true, attribute: "show-file-thumbnail" })
+], CsFileTokenGroupInternal.prototype, "showFileThumbnail", 2);
+__decorateClass([
+  property78({ type: Boolean, reflect: true, attribute: "read-only" })
+], CsFileTokenGroupInternal.prototype, "readOnly", 2);
+__decorateClass([
+  property78({ type: Number })
+], CsFileTokenGroupInternal.prototype, "limit", 2);
+__decorateClass([
+  property78({ attribute: false })
+], CsFileTokenGroupInternal.prototype, "i18nStrings", 2);
+__decorateClass([
+  property78({ type: String, attribute: "limit-show-fewer-aria-label" })
+], CsFileTokenGroupInternal.prototype, "limitShowFewerAriaLabel", 2);
+__decorateClass([
+  property78({ type: String, attribute: "limit-show-more-aria-label" })
+], CsFileTokenGroupInternal.prototype, "limitShowMoreAriaLabel", 2);
+__decorateClass([
+  state25()
+], CsFileTokenGroupInternal.prototype, "_expanded", 2);
+
+// src/file-token-group/index.ts
+var CsFileTokenGroup = class extends CsFileTokenGroupInternal {
+};
+customElements.define("cs-file-token-group", CsFileTokenGroup);
+
+// src/item-card/internal.ts
+import { css as css177, html as html80 } from "lit";
+import { property as property79 } from "lit/decorators.js";
+import { classMap as classMap65 } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+// src/item-card/styles.ts
+import { css as css176 } from "lit";
+var componentStyles76 = css176`
+.root {
+  transition-property: background-color;
+  transition-duration: var(--motion-duration-transition-show-paced-t8d1os, 180ms);
+  transition-timing-function: var(--motion-easing-transition-show-paced-x2k7uh, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .root {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .root, .awsui-mode-entering .root {
+  animation: none;
+  transition: none;
+}
+
+.root::before {
+  transition-property: border-top-color, border-right-color, border-bottom-color, border-left-color;
+  transition-duration: var(--motion-duration-transition-show-paced-t8d1os, 180ms);
+  transition-timing-function: var(--motion-easing-transition-show-paced-x2k7uh, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .root::before {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .root::before, .awsui-mode-entering .root::before {
+  animation: none;
+  transition: none;
+}
+
+.header-inner {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-s-zp08en, 16px);
+  line-height: var(--line-height-heading-s-hmi4vc, 20px);
+  letter-spacing: var(--letter-spacing-heading-s-4st9ep, -0.005em);
+  font-weight: var(--font-weight-heading-s-lcx0ai, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.header:not(:has(+ .body)) {
+  flex: 1;
+}
+
+.body {
+  flex: 1;
+}
+
+.footer:first-child {
+  margin-block-start: auto;
+}
+
+.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;
+  box-sizing: border-box;
+  position: relative;
+  background-color: var(--awsui-style-item-card-background-default-6b9ypa, var(--color-background-item-card-ww2wfv, #ffffff));
+  min-inline-size: 0;
+  box-shadow: var(--awsui-style-item-card-box-shadow-default-6b9ypa, var(--shadow-item-card-282f8w, none));
+}
+.root:before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0px;
+  inset-block-start: 0px;
+  inline-size: 100%;
+  block-size: 100%;
+  pointer-events: none;
+  background: transparent;
+  box-sizing: border-box;
+  box-shadow: none;
+  border-color: transparent;
+  border-block: solid var(--awsui-style-item-card-border-width-default-6b9ypa, var(--border-width-item-card-3wmyp3, 1px)) var(--awsui-style-item-card-border-color-default-6b9ypa, var(--color-border-item-card-fia23i, #c6c6cd));
+  border-inline: solid var(--awsui-style-item-card-border-width-default-6b9ypa, var(--border-width-item-card-3wmyp3, 1px)) var(--awsui-style-item-card-border-color-default-6b9ypa, var(--color-border-item-card-fia23i, #c6c6cd));
+}
+.root::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0px;
+  inset-block-start: 0px;
+  inline-size: 100%;
+  block-size: 100%;
+  pointer-events: none;
+  background: transparent;
+  box-sizing: border-box;
+}
+.root:not(.refresh)::before {
+  border-block-start: solid var(--awsui-style-item-card-border-width-default-6b9ypa, var(--border-container-top-width-n1eke6, 0px)) var(--awsui-style-item-card-border-color-default-6b9ypa, var(--color-border-container-top-k3vmoz, transparent));
+}
+.root.highlighted {
+  background-color: var(--color-background-item-selected-9gppru, #f0fbff);
+}
+.root.highlighted:before {
+  border-block: solid var(--border-width-item-card-highlighted-jay4ll, 2px) var(--color-border-item-card-highlighted-5l7rko, #006ce0);
+  border-inline: solid var(--border-width-item-card-highlighted-jay4ll, 2px) var(--color-border-item-card-highlighted-5l7rko, #006ce0);
+}
+.root.variant-embedded > .inner-card, .root.variant-default > .inner-card {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+  inline-size: 100%;
+}
+.root.variant-embedded > .inner-card > .header + .body:not(.no-padding),
+.root.variant-embedded > .inner-card > .header + .footer:not(.no-padding),
+.root.variant-embedded > .inner-card > .body + .footer:not(.no-padding),
+.root.variant-default > .inner-card > .header + .body:not(.no-padding),
+.root.variant-default > .inner-card > .header + .footer:not(.no-padding),
+.root.variant-default > .inner-card > .body + .footer:not(.no-padding) {
+  padding-block-start: var(--space-xxs-hwfkai, 4px);
+}
+.root.variant-embedded > .inner-card > .header:not(.no-padding):has(+ .body, + .footer), .root.variant-embedded > .inner-card > .body:not(.no-padding):has(+ .body, + .footer), .root.variant-default > .inner-card > .header:not(.no-padding):has(+ .body, + .footer), .root.variant-default > .inner-card > .body:not(.no-padding):has(+ .body, + .footer) {
+  padding-block-end: var(--space-xxs-hwfkai, 4px);
+}
+.root.variant-embedded, .root.variant-embedded:before, .root.variant-embedded::after, .root.variant-embedded > .inner-card {
+  border-start-start-radius: var(--awsui-style-item-card-border-radius-6b9ypa, var(--border-radius-item-card-embedded-l0g6e3, 8px));
+  border-start-end-radius: var(--awsui-style-item-card-border-radius-6b9ypa, var(--border-radius-item-card-embedded-l0g6e3, 8px));
+  border-end-start-radius: var(--awsui-style-item-card-border-radius-6b9ypa, var(--border-radius-item-card-embedded-l0g6e3, 8px));
+  border-end-end-radius: var(--awsui-style-item-card-border-radius-6b9ypa, var(--border-radius-item-card-embedded-l0g6e3, 8px));
+}
+.root.variant-embedded > .inner-card > .header:not(.no-padding),
+.root.variant-embedded > .inner-card > .body:not(.no-padding),
+.root.variant-embedded > .inner-card > .footer:not(.no-padding) {
+  padding-block: var(--space-item-card-vertical-embedded-zuozef, 10px);
+  padding-inline-start: var(--space-item-card-horizontal-embedded-e0vef5, 12px);
+}
+.root.variant-embedded > .inner-card > .header:not(.no-padding):not(.with-actions),
+.root.variant-embedded > .inner-card > .body:not(.no-padding):not(.with-actions),
+.root.variant-embedded > .inner-card > .footer:not(.no-padding):not(.with-actions) {
+  padding-inline-end: var(--space-item-card-horizontal-embedded-e0vef5, 12px);
+}
+.root.variant-embedded > .inner-card > .header:not(.no-padding).with-actions,
+.root.variant-embedded > .inner-card > .body:not(.no-padding).with-actions,
+.root.variant-embedded > .inner-card > .footer:not(.no-padding).with-actions {
+  padding-inline-end: calc(var(--space-item-card-horizontal-embedded-e0vef5, 12px) - var(--space-xxs-hwfkai, 4px));
+}
+.root.variant-embedded > .inner-card > .header:not(.no-padding).with-actions {
+  padding-block: calc(var(--space-item-card-vertical-embedded-zuozef, 10px) - var(--space-scaled-xxs-pfm1nx, 4px));
+}
+.root.variant-embedded > .inner-card > .header:not(.no-padding).with-actions:has(+ .body, + .footer) {
+  padding-block-end: var(--space-xxs-hwfkai, 4px);
+}
+.root.variant-default, .root.variant-default:before, .root.variant-default::after, .root.variant-default > .inner-card {
+  border-start-start-radius: var(--awsui-style-item-card-border-radius-6b9ypa, var(--border-radius-item-card-default-pi9u8q, 16px));
+  border-start-end-radius: var(--awsui-style-item-card-border-radius-6b9ypa, var(--border-radius-item-card-default-pi9u8q, 16px));
+  border-end-start-radius: var(--awsui-style-item-card-border-radius-6b9ypa, var(--border-radius-item-card-default-pi9u8q, 16px));
+  border-end-end-radius: var(--awsui-style-item-card-border-radius-6b9ypa, var(--border-radius-item-card-default-pi9u8q, 16px));
+}
+.root.variant-default > .inner-card > .header:not(.no-padding),
+.root.variant-default > .inner-card > .body:not(.no-padding),
+.root.variant-default > .inner-card > .footer:not(.no-padding) {
+  padding-block: var(--space-item-card-vertical-default-ppqfu4, 16px);
+  padding-inline-start: var(--space-item-card-horizontal-default-obq2ks, 20px);
+}
+.root.variant-default > .inner-card > .header:not(.no-padding):not(.with-actions),
+.root.variant-default > .inner-card > .body:not(.no-padding):not(.with-actions),
+.root.variant-default > .inner-card > .footer:not(.no-padding):not(.with-actions) {
+  padding-inline-end: var(--space-item-card-horizontal-default-obq2ks, 20px);
+}
+.root.variant-default > .inner-card > .header:not(.no-padding).with-actions,
+.root.variant-default > .inner-card > .body:not(.no-padding).with-actions,
+.root.variant-default > .inner-card > .footer:not(.no-padding).with-actions {
+  padding-inline-end: calc(var(--space-item-card-horizontal-default-obq2ks, 20px) - var(--space-xxs-hwfkai, 4px));
+}
+.root.variant-default > .inner-card > .header:not(.no-padding).with-actions {
+  padding-block: calc(var(--space-item-card-vertical-default-ppqfu4, 16px) - var(--space-scaled-xxs-pfm1nx, 4px));
+}
+.root.variant-default > .inner-card > .header:not(.no-padding).with-actions:has(+ .body, + .footer) {
+  padding-block-end: var(--space-xxs-hwfkai, 4px);
+}
+
+.full-height {
+  block-size: 100%;
+}
+
+.description {
+  color: var(--color-text-heading-secondary-iwtvf6, #424650);
+  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/item-card/internal.ts
+var hostStyles78 = css177`:host { display: block; }`;
+var CsItemCardInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "default";
+    this.disableHeaderPaddings = false;
+    this.disableContentPaddings = false;
+    this.disableFooterPaddings = false;
+    this.highlighted = false;
+    this.fullHeight = false;
+    this._hasHeader = false;
+    this._hasFooter = false;
+    this._hasActions = false;
+    this._hasDescription = false;
+    this._onHeaderSlotChange = (e) => {
+      const slot = e.target;
+      this._hasHeader = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+    this._onFooterSlotChange = (e) => {
+      const slot = e.target;
+      this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+    this._onActionsSlotChange = (e) => {
+      const slot = e.target;
+      this._hasActions = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+    this._onDescriptionSlotChange = (e) => {
+      const slot = e.target;
+      this._hasDescription = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles76, hostStyles78];
+  }
+  _buildRootStyleOverrides() {
+    const s = this.style_;
+    const overrides = {};
+    if (s?.root?.background) overrides["--awsui-style-item-card-background-default-6b9ypa"] = s.root.background;
+    if (s?.root?.borderColor) overrides["--awsui-style-item-card-border-color-default-6b9ypa"] = s.root.borderColor;
+    if (s?.root?.borderRadius) overrides["--awsui-style-item-card-border-radius-6b9ypa"] = s.root.borderRadius;
+    if (s?.root?.borderWidth) overrides["--awsui-style-item-card-border-width-default-6b9ypa"] = s.root.borderWidth;
+    if (s?.root?.boxShadow) overrides["--awsui-style-item-card-box-shadow-default-6b9ypa"] = s.root.boxShadow;
+    return overrides;
+  }
+  render() {
+    const rootClasses = {
+      "root": true,
+      "refresh": true,
+      [`variant-${this.variant}`]: true,
+      "highlighted": this.highlighted,
+      "full-height": this.fullHeight
+    };
+    const headerClasses = {
+      "header": true,
+      "no-padding": this.disableHeaderPaddings,
+      "with-actions": this._hasActions
+    };
+    const bodyClasses = {
+      "body": true,
+      "no-padding": this.disableContentPaddings
+    };
+    const footerClasses = {
+      "footer": true,
+      "no-padding": this.disableFooterPaddings
+    };
+    const rootStyleOverrides = this._buildRootStyleOverrides();
+    return html80`
+      <div class=${classMap65(rootClasses)} style=${styleMap(rootStyleOverrides)}>
+        <div class="inner-card">
+          ${this._hasHeader || this._hasActions || this._hasDescription ? html80`
+              <div class=${classMap65(headerClasses)}>
+                <div class="header-inner">
+                  <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
+                </div>
+                ${this._hasDescription ? html80`<div class="description"><slot name="description" @slotchange=${this._onDescriptionSlotChange}></slot></div>` : html80`<slot name="description" @slotchange=${this._onDescriptionSlotChange} style="display:none"></slot>`}
+                ${this._hasActions ? html80`<div class="actions"><slot name="actions" @slotchange=${this._onActionsSlotChange}></slot></div>` : html80`<slot name="actions" @slotchange=${this._onActionsSlotChange} style="display:none"></slot>`}
+              </div>
+            ` : html80`
+              <slot name="header" @slotchange=${this._onHeaderSlotChange} style="display:none"></slot>
+              <slot name="description" @slotchange=${this._onDescriptionSlotChange} style="display:none"></slot>
+              <slot name="actions" @slotchange=${this._onActionsSlotChange} style="display:none"></slot>
+            `}
+          <div class=${classMap65(bodyClasses)}>
+            <slot></slot>
+          </div>
+          ${this._hasFooter ? html80`<div class=${classMap65(footerClasses)}><slot name="footer" @slotchange=${this._onFooterSlotChange}></slot></div>` : html80`<slot name="footer" @slotchange=${this._onFooterSlotChange} style="display:none"></slot>`}
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property79({ type: String, reflect: true })
+], CsItemCardInternal.prototype, "variant", 2);
+__decorateClass([
+  property79({ type: Boolean, reflect: true, attribute: "disable-header-paddings" })
+], CsItemCardInternal.prototype, "disableHeaderPaddings", 2);
+__decorateClass([
+  property79({ type: Boolean, reflect: true, attribute: "disable-content-paddings" })
+], CsItemCardInternal.prototype, "disableContentPaddings", 2);
+__decorateClass([
+  property79({ type: Boolean, reflect: true, attribute: "disable-footer-paddings" })
+], CsItemCardInternal.prototype, "disableFooterPaddings", 2);
+__decorateClass([
+  property79({ attribute: false })
+], CsItemCardInternal.prototype, "style_", 2);
+__decorateClass([
+  property79({ type: Boolean, reflect: true })
+], CsItemCardInternal.prototype, "highlighted", 2);
+__decorateClass([
+  property79({ type: Boolean, reflect: true, attribute: "full-height" })
+], CsItemCardInternal.prototype, "fullHeight", 2);
+__decorateClass([
+  property79({ attribute: false })
+], CsItemCardInternal.prototype, "metadataAttributes", 2);
+
+// src/item-card/index.ts
+var CsItemCard = class extends CsItemCardInternal {
+};
+customElements.define("cs-item-card", CsItemCard);
+
+// src/panel-layout/internal.ts
+import { css as css179, html as html81, nothing as nothing46 } from "lit";
+import { property as property80, state as state26 } from "lit/decorators.js";
+import { classMap as classMap66 } from "lit/directives/class-map.js";
+import { styleMap as styleMap2 } from "lit/directives/style-map.js";
+
+// src/panel-layout/styles.ts
+import { css as css178 } from "lit";
+var componentStyles77 = css178`
+.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;
+  block-size: 100%;
+  overflow: hidden;
+  display: flex;
+}
+
+.panel {
+  display: flex;
+  flex-shrink: 0;
+}
+.panel > .handle {
+  display: flex;
+  align-items: center;
+}
+.panel > .panel-content {
+  overflow-y: auto;
+  overflow-x: visible;
+  flex-grow: 1;
+}
+:host-context([data-awsui-focus-visible=true]) .panel > .panel-content:focus {
+  border-start-start-radius: calc(var(--border-radius-control-default-focus-ring-1uabki, 4px) + 2px);
+  border-start-end-radius: calc(var(--border-radius-control-default-focus-ring-1uabki, 4px) + 2px);
+  border-end-start-radius: calc(var(--border-radius-control-default-focus-ring-1uabki, 4px) + 2px);
+  border-end-end-radius: calc(var(--border-radius-control-default-focus-ring-1uabki, 4px) + 2px);
+  outline: 2px solid var(--color-border-item-focused-uk47pl, #006ce0);
+  outline-offset: calc(-1 * 2px);
+}
+.display-main-only > .panel {
+  display: none;
+}
+.display-panel-only > .panel {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: visible;
+}
+
+.content {
+  overflow-y: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+.display-panel-only > .content {
+  display: none;
+}
+:host-context([data-awsui-focus-visible=true]) .content:focus {
+  border-start-start-radius: calc(var(--border-radius-control-default-focus-ring-1uabki, 4px) + 2px);
+  border-start-end-radius: calc(var(--border-radius-control-default-focus-ring-1uabki, 4px) + 2px);
+  border-end-start-radius: calc(var(--border-radius-control-default-focus-ring-1uabki, 4px) + 2px);
+  border-end-end-radius: calc(var(--border-radius-control-default-focus-ring-1uabki, 4px) + 2px);
+  outline: 2px solid var(--color-border-item-focused-uk47pl, #006ce0);
+  outline-offset: calc(-1 * 2px);
+}
+`;
+
+// src/panel-layout/internal.ts
+var hostStyles79 = css179`:host { display: block; block-size: 100%; }`;
+var handleStyles = css179`
+.handle-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: col-resize;
+  user-select: none;
+  -webkit-user-select: none;
+  inline-size: 8px;
+  flex-shrink: 0;
+}
+.handle-wrapper:hover .handle-bar {
+  background-color: var(--color-border-item-focused-uk47pl, #006ce0);
+}
+.handle-bar {
+  inline-size: 2px;
+  block-size: 24px;
+  border-radius: 1px;
+  background-color: var(--color-border-divider-default-jx2uvy, #c6c6cd);
+  transition: background-color 120ms ease-out;
+}
+.handle-wrapper:focus-visible {
+  outline: 2px solid var(--color-border-item-focused-uk47pl, #006ce0);
+  outline-offset: -2px;
+  border-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+}
+`;
+var KEYBOARD_RESIZE_STEP = 10;
+var MIN_DEFAULT = 100;
+var CsPanelLayoutInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.panelPosition = "side-end";
+    this.resizable = false;
+    this.display = "all";
+    this._internalSize = 280;
+    this._dragging = false;
+    this._dragStartX = 0;
+    this._dragStartSize = 0;
+    this._onPointerDown = (e) => {
+      if (!this.resizable) return;
+      e.preventDefault();
+      this._dragging = true;
+      this._dragStartX = e.clientX;
+      this._dragStartSize = this._effectiveSize;
+      e.target.setPointerCapture(e.pointerId);
+    };
+    this._onPointerMove = (e) => {
+      if (!this._dragging) return;
+      const dx = e.clientX - this._dragStartX;
+      const delta = this.panelPosition === "side-start" ? dx : -dx;
+      const newSize = this._clampSize(this._dragStartSize + delta);
+      this._internalSize = newSize;
+    };
+    this._onPointerUp = (e) => {
+      if (!this._dragging) return;
+      this._dragging = false;
+      e.target.releasePointerCapture(e.pointerId);
+      this._fireResize(this._effectiveSize);
+    };
+    this._onKeyDown = (e) => {
+      if (!this.resizable) return;
+      let delta = 0;
+      if (this.panelPosition === "side-start") {
+        if (e.key === "ArrowRight") delta = KEYBOARD_RESIZE_STEP;
+        else if (e.key === "ArrowLeft") delta = -KEYBOARD_RESIZE_STEP;
+      } else {
+        if (e.key === "ArrowLeft") delta = KEYBOARD_RESIZE_STEP;
+        else if (e.key === "ArrowRight") delta = -KEYBOARD_RESIZE_STEP;
+      }
+      if (delta !== 0) {
+        e.preventDefault();
+        const newSize = this._clampSize(this._effectiveSize + delta);
+        this._internalSize = newSize;
+        this._fireResize(newSize);
+      }
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles77, handleStyles, hostStyles79];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.defaultPanelSize != null) {
+      this._internalSize = this.defaultPanelSize;
+    }
+  }
+  get _effectiveSize() {
+    const raw = this.panelSize ?? this._internalSize;
+    const min2 = this.minPanelSize ?? MIN_DEFAULT;
+    const max2 = this.maxPanelSize ?? Infinity;
+    return Math.max(min2, Math.min(max2, raw));
+  }
+  _clampSize(size2) {
+    const min2 = this.minPanelSize ?? MIN_DEFAULT;
+    const max2 = this.maxPanelSize ?? Infinity;
+    return Math.max(min2, Math.min(max2, size2));
+  }
+  _fireResize(panelSize) {
+    const totalSize = this.clientWidth;
+    const detail = { totalSize, panelSize };
+    fireNonCancelableEvent(this, "panelResize", detail);
+    fireNonCancelableEvent(this, "layoutChange", detail);
+  }
+  focusResizeHandle() {
+    const handle = this.shadowRoot?.querySelector(".handle-wrapper");
+    handle?.focus();
+  }
+  _renderHandle() {
+    if (!this.resizable || this.display !== "all") return nothing46;
+    const ariaLabel = this.i18nStrings?.resizeHandleAriaLabel ?? "Resize panel";
+    const tooltip = this.i18nStrings?.resizeHandleTooltipText;
+    return html81`
+      <div
+        class="handle-wrapper"
+        role="separator"
+        aria-orientation="vertical"
+        aria-valuenow=${this._effectiveSize}
+        aria-valuemin=${this.minPanelSize ?? MIN_DEFAULT}
+        aria-valuemax=${this.maxPanelSize ?? this.clientWidth}
+        aria-label=${ariaLabel}
+        title=${tooltip ?? nothing46}
+        tabindex="0"
+        @pointerdown=${this._onPointerDown}
+        @pointermove=${this._onPointerMove}
+        @pointerup=${this._onPointerUp}
+        @keydown=${this._onKeyDown}
+      >
+        <div class="handle-bar"></div>
+      </div>
+    `;
+  }
+  render() {
+    const rootClasses = {
+      "root": true,
+      [`display-${this.display}`]: true
+    };
+    const panelStyle = {};
+    if (this.display === "all") {
+      panelStyle["inline-size"] = `${this._effectiveSize}px`;
+    }
+    const panelFocusAttrs = {};
+    if (this.panelFocusable) {
+      panelFocusAttrs["tabindex"] = "0";
+      if (this.panelFocusable.ariaLabel) panelFocusAttrs["aria-label"] = this.panelFocusable.ariaLabel;
+      if (this.panelFocusable.ariaLabelledby) panelFocusAttrs["aria-labelledby"] = this.panelFocusable.ariaLabelledby;
+    }
+    const mainFocusAttrs = {};
+    if (this.mainFocusable) {
+      mainFocusAttrs["tabindex"] = "0";
+      if (this.mainFocusable.ariaLabel) mainFocusAttrs["aria-label"] = this.mainFocusable.ariaLabel;
+      if (this.mainFocusable.ariaLabelledby) mainFocusAttrs["aria-labelledby"] = this.mainFocusable.ariaLabelledby;
+    }
+    const panelFirst = this.panelPosition === "side-start";
+    const panelSection = html81`
+      <div class="panel" style=${styleMap2(panelStyle)}>
+        ${!panelFirst ? html81`<div class="handle">${this._renderHandle()}</div>` : nothing46}
+        <div
+          class="panel-content"
+          tabindex=${this.panelFocusable ? "0" : nothing46}
+          aria-label=${this.panelFocusable?.ariaLabel ?? nothing46}
+          aria-labelledby=${this.panelFocusable?.ariaLabelledby ?? nothing46}
+        >
+          <slot name="panel"></slot>
+        </div>
+        ${panelFirst ? html81`<div class="handle">${this._renderHandle()}</div>` : nothing46}
+      </div>
+    `;
+    const mainSection = html81`
+      <div
+        class="content"
+        tabindex=${this.mainFocusable ? "0" : nothing46}
+        aria-label=${this.mainFocusable?.ariaLabel ?? nothing46}
+        aria-labelledby=${this.mainFocusable?.ariaLabelledby ?? nothing46}
+      >
+        <slot name="main"></slot>
+      </div>
+    `;
+    return html81`
+      <div class=${classMap66(rootClasses)}>
+        ${panelFirst ? panelSection : mainSection}
+        ${panelFirst ? mainSection : panelSection}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property80({ type: String, reflect: true, attribute: "panel-position" })
+], CsPanelLayoutInternal.prototype, "panelPosition", 2);
+__decorateClass([
+  property80({ type: Number, attribute: "default-panel-size" })
+], CsPanelLayoutInternal.prototype, "defaultPanelSize", 2);
+__decorateClass([
+  property80({ type: Number, attribute: "panel-size" })
+], CsPanelLayoutInternal.prototype, "panelSize", 2);
+__decorateClass([
+  property80({ type: Number, attribute: "min-panel-size" })
+], CsPanelLayoutInternal.prototype, "minPanelSize", 2);
+__decorateClass([
+  property80({ type: Number, attribute: "max-panel-size" })
+], CsPanelLayoutInternal.prototype, "maxPanelSize", 2);
+__decorateClass([
+  property80({ type: Boolean, reflect: true })
+], CsPanelLayoutInternal.prototype, "resizable", 2);
+__decorateClass([
+  property80({ type: String, reflect: true })
+], CsPanelLayoutInternal.prototype, "display", 2);
+__decorateClass([
+  property80({ attribute: false })
+], CsPanelLayoutInternal.prototype, "panelFocusable", 2);
+__decorateClass([
+  property80({ attribute: false })
+], CsPanelLayoutInternal.prototype, "mainFocusable", 2);
+__decorateClass([
+  property80({ attribute: false })
+], CsPanelLayoutInternal.prototype, "i18nStrings", 2);
+__decorateClass([
+  state26()
+], CsPanelLayoutInternal.prototype, "_internalSize", 2);
+__decorateClass([
+  state26()
+], CsPanelLayoutInternal.prototype, "_dragging", 2);
+
+// src/panel-layout/index.ts
+var CsPanelLayout = class extends CsPanelLayoutInternal {
+};
+customElements.define("cs-panel-layout", CsPanelLayout);
 export {
   CsAlert,
   CsAnchorNavigation,
   CsAnnotationContext,
+  CsAppLayout,
   CsAttributeEditor,
   CsAutosuggest,
   CsBadge,
@@ -26532,6 +29391,7 @@ export {
   CsExpandableSection,
   CsFileDropzone,
   CsFileInput,
+  CsFileTokenGroup,
   CsFileUpload,
   CsFlashbar,
   CsForm,
@@ -26539,8 +29399,11 @@ export {
   CsGrid,
   CsHeader,
   CsHelpPanel,
+  CsHotspot,
   CsIcon,
   CsIconProvider,
+  CsInput,
+  CsItemCard,
   CsKeyValuePairs,
   CsLink,
   CsList,
@@ -26548,6 +29411,7 @@ export {
   CsModal,
   CsMultiselect,
   CsPagination,
+  CsPanelLayout,
   CsPopover,
   CsProgressBar,
   CsPromptInput,
@@ -26566,7 +29430,10 @@ export {
   CsTabs,
   CsTagEditor,
   CsTextContent,
+  CsTextFilter,
+  CsTextarea,
   CsTiles,
+  CsTimeInput,
   CsToggle,
   CsToggleButton,
   CsToken,
@@ -26574,5 +29441,6 @@ export {
   CsTooltip,
   CsTopNavigation,
   CsTreeView,
+  CsTutorialPanel,
   CsWizard
 };