@m3e/web 2.5.14 → 2.5.15

package/dist/all.js

@@ -4792,6 +4792,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) {
@@ -4804,9 +4805,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");
@@ -4815,7 +4816,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"));
@@ -4838,7 +4839,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"));
@@ -4869,16 +4870,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. */
@@ -4896,7 +4924,14 @@ M3eCollapsibleElement.styles = i$4`: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: ${r$4(`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([n({
   type: Boolean,
   reflect: true
@@ -18849,8 +18884,6 @@ let M3eDatepickerElement = class M3eDatepickerElement extends SuppressInitialAni
     calendar.rangeEnd = this.rangeEnd;
     calendar.specialDates = this.specialDates;
     calendar.blackoutDates = this.blackoutDates;
-    // Ensure the active view is reset
-    calendar.resetActiveView();
     if (calendar.isUpdatePending) {
       await calendar.updateComplete;
     }
@@ -22377,7 +22410,7 @@ _M3eFormFieldElement_handleErrorChange = function _M3eFormFieldElement_handleErr
   }
 };
 (() => {
-  registerStyleSheet(i$4`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) input::placeholder, m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-3)}) / 4); } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`);
+  registerStyleSheet(i$4`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) input::placeholder, m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-3)}) / 4); } m3e-form-field[variant="outlined"] textarea { margin-block: calc( var(--m3e-form-field-label-line-height, var(--md-sys-typescale-body-small-line-height, 1rem)) / 2 ); } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`);
 })();
 /** The styles of the element. */
 M3eFormFieldElement.styles = i$4`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(:is(:state(--disabled), :--disabled))) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${DesignToken.density.calc(-3)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); --_form-field-label-line-height: var( --m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight} ); } .content { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--m3e-form-field-icon-size, 1.5rem); } .prefix, .suffix { display: flex; align-items: center; position: relative; user-select: none; flex: none; font-size: var(--m3e-form-field-icon-size, 1.5rem); } .prefix-text, .suffix-text { opacity: 1; transition: opacity ${DesignToken.motion.duration.extraLong1}; user-select: none; flex: none; } .input { display: inline-flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .label { display: flex; position: absolute; pointer-events: none; user-select: none; top: 0; left: 0; right: 0; font-size: var(--m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken.typescale.standard.body.small.tracking}); color: var(--_form-field-label-color, inherit); transition: ${r$4(`top ${DesignToken.motion.duration.short4}, 
@@ -25188,6 +25221,8 @@ var _M3eNavBarElement_instances, _M3eNavBarElement_breakpointUnobserve, _M3eNavB
  * @cssprop --m3e-nav-bar-height - Height of the navigation bar.
  * @cssprop --m3e-nav-bar-container-color - Background color of the navigation bar container.
  * @cssprop --m3e-nav-bar-vertical-item-width - Minimum width of vertical nav items.
+ * @cssprop --m3e-nav-bar-horizontal-nav-item-leading-space - Leading space for horizontal nav items.
+ * @cssprop --m3e-nav-bar-horizontal-nav-item-trailing-space - Trailing space for horizontal nav items.
  */
 let M3eNavBarElement = class M3eNavBarElement extends ReconnectedCallback(AttachInternals(Role(i$1, "navigation"))) {
   constructor() {
@@ -25282,7 +25317,7 @@ _M3eNavBarElement_handleChange = function _M3eNavBarElement_handleChange(e) {
   }));
 };
 /** The styles of the element. */
-M3eNavBarElement.styles = i$4`:host { display: block; overflow-x: auto; overflow-y: hidden; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; min-height: var(--m3e-nav-bar-height, 4rem); } .base { contain: layout style; display: flex; align-items: stretch; justify-content: center; box-sizing: border-box; min-height: inherit; height: inherit; width: 100%; background-color: var(--m3e-nav-bar-container-color, ${DesignToken.color.surfaceContainer}); --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem); }`;
+M3eNavBarElement.styles = i$4`:host { display: block; overflow-x: auto; overflow-y: hidden; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; min-height: var(--m3e-nav-bar-height, 4rem); } .base { contain: layout style; display: flex; align-items: stretch; justify-content: center; box-sizing: border-box; min-height: inherit; height: inherit; width: 100%; background-color: var(--m3e-nav-bar-container-color, ${DesignToken.color.surfaceContainer}); --_vertical-nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem); --_horizontal-nav-item-leading-space: var(--m3e-nav-bar-horizontal-nav-item-leading-space, 1rem); --_horizontal-nav-item-trailing-space: var(--m3e-nav-bar-horizontal-nav-item-trailing-space, 1rem); }`;
 __decorate([r()], M3eNavBarElement.prototype, "_mode", void 0);
 __decorate([n({
   reflect: true
@@ -25470,7 +25505,7 @@ _M3eNavItemElement_initResizeObserver = function _M3eNavItemElement_initResizeOb
   }
 };
 /** The styles of the element. */
-M3eNavItemElement.styles = i$4`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { contain: layout style; justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } :host(:not(:is(:state(--no-animate), :--no-animate))) .base { transition: ${r$4(`margin-top ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`)}; } .icon { position: absolute; } .label { vertical-align: middle; } :host([orientation="horizontal"]) .label { white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not(:is(:state(--no-animate), :--no-animate))) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple { transition: ${r$4(`height ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`)}; } :host(:not([selected])) slot[name="selected-icon"], :host(:not(:is(:state(--with-selected-icon), :--with-selected-icon))) slot[name="selected-icon"], :host([selected]:is(:state(--with-selected-icon), :--with-selected-icon)) slot[name="icon"] { display: none; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive]):not([orientation="horizontal"])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])[orientation="horizontal"]) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizongal"]) .base { margin-top: 0; } :host([orientation="vertical"]) .base { margin-top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); margin-bottom: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .ripple { animation: collapse ${DesignToken.motion.duration.medium1}; } @keyframes collapse { from { width: var(--_expanded-width, var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem)); } to { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .state-layer, :host([orientation="horizontal"]) .ripple, :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); } :host([orientation="horizontal"]) .inner { width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper { animation: ${r$4(`slide-down ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper { animation: ${r$4(`slide-up ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } @keyframes slide-down { from { transform: translateY(-4px); } to { transform: translateY(0); } } @keyframes slide-up { from { transform: translateY(4px); } to { transform: translateY(0); } } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .label { animation: horizontal-fade-in ${DesignToken.motion.duration.medium1}; } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .label { animation: vertical-fade-in ${DesignToken.motion.duration.medium1}; } @keyframes horizontal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vertical-fade-in { from { opacity: 0; } to { opacity: 1; } } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (prefers-reduced-motion) { :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper, :host( :not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"] ) .icon-wrapper, :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .ripple, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .label, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .label { animation: none; } :host(:not(:is(:state(--no-animate), :--no-animate))) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple, :host(:not(:is(:state(--no-animate), :--no-animate))) .base { transition: none; } } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
+M3eNavItemElement.styles = i$4`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken.shape.corner.full}); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="vertical"]) { min-width: var(--_vertical-nav-item-min-width); width: var(--_vertical-nav-item-width); margin-inline: var(--_vertical-nav-item-margin-inline); } :host([orientation="horizontal"]) { max-width: fit-content; } :host([orientation="horizontal"]) .outer { margin-inline-start: var(--_horizontal-nav-item-leading-space); margin-inline-end: var(--_horizontal-nav-item-trailing-space); } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { contain: layout style; justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } :host(:not(:is(:state(--no-animate), :--no-animate))) .base { transition: ${r$4(`margin-top ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`)}; } .icon { position: absolute; } .label { vertical-align: middle; } :host([orientation="horizontal"]) .label { white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not(:is(:state(--no-animate), :--no-animate))) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple { transition: ${r$4(`height ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`)}; } :host(:not([selected])) slot[name="selected-icon"], :host(:not(:is(:state(--with-selected-icon), :--with-selected-icon))) slot[name="selected-icon"], :host([selected]:is(:state(--with-selected-icon), :--with-selected-icon)) slot[name="icon"] { display: none; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive]):not([orientation="horizontal"])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])[orientation="horizontal"]) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizongal"]) .base { margin-top: 0; } :host([orientation="vertical"]) .base { margin-top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); margin-bottom: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); inset-inline-start: var(--_vertical-nav-item-inset-start); right: unset; bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { min-width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .ripple { animation: collapse ${DesignToken.motion.duration.medium1}; } @keyframes collapse { from { width: var(--_expanded-width, var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem)); } to { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .state-layer, :host([orientation="horizontal"]) .ripple, :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); } :host([orientation="horizontal"]) .inner { width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper { animation: ${r$4(`slide-down ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper { animation: ${r$4(`slide-up ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } @keyframes slide-down { from { transform: translateY(-4px); } to { transform: translateY(0); } } @keyframes slide-up { from { transform: translateY(4px); } to { transform: translateY(0); } } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .label { animation: horizontal-fade-in ${DesignToken.motion.duration.medium1}; } :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .label { animation: vertical-fade-in ${DesignToken.motion.duration.medium1}; } @keyframes horizontal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vertical-fade-in { from { opacity: 0; } to { opacity: 1; } } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (prefers-reduced-motion) { :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .icon-wrapper, :host(:not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper, :host( :not(:is(:state(--first), :--first)):not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"] ) .icon-wrapper, :host(:is(:state(--first), :--first):not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .icon-wrapper, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .ripple, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="horizontal"]) .label, :host(:not(:is(:state(--no-animate), :--no-animate))[orientation="vertical"]) .label { animation: none; } :host(:not(:is(:state(--no-animate), :--no-animate))) .state-layer, :host(:not(:is(:state(--no-animate), :--no-animate))) .ripple, :host(:not(:is(:state(--no-animate), :--no-animate))) .base { transition: none; } } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
 __decorate([e$2(".focus-ring")], M3eNavItemElement.prototype, "_focusRing", void 0);
 __decorate([e$2(".state-layer")], M3eNavItemElement.prototype, "_stateLayer", void 0);
 __decorate([e$2(".ripple")], M3eNavItemElement.prototype, "_ripple", void 0);
