sp-component 0.0.1

package/dist/components/tag-input/sp-tag-input.d.ts

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+import { SpTagInputSize } from './sp-tag-input.types.js';
+/**
+ * Tag input component — a form-associated input that manages a list of tags.
+ *
+ * @element sp-tag-input
+ *
+ * @prop {string}          values           - Comma-separated current tags
+ * @prop {string}          placeholder      - Placeholder for the inner input
+ * @prop {boolean}         disabled         - Disables the component
+ * @prop {boolean}         readonly         - Makes the component read-only
+ * @prop {boolean}         required         - Marks as required
+ * @prop {string}          name             - Form field name
+ * @prop {number}          max              - Max number of tags (0 = unlimited)
+ * @prop {boolean}         allowDuplicates  - Allow duplicate tags
+ * @prop {string}          delimiter        - Character(s) that trigger tag creation
+ * @prop {string}          label            - Label text
+ * @prop {string}          hint             - Hint text
+ * @prop {string}          error            - Error message
+ * @prop {SpTagInputSize}  size             - Size: sm | md | lg
+ *
+ * @fires {CustomEvent<{ values: string[] }>} sp-change - Emitted when tags change
+ * @fires {CustomEvent<{ value: string }>}    sp-add    - Emitted when a tag is added
+ * @fires {CustomEvent<{ value: string }>}    sp-remove - Emitted when a tag is removed
+ */
+export declare class SpTagInputComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    constructor();
+    values: string;
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    name: string;
+    max: number;
+    allowDuplicates: boolean;
+    delimiter: string;
+    label: string;
+    hint: string;
+    error: string;
+    size: SpTagInputSize;
+    _tags: string[];
+    _inputValue: string;
+    _focused: boolean;
+    private _prevValues;
+    render(): import('lit-html').TemplateResult;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    readonly _focusInput: () => void;
+    readonly _handleTextInput: (e: Event) => void;
+    readonly _handleKeydown: (e: KeyboardEvent) => void;
+    readonly _handleBlur: () => void;
+    _addTag(tag: string): void;
+    _removeTag(tag: string): void;
+    private _syncValues;
+    formResetCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-tag-input": SpTagInputComponent;
+    }
+}
+//# sourceMappingURL=sp-tag-input.d.ts.map

package/dist/components/tag-input/sp-tag-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-tag-input.d.ts","sourceRoot":"","sources":["../../../src/components/tag-input/sp-tag-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,mBAAoB,SAAQ,UAAU;;IACjD,OAAgB,MAAM,0BAAqB;IAC3C,MAAM,CAAC,cAAc,UAAQ;;IAU7B,MAAM,SAAM;IAGZ,WAAW,SAAgB;IAG3B,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,GAAG,SAAK;IAGR,eAAe,UAAS;IAGxB,SAAS,SAAO;IAGhB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,IAAI,EAAE,cAAc,CAAQ;IAG5B,KAAK,EAAE,MAAM,EAAE,CAAM;IAGrB,WAAW,SAAM;IAGjB,QAAQ,UAAS;IAEjB,OAAO,CAAC,WAAW,CAAM;IAEhB,MAAM;IAIN,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAa3D,QAAQ,CAAC,WAAW,aAGlB;IAEF,QAAQ,CAAC,gBAAgB,GAAI,GAAG,KAAK,UAcnC;IAEF,QAAQ,CAAC,cAAc,GAAI,GAAG,aAAa,UAgBzC;IAEF,QAAQ,CAAC,WAAW,aAOlB;IAEF,OAAO,CAAC,GAAG,EAAE,MAAM;IAiBnB,UAAU,CAAC,GAAG,EAAE,MAAM;IAiBtB,OAAO,CAAC,WAAW;IAcnB,iBAAiB,IAAI,IAAI;CAO1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,mBAAmB,CAAC;KACrC;CACF"}

package/dist/components/tag-input/sp-tag-input.js

