@birdapi/velinstyle 0.8.0 → 0.9.0

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

@@ -0,0 +1,130 @@
+import {
+  clearBackgroundInert,
+  getFocusableElements,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.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"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._prev = null;
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const title = this.getAttribute("title") || "";
+    const safeTitle = escapeHTML(title);
+    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}">${safeTitle}</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());
+  }
+  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-drawer", VelinDrawer);
+var velin_drawer_default = VelinDrawer;
+export {
+  velin_drawer_default as default
+};

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

@@ -0,0 +1,130 @@
+import {
+  clearBackgroundInert,
+  getFocusableElements,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-MKZP2TBH.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"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._prev = null;
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const title = this.getAttribute("title") || "";
+    const safeTitle = escapeHTML(title);
+    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}">${safeTitle}</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());
+  }
+  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-drawer", VelinDrawer);
+var velin_drawer_default = VelinDrawer;
+export {
+  velin_drawer_default as default
+};

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

@@ -0,0 +1,130 @@
+import {
+  clearBackgroundInert,
+  getFocusableElements,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-LA7264K4.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"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._prev = null;
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const title = this.getAttribute("title") || "";
+    const safeTitle = escapeHTML(title);
+    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}">${safeTitle}</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());
+  }
+  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-drawer", VelinDrawer);
+var velin_drawer_default = VelinDrawer;
+export {
+  velin_drawer_default as default
+};

package/dist/chunks/velin-dropdown-PLUIFA5M.js

@@ -0,0 +1,172 @@
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+
+// components/velin-dropdown.js
+var styles = `
+  :host {
+    display: inline-block;
+    position: relative;
+  }
+  .menu {
+    position: absolute;
+    z-index: var(--velin-z-dropdown, 100);
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+    min-inline-size: 12rem;
+    padding-block: var(--velin-space-1, 0.25rem);
+    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 10px 15px rgba(0,0,0,0.08));
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-0.25rem);
+    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
+  }
+  :host([open]) .menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+  .menu-end {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+  ::slotted([role="menuitem"]),
+  ::slotted(a),
+  ::slotted(button) {
+    display: flex;
+    align-items: center;
+    gap: var(--velin-space-2, 0.5rem);
+    inline-size: 100%;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    min-block-size: 2.5rem;
+    font-size: var(--velin-text-base, 1rem);
+    color: var(--velin-color-text, #111);
+    background: none;
+    border: none;
+    text-align: start;
+    cursor: pointer;
+    text-decoration: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .menu { transition: none; }
+  }
+`;
+var VelinDropdown = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["open"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._onDocClick = this._onDocClick.bind(this);
+    this._onKeydown = this._onKeydown.bind(this);
+    this._typeahead = "";
+    this._typeaheadTimer = null;
+  }
+  connectedCallback() {
+    const align = this.getAttribute("align") || "start";
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <slot name="trigger"></slot>
+      <div class="menu ${align === "end" ? "menu-end" : ""}" role="menu" part="menu">
+        <slot></slot>
+      </div>
+    `;
+    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
+    const menuSlot = this.shadowRoot.querySelector("slot:not([name])");
+    triggerSlot.addEventListener("click", () => this.toggle());
+    triggerSlot.addEventListener("slotchange", () => {
+      const trigger = triggerSlot.assignedElements()[0];
+      if (trigger) {
+        trigger.setAttribute("aria-haspopup", "menu");
+        trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
+        const menuId = this._menuId || (this._menuId = `velin-dropdown-menu-${Math.random().toString(36).slice(2, 9)}`);
+        trigger.setAttribute("aria-controls", menuId);
+        this.shadowRoot.querySelector(".menu")?.setAttribute("id", menuId);
+      }
+    });
+    menuSlot?.addEventListener("slotchange", () => this._normalizeMenuItems());
+    this._normalizeMenuItems();
+    this.addEventListener("keydown", this._onKeydown);
+  }
+  _normalizeMenuItems() {
+    const items = this._getMenuItems();
+    items.forEach((el, i) => {
+      if (!el.hasAttribute("role")) el.setAttribute("role", "menuitem");
+      el.setAttribute("tabindex", i === 0 ? "0" : "-1");
+    });
+  }
+  toggle() {
+    if (this.hasAttribute("open")) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  open() {
+    this.setAttribute("open", "");
+    const trigger = this.querySelector('[slot="trigger"]');
+    if (trigger) trigger.setAttribute("aria-expanded", "true");
+    document.addEventListener("click", this._onDocClick, true);
+    requestAnimationFrame(() => {
+      const items = this._getMenuItems();
+      if (items.length > 0) {
+        items[0].focus();
+      }
+    });
+  }
+  close() {
+    this.removeAttribute("open");
+    const trigger = this.querySelector('[slot="trigger"]');
+    if (trigger) trigger.setAttribute("aria-expanded", "false");
+    document.removeEventListener("click", this._onDocClick, true);
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+  _getMenuItems() {
+    const slot = this.shadowRoot.querySelector("slot:not([name])");
+    return slot ? slot.assignedElements().filter((el) => !el.hasAttribute("disabled")) : [];
+  }
+  _onDocClick(event) {
+    if (!this.contains(event.target)) {
+      this.close();
+    }
+  }
+  _onKeydown(event) {
+    if (event.key === "Escape") {
+      this.close();
+      const trigger = this.querySelector('[slot="trigger"]');
+      if (trigger) trigger.focus();
+      return;
+    }
+    const items = this._getMenuItems();
+    if (items.length === 0) return;
+    if (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {
+      clearTimeout(this._typeaheadTimer);
+      this._typeahead += event.key.toLowerCase();
+      this._typeaheadTimer = setTimeout(() => {
+        this._typeahead = "";
+      }, 500);
+      const match = items.find(
+        (el) => (el.textContent?.trim().toLowerCase() || "").startsWith(this._typeahead)
+      );
+      if (match) {
+        event.preventDefault();
+        items.forEach((item) => item.setAttribute("tabindex", item === match ? "0" : "-1"));
+        match.focus();
+      }
+      return;
+    }
+    rovingTabindex(this, items, event);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this._onDocClick, true);
+  }
+};
+customElements.define("velin-dropdown", VelinDropdown);
+var velin_dropdown_default = VelinDropdown;
+export {
+  velin_dropdown_default as default
+};

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

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