sp-component 0.0.1

package/dist/components/tabs/sp-tab-panel.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Tab panel component. Visibility is controlled by sp-tabs via the hidden attribute.
+ *
+ * @element sp-tab-panel
+ *
+ * @prop {string} name - The panel name, matched against sp-tabs active prop
+ *
+ * @slot - Panel content
+ */
+export declare class SpTabPanelComponent extends LitElement {
+    name: string;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-tab-panel": SpTabPanelComponent;
+    }
+}
+//# sourceMappingURL=sp-tab-panel.d.ts.map

package/dist/components/tabs/sp-tab-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-tab-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/sp-tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC;;;;;;;;GAQG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IAEjD,IAAI,SAAM;IAED,iBAAiB,IAAI,IAAI;IAOzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAO5C,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,mBAAmB,CAAC;KACrC;CACF"}

package/dist/components/tabs/sp-tab-panel.js

@@ -0,0 +1,30 @@
+import { LitElement as i, html as m } from "lit";
+import { property as b, customElement as u } from "lit/decorators.js";
+var c = Object.defineProperty, h = Object.getOwnPropertyDescriptor, o = (t, r, a, s) => {
+  for (var e = s > 1 ? void 0 : s ? h(r, a) : r, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (e = (s ? l(r, a, e) : l(e)) || e);
+  return s && e && c(r, a, e), e;
+};
+let p = class extends i {
+  constructor() {
+    super(...arguments), this.name = "";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "tabpanel");
+  }
+  updated(t) {
+    t.has("name") && (this.setAttribute("id", `panel-${this.name}`), this.setAttribute("aria-labelledby", `tab-${this.name}`));
+  }
+  render() {
+    return m`<slot></slot>`;
+  }
+};
+o([
+  b({ type: String, reflect: !0 })
+], p.prototype, "name", 2);
+p = o([
+  u("sp-tab-panel")
+], p);
+export {
+  p as SpTabPanelComponent
+};

package/dist/components/tabs/sp-tab.css.js

@@ -0,0 +1,4 @@
+const t = ":host{display:inline-block}.sp-tab-button{background:none;border:none;cursor:pointer;padding:10px 16px;font-size:14px;font-weight:500;color:var(--sp-text-muted, #6b7280);border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;font-family:inherit}.sp-tab-button:hover:not(:disabled){color:var(--sp-text-secondary, #374151)}.sp-tab-button--active{color:var(--sp-primary, #3b82f6);border-bottom-color:var(--sp-primary, #3b82f6)}.sp-tab-button:disabled{opacity:.5;cursor:not-allowed}:host([active]) .sp-tab-button{color:var(--sp-primary, #3b82f6);border-bottom-color:var(--sp-primary, #3b82f6)}.sp-tab-button:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px;border-radius:4px}.sp-tab-icon{display:inline-flex;align-items:center;margin-right:6px;font-size:16px;line-height:1}.sp-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;font-size:11px;font-weight:600;border-radius:9px;background:var(--sp-border-subtle, #e5e7eb);color:var(--sp-text-secondary, #374151);line-height:1}.sp-tab-button--active .sp-tab-badge{background:var(--sp-primary-bg-hover, #dbeafe);color:var(--sp-primary-active, #1d4ed8)}.sp-tab-close{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border-radius:3px;font-size:14px;line-height:1;color:var(--sp-text-placeholder, #9ca3af);cursor:pointer}.sp-tab-close:hover{background:var(--sp-border-subtle, #e5e7eb);color:var(--sp-text-secondary, #374151)}@media(prefers-reduced-motion:reduce){.sp-tab-button{transition:none}}";
+export {
+  t as default
+};