@@ -26315,7 +26350,7 @@ _M3eNavRailElement_handleKeyDown = function _M3eNavRailElement_handleKeyDown(e)
   registerStyleSheet(i$4`m3e-nav-rail > m3e-icon-button, m3e-nav-rail > m3e-fab { margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem); } m3e-nav-rail > m3e-icon-button { margin-inline-start: var(--m3e-nav-rail-icon-button-inset, 0.5rem); }`);
 })();
 /** The styles of the element. */
-M3eNavRailElement.styles = i$4`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r$4(`width ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`)}; } .base { contain: layout style; display: flex; width: inherit; flex-direction: column; align-items: flex-start; box-sizing: border-box; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); padding-inline: var(--m3e-nav-rail-inline-padding, 1.25rem); } :host(:is(:state(--compact), :--compact)) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(:not(:is(:state(--compact), :--compact))) { width: var(--m3e-nav-rail-expanded-width, 13.75rem); } :host(:not(:is(:state(--compact), :--compact))) { --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } ::slotted(m3e-fab) { --m3e-fab-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-disabled-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-focus-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-pressed-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-hover-container-elevation: ${DesignToken.elevation.level1}; --m3e-fab-lowered-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-disabled-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-focus-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-pressed-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-hover-container-elevation: ${DesignToken.elevation.level1}; } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } }`;
+M3eNavRailElement.styles = i$4`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${r$4(`width ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`)}; } .base { contain: layout style; display: flex; width: inherit; flex-direction: column; align-items: flex-start; box-sizing: border-box; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); padding-inline: var(--m3e-nav-rail-inline-padding, 1.25rem); } :host(:is(:state(--compact), :--compact)) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(:is(:state(--compact), :--compact)) .base { --_vertical-nav-item-width: var(--m3e-nav-rail-compact-width, 6rem); --_vertical-nav-item-margin-inline: calc(0px - var(--m3e-nav-rail-inline-padding, 1.25rem)); --_vertical-nav-item-inset-start: calc( 50% - calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem)) / 2 ); } :host(:not(:is(:state(--compact), :--compact))) { width: var(--m3e-nav-rail-expanded-width, 13.75rem); } :host(:not(:is(:state(--compact), :--compact))) { --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } ::slotted(m3e-fab) { --m3e-fab-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-disabled-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-focus-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-pressed-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-hover-container-elevation: ${DesignToken.elevation.level1}; --m3e-fab-lowered-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-disabled-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-focus-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-pressed-container-elevation: ${DesignToken.elevation.level0}; --m3e-fab-lowered-hover-container-elevation: ${DesignToken.elevation.level1}; } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: none; } }`;
 M3eNavRailElement = __decorate([customElement("m3e-nav-rail")], M3eNavRailElement);
 
 var _M3eNavRailToggleElement_instances, _M3eNavRailToggleElement_mutationController, _M3eNavRailToggleElement_updateToggle;
