@birdapi/velinstyle 0.8.0 → 0.9.0

package/dist/chunks/velin-popover-T72HK3DF.js

@@ -0,0 +1,151 @@
+import {
+  getFocusableElements,
+  restoreFocus,
+  saveFocus,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-popover.js
+var styles = `
+  :host { position: relative; display: inline-block; }
+  .popover {
+    position: absolute; z-index: var(--velin-z-dropdown, 200);
+    background: var(--velin-color-surface-bright, #fff);
+    border: 1px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-lg, 0.75rem);
+    box-shadow: var(--velin-shadow-lg, 0 10px 15px rgba(0,0,0,0.08));
+    padding: var(--velin-space-4, 1rem);
+    min-inline-size: 12rem; max-inline-size: 20rem;
+    opacity: 0; visibility: hidden;
+    transition: opacity 150ms ease, visibility 150ms ease;
+  }
+  :host([open]) .popover { opacity: 1; visibility: visible; }
+  .popover--top { inset-block-end: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); }
+  .popover--bottom { inset-block-start: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); }
+  .popover--start { inset-inline-end: calc(100% + 0.5rem); inset-block-start: 50%; transform: translateY(-50%); }
+  .popover--end { inset-inline-start: calc(100% + 0.5rem); inset-block-start: 50%; transform: translateY(-50%); }
+  .popover__title {
+    font-size: var(--velin-text-sm, 0.875rem); font-weight: var(--velin-weight-semibold, 600);
+    margin-block-end: var(--velin-space-2, 0.5rem);
+    padding-block-end: var(--velin-space-2, 0.5rem);
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  @media (prefers-reduced-motion: reduce) { .popover { transition: none; } }
+`;
+var popoverId = 0;
+var VelinPopover = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["open"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._popoverId = `velin-popover-${++popoverId}`;
+    this._onOutside = this._onOutside.bind(this);
+    this._onKey = this._onKey.bind(this);
+    this._prevFocus = null;
+    this._isDialog = false;
+  }
+  connectedCallback() {
+    const placement = this.getAttribute("placement") || "bottom";
+    const triggerType = this.getAttribute("trigger") || "click";
+    const title = this.getAttribute("title") || "";
+    const role = triggerType === "hover" ? "tooltip" : "dialog";
+    this._isDialog = role === "dialog";
+    const titleId = title ? `${this._popoverId}-title` : "";
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <slot name="trigger"></slot>
+      <div class="popover popover--${placement}" id="${this._popoverId}" role="${role}" part="popover"${titleId ? ` aria-labelledby="${titleId}"` : ""}>
+        ${title ? `<div class="popover__title" id="${titleId}" part="title">${escapeHTML(title)}</div>` : ""}
+        <slot></slot>
+      </div>
+    `;
+    const popoverEl = this.shadowRoot.querySelector(".popover");
+    if (!title) {
+      const ariaLabel = this.getAttribute("aria-label");
+      if (ariaLabel && popoverEl) popoverEl.setAttribute("aria-label", ariaLabel);
+    }
+    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
+    triggerSlot.addEventListener("slotchange", () => this._wireTrigger(triggerType));
+    this._wireTrigger(triggerType);
+  }
+  _wireTrigger(triggerType) {
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (!trigger) return;
+    const isHover = triggerType === "hover";
+    trigger.setAttribute("aria-haspopup", isHover ? "true" : "dialog");
+    trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
+    if (this._isDialog) {
+      trigger.setAttribute("aria-controls", this._popoverId);
+    }
+    if (triggerType === "click") {
+      trigger.onclick = () => this.toggle();
+    } else if (triggerType === "hover") {
+      this.onmouseenter = () => this.open();
+      this.onmouseleave = () => this.close();
+      this.onfocusin = () => this.open();
+      this.onfocusout = (e) => {
+        if (!this.contains(e.relatedTarget)) this.close();
+      };
+    } else if (triggerType === "focus") {
+      trigger.onfocusin = () => this.open();
+      trigger.onfocusout = () => this.close();
+    }
+  }
+  open() {
+    this.setAttribute("open", "");
+    const trigger = this.querySelector('[slot="trigger"]');
+    if (trigger) trigger.setAttribute("aria-expanded", "true");
+    document.addEventListener("click", this._onOutside, true);
+    document.addEventListener("keydown", this._onKey);
+    if (this._isDialog) {
+      this._prevFocus = saveFocus();
+      requestAnimationFrame(() => {
+        const focusable = getFocusableElements(this.shadowRoot.querySelector(".popover"));
+        if (focusable.length) focusable[0].focus();
+        else this.shadowRoot.querySelector(".popover")?.focus();
+      });
+    }
+  }
+  close() {
+    this.removeAttribute("open");
+    const trigger = this.querySelector('[slot="trigger"]');
+    if (trigger) trigger.setAttribute("aria-expanded", "false");
+    document.removeEventListener("click", this._onOutside, true);
+    document.removeEventListener("keydown", this._onKey);
+    if (this._isDialog && this._prevFocus) {
+      restoreFocus(this._prevFocus);
+      this._prevFocus = null;
+    }
+  }
+  toggle() {
+    this.hasAttribute("open") ? this.close() : this.open();
+  }
+  _onOutside(e) {
+    if (!this.contains(e.target)) this.close();
+  }
+  _onKey(e) {
+    if (e.key === "Escape") {
+      this.close();
+      const trigger = this.querySelector('[slot="trigger"]');
+      if (trigger) trigger.focus();
+      return;
+    }
+    if (this._isDialog && this.hasAttribute("open")) {
+      trapFocus(this.shadowRoot.querySelector(".popover"), e);
+    }
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this._onOutside, true);
+    document.removeEventListener("keydown", this._onKey);
+  }
+};
+customElements.define("velin-popover", VelinPopover);
+var velin_popover_default = VelinPopover;
+export {
+  velin_popover_default as default
+};

package/dist/chunks/velin-popover-YKCCROJG.js

@@ -0,0 +1,145 @@
+import {
+  getFocusableElements,
+  restoreFocus,
+  saveFocus,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-popover.js
+var styles = `
+  :host { position: relative; display: inline-block; }
+  .popover {
+    position: absolute; z-index: var(--velin-z-dropdown, 200);
+    background: var(--velin-color-surface-bright, #fff);
+    border: 1px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-lg, 0.75rem);
+    box-shadow: var(--velin-shadow-lg, 0 10px 15px rgba(0,0,0,0.08));
+    padding: var(--velin-space-4, 1rem);
+    min-inline-size: 12rem; max-inline-size: 20rem;
+    opacity: 0; visibility: hidden;
+    transition: opacity 150ms ease, visibility 150ms ease;
+  }
+  :host([open]) .popover { opacity: 1; visibility: visible; }
+  .popover--top { inset-block-end: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); }
+  .popover--bottom { inset-block-start: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); }
+  .popover--start { inset-inline-end: calc(100% + 0.5rem); inset-block-start: 50%; transform: translateY(-50%); }
+  .popover--end { inset-inline-start: calc(100% + 0.5rem); inset-block-start: 50%; transform: translateY(-50%); }
+  .popover__title {
+    font-size: var(--velin-text-sm, 0.875rem); font-weight: var(--velin-weight-semibold, 600);
+    margin-block-end: var(--velin-space-2, 0.5rem);
+    padding-block-end: var(--velin-space-2, 0.5rem);
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  @media (prefers-reduced-motion: reduce) { .popover { transition: none; } }
+`;
+var popoverId = 0;
+var VelinPopover = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["open"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._popoverId = `velin-popover-${++popoverId}`;
+    this._onOutside = this._onOutside.bind(this);
+    this._onKey = this._onKey.bind(this);
+    this._prevFocus = null;
+    this._isDialog = false;
+  }
+  connectedCallback() {
+    const placement = this.getAttribute("placement") || "bottom";
+    const triggerType = this.getAttribute("trigger") || "click";
+    const title = this.getAttribute("title") || "";
+    const role = triggerType === "hover" ? "tooltip" : "dialog";
+    this._isDialog = role === "dialog";
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <slot name="trigger"></slot>
+      <div class="popover popover--${placement}" id="${this._popoverId}" role="${role}" part="popover">
+        ${title ? `<div class="popover__title" part="title">${escapeHTML(title)}</div>` : ""}
+        <slot></slot>
+      </div>
+    `;
+    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
+    triggerSlot.addEventListener("slotchange", () => this._wireTrigger(triggerType));
+    this._wireTrigger(triggerType);
+  }
+  _wireTrigger(triggerType) {
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (!trigger) return;
+    const isHover = triggerType === "hover";
+    trigger.setAttribute("aria-haspopup", isHover ? "true" : "dialog");
+    trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
+    if (this._isDialog) {
+      trigger.setAttribute("aria-controls", this._popoverId);
+    }
+    if (triggerType === "click") {
+      trigger.onclick = () => this.toggle();
+    } else if (triggerType === "hover") {
+      this.onmouseenter = () => this.open();
+      this.onmouseleave = () => this.close();
+      this.onfocusin = () => this.open();
+      this.onfocusout = (e) => {
+        if (!this.contains(e.relatedTarget)) this.close();
+      };
+    } else if (triggerType === "focus") {
+      trigger.onfocusin = () => this.open();
+      trigger.onfocusout = () => this.close();
+    }
+  }
+  open() {
+    this.setAttribute("open", "");
+    const trigger = this.querySelector('[slot="trigger"]');
+    if (trigger) trigger.setAttribute("aria-expanded", "true");
+    document.addEventListener("click", this._onOutside, true);
+    document.addEventListener("keydown", this._onKey);
+    if (this._isDialog) {
+      this._prevFocus = saveFocus();
+      requestAnimationFrame(() => {
+        const focusable = getFocusableElements(this.shadowRoot.querySelector(".popover"));
+        if (focusable.length) focusable[0].focus();
+        else this.shadowRoot.querySelector(".popover")?.focus();
+      });
+    }
+  }
+  close() {
+    this.removeAttribute("open");
+    const trigger = this.querySelector('[slot="trigger"]');
+    if (trigger) trigger.setAttribute("aria-expanded", "false");
+    document.removeEventListener("click", this._onOutside, true);
+    document.removeEventListener("keydown", this._onKey);
+    if (this._isDialog && this._prevFocus) {
+      restoreFocus(this._prevFocus);
+      this._prevFocus = null;
+    }
+  }
+  toggle() {
+    this.hasAttribute("open") ? this.close() : this.open();
+  }
+  _onOutside(e) {
+    if (!this.contains(e.target)) this.close();
+  }
+  _onKey(e) {
+    if (e.key === "Escape") {
+      this.close();
+      const trigger = this.querySelector('[slot="trigger"]');
+      if (trigger) trigger.focus();
+      return;
+    }
+    if (this._isDialog && this.hasAttribute("open")) {
+      trapFocus(this.shadowRoot.querySelector(".popover"), e);
+    }
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this._onOutside, true);
+    document.removeEventListener("keydown", this._onKey);
+  }
+};
+customElements.define("velin-popover", VelinPopover);
+var velin_popover_default = VelinPopover;
+export {
+  velin_popover_default as default
+};

