@birdapi/velinstyle 1.2.1 → 1.3.0

package/dist/chunks/chunk-MYKUI364.js

@@ -0,0 +1,116 @@
+// components/runtime/component-loaders.js
+var COMPONENT_LOADERS = {
+  "velin-accordion": () => import("./velin-accordion-WSY6BMLA.js"),
+  "velin-announcer": () => import("./velin-announcer-PVTXXCWR.js"),
+  "velin-bottom-nav": () => import("./velin-bottom-nav-N5F4UO2I.js"),
+  "velin-calendar": () => import("./velin-calendar-XC7JRDSH.js"),
+  "velin-carousel": () => import("./velin-carousel-ZTBANFQQ.js"),
+  "velin-code-block": () => import("./velin-code-block-ZGWG7JI5.js"),
+  "velin-collapse": () => import("./velin-collapse-5XYBUIID.js"),
+  "velin-combobox": () => import("./velin-combobox-56V2ZWT5.js"),
+  "velin-command": () => import("./velin-command-ZJSLPK7B.js"),
+  "velin-copy": () => import("./velin-copy-XDQSV2XU.js"),
+  "velin-countdown": () => import("./velin-countdown-V4Z5MA63.js"),
+  "velin-counter": () => import("./velin-counter-L5FYJF7A.js"),
+  "velin-data-table": () => import("./velin-data-table-UVR42UUM.js"),
+  "velin-dialog": () => import("./velin-dialog-3YK2RPRV.js"),
+  "velin-drawer": () => import("./velin-drawer-A7Q7EBOS.js"),
+  "velin-dropdown": () => import("./velin-dropdown-PLUIFA5M.js"),
+  "velin-email": () => import("./velin-email-TNFONXPW.js"),
+  "velin-empty-state": () => import("./velin-empty-state-3NTUH2RF.js"),
+  "velin-file-dropzone": () => import("./velin-file-dropzone-QRGF2JNA.js"),
+  "velin-form-summary": () => import("./velin-form-summary-XRQ7COQH.js"),
+  "velin-icon": () => import("./velin-icon-A6NCXGUK.js"),
+  "velin-lightbox": () => import("./velin-lightbox-P725FLTY.js"),
+  "velin-live-dot": () => import("./velin-live-dot-RJHX2DGY.js"),
+  "velin-menubar": () => import("./velin-menubar-6I2LM5HL.js"),
+  "velin-modal": () => import("./velin-modal-3MV4FYBK.js"),
+  "velin-otp-input": () => import("./velin-otp-input-PSK42MM6.js"),
+  "velin-password-strength": () => import("./velin-password-strength-TAXMLSED.js"),
+  "velin-persist": () => import("./velin-persist-DFPL3QP4.js"),
+  "velin-popover": () => import("./velin-popover-WZG2GHBL.js"),
+  "velin-progress-ring": () => import("./velin-progress-ring-E4YRLZHH.js"),
+  "velin-rating": () => import("./velin-rating-QBBYRRBU.js"),
+  "velin-scroll-top": () => import("./velin-scroll-top-OHYVVHHY.js"),
+  "velin-scrollspy": () => import("./velin-scrollspy-OKCT4FDV.js"),
+  "velin-search": () => import("./velin-search-L3UG6NDQ.js"),
+  "velin-secure-field": () => import("./velin-secure-field-DGYMP7OK.js"),
+  "velin-segmented-control": () => import("./velin-segmented-control-P74GJPAR.js"),
+  "velin-sheet": () => import("./velin-sheet-N2VVYXFP.js"),
+  "velin-sparkline": () => import("./velin-sparkline-XVTFC6GE.js"),
+  "velin-stepper": () => import("./velin-stepper-4YQJUHPC.js"),
+  "velin-stepper-wc": () => import("./velin-stepper-4YQJUHPC.js"),
+  "velin-tabs": () => import("./velin-tabs-5UQ5ZVMV.js"),
+  "velin-theme-toggle": () => import("./velin-theme-toggle-J2NHC7IM.js"),
+  "velin-toast": () => import("./velin-toast-UG5LWTG2.js"),
+  "velin-tooltip": () => import("./velin-tooltip-ZDH5SDLU.js"),
+  "velin-tooltip-wc": () => import("./velin-tooltip-ZDH5SDLU.js")
+};
+
+// components/runtime/index.js
+var registry = /* @__PURE__ */ new Map();
+var VELIN_TAG_RE = /^velin-[a-z0-9-]+$/;
+function whenDefined(tagName) {
+  if (typeof customElements === "undefined") {
+    return Promise.reject(new Error("customElements not available"));
+  }
+  return customElements.whenDefined(tagName);
+}
+async function lazyDefine(tagName) {
+  const loader = COMPONENT_LOADERS[tagName];
+  if (!loader) {
+    throw new Error(`Unknown Velin component: ${tagName}`);
+  }
+  if (registry.has(tagName)) return registry.get(tagName);
+  const p = loader().then((mod) => {
+    const Cls = mod.default;
+    if (Cls && !customElements.get(tagName)) {
+      customElements.define(tagName, Cls);
+    }
+    return Cls;
+  });
+  registry.set(tagName, p);
+  return p;
+}
+async function register(tagNames) {
+  return Promise.all(tagNames.map((t) => lazyDefine(t)));
+}
+function collectTagsFromDOM(root) {
+  const tags = /* @__PURE__ */ new Set();
+  root.querySelectorAll("[data-velin-component]").forEach((el) => {
+    const name = el.getAttribute("data-velin-component");
+    if (name) tags.add(name.startsWith("velin-") ? name : `velin-${name}`);
+  });
+  for (const el of root.querySelectorAll("*")) {
+    const tag = el.tagName?.toLowerCase();
+    if (tag && VELIN_TAG_RE.test(tag) && COMPONENT_LOADERS[tag]) {
+      tags.add(tag);
+    }
+  }
+  return tags;
+}
+async function bootFromDOM(root = document, options = {}) {
+  const tags = options.tags?.length ? new Set(options.tags) : collectTagsFromDOM(root);
+  const wcPromise = register([...tags]);
+  if (options.attributes) {
+    const { bootAttributes } = await import("./attributes-HK7VIOLA.js");
+    await bootAttributes(root);
+  }
+  if (options.highlight) {
+    const { initHighlight } = await import("./highlight-M2ELQNYK.js");
+    initHighlight(root);
+  }
+  if (options.haptic) {
+    const { VelinHapticObserver } = await import("./velin-haptic-4QQTM3RK.js");
+    new VelinHapticObserver().start(root instanceof Document ? root.body : root);
+  }
+  return wcPromise;
+}
+
+export {
+  COMPONENT_LOADERS,
+  whenDefined,
+  lazyDefine,
+  register,
+  bootFromDOM
+};

