@cumulus-ui/components 0.4.0 → 0.5.0

package/dist/index.js

@@ -64,8 +64,8 @@ function FormAssociatedMixin(superClass) {
       this._defaultValue = this.value;
     }
     // ── Public API (thin wrappers around ElementInternals) ────────────
-    setFormValue(value, state21) {
-      this._internals.setFormValue(value, state21);
+    setFormValue(value, state23) {
+      this._internals.setFormValue(value, state23);
     }
     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(state21, _mode) {
-      if (typeof state21 === "string") {
-        this.value = state21;
+    formStateRestoreCallback(state23, _mode) {
+      if (typeof state23 === "string") {
+        this.value = state23;
       }
     }
   }
@@ -1254,7 +1254,7 @@ var CsButtonInternal = class extends Base {
           role="button"
         >
           ${this._renderIcon("left")}
-          <slot></slot>
+          <span class="content"><slot></slot></span>
           ${this._renderIcon("right")}
           ${this._renderExternalIcon()}
         </a>
@@ -1274,7 +1274,7 @@ var CsButtonInternal = class extends Base {
         form=${ifDefined2(this.form)}
       >
         ${this._renderIcon("left")}
-        ${this.loading && this.loadingText ? html3`<span>${this.loadingText}</span>` : html3`<slot></slot>`}
+        <span class="content">${this.loading && this.loadingText ? html3`<span>${this.loadingText}</span>` : html3`<slot></slot>`}</span>
         ${this._renderIcon("right")}
       </button>
     `;
@@ -3053,6 +3053,19 @@ var structuredItemStyles = css22`
 
 // src/list/internal.ts
 var hostStyles9 = css23`:host { display: block; }`;
+var inventedStyles = css23`
+  .structured-item--icon {
+    display: flex;
+    align-items: center;
+    margin-inline-end: var(--space-xs-ymlm0b, 8px);
+    flex-shrink: 0;
+  }
+  .structured-item--secondary {
+    color: var(--color-text-body-secondary-fdstdf, #5f6b7a);
+    font-size: var(--font-body-s-size-ukbcbk, 12px);
+    line-height: var(--line-height-body-s-2vlpm2, 16px);
+  }
+`;
 var CsListInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -3066,7 +3079,7 @@ var CsListInternal = class extends CsBaseElement {
     this.disablePaddings = false;
   }
   static {
-    this.styles = [sharedStyles, componentStyles9, structuredItemStyles, hostStyles9];
+    this.styles = [sharedStyles, componentStyles9, structuredItemStyles, hostStyles9, inventedStyles];
   }
   _renderListItem(rendered) {
     const itemClasses = {
@@ -3385,6 +3398,16 @@ var treeViewVerticalConnectorStyles = css27`
 
 // src/tree-view/internal.ts
 var hostStyles10 = css28`:host { display: block; }`;
+var inventedStyles2 = css28`
+  .expandable {}
+  .expanded {}
+  .structured-item--icon {
+    display: flex;
+    align-items: center;
+    margin-inline-end: var(--space-xs-ymlm0b, 8px);
+    flex-shrink: 0;
+  }
+`;
 var CsTreeViewInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -3395,7 +3418,7 @@ var CsTreeViewInternal = class extends CsBaseElement {
     this._expandedSet = /* @__PURE__ */ new Set();
   }
   static {
-    this.styles = [sharedStyles, componentStyles10, treeViewTreeItemStyles, expandToggleButtonStyles, treeViewVerticalConnectorStyles, structuredItemStyles, hostStyles10];
+    this.styles = [sharedStyles, componentStyles10, treeViewTreeItemStyles, expandToggleButtonStyles, treeViewVerticalConnectorStyles, structuredItemStyles, hostStyles10, inventedStyles2];
   }
   willUpdate(changed) {
     if (changed.has("expandedItems")) {
@@ -6096,7 +6119,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   }
   return coords;
 }
-async function detectOverflow(state21, options) {
+async function detectOverflow(state23, options) {
   var _await$platform$isEle;
   if (options === void 0) {
     options = {};
@@ -6108,14 +6131,14 @@ async function detectOverflow(state21, options) {
     rects,
     elements,
     strategy
-  } = state21;
+  } = state23;
   const {
     boundary = "clippingAncestors",
     rootBoundary = "viewport",
     elementContext = "floating",
     altBoundary = false,
     padding = 0
-  } = evaluate(options, state21);
+  } = evaluate(options, state23);
   const paddingObject = getPaddingObject(padding);
   const altContext = elementContext === "floating" ? "reference" : "floating";
   const element = elements[altBoundary ? altContext : elementContext];
@@ -6247,7 +6270,7 @@ var flip = function(options) {
   return {
     name: "flip",
     options,
-    async fn(state21) {
+    async fn(state23) {
       var _middlewareData$arrow, _middlewareData$flip;
       const {
         placement,
@@ -6256,7 +6279,7 @@ var flip = function(options) {
         initialPlacement,
         platform: platform2,
         elements
-      } = state21;
+      } = state23;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true,
@@ -6265,7 +6288,7 @@ var flip = function(options) {
         fallbackAxisSideDirection = "none",
         flipAlignment = true,
         ...detectOverflowOptions
-      } = evaluate(options, state21);
+      } = evaluate(options, state23);
       if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -6279,7 +6302,7 @@ var flip = function(options) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements2 = [initialPlacement, ...fallbackPlacements];
-      const overflow = await platform2.detectOverflow(state21, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state23, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -6350,19 +6373,19 @@ var flip = function(options) {
   };
 };
 var originSides = /* @__PURE__ */ new Set(["left", "top"]);
-async function convertValueToCoords(state21, options) {
+async function convertValueToCoords(state23, options) {
   const {
     placement,
     platform: platform2,
     elements
-  } = state21;
+  } = state23;
   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, state21);
+  const rawValue = evaluate(options, state23);
   let {
     mainAxis,
     crossAxis,
@@ -6394,15 +6417,15 @@ var offset = function(options) {
   return {
     name: "offset",
     options,
-    async fn(state21) {
+    async fn(state23) {
       var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
         y,
         placement,
         middlewareData
-      } = state21;
-      const diffCoords = await convertValueToCoords(state21, options);
+      } = state23;
+      const diffCoords = await convertValueToCoords(state23, options);
       if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -6424,13 +6447,13 @@ var shift = function(options) {
   return {
     name: "shift",
     options,
-    async fn(state21) {
+    async fn(state23) {
       const {
         x,
         y,
         placement,
         platform: platform2
-      } = state21;
+      } = state23;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = false,
@@ -6447,12 +6470,12 @@ var shift = function(options) {
           }
         },
         ...detectOverflowOptions
-      } = evaluate(options, state21);
+      } = evaluate(options, state23);
       const coords = {
         x,
         y
       };
-      const overflow = await platform2.detectOverflow(state21, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state23, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -6472,7 +6495,7 @@ var shift = function(options) {
         crossAxisCoord = clamp(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
-        ...state21,
+        ...state23,
         [mainAxis]: mainAxisCoord,
         [crossAxis]: crossAxisCoord
       });
@@ -6563,8 +6586,8 @@ var containRe = /paint|layout|strict|content/;
 var isNotNone = (value) => !!value && value !== "none";
 var isWebKitValue;
 function isContainingBlock(elementOrCss) {
-  const css139 = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
-  return isNotNone(css139.transform) || isNotNone(css139.translate) || isNotNone(css139.scale) || isNotNone(css139.rotate) || isNotNone(css139.perspective) || !isWebKit() && (isNotNone(css139.backdropFilter) || isNotNone(css139.filter)) || willChangeRe.test(css139.willChange || "") || containRe.test(css139.contain || "");
+  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 || "");
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -6649,9 +6672,9 @@ function getFrameElement(win) {
 
 // node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
 function getCssDimensions(element) {
-  const css139 = getComputedStyle2(element);
-  let width = parseFloat(css139.width) || 0;
-  let height = parseFloat(css139.height) || 0;
+  const css153 = getComputedStyle2(element);
+  let width = parseFloat(css153.width) || 0;
+  let height = parseFloat(css153.height) || 0;
   const hasOffset = isHTMLElement(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
@@ -6745,9 +6768,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css139 = getComputedStyle2(currentIFrame);
-      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css139.paddingLeft)) * iframeScale.x;
-      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css139.paddingTop)) * iframeScale.y;
+      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;
       x *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
@@ -6824,15 +6847,15 @@ function getClientRects(element) {
   return Array.from(element.getClientRects());
 }
 function getDocumentRect(element) {
-  const html65 = getDocumentElement(element);
+  const html73 = getDocumentElement(element);
   const scroll = getNodeScroll(element);
   const body = element.ownerDocument.body;
-  const width = max(html65.scrollWidth, html65.clientWidth, body.scrollWidth, body.clientWidth);
-  const height = max(html65.scrollHeight, html65.clientHeight, body.scrollHeight, body.clientHeight);
+  const width = max(html73.scrollWidth, html73.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html73.scrollHeight, html73.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
   if (getComputedStyle2(body).direction === "rtl") {
-    x += max(html65.clientWidth, body.clientWidth) - width;
+    x += max(html73.clientWidth, body.clientWidth) - width;
   }
   return {
     width,
@@ -6844,10 +6867,10 @@ function getDocumentRect(element) {
 var SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
-  const html65 = getDocumentElement(element);
+  const html73 = getDocumentElement(element);
   const visualViewport = win.visualViewport;
-  let width = html65.clientWidth;
-  let height = html65.clientHeight;
+  let width = html73.clientWidth;
+  let height = html73.clientHeight;
   let x = 0;
   let y = 0;
   if (visualViewport) {
@@ -6859,13 +6882,13 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
-  const windowScrollbarX = getWindowScrollBarX(html65);
+  const windowScrollbarX = getWindowScrollBarX(html73);
   if (windowScrollbarX <= 0) {
-    const doc = html65.ownerDocument;
+    const doc = html73.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(html65.clientWidth - body.clientWidth - bodyMarginInline);
+    const clippingStableScrollbarWidth = Math.abs(html73.clientWidth - body.clientWidth - bodyMarginInline);
     if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
       width -= clippingStableScrollbarWidth;
     }
@@ -7803,14 +7826,16 @@ var CsErrorBoundaryInternal = class extends CsBaseElement {
   render() {
     if (this._hasError) {
       return html21`
-        <cs-alert type="error" .visible=${true}>
-          <span slot="header">Something went wrong</span>
-          An error occurred. Please try refreshing.
-          <cs-button slot="action" @click=${this._retry}>Retry</cs-button>
-        </cs-alert>
+        <div class="error-boundary">
+          <cs-alert type="error" .visible=${true}>
+            <span slot="header">Something went wrong</span>
+            An error occurred. Please try refreshing.
+            <cs-button slot="action" @click=${this._retry}>Retry</cs-button>
+          </cs-alert>
+        </div>
       `;
     }
-    return html21`<slot></slot>`;
+    return html21`<div class="error-boundary"><slot></slot></div>`;
   }
 };
 __decorateClass([
@@ -9958,6 +9983,18 @@ var componentStyles26 = css63`
 
 // src/token/internal.ts
 var hostStyles28 = css64`:host { display: inline-block; }`;
+var inventedStyles3 = css64`
+  .label-tag {
+    display: inline-block;
+    margin-inline-start: var(--space-xxs-hwfkai, 4px);
+    font-size: var(--font-body-s-size-ukbcbk, 12px);
+    color: var(--color-text-body-secondary-fdstdf, #5f6b7a);
+  }
+  .description {
+    font-size: var(--font-body-s-size-ukbcbk, 12px);
+    color: var(--color-text-body-secondary-fdstdf, #5f6b7a);
+  }
+`;
 var CsTokenInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -9974,7 +10011,7 @@ var CsTokenInternal = class extends CsBaseElement {
     };
   }
   static {
-    this.styles = [sharedStyles, componentStyles26, hostStyles28];
+    this.styles = [sharedStyles, componentStyles26, hostStyles28, inventedStyles3];
   }
   render() {
     const isInline = this.variant === "inline";
@@ -10101,6 +10138,18 @@ var componentStyles27 = css65`
 
 // src/token-group/internal.ts
 var hostStyles29 = css66`:host { display: block; }`;
+var inventedStyles4 = css66`
+  .label-tag {
+    display: inline-block;
+    margin-inline-start: var(--space-xxs-hwfkai, 4px);
+    font-size: var(--font-body-s-size-ukbcbk, 12px);
+    color: var(--color-text-body-secondary-fdstdf, #5f6b7a);
+  }
+  .tags {
+    display: inline;
+    margin-inline-start: var(--space-xxs-hwfkai, 4px);
+  }
+`;
 var tokenListStyles = css66`
 .list {
   display: flex;
@@ -10146,7 +10195,7 @@ var CsTokenGroupInternal = class extends CsBaseElement {
     this._expanded = false;
   }
   static {
-    this.styles = [sharedStyles, componentStyles27, componentStyles26, tokenListStyles, hostStyles29];
+    this.styles = [sharedStyles, componentStyles27, componentStyles26, tokenListStyles, hostStyles29, inventedStyles4];
   }
   _onDismiss(itemIndex) {
     const item = this.items[itemIndex];
@@ -10631,6 +10680,7 @@ var CsContainerInternal = class extends CsBaseElement {
   render() {
     const rootClasses = {
       "root": true,
+      "refresh": true,
       [`variant-${this.variant}`]: true,
       "fit-height": this.fitHeight,
       "with-side-media": false,
@@ -10990,6 +11040,7 @@ var CsHeaderInternal = class extends CsBaseElement {
     const tag = this.headingTagOverride || variantToTag[this.variant] || "h2";
     const headingClasses = {
       "heading": true,
+      "heading-text": true,
       [`heading-variant-${this.variant}`]: true,
       [`heading-text-variant-${this.variant}`]: true
     };
@@ -11012,6 +11063,7 @@ var CsHeaderInternal = class extends CsBaseElement {
     const hasDescription = !!this.description || this._hasDescription;
     const rootClasses = {
       "root": true,
+      "refresh": true,
       [`root-variant-${this.variant}`]: true,
       "root-no-actions": !this._hasActions,
       "root-has-description": hasDescription
@@ -11806,7 +11858,7 @@ var CsFlashbarInternal = class extends CsBaseElement {
             <div class="flash-focus-container" tabindex="-1">
               <div class="flash-message">
                 ${item.header ? html33`<div class="flash-header">${item.header}</div>` : nothing15}
-                ${item.content ? html33`<div class="flash-content">${item.content}</div>` : nothing15}
+                ${item.content ? html33`<div class="flash-content"><span class="flash-text">${item.content}</span></div>` : nothing15}
               </div>
             </div>
             ${item.buttonText ? html33`<div class="action-button-wrapper">
@@ -12744,6 +12796,8 @@ var CsPromptInputInternal = class extends CsBaseElement {
     this.placeholder = "";
     this.disabled = false;
     this.readOnly = false;
+    this.invalid = false;
+    this.warning = false;
     this.actionButtonAriaLabel = "Submit";
     this.actionButtonIconName = "send";
     this.disableActionButton = false;
@@ -12778,11 +12832,15 @@ var CsPromptInputInternal = class extends CsBaseElement {
     const rootClasses = {
       "root": true,
       "disabled": this.disabled,
-      "textarea-readonly": this.readOnly
+      "textarea-readonly": this.readOnly,
+      "textarea-invalid": this.invalid,
+      "textarea-warning": this.warning && !this.invalid
     };
     const textareaClasses = {
       "textarea": true,
-      "textarea-readonly": this.readOnly
+      "textarea-readonly": this.readOnly,
+      "textarea-invalid": this.invalid,
+      "textarea-warning": this.warning && !this.invalid
     };
     return html36`
       <div class=${classMap32(rootClasses)}>
@@ -12825,6 +12883,12 @@ __decorateClass([
 __decorateClass([
   property35({ type: Boolean, reflect: true })
 ], CsPromptInputInternal.prototype, "readOnly", 2);
+__decorateClass([
+  property35({ type: Boolean, reflect: true })
+], CsPromptInputInternal.prototype, "invalid", 2);
+__decorateClass([
+  property35({ type: Boolean, reflect: true })
+], CsPromptInputInternal.prototype, "warning", 2);
 __decorateClass([
   property35({ type: String })
 ], CsPromptInputInternal.prototype, "actionButtonAriaLabel", 2);
@@ -12846,6 +12910,7 @@ customElements.define("cs-prompt-input", CsPromptInput);
 // src/copy-to-clipboard/internal.ts
 import { css as css80, html as html37 } from "lit";
 import { property as property36, state as state8 } from "lit/decorators.js";
+import { classMap as classMap33 } from "lit/directives/class-map.js";
 
 // src/copy-to-clipboard/styles.ts
 import { css as css79 } from "lit";
@@ -12929,18 +12994,25 @@ var CsCopyToClipboardInternal = class extends CsBaseElement {
   }
   render() {
     const isIconOnly = this.variant === "icon" || this.variant === "inline";
+    const isInline = this.variant === "inline";
     const buttonVariant = isIconOnly ? "icon" : "normal";
     const buttonText = this._getButtonText();
     const iconName = this._getIconName();
+    const rootClasses = {
+      "root": true,
+      "inline-container": isInline
+    };
     return html37`
-      <span class="root">
-        <cs-button
-          variant=${buttonVariant}
-          icon-name=${iconName}
-          ?disabled=${this.disabled}
-          aria-label=${isIconOnly ? buttonText : ""}
-          @click=${this._onCopyClick}
-        >${!isIconOnly ? buttonText : ""}</cs-button>
+      <span class=${classMap33(rootClasses)}>
+        <span class=${classMap33({ "inline-container-trigger": isInline })}>
+          <cs-button
+            variant=${buttonVariant}
+            icon-name=${iconName}
+            ?disabled=${this.disabled}
+            aria-label=${isIconOnly ? buttonText : ""}
+            @click=${this._onCopyClick}
+          >${!isIconOnly ? buttonText : ""}</cs-button>
+        </span>
       </span>
     `;
   }
@@ -13128,7 +13200,7 @@ customElements.define("cs-file-input", CsFileInput);
 // src/tabs/internal.ts
 import { css as css84, html as html39, nothing as nothing16 } from "lit";
 import { property as property38, state as state9 } from "lit/decorators.js";
-import { classMap as classMap33 } from "lit/directives/class-map.js";
+import { classMap as classMap34 } from "lit/directives/class-map.js";
 
 // src/tabs/styles.ts
 import { css as css83 } from "lit";
@@ -13522,11 +13594,11 @@ var CsTabsInternal = class extends CsBaseElement {
       "refresh": true
     };
     return html39`
-      <li class="tabs-tab" role="presentation">
-        <div class=${classMap33(headerContainerClasses)}>
+      <li class=${classMap34({ "tabs-tab": true, "tabs-tab-focusable": true })} role="presentation">
+        <div class=${classMap34(headerContainerClasses)}>
           <a
             role="tab"
-            class=${classMap33(linkClasses)}
+            class=${classMap34(linkClasses)}
             aria-selected=${isActive ? "true" : "false"}
             aria-disabled=${isDisabled ? "true" : "false"}
             aria-controls=${`panel-${tab.id}`}
@@ -13568,19 +13640,21 @@ var CsTabsInternal = class extends CsBaseElement {
     };
     const isContainerVariant = this.variant === "container" || this.variant === "stacked";
     return html39`
-      <div class=${classMap33(rootClasses)}>
-        <div class=${classMap33(headerClasses)}>
-          <ul class="tabs-header-list" role="tablist">
-            ${this.tabs.map((tab) => this._renderTab(tab))}
-          </ul>
+      <div class=${classMap34(rootClasses)}>
+        <div class=${classMap34(headerClasses)}>
+          <div class="tab-header-scroll-container">
+            <ul class="tabs-header-list" role="tablist">
+              ${this.tabs.map((tab) => this._renderTab(tab))}
+            </ul>
+          </div>
         </div>
-        <div class=${classMap33(contentWrapperClasses)}>
-          ${isContainerVariant ? html39`<div class=${classMap33(containerContentWrapperClasses)}>
+        <div class=${classMap34(contentWrapperClasses)}>
+          ${isContainerVariant ? html39`<div class=${classMap34(containerContentWrapperClasses)}>
                 ${this.tabs.map((tab) => html39`
                   <div
                     role="tabpanel"
                     id=${`panel-${tab.id}`}
-                    class=${classMap33({
+                    class=${classMap34({
       "tabs-content": true,
       "tabs-content-active": tab.id === activeId
     })}
@@ -13595,7 +13669,7 @@ var CsTabsInternal = class extends CsBaseElement {
                 <div
                   role="tabpanel"
                   id=${`panel-${tab.id}`}
-                  class=${classMap33({
+                  class=${classMap34({
       "tabs-content": true,
       "tabs-content-active": tab.id === activeId
     })}
@@ -13638,7 +13712,7 @@ customElements.define("cs-tabs", CsTabs);
 // src/expandable-section/internal.ts
 import { css as css86, html as html40, nothing as nothing17 } from "lit";
 import { property as property39, state as state10 } from "lit/decorators.js";
-import { classMap as classMap34 } from "lit/directives/class-map.js";
+import { classMap as classMap35 } from "lit/directives/class-map.js";
 
 // src/expandable-section/styles.ts
 import { css as css85 } from "lit";
@@ -14001,19 +14075,19 @@ var CsExpandableSectionInternal = class extends CsBaseElement {
       "header-wrapper": true
     };
     if (!tag) {
-      return html40`<div class=${classMap34(headingClasses)}>${content}</div>`;
+      return html40`<div class=${classMap35(headingClasses)}>${content}</div>`;
     }
     switch (tag) {
       case "h1":
-        return html40`<h1 class=${classMap34(headingClasses)}>${content}</h1>`;
+        return html40`<h1 class=${classMap35(headingClasses)}>${content}</h1>`;
       case "h3":
-        return html40`<h3 class=${classMap34(headingClasses)}>${content}</h3>`;
+        return html40`<h3 class=${classMap35(headingClasses)}>${content}</h3>`;
       case "h4":
-        return html40`<h4 class=${classMap34(headingClasses)}>${content}</h4>`;
+        return html40`<h4 class=${classMap35(headingClasses)}>${content}</h4>`;
       case "h5":
-        return html40`<h5 class=${classMap34(headingClasses)}>${content}</h5>`;
+        return html40`<h5 class=${classMap35(headingClasses)}>${content}</h5>`;
       default:
-        return html40`<h2 class=${classMap34(headingClasses)}>${content}</h2>`;
+        return html40`<h2 class=${classMap35(headingClasses)}>${content}</h2>`;
     }
   }
   _isContainerVariant() {
@@ -14053,10 +14127,10 @@ var CsExpandableSectionInternal = class extends CsBaseElement {
       "header-actions-wrapper": true
     };
     return html40`
-      <div class=${classMap34(rootClasses)}>
-        <div class=${classMap34(headerActionsWrapperClasses)}>
+      <div class=${classMap35(rootClasses)}>
+        <div class=${classMap35(headerActionsWrapperClasses)}>
           <div
-            class=${classMap34(wrapperClasses)}
+            class=${classMap35(wrapperClasses)}
             role="button"
             tabindex="0"
             aria-expanded=${expanded ? "true" : "false"}
@@ -14064,9 +14138,9 @@ var CsExpandableSectionInternal = class extends CsBaseElement {
             @click=${this._onHeaderClick}
             @keydown=${this._onHeaderKeyDown}
           >
-            <div class=${classMap34(buttonClasses)}>
-              <div class=${classMap34(iconContainerClasses)}>
-                <span class=${classMap34(iconClasses)}>
+            <div class=${classMap35(buttonClasses)}>
+              <div class=${classMap35(iconContainerClasses)}>
+                <span class=${classMap35(iconClasses)}>
                   <cs-icon name="caret-down-filled"></cs-icon>
                 </span>
               </div>
@@ -14078,7 +14152,7 @@ var CsExpandableSectionInternal = class extends CsBaseElement {
           </div>
           <slot name="headerActions"></slot>
         </div>
-        <div class=${classMap34(contentClasses)}>
+        <div class=${classMap35(contentClasses)}>
           <slot></slot>
         </div>
       </div>
@@ -14124,7 +14198,7 @@ customElements.define("cs-expandable-section", CsExpandableSection);
 // src/button-dropdown/internal.ts
 import { css as css89, html as html41, nothing as nothing18 } from "lit";
 import { property as property40, state as state11, query as query3 } from "lit/decorators.js";
-import { classMap as classMap35 } from "lit/directives/class-map.js";
+import { classMap as classMap36 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined20 } from "lit/directives/if-defined.js";
 
 // src/button-dropdown/styles.ts
@@ -14615,7 +14689,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     if (isIcon) {
       return html41`
         <button
-          class=${classMap35(buttonClasses)}
+          class=${classMap36(buttonClasses)}
           type="button"
           aria-haspopup="true"
           aria-expanded=${this._open}
@@ -14634,7 +14708,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     };
     return html41`
       <button
-        class=${classMap35(buttonClasses)}
+        class=${classMap36(buttonClasses)}
         type="button"
         aria-haspopup="true"
         aria-expanded=${this._open}
@@ -14645,7 +14719,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
       >
         ${this.loading ? html41`<span class="icon icon-left"><cs-icon name="status-in-progress"></cs-icon></span>` : nothing18}
         <slot></slot>
-        <span class=${classMap35(caretClasses)}>
+        <span class=${classMap36(caretClasses)}>
           <cs-icon name="caret-down-filled"></cs-icon>
         </span>
       </button>
@@ -14669,7 +14743,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
       };
       return html41`
               <li
-                class=${classMap35(itemClasses)}
+                class=${classMap36(itemClasses)}
                 role="menuitem"
                 aria-disabled=${item.disabled ? "true" : "false"}
                 @click=${(e) => this._onItemClick(item, e)}
@@ -14679,7 +14753,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
               >
                 ${item.href ? html41`
                     <a
-                      class=${classMap35(menuItemClasses)}
+                      class=${classMap36(menuItemClasses)}
                       href=${item.disabled ? "javascript:void(0)" : item.href}
                       tabindex="-1"
                       @click=${(e) => {
@@ -14690,7 +14764,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
                       <span>${item.text}</span>
                     </a>
                   ` : html41`
-                    <span class=${classMap35(menuItemClasses)} tabindex="-1">
+                    <span class=${classMap36(menuItemClasses)} tabindex="-1">
                       ${item.iconName ? html41`<span class="button-dropdown-item-element--icon"><cs-icon name=${item.iconName}></cs-icon></span>` : nothing18}
                       <span>${item.text}</span>
                     </span>
@@ -14912,7 +14986,7 @@ customElements.define("cs-button-group", CsButtonGroup);
 // src/breadcrumb-group/internal.ts
 import { css as css94, html as html43 } from "lit";
 import { property as property42 } from "lit/decorators.js";
-import { classMap as classMap36 } from "lit/directives/class-map.js";
+import { classMap as classMap37 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined22 } from "lit/directives/if-defined.js";
 
 // src/breadcrumb-group/styles.ts
@@ -15190,14 +15264,14 @@ var CsBreadcrumbGroupInternal = class extends CsBaseElement {
     };
     return html43`
       <li class="item">
-        <div class=${classMap36(breadcrumbClasses)}>
+        <div class=${classMap37(breadcrumbClasses)}>
           ${isLast ? html43`
-              <span class=${classMap36(anchorClasses)} aria-current="page">
+              <span class=${classMap37(anchorClasses)} aria-current="page">
                 <span class="breadcrumb-group-item--text">${item.text}</span>
               </span>
             ` : html43`
               <a
-                class=${classMap36(anchorClasses)}
+                class=${classMap37(anchorClasses)}
                 href=${item.href}
                 @click=${(e) => this._onItemClick(item, index, e)}
               >
@@ -15239,7 +15313,7 @@ customElements.define("cs-breadcrumb-group", CsBreadcrumbGroup);
 // src/select/internal.ts
 import { css as css97, html as html44, nothing as nothing19 } from "lit";
 import { property as property43, state as state12, query as query4 } from "lit/decorators.js";
-import { classMap as classMap37 } from "lit/directives/class-map.js";
+import { classMap as classMap38 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined23 } from "lit/directives/if-defined.js";
 
 // src/select/styles.ts
@@ -15768,7 +15842,7 @@ var CsSelectInternal = class extends Base6 {
     };
     return html44`
       <li
-        class=${classMap37(classes)}
+        class=${classMap38(classes)}
         role="option"
         aria-selected=${isSelected}
         aria-disabled=${ifDefined23(opt.disabled ? "true" : void 0)}
@@ -15834,7 +15908,7 @@ var CsSelectInternal = class extends Base6 {
     return html44`
       <div class="root">
         <button
-          class=${classMap37(triggerClasses)}
+          class=${classMap38(triggerClasses)}
           type="button"
           aria-haspopup="listbox"
           aria-expanded=${this._open}
@@ -15911,7 +15985,7 @@ customElements.define("cs-select", CsSelect);
 // src/multiselect/internal.ts
 import { css as css99, html as html45, nothing as nothing20 } from "lit";
 import { property as property44, state as state13, query as query5 } from "lit/decorators.js";
-import { classMap as classMap38 } from "lit/directives/class-map.js";
+import { classMap as classMap39 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined24 } from "lit/directives/if-defined.js";
 
 // src/multiselect/styles.ts
@@ -16384,7 +16458,7 @@ var CsMultiselectInternal = class extends Base7 {
     };
     return html45`
       <li
-        class=${classMap38(classes)}
+        class=${classMap39(classes)}
         role="option"
         aria-selected=${isSelected}
         aria-disabled=${ifDefined24(opt.disabled ? "true" : void 0)}
@@ -16393,7 +16467,7 @@ var CsMultiselectInternal = class extends Base7 {
       if (!opt.disabled) this._highlightedIndex = index;
     }}
       >
-        <div class=${classMap38(checkboxClasses)}></div>
+        <div class=${classMap39(checkboxClasses)}></div>
         <div class="option-content">
           <div class="option-label">
             ${opt.label || opt.value || ""}
@@ -16467,7 +16541,7 @@ var CsMultiselectInternal = class extends Base7 {
     return html45`
       <div class="root">
         <button
-          class=${classMap38(triggerClasses)}
+          class=${classMap39(triggerClasses)}
           type="button"
           aria-haspopup="listbox"
           aria-expanded=${this._open}
@@ -16554,7 +16628,7 @@ customElements.define("cs-multiselect", CsMultiselect);
 // src/autosuggest/internal.ts
 import { css as css102, html as html46, nothing as nothing21 } from "lit";
 import { property as property45, state as state14, query as query6 } from "lit/decorators.js";
-import { classMap as classMap39 } from "lit/directives/class-map.js";
+import { classMap as classMap40 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined25 } from "lit/directives/if-defined.js";
 
 // src/autosuggest/styles.ts
@@ -16952,7 +17026,7 @@ var CsAutosuggestInternal = class extends Base8 {
       <div class="root">
         <div class="layout-strut">
           <input
-            class=${classMap39(inputClasses)}
+            class=${classMap40(inputClasses)}
             type="text"
             .value=${this.value}
             placeholder=${ifDefined25(this.placeholder || void 0)}
@@ -16996,7 +17070,7 @@ var CsAutosuggestInternal = class extends Base8 {
     };
     return html46`
       <div
-        class=${classMap39(classes)}
+        class=${classMap40(classes)}
         id=${`${this._listboxId}-option-${index}`}
         role="option"
         aria-selected=${isHighlighted ? "true" : "false"}
@@ -17053,7 +17127,7 @@ customElements.define("cs-autosuggest", CsAutosuggest);
 // src/segmented-control/internal.ts
 import { css as css104, html as html47 } from "lit";
 import { property as property46 } from "lit/decorators.js";
-import { classMap as classMap40 } from "lit/directives/class-map.js";
+import { classMap as classMap41 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined26 } from "lit/directives/if-defined.js";
 
 // src/segmented-control/styles.ts
@@ -17323,9 +17397,9 @@ var CsSegmentedControlInternal = class extends CsBaseElement {
     const count = Math.min(this.options.length, 6);
     const segmentCountClass = `segment-count-${count}`;
     return html47`
-      <div class="root">
+      <div class=${classMap41({ "root": true, "refresh": true })}>
         <div
-          class=${classMap40({ "segment-part": true, [segmentCountClass]: true })}
+          class=${classMap41({ "segment-part": true, [segmentCountClass]: true })}
           role="group"
           aria-label=${ifDefined26(this.label || void 0)}
           aria-labelledby=${ifDefined26(!this.label && this.ariaLabelledby ? this.ariaLabelledby : void 0)}
@@ -17345,7 +17419,7 @@ var CsSegmentedControlInternal = class extends CsBaseElement {
     };
     return html47`
       <button
-        class=${classMap40(segmentClasses)}
+        class=${classMap41(segmentClasses)}
         type="button"
         ?disabled=${isDisabled}
         aria-pressed=${isSelected ? "true" : "false"}
@@ -17386,7 +17460,7 @@ customElements.define("cs-segmented-control", CsSegmentedControl);
 // src/cards/internal.ts
 import { css as css106, html as html48, nothing as nothing22 } from "lit";
 import { property as property47, state as state15 } from "lit/decorators.js";
-import { classMap as classMap41 } from "lit/directives/class-map.js";
+import { classMap as classMap42 } from "lit/directives/class-map.js";
 
 // src/cards/styles.ts
 import { css as css105 } from "lit";
@@ -17674,10 +17748,10 @@ var CsCardsInternal = class extends CsBaseElement {
     };
     const selectionLabel = this.ariaLabels?.itemSelectionLabel ? this.ariaLabels.itemSelectionLabel({ selectedItems: [...this.selectedItems] }, item) : void 0;
     return html48`
-      <li class=${classMap41(cardClasses)} data-item-index=${index}>
+      <li class=${classMap42(cardClasses)} data-item-index=${index}>
         <cs-container variant="default">
           <div slot="header" style="position: relative;">
-            <div class=${classMap41(cardHeaderClasses)}>
+            <div class=${classMap42(cardHeaderClasses)}>
               ${headerContent ?? nothing22}
             </div>
             ${isSelectable ? html48`
@@ -17715,7 +17789,7 @@ var CsCardsInternal = class extends CsBaseElement {
         </div>
         <slot name="filter"></slot>
         <slot name="pagination"></slot>
-        <div class=${classMap41(bodyClasses)}>
+        <div class=${classMap42(bodyClasses)}>
           ${showLoading ? html48`
             <div class="loading" role="status">
               <cs-spinner size="large"></cs-spinner>
@@ -17726,7 +17800,7 @@ var CsCardsInternal = class extends CsBaseElement {
               <slot name="empty"></slot>
             </div>
           ` : html48`
-            <ol class=${classMap41(listClasses)} aria-label=${groupLabel}>
+            <ol class=${classMap42(listClasses)} aria-label=${groupLabel}>
               ${this.items.map((item, i) => this._renderCard(item, i))}
             </ol>
           `}
@@ -18156,7 +18230,7 @@ customElements.define("cs-collection-preferences", CsCollectionPreferences);
 // src/progress-bar/internal.ts
 import { css as css110, html as html50, nothing as nothing24 } from "lit";
 import { property as property49 } from "lit/decorators.js";
-import { classMap as classMap42 } from "lit/directives/class-map.js";
+import { classMap as classMap43 } from "lit/directives/class-map.js";
 
 // src/progress-bar/styles.ts
 import { css as css109 } from "lit";
@@ -18307,6 +18381,33 @@ var componentStyles48 = css109`
 
 // src/progress-bar/internal.ts
 var hostStyles49 = css110`:host { display: block; }`;
+var inventedStyles5 = css110`
+  .label {
+    font-size: var(--font-body-m-size-sregvd, 14px);
+    font-weight: var(--font-body-m-weight-7v1jxr, 400);
+    color: var(--color-text-body-default-ajf1h5, #0f141a);
+    margin-block-end: var(--space-xxs-hwfkai, 4px);
+  }
+  .description {
+    font-size: var(--font-body-s-size-ukbcbk, 12px);
+    color: var(--color-text-body-secondary-fdstdf, #5f6b7a);
+    margin-block-end: var(--space-xs-ymlm0b, 8px);
+  }
+  .result-button-trigger {
+    display: inline-block;
+    margin-block-start: var(--space-xs-ymlm0b, 8px);
+    background: none;
+    border: none;
+    padding: 0;
+    color: var(--color-text-button-inline-icon-default-sm4ql6, #006ce0);
+    cursor: pointer;
+    font-size: inherit;
+  }
+  .result-button-trigger:hover {
+    color: var(--color-text-button-inline-icon-hover-rbyzfc, #002b66);
+    text-decoration: underline;
+  }
+`;
 var CsProgressBarInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -18316,7 +18417,7 @@ var CsProgressBarInternal = class extends CsBaseElement {
     this.ariaLabel = null;
   }
   static {
-    this.styles = [sharedStyles, componentStyles48, hostStyles49];
+    this.styles = [sharedStyles, componentStyles48, hostStyles49, inventedStyles5];
   }
   get _clampedValue() {
     return Math.round(Math.min(100, Math.max(0, this.value ?? 0)));
@@ -18337,8 +18438,12 @@ var CsProgressBarInternal = class extends CsBaseElement {
     };
     const statusType = this.status === "success" ? "success" : "error";
     return html50`
-      <div class=${classMap42(rootClasses)}>
-        <div class="label">
+      <div class=${classMap43(rootClasses)}>
+        <div class=${classMap43({
+      "label": true,
+      "label-flash": this.variant === "flash",
+      "label-key-value": this.variant === "key-value"
+    })}>
           <slot name="label"></slot>
         </div>
         <div class="description">
@@ -18348,7 +18453,7 @@ var CsProgressBarInternal = class extends CsBaseElement {
         ${isInProgress ? html50`
           <div class="progress-container">
             <progress
-              class=${classMap42(progressClasses)}
+              class=${classMap43(progressClasses)}
               value=${clamped}
               max="100"
               aria-label=${this.ariaLabel || "Progress"}
@@ -18359,7 +18464,12 @@ var CsProgressBarInternal = class extends CsBaseElement {
             <span class="percentage-container">${clamped}%</span>
           </div>
         ` : html50`
-          <div class="result-state ${this.resultButtonText ? "with-result-button" : ""}">
+          <div class=${classMap43({
+      "result-state": true,
+      "with-result-button": !!this.resultButtonText,
+      "result-container-error": this.status === "error",
+      "result-container-success": this.status === "success"
+    })}>
             <cs-status-indicator type=${statusType}>
               <slot name="resultText"></slot>
             </cs-status-indicator>
@@ -18412,7 +18522,7 @@ customElements.define("cs-progress-bar", CsProgressBar);
 // src/steps/internal.ts
 import { css as css112, html as html51, nothing as nothing25 } from "lit";
 import { property as property50 } from "lit/decorators.js";
-import { classMap as classMap43 } from "lit/directives/class-map.js";
+import { classMap as classMap44 } from "lit/directives/class-map.js";
 
 // src/steps/styles.ts
 import { css as css111 } from "lit";
@@ -18519,6 +18629,13 @@ var componentStyles49 = css111`
 
 // src/steps/internal.ts
 var hostStyles50 = css112`:host { display: block; }`;
+var inventedStyles6 = css112`
+  .title {
+    font-size: var(--font-body-m-size-sregvd, 14px);
+    font-weight: var(--font-heading-s-weight-k8ys7j, 700);
+    color: var(--color-text-body-default-ajf1h5, #0f141a);
+  }
+`;
 var iconNameMap4 = {
   "success": "status-positive",
   "error": "status-negative",
@@ -18536,7 +18653,7 @@ var CsStepsInternal = class extends CsBaseElement {
     this.ariaLabel = null;
   }
   static {
-    this.styles = [sharedStyles, componentStyles49, hostStyles50];
+    this.styles = [sharedStyles, componentStyles49, hostStyles50, inventedStyles6];
   }
   _renderIcon(step) {
     if (step.status === "loading") {
@@ -18597,7 +18714,7 @@ var CsStepsInternal = class extends CsBaseElement {
     };
     const total = this.steps.length;
     return html51`
-      <div class=${classMap43(rootClasses)}>
+      <div class=${classMap44(rootClasses)}>
         <ol
           class="list"
           role="list"
@@ -18708,6 +18825,12 @@ var layoutStyles = css114`
     gap: var(--space-scaled-m-m892r9, 16px);
   }
 `;
+var inventedStyles7 = css114`
+  .pair {
+    break-inside: avoid;
+    padding-block-end: var(--space-l-t419sm, 20px);
+  }
+`;
 var CsKeyValuePairsInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
@@ -18716,7 +18839,7 @@ var CsKeyValuePairsInternal = class extends CsBaseElement {
     this.ariaLabel = null;
   }
   static {
-    this.styles = [sharedStyles, componentStyles50, layoutStyles, hostStyles51];
+    this.styles = [sharedStyles, componentStyles50, layoutStyles, hostStyles51, inventedStyles7];
   }
   _renderPair(pair) {
     return html52`
@@ -19178,7 +19301,7 @@ customElements.define("cs-property-filter", CsPropertyFilter);
 // src/table/internal.ts
 import { css as css118, html as html54, nothing as nothing28 } from "lit";
 import { property as property53 } from "lit/decorators.js";
-import { classMap as classMap44 } from "lit/directives/class-map.js";
+import { classMap as classMap45 } from "lit/directives/class-map.js";
 
 // src/table/styles.ts
 import { css as css117 } from "lit";
@@ -19624,6 +19747,7 @@ var CsTableInternal = class extends CsBaseElement {
   render() {
     const rootClasses = {
       "root": true,
+      "is-visual-refresh": true,
       [`content-density-${this.contentDensity}`]: true
     };
     const headerSecondaryClasses = {
@@ -19636,9 +19760,9 @@ var CsTableInternal = class extends CsBaseElement {
       [`variant-${this.variant}`]: true
     };
     return html54`
-      <div class=${classMap44(rootClasses)}>
-        <div class=${classMap44(headerSecondaryClasses)} style=${this._hasHeader || this._hasTools ? nothing28 : "display:none"}>
-          <div class=${classMap44(headerControlsClasses)}>
+      <div class=${classMap45(rootClasses)}>
+        <div class=${classMap45(headerSecondaryClasses)} style=${this._hasHeader || this._hasTools ? nothing28 : "display:none"}>
+          <div class=${classMap45(headerControlsClasses)}>
             <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
             ${this._hasTools ? html54`
               <div class="tools">
@@ -19682,7 +19806,7 @@ var CsTableInternal = class extends CsBaseElement {
       [`variant-${this.variant}`]: true
     };
     return html54`
-      <div class=${classMap44(wrapperClasses)}>
+      <div class=${classMap45(wrapperClasses)}>
         <table class="table" role="table">
           <thead>
             <tr>
@@ -19730,13 +19854,13 @@ var CsTableInternal = class extends CsBaseElement {
     const widthStyle = col.width ? `width: ${typeof col.width === "number" ? `${col.width}px` : col.width}` : void 0;
     return html54`
       <th
-        class=${classMap44(cellClasses)}
+        class=${classMap45(cellClasses)}
         aria-sort=${ariaSort}
         style=${widthStyle ?? nothing28}
         @click=${() => this._onSort(col)}
       >
         <span class="header-cell-text">${col.header}</span>
-        ${isSortable ? html54`<span class=${classMap44(iconClasses)}><cs-icon name="caret-down-filled" size="small"></cs-icon></span>` : nothing28}
+        ${isSortable ? html54`<span class=${classMap45(iconClasses)}><cs-icon name="caret-down-filled" size="small"></cs-icon></span>` : nothing28}
       </th>
     `;
   }
@@ -19748,9 +19872,9 @@ var CsTableInternal = class extends CsBaseElement {
       "row-striped": this.stripedRows && index % 2 === 1
     };
     return html54`
-      <tr class=${classMap44(rowClasses)} @click=${() => this._onRowClick(item, index)}>
+      <tr class=${classMap45(rowClasses)} @click=${() => this._onRowClick(item, index)}>
         ${this._hasSelection ? this._renderSelectionCell(item) : nothing28}
-        ${this.columnDefinitions.map((col) => this._renderBodyCell(item, col))}
+        ${this.columnDefinitions.map((col) => this._renderBodyCell(item, col, index))}
       </tr>
     `;
   }
@@ -19777,15 +19901,17 @@ var CsTableInternal = class extends CsBaseElement {
       </td>
     `;
   }
-  _renderBodyCell(item, col) {
+  _renderBodyCell(item, col, rowIndex) {
     const cellClasses = {
       "body-cell": true,
-      "body-cell-wrap": this.wrapLines
+      "body-cell-wrap": this.wrapLines,
+      "body-cell-first-row": rowIndex === 0,
+      "body-cell-last-row": rowIndex === this.items.length - 1
     };
     const widthStyle = col.width ? `width: ${typeof col.width === "number" ? `${col.width}px` : col.width}` : void 0;
     return html54`
-      <td class=${classMap44(cellClasses)} style=${widthStyle ?? nothing28}>
-        ${col.cell(item)}
+      <td class=${classMap45(cellClasses)} style=${widthStyle ?? nothing28}>
+        <span class="body-cell-content">${col.cell(item)}</span>
       </td>
     `;
   }
@@ -19973,7 +20099,7 @@ customElements.define("cs-form", CsForm);
 // src/modal/internal.ts
 import { css as css122, html as html56 } from "lit";
 import { property as property55 } from "lit/decorators.js";
-import { classMap as classMap45 } from "lit/directives/class-map.js";
+import { classMap as classMap46 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined27 } from "lit/directives/if-defined.js";
 
 // src/modal/styles.ts
@@ -20309,12 +20435,12 @@ var CsModalInternal = class extends CsBaseElement {
     };
     return html56`
       <div
-        class=${classMap45(rootClasses)}
+        class=${classMap46(rootClasses)}
         @click=${this._onBackdropClick}
       >
-        <div class=${classMap45(focusLockClasses)}>
+        <div class=${classMap46(focusLockClasses)}>
           <div
-            class=${classMap45(dialogClasses)}
+            class=${classMap46(dialogClasses)}
             role="dialog"
             aria-modal="true"
             aria-label=${ifDefined27(this.header || void 0)}
@@ -20334,11 +20460,11 @@ var CsModalInternal = class extends CsBaseElement {
                 </div>
               </div>
 
-              <div class=${classMap45(contentClasses)}>
+              <div class=${classMap46(contentClasses)}>
                 <slot></slot>
               </div>
 
-              ${this._hasFooter ? html56`<div class=${classMap45(footerClasses)}><slot name="footer" @slotchange=${this._onFooterSlotChange}></slot></div>` : html56`<slot name="footer" @slotchange=${this._onFooterSlotChange} style="display:none"></slot>`}
+              ${this._hasFooter ? html56`<div class=${classMap46(footerClasses)}><slot name="footer" @slotchange=${this._onFooterSlotChange}></slot></div>` : html56`<slot name="footer" @slotchange=${this._onFooterSlotChange} style="display:none"></slot>`}
             </div>
           </div>
         </div>
@@ -20373,7 +20499,7 @@ customElements.define("cs-modal", CsModal);
 // src/file-upload/internal.ts
 import { css as css124, html as html57, nothing as nothing30 } from "lit";
 import { property as property56 } from "lit/decorators.js";
-import { classMap as classMap46 } from "lit/directives/class-map.js";
+import { classMap as classMap47 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined28 } from "lit/directives/if-defined.js";
 
 // src/file-upload/styles.ts
@@ -20567,7 +20693,7 @@ var CsFileUploadInternal = class extends CsBaseElement {
       "file-item-error": !!error
     };
     return html57`
-      <li class=${classMap46(itemClasses)}>
+      <li class=${classMap47(itemClasses)}>
         ${this.showFileThumbnail && isImage ? html57`<img class="file-thumbnail" src=${this._getThumbnailUrl(file)} alt="" />` : nothing30}
         <div class="file-info">
           <div class="file-name">${file.name}</div>
@@ -20614,7 +20740,7 @@ var CsFileUploadInternal = class extends CsBaseElement {
         ${this.errorText ? html57`<div class="error-text">${this.errorText}</div>` : nothing30}
 
         ${hasFiles ? html57`
-            <ul class=${classMap46(listClasses)} role="list">
+            <ul class=${classMap47(listClasses)} role="list">
               ${this.value.map((file, i) => this._renderFileItem(file, i))}
             </ul>
           ` : nothing30}
@@ -20673,7 +20799,7 @@ customElements.define("cs-file-upload", CsFileUpload);
 // src/calendar/internal.ts
 import { css as css126, html as html58, nothing as nothing31 } from "lit";
 import { property as property57, state as state18 } from "lit/decorators.js";
-import { classMap as classMap47 } from "lit/directives/class-map.js";
+import { classMap as classMap48 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined29 } from "lit/directives/if-defined.js";
 
 // src/calendar/styles.ts
@@ -21163,7 +21289,7 @@ var CsCalendarInternal = class extends CsBaseElement {
         };
         return html58`
                         <td
-                          class=${classMap47(classes)}
+                          class=${classMap48(classes)}
                           role="gridcell"
                           tabindex=${this._getTabIndex(day)}
                           aria-selected=${isSelected ? "true" : "false"}
@@ -21233,7 +21359,7 @@ customElements.define("cs-calendar", CsCalendar);
 // src/date-input/internal.ts
 import { css as css128, html as html59 } from "lit";
 import { property as property58 } from "lit/decorators.js";
-import { classMap as classMap48 } from "lit/directives/class-map.js";
+import { classMap as classMap49 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined30 } from "lit/directives/if-defined.js";
 import { consume as consume2 } from "@lit/context";
 
@@ -21314,7 +21440,7 @@ var CsDateInputInternal = class extends Base9 {
       <div class="root">
         <div class="input-container">
           <input
-            class=${classMap48(inputClasses)}
+            class=${classMap49(inputClasses)}
             type="text"
             .value=${this.value}
             placeholder=${ifDefined30(this.placeholder || void 0)}
@@ -21674,7 +21800,7 @@ customElements.define("cs-date-picker", CsDatePicker);
 // src/date-range-picker/internal.ts
 import { css as css133, html as html61, nothing as nothing33 } from "lit";
 import { property as property60, state as state20, query as query8 } from "lit/decorators.js";
-import { classMap as classMap49 } from "lit/directives/class-map.js";
+import { classMap as classMap50 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined32 } from "lit/directives/if-defined.js";
 
 // src/date-range-picker/styles.ts
@@ -22239,7 +22365,7 @@ var CsDateRangePickerInternal = class extends Base11 {
       };
       weekCells.push(html61`
         <td
-          class=${classMap49(dayClasses)}
+          class=${classMap50(dayClasses)}
           role="gridcell"
           aria-selected=${isEdge ? "true" : "false"}
           aria-disabled=${!enabled ? "true" : "false"}
@@ -22292,13 +22418,13 @@ var CsDateRangePickerInternal = class extends Base11 {
       <div class="mode-switch" role="tablist"
         aria-label=${this.i18nStrings?.modeSelectionLabel ?? "Date range mode"}>
         <button
-          class=${classMap49({ "mode-tab": true, "mode-tab-active": this._effectiveMode === "absolute" })}
+          class=${classMap50({ "mode-tab": true, "mode-tab-active": this._effectiveMode === "absolute" })}
           role="tab"
           aria-selected=${this._effectiveMode === "absolute" ? "true" : "false"}
           @click=${() => this._onModeSwitch("absolute")}
         >${absLabel}</button>
         <button
-          class=${classMap49({ "mode-tab": true, "mode-tab-active": this._effectiveMode === "relative" })}
+          class=${classMap50({ "mode-tab": true, "mode-tab-active": this._effectiveMode === "relative" })}
           role="tab"
           aria-selected=${this._effectiveMode === "relative" ? "true" : "false"}
           @click=${() => this._onModeSwitch("relative")}
@@ -22344,7 +22470,7 @@ var CsDateRangePickerInternal = class extends Base11 {
       const isSelected = this._selectedRelativeKey === option.key;
       const label = this.i18nStrings?.formatRelativeRange ? this.i18nStrings.formatRelativeRange(option) : `Last ${option.amount} ${option.unit}${option.amount !== 1 ? "s" : ""}`;
       return html61`
-              <label class=${classMap49({
+              <label class=${classMap50({
         "relative-option": true,
         "relative-option-selected": isSelected
       })}>
@@ -22403,7 +22529,7 @@ var CsDateRangePickerInternal = class extends Base11 {
       <div class="root">
         <div class="label ${this.disabled ? "" : "label-enabled"}">
           <button
-            class=${classMap49(triggerClasses)}
+            class=${classMap50(triggerClasses)}
             type="button"
             aria-haspopup="dialog"
             aria-expanded=${this._open ? "true" : "false"}
@@ -22424,7 +22550,7 @@ var CsDateRangePickerInternal = class extends Base11 {
           </button>
         </div>
         ${this._open ? html61`
-          <div class=${classMap49(dropdownClasses)} role="dialog"
+          <div class=${classMap50(dropdownClasses)} role="dialog"
             aria-label=${ifDefined32(this.ariaLabel || "Date range picker")}
             aria-modal="true">
             ${this._renderModeSwitch()}
@@ -22644,7 +22770,7 @@ var componentStyles60 = css134`
 // src/input/internal.ts
 import { css as css135, html as html62, nothing as nothing34 } from "lit";
 import { property as property61 } from "lit/decorators.js";
-import { classMap as classMap50 } from "lit/directives/class-map.js";
+import { classMap as classMap51 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined33 } from "lit/directives/if-defined.js";
 import { consume as consume4 } from "@lit/context";
 var Base12 = FormAssociatedMixin(CsBaseElement);
@@ -22744,13 +22870,20 @@ var CsInputInternal = class extends Base12 {
       "input-has-clear-button": this._showClearButton,
       [`input-type-${this.type}`]: true
     };
+    const inputContainerClasses = {
+      "input-container": true,
+      "input-invalid": this._isInvalid,
+      "input-warning": this._isWarning,
+      "input-readonly": this.readOnly,
+      [`input-type-${this.type}`]: true
+    };
     const controlId = this._formFieldCtx.controlId || void 0;
     const ariaLabelledby = this._formFieldCtx.ariaLabelledby || void 0;
     return html62`
       <div class="root">
-        <div class="input-container">
+        <div class=${classMap51(inputContainerClasses)}>
           <input
-            class=${classMap50(inputClasses)}
+            class=${classMap51(inputClasses)}
             type=${this.type}
             .value=${this.value}
             placeholder=${ifDefined33(this.placeholder || void 0)}
@@ -22949,7 +23082,7 @@ customElements.define("cs-attribute-editor", CsAttributeEditor);
 // src/tag-editor/internal.ts
 import { css as css138, html as html64, nothing as nothing36 } from "lit";
 import { property as property63 } from "lit/decorators.js";
-import { classMap as classMap51 } from "lit/directives/class-map.js";
+import { classMap as classMap52 } from "lit/directives/class-map.js";
 
 // src/tag-editor/styles.ts
 import { css as css137 } from "lit";
@@ -23111,7 +23244,7 @@ var CsTagEditorInternal = class extends CsBaseElement {
     const keyLabel = this.i18nStrings?.keyHeader ?? "Key";
     const valueLabel = this.i18nStrings?.valueHeader ?? "Value";
     return html64`
-      <div class=${classMap51(rowClasses)} data-row-index="${index}">
+      <div class=${classMap52(rowClasses)} data-row-index="${index}">
         <cs-form-field .label=${keyLabel}>
           <cs-input
             .value=${tag.key}
@@ -23208,9 +23341,3172 @@ __decorateClass([
 var CsTagEditor = class extends CsTagEditorInternal {
 };
 customElements.define("cs-tag-editor", CsTagEditor);
+
+// src/wizard/internal.ts
+import { css as css140, html as html65, nothing as nothing37 } from "lit";
+import { property as property64 } from "lit/decorators.js";
+import { classMap as classMap53 } from "lit/directives/class-map.js";
+
+// src/wizard/styles.ts
+import { css as css139 } from "lit";
+var componentStyles62 = css139`
+.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;
+}
+
+.wizard.refresh {
+  column-gap: var(--space-xl-jfy3x4, 24px);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
+  row-gap: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+.wizard.refresh.small-container {
+  grid-template-columns: minmax(0, 1fr) 0;
+  grid-template-rows: auto auto 1fr;
+  row-gap: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+
+.wizard:not(.refresh) {
+  display: flex;
+}
+.wizard:not(.refresh).small-container {
+  flex-direction: column;
+  gap: var(--space-s-tvghoh, 12px);
+}
+
+.navigation.refresh {
+  grid-column: 1;
+  grid-row: 1/span 2;
+  padding-block-start: calc(var(--space-xs-ymlm0b, 8px) + var(--space-scaled-xxs-pfm1nx, 4px));
+
+
+}
+.navigation.refresh > ul.refresh {
+  position: relative;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block-start: var(--space-scaled-xxs-pfm1nx, 4px);
+  padding-block-end: 0;
+  padding-inline: 0;
+  inline-size: 260px;
+  box-sizing: border-box;
+}
+.navigation.refresh > ul.refresh > li {
+  display: grid;
+  column-gap: var(--space-xs-ymlm0b, 8px);
+  grid-template-columns: var(--space-l-2ud1p3, 20px) 1fr;
+  grid-template-rows: repeat(2, auto);
+  padding-block: 0;
+  padding-inline: 0;
+}
+.navigation.refresh > ul.refresh > li > hr {
+  background-color: var(--color-border-divider-default-nr68jt, #c6c6cd);
+  border-block: 0;
+  border-inline: 0;
+  grid-column: 1;
+  block-size: 100%;
+  inline-size: var(--space-xxxs-pajhad, 2px);
+}
+.navigation.refresh > ul.refresh > li > .number {
+  color: var(--color-text-small-m1tr70, #656871);
+  font-size: var(--font-size-body-s-smc8cv, 12px);
+  grid-column: 2;
+  grid-row: 1;
+}
+.navigation.refresh > ul.refresh > li > a {
+  align-items: start;
+  column-gap: var(--space-xs-ymlm0b, 8px);
+  cursor: pointer;
+  display: grid;
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  grid-column: 1/span 2;
+  grid-row: 2;
+  grid-template-columns: var(--space-l-2ud1p3, 20px) 1fr;
+}
+.navigation.refresh > ul.refresh > li > a > .circle {
+  border-start-start-radius: 100%;
+  border-start-end-radius: 100%;
+  border-end-start-radius: 100%;
+  border-end-end-radius: 100%;
+  grid-column: 1;
+  block-size: 10px;
+  justify-self: center;
+  margin-block-start: 6px;
+  inline-size: 10px;
+}
+.navigation.refresh > ul.refresh > li > a > .title {
+  min-inline-size: 0;
+  word-break: break-word;
+  grid-column: 2;
+}
+:host-context([data-awsui-focus-visible=true]) .navigation.refresh > ul.refresh > li > a:focus {
+  outline: thin dotted;
+  outline: var(--border-link-focus-ring-outline-1p0hnu, 0);
+  outline-offset: 2px;
+  outline-color: var(--color-border-item-focused-uk47pl, #006ce0);
+  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 var(--border-link-focus-ring-shadow-spread-39uvxr, 2px) var(--color-border-item-focused-uk47pl, #006ce0);
+}
+.navigation.refresh > ul.refresh > li:first-child > hr {
+  grid-row: 2/span 2;
+}
+.navigation.refresh > ul.refresh > li:not(:first-child) > .number {
+  margin-block-start: var(--space-m-dsumyt, 16px);
+}
+.navigation.refresh > ul.refresh > li:last-child > hr {
+  grid-row: 1;
+}
+.navigation.refresh > ul.refresh > li:only-of-type > hr {
+  display: none;
+}
+.navigation.refresh > ul.refresh > li:not(:first-child):not(:last-child) > hr {
+  grid-row: 1/span 3;
+}
+.navigation.refresh > ul.refresh > li.active > a {
+  cursor: text;
+}
+.navigation.refresh > ul.refresh > li.active > a > .circle {
+  background-color: var(--color-background-control-checked-ka7kc2, #006ce0);
+  box-shadow: 0 0 0 3px var(--color-background-container-content-6u8rvp, #ffffff), 0 0 0 5px var(--color-background-control-checked-ka7kc2, #006ce0), 0 0 0 7px var(--color-background-container-content-6u8rvp, #ffffff);
+}
+.navigation.refresh > ul.refresh > li.active > a > .title {
+  color: var(--color-background-control-checked-ka7kc2, #006ce0);
+  font-weight: 700;
+}
+.navigation.refresh > ul.refresh > li.disabled > a {
+  cursor: text;
+}
+.navigation.refresh > ul.refresh > li.disabled > a > .circle {
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+  box-shadow: 0 0 0 2px var(--color-text-interactive-disabled-1bqmrl, #b4b4bb), 0 0 0 4px var(--color-background-container-content-6u8rvp, #ffffff);
+}
+.navigation.refresh > ul.refresh > li.disabled > a > .title {
+  color: var(--color-text-status-inactive-gy7337, #656871);
+}
+.navigation.refresh > ul.refresh > li.enabled > a > .circle {
+  background-color: var(--color-text-interactive-default-ugh9wp, #424650);
+  box-shadow: 0 0 0 2px var(--color-text-interactive-default-ugh9wp, #424650), 0 0 0 4px var(--color-background-container-content-6u8rvp, #ffffff);
+}
+.navigation.refresh > ul.refresh > li.enabled > a > .title {
+  color: var(--color-text-interactive-default-ugh9wp, #424650);
+}
+.navigation.refresh > ul.refresh > li.enabled > a:hover > .circle {
+  background-color: var(--color-background-control-checked-ka7kc2, #006ce0);
+  box-shadow: 0 0 0 2px var(--color-background-control-checked-ka7kc2, #006ce0), 0 0 0 4px var(--color-background-container-content-6u8rvp, #ffffff);
+}
+.navigation.refresh > ul.refresh > li.enabled > a:hover > .title {
+  color: var(--color-background-control-checked-ka7kc2, #006ce0);
+}
+
+.navigation:not(.refresh) {
+  color: var(--color-text-disabled-rox5hg, #b4b4bb);
+  display: inline-block;
+  margin-inline-end: calc(2 * var(--space-xxxl-aut1u7, 40px));
+  min-inline-size: 200px;
+  padding-block-start: var(--space-xxs-hwfkai, 4px);
+  inline-size: 200px;
+
+
+}
+.navigation:not(.refresh) > ul:not(.refresh) {
+  list-style: none;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
+}
+.navigation:not(.refresh) > ul:not(.refresh) > li {
+  min-inline-size: 0;
+  word-break: break-word;
+  padding-block: 0 var(--space-scaled-m-m892r9, 16px);
+}
+.navigation:not(.refresh) > ul:not(.refresh) > li:not(:first-child) {
+  margin-block-start: var(--space-scaled-m-m892r9, 16px);
+}
+.navigation:not(.refresh) > ul:not(.refresh) > li:not(:last-child) {
+  border-block-end: var(--border-divider-list-width-tdfx1x, 1px) solid var(--color-border-layout-ayg8vb, #c6c6cd);
+}
+
+.form:not(.refresh) {
+  min-inline-size: 0;
+  word-break: break-word;
+  inline-size: 100%;
+}
+.form:not(.refresh) > .form-header {
+  position: relative;
+  margin-block-end: var(--space-scaled-m-m892r9, 16px);
+}
+
+.form.refresh {
+  min-inline-size: 0;
+  word-break: break-word;
+  display: contents;
+}
+.form.refresh > .form-header {
+  grid-column: 2;
+  grid-row: 1;
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+}
+.form.refresh > .form-header > .form-header-content {
+  padding-block-start: calc(var(--space-xl-jfy3x4, 24px) + var(--space-scaled-xxxs-oo06c7, 2px));
+  padding-block-end: var(--space-scaled-s-8ozaad, 12px);
+}
+.form.refresh > .form-component {
+  grid-column: 2;
+  grid-row: 2;
+}
+.form.refresh.small-container > .form-header {
+  grid-column: 1/span 2;
+  grid-row: 2;
+}
+.form.refresh.small-container > .form-header > .form-header-content {
+  padding-block-start: 0;
+}
+.form.refresh.small-container > .form-component {
+  grid-column: 1/span 2;
+  grid-row: 3;
+}
+
+.navigation.hidden {
+  display: none;
+}
+
+.collapsed-steps {
+  grid-column: 1/span 2;
+  grid-row: 1;
+}
+
+/* Override fixed sidebar width for expandable navigation */
+.navigation.refresh.collapsed-steps-navigation {
+  grid-column: unset;
+  grid-row: unset;
+  padding-block-start: 0;
+}
+.navigation.refresh.collapsed-steps-navigation > ul.refresh {
+  inline-size: 100%;
+}
+
+.form-header-component-wrapper {
+  outline: none;
+}
+:host-context([data-awsui-focus-visible=true]) .form-header-component-wrapper:focus {
+  outline: thin dotted;
+  outline: var(--border-link-focus-ring-outline-1p0hnu, 0);
+  outline-offset: 2px;
+  outline-color: var(--color-border-item-focused-uk47pl, #006ce0);
+  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 var(--border-link-focus-ring-shadow-spread-39uvxr, 2px) var(--color-border-item-focused-uk47pl, #006ce0);
+}
+
+.navigation-link-active {
+  font-weight: 700;
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+}
+
+.navigation-link-disabled {
+  color: var(--color-text-status-inactive-gy7337, #656871);
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+`;
+
+// src/wizard/internal.ts
+var hostStyles64 = css140`:host { display: block; }`;
+var CsWizardInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.steps = [];
+    this.activeStepIndex = 0;
+    this.allowSkipTo = false;
+    this.submitButtonText = "Submit";
+    this.isLoadingNextStep = false;
+    this.i18nStrings = {};
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles62, hostStyles64];
+  }
+  get _cancelText() {
+    return this.i18nStrings?.cancelButton ?? "Cancel";
+  }
+  get _previousText() {
+    return this.i18nStrings?.previousButton ?? "Previous";
+  }
+  get _nextText() {
+    return this.i18nStrings?.nextButton ?? "Next";
+  }
+  get _submitText() {
+    return this.submitButtonText ?? this.i18nStrings?.submitButton ?? "Submit";
+  }
+  get _optionalText() {
+    return this.i18nStrings?.optional ?? "- optional";
+  }
+  get _clampedIndex() {
+    const max2 = Math.max(0, this.steps.length - 1);
+    return Math.min(Math.max(0, this.activeStepIndex), max2);
+  }
+  get _isLastStep() {
+    return this._clampedIndex === this.steps.length - 1;
+  }
+  _onCancel() {
+    fireNonCancelableEvent(this, "cancel", {});
+  }
+  _onPrevious() {
+    if (this._clampedIndex > 0) {
+      fireNonCancelableEvent(this, "navigate", {
+        requestedStepIndex: this._clampedIndex - 1,
+        reason: "previous"
+      });
+    }
+  }
+  _onNext() {
+    if (this._isLastStep) {
+      fireNonCancelableEvent(this, "submit", {});
+    } else {
+      fireNonCancelableEvent(this, "navigate", {
+        requestedStepIndex: this._clampedIndex + 1,
+        reason: "next"
+      });
+    }
+  }
+  _onStepClick(index) {
+    if (index < this._clampedIndex) {
+      fireNonCancelableEvent(this, "navigate", {
+        requestedStepIndex: index,
+        reason: "step"
+      });
+    }
+  }
+  _stepNumberLabel(n) {
+    return this.i18nStrings?.stepNumberLabel?.(n) ?? `Step ${n}`;
+  }
+  _renderNavigation() {
+    const activeIdx = this._clampedIndex;
+    const navLabel = this.i18nStrings?.navigationAriaLabel ?? "Steps";
+    return html65`
+      <nav class="navigation refresh" aria-label=${navLabel}>
+        <ul class="refresh" role="list">
+          ${this.steps.map((step, i) => {
+      const isActive = i === activeIdx;
+      const isEnabled = i < activeIdx;
+      const isDisabled = i > activeIdx;
+      const classes = {
+        "active": isActive,
+        "enabled": isEnabled,
+        "disabled": isDisabled
+      };
+      const stepNum = i + 1;
+      const optionalLabel = step.isOptional ? ` ${this._optionalText}` : "";
+      return html65`
+              <li class=${classMap53(classes)}>
+                <hr aria-hidden="true" />
+                <span class="number">${this._stepNumberLabel(stepNum)}</span>
+                <a
+                  class="navigation-link"
+                  role=${isEnabled ? "button" : "text"}
+                  tabindex=${isEnabled ? "0" : "-1"}
+                  aria-current=${isActive ? "step" : nothing37}
+                  aria-disabled=${isDisabled ? "true" : nothing37}
+                  @click=${isEnabled ? () => this._onStepClick(i) : nothing37}
+                  @keydown=${isEnabled ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this._onStepClick(i);
+        }
+      } : nothing37}
+                >
+                  <span class="circle"></span>
+                  <span class="title">${step.title}${optionalLabel}</span>
+                </a>
+              </li>
+            `;
+    })}
+        </ul>
+      </nav>
+    `;
+  }
+  _renderFormHeader() {
+    const step = this.steps[this._clampedIndex];
+    if (!step) return html65``;
+    const optionalLabel = step.isOptional ? ` ${this._optionalText}` : "";
+    return html65`
+      <div class="form-header">
+        <div class="form-header-content">
+          <h2 class="form-header-component-wrapper" tabindex="-1">
+            ${this._stepNumberLabel(this._clampedIndex + 1)}
+            <span>${step.title}${optionalLabel}</span>
+          </h2>
+          ${step.description ? html65`<p>${step.description}</p>` : nothing37}
+        </div>
+      </div>
+    `;
+  }
+  _renderFormContent() {
+    const step = this.steps[this._clampedIndex];
+    if (!step) return html65``;
+    return html65`
+      <div class="form-component">
+        ${step.errorText ? html65`
+          <cs-alert type="error" aria-label=${this.i18nStrings?.errorIconAriaLabel ?? "Error"}>
+            ${step.errorText}
+          </cs-alert>
+        ` : nothing37}
+        <div class="step-content">${step.content}</div>
+      </div>
+    `;
+  }
+  _renderActionButtons() {
+    const isFirst = this._clampedIndex === 0;
+    return html65`
+      <div class="action-buttons">
+        <div class="action-buttons-left">
+          <cs-button
+            variant="link"
+            @click=${() => this._onCancel()}
+          >${this._cancelText}</cs-button>
+        </div>
+        <div class="action-buttons-right">
+          ${!isFirst ? html65`
+            <cs-button
+              variant="normal"
+              @click=${() => this._onPrevious()}
+            >${this._previousText}</cs-button>
+          ` : nothing37}
+          <cs-button
+            variant="primary"
+            ?loading=${this.isLoadingNextStep}
+            @click=${() => this._onNext()}
+          >${this._isLastStep ? this._submitText : this._nextText}</cs-button>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    if (this.steps.length === 0) {
+      return html65`<div class="root"></div>`;
+    }
+    return html65`
+      <div class="root">
+        <div class="wizard refresh" role="group">
+          ${this._renderNavigation()}
+          <div class="form refresh">
+            ${this._renderFormHeader()}
+            ${this._renderFormContent()}
+          </div>
+        </div>
+        ${this._renderActionButtons()}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property64({ attribute: false })
+], CsWizardInternal.prototype, "steps", 2);
+__decorateClass([
+  property64({ type: Number })
+], CsWizardInternal.prototype, "activeStepIndex", 2);
+__decorateClass([
+  property64({ type: Boolean })
+], CsWizardInternal.prototype, "allowSkipTo", 2);
+__decorateClass([
+  property64({ type: String })
+], CsWizardInternal.prototype, "submitButtonText", 2);
+__decorateClass([
+  property64({ type: Boolean })
+], CsWizardInternal.prototype, "isLoadingNextStep", 2);
+__decorateClass([
+  property64({ attribute: false })
+], CsWizardInternal.prototype, "i18nStrings", 2);
+
+// src/wizard/index.ts
+var CsWizard = class extends CsWizardInternal {
+};
+customElements.define("cs-wizard", CsWizard);
+
+// src/code-editor/internal.ts
+import { css as css142, html as html66 } from "lit";
+import { property as property65 } from "lit/decorators.js";
+import { classMap as classMap54 } from "lit/directives/class-map.js";
+
+// src/code-editor/styles.ts
+import { css as css141 } from "lit";
+var componentStyles63 = css141`
+.pane {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  flex: 1;
+  border-block-start: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-default-2bfcfq, #dedee3);
+  border-end-start-radius: var(--border-radius-code-editor-5palck, 8px);
+  border-end-end-radius: var(--border-radius-code-editor-5palck, 8px);
+  background: var(--color-background-code-editor-status-bar-yjtxod, #f3f3f7);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+}
+.pane__close-container {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: calc(var(--space-s-tvghoh, 12px) / 2);
+}
+.pane__list {
+  flex: 1;
+  overflow: auto;
+  max-block-size: 100%;
+  box-sizing: border-box;
+  margin-inline-end: calc(var(--line-height-body-m-2mh3ke, 20px) + 2 * var(--space-xs-ymlm0b, 8px));
+}
+.pane__table {
+  inline-size: 100%;
+  border-spacing: 0;
+  margin-block: var(--space-s-tvghoh, 12px);
+  margin-inline: 0;
+}
+.pane__item > .pane__cell {
+  border-block-start: var(--border-item-width-miijiw, 2px) solid var(--color-transparent-i61gs1, transparent);
+  border-block-end: var(--border-item-width-miijiw, 2px) solid var(--color-transparent-i61gs1, transparent);
+}
+.pane__item > .pane__cell:first-child {
+  border-inline-start: var(--border-item-width-miijiw, 2px) solid var(--color-transparent-i61gs1, transparent);
+  border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
+}
+.pane__item > .pane__cell:last-child {
+  border-inline-end: var(--border-item-width-miijiw, 2px) solid var(--color-transparent-i61gs1, transparent);
+  border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
+}
+.pane__item--highlighted, .pane__item:hover, .pane__item:focus {
+  cursor: pointer;
+  outline: none;
+}
+.pane__item--highlighted > .pane__cell, .pane__item:hover > .pane__cell, .pane__item:focus > .pane__cell {
+  background-color: var(--color-background-code-editor-pane-item-hover-z6k9mr, #ebebf0);
+}
+.pane__item--highlighted > .pane__cell, .pane__item:hover > .pane__cell, .pane__item:focus > .pane__cell {
+  border-block-start: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94);
+  border-block-end: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94);
+}
+.pane__item--highlighted > .pane__cell:first-child, .pane__item:hover > .pane__cell:first-child, .pane__item:focus > .pane__cell:first-child {
+  border-inline-start: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94);
+  border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
+}
+.pane__item--highlighted > .pane__cell:last-child, .pane__item:hover > .pane__cell:last-child, .pane__item:focus > .pane__cell:last-child {
+  border-inline-end: var(--border-item-width-miijiw, 2px) solid var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94);
+  border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
+}
+.pane__location, .pane__description {
+  padding-block: var(--space-xxs-hwfkai, 4px);
+  padding-inline: var(--space-s-tvghoh, 12px);
+}
+.pane__location {
+  vertical-align: baseline;
+  white-space: nowrap;
+  padding-inline-start: calc(var(--space-l-2ud1p3, 20px) + var(--space-s-tvghoh, 12px));
+}
+.pane__description {
+  padding-inline-end: 0;
+  min-inline-size: 0;
+  word-break: break-word;
+}
+
+.focus-lock {
+  block-size: 100%;
+}
+
+.code-editor {
+  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: block;
+  border-block: var(--border-width-field-2xc78x, 1px) solid var(--color-border-code-editor-default-2bfcfq, #dedee3);
+  border-inline: var(--border-width-field-2xc78x, 1px) solid var(--color-border-code-editor-default-2bfcfq, #dedee3);
+  border-start-start-radius: var(--border-radius-code-editor-5palck, 8px);
+  border-start-end-radius: var(--border-radius-code-editor-5palck, 8px);
+  border-end-start-radius: var(--border-radius-code-editor-5palck, 8px);
+  border-end-end-radius: var(--border-radius-code-editor-5palck, 8px);
+  inline-size: 100%;
+}
+
+.editor {
+  position: absolute;
+  inset: 0;
+}
+.editor:focus {
+  position: relative;
+}
+.editor:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(3px - 1px);
+}
+.editor: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);
+}
+.editor:focus {
+  position: absolute;
+  overflow: visible;
+}
+
+.editor-refresh {
+  border-start-start-radius: calc(var(--border-radius-code-editor-5palck, 8px) - var(--border-item-width-miijiw, 2px));
+  border-start-end-radius: calc(var(--border-radius-code-editor-5palck, 8px) - var(--border-item-width-miijiw, 2px));
+}
+
+.status-bar {
+  container-type: inline-size;
+  display: flex;
+  vertical-align: middle;
+  border-block-start: var(--border-width-field-2xc78x, 1px) solid var(--color-border-code-editor-default-2bfcfq, #dedee3);
+  background-color: var(--color-background-code-editor-status-bar-yjtxod, #f3f3f7);
+  min-inline-size: 0;
+  word-break: break-word;
+}
+.status-bar-with-hidden-pane {
+  border-end-start-radius: var(--border-radius-code-editor-5palck, 8px);
+  border-end-end-radius: var(--border-radius-code-editor-5palck, 8px);
+}
+.status-bar__left {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  padding-inline-start: var(--space-l-2ud1p3, 20px);
+  border-inline-end: var(--border-width-field-2xc78x, 1px) solid var(--color-border-code-editor-default-2bfcfq, #dedee3);
+}
+.status-bar__right {
+  display: flex;
+  align-items: center;
+}
+.status-bar__language-mode, .status-bar__cursor-position {
+  display: inline-block;
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  padding-block: var(--space-scaled-xs-xwoogq, 8px);
+  padding-inline: var(--space-s-tvghoh, 12px);
+}
+.status-bar__cog-button {
+  padding-block: calc(var(--space-scaled-xxs-pfm1nx, 4px) - 1px);
+  padding-inline: calc(var(--space-xs-ymlm0b, 8px) - 2px);
+}
+
+.tab-list {
+  align-items: center;
+  display: inline-flex;
+}
+
+.tab-button {
+  position: relative;
+  display: inline-flex;
+  gap: var(--space-xxs-hwfkai, 4px);
+  padding-block: var(--space-scaled-xs-xwoogq, 8px);
+  padding-inline: var(--space-s-tvghoh, 12px);
+  line-height: inherit;
+  color: var(--color-text-status-error-ksqavh, #db0000);
+  background: none;
+  border-block: none;
+  border-inline: none;
+  font-weight: bold;
+  outline: none;
+  cursor: pointer;
+  z-index: 1;
+}
+.tab-button:hover {
+  color: var(--color-text-code-editor-tab-button-error-avwh01, #ffffff);
+  background: var(--color-text-status-error-ksqavh, #db0000);
+}
+.tab-button::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: var(--border-active-width-axzm24, 4px);
+  border-start-start-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
+  border-start-end-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
+  border-end-start-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
+  border-end-end-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
+  background: var(--color-text-status-error-ksqavh, #db0000);
+  opacity: 0;
+}
+.tab-button--refresh {
+  padding-block-end: calc(var(--space-scaled-xs-xwoogq, 8px) + var(--border-active-width-axzm24, 4px) - 2px);
+}
+.tab-button--warnings {
+  color: var(--color-text-status-warning-6meo06, #855900);
+}
+.tab-button--warnings:hover {
+  background: var(--color-text-status-warning-6meo06, #855900);
+}
+.tab-button--warnings::after {
+  background: var(--color-text-status-warning-6meo06, #855900);
+}
+.tab-button--active::after {
+  opacity: 1;
+}
+.tab-button--refresh::after {
+  transition: opacity var(--motion-duration-refresh-only-medium-5rbn3k, 165ms) var(--motion-easing-refresh-only-c-cxy2sk, cubic-bezier(0.84, 0, 0.16, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .tab-button--refresh::after {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .tab-button--refresh::after, .awsui-mode-entering .tab-button--refresh::after {
+  animation: none;
+  transition: none;
+}
+.tab-button--disabled {
+  font-weight: normal;
+  color: var(--color-text-code-editor-status-bar-disabled-xxmtlc, #8c8c94);
+  cursor: default;
+}
+.tab-button--disabled:hover {
+  color: var(--color-text-code-editor-status-bar-disabled-xxmtlc, #8c8c94);
+  background: transparent;
+}
+.tab-button--disabled::after {
+  display: none;
+}
+:host-context([data-awsui-focus-visible=true]) .tab-button:focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .tab-button:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(var(--space-code-editor-status-focus-outline-gutter-o87hra, -7px) - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .tab-button:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * var(--space-code-editor-status-focus-outline-gutter-o87hra, -7px));
+  inset-block-start: calc(-1 * var(--space-code-editor-status-focus-outline-gutter-o87hra, -7px));
+  inline-size: calc(100% + var(--space-code-editor-status-focus-outline-gutter-o87hra, -7px) + var(--space-code-editor-status-focus-outline-gutter-o87hra, -7px));
+  block-size: calc(100% + var(--space-code-editor-status-focus-outline-gutter-o87hra, -7px) + var(--space-code-editor-status-focus-outline-gutter-o87hra, -7px));
+  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);
+}
+.tab-button--divider {
+  display: inline-block;
+  block-size: var(--line-height-body-m-2mh3ke, 20px);
+  inline-size: var(--border-code-editor-status-divider-width-4we6jf, 1px);
+  background: var(--color-border-tabs-divider-f5t9va, #c6c6cd);
+  vertical-align: middle;
+}
+@supports (contain: inline-size) {
+  @container not (max-width: 500px) {
+    .tab-button > .count {
+      display: none;
+    }
+    .tab-button > .text {
+      display: inline;
+    }
+  }
+  @container (max-width: 500px) {
+    .tab-button > .count {
+      display: inline;
+    }
+    .tab-button > .text {
+      display: none;
+    }
+  }
+}
+@supports not (contain: inline-size) {
+  .tab-button > .count {
+    display: none;
+  }
+  .tab-button > .text {
+    display: inline;
+  }
+}
+
+.loading-screen,
+.error-screen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 480px;
+  color: var(--color-text-body-secondary-yna5sb, #424650);
+  background: var(--color-background-code-editor-loading-6nwpin, #f9f9fa);
+  border-start-start-radius: var(--border-radius-code-editor-5palck, 8px);
+  border-start-end-radius: var(--border-radius-code-editor-5palck, 8px);
+  border-end-start-radius: var(--border-radius-code-editor-5palck, 8px);
+  border-end-end-radius: var(--border-radius-code-editor-5palck, 8px);
+}
+
+.error-screen {
+  color: var(--color-text-status-error-ksqavh, #db0000);
+}
+`;
+
+// src/code-editor/internal.ts
+var hostStyles65 = css142`
+  :host { display: block; }
+  .editor-wrapper {
+    position: relative;
+    overflow: hidden;
+  }
+  .editor-textarea {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    resize: none;
+    border: none;
+    outline: none;
+    padding: 0;
+    padding-inline-start: var(--space-xl-jfy3x4, 24px);
+    font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "Source Code Pro", "source-code-pro", monospace;
+    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);
+    background: transparent;
+    tab-size: 4;
+  }
+  .editor-textarea:read-only {
+    cursor: default;
+  }
+  .line-numbers {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    padding-block: 0;
+    padding-inline-end: var(--space-xs-ymlm0b, 8px);
+    text-align: end;
+    user-select: none;
+    pointer-events: none;
+    font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "Source Code Pro", "source-code-pro", monospace;
+    font-size: var(--font-size-body-m-a7nh2n, 14px);
+    line-height: var(--line-height-body-m-2mh3ke, 20px);
+    color: var(--color-text-small-m1tr70, #656871);
+    min-inline-size: 40px;
+    background: var(--color-background-code-editor-status-bar-yjtxod, #f3f3f7);
+    border-inline-end: 1px solid var(--color-border-code-editor-default-2bfcfq, #dedee3);
+  }
+  .line-number {
+    display: block;
+    padding-inline-end: var(--space-xs-ymlm0b, 8px);
+    padding-inline-start: var(--space-xs-ymlm0b, 8px);
+  }
+`;
+var CsCodeEditorInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.language = "javascript";
+    this.editorContentHeight = 480;
+    this.loading = false;
+    this.readOnly = false;
+    this.ariaLabel = null;
+    this._cursorRow = 1;
+    this._cursorCol = 1;
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles63, hostStyles65];
+  }
+  get _lineCount() {
+    if (!this.value) return 1;
+    return this.value.split("\n").length;
+  }
+  get _displayLanguage() {
+    return this.languageLabel ?? this.language;
+  }
+  _onInput(e) {
+    const textarea = e.target;
+    const newValue = textarea.value;
+    fireNonCancelableEvent(this, "change", {
+      value: newValue
+    });
+  }
+  _onKeyUp(e) {
+    const textarea = e.target;
+    this._updateCursorPosition(textarea);
+  }
+  _onClick(e) {
+    const textarea = e.target;
+    this._updateCursorPosition(textarea);
+  }
+  _updateCursorPosition(textarea) {
+    const pos = textarea.selectionStart;
+    const textBefore = textarea.value.substring(0, pos);
+    const lines = textBefore.split("\n");
+    this._cursorRow = lines.length;
+    this._cursorCol = (lines[lines.length - 1]?.length ?? 0) + 1;
+    this.requestUpdate();
+  }
+  _cursorPositionLabel(row, col) {
+    return this.i18nStrings?.cursorPosition?.(row, col) ?? `Ln ${row}, Col ${col}`;
+  }
+  _renderLoading() {
+    const loadingText = this.i18nStrings?.loadingState ?? "Loading code editor";
+    return html66`
+      <div class="loading-screen" style="height: ${this.editorContentHeight}px">
+        <cs-spinner size="large"></cs-spinner>
+        <span style="margin-inline-start: 8px">${loadingText}</span>
+      </div>
+    `;
+  }
+  _renderLineNumbers() {
+    const count = this._lineCount;
+    const lines = [];
+    for (let i = 1; i <= count; i++) {
+      lines.push(i);
+    }
+    return html66`
+      <div class="line-numbers" aria-hidden="true">
+        ${lines.map((n) => html66`<span class="line-number">${n}</span>`)}
+      </div>
+    `;
+  }
+  _renderEditor() {
+    return html66`
+      <div
+        class="editor-wrapper"
+        style="height: ${this.editorContentHeight}px"
+      >
+        ${this._renderLineNumbers()}
+        <textarea
+          class="editor-textarea"
+          .value=${this.value}
+          ?readonly=${this.readOnly}
+          aria-label=${this.ariaLabel ?? "Code editor"}
+          spellcheck="false"
+          autocorrect="off"
+          autocapitalize="off"
+          @input=${this._onInput}
+          @keyup=${this._onKeyUp}
+          @click=${this._onClick}
+        ></textarea>
+      </div>
+    `;
+  }
+  _renderStatusBar() {
+    const statusClasses = {
+      "status-bar": true,
+      "status-bar-with-hidden-pane": true
+    };
+    return html66`
+      <div class=${classMap54(statusClasses)} role="group" aria-label=${this.i18nStrings?.statusBarGroupAriaLabel ?? "Status bar"}>
+        <div class="status-bar__left">
+          <span class="status-bar__language-mode">${this._displayLanguage}</span>
+          <span class="status-bar__cursor-position">${this._cursorPositionLabel(this._cursorRow, this._cursorCol)}</span>
+        </div>
+        <div class="status-bar__right">
+          <div class="status-bar__cog-button">
+            <cs-button
+              variant="icon"
+              icon-name="settings"
+              aria-label=${this.i18nStrings?.preferencesButtonAriaLabel ?? "Preferences"}
+            ></cs-button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    return html66`
+      <div class="code-editor" role="group" aria-label=${this.i18nStrings?.editorGroupAriaLabel ?? "Code editor"}>
+        ${this.loading ? this._renderLoading() : html66`
+          ${this._renderEditor()}
+          ${this._renderStatusBar()}
+        `}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property65({ type: String })
+], CsCodeEditorInternal.prototype, "value", 2);
+__decorateClass([
+  property65({ type: String })
+], CsCodeEditorInternal.prototype, "language", 2);
+__decorateClass([
+  property65({ type: String })
+], CsCodeEditorInternal.prototype, "languageLabel", 2);
+__decorateClass([
+  property65({ type: Number })
+], CsCodeEditorInternal.prototype, "editorContentHeight", 2);
+__decorateClass([
+  property65({ type: Boolean })
+], CsCodeEditorInternal.prototype, "loading", 2);
+__decorateClass([
+  property65({ type: Boolean })
+], CsCodeEditorInternal.prototype, "readOnly", 2);
+__decorateClass([
+  property65({ attribute: false })
+], CsCodeEditorInternal.prototype, "themes", 2);
+__decorateClass([
+  property65({ attribute: false })
+], CsCodeEditorInternal.prototype, "preferences", 2);
+__decorateClass([
+  property65({ attribute: false })
+], CsCodeEditorInternal.prototype, "i18nStrings", 2);
+__decorateClass([
+  property65({ type: String })
+], CsCodeEditorInternal.prototype, "ariaLabel", 2);
+
+// src/code-editor/index.ts
+var CsCodeEditor = class extends CsCodeEditorInternal {
+};
+customElements.define("cs-code-editor", CsCodeEditor);
+
+// src/top-navigation/internal.ts
+import { css as css144, html as html67, nothing as nothing38 } from "lit";
+import { property as property66 } from "lit/decorators.js";
+import { classMap as classMap55 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined34 } from "lit/directives/if-defined.js";
+
+// src/top-navigation/styles.ts
+import { css as css143 } from "lit";
+var componentStyles64 = css143`
+.top-navigation {
+  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;
+  background: var(--color-background-container-content-6u8rvp, #ffffff);
+  border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+.top-navigation > .padding-box {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  block-size: calc(var(--space-xxxl-aut1u7, 40px) + var(--space-scaled-m-m892r9, 16px));
+  padding-inline-start: var(--space-xxl-32srm4, 32px);
+}
+.top-navigation.medium > .padding-box, .top-navigation.narrow > .padding-box {
+  padding-inline-start: var(--space-l-2ud1p3, 20px);
+}
+.top-navigation.medium > .padding-box {
+  block-size: calc(var(--space-xxxl-aut1u7, 40px) + var(--space-scaled-xs-xwoogq, 8px));
+  padding-inline-end: 0;
+}
+.top-navigation.narrow > .padding-box {
+  block-size: var(--space-xxxl-aut1u7, 40px);
+}
+
+.virtual {
+  inline-size: 9000px;
+}
+
+.hidden {
+  position: absolute !important;
+  inset-block-start: -9999px !important;
+  inset-inline-start: -9999px !important;
+  visibility: hidden;
+}
+
+.hidden *:not(#awsui_\9 _k5dlb_vnjbq_1) {
+  visibility: hidden;
+}
+
+.identity {
+  min-inline-size: 0;
+}
+.identity > .identity-link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--color-text-top-navigation-title-en0v40, #0f141a);
+}
+.identity > .identity-link:hover {
+  color: var(--color-text-accent-n1kmht, #006ce0);
+}
+:host-context([data-awsui-focus-visible=true]) .identity > .identity-link:focus {
+  outline: thin dotted;
+  outline: var(--border-link-focus-ring-outline-1p0hnu, 0);
+  outline-offset: 2px;
+  outline-color: var(--color-border-item-focused-uk47pl, #006ce0);
+  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 var(--border-link-focus-ring-shadow-spread-39uvxr, 2px) var(--color-border-item-focused-uk47pl, #006ce0);
+}
+.identity.no-logo {
+  min-inline-size: 100px;
+}
+
+.logo {
+  display: block;
+  max-block-size: var(--space-xxl-32srm4, 32px);
+  margin-inline-end: var(--space-s-tvghoh, 12px);
+  inline-size: auto;
+  flex-shrink: 0;
+  min-inline-size: 10px;
+}
+.logo.narrow {
+  max-block-size: var(--space-xl-jfy3x4, 24px);
+}
+
+.title {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-m-170yiy, 18px);
+  line-height: var(--line-height-heading-m-uoaqdh, 22px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  font-weight: var(--font-weight-heading-m-zf82dr, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.no-logo > .identity-link > .title {
+  font-weight: 700;
+}
+
+.inputs {
+  display: flex;
+  flex: 1;
+  padding-block: 0;
+  padding-inline: var(--space-m-dsumyt, 16px);
+  justify-content: center;
+}
+
+.search {
+  inline-size: 100%;
+  max-inline-size: 340px;
+}
+.search-expanded {
+  max-inline-size: none;
+}
+
+.utilities {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: row;
+  align-items: stretch;
+  block-size: 100%;
+}
+.medium > .padding-box > .utilities, .narrow > .padding-box > .utilities {
+  padding-inline-start: 0;
+}
+
+.utility-wrapper {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+  padding-block: 0;
+  padding-inline: var(--space-m-dsumyt, 16px);
+}
+.utility-wrapper::after {
+  display: block;
+  position: absolute;
+  content: "";
+  inline-size: 1px;
+  inset-inline-end: 0;
+  inset-block: var(--space-s-tvghoh, 12px);
+  background: var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+.utility-wrapper:last-of-type::after {
+  display: none;
+}
+
+.utility-type-button-link {
+  padding-block: 0;
+  padding-inline: var(--space-l-2ud1p3, 20px);
+}
+
+.utility-type-menu-dropdown {
+  padding-block: 0;
+  padding-inline: var(--space-s-tvghoh, 12px);
+  align-items: stretch;
+}
+.utility-type-menu-dropdown:not(.narrow):last-of-type, .utility-type-menu-dropdown:not(.medium):last-of-type {
+  padding-inline-end: 0;
+}
+
+.utility-type-button-primary-button {
+  inset-inline-start: -1px;
+  border-inline-start: 1px solid var(--color-background-container-content-6u8rvp, #ffffff);
+}
+.utility-type-button-primary-button::after {
+  display: none;
+}
+
+.utility-link-icon {
+  margin-inline-start: var(--space-xxs-hwfkai, 4px);
+}
+
+.utility-button-external-icon {
+  display: inline-block;
+}
+
+.offset-right-none {
+  margin-inline-end: 0;
+}
+
+.offset-right-l {
+  margin-inline-end: var(--space-xxs-hwfkai, 4px);
+}
+
+.offset-right-xxl {
+  margin-inline-end: var(--space-m-dsumyt, 16px);
+}
+
+/* Overflow Menu */
+.overflow-menu-drawer {
+  position: fixed;
+  block-size: 100%;
+  inline-size: 100%;
+  z-index: 1001;
+}
+
+.overflow-menu {
+  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;
+  background: var(--color-background-container-content-6u8rvp, #ffffff);
+  block-size: 100%;
+}
+
+.overflow-menu-header {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--font-panel-header-line-height-8xb2qj, 22px);
+  padding-block: var(--space-scaled-m-m892r9, 16px);
+  padding-inline: var(--space-scaled-m-m892r9, 16px);
+  border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+.overflow-menu-header-text {
+  color: var(--color-text-heading-default-izpp46, #0f141a);
+  flex: 1;
+  margin-block: 0;
+  margin-inline: 0;
+  text-align: center;
+}
+.overflow-menu-header-text--title {
+
+  font-size: var(--font-panel-header-size-33h9j8, 18px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  line-height: var(--font-panel-header-line-height-8xb2qj, 22px);
+  font-weight: var(--font-weight-heading-l-0t6dwc, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.overflow-menu-header-text--secondary {
+  font-size: var(--font-header-h2-description-size-g2wws3, 14px);
+  line-height: var(--font-header-h2-description-line-height-ts2s6o, 20px);
+  font-weight: 400;
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+
+.overflow-menu-control {
+  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;
+  inline-size: 100%;
+  padding-block: 0;
+  padding-inline: 0;
+  background: none;
+  border-block: none;
+  border-inline: none;
+}
+.overflow-menu-list-item-utility > .overflow-menu-control {
+  padding-block: var(--space-scaled-m-m892r9, 16px);
+  padding-inline: var(--space-scaled-m-m892r9, 16px);
+}
+.overflow-menu-control:hover {
+  color: var(--color-text-accent-n1kmht, #006ce0);
+  cursor: pointer;
+}
+.overflow-menu-control-link {
+  text-decoration: none;
+}
+.overflow-menu-control-expandable-menu-trigger {
+  color: var(--color-text-dropdown-group-label-2tmyik, #424650);
+  font-weight: bold;
+}
+.overflow-menu-control-expandable-menu-trigger:hover {
+  color: var(--color-text-accent-n1kmht, #006ce0);
+}
+:host-context([data-awsui-focus-visible=true]) .overflow-menu-control:focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .overflow-menu-control:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(var(--space-button-focus-outline-gutter-jj138g, 4px) - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .overflow-menu-control: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);
+}
+
+.overflow-menu-list {
+  list-style: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+.overflow-menu-list-submenu {
+  margin-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  margin-inline: 0;
+}
+
+.overflow-menu-list-item {
+  box-sizing: border-box;
+  letter-spacing: var(--font-button-letter-spacing-ufowe3, 0.005em);
+}
+.overflow-menu-list-item-icon {
+  margin-inline-end: var(--space-xxs-hwfkai, 4px);
+}
+.overflow-menu-list-item-text {
+  flex: 1;
+}
+.overflow-menu-list-item-utility {
+  font-weight: var(--font-weight-button-0eg20c, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+.overflow-menu-list-item-submenu {
+  border-block-start: var(--border-divider-section-width-uwo8my, 1px) solid transparent;
+  border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid transparent;
+  padding-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  padding-inline: var(--space-scaled-l-sej05l, 20px);
+}
+.overflow-menu-list-item-dropdown-menu {
+  padding-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  padding-inline: var(--space-scaled-s-8ozaad, 12px);
+}
+.overflow-menu-list-item-expandable {
+  border-block-start-color: var(--color-border-divider-default-nr68jt, #c6c6cd);
+  border-block-end-color: var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+
+.icon {
+  transform: rotate(0deg);
+  transition: transform var(--motion-duration-rotate-180-cxi9g7, 135ms) var(--motion-easing-rotate-180-7a58rc, cubic-bezier(0.165, 0.84, 0.44, 1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .icon {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .icon, .awsui-mode-entering .icon {
+  animation: none;
+  transition: none;
+}
+.icon-open {
+  transform: rotate(-180deg);
+}
+`;
+
+// src/top-navigation/internal.ts
+var hostStyles66 = css144`:host { display: block; }`;
+var CsTopNavigationInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.utilities = [];
+    this.i18nStrings = {};
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles64, hostStyles66];
+  }
+  _onIdentityClick(e) {
+    const isModified = e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey;
+    if (isModified) return;
+    e.preventDefault();
+    fireNonCancelableEvent(this, "identityClick", {
+      href: this.identity?.href
+    });
+  }
+  _onUtilityButtonClick(utility, e) {
+    const isModified = e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey;
+    if (utility.href && !isModified) {
+      e.preventDefault();
+    }
+    fireNonCancelableEvent(this, "utilityClick", {
+      type: utility.type,
+      text: utility.text,
+      href: utility.href
+    });
+  }
+  _renderIdentity() {
+    if (!this.identity) return nothing38;
+    const hasLogo = !!this.identity.logo;
+    const identityClasses = {
+      "identity": true,
+      "no-logo": !hasLogo
+    };
+    return html67`
+      <div class=${classMap55(identityClasses)}>
+        <a
+          class="identity-link"
+          href=${ifDefined34(this.identity.href)}
+          @click=${(e) => this._onIdentityClick(e)}
+        >
+          ${hasLogo ? html67`<img class="logo" src=${this.identity.logo.src} alt=${ifDefined34(this.identity.logo.alt)} />` : nothing38}
+          ${this.identity.title ? html67`<span class="title">${this.identity.title}</span>` : nothing38}
+        </a>
+      </div>
+    `;
+  }
+  _renderButtonUtility(utility) {
+    const isPrimary = utility.variant === "primary-button";
+    const wrapperClasses = {
+      "utility-wrapper": true,
+      "utility-type-button-link": !isPrimary,
+      "utility-type-button-primary-button": isPrimary
+    };
+    if (utility.href) {
+      return html67`
+        <div class=${classMap55(wrapperClasses)}>
+          <a
+            class="overflow-menu-control overflow-menu-control-link"
+            href=${utility.href}
+            target=${ifDefined34(utility.target)}
+            rel=${ifDefined34(utility.rel || (utility.target === "_blank" ? "noopener noreferrer" : void 0))}
+            aria-label=${ifDefined34(utility.ariaLabel)}
+            @click=${(e) => this._onUtilityButtonClick(utility, e)}
+          >
+            ${utility.iconName ? html67`<span class="utility-link-icon"><cs-icon name=${utility.iconName}></cs-icon></span>` : nothing38}
+            ${utility.text ? html67`<span>${utility.text}</span>` : nothing38}
+            ${utility.external ? html67`<span class="utility-button-external-icon"><cs-icon name="external" size="inherit"></cs-icon></span>` : nothing38}
+          </a>
+        </div>
+      `;
+    }
+    return html67`
+      <div class=${classMap55(wrapperClasses)}>
+        <button
+          type="button"
+          class="overflow-menu-control"
+          aria-label=${ifDefined34(utility.ariaLabel)}
+          @click=${(e) => this._onUtilityButtonClick(utility, e)}
+        >
+          ${utility.iconName ? html67`<span class="utility-link-icon"><cs-icon name=${utility.iconName}></cs-icon></span>` : nothing38}
+          ${utility.text ? html67`<span>${utility.text}</span>` : nothing38}
+        </button>
+      </div>
+    `;
+  }
+  _renderMenuDropdownUtility(utility) {
+    const wrapperClasses = {
+      "utility-wrapper": true,
+      "utility-type-menu-dropdown": true
+    };
+    return html67`
+      <div class=${classMap55(wrapperClasses)}>
+        <cs-button-dropdown
+          .items=${utility.items}
+          variant="normal"
+          aria-label=${ifDefined34(utility.ariaLabel)}
+        >
+          ${utility.iconName ? html67`<cs-icon name=${utility.iconName}></cs-icon>` : nothing38}
+          ${utility.text ?? ""}
+        </cs-button-dropdown>
+      </div>
+    `;
+  }
+  _renderUtility(utility) {
+    if (utility.type === "menu-dropdown") {
+      return this._renderMenuDropdownUtility(utility);
+    }
+    return this._renderButtonUtility(utility);
+  }
+  render() {
+    return html67`
+      <nav class="top-navigation" aria-label=${ifDefined34(this.ariaLabel || "Site")}>
+        <div class="padding-box">
+          ${this._renderIdentity()}
+          <div class="inputs">
+            <div class="search">
+              <slot name="search"></slot>
+            </div>
+          </div>
+          <div class="utilities">
+            ${this.utilities.map((u) => this._renderUtility(u))}
+          </div>
+        </div>
+      </nav>
+    `;
+  }
+};
+__decorateClass([
+  property66({ type: Object })
+], CsTopNavigationInternal.prototype, "identity", 2);
+__decorateClass([
+  property66({ type: Array })
+], CsTopNavigationInternal.prototype, "utilities", 2);
+__decorateClass([
+  property66({ type: Object })
+], CsTopNavigationInternal.prototype, "i18nStrings", 2);
+
+// src/top-navigation/index.ts
+var CsTopNavigation = class extends CsTopNavigationInternal {
+};
+customElements.define("cs-top-navigation", CsTopNavigation);
+
+// src/side-navigation/internal.ts
+import { css as css146, html as html68, nothing as nothing39 } from "lit";
+import { property as property67, state as state21 } from "lit/decorators.js";
+import { classMap as classMap56 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined35 } from "lit/directives/if-defined.js";
+
+// src/side-navigation/styles.ts
+import { css as css145 } from "lit";
+var componentStyles65 = css145`
+.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  min-inline-size: 0;
+  word-break: break-word;
+}
+
+.header {
+  font-size: var(--font-panel-header-size-33h9j8, 18px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  line-height: var(--font-panel-header-line-height-8xb2qj, 22px);
+  font-weight: var(--font-weight-heading-l-0t6dwc, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: var(--space-panel-header-vertical-ckfgmy, 20px);
+  padding-inline-start: var(--space-panel-nav-left-wn0n7h, 28px);
+  padding-inline-end: calc(var(--space-scaled-xxl-6wgq96, 32px) + var(--space-xl-jfy3x4, 24px));
+}
+
+.header-link {
+  font-size: var(--font-panel-header-size-33h9j8, 18px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  line-height: var(--font-panel-header-line-height-8xb2qj, 22px);
+  font-weight: var(--font-weight-heading-l-0t6dwc, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  color: var(--color-text-heading-default-izpp46, #0f141a);
+  min-block-size: var(--font-panel-header-line-height-8xb2qj, 22px);
+  display: flex;
+}
+.header-link--has-logo > .header-link-text {
+  font-weight: 400;
+  align-self: center;
+}
+
+.header-logo {
+  margin-inline-end: var(--space-s-tvghoh, 12px);
+  margin-block-start: var(--space-xxxs-pajhad, 2px);
+  max-inline-size: calc(1.25 * var(--size-icon-big-7pq9l3, 32px));
+  align-self: flex-start;
+}
+.header-logo--stretched {
+  max-inline-size: 100%;
+  margin-inline-end: 0;
+}
+
+.items-control {
+  padding-inline: var(--space-l-2ud1p3, 20px);
+}
+
+.list-container {
+  margin-block-end: var(--space-panel-content-bottom-24c6lu, 40px);
+}
+
+.items-control,
+.list-container {
+  margin-block-start: var(--space-panel-content-top-qvd1dr, 20px);
+}
+.with-toolbar > .divider-header + .items-control,
+.with-toolbar > .divider-header + .list-container {
+  margin-block-start: 0;
+}
+
+.list {
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline-end: 0;
+  padding-inline-start: var(--space-l-2ud1p3, 20px);
+}
+
+.list-variant-root {
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline-start: var(--space-panel-nav-left-wn0n7h, 28px);
+  padding-inline-end: var(--space-panel-side-right-8wwirc, 24px);
+}
+.list-variant-root--first {
+  margin-block-start: 0;
+}
+
+.list-variant-expandable-link-group {
+  padding-inline-start: var(--space-xxxl-aut1u7, 40px);
+}
+
+.list-item {
+  margin-block: var(--space-scaled-xs-xwoogq, 8px);
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  list-style: none;
+}
+.list-variant-root--first > .list-item:first-child {
+  margin-block-start: 0px;
+}
+
+.section,
+.expandable-link-group {
+  margin-inline-start: calc(-1 * var(--space-l-2ud1p3, 20px));
+}
+.section--no-ident,
+.expandable-link-group--no-ident {
+  margin-inline-start: 0;
+}
+
+.section {
+  margin-block: calc(var(--space-scaled-2x-l-u5ida5, 20px) - var(--border-divider-section-width-uwo8my, 1px));
+
+}
+.section.refresh {
+  margin-block: calc(var(--space-scaled-2x-m-4euqsk, 16px) - var(--border-divider-section-width-uwo8my, 1px));
+}
+.list-variant-root--first > .list-item:first-child > .section {
+  margin-block-start: 0px;
+}
+.section > div {
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.list-variant-section-group {
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.section-group {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-m-170yiy, 18px);
+  line-height: var(--line-height-heading-m-uoaqdh, 22px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  font-weight: var(--font-weight-heading-m-zf82dr, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.link {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-secondary-yna5sb, #424650);
+  font-weight: 400;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+.link-active {
+  font-weight: var(--font-wayfinding-link-active-weight-ny4hup, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  color: var(--color-text-accent-n1kmht, #006ce0);
+}
+
+.header-link,
+.link {
+  text-decoration: none;
+}
+.header-link:hover,
+.link:hover {
+  color: var(--color-text-accent-n1kmht, #006ce0);
+}
+.header-link:focus,
+.link:focus {
+  outline: none;
+}
+.header-link:hover, .header-link:focus, .link:hover, .link:focus {
+  text-decoration: none;
+}
+:host-context([data-awsui-focus-visible=true]) .header-link:focus,
+:host-context([data-awsui-focus-visible=true]) .link:focus {
+  outline: thin dotted;
+  outline: var(--border-link-focus-ring-outline-1p0hnu, 0);
+  outline-offset: 2px;
+  outline-color: var(--color-border-item-focused-uk47pl, #006ce0);
+  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 var(--border-link-focus-ring-shadow-spread-39uvxr, 2px) var(--color-border-item-focused-uk47pl, #006ce0);
+}
+
+.info {
+  margin-inline-start: var(--space-xs-ymlm0b, 8px);
+}
+
+.external-icon {
+  margin-inline-start: var(--space-xxs-hwfkai, 4px);
+}
+
+.divider {
+  border-block: none;
+  border-inline: none;
+}
+
+.divider-default {
+  margin-block: var(--space-scaled-2x-xl-he48nr, 24px);
+  margin-inline: calc(-1 * var(--space-panel-divider-margin-horizontal-yw31p0, 8px));
+  border-block-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+
+.divider-header {
+  margin-block: 0;
+  border-block-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-panel-header-ygztvl, #c6c6cd);
+}
+.with-toolbar > .divider-header {
+  border-color: transparent;
+}
+`;
+
+// src/side-navigation/internal.ts
+var hostStyles67 = css146`:host { display: block; }`;
+var CsSideNavigationInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.activeHref = "";
+    this._expandedSections = /* @__PURE__ */ new Set();
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles65, hostStyles67];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._initExpandedState();
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("items") || changed.has("activeHref")) {
+      this._initExpandedState();
+    }
+  }
+  _initExpandedState() {
+    const expanded = /* @__PURE__ */ new Set();
+    this._collectExpandedItems(this.items, expanded);
+    this._expandedSections = expanded;
+  }
+  _collectExpandedItems(items, expanded) {
+    let containsActive = false;
+    for (const item of items) {
+      if (item.type === "section") {
+        const childActive = this._collectExpandedItems(item.items, expanded);
+        if (childActive || item.defaultExpanded !== false) {
+          expanded.add(this._sectionKey(item));
+        }
+        if (childActive) containsActive = true;
+      } else if (item.type === "expandable-link-group") {
+        const childActive = this._collectExpandedItems(item.items, expanded);
+        const selfActive = item.href === this.activeHref;
+        if (childActive || selfActive || item.defaultExpanded) {
+          expanded.add(this._sectionKey(item));
+        }
+        if (childActive || selfActive) containsActive = true;
+      } else if (item.type === "link" || item.type === "link-group") {
+        if (item.href === this.activeHref) containsActive = true;
+        if (item.type === "link-group") {
+          const childActive = this._collectExpandedItems(item.items, expanded);
+          if (childActive) containsActive = true;
+        }
+      } else if (item.type === "section-group") {
+        const childActive = this._collectExpandedItems(item.items, expanded);
+        if (childActive) containsActive = true;
+      }
+    }
+    return containsActive;
+  }
+  _sectionKey(item) {
+    return `${item.type}:${item.text}`;
+  }
+  _isSectionExpanded(item) {
+    return this._expandedSections.has(this._sectionKey(item));
+  }
+  _toggleSection(item) {
+    const key = this._sectionKey(item);
+    const newExpanded = new Set(this._expandedSections);
+    const wasExpanded = newExpanded.has(key);
+    if (wasExpanded) {
+      newExpanded.delete(key);
+    } else {
+      newExpanded.add(key);
+    }
+    this._expandedSections = newExpanded;
+    fireNonCancelableEvent(this, "change", {
+      item,
+      expanded: !wasExpanded,
+      expandableParents: []
+    });
+  }
+  _onLinkClick(item, e) {
+    const isModified = e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey;
+    if (isModified) return;
+    e.preventDefault();
+    fireNonCancelableEvent(this, "follow", {
+      href: item.href,
+      text: item.text,
+      type: item.type
+    });
+  }
+  _renderHeader() {
+    if (!this.header) return nothing39;
+    const hasLogo = !!this.header.logo;
+    const headerLinkClasses = {
+      "header-link": true,
+      "header-link--has-logo": hasLogo
+    };
+    return html68`
+      <div class="header">
+        <a
+          class=${classMap56(headerLinkClasses)}
+          href=${this.header.href}
+          @click=${(e) => this._onLinkClick(
+      { text: this.header.text, href: this.header.href, type: "section-header" },
+      e
+    )}
+        >
+          ${hasLogo ? html68`<img class="header-logo" src=${this.header.logo.src} alt=${ifDefined35(this.header.logo.alt)} />` : nothing39}
+          ${this.header.text ? html68`<span class="header-link-text">${this.header.text}</span>` : nothing39}
+        </a>
+      </div>
+      <hr class="divider divider-header" />
+    `;
+  }
+  _renderLink(item) {
+    const isActive = item.href === this.activeHref;
+    const linkClasses = {
+      "link": true,
+      "link-active": isActive
+    };
+    return html68`
+      <li class="list-item">
+        <a
+          class=${classMap56(linkClasses)}
+          href=${item.href}
+          aria-current=${isActive ? "page" : nothing39}
+          target=${item.external ? "_blank" : nothing39}
+          rel=${item.external ? "noopener" : nothing39}
+          @click=${(e) => this._onLinkClick(item, e)}
+        >
+          ${item.text}
+          ${item.external ? html68`<span class="external-icon"><cs-icon name="external" size="inherit"></cs-icon></span>` : nothing39}
+        </a>
+      </li>
+    `;
+  }
+  _renderDivider() {
+    return html68`<li class="list-item"><hr class="divider divider-default" /></li>`;
+  }
+  _renderSection(item) {
+    const expanded = this._isSectionExpanded(item);
+    return html68`
+      <li class="list-item">
+        <div class="section">
+          <div>
+            <button
+              type="button"
+              class="overflow-menu-control overflow-menu-control-expandable-menu-trigger"
+              aria-expanded=${expanded}
+              @click=${() => this._toggleSection(item)}
+            >
+              <span class="overflow-menu-list-item-text">${item.text}</span>
+              <span class=${classMap56({ "icon": true, "icon-open": expanded })}>
+                <cs-icon name="caret-down-filled"></cs-icon>
+              </span>
+            </button>
+          </div>
+          ${expanded ? html68`<ul class="list">${item.items.map((child) => this._renderItem(child))}</ul>` : nothing39}
+        </div>
+      </li>
+    `;
+  }
+  _renderExpandableLinkGroup(item) {
+    const expanded = this._isSectionExpanded(item);
+    const isActive = item.href === this.activeHref;
+    const linkClasses = {
+      "link": true,
+      "link-active": isActive
+    };
+    return html68`
+      <li class="list-item">
+        <div class="expandable-link-group">
+          <div style="display:flex;align-items:center;">
+            <button
+              type="button"
+              class="overflow-menu-control"
+              style="flex-shrink:0;padding:0;inline-size:auto;"
+              aria-expanded=${expanded}
+              aria-label=${`Toggle ${item.text}`}
+              @click=${() => this._toggleSection(item)}
+            >
+              <span class=${classMap56({ "icon": true, "icon-open": expanded })}>
+                <cs-icon name="caret-down-filled"></cs-icon>
+              </span>
+            </button>
+            <a
+              class=${classMap56(linkClasses)}
+              href=${item.href}
+              aria-current=${isActive ? "page" : nothing39}
+              @click=${(e) => this._onLinkClick(item, e)}
+            >
+              ${item.text}
+            </a>
+          </div>
+          ${expanded ? html68`<ul class="list list-variant-expandable-link-group">${item.items.map((child) => this._renderItem(child))}</ul>` : nothing39}
+        </div>
+      </li>
+    `;
+  }
+  _renderLinkGroup(item) {
+    const isActive = item.href === this.activeHref;
+    const linkClasses = {
+      "link": true,
+      "link-active": isActive
+    };
+    return html68`
+      <li class="list-item">
+        <a
+          class=${classMap56(linkClasses)}
+          href=${item.href}
+          aria-current=${isActive ? "page" : nothing39}
+          @click=${(e) => this._onLinkClick(item, e)}
+        >
+          ${item.text}
+        </a>
+        ${item.items.length ? html68`<ul class="list">${item.items.map((child) => this._renderItem(child))}</ul>` : nothing39}
+      </li>
+    `;
+  }
+  _renderSectionGroup(item) {
+    return html68`
+      <li class="list-item">
+        <div class="section-group">${item.title}</div>
+        <ul class="list list-variant-section-group">
+          ${item.items.map((child) => this._renderItem(child))}
+        </ul>
+      </li>
+    `;
+  }
+  _renderItem(item) {
+    switch (item.type) {
+      case "link":
+        return this._renderLink(item);
+      case "divider":
+        return this._renderDivider();
+      case "section":
+        return this._renderSection(item);
+      case "expandable-link-group":
+        return this._renderExpandableLinkGroup(item);
+      case "link-group":
+        return this._renderLinkGroup(item);
+      case "section-group":
+        return this._renderSectionGroup(item);
+      default:
+        return html68``;
+    }
+  }
+  render() {
+    return html68`
+      <nav class="root" aria-label=${ifDefined35(this.ariaLabel || "Side navigation")}>
+        ${this._renderHeader()}
+        <slot name="itemsControl"></slot>
+        <div class="list-container">
+          <ul class="list list-variant-root list-variant-root--first">
+            ${this.items.map((item) => this._renderItem(item))}
+          </ul>
+        </div>
+      </nav>
+    `;
+  }
+};
+__decorateClass([
+  property67({ type: Object })
+], CsSideNavigationInternal.prototype, "header", 2);
+__decorateClass([
+  property67({ type: Array })
+], CsSideNavigationInternal.prototype, "items", 2);
+__decorateClass([
+  property67({ type: String })
+], CsSideNavigationInternal.prototype, "activeHref", 2);
+__decorateClass([
+  state21()
+], CsSideNavigationInternal.prototype, "_expandedSections", 2);
+
+// src/side-navigation/index.ts
+var CsSideNavigation = class extends CsSideNavigationInternal {
+};
+customElements.define("cs-side-navigation", CsSideNavigation);
+
+// src/help-panel/internal.ts
+import { css as css148, html as html69 } from "lit";
+import { property as property68 } from "lit/decorators.js";
+
+// src/help-panel/styles.ts
+import { css as css147 } from "lit";
+var componentStyles66 = css147`
+.help-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;
+  word-wrap: break-word;
+  padding-block-start: var(--space-panel-header-vertical-ckfgmy, 20px);
+  padding-block-end: 0;
+
+
+}
+.help-panel hr {
+  border-block: none;
+  border-inline: none;
+  border-block-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+  margin-block: var(--space-scaled-xl-dunxp5, 24px);
+  margin-inline: calc(-1 * var(--space-panel-divider-margin-horizontal-yw31p0, 8px));
+}
+.help-panel ol,
+.help-panel ul {
+  padding-inline-start: var(--space-l-2ud1p3, 20px);
+  list-style-position: outside;
+  margin-block: var(--space-s-tvghoh, 12px);
+  margin-inline: 0;
+}
+.help-panel li {
+  margin-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  margin-inline: 0;
+}
+.help-panel a,
+.help-panel h2,
+.help-panel h3,
+.help-panel h4,
+.help-panel h5,
+.help-panel pre,
+.help-panel code {
+  margin-block: var(--space-xs-ymlm0b, 8px);
+  margin-inline: 0;
+  padding-block: 0;
+}
+.help-panel code {
+  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);
+  font-family: var(--font-family-monospace-q47m7k, Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace);
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  padding-block: 0;
+  padding-inline: var(--space-xxs-hwfkai, 4px);
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+.help-panel pre {
+  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);
+  font-family: var(--font-family-monospace-q47m7k, Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace);
+  background-color: var(--color-background-layout-main-5ilwcb, #ffffff);
+  padding-block: 0;
+  padding-inline: var(--space-xxs-hwfkai, 4px);
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  padding-block: var(--space-xxs-hwfkai, 4px);
+  padding-inline: var(--space-xxs-hwfkai, 4px);
+}
+.help-panel dl {
+  margin-block: var(--space-s-tvghoh, 12px);
+  margin-inline: 0;
+
+}
+.help-panel dl * {
+  margin-block: 0;
+}
+.help-panel dt {
+  margin-block-start: var(--space-xs-ymlm0b, 8px);
+  font-weight: 700;
+}
+.help-panel dd {
+  margin-block-start: 0;
+  margin-block-end: var(--space-xs-ymlm0b, 8px);
+  margin-inline: 0;
+}
+.help-panel h2,
+.help-panel h3,
+.help-panel h4,
+.help-panel h5,
+.help-panel h6 {
+  margin-block-start: var(--space-xl-jfy3x4, 24px);
+  color: var(--color-text-heading-default-izpp46, #0f141a);
+}
+.help-panel > :last-child {
+  margin-block-end: var(--space-panel-content-bottom-24c6lu, 40px);
+}
+.help-panel p {
+  color: inherit;
+  text-decoration: none;
+  margin-block: var(--space-s-tvghoh, 12px);
+  margin-inline: 0;
+}
+.help-panel h1 {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-xl-wvkbur, 24px);
+  line-height: var(--line-height-heading-xl-hko6p0, 30px);
+  letter-spacing: var(--letter-spacing-heading-xl-ckkb6u, -0.02em);
+  font-weight: var(--font-weight-heading-xl-u3m4we, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.help-panel h2 {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-l-vnacx6, 20px);
+  line-height: var(--line-height-heading-l-mg5bx6, 24px);
+  letter-spacing: var(--letter-spacing-heading-l-5v6ibv, -0.015em);
+  font-weight: var(--font-weight-heading-l-0t6dwc, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.help-panel h3 {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-m-170yiy, 18px);
+  line-height: var(--line-height-heading-m-uoaqdh, 22px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  font-weight: var(--font-weight-heading-m-zf82dr, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.help-panel h4 {
+  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);
+}
+.help-panel h5 {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-xs-j8yzxv, 14px);
+  line-height: var(--line-height-heading-xs-q9j004, 18px);
+  letter-spacing: var(--letter-spacing-heading-xs-fgog7a, normal);
+  font-weight: var(--font-weight-heading-xs-wqqpne, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.help-panel b,
+.help-panel strong {
+  font-weight: 700;
+}
+
+.loading {
+  padding-inline-start: var(--space-panel-side-left-u1m3s9, 28px);
+  padding-inline-end: var(--space-panel-side-right-8wwirc, 24px);
+}
+
+.header {
+  font-size: var(--font-panel-header-size-33h9j8, 18px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  line-height: var(--font-panel-header-line-height-8xb2qj, 22px);
+  font-weight: var(--font-weight-heading-l-0t6dwc, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  color: var(--color-text-heading-default-izpp46, #0f141a);
+  padding-block-end: var(--space-panel-header-vertical-ckfgmy, 20px);
+  padding-inline: var(--space-panel-side-left-u1m3s9, 28px) calc(var(--space-xl-jfy3x4, 24px) + var(--space-scaled-xxl-6wgq96, 32px));
+  border-block: none;
+  border-inline: none;
+  border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-panel-header-ygztvl, #c6c6cd);
+  margin-block-start: 0;
+  margin-block-end: var(--space-panel-content-top-qvd1dr, 20px);
+
+
+}
+.with-toolbar > .header {
+  border-color: transparent;
+  margin-block-end: 0px;
+}
+.header h2,
+.header h3,
+.header h4,
+.header h5,
+.header h6 {
+  font-size: var(--font-panel-header-size-33h9j8, 18px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  line-height: var(--font-panel-header-line-height-8xb2qj, 22px);
+  font-weight: var(--font-weight-heading-l-0t6dwc, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  padding-block: 0;
+  margin-block: 0;
+}
+
+.content {
+  color: var(--color-text-body-secondary-yna5sb, #424650);
+  padding-inline-start: var(--space-panel-side-left-u1m3s9, 28px);
+  padding-inline-end: var(--space-panel-side-right-8wwirc, 24px);
+
+
+}
+.content h2:first-child,
+.content h3:first-child,
+.content h4:first-child,
+.content h5:first-child,
+.content h6:first-child,
+.content p:first-child {
+  margin-block-start: 0;
+}
+.content a {
+  text-underline-offset: 0.25em;
+  text-decoration-thickness: 1px;
+  color: var(--awsui-style-color-default-6b9ypa, var(--color-text-link-default-hude44, #006ce0));
+  font-weight: inherit;
+  letter-spacing: normal;
+  text-decoration-line: underline;
+  text-decoration-color: currentColor;
+  transition-property: color, -webkit-text-decoration;
+  transition-property: color, text-decoration;
+  transition-property: color, text-decoration, -webkit-text-decoration;
+  transition-duration: var(--motion-duration-refresh-only-medium-5rbn3k, 165ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  .content a {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .content a, .awsui-mode-entering .content a {
+  animation: none;
+  transition: none;
+}
+.content a:hover {
+  cursor: pointer;
+  color: var(--awsui-style-color-hover-6b9ypa, var(--color-text-link-hover-2hfec2, #002b66));
+}
+.content a:focus {
+  outline: none;
+}
+.content a:active {
+  color: var(--awsui-style-color-active-6b9ypa, var(--color-text-link-hover-2hfec2, #002b66));
+}
+.content a:active, .content a:focus, .content a:hover {
+  text-decoration-line: underline;
+  text-decoration-color: currentColor;
+}
+
+.footer {
+  color: var(--color-text-body-secondary-yna5sb, #424650);
+  padding-block: 0;
+  padding-inline-start: var(--space-panel-side-left-u1m3s9, 28px);
+  padding-inline-end: var(--space-panel-side-right-8wwirc, 24px);
+
+
+}
+.footer ul {
+  list-style: none;
+  padding-inline-start: 0;
+}
+.footer a {
+  text-underline-offset: 0.25em;
+  text-decoration-thickness: 1px;
+  color: var(--awsui-style-color-default-6b9ypa, var(--color-text-link-default-hude44, #006ce0));
+  font-weight: inherit;
+  letter-spacing: normal;
+  text-decoration-line: none;
+  text-decoration-color: transparent;
+  transition-property: color, -webkit-text-decoration;
+  transition-property: color, text-decoration;
+  transition-property: color, text-decoration, -webkit-text-decoration;
+  transition-duration: var(--motion-duration-refresh-only-medium-5rbn3k, 165ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  .footer a {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .footer a, .awsui-mode-entering .footer a {
+  animation: none;
+  transition: none;
+}
+.footer a:hover {
+  cursor: pointer;
+  color: var(--awsui-style-color-hover-6b9ypa, var(--color-text-link-hover-2hfec2, #002b66));
+}
+.footer a:focus {
+  outline: none;
+}
+.footer a:active {
+  color: var(--awsui-style-color-active-6b9ypa, var(--color-text-link-hover-2hfec2, #002b66));
+}
+.footer a:active, .footer a:focus, .footer a:hover {
+  text-decoration-line: underline;
+  text-decoration-color: currentColor;
+}
+.content a:focus,
+.footer a:focus {
+  outline: thin dotted;
+  outline: var(--border-link-focus-ring-outline-1p0hnu, 0);
+  outline-offset: 2px;
+  outline-color: var(--color-border-item-focused-uk47pl, #006ce0);
+  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 var(--border-link-focus-ring-shadow-spread-39uvxr, 2px) var(--color-border-item-focused-uk47pl, #006ce0);
+}
+`;
+
+// src/help-panel/internal.ts
+var hostStyles68 = css148`:host { display: block; }`;
+var CsHelpPanelInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.loading = false;
+    this.loadingText = "Loading content";
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles66, hostStyles68];
+  }
+  render() {
+    if (this.loading) {
+      return html69`
+        <div class="help-panel">
+          <div class="loading">
+            <cs-spinner size="normal"></cs-spinner>
+            <span>${this.loadingText}</span>
+          </div>
+        </div>
+      `;
+    }
+    return html69`
+      <div class="help-panel">
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property68({ type: Boolean, reflect: true })
+], CsHelpPanelInternal.prototype, "loading", 2);
+__decorateClass([
+  property68({ type: String })
+], CsHelpPanelInternal.prototype, "loadingText", 2);
+
+// src/help-panel/index.ts
+var CsHelpPanel = class extends CsHelpPanelInternal {
+};
+customElements.define("cs-help-panel", CsHelpPanel);
+
+// src/drawer/internal.ts
+import { css as css150, html as html70 } from "lit";
+import { property as property69 } from "lit/decorators.js";
+import { classMap as classMap57 } from "lit/directives/class-map.js";
+
+// src/drawer/styles.ts
+import { css as css149 } from "lit";
+var componentStyles67 = css149`
+.drawer {
+  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;
+  word-wrap: break-word;
+}
+.drawer.with-footer {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100%;
+}
+.drawer.with-footer > .content {
+  flex: 1;
+}
+
+.header {
+  font-size: var(--font-panel-header-size-33h9j8, 18px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  line-height: var(--font-panel-header-line-height-8xb2qj, 22px);
+  font-weight: var(--font-weight-heading-l-0t6dwc, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  display: flex;
+  justify-content: space-between;
+  color: var(--color-text-heading-default-izpp46, #0f141a);
+  padding-block: var(--space-panel-header-vertical-ckfgmy, 20px);
+  padding-inline: var(--space-panel-side-left-u1m3s9, 28px) calc(var(--space-l-2ud1p3, 20px) + var(--space-scaled-xxl-6wgq96, 32px));
+  border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-panel-header-ygztvl, #c6c6cd);
+
+
+}
+@media (min-width: 689px) {
+  .header.with-additional-action {
+    /*
+      this padding is needed when the drawer renders inside a runtime drawer and the runtime drawer has an additional action
+      on the right (or left in rtl). in this case this padding ensures that the drawer's content does not overlap with runtime actions
+    */
+    padding-inline: var(--space-panel-side-left-u1m3s9, 28px) calc(var(--space-xxxl-aut1u7, 40px) + var(--space-scaled-xxl-6wgq96, 32px));
+  }
+}
+.header.with-runtime-context {
+  padding-block: 14px;
+}
+.with-toolbar > .header {
+  border-color: transparent;
+  margin-block-end: 0px;
+}
+.header h2,
+.header h3,
+.header h4,
+.header h5,
+.header h6 {
+  font-size: var(--font-panel-header-size-33h9j8, 18px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  line-height: var(--font-panel-header-line-height-8xb2qj, 22px);
+  font-weight: var(--font-weight-heading-l-0t6dwc, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  padding-block: 0;
+  margin-block: 0;
+}
+
+.header-actions {
+  display: inline-flex;
+  align-items: flex-start;
+  z-index: 1;
+}
+
+.content-with-paddings:not(:empty) {
+  padding-block-start: var(--space-panel-content-top-qvd1dr, 20px);
+  padding-inline-start: var(--space-panel-side-left-u1m3s9, 28px);
+  padding-inline-end: var(--space-panel-side-right-8wwirc, 24px);
+  padding-block-end: var(--space-panel-content-bottom-24c6lu, 40px);
+}
+
+.footer {
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+  border-block-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-panel-header-ygztvl, #c6c6cd);
+  padding-block: var(--space-panel-content-top-qvd1dr, 20px);
+  padding-inline: var(--space-panel-side-left-u1m3s9, 28px) var(--space-panel-side-right-8wwirc, 24px);
+}
+.footer.is-sticky {
+  position: sticky;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  z-index: 810;
+}
+`;
+
+// src/drawer/internal.ts
+var hostStyles69 = css150`:host { display: block; }`;
+var CsDrawerInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.loading = false;
+    this.disableContentPaddings = false;
+    this._hasHeader = false;
+    this._hasFooter = false;
+    this._hasHeaderActions = 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._onHeaderActionsSlotChange = (e) => {
+      const slot = e.target;
+      this._hasHeaderActions = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles67, hostStyles69];
+  }
+  render() {
+    const drawerClasses = {
+      "drawer": true,
+      "with-footer": this._hasFooter
+    };
+    const headerClasses = {
+      "header": true
+    };
+    const contentClasses = {
+      "content": true,
+      "content-with-paddings": !this.disableContentPaddings
+    };
+    const footerClasses = {
+      "footer": true
+    };
+    return html70`
+      <div class=${classMap57(drawerClasses)} role="region">
+        ${this._hasHeader || this.loading ? html70`
+            <div class=${classMap57(headerClasses)}>
+              <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
+              ${this._hasHeaderActions ? html70`<div class="header-actions"><slot name="headerActions" @slotchange=${this._onHeaderActionsSlotChange}></slot></div>` : html70`<slot name="headerActions" @slotchange=${this._onHeaderActionsSlotChange} style="display:none"></slot>`}
+            </div>
+          ` : html70`
+            <slot name="header" @slotchange=${this._onHeaderSlotChange} style="display:none"></slot>
+            <slot name="headerActions" @slotchange=${this._onHeaderActionsSlotChange} style="display:none"></slot>
+          `}
+        <div class=${classMap57(contentClasses)}>
+          ${this.loading ? html70`<cs-spinner size="large"></cs-spinner>` : html70`<slot></slot>`}
+        </div>
+        ${this._hasFooter ? html70`<div class=${classMap57(footerClasses)}><slot name="footer" @slotchange=${this._onFooterSlotChange}></slot></div>` : html70`<slot name="footer" @slotchange=${this._onFooterSlotChange} style="display:none"></slot>`}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property69({ type: Boolean, reflect: true })
+], CsDrawerInternal.prototype, "loading", 2);
+__decorateClass([
+  property69({ type: Boolean, reflect: true })
+], CsDrawerInternal.prototype, "disableContentPaddings", 2);
+
+// src/drawer/index.ts
+var CsDrawer = class extends CsDrawerInternal {
+};
+customElements.define("cs-drawer", CsDrawer);
+
+// src/split-panel/internal.ts
+import { css as css152, html as html71, nothing as nothing40 } from "lit";
+import { property as property70, state as state22 } from "lit/decorators.js";
+import { classMap as classMap58 } from "lit/directives/class-map.js";
+
+// src/split-panel/styles.ts
+import { css as css151 } from "lit";
+var componentStyles68 = css151`
+.drawer {
+  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;
+  flex-shrink: 0;
+  position: relative;
+  min-inline-size: 0;
+  word-break: break-word;
+  background-color: var(--color-background-layout-panel-content-xto15e, #ffffff);
+  z-index: 840;
+}
+.drawer-closed:not(.refresh) {
+  min-inline-size: 40px;
+}
+
+.drawer-content-side {
+  display: flex;
+  align-items: center;
+  block-size: 100%;
+  overflow: auto;
+}
+.drawer-content-side > [aria-hidden=true], .drawer-closed.refresh > .drawer-content-side {
+  display: none;
+}
+.drawer-closed:not(.refresh) > .drawer-content-side {
+  inline-size: 40px;
+}
+.drawer-closed:not(.refresh) > .drawer-content-side:hover {
+  background: var(--color-background-layout-panel-hover-tguulw, #ebebf0);
+}
+
+:not(.drawer-closed) > .drawer-content-bottom {
+  overflow-y: auto;
+  position: absolute;
+  inset: 0;
+  clip-path: border-box;
+}
+
+.position-bottom {
+  position: fixed;
+  overflow-y: auto;
+  /*
+  Removed the position fixed with the AppLayout refactor because the
+  SplitPanel is no longer in fixed position in the DOM.
+  */
+}
+.position-bottom:not(.hidden) {
+  border-block-start: var(--border-panel-top-width-10990j, 1px) solid var(--color-border-divider-panel-bottom-bruvuz, #c6c6cd);
+}
+.position-bottom:not(.refresh) {
+  box-shadow: var(--shadow-split-bottom-vlyulf, 0px -36px 36px -36px rgba(0, 7, 22, 0.1));
+  border-inline-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-panel-bottom-bruvuz, #c6c6cd);
+  border-inline-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-panel-bottom-bruvuz, #c6c6cd);
+}
+.position-bottom.drawer-closed {
+  overflow: hidden;
+}
+.position-bottom.drawer-closed.drawer-clickable:hover {
+  cursor: pointer;
+  background: var(--color-background-layout-panel-hover-tguulw, #ebebf0);
+}
+.position-bottom > .drawer-content-bottom > [aria-hidden=true] {
+  display: none;
+}
+.position-bottom.refresh {
+  position: relative;
+}
+
+.position-side {
+  border-block-start: none;
+  box-shadow: var(--shadow-split-side-nyajix, -1px 0px 1px 0px #e9ebed, -36px 6px 36px -36px rgba(0, 7, 22, 0.1));
+  block-size: 100%;
+}
+.position-side.with-toolbar {
+  box-shadow: none;
+}
+
+.slider-wrapper-bottom {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: 18px;
+  display: flex;
+  justify-content: center;
+  z-index: 2;
+}
+
+.slider-wrapper-side {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  block-size: 100%;
+  inline-size: 18px;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+}
+.slider-wrapper-side.with-toolbar {
+  position: unset;
+}
+
+.open-button-side {
+  flex: 0 0 auto;
+  align-self: flex-start;
+  box-sizing: border-box;
+  margin-block-start: var(--space-xxs-hwfkai, 4px);
+  margin-block-end: 0;
+  margin-inline: auto;
+}
+
+.pane-header-wrapper-bottom {
+  position: sticky;
+  inset-block-start: 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  z-index: 1;
+  padding-block: 0;
+  padding-inline: var(--space-layout-content-horizontal-buc0zz, 24px);
+}
+.drawer-mobile > .drawer-content-bottom > .pane-header-wrapper-bottom {
+  padding-block: 0;
+  padding-inline: var(--space-l-2ud1p3, 20px);
+}
+.drawer-disable-content-paddings > .drawer-content-bottom > .pane-header-wrapper-bottom {
+  padding-block: 0;
+  padding-inline: var(--space-l-2ud1p3, 20px);
+}
+:not(.drawer-closed) > .drawer-content-bottom > .pane-header-wrapper-bottom {
+  background-color: var(--color-background-layout-panel-content-xto15e, #ffffff);
+  border-block-end: var(--border-panel-header-width-t1iq1m, 1px) solid var(--color-border-panel-header-ygztvl, #c6c6cd);
+}
+.with-toolbar:not(.drawer-closed) > .drawer-content-bottom > .pane-header-wrapper-bottom {
+  border-color: transparent;
+}
+
+.content-bottom {
+  padding-block: 0;
+  padding-inline: var(--space-layout-content-horizontal-buc0zz, 24px);
+  margin-block-start: var(--space-panel-split-top-3u4vky, 20px);
+  position: relative;
+  z-index: 0;
+}
+.with-toolbar > .drawer-content-bottom > .content-bottom {
+  margin-block-start: 0px;
+}
+.drawer-mobile > .drawer-content-bottom > .content-bottom {
+  padding-block: 0;
+  padding-inline: var(--space-l-2ud1p3, 20px);
+}
+.drawer-disable-content-paddings > .drawer-content-bottom > .content-bottom {
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.pane-bottom-center-align {
+  display: flex;
+  justify-content: center;
+}
+
+.pane-bottom-content-nav-padding {
+  padding-inline-start: calc(var(--space-layout-toggle-diameter-j2qffw, 36px) + 2 * var(--space-layout-toggle-padding-chwlhz, 12px));
+}
+
+.pane-bottom-content-tools-padding {
+  padding-inline-end: calc(var(--space-layout-toggle-diameter-j2qffw, 36px) + 2 * var(--space-layout-toggle-padding-chwlhz, 12px));
+}
+
+.content-bottom-max-width {
+  flex-grow: 1;
+  max-inline-size: 100%;
+}
+
+.content-side {
+  flex: auto;
+  align-self: flex-start;
+  box-sizing: border-box;
+  overflow-y: auto;
+  inset-block-start: 0;
+  inset-inline: 0;
+  block-size: 100%;
+}
+.content-side.with-toolbar {
+  position: absolute;
+}
+.content-side > .pane-header-wrapper-side {
+  padding-block: 0;
+  padding-inline-end: var(--space-m-dsumyt, 16px);
+  padding-inline-start: var(--space-panel-side-left-u1m3s9, 28px);
+  border-block-end: var(--border-panel-header-width-t1iq1m, 1px) solid var(--color-border-panel-header-ygztvl, #c6c6cd);
+}
+.content-side.with-toolbar > .pane-header-wrapper-side {
+  border-color: transparent;
+}
+.content-side > .pane-content-wrapper-side {
+  padding-block: 0;
+  padding-inline-start: var(--space-panel-side-left-u1m3s9, 28px);
+  padding-inline-end: var(--space-panel-side-right-8wwirc, 24px);
+  margin-block-start: var(--space-panel-split-top-3u4vky, 20px);
+  margin-block-end: var(--space-panel-split-bottom-ir16d7, 20px);
+}
+.content-side.with-toolbar > .pane-content-wrapper-side {
+  margin-block-start: 0px;
+}
+
+.header {
+  inline-size: 100%;
+  margin-block: var(--size-vertical-panel-icon-offset-z959cw, 15px);
+  margin-inline: 0;
+}
+.header.with-toolbar {
+  margin-block: 14px;
+}
+.header-main-row, .header-main-content {
+  display: flex;
+}
+.header-main-row {
+  align-items: flex-start;
+}
+.header-main-content {
+  flex: auto;
+  flex-direction: row;
+  column-gap: var(--space-scaled-xs-xwoogq, 8px);
+  row-gap: var(--space-scaled-xxs-pfm1nx, 4px);
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.header-tag-and-info {
+  flex-grow: 1;
+  margin-block-start: calc(var(--space-scaled-xxs-pfm1nx, 4px) + 1px);
+  line-height: var(--line-height-body-s-nu5hx1, 16px);
+}
+.header-tag-and-info.with-description {
+  margin-block-end: var(--space-scaled-xxxs-oo06c7, 2px);
+}
+.header-tag.with-info, .header-text {
+  display: inline;
+}
+.header-tag {
+  margin-block: 0;
+}
+.header-before-slot, .header-text {
+  font-size: var(--font-panel-header-size-33h9j8, 18px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  line-height: var(--font-panel-header-line-height-8xb2qj, 22px);
+  font-weight: var(--font-weight-heading-l-0t6dwc, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.header-before-slot {
+  margin-block-start: calc(-1 * calc(var(--space-scaled-xxs-pfm1nx, 4px) + 1px));
+}
+.header-tag.with-info > .header-before-slot, .header-before-slot.with-header-text {
+  display: inline-block;
+}
+.header-before-slot.with-header-text, .header-tag.with-info {
+  margin-inline-end: var(--space-scaled-xs-xwoogq, 8px);
+}
+.header-actions-slot {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  min-block-size: calc(var(--font-panel-header-line-height-8xb2qj, 22px) + 2 * calc(var(--space-scaled-xxs-pfm1nx, 4px) + 1px));
+}
+.header-description {
+  color: var(--color-text-heading-secondary-iwtvf6, #424650);
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  margin-block: 0;
+}
+
+.header-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex: 0 0 auto;
+  margin-inline-start: var(--space-xs-ymlm0b, 8px);
+}
+
+.divider {
+  border-inline-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+  margin-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  margin-inline: var(--space-scaled-xs-xwoogq, 8px);
+}
+`;
+
+// src/split-panel/internal.ts
+var hostStyles70 = css152`:host { display: block; }`;
+var CsSplitPanelInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.header = "";
+    this.hidePreferencesButton = false;
+    this.closeBehavior = "collapse";
+    this.size = 250;
+    this.panelAriaLabel = "";
+    this._isOpen = true;
+    this._position = "bottom";
+    this._onClose = () => {
+      this._isOpen = false;
+      this.requestUpdate();
+    };
+    this._onOpen = () => {
+      this._isOpen = true;
+      this.requestUpdate();
+    };
+    this._onPreferencesClick = () => {
+      const newPosition = this._position === "bottom" ? "side" : "bottom";
+      this._position = newPosition;
+      fireNonCancelableEvent(this, "preferencesChange", { position: newPosition });
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles68, hostStyles70];
+  }
+  get _regionLabel() {
+    return this.panelAriaLabel || this.header;
+  }
+  render() {
+    const closeLabel = this.i18nStrings?.closeButtonAriaLabel ?? "Close";
+    const openLabel = this.i18nStrings?.openButtonAriaLabel ?? "Open";
+    if (!this._isOpen && this.closeBehavior === "hide") {
+      return html71``;
+    }
+    const isBottom = this._position === "bottom";
+    const drawerClasses = {
+      "drawer": true,
+      "drawer-closed": !this._isOpen,
+      "position-bottom": isBottom,
+      "position-side": !isBottom,
+      "refresh": true
+    };
+    const headerClasses = {
+      "header": true
+    };
+    const contentBottomClasses = {
+      "content-bottom": true
+    };
+    const contentSideClasses = {
+      "content-side": true
+    };
+    const paneHeaderBottomClasses = {
+      "pane-header-wrapper-bottom": true
+    };
+    const paneHeaderSideClasses = {
+      "pane-header-wrapper-side": true
+    };
+    if (!this._isOpen) {
+      return html71`
+        <div class=${classMap58(drawerClasses)}
+             role="region"
+             aria-label=${this._regionLabel}>
+          ${isBottom ? html71`
+              <div class="drawer-content-bottom">
+                <div class=${classMap58(paneHeaderBottomClasses)}>
+                  <div class=${classMap58(headerClasses)}>
+                    <div class="header-main-row">
+                      <div class="header-main-content">
+                        <div class="header-text">${this.header}</div>
+                      </div>
+                      <div class="header-buttons">
+                        <cs-button
+                          variant="icon"
+                          icon-name="angle-up"
+                          aria-label=${openLabel}
+                          @click=${this._onOpen}
+                        ></cs-button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ` : html71`
+              <div class="drawer-content-side">
+                <cs-button
+                  class="open-button-side"
+                  variant="icon"
+                  icon-name="angle-left"
+                  aria-label=${openLabel}
+                  @click=${this._onOpen}
+                ></cs-button>
+              </div>
+            `}
+        </div>
+      `;
+    }
+    return html71`
+      <div class=${classMap58(drawerClasses)}
+           role="region"
+           aria-label=${this._regionLabel}
+           style="block-size: ${this.size}px;">
+        ${isBottom ? html71`
+            <div class="drawer-content-bottom">
+              <div class=${classMap58(paneHeaderBottomClasses)}>
+                <div class=${classMap58(headerClasses)}>
+                  <div class="header-main-row">
+                    <div class="header-main-content">
+                      <div class="header-text">${this.header}</div>
+                    </div>
+                    <div class="header-buttons">
+                      ${!this.hidePreferencesButton ? html71`
+                          <cs-button
+                            variant="icon"
+                            icon-name="resize-area"
+                            aria-label="Preferences"
+                            @click=${this._onPreferencesClick}
+                          ></cs-button>
+                          <div class="divider"></div>
+                        ` : nothing40}
+                      <cs-button
+                        variant="icon"
+                        icon-name="angle-down"
+                        aria-label=${closeLabel}
+                        @click=${this._onClose}
+                      ></cs-button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class=${classMap58(contentBottomClasses)}>
+                <slot></slot>
+              </div>
+            </div>
+          ` : html71`
+            <div class="drawer-content-side">
+              <div class=${classMap58(contentSideClasses)}>
+                <div class=${classMap58(paneHeaderSideClasses)}>
+                  <div class=${classMap58(headerClasses)}>
+                    <div class="header-main-row">
+                      <div class="header-main-content">
+                        <div class="header-text">${this.header}</div>
+                      </div>
+                      <div class="header-buttons">
+                        ${!this.hidePreferencesButton ? html71`
+                            <cs-button
+                              variant="icon"
+                              icon-name="resize-area"
+                              aria-label="Preferences"
+                              @click=${this._onPreferencesClick}
+                            ></cs-button>
+                            <div class="divider"></div>
+                          ` : nothing40}
+                        <cs-button
+                          variant="icon"
+                          icon-name="close"
+                          aria-label=${closeLabel}
+                          @click=${this._onClose}
+                        ></cs-button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="pane-content-wrapper-side">
+                  <slot></slot>
+                </div>
+              </div>
+            </div>
+          `}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property70({ type: String })
+], CsSplitPanelInternal.prototype, "header", 2);
+__decorateClass([
+  property70({ type: Boolean, reflect: true })
+], CsSplitPanelInternal.prototype, "hidePreferencesButton", 2);
+__decorateClass([
+  property70({ type: String, reflect: true })
+], CsSplitPanelInternal.prototype, "closeBehavior", 2);
+__decorateClass([
+  property70({ type: Number })
+], CsSplitPanelInternal.prototype, "size", 2);
+__decorateClass([
+  property70({ type: String, attribute: "panel-aria-label" })
+], CsSplitPanelInternal.prototype, "panelAriaLabel", 2);
+__decorateClass([
+  property70({ type: Object })
+], CsSplitPanelInternal.prototype, "i18nStrings", 2);
+__decorateClass([
+  state22()
+], CsSplitPanelInternal.prototype, "_isOpen", 2);
+__decorateClass([
+  state22()
+], CsSplitPanelInternal.prototype, "_position", 2);
+
+// src/split-panel/index.ts
+var CsSplitPanel = class extends CsSplitPanelInternal {
+};
+customElements.define("cs-split-panel", CsSplitPanel);
+
+// src/annotation-context/internal.ts
+import { html as html72 } from "lit";
+import { property as property71 } from "lit/decorators.js";
+import { provide as provide4, createContext as createContext4 } from "@lit/context";
+var annotationContext = createContext4(
+  /* @__PURE__ */ Symbol("annotation-context")
+);
+var CsAnnotationContextInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.currentTutorial = null;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  willUpdate() {
+    let totalSteps = 0;
+    if (this.currentTutorial) {
+      for (const task of this.currentTutorial.tasks) {
+        totalSteps += task.steps.length;
+      }
+    }
+    this._contextValue = {
+      currentTutorial: this.currentTutorial ?? null,
+      currentStepIndex: 0,
+      totalSteps,
+      i18nStrings: this.i18nStrings,
+      onStepChange: (detail) => {
+        fireNonCancelableEvent(this, "stepChange", detail);
+      },
+      onDismiss: () => {
+        if (this.currentTutorial) {
+          fireNonCancelableEvent(this, "exitTutorial", { tutorial: this.currentTutorial });
+        }
+      }
+    };
+  }
+  render() {
+    return html72`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property71({ attribute: false })
+], CsAnnotationContextInternal.prototype, "currentTutorial", 2);
+__decorateClass([
+  property71({ attribute: false })
+], CsAnnotationContextInternal.prototype, "i18nStrings", 2);
+__decorateClass([
+  provide4({ context: annotationContext })
+], CsAnnotationContextInternal.prototype, "_contextValue", 2);
+
+// src/annotation-context/index.ts
+var CsAnnotationContext = class extends CsAnnotationContextInternal {
+};
+customElements.define("cs-annotation-context", CsAnnotationContext);
 export {
   CsAlert,
   CsAnchorNavigation,
+  CsAnnotationContext,
   CsAttributeEditor,
   CsAutosuggest,
   CsBadge,
@@ -23222,6 +26518,7 @@ export {
   CsCalendar,
   CsCards,
   CsCheckbox,
+  CsCodeEditor,
   CsCollectionPreferences,
   CsColumnLayout,
   CsContainer,
@@ -23230,6 +26527,7 @@ export {
   CsDateInput,
   CsDatePicker,
   CsDateRangePicker,
+  CsDrawer,
   CsErrorBoundary,
   CsExpandableSection,
   CsFileDropzone,
@@ -23240,6 +26538,7 @@ export {
   CsFormField,
   CsGrid,
   CsHeader,
+  CsHelpPanel,
   CsIcon,
   CsIconProvider,
   CsKeyValuePairs,
@@ -23256,9 +26555,11 @@ export {
   CsRadioGroup,
   CsSegmentedControl,
   CsSelect,
+  CsSideNavigation,
   CsSlider,
   CsSpaceBetween,
   CsSpinner,
+  CsSplitPanel,
   CsStatusIndicator,
   CsSteps,
   CsTable,
@@ -23271,5 +26572,7 @@ export {
   CsToken,
   CsTokenGroup,
   CsTooltip,
-  CsTreeView
+  CsTopNavigation,
+  CsTreeView,
+  CsWizard
 };