package/dist/components/tabs/sp-tab.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * Tab button component. Must be used inside sp-tabs.
+ *
+ * @element sp-tab
+ *
+ * @prop {string}         panel    - ID of the panel this tab activates
+ * @prop {boolean}        disabled - Disables the tab
+ * @prop {boolean}        active   - Whether this tab is currently active (set by sp-tabs)
+ * @prop {string}         icon     - Optional icon text/emoji rendered before the label
+ * @prop {string|number}  badge    - Optional badge count/label shown next to the label
+ * @prop {boolean}        closable - Shows a close button; emits sp-tab-close when clicked
+ *
+ * @fires {CustomEvent<{ panel: string }>} sp-tab-click  - Emitted when the tab is clicked
+ * @fires {CustomEvent<{ key: string }>}   sp-tab-close  - Emitted when the close button is clicked
+ *
+ * @slot - Tab label content
+ */
+export declare class SpTabComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    panel: string;
+    disabled: boolean;
+    active: boolean;
+    icon: string;
+    badge: string | number | undefined;
+    closable: boolean;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): import('lit-html').TemplateResult;
+    readonly _handleClick: () => void;
+    readonly _handleClose: (e: Event) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-tab": SpTabComponent;
+    }
+}
+//# sourceMappingURL=sp-tab.d.ts.map

package/dist/components/tabs/sp-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/sp-tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAqB;IAG3C,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,MAAM,UAAS;IAGf,IAAI,SAAM;IAGV,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAa;IAG/C,QAAQ,UAAS;IAER,iBAAiB,IAAI,IAAI;IAUzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAS5C,MAAM;IAIf,QAAQ,CAAC,YAAY,aAUnB;IAEF,QAAQ,CAAC,YAAY,GAAI,GAAG,KAAK,UAS/B;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,cAAc,CAAC;KAC1B;CACF"}

package/dist/components/tabs/sp-tab.js