@@ -29476,7 +29511,7 @@ __decorate([n({
 })], M3eShapeElement.prototype, "name", void 0);
 M3eShapeElement = __decorate([customElement("m3e-shape")], M3eShapeElement);
 
-var _M3eSkeletonElement_instances, _M3eSkeletonElement_anchoringCleanupMap, _M3eSkeletonElement_handleSlotChange, _M3eSkeletonElement_clearShapes, _M3eSkeletonElement_createShapes, _M3eSkeletonElement_createShape, _M3eSkeletonElement_updateLoading, _M3eSkeletonElement_registerLoading, _M3eSkeletonElement_unregisterLoading;
+var _M3eSkeletonElement_instances, _M3eSkeletonElement_anchoringCleanupMap, _M3eSkeletonElement_animation, _M3eSkeletonElement_animationMode, _M3eSkeletonElement_handleSlotChange, _M3eSkeletonElement_clearShapes, _M3eSkeletonElement_createShapes, _M3eSkeletonElement_createShape, _M3eSkeletonElement_updateLoading, _M3eSkeletonElement_startMotion, _M3eSkeletonElement_stopMotion, _M3eSkeletonElement_syncMotionState;
 var M3eSkeletonElement_1;
 /**
  * A visual placeholder that mimics the layout of content while it's still loading.
@@ -29520,6 +29555,10 @@ let M3eSkeletonElement = M3eSkeletonElement_1 = class M3eSkeletonElement extends
     _M3eSkeletonElement_instances.add(this);
     /** @private */
     _M3eSkeletonElement_anchoringCleanupMap.set(this, new Map());
