@m3e/core 1.0.0-rc.1

package/dist/index.js

@@ -0,0 +1,4342 @@
+/**
+ * @license MIT
+ * Copyright (c) 2025 matraic
+ * See LICENSE file in the project root for full license text.
+ */
+import { isServer, nothing, noChange, unsafeCSS, html, css, LitElement } from 'lit';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var _MonitorControllerBase_host, _MonitorControllerBase_target, _MonitorControllerBase_targets;
+/**
+ * A base implementation for a `ReactiveController` used to monitor the state of one
+ * or more elements. This class must be inherited.
+ */
+class MonitorControllerBase {
+    /**
+     * Initializes the `MonitorControllerBase` base class values when called by a derived class.
+     * @param {ReactiveControllerHost & HTMLElement} host The host element to which this controller will be added.
+     * @param {MonitorControllerOptions} options Options used to configure this controller.
+     */
+    constructor(host, options) {
+        /** @private */ _MonitorControllerBase_host.set(this, void 0);
+        /** @private */ _MonitorControllerBase_target.set(this, void 0);
+        /** @private */ _MonitorControllerBase_targets.set(this, new Set());
+        __classPrivateFieldSet(this, _MonitorControllerBase_host, host, "f");
+        __classPrivateFieldSet(this, _MonitorControllerBase_target, options.target, "f");
+        __classPrivateFieldGet(this, _MonitorControllerBase_host, "f").addController(this);
+    }
+    /** The targets being observed. */
+    get targets() {
+        return __classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").values();
+    }
+    /** @inheritdoc */
+    hostConnected() {
+        // Target defaults to host unless explicitly null.
+        if (__classPrivateFieldGet(this, _MonitorControllerBase_target, "f") !== null) {
+            this.observe(__classPrivateFieldGet(this, _MonitorControllerBase_target, "f") ?? __classPrivateFieldGet(this, _MonitorControllerBase_host, "f"));
+        }
+    }
+    /** @inheritdoc */
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").forEach((x) => this.unobserve(x));
+        __classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").clear();
+    }
+    /**
+     * Starts observing the specified element.
+     * @param {HTMLElement} target The element to start observing.
+     */
+    observe(target) {
+        if (__classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").has(target))
+            return;
+        __classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").add(target);
+        this._observe(target);
+    }
+    /**
+     * Determines whether the specified element is being observed.
+     * @param {HTMLElement} target The element to test.
+     * @returns {boolean} Whether `target` is being observed.
+     */
+    isObserving(target) {
+        return __classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").has(target);
+    }
+    /**
+     * Stops observing the specified element.
+     * @param {HTMLElement} target The element to stop observing.
+     */
+    unobserve(target) {
+        if (!__classPrivateFieldGet(this, _MonitorControllerBase_targets, "f").delete(target))
+            return;
+        this._unobserve(target);
+    }
+}
+_MonitorControllerBase_host = new WeakMap(), _MonitorControllerBase_target = new WeakMap(), _MonitorControllerBase_targets = new WeakMap();
+
+var _FocusController_instances, _FocusController_callback, _FocusController_focusInHandler, _FocusController_focusOutHandler, _FocusController_handleFocusIn, _FocusController_handleFocusOut;
+/** A `ReactiveController` used to monitor the focused state of one or more elements. */
+class FocusController extends MonitorControllerBase {
+    /**
+     * Initializes a new instance of this class.
+     * @param {ReactiveControllerHost & HTMLElement} host The host element to which this controller will be added.
+     * @param {FocusControllerOptions} options Options used to configure this controller.
+     */
+    constructor(host, options) {
+        super(host, options);
+        _FocusController_instances.add(this);
+        /** @private */ _FocusController_callback.set(this, void 0);
+        /** @private */ _FocusController_focusInHandler.set(this, (e) => __classPrivateFieldGet(this, _FocusController_instances, "m", _FocusController_handleFocusIn).call(this, e));
+        /** @private */ _FocusController_focusOutHandler.set(this, (e) => __classPrivateFieldGet(this, _FocusController_instances, "m", _FocusController_handleFocusOut).call(this, e));
+        __classPrivateFieldSet(this, _FocusController_callback, options.callback, "f");
+    }
+    /**
+     * Starts observing the specified element.
+     * @param {HTMLElement} target The element to start observing.
+     */
+    _observe(target) {
+        target.addEventListener("keydown", __classPrivateFieldGet(this, _FocusController_focusInHandler, "f"));
+        target.addEventListener("focusin", __classPrivateFieldGet(this, _FocusController_focusInHandler, "f"));
+        target.addEventListener("focusout", __classPrivateFieldGet(this, _FocusController_focusOutHandler, "f"));
+    }
+    /**
+     * Stops observing the specified element.
+     * @param {HTMLElement} target The element to stop observing.
+     */
+    _unobserve(target) {
+        target.removeEventListener("keydown", __classPrivateFieldGet(this, _FocusController_focusInHandler, "f"));
+        target.removeEventListener("focusin", __classPrivateFieldGet(this, _FocusController_focusInHandler, "f"));
+        target.removeEventListener("focusout", __classPrivateFieldGet(this, _FocusController_focusOutHandler, "f"));
+    }
+}
+_FocusController_callback = new WeakMap(), _FocusController_focusInHandler = new WeakMap(), _FocusController_focusOutHandler = new WeakMap(), _FocusController_instances = new WeakSet(), _FocusController_handleFocusIn = function _FocusController_handleFocusIn(e) {
+    const target = e.target;
+    __classPrivateFieldGet(this, _FocusController_callback, "f").call(this, true, target.matches(":focus-visible") || matchMedia("(forced-colors: active)").matches, target);
+}, _FocusController_handleFocusOut = function _FocusController_handleFocusOut(e) {
+    __classPrivateFieldGet(this, _FocusController_callback, "f").call(this, false, false, e.target);
+};
+
+var _HoverController_instances, _HoverController_callback, _HoverController_startDelays, _HoverController_endDelays, _HoverController_pointerInHandler, _HoverController_pointerLeaveHandler, _HoverController_clearDelays, _HoverController_clearStartDelay, _HoverController_clearEndDelay, _HoverController_handlePointerEnter, _HoverController_handlePointerLeave;
+/** A `ReactiveController` used to monitor the hover state of one or more elements. */
+class HoverController extends MonitorControllerBase {
+    /**
+     * Initializes a new instance of this class.
+     * @param {ReactiveControllerHost & HTMLElement} host The host element to which this controller will be added.
+     * @param {HoverControllerOptions} options Options used to configure this controller.
+     */
+    constructor(host, options) {
+        super(host, options);
+        _HoverController_instances.add(this);
+        /** @private */ _HoverController_callback.set(this, void 0);
+        /** @private */ _HoverController_startDelays.set(this, new Map());
+        /** @private */ _HoverController_endDelays.set(this, new Map());
+        /** @private */ _HoverController_pointerInHandler.set(this, (e) => __classPrivateFieldGet(this, _HoverController_instances, "m", _HoverController_handlePointerEnter).call(this, e));
+        /** @private */ _HoverController_pointerLeaveHandler.set(this, (e) => __classPrivateFieldGet(this, _HoverController_instances, "m", _HoverController_handlePointerLeave).call(this, e));
+        __classPrivateFieldSet(this, _HoverController_callback, options.callback, "f");
+        this.startDelay = options.startDelay ?? 0;
+        this.endDelay = options.endDelay ?? 0;
+    }
+    /** Clears any hover delays for all targets. */
+    clearDelays() {
+        for (const target of this.targets) {
+            __classPrivateFieldGet(this, _HoverController_instances, "m", _HoverController_clearDelays).call(this, target);
+        }
+    }
+    /**
+     * Starts observing the specified element.
+     * @param {HTMLElement} target The element to start observing.
+     */
+    _observe(target) {
+        target.addEventListener("pointerenter", __classPrivateFieldGet(this, _HoverController_pointerInHandler, "f"));
+        target.addEventListener("pointerleave", __classPrivateFieldGet(this, _HoverController_pointerLeaveHandler, "f"));
+    }
+    /**
+     * Stops observing the specified element.
+     * @param {HTMLElement} target The element to stop observing.
+     */
+    _unobserve(target) {
+        target.removeEventListener("pointerenter", __classPrivateFieldGet(this, _HoverController_pointerInHandler, "f"));
+        target.removeEventListener("pointerleave", __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) {
+    __classPrivateFieldGet(this, _HoverController_instances, "m", _HoverController_clearStartDelay).call(this, target);
+    __classPrivateFieldGet(this, _HoverController_instances, "m", _HoverController_clearEndDelay).call(this, target);
+}, _HoverController_clearStartDelay = function _HoverController_clearStartDelay(target) {
+    if (__classPrivateFieldGet(this, _HoverController_startDelays, "f").has(target)) {
+        clearTimeout(__classPrivateFieldGet(this, _HoverController_startDelays, "f").get(target));
+        return __classPrivateFieldGet(this, _HoverController_startDelays, "f").delete(target);
+    }
+    return false;
+}, _HoverController_clearEndDelay = function _HoverController_clearEndDelay(target) {
+    if (__classPrivateFieldGet(this, _HoverController_endDelays, "f").has(target)) {
+        clearTimeout(__classPrivateFieldGet(this, _HoverController_endDelays, "f").get(target));
+        return __classPrivateFieldGet(this, _HoverController_endDelays, "f").delete(target);
+    }
+    return false;
+}, _HoverController_handlePointerEnter = function _HoverController_handlePointerEnter(e) {
+    const target = e.target;
+    // If there is a pending end delay, cancel it.
+    __classPrivateFieldGet(this, _HoverController_instances, "m", _HoverController_clearEndDelay).call(this, target);
+    // Otherwise, if there is a pending start delay, cancel it and start a new one.
+    if (this.startDelay > 0) {
+        __classPrivateFieldGet(this, _HoverController_instances, "m", _HoverController_clearStartDelay).call(this, target);
+        __classPrivateFieldGet(this, _HoverController_startDelays, "f").set(target, setTimeout(() => {
+            __classPrivateFieldGet(this, _HoverController_startDelays, "f").delete(target);
+            __classPrivateFieldGet(this, _HoverController_callback, "f").call(this, true, target);
+        }, this.startDelay));
+    }
+    else {
+        // Otherwise, report the start.
+        __classPrivateFieldGet(this, _HoverController_callback, "f").call(this, true, target);
+    }
+}, _HoverController_handlePointerLeave = function _HoverController_handlePointerLeave(e) {
+    const target = e.target;
+    // If there is a pending start delay, cancel it and do not report the end.
+    if (__classPrivateFieldGet(this, _HoverController_instances, "m", _HoverController_clearStartDelay).call(this, target))
+        return;
+    // Otherwise, if there is a pending end delay, cancel it and start a new one.
+    if (this.endDelay > 0) {
+        __classPrivateFieldGet(this, _HoverController_instances, "m", _HoverController_clearEndDelay).call(this, target);
+        __classPrivateFieldGet(this, _HoverController_endDelays, "f").set(target, setTimeout(() => {
+            __classPrivateFieldGet(this, _HoverController_endDelays, "f").delete(target);
+            __classPrivateFieldGet(this, _HoverController_callback, "f").call(this, false, target);
+        }, this.endDelay));
+    }
+    else {
+        // Otherwise, report the end.
+        __classPrivateFieldGet(this, _HoverController_callback, "f").call(this, false, target);
+    }
+};
+
+var _IntersectionController_host, _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 {
+    /**
+     * Initializes a new instance of the `IntersectionController` class.
+     * @param {ReactiveControllerHost & HTMLElement} host The host element to which this controller will be added.
+     * @param {IntersectionControllerOptions} options Options used to configure this controller.
+     */
+    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);
+        /** @private */ _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;
+        if (!window.IntersectionObserver) {
+            console.warn("IntersectionController error: the browser does not support IntersectionObserver.");
+            return;
+        }
+        __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 */
+    async hostUpdated() {
+        if (__classPrivateFieldGet(this, _IntersectionController_observer, "f") && !__classPrivateFieldGet(this, _IntersectionController_skipInitial, "f") && __classPrivateFieldGet(this, _IntersectionController_unobservedUpdate, "f")) {
+            __classPrivateFieldGet(this, _IntersectionController_callback, "f").call(this, [], __classPrivateFieldGet(this, _IntersectionController_observer, "f"));
+        }
+        __classPrivateFieldSet(this, _IntersectionController_unobservedUpdate, false, "f");
+    }
+    /**
+     * Starts observing the specified element.
+     * @param {HTMLElement} target The element to start observing.
+     */
+    _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.
+     * @param {HTMLElement} target The element to stop observing.
+     */
+    _unobserve(target) {
+        __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();
+
+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. */
+class LongPressController extends MonitorControllerBase {
+    /**
+     * Initializes a new instance of this class.
+     * @param {ReactiveControllerHost & HTMLElement} host The host element to which this controller will be added.
+     * @param {LongPressControllerOptions} options Options used to configure this controller.
+     */
+    constructor(host, options) {
+        super(host, options);
+        _LongPressController_instances.add(this);
+        /** @private */ _LongPressController_callback.set(this, void 0);
+        /** @private */ _LongPressController_threshold.set(this, void 0);
+        /** @private */ _LongPressController_pressedTargets.set(this, new Set());
+        /** @private */ _LongPressController_pressedTimeouts.set(this, new Map());
+        /** @private */ _LongPressController_touchStartHandler.set(this, (e) => __classPrivateFieldGet(this, _LongPressController_instances, "m", _LongPressController_handleTouchStart).call(this, e));
+        /** @private */ _LongPressController_touchEndOrCancelHandler.set(this, (e) => __classPrivateFieldGet(this, _LongPressController_instances, "m", _LongPressController_handleTouchEndOrCancel).call(this, e));
+        __classPrivateFieldSet(this, _LongPressController_callback, options.callback, "f");
+        __classPrivateFieldSet(this, _LongPressController_threshold, options.threshold ?? 500, "f");
+    }
+    /**
+     * Starts observing the specified element.
+     * @param {HTMLElement} target The element to start observing.
+     */
+    _observe(target) {
+        target.addEventListener("touchstart", __classPrivateFieldGet(this, _LongPressController_touchStartHandler, "f"));
+        target.addEventListener("touchend", __classPrivateFieldGet(this, _LongPressController_touchEndOrCancelHandler, "f"));
+        target.addEventListener("touchcancel", __classPrivateFieldGet(this, _LongPressController_touchEndOrCancelHandler, "f"));
+    }
+    /**
+     * Stops observing the specified element.
+     * @param {HTMLElement} target The element to stop observing.
+     */
+    _unobserve(target) {
+        target.removeEventListener("touchstart", __classPrivateFieldGet(this, _LongPressController_touchStartHandler, "f"));
+        target.removeEventListener("touchend", __classPrivateFieldGet(this, _LongPressController_touchEndOrCancelHandler, "f"));
+        target.removeEventListener("touchcancel", __classPrivateFieldGet(this, _LongPressController_touchEndOrCancelHandler, "f"));
+    }
+}
+_LongPressController_callback = new WeakMap(), _LongPressController_threshold = new WeakMap(), _LongPressController_pressedTargets = new WeakMap(), _LongPressController_pressedTimeouts = new WeakMap(), _LongPressController_touchStartHandler = new WeakMap(), _LongPressController_touchEndOrCancelHandler = new WeakMap(), _LongPressController_instances = new WeakSet(), _LongPressController_handleTouchStart = function _LongPressController_handleTouchStart(e) {
+    if (e.currentTarget instanceof HTMLElement && this.isObserving(e.currentTarget)) {
+        const target = e.currentTarget;
+        __classPrivateFieldGet(this, _LongPressController_pressedTimeouts, "f").set(target, setTimeout(() => {
+            __classPrivateFieldGet(this, _LongPressController_pressedTargets, "f").add(target);
+            __classPrivateFieldGet(this, _LongPressController_pressedTimeouts, "f").delete(target);
+            __classPrivateFieldGet(this, _LongPressController_callback, "f").call(this, true, target);
+        }, __classPrivateFieldGet(this, _LongPressController_threshold, "f")));
+    }
+}, _LongPressController_handleTouchEndOrCancel = function _LongPressController_handleTouchEndOrCancel(e) {
+    if (e.currentTarget instanceof HTMLElement && this.isObserving(e.currentTarget)) {
+        const target = e.currentTarget;
+        if (__classPrivateFieldGet(this, _LongPressController_pressedTargets, "f").has(target)) {
+            __classPrivateFieldGet(this, _LongPressController_callback, "f").call(this, false, target);
+            __classPrivateFieldGet(this, _LongPressController_pressedTargets, "f").delete(target);
+        }
+        if (__classPrivateFieldGet(this, _LongPressController_pressedTimeouts, "f").has(target)) {
+            clearTimeout(__classPrivateFieldGet(this, _LongPressController_pressedTimeouts, "f").get(target));
+            __classPrivateFieldGet(this, _LongPressController_pressedTimeouts, "f").delete(target);
+        }
+    }
+};
+
+var _MutationController_host, _MutationController_callback, _MutationController_skipInitial, _MutationController_config, _MutationController_observer, _MutationController_unobservedUpdate;
+/**
+ * A `ReactiveController` that integrates a `MutationObserver` with an element's reactive update lifecycle
+ * to detect arbitrary changes to DOM, including nodes being added or removed and attributes changing.
+ */
+class MutationController extends MonitorControllerBase {
+    /**
+     * Initializes a new instance of the `MutationController` class.
+     * @param {ReactiveControllerHost & HTMLElement} host The host element to which this controller will be added.
+     * @param {MutationControllerOptions} options Options used to configure this controller.
+     */
+    constructor(host, options) {
+        super(host, options);
+        /** @private */ _MutationController_host.set(this, void 0);
+        /** @private */ _MutationController_callback.set(this, void 0);
+        /** @private */ _MutationController_skipInitial.set(this, false);
+        /** @private */ _MutationController_config.set(this, void 0);
+        /** @private */ _MutationController_observer.set(this, void 0);
+        /** @private */ _MutationController_unobservedUpdate.set(this, true);
+        __classPrivateFieldSet(this, _MutationController_host, host, "f");
+        __classPrivateFieldSet(this, _MutationController_callback, options.callback, "f");
+        __classPrivateFieldSet(this, _MutationController_skipInitial, options.skipInitial ?? false, "f");
+        __classPrivateFieldSet(this, _MutationController_config, options.config, "f");
+        if (isServer)
+            return;
+        if (!window.MutationObserver) {
+            console.warn("MutationController error: the browser does not support MutationObserver.");
+            return;
+        }
+        __classPrivateFieldSet(this, _MutationController_observer, new MutationObserver((records, observer) => {
+            __classPrivateFieldGet(this, _MutationController_callback, "f").call(this, records, observer);
+            __classPrivateFieldGet(this, _MutationController_host, "f").requestUpdate();
+        }), "f");
+    }
+    /** @inheritdoc */
+    async hostUpdated() {
+        if (__classPrivateFieldGet(this, _MutationController_observer, "f") && !__classPrivateFieldGet(this, _MutationController_skipInitial, "f") && __classPrivateFieldGet(this, _MutationController_unobservedUpdate, "f")) {
+            const records = __classPrivateFieldGet(this, _MutationController_observer, "f").takeRecords();
+            if (records.length > 0) {
+                __classPrivateFieldGet(this, _MutationController_callback, "f").call(this, records, __classPrivateFieldGet(this, _MutationController_observer, "f"));
+            }
+        }
+        __classPrivateFieldSet(this, _MutationController_unobservedUpdate, false, "f");
+    }
+    /** @inheritdoc */
+    hostDisconnected() {
+        super.hostDisconnected();
+        __classPrivateFieldGet(this, _MutationController_observer, "f")?.disconnect();
+    }
+    /** @inheritdoc */
+    _observe(target) {
+        __classPrivateFieldGet(this, _MutationController_observer, "f")?.observe(target, __classPrivateFieldGet(this, _MutationController_config, "f"));
+        __classPrivateFieldSet(this, _MutationController_unobservedUpdate, true, "f");
+        __classPrivateFieldGet(this, _MutationController_host, "f").requestUpdate();
+    }
+    /** @inheritdoc */
+    _unobserve() {
+        __classPrivateFieldGet(this, _MutationController_observer, "f")?.disconnect();
+        for (const target of this.targets) {
+            __classPrivateFieldGet(this, _MutationController_observer, "f")?.observe(target, __classPrivateFieldGet(this, _MutationController_config, "f"));
+        }
+    }
+}
+_MutationController_host = new WeakMap(), _MutationController_callback = new WeakMap(), _MutationController_skipInitial = new WeakMap(), _MutationController_config = new WeakMap(), _MutationController_observer = new WeakMap(), _MutationController_unobservedUpdate = new WeakMap();
+
+var _PressedController_instances, _PressedController_capture, _PressedController_callback, _PressedController_isPressedKey, _PressedController_pressedTargets, _PressedController_pointerDownHandler, _PressedController_pointerUpHandler, _PressedController_keyDownHandler, _PressedController_keyUpHandler, _PressedController_handlePointerDown, _PressedController_handlePointerUp, _PressedController_handleKeyDown, _PressedController_handleKeyUp;
+/** A `ReactiveController` used to monitor the pressed state of one or more elements. */
+class PressedController extends MonitorControllerBase {
+    /**
+     * Initializes a new instance of this class.
+     * @param {ReactiveControllerHost & HTMLElement} host The host element to which this controller will be added.
+     * @param {PressedControllerOptions} options Options used to configure this controller.
+     */
+    constructor(host, options) {
+        super(host, options);
+        _PressedController_instances.add(this);
+        /** @private */ _PressedController_capture.set(this, void 0);
+        /** @private */ _PressedController_callback.set(this, void 0);
+        /** @private */ _PressedController_isPressedKey.set(this, void 0);
+        /** @private */ _PressedController_pressedTargets.set(this, new Set());
+        /** @private */ _PressedController_pointerDownHandler.set(this, (e) => __classPrivateFieldGet(this, _PressedController_instances, "m", _PressedController_handlePointerDown).call(this, e));
+        /** @private */ _PressedController_pointerUpHandler.set(this, (e) => __classPrivateFieldGet(this, _PressedController_instances, "m", _PressedController_handlePointerUp).call(this, e));
+        /** @private */ _PressedController_keyDownHandler.set(this, (e) => __classPrivateFieldGet(this, _PressedController_instances, "m", _PressedController_handleKeyDown).call(this, e));
+        /** @private */ _PressedController_keyUpHandler.set(this, (e) => __classPrivateFieldGet(this, _PressedController_instances, "m", _PressedController_handleKeyUp).call(this, e));
+        __classPrivateFieldSet(this, _PressedController_capture, options.capture, "f");
+        __classPrivateFieldSet(this, _PressedController_callback, options.callback, "f");
+        __classPrivateFieldSet(this, _PressedController_isPressedKey, options.isPressedKey, "f");
+    }
+    /** @inheritdoc */
+    hostConnected() {
+        document.addEventListener("pointerup", __classPrivateFieldGet(this, _PressedController_pointerUpHandler, "f"), { capture: __classPrivateFieldGet(this, _PressedController_capture, "f") });
+        super.hostConnected();
+    }
+    /** @inheritdoc */
+    hostDisconnected() {
+        document.removeEventListener("pointerup", __classPrivateFieldGet(this, _PressedController_pointerUpHandler, "f"), { capture: __classPrivateFieldGet(this, _PressedController_capture, "f") });
+        super.hostDisconnected();
+        __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").clear();
+    }
+    /**
+     * Starts observing the specified element.
+     * @param {HTMLElement} target The element to start observing.
+     */
+    _observe(target) {
+        target.addEventListener("pointerdown", __classPrivateFieldGet(this, _PressedController_pointerDownHandler, "f"), { capture: __classPrivateFieldGet(this, _PressedController_capture, "f") });
+        if (__classPrivateFieldGet(this, _PressedController_isPressedKey, "f")) {
+            target.addEventListener("keydown", __classPrivateFieldGet(this, _PressedController_keyDownHandler, "f"), { capture: __classPrivateFieldGet(this, _PressedController_capture, "f") });
+            target.addEventListener("keyup", __classPrivateFieldGet(this, _PressedController_keyUpHandler, "f"), { capture: __classPrivateFieldGet(this, _PressedController_capture, "f") });
+        }
+    }
+    /**
+     * Stops observing the specified element.
+     * @param {HTMLElement} target The element to stop observing.
+     */
+    _unobserve(target) {
+        target.removeEventListener("pointerdown", __classPrivateFieldGet(this, _PressedController_pointerDownHandler, "f"), { capture: __classPrivateFieldGet(this, _PressedController_capture, "f") });
+        if (__classPrivateFieldGet(this, _PressedController_isPressedKey, "f")) {
+            target.removeEventListener("keydown", __classPrivateFieldGet(this, _PressedController_keyDownHandler, "f"), { capture: __classPrivateFieldGet(this, _PressedController_capture, "f") });
+            target.removeEventListener("keyup", __classPrivateFieldGet(this, _PressedController_keyUpHandler, "f"), { capture: __classPrivateFieldGet(this, _PressedController_capture, "f") });
+        }
+    }
+}
+_PressedController_capture = new WeakMap(), _PressedController_callback = new WeakMap(), _PressedController_isPressedKey = new WeakMap(), _PressedController_pressedTargets = new WeakMap(), _PressedController_pointerDownHandler = new WeakMap(), _PressedController_pointerUpHandler = new WeakMap(), _PressedController_keyDownHandler = new WeakMap(), _PressedController_keyUpHandler = new WeakMap(), _PressedController_instances = new WeakSet(), _PressedController_handlePointerDown = function _PressedController_handlePointerDown(e) {
+    if (e.pointerType === "mouse" && e.button > 1)
+        return;
+    for (const target of e.composedPath()) {
+        if (target instanceof HTMLElement && this.isObserving(target)) {
+            __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").add(target);
+            __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, true, { x: e.x, y: e.y }, target);
+            break;
+        }
+    }
+}, _PressedController_handlePointerUp = function _PressedController_handlePointerUp(e) {
+    if (e.pointerType === "mouse" && e.button > 1)
+        return;
+    __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").forEach((x) => __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, { x: e.x, y: e.y }, x));
+    __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").clear();
+}, _PressedController_handleKeyDown = function _PressedController_handleKeyDown(e) {
+    const target = e.target;
+    if (!__classPrivateFieldGet(this, _PressedController_pressedTargets, "f").has(target) && __classPrivateFieldGet(this, _PressedController_isPressedKey, "f")?.call(this, e.key)) {
+        if (e.key === " ") {
+            e.preventDefault();
+        }
+        __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").add(target);
+        const bounds = target.getBoundingClientRect();
+        __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, true, { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 }, target);
+    }
+}, _PressedController_handleKeyUp = function _PressedController_handleKeyUp(e) {
+    const target = e.target;
+    if (__classPrivateFieldGet(this, _PressedController_pressedTargets, "f").has(target) && __classPrivateFieldGet(this, _PressedController_isPressedKey, "f")?.call(this, e.key)) {
+        __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
+        const bounds = target.getBoundingClientRect();
+        __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 }, target);
+    }
+};
+
+var _ResizeController_host, _ResizeController_callback, _ResizeController_skipInitial, _ResizeController_config, _ResizeController_observer, _ResizeController_unobservedUpdate;
+/** A `ReactiveController` used to monitor when an element is resized. */
+class ResizeController extends MonitorControllerBase {
+    /**
+     * Initializes a new instance of the `ResizeController` class.
+     * @param {ReactiveControllerHost & HTMLElement} host The host element to which this controller will be added.
+     * @param {ResizeControllerOptions} options Options used to configure this controller.
+     */
+    constructor(host, options) {
+        super(host, options);
+        /** @private */ _ResizeController_host.set(this, void 0);
+        /** @private */ _ResizeController_callback.set(this, void 0);
+        /** @private */ _ResizeController_skipInitial.set(this, void 0);
+        /** @private */ _ResizeController_config.set(this, void 0);
+        /** @private */ _ResizeController_observer.set(this, void 0);
+        /** @private */ _ResizeController_unobservedUpdate.set(this, true);
+        __classPrivateFieldSet(this, _ResizeController_host, host, "f");
+        __classPrivateFieldSet(this, _ResizeController_callback, options.callback, "f");
+        __classPrivateFieldSet(this, _ResizeController_skipInitial, options.skipInitial ?? false, "f");
+        __classPrivateFieldSet(this, _ResizeController_config, options.config, "f");
+        if (isServer)
+            return;
+        if (!window.ResizeObserver) {
+            console.warn("ResizeController error: the browser does not support ResizeObserver.");
+            return;
+        }
+        __classPrivateFieldSet(this, _ResizeController_observer, new ResizeObserver((entries, observer) => {
+            __classPrivateFieldGet(this, _ResizeController_callback, "f").call(this, entries, observer);
+            __classPrivateFieldGet(this, _ResizeController_host, "f").requestUpdate();
+        }), "f");
+    }
+    /** @inheritdoc */
+    async hostUpdated() {
+        if (__classPrivateFieldGet(this, _ResizeController_observer, "f") && !__classPrivateFieldGet(this, _ResizeController_skipInitial, "f") && __classPrivateFieldGet(this, _ResizeController_unobservedUpdate, "f")) {
+            __classPrivateFieldGet(this, _ResizeController_callback, "f").call(this, [], __classPrivateFieldGet(this, _ResizeController_observer, "f"));
+        }
+        __classPrivateFieldSet(this, _ResizeController_unobservedUpdate, false, "f");
+    }
+    /**
+     * Starts observing the specified element.
+     * @param {HTMLElement} target The element to start observing.
+     */
+    _observe(target) {
+        __classPrivateFieldGet(this, _ResizeController_observer, "f")?.observe(target, __classPrivateFieldGet(this, _ResizeController_config, "f"));
+        __classPrivateFieldSet(this, _ResizeController_unobservedUpdate, true, "f");
+        __classPrivateFieldGet(this, _ResizeController_host, "f").requestUpdate();
+    }
+    /**
+     * Stops observing the specified element.
+     * @param {HTMLElement} target The element to stop observing.
+     */
+    _unobserve(target) {
+        __classPrivateFieldGet(this, _ResizeController_observer, "f")?.unobserve(target);
+    }
+}
+_ResizeController_host = new WeakMap(), _ResizeController_callback = new WeakMap(), _ResizeController_skipInitial = new WeakMap(), _ResizeController_config = new WeakMap(), _ResizeController_observer = new WeakMap(), _ResizeController_unobservedUpdate = new WeakMap();
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * A decorator that runs a function once after a given "cooldown" period.
+ * @param {number} timeout The timeout, in milliseconds, after which the function is invoked.
+ * @returns {MethodDecorator} The decorator that runs a function once after a given "cooldown" period.
+ */
+function debounce(timeout) {
+    const _id = Symbol("_id");
+    return (_, __, descriptor) => {
+        const orig = descriptor.value;
+        descriptor.value = function (...args) {
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
+            const self = this;
+            clearTimeout(self[_id]);
+            self[_id] = setTimeout(() => orig.apply(this, args), timeout);
+        };
+        return descriptor;
+    };
+}
+
+var _ScrollController_instances, _ScrollController_debounce, _ScrollController_callback, _ScrollController_scrollHandler, _ScrollController_scrollContainers, _ScrollController_getScrollContainers, _ScrollController_handleScroll;
+/** A `ReactiveController` used to monitor when a scroll event is emitted from a scrollable ancestor. */
+class ScrollController extends MonitorControllerBase {
+    /**
+     * Initializes a new instance of the `ScrollController` class.
+     * @param {ReactiveControllerHost & HTMLElement} host The host element to which this controller will be added.
+     * @param {ScrollControllerOptions} options Options used to configure this controller.
+     */
+    constructor(host, options) {
+        super(host, options);
+        _ScrollController_instances.add(this);
+        /** @private */ _ScrollController_debounce.set(this, void 0);
+        /** @private */ _ScrollController_callback.set(this, void 0);
+        /** @private */ _ScrollController_scrollHandler.set(this, (e) => __classPrivateFieldGet(this, _ScrollController_instances, "m", _ScrollController_handleScroll).call(this, e));
+        /** @private */ _ScrollController_scrollContainers.set(this, new Map());
+        __classPrivateFieldSet(this, _ScrollController_debounce, options.debounce === true, "f");
+        __classPrivateFieldSet(this, _ScrollController_callback, options.callback, "f");
+    }
+    /**
+     * Returns the scrollable ancestors for a target element currently being observed by this controller.
+     * @param target The element whose scroll containers are currently being observed.
+     * @returns {Element[] | undefined} The scrollable ancestors, or `undefined` if `target` is not being observed.
+     */
+    getScrollContainers(target) {
+        return __classPrivateFieldGet(this, _ScrollController_scrollContainers, "f").get(target);
+    }
+    /** @inheritdoc */
+    _observe(target) {
+        const scrollableAncestors = __classPrivateFieldGet(this, _ScrollController_instances, "m", _ScrollController_getScrollContainers).call(this, target);
+        if (scrollableAncestors.length > 0) {
+            __classPrivateFieldGet(this, _ScrollController_scrollContainers, "f").set(target, scrollableAncestors);
+            for (const ancestor of scrollableAncestors) {
+                (ancestor === document.documentElement ? document : ancestor).addEventListener("scroll", __classPrivateFieldGet(this, _ScrollController_scrollHandler, "f"), {
+                    passive: true,
+                });
+            }
+        }
+    }
+    /** @inheritdoc */
+    _unobserve(target) {
+        if (__classPrivateFieldGet(this, _ScrollController_scrollContainers, "f").has(target)) {
+            for (const ancestor of __classPrivateFieldGet(this, _ScrollController_scrollContainers, "f").get(target)) {
+                (ancestor === document.documentElement ? document : ancestor).removeEventListener("scroll", __classPrivateFieldGet(this, _ScrollController_scrollHandler, "f"));
+            }
+            __classPrivateFieldGet(this, _ScrollController_scrollContainers, "f").delete(target);
+        }
+    }
+    /** @private */
+    _debounceCallback(target) {
+        __classPrivateFieldGet(this, _ScrollController_callback, "f").call(this, target);
+    }
+}
+_ScrollController_debounce = new WeakMap(), _ScrollController_callback = new WeakMap(), _ScrollController_scrollHandler = new WeakMap(), _ScrollController_scrollContainers = new WeakMap(), _ScrollController_instances = new WeakSet(), _ScrollController_getScrollContainers = function _ScrollController_getScrollContainers(element) {
+    const ancestors = new Array();
+    let ancestor = element;
+    while (ancestor) {
+        const style = getComputedStyle(ancestor);
+        if (/(auto|scroll)/.test(style.overflow + style.overflowY + style.overflowX)) {
+            ancestors.push(ancestor);
+        }
+        ancestor = ancestor.parentElement;
+    }
+    return ancestors;
+}, _ScrollController_handleScroll = function _ScrollController_handleScroll(e) {
+    const target = e.target === document ? document.documentElement : e.target;
+    if (__classPrivateFieldGet(this, _ScrollController_debounce, "f")) {
+        this._debounceCallback(target);
+    }
+    else {
+        __classPrivateFieldGet(this, _ScrollController_callback, "f").call(this, target);
+    }
+};
+__decorate([
+    debounce(40)
+], ScrollController.prototype, "_debounceCallback", null);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$3={ATTRIBUTE:1},e$5=t=>(...e)=>({_$litDirective$:t,values:e});let i$2 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
+
+const important = "important";
+// The leading space is important
+const importantFlag = " !" + important;
+// How many characters to remove from a value, as a negative number
+const flagTrim = 0 - importantFlag.length;
+class SafeStyleMapDirective extends i$2 {
+    constructor(partInfo) {
+        super(partInfo);
+        if (partInfo.type !== t$3.ATTRIBUTE || partInfo.name !== "style" || partInfo.strings?.length > 2) {
+            throw new Error("The `styleMap` directive must be used in the `style` attribute " +
+                "and must be the only part in the attribute.");
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(_) {
+        return nothing;
+    }
+    update(part, [styleInfo]) {
+        const { style } = part.element;
+        if (this._previousStyleProperties === undefined) {
+            this._previousStyleProperties = new Set(Object.keys(styleInfo));
+        }
+        // Remove old properties that no longer exist in styleInfo
+        for (const name of this._previousStyleProperties) {
+            // If the name isn't in styleInfo or it's null/undefined
+            if (styleInfo[name] == null) {
+                this._previousStyleProperties.delete(name);
+                if (name.includes("-")) {
+                    style.removeProperty(name);
+                }
+                else {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    style[name] = null;
+                }
+            }
+        }
+        // Add or update properties
+        for (const name in styleInfo) {
+            const value = styleInfo[name];
+            if (value != null) {
+                this._previousStyleProperties.add(name);
+                const isImportant = typeof value === "string" && value.endsWith(importantFlag);
+                if (name.includes("-") || isImportant) {
+                    style.setProperty(name, isImportant ? value.slice(0, flagTrim) : value, isImportant ? important : "");
+                }
+                else {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    style[name] = value;
+                }
+            }
+        }
+        return noChange;
+    }
+}
+/**
+ * A directive that applies CSS properties to an element.
+ *
+ * `safeStyleMap` can only be used in the `style` attribute and must be the only
+ * expression in the attribute. It takes the property names in the
+ * {@link StyleInfo styleInfo} object and adds the properties to the inline
+ * style of the element.
+ *
+ * Property names with dashes (`-`) are assumed to be valid CSS
+ * property names and set on the element's style object using `setProperty()`.
+ * Names without dashes are assumed to be camelCased JavaScript property names
+ * and set on the element's style object using property assignment, allowing the
+ * style object to translate JavaScript-style names to CSS property names.
+ *
+ * For example `safeStyleMap({backgroundColor: 'red', 'border-top': '5px', '--size':
+ * '0'})` sets the `background-color`, `border-top` and `--size` properties.
+ *
+ * @param styleInfo
+ * @see {@link https://lit.dev/docs/templates/directives/#stylemap styleMap code samples on Lit.dev}
+ */
+const safeStyleMap = e$5(SafeStyleMapDirective);
+
+/**
+ * Determines whether an object has keys for a given type.
+ * @template T The type to test.
+ * @param {unknown} value The value to test.
+ * @param {...keys: Array<keyof T>} keys The keys of `T` to test.
+ * @returns {boolean} Whether `value` has all `keys`.
+ */
+function hasKeys(value, ...keys) {
+    return typeof value === "object" && value !== null && keys.every((x) => x in value);
+}
+
+/** A symbol through which to access the `ElementInternals` attached to an element. */
+const internals = Symbol("internals");
+/**
+ * Determines whether a value is an `AttachInternalsMixin`.
+ * @param {unknown} value The value to test.
+ * @returns Whether `value` is an `AttachInternalsMixin`.
+ */
+function isAttachInternalsMixin(value) {
+    return hasKeys(value, internals);
+}
+const _internals = Symbol("_internals");
+/**
+ * Mixin to augment an element with behavior that attaches to `ElementInternals`.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @param {boolean | undefined} formAssociated Whether the element is "Form Associated".
+ * @returns {Constructor<AttachInternalsMixin> & T} A constructor that implements `AttachInternalsMixin`.
+ */
+function AttachInternals(base, formAssociated) {
+    class _AttachInternals extends base {
+        get [internals]() {
+            return this[_internals] ?? (this[_internals] = this.attachInternals());
+        }
+    }
+    _AttachInternals.formAssociated = formAssociated;
+    return _AttachInternals;
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1=globalThis,e$4=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$5=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$5.set(s,t));}return t}toString(){return this.cssText}};const r$3=t=>new n$3("string"==typeof t?t:t+"",void 0,s$1),S$1=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:i$1,defineProperty:e$3,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$2,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$1(t,s),b={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$3(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$2(t),...o$4(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return  false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return  true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d$1("elementProperties")]=new Map,y[d$1("finalized")]=new Map,p$1?.({ReactiveElement:y}),(a$1.reactiveElementVersions??=[]).push("2.1.1");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o$3={attribute:true,type:String,converter:u$1,reflect:false,hasChanged:f$1},r$1=(t=o$3,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),"setter"===n&&((t=Object.create(t)).wrapped=true),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n$1(t){return (e,o)=>"object"==typeof o?r$1(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$2=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function e$1(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$2(n,s,{get(){return o(this)}})}}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function o$2(o){return (e,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return e$2(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}}
+
+/**
+ * Determines whether a value is a `CheckedMixin`.
+ * @param {unknown} value The value to test.
+ * @returns Whether `value` is a `CheckedMixin`.
+ */
+function isCheckedMixin(value) {
+    return hasKeys(value, "checked");
+}
+/**
+ * Mixin to augment an element with behavior that supports a checked state.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<CheckedMixin> & T} A constructor that implements `CheckedMixin`.
+ */
+function Checked(base) {
+    class _CheckedMixin extends base {
+        constructor() {
+            super(...arguments);
+            this.checked = false;
+        }
+        update(changedProperties) {
+            super.update(changedProperties);
+            if (changedProperties.has("checked")) {
+                if (this.role === "button") {
+                    this.ariaPressed = `${this.checked}`;
+                    this.ariaChecked = null;
+                }
+                else if (this.role && this.role !== "none" && this.role !== "presentation") {
+                    this.ariaChecked = `${this.checked}`;
+                    this.ariaPressed = null;
+                }
+            }
+        }
+    }
+    __decorate([
+        n$1({ type: Boolean, reflect: true })
+    ], _CheckedMixin.prototype, "checked", void 0);
+    return _CheckedMixin;
+}
+
+/**
+ * Determines whether a value is a `CheckedIndeterminateMixin`.
+ * @param {unknown} value The value to test.
+ * @returns Whether `value` is a `CheckedIndeterminateMixin`.
+ */
+function isCheckedIndeterminateMixin(value) {
+    return hasKeys(value, "indeterminate") && isCheckedMixin(value);
+}
+/**
+ * Mixin to augment an element with behavior that supports a mixed checked state.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<CheckedIndeterminateMixin> & T} A constructor that implements `CheckedIndeterminateMixin`.
+ */
+function CheckedIndeterminate(base) {
+    class _CheckedIndeterminateMixin extends Checked(base) {
+        constructor() {
+            super(...arguments);
+            this.indeterminate = false;
+        }
+        update(changedProperties) {
+            super.update(changedProperties);
+            if (changedProperties.has("indeterminate") && this.role && this.role !== "none" && this.role !== "presentation") {
+                this.ariaChecked = !this.checked && this.indeterminate ? "mixed" : `${this.checked}`;
+            }
+        }
+    }
+    __decorate([
+        n$1({ type: Boolean, reflect: true })
+    ], _CheckedIndeterminateMixin.prototype, "indeterminate", void 0);
+    return _CheckedIndeterminateMixin;
+}
+
+/**
+ * Determines whether a value is a `SelectedMixin`.
+ * @param {unknown} value The value to test.
+ * @returns Whether `value` is a `SelectedMixin`.
+ */
+function isSelectedMixin(value) {
+    return hasKeys(value, "selected");
+}
+/**
+ * Mixin to augment an element with behavior that supports a selected state.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<SelectedMixin> & T} A constructor that implements `SelectedMixin`.
+ */
+function Selected(base) {
+    class _SelectedMixin extends base {
+        constructor() {
+            super(...arguments);
+            this.selected = false;
+        }
+        update(changedProperties) {
+            super.update(changedProperties);
+            if (changedProperties.has("selected")) {
+                if (this.role === "button") {
+                    this.ariaPressed = `${this.selected}`;
+                    this.ariaSelected = null;
+                }
+                else if (this.role && this.role !== "none" && this.role !== "presentation") {
+                    this.ariaSelected = `${this.selected}`;
+                    this.ariaPressed = null;
+                }
+            }
+        }
+    }
+    __decorate([
+        n$1({ type: Boolean, reflect: true })
+    ], _SelectedMixin.prototype, "selected", void 0);
+    return _SelectedMixin;
+}
+
+/**
+ * Determines whether a value is a `CheckedOrSelectedMixin`.
+ * @param {unknown} value The value to test.
+ * @returns Whether `value` is a `CheckedOrSelectedMixin`.
+ */
+function isCheckedOrSelectedMixin(value) {
+    return isCheckedMixin(value) || isSelectedMixin(value);
+}
+/**
+ * Determines whether the state of an element is checked or selected.
+ * @param {CheckedOrSelectedMixin} element The element to test.
+ * @return {boolean} Whether `element` is checked or selected.
+ */
+function isCheckedOrSelected(element) {
+    return (isCheckedMixin(element) && element.checked) || (isSelectedMixin(element) && element.selected);
+}
+/**
+ * Sets the checked or selected state of an element.
+ * @param {CheckedOrSelectedMixin} element The element for which to set the checked or selected state.
+ * @param {boolean} checkedOrSelected The checked or selected state.
+ */
+function checkOrSelect(element, checkedOrSelected) {
+    if (isCheckedMixin(element)) {
+        element.checked = checkedOrSelected;
+    }
+    else {
+        element.selected = checkedOrSelected;
+    }
+}
+
+/**
+ * Determines whether a value is a `DirtyMixin`.
+ * @param {unknown} value The value to test.
+ * @returns A value indicating whether `value` is a `DirtyMixin`.
+ */
+function isDirtyMixin(value) {
+    return hasKeys(value, "dirty", "pristine", "markAsDirty", "markAsPristine");
+}
+const _eventHandler$2 = Symbol("_eventHandler");
+/**
+ * Mixin to augment an element with functionality used to mark it as dirty.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<DirtyMixin> & T} A constructor that implements `DirtyMixin`.
+ */
+function Dirty(base) {
+    var _a;
+    class _Dirty extends base {
+        constructor() {
+            super(...arguments);
+            this[_a] = () => this.markAsDirty();
+        }
+        get dirty() {
+            return this.classList.contains("-dirty");
+        }
+        get pristine() {
+            return !this.dirty;
+        }
+        connectedCallback() {
+            this.markAsPristine();
+            super.connectedCallback();
+            this.addEventListener("change", this[_eventHandler$2]);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.removeEventListener("change", this[_eventHandler$2]);
+        }
+        markAsPristine() {
+            this.classList.toggle("-dirty", false);
+        }
+        markAsDirty() {
+            this.classList.toggle("-dirty", true);
+        }
+    }
+    _a = _eventHandler$2;
+    return _Dirty;
+}
+
+/**
+ * Determines whether a value is a `TouchedMixin`.
+ * @param {unknown} value The value to test.
+ * @returns A value indicating whether `value` is a `TouchedMixin`.
+ */
+function isTouchedMixin(value) {
+    return hasKeys(value, "touched", "untouched", "markAsTouched", "markAsUntouched");
+}
+const _eventHandler$1 = Symbol("_eventHandler");
+/**
+ * Mixin to augment an element with functionality used to mark it as touched.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<TouchedMixin> & T} A constructor that implements `TouchedMixin`.
+ */
+function Touched(base) {
+    var _a;
+    class _Touched extends base {
+        constructor() {
+            super(...arguments);
+            this[_a] = () => this.markAsTouched();
+        }
+        get touched() {
+            return this.classList.contains("-touched");
+        }
+        get untouched() {
+            return !this.touched;
+        }
+        connectedCallback() {
+            this.markAsUntouched();
+            super.connectedCallback();
+            this.addEventListener("focusout", this[_eventHandler$1]);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.removeEventListener("focusout", this[_eventHandler$1]);
+        }
+        markAsTouched() {
+            this.classList.toggle("-touched", true);
+        }
+        markAsUntouched() {
+            this.classList.toggle("-touched", false);
+        }
+    }
+    _a = _eventHandler$1;
+    return _Touched;
+}
+
+/** Design tokens that control color. */
+const ColorToken = {
+    /** High-emphasis fills, texts, and icons against surface. */
+    primary: unsafeCSS("var(--md-sys-color-primary, #6750A4)"),
+    /** Text and icons against primary. */
+    onPrimary: unsafeCSS("var(--md-sys-color-on-primary, #FFFFFF)"),
+    /** Standout fill color against surface, for key components. */
+    primaryContainer: unsafeCSS("var(--md-sys-color-primary-container, #EADDFF)"),
+    /** Text and icons against primary container. */
+    onPrimaryContainer: unsafeCSS("var(--md-sys-color-on-primary-container, #4F378B)"),
+    /** High-emphasis fills, texts, and icons that maintain the same tone in light and dark themes. */
+    primaryFixed: unsafeCSS("var(--md-sys-color-primary-fixed, #EADDFF)"),
+    /** High-emphasis fills, texts, and icons that maintain the same stronger tone in light and dark themes. */
+    primaryFixedDim: unsafeCSS("var(--md-sys-color-primary-fixed-dim, #D0BCFF)"),
+    /** Text and icons against fixed primary. */
+    onPrimaryFixed: unsafeCSS("var(--md-sys-color-on-primary-fixed, #21005D)"),
+    /** Lower-emphasis text and icons against fixed primary. */
+    onPrimaryFixedVariant: unsafeCSS("var(--md-sys-color-on-primary-fixed-variant, #4F378B)"),
+    /** Less prominent fills, text, and icons against surface. */
+    secondary: unsafeCSS("var(--md-sys-color-secondary, #625B71)"),
+    /** Text and icons against secondary. */
+    onSecondary: unsafeCSS("var(--md-sys-color-on-secondary, #FFFFFF)"),
+    /** Less prominent fill color against surface, for recessive components. */
+    secondaryContainer: unsafeCSS("var(--md-sys-color-secondary-container, #E8DEF8)"),
+    /** Text and icons against secondary container. */
+    onSecondaryContainer: unsafeCSS("var(--md-sys-color-on-secondary-container, #4A4458)"),
+    /** Less prominent fills, texts, and icons that maintain the same tone in light and dark themes. */
+    secondaryFixed: unsafeCSS("var(--md-sys-color-secondary-fixed, #E8DEF8)"),
+    /** Less prominent fills, texts, and icons that maintain the same stronger tone in light and dark themes. */
+    secondaryFixedDim: unsafeCSS("var(--md-sys-color-secondary-fixed-dim, #CCC2DC)"),
+    /** Text and icons against fixed secondary. */
+    onSecondaryFixed: unsafeCSS("var(--md-sys-color-on-secondary-fixed, #1D192B)"),
+    /** Lower-emphasis text and icons against fixed secondary. */
+    onSecondaryFixedVariant: unsafeCSS("var(--md-sys-color-on-secondary-fixed-variant, #4A4458)"),
+    /** Complementary fills, text, and icons against surface. */
+    tertiary: unsafeCSS("var(--md-sys-color-tertiary, #7D5260)"),
+    /** Text and icons against tertiary. */
+    onTertiary: unsafeCSS("var(--md-sys-color-on-tertiary, #FFFFFF)"),
+    /** Complementary container color against surface. */
+    tertiaryContainer: unsafeCSS("var(--md-sys-color-tertiary-container, #FFD8E4)"),
+    /** Text and icons against tertiary container. */
+    onTertiaryContainer: unsafeCSS("var(--md-sys-color-on-tertiary-container, #633B48)"),
+    /** Complementary fills, texts, and icons that maintain the same tone in light and dark themes. */
+    tertiaryFixed: unsafeCSS("var(--md-sys-color-tertiary-fixed, #FFD8E4)"),
+    /** Complementary fills, texts, and icons that maintain the same stronger tone in light and dark themes. */
+    tertiaryFixedDim: unsafeCSS("var(--md-sys-color-tertiary-fixed-dim, #EFB8C8)"),
+    /** Text and icons against fixed tertiary. */
+    onTertiaryFixed: unsafeCSS("var(--md-sys-color-on-tertiary-fixed, #31111D)"),
+    /** Lower-emphasis text and icons against fixed tertiary. */
+    onTertiaryFixedVariant: unsafeCSS("var(--md-sys-color-on-tertiary-fixed-variant, #633B48)"),
+    /** Attention-grabbing color against surface for fills, icons, and text, indicating urgency. */
+    error: unsafeCSS("var(--md-sys-color-error, #B3261E)"),
+    /** Text and icons against error. */
+    onError: unsafeCSS("var(--md-sys-color-on-error, #FFFFFF)"),
+    /** Attention-grabbing fill color against surface. */
+    errorContainer: unsafeCSS("var(--md-sys-color-error-container, #F9DEDC)"),
+    /** Text and icons against error container. */
+    onErrorContainer: unsafeCSS("var(--md-sys-color-on-error-container, #8C1D18)"),
+    /** Default color for backgrounds. */
+    surface: unsafeCSS("var(--md-sys-color-surface, #FEF7FF)"),
+    /** Text and icons against any surface color. */
+    onSurface: unsafeCSS("var(--md-sys-color-on-surface, #1D1B20)"),
+    /** Lower-emphasis color for text and icons against any surface color. */
+    onSurfaceVariant: unsafeCSS("var(--md-sys-color-on-surface-variant, #49454F)"),
+    /** Lowest-emphasis container color. */
+    surfaceContainerLowest: unsafeCSS("var(--md-sys-color-surface-container-lowest, #FFFFFF)"),
+    /** Low-emphasis container color. */
+    surfaceContainerLow: unsafeCSS("var(--md-sys-color-surface-container-low, #F7F2FA)"),
+    /** Default container color. */
+    surfaceContainer: unsafeCSS("var(--md-sys-color-surface-container, #F3EDF7)"),
+    /** High-emphasis container color. */
+    surfaceContainerHigh: unsafeCSS("var(--md-sys-color-surface-container-high, #ECE6F0)"),
+    /** Highest-emphasis container color. */
+    surfaceContainerHighest: unsafeCSS("var(--md-sys-color-surface-container-highest, #E6E0E9)"),
+    /** Dimmest surface color in light and dark themes. */
+    surfaceDim: unsafeCSS("var(--md-sys-color-surface-dim, #DED8E1)"),
+    /** Brightest surface color in light and dark themes. */
+    surfaceBright: unsafeCSS("var(--md-sys-color-surface-bright, #FEF7FF)"),
+    /** Alternate surface color, can be used for active states. */
+    surfaceVariant: unsafeCSS("var(--md-sys-color-surface-variant, #E7E0EC)"),
+    /** Background fills for elements which contrast against surface. */
+    inverseSurface: unsafeCSS("var(--md-sys-color-inverse-surface, #322F35)"),
+    /** Text and icons against inverse surface. */
+    inverseOnSurface: unsafeCSS("var(--md-sys-color-inverse-on-surface, #F5EFF7)"),
+    /** Primary text and icons against inverse surface. */
+    inversePrimary: unsafeCSS("var(--md-sys-color-inverse-primary, #D0BCFF)"),
+    /** Important boundaries, such as a text field outline. */
+    outline: unsafeCSS("var(--md-sys-color-outline, #79747E)"),
+    /** Decorative elements, such as dividers. */
+    outlineVariant: unsafeCSS("var(--md-sys-color-outline-variant, #CAC4D0)"),
+    /** Elevation shadow color. */
+    shadow: unsafeCSS("var(--md-sys-color-shadow, #000000)"),
+    /** Backdrop which obscures underlying content. */
+    scrim: unsafeCSS("var(--md-sys-color-scrim, #000000)"),
+};
+
+const _DensityToken = {
+    /** Base density multiplier. */
+    scale: unsafeCSS("var(--md-sys-density-scale, 0)"),
+    /** Spatial unit used to scale component dimensions based on density. */
+    size: unsafeCSS("var(--md-sys-density-size, 0.25rem)"),
+};
+/** Design tokens that control density. */
+const DensityToken = {
+    ..._DensityToken,
+    /**
+     * Creates a CSS `calc` that calculates a dimension based on density.
+     * @param {number} minScale The minimum supported scale.
+     * @returns {CSSResult} A CSS `calc` used to calculate a dimension based on density.
+     */
+    calc(minScale) {
+        return unsafeCSS(`calc(max(${minScale}, ${_DensityToken.scale}) * ${_DensityToken.size})`);
+    },
+};
+
+const UMBRA_COLOR = `color-mix(in srgb, var(--m3e-elevation-color, ${ColorToken.shadow}) 20%, transparent)`;
+const UMBRA = [
+    "0px 0px 0px 0px",
+    "0px 2px 1px -1px",
+    "0px 3px 1px -2px",
+    "0px 3px 3px -2px",
+    "0px 2px 4px -1px",
+    "0px 3px 5px -1px",
+    "0px 3px 5px -1px",
+    "0px 4px 5px -2px",
+    "0px 5px 5px -3px",
+    "0px 5px 6px -3px",
+    "0px 6px 6px -3px",
+    "0px 6px 7px -4px",
+    "0px 7px 8px -4px",
+    "0px 7px 8px -4px",
+    "0px 7px 9px -4px",
+    "0px 8px 9px -5px",
+    "0px 8px 10px -5px",
+    "0px 8px 11px -5px",
+    "0px 9px 11px -5px",
+    "0px 9px 12px -6px",
+    "0px 10px 13px -6px",
+    "0px 10px 13px -6px",
+    "0px 10px 14px -6px",
+    "0px 11px 14px -7px",
+    "0px 11px 15px -7px",
+];
+const PENUMBRA_COLOR = `color-mix(in srgb, var(--m3e-elevation-color, ${ColorToken.shadow}) 14%, transparent)`;
+const PENUMBRA = [
+    "0px 0px 0px 0px",
+    "0px 1px 1px 0px",
+    "0px 2px 2px 0px",
+    "0px 3px 4px 0px",
+    "0px 4px 5px 0px",
+    "0px 5px 8px 0px",
+    "0px 6px 10px 0px",
+    "0px 7px 10px 1px",
+    "0px 8px 10px 1px",
+    "0px 9px 12px 1px",
+    "0px 10px 14px 1px",
+    "0px 11px 15px 1px",
+    "0px 12px 17px 2px",
+    "0px 13px 19px 2px",
+    "0px 14px 21px 2px",
+    "0px 15px 22px 2px",
+    "0px 16px 24px 2px",
+    "0px 17px 26px 2px",
+    "0px 18px 28px 2px",
+    "0px 19px 29px 2px",
+    "0px 20px 31px 3px",
+    "0px 21px 33px 3px",
+    "0px 22px 35px 3px",
+    "0px 23px 36px 3px",
+    "0px 24px 38px 3px",
+];
+const AMBIENT_COLOR = `color-mix(in srgb, var(--m3e-elevation-color, ${ColorToken.shadow}) 12%, transparent)`;
+const AMBIENT = [
+    "0px 0px 0px 0px",
+    "0px 1px 3px 0px",
+    "0px 1px 5px 0px",
+    "0px 1px 8px 0px",
+    "0px 1px 10px 0px",
+    "0px 1px 14px 0px",
+    "0px 1px 18px 0px",
+    "0px 2px 16px 1px",
+    "0px 3px 14px 2px",
+    "0px 3px 16px 2px",
+    "0px 4px 18px 3px",
+    "0px 4px 20px 3px",
+    "0px 5px 22px 4px",
+    "0px 5px 24px 4px",
+    "0px 5px 26px 4px",
+    "0px 6px 28px 5px",
+    "0px 6px 30px 5px",
+    "0px 6px 32px 5px",
+    "0px 7px 34px 6px",
+    "0px 7px 36px 6px",
+    "0px 8px 38px 7px",
+    "0px 8px 40px 7px",
+    "0px 8px 42px 7px",
+    "0px 9px 44px 8px",
+    "0px 9px 46px 8px",
+];
+function elevation(z) {
+    return `${UMBRA_COLOR} ${UMBRA[z]},${PENUMBRA_COLOR} ${PENUMBRA[z]},${AMBIENT_COLOR} ${AMBIENT[z]}`;
+}
+/** Design tokens that control elevation. */
+const ElevationToken$1 = {
+    /** Level 0 elevation. */
+    level0: unsafeCSS(`var(--md-sys-elevation-level0, ${elevation(0)})`),
+    /** Level 1 elevation. */
+    level1: unsafeCSS(`var(--md-sys-elevation-level1, ${elevation(1)})`),
+    /** Level 2 elevation. */
+    level2: unsafeCSS(`var(--md-sys-elevation-level2, ${elevation(3)})`),
+    /** Level 3 elevation. */
+    level3: unsafeCSS(`var(--md-sys-elevation-level3, ${elevation(6)})`),
+    /** Level 4 elevation. */
+    level4: unsafeCSS(`var(--md-sys-elevation-level4, ${elevation(8)})`),
+    /** Level 5 elevation. */
+    level5: unsafeCSS(`var(--md-sys-elevation-level5, ${elevation(12)})`),
+};
+
+const EasingToken = {
+    /** Emphasized transition. */
+    emphasized: unsafeCSS("var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0.0, 0, 1.0))"),
+    /** Decelerated emphasized transition. */
+    emphasizedDecelerate: unsafeCSS("var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1.0))"),
+    /** Accelerated emphasized transition. */
+    emphasizedAccelerate: unsafeCSS("var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0.0, 0.8, 0.15))"),
+    /** Simple, small, or utility-focused transition. */
+    standard: unsafeCSS("var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0))"),
+    /** Decelerated standard transition. */
+    standardDecelerate: unsafeCSS("var(--md-sys-motion-easing-standard-decelerate, cubic-bezier(0, 0, 0, 1))"),
+    /** Accelerated standard transition. */
+    standardAccelerate: unsafeCSS("var(--md-sys-motion-easing-standard-accelerate, cubic-bezier(0.3, 0, 1, 1))"),
+};
+const SpringToken = {
+    /** Fast spatial spring. */
+    fastSpatial: unsafeCSS("var(--md-sys-motion-spring-fast-spatial, 350ms cubic-bezier(0.27, 1.06, 0.18, 1.00))"),
+    /** Default spatial spring. */
+    defaultSpatial: unsafeCSS("var(--md-sys-motion-spring-default-spatial, 500ms cubic-bezier(0.27, 1.06, 0.18, 1.00))"),
+    /** Slow spatial spring. */
+    slowSpatial: unsafeCSS("var(--md-sys-motion-spring-slow-spatial, 750ms cubic-bezier(0.27, 1.06, 0.18, 1.00))"),
+    /** Fast effects spring. */
+    fastEffects: unsafeCSS("var(--md-sys-motion-spring-fast-effects, 150ms cubic-bezier(0.31, 0.94, 0.34, 1.00))"),
+    /** Default effects spring. */
+    defaultEffects: unsafeCSS("var(--md-sys-motion-spring-default-effects, 200ms cubic-bezier(0.34, 0.80, 0.34, 1.00))"),
+    /** Slow effects spring. */
+    slowEffects: unsafeCSS("var(--md-sys-motion-spring-slow-effects, 200ms cubic-bezier(0.34, 0.88, 0.34, 1.00))"),
+};
+const DurationToken = {
+    /** Small utility-focused transition duration. */
+    short1: unsafeCSS("var(--md-sys-motion-duration-short-1, 50ms)"),
+    /** Small utility-focused transition duration. */
+    short2: unsafeCSS("var(--md-sys-motion-duration-short-2, 100ms)"),
+    /** Small utility-focused transition duration. */
+    short3: unsafeCSS("var(--md-sys-motion-duration-short-3, 150ms)"),
+    /** Small utility-focused transition duration. */
+    short4: unsafeCSS("var(--md-sys-motion-duration-short-4, 200ms)"),
+    /**  Duration for transitions that traverse a medium area of the screen. */
+    medium1: unsafeCSS("var(--md-sys-motion-duration-medium-1, 250ms)"),
+    /**  Duration for transitions that traverse a medium area of the screen. */
+    medium2: unsafeCSS("var(--md-sys-motion-duration-medium-2, 300ms)"),
+    /**  Duration for transitions that traverse a medium area of the screen. */
+    medium3: unsafeCSS("var(--md-sys-motion-duration-medium-3, 350ms)"),
+    /**  Duration for transitions that traverse a medium area of the screen. */
+    medium4: unsafeCSS("var(--md-sys-motion-duration-medium-4, 400ms)"),
+    /**  Duration for large expressive transitions. */
+    long1: unsafeCSS("var(--md-sys-motion-duration-long-1, 450ms)"),
+    /**  Duration for large expressive transitions. */
+    long2: unsafeCSS("var(--md-sys-motion-duration-long-2, 500ms)"),
+    /**  Duration for large expressive transitions. */
+    long3: unsafeCSS("var(--md-sys-motion-duration-long-3, 550ms)"),
+    /**  Duration for large expressive transitions. */
+    long4: unsafeCSS("var(--md-sys-motion-duration-long-4, 600ms)"),
+    /**  Extra long duration for ambient transitions. */
+    extraLong1: unsafeCSS("var(--md-sys-motion-duration-extra-long-1, 700ms)"),
+    /**  Extra long duration for ambient transitions. */
+    extraLong2: unsafeCSS("var(--md-sys-motion-duration-extra-long-2, 800ms)"),
+    /**  Extra long duration for ambient transitions. */
+    extraLong3: unsafeCSS("var(--md-sys-motion-duration-extra-long-3, 900ms)"),
+    /**  Extra long duration for ambient transitions. */
+    extraLong4: unsafeCSS("var(--md-sys-motion-duration-extra-long-4, 1000ms)"),
+};
+/** Design tokens that control motion. */
+const MotionToken = {
+    /** Design tokens that control transition effects. */
+    easing: EasingToken,
+    /** Design tokens that control transition duration. */
+    duration: DurationToken,
+    /** Design tokens that control spring effects. */
+    spring: SpringToken,
+};
+
+/** Design tokens that control scrollbars. */
+const ScrollbarToken = {
+    /** Width of a standard scrollbar. */
+    width: unsafeCSS(`var(--m3e-scrollbar-width, auto)`),
+    /** Width of a thin scrollbar. */
+    thinWidth: unsafeCSS(`var(--m3e-scrollbar-thin-width, thin)`),
+    /** Color of a scrollbar. */
+    color: unsafeCSS(`var(--m3e-scrollbar-thumb-color, #938f94) var(--m3e-scrollbar-track-color, transparent)`),
+};
+
+const CornerValue = {
+    /** No rounding. */
+    none: unsafeCSS("var(--md-sys-shape-corner-value-none, 0)"),
+    /** Extra small rounded corner. */
+    extraSmall: unsafeCSS("var(--md-sys-shape-corner-value-extra-small, 0.25rem)"),
+    /** Small rounded corner. */
+    small: unsafeCSS("var(--md-sys-shape-corner-value-small, 0.5rem)"),
+    /** Medium rounded corner. */
+    medium: unsafeCSS("var(--md-sys-shape-corner-value-medium, 0.75rem)"),
+    /** Large rounded corner. */
+    large: unsafeCSS("var(--md-sys-shape-corner-value-large, 1rem)"),
+    /** Increased large rounded corner. */
+    largeIncreased: unsafeCSS("var(--md-sys-shape-corner-value-large-increased, 1.25rem)"),
+    /** Extra large rounded corner. */
+    extraLarge: unsafeCSS("var(--md-sys-shape-corner-value-extra-large, 1.75rem)"),
+    /** Increased extra large rounded corner. */
+    extraLargeIncreased: unsafeCSS("var(--md-sys-shape-corner-value-extra-large-increased, 2rem)"),
+    /** Extra extra large rounded corner. */
+    extraExtraLarge: unsafeCSS("var(--md-sys-shape-corner-value-extra-extra-large, 3rem)"),
+};
+/** Design tokens that control shape. */
+const ShapeToken = {
+    corner: {
+        /** Fully rounded symmetric shape. */
+        full: unsafeCSS("var(--md-sys-shape-corner-full, 624.9375rem)"),
+        /** Extra large rounded asymmetric shape directed towards the top. */
+        extraLargeTop: unsafeCSS(`var(--md-sys-shape-corner-extra-large-top, ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none})`),
+        /** Extra large rounded symmetric shape. */
+        extraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-large, ${CornerValue.extraLarge})`),
+        /** Extra large rounded asymmetric shape directed towards the end. */
+        extraLargeEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none}`),
+        /** Extra large rounded asymmetric shape directed towards the start. */
+        extraLargeStart: unsafeCSS(`${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraLarge}`),
+        /** Large rounded asymmetric shape directed towards the top. */
+        largeTop: unsafeCSS(`var(--md-sys-shape-corner-large-top, ${CornerValue.large} ${CornerValue.large} ${CornerValue.none} ${CornerValue.none})`),
+        /** Large rounded asymmetric shape directed towards the end. */
+        largeEnd: unsafeCSS(`var(--md-sys-shape-corner-large-end, ${CornerValue.none} ${CornerValue.large} ${CornerValue.large} ${CornerValue.none})`),
+        /** Large rounded asymmetric shape directed towards the start. */
+        largeStart: unsafeCSS(`var(--md-sys-shape-corner-large-end, ${CornerValue.large} ${CornerValue.none} ${CornerValue.none} ${CornerValue.large})`),
+        /** Large rounded symmetric shape. */
+        large: unsafeCSS(`var(--md-sys-shape-corner-large, ${CornerValue.large})`),
+        /** Medium rounded symmetric shape. */
+        medium: unsafeCSS(`var(--md-sys-shape-corner-medium, ${CornerValue.medium})`),
+        /** Medium rounded asymmetric shape directed towards the top. */
+        mediumTop: unsafeCSS(`${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none} ${CornerValue.none}`),
+        /** Medium rounded asymmetric shape directed towards the end. */
+        mediumEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none}`),
+        /** Medium rounded asymmetric shape directed towards the start. */
+        mediumStart: unsafeCSS(`${CornerValue.medium} ${CornerValue.none} ${CornerValue.none} ${CornerValue.medium}`),
+        /** Small rounded symmetric shape. */
+        small: unsafeCSS(`var(--md-sys-shape-corner-small, ${CornerValue.small})`),
+        /** Small rounded asymmetric shape directed towards the top. */
+        smallTop: unsafeCSS(`${CornerValue.small} ${CornerValue.small} ${CornerValue.none} ${CornerValue.none}`),
+        /** Small rounded asymmetric shape directed towards the end. */
+        smallEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.small} ${CornerValue.small} ${CornerValue.none}`),
+        /** Small rounded asymmetric shape directed towards the start. */
+        smallStart: unsafeCSS(`${CornerValue.small} ${CornerValue.none} ${CornerValue.none} ${CornerValue.small}`),
+        /** Extra small rounded asymmetric shape directed towards the top. */
+        extraSmallTop: unsafeCSS(`var(--md-sys-shape-corner-extra-small-top, ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none})`),
+        /** Extra small rounded symmetric shape. */
+        extraSmall: unsafeCSS(`var(--md-sys-shape-corner-extra-small, ${CornerValue.extraSmall})`),
+        /** Extra small rounded asymmetric shape directed towards the end. */
+        extraSmallEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none}`),
+        /** Extra small rounded asymmetric shape directed towards the start. */
+        extraSmallStart: unsafeCSS(`${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall}`),
+        /** Extra small rounded asymmetric shape directed towards the bottom. */
+        extraSmallBottom: unsafeCSS(`${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall}`),
+        /** No rounding. */
+        none: unsafeCSS(`var(--md-sys-shape-corner-none, ${CornerValue.none})`),
+        /** Increased large rounded symmetric shape. */
+        largeIncreased: unsafeCSS(`var(--md-sys-shape-corner-large-increased, ${CornerValue.largeIncreased})`),
+        /** Increased extra large rounded symmetric shape. */
+        extraLargeIncreased: unsafeCSS(`var(--md-sys-shape-corner-extra-large-increased, ${CornerValue.extraLargeIncreased})`),
+        /** Extra extra large rounded symmetric shape. */
+        extraExtraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-extra-large, ${CornerValue.extraExtraLarge})`),
+        /** Design tokens that control specific corners. */
+        value: CornerValue,
+    },
+};
+
+/** Design tokens that control state layer. */
+const StateToken = {
+    /** Opacity of the state layer on focus. */
+    focusStateLayerOpacity: unsafeCSS("var(--md-sys-state-focus-state-layer-opacity, 10%)"),
+    /** Opacity of the state layer on hover. */
+    hoverStateLayerOpacity: unsafeCSS("var(--md-sys-state-hover-state-layer-opacity, 8%)"),
+    /** Opacity of the state layer on pressed. */
+    pressedStateLayerOpacity: unsafeCSS("var(--md-sys-state-pressed-state-layer-opacity, 10%)"),
+};
+
+/** Design tokens that control typescale. */
+const TypescaleToken = {
+    /** Standard typescale variant. */
+    standard: {
+        /** Short, important text or numerals. */
+        display: {
+            large: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-display-large-font-size, 3.5625rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-display-large-font-weight, 400)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-display-large-line-height, 4rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-display-large-tracking, 0.015625rem)"),
+            },
+            medium: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-display-medium-font-size, 2.8125rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-display-medium-font-weight, 400)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-display-medium-line-height, 3.25rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-display-medium-tracking, 0)"),
+            },
+            small: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-display-small-font-size, 2.25rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-display-small-font-weight, 400)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-display-small-line-height, 2.75rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-display-small-tracking, 0)"),
+            },
+        },
+        /** Short, high-emphasis text on smaller screens. */
+        headline: {
+            large: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-headline-large-font-size, 2rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-headline-large-font-weight, 400)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-headline-large-line-height, 2.5rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-headline-large-tracking, 0)"),
+            },
+            medium: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-headline-medium-font-size, 1.75rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-headline-medium-font-weight, 400)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-headline-medium-line-height, 2.25rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-headline-medium-tracking, 0)"),
+            },
+            small: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-headline-small-font-size, 1.5rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-headline-small-font-weight, 400)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-headline-small-line-height, 2rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-headline-small-tracking, 0)"),
+            },
+        },
+        /** Medium-emphasis text that remains relatively short. */
+        title: {
+            large: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-title-large-font-size, 1.375rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-title-large-font-weight, 400)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-title-large-line-height, 1.75rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-title-large-tracking, 0)"),
+            },
+            medium: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-title-medium-font-size, 1rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-title-medium-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-title-medium-line-height, 1.5rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-title-medium-tracking, 0.009375rem)"),
+            },
+            small: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-title-small-font-size, 0.875rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-title-small-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-title-small-line-height, 1.25rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-title-small-tracking, 0.00625rem)"),
+            },
+        },
+        /** Longer passages of text. */
+        body: {
+            large: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-body-large-font-size, 1rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-body-large-font-weight, 400)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-body-large-line-height, 1.5rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-body-large-tracking, 0.03125rem)"),
+            },
+            medium: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-body-medium-font-size, 0.875rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-body-medium-font-weight, 400)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-body-medium-line-height, 1.25rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-body-medium-tracking, 0.015625rem)"),
+            },
+            small: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-body-small-font-size, 0.75rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-body-small-font-weight, 400)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-body-small-line-height, 1rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-body-small-tracking, 0.025rem)"),
+            },
+        },
+        /** Smaller, utilitarian text. */
+        label: {
+            large: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-label-large-font-size, 0.875rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-label-large-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-label-large-line-height, 1.25rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-label-large-tracking, 0.00625rem)"),
+            },
+            medium: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-label-medium-font-size, 0.75rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-label-medium-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-label-medium-line-height, 1rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-label-medium-tracking, 0.03125rem)"),
+            },
+            small: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-label-small-font-size, 0.6875rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-label-small-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-label-small-line-height, 1rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-label-small-tracking, 0.03125rem)"),
+            },
+        },
+    },
+    /** Emphasized typescale variant. */
+    emphasized: {
+        /** Short, important text or numerals. */
+        display: {
+            large: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-display-large-font-size, 3.5625rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-display-large-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-display-large-line-height, 4rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-display-large-tracking, 0.015625rem)"),
+            },
+            medium: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-display-medium-font-size, 2.8125rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-display-medium-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-display-medium-line-height, 3.25rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-display-medium-tracking, 0)"),
+            },
+            small: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-display-small-font-size, 2.25rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-display-small-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-display-small-line-height, 2.75rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-display-small-tracking, 0)"),
+            },
+        },
+        /** Short, high-emphasis text on smaller screens. */
+        headline: {
+            large: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-headline-large-font-size, 2rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-headline-large-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-headline-large-line-height, 2.5rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-headline-large-tracking, 0)"),
+            },
+            medium: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-headline-medium-font-size, 1.75rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-headline-medium-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-headline-medium-line-height, 2.25rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-headline-medium-tracking, 0)"),
+            },
+            small: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-headline-small-font-size, 1.5rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-headline-small-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-headline-small-line-height, 2rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-headline-small-tracking, 0)"),
+            },
+        },
+        /** Medium-emphasis text that remains relatively short. */
+        title: {
+            large: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-title-large-font-size, 1.375rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-title-large-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-title-large-line-height, 1.75rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-title-large-tracking, 0)"),
+            },
+            medium: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-title-medium-font-size, 1rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-title-medium-font-weight, 700)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-title-medium-line-height, 3.5rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-title-medium-tracking, 0.009375rem)"),
+            },
+            small: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-title-small-font-size, 0.875rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-title-small-font-weight, 700)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-title-small-line-height, 1.25rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-title-small-tracking, 0.00625rem)"),
+            },
+        },
+        /** Longer passages of text. */
+        body: {
+            large: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-body-large-font-size, 1rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-body-large-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-body-large-line-height, 1.5rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-body-large-tracking, 0.03125rem)"),
+            },
+            medium: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-body-medium-font-size, 0.875rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-body-medium-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-body-medium-line-height, 1.25rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-body-medium-tracking, 0.015625rem)"),
+            },
+            small: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-body-small-font-size, 0.75rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-body-small-font-weight, 500)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-body-small-line-height, 1rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-body-small-tracking, 0.025rem)"),
+            },
+        },
+        /** Smaller, utilitarian text. */
+        label: {
+            large: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-label-large-font-size, 0.875rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-label-large-font-weight, 700)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-label-large-line-height, 1.25rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-label-large-tracking, 0.00625rem)"),
+            },
+            medium: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-label-medium-font-size, 0.75rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-label-medium-font-weight, 700)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-label-medium-line-height, 1rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-label-medium-tracking, 0.03125rem)"),
+            },
+            small: {
+                fontSize: unsafeCSS("var(--md-sys-typescale-emphasized-label-small-font-size, 0.6875rem)"),
+                fontWeight: unsafeCSS("var(--md-sys-typescale-emphasized-label-small-font-weight, 700)"),
+                lineHeight: unsafeCSS("var(--md-sys-typescale-emphasized-label-small-line-height, 1rem)"),
+                tracking: unsafeCSS("var(--md-sys-typescale-emphasized-label-small-tracking, 0.03125rem)"),
+            },
+        },
+    },
+};
+
+/** Design tokens used to style components. */
+const DesignToken = {
+    /** Design tokens that control color. */
+    color: ColorToken,
+    /** Design tokens that control elevation. */
+    elevation: ElevationToken$1,
+    /** Design tokens that control motion. */
+    motion: MotionToken,
+    /** Design tokens that control shape. */
+    shape: ShapeToken,
+    /** Design tokens that control state layer. */
+    state: StateToken,
+    /** Design tokens that control typescale. */
+    typescale: TypescaleToken,
+    /** Design tokens that control scrollbars. */
+    scrollbar: ScrollbarToken,
+    /** Design tokens that control density. */
+    density: DensityToken,
+};
+
+/**
+ * Determines whether a value is a `DisabledMixin`.
+ * @param {unknown} value The value to test.
+ * @returns {value is DisabledMixin} Whether `value` is a `DisabledMixin`.
+ */
+function isDisabledMixin(value) {
+    return hasKeys(value, "disabled");
+}
+/**
+ * Mixin to augment an element with behavior that supports a disabled state.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @param {boolean} [reflect=true] Whether the disabled property is reflected as an attribute.
+ * @returns {Constructor<DisabledMixin> & T} A constructor that implements `DisabledMixin`.
+ */
+function Disabled(base, reflect = true) {
+    class _DisabledMixin extends base {
+        constructor() {
+            super(...arguments);
+            this.disabled = false;
+        }
+        update(changedProperties) {
+            super.update(changedProperties);
+            if (changedProperties.has("disabled") && this.role && this.role !== "none" && this.role !== "presentation") {
+                this.ariaDisabled = this.disabled ? "true" : null;
+            }
+        }
+    }
+    __decorate([
+        n$1({ type: Boolean, reflect: reflect })
+    ], _DisabledMixin.prototype, "disabled", void 0);
+    return _DisabledMixin;
+}
+
+/**
+ * Determines whether a value is a `DisabledInteractiveMixin`.
+ * @param {unknown} value The value to test.
+ * @returns {value is DisabledInteractiveMixin} Whether `value` is a `DisabledInteractiveMixin`.
+ */
+function isDisabledInteractiveMixin(value) {
+    return hasKeys(value, "disabledInteractive") && isDisabledMixin(value);
+}
+const SUPPRESSED_EVENTS = ["click", "dblclick", "auxclick", "keydown", "keyup"];
+const INTERACTIVE_KEYS = ["Tab", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "Left", "Up", "Right", "Down"];
+const _suppressedEventHandler = Symbol("_suppressedEventHandler");
+/**
+ * Mixin to augment an element with behavior that supports an interactive disabled state.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<DisabledInteractiveMixin>} A constructor that implements `DisabledInteractiveMixin`.
+ */
+function DisabledInteractive(base) {
+    var _a;
+    class _DisabledInteractiveMixin extends base {
+        constructor() {
+            super(...arguments);
+            this[_a] = (e) => {
+                if (this.disabledInteractive) {
+                    // Only allow specific keys when disabled and interactive.
+                    if (e instanceof KeyboardEvent && INTERACTIVE_KEYS.includes(e.key)) {
+                        return;
+                    }
+                    e.stopImmediatePropagation();
+                    e.preventDefault();
+                }
+            };
+            this.disabledInteractive = false;
+        }
+        connectedCallback() {
+            SUPPRESSED_EVENTS.forEach((x) => this.addEventListener(x, this[_suppressedEventHandler], true));
+            super.connectedCallback();
+        }
+        disconnectedCallback() {
+            SUPPRESSED_EVENTS.forEach((x) => this.removeEventListener(x, this[_suppressedEventHandler], true));
+            super.disconnectedCallback();
+        }
+        update(changedProperties) {
+            super.update(changedProperties);
+            if ((changedProperties.has("disabled") || changedProperties.has("disabledInteractive")) &&
+                this.role &&
+                this.role !== "none" &&
+                this.role !== "presentation" &&
+                this.role !== "none") {
+                this.ariaDisabled = this.disabled || this.disabledInteractive ? "true" : null;
+            }
+        }
+    }
+    _a = _suppressedEventHandler;
+    __decorate([
+        n$1({ attribute: "disabled-interactive", type: Boolean, reflect: true })
+    ], _DisabledInteractiveMixin.prototype, "disabledInteractive", void 0);
+    return _DisabledInteractiveMixin;
+}
+
+/**
+ * Determines whether a value is a `LabelledMixin`.
+ * @param {unknown} value The value to test.
+ * @returns A value indicating whether `value` is a `LabelledMixin`.
+ */
+function isLabelledMixin(value) {
+    return hasKeys(value, "labels") && isAttachInternalsMixin(value);
+}
+const _updateLabels = Symbol("_updateLabels");
+const _eventHandler = Symbol("_eventHandler");
+/**
+ * Mixin to augment an element with support for labelling.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<FormAssociatedMixin> & T} A constructor that implements `FormAssociatedMixin`.
+ */
+function Labelled(base) {
+    var _a;
+    class _Labelled extends base {
+        constructor() {
+            super(...arguments);
+            this[_a] = (e) => {
+                if (!e.defaultPrevented) {
+                    this[_updateLabels]();
+                }
+            };
+        }
+        get labels() {
+            return this[internals].labels;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener("focusout", this[_eventHandler]);
+            this.addEventListener("change", this[_eventHandler]);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.removeEventListener("focusout", this[_eventHandler]);
+            this.removeEventListener("change", this[_eventHandler]);
+        }
+        update(changedProperties) {
+            super.update(changedProperties);
+            this[_updateLabels]();
+        }
+        [(_a = _eventHandler, _updateLabels)]() {
+            const focusable = this.hasAttribute("tabindex");
+            const disabled = (isDisabledMixin(this) && this.disabled) || (isDisabledInteractiveMixin(this) && this.disabledInteractive);
+            for (const label of this.labels) {
+                label.style.userSelect = focusable ? "none" : "";
+                label.style.cursor = !disabled ? "pointer" : "";
+                label.style.color = disabled
+                    ? `color-mix(in srgb, ${DesignToken.color.onSurface} 38%, transparent)`
+                    : isTouchedMixin(this) && this.touched && this.ariaInvalid
+                        ? `${DesignToken.color.error}`
+                        : "";
+            }
+        }
+    }
+    _Labelled.formAssociated = true;
+    return _Labelled;
+}
+
+/** A symbol through which a "Form Associated" custom element provides a value for a form. */
+const formValue = Symbol("formValue");
+/** A symbol through which a "Form Associated" custom element provides a default value for resetting a form. */
+const defaultValue = Symbol("defaultValue");
+/**
+ * Determines whether a value is a `FormAssociatedMixin`.
+ * @param {unknown} value The value to test.
+ * @returns A value indicating whether `value` is a `FormAssociatedMixin`.
+ */
+function isFormAssociatedMixin(value) {
+    return (hasKeys(value, "disabled", "form", "name") &&
+        isLabelledMixin(value) &&
+        isAttachInternalsMixin(value));
+}
+const _defaultValue = Symbol("_defaultValue");
+const _defaultIndeterminate = Symbol("_defaultIndeterminate");
+const _formDisabled = Symbol("_formDisabled");
+/**
+ * Mixin to augment an element with "Form Associated" behavior.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<FormAssociatedMixin> & T} A constructor that implements `FormAssociatedMixin`.
+ */
+function FormAssociated(base) {
+    var _a, _b;
+    class _FormAssociatedMixin extends base {
+        constructor() {
+            super(...arguments);
+            this[_a] = false;
+            this[_b] = false;
+        }
+        get form() {
+            return this[internals].form;
+        }
+        get labels() {
+            return this[internals].labels;
+        }
+        get [(_a = _defaultIndeterminate, _b = _formDisabled, formValue)]() {
+            return null;
+        }
+        get [defaultValue]() {
+            return this[_defaultValue];
+        }
+        get name() {
+            return this.getAttribute("name") ?? "";
+        }
+        set name(value) {
+            if (value) {
+                this.setAttribute("name", value);
+            }
+            else {
+                this.removeAttribute("name");
+            }
+        }
+        // Disabled attributes should not be reflected for form associated elements due to
+        // how the formDisabledCallback overrides an element's disabled state.
+        // See https://github.com/whatwg/html/issues/8365
+        get disabled() {
+            return super.disabled || this[_formDisabled];
+        }
+        set disabled(value) {
+            super.disabled = value;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            if (isCheckedMixin(this)) {
+                this[_defaultValue] = this.checked;
+                if (isCheckedIndeterminateMixin(this)) {
+                    this[_defaultIndeterminate] = this.indeterminate;
+                }
+            }
+            else if ("value" in this) {
+                this[_defaultValue] = this.value;
+            }
+        }
+        requestUpdate(name, oldValue, options) {
+            super.requestUpdate(name, oldValue, options);
+            this[internals].setFormValue(this[formValue]);
+        }
+        formDisabledCallback(disabled) {
+            const wasDisabled = this.disabled;
+            this[_formDisabled] = disabled;
+            if (this.disabled != wasDisabled) {
+                this.requestUpdate("disabled", wasDisabled);
+            }
+        }
+        formResetCallback() {
+            if (isCheckedMixin(this)) {
+                this.checked = this[_defaultValue] === true;
+                if (isCheckedIndeterminateMixin(this)) {
+                    this.indeterminate = this[_defaultIndeterminate];
+                }
+            }
+            else if ("value" in this) {
+                this.value = this[defaultValue];
+            }
+            if (isDirtyMixin(this)) {
+                this.markAsPristine();
+            }
+            if (isTouchedMixin(this)) {
+                this.markAsUntouched();
+            }
+        }
+    }
+    _FormAssociatedMixin.formAssociated = true;
+    __decorate([
+        n$1({ noAccessor: true })
+    ], _FormAssociatedMixin.prototype, "name", null);
+    __decorate([
+        n$1({ type: Boolean })
+    ], _FormAssociatedMixin.prototype, "disabled", null);
+    return _FormAssociatedMixin;
+}
+
+/** A symbol through which a "Form Associated" custom element validates its current state. */
+const validate = Symbol("validate");
+/**
+ * Determines whether a value is a `ConstraintValidationMixin`.
+ * @param {unknown} value The value to test.
+ * @returns Whether `value` is a `ConstraintValidationMixin`.
+ */
+function isConstraintValidationMixin(value) {
+    return (hasKeys(value, "willValidate", "validity", "validationMessage", "reportValidity", "checkValidity", "setCustomValidity") && isFormAssociatedMixin(value));
+}
+const _updateValidity = Symbol("_updateValidity");
+const _validityMessage = Symbol("_validityMessage");
+/**
+ * Mixin to augment an element with "Form Associated" behavior that supports constraint validation.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<ConstraintValidationMixin> & T} A constructor that implements `ConstraintValidationMixin`.
+ */
+function ConstraintValidation(base) {
+    var __ConstraintValidation_instances, __ConstraintValidation_getNativeMessage;
+    class _ConstraintValidation extends base {
+        constructor() {
+            super(...arguments);
+            __ConstraintValidation_instances.add(this);
+        }
+        get willValidate() {
+            return this[internals].willValidate;
+        }
+        get validity() {
+            this[_updateValidity]();
+            return this[internals].validity;
+        }
+        get validationMessage() {
+            this[_updateValidity]();
+            return this[internals].validationMessage;
+        }
+        [(__ConstraintValidation_instances = new WeakSet(), validate)]() {
+            return this[_validityMessage] ? { customError: true } : undefined;
+        }
+        reportValidity() {
+            if (isTouchedMixin(this)) {
+                this.markAsTouched();
+            }
+            this[_updateValidity]();
+            return this[internals].reportValidity();
+        }
+        checkValidity() {
+            this[_updateValidity]();
+            return this[internals].checkValidity();
+        }
+        setCustomValidity(error) {
+            if (error) {
+                this[_validityMessage] = error;
+            }
+            else {
+                this[_validityMessage] = undefined;
+            }
+            this[_updateValidity]();
+        }
+        requestUpdate(name, oldValue, options) {
+            super.requestUpdate(name, oldValue, options);
+            this[_updateValidity]();
+        }
+        firstUpdated(_changedProperties) {
+            super.firstUpdated(_changedProperties);
+            this[_updateValidity]();
+        }
+        [_updateValidity]() {
+            if (isServer || !this.isConnected)
+                return;
+            const validity = this[validate]();
+            const invalid = validity && Object.keys(validity).some((x) => validity[x] === true);
+            let validityMessage = validity?.customError ? this[_validityMessage] : "";
+            if (validity && !validityMessage) {
+                validityMessage = __classPrivateFieldGet(this, __ConstraintValidation_instances, "m", __ConstraintValidation_getNativeMessage).call(this, validity);
+            }
+            this[internals].setValidity(validity, validityMessage);
+            this.ariaInvalid = invalid ? "true" : null;
+            this.classList.toggle("-invalid", invalid === true);
+        }
+    }
+    __ConstraintValidation_getNativeMessage = function __ConstraintValidation_getNativeMessage(flags) {
+        const input = document.createElement("input");
+        // Default to text input unless overridden
+        input.type = "text";
+        // Simulate constraints and values based on flags
+        if (flags.valueMissing) {
+            input.required = true;
+            input.value = ""; // triggers valueMissing
+        }
+        if (flags.typeMismatch) {
+            input.type = "email";
+            input.value = "not-an-email"; // triggers typeMismatch
+        }
+        if (flags.patternMismatch) {
+            input.pattern = "[0-9]{4}";
+            input.value = "abcd"; // triggers patternMismatch
+        }
+        if (flags.tooShort) {
+            input.minLength = 5;
+            input.value = "abc"; // triggers tooShort
+        }
+        if (flags.tooLong) {
+            input.maxLength = 2;
+            input.value = "abcdef"; // triggers tooLong
+        }
+        if (flags.rangeUnderflow) {
+            input.type = "number";
+            input.min = "10";
+            input.value = "5"; // triggers rangeUnderflow
+        }
+        if (flags.rangeOverflow) {
+            input.type = "number";
+            input.max = "5";
+            input.value = "10"; // triggers rangeOverflow
+        }
+        if (flags.stepMismatch) {
+            input.type = "number";
+            input.step = "2";
+            input.value = "3"; // triggers stepMismatch
+        }
+        if (flags.badInput) {
+            input.type = "number";
+            input.value = "abc"; // triggers badInput
+        }
+        input.setCustomValidity("");
+        input.checkValidity();
+        return input.validationMessage;
+    };
+    return _ConstraintValidation;
+}
+
+/**
+ * Mixin that adds support for custom event attributes.
+ * @template T The type of base class from which to inherit.
+ * @param {T} base The base class from which to inherit.
+ * @param {string[]} types The types of event attributes.
+ * @returns {T} A class extending `base` that supports custom event attributes.
+ */
+function EventAttribute(base, ...types) {
+    class _EventAttribute extends base {
+        dispatchEvent(event) {
+            if (types.includes(event.type)) {
+                const eventAttribute = this.getAttribute(`on${event.type}`);
+                if (eventAttribute) {
+                    new Function("e", `${eventAttribute};`).call(this, event);
+                }
+            }
+            return super.dispatchEvent(event);
+        }
+    }
+    return _EventAttribute;
+}
+
+const _tabindex = Symbol("_tabindex");
+/**
+ * Mixin to augment an element with behavior that supports a focused state.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor & T} A constructor that implements focusable behavior.
+ */
+function Focusable(base) {
+    var _a;
+    class _FocusableMixin extends base {
+        constructor() {
+            super(...arguments);
+            this[_a] = 0;
+        }
+        /** @inheritdoc */
+        connectedCallback() {
+            this[_tabindex] = Number.parseInt(this.getAttribute("tabindex") ?? "0");
+            super.connectedCallback();
+        }
+        firstUpdated(_changedProperties) {
+            super.firstUpdated(_changedProperties);
+            if (!this.hasAttribute("tabindex") && !_changedProperties.has("disabled")) {
+                this.setAttribute("tabindex", `${this[_tabindex]}`);
+            }
+        }
+        update(changedProperties) {
+            super.update(changedProperties);
+            if (changedProperties.has("disabled")) {
+                if (!this.disabled && this.role !== "none") {
+                    if (!this.hasAttribute("tabindex")) {
+                        this.setAttribute("tabindex", `${this[_tabindex]}`);
+                    }
+                }
+                else {
+                    const tabIndex = this.getAttribute("tabindex");
+                    if (tabIndex) {
+                        this[_tabindex] = Number.parseInt(tabIndex);
+                    }
+                    this.removeAttribute("tabindex");
+                }
+            }
+        }
+    }
+    _a = _tabindex;
+    return _FocusableMixin;
+}
+
+/**
+ * Determines whether a value is a `FormSubmitterMixin`.
+ * @param {unknown} value The value to test.
+ * @returns {value is FormSubmitterMixin} Whether `value` is a `FormSubmitterMixin`.
+ */
+function isFormSubmitterMixin(value) {
+    return hasKeys(value, "name", "type", "value") && isAttachInternalsMixin(value);
+}
+const _clickHandler$1 = Symbol("_clickHandler");
+/**
+ * Mixin to augment an element with behavior used to submit a form.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<FormSubmitterMixin>} A constructor that implements `FormSubmitterMixin`.
+ */
+function FormSubmitter(base) {
+    var _a;
+    class _FormSubmitterMixin extends base {
+        constructor() {
+            super(...arguments);
+            this.type = "button";
+            this[_a] = async (e) => {
+                if ((isDisabledMixin(this) && this.disabled) || (isDisabledInteractiveMixin(this) && this.disabledInteractive)) {
+                    return;
+                }
+                const form = this[internals].form;
+                if (!form || this.type === "button") {
+                    return;
+                }
+                await new Promise((resolve) => setTimeout(resolve));
+                if (e.defaultPrevented) {
+                    return;
+                }
+                switch (this.type) {
+                    case "reset":
+                        form.reset();
+                        break;
+                    case "submit":
+                        form.addEventListener("submit", (e) => Object.defineProperty(e, "submitter", {
+                            configurable: true,
+                            enumerable: true,
+                            get: () => this,
+                        }), { capture: true, once: true });
+                        this[internals].setFormValue(this.value);
+                        form.requestSubmit();
+                        break;
+                }
+            };
+        }
+        get name() {
+            return this.getAttribute("name") ?? "";
+        }
+        set name(value) {
+            if (value) {
+                this.setAttribute("name", value);
+            }
+            else {
+                this.removeAttribute("name");
+            }
+        }
+        get value() {
+            return this.getAttribute("value");
+        }
+        set value(value) {
+            if (value !== null && value !== undefined) {
+                this.setAttribute("value", value);
+            }
+            else {
+                this.removeAttribute("value");
+            }
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener("click", this[_clickHandler$1]);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.removeEventListener("click", this[_clickHandler$1]);
+        }
+    }
+    _a = _clickHandler$1;
+    __decorate([
+        n$1()
+    ], _FormSubmitterMixin.prototype, "name", null);
+    __decorate([
+        n$1()
+    ], _FormSubmitterMixin.prototype, "value", null);
+    __decorate([
+        n$1()
+    ], _FormSubmitterMixin.prototype, "type", void 0);
+    return _FormSubmitterMixin;
+}
+
+/**
+ * Determines whether a value is a `HtmlForMixin`.
+ * @param {unknown} value The value to test.
+ * @returns {value is HtmlForMixin} Whether `value` is a `HtmlForMixin`.
+ */
+function isHtmlForMixin(value) {
+    return hasKeys(value, "htmlFor", "control", "attach", "detach");
+}
+const _control = Symbol("_control");
+const _firstUpdated = Symbol("_firstUpdated");
+/**
+ * Mixin that creates an attached element associated with an interactive control.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<HtmlForMixin> & T} A constructor extends `base` and implements `HtmlForMixin`.
+ */
+function HtmlFor(base) {
+    var _a, _b;
+    class _HtmlForMixin extends base {
+        constructor() {
+            super(...arguments);
+            /** @private */ this[_a] = null;
+            /** @private */ this[_b] = false;
+            this.htmlFor = null;
+        }
+        get control() {
+            return this[_control];
+        }
+        firstUpdated(_changedProperties) {
+            super.firstUpdated(_changedProperties);
+            this[_firstUpdated] = true;
+        }
+        update(changedProperties) {
+            super.update(changedProperties);
+            if (changedProperties.has("htmlFor")) {
+                if (this.htmlFor) {
+                    const control = this.getRootNode()?.querySelector(`#${this.htmlFor}`);
+                    if (control !== this.control) {
+                        if (this.control) {
+                            this.detach();
+                        }
+                        if (control instanceof HTMLElement) {
+                            this.attach(control);
+                        }
+                    }
+                }
+                else if (this.control && this[_firstUpdated]) {
+                    this.detach();
+                }
+            }
+        }
+        attach(control) {
+            this[_control] = control;
+        }
+        detach() {
+            this[_control] = null;
+        }
+    }
+    _a = _control, _b = _firstUpdated;
+    __decorate([
+        n$1({ attribute: "for" })
+    ], _HtmlForMixin.prototype, "htmlFor", void 0);
+    return _HtmlForMixin;
+}
+
+/**
+ * Mixin to augment an element with behavior emits a click event on keyboard events.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @param {boolean} [allowEnter=true] Whether the `ENTER` key emits a click event.
+ * @returns {T} A class that extends `base` with keyboard click behavior.
+ */
+function KeyboardClick(base, allowEnter = true) {
+    var __KeyboardClickMixin_instances, __KeyboardClickMixin_keyUpHandler, __KeyboardClickMixin_handleKeyUp;
+    class _KeyboardClickMixin extends base {
+        constructor() {
+            super(...arguments);
+            __KeyboardClickMixin_instances.add(this);
+            __KeyboardClickMixin_keyUpHandler.set(this, (e) => __classPrivateFieldGet(this, __KeyboardClickMixin_instances, "m", __KeyboardClickMixin_handleKeyUp).call(this, e));
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener("keyup", __classPrivateFieldGet(this, __KeyboardClickMixin_keyUpHandler, "f"));
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.removeEventListener("keyup", __classPrivateFieldGet(this, __KeyboardClickMixin_keyUpHandler, "f"));
+        }
+    }
+    __KeyboardClickMixin_keyUpHandler = new WeakMap(), __KeyboardClickMixin_instances = new WeakSet(), __KeyboardClickMixin_handleKeyUp = function __KeyboardClickMixin_handleKeyUp(e) {
+        if ((isDisabledMixin(this) && this.disabled) || (isDisabledInteractiveMixin(this) && this.disabledInteractive)) {
+            return;
+        }
+        if (e.key === " " || (allowEnter && e.key === "Enter")) {
+            // NOTE: the dispatched click event will not be trusted since it is synthetic.
+            this.dispatchEvent(new MouseEvent("click", {
+                cancelable: true,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    };
+    return _KeyboardClickMixin;
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=globalThis,i=t.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:t=>t}):void 0,e="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$1="?"+h,n=`<${o$1}>`,r=document,l=()=>r.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r.createTreeWalker(r,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n:d>=0?(o.push(a),s.slice(0,d)+e+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i?i.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$1)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r).importNode(i,true);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l()),this.O(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t.litHtmlPolyfillSupport;j?.(N,R),(t.litHtmlVersions??=[]).push("3.3.1");
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o=o=>o??E;
+
+/** A symbol through which to access a function used to render a pseudo link. */
+const renderPseudoLink = Symbol("renderPseudoLink");
+/**
+ * Determines whether a value is a `LinkButtonMixin`.
+ * @param {unknown} value The value to test.
+ * @returns {value is LinkButtonMixin} Whether `value` is a `LinkButtonMixin`.
+ */
+function isLinkButtonMixin(value) {
+    return hasKeys(value, "download", "href", "rel", "target");
+}
+const _clickHandler = Symbol("_clickHandler");
+/**
+ * Mixin to augment an element with behavior that supports functioning as a link.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<LinkButtonMixin>} A constructor that implements `LinkButtonMixin`.
+ */
+function LinkButton(base) {
+    var __LinkButtonMixin_instances, __LinkButtonMixin_handleLinkPointerDown, __LinkButtonMixin_handleLinkFocus, __LinkButtonMixin_handleLinkBlur, _a;
+    class _LinkButtonMixin extends base {
+        constructor() {
+            super(...arguments);
+            __LinkButtonMixin_instances.add(this);
+            this[_a] = async (e) => {
+                if (isDisabledInteractiveMixin(this) && this.disabledInteractive) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+                await new Promise((resolve) => resolve());
+                if (e.defaultPrevented) {
+                    return;
+                }
+                if (this.href) {
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                    const link = document.createElement("a");
+                    link.href = this.href;
+                    link.rel = this.rel;
+                    link.target = this.target;
+                    if (this.download != null) {
+                        link.download = this.download;
+                    }
+                    link.addEventListener("click", async () => {
+                        await new Promise((resolve) => resolve());
+                        link.remove();
+                    });
+                    document.body.appendChild(link);
+                    link.click();
+                }
+            };
+            this.href = "";
+            this.target = "";
+            this.rel = "";
+        }
+        get download() {
+            return this.getAttribute("download");
+        }
+        set download(value) {
+            const old = this.download;
+            if (old !== value) {
+                if (value) {
+                    this.setAttribute("download", value);
+                }
+                else {
+                    this.removeAttribute("download");
+                }
+                this.requestUpdate("download", old);
+            }
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener("click", this[_clickHandler]);
+            if (this.hasAttribute("href") && this.role === "button") {
+                this.role = "link";
+            }
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.removeEventListener("click", this[_clickHandler]);
+        }
+        [(__LinkButtonMixin_instances = new WeakSet(), _a = _clickHandler, renderPseudoLink)]() {
+            const disabled = isDisabledMixin(this) && this.disabled;
+            const disabledInteractive = isDisabledInteractiveMixin(this) && this.disabledInteractive;
+            return !disabled && !disabledInteractive && this.href
+                ? html `<a
+            href="${this.href}"
+            target="${o(this.target || undefined)}"
+            rel="${o(this.rel || undefined)}"
+            download="${o(this.download || undefined)}"
+            tabindex="-1"
+            aria-hidden="true"
+            @pointerdown="${__classPrivateFieldGet(this, __LinkButtonMixin_instances, "m", __LinkButtonMixin_handleLinkPointerDown)}"
+            @focus="${__classPrivateFieldGet(this, __LinkButtonMixin_instances, "m", __LinkButtonMixin_handleLinkFocus)}"
+            @blur="${__classPrivateFieldGet(this, __LinkButtonMixin_instances, "m", __LinkButtonMixin_handleLinkBlur)}"
+          ></a>`
+                : nothing;
+        }
+    }
+    __LinkButtonMixin_handleLinkPointerDown = function __LinkButtonMixin_handleLinkPointerDown(e) {
+        if (e.button !== 2) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            this.dispatchEvent(new MouseEvent("click", {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            }));
+        }
+        else {
+            e.target.removeAttribute("aria-hidden");
+        }
+    }, __LinkButtonMixin_handleLinkFocus = function __LinkButtonMixin_handleLinkFocus(e) {
+        e.target.blur();
+        this.focus();
+    }, __LinkButtonMixin_handleLinkBlur = function __LinkButtonMixin_handleLinkBlur(e) {
+        e.target.setAttribute("aria-hidden", "true");
+    };
+    __decorate([
+        n$1()
+    ], _LinkButtonMixin.prototype, "href", void 0);
+    __decorate([
+        n$1()
+    ], _LinkButtonMixin.prototype, "target", void 0);
+    __decorate([
+        n$1()
+    ], _LinkButtonMixin.prototype, "rel", void 0);
+    __decorate([
+        n$1({ reflect: false })
+    ], _LinkButtonMixin.prototype, "download", null);
+    return _LinkButtonMixin;
+}
+
+/**
+ * Determines whether a value is a `ReadOnlyMixin`.
+ * @param {unknown} value The value to test.
+ * @returns A value indicating whether `value` is a `ReadOnlyMixin`.
+ */
+function isReadOnlyMixin(value) {
+    return hasKeys(value, "readOnly");
+}
+/**
+ * Mixin to augment an element with behavior that supports a read-only state.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @param {boolean} reflect A value indicating whether the read-only state is reflected as an attribute. The default value is `true`.
+ * @returns {Constructor<ReadOnlyMixin> & T} A constructor that implements `ReadOnlyMixin`.
+ */
+function ReadOnly(base, reflect = true) {
+    class _ReadOnlyMixin extends base {
+        constructor() {
+            super(...arguments);
+            this.readOnly = false;
+        }
+        update(changedProperties) {
+            super.update(changedProperties);
+            if (changedProperties.has("readOnly")) {
+                this.ariaReadOnly = this.readOnly ? "true" : null;
+            }
+        }
+    }
+    __decorate([
+        n$1({ attribute: "readonly", type: Boolean, reflect: reflect })
+    ], _ReadOnlyMixin.prototype, "readOnly", void 0);
+    return _ReadOnlyMixin;
+}
+
+/**
+ * Determines whether a value is a `RequiredMixin`.
+ * @param {unknown} value The value to test.
+ * @returns A value indicating whether `value` is a `RequiredMixin`.
+ */
+function isRequiredMixin(value) {
+    return hasKeys(value, "required", "optional");
+}
+/**
+ * Mixin to augment an element with behavior that supports a required state.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<RequiredMixin> & T} A constructor that implements `RequiredMixin`.
+ */
+function Required(base) {
+    class _RequiredMixin extends base {
+        constructor() {
+            super(...arguments);
+            this.required = false;
+        }
+        get optional() {
+            return !this.required;
+        }
+        update(changedProperties) {
+            super.update(changedProperties);
+            if (changedProperties.has("required")) {
+                this.ariaRequired = `${this.required}`;
+            }
+        }
+    }
+    __decorate([
+        n$1({ type: Boolean, reflect: true })
+    ], _RequiredMixin.prototype, "required", void 0);
+    return _RequiredMixin;
+}
+
+/**
+ * Determines whether a value is a `RequiredConstraintValidationMixin`.
+ * @param {unknown} value The value to test.
+ * @returns A value indicating whether `value` is a `RequiredConstraintValidationMixin`.
+ */
+function isRequiredConstraintValidationMixin(value) {
+    return isRequiredMixin(value) && isConstraintValidationMixin(value);
+}
+/**
+ * Mixin to augment an element with behavior that supports a required state.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<RequiredConstraintValidationMixin> & T} A constructor that implements `RequiredConstraintValidationMixin`.
+ */
+function RequiredConstraintValidation(base) {
+    class _RequiredConstraintValidation extends base {
+        [validate]() {
+            const validity = super[validate]();
+            if (!validity && this.required) {
+                if (isCheckedMixin(this) && !this.checked) {
+                    return { valueMissing: true };
+                }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (!this.value) {
+                    return { valueMissing: true };
+                }
+            }
+            return validity;
+        }
+    }
+    return _RequiredConstraintValidation;
+}
+
+/**
+ * Mixin to augment an element with an ARIA role.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @param {ARIARole} role The ARIA role.
+ * @returns {Constructor & T} A constructor that implements focusable behavior.
+ */
+function Role(base, role) {
+    class _RoleMixin extends base {
+        connectedCallback() {
+            this.role = this.role || role;
+            super.connectedCallback();
+        }
+    }
+    return _RoleMixin;
+}
+
+/**
+ * Determines whether a value is a `VerticalMixin`.
+ * @param {unknown} value The value to test.
+ * @returns A value indicating whether `value` is a `VerticalMixin`.
+ */
+function isVerticalMixin(value) {
+    return hasKeys(value, "vertical");
+}
+/**
+ * Mixin to augment an element with behavior that supports a vertical orientation.
+ * @template T The type of the base class.
+ * @param {T} base The base class.
+ * @returns {Constructor<VerticalMixin> & T} A constructor that implements `VerticalMixin`.
+ */
+function Vertical(base) {
+    class _VerticalMixin extends base {
+        constructor() {
+            super(...arguments);
+            this.vertical = false;
+        }
+        update(changedProperties) {
+            super.update(changedProperties);
+            if (changedProperties.has("vertical")) {
+                this.ariaOrientation = this.vertical ? "vertical" : "horizontal";
+            }
+        }
+    }
+    __decorate([
+        n$1({ type: Boolean, reflect: true })
+    ], _VerticalMixin.prototype, "vertical", void 0);
+    return _VerticalMixin;
+}
+
+/**
+ * Gets the text content of a given node, including slotted content.
+ * @param {Node} node The node for which to get text content.
+ * @param {boolean} [trim = false] A value indicating whether to trim content.
+ * @returns {string} The text content of `node`.
+ */
+function getTextContent(node, trim = false) {
+    let textContent = "";
+    switch (node.nodeType) {
+        case Node.TEXT_NODE:
+            textContent = node.nodeValue ?? "";
+            break;
+        case Node.ELEMENT_NODE:
+            if (node instanceof HTMLSlotElement) {
+                for (const assignedNode of node.assignedNodes({ flatten: true })) {
+                    textContent += getTextContent(assignedNode, trim);
+                }
+            }
+            else {
+                for (const child of node.childNodes) {
+                    textContent += getTextContent(child, trim);
+                }
+            }
+            break;
+    }
+    if (trim) {
+        textContent = textContent.trim();
+    }
+    return textContent;
+}
+
+/**
+ * Generates a new globally unique identifier (GUID).
+ * @returns {string} A new globally unique identifier.
+ */
+function guid() {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+        const r = (Math.random() * 16) | 0;
+        const v = c === "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}
+
+/**
+ * Determines whether a slot has any assigned nodes.
+ * @param {HTMLSlotElement} slot The slot to test.
+ * @returns {boolean} Whether `slot` has any assigned nodes.
+ */
+function hasAssignedNodes(slot) {
+    return slot.assignedNodes({ flatten: true }).length > 0;
+}
+
+/**
+ * Determines whether reduced motion is preferred.
+ * @returns {boolean} Whether reduced motion is preferred.
+ */
+function prefersReducedMotion() {
+    return isServer || matchMedia("(prefers-reduced-motion)").matches;
+}
+
+/**
+ * If needed, scrolls an element into view within a given scroll container.
+ * @param {HTMLElement} element The element to scroll into view.
+ * @param {HTMLElement} scrollContainer The scrollable container.
+ * @param {ScrollBehavior} [behavior="auto"] The scroll behavior.
+ */
+function scrollIntoViewIfNeeded(element, scrollContainer, behavior = "auto") {
+    const containerRect = scrollContainer.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    if (elementRect.top < containerRect.top || elementRect.bottom > containerRect.bottom) {
+        element.scrollIntoView({ block: "nearest", behavior: behavior });
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
+var _M3eCollapsibleElement_instances, _M3eCollapsibleElement_slotChanged, _M3eCollapsibleElement_hasOpened, _M3eCollapsibleElement_handleSlotChange, _M3eCollapsibleElement_autoSize, _M3eCollapsibleElement_clearSize, _M3eCollapsibleElement_actualSize;
+/**
+ * A container used to expand and collapse content.
+ *
+ * @example
+ * ```html
+ * <m3e-collapsible>
+ *  <!-- Collapsible content -->
+ * </m3e-collapsible>
+ * ```
+ *
+ * @tag m3e-collapsible
+ *
+ * @slot - Renders the collapsible content.
+ *
+ * @attr open - Whether content is visible.
+ *
+ * @fires opening - Emitted when the collapsible begins to open.
+ * @fires opened - Emitted when the collapsible has opened.
+ * @fires closing - Emitted when the collapsible begins to close.
+ * @fires closed - Emitted when the collapsible has closed.
+ *
+ * @cssprop --m3e-collapsible-animation-duration - The duration of the expand / collapse animation.
+ */
+let M3eCollapsibleElement = class M3eCollapsibleElement extends EventAttribute(Role(LitElement, "none"), "opening", "opened", "closing", "closed") {
+    constructor() {
+        super(...arguments);
+        _M3eCollapsibleElement_instances.add(this);
+        /** @private */ _M3eCollapsibleElement_slotChanged.set(this, false);
+        /** @private */ _M3eCollapsibleElement_hasOpened.set(this, false);
+        /**
+         * Whether content is visible.
+         * @default false
+         */
+        this.open = false;
+    }
+    /** @inheritdoc */
+    update(changedProperties) {
+        super.update(changedProperties);
+        this.classList.toggle("-no-animate", true);
+        if (!__classPrivateFieldGet(this, _M3eCollapsibleElement_slotChanged, "f")) {
+            if (this.open) {
+                __classPrivateFieldSet(this, _M3eCollapsibleElement_hasOpened, true, "f");
+                __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_autoSize).call(this);
+            }
+            __classPrivateFieldSet(this, _M3eCollapsibleElement_slotChanged, true, "f");
+            return;
+        }
+        this.toggleAttribute("inert", !this.open);
+        if (this.open) {
+            __classPrivateFieldSet(this, _M3eCollapsibleElement_hasOpened, true, "f");
+            this.classList.toggle("-closing", false);
+            this.classList.toggle("-opening", true);
+            this.dispatchEvent(new Event("opening"));
+            __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
+            this.classList.toggle("-no-animate", false);
+            __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_actualSize).call(this);
+            if (prefersReducedMotion()) {
+                this.classList.toggle("-opening", false);
+                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);
+                        this.dispatchEvent(new Event("opened"));
+                    }
+                }, { once: true });
+            }
+        }
+        else {
+            this.classList.toggle("-opening", false);
+            this.classList.toggle("-closing", true);
+            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);
+            }
+            if (prefersReducedMotion()) {
+                __classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_clearSize).call(this);
+                this.classList.toggle("-closing", false);
+                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);
+                            this.dispatchEvent(new Event("closed"));
+                        }
+                    }, { once: true });
+                });
+            }
+        }
+    }
+    /** @inheritdoc */
+    render() {
+        return html `<slot @slotchange="${__classPrivateFieldGet(this, _M3eCollapsibleElement_instances, "m", _M3eCollapsibleElement_handleSlotChange)}"></slot>`;
+    }
+};
+_M3eCollapsibleElement_slotChanged = new WeakMap();
+_M3eCollapsibleElement_hasOpened = new WeakMap();
+_M3eCollapsibleElement_instances = new WeakSet();
+_M3eCollapsibleElement_handleSlotChange = function _M3eCollapsibleElement_handleSlotChange() {
+    __classPrivateFieldSet(this, _M3eCollapsibleElement_slotChanged, true, "f");
+};
+_M3eCollapsibleElement_autoSize = function _M3eCollapsibleElement_autoSize() {
+    this.style.height = "auto";
+};
+_M3eCollapsibleElement_clearSize = function _M3eCollapsibleElement_clearSize() {
+    this.style.height = "";
+};
+_M3eCollapsibleElement_actualSize = function _M3eCollapsibleElement_actualSize() {
+    this.style.height = `${this.scrollHeight}px`;
+};
+/** The styles of the element. */
+M3eCollapsibleElement.styles = css `
+    :host {
+      display: block;
+      height: 0px;
+      overflow: hidden;
+      transition: ${unsafeCSS(`visibility 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-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([open]) {
+      visibility: visible;
+    }
+    :host(:not([open])) {
+      min-height: unset !important;
+      padding-top: 0px !important;
+      padding-bottom: 0px !important;
+    }
+    :host(.-no-animate) {
+      transition-duration: 0ms;
+    }
+    ::slotted(*) {
+      --m3e-collapsible-animation-duration: initial;
+    }
+    @media (prefers-reduced-motion) {
+      :host {
+        transition: none;
+      }
+    }
+  `;
+__decorate([
+    n$1({ type: Boolean, reflect: true })
+], M3eCollapsibleElement.prototype, "open", void 0);
+M3eCollapsibleElement = __decorate([
+    t$2("m3e-collapsible")
+], M3eCollapsibleElement);
+
+/**
+ * Component design tokens that control the `M3eElevationElement`.
+ * @internal
+ */
+const ElevationToken = {
+    liftDuration: unsafeCSS(`var(--m3e-elevation-lift-duration, ${DesignToken.motion.duration.short4})`),
+    liftEasing: unsafeCSS(`var(--m3e-elevation-lift-easing, ${DesignToken.motion.easing.standard})`),
+    settleDuration: unsafeCSS(`var(--m3e-elevation-settle-duration, ${DesignToken.motion.duration.short3})`),
+    settleEasing: unsafeCSS(`var(--m3e-elevation-settle-easing, ${DesignToken.motion.easing.standardAccelerate})`),
+    level: unsafeCSS(`var(--m3e-elevation-level, ${DesignToken.elevation.level0})`),
+    hoverLevel: unsafeCSS(`var(--m3e-elevation-hover-level, ${DesignToken.elevation.level0})`),
+    focusLevel: unsafeCSS(`var(--m3e-elevation-focus-level, ${DesignToken.elevation.level0})`),
+    pressedLevel: unsafeCSS(`var(--m3e-elevation-pressed-level, ${DesignToken.elevation.level0})`),
+};
+
+var _M3eElevationElement_instances, _M3eElevationElement_hoverController, _M3eElevationElement_focusController, _M3eElevationElement_pressedController, _M3eElevationElement_handleHoverChange, _M3eElevationElement_handleFocusChange, _M3eElevationElement_handlePressedChange;
+/**
+ * @summary
+ * Visually depicts elevation using a shadow.
+ *
+ * @description
+ * The `m3e-elevation` component is an absolute positioned element used to depict elevation using a shadow.
+ * The parenting element must be a relative positioned element and allow for overflow. Use the `level` attribute
+ * to specify the elevation level.
+ *
+ * The component can also be attached to another element using the `for` attribute.  When attached, elevation will
+ * be lifted by 1 level on hover. This can be disabled using the `disabled` attribute.
+ *
+ * Alternately, use the `attach` and `detach` methods to programmatically attach and detach this element to another.
+ *
+ * @example
+ * The following example illustrates basic markup. Note how the parenting element's position is `relative`. A parenting
+ * element's position must be `relative` and overflow must be visible.
+ *
+ * ```html
+ * <div style="position: relative;">
+ *  <m3e-elevation level="1"></m3e-elevation>
+ * <div>
+ * ```
+ * @example
+ * The following example illustrates attaching elevation to an interactive element. In this example, the parenting div
+ * is given an `id` referenced by `m3e-elevation` using the `for` attribute.  Note that `#myDiv` is not used when
+ * specifying the attached element's identifier.  The `#` is inferred.
+ *
+ * ```html
+ * <div id="myDiv" style="position: relative;">
+ *  <m3e-elevation for="myDiv" level="1"></m3e-elevation>
+ * <div>
+ * ```
+ *
+ * @tag m3e-elevation
+ *
+ * @attr disabled - Whether hover and press events will not trigger changes in elevation, when attached to an interactive element.
+ * @attr for - The identifier of the interactive control to which this element is attached.
+ * @attr level - The level at which to visually depict elevation.
+ *
+ * @cssprop --m3e-elevation-color - Color used to depict elevation.
+ * @cssprop --m3e-elevation-lift-duration - Duration when lifting.
+ * @cssprop --m3e-elevation-lift-easing - Easing curve when lifting.
+ * @cssprop --m3e-elevation-settle-duration - Duration when settling.
+ * @cssprop --m3e-elevation-settle-easing - Easing curve when settling.
+ * @cssprop --m3e-elevation-level - Elevation when resting (box-shadow).
+ * @cssprop --m3e-elevation-hover-level - Elevation on hover (box-shadow).
+ * @cssprop --m3e-elevation-focus-level - Elevation on focus (box-shadow).
+ * @cssprop --m3e-elevation-pressed-level - Elevation on pressed (box-shadow).
+ */
+let M3eElevationElement = class M3eElevationElement extends HtmlFor(Role(LitElement, "none")) {
+    constructor() {
+        super(...arguments);
+        _M3eElevationElement_instances.add(this);
+        /** @private */
+        _M3eElevationElement_hoverController.set(this, new HoverController(this, {
+            target: null,
+            callback: (hovering) => __classPrivateFieldGet(this, _M3eElevationElement_instances, "m", _M3eElevationElement_handleHoverChange).call(this, hovering),
+        }));
+        /** @private */
+        _M3eElevationElement_focusController.set(this, new FocusController(this, {
+            target: null,
+            callback: (focused) => __classPrivateFieldGet(this, _M3eElevationElement_instances, "m", _M3eElevationElement_handleFocusChange).call(this, focused),
+        }));
+        /** @private */
+        _M3eElevationElement_pressedController.set(this, new PressedController(this, {
+            target: null,
+            callback: (pressed) => __classPrivateFieldGet(this, _M3eElevationElement_instances, "m", _M3eElevationElement_handlePressedChange).call(this, pressed),
+        }));
+        /**
+         * Whether hover and press events will not trigger changes in elevation, when attached to an interactive element.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * The level at which to visually depict elevation.
+         * @default null
+         */
+        this.level = null;
+    }
+    /** @inheritdoc */
+    attach(control) {
+        super.attach(control);
+        __classPrivateFieldGet(this, _M3eElevationElement_hoverController, "f").observe(control);
+        __classPrivateFieldGet(this, _M3eElevationElement_focusController, "f").observe(control);
+        __classPrivateFieldGet(this, _M3eElevationElement_pressedController, "f").observe(control);
+    }
+    /** @inheritdoc */
+    detach() {
+        if (this.control) {
+            __classPrivateFieldGet(this, _M3eElevationElement_hoverController, "f").unobserve(this.control);
+            __classPrivateFieldGet(this, _M3eElevationElement_focusController, "f").unobserve(this.control);
+            __classPrivateFieldGet(this, _M3eElevationElement_pressedController, "f").unobserve(this.control);
+        }
+        super.detach();
+    }
+    /** @inheritdoc */
+    connectedCallback() {
+        this.ariaHidden = "true";
+        super.connectedCallback();
+    }
+    /** @inheritdoc */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._shadow?.classList.toggle("hover", false);
+        this._shadow?.classList.toggle("focus", false);
+        this._shadow?.classList.toggle("pressed", false);
+        this._shadow?.classList.toggle("resting", false);
+    }
+    /** @inheritdoc */
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has("disabled") && this.disabled) {
+            this._shadow?.classList.toggle("hover", false);
+            this._shadow?.classList.toggle("focus", false);
+            this._shadow?.classList.toggle("pressed", false);
+            this._shadow?.classList.toggle("resting", true);
+        }
+    }
+    /** @inheritdoc */
+    render() {
+        return html `<div class="shadow"></div>`;
+    }
+};
+_M3eElevationElement_hoverController = new WeakMap();
+_M3eElevationElement_focusController = new WeakMap();
+_M3eElevationElement_pressedController = new WeakMap();
+_M3eElevationElement_instances = new WeakSet();
+_M3eElevationElement_handleHoverChange = function _M3eElevationElement_handleHoverChange(hovering) {
+    if (!this.disabled) {
+        this._shadow?.classList.toggle("hover", hovering);
+        this._shadow?.classList.toggle("resting", !hovering);
+    }
+};
+_M3eElevationElement_handleFocusChange = function _M3eElevationElement_handleFocusChange(focused) {
+    if (!this.disabled) {
+        this._shadow?.classList.toggle("focus", focused);
+    }
+};
+_M3eElevationElement_handlePressedChange = function _M3eElevationElement_handlePressedChange(pressed) {
+    if (!this.disabled) {
+        this._shadow?.classList.toggle("pressed", pressed);
+    }
+};
+/** The styles of the element. */
+M3eElevationElement.styles = css `
+    :host {
+      display: block;
+    }
+    :host,
+    .shadow {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      border-radius: inherit;
+    }
+    .shadow.resting,
+    .shadow.focus,
+    .shadow.pressed {
+      will-change: box-shadow;
+      transition: ${unsafeCSS(`box-shadow ${ElevationToken.settleDuration} ${ElevationToken.settleEasing};`)};
+    }
+    .shadow.hover {
+      will-change: box-shadow;
+      transition: ${unsafeCSS(`box-shadow ${ElevationToken.liftDuration} ${ElevationToken.liftEasing};`)};
+    }
+    .shadow {
+      box-shadow: ${ElevationToken.level};
+    }
+    .shadow.focus {
+      box-shadow: ${ElevationToken.focusLevel};
+    }
+    .shadow.hover {
+      box-shadow: ${ElevationToken.hoverLevel};
+    }
+    .shadow.pressed {
+      box-shadow: ${ElevationToken.pressedLevel};
+    }
+    :host([level="0"]) .shadow {
+      --m3e-elevation-level: ${DesignToken.elevation.level0};
+      --m3e-elevation-hover-level: ${DesignToken.elevation.level1};
+    }
+    :host([level="1"]) .shadow {
+      --m3e-elevation-level: ${DesignToken.elevation.level1};
+      --m3e-elevation-hover-level: ${DesignToken.elevation.level2};
+    }
+    :host([level="2"]) .shadow {
+      --m3e-elevation-level: ${DesignToken.elevation.level2};
+      --m3e-elevation-hover-level: ${DesignToken.elevation.level3};
+    }
+    :host([level="3"]) .shadow {
+      --m3e-elevation-level: ${DesignToken.elevation.level3};
+      --m3e-elevation-hover-level: ${DesignToken.elevation.level4};
+    }
+    :host([level="4"]) .shadow {
+      --m3e-elevation-level: ${DesignToken.elevation.level4};
+      --m3e-elevation-hover-level: ${DesignToken.elevation.level5};
+    }
+    :host([level="5"]) .shadow {
+      --m3e-elevation-level: ${DesignToken.elevation.level5};
+      --m3e-elevation-hover-level: ${ElevationToken.level};
+    }
+    :host([level]) .shadow {
+      --m3e-elevation-focus-level: ${ElevationToken.level};
+      --m3e-elevation-pressed-level: ${ElevationToken.level};
+    }
+    @media (prefers-reduced-motion) {
+      .shadow.resting,
+      .shadow.pressed,
+      .shadow.focus,
+      .shadow.hover {
+        transition: none;
+      }
+    }
+    @media (forced-colors: active) {
+      .shadow {
+        display: none;
+      }
+    }
+  `;
+__decorate([
+    e$1(".shadow")
+], M3eElevationElement.prototype, "_shadow", void 0);
+__decorate([
+    n$1({ type: Boolean, reflect: true })
+], M3eElevationElement.prototype, "disabled", void 0);
+__decorate([
+    n$1({ type: Number, reflect: true })
+], M3eElevationElement.prototype, "level", void 0);
+M3eElevationElement = __decorate([
+    t$2("m3e-elevation")
+], M3eElevationElement);
+
+/**
+ * Component design tokens that control the `M3eFocusRingElement`.
+ * @internal
+ */
+const FocusRingToken = {
+    /** The color of the focus ring. */
+    color: unsafeCSS(`var(--m3e-focus-ring-color, ${DesignToken.color.secondary})`),
+    /** The duration of the focus ring animation. */
+    duration: unsafeCSS(`var(--m3e-focus-ring-duration, ${DesignToken.motion.duration.long2})`),
+    /** The thickness of the focus ring. */
+    thickness: unsafeCSS(`var(--m3e-focus-ring-thickness, 0.1875rem)`),
+    /** The visibility of the focus ring. */
+    visibility: unsafeCSS(`var(--m3e-focus-ring-visibility, visible)`),
+    /** The factor by which the focus ring grows. */
+    growthFactor: unsafeCSS(`var(--m3e-focus-ring-growth-factor, 2)`),
+};
+
+var _M3eFocusRingElement_instances, _M3eFocusRingElement_focusController, _M3eFocusRingElement_handleFocusChange;
+/**
+ * @summary
+ * A focus ring used to depict a strong focus indicator.
+ *
+ * @description
+ * The `m3e-focus-ring` component is an absolute positioned element used to provide a strong focus indicator.
+ * The parenting element must be a relative positioned focusable element and allow for overflow.
+ *
+ * The component can be attached to an interactive element using the `for` attribute or programmatically using the `attach` method.
+ * The focus ring is displayed when the interactive element receives visible focus and hidden when focus is lost.
+ * This can be disabled using the `disabled` attribute.
+ *
+ * Alternately, you can use the `show` and `hide` methods to programmatically control the focus ring.
+ *
+ * @example
+ * The following example illustrates attaching a focus ring to an interactive element. In this example, the parenting div
+ * has relative positioning and is given an `id` referenced by `m3e-focus-ring` using the `for` attribute.  Note that `#myDiv`
+ * is not used when specifying the attached element's identifier.  The `#` is inferred.
+ *
+ * ```html
+ * <div id="myDiv" tabindex="0" style="position: relative;">
+ *  <m3e-focus-ring for="myDiv"></m3e-focus-ring>
+ * <div>
+ * ```
+ *
+ * @tag m3e-focus-ring
+ *
+ * @attr disabled - Whether the focus events will not trigger the focus ring. Focus rings can be still controlled manually by using the `show` and `hide` methods.
+ * @attr inward - Whether the focus ring animates inward instead of outward.
+ *
+ * @cssprop --m3e-focus-ring-color - The color of the focus ring.
+ * @cssprop --m3e-focus-ring-duration - The duration of the focus ring animation.
+ * @cssprop --m3e-focus-ring-growth-factor - The factor by which the focus ring grows.
+ * @cssprop --m3e-focus-ring-thickness - The thickness of the focus ring.
+ * @cssprop --m3e-focus-ring-visibility - The visibility of the focus ring.
+ */
+let M3eFocusRingElement = class M3eFocusRingElement extends HtmlFor(Role(LitElement, "none")) {
+    constructor() {
+        super(...arguments);
+        _M3eFocusRingElement_instances.add(this);
+        /** @private */
+        _M3eFocusRingElement_focusController.set(this, new FocusController(this, {
+            target: null,
+            callback: (_, focusVisible) => __classPrivateFieldGet(this, _M3eFocusRingElement_instances, "m", _M3eFocusRingElement_handleFocusChange).call(this, focusVisible),
+        }));
+        /**
+         * Whether the focus ring animates inward instead of outward.
+         * @default false
+         */
+        this.inward = false;
+        /**
+         * Whether the focus events will not trigger the focus ring.
+         * Focus rings can be still controlled manually by using the `show` and `hide` methods.
+         * @default false
+         */
+        this.disabled = false;
+    }
+    /** Launches a manual focus ring. */
+    show() {
+        this._outline?.classList.toggle("visible", true);
+    }
+    /** Hides the focus ring. */
+    hide() {
+        this._outline?.classList.toggle("visible", false);
+    }
+    /** @inheritdoc */
+    attach(control) {
+        super.attach(control);
+        __classPrivateFieldGet(this, _M3eFocusRingElement_focusController, "f").observe(control);
+    }
+    /** @inheritdoc */
+    detach() {
+        if (this.control) {
+            __classPrivateFieldGet(this, _M3eFocusRingElement_focusController, "f").unobserve(this.control);
+        }
+        super.detach();
+    }
+    /** @inheritdoc */
+    connectedCallback() {
+        this.ariaHidden = "true";
+        super.connectedCallback();
+    }
+    /** @inheritdoc */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.hide();
+    }
+    /** @inheritdoc */
+    render() {
+        return html `<div class="outline"></div>`;
+    }
+    /** @inheritdoc */
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has("disabled") && this.disabled) {
+            this.hide();
+        }
+    }
+};
+_M3eFocusRingElement_focusController = new WeakMap();
+_M3eFocusRingElement_instances = new WeakSet();
+_M3eFocusRingElement_handleFocusChange = function _M3eFocusRingElement_handleFocusChange(focusVisible) {
+    if (!this.disabled) {
+        if (focusVisible) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+};
+/** 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: calc(${FocusRingToken.thickness} / ${FocusRingToken.growthFactor});
+    }
+    :host([inward]) .outline {
+      outline-offset: calc(0px - ${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(0px - 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([
+    e$1(".outline")
+], M3eFocusRingElement.prototype, "_outline", void 0);
+__decorate([
+    n$1({ type: Boolean, reflect: true })
+], M3eFocusRingElement.prototype, "inward", void 0);
+__decorate([
+    n$1({ type: Boolean, reflect: true })
+], M3eFocusRingElement.prototype, "disabled", void 0);
+M3eFocusRingElement = __decorate([
+    t$2("m3e-focus-ring")
+], M3eFocusRingElement);
+
+/**
+ * @summary
+ * An element which looks like a checkbox.
+ *
+ * @description
+ * The `m3e-pseudo-checkbox` component is a pseudo-checkbox supporting checked, indeterminate, and disabled
+ * states. It is customizable via CSS properties for expressive, accessible UI design.
+ *
+ * @example
+ * The following example illustrates how to render a checked pseudo-checkbox.
+ * ```html
+ * <m3e-pseudo-checkbox checked></m3e-pseudo-checkbox>
+ * ```
+ *
+ * @tag m3e-pseudo-checkbox
+ *
+ * @attr checked - A value indicating whether the element is checked.
+ * @attr disabled - A value indicating whether the element is disabled.
+ * @attr indeterminate - A value indicating whether the element's checked state is indeterminate.
+ *
+ * @cssprop --m3e-checkbox-icon-size - Size of the checkbox icon.
+ * @cssprop --m3e-checkbox-container-shape - Border radius of the checkbox container.
+ * @cssprop --m3e-checkbox-unselected-outline-thickness - Outline thickness for unselected state.
+ * @cssprop --m3e-checkbox-unselected-outline-color - Outline color for unselected state.
+ * @cssprop --m3e-checkbox-selected-container-color - Background color for selected state.
+ * @cssprop --m3e-checkbox-selected-icon-color - Icon color for selected state.
+ * @cssprop --m3e-checkbox-unselected-disabled-outline-color - Outline color for unselected disabled state.
+ * @cssprop --m3e-checkbox-unselected-disabled-outline-opacity - Outline opacity for unselected disabled state.
+ * @cssprop --m3e-checkbox-selected-disabled-container-color - Background color for selected disabled state.
+ * @cssprop --m3e-checkbox-selected-disabled-container-opacity - Background opacity for selected disabled state.
+ * @cssprop --m3e-checkbox-selected-disabled-icon-color - Icon color for selected disabled state.
+ * @cssprop --m3e-checkbox-selected-disabled-icon-opacity - Icon opacity for selected disabled state.
+ */
+let M3ePseudoCheckboxElement = class M3ePseudoCheckboxElement extends CheckedIndeterminate(Disabled(Role(LitElement, "none"))) {
+    /** @inheritdoc */
+    connectedCallback() {
+        super.connectedCallback();
+        this.ariaHidden = "true";
+    }
+    /** @inheritdoc */
+    render() {
+        if (this.indeterminate) {
+            return html `<svg viewBox="0 -960 960 960" fill="currentColor">
+        <path Required d="M240-440v-80h480v80H240Z" />
+      </svg>`;
+        }
+        if (this.checked) {
+            return html `<svg viewBox="0 -960 960 960" fill="currentColor">
+        <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
+      </svg>`;
+        }
+        return nothing;
+    }
+};
+/** 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, 0.125rem);
+      box-sizing: border-box;
+      flex: none;
+    }
+    :host(:not([checked]):not([indeterminate])) {
+      border-width: var(--m3e-checkbox-unselected-outline-thickness, 0.125rem);
+      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([
+    t$2("m3e-pseudo-checkbox")
+], M3ePseudoCheckboxElement);
+
+/**
+ * @summary
+ * An element which looks like a radio button.
+ *
+ * @description
+ * The `m3e-pseudo-radio` component is a pseudo-radio supporting checked and disabled
+ * states. It is customizable via CSS properties for expressive, accessible UI design.
+ *
+ * @example
+ * The following example illustrates how to render a checked pseudo-radio.
+ * ```html
+ * <m3e-pseudo-radio checked></m3e-pseudo-radio>
+ * ```
+ *
+ * @tag m3e-pseudo-radio
+ *
+ * @attr checked - A value indicating whether the element is checked.
+ * @attr disabled - A value indicating whether the element is disabled.
+ *
+ * @cssprop --m3e-radio-icon-size - Size of the radio icon.
+ * @cssprop --m3e-radio-unselected-icon-color - Color of the unselected radio icon.
+ * @cssprop --m3e-radio-selected-icon-color - Color of the selected radio icon.
+ * @cssprop --m3e-radio-disabled-icon-color - Color of the disabled radio icon.
+ */
+let M3ePseudoRadioElement = class M3ePseudoRadioElement extends Checked(Disabled(Role(LitElement, "none"))) {
+    /** @inheritdoc */
+    connectedCallback() {
+        super.connectedCallback();
+        this.ariaHidden = "true";
+    }
+    /** @inheritdoc */
+    render() {
+        return html `<svg class="icon" viewBox="0 0 20 20">
+      <mask id="cutout2">
+        <rect width="100%" height="100%" fill="white"></rect>
+        <circle cx="10" cy="10" r="8" fill="black"></circle>
+      </mask>
+      <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout2)"></circle>
+      <circle class="inner circle" cx="10" cy="10" r="5"></circle>
+    </svg>`;
+    }
+};
+/** 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([
+    t$2("m3e-pseudo-radio")
+], M3ePseudoRadioElement);
+
+/**
+ * Component design tokens that control the `M3eRippleElement`.
+ * @internal
+ */
+const RippleToken = {
+    color: unsafeCSS(`var(--m3e-ripple-color, ${DesignToken.color.onSurface})`),
+    opacity: unsafeCSS(`var(--m3e-ripple-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+    enterDuration: unsafeCSS(`var(--m3e-ripple-enter-duration, ${DesignToken.motion.duration.long4})`),
+    exitDuration: unsafeCSS(`var(--m3e-ripple-exit-duration, ${DesignToken.motion.duration.short2})`),
+    scaleFactor: unsafeCSS(`var(--m3e-ripple-scale-factor, 2.5)`),
+};
+
+var _M3eRippleElement_instances, _M3eRippleElement_ripple, _M3eRippleElement_pressedController, _M3eRippleElement_destroyRipple, _M3eRippleElement_handleAnimationEnd, _M3eRippleElement_handlePressedChange;
+/**
+ * @summary
+ * Connects user input to screen reactions using ripples.
+ *
+ * @description
+ * The `m3e-ripple` component is an absolute positioned element used to depict a ripple.
+ * The parenting element must be a relative positioned element.
+ *
+ * The component can be attached to an interactive element using the `for` attribute or programmatically using the `attach` method.
+ * The ripple is displayed when the interactive element is pressed and hidden when released.  This can be disabled using the `disabled` attribute.
+ *
+ * The pressed state actives either using both pointer and keyboard events. For keyboard events, `SPACE` and `ENTER` activate a ripple.
+ * You can disabled whether the `ENTER` key actives a ripple using the `disable-enter` attribute.
+ *
+ * Alternately, you can use the `show` and `hide` methods to programmatically control the ripple.
+ *
+ * @example
+ * The following example illustrates attaching a ripple to an interactive element. In this example, the parenting div
+ * has relative positioning and is given an `id` referenced by `m3e-ripple` using the `for` attribute.  Note that `#myDiv`
+ * is not used when specifying the attached element's identifier.  The `#` is inferred.
+ *
+ * ```html
+ * <div id="myDiv" tabindex="0" style="position: relative;">
+ *  <m3e-ripple for="myDiv"></m3e-ripple>
+ * <div>
+ * ```
+ *
+ * @tag m3e-ripple
+ *
+ * @attr centered - Whether the ripple always originates from the center of the element's bounds, rather than originating from the location of the click event.
+ * @attr disable-enter - Whether the ripple is disabled when the enter key is pressed.
+ * @attr disabled - Whether click events will not trigger the ripple.  Ripples can be still controlled manually by using the `show` and 'hide' methods.
+ * @attr for - The identifier of the interactive control to which this element is attached.
+ * @attr radius - The radius, in pixels, of the ripple.
+ * @attr unbounded - Whether the ripple is visible outside the element's bounds.
+ *
+ * @cssprop --m3e-ripple-color - The color of the ripple.
+ * @cssprop --m3e-ripple-enter-duration - The duration for the enter animation (expansion from point of contact).
+ * @cssprop --m3e-ripple-exit-duration - The duration for the exit animation (fade-out).
+ * @cssprop --m3e-ripple-opacity - The opacity of the ripple.
+ * @cssprop --m3e-ripple-scale-factor - The factor by which to scale the ripple.
+ * @cssprop --m3e-ripple-shape - The shape of the ripple.
+ */
+let M3eRippleElement = class M3eRippleElement extends HtmlFor(Role(LitElement, "none")) {
+    constructor() {
+        super(...arguments);
+        _M3eRippleElement_instances.add(this);
+        /** @private */ _M3eRippleElement_ripple.set(this, null);
+        /** @private */ _M3eRippleElement_pressedController.set(this, new PressedController(this, {
+            target: null,
+            isPressedKey: (key) => key === " " || (!this.disableEnter && key === "Enter"),
+            callback: (pressed, { x, y }) => __classPrivateFieldGet(this, _M3eRippleElement_instances, "m", _M3eRippleElement_handlePressedChange).call(this, pressed, x, y),
+        }));
+        /**
+         * Whether click events will not trigger the ripple.
+         * Ripples can be still controlled manually by using the `show` and 'hide' methods.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Whether the ripple is disabled when the enter key is pressed.
+         * @default false
+         */
+        this.disableEnter = false;
+        /**
+         * Whether the ripple always originates from the center of the element's bounds, rather
+         * than originating from the location of the click event.
+         * @default false
+         */
+        this.centered = false;
+        /**
+         * Whether the ripple is visible outside the element's bounds.
+         * @default false
+         */
+        this.unbounded = false;
+        /**
+         * The radius, in pixels, of the ripple.
+         * @default null
+         */
+        this.radius = null;
+        /**
+         * The element that triggers the ripple when click events are received.
+         * @default null
+         */
+        this.trigger = null;
+    }
+    /** Whether the ripple is currently visible to the user. */
+    get visible() {
+        return __classPrivateFieldGet(this, _M3eRippleElement_ripple, "f") !== null;
+    }
+    /**
+     * Launches a manual ripple.
+     * @param {number} x The x-coordinate, relative to the viewport, at which to present the ripple.
+     * @param {number} y The y-coordinate, relative to the viewport, at which to present the ripple.
+     * @param {boolean} [persistent=false] Whether the ripple will persist until hidden.
+     */
+    show(x, y, persistent = false) {
+        __classPrivateFieldGet(this, _M3eRippleElement_instances, "m", _M3eRippleElement_destroyRipple).call(this);
+        const bounds = this.getBoundingClientRect();
+        if (this.centered) {
+            x = bounds.left + bounds.width / 2;
+            y = bounds.top + bounds.height / 2;
+        }
+        let radius = this.radius;
+        if (!radius || isNaN(radius)) {
+            const distX = Math.max(Math.abs(x - bounds.left), Math.abs(x - bounds.right));
+            const distY = Math.max(Math.abs(y - bounds.top), Math.abs(y - bounds.bottom));
+            radius = Math.sqrt(distX * distX + distY * distY);
+        }
+        const offsetX = x - bounds.left;
+        const offsetY = y - bounds.top;
+        __classPrivateFieldSet(this, _M3eRippleElement_ripple, document.createElement("div"), "f");
+        __classPrivateFieldGet(this, _M3eRippleElement_ripple, "f").classList.add("ripple");
+        if (persistent) {
+            __classPrivateFieldGet(this, _M3eRippleElement_ripple, "f").classList.add("persistent");
+        }
+        __classPrivateFieldGet(this, _M3eRippleElement_ripple, "f").style.left = `${offsetX - radius}px`;
+        __classPrivateFieldGet(this, _M3eRippleElement_ripple, "f").style.top = `${offsetY - radius}px`;
+        __classPrivateFieldGet(this, _M3eRippleElement_ripple, "f").style.width = `${radius * 2}px`;
+        __classPrivateFieldGet(this, _M3eRippleElement_ripple, "f").style.height = `${radius * 2}px`;
+        __classPrivateFieldGet(this, _M3eRippleElement_ripple, "f").addEventListener("animationend", () => __classPrivateFieldGet(this, _M3eRippleElement_instances, "m", _M3eRippleElement_handleAnimationEnd).call(this, persistent), { once: true });
+        __classPrivateFieldGet(this, _M3eRippleElement_ripple, "f").addEventListener("transitionend", () => __classPrivateFieldGet(this, _M3eRippleElement_instances, "m", _M3eRippleElement_destroyRipple).call(this), { once: true });
+        this.shadowRoot?.appendChild(__classPrivateFieldGet(this, _M3eRippleElement_ripple, "f"));
+    }
+    /** Manually hides the ripple. */
+    hide() {
+        __classPrivateFieldGet(this, _M3eRippleElement_ripple, "f")?.classList.add("exit");
+    }
+    /** @inheritdoc */
+    attach(control) {
+        super.attach(control);
+        __classPrivateFieldGet(this, _M3eRippleElement_pressedController, "f").observe(control);
+    }
+    /** @inheritdoc */
+    detach() {
+        if (this.control) {
+            __classPrivateFieldGet(this, _M3eRippleElement_pressedController, "f").unobserve(this.control);
+        }
+        super.detach();
+    }
+    /** @inheritdoc */
+    connectedCallback() {
+        this.ariaHidden = "true";
+        super.connectedCallback();
+    }
+    /** @inheritdoc */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        __classPrivateFieldGet(this, _M3eRippleElement_instances, "m", _M3eRippleElement_destroyRipple).call(this);
+    }
+    /** @inheritdoc */
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has("disabled") && this.disabled) {
+            this.hide();
+        }
+    }
+};
+_M3eRippleElement_ripple = new WeakMap();
+_M3eRippleElement_pressedController = new WeakMap();
+_M3eRippleElement_instances = new WeakSet();
+_M3eRippleElement_destroyRipple = function _M3eRippleElement_destroyRipple() {
+    __classPrivateFieldGet(this, _M3eRippleElement_ripple, "f")?.remove();
+    __classPrivateFieldSet(this, _M3eRippleElement_ripple, null, "f");
+};
+_M3eRippleElement_handleAnimationEnd = function _M3eRippleElement_handleAnimationEnd(persistent) {
+    if (persistent) {
+        __classPrivateFieldGet(this, _M3eRippleElement_ripple, "f")?.classList.add("pressed");
+    }
+    else {
+        this.hide();
+    }
+};
+_M3eRippleElement_handlePressedChange = function _M3eRippleElement_handlePressedChange(pressed, x, y) {
+    if (!this.disabled) {
+        if (pressed) {
+            this.show(x, y, true);
+        }
+        else {
+            this.hide();
+        }
+    }
+};
+/** 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;
+    }
+    .ripple:not(.persistent) {
+      animation: ripple ${RippleToken.enterDuration} linear;
+    }
+    .ripple.persistent {
+      animation: persistent-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 persistent-ripple {
+      to {
+        transform: scale(${RippleToken.scaleFactor});
+      }
+    }
+    @keyframes ripple {
+      to {
+        transform: scale(${RippleToken.scaleFactor});
+      }
+    }
+    @media (prefers-reduced-motion) {
+      .ripple {
+        transform: scale(${RippleToken.scaleFactor});
+      }
+      .ripple:not(.persistent),
+      .ripple.persistent {
+        animation-duration: 90ms;
+      }
+      .ripple.exit {
+        transition-duration: 10ms;
+      }
+    }
+    @media (forced-colors: active) {
+      .ripple {
+        display: none;
+      }
+    }
+  `;
+__decorate([
+    n$1({ type: Boolean, reflect: true })
+], M3eRippleElement.prototype, "disabled", void 0);
+__decorate([
+    n$1({ attribute: "disable-enter", type: Boolean, reflect: true })
+], M3eRippleElement.prototype, "disableEnter", void 0);
+__decorate([
+    n$1({ type: Boolean, reflect: true })
+], M3eRippleElement.prototype, "centered", void 0);
+__decorate([
+    n$1({ type: Boolean, reflect: true })
+], M3eRippleElement.prototype, "unbounded", void 0);
+__decorate([
+    n$1({ type: Number })
+], M3eRippleElement.prototype, "radius", void 0);
+__decorate([
+    n$1()
+], M3eRippleElement.prototype, "trigger", void 0);
+M3eRippleElement = __decorate([
+    t$2("m3e-ripple")
+], M3eRippleElement);
+
+var _M3eScrollContainerElement_scrollHandler;
+/**
+ * @summary
+ * A vertically oriented content container which presents dividers above and below content when scrolled.
+ *
+ * @description
+ * The `m3e-scroll-container` component provides a vertically oriented scrollable container with dynamic
+ * dividers above and below content. Designed according to Material 3 principles, it supports custom scrollbar
+ * thickness, divider styling, and focus ring theming via CSS custom properties.
+ *
+ * @example
+ * This example shows a scrollable container with dividers above and below the content, and thin scrollbars enabled.
+ * ```html
+ * <m3e-scroll-container dividers="above-below" thin>
+ *   <div>Scrollable content goes here</div>
+ * </m3e-scroll-container>
+ * ```
+ *
+ * @tag m3e-scroll-container
+ *
+ * @slot - Renders the scrollable content.
+ *
+ * @attr dividers - The dividers used to separate scrollable content.
+ * @attr thin - Whether to present thin scrollbars.
+ *
+ * @cssprop --m3e-divider-thickness - Thickness of the divider lines above and below content.
+ * @cssprop --m3e-divider-color - Color of the divider lines when visible.
+ * @cssprop --m3e-focus-ring-color - Color of the focus ring outline.
+ * @cssprop --m3e-focus-ring-thickness - Thickness of the focus ring outline.
+ * @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 Role(LitElement, "none") {
+    constructor() {
+        super(...arguments);
+        /** @private */ _M3eScrollContainerElement_scrollHandler.set(this, () => this._updateScroll());
+        /**
+         * The dividers used to separate scrollable content.
+         * @default "above-below"
+         */
+        this.dividers = "above-below";
+        /**
+         * Whether to present thin scrollbars.
+         * @default false
+         */
+        this.thin = false;
+    }
+    /** @inheritdoc */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("scroll", __classPrivateFieldGet(this, _M3eScrollContainerElement_scrollHandler, "f"));
+    }
+    /** @inheritdoc */
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has("dividers")) {
+            this.removeEventListener("scroll", __classPrivateFieldGet(this, _M3eScrollContainerElement_scrollHandler, "f"));
+            if (this.dividers !== "none") {
+                this.addEventListener("scroll", __classPrivateFieldGet(this, _M3eScrollContainerElement_scrollHandler, "f"));
+            }
+        }
+    }
+    /** @inheritdoc */
+    render() {
+        return html `<slot @slotchange="${this._updateScroll}"></slot>`;
+    }
+    /** @private */
+    _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);
+    }
+};
+_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: var(--m3e-focus-ring-color, ${DesignToken.color.secondary});
+      outline-width: var(--m3e-focus-ring-thickness, 0.25rem);
+      outline-offset: calc(var(--m3e-focus-ring-thickness, 0.25rem) / 2);
+    }
+    :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 var(--m3e-focus-ring-duration, ${DesignToken.motion.duration.long2});
+    }
+    @keyframes grow-shrink {
+      50% {
+        outline-width: calc(var(--m3e-focus-ring-thickness, 0.25rem) * var(--m3e-focus-ring-factor, 2));
+      }
+    }
+    @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;
+      }
+    }
+  `;
+__decorate([
+    n$1()
+], M3eScrollContainerElement.prototype, "dividers", void 0);
+__decorate([
+    n$1({ type: Boolean, reflect: true })
+], M3eScrollContainerElement.prototype, "thin", void 0);
+__decorate([
+    debounce(40)
+], M3eScrollContainerElement.prototype, "_updateScroll", null);
+M3eScrollContainerElement = __decorate([
+    t$2("m3e-scroll-container")
+], M3eScrollContainerElement);
+
+var _M3eSlide_instances, _M3eSlide_updateItems;
+/**
+ * A carousel-like container used to horizontally cycle through slotted items.
+ *
+ * @example
+ * The following example illustrates the use of `m3e-slide` to cycle through content.
+ * In this example, `selected-index` is set to `1` so that "Content at index 1" is presented
+ * by the component.
+ * ```html
+ * <m3e-slide selected-index="1">
+ *  <div>Content at index 0</div>
+ *  <div>Content at index 1</div>
+ *  <div>Content at index 2</div>
+ *  <div>Content at index 3</div>
+ * </m3e-slide>
+ * ```
+ *
+ * @tag m3e-slide
+ *
+ * @attr selected-index - The zero-based index of the visible item.
+ *
+ * @cssprop --m3e-slide-animation-duration - The duration of transitions between slotted items.
+ */
+let M3eSlide = class M3eSlide extends Role(LitElement, "none") {
+    constructor() {
+        super(...arguments);
+        _M3eSlide_instances.add(this);
+        /**
+         * The zero-based index of the visible item.
+         * @default null
+         */
+        this.selectedIndex = null;
+    }
+    /** @inheritdoc */
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.toggle("-no-animate", true);
+    }
+    /** @inheritdoc */
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has("selectedIndex")) {
+            if (this.selectedIndex === null) {
+                this.classList.toggle("-no-animate", true);
+            }
+            __classPrivateFieldGet(this, _M3eSlide_instances, "m", _M3eSlide_updateItems).call(this);
+            if (this.selectedIndex !== null && this.classList.contains("-no-animate")) {
+                requestAnimationFrame(() => {
+                    if (this.selectedIndex !== null) {
+                        this.classList.toggle("-no-animate", false);
+                    }
+                });
+            }
+        }
+    }
+    /** @inheritdoc */
+    render() {
+        return html `<slot @slotchange="${__classPrivateFieldGet(this, _M3eSlide_instances, "m", _M3eSlide_updateItems)}"></slot>`;
+    }
+};
+_M3eSlide_instances = new WeakSet();
+_M3eSlide_updateItems = function _M3eSlide_updateItems() {
+    const selectedIndex = this.selectedIndex ?? this._items.length;
+    for (let i = 0; i < this._items.length; i++) {
+        const item = this._items[i];
+        item.classList.toggle("-before", i < selectedIndex);
+        item.classList.toggle("-after", i > selectedIndex);
+        item.toggleAttribute("inert", i !== selectedIndex);
+    }
+};
+/** The styles of the element. */
+M3eSlide.styles = css `
+    :host {
+      display: flex;
+      position: relative;
+      overflow: hidden;
+    }
+    ::slotted(*) {
+      width: 100%;
+      top: 0;
+      transition: ${unsafeCSS(`left 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) {
+      left: -100%;
+    }
+    ::slotted(.-after) {
+      left: 100%;
+    }
+    ::slotted(:not(.-before):not(.-after)) {
+      visibility: visible;
+      position: relative;
+      left: 0;
+    }
+    :host(.-no-animate) ::slotted(*) {
+      transition: none;
+    }
+    @media (prefers-reduced-motion) {
+      ::slotted(*) {
+        transition: none;
+      }
+    }
+  `;
+__decorate([
+    o$2({ flatten: true })
+], M3eSlide.prototype, "_items", void 0);
+__decorate([
+    n$1({ attribute: "selected-index", type: Number, reflect: true })
+], M3eSlide.prototype, "selectedIndex", void 0);
+M3eSlide = __decorate([
+    t$2("m3e-slide")
+], M3eSlide);
+
+/**
+ * Component design tokens that control the `M3eStateLayerElement`.
+ * @internal
+ */
+const StateLayerToken = {
+    hoverColor: unsafeCSS(`var(--m3e-state-layer-hover-color, ${DesignToken.color.onSurface})`),
+    hoverOpacity: unsafeCSS(`var(--m3e-state-layer-hover-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+    focusColor: unsafeCSS(`var(--m3e-state-layer-focus-color, ${DesignToken.color.onSurface})`),
+    focusOpacity: unsafeCSS(`var(--m3e-state-layer-focus-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+    duration: unsafeCSS(`var(--m3e-state-layer-duration, ${DesignToken.motion.duration.medium1})`),
+    easing: unsafeCSS(`var(--m3e-state-layer-easing, ${DesignToken.motion.easing.standard})`),
+};
+
+var _M3eStateLayerElement_instances, _M3eStateLayerElement_hoverController, _M3eStateLayerElement_focusController, _M3eStateLayerElement_handleHoverChange, _M3eStateLayerElement_handleFocusChange;
+/**
+ * @summary
+ * Provides focus and hover state layer treatment for an interactive element.
+ *
+ * @description
+ * The `m3e-state-layer` component is an absolute positioned element used to depict hover and focus overlays.
+ * The parenting element must be a relative positioned element.
+ *
+ * This element can be attached to an interactive element using the `for` attribute or programmatically using the `attach` method.
+ * The state layer is displayed when the interactive element is either hovered or focused.  This can be disabled using
+ * the `disabled` attribute.
+ *
+ * @example
+ * The following example illustrates attaching a state layer to an interactive element. In this example, the parenting div
+ * has relative positioning and is given an `id` referenced by `m3e-state-layer` using the `for` attribute.  Note that `#myDiv`
+ * is not used when specifying the attached element's identifier.  The `#` is inferred.
+ *
+ * ```html
+ * <div id="myDiv" tabindex="0" style="position: relative;">
+ *  <m3e-state-layer for="myDiv"></m3e-state-layer>
+ * <div>
+ * ```
+ *
+ * @tag m3e-state-layer
+ *
+ * @attr disabled - Whether hover and focus event will not trigger the state layer.Whether hover and focus event will not trigger the state layer. State layers can still be controlled manually using the `show` and `hide` methods.
+ *
+ * @cssprop --m3e-state-layer-duration - Duration of state layer changes.
+ * @cssprop --m3e-state-layer-easing - Easing curve of state layer changes.
+ * @cssprop --m3e-state-layer-focus-color - Color on hover.
+ * @cssprop --m3e-state-layer-focus-opacity - Opacity on focus.
+ * @cssprop --m3e-state-layer-hover-color - Color on hover.
+ * @cssprop --m3e-state-layer-hover-opacity - Opacity on hover.
+ */
+let M3eStateLayerElement = class M3eStateLayerElement extends HtmlFor(Role(LitElement, "none")) {
+    constructor() {
+        super(...arguments);
+        _M3eStateLayerElement_instances.add(this);
+        /** @private */
+        _M3eStateLayerElement_hoverController.set(this, new HoverController(this, {
+            target: null,
+            callback: (hovering) => __classPrivateFieldGet(this, _M3eStateLayerElement_instances, "m", _M3eStateLayerElement_handleHoverChange).call(this, hovering),
+        }));
+        /** @private */
+        _M3eStateLayerElement_focusController.set(this, new FocusController(this, {
+            target: null,
+            callback: (focused) => __classPrivateFieldGet(this, _M3eStateLayerElement_instances, "m", _M3eStateLayerElement_handleFocusChange).call(this, focused),
+        }));
+        /**
+         * Whether hover and focus event will not trigger the state layer. State layers can still
+         * be controlled manually using the `show` and `hide` methods.
+         * @default false
+         */
+        this.disabled = false;
+    }
+    /**
+     * Launches a manual state layer.
+     * @param {"hover" | "focused"} state The state of the layer to show.
+     */
+    show(state) {
+        this._layer?.classList.toggle(state, true);
+    }
+    /**
+     * Hides the state layer.
+     * @param {"hover" | "focused"} state The state of the layer to hide.
+     */
+    hide(state) {
+        this._layer?.classList.toggle(state, false);
+    }
+    /** @inheritdoc */
+    attach(control) {
+        super.attach(control);
+        __classPrivateFieldGet(this, _M3eStateLayerElement_hoverController, "f").observe(control);
+        __classPrivateFieldGet(this, _M3eStateLayerElement_focusController, "f").observe(control);
+    }
+    /** @inheritdoc */
+    detach() {
+        if (this.control) {
+            __classPrivateFieldGet(this, _M3eStateLayerElement_hoverController, "f").unobserve(this.control);
+            __classPrivateFieldGet(this, _M3eStateLayerElement_focusController, "f").unobserve(this.control);
+        }
+        super.detach();
+    }
+    /** @inheritdoc */
+    connectedCallback() {
+        this.ariaHidden = "true";
+        super.connectedCallback();
+    }
+    /** @inheritdoc */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.hide("hover");
+        this.hide("focused");
+    }
+    /** @inheritdoc */
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has("disabled") && this.disabled) {
+            this.hide("hover");
+            this.hide("focused");
+        }
+    }
+    /** @inheritdoc */
+    render() {
+        return html `<div class="layer"></div>`;
+    }
+};
+_M3eStateLayerElement_hoverController = new WeakMap();
+_M3eStateLayerElement_focusController = new WeakMap();
+_M3eStateLayerElement_instances = new WeakSet();
+_M3eStateLayerElement_handleHoverChange = function _M3eStateLayerElement_handleHoverChange(hovering) {
+    if (!this.disabled) {
+        if (hovering) {
+            this.show("hover");
+        }
+        else {
+            this.hide("hover");
+        }
+    }
+};
+_M3eStateLayerElement_handleFocusChange = function _M3eStateLayerElement_handleFocusChange(focused) {
+    if (!this.disabled) {
+        if (focused) {
+            this.show("focused");
+        }
+        else {
+            this.hide("focused");
+        }
+    }
+};
+/** 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;
+      }
+    }
+  `;
+__decorate([
+    e$1(".layer")
+], M3eStateLayerElement.prototype, "_layer", void 0);
+__decorate([
+    n$1({ type: Boolean, reflect: true })
+], M3eStateLayerElement.prototype, "disabled", void 0);
+M3eStateLayerElement = __decorate([
+    t$2("m3e-state-layer")
+], M3eStateLayerElement);
+
+/**
+ * @summary
+ * An inline container which presents an ellipsis when content overflows.
+ *
+ * @description
+ * The `m3e-text-overflow` component truncates inline content with an ellipsis when it
+ * exceeds the available width. It's intended for use inside flex or otherwise
+ * constrained containers to preserve layout while providing predictable, single-line
+ * truncation behavior for long text.
+ *
+ * @example
+ * A typical usage inside a flex container where the heading and trailing actions are
+ * constrained, allowing the center text to truncate with an ellipsis.
+ *
+ * ```html
+ * <div style="display:flex;align-items:center;gap:12px;">
+ *   <m3e-icon name="menu"></m3e-icon>
+ *   <m3e-text-overflow>Very long title or breadcrumb that should truncate gracefully</m3e-text-overflow>
+ *   <m3e-icon name="more_vert"></m3e-icon>
+ * </div>
+ * ```
+ *
+ * @tag m3e-text-overflow
+ *
+ * @slot - Renders the content to truncate with an ellipsis.
+ */
+let M3eTextOverflowElement = class M3eTextOverflowElement extends LitElement {
+    /** @inheritdoc */
+    render() {
+        return html `<span class="base"><slot></slot></span>`;
+    }
+};
+/** 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([
+    t$2("m3e-text-overflow")
+], M3eTextOverflowElement);
+
+export { 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, M3eSlide, M3eStateLayerElement, M3eTextOverflowElement, MutationController, PressedController, ReadOnly, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, Selected, Touched, Vertical, checkOrSelect, debounce, defaultValue, formValue, getTextContent, guid, hasAssignedNodes, hasKeys, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, renderPseudoLink, safeStyleMap, scrollIntoViewIfNeeded, validate };
+//# sourceMappingURL=index.js.map