@material/web 1.0.0-pre.8 → 1.0.0

package/radio/lib/_radio.scss

@@ -1,167 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../focus/focus-ring';
-@use '../../motion/animation';
-@use '../../ripple/ripple';
-@use '../../sass/theme';
-@use '../../tokens';
-// go/keep-sorted end
-
-$_md-sys-motion: tokens.md-sys-motion-values();
-
-@mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-radio-button-values(), $tokens);
-  $tokens: theme.create-theme-vars($tokens, 'radio');
-
-  @include theme.emit-theme-vars($tokens);
-}
-
-@mixin styles() {
-  $tokens: tokens.md-comp-radio-button-values();
-  $tokens: theme.create-theme-vars($tokens, 'radio');
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
-    }
-
-    @include ripple.theme(
-      (
-        focus-color: var(--_unselected-focus-state-layer-color),
-        focus-opacity: var(--_unselected-focus-state-layer-opacity),
-        hover-color: var(--_unselected-hover-state-layer-color),
-        hover-opacity: var(--_unselected-hover-state-layer-opacity),
-        pressed-color: var(--_unselected-pressed-state-layer-color),
-        pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
-      )
-    );
-
-    @include focus-ring.theme(
-      (
-        'offset': -2px,
-      )
-    );
-
-    display: inline-flex;
-    height: 48px;
-    position: relative;
-    vertical-align: top; // Fix extra space when placed inside display: block
-    width: 48px;
-    // Remove highlight color for mobile Safari
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  :host([checked]) {
-    @include ripple.theme(
-      (
-        focus-color: var(--_selected-focus-state-layer-color),
-        focus-opacity: var(--_selected-focus-state-layer-opacity),
-        hover-color: var(--_selected-hover-state-layer-color),
-        hover-opacity: var(--_selected-hover-state-layer-opacity),
-        pressed-color: var(--_selected-pressed-state-layer-color),
-        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
-      )
-    );
-  }
-
-  input,
-  md-ripple,
-  .icon {
-    inset: 0;
-    margin: auto;
-    position: absolute;
-  }
-
-  input {
-    appearance: none;
-    outline: none;
-  }
-
-  md-ripple {
-    height: var(--_state-layer-size);
-    width: var(--_state-layer-size);
-  }
-
-  .icon {
-    fill: var(--_unselected-icon-color);
-    height: var(--_icon-size);
-    width: var(--_icon-size);
-  }
-
-  .outer.circle {
-    // Outline color enter/exit transition
-    transition: fill 50ms linear;
-  }
-
-  .inner.circle {
-    opacity: 0;
-    transform-origin: center;
-    transition: opacity 50ms linear;
-  }
-
-  :host([checked]) .icon {
-    fill: var(--_selected-icon-color);
-  }
-
-  :host([checked]) .inner.circle {
-    animation: inner-circle-grow 300ms
-      map.get($_md-sys-motion, easing-emphasized-decelerate);
-    opacity: 1;
-  }
-
-  @keyframes inner-circle-grow {
-    from {
-      transform: scale(0);
-    }
-    to {
-      transform: scale(1);
-    }
-  }
-
-  // Don't animate when disabled
-  :host([disabled]) .circle {
-    animation-duration: 0s;
-    transition-duration: 0s;
-  }
-
-  :host(:hover) .icon {
-    fill: var(--_unselected-hover-icon-color);
-  }
-
-  :host(:focus-within) .icon {
-    fill: var(--_unselected-focus-icon-color);
-  }
-
-  :host(:active) .icon {
-    fill: var(--_unselected-pressed-icon-color);
-  }
-
-  :host([disabled]) .icon {
-    fill: var(--_disabled-unselected-icon-color);
-    opacity: var(--_disabled-unselected-icon-opacity);
-  }
-
-  :host([checked]:hover) .icon {
-    fill: var(--_selected-hover-icon-color);
-  }
-
-  :host([checked]:focus-within) .icon {
-    fill: var(--_selected-focus-icon-color);
-  }
-
-  :host([checked]:active) .icon {
-    fill: var(--_selected-pressed-icon-color);
-  }
-
-  :host([checked][disabled]) .icon {
-    fill: var(--_disabled-selected-icon-color);
-    opacity: var(--_disabled-selected-icon-opacity);
-  }
-}

package/radio/lib/forced-colors-styles.css.js