+    /** @private */
+    _M3eSkeletonElement_animation.set(this, null);
+    /** The animation mode `#animation` was created for, so mode changes recreate it. @private */
+    _M3eSkeletonElement_animationMode.set(this, null);
     /**
      * The shape of the skeleton.
      * @default "auto"
@@ -29540,7 +29579,7 @@ let M3eSkeletonElement = M3eSkeletonElement_1 = class M3eSkeletonElement extends
   disconnectedCallback() {
     super.disconnectedCallback();
     __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_clearShapes).call(this);
-    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_unregisterLoading).call(this);
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_stopMotion).call(this);
   }
   /** @inheritdoc */
   reconnectedCallback() {
@@ -29559,22 +29598,24 @@ let M3eSkeletonElement = M3eSkeletonElement_1 = class M3eSkeletonElement extends
   render() {
     return b`<slot ?inert="${!this.loaded}" @slotchange="${__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_handleSlotChange)}"></slot>`;
   }
-  /** @private */
-  static __updateAnimations() {
-    const pause = M3eSkeletonElement_1.__forcedColorsMediaQuery.matches || M3eSkeletonElement_1.__reducedMediaQuery.matches;
-    if (M3eSkeletonElement_1.__pulseLoading.size === 0 || pause) {
-      M3eSkeletonElement_1.__pulseAnimation.pause();
-    } else if (M3eSkeletonElement_1.__pulseLoading.size > 0 && M3eSkeletonElement_1.__pulseAnimation.playState === "paused") {
-      M3eSkeletonElement_1.__pulseAnimation.play();
-    }
-    if (M3eSkeletonElement_1.__waveLoading.size === 0 || pause) {
-      M3eSkeletonElement_1.__waveAnimation.pause();
-    } else if (M3eSkeletonElement_1.__waveLoading.size > 0 && M3eSkeletonElement_1.__waveAnimation.playState === "paused") {
-      M3eSkeletonElement_1.__waveAnimation.play();
+  /** Whether motion is currently suppressed for accessibility or forced-colors reasons. @private */
+  static __motionDisabled() {
+    return M3eSkeletonElement_1.__reducedMediaQuery.matches || M3eSkeletonElement_1.__forcedColorsMediaQuery.matches;
+  }
+  /**
+   * Re-applies the current motion preference to every animating skeleton. Invoked when
+   * the reduced-motion or forced-colors preference changes.
+   * @private
+   */
+  static __updateMotion() {
+    for (const skeleton of M3eSkeletonElement_1.__animating) {
+      __classPrivateFieldGet(skeleton, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_syncMotionState).call(skeleton);
     }
   }
 };
 _M3eSkeletonElement_anchoringCleanupMap = new WeakMap();
+_M3eSkeletonElement_animation = new WeakMap();
+_M3eSkeletonElement_animationMode = new WeakMap();
 _M3eSkeletonElement_instances = new WeakSet();
 _M3eSkeletonElement_handleSlotChange = /** @private */
 async function _M3eSkeletonElement_handleSlotChange() {
@@ -29627,68 +29668,78 @@ async function _M3eSkeletonElement_createShape(element) {
   this.shadowRoot?.appendChild(shape);
 };
 _M3eSkeletonElement_updateLoading = function _M3eSkeletonElement_updateLoading() {
-  if (!this.loaded && this.animation !== "none") {
-    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_registerLoading).call(this);
+  if (this.isConnected && !this.loaded && (this.animation === "wave" || this.animation === "pulse")) {
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_startMotion).call(this);
   } else {
-    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_unregisterLoading).call(this);
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_stopMotion).call(this);
   }
 };
