@birdapi/velinstyle 0.7.0 → 0.9.0

package/dist/chunks/velin-stepper-2ZIHLKGM.js

@@ -0,0 +1,141 @@
+import {
+  escapeHTML
+} from "./chunk-LA7264K4.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-7ECRUYHD.js

@@ -0,0 +1,148 @@
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.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; } }
+  .velin-sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+  }
+`;
+var VelinStepper = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["active", "aria-label", "labels"];
+  }
+  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 listLabel = this.getAttribute("aria-label") || "Progress";
+    const stepsHTML = labels.map((label, i) => {
+      const state = i < this._current ? "completed" : i === this._current ? "active" : "";
+      const status = i < this._current ? "completed" : i === this._current ? "current step" : "upcoming";
+      const marker = i < this._current ? '<span class="velin-sr-only">Completed</span><span aria-hidden="true">&#10003;</span>' : `<span aria-hidden="true">${i + 1}</span>`;
+      const ariaCurrent = i === this._current ? ' aria-current="step"' : "";
+      const itemLabel = label ? `${label}, ${status}` : `Step ${i + 1}, ${status}`;
+      return `<div class="step ${state}" role="listitem" aria-label="${escapeHTML(itemLabel)}"${ariaCurrent}><span class="step__marker">${marker}</span><span class="step__label">${escapeHTML(label)}</span></div>`;
+    }).join("");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="steps" role="list" aria-label="${escapeHTML(listLabel)}" 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-FYEUEWE6.js

@@ -0,0 +1,141 @@
+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-X54WGHDG.js

@@ -0,0 +1,141 @@
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.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
+};