@m3e/web 2.5.14 → 2.5.16

package/dist/core.js

@@ -3954,6 +3954,7 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends AttachInternals(
   /** @inheritdoc */
   update(changedProperties) {
     super.update(changedProperties);
+    const noAnimate = this.noAnimate || changedProperties.has("orientation") && !changedProperties.has("open");
     addCustomState(this, "--no-animate");
     if (!__classPrivateFieldGet(this, _M3eCollapsibleElement_slotChanged, "f")) {
       if (this.open) {
@@ -3966,9 +3967,9 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends AttachInternals(
     this.toggleAttribute("inert", !this.open);
     if (this.open) {
       __classPrivateFieldSet(this, _M3eCollapsibleElement_hasOpened, true, "f");
-      if (!(prefersReducedMotion() || this.noAnimate)) {
+      if (!(noAnimate || prefersReducedMotion())) {
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
-        setCustomState(this, "--overflows", this.orientation === "vertical" ? this.clientHeight < this.scrollHeight : this.clientWidth < this.scrollWidth);
+        setCustomState(this, "--overflows", this.orientation === "vertical" ? this.clientHeight < this.scrollHeight : this.orientation === "horizontal" ? this.clientWidth < this.scrollWidth : this.clientHeight < this.scrollHeight || this.clientWidth < this.scrollWidth);
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
       }
       deleteCustomState(this, "--closing");
@@ -3977,7 +3978,7 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends AttachInternals(
       __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
       deleteCustomState(this, "--no-animate");
       __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_actualSize).call(this);
-      if (prefersReducedMotion() || this.noAnimate) {
+      if (noAnimate || prefersReducedMotion()) {
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
         deleteCustomState(this, "--opening");
         this.dispatchEvent(new Event("opened"));
@@ -4000,7 +4001,7 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends AttachInternals(
       if (__classPrivateFieldGet(this, _M3eCollapsibleElement_hasOpened, "f")) {
         deleteCustomState(this, "--no-animate");
       }
-      if (prefersReducedMotion() || this.noAnimate) {
+      if (noAnimate || prefersReducedMotion()) {
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
         deleteCustomState(this, "--closing");
         this.dispatchEvent(new Event("closed"));
@@ -4031,16 +4032,43 @@ _M3eCollapsibleElement_handleSlotChange = function _M3eCollapsibleElement_handle
   __classPrivateFieldSet(this, _M3eCollapsibleElement_slotChanged, true, "f");
 };
 _M3eCollapsibleElement_autoSize = function _M3eCollapsibleElement_autoSize() {
-  this.style[this.orientation === "vertical" ? "height" : "width"] = "auto";
+  switch (this.orientation) {
+    case "vertical":
+      this.style.height = "auto";
+      break;
+    case "horizontal":
+      this.style.width = "auto";
+      break;
+    case "both":
+      this.style.height = this.style.width = "auto";
+      break;
+  }
 };
 _M3eCollapsibleElement_clearSize = function _M3eCollapsibleElement_clearSize() {
-  this.style[this.orientation === "vertical" ? "height" : "width"] = "";
+  switch (this.orientation) {
+    case "vertical":
+      this.style.height = "";
+      break;
+    case "horizontal":
+      this.style.width = "";
+      break;
+    case "both":
+      this.style.height = this.style.width = "";
+      break;
+  }
 };
 _M3eCollapsibleElement_actualSize = function _M3eCollapsibleElement_actualSize() {
-  if (this.orientation === "vertical") {
-    this.style.height = `${this.scrollHeight}px`;
-  } else {
-    this.style.width = `${this.scrollWidth}px`;
+  switch (this.orientation) {
+    case "vertical":
+      this.style.height = `${this.scrollHeight}px`;
+      break;
+    case "horizontal":
+      this.style.width = `${this.scrollWidth}px`;
+      break;
+    case "both":
+      this.style.height = `${this.scrollHeight}px`;
+      this.style.width = `${this.scrollWidth}px`;
+      break;
   }
 };
 /** The styles of the element. */
@@ -4058,7 +4086,14 @@ M3eCollapsibleElement.styles = css`:host { display: block; overflow: hidden; } :
         padding-left var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
           ${DesignToken.motion.easing.standard},
         padding-right var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-          ${DesignToken.motion.easing.standard}`)}; } :host(:not(:is(:state(--closing), :--closing)):not([open])) { visibility: hidden; } :host([orientation="vertical"]:not([open])) { min-height: unset !important; padding-top: 0px !important; padding-bottom: 0px !important; } :host([orientation="horizontal"]:not([open])) { min-width: unset !important; padding-left: 0px !important; padding-right: 0px !important; } :host([no-animate]), :host(:is(:state(--no-animate), :--no-animate)) { transition-duration: 0ms; } :host([orientation="vertical"]:is(:state(--opening), :--opening)), :host([orientation="vertical"]:is(:state(--closing), :--closing)) { overflow-y: hidden !important; } :host([orientation="horizontal"]:is(:state(--opening), :--opening)), :host([orientation="horizontal"]:is(:state(--closing), :--closing)) { overflow-x: hidden !important; } :host(:is(:state(--overflows), :--overflows)) { scrollbar-gutter: stable; } ::slotted(*) { --m3e-collapsible-animation-duration: initial; } @media (prefers-reduced-motion) { :host { transition: none; } }`;
+          ${DesignToken.motion.easing.standard}`)}; } :host([orientation="both"]) { height: 0px; width: 0px; transition: ${unsafeCSS(`visibility var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
+          ${DesignToken.motion.easing.standard},
+        width var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
+          ${DesignToken.motion.easing.standard},
+        height var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
+          ${DesignToken.motion.easing.standard},
+        padding var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
+          ${DesignToken.motion.easing.standard}`)}; } :host(:not(:is(:state(--closing), :--closing)):not([open])) { visibility: hidden; } :host([orientation="vertical"]:not([open])) { min-height: unset !important; padding-top: 0px !important; padding-bottom: 0px !important; } :host([orientation="horizontal"]:not([open])) { min-width: unset !important; padding-left: 0px !important; padding-right: 0px !important; } :host([orientation="both"]:not([open])) { min-height: unset !important; min-width: unset !important; padding: 0px !important; } :host([no-animate]), :host(:is(:state(--no-animate), :--no-animate)) { transition-duration: 0ms; } :host([orientation="vertical"]:is(:state(--opening), :--opening)), :host([orientation="vertical"]:is(:state(--closing), :--closing)) { overflow-y: hidden !important; } :host([orientation="horizontal"]:is(:state(--opening), :--opening)), :host([orientation="horizontal"]:is(:state(--closing), :--closing)) { overflow-x: hidden !important; } :host([orientation="both"]:is(:state(--opening), :--opening)), :host([orientation="both"]:is(:state(--closing), :--closing)) { overflow-y: hidden !important; overflow-x: hidden !important; } :host(:is(:state(--overflows), :--overflows)) { scrollbar-gutter: stable; } ::slotted(*) { --m3e-collapsible-animation-duration: initial; } @media (prefers-reduced-motion) { :host { transition: none; } }`;
 __decorate([property({
   type: Boolean,
   reflect: true