@solid-design-system/components 4.6.18 → 4.7.1

package/dist/chunks/{chunk.CNYF5RAM.js → chunk.JMF35STD.js}

@@ -17,10 +17,6 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
-import {
-  animateTo,
-  stopAnimations
-} from "./chunk.EY4JPJJQ.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -39,7 +35,11 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.25AH7KN2.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -776,7 +776,7 @@ var SdCombobox = class extends SolidElement {
       this.size === "sm" ? "text-sm" : "text-base",
       this.open && "z-50"
     )}"><label id="label" part="form-control-label" class="${hasLabel && "inline-block mb-2"}" aria-hidden="${!hasLabel}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label> <span aria-live="polite" class="sr-only">${this.deletedTagLabel}</span><div part="form-control-input" class="relative w-full bg-white text-black"><div part="border" class="${cx(
-      "absolute top-0 w-full h-full pointer-events-none border rounded-default z-10",
+      "absolute top-0 w-full h-full pointer-events-none border rounded-default z-10 transition-[colors,border-width] duration-fast ease-in-out",
       {
         disabled: "border-neutral-500",
         visuallyDisabled: "border-neutral-500",
@@ -797,7 +797,7 @@ var SdCombobox = class extends SolidElement {
             "><div part="combobox" class="${cx(
       "relative w-full px-4 flex flex-row items-center rounded-default",
       this.visuallyDisabled || this.disabled ? "hover:bg-transparent" : "hover:bg-neutral-200",
-      this.open && "shadow",
+      this.open && "shadow transition-shadow duration-medium ease-in-out",
       {
         sm: "py-1 min-h-[32px]",
         md: "py-1 min-h-[40px]",
@@ -815,9 +815,12 @@ var SdCombobox = class extends SolidElement {
       "inline-flex ml-2 leading-[0]",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary",
       iconSize
-    )}">${this.type !== "search" ? html`<sd-icon class="${cx("transition-all", this.open ? "rotate-180" : "rotate-0")}" name="chevron-down" part="chevron" library="system" color="currentColor" label="${this.localize.term("open")}"></sd-icon>` : ""}</slot>${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : html`<button class="sd-interactive combobox-button absolute top-2" @keydown="${this.handleComboboxMouseDown}" type="button"><span class="sr-only">${this.localize.term("open")}</span></button>`}</div><div id="listbox" role="${ifDefined(!this.multiple ? "listbox" : void 0)}" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
+    )}">${this.type !== "search" ? html`<sd-icon class="${cx(
+      "transition-transform duration-medium ease-in-out",
+      this.open ? "rotate-180" : "rotate-0"
+    )}" name="chevron-down" part="chevron" library="system" color="currentColor" label="${this.localize.term("open")}"></sd-icon>` : ""}</slot>${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : html`<button class="sd-interactive combobox-button absolute top-2" @keydown="${this.handleComboboxMouseDown}" type="button"><span class="sr-only">${this.localize.term("open")}</span></button>`}</div><div id="listbox" role="${ifDefined(!this.multiple ? "listbox" : void 0)}" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
       "bg-white px-2 py-3 relative border-primary overflow-y-auto",
-      this.open && "shadow",
+      this.open && "shadow transition-shadow duration-medium ease-in-out",
       this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default" : "border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default"
     )}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-popup></div><div part="form-control-help-text" id="help-text" class="text-sm text-neutral-700 mt-2" aria-hidden="${!hasHelpText}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
   }
