sp-component 0.0.2 → 0.0.3

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

@@ -1,87 +1,95 @@
 import { unsafeCSS as c, LitElement as u } from "lit";
 import { property as h, customElement as d } from "lit/decorators.js";
 import p from "./sp-drawer.css.js";
-import { drawerTemplate as f } from "./sp-drawer.template.js";
-var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (t, s, o, n) => {
-  for (var e = n > 1 ? void 0 : n ? v(s, o) : s, r = t.length - 1, a; r >= 0; r--)
-    (a = t[r]) && (e = (n ? a(s, o, e) : a(e)) || e);
-  return n && e && m(s, o, e), e;
+import { drawerTemplate as m } from "./sp-drawer.template.js";
+var f = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? _(t, s) : t, n = e.length - 1, a; n >= 0; n--)
+    (a = e[n]) && (o = (i ? a(t, s, o) : a(o)) || o);
+  return i && o && f(t, s, o), o;
 };
-let i = class extends u {
+let l = class extends u {
   constructor() {
-    super(...arguments), this.open = !1, this.label = "", this.placement = "right", this.size = "320px", this.closable = !0, this.closeOnOverlay = !0, this._previousFocus = null, this._touchStartX = 0, this._touchStartY = 0, this._handleKeydown = (t) => {
-      var s, o;
+    super(...arguments), this.open = !1, this.label = "", this.placement = "right", this.size = "320px", this.closable = !0, this.closeOnOverlay = !0, this._previousFocus = null, this._touchStartX = 0, this._touchStartY = 0, this._afterHideTimer = null, this._closeTimer = null, this._handleKeydown = (e) => {
+      var t, s;
       if (this.open) {
-        if (t.key === "Escape") {
-          t.preventDefault(), this.open = !1;
+        if (e.key === "Escape") {
+          e.preventDefault(), this.open = !1;
           return;
         }
-        if (t.key === "Tab") {
-          const n = this._getFocusableElements();
-          if (n.length === 0) {
-            t.preventDefault();
+        if (e.key === "Tab") {
+          const i = this._getFocusableElements();
+          if (i.length === 0) {
+            e.preventDefault();
             return;
           }
-          const e = n[0], r = n[n.length - 1];
-          t.shiftKey ? (document.activeElement === e || ((s = this.shadowRoot) == null ? void 0 : s.activeElement) === e) && (t.preventDefault(), r.focus()) : (document.activeElement === r || ((o = this.shadowRoot) == null ? void 0 : o.activeElement) === r) && (t.preventDefault(), e.focus());
+          const o = i[0], n = i[i.length - 1];
+          e.shiftKey ? (document.activeElement === o || ((t = this.shadowRoot) == null ? void 0 : t.activeElement) === o) && (e.preventDefault(), n.focus()) : (document.activeElement === n || ((s = this.shadowRoot) == null ? void 0 : s.activeElement) === n) && (e.preventDefault(), o.focus());
         }
       }
-    }, this._handleTouchStart = (t) => {
-      const s = t.touches[0];
-      s && (this._touchStartX = s.clientX, this._touchStartY = s.clientY);
-    }, this._handleTouchEnd = (t) => {
-      const s = t.changedTouches[0];
-      if (!s) return;
-      const o = s.clientX - this._touchStartX, n = s.clientY - this._touchStartY, e = 80;
-      let r = !1;
-      (this.placement === "right" && o > e && Math.abs(n) < Math.abs(o) || this.placement === "left" && o < -e && Math.abs(n) < Math.abs(o) || this.placement === "bottom" && n > e && Math.abs(o) < Math.abs(n) || this.placement === "top" && n < -e && Math.abs(o) < Math.abs(n)) && (r = !0), r && (this.open = !1);
+    }, this._handlePageHide = () => {
+      this.open && (this.open = !1, document.body.style.overflow = "");
+    }, this._handleTouchStart = (e) => {
+      const t = e.touches[0];
+      t && (this._touchStartX = t.clientX, this._touchStartY = t.clientY);
+    }, this._handleTouchEnd = (e) => {
+      const t = e.changedTouches[0];
+      if (!t) return;
+      const s = t.clientX - this._touchStartX, i = t.clientY - this._touchStartY, o = 80;
+      let n = !1;
+      (this.placement === "right" && s > o && Math.abs(i) < Math.abs(s) || this.placement === "left" && s < -o && Math.abs(i) < Math.abs(s) || this.placement === "bottom" && i > o && Math.abs(s) < Math.abs(i) || this.placement === "top" && i < -o && Math.abs(s) < Math.abs(i)) && (n = !0), n && (this.open = !1);
     }, this._handleClose = () => {
       this.open = !1;
-    }, this._handleOverlayClick = (t) => {
-      this.closeOnOverlay && t.target === t.currentTarget && (this.open = !1);
+    }, this._handleOverlayClick = (e) => {
+      this.closeOnOverlay && e.target === e.currentTarget && (this.open = !1);
     };
   }
   _getFocusableElements() {
-    var s;
-    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("dialog");
-    return t ? Array.from(
-      t.querySelectorAll(
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.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((o) => !o.closest("[hidden]")) : [];
+    ).filter((s) => !s.closest("[hidden]")) : [];
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("keydown", this._handleKeydown);
+    super.connectedCallback(), document.addEventListener("keydown", this._handleKeydown), window.addEventListener("pagehide", this._handlePageHide);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeydown), document.body.style.overflow = "";
+    var t;
+    super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeydown), window.removeEventListener("pagehide", this._handlePageHide), document.body.style.overflow = "";
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("dialog");
+    e && (e.removeEventListener("touchstart", this._handleTouchStart), e.removeEventListener("touchend", this._handleTouchEnd)), this._closeTimer !== null && (clearTimeout(this._closeTimer), this._closeTimer = null), this._afterHideTimer !== null && (clearTimeout(this._afterHideTimer), this._afterHideTimer = null);
   }
   render() {
-    return f.call(this);
+    return m.call(this);
   }
-  updated(t) {
-    var s, o, n;
-    if (t.has("open")) {
-      const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("dialog");
-      if (!e) return;
+  updated(e) {
+    var t;
+    if (e.has("open")) {
+      if (!this.open && e.get("open") === void 0) return;
+      const s = (t = this.shadowRoot) == null ? void 0 : t.querySelector("dialog");
+      if (!s) return;
       if (this.open)
-        document.body.style.overflow = "hidden", this._previousFocus = document.activeElement, e.showModal(), e.addEventListener("touchstart", this._handleTouchStart, { passive: !0 }), e.addEventListener("touchend", this._handleTouchEnd, { passive: !0 }), this.dispatchEvent(
+        document.body.style.overflow = "hidden", this._previousFocus = document.activeElement, s.showModal(), s.addEventListener("touchstart", this._handleTouchStart, { passive: !0 }), s.addEventListener("touchend", this._handleTouchEnd, { passive: !0 }), this.dispatchEvent(
           new CustomEvent("sp-show", { bubbles: !0, composed: !0 })
         ), this.updateComplete.then(() => {
-          var a;
-          (a = this._getFocusableElements()[0]) == null || a.focus();
+          var o;
+          (o = this._getFocusableElements()[0]) == null || o.focus();
         });
       else {
-        document.body.style.overflow = "";
-        const r = e;
-        r.removeEventListener("touchstart", this._handleTouchStart), r.removeEventListener("touchend", this._handleTouchEnd), e.close(), this.dispatchEvent(
-          new CustomEvent("sp-hide", { bubbles: !0, composed: !0 })
-        ), (n = (o = this._previousFocus) == null ? void 0 : o.focus) == null || n.call(o), this._previousFocus = null, setTimeout(
-          () => this.dispatchEvent(
-            new CustomEvent("sp-after-hide", { bubbles: !0, composed: !0 })
-          ),
-          300
-        );
+        this._closeTimer !== null && (clearTimeout(this._closeTimer), this._closeTimer = null), this.setAttribute("closing", "");
+        const i = this._previousFocus;
+        this._previousFocus = null, s.removeEventListener("touchstart", this._handleTouchStart), s.removeEventListener("touchend", this._handleTouchEnd), this._closeTimer = setTimeout(() => {
+          var o;
+          this._closeTimer = null, this.removeAttribute("closing"), document.body.style.overflow = "", s.open && s.close(), this.dispatchEvent(
+            new CustomEvent("sp-hide", { bubbles: !0, composed: !0 })
+          ), (o = i == null ? void 0 : i.focus) == null || o.call(i), this._afterHideTimer !== null && (clearTimeout(this._afterHideTimer), this._afterHideTimer = null), this._afterHideTimer = setTimeout(() => {
+            this._afterHideTimer = null, this.dispatchEvent(
+              new CustomEvent("sp-after-hide", { bubbles: !0, composed: !0 })
+            );
+          }, 50);
+        }, l.ANIM_DURATION);
       }
     }
   }
@@ -89,28 +97,29 @@ let i = class extends u {
     return this.placement === "left" || this.placement === "right" ? `width: ${this.size}; max-width: 100vw;` : `height: ${this.size}; max-height: 100vh; width: 100%;`;
   }
 };
-i.styles = c(p);
-l([
+l.styles = c(p);
+l.ANIM_DURATION = 250;
+r([
   h({ type: Boolean, reflect: !0 })
-], i.prototype, "open", 2);
-l([
+], l.prototype, "open", 2);
+r([
   h({ type: String })
-], i.prototype, "label", 2);
-l([
+], l.prototype, "label", 2);
+r([
   h({ type: String, reflect: !0 })
-], i.prototype, "placement", 2);
-l([
+], l.prototype, "placement", 2);
+r([
   h({ type: String })
-], i.prototype, "size", 2);
-l([
+], l.prototype, "size", 2);
+r([
   h({ type: Boolean, reflect: !0 })
-], i.prototype, "closable", 2);
-l([
+], l.prototype, "closable", 2);
+r([
   h({ type: Boolean, attribute: "close-on-overlay" })
-], i.prototype, "closeOnOverlay", 2);
-i = l([
+], l.prototype, "closeOnOverlay", 2);
+l = r([
   d("sp-drawer")
-], i);
+], l);
 export {
-  i as SpDrawerComponent
+  l as SpDrawerComponent
 };

package/dist/components/empty-state/sp-empty-state.css.js

@@ -1,4 +1,4 @@
-const t = ":host{display:block}.sp-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;gap:12px}.sp-empty-state-icon{color:var(--sp-border, #d1d5db)}.sp-empty-state-icon svg,.sp-empty-state-icon img{width:80px;height:80px}.sp-empty-state-title{font-size:18px;font-weight:600;color:var(--sp-text-secondary, #374151);margin:0}.sp-empty-state-description{font-size:14px;color:var(--sp-text-muted, #6b7280);margin:0;line-height:1.6;max-width:360px}.sp-empty-state-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:4px}.sp-empty-state-actions:empty{display:none}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button]{transition:none!important}}";
+const t = "*,*:before,*:after{box-sizing:border-box}:host{display:block}.sp-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;gap:12px}.sp-empty-state-icon{color:var(--sp-border, #d1d5db)}.sp-empty-state-icon svg,.sp-empty-state-icon img{width:80px;height:80px}.sp-empty-state-title{font-size:18px;font-weight:600;color:var(--sp-text-secondary, #374151);margin:0}.sp-empty-state-description{font-size:14px;color:var(--sp-text-muted, #6b7280);margin:0;line-height:1.6;max-width:360px}.sp-empty-state-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:4px}.sp-empty-state-actions:empty{display:none}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button]{transition:none!important}}";
 export {
   t as default
 };

package/dist/components/file-upload/sp-file-upload.css.js

@@ -1,4 +1,4 @@
-const e = ":host{display:block;font-family:inherit}.sp-file-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 24px;border:2px dashed var(--sp-border, #d1d5db);border-radius:8px;background:var(--sp-bg-subtle, #f9fafb);cursor:pointer;transition:border-color .2s,background .2s;text-align:center}.sp-file-dropzone:hover:not(.sp-file-dropzone--disabled){border-color:var(--sp-primary, #3b82f6);background:var(--sp-primary-bg, #eff6ff)}.sp-file-dropzone--dragging{border-color:var(--sp-primary, #3b82f6);background:var(--sp-primary-bg, #eff6ff)}.sp-file-dropzone--disabled{opacity:.5;cursor:not-allowed}.sp-file-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;width:100%;height:100%;cursor:pointer}.sp-file-input:disabled{cursor:not-allowed}.sp-file-icon{width:40px;height:40px;color:var(--sp-text-placeholder, #9ca3af);pointer-events:none}.sp-file-label{font-size:14px;color:var(--sp-text-secondary, #374151);font-weight:500;pointer-events:none}.sp-file-hint{font-size:12px;color:var(--sp-text-muted, #6b7280);pointer-events:none}.sp-file-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-file-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.sp-file-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--sp-bg-subtle, #f9fafb);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:6px;font-size:13px;flex-wrap:wrap}.sp-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sp-text-secondary, #374151)}.sp-file-size{flex-shrink:0;color:var(--sp-text-placeholder, #9ca3af)}.sp-file-remove{background:none;border:none;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0;line-height:1;flex-shrink:0}.sp-file-remove:hover{color:var(--sp-error, #FF4D4F)}.sp-file-dropzone:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}.sp-file-remove:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}.sp-file-progress{width:100%;height:4px;background:var(--sp-border-subtle, #e5e7eb);border-radius:2px;overflow:hidden;margin-top:4px}.sp-file-progress-bar{height:100%;background:var(--sp-primary, #3b82f6);border-radius:2px;transition:width .3s ease}@media(max-width:480px){.sp-file-dropzone{padding:20px 16px}.sp-file-icon{width:32px;height:32px}}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button],.sp-file-dropzone{transition:none!important}}";
+const e = "*,*:before,*:after{box-sizing:border-box}:host{display:block;font-family:inherit}.sp-file-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 24px;border:2px dashed var(--sp-border, #d1d5db);border-radius:8px;background:var(--sp-bg-subtle, #f9fafb);cursor:pointer;transition:border-color .2s,background .2s;text-align:center}.sp-file-dropzone:hover:not(.sp-file-dropzone--disabled){border-color:var(--sp-primary, #3b82f6);background:var(--sp-primary-bg, #eff6ff)}.sp-file-dropzone--dragging{border-color:var(--sp-primary, #3b82f6);background:var(--sp-primary-bg, #eff6ff)}.sp-file-dropzone--disabled{opacity:.5;cursor:not-allowed}.sp-file-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;width:100%;height:100%;cursor:pointer}.sp-file-input:disabled{cursor:not-allowed}.sp-file-icon{width:40px;height:40px;color:var(--sp-text-placeholder, #9ca3af);pointer-events:none}.sp-file-label{font-size:14px;color:var(--sp-text-secondary, #374151);font-weight:500;pointer-events:none}.sp-file-hint{font-size:12px;color:var(--sp-text-muted, #6b7280);pointer-events:none}.sp-file-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-file-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.sp-file-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--sp-bg-subtle, #f9fafb);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:6px;font-size:13px;flex-wrap:wrap}.sp-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sp-text-secondary, #374151)}.sp-file-size{flex-shrink:0;color:var(--sp-text-placeholder, #9ca3af)}.sp-file-remove{background:none;border:none;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0;line-height:1;flex-shrink:0}.sp-file-remove:hover{color:var(--sp-error, #FF4D4F)}.sp-file-dropzone:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}.sp-file-remove:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}.sp-file-progress{width:100%;height:4px;background:var(--sp-border-subtle, #e5e7eb);border-radius:2px;overflow:hidden;margin-top:4px}.sp-file-progress-bar{height:100%;background:var(--sp-primary, #3b82f6);border-radius:2px;transition:width .3s ease}@media(max-width:480px){.sp-file-dropzone{padding:20px 16px}.sp-file-icon{width:32px;height:32px}}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button],.sp-file-dropzone{transition:none!important}}";
 export {
   e as default
 };

package/dist/components/form-field/sp-form-field.css.js

@@ -1,4 +1,4 @@
-const o = ":host{display:block;font-family:inherit}.sp-form-field{display:flex;flex-direction:column;gap:4px}.sp-form-field--disabled{opacity:.5}.sp-form-field-label{font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);line-height:1.4}.sp-required{color:var(--sp-error, #FF4D4F)}.sp-form-field-control{display:block}.sp-form-field-error{font-size:12px;color:var(--sp-error, #FF4D4F)}.sp-form-field-hint{font-size:12px;color:var(--sp-text-muted, #6b7280)}@media(prefers-reduced-motion:reduce){:host{transition:none!important}}";
+const o = "*,*:before,*:after{box-sizing:border-box}:host{display:block;font-family:inherit}.sp-form-field{display:flex;flex-direction:column;gap:4px}.sp-form-field--disabled{opacity:.5}.sp-form-field-label{font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);line-height:1.4}.sp-required{color:var(--sp-error, #FF4D4F)}.sp-form-field-control{display:block}.sp-form-field-error{font-size:12px;color:var(--sp-error, #FF4D4F)}.sp-form-field-hint{font-size:12px;color:var(--sp-text-muted, #6b7280)}@media(prefers-reduced-motion:reduce){:host{transition:none!important}}";
 export {
   o as default
 };

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

@@ -1,4 +1,4 @@
-const e = ":host{display:block;--sp-gallery-bg: var(--sp-bg-subtle, #f8fafc);--sp-gallery-item-radius: 10px;--sp-gallery-caption-bg: rgba(0, 0, 0, .55);--sp-gallery-caption-color: #ffffff;--sp-gallery-selected-color: #6366f1;--sp-gallery-overlay-bg: rgba(0, 0, 0, .35);--sp-gallery-lightbox-bg: rgba(0, 0, 0, .92);--sp-gallery-lightbox-nav-bg: rgba(255, 255, 255, .12);--sp-gallery-lightbox-nav-hover: rgba(255, 255, 255, .22);--sp-gallery-skeleton-bg: var(--sp-border-subtle, #e2e8f0);--sp-gallery-skeleton-shine: var(--sp-bg-subtle, #f1f5f9)}.sp-gallery--grid{display:grid;grid-template-columns:repeat(var(--sp-gallery-cols, 3),1fr);gap:var(--sp-gallery-gap, 8px)}.sp-gallery--masonry{columns:var(--sp-gallery-cols, 3);column-gap:var(--sp-gallery-gap, 8px)}.sp-gallery--masonry .sp-gallery-item{break-inside:avoid;margin-bottom:var(--sp-gallery-gap, 8px)}.sp-gallery-item{position:relative;overflow:hidden;border-radius:var(--sp-gallery-item-radius);cursor:pointer;outline:none;background:var(--sp-gallery-skeleton-bg);transition:transform .18s ease,box-shadow .18s ease}.sp-gallery--grid .sp-gallery-item{aspect-ratio:var(--sp-gallery-ratio, 4/3)}.sp-gallery-item:focus-visible{outline:3px solid var(--sp-gallery-selected-color);outline-offset:2px;z-index:1}.sp-gallery-item--zoomable:hover,.sp-gallery-item--selectable:hover{transform:scale(1.02);box-shadow:0 8px 24px #00000026}.sp-gallery-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.sp-gallery--masonry .sp-gallery-img{height:auto}.sp-gallery-item:hover .sp-gallery-img{transform:scale(1.04)}.sp-gallery-item-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--sp-gallery-overlay-bg);color:#fff;opacity:0;transition:opacity .2s ease;border-radius:var(--sp-gallery-item-radius)}.sp-gallery-item:hover .sp-gallery-item-overlay{opacity:1}.sp-gallery-item-caption{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;background:var(--sp-gallery-caption-bg);color:var(--sp-gallery-caption-color);font-size:.78rem;line-height:1.4;transform:translateY(100%);transition:transform .2s ease;border-radius:0 0 var(--sp-gallery-item-radius) var(--sp-gallery-item-radius)}.sp-gallery-item:hover .sp-gallery-item-caption{transform:translateY(0)}.sp-gallery-item-checkbox{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:50%;background:#ffffffd9;border:2px solid rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .15s}.sp-gallery-item--selected .sp-gallery-item-checkbox{background:var(--sp-gallery-selected-color);border-color:var(--sp-gallery-selected-color);color:#fff;transform:scale(1.1)}.sp-gallery-item--selected{box-shadow:0 0 0 3px var(--sp-gallery-selected-color)}.sp-gallery-item--skeleton{aspect-ratio:var(--sp-gallery-ratio, 4/3);background:linear-gradient(90deg,var(--sp-gallery-skeleton-bg) 25%,var(--sp-gallery-skeleton-shine) 50%,var(--sp-gallery-skeleton-bg) 75%);background-size:200% 100%;animation:sp-gallery-shimmer 1.4s ease infinite;cursor:default}@keyframes sp-gallery-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.sp-gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;color:var(--sp-text-placeholder, #94a3b8);font-size:.9rem}.sp-gallery-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:var(--sp-gallery-lightbox-bg);display:flex;align-items:center;justify-content:center;animation:sp-gallery-lb-in .2s ease forwards}@keyframes sp-gallery-lb-in{0%{opacity:0}to{opacity:1}}.sp-gallery-lightbox-stage{position:relative;display:flex;flex-direction:column;align-items:center;max-width:min(92vw,1100px);max-height:90vh}.sp-gallery-lightbox-img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px;opacity:0;transition:opacity .25s ease;display:block}.sp-gallery-lightbox-img--loaded{opacity:1}.sp-gallery-lightbox-caption{margin:10px 0 0;color:#ffffffbf;font-size:.85rem;text-align:center}.sp-gallery-lightbox-close{position:fixed;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:10}.sp-gallery-lightbox-close:hover{background:#ffffff38}.sp-gallery-lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:2px}.sp-gallery-lightbox-counter{position:fixed;top:20px;left:50%;transform:translate(-50%);color:#ffffffa6;font-size:.82rem;letter-spacing:.05em;-webkit-user-select:none;user-select:none}.sp-gallery-lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:none;background:var(--sp-gallery-lightbox-nav-bg);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:10}.sp-gallery-lightbox-nav:hover{background:var(--sp-gallery-lightbox-nav-hover)}.sp-gallery-lightbox-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}.sp-gallery-lightbox-nav--prev{left:16px}.sp-gallery-lightbox-nav--next{right:16px}.sp-gallery-lightbox-dots{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:6px;align-items:center}.sp-gallery-lightbox-dot{width:7px;height:7px;border-radius:50%;border:none;background:#ffffff59;cursor:pointer;padding:0;transition:background .15s,transform .15s}.sp-gallery-lightbox-dot--active{background:#fff;transform:scale(1.4)}.sp-gallery-lightbox-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}.sp-gallery-lightbox-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:sp-gallery-spin .7s linear infinite;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes sp-gallery-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sp-gallery-item,.sp-gallery-img,.sp-gallery-item-caption,.sp-gallery-item-overlay,.sp-gallery-lightbox-img{transition:none}.sp-gallery-item--skeleton,.sp-gallery-lightbox,.sp-gallery-lightbox-spinner{animation:none}.sp-gallery-item:hover,.sp-gallery-item:hover .sp-gallery-img{transform:none}}";
+const e = "*,*:before,*:after{box-sizing:border-box}:host{display:block;--sp-gallery-bg: var(--sp-bg-subtle, #f8fafc);--sp-gallery-item-radius: 10px;--sp-gallery-caption-bg: rgba(0, 0, 0, .55);--sp-gallery-caption-color: #ffffff;--sp-gallery-selected-color: #6366f1;--sp-gallery-overlay-bg: rgba(0, 0, 0, .35);--sp-gallery-lightbox-bg: rgba(0, 0, 0, .92);--sp-gallery-lightbox-nav-bg: rgba(255, 255, 255, .12);--sp-gallery-lightbox-nav-hover: rgba(255, 255, 255, .22);--sp-gallery-skeleton-bg: var(--sp-border-subtle, #e2e8f0);--sp-gallery-skeleton-shine: var(--sp-bg-subtle, #f1f5f9)}.sp-gallery--grid{display:grid;grid-template-columns:repeat(var(--sp-gallery-cols, 3),1fr);gap:var(--sp-gallery-gap, 8px)}.sp-gallery--masonry{columns:var(--sp-gallery-cols, 3);column-gap:var(--sp-gallery-gap, 8px)}.sp-gallery--masonry .sp-gallery-item{break-inside:avoid;margin-bottom:var(--sp-gallery-gap, 8px)}.sp-gallery-item{position:relative;overflow:hidden;border-radius:var(--sp-gallery-item-radius);cursor:pointer;outline:none;background:var(--sp-gallery-skeleton-bg);transition:transform .18s ease,box-shadow .18s ease}.sp-gallery--grid .sp-gallery-item{aspect-ratio:var(--sp-gallery-ratio, 4/3)}.sp-gallery-item:focus-visible{outline:3px solid var(--sp-gallery-selected-color);outline-offset:2px;z-index:1}.sp-gallery-item--zoomable:hover,.sp-gallery-item--selectable:hover{transform:scale(1.02);box-shadow:0 8px 24px #00000026}.sp-gallery-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.sp-gallery--masonry .sp-gallery-img{height:auto}.sp-gallery-item:hover .sp-gallery-img{transform:scale(1.04)}.sp-gallery-item-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--sp-gallery-overlay-bg);color:#fff;opacity:0;transition:opacity .2s ease;border-radius:var(--sp-gallery-item-radius)}.sp-gallery-item:hover .sp-gallery-item-overlay{opacity:1}.sp-gallery-item-caption{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;background:var(--sp-gallery-caption-bg);color:var(--sp-gallery-caption-color);font-size:.78rem;line-height:1.4;transform:translateY(100%);transition:transform .2s ease;border-radius:0 0 var(--sp-gallery-item-radius) var(--sp-gallery-item-radius)}.sp-gallery-item:hover .sp-gallery-item-caption{transform:translateY(0)}.sp-gallery-item-checkbox{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:50%;background:#ffffffd9;border:2px solid rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .15s}.sp-gallery-item--selected .sp-gallery-item-checkbox{background:var(--sp-gallery-selected-color);border-color:var(--sp-gallery-selected-color);color:#fff;transform:scale(1.1)}.sp-gallery-item--selected{box-shadow:0 0 0 3px var(--sp-gallery-selected-color)}.sp-gallery-item--skeleton{aspect-ratio:var(--sp-gallery-ratio, 4/3);background:linear-gradient(90deg,var(--sp-gallery-skeleton-bg) 25%,var(--sp-gallery-skeleton-shine) 50%,var(--sp-gallery-skeleton-bg) 75%);background-size:200% 100%;animation:sp-gallery-shimmer 1.4s ease infinite;cursor:default}@keyframes sp-gallery-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.sp-gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;color:var(--sp-text-placeholder, #94a3b8);font-size:.9rem}.sp-gallery-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:var(--sp-gallery-lightbox-bg);display:flex;align-items:center;justify-content:center;animation:sp-gallery-lb-in .2s ease forwards}@keyframes sp-gallery-lb-in{0%{opacity:0}to{opacity:1}}.sp-gallery-lightbox-stage{position:relative;display:flex;flex-direction:column;align-items:center;max-width:min(92vw,1100px);max-height:90vh}.sp-gallery-lightbox-img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px;opacity:0;transition:opacity .25s ease;display:block}.sp-gallery-lightbox-img--loaded{opacity:1}.sp-gallery-lightbox-caption{margin:10px 0 0;color:#ffffffbf;font-size:.85rem;text-align:center}.sp-gallery-lightbox-close{position:fixed;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:10}.sp-gallery-lightbox-close:hover{background:#ffffff38}.sp-gallery-lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:2px}.sp-gallery-lightbox-counter{position:fixed;top:20px;left:50%;transform:translate(-50%);color:#ffffffa6;font-size:.82rem;letter-spacing:.05em;-webkit-user-select:none;user-select:none}.sp-gallery-lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:none;background:var(--sp-gallery-lightbox-nav-bg);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:10}.sp-gallery-lightbox-nav:hover{background:var(--sp-gallery-lightbox-nav-hover)}.sp-gallery-lightbox-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}.sp-gallery-lightbox-nav--prev{left:16px}.sp-gallery-lightbox-nav--next{right:16px}.sp-gallery-lightbox-dots{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:6px;align-items:center}.sp-gallery-lightbox-dot{width:7px;height:7px;border-radius:50%;border:none;background:#ffffff59;cursor:pointer;padding:0;transition:background .15s,transform .15s}.sp-gallery-lightbox-dot--active{background:#fff;transform:scale(1.4)}.sp-gallery-lightbox-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}.sp-gallery-lightbox-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:sp-gallery-spin .7s linear infinite;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes sp-gallery-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sp-gallery-item,.sp-gallery-img,.sp-gallery-item-caption,.sp-gallery-item-overlay,.sp-gallery-lightbox-img{transition:none}.sp-gallery-item--skeleton,.sp-gallery-lightbox,.sp-gallery-lightbox-spinner{animation:none}.sp-gallery-item:hover,.sp-gallery-item:hover .sp-gallery-img{transform:none}}";
 export {
   e as default
 };

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

@@ -1,4 +1,4 @@
-const t = ':host{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}:host([size="xs"]){width:12px;height:12px}:host([size="sm"]){width:16px;height:16px}:host([size="md"]){width:24px;height:24px}:host([size="lg"]){width:32px;height:32px}:host([size="xl"]){width:48px;height:48px}svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}@media(prefers-reduced-motion:reduce){:host{transition:none!important}}';
+const e = '*,*:before,*:after{box-sizing:border-box}:host{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}:host([size="xs"]){width:12px;height:12px}:host([size="sm"]){width:16px;height:16px}:host([size="md"]){width:24px;height:24px}:host([size="lg"]){width:32px;height:32px}:host([size="xl"]){width:48px;height:48px}svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}@media(prefers-reduced-motion:reduce){:host{transition:none!important}}';
 export {
-  t as default
+  e as default
 };

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

@@ -1,4 +1,4 @@
-const r = ':host{display:block;font-family:inherit}.sp-input-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-required{color:var(--sp-error, #FF4D4F)}.sp-input-container{display:flex;align-items:center;gap:8px;border:1px solid var(--sp-border, #d1d5db);border-radius:4px;background:var(--sp-bg, white);padding:0 12px;transition:border-color .2s}.sp-input-container:focus-within{border-color:var(--sp-primary, #3b82f6);outline:2px solid var(--sp-primary-focus, rgba(59, 130, 246, .2));outline-offset:-1px}.sp-input-container--error{border-color:var(--sp-error, #FF4D4F)}.sp-input-container--error:focus-within{border-color:var(--sp-error, #FF4D4F);outline-color:var(--sp-error-focus, rgba(255, 77, 79, .2))}input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:8px 0;min-width:0}input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}:host([size="sm"]) .sp-input-container{padding:0 8px}:host([size="sm"]) input{padding:6px 0;font-size:12px}:host([size="lg"]) .sp-input-container{padding:0 16px}:host([size="lg"]) input{padding:12px 0;font-size:16px}:host([disabled]) .sp-input-container{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}:host([disabled]) input{cursor:not-allowed}:host([readonly]) .sp-input-container{background:var(--sp-bg-subtle, #f9fafb)}.sp-input-clear{border:none;background:none;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0;display:flex;align-items:center;line-height:1}.sp-input-clear:hover{color:var(--sp-text-secondary, #374151)}.sp-input-footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px;min-height:16px}.sp-input-error{font-size:12px;color:var(--sp-error, #FF4D4F)}.sp-input-hint{font-size:12px;color:var(--sp-text-muted, #6b7280)}.sp-input-count{font-size:12px;color:var(--sp-text-placeholder, #9ca3af);margin-left:auto;white-space:nowrap}@media(max-width:479px){:host{width:100%}.sp-input-wrapper{width:100%}.sp-input-container{width:100%;box-sizing:border-box}}@media(prefers-reduced-motion:reduce){input{transition:none}}';
+const r = '*,*:before,*:after{box-sizing:border-box}:host{display:block;font-family:inherit}.sp-input-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-required{color:var(--sp-error, #FF4D4F)}.sp-input-container{display:flex;align-items:center;gap:8px;border:1px solid var(--sp-border, #d1d5db);border-radius:4px;background:var(--sp-bg, white);padding:0 12px;transition:border-color .2s}.sp-input-container:focus-within{border-color:var(--sp-primary, #3b82f6);outline:2px solid var(--sp-primary-focus, rgba(59, 130, 246, .2));outline-offset:-1px}.sp-input-container--error{border-color:var(--sp-error, #FF4D4F)}.sp-input-container--error:focus-within{border-color:var(--sp-error, #FF4D4F);outline-color:var(--sp-error-focus, rgba(255, 77, 79, .2))}input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:8px 0;min-width:0}input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}:host([size="sm"]) .sp-input-container{padding:0 8px}:host([size="sm"]) input{padding:6px 0;font-size:12px}:host([size="lg"]) .sp-input-container{padding:0 16px}:host([size="lg"]) input{padding:12px 0;font-size:16px}:host([disabled]) .sp-input-container{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}:host([disabled]) input{cursor:not-allowed}:host([readonly]) .sp-input-container{background:var(--sp-bg-subtle, #f9fafb)}.sp-input-clear{border:none;background:none;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0;display:flex;align-items:center;line-height:1}.sp-input-clear:hover{color:var(--sp-text-secondary, #374151)}.sp-input-footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px;min-height:16px}.sp-input-error{font-size:12px;color:var(--sp-error, #FF4D4F)}.sp-input-hint{font-size:12px;color:var(--sp-text-muted, #6b7280)}.sp-input-count{font-size:12px;color:var(--sp-text-placeholder, #9ca3af);margin-left:auto;white-space:nowrap}@media(max-width:479px){:host{width:100%}.sp-input-wrapper{width:100%}.sp-input-container{width:100%;box-sizing:border-box}}@media(prefers-reduced-motion:reduce){input{transition:none}}';
 export {
   r as default
 };

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

@@ -1,4 +1,4 @@
-const e = ':host{display:inline-block;vertical-align:middle;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.8em;padding:.2em .5em;background:linear-gradient(to bottom,var(--sp-bg-subtle, #f9fafb),var(--sp-bg-muted, #f3f4f6));border:1px solid var(--sp-border, #d1d5db);border-radius:4px;box-shadow:inset 0 -1px 0 var(--sp-border-strong, #9ca3af),0 1px 3px #0000001f;color:var(--sp-text, #1f2937);font-family:inherit;font-weight:600;line-height:1;white-space:nowrap;user-select:none;-webkit-user-select:none}:host([size="sm"]) kbd{font-size:10px;min-width:1.6em;padding:.15em .4em;border-radius:3px}:host([size="md"]) kbd{font-size:13px}:host([size="lg"]) kbd{font-size:16px;min-width:2em;padding:.25em .6em;border-radius:5px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}';
+const e = '*,*:before,*:after{box-sizing:border-box}:host{display:inline-block;vertical-align:middle;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.8em;padding:.2em .5em;background:linear-gradient(to bottom,var(--sp-bg-subtle, #f9fafb),var(--sp-bg-muted, #f3f4f6));border:1px solid var(--sp-border, #d1d5db);border-radius:4px;box-shadow:inset 0 -1px 0 var(--sp-border-strong, #9ca3af),0 1px 3px #0000001f;color:var(--sp-text, #1f2937);font-family:inherit;font-weight:600;line-height:1;white-space:nowrap;user-select:none;-webkit-user-select:none}:host([size="sm"]) kbd{font-size:10px;min-width:1.6em;padding:.15em .4em;border-radius:3px}:host([size="md"]) kbd{font-size:13px}:host([size="lg"]) kbd{font-size:16px;min-width:2em;padding:.25em .6em;border-radius:5px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}';
 export {
   e as default
 };

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

@@ -1,4 +1,4 @@
-const e = ":host{display:block}.sp-menu-item{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:14px;color:var(--sp-text-secondary, #374151);cursor:pointer;transition:background .1s;-webkit-user-select:none;user-select:none}.sp-menu-item:hover:not(.sp-menu-item--disabled){background:var(--sp-bg-muted, #f3f4f6)}.sp-menu-item--danger{color:var(--sp-error, #FF4D4F)}.sp-menu-item--danger:hover:not(.sp-menu-item--disabled){background:var(--sp-error-bg, #FFF2F0)}.sp-menu-item--disabled{opacity:.4;cursor:not-allowed}.sp-menu-item-label{flex:1}:host(:focus-visible),:host(:focus){outline:2px solid var(--sp-primary, #3b82f6);outline-offset:-2px;border-radius:4px}.sp-menu-item-divider{border:none;border-top:1px solid var(--sp-border-subtle, #e5e7eb);margin:4px 0}.sp-menu-item-check{width:16px;flex-shrink:0;font-size:13px;color:var(--sp-primary, #3b82f6)}.sp-menu-item-arrow{margin-left:auto;font-size:12px;opacity:.6}.sp-menu-item-submenu{position:absolute;top:0;left:calc(100% + 2px);z-index:10000;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}@media(max-width:480px){.sp-menu-item-submenu{position:static;box-shadow:none;border:none;border-top:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:0;margin-top:2px;padding-left:16px}}@media(prefers-reduced-motion:reduce){.sp-menu-item{transition:none}}";
+const e = "*,*:before,*:after{box-sizing:border-box}:host{display:block}.sp-menu-item{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:14px;color:var(--sp-text-secondary, #374151);cursor:pointer;transition:background .1s;-webkit-user-select:none;user-select:none}.sp-menu-item:hover:not(.sp-menu-item--disabled){background:var(--sp-bg-muted, #f3f4f6)}.sp-menu-item--danger{color:var(--sp-error, #FF4D4F)}.sp-menu-item--danger:hover:not(.sp-menu-item--disabled){background:var(--sp-error-bg, #FFF2F0)}.sp-menu-item--disabled{opacity:.4;cursor:not-allowed}.sp-menu-item-label{flex:1}:host(:focus-visible),:host(:focus){outline:2px solid var(--sp-primary, #3b82f6);outline-offset:-2px;border-radius:4px}.sp-menu-item-divider{border:none;border-top:1px solid var(--sp-border-subtle, #e5e7eb);margin:4px 0}.sp-menu-item-check{width:16px;flex-shrink:0;font-size:13px;color:var(--sp-primary, #3b82f6)}.sp-menu-item-arrow{margin-left:auto;font-size:12px;opacity:.6}.sp-menu-item-submenu{position:absolute;top:0;left:calc(100% + 2px);z-index:10000;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}@media(max-width:480px){.sp-menu-item-submenu{position:static;box-shadow:none;border:none;border-top:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:0;margin-top:2px;padding-left:16px}}@media(prefers-reduced-motion:reduce){.sp-menu-item{transition:none}}";
 export {
   e as default
 };

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

@@ -1,4 +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}}';
+const e = '*,*:before,*:after{box-sizing:border-box}: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

@@ -19,6 +19,7 @@ export declare class SpMenuComponent extends LitElement {
     placement: SpMenuPlacement;
     open: boolean;
     private _prevOpen;
+    private _closeTimer;
     render(): import('lit-html').TemplateResult;
     updated(changedProperties: Map<string, unknown>): void;
     connectedCallback(): void;

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

@@ -1 +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"}
+{"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;IAC1B,OAAO,CAAC,WAAW,CAA8C;IAExD,MAAM;IAIN,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAetD,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAUrC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAuC7B;IAEF,QAAQ,CAAC,mBAAmB,QAAO,IAAI,CAErC;IAEF,QAAQ,CAAC,gBAAgB,QAAO,IAAI,CAMlC;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

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

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

@@ -1,4 +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}';
+const o = '*,*:before,*:after{box-sizing:border-box}:host{display:contents}dialog:not([open]){display:none}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

@@ -27,10 +27,12 @@ export declare class SpModalComponent extends LitElement {
     closable: boolean;
     closeOnOverlay: boolean;
     private _previousFocus;
+    private _afterHideTimer;
     private _getFocusableElements;
     private _handleKeydown;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private readonly _handlePageHide;
     render(): import('lit-html').TemplateResult;
     updated(changed: Map<string, unknown>): void;
     readonly _handleClose: () => void;

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

@@ -1 +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"}
+{"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;IAC9C,OAAO,CAAC,eAAe,CAA8C;IAErE,OAAO,CAAC,qBAAqB;IA4B7B,OAAO,CAAC,cAAc,CA0BpB;IAEO,iBAAiB;IAMjB,oBAAoB;IAY7B,OAAO,CAAC,QAAQ,CAAC,eAAe,CAK9B;IAEO,MAAM;IAIN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAyC9C,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"}