sp-component 0.0.1

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

@@ -0,0 +1,78 @@
+import { LitElement } from 'lit';
+import { SpComboboxSize, SpComboboxOption } from './sp-combobox.types.js';
+/**
+ * Searchable combobox (select with filter) component. Supports single and multiple selection.
+ *
+ * @element sp-combobox
+ *
+ * @prop {string}               value          - Selected value (single mode)
+ * @prop {string[]}             values         - Selected values (multiple mode)
+ * @prop {SpComboboxOption[]}   options        - Array of selectable options
+ * @prop {string}               placeholder    - Input placeholder text
+ * @prop {boolean}              disabled       - Disables the component
+ * @prop {boolean}              required       - Marks the field as required
+ * @prop {string}               name           - Native input name
+ * @prop {SpComboboxSize}       size           - Size: sm | md | lg
+ * @prop {boolean}              clearable      - Shows a clear button when value is set
+ * @prop {boolean}              multiple       - Enables multiple selection
+ * @prop {number}               maxSelections  - Maximum number of selections (0 = unlimited)
+ * @prop {string}               error          - Error message
+ * @prop {string}               hint           - Hint message
+ * @prop {string}               label          - Label text
+ * @prop {string}               noResultsText  - Text shown when no options match
+ *
+ * @fires {CustomEvent<{ value: string }>}    sp-change - Single: emitted when selection changes
+ * @fires {CustomEvent<{ values: string[] }>} sp-change - Multiple: emitted when selection changes
+ * @fires {CustomEvent}                        sp-clear  - Emitted when the value is cleared
+ *
+ * @csspart input - The inner text input element
+ */
+export declare class SpComboboxComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    constructor();
+    value: string;
+    values: string[];
+    options: SpComboboxOption[];
+    placeholder: string;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    size: SpComboboxSize;
+    clearable: boolean;
+    multiple: boolean;
+    maxSelections: number;
+    error: string;
+    hint: string;
+    label: string;
+    noResultsText: string;
+    _searchText: string;
+    _open: boolean;
+    _focused: boolean;
+    _highlightedIndex: number | null;
+    get _filteredOptions(): SpComboboxOption[];
+    get _selectedLabel(): string;
+    _getVisibleOptions(): SpComboboxOption[];
+    private _updateFormValue;
+    formResetCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private readonly _handleOutsideClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    readonly _handleToggleDropdown: (e: Event) => void;
+    readonly _handleInputFocus: () => void;
+    readonly _handleInputInput: (e: Event) => void;
+    readonly _handleSelect: (option: SpComboboxOption) => void;
+    readonly _handleRemoveValue: (val: string, e: Event) => void;
+    readonly _handleClear: (e: Event) => void;
+    readonly _handleKeydown: (e: KeyboardEvent) => void;
+    private _scrollHighlightedIntoView;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-combobox": SpComboboxComponent;
+    }
+}
+//# sourceMappingURL=sp-combobox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/sp-combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,mBAAoB,SAAQ,UAAU;;IACjD,OAAgB,MAAM,0BAAqB;IAC3C,MAAM,CAAC,cAAc,UAAQ;;IAU7B,KAAK,SAAM;IAGX,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,OAAO,EAAE,gBAAgB,EAAE,CAAM;IAGjC,WAAW,SAAe;IAG1B,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,IAAI,EAAE,cAAc,CAAQ;IAG5B,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,aAAa,SAAK;IAGlB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,aAAa,SAAsB;IAEnC,WAAW,SAAM;IACjB,KAAK,UAAS;IACd,QAAQ,UAAS;IAGjB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExC,IAAI,gBAAgB,IAAI,gBAAgB,EAAE,CAGzC;IAED,IAAI,cAAc,IAAI,MAAM,CAE3B;IAED,kBAAkB,IAAI,gBAAgB,EAAE;IAIxC,OAAO,CAAC,gBAAgB;IAoBxB,iBAAiB,IAAI,IAAI;IAOhB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQ/D,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAOlC;IAEO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAKrC,QAAQ,CAAC,qBAAqB,GAAI,GAAG,KAAK,UAexC;IAEF,QAAQ,CAAC,iBAAiB,aAIxB;IAEF,QAAQ,CAAC,iBAAiB,GAAI,GAAG,KAAK,UAKpC;IAEF,QAAQ,CAAC,aAAa,GAAI,QAAQ,gBAAgB,UA4BhD;IAEF,QAAQ,CAAC,kBAAkB,GAAI,KAAK,MAAM,EAAE,GAAG,KAAK,UAMlD;IAEF,QAAQ,CAAC,YAAY,GAAI,GAAG,KAAK,UAa/B;IAEF,QAAQ,CAAC,cAAc,GAAI,GAAG,aAAa,KAAG,IAAI,CAuDhD;IAEF,OAAO,CAAC,0BAA0B;IAMzB,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,mBAAmB,CAAC;KACpC;CACF"}

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

