@birdapi/velinstyle 0.8.0 → 0.9.0

package/dist/chunks/velin-email-NTM6DG3V.js

@@ -0,0 +1,90 @@
+import {
+  escapeHTML,
+  escapeHTMLAttribute
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-email.js
+var styles = `
+  :host { display: inline; }
+  button {
+    font: inherit;
+    color: var(--velin-color-primary, #4338ca);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+    min-height: 2.75rem;
+    min-width: 2.75rem;
+  }
+  button:focus-visible {
+    outline: 3px solid var(--velin-color-focus, #2563eb);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+  .revealed { text-decoration: none; user-select: text; }
+`;
+function decodeObfuscated(raw, method) {
+  if (!raw) return "";
+  if (method === "rot13") {
+    return raw.replace(/[a-zA-Z]/g, (c) => {
+      const base = c <= "Z" ? 65 : 97;
+      return String.fromCharCode((c.charCodeAt(0) - base + 13) % 26 + base);
+    });
+  }
+  try {
+    return atob(raw);
+  } catch {
+    return raw;
+  }
+}
+var VelinEmail = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["value", "obfuscate", "label"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._revealed = false;
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) this.render();
+  }
+  get email() {
+    const method = this.getAttribute("obfuscate") || "";
+    const raw = this.getAttribute("value") || "";
+    return method ? decodeObfuscated(raw, method) : raw;
+  }
+  render() {
+    const label = this.getAttribute("label") || "Show email address";
+    const email = this.email;
+    const safeEmail = escapeHTML(email);
+    if (this._revealed) {
+      this.shadowRoot.innerHTML = `
+        <style>${styles}</style>
+        <span class="revealed" part="email"><a href="mailto:${escapeHTMLAttribute(email)}">${safeEmail}</a></span>
+      `;
+      return;
+    }
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <button type="button" part="reveal" aria-label="${escapeHTMLAttribute(label)}">${escapeHTML(label)}</button>
+    `;
+    this.shadowRoot.querySelector("button").addEventListener("click", () => {
+      this._revealed = true;
+      this.render();
+      this.dispatchEvent(new CustomEvent("velin-email-reveal", { bubbles: true, detail: { email } }));
+    });
+  }
+};
+if (!customElements.get("velin-email")) {
+  customElements.define("velin-email", VelinEmail);
+}
+var velin_email_default = VelinEmail;
+export {
+  velin_email_default as default
+};

package/dist/chunks/velin-email-RBX6ZR4S.js

@@ -0,0 +1,90 @@
+import {
+  escapeHTML,
+  escapeHTMLAttribute
+} from "./chunk-LA7264K4.js";
+
+// components/velin-email.js
+var styles = `
+  :host { display: inline; }
+  button {
+    font: inherit;
+    color: var(--velin-color-primary, #4338ca);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+    min-height: 2.75rem;
+    min-width: 2.75rem;
+  }
+  button:focus-visible {
+    outline: 3px solid var(--velin-color-focus, #2563eb);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+  .revealed { text-decoration: none; user-select: text; }
+`;
+function decodeObfuscated(raw, method) {
+  if (!raw) return "";
+  if (method === "rot13") {
+    return raw.replace(/[a-zA-Z]/g, (c) => {
+      const base = c <= "Z" ? 65 : 97;
+      return String.fromCharCode((c.charCodeAt(0) - base + 13) % 26 + base);
+    });
+  }
+  try {
+    return atob(raw);
+  } catch {
+    return raw;
+  }
+}
+var VelinEmail = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["value", "obfuscate", "label"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._revealed = false;
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) this.render();
+  }
+  get email() {
+    const method = this.getAttribute("obfuscate") || "";
+    const raw = this.getAttribute("value") || "";
+    return method ? decodeObfuscated(raw, method) : raw;
+  }
+  render() {
+    const label = this.getAttribute("label") || "Show email address";
+    const email = this.email;
+    const safeEmail = escapeHTML(email);
+    if (this._revealed) {
+      this.shadowRoot.innerHTML = `
+        <style>${styles}</style>
+        <span class="revealed" part="email"><a href="mailto:${escapeHTMLAttribute(email)}">${safeEmail}</a></span>
+      `;
+      return;
+    }
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <button type="button" part="reveal" aria-label="${escapeHTMLAttribute(label)}">${escapeHTML(label)}</button>
+    `;
+    this.shadowRoot.querySelector("button").addEventListener("click", () => {
+      this._revealed = true;
+      this.render();
+      this.dispatchEvent(new CustomEvent("velin-email-reveal", { bubbles: true, detail: { email } }));
+    });
+  }
+};
+if (!customElements.get("velin-email")) {
+  customElements.define("velin-email", VelinEmail);
+}
+var velin_email_default = VelinEmail;
+export {
+  velin_email_default as default
+};

package/dist/chunks/velin-haptic-4QQTM3RK.js

@@ -0,0 +1,50 @@
+// components/velin-haptic.js
+var PATTERNS = {
+  tap: [10],
+  "double-tap": [10, 50, 10],
+  success: [50],
+  error: [100, 30, 100],
+  warning: [30, 20, 30],
+  long: [200]
+};
+function vibrate(pattern) {
+  if (typeof navigator === "undefined" || !navigator.vibrate) return;
+  const mq = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+  if (mq?.matches) return;
+  const p = typeof pattern === "string" ? PATTERNS[pattern] || PATTERNS.tap : pattern;
+  navigator.vibrate(p);
+}
+function applyHaptic(element) {
+  const pattern = element.getAttribute("haptic") || "tap";
+  element.addEventListener("click", () => vibrate(pattern));
+}
+var VelinHapticObserver = class {
+  constructor() {
+    this._observer = null;
+  }
+  start(root = document.body) {
+    const existing = root.querySelectorAll("[haptic]");
+    existing.forEach(applyHaptic);
+    this._observer = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        for (const node of m.addedNodes) {
+          if (node.nodeType !== 1) continue;
+          if (node.hasAttribute?.("haptic")) applyHaptic(node);
+          node.querySelectorAll?.("[haptic]").forEach(applyHaptic);
+        }
+      }
+    });
+    this._observer.observe(root, { childList: true, subtree: true });
+  }
+  stop() {
+    this._observer?.disconnect();
+  }
+};
+var velin_haptic_default = VelinHapticObserver;
+export {
+  PATTERNS,
+  VelinHapticObserver,
+  applyHaptic,
+  velin_haptic_default as default,
+  vibrate
+};

