sp-component 0.0.1

package/dist/components/scroll-area/sp-scroll-area.css.js

@@ -0,0 +1,4 @@
+const o = ':host{display:block}.sp-scroll-area{position:relative;overflow:hidden;width:100%;height:100%}.sp-scroll-area-viewport{width:100%;height:100%;overflow:auto;scrollbar-width:none}.sp-scroll-area-viewport::-webkit-scrollbar{display:none}.sp-scroll-area-viewport--smooth{scroll-behavior:smooth}.sp-scroll-area--vertical .sp-scroll-area-viewport{overflow-x:hidden;overflow-y:auto}.sp-scroll-area--horizontal .sp-scroll-area-viewport{overflow-x:auto;overflow-y:hidden}.sp-scroll-area--both .sp-scroll-area-viewport{overflow:auto}.sp-scroll-area-scrollbar{position:absolute;border-radius:3px;background:transparent}.sp-scroll-area-scrollbar--vertical{right:2px;top:2px;bottom:2px;width:6px}.sp-scroll-area-scrollbar--horizontal{left:2px;right:2px;bottom:2px;height:6px}.sp-scroll-area-thumb{position:absolute;background:#0000004d;border-radius:3px;cursor:pointer;transition:background .2s,opacity .2s}.sp-scroll-area-thumb--vertical{left:0;right:0}.sp-scroll-area-thumb--horizontal{top:0;bottom:0}.sp-scroll-area-thumb:hover{background:#00000080}:host([scrollbar="auto"]) .sp-scroll-area-thumb{opacity:0}:host([scrollbar="auto"]) .sp-scroll-area--scrolling .sp-scroll-area-thumb,:host([scrollbar="auto"]) .sp-scroll-area:hover .sp-scroll-area-thumb{opacity:1}:host([scrollbar="always"]) .sp-scroll-area-thumb{opacity:1}:host([scrollbar="never"]) .sp-scroll-area-scrollbar{display:none}';
+export {
+  o as default
+};

package/dist/components/scroll-area/sp-scroll-area.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+import { SpScrollAreaOrientation, SpScrollAreaScrollbar } from './sp-scroll-area.types.js';
+/**
+ * Custom scroll area with styled scrollbars.
+ *
+ * @element sp-scroll-area
+ *
+ * @prop {SpScrollAreaOrientation} orientation   - "vertical" | "horizontal" | "both"
+ * @prop {SpScrollAreaScrollbar}   scrollbar     - "auto" | "always" | "never"
+ * @prop {string}                  maxHeight     - CSS max-height value
+ * @prop {string}                  maxWidth      - CSS max-width value
+ * @prop {number}                  hideDelay     - Delay in ms before auto-hiding scrollbar (default 1000)
+ * @prop {boolean}                 smoothScroll  - Enable smooth scroll behaviour
+ *
+ * @fires {CustomEvent<{ scrollTop: number; scrollLeft: number }>} sp-scroll - Emitted on scroll
+ *
+ * @slot - Scrollable content
+ */
+export declare class SpScrollAreaComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    orientation: SpScrollAreaOrientation;
+    scrollbar: SpScrollAreaScrollbar;
+    maxHeight: string;
+    maxWidth: string;
+    hideDelay: number;
+    smoothScroll: boolean;
+    _thumbHeight: number;
+    _thumbTop: number;
+    _thumbWidth: number;
+    _thumbLeft: number;
+    _scrolling: boolean;
+    private _scrollTimeout;
+    private _resizeObserver;
+    private _dragStartY;
+    private _dragStartScrollTop;
+    private _dragStartX;
+    private _dragStartScrollLeft;
+    private _dragAxis;
+    private _getViewport;
+    _onScroll: () => void;
+    private _updateThumbs;
+    _startThumbDrag: (e: PointerEvent) => void;
+    private _onThumbMove;
+    private _onThumbUp;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-scroll-area": SpScrollAreaComponent;
+    }
+}
+//# sourceMappingURL=sp-scroll-area.d.ts.map

