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

package/radio/lib/radio.js

@@ -3,29 +3,27 @@
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+var _a;
 import { __decorate, __metadata } from "tslib";
-// Style preference for leading underscores.
-// tslint:disable:strip-private-property-underscore
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
 import { html, LitElement, nothing } from 'lit';
 import { property, query, queryAsync, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
-import { dispatchActivationClick, isActivationClick } from '../../controller/events.js';
+import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../controller/events.js';
 import { FormController, getFormValue } from '../../controller/form-controller.js';
 import { ariaProperty } from '../../decorators/aria-property.js';
 import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
 import { ripple } from '../../ripple/directive.js';
 import { SingleSelectionController } from './single-selection-controller.js';
+const CHECKED = Symbol('checked');
 /**
  * @fires checked
- * @soyCompatible
  */
 export class Radio extends LitElement {
     constructor() {
         super();
-        this._checked = false; // tslint:disable-line:enforce-name-casing
+        this[_a] = false;
         this.disabled = false;
         /**
          * The element value to use in form submission when checked.
@@ -35,18 +33,7 @@ export class Radio extends LitElement {
          * The HTML name to use in form submission.
          */
         this.name = '';
-        /**
-         * Touch target extends beyond visual boundary of a component by default.
-         * Set to `true` to remove touch target added to the component.
-         * @see https://material.io/design/usability/accessibility.html
-         */
-        this.reducedTouchTarget = false;
-        /**
-         * input's tabindex is updated based on checked status.
-         * Tab navigation will be removed from unchecked radios.
-         */
-        this.formElementTabIndex = 0;
-        this.focused = false;
+        this.selectionController = new SingleSelectionController(this);
         this.showFocusRing = false;
         this.showRipple = false;
         this.getRipple = () => {
@@ -57,6 +44,7 @@ export class Radio extends LitElement {
             return html `<md-ripple unbounded ?disabled=${this.disabled}></md-ripple>`;
         };
         this.addController(new FormController(this));
+        this.addController(this.selectionController);
         this.addEventListener('click', (event) => {
             if (!isActivationClick(event)) {
                 return;
@@ -66,38 +54,16 @@ export class Radio extends LitElement {
         });
     }
     get checked() {
-        return this._checked;
+        return this[CHECKED];
     }
-    /**
-     * We define our own getter/setter for `checked` because we need to track
-     * changes to it synchronously.
-     *
-     * The order in which the `checked` property is set across radio buttons
-     * within the same group is very important. However, we can't rely on
-     * UpdatingElement's `updated` callback to observe these changes (which is
-     * also what the `@observer` decorator uses), because it batches changes to
-     * all properties.
-     *
-     * Consider:
-     *
-     *   radio1.disabled = true;
-     *   radio2.checked = true;
-     *   radio1.checked = true;
-     *
-     * In this case we'd first see all changes for radio1, and then for radio2,
-     * and we couldn't tell that radio1 was the most recently checked.
-     */
-    set checked(isChecked) {
-        const oldValue = this._checked;
-        if (isChecked === oldValue) {
+    set checked(checked) {
+        const wasChecked = this.checked;
+        if (wasChecked === checked) {
             return;
         }
-        this._checked = isChecked;
-        this.selectionController?.update(this);
-        this.requestUpdate('checked', oldValue);
-        // useful when unchecks self and wrapping element needs to synchronize
-        // TODO(b/168543810): Remove triggering event on programmatic API call.
-        this.dispatchEvent(new Event('checked', { bubbles: true, composed: true }));
+        this[CHECKED] = checked;
+        this.requestUpdate('checked', wasChecked);
+        this.selectionController.handleCheckedChange();
     }
     /**
      * The associated form element with which this element's value will submit.
@@ -105,110 +71,54 @@ export class Radio extends LitElement {
     get form() {
         return this.closest('form');
     }
-    [getFormValue]() {
+    [(_a = CHECKED, getFormValue)]() {
         return this.checked ? this.value : null;
     }
     focus() {
         this.input?.focus();
     }
-    connectedCallback() {
-        super.connectedCallback();
-        // Note that we must defer creating the selection controller until the
-        // element has connected, because selection controllers are keyed by the
-        // radio's shadow root. For example, if we're stamping in a lit map
-        // or repeat, then we'll be constructed before we're added to a root node.
-        //
-        // Also note if we aren't using native shadow DOM, we still need a
-        // SelectionController, because we should update checked status of other
-        // radios in the group when selection changes. It also simplifies
-        // implementation and testing to use one in all cases.
-        //
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        this.selectionController = SingleSelectionController.getController(this);
-        this.selectionController.register(this);
-        // Radios maybe checked before connected, update selection as soon it is
-        // connected to DOM. Last checked radio button in the DOM will be selected.
-        //
-        // NOTE: If we update selection only after firstUpdate() we might mistakenly
-        // update checked status before other radios are rendered.
-        this.selectionController.update(this);
-    }
-    disconnectedCallback() {
-        // The controller is initialized in connectedCallback, so if we are in
-        // disconnectedCallback then it must be initialized.
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        this.selectionController.unregister(this);
-        this.selectionController = undefined;
-    }
-    updated(changedProperties) {
-        if (changedProperties.has('checked') && this.input) {
-            this.input.checked = this.checked;
-            if (!this.checked) {
-                // Remove focus ring when unchecked on other radio programmatically.
-                // Blur on input since this determines the focus style.
-                this.input.blur();
-            }
-        }
-    }
-    /**
-     * @soyTemplate
-     * @soyAttributes radioAttributes: input
-     * @soyClasses radioClasses: .md3-radio
-     */
     render() {
-        /** @classMap */
-        const classes = {
-            'md3-radio--touch': !this.reducedTouchTarget,
-            'md3-ripple-upgraded--background-focused': this.focused,
-            'md3-radio--disabled': this.disabled,
-        };
         return html `
-      <div class="md3-radio ${classMap(classes)}">
-        ${this.renderFocusRing()}
-        <input
-          tabindex="${this.formElementTabIndex}"
-          class="md3-radio__native-control"
-          type="radio"
-          name="${this.name}"
-          aria-label="${this.ariaLabel || nothing}"
-          .checked="${this.checked}"
-          .value="${this.value}"
-          ?disabled="${this.disabled}"
-          @change="${this.handleChange}"
-          @focus="${this.handleFocus}"
-          @blur="${this.handleBlur}"
-          @pointerdown=${this.handlePointerDown}
-          ${ripple(this.getRipple)}
-          >
-        <div class="md3-radio__background">
-          <div class="md3-radio__outer-circle"></div>
-          <div class="md3-radio__inner-circle"></div>
-        </div>
-        <div class="md3-radio__ripple">
-          ${when(this.showRipple, this.renderRipple)}
-        </div>
-      </div>`;
+      ${when(this.showRipple, this.renderRipple)}
+      ${this.renderFocusRing()}
+      <svg class="icon" viewBox="0 0 20 20">
+        <mask id="cutout">
+          <rect width="100%" height="100%" fill="white" />
+          <circle cx="10" cy="10" r="8" fill="black" />
+        </mask>
+        <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout)" />
+        <circle class="inner circle" cx="10" cy="10" r="5" />
+      </svg>
+      <input
+        type="radio"
+        name=${this.name}
+        aria-label=${this.ariaLabel || nothing}
+        .checked=${this.checked}
+        .value=${this.value}
+        ?disabled=${this.disabled}
+        @change=${this.handleChange}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @pointerdown=${this.handlePointerDown}
+        ${ripple(this.getRipple)}
+      >
+    `;
     }
     handleBlur() {
-        this.focused = false;
         this.showFocusRing = false;
     }
     handleFocus() {
-        this.focused = true;
         this.showFocusRing = shouldShowStrongFocus();
     }
-    handleChange() {
+    handleChange(event) {
         if (this.disabled) {
             return;
         }
         // Per spec, the change event on a radio input always represents checked.
         this.checked = true;
-        this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            composed: true,
-        }));
+        redispatchEvent(this, event);
     }
-    handlePointerDown(event) {
+    handlePointerDown() {
         pointerPress();
         this.showFocusRing = shouldShowStrongFocus();
     }
@@ -224,7 +134,7 @@ __decorate([
     __metadata("design:paramtypes", [Boolean])
 ], Radio.prototype, "checked", null);
 __decorate([
-    property({ type: Boolean }),
+    property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], Radio.prototype, "disabled", void 0);
 __decorate([
@@ -235,24 +145,12 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], Radio.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Radio.prototype, "reducedTouchTarget", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
-], Radio.prototype, "formElementTabIndex", void 0);
 __decorate([
     ariaProperty // tslint:disable-line:no-new-decorators
     ,
     property({ attribute: 'data-aria-label', noAccessor: true }),
     __metadata("design:type", String)
 ], Radio.prototype, "ariaLabel", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Radio.prototype, "focused", void 0);
 __decorate([
     query('input'),
     __metadata("design:type", HTMLInputElement)

package/radio/lib/radio.js.map

@@ -1 +1 @@
-{"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\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {dispatchActivationClick, isActivationClick} from '../../controller/events.js';\nimport {FormController, getFormValue} from '../../controller/form-controller.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\n/**\n * @fires checked\n * @soyCompatible\n */\nexport class Radio extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  static formAssociated = true;\n\n  @property({type: Boolean, reflect: true})\n  get checked(): boolean {\n    return this._checked;\n  }\n\n  /**\n   * We define our own getter/setter for `checked` because we need to track\n   * changes to it synchronously.\n   *\n   * The order in which the `checked` property is set across radio buttons\n   * within the same group is very important. However, we can't rely on\n   * UpdatingElement's `updated` callback to observe these changes (which is\n   * also what the `@observer` decorator uses), because it batches changes to\n   * all properties.\n   *\n   * Consider:\n   *\n   *   radio1.disabled = true;\n   *   radio2.checked = true;\n   *   radio1.checked = true;\n   *\n   * In this case we'd first see all changes for radio1, and then for radio2,\n   * and we couldn't tell that radio1 was the most recently checked.\n   */\n  set checked(isChecked: boolean) {\n    const oldValue = this._checked;\n    if (isChecked === oldValue) {\n      return;\n    }\n    this._checked = isChecked;\n    this.selectionController?.update(this);\n\n    this.requestUpdate('checked', oldValue);\n\n    // useful when unchecks self and wrapping element needs to synchronize\n    // TODO(b/168543810): Remove triggering event on programmatic API call.\n    this.dispatchEvent(new Event('checked', {bubbles: true, composed: true}));\n  }\n\n  private _checked = false;  // tslint:disable-line:enforce-name-casing\n\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property({type: String}) value = 'on';\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  @property({type: String, reflect: true}) name = '';\n\n  /**\n   * Touch target extends beyond visual boundary of a component by default.\n   * Set to `true` to remove touch target added to the component.\n   * @see https://material.io/design/usability/accessibility.html\n   */\n  @property({type: Boolean}) reducedTouchTarget = false;\n\n  /**\n   * input's tabindex is updated based on checked status.\n   * Tab navigation will be removed from unchecked radios.\n   */\n  @property({type: Number}) formElementTabIndex = 0;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this.closest('form');\n  }\n\n  @state() private focused = false;\n  @query('input') private readonly input!: HTMLInputElement|null;\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n  private selectionController?: SingleSelectionController;\n  @state() private showFocusRing = false;\n  @state() private showRipple = false;\n\n  constructor() {\n    super();\n    this.addController(new FormController(this));\n    this.addEventListener('click', (event: Event) => {\n      if (!isActivationClick(event)) {\n        return;\n      }\n      this.focus();\n      dispatchActivationClick(this.input!);\n    });\n  }\n\n  [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override focus() {\n    this.input?.focus();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Note that we must defer creating the selection controller until the\n    // element has connected, because selection controllers are keyed by the\n    // radio's shadow root. For example, if we're stamping in a lit map\n    // or repeat, then we'll be constructed before we're added to a root node.\n    //\n    // Also note if we aren't using native shadow DOM, we still need a\n    // SelectionController, because we should update checked status of other\n    // radios in the group when selection changes. It also simplifies\n    // implementation and testing to use one in all cases.\n    //\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    this.selectionController = SingleSelectionController.getController(this);\n    this.selectionController.register(this);\n\n    // Radios maybe checked before connected, update selection as soon it is\n    // connected to DOM. Last checked radio button in the DOM will be selected.\n    //\n    // NOTE: If we update selection only after firstUpdate() we might mistakenly\n    // update checked status before other radios are rendered.\n    this.selectionController.update(this);\n  }\n\n  override disconnectedCallback() {\n    // The controller is initialized in connectedCallback, so if we are in\n    // disconnectedCallback then it must be initialized.\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.selectionController!.unregister(this);\n    this.selectionController = undefined;\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('checked') && this.input) {\n      this.input.checked = this.checked;\n      if (!this.checked) {\n        // Remove focus ring when unchecked on other radio programmatically.\n        // Blur on input since this determines the focus style.\n        this.input.blur();\n      }\n    }\n  }\n\n  /**\n   * @soyTemplate\n   * @soyAttributes radioAttributes: input\n   * @soyClasses radioClasses: .md3-radio\n   */\n  protected override render(): TemplateResult {\n    /** @classMap */\n    const classes = {\n      'md3-radio--touch': !this.reducedTouchTarget,\n      'md3-ripple-upgraded--background-focused': this.focused,\n      'md3-radio--disabled': this.disabled,\n    };\n\n    return html`\n      <div class=\"md3-radio ${classMap(classes)}\">\n        ${this.renderFocusRing()}\n        <input\n          tabindex=\"${this.formElementTabIndex}\"\n          class=\"md3-radio__native-control\"\n          type=\"radio\"\n          name=\"${this.name}\"\n          aria-label=\"${this.ariaLabel || nothing}\"\n          .checked=\"${this.checked}\"\n          .value=\"${this.value}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this.handleChange}\"\n          @focus=\"${this.handleFocus}\"\n          @blur=\"${this.handleBlur}\"\n          @pointerdown=${this.handlePointerDown}\n          ${ripple(this.getRipple)}\n          >\n        <div class=\"md3-radio__background\">\n          <div class=\"md3-radio__outer-circle\"></div>\n          <div class=\"md3-radio__inner-circle\"></div>\n        </div>\n        <div class=\"md3-radio__ripple\">\n          ${when(this.showRipple, this.renderRipple)}\n        </div>\n      </div>`;\n  }\n\n  private handleBlur() {\n    this.focused = false;\n    this.showFocusRing = false;\n  }\n\n  private handleFocus() {\n    this.focused = true;\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private handleChange() {\n    if (this.disabled) {\n      return;\n    }\n\n    // Per spec, the change event on a radio input always represents checked.\n    this.checked = true;\n    this.dispatchEvent(new Event('change', {\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private handlePointerDown(event: PointerEvent) {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private readonly renderRipple = () => {\n    return html`<md-ripple unbounded ?disabled=${this.disabled}></md-ripple>`;\n  };\n\n  private renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>`;\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/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../controller/events.js';\nimport {FormController, getFormValue} from '../../controller/form-controller.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\n\n/**\n * @fires checked\n */\nexport class Radio extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  static formAssociated = true;\n\n  @property({type: Boolean, reflect: true})\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  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property({type: String}) value = 'on';\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  @property({type: String, reflect: true}) name = '';\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this.closest('form');\n  }\n\n  @query('input') private readonly input!: HTMLInputElement|null;\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n  private readonly selectionController = new SingleSelectionController(this);\n  @state() private showFocusRing = false;\n  @state() private showRipple = false;\n\n  constructor() {\n    super();\n    this.addController(new FormController(this));\n    this.addController(this.selectionController);\n    this.addEventListener('click', (event: Event) => {\n      if (!isActivationClick(event)) {\n        return;\n      }\n      this.focus();\n      dispatchActivationClick(this.input!);\n    });\n  }\n\n  [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override focus() {\n    this.input?.focus();\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n      ${when(this.showRipple, this.renderRipple)}\n      ${this.renderFocusRing()}\n      <svg class=\"icon\" viewBox=\"0 0 20 20\">\n        <mask id=\"cutout\">\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n          <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"black\" />\n        </mask>\n        <circle class=\"outer circle\" cx=\"10\" cy=\"10\" r=\"10\" mask=\"url(#cutout)\" />\n        <circle class=\"inner circle\" cx=\"10\" cy=\"10\" r=\"5\" />\n      </svg>\n      <input\n        type=\"radio\"\n        name=${this.name}\n        aria-label=${this.ariaLabel || nothing}\n        .checked=${this.checked}\n        .value=${this.value}\n        ?disabled=${this.disabled}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @pointerdown=${this.handlePointerDown}\n        ${ripple(this.getRipple)}\n      >\n    `;\n  }\n\n  private handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  private handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private handleChange(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    // Per spec, the change event on a radio input always represents checked.\n    this.checked = true;\n    redispatchEvent(this, event);\n  }\n\n  private handlePointerDown() {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private readonly renderRipple = () => {\n    return html`<md-ripple unbounded ?disabled=${this.disabled}></md-ripple>`;\n  };\n\n  private renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>`;\n  }\n}\n"]}

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

@@ -1,167 +1,80 @@
 /**
  * @license
- * Copyright 2020 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import { ReactiveController } from 'lit';
 /**
- * Set of checkable elements with added metadata
+ * An element that supports single-selection with `SingleSelectionController`.
  */
-export declare class SingleSelectionSet {
-    selected: CheckableElement | null;
-    ordered: CheckableElement[] | null;
-    readonly set: Set<CheckableElement>;
-}
-/**
- * Element that is checkable consumed by
- * `SingleSelectionController` and `SingleSelectionSet`
- */
-export declare type CheckableElement = HTMLElement & {
-    name: string;
+export interface SingleSelectionElement extends HTMLElement {
+    /**
+     * Whether or not the element is selected.
+     */
     checked: boolean;
-    formElementTabIndex?: number;
-};
+}
 /**
- * Controller that provides behavior similar to a native `<input type="radio">`
- * group.
- *
- * Behaviors:
+ * A `ReactiveController` that provides root node-scoped single selection for
+ * elements, similar to native `<input type="radio">` selection.
  *
- * - 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.
+ * To use, elements should add the controller and call
+ * `selectionController.handleCheckedChange()` in a getter/setter. This must
+ * be synchronous to match native behavior.
  *
- * Intended Usage:
+ * @example
+ * const CHECKED = Symbol('checked');
  *
- * ```ts
- * class MyElement extends HTMLElement {
- *   private selectionController: SingleSelectionController | null = null;
- *   name = "";
- *   global = false;
- *
- *   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;
+ *
+ *   private selectionController = new SingleSelectionController(this);
  *
- *   disconnectedCallback() {
- *     this.selectionController!.unregister(this);
- *     this.selectionController = null;
+ *   constructor() {
+ *     super();
+ *     this.addController(this.selectionController);
  *   }
  * }
- * ```
  */
-export declare class SingleSelectionController {
-    private readonly sets;
-    private focusedSet;
-    private mouseIsDown;
-    /**
-     * 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: HTMLElement | HTMLElement & {
-        global: boolean;
-    }): SingleSelectionController;
-    constructor(element: Node);
-    protected keyDownHandler(e: KeyboardEvent): void;
-    protected mousedownHandler(): void;
-    protected mouseupHandler(): void;
-    /**
-     * Whether or not the controller controls  the given element.
-     *
-     * @param element element to check
-     */
-    has(element: CheckableElement): boolean;
-    /**
-     * 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: CheckableElement): CheckableElement;
-    /**
-     * 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: CheckableElement): CheckableElement;
-    select(element: CheckableElement): void;
-    /**
-     * 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: CheckableElement): void;
-    /**
-     * @return Returns true if atleast one radio is selected in the radio group.
-     */
-    isAnySelected(element: CheckableElement): boolean;
-    /**
-     * 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: CheckableElement): CheckableElement[];
+export declare class SingleSelectionController implements ReactiveController {
+    private readonly host;
+    private focused;
+    private root;
+    constructor(host: SingleSelectionElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
     /**
-     * Gets the selection set of the given name and creates one if it does not yet
-     * exist.
-     *
-     * @param name Name of set
+     * Should be called whenever the host's `checked` property changes
+     * synchronously.
      */
-    getSet(name: string): SingleSelectionSet;
+    handleCheckedChange(): void;
+    private readonly handleFocusIn;
+    private readonly handleFocusOut;
+    private uncheckSiblings;
     /**
-     * Register the element in the selection controller.
-     *
-     * @param element Element to register. Registers in set of `element.name`.
+     * Updates the `tabindex` of the host and its siblings.
      */
-    register(element: CheckableElement): void;
+    private updateTabIndices;
     /**
-     * Unregister the element from selection controller.
-     *
-     * @param element Element to register. Registers in set of `element.name`.
+     * Retrieves all siblings in the host element's root with the same `name`
+     * attribute.
      */
-    unregister(element: CheckableElement): void;
+    private getNamedSiblings;
     /**
-     * Unselects other elements in element's set if element is checked. Noop
-     * otherwise.
-     *
-     * @param element Element from which to calculate selection controller update.
+     * 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.
      */
-    update(element: CheckableElement): void;
+    private readonly handleKeyDown;
 }