package/dist/chunks/velin-icon-7M76DOPB.js

@@ -0,0 +1,164 @@
+import {
+  sanitizeSVG,
+  sanitizeURL
+} from "./chunk-MKZP2TBH.js";
+
+// components/velin-icon.js
+var PROVIDER_CDNS = {
+  lucide: "https://unpkg.com/lucide-static@latest/icons/{name}.svg",
+  heroicons: "https://unpkg.com/heroicons@2/24/outline/{name}.svg",
+  bootstrap: "https://unpkg.com/bootstrap-icons@latest/icons/{name}.svg",
+  material: "https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/{name}/default/24px.svg",
+  fontawesome: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/{name}.svg"
+};
+var PROVIDER_VARIANTS = {
+  fontawesome: {
+    regular: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/regular/{name}.svg",
+    solid: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/{name}.svg",
+    brands: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/brands/{name}.svg"
+  },
+  heroicons: {
+    outline: "https://unpkg.com/heroicons@2/24/outline/{name}.svg",
+    solid: "https://unpkg.com/heroicons@2/24/solid/{name}.svg",
+    mini: "https://unpkg.com/heroicons@2/20/solid/{name}.svg"
+  }
+};
+function resolveProviderUrl(provider, variant) {
+  const variants = PROVIDER_VARIANTS[provider];
+  if (variant && variants?.[variant]) return variants[variant];
+  return PROVIDER_CDNS[provider];
+}
+var _svgCache = /* @__PURE__ */ new Map();
+var VelinIcon = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["name", "size", "label", "provider", "variant", "sprite"];
+  }
+  constructor() {
+    super();
+    this._rendered = false;
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this._rendered) this._render();
+  }
+  _render() {
+    const name = this.getAttribute("name");
+    const size = this.getAttribute("size") || "24";
+    const label = this.getAttribute("label");
+    const provider = this.getAttribute("provider");
+    const variant = this.getAttribute("variant");
+    if (!name) {
+      this.innerHTML = "";
+      return;
+    }
+    if (provider && (PROVIDER_CDNS[provider] || PROVIDER_VARIANTS[provider])) {
+      this._renderFromCDN(name, size, label, provider, variant);
+      return;
+    }
+    this._renderFromSprite(name, size, label);
+  }
+  _renderFromSprite(name, size, label) {
+    const svgNS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("width", size);
+    svg.setAttribute("height", size);
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    this._applyStyle(svg);
+    this._applyA11y(svg, label);
+    const use = document.createElementNS(svgNS, "use");
+    const spriteAttr = this.getAttribute("sprite");
+    const localSymbol = document.getElementById(name);
+    const isLocalSymbol = localSymbol && localSymbol.tagName && localSymbol.tagName.toLowerCase() === "symbol";
+    let href;
+    if (spriteAttr === "" || spriteAttr == null && isLocalSymbol) {
+      href = `#${name}`;
+    } else {
+      const spriteUrl = sanitizeURL(spriteAttr || "/dist/velin-icons.svg") || "/dist/velin-icons.svg";
+      href = `${spriteUrl}#${name}`;
+    }
+    use.setAttribute("href", href);
+    svg.appendChild(use);
+    this.innerHTML = "";
+    this.appendChild(svg);
+    this._rendered = true;
+  }
+  async _renderFromCDN(name, size, label, provider, variant) {
+    const cacheKey = `${provider}:${variant || "default"}:${name}`;
+    if (_svgCache.has(cacheKey)) {
+      this._injectSVG(_svgCache.get(cacheKey), size, label);
+      return;
+    }
+    const template = resolveProviderUrl(provider, variant);
+    if (!template) {
+      this._renderFromSprite(name, size, label);
+      return;
+    }
+    const url = sanitizeURL(template.replace("{name}", name));
+    if (!url) {
+      this._renderFromSprite(name, size, label);
+      return;
+    }
+    try {
+      const res = await fetch(url);
+      if (!res.ok) throw new Error(`${res.status}`);
+      const text = await res.text();
+      if (!text.includes("<svg")) throw new Error("Not SVG");
+      const clean = await sanitizeSVG(text);
+      _svgCache.set(cacheKey, clean);
+      this._injectSVG(clean, size, label);
+    } catch {
+      this._renderFromSprite(name, size, label);
+    }
+  }
+  _injectSVG(svgText, size, label) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgText, "image/svg+xml");
+    const svg = doc.querySelector("svg");
+    if (!svg) {
+      this.innerHTML = "";
+      return;
+    }
+    svg.setAttribute("width", size);
+    svg.setAttribute("height", size);
+    if (!svg.getAttribute("viewBox")) svg.setAttribute("viewBox", "0 0 24 24");
+    this._applyStyle(svg);
+    this._applyA11y(svg, label);
+    this.innerHTML = "";
+    this.appendChild(document.importNode(svg, true));
+    this._rendered = true;
+  }
+  _applyStyle(svg) {
+    svg.style.display = "inline-block";
+    svg.style.verticalAlign = "middle";
+    svg.style.flexShrink = "0";
+  }
+  _applyA11y(svg, label) {
+    if (label) {
+      svg.setAttribute("role", "img");
+      svg.setAttribute("aria-label", label);
+    } else {
+      svg.setAttribute("aria-hidden", "true");
+    }
+  }
+  static get providers() {
+    return Object.keys(PROVIDER_CDNS);
+  }
+  static registerProvider(name, urlTemplate, variantTemplates) {
+    PROVIDER_CDNS[name] = urlTemplate;
+    if (variantTemplates && PROVIDER_VARIANTS[name]) {
+      Object.assign(PROVIDER_VARIANTS[name], variantTemplates);
+    }
+  }
+};
+customElements.define("velin-icon", VelinIcon);
+var velin_icon_default = VelinIcon;
+export {
+  velin_icon_default as default
+};