package/dist/chunks/chunk-NEVBPD5T.js

@@ -0,0 +1,116 @@
+// components/runtime/component-loaders.js
+var COMPONENT_LOADERS = {
+  "velin-accordion": () => import("./velin-accordion-WSY6BMLA.js"),
+  "velin-announcer": () => import("./velin-announcer-PVTXXCWR.js"),
+  "velin-bottom-nav": () => import("./velin-bottom-nav-N5F4UO2I.js"),
+  "velin-calendar": () => import("./velin-calendar-XC7JRDSH.js"),
+  "velin-carousel": () => import("./velin-carousel-ZTBANFQQ.js"),
+  "velin-code-block": () => import("./velin-code-block-ZGWG7JI5.js"),
+  "velin-collapse": () => import("./velin-collapse-5XYBUIID.js"),
+  "velin-combobox": () => import("./velin-combobox-56V2ZWT5.js"),
+  "velin-command": () => import("./velin-command-ZJSLPK7B.js"),
+  "velin-copy": () => import("./velin-copy-XDQSV2XU.js"),
+  "velin-countdown": () => import("./velin-countdown-V4Z5MA63.js"),
+  "velin-counter": () => import("./velin-counter-L5FYJF7A.js"),
+  "velin-data-table": () => import("./velin-data-table-UVR42UUM.js"),
+  "velin-dialog": () => import("./velin-dialog-3YK2RPRV.js"),
+  "velin-drawer": () => import("./velin-drawer-A7Q7EBOS.js"),
+  "velin-dropdown": () => import("./velin-dropdown-PLUIFA5M.js"),
+  "velin-email": () => import("./velin-email-TNFONXPW.js"),
+  "velin-empty-state": () => import("./velin-empty-state-3NTUH2RF.js"),
+  "velin-file-dropzone": () => import("./velin-file-dropzone-QRGF2JNA.js"),
+  "velin-form-summary": () => import("./velin-form-summary-XRQ7COQH.js"),
+  "velin-icon": () => import("./velin-icon-A6NCXGUK.js"),
+  "velin-lightbox": () => import("./velin-lightbox-P725FLTY.js"),
+  "velin-live-dot": () => import("./velin-live-dot-RJHX2DGY.js"),
+  "velin-menubar": () => import("./velin-menubar-6I2LM5HL.js"),
+  "velin-modal": () => import("./velin-modal-3MV4FYBK.js"),
+  "velin-otp-input": () => import("./velin-otp-input-PSK42MM6.js"),
+  "velin-password-strength": () => import("./velin-password-strength-TAXMLSED.js"),
+  "velin-persist": () => import("./velin-persist-DFPL3QP4.js"),
+  "velin-popover": () => import("./velin-popover-WZG2GHBL.js"),
+  "velin-progress-ring": () => import("./velin-progress-ring-E4YRLZHH.js"),
+  "velin-rating": () => import("./velin-rating-QBBYRRBU.js"),
+  "velin-scroll-top": () => import("./velin-scroll-top-OHYVVHHY.js"),
+  "velin-scrollspy": () => import("./velin-scrollspy-OKCT4FDV.js"),
+  "velin-search": () => import("./velin-search-L3UG6NDQ.js"),
+  "velin-secure-field": () => import("./velin-secure-field-DGYMP7OK.js"),
+  "velin-segmented-control": () => import("./velin-segmented-control-P74GJPAR.js"),
+  "velin-sheet": () => import("./velin-sheet-N2VVYXFP.js"),
+  "velin-sparkline": () => import("./velin-sparkline-XVTFC6GE.js"),
+  "velin-stepper": () => import("./velin-stepper-4YQJUHPC.js"),
+  "velin-stepper-wc": () => import("./velin-stepper-4YQJUHPC.js"),
+  "velin-tabs": () => import("./velin-tabs-5UQ5ZVMV.js"),
+  "velin-theme-toggle": () => import("./velin-theme-toggle-32J2CBNC.js"),
+  "velin-toast": () => import("./velin-toast-UG5LWTG2.js"),
+  "velin-tooltip": () => import("./velin-tooltip-ZDH5SDLU.js"),
+  "velin-tooltip-wc": () => import("./velin-tooltip-ZDH5SDLU.js")
+};
+
+// components/runtime/index.js
+var registry = /* @__PURE__ */ new Map();
+var VELIN_TAG_RE = /^velin-[a-z0-9-]+$/;
+function whenDefined(tagName) {
+  if (typeof customElements === "undefined") {
+    return Promise.reject(new Error("customElements not available"));
+  }
+  return customElements.whenDefined(tagName);
+}
+async function lazyDefine(tagName) {
+  const loader = COMPONENT_LOADERS[tagName];
+  if (!loader) {
+    throw new Error(`Unknown Velin component: ${tagName}`);
+  }
+  if (registry.has(tagName)) return registry.get(tagName);
+  const p = loader().then((mod) => {
+    const Cls = mod.default;
+    if (Cls && !customElements.get(tagName)) {
+      customElements.define(tagName, Cls);
+    }
+    return Cls;
+  });
+  registry.set(tagName, p);
+  return p;
+}
+async function register(tagNames) {
+  return Promise.all(tagNames.map((t) => lazyDefine(t)));
+}
+function collectTagsFromDOM(root) {
+  const tags = /* @__PURE__ */ new Set();
+  root.querySelectorAll("[data-velin-component]").forEach((el) => {
+    const name = el.getAttribute("data-velin-component");
+    if (name) tags.add(name.startsWith("velin-") ? name : `velin-${name}`);
+  });
+  for (const el of root.querySelectorAll("*")) {
+    const tag = el.tagName?.toLowerCase();
+    if (tag && VELIN_TAG_RE.test(tag) && COMPONENT_LOADERS[tag]) {
+      tags.add(tag);
+    }
+  }
+  return tags;
+}
+async function bootFromDOM(root = document, options = {}) {
+  const tags = options.tags?.length ? new Set(options.tags) : collectTagsFromDOM(root);
+  const wcPromise = register([...tags]);
+  if (options.attributes) {
+    const { bootAttributes } = await import("./attributes-VRHHVNDO.js");
+    await bootAttributes(root);
+  }
+  if (options.highlight) {
+    const { initHighlight } = await import("./highlight-M2ELQNYK.js");
+    initHighlight(root);
+  }
+  if (options.haptic) {
+    const { VelinHapticObserver } = await import("./velin-haptic-4QQTM3RK.js");
+    new VelinHapticObserver().start(root instanceof Document ? root.body : root);
+  }
+  return wcPromise;
+}
+
+export {
+  COMPONENT_LOADERS,
+  whenDefined,
+  lazyDefine,
+  register,
+  bootFromDOM
+};