@@ -988,18 +991,12 @@ SdCombobox = __decorateClass([
   customElement("sd-combobox")
 ], SdCombobox);
 setDefaultAnimation("combobox.show", {
-  keyframes: [
-    { opacity: 0, scale: 0.9 },
-    { opacity: 1, scale: 1 }
-  ],
-  options: { duration: 100, easing: "ease" }
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out" }
 });
 setDefaultAnimation("combobox.hide", {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.9 }
-  ],
-  options: { duration: 100, easing: "ease" }
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out" }
 });
 
 export {

package/dist/chunks/{chunk.4ASHVYWQ.js → chunk.KALJB7Q2.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.KHQD2N5S.js → chunk.KL3FS5YT.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -102,14 +102,14 @@ var SdNavigationItem = class extends SolidElement {
       "cursor-pointer relative focus-visible:focus-outline",
       { md: "text-base", lg: "text-lg", sm: "text-[14px]" }[this.size],
       this.disabled ? "text-neutral-500 pointer-events-none" : "text-primary",
+      this.current && "font-bold",
       isAccordion ? "flex flex-col" : "inline-block w-full",
       this.divider && this.vertical && "mt-0.25",
       !this.vertical && "inline-flex items-center",
-      !this.separated && "hover:bg-neutral-200 group transition-all min-h-[48px] px-4"
+      !this.separated && "hover:bg-neutral-200 group transition-colors duration-fast ease-in-out min-h-[48px] px-4"
     )}" aria-current="${ifDefined(this.current ? "page" : void 0)}" aria-disabled="${this.disabled}" ?disabled="${ifDefined(isButton ? this.disabled : void 0)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${isLink ? "link" : "button"}" tabindex="${this.disabled || this.separated ? "-1" : "0"}" @click="${this.separated ? void 0 : isAccordion ? this.handleClickSummary : isButton ? this.handleClickButton : void 0}"><div part="current-indicator" class="${cx(
-      "absolute left-0 pointer-events-none transition-all duration-150",
-      this.vertical ? "w-1 h-[calc(100%-16px)] top-2 group-hover:h-full group-hover:top-0" : "h-1 w-full bottom-0",
-      this.current ? "bg-accent" : "bg-transparent",
+      "absolute bg-accent left-0 pointer-events-none",
+      this.vertical ? "w-1 h-[calc(100%-16px)] top-2 group-hover:h-full group-hover:top-0" : "h-1 w-[calc(100%-16px)] bottom-0 left-2 group-hover:w-full group-hover:left-0",
       this.disabled && "bg-neutral-500"
     )}"></div><span part="content-area" class="${cx(
       "relative pt-3 inline-flex justify-between items-center",
@@ -117,7 +117,7 @@ var SdNavigationItem = class extends SolidElement {
       slots["description"] || this.separated ? "pb-1" : horizontalPaddingBottom,
       this.calculatePaddingX
     )}">${this.divider && this.vertical ? html`<sd-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated ? html`<a class="${cx(
-      "mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-all min-h-[48px]",
+      "mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-colors duration-fast ease-in-out min-h-[48px]",
       !slots["description"] && "py-4"
     )}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline"></slot></a>` : html`<slot part="content" class="inline"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
       "mr-4 h-6 w-6 transition-all",
@@ -145,7 +145,7 @@ var SdNavigationItem = class extends SolidElement {
  */
 SdNavigationItem.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:inline-block;position:relative}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}`
+  css`:host{box-sizing:border-box;display:inline-block;position:relative}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}[part=current-indicator]{--tw-scale-x:0;--tw-scale-y:0;opacity:var(--sd-opacity-0,0);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:var(--sd-duration-fast,.15s);transition:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,opacity var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out var(--sd-duration-fast)}:host([current]) [part=current-indicator]{--tw-scale-x:1;--tw-scale-y:1;opacity:var(--sd-opacity-100,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:width var(--sd-duration-fast) ease-in-out,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}`
 ];
 __decorateClass([
   query('a[part="base"], button[part="base"]')

package/dist/chunks/{chunk.2B6KEGZJ.js → chunk.M3MSH2U2.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.F3R45NNC.js → chunk.M6SZ7ZI5.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.JUFMAAP2.js → chunk.NC3YA6W4.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.SOC7MXFP.js → chunk.O3HODN3U.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.ZOBNVT2R.js → chunk.PP4HPJME.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.V3OFS667.js → chunk.QCKLKM6O.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.EBWV7WLX.js → chunk.QDMA3Q4K.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -32,7 +32,7 @@ var SdTag = class extends SolidElement {
   handleFocus() {
     this.emit("sd-focus");
   }
-  handleRemoveClick() {
+  handleRemove() {
     this.emit("sd-remove");
   }
   isLink() {
@@ -50,12 +50,20 @@ var SdTag = class extends SolidElement {
   blur() {
     this.tag.blur();
   }
+  /** Visually hides the tag */
+  async hide() {
+    this.emit("sd-hide");
+    this.style.opacity = "0";
+    await new Promise((resolve) => setTimeout(resolve, this.token("sd-duration-fast", 150)));
+    this.hidden = true;
+    this.emit("sd-after-hide");
+  }
   render() {
     const isLink = this.isLink();
     const tag = isLink ? literal`a` : this.removable ? literal`div` : literal`button`;
     return html`<${tag} part="base" type="${ifDefined(isLink ? void 0 : "button")}" href="${ifDefined(isLink ? this.href : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" aria-labelledby="content" aria-disabled="${this.disabled ? "true" : "false"}" aria-pressed="${ifDefined(this.toggleable ? this.selected : void 0)}" tabindex="${this.disabled || this.removable ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" class="${cx(
       /* basic styles of the wrapper */
-      "inline-flex border box-border rounded-full items-center leading-none whitespace-nowrap focus-visible:focus-outline",
+      "inline-flex border box-border rounded-full items-center leading-none whitespace-nowrap transition-colors duration-fast ease-in-out focus-visible:focus-outline",
       {
         /* sizes, fonts */
         lg: "h-8 text-base gap-2",
@@ -67,14 +75,17 @@ var SdTag = class extends SolidElement {
         sm: !this.removable ? "px-3 py-[5px]" : "pl-3 pr-2 py-2"
       }[this.size],
       /* colors */
-      !this.selected ? "border-primary text-primary hover:border-primary-500 hover:bg-neutral-100 hover:text-primary-500  disabled:border-neutral-500 disabled:text-neutral-500" : "bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500 disabled:bg-neutral-500 disabled:border-neutral-500",
+      !this.selected ? cx(
+        "border-primary text-primary disabled:border-neutral-500 disabled:text-neutral-500",
+        !this.removable ? "hover:border-primary-500 hover:bg-neutral-100 hover:text-primary-500" : "has-[button:hover]:border-primary-500 has-[button:hover]:bg-neutral-100 has-[button:hover]:text-primary-500"
+      ) : "bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500 disabled:bg-neutral-500 disabled:border-neutral-500",
       this.disabled && !isLink && "cursor-not-allowed"
-    )}"><slot id="content" part="content"></slot>${this.removable ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemoveClick}"><slot part="removable-indicator" name="removable-indicator"><sd-icon library="system" name="close" label="${this.localize.term("remove")}"></sd-icon></slot></button>` : ""}</${tag}>`;
+    )}"><slot id="content" part="content"></slot>${this.removable ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemove}"><slot part="removable-indicator" name="removable-indicator"><sd-icon library="system" name="close" label="${this.localize.term("remove")}"></sd-icon></slot></button>` : ""}</${tag}>`;
   }
 };
 SdTag.styles = [
   ...SolidElement.styles,
-  css`:host{display:inline-block}:host([size=lg])::part(removable-indicator){font-size:var(--sd-font-size-base,1rem)}:host([size=sm])::part(removable-indicator){font-size:.75rem}`
+  css`:host{display:inline-block;transition-duration:.15s;transition-duration:var(--sd-duration-fast,.15s);transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host([size=lg])::part(removable-indicator){font-size:var(--sd-font-size-base,1rem)}:host([size=sm])::part(removable-indicator){font-size:.75rem}`
 ];
 __decorateClass([
   query("a, button, div")

package/dist/chunks/{chunk.VL533T34.js → chunk.QWTYLITE.js}

@@ -1,6 +1,6 @@
 import {
   SdDivider
-} from "./chunk.GFSU4Q7M.js";
+} from "./chunk.VJXC54A5.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.GEYUPHEW.js → chunk.RX6XKJHU.js}

@@ -8,10 +8,6 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
-import {
-  animateTo,
-  stopAnimations
-} from "./chunk.EY4JPJJQ.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -24,7 +20,11 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.25AH7KN2.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -277,9 +277,9 @@ var SdDropdown = class extends SolidElement {
     }
   }
   render() {
-    return html`<sd-popup part="base" id="dropdown" placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10" ?active="${this.open}"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
-      "shadow bg-white",
-      this.open ? "block pointer-events-auto" : "pointer-events-none",
+    return html`<sd-popup part="base" id="dropdown" placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
+      "shadow bg-white block",
+      this.open ? "pointer-events-auto" : "pointer-events-none",
       this.rounded && "rounded-md"
     )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-popup>`;
   }
@@ -337,18 +337,12 @@ SdDropdown = __decorateClass([
   customElement("sd-dropdown")
 ], SdDropdown);
 setDefaultAnimation("dropdown.show", {
-  keyframes: [
-    { opacity: 0, scale: 0.9 },
-    { opacity: 1, scale: 1 }
-  ],
-  options: { duration: 100, easing: "ease" }
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out" }
 });
 setDefaultAnimation("dropdown.hide", {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.9 }
-  ],
-  options: { duration: 100, easing: "ease" }
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out" }
 });
 
 export {

package/dist/chunks/{chunk.SIDHPKLE.js → chunk.SUI2ZW2T.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.js";
@@ -306,7 +306,7 @@ var SdAudio = class extends SolidElement {
 };
 SdAudio.styles = [
   ...SolidElement.styles,
-  css`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-offset:2px;outline-style:solid}.progress-slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-moz-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-moz-range-thumb{outline-offset:2px;outline-style:solid}sd-button::part(base){align-items:center;border-radius:var(--sd-border-radius-full,9999px);display:flex;height:var(--sd-spacing-16,4rem);justify-content:center;width:var(--sd-spacing-16,4rem)}sd-button::part(label){align-items:center;display:flex;flex-grow:0}`
+  css`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-offset:2px;outline-style:solid}.progress-slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-moz-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-moz-range-thumb{outline-offset:2px;outline-style:solid}sd-button::part(base){align-items:center;border-radius:var(--sd-border-radius-full,9999px);display:flex;height:var(--sd-spacing-16,4rem);justify-content:center;width:var(--sd-spacing-16,4rem)}sd-button::part(motion-wrapper){border-radius:var(--sd-border-radius-full,9999px)}sd-button::part(label){align-items:center;display:flex;flex-grow:0}`
 ];
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "reversed-layout" })

package/dist/chunks/{chunk.VGPSQWRX.js → chunk.TBJ2K5CM.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.DZ2V3IQW.js → chunk.TPVMHWEM.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.L3TICIB2.js → chunk.U37W2B3U.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.FUTSGCSR.js → chunk.UHGWZDAA.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.FTGGE5XH.js → chunk.UOWEL76U.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.EDGHZRRO.js → chunk.VA6HEC7C.js}

@@ -2,10 +2,6 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
-import {
-  animateTo,
-  stopAnimations
-} from "./chunk.EY4JPJJQ.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -18,7 +14,11 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.25AH7KN2.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ZCYYTGMW.js → chunk.VCPNOCNJ.js}

@@ -10,10 +10,6 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
-import {
-  animateTo,
-  stopAnimations
-} from "./chunk.EY4JPJJQ.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -29,7 +25,11 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.25AH7KN2.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.WC2X4NWF.js → chunk.VEOF7FJ7.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.GFSU4Q7M.js → chunk.VJXC54A5.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.YDCALUT4.js → chunk.W4P6LQXL.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.HIOTTMRM.js → chunk.WAYFISPO.js}

@@ -2,11 +2,6 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
-import {
-  animateTo,
-  parseDuration,
-  stopAnimations
-} from "./chunk.EY4JPJJQ.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -19,7 +14,12 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5TWLYNWT.js";
+} from "./chunk.WKOQPOCH.js";
+import {
+  animateTo,
+  parseDuration,
+  stopAnimations
+} from "./chunk.25AH7KN2.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";