@birdapi/velinstyle 1.2.2 → 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/runtime-entry.js

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

package/dist/chunks/velin-theme-toggle-J2NHC7IM.js

@@ -0,0 +1,304 @@
+// components/velin-theme-toggle.js
+var THEMES = [
+  { slug: "", label: "Default (Light)" },
+  { slug: "dark", label: "Dark" },
+  { slug: "brutalist", label: "Brutalist" },
+  { slug: "corporate", label: "Corporate" },
+  { slug: "earth", label: "Earth" },
+  { slug: "forest", label: "Forest" },
+  { slug: "midnight", label: "Midnight" },
+  { slug: "neon", label: "Neon" },
+  { slug: "nordic", label: "Nordic" },
+  { slug: "ocean", label: "Ocean" },
+  { slug: "pastel", label: "Pastel" },
+  { slug: "retro", label: "Retro" },
+  { slug: "sharp", label: "Sharp" },
+  { slug: "soft", label: "Soft" },
+  { slug: "sunset", label: "Sunset" }
+];
+var BUILTIN_THEMES = /* @__PURE__ */ new Set(["", "dark"]);
+var DARK_THEME_SLUGS = /* @__PURE__ */ new Set(["dark", "midnight", "neon"]);
+var loadedThemeStylesheets = /* @__PURE__ */ new Set();
+function applyColorScheme(target, slug) {
+  const dark = DARK_THEME_SLUGS.has(slug);
+  if (target === document.documentElement || target === document.body) {
+    target.style.colorScheme = dark ? "dark" : "light";
+  }
+  target.setAttribute("data-velin-color-scheme", dark ? "dark" : "light");
+}
+function ensureThemeStylesheet(slug, base) {
+  if (!slug || BUILTIN_THEMES.has(slug)) return;
+  if (loadedThemeStylesheets.has(slug)) return;
+  const existing = document.querySelector(`link[data-velin-theme-css="${slug}"]`);
+  if (existing) {
+    loadedThemeStylesheets.add(slug);
+    return;
+  }
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = `${base.replace(/\/$/, "")}/${slug}.min.css`;
+  link.setAttribute("data-velin-theme-css", slug);
+  document.head.appendChild(link);
+  loadedThemeStylesheets.add(slug);
+}
+var styles = `
+  :host { display: inline-flex; position: relative; }
+  .group {
+    display: inline-flex; align-items: stretch;
+    border: 2px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    background: none;
+    overflow: hidden;
+  }
+  button {
+    display: inline-flex; align-items: center; justify-content: center;
+    min-height: 2.75rem; padding: 0.5rem;
+    background: none; border: 0; cursor: pointer;
+    color: var(--velin-color-text, #111);
+    transition: background 150ms ease;
+  }
+  button:hover { background: var(--velin-color-surface-dim, #eee); }
+  button:focus-visible {
+    outline: 3px solid var(--velin-color-focus, #2563eb);
+    outline-offset: 2px;
+  }
+  .toggle { min-width: 2.75rem; }
+  .picker {
+    min-width: 1.75rem;
+    border-inline-start: 1px solid var(--velin-color-border, #ddd);
+    color: var(--velin-color-text-muted, #555);
+  }
+  svg { width: 1.25rem; height: 1.25rem; transition: transform 300ms ease; }
+  .chev { width: 0.75rem; height: 0.75rem; }
+  :host([theme="dark"]) .sun { display: none; }
+  :host(:not([theme="dark"])) .moon { display: none; }
+  :host([compact]) .picker { display: none; }
+  :host([compact]) .toggle { border-inline-end: 0; }
+  @media (prefers-reduced-motion: reduce) { svg { transition: none; } }
+
+  .menu {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    inset-inline-end: 0;
+    z-index: 1000;
+    min-width: 12rem;
+    padding: 0.375rem;
+    background: var(--velin-color-surface-bright, #fff);
+    border: 1px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    box-shadow: var(--velin-shadow-lg, 0 12px 32px rgba(0,0,0,0.12));
+    list-style: none;
+    margin: 0;
+    display: none;
+    max-height: min(70vh, 24rem);
+    overflow-y: auto;
+  }
+  :host([menu-open]) .menu { display: block; }
+  .menu li { margin: 0; }
+  .menu button {
+    width: 100%;
+    justify-content: flex-start;
+    padding: 0.4rem 0.75rem;
+    font-size: 0.875rem;
+    color: var(--velin-color-text, #111);
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    min-height: 2rem;
+    text-align: start;
+  }
+  .menu button:hover,
+  .menu button[aria-current="true"] {
+    background: var(--velin-color-primary-subtle, #eef);
+    color: var(--velin-color-primary, #2a4cf0);
+  }
+  .menu button[aria-current="true"] {
+    font-weight: 600;
+  }
+  .menu .swatch {
+    width: 0.75rem; height: 0.75rem;
+    border-radius: 50%;
+    margin-inline-end: 0.5rem;
+    background: currentColor;
+    border: 1px solid var(--velin-color-border, #ddd);
+  }
+`;
+var VelinThemeToggle = class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._onDocClick = this._onDocClick.bind(this);
+    this._onKeyDown = this._onKeyDown.bind(this);
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="group" part="group">
+        <button class="toggle" part="button" aria-label="Toggle dark mode" aria-pressed="false">
+          <svg class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false">
+            <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+            <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+          </svg>
+          <svg class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false">
+            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
+          </svg>
+        </button>
+        <button class="picker" part="picker" aria-label="Choose theme" aria-haspopup="menu" aria-expanded="false">
+          <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+            <polyline points="6 9 12 15 18 9"/>
+          </svg>
+        </button>
+      </div>
+      <ul class="menu" role="menu" aria-label="Theme selection" hidden></ul>
+    `;
+    this._target = document.querySelector(this.getAttribute("target") || "html");
+    this._themesBase = this.getAttribute("themes-base") || "dist/themes";
+    this._menu = this.shadowRoot.querySelector(".menu");
+    this._toggleBtn = this.shadowRoot.querySelector(".toggle");
+    this._pickerBtn = this.shadowRoot.querySelector(".picker");
+    this._renderMenu();
+    this._initPreference();
+    this._syncTogglePressed();
+    this._toggleBtn.addEventListener("click", () => this._toggleDarkMode());
+    this._pickerBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._toggleMenu();
+    });
+    document.addEventListener("click", this._onDocClick);
+    this.shadowRoot.addEventListener("keydown", this._onKeyDown);
+    const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)");
+    prefersDarkMq.addEventListener("change", () => this._applyFromPreference());
+    window.addEventListener("storage", (e) => {
+      if (e.key === "velin-theme") this._readStorage();
+    });
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this._onDocClick);
+  }
+  _renderMenu() {
+    this._menu.innerHTML = THEMES.map((t) => `
+      <li role="none">
+        <button type="button" role="menuitem" data-theme="${t.slug}">
+          <span class="swatch" aria-hidden="true" data-theme-swatch="${t.slug}"></span>
+          ${t.label}
+        </button>
+      </li>
+    `).join("");
+    this._menu.removeAttribute("hidden");
+    this._menu.querySelectorAll("button[data-theme]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const slug = btn.getAttribute("data-theme");
+        this._applyTheme(slug, { persist: true });
+        this._closeMenu();
+      });
+    });
+  }
+  _toggleMenu() {
+    if (this.hasAttribute("menu-open")) this._closeMenu();
+    else this._openMenu();
+  }
+  _openMenu() {
+    this.setAttribute("menu-open", "");
+    this._pickerBtn.setAttribute("aria-expanded", "true");
+    this._highlightActive();
+    const first = this._menu.querySelector("button[data-theme]");
+    if (first) first.focus();
+  }
+  _closeMenu() {
+    this.removeAttribute("menu-open");
+    this._pickerBtn.setAttribute("aria-expanded", "false");
+  }
+  _onDocClick(e) {
+    if (!this.hasAttribute("menu-open")) return;
+    if (e.composedPath().includes(this)) return;
+    this._closeMenu();
+  }
+  _onKeyDown(e) {
+    if (!this.hasAttribute("menu-open")) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this._closeMenu();
+      this._pickerBtn.focus();
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const items = Array.from(this._menu.querySelectorAll("button[data-theme]"));
+      const idx = items.indexOf(this.shadowRoot.activeElement);
+      const next = e.key === "ArrowDown" ? items[(idx + 1) % items.length] : items[(idx - 1 + items.length) % items.length];
+      next?.focus();
+    }
+  }
+  _highlightActive() {
+    const current = this._currentSlug();
+    this._menu.querySelectorAll("button[data-theme]").forEach((btn) => {
+      const slug = btn.getAttribute("data-theme");
+      if (slug === current) btn.setAttribute("aria-current", "true");
+      else btn.removeAttribute("aria-current");
+    });
+  }
+  _currentSlug() {
+    if (!this._target) return "";
+    const value = this._target.getAttribute("data-velin-theme");
+    if (!value || value === "light") return "";
+    return value;
+  }
+  _initPreference() {
+    const stored = localStorage.getItem("velin-theme");
+    if (stored) {
+      this._applyTheme(stored, { persist: false });
+      return;
+    }
+    this._applyFromPreference();
+  }
+  _readStorage() {
+    const stored = localStorage.getItem("velin-theme");
+    this._applyTheme(stored || "", { persist: false });
+  }
+  _applyFromPreference() {
+    if (localStorage.getItem("velin-theme")) return;
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    this._applyTheme(prefersDark ? "dark" : "", { persist: false });
+  }
+  _applyTheme(slug, { persist }) {
+    const normalized = !slug || slug === "light" ? "" : slug;
+    if (!this._target) return;
+    if (!normalized) {
+      this._target.removeAttribute("data-velin-theme");
+      this.removeAttribute("theme");
+    } else {
+      this._target.setAttribute("data-velin-theme", normalized);
+      this.setAttribute("theme", normalized === "dark" ? "dark" : normalized);
+      ensureThemeStylesheet(normalized, this._themesBase);
+    }
+    applyColorScheme(this._target, normalized);
+    if (persist) {
+      if (!normalized) localStorage.removeItem("velin-theme");
+      else localStorage.setItem("velin-theme", normalized);
+    }
+    this._highlightActive();
+    this.dispatchEvent(new CustomEvent("velin-theme-change", {
+      bubbles: true,
+      detail: {
+        theme: normalized || "light",
+        dark: DARK_THEME_SLUGS.has(normalized),
+        slug: normalized
+      }
+    }));
+  }
+  _syncTogglePressed() {
+    const dark = this._currentSlug() === "dark";
+    this._toggleBtn?.setAttribute("aria-pressed", dark ? "true" : "false");
+  }
+  _toggleDarkMode() {
+    const current = this._currentSlug();
+    const next = current === "dark" ? "" : "dark";
+    this._applyTheme(next, { persist: true });
+    this._syncTogglePressed();
+  }
+};
+customElements.define("velin-theme-toggle", VelinThemeToggle);
+var velin_theme_toggle_default = VelinThemeToggle;
+export {
+  velin_theme_toggle_default as default
+};

package/dist/llms.txt

@@ -1,4 +1,4 @@
-# VelinStyle 1.2.2
+# VelinStyle 1.3.0
 
 > VelinStyle is a CSS framework with WCAG 2.2 AAA-oriented defaults, native JavaScript runtime, and Web Components.
 > Full machine context: https://velinstyle.info/dist/velin-agent.json
@@ -11,7 +11,7 @@
 - Maturity: CSS/Web Components/runtime = stable; plan/review, knowledge graph, page/section registry, agent metadata = beta/foundation (seed, expanding); Studio + Utility Engine generator = planned
 - Components: 43 canonical Web Components (`velin-*`); 45 lazy-loader entries
 - Knowledge graph: 20 component nodes, 17 page types, 12 sections, 3 design constraint packs
-- HTML attributes: 29 `velin-*` bridges
+- HTML attributes: 36 `velin-*` bridges
 - CLI: velinstyle (scan, scaffold, plan, review, docs generate, search index, meta)
 
 ## Agent briefing