@solid-design-system/components 7.0.0-next.1 → 7.0.0-next.10

package/dist/chunks/{chunk.WKBNTZYS.js → chunk.INSUQDO7.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -106,7 +106,7 @@ var SdOption = class extends SolidElement {
  */
 SdOption.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
 :host{position:relative;display:block;width:100%;--tw-outline-style:none!important;outline-style:none!important}.focus-outline-offset{outline-offset:-2px}.sd-option--disabled-color-border{border-color:rgb(var(--sd-option--disabled-color-border))}`
 ];
 __decorateClass([

package/dist/chunks/{chunk.K6EQX5H6.js → chunk.IXJGPE6X.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -51,7 +51,7 @@ var SdButtonGroup = class extends SolidElement {
 };
 SdButtonGroup.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
 :host{display:inline-block}[part=base]{display:flex;flex-wrap:nowrap}`
 ];
 __decorateClass([

package/dist/chunks/{chunk.TXVRZXUB.js → chunk.JAPL7DQX.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -83,8 +83,8 @@ var SdTeaser = class extends SolidElement {
 };
 SdTeaser.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}::slotted(*){margin:calc(var(--sd-spacing-1) * 0)}`
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{display:block}::slotted(*){margin:0}::slotted([slot=headline]){margin:0;font-size:var(--sd-text-lg);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-leading:var(--leading-normal, 1.5);line-height:var(--leading-normal,1.5);--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold)}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })

package/dist/chunks/{chunk.GWNXDEYS.js → chunk.JHSA2DI2.js}

@@ -1,18 +1,18 @@
+import {
+  requestIcon
+} from "./chunk.P52GZVKG.js";
 import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.54DGZ62W.js";
-import {
-  requestIcon
-} from "./chunk.P52GZVKG.js";
+} from "./chunk.XBDLZTHZ.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -105,7 +105,7 @@ var SdIcon = class extends SolidElement {
 };
 SdIcon.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
 :host{width:1em;height:1em;box-sizing:content-box!important;display:inline-block}svg{display:block;height:100%;width:100%}:host([color=primary]) svg{color:rgba(var(--sd-color-icon-fill-primary,var(--sd-color-primary)))}:host([name^='content/'][color=primary]) svg{color:rgba(var(--sd-color-icon-fill-content-icons-primary,var(--sd-color-primary)))}:host([color=white]) svg{color:rgba(var(--sd-color-text-white))}`
 ];
 __decorateClass([

package/dist/chunks/{chunk.7MA7NTM5.js → chunk.KAWDESCC.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -150,7 +150,7 @@ var SdAccordion = class extends SolidElement {
 };
 SdAccordion.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
 :host{display:block}[part=header]::-webkit-details-marker{display:none}[part=base]{border-color:rgba(var(--sd-accordion-color-border,var(--sd-accordion-color-text)));border-block-width:var(--sd-accordion-border-width)}[part=summary-icon] sd-icon{color:rgb(var(--sd-accordion__chevron-color-text,var(--sd-accordion-color-icon-fill)))}`
 ];
 __decorateClass([

package/dist/chunks/{chunk.BT6SAX2H.js → chunk.KE6F4NXN.js}

@@ -21,6 +21,12 @@ var translation = {
   dateRangePlaceholder: "Select date range",
   endDateSelected: "End date selected",
   expandNavigationItem: "Expand navigation item",
+  fileButtonText: "Select file",
+  fileButtonTextMultiple: "Select files",
+  fileDragDrop: "Drop or select file",
+  fileDragDropMultiple: "Drop or select files",
+  folderButtonText: "Select folder",
+  folderDragDrop: "Drop or select folder",
   goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,
   hidePassword: "Hide password",
   invalidDate: "Invalid date",
@@ -33,6 +39,9 @@ var translation = {
   nextYear: "Next year",
   noResults: "No results found",
   notifications: "Notifications",
+  numFilesSelected: (num, isDirectory, isMultiple) => {
+    return num === 0 ? isDirectory ? isMultiple ? "No folders selected" : "No folder selected" : isMultiple ? "No files selected" : "No file selected" : isDirectory ? `${num} folder${num === 1 ? "" : "s"} selected` : `${num} files selected`;
+  },
   numOptionsSelected: (num) => {
     if (num === 0) return "";
     return `Options selected (${num})`;

package/dist/chunks/{chunk.4BAU2OM4.js → chunk.LJ5ONJGL.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -37,6 +37,7 @@ var SdButton = class extends SolidElement {
     });
     this.hasSlotController = new HasSlotController(this, "[default]", "icon-left", "icon-right");
     this.invalid = false;
+    this.hasUiMotion = false;
     this.title = "";
     this.variant = "primary";
     this.inverted = false;
@@ -63,11 +64,22 @@ var SdButton = class extends SolidElement {
     }
     return "";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateMotionTheme();
+  }
   firstUpdated() {
     if (this.isButton()) {
       this.formControlController.updateValidity();
     }
   }
+  onThemeChange() {
+    this.updateMotionTheme();
+  }
+  updateMotionTheme() {
+    const theme = getComputedStyle(this).getPropertyValue("--sd-theme").trim().replace(/['"]/g, "");
+    this.hasUiMotion = theme === "" || theme === "ui-light" || theme === "ui-dark";
+  }
   handleBlur() {
     this.emit("sd-blur");
   }
@@ -149,11 +161,42 @@ var SdButton = class extends SolidElement {
       "icon-only": this._iconsInDefaultSlot.length > 0
     };
     const hasBorder = this.variant === "secondary";
-    return html`<${tag} part="base" class="${cx(
+    const variantBackgroundColors = {
+      primary: this.inverted ? {
+        motionBackground: "sd-button--primary--inverted--hover-color-background group-active:sd-button--primary--inverted--active-color-background",
+        baseBackground: "hover:sd-button--primary--inverted--hover-color-background active:sd-button--primary--inverted--active-color-background"
+      } : {
+        motionBackground: "sd-button--primary--hover-color-background group-active:sd-button--primary--active-color-background",
+        baseBackground: "hover:sd-button--primary--hover-color-background active:sd-button--primary--active-color-background"
+      },
+      secondary: this.inverted ? {
+        motionBackground: "sd-button--secondary--inverted--hover-color-background group-active:sd-button--secondary--inverted--active-color-background group-active:sd-button--secondary--inverted--active-color-text",
+        baseBackground: "hover:sd-button--secondary--inverted--hover-color-background active:sd-button--secondary--inverted--active-color-background"
+      } : {
+        motionBackground: "sd-button--secondary--hover-color-background group-active:sd-button--secondary--active-color-background",
+        baseBackground: "hover:sd-button--secondary--hover-color-background active:sd-button--secondary--active-color-background"
+      },
+      tertiary: this.inverted ? {
+        motionBackground: "sd-button--tertiary--inverted--hover-color-background group-active:sd-button--tertiary--inverted--active-color-background group-active:sd-button--tertiary--inverted--active-color-text",
+        baseBackground: "hover:sd-button--tertiary--inverted--hover-color-background active:sd-button--tertiary--inverted--active-color-background"
+      } : {
+        motionBackground: "sd-button--tertiary--hover-color-background group-active:sd-button--tertiary--active-color-background",
+        baseBackground: "hover:sd-button--tertiary--hover-color-background active:sd-button--tertiary--active-color-background"
+      },
+      cta: this.inverted ? {
+        motionBackground: "sd-button--cta--inverted--hover-color-background group-active:sd-button--cta--inverted--active-color-background",
+        baseBackground: "hover:sd-button--cta--inverted--hover-color-background active:sd-button--cta--inverted--active-color-background"
+      } : {
+        motionBackground: "bg-accent-500 group-active:bg-accent-700",
+        baseBackground: "hover:bg-accent-500 active:bg-accent-700"
+      }
+    }[this.variant];
+    return html`<sd-theme-listener></sd-theme-listener><${tag} part="base" class="${cx(
       `group relative z-10 font-md no-underline
         w-full align-middle inline-flex items-stretch justify-center
         transition-colors duration-fast ease-in-out
         select-none cursor-[inherit]`,
+      !this.hasUiMotion && "sd-button--simple-motion",
       !this.inverted ? "focus-visible:focus-outline" : "focus-visible:focus-outline-inverted",
       this.loading && "relative cursor-wait",
       (this.disabled || this.visuallyDisabled) && "cursor-not-allowed",
@@ -179,21 +222,22 @@ var SdButton = class extends SolidElement {
       }[this.size],
       {
         /* variants */
-        primary: !this.inverted ? `${this.visuallyDisabled ? "sd-button--primary--disabled-color-background border-neutral-500 text-white" : "sd-button--primary--default-color-background border-transparent sd-button--primary--default-color-text hover:sd-button--primary--hover-color-text active:sd-button--primary--active-color-text active:sd-button--primary--active-color-background"}
-          disabled:sd-button--primary--disabled-color-background disabled:text-white` : `${this.visuallyDisabled ? "sd-button--inverted--disabled-color-background text-white border-neutral-500" : "sd-button--primary--inverted--default-color-text sd-button--primary--inverted--default-color-background border-white hover:sd-button--primary--inverted--hover-color-text active:sd-button--primary--inverted--active-color-text active:sd-button--primary--inverted--active-color-background"}
+        primary: !this.inverted ? `${this.visuallyDisabled ? "sd-button--primary--disabled-color-background border-neutral-500 text-white" : "sd-button--primary--default-color-background border-transparent sd-button--primary--default-color-text hover:sd-button--primary--hover-color-text active:sd-button--primary--active-color-text"}
+          disabled:sd-button--primary--disabled-color-background disabled:text-white` : `${this.visuallyDisabled ? "sd-button--inverted--disabled-color-background text-white border-neutral-500" : "sd-button--primary--inverted--default-color-text sd-button--primary--inverted--default-color-background border-white hover:sd-button--primary--inverted--hover-color-text active:sd-button--primary--inverted--active-color-text"}
           disabled:sd-button--inverted--disabled-color-background disabled:text-white`,
         secondary: !this.inverted ? `border sd-button-border-width ${this.visuallyDisabled ? "sd-button--secondary--disabled-color-text sd-button--secondary--disabled-color-border" : "sd-button--secondary--default-color-text sd-button--secondary--default-color-border hover:sd-button--secondary--hover-color-text hover:sd-button--secondary--hover-color-border active:sd-button--secondary--active-color-text active:sd-button--secondary--active-color-border"}
-          disabled:sd-button--secondary--disabled-color-text disabled:sd-button--secondary--disabled-color-border` : `border sd-button-border-width ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600" : "sd-button--secondary--inverted-color-text sd-button--secondary--inverted-color-border hover:sd-button--secondary--inverted-color-border hover:sd-button--secondary--inverted--hover-color-text hover:sd-button--secondary--inverted--hover-color-background active:sd-button--secondary--inverted--active-color-text active:border-primary-200 active:sd-button--secondary--inverted--active-color-background"}
+          disabled:sd-button--secondary--disabled-color-text disabled:sd-button--secondary--disabled-color-border` : `border sd-button-border-width ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600" : "sd-button--secondary--inverted-color-text sd-button--secondary--inverted-color-border hover:sd-button--secondary--inverted-color-border hover:sd-button--secondary--inverted--hover-color-text active:sd-button--secondary--inverted--active-color-text active:border-primary-200"}
           disabled:sd-button--inverted--disabled-color-border disabled:sd-button--inverted--disabled-color-text`,
         tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-button--tertiary--disabled-color-text" : "sd-button--tertiary--default-color-text hover:sd-button--tertiary--hover-color-text active:sd-button--tertiary--active-color-text"}
-          disabled:sd-button--tertiary--disabled-color-text` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600" : "sd-button--tertiary--inverted-color-text hover:sd-button--tertiary--inverted--hover-color-text hover:sd-button--tertiary--inverted--hover-color-background active:sd-button--tertiary--inverted--active-color-background active:sd-button--tertiary--inverted--active-color-text"}
+          disabled:sd-button--tertiary--disabled-color-text` : `border-transparent  ${this.visuallyDisabled ? "text-neutral-600" : "sd-button--tertiary--inverted-color-text hover:sd-button--tertiary--inverted--hover-color-text active:sd-button--tertiary--inverted--active-color-text"}
           disabled:sd-button--inverted--disabled-color-text`,
-        cta: `${this.visuallyDisabled ? "sd-button--primary--disabled-color-background border-neutral-500" : "bg-accent border-transparent hover:bg-accent-500"}
-          ${!this.inverted ? "text-white bg-accent disabled:sd-button--primary--disabled-color-background hover:bg-accent-500 disabled:border-neutral-500 disabled:text-white" : "sd-button--cta--inverted--default-color-background sd-button--cta--inverted--default-color-text hover:sd-button--cta--inverted--hover-color-text active:sd-button--cta--inverted--active-color-text disabled:sd-button--inverted--disabled-color-background disabled:text-white"}`
-      }[this.variant]
+        cta: `${this.visuallyDisabled ? "sd-button--primary--disabled-color-background border-neutral-500" : "border-transparent"}
+          ${!this.inverted ? "text-white bg-accent disabled:sd-button--primary--disabled-color-background disabled:border-neutral-500 disabled:text-white" : "sd-button--cta--inverted--default-color-background sd-button--cta--inverted--default-color-text hover:sd-button--cta--inverted--hover-color-text active:sd-button--cta--inverted--active-color-text disabled:sd-button--inverted--disabled-color-background disabled:text-white"}`
+      }[this.variant],
+      !this.hasUiMotion && !this.disabled && !this.visuallyDisabled && variantBackgroundColors.baseBackground
     )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" 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="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><div part="motion-wrapper" class="${cx(
       "absolute inset-0 -z-10 overflow-hidden pointer-events-none ",
-      (this.disabled || this.visuallyDisabled) && "hidden",
+      (!this.hasUiMotion || this.disabled || this.visuallyDisabled) && "hidden",
       {
         /* sizes, fonts */
         sm: `sd-button-border-radius`,
@@ -202,20 +246,11 @@ var SdButton = class extends SolidElement {
       }[this.size]
     )}"><div class="absolute inset-0 w-full h-full transition-all duration-fast translate-y-full group-hover:translate-y-0 group-hover:mt-[-22%] mt-[11%]"><div class="${cx(
       "absolute right-0 min-w-full min-h-full aspect-square skew-y-[-11deg] mt-[11%]",
-      {
-        primary: !this.inverted ? "sd-button--primary--hover-color-background group-active:sd-button--primary--active-color-background" : "sd-button--primary--inverted--hover-color-background group-active:sd-button--primary--inverted--active-color-background",
-        secondary: !this.inverted ? "sd-button--secondary--hover-color-background group-active:sd-button--secondary--active-color-background" : "sd-button--secondary--inverted--hover-color-background group-active:sd-button--secondary--inverted--active-color-background group-active:sd-button--secondary--inverted--active-color-text",
-        tertiary: !this.inverted ? "sd-button--tertiary--hover-color-background group-active:sd-button--tertiary--active-color-background" : "sd-button--tertiary--inverted--hover-color-background group-active:sd-button--tertiary--inverted--active-color-background group-active:sd-button--tertiary--inverted--active-color-text",
-        cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-button--cta--inverted--hover-color-background group-active:sd-button--cta--inverted--active-color-background"
-      }[this.variant]
+      variantBackgroundColors.motionBackground
     )}"></div><div class="${cx(
       "absolute w-full h-full mt-[22%]",
-      {
-        primary: !this.inverted ? "sd-button--primary--hover-color-background group-active:sd-button--primary--active-color-background" : "sd-button--primary--inverted--hover-color-background group-active:sd-button--primary--inverted--active-color-background",
-        secondary: !this.inverted ? "sd-button--secondary--hover-color-background group-active:sd-button--secondary--active-color-background" : "sd-button--secondary--inverted--hover-color-background group-active:sd-button--secondary--inverted--active-color-background group-active:sd-button--secondary--inverted--active-color-text group-active:sd-button--secondary--active-color-border",
-        tertiary: !this.inverted ? "sd-button--tertiary--hover-color-background group-active:sd-button--tertiary--active-color-background" : "sd-button--tertiary--inverted--hover-color-background group-active:sd-button--tertiary--inverted--active-color-background group-active:sd-button--tertiary--inverted--active-color-text",
-        cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-button--cta--inverted--hover-color-background group-active:sd-button--cta--inverted--active-color-background"
-      }[this.variant]
+      variantBackgroundColors.motionBackground,
+      this.variant === "secondary" && this.inverted && "group-active:sd-button--secondary--active-color-border"
     )}"></div></div></div><slot name="icon-left" part="icon-left" class="${cx(
       "flex flex-auto items-center justify-end pointer-events-none",
       slots["icon-only"] && "hidden",
@@ -251,8 +286,8 @@ var SdButton = class extends SolidElement {
  */
 SdButton.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-badge){pointer-events:none;position:absolute;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);--tw-translate-x:calc(1 / 2 * 100%)!important;--tw-translate-y:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-icon),sd-loader{font-size:calc(var(--tw-varspacing)/ 2)}:host([size=lg]) ::slotted(sd-icon){font-size:var(--sd-button--size-lg-icon-height,var(--sd-spacing-6))}:host([size=sm]) .sd-button--size-sm-border-radius{border-radius:var(--sd-button--size-sm-border-radius,var(--sd-button-border-radius))}:host([size=md]) .sd-button--size-md-border-radius{border-radius:var(--sd-button--size-md-border-radius,var(--sd-button-border-radius))}:host([size=lg]) .sd-button--size-lg-border-radius{border-radius:var(--sd-button--size-lg-border-radius,var(--sd-button-border-radius))}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}.sd-button--simple-motion{transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,box-shadow 150ms ease}::slotted(sd-badge){pointer-events:none;position:absolute;top:0;right:0;--tw-translate-x:calc(1 / 2 * 100%)!important;--tw-translate-y:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-icon),sd-loader{font-size:calc(var(--tw-varspacing)/ 2)}:host([size=lg]) ::slotted(sd-icon){font-size:var(--sd-button--size-lg-icon-height,var(--sd-spacing-6))}:host([size=sm]) .sd-button--size-sm-border-radius{border-radius:var(--sd-button--size-sm-border-radius,var(--sd-button-border-radius))}:host([size=md]) .sd-button--size-md-border-radius{border-radius:var(--sd-button--size-md-border-radius,var(--sd-button-border-radius))}:host([size=lg]) .sd-button--size-lg-border-radius{border-radius:var(--sd-button--size-lg-border-radius,var(--sd-button-border-radius))}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
 ];
 __decorateClass([
   query("a, button")
@@ -263,6 +298,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], SdButton.prototype, "invalid", 2);
+__decorateClass([
+  state()
+], SdButton.prototype, "hasUiMotion", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], SdButton.prototype, "title", 2);

