sp-component 0.0.1

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

@@ -0,0 +1,58 @@
+import { unsafeCSS as u, LitElement as c } from "lit";
+import { property as o, customElement as h } from "lit/decorators.js";
+import f from "./sp-stepper.css.js";
+import { stepperTemplate as m } from "./sp-stepper.template.js";
+var S = Object.defineProperty, v = Object.getOwnPropertyDescriptor, p = (t, r, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? v(r, i) : r, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (s = (a ? l(r, i, s) : l(s)) || s);
+  return a && s && S(r, i, s), s;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.steps = [], this.activeStep = 0, this.orientation = "horizontal", this.linear = !0, this.editable = !1, this.showProgress = !1, this._handleStepClick = (t) => {
+      this.linear && t > this.activeStep || (this.activeStep = t, this.dispatchEvent(
+        new CustomEvent("sp-step-change", {
+          detail: { step: t },
+          bubbles: !0,
+          composed: !0
+        })
+      ));
+    };
+  }
+  render() {
+    return m.call(this);
+  }
+  _getStepStatus(t) {
+    var i;
+    const r = (i = this.steps[t]) == null ? void 0 : i.status;
+    return r || (t < this.activeStep ? "complete" : t === this.activeStep ? "current" : "upcoming");
+  }
+  _isStepClickable(t) {
+    return t === this.activeStep ? !1 : t < this.activeStep ? !0 : !this.linear;
+  }
+};
+e.styles = u(f);
+p([
+  o({ type: Array })
+], e.prototype, "steps", 2);
+p([
+  o({ type: Number })
+], e.prototype, "activeStep", 2);
+p([
+  o({ type: String, reflect: !0 })
+], e.prototype, "orientation", 2);
+p([
+  o({ type: Boolean })
+], e.prototype, "linear", 2);
+p([
+  o({ type: Boolean })
+], e.prototype, "editable", 2);
+p([
+  o({ type: Boolean, attribute: "show-progress" })
+], e.prototype, "showProgress", 2);
+e = p([
+  h("sp-stepper")
+], e);
+export {
+  e as SpStepperComponent
+};

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

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

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

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

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

@@ -0,0 +1,50 @@
+import { nothing as e, html as s } from "lit";
+import { classMap as l } from "lit/directives/class-map.js";
+function d() {
+  return s`
+    <div class="sp-stepper">
+      ${this.showProgress ? s`
+        <div class="sp-stepper-progress" aria-live="polite">
+          Step ${this.activeStep + 1} of ${this.steps.length}
+        </div>
+      ` : e}
+      <div class="sp-stepper-steps">
+      ${this.steps.map((i, t) => {
+    const p = this._getStepStatus(t), r = this._isStepClickable(t), a = t === this.activeStep;
+    return s`
+          <div
+            class=${l({
+      "sp-step": !0,
+      [`sp-step--${p}`]: !0,
+      "sp-step--clickable": r
+    })}
+            role="button"
+            tabindex=${r ? "0" : "-1"}
+            aria-current=${a ? "step" : e}
+            aria-disabled=${!r && !a ? "true" : e}
+            @click=${() => this._handleStepClick(t)}
+            @keydown=${(o) => {
+      (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this._handleStepClick(t));
+    }}
+          >
+            <div class="sp-step-indicator">
+              ${p === "complete" ? s`<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                    <path d="M2 7l4 4 6-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>` : p === "error" ? s`<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v6M7 10v1.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>` : s`<span>${t + 1}</span>`}
+            </div>
+            ${t < this.steps.length - 1 ? s`<div class="sp-step-connector"></div>` : e}
+            <div class="sp-step-content">
+              <span class="sp-step-label">${i.label}</span>
+              ${i.optional ? s`<span class="sp-step-optional">(Optional)</span>` : e}
+              ${i.description ? s`<span class="sp-step-description">${i.description}</span>` : e}
+            </div>
+          </div>
+        `;
+  })}
+      </div>
+    </div>
+  `;
+}
+export {
+  d as stepperTemplate
+};

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

@@ -0,0 +1,17 @@
+export type SpStepStatus = "complete" | "current" | "upcoming" | "error";
+export type SpStepperOrientation = "horizontal" | "vertical";
+export interface SpStepperStep {
+    label: string;
+    description?: string;
+    status?: SpStepStatus;
+    optional?: boolean;
+}
+export interface SpStepperProps {
+    steps: SpStepperStep[];
+    activeStep: number;
+    orientation: SpStepperOrientation;
+    linear: boolean;
+    editable: boolean;
+    showProgress: boolean;
+}
+//# sourceMappingURL=sp-stepper.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-stepper.types.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/sp-stepper.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAEzE,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,oBAAoB,CAAC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;CACvB"}

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

