@birdapi/velinstyle 0.8.0 → 0.9.0

package/dist/chunks/velin-code-block-CIAURDRJ.js

@@ -0,0 +1,132 @@
+import {
+  highlightElement,
+  initHighlight
+} from "./chunk-J472ERN2.js";
+import "./chunk-7MCGPHVC.js";
+import "./chunk-M5CHQVP6.js";
+import "./chunk-7FFAMRFV.js";
+
+// components/velin-code-block.js
+function parseLineHighlight(spec) {
+  const lines = /* @__PURE__ */ new Set();
+  if (!spec) return lines;
+  for (const part of spec.split(",")) {
+    const p = part.trim();
+    if (!p) continue;
+    if (p.includes("-")) {
+      const [a, b] = p.split("-").map((n) => parseInt(n, 10));
+      if (!Number.isNaN(a) && !Number.isNaN(b)) {
+        for (let i = Math.min(a, b); i <= Math.max(a, b); i += 1) lines.add(i);
+      }
+    } else {
+      const n = parseInt(p, 10);
+      if (!Number.isNaN(n)) lines.add(n);
+    }
+  }
+  return lines;
+}
+var VelinCodeBlock = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["language", "highlight", "line-numbers", "collapsed"];
+  }
+  connectedCallback() {
+    if (this._built) return;
+    this._built = true;
+    this.classList.add("velin-code-block");
+    this._render();
+    this._setupHighlight();
+  }
+  attributeChangedCallback() {
+    if (!this._built) return;
+    this._render();
+    this._setupHighlight();
+  }
+  _render() {
+    const lang = this.getAttribute("language") || "";
+    const showLines = this.hasAttribute("line-numbers");
+    const collapsed = this.hasAttribute("collapsed");
+    const highlightLines = parseLineHighlight(this.getAttribute("highlight") || "");
+    const source = this.textContent.trim();
+    this.textContent = "";
+    const toolbar = document.createElement("div");
+    toolbar.className = "velin-code-block__toolbar";
+    toolbar.innerHTML = "";
+    const copyWc = document.createElement("velin-copy");
+    copyWc.setAttribute("value", source);
+    copyWc.setAttribute("label", "Copy");
+    toolbar.appendChild(copyWc);
+    const panelId = `velin-code-panel-${Math.random().toString(36).slice(2, 9)}`;
+    const wrap = document.createElement("div");
+    wrap.id = panelId;
+    wrap.className = showLines ? "velin-code-block__gutter" : "";
+    if (collapsed) {
+      const toggle = document.createElement("button");
+      toggle.type = "button";
+      toggle.className = "velin-btn velin-btn--sm velin-btn--ghost";
+      toggle.textContent = "Expand";
+      toggle.setAttribute("aria-expanded", "false");
+      toggle.setAttribute("aria-controls", panelId);
+      toggle.setAttribute("aria-label", "Expand code block");
+      toggle.addEventListener("click", () => {
+        const on = this.hasAttribute("data-collapsed");
+        if (on) {
+          this.removeAttribute("data-collapsed");
+          toggle.textContent = "Collapse";
+          toggle.setAttribute("aria-expanded", "true");
+          toggle.setAttribute("aria-label", "Collapse code block");
+        } else {
+          this.setAttribute("data-collapsed", "");
+          toggle.textContent = "Expand";
+          toggle.setAttribute("aria-expanded", "false");
+          toggle.setAttribute("aria-label", "Expand code block");
+        }
+      });
+      this.setAttribute("data-collapsed", "");
+      toolbar.appendChild(toggle);
+    }
+    if (showLines) {
+      const gutter = document.createElement("div");
+      gutter.className = "velin-code-block__line-numbers";
+      const lines = source.split("\n");
+      const lineCount = lines.length;
+      gutter.textContent = "";
+      for (let i = 0; i < lineCount; i += 1) {
+        const n = i + 1;
+        const span = document.createElement("span");
+        if (highlightLines.has(n)) span.className = "velin-code-block__line--highlight";
+        span.textContent = String(n);
+        gutter.appendChild(span);
+      }
+      wrap.appendChild(gutter);
+    }
+    const pre = document.createElement("pre");
+    if (lang) {
+      pre.setAttribute("language", lang);
+      pre.dataset.language = lang;
+    }
+    const code = document.createElement("code");
+    if (lang) code.className = `language-${lang}`;
+    code.textContent = source;
+    pre.appendChild(code);
+    wrap.appendChild(pre);
+    this.appendChild(toolbar);
+    this.appendChild(wrap);
+    this._pre = pre;
+  }
+  async _setupHighlight() {
+    if (!this._pre) return;
+    delete this._pre.dataset.velinHighlighted;
+    delete this._pre.dataset.velinObserve;
+    const immediate = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (immediate) {
+      await highlightElement(this._pre);
+    } else {
+      initHighlight(this, { root: this });
+    }
+  }
+};
+customElements.define("velin-code-block", VelinCodeBlock);
+var velin_code_block_default = VelinCodeBlock;
+export {
+  velin_code_block_default as default
+};

