@solid-design-system/components 7.0.0-next.2 → 7.0.0-next.4

package/dist/chunks/{chunk.HXXLOMBL.js → chunk.NHGPTJYA.js}

@@ -27,7 +27,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.ZZYKQTZB.js";
 import {
   animateTo,
   stopAnimations
@@ -46,12 +46,14 @@ var SdDialog = class extends SolidElement {
     super(...arguments);
     this.hasSlotController = new HasSlotController(this, "footer");
     this.localize = new LocalizeController(this);
+    this.hasUiMotion = false;
     this.open = false;
     this.headline = "";
     this.noCloseButton = false;
   }
   connectedCallback() {
     super.connectedCallback();
+    this.updateMotionTheme();
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.modal = new Modal(this);
   }
@@ -67,6 +69,13 @@ var SdDialog = class extends SolidElement {
     super.disconnectedCallback();
     unlockBodyScrolling(this);
   }
+  onThemeChange() {
+    this.updateMotionTheme();
+  }
+  updateMotionTheme() {
+    const theme = getComputedStyle(this).getPropertyValue("--sd-theme").trim().replace(/['"]/g, "");
+    this.hasUiMotion = theme === "" || theme === "ui-light" || theme === "ui-dark";
+  }
   get prefersReducedMotion() {
     return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   }
@@ -76,7 +85,9 @@ var SdDialog = class extends SolidElement {
       detail: { source }
     });
     if (sdRequestClose.defaultPrevented) {
-      const animation = getAnimation(this, "dialog.denyClose", { dir: this.localize.dir() });
+      const animation = getAnimation(this, this.hasUiMotion ? "dialog.denyClose" : "dialog.denyCloseSimple", {
+        dir: this.localize.dir()
+      });
       animateTo(this.panel, animation.keyframes, animation.options);
       return;
     }
@@ -120,8 +131,10 @@ var SdDialog = class extends SolidElement {
           autoFocusTarget.setAttribute("autofocus", "");
         }
       });