package/dist/components/scroll-area/sp-scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/sp-scroll-area.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,2BAA2B,CAAC;AAEnC;;;;;;;;;;;;;;;GAeG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAAqB;IAG3C,WAAW,EAAE,uBAAuB,CAAc;IAGlD,SAAS,EAAE,qBAAqB,CAAU;IAG1C,SAAS,SAAM;IAGf,QAAQ,SAAM;IAGd,SAAS,SAAQ;IAGjB,YAAY,UAAS;IAGrB,YAAY,SAAO;IAGnB,SAAS,SAAK;IAGd,WAAW,SAAO;IAGlB,UAAU,SAAK;IAGf,UAAU,UAAS;IAEnB,OAAO,CAAC,cAAc,CAA8C;IACpE,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,mBAAmB,CAAK;IAChC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,oBAAoB,CAAK;IACjC,OAAO,CAAC,SAAS,CAAyC;IAE1D,OAAO,CAAC,YAAY;IAQpB,SAAS,QAAO,IAAI,CAuBlB;IAEF,OAAO,CAAC,aAAa;IA6BrB,eAAe,GAAI,GAAG,YAAY,KAAG,IAAI,CAuBvC;IAEF,OAAO,CAAC,YAAY,CAiBlB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEO,YAAY;IAaZ,oBAAoB;IAMpB,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,qBAAqB,CAAC;KACzC;CACF"}

package/dist/components/scroll-area/sp-scroll-area.js