-_M3eSkeletonElement_registerLoading = function _M3eSkeletonElement_registerLoading() {
-  switch (this.animation) {
-    case "pulse":
-      M3eSkeletonElement_1.__waveLoading.delete(this);
-      if (!M3eSkeletonElement_1.__pulseLoading.has(this)) {
-        M3eSkeletonElement_1.__pulseLoading.add(this);
-        M3eSkeletonElement_1.__updateAnimations();
-      }
-      break;
-    case "wave":
-      M3eSkeletonElement_1.__pulseLoading.delete(this);
-      if (!M3eSkeletonElement_1.__waveLoading.has(this)) {
-        M3eSkeletonElement_1.__waveLoading.add(this);
-        M3eSkeletonElement_1.__updateAnimations();
-      }
-      break;
+_M3eSkeletonElement_startMotion = function _M3eSkeletonElement_startMotion() {
+  if (__classPrivateFieldGet(this, _M3eSkeletonElement_animation, "f")) {
+    if (__classPrivateFieldGet(this, _M3eSkeletonElement_animationMode, "f") === this.animation) {
+      // Already running for the current mode; nothing to do but re-sync motion state.
+      __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_syncMotionState).call(this);
+      return;
+    }
+    // Effect mode changed (wave <-> pulse); tear down and recreate below.
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_stopMotion).call(this);
+  }
+  M3eSkeletonElement_1.__motionOrigin ??= document.timeline.currentTime ?? 0;
+  const animation = this.animation === "pulse" ? this.animate([{
+    ["--_m3e-skeleton-pulse-norm"]: 0
+  }, {
+    ["--_m3e-skeleton-pulse-norm"]: 1
+  }, {
+    ["--_m3e-skeleton-pulse-norm"]: 0
+  }], {
+    duration: 1200,
+    iterations: Infinity,
+    easing: "ease-in-out"
+  }) : this.animate([{
+    ["--_m3e-skeleton-wave-pct"]: 0
+  }, {
+    ["--_m3e-skeleton-wave-pct"]: 1
+  }], {
+    duration: 2100,
+    iterations: Infinity,
+    easing: "linear"
+  });
+  animation.startTime = M3eSkeletonElement_1.__motionOrigin;
+  __classPrivateFieldSet(this, _M3eSkeletonElement_animation, animation, "f");
+  __classPrivateFieldSet(this, _M3eSkeletonElement_animationMode, this.animation, "f");
+  M3eSkeletonElement_1.__animating.add(this);
+  __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_syncMotionState).call(this);
+};
+_M3eSkeletonElement_stopMotion = function _M3eSkeletonElement_stopMotion() {
+  if (!__classPrivateFieldGet(this, _M3eSkeletonElement_animation, "f")) {
+    return;
   }
+  __classPrivateFieldGet(this, _M3eSkeletonElement_animation, "f").cancel();
+  __classPrivateFieldSet(this, _M3eSkeletonElement_animation, null, "f");
+  __classPrivateFieldSet(this, _M3eSkeletonElement_animationMode, null, "f");
+  M3eSkeletonElement_1.__animating.delete(this);
 };
