@m3e/web 2.0.3 → 2.0.4

package/dist/core.js

@@ -5,7 +5,7 @@
  */
 import { isServer, nothing, noChange, unsafeCSS, html, css, LitElement } from 'lit';
 import { directive, Directive, PartType } from 'lit/directive.js';
-import { property, customElement, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 /******************************************************************************
@@ -851,6 +851,7 @@ class HoverController extends MonitorControllerBase {
   _observe(target) {
     target.addEventListener("pointerenter", __classPrivateFieldGet(this, _HoverController_pointerInHandler, "f"));
     target.addEventListener("pointerleave", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
+    target.addEventListener("touchend", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
   }
   /**
    * Stops observing the specified element.
@@ -859,6 +860,7 @@ class HoverController extends MonitorControllerBase {
   _unobserve(target) {
     target.removeEventListener("pointerenter", __classPrivateFieldGet(this, _HoverController_pointerInHandler, "f"));
     target.removeEventListener("pointerleave", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
+    target.removeEventListener("touchend", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
   }
 }
 _HoverController_callback = new WeakMap(), _HoverController_startDelays = new WeakMap(), _HoverController_endDelays = new WeakMap(), _HoverController_pointerInHandler = new WeakMap(), _HoverController_pointerLeaveHandler = new WeakMap(), _HoverController_instances = new WeakSet(), _HoverController_clearDelays = function _HoverController_clearDelays(target) {
@@ -908,7 +910,7 @@ _HoverController_callback = new WeakMap(), _HoverController_startDelays = new We
   }
 };
 
-var _IntersectionController_host, _IntersectionController_callback, _IntersectionController_skipInitial, _IntersectionController_observer, _IntersectionController_unobservedUpdate;
+var _IntersectionController_callback, _IntersectionController_skipInitial, _IntersectionController_observer, _IntersectionController_unobservedUpdate;
 /** A `ReactiveController` used to monitor changes in the intersection of a target element with an ancestor element. */
 class IntersectionController extends MonitorControllerBase {
   /**
@@ -919,8 +921,6 @@ class IntersectionController extends MonitorControllerBase {
   constructor(host, options) {
     super(host, options);
     /** @private */
-    _IntersectionController_host.set(this, void 0);
-    /** @private */
     _IntersectionController_callback.set(this, void 0);
     /** @private */
     _IntersectionController_skipInitial.set(this, false);
@@ -928,7 +928,6 @@ class IntersectionController extends MonitorControllerBase {
     _IntersectionController_observer.set(this, void 0);
     /** @private */
     _IntersectionController_unobservedUpdate.set(this, true);
-    __classPrivateFieldSet(this, _IntersectionController_host, host, "f");
     __classPrivateFieldSet(this, _IntersectionController_callback, options.callback, "f");
     __classPrivateFieldSet(this, _IntersectionController_skipInitial, options.skipInitial ?? false, "f");
     if (isServer) return;
@@ -938,7 +937,6 @@ class IntersectionController extends MonitorControllerBase {
     }
     __classPrivateFieldSet(this, _IntersectionController_observer, new IntersectionObserver((entries, observer) => {
       __classPrivateFieldGet(this, _IntersectionController_callback, "f").call(this, entries, observer);
-      __classPrivateFieldGet(this, _IntersectionController_host, "f").requestUpdate();
     }, options.init), "f");
   }
   /** @inheritdoc */
@@ -955,7 +953,6 @@ class IntersectionController extends MonitorControllerBase {
   _observe(target) {
     __classPrivateFieldGet(this, _IntersectionController_observer, "f")?.observe(target);
     __classPrivateFieldSet(this, _IntersectionController_unobservedUpdate, true, "f");
-    __classPrivateFieldGet(this, _IntersectionController_host, "f").requestUpdate();
   }
   /**
    * Stops observing the specified element.
@@ -965,7 +962,7 @@ class IntersectionController extends MonitorControllerBase {
     __classPrivateFieldGet(this, _IntersectionController_observer, "f")?.unobserve(target);
   }
 }
-_IntersectionController_host = new WeakMap(), _IntersectionController_callback = new WeakMap(), _IntersectionController_skipInitial = new WeakMap(), _IntersectionController_observer = new WeakMap(), _IntersectionController_unobservedUpdate = new WeakMap();
+_IntersectionController_callback = new WeakMap(), _IntersectionController_skipInitial = new WeakMap(), _IntersectionController_observer = new WeakMap(), _IntersectionController_unobservedUpdate = new WeakMap();
 
 var _LongPressController_instances, _LongPressController_callback, _LongPressController_threshold, _LongPressController_pressedTargets, _LongPressController_pressedTimeouts, _LongPressController_touchStartHandler, _LongPressController_touchEndOrCancelHandler, _LongPressController_handleTouchStart, _LongPressController_handleTouchEndOrCancel;
 /** A `ReactiveController` used to detect a long press gesture. */
@@ -1344,6 +1341,32 @@ class ResizeController extends MonitorControllerBase {
 }
 _ResizeController_host = new WeakMap(), _ResizeController_callback = new WeakMap(), _ResizeController_skipInitial = new WeakMap(), _ResizeController_config = new WeakMap(), _ResizeController_observer = new WeakMap(), _ResizeController_unobservedUpdate = new WeakMap();
 
+/**
+ * Class decorator factory that defines the decorated class as a custom element.
+ *
+ * ```js
+ * @element('my-element')
+ * class MyElement extends LitElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @param {string} tagName The tag name of the custom element to define.
+ */
+const element = tagName => (classOrTarget, context) => {
+  const define = () => {
+    if (typeof window !== "undefined" && !customElements.get(tagName)) {
+      customElements.define(tagName, classOrTarget);
+    }
+  };
+  if (context) {
+    context.addInitializer(define);
+  } else {
+    define();
+  }
+};
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * A decorator that runs a function once after a given "cooldown" period.
@@ -1625,6 +1648,47 @@ function AttachInternals(base, formAssociated) {
   _AttachInternals.formAssociated = formAssociated;
   return _AttachInternals;
 }
+/**
+ * Convenience function used to test whether an element has a given custom state.
+ * @param {AttachInternalsMixin} element The element to test.
+ * @param {string} state The custom state to test.
+ * @returns {boolean} Whether `element` has `state`.
+ */
+function hasCustomState(element, state) {
+  return isServer ? false : element[internals].states.has(state);
+}
+/**
+ * Convenience function used to add custom state to an element.
+ * @param {AttachInternalsMixin} element The element to which to add custom state.
+ * @param {string} state The custom state to add.
+ */
+function addCustomState(element, state) {
+  if (!isServer) {
+    element[internals]?.states.add(state);
+  }
+}
+/**
+ * Convenience function used to delete custom state from an element.
+ * @param {AttachInternalsMixin} element The element from which to delete custom state.
+ * @param {string} state The custom state to delete.
+ * @returns {boolean} Whether `state` was removed from `element`.
+ */
+function deleteCustomState(element, state) {
+  return !isServer && element[internals]?.states.delete(state);
+}
+/**
+ * Convenience function used to add or delete custom state for an element.
+ * @param {AttachInternalsMixin} element The element for which to add or delete custom state.
+ * @param {string} state The custom state to add or delete.
+ * @param {boolean} value Whether to add or delete `state` from `element`.
+ */
+function setCustomState(element, state, value) {
+  if (value) {
+    addCustomState(element, state);
+  } else {
+    deleteCustomState(element, state);
+  }
+}
 
 /**
  * Determines whether a value is a `CheckedMixin`.
@@ -1815,7 +1879,7 @@ function Dirty(base) {
     }
     /** Whether the user has modified the value of the element. */
     get dirty() {
-      return this.classList.contains("-dirty");
+      return hasCustomState(this, "-dirty");
     }
     /** Whether the user has not modified the value of the element. */
     get pristine() {
@@ -1834,11 +1898,11 @@ function Dirty(base) {
     }
     /** Marks the element as pristine. */
     markAsPristine() {
-      this.classList.toggle("-dirty", false);
+      deleteCustomState(this, "-dirty");
     }
     /** Marks the element as dirty. */
     markAsDirty() {
-      this.classList.toggle("-dirty", true);
+      addCustomState(this, "-dirty");
     }
   }
   _a = _eventHandler$2;
@@ -1870,7 +1934,7 @@ function Touched(base) {
     }
     /** Whether the user has interacted when the element. */
     get touched() {
-      return this.classList.contains("-touched");
+      return hasCustomState(this, "-touched");
     }
     /** Whether the user has not interacted when the element. */
     get untouched() {
@@ -1893,11 +1957,11 @@ function Touched(base) {
     }
     /** Marks the element as touched. */
     markAsTouched() {
-      this.classList.toggle("-touched", true);
+      addCustomState(this, "-touched");
     }
     /** Marks the element as untouched. */
     markAsUntouched() {
-      this.classList.toggle("-touched", false);
+      deleteCustomState(this, "-touched");
     }
   }
   _a = _eventHandler$1;
@@ -2616,7 +2680,7 @@ function Labelled(base) {
     [(_a = _eventHandler, updateLabels)]() {
       const focusable = this.hasAttribute("tabindex");
       const disabled = isDisabledMixin(this) && this.disabled || isDisabledInteractiveMixin(this) && this.disabledInteractive;
-      const invalid = isTouchedMixin(this) && this.touched && (this.ariaInvalid || this.classList.contains("-invalid"));
+      const invalid = isTouchedMixin(this) && this.touched && (this.ariaInvalid || hasCustomState(this, "-invalid"));
       for (const label of this.labels ?? []) {
         label.style.userSelect = focusable ? "none" : "";
         label.style.cursor = !disabled && focusable ? "pointer" : "";
@@ -2856,7 +2920,7 @@ function ConstraintValidation(base) {
       }
       this[internals].setValidity(validity, validityMessage);
       this.ariaInvalid = invalid ? "true" : null;
-      this.classList.toggle("-invalid", invalid === true);
+      setCustomState(this, "-invalid", invalid === true);
       if (isLabelledMixin(this)) {
         this[updateLabels]?.();
       }
@@ -3104,20 +3168,35 @@ const _firstUpdated = Symbol("_firstUpdated");
  * @returns {Constructor<HtmlForMixin> & T} A constructor extends `base` and implements `HtmlForMixin`.
  */
 function HtmlFor(base) {
-  var _a, _b;
+  var _a;
   class _HtmlForMixin extends base {
     constructor() {
       super(...arguments);
       /** @private */
-      this[_a] = null;
-      /** @private */
-      this[_b] = false;
+      this[_a] = false;
       /** The identifier of the interactive control to which this element is attached. */
       this.htmlFor = null;
     }
     /** The interactive element to which this element is attached. */
     get control() {
-      return this[_control];
+      return this[_control]?.deref() ?? null;
+    }
+    /** @inheritdoc */
+    connectedCallback() {
+      super.connectedCallback();
+      const control = this[_control]?.deref();
+      if (control) {
+        this.attach(control);
+      }
+    }
+    /** @inheritdoc */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      const control = this[_control];
+      if (control) {
+        this.detach();
+        this[_control] = control;
+      }
     }
     /** @inheritdoc */
     firstUpdated(_changedProperties) {
@@ -3152,14 +3231,14 @@ function HtmlFor(base) {
      * @param {HTMLElement} control The element that controls the attachable element.
      */
     attach(control) {
-      this[_control] = control;
+      this[_control] = new WeakRef(control);
     }
     /** Detaches the element from its current interactive control. */
     detach() {
-      this[_control] = null;
+      this[_control] = undefined;
     }
   }
-  _a = _control, _b = _firstUpdated;
+  _a = _firstUpdated;
   __decorate([property({
     attribute: "for"
   })], _HtmlForMixin.prototype, "htmlFor", void 0);
@@ -3595,7 +3674,7 @@ var _M3eCollapsibleElement_instances, _M3eCollapsibleElement_slotChanged, _M3eCo
  *
  * @cssprop --m3e-collapsible-animation-duration - The duration of the expand / collapse animation.
  */
-let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(LitElement, "opening", "opened", "closing", "closed") {
+let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(AttachInternals(LitElement), "opening", "opened", "closing", "closed") {
   constructor() {
     super(...arguments);
     _M3eCollapsibleElement_instances.add(this);
@@ -3612,7 +3691,7 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(L
   /** @inheritdoc */
   update(changedProperties) {
     super.update(changedProperties);
-    this.classList.toggle("-no-animate", true);
+    addCustomState(this, "-no-animate");
     if (!__classPrivateFieldGet(this, _M3eCollapsibleElement_slotChanged, "f")) {
       if (this.open) {
         __classPrivateFieldSet(this, _M3eCollapsibleElement_hasOpened, true, "f");
@@ -3626,24 +3705,24 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(L
       __classPrivateFieldSet(this, _M3eCollapsibleElement_hasOpened, true, "f");
       if (!prefersReducedMotion()) {
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
-        this.classList.toggle("-overflows", this.clientHeight < this.scrollHeight);
+        setCustomState(this, "-overflows", this.clientHeight < this.scrollHeight);
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
       }
-      this.classList.toggle("-closing", false);
-      this.classList.toggle("-opening", true);
+      deleteCustomState(this, "-closing");
+      addCustomState(this, "-opening");
       this.dispatchEvent(new Event("opening"));
       __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
-      this.classList.toggle("-no-animate", false);
+      deleteCustomState(this, "-no-animate");
       __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_actualSize).call(this);
       if (prefersReducedMotion()) {
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
-        this.classList.toggle("-opening", false);
+        deleteCustomState(this, "-opening");
         this.dispatchEvent(new Event("opened"));
       } else {
         this.addEventListener("transitionend", () => {
           if (this.open) {
             __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
-            this.classList.toggle("-opening", false);
+            deleteCustomState(this, "-opening");
             this.dispatchEvent(new Event("opened"));
           }
         }, {
@@ -3651,23 +3730,23 @@ let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(L
         });
       }
     } else {
-      this.classList.toggle("-opening", false);
-      this.classList.toggle("-closing", true);
+      deleteCustomState(this, "-opening");
+      addCustomState(this, "-closing");
       this.dispatchEvent(new Event("closing"));
       __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_actualSize).call(this);
       if (__classPrivateFieldGet(this, _M3eCollapsibleElement_hasOpened, "f")) {
-        this.classList.toggle("-no-animate", false);
+        deleteCustomState(this, "-no-animate");
       }
       if (prefersReducedMotion()) {
         __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
-        this.classList.toggle("-closing", false);
+        deleteCustomState(this, "-closing");
         this.dispatchEvent(new Event("closed"));
       } else {
         requestAnimationFrame(() => {
           __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
           this.addEventListener("transitionend", () => {
             if (!this.open) {
-              this.classList.toggle("-closing", false);
+              deleteCustomState(this, "-closing");
               this.dispatchEvent(new Event("closed"));
             }
           }, {
@@ -3705,12 +3784,12 @@ M3eCollapsibleElement.styles = css`:host { display: block; height: 0px; overflow
         padding-top var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
           ${DesignToken.motion.easing.standard},
         padding-bottom var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-          ${DesignToken.motion.easing.standard}`)}; } :host(:not(.-closing):not([open])) { visibility: hidden; } :host(:not([open])) { min-height: unset !important; padding-top: 0px !important; padding-bottom: 0px !important; } :host(.-no-animate) { transition-duration: 0ms; } :host(.-opening), :host(.-closing) { overflow-y: hidden !important; } :host(.-overflows) { scrollbar-gutter: stable; } ::slotted(*) { --m3e-collapsible-animation-duration: initial; } @media (prefers-reduced-motion) { :host { transition: none; } }`;
+          ${DesignToken.motion.easing.standard}`)}; } :host(:not(:state(-closing)):not([open])) { visibility: hidden; } :host(:not([open])) { min-height: unset !important; padding-top: 0px !important; padding-bottom: 0px !important; } :host(:state(-no-animate)) { transition-duration: 0ms; } :host(:state(-opening)), :host(:state(-closing)) { overflow-y: hidden !important; } :host(:state(-overflows)) { scrollbar-gutter: stable; } ::slotted(*) { --m3e-collapsible-animation-duration: initial; } @media (prefers-reduced-motion) { :host { transition: none; } }`;
 __decorate([property({
   type: Boolean,
   reflect: true
 })], M3eCollapsibleElement.prototype, "open", void 0);
-M3eCollapsibleElement = __decorate([customElement("m3e-collapsible")], M3eCollapsibleElement);
+M3eCollapsibleElement = __decorate([element("m3e-collapsible")], M3eCollapsibleElement);
 
 /**
  * Component design tokens that control the `M3eElevationElement`.
@@ -3882,7 +3961,7 @@ __decorate([property({
   type: Number,
   reflect: true
 })], M3eElevationElement.prototype, "level", void 0);
-M3eElevationElement = __decorate([customElement("m3e-elevation")], M3eElevationElement);
+M3eElevationElement = __decorate([element("m3e-elevation")], M3eElevationElement);
 
 /**
  * Component design tokens that control the `M3eFocusRingElement`.
@@ -4028,7 +4107,7 @@ __decorate([property({
   type: Boolean,
   reflect: true
 })], M3eFocusRingElement.prototype, "disabled", void 0);
-M3eFocusRingElement = __decorate([customElement("m3e-focus-ring")], M3eFocusRingElement);
+M3eFocusRingElement = __decorate([element("m3e-focus-ring")], M3eFocusRingElement);
 
 /**
  * An element which looks like a checkbox.
@@ -4081,7 +4160,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 ); }`;
-M3ePseudoCheckboxElement = __decorate([customElement("m3e-pseudo-checkbox")], M3ePseudoCheckboxElement);
+M3ePseudoCheckboxElement = __decorate([element("m3e-pseudo-checkbox")], M3ePseudoCheckboxElement);
 
 /**
  * An element which looks like a radio button.
@@ -4119,7 +4198,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); }`;
-M3ePseudoRadioElement = __decorate([customElement("m3e-pseudo-radio")], M3ePseudoRadioElement);
+M3ePseudoRadioElement = __decorate([element("m3e-pseudo-radio")], M3ePseudoRadioElement);
 
 /**
  * Component design tokens that control the `M3eRippleElement`.
@@ -4329,7 +4408,7 @@ __decorate([property({
 __decorate([property({
   type: Number
 })], M3eRippleElement.prototype, "radius", void 0);
-M3eRippleElement = __decorate([customElement("m3e-ripple")], M3eRippleElement);
+M3eRippleElement = __decorate([element("m3e-ripple")], M3eRippleElement);
 
 var _M3eScrollContainerElement_scrollHandler;
 /**
@@ -4362,7 +4441,7 @@ var _M3eScrollContainerElement_scrollHandler;
  * @cssprop --m3e-focus-ring-factor - Animation factor for focus ring thickness.
  * @cssprop --m3e-focus-ring-duration - Duration of the focus ring animation.
  */
-let M3eScrollContainerElement = class M3eScrollContainerElement extends LitElement {
+let M3eScrollContainerElement = class M3eScrollContainerElement extends AttachInternals(LitElement) {
   constructor() {
     super(...arguments);
     /** @private */
@@ -4403,20 +4482,20 @@ let M3eScrollContainerElement = class M3eScrollContainerElement extends LitEleme
   _updateScroll() {
     const before = (this.dividers === "above" || this.dividers === "above-below") && this.scrollTop > 0;
     const after = (this.dividers === "below" || this.dividers === "above-below") && this.scrollHeight - this.scrollTop - this.clientHeight > 1;
-    this.classList.toggle("-above", before);
-    this.classList.toggle("-below", after);
+    setCustomState(this, "-above", before);
+    setCustomState(this, "-below", after);
   }
 };
 _M3eScrollContainerElement_scrollHandler = new WeakMap();
 /** The styles of the element. */
-M3eScrollContainerElement.styles = css`:host { display: block; overflow-y: auto; position: relative; box-sizing: border-box; scrollbar-color: ${DesignToken.scrollbar.color}; border-top: var(--m3e-divider-thickness, 1px) solid transparent; border-bottom: var(--m3e-divider-thickness, 1px) solid transparent; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; outline-offset: ${FocusRingToken.outwardOffset}; } :host([thin]) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:not([thin])) { scrollbar-width: ${DesignToken.scrollbar.width}; } :host(:not(:focus-visible).-above) { border-top-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:not(:focus-visible).-below) { border-bottom-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:focus-visible) { outline-style: solid; animation: grow-shrink ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (forced-colors: active) { :host { border-top: var(--m3e-divider-thickness, 1px) solid Canvas; border-bottom: var(--m3e-divider-thickness, 1px) solid Canvas; } :host(:not(:focus-visible).-above) { border-top-color: GrayText; } :host(:not(:focus-visible).-below) { border-bottom-color: GrayText; } } @media (prefers-reduced-motion) { :host(:focus-visible) { animation: none; } }`;
+M3eScrollContainerElement.styles = css`:host { display: block; overflow-y: auto; position: relative; box-sizing: border-box; scrollbar-color: ${DesignToken.scrollbar.color}; border-top: var(--m3e-divider-thickness, 1px) solid transparent; border-bottom: var(--m3e-divider-thickness, 1px) solid transparent; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; outline-offset: ${FocusRingToken.outwardOffset}; } :host([thin]) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:not([thin])) { scrollbar-width: ${DesignToken.scrollbar.width}; } :host(:not(:focus-visible):state(-above)) { border-top-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:not(:focus-visible):state(-below)) { border-bottom-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:focus-visible) { outline-style: solid; animation: grow-shrink ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (forced-colors: active) { :host { border-top: var(--m3e-divider-thickness, 1px) solid Canvas; border-bottom: var(--m3e-divider-thickness, 1px) solid Canvas; } :host(:not(:focus-visible):state(-above)) { border-top-color: GrayText; } :host(:not(:focus-visible):state(-below)) { border-bottom-color: GrayText; } } @media (prefers-reduced-motion) { :host(:focus-visible) { animation: none; } }`;
 __decorate([property()], M3eScrollContainerElement.prototype, "dividers", void 0);
 __decorate([property({
   type: Boolean,
   reflect: true
 })], M3eScrollContainerElement.prototype, "thin", void 0);
 __decorate([debounce(40)], M3eScrollContainerElement.prototype, "_updateScroll", null);
-M3eScrollContainerElement = __decorate([customElement("m3e-scroll-container")], M3eScrollContainerElement);
+M3eScrollContainerElement = __decorate([element("m3e-scroll-container")], M3eScrollContainerElement);
 
 var _M3eSlideElement_instances, _M3eSlideElement_items, _M3eSlideElement_handleSlotChange, _M3eSlideElement_updateItems;
 /**
@@ -4441,7 +4520,7 @@ var _M3eSlideElement_instances, _M3eSlideElement_items, _M3eSlideElement_handleS
  *
  * @cssprop --m3e-slide-animation-duration - The duration of transitions between slotted items.
  */
-let M3eSlideElement = class M3eSlideElement extends LitElement {
+let M3eSlideElement = class M3eSlideElement extends AttachInternals(LitElement) {
   constructor() {
     super(...arguments);
     _M3eSlideElement_instances.add(this);
@@ -4456,20 +4535,20 @@ let M3eSlideElement = class M3eSlideElement extends LitElement {
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    this.classList.toggle("-no-animate", true);
+    addCustomState(this, "-no-animate");
   }
   /** @inheritdoc */
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("selectedIndex")) {
       if (this.selectedIndex === null) {
-        this.classList.toggle("-no-animate", true);
+        addCustomState(this, "-no-animate");
       }
       __classPrivateFieldGet(this, _M3eSlideElement_instances, "m", _M3eSlideElement_updateItems).call(this);
-      if (this.selectedIndex !== null && this.classList.contains("-no-animate")) {
+      if (this.selectedIndex !== null && hasCustomState(this, "-no-animate")) {
         requestAnimationFrame(() => {
           if (this.selectedIndex !== null) {
-            this.classList.toggle("-no-animate", false);
+            deleteCustomState(this, "-no-animate");
           }
         });
       }
@@ -4505,13 +4584,13 @@ _M3eSlideElement_updateItems = function _M3eSlideElement_updateItems() {
 };
 /** The styles of the element. */
 M3eSlideElement.styles = css`:host { display: flex; position: relative; overflow: hidden; } ::slotted(*) { width: 100%; top: 0; transition: ${unsafeCSS(`inset-inline-start var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
-        visibility var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } ::slotted(.-before), ::slotted(.-after) { visibility: hidden; position: absolute; } ::slotted(.-before) { inset-inline-start: -100%; } ::slotted(.-after) { inset-inline-start: 100%; } ::slotted(:not(.-before):not(.-after)) { position: relative; inset-inline-start: 0; } :host(.-no-animate) ::slotted(*) { transition: none; } @media (prefers-reduced-motion) { ::slotted(*) { transition: none; } }`;
+        visibility var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard} allow-discrete`)}; } ::slotted(.-before), ::slotted(.-after) { visibility: hidden; position: absolute; } ::slotted(.-before) { inset-inline-start: -100%; } ::slotted(.-after) { inset-inline-start: 100%; } ::slotted(:not(.-before):not(.-after)) { position: relative; inset-inline-start: 0; } :host(:state(-no-animate)) ::slotted(*) { transition: none; } @media (prefers-reduced-motion) { ::slotted(*) { transition: none; } }`;
 __decorate([property({
   attribute: "selected-index",
   type: Number,
   reflect: true
 })], M3eSlideElement.prototype, "selectedIndex", void 0);
-M3eSlideElement = __decorate([customElement("m3e-slide")], M3eSlideElement);
+M3eSlideElement = __decorate([element("m3e-slide")], M3eSlideElement);
 
 /**
  * Component design tokens that control the `M3eStateLayerElement`.
@@ -4676,7 +4755,7 @@ __decorate([property({
   type: Boolean,
   reflect: true
 })], M3eStateLayerElement.prototype, "disableHover", void 0);
-M3eStateLayerElement = __decorate([customElement("m3e-state-layer")], M3eStateLayerElement);
+M3eStateLayerElement = __decorate([element("m3e-state-layer")], M3eStateLayerElement);
 
 /**
  * An inline container which presents an ellipsis when content overflows.
@@ -4711,7 +4790,7 @@ let M3eTextOverflowElement = class M3eTextOverflowElement extends LitElement {
 };
 /** The styles of the element. */
 M3eTextOverflowElement.styles = css`:host { flex: 1 1 auto; display: inline-flex; align-items: center; flex-wrap: nowrap; min-width: 0; } .base { flex: 1 1 auto; display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }`;
-M3eTextOverflowElement = __decorate([customElement("m3e-text-overflow")], M3eTextOverflowElement);
+M3eTextOverflowElement = __decorate([element("m3e-text-overflow")], M3eTextOverflowElement);
 
 var _M3eTextHighlightElement_instances, _M3eTextHighlightElement_id, _M3eTextHighlightElement_ranges, _M3eTextHighlightElement_styles, _M3eTextHighlightElement_isTextNode, _M3eTextHighlightElement_findTextNodes, _M3eTextHighlightElement_highlight;
 var M3eTextHighlightElement_1;
@@ -4904,7 +4983,7 @@ __decorate([property({
   attribute: "case-sensitive",
   type: Boolean
 })], M3eTextHighlightElement.prototype, "caseSensitive", void 0);
-M3eTextHighlightElement = M3eTextHighlightElement_1 = __decorate([customElement("m3e-text-highlight")], M3eTextHighlightElement);
+M3eTextHighlightElement = M3eTextHighlightElement_1 = __decorate([element("m3e-text-highlight")], M3eTextHighlightElement);
 
-export { ActionElementBase, AnimationLoopController, AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eCollapsibleElement, M3eElevationElement, M3eFocusRingElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRippleElement, M3eScrollContainerElement, M3eSlideElement, M3eStateLayerElement, M3eTextHighlightElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, Touched, VelocityTracker, Vertical, checkOrSelect, computeCssSize, computeLineCount, debounce, defaultValue, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getTextContent, guid, hasAssignedNodes, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, spaceSeparatedStringConverter, updateLabels, validate };
+export { ActionElementBase, AnimationLoopController, AttachInternals, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eCollapsibleElement, M3eElevationElement, M3eFocusRingElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRippleElement, M3eScrollContainerElement, M3eSlideElement, M3eStateLayerElement, M3eTextHighlightElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, debounce, defaultValue, deleteCustomState, element, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate };
 //# sourceMappingURL=core.js.map