@@ -0,0 +1,121 @@
+import { unsafeCSS as p, LitElement as u } from "lit";
+import { property as c, state as n, customElement as _ } from "lit/decorators.js";
+import m from "./sp-scroll-area.css.js";
+import { scrollAreaTemplate as d } from "./sp-scroll-area.template.js";
+var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, h = (t, i, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? g(i, e) : i, l = t.length - 1, a; l >= 0; l--)
+    (a = t[l]) && (r = (o ? a(i, e, r) : a(r)) || r);
+  return o && r && b(i, e, r), r;
+};
+let s = class extends u {
+  constructor() {
+    super(...arguments), this.orientation = "vertical", this.scrollbar = "auto", this.maxHeight = "", this.maxWidth = "", this.hideDelay = 1e3, this.smoothScroll = !1, this._thumbHeight = 100, this._thumbTop = 0, this._thumbWidth = 100, this._thumbLeft = 0, this._scrolling = !1, this._scrollTimeout = null, this._resizeObserver = null, this._dragStartY = 0, this._dragStartScrollTop = 0, this._dragStartX = 0, this._dragStartScrollLeft = 0, this._dragAxis = "vertical", this._onScroll = () => {
+      this._updateThumbs(), this._scrolling = !0, this._scrollTimeout !== null && clearTimeout(this._scrollTimeout), this._scrollTimeout = setTimeout(() => {
+        this._scrolling = !1;
+      }, this.hideDelay);
+      const t = this._getViewport();
+      t && this.dispatchEvent(
+        new CustomEvent("sp-scroll", {
+          detail: {
+            scrollTop: t.scrollTop,
+            scrollLeft: t.scrollLeft
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._startThumbDrag = (t) => {
+      t.preventDefault(), t.target.setPointerCapture(t.pointerId);
+      const i = t.target.classList.contains(
+        "sp-scroll-area-thumb--vertical"
+      );
+      this._dragAxis = i ? "vertical" : "horizontal";
+      const e = this._getViewport();
+      e && (this._dragStartY = t.clientY, this._dragStartScrollTop = e.scrollTop, this._dragStartX = t.clientX, this._dragStartScrollLeft = e.scrollLeft, t.target.addEventListener("pointermove", this._onThumbMove), t.target.addEventListener(
+        "pointerup",
+        this._onThumbUp,
+        { once: !0 }
+      ));
+    }, this._onThumbMove = (t) => {
+      const i = this._getViewport();
+      if (i)
+        if (this._dragAxis === "vertical") {
+          const e = t.clientY - this._dragStartY, { scrollHeight: o, clientHeight: r } = i, l = e / (r * (this._thumbHeight / 100));
+          i.scrollTop = this._dragStartScrollTop + l * (o - r);
+        } else {
+          const e = t.clientX - this._dragStartX, { scrollWidth: o, clientWidth: r } = i, l = e / (r * (this._thumbWidth / 100));
+          i.scrollLeft = this._dragStartScrollLeft + l * (o - r);
+        }
+    }, this._onThumbUp = (t) => {
+      t.target.removeEventListener("pointermove", this._onThumbMove);
+    };
+  }
+  _getViewport() {
+    var t;
+    return ((t = this.shadowRoot) == null ? void 0 : t.querySelector(
+      ".sp-scroll-area-viewport"
+    )) ?? null;
+  }
+  _updateThumbs() {
+    const t = this._getViewport();
+    if (!t) return;
+    const { scrollTop: i, scrollHeight: e, clientHeight: o, scrollLeft: r, scrollWidth: l, clientWidth: a } = t;
+    e > 0 && (this._thumbHeight = Math.max(
+      10,
+      o / e * 100
+    ), this._thumbTop = e > o ? i / (e - o) * (100 - this._thumbHeight) : 0), l > 0 && (this._thumbWidth = Math.max(10, a / l * 100), this._thumbLeft = l > a ? r / (l - a) * (100 - this._thumbWidth) : 0);
+  }
+  firstUpdated() {
+    const t = this._getViewport();
+    t && (typeof ResizeObserver < "u" && (this._resizeObserver = new ResizeObserver(() => {
+      this._updateThumbs();
+    }), this._resizeObserver.observe(t)), this._updateThumbs());
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._resizeObserver) == null || t.disconnect(), this._scrollTimeout !== null && clearTimeout(this._scrollTimeout);
+  }
+  render() {
+    return d.call(this);
+  }
+};
+s.styles = p(m);
+h([
+  c({ type: String, reflect: !0 })
+], s.prototype, "orientation", 2);
+h([
+  c({ type: String, reflect: !0 })
+], s.prototype, "scrollbar", 2);
+h([
+  c({ type: String, attribute: "max-height" })
+], s.prototype, "maxHeight", 2);
+h([
+  c({ type: String, attribute: "max-width" })
+], s.prototype, "maxWidth", 2);
+h([
+  c({ type: Number, attribute: "hide-delay" })
+], s.prototype, "hideDelay", 2);
+h([
+  c({ type: Boolean, attribute: "smooth-scroll" })
+], s.prototype, "smoothScroll", 2);
+h([
+  n()
+], s.prototype, "_thumbHeight", 2);
+h([
+  n()
+], s.prototype, "_thumbTop", 2);
+h([
+  n()
+], s.prototype, "_thumbWidth", 2);
+h([
+  n()
+], s.prototype, "_thumbLeft", 2);
+h([
+  n()
+], s.prototype, "_scrolling", 2);
+s = h([
+  _("sp-scroll-area")
+], s);
+export {
+  s as SpScrollAreaComponent
+};

package/dist/components/scroll-area/sp-scroll-area.template.d.ts

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

package/dist/components/scroll-area/sp-scroll-area.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-scroll-area.template.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/sp-scroll-area.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,qBAAqB,GAC1B,cAAc,CA4ChB"}

package/dist/components/scroll-area/sp-scroll-area.template.js

@@ -0,0 +1,42 @@
+import { nothing as t, html as s } from "lit";
+function i() {
+  const l = [
+    this.maxHeight ? `max-height:${this.maxHeight};` : "",
+    this.maxWidth ? `max-width:${this.maxWidth};` : ""
+  ].filter(Boolean).join("");
+  return s`
+    <div
+      class="sp-scroll-area sp-scroll-area--${this.orientation} ${this._scrolling ? "sp-scroll-area--scrolling" : ""}"
+      style=${l || t}
+    >
+      <div
+        class="sp-scroll-area-viewport${this.smoothScroll ? " sp-scroll-area-viewport--smooth" : ""}"
+        @scroll=${this._onScroll}
+      >
+        <slot></slot>
+      </div>
+
+      ${this.orientation !== "horizontal" ? s`
+            <div class="sp-scroll-area-scrollbar sp-scroll-area-scrollbar--vertical">
+              <div
+                class="sp-scroll-area-thumb sp-scroll-area-thumb--vertical"
+                style="height: ${this._thumbHeight}%; top: ${this._thumbTop}%"
+                @pointerdown=${this._startThumbDrag}
+              ></div>
+            </div>
+          ` : t}
+      ${this.orientation !== "vertical" ? s`
+            <div class="sp-scroll-area-scrollbar sp-scroll-area-scrollbar--horizontal">
+              <div
+                class="sp-scroll-area-thumb sp-scroll-area-thumb--horizontal"
+                style="width: ${this._thumbWidth}%; left: ${this._thumbLeft}%"
+                @pointerdown=${this._startThumbDrag}
+              ></div>
+            </div>
+          ` : t}
+    </div>
+  `;
+}
+export {
+  i as scrollAreaTemplate
+};

package/dist/components/scroll-area/sp-scroll-area.types.d.ts

@@ -0,0 +1,9 @@
+export type SpScrollAreaOrientation = "vertical" | "horizontal" | "both";
+export type SpScrollAreaScrollbar = "auto" | "always" | "never";
+export interface SpScrollAreaProps {
+    orientation: SpScrollAreaOrientation;
+    scrollbar: SpScrollAreaScrollbar;
+    maxHeight: string;
+    maxWidth: string;
+}
+//# sourceMappingURL=sp-scroll-area.types.d.ts.map

package/dist/components/scroll-area/sp-scroll-area.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-scroll-area.types.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/sp-scroll-area.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,uBAAuB,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,uBAAuB,CAAC;IACrC,SAAS,EAAE,qBAAqB,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB"}

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

@@ -0,0 +1,3 @@
+export { SpSelectComponent } from './sp-select.js';
+export type { SpSelectProps, SpSelectOption, SpSelectSize } from './sp-select.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const e = ':host{display:block;font-family:inherit}.sp-select-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-required{color:var(--sp-error, #FF4D4F)}.sp-select-container{position:relative;display:flex;align-items:center}select{width:100%;padding:8px 36px 8px 12px;border:1px solid var(--sp-border, #d1d5db);border-radius:4px;background:var(--sp-bg, white);font-size:14px;font-family:inherit;color:var(--sp-text, #111827);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;outline:none;transition:border-color .2s}select:focus-visible{border-color:var(--sp-primary, #3b82f6);outline:2px solid var(--sp-primary-focus, rgba(59, 130, 246, .2));outline-offset:-1px}.sp-select-container--error select{border-color:var(--sp-error, #FF4D4F)}.sp-select-container--error select:focus-visible{outline-color:var(--sp-error-focus, rgba(255, 77, 79, .2))}.sp-select-arrow{position:absolute;right:12px;pointer-events:none;color:var(--sp-text-muted, #6b7280);font-size:12px}:host([size="sm"]) select{padding:6px 32px 6px 8px;font-size:12px}:host([size="lg"]) select{padding:12px 40px 12px 16px;font-size:16px}:host([disabled]) select{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}.sp-select-count-badge{display:inline-block;margin-top:4px;padding:2px 8px;background:var(--sp-primary-bg, #eff6ff);color:var(--sp-primary, #3b82f6);border-radius:9999px;font-size:12px;font-weight:500}.sp-select-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-select-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}@media(max-width:479px){:host{width:100%}.sp-select-wrapper{width:100%}.sp-select-container{width:100%;box-sizing:border-box}select{width:100%}}@media(prefers-reduced-motion:reduce){select{transition:none}}';
+export {
+  e as default
+};

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

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+import { SpSelectSize, SpSelectOption } from './sp-select.types.js';
+/**
+ * Reusable select component compatible with any web framework.
+ *
+ * @element sp-select
+ *
+ * @prop {string}            value       - Currently selected value
+ * @prop {string}            placeholder - Placeholder option text (disabled, selected by default when no value)
+ * @prop {boolean}           disabled    - Disables the select
+ * @prop {boolean}           required    - Marks the select as required
+ * @prop {string}            name        - Native select name
+ * @prop {SpSelectSize}      size        - Size: sm | md | lg
+ * @prop {boolean}           multiple    - Allows multiple selections
+ * @prop {SpSelectOption[]}  options     - Array of option objects with value, label and optional disabled
+ * @prop {string}            error       - Error message shown below the select
+ * @prop {string}            hint        - Hint text shown below the select (when no error)
+ * @prop {string}            label       - Label text shown above the select
+ *
+ * @fires {CustomEvent<{ value: string }>} sp-change - Emitted on selection change
+ * @fires {CustomEvent}                    sp-focus  - Emitted on focus
+ * @fires {CustomEvent}                    sp-blur   - Emitted on blur
+ *
+ * @csspart select - The inner <select> element
+ */
+export declare class SpSelectComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    constructor();
+    value: string;
+    placeholder: string;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    size: SpSelectSize;
+    multiple: boolean;
+    maxSelections: number;
+    _selectedValues: string[];
+    options: SpSelectOption[];
+    error: string;
+    hint: string;
+    label: string;
+    render(): import('lit-html').TemplateResult;
+    updated(changedProperties: Map<string, unknown>): void;
+    formResetCallback(): void;
+    readonly _handleChange: (e: Event) => void;
+    readonly _handleFocus: () => boolean;
+    readonly _handleBlur: () => boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-select": SpSelectComponent;
+    }
+}
+//# sourceMappingURL=sp-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-select.d.ts","sourceRoot":"","sources":["../../../src/components/select/sp-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;;IAC/C,OAAgB,MAAM,0BAAqB;IAC3C,MAAM,CAAC,cAAc,UAAQ;;IAU7B,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,IAAI,EAAE,YAAY,CAAQ;IAG1B,QAAQ,UAAS;IAGjB,aAAa,SAAK;IAGlB,eAAe,EAAE,MAAM,EAAE,CAAM;IAG/B,OAAO,EAAE,cAAc,EAAE,CAAM;IAG/B,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAEF,MAAM;IAIN,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAaxD,iBAAiB,IAAI,IAAI;IAMzB,QAAQ,CAAC,aAAa,GAAI,GAAG,KAAK,UA2BhC;IAEF,QAAQ,CAAC,YAAY,gBAGjB;IAEJ,QAAQ,CAAC,WAAW,gBAGhB;CACL;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,98 @@
+import { unsafeCSS as v, LitElement as y } from "lit";
+import { property as i, state as f, customElement as m } from "lit/decorators.js";
+import _ from "./sp-select.css.js";
+import { selectTemplate as S } from "./sp-select.template.js";
+var C = Object.defineProperty, E = Object.getOwnPropertyDescriptor, c = (e) => {
+  throw TypeError(e);
+}, l = (e, t, s, a) => {
+  for (var o = a > 1 ? void 0 : a ? E(t, s) : t, h = e.length - 1, u; h >= 0; h--)
+    (u = e[h]) && (o = (a ? u(t, s, o) : u(o)) || o);
+  return a && o && C(t, s, o), o;
+}, d = (e, t, s) => t.has(e) || c("Cannot " + s), n = (e, t, s) => (d(e, t, "read from private field"), s ? s.call(e) : t.get(e)), V = (e, t, s) => t.has(e) ? c("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), b = (e, t, s, a) => (d(e, t, "write to private field"), t.set(e, s), s), p;
+let r = class extends y {
+  constructor() {
+    super(), V(this, p), this.value = "", this.placeholder = "", this.disabled = !1, this.required = !1, this.name = "", this.size = "md", this.multiple = !1, this.maxSelections = 0, this._selectedValues = [], this.options = [], this.error = "", this.hint = "", this.label = "", this._handleChange = (e) => {
+      const t = e.target;
+      if (this.multiple) {
+        const s = [...t.options].filter((a) => a.selected).map((a) => a.value);
+        if (this.maxSelections > 0 && s.length > this.maxSelections) {
+          const a = this._selectedValues;
+          [...t.options].forEach((o) => {
+            o.selected = a.includes(o.value);
+          });
+          return;
+        }
+        this._selectedValues = s, this.value = s.join(",");
+      } else
+        this.value = t.value;
+      this.dispatchEvent(
+        new CustomEvent("sp-change", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._handleFocus = () => this.dispatchEvent(
+      new CustomEvent("sp-focus", { bubbles: !0, composed: !0 })
+    ), this._handleBlur = () => this.dispatchEvent(
+      new CustomEvent("sp-blur", { bubbles: !0, composed: !0 })
+    ), b(this, p, this.attachInternals());
+  }
+  render() {
+    return S.call(this);
+  }
+  updated(e) {
+    (e.has("value") || e.has("_selectedValues")) && n(this, p).setFormValue(this.value), (e.has("value") || e.has("required")) && (this.required && !this.value ? n(this, p).setValidity({ valueMissing: !0 }, "Please select an option") : n(this, p).setValidity({}));
+  }
+  formResetCallback() {
+    this.value = "", this._selectedValues = [], n(this, p).setFormValue("");
+  }
+};
+p = /* @__PURE__ */ new WeakMap();
+r.styles = v(_);
+r.formAssociated = !0;
+l([
+  i({ type: String })
+], r.prototype, "value", 2);
+l([
+  i({ type: String })
+], r.prototype, "placeholder", 2);
+l([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+l([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "required", 2);
+l([
+  i({ type: String })
+], r.prototype, "name", 2);
+l([
+  i({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+l([
+  i({ type: Boolean })
+], r.prototype, "multiple", 2);
+l([
+  i({ type: Number })
+], r.prototype, "maxSelections", 2);
+l([
+  f()
+], r.prototype, "_selectedValues", 2);
+l([
+  i({ type: Array })
+], r.prototype, "options", 2);
+l([
+  i({ type: String })
+], r.prototype, "error", 2);
+l([
+  i({ type: String })
+], r.prototype, "hint", 2);
+l([
+  i({ type: String })
+], r.prototype, "label", 2);
+r = l([
+  m("sp-select")
+], r);
+export {
+  r as SpSelectComponent
+};

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

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

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

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

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

@@ -0,0 +1,64 @@
+import { nothing as t, html as s } from "lit";
+import { classMap as c } from "lit/directives/class-map.js";
+function u() {
+  const a = /* @__PURE__ */ new Map();
+  for (const e of this.options) {
+    const i = e.group;
+    a.has(i) || a.set(i, []), a.get(i).push(e);
+  }
+  const n = this.options.some((e) => e.group), r = this._selectedValues.length;
+  return s`
+    <div class="sp-select-wrapper">
+      ${this.label ? s`<label class="sp-select-label"
+            >${this.label}${this.required ? s`<span class="sp-required"> *</span>` : t}</label
+          >` : t}
+      <div
+        class=${c({
+    "sp-select-container": !0,
+    "sp-select-container--error": !!this.error
+  })}
+      >
+        <select
+          part="select"
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          ?multiple=${this.multiple}
+          name=${this.name || t}
+          aria-invalid=${this.error ? "true" : t}
+          aria-describedby=${this.error || this.hint ? "sp-select-desc" : t}
+          @change=${this._handleChange}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+        >
+          ${this.placeholder ? s`<option value="" disabled ?selected=${!this.value}>${this.placeholder}</option>` : t}
+          ${n ? [...a.entries()].map(
+    ([e, i]) => e ? s`<optgroup label=${e}>
+                      ${i.map((l) => s`<option
+                        value=${l.value}
+                        ?disabled=${l.disabled ?? !1}
+                        ?selected=${this.multiple ? this._selectedValues.includes(l.value) : l.value === this.value}
+                      >${l.label}</option>`)}
+                    </optgroup>` : i.map((l) => s`<option
+                      value=${l.value}
+                      ?disabled=${l.disabled ?? !1}
+                      ?selected=${this.multiple ? this._selectedValues.includes(l.value) : l.value === this.value}
+                    >${l.label}</option>`)
+  ) : this.options.map(
+    (e) => s`<option
+                    value=${e.value}
+                    ?disabled=${e.disabled ?? !1}
+                    ?selected=${this.multiple ? this._selectedValues.includes(e.value) : e.value === this.value}
+                  >${e.label}</option>`
+  )}
+        </select>
+        ${this.multiple ? t : s`<span class="sp-select-arrow" aria-hidden="true">▾</span>`}
+      </div>
+      ${this.multiple && r > 0 ? s`<span class="sp-select-count-badge">${r} selected</span>` : t}
+      ${this.error ? s`<span id="sp-select-desc" class="sp-select-error" role="alert">${this.error}</span>` : t}
+      ${!this.error && this.hint ? s`<span id="sp-select-desc" class="sp-select-hint">${this.hint}</span>` : t}
+    </div>
+  `;
+}
+export {
+  u as selectTemplate
+};

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

@@ -0,0 +1,21 @@
+export type SpSelectSize = "sm" | "md" | "lg";
+export interface SpSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    group?: string;
+}
+export interface SpSelectProps {
+    value: string;
+    placeholder: string;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    size: SpSelectSize;
+    multiple: boolean;
+    options: SpSelectOption[];
+    error: string;
+    hint: string;
+    label: string;
+}
+//# sourceMappingURL=sp-select.types.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+export { SpSidebarComponent } from './sp-sidebar.js';
+export type { SpSidebarProps, SpSidebarPlacement } from './sp-sidebar.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const e = ':host{display:block;height:100%}.sp-sidebar{height:100%;background:var(--sp-bg, white);display:flex;flex-direction:column;transition:width .25s ease;overflow:hidden;position:relative;box-sizing:border-box}:host([bordered]) .sp-sidebar{border-right:1px solid var(--sp-border-subtle, #e5e7eb)}:host([placement="right"]) :host([bordered]) .sp-sidebar{border-right:none;border-left:1px solid var(--sp-border-subtle, #e5e7eb)}.sp-sidebar-content{flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.sp-sidebar-toggle{position:absolute;top:16px;right:-12px;z-index:1;width:24px;height:24px;border-radius:50%;border:1px solid var(--sp-border-subtle, #e5e7eb);background:var(--sp-bg, white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 1px 4px #0000001a}.sp-sidebar-toggle:hover{background:var(--sp-bg-muted, #f3f4f6)}::slotted([slot="header"]){display:block;padding:16px;border-bottom:1px solid var(--sp-bg-muted, #f3f4f6)}::slotted([slot="footer"]){display:block;padding:16px;border-top:1px solid var(--sp-bg-muted, #f3f4f6);margin-top:auto}.sp-sidebar-toggle:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button],.sp-sidebar{transition:none!important}}';
+export {
+  e as default
+};

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

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+import { SpSidebarPlacement } from './sp-sidebar.types.js';
+/**
+ * Sidebar layout component with header, default, and footer slots.
+ *
+ * @element sp-sidebar
+ *
+ * @prop {boolean}            open        - Whether the sidebar is visible
+ * @prop {SpSidebarPlacement} placement   - Side the sidebar appears on: left | right
+ * @prop {string}             width       - CSS width of the sidebar (e.g. "240px")
+ * @prop {boolean}            collapsible - Shows a toggle button to collapse/expand
+ * @prop {boolean}            collapsed   - Whether the sidebar is collapsed to minimal width
+ * @prop {boolean}            bordered    - Adds a border on the inner edge
+ *
+ * @fires {CustomEvent<{ open: boolean }>}      sp-toggle   - Emitted when open state changes
+ * @fires {CustomEvent<{ collapsed: boolean }>} sp-collapse - Emitted when collapsed state changes
+ *
+ * @slot header  - Content at the top of the sidebar
+ * @slot         - Main sidebar content
+ * @slot footer  - Content pinned to the bottom
+ */
+export declare class SpSidebarComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    open: boolean;
+    placement: SpSidebarPlacement;
+    width: string;
+    collapsible: boolean;
+    collapsed: boolean;
+    bordered: boolean;
+    /** Width when collapsed (default "60px") */
+    collapsedWidth: string;
+    /** aria-label for the sidebar nav landmark */
+    navLabel: string;
+    render(): import('lit-html').TemplateResult;
+    _getSidebarStyle(): string;
+    readonly _handleCollapse: () => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-sidebar": SpSidebarComponent;
+    }
+}
+//# sourceMappingURL=sp-sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sp-sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,UAAQ;IAGZ,SAAS,EAAE,kBAAkB,CAAU;IAGvC,KAAK,SAAW;IAGhB,WAAW,UAAS;IAGpB,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAEjB,4CAA4C;IAE5C,cAAc,SAAU;IAExB,8CAA8C;IAE9C,QAAQ,SAAwB;IAEvB,MAAM;IAIf,gBAAgB,IAAI,MAAM;IAI1B,QAAQ,CAAC,eAAe,QAAO,IAAI,CASjC;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF"}