@birdapi/velinstyle 0.8.0 → 0.9.0

package/dist/chunks/velin-lightbox-QOTB4PRL.js

@@ -0,0 +1,140 @@
+import {
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML,
+  sanitizeURL
+} from "./chunk-MKZP2TBH.js";
+
+// components/velin-lightbox.js
+var styles = `
+  :host { display: contents; }
+  .overlay {
+    position: fixed; inset: 0; z-index: var(--velin-z-modal, 500);
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(0,0,0,0.85); opacity: 0; visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .content {
+    position: relative; max-inline-size: 90vw; max-block-size: 90vh;
+  }
+  .content img, .content video {
+    max-inline-size: 100%; max-block-size: 85vh; object-fit: contain;
+    border-radius: var(--velin-radius-md, 0.375rem);
+  }
+  .close {
+    position: absolute; top: -2.5rem; right: 0;
+    background: none; border: none; color: #fff; font-size: 1.5rem;
+    cursor: pointer; min-width: 2.75rem; min-height: 2.75rem;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .close:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  .nav {
+    position: absolute; top: 50%; transform: translateY(-50%);
+    background: rgba(255,255,255,0.15); border: none; color: #fff;
+    font-size: 1.5rem; cursor: pointer; border-radius: 50%;
+    min-width: 2.75rem; min-height: 2.75rem;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .nav:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  .nav--prev { left: -3.5rem; }
+  .nav--next { right: -3.5rem; }
+  .counter { position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%); color: #ccc; font-size: 0.875rem; }
+  @media (prefers-reduced-motion: reduce) { .overlay { transition: none; } }
+  @media (max-width: 48rem) {
+    .nav--prev { left: 0.5rem; }
+    .nav--next { right: 0.5rem; }
+  }
+`;
+var VelinLightbox = class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._index = 0;
+    this._items = [];
+    this._previousFocus = null;
+    this._onTrapKey = (e) => {
+      if (e.key === "Tab") trapFocus(this.shadowRoot, e);
+    };
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <slot></slot>
+      <div class="overlay" role="dialog" aria-modal="true" aria-label="Image lightbox" aria-roledescription="lightbox" part="overlay">
+        <button class="nav nav--prev" aria-label="Previous">&#8249;</button>
+        <div class="content" part="content"></div>
+        <button class="nav nav--next" aria-label="Next">&#8250;</button>
+        <button class="close" aria-label="Close">&times;</button>
+        <div class="counter" part="counter"></div>
+      </div>
+    `;
+    const slot = this.shadowRoot.querySelector("slot");
+    slot.addEventListener("slotchange", () => {
+      this._items = slot.assignedElements().filter((el) => el.tagName === "IMG" || el.tagName === "VIDEO" || el.dataset.velinLightbox);
+      this._items.forEach((item, i) => {
+        item.style.cursor = "pointer";
+        item.addEventListener("click", () => this.open(i));
+      });
+    });
+    this.shadowRoot.querySelector(".close").addEventListener("click", () => this.close());
+    this.shadowRoot.querySelector(".nav--prev").addEventListener("click", () => this._prev());
+    this.shadowRoot.querySelector(".nav--next").addEventListener("click", () => this._next());
+    this.shadowRoot.querySelector(".overlay").addEventListener("click", (e) => {
+      if (e.target.classList.contains("overlay")) this.close();
+    });
+    this.shadowRoot.querySelector(".overlay").addEventListener("keydown", (e) => {
+      if (e.key === "Escape") this.close();
+      if (e.key === "ArrowLeft") this._prev();
+      if (e.key === "ArrowRight") this._next();
+    });
+  }
+  open(index = 0) {
+    this._previousFocus = document.activeElement;
+    this._index = index;
+    this.setAttribute("open", "");
+    this._render();
+    document.body.style.overflow = "hidden";
+    const overlay = this.shadowRoot.querySelector(".overlay");
+    overlay.removeEventListener("keydown", this._onTrapKey);
+    overlay.addEventListener("keydown", this._onTrapKey);
+    this.shadowRoot.querySelector(".close").focus();
+  }
+  close() {
+    this.removeAttribute("open");
+    document.body.style.overflow = "";
+    if (this._previousFocus) {
+      this._previousFocus.focus();
+      this._previousFocus = null;
+    }
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+  _prev() {
+    this._index = (this._index - 1 + this._items.length) % this._items.length;
+    this._render();
+  }
+  _next() {
+    this._index = (this._index + 1) % this._items.length;
+    this._render();
+  }
+  _render() {
+    const container = this.shadowRoot.querySelector(".content");
+    const item = this._items[this._index];
+    if (!item) return;
+    const src = sanitizeURL(item.dataset.velinLightbox || item.src);
+    const alt = escapeHTML(item.alt || "");
+    if (item.tagName === "VIDEO") {
+      container.innerHTML = `<video src="${escapeHTML(src)}" controls autoplay></video>`;
+    } else {
+      container.innerHTML = `<img src="${escapeHTML(src)}" alt="${alt}">`;
+    }
+    const counter = this.shadowRoot.querySelector(".counter");
+    counter.textContent = `${this._index + 1} / ${this._items.length}`;
+  }
+};
+customElements.define("velin-lightbox", VelinLightbox);
+var velin_lightbox_default = VelinLightbox;
+export {
+  velin_lightbox_default as default
+};

package/dist/chunks/velin-lightbox-UCD6N7HF.js

@@ -0,0 +1,140 @@
+import {
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML,
+  sanitizeURL
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-lightbox.js
+var styles = `
+  :host { display: contents; }
+  .overlay {
+    position: fixed; inset: 0; z-index: var(--velin-z-modal, 500);
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(0,0,0,0.85); opacity: 0; visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .content {
+    position: relative; max-inline-size: 90vw; max-block-size: 90vh;
+  }
+  .content img, .content video {
+    max-inline-size: 100%; max-block-size: 85vh; object-fit: contain;
+    border-radius: var(--velin-radius-md, 0.375rem);
+  }
+  .close {
+    position: absolute; top: -2.5rem; right: 0;
+    background: none; border: none; color: #fff; font-size: 1.5rem;
+    cursor: pointer; min-width: 2.75rem; min-height: 2.75rem;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .close:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  .nav {
+    position: absolute; top: 50%; transform: translateY(-50%);
+    background: rgba(255,255,255,0.15); border: none; color: #fff;
+    font-size: 1.5rem; cursor: pointer; border-radius: 50%;
+    min-width: 2.75rem; min-height: 2.75rem;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .nav:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  .nav--prev { left: -3.5rem; }
+  .nav--next { right: -3.5rem; }
+  .counter { position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%); color: #ccc; font-size: 0.875rem; }
+  @media (prefers-reduced-motion: reduce) { .overlay { transition: none; } }
+  @media (max-width: 48rem) {
+    .nav--prev { left: 0.5rem; }
+    .nav--next { right: 0.5rem; }
+  }
+`;
+var VelinLightbox = class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._index = 0;
+    this._items = [];
+    this._previousFocus = null;
+    this._onTrapKey = (e) => {
+      if (e.key === "Tab") trapFocus(this.shadowRoot, e);
+    };
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <slot></slot>
+      <div class="overlay" role="dialog" aria-modal="true" aria-label="Image lightbox" aria-roledescription="lightbox" part="overlay">
+        <button class="nav nav--prev" aria-label="Previous">&#8249;</button>
+        <div class="content" part="content"></div>
+        <button class="nav nav--next" aria-label="Next">&#8250;</button>
+        <button class="close" aria-label="Close">&times;</button>
+        <div class="counter" part="counter"></div>
+      </div>
+    `;
+    const slot = this.shadowRoot.querySelector("slot");
+    slot.addEventListener("slotchange", () => {
+      this._items = slot.assignedElements().filter((el) => el.tagName === "IMG" || el.tagName === "VIDEO" || el.dataset.velinLightbox);
+      this._items.forEach((item, i) => {
+        item.style.cursor = "pointer";
+        item.addEventListener("click", () => this.open(i));
+      });
+    });
+    this.shadowRoot.querySelector(".close").addEventListener("click", () => this.close());
+    this.shadowRoot.querySelector(".nav--prev").addEventListener("click", () => this._prev());
+    this.shadowRoot.querySelector(".nav--next").addEventListener("click", () => this._next());
+    this.shadowRoot.querySelector(".overlay").addEventListener("click", (e) => {
+      if (e.target.classList.contains("overlay")) this.close();
+    });
+    this.shadowRoot.querySelector(".overlay").addEventListener("keydown", (e) => {
+      if (e.key === "Escape") this.close();
+      if (e.key === "ArrowLeft") this._prev();
+      if (e.key === "ArrowRight") this._next();
+    });
+  }
+  open(index = 0) {
+    this._previousFocus = document.activeElement;
+    this._index = index;
+    this.setAttribute("open", "");
+    this._render();
+    document.body.style.overflow = "hidden";
+    const overlay = this.shadowRoot.querySelector(".overlay");
+    overlay.removeEventListener("keydown", this._onTrapKey);
+    overlay.addEventListener("keydown", this._onTrapKey);
+    this.shadowRoot.querySelector(".close").focus();
+  }
+  close() {
+    this.removeAttribute("open");
+    document.body.style.overflow = "";
+    if (this._previousFocus) {
+      this._previousFocus.focus();
+      this._previousFocus = null;
+    }
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+  _prev() {
+    this._index = (this._index - 1 + this._items.length) % this._items.length;
+    this._render();
+  }
+  _next() {
+    this._index = (this._index + 1) % this._items.length;
+    this._render();
+  }
+  _render() {
+    const container = this.shadowRoot.querySelector(".content");
+    const item = this._items[this._index];
+    if (!item) return;
+    const src = sanitizeURL(item.dataset.velinLightbox || item.src);
+    const alt = escapeHTML(item.alt || "");
+    if (item.tagName === "VIDEO") {
+      container.innerHTML = `<video src="${escapeHTML(src)}" controls autoplay></video>`;
+    } else {
+      container.innerHTML = `<img src="${escapeHTML(src)}" alt="${alt}">`;
+    }
+    const counter = this.shadowRoot.querySelector(".counter");
+    counter.textContent = `${this._index + 1} / ${this._items.length}`;
+  }
+};
+customElements.define("velin-lightbox", VelinLightbox);
+var velin_lightbox_default = VelinLightbox;
+export {
+  velin_lightbox_default as default
+};

package/dist/chunks/velin-live-dot-RJHX2DGY.js

@@ -0,0 +1,74 @@
+import {
+  liveDotLabel
+} from "./chunk-Z4JYQ2XX.js";
+
+// components/velin-live-dot.js
+var STATUS_COLORS = {
+  live: "var(--velin-color-success, oklch(60% 0.16 145))",
+  paused: "var(--velin-color-text-muted, oklch(60% 0.02 240))",
+  warning: "var(--velin-color-warning, oklch(75% 0.16 80))",
+  error: "var(--velin-color-danger, oklch(60% 0.2 25))",
+  muted: "var(--velin-color-border, oklch(85% 0.01 240))"
+};
+var styles = `
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--velin-space-2, 0.5rem);
+    font-size: inherit;
+    color: inherit;
+    line-height: 1.2;
+  }
+  .dot {
+    inline-size: 0.55rem;
+    block-size: 0.55rem;
+    border-radius: 50%;
+    background: var(--velin-live-color);
+    flex-shrink: 0;
+  }
+  :host([pulse="false"]) .dot { animation: none; }
+  :host(:not([pulse="false"])) .dot { animation: velin-live-pulse 1.8s var(--velin-ease-out, ease-out) infinite; }
+  @media (prefers-reduced-motion: reduce) {
+    .dot { animation: none !important; }
+  }
+`;
+var KEYFRAMES_FALLBACK = `
+@keyframes velin-live-pulse {
+  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--velin-live-color) 65%, transparent); }
+  70% { box-shadow: 0 0 0 0.6rem color-mix(in oklch, var(--velin-live-color) 0%, transparent); }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}`;
+var VelinLiveDot = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["status", "pulse"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this.shadowRoot) this._render();
+  }
+  _render() {
+    const status = this.getAttribute("status") || "live";
+    const color = STATUS_COLORS[status] || STATUS_COLORS.live;
+    const label = this.getAttribute("aria-label") || liveDotLabel(status);
+    this.setAttribute("role", "status");
+    this.setAttribute("aria-label", label);
+    this.style.setProperty("--velin-live-color", color);
+    this.shadowRoot.innerHTML = `
+      <style>${styles}${KEYFRAMES_FALLBACK}</style>
+      <span class="dot" aria-hidden="true"></span><slot></slot>
+    `;
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("velin-live-dot")) {
+  customElements.define("velin-live-dot", VelinLiveDot);
+}
+var velin_live_dot_default = VelinLiveDot;
+export {
+  velin_live_dot_default as default
+};

package/dist/chunks/velin-live-dot-XHUZCIDZ.js

@@ -0,0 +1,67 @@
+// components/velin-live-dot.js
+var STATUS_COLORS = {
+  live: "var(--velin-color-success, oklch(60% 0.16 145))",
+  paused: "var(--velin-color-text-muted, oklch(60% 0.02 240))",
+  warning: "var(--velin-color-warning, oklch(75% 0.16 80))",
+  error: "var(--velin-color-danger, oklch(60% 0.2 25))",
+  muted: "var(--velin-color-border, oklch(85% 0.01 240))"
+};
+var styles = `
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--velin-space-2, 0.5rem);
+    font-size: inherit;
+    color: inherit;
+    line-height: 1.2;
+  }
+  .dot {
+    inline-size: 0.55rem;
+    block-size: 0.55rem;
+    border-radius: 50%;
+    background: var(--velin-live-color);
+    flex-shrink: 0;
+  }
+  :host([pulse="false"]) .dot { animation: none; }
+  :host(:not([pulse="false"])) .dot { animation: velin-live-pulse 1.8s var(--velin-ease-out, ease-out) infinite; }
+  @media (prefers-reduced-motion: reduce) {
+    .dot { animation: none !important; }
+  }
+`;
+var KEYFRAMES_FALLBACK = `
+@keyframes velin-live-pulse {
+  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--velin-live-color) 65%, transparent); }
+  70% { box-shadow: 0 0 0 0.6rem color-mix(in oklch, var(--velin-live-color) 0%, transparent); }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}`;
+var VelinLiveDot = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["status", "pulse"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this.shadowRoot) this._render();
+  }
+  _render() {
+    const status = this.getAttribute("status") || "live";
+    const color = STATUS_COLORS[status] || STATUS_COLORS.live;
+    this.style.setProperty("--velin-live-color", color);
+    this.shadowRoot.innerHTML = `
+      <style>${styles}${KEYFRAMES_FALLBACK}</style>
+      <span class="dot" aria-hidden="true"></span><slot></slot>
+    `;
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("velin-live-dot")) {
+  customElements.define("velin-live-dot", VelinLiveDot);
+}
+var velin_live_dot_default = VelinLiveDot;
+export {
+  velin_live_dot_default as default
+};

