sp-component 0.0.1

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

@@ -0,0 +1,222 @@
+import { nothing as i, html as a } from "lit";
+import { repeat as w } from "lit/directives/repeat.js";
+function c() {
+  return a`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
+    <polyline points="15 18 9 12 15 6"></polyline>
+  </svg>`;
+}
+function o() {
+  return a`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
+    <polyline points="9 18 15 12 9 6"></polyline>
+  </svg>`;
+}
+function $(e, n, s, r) {
+  const l = /* @__PURE__ */ new Date(), v = e._getWeekdayHeaders(), g = e._getDaysInGrid(n), _ = e._getLocale(), d = new Intl.DateTimeFormat(_, { month: "long", year: "numeric" }).format(
+    n
+  ), m = [
+    "sp-calendar-grid",
+    e._slideDir === "left" ? "sp-calendar-grid--slide-left" : "",
+    e._slideDir === "right" ? "sp-calendar-grid--slide-right" : ""
+  ].filter(Boolean).join(" ");
+  return a`
+    <!-- Header -->
+    <div class="sp-calendar-header" part="header">
+      ${s ? a`<button
+            class="sp-calendar-nav-btn"
+            aria-label="Previous month"
+            ?disabled=${e.disabled}
+            @click=${() => e._prevMonth()}
+          >${c()}</button>` : a`<span class="sp-calendar-nav-placeholder"></span>`}
+
+      <button
+        class="sp-calendar-title"
+        aria-label=${`${d} — click to select month`}
+        ?disabled=${e.disabled}
+        @click=${() => e._view = "months"}
+      >
+        ${d}
+      </button>
+
+      ${r ? a`<button
+            class="sp-calendar-nav-btn"
+            aria-label="Next month"
+            ?disabled=${e.disabled}
+            @click=${() => e._nextMonth()}
+          >${o()}</button>` : a`<span class="sp-calendar-nav-placeholder"></span>`}
+    </div>
+
+    <!-- ARIA grid wrapper -->
+    <div role="grid" aria-label=${d}>
+      <!-- Weekday headers -->
+      <div role="rowgroup">
+        <div class="sp-calendar-weekdays" role="row">
+          ${v.map(
+    (t) => a`<div class="sp-calendar-weekday" role="columnheader" aria-label=${t}>${t}</div>`
+  )}
+        </div>
+      </div>
+
+      <!-- Day grid -->
+      <div
+        class=${m}
+        role="rowgroup"
+      >
+      ${w(
+    g,
+    (t) => e._toISO(t.date),
+    (t) => {
+      e._toISO(t.date);
+      const b = e._getDayClasses(t.date, t.isCurrentMonth), p = b.includes("sp-calendar-day--selected"), y = e._isSameDay(t.date, l), u = e.disabled || e._isOutOfRange(t.date) || e._isDisabledDate(t.date), k = e._focusedDate ? e._isSameDay(t.date, e._focusedDate) : !1;
+      return a`
+            <button
+              class=${b}
+              part="day"
+              role="gridcell"
+              aria-label=${new Intl.DateTimeFormat(e._getLocale(), {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      }).format(t.date)}
+              aria-selected=${p ? "true" : "false"}
+              aria-disabled=${u ? "true" : "false"}
+              aria-current=${y ? "date" : i}
+              tabindex=${k || p && !e._focusedDate ? "0" : "-1"}
+              ?disabled=${u}
+              @click=${() => e._selectDate(t.date)}
+              @mouseover=${() => e._setHoverDate(t.date)}
+              @mouseleave=${() => e._setHoverDate(null)}
+            >
+              ${t.date.getDate()}
+            </button>
+          `;
+    }
+  )}
+      </div>
+    </div>
+  `;
+}
+function f(e) {
+  const n = e._viewDate.getFullYear(), s = e._viewDate.getMonth();
+  return a`
+    <!-- Header -->
+    <div class="sp-calendar-header" part="header">
+      <button
+        class="sp-calendar-nav-btn"
+        aria-label="Previous year"
+        ?disabled=${e.disabled}
+        @click=${() => e._prevYear()}
+      >${c()}</button>
+
+      <button
+        class="sp-calendar-title"
+        aria-label=${`${n} — click to select year`}
+        ?disabled=${e.disabled}
+        @click=${() => e._view = "years"}
+      >${n}</button>
+
+      <button
+        class="sp-calendar-nav-btn"
+        aria-label="Next year"
+        ?disabled=${e.disabled}
+        @click=${() => e._nextYear()}
+      >${o()}</button>
+    </div>
+
+    <!-- Month grid -->
+    <div class="sp-calendar-month-grid">
+      ${Array.from({ length: 12 }, (r, l) => a`
+        <button
+          class="sp-calendar-month-btn ${l === s ? "sp-calendar-month-btn--active" : ""}"
+          ?disabled=${e.disabled}
+          @click=${() => e._selectMonth(l)}
+        >
+          ${e._getMonthName(l)}
+        </button>
+      `)}
+    </div>
+  `;
+}
+function D(e) {
+  const n = e._getYearRange(), s = e._viewDate.getFullYear();
+  return a`
+    <!-- Header -->
+    <div class="sp-calendar-header" part="header">
+      <button
+        class="sp-calendar-nav-btn"
+        aria-label="Previous years"
+        ?disabled=${e.disabled}
+        @click=${() => e._prevYearRange()}
+      >${c()}</button>
+
+      <span class="sp-calendar-title sp-calendar-title--static">
+        ${n[0]} – ${n[n.length - 1]}
+      </span>
+
+      <button
+        class="sp-calendar-nav-btn"
+        aria-label="Next years"
+        ?disabled=${e.disabled}
+        @click=${() => e._nextYearRange()}
+      >${o()}</button>
+    </div>
+
+    <!-- Year grid -->
+    <div class="sp-calendar-year-grid">
+      ${n.map(
+    (r) => a`
+          <button
+            class="sp-calendar-year-btn ${r === s ? "sp-calendar-year-btn--active" : ""}"
+            ?disabled=${e.disabled}
+            @click=${() => e._selectYear(r)}
+          >${r}</button>
+        `
+  )}
+    </div>
+  `;
+}
+function h(e) {
+  const n = e.mode === "range";
+  return a`
+    <div class="sp-calendar-presets">
+      <button class="sp-calendar-preset-btn" @click=${() => e._selectToday()}>Today</button>
+      <button class="sp-calendar-preset-btn" @click=${() => e._selectYesterday()}>Yesterday</button>
+      ${n ? a`
+          <button class="sp-calendar-preset-btn" @click=${() => e._selectThisWeek()}>This week</button>
+          <button class="sp-calendar-preset-btn" @click=${() => e._selectLast7Days()}>Last 7 days</button>
+          <button class="sp-calendar-preset-btn" @click=${() => e._selectThisMonth()}>This month</button>
+          <button class="sp-calendar-preset-btn" @click=${() => e._selectLast30Days()}>Last 30 days</button>
+        ` : i}
+    </div>
+  `;
+}
+function x() {
+  const e = Math.min(Math.max(this.months ?? 1, 1), 3);
+  return a`
+    <div
+      class="sp-calendar${this.showPresets ? " sp-calendar--with-presets" : ""}"
+      part="calendar"
+      role="application"
+      aria-label="Calendar"
+    >
+      ${this.showPresets ? h(this) : i}
+      <div class="sp-calendar-body">
+        ${this._view === "days" ? e > 1 ? a`
+                <div class="sp-calendar-months">
+                  ${Array.from({ length: e }, (n, s) => {
+    const r = this._getViewDateForOffset(s);
+    return a`
+                      <div class="sp-calendar-month-panel">
+                        ${$(this, r, s === 0, s === e - 1)}
+                      </div>
+                    `;
+  })}
+                </div>
+              ` : $(this, this._viewDate, !0, !0) : this._view === "months" ? f(this) : D(this)}
+      </div>
+    </div>
+  `;
+}
+export {
+  x as calendarTemplate
+};

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