@@ -0,0 +1,140 @@
+import { unsafeCSS as v, LitElement as f } from "lit";
+import { property as r, state as d, customElement as y } from "lit/decorators.js";
+import g from "./sp-tag-input.css.js";
+import { tagInputTemplate as m } from "./sp-tag-input.template.js";
+var V = Object.defineProperty, w = Object.getOwnPropertyDescriptor, _ = (t) => {
+  throw TypeError(t);
+}, a = (t, e, i, p) => {
+  for (var l = p > 1 ? void 0 : p ? w(e, i) : e, o = t.length - 1, n; o >= 0; o--)
+    (n = t[o]) && (l = (p ? n(e, i, l) : n(l)) || l);
+  return p && l && V(e, i, l), l;
+}, c = (t, e, i) => e.has(t) || _("Cannot " + i), u = (t, e, i) => (c(t, e, "read from private field"), i ? i.call(t) : e.get(t)), S = (t, e, i) => e.has(t) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), b = (t, e, i, p) => (c(t, e, "write to private field"), e.set(t, i), i), h;
+let s = class extends f {
+  constructor() {
+    super(), S(this, h), this.values = "", this.placeholder = "Add tag...", this.disabled = !1, this.readonly = !1, this.required = !1, this.name = "", this.max = 0, this.allowDuplicates = !1, this.delimiter = ",", this.label = "", this.hint = "", this.error = "", this.size = "md", this._tags = [], this._inputValue = "", this._focused = !1, this._prevValues = "", this._focusInput = () => {
+      var e;
+      const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".sp-tag-input-input");
+      t == null || t.focus();
+    }, this._handleTextInput = (t) => {
+      const i = t.target.value;
+      if (this.delimiter && i.includes(this.delimiter)) {
+        const p = i.split(this.delimiter);
+        for (let l = 0; l < p.length - 1; l++) {
+          const o = p[l].trim();
+          o && this._addTag(o);
+        }
+        this._inputValue = p[p.length - 1].trim();
+      } else
+        this._inputValue = i;
+    }, this._handleKeydown = (t) => {
+      if (t.key === "Enter") {
+        t.preventDefault();
+        const e = this._inputValue.trim();
+        e && (this._addTag(e), this._inputValue = "");
+        return;
+      }
+      if (t.key === "Backspace" && this._inputValue === "" && this._tags.length > 0) {
+        const e = this._tags[this._tags.length - 1];
+        this._removeTag(e);
+      }
+    }, this._handleBlur = () => {
+      const t = this._inputValue.trim();
+      t && (this._addTag(t), this._inputValue = ""), this._focused = !1;
+    }, b(this, h, this.attachInternals());
+  }
+  render() {
+    return m.call(this);
+  }
+  willUpdate(t) {
+    t.has("values") && this.values !== this._prevValues && (this._prevValues = this.values, this._tags = this.values ? this.values.split(",").map((e) => e.trim()).filter(Boolean) : [], u(this, h).setFormValue(this.values));
+  }
+  _addTag(t) {
+    this.disabled || this.readonly || this.max > 0 && this._tags.length >= this.max || !this.allowDuplicates && this._tags.includes(t) || (this._tags = [...this._tags, t], this._syncValues(), this.dispatchEvent(
+      new CustomEvent("sp-add", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _removeTag(t) {
+    if (this.disabled || this.readonly) return;
+    const e = this._tags.indexOf(t);
+    e !== -1 && (this._tags = [...this._tags.slice(0, e), ...this._tags.slice(e + 1)], this._syncValues(), this.dispatchEvent(
+      new CustomEvent("sp-remove", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _syncValues() {
+    this.values = this._tags.join(","), this._prevValues = this.values, u(this, h).setFormValue(this.values), this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: { values: [...this._tags] },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  formResetCallback() {
+    this._tags = [], this.values = "", this._prevValues = "", this._inputValue = "", u(this, h).setFormValue("");
+  }
+};
+h = /* @__PURE__ */ new WeakMap();
+s.styles = v(g);
+s.formAssociated = !0;
+a([
+  r({ type: String })
+], s.prototype, "values", 2);
+a([
+  r({ type: String })
+], s.prototype, "placeholder", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "readonly", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "required", 2);
+a([
+  r({ type: String })
+], s.prototype, "name", 2);
+a([
+  r({ type: Number })
+], s.prototype, "max", 2);
+a([
+  r({ type: Boolean, attribute: "allow-duplicates" })
+], s.prototype, "allowDuplicates", 2);
+a([
+  r({ type: String })
+], s.prototype, "delimiter", 2);
+a([
+  r({ type: String })
+], s.prototype, "label", 2);
+a([
+  r({ type: String })
+], s.prototype, "hint", 2);
+a([
+  r({ type: String })
+], s.prototype, "error", 2);
+a([
+  r({ type: String, reflect: !0 })
+], s.prototype, "size", 2);
+a([
+  d()
+], s.prototype, "_tags", 2);
+a([
+  d()
+], s.prototype, "_inputValue", 2);
+a([
+  d()
+], s.prototype, "_focused", 2);
+s = a([
+  y("sp-tag-input")
+], s);
+export {
+  s as SpTagInputComponent
+};

package/dist/components/tag-input/sp-tag-input.template.d.ts

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

package/dist/components/tag-input/sp-tag-input.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-tag-input.template.d.ts","sourceRoot":"","sources":["../../../src/components/tag-input/sp-tag-input.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,mBAAmB,GAAG,cAAc,CAyD1E"}

package/dist/components/tag-input/sp-tag-input.template.js

@@ -0,0 +1,54 @@
+import { nothing as i, html as t } from "lit";
+import { classMap as e } from "lit/directives/class-map.js";
+function n() {
+  return t`
+    <div
+      class=${e({
+    "sp-tag-input": !0,
+    [`sp-tag-input--${this.size}`]: !0,
+    "sp-tag-input--focused": this._focused,
+    "sp-tag-input--disabled": this.disabled,
+    "sp-tag-input--error": !!this.error
+  })}
+    >
+      ${this.label ? t`<label class="sp-tag-input-label">${this.label}</label>` : i}
+      <div class="sp-tag-input-field" @click=${this._focusInput}>
+        ${this._tags.map(
+    (s) => t`
+            <span class="sp-tag-input-chip">
+              <span class="sp-tag-input-chip-label">${s}</span>
+              ${!this.disabled && !this.readonly ? t`<button
+                    class="sp-tag-input-chip-remove"
+                    type="button"
+                    aria-label="Remove ${s}"
+                    @click=${(a) => {
+      a.stopPropagation(), this._removeTag(s);
+    }}
+                  >
+                    ×
+                  </button>` : i}
+            </span>
+          `
+  )}
+        <input
+          class="sp-tag-input-input"
+          type="text"
+          .value=${this._inputValue}
+          placeholder=${this._tags.length === 0 ? this.placeholder : ""}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          @input=${this._handleTextInput}
+          @keydown=${this._handleKeydown}
+          @focus=${() => {
+    this._focused = !0;
+  }}
+          @blur=${this._handleBlur}
+        />
+      </div>
+      ${this.error ? t`<span class="sp-tag-input-error" role="alert">${this.error}</span>` : this.hint ? t`<span class="sp-tag-input-hint">${this.hint}</span>` : i}
+    </div>
+  `;
+}
+export {
+  n as tagInputTemplate
+};

package/dist/components/tag-input/sp-tag-input.types.d.ts

@@ -0,0 +1,17 @@
+export type SpTagInputSize = "sm" | "md" | "lg";
+export interface SpTagInputProps {
+    values: string;
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    name: string;
+    max: number;
+    allowDuplicates: boolean;
+    delimiter: string;
+    label: string;
+    hint: string;
+    error: string;
+    size: SpTagInputSize;
+}
+//# sourceMappingURL=sp-tag-input.types.d.ts.map

package/dist/components/tag-input/sp-tag-input.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-tag-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/tag-input/sp-tag-input.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC;CACtB"}

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

@@ -0,0 +1,3 @@
+export { SpTextareaComponent } from './sp-textarea.js';
+export type { SpTextareaProps, SpTextareaResize } from './sp-textarea.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const e = ':host{display:block;font-family:inherit}.sp-textarea-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)}textarea{width:100%;padding:8px 12px;border:1px solid var(--sp-border, #d1d5db);border-radius:4px;font-family:inherit;font-size:14px;color:var(--sp-text, #111827);background:var(--sp-bg, white);outline:none;box-sizing:border-box;transition:border-color .2s;resize:vertical;min-height:80px}textarea:focus-visible{border-color:var(--sp-primary, #3b82f6);outline:2px solid var(--sp-primary-focus, rgba(59, 130, 246, .2));outline-offset:-1px}textarea.sp-textarea--error{border-color:var(--sp-error, #FF4D4F)}textarea.sp-textarea--error:focus-visible{border-color:var(--sp-error, #FF4D4F);outline-color:var(--sp-error-focus, rgba(255, 77, 79, .2))}:host([resize="none"]) textarea{resize:none}:host([resize="horizontal"]) textarea{resize:horizontal}:host([resize="both"]) textarea{resize:both}:host([disabled]) textarea{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb);resize:none}:host([readonly]) textarea{background:var(--sp-bg-subtle, #f9fafb)}.sp-textarea-footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.sp-textarea-error{font-size:12px;color:var(--sp-error, #FF4D4F)}.sp-textarea-hint{font-size:12px;color:var(--sp-text-muted, #6b7280)}.sp-textarea-count{font-size:12px;color:var(--sp-text-placeholder, #9ca3af);margin-left:auto}textarea.sp-textarea--auto-resize{resize:none;overflow:hidden}@media(max-width:479px){:host{width:100%}.sp-textarea-wrapper{width:100%}textarea{width:100%;box-sizing:border-box}}@media(prefers-reduced-motion:reduce){textarea{transition:none}}';
+export {
+  e as default
+};

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

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+import { SpTextareaResize } from './sp-textarea.types.js';
+/**
+ * Reusable textarea component compatible with any web framework.
+ *
+ * @element sp-textarea
+ *
+ * @prop {string}            value       - Current value
+ * @prop {string}            placeholder - Placeholder text
+ * @prop {boolean}           disabled    - Disables the textarea
+ * @prop {boolean}           readonly    - Makes the textarea read-only
+ * @prop {boolean}           required    - Marks the textarea as required
+ * @prop {string}            name        - Native textarea name
+ * @prop {number}            rows        - Number of visible rows (default 3)
+ * @prop {number}            maxlength   - Maximum character length (0 = no limit)
+ * @prop {SpTextareaResize}  resize      - Resize behavior: none | vertical | horizontal | both
+ * @prop {string}            error       - Error message shown below the textarea
+ * @prop {string}            hint        - Hint text shown below the textarea (when no error)
+ * @prop {string}            label       - Label text shown above the textarea
+ *
+ * @fires {CustomEvent<{ value: string }>} sp-input  - Emitted on every keystroke
+ * @fires {CustomEvent<{ value: string }>} sp-change - Emitted on change
+ * @fires {CustomEvent}                    sp-focus  - Emitted on focus
+ * @fires {CustomEvent}                    sp-blur   - Emitted on blur
+ *
+ * @csspart textarea - The inner <textarea> element
+ */
+export declare class SpTextareaComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    constructor();
+    value: string;
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    name: string;
+    rows: number;
+    maxlength: number;
+    resize: SpTextareaResize;
+    autoResize: boolean;
+    error: string;
+    hint: string;
+    label: string;
+    render(): import('lit-html').TemplateResult;
+    readonly _handleInput: (e: Event) => void;
+    readonly _handleChange: (e: Event) => void;
+    readonly _handleFocus: () => boolean;
+    readonly _handleBlur: () => boolean;
+    updated(changedProperties: Map<string, unknown>): void;
+    formResetCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-textarea": SpTextareaComponent;
+    }
+}
+//# sourceMappingURL=sp-textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/sp-textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,mBAAoB,SAAQ,UAAU;;IACjD,OAAgB,MAAM,0BAAqB;IAC3C,MAAM,CAAC,cAAc,UAAQ;;IAU7B,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,IAAI,SAAK;IAGT,SAAS,SAAK;IAGd,MAAM,EAAE,gBAAgB,CAAc;IAGtC,UAAU,UAAS;IAGnB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAEF,MAAM;IAIf,QAAQ,CAAC,YAAY,GAAI,GAAG,KAAK,UAc/B;IAEF,QAAQ,CAAC,aAAa,GAAI,GAAG,KAAK,UAUhC;IAEF,QAAQ,CAAC,YAAY,gBAGjB;IAEJ,QAAQ,CAAC,WAAW,gBAGhB;IAEK,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAaxD,iBAAiB,IAAI,IAAI;CAI1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,mBAAmB,CAAC;KACpC;CACF"}

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

@@ -0,0 +1,95 @@
+import { unsafeCSS as y, LitElement as c } from "lit";
+import { property as i, customElement as f } from "lit/decorators.js";
+import m from "./sp-textarea.css.js";
+import { textareaTemplate as _ } from "./sp-textarea.template.js";
+var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, v = (e) => {
+  throw TypeError(e);
+}, s = (e, t, a, p) => {
+  for (var o = p > 1 ? void 0 : p ? b(t, a) : t, u = e.length - 1, n; u >= 0; u--)
+    (n = e[u]) && (o = (p ? n(t, a, o) : n(o)) || o);
+  return p && o && g(t, a, o), o;
+}, d = (e, t, a) => t.has(e) || v("Cannot " + a), h = (e, t, a) => (d(e, t, "read from private field"), a ? a.call(e) : t.get(e)), C = (e, t, a) => t.has(e) ? v("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), E = (e, t, a, p) => (d(e, t, "write to private field"), t.set(e, a), a), l;
+let r = class extends c {
+  constructor() {
+    super(), C(this, l), this.value = "", this.placeholder = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.name = "", this.rows = 3, this.maxlength = 0, this.resize = "vertical", this.autoResize = !1, this.error = "", this.hint = "", this.label = "", this._handleInput = (e) => {
+      const t = e.target;
+      this.value = t.value, this.autoResize && (t.style.height = "auto", t.style.height = `${t.scrollHeight}px`), this.dispatchEvent(
+        new CustomEvent("sp-input", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._handleChange = (e) => {
+      const t = e.target;
+      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 })
+    ), E(this, l, this.attachInternals());
+  }
+  render() {
+    return _.call(this);
+  }
+  updated(e) {
+    e.has("value") && h(this, l).setFormValue(this.value), (e.has("value") || e.has("required")) && (this.required && !this.value ? h(this, l).setValidity({ valueMissing: !0 }, "This field is required") : h(this, l).setValidity({}));
+  }
+  formResetCallback() {
+    this.value = "", h(this, l).setFormValue("");
+  }
+};
+l = /* @__PURE__ */ new WeakMap();
+r.styles = y(m);
+r.formAssociated = !0;
+s([
+  i({ type: String })
+], r.prototype, "value", 2);
+s([
+  i({ type: String })
+], r.prototype, "placeholder", 2);
+s([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+s([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "readonly", 2);
+s([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "required", 2);
+s([
+  i({ type: String })
+], r.prototype, "name", 2);
+s([
+  i({ type: Number })
+], r.prototype, "rows", 2);
+s([
+  i({ type: Number })
+], r.prototype, "maxlength", 2);
+s([
+  i({ type: String, reflect: !0 })
+], r.prototype, "resize", 2);
+s([
+  i({ type: Boolean, attribute: "auto-resize", reflect: !0 })
+], r.prototype, "autoResize", 2);
+s([
+  i({ type: String })
+], r.prototype, "error", 2);
+s([
+  i({ type: String })
+], r.prototype, "hint", 2);
+s([
+  i({ type: String })
+], r.prototype, "label", 2);
+r = s([
+  f("sp-textarea")
+], r);
+export {
+  r as SpTextareaComponent
+};

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { nothing as e, html as a } from "lit";
+import { classMap as t } from "lit/directives/class-map.js";
+function i() {
+  return a`
+    <div class="sp-textarea-wrapper">
+      ${this.label ? a`<label class="sp-textarea-label"
+            >${this.label}${this.required ? a`<span class="sp-required"> *</span>` : e}</label
+          >` : e}
+      <textarea
+        part="textarea"
+        class=${t({
+    "sp-textarea--error": !!this.error,
+    "sp-textarea--auto-resize": this.autoResize
+  })}
+        rows=${this.rows}
+        placeholder=${this.placeholder || e}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        name=${this.name || e}
+        maxlength=${this.maxlength > 0 ? this.maxlength : e}
+        .value=${this.value}
+        aria-invalid=${this.error ? "true" : e}
+        aria-describedby=${this.error || this.hint || this.maxlength > 0 ? "sp-textarea-desc" : e}
+        aria-required=${this.required ? "true" : e}
+        @input=${this._handleInput}
+        @change=${this._handleChange}
+        @focus=${this._handleFocus}
+        @blur=${this._handleBlur}
+      ></textarea>
+      <div class="sp-textarea-footer">
+        ${this.error ? a`<span id="sp-textarea-desc" class="sp-textarea-error" role="alert">${this.error}</span>` : this.hint ? a`<span id="sp-textarea-desc" class="sp-textarea-hint">${this.hint}</span>` : a`<span></span>`}
+        ${this.maxlength > 0 ? a`<span class="sp-textarea-count">${this.value.length} / ${this.maxlength}</span>` : e}
+      </div>
+    </div>
+  `;
+}
+export {
+  i as textareaTemplate
+};

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

@@ -0,0 +1,16 @@
+export type SpTextareaResize = "none" | "vertical" | "horizontal" | "both";
+export interface SpTextareaProps {
+    value: string;
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    name: string;
+    rows: number;
+    maxlength: number;
+    resize: SpTextareaResize;
+    error: string;
+    hint: string;
+    label: string;
+}
+//# sourceMappingURL=sp-textarea.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-textarea.types.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/sp-textarea.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAE3E,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/components/time-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { SpTimePickerComponent } from './sp-time-picker.js';
+export type { SpTimePickerProps, SpTimePickerFormat, SpTimePickerPeriod, SpTimePickerSize } from './sp-time-picker.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/time-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/time-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/time-picker/sp-time-picker.css.js

@@ -0,0 +1,4 @@
+const e = ':host{display:block;font-family:inherit;position:relative}.sp-time-picker-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-time-picker-field{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, white);cursor:pointer;transition:border-color .2s,box-shadow .2s;min-width:160px}.sp-time-picker-field:hover:not(.sp-time-picker-field--disabled){border-color:var(--sp-border-strong, #9ca3af)}.sp-time-picker-field--open{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary-focus, rgba(59, 130, 246, .2))}.sp-time-picker-field--error{border-color:var(--sp-error, #FF4D4F)}.sp-time-picker-field--disabled{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}.sp-time-picker-icon{color:var(--sp-text-placeholder, #9ca3af);flex-shrink:0}.sp-time-picker-input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:8px 0;cursor:pointer;min-width:0}.sp-time-picker-input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}.sp-time-picker-input:disabled{cursor:not-allowed}.sp-time-picker-clear{border:none;background:none;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0;font-size:18px;line-height:1;display:flex;align-items:center}.sp-time-picker-clear:hover{color:var(--sp-text-secondary, #374151)}.sp-time-picker-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:1000;width:220px;background:var(--sp-bg, white);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:10px;box-shadow:0 10px 25px #0000001f,0 4px 8px #0000000f;overflow:hidden}.sp-time-picker-columns{display:flex;align-items:center;justify-content:center;gap:4px;padding:16px 16px 8px}.sp-time-picker-col{display:flex;flex-direction:column;align-items:center;gap:4px}.sp-time-picker-sep{font-size:20px;font-weight:600;color:var(--sp-text-secondary, #374151);margin-bottom:2px}.sp-time-picker-arrow{border:none;background:none;cursor:pointer;color:var(--sp-text-muted, #6b7280);font-size:10px;padding:4px 8px;border-radius:4px;line-height:1;transition:background .15s,color .15s}.sp-time-picker-arrow:hover{background:var(--sp-bg-muted, #f3f4f6);color:var(--sp-text, #111827)}.sp-time-picker-value{font-size:20px;font-weight:600;font-family:monospace;color:var(--sp-text, #111827);min-width:2ch;text-align:center}.sp-time-picker-col--period .sp-time-picker-value{font-size:16px;font-family:inherit}.sp-time-picker-presets{max-height:160px;overflow-y:auto;border-top:1px solid var(--sp-bg-muted, #f3f4f6);padding:4px 0;scrollbar-width:thin;scrollbar-color:var(--sp-border, #d1d5db) transparent}.sp-time-picker-option{display:block;width:100%;padding:6px 16px;border:none;background:none;cursor:pointer;text-align:left;font-size:13px;font-family:monospace;color:var(--sp-text-secondary, #374151);transition:background .1s}.sp-time-picker-option:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-time-picker-option--selected{background:var(--sp-primary-bg, #eff6ff);color:var(--sp-primary-hover, #2563eb);font-weight:600}.sp-time-picker-actions{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-top:1px solid var(--sp-bg-muted, #f3f4f6);gap:8px}.sp-time-picker-now,.sp-time-picker-ok{border:none;cursor:pointer;border-radius:6px;padding:6px 14px;font-size:13px;font-family:inherit;font-weight:500;transition:background .15s}.sp-time-picker-now{background:var(--sp-bg-muted, #f3f4f6);color:var(--sp-text-secondary, #374151)}.sp-time-picker-now:hover{background:var(--sp-border-subtle, #e5e7eb)}.sp-time-picker-ok{background:var(--sp-primary, #3b82f6);color:var(--sp-bg, white)}.sp-time-picker-ok:hover{background:var(--sp-primary-hover, #2563eb)}.sp-time-picker-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-time-picker-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}:host([size="sm"]) .sp-time-picker-field{padding:0 8px}:host([size="sm"]) .sp-time-picker-input{padding:5px 0;font-size:12px}:host([size="lg"]) .sp-time-picker-field{padding:0 16px}:host([size="lg"]) .sp-time-picker-input{padding:12px 0;font-size:16px}:host([disabled]) .sp-time-picker-field{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}@media(prefers-reduced-motion:reduce){.sp-time-picker-field,.sp-time-picker-arrow,.sp-time-picker-option,.sp-time-picker-now,.sp-time-picker-ok{transition:none}}';
+export {
+  e as default
+};

package/dist/components/time-picker/sp-time-picker.d.ts

@@ -0,0 +1,80 @@
+import { LitElement } from 'lit';
+import { SpTimePickerFormat, SpTimePickerPeriod, SpTimePickerSize } from './sp-time-picker.types.js';
+/**
+ * Time picker component with 12/24h format support and scrollable time columns.
+ *
+ * @element sp-time-picker
+ *
+ * @prop {string}              value       - Time in HH:MM or HH:MM:SS format
+ * @prop {SpTimePickerFormat}  format      - 12 or 24 hour display (default "24")
+ * @prop {number}              step        - Minute step interval (1, 5, 10, 15, 30, 60)
+ * @prop {boolean}             showSeconds - Show seconds column (attribute: show-seconds)
+ * @prop {string}              min         - Minimum time HH:MM
+ * @prop {string}              max         - Maximum time HH:MM
+ * @prop {boolean}             disabled    - Disables the picker
+ * @prop {boolean}             readonly    - Makes the picker read-only
+ * @prop {boolean}             required    - Marks the field as required
+ * @prop {string}              name        - Form field name
+ * @prop {string}              placeholder - Placeholder text
+ * @prop {string}              label       - Label text
+ * @prop {string}              hint        - Hint text
+ * @prop {string}              error       - Error message
+ * @prop {SpTimePickerSize}    size        - Size: sm | md | lg
+ *
+ * @fires {CustomEvent<{ value: string }>} sp-change - Emitted when time is confirmed
+ * @fires {CustomEvent}                    sp-clear  - Emitted when value is cleared
+ */
+export declare class SpTimePickerComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    constructor();
+    value: string;
+    format: SpTimePickerFormat;
+    step: number;
+    showSeconds: boolean;
+    min: string;
+    max: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    name: string;
+    placeholder: string;
+    label: string;
+    hint: string;
+    error: string;
+    size: SpTimePickerSize;
+    _open: boolean;
+    _hours: number;
+    _minutes: number;
+    _seconds: number;
+    _period: SpTimePickerPeriod;
+    render(): import('lit-html').TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    formResetCallback(): void;
+    _toggle(): void;
+    _parseValue(val: string): void;
+    _displayHours(): number;
+    _formatDisplay(): string;
+    _formatValue(): string;
+    _changeHours(dir: number): void;
+    _changeMinutes(dir: number): void;
+    _changeSeconds(dir: number): void;
+    _togglePeriod(): void;
+    _setNow(): void;
+    _confirm(): void;
+    _clear(e: Event): void;
+    _selectTime(t: string): void;
+    _getTimeOptions(): string[];
+    _isOutOfRange(time: string): boolean;
+    private readonly _handleDocumentPointerDown;
+    private readonly _handleDocumentKeydown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-time-picker": SpTimePickerComponent;
+    }
+}
+//# sourceMappingURL=sp-time-picker.d.ts.map