-_M3eSkeletonElement_unregisterLoading = function _M3eSkeletonElement_unregisterLoading() {
-  if (M3eSkeletonElement_1.__pulseLoading.delete(this) || M3eSkeletonElement_1.__waveLoading.delete(this)) {
-    M3eSkeletonElement_1.__updateAnimations();
+_M3eSkeletonElement_syncMotionState = function _M3eSkeletonElement_syncMotionState() {
+  if (!__classPrivateFieldGet(this, _M3eSkeletonElement_animation, "f")) {
+    return;
+  }
+  if (M3eSkeletonElement_1.__motionDisabled()) {
+    __classPrivateFieldGet(this, _M3eSkeletonElement_animation, "f").pause();
+  } else {
+    __classPrivateFieldGet(this, _M3eSkeletonElement_animation, "f").play();
   }
 };
-/** @private */
-M3eSkeletonElement.__pulseLoading = new Set();
-/** @private */
-M3eSkeletonElement.__waveLoading = new Set();
+/** Skeletons with a live per-instance animation, so preference changes re-sync them all. @private */
+M3eSkeletonElement.__animating = new Set();
+/** Shared timeline origin so every skeleton's wave/pulse stays in phase. @private */
+M3eSkeletonElement.__motionOrigin = null;
 (() => {
   if (typeof window !== "undefined") {
     registerStyleSheet(i$4`@property --_m3e-skeleton-wave-pct { syntax: "<number>"; inherits: true; initial-value: 0; } @property --_m3e-skeleton-pulse-norm { syntax: "<number>"; inherits: true; initial-value: 0; } :root { --_m3e-skeleton-wave-span: 40vw; --_m3e-skeleton-pulse-min: 0.06; }</number></number>`);
-    M3eSkeletonElement_1.__waveAnimation = document.documentElement.animate([{
-      ["--_m3e-skeleton-wave-pct"]: 0
-    }, {
-      ["--_m3e-skeleton-wave-pct"]: 1
-    }], {
-      duration: 2100,
-      iterations: Infinity,
-      easing: "linear"
-    });
-    M3eSkeletonElement_1.__pulseAnimation = document.documentElement.animate([{
-      ["--_m3e-skeleton-pulse-norm"]: 0
-    }, {
-      ["--_m3e-skeleton-pulse-norm"]: 1
-    }, {
-      ["--_m3e-skeleton-pulse-norm"]: 0
-    }], {
-      duration: 1200,
-      iterations: Infinity,
-      easing: "ease-in-out"
-    });
-    M3eSkeletonElement_1.__waveAnimation.pause();
-    M3eSkeletonElement_1.__pulseAnimation.pause();
     M3eSkeletonElement_1.__reducedMediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     M3eSkeletonElement_1.__forcedColorsMediaQuery = window.matchMedia("(forced-colors: active)");
-    M3eSkeletonElement_1.__reducedMediaQuery.addEventListener("change", () => M3eSkeletonElement_1.__updateAnimations());
-    M3eSkeletonElement_1.__forcedColorsMediaQuery.addEventListener("change", () => M3eSkeletonElement_1.__updateAnimations());
+    M3eSkeletonElement_1.__reducedMediaQuery.addEventListener("change", () => M3eSkeletonElement_1.__updateMotion());
+    M3eSkeletonElement_1.__forcedColorsMediaQuery.addEventListener("change", () => M3eSkeletonElement_1.__updateMotion());
   }
 })();
 /** The styles of the element. */
@@ -30311,6 +30362,7 @@ _M3eSliderElement_updateTicks = function _M3eSliderElement_updateTicks(active) {
   }
 };
 _M3eSliderElement_handlePointerDown = function _M3eSliderElement_handlePointerDown(e) {
+  __classPrivateFieldGet(this, _M3eSliderElement_instances, "m", _M3eSliderElement_updateCachedDimensions).call(this, true);
   if (e.pointerType === "mouse" && e.button > 1) return;
   if (!this.lowerThumb || this.disabled) return;
   if (e.target instanceof HTMLElement) {