package/dist/chunks/velin-menubar-I426AED2.js

@@ -0,0 +1,86 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-menubar.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: block; }
+  .menubar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--velin-space-1, 0.25rem);
+    padding: var(--velin-space-2, 0.5rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  ::slotted([role="menuitem"]) {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    background: none;
+    border: none;
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    cursor: pointer;
+    font-size: var(--velin-text-base, 1rem);
+    color: var(--velin-color-text, #111);
+  }
+  ::slotted([role="menuitem"]:hover) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+var VelinMenubar = class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute("aria-label") || "Menu bar");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="menubar" role="menubar" aria-label="${label}"><slot></slot></div>
+    `;
+    this.addEventListener("keydown", this._onKey);
+    this.shadowRoot.querySelector("slot")?.addEventListener("slotchange", () => this._init());
+    this._init();
+  }
+  _getItems() {
+    const slot = this.shadowRoot.querySelector("slot");
+    return slot ? slot.assignedElements().filter((el) => !el.hasAttribute("disabled")) : [];
+  }
+  _init() {
+    const items = this._getItems();
+    items.forEach((el, i) => {
+      if (!el.hasAttribute("role")) el.setAttribute("role", "menuitem");
+      el.setAttribute("tabindex", i === 0 ? "0" : "-1");
+    });
+  }
+  _onKey(e) {
+    const items = this._getItems();
+    if (items.includes(e.target)) rovingTabindex(this, items, e);
+  }
+  static get observedAttributes() {
+    return ["aria-label"];
+  }
+  attributeChangedCallback(name) {
+    if (name === "aria-label") {
+      const bar = this.shadowRoot?.querySelector(".menubar");
+      if (bar) bar.setAttribute("aria-label", escapeHTML(this.getAttribute("aria-label") || "Menu bar"));
+    }
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this._onKey);
+  }
+};
+customElements.define("velin-menubar", VelinMenubar);
+var velin_menubar_default = VelinMenubar;
+export {
+  velin_menubar_default as default
+};

package/dist/chunks/velin-menubar-J66JXRWW.js

@@ -0,0 +1,86 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-LA7264K4.js";
+
+// components/velin-menubar.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: block; }
+  .menubar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--velin-space-1, 0.25rem);
+    padding: var(--velin-space-2, 0.5rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  ::slotted([role="menuitem"]) {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    background: none;
+    border: none;
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    cursor: pointer;
+    font-size: var(--velin-text-base, 1rem);
+    color: var(--velin-color-text, #111);
+  }
+  ::slotted([role="menuitem"]:hover) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+var VelinMenubar = class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute("aria-label") || "Menu bar");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="menubar" role="menubar" aria-label="${label}"><slot></slot></div>
+    `;
+    this.addEventListener("keydown", this._onKey);
+    this.shadowRoot.querySelector("slot")?.addEventListener("slotchange", () => this._init());
+    this._init();
+  }
+  _getItems() {
+    const slot = this.shadowRoot.querySelector("slot");
+    return slot ? slot.assignedElements().filter((el) => !el.hasAttribute("disabled")) : [];
+  }
+  _init() {
+    const items = this._getItems();
+    items.forEach((el, i) => {
+      if (!el.hasAttribute("role")) el.setAttribute("role", "menuitem");
+      el.setAttribute("tabindex", i === 0 ? "0" : "-1");
+    });
+  }
+  _onKey(e) {
+    const items = this._getItems();
+    if (items.includes(e.target)) rovingTabindex(this, items, e);
+  }
+  static get observedAttributes() {
+    return ["aria-label"];
+  }
+  attributeChangedCallback(name) {
+    if (name === "aria-label") {
+      const bar = this.shadowRoot?.querySelector(".menubar");
+      if (bar) bar.setAttribute("aria-label", escapeHTML(this.getAttribute("aria-label") || "Menu bar"));
+    }
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this._onKey);
+  }
+};
+customElements.define("velin-menubar", VelinMenubar);
+var velin_menubar_default = VelinMenubar;
+export {
+  velin_menubar_default as default
+};

