@cumulus-ui/components 0.3.1 → 0.4.0

package/dist/index.js

@@ -64,8 +64,8 @@ function FormAssociatedMixin(superClass) {
       this._defaultValue = this.value;
     }
     // ── Public API (thin wrappers around ElementInternals) ────────────
-    setFormValue(value, state18) {
-      this._internals.setFormValue(value, state18);
+    setFormValue(value, state21) {
+      this._internals.setFormValue(value, state21);
     }
     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(state18, _mode) {
-      if (typeof state18 === "string") {
-        this.value = state18;
+    formStateRestoreCallback(state21, _mode) {
+      if (typeof state21 === "string") {
+        this.value = state21;
       }
     }
   }
@@ -6096,7 +6096,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   }
   return coords;
 }
-async function detectOverflow(state18, options) {
+async function detectOverflow(state21, options) {
   var _await$platform$isEle;
   if (options === void 0) {
     options = {};
@@ -6108,14 +6108,14 @@ async function detectOverflow(state18, options) {
     rects,
     elements,
     strategy
-  } = state18;
+  } = state21;
   const {
     boundary = "clippingAncestors",
     rootBoundary = "viewport",
     elementContext = "floating",
     altBoundary = false,
     padding = 0
-  } = evaluate(options, state18);
+  } = evaluate(options, state21);
   const paddingObject = getPaddingObject(padding);
   const altContext = elementContext === "floating" ? "reference" : "floating";
   const element = elements[altBoundary ? altContext : elementContext];
@@ -6247,7 +6247,7 @@ var flip = function(options) {
   return {
     name: "flip",
     options,
-    async fn(state18) {
+    async fn(state21) {
       var _middlewareData$arrow, _middlewareData$flip;
       const {
         placement,
@@ -6256,7 +6256,7 @@ var flip = function(options) {
         initialPlacement,
         platform: platform2,
         elements
-      } = state18;
+      } = state21;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true,
@@ -6265,7 +6265,7 @@ var flip = function(options) {
         fallbackAxisSideDirection = "none",
         flipAlignment = true,
         ...detectOverflowOptions
-      } = evaluate(options, state18);
+      } = evaluate(options, state21);
       if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -6279,7 +6279,7 @@ var flip = function(options) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements2 = [initialPlacement, ...fallbackPlacements];
-      const overflow = await platform2.detectOverflow(state18, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state21, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -6350,19 +6350,19 @@ var flip = function(options) {
   };
 };
 var originSides = /* @__PURE__ */ new Set(["left", "top"]);
-async function convertValueToCoords(state18, options) {
+async function convertValueToCoords(state21, options) {
   const {
     placement,
     platform: platform2,
     elements
-  } = state18;
+  } = state21;
   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, state18);
+  const rawValue = evaluate(options, state21);
   let {
     mainAxis,
     crossAxis,
@@ -6394,15 +6394,15 @@ var offset = function(options) {
   return {
     name: "offset",
     options,
-    async fn(state18) {
+    async fn(state21) {
       var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
         y,
         placement,
         middlewareData
-      } = state18;
-      const diffCoords = await convertValueToCoords(state18, options);
+      } = state21;
+      const diffCoords = await convertValueToCoords(state21, options);
       if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -6424,13 +6424,13 @@ var shift = function(options) {
   return {
     name: "shift",
     options,
-    async fn(state18) {
+    async fn(state21) {
       const {
         x,
         y,
         placement,
         platform: platform2
-      } = state18;
+      } = state21;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = false,
@@ -6447,12 +6447,12 @@ var shift = function(options) {
           }
         },
         ...detectOverflowOptions
-      } = evaluate(options, state18);
+      } = evaluate(options, state21);
       const coords = {
         x,
         y
       };
-      const overflow = await platform2.detectOverflow(state18, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state21, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -6472,7 +6472,7 @@ var shift = function(options) {
         crossAxisCoord = clamp(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
-        ...state18,
+        ...state21,
         [mainAxis]: mainAxisCoord,
         [crossAxis]: crossAxisCoord
       });
@@ -6563,8 +6563,8 @@ var containRe = /paint|layout|strict|content/;
 var isNotNone = (value) => !!value && value !== "none";
 var isWebKitValue;
 function isContainingBlock(elementOrCss) {
-  const css119 = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
-  return isNotNone(css119.transform) || isNotNone(css119.translate) || isNotNone(css119.scale) || isNotNone(css119.rotate) || isNotNone(css119.perspective) || !isWebKit() && (isNotNone(css119.backdropFilter) || isNotNone(css119.filter)) || willChangeRe.test(css119.willChange || "") || containRe.test(css119.contain || "");
+  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 || "");
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -6649,9 +6649,9 @@ function getFrameElement(win) {
 
 // node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
 function getCssDimensions(element) {
-  const css119 = getComputedStyle2(element);
-  let width = parseFloat(css119.width) || 0;
-  let height = parseFloat(css119.height) || 0;
+  const css139 = getComputedStyle2(element);
+  let width = parseFloat(css139.width) || 0;
+  let height = parseFloat(css139.height) || 0;
   const hasOffset = isHTMLElement(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
@@ -6745,9 +6745,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css119 = getComputedStyle2(currentIFrame);
-      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css119.paddingLeft)) * iframeScale.x;
-      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css119.paddingTop)) * iframeScale.y;
+      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;
       x *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
@@ -6824,15 +6824,15 @@ function getClientRects(element) {
   return Array.from(element.getClientRects());
 }
 function getDocumentRect(element) {
-  const html55 = getDocumentElement(element);
+  const html65 = getDocumentElement(element);
   const scroll = getNodeScroll(element);
   const body = element.ownerDocument.body;
-  const width = max(html55.scrollWidth, html55.clientWidth, body.scrollWidth, body.clientWidth);
-  const height = max(html55.scrollHeight, html55.clientHeight, body.scrollHeight, body.clientHeight);
+  const width = max(html65.scrollWidth, html65.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html65.scrollHeight, html65.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
   if (getComputedStyle2(body).direction === "rtl") {
-    x += max(html55.clientWidth, body.clientWidth) - width;
+    x += max(html65.clientWidth, body.clientWidth) - width;
   }
   return {
     width,
@@ -6844,10 +6844,10 @@ function getDocumentRect(element) {
 var SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
-  const html55 = getDocumentElement(element);
+  const html65 = getDocumentElement(element);
   const visualViewport = win.visualViewport;
-  let width = html55.clientWidth;
-  let height = html55.clientHeight;
+  let width = html65.clientWidth;
+  let height = html65.clientHeight;
   let x = 0;
   let y = 0;
   if (visualViewport) {
@@ -6859,13 +6859,13 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
-  const windowScrollbarX = getWindowScrollBarX(html55);
+  const windowScrollbarX = getWindowScrollBarX(html65);
   if (windowScrollbarX <= 0) {
-    const doc = html55.ownerDocument;
+    const doc = html65.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(html55.clientWidth - body.clientWidth - bodyMarginInline);
+    const clippingStableScrollbarWidth = Math.abs(html65.clientWidth - body.clientWidth - bodyMarginInline);
     if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
       width -= clippingStableScrollbarWidth;
     }
@@ -9417,6 +9417,13 @@ import { createContext as createContext2 } from "@lit/context";
 var formFieldContext = createContext2(
   /* @__PURE__ */ Symbol("form-field-context")
 );
+var defaultFormFieldContext = {
+  controlId: "",
+  ariaLabelledby: "",
+  ariaDescribedby: "",
+  invalid: false,
+  warning: false
+};
 
 // src/form-field/styles.ts
 import { css as css61 } from "lit";
@@ -19836,9 +19843,3375 @@ __decorateClass([
 var CsTable = class extends CsTableInternal {
 };
 customElements.define("cs-table", CsTable);
+
+// src/form/internal.ts
+import { css as css120, html as html55, nothing as nothing29 } from "lit";
+import { property as property54 } from "lit/decorators.js";
+
+// src/form/styles.ts
+import { css as css119 } from "lit";
+var componentStyles53 = css119`
+.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+.header {
+  margin-block-end: var(--space-scaled-m-m892r9, 16px);
+}
+
+.footer {
+  margin-block-start: var(--space-scaled-l-sej05l, 20px);
+}
+
+.actions-section {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-inline-start: calc(-1 * var(--space-scaled-m-m892r9, 16px));
+  margin-block-end: calc(-1 * var(--space-scaled-m-m892r9, 16px));
+}
+
+.secondary-actions {
+  min-inline-size: 1px;
+  margin-inline-start: var(--space-scaled-m-m892r9, 16px);
+  margin-block-end: var(--space-scaled-m-m892r9, 16px);
+}
+
+.actions {
+  min-inline-size: 1px;
+  margin-inline-start: var(--space-scaled-m-m892r9, 16px);
+  margin-block-end: var(--space-scaled-m-m892r9, 16px);
+}
+`;
+
+// src/form/internal.ts
+var hostStyles54 = css120`:host { display: block; }`;
+var CsFormInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.header = "";
+    this.errorText = "";
+    this.errorIconAriaLabel = "";
+    this.variant = "embedded";
+    this._hasActions = false;
+    this._hasSecondaryActions = false;
+    this._onActionsSlotChange = (e) => {
+      const slot = e.target;
+      this._hasActions = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+    this._onSecondaryActionsSlotChange = (e) => {
+      const slot = e.target;
+      this._hasSecondaryActions = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles53, hostStyles54];
+  }
+  render() {
+    const hasError = !!this.errorText;
+    const hasFooter = this._hasActions || this._hasSecondaryActions;
+    return html55`
+      <div class="root">
+        ${this.header ? html55`<div class="header"><slot name="header">${this.header}</slot></div>` : html55`<slot name="header"></slot>`}
+
+        <div class="content">
+          ${hasError ? html55`
+              <cs-alert
+                type="error"
+                status-icon-aria-label=${this.errorIconAriaLabel || "Error"}
+              >${this.errorText}</cs-alert>
+            ` : nothing29}
+          <slot></slot>
+        </div>
+
+        ${hasFooter ? html55`
+            <div class="footer">
+              <div class="actions-section">
+                <div class="actions">
+                  <slot name="actions" @slotchange=${this._onActionsSlotChange}></slot>
+                </div>
+                <div class="secondary-actions">
+                  <slot name="secondaryActions" @slotchange=${this._onSecondaryActionsSlotChange}></slot>
+                </div>
+              </div>
+            </div>
+          ` : html55`
+            <slot name="actions" @slotchange=${this._onActionsSlotChange} style="display:none"></slot>
+            <slot name="secondaryActions" @slotchange=${this._onSecondaryActionsSlotChange} style="display:none"></slot>
+          `}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property54({ type: String })
+], CsFormInternal.prototype, "header", 2);
+__decorateClass([
+  property54({ type: String })
+], CsFormInternal.prototype, "errorText", 2);
+__decorateClass([
+  property54({ type: String })
+], CsFormInternal.prototype, "errorIconAriaLabel", 2);
+__decorateClass([
+  property54({ type: String })
+], CsFormInternal.prototype, "variant", 2);
+
+// src/form/index.ts
+var CsForm = class extends CsFormInternal {
+};
+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 { ifDefined as ifDefined27 } from "lit/directives/if-defined.js";
+
+// src/modal/styles.ts
+import { css as css121 } from "lit";
+var componentStyles54 = css121`
+@keyframes awsui_modal-slide-up_1d2i7_rypew_1 {
+  0% {
+    transform: translate(0, 10px);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+.dialog {
+  animation: awsui_modal-slide-up_1d2i7_rypew_1 var(--motion-duration-slow-zji5vl, 180ms) ease-out, awsui_awsui-motion-fade-in-0_1d2i7_rypew_1 var(--motion-duration-slow-zji5vl, 180ms) ease-out;
+  animation-delay: var(--motion-duration-fast-unntf6, 90ms);
+  animation-fill-mode: both;
+}
+@keyframes awsui_awsui-motion-fade-in-0_1d2i7_rypew_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dialog {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .dialog, .awsui-mode-entering .dialog {
+  animation: none;
+  transition: none;
+}
+.dialog.refresh {
+  animation: awsui_awsui-motion-scale-popup_1d2i7_rypew_1, awsui_awsui-motion-fade-in-0_1d2i7_rypew_1;
+  animation-duration: var(--motion-duration-refresh-only-fast-zfibh6, 115ms);
+  animation-timing-function: var(--motion-easing-refresh-only-a-ccyqaz, cubic-bezier(0, 0, 0, 1));
+  animation-fill-mode: both;
+}
+@keyframes awsui_awsui-motion-fade-in-0_1d2i7_rypew_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes awsui_awsui-motion-scale-popup_1d2i7_rypew_1 {
+  0% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dialog.refresh {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .dialog.refresh, .awsui-mode-entering .dialog.refresh {
+  animation: none;
+  transition: none;
+}
+
+.root {
+  animation: awsui_awsui-motion-fade-in_1d2i7_rypew_1 var(--motion-duration-extra-slow-29bqym, 270ms) ease-out;
+  animation-fill-mode: both;
+}
+@keyframes awsui_awsui-motion-fade-in_1d2i7_rypew_1 {
+  from {
+    opacity: 0.2;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .root {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .root, .awsui-mode-entering .root {
+  animation: none;
+  transition: none;
+}
+.root.refresh {
+  animation-duration: var(--motion-duration-refresh-only-fast-zfibh6, 115ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  .root.refresh {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .root.refresh, .awsui-mode-entering .root.refresh {
+  animation: none;
+  transition: none;
+}
+
+.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  background-color: var(--color-background-modal-overlay-d7uby0, rgba(35, 43, 55, 0.7));
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  inset: 0;
+  position: fixed;
+  z-index: 5000;
+  outline: 0;
+  overflow: auto;
+  cursor: pointer;
+}
+.root.hidden {
+  display: none;
+}
+
+.focus-lock {
+  align-self: flex-start;
+  margin-inline: auto;
+  padding-block: var(--space-s-tvghoh, 12px);
+  padding-inline: 0;
+  z-index: 5000;
+  pointer-events: none;
+}
+.focus-lock.position-top {
+  margin-block-start: 0;
+}
+.focus-lock.position-center {
+  margin-block: auto;
+}
+
+.dialog {
+  position: static;
+  inset-block-start: 0;
+  transform: translate(0, 0);
+  inline-size: calc(100vw - var(--space-s-tvghoh, 12px) * 2);
+  box-sizing: border-box;
+  outline: none;
+  z-index: 5000;
+  pointer-events: all;
+}
+.dialog.small {
+  max-inline-size: 320px;
+}
+.dialog.medium {
+  max-inline-size: 600px;
+}
+.dialog.large {
+  max-inline-size: 820px;
+}
+.dialog.x-large {
+  max-inline-size: 1024px;
+}
+.dialog.xx-large {
+  max-inline-size: 1280px;
+}
+.dialog.custom-width {
+  max-inline-size: var(--awsui-modal-custom-width-6b9ypa);
+}
+.dialog.max.breakpoint-xs {
+  max-inline-size: calc(100vw - (8 * 10px + var(--space-xxxl-aut1u7, 40px)));
+  margin-block: auto;
+  margin-inline: auto;
+}
+.dialog.custom-height {
+  block-size: var(--awsui-modal-custom-height-6b9ypa);
+  max-block-size: calc(100vh - 2 * var(--space-s-tvghoh, 12px));
+}
+
+.container {
+  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;
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+  word-wrap: break-word;
+  border-block-start: var(--border-container-top-width-n1eke6, 0px) solid var(--color-border-container-top-k3vmoz, transparent);
+  border-start-start-radius: var(--border-radius-container-nsfwmm, 16px);
+  border-start-end-radius: var(--border-radius-container-nsfwmm, 16px);
+  border-end-start-radius: var(--border-radius-container-nsfwmm, 16px);
+  border-end-end-radius: var(--border-radius-container-nsfwmm, 16px);
+  box-shadow: var(--shadow-modal-kwgqht, 0px 4px 20px 1px rgba(0, 7, 22, 0.1));
+}
+.container.custom-height-container {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+}
+
+.content {
+  padding-block-start: var(--space-container-content-top-1wtqrc, 4px);
+  padding-block-end: var(--space-modal-content-bottom-nl6ceq, 16px);
+  padding-inline: var(--space-modal-horizontal-y5hnwp, 20px);
+}
+.content.no-paddings {
+  padding-block: 0;
+  padding-inline: 0;
+}
+.content.custom-height-content {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.header {
+  padding-block-start: var(--space-container-header-top-am4vzw, 12px);
+  padding-block-end: var(--space-container-header-bottom-2taq8v, 8px);
+  padding-inline: var(--space-modal-horizontal-y5hnwp, 20px);
+  background-color: var(--color-background-container-header-gs3mbe, #ffffff);
+  border-block-end: 1px solid var(--color-border-container-divider-9huz1a, transparent);
+  border-start-start-radius: var(--border-radius-container-nsfwmm, 16px);
+  border-start-end-radius: var(--border-radius-container-nsfwmm, 16px);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.footer {
+  border-block-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+  padding-block: var(--space-scaled-s-8ozaad, 12px);
+  padding-inline: var(--space-container-horizontal-nqrzyh, 20px);
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+  position: sticky;
+  inset-block-end: 0;
+  z-index: 800;
+}
+.footer--rounded {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--border-radius-container-nsfwmm, 16px);
+  border-end-end-radius: var(--border-radius-container-nsfwmm, 16px);
+}
+.footer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.modal-open {
+  overflow: hidden;
+  /*
+   * When padding-right is added to account for scrollbar being turned
+   * off by overflow:hidden, that padding will go offscreen and have no
+   * effect if box-sizing is content-box and body width is 100%.  Set
+   * border-box to avoid this; this should be safe as box-sizing isn't
+   * inherited by child elements normally.
+   */
+  box-sizing: border-box;
+}
+`;
+
+// src/modal/internal.ts
+var hostStyles55 = css122`:host { display: block; }`;
+var CsModalInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.visible = false;
+    this.size = "medium";
+    this.header = "";
+    this.closeAriaLabel = "Close";
+    this.disableContentPaddings = false;
+    this.position = "center";
+    this._hasFooter = false;
+    this._onFooterSlotChange = (e) => {
+      const slot = e.target;
+      this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;
+      this.requestUpdate();
+    };
+    this._onKeyDown = (e) => {
+      if (e.key === "Escape" && this.visible) {
+        e.stopPropagation();
+        this._dismiss("keyboard");
+      }
+    };
+    this._onBackdropClick = (e) => {
+      if (e.target === e.currentTarget) {
+        this._dismiss("overlay");
+      }
+    };
+    this._onCloseClick = () => {
+      this._dismiss("closeButton");
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles54, hostStyles55];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._onKeyDown);
+  }
+  _dismiss(reason) {
+    const detail = { reason };
+    fireNonCancelableEvent(this, "dismiss", detail);
+  }
+  render() {
+    const rootClasses = {
+      "root": true,
+      "hidden": !this.visible
+    };
+    const focusLockClasses = {
+      "focus-lock": true,
+      [`position-${this.position}`]: true
+    };
+    const dialogClasses = {
+      "dialog": true,
+      [this.size]: true
+    };
+    const contentClasses = {
+      "content": true,
+      "no-paddings": this.disableContentPaddings
+    };
+    const footerClasses = {
+      "footer": true,
+      "footer--rounded": true
+    };
+    return html56`
+      <div
+        class=${classMap45(rootClasses)}
+        @click=${this._onBackdropClick}
+      >
+        <div class=${classMap45(focusLockClasses)}>
+          <div
+            class=${classMap45(dialogClasses)}
+            role="dialog"
+            aria-modal="true"
+            aria-label=${ifDefined27(this.header || void 0)}
+          >
+            <div class="container">
+              <div class="header">
+                <div style="display:flex;align-items:center;justify-content:space-between;width:100%">
+                  <div style="flex:1;min-width:0">
+                    <slot name="header">${this.header}</slot>
+                  </div>
+                  <cs-button
+                    variant="icon"
+                    icon-name="close"
+                    aria-label=${this.closeAriaLabel}
+                    @click=${this._onCloseClick}
+                  ></cs-button>
+                </div>
+              </div>
+
+              <div class=${classMap45(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>`}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property55({ type: Boolean, reflect: true })
+], CsModalInternal.prototype, "visible", 2);
+__decorateClass([
+  property55({ type: String, reflect: true })
+], CsModalInternal.prototype, "size", 2);
+__decorateClass([
+  property55({ type: String })
+], CsModalInternal.prototype, "header", 2);
+__decorateClass([
+  property55({ type: String })
+], CsModalInternal.prototype, "closeAriaLabel", 2);
+__decorateClass([
+  property55({ type: Boolean })
+], CsModalInternal.prototype, "disableContentPaddings", 2);
+__decorateClass([
+  property55({ type: String })
+], CsModalInternal.prototype, "position", 2);
+
+// src/modal/index.ts
+var CsModal = class extends CsModalInternal {
+};
+customElements.define("cs-modal", CsModal);
+
+// src/file-upload/internal.ts
+import { css as css124, html as html57, nothing as nothing30 } from "lit";
+import { property as property56 } from "lit/decorators.js";
+import { classMap as classMap46 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined28 } from "lit/directives/if-defined.js";
+
+// src/file-upload/styles.ts
+import { css as css123 } from "lit";
+var componentStyles55 = css123`
+.hints {
+  margin-block-start: var(--space-static-xxs-ns94dp, 4px);
+}
+`;
+
+// src/file-upload/internal.ts
+var hostStyles56 = css124`:host { display: block; }`;
+var fileListStyles = css124`
+.file-upload-root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs-ymlm0b, 8px);
+}
+.label {
+  font-weight: 700;
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-form-label-2ul0mm, #0f141a);
+  margin-block-end: var(--space-xxs-p4when, 4px);
+}
+.file-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs-ymlm0b, 8px);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.file-list-horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs-ymlm0b, 8px);
+  padding: var(--space-xxs-p4when, 4px) var(--space-xs-ymlm0b, 8px);
+  border: 1px solid var(--color-border-input-default-nviccl, #c6c6cd);
+  border-radius: var(--border-radius-item-1xihb0, 8px);
+  background: var(--color-background-container-content-6u8rvp, #ffffff);
+  min-width: 0;
+}
+.file-item-error {
+  border-color: var(--color-text-status-error-cjhm35, #db0000);
+}
+.file-info {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+.file-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+}
+.file-metadata {
+  font-size: var(--font-size-body-s-h7kcgl, 12px);
+  color: var(--color-text-body-secondary-5wt35c, #687078);
+  line-height: var(--line-height-body-s-0ycq7b, 16px);
+}
+.file-error {
+  font-size: var(--font-size-body-s-h7kcgl, 12px);
+  color: var(--color-text-status-error-cjhm35, #db0000);
+  line-height: var(--line-height-body-s-0ycq7b, 16px);
+}
+.file-thumbnail {
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+.dismiss-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  color: var(--color-text-body-secondary-5wt35c, #687078);
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+.dismiss-button:hover {
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  background: var(--color-background-button-normal-hover-h21rio, rgba(0, 7, 22, 0.05));
+}
+.constraint-text {
+  font-size: var(--font-size-body-s-h7kcgl, 12px);
+  color: var(--color-text-body-secondary-5wt35c, #687078);
+  line-height: var(--line-height-body-s-0ycq7b, 16px);
+}
+.error-text {
+  font-size: var(--font-size-body-s-h7kcgl, 12px);
+  color: var(--color-text-status-error-cjhm35, #db0000);
+  line-height: var(--line-height-body-s-0ycq7b, 16px);
+}
+`;
+var CsFileUploadInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.value = [];
+    this.multiple = false;
+    this.disabled = false;
+    this.showFileLastModified = false;
+    this.showFileSize = false;
+    this.showFileThumbnail = false;
+    this.errorText = "";
+    this.constraintText = "";
+    this.ariaLabel = null;
+    this.label = "";
+    this.fileTokenAlignment = "vertical";
+    this._thumbnailUrls = /* @__PURE__ */ new Map();
+    this._onFileInputChange = (e) => {
+      const detail = e.detail;
+      if (detail?.value) {
+        const newFiles = this.multiple ? [...this.value, ...detail.value] : [...detail.value];
+        fireNonCancelableEvent(
+          this,
+          "change",
+          { value: newFiles }
+        );
+      }
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles55, fileListStyles, hostStyles56];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    for (const url of this._thumbnailUrls.values()) {
+      URL.revokeObjectURL(url);
+    }
+    this._thumbnailUrls.clear();
+  }
+  focus(options) {
+    const fileInput = this.shadowRoot?.querySelector("cs-file-input");
+    fileInput?.focus(options);
+  }
+  _onRemoveFile(index) {
+    const removedFile = this.value[index];
+    const newFiles = this.value.filter((_, i) => i !== index);
+    if (removedFile && this._thumbnailUrls.has(removedFile)) {
+      URL.revokeObjectURL(this._thumbnailUrls.get(removedFile));
+      this._thumbnailUrls.delete(removedFile);
+    }
+    fireNonCancelableEvent(
+      this,
+      "change",
+      { value: newFiles }
+    );
+  }
+  _getThumbnailUrl(file) {
+    if (!this._thumbnailUrls.has(file)) {
+      this._thumbnailUrls.set(file, URL.createObjectURL(file));
+    }
+    return this._thumbnailUrls.get(file);
+  }
+  _formatFileSize(bytes) {
+    if (this.i18nStrings?.formatFileSize) {
+      return this.i18nStrings.formatFileSize(bytes);
+    }
+    if (bytes < 1024) return `${bytes} bytes`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+  _formatLastModified(date) {
+    if (this.i18nStrings?.formatFileLastModified) {
+      return this.i18nStrings.formatFileLastModified(date);
+    }
+    return date.toLocaleDateString();
+  }
+  _getRemoveAriaLabel(index, fileName) {
+    if (this.i18nStrings?.removeFileAriaLabel) {
+      return this.i18nStrings.removeFileAriaLabel(index, fileName);
+    }
+    return `Remove ${fileName}`;
+  }
+  _renderFileItem(file, index) {
+    const error = this.fileErrors?.[index] ?? null;
+    const isImage = file.type.startsWith("image/");
+    const itemClasses = {
+      "file-item": true,
+      "file-item-error": !!error
+    };
+    return html57`
+      <li class=${classMap46(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>
+          <div class="file-metadata">
+            ${this.showFileSize ? html57`<span>${this._formatFileSize(file.size)}</span>` : nothing30}
+            ${this.showFileSize && this.showFileLastModified ? html57`<span> · </span>` : nothing30}
+            ${this.showFileLastModified ? html57`<span>${this._formatLastModified(new Date(file.lastModified))}</span>` : nothing30}
+          </div>
+          ${error ? html57`<div class="file-error">${error}</div>` : nothing30}
+        </div>
+        <button
+          class="dismiss-button"
+          type="button"
+          aria-label=${this._getRemoveAriaLabel(index, file.name)}
+          @click=${() => this._onRemoveFile(index)}
+        >
+          <cs-icon name="close" size="small"></cs-icon>
+        </button>
+      </li>
+    `;
+  }
+  render() {
+    const hasFiles = this.value.length > 0;
+    const uploadButtonText = this.i18nStrings?.uploadButtonText ? this.i18nStrings.uploadButtonText(this.multiple) : this.multiple ? "Choose files" : "Choose file";
+    const listClasses = {
+      "file-list": true,
+      "file-list-horizontal": this.fileTokenAlignment === "horizontal"
+    };
+    return html57`
+      <div class="file-upload-root">
+        ${this.label ? html57`<label class="label">${this.label}</label>` : nothing30}
+
+        <cs-file-input
+          variant="button"
+          accept=${ifDefined28(this.accept || void 0)}
+          ?multiple=${this.multiple}
+          ?disabled=${this.disabled}
+          aria-label=${this.ariaLabel || uploadButtonText}
+          @change=${this._onFileInputChange}
+        >${uploadButtonText}</cs-file-input>
+
+        ${this.constraintText ? html57`<div class="constraint-text hints">${this.constraintText}</div>` : nothing30}
+
+        ${this.errorText ? html57`<div class="error-text">${this.errorText}</div>` : nothing30}
+
+        ${hasFiles ? html57`
+            <ul class=${classMap46(listClasses)} role="list">
+              ${this.value.map((file, i) => this._renderFileItem(file, i))}
+            </ul>
+          ` : nothing30}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property56({ attribute: false })
+], CsFileUploadInternal.prototype, "value", 2);
+__decorateClass([
+  property56({ type: String })
+], CsFileUploadInternal.prototype, "accept", 2);
+__decorateClass([
+  property56({ type: Boolean, reflect: true })
+], CsFileUploadInternal.prototype, "multiple", 2);
+__decorateClass([
+  property56({ type: Boolean, reflect: true })
+], CsFileUploadInternal.prototype, "disabled", 2);
+__decorateClass([
+  property56({ type: Boolean })
+], CsFileUploadInternal.prototype, "showFileLastModified", 2);
+__decorateClass([
+  property56({ type: Boolean })
+], CsFileUploadInternal.prototype, "showFileSize", 2);
+__decorateClass([
+  property56({ type: Boolean })
+], CsFileUploadInternal.prototype, "showFileThumbnail", 2);
+__decorateClass([
+  property56({ attribute: false })
+], CsFileUploadInternal.prototype, "fileErrors", 2);
+__decorateClass([
+  property56({ type: String })
+], CsFileUploadInternal.prototype, "errorText", 2);
+__decorateClass([
+  property56({ type: String })
+], CsFileUploadInternal.prototype, "constraintText", 2);
+__decorateClass([
+  property56({ type: String })
+], CsFileUploadInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property56({ type: String })
+], CsFileUploadInternal.prototype, "label", 2);
+__decorateClass([
+  property56({ attribute: false })
+], CsFileUploadInternal.prototype, "i18nStrings", 2);
+__decorateClass([
+  property56({ type: String })
+], CsFileUploadInternal.prototype, "fileTokenAlignment", 2);
+
+// src/file-upload/index.ts
+var CsFileUpload = class extends CsFileUploadInternal {
+};
+customElements.define("cs-file-upload", CsFileUpload);
+
+// src/calendar/internal.ts
+import { css as css126, html as html58, nothing as nothing31 } from "lit";
+import { property as property57, state as state18 } from "lit/decorators.js";
+import { classMap as classMap47 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined29 } from "lit/directives/if-defined.js";
+
+// src/calendar/styles.ts
+import { css as css125 } from "lit";
+var componentStyles56 = css125`
+.calendar {
+  animation: awsui_awsui-motion-fade-in-0_1ykar_1p0hg_1 var(--motion-duration-show-quick-tyvnyw, 135ms) var(--motion-easing-show-quick-9hlj8q, ease-out);
+  animation-fill-mode: both;
+}
+@keyframes awsui_awsui-motion-fade-in-0_1ykar_1p0hg_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .calendar {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .calendar, .awsui-mode-entering .calendar {
+  animation: none;
+  transition: none;
+}
+
+.calendar {
+  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;
+  inline-size: var(--size-calendar-grid-width-hv3136, 238px);
+  overflow: auto;
+}
+.calendar-inner {
+  margin-block: var(--space-xs-ymlm0b, 8px);
+  margin-inline: var(--space-xs-ymlm0b, 8px);
+}
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.calendar-header-title {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  font-weight: 700;
+  color: var(--color-text-dropdown-item-default-f1jr9u, #0f141a);
+  margin-block: 0;
+  margin-inline: 0;
+}
+.calendar-next-btn {
+  /* used for identifying element */
+}
+.calendar-prev-btn {
+  /* used for identifying element */
+}
+.calendar-grid {
+  inline-size: 100%;
+  table-layout: fixed;
+}
+.calendar-grid:not(.calendar-grid-dense) {
+  border-spacing: var(--space-calendar-grid-gutter-zojo6r, 6px);
+  padding-block: var(--space-xs-ymlm0b, 8px);
+  padding-inline: var(--space-xs-ymlm0b, 8px);
+}
+.calendar-grid-dense {
+  border-spacing: 0;
+}
+.calendar-grid-cell {
+  word-break: break-word;
+  text-align: center;
+  font-weight: unset;
+}
+.calendar-date-header {
+  padding-block-start: var(--space-s-tvghoh, 12px);
+  padding-block-end: var(--space-xxs-hwfkai, 4px);
+  padding-inline: 0;
+  color: var(--color-text-calendar-month-ea0e93, #656871);
+  font-size: var(--font-size-body-s-smc8cv, 12px);
+  line-height: var(--line-height-body-s-nu5hx1, 16px);
+  letter-spacing: var(--letter-spacing-body-s-gq78ok, 0.005em);
+}
+.calendar-date {
+  border-block-end: 1px solid var(--color-border-calendar-grid-67r4w4, transparent);
+  border-inline-end: 1px solid var(--color-border-calendar-grid-67r4w4, transparent);
+  padding-block: var(--space-xxs-hwfkai, 4px);
+  padding-inline: 0;
+  color: var(--color-text-dropdown-item-disabled-8m65hf, #b4b4bb);
+  position: relative;
+}
+.calendar-date:first-child {
+  border-inline-start: 1px solid var(--color-border-calendar-grid-67r4w4, transparent);
+}
+.calendar-date-enabled {
+  cursor: pointer;
+  color: var(--color-text-dropdown-item-secondary-v12lfh, #656871);
+}
+.calendar-date-enabled::after {
+  border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
+}
+.calendar-date-enabled.calendar-date-current-page {
+  color: var(--color-text-dropdown-item-default-f1jr9u, #0f141a);
+}
+.calendar-date-enabled.calendar-date-current-page:hover {
+  border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
+  color: var(--color-text-calendar-date-hover-3fcriv, #0f141a);
+  background-color: var(--color-background-dropdown-item-hover-yunepc, #f3f3f7);
+}
+.calendar-date-enabled.calendar-date-current-page:hover:not(.calendar-date-selected)::after {
+  border-block: var(--border-item-width-miijiw, 2px) solid var(--color-border-dropdown-item-hover-aqfuxq, #8c8c94);
+  border-inline: var(--border-item-width-miijiw, 2px) solid var(--color-border-dropdown-item-hover-aqfuxq, #8c8c94);
+}
+.calendar-date-current {
+  border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
+  background-color: var(--color-background-calendar-current-date-sk0f6i, #f3f3f7);
+  font-weight: 700;
+}
+.calendar-date::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  background-color: transparent;
+  inset-block-start: calc(-1 * var(--border-item-width-miijiw, 2px));
+  inset-inline-start: calc(-1 * var(--border-item-width-miijiw, 2px));
+  inset-inline-end: calc(-1 * var(--border-item-width-miijiw, 2px));
+}
+.calendar-date:not(.calendar-date-dense)::after {
+  inset-block-end: calc(-1 * var(--border-item-width-miijiw, 2px));
+  inset-inline-start: calc(-1 * var(--border-item-width-miijiw, 2px));
+}
+.calendar-date-dense::after {
+  inset-block-end: -1px;
+  inset-inline-start: -1px;
+}
+.calendar-date > .date-inner {
+  position: relative;
+  z-index: 1;
+}
+.calendar-date:focus {
+  outline: none;
+}
+:host-context([data-awsui-focus-visible=true]) .calendar-date:focus:focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .calendar-date:focus:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px) - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .calendar-date:focus:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px));
+  inset-block-start: calc(-1 * var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px));
+  inline-size: calc(100% + var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px) + var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px));
+  block-size: calc(100% + var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px) + var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px));
+  border-start-start-radius: var(--border-radius-calendar-day-focus-ring-xvvbuc, 3px);
+  border-start-end-radius: var(--border-radius-calendar-day-focus-ring-xvvbuc, 3px);
+  border-end-start-radius: var(--border-radius-calendar-day-focus-ring-xvvbuc, 3px);
+  border-end-end-radius: var(--border-radius-calendar-day-focus-ring-xvvbuc, 3px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+}
+:host-context([data-awsui-focus-visible=true]) .calendar-date:focus:focus::before {
+  z-index: 2;
+}
+.calendar-date-selected {
+  border-color: transparent;
+  position: relative;
+  z-index: 2;
+  font-weight: 700;
+}
+:host-context([data-awsui-focus-visible=true]) .calendar-date-selected:focus:focus {
+  position: relative;
+}
+:host-context([data-awsui-focus-visible=true]) .calendar-date-selected:focus:focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px) - 1px);
+}
+:host-context([data-awsui-focus-visible=true]) .calendar-date-selected:focus:focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px));
+  inset-block-start: calc(-1 * var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px));
+  inline-size: calc(100% + var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px) + var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px));
+  block-size: calc(100% + var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px) + var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px));
+  border-start-start-radius: var(--border-radius-calendar-day-focus-ring-xvvbuc, 3px);
+  border-start-end-radius: var(--border-radius-calendar-day-focus-ring-xvvbuc, 3px);
+  border-end-start-radius: var(--border-radius-calendar-day-focus-ring-xvvbuc, 3px);
+  border-end-end-radius: var(--border-radius-calendar-day-focus-ring-xvvbuc, 3px);
+  box-shadow: 0 0 0 2px var(--color-border-calendar-grid-selected-focus-ring-jk1fb0, #f9f9fa);
+}
+:host-context([data-awsui-focus-visible=true]) .calendar-date-selected:focus:focus::before {
+  z-index: 2;
+}
+.calendar-date-selected::after {
+  border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
+  border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
+  background-color: var(--color-background-control-checked-ka7kc2, #006ce0);
+  border-block: var(--border-item-width-miijiw, 2px) solid var(--color-background-control-checked-ka7kc2, #006ce0);
+  border-inline: var(--border-item-width-miijiw, 2px) solid var(--color-background-control-checked-ka7kc2, #006ce0);
+}
+.calendar-date-selected > .date-inner {
+  z-index: 2;
+  color: var(--color-background-control-default-4jb21l, #ffffff);
+  position: relative;
+}
+.calendar-row:first-child > .calendar-date {
+  border-block-start: 1px solid var(--color-border-calendar-grid-67r4w4, transparent);
+}
+
+.disabled-reason-tooltip {
+  /* used in test-utils or tests */
+}
+`;
+
+// src/calendar/internal.ts
+var hostStyles57 = css126`:host { display: block; }`;
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function toISODate(d) {
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+}
+function todayISO() {
+  return toISODate(/* @__PURE__ */ new Date());
+}
+var CsCalendarInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.locale = "en-US";
+    this.startOfWeek = 0;
+    this.granularity = "day";
+    this.ariaLabel = null;
+    this.ariaLabelledby = null;
+    this.ariaDescribedby = null;
+    this._displayedMonth = (/* @__PURE__ */ new Date()).getMonth();
+    this._displayedYear = (/* @__PURE__ */ new Date()).getFullYear();
+    this._focusedDate = "";
+    this._onPrevClick = (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      this._onPrevMonth();
+    };
+    this._onNextClick = (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      this._onNextMonth();
+    };
+    this._onGridKeyDown = (e) => {
+      let focused = this._focusedDate || this.value;
+      if (!focused) {
+        focused = `${this._displayedYear}-${pad2(this._displayedMonth + 1)}-01`;
+      }
+      const [y, m, d] = focused.split("-").map(Number);
+      const date = new Date(y, m - 1, d);
+      let handled = true;
+      switch (e.key) {
+        case "ArrowLeft":
+          date.setDate(date.getDate() - 1);
+          break;
+        case "ArrowRight":
+          date.setDate(date.getDate() + 1);
+          break;
+        case "ArrowUp":
+          date.setDate(date.getDate() - 7);
+          break;
+        case "ArrowDown":
+          date.setDate(date.getDate() + 7);
+          break;
+        case "PageUp":
+          if (e.shiftKey) {
+            date.setFullYear(date.getFullYear() - 1);
+          } else {
+            date.setMonth(date.getMonth() - 1);
+          }
+          break;
+        case "PageDown":
+          if (e.shiftKey) {
+            date.setFullYear(date.getFullYear() + 1);
+          } else {
+            date.setMonth(date.getMonth() + 1);
+          }
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          this._selectDate(focused);
+          return;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        e.preventDefault();
+        const newDate = toISODate(date);
+        this._focusedDate = newDate;
+        this._displayedMonth = date.getMonth();
+        this._displayedYear = date.getFullYear();
+        this.updateComplete.then(() => {
+          const cell = this.shadowRoot?.querySelector(
+            `[data-date="${newDate}"]`
+          );
+          cell?.focus();
+        });
+      }
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles56, hostStyles57];
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("value") && this.value) {
+      const parts = this.value.split("-");
+      if (parts.length >= 2) {
+        const year = parseInt(parts[0], 10);
+        const month = parseInt(parts[1], 10) - 1;
+        if (!isNaN(year) && !isNaN(month)) {
+          this._displayedYear = year;
+          this._displayedMonth = month;
+        }
+      }
+    }
+  }
+  _getMonthTitle() {
+    const date = new Date(this._displayedYear, this._displayedMonth, 1);
+    return new Intl.DateTimeFormat(this.locale, {
+      month: "long",
+      year: "numeric"
+    }).format(date);
+  }
+  _getDayNames() {
+    const formatter = new Intl.DateTimeFormat(this.locale, { weekday: "short" });
+    const names = [];
+    for (let i = 0; i < 7; i++) {
+      const dayIndex = (this.startOfWeek + i) % 7;
+      const date = new Date(2017, 0, 1 + dayIndex);
+      names.push(formatter.format(date));
+    }
+    return names;
+  }
+  _getCalendarWeeks() {
+    const year = this._displayedYear;
+    const month = this._displayedMonth;
+    const firstOfMonth = new Date(year, month, 1);
+    const today = todayISO();
+    let startOffset = firstOfMonth.getDay() - this.startOfWeek;
+    if (startOffset < 0) startOffset += 7;
+    const weeks = [];
+    const cursor = new Date(year, month, 1 - startOffset);
+    for (let w = 0; w < 6; w++) {
+      const days = [];
+      for (let d = 0; d < 7; d++) {
+        const dateStr = toISODate(cursor);
+        days.push({
+          date: dateStr,
+          day: cursor.getDate(),
+          currentMonth: cursor.getMonth() === month,
+          today: dateStr === today
+        });
+        cursor.setDate(cursor.getDate() + 1);
+      }
+      weeks.push(days);
+    }
+    return weeks;
+  }
+  _isEnabled(dateStr) {
+    if (!this.isDateEnabled) return true;
+    const [y, m, d] = dateStr.split("-").map(Number);
+    return this.isDateEnabled(new Date(y, m - 1, d));
+  }
+  _onPrevMonth() {
+    if (this._displayedMonth === 0) {
+      this._displayedMonth = 11;
+      this._displayedYear--;
+    } else {
+      this._displayedMonth--;
+    }
+  }
+  _onNextMonth() {
+    if (this._displayedMonth === 11) {
+      this._displayedMonth = 0;
+      this._displayedYear++;
+    } else {
+      this._displayedMonth++;
+    }
+  }
+  _selectDate(dateStr) {
+    if (!this._isEnabled(dateStr)) return;
+    this.value = dateStr;
+    fireNonCancelableEvent(
+      this,
+      "change",
+      { value: dateStr }
+    );
+  }
+  _onDateClick(dateStr) {
+    this._selectDate(dateStr);
+  }
+  _getTabIndex(day) {
+    if (day.date === this.value) return 0;
+    if (day.date === this._focusedDate) return 0;
+    if (!this.value && !this._focusedDate && day.today && day.currentMonth)
+      return 0;
+    return -1;
+  }
+  render() {
+    const weeks = this._getCalendarWeeks();
+    const dayNames = this._getDayNames();
+    const monthTitle = this._getMonthTitle();
+    const prevLabel = this.i18nStrings?.previousMonthAriaLabel ?? "Previous month";
+    const nextLabel = this.i18nStrings?.nextMonthAriaLabel ?? "Next month";
+    return html58`
+      <div
+        class="calendar"
+        role="group"
+        aria-label=${ifDefined29(this.ariaLabel || void 0)}
+        aria-labelledby=${ifDefined29(
+      !this.ariaLabel ? this.ariaLabelledby || void 0 : void 0
+    )}
+        aria-describedby=${ifDefined29(this.ariaDescribedby || void 0)}
+      >
+        <div class="calendar-inner">
+          <div class="calendar-header">
+            <cs-button
+              class="calendar-prev-btn"
+              variant="icon"
+              icon-name="angle-left"
+              aria-label=${prevLabel}
+              @click=${this._onPrevClick}
+            ></cs-button>
+            <span class="calendar-header-title">${monthTitle}</span>
+            <cs-button
+              class="calendar-next-btn"
+              variant="icon"
+              icon-name="angle-right"
+              aria-label=${nextLabel}
+              @click=${this._onNextClick}
+            ></cs-button>
+          </div>
+          <table
+            class="calendar-grid"
+            role="grid"
+            @keydown=${this._onGridKeyDown}
+          >
+            <thead>
+              <tr>
+                ${dayNames.map(
+      (name) => html58`
+                    <th class="calendar-grid-cell calendar-date-header" scope="col">
+                      ${name}
+                    </th>
+                  `
+    )}
+              </tr>
+            </thead>
+            <tbody>
+              ${weeks.map(
+      (week) => html58`
+                  <tr class="calendar-row">
+                    ${week.map((day) => {
+        const isSelected = day.date === this.value;
+        const isEnabled = day.currentMonth && this._isEnabled(day.date);
+        const classes = {
+          "calendar-date": true,
+          "calendar-date-current-page": day.currentMonth,
+          "calendar-date-current": day.today,
+          "calendar-date-selected": isSelected,
+          "calendar-date-enabled": isEnabled
+        };
+        return html58`
+                        <td
+                          class=${classMap47(classes)}
+                          role="gridcell"
+                          tabindex=${this._getTabIndex(day)}
+                          aria-selected=${isSelected ? "true" : "false"}
+                          aria-disabled=${!isEnabled ? "true" : nothing31}
+                          data-date=${day.date}
+                          @click=${() => this._onDateClick(day.date)}
+                        >
+                          <span class="date-inner">${day.day}</span>
+                        </td>
+                      `;
+      })}
+                  </tr>
+                `
+    )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property57({ type: String })
+], CsCalendarInternal.prototype, "value", 2);
+__decorateClass([
+  property57({ type: String })
+], CsCalendarInternal.prototype, "locale", 2);
+__decorateClass([
+  property57({ type: Number })
+], CsCalendarInternal.prototype, "startOfWeek", 2);
+__decorateClass([
+  property57({ type: String })
+], CsCalendarInternal.prototype, "granularity", 2);
+__decorateClass([
+  property57({ attribute: false })
+], CsCalendarInternal.prototype, "isDateEnabled", 2);
+__decorateClass([
+  property57({ attribute: false })
+], CsCalendarInternal.prototype, "dateDisabledReason", 2);
+__decorateClass([
+  property57({ type: String })
+], CsCalendarInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property57({ type: String })
+], CsCalendarInternal.prototype, "ariaLabelledby", 2);
+__decorateClass([
+  property57({ type: String })
+], CsCalendarInternal.prototype, "ariaDescribedby", 2);
+__decorateClass([
+  property57({ attribute: false })
+], CsCalendarInternal.prototype, "i18nStrings", 2);
+__decorateClass([
+  state18()
+], CsCalendarInternal.prototype, "_displayedMonth", 2);
+__decorateClass([
+  state18()
+], CsCalendarInternal.prototype, "_displayedYear", 2);
+__decorateClass([
+  state18()
+], CsCalendarInternal.prototype, "_focusedDate", 2);
+
+// src/calendar/index.ts
+var CsCalendar = class extends CsCalendarInternal {
+};
+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 { ifDefined as ifDefined30 } from "lit/directives/if-defined.js";
+import { consume as consume2 } from "@lit/context";
+
+// src/date-input/styles.ts
+import { css as css127 } from "lit";
+var componentStyles57 = css127`
+
+`;
+
+// src/date-input/internal.ts
+var Base9 = FormAssociatedMixin(CsBaseElement);
+var hostStyles58 = css128`:host { display: block; }`;
+var CsDateInputInternal = class extends Base9 {
+  constructor() {
+    super(...arguments);
+    this._formFieldCtx = defaultFormFieldContext;
+    this.value = "";
+    this.placeholder = "YYYY/MM/DD";
+    this.readOnly = false;
+    this.invalid = false;
+    this.warning = false;
+    this.autoFocus = false;
+    this.ariaLabel = null;
+    this.ariaDescribedby = null;
+    this._onInput = (e) => {
+      const target = e.target;
+      this.value = target.value;
+      fireNonCancelableEvent(
+        this,
+        "change",
+        { value: this.value }
+      );
+    };
+    this._onBlur = () => {
+      fireNonCancelableEvent(this, "blur", null);
+    };
+    this._onFocus = () => {
+      fireNonCancelableEvent(this, "focus", null);
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles57, hostStyles58];
+  }
+  focus(options) {
+    this._getInput()?.focus(options);
+  }
+  select() {
+    this._getInput()?.select();
+  }
+  _getInput() {
+    return this.shadowRoot?.querySelector("input");
+  }
+  get _isInvalid() {
+    return this.invalid || this._formFieldCtx.invalid;
+  }
+  get _isWarning() {
+    return (this.warning || this._formFieldCtx.warning) && !this._isInvalid;
+  }
+  get _resolvedAriaDescribedby() {
+    const parts = [];
+    if (this.ariaDescribedby) parts.push(this.ariaDescribedby);
+    if (this._formFieldCtx.ariaDescribedby)
+      parts.push(this._formFieldCtx.ariaDescribedby);
+    return parts.length ? parts.join(" ") : void 0;
+  }
+  render() {
+    const inputClasses = {
+      input: true,
+      "input-readonly": this.readOnly,
+      "input-invalid": this._isInvalid,
+      "input-warning": this._isWarning,
+      "input-disabled": this.disabled,
+      "input-type-text": true
+    };
+    const controlId = this._formFieldCtx.controlId || void 0;
+    const ariaLabelledby = this._formFieldCtx.ariaLabelledby || void 0;
+    return html59`
+      <div class="root">
+        <div class="input-container">
+          <input
+            class=${classMap48(inputClasses)}
+            type="text"
+            .value=${this.value}
+            placeholder=${ifDefined30(this.placeholder || void 0)}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readOnly}
+            ?autofocus=${this.autoFocus}
+            id=${ifDefined30(controlId)}
+            aria-label=${ifDefined30(this.ariaLabel || void 0)}
+            aria-labelledby=${ifDefined30(
+      !this.ariaLabel ? ariaLabelledby : void 0
+    )}
+            aria-describedby=${ifDefined30(this._resolvedAriaDescribedby)}
+            aria-invalid=${ifDefined30(this._isInvalid ? "true" : void 0)}
+            @input=${this._onInput}
+            @blur=${this._onBlur}
+            @focus=${this._onFocus}
+          />
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  consume2({ context: formFieldContext, subscribe: true })
+], CsDateInputInternal.prototype, "_formFieldCtx", 2);
+__decorateClass([
+  property58({ type: String })
+], CsDateInputInternal.prototype, "value", 2);
+__decorateClass([
+  property58({ type: String })
+], CsDateInputInternal.prototype, "placeholder", 2);
+__decorateClass([
+  property58({ type: Boolean, reflect: true })
+], CsDateInputInternal.prototype, "readOnly", 2);
+__decorateClass([
+  property58({ type: Boolean, reflect: true })
+], CsDateInputInternal.prototype, "invalid", 2);
+__decorateClass([
+  property58({ type: Boolean, reflect: true })
+], CsDateInputInternal.prototype, "warning", 2);
+__decorateClass([
+  property58({ type: Boolean })
+], CsDateInputInternal.prototype, "autoFocus", 2);
+__decorateClass([
+  property58({ type: String })
+], CsDateInputInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property58({ type: String })
+], CsDateInputInternal.prototype, "ariaDescribedby", 2);
+
+// src/date-input/index.ts
+var CsDateInput = class extends CsDateInputInternal {
+};
+customElements.define("cs-date-input", CsDateInput);
+
+// src/date-picker/internal.ts
+import { css as css130, html as html60, nothing as nothing32 } from "lit";
+import { property as property59, state as state19, query as query7 } from "lit/decorators.js";
+import { ifDefined as ifDefined31 } from "lit/directives/if-defined.js";
+import { consume as consume3 } from "@lit/context";
+
+// src/date-picker/styles.ts
+import { css as css129 } from "lit";
+var componentStyles58 = css129`
+.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;
+}
+
+.focus-lock {
+  display: contents;
+}
+
+.calendar {
+  overflow: auto;
+}
+.calendar:focus {
+  outline: none;
+}
+:host-context([data-awsui-focus-visible=true]) .calendar:focus {
+  outline: 2px dotted transparent;
+  outline-offset: 2px;
+  border-start-start-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+  border-start-end-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+  border-end-start-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+  border-end-end-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+}
+
+.date-picker-container {
+  position: relative;
+  max-inline-size: 234px;
+}
+
+.date-picker-trigger {
+  display: flex;
+}
+
+.date-picker-input {
+  padding-inline-end: var(--space-xs-ymlm0b, 8px);
+  inline-size: 100%;
+}
+`;
+
+// src/date-picker/internal.ts
+var Base10 = FormAssociatedMixin(CsBaseElement);
+var hostStyles59 = css130`:host { display: block; }`;
+var dropdownStyles3 = css130`
+.dropdown {
+  position: fixed;
+  z-index: 1000;
+  background: var(--color-background-dropdown-item-default-x1j8rl, #ffffff);
+  border: 1px solid var(--color-border-dropdown-maqkj1, #8c8c94);
+  border-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+  box-shadow: var(--shadow-dropdown-ld783s, 0px 4px 20px 1px rgba(0, 7, 22, 0.1));
+  padding: 0;
+}
+`;
+var CsDatePickerInternal = class extends Base10 {
+  constructor() {
+    super(...arguments);
+    this._formFieldCtx = defaultFormFieldContext;
+    this.value = "";
+    this.placeholder = "YYYY/MM/DD";
+    this.locale = "en-US";
+    this.startOfWeek = 0;
+    this.granularity = "day";
+    this.readOnly = false;
+    this.invalid = false;
+    this.warning = false;
+    this.autoFocus = false;
+    this.ariaLabel = null;
+    this._open = false;
+    this._cleanupOutsideClick = null;
+    this._onInputChange = (e) => {
+      e.stopPropagation();
+      this.value = e.detail.value;
+      fireNonCancelableEvent(
+        this,
+        "change",
+        { value: this.value }
+      );
+    };
+    this._onCalendarChange = (e) => {
+      e.stopPropagation();
+      this.value = e.detail.value;
+      this._open = false;
+      fireNonCancelableEvent(
+        this,
+        "change",
+        { value: this.value }
+      );
+      this.focus();
+    };
+    this._onToggleClick = (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      this._onToggleCalendar();
+    };
+    this._onToggleCalendar = () => {
+      if (this.disabled || this.readOnly) return;
+      this._open = !this._open;
+    };
+    this._onHostKeyDown = (e) => {
+      if (e.key === "Escape" && this._open) {
+        e.stopPropagation();
+        this._open = false;
+        this.focus();
+      }
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles58, dropdownStyles3, hostStyles59];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this._onHostKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._onHostKeyDown);
+    this._removeOutsideClickListener();
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("_open")) {
+      if (this._open) {
+        this._updateDropdownPosition();
+        this._addOutsideClickListener();
+      } else {
+        this._removeOutsideClickListener();
+      }
+    }
+  }
+  focus(options) {
+    const dateInput = this.shadowRoot?.querySelector("cs-date-input");
+    dateInput?.focus(options);
+  }
+  get _isInvalid() {
+    return this.invalid || this._formFieldCtx.invalid;
+  }
+  get _isWarning() {
+    return (this.warning || this._formFieldCtx.warning) && !this._isInvalid;
+  }
+  async _updateDropdownPosition() {
+    await this.updateComplete;
+    if (!this._triggerEl || !this._dropdownEl) return;
+    const { x, y } = await computePosition2(
+      this._triggerEl,
+      this._dropdownEl,
+      {
+        placement: "bottom-start",
+        strategy: "fixed",
+        middleware: [offset2(4), flip2({ padding: 8 }), shift2({ padding: 8 })]
+      }
+    );
+    Object.assign(this._dropdownEl.style, {
+      left: `${x}px`,
+      top: `${y}px`
+    });
+  }
+  _addOutsideClickListener() {
+    this._removeOutsideClickListener();
+    const handler = (e) => {
+      const path = e.composedPath();
+      if (!path.includes(this)) {
+        this._open = false;
+      }
+    };
+    requestAnimationFrame(() => {
+      document.addEventListener("click", handler, true);
+      this._cleanupOutsideClick = () => {
+        document.removeEventListener("click", handler, true);
+      };
+    });
+  }
+  _removeOutsideClickListener() {
+    this._cleanupOutsideClick?.();
+    this._cleanupOutsideClick = null;
+  }
+  _getOpenCalendarLabel() {
+    if (this.i18nStrings?.openCalendarAriaLabel) {
+      return this.i18nStrings.openCalendarAriaLabel(this.value || null);
+    }
+    if (this.openCalendarAriaLabel) {
+      return this.openCalendarAriaLabel(this.value || null);
+    }
+    return "Open calendar";
+  }
+  render() {
+    return html60`
+      <div class="root">
+        <div class="date-picker-container">
+          <div class="date-picker-trigger">
+            <div class="date-picker-input">
+              <cs-date-input
+                .value=${this.value}
+                placeholder=${this.placeholder}
+                ?disabled=${this.disabled}
+                ?read-only=${this.readOnly}
+                ?invalid=${this._isInvalid}
+                ?warning=${this._isWarning}
+                aria-label=${ifDefined31(this.ariaLabel || void 0)}
+                @change=${this._onInputChange}
+              ></cs-date-input>
+            </div>
+            <cs-button
+              variant="icon"
+              icon-name="calendar"
+              ?disabled=${this.disabled || this.readOnly}
+              aria-label=${this._getOpenCalendarLabel()}
+              aria-expanded=${this._open ? "true" : "false"}
+              @click=${this._onToggleClick}
+            ></cs-button>
+          </div>
+          ${this._open ? html60`
+                <div class="dropdown">
+                  <div class="calendar" tabindex="-1">
+                    <cs-calendar
+                      .value=${this.value}
+                      locale=${this.locale}
+                      start-of-week=${this.startOfWeek}
+                      .isDateEnabled=${this.isDateEnabled}
+                      .i18nStrings=${this.i18nStrings}
+                      aria-label=${ifDefined31(this.ariaLabel || void 0)}
+                      @change=${this._onCalendarChange}
+                    ></cs-calendar>
+                  </div>
+                </div>
+              ` : nothing32}
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  consume3({ context: formFieldContext, subscribe: true })
+], CsDatePickerInternal.prototype, "_formFieldCtx", 2);
+__decorateClass([
+  property59({ type: String })
+], CsDatePickerInternal.prototype, "value", 2);
+__decorateClass([
+  property59({ type: String })
+], CsDatePickerInternal.prototype, "placeholder", 2);
+__decorateClass([
+  property59({ type: String })
+], CsDatePickerInternal.prototype, "locale", 2);
+__decorateClass([
+  property59({ type: Number })
+], CsDatePickerInternal.prototype, "startOfWeek", 2);
+__decorateClass([
+  property59({ type: String })
+], CsDatePickerInternal.prototype, "granularity", 2);
+__decorateClass([
+  property59({ attribute: false })
+], CsDatePickerInternal.prototype, "isDateEnabled", 2);
+__decorateClass([
+  property59({ attribute: false })
+], CsDatePickerInternal.prototype, "openCalendarAriaLabel", 2);
+__decorateClass([
+  property59({ type: Boolean, reflect: true })
+], CsDatePickerInternal.prototype, "readOnly", 2);
+__decorateClass([
+  property59({ type: Boolean, reflect: true })
+], CsDatePickerInternal.prototype, "invalid", 2);
+__decorateClass([
+  property59({ type: Boolean, reflect: true })
+], CsDatePickerInternal.prototype, "warning", 2);
+__decorateClass([
+  property59({ type: Boolean })
+], CsDatePickerInternal.prototype, "autoFocus", 2);
+__decorateClass([
+  property59({ type: String })
+], CsDatePickerInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property59({ attribute: false })
+], CsDatePickerInternal.prototype, "i18nStrings", 2);
+__decorateClass([
+  state19()
+], CsDatePickerInternal.prototype, "_open", 2);
+__decorateClass([
+  query7(".date-picker-trigger")
+], CsDatePickerInternal.prototype, "_triggerEl", 2);
+__decorateClass([
+  query7(".dropdown")
+], CsDatePickerInternal.prototype, "_dropdownEl", 2);
+
+// src/date-picker/index.ts
+var CsDatePicker = class extends CsDatePickerInternal {
+};
+customElements.define("cs-date-picker", CsDatePicker);
+
+// src/date-range-picker/internal.ts
+import { css as css133, html as html61, nothing as nothing33 } from "lit";
+import { property as property60, state as state20, query as query8 } from "lit/decorators.js";
+import { classMap as classMap49 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined32 } from "lit/directives/if-defined.js";
+
+// src/date-range-picker/styles.ts
+import { css as css131 } from "lit";
+var componentStyles59 = css131`
+.calendar {
+  animation: awsui_awsui-motion-fade-in-0_mgja0_1ueys_1 var(--motion-duration-show-quick-tyvnyw, 135ms) var(--motion-easing-show-quick-9hlj8q, ease-out);
+  animation-fill-mode: both;
+}
+@keyframes awsui_awsui-motion-fade-in-0_mgja0_1ueys_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .calendar {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .calendar, .awsui-mode-entering .calendar {
+  animation: none;
+  transition: none;
+}
+
+.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+.root:not(.wide) {
+  max-inline-size: 32em;
+}
+.root.wide {
+  max-inline-size: 39em;
+}
+
+.focus-lock {
+  display: contents;
+}
+
+.trigger-flexbox {
+  display: flex;
+}
+
+.calendar-container {
+  inline-size: calc(2 * var(--size-calendar-grid-width-hv3136, 238px) + var(--space-xs-ymlm0b, 8px));
+}
+.calendar-container.one-grid {
+  inline-size: var(--size-calendar-grid-width-hv3136, 238px);
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+.calendar-header-pages-wrapper {
+  position: absolute;
+  inset: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex: 1;
+  pointer-events: none;
+}
+.calendar-header-page {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  font-weight: 700;
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  display: flex;
+  pointer-events: auto;
+}
+
+.date-and-time-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--size-calendar-grid-width-hv3136, 238px), 1fr));
+  gap: var(--space-xs-ymlm0b, 8px);
+}
+
+.date-and-time-wrapper {
+  inline-size: var(--size-calendar-grid-width-hv3136, 238px);
+  display: grid;
+  gap: var(--space-xs-ymlm0b, 8px);
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}
+
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  border-block-start: 1px solid var(--color-border-dropdown-item-default-kape37, #c6c6cd);
+  padding-block-start: 0;
+  padding-block-end: var(--space-s-tvghoh, 12px);
+  padding-inline: var(--space-l-2ud1p3, 20px);
+}
+.footer.has-clear-button {
+  justify-content: space-between;
+}
+.footer.one-grid {
+  padding-block-start: 0;
+  padding-block-end: var(--space-s-tvghoh, 12px);
+  padding-inline: var(--space-xs-ymlm0b, 8px);
+}
+
+.footer-button-wrapper {
+  padding-block-start: var(--space-s-tvghoh, 12px);
+}
+.footer-button-wrapper:last-child {
+  margin-inline-start: auto;
+}
+
+.icon-wrapper {
+  color: var(--color-text-interactive-default-ugh9wp, #424650);
+  margin-inline-end: var(--space-xs-ymlm0b, 8px);
+}
+
+.label {
+  cursor: default;
+}
+
+.label.label-enabled:hover > .trigger-flexbox > .icon-wrapper {
+  color: var(--color-text-interactive-hover-6naf7i, #0f141a);
+}
+
+.label-text {
+  color: var(--color-text-input-placeholder-dclg8u, #656871);
+  font-style: italic;
+}
+
+.label-token-nowrap {
+  white-space: nowrap;
+}
+
+.dropdown {
+  overflow: auto;
+  border-block-start: 1px solid var(--color-border-container-top-k3vmoz, transparent);
+  border-block-end: 1px solid var(--color-border-container-top-k3vmoz, transparent);
+  border-start-start-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+  border-start-end-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+  border-end-start-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+  border-end-end-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+}
+.dropdown:focus {
+  outline: none;
+}
+:host-context([data-awsui-focus-visible=true]) .dropdown:focus {
+  outline: 2px dotted transparent;
+  outline-offset: 2px;
+  border-start-start-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+  border-start-end-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+  border-end-start-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+  border-end-end-radius: var(--border-radius-dropdown-fgc2a1, 8px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+}
+
+.dropdown-content {
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+  inline-size: calc(2 * var(--size-calendar-grid-width-hv3136, 238px) + var(--space-xs-ymlm0b, 8px) + 2 * var(--space-l-2ud1p3, 20px));
+}
+.dropdown-content.one-grid {
+  inline-size: calc(var(--size-calendar-grid-width-hv3136, 238px) + 2 * var(--space-l-2ud1p3, 20px));
+}
+`;
+
+// src/internal/styles/date-range-picker-relative-range.ts
+import { css as css132 } from "lit";
+var dateRangePickerRelativeRangeStyles = css132`
+.date-range-picker-relative-range--custom-range {
+  padding-inline-start: calc(14px + var(--space-xs-ymlm0b, 8px));
+  display: flex;
+  inline-size: 80%;
+}
+
+.date-range-picker-relative-range--custom-range--no-padding {
+  padding-inline-start: 0;
+}
+
+.date-range-picker-relative-range--custom-range-form-controls {
+  display: flex;
+  inline-size: 100%;
+}
+.date-range-picker-relative-range--custom-range-form-controls > .date-range-picker-relative-range--custom-range-duration,
+.date-range-picker-relative-range--custom-range-form-controls > .date-range-picker-relative-range--custom-range-unit {
+  inline-size: 50%;
+}
+.date-range-picker-relative-range--custom-range-form-controls > .date-range-picker-relative-range--custom-range-duration {
+  margin-inline-end: var(--space-xs-ymlm0b, 8px);
+}
+.date-range-picker-relative-range--custom-range-form-controls.date-range-picker-relative-range--vertical {
+  flex-direction: column;
+}
+.date-range-picker-relative-range--custom-range-form-controls.date-range-picker-relative-range--vertical > .date-range-picker-relative-range--custom-range-duration,
+.date-range-picker-relative-range--custom-range-form-controls.date-range-picker-relative-range--vertical > .date-range-picker-relative-range--custom-range-unit {
+  inline-size: 100%;
+}
+.date-range-picker-relative-range--custom-range-form-controls.date-range-picker-relative-range--vertical > .date-range-picker-relative-range--custom-range-unit {
+  margin-block-start: var(--space-s-tvghoh, 12px);
+}
+`;
+
+// src/date-range-picker/internal.ts
+var Base11 = FormAssociatedMixin(CsBaseElement);
+var hostStyles60 = css133`:host { display: block; }`;
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getStartDayOfMonth(year, month, startOfWeek) {
+  const day = new Date(year, month, 1).getDay();
+  return (day - startOfWeek + 7) % 7;
+}
+function getMonthName(year, month, locale) {
+  const date = new Date(year, month, 1);
+  try {
+    return date.toLocaleDateString(locale || void 0, { month: "long", year: "numeric" });
+  } catch {
+    return date.toLocaleDateString(void 0, { month: "long", year: "numeric" });
+  }
+}
+function toDateString(year, month, day) {
+  const m = String(month + 1).padStart(2, "0");
+  const d = String(day).padStart(2, "0");
+  return `${year}-${m}-${d}`;
+}
+function parseDateString(str) {
+  const parts = str.split("T")[0].split("-");
+  if (parts.length < 3) return null;
+  const year = parseInt(parts[0], 10);
+  const month = parseInt(parts[1], 10) - 1;
+  const day = parseInt(parts[2], 10);
+  if (isNaN(year) || isNaN(month) || isNaN(day)) return null;
+  return { year, month, day };
+}
+function formatDisplayValue(value, relativeOptions, formatRelativeRange) {
+  if (!value) return "";
+  if (value.type === "absolute") {
+    const start = value.startDate.split("T")[0];
+    const end = value.endDate.split("T")[0];
+    return `${start} \u2014 ${end}`;
+  }
+  if (formatRelativeRange) {
+    return formatRelativeRange(value);
+  }
+  const match = relativeOptions.find(
+    (o) => o.key === value.key
+  );
+  if (match) {
+    return `Last ${match.amount} ${match.unit}${match.amount !== 1 ? "s" : ""}`;
+  }
+  return `Last ${value.amount} ${value.unit}${value.amount !== 1 ? "s" : ""}`;
+}
+var DAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var CsDateRangePickerInternal = class extends Base11 {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.rangeValue = null;
+    this.relativeOptions = [];
+    this.startOfWeek = 0;
+    this.placeholder = "";
+    this.invalid = false;
+    this.rangeSelectorMode = "default";
+    this.ariaLabel = null;
+    this._open = false;
+    this._mode = "absolute";
+    this._errorMessage = "";
+    this._leftYear = (/* @__PURE__ */ new Date()).getFullYear();
+    this._leftMonth = (/* @__PURE__ */ new Date()).getMonth();
+    this._rangeStart = null;
+    this._rangeEnd = null;
+    this._hoverDate = null;
+    this._selectedRelativeKey = null;
+    this._cleanupOutsideClick = null;
+    // ── Event handlers ──────────────────────────────────────────────────
+    this._onTriggerClick = () => {
+      if (this.disabled) return;
+      this._open = !this._open;
+      if (this._open) {
+        this._errorMessage = "";
+        this._syncFromValue();
+        if (!this.rangeValue) {
+          const now = /* @__PURE__ */ new Date();
+          this._leftYear = now.getFullYear();
+          this._leftMonth = now.getMonth();
+          this._rangeStart = null;
+          this._rangeEnd = null;
+          this._selectedRelativeKey = null;
+        }
+      }
+    };
+    this._onKeyDown = (e) => {
+      if (e.key === "Escape" && this._open) {
+        e.stopPropagation();
+        this._open = false;
+        this._triggerEl?.focus();
+      }
+    };
+    this._onPrevMonth = () => {
+      if (this._leftMonth === 0) {
+        this._leftMonth = 11;
+        this._leftYear--;
+      } else {
+        this._leftMonth--;
+      }
+    };
+    this._onNextMonth = () => {
+      if (this._leftMonth === 11) {
+        this._leftMonth = 0;
+        this._leftYear++;
+      } else {
+        this._leftMonth++;
+      }
+    };
+    this._onApply = () => {
+      let newValue = null;
+      if (this._effectiveMode === "absolute") {
+        if (!this._rangeStart || !this._rangeEnd) {
+          this._errorMessage = "Please select both start and end dates.";
+          return;
+        }
+        newValue = {
+          type: "absolute",
+          startDate: this._rangeStart,
+          endDate: this._rangeEnd
+        };
+      } else {
+        const option = this.relativeOptions.find((o) => o.key === this._selectedRelativeKey);
+        if (!option) {
+          this._errorMessage = "Please select a relative range.";
+          return;
+        }
+        newValue = {
+          type: "relative",
+          key: option.key,
+          amount: option.amount,
+          unit: option.unit
+        };
+      }
+      if (this.isValidRange) {
+        const result = this.isValidRange(newValue);
+        if (!result.valid) {
+          this._errorMessage = result.errorMessage;
+          return;
+        }
+      }
+      this.rangeValue = newValue;
+      this.value = JSON.stringify(newValue);
+      fireNonCancelableEvent(
+        this,
+        "change",
+        { value: newValue }
+      );
+      this._open = false;
+      this._triggerEl?.focus();
+    };
+    this._onCancel = () => {
+      this._open = false;
+      this._errorMessage = "";
+      this._triggerEl?.focus();
+    };
+  }
+  static {
+    this.styles = [
+      sharedStyles,
+      componentStyles59,
+      dateRangePickerRelativeRangeStyles,
+      hostStyles60
+    ];
+  }
+  // ── Computed ────────────────────────────────────────────────────────
+  get _rightYear() {
+    return this._leftMonth === 11 ? this._leftYear + 1 : this._leftYear;
+  }
+  get _rightMonth() {
+    return (this._leftMonth + 1) % 12;
+  }
+  get _showModeSwitch() {
+    return this.rangeSelectorMode === "default";
+  }
+  get _isAbsoluteOnly() {
+    return this.rangeSelectorMode === "absolute-only";
+  }
+  get _isRelativeOnly() {
+    return this.rangeSelectorMode === "relative-only";
+  }
+  get _effectiveMode() {
+    if (this._isAbsoluteOnly) return "absolute";
+    if (this._isRelativeOnly) return "relative";
+    return this._mode;
+  }
+  // ── Lifecycle ───────────────────────────────────────────────────────
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._onKeyDown);
+    this._removeOutsideClickListener();
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("_open")) {
+      if (this._open) {
+        this._updatePosition();
+        this._addOutsideClickListener();
+      } else {
+        this._removeOutsideClickListener();
+      }
+    }
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("rangeValue") && this.rangeValue) {
+      this._syncFromValue();
+    }
+  }
+  focus(options) {
+    this._triggerEl?.focus(options);
+  }
+  // ── Sync value to internal state ────────────────────────────────────
+  _syncFromValue() {
+    const v = this.rangeValue;
+    if (!v) return;
+    if (v.type === "absolute") {
+      this._mode = "absolute";
+      this._rangeStart = v.startDate.split("T")[0];
+      this._rangeEnd = v.endDate.split("T")[0];
+      const parsed = parseDateString(v.startDate);
+      if (parsed) {
+        this._leftYear = parsed.year;
+        this._leftMonth = parsed.month;
+      }
+    } else {
+      this._mode = "relative";
+      this._selectedRelativeKey = v.key ?? null;
+    }
+  }
+  _onModeSwitch(mode) {
+    this._mode = mode;
+    this._errorMessage = "";
+  }
+  _onDayClick(dateStr) {
+    if (!this._rangeStart || this._rangeEnd) {
+      this._rangeStart = dateStr;
+      this._rangeEnd = null;
+      this._hoverDate = null;
+    } else {
+      if (dateStr < this._rangeStart) {
+        this._rangeEnd = this._rangeStart;
+        this._rangeStart = dateStr;
+      } else {
+        this._rangeEnd = dateStr;
+      }
+      this._hoverDate = null;
+    }
+  }
+  _onDayHover(dateStr) {
+    if (this._rangeStart && !this._rangeEnd) {
+      this._hoverDate = dateStr;
+    }
+  }
+  _onRelativeSelect(key) {
+    this._selectedRelativeKey = key;
+    this._errorMessage = "";
+  }
+  // ── Positioning ─────────────────────────────────────────────────────
+  async _updatePosition() {
+    await this.updateComplete;
+    if (!this._triggerEl || !this._dropdownEl) return;
+    const { x, y } = await computePosition2(
+      this._triggerEl,
+      this._dropdownEl,
+      {
+        placement: "bottom-start",
+        strategy: "fixed",
+        middleware: [
+          offset2(4),
+          flip2({ padding: 8 }),
+          shift2({ padding: 8 })
+        ]
+      }
+    );
+    Object.assign(this._dropdownEl.style, {
+      left: `${x}px`,
+      top: `${y}px`
+    });
+  }
+  _addOutsideClickListener() {
+    this._removeOutsideClickListener();
+    const handler = (e) => {
+      const path = e.composedPath();
+      if (!path.includes(this)) {
+        this._open = false;
+      }
+    };
+    requestAnimationFrame(() => {
+      document.addEventListener("click", handler, true);
+      this._cleanupOutsideClick = () => {
+        document.removeEventListener("click", handler, true);
+      };
+    });
+  }
+  _removeOutsideClickListener() {
+    this._cleanupOutsideClick?.();
+    this._cleanupOutsideClick = null;
+  }
+  // ── Calendar grid rendering ─────────────────────────────────────────
+  _isInRange(dateStr) {
+    const start = this._rangeStart;
+    const end = this._rangeEnd || this._hoverDate;
+    if (!start || !end) return false;
+    const lo = start < end ? start : end;
+    const hi = start < end ? end : start;
+    return dateStr >= lo && dateStr <= hi;
+  }
+  _isRangeEdge(dateStr) {
+    return dateStr === this._rangeStart || dateStr === this._rangeEnd;
+  }
+  _isDayEnabled(year, month, day) {
+    if (!this.isDateEnabled) return true;
+    return this.isDateEnabled(new Date(year, month, day));
+  }
+  _renderCalendarGrid(year, month) {
+    const startDay = getStartDayOfMonth(year, month, this.startOfWeek);
+    const daysInMonth = getDaysInMonth(year, month);
+    const monthLabel = getMonthName(year, month, this.locale);
+    const reorderedDays = [
+      ...DAY_LABELS.slice(this.startOfWeek),
+      ...DAY_LABELS.slice(0, this.startOfWeek)
+    ];
+    const weeks = [];
+    let currentDay = 1;
+    let weekCells = [];
+    for (let i = 0; i < startDay; i++) {
+      weekCells.push(html61`<td class="calendar-day calendar-day-empty"></td>`);
+    }
+    while (currentDay <= daysInMonth) {
+      const dateStr = toDateString(year, month, currentDay);
+      const inRange = this._isInRange(dateStr);
+      const isEdge = this._isRangeEdge(dateStr);
+      const enabled = this._isDayEnabled(year, month, currentDay);
+      const isToday = this._isToday(year, month, currentDay);
+      const day = currentDay;
+      const dayClasses = {
+        "calendar-day": true,
+        "calendar-day-in-range": inRange,
+        "calendar-day-range-edge": isEdge,
+        "calendar-day-disabled": !enabled,
+        "calendar-day-today": isToday
+      };
+      weekCells.push(html61`
+        <td
+          class=${classMap49(dayClasses)}
+          role="gridcell"
+          aria-selected=${isEdge ? "true" : "false"}
+          aria-disabled=${!enabled ? "true" : "false"}
+          @click=${enabled ? () => this._onDayClick(dateStr) : void 0}
+          @mouseenter=${() => this._onDayHover(dateStr)}
+        >
+          <span class="calendar-day-number">${day}</span>
+        </td>
+      `);
+      if (weekCells.length === 7) {
+        weeks.push(html61`<tr class="calendar-week">${weekCells}</tr>`);
+        weekCells = [];
+      }
+      currentDay++;
+    }
+    if (weekCells.length > 0) {
+      while (weekCells.length < 7) {
+        weekCells.push(html61`<td class="calendar-day calendar-day-empty"></td>`);
+      }
+      weeks.push(html61`<tr class="calendar-week">${weekCells}</tr>`);
+    }
+    return html61`
+      <div class="calendar-grid-wrapper">
+        <div class="calendar-grid-header" aria-live="polite">
+          ${monthLabel}
+        </div>
+        <table class="calendar-grid" role="grid" aria-label=${monthLabel}>
+          <thead>
+            <tr>
+              ${reorderedDays.map((d) => html61`<th class="calendar-day-header" scope="col">${d}</th>`)}
+            </tr>
+          </thead>
+          <tbody>
+            ${weeks}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+  _isToday(year, month, day) {
+    const now = /* @__PURE__ */ new Date();
+    return now.getFullYear() === year && now.getMonth() === month && now.getDate() === day;
+  }
+  // ── Render ──────────────────────────────────────────────────────────
+  _renderModeSwitch() {
+    if (!this._showModeSwitch) return nothing33;
+    const absLabel = this.i18nStrings?.absoluteModeTitle ?? "Absolute";
+    const relLabel = this.i18nStrings?.relativeModeTitle ?? "Relative";
+    return html61`
+      <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" })}
+          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" })}
+          role="tab"
+          aria-selected=${this._effectiveMode === "relative" ? "true" : "false"}
+          @click=${() => this._onModeSwitch("relative")}
+        >${relLabel}</button>
+      </div>
+    `;
+  }
+  _renderAbsoluteMode() {
+    return html61`
+      <div class="absolute-mode" role="tabpanel">
+        <div class="calendar-container">
+          <div class="calendar-header">
+            <cs-button variant="icon" icon-name="angle-left"
+              aria-label=${this.i18nStrings?.previousMonthAriaLabel ?? "Previous month"}
+              @click=${this._onPrevMonth}></cs-button>
+            <div class="calendar-header-pages-wrapper">
+              <div class="calendar-header-page">
+                ${getMonthName(this._leftYear, this._leftMonth, this.locale)}
+              </div>
+              <div class="calendar-header-page">
+                ${getMonthName(this._rightYear, this._rightMonth, this.locale)}
+              </div>
+            </div>
+            <cs-button variant="icon" icon-name="angle-right"
+              aria-label=${this.i18nStrings?.nextMonthAriaLabel ?? "Next month"}
+              @click=${this._onNextMonth}></cs-button>
+          </div>
+          <div class="calendar-grids">
+            ${this._renderCalendarGrid(this._leftYear, this._leftMonth)}
+            ${this._renderCalendarGrid(this._rightYear, this._rightMonth)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  _renderRelativeMode() {
+    const heading = this.i18nStrings?.relativeRangeSelectionHeading ?? "Choose a range";
+    return html61`
+      <div class="relative-mode" role="tabpanel">
+        <div class="relative-heading">${heading}</div>
+        <div class="relative-options" role="radiogroup" aria-label=${heading}>
+          ${this.relativeOptions.map((option) => {
+      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({
+        "relative-option": true,
+        "relative-option-selected": isSelected
+      })}>
+                <input
+                  type="radio"
+                  name="relative-range"
+                  class="relative-radio"
+                  .checked=${isSelected}
+                  @change=${() => this._onRelativeSelect(option.key)}
+                />
+                <span class="relative-option-label">${label}</span>
+              </label>
+            `;
+    })}
+        </div>
+      </div>
+    `;
+  }
+  _renderFooter() {
+    const cancelLabel = this.i18nStrings?.cancelButtonLabel ?? "Cancel";
+    const applyLabel = this.i18nStrings?.applyButtonLabel ?? "Apply";
+    return html61`
+      <div class="footer">
+        ${this._errorMessage ? html61`
+          <div class="error-message" role="alert">
+            <cs-icon name="status-negative" size="small"></cs-icon>
+            <span>${this._errorMessage}</span>
+          </div>
+        ` : nothing33}
+        <div class="footer-button-wrapper">
+          <cs-button variant="link" @click=${this._onCancel}>${cancelLabel}</cs-button>
+        </div>
+        <div class="footer-button-wrapper">
+          <cs-button variant="primary" @click=${this._onApply}>${applyLabel}</cs-button>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    const displayText = formatDisplayValue(
+      this.rangeValue,
+      this.relativeOptions,
+      this.i18nStrings?.formatRelativeRange
+    );
+    const showPlaceholder = !displayText;
+    const triggerClasses = {
+      "trigger-button": true,
+      "trigger-disabled": this.disabled,
+      "trigger-invalid": this.invalid
+    };
+    const dropdownClasses = {
+      "dropdown": true,
+      "dropdown-content": true
+    };
+    return html61`
+      <div class="root">
+        <div class="label ${this.disabled ? "" : "label-enabled"}">
+          <button
+            class=${classMap49(triggerClasses)}
+            type="button"
+            aria-haspopup="dialog"
+            aria-expanded=${this._open ? "true" : "false"}
+            aria-label=${ifDefined32(this.ariaLabel || void 0)}
+            aria-disabled=${ifDefined32(this.disabled ? "true" : void 0)}
+            ?disabled=${false}
+            tabindex=${this.disabled ? -1 : 0}
+            @click=${this._onTriggerClick}
+          >
+            <span class="trigger-flexbox">
+              <span class="icon-wrapper">
+                <cs-icon name="calendar"></cs-icon>
+              </span>
+              <span class="label-text ${showPlaceholder ? "" : "label-token-nowrap"}">
+                ${showPlaceholder ? this.placeholder || "\xA0" : displayText}
+              </span>
+            </span>
+          </button>
+        </div>
+        ${this._open ? html61`
+          <div class=${classMap49(dropdownClasses)} role="dialog"
+            aria-label=${ifDefined32(this.ariaLabel || "Date range picker")}
+            aria-modal="true">
+            ${this._renderModeSwitch()}
+            <div class="dropdown-body">
+              ${this._effectiveMode === "absolute" ? this._renderAbsoluteMode() : this._renderRelativeMode()}
+            </div>
+            ${this._renderFooter()}
+          </div>
+        ` : nothing33}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property60({ attribute: false })
+], CsDateRangePickerInternal.prototype, "value", 2);
+__decorateClass([
+  property60({ attribute: false })
+], CsDateRangePickerInternal.prototype, "rangeValue", 2);
+__decorateClass([
+  property60({ attribute: false })
+], CsDateRangePickerInternal.prototype, "relativeOptions", 2);
+__decorateClass([
+  property60({ attribute: false })
+], CsDateRangePickerInternal.prototype, "isDateEnabled", 2);
+__decorateClass([
+  property60({ type: String })
+], CsDateRangePickerInternal.prototype, "locale", 2);
+__decorateClass([
+  property60({ type: Number })
+], CsDateRangePickerInternal.prototype, "startOfWeek", 2);
+__decorateClass([
+  property60({ type: String })
+], CsDateRangePickerInternal.prototype, "placeholder", 2);
+__decorateClass([
+  property60({ type: Boolean })
+], CsDateRangePickerInternal.prototype, "invalid", 2);
+__decorateClass([
+  property60({ type: String })
+], CsDateRangePickerInternal.prototype, "rangeSelectorMode", 2);
+__decorateClass([
+  property60({ type: String })
+], CsDateRangePickerInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property60({ attribute: false })
+], CsDateRangePickerInternal.prototype, "isValidRange", 2);
+__decorateClass([
+  property60({ attribute: false })
+], CsDateRangePickerInternal.prototype, "i18nStrings", 2);
+__decorateClass([
+  state20()
+], CsDateRangePickerInternal.prototype, "_open", 2);
+__decorateClass([
+  state20()
+], CsDateRangePickerInternal.prototype, "_mode", 2);
+__decorateClass([
+  state20()
+], CsDateRangePickerInternal.prototype, "_errorMessage", 2);
+__decorateClass([
+  state20()
+], CsDateRangePickerInternal.prototype, "_leftYear", 2);
+__decorateClass([
+  state20()
+], CsDateRangePickerInternal.prototype, "_leftMonth", 2);
+__decorateClass([
+  state20()
+], CsDateRangePickerInternal.prototype, "_rangeStart", 2);
+__decorateClass([
+  state20()
+], CsDateRangePickerInternal.prototype, "_rangeEnd", 2);
+__decorateClass([
+  state20()
+], CsDateRangePickerInternal.prototype, "_hoverDate", 2);
+__decorateClass([
+  state20()
+], CsDateRangePickerInternal.prototype, "_selectedRelativeKey", 2);
+__decorateClass([
+  query8(".trigger-button")
+], CsDateRangePickerInternal.prototype, "_triggerEl", 2);
+__decorateClass([
+  query8(".dropdown")
+], CsDateRangePickerInternal.prototype, "_dropdownEl", 2);
+
+// src/date-range-picker/index.ts
+var CsDateRangePicker = class extends CsDateRangePickerInternal {
+};
+customElements.define("cs-date-range-picker", CsDateRangePicker);
+
+// src/attribute-editor/internal.ts
+import { css as css136, html as html63, nothing as nothing35 } from "lit";
+import { property as property62 } from "lit/decorators.js";
+
+// src/attribute-editor/styles.ts
+import { css as css134 } from "lit";
+var componentStyles60 = css134`
+.empty-appear {
+  animation: awsui_awsui-motion-fade-in_n4qlp_3vim8_1 var(--motion-duration-transition-show-paced-t8d1os, 180ms) var(--motion-easing-transition-show-paced-x2k7uh, ease-out);
+}
+@keyframes awsui_awsui-motion-fade-in_n4qlp_3vim8_1 {
+  from {
+    opacity: 0.2;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .empty-appear {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .empty-appear, .awsui-mode-entering .empty-appear {
+  animation: none;
+  transition: none;
+}
+
+.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  display: grid;
+  grid-template-rows: min-content;
+  gap: var(--space-grid-gutter-whc3jp, 20px);
+  align-items: start;
+}
+
+.empty {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-empty-tlohug, #656871);
+  grid-column: 1/-1;
+}
+
+.row {
+  display: contents;
+}
+
+.divider {
+  grid-column: 1/-1;
+  border-block-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+
+.field {
+  min-inline-size: 40px;
+}
+
+.additional-info {
+  color: var(--color-text-form-secondary-1nm780, #656871);
+  font-size: var(--font-size-body-s-smc8cv, 12px);
+  line-height: var(--line-height-body-s-nu5hx1, 16px);
+  letter-spacing: var(--letter-spacing-body-s-gq78ok, 0.005em);
+  display: block;
+  word-wrap: break-word;
+  margin-block-start: var(--space-xxs-hwfkai, 4px);
+
+}
+.additional-info > a {
+  text-underline-offset: 0.3em;
+  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) {
+  .additional-info > a {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .additional-info > a, .awsui-mode-entering .additional-info > a {
+  animation: none;
+  transition: none;
+}
+.additional-info > a:hover {
+  cursor: pointer;
+  color: var(--awsui-style-color-hover-6b9ypa, var(--color-text-link-hover-2hfec2, #002b66));
+}
+.additional-info > a:focus {
+  outline: none;
+}
+.additional-info > a:active {
+  color: var(--awsui-style-color-active-6b9ypa, var(--color-text-link-hover-2hfec2, #002b66));
+}
+.additional-info > a:active, .additional-info > a:focus, .additional-info > a:hover {
+  text-decoration-line: underline;
+  text-decoration-color: currentColor;
+}
+
+.add-row {
+  grid-column: 1/-1;
+}
+
+.remove-button-container {
+  display: inline-block;
+}
+
+.remove-button-field-padding {
+  padding-block-start: calc(var(--space-xxs-hwfkai, 4px) + var(--line-height-body-m-2mh3ke, 20px));
+}
+
+.remove-button-own-row {
+  justify-self: end;
+}
+`;
+
+// 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 { ifDefined as ifDefined33 } from "lit/directives/if-defined.js";
+import { consume as consume4 } from "@lit/context";
+var Base12 = FormAssociatedMixin(CsBaseElement);
+var hostStyles61 = css135`:host { display: block; }`;
+var CsInputInternal = class extends Base12 {
+  constructor() {
+    super(...arguments);
+    this._formFieldCtx = defaultFormFieldContext;
+    this.value = "";
+    this.type = "text";
+    this.placeholder = "";
+    this.readOnly = false;
+    this.invalid = false;
+    this.warning = false;
+    this.autoFocus = false;
+    this.inputMode = "";
+    this.ariaLabel = null;
+    this.ariaDescribedby = null;
+    this.clearAriaLabel = "";
+    this._onInput = (e) => {
+      const target = e.target;
+      this.value = target.value;
+      const detail = { value: this.value };
+      fireNonCancelableEvent(this, "change", detail);
+    };
+    this._onBlur = () => {
+      fireNonCancelableEvent(this, "blur", null);
+    };
+    this._onFocus = () => {
+      fireNonCancelableEvent(this, "focus", null);
+    };
+    this._onKeyDown = (e) => {
+      const detail = {
+        keyCode: e.keyCode,
+        key: e.key,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey,
+        metaKey: e.metaKey,
+        isComposing: e.isComposing
+      };
+      fireNonCancelableEvent(this, "keydown", detail);
+    };
+    this._onKeyUp = (e) => {
+      const detail = {
+        keyCode: e.keyCode,
+        key: e.key,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey,
+        metaKey: e.metaKey,
+        isComposing: e.isComposing
+      };
+      fireNonCancelableEvent(this, "keyup", detail);
+    };
+    this._onClear = () => {
+      this.value = "";
+      const detail = { value: "" };
+      fireNonCancelableEvent(this, "change", detail);
+      this.focus();
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles44, hostStyles61];
+  }
+  focus(options) {
+    this._getInput()?.focus(options);
+  }
+  select() {
+    this._getInput()?.select();
+  }
+  _getInput() {
+    return this.shadowRoot?.querySelector("input");
+  }
+  get _isInvalid() {
+    return this.invalid || this._formFieldCtx.invalid;
+  }
+  get _isWarning() {
+    return (this.warning || this._formFieldCtx.warning) && !this._isInvalid;
+  }
+  get _resolvedAriaDescribedby() {
+    const parts = [];
+    if (this.ariaDescribedby) parts.push(this.ariaDescribedby);
+    if (this._formFieldCtx.ariaDescribedby) parts.push(this._formFieldCtx.ariaDescribedby);
+    return parts.length ? parts.join(" ") : void 0;
+  }
+  get _showClearButton() {
+    return !!this.clearAriaLabel && this.value.length > 0 && !this.disabled && !this.readOnly;
+  }
+  render() {
+    const inputClasses = {
+      "input": true,
+      "input-readonly": this.readOnly,
+      "input-invalid": this._isInvalid,
+      "input-warning": this._isWarning,
+      "input-disabled": this.disabled,
+      "input-has-clear-button": this._showClearButton,
+      [`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">
+          <input
+            class=${classMap50(inputClasses)}
+            type=${this.type}
+            .value=${this.value}
+            placeholder=${ifDefined33(this.placeholder || void 0)}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readOnly}
+            ?autofocus=${this.autoFocus}
+            inputmode=${ifDefined33(this.inputMode || void 0)}
+            step=${ifDefined33(this.step)}
+            id=${ifDefined33(controlId)}
+            aria-label=${ifDefined33(this.ariaLabel || void 0)}
+            aria-labelledby=${ifDefined33(!this.ariaLabel ? ariaLabelledby : void 0)}
+            aria-describedby=${ifDefined33(this._resolvedAriaDescribedby)}
+            aria-invalid=${ifDefined33(this._isInvalid ? "true" : void 0)}
+            @input=${this._onInput}
+            @blur=${this._onBlur}
+            @focus=${this._onFocus}
+            @keydown=${this._onKeyDown}
+            @keyup=${this._onKeyUp}
+          />
+          ${this._showClearButton ? html62`
+            <span class="input-icon-right">
+              <button
+                type="button"
+                aria-label=${this.clearAriaLabel}
+                @click=${this._onClear}
+              >
+                <cs-icon name="close" size="small"></cs-icon>
+              </button>
+            </span>
+          ` : nothing34}
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  consume4({ context: formFieldContext, subscribe: true })
+], CsInputInternal.prototype, "_formFieldCtx", 2);
+__decorateClass([
+  property61({ type: String })
+], CsInputInternal.prototype, "value", 2);
+__decorateClass([
+  property61({ type: String, reflect: true })
+], CsInputInternal.prototype, "type", 2);
+__decorateClass([
+  property61({ type: String })
+], CsInputInternal.prototype, "placeholder", 2);
+__decorateClass([
+  property61({ type: Boolean, reflect: true })
+], CsInputInternal.prototype, "readOnly", 2);
+__decorateClass([
+  property61({ type: Boolean, reflect: true })
+], CsInputInternal.prototype, "invalid", 2);
+__decorateClass([
+  property61({ type: Boolean, reflect: true })
+], CsInputInternal.prototype, "warning", 2);
+__decorateClass([
+  property61({ type: Boolean })
+], CsInputInternal.prototype, "autoFocus", 2);
+__decorateClass([
+  property61({ type: String })
+], CsInputInternal.prototype, "inputMode", 2);
+__decorateClass([
+  property61({ type: Number })
+], CsInputInternal.prototype, "step", 2);
+__decorateClass([
+  property61({ type: String })
+], CsInputInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property61({ type: String })
+], CsInputInternal.prototype, "ariaDescribedby", 2);
+__decorateClass([
+  property61({ type: String })
+], CsInputInternal.prototype, "clearAriaLabel", 2);
+
+// src/input/index.ts
+var CsInput = class extends CsInputInternal {
+};
+customElements.define("cs-input", CsInput);
+
+// src/attribute-editor/internal.ts
+var hostStyles62 = css136`:host { display: block; }`;
+function resolveText(value, item, itemIndex) {
+  if (typeof value === "function") {
+    const result = value(item, itemIndex);
+    return result != null ? String(result) : "";
+  }
+  return value != null ? String(value) : "";
+}
+var CsAttributeEditorInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.definition = [];
+    this.addButtonText = "Add attribute";
+    this.removeButtonText = "Remove";
+    this.empty = "";
+    this.disableAddButton = false;
+    this._handleAddClick = (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      fireNonCancelableEvent(this, "addButtonClick", {});
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles60, hostStyles62];
+  }
+  _handleRemoveClick(itemIndex) {
+    return (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      const detail = { itemIndex };
+      fireNonCancelableEvent(this, "removeButtonClick", detail);
+    };
+  }
+  _renderRow(item, itemIndex) {
+    const removable = this.isItemRemovable ? this.isItemRemovable(item) : true;
+    return html63`
+      <div class="row" data-row-index="${itemIndex}">
+        ${this.definition.map((def) => {
+      const label = resolveText(def.label, item, itemIndex);
+      const errorText = resolveText(def.errorText, item, itemIndex);
+      const constraintText = resolveText(def.constraintText, item, itemIndex);
+      return html63`
+            <div class="field">
+              <cs-form-field
+                .label=${label}
+                .errorText=${errorText}
+                .constraintText=${constraintText}
+              >
+                <cs-input .ariaLabel=${label}></cs-input>
+              </cs-form-field>
+            </div>
+          `;
+    })}
+        ${removable ? html63`
+              <div class="remove-button-container remove-button-field-padding">
+                <cs-button
+                  variant="normal"
+                  .ariaLabel=${this.removeButtonText}
+                  @click=${this._handleRemoveClick(itemIndex)}
+                >${this.removeButtonText}</cs-button>
+              </div>
+            ` : nothing35}
+      </div>
+    `;
+  }
+  render() {
+    const hasItems = this.items.length > 0;
+    const cols = this.definition.length;
+    const gridCols = cols > 0 ? `repeat(${cols}, 1fr) auto` : "1fr";
+    return html63`
+      <div class="root" style="grid-template-columns: ${gridCols}">
+        ${!hasItems && this.empty ? html63`<div class="empty empty-appear">${this.empty}</div>` : nothing35}
+        ${this.items.map((item, idx) => html63`
+          ${idx > 0 ? html63`<div class="divider"></div>` : nothing35}
+          ${this._renderRow(item, idx)}
+        `)}
+        <div class="add-row">
+          <cs-button
+            variant="normal"
+            icon-name="add-plus"
+            ?disabled=${this.disableAddButton}
+            @click=${this._handleAddClick}
+          >${this.addButtonText}</cs-button>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property62({ attribute: false })
+], CsAttributeEditorInternal.prototype, "items", 2);
+__decorateClass([
+  property62({ attribute: false })
+], CsAttributeEditorInternal.prototype, "definition", 2);
+__decorateClass([
+  property62({ type: String })
+], CsAttributeEditorInternal.prototype, "addButtonText", 2);
+__decorateClass([
+  property62({ type: String })
+], CsAttributeEditorInternal.prototype, "removeButtonText", 2);
+__decorateClass([
+  property62({ type: String })
+], CsAttributeEditorInternal.prototype, "empty", 2);
+__decorateClass([
+  property62({ attribute: false })
+], CsAttributeEditorInternal.prototype, "isItemRemovable", 2);
+__decorateClass([
+  property62({ type: Boolean })
+], CsAttributeEditorInternal.prototype, "disableAddButton", 2);
+
+// src/attribute-editor/index.ts
+var CsAttributeEditor = class extends CsAttributeEditorInternal {
+};
+customElements.define("cs-attribute-editor", CsAttributeEditor);
+
+// src/tag-editor/internal.ts
+import { css as css138, html as html64, nothing as nothing36 } from "lit";
+import { property as property63 } from "lit/decorators.js";
+import { classMap as classMap51 } from "lit/directives/class-map.js";
+
+// src/tag-editor/styles.ts
+import { css as css137 } from "lit";
+var componentStyles61 = css137`
+.root {
+  /* used in test utils */
+}
+
+.loading {
+  /* used in test utils */
+}
+
+.undo-button {
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  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: var(--font-link-button-weight-vslyg9, 700);
+  letter-spacing: var(--font-link-button-letter-spacing-imtxwq, 0.005em);
+  text-decoration-line: underline;
+  text-decoration-color: var(--color-text-link-button-underline-z4wjnv, 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) {
+  .undo-button {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .undo-button, .awsui-mode-entering .undo-button {
+  animation: none;
+  transition: none;
+}
+.undo-button:hover {
+  cursor: pointer;
+  color: var(--awsui-style-color-hover-6b9ypa, var(--color-text-link-hover-2hfec2, #002b66));
+}
+.undo-button:focus {
+  outline: none;
+}
+.undo-button:active {
+  color: var(--awsui-style-color-active-6b9ypa, var(--color-text-link-hover-2hfec2, #002b66));
+}
+.undo-button:active, .undo-button:focus, .undo-button:hover {
+  text-decoration-line: underline;
+  text-decoration-color: var(--color-text-link-button-underline-hover-cn3mqh, transparent);
+}
+:host-context([data-awsui-focus-visible=true]) .undo-button: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/tag-editor/internal.ts
+var hostStyles63 = css138`
+  :host { display: block; }
+  .tag-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr auto;
+    gap: var(--space-grid-gutter-whc3jp, 20px);
+    align-items: start;
+    padding-block: var(--space-xs-ctmojp, 8px);
+  }
+  .tag-row-removed {
+    opacity: 0.5;
+  }
+  .tag-list {
+    display: flex;
+    flex-direction: column;
+  }
+  .add-section {
+    margin-block-start: var(--space-s-k3fkj0, 12px);
+  }
+  .action-cell {
+    padding-block-start: calc(var(--space-xxs-hwfkai, 4px) + var(--line-height-body-m-2mh3ke, 20px));
+  }
+`;
+var CsTagEditorInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.tags = [];
+    this.allowedCharacterPattern = "";
+    this.keyPlaceholder = "";
+    this.valuePlaceholder = "";
+    this.addButtonText = "Add tag";
+    this.removeButtonText = "Remove";
+    this.undoButtonText = "Undo";
+    this.loading = false;
+    this._handleAdd = (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      this._onAdd();
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles61, hostStyles63];
+  }
+  _emitChange(updatedTags) {
+    const detail = { tags: updatedTags, valid: true };
+    fireNonCancelableEvent(this, "change", detail);
+  }
+  _onAdd() {
+    const updatedTags = [
+      ...this.tags,
+      { key: "", value: "", existing: false }
+    ];
+    this._emitChange(updatedTags);
+  }
+  _onRemove(index) {
+    const tag = this.tags[index];
+    if (tag.existing) {
+      const updatedTags = this.tags.map(
+        (t, i) => i === index ? { ...t, markedForRemoval: true } : t
+      );
+      this._emitChange(updatedTags);
+    } else {
+      const updatedTags = this.tags.filter((_, i) => i !== index);
+      this._emitChange(updatedTags);
+    }
+  }
+  _onUndo(index) {
+    const updatedTags = this.tags.map(
+      (t, i) => i === index ? { ...t, markedForRemoval: false } : t
+    );
+    this._emitChange(updatedTags);
+  }
+  _onKeyChange(index, newKey) {
+    const updatedTags = this.tags.map(
+      (t, i) => i === index ? { ...t, key: newKey } : t
+    );
+    this._emitChange(updatedTags);
+  }
+  _onValueChange(index, newValue) {
+    const updatedTags = this.tags.map(
+      (t, i) => i === index ? { ...t, value: newValue } : t
+    );
+    this._emitChange(updatedTags);
+  }
+  _handleAction(index, action) {
+    return (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      if (action === "undo") this._onUndo(index);
+      else this._onRemove(index);
+    };
+  }
+  _renderTagRow(tag, index) {
+    const isMarked = !!tag.markedForRemoval;
+    const rowClasses = { "tag-row": true, "tag-row-removed": isMarked };
+    const keyLabel = this.i18nStrings?.keyHeader ?? "Key";
+    const valueLabel = this.i18nStrings?.valueHeader ?? "Value";
+    return html64`
+      <div class=${classMap51(rowClasses)} data-row-index="${index}">
+        <cs-form-field .label=${keyLabel}>
+          <cs-input
+            .value=${tag.key}
+            .placeholder=${this.keyPlaceholder}
+            .ariaLabel=${keyLabel}
+            ?disabled=${isMarked}
+            @change=${(e) => this._onKeyChange(index, e.detail.value)}
+          ></cs-input>
+        </cs-form-field>
+        <cs-form-field .label=${valueLabel}>
+          <cs-input
+            .value=${tag.value}
+            .placeholder=${this.valuePlaceholder}
+            .ariaLabel=${valueLabel}
+            ?disabled=${isMarked}
+            @change=${(e) => this._onValueChange(index, e.detail.value)}
+          ></cs-input>
+        </cs-form-field>
+        <div class="action-cell">
+          ${isMarked ? html64`
+                <cs-button
+                  variant="normal"
+                  @click=${this._handleAction(index, "undo")}
+                >${this.undoButtonText}</cs-button>
+              ` : html64`
+                <cs-button
+                  variant="normal"
+                  @click=${this._handleAction(index, "remove")}
+                >${this.removeButtonText}</cs-button>
+              `}
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    const limitReached = this.tagLimit != null && this.tags.length >= this.tagLimit;
+    return html64`
+      <div class="root">
+        ${this.loading ? html64`<div class="loading">Loading...</div>` : nothing36}
+        <div class="tag-list">
+          ${this.tags.length === 0 && !this.loading ? html64`<div>${this.i18nStrings?.emptyTags ?? "No tags"}</div>` : nothing36}
+          ${this.tags.map((tag, idx) => this._renderTagRow(tag, idx))}
+        </div>
+        <div class="add-section">
+          <cs-button
+            variant="normal"
+            icon-name="add-plus"
+            ?disabled=${limitReached}
+            @click=${this._handleAdd}
+          >${this.addButtonText}</cs-button>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property63({ attribute: false })
+], CsTagEditorInternal.prototype, "tags", 2);
+__decorateClass([
+  property63({ attribute: false })
+], CsTagEditorInternal.prototype, "keysRequest", 2);
+__decorateClass([
+  property63({ attribute: false })
+], CsTagEditorInternal.prototype, "valuesRequest", 2);
+__decorateClass([
+  property63({ type: String })
+], CsTagEditorInternal.prototype, "allowedCharacterPattern", 2);
+__decorateClass([
+  property63({ type: String })
+], CsTagEditorInternal.prototype, "keyPlaceholder", 2);
+__decorateClass([
+  property63({ type: String })
+], CsTagEditorInternal.prototype, "valuePlaceholder", 2);
+__decorateClass([
+  property63({ type: String })
+], CsTagEditorInternal.prototype, "addButtonText", 2);
+__decorateClass([
+  property63({ type: String })
+], CsTagEditorInternal.prototype, "removeButtonText", 2);
+__decorateClass([
+  property63({ type: String })
+], CsTagEditorInternal.prototype, "undoButtonText", 2);
+__decorateClass([
+  property63({ type: Boolean })
+], CsTagEditorInternal.prototype, "loading", 2);
+__decorateClass([
+  property63({ type: Number })
+], CsTagEditorInternal.prototype, "tagLimit", 2);
+__decorateClass([
+  property63({ attribute: false })
+], CsTagEditorInternal.prototype, "i18nStrings", 2);
+
+// src/tag-editor/index.ts
+var CsTagEditor = class extends CsTagEditorInternal {
+};
+customElements.define("cs-tag-editor", CsTagEditor);
 export {
   CsAlert,
   CsAnchorNavigation,
+  CsAttributeEditor,
   CsAutosuggest,
   CsBadge,
   CsBox,
@@ -19846,6 +23219,7 @@ export {
   CsButton,
   CsButtonDropdown,
   CsButtonGroup,
+  CsCalendar,
   CsCards,
   CsCheckbox,
   CsCollectionPreferences,
@@ -19853,11 +23227,16 @@ export {
   CsContainer,
   CsContentLayout,
   CsCopyToClipboard,
+  CsDateInput,
+  CsDatePicker,
+  CsDateRangePicker,
   CsErrorBoundary,
   CsExpandableSection,
   CsFileDropzone,
   CsFileInput,
+  CsFileUpload,
   CsFlashbar,
+  CsForm,
   CsFormField,
   CsGrid,
   CsHeader,
@@ -19867,6 +23246,7 @@ export {
   CsLink,
   CsList,
   CsLiveRegion,
+  CsModal,
   CsMultiselect,
   CsPagination,
   CsPopover,
@@ -19883,6 +23263,7 @@ export {
   CsSteps,
   CsTable,
   CsTabs,
+  CsTagEditor,
   CsTextContent,
   CsTiles,
   CsToggle,