@birdapi/velinstyle 0.7.0 → 0.9.0

package/dist/chunks/velin-secure-field-OFNAXCDP.js

@@ -0,0 +1,95 @@
+import {
+  escapeHTML,
+  escapeHTMLAttribute,
+  sanitizeInputType
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-secure-field.js
+var styles = `
+  :host { display: block; }
+  label { display: block; font-size: var(--velin-text-sm); margin-block-end: var(--velin-space-1); }
+  input {
+    width: 100%;
+    min-height: 2.75rem;
+    padding: var(--velin-space-2) var(--velin-space-3);
+    font: inherit;
+    border: 1px solid var(--velin-color-border);
+    border-radius: var(--velin-radius-md);
+  }
+  input:focus-visible {
+    outline: 3px solid var(--velin-color-focus);
+    outline-offset: 2px;
+  }
+  .velin-field-help {
+    font-size: var(--velin-text-xs);
+    color: var(--velin-color-text-muted);
+    margin-block-start: var(--velin-space-1);
+  }
+`;
+async function encryptValue(plain, mode) {
+  if (mode !== "aes-gcm" || !globalThis.crypto?.subtle) {
+    return JSON.stringify({ encoding: "base64", payload: btoa(unescape(encodeURIComponent(plain))) });
+  }
+  const iv = crypto.getRandomValues(new Uint8Array(12));
+  const key = await crypto.subtle.generateKey({ name: "AES-GCM", length: 256 }, false, ["encrypt"]);
+  const encoded = new TextEncoder().encode(plain);
+  const cipher = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, key, encoded);
+  return JSON.stringify({
+    encoding: "aes-gcm",
+    iv: Array.from(iv),
+    cipher: Array.from(new Uint8Array(cipher))
+  });
+}
+var VelinSecureField = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["type", "name", "label", "mode", "autocomplete"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._onChange = null;
+  }
+  connectedCallback() {
+    if (!this._onChange) this.render();
+  }
+  disconnectedCallback() {
+    const input = this.shadowRoot?.querySelector("input");
+    if (input && this._onChange) input.removeEventListener("change", this._onChange);
+    this._onChange = null;
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) this.render();
+  }
+  render() {
+    const type = sanitizeInputType(this.getAttribute("type"));
+    const name = this.getAttribute("name") || "secure";
+    const label = this.getAttribute("label") || "Secure field";
+    const autocomplete = escapeHTMLAttribute(this.getAttribute("autocomplete") || "off");
+    const id = `velin-secure-${Math.random().toString(36).slice(2, 9)}`;
+    const input = this.shadowRoot?.querySelector("input");
+    if (input && this._onChange) input.removeEventListener("change", this._onChange);
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <label for="${id}">${escapeHTML(label)}</label>
+      <input id="${id}" type="${type}" autocomplete="${autocomplete}" part="input" />
+      <p class="velin-field-help">Demo-only client encoding \u2014 use HTTPS and server-side crypto for real secrets.</p>
+    `;
+    const newInput = this.shadowRoot.querySelector("input");
+    this._onChange = async () => {
+      const mode = this.getAttribute("mode") || "aes-gcm";
+      const payload = await encryptValue(newInput.value, mode);
+      this.dispatchEvent(new CustomEvent("velin-secure-submit", {
+        bubbles: true,
+        detail: { name, payload }
+      }));
+    };
+    newInput.addEventListener("change", this._onChange);
+  }
+};
+if (!customElements.get("velin-secure-field")) {
+  customElements.define("velin-secure-field", VelinSecureField);
+}
+var velin_secure_field_default = VelinSecureField;
+export {
+  velin_secure_field_default as default
+};

package/dist/chunks/velin-segmented-control-EKL4E3BL.js

@@ -0,0 +1,109 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-segmented-control.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: block; }
+  .group {
+    display: inline-flex;
+    gap: var(--velin-space-1, 0.25rem);
+    padding: var(--velin-space-1, 0.25rem);
+    background: var(--velin-color-surface-dim, #eee);
+    border-radius: var(--velin-radius-md, 0.5rem);
+  }
+  ::slotted(button) {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    border: none;
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--velin-color-text-muted, #666);
+    cursor: pointer;
+    font-size: var(--velin-text-sm, 0.875rem);
+  }
+  ::slotted(button[aria-pressed="true"]) {
+    background: var(--velin-color-surface-bright, #fff);
+    color: var(--velin-color-text, #111);
+    font-weight: var(--velin-weight-semibold, 600);
+    box-shadow: var(--velin-shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+  }
+`;
+var VelinSegmentedControl = class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._onClick = this._onClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute("aria-label") || "Segmented control");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="group" role="group" aria-label="${label}"><slot></slot></div>
+    `;
+    this.addEventListener("click", this._onClick);
+    this.addEventListener("keydown", this._onKey);
+    this.shadowRoot.querySelector("slot")?.addEventListener("slotchange", () => this._init());
+    this._init();
+  }
+  _getButtons() {
+    const slot = this.shadowRoot.querySelector("slot");
+    return slot ? slot.assignedElements().filter((el) => el.tagName === "BUTTON") : [];
+  }
+  _init() {
+    const buttons = this._getButtons();
+    const selected = buttons.find((b) => b.hasAttribute("selected")) || buttons[0];
+    buttons.forEach((btn, i) => {
+      btn.setAttribute("aria-pressed", btn === selected ? "true" : "false");
+      btn.setAttribute("tabindex", btn === selected ? "0" : "-1");
+    });
+  }
+  _onClick(e) {
+    const btn = e.target.closest("button");
+    if (!btn || !this.contains(btn)) return;
+    this._select(btn);
+  }
+  _select(btn) {
+    this._getButtons().forEach((b) => {
+      b.setAttribute("aria-pressed", b === btn ? "true" : "false");
+      b.setAttribute("tabindex", b === btn ? "0" : "-1");
+    });
+    this.dispatchEvent(new CustomEvent("velin-change", { bubbles: true, detail: { value: btn.value || btn.textContent?.trim() } }));
+  }
+  _onKey(e) {
+    const buttons = this._getButtons();
+    if (!buttons.includes(e.target)) return;
+    rovingTabindex(this, buttons, e);
+    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) {
+      const focused = buttons.find((b) => b.getAttribute("tabindex") === "0");
+      if (focused) this._select(focused);
+    }
+  }
+  static get observedAttributes() {
+    return ["aria-label"];
+  }
+  attributeChangedCallback(name) {
+    if (name === "aria-label") {
+      const group = this.shadowRoot?.querySelector(".group");
+      if (group) group.setAttribute("aria-label", escapeHTML(this.getAttribute("aria-label") || "Segmented control"));
+    }
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this._onClick);
+    this.removeEventListener("keydown", this._onKey);
+  }
+};
+customElements.define("velin-segmented-control", VelinSegmentedControl);
+var velin_segmented_control_default = VelinSegmentedControl;
+export {
+  velin_segmented_control_default as default
+};

package/dist/chunks/velin-segmented-control-GYD5BIXQ.js

@@ -0,0 +1,109 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-MKZP2TBH.js";
+
+// components/velin-segmented-control.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: block; }
+  .group {
+    display: inline-flex;
+    gap: var(--velin-space-1, 0.25rem);
+    padding: var(--velin-space-1, 0.25rem);
+    background: var(--velin-color-surface-dim, #eee);
+    border-radius: var(--velin-radius-md, 0.5rem);
+  }
+  ::slotted(button) {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    border: none;
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--velin-color-text-muted, #666);
+    cursor: pointer;
+    font-size: var(--velin-text-sm, 0.875rem);
+  }
+  ::slotted(button[aria-pressed="true"]) {
+    background: var(--velin-color-surface-bright, #fff);
+    color: var(--velin-color-text, #111);
+    font-weight: var(--velin-weight-semibold, 600);
+    box-shadow: var(--velin-shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+  }
+`;
+var VelinSegmentedControl = class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._onClick = this._onClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute("aria-label") || "Segmented control");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="group" role="group" aria-label="${label}"><slot></slot></div>
+    `;
+    this.addEventListener("click", this._onClick);
+    this.addEventListener("keydown", this._onKey);
+    this.shadowRoot.querySelector("slot")?.addEventListener("slotchange", () => this._init());
+    this._init();
+  }
+  _getButtons() {
+    const slot = this.shadowRoot.querySelector("slot");
+    return slot ? slot.assignedElements().filter((el) => el.tagName === "BUTTON") : [];
+  }
+  _init() {
+    const buttons = this._getButtons();
+    const selected = buttons.find((b) => b.hasAttribute("selected")) || buttons[0];
+    buttons.forEach((btn, i) => {
+      btn.setAttribute("aria-pressed", btn === selected ? "true" : "false");
+      btn.setAttribute("tabindex", btn === selected ? "0" : "-1");
+    });
+  }
+  _onClick(e) {
+    const btn = e.target.closest("button");
+    if (!btn || !this.contains(btn)) return;
+    this._select(btn);
+  }
+  _select(btn) {
+    this._getButtons().forEach((b) => {
+      b.setAttribute("aria-pressed", b === btn ? "true" : "false");
+      b.setAttribute("tabindex", b === btn ? "0" : "-1");
+    });
+    this.dispatchEvent(new CustomEvent("velin-change", { bubbles: true, detail: { value: btn.value || btn.textContent?.trim() } }));
+  }
+  _onKey(e) {
+    const buttons = this._getButtons();
+    if (!buttons.includes(e.target)) return;
+    rovingTabindex(this, buttons, e);
+    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) {
+      const focused = buttons.find((b) => b.getAttribute("tabindex") === "0");
+      if (focused) this._select(focused);
+    }
+  }
+  static get observedAttributes() {
+    return ["aria-label"];
+  }
+  attributeChangedCallback(name) {
+    if (name === "aria-label") {
+      const group = this.shadowRoot?.querySelector(".group");
+      if (group) group.setAttribute("aria-label", escapeHTML(this.getAttribute("aria-label") || "Segmented control"));
+    }
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this._onClick);
+    this.removeEventListener("keydown", this._onKey);
+  }
+};
+customElements.define("velin-segmented-control", VelinSegmentedControl);
+var velin_segmented_control_default = VelinSegmentedControl;
+export {
+  velin_segmented_control_default as default
+};

package/dist/chunks/velin-segmented-control-PQX6LKOJ.js

@@ -0,0 +1,109 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-LA7264K4.js";
+
+// components/velin-segmented-control.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: block; }
+  .group {
+    display: inline-flex;
+    gap: var(--velin-space-1, 0.25rem);
+    padding: var(--velin-space-1, 0.25rem);
+    background: var(--velin-color-surface-dim, #eee);
+    border-radius: var(--velin-radius-md, 0.5rem);
+  }
+  ::slotted(button) {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    border: none;
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--velin-color-text-muted, #666);
+    cursor: pointer;
+    font-size: var(--velin-text-sm, 0.875rem);
+  }
+  ::slotted(button[aria-pressed="true"]) {
+    background: var(--velin-color-surface-bright, #fff);
+    color: var(--velin-color-text, #111);
+    font-weight: var(--velin-weight-semibold, 600);
+    box-shadow: var(--velin-shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+  }
+`;
+var VelinSegmentedControl = class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._onClick = this._onClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute("aria-label") || "Segmented control");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="group" role="group" aria-label="${label}"><slot></slot></div>
+    `;
+    this.addEventListener("click", this._onClick);
+    this.addEventListener("keydown", this._onKey);
+    this.shadowRoot.querySelector("slot")?.addEventListener("slotchange", () => this._init());
+    this._init();
+  }
+  _getButtons() {
+    const slot = this.shadowRoot.querySelector("slot");
+    return slot ? slot.assignedElements().filter((el) => el.tagName === "BUTTON") : [];
+  }
+  _init() {
+    const buttons = this._getButtons();
+    const selected = buttons.find((b) => b.hasAttribute("selected")) || buttons[0];
+    buttons.forEach((btn, i) => {
+      btn.setAttribute("aria-pressed", btn === selected ? "true" : "false");
+      btn.setAttribute("tabindex", btn === selected ? "0" : "-1");
+    });
+  }
+  _onClick(e) {
+    const btn = e.target.closest("button");
+    if (!btn || !this.contains(btn)) return;
+    this._select(btn);
+  }
+  _select(btn) {
+    this._getButtons().forEach((b) => {
+      b.setAttribute("aria-pressed", b === btn ? "true" : "false");
+      b.setAttribute("tabindex", b === btn ? "0" : "-1");
+    });
+    this.dispatchEvent(new CustomEvent("velin-change", { bubbles: true, detail: { value: btn.value || btn.textContent?.trim() } }));
+  }
+  _onKey(e) {
+    const buttons = this._getButtons();
+    if (!buttons.includes(e.target)) return;
+    rovingTabindex(this, buttons, e);
+    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) {
+      const focused = buttons.find((b) => b.getAttribute("tabindex") === "0");
+      if (focused) this._select(focused);
+    }
+  }
+  static get observedAttributes() {
+    return ["aria-label"];
+  }
+  attributeChangedCallback(name) {
+    if (name === "aria-label") {
+      const group = this.shadowRoot?.querySelector(".group");
+      if (group) group.setAttribute("aria-label", escapeHTML(this.getAttribute("aria-label") || "Segmented control"));
+    }
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this._onClick);
+    this.removeEventListener("keydown", this._onKey);
+  }
+};
+customElements.define("velin-segmented-control", VelinSegmentedControl);
+var velin_segmented_control_default = VelinSegmentedControl;
+export {
+  velin_segmented_control_default as default
+};

package/dist/chunks/velin-sheet-3OGI4HD7.js

@@ -0,0 +1,119 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  clearBackgroundInert,
+  getFocusableElements,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-LA7264K4.js";
+
+// components/velin-sheet.js
+var styles = `
+  ${SHADOW_A11Y_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; }
+  .sheet {
+    position: fixed; inset-inline: 0; inset-block-end: 0;
+    z-index: var(--velin-z-modal, 500);
+    max-block-size: min(85vh, 32rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border-radius: var(--velin-radius-lg, 0.75rem) var(--velin-radius-lg, 0.75rem) 0 0;
+    box-shadow: var(--velin-shadow-xl, 0 -4px 24px rgba(0,0,0,0.12));
+    display: flex; flex-direction: column;
+    transform: translateY(100%);
+    transition: transform 250ms ease;
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+  }
+  :host([open]) .sheet { 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: 600; margin: 0; }
+  .body { flex: 1; overflow-y: auto; padding: var(--velin-space-5, 1.25rem); }
+  @media (prefers-reduced-motion: reduce) { .overlay, .sheet { transition: none; } }
+`;
+var VelinSheet = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["open"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._prev = null;
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const title = escapeHTML(this.getAttribute("title") || this.getAttribute("label") || "");
+    const titleId = "velin-sheet-title";
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay" part="overlay"></div>
+      <div class="sheet" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="sheet">
+        <div class="header" part="header">
+          <h2 class="title" id="${titleId}">${title}</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());
+    if (this.hasAttribute("open")) this._open();
+  }
+  attributeChangedCallback(name) {
+    if (name === "open") this.hasAttribute("open") ? this._open() : this._close();
+  }
+  open() {
+    this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+  _open() {
+    this._prev = saveFocus();
+    setBackgroundInert(this);
+    document.addEventListener("keydown", this._onKey);
+    document.body.style.overflow = "hidden";
+    requestAnimationFrame(() => {
+      const f = getFocusableElements(this.shadowRoot);
+      if (f.length) f[0].focus();
+    });
+  }
+  _close() {
+    document.removeEventListener("keydown", this._onKey);
+    document.body.style.overflow = "";
+    clearBackgroundInert();
+    restoreFocus(this._prev);
+  }
+  _onKey(e) {
+    if (e.key === "Escape") {
+      this.close();
+      return;
+    }
+    trapFocus(this.shadowRoot, e);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this._onKey);
+    document.body.style.overflow = "";
+  }
+};
+customElements.define("velin-sheet", VelinSheet);
+var velin_sheet_default = VelinSheet;
+export {
+  velin_sheet_default as default
+};

package/dist/chunks/velin-sheet-OUK6572T.js

@@ -0,0 +1,119 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  clearBackgroundInert,
+  getFocusableElements,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-MKZP2TBH.js";
+
+// components/velin-sheet.js
+var styles = `
+  ${SHADOW_A11Y_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; }
+  .sheet {
+    position: fixed; inset-inline: 0; inset-block-end: 0;
+    z-index: var(--velin-z-modal, 500);
+    max-block-size: min(85vh, 32rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border-radius: var(--velin-radius-lg, 0.75rem) var(--velin-radius-lg, 0.75rem) 0 0;
+    box-shadow: var(--velin-shadow-xl, 0 -4px 24px rgba(0,0,0,0.12));
+    display: flex; flex-direction: column;
+    transform: translateY(100%);
+    transition: transform 250ms ease;
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+  }
+  :host([open]) .sheet { 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: 600; margin: 0; }
+  .body { flex: 1; overflow-y: auto; padding: var(--velin-space-5, 1.25rem); }
+  @media (prefers-reduced-motion: reduce) { .overlay, .sheet { transition: none; } }
+`;
+var VelinSheet = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["open"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._prev = null;
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const title = escapeHTML(this.getAttribute("title") || this.getAttribute("label") || "");
+    const titleId = "velin-sheet-title";
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay" part="overlay"></div>
+      <div class="sheet" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="sheet">
+        <div class="header" part="header">
+          <h2 class="title" id="${titleId}">${title}</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());
+    if (this.hasAttribute("open")) this._open();
+  }
+  attributeChangedCallback(name) {
+    if (name === "open") this.hasAttribute("open") ? this._open() : this._close();
+  }
+  open() {
+    this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+  _open() {
+    this._prev = saveFocus();
+    setBackgroundInert(this);
+    document.addEventListener("keydown", this._onKey);
+    document.body.style.overflow = "hidden";
+    requestAnimationFrame(() => {
+      const f = getFocusableElements(this.shadowRoot);
+      if (f.length) f[0].focus();
+    });
+  }
+  _close() {
+    document.removeEventListener("keydown", this._onKey);
+    document.body.style.overflow = "";
+    clearBackgroundInert();
+    restoreFocus(this._prev);
+  }
+  _onKey(e) {
+    if (e.key === "Escape") {
+      this.close();
+      return;
+    }
+    trapFocus(this.shadowRoot, e);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this._onKey);
+    document.body.style.overflow = "";
+  }
+};
+customElements.define("velin-sheet", VelinSheet);
+var velin_sheet_default = VelinSheet;
+export {
+  velin_sheet_default as default
+};