@birdapi/velinstyle 0.8.0 → 0.9.0

package/dist/chunks/velin-combobox-NXS4QB4R.js

@@ -0,0 +1,155 @@
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-LA7264K4.js";
+
+// components/velin-combobox.js
+var styles = `
+  :host { display: inline-block; position: relative; }
+  .listbox {
+    position: absolute; z-index: var(--velin-z-dropdown, 100);
+    inset-block-start: 100%; inset-inline-start: 0;
+    min-inline-size: 100%; margin-block-start: var(--velin-space-1, 0.25rem);
+    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;
+    transition: opacity 150ms ease, visibility 150ms ease;
+  }
+  :host([open]) .listbox { opacity: 1; visibility: visible; }
+  ::slotted([role="option"]) {
+    display: block; inline-size: 100%;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    min-block-size: 2.5rem;
+    text-align: start; background: none; border: none;
+    cursor: pointer; font-size: var(--velin-text-base, 1rem);
+  }
+  ::slotted([role="option"][aria-selected="true"]) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+var VelinCombobox = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["open", "aria-label"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._onDocClick = this._onDocClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const listId = `velin-combobox-list-${Math.random().toString(36).slice(2, 9)}`;
+    this._listId = listId;
+    const listLabel = escapeHTML(this.getAttribute("aria-label") || "Options");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <slot name="trigger"></slot>
+      <div class="listbox" id="${listId}" role="listbox" aria-label="${listLabel}" part="listbox"><slot></slot></div>
+    `;
+    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
+    triggerSlot.addEventListener("slotchange", () => this._wireTrigger());
+    this.shadowRoot.querySelector("slot:not([name])")?.addEventListener("slotchange", () => this._wireOptions());
+    this._wireTrigger();
+    this._wireOptions();
+    this.addEventListener("keydown", this._onKey);
+  }
+  _wireTrigger() {
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (!trigger) return;
+    trigger.setAttribute("role", "combobox");
+    trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
+    trigger.setAttribute("aria-controls", this._listId);
+    trigger.setAttribute("aria-autocomplete", "list");
+    if (!trigger.id) trigger.id = `velin-combobox-trigger-${Math.random().toString(36).slice(2, 9)}`;
+    const list = this.shadowRoot.querySelector(".listbox");
+    if (list) list.setAttribute("aria-labelledby", trigger.id);
+    if (!trigger.dataset.velinComboWired) {
+      trigger.dataset.velinComboWired = "1";
+      trigger.addEventListener("click", () => this.toggle());
+      trigger.addEventListener("keydown", (e) => {
+        if (e.key === "ArrowDown" || e.key === "Enter") {
+          e.preventDefault();
+          this.open();
+        }
+      });
+    }
+  }
+  _wireOptions() {
+    const options = this._getOptions();
+    options.forEach((el, i) => {
+      el.setAttribute("role", "option");
+      el.setAttribute("aria-selected", el.hasAttribute("selected") ? "true" : "false");
+      el.setAttribute("tabindex", i === 0 ? "0" : "-1");
+    });
+  }
+  _getOptions() {
+    const slot = this.shadowRoot.querySelector("slot:not([name])");
+    return slot ? slot.assignedElements().filter((el) => !el.hidden) : [];
+  }
+  toggle() {
+    this.hasAttribute("open") ? this.close() : this.open();
+  }
+  open() {
+    this.setAttribute("open", "");
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (trigger) trigger.setAttribute("aria-expanded", "true");
+    document.addEventListener("click", this._onDocClick, true);
+    requestAnimationFrame(() => {
+      const opts = this._getOptions();
+      if (opts.length) opts[0].focus();
+    });
+  }
+  close() {
+    this.removeAttribute("open");
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", "false");
+      trigger.focus();
+    }
+    document.removeEventListener("click", this._onDocClick, true);
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+  _onDocClick(e) {
+    if (!this.contains(e.target)) this.close();
+  }
+  _onKey(e) {
+    if (!this.hasAttribute("open")) return;
+    if (e.key === "Escape") {
+      this.close();
+      return;
+    }
+    const options = this._getOptions();
+    if (!options.length) return;
+    rovingTabindex(this, options, e);
+    if (e.key === "Enter" && options.includes(e.target)) {
+      this._selectOption(e.target);
+      this.close();
+    }
+  }
+  _selectOption(el) {
+    this._getOptions().forEach((o) => o.setAttribute("aria-selected", o === el ? "true" : "false"));
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (trigger && "value" in trigger) trigger.value = el.textContent?.trim() || "";
+    this.dispatchEvent(new CustomEvent("velin-select", { bubbles: true, detail: { option: el } }));
+  }
+  attributeChangedCallback(name) {
+    if (name === "open") this._wireTrigger();
+    if (name === "aria-label") {
+      const list = this.shadowRoot?.querySelector(".listbox");
+      if (list) list.setAttribute("aria-label", escapeHTML(this.getAttribute("aria-label") || "Options"));
+    }
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this._onDocClick, true);
+  }
+};
+customElements.define("velin-combobox", VelinCombobox);
+var velin_combobox_default = VelinCombobox;
+export {
+  velin_combobox_default as default
+};

