@material/web 1.0.2-nightly.f7a66a8.0 → 1.1.1

package/radio/internal/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qCAAqC,CAAC;AACtE,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAC,cAAc,EAAC,MAAM,mCAAmC,CAAC;AACjE,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,mBAAmB,GACpB,MAAM,yCAAyC,CAAC;AAEjD,OAAO,EAAC,yBAAyB,EAAC,MAAM,kCAAkC,CAAC;AAE3E,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AAClC,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf,wCAAwC;AACxC,MAAM,cAAc,GAAG,mBAAmB,CACxC,qBAAqB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAClD,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,OAAO,KAAM,SAAQ,cAAc;IAKvC;;OAEG;IAEH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC;IACvB,CAAC;IACD,IAAI,OAAO,CAAC,OAAgB;QAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;QAChC,IAAI,UAAU,KAAK,OAAO,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC1C,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,CAAC;IACjD,CAAC;IAWD;QACE,KAAK,EAAE,CAAC;QAhCV,yEAAyE;QACzE,uEAAuE;QACtD,WAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC;QAoB9C,QAAS,GAAG,KAAK,CAAC;QAElB;;WAEG;QACS,UAAK,GAAG,IAAI,CAAC;QAER,wBAAmB,GAAG,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAIzE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC7C,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,OAAO,CAAC;YAC/B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAC5D,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;SACjE;IACH,CAAC;IAEkB,MAAM;QACvB,MAAM,OAAO,GAAG,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC;QAC1C,OAAO,IAAI,CAAA;8BACe,QAAQ,CAAC,OAAO,CAAC;;;qBAG1B,IAAI;sBACH,IAAI,CAAC,QAAQ;oDACiB,IAAI;;sBAElC,IAAI,CAAC,MAAM;;;;;;;;;yBASR,IAAI,CAAC,MAAM;;;;;;;;qBAQf,IAAI,CAAC,OAAO;mBACd,IAAI,CAAC,KAAK;sBACP,IAAI,CAAC,QAAQ;;KAE9B,CAAC;IACJ,CAAC;IAEkB,OAAO;QACxB,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAEO,KAAK,CAAC,WAAW,CAAC,KAAY;QACpC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,2DAA2D;QAC3D,MAAM,CAAC,CAAC;QACR,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE;YAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;QAED,yDAAyD;QACzD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,aAAa,CAChB,IAAI,UAAU,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CACzD,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,aAAa,CAAC,KAAoB;QAC9C,2DAA2D;QAC3D,MAAM,CAAC,CAAC;QACR,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC/C,OAAO;SACR;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAMQ,OA9FR,OAAO,EA8FE,YAAY,EAAC;QACrB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1C,CAAC;IAEQ,CAAC,YAAY,CAAC;QACrB,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEQ,iBAAiB;QACxB,0EAA0E;QAC1E,mDAAmD;QACnD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC9C,CAAC;IAEQ,wBAAwB,CAAC,KAAa;QAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC;IAClC,CAAC;CACF;AA7HC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;oCAGzB;AAiBW;IAAX,QAAQ,EAAE;oCAAc","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {isActivationClick} from '../../internal/controller/events.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../labs/behaviors/element-internals.js';\nimport {mixinFocusable} from '../../labs/behaviors/focusable.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\nlet maskId = 0;\n\n// Separate variable needed for closure.\nconst radioBaseClass = mixinFormAssociated(\n  mixinElementInternals(mixinFocusable(LitElement)),\n);\n\n/**\n * A radio component.\n *\n * @fires input {InputEvent} Dispatched when the value changes from user\n * interaction. --bubbles\n * @fires change {Event} Dispatched when the value changes from user\n * interaction. --bubbles --composed\n */\nexport class Radio extends radioBaseClass {\n  // Unique maskId is required because of a Safari bug that fail to persist\n  // reference to the mask. This should be removed once the bug is fixed.\n  private readonly maskId = `cutout${++maskId}`;\n\n  /**\n   * Whether or not the radio is selected.\n   */\n  @property({type: Boolean})\n  get checked() {\n    return this[CHECKED];\n  }\n  set checked(checked: boolean) {\n    const wasChecked = this.checked;\n    if (wasChecked === checked) {\n      return;\n    }\n\n    this[CHECKED] = checked;\n    this.requestUpdate('checked', wasChecked);\n    this.selectionController.handleCheckedChange();\n  }\n\n  [CHECKED] = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property() value = 'on';\n\n  private readonly selectionController = new SingleSelectionController(this);\n\n  constructor() {\n    super();\n    this.addController(this.selectionController);\n    if (!isServer) {\n      this[internals].role = 'radio';\n      this.addEventListener('click', this.handleClick.bind(this));\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n    }\n  }\n\n  protected override render() {\n    const classes = {'checked': this.checked};\n    return html`\n      <div class=\"container ${classMap(classes)}\" aria-hidden=\"true\">\n        <md-ripple\n          part=\"ripple\"\n          .control=${this}\n          ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring part=\"focus-ring\" .control=${this}></md-focus-ring>\n        <svg class=\"icon\" viewBox=\"0 0 20 20\">\n          <mask id=\"${this.maskId}\">\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\" />\n          </mask>\n          <circle\n            class=\"outer circle\"\n            cx=\"10\"\n            cy=\"10\"\n            r=\"10\"\n            mask=\"url(#${this.maskId})\" />\n          <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\" />\n        </svg>\n\n        <input\n          id=\"input\"\n          type=\"radio\"\n          tabindex=\"-1\"\n          .checked=${this.checked}\n          .value=${this.value}\n          ?disabled=${this.disabled} />\n      </div>\n    `;\n  }\n\n  protected override updated() {\n    this[internals].ariaChecked = String(this.checked);\n  }\n\n  private async handleClick(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    // allow event to propagate to user code after a microtask.\n    await 0;\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (isActivationClick(event)) {\n      this.focus();\n    }\n\n    // Per spec, clicking on a radio input always selects it.\n    this.checked = true;\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n    this.dispatchEvent(\n      new InputEvent('input', {bubbles: true, composed: true}),\n    );\n  }\n\n  private async handleKeydown(event: KeyboardEvent) {\n    // allow event to propagate to user code after a microtask.\n    await 0;\n    if (event.key !== ' ' || event.defaultPrevented) {\n      return;\n    }\n\n    this.click();\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    // The checked property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.checked = this.hasAttribute('checked');\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {isActivationClick} from '../../internal/controller/events.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../labs/behaviors/element-internals.js';\nimport {mixinFocusable} from '../../labs/behaviors/focusable.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {RadioValidator} from '../../labs/behaviors/validators/radio-validator.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\nlet maskId = 0;\n\n// Separate variable needed for closure.\nconst radioBaseClass = mixinConstraintValidation(\n  mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))),\n);\n\n/**\n * A radio component.\n *\n * @fires input {InputEvent} Dispatched when the value changes from user\n * interaction. --bubbles\n * @fires change {Event} Dispatched when the value changes from user\n * interaction. --bubbles --composed\n */\nexport class Radio extends radioBaseClass {\n  // Unique maskId is required because of a Safari bug that fail to persist\n  // reference to the mask. This should be removed once the bug is fixed.\n  private readonly maskId = `cutout${++maskId}`;\n\n  /**\n   * Whether or not the radio is selected.\n   */\n  @property({type: Boolean})\n  get checked() {\n    return this[CHECKED];\n  }\n  set checked(checked: boolean) {\n    const wasChecked = this.checked;\n    if (wasChecked === checked) {\n      return;\n    }\n\n    this[CHECKED] = checked;\n    this.requestUpdate('checked', wasChecked);\n    this.selectionController.handleCheckedChange();\n  }\n\n  [CHECKED] = false;\n\n  /**\n   * Whether or not the radio is required. If any radio is required in a group,\n   * all radios are implicitly required.\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property() value = 'on';\n\n  @query('.container') private readonly container!: HTMLElement;\n  private readonly selectionController = new SingleSelectionController(this);\n\n  constructor() {\n    super();\n    this.addController(this.selectionController);\n    if (!isServer) {\n      this[internals].role = 'radio';\n      this.addEventListener('click', this.handleClick.bind(this));\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n    }\n  }\n\n  protected override render() {\n    const classes = {'checked': this.checked};\n    return html`\n      <div class=\"container ${classMap(classes)}\" aria-hidden=\"true\">\n        <md-ripple\n          part=\"ripple\"\n          .control=${this}\n          ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring part=\"focus-ring\" .control=${this}></md-focus-ring>\n        <svg class=\"icon\" viewBox=\"0 0 20 20\">\n          <mask id=\"${this.maskId}\">\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\" />\n          </mask>\n          <circle\n            class=\"outer circle\"\n            cx=\"10\"\n            cy=\"10\"\n            r=\"10\"\n            mask=\"url(#${this.maskId})\" />\n          <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\" />\n        </svg>\n\n        <input\n          id=\"input\"\n          type=\"radio\"\n          tabindex=\"-1\"\n          .checked=${this.checked}\n          .value=${this.value}\n          ?disabled=${this.disabled} />\n      </div>\n    `;\n  }\n\n  protected override updated() {\n    this[internals].ariaChecked = String(this.checked);\n  }\n\n  private async handleClick(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    // allow event to propagate to user code after a microtask.\n    await 0;\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (isActivationClick(event)) {\n      this.focus();\n    }\n\n    // Per spec, clicking on a radio input always selects it.\n    this.checked = true;\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n    this.dispatchEvent(\n      new InputEvent('input', {bubbles: true, composed: true}),\n    );\n  }\n\n  private async handleKeydown(event: KeyboardEvent) {\n    // allow event to propagate to user code after a microtask.\n    await 0;\n    if (event.key !== ' ' || event.defaultPrevented) {\n      return;\n    }\n\n    this.click();\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    // The checked property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.checked = this.hasAttribute('checked');\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  [createValidator]() {\n    return new RadioValidator(() => {\n      if (!this.selectionController) {\n        // Validation runs on superclass construction, so selection controller\n        // might not actually be ready until this class constructs.\n        return [this];\n      }\n\n      return this.selectionController.controls as [Radio, ...Radio[]];\n    });\n  }\n\n  [getValidityAnchor]() {\n    return this.container;\n  }\n}\n"]}

