sp-component 0.0.1

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

@@ -0,0 +1,59 @@
+import { unsafeCSS as d, LitElement as c } from "lit";
+import { property as l, customElement as h } from "lit/decorators.js";
+import u from "./sp-sidebar.css.js";
+import { sidebarTemplate as y } from "./sp-sidebar.template.js";
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (n, p, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? f(p, s) : p, a = n.length - 1, i; a >= 0; a--)
+    (i = n[a]) && (r = (o ? i(p, s, r) : i(r)) || r);
+  return o && r && b(p, s, r), r;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.open = !0, this.placement = "left", this.width = "240px", this.collapsible = !1, this.collapsed = !1, this.bordered = !1, this.collapsedWidth = "60px", this.navLabel = "Sidebar navigation", this._handleCollapse = () => {
+      this.collapsed = !this.collapsed, this.dispatchEvent(
+        new CustomEvent("sp-collapse", {
+          detail: { collapsed: this.collapsed },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+  }
+  render() {
+    return y.call(this);
+  }
+  _getSidebarStyle() {
+    return `width: ${this.collapsed ? this.collapsedWidth : this.width};`;
+  }
+};
+e.styles = d(u);
+t([
+  l({ type: Boolean, reflect: !0 })
+], e.prototype, "open", 2);
+t([
+  l({ type: String, reflect: !0 })
+], e.prototype, "placement", 2);
+t([
+  l({ type: String })
+], e.prototype, "width", 2);
+t([
+  l({ type: Boolean, reflect: !0 })
+], e.prototype, "collapsible", 2);
+t([
+  l({ type: Boolean, reflect: !0 })
+], e.prototype, "collapsed", 2);
+t([
+  l({ type: Boolean, reflect: !0 })
+], e.prototype, "bordered", 2);
+t([
+  l({ type: String, attribute: "collapsed-width" })
+], e.prototype, "collapsedWidth", 2);
+t([
+  l({ type: String, attribute: "nav-label" })
+], e.prototype, "navLabel", 2);
+e = t([
+  h("sp-sidebar")
+], e);
+export {
+  e as SpSidebarComponent
+};

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { nothing as e, html as a } from "lit";
+function l() {
+  return a`
+    <nav class="sp-sidebar" style=${this._getSidebarStyle()} aria-label=${this.navLabel}>
+      ${this.collapsible ? a`
+            <button
+              class="sp-sidebar-toggle"
+              type="button"
+              @click=${this._handleCollapse}
+              aria-label=${this.collapsed ? "Expand sidebar" : "Collapse sidebar"}
+              aria-expanded=${this.collapsed ? "false" : "true"}
+            >
+              ${this.collapsed ? "›" : "‹"}
+            </button>
+          ` : e}
+      <div class="sp-sidebar-content">
+        <slot name="header"></slot>
+        <slot></slot>
+        <slot name="footer"></slot>
+      </div>
+    </nav>
+  `;
+}
+export {
+  l as sidebarTemplate
+};

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

@@ -0,0 +1,10 @@
+export type SpSidebarPlacement = "left" | "right";
+export interface SpSidebarProps {
+    open: boolean;
+    placement: SpSidebarPlacement;
+    width: string;
+    collapsible: boolean;
+    collapsed: boolean;
+    bordered: boolean;
+}
+//# sourceMappingURL=sp-sidebar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-sidebar.types.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sp-sidebar.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,kBAAkB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB"}

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

@@ -0,0 +1,3 @@
+export { SpSkeletonComponent } from './sp-skeleton.js';
+export type { SpSkeletonProps, SpSkeletonVariant } from './sp-skeleton.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -0,0 +1,4 @@
+const e = ':host{display:block;width:100%}:host([variant="circle"]){display:inline-block;width:auto}.sp-skeleton{background:var(--sp-border-subtle, #e5e7eb);border-radius:4px}:host([variant="circle"]) .sp-skeleton{border-radius:50%}:host([variant="rect"]) .sp-skeleton{border-radius:4px;width:100%}:host([variant="text"]) .sp-skeleton{height:1em;border-radius:4px;width:100%}.sp-skeleton--title{height:1.5em;border-radius:4px;width:100%}.sp-skeleton-text-lines{display:flex;flex-direction:column;gap:6px;width:100%}.sp-skeleton--text-line{height:1em;border-radius:4px;width:100%}.sp-skeleton--text-line-last{width:60%}.sp-skeleton--animated{background:linear-gradient(90deg,var(--sp-border-subtle, #e5e7eb) 25%,var(--sp-bg-muted, #f3f4f6) 50%,var(--sp-border-subtle, #e5e7eb) 75%);background-size:200% 100%;animation:sp-shimmer 1.5s infinite}@keyframes sp-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.sp-skeleton,.sp-skeleton:after{animation:none;background:var(--sp-border-subtle, #e5e7eb)}}';
+export {
+  e as default
+};

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

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+import { SpSkeletonVariant } from './sp-skeleton.types.js';
+/**
+ * Skeleton loader component for content placeholders.
+ *
+ * @element sp-skeleton
+ *
+ * @prop {SpSkeletonVariant} variant  - Shape: text | circle | rect | title
+ * @prop {string}            width    - CSS width value (e.g. "200px", "100%")
+ * @prop {string}            height   - CSS height value (e.g. "16px", "48px")
+ * @prop {boolean}           animated - Enables shimmer animation (default true)
+ * @prop {boolean}           shimmer  - Shimmer wave animation; when false, static color (default true)
+ * @prop {number}            lines    - Number of text lines when variant="text" (default 3)
+ */
+export declare class SpSkeletonComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    variant: SpSkeletonVariant;
+    width: string;
+    height: string;
+    animated: boolean;
+    shimmer: boolean;
+    lines: number;
+    /** Builds the inline style string from width/height props. */
+    _buildStyle(): string;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-skeleton": SpSkeletonComponent;
+    }
+}
+//# sourceMappingURL=sp-skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/sp-skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE;;;;;;;;;;;GAWG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,EAAE,iBAAiB,CAAU;IAGpC,KAAK,SAAM;IAGX,MAAM,SAAM;IAGZ,QAAQ,UAAQ;IAGhB,OAAO,UAAQ;IAGf,KAAK,SAAK;IAEV,8DAA8D;IAC9D,WAAW,IAAI,MAAM;IAOZ,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,mBAAmB,CAAC;KACpC;CACF"}

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