package/dist/chunks/velin-menubar-SFEXJE56.js

@@ -0,0 +1,86 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-MKZP2TBH.js";
+
+// components/velin-menubar.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: block; }
+  .menubar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--velin-space-1, 0.25rem);
+    padding: var(--velin-space-2, 0.5rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  ::slotted([role="menuitem"]) {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    background: none;
+    border: none;
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    cursor: pointer;
+    font-size: var(--velin-text-base, 1rem);
+    color: var(--velin-color-text, #111);
+  }
+  ::slotted([role="menuitem"]:hover) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+var VelinMenubar = class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute("aria-label") || "Menu bar");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="menubar" role="menubar" aria-label="${label}"><slot></slot></div>
+    `;
+    this.addEventListener("keydown", this._onKey);
+    this.shadowRoot.querySelector("slot")?.addEventListener("slotchange", () => this._init());
+    this._init();
+  }
+  _getItems() {
+    const slot = this.shadowRoot.querySelector("slot");
+    return slot ? slot.assignedElements().filter((el) => !el.hasAttribute("disabled")) : [];
+  }
+  _init() {
+    const items = this._getItems();
+    items.forEach((el, i) => {
+      if (!el.hasAttribute("role")) el.setAttribute("role", "menuitem");
+      el.setAttribute("tabindex", i === 0 ? "0" : "-1");
+    });
+  }
+  _onKey(e) {
+    const items = this._getItems();
+    if (items.includes(e.target)) rovingTabindex(this, items, e);
+  }
+  static get observedAttributes() {
+    return ["aria-label"];
+  }
+  attributeChangedCallback(name) {
+    if (name === "aria-label") {
+      const bar = this.shadowRoot?.querySelector(".menubar");
+      if (bar) bar.setAttribute("aria-label", escapeHTML(this.getAttribute("aria-label") || "Menu bar"));
+    }
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this._onKey);
+  }
+};
+customElements.define("velin-menubar", VelinMenubar);
+var velin_menubar_default = VelinMenubar;
+export {
+  velin_menubar_default as default
+};