sp-component 0.0.1

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

@@ -0,0 +1,62 @@
+import { unsafeCSS as u, LitElement as d } from "lit";
+import { property as i, state as h, customElement as m } from "lit/decorators.js";
+import c from "./sp-menu-item.css.js";
+import { menuItemTemplate as f } from "./sp-menu-item.template.js";
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (r, l, o, n) => {
+  for (var s = n > 1 ? void 0 : n ? b(l, o) : l, p = r.length - 1, a; p >= 0; p--)
+    (a = r[p]) && (s = (n ? a(l, o, s) : a(s)) || s);
+  return n && s && y(l, o, s), s;
+};
+let e = class extends d {
+  constructor() {
+    super(...arguments), this.value = "", this.disabled = !1, this.danger = !1, this.divider = !1, this.checked = !1, this._submenuOpen = !1, this.items = [], this._handleClick = () => {
+      !this.disabled && !this.divider && this.dispatchEvent(
+        new CustomEvent("sp-select", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._handleKeydown = (r) => {
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._handleClick());
+    }, this._handleMouseEnter = () => {
+      this._submenuOpen = !0;
+    }, this._handleMouseLeave = () => {
+      this._submenuOpen = !1;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.disabled || this.setAttribute("tabindex", "-1");
+  }
+  render() {
+    return f.call(this);
+  }
+};
+e.styles = u(c);
+t([
+  i({ type: String })
+], e.prototype, "value", 2);
+t([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+t([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "danger", 2);
+t([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "divider", 2);
+t([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "checked", 2);
+t([
+  h()
+], e.prototype, "_submenuOpen", 2);
+t([
+  i({ type: Array })
+], e.prototype, "items", 2);
+e = t([
+  m("sp-menu-item")
+], e);
+export {
+  e as SpMenuItemComponent
+};

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

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

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

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

package/dist/components/menu/sp-menu-item.template.js

@@ -0,0 +1,30 @@
+import { html as e, nothing as s } from "lit";
+import { classMap as t } from "lit/directives/class-map.js";
+function a() {
+  return this.divider ? e`<hr class="sp-menu-item-divider" role="separator" aria-hidden="true" />` : (Array.isArray(this.slottedChildren) && this.slottedChildren.length > 0, e`
+    <div
+      class=${t({
+    "sp-menu-item": !0,
+    "sp-menu-item--danger": this.danger,
+    "sp-menu-item--disabled": this.disabled,
+    "sp-menu-item--checked": this.checked,
+    "sp-menu-item--has-submenu": this._submenuOpen
+  })}
+      role="menuitem"
+      tabindex=${this.disabled ? s : "-1"}
+      @click=${this._handleClick}
+      @keydown=${this._handleKeydown}
+      @mouseenter=${this._handleMouseEnter}
+      @mouseleave=${this._handleMouseLeave}
+    >
+      ${this.checked ? e`<span class="sp-menu-item-check" aria-hidden="true">✓</span>` : s}
+      <slot name="prefix"></slot>
+      <span class="sp-menu-item-label"><slot></slot></span>
+      <slot name="suffix"></slot>
+      <slot name="submenu-trigger"></slot>
+    </div>
+  `);
+}
+export {
+  a as menuItemTemplate
+};

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

@@ -0,0 +1,4 @@
+const e = ':host{display:inline-block;position:relative}.sp-menu-wrapper{position:relative;display:inline-flex}.sp-menu-trigger{display:inline-flex;cursor:pointer}.sp-menu-panel{position:absolute;z-index:9999;background:var(--sp-bg, white);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:8px;box-shadow:0 8px 24px #0000001f;min-width:160px;padding:4px 0}:host([placement="bottom-start"]) .sp-menu-panel{top:calc(100% + 4px);left:0}:host([placement="bottom-end"]) .sp-menu-panel{top:calc(100% + 4px);right:0}:host([placement="top-start"]) .sp-menu-panel{bottom:calc(100% + 4px);left:0}:host([placement="top-end"]) .sp-menu-panel{bottom:calc(100% + 4px);right:0}:host([placement="right"]) .sp-menu-panel{left:calc(100% + 4px);top:0}:host([placement="left"]) .sp-menu-panel{right:calc(100% + 4px);top:0}.sp-menu-trigger:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px;border-radius:4px}@media(prefers-reduced-motion:reduce){.sp-menu-panel{transition:none}}';
+export {
+  e as default
+};

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

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { SpMenuPlacement } from './sp-menu.types.js';
+/**
+ * Dropdown menu component with a trigger slot and item slot.
+ *
+ * @element sp-menu
+ *
+ * @prop {SpMenuPlacement} placement - Position of the menu panel relative to trigger
+ * @prop {boolean}         open      - Whether the menu panel is visible
+ *
+ * @fires {CustomEvent} sp-show - Emitted when the menu opens
+ * @fires {CustomEvent} sp-hide - Emitted when the menu closes
+ *
+ * @slot trigger - The element that triggers the menu
+ * @slot         - Menu items (sp-menu-item elements)
+ */
+export declare class SpMenuComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    placement: SpMenuPlacement;
+    open: boolean;
+    private _prevOpen;
+    render(): import('lit-html').TemplateResult;
+    updated(changedProperties: Map<string, unknown>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly _handleKeydown;
+    readonly _handleTriggerClick: () => void;
+    readonly _handleItemClick: () => void;
+    private readonly _handleOutsideClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-menu": SpMenuComponent;
+    }
+}
+//# sourceMappingURL=sp-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/sp-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;;;;;;;;;;GAaG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAqB;IAG3C,SAAS,EAAE,eAAe,CAAkB;IAG5C,IAAI,UAAS;IAEb,OAAO,CAAC,SAAS,CAAS;IAEjB,MAAM;IAIN,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAetD,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAuC7B;IAEF,QAAQ,CAAC,mBAAmB,QAAO,IAAI,CAErC;IAEF,QAAQ,CAAC,gBAAgB,QAAO,IAAI,CAIlC;IAEF,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAMlC;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,eAAe,CAAC;KAC5B;CACF"}

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

@@ -0,0 +1,86 @@
+import { unsafeCSS as m, LitElement as f } from "lit";
+import { property as d, customElement as v } from "lit/decorators.js";
+import y from "./sp-menu.css.js";
+import { menuTemplate as b } from "./sp-menu.template.js";
+var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, u = (t, e, s, o) => {
+  for (var n = o > 1 ? void 0 : o ? C(e, s) : e, r = t.length - 1, i; r >= 0; r--)
+    (i = t[r]) && (n = (o ? i(e, s, n) : i(n)) || n);
+  return o && n && w(e, s, n), n;
+};
+let p = class extends f {
+  constructor() {
+    super(...arguments), this.placement = "bottom-start", this.open = !1, this._prevOpen = !1, this._handleKeydown = (t) => {
+      var o, n, r, i, c, a;
+      if (!this.open) return;
+      if (t.key === "Escape") {
+        t.preventDefault(), this.open = !1, this.dispatchEvent(new CustomEvent("sp-hide", { bubbles: !0, composed: !0 })), (n = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".sp-menu-trigger")) == null || n.focus();
+        return;
+      }
+      const e = Array.from(
+        this.querySelectorAll("sp-menu-item:not([disabled])")
+      );
+      if (e.length === 0) return;
+      const s = e.findIndex((l) => {
+        var h;
+        return l === document.activeElement || ((h = l.shadowRoot) == null ? void 0 : h.activeElement) !== null;
+      });
+      if (t.key === "ArrowDown") {
+        t.preventDefault();
+        const l = s < e.length - 1 ? s + 1 : 0;
+        (r = e[l]) == null || r.focus();
+        return;
+      }
+      if (t.key === "ArrowUp") {
+        t.preventDefault();
+        const l = s > 0 ? s - 1 : e.length - 1;
+        (i = e[l]) == null || i.focus();
+        return;
+      }
+      if (t.key === "Home") {
+        t.preventDefault(), (c = e[0]) == null || c.focus();
+        return;
+      }
+      if (t.key === "End") {
+        t.preventDefault(), (a = e[e.length - 1]) == null || a.focus();
+        return;
+      }
+    }, this._handleTriggerClick = () => {
+      this.open = !this.open;
+    }, this._handleItemClick = () => {
+      setTimeout(() => {
+        this.open = !1;
+      }, 0);
+    }, this._handleOutsideClick = (t) => {
+      var e;
+      !this.contains(t.target) && !((e = this.shadowRoot) != null && e.contains(t.target)) && this.open && (this.open = !1);
+    };
+  }
+  render() {
+    return b.call(this);
+  }
+  updated(t) {
+    t.has("open") && (this.open ? (this.dispatchEvent(new CustomEvent("sp-show", { bubbles: !0, composed: !0 })), this.updateComplete.then(() => {
+      const e = this.querySelector("sp-menu-item:not([disabled])");
+      e == null || e.focus();
+    })) : this.dispatchEvent(new CustomEvent("sp-hide", { bubbles: !0, composed: !0 }))), this._prevOpen = this.open;
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick), this.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this.removeEventListener("keydown", this._handleKeydown);
+  }
+};
+p.styles = m(y);
+u([
+  d({ type: String, reflect: !0 })
+], p.prototype, "placement", 2);
+u([
+  d({ type: Boolean, reflect: !0 })
+], p.prototype, "open", 2);
+p = u([
+  v("sp-menu")
+], p);
+export {
+  p as SpMenuComponent
+};

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { nothing as i, html as e } from "lit";
+function n() {
+  return e`
+    <div class="sp-menu-wrapper">
+      <div
+        class="sp-menu-trigger"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-haspopup="menu"
+        tabindex="0"
+        @click=${this._handleTriggerClick}
+      >
+        <slot name="trigger"></slot>
+      </div>
+      ${this.open ? e`
+            <div class="sp-menu-panel" role="menu">
+              <slot @click=${this._handleItemClick}></slot>
+            </div>
+          ` : i}
+    </div>
+  `;
+}
+export {
+  n as menuTemplate
+};

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

@@ -0,0 +1,22 @@
+export type SpMenuPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end" | "right" | "left";
+export interface SpMenuProps {
+    placement: SpMenuPlacement;
+    open: boolean;
+}
+export interface SpMenuItemProps {
+    value: string;
+    disabled: boolean;
+    danger: boolean;
+    divider: boolean;
+    checked: boolean;
+}
+export interface SpMenuItem {
+    label: string;
+    value?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    divider?: boolean;
+    checked?: boolean;
+    children?: SpMenuItem[];
+}
+//# sourceMappingURL=sp-menu.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/sp-menu.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzG,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,eAAe,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;CACzB"}

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

@@ -0,0 +1,3 @@
+export { SpModalComponent } from './sp-modal.js';
+export type { SpModalProps, SpModalSize } from './sp-modal.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const o = ':host{display:contents}dialog{padding:0;border:none;border-radius:8px;box-shadow:0 20px 60px #0000004d;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}dialog::backdrop{background:var(--sp-overlay, rgba(0, 0, 0, .5))}:host([open]) dialog{animation:sp-modal-in .2s ease}@keyframes sp-modal-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}:host([size="sm"]) dialog{width:min(90vw,360px)}:host([size="md"]) dialog{width:min(90vw,520px)}:host([size="lg"]) dialog{width:min(90vw,720px)}:host([size="xl"]) dialog{width:min(90vw,960px)}:host([size="full"]) dialog{width:100vw;height:100vh;max-height:100vh;border-radius:0;margin:0}.sp-modal-panel{position:relative;display:flex;flex-direction:column;max-height:90vh;overflow:hidden;background:var(--sp-bg, white)}:host([size="full"]) .sp-modal-panel{max-height:100vh}.sp-modal-close{position:absolute;top:12px;right:12px;background:none;border:none;cursor:pointer;font-size:18px;color:var(--sp-text-muted, #6b7280);padding:4px;line-height:1;border-radius:4px;z-index:1}.sp-modal-close:hover{color:var(--sp-text, #111827);background:var(--sp-bg-muted, #f3f4f6)}.sp-modal-close:focus-visible{outline:2px solid var(--sp-primary-hover, #2563eb);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host([open]) dialog{animation:none}}@media(max-width:480px){dialog{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;margin:12px}}.sp-modal-body{overflow-y:auto;padding:20px 24px}::slotted([slot="header"]){padding:20px 24px 16px;font-size:18px;font-weight:600;color:var(--sp-text, #111827);border-bottom:1px solid var(--sp-border-subtle, #e5e7eb)}::slotted([slot="footer"]){padding:16px 24px 20px;border-top:1px solid var(--sp-border-subtle, #e5e7eb);display:flex;justify-content:flex-end;gap:8px}';
+export {
+  o as default
+};

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

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+import { SpModalSize } from './sp-modal.types.js';
+/**
+ * Modal dialog component built on the native <dialog> element.
+ *
+ * @element sp-modal
+ *
+ * @prop {boolean}      open           - Whether the modal is open
+ * @prop {string}       label          - Accessible aria-label for the dialog
+ * @prop {SpModalSize}  size           - Size: sm | md | lg | xl | full
+ * @prop {boolean}      closable       - Shows a close button when true
+ * @prop {boolean}      closeOnOverlay - Closes when clicking the backdrop
+ *
+ * @fires {CustomEvent} sp-show       - Emitted when the modal opens
+ * @fires {CustomEvent} sp-hide       - Emitted when the modal closes
+ * @fires {CustomEvent} sp-after-hide - Emitted 300ms after the modal closes
+ *
+ * @slot          - Main body content
+ * @slot header   - Header content
+ * @slot footer   - Footer content (e.g. action buttons)
+ */
+export declare class SpModalComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    open: boolean;
+    label: string;
+    size: SpModalSize;
+    closable: boolean;
+    closeOnOverlay: boolean;
+    private _previousFocus;
+    private _getFocusableElements;
+    private _handleKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult;
+    updated(changed: Map<string, unknown>): void;
+    readonly _handleClose: () => void;
+    readonly _handleOverlayClick: (e: MouseEvent) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-modal": SpModalComponent;
+    }
+}
+//# sourceMappingURL=sp-modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/sp-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,UAAS;IAGb,KAAK,SAAM;IAGX,IAAI,EAAE,WAAW,CAAQ;IAGzB,QAAQ,UAAQ;IAGhB,cAAc,UAAQ;IAEtB,OAAO,CAAC,cAAc,CAAwB;IAE9C,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,cAAc,CAwBpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAOpB,MAAM;IAIN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAkC9C,QAAQ,CAAC,YAAY,aAEnB;IAEF,QAAQ,CAAC,mBAAmB,GAAI,GAAG,UAAU,UAE3C;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF"}

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

@@ -0,0 +1,95 @@
+import { unsafeCSS as u, LitElement as d } from "lit";
+import { property as c, customElement as p } from "lit/decorators.js";
+import h from "./sp-modal.css.js";
+import { modalTemplate as f } from "./sp-modal.template.js";
+var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, o, s, l) => {
+  for (var t = l > 1 ? void 0 : l ? v(o, s) : o, n = e.length - 1, i; n >= 0; n--)
+    (i = e[n]) && (t = (l ? i(o, s, t) : i(t)) || t);
+  return l && t && m(o, s, t), t;
+};
+let r = class extends d {
+  constructor() {
+    super(...arguments), this.open = !1, this.label = "", this.size = "md", this.closable = !0, this.closeOnOverlay = !0, this._previousFocus = null, this._handleKeydown = (e) => {
+      var o, s;
+      if (this.open) {
+        if (e.key === "Escape") {
+          e.preventDefault(), this.open = !1;
+          return;
+        }
+        if (e.key === "Tab") {
+          const l = this._getFocusableElements();
+          if (l.length === 0) {
+            e.preventDefault();
+            return;
+          }
+          const t = l[0], n = l[l.length - 1];
+          e.shiftKey ? (document.activeElement === t || ((o = this.shadowRoot) == null ? void 0 : o.activeElement) === t) && (e.preventDefault(), n.focus()) : (document.activeElement === n || ((s = this.shadowRoot) == null ? void 0 : s.activeElement) === n) && (e.preventDefault(), t.focus());
+        }
+      }
+    }, this._handleClose = () => {
+      this.open = !1;
+    }, this._handleOverlayClick = (e) => {
+      this.closeOnOverlay && e.target === e.currentTarget && (this.open = !1);
+    };
+  }
+  _getFocusableElements() {
+    var o;
+    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("dialog");
+    return e ? Array.from(
+      e.querySelectorAll(
+        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter((s) => !s.closest("[hidden]")) : [];
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeydown), document.body.style.overflow = "";
+  }
+  render() {
+    return f.call(this);
+  }
+  updated(e) {
+    var o, s, l;
+    if (e.has("open")) {
+      const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("dialog");
+      if (!t) return;
+      this.open ? (document.body.style.overflow = "hidden", this._previousFocus = document.activeElement, t.showModal(), this.dispatchEvent(
+        new CustomEvent("sp-show", { bubbles: !0, composed: !0 })
+      ), this.updateComplete.then(() => {
+        var i;
+        (i = this._getFocusableElements()[0]) == null || i.focus();
+      })) : (document.body.style.overflow = "", t.close(), this.dispatchEvent(
+        new CustomEvent("sp-hide", { bubbles: !0, composed: !0 })
+      ), (l = (s = this._previousFocus) == null ? void 0 : s.focus) == null || l.call(s), this._previousFocus = null, setTimeout(
+        () => this.dispatchEvent(
+          new CustomEvent("sp-after-hide", { bubbles: !0, composed: !0 })
+        ),
+        300
+      ));
+    }
+  }
+};
+r.styles = u(h);
+a([
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+a([
+  c({ type: String })
+], r.prototype, "label", 2);
+a([
+  c({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+a([
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "closable", 2);
+a([
+  c({ type: Boolean, attribute: "close-on-overlay" })
+], r.prototype, "closeOnOverlay", 2);
+r = a([
+  p("sp-modal")
+], r);
+export {
+  r as SpModalComponent
+};

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { nothing as l, html as a } from "lit";
+function t() {
+  return a`
+    <dialog
+      aria-label=${this.label || l}
+      aria-modal="true"
+      @click=${this._handleOverlayClick}
+    >
+      <div class="sp-modal-panel">
+        ${this.closable ? a`<button
+              class="sp-modal-close"
+              type="button"
+              aria-label="Close dialog"
+              @click=${this._handleClose}
+            >✕</button>` : l}
+        <slot name="header"></slot>
+        <div class="sp-modal-body"><slot></slot></div>
+        <slot name="footer"></slot>
+      </div>
+    </dialog>
+  `;
+}
+export {
+  t as modalTemplate
+};

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

@@ -0,0 +1,9 @@
+export type SpModalSize = "sm" | "md" | "lg" | "xl" | "full";
+export interface SpModalProps {
+    open: boolean;
+    label: string;
+    size: SpModalSize;
+    closable: boolean;
+    closeOnOverlay: boolean;
+}
+//# sourceMappingURL=sp-modal.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/modal/sp-modal.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;CACzB"}

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

@@ -0,0 +1,3 @@
+export { SpNavbarComponent } from './sp-navbar.js';
+export type { SpNavbarProps } from './sp-navbar.types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,4 @@
+const a = ":host{display:block;width:100%}:host([fixed]){position:fixed;top:0;left:0;right:0;z-index:1000}:host([sticky]){position:sticky;top:0;z-index:1000}.sp-navbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:64px;background:var(--sp-bg, white);gap:16px}:host([bordered]) .sp-navbar{border-bottom:1px solid var(--sp-border-subtle, #e5e7eb)}:host([transparent]) .sp-navbar{background:transparent}.sp-navbar-start,.sp-navbar-center,.sp-navbar-end{display:flex;align-items:center;gap:8px}.sp-navbar-start{flex:1;justify-content:flex-start}.sp-navbar-center{flex-shrink:0}.sp-navbar-end{flex:1;justify-content:flex-end}.sp-navbar--elevation-sm{box-shadow:var(--sp-shadow-sm, 0 1px 2px rgba(0, 0, 0, .05))}.sp-navbar--elevation-md{box-shadow:var(--sp-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1))}a:focus-visible,button:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@media(max-width:639px){.sp-navbar-center{display:none}.sp-navbar{padding:0 16px}}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button]{transition:none!important}}";
+export {
+  a as default
+};

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

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/**
+ * Navigation bar component with start, center, and end slots.
+ *
+ * @element sp-navbar
+ *
+ * @prop {boolean} fixed            - Fixes the navbar to the top of the viewport
+ * @prop {boolean} sticky           - Sticky positioning (scrolls with page then sticks)
+ * @prop {boolean} bordered         - Adds a bottom border to the navbar
+ * @prop {boolean} transparent      - Makes the navbar background transparent
+ * @prop {"none"|"sm"|"md"}  elevation - Box shadow level
+ * @prop {string}  navLabel         - aria-label for the <nav> landmark
+ *
+ * @slot start  - Content aligned to the left (e.g. logo)
+ * @slot center - Content centered (e.g. navigation links)
+ * @slot end    - Content aligned to the right (e.g. actions)
+ */
+export declare class SpNavbarComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    fixed: boolean;
+    sticky: boolean;
+    bordered: boolean;
+    transparent: boolean;
+    elevation: "none" | "sm" | "md";
+    navLabel: string;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-navbar": SpNavbarComponent;
+    }
+}
+//# sourceMappingURL=sp-navbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/sp-navbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;;;;;GAeG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAqB;IAG3C,KAAK,UAAS;IAGd,MAAM,UAAS;IAGf,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAGpB,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAU;IAGzC,QAAQ,SAAqB;IAEpB,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,42 @@
+import { unsafeCSS as f, LitElement as y } from "lit";
+import { property as o, customElement as v } from "lit/decorators.js";
+import c from "./sp-navbar.css.js";
+import { navbarTemplate as m } from "./sp-navbar.template.js";
+var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (i, p, n, a) => {
+  for (var t = a > 1 ? void 0 : a ? b(p, n) : p, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (t = (a ? l(p, n, t) : l(t)) || t);
+  return a && t && u(p, n, t), t;
+};
+let e = class extends y {
+  constructor() {
+    super(...arguments), this.fixed = !1, this.sticky = !1, this.bordered = !1, this.transparent = !1, this.elevation = "none", this.navLabel = "Main navigation";
+  }
+  render() {
+    return m.call(this);
+  }
+};
+e.styles = f(c);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "fixed", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "sticky", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "bordered", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "transparent", 2);
+r([
+  o({ type: String, reflect: !0 })
+], e.prototype, "elevation", 2);
+r([
+  o({ type: String, attribute: "nav-label" })
+], e.prototype, "navLabel", 2);
+e = r([
+  v("sp-navbar")
+], e);
+export {
+  e as SpNavbarComponent
+};

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { html as a } from "lit";
+function t() {
+  return a`
+    <nav class="sp-navbar sp-navbar--elevation-${this.elevation}" aria-label=${this.navLabel}>
+      <div class="sp-navbar-start"><slot name="start"></slot></div>
+      <div class="sp-navbar-center"><slot name="center"></slot></div>
+      <div class="sp-navbar-end"><slot name="end"></slot></div>
+    </nav>
+  `;
+}
+export {
+  t as navbarTemplate
+};

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

@@ -0,0 +1,6 @@
+export interface SpNavbarProps {
+    fixed: boolean;
+    bordered: boolean;
+    transparent: boolean;
+}
+//# sourceMappingURL=sp-navbar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-navbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/sp-navbar.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;CACtB"}