package/dist/chunks/velin-code-block-TSUKPY4C.js

@@ -0,0 +1,123 @@
+import {
+  highlightElement,
+  initHighlight
+} from "./chunk-J472ERN2.js";
+import "./chunk-7MCGPHVC.js";
+import "./chunk-M5CHQVP6.js";
+import "./chunk-7FFAMRFV.js";
+
+// components/velin-code-block.js
+function parseLineHighlight(spec) {
+  const lines = /* @__PURE__ */ new Set();
+  if (!spec) return lines;
+  for (const part of spec.split(",")) {
+    const p = part.trim();
+    if (!p) continue;
+    if (p.includes("-")) {
+      const [a, b] = p.split("-").map((n) => parseInt(n, 10));
+      if (!Number.isNaN(a) && !Number.isNaN(b)) {
+        for (let i = Math.min(a, b); i <= Math.max(a, b); i += 1) lines.add(i);
+      }
+    } else {
+      const n = parseInt(p, 10);
+      if (!Number.isNaN(n)) lines.add(n);
+    }
+  }
+  return lines;
+}
+var VelinCodeBlock = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["language", "highlight", "line-numbers", "collapsed"];
+  }
+  connectedCallback() {
+    if (this._built) return;
+    this._built = true;
+    this.classList.add("velin-code-block");
+    this._render();
+    this._setupHighlight();
+  }
+  attributeChangedCallback() {
+    if (!this._built) return;
+    this._render();
+    this._setupHighlight();
+  }
+  _render() {
+    const lang = this.getAttribute("language") || "";
+    const showLines = this.hasAttribute("line-numbers");
+    const collapsed = this.hasAttribute("collapsed");
+    const highlightLines = parseLineHighlight(this.getAttribute("highlight") || "");
+    const source = this.textContent.trim();
+    this.textContent = "";
+    const toolbar = document.createElement("div");
+    toolbar.className = "velin-code-block__toolbar";
+    toolbar.innerHTML = "";
+    const copyWc = document.createElement("velin-copy");
+    copyWc.setAttribute("value", source);
+    copyWc.setAttribute("label", "Copy");
+    toolbar.appendChild(copyWc);
+    if (collapsed) {
+      const toggle = document.createElement("button");
+      toggle.type = "button";
+      toggle.className = "velin-btn velin-btn--sm velin-btn--ghost";
+      toggle.textContent = "Expand";
+      toggle.addEventListener("click", () => {
+        const on = this.hasAttribute("data-collapsed");
+        if (on) {
+          this.removeAttribute("data-collapsed");
+          toggle.textContent = "Collapse";
+        } else {
+          this.setAttribute("data-collapsed", "");
+          toggle.textContent = "Expand";
+        }
+      });
+      this.setAttribute("data-collapsed", "");
+      toolbar.appendChild(toggle);
+    }
+    const wrap = document.createElement("div");
+    wrap.className = showLines ? "velin-code-block__gutter" : "";
+    if (showLines) {
+      const gutter = document.createElement("div");
+      gutter.className = "velin-code-block__line-numbers";
+      const lines = source.split("\n");
+      const lineCount = lines.length;
+      gutter.textContent = "";
+      for (let i = 0; i < lineCount; i += 1) {
+        const n = i + 1;
+        const span = document.createElement("span");
+        if (highlightLines.has(n)) span.className = "velin-code-block__line--highlight";
+        span.textContent = String(n);
+        gutter.appendChild(span);
+      }
+      wrap.appendChild(gutter);
+    }
+    const pre = document.createElement("pre");
+    if (lang) {
+      pre.setAttribute("language", lang);
+      pre.dataset.language = lang;
+    }
+    const code = document.createElement("code");
+    if (lang) code.className = `language-${lang}`;
+    code.textContent = source;
+    pre.appendChild(code);
+    wrap.appendChild(pre);
+    this.appendChild(toolbar);
+    this.appendChild(wrap);
+    this._pre = pre;
+  }
+  async _setupHighlight() {
+    if (!this._pre) return;
+    delete this._pre.dataset.velinHighlighted;
+    delete this._pre.dataset.velinObserve;
+    const immediate = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (immediate) {
+      await highlightElement(this._pre);
+    } else {
+      initHighlight(this, { root: this });
+    }
+  }
+};
+customElements.define("velin-code-block", VelinCodeBlock);
+var velin_code_block_default = VelinCodeBlock;
+export {
+  velin_code_block_default as default
+};