package/dist/chunks/velin-progress-ring-E4YRLZHH.js

@@ -0,0 +1,66 @@
+// components/velin-progress-ring.js
+var styles = `
+  :host { display: inline-flex; align-items: center; justify-content: center; }
+  svg { transform: rotate(-90deg); }
+  .track { fill: none; stroke: var(--velin-color-border, #e5e5e5); }
+  .fill {
+    fill: none;
+    stroke: var(--velin-progress-ring-color, var(--velin-color-primary, #2563eb));
+    stroke-linecap: round;
+    transition: stroke-dashoffset 400ms ease;
+  }
+  .label {
+    position: absolute;
+    font-size: var(--velin-text-lg, 1.125rem);
+    font-weight: var(--velin-weight-semibold, 600);
+    color: var(--velin-color-text, #1a1a2e);
+  }
+  :host { position: relative; }
+  @media (prefers-reduced-motion: reduce) { .fill { transition: none; } }
+`;
+var VelinProgressRing = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["value", "size", "stroke", "color"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  _render() {
+    const value = Math.min(100, Math.max(0, parseInt(this.getAttribute("value") || "0", 10)));
+    const size = parseInt(this.getAttribute("size") || "120", 10);
+    const strokeWidth = parseInt(this.getAttribute("stroke") || "8", 10);
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - value / 100 * circumference;
+    const color = this.getAttribute("color");
+    const colorStyle = color ? `stroke: var(--velin-color-${color}, ${color});` : "";
+    const showLabel = this.getAttribute("label") !== "false";
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" part="svg" role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="100">
+        <circle class="track" cx="${size / 2}" cy="${size / 2}" r="${radius}" stroke-width="${strokeWidth}" />
+        <circle class="fill" cx="${size / 2}" cy="${size / 2}" r="${radius}" stroke-width="${strokeWidth}"
+          stroke-dasharray="${circumference}" stroke-dashoffset="${offset}"
+          style="${colorStyle}" part="fill" />
+      </svg>
+      ${showLabel ? `<span class="label" part="label">${value}%</span>` : ""}
+    `;
+    this.setAttribute("role", "progressbar");
+    this.setAttribute("aria-valuenow", value);
+    this.setAttribute("aria-valuemin", "0");
+    this.setAttribute("aria-valuemax", "100");
+    this.setAttribute("aria-label", this.getAttribute("aria-label") || `${value}%`);
+  }
+  attributeChangedCallback() {
+    this._render();
+  }
+};
+customElements.define("velin-progress-ring", VelinProgressRing);
+var velin_progress_ring_default = VelinProgressRing;
+export {
+  velin_progress_ring_default as default
+};

package/dist/chunks/velin-rating-6CDBI6DG.js

@@ -0,0 +1,91 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-rating.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: inline-block; }
+  .stars { display: inline-flex; gap: var(--velin-space-1, 0.25rem); }
+  button {
+    background: none; border: none; padding: var(--velin-space-1, 0.25rem);
+    font-size: 1.5rem; line-height: 1; cursor: pointer;
+    color: var(--velin-color-border, #ccc);
+  }
+  button[aria-checked="true"] { color: var(--velin-color-warning, #f59e0b); }
+`;
+var MAX = 5;
+var VelinRating = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["value"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._onClick = this._onClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `<style>${styles}</style><div class="stars" role="radiogroup"></div>`;
+    this._render();
+    this.shadowRoot.querySelector(".stars").addEventListener("click", this._onClick);
+    this.shadowRoot.querySelector(".stars").addEventListener("keydown", this._onKey);
+  }
+  _value() {
+    const v = parseInt(this.getAttribute("value") || "0", 10);
+    return Math.min(MAX, Math.max(0, Number.isNaN(v) ? 0 : v));
+  }
+  _render() {
+    const group = this.shadowRoot.querySelector(".stars");
+    const val = this._value();
+    const label = escapeHTML(this.getAttribute("aria-label") || "Rating");
+    group.setAttribute("aria-label", label);
+    group.innerHTML = "";
+    for (let i = 1; i <= MAX; i++) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.setAttribute("role", "radio");
+      btn.setAttribute("aria-checked", i <= val ? "true" : "false");
+      btn.setAttribute("aria-label", escapeHTML(`${i} star${i > 1 ? "s" : ""}`));
+      btn.setAttribute("tabindex", i === (val || 1) ? "0" : "-1");
+      btn.dataset.value = String(i);
+      btn.textContent = i <= val ? "\u2605" : "\u2606";
+      group.appendChild(btn);
+    }
+  }
+  _getButtons() {
+    return [...this.shadowRoot.querySelectorAll('button[role="radio"]')];
+  }
+  _onClick(e) {
+    const btn = e.target.closest("button");
+    if (!btn) return;
+    this._setValue(parseInt(btn.dataset.value, 10));
+  }
+  _onKey(e) {
+    const buttons = this._getButtons();
+    if (!buttons.includes(e.target)) return;
+    rovingTabindex(this, buttons, e);
+    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) {
+      const focused = buttons.find((b) => b.getAttribute("tabindex") === "0");
+      if (focused) this._setValue(parseInt(focused.dataset.value, 10));
+    }
+  }
+  _setValue(n) {
+    this.setAttribute("value", String(n));
+    this.dispatchEvent(new CustomEvent("velin-change", { bubbles: true, detail: { value: n } }));
+  }
+  attributeChangedCallback(name) {
+    if (name === "value" && this.shadowRoot?.querySelector(".stars")) this._render();
+  }
+};
+customElements.define("velin-rating", VelinRating);
+var velin_rating_default = VelinRating;
+export {
+  velin_rating_default as default
+};