package/dist/chunks/chunk-Y6HN7HWX.js

@@ -0,0 +1,116 @@
+// components/runtime/component-loaders.js
+var COMPONENT_LOADERS = {
+  "velin-accordion": () => import("./velin-accordion-WSY6BMLA.js"),
+  "velin-announcer": () => import("./velin-announcer-PVTXXCWR.js"),
+  "velin-bottom-nav": () => import("./velin-bottom-nav-N5F4UO2I.js"),
+  "velin-calendar": () => import("./velin-calendar-XC7JRDSH.js"),
+  "velin-carousel": () => import("./velin-carousel-ZTBANFQQ.js"),
+  "velin-code-block": () => import("./velin-code-block-ZGWG7JI5.js"),
+  "velin-collapse": () => import("./velin-collapse-5XYBUIID.js"),
+  "velin-combobox": () => import("./velin-combobox-56V2ZWT5.js"),
+  "velin-command": () => import("./velin-command-ZJSLPK7B.js"),
+  "velin-copy": () => import("./velin-copy-XDQSV2XU.js"),
+  "velin-countdown": () => import("./velin-countdown-V4Z5MA63.js"),
+  "velin-counter": () => import("./velin-counter-L5FYJF7A.js"),
+  "velin-data-table": () => import("./velin-data-table-UVR42UUM.js"),
+  "velin-dialog": () => import("./velin-dialog-3YK2RPRV.js"),
+  "velin-drawer": () => import("./velin-drawer-A7Q7EBOS.js"),
+  "velin-dropdown": () => import("./velin-dropdown-PLUIFA5M.js"),
+  "velin-email": () => import("./velin-email-TNFONXPW.js"),
+  "velin-empty-state": () => import("./velin-empty-state-3NTUH2RF.js"),
+  "velin-file-dropzone": () => import("./velin-file-dropzone-QRGF2JNA.js"),
+  "velin-form-summary": () => import("./velin-form-summary-XRQ7COQH.js"),
+  "velin-icon": () => import("./velin-icon-A6NCXGUK.js"),
+  "velin-lightbox": () => import("./velin-lightbox-P725FLTY.js"),
+  "velin-live-dot": () => import("./velin-live-dot-RJHX2DGY.js"),
+  "velin-menubar": () => import("./velin-menubar-6I2LM5HL.js"),
+  "velin-modal": () => import("./velin-modal-3MV4FYBK.js"),
+  "velin-otp-input": () => import("./velin-otp-input-PSK42MM6.js"),
+  "velin-password-strength": () => import("./velin-password-strength-TAXMLSED.js"),
+  "velin-persist": () => import("./velin-persist-DFPL3QP4.js"),
+  "velin-popover": () => import("./velin-popover-WZG2GHBL.js"),
+  "velin-progress-ring": () => import("./velin-progress-ring-E4YRLZHH.js"),
+  "velin-rating": () => import("./velin-rating-QBBYRRBU.js"),
+  "velin-scroll-top": () => import("./velin-scroll-top-OHYVVHHY.js"),
+  "velin-scrollspy": () => import("./velin-scrollspy-OKCT4FDV.js"),
+  "velin-search": () => import("./velin-search-L3UG6NDQ.js"),
+  "velin-secure-field": () => import("./velin-secure-field-DGYMP7OK.js"),
+  "velin-segmented-control": () => import("./velin-segmented-control-P74GJPAR.js"),
+  "velin-sheet": () => import("./velin-sheet-N2VVYXFP.js"),
+  "velin-sparkline": () => import("./velin-sparkline-XVTFC6GE.js"),
+  "velin-stepper": () => import("./velin-stepper-4YQJUHPC.js"),
+  "velin-stepper-wc": () => import("./velin-stepper-4YQJUHPC.js"),
+  "velin-tabs": () => import("./velin-tabs-5UQ5ZVMV.js"),
+  "velin-theme-toggle": () => import("./velin-theme-toggle-32J2CBNC.js"),
+  "velin-toast": () => import("./velin-toast-UG5LWTG2.js"),
+  "velin-tooltip": () => import("./velin-tooltip-ZDH5SDLU.js"),
+  "velin-tooltip-wc": () => import("./velin-tooltip-ZDH5SDLU.js")
+};
+
+// components/runtime/index.js
+var registry = /* @__PURE__ */ new Map();
+var VELIN_TAG_RE = /^velin-[a-z0-9-]+$/;
+function whenDefined(tagName) {
+  if (typeof customElements === "undefined") {
+    return Promise.reject(new Error("customElements not available"));
+  }
+  return customElements.whenDefined(tagName);
+}
+async function lazyDefine(tagName) {
+  const loader = COMPONENT_LOADERS[tagName];
+  if (!loader) {
+    throw new Error(`Unknown Velin component: ${tagName}`);
+  }
+  if (registry.has(tagName)) return registry.get(tagName);
+  const p = loader().then((mod) => {
+    const Cls = mod.default;
+    if (Cls && !customElements.get(tagName)) {
+      customElements.define(tagName, Cls);
+    }
+    return Cls;
+  });
+  registry.set(tagName, p);
+  return p;
+}
+async function register(tagNames) {
+  return Promise.all(tagNames.map((t) => lazyDefine(t)));
+}
+function collectTagsFromDOM(root) {
+  const tags = /* @__PURE__ */ new Set();
+  root.querySelectorAll("[data-velin-component]").forEach((el) => {
+    const name = el.getAttribute("data-velin-component");
+    if (name) tags.add(name.startsWith("velin-") ? name : `velin-${name}`);
+  });
+  for (const el of root.querySelectorAll("*")) {
+    const tag = el.tagName?.toLowerCase();
+    if (tag && VELIN_TAG_RE.test(tag) && COMPONENT_LOADERS[tag]) {
+      tags.add(tag);
+    }
+  }
+  return tags;
+}
+async function bootFromDOM(root = document, options = {}) {
+  const tags = options.tags?.length ? new Set(options.tags) : collectTagsFromDOM(root);
+  const wcPromise = register([...tags]);
+  if (options.attributes) {
+    const { bootAttributes } = await import("./attributes-2ORR27KA.js");
+    await bootAttributes(root);
+  }
+  if (options.highlight) {
+    const { initHighlight } = await import("./highlight-M2ELQNYK.js");
+    initHighlight(root);
+  }
+  if (options.haptic) {
+    const { VelinHapticObserver } = await import("./velin-haptic-4QQTM3RK.js");
+    new VelinHapticObserver().start(root instanceof Document ? root.body : root);
+  }
+  return wcPromise;
+}
+
+export {
+  COMPONENT_LOADERS,
+  whenDefined,
+  lazyDefine,
+  register,
+  bootFromDOM
+};