@@ -0,0 +1,22 @@
+export type SpCalendarMode = "single" | "range" | "multiple";
+export type SpCalendarView = "days" | "months" | "years";
+export type SpCalendarSlideDir = "left" | "right" | "";
+export interface SpCalendarProps {
+    value: string;
+    valueStart: string;
+    valueEnd: string;
+    values: string;
+    min: string;
+    max: string;
+    locale: string;
+    firstDayOfWeek: number;
+    disabled: boolean;
+    readonly: boolean;
+    mode: SpCalendarMode;
+    events: string;
+    disabledDates: string;
+    disabledDaysOfWeek: string;
+    months: number;
+    showPresets: boolean;
+}
+//# sourceMappingURL=sp-calendar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-calendar.types.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/sp-calendar.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzD,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;AAEvD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;CACtB"}

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

@@ -0,0 +1,3 @@
+export { SpCardComponent } from './sp-card.js';
+export type { SpCardProps, SpCardShadow } from './sp-card.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const o = ':host{display:block;width:100%;box-sizing:border-box}.sp-card{position:relative;background:var(--sp-bg, white);border-radius:8px;overflow:hidden;box-sizing:border-box;transition:box-shadow .2s,transform .2s}.sp-card--clickable{cursor:pointer}.sp-card--clickable:hover{box-shadow:0 8px 20px #00000026!important;transform:translateY(-1px)}.sp-card--clickable:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}.sp-card-link{display:block;color:inherit;text-decoration:none}.sp-card-loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#e5e7ebb3 25%,#f3f4f6b3,#e5e7ebb3 75%);background-size:200% 100%;animation:sp-card-shimmer 1.5s infinite;border-radius:inherit;z-index:1}@keyframes sp-card-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(max-width:640px){:host{display:block;width:100%}}:host([shadow="none"]) .sp-card{box-shadow:none}:host([shadow="sm"]) .sp-card{box-shadow:0 1px 3px #0000001a}:host([shadow="md"]) .sp-card{box-shadow:0 4px 6px #0000001a}:host([shadow="lg"]) .sp-card{box-shadow:0 10px 15px #0000001a}:host([bordered]) .sp-card{border:1px solid var(--sp-border-subtle, #e5e7eb)}::slotted([slot="image"]){display:block;width:100%}::slotted([slot="header"]){display:block;padding-bottom:12px;border-bottom:1px solid var(--sp-bg-muted, #f3f4f6);margin-bottom:12px;font-weight:600;font-size:16px;color:var(--sp-text, #111827)}::slotted([slot="footer"]){display:block;padding-top:12px;border-top:1px solid var(--sp-bg-muted, #f3f4f6);margin-top:12px}@media(prefers-reduced-motion:reduce){:host{transition:none!important}.sp-card{transition:none!important}.sp-card-loading-overlay{animation:none;background:#e5e7ebb3}button,a,[role=button]{transition:none!important}}';
+export {
+  o as default
+};

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

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+import { SpCardShadow } from './sp-card.types.js';
+/**
+ * A flexible card container component.
+ *
+ * @element sp-card
+ *
+ * @prop {SpCardShadow} shadow    - Shadow depth: none | sm | md | lg
+ * @prop {boolean}      bordered  - Adds a border around the card
+ * @prop {string}       padding   - Inner padding (CSS value)
+ * @prop {boolean}      clickable - Hover elevation, cursor pointer, emits sp-click, keyboard accessible
+ * @prop {boolean}      loading   - Show overlay shimmer skeleton on content
+ * @prop {string}       href      - When set, wraps card content in an anchor for navigation
+ *
+ * @fires {CustomEvent} sp-click - Emitted when a clickable card is activated
+ *
+ * @slot         - Default content area
+ * @slot image   - Image placed at the top of the card
+ * @slot header  - Card header content
+ * @slot footer  - Card footer content
+ */
+export declare class SpCardComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    shadow: SpCardShadow;
+    bordered: boolean;
+    padding: string;
+    clickable: boolean;
+    loading: boolean;
+    href: string;
+    readonly _handleClick: () => void;
+    readonly _handleKeydown: (e: KeyboardEvent) => void;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-card": SpCardComponent;
+    }
+}
+//# sourceMappingURL=sp-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-card.d.ts","sourceRoot":"","sources":["../../../src/components/card/sp-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAqB;IAG3C,MAAM,EAAE,YAAY,CAAQ;IAG5B,QAAQ,UAAS;IAGjB,OAAO,SAAU;IAGjB,SAAS,UAAS;IAGlB,OAAO,UAAS;IAGhB,IAAI,SAAM;IAEV,QAAQ,CAAC,YAAY,QAAO,IAAI,CAI9B;IAEF,QAAQ,CAAC,cAAc,GAAI,GAAG,aAAa,KAAG,IAAI,CAKhD;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,eAAe,CAAC;KAC5B;CACF"}

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