package/dist/chunks/velin-icon-KZO3IEHG.js

@@ -0,0 +1,164 @@
+import {
+  sanitizeSVG,
+  sanitizeURL
+} from "./chunk-LA7264K4.js";
+
+// components/velin-icon.js
+var PROVIDER_CDNS = {
+  lucide: "https://unpkg.com/lucide-static@latest/icons/{name}.svg",
+  heroicons: "https://unpkg.com/heroicons@2/24/outline/{name}.svg",
+  bootstrap: "https://unpkg.com/bootstrap-icons@latest/icons/{name}.svg",
+  material: "https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/{name}/default/24px.svg",
+  fontawesome: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/{name}.svg"
+};
+var PROVIDER_VARIANTS = {
+  fontawesome: {
+    regular: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/regular/{name}.svg",
+    solid: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/{name}.svg",
+    brands: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/brands/{name}.svg"
+  },
+  heroicons: {
+    outline: "https://unpkg.com/heroicons@2/24/outline/{name}.svg",
+    solid: "https://unpkg.com/heroicons@2/24/solid/{name}.svg",
+    mini: "https://unpkg.com/heroicons@2/20/solid/{name}.svg"
+  }
+};
+function resolveProviderUrl(provider, variant) {
+  const variants = PROVIDER_VARIANTS[provider];
+  if (variant && variants?.[variant]) return variants[variant];
+  return PROVIDER_CDNS[provider];
+}
+var _svgCache = /* @__PURE__ */ new Map();
+var VelinIcon = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["name", "size", "label", "provider", "variant", "sprite"];
+  }
+  constructor() {
+    super();
+    this._rendered = false;
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this._rendered) this._render();
+  }
+  _render() {
+    const name = this.getAttribute("name");
+    const size = this.getAttribute("size") || "24";
+    const label = this.getAttribute("label");
+    const provider = this.getAttribute("provider");
+    const variant = this.getAttribute("variant");
+    if (!name) {
+      this.innerHTML = "";
+      return;
+    }
+    if (provider && (PROVIDER_CDNS[provider] || PROVIDER_VARIANTS[provider])) {
+      this._renderFromCDN(name, size, label, provider, variant);
+      return;
+    }
+    this._renderFromSprite(name, size, label);
+  }
+  _renderFromSprite(name, size, label) {
+    const svgNS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("width", size);
+    svg.setAttribute("height", size);
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    this._applyStyle(svg);
+    this._applyA11y(svg, label);
+    const use = document.createElementNS(svgNS, "use");
+    const spriteAttr = this.getAttribute("sprite");
+    const localSymbol = document.getElementById(name);
+    const isLocalSymbol = localSymbol && localSymbol.tagName && localSymbol.tagName.toLowerCase() === "symbol";
+    let href;
+    if (spriteAttr === "" || spriteAttr == null && isLocalSymbol) {
+      href = `#${name}`;
+    } else {
+      const spriteUrl = sanitizeURL(spriteAttr || "/dist/velin-icons.svg") || "/dist/velin-icons.svg";
+      href = `${spriteUrl}#${name}`;
+    }
+    use.setAttribute("href", href);
+    svg.appendChild(use);
+    this.innerHTML = "";
+    this.appendChild(svg);
+    this._rendered = true;
+  }
+  async _renderFromCDN(name, size, label, provider, variant) {
+    const cacheKey = `${provider}:${variant || "default"}:${name}`;
+    if (_svgCache.has(cacheKey)) {
+      this._injectSVG(_svgCache.get(cacheKey), size, label);
+      return;
+    }
+    const template = resolveProviderUrl(provider, variant);
+    if (!template) {
+      this._renderFromSprite(name, size, label);
+      return;
+    }
+    const url = sanitizeURL(template.replace("{name}", name));
+    if (!url) {
+      this._renderFromSprite(name, size, label);
+      return;
+    }
+    try {
+      const res = await fetch(url);
+      if (!res.ok) throw new Error(`${res.status}`);
+      const text = await res.text();
+      if (!text.includes("<svg")) throw new Error("Not SVG");
+      const clean = await sanitizeSVG(text);
+      _svgCache.set(cacheKey, clean);
+      this._injectSVG(clean, size, label);
+    } catch {
+      this._renderFromSprite(name, size, label);
+    }
+  }
+  _injectSVG(svgText, size, label) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgText, "image/svg+xml");
+    const svg = doc.querySelector("svg");
+    if (!svg) {
+      this.innerHTML = "";
+      return;
+    }
+    svg.setAttribute("width", size);
+    svg.setAttribute("height", size);
+    if (!svg.getAttribute("viewBox")) svg.setAttribute("viewBox", "0 0 24 24");
+    this._applyStyle(svg);
+    this._applyA11y(svg, label);
+    this.innerHTML = "";
+    this.appendChild(document.importNode(svg, true));
+    this._rendered = true;
+  }
+  _applyStyle(svg) {
+    svg.style.display = "inline-block";
+    svg.style.verticalAlign = "middle";
+    svg.style.flexShrink = "0";
+  }
+  _applyA11y(svg, label) {
+    if (label) {
+      svg.setAttribute("role", "img");
+      svg.setAttribute("aria-label", label);
+    } else {
+      svg.setAttribute("aria-hidden", "true");
+    }
+  }
+  static get providers() {
+    return Object.keys(PROVIDER_CDNS);
+  }
+  static registerProvider(name, urlTemplate, variantTemplates) {
+    PROVIDER_CDNS[name] = urlTemplate;
+    if (variantTemplates && PROVIDER_VARIANTS[name]) {
+      Object.assign(PROVIDER_VARIANTS[name], variantTemplates);
+    }
+  }
+};
+customElements.define("velin-icon", VelinIcon);
+var velin_icon_default = VelinIcon;
+export {
+  velin_icon_default as default
+};