package/dist/chunks/runtime-entry.js

@@ -4,7 +4,7 @@ import {
   lazyDefine,
   register,
   whenDefined
-} from "./chunk-CQMTCEI6.js";
+} from "./chunk-MYKUI364.js";
 export {
   COMPONENT_LOADERS,
   bootFromDOM,

package/dist/chunks/velin-drawer-A7Q7EBOS.js

@@ -0,0 +1,162 @@
+import {
+  clearBackgroundInert,
+  getFocusableElements,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import "./chunk-L7ZGUU4D.js";
+
+// components/velin-drawer.js
+var styles = `
+  :host { display: contents; }
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--velin-z-overlay, 400);
+    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .drawer {
+    position: fixed;
+    z-index: var(--velin-z-modal, 500);
+    background: var(--velin-color-surface-bright, #fff);
+    box-shadow: var(--velin-shadow-xl, 0 20px 25px rgba(0,0,0,0.1));
+    display: flex;
+    flex-direction: column;
+    transition: transform 250ms ease;
+    overflow: hidden;
+  }
+  /* Side positioning -- default = start */
+  .drawer { inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; inline-size: min(20rem, 85vw); transform: translateX(-100%); }
+  :host([open]) .drawer, :host([open][side="start"]) .drawer { transform: translateX(0); }
+  :host([side="end"]) .drawer { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(100%); }
+  :host([open][side="end"]) .drawer { transform: translateX(0); }
+  :host([side="top"]) .drawer { inset-inline: 0; inset-inline-start: 0; inset-block-start: 0; inset-block-end: auto; block-size: min(50vh, 24rem); inline-size: 100%; transform: translateY(-100%); }
+  :host([open][side="top"]) .drawer { transform: translateY(0); }
+  :host([side="bottom"]) .drawer { inset-inline: 0; inset-inline-start: 0; inset-block-start: auto; inset-block-end: 0; block-size: min(50vh, 24rem); inline-size: 100%; transform: translateY(100%); }
+  :host([open][side="bottom"]) .drawer { transform: translateY(0); }
+  .header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: var(--velin-space-4, 1rem) var(--velin-space-5, 1.25rem);
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  .title { font-size: var(--velin-text-lg, 1.25rem); font-weight: var(--velin-weight-semibold, 600); margin: 0; }
+  .close-btn {
+    min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
+    background: none; border: none; border-radius: var(--velin-radius-md, 0.5rem); cursor: pointer;
+    color: var(--velin-color-text-muted, #666); font-size: 1.5rem; line-height: 1;
+  }
+  .close-btn:hover { background: var(--velin-color-surface-dim, #eee); color: var(--velin-color-text, #111); }
+  .body { flex: 1; padding: var(--velin-space-5, 1.25rem); overflow-y: auto; }
+  @media (prefers-reduced-motion: reduce) { .overlay, .drawer { transition: none; } }
+`;
+var VelinDrawer = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["open", "title"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._prev = null;
+    this._onKey = this._onKey.bind(this);
+    this._onTitleSlot = this._onTitleSlot.bind(this);
+  }
+  connectedCallback() {
+    if (this.shadowRoot.querySelector(".drawer")) return;
+    const titleId = "velin-drawer-title";
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay" part="overlay"></div>
+      <div class="drawer" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="drawer">
+        <div class="header" part="header">
+          <h2 class="title" id="${titleId}" part="title">
+            <slot name="title"></slot>
+            <span class="title-fallback"></span>
+          </h2>
+          <button class="close-btn" aria-label="Close" part="close">&#215;</button>
+        </div>
+        <div class="body" part="body"><slot></slot></div>
+      </div>
+    `;
+    this.shadowRoot.querySelector(".close-btn").addEventListener("click", () => this.close());
+    this.shadowRoot.querySelector(".overlay").addEventListener("click", () => this.close());
+    this.shadowRoot.querySelector('slot[name="title"]').addEventListener("slotchange", this._onTitleSlot);
+    this._syncTitle();
+  }
+  attributeChangedCallback(name) {
+    if (name === "open") this.hasAttribute("open") ? this._open() : this._close();
+    if (name === "title") this._syncTitle();
+  }
+  open() {
+    this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+  _syncTitle() {
+    const fallback = this.shadowRoot?.querySelector(".title-fallback");
+    if (!fallback) return;
+    fallback.textContent = this.getAttribute("title") || "";
+  }
+  _hasTitleSlot() {
+    const slot = this.shadowRoot?.querySelector('slot[name="title"]');
+    if (!slot) return false;
+    return slot.assignedNodes({ flatten: true }).some((n) => {
+      if (n.nodeType === Node.TEXT_NODE) return Boolean(n.textContent.trim());
+      return n.nodeType === Node.ELEMENT_NODE;
+    });
+  }
+  _onTitleSlot() {
+    const dialog = this.shadowRoot?.querySelector('[role="dialog"]');
+    const fallback = this.shadowRoot?.querySelector(".title-fallback");
+    if (!dialog || !fallback) return;
+    if (this._hasTitleSlot()) {
+      fallback.hidden = true;
+      dialog.removeAttribute("aria-labelledby");
+      const slot = this.shadowRoot.querySelector('slot[name="title"]');
+      const label = slot.assignedNodes({ flatten: true }).map((n) => n.textContent || "").join(" ").trim();
+      if (label) dialog.setAttribute("aria-label", label);
+    } else {
+      fallback.hidden = false;
+      dialog.removeAttribute("aria-label");
+      dialog.setAttribute("aria-labelledby", "velin-drawer-title");
+      this._syncTitle();
+    }
+  }
+  _open() {
+    this._prev = saveFocus();
+    setBackgroundInert(this);
+    document.addEventListener("keydown", this._onKey);
+    requestAnimationFrame(() => {
+      const f = getFocusableElements(this.shadowRoot);
+      if (f.length) f[0].focus();
+    });
+  }
+  _close() {
+    document.removeEventListener("keydown", this._onKey);
+    clearBackgroundInert(this);
+    restoreFocus(this._prev);
+  }
+  _onKey(e) {
+    if (e.key === "Escape") {
+      this.close();
+      return;
+    }
+    trapFocus(this.shadowRoot, e);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this._onKey);
+    clearBackgroundInert(this);
+  }
+};
+customElements.define("velin-drawer", VelinDrawer);
+var velin_drawer_default = VelinDrawer;
+export {
+  velin_drawer_default as default
+};

package/dist/chunks/velin-empty-state-3NTUH2RF.js

@@ -0,0 +1,81 @@
+// components/velin-empty-state.js
+var styles = `
+  :host {
+    display: block;
+    text-align: center;
+    padding: var(--velin-space-8, 2rem) var(--velin-space-4, 1rem);
+  }
+  .illustration {
+    display: flex;
+    justify-content: center;
+    margin-block-end: var(--velin-space-4, 1rem);
+    color: var(--velin-color-text-muted, #666);
+  }
+  .title {
+    margin: 0 0 var(--velin-space-2, 0.5rem);
+    font-size: var(--velin-text-xl, 1.25rem);
+    font-weight: var(--velin-weight-bold, 700);
+    color: var(--velin-color-text, #111);
+  }
+  .description {
+    margin: 0 0 var(--velin-space-4, 1rem);
+    color: var(--velin-color-text-muted, #666);
+    max-inline-size: 36rem;
+    margin-inline: auto;
+  }
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--velin-space-3, 0.75rem);
+    justify-content: center;
+  }
+`;
+var VelinEmptyState = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["heading", "description"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (this.shadowRoot.querySelector(".root")) {
+      this._syncText();
+      return;
+    }
+    const titleId = "velin-empty-title";
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <section class="root" part="root" role="status" aria-labelledby="${titleId}">
+        <div class="illustration" part="illustration"><slot name="illustration"></slot></div>
+        <h2 class="title" id="${titleId}" part="title">
+          <slot name="title"><span class="heading-fallback"></span></slot>
+        </h2>
+        <div class="description" part="description">
+          <slot name="description"><span class="description-fallback"></span></slot>
+        </div>
+        <div class="actions" part="actions"><slot name="actions"></slot></div>
+        <slot></slot>
+      </section>
+    `;
+    this._syncText();
+  }
+  attributeChangedCallback() {
+    this._syncText();
+  }
+  _syncText() {
+    const heading = this.shadowRoot?.querySelector(".heading-fallback");
+    const description = this.shadowRoot?.querySelector(".description-fallback");
+    if (heading) heading.textContent = this.getAttribute("heading") || "Nothing here yet";
+    if (description) {
+      const text = this.getAttribute("description") || "";
+      description.textContent = text;
+      description.hidden = !text;
+    }
+  }
+};
+customElements.define("velin-empty-state", VelinEmptyState);
+var velin_empty_state_default = VelinEmptyState;
+export {
+  velin_empty_state_default as default
+};