sp-component 0.0.1

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

@@ -0,0 +1,162 @@
+import { unsafeCSS as c, LitElement as d } from "lit";
+import { property as n, state as p, customElement as _ } from "lit/decorators.js";
+import y from "./sp-carousel.css.js";
+import { carouselTemplate as f } from "./sp-carousel.template.js";
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (t, s, e, r) => {
+  for (var a = r > 1 ? void 0 : r ? v(s, e) : s, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (a = (r ? h(s, e, a) : h(a)) || a);
+  return r && a && g(s, e, a), a;
+};
+let i = class extends d {
+  constructor() {
+    super(...arguments), this.currentIndex = 0, this.loop = !1, this.autoplay = !1, this.interval = 4e3, this.orientation = "horizontal", this.showDots = !0, this.showArrows = !0, this.slidesPerView = 1, this.effect = "slide", this.gap = 0, this.pauseOnHover = !1, this.label = "", this.lazyLoad = !1, this._slideCount = 0, this._isDragging = !1, this._autoplayTimer = null, this._touchStartX = 0, this._touchStartY = 0, this._dragStartX = 0, this._dragStartY = 0, this._dragCurrentX = 0, this._dragCurrentY = 0, this._dragActive = !1, this._onMouseEnter = () => {
+      this.autoplay && this.pauseOnHover && this._stopAutoplay();
+    }, this._onMouseLeave = () => {
+      this.autoplay && this.pauseOnHover && this._startAutoplay();
+    }, this._handleKeydown = (t) => {
+      this.orientation === "horizontal" ? t.key === "ArrowRight" ? (t.preventDefault(), this._next()) : t.key === "ArrowLeft" && (t.preventDefault(), this._prev()) : t.key === "ArrowDown" ? (t.preventDefault(), this._next()) : t.key === "ArrowUp" && (t.preventDefault(), this._prev()), t.key === "Home" && (t.preventDefault(), this._goTo(0)), t.key === "End" && (t.preventDefault(), this._goTo(this._getSlides().length - 1));
+    }, this._onTouchStart = (t) => {
+      var s, e;
+      this._touchStartX = ((s = t.touches[0]) == null ? void 0 : s.clientX) ?? 0, this._touchStartY = ((e = t.touches[0]) == null ? void 0 : e.clientY) ?? 0;
+    }, this._onTouchEnd = (t) => {
+      var a, l;
+      const s = (((a = t.changedTouches[0]) == null ? void 0 : a.clientX) ?? 0) - this._touchStartX, e = (((l = t.changedTouches[0]) == null ? void 0 : l.clientY) ?? 0) - this._touchStartY, r = 40;
+      this.orientation === "horizontal" && Math.abs(s) > r ? s < 0 ? this._next() : this._prev() : this.orientation === "vertical" && Math.abs(e) > r && (e < 0 ? this._next() : this._prev());
+    }, this._onMouseDown = (t) => {
+      t.button === 0 && (this._dragActive = !0, this._isDragging = !1, this._dragStartX = t.clientX, this._dragStartY = t.clientY, this._dragCurrentX = t.clientX, this._dragCurrentY = t.clientY, window.addEventListener("mousemove", this._onMouseMove), window.addEventListener("mouseup", this._onMouseUp));
+    }, this._onMouseMove = (t) => {
+      if (!this._dragActive) return;
+      this._dragCurrentX = t.clientX, this._dragCurrentY = t.clientY;
+      const s = Math.abs(this._dragCurrentX - this._dragStartX), e = Math.abs(this._dragCurrentY - this._dragStartY);
+      (s > 5 || e > 5) && (this._isDragging = !0);
+    }, this._onMouseUp = () => {
+      if (!this._dragActive || (this._dragActive = !1, this._removeDragListeners(), !this._isDragging)) return;
+      const t = this._dragCurrentX - this._dragStartX, s = this._dragCurrentY - this._dragStartY, e = 40;
+      this.orientation === "horizontal" && Math.abs(t) > e ? t < 0 ? this._next() : this._prev() : this.orientation === "vertical" && Math.abs(s) > e && (s < 0 ? this._next() : this._prev()), requestAnimationFrame(() => {
+        this._isDragging = !1;
+      });
+    };
+  }
+  render() {
+    return f.call(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown), this.autoplay && this._startAutoplay();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown), this._stopAutoplay(), this._removeDragListeners();
+  }
+  updated(t) {
+    t.has("autoplay") && (this.autoplay ? this._startAutoplay() : this._stopAutoplay()), (t.has("currentIndex") || t.has("slidesPerView") || t.has("effect") || t.has("gap")) && this._syncSlides();
+  }
+  _getSlides() {
+    return Array.from(this.querySelectorAll("sp-carousel-slide"));
+  }
+  _onSlotChange() {
+    this._slideCount = this._getSlides().length, this._syncSlides();
+  }
+  _syncSlides() {
+    const t = this._getSlides();
+    t.forEach((s, e) => {
+      const r = s, a = e === this.currentIndex, l = e >= this.currentIndex && e < this.currentIndex + this.slidesPerView;
+      if (this.lazyLoad) {
+        const h = Math.abs(e - this.currentIndex) <= 1;
+        s.querySelectorAll("img[data-src]").forEach((u) => {
+          h && u.dataset.src && (u.src = u.dataset.src, u.removeAttribute("data-src"));
+        }), s.querySelectorAll("img").forEach((u) => {
+          u.loading = h ? "eager" : "lazy";
+        });
+      }
+      if (s.setAttribute("aria-hidden", l ? "false" : "true"), s.setAttribute("aria-roledescription", "slide"), s.setAttribute("role", "group"), s.setAttribute(
+        "aria-label",
+        `Slide ${e + 1} of ${t.length}`
+      ), a ? s.setAttribute("active", "") : s.removeAttribute("active"), this.effect === "fade")
+        r.style.transform = "", r.style.opacity = a ? "1" : "0", r.style.zIndex = a ? "1" : "0";
+      else {
+        r.style.opacity = "", r.style.zIndex = "";
+        const h = this.gap ? `calc(${e - this.currentIndex} * (100% + ${this.gap}px))` : `${(e - this.currentIndex) * (100 / this.slidesPerView)}%`;
+        r.style.transform = this.orientation === "horizontal" ? `translateX(${h})` : `translateY(${h})`;
+      }
+    });
+  }
+  _goTo(t) {
+    const e = this._getSlides().length;
+    if (e === 0) return;
+    let r = t;
+    this.loop ? r = (t % e + e) % e : r = Math.max(0, Math.min(t, e - this.slidesPerView)), r !== this.currentIndex && (this.currentIndex = r, this.dispatchEvent(
+      new CustomEvent("sp-slide-change", {
+        detail: { index: this.currentIndex },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _next() {
+    this._goTo(this.currentIndex + 1);
+  }
+  _prev() {
+    this._goTo(this.currentIndex - 1);
+  }
+  // ---- Autoplay ----
+  _startAutoplay() {
+    this._stopAutoplay(), this._autoplayTimer = setInterval(() => this._next(), this.interval);
+  }
+  _stopAutoplay() {
+    this._autoplayTimer !== null && (clearInterval(this._autoplayTimer), this._autoplayTimer = null);
+  }
+  _removeDragListeners() {
+    window.removeEventListener("mousemove", this._onMouseMove), window.removeEventListener("mouseup", this._onMouseUp);
+  }
+};
+i.styles = c(y);
+o([
+  n({ type: Number, attribute: "current-index", reflect: !0 })
+], i.prototype, "currentIndex", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "loop", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "autoplay", 2);
+o([
+  n({ type: Number })
+], i.prototype, "interval", 2);
+o([
+  n({ type: String, reflect: !0 })
+], i.prototype, "orientation", 2);
+o([
+  n({ type: Boolean, attribute: "show-dots", reflect: !0 })
+], i.prototype, "showDots", 2);
+o([
+  n({ type: Boolean, attribute: "show-arrows", reflect: !0 })
+], i.prototype, "showArrows", 2);
+o([
+  n({ type: Number, attribute: "slides-per-view" })
+], i.prototype, "slidesPerView", 2);
+o([
+  n({ type: String, reflect: !0 })
+], i.prototype, "effect", 2);
+o([
+  n({ type: Number })
+], i.prototype, "gap", 2);
+o([
+  n({ type: Boolean, attribute: "pause-on-hover", reflect: !0 })
+], i.prototype, "pauseOnHover", 2);
+o([
+  n({ type: String })
+], i.prototype, "label", 2);
+o([
+  n({ type: Boolean, attribute: "lazy-load" })
+], i.prototype, "lazyLoad", 2);
+o([
+  p()
+], i.prototype, "_slideCount", 2);
+o([
+  p()
+], i.prototype, "_isDragging", 2);
+i = o([
+  _("sp-carousel")
+], i);
+export {
+  i as SpCarouselComponent
+};

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

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

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

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

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

@@ -0,0 +1,87 @@
+import { nothing as r, html as t } from "lit";
+import { repeat as a } from "lit/directives/repeat.js";
+function c() {
+  const i = this._getSlides(), s = i.length;
+  return t`
+    <div
+      class="sp-carousel"
+      role="region"
+      aria-roledescription="carousel"
+      aria-label=${this.label || "Carousel"}
+      tabindex="0"
+      @mouseenter=${this._onMouseEnter}
+      @mouseleave=${this._onMouseLeave}
+    >
+      <div
+        class="sp-carousel-track-wrapper ${this._isDragging ? "sp-carousel-track-wrapper--dragging" : ""}"
+        @touchstart=${this._onTouchStart}
+        @touchend=${this._onTouchEnd}
+        @mousedown=${this._onMouseDown}
+      >
+        <div
+          class="sp-carousel-track"
+          aria-live=${this.autoplay ? "off" : "polite"}
+        >
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+
+        ${this.showArrows ? t`
+              <button
+                class="sp-carousel-arrow sp-carousel-arrow--prev"
+                aria-label="Previous slide"
+                ?disabled=${!this.loop && this.currentIndex === 0}
+                @click=${(o) => {
+    if (this._isDragging) {
+      o.stopImmediatePropagation();
+      return;
+    }
+    this._prev();
+  }}
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                  ${this.orientation === "vertical" ? t`<polyline points="18 15 12 9 6 15"></polyline>` : t`<polyline points="15 18 9 12 15 6"></polyline>`}
+                </svg>
+              </button>
+              <button
+                class="sp-carousel-arrow sp-carousel-arrow--next"
+                aria-label="Next slide"
+                ?disabled=${!this.loop && this.currentIndex === s - 1}
+                @click=${(o) => {
+    if (this._isDragging) {
+      o.stopImmediatePropagation();
+      return;
+    }
+    this._next();
+  }}
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                  ${this.orientation === "vertical" ? t`<polyline points="6 9 12 15 18 9"></polyline>` : t`<polyline points="9 18 15 12 9 6"></polyline>`}
+                </svg>
+              </button>
+            ` : r}
+      </div>
+
+      ${this.showDots && s > 1 ? t`
+            <div class="sp-carousel-dots" role="tablist" aria-label="Slide navigation">
+              ${a(
+    i,
+    (o, e) => e,
+    (o, e) => t`
+                  <button
+                    class="sp-carousel-dot ${e === this.currentIndex ? "sp-carousel-dot--active" : ""}"
+                    role="tab"
+                    aria-label="Slide ${e + 1} of ${s}"
+                    aria-selected=${e === this.currentIndex ? "true" : "false"}
+                    tabindex=${e === this.currentIndex ? "0" : "-1"}
+                    @click=${() => this._goTo(e)}
+                  ></button>
+                `
+  )}
+            </div>
+          ` : r}
+    </div>
+  `;
+}
+export {
+  c as carouselTemplate
+};

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

@@ -0,0 +1,16 @@
+export type SpCarouselOrientation = "horizontal" | "vertical";
+export type SpCarouselEffect = "slide" | "fade";
+export interface SpCarouselProps {
+    currentIndex: number;
+    loop: boolean;
+    autoplay: boolean;
+    interval: number;
+    orientation: SpCarouselOrientation;
+    showDots: boolean;
+    showArrows: boolean;
+    slidesPerView: number;
+    effect: SpCarouselEffect;
+    gap: number;
+    pauseOnHover: boolean;
+}
+//# sourceMappingURL=sp-carousel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-carousel.types.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/sp-carousel.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,qBAAqB,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,gBAAgB,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;CACvB"}

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

@@ -0,0 +1,3 @@
+export { SpCheckboxComponent } from './sp-checkbox.js';
+export type { SpCheckboxProps, SpCheckboxSize } from './sp-checkbox.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const e = ':host{display:inline-block}.sp-checkbox-label{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}.sp-checkbox-label--disabled{opacity:.5;cursor:not-allowed}.sp-checkbox-control{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;border:2px solid var(--sp-border, #d1d5db);border-radius:3px;background:var(--sp-bg, white);transition:all .15s;margin-top:1px}.sp-checkbox-control input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:inherit;min-width:44px;min-height:44px;top:50%;left:50%;transform:translate(-50%,-50%)}.sp-checkbox-control--checked,.sp-checkbox-control--indeterminate{background:var(--sp-primary, #3b82f6);border-color:var(--sp-primary, #3b82f6)}.sp-checkbox-control:has(input:focus-visible){outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}:host([size="sm"]) .sp-checkbox-control{width:14px;height:14px}:host([size="lg"]) .sp-checkbox-control{width:20px;height:20px;border-radius:4px}.sp-checkbox-text{font-size:14px;color:var(--sp-text-secondary, #374151);line-height:1.4}:host([size="sm"]) .sp-checkbox-text{font-size:12px}:host([size="lg"]) .sp-checkbox-text{font-size:16px}.sp-checkbox-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-checkbox-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}@media(prefers-reduced-motion:reduce){.sp-checkbox-control{transition:none}}';
+export {
+  e as default
+};

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

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+import { SpCheckboxSize } from './sp-checkbox.types.js';
+/**
+ * Checkbox component with support for indeterminate state.
+ *
+ * @element sp-checkbox
+ *
+ * @prop {boolean}         checked       - Whether the checkbox is checked
+ * @prop {boolean}         indeterminate - Whether the checkbox is in indeterminate state
+ * @prop {boolean}         disabled      - Disables the checkbox
+ * @prop {boolean}         required      - Marks the checkbox as required
+ * @prop {string}          name          - Native input name
+ * @prop {string}          value         - Native input value
+ * @prop {SpCheckboxSize}  size          - Size: sm | md | lg
+ * @prop {string}          label         - Label text (uses slot if not provided)
+ * @prop {string}          error         - Error message shown below the checkbox
+ * @prop {string}          hint          - Hint text shown below the checkbox (hidden when error is set)
+ *
+ * @fires {CustomEvent<{ checked: boolean, indeterminate: boolean }>} sp-change - Emitted when the checkbox state changes
+ *
+ * @slot - Label content (used when label prop is not set)
+ */
+export declare class SpCheckboxComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    constructor();
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    size: SpCheckboxSize;
+    label: string;
+    error: string;
+    hint: string;
+    render(): import('lit-html').TemplateResult;
+    updated(): void;
+    readonly _handleChange: (e: Event) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-checkbox": SpCheckboxComponent;
+    }
+}
+//# sourceMappingURL=sp-checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/sp-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,mBAAoB,SAAQ,UAAU;;IACjD,OAAgB,MAAM,0BAAqB;IAC3C,MAAM,CAAC,cAAc,UAAQ;;IAU7B,OAAO,UAAS;IAGhB,aAAa,UAAS;IAGtB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAQ;IAGb,IAAI,EAAE,cAAc,CAAQ;IAG5B,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,IAAI,SAAM;IAED,MAAM;IAIN,OAAO,IAAI,IAAI;IASxB,QAAQ,CAAC,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAWvC;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,mBAAmB,CAAC;KACpC;CACF"}

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { nothing as e, html as t } from "lit";
+function r() {
+  const i = `sp-checkbox-label${this.disabled ? " sp-checkbox-label--disabled" : ""}`, s = `sp-checkbox-control${this.checked ? " sp-checkbox-control--checked" : ""}${this.indeterminate ? " sp-checkbox-control--indeterminate" : ""}`;
+  return t`
+    <label class=${i}>
+      <span class=${s}>
+        <input
+          type="checkbox"
+          .checked=${this.checked}
+          .indeterminate=${this.indeterminate}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          name=${this.name || e}
+          value=${this.value || e}
+          aria-invalid=${this.error ? "true" : e}
+          aria-describedby=${this.error || this.hint ? "sp-checkbox-desc" : e}
+          aria-required=${this.required ? "true" : e}
+          @change=${this._handleChange}
+        />
+        ${this.checked && !this.indeterminate ? t`<svg width="10" height="8" viewBox="0 0 10 8" fill="none" aria-hidden="true">
+              <path d="M1 4L3.5 6.5L9 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>` : e}
+        ${this.indeterminate ? t`<svg width="10" height="2" viewBox="0 0 10 2" fill="none" aria-hidden="true">
+              <path d="M1 1H9" stroke="white" stroke-width="2" stroke-linecap="round"/>
+            </svg>` : e}
+      </span>
+      ${this.label ? t`<span class="sp-checkbox-text">${this.label}</span>` : t`<slot></slot>`}
+    </label>
+    ${this.error ? t`<span id="sp-checkbox-desc" class="sp-checkbox-error" role="alert">${this.error}</span>` : e}
+    ${!this.error && this.hint ? t`<span id="sp-checkbox-desc" class="sp-checkbox-hint">${this.hint}</span>` : e}
+  `;
+}
+export {
+  r as checkboxTemplate
+};

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

@@ -0,0 +1,14 @@
+export type SpCheckboxSize = "sm" | "md" | "lg";
+export interface SpCheckboxProps {
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    size: SpCheckboxSize;
+    label: string;
+    error: string;
+    hint: string;
+}
+//# sourceMappingURL=sp-checkbox.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/sp-checkbox.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd"}

package/dist/components/checkbox-group/index.d.ts

@@ -0,0 +1,3 @@
+export { SpCheckboxGroupComponent } from './sp-checkbox-group.js';
+export type { SpCheckboxGroupProps, SpCheckboxGroupOrientation } from './sp-checkbox-group.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/components/checkbox-group/sp-checkbox-group.css.js

@@ -0,0 +1,4 @@
+const o = ':host{display:block}.sp-checkbox-group{border:none;margin:0;padding:0}.sp-checkbox-group-legend{font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:8px}:host([error]) .sp-checkbox-group-legend{color:var(--sp-error, #FF4D4F)}.sp-checkbox-group-options{display:flex;flex-direction:column;gap:8px}:host([orientation="horizontal"]) .sp-checkbox-group-options{flex-direction:row;flex-wrap:wrap;gap:16px}.sp-checkbox-group-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-checkbox-group-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}';
+export {
+  o as default
+};

package/dist/components/checkbox-group/sp-checkbox-group.d.ts

@@ -0,0 +1,55 @@
+import { LitElement } from 'lit';
+import { SpCheckboxGroupOrientation } from './sp-checkbox-group.types.js';
+/**
+ * Checkbox group component that manages a set of sp-checkbox children.
+ * Form-associated custom element.
+ *
+ * @element sp-checkbox-group
+ *
+ * @prop {string}                       values      - Comma-separated checked values
+ * @prop {string}                       name        - Base name shared across child checkboxes
+ * @prop {boolean}                      disabled    - Disables all child checkboxes
+ * @prop {boolean}                      required    - Requires at least one selection
+ * @prop {SpCheckboxGroupOrientation}   orientation - Layout direction: vertical | horizontal
+ * @prop {string}                       label       - Group label rendered as a legend
+ * @prop {string}                       hint        - Hint text (hidden when error is set)
+ * @prop {string}                       error       - Error message shown below the group
+ * @prop {number}                       min         - Minimum required selections (0 = none)
+ * @prop {number}                       max         - Maximum allowed selections (0 = unlimited)
+ *
+ * @fires {CustomEvent<{ values: string[] }>} sp-change - Emitted when the selection changes
+ *
+ * @slot - sp-checkbox elements
+ */
+export declare class SpCheckboxGroupComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    constructor();
+    values: string;
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    orientation: SpCheckboxGroupOrientation;
+    label: string;
+    hint: string;
+    error: string;
+    min: number;
+    max: number;
+    render(): import('lit-html').TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private _getValuesArray;
+    private _updateFormValue;
+    private _syncCheckboxes;
+    readonly _handleSlotChange: () => void;
+    private readonly _handleCheckboxChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-checkbox-group": SpCheckboxGroupComponent;
+    }
+}
+//# sourceMappingURL=sp-checkbox-group.d.ts.map

package/dist/components/checkbox-group/sp-checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-group/sp-checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,wBAAyB,SAAQ,UAAU;;IACtD,OAAgB,MAAM,0BAAqB;IAC3C,MAAM,CAAC,cAAc,UAAQ;;IAU7B,MAAM,SAAM;IAGZ,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,WAAW,EAAE,0BAA0B,CAAc;IAGrD,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,GAAG,SAAK;IAGR,GAAG,SAAK;IAEC,MAAM;IAIN,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOrD,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,eAAe;IAUvB,QAAQ,CAAC,iBAAiB,QAAO,IAAI,CAEnC;IAEF,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CA6BpC;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,wBAAwB,CAAC;KAC/C;CACF"}