@@ -0,0 +1,3 @@
+export { SpSwitchComponent } from './sp-switch.js';
+export type { SpSwitchProps, SpSwitchSize } from './sp-switch.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/switch/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/switch/sp-switch.css.js

@@ -0,0 +1,4 @@
+const t = ':host{display:inline-block}.sp-switch-label{display:inline-flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.sp-switch-label--disabled{opacity:.5;cursor:not-allowed}.sp-switch-track{position:relative;display:inline-flex;align-items:center;width:44px;height:24px;border-radius:12px;background:var(--sp-border, #d1d5db);transition:background .2s;flex-shrink:0}.sp-switch-track input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:inherit;border-radius:inherit}.sp-switch-track--checked{background:var(--sp-primary, #3b82f6)}.sp-switch-thumb{position:absolute;left:2px;width:20px;height:20px;border-radius:50%;background:var(--sp-bg, white);box-shadow:0 1px 3px #0003;transition:transform .2s;pointer-events:none}.sp-switch-track--checked .sp-switch-thumb{transform:translate(20px)}.sp-switch-track:has(input:focus-visible){outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}:host([size="sm"]) .sp-switch-track{width:34px;height:18px;border-radius:9px}:host([size="sm"]) .sp-switch-thumb{width:14px;height:14px}:host([size="sm"]) .sp-switch-track--checked .sp-switch-thumb{transform:translate(16px)}:host([size="lg"]) .sp-switch-track{width:54px;height:30px;border-radius:15px}:host([size="lg"]) .sp-switch-thumb{width:26px;height:26px}:host([size="lg"]) .sp-switch-track--checked .sp-switch-thumb{transform:translate(24px)}.sp-switch-text{font-size:14px;color:var(--sp-text-secondary, #374151)}.sp-switch-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}@media(prefers-reduced-motion:reduce){.sp-switch-track,.sp-switch-thumb{transition:none}}';
+export {
+  t as default
+};

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

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+import { SpSwitchSize } from './sp-switch.types.js';
+/**
+ * Toggle switch component.
+ *
+ * @element sp-switch
+ *
+ * @prop {boolean}       checked  - Whether the switch is on
+ * @prop {boolean}       disabled - Disables the switch
+ * @prop {string}        name     - Native input name
+ * @prop {string}        value    - Native input value (default "on")
+ * @prop {SpSwitchSize}  size     - Size: sm | md | lg
+ * @prop {string}        label    - Label text (uses slot if not provided)
+ * @prop {string}        hint     - Hint text shown below the switch
+ *
+ * @fires {CustomEvent<{ checked: boolean }>} sp-change - Emitted when the switch state changes
+ *
+ * @slot - Label content (used when label prop is not set)
+ */
+export declare class SpSwitchComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    constructor();
+    checked: boolean;
+    disabled: boolean;
+    name: string;
+    value: string;
+    size: SpSwitchSize;
+    /** Label shown inside the track when checked */
+    onLabel: string;
+    /** Label shown inside the track when unchecked */
+    offLabel: string;
+    label: string;
+    hint: string;
+    render(): import('lit-html').TemplateResult;
+    updated(): void;
+    readonly _handleChange: (e: Event) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-switch": SpSwitchComponent;
+    }
+}
+//# sourceMappingURL=sp-switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/sp-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;;IAC/C,OAAgB,MAAM,0BAAqB;IAC3C,MAAM,CAAC,cAAc,UAAQ;;IAU7B,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAQ;IAGb,IAAI,EAAE,YAAY,CAAQ;IAE1B,gDAAgD;IAEhD,OAAO,SAAM;IAEb,kDAAkD;IAElD,QAAQ,SAAM;IAGd,KAAK,SAAM;IAGX,IAAI,SAAM;IAED,MAAM;IAIN,OAAO,IAAI,IAAI;IAIxB,QAAQ,CAAC,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAUvC;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,67 @@
+import { unsafeCSS as f, LitElement as u } from "lit";
+import { property as o, customElement as y } from "lit/decorators.js";
+import v from "./sp-switch.css.js";
+import { switchTemplate as _ } from "./sp-switch.template.js";
+var m = Object.defineProperty, S = Object.getOwnPropertyDescriptor, c = (t) => {
+  throw TypeError(t);
+}, s = (t, e, r, p) => {
+  for (var i = p > 1 ? void 0 : p ? S(e, r) : e, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (i = (p ? h(e, r, i) : h(i)) || i);
+  return p && i && m(e, r, i), i;
+}, d = (t, e, r) => e.has(t) || c("Cannot " + r), g = (t, e, r) => (d(t, e, "read from private field"), r ? r.call(t) : e.get(t)), w = (t, e, r) => e.has(t) ? c("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), b = (t, e, r, p) => (d(t, e, "write to private field"), e.set(t, r), r), n;
+let a = class extends u {
+  constructor() {
+    super(), w(this, n), this.checked = !1, this.disabled = !1, this.name = "", this.value = "on", this.size = "md", this.onLabel = "", this.offLabel = "", this.label = "", this.hint = "", this._handleChange = (t) => {
+      const e = t.target;
+      this.checked = e.checked, this.dispatchEvent(
+        new CustomEvent("sp-change", {
+          detail: { checked: this.checked },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, b(this, n, this.attachInternals());
+  }
+  render() {
+    return _.call(this);
+  }
+  updated() {
+    g(this, n).setFormValue(this.checked ? this.value || "on" : null);
+  }
+};
+n = /* @__PURE__ */ new WeakMap();
+a.styles = f(v);
+a.formAssociated = !0;
+s([
+  o({ type: Boolean, reflect: !0 })
+], a.prototype, "checked", 2);
+s([
+  o({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+s([
+  o({ type: String })
+], a.prototype, "name", 2);
+s([
+  o({ type: String })
+], a.prototype, "value", 2);
+s([
+  o({ type: String, reflect: !0 })
+], a.prototype, "size", 2);
+s([
+  o({ type: String, attribute: "on-label" })
+], a.prototype, "onLabel", 2);
+s([
+  o({ type: String, attribute: "off-label" })
+], a.prototype, "offLabel", 2);
+s([
+  o({ type: String })
+], a.prototype, "label", 2);
+s([
+  o({ type: String })
+], a.prototype, "hint", 2);
+a = s([
+  y("sp-switch")
+], a);
+export {
+  a as SpSwitchComponent
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-switch.template.d.ts","sourceRoot":"","sources":["../../../src/components/switch/sp-switch.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,CA+BtE"}

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

@@ -0,0 +1,30 @@
+import { nothing as t, html as s } from "lit";
+function i() {
+  const a = `sp-switch-label${this.disabled ? " sp-switch-label--disabled" : ""}`, e = `sp-switch-track${this.checked ? " sp-switch-track--checked" : ""}`;
+  return s`
+    <label class=${a}>
+      <span class=${e}>
+        <input
+          type="checkbox"
+          role="switch"
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          name=${this.name || t}
+          value=${this.value}
+          aria-describedby=${this.hint ? "sp-switch-desc" : t}
+          @change=${this._handleChange}
+        />
+        ${this.onLabel || this.offLabel ? s`
+          <span class="sp-switch-track-label" aria-hidden="true">
+            ${this.checked ? this.onLabel : this.offLabel}
+          </span>` : t}
+        <span class="sp-switch-thumb"></span>
+      </span>
+      ${this.label ? s`<span class="sp-switch-text">${this.label}</span>` : s`<slot></slot>`}
+    </label>
+    ${this.hint ? s`<span id="sp-switch-desc" class="sp-switch-hint">${this.hint}</span>` : t}
+  `;
+}
+export {
+  i as switchTemplate
+};

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

@@ -0,0 +1,11 @@
+export type SpSwitchSize = "sm" | "md" | "lg";
+export interface SpSwitchProps {
+    checked: boolean;
+    disabled: boolean;
+    name: string;
+    value: string;
+    size: SpSwitchSize;
+    label: string;
+    hint: string;
+}
+//# sourceMappingURL=sp-switch.types.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+export { SpTableComponent } from './sp-table.js';
+export type { SpTableProps, SpTableColumn, SpTableSortDirection } from './sp-table.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const e = ":host{display:block}.sp-table-wrapper{width:100%;overflow-x:auto;border-radius:8px}.sp-table{width:100%;border-collapse:collapse;font-size:14px}:host([bordered]) .sp-table-wrapper{border:1px solid var(--sp-border-subtle, #e5e7eb)}.sp-table-th{padding:12px 16px;text-align:left;font-size:12px;font-weight:600;color:var(--sp-text-muted, #6b7280);text-transform:uppercase;letter-spacing:.05em;background:var(--sp-bg-subtle, #f9fafb);border-bottom:1px solid var(--sp-border-subtle, #e5e7eb);white-space:nowrap}:host([compact]) .sp-table-th{padding:8px 12px}.sp-table-th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sp-table-th--sortable:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-table-th-content{display:flex;align-items:center;gap:6px}.sp-table-sort-icon{color:var(--sp-text-placeholder, #9ca3af);font-size:12px}.sp-table-th--sorted .sp-table-sort-icon{color:var(--sp-primary, #3b82f6)}.sp-table-td{padding:12px 16px;color:var(--sp-text-secondary, #374151);border-bottom:1px solid var(--sp-bg-muted, #f3f4f6)}:host([compact]) .sp-table-td{padding:8px 12px}:host([bordered]) .sp-table-th,:host([bordered]) .sp-table-td{border:1px solid var(--sp-border-subtle, #e5e7eb)}.sp-table-row--striped{background:var(--sp-bg-subtle, #f9fafb)}:host([hoverable]) .sp-table-row:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-table-empty{text-align:center;padding:32px;color:var(--sp-text-placeholder, #9ca3af);font-size:14px}.sp-table-loading{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--sp-text-muted, #6b7280)}.sp-table-th--sortable:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:-2px}.sp-table-th--sticky{position:sticky;top:0;z-index:1;background:var(--sp-table-header-bg, var(--sp-bg-subtle, #f9fafb))}.sp-table-caption{caption-side:top;padding:8px 16px;text-align:left;font-size:14px;font-weight:600;color:var(--sp-text-secondary, #374151)}.sp-table-th--checkbox,.sp-table-td--checkbox{width:40px;padding:12px 8px;text-align:center}.sp-table-row--selected{background:var(--sp-primary-bg, #eff6ff)}:host([hoverable]) .sp-table-row--selected:hover{background:var(--sp-primary-bg-hover, #dbeafe)}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button]{transition:none!important}}";
+export {
+  e as default
+};

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

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+import { SpTableColumn, SpTableSortDirection } from './sp-table.types.js';
+/**
+ * Data table component with column definitions and row data array.
+ *
+ * @element sp-table
+ *
+ * @prop {SpTableColumn[]}              columns       - Column definitions
+ * @prop {Record<string, unknown>[]}    data          - Row data
+ * @prop {boolean}                      loading       - Shows loading state
+ * @prop {boolean}                      bordered      - Adds borders to cells
+ * @prop {boolean}                      striped       - Alternates row background
+ * @prop {boolean}                      hoverable     - Highlights rows on hover
+ * @prop {boolean}                      compact       - Reduces cell padding
+ * @prop {string}                       emptyText     - Text shown when no data
+ * @prop {string}                       sortKey       - Currently sorted column key
+ * @prop {SpTableSortDirection}         sortDirection - Current sort direction
+ * @prop {boolean}                      stickyHeader  - Makes the header sticky
+ * @prop {boolean}                      selectable    - Enables row selection with checkboxes
+ * @prop {string}                       caption       - Table caption text
+ *
+ * @fires {CustomEvent<{ key: string, direction: SpTableSortDirection }>} sp-sort - Emitted when a sortable column header is clicked
+ * @fires {CustomEvent<{ indices: number[] }>} sp-selection-change - Emitted when row selection changes
+ */
+export declare class SpTableComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    columns: SpTableColumn[];
+    data: Record<string, unknown>[];
+    loading: boolean;
+    bordered: boolean;
+    striped: boolean;
+    hoverable: boolean;
+    compact: boolean;
+    emptyText: string;
+    sortKey: string;
+    sortDirection: SpTableSortDirection;
+    stickyHeader: boolean;
+    selectable: boolean;
+    caption: string;
+    selectedRows: Set<number>;
+    readonly _handleRowSelect: (rowIndex: number, checked: boolean) => void;
+    readonly _handleSelectAll: (checked: boolean) => void;
+    readonly _handleSort: (column: SpTableColumn) => void;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-table": SpTableComponent;
+    }
+}
+//# sourceMappingURL=sp-table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/sp-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,EAAE,aAAa,EAAE,CAAM;IAG9B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAM;IAGrC,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,SAAS,UAAQ;IAGjB,OAAO,UAAS;IAGhB,SAAS,SAAuB;IAGhC,OAAO,SAAM;IAGb,aAAa,EAAE,oBAAoB,CAAU;IAG7C,YAAY,UAAS;IAGrB,UAAU,UAAS;IAGnB,OAAO,SAAM;IAGb,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAa;IAEtC,QAAQ,CAAC,gBAAgB,GAAI,UAAU,MAAM,EAAE,SAAS,OAAO,UAe7D;IAEF,QAAQ,CAAC,gBAAgB,GAAI,SAAS,OAAO,UAY3C;IAEF,QAAQ,CAAC,WAAW,GAAI,QAAQ,aAAa,UAiB3C;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF"}

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

@@ -0,0 +1,92 @@
+import { unsafeCSS as c, LitElement as y } from "lit";
+import { property as s, state as h, customElement as d } from "lit/decorators.js";
+import u from "./sp-table.css.js";
+import { tableTemplate as f } from "./sp-table.template.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (o, r, i, a) => {
+  for (var p = a > 1 ? void 0 : a ? b(r, i) : r, l = o.length - 1, n; l >= 0; l--)
+    (n = o[l]) && (p = (a ? n(r, i, p) : n(p)) || p);
+  return a && p && m(r, i, p), p;
+};
+let e = class extends y {
+  constructor() {
+    super(...arguments), this.columns = [], this.data = [], this.loading = !1, this.bordered = !1, this.striped = !1, this.hoverable = !0, this.compact = !1, this.emptyText = "No data available", this.sortKey = "", this.sortDirection = "none", this.stickyHeader = !1, this.selectable = !1, this.caption = "", this.selectedRows = /* @__PURE__ */ new Set(), this._handleRowSelect = (o, r) => {
+      const i = new Set(this.selectedRows);
+      r ? i.add(o) : i.delete(o), this.selectedRows = i, this.dispatchEvent(
+        new CustomEvent("sp-selection-change", {
+          detail: { indices: Array.from(i) },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._handleSelectAll = (o) => {
+      const r = o ? new Set(this.data.map((i, a) => a)) : /* @__PURE__ */ new Set();
+      this.selectedRows = r, this.dispatchEvent(
+        new CustomEvent("sp-selection-change", {
+          detail: { indices: Array.from(r) },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._handleSort = (o) => {
+      o.sortable && (this.sortKey === o.key ? (this.sortDirection = this.sortDirection === "asc" ? "desc" : this.sortDirection === "desc" ? "none" : "asc", this.sortDirection === "none" && (this.sortKey = "")) : (this.sortKey = o.key, this.sortDirection = "asc"), this.dispatchEvent(
+        new CustomEvent("sp-sort", {
+          detail: { key: this.sortKey, direction: this.sortDirection },
+          bubbles: !0,
+          composed: !0
+        })
+      ));
+    };
+  }
+  render() {
+    return f.call(this);
+  }
+};
+e.styles = c(u);
+t([
+  s({ type: Array })
+], e.prototype, "columns", 2);
+t([
+  s({ type: Array })
+], e.prototype, "data", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "loading", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "bordered", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "striped", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "hoverable", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "compact", 2);
+t([
+  s({ type: String })
+], e.prototype, "emptyText", 2);
+t([
+  s({ type: String })
+], e.prototype, "sortKey", 2);
+t([
+  s({ type: String })
+], e.prototype, "sortDirection", 2);
+t([
+  s({ type: Boolean, reflect: !0, attribute: "sticky-header" })
+], e.prototype, "stickyHeader", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "selectable", 2);
+t([
+  s({ type: String })
+], e.prototype, "caption", 2);
+t([
+  h()
+], e.prototype, "selectedRows", 2);
+e = t([
+  d("sp-table")
+], e);
+export {
+  e as SpTableComponent
+};

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

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

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

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

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

@@ -0,0 +1,103 @@
+import { nothing as s, html as e } from "lit";
+import { classMap as h } from "lit/directives/class-map.js";
+function p() {
+  const c = this.data.length > 0 && this.selectedRows.size === this.data.length, n = this.selectedRows.size > 0 && this.selectedRows.size < this.data.length, i = this.columns.length + (this.selectable ? 1 : 0);
+  return e`
+    <div class="sp-table-wrapper">
+      <table class="sp-table">
+        ${this.caption ? e`<caption class="sp-table-caption">${this.caption}</caption>` : s}
+        <thead>
+          <tr>
+            ${this.selectable ? e`
+                  <th class="sp-table-th sp-table-th--checkbox" scope="col">
+                    <input
+                      type="checkbox"
+                      .checked=${c}
+                      .indeterminate=${n}
+                      @change=${(t) => this._handleSelectAll(
+    t.target.checked
+  )}
+                      aria-label="Select all rows"
+                    />
+                  </th>
+                ` : s}
+            ${this.columns.map(
+    (t) => e`
+                <th
+                  class=${h({
+      "sp-table-th": !0,
+      "sp-table-th--sortable": !!t.sortable,
+      "sp-table-th--sorted": this.sortKey === t.key,
+      "sp-table-th--sticky": this.stickyHeader
+    })}
+                  scope="col"
+                  style=${t.width ? `width: ${t.width}` : s}
+                  aria-sort=${t.sortable ? this.sortKey === t.key ? this.sortDirection === "asc" ? "ascending" : this.sortDirection === "desc" ? "descending" : "none" : "none" : s}
+                  @click=${() => this._handleSort(t)}
+                >
+                  <span
+                    class="sp-table-th-content"
+                    style=${t.align ? `justify-content: ${t.align === "right" ? "flex-end" : t.align === "center" ? "center" : "flex-start"}` : s}
+                  >
+                    ${t.label}
+                    ${t.sortable ? e`<span class="sp-table-sort-icon">${this.sortKey === t.key ? this.sortDirection === "asc" ? "↑" : this.sortDirection === "desc" ? "↓" : "↕" : "↕"}</span>` : s}
+                  </span>
+                </th>
+              `
+  )}
+          </tr>
+        </thead>
+        <tbody>
+          ${this.loading ? e`
+                <tr>
+                  <td colspan=${i} class="sp-table-empty">
+                    <div class="sp-table-loading">Loading...</div>
+                  </td>
+                </tr>
+              ` : this.data.length === 0 ? e`
+                  <tr>
+                    <td colspan=${i} class="sp-table-empty">${this.emptyText}</td>
+                  </tr>
+                ` : this.data.map(
+    (t, a) => e`
+                    <tr
+                      class=${h({
+      "sp-table-row": !0,
+      "sp-table-row--striped": this.striped && a % 2 === 1,
+      "sp-table-row--selected": this.selectedRows.has(a)
+    })}
+                    >
+                      ${this.selectable ? e`
+                            <td class="sp-table-td sp-table-td--checkbox">
+                              <input
+                                type="checkbox"
+                                .checked=${this.selectedRows.has(a)}
+                                @change=${(l) => this._handleRowSelect(
+      a,
+      l.target.checked
+    )}
+                                aria-label="Select row ${a + 1}"
+                              />
+                            </td>
+                          ` : s}
+                      ${this.columns.map(
+      (l) => e`
+                          <td
+                            class="sp-table-td"
+                            style=${l.align ? `text-align: ${l.align}` : s}
+                          >
+                            ${t[l.key] ?? ""}
+                          </td>
+                        `
+    )}
+                    </tr>
+                  `
+  )}
+        </tbody>
+      </table>
+    </div>
+  `;
+}
+export {
+  p as tableTemplate
+};

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

@@ -0,0 +1,24 @@
+export type SpTableSortDirection = "asc" | "desc" | "none";
+export interface SpTableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    width?: string;
+    align?: "left" | "center" | "right";
+}
+export interface SpTableProps {
+    columns: SpTableColumn[];
+    data: Record<string, unknown>[];
+    loading: boolean;
+    bordered: boolean;
+    striped: boolean;
+    hoverable: boolean;
+    compact: boolean;
+    emptyText: string;
+    sortKey: string;
+    sortDirection: SpTableSortDirection;
+    stickyHeader: boolean;
+    selectable: boolean;
+    caption: string;
+}
+//# sourceMappingURL=sp-table.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-table.types.d.ts","sourceRoot":"","sources":["../../../src/components/table/sp-table.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,oBAAoB,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB"}

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

@@ -0,0 +1,5 @@
+export { SpTabsComponent } from './sp-tabs.js';
+export { SpTabComponent } from './sp-tab.js';
+export { SpTabPanelComponent } from './sp-tab-panel.js';
+export type { SpTabsProps, SpTabProps, SpTabsPlacement } from './sp-tabs.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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