sp-component 0.0.1

package/dist/components/form-field/sp-form-field.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+/**
+ * Form field wrapper that provides consistent label + error + hint layout.
+ *
+ * @element sp-form-field
+ *
+ * @prop {string}   label    - Label text displayed above the control
+ * @prop {string}   error    - Error message displayed below the control
+ * @prop {string}   hint     - Hint text displayed below the control (hidden when error is set)
+ * @prop {boolean}  required - Shows a required asterisk next to the label
+ * @prop {boolean}  disabled - Dims the entire field
+ * @prop {string}   labelFor - The id of the form control to associate the label with
+ *
+ * @slot - The form control(s) to wrap
+ */
+export declare class SpFormFieldComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    label: string;
+    error: string;
+    hint: string;
+    required: boolean;
+    disabled: boolean;
+    labelFor: string;
+    readonly _id: string;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-form-field": SpFormFieldComponent;
+    }
+}
+//# sourceMappingURL=sp-form-field.d.ts.map

package/dist/components/form-field/sp-form-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-form-field.d.ts","sourceRoot":"","sources":["../../../src/components/form-field/sp-form-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;;;GAaG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,0BAAqB;IAG3C,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,SAAM;IAGd,QAAQ,CAAC,GAAG,SAA0C;IAE7C,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,oBAAoB,CAAC;KACvC;CACF"}

package/dist/components/form-field/sp-form-field.js