package/{dist-versioned/chunks/chunk.WDWV53JP.js → dist/chunks/chunk.LTZVVIB2.js}

@@ -7,26 +7,6 @@ function getOffset(element, parent) {
 }
 
 // src/internal/scroll.ts
-var locks = /* @__PURE__ */ new Set();
-function getScrollbarWidth() {
-  const documentWidth = document.documentElement.clientWidth;
-  return Math.abs(window.innerWidth - documentWidth);
-}
-function lockBodyScrolling(lockingEl) {
-  locks.add(lockingEl);
-  if (!document.body.classList.contains("sd-scroll-lock")) {
-    const scrollbarWidth = getScrollbarWidth();
-    document.body.classList.add("sd-scroll-lock");
-    document.body.style.setProperty("--sd-scroll-lock-size", `${scrollbarWidth}px`);
-  }
-}
-function unlockBodyScrolling(lockingEl) {
-  locks.delete(lockingEl);
-  if (locks.size === 0) {
-    document.body.classList.remove("sd-scroll-lock");
-    document.body.style.removeProperty("--sd-scrollbar-width");
-  }
-}
 function scrollIntoView(element, container, direction = "vertical", behavior = "smooth") {
   const offset = getOffset(element, container);
   const offsetTop = offset.top + container.scrollTop;
@@ -52,7 +32,5 @@ function scrollIntoView(element, container, direction = "vertical", behavior = "
 }
 
 export {
-  lockBodyScrolling,
-  unlockBodyScrolling,
   scrollIntoView
 };

package/dist/chunks/{chunk.QFAJOIOI.js → chunk.OUFMMO37.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -64,8 +64,8 @@ var SdTeaserMedia = class extends SolidElement {
 };
 SdTeaserMedia.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}::slotted(*){margin:calc(var(--sd-spacing-1) * 0)}:host([variant=white]) .background:focus-within{background-color:rgba(var(--sd-color-background-white))}@supports (color:color-mix(in lab,red,red)){:host([variant=white]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-white)) var(--sd-opacity-90),transparent)}}:host([variant=neutral-100]) .background:focus-within{background-color:rgba(var(--sd-color-background-neutral-100))}@supports (color:color-mix(in lab,red,red)){:host([variant=neutral-100]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-neutral-100)) var(--sd-opacity-90),transparent)}}:host([variant=primary]) .background:focus-within{background-color:rgba(var(--sd-color-background-primary))}@supports (color:color-mix(in lab,red,red)){:host([variant=primary]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-primary)) var(--sd-opacity-90),transparent)}}:host([variant=primary-100]) .background:focus-within{background-color:rgba(var(--sd-color-background-primary-100))}@supports (color:color-mix(in lab,red,red)){:host([variant=primary-100]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-primary-100)) var(--sd-opacity-90),transparent)}}:host([variant=gradient-light]) .bg-gradient-to-t{--sd-color-background-white:var(--sd-informational-gradient--white-color-background, var(--sd-color-white))}:host([variant=gradient-dark]) .bg-gradient-to-t{--sd-color-background-primary-800:var(
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:block}::slotted(*){margin:0}:host([variant=white]) .background:focus-within{background-color:rgba(var(--sd-color-background-white))}@supports (color:color-mix(in lab,red,red)){:host([variant=white]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-white)) var(--sd-opacity-90),transparent)}}:host([variant=neutral-100]) .background:focus-within{background-color:rgba(var(--sd-color-background-neutral-100))}@supports (color:color-mix(in lab,red,red)){:host([variant=neutral-100]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-neutral-100)) var(--sd-opacity-90),transparent)}}:host([variant=primary]) .background:focus-within{background-color:rgba(var(--sd-color-background-primary))}@supports (color:color-mix(in lab,red,red)){:host([variant=primary]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-primary)) var(--sd-opacity-90),transparent)}}:host([variant=primary-100]) .background:focus-within{background-color:rgba(var(--sd-color-background-primary-100))}@supports (color:color-mix(in lab,red,red)){:host([variant=primary-100]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-primary-100)) var(--sd-opacity-90),transparent)}}:host([variant=gradient-light]) .bg-gradient-to-t{--sd-color-background-white:var(--sd-informational-gradient--white-color-background, var(--sd-color-white))}:host([variant=gradient-dark]) .bg-gradient-to-t{--sd-color-background-primary-800:var(
           --sd-informational-gradient--primary-800-color-background,
           var(--sd-color-primary-800)
         )}[part=toggle]{width:-moz-fit-content;width:fit-content;outline-color:transparent}:host([variant=gradient-dark]) [part=toggle]:focus-visible,:host([variant=primary]) [part=toggle]:focus-visible{outline-color:rgba(var(--sd-color-text-white))}`

package/dist/chunks/{chunk.SRSERHD5.js → chunk.P5V6KORX.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.UIQBHPD3.js";
 import {
   scrollIntoView
-} from "./chunk.WDWV53JP.js";
+} from "./chunk.LTZVVIB2.js";
 import {
   FormControlController
 } from "./chunk.C3WIBDGG.js";
@@ -35,7 +35,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   animateTo,
   stopAnimations
@@ -880,7 +880,7 @@ var SdCombobox = class extends SolidElement {
 };
 SdCombobox.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
 :host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([visually-disabled]) input{caret-color:transparent}:host([size=sm]) .combobox-button{right:var(--sd-spacing-4);height:var(--sd-spacing-4);width:var(--sd-spacing-4)}:host([size=md]) .combobox-button{right:.85rem;height:var(--sd-spacing-6);width:var(--sd-spacing-6)}:host([size=lg]) .combobox-button{right:var(--sd-spacing-3);height:var(--sd-spacing-8);width:var(--sd-spacing-8)}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-tag::part(base){border-radius:var(--sd-radius);border-width:var(--sd-combobox__tag-border-width,var(--sd-spacing-0\\.25));padding-inline:var(--sd-spacing-1)}sd-tag::part(content){display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:var(--tag-max-width,15ch)}sd-tag[size=lg]::part(base){padding-inline:var(--sd-spacing-2)}sd-tag[disabled=false]::part(base):hover{background-color:rgba(var(--sd-color-background-primary-100))}[part=filtered-listbox] sd-optgroup:first-of-type{--display-divider:none}mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold);color:inherit}:host([type=search]) sd-icon[name=magnifying-glass],[part=chevron]{color:rgba(var(--sd-form-control-color-icon-fill))}:host([disabled])::part(chevron),:host([type=search][disabled]) sd-icon[name=magnifying-glass],:host([type=search][visually-disabled]) sd-icon[name=magnifying-glass],:host([visually-disabled])::part(chevron){color:rgba(var(--sd-color-icon-fill-neutral-500,--sd-color-neutral-500))}@property --tw-font-weight{syntax:"*";inherits:false}`
 ];
 __decorateClass([

package/dist/chunks/{chunk.YFTT3BJS.js → chunk.PCB2BA7U.js}

@@ -1,10 +1,6 @@
-import {
-  getDeepActiveElement,
-  getTabbableBoundary
-} from "./chunk.UMIKFOMI.js";
 import {
   scrollIntoView
-} from "./chunk.WDWV53JP.js";
+} from "./chunk.LTZVVIB2.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -21,7 +17,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   animateTo,
   stopAnimations
@@ -51,6 +47,67 @@ function deepClosestElement(element, selector) {
   return null;
 }
 
+// src/internal/deep-active-element.ts
+function getDeepActiveElement(element = document.activeElement) {
+  if (element == null ? void 0 : element.shadowRoot) {
+    const shadowActiveElement = element.shadowRoot.activeElement;
+    if (shadowActiveElement) {
+      return getDeepActiveElement(shadowActiveElement);
+    }
+  }
+  return element;
+}
+
+// src/internal/tabbable.ts
+function isTabbable(el) {
+  const tag = el.tagName.toLowerCase();
+  if (el.getAttribute("tabindex") === "-1") {
+    return false;
+  }
+  if (el.hasAttribute("disabled")) {
+    return false;
+  }
+  if (el.hasAttribute("aria-disabled") && el.getAttribute("aria-disabled") !== "false") {
+    return false;
+  }
+  if (tag === "input" && el.getAttribute("type") === "radio" && !el.hasAttribute("checked")) {
+    return false;
+  }
+  if (el.offsetParent === null && !(el.getRootNode() instanceof ShadowRoot)) {
+    return false;
+  }
+  if (window.getComputedStyle(el).visibility === "hidden") {
+    return false;
+  }
+  if ((tag === "audio" || tag === "video") && el.hasAttribute("controls")) {
+    return true;
+  }
+  if (el.hasAttribute("tabindex")) {
+    return true;
+  }
+  if (el.hasAttribute("contenteditable") && el.getAttribute("contenteditable") !== "false") {
+    return true;
+  }
+  return ["button", "input", "select", "textarea", "a", "audio", "video", "summary"].includes(tag);
+}
+function getTabbableBoundary(root) {
+  var _a, _b;
+  const allElements = [];
+  function walk(el) {
+    if (el instanceof HTMLElement) {
+      allElements.push(el);
+      if (el.shadowRoot !== null && el.shadowRoot.mode === "open") {
+        walk(el.shadowRoot);
+      }
+    }
+    [...el.children].forEach((e) => walk(e));
+  }
+  walk(root);
+  const start = (_a = allElements.find((el) => isTabbable(el))) != null ? _a : null;
+  const end = (_b = allElements.reverse().find((el) => isTabbable(el))) != null ? _b : null;
+  return { start, end };
+}
+
 // src/components/dropdown/dropdown.ts
 import { property, query } from "lit/decorators.js";
 import cx from "classix";
@@ -315,7 +372,7 @@ var SdDropdown = class extends SolidElement {
 };
 SdDropdown.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
 :host{display:inline-block}#dropdown::part(popup){z-index:var(--sd-z-index-dropdown,900)}#dropdown[data-current-placement^=top]::part(popup){transform-origin:bottom}#dropdown[data-current-placement^=bottom]::part(popup){transform-origin:top}#dropdown[data-current-placement^=left]::part(popup){transform-origin:100%}#dropdown[data-current-placement^=right]::part(popup){transform-origin:0}:host(:not([no-auto-size])) ::slotted(:not([slot=trigger])){overflow:auto;max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}`
 ];
 __decorateClass([

package/dist/chunks/{chunk.AVB7EUPN.js → chunk.PMM3MDLE.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -147,7 +147,7 @@ var SdMenu = class extends SolidElement {
 };
 SdMenu.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
 :host{position:relative;display:block;overflow:auto;overscroll-behavior:auto;border-radius:var(--sd-radius-md);padding-inline:var(--sd-spacing-2);padding-block:var(--sd-spacing-3);--tw-shadow:var(--sd-shadow)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}::slotted(sd-divider){padding-block:var(--sd-spacing-3)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`
 ];
 __decorateClass([

package/dist/chunks/{chunk.MKQMOE4O.js → chunk.QD2ZQPDB.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -83,7 +83,7 @@ var SdLink = class extends SolidElement {
 };
 SdLink.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
 ::slotted(sd-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-icon){font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}:host([size=lg][standalone]) ::slotted(sd-icon){font-size:var(--sd-text-xl);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}`
 ];
 __decorateClass([

package/dist/chunks/{chunk.EAJ3CM6N.js → chunk.QGERTGJH.js}

@@ -22,7 +22,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
       popup.anchor = sdInput;
       popup.sync = "width";
     }
-    const styles = css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+    const styles = css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
 sd-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:scroll;border-bottom-right-radius:var(--sd-radius);border-bottom-left-radius:var(--sd-radius);border-style:var(--tw-border-style);border-width:var(--sd-border-width-2);border-top-style:var(--tw-border-style);border-top-width:0;border-color:rgba(var(--sd-color-border-primary));background-color:rgba(var(--sd-color-background-white));padding-inline:var(--sd-spacing-2);padding-block:var(--sd-spacing-3);--tw-shadow:var(--sd-shadow);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}sd-popup li{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms))}sd-popup li:hover:not([disabled]){background-color:rgba(var(--sd-color-background-neutral-100))}sd-popup li{list-style-type:''}sd-popup li mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold)}sd-popup li:not(:has(sd-option)){cursor:pointer;padding-inline:var(--sd-spacing-4);padding-block:var(--sd-spacing-3);font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));color:rgba(var(--sd-color-text-black))}sd-popup li:not(:has(sd-option)):hover{background-color:rgba(var(--sd-color-background-neutral-200))}sd-popup li[aria-selected=true]{background-color:rgba(var(--sd-color-background-neutral-200))}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}`;
     const styleSheet = new CSSStyleSheet();
     styleSheet.replaceSync(styles);

package/dist/chunks/{chunk.UAYS6YUK.js → chunk.QOIO3YAP.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -171,7 +171,7 @@ var SdCheckbox = class extends SolidElement {
  */
 SdCheckbox.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
 :host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){outline-style:var(--tw-outline-style);outline-width:0}:host([required]) #label::after{content:' *'}[part=invalid-icon]{color:rgb(var(--sd-color-icon-fill-error))}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
 ];
 __decorateClass([

package/dist/chunks/{chunk.NVTCRCR2.js → chunk.RGVIOXPM.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.LB37DTSJ.js";
+} from "./chunk.DJJN4MJ4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -32,8 +32,8 @@ var SdDivider = class extends SolidElement {
  */
 SdDivider.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{margin:calc(var(--sd-spacing-1) * 0)}:host(sd-divider[orientation=horizontal]){display:block}:host(sd-divider[orientation=vertical]){display:inline-block}`
+  css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{margin:0}:host(sd-divider[orientation=horizontal]){display:block}:host(sd-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })