sp-component 0.0.1

package/dist/components/time-picker/sp-time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/time-picker/sp-time-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE1G;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,qBAAsB,SAAQ,UAAU;;IACnD,OAAgB,MAAM,0BAAqB;IAC3C,MAAM,CAAC,cAAc,UAAQ;;IAU7B,KAAK,SAAM;IAGX,MAAM,EAAE,kBAAkB,CAAQ;IAGlC,IAAI,SAAK;IAGT,WAAW,UAAS;IAGpB,GAAG,SAAM;IAGT,GAAG,SAAM;IAGT,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,WAAW,SAAW;IAGtB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,IAAI,EAAE,gBAAgB,CAAQ;IAG9B,KAAK,UAAS;IAGd,MAAM,SAAK;IAGX,QAAQ,SAAK;IAGb,QAAQ,SAAK;IAGb,OAAO,EAAE,kBAAkB,CAAQ;IAE1B,MAAM;IAIN,iBAAiB;IAMjB,oBAAoB;IAMpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAexD,iBAAiB,IAAI,IAAI;IASzB,OAAO;IAQP,WAAW,CAAC,GAAG,EAAE,MAAM;IAmBvB,aAAa,IAAI,MAAM;IAOvB,cAAc,IAAI,MAAM;IAKxB,YAAY,IAAI,MAAM;IAetB,YAAY,CAAC,GAAG,EAAE,MAAM;IAQxB,cAAc,CAAC,GAAG,EAAE,MAAM;IAK1B,cAAc,CAAC,GAAG,EAAE,MAAM;IAI1B,aAAa;IAIb,OAAO;IAUP,QAAQ;IAcR,MAAM,CAAC,CAAC,EAAE,KAAK;IAcf,WAAW,CAAC,CAAC,EAAE,MAAM;IAcrB,eAAe,IAAI,MAAM,EAAE;IAc3B,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAMpC,OAAO,CAAC,QAAQ,CAAC,0BAA0B,CAIzC;IAEF,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAIrC;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,qBAAqB,CAAC;KACzC;CACF"}

package/dist/components/time-picker/sp-time-picker.js

