sp-component 0.0.1

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

@@ -0,0 +1,167 @@
+import { nothing as e, html as s } from "lit";
+import { classMap as l } from "lit/directives/class-map.js";
+function h() {
+  const p = this.multiple ? this.values.length > 0 : !!this.value, r = this.clearable && p, n = this._renderGroups;
+  return s`
+    <div class="sp-ac-wrapper">
+      ${this.label ? s`
+        <label class="sp-ac-label">
+          ${this.label}${this.required ? s`<span class="sp-ac-required"> *</span>` : e}
+        </label>
+      ` : e}
+
+      <div class=${l({
+    "sp-ac-container": !0,
+    "sp-ac-container--open": this._open,
+    "sp-ac-container--error": !!this.error,
+    "sp-ac-container--multiple": this.multiple,
+    "sp-ac-container--disabled": this.disabled
+  })}>
+
+        ${this.multiple ? s`
+          <!-- Multiple mode: tags + inline input -->
+          <div class="sp-ac-multi-wrap">
+            ${this.values.map((t) => {
+    const a = this.options.find((i) => i.value === t);
+    return s`
+                <span class="sp-ac-tag">
+                  <span class="sp-ac-tag-label">${(a == null ? void 0 : a.label) ?? t}</span>
+                  <button
+                    class="sp-ac-tag-remove"
+                    type="button"
+                    aria-label="Remove ${(a == null ? void 0 : a.label) ?? t}"
+                    @mousedown=${(i) => this._handleRemoveValue(t, i)}
+                  >×</button>
+                </span>
+              `;
+  })}
+            <input
+              class="sp-ac-input sp-ac-input--multi"
+              part="input"
+              type="text"
+              role="combobox"
+              aria-autocomplete="list"
+              aria-expanded=${this._open ? "true" : "false"}
+              aria-controls="sp-ac-listbox"
+              aria-activedescendant=${this._highlightedIndex !== null ? `sp-ac-opt-${this._highlightedIndex}` : e}
+              aria-invalid=${this.error ? "true" : e}
+              aria-required=${this.required ? "true" : e}
+              .value=${this._query}
+              placeholder=${this.values.length === 0 ? this.placeholder : ""}
+              ?disabled=${this.disabled}
+              autocomplete="off"
+              @focus=${this._handleInputFocus}
+              @input=${this._handleInputInput}
+              @keydown=${this._handleKeydown}
+            />
+          </div>
+        ` : s`
+          <!-- Single mode: input shows selected label or query -->
+          <input
+            class="sp-ac-input"
+            part="input"
+            type="text"
+            role="combobox"
+            aria-autocomplete="list"
+            aria-expanded=${this._open ? "true" : "false"}
+            aria-controls="sp-ac-listbox"
+            aria-activedescendant=${this._highlightedIndex !== null ? `sp-ac-opt-${this._highlightedIndex}` : e}
+            aria-invalid=${this.error ? "true" : e}
+            aria-describedby=${this.error || this.hint ? "sp-ac-desc" : e}
+            aria-required=${this.required ? "true" : e}
+            .value=${this._open ? this._query : this._selectedLabel}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            autocomplete="off"
+            @focus=${this._handleInputFocus}
+            @input=${this._handleInputInput}
+            @keydown=${this._handleKeydown}
+          />
+        `}
+
+        ${r ? s`
+          <button class="sp-ac-clear" type="button" @click=${this._handleClear} aria-label="Clear">✕</button>
+        ` : e}
+
+        <button
+          class="sp-ac-arrow-btn"
+          type="button"
+          tabindex="-1"
+          aria-label=${this._open ? "Close" : "Open"}
+          aria-expanded=${this._open ? "true" : "false"}
+          ?disabled=${this.disabled}
+          @click=${this._handleToggleDropdown}
+        ><span class="sp-ac-arrow" aria-hidden="true">▾</span></button>
+      </div>
+
+      ${this._open ? s`
+        <div class="sp-ac-dropdown" id="sp-ac-listbox" role="listbox" aria-multiselectable=${this.multiple ? "true" : e}>
+
+          ${this.loading ? s`
+            <div class="sp-ac-loading" aria-live="polite">
+              <span class="sp-ac-spinner" aria-hidden="true"></span>
+              <span>Loading…</span>
+            </div>
+          ` : e}
+
+          ${!this.loading && n.every((t) => t.options.length === 0) && !this._showCreate ? s`
+            <div class="sp-ac-no-results">${this.noResultsText}</div>
+          ` : e}
+
+          ${this.loading ? e : n.map((t) => s`
+            ${t.label ? s`<div class="sp-ac-group-label" role="presentation">${t.label}</div>` : e}
+            ${t.options.map(({ option: a, flatIndex: i }) => s`
+              <div
+                id="sp-ac-opt-${i}"
+                class=${l({
+    "sp-ac-option": !0,
+    "sp-ac-option--selected": this.multiple ? this.values.includes(a.value) : a.value === this.value,
+    "sp-ac-option--disabled": !!a.disabled,
+    "sp-ac-option--highlighted": this._highlightedIndex === i
+  })}
+                role="option"
+                aria-selected=${(this.multiple ? this.values.includes(a.value) : a.value === this.value) ? "true" : "false"}
+                aria-disabled=${a.disabled ? "true" : e}
+                @mousedown=${() => this._handleSelect(a)}
+              >
+                ${this.multiple ? s`
+                  <span class="sp-ac-option-check" aria-hidden="true">
+                    ${this.values.includes(a.value) ? s`<svg viewBox="0 0 12 12" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1,6 4.5,9.5 11,2"/></svg>` : e}
+                  </span>
+                ` : e}
+                <span class="sp-ac-option-content">
+                  <span class="sp-ac-option-label">${a.label}</span>
+                  ${a.description ? s`<span class="sp-ac-option-desc">${a.description}</span>` : e}
+                </span>
+              </div>
+            `)}
+          `)}
+
+          ${this._showCreate ? s`
+            <div
+              id="sp-ac-opt-${this._flatOptions.length}"
+              class=${l({
+    "sp-ac-option": !0,
+    "sp-ac-option--create": !0,
+    "sp-ac-option--highlighted": this._highlightedIndex === this._flatOptions.length
+  })}
+              role="option"
+              aria-selected="false"
+              @mousedown=${this._handleCreate}
+            >
+              <span class="sp-ac-option-create-icon" aria-hidden="true">+</span>
+              <span>${this._createLabel}</span>
+            </div>
+          ` : e}
+        </div>
+      ` : e}
+
+      ${this.error ? s`<span id="sp-ac-desc" class="sp-ac-error" role="alert">${this.error}</span>` : e}
+      ${!this.error && this.hint ? s`<span id="sp-ac-desc" class="sp-ac-hint">${this.hint}</span>` : e}
+    </div>
+  `;
+}
+export {
+  h as autocompleteTemplate
+};

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

@@ -0,0 +1,32 @@
+export type SpAutocompleteSize = "sm" | "md" | "lg";
+export type SpAutocompleteFilterMode = "contains" | "startsWith" | "none";
+export interface SpAutocompleteOption {
+    value: string;
+    label: string;
+    description?: string;
+    group?: string;
+    disabled?: boolean;
+}
+export interface SpAutocompleteProps {
+    value: string;
+    values: string[];
+    options: SpAutocompleteOption[];
+    placeholder: string;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    size: SpAutocompleteSize;
+    clearable: boolean;
+    multiple: boolean;
+    maxSelections: number;
+    filterMode: SpAutocompleteFilterMode;
+    loading: boolean;
+    creatable: boolean;
+    createText: string;
+    debounce: number;
+    error: string;
+    hint: string;
+    label: string;
+    noResultsText: string;
+}
+//# sourceMappingURL=sp-autocomplete.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-autocomplete.types.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/sp-autocomplete.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpD,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAE1E,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,kBAAkB,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,wBAAwB,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB"}

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

@@ -0,0 +1,3 @@
+export { SpAvatarComponent } from './sp-avatar.js';
+export type { SpAvatarProps, SpAvatarShape, SpAvatarSize } from './sp-avatar.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const a = ':host{display:inline-flex;flex-shrink:0}.sp-avatar-wrapper{position:relative;display:inline-flex;flex-shrink:0}.sp-avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--sp-avatar-bg, #e5e7eb);color:var(--sp-avatar-color, #6b7280);font-weight:600;-webkit-user-select:none;user-select:none;flex-shrink:0}:host([shape="circle"]) .sp-avatar{border-radius:50%}:host([shape="square"]) .sp-avatar{border-radius:6px}:host([size="sm"]) .sp-avatar{width:32px;height:32px;font-size:12px}:host([size="md"]) .sp-avatar{width:40px;height:40px;font-size:14px}:host([size="lg"]) .sp-avatar{width:56px;height:56px;font-size:18px}:host([size="xl"]) .sp-avatar{width:72px;height:72px;font-size:22px}img{width:100%;height:100%;object-fit:cover;display:block}.sp-avatar-initials{line-height:1}.sp-avatar-placeholder{display:flex;align-items:center;justify-content:center;width:60%;height:60%}.sp-avatar-placeholder svg{width:100%;height:100%}.sp-avatar-shimmer{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--sp-border-subtle, #e5e7eb) 25%,var(--sp-bg-muted, #f3f4f6) 50%,var(--sp-border-subtle, #e5e7eb) 75%);background-size:200% 100%;animation:sp-avatar-shimmer 1.5s infinite}@keyframes sp-avatar-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.sp-avatar-status{position:absolute;bottom:0;right:0;border-radius:50%;border:2px solid var(--sp-bg, white);display:block}:host([size="sm"]) .sp-avatar-status{width:9px;height:9px}:host([size="md"]) .sp-avatar-status{width:11px;height:11px}:host([size="lg"]) .sp-avatar-status{width:14px;height:14px}:host([size="xl"]) .sp-avatar-status{width:17px;height:17px}.sp-avatar-status--online{background:#22c55e}.sp-avatar-status--offline{background:var(--sp-text-placeholder, #9ca3af)}.sp-avatar-status--away{background:var(--sp-warning, #FAAD14)}.sp-avatar-status--busy{background:var(--sp-error, #FF4D4F)}@media(prefers-reduced-motion:reduce){:host{transition:none!important}.sp-avatar-shimmer{animation:none;background:var(--sp-border-subtle, #e5e7eb)}}';
+export {
+  a as default
+};

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

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { SpAvatarShape, SpAvatarSize, SpAvatarStatus } from './sp-avatar.types.js';
+/**
+ * An avatar component that displays an image, initials, or a placeholder icon.
+ *
+ * @element sp-avatar
+ *
+ * @prop {string}           src      - Image URL
+ * @prop {string}           alt      - Image alt text
+ * @prop {string}           initials - Text initials shown when no image is available
+ * @prop {SpAvatarShape}    shape    - Shape: circle | square
+ * @prop {SpAvatarSize}     size     - Size: sm | md | lg | xl
+ * @prop {SpAvatarStatus}   status   - Status dot: online | offline | away | busy
+ * @prop {boolean}          loading  - Show shimmer loading state
+ */
+export declare class SpAvatarComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    src: string;
+    alt: string;
+    initials: string;
+    shape: SpAvatarShape;
+    size: SpAvatarSize;
+    status: SpAvatarStatus | undefined;
+    loading: boolean;
+    _imageError: boolean;
+    updated(changedProperties: Map<string, unknown>): void;
+    _getInitials(): string;
+    readonly _handleImageError: () => void;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-avatar": SpAvatarComponent;
+    }
+}
+//# sourceMappingURL=sp-avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/sp-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAExF;;;;;;;;;;;;GAYG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAqB;IAG3C,GAAG,SAAM;IAGT,GAAG,SAAM;IAGT,QAAQ,SAAM;IAGd,KAAK,EAAE,aAAa,CAAY;IAGhC,IAAI,EAAE,YAAY,CAAQ;IAG1B,MAAM,EAAE,cAAc,GAAG,SAAS,CAAa;IAG/C,OAAO,UAAS;IAGhB,WAAW,UAAS;IAEX,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM/D,YAAY,IAAI,MAAM;IAStB,QAAQ,CAAC,iBAAiB,aAGxB;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,56 @@
+import { unsafeCSS as m, LitElement as h } from "lit";
+import { property as s, state as f, customElement as u } from "lit/decorators.js";
+import y from "./sp-avatar.css.js";
+import { avatarTemplate as c } from "./sp-avatar.template.js";
+var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (i, p, a, o) => {
+  for (var r = o > 1 ? void 0 : o ? _(p, a) : p, l = i.length - 1, n; l >= 0; l--)
+    (n = i[l]) && (r = (o ? n(p, a, r) : n(r)) || r);
+  return o && r && g(p, a, r), r;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.src = "", this.alt = "", this.initials = "", this.shape = "circle", this.size = "md", this.status = void 0, this.loading = !1, this._imageError = !1, this._handleImageError = () => {
+      this._imageError = !0, this.requestUpdate();
+    };
+  }
+  updated(i) {
+    i.has("src") && (this._imageError = !1);
+  }
+  _getInitials() {
+    return this.initials.split(" ").map((i) => i[0] ?? "").join("").toUpperCase().slice(0, 2);
+  }
+  render() {
+    return c.call(this);
+  }
+};
+t.styles = m(y);
+e([
+  s({ type: String })
+], t.prototype, "src", 2);
+e([
+  s({ type: String })
+], t.prototype, "alt", 2);
+e([
+  s({ type: String })
+], t.prototype, "initials", 2);
+e([
+  s({ type: String, reflect: !0 })
+], t.prototype, "shape", 2);
+e([
+  s({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+e([
+  s({ type: String, reflect: !0 })
+], t.prototype, "status", 2);
+e([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "loading", 2);
+e([
+  f()
+], t.prototype, "_imageError", 2);
+t = e([
+  u("sp-avatar")
+], t);
+export {
+  t as SpAvatarComponent
+};

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { nothing as s, html as a } from "lit";
+function r() {
+  return a`
+    <div class="sp-avatar-wrapper">
+      <div class="sp-avatar" style="background: var(--sp-avatar-bg); color: var(--sp-avatar-color);">
+        ${this.loading ? a`<span class="sp-avatar-shimmer" aria-hidden="true"></span>` : this.src && !this._imageError ? a`<img src=${this.src} alt=${this.alt || s} @error=${this._handleImageError} />` : this.initials ? a`<span class="sp-avatar-initials">${this._getInitials()}</span>` : a`<span class="sp-avatar-placeholder" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
+                  </svg>
+                </span>`}
+      </div>
+      ${this.status ? a`<span class="sp-avatar-status sp-avatar-status--${this.status}" aria-label=${this.status}></span>` : s}
+    </div>
+  `;
+}
+export {
+  r as avatarTemplate
+};

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

@@ -0,0 +1,13 @@
+export type SpAvatarShape = "circle" | "square";
+export type SpAvatarSize = "sm" | "md" | "lg" | "xl";
+export type SpAvatarStatus = "online" | "offline" | "away" | "busy";
+export interface SpAvatarProps {
+    src: string;
+    alt: string;
+    initials: string;
+    shape: SpAvatarShape;
+    size: SpAvatarSize;
+    status: SpAvatarStatus | undefined;
+    loading: boolean;
+}
+//# sourceMappingURL=sp-avatar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-avatar.types.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/sp-avatar.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpE,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,aAAa,CAAC;IACrB,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,EAAE,cAAc,GAAG,SAAS,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;CAClB"}

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

@@ -0,0 +1,3 @@
+export { SpBadgeComponent } from './sp-badge.js';
+export type { SpBadgeProps, SpBadgeVariant } from './sp-badge.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -0,0 +1,4 @@
+const e = ':host{display:inline-flex}.sp-badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500;line-height:1.4;white-space:nowrap}.sp-badge-content{display:inline-block;transition:transform .15s ease,opacity .15s ease}.sp-badge--animating .sp-badge-content{animation:sp-badge-pop .2s ease}@keyframes sp-badge-pop{0%{transform:scale(.85);opacity:.6}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.sp-badge-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;opacity:.7;color:inherit;line-height:1;margin-left:2px}.sp-badge-remove:hover{opacity:1}.sp-badge-remove:focus-visible{outline:2px solid currentColor;outline-offset:1px;border-radius:2px}:host([pill]) .sp-badge{border-radius:9999px;padding:2px 10px}:host([variant="primary"]) .sp-badge{background:var(--sp-primary-bg-hover, #dbeafe);color:var(--sp-primary-active, #1d4ed8)}:host([variant="secondary"]) .sp-badge{background:var(--sp-bg-muted, #f3f4f6);color:var(--sp-text-secondary, #374151)}:host([variant="success"]) .sp-badge{background:#dcfce7;color:#15803d}:host([variant="warning"]) .sp-badge{background:#fef9c3;color:#a16207}:host([variant="danger"]) .sp-badge{background:#fee2e2;color:#b91c1c}:host([variant="neutral"]) .sp-badge{background:var(--sp-border-subtle, #e5e7eb);color:#4b5563}:host([pulsing]) .sp-badge{animation:sp-pulse 1.5s infinite}@keyframes sp-pulse{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}';
+export {
+  e as default
+};

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

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+import { SpBadgeVariant } from './sp-badge.types.js';
+/**
+ * A small status badge component.
+ *
+ * @element sp-badge
+ *
+ * @prop {SpBadgeVariant} variant   - Color variant: primary | secondary | success | warning | danger | neutral
+ * @prop {boolean}        pill      - Renders with fully rounded corners
+ * @prop {boolean}        pulsing   - Applies a pulsing opacity animation
+ * @prop {number}         max       - Max numeric value before showing "99+" (default 99)
+ * @prop {boolean}        removable - Show × remove button, emits sp-remove
+ *
+ * @fires {CustomEvent} sp-remove - Emitted when the remove button is clicked
+ *
+ * @slot - Badge label content
+ */
+export declare class SpBadgeComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    variant: SpBadgeVariant;
+    pill: boolean;
+    pulsing: boolean;
+    max: number;
+    removable: boolean;
+    _prevContent: string;
+    _animating: boolean;
+    /** Returns the capped display label when the slotted text is a number exceeding `max`. */
+    _getDisplayContent(rawText: string): string;
+    readonly _handleRemove: (e: Event) => void;
+    readonly _handleSlotChange: (e: Event) => void;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-badge": SpBadgeComponent;
+    }
+}
+//# sourceMappingURL=sp-badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/sp-badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D;;;;;;;;;;;;;;GAcG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,EAAE,cAAc,CAAa;IAGpC,IAAI,UAAS;IAGb,OAAO,UAAS;IAGhB,GAAG,SAAM;IAGT,SAAS,UAAS;IAGlB,YAAY,SAAM;IAGlB,UAAU,UAAS;IAEnB,0FAA0F;IAC1F,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;IAQ3C,QAAQ,CAAC,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAGvC;IAEF,QAAQ,CAAC,iBAAiB,GAAI,GAAG,KAAK,KAAG,IAAI,CAQ3C;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF"}

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

@@ -0,0 +1,57 @@
+import { unsafeCSS as u, LitElement as h } from "lit";
+import { property as i, state as m, customElement as f } from "lit/decorators.js";
+import v from "./sp-badge.css.js";
+import { badgeTemplate as y } from "./sp-badge.template.js";
+var _ = Object.defineProperty, c = Object.getOwnPropertyDescriptor, o = (e, r, n, p) => {
+  for (var s = p > 1 ? void 0 : p ? c(r, n) : r, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (s = (p ? l(r, n, s) : l(s)) || s);
+  return p && s && _(r, n, s), s;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.pill = !1, this.pulsing = !1, this.max = 99, this.removable = !1, this._prevContent = "", this._animating = !1, this._handleRemove = (e) => {
+      e.stopPropagation(), this.dispatchEvent(new CustomEvent("sp-remove", { bubbles: !0, composed: !0 }));
+    }, this._handleSlotChange = (e) => {
+      const n = e.target.assignedNodes().map((p) => p.textContent ?? "").join("").trim();
+      n !== this._prevContent && (this._animating = !0, this._prevContent = n, setTimeout(() => {
+        this._animating = !1, this.requestUpdate();
+      }, 200));
+    };
+  }
+  /** Returns the capped display label when the slotted text is a number exceeding `max`. */
+  _getDisplayContent(e) {
+    const r = Number(e.trim());
+    return !Number.isNaN(r) && r > this.max ? `${this.max}+` : e;
+  }
+  render() {
+    return y.call(this);
+  }
+};
+t.styles = u(v);
+o([
+  i({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "pill", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "pulsing", 2);
+o([
+  i({ type: Number })
+], t.prototype, "max", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "removable", 2);
+o([
+  m()
+], t.prototype, "_prevContent", 2);
+o([
+  m()
+], t.prototype, "_animating", 2);
+t = o([
+  f("sp-badge")
+], t);
+export {
+  t as SpBadgeComponent
+};

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { nothing as e, html as n } from "lit";
+import { classMap as s } from "lit/directives/class-map.js";
+function i() {
+  const t = this._getDisplayContent(this._prevContent);
+  return n`
+    <span
+      class=${s({
+    "sp-badge": !0,
+    "sp-badge--animating": this._animating
+  })}
+    >
+      <span class="sp-badge-content">
+        <slot @slotchange=${this._handleSlotChange}>${t !== this._prevContent ? t : e}</slot>
+      </span>
+      ${this.removable ? n`<button class="sp-badge-remove" type="button" aria-label="Remove" @click=${this._handleRemove}>
+            <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
+              <path d="M1 1l6 6M7 1L1 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </button>` : e}
+    </span>
+  `;
+}
+export {
+  i as badgeTemplate
+};

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

@@ -0,0 +1,9 @@
+export type SpBadgeVariant = "primary" | "secondary" | "success" | "warning" | "danger" | "neutral";
+export interface SpBadgeProps {
+    variant: SpBadgeVariant;
+    pill: boolean;
+    pulsing: boolean;
+    max: number;
+    removable: boolean;
+}
+//# sourceMappingURL=sp-badge.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/badge/sp-badge.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEpG,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,OAAO,CAAC;CACpB"}

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

@@ -0,0 +1,4 @@
+export { SpBreadcrumbComponent } from './sp-breadcrumb.js';
+export { SpBreadcrumbItemComponent } from './sp-breadcrumb-item.js';
+export type { SpBreadcrumbProps, SpBreadcrumbItemProps } from './sp-breadcrumb.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/breadcrumb/sp-breadcrumb-item.css.js

@@ -0,0 +1,4 @@
+const e = ":host{display:contents}.sp-breadcrumb-item{display:inline-flex;align-items:center;gap:4px}.sp-breadcrumb-link{color:var(--sp-primary, #3b82f6);text-decoration:none;font-size:14px}.sp-breadcrumb-link:hover{text-decoration:underline}.sp-breadcrumb-separator{color:var(--sp-text-placeholder, #9ca3af);font-size:14px}.sp-breadcrumb-current{color:var(--sp-text-muted, #6b7280);font-size:14px}.sp-breadcrumb-link: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]{transition:none!important}}";
+export {
+  e as default
+};

package/dist/components/breadcrumb/sp-breadcrumb-item.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+/**
+ * Breadcrumb item component. Must be used inside sp-breadcrumb.
+ *
+ * @element sp-breadcrumb-item
+ *
+ * @prop {string}  href      - Link URL (renders as anchor when set)
+ * @prop {string}  target    - Link target (_blank, _self, etc.)
+ * @prop {string}  rel       - Link rel attribute
+ * @prop {boolean} active    - Whether this is the current/active item (set by sp-breadcrumb)
+ * @prop {string}  separator - Separator character (set by sp-breadcrumb)
+ *
+ * @slot - Item label content
+ */
+export declare class SpBreadcrumbItemComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    href: string;
+    target: string;
+    rel: string;
+    active: boolean;
+    separator: string;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-breadcrumb-item": SpBreadcrumbItemComponent;
+    }
+}
+//# sourceMappingURL=sp-breadcrumb-item.d.ts.map

package/dist/components/breadcrumb/sp-breadcrumb-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-breadcrumb-item.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/sp-breadcrumb-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;;GAYG;AACH,qBACa,yBAA0B,SAAQ,UAAU;IACvD,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,SAAM;IAGV,MAAM,SAAM;IAGZ,GAAG,SAAM;IAGT,MAAM,UAAS;IAGf,SAAS,SAAO;IAEP,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,yBAAyB,CAAC;KACjD;CACF"}

package/dist/components/breadcrumb/sp-breadcrumb-item.js

@@ -0,0 +1,39 @@
+import { unsafeCSS as n, LitElement as f } from "lit";
+import { property as p, customElement as c } from "lit/decorators.js";
+import y from "./sp-breadcrumb-item.css.js";
+import { breadcrumbItemTemplate as u } from "./sp-breadcrumb-item.template.js";
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (l, o, m, s) => {
+  for (var e = s > 1 ? void 0 : s ? v(o, m) : o, a = l.length - 1, i; a >= 0; a--)
+    (i = l[a]) && (e = (s ? i(o, m, e) : i(e)) || e);
+  return s && e && h(o, m, e), e;
+};
+let t = class extends f {
+  constructor() {
+    super(...arguments), this.href = "", this.target = "", this.rel = "", this.active = !1, this.separator = "/";
+  }
+  render() {
+    return u.call(this);
+  }
+};
+t.styles = n(y);
+r([
+  p({ type: String })
+], t.prototype, "href", 2);
+r([
+  p({ type: String })
+], t.prototype, "target", 2);
+r([
+  p({ type: String })
+], t.prototype, "rel", 2);
+r([
+  p({ type: Boolean, reflect: !0 })
+], t.prototype, "active", 2);
+r([
+  p({ type: String })
+], t.prototype, "separator", 2);
+t = r([
+  c("sp-breadcrumb-item")
+], t);
+export {
+  t as SpBreadcrumbItemComponent
+};

package/dist/components/breadcrumb/sp-breadcrumb-item.template.d.ts

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

package/dist/components/breadcrumb/sp-breadcrumb-item.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-breadcrumb-item.template.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/sp-breadcrumb-item.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,CAAC,IAAI,EAAE,yBAAyB,GAAG,cAAc,CAoBtF"}