@@ -0,0 +1,159 @@
+import { unsafeCSS as v, LitElement as _ } from "lit";
+import { property as h, state as f, customElement as g } from "lit/decorators.js";
+import m from "./sp-combobox.css.js";
+import { comboboxTemplate as y } from "./sp-combobox.template.js";
+var x = Object.defineProperty, b = Object.getOwnPropertyDescriptor, d = (e) => {
+  throw TypeError(e);
+}, l = (e, t, s, a) => {
+  for (var o = a > 1 ? void 0 : a ? b(t, s) : t, u = e.length - 1, p; u >= 0; u--)
+    (p = e[u]) && (o = (a ? p(t, s, o) : p(o)) || o);
+  return a && o && x(t, s, o), o;
+}, c = (e, t, s) => t.has(e) || d("Cannot " + s), n = (e, t, s) => (c(e, t, "read from private field"), s ? s.call(e) : t.get(e)), w = (e, t, s) => t.has(e) ? d("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), C = (e, t, s, a) => (c(e, t, "write to private field"), t.set(e, s), s), r;
+let i = class extends _ {
+  constructor() {
+    super(), w(this, r), this.value = "", this.values = [], this.options = [], this.placeholder = "Search...", this.disabled = !1, this.required = !1, this.name = "", this.size = "md", this.clearable = !1, this.multiple = !1, this.maxSelections = 0, this.error = "", this.hint = "", this.label = "", this.noResultsText = "No results found", this._searchText = "", this._open = !1, this._focused = !1, this._highlightedIndex = null, this._handleOutsideClick = (e) => {
+      !this.contains(e.target) && e.composedPath()[0] !== this && (this._open = !1, this._searchText = "", this._highlightedIndex = null, this.requestUpdate());
+    }, this._handleToggleDropdown = (e) => {
+      e.stopPropagation(), !this.disabled && (this._open ? (this._open = !1, this._searchText = "", this._highlightedIndex = null) : (this._open = !0, this._searchText = "", this.updateComplete.then(() => {
+        var t;
+        (t = this.renderRoot.querySelector(".sp-combobox-input")) == null || t.focus();
+      })), this.requestUpdate());
+    }, this._handleInputFocus = () => {
+      this._open = !0, this._searchText = "", this.requestUpdate();
+    }, this._handleInputInput = (e) => {
+      this._searchText = e.target.value, this._open = !0, this._highlightedIndex = null, this.requestUpdate();
+    }, this._handleSelect = (e) => {
+      if (!e.disabled) {
+        if (this.multiple) {
+          this.values.includes(e.value) ? this.values = this.values.filter((s) => s !== e.value) : (this.maxSelections === 0 || this.values.length < this.maxSelections) && (this.values = [...this.values, e.value]), this._searchText = "", this._highlightedIndex = null, this._updateFormValue(), this.requestUpdate(), this.updateComplete.then(() => {
+            var s;
+            (s = this.renderRoot.querySelector(".sp-combobox-input")) == null || s.focus();
+          }), this.dispatchEvent(new CustomEvent("sp-change", { detail: { values: this.values }, bubbles: !0, composed: !0 }));
+          return;
+        }
+        this.value = e.value, this._searchText = "", this._open = !1, this._highlightedIndex = null, this._updateFormValue(), this.requestUpdate(), this.dispatchEvent(new CustomEvent("sp-change", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
+      }
+    }, this._handleRemoveValue = (e, t) => {
+      t.stopPropagation(), this.values = this.values.filter((s) => s !== e), this._updateFormValue(), this.requestUpdate(), this.dispatchEvent(new CustomEvent("sp-change", { detail: { values: this.values }, bubbles: !0, composed: !0 }));
+    }, this._handleClear = (e) => {
+      e.stopPropagation(), this.multiple ? this.values = [] : this.value = "", this._searchText = "", this._open = !1, this._highlightedIndex = null, this._updateFormValue(), this.requestUpdate(), this.dispatchEvent(new CustomEvent("sp-clear", { bubbles: !0, composed: !0 }));
+    }, this._handleKeydown = (e) => {
+      if (e.key === "Backspace" && this.multiple && this._searchText === "" && this.values.length > 0) {
+        this.values = this.values.slice(0, -1), this._updateFormValue(), this.requestUpdate(), this.dispatchEvent(new CustomEvent("sp-change", { detail: { values: this.values }, bubbles: !0, composed: !0 }));
+        return;
+      }
+      if (!this._open) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault(), this._open = !0, this.requestUpdate();
+          return;
+        }
+        return;
+      }
+      const t = this._getVisibleOptions(), s = this._highlightedIndex ?? -1;
+      if (e.key === "ArrowDown")
+        e.preventDefault(), this._highlightedIndex = s < t.length - 1 ? s + 1 : 0, this.requestUpdate(), this.updateComplete.then(() => this._scrollHighlightedIntoView());
+      else if (e.key === "ArrowUp")
+        e.preventDefault(), this._highlightedIndex = s > 0 ? s - 1 : t.length - 1, this.requestUpdate(), this.updateComplete.then(() => this._scrollHighlightedIntoView());
+      else if (e.key === "Enter" && s >= 0) {
+        e.preventDefault();
+        const a = t[s];
+        a && !a.disabled && this._handleSelect(a);
+      } else e.key === "Escape" ? (e.preventDefault(), this._open = !1, this._highlightedIndex = null, this.requestUpdate()) : e.key === "Home" ? (e.preventDefault(), this._highlightedIndex = 0, this.requestUpdate(), this.updateComplete.then(() => this._scrollHighlightedIntoView())) : e.key === "End" && (e.preventDefault(), this._highlightedIndex = t.length - 1, this.requestUpdate(), this.updateComplete.then(() => this._scrollHighlightedIntoView()));
+    }, C(this, r, this.attachInternals());
+  }
+  get _filteredOptions() {
+    const e = this._searchText.toLowerCase();
+    return this.options.filter((t) => t.label.toLowerCase().includes(e));
+  }
+  get _selectedLabel() {
+    var e;
+    return ((e = this.options.find((t) => t.value === this.value)) == null ? void 0 : e.label) ?? "";
+  }
+  _getVisibleOptions() {
+    return this._filteredOptions;
+  }
+  _updateFormValue() {
+    if (this.multiple) {
+      const e = new FormData();
+      this.values.forEach((t) => e.append(this.name || "values", t)), n(this, r).setFormValue(e), this.required && this.values.length === 0 ? n(this, r).setValidity({ valueMissing: !0 }, "Please select at least one value") : n(this, r).setValidity({});
+    } else
+      n(this, r).setFormValue(this.value), this.required && !this.value ? n(this, r).setValidity({ valueMissing: !0 }, "Please select a value") : n(this, r).setValidity({});
+  }
+  formResetCallback() {
+    this.value = "", this.values = [], this._updateFormValue(), this.requestUpdate();
+  }
+  updated(e) {
+    super.updated(e), ["value", "values", "required", "multiple"].some((s) => e.has(s)) && this._updateFormValue();
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("mousedown", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("mousedown", this._handleOutsideClick);
+  }
+  _scrollHighlightedIntoView() {
+    if (this._highlightedIndex === null) return;
+    const e = this.renderRoot.querySelector(`#sp-combo-opt-${this._highlightedIndex}`);
+    e == null || e.scrollIntoView({ block: "nearest" });
+  }
+  render() {
+    return y.call(this);
+  }
+};
+r = /* @__PURE__ */ new WeakMap();
+i.styles = v(m);
+i.formAssociated = !0;
+l([
+  h({ type: String })
+], i.prototype, "value", 2);
+l([
+  h({ type: Array })
+], i.prototype, "values", 2);
+l([
+  h({ type: Array })
+], i.prototype, "options", 2);
+l([
+  h({ type: String })
+], i.prototype, "placeholder", 2);
+l([
+  h({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+l([
+  h({ type: Boolean, reflect: !0 })
+], i.prototype, "required", 2);
+l([
+  h({ type: String })
+], i.prototype, "name", 2);
+l([
+  h({ type: String, reflect: !0 })
+], i.prototype, "size", 2);
+l([
+  h({ type: Boolean })
+], i.prototype, "clearable", 2);
+l([
+  h({ type: Boolean })
+], i.prototype, "multiple", 2);
+l([
+  h({ type: Number, attribute: "max-selections" })
+], i.prototype, "maxSelections", 2);
+l([
+  h({ type: String })
+], i.prototype, "error", 2);
+l([
+  h({ type: String })
+], i.prototype, "hint", 2);
+l([
+  h({ type: String })
+], i.prototype, "label", 2);
+l([
+  h({ type: String, attribute: "no-results-text" })
+], i.prototype, "noResultsText", 2);
+l([
+  f()
+], i.prototype, "_highlightedIndex", 2);
+i = l([
+  g("sp-combobox")
+], i);
+export {
+  i as SpComboboxComponent
+};

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

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

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

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

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

@@ -0,0 +1,134 @@
+import { nothing as e, html as t } from "lit";
+import { classMap as a } from "lit/directives/class-map.js";
+function p() {
+  const l = this.multiple ? this.values.length > 0 : !!this.value, r = this.clearable && l;
+  return t`
+    <div class="sp-combobox-wrapper">
+      ${this.label ? t`
+        <label class="sp-combobox-label">
+          ${this.label}${this.required ? t`<span class="sp-required"> *</span>` : e}
+        </label>
+      ` : e}
+
+      <div class=${a({
+    "sp-combobox-container": !0,
+    "sp-combobox-container--open": this._open,
+    "sp-combobox-container--error": !!this.error,
+    "sp-combobox-container--multiple": this.multiple
+  })}>
+
+        ${this.multiple ? t`
+          <div class="sp-combobox-multi-wrap">
+            ${this.values.map((s) => {
+    const o = this.options.find((i) => i.value === s);
+    return t`
+                <span class="sp-combobox-tag">
+                  <span class="sp-combobox-tag-label">${(o == null ? void 0 : o.label) ?? s}</span>
+                  <button
+                    class="sp-combobox-tag-remove"
+                    type="button"
+                    aria-label="Remove ${(o == null ? void 0 : o.label) ?? s}"
+                    @mousedown=${(i) => this._handleRemoveValue(s, i)}
+                  >×</button>
+                </span>
+              `;
+  })}
+            <input
+              class="sp-combobox-input sp-combobox-input--multi"
+              part="input"
+              type="text"
+              role="combobox"
+              aria-autocomplete="list"
+              aria-expanded=${this._open ? "true" : "false"}
+              aria-controls="sp-combobox-listbox"
+              aria-activedescendant=${this._highlightedIndex !== null ? `sp-combo-opt-${this._highlightedIndex}` : e}
+              aria-invalid=${this.error ? "true" : e}
+              aria-required=${this.required ? "true" : e}
+              .value=${this._searchText}
+              placeholder=${this.values.length === 0 ? this.placeholder : ""}
+              ?disabled=${this.disabled}
+              autocomplete="off"
+              @focus=${this._handleInputFocus}
+              @input=${this._handleInputInput}
+              @keydown=${this._handleKeydown}
+            />
+          </div>
+        ` : t`
+          <input
+            class="sp-combobox-input"
+            part="input"
+            type="text"
+            role="combobox"
+            aria-autocomplete="list"
+            aria-expanded=${this._open ? "true" : "false"}
+            aria-controls="sp-combobox-listbox"
+            aria-activedescendant=${this._highlightedIndex !== null ? `sp-combo-opt-${this._highlightedIndex}` : e}
+            aria-invalid=${this.error ? "true" : e}
+            aria-describedby=${this.error || this.hint ? "sp-combo-desc" : e}
+            aria-required=${this.required ? "true" : e}
+            .value=${this._open ? this._searchText : this._selectedLabel}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            autocomplete="off"
+            @focus=${this._handleInputFocus}
+            @input=${this._handleInputInput}
+            @keydown=${this._handleKeydown}
+          />
+        `}
+
+        ${r ? t`
+          <button class="sp-combobox-clear" type="button" @click=${this._handleClear} aria-label="Clear">✕</button>
+        ` : e}
+
+        <button
+          class="sp-combobox-arrow-btn"
+          type="button"
+          tabindex="-1"
+          aria-label=${this._open ? "Close dropdown" : "Open dropdown"}
+          aria-expanded=${this._open ? "true" : "false"}
+          ?disabled=${this.disabled}
+          @click=${this._handleToggleDropdown}
+        ><span class="sp-combobox-arrow" aria-hidden="true">▾</span></button>
+      </div>
+
+      ${this._open ? t`
+        <div
+          class="sp-combobox-dropdown"
+          id="sp-combobox-listbox"
+          role="listbox"
+          aria-multiselectable=${this.multiple ? "true" : e}
+        >
+          ${this._filteredOptions.length > 0 ? this._filteredOptions.map((s, o) => t`
+                <div
+                  id="sp-combo-opt-${o}"
+                  class=${a({
+    "sp-combobox-option": !0,
+    "sp-combobox-option--selected": this.multiple ? this.values.includes(s.value) : s.value === this.value,
+    "sp-combobox-option--disabled": !!s.disabled,
+    "sp-combobox-option--highlighted": this._highlightedIndex === o
+  })}
+                  role="option"
+                  aria-selected=${(this.multiple ? this.values.includes(s.value) : s.value === this.value) ? "true" : "false"}
+                  aria-disabled=${s.disabled ? "true" : e}
+                  @mousedown=${() => this._handleSelect(s)}
+                >
+                  ${this.multiple ? t`
+                    <span class="sp-combobox-option-check" aria-hidden="true">
+                      ${this.values.includes(s.value) ? "✓" : ""}
+                    </span>
+                  ` : e}
+                  ${s.label}
+                </div>
+              `) : t`<div class="sp-combobox-no-results">${this.noResultsText}</div>`}
+        </div>
+      ` : e}
+
+      ${this.error ? t`<span id="sp-combo-desc" class="sp-combobox-error" role="alert">${this.error}</span>` : e}
+      ${!this.error && this.hint ? t`<span id="sp-combo-desc" class="sp-combobox-hint">${this.hint}</span>` : e}
+    </div>
+  `;
+}
+export {
+  p as comboboxTemplate
+};

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

@@ -0,0 +1,24 @@
+export type SpComboboxSize = "sm" | "md" | "lg";
+export interface SpComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SpComboboxProps {
+    value: string;
+    values: string[];
+    options: SpComboboxOption[];
+    placeholder: string;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    size: SpComboboxSize;
+    clearable: boolean;
+    multiple: boolean;
+    maxSelections: number;
+    error: string;
+    hint: string;
+    label: string;
+    noResultsText: string;
+}
+//# sourceMappingURL=sp-combobox.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-combobox.types.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/sp-combobox.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,cAAc,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB"}

package/dist/components/command-palette/index.d.ts

@@ -0,0 +1,3 @@
+export { SpCommandPaletteComponent } from './sp-command-palette.js';
+export type { CommandItem, SpCommandPaletteProps } from './sp-command-palette.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/command-palette/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,YAAY,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/components/command-palette/sp-command-palette.css.js

@@ -0,0 +1,4 @@
+const e = ":host{display:contents}.sp-command-palette-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--sp-overlay, rgba(0, 0, 0, .5));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:999}.sp-command-palette{position:fixed;top:20%;left:50%;transform:translate(-50%);width:90vw;max-width:560px;background:var(--sp-bg, #ffffff);border-radius:12px;box-shadow:0 25px 60px #00000040,0 8px 20px #00000026;z-index:1000;overflow:hidden;animation:sp-cp-in .15s ease}@keyframes sp-cp-in{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}@media(prefers-reduced-motion:reduce){.sp-command-palette{animation:none}}.sp-command-palette-search{display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--sp-border-subtle, #e5e7eb);gap:10px}.sp-command-search-icon{width:18px;height:18px;flex-shrink:0;color:var(--sp-text-placeholder, #9ca3af)}.sp-command-palette-input{flex:1;border:none;outline:none;padding:16px 0;font-size:1.1rem;color:var(--sp-text, #111827);background:transparent;font-family:inherit}.sp-command-palette-input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}.sp-command-esc-hint{font-size:.7rem;padding:2px 5px;background:var(--sp-bg-muted, #f3f4f6);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:4px;color:var(--sp-text-muted, #6b7280);font-family:monospace;flex-shrink:0}.sp-command-palette-results{max-height:400px;overflow-y:auto;padding:4px 0}.sp-command-loading,.sp-command-empty{padding:24px 16px;text-align:center;color:var(--sp-text-placeholder, #9ca3af);font-size:.9rem}.sp-command-group-header{padding:8px 16px 4px;font-size:.65rem;font-variant:small-caps;letter-spacing:.08em;color:var(--sp-text-placeholder, #9ca3af);font-weight:600;text-transform:uppercase}.sp-command-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:inherit;font-size:.9rem;color:var(--sp-text, #111827);transition:background .1s}.sp-command-item:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-command-item--active{background:var(--sp-primary-bg, #eff6ff);outline:none}.sp-command-item--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.sp-command-item-icon{font-size:1rem;width:20px;text-align:center;flex-shrink:0}.sp-command-item-body{flex:1;min-width:0}.sp-command-item-label{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp-command-item-description{font-size:.78rem;color:var(--sp-text-muted, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}.sp-command-palette-footer{display:flex;align-items:center;gap:16px;padding:8px 16px;border-top:1px solid var(--sp-border-subtle, #e5e7eb);background:var(--sp-bg-subtle, #f9fafb);font-size:.72rem;color:var(--sp-text-placeholder, #9ca3af)}.sp-command-palette-footer kbd{padding:1px 5px;background:var(--sp-bg, #ffffff);border:1px solid var(--sp-border, #d1d5db);border-radius:3px;font-size:.7rem;font-family:monospace;color:var(--sp-text-secondary, #374151)}";
+export {
+  e as default
+};

package/dist/components/command-palette/sp-command-palette.d.ts

@@ -0,0 +1,44 @@
+import { LitElement, TemplateResult } from 'lit';
+import { CommandItem } from './sp-command-palette.types.js';
+/**
+ * Command palette component — a modal search/action launcher.
+ *
+ * @element sp-command-palette
+ *
+ * @prop {boolean} open          - Whether the palette is open
+ * @prop {string}  placeholder   - Input placeholder text
+ * @prop {string}  emptyMessage  - Message shown when no results
+ * @prop {boolean} loading       - Show loading state
+ *
+ * @fires {CustomEvent} sp-open           - Emitted when palette opens
+ * @fires {CustomEvent} sp-close          - Emitted when palette closes
+ * @fires {CustomEvent<{item:CommandItem}>} sp-select - Emitted when an item is selected
+ */
+export declare class SpCommandPaletteComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    open: boolean;
+    placeholder: string;
+    emptyMessage: string;
+    loading: boolean;
+    _query: string;
+    _activeIndex: number;
+    _items: CommandItem[];
+    private _previousFocus;
+    setItems(items: CommandItem[]): void;
+    _getFilteredItems(): CommandItem[];
+    _renderGroups(items: CommandItem[]): TemplateResult;
+    private _renderItem;
+    _setActiveIndex(index: number): void;
+    _handleInput(e: Event): void;
+    _handleKeydown: (e: KeyboardEvent) => void;
+    _executeItem(item: CommandItem): void;
+    _close(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-command-palette": SpCommandPaletteComponent;
+    }
+}
+//# sourceMappingURL=sp-command-palette.d.ts.map

package/dist/components/command-palette/sp-command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-command-palette.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/sp-command-palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAEjE;;;;;;;;;;;;;GAaG;AACH,qBACa,yBAA0B,SAAQ,UAAU;IACvD,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,UAAS;IAGb,WAAW,SAAwB;IAGnC,YAAY,SAAsB;IAGlC,OAAO,UAAS;IAGhB,MAAM,SAAM;IAGZ,YAAY,SAAM;IAGlB,MAAM,EAAE,WAAW,EAAE,CAAM;IAE3B,OAAO,CAAC,cAAc,CAAwB;IAE9C,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI;IAIpC,iBAAiB,IAAI,WAAW,EAAE;IAWlC,aAAa,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,cAAc;IA6CnD,OAAO,CAAC,WAAW;IAwBnB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIpC,YAAY,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAK5B,cAAc,GAAI,GAAG,aAAa,KAAG,IAAI,CAuBvC;IAEF,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAarC,MAAM,IAAI,IAAI;IASL,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAoB5C,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,yBAAyB,CAAC;KACjD;CACF"}

package/dist/components/command-palette/sp-command-palette.js

@@ -0,0 +1,148 @@
+import { unsafeCSS as f, LitElement as _, html as a, nothing as m } from "lit";
+import { property as u, state as l, customElement as v } from "lit/decorators.js";
+import y from "./sp-command-palette.css.js";
+import { commandPaletteTemplate as I } from "./sp-command-palette.template.js";
+var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, c = (e, t, s, o) => {
+  for (var i = o > 1 ? void 0 : o ? b(t, s) : t, r = e.length - 1, n; r >= 0; r--)
+    (n = e[r]) && (i = (o ? n(t, s, i) : n(i)) || i);
+  return o && i && g(t, s, i), i;
+};
+let p = class extends _ {
+  constructor() {
+    super(...arguments), this.open = !1, this.placeholder = "Search commands...", this.emptyMessage = "No results found", this.loading = !1, this._query = "", this._activeIndex = -1, this._items = [], this._previousFocus = null, this._handleKeydown = (e) => {
+      const t = this._getFilteredItems(), s = t.length;
+      if (e.key === "ArrowDown")
+        e.preventDefault(), this._activeIndex = s === 0 ? -1 : (this._activeIndex + 1) % s;
+      else if (e.key === "ArrowUp")
+        e.preventDefault(), this._activeIndex = s === 0 ? -1 : this._activeIndex <= 0 ? s - 1 : this._activeIndex - 1;
+      else if (e.key === "Enter") {
+        e.preventDefault();
+        const o = t[this._activeIndex];
+        o && this._executeItem(o);
+      } else e.key === "Escape" && (e.preventDefault(), this._close());
+    };
+  }
+  setItems(e) {
+    this._items = e;
+  }
+  _getFilteredItems() {
+    if (!this._query.trim()) return this._items;
+    const e = this._query.toLowerCase();
+    return this._items.filter((t) => {
+      var s, o;
+      return !!(t.label.toLowerCase().includes(e) || (s = t.description) != null && s.toLowerCase().includes(e) || (o = t.keywords) != null && o.some((i) => i.toLowerCase().includes(e)));
+    });
+  }
+  _renderGroups(e) {
+    const t = /* @__PURE__ */ new Map(), s = [];
+    for (const r of e)
+      if (r.group) {
+        const n = t.get(r.group) ?? [];
+        n.push(r), t.set(r.group, n);
+      } else
+        s.push(r);
+    const o = [];
+    if (s.length > 0)
+      for (const r of s) o.push(r);
+    for (const r of t.values())
+      for (const n of r) o.push(n);
+    const i = [];
+    for (const r of s) {
+      const n = o.indexOf(r);
+      i.push(this._renderItem(r, n));
+    }
+    for (const [r, n] of t.entries()) {
+      i.push(
+        a`<div class="sp-command-group-header">${r}</div>`
+      );
+      for (const d of n) {
+        const h = o.indexOf(d);
+        i.push(this._renderItem(d, h));
+      }
+    }
+    return a`${i}`;
+  }
+  _renderItem(e, t) {
+    const s = this._activeIndex === t;
+    return a`
+      <button
+        class="sp-command-item ${s ? "sp-command-item--active" : ""} ${e.disabled ? "sp-command-item--disabled" : ""}"
+        role="option"
+        aria-selected=${s}
+        aria-disabled=${e.disabled ?? !1}
+        @click=${() => this._executeItem(e)}
+        @mouseenter=${() => this._setActiveIndex(t)}
+      >
+        ${e.icon ? a`<span class="sp-command-item-icon">${e.icon}</span>` : m}
+        <div class="sp-command-item-body">
+          <div class="sp-command-item-label">${e.label}</div>
+          ${e.description ? a`<div class="sp-command-item-description">${e.description}</div>` : m}
+        </div>
+      </button>
+    `;
+  }
+  _setActiveIndex(e) {
+    this._activeIndex = e;
+  }
+  _handleInput(e) {
+    this._query = e.target.value, this._activeIndex = 0;
+  }
+  _executeItem(e) {
+    var t;
+    e.disabled || ((t = e.action) == null || t.call(e), this.dispatchEvent(
+      new CustomEvent("sp-select", {
+        detail: { item: e },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this._close());
+  }
+  _close() {
+    this.open = !1, this._query = "", this._activeIndex = -1, this.dispatchEvent(
+      new CustomEvent("sp-close", { bubbles: !0, composed: !0 })
+    );
+  }
+  updated(e) {
+    var t, s;
+    e.has("open") && (this.open ? (this._previousFocus = document.activeElement, this.dispatchEvent(
+      new CustomEvent("sp-open", { bubbles: !0, composed: !0 })
+    ), this.updateComplete.then(() => {
+      var i;
+      const o = (i = this.shadowRoot) == null ? void 0 : i.querySelector(
+        ".sp-command-palette-input"
+      );
+      o == null || o.focus();
+    })) : ((s = (t = this._previousFocus) == null ? void 0 : t.focus) == null || s.call(t), this._previousFocus = null));
+  }
+  render() {
+    return I.call(this);
+  }
+};
+p.styles = f(y);
+c([
+  u({ type: Boolean, reflect: !0 })
+], p.prototype, "open", 2);
+c([
+  u({ type: String })
+], p.prototype, "placeholder", 2);
+c([
+  u({ type: String, attribute: "empty-message" })
+], p.prototype, "emptyMessage", 2);
+c([
+  u({ type: Boolean })
+], p.prototype, "loading", 2);
+c([
+  l()
+], p.prototype, "_query", 2);
+c([
+  l()
+], p.prototype, "_activeIndex", 2);
+c([
+  l()
+], p.prototype, "_items", 2);
+p = c([
+  v("sp-command-palette")
+], p);
+export {
+  p as SpCommandPaletteComponent
+};

package/dist/components/command-palette/sp-command-palette.template.d.ts

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

package/dist/components/command-palette/sp-command-palette.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-command-palette.template.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/sp-command-palette.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,yBAAyB,GAC9B,cAAc,CAiEhB"}