package/dist/chunks/velin-rating-N4DI2XNL.js

@@ -0,0 +1,91 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-MKZP2TBH.js";
+
+// components/velin-rating.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: inline-block; }
+  .stars { display: inline-flex; gap: var(--velin-space-1, 0.25rem); }
+  button {
+    background: none; border: none; padding: var(--velin-space-1, 0.25rem);
+    font-size: 1.5rem; line-height: 1; cursor: pointer;
+    color: var(--velin-color-border, #ccc);
+  }
+  button[aria-checked="true"] { color: var(--velin-color-warning, #f59e0b); }
+`;
+var MAX = 5;
+var VelinRating = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["value"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._onClick = this._onClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `<style>${styles}</style><div class="stars" role="radiogroup"></div>`;
+    this._render();
+    this.shadowRoot.querySelector(".stars").addEventListener("click", this._onClick);
+    this.shadowRoot.querySelector(".stars").addEventListener("keydown", this._onKey);
+  }
+  _value() {
+    const v = parseInt(this.getAttribute("value") || "0", 10);
+    return Math.min(MAX, Math.max(0, Number.isNaN(v) ? 0 : v));
+  }
+  _render() {
+    const group = this.shadowRoot.querySelector(".stars");
+    const val = this._value();
+    const label = escapeHTML(this.getAttribute("aria-label") || "Rating");
+    group.setAttribute("aria-label", label);
+    group.innerHTML = "";
+    for (let i = 1; i <= MAX; i++) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.setAttribute("role", "radio");
+      btn.setAttribute("aria-checked", i <= val ? "true" : "false");
+      btn.setAttribute("aria-label", escapeHTML(`${i} star${i > 1 ? "s" : ""}`));
+      btn.setAttribute("tabindex", i === (val || 1) ? "0" : "-1");
+      btn.dataset.value = String(i);
+      btn.textContent = i <= val ? "\u2605" : "\u2606";
+      group.appendChild(btn);
+    }
+  }
+  _getButtons() {
+    return [...this.shadowRoot.querySelectorAll('button[role="radio"]')];
+  }
+  _onClick(e) {
+    const btn = e.target.closest("button");
+    if (!btn) return;
+    this._setValue(parseInt(btn.dataset.value, 10));
+  }
+  _onKey(e) {
+    const buttons = this._getButtons();
+    if (!buttons.includes(e.target)) return;
+    rovingTabindex(this, buttons, e);
+    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) {
+      const focused = buttons.find((b) => b.getAttribute("tabindex") === "0");
+      if (focused) this._setValue(parseInt(focused.dataset.value, 10));
+    }
+  }
+  _setValue(n) {
+    this.setAttribute("value", String(n));
+    this.dispatchEvent(new CustomEvent("velin-change", { bubbles: true, detail: { value: n } }));
+  }
+  attributeChangedCallback(name) {
+    if (name === "value" && this.shadowRoot?.querySelector(".stars")) this._render();
+  }
+};
+customElements.define("velin-rating", VelinRating);
+var velin_rating_default = VelinRating;
+export {
+  velin_rating_default as default
+};

package/dist/chunks/velin-rating-XRQJV4LO.js

@@ -0,0 +1,91 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  rovingTabindex
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-LA7264K4.js";
+
+// components/velin-rating.js
+var styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: inline-block; }
+  .stars { display: inline-flex; gap: var(--velin-space-1, 0.25rem); }
+  button {
+    background: none; border: none; padding: var(--velin-space-1, 0.25rem);
+    font-size: 1.5rem; line-height: 1; cursor: pointer;
+    color: var(--velin-color-border, #ccc);
+  }
+  button[aria-checked="true"] { color: var(--velin-color-warning, #f59e0b); }
+`;
+var MAX = 5;
+var VelinRating = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["value"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open", delegatesFocus: true });
+    this._onClick = this._onClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `<style>${styles}</style><div class="stars" role="radiogroup"></div>`;
+    this._render();
+    this.shadowRoot.querySelector(".stars").addEventListener("click", this._onClick);
+    this.shadowRoot.querySelector(".stars").addEventListener("keydown", this._onKey);
+  }
+  _value() {
+    const v = parseInt(this.getAttribute("value") || "0", 10);
+    return Math.min(MAX, Math.max(0, Number.isNaN(v) ? 0 : v));
+  }
+  _render() {
+    const group = this.shadowRoot.querySelector(".stars");
+    const val = this._value();
+    const label = escapeHTML(this.getAttribute("aria-label") || "Rating");
+    group.setAttribute("aria-label", label);
+    group.innerHTML = "";
+    for (let i = 1; i <= MAX; i++) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.setAttribute("role", "radio");
+      btn.setAttribute("aria-checked", i <= val ? "true" : "false");
+      btn.setAttribute("aria-label", escapeHTML(`${i} star${i > 1 ? "s" : ""}`));
+      btn.setAttribute("tabindex", i === (val || 1) ? "0" : "-1");
+      btn.dataset.value = String(i);
+      btn.textContent = i <= val ? "\u2605" : "\u2606";
+      group.appendChild(btn);
+    }
+  }
+  _getButtons() {
+    return [...this.shadowRoot.querySelectorAll('button[role="radio"]')];
+  }
+  _onClick(e) {
+    const btn = e.target.closest("button");
+    if (!btn) return;
+    this._setValue(parseInt(btn.dataset.value, 10));
+  }
+  _onKey(e) {
+    const buttons = this._getButtons();
+    if (!buttons.includes(e.target)) return;
+    rovingTabindex(this, buttons, e);
+    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) {
+      const focused = buttons.find((b) => b.getAttribute("tabindex") === "0");
+      if (focused) this._setValue(parseInt(focused.dataset.value, 10));
+    }
+  }
+  _setValue(n) {
+    this.setAttribute("value", String(n));
+    this.dispatchEvent(new CustomEvent("velin-change", { bubbles: true, detail: { value: n } }));
+  }
+  attributeChangedCallback(name) {
+    if (name === "value" && this.shadowRoot?.querySelector(".stars")) this._render();
+  }
+};
+customElements.define("velin-rating", VelinRating);
+var velin_rating_default = VelinRating;
+export {
+  velin_rating_default as default
+};