-      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.showReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, "dialog.show", { dir: this.localize.dir() });
-      const overlayAnimation = getAnimation(this, "dialog.overlay.show", { dir: this.localize.dir() });
+      const showAnimation = this.hasUiMotion ? "dialog.show" : "dialog.showSimple";
+      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.showReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, showAnimation, { dir: this.localize.dir() });
+      const overlayShowAnimation = this.hasUiMotion ? "dialog.overlay.show" : "dialog.overlay.showSimple";
+      const overlayAnimation = getAnimation(this, overlayShowAnimation, { dir: this.localize.dir() });
       await Promise.all([
         animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
         animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
@@ -132,8 +145,10 @@ var SdDialog = class extends SolidElement {
       this.removeOpenListeners();
       this.modal.deactivate();
       await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.hideReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, "dialog.hide", { dir: this.localize.dir() });
-      const overlayAnimation = getAnimation(this, "dialog.overlay.hide", { dir: this.localize.dir() });
+      const hideAnimation = this.hasUiMotion ? "dialog.hide" : "dialog.hideSimple";
+      const panelAnimation = this.prefersReducedMotion ? getAnimation(this, "dialog.hideReducedMotion", { dir: this.localize.dir() }) : getAnimation(this, hideAnimation, { dir: this.localize.dir() });
+      const overlayHideAnimation = this.hasUiMotion ? "dialog.overlay.hide" : "dialog.overlay.hideSimple";
+      const overlayAnimation = getAnimation(this, overlayHideAnimation, { dir: this.localize.dir() });
       await Promise.all([
         animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
           this.overlay.hidden = true;
@@ -177,7 +192,7 @@ var SdDialog = class extends SolidElement {
     return waitForEvent(this, "sd-after-hide");
   }
   render() {
-    return html`<div part="base" class="${cx(
+    return html`<sd-theme-listener></sd-theme-listener><div part="base" class="${cx(
       "flex items-center justify-center fixed inset-0 z-dialog",
       this.hasSlotController.test("footer") && "dialog--has-footer"
     )}"><div part="overlay" class="fixed inset-0 overlay-color-background" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
@@ -226,6 +241,13 @@ setDefaultAnimation("dialog.showReducedMotion", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],
   options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out", reducedMotion: "allow" }
 });
+setDefaultAnimation("dialog.showSimple", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
 setDefaultAnimation("dialog.hide", {
   keyframes: [
     { opacity: 1, transform: "translate(0, 0)" },
@@ -237,18 +259,37 @@ setDefaultAnimation("dialog.hideReducedMotion", {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
   options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out", reducedMotion: "allow" }
 });
+setDefaultAnimation("dialog.hideSimple", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
 setDefaultAnimation("dialog.denyClose", {
   keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
   options: { duration: 250 }
 });
+setDefaultAnimation("dialog.denyCloseSimple", {
+  keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
+  options: { duration: 250 }
+});
 setDefaultAnimation("dialog.overlay.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],
   options: { duration: "var(--sd-duration-medium, 300)", easing: "ease-in-out", reducedMotion: "allow" }
 });
+setDefaultAnimation("dialog.overlay.showSimple", {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: 250, reducedMotion: "allow" }
+});
 setDefaultAnimation("dialog.overlay.hide", {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
   options: { duration: "var(--sd-duration-fast, 150)", easing: "ease-in-out", reducedMotion: "allow" }
 });
+setDefaultAnimation("dialog.overlay.hideSimple", {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: 250, reducedMotion: "allow" }
+});
 
 export {
   SdDialog

package/dist/chunks/{chunk.JO4VO3DE.js → chunk.PHDXES2E.js}

@@ -35,7 +35,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.ZZYKQTZB.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.POPOYCUO.js → chunk.PZYEO6JX.js}

@@ -21,7 +21,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.ZZYKQTZB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ZI4J2JI6.js → chunk.QE5IYB7Q.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.ZZYKQTZB.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,

package/dist/chunks/{chunk.IU2IAYUW.js → chunk.QUBMQHBS.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.ZZYKQTZB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.WD6OT624.js → chunk.R7AKCNLH.js}

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

package/dist/chunks/{chunk.NDQTMQGH.js → chunk.RBFDHNCA.js}

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

package/dist/chunks/{chunk.BGHQYSC6.js → chunk.SYN6Y7B2.js}

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

package/dist/chunks/{chunk.H6K6J6HB.js → chunk.T227KIHC.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.6RE6UZ72.js";
 import {
   SdCarouselItem
-} from "./chunk.YEAB2PEA.js";
+} from "./chunk.FKT27XGY.js";
 import {
   AutoplayController
 } from "./chunk.F4VGSDIW.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.ZZYKQTZB.js";
 import {
   prefersReducedMotion
 } from "./chunk.HQWAKJBV.js";

package/dist/chunks/{chunk.GWLYBCED.js → chunk.TIURA3CR.js}

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

package/dist/chunks/{chunk.CFE22DL2.js → chunk.UQW2D27E.js}

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

package/dist/chunks/{chunk.TACTLKX6.js → chunk.V3OXFXTL.js}

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

package/dist/chunks/{chunk.DJIFAD75.js → chunk.VUBZTPBJ.js}

@@ -21,7 +21,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.ZZYKQTZB.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.4MPXU2RU.js → chunk.VVGDAH3Y.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.ZZYKQTZB.js";
 import {
   __decorateClass,
   __spreadValues
@@ -407,7 +407,9 @@ var SdInput = class extends SolidElement {
       textSize,
       isFloatingLabelActive && "leading-none mt-4"
     )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${// eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasLabel && this.floatingLabel ? html`<label part="form-control-floating-label" class="${cx(
+    ifDefined(this.autocomplete)}" autocorrect="${ifDefined(
+      this.type === "password" ? "off" : this.autocorrect === void 0 ? void 0 : this.autocorrect ? "on" : "off"
+    )}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasLabel && this.floatingLabel ? html`<label part="form-control-floating-label" class="${cx(
       "pointer-events-none absolute",
       hasIconLeft ? floatingLabelHorizontalAlignmentWithIconLeft : "left-4",
       !this.readonly && "transition-all duration-medium ease-out",
@@ -540,7 +542,15 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdInput.prototype, "autocapitalize", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: Boolean,
+    reflect: true,
+    converter: {
+      // Allow "on|off" attribute values but keep the property boolean
+      fromAttribute: (value) => value !== "off",
+      toAttribute: (value) => value ? "on" : "off"
+    }
+  })
 ], SdInput.prototype, "autocorrect", 2);
 __decorateClass([
   property({ reflect: true })

package/dist/chunks/{chunk.4KQSESLL.js → chunk.XLRNOFGT.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.ZZYKQTZB.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,

package/dist/chunks/{chunk.NHPAPNCA.js → chunk.XO2EYEOQ.js}

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

package/dist/chunks/{chunk.ICBYOTXZ.js → chunk.YPXPF4CW.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.ZZYKQTZB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.XZHZDSPQ.js → chunk.Z7YV6XJB.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O6I23JYG.js";
+} from "./chunk.ZZYKQTZB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";