@solid-design-system/components 4.8.1 → 4.9.0

package/dist/chunks/{chunk.PWGSF3ZK.js → chunk.27LAMXW5.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.KL2TXON5.js → chunk.4LV4VHB5.js}

@@ -20,7 +20,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.MVTLWOO6.js → chunk.4TLTIOIY.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.R6RYT35M.js → chunk.4UEQEUQ5.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.TMJWUQJA.js → chunk.6V7KPUGO.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ZA7XBPBQ.js → chunk.7VCFYOV5.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.7TEDJEW2.js → chunk.B7BIS5Y4.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.RHATTS2F.js → chunk.BABTMD4T.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.66D76UI7.js → chunk.BJSTXBIQ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.C6RBE2LQ.js → chunk.BWIRKW7E.js}

@@ -26,7 +26,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   animateTo,
   stopAnimations
@@ -585,7 +585,7 @@ var SdSelect = class extends SolidElement {
       this.size === "sm" ? "text-sm" : "text-base",
       this.open && "z-50"
     )}"><span class="sr-only" aria-live="polite">${this.deletedTagLabel}</span> ${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label id="label" part="form-control-label" class="${hasLabel && "inline-block"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative w-full bg-white", selectState === "disabled" ? "text-neutral-500" : "text-black")}"><div part="border" class="${cx(
-      "absolute top-0 w-full h-full pointer-events-none border rounded-default z-10 transition-[colors,border-width] duration-fast ease-in-out",
+      "absolute top-0 w-full h-full pointer-events-none border rounded-default z-10 transition-[border] duration-medium ease-in-out",
       {
         disabled: "border-neutral-500",
         visuallyDisabled: "border-neutral-500",
@@ -604,7 +604,7 @@ var SdSelect = class extends SolidElement {
     )}" placement="${this.placement}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift sync="width" auto-size="vertical" auto-size-padding="10" exportparts="
               popup:popup__content,
             "><div class="${cx(
-      "relative w-full h-full grid grid-cols-1",
+      "relative w-full h-full grid grid-cols-1 rounded-default transition-colors hover:duration-fast ease-in-out",
       this.visuallyDisabled || this.disabled ? "hover:bg-transparent" : "hover:bg-neutral-200"
     )}" slot="anchor"><div class="${cx(
       "input-container flex items-center w-full h-full px-4",
@@ -622,7 +622,7 @@ var SdSelect = class extends SolidElement {
       iconMarginLeft,
       this.value.length > 0 ? "visible" : "invisible"
     )}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-700 z-10", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="system" name="risk"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
-      "inline-flex ml-2 transition-all items-center transition-transform duration-medium ease-in-out",
+      "inline-flex ml-2 items-center transition-transform duration-medium ease-in-out",
       this.open ? "rotate-180" : "rotate-0",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary",
       iconSize

package/dist/chunks/{chunk.NMFWOLLO.js → chunk.C2LS4326.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.BYNEIT5O.js → chunk.C4WMHAOW.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.APR7T2Q2.js → chunk.CMK6UTW6.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.GVOME6PD.js → chunk.CWJB3CZO.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.VCIIYGYE.js → chunk.CYM2Q7GX.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.6XBF3N4L.js → chunk.DYRAOE5L.js}

@@ -25,7 +25,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.LKIMQD74.js → chunk.E73VDVFB.js}

@@ -1,6 +1,6 @@
 import {
   SdDivider
-} from "./chunk.66D76UI7.js";
+} from "./chunk.BJSTXBIQ.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.AOR7TGS6.js → chunk.ECH5BTRG.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.js";

package/dist/chunks/{chunk.FT7UBABX.js → chunk.EQRUJQQW.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.F4E63GW7.js → chunk.ERRAXV4M.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.L6RX3JU4.js → chunk.EYTEM45R.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.OOTMYYX7.js";
+} from "./chunk.R3PPZNKA.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.3FXZJEOK.js → chunk.F4UAU4OM.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.WQXQXTPT.js → chunk.GAJFV5V3.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.EDWWY2WL.js → chunk.H36YEYQD.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.LFS3FPZC.js → chunk.HEYBJG64.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.2NNBJVTZ.js → chunk.JNJHWACL.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.IYYFKCD2.js → chunk.JNTED6KG.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.3SSTRTWG.js → chunk.JQD4QY3H.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   animateTo,
   parseDuration,

package/dist/chunks/{chunk.ZUQDKLXG.js → chunk.KNZPI3QD.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.QMVHHAVD.js → chunk.KWP3CREC.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.5D3DLEA5.js → chunk.LOW4LWP6.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.W2B5IXKP.js → chunk.LQKJMBVH.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.NKA4K4KV.js → chunk.LW7RVQTS.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -35,17 +35,12 @@ var SdVideo = class extends SolidElement {
   get video() {
     return this.querySelector("video");
   }
-  /** Fade out poster after initial play. */
-  fadeoutPoster() {
-    if (this.poster instanceof HTMLImageElement) {
-      this.poster.style.opacity = "0";
-    }
-  }
   /** Hide poster after initial play & fadeout. */
-  hidePoster() {
-    if (this.poster instanceof HTMLImageElement) {
-      this.poster.style.display = "none";
-    }
+  async hidePoster() {
+    if (!(this.poster instanceof HTMLImageElement)) return;
+    this.poster.style.opacity = "0";
+    await new Promise((resolve) => setTimeout(resolve, this.token("sd-duration-medium", 300)));
+    this.poster.style.display = "none";
   }
   setVideoInert(inert) {
     var _a, _b;
@@ -61,7 +56,7 @@ var SdVideo = class extends SolidElement {
     this.emit("sd-play");
     this.playing = true;
     (_a = this.video) == null ? void 0 : _a.play();
-    this.fadeoutPoster();
+    this.hidePoster();
     this.setVideoInert(false);
   }
   /** Restrict keydown control to enter and space bar to mimic the native video tag behavior. If a KeyboardEvent is used, refocus on the native video element to give the user seamless keyboard control. */
@@ -103,12 +98,12 @@ var SdVideo = class extends SolidElement {
       this.playing ? "opacity-0" : "opacity-100",
       this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
       "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-icon id="default-play-icon" library="system" name="start"></sd-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<slot></slot></div>`;
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-icon id="default-play-icon" library="system" name="start"></sd-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
   }
 };
 SdVideo.styles = [
   ...SolidElement.styles,
-  css`:host{display:inline-block;overflow:hidden;position:relative}.play-pause-transition,::slotted([slot=poster]){transition-duration:.3s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}::slotted([slot=poster]){left:var(--sd-spacing-0,0);position:absolute;top:var(--sd-spacing-0,0);width:100%;z-index:10}#default-play-icon,::slotted([slot=play-icon]){left:50%;position:absolute;top:50%;--tw-translate-x:-50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}`
+  css`:host{display:inline-block;overflow:hidden;position:relative}.play-pause-transition,::slotted([slot=poster]){--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-duration:var(--sd-duration-medium,.3s);transition-property:opacity,transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}#default-play-icon,::slotted([slot=play-icon]){left:50%;position:absolute;top:50%;--tw-translate-x:-50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:has([part=play-button]:hover) ::slotted([slot=poster]){--tw-scale-x:1.1!important;--tw-scale-y:1.1!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}`
 ];
 __decorateClass([
   query("[part=base]")

package/dist/chunks/{chunk.NB24DI75.js → chunk.MSSKOOJJ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.7QLBUQWZ.js → chunk.NI45NXZV.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.NRUFRUNL.js → chunk.O7OXBLZU.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.6IAQSTST.js";
+} from "./chunk.OWACJFST.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";