@m3e/web 2.5.13 → 2.5.15

package/dist/core.js

@@ -837,7 +837,9 @@ class FocusController extends MonitorControllerBase {
     target.addEventListener("keydown", __classPrivateFieldGet(this, _FocusController_keyDownHandler, "f"));
     target.addEventListener("focusin", __classPrivateFieldGet(this, _FocusController_focusInHandler, "f"));
     target.addEventListener("focusout", __classPrivateFieldGet(this, _FocusController_focusOutHandler, "f"));
-    target.addEventListener("touchstart", __classPrivateFieldGet(this, _FocusController_touchStartHandler, "f"));
+    target.addEventListener("touchstart", __classPrivateFieldGet(this, _FocusController_touchStartHandler, "f"), {
+      passive: true
+    });
     target.addEventListener("touchend", __classPrivateFieldGet(this, _FocusController_touchEndHandler, "f"));
     target.addEventListener("touchcancel", __classPrivateFieldGet(this, _FocusController_touchEndHandler, "f"));
   }
@@ -1818,6 +1820,8 @@ function hasCustomState(element, state) {
  * @param {string} state The custom state to add.
  */
 function addCustomState(element, state) {
+  // Avoid style recalculation when element already has state.
+  if (hasCustomState(element, state)) return;
   // Since flushing custom state doesn't flush in Safari (affecting all iOS browsers),
   // a copy of custom state is retained locally so components can correctly read after write.
   if (_customState in element) {
@@ -3950,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) {
@@ -3962,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");
@@ -3973,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"));
@@ -3996,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"));
@@ -4027,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. */
@@ -4054,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
@@ -4375,7 +4414,7 @@ _M3eFocusRingElement_handleFocusChange = function _M3eFocusRingElement_handleFoc
   }
 };
 /** The styles of the element. */
-M3eFocusRingElement.styles = css`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; outline: none; } .outline { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; z-index: 1; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; visibility: ${FocusRingToken.visibility}; } .outline.visible { outline-style: solid; } :host(:not([inward])) .outline { outline-offset: ${FocusRingToken.outwardOffset}; } :host([inward]) .outline { outline-offset: calc(${FocusRingToken.inwardOffset} - ${FocusRingToken.thickness}); } :host(:not([inward])) .outline.visible { animation: grow-shrink ${FocusRingToken.duration}; } :host([inward]) .outline.visible { animation: shrink-grow ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @keyframes shrink-grow { 50% { outline-offset: calc( ${FocusRingToken.inwardOffset} - calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}) ); outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (prefers-reduced-motion) { :host(:not([inward])) .outline.visible, :host([inward]) .outline.visible { animation: none; } } @media (forced-colors: active) { .outline { outline-color: Highlight; } }`;
+M3eFocusRingElement.styles = css`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; outline: none; } .outline { contain: layout style; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; z-index: 1; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; visibility: ${FocusRingToken.visibility}; } .outline.visible { outline-style: solid; } :host(:not([inward])) .outline { outline-offset: ${FocusRingToken.outwardOffset}; } :host([inward]) .outline { outline-offset: calc(${FocusRingToken.inwardOffset} - ${FocusRingToken.thickness}); } :host(:not([inward])) .outline.visible { animation: grow-shrink ${FocusRingToken.duration}; } :host([inward]) .outline.visible { animation: shrink-grow ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @keyframes shrink-grow { 50% { outline-offset: calc( ${FocusRingToken.inwardOffset} - calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}) ); outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (prefers-reduced-motion) { :host(:not([inward])) .outline.visible, :host([inward]) .outline.visible { animation: none; } } @media (forced-colors: active) { .outline { outline-color: Highlight; } }`;
 __decorate([query(".outline")], M3eFocusRingElement.prototype, "_outline", void 0);
 __decorate([property({
   type: Boolean,
@@ -4437,7 +4476,7 @@ let M3ePseudoCheckboxElement = class M3ePseudoCheckboxElement extends CheckedInd
   }
 };
 /** The styles of the element. */
-M3ePseudoCheckboxElement.styles = css`:host { display: inline-block; vertical-align: middle; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 2px); box-sizing: border-box; flex: none; } :host(:not([checked]):not([indeterminate])) { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([disabled]:not([checked]):not([indeterminate])) { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } svg { pointer-events: none; } @media (forced-colors: active) { :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { border-color: Highlight; background-color: Highlight; color: HighlightText; } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: CanvasText; background: Canvas; } :host([disabled]:not([checked]):not([indeterminate])) { border-color: GrayText; background-color: Canvas; } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: GrayText; color: Canvas; } }`;
+M3ePseudoCheckboxElement.styles = css`:host { display: inline-block; vertical-align: middle; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 2px); box-sizing: border-box; flex: none; contain: layout style paint; } :host(:not([checked]):not([indeterminate])) { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([disabled]:not([checked]):not([indeterminate])) { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } svg { pointer-events: none; } @media (forced-colors: active) { :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { border-color: Highlight; background-color: Highlight; color: HighlightText; } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: CanvasText; background: Canvas; } :host([disabled]:not([checked]):not([indeterminate])) { border-color: GrayText; background-color: Canvas; } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: GrayText; color: Canvas; } }`;
 M3ePseudoCheckboxElement = __decorate([customElement("m3e-pseudo-checkbox")], M3ePseudoCheckboxElement);
 
 /**
@@ -4475,7 +4514,7 @@ let M3ePseudoRadioElement = class M3ePseudoRadioElement extends Checked(Disabled
   }
 };
 /** The styles of the element. */
-M3ePseudoRadioElement.styles = css`:host { display: inline-block; vertical-align: middle; box-sizing: border-box; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); flex: none; } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) { color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) { color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([disabled]) { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } @media (forced-colors: active) { :host { border-radius: 50%; } :host(:not([checked])) { color: CanvasText; background-color: Canvas; } :host([checked]) { color: HighlightText; background-color: Highlight; } :host([disabled]) { color: GrayText; background-color: Canvas; } }`;
+M3ePseudoRadioElement.styles = css`:host { display: inline-block; vertical-align: middle; box-sizing: border-box; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); flex: none; contain: layout style paint; } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) { color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) { color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([disabled]) { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } @media (forced-colors: active) { :host { border-radius: 50%; } :host(:not([checked])) { color: CanvasText; background-color: Canvas; } :host([checked]) { color: HighlightText; background-color: Highlight; } :host([disabled]) { color: GrayText; background-color: Canvas; } }`;
 M3ePseudoRadioElement = __decorate([customElement("m3e-pseudo-radio")], M3ePseudoRadioElement);
 
 /**
@@ -4670,7 +4709,7 @@ _M3eRippleElement_handlePressedChange = function _M3eRippleElement_handlePressed
   }
 };
 /** The styles of the element. */
-M3eRippleElement.styles = css`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } :host(:not([unbounded])) { overflow: hidden; } .ripple { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; transform: scale(0); border-radius: ${DesignToken.shape.corner.full}; background-color: color-mix(in srgb, ${RippleToken.color} ${RippleToken.opacity}, transparent); will-change: background-color, opacity; animation: ripple ${RippleToken.enterDuration} linear; } .ripple.persistent.pressed { transform: scale(${RippleToken.scaleFactor}); } .ripple.exit { transition: opacity ${RippleToken.exitDuration} cubic-bezier(0, 0, 0.2, 0.1); opacity: 0; } @keyframes ripple { to { transform: scale(${RippleToken.scaleFactor}); } } @media (prefers-reduced-motion) { .ripple { transform: scale(${RippleToken.scaleFactor}); animation-duration: 90ms; } .ripple.exit { transition-duration: 10ms; } } @media (forced-colors: active) { .ripple { display: none; } }`;
+M3eRippleElement.styles = css`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } :host(:not([unbounded])) { overflow: hidden; } :host(:not([unbounded])) .ripple { contain: layout style paint; } :host([unbounded]) .ripple { contain: layout style; } .ripple { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; transform: scale(0); border-radius: ${DesignToken.shape.corner.full}; background-color: color-mix(in srgb, ${RippleToken.color} ${RippleToken.opacity}, transparent); will-change: background-color, opacity; animation: ripple ${RippleToken.enterDuration} linear; } .ripple.persistent.pressed { transform: scale(${RippleToken.scaleFactor}); } .ripple.exit { transition: opacity ${RippleToken.exitDuration} cubic-bezier(0, 0, 0.2, 0.1); opacity: 0; } @keyframes ripple { to { transform: scale(${RippleToken.scaleFactor}); } } @media (prefers-reduced-motion) { .ripple { transform: scale(${RippleToken.scaleFactor}); animation-duration: 90ms; } .ripple.exit { transition-duration: 10ms; } } @media (forced-colors: active) { .ripple { display: none; } }`;
 __decorate([property({
   type: Boolean,
   reflect: true
@@ -5024,7 +5063,7 @@ _M3eStateLayerElement_handleFocusChange = function _M3eStateLayerElement_handleF
   }
 };
 /** The styles of the element. */
-M3eStateLayerElement.styles = css`:host { display: block; } :host, .layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } .layer { will-change: background-color; transition: ${unsafeCSS(`background-color ${StateLayerToken.duration} ${StateLayerToken.easing}`)}; } .layer.focused { background-color: color-mix(in srgb, ${StateLayerToken.focusColor} ${StateLayerToken.focusOpacity}, transparent); } .layer.hover { background-color: color-mix(in srgb, ${StateLayerToken.hoverColor} ${StateLayerToken.hoverOpacity}, transparent); } @media (prefers-reduced-motion) { .layer { transition: none; } } @media (forced-colors: active) { .layer { display: none; } }`;
+M3eStateLayerElement.styles = css`:host { display: block; } :host, .layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } .layer { contain: layout style paint; will-change: background-color; transition: ${unsafeCSS(`background-color ${StateLayerToken.duration} ${StateLayerToken.easing}`)}; } .layer.focused { background-color: color-mix(in srgb, ${StateLayerToken.focusColor} ${StateLayerToken.focusOpacity}, transparent); } .layer.hover { background-color: color-mix(in srgb, ${StateLayerToken.hoverColor} ${StateLayerToken.hoverOpacity}, transparent); } @media (prefers-reduced-motion) { .layer { transition: none; } } @media (forced-colors: active) { .layer { display: none; } }`;
 __decorate([query(".layer")], M3eStateLayerElement.prototype, "_layer", void 0);
 __decorate([property({
   type: Boolean,