@birdapi/velinstyle 1.0.0 → 1.2.0

package/dist/chunks/velin-stepper-FYEUEWE6.js

@@ -1,141 +0,0 @@
-import {
-  escapeHTML
-} from "./chunk-MKZP2TBH.js";
-
-// components/velin-stepper.js
-var styles = `
-  :host { display: block; }
-  .steps {
-    display: flex; gap: var(--velin-space-2, 0.5rem);
-    counter-reset: step;
-    margin-block-end: var(--velin-space-6, 1.5rem);
-  }
-  .step {
-    flex: 1; text-align: center; position: relative;
-    counter-increment: step;
-  }
-  .step__marker {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 2.5rem; height: 2.5rem; border-radius: 50%;
-    border: 2px solid var(--velin-color-border, #ddd);
-    background: var(--velin-color-surface-bright, #fff);
-    color: var(--velin-color-text-muted, #888);
-    font-weight: 600; font-size: 0.875rem;
-    transition: all 200ms ease;
-  }
-  .step.active .step__marker {
-    border-color: var(--velin-color-primary, #2563eb);
-    background: var(--velin-color-primary, #2563eb);
-    color: #fff;
-  }
-  .step.completed .step__marker {
-    border-color: var(--velin-color-success, #16a34a);
-    background: var(--velin-color-success, #16a34a);
-    color: #fff;
-  }
-  .step__label {
-    display: block; margin-top: 0.5rem;
-    font-size: var(--velin-text-sm, 0.875rem);
-    color: var(--velin-color-text-muted, #888);
-  }
-  .step.active .step__label { color: var(--velin-color-primary, #2563eb); font-weight: 600; }
-  .step.completed .step__label { color: var(--velin-color-success, #16a34a); }
-  .step + .step::before {
-    content: ""; position: absolute;
-    top: 1.25rem; right: 50%; width: 100%;
-    height: 2px; background: var(--velin-color-border, #ddd);
-    z-index: -1;
-  }
-  .step.completed + .step::before,
-  .step.active + .step::before { background: var(--velin-color-success, #16a34a); }
-  .step.completed + .step.active::before { background: var(--velin-color-primary, #2563eb); }
-  .panels ::slotted(*) { display: none; }
-  .panels ::slotted([data-active]) { display: block; }
-  @media (prefers-reduced-motion: reduce) { .step__marker { transition: none; } }
-`;
-var VelinStepper = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["active"];
-  }
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this._current = 0;
-  }
-  connectedCallback() {
-    this._current = parseInt(this.getAttribute("active") || "0", 10);
-    this._buildSteps();
-  }
-  _buildSteps() {
-    const labels = (this.getAttribute("labels") || "").split(",").map((s) => s.trim());
-    const stepsHTML = labels.map((label, i) => {
-      const state = i < this._current ? "completed" : i === this._current ? "active" : "";
-      const marker = i < this._current ? "&#10003;" : i + 1;
-      const ariaCurrent = i === this._current ? ' aria-current="step"' : "";
-      return `<div class="step ${state}" role="listitem"${ariaCurrent}><span class="step__marker" aria-hidden="true">${marker}</span><span class="step__label">${escapeHTML(label)}</span></div>`;
-    }).join("");
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <div class="steps" role="list" aria-label="Progress" part="steps">${stepsHTML}</div>
-      <div class="panels" part="panels"><slot></slot></div>
-    `;
-  }
-  _updatePanels() {
-    const panels = this.shadowRoot.querySelector("slot")?.assignedElements() || [];
-    panels.forEach((p, i) => {
-      if (i === this._current) p.setAttribute("data-active", "");
-      else p.removeAttribute("data-active");
-    });
-  }
-  next() {
-    const labels = (this.getAttribute("labels") || "").split(",");
-    if (this._current < labels.length - 1) {
-      this._current++;
-      this.setAttribute("active", this._current);
-      this._buildSteps();
-      this.dispatchEvent(new CustomEvent("velin-step-change", { bubbles: true, detail: { step: this._current } }));
-    }
-  }
-  prev() {
-    if (this._current > 0) {
-      this._current--;
-      this.setAttribute("active", this._current);
-      this._buildSteps();
-      this.dispatchEvent(new CustomEvent("velin-step-change", { bubbles: true, detail: { step: this._current } }));
-    }
-  }
-  goTo(step) {
-    this._current = step;
-    this.setAttribute("active", this._current);
-    this._buildSteps();
-    this.dispatchEvent(new CustomEvent("velin-step-change", { bubbles: true, detail: { step: this._current } }));
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (name === "active" && oldVal !== null && oldVal !== newVal) {
-      this._current = parseInt(newVal, 10);
-      this._buildSteps();
-    }
-  }
-};
-var VelinStepperWC = class _VelinStepperWC extends VelinStepper {
-  static _warned = false;
-  connectedCallback() {
-    if (!_VelinStepperWC._warned && typeof console !== "undefined" && console.warn) {
-      _VelinStepperWC._warned = true;
-      console.warn("[velinstyle] <velin-stepper-wc> is deprecated; use <velin-stepper> instead.");
-    }
-    super.connectedCallback();
-  }
-};
-if (!customElements.get("velin-stepper")) {
-  customElements.define("velin-stepper", VelinStepper);
-}
-if (!customElements.get("velin-stepper-wc")) {
-  customElements.define("velin-stepper-wc", VelinStepperWC);
-}
-var velin_stepper_default = VelinStepper;
-export {
-  VelinStepper,
-  VelinStepperWC,
-  velin_stepper_default as default
-};

package/dist/chunks/velin-stepper-wc-QU3KRVQR.js

@@ -1,133 +0,0 @@
-import {
-  escapeHTML
-} from "./chunk-LA7264K4.js";
-
-// components/velin-stepper-wc.js
-var styles = `
-  :host { display: block; }
-  .steps {
-    display: flex; gap: var(--velin-space-2, 0.5rem);
-    counter-reset: step;
-    margin-block-end: var(--velin-space-6, 1.5rem);
-  }
-  .step {
-    flex: 1; text-align: center; position: relative;
-    counter-increment: step;
-  }
-  .step__marker {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 2.5rem; height: 2.5rem; border-radius: 50%;
-    border: 2px solid var(--velin-color-border, #ddd);
-    background: var(--velin-color-surface-bright, #fff);
-    color: var(--velin-color-text-muted, #888);
-    font-weight: 600; font-size: 0.875rem;
-    transition: all 200ms ease;
-  }
-  .step.active .step__marker {
-    border-color: var(--velin-color-primary, #2563eb);
-    background: var(--velin-color-primary, #2563eb);
-    color: #fff;
-  }
-  .step.completed .step__marker {
-    border-color: var(--velin-color-success, #16a34a);
-    background: var(--velin-color-success, #16a34a);
-    color: #fff;
-  }
-  .step__label {
-    display: block; margin-top: 0.5rem;
-    font-size: var(--velin-text-sm, 0.875rem);
-    color: var(--velin-color-text-muted, #888);
-  }
-  .step.active .step__label { color: var(--velin-color-primary, #2563eb); font-weight: 600; }
-  .step.completed .step__label { color: var(--velin-color-success, #16a34a); }
-  .step + .step::before {
-    content: ""; position: absolute;
-    top: 1.25rem; right: 50%; width: 100%;
-    height: 2px; background: var(--velin-color-border, #ddd);
-    z-index: -1;
-  }
-  .step.completed + .step::before,
-  .step.active + .step::before { background: var(--velin-color-success, #16a34a); }
-  .step.completed + .step.active::before { background: var(--velin-color-primary, #2563eb); }
-  .panels ::slotted(*) { display: none; }
-  .panels ::slotted([data-active]) { display: block; }
-  @media (prefers-reduced-motion: reduce) { .step__marker { transition: none; } }
-`;
-var VelinStepperWC = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["active"];
-  }
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this._current = 0;
-  }
-  connectedCallback() {
-    this._current = parseInt(this.getAttribute("active") || "0", 10);
-    this._buildSteps();
-  }
-  _buildSteps() {
-    const labels = (this.getAttribute("labels") || "").split(",").map((s) => s.trim());
-    const stepsHTML = labels.map((label, i) => {
-      const state = i < this._current ? "completed" : i === this._current ? "active" : "";
-      const marker = i < this._current ? "&#10003;" : i + 1;
-      const ariaCurrent = i === this._current ? ' aria-current="step"' : "";
-      return `<div class="step ${state}" role="listitem"${ariaCurrent}><span class="step__marker" aria-hidden="true">${marker}</span><span class="step__label">${escapeHTML(label)}</span></div>`;
-    }).join("");
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <div class="steps" role="list" aria-label="Progress" part="steps">${stepsHTML}</div>
-      <div class="panels" part="panels"><slot></slot></div>
-    `;
-    this._updatePanels();
-  }
-  _updatePanels() {
-    const panels = this.shadowRoot.querySelector("slot")?.assignedElements() || [];
-    panels.forEach((p, i) => {
-      if (i === this._current) p.setAttribute("data-active", "");
-      else p.removeAttribute("data-active");
-    });
-  }
-  next() {
-    const labels = (this.getAttribute("labels") || "").split(",");
-    if (this._current < labels.length - 1) {
-      this._current++;
-      this.setAttribute("active", this._current);
-      this._buildSteps();
-      this.dispatchEvent(new CustomEvent("velin-step-change", { bubbles: true, detail: { step: this._current } }));
-    }
-  }
-  prev() {
-    if (this._current > 0) {
-      this._current--;
-      this.setAttribute("active", this._current);
-      this._buildSteps();
-      this.dispatchEvent(new CustomEvent("velin-step-change", { bubbles: true, detail: { step: this._current } }));
-    }
-  }
-  goTo(step) {
-    this._current = step;
-    this.setAttribute("active", this._current);
-    this._buildSteps();
-    this.dispatchEvent(new CustomEvent("velin-step-change", { bubbles: true, detail: { step: this._current } }));
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (name === "active" && oldVal !== null && oldVal !== newVal) {
-      this._current = parseInt(newVal, 10);
-      this._buildSteps();
-    }
-  }
-};
-var VelinStepper = class extends VelinStepperWC {
-};
-if (!customElements.get("velin-stepper-wc")) {
-  customElements.define("velin-stepper-wc", VelinStepperWC);
-}
-if (!customElements.get("velin-stepper")) {
-  customElements.define("velin-stepper", VelinStepper);
-}
-var velin_stepper_wc_default = VelinStepperWC;
-export {
-  VelinStepper,
-  velin_stepper_wc_default as default
-};

package/dist/chunks/velin-theme-toggle-BNNS7WLV.js

@@ -1,285 +0,0 @@
-// components/velin-theme-toggle.js
-var THEMES = [
-  { slug: "", label: "Default (Light)" },
-  { slug: "dark", label: "Dark" },
-  { slug: "brutalist", label: "Brutalist" },
-  { slug: "corporate", label: "Corporate" },
-  { slug: "earth", label: "Earth" },
-  { slug: "forest", label: "Forest" },
-  { slug: "midnight", label: "Midnight" },
-  { slug: "neon", label: "Neon" },
-  { slug: "nordic", label: "Nordic" },
-  { slug: "ocean", label: "Ocean" },
-  { slug: "pastel", label: "Pastel" },
-  { slug: "retro", label: "Retro" },
-  { slug: "sharp", label: "Sharp" },
-  { slug: "soft", label: "Soft" },
-  { slug: "sunset", label: "Sunset" }
-];
-var BUILTIN_THEMES = /* @__PURE__ */ new Set(["", "dark"]);
-var loadedThemeStylesheets = /* @__PURE__ */ new Set();
-function ensureThemeStylesheet(slug, base) {
-  if (!slug || BUILTIN_THEMES.has(slug)) return;
-  if (loadedThemeStylesheets.has(slug)) return;
-  const existing = document.querySelector(`link[data-velin-theme-css="${slug}"]`);
-  if (existing) {
-    loadedThemeStylesheets.add(slug);
-    return;
-  }
-  const link = document.createElement("link");
-  link.rel = "stylesheet";
-  link.href = `${base.replace(/\/$/, "")}/${slug}.min.css`;
-  link.setAttribute("data-velin-theme-css", slug);
-  document.head.appendChild(link);
-  loadedThemeStylesheets.add(slug);
-}
-var styles = `
-  :host { display: inline-flex; position: relative; }
-  .group {
-    display: inline-flex; align-items: stretch;
-    border: 2px solid var(--velin-color-border, #ddd);
-    border-radius: var(--velin-radius-md, 0.5rem);
-    background: none;
-    overflow: hidden;
-  }
-  button {
-    display: inline-flex; align-items: center; justify-content: center;
-    min-height: 2.75rem; padding: 0.5rem;
-    background: none; border: 0; cursor: pointer;
-    color: var(--velin-color-text, #111);
-    transition: background 150ms ease;
-  }
-  button:hover { background: var(--velin-color-surface-dim, #eee); }
-  button:focus-visible {
-    outline: 3px solid var(--velin-color-focus, #2563eb);
-    outline-offset: 2px;
-  }
-  .toggle { min-width: 2.75rem; }
-  .picker {
-    min-width: 1.75rem;
-    border-inline-start: 1px solid var(--velin-color-border, #ddd);
-    color: var(--velin-color-text-muted, #555);
-  }
-  svg { width: 1.25rem; height: 1.25rem; transition: transform 300ms ease; }
-  .chev { width: 0.75rem; height: 0.75rem; }
-  :host([theme="dark"]) .sun { display: none; }
-  :host(:not([theme="dark"])) .moon { display: none; }
-  :host([compact]) .picker { display: none; }
-  :host([compact]) .toggle { border-inline-end: 0; }
-  @media (prefers-reduced-motion: reduce) { svg { transition: none; } }
-
-  .menu {
-    position: absolute;
-    top: calc(100% + 0.5rem);
-    inset-inline-end: 0;
-    z-index: 1000;
-    min-width: 12rem;
-    padding: 0.375rem;
-    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 12px 32px rgba(0,0,0,0.12));
-    list-style: none;
-    margin: 0;
-    display: none;
-    max-height: min(70vh, 24rem);
-    overflow-y: auto;
-  }
-  :host([menu-open]) .menu { display: block; }
-  .menu li { margin: 0; }
-  .menu button {
-    width: 100%;
-    justify-content: flex-start;
-    padding: 0.4rem 0.75rem;
-    font-size: 0.875rem;
-    color: var(--velin-color-text, #111);
-    border-radius: var(--velin-radius-sm, 0.25rem);
-    min-height: 2rem;
-    text-align: start;
-  }
-  .menu button:hover,
-  .menu button[aria-current="true"] {
-    background: var(--velin-color-primary-subtle, #eef);
-    color: var(--velin-color-primary, #2a4cf0);
-  }
-  .menu button[aria-current="true"] {
-    font-weight: 600;
-  }
-  .menu .swatch {
-    width: 0.75rem; height: 0.75rem;
-    border-radius: 50%;
-    margin-inline-end: 0.5rem;
-    background: currentColor;
-    border: 1px solid var(--velin-color-border, #ddd);
-  }
-`;
-var VelinThemeToggle = class extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this._onDocClick = this._onDocClick.bind(this);
-    this._onKeyDown = this._onKeyDown.bind(this);
-  }
-  connectedCallback() {
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <div class="group" part="group">
-        <button class="toggle" part="button" aria-label="Toggle dark mode">
-          <svg class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false">
-            <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
-            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-            <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
-            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-          </svg>
-          <svg class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false">
-            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
-          </svg>
-        </button>
-        <button class="picker" part="picker" aria-label="Choose theme" aria-haspopup="menu" aria-expanded="false">
-          <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
-            <polyline points="6 9 12 15 18 9"/>
-          </svg>
-        </button>
-      </div>
-      <ul class="menu" role="menu" hidden></ul>
-    `;
-    this._target = document.querySelector(this.getAttribute("target") || "html");
-    this._themesBase = this.getAttribute("themes-base") || "dist/themes";
-    this._menu = this.shadowRoot.querySelector(".menu");
-    this._toggleBtn = this.shadowRoot.querySelector(".toggle");
-    this._pickerBtn = this.shadowRoot.querySelector(".picker");
-    this._renderMenu();
-    this._initPreference();
-    this._toggleBtn.addEventListener("click", () => this._toggleDarkMode());
-    this._pickerBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      this._toggleMenu();
-    });
-    document.addEventListener("click", this._onDocClick);
-    this.shadowRoot.addEventListener("keydown", this._onKeyDown);
-    const prefersDarkMq = window.matchMedia("(prefers-color-scheme: dark)");
-    prefersDarkMq.addEventListener("change", () => this._applyFromPreference());
-    window.addEventListener("storage", (e) => {
-      if (e.key === "velin-theme") this._readStorage();
-    });
-  }
-  disconnectedCallback() {
-    document.removeEventListener("click", this._onDocClick);
-  }
-  _renderMenu() {
-    this._menu.innerHTML = THEMES.map((t) => `
-      <li role="none">
-        <button type="button" role="menuitem" data-theme="${t.slug}">
-          <span class="swatch" aria-hidden="true" data-theme-swatch="${t.slug}"></span>
-          ${t.label}
-        </button>
-      </li>
-    `).join("");
-    this._menu.removeAttribute("hidden");
-    this._menu.querySelectorAll("button[data-theme]").forEach((btn) => {
-      btn.addEventListener("click", () => {
-        const slug = btn.getAttribute("data-theme");
-        this._applyTheme(slug, { persist: true });
-        this._closeMenu();
-      });
-    });
-  }
-  _toggleMenu() {
-    if (this.hasAttribute("menu-open")) this._closeMenu();
-    else this._openMenu();
-  }
-  _openMenu() {
-    this.setAttribute("menu-open", "");
-    this._pickerBtn.setAttribute("aria-expanded", "true");
-    this._highlightActive();
-    const first = this._menu.querySelector("button[data-theme]");
-    if (first) first.focus();
-  }
-  _closeMenu() {
-    this.removeAttribute("menu-open");
-    this._pickerBtn.setAttribute("aria-expanded", "false");
-  }
-  _onDocClick(e) {
-    if (!this.hasAttribute("menu-open")) return;
-    if (e.composedPath().includes(this)) return;
-    this._closeMenu();
-  }
-  _onKeyDown(e) {
-    if (!this.hasAttribute("menu-open")) return;
-    if (e.key === "Escape") {
-      e.preventDefault();
-      this._closeMenu();
-      this._pickerBtn.focus();
-      return;
-    }
-    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-      e.preventDefault();
-      const items = Array.from(this._menu.querySelectorAll("button[data-theme]"));
-      const idx = items.indexOf(this.shadowRoot.activeElement);
-      const next = e.key === "ArrowDown" ? items[(idx + 1) % items.length] : items[(idx - 1 + items.length) % items.length];
-      next?.focus();
-    }
-  }
-  _highlightActive() {
-    const current = this._currentSlug();
-    this._menu.querySelectorAll("button[data-theme]").forEach((btn) => {
-      const slug = btn.getAttribute("data-theme");
-      if (slug === current) btn.setAttribute("aria-current", "true");
-      else btn.removeAttribute("aria-current");
-    });
-  }
-  _currentSlug() {
-    if (!this._target) return "";
-    const value = this._target.getAttribute("data-velin-theme");
-    if (!value || value === "light") return "";
-    return value;
-  }
-  _initPreference() {
-    const stored = localStorage.getItem("velin-theme");
-    if (stored) {
-      this._applyTheme(stored, { persist: false });
-      return;
-    }
-    this._applyFromPreference();
-  }
-  _readStorage() {
-    const stored = localStorage.getItem("velin-theme");
-    this._applyTheme(stored || "", { persist: false });
-  }
-  _applyFromPreference() {
-    if (localStorage.getItem("velin-theme")) return;
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    this._applyTheme(prefersDark ? "dark" : "", { persist: false });
-  }
-  _applyTheme(slug, { persist }) {
-    const normalized = !slug || slug === "light" ? "" : slug;
-    if (!this._target) return;
-    if (!normalized) {
-      this._target.removeAttribute("data-velin-theme");
-      this.removeAttribute("theme");
-    } else {
-      this._target.setAttribute("data-velin-theme", normalized);
-      this.setAttribute("theme", normalized === "dark" ? "dark" : normalized);
-      ensureThemeStylesheet(normalized, this._themesBase);
-    }
-    if (persist) {
-      if (!normalized) localStorage.removeItem("velin-theme");
-      else localStorage.setItem("velin-theme", normalized);
-    }
-    this._highlightActive();
-    this.dispatchEvent(new CustomEvent("velin-theme-change", {
-      bubbles: true,
-      detail: { theme: normalized || "light", dark: normalized === "dark", slug: normalized }
-    }));
-  }
-  _toggleDarkMode() {
-    const current = this._currentSlug();
-    const next = current === "dark" ? "" : "dark";
-    this._applyTheme(next, { persist: true });
-  }
-};
-customElements.define("velin-theme-toggle", VelinThemeToggle);
-var velin_theme_toggle_default = VelinThemeToggle;
-export {
-  velin_theme_toggle_default as default
-};