@iris-ui-kit/vue 0.1.0

package/dist/skeletons.cjs

@@ -0,0 +1,1659 @@
+'use strict';
+
+var vue = require('vue');
+var core = require('@iris-ui-kit/core');
+
+// src/skeletons/LoginTemplate.ts
+var ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
+var JUSTIFY_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around"
+};
+function toCssSpacing(spacing) {
+  if (typeof spacing === "number") return `${spacing}px`;
+  if (spacing === "sm" || spacing === "md" || spacing === "lg") {
+    return `var(--iris-gap-${spacing})`;
+  }
+  return spacing;
+}
+var IrisStack = vue.defineComponent({
+  name: "IrisStack",
+  inheritAttrs: false,
+  props: {
+    direction: { type: String, default: "column" },
+    spacing: { type: [String, Number], default: "md" },
+    align: { type: String, default: "stretch" },
+    justify: { type: String, default: "start" },
+    wrap: { type: Boolean, default: false },
+    /** When true, renders as an inline-flex container. */
+    inline: { type: Boolean, default: false }
+  },
+  setup(props, { slots, attrs }) {
+    const style = vue.computed(() => ({
+      display: props.inline ? "inline-flex" : "flex",
+      flexDirection: props.direction,
+      gap: toCssSpacing(props.spacing),
+      alignItems: ALIGN_MAP[props.align],
+      justifyContent: JUSTIFY_MAP[props.justify],
+      flexWrap: props.wrap ? "wrap" : "nowrap"
+    }));
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        "data-iris-stack": "",
+        "data-iris-stack-direction": props.direction,
+        style: { ...style.value, ...attrs.style ?? {} }
+      },
+      slots.default?.()
+    );
+  }
+});
+var WIDTH_MAP = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  full: "100%"
+};
+function resolveMaxWidth(input) {
+  if (input === "sm" || input === "md" || input === "lg" || input === "xl" || input === "full") {
+    return WIDTH_MAP[input];
+  }
+  return input;
+}
+function resolvePadding(input) {
+  if (typeof input === "number") return `${input}px`;
+  if (input === "sm" || input === "md" || input === "lg") {
+    return `var(--iris-padding-${input})`;
+  }
+  return input;
+}
+var IrisContainer = vue.defineComponent({
+  name: "IrisContainer",
+  inheritAttrs: false,
+  props: {
+    maxWidth: { type: String, default: "lg" },
+    padding: { type: [String, Number], default: "md" },
+    center: { type: Boolean, default: true }
+  },
+  setup(props, { slots, attrs }) {
+    const style = vue.computed(() => ({
+      width: "100%",
+      maxWidth: resolveMaxWidth(props.maxWidth),
+      padding: `0 ${resolvePadding(props.padding)}`,
+      ...props.center ? { marginInlineStart: "auto", marginInlineEnd: "auto" } : {}
+    }));
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        "data-iris-container": "",
+        "data-iris-container-max-width": props.maxWidth,
+        style: { ...style.value, ...attrs.style ?? {} }
+      },
+      slots.default?.()
+    );
+  }
+});
+var IrisInput = vue.defineComponent({
+  name: "IrisInput",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: [String, Number], default: "" },
+    type: { type: String, default: "text" },
+    size: { type: String, default: "md" },
+    placeholder: { type: String, default: "" },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    /** Visual error state — does NOT enforce validation. */
+    invalid: { type: Boolean, default: false },
+    id: { type: String, default: void 0 },
+    /** Forwarded as `aria-describedby` on the inner <input>. Set by IrisFormField. */
+    ariaDescribedby: { type: String, default: void 0 }
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    focus: (_event) => true,
+    blur: (_event) => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const focused = vue.ref(false);
+    const sizeStyles = vue.computed(() => {
+      const map = {
+        sm: {
+          padding: "4px var(--iris-padding-sm)",
+          fontSize: "12px",
+          minHeight: "28px"
+        },
+        md: {
+          padding: "6px var(--iris-padding-md)",
+          fontSize: "14px",
+          minHeight: "34px"
+        },
+        lg: {
+          padding: "8px var(--iris-padding-md)",
+          fontSize: "16px",
+          minHeight: "40px"
+        }
+      };
+      return map[props.size];
+    });
+    const wrapperStyle = vue.computed(() => {
+      const borderColor = props.invalid ? "var(--iris-danger)" : focused.value ? "var(--iris-primary)" : "var(--iris-border)";
+      const boxShadow = focused.value ? `0 0 0 3px ${props.invalid ? "rgba(239, 68, 68, 0.18)" : "rgba(99, 102, 241, 0.18)"}` : "none";
+      return {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "var(--iris-gap-sm)",
+        background: "var(--iris-background)",
+        color: "var(--iris-foreground)",
+        border: `1px solid ${borderColor}`,
+        borderRadius: "var(--iris-radius-md)",
+        cursor: props.disabled ? "not-allowed" : "text",
+        opacity: props.disabled ? "0.6" : "1",
+        transition: "border-color 120ms ease, box-shadow 120ms ease",
+        boxShadow,
+        ...sizeStyles.value,
+        padding: sizeStyles.value.padding,
+        minHeight: sizeStyles.value.minHeight
+      };
+    });
+    const inputStyle = {
+      flex: "1",
+      minWidth: "0",
+      border: "none",
+      outline: "none",
+      background: "transparent",
+      color: "inherit",
+      fontFamily: "inherit",
+      fontSize: "inherit",
+      padding: "0"
+    };
+    const onInput = (event) => {
+      emit("update:modelValue", event.target.value);
+    };
+    const onFocus = (event) => {
+      focused.value = true;
+      emit("focus", event);
+    };
+    const onBlur = (event) => {
+      focused.value = false;
+      emit("blur", event);
+    };
+    return () => {
+      const prefix = slots.prefix?.();
+      const suffix = slots.suffix?.();
+      return vue.h(
+        "label",
+        {
+          ...attrs,
+          "data-iris-input": "",
+          "data-iris-input-size": props.size,
+          "data-state": props.invalid ? "invalid" : focused.value ? "focused" : "idle",
+          style: {
+            ...wrapperStyle.value,
+            ...attrs.style ?? {}
+          }
+        },
+        [
+          prefix && vue.h(
+            "span",
+            {
+              "data-iris-input-prefix": "",
+              style: { display: "inline-flex", alignItems: "center", color: "var(--iris-muted)" }
+            },
+            prefix
+          ),
+          vue.h("input", {
+            id: props.id,
+            type: props.type,
+            value: props.modelValue,
+            placeholder: props.placeholder,
+            disabled: props.disabled || void 0,
+            readonly: props.readonly || void 0,
+            "aria-invalid": props.invalid ? "true" : void 0,
+            "aria-describedby": props.ariaDescribedby,
+            style: inputStyle,
+            onInput,
+            onFocus,
+            onBlur
+          }),
+          suffix && vue.h(
+            "span",
+            {
+              "data-iris-input-suffix": "",
+              style: { display: "inline-flex", alignItems: "center", color: "var(--iris-muted)" }
+            },
+            suffix
+          )
+        ]
+      );
+    };
+  }
+});
+
+// src/i18n/context.ts
+var I18nInjectionKey = /* @__PURE__ */ Symbol("IrisI18n");
+var fallbackI18n = null;
+function getFallback() {
+  if (fallbackI18n === null) fallbackI18n = core.createI18n();
+  return fallbackI18n;
+}
+function useI18n() {
+  const i18n = vue.inject(I18nInjectionKey, null) ?? getFallback();
+  const state = vue.ref(i18n.getState());
+  const unsubscribe = i18n.subscribe((next) => {
+    state.value = next;
+  });
+  vue.onBeforeUnmount(unsubscribe);
+  return {
+    locale: vue.computed(() => state.value.locale),
+    t: (key, params) => {
+      void state.value.locale;
+      return i18n.t(key, params);
+    },
+    formatDate: (value, options) => {
+      void state.value.locale;
+      return i18n.formatDate(value, options);
+    },
+    formatNumber: (value, options) => {
+      void state.value.locale;
+      return i18n.formatNumber(value, options);
+    },
+    formatRelativeTime: (value, unit, options) => {
+      void state.value.locale;
+      return i18n.formatRelativeTime(value, unit, options);
+    },
+    setLocale: i18n.setLocale,
+    setMessages: i18n.setMessages
+  };
+}
+
+// src/primitives/password-input/PasswordInput.ts
+var IrisPasswordInput = vue.defineComponent({
+  name: "IrisPasswordInput",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: "" },
+    size: { type: String, default: "md" },
+    placeholder: { type: String, default: "" },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    invalid: { type: Boolean, default: false },
+    id: { type: String, default: void 0 },
+    /** Allow the user to toggle visibility. Default `true`. */
+    showToggle: { type: Boolean, default: true }
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    focus: (_event) => true,
+    blur: (_event) => true
+  },
+  setup(props, { attrs, emit, slots }) {
+    const { t } = useI18n();
+    const visible = vue.ref(false);
+    const onUpdate = (value) => emit("update:modelValue", value);
+    const onFocus = (e) => emit("focus", e);
+    const onBlur = (e) => emit("blur", e);
+    const toggle = () => {
+      if (props.disabled || props.readonly) return;
+      visible.value = !visible.value;
+    };
+    return () => vue.h(
+      IrisInput,
+      {
+        ...attrs,
+        modelValue: props.modelValue,
+        type: visible.value ? "text" : "password",
+        size: props.size,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        readonly: props.readonly,
+        invalid: props.invalid,
+        id: props.id,
+        "data-iris-password-input": "",
+        "onUpdate:modelValue": onUpdate,
+        onFocus,
+        onBlur
+      },
+      {
+        prefix: slots.prefix,
+        suffix: () => [
+          slots.suffix?.(),
+          props.showToggle ? vue.h(
+            "button",
+            {
+              type: "button",
+              "data-iris-password-input-toggle": "",
+              "aria-label": visible.value ? t("passwordInput.hide") : t("passwordInput.show"),
+              "aria-pressed": visible.value ? "true" : "false",
+              onClick: toggle,
+              style: {
+                background: "transparent",
+                border: "none",
+                cursor: props.disabled ? "not-allowed" : "pointer",
+                color: "var(--iris-muted)",
+                padding: "0 2px",
+                fontSize: "13px",
+                lineHeight: "1"
+              }
+            },
+            visible.value ? "\u{1F648}" : "\u{1F441}"
+          ) : null
+        ]
+      }
+    );
+  }
+});
+var IrisCheckbox = vue.defineComponent({
+  name: "IrisCheckbox",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [Boolean, String],
+      default: false
+    },
+    size: { type: String, default: "md" },
+    disabled: { type: Boolean, default: false },
+    id: { type: String, default: void 0 },
+    name: { type: String, default: void 0 },
+    value: { type: [String, Number], default: void 0 },
+    /** Forwarded as `aria-describedby` on the native checkbox input. Set by IrisFormField. */
+    ariaDescribedby: { type: String, default: void 0 },
+    /**
+     * Accessible name for the native checkbox input. Bound as `aria-label` on
+     * the `<input>` itself (the element with the checkbox role), NOT the label
+     * wrapper. Use when there is no visible label text.
+     */
+    ariaLabel: { type: String, default: void 0 },
+    /** Invalid state — sets aria-invalid. Set by IrisFormField. */
+    invalid: { type: Boolean, default: false }
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    change: (_value) => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const state = vue.computed(() => {
+      if (props.modelValue === "indeterminate") return "indeterminate";
+      return props.modelValue ? "checked" : "unchecked";
+    });
+    const dim = vue.computed(() => {
+      const map = { sm: "14px", md: "18px", lg: "22px" };
+      return map[props.size];
+    });
+    const boxStyle = vue.computed(() => ({
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: dim.value,
+      height: dim.value,
+      borderRadius: "var(--iris-radius-sm)",
+      border: "1px solid var(--iris-border)",
+      background: state.value === "unchecked" ? "var(--iris-background)" : "var(--iris-primary)",
+      borderColor: state.value === "unchecked" ? "var(--iris-border)" : "var(--iris-primary)",
+      color: "var(--iris-primary-foreground)",
+      cursor: props.disabled ? "not-allowed" : "pointer",
+      opacity: props.disabled ? "0.6" : "1",
+      transition: "background-color 120ms ease, border-color 120ms ease",
+      verticalAlign: "middle"
+    }));
+    const onChange = (event) => {
+      const next = event.target.checked;
+      emit("update:modelValue", next);
+      emit("change", next);
+    };
+    const renderIndicator = () => {
+      if (state.value === "unchecked") return null;
+      if (state.value === "indeterminate") {
+        return vue.h("span", {
+          "aria-hidden": "true",
+          style: { width: "60%", height: "2px", background: "currentColor", borderRadius: "1px" }
+        });
+      }
+      return vue.h(
+        "svg",
+        {
+          "aria-hidden": "true",
+          viewBox: "0 0 16 16",
+          width: "80%",
+          height: "80%",
+          fill: "none"
+        },
+        [
+          vue.h("path", {
+            d: "M3 8.5 L6.5 12 L13 4.5",
+            stroke: "currentColor",
+            "stroke-width": "2.4",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          })
+        ]
+      );
+    };
+    return () => vue.h(
+      "label",
+      {
+        ...attrs,
+        "data-iris-checkbox": "",
+        "data-iris-checkbox-size": props.size,
+        "data-state": state.value,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "var(--iris-gap-sm)",
+          cursor: props.disabled ? "not-allowed" : "pointer",
+          userSelect: "none",
+          ...attrs.style ?? {}
+        }
+      },
+      [
+        vue.h("input", {
+          type: "checkbox",
+          id: props.id,
+          name: props.name,
+          value: props.value,
+          checked: props.modelValue === true,
+          indeterminate: props.modelValue === "indeterminate",
+          disabled: props.disabled || void 0,
+          "aria-checked": state.value === "indeterminate" ? "mixed" : state.value === "checked" ? "true" : "false",
+          "aria-describedby": props.ariaDescribedby,
+          "aria-label": props.ariaLabel,
+          "aria-invalid": props.invalid ? "true" : void 0,
+          style: {
+            position: "absolute",
+            opacity: "0",
+            width: "0",
+            height: "0",
+            pointerEvents: "none"
+          },
+          onChange
+        }),
+        vue.h("span", { "aria-hidden": "true", style: boxStyle.value }, [renderIndicator()]),
+        slots.default && vue.h("span", null, slots.default())
+      ]
+    );
+  }
+});
+
+// src/primitives/button/styles.ts
+var STYLE_ID = "iris-button-styles";
+var CSS = `
+.iris-button {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--iris-gap-sm, 4px);
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.2;
+  border-radius: var(--iris-radius-md, 6px);
+  white-space: nowrap;
+  user-select: none;
+  position: relative;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    filter 120ms ease;
+}
+.iris-button:focus-visible {
+  outline: 2px solid var(--iris-primary);
+  outline-offset: 2px;
+}
+.iris-button[disabled],
+.iris-button[aria-busy="true"] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.iris-button[data-iris-button-variant="solid"]:not([disabled]):not([aria-busy="true"]):hover {
+  filter: brightness(1.08);
+}
+.iris-button[data-iris-button-variant="outline"]:not([disabled]):not([aria-busy="true"]):hover,
+.iris-button[data-iris-button-variant="ghost"]:not([disabled]):not([aria-busy="true"]):hover {
+  background-color: var(--iris-surface-hover);
+}
+.iris-button[data-iris-button-variant="link"]:not([disabled]):not([aria-busy="true"]):hover {
+  text-decoration: underline;
+}
+.iris-button-leading {
+  display: inline-flex;
+  align-items: center;
+}
+.iris-button-spinner {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  animation: iris-button-spin 0.7s linear infinite;
+}
+@keyframes iris-button-spin {
+  to { transform: rotate(360deg); }
+}
+`;
+var installed = false;
+function installButtonStyles() {
+  if (installed) return;
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) {
+    installed = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+  installed = true;
+}
+function isEventListenerKey(key) {
+  return key.startsWith("on") && key.length > 2 && /[A-Z]/.test(key.charAt(2));
+}
+function composeRefs(...refs) {
+  return (el) => {
+    for (const r of refs) {
+      if (r == null) continue;
+      if (typeof r === "function") {
+        r(el);
+      } else if (typeof r === "object" && "value" in r) {
+        r.value = el;
+      }
+    }
+  };
+}
+function mergeSlotProps(parent, child) {
+  const out = { ...child };
+  for (const key in parent) {
+    const parentVal = parent[key];
+    const childVal = child[key];
+    if (isEventListenerKey(key)) {
+      if (typeof parentVal === "function" && typeof childVal === "function") {
+        out[key] = core.composeEventHandlers(
+          parentVal,
+          childVal
+        );
+      } else if (typeof parentVal === "function" && childVal == null) {
+        out[key] = parentVal;
+      }
+    } else if (key === "ref") {
+      if (parentVal != null && childVal != null) {
+        out[key] = composeRefs(parentVal, childVal);
+      } else if (parentVal != null) {
+        out[key] = parentVal;
+      }
+    } else if (key === "class") {
+      const merged = [parentVal, childVal].filter(Boolean).join(" ").trim();
+      if (merged) out[key] = merged;
+    } else if (key === "style") {
+      if (parentVal || childVal) {
+        out[key] = { ...parentVal, ...childVal };
+      }
+    } else if (!(key in child)) {
+      out[key] = parentVal;
+    }
+  }
+  return out;
+}
+vue.defineComponent({
+  name: "IrisSlot",
+  inheritAttrs: false,
+  setup(_, { slots, attrs }) {
+    return () => {
+      const children = slots.default?.();
+      const root = findFirstElement(children);
+      if (!root) {
+        if (typeof process === "undefined" || process.env?.NODE_ENV !== "production") {
+          console.warn("[iris-ui] IrisSlot expected exactly one child element; got none.");
+        }
+        return null;
+      }
+      const merged = mergeSlotProps(
+        attrs,
+        root.props ?? {}
+      );
+      return vue.h(root.type, merged, root.children);
+    };
+  }
+});
+function findFirstElement(children) {
+  if (!children || children.length === 0) return null;
+  let found = null;
+  let extraCount = 0;
+  const walk = (nodes) => {
+    for (const node of nodes) {
+      if (node.type === vue.Fragment) {
+        const fragChildren = Array.isArray(node.children) ? node.children : [];
+        walk(fragChildren);
+        continue;
+      }
+      if (typeof node.type === "string" || typeof node.type === "object" || typeof node.type === "function") {
+        if (found) {
+          extraCount += 1;
+        } else {
+          found = node;
+        }
+      }
+    }
+  };
+  walk(children);
+  if (extraCount > 0 && (typeof process === "undefined" || process.env?.NODE_ENV !== "production")) {
+    console.warn(`[iris-ui] IrisSlot got ${extraCount + 1} root elements; only the first is used.`);
+  }
+  return found;
+}
+
+// src/primitives/button/Button.ts
+var SIZE_STYLES = {
+  sm: {
+    padding: "var(--iris-padding-sm) var(--iris-padding-md)",
+    fontSize: "12px"
+  },
+  md: {
+    padding: "var(--iris-padding-sm) var(--iris-padding-lg)",
+    fontSize: "14px"
+  },
+  lg: {
+    padding: "var(--iris-padding-md) var(--iris-padding-lg)",
+    fontSize: "16px"
+  }
+};
+var VARIANT_STYLES = {
+  solid: {
+    background: "var(--iris-primary)",
+    color: "var(--iris-primary-foreground)",
+    border: "1px solid var(--iris-primary)"
+  },
+  outline: {
+    background: "transparent",
+    color: "var(--iris-primary)",
+    border: "1px solid var(--iris-border)"
+  },
+  ghost: {
+    background: "transparent",
+    color: "var(--iris-foreground)",
+    border: "1px solid transparent"
+  },
+  link: {
+    background: "transparent",
+    color: "var(--iris-primary)",
+    border: "1px solid transparent",
+    textDecoration: "none"
+  }
+};
+function buildInlineStyle(variant, size) {
+  const base = { ...SIZE_STYLES[size], ...VARIANT_STYLES[variant] };
+  if (variant === "link") {
+    base.padding = "0";
+  }
+  return base;
+}
+function renderSpinner() {
+  return vue.h(
+    "svg",
+    {
+      class: "iris-button-spinner",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true"
+    },
+    [
+      vue.h("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        "stroke-opacity": "0.25",
+        "stroke-width": "3"
+      }),
+      vue.h("path", {
+        d: "M22 12a10 10 0 0 1-10 10",
+        stroke: "currentColor",
+        "stroke-width": "3",
+        "stroke-linecap": "round"
+      })
+    ]
+  );
+}
+var IrisButton = vue.defineComponent({
+  name: "IrisButton",
+  props: {
+    variant: { type: String, default: "solid" },
+    size: { type: String, default: "md" },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    type: { type: String, default: "button" },
+    asChild: { type: Boolean, default: false }
+  },
+  emits: {
+    click: (_event) => true
+  },
+  setup(props, { slots, emit }) {
+    installButtonStyles();
+    const isInteractive = vue.computed(() => !props.disabled && !props.loading);
+    const inlineStyle = vue.computed(() => buildInlineStyle(props.variant, props.size));
+    const onClick = (event) => {
+      if (!isInteractive.value) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      emit("click", event);
+    };
+    return () => {
+      const baseProps = {
+        class: "iris-button",
+        "data-iris-button-variant": props.variant,
+        "data-iris-button-size": props.size,
+        "aria-disabled": props.disabled ? "true" : void 0,
+        "aria-busy": props.loading ? "true" : void 0,
+        style: inlineStyle.value,
+        onClick
+      };
+      if (props.asChild) {
+        const root = findFirstElement(slots.default?.());
+        if (!root) {
+          if (typeof process === "undefined" || process.env?.NODE_ENV !== "production") {
+            console.warn("[iris-ui] IrisButton: as-child requires a single child element");
+          }
+          return null;
+        }
+        const parentProps = {
+          ...baseProps,
+          disabled: isInteractive.value ? void 0 : true
+        };
+        const merged = mergeSlotProps(parentProps, root.props ?? {});
+        return vue.h(root.type, merged, root.children);
+      }
+      const leadingContent = props.loading ? renderSpinner() : slots.leading?.();
+      const children = [];
+      if (leadingContent) {
+        children.push(vue.h("span", { class: "iris-button-leading" }, leadingContent));
+      }
+      const defaultSlot = slots.default?.();
+      if (defaultSlot) children.push(defaultSlot);
+      return vue.h(
+        "button",
+        {
+          ...baseProps,
+          type: props.type,
+          disabled: isInteractive.value ? void 0 : true
+        },
+        children
+      );
+    };
+  }
+});
+var IrisFormField = vue.defineComponent({
+  name: "IrisFormField",
+  inheritAttrs: false,
+  props: {
+    label: { type: String, default: "" },
+    hint: { type: String, default: "" },
+    error: { type: String, default: "" },
+    required: { type: Boolean, default: false },
+    /** Override the auto-generated control id. */
+    labelFor: { type: String, default: "" },
+    /** Visual size of the label. */
+    size: { type: String, default: "md" }
+  },
+  setup(props, { slots, attrs }) {
+    const baseId = vue.useId();
+    const controlId = vue.computed(() => props.labelFor || `${baseId}-control`);
+    const hintId = `${baseId}-hint`;
+    const errorId = `${baseId}-error`;
+    const describedBy = vue.computed(() => {
+      const ids = [];
+      if (props.hint) ids.push(hintId);
+      if (props.error) ids.push(errorId);
+      return ids.length > 0 ? ids.join(" ") : void 0;
+    });
+    const labelStyle = vue.computed(() => ({
+      fontSize: props.size === "sm" ? "12px" : "14px",
+      fontWeight: "500",
+      color: props.error ? "var(--iris-danger)" : "var(--iris-foreground)",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4px"
+    }));
+    return () => {
+      const children = slots.default?.() ?? [];
+      let injected = null;
+      const restChildren = [];
+      let foundFirst = false;
+      children.forEach((child) => {
+        if (!foundFirst && typeof child.type !== "symbol" && typeof child.type !== "string") {
+          injected = vue.cloneVNode(child, {
+            id: controlId.value,
+            invalid: props.error ? true : void 0,
+            ariaDescribedby: describedBy.value
+          });
+          foundFirst = true;
+        } else {
+          restChildren.push(child);
+        }
+      });
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          "data-iris-form-field": "",
+          "data-iris-form-field-state": props.error ? "invalid" : "valid",
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px",
+            ...attrs.style ?? {}
+          }
+        },
+        [
+          props.label ? vue.h(
+            "label",
+            {
+              for: controlId.value,
+              "data-iris-form-field-label": "",
+              style: labelStyle.value
+            },
+            [
+              props.label,
+              props.required ? vue.h(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-iris-form-field-required": "",
+                  style: { color: "var(--iris-danger)" }
+                },
+                "*"
+              ) : null
+            ]
+          ) : null,
+          // The wrapped control + any trailing siblings.
+          vue.h(vue.Fragment, null, [injected, ...restChildren]),
+          props.hint && !props.error ? vue.h(
+            "div",
+            {
+              id: hintId,
+              "data-iris-form-field-hint": "",
+              style: { fontSize: "12px", color: "var(--iris-muted)" }
+            },
+            props.hint
+          ) : null,
+          props.error ? vue.h(
+            "div",
+            {
+              id: errorId,
+              "data-iris-form-field-error": "",
+              role: "alert",
+              style: { fontSize: "12px", color: "var(--iris-danger)" }
+            },
+            props.error
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var TONE_TO_VAR = {
+  info: "--iris-primary",
+  success: "--iris-success",
+  warning: "--iris-warning",
+  danger: "--iris-danger"
+};
+var IrisAlert = vue.defineComponent({
+  name: "IrisAlert",
+  inheritAttrs: false,
+  props: {
+    tone: { type: String, default: "info" },
+    title: { type: String, default: "" },
+    /** When true, a close button is rendered. */
+    closable: { type: Boolean, default: false },
+    /** Controlled visibility. Omit for uncontrolled (defaults to visible). */
+    open: { type: Boolean, default: void 0 }
+  },
+  emits: {
+    "update:open": (_value) => true,
+    close: () => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const { t } = useI18n();
+    const internalOpen = vue.ref(true);
+    vue.watch(
+      () => props.open,
+      (value) => {
+        if (value !== void 0) internalOpen.value = value;
+      }
+    );
+    const isOpen = vue.computed(() => props.open !== void 0 ? props.open : internalOpen.value);
+    const onClose = () => {
+      if (props.open === void 0) internalOpen.value = false;
+      emit("update:open", false);
+      emit("close");
+    };
+    const tonalVar = vue.computed(() => `var(${TONE_TO_VAR[props.tone]})`);
+    const containerStyle = vue.computed(() => ({
+      display: "flex",
+      gap: "var(--iris-gap-md, 12px)",
+      padding: "var(--iris-padding-md, 12px)",
+      borderRadius: "var(--iris-radius-md, 6px)",
+      border: `1px solid ${tonalVar.value}`,
+      // `backgroundColor` is the precomputed fallback under color-mix (engines
+      // without it); the `background` shorthand overrides with the exact mix.
+      backgroundColor: `var(${TONE_TO_VAR[props.tone]}-subtle)`,
+      background: `color-mix(in srgb, ${tonalVar.value} 10%, var(--iris-background))`,
+      color: "var(--iris-foreground)",
+      alignItems: "flex-start"
+    }));
+    return () => {
+      if (!isOpen.value) return null;
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          role: props.tone === "danger" || props.tone === "warning" ? "alert" : "status",
+          "data-iris-alert": "",
+          "data-iris-alert-tone": props.tone,
+          style: { ...containerStyle.value, ...attrs.style ?? {} }
+        },
+        [
+          slots.icon ? vue.h(
+            "span",
+            {
+              "data-iris-alert-icon": "",
+              style: { color: tonalVar.value, flexShrink: "0", display: "inline-flex" }
+            },
+            slots.icon()
+          ) : null,
+          vue.h("div", { "data-iris-alert-body": "", style: { flex: "1", minWidth: "0" } }, [
+            props.title || slots.title ? vue.h(
+              "div",
+              {
+                "data-iris-alert-title": "",
+                style: { fontWeight: "600", marginBottom: "4px", color: tonalVar.value }
+              },
+              slots.title?.() ?? props.title
+            ) : null,
+            vue.h("div", { "data-iris-alert-content": "" }, slots.default?.())
+          ]),
+          props.closable ? vue.h(
+            "button",
+            {
+              type: "button",
+              "data-iris-alert-close": "",
+              "aria-label": t("alert.close"),
+              onClick: onClose,
+              style: {
+                background: "transparent",
+                border: "none",
+                cursor: "pointer",
+                color: "var(--iris-muted)",
+                fontSize: "16px",
+                padding: "0",
+                lineHeight: "1",
+                flexShrink: "0"
+              }
+            },
+            "\u2715"
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var SPACING_MAP = {
+  sm: "8px",
+  md: "16px",
+  lg: "24px"
+};
+var IrisDivider = vue.defineComponent({
+  name: "IrisDivider",
+  inheritAttrs: false,
+  props: {
+    orientation: { type: String, default: "horizontal" },
+    label: { type: String, default: "" },
+    spacing: { type: String, default: "md" }
+  },
+  setup(props, { slots, attrs }) {
+    const isHorizontal = vue.computed(() => props.orientation === "horizontal");
+    const hasLabel = vue.computed(() => Boolean(props.label || slots.default));
+    return () => {
+      if (isHorizontal.value && !hasLabel.value) {
+        return vue.h("hr", {
+          ...attrs,
+          "data-iris-divider": "",
+          "data-iris-divider-orientation": "horizontal",
+          style: {
+            border: "none",
+            borderTop: "1px solid var(--iris-border)",
+            margin: `${SPACING_MAP[props.spacing]} 0`,
+            width: "100%",
+            ...attrs.style ?? {}
+          }
+        });
+      }
+      if (!isHorizontal.value) {
+        return vue.h("div", {
+          ...attrs,
+          role: "separator",
+          "aria-orientation": "vertical",
+          "data-iris-divider": "",
+          "data-iris-divider-orientation": "vertical",
+          style: {
+            display: "inline-block",
+            width: "1px",
+            alignSelf: "stretch",
+            background: "var(--iris-border)",
+            margin: `0 ${SPACING_MAP[props.spacing]}`,
+            ...attrs.style ?? {}
+          }
+        });
+      }
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          role: "separator",
+          "aria-orientation": "horizontal",
+          "data-iris-divider": "",
+          "data-iris-divider-orientation": "horizontal",
+          "data-iris-divider-has-label": "true",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            margin: `${SPACING_MAP[props.spacing]} 0`,
+            color: "var(--iris-muted)",
+            fontSize: "12px",
+            textTransform: "uppercase",
+            letterSpacing: "0.04em",
+            ...attrs.style ?? {}
+          }
+        },
+        [
+          vue.h("span", { "data-iris-divider-line": "before", style: lineStyle() }),
+          vue.h("span", { "data-iris-divider-label": "" }, slots.default?.() ?? props.label),
+          vue.h("span", { "data-iris-divider-line": "after", style: lineStyle() })
+        ]
+      );
+    };
+  }
+});
+function lineStyle() {
+  return {
+    flex: "1",
+    height: "1px",
+    background: "var(--iris-border)"
+  };
+}
+
+// src/skeletons/LoginTemplate.ts
+var IrisLoginTemplate = vue.defineComponent({
+  name: "IrisLoginTemplate",
+  inheritAttrs: false,
+  props: {
+    title: { type: String, default: "Sign in" },
+    description: { type: String, default: "" },
+    /** Show "Remember me" checkbox. */
+    showRemember: { type: Boolean, default: true },
+    /** Error message shown above the form. */
+    error: { type: String, default: "" },
+    submitLabel: { type: String, default: "Sign in" },
+    /** Disable the entire form (e.g. while a request is pending). */
+    loading: { type: Boolean, default: false }
+  },
+  emits: {
+    submit: (_payload) => true
+  },
+  setup(props, { attrs, slots, emit }) {
+    const email = vue.ref("");
+    const password = vue.ref("");
+    const remember = vue.ref(false);
+    const onSubmit = (event) => {
+      event.preventDefault();
+      emit("submit", {
+        email: email.value,
+        password: password.value,
+        remember: remember.value
+      });
+    };
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        "data-iris-login-template": "",
+        style: {
+          minHeight: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "var(--iris-background)",
+          color: "var(--iris-foreground)",
+          padding: "24px",
+          ...attrs.style ?? {}
+        }
+      },
+      vue.h(IrisContainer, { maxWidth: "420px", padding: 0 }, () => [
+        vue.h(
+          "form",
+          {
+            onSubmit,
+            "data-iris-login-form": "",
+            style: {
+              background: "var(--iris-surface)",
+              border: "1px solid var(--iris-border)",
+              borderRadius: "var(--iris-radius-lg, 8px)",
+              padding: "32px",
+              boxShadow: "0 6px 20px -8px rgba(0, 0, 0, 0.16)"
+            }
+          },
+          [
+            vue.h(IrisStack, { spacing: "lg" }, () => [
+              slots.header ? slots.header() : vue.h("div", { style: { textAlign: "center" } }, [
+                vue.h(
+                  "h1",
+                  {
+                    style: {
+                      margin: "0 0 4px 0",
+                      fontSize: "22px",
+                      fontWeight: "700"
+                    }
+                  },
+                  props.title
+                ),
+                props.description ? vue.h(
+                  "p",
+                  {
+                    style: {
+                      margin: "0",
+                      color: "var(--iris-muted)",
+                      fontSize: "14px"
+                    }
+                  },
+                  props.description
+                ) : null
+              ]),
+              props.error ? vue.h(IrisAlert, { tone: "danger", title: props.error }) : null,
+              vue.h(
+                IrisFormField,
+                { label: "Email", required: true },
+                () => vue.h(IrisInput, {
+                  type: "email",
+                  modelValue: email.value,
+                  "onUpdate:modelValue": (v) => email.value = v,
+                  placeholder: "you@example.com",
+                  disabled: props.loading,
+                  autocomplete: "email"
+                })
+              ),
+              vue.h(
+                IrisFormField,
+                { label: "Password", required: true },
+                () => vue.h(IrisPasswordInput, {
+                  modelValue: password.value,
+                  "onUpdate:modelValue": (v) => password.value = v,
+                  placeholder: "Enter your password",
+                  disabled: props.loading,
+                  autocomplete: "current-password"
+                })
+              ),
+              props.showRemember ? vue.h(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between"
+                  }
+                },
+                [
+                  vue.h(
+                    IrisCheckbox,
+                    {
+                      modelValue: remember.value,
+                      "onUpdate:modelValue": (v) => {
+                        remember.value = v === true;
+                      },
+                      disabled: props.loading
+                    },
+                    () => "Remember me"
+                  ),
+                  slots.forgot ? slots.forgot() : null
+                ]
+              ) : null,
+              vue.h(
+                IrisButton,
+                {
+                  type: "submit",
+                  variant: "solid",
+                  loading: props.loading,
+                  style: { width: "100%" }
+                },
+                () => props.submitLabel
+              ),
+              slots.footer ? vue.h("div", null, [vue.h(IrisDivider, { spacing: "md", label: "or" }), slots.footer()]) : null
+            ])
+          ]
+        )
+      ])
+    );
+  }
+});
+var IrisSidebarLayout = vue.defineComponent({
+  name: "IrisSidebarLayout",
+  inheritAttrs: false,
+  props: {
+    collapsed: { type: Boolean, default: void 0 },
+    defaultCollapsed: { type: Boolean, default: false },
+    /** Sidebar width when expanded (px or CSS length). */
+    width: { type: [Number, String], default: 240 },
+    /** Sidebar width when collapsed. */
+    collapsedWidth: { type: [Number, String], default: 60 },
+    /** Sidebar position. */
+    side: { type: String, default: "left" }
+  },
+  emits: {
+    "update:collapsed": (_value) => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const isControlled = vue.computed(() => props.collapsed !== void 0);
+    const internalCollapsed = vue.ref(props.defaultCollapsed);
+    const collapsed = vue.computed(
+      () => isControlled.value ? Boolean(props.collapsed) : internalCollapsed.value
+    );
+    vue.watch(
+      () => props.collapsed,
+      (value) => {
+        if (value !== void 0) internalCollapsed.value = value;
+      }
+    );
+    const setCollapsed = (value) => {
+      if (!isControlled.value) internalCollapsed.value = value;
+      emit("update:collapsed", value);
+    };
+    const asLen = (v) => typeof v === "number" ? `${v}px` : v;
+    return () => {
+      const sidebarStyle = {
+        width: collapsed.value ? asLen(props.collapsedWidth) : asLen(props.width),
+        flexShrink: "0",
+        background: "var(--iris-surface)",
+        borderRight: props.side === "left" ? "1px solid var(--iris-border)" : "none",
+        borderLeft: props.side === "right" ? "1px solid var(--iris-border)" : "none",
+        transition: "width 180ms ease",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column"
+      };
+      const mainStyle = {
+        flex: "1",
+        minWidth: "0",
+        overflow: "auto",
+        background: "var(--iris-background)"
+      };
+      const direction = props.side === "right" ? "row-reverse" : "row";
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          "data-iris-sidebar-layout": "",
+          "data-collapsed": collapsed.value ? "" : void 0,
+          "data-side": props.side,
+          style: {
+            display: "flex",
+            flexDirection: direction,
+            width: "100%",
+            height: "100%",
+            minHeight: "0",
+            color: "var(--iris-foreground)",
+            ...attrs.style ?? {}
+          }
+        },
+        [
+          vue.h(
+            "aside",
+            {
+              role: "complementary",
+              "data-iris-sidebar": "",
+              "data-collapsed": collapsed.value ? "" : void 0,
+              style: sidebarStyle
+            },
+            slots.sidebar?.({ collapsed: collapsed.value, setCollapsed })
+          ),
+          vue.h("div", { "data-iris-sidebar-main": "", style: mainStyle }, slots.default?.())
+        ]
+      );
+    };
+  }
+});
+var IrisHeaderLayout = vue.defineComponent({
+  name: "IrisHeaderLayout",
+  inheritAttrs: false,
+  props: {
+    /** Header height (px or CSS length). Default `'auto'`. */
+    headerHeight: { type: [Number, String], default: "auto" },
+    /** Footer height (px or CSS length). Default `'auto'`. */
+    footerHeight: { type: [Number, String], default: "auto" },
+    /** When true, header sticks via `position: sticky` instead of static. */
+    sticky: { type: Boolean, default: true }
+  },
+  setup(props, { slots, attrs }) {
+    const asLen = (v) => typeof v === "number" ? `${v}px` : v;
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        "data-iris-header-layout": "",
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          minHeight: "0",
+          background: "var(--iris-background)",
+          color: "var(--iris-foreground)",
+          ...attrs.style ?? {}
+        }
+      },
+      [
+        slots.header ? vue.h(
+          "header",
+          {
+            role: "banner",
+            "data-iris-header": "",
+            style: {
+              flexShrink: "0",
+              height: asLen(props.headerHeight),
+              borderBottom: "1px solid var(--iris-border)",
+              background: "var(--iris-surface)",
+              position: props.sticky ? "sticky" : "static",
+              top: "0",
+              zIndex: "50"
+            }
+          },
+          slots.header()
+        ) : null,
+        vue.h(
+          "main",
+          {
+            role: "main",
+            "data-iris-header-main": "",
+            style: { flex: "1", minHeight: "0", overflow: "auto" }
+          },
+          slots.default?.()
+        ),
+        slots.footer ? vue.h(
+          "footer",
+          {
+            role: "contentinfo",
+            "data-iris-footer": "",
+            style: {
+              flexShrink: "0",
+              height: asLen(props.footerHeight),
+              borderTop: "1px solid var(--iris-border)",
+              background: "var(--iris-surface)"
+            }
+          },
+          slots.footer()
+        ) : null
+      ]
+    );
+  }
+});
+var IrisDashboardGrid = vue.defineComponent({
+  name: "IrisDashboardGrid",
+  inheritAttrs: false,
+  props: {
+    columns: { type: Number, default: 12 },
+    gap: { type: [Number, String], default: 16 },
+    /** Minimum column width via `grid-template-columns: repeat(auto-fill, minmax(...))`. */
+    minColWidth: { type: [Number, String], default: void 0 }
+  },
+  setup(props, { slots, attrs }) {
+    const gap = typeof props.gap === "number" ? `${props.gap}px` : props.gap;
+    return () => {
+      const gridTemplateColumns = props.minColWidth ? `repeat(auto-fill, minmax(${typeof props.minColWidth === "number" ? `${props.minColWidth}px` : props.minColWidth}, 1fr))` : `repeat(${props.columns}, 1fr)`;
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          "data-iris-dashboard-grid": "",
+          style: {
+            display: "grid",
+            gap,
+            gridTemplateColumns,
+            width: "100%",
+            ...attrs.style ?? {}
+          }
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+var IrisDashboardCard = vue.defineComponent({
+  name: "IrisDashboardCard",
+  inheritAttrs: false,
+  props: {
+    colSpan: { type: [Number, String], default: 1 },
+    rowSpan: { type: Number, default: 1 },
+    /** Show a styled card surface (background + border). Default `true`. */
+    surface: { type: Boolean, default: true }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const colSpan = props.colSpan === "full" ? "1 / -1" : `span ${props.colSpan}`;
+      const rowSpan = props.rowSpan > 1 ? `span ${props.rowSpan}` : void 0;
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          "data-iris-dashboard-card": "",
+          style: {
+            gridColumn: colSpan,
+            gridRow: rowSpan,
+            background: props.surface ? "var(--iris-surface)" : "transparent",
+            border: props.surface ? "1px solid var(--iris-border)" : "none",
+            borderRadius: "var(--iris-radius-md)",
+            padding: props.surface ? "var(--iris-padding-lg)" : "0",
+            minWidth: "0",
+            ...attrs.style ?? {}
+          }
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+// src/skeletons/DashboardTemplate.ts
+var IrisDashboardTemplate = vue.defineComponent({
+  name: "IrisDashboardTemplate",
+  inheritAttrs: false,
+  props: {
+    title: { type: String, default: "Dashboard" },
+    sidebarTitle: { type: String, default: "" },
+    nav: { type: Array, default: () => [] },
+    /** Currently active nav item id. */
+    activeId: { type: String, default: "" },
+    /** Cards to render in the main grid. Skip to use the `default` slot only. */
+    cards: { type: Array, default: () => [] },
+    defaultCollapsed: { type: Boolean, default: false }
+  },
+  emits: {
+    "update:activeId": (_id) => true,
+    "update:collapsed": (_value) => true
+  },
+  setup(props, { attrs, slots, emit }) {
+    const collapsed = vue.ref(props.defaultCollapsed);
+    const onSelectNav = (id) => {
+      emit("update:activeId", id);
+    };
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        "data-iris-dashboard-template": "",
+        style: {
+          width: "100%",
+          height: "100vh",
+          background: "var(--iris-background)",
+          color: "var(--iris-foreground)",
+          ...attrs.style ?? {}
+        }
+      },
+      vue.h(
+        IrisSidebarLayout,
+        {
+          collapsed: collapsed.value,
+          "onUpdate:collapsed": (v) => {
+            collapsed.value = v;
+            emit("update:collapsed", v);
+          },
+          width: 240,
+          collapsedWidth: 64
+        },
+        {
+          sidebar: (state) => vue.h(IrisStack, { spacing: "sm", style: { padding: "12px" } }, () => [
+            slots["sidebar-header"] ? slots["sidebar-header"](state) : props.sidebarTitle ? vue.h(
+              "div",
+              {
+                style: {
+                  padding: "8px 12px",
+                  fontSize: "14px",
+                  fontWeight: "600",
+                  color: "var(--iris-foreground)",
+                  opacity: state.collapsed ? 0 : 1,
+                  transition: "opacity 120ms ease",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden"
+                }
+              },
+              props.sidebarTitle
+            ) : null,
+            vue.h(
+              "nav",
+              {
+                "aria-label": "Primary",
+                style: { display: "flex", flexDirection: "column", gap: "2px" }
+              },
+              props.nav.map((item) => {
+                const isActive = item.id === props.activeId;
+                return vue.h(
+                  "button",
+                  {
+                    key: item.id,
+                    type: "button",
+                    "data-iris-dashboard-nav-item": item.id,
+                    "data-iris-dashboard-nav-active": isActive ? "true" : void 0,
+                    onClick: () => onSelectNav(item.id),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "10px",
+                      padding: "8px 12px",
+                      background: isActive ? "var(--iris-primary)" : "transparent",
+                      color: isActive ? "var(--iris-primary-foreground, #fff)" : "var(--iris-foreground)",
+                      border: "none",
+                      borderRadius: "var(--iris-radius-sm, 4px)",
+                      cursor: "pointer",
+                      fontSize: "14px",
+                      fontFamily: "inherit",
+                      textAlign: "start",
+                      outline: "none"
+                    }
+                  },
+                  [
+                    item.icon ? vue.h(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        style: {
+                          width: "16px",
+                          display: "inline-flex",
+                          justifyContent: "center"
+                        }
+                      },
+                      item.icon
+                    ) : null,
+                    vue.h(
+                      "span",
+                      {
+                        style: {
+                          opacity: state.collapsed ? 0 : 1,
+                          transition: "opacity 120ms ease",
+                          whiteSpace: "nowrap"
+                        }
+                      },
+                      item.label
+                    )
+                  ]
+                );
+              })
+            )
+          ]),
+          default: () => vue.h(IrisHeaderLayout, {}, {
+            header: () => slots.header ? slots.header() : vue.h(
+              "div",
+              {
+                style: {
+                  padding: "12px 20px",
+                  fontSize: "16px",
+                  fontWeight: "600"
+                }
+              },
+              props.title
+            ),
+            default: () => slots.default ? slots.default() : vue.h(
+              "div",
+              { style: { padding: "20px" } },
+              vue.h(
+                IrisDashboardGrid,
+                { columns: 12, gap: 16 },
+                () => props.cards.map(
+                  (card) => vue.h(
+                    IrisDashboardCard,
+                    {
+                      key: card.id,
+                      colSpan: card.colSpan ?? 4,
+                      rowSpan: card.rowSpan ?? 1,
+                      "data-iris-dashboard-card-id": card.id
+                    },
+                    () => [
+                      vue.h(
+                        "h3",
+                        {
+                          style: {
+                            margin: "0 0 8px 0",
+                            fontSize: "14px",
+                            fontWeight: "600",
+                            color: "var(--iris-foreground)"
+                          }
+                        },
+                        card.title
+                      ),
+                      slots[`card.${card.id}`] ? slots[`card.${card.id}`]() : card.body ? vue.h(
+                        "div",
+                        { style: { fontSize: "13px", color: "var(--iris-muted)" } },
+                        card.body
+                      ) : null
+                    ]
+                  )
+                )
+              )
+            )
+          })
+        }
+      )
+    );
+  }
+});
+
+exports.IrisDashboardTemplate = IrisDashboardTemplate;
+exports.IrisLoginTemplate = IrisLoginTemplate;
+//# sourceMappingURL=skeletons.cjs.map
+//# sourceMappingURL=skeletons.cjs.map