package/dist/chunks/velin-combobox-UGA56HP3.js

@@ -0,0 +1,155 @@
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-combobox.js
+var styles = `
+  :host { display: inline-block; position: relative; }
+  .listbox {
+    position: absolute; z-index: var(--velin-z-dropdown, 100);
+    inset-block-start: 100%; inset-inline-start: 0;
+    min-inline-size: 100%; margin-block-start: var(--velin-space-1, 0.25rem);
+    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;
+    transition: opacity 150ms ease, visibility 150ms ease;
+  }
+  :host([open]) .listbox { opacity: 1; visibility: visible; }
+  ::slotted([role="option"]) {
+    display: block; inline-size: 100%;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    min-block-size: 2.5rem;
+    text-align: start; background: none; border: none;
+    cursor: pointer; font-size: var(--velin-text-base, 1rem);
+  }
+  ::slotted([role="option"][aria-selected="true"]) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+var VelinCombobox = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["open", "aria-label"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._onDocClick = this._onDocClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const listId = `velin-combobox-list-${Math.random().toString(36).slice(2, 9)}`;
+    this._listId = listId;
+    const listLabel = escapeHTML(this.getAttribute("aria-label") || "Options");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <slot name="trigger"></slot>
+      <div class="listbox" id="${listId}" role="listbox" aria-label="${listLabel}" part="listbox"><slot></slot></div>
+    `;
+    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
+    triggerSlot.addEventListener("slotchange", () => this._wireTrigger());
+    this.shadowRoot.querySelector("slot:not([name])")?.addEventListener("slotchange", () => this._wireOptions());
+    this._wireTrigger();
+    this._wireOptions();
+    this.addEventListener("keydown", this._onKey);
+  }
+  _wireTrigger() {
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (!trigger) return;
+    trigger.setAttribute("role", "combobox");
+    trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
+    trigger.setAttribute("aria-controls", this._listId);
+    trigger.setAttribute("aria-autocomplete", "list");
+    if (!trigger.id) trigger.id = `velin-combobox-trigger-${Math.random().toString(36).slice(2, 9)}`;
+    const list = this.shadowRoot.querySelector(".listbox");
+    if (list) list.setAttribute("aria-labelledby", trigger.id);
+    if (!trigger.dataset.velinComboWired) {
+      trigger.dataset.velinComboWired = "1";
+      trigger.addEventListener("click", () => this.toggle());
+      trigger.addEventListener("keydown", (e) => {
+        if (e.key === "ArrowDown" || e.key === "Enter") {
+          e.preventDefault();
+          this.open();
+        }
+      });
+    }
+  }
+  _wireOptions() {
+    const options = this._getOptions();
+    options.forEach((el, i) => {
+      el.setAttribute("role", "option");
+      el.setAttribute("aria-selected", el.hasAttribute("selected") ? "true" : "false");
+      el.setAttribute("tabindex", i === 0 ? "0" : "-1");
+    });
+  }
+  _getOptions() {
+    const slot = this.shadowRoot.querySelector("slot:not([name])");
+    return slot ? slot.assignedElements().filter((el) => !el.hidden) : [];
+  }
+  toggle() {
+    this.hasAttribute("open") ? this.close() : this.open();
+  }
+  open() {
+    this.setAttribute("open", "");
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (trigger) trigger.setAttribute("aria-expanded", "true");
+    document.addEventListener("click", this._onDocClick, true);
+    requestAnimationFrame(() => {
+      const opts = this._getOptions();
+      if (opts.length) opts[0].focus();
+    });
+  }
+  close() {
+    this.removeAttribute("open");
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", "false");
+      trigger.focus();
+    }
+    document.removeEventListener("click", this._onDocClick, true);
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+  _onDocClick(e) {
+    if (!this.contains(e.target)) this.close();
+  }
+  _onKey(e) {
+    if (!this.hasAttribute("open")) return;
+    if (e.key === "Escape") {
+      this.close();
+      return;
+    }
+    const options = this._getOptions();
+    if (!options.length) return;
+    rovingTabindex(this, options, e);
+    if (e.key === "Enter" && options.includes(e.target)) {
+      this._selectOption(e.target);
+      this.close();
+    }
+  }
+  _selectOption(el) {
+    this._getOptions().forEach((o) => o.setAttribute("aria-selected", o === el ? "true" : "false"));
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (trigger && "value" in trigger) trigger.value = el.textContent?.trim() || "";
+    this.dispatchEvent(new CustomEvent("velin-select", { bubbles: true, detail: { option: el } }));
+  }
+  attributeChangedCallback(name) {
+    if (name === "open") this._wireTrigger();
+    if (name === "aria-label") {
+      const list = this.shadowRoot?.querySelector(".listbox");
+      if (list) list.setAttribute("aria-label", escapeHTML(this.getAttribute("aria-label") || "Options"));
+    }
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this._onDocClick, true);
+  }
+};
+customElements.define("velin-combobox", VelinCombobox);
+var velin_combobox_default = VelinCombobox;
+export {
+  velin_combobox_default as default
+};