package/radio/internal/single-selection-controller.d.ts

@@ -49,6 +49,11 @@ export interface SingleSelectionElement extends HTMLElement {
  */
 export declare class SingleSelectionController implements ReactiveController {
     private readonly host;
+    /**
+     * All single selection elements in the host element's root with the same
+     * `name` attribute, including the host element.
+     */
+    get controls(): [SingleSelectionElement, ...SingleSelectionElement[]];
     private focused;
     private root;
     constructor(host: SingleSelectionElement);
@@ -66,11 +71,6 @@ export declare class SingleSelectionController implements ReactiveController {
      * Updates the `tabindex` of the host and its siblings.
      */
     private updateTabIndices;
-    /**
-     * Retrieves all siblings in the host element's root with the same `name`
-     * attribute.
-     */
-    private getNamedSiblings;
     /**
      * Handles arrow key events from the host. Using the arrow keys will
      * select and check the next or previous sibling with the host's

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

@@ -38,6 +38,19 @@
  * }
  */
 export class SingleSelectionController {
+    /**
+     * All single selection elements in the host element's root with the same
+     * `name` attribute, including the host element.
+     */
+    get controls() {
+        const name = this.host.getAttribute('name');
+        if (!name || !this.root || !this.host.isConnected) {
+            return [this.host];
+        }
+        // Cast as unknown since there is not enough information for typescript to
+        // know that there is always at least one element (the host).
+        return Array.from(this.root.querySelectorAll(`[name="${name}"]`));
+    }
     constructor(host) {
         this.host = host;
         this.focused = false;
@@ -65,7 +78,7 @@ export class SingleSelectionController {
                 return;
             }
             // Don't try to select another sibling if there aren't any.
-            const siblings = this.getNamedSiblings();
+            const siblings = this.controls;
             if (!siblings.length) {
                 return;
             }
@@ -152,7 +165,7 @@ export class SingleSelectionController {
         this.updateTabIndices();
     }
     uncheckSiblings() {
-        for (const sibling of this.getNamedSiblings()) {
+        for (const sibling of this.controls) {
             if (sibling !== this.host) {
                 sibling.checked = false;
             }
@@ -164,7 +177,7 @@ export class SingleSelectionController {
     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 siblings = this.controls;
         const checkedSibling = siblings.find((sibling) => sibling.checked);
         // 2. If an element is focused, the others are no longer focusable.
         if (checkedSibling || this.focused) {
@@ -182,16 +195,5 @@ export class SingleSelectionController {
             sibling.tabIndex = 0;
         }
     }
-    /**
-     * Retrieves all siblings in the host element's root with the same `name`
-     * attribute.
-     */
-    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/internal/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 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.tabIndex = 0;\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.tabIndex = 0;\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  /**\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          sibling.blur();\n        }\n      }\n\n      // The next sibling should be checked, focused and dispatch a change event\n      nextSibling.checked = true;\n      nextSibling.tabIndex = 0;\n      nextSibling.focus();\n      // Fire a change event since the change is triggered by a user action.\n      // This matches native <input type=\"radio\"> behavior.\n      nextSibling.dispatchEvent(new Event('change', {bubbles: true}));\n\n      break;\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  /**\n   * All single selection elements in the host element's root with the same\n   * `name` attribute, including the host element.\n   */\n  get controls(): [SingleSelectionElement, ...SingleSelectionElement[]] {\n    const name = this.host.getAttribute('name');\n    if (!name || !this.root || !this.host.isConnected) {\n      return [this.host];\n    }\n\n    // Cast as unknown since there is not enough information for typescript to\n    // know that there is always at least one element (the host).\n    return Array.from(\n      this.root.querySelectorAll<SingleSelectionElement>(`[name=\"${name}\"]`),\n    ) as unknown as [SingleSelectionElement, ...SingleSelectionElement[]];\n  }\n\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.controls) {\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.controls;\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.tabIndex = 0;\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.tabIndex = 0;\n    }\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.controls;\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          sibling.blur();\n        }\n      }\n\n      // The next sibling should be checked, focused and dispatch a change event\n      nextSibling.checked = true;\n      nextSibling.tabIndex = 0;\n      nextSibling.focus();\n      // Fire a change event since the change is triggered by a user action.\n      // This matches native <input type=\"radio\"> behavior.\n      nextSibling.dispatchEvent(new Event('change', {bubbles: true}));\n\n      break;\n    }\n  };\n}\n"]}

package/select/internal/_shared.scss

@@ -69,6 +69,11 @@
     display: flex;
   }
 
+  md-menu {
+    min-width: var(--__menu-min-width, inherit);
+    max-width: var(--__menu-max-width, inherit);
+  }
+
   md-menu ::slotted(:not[disabled]) {
     cursor: pointer;
   }

package/select/internal/select.d.ts

@@ -6,10 +6,14 @@
 import '../../menu/menu.js';
 import { LitElement, PropertyValues } from 'lit';
 import { StaticValue } from 'lit/static-html.js';
+import { Field } from '../../field/internal/field.js';
+import { createValidator, getValidityAnchor } from '../../labs/behaviors/constraint-validation.js';
 import { getFormValue } from '../../labs/behaviors/form-associated.js';
+import { onReportValidity } from '../../labs/behaviors/on-report-validity.js';
+import { SelectValidator } from '../../labs/behaviors/validators/select-validator.js';
 import { SelectOption } from './selectoption/selectOptionController.js';
 declare const VALUE: unique symbol;
-declare const selectBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../labs/behaviors/form-associated.js").FormAssociatedConstructor, import("../../labs/behaviors/form-associated.js").FormAssociated>;
+declare const selectBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<import("../../labs/behaviors/mixin.js").MixinReturn<import("../../labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../labs/behaviors/form-associated.js").FormAssociatedConstructor, import("../../labs/behaviors/form-associated.js").FormAssociated>, import("../../labs/behaviors/constraint-validation.js").ConstraintValidation>, import("../../labs/behaviors/on-report-validity.js").OnReportValidity>;
 /**
  * @fires change {Event} The native `change` event on
  * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
@@ -25,6 +29,12 @@ declare const selectBaseClass: import("../../labs/behaviors/mixin.js").MixinRetu
  * and closed.
  */
 export declare abstract class Select extends selectBaseClass {
+    /** @nocollapse */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode;
+    };
     /**
      * Opens the menu synchronously with no animation.
      */
@@ -66,6 +76,10 @@ export declare abstract class Select extends selectBaseClass {
      * element with stacking context and hidden overflows such as `md-dialog`.
      */
     menuPositioning: 'absolute' | 'fixed' | 'popover';
+    /**
+     * Clamps the menu-width to the width of the select.
+     */
+    clampMenuWidth: boolean;
     /**
      * The max time between the keystrokes of the typeahead select / menu behavior
      * before it clears the typeahead buffer.
@@ -104,27 +118,6 @@ export declare abstract class Select extends selectBaseClass {
      * NOTE: md-select only suppoprts single selection.
      */
     get selectedOptions(): SelectOption[];
-    /**
-     * Returns a ValidityState object that represents the validity states of the
-     * checkbox.
-     *
-     * Note that selects will only set `valueMissing` if unselected and
-     * `required`.
-     */
-    get validity(): ValidityState;
-    /**
-     * Returns the native validation error message.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process
-     */
-    get validationMessage(): string;
-    /**
-     * Returns whether an element will successfully validate based on forms
-     * validation rules and constraints.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process
-     */
-    get willValidate(): boolean;
     protected abstract readonly fieldTag: StaticValue;
     /**
      * Used for initializing select when the user sets the `value` directly.
@@ -156,9 +149,9 @@ export declare abstract class Select extends selectBaseClass {
     private readonly menu;
     private readonly labelEl;
     private readonly leadingIcons;
-    private isCheckingValidity;
-    private isReportingValidity;
-    private customValidationMessage;
+    private prevOpen;
+    private selectWidth;
+    constructor();
     /**
      * Selects an option given the value of the option, and updates MdSelect's
      * value.
@@ -173,50 +166,9 @@ export declare abstract class Select extends selectBaseClass {
      * Reset the select to its default value.
      */
     reset(): void;
-    /**
-     * Checks the select's native validation and returns whether or not the
-     * element is valid.
-     *
-     * If invalid, this method will dispatch the `invalid` event.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
-     *
-     * @return true if the select is valid, or false if not.
-     */
-    checkValidity(): boolean;
-    /**
-     * Checks the select's native validation and returns whether or not the
-     * element is valid.
-     *
-     * If invalid, this method will dispatch the `invalid` event.
-     *
-     * This method will display or clear an error text message equal to the
-     * select's `validationMessage`, unless the invalid event is canceled.
-     *
-     * Use `setCustomValidity()` to customize the `validationMessage`.
-     *
-     * This method can also be used to re-announce error messages to screen
-     * readers.
-     *
-     * @return true if the select is valid, or false if not.
-     */
-    reportValidity(): boolean;
-    private showErrorMessage;
-    /**
-     * Sets the select's native validation error message. This is used to
-     * customize `validationMessage`.
-     *
-     * When the error is not an empty string, the select is considered invalid
-     * and `validity.customError` will be true.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity
-     *
-     * @param error The error message to display.
-     */
-    setCustomValidity(error: string): void;
+    [onReportValidity](invalidEvent: Event | null): void;
     protected update(changed: PropertyValues<Select>): void;
     protected render(): import("lit-html").TemplateResult<1>;
-    protected updated(changed: PropertyValues<Select>): void;
     protected firstUpdated(changed: PropertyValues<Select>): Promise<void>;
     private getRenderClasses;
     private renderField;
@@ -290,15 +242,12 @@ export declare abstract class Select extends selectBaseClass {
      */
     private dispatchInteractionEvents;
     private getErrorText;
-    private syncValidity;
-    private getRequiredValidationMessage;
-    private readonly onInvalid;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     disabled: boolean;
     name: string;
     [getFormValue](): string;
     formResetCallback(): void;
     formStateRestoreCallback(state: string): void;
+    [createValidator](): SelectValidator;
+    [getValidityAnchor](): Field;
 }
 export {};