@@ -0,0 +1,64 @@
+import { unsafeCSS as h, LitElement as c } from "lit";
+import { property as a, customElement as b } from "lit/decorators.js";
+import d from "./sp-tab.css.js";
+import { tabTemplate as u } from "./sp-tab.template.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (e, p, l, o) => {
+  for (var s = o > 1 ? void 0 : o ? m(p, l) : p, r = e.length - 1, n; r >= 0; r--)
+    (n = e[r]) && (s = (o ? n(p, l, s) : n(s)) || s);
+  return o && s && f(p, l, s), s;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.panel = "", this.disabled = !1, this.active = !1, this.icon = "", this.badge = void 0, this.closable = !1, this._handleClick = () => {
+      this.disabled || this.dispatchEvent(
+        new CustomEvent("sp-tab-click", {
+          detail: { panel: this.panel },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._handleClose = (e) => {
+      e.stopPropagation(), this.dispatchEvent(
+        new CustomEvent("sp-tab-close", {
+          detail: { key: this.panel },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", this.active ? "0" : "-1"), this.panel && !this.id && (this.id = `tab-${this.panel}`);
+  }
+  updated(e) {
+    e.has("active") && this.setAttribute("tabindex", this.active ? "0" : "-1"), e.has("panel") && this.panel && !this.id && (this.id = `tab-${this.panel}`);
+  }
+  render() {
+    return u.call(this);
+  }
+};
+t.styles = h(d);
+i([
+  a({ type: String })
+], t.prototype, "panel", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "active", 2);
+i([
+  a({ type: String })
+], t.prototype, "icon", 2);
+i([
+  a()
+], t.prototype, "badge", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "closable", 2);
+t = i([
+  b("sp-tab")
+], t);
+export {
+  t as SpTabComponent
+};

package/dist/components/tabs/sp-tab.template.d.ts

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

package/dist/components/tabs/sp-tab.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-tab.template.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/sp-tab.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,wBAAgB,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,cAAc,CAoChE"}

package/dist/components/tabs/sp-tab.template.js

@@ -0,0 +1,35 @@
+import { nothing as s, html as a } from "lit";
+import { classMap as e } from "lit/directives/class-map.js";
+function n() {
+  return a`
+    <button
+      class=${e({
+    "sp-tab-button": !0,
+    "sp-tab-button--active": this.active
+  })}
+      role="tab"
+      ?disabled=${this.disabled}
+      aria-selected=${this.active ? "true" : "false"}
+      aria-controls="panel-${this.panel}"
+      tabindex=${this.active ? "0" : "-1"}
+      @click=${this._handleClick}
+    >
+      ${this.icon ? a`<span class="sp-tab-icon">${this.icon}</span>` : s}
+      <slot></slot>
+      ${this.badge !== void 0 && this.badge !== null && this.badge !== "" ? a`<span class="sp-tab-badge">${this.badge}</span>` : s}
+      ${this.closable ? a`<span
+            class="sp-tab-close"
+            role="button"
+            tabindex="0"
+            aria-label="Close tab"
+            @click=${this._handleClose}
+            @keydown=${(t) => {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._handleClose(t));
+  }}
+          >×</span>` : s}
+    </button>
+  `;
+}
+export {
+  n as tabTemplate
+};

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

@@ -0,0 +1,4 @@
+const e = ':host{display:block}.sp-tabs-nav-wrapper{position:relative;display:flex;align-items:center}.sp-tabs-nav{display:flex;border-bottom:1px solid var(--sp-border-subtle, #e5e7eb);overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}.sp-tabs-nav::-webkit-scrollbar{display:none}.sp-tabs-scroll-btn{flex-shrink:0;background:none;border:none;cursor:pointer;font-size:20px;color:var(--sp-text-muted, #6b7280);padding:0 4px;line-height:1;border-bottom:1px solid var(--sp-border-subtle, #e5e7eb);height:100%;display:flex;align-items:center}.sp-tabs-scroll-btn:hover{color:var(--sp-text-secondary, #374151);background:var(--sp-bg-muted, #f3f4f6)}.sp-tabs-scroll-btn:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:-2px}.sp-tabs-content{padding:16px 0}:host([placement="left"]) .sp-tabs,:host([placement="right"]) .sp-tabs{display:flex;gap:0}:host([placement="left"]) .sp-tabs-nav-wrapper{flex-direction:column;border-right:1px solid var(--sp-border-subtle, #e5e7eb)}:host([placement="left"]) .sp-tabs-nav{flex-direction:column;border-bottom:none;padding-right:0}:host([placement="right"]) .sp-tabs-nav-wrapper{flex-direction:column;border-left:1px solid var(--sp-border-subtle, #e5e7eb);order:1}:host([placement="right"]) .sp-tabs-nav{flex-direction:column;border-bottom:none}:host([placement="left"]) .sp-tabs-content,:host([placement="right"]) .sp-tabs-content{flex:1;padding:0 16px}:host([placement="bottom"]) .sp-tabs{display:flex;flex-direction:column-reverse}:host([placement="bottom"]) .sp-tabs-nav{border-bottom:none;border-top:1px solid var(--sp-border-subtle, #e5e7eb)}:host([placement="bottom"]) .sp-tabs-scroll-btn{border-bottom:none;border-top:1px solid var(--sp-border-subtle, #e5e7eb)}:host([placement="left"]) sp-tab .sp-tab-button,:host([placement="right"]) sp-tab .sp-tab-button{border-bottom:none;border-right:2px solid transparent}';
+export {
+  e as default
+};

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

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+import { SpTabsPlacement } from './sp-tabs.types.js';
+/**
+ * Tabs container component. Manages active tab and panel visibility.
+ *
+ * @element sp-tabs
+ *
+ * @prop {string}          active    - The panel name of the active tab
+ * @prop {SpTabsPlacement} placement - Tab bar placement: top | bottom | left | right
+ *
+ * @fires {CustomEvent<{ panel: string }>} sp-tab-show - Emitted when the active tab changes
+ *
+ * @slot nav - Slot for sp-tab elements (tab buttons)
+ * @slot     - Default slot for sp-tab-panel elements
+ */
+export declare class SpTabsComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    active: string;
+    placement: SpTabsPlacement;
+    render(): import('lit-html').TemplateResult;
+    private _syncTabs;
+    updated(changed: Map<string, unknown>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly _handleKeydown;
+    _scrollNav(delta: number): void;
+    private _activateTab;
+    private readonly _handleTabClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-tabs": SpTabsComponent;
+    }
+}
+//# sourceMappingURL=sp-tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/sp-tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;;;;;;;;;GAYG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAqB;IAG3C,MAAM,SAAM;IAGZ,SAAS,EAAE,eAAe,CAAS;IAE1B,MAAM;IAIf,OAAO,CAAC,SAAS;IAWR,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAIrC,iBAAiB;IAMjB,oBAAoB;IAM7B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAyB7B;IAEF,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,QAAQ,CAAC,eAAe,CAE9B;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,eAAe,CAAC;KAC5B;CACF"}

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

@@ -0,0 +1,83 @@
+import { unsafeCSS as h, LitElement as d } from "lit";
+import { property as c, customElement as f } from "lit/decorators.js";
+import v from "./sp-tabs.css.js";
+import { tabsTemplate as u } from "./sp-tabs.template.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, o = (e, s, t, n) => {
+  for (var a = n > 1 ? void 0 : n ? m(s, t) : s, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (a = (n ? l(s, t, a) : l(a)) || a);
+  return n && a && b(s, t, a), a;
+};
+let i = class extends d {
+  constructor() {
+    super(...arguments), this.active = "", this.placement = "top", this._handleKeydown = (e) => {
+      var r, l;
+      const s = Array.from(this.querySelectorAll("sp-tab:not([disabled])"));
+      if (s.length === 0) return;
+      const t = s.findIndex((p) => p === document.activeElement);
+      if (t === -1) return;
+      let n = t;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown")
+        e.preventDefault(), n = t < s.length - 1 ? t + 1 : 0;
+      else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
+        e.preventDefault(), n = t > 0 ? t - 1 : s.length - 1;
+      else if (e.key === "Home")
+        e.preventDefault(), n = 0;
+      else if (e.key === "End")
+        e.preventDefault(), n = s.length - 1;
+      else
+        return;
+      (r = s[n]) == null || r.focus();
+      const a = ((l = s[n]) == null ? void 0 : l.getAttribute("panel")) ?? "";
+      a && this._activateTab(a);
+    }, this._handleTabClick = (e) => {
+      this._activateTab(e.detail.panel);
+    };
+  }
+  render() {
+    return u.call(this);
+  }
+  _syncTabs() {
+    const e = [...this.querySelectorAll("sp-tab")], s = [...this.querySelectorAll("sp-tab-panel")];
+    e.forEach((t) => {
+      t.active = t.panel === this.active;
+    }), s.forEach((t) => {
+      t.hidden = t.name !== this.active;
+    });
+  }
+  updated(e) {
+    e.has("active") && this._syncTabs();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("sp-tab-click", this._handleTabClick), this.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("sp-tab-click", this._handleTabClick), this.removeEventListener("keydown", this._handleKeydown);
+  }
+  _scrollNav(e) {
+    var t;
+    const s = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".sp-tabs-nav");
+    s && (s.scrollLeft += e);
+  }
+  _activateTab(e) {
+    this.active = e, this.dispatchEvent(
+      new CustomEvent("sp-tab-show", {
+        detail: { panel: this.active },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+i.styles = h(v);
+o([
+  c({ type: String, reflect: !0 })
+], i.prototype, "active", 2);
+o([
+  c({ type: String, reflect: !0 })
+], i.prototype, "placement", 2);
+i = o([
+  f("sp-tabs")
+], i);
+export {
+  i as SpTabsComponent
+};

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { html as t } from "lit";
+function l() {
+  return t`
+    <div class="sp-tabs">
+      <div class="sp-tabs-nav-wrapper">
+        <button
+          class="sp-tabs-scroll-btn sp-tabs-scroll-btn--left"
+          type="button"
+          aria-label="Scroll tabs left"
+          @click=${() => this._scrollNav(-120)}
+        >&#8249;</button>
+        <div class="sp-tabs-nav" role="tablist">
+          <slot name="nav"></slot>
+        </div>
+        <button
+          class="sp-tabs-scroll-btn sp-tabs-scroll-btn--right"
+          type="button"
+          aria-label="Scroll tabs right"
+          @click=${() => this._scrollNav(120)}
+        >&#8250;</button>
+      </div>
+      <div class="sp-tabs-content">
+        <slot></slot>
+      </div>
+    </div>
+  `;
+}
+export {
+  l as tabsTemplate
+};

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

@@ -0,0 +1,14 @@
+export type SpTabsPlacement = "top" | "bottom" | "left" | "right";
+export interface SpTabsProps {
+    active: string;
+    placement: SpTabsPlacement;
+}
+export interface SpTabProps {
+    panel: string;
+    disabled: boolean;
+    active: boolean;
+    icon?: string;
+    badge?: string | number;
+    closable?: boolean;
+}
+//# sourceMappingURL=sp-tabs.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/sp-tabs.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,eAAe,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

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

@@ -0,0 +1,3 @@
+export { SpTagComponent } from './sp-tag.js';
+export type { SpTagProps, SpTagVariant, SpTagSize } from './sp-tag.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC"}

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

@@ -0,0 +1,4 @@
+const e = ':host{display:inline-flex}:host([disabled]){opacity:.5;pointer-events:none}.sp-tag{display:inline-flex;align-items:center;gap:4px;border-radius:4px;font-weight:500;white-space:nowrap}:host([size="sm"]) .sp-tag{padding:1px 6px;font-size:11px}:host([size="md"]) .sp-tag{padding:2px 8px;font-size:12px}:host([size="lg"]) .sp-tag{padding:4px 12px;font-size:14px}:host([variant="primary"]) .sp-tag{background:var(--sp-primary-bg-hover, #dbeafe);color:var(--sp-primary-active, #1d4ed8)}:host([variant="secondary"]) .sp-tag{background:var(--sp-bg-muted, #f3f4f6);color:var(--sp-text-secondary, #374151)}:host([variant="success"]) .sp-tag{background:#dcfce7;color:#15803d}:host([variant="warning"]) .sp-tag{background:#fef9c3;color:#a16207}:host([variant="danger"]) .sp-tag{background:#fee2e2;color:#b91c1c}:host([variant="neutral"]) .sp-tag{background:var(--sp-border-subtle, #e5e7eb);color:#4b5563}.sp-tag-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}.sp-tag-remove:hover{opacity:1}.sp-tag-remove: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/tag/sp-tag.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { SpTagVariant, SpTagSize } from './sp-tag.types.js';
+/**
+ * A tag / chip component for labelling and categorisation.
+ *
+ * @element sp-tag
+ *
+ * @prop {SpTagVariant} variant   - Color variant: primary | secondary | success | warning | danger | neutral
+ * @prop {SpTagSize}    size      - Size: sm | md | lg
+ * @prop {boolean}      removable - Shows a remove (×) button
+ * @prop {boolean}      disabled  - Disables the tag and hides the remove button
+ *
+ * @fires {CustomEvent} sp-remove - Emitted when the remove button is clicked
+ *
+ * @slot - Tag label content
+ */
+export declare class SpTagComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    variant: SpTagVariant;
+    size: SpTagSize;
+    removable: boolean;
+    disabled: boolean;
+    /** Icon/emoji shown before the label */
+    icon: string;
+    /** Makes the tag interactive (hover effect, sp-click event) */
+    clickable: boolean;
+    readonly _handleClick: (e: Event) => void;
+    readonly _handleRemove: (e: Event) => void;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-tag": SpTagComponent;
+    }
+}
+//# sourceMappingURL=sp-tag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/sp-tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEjE;;;;;;;;;;;;;GAaG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,EAAE,YAAY,CAAa;IAGlC,IAAI,EAAE,SAAS,CAAQ;IAGvB,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAEjB,wCAAwC;IAExC,IAAI,SAAM;IAEV,+DAA+D;IAE/D,SAAS,UAAS;IAElB,QAAQ,CAAC,YAAY,GAAI,GAAG,KAAK,KAAG,IAAI,CAGtC;IAEF,QAAQ,CAAC,aAAa,GAAI,GAAG,KAAK,KAAG,IAAI,CAGvC;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,cAAc,CAAC;KAC1B;CACF"}

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

@@ -0,0 +1,46 @@
+import { unsafeCSS as c, LitElement as m } from "lit";
+import { property as o, customElement as u } from "lit/decorators.js";
+import f from "./sp-tag.css.js";
+import { tagTemplate as h } from "./sp-tag.template.js";
+var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (s, p, l, i) => {
+  for (var t = i > 1 ? void 0 : i ? v(p, l) : p, a = s.length - 1, n; a >= 0; a--)
+    (n = s[a]) && (t = (i ? n(p, l, t) : n(t)) || t);
+  return i && t && b(p, l, t), t;
+};
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.size = "md", this.removable = !1, this.disabled = !1, this.icon = "", this.clickable = !1, this._handleClick = (s) => {
+      !this.clickable || this.disabled || this.dispatchEvent(new CustomEvent("sp-click", { bubbles: !0, composed: !0 }));
+    }, this._handleRemove = (s) => {
+      s.stopPropagation(), this.dispatchEvent(new CustomEvent("sp-remove", { bubbles: !0, composed: !0 }));
+    };
+  }
+  render() {
+    return h.call(this);
+  }
+};
+e.styles = c(f);
+r([
+  o({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+r([
+  o({ type: String, reflect: !0 })
+], e.prototype, "size", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "removable", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+r([
+  o({ type: String })
+], e.prototype, "icon", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "clickable", 2);
+e = r([
+  u("sp-tag")
+], e);
+export {
+  e as SpTagComponent
+};

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { nothing as e, html as i } from "lit";
+function s() {
+  return i`
+    <span
+      class="sp-tag${this.clickable ? " sp-tag--clickable" : ""}"
+      role=${this.clickable ? "button" : e}
+      tabindex=${this.clickable && !this.disabled ? "0" : e}
+      @click=${this._handleClick}
+      @keydown=${(t) => {
+    this.clickable && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._handleClick(t));
+  }}
+    >
+      ${this.icon ? i`<span class="sp-tag-icon" aria-hidden="true">${this.icon}</span>` : e}
+      <slot></slot>
+      ${this.removable && !this.disabled ? i`
+            <button class="sp-tag-remove" type="button" aria-label="Remove" @click=${this._handleRemove}>
+              <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+                <path d="M1 1l8 8M9 1L1 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+            </button>
+          ` : e}
+    </span>
+  `;
+}
+export {
+  s as tagTemplate
+};

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

@@ -0,0 +1,9 @@
+export type SpTagVariant = "primary" | "secondary" | "success" | "warning" | "danger" | "neutral";
+export type SpTagSize = "sm" | "md" | "lg";
+export interface SpTagProps {
+    variant: SpTagVariant;
+    size: SpTagSize;
+    removable: boolean;
+    disabled: boolean;
+}
+//# sourceMappingURL=sp-tag.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-tag.types.d.ts","sourceRoot":"","sources":["../../../src/components/tag/sp-tag.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAElG,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,YAAY,CAAC;IACtB,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB"}

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

@@ -0,0 +1,3 @@
+export { SpTagInputComponent } from './sp-tag-input.js';
+export type { SpTagInputProps, SpTagInputSize } from './sp-tag-input.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tag-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}

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

@@ -0,0 +1,4 @@
+const p = ":host{display:block}.sp-tag-input{display:flex;flex-direction:column;gap:4px;font-family:inherit}.sp-tag-input-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-tag-input-field{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 10px;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, #ffffff);cursor:text;transition:border-color .2s,box-shadow .2s;min-height:40px;box-sizing:border-box}.sp-tag-input--focused .sp-tag-input-field,.sp-tag-input-field:focus-within{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 3px var(--sp-primary-focus, rgba(59, 130, 246, .15));outline:none}.sp-tag-input--error .sp-tag-input-field{border-color:var(--sp-error, #FF4D4F);box-shadow:0 0 0 3px var(--sp-error-focus, rgba(255, 77, 79, .15))}.sp-tag-input--disabled .sp-tag-input-field{background:var(--sp-bg-subtle, #f9fafb);cursor:not-allowed;opacity:.6}.sp-tag-input--sm .sp-tag-input-field{padding:4px 8px;min-height:32px;font-size:12px}.sp-tag-input--md .sp-tag-input-field{padding:6px 10px;min-height:40px;font-size:14px}.sp-tag-input--lg .sp-tag-input-field{padding:8px 12px;min-height:48px;font-size:16px}.sp-tag-input-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:var(--sp-primary-bg, #eff6ff);border:1px solid var(--sp-primary-bg-hover, #bfdbfe);border-radius:999px;font-size:13px;color:var(--sp-primary-active, #1d4ed8);animation:sp-chip-enter .15s ease;flex-shrink:0}@keyframes sp-chip-enter{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.sp-tag-input-chip-label{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-tag-input-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--sp-primary-active, #1d4ed8);cursor:pointer;font-size:12px;line-height:1;transition:background .15s;flex-shrink:0}.sp-tag-input-chip-remove:hover{background:var(--sp-primary-bg-hover, #bfdbfe)}.sp-tag-input-input{flex:1;min-width:80px;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;color:var(--sp-text, #111827);padding:2px 0}.sp-tag-input-input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}.sp-tag-input-input:disabled{cursor:not-allowed}.sp-tag-input-hint{font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:2px}.sp-tag-input-error{font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}";
+export {
+  p as default
+};