sp-component 0.0.2 → 0.0.3

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

@@ -1,27 +1,36 @@
-import { nothing as i, html as l } from "lit";
-import { classMap as a } from "lit/directives/class-map.js";
+import { html as s, nothing as e } from "lit";
+import { classMap as t } from "lit/directives/class-map.js";
 function c() {
-  const t = l`
-    <slot name="image"></slot>
-    <slot name="header"></slot>
-    <slot></slot>
-    <slot name="footer"></slot>
-    ${this.loading ? l`<div class="sp-card-loading-overlay" aria-hidden="true"></div>` : i}
-  `;
-  return l`
+  const l = s`
+    <div class="sp-card-skeleton" aria-hidden="true">
+      <div class="sp-card-skeleton-line sp-card-skeleton-title"></div>
+      <div class="sp-card-skeleton-body">
+        <div class="sp-card-skeleton-line" style="width:100%"></div>
+        <div class="sp-card-skeleton-line" style="width:80%"></div>
+        <div class="sp-card-skeleton-line" style="width:60%"></div>
+      </div>
+      <div class="sp-card-skeleton-line sp-card-skeleton-footer" style="width:40%;margin-top:16px;"></div>
+    </div>
+  `, i = this.loading ? l : s`
+      <slot name="image"></slot>
+      <slot name="header"></slot>
+      <slot></slot>
+      <slot name="footer"></slot>
+    `;
+  return s`
     <div
-      class=${a({
+      class=${t({
     "sp-card": !0,
     "sp-card--clickable": this.clickable,
     "sp-card--loading": this.loading
   })}
       style="padding: ${this.padding}"
-      role=${this.clickable && !this.href ? "button" : i}
-      tabindex=${this.clickable && !this.href ? "0" : i}
-      @click=${this.clickable ? this._handleClick : i}
-      @keydown=${this.clickable ? this._handleKeydown : i}
+      role=${this.clickable && !this.href ? "button" : e}
+      tabindex=${this.clickable && !this.href ? "0" : e}
+      @click=${this.clickable ? this._handleClick : e}
+      @keydown=${this.clickable ? this._handleKeydown : e}
     >
-      ${this.href ? l`<a class="sp-card-link" href=${this.href}>${t}</a>` : t}
+      ${this.href ? s`<a class="sp-card-link" href=${this.href}>${i}</a>` : i}
     </div>
   `;
 }

package/dist/components/carousel/sp-carousel-slide.css.js

@@ -1,4 +1,4 @@
-const t = ":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%;flex-shrink:0;will-change:transform,opacity}:host([active]){position:relative}@media(prefers-reduced-motion:reduce){:host{transition:none}}";
+const e = "*,*:before,*:after{box-sizing:border-box}:host{display:block;position:absolute;top:0;left:0;width:100%;height:100%;flex-shrink:0;will-change:transform,opacity}:host([active]){position:relative}@media(prefers-reduced-motion:reduce){:host{transition:none}}";
 export {
-  t as default
+  e as default
 };

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

@@ -1,4 +1,4 @@
-const r = ':host{display:block;width:100%}.sp-carousel{display:flex;flex-direction:column;gap:12px;width:100%}.sp-carousel-track-wrapper{overflow:hidden;position:relative;width:100%;border-radius:8px;cursor:grab;-webkit-user-select:none;user-select:none}.sp-carousel-track-wrapper--dragging,.sp-carousel-track-wrapper:active{cursor:grabbing}.sp-carousel-track{position:relative;width:100%;height:100%}::slotted(sp-carousel-slide){transition:transform .4s cubic-bezier(.25,.46,.45,.94)}:host([effect="fade"]) ::slotted(sp-carousel-slide){transition:opacity .5s ease,transform 0s;position:absolute!important;top:0;left:0;width:100%;height:100%}:host([effect="fade"]) ::slotted(sp-carousel-slide[active]){position:relative!important}.sp-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background:#ffffffd9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--sp-text-secondary, #374151);cursor:pointer;box-shadow:0 2px 8px #00000026;transition:background .2s,transform .2s,box-shadow .2s,opacity .2s;opacity:.7}.sp-carousel-track-wrapper:hover .sp-carousel-arrow{opacity:1}.sp-carousel-arrow:hover:not(:disabled){background:#fffffffa;box-shadow:0 4px 12px #0003;transform:translateY(-50%) scale(1.08)}.sp-carousel-arrow:focus-visible{outline:2px solid #6366f1;outline-offset:2px;opacity:1}.sp-carousel-arrow:disabled{opacity:.2;cursor:not-allowed}.sp-carousel-arrow svg{width:18px;height:18px}.sp-carousel-arrow--prev{left:12px}.sp-carousel-arrow--next{right:12px}:host([orientation="vertical"]) .sp-carousel-arrow--prev{top:12px;left:50%;transform:translate(-50%)}:host([orientation="vertical"]) .sp-carousel-arrow--next{top:auto;bottom:12px;left:50%;transform:translate(-50%)}:host([orientation="vertical"]) .sp-carousel-arrow:hover:not(:disabled){transform:translate(-50%) scale(1.08)}.sp-carousel-dots{display:flex;justify-content:center;align-items:center;gap:6px}.sp-carousel-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:#cbd5e1;cursor:pointer;transition:background .2s,transform .2s,width .2s}.sp-carousel-dot:hover{background:#94a3b8}.sp-carousel-dot--active{background:#6366f1;width:24px;border-radius:4px;transform:none}.sp-carousel-dot:focus-visible{outline:2px solid #6366f1;outline-offset:2px}@media(max-width:480px){.sp-carousel-arrow{width:32px;height:32px}.sp-carousel-arrow svg{width:14px;height:14px}.sp-carousel-arrow--prev{left:6px}.sp-carousel-arrow--next{right:6px}.sp-carousel-dots{gap:4px}.sp-carousel-dot{width:6px;height:6px}.sp-carousel-dot--active{width:18px}}@media(prefers-reduced-motion:reduce){.sp-carousel-arrow,.sp-carousel-dot{transition:none}::slotted(sp-carousel-slide){transition:none}:host([effect="fade"]) ::slotted(sp-carousel-slide){transition:none}}';
+const r = '*,*:before,*:after{box-sizing:border-box}:host{display:block;width:100%}.sp-carousel{display:flex;flex-direction:column;gap:12px;width:100%}.sp-carousel-track-wrapper{overflow:hidden;position:relative;width:100%;border-radius:8px;cursor:grab;-webkit-user-select:none;user-select:none}.sp-carousel-track-wrapper--dragging,.sp-carousel-track-wrapper:active{cursor:grabbing}.sp-carousel-track{position:relative;width:100%;height:100%}::slotted(sp-carousel-slide){transition:transform .4s cubic-bezier(.25,.46,.45,.94)}:host([effect="fade"]) ::slotted(sp-carousel-slide){transition:opacity .5s ease,transform 0s;position:absolute!important;top:0;left:0;width:100%;height:100%}:host([effect="fade"]) ::slotted(sp-carousel-slide[active]){position:relative!important}.sp-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background:#ffffffd9;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--sp-text-secondary, #374151);cursor:pointer;box-shadow:0 2px 8px #00000026;transition:background .2s,transform .2s,box-shadow .2s,opacity .2s;opacity:.7}.sp-carousel-track-wrapper:hover .sp-carousel-arrow{opacity:1}.sp-carousel-arrow:hover:not(:disabled){background:#fffffffa;box-shadow:0 4px 12px #0003;transform:translateY(-50%) scale(1.08)}.sp-carousel-arrow:focus-visible{outline:2px solid #6366f1;outline-offset:2px;opacity:1}.sp-carousel-arrow:disabled{opacity:.2;cursor:not-allowed}.sp-carousel-arrow svg{width:18px;height:18px}.sp-carousel-arrow--prev{left:12px}.sp-carousel-arrow--next{right:12px}:host([orientation="vertical"]) .sp-carousel-arrow--prev{top:12px;left:50%;transform:translate(-50%)}:host([orientation="vertical"]) .sp-carousel-arrow--next{top:auto;bottom:12px;left:50%;transform:translate(-50%)}:host([orientation="vertical"]) .sp-carousel-arrow:hover:not(:disabled){transform:translate(-50%) scale(1.08)}.sp-carousel-dots{display:flex;justify-content:center;align-items:center;gap:6px}.sp-carousel-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:#cbd5e1;cursor:pointer;transition:background .2s,transform .2s,width .2s}.sp-carousel-dot:hover{background:#94a3b8}.sp-carousel-dot--active{background:#6366f1;width:24px;border-radius:4px;transform:none}.sp-carousel-dot:focus-visible{outline:2px solid #6366f1;outline-offset:2px}@media(max-width:480px){.sp-carousel-arrow{width:32px;height:32px}.sp-carousel-arrow svg{width:14px;height:14px}.sp-carousel-arrow--prev{left:6px}.sp-carousel-arrow--next{right:6px}.sp-carousel-dots{gap:4px}.sp-carousel-dot{width:6px;height:6px}.sp-carousel-dot--active{width:18px}}@media(prefers-reduced-motion:reduce){.sp-carousel-arrow,.sp-carousel-dot{transition:none}::slotted(sp-carousel-slide){transition:none}:host([effect="fade"]) ::slotted(sp-carousel-slide){transition:none}}';
 export {
   r as default
 };

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

@@ -1,4 +1,4 @@
-const e = ':host{display:inline-block}.sp-checkbox-label{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}.sp-checkbox-label--disabled{opacity:.5;cursor:not-allowed}.sp-checkbox-control{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;border:2px solid var(--sp-border, #d1d5db);border-radius:3px;background:var(--sp-bg, white);transition:all .15s;margin-top:1px}.sp-checkbox-control input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:inherit;min-width:44px;min-height:44px;top:50%;left:50%;transform:translate(-50%,-50%)}.sp-checkbox-control--checked,.sp-checkbox-control--indeterminate{background:var(--sp-primary, #3b82f6);border-color:var(--sp-primary, #3b82f6)}.sp-checkbox-control:has(input:focus-visible){outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}:host([size="sm"]) .sp-checkbox-control{width:14px;height:14px}:host([size="lg"]) .sp-checkbox-control{width:20px;height:20px;border-radius:4px}.sp-checkbox-text{font-size:14px;color:var(--sp-text-secondary, #374151);line-height:1.4}:host([size="sm"]) .sp-checkbox-text{font-size:12px}:host([size="lg"]) .sp-checkbox-text{font-size:16px}.sp-checkbox-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-checkbox-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}@media(prefers-reduced-motion:reduce){.sp-checkbox-control{transition:none}}';
+const e = '*,*:before,*:after{box-sizing:border-box}:host{display:inline-block}.sp-checkbox-label{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}.sp-checkbox-label--disabled{opacity:.5;cursor:not-allowed}.sp-checkbox-control{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;border:2px solid var(--sp-border, #d1d5db);border-radius:3px;background:var(--sp-bg, white);transition:all .15s;margin-top:1px}.sp-checkbox-control input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:inherit;min-width:44px;min-height:44px;top:50%;left:50%;transform:translate(-50%,-50%)}.sp-checkbox-control--checked,.sp-checkbox-control--indeterminate{background:var(--sp-primary, #3b82f6);border-color:var(--sp-primary, #3b82f6)}.sp-checkbox-control:has(input:focus-visible){outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}:host([size="sm"]) .sp-checkbox-control{width:14px;height:14px}:host([size="lg"]) .sp-checkbox-control{width:20px;height:20px;border-radius:4px}.sp-checkbox-text{font-size:14px;color:var(--sp-text-secondary, #374151);line-height:1.4}:host([size="sm"]) .sp-checkbox-text{font-size:12px}:host([size="lg"]) .sp-checkbox-text{font-size:16px}.sp-checkbox-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-checkbox-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}@media(prefers-reduced-motion:reduce){.sp-checkbox-control{transition:none}}';
 export {
   e as default
 };

package/dist/components/checkbox-group/sp-checkbox-group.css.js

@@ -1,4 +1,4 @@
-const o = ':host{display:block}.sp-checkbox-group{border:none;margin:0;padding:0}.sp-checkbox-group-legend{font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:8px}:host([error]) .sp-checkbox-group-legend{color:var(--sp-error, #FF4D4F)}.sp-checkbox-group-options{display:flex;flex-direction:column;gap:8px}:host([orientation="horizontal"]) .sp-checkbox-group-options{flex-direction:row;flex-wrap:wrap;gap:16px}.sp-checkbox-group-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-checkbox-group-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}';
+const o = '*,*:before,*:after{box-sizing:border-box}:host{display:block}.sp-checkbox-group{border:none;margin:0;padding:0}.sp-checkbox-group-legend{font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:8px}:host([error]) .sp-checkbox-group-legend{color:var(--sp-error, #FF4D4F)}.sp-checkbox-group-options{display:flex;flex-direction:column;gap:8px}:host([orientation="horizontal"]) .sp-checkbox-group-options{flex-direction:row;flex-wrap:wrap;gap:16px}.sp-checkbox-group-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-checkbox-group-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}';
 export {
   o as default
 };

package/dist/components/color-picker/sp-color-picker.css.js

@@ -1,4 +1,4 @@
-const r = ":host{display:inline-block;font-family:inherit;position:relative}.sp-color-picker-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-color-picker-trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, white);cursor:pointer;font-size:13px;font-family:inherit;color:var(--sp-text-secondary, #374151);transition:border-color .2s,box-shadow .2s}.sp-color-picker-trigger:hover:not(:disabled){border-color:var(--sp-border-strong, #9ca3af)}.sp-color-picker-trigger:focus-visible{outline:2px solid var(--sp-primary-focus, rgba(59, 130, 246, .5));outline-offset:1px}.sp-color-picker-trigger:disabled{opacity:.5;cursor:not-allowed}.sp-color-picker-trigger-preview{display:inline-block;width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex-shrink:0}.sp-color-picker-trigger-value{font-family:monospace;font-size:13px}.sp-color-picker-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:1000;width:260px;background:var(--sp-bg, white);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:12px;box-shadow:0 10px 25px #0000001f,0 4px 10px #0000000f;padding:16px;display:flex;flex-direction:column;gap:12px}.sp-color-picker-canvas{position:relative;width:100%;height:160px;border-radius:6px;cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none}.sp-color-picker-thumb{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid var(--sp-bg, white);box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;transform:translate(-50%,-50%);pointer-events:none}.sp-color-picker-sliders{display:flex;flex-direction:column;gap:8px}input[type=range].sp-color-picker-hue,input[type=range].sp-color-picker-alpha{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;outline:none;cursor:pointer}input[type=range].sp-color-picker-hue{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}input[type=range].sp-color-picker-hue::-webkit-slider-thumb,input[type=range].sp-color-picker-alpha::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--sp-bg, white);border:2px solid rgba(0,0,0,.2);box-shadow:0 1px 3px #0003;cursor:grab}input[type=range].sp-color-picker-alpha{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.sp-color-picker-inputs{display:flex;gap:8px}.sp-color-picker-hex-input{flex:1;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;padding:6px 10px;font-family:monospace;font-size:13px;color:var(--sp-text-secondary, #374151);outline:none;transition:border-color .2s;background:var(--sp-bg, white)}.sp-color-picker-hex-input:focus{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary-focus, rgba(59, 130, 246, .2))}.sp-color-picker-swatches{display:flex;flex-wrap:wrap;gap:6px}.sp-color-picker-swatch{width:24px;height:24px;border-radius:50%;border:2px solid rgba(0,0,0,.1);cursor:pointer;padding:0;transition:transform .15s,border-color .15s}.sp-color-picker-swatch:hover{transform:scale(1.2);border-color:#0000004d}.sp-color-picker-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-color-picker-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}.sp-color-picker--disabled .sp-color-picker-trigger{opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.sp-color-picker-trigger,.sp-color-picker-swatch{transition:none}}";
+const r = "*,*:before,*:after{box-sizing:border-box}:host{display:inline-block;font-family:inherit;position:relative}.sp-color-picker-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:4px}.sp-color-picker-trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, white);cursor:pointer;font-size:13px;font-family:inherit;color:var(--sp-text-secondary, #374151);transition:border-color .2s,box-shadow .2s}.sp-color-picker-trigger:hover:not(:disabled){border-color:var(--sp-border-strong, #9ca3af)}.sp-color-picker-trigger:focus-visible{outline:2px solid var(--sp-primary-focus, rgba(59, 130, 246, .5));outline-offset:1px}.sp-color-picker-trigger:disabled{opacity:.5;cursor:not-allowed}.sp-color-picker-trigger-preview{display:inline-block;width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex-shrink:0}.sp-color-picker-trigger-value{font-family:monospace;font-size:13px}.sp-color-picker-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:1000;width:260px;background:var(--sp-bg, white);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:12px;box-shadow:0 10px 25px #0000001f,0 4px 10px #0000000f;padding:16px;display:flex;flex-direction:column;gap:12px}.sp-color-picker-canvas{position:relative;width:100%;height:160px;border-radius:6px;cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none}.sp-color-picker-thumb{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid var(--sp-bg, white);box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;transform:translate(-50%,-50%);pointer-events:none}.sp-color-picker-sliders{display:flex;flex-direction:column;gap:8px}input[type=range].sp-color-picker-hue,input[type=range].sp-color-picker-alpha{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;outline:none;cursor:pointer}input[type=range].sp-color-picker-hue{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}input[type=range].sp-color-picker-hue::-webkit-slider-thumb,input[type=range].sp-color-picker-alpha::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--sp-bg, white);border:2px solid rgba(0,0,0,.2);box-shadow:0 1px 3px #0003;cursor:grab}input[type=range].sp-color-picker-alpha{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.sp-color-picker-inputs{display:flex;gap:8px}.sp-color-picker-hex-input{flex:1;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;padding:6px 10px;font-family:monospace;font-size:13px;color:var(--sp-text-secondary, #374151);outline:none;transition:border-color .2s;background:var(--sp-bg, white)}.sp-color-picker-hex-input:focus{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary-focus, rgba(59, 130, 246, .2))}.sp-color-picker-swatches{display:flex;flex-wrap:wrap;gap:6px}.sp-color-picker-swatch{width:24px;height:24px;border-radius:50%;border:2px solid rgba(0,0,0,.1);cursor:pointer;padding:0;transition:transform .15s,border-color .15s}.sp-color-picker-swatch:hover{transform:scale(1.2);border-color:#0000004d}.sp-color-picker-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-color-picker-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}.sp-color-picker--disabled .sp-color-picker-trigger{opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.sp-color-picker-trigger,.sp-color-picker-swatch{transition:none}}";
 export {
   r as default
 };

package/dist/components/color-picker/sp-color-picker.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sp-color-picker.template.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/sp-color-picker.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,sBAAsB,GAAG,cAAc,CA2HhF"}
+{"version":3,"file":"sp-color-picker.template.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/sp-color-picker.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,sBAAsB,GAAG,cAAc,CA4HhF"}

package/dist/components/color-picker/sp-color-picker.template.js

@@ -1,7 +1,7 @@
-import { nothing as i, html as s } from "lit";
+import { nothing as e, html as s } from "lit";
 import { classMap as a } from "lit/directives/class-map.js";
 function o() {
-  const e = this.swatches ? this.swatches.split(",").map((t) => t.trim()).filter(Boolean) : [];
+  const t = this.swatches ? this.swatches.split(",").map((i) => i.trim()).filter(Boolean) : [];
   return s`
     <div
       class=${a({
@@ -10,7 +10,7 @@ function o() {
     "sp-color-picker--error": !!this.error
   })}
     >
-      ${this.label ? s`<label class="sp-color-picker-label">${this.label}</label>` : i}
+      ${this.label ? s`<label class="sp-color-picker-label">${this.label}</label>` : e}
 
       <button
         class="sp-color-picker-trigger"
@@ -33,9 +33,10 @@ function o() {
               role="dialog"
               aria-label="Color picker"
             >
-              <!-- Gradient canvas -->
+              <!-- Gradient canvas (accessible via hue/alpha sliders and hex input) -->
               <div
                 class="sp-color-picker-canvas"
+                aria-hidden="true"
                 style="background: linear-gradient(to bottom, transparent, black),
                        linear-gradient(to right, white, hsl(${this._h},100%,50%))"
                 @pointerdown=${this._startCanvasDrag}
@@ -69,7 +70,7 @@ function o() {
                         aria-label="Alpha"
                         @input=${this._handleAlphaInput}
                       />
-                    ` : i}
+                    ` : e}
               </div>
 
               <!-- Hex / text input -->
@@ -84,25 +85,25 @@ function o() {
               </div>
 
               <!-- Swatches -->
-              ${e.length ? s`
+              ${t.length ? s`
                     <div class="sp-color-picker-swatches">
-                      ${e.map(
-    (t) => s`
+                      ${t.map(
+    (i) => s`
                           <button
                             class="sp-color-picker-swatch"
                             type="button"
-                            style="background: ${t}"
-                            aria-label=${t}
-                            @click=${() => this._selectSwatch(t)}
+                            style="background: ${i}"
+                            aria-label=${i}
+                            @click=${() => this._selectSwatch(i)}
                           ></button>
                         `
   )}
                     </div>
-                  ` : i}
+                  ` : e}
             </div>
-          ` : i}
+          ` : e}
 
-      ${this.error ? s`<span class="sp-color-picker-error" role="alert">${this.error}</span>` : this.hint ? s`<span class="sp-color-picker-hint">${this.hint}</span>` : i}
+      ${this.error ? s`<span class="sp-color-picker-error" role="alert">${this.error}</span>` : this.hint ? s`<span class="sp-color-picker-hint">${this.hint}</span>` : e}
     </div>
   `;
 }

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

@@ -1,4 +1,4 @@
-const o = ':host{display:block;font-family:inherit}.sp-combobox-wrapper{position:relative}.sp-combobox-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-combobox-container{position:relative;display:flex;align-items:center;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, white);transition:border-color .2s}.sp-combobox-container--open,.sp-combobox-container:focus-within{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary-focus, rgba(59,130,246,.2))}.sp-combobox-container--error{border-color:var(--sp-error, #FF4D4F)}.sp-combobox-container--error:focus-within{box-shadow:0 0 0 2px var(--sp-error-focus, rgba(255,77,79,.2))}.sp-combobox-input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:8px 12px;min-width:0;cursor:pointer}.sp-combobox-input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}:host([size="sm"]) .sp-combobox-input{padding:5px 8px;font-size:12px}:host([size="lg"]) .sp-combobox-input{padding:11px 16px;font-size:16px}.sp-combobox-multi-wrap{display:flex;flex-wrap:wrap;gap:4px;flex:1;align-items:center;padding:4px 6px;min-height:36px}:host([size="sm"]) .sp-combobox-multi-wrap{min-height:28px;padding:3px 5px}:host([size="lg"]) .sp-combobox-multi-wrap{min-height:46px;padding:6px 8px}.sp-combobox-input--multi{flex:1;min-width:80px;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:2px 4px;cursor:text}:host([size="sm"]) .sp-combobox-input--multi{font-size:12px}:host([size="lg"]) .sp-combobox-input--multi{font-size:16px}.sp-combobox-input--multi::placeholder{color:var(--sp-text-placeholder, #9ca3af)}.sp-combobox-tag{display:inline-flex;align-items:center;gap:3px;background:var(--sp-primary-bg, #eff6ff);color:var(--sp-primary-hover, #2563eb);border:1px solid var(--sp-primary-focus, rgba(59,130,246,.3));border-radius:4px;padding:2px 4px 2px 8px;font-size:12px;line-height:1.4;max-width:180px}.sp-combobox-tag-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-combobox-tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--sp-primary, #3b82f6);padding:0 2px;line-height:1;font-size:14px;flex-shrink:0;border-radius:2px}.sp-combobox-tag-remove:hover{color:var(--sp-error, #FF4D4F);background:var(--sp-error-bg, #FFF2F0)}.sp-combobox-clear{background:none;border:none;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0 4px;flex-shrink:0}.sp-combobox-clear:hover{color:var(--sp-text-secondary, #374151)}.sp-combobox-arrow-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0 10px;align-self:stretch;color:var(--sp-text-muted, #6b7280);flex-shrink:0}.sp-combobox-arrow-btn:disabled{cursor:not-allowed}.sp-combobox-arrow{color:var(--sp-text-muted, #6b7280);font-size:12px;pointer-events:none}.sp-combobox-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:9999;background:var(--sp-bg, white);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:6px;box-shadow:0 8px 24px #0000001f;max-height:var(--sp-combobox-max-height, 280px);overflow-y:auto}.sp-combobox-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;color:var(--sp-text-secondary, #374151);cursor:pointer}.sp-combobox-option:hover:not(.sp-combobox-option--disabled){background:var(--sp-bg-muted, #f3f4f6)}.sp-combobox-option--selected{color:var(--sp-primary, #3b82f6);font-weight:500;background:var(--sp-primary-bg, #eff6ff)}.sp-combobox-option--disabled{opacity:.4;cursor:not-allowed}.sp-combobox-option--highlighted{background:var(--sp-bg-muted, #f3f4f6)}.sp-combobox-option--selected.sp-combobox-option--highlighted{background:var(--sp-primary-bg, #eff6ff);filter:brightness(.96)}.sp-combobox-option-check{width:16px;flex-shrink:0;font-size:12px;color:var(--sp-primary, #3b82f6);font-weight:700}.sp-combobox-no-results{padding:12px;font-size:14px;color:var(--sp-text-placeholder, #9ca3af);text-align:center}.sp-combobox-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-combobox-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}:host([disabled]) .sp-combobox-container{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}:host([disabled]) .sp-combobox-input{cursor:not-allowed}@media(max-width:479px){.sp-combobox-wrapper{width:100%}.sp-combobox-dropdown{left:0;right:0;width:100%}}@media(prefers-reduced-motion:reduce){.sp-combobox-container{transition:none}}';
+const o = '*,*:before,*:after{box-sizing:border-box}:host{display:block;font-family:inherit}.sp-combobox-wrapper{position:relative}.sp-combobox-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-combobox-container{position:relative;display:flex;align-items:center;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;background:var(--sp-bg, white);transition:border-color .2s}.sp-combobox-container--open,.sp-combobox-container:focus-within{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 2px var(--sp-primary-focus, rgba(59,130,246,.2))}.sp-combobox-container--error{border-color:var(--sp-error, #FF4D4F)}.sp-combobox-container--error:focus-within{box-shadow:0 0 0 2px var(--sp-error-focus, rgba(255,77,79,.2))}.sp-combobox-input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:8px 12px;min-width:0;cursor:pointer}.sp-combobox-input::placeholder{color:var(--sp-text-placeholder, #9ca3af)}:host([size="sm"]) .sp-combobox-input{padding:5px 8px;font-size:12px}:host([size="lg"]) .sp-combobox-input{padding:11px 16px;font-size:16px}.sp-combobox-multi-wrap{display:flex;flex-wrap:wrap;gap:4px;flex:1;align-items:center;padding:4px 6px;min-height:36px}:host([size="sm"]) .sp-combobox-multi-wrap{min-height:28px;padding:3px 5px}:host([size="lg"]) .sp-combobox-multi-wrap{min-height:46px;padding:6px 8px}.sp-combobox-input--multi{flex:1;min-width:80px;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--sp-text, #111827);padding:2px 4px;cursor:text}:host([size="sm"]) .sp-combobox-input--multi{font-size:12px}:host([size="lg"]) .sp-combobox-input--multi{font-size:16px}.sp-combobox-input--multi::placeholder{color:var(--sp-text-placeholder, #9ca3af)}.sp-combobox-tag{display:inline-flex;align-items:center;gap:3px;background:var(--sp-primary-bg, #eff6ff);color:var(--sp-primary-hover, #2563eb);border:1px solid var(--sp-primary-focus, rgba(59,130,246,.3));border-radius:4px;padding:2px 4px 2px 8px;font-size:12px;line-height:1.4;max-width:180px}.sp-combobox-tag-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-combobox-tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--sp-primary, #3b82f6);padding:0 2px;line-height:1;font-size:14px;flex-shrink:0;border-radius:2px}.sp-combobox-tag-remove:hover{color:var(--sp-error, #FF4D4F);background:var(--sp-error-bg, #FFF2F0)}.sp-combobox-clear{background:none;border:none;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0 4px;flex-shrink:0}.sp-combobox-clear:hover{color:var(--sp-text-secondary, #374151)}.sp-combobox-arrow-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0 10px;align-self:stretch;color:var(--sp-text-muted, #6b7280);flex-shrink:0}.sp-combobox-arrow-btn:disabled{cursor:not-allowed}.sp-combobox-arrow{color:var(--sp-text-muted, #6b7280);font-size:12px;pointer-events:none}.sp-combobox-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:9999;background:var(--sp-bg, white);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:6px;box-shadow:0 8px 24px #0000001f;max-height:var(--sp-combobox-max-height, 280px);overflow-y:auto}.sp-combobox-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;color:var(--sp-text-secondary, #374151);cursor:pointer}.sp-combobox-option:hover:not(.sp-combobox-option--disabled){background:var(--sp-bg-muted, #f3f4f6)}.sp-combobox-option--selected{color:var(--sp-primary, #3b82f6);font-weight:500;background:var(--sp-primary-bg, #eff6ff)}.sp-combobox-option--disabled{opacity:.4;cursor:not-allowed}.sp-combobox-option--highlighted{background:var(--sp-bg-muted, #f3f4f6)}.sp-combobox-option--selected.sp-combobox-option--highlighted{background:var(--sp-primary-bg, #eff6ff);filter:brightness(.96)}.sp-combobox-option-check{width:16px;flex-shrink:0;font-size:12px;color:var(--sp-primary, #3b82f6);font-weight:700}.sp-combobox-no-results{padding:12px;font-size:14px;color:var(--sp-text-placeholder, #9ca3af);text-align:center}.sp-combobox-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-combobox-hint{display:block;font-size:12px;color:var(--sp-text-muted, #6b7280);margin-top:4px}:host([disabled]) .sp-combobox-container{opacity:.5;cursor:not-allowed;background:var(--sp-bg-subtle, #f9fafb)}:host([disabled]) .sp-combobox-input{cursor:not-allowed}@media(max-width:479px){.sp-combobox-wrapper{width:100%}.sp-combobox-dropdown{left:0;right:0;width:100%}}@media(prefers-reduced-motion:reduce){.sp-combobox-container{transition:none}}';
 export {
   o as default
 };

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

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

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

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

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

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

package/dist/components/confirm-dialog/sp-confirm-dialog.css.js

@@ -1,4 +1,4 @@
-const o = ":host{display:contents}dialog{padding:0;border:none;border-radius:12px;box-shadow:0 20px 60px #00000040;background:transparent;max-width:440px;width:calc(100vw - 32px);animation:sp-dialog-in .2s ease}dialog::backdrop{background:var(--sp-overlay, rgba(0, 0, 0, .45));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:sp-backdrop-in .2s ease}@keyframes sp-dialog-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes sp-backdrop-in{0%{opacity:0}to{opacity:1}}.sp-confirm-dialog-panel{background:var(--sp-bg, #ffffff);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:12px}.sp-confirm-dialog-title{margin:0;font-size:18px;font-weight:600;color:var(--sp-text, #111827);line-height:1.3}.sp-confirm-dialog-message{margin:0;font-size:14px;color:var(--sp-text-muted, #4b5563);line-height:1.5}.sp-confirm-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.sp-confirm-cancel,.sp-confirm-ok{display:inline-flex;align-items:center;justify-content:center;padding:8px 20px;border-radius:6px;font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;transition:opacity .15s,background .15s;border:1px solid transparent}.sp-confirm-cancel{background:var(--sp-bg-subtle, #f9fafb);color:var(--sp-text-secondary, #374151);border-color:var(--sp-border, #d1d5db)}.sp-confirm-cancel:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-confirm-ok--default{background:var(--sp-primary, #3b82f6);color:var(--sp-bg, #ffffff)}.sp-confirm-ok--default:hover{opacity:.87}.sp-confirm-ok--destructive{background:var(--sp-error, #FF4D4F);color:var(--sp-bg, #ffffff)}.sp-confirm-ok--destructive:hover{opacity:.87}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}";
+const o = "*,*:before,*:after{box-sizing:border-box}:host{display:contents}dialog{padding:0;border:none;border-radius:12px;box-shadow:0 20px 60px #00000040;background:transparent;max-width:440px;width:calc(100vw - 32px);animation:sp-dialog-in .2s ease}dialog::backdrop{background:var(--sp-overlay, rgba(0, 0, 0, .45));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:sp-backdrop-in .2s ease}@keyframes sp-dialog-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes sp-backdrop-in{0%{opacity:0}to{opacity:1}}.sp-confirm-dialog-panel{background:var(--sp-bg, #ffffff);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:12px}.sp-confirm-dialog-title{margin:0;font-size:18px;font-weight:600;color:var(--sp-text, #111827);line-height:1.3}.sp-confirm-dialog-message{margin:0;font-size:14px;color:var(--sp-text-muted, #4b5563);line-height:1.5}.sp-confirm-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.sp-confirm-cancel,.sp-confirm-ok{display:inline-flex;align-items:center;justify-content:center;padding:8px 20px;border-radius:6px;font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;transition:opacity .15s,background .15s;border:1px solid transparent}.sp-confirm-cancel{background:var(--sp-bg-subtle, #f9fafb);color:var(--sp-text-secondary, #374151);border-color:var(--sp-border, #d1d5db)}.sp-confirm-cancel:hover{background:var(--sp-bg-muted, #f3f4f6)}.sp-confirm-ok--default{background:var(--sp-primary, #3b82f6);color:var(--sp-bg, #ffffff)}.sp-confirm-ok--default:hover{opacity:.87}.sp-confirm-ok--destructive{background:var(--sp-error, #FF4D4F);color:var(--sp-bg, #ffffff)}.sp-confirm-ok--destructive:hover{opacity:.87}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}";
 export {
   o as default
 };

package/dist/components/copy-button/sp-copy-button.css.js

@@ -1,4 +1,4 @@
-const o = ':host{display:inline-block}.sp-copy-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:var(--sp-copy-button-radius, 4px);font-family:inherit;font-weight:500;cursor:pointer;transition:opacity .2s;line-height:1;box-sizing:border-box;white-space:nowrap}:host([size="sm"]) .sp-copy-button{height:24px;padding:0 8px;font-size:12px}:host([size="md"]) .sp-copy-button{height:32px;padding:0 12px;font-size:13px}:host([size="lg"]) .sp-copy-button{height:40px;padding:0 16px;font-size:14px}:host([variant="primary"]) .sp-copy-button{background-color:var(--sp-primary, #3b82f6);color:var(--sp-bg, #ffffff);border:1px solid transparent}:host([variant="secondary"]) .sp-copy-button{background-color:var(--sp-text-muted, #6b7280);color:var(--sp-bg, #ffffff);border:1px solid transparent}:host([variant="ghost"]) .sp-copy-button{background-color:transparent;color:var(--sp-primary, #3b82f6);border:1px solid var(--sp-primary, #3b82f6)}:host(:not([disabled])) .sp-copy-button:hover{opacity:.85}.sp-copy-button--success{opacity:.9}:host([disabled]) .sp-copy-button{opacity:.5;cursor:not-allowed;pointer-events:none}.sp-copy-button svg{width:1em;height:1em;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sp-copy-button: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}}';
+const o = '*,*:before,*:after{box-sizing:border-box}:host{display:inline-block}.sp-copy-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:var(--sp-copy-button-radius, 4px);font-family:inherit;font-weight:500;cursor:pointer;transition:opacity .2s;line-height:1;box-sizing:border-box;white-space:nowrap}:host([size="sm"]) .sp-copy-button{height:24px;padding:0 8px;font-size:12px}:host([size="md"]) .sp-copy-button{height:32px;padding:0 12px;font-size:13px}:host([size="lg"]) .sp-copy-button{height:40px;padding:0 16px;font-size:14px}:host([variant="primary"]) .sp-copy-button{background-color:var(--sp-primary, #3b82f6);color:var(--sp-bg, #ffffff);border:1px solid transparent}:host([variant="secondary"]) .sp-copy-button{background-color:var(--sp-text-muted, #6b7280);color:var(--sp-bg, #ffffff);border:1px solid transparent}:host([variant="ghost"]) .sp-copy-button{background-color:transparent;color:var(--sp-primary, #3b82f6);border:1px solid var(--sp-primary, #3b82f6)}:host(:not([disabled])) .sp-copy-button:hover{opacity:.85}.sp-copy-button--success{opacity:.9}:host([disabled]) .sp-copy-button{opacity:.5;cursor:not-allowed;pointer-events:none}.sp-copy-button svg{width:1em;height:1em;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sp-copy-button: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 {
   o as default
 };

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

@@ -1,4 +1,4 @@
-const e = ':host{display:block;--sp-divider-color: var(--sp-border-subtle, #e5e7eb)}:host([orientation="vertical"]){display:inline-flex;height:100%;align-self:stretch}.sp-divider{display:flex;align-items:center;width:100%}:host([orientation="vertical"]) .sp-divider{flex-direction:column;height:100%;width:auto}.sp-divider-line{flex:1;border:none;margin:0}:host([orientation="horizontal"]) .sp-divider-line{border-top:1px solid var(--sp-divider-color)}:host([orientation="vertical"]) .sp-divider-line{border-left:1px solid var(--sp-divider-color);height:100%;width:0}:host([variant="dashed"]) .sp-divider-line{border-style:dashed!important}:host([variant="dotted"]) .sp-divider-line{border-style:dotted!important}.sp-divider-label{flex-shrink:0;padding:0 12px;font-size:12px;color:var(--sp-text-placeholder, #9ca3af);white-space:nowrap}@media(prefers-reduced-motion:reduce){:host{transition:none!important}}';
+const e = '*,*:before,*:after{box-sizing:border-box}:host{display:block;--sp-divider-color: var(--sp-border-subtle, #e5e7eb)}:host([orientation="vertical"]){display:inline-flex;height:100%;align-self:stretch}.sp-divider{display:flex;align-items:center;width:100%}:host([orientation="vertical"]) .sp-divider{flex-direction:column;height:100%;width:auto}.sp-divider-line{flex:1;border:none;margin:0}:host([orientation="horizontal"]) .sp-divider-line{border-top:1px solid var(--sp-divider-color)}:host([orientation="vertical"]) .sp-divider-line{border-left:1px solid var(--sp-divider-color);height:100%;width:0}:host([variant="dashed"]) .sp-divider-line{border-style:dashed!important}:host([variant="dotted"]) .sp-divider-line{border-style:dotted!important}.sp-divider-label{flex-shrink:0;padding:0 12px;font-size:12px;color:var(--sp-text-placeholder, #9ca3af);white-space:nowrap}@media(prefers-reduced-motion:reduce){:host{transition:none!important}}';
 export {
   e as default
 };

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

@@ -1,4 +1,4 @@
-const e = ':host{display:contents}dialog{padding:0;border:none;max-height:100%;max-width:100%;overflow:hidden;margin:0;background:transparent}dialog::backdrop{background:var(--sp-overlay, rgba(0, 0, 0, .5))}:host([placement="right"]) dialog{margin-left:auto;height:100vh}:host([placement="left"]) dialog{margin-right:auto;height:100vh}:host([placement="top"]) dialog{margin-bottom:auto;width:100vw}:host([placement="bottom"]) dialog{margin-top:auto;width:100vw}.sp-drawer-panel{background:var(--sp-bg, white);height:100%;display:flex;flex-direction:column;box-shadow:-4px 0 20px #00000026;overflow:hidden;position:relative}:host([placement="left"]) .sp-drawer-panel{box-shadow:4px 0 20px #00000026;animation:sp-drawer-left .25s ease}:host([placement="right"]) .sp-drawer-panel{animation:sp-drawer-right .25s ease}:host([placement="top"]) .sp-drawer-panel{box-shadow:0 4px 20px #00000026;animation:sp-drawer-top .25s ease}:host([placement="bottom"]) .sp-drawer-panel{box-shadow:0 -4px 20px #00000026;animation:sp-drawer-bottom .25s ease}@keyframes sp-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sp-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes sp-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sp-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sp-drawer-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-drawer-close:hover{color:var(--sp-text, #111827);background:var(--sp-bg-muted, #f3f4f6)}.sp-drawer-close:focus-visible{outline:2px solid var(--sp-primary-hover, #2563eb);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host([placement="left"]) .sp-drawer-panel,:host([placement="right"]) .sp-drawer-panel,:host([placement="top"]) .sp-drawer-panel,:host([placement="bottom"]) .sp-drawer-panel{animation:none}}.sp-drawer-body{flex:1;overflow-y:auto;padding:20px}::slotted([slot="header"]){display:block;padding:20px 20px 16px;font-size:18px;font-weight:600;color:var(--sp-text, #111827);border-bottom:1px solid var(--sp-border-subtle, #e5e7eb)}::slotted([slot="footer"]){display:block;padding:16px 20px 20px;border-top:1px solid var(--sp-border-subtle, #e5e7eb)}@media(max-width:480px){:host([placement="left"]) dialog,:host([placement="right"]) dialog{width:100vw!important}:host([placement="left"]) .sp-drawer-panel,:host([placement="right"]) .sp-drawer-panel{width:100vw;max-width:100vw}}';
+const e = '*,*:before,*:after{box-sizing:border-box}:host{display:contents}dialog:not([open]){display:none}dialog{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh;padding:0;border:none;margin:0;background:transparent;overflow:hidden}dialog::backdrop{background:var(--sp-overlay, rgba(0, 0, 0, .5))}:host([placement="right"]) dialog{display:flex;flex-direction:row;justify-content:flex-end;align-items:stretch}:host([placement="left"]) dialog{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch}:host([placement="top"]) dialog{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}:host([placement="bottom"]) dialog{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch}.sp-drawer-panel{background:var(--sp-bg, white);display:flex;flex-direction:column;overflow:hidden;position:relative;flex-shrink:0}:host([placement="left"]) .sp-drawer-panel,:host([placement="right"]) .sp-drawer-panel{height:100vh}:host([placement="right"]) .sp-drawer-panel{box-shadow:-4px 0 20px #00000026}:host([placement="left"]) .sp-drawer-panel{box-shadow:4px 0 20px #00000026}:host([placement="top"]) .sp-drawer-panel{box-shadow:0 4px 20px #00000026}:host([placement="bottom"]) .sp-drawer-panel{box-shadow:0 -4px 20px #00000026}:host([placement="right"]) .sp-drawer-panel{animation:sp-drawer-right .25s ease}:host([placement="left"]) .sp-drawer-panel{animation:sp-drawer-left .25s ease}:host([placement="top"]) .sp-drawer-panel{animation:sp-drawer-top .25s ease}:host([placement="bottom"]) .sp-drawer-panel{animation:sp-drawer-bottom .25s ease}:host([closing][placement="right"]) .sp-drawer-panel{animation:sp-drawer-right .25s ease reverse forwards}:host([closing][placement="left"]) .sp-drawer-panel{animation:sp-drawer-left .25s ease reverse forwards}:host([closing][placement="top"]) .sp-drawer-panel{animation:sp-drawer-top .25s ease reverse forwards}:host([closing][placement="bottom"]) .sp-drawer-panel{animation:sp-drawer-bottom .25s ease reverse forwards}@keyframes sp-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sp-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes sp-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sp-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sp-drawer-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-drawer-close:hover{color:var(--sp-text, #111827);background:var(--sp-bg-muted, #f3f4f6)}.sp-drawer-close:focus-visible{outline:2px solid var(--sp-primary-hover, #2563eb);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host([placement="right"]) .sp-drawer-panel,:host([placement="left"]) .sp-drawer-panel,:host([placement="top"]) .sp-drawer-panel,:host([placement="bottom"]) .sp-drawer-panel,:host([closing][placement="right"]) .sp-drawer-panel,:host([closing][placement="left"]) .sp-drawer-panel,:host([closing][placement="top"]) .sp-drawer-panel,:host([closing][placement="bottom"]) .sp-drawer-panel{animation:none}}.sp-drawer-body{flex:1;overflow-y:auto;padding:20px}::slotted([slot="header"]){display:block;padding:20px 20px 16px;font-size:18px;font-weight:600;color:var(--sp-text, #111827);border-bottom:1px solid var(--sp-border-subtle, #e5e7eb)}::slotted([slot="footer"]){display:block;padding:16px 20px 20px;border-top:1px solid var(--sp-border-subtle, #e5e7eb)}@media(max-width:480px){:host([placement="left"]) .sp-drawer-panel,:host([placement="right"]) .sp-drawer-panel{width:100vw!important}}';
 export {
   e as default
 };

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

@@ -31,10 +31,14 @@ export declare class SpDrawerComponent extends LitElement {
     private _previousFocus;
     private _touchStartX;
     private _touchStartY;
+    private _afterHideTimer;
+    private _closeTimer;
+    private static readonly ANIM_DURATION;
     private _getFocusableElements;
     private _handleKeydown;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private readonly _handlePageHide;
     render(): import('lit-html').TemplateResult;
     updated(changed: Map<string, unknown>): void;
     private readonly _handleTouchStart;

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

@@ -1 +1 @@
-{"version":3,"file":"sp-drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/sp-drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,UAAS;IAGb,KAAK,SAAM;IAGX,SAAS,EAAE,iBAAiB,CAAW;IAGvC,IAAI,SAAW;IAGf,QAAQ,UAAQ;IAGhB,cAAc,UAAQ;IAEtB,OAAO,CAAC,cAAc,CAAwB;IAC9C,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,YAAY,CAAK;IAEzB,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;IAwC9C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAKhC;IAEF,OAAO,CAAC,QAAQ,CAAC,eAAe,CAqB9B;IAEF,cAAc,IAAI,MAAM;IAOxB,QAAQ,CAAC,YAAY,aAEnB;IAEF,QAAQ,CAAC,mBAAmB,GAAI,GAAG,UAAU,UAE3C;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}
+{"version":3,"file":"sp-drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/sp-drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,UAAS;IAGb,KAAK,SAAM;IAGX,SAAS,EAAE,iBAAiB,CAAW;IAGvC,IAAI,SAAW;IAGf,QAAQ,UAAQ;IAGhB,cAAc,UAAQ;IAEtB,OAAO,CAAC,cAAc,CAAwB;IAC9C,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,eAAe,CAA8C;IACrE,OAAO,CAAC,WAAW,CAA8C;IACjE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAO;IAE5C,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,cAAc,CAwBpB;IAEO,iBAAiB;IAMjB,oBAAoB;IAc7B,OAAO,CAAC,QAAQ,CAAC,eAAe,CAK9B;IAEO,MAAM;IAIN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAqD9C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAKhC;IAEF,OAAO,CAAC,QAAQ,CAAC,eAAe,CAqB9B;IAEF,cAAc,IAAI,MAAM;IAOxB,QAAQ,CAAC,YAAY,aAEnB;IAEF,QAAQ,CAAC,mBAAmB,GAAI,GAAG,UAAU,UAE3C;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}