@@ -0,0 +1,47 @@
+import { unsafeCSS as m, LitElement as a } from "lit";
+import { property as o, customElement as u } from "lit/decorators.js";
+import y from "./sp-skeleton.css.js";
+import { skeletonTemplate as f } from "./sp-skeleton.template.js";
+var c = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (i, p, h, s) => {
+  for (var e = s > 1 ? void 0 : s ? g(p, h) : p, n = i.length - 1, l; n >= 0; n--)
+    (l = i[n]) && (e = (s ? l(p, h, e) : l(e)) || e);
+  return s && e && c(p, h, e), e;
+};
+let t = class extends a {
+  constructor() {
+    super(...arguments), this.variant = "text", this.width = "", this.height = "", this.animated = !0, this.shimmer = !0, this.lines = 3;
+  }
+  /** Builds the inline style string from width/height props. */
+  _buildStyle() {
+    const i = [];
+    return this.width && i.push(`width: ${this.width}`), this.height && i.push(`height: ${this.height}`), i.join("; ");
+  }
+  render() {
+    return f.call(this);
+  }
+};
+t.styles = m(y);
+r([
+  o({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+r([
+  o({ type: String })
+], t.prototype, "width", 2);
+r([
+  o({ type: String })
+], t.prototype, "height", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "animated", 2);
+r([
+  o({ type: Boolean })
+], t.prototype, "shimmer", 2);
+r([
+  o({ type: Number })
+], t.prototype, "lines", 2);
+t = r([
+  u("sp-skeleton")
+], t);
+export {
+  t as SpSkeletonComponent
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-skeleton.template.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/sp-skeleton.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,mBAAmB,GAAG,cAAc,CA6C1E"}

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

@@ -0,0 +1,45 @@
+import { html as i } from "lit";
+import { classMap as s } from "lit/directives/class-map.js";
+import { repeat as r } from "lit/directives/repeat.js";
+function h() {
+  const t = {
+    "sp-skeleton": !0,
+    "sp-skeleton--animated": this.animated && this.shimmer
+  };
+  if (this.variant === "text") {
+    const l = Math.max(1, this.lines);
+    return i`
+      <div class=${s({ ...t, "sp-skeleton-text-lines": !0 })} aria-hidden="true" style=${this._buildStyle()}>
+        ${r(
+      Array.from({ length: l }, (e, n) => n),
+      (e) => e,
+      (e) => i`
+            <div
+              class=${s({
+        ...t,
+        "sp-skeleton--text-line": !0,
+        "sp-skeleton--text-line-last": e === l - 1
+      })}
+            ></div>
+          `
+    )}
+      </div>
+    `;
+  }
+  return this.variant === "title" ? i`
+      <div
+        class=${s({ ...t, "sp-skeleton--title": !0 })}
+        style=${this._buildStyle()}
+        aria-hidden="true"
+      ></div>
+    ` : i`
+    <div
+      class=${s(t)}
+      style=${this._buildStyle()}
+      aria-hidden="true"
+    ></div>
+  `;
+}
+export {
+  h as skeletonTemplate
+};

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

@@ -0,0 +1,10 @@
+export type SpSkeletonVariant = "text" | "circle" | "rect" | "title";
+export interface SpSkeletonProps {
+    variant: SpSkeletonVariant;
+    width: string;
+    height: string;
+    animated: boolean;
+    shimmer: boolean;
+    lines: number;
+}
+//# sourceMappingURL=sp-skeleton.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-skeleton.types.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/sp-skeleton.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf"}

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

@@ -0,0 +1,3 @@
+export { SpSliderComponent } from './sp-slider.js';
+export type { SpSliderProps, SpSliderSize } from './sp-slider.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -0,0 +1,4 @@
+const e = ':host{display:block;font-family:inherit}.sp-slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.sp-slider-label{font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151)}.sp-slider-value{font-size:14px;color:var(--sp-primary, #3b82f6);font-weight:600}.sp-slider-track-wrapper{position:relative;display:flex;align-items:center;height:20px}.sp-slider-track{position:absolute;left:0;right:0;height:4px;background:var(--sp-border-subtle, #e5e7eb);border-radius:2px;pointer-events:none}:host([size="sm"]) .sp-slider-track{height:2px}:host([size="lg"]) .sp-slider-track{height:6px}.sp-slider-fill{position:absolute;height:100%;background:var(--sp-primary, #3b82f6);border-radius:2px;transition:width .1s,left .1s}.sp-slider-input{position:relative;width:100%;margin:0;height:20px;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;z-index:1}.sp-slider-input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--sp-primary, #3b82f6);border:2px solid var(--sp-bg, white);box-shadow:0 1px 4px #0003;cursor:pointer;transition:transform .1s}:host([size="sm"]) .sp-slider-input::-webkit-slider-thumb{width:12px;height:12px}:host([size="lg"]) .sp-slider-input::-webkit-slider-thumb{width:20px;height:20px}.sp-slider-input::-webkit-slider-thumb:hover{transform:scale(1.2)}.sp-slider-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--sp-primary, #3b82f6);border:2px solid var(--sp-bg, white);box-shadow:0 1px 4px #0003;cursor:pointer}.sp-slider-input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}:host([disabled]) .sp-slider-input{cursor:not-allowed;opacity:.5}:host([disabled]) .sp-slider-fill{background:var(--sp-text-placeholder, #9ca3af)}.sp-slider-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-slider-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}.sp-slider-input--range-start,.sp-slider-input--range-end{position:absolute;pointer-events:none}.sp-slider-input--range-start::-webkit-slider-thumb,.sp-slider-input--range-end::-webkit-slider-thumb{pointer-events:all}.sp-slider-input--range-start::-moz-range-thumb,.sp-slider-input--range-end::-moz-range-thumb{pointer-events:all}.sp-slider-marks{position:absolute;left:0;right:0;top:100%;margin-top:4px;pointer-events:none}.sp-slider-mark{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%)}.sp-slider-mark-tick{display:block;width:2px;height:6px;background:var(--sp-text-placeholder, #9ca3af);border-radius:1px}.sp-slider-mark-label{font-size:11px;color:var(--sp-text-muted, #6b7280);margin-top:2px;white-space:nowrap}@media(max-width:480px){.sp-slider-track-wrapper{height:28px}.sp-slider-input::-webkit-slider-thumb{width:22px;height:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}input[type=range]::-webkit-slider-thumb{transition:none}}';
+export {
+  e as default
+};

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

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+import { SpSliderMark, SpSliderSize } from './sp-slider.types.js';
+/**
+ * Reusable slider (range input) component.
+ *
+ * @element sp-slider
+ *
+ * @prop {number}         value     - Current value (single mode)
+ * @prop {number}         min       - Minimum value
+ * @prop {number}         max       - Maximum value
+ * @prop {number}         step      - Step increment
+ * @prop {boolean}        disabled  - Disables the slider
+ * @prop {SpSliderSize}   size      - Size: sm | md | lg
+ * @prop {string}         label     - Label text
+ * @prop {boolean}        showValue - Shows the current value next to the label
+ * @prop {string}         error     - Error message
+ * @prop {string}         hint      - Hint message
+ * @prop {boolean}        range     - Enables range mode with two thumbs
+ * @prop {SpSliderMark[]} marks     - Tick marks on the track
+ *
+ * @fires {CustomEvent<{ value: number }>}            sp-input  - Emitted on every input change (single mode)
+ * @fires {CustomEvent<{ value: number }>}            sp-change - Emitted when the value is committed (single mode)
+ * @fires {CustomEvent<{ value: [number, number] }>}  sp-change - Emitted when value is committed (range mode)
+ */
+export declare class SpSliderComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    size: SpSliderSize;
+    label: string;
+    showValue: boolean;
+    error: string;
+    hint: string;
+    range: boolean;
+    marks: SpSliderMark[];
+    /** Range low value (start thumb) */
+    rangeStart: number;
+    /** Range high value (end thumb) */
+    rangeEnd: number;
+    get percentage(): number;
+    get rangeStartPercentage(): number;
+    get rangeEndPercentage(): number;
+    readonly _handleInput: (e: Event) => void;
+    readonly _handleChange: (e: Event) => void;
+    readonly _handleRangeStartInput: (e: Event) => void;
+    readonly _handleRangeEndInput: (e: Event) => void;
+    readonly _handleRangeStartChange: (e: Event) => void;
+    readonly _handleRangeEndChange: (e: Event) => void;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-slider": SpSliderComponent;
+    }
+}
+//# sourceMappingURL=sp-slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/sp-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAqB;IAG3C,KAAK,SAAK;IAGV,GAAG,SAAK;IAGR,GAAG,SAAO;IAGV,IAAI,SAAK;IAGT,QAAQ,UAAS;IAGjB,IAAI,EAAE,YAAY,CAAQ;IAG1B,KAAK,SAAM;IAGX,SAAS,UAAS;IAGlB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,UAAS;IAGd,KAAK,EAAE,YAAY,EAAE,CAAM;IAE3B,oCAAoC;IAEpC,UAAU,SAAK;IAEf,mCAAmC;IAEnC,QAAQ,SAAO;IAEf,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,IAAI,oBAAoB,IAAI,MAAM,CAEjC;IAED,IAAI,kBAAkB,IAAI,MAAM,CAE/B;IAED,QAAQ,CAAC,YAAY,GAAI,GAAG,KAAK,UAG/B;IAEF,QAAQ,CAAC,aAAa,GAAI,GAAG,KAAK,UAGhC;IAEF,QAAQ,CAAC,sBAAsB,GAAI,GAAG,KAAK,UAIzC;IAEF,QAAQ,CAAC,oBAAoB,GAAI,GAAG,KAAK,UAIvC;IAEF,QAAQ,CAAC,uBAAuB,GAAI,GAAG,KAAK,UAI1C;IAEF,QAAQ,CAAC,qBAAqB,GAAI,GAAG,KAAK,UAIxC;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,91 @@
+import { unsafeCSS as l, LitElement as m } from "lit";
+import { property as s, state as u, customElement as g } from "lit/decorators.js";
+import d from "./sp-slider.css.js";
+import { sliderTemplate as v } from "./sp-slider.template.js";
+var b = Object.defineProperty, c = Object.getOwnPropertyDescriptor, e = (r, a, h, i) => {
+  for (var n = i > 1 ? void 0 : i ? c(a, h) : a, p = r.length - 1, o; p >= 0; p--)
+    (o = r[p]) && (n = (i ? o(a, h, n) : o(n)) || n);
+  return i && n && b(a, h, n), n;
+};
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.disabled = !1, this.size = "md", this.label = "", this.showValue = !1, this.error = "", this.hint = "", this.range = !1, this.marks = [], this.rangeStart = 0, this.rangeEnd = 100, this._handleInput = (r) => {
+      this.value = Number(r.target.value), this.dispatchEvent(new CustomEvent("sp-input", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
+    }, this._handleChange = (r) => {
+      this.value = Number(r.target.value), this.dispatchEvent(new CustomEvent("sp-change", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
+    }, this._handleRangeStartInput = (r) => {
+      const a = Number(r.target.value);
+      this.rangeStart = Math.min(a, this.rangeEnd), this.dispatchEvent(new CustomEvent("sp-input", { detail: { value: [this.rangeStart, this.rangeEnd] }, bubbles: !0, composed: !0 }));
+    }, this._handleRangeEndInput = (r) => {
+      const a = Number(r.target.value);
+      this.rangeEnd = Math.max(a, this.rangeStart), this.dispatchEvent(new CustomEvent("sp-input", { detail: { value: [this.rangeStart, this.rangeEnd] }, bubbles: !0, composed: !0 }));
+    }, this._handleRangeStartChange = (r) => {
+      const a = Number(r.target.value);
+      this.rangeStart = Math.min(a, this.rangeEnd), this.dispatchEvent(new CustomEvent("sp-change", { detail: { value: [this.rangeStart, this.rangeEnd] }, bubbles: !0, composed: !0 }));
+    }, this._handleRangeEndChange = (r) => {
+      const a = Number(r.target.value);
+      this.rangeEnd = Math.max(a, this.rangeStart), this.dispatchEvent(new CustomEvent("sp-change", { detail: { value: [this.rangeStart, this.rangeEnd] }, bubbles: !0, composed: !0 }));
+    };
+  }
+  get percentage() {
+    return (this.value - this.min) / (this.max - this.min) * 100;
+  }
+  get rangeStartPercentage() {
+    return (this.rangeStart - this.min) / (this.max - this.min) * 100;
+  }
+  get rangeEndPercentage() {
+    return (this.rangeEnd - this.min) / (this.max - this.min) * 100;
+  }
+  render() {
+    return v.call(this);
+  }
+};
+t.styles = l(d);
+e([
+  s({ type: Number })
+], t.prototype, "value", 2);
+e([
+  s({ type: Number })
+], t.prototype, "min", 2);
+e([
+  s({ type: Number })
+], t.prototype, "max", 2);
+e([
+  s({ type: Number })
+], t.prototype, "step", 2);
+e([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+e([
+  s({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+e([
+  s({ type: String })
+], t.prototype, "label", 2);
+e([
+  s({ type: Boolean, attribute: "show-value" })
+], t.prototype, "showValue", 2);
+e([
+  s({ type: String })
+], t.prototype, "error", 2);
+e([
+  s({ type: String })
+], t.prototype, "hint", 2);
+e([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "range", 2);
+e([
+  s({ type: Array })
+], t.prototype, "marks", 2);
+e([
+  u()
+], t.prototype, "rangeStart", 2);
+e([
+  u()
+], t.prototype, "rangeEnd", 2);
+t = e([
+  g("sp-slider")
+], t);
+export {
+  t as SpSliderComponent
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-slider.template.d.ts","sourceRoot":"","sources":["../../../src/components/slider/sp-slider.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,wBAAgB,cAAc,CAAC,IAAI,EAAE,iBAAiB,GAAG,cAAc,CAkGtE"}

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

@@ -0,0 +1,94 @@
+import { nothing as a, html as s } from "lit";
+function n() {
+  const e = this.range ? `${this.rangeStart} – ${this.rangeEnd}` : String(this.value);
+  return s`
+    <div class="sp-slider-wrapper">
+      ${this.label || this.showValue ? s`
+        <div class="sp-slider-header">
+          ${this.label ? s`<label class="sp-slider-label">${this.label}</label>` : a}
+          ${this.showValue ? s`<span class="sp-slider-value">${e}</span>` : a}
+        </div>
+      ` : a}
+      <div class="sp-slider-track-wrapper">
+        <div class="sp-slider-track">
+          ${this.range ? s`<div
+                class="sp-slider-fill"
+                style="left: ${this.rangeStartPercentage}%; width: ${this.rangeEndPercentage - this.rangeStartPercentage}%"
+              ></div>` : s`<div class="sp-slider-fill" style="width: ${this.percentage}%"></div>`}
+        </div>
+        ${this.marks.length > 0 ? s`
+              <div class="sp-slider-marks" aria-hidden="true">
+                ${this.marks.map((i) => {
+    const t = (i.value - this.min) / (this.max - this.min) * 100;
+    return s`
+                    <span
+                      class="sp-slider-mark"
+                      style="left: ${t}%"
+                    >
+                      <span class="sp-slider-mark-tick"></span>
+                      ${i.label ? s`<span class="sp-slider-mark-label">${i.label}</span>` : a}
+                    </span>
+                  `;
+  })}
+              </div>
+            ` : a}
+        ${this.range ? s`
+              <input
+                type="range"
+                class="sp-slider-input sp-slider-input--range-start"
+                role="slider"
+                .value=${String(this.rangeStart)}
+                min=${this.min}
+                max=${this.max}
+                step=${this.step}
+                ?disabled=${this.disabled}
+                aria-valuemin=${this.min}
+                aria-valuemax=${this.max}
+                aria-valuenow=${this.rangeStart}
+                aria-label="${this.label ? this.label + " start" : "Range start"}"
+                @input=${this._handleRangeStartInput}
+                @change=${this._handleRangeStartChange}
+              />
+              <input
+                type="range"
+                class="sp-slider-input sp-slider-input--range-end"
+                role="slider"
+                .value=${String(this.rangeEnd)}
+                min=${this.min}
+                max=${this.max}
+                step=${this.step}
+                ?disabled=${this.disabled}
+                aria-valuemin=${this.min}
+                aria-valuemax=${this.max}
+                aria-valuenow=${this.rangeEnd}
+                aria-label="${this.label ? this.label + " end" : "Range end"}"
+                @input=${this._handleRangeEndInput}
+                @change=${this._handleRangeEndChange}
+              />
+            ` : s`
+              <input
+                type="range"
+                class="sp-slider-input"
+                role="slider"
+                .value=${String(this.value)}
+                min=${this.min}
+                max=${this.max}
+                step=${this.step}
+                ?disabled=${this.disabled}
+                aria-valuemin=${this.min}
+                aria-valuemax=${this.max}
+                aria-valuenow=${this.value}
+                aria-label=${this.label || a}
+                @input=${this._handleInput}
+                @change=${this._handleChange}
+              />
+            `}
+      </div>
+      ${this.error ? s`<span class="sp-slider-error">${this.error}</span>` : a}
+      ${!this.error && this.hint ? s`<span class="sp-slider-hint">${this.hint}</span>` : a}
+    </div>
+  `;
+}
+export {
+  n as sliderTemplate
+};

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

@@ -0,0 +1,20 @@
+export type SpSliderSize = "sm" | "md" | "lg";
+export interface SpSliderMark {
+    value: number;
+    label?: string;
+}
+export interface SpSliderProps {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    size: SpSliderSize;
+    label: string;
+    showValue: boolean;
+    error: string;
+    hint: string;
+    range: boolean;
+    marks: SpSliderMark[];
+}
+//# sourceMappingURL=sp-slider.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-slider.types.d.ts","sourceRoot":"","sources":["../../../src/components/slider/sp-slider.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB"}

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

@@ -0,0 +1,3 @@
+export { SpSpinnerComponent } from './sp-spinner.js';
+export type { SpSpinnerProps, SpSpinnerSize } from './sp-spinner.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const i = ':host{display:inline-flex;align-items:center;justify-content:center;color:var(--sp-primary, #3b82f6)}.sp-spinner{display:flex;animation:sp-spin .75s linear infinite}.sp-spinner svg{display:block}:host([size="sm"]) .sp-spinner svg{width:16px;height:16px}:host([size="md"]) .sp-spinner svg{width:24px;height:24px}:host([size="lg"]) .sp-spinner svg{width:36px;height:36px}:host([size="xl"]) .sp-spinner svg{width:48px;height:48px}.sp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes sp-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.sp-spinner{animation:none;opacity:.6}}';
+export {
+  i as default
+};

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import { SpSpinnerSize } from './sp-spinner.types.js';
+/**
+ * Spinner component for indicating loading state.
+ *
+ * @element sp-spinner
+ *
+ * @prop {SpSpinnerSize} size  - Size: sm | md | lg | xl
+ * @prop {string}        label - Accessible label (aria-label and sr-only text)
+ */
+export declare class SpSpinnerComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    size: SpSpinnerSize;
+    label: string;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-spinner": SpSpinnerComponent;
+    }
+}
+//# sourceMappingURL=sp-spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/sp-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D;;;;;;;GAOG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,EAAE,aAAa,CAAQ;IAG3B,KAAK,SAAgB;IAEZ,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF"}