@@ -0,0 +1,46 @@
+import { unsafeCSS as c, LitElement as f } from "lit";
+import { property as p, customElement as h } from "lit/decorators.js";
+import d from "./sp-card.css.js";
+import { cardTemplate as y } from "./sp-card.template.js";
+var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, r = (o, s, i, l) => {
+  for (var t = l > 1 ? void 0 : l ? u(s, i) : s, n = o.length - 1, a; n >= 0; n--)
+    (a = o[n]) && (t = (l ? a(s, i, t) : a(t)) || t);
+  return l && t && m(s, i, t), t;
+};
+let e = class extends f {
+  constructor() {
+    super(...arguments), this.shadow = "sm", this.bordered = !1, this.padding = "16px", this.clickable = !1, this.loading = !1, this.href = "", this._handleClick = () => {
+      this.clickable && this.dispatchEvent(new CustomEvent("sp-click", { bubbles: !0, composed: !0 }));
+    }, this._handleKeydown = (o) => {
+      this.clickable && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this._handleClick());
+    };
+  }
+  render() {
+    return y.call(this);
+  }
+};
+e.styles = c(d);
+r([
+  p({ type: String, reflect: !0 })
+], e.prototype, "shadow", 2);
+r([
+  p({ type: Boolean, reflect: !0 })
+], e.prototype, "bordered", 2);
+r([
+  p({ type: String })
+], e.prototype, "padding", 2);
+r([
+  p({ type: Boolean, reflect: !0 })
+], e.prototype, "clickable", 2);
+r([
+  p({ type: Boolean, reflect: !0 })
+], e.prototype, "loading", 2);
+r([
+  p({ type: String })
+], e.prototype, "href", 2);
+e = r([
+  h("sp-card")
+], e);
+export {
+  e as SpCardComponent
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-card.template.d.ts","sourceRoot":"","sources":["../../../src/components/card/sp-card.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,eAAe,GAAG,cAAc,CA2BlE"}

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

@@ -0,0 +1,30 @@
+import { nothing as i, html as l } from "lit";
+import { classMap as a } from "lit/directives/class-map.js";
+function c() {
+  const t = l`
+    <slot name="image"></slot>
+    <slot name="header"></slot>
+    <slot></slot>
+    <slot name="footer"></slot>
+    ${this.loading ? l`<div class="sp-card-loading-overlay" aria-hidden="true"></div>` : i}
+  `;
+  return l`
+    <div
+      class=${a({
+    "sp-card": !0,
+    "sp-card--clickable": this.clickable,
+    "sp-card--loading": this.loading
+  })}
+      style="padding: ${this.padding}"
+      role=${this.clickable && !this.href ? "button" : i}
+      tabindex=${this.clickable && !this.href ? "0" : i}
+      @click=${this.clickable ? this._handleClick : i}
+      @keydown=${this.clickable ? this._handleKeydown : i}
+    >
+      ${this.href ? l`<a class="sp-card-link" href=${this.href}>${t}</a>` : t}
+    </div>
+  `;
+}
+export {
+  c as cardTemplate
+};

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

@@ -0,0 +1,10 @@
+export type SpCardShadow = "none" | "sm" | "md" | "lg";
+export interface SpCardProps {
+    shadow: SpCardShadow;
+    bordered: boolean;
+    padding: string;
+    clickable: boolean;
+    loading: boolean;
+    href: string;
+}
+//# sourceMappingURL=sp-card.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-card.types.d.ts","sourceRoot":"","sources":["../../../src/components/card/sp-card.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd"}

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

@@ -0,0 +1,4 @@
+export { SpCarouselComponent } from './sp-carousel.js';
+export { SpCarouselSlideComponent } from './sp-carousel-slide.js';
+export type { SpCarouselProps, SpCarouselOrientation } from './sp-carousel.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const t = ":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%;flex-shrink:0;will-change:transform,opacity}:host([active]){position:relative}@media(prefers-reduced-motion:reduce){:host{transition:none}}";
+export {
+  t as default
+};

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

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+/**
+ * A single slide inside sp-carousel.
+ *
+ * @element sp-carousel-slide
+ *
+ * @slot - Slide content
+ */
+export declare class SpCarouselSlideComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-carousel-slide": SpCarouselSlideComponent;
+    }
+}
+//# sourceMappingURL=sp-carousel-slide.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-carousel-slide.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/sp-carousel-slide.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;GAMG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IACtD,OAAgB,MAAM,0BAAqB;IAElC,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,wBAAwB,CAAC;KAC/C;CACF"}

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