@@ -0,0 +1,45 @@
+import { unsafeCSS as f, LitElement as m } from "lit";
+import { property as o, state as y, customElement as u } from "lit/decorators.js";
+import d from "./sp-form-field.css.js";
+import { formFieldTemplate as h } from "./sp-form-field.template.js";
+var b = Object.defineProperty, c = Object.getOwnPropertyDescriptor, t = (a, p, i, l) => {
+  for (var r = l > 1 ? void 0 : l ? c(p, i) : p, s = a.length - 1, n; s >= 0; s--)
+    (n = a[s]) && (r = (l ? n(p, i, r) : n(r)) || r);
+  return l && r && b(p, i, r), r;
+};
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.label = "", this.error = "", this.hint = "", this.required = !1, this.disabled = !1, this.labelFor = "", this._id = Math.random().toString(36).slice(2, 9);
+  }
+  render() {
+    return h.call(this);
+  }
+};
+e.styles = f(d);
+t([
+  o({ type: String })
+], e.prototype, "label", 2);
+t([
+  o({ type: String })
+], e.prototype, "error", 2);
+t([
+  o({ type: String })
+], e.prototype, "hint", 2);
+t([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "required", 2);
+t([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+t([
+  o({ type: String, attribute: "label-for" })
+], e.prototype, "labelFor", 2);
+t([
+  y()
+], e.prototype, "_id", 2);
+e = t([
+  u("sp-form-field")
+], e);
+export {
+  e as SpFormFieldComponent
+};

package/dist/components/form-field/sp-form-field.template.d.ts

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

package/dist/components/form-field/sp-form-field.template.d.ts.map

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

package/dist/components/form-field/sp-form-field.template.js

@@ -0,0 +1,22 @@
+import { nothing as s, html as i } from "lit";
+function e() {
+  const r = `sp-form-field${this.disabled ? " sp-form-field--disabled" : ""}`;
+  return i`
+    <div class=${r}>
+      ${this.label ? i`
+            <label class="sp-form-field-label" for=${this.labelFor || s}>
+              ${this.label}
+              ${this.required ? i`<span class="sp-required" aria-label="required"> *</span>` : s}
+            </label>
+          ` : s}
+      <div class="sp-form-field-control">
+        <slot></slot>
+      </div>
+      ${this.error ? i`<span id="ff-${this._id}-error" class="sp-form-field-error" role="alert">${this.error}</span>` : s}
+      ${!this.error && this.hint ? i`<span id="ff-${this._id}-hint" class="sp-form-field-hint">${this.hint}</span>` : s}
+    </div>
+  `;
+}
+export {
+  e as formFieldTemplate
+};

package/dist/components/form-field/sp-form-field.types.d.ts

@@ -0,0 +1,9 @@
+export interface SpFormFieldProps {
+    label: string;
+    error: string;
+    hint: string;
+    required: boolean;
+    disabled: boolean;
+    labelFor: string;
+}
+//# sourceMappingURL=sp-form-field.types.d.ts.map

package/dist/components/form-field/sp-form-field.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-form-field.types.d.ts","sourceRoot":"","sources":["../../../src/components/form-field/sp-form-field.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB"}

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

@@ -0,0 +1,3 @@
+export { SpGalleryComponent } from './sp-gallery.js';
+export type { SpGalleryItem, SpGalleryLayout, SpGalleryFit, SpGalleryProps } from './sp-gallery.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const e = ":host{display:block;--sp-gallery-bg: var(--sp-bg-subtle, #f8fafc);--sp-gallery-item-radius: 10px;--sp-gallery-caption-bg: rgba(0, 0, 0, .55);--sp-gallery-caption-color: #ffffff;--sp-gallery-selected-color: #6366f1;--sp-gallery-overlay-bg: rgba(0, 0, 0, .35);--sp-gallery-lightbox-bg: rgba(0, 0, 0, .92);--sp-gallery-lightbox-nav-bg: rgba(255, 255, 255, .12);--sp-gallery-lightbox-nav-hover: rgba(255, 255, 255, .22);--sp-gallery-skeleton-bg: var(--sp-border-subtle, #e2e8f0);--sp-gallery-skeleton-shine: var(--sp-bg-subtle, #f1f5f9)}.sp-gallery--grid{display:grid;grid-template-columns:repeat(var(--sp-gallery-cols, 3),1fr);gap:var(--sp-gallery-gap, 8px)}.sp-gallery--masonry{columns:var(--sp-gallery-cols, 3);column-gap:var(--sp-gallery-gap, 8px)}.sp-gallery--masonry .sp-gallery-item{break-inside:avoid;margin-bottom:var(--sp-gallery-gap, 8px)}.sp-gallery-item{position:relative;overflow:hidden;border-radius:var(--sp-gallery-item-radius);cursor:pointer;outline:none;background:var(--sp-gallery-skeleton-bg);transition:transform .18s ease,box-shadow .18s ease}.sp-gallery--grid .sp-gallery-item{aspect-ratio:var(--sp-gallery-ratio, 4/3)}.sp-gallery-item:focus-visible{outline:3px solid var(--sp-gallery-selected-color);outline-offset:2px;z-index:1}.sp-gallery-item--zoomable:hover,.sp-gallery-item--selectable:hover{transform:scale(1.02);box-shadow:0 8px 24px #00000026}.sp-gallery-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.sp-gallery--masonry .sp-gallery-img{height:auto}.sp-gallery-item:hover .sp-gallery-img{transform:scale(1.04)}.sp-gallery-item-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--sp-gallery-overlay-bg);color:#fff;opacity:0;transition:opacity .2s ease;border-radius:var(--sp-gallery-item-radius)}.sp-gallery-item:hover .sp-gallery-item-overlay{opacity:1}.sp-gallery-item-caption{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;background:var(--sp-gallery-caption-bg);color:var(--sp-gallery-caption-color);font-size:.78rem;line-height:1.4;transform:translateY(100%);transition:transform .2s ease;border-radius:0 0 var(--sp-gallery-item-radius) var(--sp-gallery-item-radius)}.sp-gallery-item:hover .sp-gallery-item-caption{transform:translateY(0)}.sp-gallery-item-checkbox{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:50%;background:#ffffffd9;border:2px solid rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .15s}.sp-gallery-item--selected .sp-gallery-item-checkbox{background:var(--sp-gallery-selected-color);border-color:var(--sp-gallery-selected-color);color:#fff;transform:scale(1.1)}.sp-gallery-item--selected{box-shadow:0 0 0 3px var(--sp-gallery-selected-color)}.sp-gallery-item--skeleton{aspect-ratio:var(--sp-gallery-ratio, 4/3);background:linear-gradient(90deg,var(--sp-gallery-skeleton-bg) 25%,var(--sp-gallery-skeleton-shine) 50%,var(--sp-gallery-skeleton-bg) 75%);background-size:200% 100%;animation:sp-gallery-shimmer 1.4s ease infinite;cursor:default}@keyframes sp-gallery-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.sp-gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;color:var(--sp-text-placeholder, #94a3b8);font-size:.9rem}.sp-gallery-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:var(--sp-gallery-lightbox-bg);display:flex;align-items:center;justify-content:center;animation:sp-gallery-lb-in .2s ease forwards}@keyframes sp-gallery-lb-in{0%{opacity:0}to{opacity:1}}.sp-gallery-lightbox-stage{position:relative;display:flex;flex-direction:column;align-items:center;max-width:min(92vw,1100px);max-height:90vh}.sp-gallery-lightbox-img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px;opacity:0;transition:opacity .25s ease;display:block}.sp-gallery-lightbox-img--loaded{opacity:1}.sp-gallery-lightbox-caption{margin:10px 0 0;color:#ffffffbf;font-size:.85rem;text-align:center}.sp-gallery-lightbox-close{position:fixed;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:10}.sp-gallery-lightbox-close:hover{background:#ffffff38}.sp-gallery-lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:2px}.sp-gallery-lightbox-counter{position:fixed;top:20px;left:50%;transform:translate(-50%);color:#ffffffa6;font-size:.82rem;letter-spacing:.05em;-webkit-user-select:none;user-select:none}.sp-gallery-lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:none;background:var(--sp-gallery-lightbox-nav-bg);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:10}.sp-gallery-lightbox-nav:hover{background:var(--sp-gallery-lightbox-nav-hover)}.sp-gallery-lightbox-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}.sp-gallery-lightbox-nav--prev{left:16px}.sp-gallery-lightbox-nav--next{right:16px}.sp-gallery-lightbox-dots{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:6px;align-items:center}.sp-gallery-lightbox-dot{width:7px;height:7px;border-radius:50%;border:none;background:#ffffff59;cursor:pointer;padding:0;transition:background .15s,transform .15s}.sp-gallery-lightbox-dot--active{background:#fff;transform:scale(1.4)}.sp-gallery-lightbox-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}.sp-gallery-lightbox-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:sp-gallery-spin .7s linear infinite;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes sp-gallery-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sp-gallery-item,.sp-gallery-img,.sp-gallery-item-caption,.sp-gallery-item-overlay,.sp-gallery-lightbox-img{transition:none}.sp-gallery-item--skeleton,.sp-gallery-lightbox,.sp-gallery-lightbox-spinner{animation:none}.sp-gallery-item:hover,.sp-gallery-item:hover .sp-gallery-img{transform:none}}";
+export {
+  e as default
+};

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

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+import { SpGalleryFit, SpGalleryItem, SpGalleryLayout } from './sp-gallery.types.js';
+/**
+ * Gallery component with grid/masonry layout and built-in lightbox.
+ *
+ * @element sp-gallery
+ *
+ * @prop {SpGalleryItem[]}  items           - Array of image items
+ * @prop {number}           columns         - Number of grid columns (default 3)
+ * @prop {number}           gap             - Gap between items in px (default 8)
+ * @prop {SpGalleryLayout}  layout          - "grid" | "masonry"
+ * @prop {SpGalleryFit}     fit             - "cover" | "contain"
+ * @prop {string}           aspectRatio     - Thumbnail aspect ratio e.g. "4/3" (grid only)
+ * @prop {boolean}          lightbox        - Enable lightbox on click
+ * @prop {boolean}          selectable      - Enable multi-selection mode
+ * @prop {number[]}         selectedIndices - Currently selected indices
+ * @prop {boolean}          loading         - Show skeleton placeholders
+ * @prop {number}           skeletonCount   - Number of skeleton tiles when loading
+ *
+ * @fires {CustomEvent<{ index: number; item: SpGalleryItem }>}   sp-item-click  - Fired when an item is clicked
+ * @fires {CustomEvent<{ indices: number[] }>}                    sp-selection-change - Fired when selection changes
+ * @fires {CustomEvent<{ index: number }>}                        sp-lightbox-open  - Lightbox opened
+ * @fires {CustomEvent<{ index: number }>}                        sp-lightbox-close - Lightbox closed
+ */
+export declare class SpGalleryComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    items: SpGalleryItem[];
+    columns: number;
+    gap: number;
+    layout: SpGalleryLayout;
+    fit: SpGalleryFit;
+    aspectRatio: string;
+    lightbox: boolean;
+    selectable: boolean;
+    selectedIndices: number[];
+    loading: boolean;
+    skeletonCount: number;
+    _lightboxOpen: boolean;
+    _lightboxIndex: number;
+    _lightboxLoaded: boolean;
+    private _boundKeydown;
+    render(): import('lit-html').TemplateResult<1>;
+    _onItemClick(index: number): void;
+    _toggleSelection(index: number): void;
+    clearSelection(): void;
+    selectAll(): void;
+    _openLightbox(index: number): void;
+    _closeLightbox(): void;
+    _lightboxPrev(): void;
+    _lightboxNext(): void;
+    private _onLightboxKey;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-gallery": SpGalleryComponent;
+    }
+}
+//# sourceMappingURL=sp-gallery.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-gallery.d.ts","sourceRoot":"","sources":["../../../src/components/gallery/sp-gallery.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE1F;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAAqB;IAG3C,KAAK,EAAE,aAAa,EAAE,CAAM;IAG5B,OAAO,SAAK;IAGZ,GAAG,SAAK;IAGR,MAAM,EAAE,eAAe,CAAU;IAGjC,GAAG,EAAE,YAAY,CAAW;IAG5B,WAAW,SAAS;IAGpB,QAAQ,UAAQ;IAGhB,UAAU,UAAS;IAGnB,eAAe,EAAE,MAAM,EAAE,CAAM;IAG/B,OAAO,UAAS;IAGhB,aAAa,SAAK;IAKlB,aAAa,UAAS;IAGtB,cAAc,SAAK;IAGnB,eAAe,UAAS;IAIxB,OAAO,CAAC,aAAa,CAAgD;IAE5D,MAAM;IAMf,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAsBjC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAarC,cAAc,IAAI,IAAI;IAStB,SAAS,IAAI,IAAI;IAYjB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAYlC,cAAc,IAAI,IAAI;IAUtB,aAAa,IAAI,IAAI;IAMrB,aAAa,IAAI,IAAI;IAMrB,OAAO,CAAC,cAAc;IAOb,oBAAoB,IAAI,IAAI;CAItC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF"}

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

@@ -0,0 +1,132 @@
+import { unsafeCSS as d, LitElement as a } from "lit";
+import { property as o, state as c, customElement as b } from "lit/decorators.js";
+import u from "./sp-gallery.css.js";
+import { galleryTemplate as g } from "./sp-gallery.template.js";
+var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (t, i, l, h) => {
+  for (var n = h > 1 ? void 0 : h ? m(i, l) : i, r = t.length - 1, p; r >= 0; r--)
+    (p = t[r]) && (n = (h ? p(i, l, n) : p(n)) || n);
+  return h && n && y(i, l, n), n;
+};
+let e = class extends a {
+  constructor() {
+    super(...arguments), this.items = [], this.columns = 3, this.gap = 8, this.layout = "grid", this.fit = "cover", this.aspectRatio = "4/3", this.lightbox = !0, this.selectable = !1, this.selectedIndices = [], this.loading = !1, this.skeletonCount = 9, this._lightboxOpen = !1, this._lightboxIndex = 0, this._lightboxLoaded = !1, this._boundKeydown = (t) => this._onLightboxKey(t);
+  }
+  render() {
+    return g.call(this);
+  }
+  // ---- Item click ----
+  _onItemClick(t) {
+    const i = this.items[t];
+    if (i) {
+      if (this.dispatchEvent(new CustomEvent("sp-item-click", {
+        detail: { index: t, item: i },
+        bubbles: !0,
+        composed: !0
+      })), this.selectable) {
+        this._toggleSelection(t);
+        return;
+      }
+      this.lightbox && this._openLightbox(t);
+    }
+  }
+  // ---- Selection ----
+  _toggleSelection(t) {
+    const i = this.selectedIndices.includes(t) ? this.selectedIndices.filter((l) => l !== t) : [...this.selectedIndices, t];
+    this.selectedIndices = i, this.dispatchEvent(new CustomEvent("sp-selection-change", {
+      detail: { indices: i },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  clearSelection() {
+    this.selectedIndices = [], this.dispatchEvent(new CustomEvent("sp-selection-change", {
+      detail: { indices: [] },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  selectAll() {
+    const t = this.items.map((i, l) => l);
+    this.selectedIndices = t, this.dispatchEvent(new CustomEvent("sp-selection-change", {
+      detail: { indices: t },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  // ---- Lightbox ----
+  _openLightbox(t) {
+    this._lightboxIndex = t, this._lightboxLoaded = !1, this._lightboxOpen = !0, window.addEventListener("keydown", this._boundKeydown), this.dispatchEvent(new CustomEvent("sp-lightbox-open", {
+      detail: { index: t },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _closeLightbox() {
+    this._lightboxOpen = !1, window.removeEventListener("keydown", this._boundKeydown), this.dispatchEvent(new CustomEvent("sp-lightbox-close", {
+      detail: { index: this._lightboxIndex },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _lightboxPrev() {
+    this.items.length !== 0 && (this._lightboxLoaded = !1, this._lightboxIndex = (this._lightboxIndex - 1 + this.items.length) % this.items.length);
+  }
+  _lightboxNext() {
+    this.items.length !== 0 && (this._lightboxLoaded = !1, this._lightboxIndex = (this._lightboxIndex + 1) % this.items.length);
+  }
+  _onLightboxKey(t) {
+    this._lightboxOpen && (t.key === "Escape" ? (t.preventDefault(), this._closeLightbox()) : t.key === "ArrowLeft" ? (t.preventDefault(), this._lightboxPrev()) : t.key === "ArrowRight" && (t.preventDefault(), this._lightboxNext()));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("keydown", this._boundKeydown);
+  }
+};
+e.styles = d(u);
+s([
+  o({ type: Array })
+], e.prototype, "items", 2);
+s([
+  o({ type: Number })
+], e.prototype, "columns", 2);
+s([
+  o({ type: Number })
+], e.prototype, "gap", 2);
+s([
+  o({ type: String })
+], e.prototype, "layout", 2);
+s([
+  o({ type: String })
+], e.prototype, "fit", 2);
+s([
+  o({ type: String, attribute: "aspect-ratio" })
+], e.prototype, "aspectRatio", 2);
+s([
+  o({ type: Boolean })
+], e.prototype, "lightbox", 2);
+s([
+  o({ type: Boolean })
+], e.prototype, "selectable", 2);
+s([
+  o({ type: Array, attribute: "selected-indices" })
+], e.prototype, "selectedIndices", 2);
+s([
+  o({ type: Boolean })
+], e.prototype, "loading", 2);
+s([
+  o({ type: Number, attribute: "skeleton-count" })
+], e.prototype, "skeletonCount", 2);
+s([
+  c()
+], e.prototype, "_lightboxOpen", 2);
+s([
+  c()
+], e.prototype, "_lightboxIndex", 2);
+s([
+  c()
+], e.prototype, "_lightboxLoaded", 2);
+e = s([
+  b("sp-gallery")
+], e);
+export {
+  e as SpGalleryComponent
+};

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

@@ -0,0 +1,3 @@
+import { SpGalleryComponent } from './sp-gallery.js';
+export declare function galleryTemplate(this: SpGalleryComponent): import('lit-html').TemplateResult<1>;
+//# sourceMappingURL=sp-gallery.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-gallery.template.d.ts","sourceRoot":"","sources":["../../../src/components/gallery/sp-gallery.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAmM1D,wBAAgB,eAAe,CAAC,IAAI,EAAE,kBAAkB,wCAmBvD"}

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

@@ -0,0 +1,205 @@
+import { html as l, nothing as t } from "lit";
+import { repeat as d } from "lit/directives/repeat.js";
+import { styleMap as s } from "lit/directives/style-map.js";
+function p() {
+  return l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" width="20" height="20">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>`;
+}
+function y() {
+  return l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" width="28" height="28">
+    <polyline points="15 18 9 12 15 6"></polyline>
+  </svg>`;
+}
+function x() {
+  return l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" width="28" height="28">
+    <polyline points="9 18 15 12 9 6"></polyline>
+  </svg>`;
+}
+function b() {
+  return l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true" width="14" height="14">
+    <polyline points="20 6 9 17 4 12"></polyline>
+  </svg>`;
+}
+function u(e) {
+  const a = s({
+    "--sp-gallery-cols": String(e.columns),
+    "--sp-gallery-gap": `${e.gap}px`
+  });
+  return l`
+    <div class="sp-gallery sp-gallery--grid" style=${a}>
+      ${Array.from({ length: e.skeletonCount }, (i, r) => l`
+        <div
+          class="sp-gallery-item sp-gallery-item--skeleton"
+          style=${s({ "--sp-gallery-ratio": e.aspectRatio })}
+          aria-hidden="true"
+          key=${r}
+        ></div>
+      `)}
+    </div>
+  `;
+}
+function v(e) {
+  if (!e._lightboxOpen) return t;
+  const a = e.items[e._lightboxIndex];
+  if (!a) return t;
+  const i = e.items.length, r = e._lightboxIndex + 1;
+  return l`
+    <div
+      class="sp-gallery-lightbox"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Image viewer"
+      @click=${(n) => {
+    n.target === n.currentTarget && e._closeLightbox();
+  }}
+    >
+      <!-- Close -->
+      <button
+        class="sp-gallery-lightbox-close"
+        aria-label="Close lightbox"
+        @click=${() => e._closeLightbox()}
+      >${p()}</button>
+
+      <!-- Counter -->
+      <div class="sp-gallery-lightbox-counter" aria-live="polite">
+        ${r} / ${i}
+      </div>
+
+      <!-- Prev -->
+      ${i > 1 ? l`
+        <button
+          class="sp-gallery-lightbox-nav sp-gallery-lightbox-nav--prev"
+          aria-label="Previous image"
+          @click=${() => e._lightboxPrev()}
+        >${y()}</button>
+      ` : t}
+
+      <!-- Image -->
+      <div class="sp-gallery-lightbox-stage">
+        ${e._lightboxLoaded ? t : l`<div class="sp-gallery-lightbox-spinner" aria-hidden="true"></div>`}
+        <img
+          class="sp-gallery-lightbox-img ${e._lightboxLoaded ? "sp-gallery-lightbox-img--loaded" : ""}"
+          src=${a.src}
+          alt=${a.alt ?? ""}
+          @load=${() => {
+    e._lightboxLoaded = !0;
+  }}
+        />
+        ${a.caption ? l`<p class="sp-gallery-lightbox-caption">${a.caption}</p>` : t}
+      </div>
+
+      <!-- Next -->
+      ${i > 1 ? l`
+        <button
+          class="sp-gallery-lightbox-nav sp-gallery-lightbox-nav--next"
+          aria-label="Next image"
+          @click=${() => e._lightboxNext()}
+        >${x()}</button>
+      ` : t}
+
+      <!-- Dot strip -->
+      ${i > 1 && i <= 20 ? l`
+        <div class="sp-gallery-lightbox-dots" role="tablist" aria-label="Image navigation">
+          ${e.items.map((n, o) => l`
+            <button
+              class="sp-gallery-lightbox-dot ${o === e._lightboxIndex ? "sp-gallery-lightbox-dot--active" : ""}"
+              role="tab"
+              aria-selected=${o === e._lightboxIndex ? "true" : "false"}
+              aria-label=${`Image ${o + 1}`}
+              @click=${() => {
+    e._lightboxLoaded = !1, e._lightboxIndex = o;
+  }}
+            ></button>
+          `)}
+        </div>
+      ` : t}
+    </div>
+  `;
+}
+function $(e) {
+  const a = s({
+    "--sp-gallery-cols": String(e.columns),
+    "--sp-gallery-gap": `${e.gap}px`
+  });
+  return l`
+    <div
+      class="sp-gallery sp-gallery--${e.layout}"
+      style=${a}
+      role="list"
+      aria-label="Image gallery"
+    >
+      ${d(
+    e.items,
+    (i, r) => `${r}-${i.src}`,
+    (i, r) => {
+      const n = e.selectedIndices.includes(r), o = i.thumb ?? i.src, c = s({
+        "--sp-gallery-ratio": e.layout === "grid" ? e.aspectRatio : void 0
+      });
+      return l`
+            <div
+              class="sp-gallery-item
+                ${n ? "sp-gallery-item--selected" : ""}
+                ${e.selectable ? "sp-gallery-item--selectable" : ""}
+                ${e.lightbox && !e.selectable ? "sp-gallery-item--zoomable" : ""}"
+              role="listitem"
+              style=${c}
+              tabindex="0"
+              aria-label=${i.alt ?? `Image ${r + 1}`}
+              aria-pressed=${e.selectable ? n ? "true" : "false" : t}
+              @click=${() => e._onItemClick(r)}
+              @keydown=${(g) => {
+        (g.key === "Enter" || g.key === " ") && (g.preventDefault(), e._onItemClick(r));
+      }}
+            >
+              <img
+                class="sp-gallery-img"
+                src=${o}
+                alt=${i.alt ?? ""}
+                loading="lazy"
+                style=${s({ objectFit: e.fit })}
+              />
+              ${e.selectable ? l`
+                <div class="sp-gallery-item-checkbox" aria-hidden="true">
+                  ${n ? b() : t}
+                </div>
+              ` : t}
+              ${i.caption ? l`
+                <div class="sp-gallery-item-caption">${i.caption}</div>
+              ` : t}
+              ${e.lightbox && !e.selectable ? l`
+                <div class="sp-gallery-item-overlay" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
+                    <circle cx="11" cy="11" r="8"></circle>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    <line x1="11" y1="8" x2="11" y2="14"></line>
+                    <line x1="8" y1="11" x2="14" y2="11"></line>
+                  </svg>
+                </div>
+              ` : t}
+            </div>
+          `;
+    }
+  )}
+    </div>
+  `;
+}
+function k() {
+  return this.loading ? u(this) : this.items.length === 0 ? l`
+      <div class="sp-gallery-empty" role="status">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="40" height="40" aria-hidden="true">
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+          <circle cx="8.5" cy="8.5" r="1.5"></circle>
+          <polyline points="21 15 16 10 5 21"></polyline>
+        </svg>
+        <span>No images</span>
+      </div>
+    ` : l`
+    ${$(this)}
+    ${v(this)}
+  `;
+}
+export {
+  k as galleryTemplate
+};

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

@@ -0,0 +1,22 @@
+export interface SpGalleryItem {
+    src: string;
+    thumb?: string;
+    alt?: string;
+    caption?: string;
+}
+export type SpGalleryLayout = "grid" | "masonry";
+export type SpGalleryFit = "cover" | "contain";
+export interface SpGalleryProps {
+    items: SpGalleryItem[];
+    columns: number;
+    gap: number;
+    layout: SpGalleryLayout;
+    fit: SpGalleryFit;
+    aspectRatio: string;
+    lightbox: boolean;
+    selectable: boolean;
+    selectedIndices: number[];
+    loading: boolean;
+    skeletonCount: number;
+}
+//# sourceMappingURL=sp-gallery.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-gallery.types.d.ts","sourceRoot":"","sources":["../../../src/components/gallery/sp-gallery.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,eAAe,CAAC;IACxB,GAAG,EAAE,YAAY,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;CACvB"}

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

@@ -0,0 +1,3 @@
+export { SpIconComponent } from './sp-icon.js';
+export type { SpIconProps, SpIconSize } from './sp-icon.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const t = ':host{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}:host([size="xs"]){width:12px;height:12px}:host([size="sm"]){width:16px;height:16px}:host([size="md"]){width:24px;height:24px}:host([size="lg"]){width:32px;height:32px}:host([size="xl"]){width:48px;height:48px}svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}@media(prefers-reduced-motion:reduce){:host{transition:none!important}}';
+export {
+  t as default
+};

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import { SpIconSize } from './sp-icon.types.js';
+/**
+ * Inline SVG icon component with built-in icon set.
+ *
+ * @element sp-icon
+ *
+ * @prop {string}      name   - Icon name (check, close, arrow-right, etc.)
+ * @prop {SpIconSize}  size   - Size: xs | sm | md | lg | xl
+ * @prop {string}      label  - Accessible aria-label (when empty, aria-hidden="true")
+ * @prop {string}      color  - CSS color value for the icon stroke
+ *
+ * @cssprop [--sp-icon-color=currentColor] - Icon stroke color
+ */
+export declare class SpIconComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    name: string;
+    size: SpIconSize;
+    label: string;
+    color: string;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-icon": SpIconComponent;
+    }
+}
+//# sourceMappingURL=sp-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/sp-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;;;;;;;GAWG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,EAAE,MAAM,CAAM;IAGlB,IAAI,EAAE,UAAU,CAAQ;IAGxB,KAAK,EAAE,MAAM,CAAM;IAGnB,KAAK,EAAE,MAAM,CAAM;IAEV,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,eAAe,CAAC;KAC5B;CACF"}