sp-component 0.0.1

package/dist/components/spinner/sp-spinner.js

@@ -0,0 +1,30 @@
+import { unsafeCSS as f, LitElement as a } from "lit";
+import { property as m, customElement as u } from "lit/decorators.js";
+import c from "./sp-spinner.css.js";
+import { spinnerTemplate as y } from "./sp-spinner.template.js";
+var v = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (i, t, s, p) => {
+  for (var e = p > 1 ? void 0 : p ? S(t, s) : t, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (e = (p ? n(t, s, e) : n(e)) || e);
+  return p && e && v(t, s, e), e;
+};
+let r = class extends a {
+  constructor() {
+    super(...arguments), this.size = "md", this.label = "Loading...";
+  }
+  render() {
+    return y.call(this);
+  }
+};
+r.styles = f(c);
+l([
+  m({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+l([
+  m({ type: String })
+], r.prototype, "label", 2);
+r = l([
+  u("sp-spinner")
+], r);
+export {
+  r as SpSpinnerComponent
+};

package/dist/components/spinner/sp-spinner.template.d.ts

@@ -0,0 +1,9 @@
+import { TemplateResult } from 'lit';
+import { SpSpinnerComponent } from './sp-spinner.js';
+/**
+ * HTML template for sp-spinner.
+ *
+ * Call as: spinnerTemplate.call(this) inside render()
+ */
+export declare function spinnerTemplate(this: SpSpinnerComponent): TemplateResult;
+//# sourceMappingURL=sp-spinner.template.d.ts.map

package/dist/components/spinner/sp-spinner.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-spinner.template.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/sp-spinner.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,kBAAkB,GAAG,cAAc,CAkBxE"}

package/dist/components/spinner/sp-spinner.template.js

@@ -0,0 +1,23 @@
+import { html as s } from "lit";
+function e() {
+  return s`
+    <div class="sp-spinner" role="status" aria-label=${this.label}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-dasharray="31.416"
+          stroke-dashoffset="10"
+        />
+      </svg>
+      <span class="sp-sr-only">${this.label}</span>
+    </div>
+  `;
+}
+export {
+  e as spinnerTemplate
+};

package/dist/components/spinner/sp-spinner.types.d.ts

@@ -0,0 +1,6 @@
+export type SpSpinnerSize = "sm" | "md" | "lg" | "xl";
+export interface SpSpinnerProps {
+    size: SpSpinnerSize;
+    label: string;
+}
+//# sourceMappingURL=sp-spinner.types.d.ts.map

package/dist/components/spinner/sp-spinner.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-spinner.types.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/sp-spinner.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/components/split-panel/index.d.ts

@@ -0,0 +1,3 @@
+export { SpSplitPanelComponent } from './sp-split-panel.js';
+export type { SpSplitPanelProps, SpSplitPanelOrientation } from './sp-split-panel.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/split-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/split-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/split-panel/sp-split-panel.css.js

@@ -0,0 +1,4 @@
+const e = ":host{display:block;width:100%;height:100%}.sp-split-panel{display:grid;width:100%;height:100%}.sp-split-panel--horizontal{grid-template-columns:var(--position, 50%) 4px 1fr;grid-template-rows:1fr}.sp-split-panel--vertical{grid-template-columns:1fr;grid-template-rows:var(--position, 50%) 4px 1fr}.sp-split-panel-start,.sp-split-panel-end{overflow:hidden;min-width:0;min-height:0}.sp-split-panel-divider{display:flex;align-items:center;justify-content:center;background:var(--sp-border-subtle, #e5e7eb);transition:background .15s;-webkit-user-select:none;user-select:none;outline:none;flex-shrink:0}.sp-split-panel--horizontal .sp-split-panel-divider{cursor:col-resize;width:4px;height:100%}.sp-split-panel--vertical .sp-split-panel-divider{cursor:row-resize;width:100%;height:4px}.sp-split-panel-divider:hover,.sp-split-panel--dragging .sp-split-panel-divider{background:#93c5fd}.sp-split-panel-divider:focus-visible{outline:2px solid var(--sp-primary-hover, #2563eb);outline-offset:0}.sp-split-panel-handle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--sp-bg, #ffffff);border:1px solid var(--sp-border, #d1d5db);border-radius:4px;box-shadow:0 1px 3px #0000001a;flex-shrink:0}.sp-split-panel-handle svg{width:10px;height:10px;color:var(--sp-text-placeholder, #9ca3af)}.sp-split-panel--horizontal .sp-split-panel-handle{flex-direction:column}:host([disabled]) .sp-split-panel-divider{cursor:default;pointer-events:none;opacity:.5}";
+export {
+  e as default
+};

package/dist/components/split-panel/sp-split-panel.d.ts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+import { SpSplitPanelOrientation } from './sp-split-panel.types.js';
+/**
+ * Split panel component with draggable divider.
+ *
+ * @element sp-split-panel
+ *
+ * @prop {number}                  position    - Position of divider as percentage (0-100)
+ * @prop {SpSplitPanelOrientation} orientation - "horizontal" (side by side) or "vertical" (stacked)
+ * @prop {number}                  min         - Minimum percentage for either panel
+ * @prop {number}                  max         - Maximum percentage for first panel
+ * @prop {number}                  snap        - Snap to this position when close (0 = no snap)
+ * @prop {boolean}                 disabled    - Disable dragging
+ * @prop {string}                  storageKey  - When set, save/restore position from localStorage
+ *
+ * @fires {CustomEvent<{position:number}>} sp-resize     - Emitted during drag
+ * @fires {CustomEvent<{position:number}>} sp-resize-end - Emitted when drag ends
+ *
+ * @slot start   - First panel content
+ * @slot end     - Second panel content
+ * @slot divider - Custom divider handle
+ */
+export declare class SpSplitPanelComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    position: number;
+    orientation: SpSplitPanelOrientation;
+    min: number;
+    max: number;
+    snap: number;
+    disabled: boolean;
+    storageKey: string;
+    _dragging: boolean;
+    _isMobile: boolean;
+    _currentPosition: number;
+    private _dragStartPos;
+    private _dragStartPosition;
+    private _mobileQuery;
+    private _mobileListener;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
+    _startDrag: (e: MouseEvent) => void;
+    private _onMouseMove;
+    private _onMouseUp;
+    _startTouchDrag: (e: TouchEvent) => void;
+    private _onTouchMove;
+    private _onTouchEnd;
+    _handleDividerDblClick: () => void;
+    private _updatePosition;
+    _handleDividerKeydown: (e: KeyboardEvent) => void;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-split-panel": SpSplitPanelComponent;
+    }
+}
+//# sourceMappingURL=sp-split-panel.d.ts.map

package/dist/components/split-panel/sp-split-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-split-panel.d.ts","sourceRoot":"","sources":["../../../src/components/split-panel/sp-split-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAAqB;IAG3C,QAAQ,SAAM;IAGd,WAAW,EAAE,uBAAuB,CAAgB;IAGpD,GAAG,SAAM;IAGT,GAAG,SAAM;IAGT,IAAI,SAAK;IAGT,QAAQ,UAAS;IAGjB,UAAU,SAAM;IAGhB,SAAS,UAAS;IAGlB,SAAS,UAAS;IAGlB,gBAAgB,SAAM;IAEtB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,YAAY,CAA+B;IACnD,OAAO,CAAC,eAAe,CAAmD;IAEjE,iBAAiB;IA0BjB,oBAAoB;IAOpB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMjD,UAAU,GAAI,GAAG,UAAU,KAAG,IAAI,CAShC;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,UAAU,CAehB;IAEF,eAAe,GAAI,GAAG,UAAU,KAAG,IAAI,CAWrC;IAEF,OAAO,CAAC,YAAY,CAOlB;IAEF,OAAO,CAAC,WAAW,CAejB;IAEF,sBAAsB,QAAO,IAAI,CAqB/B;IAEF,OAAO,CAAC,eAAe;IA6BvB,qBAAqB,GAAI,GAAG,aAAa,KAAG,IAAI,CAqC9C;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,qBAAqB,CAAC;KACzC;CACF"}

package/dist/components/split-panel/sp-split-panel.js

@@ -0,0 +1,148 @@
+import { unsafeCSS as p, LitElement as c } from "lit";
+import { property as h, state as u, customElement as d } from "lit/decorators.js";
+import _ from "./sp-split-panel.css.js";
+import { splitPanelTemplate as m } from "./sp-split-panel.template.js";
+var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (t, e, s, a) => {
+  for (var n = a > 1 ? void 0 : a ? f(e, s) : e, r = t.length - 1, l; r >= 0; r--)
+    (l = t[r]) && (n = (a ? l(e, s, n) : l(n)) || n);
+  return a && n && g(e, s, n), n;
+};
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.position = 50, this.orientation = "horizontal", this.min = 10, this.max = 90, this.snap = 0, this.disabled = !1, this.storageKey = "", this._dragging = !1, this._isMobile = !1, this._currentPosition = 50, this._dragStartPos = 0, this._dragStartPosition = 0, this._mobileQuery = null, this._mobileListener = null, this._startDrag = (t) => {
+      this.disabled || (t.preventDefault(), this._dragging = !0, this._dragStartPos = this.orientation === "horizontal" ? t.clientX : t.clientY, this._dragStartPosition = this._currentPosition, window.addEventListener("mousemove", this._onMouseMove), window.addEventListener("mouseup", this._onMouseUp));
+    }, this._onMouseMove = (t) => {
+      const e = this.orientation === "horizontal" ? t.clientX : t.clientY;
+      this._updatePosition(e);
+    }, this._onMouseUp = () => {
+      this._dragging = !1, window.removeEventListener("mousemove", this._onMouseMove), window.removeEventListener("mouseup", this._onMouseUp), this.position = this._currentPosition, this.storageKey && localStorage.setItem(this.storageKey, String(this._currentPosition)), this.dispatchEvent(
+        new CustomEvent("sp-resize-end", {
+          detail: { position: this._currentPosition },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._startTouchDrag = (t) => {
+      if (this.disabled) return;
+      t.preventDefault(), this._dragging = !0;
+      const e = t.touches[0];
+      e && (this._dragStartPos = this.orientation === "horizontal" ? e.clientX : e.clientY, this._dragStartPosition = this._currentPosition, window.addEventListener("touchmove", this._onTouchMove, { passive: !1 }), window.addEventListener("touchend", this._onTouchEnd));
+    }, this._onTouchMove = (t) => {
+      t.preventDefault();
+      const e = t.touches[0];
+      if (!e) return;
+      const s = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      this._updatePosition(s);
+    }, this._onTouchEnd = () => {
+      this._dragging = !1, window.removeEventListener("touchmove", this._onTouchMove), window.removeEventListener("touchend", this._onTouchEnd), this.position = this._currentPosition, this.storageKey && localStorage.setItem(this.storageKey, String(this._currentPosition)), this.dispatchEvent(
+        new CustomEvent("sp-resize-end", {
+          detail: { position: this._currentPosition },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._handleDividerDblClick = () => {
+      this.disabled || (this._currentPosition = 50, this.position = 50, this.storageKey && localStorage.setItem(this.storageKey, "50"), this.dispatchEvent(
+        new CustomEvent("sp-resize", {
+          detail: { position: 50 },
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.dispatchEvent(
+        new CustomEvent("sp-resize-end", {
+          detail: { position: 50 },
+          bubbles: !0,
+          composed: !0
+        })
+      ));
+    }, this._handleDividerKeydown = (t) => {
+      if (this.disabled) return;
+      const e = t.shiftKey ? 10 : 1;
+      let s = !1;
+      this.orientation === "horizontal" && t.key === "ArrowLeft" || this.orientation === "vertical" && t.key === "ArrowUp" ? (t.preventDefault(), this._currentPosition = Math.max(
+        this.min,
+        this._currentPosition - e
+      ), s = !0) : (this.orientation === "horizontal" && t.key === "ArrowRight" || this.orientation === "vertical" && t.key === "ArrowDown") && (t.preventDefault(), this._currentPosition = Math.min(
+        this.max,
+        this._currentPosition + e
+      ), s = !0), s && (this.position = this._currentPosition, this.dispatchEvent(
+        new CustomEvent("sp-resize", {
+          detail: { position: this._currentPosition },
+          bubbles: !0,
+          composed: !0
+        })
+      ));
+    };
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), this.storageKey) {
+      const t = localStorage.getItem(this.storageKey);
+      if (t !== null) {
+        const e = parseFloat(t);
+        isNaN(e) || (this.position = e);
+      }
+    }
+    this._currentPosition = this.position, typeof window.matchMedia == "function" && (this._mobileQuery = window.matchMedia("(max-width: 479px)"), this._isMobile = this._mobileQuery.matches, this._mobileListener = (t) => {
+      this._isMobile = t.matches;
+    }, this._mobileQuery.addEventListener("change", this._mobileListener));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._mobileQuery && this._mobileListener && this._mobileQuery.removeEventListener("change", this._mobileListener);
+  }
+  willUpdate(t) {
+    t.has("position") && !this._dragging && (this._currentPosition = this.position);
+  }
+  _updatePosition(t) {
+    const e = this.getBoundingClientRect(), s = this.orientation === "horizontal" ? e.width : e.height;
+    if (s === 0) return;
+    const n = (t - this._dragStartPos) / s * 100;
+    let r = this._dragStartPosition + n;
+    r = Math.max(this.min, Math.min(this.max, r)), this.snap > 0 && Math.abs(r - this.snap) < 3 && (r = this.snap), this._currentPosition = Math.round(r * 100) / 100, this.dispatchEvent(
+      new CustomEvent("sp-resize", {
+        detail: { position: this._currentPosition },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return m.call(this);
+  }
+};
+i.styles = p(_);
+o([
+  h({ type: Number, reflect: !0 })
+], i.prototype, "position", 2);
+o([
+  h({ type: String, reflect: !0 })
+], i.prototype, "orientation", 2);
+o([
+  h({ type: Number })
+], i.prototype, "min", 2);
+o([
+  h({ type: Number })
+], i.prototype, "max", 2);
+o([
+  h({ type: Number })
+], i.prototype, "snap", 2);
+o([
+  h({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+o([
+  h({ type: String, attribute: "storage-key" })
+], i.prototype, "storageKey", 2);
+o([
+  u()
+], i.prototype, "_dragging", 2);
+o([
+  u()
+], i.prototype, "_isMobile", 2);
+o([
+  u()
+], i.prototype, "_currentPosition", 2);
+i = o([
+  d("sp-split-panel")
+], i);
+export {
+  i as SpSplitPanelComponent
+};

package/dist/components/split-panel/sp-split-panel.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { SpSplitPanelComponent } from './sp-split-panel.js';
+export declare function splitPanelTemplate(this: SpSplitPanelComponent): TemplateResult;
+//# sourceMappingURL=sp-split-panel.template.d.ts.map

package/dist/components/split-panel/sp-split-panel.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-split-panel.template.d.ts","sourceRoot":"","sources":["../../../src/components/split-panel/sp-split-panel.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,qBAAqB,GAC1B,cAAc,CA2DhB"}

package/dist/components/split-panel/sp-split-panel.template.js

@@ -0,0 +1,60 @@
+import { html as c } from "lit";
+function r() {
+  const i = this._isMobile ? "vertical" : this.orientation;
+  return c`
+    <div
+      class="sp-split-panel sp-split-panel--${i} ${this._dragging ? "sp-split-panel--dragging" : ""}"
+      style="--position: ${this._currentPosition}%"
+    >
+      <div class="sp-split-panel-start">
+        <slot name="start"></slot>
+      </div>
+      <div
+        class="sp-split-panel-divider"
+        role="separator"
+        aria-label="Resize handle"
+        aria-valuenow=${this._currentPosition}
+        aria-valuemin=${this.min}
+        aria-valuemax=${this.max}
+        aria-orientation=${i}
+        tabindex=${this.disabled ? "-1" : "0"}
+        @mousedown=${this._startDrag}
+        @dblclick=${this._handleDividerDblClick}
+        @touchstart=${this._startTouchDrag}
+        @keydown=${this._handleDividerKeydown}
+      >
+        <slot name="divider">
+          <div class="sp-split-panel-handle">
+            <svg
+              viewBox="0 0 10 14"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              ${i === "horizontal" ? c`
+                    <circle cx="3" cy="3" r="1.2"></circle>
+                    <circle cx="7" cy="3" r="1.2"></circle>
+                    <circle cx="3" cy="7" r="1.2"></circle>
+                    <circle cx="7" cy="7" r="1.2"></circle>
+                    <circle cx="3" cy="11" r="1.2"></circle>
+                    <circle cx="7" cy="11" r="1.2"></circle>
+                  ` : c`
+                    <circle cx="2" cy="5" r="1.2"></circle>
+                    <circle cx="5" cy="5" r="1.2"></circle>
+                    <circle cx="8" cy="5" r="1.2"></circle>
+                    <circle cx="2" cy="9" r="1.2"></circle>
+                    <circle cx="5" cy="9" r="1.2"></circle>
+                    <circle cx="8" cy="9" r="1.2"></circle>
+                  `}
+            </svg>
+          </div>
+        </slot>
+      </div>
+      <div class="sp-split-panel-end">
+        <slot name="end"></slot>
+      </div>
+    </div>
+  `;
+}
+export {
+  r as splitPanelTemplate
+};

package/dist/components/split-panel/sp-split-panel.types.d.ts

@@ -0,0 +1,10 @@
+export type SpSplitPanelOrientation = "horizontal" | "vertical";
+export interface SpSplitPanelProps {
+    position: number;
+    orientation: SpSplitPanelOrientation;
+    min: number;
+    max: number;
+    snap: number;
+    disabled: boolean;
+}
+//# sourceMappingURL=sp-split-panel.types.d.ts.map

package/dist/components/split-panel/sp-split-panel.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-split-panel.types.d.ts","sourceRoot":"","sources":["../../../src/components/split-panel/sp-split-panel.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,uBAAuB,CAAC;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/stat/index.d.ts

@@ -0,0 +1,3 @@
+export { SpStatComponent } from './sp-stat.js';
+export type { SpStatProps, SpStatTrend } from './sp-stat.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/stat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/stat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/stat/sp-stat.css.js

@@ -0,0 +1,4 @@
+const t = ":host{display:block}.sp-stat{display:flex;flex-direction:column;gap:4px}.sp-stat-label{font-size:13px;font-weight:500;color:var(--sp-text-muted, #6b7280);text-transform:uppercase;letter-spacing:.05em}.sp-stat-value-row{display:flex;align-items:baseline;gap:4px}.sp-stat-prefix{font-size:20px;font-weight:500;color:var(--sp-text-muted, #6b7280)}.sp-stat-value{font-size:36px;font-weight:700;color:var(--sp-text, #111827);line-height:1}.sp-stat-suffix{font-size:16px;font-weight:500;color:var(--sp-text-muted, #6b7280)}.sp-stat-trend{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500}.sp-stat-trend--up{color:var(--sp-stat-trend-up-color, #16a34a)}.sp-stat-trend--down{color:var(--sp-stat-trend-down-color, var(--sp-error-hover, #CF1322))}.sp-stat-trend--neutral{color:var(--sp-stat-trend-neutral-color, var(--sp-text-muted, #6b7280))}.sp-stat-trend-icon{font-size:14px}.sp-stat-description{font-size:13px;color:var(--sp-text-placeholder, #9ca3af)}.sp-stat-icon{margin-right:4px;font-size:15px}.sp-stat--loading{gap:8px}.sp-stat-skeleton{display:block;border-radius:4px;background:linear-gradient(90deg,var(--sp-bg-muted, #f0f0f0) 25%,var(--sp-border-subtle, #e0e0e0) 50%,var(--sp-bg-muted, #f0f0f0) 75%);background-size:200% 100%;animation:sp-stat-shimmer 1.4s ease infinite}.sp-stat-skeleton--label{height:13px;width:80px}.sp-stat-skeleton--value{height:36px;width:120px}.sp-stat-skeleton--trend{height:13px;width:60px}@keyframes sp-stat-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(max-width:640px){:host{min-width:0}.sp-stat-value{font-size:28px}}@media(prefers-reduced-motion:reduce){:host{transition:none!important}.sp-stat-skeleton{animation:none}}";
+export {
+  t as default
+};

package/dist/components/stat/sp-stat.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { SpStatTrend } from './sp-stat.types.js';
+/**
+ * Stat component for displaying a key metric or statistic.
+ *
+ * @element sp-stat
+ *
+ * @prop {string}      label       - Descriptive label for the metric
+ * @prop {string}      value       - Primary numeric or text value
+ * @prop {string}      prefix      - Text shown before the value (e.g. "$")
+ * @prop {string}      suffix      - Text shown after the value (e.g. "%")
+ * @prop {SpStatTrend} trend       - Trend direction: up | down | neutral
+ * @prop {string}      trendValue  - Trend description text (e.g. "+12%")
+ * @prop {string}      description - Additional context text below the value
+ *
+ * @slot - Overrides the value prop with custom content
+ */
+export declare class SpStatComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    label: string;
+    value: string;
+    prefix: string;
+    suffix: string;
+    trend: SpStatTrend;
+    trendValue: string;
+    description: string;
+    loading: boolean;
+    icon: string;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-stat": SpStatComponent;
+    }
+}
+//# sourceMappingURL=sp-stat.d.ts.map

package/dist/components/stat/sp-stat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-stat.d.ts","sourceRoot":"","sources":["../../../src/components/stat/sp-stat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;;;;;;;;;;;;;GAcG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAqB;IAG3C,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,MAAM,SAAM;IAGZ,MAAM,SAAM;IAGZ,KAAK,EAAE,WAAW,CAAa;IAG/B,UAAU,SAAM;IAGhB,WAAW,SAAM;IAGjB,OAAO,UAAS;IAGhB,IAAI,SAAM;IAED,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,eAAe,CAAC;KAC5B;CACF"}

package/dist/components/stat/sp-stat.js

@@ -0,0 +1,51 @@
+import { unsafeCSS as a, LitElement as f } from "lit";
+import { property as r, customElement as u } from "lit/decorators.js";
+import m from "./sp-stat.css.js";
+import { statTemplate as c } from "./sp-stat.template.js";
+var S = Object.defineProperty, g = Object.getOwnPropertyDescriptor, e = (y, o, s, i) => {
+  for (var p = i > 1 ? void 0 : i ? g(o, s) : o, n = y.length - 1, l; n >= 0; n--)
+    (l = y[n]) && (p = (i ? l(o, s, p) : l(p)) || p);
+  return i && p && S(o, s, p), p;
+};
+let t = class extends f {
+  constructor() {
+    super(...arguments), this.label = "", this.value = "", this.prefix = "", this.suffix = "", this.trend = "neutral", this.trendValue = "", this.description = "", this.loading = !1, this.icon = "";
+  }
+  render() {
+    return c.call(this);
+  }
+};
+t.styles = a(m);
+e([
+  r({ type: String })
+], t.prototype, "label", 2);
+e([
+  r({ type: String })
+], t.prototype, "value", 2);
+e([
+  r({ type: String })
+], t.prototype, "prefix", 2);
+e([
+  r({ type: String })
+], t.prototype, "suffix", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "trend", 2);
+e([
+  r({ type: String })
+], t.prototype, "trendValue", 2);
+e([
+  r({ type: String })
+], t.prototype, "description", 2);
+e([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "loading", 2);
+e([
+  r({ type: String })
+], t.prototype, "icon", 2);
+t = e([
+  u("sp-stat")
+], t);
+export {
+  t as SpStatComponent
+};

package/dist/components/stat/sp-stat.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { SpStatComponent } from './sp-stat.js';
+export declare function statTemplate(this: SpStatComponent): TemplateResult;
+//# sourceMappingURL=sp-stat.template.d.ts.map

package/dist/components/stat/sp-stat.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-stat.template.d.ts","sourceRoot":"","sources":["../../../src/components/stat/sp-stat.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,wBAAgB,YAAY,CAAC,IAAI,EAAE,eAAe,GAAG,cAAc,CAwClE"}

package/dist/components/stat/sp-stat.template.js

@@ -0,0 +1,38 @@
+import { html as s, nothing as t } from "lit";
+import { classMap as a } from "lit/directives/class-map.js";
+function i() {
+  return this.loading ? s`
+      <div class="sp-stat sp-stat--loading">
+        <span class="sp-stat-skeleton sp-stat-skeleton--label"></span>
+        <span class="sp-stat-skeleton sp-stat-skeleton--value"></span>
+        <span class="sp-stat-skeleton sp-stat-skeleton--trend"></span>
+      </div>
+    ` : s`
+    <div class="sp-stat">
+      ${this.label ? s`<span class="sp-stat-label">
+            ${this.icon ? s`<span class="sp-stat-icon">${this.icon}</span>` : t}
+            ${this.label}
+          </span>` : t}
+      <div class="sp-stat-value-row">
+        ${this.prefix ? s`<span class="sp-stat-prefix">${this.prefix}</span>` : t}
+        <span class="sp-stat-value"><slot>${this.value}</slot></span>
+        ${this.suffix ? s`<span class="sp-stat-suffix">${this.suffix}</span>` : t}
+      </div>
+      ${this.trendValue ? s`
+            <div
+              class=${a({
+    "sp-stat-trend": !0,
+    [`sp-stat-trend--${this.trend}`]: !0
+  })}
+            >
+              <span class="sp-stat-trend-icon">${this.trend === "up" ? "↑" : this.trend === "down" ? "↓" : "→"}</span>
+              <span class="sp-stat-trend-value">${this.trendValue}</span>
+            </div>
+          ` : t}
+      ${this.description ? s`<span class="sp-stat-description">${this.description}</span>` : t}
+    </div>
+  `;
+}
+export {
+  i as statTemplate
+};

package/dist/components/stat/sp-stat.types.d.ts

@@ -0,0 +1,13 @@
+export type SpStatTrend = "up" | "down" | "neutral";
+export interface SpStatProps {
+    label: string;
+    value: string;
+    prefix: string;
+    suffix: string;
+    trend: SpStatTrend;
+    trendValue: string;
+    description: string;
+    loading: boolean;
+    icon: string;
+}
+//# sourceMappingURL=sp-stat.types.d.ts.map

package/dist/components/stat/sp-stat.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-stat.types.d.ts","sourceRoot":"","sources":["../../../src/components/stat/sp-stat.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,WAAW,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd"}

package/dist/components/stepper/index.d.ts

@@ -0,0 +1,3 @@
+export { SpStepperComponent } from './sp-stepper.js';
+export type { SpStepperProps, SpStepperStep, SpStepStatus, SpStepperOrientation } from './sp-stepper.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/stepper/sp-stepper.css.js

@@ -0,0 +1,4 @@
+const e = ':host{display:block}.sp-stepper{display:flex;align-items:flex-start}:host([orientation="vertical"]) .sp-stepper{flex-direction:column}.sp-step{display:flex;align-items:center;flex:1;position:relative}:host([orientation="vertical"]) .sp-step{flex-direction:column;align-items:flex-start;flex:none;width:100%;padding-bottom:24px}.sp-step-indicator{width:32px;height:32px;border-radius:50%;border:2px solid var(--sp-border, #d1d5db);background:var(--sp-bg, white);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--sp-text-muted, #6b7280);flex-shrink:0;z-index:1;transition:all .2s}.sp-step--complete .sp-step-indicator{background:var(--sp-primary, #3b82f6);border-color:var(--sp-primary, #3b82f6);color:var(--sp-bg, white)}.sp-step--current .sp-step-indicator{border-color:var(--sp-primary, #3b82f6);color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 3px var(--sp-primary-focus, rgba(59, 130, 246, .2))}.sp-step--error .sp-step-indicator{border-color:var(--sp-error, #FF4D4F);color:var(--sp-error, #FF4D4F)}.sp-step-connector{flex:1;height:2px;background:var(--sp-border-subtle, #e5e7eb);margin:0 8px}:host([orientation="vertical"]) .sp-step-connector{width:2px;height:24px;margin:4px 0;position:absolute;left:15px;top:32px}.sp-step--complete+.sp-step .sp-step-connector,.sp-step--complete .sp-step-connector{background:var(--sp-primary, #3b82f6)}.sp-step-content{display:flex;flex-direction:column;gap:2px;padding:0 8px}:host([orientation="vertical"]) .sp-step-content{position:absolute;left:44px;top:4px}.sp-step-label{font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);white-space:nowrap}.sp-step--current .sp-step-label{color:var(--sp-primary, #3b82f6)}.sp-step--upcoming .sp-step-label{color:var(--sp-text-placeholder, #9ca3af)}.sp-step--error .sp-step-label{color:var(--sp-error, #FF4D4F)}.sp-step-description{font-size:12px;color:var(--sp-text-placeholder, #9ca3af);white-space:nowrap}.sp-step-indicator:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button],.sp-step-indicator{transition:none!important}}';
+export {
+  e as default
+};

package/dist/components/stepper/sp-stepper.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+import { SpStepperStep, SpStepStatus, SpStepperOrientation } from './sp-stepper.types.js';
+/**
+ * Multi-step progress indicator component.
+ *
+ * @element sp-stepper
+ *
+ * @prop {SpStepperStep[]}      steps       - Array of step definitions
+ * @prop {number}               activeStep  - Index of the currently active step (0-based)
+ * @prop {SpStepperOrientation} orientation - Layout direction: horizontal | vertical
+ * @prop {boolean}              linear      - When true, prevents navigating ahead of active step
+ *
+ * @fires {CustomEvent<{ step: number }>} sp-step-change - Emitted when a step is clicked
+ */
+export declare class SpStepperComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    steps: SpStepperStep[];
+    activeStep: number;
+    orientation: SpStepperOrientation;
+    linear: boolean;
+    /** Allow clicking completed steps to go back */
+    editable: boolean;
+    /** Show "Step N of M" progress text */
+    showProgress: boolean;
+    render(): import('lit-html').TemplateResult;
+    _getStepStatus(index: number): SpStepStatus;
+    _isStepClickable(index: number): boolean;
+    readonly _handleStepClick: (index: number) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-stepper": SpStepperComponent;
+    }
+}
+//# sourceMappingURL=sp-stepper.d.ts.map

package/dist/components/stepper/sp-stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-stepper.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/sp-stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE/F;;;;;;;;;;;GAWG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAAqB;IAG3C,KAAK,EAAE,aAAa,EAAE,CAAM;IAG5B,UAAU,SAAK;IAGf,WAAW,EAAE,oBAAoB,CAAgB;IAGjD,MAAM,UAAQ;IAEd,gDAAgD;IAEhD,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,YAAY,UAAS;IAEZ,MAAM;IAIf,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,YAAY;IAQ3C,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAQxC,QAAQ,CAAC,gBAAgB,GAAI,OAAO,MAAM,KAAG,IAAI,CAU/C;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF"}