@@ -0,0 +1,20 @@
+import { unsafeCSS as p, LitElement as a, html as u } from "lit";
+import { customElement as f } from "lit/decorators.js";
+import i from "./sp-carousel-slide.css.js";
+var c = Object.getOwnPropertyDescriptor, v = (s, l, n, o) => {
+  for (var e = o > 1 ? void 0 : o ? c(l, n) : l, r = s.length - 1, m; r >= 0; r--)
+    (m = s[r]) && (e = m(e) || e);
+  return e;
+};
+let t = class extends a {
+  render() {
+    return u`<slot></slot>`;
+  }
+};
+t.styles = p(i);
+t = v([
+  f("sp-carousel-slide")
+], t);
+export {
+  t as SpCarouselSlideComponent
+};

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

@@ -0,0 +1,4 @@
+const r = ':host{display:block;width:100%}.sp-carousel{display:flex;flex-direction:column;gap:12px;width:100%}.sp-carousel-track-wrapper{overflow:hidden;position:relative;width:100%;border-radius:8px;cursor:grab;-webkit-user-select:none;user-select:none}.sp-carousel-track-wrapper--dragging,.sp-carousel-track-wrapper:active{cursor:grabbing}.sp-carousel-track{position:relative;width:100%;height:100%}::slotted(sp-carousel-slide){transition:transform .4s cubic-bezier(.25,.46,.45,.94)}:host([effect="fade"]) ::slotted(sp-carousel-slide){transition:opacity .5s ease,transform 0s;position:absolute!important;top:0;left:0;width:100%;height:100%}:host([effect="fade"]) ::slotted(sp-carousel-slide[active]){position:relative!important}.sp-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background:#ffffffd9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--sp-text-secondary, #374151);cursor:pointer;box-shadow:0 2px 8px #00000026;transition:background .2s,transform .2s,box-shadow .2s,opacity .2s;opacity:.7}.sp-carousel-track-wrapper:hover .sp-carousel-arrow{opacity:1}.sp-carousel-arrow:hover:not(:disabled){background:#fffffffa;box-shadow:0 4px 12px #0003;transform:translateY(-50%) scale(1.08)}.sp-carousel-arrow:focus-visible{outline:2px solid #6366f1;outline-offset:2px;opacity:1}.sp-carousel-arrow:disabled{opacity:.2;cursor:not-allowed}.sp-carousel-arrow svg{width:18px;height:18px}.sp-carousel-arrow--prev{left:12px}.sp-carousel-arrow--next{right:12px}:host([orientation="vertical"]) .sp-carousel-arrow--prev{top:12px;left:50%;transform:translate(-50%)}:host([orientation="vertical"]) .sp-carousel-arrow--next{top:auto;bottom:12px;left:50%;transform:translate(-50%)}:host([orientation="vertical"]) .sp-carousel-arrow:hover:not(:disabled){transform:translate(-50%) scale(1.08)}.sp-carousel-dots{display:flex;justify-content:center;align-items:center;gap:6px}.sp-carousel-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:#cbd5e1;cursor:pointer;transition:background .2s,transform .2s,width .2s}.sp-carousel-dot:hover{background:#94a3b8}.sp-carousel-dot--active{background:#6366f1;width:24px;border-radius:4px;transform:none}.sp-carousel-dot:focus-visible{outline:2px solid #6366f1;outline-offset:2px}@media(max-width:480px){.sp-carousel-arrow{width:32px;height:32px}.sp-carousel-arrow svg{width:14px;height:14px}.sp-carousel-arrow--prev{left:6px}.sp-carousel-arrow--next{right:6px}.sp-carousel-dots{gap:4px}.sp-carousel-dot{width:6px;height:6px}.sp-carousel-dot--active{width:18px}}@media(prefers-reduced-motion:reduce){.sp-carousel-arrow,.sp-carousel-dot{transition:none}::slotted(sp-carousel-slide){transition:none}:host([effect="fade"]) ::slotted(sp-carousel-slide){transition:none}}';
+export {
+  r as default
+};

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

