@hypoth-ui/wc 0.1.1

package/dist/chunk-4HLM6DBG.js

@@ -0,0 +1,910 @@
+import {
+  DSElement,
+  __decorateClass,
+  define
+} from "./chunk-H4GJJZ3N.js";
+
+// src/components/layout/flow.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+// src/types/layout-tokens.ts
+var SPACING_TOKENS = [
+  "none",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl"
+];
+var BREAKPOINT_TOKENS = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl"
+];
+var CONTAINER_SIZE_TOKENS = [
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "full"
+];
+var SURFACE_TOKENS = [
+  "background",
+  "surface",
+  "surface-raised",
+  "surface-sunken",
+  "muted"
+];
+var RADIUS_TOKENS = [
+  "none",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "full"
+];
+var FLEX_DIRECTION_VALUES = [
+  "row",
+  "column",
+  "row-reverse",
+  "column-reverse"
+];
+var FLEX_ALIGN_VALUES = [
+  "start",
+  "center",
+  "end",
+  "stretch",
+  "baseline"
+];
+var FLEX_JUSTIFY_VALUES = [
+  "start",
+  "center",
+  "end",
+  "between",
+  "around",
+  "evenly"
+];
+
+// src/utils/responsive.ts
+function parseResponsiveString(value) {
+  const parts = value.trim().split(/\s+/);
+  let base;
+  const overrides = {};
+  for (const part of parts) {
+    if (part.includes(":")) {
+      const [breakpoint, val] = part.split(":");
+      if (breakpoint === "base") {
+        base = val;
+      } else {
+        overrides[breakpoint] = val;
+      }
+    } else {
+      base = part;
+    }
+  }
+  return {
+    base,
+    overrides
+  };
+}
+function generateResponsiveClasses(component, property15, value) {
+  const parsed = parseResponsiveString(value);
+  const classes = [];
+  for (const [breakpoint, val] of Object.entries(parsed.overrides)) {
+    if (val) {
+      classes.push(`ds-${component}--${breakpoint}:${property15}-${val}`);
+    }
+  }
+  return classes;
+}
+function getBaseValue(value) {
+  const parsed = parseResponsiveString(value);
+  return parsed.base;
+}
+function isResponsiveValue(value) {
+  return value.includes(":");
+}
+
+// src/utils/token-validator.ts
+function isDevelopment() {
+  if (typeof globalThis !== "undefined") {
+    const g = globalThis;
+    if (g.__DEV__ === true) return true;
+  }
+  if (typeof process !== "undefined" && process.env) {
+    return process.env.NODE_ENV === "development";
+  }
+  return false;
+}
+function validateToken(value, validTokens, propName, componentName) {
+  if (value === void 0 || value === null || value === "") {
+    return true;
+  }
+  const isValid = validTokens.includes(value);
+  if (!isValid && isDevelopment()) {
+    console.warn(
+      `[${componentName}] Invalid value "${value}" for prop "${propName}". Valid values are: ${validTokens.join(", ")}`
+    );
+  }
+  return isValid;
+}
+function validateResponsiveToken(value, validTokens, propName, componentName) {
+  if (value === void 0 || value === null || value === "") {
+    return true;
+  }
+  const parts = value.trim().split(/\s+/);
+  let allValid = true;
+  for (const part of parts) {
+    let tokenValue = part;
+    if (part.includes(":")) {
+      const [, val] = part.split(":");
+      tokenValue = val;
+    }
+    if (!validateToken(tokenValue, validTokens, propName, componentName)) {
+      allValid = false;
+    }
+  }
+  return allValid;
+}
+
+// src/components/layout/flow.ts
+var DsFlow = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.direction = "row";
+    this.gap = "none";
+    this.align = "stretch";
+    this.justify = "start";
+    this.wrap = "nowrap";
+    this.inline = false;
+  }
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.validateProps();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("direction") || changedProperties.has("gap") || changedProperties.has("align") || changedProperties.has("justify")) {
+      this.validateProps();
+    }
+  }
+  validateProps() {
+    validateResponsiveToken(this.direction, FLEX_DIRECTION_VALUES, "direction", "ds-flow");
+    validateResponsiveToken(this.gap, SPACING_TOKENS, "gap", "ds-flow");
+    validateToken(this.align, FLEX_ALIGN_VALUES, "align", "ds-flow");
+    validateToken(this.justify, FLEX_JUSTIFY_VALUES, "justify", "ds-flow");
+  }
+  render() {
+    const baseDirection = isResponsiveValue(this.direction) ? getBaseValue(this.direction) : this.direction;
+    const baseGap = isResponsiveValue(this.gap) ? getBaseValue(this.gap) : this.gap;
+    const directionClasses = isResponsiveValue(this.direction) ? generateResponsiveClasses("flow", "dir", this.direction) : [];
+    const gapClasses = isResponsiveValue(this.gap) ? generateResponsiveClasses("flow", "gap", this.gap) : [];
+    const classes = {
+      "ds-flow": true,
+      "ds-flow--inline": this.inline,
+      ...Object.fromEntries(directionClasses.map((c) => [c, true])),
+      ...Object.fromEntries(gapClasses.map((c) => [c, true]))
+    };
+    return html`
+      <div
+        class=${classMap(classes)}
+        data-direction=${baseDirection}
+        data-gap=${baseGap}
+        data-align=${this.align}
+        data-justify=${this.justify}
+        data-wrap=${this.wrap}
+        data-layout="flow"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsFlow.prototype, "direction", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsFlow.prototype, "gap", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsFlow.prototype, "align", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsFlow.prototype, "justify", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsFlow.prototype, "wrap", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsFlow.prototype, "inline", 2);
+define("ds-flow", DsFlow);
+
+// src/components/layout/container.ts
+import { html as html2 } from "lit";
+import { property as property2 } from "lit/decorators.js";
+import { classMap as classMap2 } from "lit/directives/class-map.js";
+var DsContainer = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.size = "lg";
+    this.padding = "md";
+  }
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.validateProps();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("size") || changedProperties.has("padding")) {
+      this.validateProps();
+    }
+  }
+  validateProps() {
+    validateToken(this.size, CONTAINER_SIZE_TOKENS, "size", "ds-container");
+    validateToken(this.padding, SPACING_TOKENS, "padding", "ds-container");
+  }
+  render() {
+    const classes = {
+      "ds-container": true
+    };
+    return html2`
+      <div
+        class=${classMap2(classes)}
+        data-size=${this.size}
+        data-padding=${this.padding}
+        data-layout="container"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property2({ type: String, reflect: true })
+], DsContainer.prototype, "size", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], DsContainer.prototype, "padding", 2);
+define("ds-container", DsContainer);
+
+// src/components/layout/grid.ts
+import { html as html3 } from "lit";
+import { property as property3 } from "lit/decorators.js";
+import { classMap as classMap3 } from "lit/directives/class-map.js";
+var COLUMN_VALUES = [
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12",
+  "auto-fit",
+  "auto-fill"
+];
+var DsGrid = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.columns = "1";
+    this.gap = "md";
+  }
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.validateProps();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("columns") || changedProperties.has("gap") || changedProperties.has("rowGap") || changedProperties.has("columnGap")) {
+      this.validateProps();
+    }
+  }
+  validateProps() {
+    validateResponsiveToken(this.columns, COLUMN_VALUES, "columns", "ds-grid");
+    validateResponsiveToken(this.gap, SPACING_TOKENS, "gap", "ds-grid");
+    if (this.rowGap) {
+      validateToken(this.rowGap, SPACING_TOKENS, "row-gap", "ds-grid");
+    }
+    if (this.columnGap) {
+      validateToken(this.columnGap, SPACING_TOKENS, "column-gap", "ds-grid");
+    }
+  }
+  render() {
+    const baseColumns = isResponsiveValue(this.columns) ? getBaseValue(this.columns) : this.columns;
+    const baseGap = isResponsiveValue(this.gap) ? getBaseValue(this.gap) : this.gap;
+    const columnsClasses = isResponsiveValue(this.columns) ? generateResponsiveClasses("grid", "cols", this.columns) : [];
+    const gapClasses = isResponsiveValue(this.gap) ? generateResponsiveClasses("grid", "gap", this.gap) : [];
+    const classes = {
+      "ds-grid": true,
+      ...Object.fromEntries(columnsClasses.map((c) => [c, true])),
+      ...Object.fromEntries(gapClasses.map((c) => [c, true]))
+    };
+    return html3`
+      <div
+        class=${classMap3(classes)}
+        data-columns=${baseColumns}
+        data-gap=${baseGap}
+        data-row-gap=${this.rowGap || ""}
+        data-column-gap=${this.columnGap || ""}
+        data-layout="grid"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property3({ type: String, reflect: true })
+], DsGrid.prototype, "columns", 2);
+__decorateClass([
+  property3({ type: String, reflect: true })
+], DsGrid.prototype, "gap", 2);
+__decorateClass([
+  property3({ type: String, reflect: true, attribute: "row-gap" })
+], DsGrid.prototype, "rowGap", 2);
+__decorateClass([
+  property3({ type: String, reflect: true, attribute: "column-gap" })
+], DsGrid.prototype, "columnGap", 2);
+define("ds-grid", DsGrid);
+
+// src/components/layout/box.ts
+import { html as html4 } from "lit";
+import { property as property4 } from "lit/decorators.js";
+import { classMap as classMap4 } from "lit/directives/class-map.js";
+var DsBox = class extends DSElement {
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.validateProps();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("p") || changedProperties.has("px") || changedProperties.has("py") || changedProperties.has("bg") || changedProperties.has("radius")) {
+      this.validateProps();
+    }
+  }
+  validateProps() {
+    if (this.p) {
+      validateToken(this.p, SPACING_TOKENS, "p", "ds-box");
+    }
+    if (this.px) {
+      validateToken(this.px, SPACING_TOKENS, "px", "ds-box");
+    }
+    if (this.py) {
+      validateToken(this.py, SPACING_TOKENS, "py", "ds-box");
+    }
+    if (this.bg) {
+      validateToken(this.bg, SURFACE_TOKENS, "bg", "ds-box");
+    }
+    if (this.radius) {
+      validateToken(this.radius, RADIUS_TOKENS, "radius", "ds-box");
+    }
+  }
+  render() {
+    const classes = {
+      "ds-box": true
+    };
+    return html4`
+      <div
+        class=${classMap4(classes)}
+        data-p=${this.p || ""}
+        data-px=${this.px || ""}
+        data-py=${this.py || ""}
+        data-bg=${this.bg || ""}
+        data-radius=${this.radius || ""}
+        data-layout="box"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property4({ type: String, reflect: true })
+], DsBox.prototype, "p", 2);
+__decorateClass([
+  property4({ type: String, reflect: true })
+], DsBox.prototype, "px", 2);
+__decorateClass([
+  property4({ type: String, reflect: true })
+], DsBox.prototype, "py", 2);
+__decorateClass([
+  property4({ type: String, reflect: true })
+], DsBox.prototype, "bg", 2);
+__decorateClass([
+  property4({ type: String, reflect: true })
+], DsBox.prototype, "radius", 2);
+define("ds-box", DsBox);
+
+// src/components/layout/page.ts
+import { html as html5 } from "lit";
+import { property as property5 } from "lit/decorators.js";
+import { classMap as classMap5 } from "lit/directives/class-map.js";
+var MIN_HEIGHT_VALUES = ["viewport", "full"];
+var DsPage = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.bg = "background";
+    this.minHeight = "viewport";
+  }
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.validateProps();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("bg") || changedProperties.has("minHeight")) {
+      this.validateProps();
+    }
+  }
+  validateProps() {
+    validateToken(this.bg, SURFACE_TOKENS, "bg", "ds-page");
+    validateToken(this.minHeight, MIN_HEIGHT_VALUES, "min-height", "ds-page");
+  }
+  render() {
+    const classes = {
+      "ds-page": true
+    };
+    return html5`
+      <div
+        class=${classMap5(classes)}
+        data-bg=${this.bg}
+        data-min-height=${this.minHeight}
+        data-layout="page"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property5({ type: String, reflect: true })
+], DsPage.prototype, "bg", 2);
+__decorateClass([
+  property5({ type: String, reflect: true, attribute: "min-height" })
+], DsPage.prototype, "minHeight", 2);
+define("ds-page", DsPage);
+
+// src/components/layout/section.ts
+import { html as html6 } from "lit";
+import { property as property6 } from "lit/decorators.js";
+import { classMap as classMap6 } from "lit/directives/class-map.js";
+var DsSection = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.spacing = "lg";
+  }
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.validateProps();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("spacing")) {
+      this.validateProps();
+    }
+  }
+  validateProps() {
+    validateToken(this.spacing, SPACING_TOKENS, "spacing", "ds-section");
+  }
+  render() {
+    const classes = {
+      "ds-section": true
+    };
+    return html6`
+      <section class=${classMap6(classes)} data-spacing=${this.spacing} data-layout="section">
+        <slot></slot>
+      </section>
+    `;
+  }
+};
+__decorateClass([
+  property6({ type: String, reflect: true })
+], DsSection.prototype, "spacing", 2);
+define("ds-section", DsSection);
+
+// src/components/layout/app-shell.ts
+import { html as html7 } from "lit";
+import { property as property7 } from "lit/decorators.js";
+import { classMap as classMap7 } from "lit/directives/class-map.js";
+var DsAppShell = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.sidebarPosition = "none";
+  }
+  static {
+    this.styles = [];
+  }
+  render() {
+    const classes = {
+      "ds-app-shell": true
+    };
+    return html7`
+      <div
+        class=${classMap7(classes)}
+        data-sidebar=${this.sidebarPosition}
+        data-layout="app-shell"
+      >
+        <slot name="header"></slot>
+        ${this.sidebarPosition !== "none" ? html7`<slot name="sidebar"></slot>` : null}
+        <slot></slot>
+        <slot name="footer"></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property7({ type: String, reflect: true, attribute: "sidebar-position" })
+], DsAppShell.prototype, "sidebarPosition", 2);
+define("ds-app-shell", DsAppShell);
+
+// src/components/layout/header.ts
+import { html as html8 } from "lit";
+import { property as property8 } from "lit/decorators.js";
+import { classMap as classMap8 } from "lit/directives/class-map.js";
+var DsHeader = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.sticky = false;
+    this.safeArea = false;
+  }
+  static {
+    this.styles = [];
+  }
+  render() {
+    const classes = {
+      "ds-header": true
+    };
+    return html8`
+      <header
+        class=${classMap8(classes)}
+        ?data-sticky=${this.sticky}
+        ?data-safe-area=${this.safeArea}
+        data-layout="header"
+      >
+        <slot></slot>
+      </header>
+    `;
+  }
+};
+__decorateClass([
+  property8({ type: Boolean, reflect: true })
+], DsHeader.prototype, "sticky", 2);
+__decorateClass([
+  property8({ type: Boolean, reflect: true, attribute: "safe-area" })
+], DsHeader.prototype, "safeArea", 2);
+define("ds-header", DsHeader);
+
+// src/components/layout/footer.ts
+import { html as html9 } from "lit";
+import { property as property9 } from "lit/decorators.js";
+import { classMap as classMap9 } from "lit/directives/class-map.js";
+var DsFooter = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.sticky = false;
+    this.safeArea = false;
+  }
+  static {
+    this.styles = [];
+  }
+  render() {
+    const classes = {
+      "ds-footer": true
+    };
+    return html9`
+      <footer
+        class=${classMap9(classes)}
+        ?data-sticky=${this.sticky}
+        ?data-safe-area=${this.safeArea}
+        data-layout="footer"
+      >
+        <slot></slot>
+      </footer>
+    `;
+  }
+};
+__decorateClass([
+  property9({ type: Boolean, reflect: true })
+], DsFooter.prototype, "sticky", 2);
+__decorateClass([
+  property9({ type: Boolean, reflect: true, attribute: "safe-area" })
+], DsFooter.prototype, "safeArea", 2);
+define("ds-footer", DsFooter);
+
+// src/components/layout/main.ts
+import { html as html10 } from "lit";
+import { property as property10 } from "lit/decorators.js";
+import { classMap as classMap10 } from "lit/directives/class-map.js";
+var DsMain = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.id = "main-content";
+  }
+  static {
+    this.styles = [];
+  }
+  render() {
+    const classes = {
+      "ds-main": true
+    };
+    return html10`
+      <main class=${classMap10(classes)} id=${this.id} tabindex="-1" data-layout="main">
+        <slot></slot>
+      </main>
+    `;
+  }
+};
+__decorateClass([
+  property10({ type: String, reflect: true })
+], DsMain.prototype, "id", 2);
+define("ds-main", DsMain);
+
+// src/components/layout/spacer.ts
+import { html as html11 } from "lit";
+import { property as property11 } from "lit/decorators.js";
+import { classMap as classMap11 } from "lit/directives/class-map.js";
+var AXIS_VALUES = ["horizontal", "vertical"];
+var DsSpacer = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+    this.axis = "vertical";
+  }
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.validateProps();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("size") || changedProperties.has("axis")) {
+      this.validateProps();
+    }
+  }
+  validateProps() {
+    validateToken(this.size, SPACING_TOKENS, "size", "ds-spacer");
+    validateToken(this.axis, AXIS_VALUES, "axis", "ds-spacer");
+  }
+  render() {
+    const classes = {
+      "ds-spacer": true
+    };
+    return html11`
+      <div
+        class=${classMap11(classes)}
+        data-size=${this.size}
+        data-axis=${this.axis}
+        aria-hidden="true"
+        data-layout="spacer"
+      ></div>
+    `;
+  }
+};
+__decorateClass([
+  property11({ type: String, reflect: true })
+], DsSpacer.prototype, "size", 2);
+__decorateClass([
+  property11({ type: String, reflect: true })
+], DsSpacer.prototype, "axis", 2);
+define("ds-spacer", DsSpacer);
+
+// src/components/layout/center.ts
+import { html as html12 } from "lit";
+import { property as property12 } from "lit/decorators.js";
+import { classMap as classMap12 } from "lit/directives/class-map.js";
+var DsCenter = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+  }
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.validateProps();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("maxWidth")) {
+      this.validateProps();
+    }
+  }
+  validateProps() {
+    if (this.maxWidth) {
+      validateToken(this.maxWidth, CONTAINER_SIZE_TOKENS, "max-width", "ds-center");
+    }
+  }
+  render() {
+    const classes = {
+      "ds-center": true
+    };
+    return html12`
+      <div
+        class=${classMap12(classes)}
+        data-max-width=${this.maxWidth || ""}
+        ?data-vertical=${this.vertical}
+        data-layout="center"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property12({ type: String, reflect: true, attribute: "max-width" })
+], DsCenter.prototype, "maxWidth", 2);
+__decorateClass([
+  property12({ type: Boolean, reflect: true })
+], DsCenter.prototype, "vertical", 2);
+define("ds-center", DsCenter);
+
+// src/components/layout/split.ts
+import { html as html13 } from "lit";
+import { property as property13 } from "lit/decorators.js";
+import { classMap as classMap13 } from "lit/directives/class-map.js";
+var RATIO_VALUES = ["equal", "1:2", "2:1", "1:3", "3:1"];
+var DsSplit = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.collapseAt = "md";
+    this.gap = "md";
+    this.ratio = "equal";
+  }
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.validateProps();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("collapseAt") || changedProperties.has("gap") || changedProperties.has("ratio")) {
+      this.validateProps();
+    }
+  }
+  validateProps() {
+    validateToken(this.collapseAt, BREAKPOINT_TOKENS, "collapse-at", "ds-split");
+    validateToken(this.gap, SPACING_TOKENS, "gap", "ds-split");
+    validateToken(this.ratio, RATIO_VALUES, "ratio", "ds-split");
+  }
+  render() {
+    const ratioData = this.ratio.replace(":", "-");
+    const classes = {
+      "ds-split": true
+    };
+    return html13`
+      <div
+        class=${classMap13(classes)}
+        data-collapse-at=${this.collapseAt}
+        data-gap=${this.gap}
+        data-ratio=${ratioData}
+        data-layout="split"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property13({ type: String, reflect: true, attribute: "collapse-at" })
+], DsSplit.prototype, "collapseAt", 2);
+__decorateClass([
+  property13({ type: String, reflect: true })
+], DsSplit.prototype, "gap", 2);
+__decorateClass([
+  property13({ type: String, reflect: true })
+], DsSplit.prototype, "ratio", 2);
+define("ds-split", DsSplit);
+
+// src/components/layout/wrap.ts
+import { html as html14 } from "lit";
+import { property as property14 } from "lit/decorators.js";
+import { classMap as classMap14 } from "lit/directives/class-map.js";
+var DsWrap = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.gap = "sm";
+    this.align = "start";
+  }
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.validateProps();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("gap") || changedProperties.has("rowGap") || changedProperties.has("align")) {
+      this.validateProps();
+    }
+  }
+  validateProps() {
+    validateToken(this.gap, SPACING_TOKENS, "gap", "ds-wrap");
+    if (this.rowGap) {
+      validateToken(this.rowGap, SPACING_TOKENS, "row-gap", "ds-wrap");
+    }
+    const wrapAlignValues = ["start", "center", "end"];
+    validateToken(this.align, wrapAlignValues, "align", "ds-wrap");
+  }
+  render() {
+    const classes = {
+      "ds-wrap": true
+    };
+    return html14`
+      <div
+        class=${classMap14(classes)}
+        data-gap=${this.gap}
+        data-row-gap=${this.rowGap || ""}
+        data-align=${this.align}
+        data-layout="wrap"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property14({ type: String, reflect: true })
+], DsWrap.prototype, "gap", 2);
+__decorateClass([
+  property14({ type: String, reflect: true, attribute: "row-gap" })
+], DsWrap.prototype, "rowGap", 2);
+__decorateClass([
+  property14({ type: String, reflect: true })
+], DsWrap.prototype, "align", 2);
+define("ds-wrap", DsWrap);
+
+export {
+  DsFlow,
+  DsContainer,
+  DsGrid,
+  DsBox,
+  DsPage,
+  DsSection,
+  DsAppShell,
+  DsHeader,
+  DsFooter,
+  DsMain,
+  DsSpacer,
+  DsCenter,
+  DsSplit,
+  DsWrap
+};
+//# sourceMappingURL=chunk-4HLM6DBG.js.map