@@ -0,0 +1,188 @@
+import { unsafeCSS as f, LitElement as m } from "lit";
+import { property as a, state as d, customElement as y } from "lit/decorators.js";
+import v from "./sp-time-picker.css.js";
+import { timePickerTemplate as g } from "./sp-time-picker.template.js";
+var S = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (t) => {
+  throw TypeError(t);
+}, r = (t, e, s, n) => {
+  for (var o = n > 1 ? void 0 : n ? w(e, s) : e, p = t.length - 1, u; p >= 0; p--)
+    (u = t[p]) && (o = (n ? u(e, s, o) : u(o)) || o);
+  return n && o && S(e, s, o), o;
+}, _ = (t, e, s) => e.has(t) || c("Cannot " + s), l = (t, e, s) => (_(t, e, "read from private field"), s ? s.call(t) : e.get(t)), b = (t, e, s) => e.has(t) ? c("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), E = (t, e, s, n) => (_(t, e, "write to private field"), e.set(t, s), s), h;
+let i = class extends m {
+  constructor() {
+    super(), b(this, h), this.value = "", this.format = "24", this.step = 1, this.showSeconds = !1, this.min = "", this.max = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.name = "", this.placeholder = "HH:MM", this.label = "", this.hint = "", this.error = "", this.size = "md", this._open = !1, this._hours = 0, this._minutes = 0, this._seconds = 0, this._period = "AM", this._handleDocumentPointerDown = (t) => {
+      !t.composedPath().includes(this) && this._open && (this._open = !1);
+    }, this._handleDocumentKeydown = (t) => {
+      t.key === "Escape" && this._open && (this._open = !1);
+    }, E(this, h, this.attachInternals());
+  }
+  render() {
+    return g.call(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("pointerdown", this._handleDocumentPointerDown), document.addEventListener("keydown", this._handleDocumentKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("pointerdown", this._handleDocumentPointerDown), document.removeEventListener("keydown", this._handleDocumentKeydown);
+  }
+  updated(t) {
+    t.has("value") && (l(this, h).setFormValue(this.value), this.required ? this.value ? l(this, h).setValidity({}) : l(this, h).setValidity({ valueMissing: !0 }, "This field is required") : l(this, h).setValidity({}));
+  }
+  formResetCallback() {
+    this.value = "", this._hours = 0, this._minutes = 0, this._seconds = 0, this._period = "AM", l(this, h).setFormValue("");
+  }
+  _toggle() {
+    this.disabled || this.readonly || (this._open = !this._open, this._open && this.value && this._parseValue(this.value));
+  }
+  _parseValue(t) {
+    const e = t.split(":");
+    if (e.length >= 2) {
+      let s = parseInt(e[0] ?? "0", 10);
+      const n = parseInt(e[1] ?? "0", 10), o = e[2] ? parseInt(e[2], 10) : 0;
+      this.format === "12" && (this._period = s >= 12 ? "PM" : "AM", s > 12 && (s -= 12), s === 0 && (s = 12)), this._hours = isNaN(s) ? 0 : s, this._minutes = isNaN(n) ? 0 : n, this._seconds = isNaN(o) ? 0 : o;
+    }
+  }
+  _displayHours() {
+    return this.format === "12" ? this._hours === 0 ? 12 : this._hours : this._hours;
+  }
+  _formatDisplay() {
+    return this.value ? this.value : "";
+  }
+  _formatValue() {
+    if (this.format === "12") {
+      let n = this._hours % 12;
+      this._period === "PM" && (n += 12);
+      const o = String(n).padStart(2, "0"), p = String(this._minutes).padStart(2, "0"), u = String(this._seconds).padStart(2, "0");
+      return this.showSeconds ? `${o}:${p}:${u}` : `${o}:${p}`;
+    }
+    const t = String(this._hours).padStart(2, "0"), e = String(this._minutes).padStart(2, "0"), s = String(this._seconds).padStart(2, "0");
+    return this.showSeconds ? `${t}:${e}:${s}` : `${t}:${e}`;
+  }
+  _changeHours(t) {
+    this.format === "12" ? this._hours = (this._hours - 1 + t + 12) % 12 + 1 : this._hours = (this._hours + t + 24) % 24;
+  }
+  _changeMinutes(t) {
+    const e = this.step > 0 ? this.step : 1;
+    this._minutes = (this._minutes + t * e + 60) % 60;
+  }
+  _changeSeconds(t) {
+    this._seconds = (this._seconds + t + 60) % 60;
+  }
+  _togglePeriod() {
+    this._period = this._period === "AM" ? "PM" : "AM";
+  }
+  _setNow() {
+    const t = /* @__PURE__ */ new Date();
+    this._hours = this.format === "12" ? t.getHours() % 12 || 12 : t.getHours(), this._minutes = t.getMinutes(), this._seconds = t.getSeconds(), this._period = t.getHours() >= 12 ? "PM" : "AM";
+  }
+  _confirm() {
+    const t = this._formatValue();
+    this._isOutOfRange(t) || (this.value = t, this._open = !1, this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _clear(t) {
+    t.stopPropagation(), this.value = "", this._open = !1, this.dispatchEvent(new CustomEvent("sp-clear", { bubbles: !0, composed: !0 })), this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: { value: "" },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _selectTime(t) {
+    this._isOutOfRange(t) || (this.value = t, this._parseValue(t), this._open = !1, this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _getTimeOptions() {
+    const t = [], e = this.step > 0 ? this.step : 1;
+    for (let s = 0; s < 24; s++)
+      for (let n = 0; n < 60; n += e) {
+        const o = `${String(s).padStart(2, "0")}:${String(n).padStart(2, "0")}`;
+        this._isOutOfRange(o) || t.push(o);
+      }
+    return t;
+  }
+  _isOutOfRange(t) {
+    return !!(this.min && t < this.min || this.max && t > this.max);
+  }
+};
+h = /* @__PURE__ */ new WeakMap();
+i.styles = f(v);
+i.formAssociated = !0;
+r([
+  a({ type: String })
+], i.prototype, "value", 2);
+r([
+  a({ type: String })
+], i.prototype, "format", 2);
+r([
+  a({ type: Number })
+], i.prototype, "step", 2);
+r([
+  a({ type: Boolean, attribute: "show-seconds" })
+], i.prototype, "showSeconds", 2);
+r([
+  a({ type: String })
+], i.prototype, "min", 2);
+r([
+  a({ type: String })
+], i.prototype, "max", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "readonly", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "required", 2);
+r([
+  a({ type: String })
+], i.prototype, "name", 2);
+r([
+  a({ type: String })
+], i.prototype, "placeholder", 2);
+r([
+  a({ type: String })
+], i.prototype, "label", 2);
+r([
+  a({ type: String })
+], i.prototype, "hint", 2);
+r([
+  a({ type: String })
+], i.prototype, "error", 2);
+r([
+  a({ type: String, reflect: !0 })
+], i.prototype, "size", 2);
+r([
+  d()
+], i.prototype, "_open", 2);
+r([
+  d()
+], i.prototype, "_hours", 2);
+r([
+  d()
+], i.prototype, "_minutes", 2);
+r([
+  d()
+], i.prototype, "_seconds", 2);
+r([
+  d()
+], i.prototype, "_period", 2);
+i = r([
+  y("sp-time-picker")
+], i);
+export {
+  i as SpTimePickerComponent
+};

package/dist/components/time-picker/sp-time-picker.template.d.ts

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

package/dist/components/time-picker/sp-time-picker.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-time-picker.template.d.ts","sourceRoot":"","sources":["../../../src/components/time-picker/sp-time-picker.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,qBAAqB,GAAG,cAAc,CAiN9E"}

package/dist/components/time-picker/sp-time-picker.template.js

@@ -0,0 +1,198 @@
+import { nothing as i, html as e } from "lit";
+import { classMap as t } from "lit/directives/class-map.js";
+function c() {
+  const r = this._open ? this._getTimeOptions() : [];
+  return e`
+    <div
+      class=${t({
+    "sp-time-picker": !0,
+    [`sp-time-picker--${this.size}`]: !0,
+    "sp-time-picker--disabled": this.disabled,
+    "sp-time-picker--error": !!this.error,
+    "sp-time-picker--open": this._open
+  })}
+    >
+      ${this.label ? e`<label class="sp-time-picker-label"
+            >${this.label}${this.required ? e`<span class="sp-required"> *</span>` : i}</label
+          >` : i}
+
+      <!-- Trigger field -->
+      <div
+        class=${t({
+    "sp-time-picker-field": !0,
+    "sp-time-picker-field--open": this._open,
+    "sp-time-picker-field--disabled": this.disabled,
+    "sp-time-picker-field--error": !!this.error
+  })}
+        @click=${this._toggle}
+        role="combobox"
+        aria-expanded=${this._open ? "true" : "false"}
+        aria-haspopup="listbox"
+      >
+        <!-- Clock icon -->
+        <svg
+          class="sp-time-picker-icon"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <polyline points="12 6 12 12 16 14" />
+        </svg>
+
+        <input
+          type="text"
+          class="sp-time-picker-input"
+          readonly
+          .value=${this._formatDisplay()}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          aria-label=${this.label || "Time picker"}
+          tabindex="0"
+        />
+
+        ${this.value ? e`<button
+              class="sp-time-picker-clear"
+              type="button"
+              aria-label="Clear time"
+              @click=${this._clear}
+            >
+              ×
+            </button>` : i}
+      </div>
+
+      <!-- Dropdown panel -->
+      ${this._open ? e`
+            <div class="sp-time-picker-panel" role="dialog" aria-label="Time picker">
+              <!-- Time columns -->
+              <div class="sp-time-picker-columns">
+                <!-- Hours column -->
+                <div class="sp-time-picker-col">
+                  <button
+                    class="sp-time-picker-arrow"
+                    type="button"
+                    aria-label="Increase hours"
+                    @click=${() => this._changeHours(1)}
+                  >▲</button>
+                  <span class="sp-time-picker-value">
+                    ${String(this._displayHours()).padStart(2, "0")}
+                  </span>
+                  <button
+                    class="sp-time-picker-arrow"
+                    type="button"
+                    aria-label="Decrease hours"
+                    @click=${() => this._changeHours(-1)}
+                  >▼</button>
+                </div>
+
+                <span class="sp-time-picker-sep">:</span>
+
+                <!-- Minutes column -->
+                <div class="sp-time-picker-col">
+                  <button
+                    class="sp-time-picker-arrow"
+                    type="button"
+                    aria-label="Increase minutes"
+                    @click=${() => this._changeMinutes(1)}
+                  >▲</button>
+                  <span class="sp-time-picker-value">
+                    ${String(this._minutes).padStart(2, "0")}
+                  </span>
+                  <button
+                    class="sp-time-picker-arrow"
+                    type="button"
+                    aria-label="Decrease minutes"
+                    @click=${() => this._changeMinutes(-1)}
+                  >▼</button>
+                </div>
+
+                <!-- Seconds column -->
+                ${this.showSeconds ? e`
+                      <span class="sp-time-picker-sep">:</span>
+                      <div class="sp-time-picker-col">
+                        <button
+                          class="sp-time-picker-arrow"
+                          type="button"
+                          aria-label="Increase seconds"
+                          @click=${() => this._changeSeconds(1)}
+                        >▲</button>
+                        <span class="sp-time-picker-value">
+                          ${String(this._seconds).padStart(2, "0")}
+                        </span>
+                        <button
+                          class="sp-time-picker-arrow"
+                          type="button"
+                          aria-label="Decrease seconds"
+                          @click=${() => this._changeSeconds(-1)}
+                        >▼</button>
+                      </div>
+                    ` : i}
+
+                <!-- AM/PM column for 12h format -->
+                ${this.format === "12" ? e`
+                      <div class="sp-time-picker-col sp-time-picker-col--period">
+                        <button
+                          class="sp-time-picker-arrow"
+                          type="button"
+                          aria-label="Toggle AM/PM"
+                          @click=${this._togglePeriod}
+                        >▲</button>
+                        <span class="sp-time-picker-value">${this._period}</span>
+                        <button
+                          class="sp-time-picker-arrow"
+                          type="button"
+                          aria-label="Toggle AM/PM"
+                          @click=${this._togglePeriod}
+                        >▼</button>
+                      </div>
+                    ` : i}
+              </div>
+
+              <!-- Quick presets list -->
+              <div class="sp-time-picker-presets" role="listbox" aria-label="Quick time options">
+                ${r.map(
+    (s) => e`
+                    <button
+                      class=${t({
+      "sp-time-picker-option": !0,
+      "sp-time-picker-option--selected": s === this.value
+    })}
+                      type="button"
+                      role="option"
+                      aria-selected=${s === this.value ? "true" : "false"}
+                      @click=${() => this._selectTime(s)}
+                    >${s}</button>
+                  `
+  )}
+              </div>
+
+              <!-- Actions -->
+              <div class="sp-time-picker-actions">
+                <button
+                  class="sp-time-picker-now"
+                  type="button"
+                  @click=${this._setNow}
+                >Now</button>
+                <button
+                  class="sp-time-picker-ok"
+                  type="button"
+                  @click=${this._confirm}
+                >OK</button>
+              </div>
+            </div>
+          ` : i}
+
+      <!-- Messages -->
+      ${this.error ? e`<span class="sp-time-picker-error" role="alert">${this.error}</span>` : this.hint ? e`<span class="sp-time-picker-hint">${this.hint}</span>` : i}
+    </div>
+  `;
+}
+export {
+  c as timePickerTemplate
+};

package/dist/components/time-picker/sp-time-picker.types.d.ts

@@ -0,0 +1,21 @@
+export type SpTimePickerFormat = "12" | "24";
+export type SpTimePickerPeriod = "AM" | "PM";
+export type SpTimePickerSize = "sm" | "md" | "lg";
+export interface SpTimePickerProps {
+    value: string;
+    format: SpTimePickerFormat;
+    step: number;
+    showSeconds: boolean;
+    min: string;
+    max: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    name: string;
+    placeholder: string;
+    label: string;
+    hint: string;
+    error: string;
+    size: SpTimePickerSize;
+}
+//# sourceMappingURL=sp-time-picker.types.d.ts.map

package/dist/components/time-picker/sp-time-picker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-time-picker.types.d.ts","sourceRoot":"","sources":["../../../src/components/time-picker/sp-time-picker.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,kBAAkB,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,gBAAgB,CAAC;CACxB"}

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

@@ -0,0 +1,3 @@
+export { SpTimelineComponent } from './sp-timeline.js';
+export type { SpTimelineProps, SpTimelineItem, SpTimelineItemVariant } from './sp-timeline.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const e = ":host{display:block}.sp-timeline{display:flex;flex-direction:column}.sp-timeline-item{display:flex;gap:16px}.sp-timeline-indicator{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.sp-timeline-dot{width:12px;height:12px;border-radius:50%;background:var(--sp-border, #d1d5db);border:2px solid var(--sp-bg, white);box-shadow:0 0 0 2px var(--sp-border, #d1d5db);flex-shrink:0;margin-top:3px}.sp-timeline-item--default .sp-timeline-dot{background:var(--sp-text-muted, #6b7280);box-shadow:0 0 0 2px var(--sp-text-muted, #6b7280)}.sp-timeline-item--success .sp-timeline-dot{background:#22c55e;box-shadow:0 0 0 2px #22c55e}.sp-timeline-item--warning .sp-timeline-dot{background:var(--sp-warning, #FAAD14);box-shadow:0 0 0 2px var(--sp-warning, #FAAD14)}.sp-timeline-item--error .sp-timeline-dot{background:var(--sp-error, #FF4D4F);box-shadow:0 0 0 2px var(--sp-error, #FF4D4F)}.sp-timeline-item--info .sp-timeline-dot{background:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary, #3b82f6)}.sp-timeline-line{width:2px;flex:1;background:var(--sp-timeline-line-color, var(--sp-border-subtle, #e5e7eb));min-height:24px;margin-top:4px}.sp-timeline-content{padding-bottom:24px;flex:1}.sp-timeline-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.sp-timeline-label{font-size:14px;font-weight:600;color:var(--sp-text, #111827)}.sp-timeline-time{font-size:12px;color:var(--sp-text-placeholder, #9ca3af);flex-shrink:0}.sp-timeline-description{font-size:14px;color:var(--sp-text-muted, #6b7280);margin:4px 0 0;line-height:1.5}.sp-timeline-dot--icon{display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1}.sp-timeline--alternate .sp-timeline-item{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:flex-start}.sp-timeline--alternate .sp-timeline-content{padding-bottom:24px}.sp-timeline--alternate .sp-timeline-content--alt{text-align:right}.sp-timeline--alternate .sp-timeline-indicator{grid-column:2}@media(max-width:640px){.sp-timeline--alternate .sp-timeline-item{display:flex;grid-template-columns:unset}.sp-timeline--alternate .sp-timeline-content--alt{display:none}.sp-timeline--alternate .sp-timeline-item--right .sp-timeline-content{display:block}.sp-timeline--alternate .sp-timeline-item--right .sp-timeline-indicator{grid-column:unset}}@media(prefers-reduced-motion:reduce){:host{transition:none!important}}";
+export {
+  e as default
+};

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

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import { SpTimelineItem } from './sp-timeline.types.js';
+/**
+ * Timeline component for displaying a sequence of events.
+ *
+ * @element sp-timeline
+ *
+ * @prop {SpTimelineItem[]} items   - Array of timeline items to display
+ * @prop {boolean}          reverse - Reverses the display order of items
+ */
+export declare class SpTimelineComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    items: SpTimelineItem[];
+    reverse: boolean;
+    alternate: boolean;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-timeline": SpTimelineComponent;
+    }
+}
+//# sourceMappingURL=sp-timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-timeline.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/sp-timeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D;;;;;;;GAOG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAqB;IAG3C,KAAK,EAAE,cAAc,EAAE,CAAM;IAG7B,OAAO,UAAS;IAGhB,SAAS,UAAS;IAET,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,mBAAmB,CAAC;KACpC;CACF"}

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

@@ -0,0 +1,33 @@
+import { unsafeCSS as a, LitElement as f } from "lit";
+import { property as n, customElement as u } from "lit/decorators.js";
+import y from "./sp-timeline.css.js";
+import { timelineTemplate as c } from "./sp-timeline.template.js";
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, s = (i, r, p, o) => {
+  for (var e = o > 1 ? void 0 : o ? _(r, p) : r, l = i.length - 1, m; l >= 0; l--)
+    (m = i[l]) && (e = (o ? m(r, p, e) : m(e)) || e);
+  return o && e && v(r, p, e), e;
+};
+let t = class extends f {
+  constructor() {
+    super(...arguments), this.items = [], this.reverse = !1, this.alternate = !1;
+  }
+  render() {
+    return c.call(this);
+  }
+};
+t.styles = a(y);
+s([
+  n({ type: Array })
+], t.prototype, "items", 2);
+s([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "reverse", 2);
+s([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "alternate", 2);
+t = s([
+  u("sp-timeline")
+], t);
+export {
+  t as SpTimelineComponent
+};

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

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

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

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

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

@@ -0,0 +1,44 @@
+import { nothing as s, html as e } from "lit";
+import { classMap as n } from "lit/directives/class-map.js";
+import { unsafeHTML as a } from "lit/directives/unsafe-html.js";
+function c() {
+  const l = this.reverse ? [...this.items].reverse() : this.items;
+  return e`
+    <div class=${n({ "sp-timeline": !0, "sp-timeline--alternate": this.alternate })}>
+      ${l.map(
+    (i, t) => e`
+          <div
+            class=${n({
+      "sp-timeline-item": !0,
+      [`sp-timeline-item--${i.variant ?? "default"}`]: !0,
+      "sp-timeline-item--right": this.alternate && t % 2 === 1,
+      "sp-timeline-item--left": this.alternate && t % 2 === 0
+    })}
+          >
+            ${this.alternate && t % 2 === 1 ? e`<div class="sp-timeline-content sp-timeline-content--alt">
+                  <div class="sp-timeline-header">
+                    <span class="sp-timeline-label">${i.label}</span>
+                    ${i.time ? e`<span class="sp-timeline-time">${i.time}</span>` : s}
+                  </div>
+                  ${i.description ? e`<p class="sp-timeline-description">${i.description}</p>` : s}
+                </div>` : s}
+            <div class="sp-timeline-indicator">
+              ${i.icon ? e`<div class="sp-timeline-dot sp-timeline-dot--icon">${a(i.icon)}</div>` : e`<div class="sp-timeline-dot"></div>`}
+              ${t < l.length - 1 ? e`<div class="sp-timeline-line"></div>` : s}
+            </div>
+            ${!this.alternate || t % 2 === 0 ? e`<div class="sp-timeline-content">
+                  <div class="sp-timeline-header">
+                    <span class="sp-timeline-label">${i.label}</span>
+                    ${i.time ? e`<span class="sp-timeline-time">${i.time}</span>` : s}
+                  </div>
+                  ${i.description ? e`<p class="sp-timeline-description">${i.description}</p>` : s}
+                </div>` : s}
+          </div>
+        `
+  )}
+    </div>
+  `;
+}
+export {
+  c as timelineTemplate
+};

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

@@ -0,0 +1,14 @@
+export type SpTimelineItemVariant = "default" | "success" | "warning" | "error" | "info";
+export interface SpTimelineItem {
+    label: string;
+    description?: string;
+    time?: string;
+    variant?: SpTimelineItemVariant;
+    icon?: string;
+}
+export interface SpTimelineProps {
+    items: SpTimelineItem[];
+    reverse: boolean;
+    alternate: boolean;
+}
+//# sourceMappingURL=sp-timeline.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-timeline.types.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/sp-timeline.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzF,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;CACpB"}

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

@@ -0,0 +1,3 @@
+export { SpToastComponent } from './sp-toast.js';
+export type { SpToastProps, SpToastVariant, SpToastPosition } from './sp-toast.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -0,0 +1,4 @@
+const o = ':host{display:block;pointer-events:none}:host([open]){pointer-events:auto}.sp-toast{position:relative;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;box-shadow:0 4px 12px #00000026;font-size:14px;max-width:360px;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s;pointer-events:none;overflow:hidden}.sp-toast--open{opacity:1;transform:translateY(0);pointer-events:auto}.sp-toast-icon{flex-shrink:0;font-size:16px}.sp-toast-message{flex:1;line-height:1.4}.sp-toast-close{background:none;border:none;cursor:pointer;opacity:.6;font-size:14px;padding:0;flex-shrink:0}.sp-toast-close:hover{opacity:1}.sp-toast-action{background:none;border:none;cursor:pointer;font-size:13px;font-weight:600;padding:2px 6px;border-radius:4px;flex-shrink:0;text-decoration:none}:host([variant="neutral"]) .sp-toast{background:var(--sp-text-secondary, #1f2937);color:var(--sp-bg, white)}:host([variant="neutral"]) .sp-toast-action{color:#93c5fd}:host([variant="info"]) .sp-toast{background:var(--sp-primary-bg, #eff6ff);border:1px solid #bfdbfe;color:#1e40af}:host([variant="info"]) .sp-toast-action{color:var(--sp-primary-active, #1d4ed8)}:host([variant="success"]) .sp-toast{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}:host([variant="success"]) .sp-toast-action{color:#15803d}:host([variant="warning"]) .sp-toast{background:var(--sp-warning-bg, #FFFBE6);border:1px solid #fde68a;color:#92400e}:host([variant="warning"]) .sp-toast-action{color:#b45309}:host([variant="error"]) .sp-toast{background:var(--sp-error-bg, #FFF2F0);border:1px solid #fecaca;color:#991b1b}:host([variant="error"]) .sp-toast-action{color:#b91c1c}.sp-toast-close:focus-visible,.sp-toast-action:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@keyframes sp-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.sp-toast-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:currentColor;opacity:.35;transform-origin:left;animation:sp-toast-progress linear forwards}@media(max-width:480px){:host{width:100%}.sp-toast{max-width:100%;width:100%;box-sizing:border-box}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}:host{animation:none;transition:none}}';
+export {
+  o as default
+};

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

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+import { SpToastVariant, SpToastPosition } from './sp-toast.types.js';
+/**
+ * Toast notification component.
+ *
+ * @element sp-toast
+ *
+ * @prop {SpToastVariant}  variant      - Visual style: neutral | info | success | warning | error
+ * @prop {string}          message      - Toast message text
+ * @prop {number}          duration     - Auto-close delay in ms (0 = no auto close)
+ * @prop {SpToastPosition} position     - Position hint for a toast container
+ * @prop {boolean}         open         - Controls visibility
+ * @prop {boolean}         closable     - Shows a close button when true
+ * @prop {string}          action       - Label for action button/link at end of toast
+ * @prop {string}          actionHref   - When set, renders action as an anchor instead of a button
+ * @prop {boolean}         pauseOnHover - Pause auto-dismiss timer and progress bar on mouse hover
+ *
+ * @fires {CustomEvent} sp-show       - Emitted when toast opens
+ * @fires {CustomEvent} sp-hide       - Emitted when toast closes
+ * @fires {CustomEvent} sp-after-hide - Emitted 300ms after toast closes
+ * @fires {CustomEvent} sp-action     - Emitted when action button/link is clicked
+ *
+ * @slot - Additional message content
+ */
+export declare class SpToastComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    variant: SpToastVariant;
+    message: string;
+    duration: number;
+    position: SpToastPosition;
+    open: boolean;
+    closable: boolean;
+    action: string;
+    actionHref: string;
+    pauseOnHover: boolean;
+    private _timer;
+    private _pausedAt;
+    private _remainingTime;
+    private _startTime;
+    updated(changed: Map<string, unknown>): void;
+    private _startTimer;
+    private _clearTimer;
+    disconnectedCallback(): void;
+    private _close;
+    readonly _handleClose: () => void;
+    readonly _handleActionClick: (e: Event) => void;
+    readonly _handleMouseEnter: () => void;
+    readonly _handleMouseLeave: () => void;
+    /** Returns the unicode icon character for the current variant. */
+    _getIcon(): string;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-toast": SpToastComponent;
+    }
+}
+//# sourceMappingURL=sp-toast.d.ts.map