@@ -1,9 +0,0 @@
-/**
-  * @license
-  * Copyright 2022 Google LLC
-  * SPDX-License-Identifier: Apache-2.0
-  */
-import { css } from 'lit';
-export const styles = css `@media(forced-colors: active){:host{--md-radio-disabled-selected-icon-color:GrayText;--md-radio-disabled-selected-icon-opacity:1;--md-radio-disabled-unselected-icon-color:GrayText;--md-radio-disabled-unselected-icon-opacity:1;--md-radio-selected-icon-color:CanvasText;--md-radio-selected-hover-icon-color:CanvasText;--md-radio-selected-focus-icon-color:CanvasText;--md-radio-selected-pressed-icon-color:CanvasText;--md-radio-unselected-icon-color:CanvasText;--md-radio-unselected-hover-icon-color:CanvasText;--md-radio-unselected-focus-icon-color:CanvasText;--md-radio-unselected-pressed-icon-color:CanvasText}}/*# sourceMappingURL=forced-colors-styles.css.map */
-`;
-//# sourceMappingURL=forced-colors-styles.css.js.map

package/radio/lib/forced-colors-styles.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`@media(forced-colors: active){:host{--md-radio-disabled-selected-icon-color:GrayText;--md-radio-disabled-selected-icon-opacity:1;--md-radio-disabled-unselected-icon-color:GrayText;--md-radio-disabled-unselected-icon-opacity:1;--md-radio-selected-icon-color:CanvasText;--md-radio-selected-hover-icon-color:CanvasText;--md-radio-selected-focus-icon-color:CanvasText;--md-radio-selected-pressed-icon-color:CanvasText;--md-radio-unselected-icon-color:CanvasText;--md-radio-unselected-hover-icon-color:CanvasText;--md-radio-unselected-focus-icon-color:CanvasText;--md-radio-unselected-pressed-icon-color:CanvasText}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}

package/radio/lib/forced-colors-styles.scss

@@ -1,29 +0,0 @@
-//
-// Copyright 2023 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use './radio';
-// go/keep-sorted end
-
-@media (forced-colors: active) {
-  :host {
-    @include radio.theme(
-      (
-        disabled-selected-icon-color: GrayText,
-        disabled-selected-icon-opacity: 1,
-        disabled-unselected-icon-color: GrayText,
-        disabled-unselected-icon-opacity: 1,
-        selected-icon-color: CanvasText,
-        selected-hover-icon-color: CanvasText,
-        selected-focus-icon-color: CanvasText,
-        selected-pressed-icon-color: CanvasText,
-        unselected-icon-color: CanvasText,
-        unselected-hover-icon-color: CanvasText,
-        unselected-focus-icon-color: CanvasText,
-        unselected-pressed-icon-color: CanvasText,
-      )
-    );
-  }
-}

package/radio/lib/radio-styles.css.js

@@ -1,9 +0,0 @@
-/**
-  * @license
-  * Copyright 2022 Google LLC
-  * SPDX-License-Identifier: Apache-2.0
-  */
-import { css } from 'lit';
-export const styles = css `:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-color: var(--md-radio-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-radio-selected-focus-state-layer-opacity, 0.12);--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-color: var(--md-radio-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-opacity: var(--md-radio-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity);--md-focus-ring-offset: -2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([checked]){--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}input,md-ripple,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}:host([checked]) .icon{fill:var(--_selected-icon-color)}:host([checked]) .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host([checked]:hover) .icon{fill:var(--_selected-hover-icon-color)}:host([checked]:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:host([checked]:active) .icon{fill:var(--_selected-pressed-icon-color)}:host([checked][disabled]) .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=radio-styles.css.map */
-`;
-//# sourceMappingURL=radio-styles.css.js.map

package/radio/lib/radio-styles.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-styles.css.js","sourceRoot":"","sources":["radio-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-color: var(--md-radio-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-radio-selected-focus-state-layer-opacity, 0.12);--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-radio-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-color: var(--md-radio-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-opacity: var(--md-radio-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-icon-color: var(--md-radio-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-radio-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-opacity: var(--md-radio-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-radio-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-radio-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-radio-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-radio-unselected-pressed-state-layer-opacity, 0.12);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity);--md-focus-ring-offset: -2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([checked]){--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}input,md-ripple,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size)}.icon{fill:var(--_unselected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}:host([checked]) .icon{fill:var(--_selected-icon-color)}:host([checked]) .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_unselected-hover-icon-color)}:host(:focus-within) .icon{fill:var(--_unselected-focus-icon-color)}:host(:active) .icon{fill:var(--_unselected-pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host([checked]:hover) .icon{fill:var(--_selected-hover-icon-color)}:host([checked]:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:host([checked]:active) .icon{fill:var(--_selected-pressed-icon-color)}:host([checked][disabled]) .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=radio-styles.css.map */\n`;\n "]}

package/radio/lib/radio.d.ts

@@ -1,54 +0,0 @@
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import '../../focus/focus-ring.js';
-import '../../ripple/ripple.js';
-import { LitElement } from 'lit';
-import { getFormValue } from '../../controller/form-controller.js';
-declare const CHECKED: unique symbol;
-/**
- * A radio component.
- */
-export declare class Radio extends LitElement {
-    static shadowRootOptions: ShadowRootInit;
-    /**
-     * @nocollapse
-     */
-    static formAssociated: boolean;
-    /**
-     * Whether or not the radio is selected.
-     */
-    get checked(): boolean;
-    set checked(checked: boolean);
-    [CHECKED]: boolean;
-    /**
-     * Whether or not the radio is disabled.
-     */
-    disabled: boolean;
-    /**
-     * The element value to use in form submission when checked.
-     */
-    value: string;
-    /**
-     * The HTML name to use in form submission.
-     */
-    name: string;
-    /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form(): HTMLFormElement;
-    private readonly input;
-    private readonly ripple;
-    private readonly selectionController;
-    private showRipple;
-    constructor();
-    [getFormValue](): string;
-    focus(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
-    private handleChange;
-    private readonly getRipple;
-    private readonly renderRipple;
-}
-export {};

package/radio/lib/radio.js

@@ -1,152 +0,0 @@
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-var _a, _b;
-import { __decorate } from "tslib";
-import '../../focus/focus-ring.js';
-import '../../ripple/ripple.js';
-import { html, isServer, LitElement, nothing } from 'lit';
-import { property, query, queryAsync, state } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
-import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
-import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../controller/events.js';
-import { FormController, getFormValue } from '../../controller/form-controller.js';
-import { ripple } from '../../ripple/directive.js';
-import { SingleSelectionController } from './single-selection-controller.js';
-const CHECKED = Symbol('checked');
-/**
- * A radio component.
- */
-export class Radio extends LitElement {
-    /**
-     * Whether or not the radio is selected.
-     */
-    get checked() {
-        return this[CHECKED];
-    }
-    set checked(checked) {
-        const wasChecked = this.checked;
-        if (wasChecked === checked) {
-            return;
-        }
-        this[CHECKED] = checked;
-        this.requestUpdate('checked', wasChecked);
-        this.selectionController.handleCheckedChange();
-    }
-    /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form() {
-        return this.closest('form');
-    }
-    constructor() {
-        super();
-        this[_b] = false;
-        /**
-         * Whether or not the radio is disabled.
-         */
-        this.disabled = false;
-        /**
-         * The element value to use in form submission when checked.
-         */
-        this.value = 'on';
-        /**
-         * The HTML name to use in form submission.
-         */
-        this.name = '';
-        this.selectionController = new SingleSelectionController(this);
-        this.showRipple = false;
-        this.getRipple = () => {
-            this.showRipple = true;
-            return this.ripple;
-        };
-        this.renderRipple = () => {
-            return html `<md-ripple unbounded ?disabled=${this.disabled}></md-ripple>`;
-        };
-        this.addController(new FormController(this));
-        this.addController(this.selectionController);
-        if (!isServer) {
-            this.addEventListener('click', (event) => {
-                if (!isActivationClick(event)) {
-                    return;
-                }
-                this.focus();
-                dispatchActivationClick(this.input);
-            });
-        }
-    }
-    [(_b = CHECKED, getFormValue)]() {
-        return this.checked ? this.value : null;
-    }
-    focus() {
-        this.input?.focus();
-    }
-    render() {
-        // Needed for closure conformance
-        const { ariaLabel } = this;
-        return html `
-      ${when(this.showRipple, this.renderRipple)}
-      <md-focus-ring for="input"></md-focus-ring>
-      <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
-        id="input"
-        type="radio"
-        name=${this.name}
-        aria-label=${ariaLabel || nothing}
-        .checked=${this.checked}
-        .value=${this.value}
-        ?disabled=${this.disabled}
-        @change=${this.handleChange}
-        ${ripple(this.getRipple)}
-      >
-    `;
-    }
-    handleChange(event) {
-        if (this.disabled) {
-            return;
-        }
-        // Per spec, the change event on a radio input always represents checked.
-        this.checked = true;
-        redispatchEvent(this, event);
-    }
-}
-_a = Radio;
-(() => {
-    requestUpdateOnAriaChange(_a);
-})();
-Radio.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
-/**
- * @nocollapse
- */
-Radio.formAssociated = true;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Radio.prototype, "checked", null);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Radio.prototype, "disabled", void 0);
-__decorate([
-    property()
-], Radio.prototype, "value", void 0);
-__decorate([
-    property({ reflect: true })
-], Radio.prototype, "name", void 0);
-__decorate([
-    query('input')
-], Radio.prototype, "input", void 0);
-__decorate([
-    queryAsync('md-ripple')
-], Radio.prototype, "ripple", void 0);
-__decorate([
-    state()
-], Radio.prototype, "showRipple", void 0);
-//# sourceMappingURL=radio.js.map