package/dist/chunks/velin-command-CKDNO4BW.js

@@ -0,0 +1,148 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  clearBackgroundInert,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-command.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: contents; }
+  .overlay {
+    position: fixed; inset: 0; z-index: var(--velin-z-modal, 500);
+    display: flex; align-items: flex-start; justify-content: center;
+    padding: 10vh var(--velin-space-4, 1rem) var(--velin-space-4, 1rem);
+    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
+    opacity: 0; visibility: hidden;
+    transition: opacity 150ms ease, visibility 150ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .panel {
+    inline-size: min(32rem, 100%);
+    background: var(--velin-color-surface-bright, #fff);
+    border-radius: var(--velin-radius-lg, 0.75rem);
+    box-shadow: var(--velin-shadow-xl, 0 20px 25px rgba(0,0,0,0.1));
+    overflow: hidden;
+  }
+  .search {
+    inline-size: 100%; padding: var(--velin-space-4, 1rem);
+    border: none; border-bottom: 1px solid var(--velin-color-border, #ddd);
+    font-size: var(--velin-text-base, 1rem);
+    background: transparent;
+    color: var(--velin-color-text, #111);
+  }
+  .results { max-block-size: 20rem; overflow-y: auto; padding: var(--velin-space-2, 0.5rem); }
+  ::slotted(button) {
+    display: flex; inline-size: 100%;
+    padding: var(--velin-space-3, 0.75rem) var(--velin-space-4, 1rem);
+    min-block-size: 2.5rem;
+    border: none; background: none; text-align: start;
+    cursor: pointer; font-size: var(--velin-text-base, 1rem);
+    border-radius: var(--velin-radius-sm, 0.25rem);
+  }
+  ::slotted(button[hidden]) { display: none; }
+  ::slotted(button:focus-visible) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+var VelinCommand = 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);
+    this._onInput = this._onInput.bind(this);
+  }
+  connectedCallback() {
+    const placeholder = escapeHTML(this.getAttribute("placeholder") || "Search commands\u2026");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay" part="overlay">
+        <div class="panel" role="dialog" aria-modal="true" aria-label="Command palette" part="panel">
+          <input class="search" type="search" autocomplete="off" placeholder="${placeholder}" aria-label="Search" part="search" />
+          <div class="results" part="results"><slot></slot></div>
+        </div>
+      </div>
+    `;
+    this.shadowRoot.querySelector(".search").addEventListener("input", this._onInput);
+    this.shadowRoot.querySelector("slot")?.addEventListener("slotchange", () => this._filter(""));
+    this._filter("");
+  }
+  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);
+    requestAnimationFrame(() => {
+      this.shadowRoot.querySelector(".search")?.focus();
+      this._filter("");
+    });
+  }
+  _close() {
+    document.removeEventListener("keydown", this._onKey);
+    clearBackgroundInert();
+    restoreFocus(this._prev);
+    const input = this.shadowRoot.querySelector(".search");
+    if (input) input.value = "";
+    this._filter("");
+  }
+  _onInput(e) {
+    this._filter(e.target.value);
+  }
+  _filter(query) {
+    const q = query.trim().toLowerCase();
+    const slot = this.shadowRoot.querySelector("slot");
+    slot?.assignedElements().forEach((btn) => {
+      const text = btn.textContent?.trim().toLowerCase() || "";
+      const match = !q || text.includes(q);
+      btn.hidden = !match;
+    });
+  }
+  _visibleItems() {
+    const slot = this.shadowRoot.querySelector("slot");
+    return slot?.assignedElements().filter((el) => el.tagName === "BUTTON" && !el.hidden) || [];
+  }
+  _onKey(e) {
+    if (e.key === "Escape") {
+      this.close();
+      return;
+    }
+    const items = this._visibleItems();
+    if (items.length && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      e.preventDefault();
+      const idx = items.indexOf(document.activeElement);
+      const next = e.key === "ArrowDown" ? items[(idx + 1) % items.length] : items[(idx <= 0 ? items.length : idx) - 1];
+      next?.focus();
+      return;
+    }
+    trapFocus(this.shadowRoot, e);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this._onKey);
+  }
+};
+customElements.define("velin-command", VelinCommand);
+var velin_command_default = VelinCommand;
+export {
+  velin_command_default as default
+};

package/dist/chunks/velin-command-M7RNHUPR.js

@@ -0,0 +1,136 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  clearBackgroundInert,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-MKZP2TBH.js";
+
+// components/velin-command.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: contents; }
+  .overlay {
+    position: fixed; inset: 0; z-index: var(--velin-z-modal, 500);
+    display: flex; align-items: flex-start; justify-content: center;
+    padding: 10vh var(--velin-space-4, 1rem) var(--velin-space-4, 1rem);
+    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
+    opacity: 0; visibility: hidden;
+    transition: opacity 150ms ease, visibility 150ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .panel {
+    inline-size: min(32rem, 100%);
+    background: var(--velin-color-surface-bright, #fff);
+    border-radius: var(--velin-radius-lg, 0.75rem);
+    box-shadow: var(--velin-shadow-xl, 0 20px 25px rgba(0,0,0,0.1));
+    overflow: hidden;
+  }
+  .search {
+    inline-size: 100%; padding: var(--velin-space-4, 1rem);
+    border: none; border-bottom: 1px solid var(--velin-color-border, #ddd);
+    font-size: var(--velin-text-base, 1rem);
+    background: transparent;
+    color: var(--velin-color-text, #111);
+  }
+  .results { max-block-size: 20rem; overflow-y: auto; padding: var(--velin-space-2, 0.5rem); }
+  ::slotted(button) {
+    display: flex; inline-size: 100%;
+    padding: var(--velin-space-3, 0.75rem) var(--velin-space-4, 1rem);
+    min-block-size: 2.5rem;
+    border: none; background: none; text-align: start;
+    cursor: pointer; font-size: var(--velin-text-base, 1rem);
+    border-radius: var(--velin-radius-sm, 0.25rem);
+  }
+  ::slotted(button[hidden]) { display: none; }
+  ::slotted(button:focus-visible) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+var VelinCommand = 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);
+    this._onInput = this._onInput.bind(this);
+  }
+  connectedCallback() {
+    const placeholder = escapeHTML(this.getAttribute("placeholder") || "Search commands\u2026");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay" part="overlay">
+        <div class="panel" role="dialog" aria-modal="true" aria-label="Command palette" part="panel">
+          <input class="search" type="search" autocomplete="off" placeholder="${placeholder}" aria-label="Search" part="search" />
+          <div class="results" part="results"><slot></slot></div>
+        </div>
+      </div>
+    `;
+    this.shadowRoot.querySelector(".search").addEventListener("input", this._onInput);
+    this.shadowRoot.querySelector("slot")?.addEventListener("slotchange", () => this._filter(""));
+    this._filter("");
+  }
+  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);
+    requestAnimationFrame(() => {
+      this.shadowRoot.querySelector(".search")?.focus();
+      this._filter("");
+    });
+  }
+  _close() {
+    document.removeEventListener("keydown", this._onKey);
+    clearBackgroundInert();
+    restoreFocus(this._prev);
+    const input = this.shadowRoot.querySelector(".search");
+    if (input) input.value = "";
+    this._filter("");
+  }
+  _onInput(e) {
+    this._filter(e.target.value);
+  }
+  _filter(query) {
+    const q = query.trim().toLowerCase();
+    const slot = this.shadowRoot.querySelector("slot");
+    slot?.assignedElements().forEach((btn) => {
+      const text = btn.textContent?.trim().toLowerCase() || "";
+      const match = !q || text.includes(q);
+      btn.hidden = !match;
+    });
+  }
+  _onKey(e) {
+    if (e.key === "Escape") {
+      this.close();
+      return;
+    }
+    trapFocus(this.shadowRoot, e);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("keydown", this._onKey);
+  }
+};
+customElements.define("velin-command", VelinCommand);
+var velin_command_default = VelinCommand;
+export {
+  velin_command_default as default
+};