@@ -0,0 +1,78 @@
+import { LitElement } from 'lit';
+import { SpCarouselOrientation, SpCarouselEffect } from './sp-carousel.types.js';
+/**
+ * Carousel/slider component for cycling through a set of slides.
+ *
+ * @element sp-carousel
+ *
+ * @prop {number}                currentIndex  - Index of the currently visible slide (default 0)
+ * @prop {boolean}               loop          - Whether to wrap around at the ends
+ * @prop {boolean}               autoplay      - Automatically advances slides
+ * @prop {number}                interval      - Autoplay interval in ms (default 4000)
+ * @prop {SpCarouselOrientation} orientation   - Slide direction: horizontal | vertical
+ * @prop {boolean}               showDots      - Show dot indicators
+ * @prop {boolean}               showArrows    - Show prev/next arrow buttons
+ * @prop {number}                slidesPerView - How many slides are visible at once (default 1)
+ * @prop {SpCarouselEffect}      effect        - Transition effect: slide | fade
+ * @prop {number}                gap           - Gap in px between slides (default 0)
+ * @prop {boolean}               pauseOnHover  - Pause autoplay when mouse is over the carousel
+ * @prop {string}                label         - Accessible label for the carousel region
+ * @prop {boolean}               lazyLoad      - Only render/load images for current slide ±1
+ *
+ * @fires {CustomEvent<{ index: number }>} sp-slide-change - Emitted when the active slide changes
+ *
+ * @slot - sp-carousel-slide elements
+ */
+export declare class SpCarouselComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    currentIndex: number;
+    loop: boolean;
+    autoplay: boolean;
+    interval: number;
+    orientation: SpCarouselOrientation;
+    showDots: boolean;
+    showArrows: boolean;
+    slidesPerView: number;
+    effect: SpCarouselEffect;
+    gap: number;
+    pauseOnHover: boolean;
+    label: string;
+    lazyLoad: boolean;
+    private _slideCount;
+    _isDragging: boolean;
+    private _autoplayTimer;
+    private _touchStartX;
+    private _touchStartY;
+    private _dragStartX;
+    private _dragStartY;
+    private _dragCurrentX;
+    private _dragCurrentY;
+    private _dragActive;
+    render(): import('lit-html').TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    _getSlides(): Element[];
+    _onSlotChange(): void;
+    private _syncSlides;
+    _goTo(index: number): void;
+    _next(): void;
+    _prev(): void;
+    private _startAutoplay;
+    private _stopAutoplay;
+    readonly _onMouseEnter: () => void;
+    readonly _onMouseLeave: () => void;
+    private readonly _handleKeydown;
+    readonly _onTouchStart: (e: TouchEvent) => void;
+    readonly _onTouchEnd: (e: TouchEvent) => void;
+    readonly _onMouseDown: (e: MouseEvent) => void;
+    private readonly _onMouseMove;
+    private readonly _onMouseUp;
+    private _removeDragListeners;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-carousel": SpCarouselComponent;
+    }
+}
+//# sourceMappingURL=sp-carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-carousel.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/sp-carousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAEtF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAqB;IAG3C,YAAY,SAAK;IAGjB,IAAI,UAAS;IAGb,QAAQ,UAAS;IAGjB,QAAQ,SAAQ;IAGhB,WAAW,EAAE,qBAAqB,CAAgB;IAGlD,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,aAAa,SAAK;IAGlB,MAAM,EAAE,gBAAgB,CAAW;IAGnC,GAAG,SAAK;IAGR,YAAY,UAAS;IAGrB,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,OAAO,CAAC,WAAW,CAAK;IAGxB,WAAW,UAAS;IAEpB,OAAO,CAAC,cAAc,CAA+C;IACrE,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,WAAW,CAAS;IAEnB,MAAM;IAIN,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAcrD,UAAU,IAAI,OAAO,EAAE;IAIvB,aAAa,IAAI,IAAI;IAKrB,OAAO,CAAC,WAAW;IAyDnB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAuB1B,KAAK,IAAI,IAAI;IAIb,KAAK,IAAI,IAAI;IAMb,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,aAAa;IAOrB,QAAQ,CAAC,aAAa,QAAO,IAAI,CAE/B;IAEF,QAAQ,CAAC,aAAa,QAAO,IAAI,CAE/B;IAIF,OAAO,CAAC,QAAQ,CAAC,cAAc,CAU7B;IAIF,QAAQ,CAAC,aAAa,GAAI,GAAG,UAAU,KAAG,IAAI,CAG5C;IAEF,QAAQ,CAAC,WAAW,GAAI,GAAG,UAAU,KAAG,IAAI,CAU1C;IAIF,QAAQ,CAAC,YAAY,GAAI,GAAG,UAAU,KAAG,IAAI,CAW3C;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAO3B;IAEF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAmBzB;IAEF,OAAO,CAAC,oBAAoB;CAI7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,mBAAmB,CAAC;KACpC;CACF"}