package/radio/lib/radio.js.map

@@ -1 +0,0 @@
-{"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, isServer, LitElement, nothing} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../controller/events.js';\nimport {FormController, getFormValue} from '../../controller/form-controller.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\nimport {SingleSelectionController} from './single-selection-controller.js';\n\nconst CHECKED = Symbol('checked');\n\n/**\n * A radio component.\n */\nexport class Radio extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  /**\n   * @nocollapse\n   */\n  static formAssociated = true;\n\n  /**\n   * Whether or not the radio is selected.\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  /**\n   * Whether or not the radio is disabled.\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() value = 'on';\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  @property({reflect: true}) name = '';\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 showRipple = false;\n\n  constructor() {\n    super();\n    this.addController(new FormController(this));\n    this.addController(this.selectionController);\n    if (!isServer) {\n      this.addEventListener('click', (event: Event) => {\n        if (!isActivationClick(event)) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.input!);\n      });\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() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      ${when(this.showRipple, this.renderRipple)}\n      <md-focus-ring for=\"input\"></md-focus-ring>\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        id=\"input\"\n        type=\"radio\"\n        name=${this.name}\n        aria-label=${ariaLabel || nothing}\n        .checked=${this.checked}\n        .value=${this.value}\n        ?disabled=${this.disabled}\n        @change=${this.handleChange}\n        ${ripple(this.getRipple)}\n      >\n    `;\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 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"]}

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