package/dist/chunks/velin-code-block-Y6CM726Q.js

@@ -0,0 +1,119 @@
+import {
+  highlightElement,
+  initHighlight
+} from "./chunk-J472ERN2.js";
+import "./chunk-7MCGPHVC.js";
+import "./chunk-M5CHQVP6.js";
+import "./chunk-7FFAMRFV.js";
+
+// components/velin-code-block.js
+function parseLineHighlight(spec) {
+  const lines = /* @__PURE__ */ new Set();
+  if (!spec) return lines;
+  for (const part of spec.split(",")) {
+    const p = part.trim();
+    if (!p) continue;
+    if (p.includes("-")) {
+      const [a, b] = p.split("-").map((n) => parseInt(n, 10));
+      if (!Number.isNaN(a) && !Number.isNaN(b)) {
+        for (let i = Math.min(a, b); i <= Math.max(a, b); i += 1) lines.add(i);
+      }
+    } else {
+      const n = parseInt(p, 10);
+      if (!Number.isNaN(n)) lines.add(n);
+    }
+  }
+  return lines;
+}
+var VelinCodeBlock = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["language", "highlight", "line-numbers", "collapsed"];
+  }
+  connectedCallback() {
+    if (this._built) return;
+    this._built = true;
+    this.classList.add("velin-code-block");
+    this._render();
+    this._setupHighlight();
+  }
+  attributeChangedCallback() {
+    if (!this._built) return;
+    this._render();
+    this._setupHighlight();
+  }
+  _render() {
+    const lang = this.getAttribute("language") || "";
+    const showLines = this.hasAttribute("line-numbers");
+    const collapsed = this.hasAttribute("collapsed");
+    const highlightLines = parseLineHighlight(this.getAttribute("highlight") || "");
+    const source = this.textContent.trim();
+    this.textContent = "";
+    const toolbar = document.createElement("div");
+    toolbar.className = "velin-code-block__toolbar";
+    toolbar.innerHTML = "";
+    const copyWc = document.createElement("velin-copy");
+    copyWc.setAttribute("value", source);
+    copyWc.setAttribute("label", "Copy");
+    toolbar.appendChild(copyWc);
+    if (collapsed) {
+      const toggle = document.createElement("button");
+      toggle.type = "button";
+      toggle.className = "velin-btn velin-btn--sm velin-btn--ghost";
+      toggle.textContent = "Expand";
+      toggle.addEventListener("click", () => {
+        const on = this.hasAttribute("data-collapsed");
+        if (on) {
+          this.removeAttribute("data-collapsed");
+          toggle.textContent = "Collapse";
+        } else {
+          this.setAttribute("data-collapsed", "");
+          toggle.textContent = "Expand";
+        }
+      });
+      this.setAttribute("data-collapsed", "");
+      toolbar.appendChild(toggle);
+    }
+    const wrap = document.createElement("div");
+    wrap.className = showLines ? "velin-code-block__gutter" : "";
+    if (showLines) {
+      const gutter = document.createElement("div");
+      gutter.className = "velin-code-block__line-numbers";
+      const lineCount = source.split("\n").length;
+      gutter.innerHTML = Array.from({ length: lineCount }, (_, i) => {
+        const n = i + 1;
+        const cls = highlightLines.has(n) ? ' class="velin-code-block__line--highlight"' : "";
+        return `<span${cls}>${n}</span>`;
+      }).join("\n");
+      wrap.appendChild(gutter);
+    }
+    const pre = document.createElement("pre");
+    if (lang) {
+      pre.setAttribute("language", lang);
+      pre.dataset.language = lang;
+    }
+    const code = document.createElement("code");
+    if (lang) code.className = `language-${lang}`;
+    code.textContent = source;
+    pre.appendChild(code);
+    wrap.appendChild(pre);
+    this.appendChild(toolbar);
+    this.appendChild(wrap);
+    this._pre = pre;
+  }
+  async _setupHighlight() {
+    if (!this._pre) return;
+    delete this._pre.dataset.velinHighlighted;
+    delete this._pre.dataset.velinObserve;
+    const immediate = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (immediate) {
+      await highlightElement(this._pre);
+    } else {
+      initHighlight(this, { root: this });
+    }
+  }
+};
+customElements.define("velin-code-block", VelinCodeBlock);
+var velin_code_block_default = VelinCodeBlock;
+export {
+  velin_code_block_default as default
+};

