@material/web 0.1.0-alpha.2 → 1.0.0-pre.1

package/radio/lib/single-selection-controller.js

@@ -1,289 +1,193 @@
 /**
  * @license
- * Copyright 2020 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-// Style preference for leading underscores.
-// tslint:disable:strip-private-property-underscore
 /**
- * Unique symbol for marking roots
- */
-const selectionController = Symbol('selection controller');
-/**
- * Set of checkable elements with added metadata
- */
-export class SingleSelectionSet {
-    constructor() {
-        this.selected = null;
-        this.ordered = null;
-        this.set = new Set();
-    }
-}
-/**
- * Controller that provides behavior similar to a native `<input type="radio">`
- * group.
- *
- * Behaviors:
- *
- * - Selection via key navigation (currently LTR is supported)
- * - Deselection of other grouped, checkable controls upon selection
- * - Grouping of checkable elements by name
- *   - Defaults grouping scope to host shadow root
- *   - Document-wide scoping enabled
- * - Land focus only on checked element. Focuses leading element when none
- *   checked.
+ * A `ReactiveController` that provides root node-scoped single selection for
+ * elements, similar to native `<input type="radio">` selection.
  *
- * Intended Usage:
+ * To use, elements should add the controller and call
+ * `selectionController.handleCheckedChange()` in a getter/setter. This must
+ * be synchronous to match native behavior.
  *
- * ```ts
- * class MyElement extends HTMLElement {
- *   private selectionController: SingleSelectionController | null = null;
- *   name = "";
- *   global = false;
+ * @example
+ * const CHECKED = Symbol('checked');
  *
- *   private _checked = false;
+ * class MyToggle extends LitElement {
+ *   get checked() { return this[CHECKED]; }
  *   set checked(checked: boolean) {
- *     const oldVal = this._checked;
- *     if (checked === oldVal) return;
- *
- *     this._checked = checked;
- *
- *     if (this.selectionController) {
- *       this.selectionController.update(this)
+ *     const oldValue = this.checked;
+ *     if (oldValue === checked) {
+ *       return;
  *     }
- *   }
  *
- *   get checked() {
- *     return this._checked;
+ *     this[CHECKED] = checked;
+ *     this.selectionController.handleCheckedChange();
+ *     this.requestUpdate('checked', oldValue);
  *   }
  *
- *   connectedCallback() {
- *     this.selectionController = SelectionController.getController(this);
- *     this.selectionController.register(this);
- *     this.selectionController.update(this);
- *   }
+ *   [CHECKED] = false;
  *
- *   disconnectedCallback() {
- *     this.selectionController!.unregister(this);
- *     this.selectionController = null;
+ *   private selectionController = new SingleSelectionController(this);
+ *
+ *   constructor() {
+ *     super();
+ *     this.addController(this.selectionController);
  *   }
  * }
- * ```
  */
 export class SingleSelectionController {
-    constructor(element) {
-        this.sets = {};
-        this.focusedSet = null;
-        this.mouseIsDown = false;
-        element.addEventListener('keydown', (e) => {
-            this.keyDownHandler(e);
-        });
-        element.addEventListener('mousedown', () => {
-            this.mousedownHandler();
-        });
-        element.addEventListener('mouseup', () => {
-            this.mouseupHandler();
-        });
-    }
-    /**
-     * Get a controller for the given element. If no controller exists, one will
-     * be created. Defaults to getting the controller scoped to the element's root
-     * node shadow root unless `element.global` is true. Then, it will get a
-     * `window.document`-scoped controller.
-     *
-     * @param element Element from which to get / create a SelectionController. If
-     *     `element.global` is true, it gets a selection controller scoped to
-     *     `window.document`.
-     */
-    static getController(element) {
-        const useGlobal = !('global' in element) || ('global' in element && element.global);
-        const root = useGlobal ? document :
-            element.getRootNode();
-        let controller = root[selectionController];
-        if (controller === undefined) {
-            controller = new SingleSelectionController(root);
-            root[selectionController] = controller;
-        }
-        return controller;
-    }
-    keyDownHandler(e) {
-        const element = e.target;
-        if (!('checked' in element)) {
-            return;
-        }
-        if (!this.has(element)) {
-            return;
-        }
-        if (e.key == 'ArrowRight' || e.key == 'ArrowDown') {
-            this.selectNext(element);
-        }
-        else if (e.key == 'ArrowLeft' || e.key == 'ArrowUp') {
-            this.selectPrevious(element);
+    constructor(host) {
+        this.host = host;
+        this.focused = false;
+        this.root = null;
+        this.handleFocusIn = () => {
+            this.focused = true;
+            this.updateTabIndices();
+        };
+        this.handleFocusOut = () => {
+            this.focused = false;
+            this.updateTabIndices();
+        };
+        /**
+         * Handles arrow key events from the host. Using the arrow keys will
+         * select and check the next or previous sibling with the host's
+         * `name` attribute.
+         */
+        this.handleKeyDown = (event) => {
+            const isDown = event.key === 'ArrowDown';
+            const isUp = event.key === 'ArrowUp';
+            const isLeft = event.key === 'ArrowLeft';
+            const isRight = event.key === 'ArrowRight';
+            // Ignore non-arrow keys
+            if (!isLeft && !isRight && !isDown && !isUp) {
+                return;
+            }
+            // Don't try to select another sibling if there aren't any.
+            const siblings = this.getNamedSiblings();
+            if (!siblings.length) {
+                return;
+            }
+            // Prevent default interactions on the element for arrow keys,
+            // since this controller will introduce new behavior.
+            event.preventDefault();
+            // Check if moving forwards or backwards
+            const isRtl = getComputedStyle(this.host).direction === 'rtl';
+            const forwards = isRtl ? isLeft || isDown : isRight || isDown;
+            const hostIndex = siblings.indexOf(this.host);
+            let nextIndex = forwards ? hostIndex + 1 : hostIndex - 1;
+            // Search for the next sibling that is not disabled to select.
+            // If we return to the host index, there is nothing to select.
+            while (nextIndex !== hostIndex) {
+                if (nextIndex >= siblings.length) {
+                    // Return to start if moving past the last item.
+                    nextIndex = 0;
+                }
+                else if (nextIndex < 0) {
+                    // Go to end if moving before the first item.
+                    nextIndex = siblings.length - 1;
+                }
+                // Check if the next sibling is disabled. If so,
+                // move the index and continue searching.
+                const nextSibling = siblings[nextIndex];
+                if (nextSibling.hasAttribute('disabled')) {
+                    if (forwards) {
+                        nextIndex++;
+                    }
+                    else {
+                        nextIndex--;
+                    }
+                    continue;
+                }
+                // Uncheck and remove focusability from other siblings.
+                for (const sibling of siblings) {
+                    if (sibling !== nextSibling) {
+                        sibling.checked = false;
+                        sibling.tabIndex = -1;
+                    }
+                }
+                // The next sibling should be checked and focused.
+                nextSibling.checked = true;
+                nextSibling.removeAttribute('tabindex');
+                nextSibling.focus();
+                break;
+            }
+        };
+    }
+    hostConnected() {
+        this.root = this.host.getRootNode();
+        this.host.addEventListener('keydown', this.handleKeyDown);
+        this.host.addEventListener('focusin', this.handleFocusIn);
+        this.host.addEventListener('focusout', this.handleFocusOut);
+        if (this.host.checked) {
+            // Uncheck other siblings when attached if already checked. This mimics
+            // native <input type="radio"> behavior.
+            this.uncheckSiblings();
         }
+        // Update for the newly added host.
+        this.updateTabIndices();
     }
-    mousedownHandler() {
-        this.mouseIsDown = true;
-    }
-    mouseupHandler() {
-        this.mouseIsDown = false;
+    hostDisconnected() {
+        this.host.removeEventListener('keydown', this.handleKeyDown);
+        this.host.removeEventListener('focusin', this.handleFocusIn);
+        this.host.removeEventListener('focusout', this.handleFocusOut);
+        // Update for siblings that are still connected.
+        this.updateTabIndices();
+        this.root = null;
     }
     /**
-     * Whether or not the controller controls  the given element.
-     *
-     * @param element element to check
+     * Should be called whenever the host's `checked` property changes
+     * synchronously.
      */
-    has(element) {
-        const set = this.getSet(element.name);
-        return set.set.has(element);
-    }
-    /**
-     * Selects and returns the controlled element previous to the given element in
-     * document position order. See
-     * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
-     *
-     * @param element element relative from which preceding element is fetched
-     */
-    selectPrevious(element) {
-        const order = this.getOrdered(element);
-        const i = order.indexOf(element);
-        const previous = order[i - 1] || order[order.length - 1];
-        this.select(previous);
-        return previous;
-    }
-    /**
-     * Selects and returns the controlled element next to the given element in
-     * document position order. See
-     * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
-     *
-     * @param element element relative from which following element is fetched
-     */
-    selectNext(element) {
-        const order = this.getOrdered(element);
-        const i = order.indexOf(element);
-        const next = order[i + 1] || order[0];
-        this.select(next);
-        return next;
-    }
-    select(element) {
-        element.click();
-    }
-    /**
-     * Focuses the selected element in the given element's selection set. User's
-     * mouse selection will override this focus.
-     *
-     * @param element Element from which selection set is derived and subsequently
-     *     focused.
-     * @deprecated update() method now handles focus management by setting
-     *     appropriate tabindex to form element.
-     */
-    focus(element) {
-        // Only manage focus state when using keyboard
-        if (this.mouseIsDown) {
+    handleCheckedChange() {
+        if (!this.host.checked) {
             return;
         }
-        const set = this.getSet(element.name);
-        const currentFocusedSet = this.focusedSet;
-        this.focusedSet = set;
-        if (currentFocusedSet != set && set.selected && set.selected != element) {
-            set.selected.focus();
-        }
+        this.uncheckSiblings();
+        this.updateTabIndices();
     }
-    /**
-     * @return Returns true if atleast one radio is selected in the radio group.
-     */
-    isAnySelected(element) {
-        const set = this.getSet(element.name);
-        for (const e of set.set) {
-            if (e.checked) {
-                return true;
+    uncheckSiblings() {
+        for (const sibling of this.getNamedSiblings()) {
+            if (sibling !== this.host) {
+                sibling.checked = false;
             }
         }
-        return false;
-    }
-    /**
-     * Returns the elements in the given element's selection set in document
-     * position order.
-     * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
-     *
-     * @param element Element from which selection set is derived and subsequently
-     *     ordered.
-     */
-    getOrdered(element) {
-        const set = this.getSet(element.name);
-        if (!set.ordered) {
-            set.ordered = Array.from(set.set);
-            set.ordered.sort((a, b) => a.compareDocumentPosition(b) == Node.DOCUMENT_POSITION_PRECEDING ?
-                1 :
-                0);
-        }
-        return set.ordered;
     }
     /**
-     * Gets the selection set of the given name and creates one if it does not yet
-     * exist.
-     *
-     * @param name Name of set
+     * Updates the `tabindex` of the host and its siblings.
      */
-    getSet(name) {
-        if (!this.sets[name]) {
-            this.sets[name] = new SingleSelectionSet();
+    updateTabIndices() {
+        // There are three tabindex states for a group of elements:
+        // 1. If any are checked, that element is focusable.
+        const siblings = this.getNamedSiblings();
+        const checkedSibling = siblings.find(sibling => sibling.checked);
+        // 2. If an element is focused, the others are no longer focusable.
+        if (checkedSibling || this.focused) {
+            const focusable = checkedSibling || this.host;
+            focusable.removeAttribute('tabindex');
+            for (const sibling of siblings) {
+                if (sibling !== focusable) {
+                    sibling.tabIndex = -1;
+                }
+            }
+            return;
         }
-        return this.sets[name];
-    }
-    /**
-     * Register the element in the selection controller.
-     *
-     * @param element Element to register. Registers in set of `element.name`.
-     */
-    register(element) {
-        // TODO(b/168546148): Remove accessing 'name' via getAttribute() when new
-        // base class is created without single selection controller. Component
-        // maybe booted up after it is connected to DOM in which case properties
-        // (including `name`) are not updated yet.
-        const name = element.name || element.getAttribute('name') || '';
-        const set = this.getSet(name);
-        set.set.add(element);
-        set.ordered = null;
-    }
-    /**
-     * Unregister the element from selection controller.
-     *
-     * @param element Element to register. Registers in set of `element.name`.
-     */
-    unregister(element) {
-        const set = this.getSet(element.name);
-        set.set.delete(element);
-        set.ordered = null;
-        if (set.selected == element) {
-            set.selected = null;
+        // 3. If none are checked or focused, all are focusable.
+        for (const sibling of siblings) {
+            sibling.removeAttribute('tabindex');
         }
     }
     /**
-     * Unselects other elements in element's set if element is checked. Noop
-     * otherwise.
-     *
-     * @param element Element from which to calculate selection controller update.
+     * Retrieves all siblings in the host element's root with the same `name`
+     * attribute.
      */
-    update(element) {
-        const set = this.getSet(element.name);
-        if (element.checked) {
-            for (const e of set.set) {
-                if (e == element) {
-                    continue;
-                }
-                e.checked = false;
-            }
-            set.selected = element;
-        }
-        // When tabbing through land focus on the checked radio in the group.
-        if (this.isAnySelected(element)) {
-            for (const e of set.set) {
-                if (e.formElementTabIndex === undefined) {
-                    break;
-                }
-                e.formElementTabIndex = e.checked ? 0 : -1;
-            }
+    getNamedSiblings() {
+        const name = this.host.getAttribute('name');
+        if (!name || !this.root) {
+            return [];
         }
+        return Array.from(this.root.querySelectorAll(`[name="${name}"]`));
     }
 }
 //# sourceMappingURL=single-selection-controller.js.map

package/radio/lib/single-selection-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"single-selection-controller.js","sourceRoot":"","sources":["single-selection-controller.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\n/**\n * Unique symbol for marking roots\n */\nconst selectionController = Symbol('selection controller');\n\n/**\n * Set of checkable elements with added metadata\n */\nexport class SingleSelectionSet {\n  selected: CheckableElement|null = null;\n  ordered: CheckableElement[]|null = null;\n  readonly set = new Set<CheckableElement>();\n}\n\n/**\n * Element that is checkable consumed by\n * `SingleSelectionController` and `SingleSelectionSet`\n */\nexport type CheckableElement = HTMLElement&{\n  name: string;\n  checked: boolean;\n  formElementTabIndex?: number;\n};\n\n/**\n * Controller that provides behavior similar to a native `<input type=\"radio\">`\n * group.\n *\n * Behaviors:\n *\n * - Selection via key navigation (currently LTR is supported)\n * - Deselection of other grouped, checkable controls upon selection\n * - Grouping of checkable elements by name\n *   - Defaults grouping scope to host shadow root\n *   - Document-wide scoping enabled\n * - Land focus only on checked element. Focuses leading element when none\n *   checked.\n *\n * Intended Usage:\n *\n * ```ts\n * class MyElement extends HTMLElement {\n *   private selectionController: SingleSelectionController | null = null;\n *   name = \"\";\n *   global = false;\n *\n *   private _checked = false;\n *   set checked(checked: boolean) {\n *     const oldVal = this._checked;\n *     if (checked === oldVal) return;\n *\n *     this._checked = checked;\n *\n *     if (this.selectionController) {\n *       this.selectionController.update(this)\n *     }\n *   }\n *\n *   get checked() {\n *     return this._checked;\n *   }\n *\n *   connectedCallback() {\n *     this.selectionController = SelectionController.getController(this);\n *     this.selectionController.register(this);\n *     this.selectionController.update(this);\n *   }\n *\n *   disconnectedCallback() {\n *     this.selectionController!.unregister(this);\n *     this.selectionController = null;\n *   }\n * }\n * ```\n */\nexport class SingleSelectionController {\n  private readonly sets: {[name: string]: SingleSelectionSet} = {};\n\n  private focusedSet: SingleSelectionSet|null = null;\n\n  private mouseIsDown = false;\n\n  /**\n   * Get a controller for the given element. If no controller exists, one will\n   * be created. Defaults to getting the controller scoped to the element's root\n   * node shadow root unless `element.global` is true. Then, it will get a\n   * `window.document`-scoped controller.\n   *\n   * @param element Element from which to get / create a SelectionController. If\n   *     `element.global` is true, it gets a selection controller scoped to\n   *     `window.document`.\n   */\n  static getController(element: HTMLElement|HTMLElement&{global: boolean}) {\n    const useGlobal =\n        !('global' in element) || ('global' in element && element.global);\n    const root = useGlobal ? document as Document &\n            {[selectionController]?: SingleSelectionController} :\n                             (element as Element).getRootNode() as Node &\n            {[selectionController]?: SingleSelectionController};\n    let controller = root[selectionController];\n    if (controller === undefined) {\n      controller = new SingleSelectionController(root);\n      root[selectionController] = controller;\n    }\n    return controller;\n  }\n\n  constructor(element: Node) {\n    element.addEventListener('keydown', (e: Event) => {\n      this.keyDownHandler(e as KeyboardEvent);\n    });\n    element.addEventListener('mousedown', () => {\n      this.mousedownHandler();\n    });\n    element.addEventListener('mouseup', () => {\n      this.mouseupHandler();\n    });\n  }\n\n  protected keyDownHandler(e: KeyboardEvent) {\n    const element = e.target as EventTarget | CheckableElement;\n    if (!('checked' in element)) {\n      return;\n    }\n    if (!this.has(element)) {\n      return;\n    }\n    if (e.key == 'ArrowRight' || e.key == 'ArrowDown') {\n      this.selectNext(element);\n    } else if (e.key == 'ArrowLeft' || e.key == 'ArrowUp') {\n      this.selectPrevious(element);\n    }\n  }\n\n  protected mousedownHandler() {\n    this.mouseIsDown = true;\n  }\n\n  protected mouseupHandler() {\n    this.mouseIsDown = false;\n  }\n\n  /**\n   * Whether or not the controller controls  the given element.\n   *\n   * @param element element to check\n   */\n  has(element: CheckableElement) {\n    const set = this.getSet(element.name);\n    return set.set.has(element);\n  }\n\n  /**\n   * Selects and returns the controlled element previous to the given element in\n   * document position order. See\n   * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).\n   *\n   * @param element element relative from which preceding element is fetched\n   */\n  selectPrevious(element: CheckableElement) {\n    const order = this.getOrdered(element);\n    const i = order.indexOf(element);\n    const previous = order[i - 1] || order[order.length - 1];\n    this.select(previous);\n\n    return previous;\n  }\n\n  /**\n   * Selects and returns the controlled element next to the given element in\n   * document position order. See\n   * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).\n   *\n   * @param element element relative from which following element is fetched\n   */\n  selectNext(element: CheckableElement) {\n    const order = this.getOrdered(element);\n    const i = order.indexOf(element);\n    const next = order[i + 1] || order[0];\n    this.select(next);\n\n    return next;\n  }\n\n  select(element: CheckableElement) {\n    element.click();\n  }\n\n  /**\n   * Focuses the selected element in the given element's selection set. User's\n   * mouse selection will override this focus.\n   *\n   * @param element Element from which selection set is derived and subsequently\n   *     focused.\n   * @deprecated update() method now handles focus management by setting\n   *     appropriate tabindex to form element.\n   */\n  focus(element: CheckableElement) {\n    // Only manage focus state when using keyboard\n    if (this.mouseIsDown) {\n      return;\n    }\n    const set = this.getSet(element.name);\n    const currentFocusedSet = this.focusedSet;\n    this.focusedSet = set;\n    if (currentFocusedSet != set && set.selected && set.selected != element) {\n      set.selected.focus();\n    }\n  }\n\n  /**\n   * @return Returns true if atleast one radio is selected in the radio group.\n   */\n  isAnySelected(element: CheckableElement): boolean {\n    const set = this.getSet(element.name);\n\n    for (const e of set.set) {\n      if (e.checked) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Returns the elements in the given element's selection set in document\n   * position order.\n   * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).\n   *\n   * @param element Element from which selection set is derived and subsequently\n   *     ordered.\n   */\n  getOrdered(element: CheckableElement) {\n    const set = this.getSet(element.name);\n    if (!set.ordered) {\n      set.ordered = Array.from(set.set);\n      set.ordered.sort(\n          (a, b) =>\n              a.compareDocumentPosition(b) == Node.DOCUMENT_POSITION_PRECEDING ?\n              1 :\n              0);\n    }\n    return set.ordered;\n  }\n\n  /**\n   * Gets the selection set of the given name and creates one if it does not yet\n   * exist.\n   *\n   * @param name Name of set\n   */\n  getSet(name: string): SingleSelectionSet {\n    if (!this.sets[name]) {\n      this.sets[name] = new SingleSelectionSet();\n    }\n    return this.sets[name];\n  }\n\n  /**\n   * Register the element in the selection controller.\n   *\n   * @param element Element to register. Registers in set of `element.name`.\n   */\n  register(element: CheckableElement) {\n    // TODO(b/168546148): Remove accessing 'name' via getAttribute() when new\n    // base class is created without single selection controller. Component\n    // maybe booted up after it is connected to DOM in which case properties\n    // (including `name`) are not updated yet.\n    const name = element.name || element.getAttribute('name') || '';\n    const set = this.getSet(name);\n    set.set.add(element);\n    set.ordered = null;\n  }\n\n  /**\n   * Unregister the element from selection controller.\n   *\n   * @param element Element to register. Registers in set of `element.name`.\n   */\n  unregister(element: CheckableElement) {\n    const set = this.getSet(element.name);\n    set.set.delete(element);\n    set.ordered = null;\n    if (set.selected == element) {\n      set.selected = null;\n    }\n  }\n\n  /**\n   * Unselects other elements in element's set if element is checked. Noop\n   * otherwise.\n   *\n   * @param element Element from which to calculate selection controller update.\n   */\n  update(element: CheckableElement) {\n    const set = this.getSet(element.name);\n    if (element.checked) {\n      for (const e of set.set) {\n        if (e == element) {\n          continue;\n        }\n        e.checked = false;\n      }\n      set.selected = element;\n    }\n\n    // When tabbing through land focus on the checked radio in the group.\n    if (this.isAnySelected(element)) {\n      for (const e of set.set) {\n        if (e.formElementTabIndex === undefined) {\n          break;\n        }\n\n        e.formElementTabIndex = e.checked ? 0 : -1;\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"single-selection-controller.js","sourceRoot":"","sources":["single-selection-controller.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveController} from 'lit';\n\n/**\n * An element that supports single-selection with `SingleSelectionController`.\n */\nexport interface SingleSelectionElement extends HTMLElement {\n  /**\n   * Whether or not the element is selected.\n   */\n  checked: boolean;\n}\n\n/**\n * A `ReactiveController` that provides root node-scoped single selection for\n * elements, similar to native `<input type=\"radio\">` selection.\n *\n * To use, elements should add the controller and call\n * `selectionController.handleCheckedChange()` in a getter/setter. This must\n * be synchronous to match native behavior.\n *\n * @example\n * const CHECKED = Symbol('checked');\n *\n * class MyToggle extends LitElement {\n *   get checked() { return this[CHECKED]; }\n *   set checked(checked: boolean) {\n *     const oldValue = this.checked;\n *     if (oldValue === checked) {\n *       return;\n *     }\n *\n *     this[CHECKED] = checked;\n *     this.selectionController.handleCheckedChange();\n *     this.requestUpdate('checked', oldValue);\n *   }\n *\n *   [CHECKED] = false;\n *\n *   private selectionController = new SingleSelectionController(this);\n *\n *   constructor() {\n *     super();\n *     this.addController(this.selectionController);\n *   }\n * }\n */\nexport class SingleSelectionController implements ReactiveController {\n  private focused = false;\n  private root: ParentNode|null = null;\n\n  constructor(private readonly host: SingleSelectionElement) {}\n\n  hostConnected() {\n    this.root = this.host.getRootNode() as ParentNode;\n    this.host.addEventListener('keydown', this.handleKeyDown);\n    this.host.addEventListener('focusin', this.handleFocusIn);\n    this.host.addEventListener('focusout', this.handleFocusOut);\n    if (this.host.checked) {\n      // Uncheck other siblings when attached if already checked. This mimics\n      // native <input type=\"radio\"> behavior.\n      this.uncheckSiblings();\n    }\n\n    // Update for the newly added host.\n    this.updateTabIndices();\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('keydown', this.handleKeyDown);\n    this.host.removeEventListener('focusin', this.handleFocusIn);\n    this.host.removeEventListener('focusout', this.handleFocusOut);\n    // Update for siblings that are still connected.\n    this.updateTabIndices();\n    this.root = null;\n  }\n\n  /**\n   * Should be called whenever the host's `checked` property changes\n   * synchronously.\n   */\n  handleCheckedChange() {\n    if (!this.host.checked) {\n      return;\n    }\n\n    this.uncheckSiblings();\n    this.updateTabIndices();\n  }\n\n  private readonly handleFocusIn = () => {\n    this.focused = true;\n    this.updateTabIndices();\n  };\n\n  private readonly handleFocusOut = () => {\n    this.focused = false;\n    this.updateTabIndices();\n  };\n\n  private uncheckSiblings() {\n    for (const sibling of this.getNamedSiblings()) {\n      if (sibling !== this.host) {\n        sibling.checked = false;\n      }\n    }\n  }\n\n  /**\n   * Updates the `tabindex` of the host and its siblings.\n   */\n  private updateTabIndices() {\n    // There are three tabindex states for a group of elements:\n    // 1. If any are checked, that element is focusable.\n    const siblings = this.getNamedSiblings();\n    const checkedSibling = siblings.find(sibling => sibling.checked);\n    // 2. If an element is focused, the others are no longer focusable.\n    if (checkedSibling || this.focused) {\n      const focusable = checkedSibling || this.host;\n      focusable.removeAttribute('tabindex');\n\n      for (const sibling of siblings) {\n        if (sibling !== focusable) {\n          sibling.tabIndex = -1;\n        }\n      }\n      return;\n    }\n\n    // 3. If none are checked or focused, all are focusable.\n    for (const sibling of siblings) {\n      sibling.removeAttribute('tabindex');\n    }\n  }\n\n  /**\n   * Retrieves all siblings in the host element's root with the same `name`\n   * attribute.\n   */\n  private getNamedSiblings() {\n    const name = this.host.getAttribute('name');\n    if (!name || !this.root) {\n      return [];\n    }\n\n    return Array.from(\n        this.root.querySelectorAll<SingleSelectionElement>(`[name=\"${name}\"]`));\n  }\n\n  /**\n   * Handles arrow key events from the host. Using the arrow keys will\n   * select and check the next or previous sibling with the host's\n   * `name` attribute.\n   */\n  private readonly handleKeyDown = (event: KeyboardEvent) => {\n    const isDown = event.key === 'ArrowDown';\n    const isUp = event.key === 'ArrowUp';\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n    // Ignore non-arrow keys\n    if (!isLeft && !isRight && !isDown && !isUp) {\n      return;\n    }\n\n    // Don't try to select another sibling if there aren't any.\n    const siblings = this.getNamedSiblings();\n    if (!siblings.length) {\n      return;\n    }\n\n    // Prevent default interactions on the element for arrow keys,\n    // since this controller will introduce new behavior.\n    event.preventDefault();\n\n    // Check if moving forwards or backwards\n    const isRtl = getComputedStyle(this.host).direction === 'rtl';\n    const forwards = isRtl ? isLeft || isDown : isRight || isDown;\n\n    const hostIndex = siblings.indexOf(this.host);\n    let nextIndex = forwards ? hostIndex + 1 : hostIndex - 1;\n    // Search for the next sibling that is not disabled to select.\n    // If we return to the host index, there is nothing to select.\n    while (nextIndex !== hostIndex) {\n      if (nextIndex >= siblings.length) {\n        // Return to start if moving past the last item.\n        nextIndex = 0;\n      } else if (nextIndex < 0) {\n        // Go to end if moving before the first item.\n        nextIndex = siblings.length - 1;\n      }\n\n      // Check if the next sibling is disabled. If so,\n      // move the index and continue searching.\n      const nextSibling = siblings[nextIndex];\n      if (nextSibling.hasAttribute('disabled')) {\n        if (forwards) {\n          nextIndex++;\n        } else {\n          nextIndex--;\n        }\n\n        continue;\n      }\n\n      // Uncheck and remove focusability from other siblings.\n      for (const sibling of siblings) {\n        if (sibling !== nextSibling) {\n          sibling.checked = false;\n          sibling.tabIndex = -1;\n        }\n      }\n\n      // The next sibling should be checked and focused.\n      nextSibling.checked = true;\n      nextSibling.removeAttribute('tabindex');\n      nextSibling.focus();\n      break;\n    }\n  };\n}\n"]}

package/radio/radio.js

@@ -5,12 +5,13 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
+import { styles as forcedColorsStyles } from './lib/forced-colors-styles.css.js';
 import { Radio } from './lib/radio.js';
 import { styles } from './lib/radio-styles.css.js';
 /** @soyCompatible */
 let MdRadio = class MdRadio extends Radio {
 };
-MdRadio.styles = [styles];
+MdRadio.styles = [styles, forcedColorsStyles];
 MdRadio = __decorate([
     customElement('md-radio')
 ], MdRadio);

package/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAQjD,qBAAqB;AAErB,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,KAAK;CAEjC,CAAA;AADiB,cAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAEnB;SAFY,OAAO","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Radio} from './lib/radio.js';\nimport {styles} from './lib/radio-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-radio': MdRadio;\n  }\n}\n\n/** @soyCompatible */\n@customElement('md-radio')\nexport class MdRadio extends Radio {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAQjD,qBAAqB;AAErB,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,KAAK;CAEjC,CAAA;AADiB,cAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAE,CAAA;AAD3C,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAEnB;SAFY,OAAO","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColorsStyles} from './lib/forced-colors-styles.css.js';\nimport {Radio} from './lib/radio.js';\nimport {styles} from './lib/radio-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-radio': MdRadio;\n  }\n}\n\n/** @soyCompatible */\n@customElement('md-radio')\nexport class MdRadio extends Radio {\n  static override styles = [styles, forcedColorsStyles];\n}\n"]}

package/textfield/lib/_shared.scss

@@ -17,6 +17,7 @@
   :host {
     display: inline-flex;
     outline: none;
+    -webkit-tap-highlight-color: transparent;
   }
 
   .md3-text-field {

package/textfield/lib/filled-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-shape-start-start: var(--md-filled-text-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-filled-text-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-filled-text-field-container-shape-end-end, 0px);--_container-shape-end-start: var(--md-filled-text-field-container-shape-end-start, 0px);--_container-padding-horizontal: var(--md-filled-text-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-text-field-container-padding-vertical, 8px);--_input-text-prefix-padding: var(--md-filled-text-field-input-text-prefix-padding, 2px);--_input-text-suffix-padding: var(--md-filled-text-field-input-text-suffix-padding, 2px);--_active-indicator-color: var(--md-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-text-field-active-indicator-height, 1px);--_caret-color: var(--md-filled-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_container-color: var(--md-filled-text-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_container-height: var(--md-filled-text-field-container-height, 56px);--_disabled-active-indicator-color: var(--md-filled-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-text-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-text-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-text-field-disabled-container-opacity, 0.04);--_disabled-input-text-color: var(--md-filled-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-input-text-opacity: var(--md-filled-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-text-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-caret-color: var(--md-filled-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-filled-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-label-text-color: var(--md-filled-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-input-text-color: var(--md-filled-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-label-text-color: var(--md-filled-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-text-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-filled-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-label-text-color: var(--md-filled-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-text-field-focus-active-indicator-height, 2px);--_focus-input-text-color: var(--md-filled-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-label-text-color: var(--md-filled-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-text-field-hover-active-indicator-height, 1px);--_hover-input-text-color: var(--md-filled-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-label-text-color: var(--md-filled-text-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-text-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-filled-text-field-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_input-text-font: var(--md-filled-text-field-input-text-font, Roboto);--_input-text-line-height: var(--md-filled-text-field-input-text-line-height, 1.5rem);--_input-text-placeholder-color: var(--md-filled-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-filled-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-filled-text-field-input-text-size, 1rem);--_input-text-suffix-color: var(--md-filled-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-tracking: var(--md-filled-text-field-input-text-tracking, 0.031rem);--_input-text-type: var(--md-filled-text-field-input-text-type, 400 1rem / 1.5rem Roboto);--_input-text-weight: var(--md-filled-text-field-input-text-weight, 400);--_label-text-color: var(--md-filled-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-text-field-label-text-font, Roboto);--_label-text-line-height: var(--md-filled-text-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-filled-text-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-text-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-filled-text-field-label-text-size, 1rem);--_label-text-tracking: var(--md-filled-text-field-label-text-tracking, 0.031rem);--_label-text-type: var(--md-filled-text-field-label-text-type, 400 1rem / 1.5rem Roboto);--_label-text-weight: var(--md-filled-text-field-label-text-weight, 400);--_leading-icon-color: var(--md-filled-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-text-field-leading-icon-size, 20px);--_supporting-text-color: var(--md-filled-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-text-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-filled-text-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-filled-text-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-filled-text-field-supporting-text-tracking, 0.025rem);--_supporting-text-type: var(--md-filled-text-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_supporting-text-weight: var(--md-filled-text-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-filled-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-text-field-trailing-icon-size, 24px);--md-filled-field-container-shape-start-start:var(--_container-shape-start-start);--md-filled-field-container-shape-start-end:var(--_container-shape-start-end);--md-filled-field-container-shape-end-end:var(--_container-shape-end-end);--md-filled-field-container-shape-end-start:var(--_container-shape-end-start);--md-filled-field-active-indicator-color:var(--_active-indicator-color);--md-filled-field-active-indicator-height:var(--_active-indicator-height);--md-filled-field-container-color:var(--_container-color);--md-filled-field-container-height:var(--_container-height);--md-filled-field-container-padding-horizontal:var(--_container-padding-horizontal);--md-filled-field-container-padding-vertical:var(--_container-padding-vertical);--md-filled-field-content-color:var(--_input-text-color);--md-filled-field-disabled-active-indicator-color:var(--_disabled-active-indicator-color);--md-filled-field-disabled-active-indicator-height:var(--_disabled-active-indicator-height);--md-filled-field-disabled-active-indicator-opacity:var(--_disabled-active-indicator-opacity);--md-filled-field-disabled-container-color:var(--_disabled-container-color);--md-filled-field-disabled-container-opacity:var(--_disabled-container-opacity);--md-filled-field-disabled-content-color:var(--_disabled-input-text-color);--md-filled-field-disabled-content-opacity:var(--_disabled-input-text-opacity);--md-filled-field-disabled-label-text-color:var(--_disabled-label-text-color);--md-filled-field-disabled-label-text-opacity:var(--_disabled-label-text-opacity);--md-filled-field-disabled-leading-icon-color:var(--_disabled-leading-icon-color);--md-filled-field-disabled-leading-icon-opacity:var(--_disabled-leading-icon-opacity);--md-filled-field-disabled-supporting-text-color:var(--_disabled-supporting-text-color);--md-filled-field-disabled-supporting-text-opacity:var(--_disabled-supporting-text-opacity);--md-filled-field-disabled-trailing-icon-color:var(--_disabled-trailing-icon-color);--md-filled-field-disabled-trailing-icon-opacity:var(--_disabled-trailing-icon-opacity);--md-filled-field-error-active-indicator-color:var(--_error-active-indicator-color);--md-filled-field-error-focus-active-indicator-color:var(--_error-focus-active-indicator-color);--md-filled-field-error-focus-content-color:var(--_error-focus-input-text-color);--md-filled-field-error-focus-label-text-color:var(--_error-focus-label-text-color);--md-filled-field-error-focus-leading-icon-color:var(--_error-focus-leading-icon-color);--md-filled-field-error-focus-supporting-text-color:var(--_error-focus-supporting-text-color);--md-filled-field-error-focus-trailing-icon-color:var(--_error-focus-trailing-icon-color);--md-filled-field-error-hover-active-indicator-color:var(--_error-hover-active-indicator-color);--md-filled-field-error-hover-content-color:var(--_error-hover-input-text-color);--md-filled-field-error-hover-label-text-color:var(--_error-hover-label-text-color);--md-filled-field-error-hover-leading-icon-color:var(--_error-hover-leading-icon-color);--md-filled-field-error-hover-state-layer-color:var(--_error-hover-state-layer-color);--md-filled-field-error-hover-state-layer-opacity:var(--_error-hover-state-layer-opacity);--md-filled-field-error-hover-supporting-text-color:var(--_error-hover-supporting-text-color);--md-filled-field-error-hover-trailing-icon-color:var(--_error-hover-trailing-icon-color);--md-filled-field-error-content-color:var(--_error-input-text-color);--md-filled-field-error-label-text-color:var(--_error-label-text-color);--md-filled-field-error-leading-icon-color:var(--_error-leading-icon-color);--md-filled-field-error-supporting-text-color:var(--_error-supporting-text-color);--md-filled-field-error-trailing-icon-color:var(--_error-trailing-icon-color);--md-filled-field-focus-active-indicator-color:var(--_focus-active-indicator-color);--md-filled-field-focus-active-indicator-height:var(--_focus-active-indicator-height);--md-filled-field-focus-content-color:var(--_focus-input-text-color);--md-filled-field-focus-label-text-color:var(--_focus-label-text-color);--md-filled-field-focus-leading-icon-color:var(--_focus-leading-icon-color);--md-filled-field-focus-supporting-text-color:var(--_focus-supporting-text-color);--md-filled-field-focus-trailing-icon-color:var(--_focus-trailing-icon-color);--md-filled-field-hover-active-indicator-color:var(--_hover-active-indicator-color);--md-filled-field-hover-active-indicator-height:var(--_hover-active-indicator-height);--md-filled-field-hover-content-color:var(--_hover-input-text-color);--md-filled-field-hover-label-text-color:var(--_hover-label-text-color);--md-filled-field-hover-leading-icon-color:var(--_hover-leading-icon-color);--md-filled-field-hover-state-layer-color:var(--_hover-state-layer-color);--md-filled-field-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-filled-field-hover-supporting-text-color:var(--_hover-supporting-text-color);--md-filled-field-hover-trailing-icon-color:var(--_hover-trailing-icon-color);--md-filled-field-label-text-color:var(--_label-text-color);--md-filled-field-label-text-font:var(--_label-text-font);--md-filled-field-label-text-line-height:var(--_label-text-line-height);--md-filled-field-label-text-populated-line-height:var(--_label-text-populated-line-height);--md-filled-field-label-text-populated-size:var(--_label-text-populated-size);--md-filled-field-label-text-size:var(--_label-text-size);--md-filled-field-label-text-tracking:var(--_label-text-tracking);--md-filled-field-label-text-weight:var(--_label-text-weight);--md-filled-field-leading-icon-color:var(--_leading-icon-color);--md-filled-field-leading-icon-size:var(--_leading-icon-size);--md-filled-field-supporting-text-color:var(--_supporting-text-color);--md-filled-field-supporting-text-font:var(--_supporting-text-font);--md-filled-field-supporting-text-line-height:var(--_supporting-text-line-height);--md-filled-field-supporting-text-size:var(--_supporting-text-size);--md-filled-field-supporting-text-tracking:var(--_supporting-text-tracking);--md-filled-field-supporting-text-weight:var(--_supporting-text-weight);--md-filled-field-trailing-icon-color:var(--_trailing-icon-color);--md-filled-field-trailing-icon-size:var(--_trailing-icon-size)}/*# sourceMappingURL=filled-styles.css.map */
+export const styles = css `:host{--_container-shape-start-start: var(--md-filled-text-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-filled-text-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-filled-text-field-container-shape-end-end, 0px);--_container-shape-end-start: var(--md-filled-text-field-container-shape-end-start, 0px);--_container-padding-horizontal: var(--md-filled-text-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-text-field-container-padding-vertical, 8px);--_input-text-prefix-padding: var(--md-filled-text-field-input-text-prefix-padding, 2px);--_input-text-suffix-padding: var(--md-filled-text-field-input-text-suffix-padding, 2px);--_active-indicator-color: var(--md-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-text-field-active-indicator-height, 1px);--_caret-color: var(--md-filled-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_container-color: var(--md-filled-text-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_container-height: var(--md-filled-text-field-container-height, 56px);--_disabled-active-indicator-color: var(--md-filled-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-text-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-text-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-text-field-disabled-container-opacity, 0.04);--_disabled-input-text-color: var(--md-filled-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-input-text-opacity: var(--md-filled-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-text-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-caret-color: var(--md-filled-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-filled-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-label-text-color: var(--md-filled-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-input-text-color: var(--md-filled-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-label-text-color: var(--md-filled-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-text-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-filled-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-label-text-color: var(--md-filled-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-text-field-focus-active-indicator-height, 2px);--_focus-input-text-color: var(--md-filled-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-label-text-color: var(--md-filled-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-text-field-hover-active-indicator-height, 1px);--_hover-input-text-color: var(--md-filled-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-label-text-color: var(--md-filled-text-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-text-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-filled-text-field-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_input-text-font: var(--md-filled-text-field-input-text-font, Roboto);--_input-text-line-height: var(--md-filled-text-field-input-text-line-height, 1.5rem);--_input-text-placeholder-color: var(--md-filled-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-filled-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-filled-text-field-input-text-size, 1rem);--_input-text-suffix-color: var(--md-filled-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-tracking: var(--md-filled-text-field-input-text-tracking, 0.031rem);--_input-text-type: var(--md-filled-text-field-input-text-type, 400 1rem / 1.5rem Roboto);--_input-text-weight: var(--md-filled-text-field-input-text-weight, 400);--_label-text-color: var(--md-filled-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-text-field-label-text-font, Roboto);--_label-text-line-height: var(--md-filled-text-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-filled-text-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-text-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-filled-text-field-label-text-size, 1rem);--_label-text-tracking: var(--md-filled-text-field-label-text-tracking, 0.031rem);--_label-text-type: var(--md-filled-text-field-label-text-type, 400 1rem / 1.5rem Roboto);--_label-text-weight: var(--md-filled-text-field-label-text-weight, 400);--_leading-icon-color: var(--md-filled-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-text-field-leading-icon-size, 24px);--_supporting-text-color: var(--md-filled-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-text-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-filled-text-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-filled-text-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-filled-text-field-supporting-text-tracking, 0.025rem);--_supporting-text-type: var(--md-filled-text-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_supporting-text-weight: var(--md-filled-text-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-filled-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-text-field-trailing-icon-size, 24px);--md-filled-field-container-shape-start-start:var(--_container-shape-start-start);--md-filled-field-container-shape-start-end:var(--_container-shape-start-end);--md-filled-field-container-shape-end-end:var(--_container-shape-end-end);--md-filled-field-container-shape-end-start:var(--_container-shape-end-start);--md-filled-field-active-indicator-color:var(--_active-indicator-color);--md-filled-field-active-indicator-height:var(--_active-indicator-height);--md-filled-field-container-color:var(--_container-color);--md-filled-field-container-height:var(--_container-height);--md-filled-field-container-padding-horizontal:var(--_container-padding-horizontal);--md-filled-field-container-padding-vertical:var(--_container-padding-vertical);--md-filled-field-content-color:var(--_input-text-color);--md-filled-field-disabled-active-indicator-color:var(--_disabled-active-indicator-color);--md-filled-field-disabled-active-indicator-height:var(--_disabled-active-indicator-height);--md-filled-field-disabled-active-indicator-opacity:var(--_disabled-active-indicator-opacity);--md-filled-field-disabled-container-color:var(--_disabled-container-color);--md-filled-field-disabled-container-opacity:var(--_disabled-container-opacity);--md-filled-field-disabled-content-color:var(--_disabled-input-text-color);--md-filled-field-disabled-content-opacity:var(--_disabled-input-text-opacity);--md-filled-field-disabled-label-text-color:var(--_disabled-label-text-color);--md-filled-field-disabled-label-text-opacity:var(--_disabled-label-text-opacity);--md-filled-field-disabled-leading-icon-color:var(--_disabled-leading-icon-color);--md-filled-field-disabled-leading-icon-opacity:var(--_disabled-leading-icon-opacity);--md-filled-field-disabled-supporting-text-color:var(--_disabled-supporting-text-color);--md-filled-field-disabled-supporting-text-opacity:var(--_disabled-supporting-text-opacity);--md-filled-field-disabled-trailing-icon-color:var(--_disabled-trailing-icon-color);--md-filled-field-disabled-trailing-icon-opacity:var(--_disabled-trailing-icon-opacity);--md-filled-field-error-active-indicator-color:var(--_error-active-indicator-color);--md-filled-field-error-focus-active-indicator-color:var(--_error-focus-active-indicator-color);--md-filled-field-error-focus-content-color:var(--_error-focus-input-text-color);--md-filled-field-error-focus-label-text-color:var(--_error-focus-label-text-color);--md-filled-field-error-focus-leading-icon-color:var(--_error-focus-leading-icon-color);--md-filled-field-error-focus-supporting-text-color:var(--_error-focus-supporting-text-color);--md-filled-field-error-focus-trailing-icon-color:var(--_error-focus-trailing-icon-color);--md-filled-field-error-hover-active-indicator-color:var(--_error-hover-active-indicator-color);--md-filled-field-error-hover-content-color:var(--_error-hover-input-text-color);--md-filled-field-error-hover-label-text-color:var(--_error-hover-label-text-color);--md-filled-field-error-hover-leading-icon-color:var(--_error-hover-leading-icon-color);--md-filled-field-error-hover-state-layer-color:var(--_error-hover-state-layer-color);--md-filled-field-error-hover-state-layer-opacity:var(--_error-hover-state-layer-opacity);--md-filled-field-error-hover-supporting-text-color:var(--_error-hover-supporting-text-color);--md-filled-field-error-hover-trailing-icon-color:var(--_error-hover-trailing-icon-color);--md-filled-field-error-content-color:var(--_error-input-text-color);--md-filled-field-error-label-text-color:var(--_error-label-text-color);--md-filled-field-error-leading-icon-color:var(--_error-leading-icon-color);--md-filled-field-error-supporting-text-color:var(--_error-supporting-text-color);--md-filled-field-error-trailing-icon-color:var(--_error-trailing-icon-color);--md-filled-field-focus-active-indicator-color:var(--_focus-active-indicator-color);--md-filled-field-focus-active-indicator-height:var(--_focus-active-indicator-height);--md-filled-field-focus-content-color:var(--_focus-input-text-color);--md-filled-field-focus-label-text-color:var(--_focus-label-text-color);--md-filled-field-focus-leading-icon-color:var(--_focus-leading-icon-color);--md-filled-field-focus-supporting-text-color:var(--_focus-supporting-text-color);--md-filled-field-focus-trailing-icon-color:var(--_focus-trailing-icon-color);--md-filled-field-hover-active-indicator-color:var(--_hover-active-indicator-color);--md-filled-field-hover-active-indicator-height:var(--_hover-active-indicator-height);--md-filled-field-hover-content-color:var(--_hover-input-text-color);--md-filled-field-hover-label-text-color:var(--_hover-label-text-color);--md-filled-field-hover-leading-icon-color:var(--_hover-leading-icon-color);--md-filled-field-hover-state-layer-color:var(--_hover-state-layer-color);--md-filled-field-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-filled-field-hover-supporting-text-color:var(--_hover-supporting-text-color);--md-filled-field-hover-trailing-icon-color:var(--_hover-trailing-icon-color);--md-filled-field-label-text-color:var(--_label-text-color);--md-filled-field-label-text-font:var(--_label-text-font);--md-filled-field-label-text-line-height:var(--_label-text-line-height);--md-filled-field-label-text-populated-line-height:var(--_label-text-populated-line-height);--md-filled-field-label-text-populated-size:var(--_label-text-populated-size);--md-filled-field-label-text-size:var(--_label-text-size);--md-filled-field-label-text-tracking:var(--_label-text-tracking);--md-filled-field-label-text-weight:var(--_label-text-weight);--md-filled-field-leading-icon-color:var(--_leading-icon-color);--md-filled-field-leading-icon-size:var(--_leading-icon-size);--md-filled-field-supporting-text-color:var(--_supporting-text-color);--md-filled-field-supporting-text-font:var(--_supporting-text-font);--md-filled-field-supporting-text-line-height:var(--_supporting-text-line-height);--md-filled-field-supporting-text-size:var(--_supporting-text-size);--md-filled-field-supporting-text-tracking:var(--_supporting-text-tracking);--md-filled-field-supporting-text-weight:var(--_supporting-text-weight);--md-filled-field-trailing-icon-color:var(--_trailing-icon-color);--md-filled-field-trailing-icon-size:var(--_trailing-icon-size)}/*# sourceMappingURL=filled-styles.css.map */
 `;
 //# sourceMappingURL=filled-styles.css.js.map