@@ -1,193 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * A `ReactiveController` that provides root node-scoped single selection for
- * elements, similar to native `<input type="radio">` selection.
- *
- * To use, elements should add the controller and call
- * `selectionController.handleCheckedChange()` in a getter/setter. This must
- * be synchronous to match native behavior.
- *
- * @example
- * const CHECKED = Symbol('checked');
- *
- * class MyToggle extends LitElement {
- *   get checked() { return this[CHECKED]; }
- *   set checked(checked: boolean) {
- *     const oldValue = this.checked;
- *     if (oldValue === checked) {
- *       return;
- *     }
- *
- *     this[CHECKED] = checked;
- *     this.selectionController.handleCheckedChange();
- *     this.requestUpdate('checked', oldValue);
- *   }
- *
- *   [CHECKED] = false;
- *
- *   private selectionController = new SingleSelectionController(this);
- *
- *   constructor() {
- *     super();
- *     this.addController(this.selectionController);
- *   }
- * }
- */
-export class SingleSelectionController {
-    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();
-    }
-    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;
-    }
-    /**
-     * Should be called whenever the host's `checked` property changes
-     * synchronously.
-     */
-    handleCheckedChange() {
-        if (!this.host.checked) {
-            return;
-        }
-        this.uncheckSiblings();
-        this.updateTabIndices();
-    }
-    uncheckSiblings() {
-        for (const sibling of this.getNamedSiblings()) {
-            if (sibling !== this.host) {
-                sibling.checked = false;
-            }
-        }
-    }
-    /**
-     * Updates the `tabindex` of the host and its siblings.
-     */
-    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;
-        }
-        // 3. If none are checked or focused, all are focusable.
-        for (const sibling of siblings) {
-            sibling.removeAttribute('tabindex');
-        }
-    }
-    /**
-     * 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