@cumulus-ui/components 0.1.0

package/dist/index.js

@@ -0,0 +1,4541 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/checkbox/internal.ts
+import { css as css4, html, svg } from "lit";
+import { property as property2 } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { LitElement } from "lit";
+
+// src/internal/mixins/form-associated.ts
+import { property } from "lit/decorators.js";
+function FormAssociatedMixin(superClass) {
+  class FormAssociatedElement extends superClass {
+    // ── Constructor ───────────────────────────────────────────────────
+    constructor(...args) {
+      super(...args);
+      this._defaultValue = "";
+      this.name = "";
+      this.value = "";
+      this.disabled = false;
+      this.required = false;
+      this._internals = this.attachInternals();
+    }
+    static {
+      this.formAssociated = true;
+    }
+    // ── Form value sync via Lit lifecycle ─────────────────────────────
+    willUpdate(changed) {
+      super.willUpdate(changed);
+      if (changed.has("value")) {
+        this.setFormValue(this.value);
+      }
+      if (changed.has("disabled")) {
+        this._internals.ariaDisabled = this.disabled ? "true" : "false";
+      }
+      if (changed.has("required")) {
+        this._internals.ariaRequired = this.required ? "true" : "false";
+      }
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this._defaultValue = this.value;
+    }
+    // ── Public API (thin wrappers around ElementInternals) ────────────
+    setFormValue(value, state4) {
+      this._internals.setFormValue(value, state4);
+    }
+    setValidity(flags, message, anchor) {
+      if (flags && message) {
+        this._internals.setValidity(flags, message, anchor);
+      } else {
+        this._internals.setValidity({});
+      }
+    }
+    reportValidity() {
+      return this._internals.reportValidity();
+    }
+    checkValidity() {
+      return this._internals.checkValidity();
+    }
+    get validity() {
+      return this._internals.validity;
+    }
+    get validationMessage() {
+      return this._internals.validationMessage;
+    }
+    // ── Form lifecycle callbacks ──────────────────────────────────────
+    formAssociatedCallback(_form) {
+    }
+    formResetCallback() {
+      this.value = this._defaultValue;
+    }
+    formDisabledCallback(disabled) {
+      this.disabled = disabled;
+    }
+    /**
+     * @param state  - Previously saved value or `FormData` entry.
+     * @param _mode  - `'restore'` (bfcache) or `'autocomplete'`.
+     */
+    formStateRestoreCallback(state4, _mode) {
+      if (typeof state4 === "string") {
+        this.value = state4;
+      }
+    }
+  }
+  __decorateClass([
+    property({ reflect: true })
+  ], FormAssociatedElement.prototype, "name", 2);
+  __decorateClass([
+    property()
+  ], FormAssociatedElement.prototype, "value", 2);
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], FormAssociatedElement.prototype, "disabled", 2);
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], FormAssociatedElement.prototype, "required", 2);
+  return FormAssociatedElement;
+}
+
+// src/internal/events.ts
+function fireNonCancelableEvent(element, eventName, detail) {
+  element.dispatchEvent(
+    new CustomEvent(eventName, {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: false
+    })
+  );
+}
+
+// src/internal/hooks/use-unique-id.ts
+var counter = 0;
+function generateUniqueId(prefix = "uid") {
+  return `cs-${prefix}-${++counter}`;
+}
+
+// src/checkbox/styles.ts
+import { css as css2 } from "lit";
+
+// src/internal/styles/shared.ts
+import { css } from "lit";
+var sharedStyles = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+`;
+
+// src/checkbox/styles.ts
+var componentStyles = css2`
+.root.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  display: flex;
+}
+
+.checkbox-control {
+  margin-block-start: calc((var(--line-height-body-m-2mh3ke, 20px) - var(--size-control-adm93y, 16px)) / 2);
+  min-block-size: var(--size-control-adm93y, 16px);
+  min-inline-size: var(--size-control-adm93y, 16px);
+  block-size: var(--size-control-adm93y, 16px);
+  inline-size: var(--size-control-adm93y, 16px);
+}
+
+.outline {
+  --awsui-style-focus-ring-box-shadow-6b9ypa: 0 0 0 var(--awsui-style-focus-ring-border-width-6b9ypa, 2px) var(--awsui-style-focus-ring-border-color-6b9ypa, var(--color-border-item-focused-uk47pl, #006ce0));
+  position: relative;
+}
+.outline {
+  outline: 2px dotted transparent;
+  outline-offset: calc(2px - 1px);
+}
+.outline::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * 2px);
+  inset-block-start: calc(-1 * 2px);
+  inline-size: calc(100% + 2px + 2px);
+  block-size: calc(100% + 2px + 2px);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-6b9ypa, var(--border-radius-control-default-focus-ring-1uabki, 4px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-6b9ypa, var(--border-radius-control-default-focus-ring-1uabki, 4px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-6b9ypa, var(--border-radius-control-default-focus-ring-1uabki, 4px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-6b9ypa, var(--border-radius-control-default-focus-ring-1uabki, 4px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-6b9ypa);
+}
+`;
+
+// src/internal/styles/abstract-switch.ts
+import { css as css3 } from "lit";
+var abstractSwitchStyles = css3`
+.content,
+.description,
+.label {
+  display: block;
+}
+
+.label {
+  color: var(--color-text-form-default-47mtz6, #0f141a);
+}
+
+.outline {
+  display: none;
+}
+.outline.show-outline {
+  display: block;
+}
+
+:host-context([data-awsui-focus-visible=true]) .native-input:focus + .outline {
+  display: block;
+}
+
+.wrapper {
+  min-inline-size: 0;
+  word-break: break-word;
+  display: flex;
+}
+
+.label-wrapper {
+  position: relative;
+  display: flex;
+  cursor: default;
+}
+
+.content {
+  min-inline-size: 0;
+  word-break: break-word;
+}
+
+.empty-content {
+  inline-size: 0px;
+}
+
+.description {
+  color: var(--color-text-form-secondary-1nm780, #656871);
+  font-size: var(--font-size-body-s-smc8cv, 12px);
+  line-height: var(--line-height-body-s-nu5hx1, 16px);
+  letter-spacing: var(--letter-spacing-body-s-gq78ok, 0.005em);
+}
+.description-bottom-padding {
+  padding-block-end: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+
+.label,
+.description {
+  padding-inline-start: var(--space-xs-ymlm0b, 8px);
+}
+.label-disabled,
+.description-disabled {
+  color: var(--color-text-control-disabled-upk9lz, #b4b4bb);
+}
+
+.control {
+  position: relative;
+
+
+}
+.control > input, .control > svg, .control > .outline {
+  position: absolute;
+  inline-size: 100%;
+  block-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+.control > input {
+  opacity: 0;
+  z-index: 1;
+  -webkit-user-select: none;
+          user-select: none;
+  cursor: default;
+  margin-block: 0;
+  margin-inline: 0;
+}
+`;
+
+// src/checkbox/internal.ts
+var Base = FormAssociatedMixin(LitElement);
+var hostStyles = css4`
+  :host { display: block; }
+  .label-wrapper { flex-direction: column; }
+  .checkbox-icon {
+    position: absolute;
+    inline-size: 100%;
+    block-size: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+  .checkbox-icon > .styled-box {
+    fill: var(--color-background-control-default-4jb21l, #ffffff);
+    stroke: var(--color-border-control-default-sh3548, #8c8c94);
+    stroke-width: var(--border-width-field-2xc78x, 1px);
+  }
+  .checkbox-icon > .styled-box-checked,
+  .checkbox-icon > .styled-box-indeterminate {
+    fill: var(--color-background-control-checked-ka7kc2, #006ce0);
+    stroke: var(--color-border-control-checked-bdv28l, #006ce0);
+  }
+  .checkbox-icon > .styled-box-disabled,
+  .checkbox-icon > .styled-box-readonly {
+    fill: var(--color-background-control-disabled-1f3718, #dedee3);
+    stroke: var(--color-border-control-disabled-uj7t08, #dedee3);
+  }
+  .checkbox-icon > .styled-line {
+    stroke: var(--color-foreground-control-default-eto4wy, #ffffff);
+    stroke-width: 2;
+    fill: none;
+  }
+  .checkbox-icon > .styled-line-disabled {
+    stroke: var(--color-foreground-control-disabled-txi6cf, #ffffff);
+  }
+  .checkbox-icon > .styled-line-readonly {
+    stroke: var(--color-foreground-control-read-only-7ydvuj, #656871);
+  }
+`;
+var CsCheckboxInternal = class extends Base {
+  constructor() {
+    super(...arguments);
+    this.checked = false;
+    this.indeterminate = false;
+    this.readOnly = false;
+    this.description = "";
+    this.ariaLabel = "";
+    this._labelId = generateUniqueId("checkbox-label");
+    this._descriptionId = generateUniqueId("checkbox-desc");
+    this._onHostClick = () => {
+      this._toggle();
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles, abstractSwitchStyles, hostStyles];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.value) {
+      this.value = "on";
+    }
+    this.addEventListener("click", this._onHostClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._onHostClick);
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("checked") || changed.has("value")) {
+      this.setFormValue(this.checked ? this.value || "on" : null);
+    }
+  }
+  _preventNativeToggle(e) {
+    e.preventDefault();
+  }
+  _toggle() {
+    if (this.disabled || this.readOnly) return;
+    this.checked = !this.checked;
+    this.indeterminate = false;
+    const detail = {
+      checked: this.checked,
+      indeterminate: false
+    };
+    fireNonCancelableEvent(this, "change", detail);
+  }
+  render() {
+    const styledBoxClasses = {
+      "styled-box": true,
+      "styled-box-checked": this.checked && !this.indeterminate,
+      "styled-box-indeterminate": this.indeterminate,
+      "styled-box-disabled": this.disabled,
+      "styled-box-readonly": this.readOnly
+    };
+    const styledLineClasses = {
+      "styled-line": true,
+      "styled-line-disabled": this.disabled,
+      "styled-line-readonly": this.readOnly
+    };
+    const hasDescription = this.description.length > 0;
+    const ariaDescribedBy = hasDescription ? this._descriptionId : void 0;
+    return html`
+      <label class="root wrapper" @click=${this._preventNativeToggle}>
+        <span class=${classMap({
+      "control": true,
+      "checkbox-control": true,
+      "checkbox-control--checked": this.checked && !this.indeterminate,
+      "checkbox-control--indeterminate": this.indeterminate
+    })}>
+          <input
+            type="checkbox"
+            class="native-input"
+            .checked=${this.checked}
+            .indeterminate=${this.indeterminate}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readOnly}
+            aria-label=${ifDefined(this.ariaLabel || void 0)}
+            aria-describedby=${ifDefined(ariaDescribedBy)}
+            aria-checked=${this.indeterminate ? "mixed" : this.checked}
+            @click=${this._preventNativeToggle}
+          />
+          <svg class="checkbox-icon" viewBox="0 0 16 16" aria-hidden="true"><rect class=${classMap(styledBoxClasses)} x="0.5" y="0.5" width="15" height="15" rx="3" ry="3" />${this.checked && !this.indeterminate ? svg`<polyline class=${classMap(styledLineClasses)} points="3.5,8 7,11 12,4" />` : this.indeterminate ? svg`<polyline class=${classMap(styledLineClasses)} points="3.5,8 12.5,8" />` : ""}</svg>
+          <span class="outline"></span>
+        </span>
+        <span class="label-wrapper">
+          <span id=${this._labelId} class=${classMap({
+      "label": true,
+      "label-disabled": this.disabled
+    })}>
+            <slot></slot>
+          </span>
+          ${hasDescription ? html`
+            <span id=${this._descriptionId} class=${classMap({
+      "description": true,
+      "description-bottom-padding": true,
+      "description-disabled": this.disabled
+    })}>
+              ${this.description}
+            </span>
+          ` : ""}
+        </span>
+      </label>
+    `;
+  }
+};
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], CsCheckboxInternal.prototype, "checked", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], CsCheckboxInternal.prototype, "indeterminate", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], CsCheckboxInternal.prototype, "readOnly", 2);
+__decorateClass([
+  property2({ type: String })
+], CsCheckboxInternal.prototype, "description", 2);
+__decorateClass([
+  property2({ type: String })
+], CsCheckboxInternal.prototype, "ariaLabel", 2);
+
+// src/checkbox/index.ts
+var CsCheckbox = class extends CsCheckboxInternal {
+};
+customElements.define("cs-checkbox", CsCheckbox);
+
+// src/spinner/internal.ts
+import { css as css6, html as html2, LitElement as LitElement2 } from "lit";
+import { property as property3 } from "lit/decorators.js";
+import { classMap as classMap2 } from "lit/directives/class-map.js";
+
+// src/spinner/styles.ts
+import { css as css5 } from "lit";
+var componentStyles2 = css5`
+@keyframes awsui_spinner-rotator_1612d_1krck_1 {
+  0% {
+    transform: rotate(var(--awsui-spinner-rotator-from-6b9ypa));
+  }
+  100% {
+    transform: rotate(var(--awsui-spinner-rotator-to-6b9ypa));
+  }
+}
+@keyframes awsui_spinner-line-left_1612d_1krck_1 {
+  0% {
+    transform: rotate(var(--awsui-spinner-line-left-from-6b9ypa));
+  }
+  50% {
+    transform: rotate(var(--awsui-spinner-line-left-to-6b9ypa));
+  }
+  100% {
+    transform: rotate(var(--awsui-spinner-line-left-from-6b9ypa));
+  }
+}
+@keyframes awsui_spinner-line-right_1612d_1krck_1 {
+  0% {
+    transform: rotate(var(--awsui-spinner-line-right-from-6b9ypa));
+  }
+  50% {
+    transform: rotate(var(--awsui-spinner-line-right-to-6b9ypa));
+  }
+  100% {
+    transform: rotate(var(--awsui-spinner-line-right-from-6b9ypa));
+  }
+}
+.root {
+  --awsui-spinner-rotator-from-6b9ypa: 0deg;
+  --awsui-spinner-rotator-to-6b9ypa: 360deg;
+  --awsui-spinner-line-left-from-6b9ypa: 0deg;
+  --awsui-spinner-line-left-to-6b9ypa: 120deg;
+  --awsui-spinner-line-right-from-6b9ypa: 90deg;
+  --awsui-spinner-line-right-to-6b9ypa: -30deg;
+  display: inline-block;
+  vertical-align: top;
+
+  animation: awsui_spinner-rotator_1612d_1krck_1 0.7s linear infinite;
+  box-sizing: border-box;
+  line-height: 0;
+
+}
+.root.size-normal {
+  inline-size: var(--size-icon-normal-levt08, 16px);
+  block-size: var(--size-icon-normal-levt08, 16px);
+  padding-block: calc((var(--size-icon-normal-levt08, 16px) - 12px) / 2);
+  padding-inline: calc((var(--size-icon-normal-levt08, 16px) - 12px) / 2);
+  margin-block: calc((var(--line-height-body-m-2mh3ke, 20px) - var(--size-icon-normal-levt08, 16px)) / 2);
+  box-sizing: border-box;
+}
+.root.size-big {
+  inline-size: var(--size-icon-big-7pq9l3, 32px);
+  block-size: var(--size-icon-big-7pq9l3, 32px);
+  padding-block: calc((var(--size-icon-big-7pq9l3, 32px) - 24px) / 2);
+  padding-inline: calc((var(--size-icon-big-7pq9l3, 32px) - 24px) / 2);
+  margin-block: calc((var(--line-height-heading-xl-hko6p0, 30px) - var(--size-icon-big-7pq9l3, 32px)) / 2);
+  box-sizing: border-box;
+}
+.root.size-large {
+  inline-size: var(--size-icon-large-mb6y6y, 48px);
+  block-size: var(--size-icon-large-mb6y6y, 48px);
+  padding-block: calc((var(--size-icon-large-mb6y6y, 48px) - 36px) / 2);
+  padding-inline: calc((var(--size-icon-large-mb6y6y, 48px) - 36px) / 2);
+  margin-block: calc((var(--line-height-display-l-vwanzp, 48px) - var(--size-icon-large-mb6y6y, 48px)) / 2);
+  box-sizing: border-box;
+}
+.root.variant-normal {
+  color: currentColor;
+}
+.root.variant-disabled {
+  color: var(--color-text-interactive-disabled-1bqmrl, #b4b4bb);
+}
+.root.variant-inverted {
+  color: var(--color-text-inverted-4v4dmq, #ffffff);
+}
+.root:dir(rtl) {
+  --awsui-spinner-rotator-from-6b9ypa: 360deg;
+  --awsui-spinner-rotator-to-6b9ypa: 0deg;
+  --awsui-spinner-line-left-from-6b9ypa: 0deg;
+  --awsui-spinner-line-left-to-6b9ypa: -120deg;
+  --awsui-spinner-line-right-from-6b9ypa: -90deg;
+  --awsui-spinner-line-right-to-6b9ypa: 30deg;
+}
+
+.circle {
+  display: inline-block;
+  inline-size: 50%;
+  block-size: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.circle:after {
+  position: absolute;
+  box-sizing: border-box;
+  content: "";
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+  border-block: 2px solid;
+  border-inline: 2px solid;
+  border-inline-end-color: transparent;
+  border-block-end-color: transparent;
+}
+.circle:after {
+
+  animation: 1.5s ease-in-out infinite;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  block-size: 100%;
+  inline-size: 200%;
+}
+.circle.circle-left:after {
+  inset-inline-start: 0;
+
+  animation-name: awsui_spinner-line-left_1612d_1krck_1;
+}
+.circle.circle-right:after {
+  inset-inline-start: -100%;
+
+  animation-name: awsui_spinner-line-right_1612d_1krck_1;
+}
+`;
+
+// src/spinner/internal.ts
+var hostStyles2 = css6`
+  :host {
+    display: inline-block;
+    vertical-align: top;
+    line-height: 0;
+  }
+`;
+var CsSpinnerInternal = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.size = "normal";
+    this.variant = "normal";
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles2, hostStyles2];
+  }
+  render() {
+    const classes = {
+      "root": true,
+      [`size-${this.size}`]: true,
+      [`variant-${this.variant}`]: true
+    };
+    return html2`
+      <span class=${classMap2(classes)} role="img" aria-label="Loading"><span class="circle circle-left"></span><span class="circle circle-right"></span></span>
+    `;
+  }
+};
+__decorateClass([
+  property3({ type: String, reflect: true })
+], CsSpinnerInternal.prototype, "size", 2);
+__decorateClass([
+  property3({ type: String, reflect: true })
+], CsSpinnerInternal.prototype, "variant", 2);
+
+// src/spinner/index.ts
+var CsSpinner = class extends CsSpinnerInternal {
+};
+customElements.define("cs-spinner", CsSpinner);
+
+// src/badge/internal.ts
+import { css as css8, html as html3, LitElement as LitElement3 } from "lit";
+import { property as property4 } from "lit/decorators.js";
+import { classMap as classMap3 } from "lit/directives/class-map.js";
+
+// src/badge/styles.ts
+import { css as css7 } from "lit";
+var componentStyles3 = css7`
+.badge {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  font-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);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  display: inline-block;
+  border-start-start-radius: var(--border-radius-badge-exolfb, 4px);
+  border-start-end-radius: var(--border-radius-badge-exolfb, 4px);
+  border-end-start-radius: var(--border-radius-badge-exolfb, 4px);
+  border-end-end-radius: var(--border-radius-badge-exolfb, 4px);
+  border-block-style: solid;
+  border-inline-style: solid;
+  border-width: 0;
+  padding-block: 0;
+  padding-inline: var(--space-xs-ymlm0b, 8px);
+  color: var(--color-text-notification-default-1iey72, #f9f9fa);
+}
+.badge.badge-color-grey {
+  background-color: var(--color-background-notification-grey-x3vul6, #424650);
+}
+.badge.badge-color-green {
+  background-color: var(--color-background-notification-green-2rkyvu, #00802f);
+}
+.badge.badge-color-blue {
+  background-color: var(--color-background-notification-blue-4vnob8, #006ce0);
+}
+.badge.badge-color-red {
+  background-color: var(--color-background-notification-red-0487ea, #db0000);
+}
+.badge.badge-color-severity-critical {
+  background-color: var(--color-background-notification-severity-critical-0xl8pp, #870303);
+  color: var(--color-text-notification-severity-critical-tv4vw4, #f9f9fa);
+}
+.badge.badge-color-severity-high {
+  background-color: var(--color-background-notification-severity-high-8nbgdi, #ce3311);
+  color: var(--color-text-notification-severity-high-t4suvu, #f9f9fa);
+}
+.badge.badge-color-severity-medium {
+  background-color: var(--color-background-notification-severity-medium-lbljs2, #f89256);
+  color: var(--color-text-notification-severity-medium-8f60kb, #0f141a);
+}
+.badge.badge-color-severity-low {
+  background-color: var(--color-background-notification-severity-low-giz8b6, #f2cd54);
+  color: var(--color-text-notification-severity-low-gvojhi, #0f141a);
+}
+.badge.badge-color-severity-neutral {
+  background-color: var(--color-background-notification-severity-neutral-hnhgmv, #656871);
+  color: var(--color-text-notification-severity-neutral-ynm2wl, #f9f9fa);
+}
+`;
+
+// src/badge/internal.ts
+var hostStyles3 = css8`
+  :host {
+    display: inline-block;
+    line-height: 0;
+  }
+`;
+var CsBadgeInternal = class extends LitElement3 {
+  constructor() {
+    super(...arguments);
+    this.color = "grey";
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles3, hostStyles3];
+  }
+  render() {
+    const classes = {
+      "badge": true,
+      [`badge-color-${this.color}`]: true
+    };
+    return html3`
+      <span class=${classMap3(classes)}>
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+__decorateClass([
+  property4({ type: String, reflect: true })
+], CsBadgeInternal.prototype, "color", 2);
+
+// src/badge/index.ts
+var CsBadge = class extends CsBadgeInternal {
+};
+customElements.define("cs-badge", CsBadge);
+
+// src/live-region/internal.ts
+import { css as css10, html as html4, LitElement as LitElement4 } from "lit";
+import { property as property5 } from "lit/decorators.js";
+import { classMap as classMap4 } from "lit/directives/class-map.js";
+
+// src/live-region/styles.ts
+import { css as css9 } from "lit";
+var componentStyles4 = css9`
+.root {
+  display: contents;
+}
+
+.root[hidden] {
+  display: none;
+}
+
+.announcer {
+  position: absolute !important;
+  inset-block-start: -9999px !important;
+  inset-inline-start: -9999px !important;
+}
+`;
+
+// src/live-region/internal.ts
+var hostStyles4 = css10`:host { display: contents; }`;
+var CsLiveRegionInternal = class extends LitElement4 {
+  constructor() {
+    super(...arguments);
+    this.assertive = false;
+    this.tagName_ = "div";
+    this.hidden = false;
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles4, hostStyles4];
+  }
+  render() {
+    const liveValue = this.assertive ? "assertive" : "polite";
+    const classes = {
+      "root": !this.hidden,
+      "announcer": !!this.hidden
+    };
+    if (this.tagName_ === "span") {
+      return html4`
+        <span class=${classMap4(classes)} aria-live=${liveValue} aria-atomic="true">
+          <slot></slot>
+        </span>
+      `;
+    }
+    return html4`
+      <div class=${classMap4(classes)} aria-live=${liveValue} aria-atomic="true">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], CsLiveRegionInternal.prototype, "assertive", 2);
+__decorateClass([
+  property5({ type: String, reflect: true, attribute: "tag-name" })
+], CsLiveRegionInternal.prototype, "tagName_", 2);
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], CsLiveRegionInternal.prototype, "hidden", 2);
+
+// src/live-region/index.ts
+var CsLiveRegion = class extends CsLiveRegionInternal {
+};
+customElements.define("cs-live-region", CsLiveRegion);
+
+// src/icon/internal.ts
+import { css as css12, html as html6, svg as svgTag, LitElement as LitElement6 } from "lit";
+import { property as property7 } from "lit/decorators.js";
+import { classMap as classMap5 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined2 } from "lit/directives/if-defined.js";
+import { consume } from "@lit/context";
+
+// src/icon/styles.ts
+import { css as css11 } from "lit";
+var componentStyles5 = css11`
+.icon {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+
+
+
+}
+.icon-flex-height {
+  display: inline-flex;
+  align-items: center;
+}
+.icon > svg {
+  pointer-events: none;
+}
+.icon > svg {
+  fill: none;
+}
+.icon > svg * {
+  stroke: currentColor;
+}
+.icon > svg .stroke-linejoin-round {
+  stroke-linejoin: round;
+}
+.icon > svg .stroke-linecap-square {
+  stroke-linecap: square;
+}
+.icon > svg .stroke-linecap-round {
+  stroke-linecap: round;
+}
+.icon > svg .filled {
+  fill: currentColor;
+}
+.icon > svg .no-stroke {
+  stroke: none;
+}
+.icon.size-small {
+  inline-size: var(--size-icon-normal-levt08, 16px);
+  box-sizing: border-box;
+}
+.icon.size-small-mapped-height {
+  block-size: var(--line-height-body-s-nu5hx1, 16px);
+  padding-block: calc((var(--line-height-body-s-nu5hx1, 16px) - var(--size-icon-normal-levt08, 16px)) / 2);
+  padding-inline: 0;
+}
+.icon.size-small > svg,
+.icon.size-small > img {
+  inline-size: var(--size-icon-normal-levt08, 16px);
+  block-size: var(--size-icon-normal-levt08, 16px);
+  vertical-align: top;
+}
+.icon.size-small > svg,
+.icon.size-small > svg * {
+  stroke-width: calc(var(--border-width-icon-small-z55i5t, 2px) / 1);
+}
+.icon.size-normal {
+  inline-size: var(--size-icon-normal-levt08, 16px);
+  box-sizing: border-box;
+}
+.icon.size-normal-mapped-height {
+  block-size: var(--line-height-body-m-2mh3ke, 20px);
+  padding-block: calc((var(--line-height-body-m-2mh3ke, 20px) - var(--size-icon-normal-levt08, 16px)) / 2);
+  padding-inline: 0;
+}
+.icon.size-normal > svg,
+.icon.size-normal > img {
+  inline-size: var(--size-icon-normal-levt08, 16px);
+  block-size: var(--size-icon-normal-levt08, 16px);
+  vertical-align: top;
+}
+.icon.size-normal > svg,
+.icon.size-normal > svg * {
+  stroke-width: calc(var(--border-width-icon-normal-9h7vj7, 2px) / 1);
+}
+.icon.size-medium {
+  inline-size: var(--size-icon-medium-uv8xcz, 20px);
+  box-sizing: border-box;
+}
+.icon.size-medium-mapped-height {
+  block-size: var(--line-height-heading-l-mg5bx6, 24px);
+  padding-block: calc((var(--line-height-heading-l-mg5bx6, 24px) - var(--size-icon-medium-uv8xcz, 20px)) / 2);
+  padding-inline: 0;
+}
+.icon.size-medium > svg,
+.icon.size-medium > img {
+  inline-size: var(--size-icon-medium-uv8xcz, 20px);
+  block-size: var(--size-icon-medium-uv8xcz, 20px);
+  vertical-align: top;
+}
+.icon.size-medium > svg,
+.icon.size-medium > svg * {
+  stroke-width: calc(var(--border-width-icon-medium-b7icqv, 2px) / 1.25);
+}
+.icon.size-big {
+  inline-size: var(--size-icon-big-7pq9l3, 32px);
+  box-sizing: border-box;
+}
+.icon.size-big-mapped-height {
+  block-size: var(--line-height-heading-xl-hko6p0, 30px);
+  padding-block: calc((var(--line-height-heading-xl-hko6p0, 30px) - var(--size-icon-big-7pq9l3, 32px)) / 2);
+  padding-inline: 0;
+}
+.icon.size-big > svg,
+.icon.size-big > img {
+  inline-size: var(--size-icon-big-7pq9l3, 32px);
+  block-size: var(--size-icon-big-7pq9l3, 32px);
+  vertical-align: top;
+}
+.icon.size-big > svg,
+.icon.size-big > svg * {
+  stroke-width: calc(var(--border-width-icon-big-ymgy42, 3px) / 2);
+}
+.icon.size-large {
+  inline-size: var(--size-icon-large-mb6y6y, 48px);
+  box-sizing: border-box;
+}
+.icon.size-large-mapped-height {
+  block-size: var(--line-height-display-l-vwanzp, 48px);
+  padding-block: calc((var(--line-height-display-l-vwanzp, 48px) - var(--size-icon-large-mb6y6y, 48px)) / 2);
+  padding-inline: 0;
+}
+.icon.size-large > svg,
+.icon.size-large > img {
+  inline-size: var(--size-icon-large-mb6y6y, 48px);
+  block-size: var(--size-icon-large-mb6y6y, 48px);
+  vertical-align: top;
+}
+.icon.size-large > svg,
+.icon.size-large > svg * {
+  stroke-width: calc(var(--border-width-icon-large-u645rg, 4px) / 3);
+}
+.icon.variant-normal {
+  color: currentColor;
+}
+.icon.variant-disabled {
+  color: var(--color-text-interactive-disabled-1bqmrl, #b4b4bb);
+}
+.icon.variant-inverted {
+  color: var(--color-text-inverted-4v4dmq, #ffffff);
+}
+.icon.variant-subtle {
+  color: var(--color-text-icon-subtle-3sgxlr, #656871);
+}
+.icon.variant-warning {
+  color: var(--color-text-status-warning-6meo06, #855900);
+}
+.icon.variant-error {
+  color: var(--color-text-status-error-ksqavh, #db0000);
+}
+.icon.variant-success {
+  color: var(--color-text-status-success-ybmii8, #00802f);
+}
+.icon.variant-link {
+  color: var(--color-text-link-default-hude44, #006ce0);
+}
+.icon:is(.name-angle-left-double,
+.name-angle-left,
+.name-angle-right-double,
+.name-angle-right,
+.name-arrow-left,
+.name-arrow-right,
+.name-caret-left-filled,
+.name-caret-right-filled,
+.name-audio-full,
+.name-audio-half,
+.name-audio-off,
+.name-external,
+.name-redo,
+.name-resize-area,
+.name-send,
+.name-shrink,
+.name-undo,
+.name-view-vertical):dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.badge::after {
+  content: "";
+  position: absolute;
+  inline-size: 6px;
+  block-size: 6px;
+  border-start-start-radius: 4px;
+  border-start-end-radius: 4px;
+  border-end-start-radius: 4px;
+  border-end-end-radius: 4px;
+  background-color: var(--color-background-badge-icon-jyxnxa, #db0000);
+  inset-block-start: 0px;
+  inset-inline-end: -3px;
+}
+`;
+
+// src/icon/icons/index.ts
+import { svg as svg2 } from "lit";
+var builtInIcons = {
+  "add-plus": svg2`<path d="M2.01 8h12M8 14l.01-12" />`,
+  "anchor-link": svg2`<path d="M5 8h6M7 12H5c-2.21 0-4-1.79-4-4s1.79-4 4-4h2M9 12h2c2.21 0 4-1.79 4-4s-1.79-4-4-4H9" class="stroke-linejoin-round" />`,
+  "angle-down": svg2`<path d="m2 5 6 6 6-6" class="stroke-linejoin-round" />`,
+  "angle-left-double": svg2`<path d="M8 2 2 8l6 6" class="stroke-linejoin-round" /><path d="M13 2 7 8l6 6" class="stroke-linejoin-round" />`,
+  "angle-left": svg2`<path d="M11 2 5 8l6 6" class="stroke-linejoin-round" />`,
+  "angle-right-double": svg2`<path d="m8 2 6 6-6 6" class="stroke-linejoin-round" /><path d="m3 2 6 6-6 6" class="stroke-linejoin-round" />`,
+  "angle-right": svg2`<path d="m5 2 6 6-6 6" class="stroke-linejoin-round" />`,
+  "angle-up": svg2`<path d="m2 11 6-6 6 6" class="stroke-linejoin-round" />`,
+  "arrow-down": svg2`<path d="m3 9 5 5 5-5M8 14V1" class="stroke-linejoin-round" />`,
+  "arrow-left": svg2`<path d="M7 3 2 8l5 5M2 8h13" class="stroke-linejoin-round" />`,
+  "arrow-right": svg2`<path d="m9 3 5 5-5 5M14 8H1" class="stroke-linejoin-round" />`,
+  "arrow-up": svg2`<path d="M13 7 8 2 3 7M8 2v13" class="stroke-linejoin-round" />`,
+  "at-symbol": svg2`<path d="M9.5 13.75c-1.992.734-6.434 1.013-7.5-3.25-1-4 1.927-6.904 3.697-7.848 1.841-.982 5.523-1.48 7.34.944 1.888 2.516.63 6.29-.628 6.92-1.259.628-1.95.25-2.202 0a.902.902 0 0 1-.145-.191c-.258-.45-.12-1.01-.022-1.52l.678-3.518" class="stroke-linecap-round" /><path d="M10.718 6.643c-.315-.42-1.254-1.357-2.26-1.357-1.258 0-2.654 1.14-2.969 3.027-.314 1.888.63 2.643 1.573 2.643s2.202-.44 2.83-1.384" />`,
+  "audio-full": svg2`<path d="M6.47 13.707 4 10.997H1v-6h3l2.47-2.71c.54-.59 1.53-.21 1.53.59v10.23c0 .8-.99 1.19-1.53.59v.01Z" class="stroke-linejoin-round" /><path d="M10 12.997c2.76 0 5-2.24 5-5s-2.24-5-5-5" /><path d="M10 9.997c1.1 0 2-.9 2-2s-.9-2-2-2" />`,
+  "audio-half": svg2`<path d="M7.47 13.41 5 10.7H2v-6h3l2.47-2.71C8.01 1.4 9 1.78 9 2.58v10.23c0 .8-.99 1.19-1.53.59v.01Z" class="stroke-linejoin-round" /><path d="M11 9.71c1.1 0 2-.9 2-2s-.9-2-2-2" />`,
+  "audio-off": svg2`<path d="M6.47 13.41 4 10.7H1v-6h3l2.47-2.71C7.01 1.4 8 1.78 8 2.58v10.23c0 .8-.99 1.19-1.53.59v.01ZM11 5.71l3.99 4M15 5.71 11 9.7" class="stroke-linejoin-round" />`,
+  "backward-10-seconds": svg2`<path d="M5.95 14.01h-.96c-.56 0-1.02-.46-1.02-1.02v-2.96c0-.56.45-1.01 1.01-1.02h.96c.56 0 1.02.45 1.02 1.02v2.96c0 .56-.46 1.02-1.02 1.02h.01Z" class="stroke-linejoin-round" /><path d="M1 9v5" class="stroke-linecap-square" /><path d="M1 0v5h5" class="stroke-linejoin-round" /><path d="M9.976 15A7.154 7.154 0 0 0 15 8.164C15 4.204 11.804 1 7.852 1A7.148 7.148 0 0 0 1.5 4.875" class="stroke-linejoin-round" />`,
+  "bug": svg2`<path d="M12 5.71a4 4 0 0 0-8 0v4a4 4 0 1 0 8 0v-4ZM15 8.71h-3M4 8.71H1M12 6H4M15 3.63l-3 2.08M15 13.78l-3-2.07M1 3.63l3 2.08M1 13.78l3-2.07" />`,
+  "calendar": svg2`<path d="M14 2H2v12h12V2Z" class="stroke-linejoin-round" /><path d="M4 6V4h2v2H4ZM7 6V4h2v2H7ZM10 6V4h2v2h-2ZM4 9V7h2v2H4ZM7 9V7h2v2H7ZM4 12v-2h2v2H4ZM7 12v-2h2v2H7ZM10 9V7h2v2h-2Z" class="filled no-stroke" />`,
+  "call": svg2`<path d="M13.99 7.083c0-2.76-2.24-5-5-5M11.07 10.002c-.6.58-1.55.61-2.14.02l-2.88-2.88a1.49 1.49 0 0 1 0-2.12c.52-.52.52-1.36 0-1.88l-.85-.85a.996.996 0 0 0-1.41 0l-.38.38a4.83 4.83 0 0 0 0 6.82l3.17 3.17a4.83 4.83 0 0 0 6.82 0l.38-.38a.996.996 0 0 0 0-1.41l-.85-.85c-.51-.51-1.34-.52-1.86-.02Z" class="stroke-linejoin-round" />`,
+  "caret-down-filled": svg2`<path d="m8 11 4-6H4l4 6Z" class="filled stroke-linejoin-round" />`,
+  "caret-down": svg2`<path d="m8 11 4-6H4l4 6Z" class="stroke-linejoin-round" />`,
+  "caret-left-filled": svg2`<path d="m5 8 6 4V4L5 8Z" class="filled stroke-linejoin-round" />`,
+  "caret-right-filled": svg2`<path d="m11 8-6 4V4l6 4Z" class="filled stroke-linejoin-round" />`,
+  "caret-up-filled": svg2`<path d="m8 5 4 6H4l4-6Z" class="filled stroke-linejoin-round" />`,
+  "caret-up": svg2`<path d="m8 5 4 6H4l4-6Z" class="stroke-linejoin-round" />`,
+  "check": svg2`<path d="m1 9 4 4L15 2" class="stroke-linejoin-round" />`,
+  "close": svg2`<path d="m2 1.71 12 12M2 13.71l12-12" class="stroke-linejoin-round" />`,
+  "closed-caption-unavailable": svg2`<path d="M15 1H1v14h14V1Z" class="stroke-linejoin-round" /><path d="M7.51 10H5c-.55 0-.99-.44-.99-.99V7c0-.55.44-.99.99-.99h1.01M13 10h-2.51c-.55 0-.99-.44-.99-.99V7c0-.55.44-.99.99-.99H13M1 1l14 14" class="stroke-linejoin-round" />`,
+  "closed-caption": svg2`<path d="M15 1H1v14h14V1Z" class="stroke-linejoin-round" /><path d="M7.51 10H5c-.55 0-.99-.44-.99-.99V7c0-.55.44-.99.99-.99h2.51M13 10h-2.51c-.55 0-.99-.44-.99-.99V7c0-.55.44-.99.99-.99H13" class="stroke-linejoin-round" />`,
+  "command-prompt": svg2`<path d="M15 1H1v14h14V1ZM12 11H9" class="stroke-linejoin-round" /><path d="M4.71 11.3 8 8 4.71 4.71" class="stroke-linejoin-round" />`,
+  "contact": svg2`<path d="M14 12c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h4v3l4-3h4Z" class="stroke-linejoin-round" />`,
+  "copy": svg2`<path d="M15 5H5v10h10V5Z" class="stroke-linejoin-round" /><path d="M13 1H1v11" class="stroke-linejoin-round" />`,
+  "delete-marker": svg2`<path d="M3 7V1h6l4 4v10h-3" class="stroke-linejoin-round" /><path d="M8 1v5h5M2 15l6-6M2 9.01l6.01 6" class="stroke-linejoin-round" />`,
+  "download": svg2`<path d="M1 15h14M13 6l-5 5-5-5M8 10V1" class="stroke-linejoin-round" />`,
+  "drag-indicator": svg2`<circle cx="5.5" cy="2.5" r="1.5" class="filled no-stroke" /><circle cx="5.5" cy="13.5" r="1.5" class="filled no-stroke" /><circle cx="5.5" cy="8" r="1.5" class="filled no-stroke" /><circle cx="10.5" cy="2.5" r="1.5" class="filled no-stroke" /><circle cx="10.5" cy="13.5" r="1.5" class="filled no-stroke" /><circle cx="10.5" cy="8" r="1.5" class="filled no-stroke" />`,
+  "edit-gen-ai": svg2`<path d="m5.19 12.275-4.19.7.7-4.19 7.2-7.2c.78-.78 2.05-.78 2.83 0l.66.66c.78.78.78 2.05 0 2.83l-1.865 1.85M10.99 5.975l-3-3" class="stroke-linejoin-round" /><path d="m13.888 12.329-2.296-.921-.924-2.303c-.056-.14-.28-.14-.336 0l-.924 2.303-2.296.921S7 12.427 7 12.496c0 .07.042.14.112.168l.07.028 2.226.893.924 2.303s.098.112.168.112.14-.042.168-.112l.924-2.303 2.296-.921s.112-.098.112-.168-.042-.14-.112-.167Z" class="filled no-stroke" />`,
+  "edit": svg2`<path d="m6.19 13.275-4.19.7.7-4.19 7.2-7.2c.78-.78 2.05-.78 2.83 0l.66.66c.78.78.78 2.05 0 2.83l-7.2 7.2ZM9 3.995l3 3" class="stroke-linejoin-round" />`,
+  "ellipsis": svg2`<circle cx="8" cy="2.5" r="1.5" class="filled no-stroke" /><circle cx="8" cy="13.5" r="1.5" class="filled no-stroke" /><circle cx="8" cy="8" r="1.5" class="filled no-stroke" />`,
+  "envelope": svg2`<path d="m1 3 7 6 7-6" class="stroke-linejoin-round" /><path d="M15 3H1v10h14V3Z" class="stroke-linejoin-round" />`,
+  "exit-full-screen": svg2`<path d="M1 10.01h5V15M10 15v-5h5M6 1v5H1M15 6h-5V1" class="stroke-linejoin-round" />`,
+  "expand": svg2`<path d="M14 7V2H9M10 6l4-4M6.99 14H2V9M6 10l-4 4M9 14h5V9M10 10l4 4M2 6.99V2h5M6 6 2 2" class="stroke-linejoin-round" />`,
+  "external": svg2`<path d="M13 9.012v-6H7M13.02 3 7 9.01M3 5.012v8h8.01" class="stroke-linejoin-round" />`,
+  "face-happy-filled": svg2`<path d="M7.995 1.103a6.887 6.887 0 0 0-6.892 6.892 6.887 6.887 0 0 0 6.892 6.892 6.887 6.887 0 0 0 6.892-6.892 6.887 6.887 0 0 0-6.892-6.892Zm-2.002 7.61A2.148 2.148 0 0 0 8 10.134c.914 0 1.706-.592 2.007-1.423l1.646.596c-.54 1.489-1.966 2.577-3.653 2.577-1.686 0-3.114-1.088-3.653-2.577l1.646-.596ZM7.148 6.03a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0Zm3.95 0a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0Z" class="filled no-stroke" /><path d="M8 .5A7.495 7.495 0 0 0 .5 8c0 4.146 3.354 7.5 7.5 7.5s7.5-3.354 7.5-7.5S12.146.5 8 .5Zm0 1.559c3.61 0 6.008 2.566 6.008 5.941 0 2.404-2.044 6.014-6.008 6.014-3.818 0-6.01-2.9-6.01-6.014 0-2.603 1.712-5.941 6.01-5.941Z" class="filled no-stroke" />`,
+  "face-happy": svg2`<circle cx="8" cy="8" r="7" /><path d="M6 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM10.01 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" class="filled no-stroke" /><path d="M10.83 9.01c-.42 1.16-1.53 2-2.83 2s-2.41-.84-2.83-2" class="stroke-linejoin-round" />`,
+  "face-neutral-filled": svg2`<path d="M7.995 1.103a6.887 6.887 0 0 0-6.892 6.892 6.887 6.887 0 0 0 6.892 6.892 6.887 6.887 0 0 0 6.892-6.892 6.887 6.887 0 0 0-6.892-6.892ZM11 10.875H5v-1.75h6v1.75ZM7.148 6.03a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0Zm3.95 0a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0Z" class="filled no-stroke" /><path d="M8 .5A7.495 7.495 0 0 0 .5 8c0 4.146 3.354 7.5 7.5 7.5s7.5-3.354 7.5-7.5S12.146.5 8 .5Zm0 1.559c3.61 0 6.008 2.566 6.008 5.941 0 2.404-2.044 6.014-6.008 6.014-3.818 0-6.01-2.9-6.01-6.014 0-2.603 1.712-5.941 6.01-5.941Z" class="filled no-stroke" />`,
+  "face-neutral": svg2`<circle cx="8" cy="8" r="7" /><path d="M6 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM10.01 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" class="filled no-stroke" /><path d="M5 10h6" class="stroke-linejoin-round" />`,
+  "face-sad-filled": svg2`<path d="M7.995 1.103a6.887 6.887 0 0 0-6.892 6.892 6.887 6.887 0 0 0 6.892 6.892 6.887 6.887 0 0 0 6.892-6.892 6.887 6.887 0 0 0-6.892-6.892Zm-3.648 9.6C4.887 9.212 6.314 8.124 8 8.124c1.687 0 3.114 1.088 3.653 2.577l-1.646.596A2.148 2.148 0 0 0 8 9.875c-.913 0-1.706.592-2.007 1.423l-1.646-.596ZM7.148 6.03a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0Zm3.95 0a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0Z" class="filled no-stroke" /><path d="M8 .5A7.495 7.495 0 0 0 .5 8c0 4.146 3.354 7.5 7.5 7.5s7.5-3.354 7.5-7.5S12.146.5 8 .5Zm0 1.559c3.61 0 6.008 2.566 6.008 5.941 0 2.404-2.044 6.014-6.008 6.014-3.818 0-6.01-2.9-6.01-6.014 0-2.603 1.712-5.941 6.01-5.941Z" class="filled no-stroke" />`,
+  "face-sad": svg2`<circle cx="8" cy="8" r="7" /><path d="M6 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM10.01 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" class="filled no-stroke" /><path d="M10.83 11C10.41 9.84 9.3 9 8 9s-2.41.84-2.83 2" class="stroke-linejoin-round" />`,
+  "file-open": svg2`<path d="M13 15H3V1h6l4 4v10Z" class="stroke-linejoin-round" /><path d="M8 1v5h5M3 8l7 7" class="stroke-linejoin-round" />`,
+  "file": svg2`<path d="M13 15H3V1h6l4 4v10Z" class="stroke-linejoin-round" /><path d="M8 1v5h5" class="stroke-linejoin-round" />`,
+  "filter": svg2`<path d="m1 3 5 5v7l4-2V8l5-5V1H1v2Z" class="stroke-linejoin-round" />`,
+  "flag": svg2`<path d="M1.99 16V1M2 2.14c4 2.71 8-2.99 12-.28v7.28c-4-2.89-8 2.61-12-.28" class="stroke-linejoin-round" />`,
+  "folder-open": svg2`<path d="M6 14h8l-3-7H1l2 7h3Z" class="stroke-linejoin-round" /><path d="M2 7V2h6l1 2h5c.55 0 1 .45 1 1v8c0 .55-.45 1-1 1h-1" class="stroke-linejoin-round" />`,
+  "folder": svg2`<path d="M15 5v9H2V2h6l1 2h5c.55 0 1 .45 1 1Z" class="stroke-linejoin-round" />`,
+  "forward-10-seconds": svg2`<path d="M13.95 14.01h-.96c-.56 0-1.02-.46-1.02-1.02v-2.96c0-.56.45-1.01 1.01-1.02h.96c.56 0 1.02.45 1.02 1.02v2.96c0 .56-.46 1.02-1.02 1.02h.01Z" class="stroke-linejoin-round" /><path d="M9 9v5" class="stroke-linecap-square" /><path d="M15 0v5h-5" class="stroke-linejoin-round" /><path d="M6.024 15A7.154 7.154 0 0 1 1 8.164C1 4.204 4.196 1 8.148 1A7.148 7.148 0 0 1 14.5 4.875" class="stroke-linejoin-round" />`,
+  "full-screen": svg2`<path d="M6 15H1v-5M15 10v5h-5M1 6V1h5M10 1h5v5" class="stroke-linejoin-round" />`,
+  "gen-ai": svg2`<path d="M6.15 10.365 8 15.005l1.86-4.64 4.64-1.86-4.64-1.85L8 2.005l-1.85 4.65-4.65 1.85 4.65 1.86Z" class="stroke-linejoin-round" /><path d="M2.38 4.915c.02.05.07.08.12.08.05 0 .12-.08.12-.08l.66-1.64 1.64-.66a.13.13 0 0 0 .08-.12c0-.05-.08-.12-.08-.12l-1.64-.66-.66-1.64c-.04-.1-.2-.1-.24 0l-.66 1.64-1.64.66a.13.13 0 0 0-.08.12c0 .05.08.12.08.12l1.64.66.66 1.64Z" class="filled no-stroke" />`,
+  "globe": svg2`<circle cx="8" cy="8" r="7" /><path d="M8 15c1.657 0 3-3.134 3-7S9.657 1 8 1 5 4.134 5 8s1.343 7 3 7ZM1 8h14" class="stroke-linejoin-round" />`,
+  "grid-view": svg2`<path d="M6 10H2v4h4v-4ZM14 10h-4v4h4v-4ZM6 2H2v4h4V2ZM14 2h-4v4h4V2Z" class="stroke-linejoin-round" />`,
+  "group-active": svg2`<circle cx="11" cy="7" r="3" class="filled no-stroke" /><circle cx="4.25" cy="4.25" r="2.75" class="filled no-stroke" /><path d="M6 14a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v2H6v-2Z" class="filled no-stroke" /><path d="M7.126 8H3a3 3 0 0 0-3 3v3h5a4 4 0 0 1 3.405-3.956A4 4 0 0 1 7.126 8Z" class="filled no-stroke" />`,
+  "group": svg2`<path d="M15 16v-2a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2" /><circle cx="11.25" cy="6.75" r="2.25" /><path d="M6.254 8.99H3a2.005 2.005 0 0 0-2.005 2.005v2h.01v-2C1.005 9.893 1.898 9 3 9h3.261a8.678 8.678 0 0 1-.007-.01Z" class="filled" /><circle cx="4.25" cy="4.25" r="2.25" />`,
+  "heart-filled": svg2`<path d="M13.49 3.546C12.124 2.31 10.312 2.689 9 4L8 5 7 4c-1.301-1.302-3.114-1.69-4.491-.454a3.409 3.409 0 0 0-.133 4.95L7.952 14s.067.028.086 0l5.576-5.505a3.409 3.409 0 0 0-.133-4.95h.01Z" class="filled stroke-linejoin-round" />`,
+  "heart": svg2`<path d="M13.752 2.873c-1.44-1.3-3.7-1.1-5.08.28l-.7.7-.7-.7c-1.37-1.37-3.63-1.58-5.08-.28a3.588 3.588 0 0 0-.14 5.21l5.87 5.87s.07.03.09 0l5.87-5.87a3.588 3.588 0 0 0-.14-5.21h.01Z" class="stroke-linejoin-round" />`,
+  "history": svg2`<path d="M1 0v5l5-.04" class="stroke-linejoin-round" /><path d="M1 8c0 3.87 3.13 7 7 7s7-3.13 7-7-3.13-7-7-7C5.21 1 2.8 2.63 1.67 5" /><path d="M9 4v5H5" class="stroke-linejoin-round" />`,
+  "insert-row": svg2`<path d="M6 11H1V2h14v4M12 7v8M8 11h8" class="stroke-linejoin-round" />`,
+  "key": svg2`<path d="M10 1a5.002 5.002 0 0 0-4.6 6.96L1 12.36v2.65h4v-2h3v-2.42c.61.27 1.29.42 2 .42 2.76 0 5-2.24 5-5s-2.24-5-5-5V1Z" class="stroke-linejoin-round" /><path d="M10.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" class="filled no-stroke" />`,
+  "keyboard": svg2`<path d="M15 2H1v12h14V2ZM4 11h8M4 8h2M4 5h2M7 8h2M7 5h2M10 8h2M10 5h2" />`,
+  "light-dark": svg2`<circle cx="8" cy="8" r="7" /><path d="M8 15A7 7 0 1 0 8 1v14Z" class="filled no-stroke" />`,
+  "list-view": svg2`<path d="M5 3h10M5 8h10M5 13h10" /><path d="M2.01 3.01H2V3h.01v.01ZM2.01 8.01H2V8h.01v.01ZM2.01 13.01H2V13h.01v.01Z" class="filled" />`,
+  "location-pin": svg2`<path d="M8 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" class="stroke-linejoin-round" /><path d="M12.01 9c.63-.83 1-1.87 1-3 0-2.76-2.24-5-5-5a5.002 5.002 0 0 0-4 8l4 6 4-6Z" class="stroke-linejoin-round" />`,
+  "lock-private": svg2`<path d="M12 7H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1ZM5 7V4c0-1.65 1.35-3 3-3s3 1.35 3 3v3" class="stroke-linejoin-round" />`,
+  "map": svg2`<path d="M2 12.8V2l3.61 1.21V14L2 12.8ZM10.4 12.8V2L14 3.05V14l-3.6-1.2ZM5.61 14l4.79-1.2M5.61 3.21 10.4 2" class="stroke-linejoin-round" />`,
+  "menu": svg2`<path d="M15 3H1M15 8H1M15 13H1" class="stroke-linejoin-round" />`,
+  "microphone-off": svg2`<path d="M3 15.01h10M8 15v-3" /><path d="M6.6 8.43c.36.36.86.59 1.41.59 1.1 0 2-.9 2-2v-2L6.6 8.43Z" class="filled" /><path d="M13 7.01c0 2.76-2.24 5-5 5-1.28 0-2.45-.48-3.33-1.28M3 12.01l10-10" /><path d="M8.01 1.01c-1.1 0-2 .9-2 2v1.67l3.23-3.23c-.34-.27-.77-.44-1.23-.44Z" class="filled" /><path d="M3.01 7.01c0 .482-.162 1.263.33 1.75" />`,
+  "microphone": svg2`<path d="M3 15h10M8 15v-3M10 3a2 2 0 1 0-4 0v4a2 2 0 1 0 4 0V3Z" class="stroke-linejoin-round" /><path d="M13 7c0 2.76-2.24 5-5 5S3 9.76 3 7" class="stroke-linejoin-round" />`,
+  "mini-player": svg2`<path d="M14 10.01H8v4h6v-4Z" class="stroke-linejoin-round" /><path d="M5 14H2V2h12v5" class="stroke-linejoin-round" />`,
+  "multiscreen": svg2`<path d="M15 5H5v7h10V5Z" class="stroke-linejoin-round" /><path d="M11 3V1.01L1.01 1 1 8h1.998M10 12v3M7 15h6" class="stroke-linejoin-round" />`,
+  "notification": svg2`<path d="M14 12H2c-.39 0-.63-.44-.41-.76L4 8V5c0-2.21 1.79-4 4-4s4 1.79 4 4v3l2.41 3.24c.22.33-.02.76-.41.76ZM6 13c0 1.1.9 2 2 2s2-.9 2-2" class="stroke-linejoin-round" />`,
+  "pause": svg2`<path d="M5 2v12M11 2v12" class="stroke-linejoin-round" />`,
+  "play": svg2`<path d="m4 13.03 8-5-8-5v10Z" class="stroke-linejoin-round filled" />`,
+  "redo": svg2`<path d="m11 2 4 4-4 4" class="stroke-linejoin-round" /><path d="M14 6H5.5C3.01 6 1 8.01 1 10.5S3.01 15 5.5 15H8" class="stroke-linejoin-round" />`,
+  "refresh": svg2`<path d="M15 0v5l-5-.04" class="stroke-linejoin-round" /><path d="M15 8c0 3.87-3.13 7-7 7s-7-3.13-7-7 3.13-7 7-7c2.79 0 5.2 1.63 6.33 4" />`,
+  "remove": svg2`<path d="M1 5h14M13 5l-1 10H4L3 5M5 5V2h6v3" class="stroke-linejoin-round" />`,
+  "resize-area": svg2`<path d="M14 4 4 14M10 14l4-4" class="stroke-linejoin-round" />`,
+  "script": svg2`<path d="M5 4 1 8l4 4M11 4l4 4-4 4" class="stroke-linejoin-round" /><path d="M7 13 9 3" />`,
+  "search-gen-ai": svg2`<path d="M12.332 6.888c.028.07.098.112.168.112s.168-.112.168-.112l.924-2.298 2.296-.925A.182.182 0 0 0 16 3.497c0-.07-.112-.169-.112-.169l-2.296-.925-.924-2.298c-.056-.14-.28-.14-.336 0l-.924 2.298-2.296.925A.182.182 0 0 0 9 3.497c0 .07.112.168.112.168l2.296.925.924 2.298Z" class="filled no-stroke" /><path d="m11 11.005 4 4M11.9 8a5.002 5.002 0 1 1-8.36-4.605A4.996 4.996 0 0 1 8 2.105" class="stroke-linejoin-round" />`,
+  "search": svg2`<path d="m11 11 4 4M7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10Z" class="stroke-linejoin-round" />`,
+  "security": svg2`<path d="M8 1C6.29 2.53 4.13 3.32 2 3.48v3.48c0 2.05.76 3.88 1.71 5.14.92 1.22 2.32 2.21 4.29 2.9 1.97-.69 3.37-1.68 4.29-2.9A8.684 8.684 0 0 0 14 6.96V3.48C11.87 3.32 9.71 2.52 8 1Z" class="stroke-linejoin-round" /><path d="M8 4v5M8 10v2" />`,
+  "send": svg2`<path d="m1 1 14 6.92L1 15l3-7-3-7ZM4 8h11" class="stroke-linejoin-round" />`,
+  "settings": svg2`<path d="M6.11 1.729c.07-.42.44-.729.86-.729h2.02c.43 0 .79.31.86.729l.17.999c.05.29.24.529.5.679.06.03.11.06.17.1.25.15.56.2.84.1l.95-.35c.4-.15.85 0 1.07.38l1.01 1.747c.21.37.13.839-.2 1.108l-.78.64c-.23.189-.34.479-.33.768v.2c0 .29.11.579.33.769l.78.639c.33.27.42.739.2 1.108l-1.01 1.748c-.21.37-.66.529-1.06.38l-.95-.35a.966.966 0 0 0-.84.1c-.06.03-.11.07-.17.1-.26.14-.45.389-.5.679l-.17.998A.878.878 0 0 1 9 15H6.98a.87.87 0 0 1-.86-.729l-.17-.998a.988.988 0 0 0-.5-.68c-.06-.03-.11-.06-.17-.1a.996.996 0 0 0-.84-.1l-.95.35c-.4.15-.85 0-1.06-.38l-1.01-1.747a.873.873 0 0 1 .2-1.108l.78-.64c.23-.189.34-.479.33-.768v-.2c0-.3-.11-.579-.33-.769l-.78-.639a.861.861 0 0 1-.2-1.108l1.01-1.748c.21-.37.66-.529 1.07-.38l.95.35c.28.1.58.06.84-.1.06-.03.11-.07.17-.1.26-.14.45-.379.5-.678l.15-1Z" class="stroke-linecap-round stroke-linejoin-round" /><path d="M10 8c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2Z" class="stroke-linecap-round stroke-linejoin-round" />`,
+  "share": svg2`<path d="M3.5 11a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM12.5 6a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM12.5 15a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM10.326 4.7 5.678 7.293M10.223 11.483l-4.448-1.96" />`,
+  "shrink": svg2`<path d="M10 1v5h5M10.71 5.29 15 1M1 10h5v5M5.3 10.7 1 15" class="stroke-linejoin-round" />`,
+  "slash": svg2`<path d="m10 4.5-4 7" /><rect x="1" y="1" width="14" height="14" rx="1" />`,
+  "star-filled": svg2`<path d="m8 1 2.16 4.38 4.84.71-3.5 3.41.83 4.81L8 12.04l-4.33 2.27.83-4.81L1 6.09l4.84-.71L8 1Z" class="filled stroke-linejoin-round" />`,
+  "star-half": svg2`<path d="M8 1v11.04l-4.33 2.27.83-4.81L1 6.09l4.84-.71L8 1Z" class="filled no-stroke" /><path d="m8 1 2.16 4.38 4.84.71-3.5 3.41.83 4.81L8 12.04l-4.33 2.27.83-4.81L1 6.09l4.84-.71L8 1Z" class="stroke-linejoin-round" />`,
+  "star": svg2`<path d="m8 1 2.16 4.38 4.84.71-3.5 3.41.83 4.81L8 12.04l-4.33 2.27.83-4.81L1 6.09l4.84-.71L8 1Z" class="stroke-linejoin-round" />`,
+  "status-in-progress": svg2`<circle cx="8" cy="8" r="7" /><path d="M9 7H7v2h2V7ZM6 7H4v2h2V7ZM12 7h-2v2h2V7Z" class="filled no-stroke" />`,
+  "status-info": svg2`<circle cx="8" cy="8" r="7" /><path d="M8 12V7M8 6V4" />`,
+  "status-negative": svg2`<circle cx="8" cy="8" r="7" /><path d="m5.5 5.5 5 5M10.5 5.5l-5 5" />`,
+  "status-not-started": svg2`<circle cx="8" cy="8" r="7" />`,
+  "status-pending": svg2`<circle cx="8" cy="8" r="7" /><path d="M8 4v5H4" class="stroke-linejoin-round" />`,
+  "status-positive": svg2`<circle cx="8" cy="8" r="7" /><path d="M4.5 7.5 7 10l4-5" class="stroke-linejoin-round" />`,
+  "status-stopped": svg2`<circle cx="8" cy="8" r="7" /><path d="M5 8h6" />`,
+  "status-warning": svg2`<path d="M8 5v4M8 10v2M6.52 1.88l-5.33 9.76c-.13.23-.19.5-.19.76 0 .88.71 1.59 1.59 1.59H13.4c.88 0 1.59-.71 1.59-1.59 0-.27-.07-.53-.19-.76L9.48 1.88C9.18 1.34 8.62 1 8 1s-1.18.34-1.48.88Z" class="stroke-linejoin-round" />`,
+  "stop-circle": svg2`<circle cx="8" cy="8" r="7" /><rect x="5" y="5" width="6" height="6" rx=".5" class="filled no-stroke" />`,
+  "subtract-minus": svg2`<path d="M2 8h12" class="stroke-linejoin-round" />`,
+  "suggestions-gen-ai": svg2`<path d="m15.888 3.329-2.296-.921-.924-2.303c-.056-.14-.28-.14-.336 0l-.924 2.303-2.296.921S9 3.427 9 3.497s.042.14.112.167l.07.028 2.226.893.924 2.303S12.43 7 12.5 7s.14-.042.168-.112l.924-2.303 2.296-.921S16 3.566 16 3.497c0-.07-.042-.14-.112-.168Z" class="filled no-stroke" /><path d="M12.348 8.45a5.09 5.09 0 0 1-1.358 1.53L10 15H6l-.99-5.02C3.8 9.07 3 7.63 3 6c0-2.76 2.24-5 5-5M10.5 12.005h-5" class="stroke-linejoin-round" />`,
+  "suggestions": svg2`<path d="M8.12 15h-2l-.99-5.02C3.92 9.07 3.12 7.63 3.12 6c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.07-2.01 3.98L10.12 15h-2ZM11.12 12h-6" class="stroke-linejoin-round" />`,
+  "support": svg2`<circle cx="8" cy="8" r="7" /><path d="M5.75 6.338c.13-1.178.811-2.339 2.37-2.339 1.472 0 2.435 1.312 2.042 2.468-.215.633-.916 1.132-1.385 1.578C8.162 8.631 8 9.2 8 10" /><path d="M8 12.01h.01V12H8v.01Z" class="filled" />`,
+  "thumbs-down-filled": svg2`<path d="M1 1h2.01v9H1c-.55 0-1-.45-1-1V2c0-.55.45-1 1-1Zm14.14 6.22-1.69-5.03C13.21 1.48 12.54 1 11.79 1H4.01v9l3.23 3.88c.6.72 1.77.29 1.77-.64V9h4.86c.92 0 1.57-.91 1.28-1.78h-.01Z" class="filled no-stroke" />`,
+  "thumbs-down": svg2`<path d="M9 13.13V9h4.12c.6 0 1.02-.59.83-1.16l-1.6-4.77A1.58 1.58 0 0 0 10.86 2H1v8h4l2.41 3.61c.48.72 1.59.38 1.59-.48ZM5 2v8" class="stroke-linejoin-round" />`,
+  "thumbs-up-filled": svg2`<path d="M3 15.001H1c-.55 0-1-.45-1-1v-7c0-.55.45-1 1-1h2v9Zm10.86-8H9v-4.24c0-.93-1.17-1.36-1.77-.64L4 6.001v9h7.78c.75 0 1.42-.48 1.66-1.19l1.69-5.03c.29-.87-.36-1.78-1.28-1.78h.01Z" class="filled no-stroke" />`,
+  "thumbs-up": svg2`<path d="M9 2.871v4.13h4.12c.6 0 1.02.59.83 1.16l-1.6 4.77a1.58 1.58 0 0 1-1.49 1.07H1v-8h4l2.41-3.61c.48-.72 1.59-.38 1.59.48ZM5 14.001v-8" class="stroke-linejoin-round" />`,
+  "ticket": svg2`<path d="M13 8c0-1.1.9-2 2-2V3H1v3c1.1 0 2 .9 2 2s-.9 2-2 2v3h14v-3c-1.1 0-2-.9-2-2Z" class="stroke-linejoin-round" />`,
+  "transcript": svg2`<path d="M15 1H1v14h14V1ZM9 10H4M12 6H4" class="stroke-linejoin-round" />`,
+  "treeview-collapse": svg2`<path d="M14 2H2v12h12V2ZM5 8h6" class="stroke-linejoin-round" />`,
+  "treeview-expand": svg2`<path d="M14 2H2v12h12V2ZM8 5v6M5 8h6" class="stroke-linejoin-round" />`,
+  "undo": svg2`<path d="M5 2 1 6l4 4" class="stroke-linejoin-round" /><path d="M2 6h8.5c2.49 0 4.5 2.01 4.5 4.5S12.99 15 10.5 15H8" class="stroke-linejoin-round" />`,
+  "unlocked": svg2`<path d="M11 7H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1ZM9 7V4c0-1.65 1.35-3 3-3s3 1.35 3 3" class="stroke-linejoin-round" />`,
+  "upload-download": svg2`<path d="m7 7-3 3-3-3M4 9V1M15 9l-3-3-3 3M12 7v8M0 14h8M8 2h8" class="stroke-linejoin-round" />`,
+  "upload": svg2`<path d="M1 1h14M13 10 8 5l-5 5M8 6v9" class="stroke-linejoin-round" />`,
+  "user-profile-active": svg2`<path d="M8 6a2.5 2.5 0 0 0 0-5 2.5 2.5 0 0 0 0 5ZM2 15.5v-3c0-1.66 1.34-3 3-3h6c1.66 0 3 1.34 3 3v3" class="filled" /><path d="M2 15.5v-3c0-1.66 1.34-3 3-3h6c1.66 0 3 1.34 3 3v3" class="stroke-linejoin-round" />`,
+  "user-profile": svg2`<path d="M8 7c1.66 0 3-1.34 3-3S9.66 1 8 1 5 2.34 5 4s1.34 3 3 3Z" /><path d="M2 16v-3c0-1.66 1.34-3 3-3h6c1.66 0 3 1.34 3 3v3" class="stroke-linejoin-round" />`,
+  "video-camera-off": svg2`<path d="M11 6V3H1v9.97h10V9.98L15 13V3.04L11 6ZM4 6l4 4M8 6.01 4 10" class="stroke-linejoin-round" />`,
+  "video-camera-on": svg2`<path d="M11 6V3H1v9.97L11 13v-3l4 3V3.04L11 6Z" class="stroke-linejoin-round" />`,
+  "video-camera-unavailable": svg2`<path d="M11 5.99V3H1v9.97h10V9.98L15 13V3.04l-4 2.95ZM4 8h4" class="stroke-linejoin-round" />`,
+  "video-off": svg2`<circle cx="8" cy="7" r="5" /><path d="M3 15h10M8 15v-3M6.01 5.01 10 9M10 5 6 9" class="stroke-linejoin-round" />`,
+  "video-on": svg2`<circle cx="8" cy="7" r="5" /><circle cx="8" cy="7" r="2" class="filled no-stroke" /><path d="M3 15h10M8 15v-3" />`,
+  "video-unavailable": svg2`<circle cx="8" cy="7" r="5" /><path d="M3 15h10M6 7h4M8 15v-3" />`,
+  "view-full": svg2`<path d="M15 1H1v14h14V1Z" class="stroke-linejoin-round" /><path d="M11.5 4h-7a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5Z" class="filled no-stroke" />`,
+  "view-horizontal": svg2`<path d="M15 15V1H1v14h14Z" class="stroke-linejoin-round" /><path d="M11.5 7h-7a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5Z" class="filled no-stroke" />`,
+  "view-vertical": svg2`<path d="M15 1H1v14h14V1Z" class="stroke-linejoin-round" /><path d="M11.5 4h-4a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5Z" class="filled no-stroke" />`,
+  "zoom-in": svg2`<circle cx="7" cy="7" r="6" /><path d="m11 11 4 4M7 4v6M4 7l6 .01" />`,
+  "zoom-out": svg2`<path d="m11 11 4 4" /><circle cx="7" cy="7" r="6" /><path d="m4 7 6 .01" />`,
+  "zoom-to-fit": svg2`<path d="M11 5H5v6h6V5ZM6 1H1v5M10 1h5v5M6 15H1v-5M10 15h5v-5" class="stroke-linejoin-round" />`
+};
+
+// src/icon-provider/internal.ts
+import { LitElement as LitElement5, html as html5 } from "lit";
+import { property as property6 } from "lit/decorators.js";
+import { provide, createContext } from "@lit/context";
+var iconProviderContext = createContext(
+  /* @__PURE__ */ Symbol("icon-provider-context")
+);
+var CsIconProviderInternal = class extends LitElement5 {
+  constructor() {
+    super(...arguments);
+    this.icons = null;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  willUpdate() {
+    if (this.icons === null) {
+      this._resolver = void 0;
+    } else {
+      const iconMap = this.icons;
+      this._resolver = (name) => {
+        if (name in iconMap) {
+          return iconMap[name] ?? void 0;
+        }
+        return void 0;
+      };
+    }
+  }
+  render() {
+    return html5`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property6({ attribute: false })
+], CsIconProviderInternal.prototype, "icons", 2);
+__decorateClass([
+  provide({ context: iconProviderContext })
+], CsIconProviderInternal.prototype, "_resolver", 2);
+
+// src/icon/internal.ts
+var hostStyles5 = css12`:host { display: inline-block; vertical-align: top; line-height: 0; }`;
+var CsIconInternal = class extends LitElement6 {
+  constructor() {
+    super(...arguments);
+    this.size = "normal";
+    this.variant = "normal";
+    this.ariaLabel = null;
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles5, hostStyles5];
+  }
+  render() {
+    const hasAriaLabel = typeof this.ariaLabel === "string" && this.ariaLabel.length > 0;
+    const classes = {
+      "icon": true,
+      [`size-${this.size}`]: true,
+      [`size-${this.size}-mapped-height`]: true,
+      [`variant-${this.variant}`]: true
+    };
+    return html6`
+      <span
+        class=${classMap5(classes)}
+        role=${ifDefined2(hasAriaLabel ? "img" : void 0)}
+        aria-label=${ifDefined2(hasAriaLabel ? this.ariaLabel : void 0)}
+        aria-hidden=${hasAriaLabel ? "false" : "true"}
+      >
+        ${this._renderContent()}
+      </span>
+    `;
+  }
+  _renderContent() {
+    if (this.name) {
+      if (this._iconResolver) {
+        const override = this._iconResolver(this.name);
+        if (override !== void 0 && override !== null) {
+          return override;
+        }
+      }
+      const iconSvg = builtInIcons[this.name];
+      if (iconSvg) {
+        return this._wrapSvg(iconSvg);
+      }
+    }
+    if (this.url) {
+      const altText = this.ariaLabel ?? this.alt ?? "";
+      return html6`<img src=${this.url} alt=${altText} />`;
+    }
+    return html6`<slot name="svg"></slot>`;
+  }
+  _wrapSvg(content) {
+    return svgTag`<svg
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      focusable="false"
+      aria-hidden="true"
+    >${content}</svg>`;
+  }
+};
+__decorateClass([
+  property7({ type: String, reflect: true })
+], CsIconInternal.prototype, "name", 2);
+__decorateClass([
+  property7({ type: String, reflect: true })
+], CsIconInternal.prototype, "size", 2);
+__decorateClass([
+  property7({ type: String, reflect: true })
+], CsIconInternal.prototype, "variant", 2);
+__decorateClass([
+  property7({ type: String })
+], CsIconInternal.prototype, "url", 2);
+__decorateClass([
+  property7({ type: String })
+], CsIconInternal.prototype, "alt", 2);
+__decorateClass([
+  property7({ type: String, attribute: "arialabel" })
+], CsIconInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  consume({ context: iconProviderContext, subscribe: true })
+], CsIconInternal.prototype, "_iconResolver", 2);
+
+// src/icon/index.ts
+var CsIcon = class extends CsIconInternal {
+};
+customElements.define("cs-icon", CsIcon);
+
+// src/icon-provider/index.ts
+var CsIconProvider = class extends CsIconProviderInternal {
+};
+customElements.define("cs-icon-provider", CsIconProvider);
+
+// src/radio-group/internal.ts
+import { css as css15, html as html7 } from "lit";
+import { property as property8 } from "lit/decorators.js";
+import { classMap as classMap6 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined3 } from "lit/directives/if-defined.js";
+import { LitElement as LitElement7 } from "lit";
+
+// src/radio-group/styles.ts
+import { css as css13 } from "lit";
+var componentStyles6 = css13`
+.radio-group {
+  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;
+}
+.radio-group:not(.horizontal-group) {
+  display: block;
+}
+.radio-group.horizontal-group {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: var(--space-scaled-l-sej05l, 20px);
+}
+
+.radio + .radio:not(.horizontal) {
+  margin-block-start: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+
+.radio--has-description + .radio:not(.horizontal) {
+  margin-block-start: var(--space-scaled-xs-xwoogq, 8px);
+}
+
+.radio.horizontal {
+  max-inline-size: calc(16 * var(--space-scaled-xxl-6wgq96, 32px));
+}
+`;
+
+// src/internal/styles/radio-button.ts
+import { css as css14 } from "lit";
+var radioButtonStyles = css14`
+.radio-control {
+  margin-block-start: calc((var(--line-height-body-m-2mh3ke, 20px) - var(--size-control-adm93y, 16px)) / 2);
+  min-block-size: var(--size-control-adm93y, 16px);
+  min-inline-size: var(--size-control-adm93y, 16px);
+  block-size: var(--size-control-adm93y, 16px);
+  inline-size: var(--size-control-adm93y, 16px);
+}
+
+.outline {
+  --awsui-style-focus-ring-box-shadow-6b9ypa: 0 0 0 var(--awsui-style-focus-ring-border-width-6b9ypa, 2px) var(--awsui-style-focus-ring-border-color-6b9ypa, var(--color-border-item-focused-uk47pl, #006ce0));
+  position: relative;
+}
+.outline {
+  outline: 2px dotted transparent;
+  outline-offset: calc(2px - 1px);
+}
+.outline::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * 2px);
+  inset-block-start: calc(-1 * 2px);
+  inline-size: calc(100% + 2px + 2px);
+  block-size: calc(100% + 2px + 2px);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-6b9ypa, var(--border-radius-control-circular-focus-ring-yjhscw, 4px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-6b9ypa, var(--border-radius-control-circular-focus-ring-yjhscw, 4px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-6b9ypa, var(--border-radius-control-circular-focus-ring-yjhscw, 4px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-6b9ypa, var(--border-radius-control-circular-focus-ring-yjhscw, 4px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-6b9ypa);
+}
+
+.styled-circle-border {
+  stroke: var(--color-border-control-default-sh3548, #8c8c94);
+  fill: var(--color-background-control-default-4jb21l, #ffffff);
+}
+.styled-circle-border.styled-circle-disabled, .styled-circle-border.styled-circle-readonly {
+  fill: var(--color-background-control-disabled-1f3718, #dedee3);
+  stroke: var(--color-background-control-disabled-1f3718, #dedee3);
+}
+
+.styled-circle-fill {
+  stroke: var(--color-background-control-checked-ka7kc2, #006ce0);
+  fill: var(--color-foreground-control-default-eto4wy, #ffffff);
+  opacity: 0;
+  transition: opacity var(--motion-duration-transition-quick-mcm2y0, 90ms) var(--motion-easing-transition-quick-qxak3i, linear);
+}
+@media (prefers-reduced-motion: reduce) {
+  .styled-circle-fill {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .styled-circle-fill, .awsui-mode-entering .styled-circle-fill {
+  animation: none;
+  transition: none;
+}
+.styled-circle-fill.styled-circle-checked {
+  opacity: 1;
+}
+.styled-circle-fill.styled-circle-disabled {
+  fill: var(--color-foreground-control-disabled-txi6cf, #ffffff);
+  stroke: var(--color-background-control-disabled-1f3718, #dedee3);
+}
+.styled-circle-fill.styled-circle-readonly {
+  fill: var(--color-foreground-control-read-only-7ydvuj, #656871);
+  stroke: var(--color-background-control-disabled-1f3718, #dedee3);
+}
+`;
+
+// src/radio-group/internal.ts
+var Base2 = FormAssociatedMixin(LitElement7);
+var hostStyles6 = css15`:host { display: block; }`;
+var CsRadioGroupInternal = class extends Base2 {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.items = [];
+    this.controlAriaLabel = "";
+    this.controlAriaRequired = false;
+    this.controlAriaControls = "";
+    this.readOnly = false;
+    this.direction = "vertical";
+    this._groupName = generateUniqueId("radio");
+    this._focusedIndex = -1;
+    this._onKeyDown = (e) => {
+      const enabledIndices = this._getEnabledIndices();
+      if (enabledIndices.length === 0) return;
+      const isVertical = this.direction === "vertical";
+      const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+      const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+      const altPrevKey = "ArrowLeft";
+      const altNextKey = "ArrowRight";
+      let direction = 0;
+      if (e.key === prevKey || e.key === altPrevKey) direction = -1;
+      else if (e.key === nextKey || e.key === altNextKey) direction = 1;
+      else return;
+      e.preventDefault();
+      const currentEnabledPos = enabledIndices.indexOf(this._focusedIndex);
+      let nextPos;
+      if (currentEnabledPos === -1) {
+        nextPos = direction === 1 ? 0 : enabledIndices.length - 1;
+      } else {
+        nextPos = currentEnabledPos + direction;
+        if (nextPos < 0) nextPos = enabledIndices.length - 1;
+        else if (nextPos >= enabledIndices.length) nextPos = 0;
+      }
+      const nextIndex = enabledIndices[nextPos];
+      this._focusedIndex = nextIndex;
+      const inputs = this._getRadioInputs();
+      if (inputs[nextIndex]) {
+        inputs[nextIndex].focus();
+      }
+      if (!this.readOnly) {
+        this._selectItem(this.items[nextIndex].value);
+      }
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles6, abstractSwitchStyles, radioButtonStyles, hostStyles6];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._onKeyDown);
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("value")) {
+      this.setFormValue(this.value || null);
+    }
+  }
+  focus() {
+    const inputs = this._getRadioInputs();
+    if (inputs.length === 0) return;
+    const selectedIdx = this._getSelectedIndex();
+    const focusIdx = selectedIdx >= 0 ? selectedIdx : this._getFirstEnabledIndex();
+    if (focusIdx >= 0) {
+      inputs[focusIdx].focus();
+    }
+  }
+  _getRadioInputs() {
+    const root = this.shadowRoot;
+    if (!root) return [];
+    return Array.from(root.querySelectorAll(".native-input"));
+  }
+  _getSelectedIndex() {
+    return this.items.findIndex((item) => item.value === this.value);
+  }
+  _getFirstEnabledIndex() {
+    return this.items.findIndex((item) => !item.disabled);
+  }
+  _getEnabledIndices() {
+    return this.items.reduce((acc, item, i) => {
+      if (!item.disabled) acc.push(i);
+      return acc;
+    }, []);
+  }
+  _onItemClick(item) {
+    if (this.disabled || item.disabled || this.readOnly) return;
+    this._selectItem(item.value);
+  }
+  _onFocus(index) {
+    this._focusedIndex = index;
+  }
+  _selectItem(itemValue) {
+    if (this.value === itemValue) return;
+    this.value = itemValue;
+    const detail = { value: itemValue };
+    fireNonCancelableEvent(this, "change", detail);
+  }
+  _getTabIndex(index) {
+    const selectedIdx = this._getSelectedIndex();
+    if (selectedIdx >= 0) {
+      return index === selectedIdx ? 0 : -1;
+    }
+    const firstEnabled = this._getFirstEnabledIndex();
+    return index === firstEnabled ? 0 : -1;
+  }
+  render() {
+    const groupName = this.name || this._groupName;
+    const groupClasses = {
+      "radio-group": true,
+      "horizontal-group": this.direction === "horizontal"
+    };
+    return html7`
+      <div
+        class=${classMap6(groupClasses)}
+        role="radiogroup"
+        aria-label=${ifDefined3(this.controlAriaLabel || void 0)}
+        aria-required=${ifDefined3(this.controlAriaRequired ? "true" : void 0)}
+        aria-controls=${ifDefined3(this.controlAriaControls || void 0)}
+        aria-disabled=${ifDefined3(this.disabled ? "true" : void 0)}
+        aria-readonly=${ifDefined3(this.readOnly ? "true" : void 0)}
+      >
+        ${this.items.map((item, index) => this._renderItem(item, index, groupName))}
+      </div>
+    `;
+  }
+  _renderItem(item, index, groupName) {
+    const isChecked = item.value === this.value;
+    const isDisabled = this.disabled || !!item.disabled;
+    const itemId = item.controlId || generateUniqueId("radio-item");
+    const descId = item.description ? `${itemId}-desc` : void 0;
+    const itemClasses = {
+      "radio": true,
+      "radio--has-description": !!item.description,
+      "horizontal": this.direction === "horizontal",
+      "radio--checked": isChecked,
+      "radio--disabled": isDisabled,
+      "radio--readonly": this.readOnly
+    };
+    const controlClasses = {
+      "radio-control": true,
+      "radio-control--checked": isChecked,
+      "radio-control--disabled": isDisabled
+    };
+    return html7`
+      <label
+        class=${classMap6(itemClasses)}
+        @click=${(e) => {
+      e.preventDefault();
+      this._onItemClick(item);
+    }}
+      >
+        <input
+          type="radio"
+          class="native-input"
+          name=${groupName}
+          .value=${item.value}
+          .checked=${isChecked}
+          ?disabled=${isDisabled}
+          ?readonly=${this.readOnly}
+          tabindex=${this._getTabIndex(index)}
+          aria-describedby=${ifDefined3(descId)}
+          @click=${(e) => e.preventDefault()}
+          @focus=${() => this._onFocus(index)}
+        />
+        <span class=${classMap6(controlClasses)}>
+          <span class="radio-dot"></span>
+        </span>
+        <span class="radio-content">
+          <span class=${classMap6({
+      "radio-label": true,
+      "radio-label--disabled": isDisabled
+    })}>
+            ${item.label}
+          </span>
+          ${item.description ? html7`
+            <span
+              id=${descId}
+              class=${classMap6({
+      "radio-description": true,
+      "radio-description--disabled": isDisabled
+    })}
+            >
+              ${item.description}
+            </span>
+          ` : ""}
+        </span>
+      </label>
+    `;
+  }
+};
+__decorateClass([
+  property8({ type: String })
+], CsRadioGroupInternal.prototype, "value", 2);
+__decorateClass([
+  property8({ type: Array })
+], CsRadioGroupInternal.prototype, "items", 2);
+__decorateClass([
+  property8({ type: String, attribute: "arialabel" })
+], CsRadioGroupInternal.prototype, "controlAriaLabel", 2);
+__decorateClass([
+  property8({ type: Boolean, attribute: "ariarequired" })
+], CsRadioGroupInternal.prototype, "controlAriaRequired", 2);
+__decorateClass([
+  property8({ type: String, attribute: "ariacontrols" })
+], CsRadioGroupInternal.prototype, "controlAriaControls", 2);
+__decorateClass([
+  property8({ type: Boolean, reflect: true })
+], CsRadioGroupInternal.prototype, "readOnly", 2);
+__decorateClass([
+  property8({ type: String })
+], CsRadioGroupInternal.prototype, "direction", 2);
+
+// src/radio-group/index.ts
+var CsRadioGroup = class extends CsRadioGroupInternal {
+};
+customElements.define("cs-radio-group", CsRadioGroup);
+
+// src/tiles/internal.ts
+import { css as css17, html as html8 } from "lit";
+import { property as property9 } from "lit/decorators.js";
+import { classMap as classMap7 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined4 } from "lit/directives/if-defined.js";
+import { LitElement as LitElement8 } from "lit";
+
+// src/tiles/styles.ts
+import { css as css16 } from "lit";
+var componentStyles7 = css16`
+div.column-layout {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  word-wrap: break-word;
+}
+div.column-layout > .grid {
+  margin-block: calc(var(--space-grid-gutter-whc3jp, 20px) / -2);
+  margin-inline: calc(var(--space-grid-gutter-whc3jp, 20px) / -2);
+
+
+}
+div.column-layout > .grid.grid-no-gutters {
+  margin-block: 0;
+  margin-inline: 0;
+}
+div.column-layout > .grid.grid-variant-text-grid {
+  margin-block: calc(-1 * var(--space-grid-gutter-whc3jp, 20px) / 2);
+  margin-inline: calc(-1 * var(--space-grid-gutter-whc3jp, 20px));
+
+}
+div.column-layout > .grid.grid-variant-text-grid > * {
+  border-inline-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+div.column-layout > .grid.grid-variant-text-grid.grid-breakpoint-default > *:nth-child(1n+1) {
+  border-inline-start-width: 0;
+}
+div.column-layout > .grid.grid-variant-text-grid.grid-columns-1.grid-breakpoint-xxs > *:nth-child(1n+1) {
+  border-inline-start-width: 0;
+}
+div.column-layout > .grid.grid-variant-text-grid.grid-columns-1.grid-breakpoint-xs > *:nth-child(1n+1) {
+  border-inline-start-width: 0;
+}
+div.column-layout > .grid.grid-variant-text-grid.grid-columns-2.grid-breakpoint-xxs > *:nth-child(2n+1) {
+  border-inline-start-width: 0;
+}
+div.column-layout > .grid.grid-variant-text-grid.grid-columns-2.grid-breakpoint-xs > *:nth-child(2n+1) {
+  border-inline-start-width: 0;
+}
+div.column-layout > .grid.grid-variant-text-grid.grid-columns-3.grid-breakpoint-xxs > *:nth-child(2n+1) {
+  border-inline-start-width: 0;
+}
+div.column-layout > .grid.grid-variant-text-grid.grid-columns-3.grid-breakpoint-xs > *:nth-child(3n+1) {
+  border-inline-start-width: 0;
+}
+div.column-layout > .grid.grid-variant-text-grid.grid-columns-4.grid-breakpoint-xxs > *:nth-child(2n+1) {
+  border-inline-start-width: 0;
+}
+div.column-layout > .grid.grid-variant-text-grid.grid-columns-4.grid-breakpoint-xs > *:nth-child(4n+1) {
+  border-inline-start-width: 0;
+}
+div.column-layout > .grid:not(.grid-no-gutters) > * {
+  padding-block: calc(var(--space-grid-gutter-whc3jp, 20px) / 2);
+  padding-inline: calc(var(--space-grid-gutter-whc3jp, 20px) / 2);
+}
+div.column-layout > .grid:not(.grid-no-gutters).grid-variant-text-grid > * {
+  padding-block: 0;
+  padding-inline: var(--space-grid-gutter-whc3jp, 20px);
+  margin-block: calc(var(--space-grid-gutter-whc3jp, 20px) / 2);
+  margin-inline: 0;
+}
+div.column-layout > .grid.grid-vertical-borders > * {
+  border-inline-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+div.column-layout > .grid.grid-vertical-borders.grid-breakpoint-default > *:nth-child(1n) {
+  border-inline-end-width: 0;
+}
+div.column-layout > .grid.grid-vertical-borders.grid-columns-1.grid-breakpoint-xxs > *:nth-child(1n) {
+  border-inline-end-width: 0;
+}
+div.column-layout > .grid.grid-vertical-borders.grid-columns-1.grid-breakpoint-xs > *:nth-child(1n) {
+  border-inline-end-width: 0;
+}
+div.column-layout > .grid.grid-vertical-borders.grid-columns-2.grid-breakpoint-xxs > *:nth-child(2n) {
+  border-inline-end-width: 0;
+}
+div.column-layout > .grid.grid-vertical-borders.grid-columns-2.grid-breakpoint-xs > *:nth-child(2n) {
+  border-inline-end-width: 0;
+}
+div.column-layout > .grid.grid-vertical-borders.grid-columns-3.grid-breakpoint-xxs > *:nth-child(2n) {
+  border-inline-end-width: 0;
+}
+div.column-layout > .grid.grid-vertical-borders.grid-columns-3.grid-breakpoint-xs > *:nth-child(3n) {
+  border-inline-end-width: 0;
+}
+div.column-layout > .grid.grid-vertical-borders.grid-columns-4.grid-breakpoint-xxs > *:nth-child(2n) {
+  border-inline-end-width: 0;
+}
+div.column-layout > .grid.grid-vertical-borders.grid-columns-4.grid-breakpoint-xs > *:nth-child(4n) {
+  border-inline-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders > * {
+  border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+div.column-layout > .grid.grid-horizontal-borders > *:last-child {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-2.grid-breakpoint-xxs > *:nth-last-child(2):nth-child(2n+1) {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-2.grid-breakpoint-xs > *:nth-last-child(2):nth-child(2n+1) {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-3.grid-breakpoint-xxs > *:nth-last-child(2):nth-child(2n+1) {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-3.grid-breakpoint-xs > *:nth-last-child(2):nth-child(3n+1) {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-3.grid-breakpoint-xs > *:nth-last-child(2):nth-child(3n+2) {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-3.grid-breakpoint-xs > *:nth-last-child(3):nth-child(3n+1) {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-4.grid-breakpoint-xxs > *:nth-last-child(2):nth-child(2n+1) {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-4.grid-breakpoint-xs > *:nth-last-child(2):nth-child(4n+1) {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-4.grid-breakpoint-xs > *:nth-last-child(2):nth-child(4n+2) {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-4.grid-breakpoint-xs > *:nth-last-child(2):nth-child(4n+3) {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-4.grid-breakpoint-xs > *:nth-last-child(3):nth-child(4n+1) {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-4.grid-breakpoint-xs > *:nth-last-child(3):nth-child(4n+2) {
+  border-block-end-width: 0;
+}
+div.column-layout > .grid.grid-horizontal-borders.grid-columns-4.grid-breakpoint-xs > *:nth-last-child(4):nth-child(4n+1) {
+  border-block-end-width: 0;
+}
+
+.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  min-inline-size: 0;
+  word-break: break-word;
+  display: block;
+}
+
+.tile-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border-block: var(--border-width-field-2xc78x, 1px) solid var(--color-border-input-default-317xk5, #8c8c94);
+  border-inline: var(--border-width-field-2xc78x, 1px) solid var(--color-border-input-default-317xk5, #8c8c94);
+  border-start-start-radius: var(--border-radius-tiles-wm1vgw, 8px);
+  border-start-end-radius: var(--border-radius-tiles-wm1vgw, 8px);
+  border-end-start-radius: var(--border-radius-tiles-wm1vgw, 8px);
+  border-end-end-radius: var(--border-radius-tiles-wm1vgw, 8px);
+  background: var(--color-background-input-default-ifz5bb, #ffffff);
+  padding-block: var(--space-xs-ymlm0b, 8px);
+  padding-inline: var(--space-scaled-m-m892r9, 16px);
+  transition: border-color var(--motion-duration-transition-quick-mcm2y0, 90ms) var(--motion-easing-transition-quick-qxak3i, linear), background-color var(--motion-duration-transition-quick-mcm2y0, 90ms) var(--motion-easing-transition-quick-qxak3i, linear);
+}
+@media (prefers-reduced-motion: reduce) {
+  .tile-container {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .tile-container, .awsui-mode-entering .tile-container {
+  animation: none;
+  transition: none;
+}
+.tile-container.refresh {
+  padding-block: var(--space-xs-ymlm0b, 8px);
+  padding-inline: var(--space-s-tvghoh, 12px);
+}
+.tile-container.refresh.selected:not(.disabled):not(.readonly) {
+  box-shadow: inset 0 0 0 var(--border-width-field-2xc78x, 1px) var(--color-border-item-focused-uk47pl, #006ce0);
+}
+.tile-container.has-metadata {
+  padding-block-end: var(--space-s-tvghoh, 12px);
+}
+.tile-container.has-metadata.refresh {
+  padding-block-end: var(--space-scaled-s-8ozaad, 12px);
+}
+.tile-container.selected {
+  border-block: var(--border-width-field-2xc78x, 1px) solid var(--color-border-item-selected-wl5ttm, #006ce0);
+  border-inline: var(--border-width-field-2xc78x, 1px) solid var(--color-border-item-selected-wl5ttm, #006ce0);
+  background: var(--color-background-item-selected-9gppru, #f0fbff);
+}
+.tile-container.disabled {
+  border-block: var(--border-width-field-2xc78x, 1px) solid var(--color-border-tiles-disabled-19olbu, #ebebf0);
+  border-inline: var(--border-width-field-2xc78x, 1px) solid var(--color-border-tiles-disabled-19olbu, #ebebf0);
+  background: var(--color-background-tiles-disabled-4ynms7, #ebebf0);
+}
+.tile-container.readonly {
+  background-color: var(--color-background-input-default-ifz5bb, #ffffff);
+  border-block: var(--border-width-field-2xc78x, 1px) solid var(--color-border-input-disabled-zgnzvk, #ebebf0);
+  border-inline: var(--border-width-field-2xc78x, 1px) solid var(--color-border-input-disabled-zgnzvk, #ebebf0);
+}
+
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  margin-block: calc(var(--space-tile-gutter-bi2bdv, 24px) / -4);
+  margin-inline-start: calc(var(--space-tile-gutter-bi2bdv, 24px) / -4);
+  margin-inline-end: calc(var(--space-tile-gutter-bi2bdv, 24px) / -4);
+}
+.columns.column-1 > .tile-container {
+  margin-block: calc(var(--space-tile-gutter-bi2bdv, 24px) / 4);
+  margin-inline: calc(var(--space-tile-gutter-bi2bdv, 24px) / 4);
+  box-sizing: border-box;
+  flex: 0 0 calc(100% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+  max-inline-size: calc(100% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+}
+.columns.column-1 > .tile-container.breakpoint-xs {
+  flex: 0 0 calc(100% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+  max-inline-size: calc(100% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+}
+.columns.column-1 > .tile-container.breakpoint-xxs {
+  flex: 0 0 calc(100% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+  max-inline-size: calc(100% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+}
+.columns.column-2 > .tile-container {
+  margin-block: calc(var(--space-tile-gutter-bi2bdv, 24px) / 4);
+  margin-inline: calc(var(--space-tile-gutter-bi2bdv, 24px) / 4);
+  box-sizing: border-box;
+  flex: 0 0 calc(100% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+  max-inline-size: calc(100% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+}
+.columns.column-2 > .tile-container.breakpoint-xs {
+  flex: 0 0 calc(50% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+  max-inline-size: calc(50% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+}
+.columns.column-2 > .tile-container.breakpoint-xxs {
+  flex: 0 0 calc(50% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+  max-inline-size: calc(50% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+}
+.columns.column-3 > .tile-container {
+  margin-block: calc(var(--space-tile-gutter-bi2bdv, 24px) / 4);
+  margin-inline: calc(var(--space-tile-gutter-bi2bdv, 24px) / 4);
+  box-sizing: border-box;
+  flex: 0 0 calc(100% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+  max-inline-size: calc(100% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+}
+.columns.column-3 > .tile-container.breakpoint-xs {
+  flex: 0 0 calc(33.3333333333% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+  max-inline-size: calc(33.3333333333% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+}
+.columns.column-3 > .tile-container.breakpoint-xxs {
+  flex: 0 0 calc(50% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+  max-inline-size: calc(50% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+}
+.columns.column-4 > .tile-container {
+  margin-block: calc(var(--space-tile-gutter-bi2bdv, 24px) / 4);
+  margin-inline: calc(var(--space-tile-gutter-bi2bdv, 24px) / 4);
+  box-sizing: border-box;
+  flex: 0 0 calc(100% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+  max-inline-size: calc(100% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+}
+.columns.column-4 > .tile-container.breakpoint-xs {
+  flex: 0 0 calc(25% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+  max-inline-size: calc(25% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+}
+.columns.column-4 > .tile-container.breakpoint-xxs {
+  flex: 0 0 calc(50% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+  max-inline-size: calc(50% - var(--space-tile-gutter-bi2bdv, 24px)/2);
+}
+
+.control {
+  flex-grow: 1;
+  margin-block-end: var(--space-s-tvghoh, 12px);
+}
+.control.no-image {
+  margin-block-end: 0;
+}
+
+.image {
+  text-align: center;
+}
+.image > img {
+  max-inline-size: 100%;
+}
+.image.disabled > img {
+  opacity: 0.3;
+}
+`;
+
+// src/tiles/internal.ts
+var Base3 = FormAssociatedMixin(LitElement8);
+var hostStyles7 = css17`:host { display: block; }`;
+var CsTilesInternal = class extends Base3 {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.items = [];
+    this.controlAriaLabel = "";
+    this.controlAriaRequired = false;
+    this.controlAriaControls = "";
+    this.readOnly = false;
+    this._groupName = generateUniqueId("tiles");
+    this._focusedIndex = -1;
+    this._onKeyDown = (e) => {
+      const enabledIndices = this._getEnabledIndices();
+      if (enabledIndices.length === 0) return;
+      let direction = 0;
+      if (e.key === "ArrowUp" || e.key === "ArrowLeft") direction = -1;
+      else if (e.key === "ArrowDown" || e.key === "ArrowRight") direction = 1;
+      else return;
+      e.preventDefault();
+      const currentEnabledPos = enabledIndices.indexOf(this._focusedIndex);
+      let nextPos;
+      if (currentEnabledPos === -1) {
+        nextPos = direction === 1 ? 0 : enabledIndices.length - 1;
+      } else {
+        nextPos = currentEnabledPos + direction;
+        if (nextPos < 0) nextPos = enabledIndices.length - 1;
+        else if (nextPos >= enabledIndices.length) nextPos = 0;
+      }
+      const nextIndex = enabledIndices[nextPos];
+      this._focusedIndex = nextIndex;
+      const inputs = this._getRadioInputs();
+      if (inputs[nextIndex]) {
+        inputs[nextIndex].focus();
+      }
+      if (!this.readOnly) {
+        this._selectItem(this.items[nextIndex].value);
+      }
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles7, abstractSwitchStyles, radioButtonStyles, hostStyles7];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._onKeyDown);
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("value")) {
+      this.setFormValue(this.value || null);
+    }
+  }
+  focus() {
+    const inputs = this._getRadioInputs();
+    if (inputs.length === 0) return;
+    const selectedIdx = this._getSelectedIndex();
+    const focusIdx = selectedIdx >= 0 ? selectedIdx : this._getFirstEnabledIndex();
+    if (focusIdx >= 0) {
+      inputs[focusIdx].focus();
+    }
+  }
+  _computeColumns() {
+    if (this.columns !== void 0) return Math.min(Math.max(this.columns, 1), 4);
+    const count = this.items.length;
+    if (count === 4 || count === 8) return 2;
+    return Math.min(count, 3);
+  }
+  _getRadioInputs() {
+    const root = this.shadowRoot;
+    if (!root) return [];
+    return Array.from(root.querySelectorAll(".native-input"));
+  }
+  _getSelectedIndex() {
+    return this.items.findIndex((item) => item.value === this.value);
+  }
+  _getFirstEnabledIndex() {
+    return this.items.findIndex((item) => !item.disabled);
+  }
+  _getEnabledIndices() {
+    return this.items.reduce((acc, item, i) => {
+      if (!item.disabled) acc.push(i);
+      return acc;
+    }, []);
+  }
+  _onTileClick(item) {
+    if (this.disabled || item.disabled || this.readOnly) return;
+    this._selectItem(item.value);
+  }
+  _onFocus(index) {
+    this._focusedIndex = index;
+  }
+  _selectItem(itemValue) {
+    if (this.value === itemValue) return;
+    this.value = itemValue;
+    const detail = { value: itemValue };
+    fireNonCancelableEvent(this, "change", detail);
+  }
+  _getTabIndex(index) {
+    const selectedIdx = this._getSelectedIndex();
+    if (selectedIdx >= 0) {
+      return index === selectedIdx ? 0 : -1;
+    }
+    const firstEnabled = this._getFirstEnabledIndex();
+    return index === firstEnabled ? 0 : -1;
+  }
+  render() {
+    const groupName = this.name || this._groupName;
+    const cols = this._computeColumns();
+    return html8`
+      <div
+        class="root"
+        role="radiogroup"
+        aria-label=${ifDefined4(this.controlAriaLabel || void 0)}
+        aria-required=${ifDefined4(this.controlAriaRequired ? "true" : void 0)}
+        aria-controls=${ifDefined4(this.controlAriaControls || void 0)}
+        aria-disabled=${ifDefined4(this.disabled ? "true" : void 0)}
+        aria-readonly=${ifDefined4(this.readOnly ? "true" : void 0)}
+      >
+        <div class=${classMap7({
+      "columns": true,
+      [`column-${cols}`]: true
+    })}>
+          ${this.items.map((item, index) => this._renderTile(item, index, groupName))}
+        </div>
+      </div>
+    `;
+  }
+  _renderTile(item, index, groupName) {
+    const isSelected = item.value === this.value;
+    const isDisabled = this.disabled || !!item.disabled;
+    const itemId = item.controlId || generateUniqueId("tile-item");
+    const labelId = `${itemId}-label`;
+    const descId = item.description ? `${itemId}-desc` : void 0;
+    const tileClasses = {
+      "tile-container": true,
+      "refresh": true,
+      "selected": isSelected,
+      "disabled": isDisabled,
+      "readonly": this.readOnly,
+      "has-metadata": !!item.image
+    };
+    const controlClasses = {
+      "control": true,
+      "no-image": !item.image
+    };
+    return html8`
+      <div
+        class=${classMap7(tileClasses)}
+        @click=${(e) => {
+      e.preventDefault();
+      this._onTileClick(item);
+    }}
+      >
+        <div class=${classMap7(controlClasses)}>
+          <input
+            type="radio"
+            class="native-input"
+            name=${groupName}
+            .value=${item.value}
+            .checked=${isSelected}
+            ?disabled=${isDisabled}
+            ?readonly=${this.readOnly}
+            tabindex=${this._getTabIndex(index)}
+            aria-labelledby=${labelId}
+            aria-describedby=${ifDefined4(descId)}
+            @click=${(e) => e.preventDefault()}
+            @focus=${() => this._onFocus(index)}
+          />
+          <span class="tile-label-wrapper">
+            <span
+              id=${labelId}
+              class=${classMap7({
+      "tile-label": true,
+      "tile-label--disabled": isDisabled
+    })}>
+              ${item.label}
+            </span>
+            ${item.description ? html8`
+              <span
+                id=${descId}
+                class=${classMap7({
+      "tile-description": true,
+      "tile-description--disabled": isDisabled
+    })}
+              >
+                ${item.description}
+              </span>
+            ` : ""}
+          </span>
+        </div>
+        ${item.image ? html8`
+          <div class=${classMap7({
+      "image": true,
+      "disabled": isDisabled
+    })}>
+            ${item.image}
+          </div>
+        ` : ""}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property9({ type: String })
+], CsTilesInternal.prototype, "value", 2);
+__decorateClass([
+  property9({ type: Array })
+], CsTilesInternal.prototype, "items", 2);
+__decorateClass([
+  property9({ type: String, attribute: "arialabel" })
+], CsTilesInternal.prototype, "controlAriaLabel", 2);
+__decorateClass([
+  property9({ type: Boolean, attribute: "ariarequired" })
+], CsTilesInternal.prototype, "controlAriaRequired", 2);
+__decorateClass([
+  property9({ type: String, attribute: "ariacontrols" })
+], CsTilesInternal.prototype, "controlAriaControls", 2);
+__decorateClass([
+  property9({ type: Number })
+], CsTilesInternal.prototype, "columns", 2);
+__decorateClass([
+  property9({ type: Boolean, reflect: true })
+], CsTilesInternal.prototype, "readOnly", 2);
+
+// src/tiles/index.ts
+var CsTiles = class extends CsTilesInternal {
+};
+customElements.define("cs-tiles", CsTiles);
+
+// src/list/internal.ts
+import { css as css20, html as html9, LitElement as LitElement9, nothing } from "lit";
+import { property as property10 } from "lit/decorators.js";
+import { classMap as classMap8 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined5 } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+
+// src/list/styles.ts
+import { css as css18 } from "lit";
+var componentStyles8 = css18`
+.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;
+  list-style: none;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  position: relative;
+}
+
+.item:not(:last-child) {
+  border-block-end: var(--border-divider-list-width-tdfx1x, 1px) solid var(--color-border-divider-secondary-qoitch, #ebebf0);
+}
+.item:not(.disable-item-paddings) {
+  padding-block: var(--space-scaled-xs-xwoogq, 8px);
+}
+.item:first-child.disable-paddings {
+  padding-block-start: 0;
+}
+.item:last-child.disable-paddings {
+  padding-block-end: 0;
+}
+
+.sortable-item {
+  display: flex;
+  align-items: baseline;
+}
+.sortable-item:not(.disable-item-paddings) {
+  column-gap: var(--space-xxs-hwfkai, 4px);
+}
+`;
+
+// src/internal/styles/structured-item.ts
+import { css as css19 } from "lit";
+var structuredItemStyles = css19`
+.root {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  min-inline-size: 0;
+  word-break: break-word;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: baseline;
+  column-gap: var(--space-xs-ymlm0b, 8px);
+}
+.root.disable-paddings {
+  column-gap: 0;
+}
+
+.main {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+}
+
+.content-wrap {
+  flex-grow: 1;
+  display: flex;
+  align-items: baseline;
+  flex-direction: row;
+  column-gap: var(--space-xs-ymlm0b, 8px);
+}
+.disable-paddings > .main > .content-wrap {
+  column-gap: 0;
+}
+.content-wrap.wrap-actions {
+  flex-wrap: wrap;
+}
+
+.content {
+  flex-grow: 1;
+  min-inline-size: 0;
+}
+
+.actions {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+`;
+
+// src/list/internal.ts
+var hostStyles8 = css20`:host { display: block; }`;
+var CsListInternal = class extends LitElement9 {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.listLabel = "";
+    this.listLabelledby = "";
+    this.listDescribedby = "";
+    this.sortable = false;
+    this.sortDisabled = false;
+    this.disableItemPaddings = false;
+    this.disablePaddings = false;
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles8, structuredItemStyles, hostStyles8];
+  }
+  _renderListItem(rendered) {
+    const itemClasses = {
+      "item": true,
+      "disable-item-paddings": this.disableItemPaddings,
+      "disable-paddings": this.disablePaddings
+    };
+    return html9`
+      <li class=${classMap8(itemClasses)} data-item-id=${rendered.id}>
+        ${rendered.icon ? html9`<span class="item-icon">${rendered.icon}</span>` : nothing}
+        <span class="item-content">
+          <span class="item-primary">${rendered.content}</span>
+          ${rendered.secondaryContent ? html9`<span class="item-secondary">${rendered.secondaryContent}</span>` : nothing}
+        </span>
+        ${rendered.actions ? html9`<span class="item-actions">${rendered.actions}</span>` : nothing}
+      </li>
+    `;
+  }
+  render() {
+    if (!this.renderItem) return nothing;
+    const renderedItems = this.items.map((item) => this.renderItem(item));
+    const tag = this.tagOverride ?? (this.sortable ? "ol" : "ul");
+    const listClasses = {
+      "root": true,
+      "disable-paddings": this.disablePaddings
+    };
+    const content = repeat(
+      renderedItems,
+      (r) => r.id,
+      (r) => this._renderListItem(r)
+    );
+    if (tag === "ol") {
+      return html9`
+        <ol
+          class=${classMap8(listClasses)}
+          role="list"
+          aria-label=${ifDefined5(this.listLabel || void 0)}
+          aria-labelledby=${ifDefined5(this.listLabelledby || void 0)}
+          aria-describedby=${ifDefined5(this.listDescribedby || void 0)}
+        >${content}</ol>
+      `;
+    }
+    return html9`
+      <ul
+        class=${classMap8(listClasses)}
+        role="list"
+        aria-label=${ifDefined5(this.listLabel || void 0)}
+        aria-labelledby=${ifDefined5(this.listLabelledby || void 0)}
+        aria-describedby=${ifDefined5(this.listDescribedby || void 0)}
+      >${content}</ul>
+    `;
+  }
+};
+__decorateClass([
+  property10({ attribute: false })
+], CsListInternal.prototype, "items", 2);
+__decorateClass([
+  property10({ attribute: false })
+], CsListInternal.prototype, "renderItem", 2);
+__decorateClass([
+  property10({ type: String })
+], CsListInternal.prototype, "tagOverride", 2);
+__decorateClass([
+  property10({ type: String, attribute: "label" })
+], CsListInternal.prototype, "listLabel", 2);
+__decorateClass([
+  property10({ type: String, attribute: "labelledby" })
+], CsListInternal.prototype, "listLabelledby", 2);
+__decorateClass([
+  property10({ type: String, attribute: "describedby" })
+], CsListInternal.prototype, "listDescribedby", 2);
+__decorateClass([
+  property10({ type: Boolean })
+], CsListInternal.prototype, "sortable", 2);
+__decorateClass([
+  property10({ type: Boolean })
+], CsListInternal.prototype, "sortDisabled", 2);
+__decorateClass([
+  property10({ type: Boolean })
+], CsListInternal.prototype, "disableItemPaddings", 2);
+__decorateClass([
+  property10({ type: Boolean })
+], CsListInternal.prototype, "disablePaddings", 2);
+__decorateClass([
+  property10({ attribute: false })
+], CsListInternal.prototype, "i18nStrings", 2);
+
+// src/list/index.ts
+var CsList = class extends CsListInternal {
+};
+customElements.define("cs-list", CsList);
+
+// src/tree-view/internal.ts
+import { css as css22, html as html10, LitElement as LitElement10, nothing as nothing2 } from "lit";
+import { property as property11 } from "lit/decorators.js";
+import { classMap as classMap9 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined6 } from "lit/directives/if-defined.js";
+
+// src/tree-view/styles.ts
+import { css as css21 } from "lit";
+var componentStyles9 = css21`
+.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;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-heading-m-uoaqdh, 22px);
+  padding-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  padding-inline: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+
+.tree {
+  list-style: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+`;
+
+// src/tree-view/internal.ts
+var hostStyles9 = css22`:host { display: block; }`;
+var CsTreeViewInternal = class extends LitElement10 {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.treeLabel = "";
+    this.treeLabelledby = "";
+    this.treeDescribedby = "";
+    this._expandedSet = /* @__PURE__ */ new Set();
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles9, hostStyles9];
+  }
+  willUpdate(changed) {
+    if (changed.has("expandedItems")) {
+      this._expandedSet = new Set(this.expandedItems ?? []);
+    }
+  }
+  _isExpanded(id) {
+    return this._expandedSet.has(id);
+  }
+  _handleToggle(item, id, expanded) {
+    const detail = { id, item, expanded: !expanded };
+    fireNonCancelableEvent(this, "itemToggle", detail);
+  }
+  _renderToggleIcon(expanded) {
+    if (this.renderItemToggleIcon) {
+      return html10`${this.renderItemToggleIcon({ expanded })}`;
+    }
+    const iconClasses = {
+      "toggle-icon": true,
+      "toggle-icon--expanded": expanded
+    };
+    return html10`
+      <svg class=${classMap9(iconClasses)} width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+        <path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    `;
+  }
+  _renderNode(item, index, level) {
+    if (!this.renderItem || !this.getItemId || !this.getItemChildren) return html10``;
+    const id = this.getItemId(item, index);
+    const rendered = this.renderItem(item, index);
+    const children = this.getItemChildren(item, index);
+    const hasChildren = children !== void 0 && children.length > 0;
+    const expanded = this._isExpanded(id);
+    const expandLabel = this.i18nStrings?.expandButtonLabel?.(item) ?? "Expand";
+    const collapseLabel = this.i18nStrings?.collapseButtonLabel?.(item) ?? "Collapse";
+    const childrenClasses = {
+      "tree": true,
+      "tree--hidden": !expanded
+    };
+    return html10`
+      <li
+        class="node"
+        role="treeitem"
+        aria-expanded=${hasChildren ? String(expanded) : nothing2}
+        data-node-id=${id}
+      >
+        <div class="node-row" tabindex=${level === 0 ? "0" : "-1"}>
+          ${hasChildren ? html10`
+              <button
+                class="toggle"
+                aria-label=${expanded ? collapseLabel : expandLabel}
+                @click=${() => this._handleToggle(item, id, expanded)}
+              >
+                ${this._renderToggleIcon(expanded)}
+              </button>` : html10`<span class="toggle-placeholder"></span>`}
+          ${rendered.icon ? html10`<span class="node-icon">${rendered.icon}</span>` : nothing2}
+          <span class="node-content">
+            <span class="node-primary">${rendered.content}</span>
+            ${rendered.secondaryContent ? html10`<span class="node-secondary">${rendered.secondaryContent}</span>` : nothing2}
+          </span>
+          ${rendered.actions ? html10`<span class="node-actions">${rendered.actions}</span>` : nothing2}
+        </div>
+        ${hasChildren ? html10`
+          <ul class=${classMap9(childrenClasses)} role="group">
+            ${children.map((child, i) => this._renderNode(child, i, level + 1))}
+          </ul>
+        ` : nothing2}
+      </li>
+    `;
+  }
+  render() {
+    if (!this.renderItem || !this.getItemId || !this.getItemChildren) return nothing2;
+    const rootClasses = {
+      "root": true,
+      "tree": true,
+      "root--connector-lines": this.connectorLines === "vertical"
+    };
+    return html10`
+      <ul
+        class=${classMap9(rootClasses)}
+        role="tree"
+        aria-label=${ifDefined6(this.treeLabel || void 0)}
+        aria-labelledby=${ifDefined6(this.treeLabelledby || void 0)}
+        aria-describedby=${ifDefined6(this.treeDescribedby || void 0)}
+      >
+        ${this.items.map((item, i) => this._renderNode(item, i, 0))}
+      </ul>
+    `;
+  }
+};
+__decorateClass([
+  property11({ attribute: false })
+], CsTreeViewInternal.prototype, "items", 2);
+__decorateClass([
+  property11({ attribute: false })
+], CsTreeViewInternal.prototype, "renderItem", 2);
+__decorateClass([
+  property11({ attribute: false })
+], CsTreeViewInternal.prototype, "getItemId", 2);
+__decorateClass([
+  property11({ attribute: false })
+], CsTreeViewInternal.prototype, "getItemChildren", 2);
+__decorateClass([
+  property11({ attribute: false })
+], CsTreeViewInternal.prototype, "expandedItems", 2);
+__decorateClass([
+  property11({ type: String, attribute: "label" })
+], CsTreeViewInternal.prototype, "treeLabel", 2);
+__decorateClass([
+  property11({ type: String, attribute: "labelledby" })
+], CsTreeViewInternal.prototype, "treeLabelledby", 2);
+__decorateClass([
+  property11({ type: String, attribute: "describedby" })
+], CsTreeViewInternal.prototype, "treeDescribedby", 2);
+__decorateClass([
+  property11({ type: String })
+], CsTreeViewInternal.prototype, "connectorLines", 2);
+__decorateClass([
+  property11({ attribute: false })
+], CsTreeViewInternal.prototype, "i18nStrings", 2);
+__decorateClass([
+  property11({ attribute: false })
+], CsTreeViewInternal.prototype, "renderItemToggleIcon", 2);
+
+// src/tree-view/index.ts
+var CsTreeView = class extends CsTreeViewInternal {
+};
+customElements.define("cs-tree-view", CsTreeView);
+
+// src/box/internal.ts
+import { css as css24, html as html11, LitElement as LitElement11 } from "lit";
+import { property as property12 } from "lit/decorators.js";
+import { classMap as classMap10 } from "lit/directives/class-map.js";
+
+// src/box/styles.ts
+import { css as css23 } from "lit";
+var componentStyles10 = css23`
+.box.p-variant.color-default, .box.b-variant.color-default, .box.strong-variant.color-default, .box.code-variant.color-default, .box.pre-variant.color-default, .box.samp-variant.color-default {
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+}
+
+.box.h1-variant.color-default, .box.h2-variant.color-default, .box.h3-variant.color-default, .box.h4-variant.color-default, .box.h5-variant.color-default {
+  color: var(--color-text-heading-default-izpp46, #0f141a);
+}
+
+.box.small-variant.color-default {
+  color: var(--color-text-small-m1tr70, #656871);
+}
+
+.box.a-variant.color-default {
+  color: var(--color-text-link-default-hude44, #006ce0);
+}
+
+.box.small-variant.font-size-default, .box.code-variant.font-size-default {
+  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);
+}
+
+.box.p-variant.font-size-default, .box.b-variant.font-size-default, .box.strong-variant.font-size-default, .box.pre-variant.font-size-default, .box.samp-variant.font-size-default, .box.a-variant.font-size-default {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+}
+
+.box.h5-variant.font-size-default {
+  font-size: var(--font-size-heading-xs-j8yzxv, 14px);
+  line-height: var(--line-height-heading-xs-q9j004, 18px);
+  letter-spacing: var(--letter-spacing-heading-xs-fgog7a, normal);
+}
+
+.box.h4-variant.font-size-default {
+  font-size: var(--font-size-heading-s-zp08en, 16px);
+  line-height: var(--line-height-heading-s-hmi4vc, 20px);
+  letter-spacing: var(--letter-spacing-heading-s-4st9ep, -0.005em);
+}
+
+.box.h3-variant.font-size-default {
+  font-size: var(--font-size-heading-m-170yiy, 18px);
+  line-height: var(--line-height-heading-m-uoaqdh, 22px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+}
+
+.box.h2-variant.font-size-default {
+  font-size: var(--font-size-heading-l-vnacx6, 20px);
+  line-height: var(--line-height-heading-l-mg5bx6, 24px);
+  letter-spacing: var(--letter-spacing-heading-l-5v6ibv, -0.015em);
+}
+
+.box.h1-variant.font-size-default {
+  font-size: var(--font-size-heading-xl-wvkbur, 24px);
+  line-height: var(--line-height-heading-xl-hko6p0, 30px);
+  letter-spacing: var(--letter-spacing-heading-xl-ckkb6u, -0.02em);
+}
+
+.box.p-variant.font-weight-default, .box.code-variant.font-weight-default, .box.pre-variant.font-weight-default, .box.samp-variant.font-weight-default, .box.small-variant.font-weight-default, .box.a-variant.font-weight-default {
+  font-weight: 400;
+}
+
+.box.strong-variant.font-weight-default, .box.b-variant.font-weight-default {
+  font-weight: 700;
+}
+
+.box.h5-variant.font-weight-default {
+  font-weight: var(--font-weight-heading-xs-wqqpne, 700);
+}
+
+.box.h4-variant.font-weight-default {
+  font-weight: var(--font-weight-heading-s-lcx0ai, 700);
+}
+
+.box.h3-variant.font-weight-default {
+  font-weight: var(--font-weight-heading-m-zf82dr, 700);
+}
+
+.box.h2-variant.font-weight-default {
+  font-weight: var(--font-weight-heading-l-0t6dwc, 700);
+}
+
+.box.h1-variant.font-weight-default {
+  font-weight: var(--font-weight-heading-xl-u3m4we, 700);
+}
+
+.box.h1-variant, .box.h2-variant, .box.h3-variant, .box.h4-variant, .box.h5-variant, .box.p-variant {
+  margin-block: 0;
+  margin-inline: 0;
+  text-decoration: none;
+  padding-block: var(--space-xxs-hwfkai, 4px);
+  padding-inline: 0;
+}
+.box.small-variant {
+  display: inline-block;
+}
+.box.code-variant, .box.pre-variant, .box.samp-variant {
+  font-family: var(--font-family-monospace-q47m7k, Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace);
+  background: transparent;
+}
+.box.key-label-variant {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  font-weight: var(--font-display-label-weight-zavpeo, 700);
+  color: var(--color-text-label-28gfmc, #0f141a);
+  margin-block-end: var(--space-key-value-gap-9glmqc, 0px);
+}
+.box.gen-ai-label-variant {
+  font-size: var(--font-size-body-s-smc8cv, 12px);
+  line-height: var(--line-height-body-s-nu5hx1, 16px);
+  letter-spacing: var(--letter-spacing-body-s-gq78ok, 0.005em);
+  font-style: italic;
+  color: var(--color-text-label-gen-ai-a2n3od, #7300e5);
+}
+.box.value-large-variant {
+  font-family: var(--font-family-display-a93nj0, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-display-l-wa6woo, 42px);
+  line-height: var(--line-height-display-l-vwanzp, 48px);
+  letter-spacing: var(--letter-spacing-display-l-elyyxk, -0.03em);
+  font-weight: var(--font-box-value-large-weight-wr00sw, 700);
+  color: inherit;
+}
+.box.inline-code-variant {
+  font-family: var(--font-family-monospace-q47m7k, Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace);
+  background: transparent;
+  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);
+  border-start-start-radius: var(--space-static-xxs-ns94dp, 4px);
+  border-start-end-radius: var(--space-static-xxs-ns94dp, 4px);
+  border-end-start-radius: var(--space-static-xxs-ns94dp, 4px);
+  border-end-end-radius: var(--space-static-xxs-ns94dp, 4px);
+  background-color: var(--color-background-inline-code-un8udy, rgba(0, 0, 0, 0.1));
+  padding-block: var(--space-static-xxxs-yidks1, 2px);
+  padding-inline: var(--space-static-xxs-ns94dp, 4px);
+}
+.box.h1-variant.font-weight-default, .box.h2-variant.font-weight-default, .box.h3-variant.font-weight-default, .box.h4-variant.font-weight-default, .box.h5-variant.font-weight-default, .box.value-large-variant.font-weight-default, .box.font-weight-heavy {
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+
+.box.color-inverted {
+  color: var(--color-text-notification-default-1iey72, #f9f9fa);
+}
+.box.color-text-label {
+  color: var(--color-text-label-28gfmc, #0f141a);
+}
+.box.color-text-body-secondary {
+  color: var(--color-text-body-secondary-yna5sb, #424650);
+}
+.box.color-text-status-error {
+  color: var(--color-text-status-error-ksqavh, #db0000);
+}
+.box.color-text-status-success {
+  color: var(--color-text-status-success-ybmii8, #00802f);
+}
+.box.color-text-status-info {
+  color: var(--color-text-status-info-ue8bd2, #006ce0);
+}
+.box.color-text-status-inactive {
+  color: var(--color-text-status-inactive-gy7337, #656871);
+}
+.box.color-text-status-warning {
+  color: var(--color-text-status-warning-6meo06, #855900);
+}
+.box.color-inherit {
+  color: inherit;
+}
+.box.font-size-body-s {
+  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);
+}
+.box.font-size-body-m {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+}
+.box.font-size-heading-xs {
+  font-size: var(--font-size-heading-xs-j8yzxv, 14px);
+  line-height: var(--line-height-heading-xs-q9j004, 18px);
+  letter-spacing: var(--letter-spacing-heading-xs-fgog7a, normal);
+}
+.box.font-size-heading-s {
+  font-size: var(--font-size-heading-s-zp08en, 16px);
+  line-height: var(--line-height-heading-s-hmi4vc, 20px);
+  letter-spacing: var(--letter-spacing-heading-s-4st9ep, -0.005em);
+}
+.box.font-size-heading-m {
+  font-size: var(--font-size-heading-m-170yiy, 18px);
+  line-height: var(--line-height-heading-m-uoaqdh, 22px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+}
+.box.font-size-heading-l {
+  font-size: var(--font-size-heading-l-vnacx6, 20px);
+  line-height: var(--line-height-heading-l-mg5bx6, 24px);
+  letter-spacing: var(--letter-spacing-heading-l-5v6ibv, -0.015em);
+}
+.box.font-size-heading-xl {
+  font-size: var(--font-size-heading-xl-wvkbur, 24px);
+  line-height: var(--line-height-heading-xl-hko6p0, 30px);
+  letter-spacing: var(--letter-spacing-heading-xl-ckkb6u, -0.02em);
+}
+.box.font-size-display-l {
+  font-size: var(--font-size-display-l-wa6woo, 42px);
+  line-height: var(--line-height-display-l-vwanzp, 48px);
+  letter-spacing: var(--letter-spacing-display-l-elyyxk, -0.03em);
+}
+.box.font-weight-light {
+  font-weight: 300;
+}
+.box.font-weight-normal {
+  font-weight: 400;
+}
+.box.font-weight-bold {
+  font-weight: 700;
+}
+.box.font-weight-heavy {
+  font-weight: var(--font-weight-heavy-6yh4un, 700);
+}
+
+.t-left {
+  text-align: start;
+}
+
+.t-right {
+  text-align: end;
+}
+
+.t-center {
+  text-align: center;
+}
+
+.box.p-n {
+  padding-block: var(--space-scaled-none-nfyouv, 0px);
+  padding-inline: var(--space-none-xk6qzf, 0px);
+}
+
+.box.p-top-n,
+.box.p-vertical-n {
+  padding-block-start: var(--space-scaled-none-nfyouv, 0px);
+}
+
+.box.p-right-n,
+.box.p-horizontal-n {
+  padding-inline-end: var(--space-none-xk6qzf, 0px);
+}
+
+.box.p-bottom-n,
+.box.p-vertical-n {
+  padding-block-end: var(--space-scaled-none-nfyouv, 0px);
+}
+
+.box.p-left-n,
+.box.p-horizontal-n {
+  padding-inline-start: var(--space-none-xk6qzf, 0px);
+}
+
+.box.p-xxxs {
+  padding-block: var(--space-scaled-xxxs-oo06c7, 2px);
+  padding-inline: var(--space-xxxs-pajhad, 2px);
+}
+
+.box.p-top-xxxs,
+.box.p-vertical-xxxs {
+  padding-block-start: var(--space-scaled-xxxs-oo06c7, 2px);
+}
+
+.box.p-right-xxxs,
+.box.p-horizontal-xxxs {
+  padding-inline-end: var(--space-xxxs-pajhad, 2px);
+}
+
+.box.p-bottom-xxxs,
+.box.p-vertical-xxxs {
+  padding-block-end: var(--space-scaled-xxxs-oo06c7, 2px);
+}
+
+.box.p-left-xxxs,
+.box.p-horizontal-xxxs {
+  padding-inline-start: var(--space-xxxs-pajhad, 2px);
+}
+
+.box.p-xxs {
+  padding-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  padding-inline: var(--space-xxs-hwfkai, 4px);
+}
+
+.box.p-top-xxs,
+.box.p-vertical-xxs {
+  padding-block-start: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+
+.box.p-right-xxs,
+.box.p-horizontal-xxs {
+  padding-inline-end: var(--space-xxs-hwfkai, 4px);
+}
+
+.box.p-bottom-xxs,
+.box.p-vertical-xxs {
+  padding-block-end: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+
+.box.p-left-xxs,
+.box.p-horizontal-xxs {
+  padding-inline-start: var(--space-xxs-hwfkai, 4px);
+}
+
+.box.p-xs {
+  padding-block: var(--space-scaled-xs-xwoogq, 8px);
+  padding-inline: var(--space-xs-ymlm0b, 8px);
+}
+
+.box.p-top-xs,
+.box.p-vertical-xs {
+  padding-block-start: var(--space-scaled-xs-xwoogq, 8px);
+}
+
+.box.p-right-xs,
+.box.p-horizontal-xs {
+  padding-inline-end: var(--space-xs-ymlm0b, 8px);
+}
+
+.box.p-bottom-xs,
+.box.p-vertical-xs {
+  padding-block-end: var(--space-scaled-xs-xwoogq, 8px);
+}
+
+.box.p-left-xs,
+.box.p-horizontal-xs {
+  padding-inline-start: var(--space-xs-ymlm0b, 8px);
+}
+
+.box.p-s {
+  padding-block: var(--space-scaled-s-8ozaad, 12px);
+  padding-inline: var(--space-s-tvghoh, 12px);
+}
+
+.box.p-top-s,
+.box.p-vertical-s {
+  padding-block-start: var(--space-scaled-s-8ozaad, 12px);
+}
+
+.box.p-right-s,
+.box.p-horizontal-s {
+  padding-inline-end: var(--space-s-tvghoh, 12px);
+}
+
+.box.p-bottom-s,
+.box.p-vertical-s {
+  padding-block-end: var(--space-scaled-s-8ozaad, 12px);
+}
+
+.box.p-left-s,
+.box.p-horizontal-s {
+  padding-inline-start: var(--space-s-tvghoh, 12px);
+}
+
+.box.p-m {
+  padding-block: var(--space-scaled-m-m892r9, 16px);
+  padding-inline: var(--space-m-dsumyt, 16px);
+}
+
+.box.p-top-m,
+.box.p-vertical-m {
+  padding-block-start: var(--space-scaled-m-m892r9, 16px);
+}
+
+.box.p-right-m,
+.box.p-horizontal-m {
+  padding-inline-end: var(--space-m-dsumyt, 16px);
+}
+
+.box.p-bottom-m,
+.box.p-vertical-m {
+  padding-block-end: var(--space-scaled-m-m892r9, 16px);
+}
+
+.box.p-left-m,
+.box.p-horizontal-m {
+  padding-inline-start: var(--space-m-dsumyt, 16px);
+}
+
+.box.p-l {
+  padding-block: var(--space-scaled-l-sej05l, 20px);
+  padding-inline: var(--space-l-2ud1p3, 20px);
+}
+
+.box.p-top-l,
+.box.p-vertical-l {
+  padding-block-start: var(--space-scaled-l-sej05l, 20px);
+}
+
+.box.p-right-l,
+.box.p-horizontal-l {
+  padding-inline-end: var(--space-l-2ud1p3, 20px);
+}
+
+.box.p-bottom-l,
+.box.p-vertical-l {
+  padding-block-end: var(--space-scaled-l-sej05l, 20px);
+}
+
+.box.p-left-l,
+.box.p-horizontal-l {
+  padding-inline-start: var(--space-l-2ud1p3, 20px);
+}
+
+.box.p-xl {
+  padding-block: var(--space-scaled-xl-dunxp5, 24px);
+  padding-inline: var(--space-xl-jfy3x4, 24px);
+}
+
+.box.p-top-xl,
+.box.p-vertical-xl {
+  padding-block-start: var(--space-scaled-xl-dunxp5, 24px);
+}
+
+.box.p-right-xl,
+.box.p-horizontal-xl {
+  padding-inline-end: var(--space-xl-jfy3x4, 24px);
+}
+
+.box.p-bottom-xl,
+.box.p-vertical-xl {
+  padding-block-end: var(--space-scaled-xl-dunxp5, 24px);
+}
+
+.box.p-left-xl,
+.box.p-horizontal-xl {
+  padding-inline-start: var(--space-xl-jfy3x4, 24px);
+}
+
+.box.p-xxl {
+  padding-block: var(--space-scaled-xxl-6wgq96, 32px);
+  padding-inline: var(--space-xxl-32srm4, 32px);
+}
+
+.box.p-top-xxl,
+.box.p-vertical-xxl {
+  padding-block-start: var(--space-scaled-xxl-6wgq96, 32px);
+}
+
+.box.p-right-xxl,
+.box.p-horizontal-xxl {
+  padding-inline-end: var(--space-xxl-32srm4, 32px);
+}
+
+.box.p-bottom-xxl,
+.box.p-vertical-xxl {
+  padding-block-end: var(--space-scaled-xxl-6wgq96, 32px);
+}
+
+.box.p-left-xxl,
+.box.p-horizontal-xxl {
+  padding-inline-start: var(--space-xxl-32srm4, 32px);
+}
+
+.box.p-xxxl {
+  padding-block: var(--space-scaled-xxxl-hwoy7j, 40px);
+  padding-inline: var(--space-xxxl-aut1u7, 40px);
+}
+
+.box.p-top-xxxl,
+.box.p-vertical-xxxl {
+  padding-block-start: var(--space-scaled-xxxl-hwoy7j, 40px);
+}
+
+.box.p-right-xxxl,
+.box.p-horizontal-xxxl {
+  padding-inline-end: var(--space-xxxl-aut1u7, 40px);
+}
+
+.box.p-bottom-xxxl,
+.box.p-vertical-xxxl {
+  padding-block-end: var(--space-scaled-xxxl-hwoy7j, 40px);
+}
+
+.box.p-left-xxxl,
+.box.p-horizontal-xxxl {
+  padding-inline-start: var(--space-xxxl-aut1u7, 40px);
+}
+
+.box.m-n {
+  margin-block: var(--space-scaled-none-nfyouv, 0px);
+  margin-inline: var(--space-none-xk6qzf, 0px);
+}
+
+.box.m-top-n,
+.box.m-vertical-n {
+  margin-block-start: var(--space-scaled-none-nfyouv, 0px);
+}
+
+.box.m-right-n,
+.box.m-horizontal-n {
+  margin-inline-end: var(--space-none-xk6qzf, 0px);
+}
+
+.box.m-bottom-n,
+.box.m-vertical-n {
+  margin-block-end: var(--space-scaled-none-nfyouv, 0px);
+}
+
+.box.m-left-n,
+.box.m-horizontal-n {
+  margin-inline-start: var(--space-none-xk6qzf, 0px);
+}
+
+.box.m-xxxs {
+  margin-block: var(--space-scaled-xxxs-oo06c7, 2px);
+  margin-inline: var(--space-xxxs-pajhad, 2px);
+}
+
+.box.m-top-xxxs,
+.box.m-vertical-xxxs {
+  margin-block-start: var(--space-scaled-xxxs-oo06c7, 2px);
+}
+
+.box.m-right-xxxs,
+.box.m-horizontal-xxxs {
+  margin-inline-end: var(--space-xxxs-pajhad, 2px);
+}
+
+.box.m-bottom-xxxs,
+.box.m-vertical-xxxs {
+  margin-block-end: var(--space-scaled-xxxs-oo06c7, 2px);
+}
+
+.box.m-left-xxxs,
+.box.m-horizontal-xxxs {
+  margin-inline-start: var(--space-xxxs-pajhad, 2px);
+}
+
+.box.m-xxs {
+  margin-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  margin-inline: var(--space-xxs-hwfkai, 4px);
+}
+
+.box.m-top-xxs,
+.box.m-vertical-xxs {
+  margin-block-start: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+
+.box.m-right-xxs,
+.box.m-horizontal-xxs {
+  margin-inline-end: var(--space-xxs-hwfkai, 4px);
+}
+
+.box.m-bottom-xxs,
+.box.m-vertical-xxs {
+  margin-block-end: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+
+.box.m-left-xxs,
+.box.m-horizontal-xxs {
+  margin-inline-start: var(--space-xxs-hwfkai, 4px);
+}
+
+.box.m-xs {
+  margin-block: var(--space-scaled-xs-xwoogq, 8px);
+  margin-inline: var(--space-xs-ymlm0b, 8px);
+}
+
+.box.m-top-xs,
+.box.m-vertical-xs {
+  margin-block-start: var(--space-scaled-xs-xwoogq, 8px);
+}
+
+.box.m-right-xs,
+.box.m-horizontal-xs {
+  margin-inline-end: var(--space-xs-ymlm0b, 8px);
+}
+
+.box.m-bottom-xs,
+.box.m-vertical-xs {
+  margin-block-end: var(--space-scaled-xs-xwoogq, 8px);
+}
+
+.box.m-left-xs,
+.box.m-horizontal-xs {
+  margin-inline-start: var(--space-xs-ymlm0b, 8px);
+}
+
+.box.m-s {
+  margin-block: var(--space-scaled-s-8ozaad, 12px);
+  margin-inline: var(--space-s-tvghoh, 12px);
+}
+
+.box.m-top-s,
+.box.m-vertical-s {
+  margin-block-start: var(--space-scaled-s-8ozaad, 12px);
+}
+
+.box.m-right-s,
+.box.m-horizontal-s {
+  margin-inline-end: var(--space-s-tvghoh, 12px);
+}
+
+.box.m-bottom-s,
+.box.m-vertical-s {
+  margin-block-end: var(--space-scaled-s-8ozaad, 12px);
+}
+
+.box.m-left-s,
+.box.m-horizontal-s {
+  margin-inline-start: var(--space-s-tvghoh, 12px);
+}
+
+.box.m-m {
+  margin-block: var(--space-scaled-m-m892r9, 16px);
+  margin-inline: var(--space-m-dsumyt, 16px);
+}
+
+.box.m-top-m,
+.box.m-vertical-m {
+  margin-block-start: var(--space-scaled-m-m892r9, 16px);
+}
+
+.box.m-right-m,
+.box.m-horizontal-m {
+  margin-inline-end: var(--space-m-dsumyt, 16px);
+}
+
+.box.m-bottom-m,
+.box.m-vertical-m {
+  margin-block-end: var(--space-scaled-m-m892r9, 16px);
+}
+
+.box.m-left-m,
+.box.m-horizontal-m {
+  margin-inline-start: var(--space-m-dsumyt, 16px);
+}
+
+.box.m-l {
+  margin-block: var(--space-scaled-l-sej05l, 20px);
+  margin-inline: var(--space-l-2ud1p3, 20px);
+}
+
+.box.m-top-l,
+.box.m-vertical-l {
+  margin-block-start: var(--space-scaled-l-sej05l, 20px);
+}
+
+.box.m-right-l,
+.box.m-horizontal-l {
+  margin-inline-end: var(--space-l-2ud1p3, 20px);
+}
+
+.box.m-bottom-l,
+.box.m-vertical-l {
+  margin-block-end: var(--space-scaled-l-sej05l, 20px);
+}
+
+.box.m-left-l,
+.box.m-horizontal-l {
+  margin-inline-start: var(--space-l-2ud1p3, 20px);
+}
+
+.box.m-xl {
+  margin-block: var(--space-scaled-xl-dunxp5, 24px);
+  margin-inline: var(--space-xl-jfy3x4, 24px);
+}
+
+.box.m-top-xl,
+.box.m-vertical-xl {
+  margin-block-start: var(--space-scaled-xl-dunxp5, 24px);
+}
+
+.box.m-right-xl,
+.box.m-horizontal-xl {
+  margin-inline-end: var(--space-xl-jfy3x4, 24px);
+}
+
+.box.m-bottom-xl,
+.box.m-vertical-xl {
+  margin-block-end: var(--space-scaled-xl-dunxp5, 24px);
+}
+
+.box.m-left-xl,
+.box.m-horizontal-xl {
+  margin-inline-start: var(--space-xl-jfy3x4, 24px);
+}
+
+.box.m-xxl {
+  margin-block: var(--space-scaled-xxl-6wgq96, 32px);
+  margin-inline: var(--space-xxl-32srm4, 32px);
+}
+
+.box.m-top-xxl,
+.box.m-vertical-xxl {
+  margin-block-start: var(--space-scaled-xxl-6wgq96, 32px);
+}
+
+.box.m-right-xxl,
+.box.m-horizontal-xxl {
+  margin-inline-end: var(--space-xxl-32srm4, 32px);
+}
+
+.box.m-bottom-xxl,
+.box.m-vertical-xxl {
+  margin-block-end: var(--space-scaled-xxl-6wgq96, 32px);
+}
+
+.box.m-left-xxl,
+.box.m-horizontal-xxl {
+  margin-inline-start: var(--space-xxl-32srm4, 32px);
+}
+
+.box.m-xxxl {
+  margin-block: var(--space-scaled-xxxl-hwoy7j, 40px);
+  margin-inline: var(--space-xxxl-aut1u7, 40px);
+}
+
+.box.m-top-xxxl,
+.box.m-vertical-xxxl {
+  margin-block-start: var(--space-scaled-xxxl-hwoy7j, 40px);
+}
+
+.box.m-right-xxxl,
+.box.m-horizontal-xxxl {
+  margin-inline-end: var(--space-xxxl-aut1u7, 40px);
+}
+
+.box.m-bottom-xxxl,
+.box.m-vertical-xxxl {
+  margin-block-end: var(--space-scaled-xxxl-hwoy7j, 40px);
+}
+
+.box.m-left-xxxl,
+.box.m-horizontal-xxxl {
+  margin-inline-start: var(--space-xxxl-aut1u7, 40px);
+}
+
+.box.d-block {
+  display: block;
+}
+.box.d-inline {
+  display: inline;
+}
+.box.d-inline-block {
+  display: inline-block;
+}
+.box.d-none {
+  display: none;
+}
+
+.f-left {
+  float: inline-start;
+}
+
+.f-right {
+  float: inline-end;
+}
+
+.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;
+}
+`;
+
+// src/box/internal.ts
+var VARIANT_TAG_MAP = {
+  div: "div",
+  span: "span",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  p: "p",
+  strong: "strong",
+  small: "small",
+  code: "code",
+  pre: "pre",
+  samp: "samp",
+  "awsui-key-label": "div",
+  "awsui-gen-ai-label": "div",
+  "awsui-value-large": "span",
+  "awsui-inline-code": "code"
+};
+function variantCssClass(variant) {
+  return variant.replace(/^awsui-/, "") + "-variant";
+}
+function isSpacingObject(value) {
+  return typeof value === "object" && value !== null;
+}
+function spacingClasses(prefix, value) {
+  if (!value) return {};
+  if (typeof value === "string") {
+    return { [`${prefix}-${value}`]: true };
+  }
+  if (isSpacingObject(value)) {
+    const classes = {};
+    const { top, right, bottom, left, horizontal, vertical } = value;
+    if (top) classes[`${prefix}-top-${top}`] = true;
+    if (right) classes[`${prefix}-right-${right}`] = true;
+    if (bottom) classes[`${prefix}-bottom-${bottom}`] = true;
+    if (left) classes[`${prefix}-left-${left}`] = true;
+    if (horizontal) classes[`${prefix}-horizontal-${horizontal}`] = true;
+    if (vertical) classes[`${prefix}-vertical-${vertical}`] = true;
+    return classes;
+  }
+  return {};
+}
+var hostStyles10 = css24`
+  :host { display: block; }
+  :host([display="inline"]) { display: inline; }
+  :host([display="inline-block"]) { display: inline-block; }
+  :host([display="none"]) { display: none; }
+`;
+var CsBoxInternal = class extends LitElement11 {
+  constructor() {
+    super(...arguments);
+    this.variant = "div";
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles10, hostStyles10];
+  }
+  render() {
+    const tag = this.tagOverride || VARIANT_TAG_MAP[this.variant] || "div";
+    const classes = {
+      "box": true,
+      [variantCssClass(this.variant)]: true,
+      ...this.display ? { [`d-${this.display}`]: true } : {},
+      ...this.textAlign ? { [`t-${this.textAlign}`]: true } : {},
+      ...this.float ? { [`f-${this.float}`]: true } : {},
+      ...this.fontSize ? { [`font-size-${this.fontSize}`]: true } : {},
+      ...this.fontWeight ? { [`font-weight-${this.fontWeight}`]: true } : {},
+      ...this.color ? { [`color-${this.color}`]: true } : {},
+      ...spacingClasses("m", this.margin),
+      ...spacingClasses("p", this.padding)
+    };
+    return this._renderTag(tag, classes);
+  }
+  _renderTag(tag, classes) {
+    switch (tag) {
+      case "div":
+        return html11`<div class=${classMap10(classes)}><slot></slot></div>`;
+      case "span":
+        return html11`<span class=${classMap10(classes)}><slot></slot></span>`;
+      case "h1":
+        return html11`<h1 class=${classMap10(classes)}><slot></slot></h1>`;
+      case "h2":
+        return html11`<h2 class=${classMap10(classes)}><slot></slot></h2>`;
+      case "h3":
+        return html11`<h3 class=${classMap10(classes)}><slot></slot></h3>`;
+      case "h4":
+        return html11`<h4 class=${classMap10(classes)}><slot></slot></h4>`;
+      case "h5":
+        return html11`<h5 class=${classMap10(classes)}><slot></slot></h5>`;
+      case "p":
+        return html11`<p class=${classMap10(classes)}><slot></slot></p>`;
+      case "strong":
+        return html11`<strong class=${classMap10(classes)}><slot></slot></strong>`;
+      case "small":
+        return html11`<small class=${classMap10(classes)}><slot></slot></small>`;
+      case "code":
+        return html11`<code class=${classMap10(classes)}><slot></slot></code>`;
+      case "pre":
+        return html11`<pre class=${classMap10(classes)}><slot></slot></pre>`;
+      case "samp":
+        return html11`<samp class=${classMap10(classes)}><slot></slot></samp>`;
+      default:
+        return html11`<div class=${classMap10(classes)}><slot></slot></div>`;
+    }
+  }
+};
+__decorateClass([
+  property12({ type: String })
+], CsBoxInternal.prototype, "variant", 2);
+__decorateClass([
+  property12({ type: String })
+], CsBoxInternal.prototype, "tagOverride", 2);
+__decorateClass([
+  property12({ type: String, reflect: true })
+], CsBoxInternal.prototype, "display", 2);
+__decorateClass([
+  property12({ attribute: false })
+], CsBoxInternal.prototype, "margin", 2);
+__decorateClass([
+  property12({ attribute: false })
+], CsBoxInternal.prototype, "padding", 2);
+__decorateClass([
+  property12({ type: String })
+], CsBoxInternal.prototype, "textAlign", 2);
+__decorateClass([
+  property12({ type: String })
+], CsBoxInternal.prototype, "float", 2);
+__decorateClass([
+  property12({ type: String })
+], CsBoxInternal.prototype, "fontSize", 2);
+__decorateClass([
+  property12({ type: String })
+], CsBoxInternal.prototype, "fontWeight", 2);
+__decorateClass([
+  property12({ type: String })
+], CsBoxInternal.prototype, "color", 2);
+
+// src/box/index.ts
+var CsBox = class extends CsBoxInternal {
+};
+customElements.define("cs-box", CsBox);
+
+// src/grid/internal.ts
+import { css as css26, html as html12, LitElement as LitElement12 } from "lit";
+import { property as property13, state } from "lit/decorators.js";
+import { classMap as classMap11 } from "lit/directives/class-map.js";
+
+// src/grid/styles.ts
+import { css as css25 } from "lit";
+var componentStyles11 = css25`
+.grid {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  display: flex;
+  flex-wrap: wrap;
+  margin-block: calc(var(--space-grid-gutter-whc3jp, 20px) / -2);
+  margin-inline: calc(var(--space-grid-gutter-whc3jp, 20px) / -2);
+  pointer-events: none;
+}
+.grid.no-gutters {
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.grid-column {
+  box-sizing: border-box;
+  position: relative;
+  padding-block: calc(var(--space-grid-gutter-whc3jp, 20px) / 2);
+  padding-inline: calc(var(--space-grid-gutter-whc3jp, 20px) / 2);
+  display: flex;
+}
+.grid.no-gutters > .grid-column {
+  padding-block: 0;
+  padding-inline: 0;
+}
+.grid-column.colspan-1 {
+  flex: 0 0 8.3333333333%;
+  max-inline-size: 8.3333333333%;
+}
+.grid-column.push-1 {
+  inset-inline-start: 8.3333333333%;
+}
+.grid-column.pull-1 {
+  inset-inline-end: 8.3333333333%;
+}
+.grid-column.colspan-2 {
+  flex: 0 0 16.6666666667%;
+  max-inline-size: 16.6666666667%;
+}
+.grid-column.push-2 {
+  inset-inline-start: 16.6666666667%;
+}
+.grid-column.pull-2 {
+  inset-inline-end: 16.6666666667%;
+}
+.grid-column.colspan-3 {
+  flex: 0 0 25%;
+  max-inline-size: 25%;
+}
+.grid-column.push-3 {
+  inset-inline-start: 25%;
+}
+.grid-column.pull-3 {
+  inset-inline-end: 25%;
+}
+.grid-column.colspan-4 {
+  flex: 0 0 33.3333333333%;
+  max-inline-size: 33.3333333333%;
+}
+.grid-column.push-4 {
+  inset-inline-start: 33.3333333333%;
+}
+.grid-column.pull-4 {
+  inset-inline-end: 33.3333333333%;
+}
+.grid-column.colspan-5 {
+  flex: 0 0 41.6666666667%;
+  max-inline-size: 41.6666666667%;
+}
+.grid-column.push-5 {
+  inset-inline-start: 41.6666666667%;
+}
+.grid-column.pull-5 {
+  inset-inline-end: 41.6666666667%;
+}
+.grid-column.colspan-6 {
+  flex: 0 0 50%;
+  max-inline-size: 50%;
+}
+.grid-column.push-6 {
+  inset-inline-start: 50%;
+}
+.grid-column.pull-6 {
+  inset-inline-end: 50%;
+}
+.grid-column.colspan-7 {
+  flex: 0 0 58.3333333333%;
+  max-inline-size: 58.3333333333%;
+}
+.grid-column.push-7 {
+  inset-inline-start: 58.3333333333%;
+}
+.grid-column.pull-7 {
+  inset-inline-end: 58.3333333333%;
+}
+.grid-column.colspan-8 {
+  flex: 0 0 66.6666666667%;
+  max-inline-size: 66.6666666667%;
+}
+.grid-column.push-8 {
+  inset-inline-start: 66.6666666667%;
+}
+.grid-column.pull-8 {
+  inset-inline-end: 66.6666666667%;
+}
+.grid-column.colspan-9 {
+  flex: 0 0 75%;
+  max-inline-size: 75%;
+}
+.grid-column.push-9 {
+  inset-inline-start: 75%;
+}
+.grid-column.pull-9 {
+  inset-inline-end: 75%;
+}
+.grid-column.colspan-10 {
+  flex: 0 0 83.3333333333%;
+  max-inline-size: 83.3333333333%;
+}
+.grid-column.push-10 {
+  inset-inline-start: 83.3333333333%;
+}
+.grid-column.pull-10 {
+  inset-inline-end: 83.3333333333%;
+}
+.grid-column.colspan-11 {
+  flex: 0 0 91.6666666667%;
+  max-inline-size: 91.6666666667%;
+}
+.grid-column.push-11 {
+  inset-inline-start: 91.6666666667%;
+}
+.grid-column.pull-11 {
+  inset-inline-end: 91.6666666667%;
+}
+.grid-column.colspan-12 {
+  flex: 0 0 100%;
+  max-inline-size: 100%;
+}
+.grid-column.push-12 {
+  inset-inline-start: 100%;
+}
+.grid-column.pull-12 {
+  inset-inline-end: 100%;
+}
+.grid-column.push-0 {
+  inset-inline-start: auto;
+}
+.grid-column.pull-0 {
+  inset-inline-end: auto;
+}
+.grid-column.offset-1 {
+  margin-inline-start: 8.3333333333%;
+}
+.grid-column.offset-2 {
+  margin-inline-start: 16.6666666667%;
+}
+.grid-column.offset-3 {
+  margin-inline-start: 25%;
+}
+.grid-column.offset-4 {
+  margin-inline-start: 33.3333333333%;
+}
+.grid-column.offset-5 {
+  margin-inline-start: 41.6666666667%;
+}
+.grid-column.offset-6 {
+  margin-inline-start: 50%;
+}
+.grid-column.offset-7 {
+  margin-inline-start: 58.3333333333%;
+}
+.grid-column.offset-8 {
+  margin-inline-start: 66.6666666667%;
+}
+.grid-column.offset-9 {
+  margin-inline-start: 75%;
+}
+.grid-column.offset-10 {
+  margin-inline-start: 83.3333333333%;
+}
+.grid-column.offset-11 {
+  margin-inline-start: 91.6666666667%;
+}
+
+.restore-pointer-events {
+  pointer-events: auto;
+  inline-size: 100%;
+}
+`;
+
+// src/grid/internal.ts
+function resolveNumericValue(value, defaultValue) {
+  if (value === void 0) return defaultValue;
+  if (typeof value === "number") return value;
+  return value.default ?? defaultValue;
+}
+var hostStyles11 = css26`:host { display: block; }`;
+var CsGridInternal = class extends LitElement12 {
+  constructor() {
+    super(...arguments);
+    this.disableGutters = false;
+    this._childCount = 0;
+    this._slotRef = null;
+    this._onSlotChange = () => {
+      if (!this._slotRef) return;
+      const assigned = this._slotRef.assignedElements({ flatten: true });
+      this._childCount = assigned.length;
+      this._applyGridStyles(assigned);
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles11, hostStyles11];
+  }
+  firstUpdated() {
+    this._slotRef = this.renderRoot.querySelector("slot");
+    if (this._slotRef) {
+      this._slotRef.addEventListener("slotchange", this._onSlotChange);
+      this._onSlotChange();
+    }
+  }
+  updated() {
+    if (this._slotRef) {
+      const assigned = this._slotRef.assignedElements({ flatten: true });
+      this._applyGridStyles(assigned);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._slotRef) {
+      this._slotRef.removeEventListener("slotchange", this._onSlotChange);
+    }
+  }
+  _applyGridStyles(children) {
+    const defs = this.gridDefinition ?? [];
+    children.forEach((child, index) => {
+      const def = defs[index];
+      const el = child;
+      if (!def) {
+        el.style.gridColumn = "";
+        return;
+      }
+      const colspan = resolveNumericValue(def.colspan, 12);
+      const offset = resolveNumericValue(def.offset, 0);
+      if (offset > 0) {
+        el.style.gridColumn = `${offset + 1} / span ${colspan}`;
+      } else {
+        el.style.gridColumn = `span ${colspan}`;
+      }
+    });
+  }
+  render() {
+    void this._childCount;
+    const classes = {
+      "grid": true,
+      "no-gutters": this.disableGutters
+    };
+    return html12`
+      <div class=${classMap11(classes)}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property13({ attribute: false })
+], CsGridInternal.prototype, "gridDefinition", 2);
+__decorateClass([
+  property13({ type: Boolean })
+], CsGridInternal.prototype, "disableGutters", 2);
+__decorateClass([
+  state()
+], CsGridInternal.prototype, "_childCount", 2);
+
+// src/grid/index.ts
+var CsGrid = class extends CsGridInternal {
+};
+customElements.define("cs-grid", CsGrid);
+
+// src/space-between/internal.ts
+import { css as css28, html as html13, LitElement as LitElement13 } from "lit";
+import { property as property14 } from "lit/decorators.js";
+import { classMap as classMap12 } from "lit/directives/class-map.js";
+
+// src/space-between/styles.ts
+import { css as css27 } from "lit";
+var componentStyles12 = css27`
+.root {
+  display: flex;
+}
+
+.child:empty {
+  display: none;
+}
+
+/*
+ * Horizontal variant
+ */
+.horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.horizontal-xxxs {
+  gap: var(--space-xxxs-pajhad, 2px);
+}
+.horizontal-xxs {
+  gap: var(--space-xxs-hwfkai, 4px);
+}
+.horizontal-xs {
+  gap: var(--space-xs-ymlm0b, 8px);
+}
+.horizontal-s {
+  gap: var(--space-s-tvghoh, 12px);
+}
+.horizontal-m {
+  gap: var(--space-m-dsumyt, 16px);
+}
+.horizontal-l {
+  gap: var(--space-l-2ud1p3, 20px);
+}
+.horizontal-xl {
+  gap: var(--space-xl-jfy3x4, 24px);
+}
+.horizontal-xxl {
+  gap: var(--space-xxl-32srm4, 32px);
+}
+
+/*
+ * Vertical variant
+ */
+.vertical {
+  flex-direction: column;
+}
+.vertical-xxxs {
+  row-gap: var(--space-xxxs-pajhad, 2px);
+}
+.vertical-xxs {
+  row-gap: var(--space-xxs-hwfkai, 4px);
+}
+.vertical-xs {
+  row-gap: var(--space-xs-ymlm0b, 8px);
+}
+.vertical-s {
+  row-gap: var(--space-scaled-s-8ozaad, 12px);
+}
+.vertical-m {
+  row-gap: var(--space-scaled-m-m892r9, 16px);
+}
+.vertical-l {
+  row-gap: var(--space-scaled-l-sej05l, 20px);
+}
+.vertical-xl {
+  row-gap: var(--space-scaled-xl-dunxp5, 24px);
+}
+.vertical-xxl {
+  row-gap: var(--space-scaled-xxl-6wgq96, 32px);
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-start {
+  align-items: start;
+}
+
+.align-end {
+  align-items: end;
+}
+`;
+
+// src/space-between/internal.ts
+var hostStyles12 = css28`:host { display: block; }`;
+var CsSpaceBetweenInternal = class extends LitElement13 {
+  constructor() {
+    super(...arguments);
+    this.direction = "vertical";
+    this.size = "s";
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles12, hostStyles12];
+  }
+  render() {
+    const classes = {
+      "root": true,
+      [this.direction]: true,
+      [`${this.direction}-${this.size}`]: true,
+      "align-center": this.alignItems === "center",
+      "align-start": this.alignItems === "start",
+      "align-end": this.alignItems === "end"
+    };
+    return html13`
+      <div class=${classMap12(classes)}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property14({ type: String })
+], CsSpaceBetweenInternal.prototype, "direction", 2);
+__decorateClass([
+  property14({ type: String })
+], CsSpaceBetweenInternal.prototype, "size", 2);
+__decorateClass([
+  property14({ type: String })
+], CsSpaceBetweenInternal.prototype, "alignItems", 2);
+
+// src/space-between/index.ts
+var CsSpaceBetween = class extends CsSpaceBetweenInternal {
+};
+customElements.define("cs-space-between", CsSpaceBetween);
+
+// src/text-content/internal.ts
+import { css as css30, html as html14, LitElement as LitElement14 } from "lit";
+
+// src/text-content/styles.ts
+import { css as css29 } from "lit";
+var componentStyles13 = css29`
+.text-content {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+
+
+}
+.text-content h1,
+.text-content h2,
+.text-content h3,
+.text-content h4,
+.text-content h5,
+.text-content p {
+  font-family: inherit;
+  font-weight: normal;
+  text-decoration: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: var(--space-xxs-hwfkai, 4px);
+  padding-inline: 0;
+}
+.text-content h1,
+.text-content h2,
+.text-content h3,
+.text-content h4,
+.text-content h5 {
+  color: var(--color-text-heading-default-izpp46, #0f141a);
+}
+.text-content h1 {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-xl-wvkbur, 24px);
+  line-height: var(--line-height-heading-xl-hko6p0, 30px);
+  letter-spacing: var(--letter-spacing-heading-xl-ckkb6u, -0.02em);
+  font-weight: var(--font-weight-heading-xl-u3m4we, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.text-content h2 {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-l-vnacx6, 20px);
+  line-height: var(--line-height-heading-l-mg5bx6, 24px);
+  letter-spacing: var(--letter-spacing-heading-l-5v6ibv, -0.015em);
+  font-weight: var(--font-weight-heading-l-0t6dwc, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.text-content h3 {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-m-170yiy, 18px);
+  line-height: var(--line-height-heading-m-uoaqdh, 22px);
+  letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
+  font-weight: var(--font-weight-heading-m-zf82dr, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.text-content h4 {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-s-zp08en, 16px);
+  line-height: var(--line-height-heading-s-hmi4vc, 20px);
+  letter-spacing: var(--letter-spacing-heading-s-4st9ep, -0.005em);
+  font-weight: var(--font-weight-heading-s-lcx0ai, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.text-content h5 {
+  font-family: var(--font-family-heading-ugphat, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-size: var(--font-size-heading-xs-j8yzxv, 14px);
+  line-height: var(--line-height-heading-xs-q9j004, 18px);
+  letter-spacing: var(--letter-spacing-heading-xs-fgog7a, normal);
+  font-weight: var(--font-weight-heading-xs-wqqpne, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+}
+.text-content b,
+.text-content strong {
+  font-weight: 700;
+}
+.text-content p {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: inherit;
+}
+.text-content small {
+  display: inline-block;
+  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);
+  color: var(--color-text-small-m1tr70, #656871);
+}
+.text-content small a {
+  font-size: inherit;
+  text-underline-offset: 0.25em;
+  text-decoration-thickness: 1px;
+  color: var(--awsui-style-color-default-6b9ypa, var(--color-text-link-default-hude44, #006ce0));
+  font-weight: inherit;
+  letter-spacing: normal;
+  text-decoration-line: underline;
+  text-decoration-color: currentColor;
+  transition-property: color, -webkit-text-decoration;
+  transition-property: color, text-decoration;
+  transition-property: color, text-decoration, -webkit-text-decoration;
+  transition-duration: var(--motion-duration-refresh-only-medium-5rbn3k, 165ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  .text-content small a {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .text-content small a, .awsui-mode-entering .text-content small a {
+  animation: none;
+  transition: none;
+}
+.text-content small a:hover {
+  cursor: pointer;
+  color: var(--awsui-style-color-hover-6b9ypa, var(--color-text-link-hover-2hfec2, #002b66));
+}
+.text-content small a:focus {
+  outline: none;
+}
+.text-content small a:active {
+  color: var(--awsui-style-color-active-6b9ypa, var(--color-text-link-hover-2hfec2, #002b66));
+}
+.text-content small a:active, .text-content small a:focus, .text-content small a:hover {
+  text-decoration-line: underline;
+  text-decoration-color: currentColor;
+}
+.text-content code,
+.text-content pre,
+.text-content samp {
+  font-family: var(--font-family-monospace-q47m7k, Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace);
+  background: transparent;
+}
+.text-content code {
+  font-size: var(--font-size-body-s-smc8cv, 12px);
+  line-height: var(--line-height-body-s-nu5hx1, 16px);
+  letter-spacing: var(--letter-spacing-body-s-gq78ok, 0.005em);
+}
+.text-content a {
+  text-underline-offset: 0.25em;
+  text-decoration-thickness: 1px;
+  color: var(--awsui-style-color-default-6b9ypa, var(--color-text-link-default-hude44, #006ce0));
+  font-weight: inherit;
+  letter-spacing: normal;
+  text-decoration-line: underline;
+  text-decoration-color: currentColor;
+  transition-property: color, -webkit-text-decoration;
+  transition-property: color, text-decoration;
+  transition-property: color, text-decoration, -webkit-text-decoration;
+  transition-duration: var(--motion-duration-refresh-only-medium-5rbn3k, 165ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  .text-content a {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .text-content a, .awsui-mode-entering .text-content a {
+  animation: none;
+  transition: none;
+}
+.text-content a:hover {
+  cursor: pointer;
+  color: var(--awsui-style-color-hover-6b9ypa, var(--color-text-link-hover-2hfec2, #002b66));
+}
+.text-content a:focus {
+  outline: none;
+}
+.text-content a:active {
+  color: var(--awsui-style-color-active-6b9ypa, var(--color-text-link-hover-2hfec2, #002b66));
+}
+.text-content a:active, .text-content a:focus, .text-content a:hover {
+  text-decoration-line: underline;
+  text-decoration-color: currentColor;
+}
+.text-content a:focus {
+  outline: thin dotted;
+  outline: var(--border-link-focus-ring-outline-1p0hnu, 0);
+  outline-offset: 2px;
+  outline-color: var(--color-border-item-focused-uk47pl, #006ce0);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-39uvxr, 2px) var(--color-border-item-focused-uk47pl, #006ce0);
+}
+.text-content ul,
+.text-content ol {
+  padding-inline-start: var(--space-l-2ud1p3, 20px);
+  margin-block: var(--space-scaled-xs-xwoogq, 8px);
+  margin-inline: 0;
+  list-style-position: outside;
+}
+.text-content ul + ul,
+.text-content ul + ol,
+.text-content ul > li + ul,
+.text-content ul > li + li,
+.text-content ul > li + ol,
+.text-content ul > li > ul,
+.text-content ul > li > ol,
+.text-content ol + ul,
+.text-content ol + ol,
+.text-content ol > li + ul,
+.text-content ol > li + li,
+.text-content ol > li + ol,
+.text-content ol > li > ul,
+.text-content ol > li > ol {
+  padding-block-start: var(--space-scaled-xxs-pfm1nx, 4px);
+}
+.text-content ul > li > ul,
+.text-content ul > li > ol,
+.text-content ol > li > ul,
+.text-content ol > li > ol {
+  margin-block: 0;
+  margin-inline: 0;
+}
+`;
+
+// src/text-content/internal.ts
+var hostStyles13 = css30`:host { display: block; }`;
+var CsTextContentInternal = class extends LitElement14 {
+  static {
+    this.styles = [sharedStyles, componentStyles13, hostStyles13];
+  }
+  render() {
+    return html14`
+      <div class="text-content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+
+// src/text-content/index.ts
+var CsTextContent = class extends CsTextContentInternal {
+};
+customElements.define("cs-text-content", CsTextContent);
+
+// src/file-dropzone/internal.ts
+import { css as css32, html as html15, LitElement as LitElement15 } from "lit";
+import { state as state2 } from "lit/decorators.js";
+import { classMap as classMap13 } from "lit/directives/class-map.js";
+
+// src/file-dropzone/styles.ts
+import { css as css31 } from "lit";
+var componentStyles14 = css31`
+.root {
+  padding-block: var(--space-static-l-n53k41, 20px);
+  padding-inline: var(--space-static-l-n53k41, 20px);
+  border-start-start-radius: var(--border-radius-dropzone-eklq14, 12px);
+  border-start-end-radius: var(--border-radius-dropzone-eklq14, 12px);
+  border-end-start-radius: var(--border-radius-dropzone-eklq14, 12px);
+  border-end-end-radius: var(--border-radius-dropzone-eklq14, 12px);
+  color: var(--color-dropzone-text-default-djdnme, #424650);
+  background-color: var(--color-dropzone-background-default-7efhmb, #ffffff);
+  border-color: var(--color-dropzone-border-default-k648ha, #8c8c94);
+  border-block: 1px dashed var(--color-dropzone-border-default-k648ha, #8c8c94);
+  border-inline: 1px dashed var(--color-dropzone-border-default-k648ha, #8c8c94);
+}
+.root.hovered {
+  color: var(--color-dropzone-text-hover-asw3rt, #424650);
+  background-color: var(--color-dropzone-background-hover-mi8rlm, #f0fbff);
+  border-block: 1px dashed var(--color-dropzone-border-hover-otpag5, #002b66);
+  border-inline: 1px dashed var(--color-dropzone-border-hover-otpag5, #002b66);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-static-xxs-ns94dp, 4px);
+  align-items: center;
+  justify-content: center;
+}
+`;
+
+// src/file-dropzone/internal.ts
+var hostStyles14 = css32`:host { display: block; }`;
+var CsFileDropzoneInternal = class extends LitElement15 {
+  constructor() {
+    super(...arguments);
+    this._isDragging = false;
+    this._dragCounter = 0;
+    this._onDragEnter = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this._dragCounter++;
+      if (this._hasDragFiles(e)) {
+        this._isDragging = true;
+      }
+    };
+    this._onDragOver = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    this._onDragLeave = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this._dragCounter--;
+      if (this._dragCounter <= 0) {
+        this._dragCounter = 0;
+        this._isDragging = false;
+      }
+    };
+    this._onDrop = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this._dragCounter = 0;
+      this._isDragging = false;
+      const files = Array.from(e.dataTransfer?.files ?? []);
+      if (files.length > 0) {
+        const detail = { value: files };
+        fireNonCancelableEvent(this, "change", detail);
+      }
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles14, hostStyles14];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  _hasDragFiles(e) {
+    if (!e.dataTransfer) return false;
+    return Array.from(e.dataTransfer.types).includes("Files");
+  }
+  render() {
+    const classes = {
+      "root": true,
+      "hovered": this._isDragging
+    };
+    return html15`
+      <div
+        class=${classMap13(classes)}
+        role="button"
+        tabindex="0"
+        aria-label="Drop files here"
+        @dragenter=${this._onDragEnter}
+        @dragover=${this._onDragOver}
+        @dragleave=${this._onDragLeave}
+        @drop=${this._onDrop}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  state2()
+], CsFileDropzoneInternal.prototype, "_isDragging", 2);
+
+// src/file-dropzone/index.ts
+var CsFileDropzone = class extends CsFileDropzoneInternal {
+};
+customElements.define("cs-file-dropzone", CsFileDropzone);
+
+// src/anchor-navigation/internal.ts
+import { css as css34, html as html16, LitElement as LitElement16 } from "lit";
+import { property as property15, state as state3 } from "lit/decorators.js";
+import { classMap as classMap14 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined7 } from "lit/directives/if-defined.js";
+
+// src/anchor-navigation/styles.ts
+import { css as css33 } from "lit";
+var componentStyles15 = css33`
+.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;
+}
+
+.anchor-list {
+  list-style: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  position: relative;
+  text-indent: 0;
+}
+.anchor-list::before {
+  content: "";
+  background-color: var(--color-border-divider-default-nr68jt, #c6c6cd);
+  border-start-start-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
+  border-start-end-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
+  border-end-start-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
+  border-end-end-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
+  inset-block-end: -2px;
+  pointer-events: none;
+  position: absolute;
+  inset-block-start: -2px;
+  inline-size: 2px;
+}
+
+.anchor-item {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-secondary-yna5sb, #424650);
+  font-weight: 400;
+  margin-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  margin-inline: 0;
+  transition: var(--motion-duration-slow-zji5vl, 180ms);
+  transition-property: all;
+}
+@media (prefers-reduced-motion: reduce) {
+  .anchor-item {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .anchor-item, .awsui-mode-entering .anchor-item {
+  animation: none;
+  transition: none;
+}
+.anchor-item--active {
+  position: relative;
+}
+.anchor-item--active::before {
+  content: "";
+  background-color: var(--color-text-accent-n1kmht, #006ce0);
+  border-start-start-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
+  border-start-end-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
+  border-end-start-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
+  border-end-end-radius: var(--border-radius-tabs-focus-ring-o4qku1, 20px);
+  inset-block-end: -2px;
+  pointer-events: none;
+  position: absolute;
+  inset-block-start: -2px;
+  inline-size: 2px;
+}
+
+.anchor-link {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  align-items: baseline;
+  color: var(--color-text-body-secondary-yna5sb, #424650);
+  display: flex;
+  flex-direction: row;
+  font-weight: 400;
+  text-decoration: none;
+  transition: var(--motion-duration-slow-zji5vl, 180ms);
+  transition-property: all;
+}
+@media (prefers-reduced-motion: reduce) {
+  .anchor-link {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .anchor-link, .awsui-mode-entering .anchor-link {
+  animation: none;
+  transition: none;
+}
+:host-context([data-awsui-focus-visible=true]) .anchor-link:focus {
+  outline: thin dotted;
+  outline: var(--border-link-focus-ring-outline-1p0hnu, 0);
+  outline-offset: 2px;
+  outline-color: var(--color-border-item-focused-uk47pl, #006ce0);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
+  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-39uvxr, 2px) var(--color-border-item-focused-uk47pl, #006ce0);
+}
+.anchor-link:hover {
+  color: var(--color-text-accent-n1kmht, #006ce0);
+}
+.anchor-link:focus {
+  outline: none;
+}
+.anchor-link:hover, .anchor-link:focus {
+  text-decoration: none;
+}
+.anchor-link--active {
+  font-weight: var(--font-wayfinding-link-active-weight-ny4hup, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  color: var(--color-text-accent-n1kmht, #006ce0);
+}
+
+.anchor-link-text {
+  display: block;
+}
+
+.anchor-link-info {
+  margin-inline-start: var(--space-xs-ymlm0b, 8px);
+  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);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
+  font-weight: 700;
+  letter-spacing: 0.005em;
+  color: var(--color-text-link-default-hude44, #006ce0);
+}
+`;
+
+// src/anchor-navigation/internal.ts
+var hostStyles15 = css34`:host { display: block; }`;
+var CsAnchorNavigationInternal = class extends LitElement16 {
+  constructor() {
+    super(...arguments);
+    this.anchors = [];
+    this.scrollSpyOffset = 0;
+    this._observedHref = "";
+    this._observer = null;
+    this._sectionMap = /* @__PURE__ */ new Map();
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles15, hostStyles15];
+  }
+  get _isControlled() {
+    return this.activeHref !== void 0;
+  }
+  get _currentHref() {
+    return this._isControlled ? this.activeHref ?? "" : this._observedHref;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this._isControlled) {
+      this._setupScrollSpy();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._teardownScrollSpy();
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("activeHref")) {
+      if (this._isControlled) {
+        this._teardownScrollSpy();
+      } else {
+        this._setupScrollSpy();
+      }
+    }
+    if (changed.has("anchors") && !this._isControlled) {
+      this._teardownScrollSpy();
+      this._setupScrollSpy();
+    }
+  }
+  _setupScrollSpy() {
+    this._teardownScrollSpy();
+    const topMargin = this.scrollSpyOffset;
+    this._observer = new IntersectionObserver(
+      (entries) => this._handleIntersection(entries),
+      {
+        rootMargin: `-${topMargin}px 0px 0px 0px`,
+        threshold: [0, 0.1, 0.5, 1]
+      }
+    );
+    for (const anchor of this.anchors) {
+      const id = anchor.href.replace(/^#/, "");
+      const target = document.getElementById(id);
+      if (target) {
+        this._observer.observe(target);
+      }
+    }
+  }
+  _handleIntersection(entries) {
+    for (const entry of entries) {
+      this._sectionMap.set(entry.target.id, entry);
+    }
+    let topMostId = "";
+    let topMostY = Infinity;
+    for (const [id, entry] of this._sectionMap) {
+      if (entry.isIntersecting && entry.boundingClientRect.top < topMostY) {
+        topMostY = entry.boundingClientRect.top;
+        topMostId = id;
+      }
+    }
+    if (topMostId && `#${topMostId}` !== this._observedHref) {
+      this._observedHref = `#${topMostId}`;
+      const anchor = this.anchors.find((a) => a.href === this._observedHref);
+      if (anchor) {
+        fireNonCancelableEvent(this, "activeHrefChange", anchor);
+      }
+    }
+  }
+  _teardownScrollSpy() {
+    this._observer?.disconnect();
+    this._observer = null;
+    this._sectionMap.clear();
+  }
+  _onAnchorClick(_e, anchor) {
+    fireNonCancelableEvent(this, "follow", anchor);
+  }
+  render() {
+    return html16`
+      <nav
+        class="root"
+        aria-labelledby=${ifDefined7(this.ariaLabelledby)}
+      >
+        <ul class="anchor-list" role="list">
+          ${this.anchors.map((anchor) => {
+      const isActive = this._currentHref === anchor.href;
+      const indent = Math.max(0, anchor.level - 1) * 16;
+      const linkClasses = {
+        "anchor-link": true,
+        "anchor-link--active": isActive
+      };
+      return html16`
+              <li class=${classMap14({
+        "anchor-item": true,
+        "anchor-item--active": isActive
+      })} style="padding-left: ${indent}px">
+                <a
+                  class=${classMap14(linkClasses)}
+                  href=${anchor.href}
+                  aria-current=${ifDefined7(isActive ? "location" : void 0)}
+                  @click=${(e) => this._onAnchorClick(e, anchor)}
+                >
+                  <span class="anchor-link-text">${anchor.text}</span>
+                  ${anchor.info ? html16`<span class="anchor-link-info">${anchor.info}</span>` : ""}
+                </a>
+              </li>
+            `;
+    })}
+        </ul>
+      </nav>
+    `;
+  }
+};
+__decorateClass([
+  property15({ type: Array })
+], CsAnchorNavigationInternal.prototype, "anchors", 2);
+__decorateClass([
+  property15({ type: String })
+], CsAnchorNavigationInternal.prototype, "activeHref", 2);
+__decorateClass([
+  property15({ type: Number })
+], CsAnchorNavigationInternal.prototype, "scrollSpyOffset", 2);
+__decorateClass([
+  property15({ type: String })
+], CsAnchorNavigationInternal.prototype, "ariaLabelledby", 2);
+__decorateClass([
+  state3()
+], CsAnchorNavigationInternal.prototype, "_observedHref", 2);
+
+// src/anchor-navigation/index.ts
+var CsAnchorNavigation = class extends CsAnchorNavigationInternal {
+};
+customElements.define("cs-anchor-navigation", CsAnchorNavigation);
+export {
+  CsAnchorNavigation,
+  CsBadge,
+  CsBox,
+  CsCheckbox,
+  CsFileDropzone,
+  CsGrid,
+  CsIcon,
+  CsIconProvider,
+  CsList,
+  CsLiveRegion,
+  CsRadioGroup,
+  CsSpaceBetween,
+  CsSpinner,
+  CsTextContent,
+  CsTiles,
+  CsTreeView
+};