package/dist/chunks/velin-collapse-5XYBUIID.js

@@ -0,0 +1,80 @@
+// components/velin-collapse.js
+var styles = `
+  :host { display: block; }
+  .content {
+    overflow: hidden;
+    transition: grid-template-rows 300ms ease;
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  :host([open]) .content { grid-template-rows: 1fr; }
+  .inner { min-height: 0; }
+  @media (prefers-reduced-motion: reduce) { .content { transition: none; } }
+`;
+var collapseId = 0;
+function isButtonLike(el) {
+  const tag = el.tagName;
+  return tag === "BUTTON" || tag === "A" && el.hasAttribute("href") || el.getAttribute("role") === "button";
+}
+var VelinCollapse = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["open"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._contentId = `velin-collapse-panel-${++collapseId}`;
+    this._onTriggerKey = this._onTriggerKey.bind(this);
+  }
+  connectedCallback() {
+    const panelId = this._contentId;
+    this.shadowRoot.innerHTML = "<style>" + styles + '</style><slot name="trigger"></slot><div class="content" id="' + panelId + '" part="content"><div class="inner"><slot></slot></div></div>';
+    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
+    triggerSlot.addEventListener("slotchange", () => this._wireTrigger());
+    this._wireTrigger();
+  }
+  _wireTrigger() {
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (!trigger) return;
+    if (!isButtonLike(trigger)) {
+      trigger.setAttribute("role", "button");
+      if (!trigger.hasAttribute("tabindex")) trigger.setAttribute("tabindex", "0");
+    }
+    trigger.setAttribute("aria-controls", this._contentId);
+    trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
+    trigger.removeEventListener("click", this._onClick);
+    trigger.removeEventListener("keydown", this._onTriggerKey);
+    this._onClick = () => this.toggle();
+    trigger.addEventListener("click", this._onClick);
+    trigger.addEventListener("keydown", this._onTriggerKey);
+  }
+  _onTriggerKey(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.toggle();
+    }
+  }
+  attributeChangedCallback(name) {
+    if (name === "open") {
+      const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+      if (trigger) trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
+    }
+  }
+  toggle() {
+    if (this.hasAttribute("open")) this.close();
+    else this.open();
+  }
+  open() {
+    this.setAttribute("open", "");
+    this.dispatchEvent(new CustomEvent("velin-open", { bubbles: true }));
+  }
+  close() {
+    this.removeAttribute("open");
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+};
+customElements.define("velin-collapse", VelinCollapse);
+var velin_collapse_default = VelinCollapse;
+export {
+  velin_collapse_default as default
+};

package/dist/chunks/velin-combobox-2KDTCQ7N.js

@@ -0,0 +1,155 @@
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-MKZP2TBH.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
+};