@birdapi/velinstyle 0.7.0 → 0.9.0

package/dist/chunks/velin-search-LWHY23Q5.js

@@ -0,0 +1,474 @@
+import {
+  escapeHTMLAttribute,
+  sanitizeSearchUrl
+} from "./chunk-LA7264K4.js";
+
+// core/search/types.js
+var SEARCH_CATEGORIES = (
+  /** @type {const} */
+  ["docs", "components", "api", "examples"]
+);
+var CATEGORY_BOOST = {
+  components: 1.25,
+  api: 1.15,
+  docs: 1,
+  examples: 0.9
+};
+function normalizeEntry(entry) {
+  if (!entry || typeof entry !== "object") return null;
+  const e = (
+    /** @type {Record<string, unknown>} */
+    entry
+  );
+  const id = String(e.id || e.url || e.title || "").trim();
+  const title = String(e.title || "").trim();
+  const url = String(e.url || "").trim();
+  if (!id || !title) return null;
+  const keywords = Array.isArray(e.keywords) ? e.keywords.map((k) => String(k)) : typeof e.keywords === "string" ? e.keywords.split(/\s+/).filter(Boolean) : [];
+  let category = (
+    /** @type {SearchCategory} */
+    SEARCH_CATEGORIES.includes(
+      /** @type {SearchCategory} */
+      e.category
+    ) ? e.category : "docs"
+  );
+  if (!e.category && typeof e.url === "string") {
+    if (e.url.includes("/components/")) category = "components";
+    else if (e.url.includes("/cli/") || e.url.includes("/api/")) category = "api";
+    else if (e.url.includes("samples/") || e.url.includes("examples/")) category = "examples";
+  }
+  const safeUrl = url ? sanitizeSearchUrl(url) : `#${id}`;
+  return {
+    id,
+    title,
+    excerpt: String(e.excerpt || e.section || "").slice(0, 200),
+    url: safeUrl,
+    category: (
+      /** @type {SearchCategory} */
+      category
+    ),
+    keywords,
+    weight: typeof e.weight === "number" ? e.weight : 1
+  };
+}
+
+// core/search/engine.js
+var VelinSearchEngine = class {
+  constructor() {
+    this._entries = [];
+  }
+  /** @param {import('./types.js').SearchEntry[]} entries */
+  setEntries(entries) {
+    this._entries = entries.map((e) => normalizeEntry(e)).filter(Boolean);
+  }
+  /** @param {import('./types.js').SearchEntry[]} entries */
+  addEntries(entries) {
+    const next = entries.map((e) => normalizeEntry(e)).filter(Boolean);
+    const ids = new Set(this._entries.map((e) => e.id));
+    for (const e of next) {
+      if (!ids.has(e.id)) {
+        this._entries.push(e);
+        ids.add(e.id);
+      }
+    }
+  }
+  /**
+   * @param {string} query
+   * @param {object} [opts]
+   * @param {number} [opts.limit]
+   * @param {number} [opts.minChars]
+   * @param {number} [opts.fuzzy] 0–1 threshold for typo tolerance
+   * @param {import('./types.js').SearchCategory[]} [opts.categories]
+   */
+  query(query, opts = {}) {
+    const q = String(query || "").trim().toLowerCase();
+    const minChars = opts.minChars ?? 2;
+    const limit = opts.limit ?? 12;
+    const fuzzy = opts.fuzzy ?? 0.2;
+    const categories = opts.categories;
+    if (q.length < minChars) {
+      return { results: [], groups: {} };
+    }
+    const scored = [];
+    for (const entry of this._entries) {
+      if (categories && categories.length && !categories.includes(entry.category)) continue;
+      const s = scoreEntry(entry, q, fuzzy);
+      if (s > 0) scored.push({ entry, score: s });
+    }
+    scored.sort((a, b) => b.score - a.score);
+    const results = scored.slice(0, limit).map((x) => ({ ...x.entry, _score: x.score }));
+    const groups = {};
+    for (const r of results) {
+      if (!groups[r.category]) groups[r.category] = [];
+      groups[r.category].push(r);
+    }
+    return { results, groups };
+  }
+};
+function scoreEntry(entry, q, fuzzy) {
+  const title = entry.title.toLowerCase();
+  const excerpt = (entry.excerpt || "").toLowerCase();
+  const keywords = (entry.keywords || []).join(" ").toLowerCase();
+  const boost = (CATEGORY_BOOST[entry.category] || 1) * (entry.weight || 1);
+  let score = 0;
+  if (title === q) score = 100;
+  else if (title.startsWith(q)) score = 70;
+  else if (title.includes(q)) score = 50;
+  else if (keywords.includes(q)) score = 35;
+  else if (excerpt.includes(q)) score = 25;
+  else if (fuzzy > 0 && fuzzyMatch(title, q, fuzzy)) score = 40;
+  else if (fuzzy > 0 && fuzzyMatch(keywords, q, fuzzy)) score = 28;
+  else if (fuzzy > 0 && fuzzyMatch(excerpt, q, fuzzy)) score = 18;
+  else if (subsequenceMatch(title, q)) score = 22;
+  else if (fuzzy > 0) {
+    for (const word of title.split(/[^a-z0-9]+/)) {
+      if (word.length >= 3 && fuzzyMatch(word, q, fuzzy)) {
+        score = 32;
+        break;
+      }
+    }
+  }
+  return score > 0 ? score * boost : 0;
+}
+function subsequenceMatch(haystack, needle) {
+  let j = 0;
+  for (let i = 0; i < haystack.length && j < needle.length; i++) {
+    if (haystack[i] === needle[j]) j++;
+  }
+  return j === needle.length;
+}
+function fuzzyMatch(text, query, threshold) {
+  if (!text || !query) return false;
+  if (text.includes(query)) return true;
+  if (subsequenceMatch(text, query)) return true;
+  const maxDist = Math.max(1, Math.floor(query.length * threshold * 2));
+  return levenshtein(text.slice(0, Math.min(text.length, query.length + 8)), query) <= maxDist;
+}
+function levenshtein(a, b) {
+  const m = a.length;
+  const n = b.length;
+  if (m === 0) return n;
+  if (n === 0) return m;
+  const dp = new Uint16Array((n + 1) * (m + 1));
+  for (let j = 0; j <= n; j++) dp[j] = j;
+  for (let i = 1; i <= m; i++) {
+    dp[i * (n + 1)] = i;
+    for (let j = 1; j <= n; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      dp[i * (n + 1) + j] = Math.min(
+        dp[(i - 1) * (n + 1) + j] + 1,
+        dp[i * (n + 1) + (j - 1)] + 1,
+        dp[(i - 1) * (n + 1) + (j - 1)] + cost
+      );
+    }
+  }
+  return dp[m * (n + 1) + n];
+}
+
+// core/search/highlight.js
+function highlightHtml(text, query) {
+  const raw = String(text || "");
+  const q = String(query || "").trim();
+  if (!q || q.length < 2) return escapeHtml(raw);
+  const lower = raw.toLowerCase();
+  const ql = q.toLowerCase();
+  let start = lower.indexOf(ql);
+  let len = q.length;
+  if (start === -1) {
+    start = fuzzySubsequenceIndex(lower, ql);
+    if (start === -1) return escapeHtml(raw);
+    len = Math.min(q.length, raw.length - start);
+  }
+  return escapeHtml(raw.slice(0, start)) + '<mark class="velin-search-hit">' + escapeHtml(raw.slice(start, start + len)) + "</mark>" + escapeHtml(raw.slice(start + len));
+}
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function fuzzySubsequenceIndex(haystack, needle) {
+  let j = 0;
+  let start = -1;
+  for (let i = 0; i < haystack.length && j < needle.length; i++) {
+    if (haystack[i] === needle[j]) {
+      if (j === 0) start = i;
+      j++;
+    }
+  }
+  return j === needle.length ? start : -1;
+}
+
+// core/search/index.js
+var defaultEngine = new VelinSearchEngine();
+function parseIndexPayload(data) {
+  if (Array.isArray(data)) return data;
+  if (data && Array.isArray(data.entries)) return data.entries;
+  return [];
+}
+function createSearch(config = {}) {
+  const engine = new VelinSearchEngine();
+  const wantWorker = config.worker === true;
+  let workerClient = null;
+  async function getWorker() {
+    if (!wantWorker || workerClient) return workerClient;
+    if (typeof Worker === "undefined") return null;
+    const { createSearchWorker } = await import("./worker-client-R6DBYPFT.js");
+    workerClient = createSearchWorker(config.workerUrl);
+    return workerClient;
+  }
+  return {
+    engine,
+    async loadIndex(source) {
+      let entries = [];
+      if (typeof source === "string") {
+        const res = await fetch(source);
+        entries = parseIndexPayload(await res.json());
+      } else if (Array.isArray(source)) {
+        entries = source;
+      }
+      engine.setEntries(entries);
+      const w = await getWorker();
+      if (w) await w.setEntries(engine._entries);
+      return entries.length;
+    },
+    async query(q, opts) {
+      const w = await getWorker();
+      if (w) return w.query(q, opts);
+      return engine.query(q, opts);
+    },
+    addEntries(entries) {
+      engine.addEntries(entries);
+      void getWorker().then((w) => w?.setEntries(engine._entries));
+    }
+  };
+}
+
+// components/velin-search.js
+var CATEGORY_LABELS = {
+  docs: "Documentation",
+  components: "Components",
+  api: "API",
+  examples: "Examples"
+};
+var VelinSearch = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["index", "categories", "min-chars", "fuzzy", "placeholder", "debounce"];
+  }
+  constructor() {
+    super();
+    this._search = createSearch();
+    this._debounceTimer = null;
+    this._activeIndex = -1;
+    this._flatResults = [];
+    this._indexLoaded = false;
+    this._listId = `velin-search-listbox-${Math.random().toString(36).slice(2, 9)}`;
+    this._mounted = false;
+  }
+  connectedCallback() {
+    if (this._mounted) return;
+    this._mounted = true;
+    this._ensureMarkup();
+    this._loadIndex();
+    this._bindEvents();
+  }
+  disconnectedCallback() {
+    this._teardown?.();
+    this._mounted = false;
+  }
+  get indexUrl() {
+    return this.getAttribute("index") || "/search-index.json";
+  }
+  get minChars() {
+    return parseInt(this.getAttribute("min-chars") || "2", 10);
+  }
+  get fuzzy() {
+    const v = this.getAttribute("fuzzy");
+    return v === null ? 0.2 : parseFloat(v) || 0;
+  }
+  get categories() {
+    const raw = this.getAttribute("categories");
+    if (!raw) return null;
+    return raw.split(",").map((c) => c.trim()).filter((c) => SEARCH_CATEGORIES.includes(c));
+  }
+  get debounceMs() {
+    return parseInt(this.getAttribute("debounce") || "120", 10);
+  }
+  _ensureMarkup() {
+    if (this.querySelector("[data-velin-search-input]")) return;
+    const ph = escapeHTMLAttribute(this.getAttribute("placeholder") || "Search\u2026");
+    this.innerHTML = `
+      <div class="velin-search">
+        <div class="velin-search__field">
+          <input type="search" class="velin-search__input" data-velin-search-input
+            placeholder="${ph}" autocomplete="off" role="combobox" aria-expanded="false"
+            aria-controls="${this._listId}" aria-autocomplete="list" />
+        </div>
+        <div class="velin-search__status velin-visually-hidden" data-velin-search-status aria-live="polite" aria-atomic="true"></div>
+        <div class="velin-search__results" data-velin-search-results role="listbox"
+          id="${this._listId}" hidden></div>
+      </div>
+    `;
+  }
+  _inputEl() {
+    return this.querySelector("[data-velin-search-input]");
+  }
+  _resultsEl() {
+    return this.querySelector("[data-velin-search-results]");
+  }
+  async _loadIndex() {
+    try {
+      await this._search.loadIndex(this.indexUrl);
+      this._indexLoaded = true;
+    } catch {
+      this._indexLoaded = false;
+    }
+  }
+  _bindEvents() {
+    const input = this._inputEl();
+    const panel = this._resultsEl();
+    if (!input || !panel) return;
+    input.addEventListener("input", () => {
+      clearTimeout(this._debounceTimer);
+      this._debounceTimer = setTimeout(() => this._runQuery(input.value), this.debounceMs);
+    });
+    input.addEventListener("focus", () => {
+      if (input.value.trim().length >= this.minChars) this._runQuery(input.value);
+    });
+    input.addEventListener("keydown", (e) => this._onKeydown(e, input, panel));
+    const onDocClick = (e) => {
+      if (!this.contains(e.target)) this._hide(panel, input);
+    };
+    document.addEventListener("click", onDocClick);
+    this._teardown = () => {
+      document.removeEventListener("click", onDocClick);
+      clearTimeout(this._debounceTimer);
+    };
+  }
+  async _runQuery(raw) {
+    const input = this._inputEl();
+    const panel = this._resultsEl();
+    if (!input || !panel) return;
+    const q = raw.trim();
+    if (q.length < this.minChars) {
+      this._hide(panel, input);
+      return;
+    }
+    if (!this._indexLoaded) await this._loadIndex();
+    const { groups } = this._search.query(q, {
+      minChars: this.minChars,
+      fuzzy: this.fuzzy,
+      categories: this.categories || void 0,
+      limit: 12
+    });
+    this._activeIndex = -1;
+    this._renderResults(panel, input, q, groups);
+    if (this._flatResults.length) {
+      panel.hidden = false;
+      panel.classList.add("velin-search__results--open");
+      input.setAttribute("aria-expanded", "true");
+    } else {
+      this._hide(panel, input);
+    }
+  }
+  _renderResults(panel, input, q, groups) {
+    panel.innerHTML = "";
+    const order = this.categories || [...SEARCH_CATEGORIES];
+    this._flatResults = [];
+    let globalIdx = 0;
+    for (const cat of order) {
+      const items = groups[cat];
+      if (!items?.length) continue;
+      const groupId = `${this._listId}-group-${cat}`;
+      const group = document.createElement("div");
+      group.setAttribute("role", "group");
+      group.setAttribute("aria-labelledby", groupId);
+      const heading = document.createElement("div");
+      heading.className = "velin-search__group-label";
+      heading.id = groupId;
+      heading.textContent = CATEGORY_LABELS[cat] || cat;
+      group.appendChild(heading);
+      const base = typeof location !== "undefined" ? location.href : void 0;
+      for (const item of items) {
+        const a = document.createElement("a");
+        a.href = sanitizeSearchUrl(item.url, base);
+        a.className = "velin-search__item";
+        a.setAttribute("role", "option");
+        a.id = `velin-search-opt-${globalIdx}`;
+        a.innerHTML = `<span class="velin-search__title">${highlightHtml(item.title, q)}</span><span class="velin-search__excerpt">${highlightHtml(item.excerpt || "", q)}</span>`;
+        a.addEventListener("mouseenter", () => this._setActive(globalIdx, panel, input));
+        group.appendChild(a);
+        this._flatResults.push(item);
+        globalIdx++;
+      }
+      panel.appendChild(group);
+    }
+    const status = this._statusEl();
+    if (status) {
+      status.textContent = this._flatResults.length ? `${this._flatResults.length} results` : "No results";
+    }
+  }
+  _statusEl() {
+    return this.querySelector("[data-velin-search-status]");
+  }
+  _setActive(idx, panel, input) {
+    this._activeIndex = idx;
+    panel.querySelectorAll(".velin-search__item").forEach((el, i) => {
+      el.classList.toggle("velin-search__item--active", i === idx);
+      if (i === idx) {
+        input.setAttribute("aria-activedescendant", el.id);
+        el.scrollIntoView({ block: "nearest" });
+      }
+    });
+  }
+  _onKeydown(e, input, panel) {
+    if (e.key === "Escape") {
+      this._hide(panel, input);
+      return;
+    }
+    if (!this._flatResults.length) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const next = this._activeIndex < this._flatResults.length - 1 ? this._activeIndex + 1 : 0;
+      this._setActive(next, panel, input);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const prev = this._activeIndex > 0 ? this._activeIndex - 1 : this._flatResults.length - 1;
+      this._setActive(prev, panel, input);
+    } else if (e.key === "Enter") {
+      const target = this._activeIndex >= 0 ? this._flatResults[this._activeIndex] : this._flatResults[0];
+      if (target?.url) {
+        e.preventDefault();
+        const base = typeof location !== "undefined" ? location.href : void 0;
+        window.location.href = sanitizeSearchUrl(target.url, base);
+      }
+    }
+  }
+  _hide(panel, input) {
+    panel.hidden = true;
+    panel.classList.remove("velin-search__results--open");
+    input.setAttribute("aria-expanded", "false");
+    input.removeAttribute("aria-activedescendant");
+    this._activeIndex = -1;
+  }
+};
+var velin_search_default = VelinSearch;
+if (typeof HTMLElement !== "undefined" && typeof customElements !== "undefined" && !customElements.get("velin-search")) {
+  customElements.define("velin-search", VelinSearch);
+}
+function bindDeclarativeSearch(root = document) {
+  root.querySelectorAll("[velin-search-input]").forEach((input) => {
+    if (input.dataset.velinSearchBound) return;
+    input.dataset.velinSearchBound = "1";
+    let host = input.closest("velin-search");
+    if (!host) {
+      host = document.createElement("velin-search");
+      host.setAttribute("index", input.getAttribute("data-search-index") || "/search-index.json");
+      const results = input.parentElement?.querySelector("[velin-search-results]");
+      input.before(host);
+      host.appendChild(input);
+      if (results) host.appendChild(results);
+    }
+  });
+}
+export {
+  bindDeclarativeSearch,
+  velin_search_default as default
+};

package/dist/chunks/velin-secure-field-6PV7RZDJ.js

@@ -0,0 +1,95 @@
+import {
+  escapeHTML,
+  escapeHTMLAttribute,
+  sanitizeInputType
+} from "./chunk-MKZP2TBH.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-secure-field-H7FSBUJW.js

@@ -0,0 +1,95 @@
+import {
+  escapeHTML,
+  escapeHTMLAttribute,
+  sanitizeInputType
+} from "./chunk-LA7264K4.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
+};