@material/web 1.0.0-pre.12 → 1.0.0-pre.14

package/menu/lib/typeaheadController.js

@@ -1,252 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * Indicies to access the TypeaheadRecord tuple type.
- */
-export const TYPEAHEAD_RECORD = {
-    INDEX: 0,
-    ITEM: 1,
-    TEXT: 2,
-};
-/**
- * This controller listens to `keydown` events and searches the header text of
- * an array of `MenuItem`s with the corresponding entered keys within the buffer
- * time and activates the item.
- *
- * @example
- * ```ts
- * const typeaheadController = new TypeaheadController(() => ({
- *   typeaheadBufferTime: 50,
- *   getItems: () => Array.from(document.querySelectorAll('md-menu-item'))
- * }));
- * html`
- *   <div
- *       @keydown=${typeaheadController.onKeydown}
- *       tabindex="0"
- *       class="activeItemText">
- *     <!-- focusable element that will receive keydown events -->
- *     Apple
- *   </div>
- *   <div>
- *     <md-menu-item active header="Apple"></md-menu-item>
- *     <md-menu-item header="Apricot"></md-menu-item>
- *     <md-menu-item header="Banana"></md-menu-item>
- *     <md-menu-item header="Olive"></md-menu-item>
- *     <md-menu-item header="Orange"></md-menu-item>
- *   </div>
- * `;
- * ```
- */
-export class TypeaheadController {
-    /**
-     * @param getProperties A function that returns the options of the typeahead
-     * controller:
-     *
-     * {
-     *   getItems: A function that returns an array of menu items to be searched.
-     *   typeaheadBufferTime: The maximum time between each keystroke to keep the
-     *       current type buffer alive.
-     * }
-     */
-    constructor(getProperties) {
-        this.getProperties = getProperties;
-        /**
-         * Array of tuples that helps with indexing.
-         */
-        this.typeaheadRecords = [];
-        /**
-         * Currently-typed text since last buffer timeout
-         */
-        this.typaheadBuffer = '';
-        /**
-         * The timeout id from the current buffer's setTimeout
-         */
-        this.cancelTypeaheadTimeout = 0;
-        /**
-         * If we are currently "typing"
-         */
-        this.isTypingAhead = false;
-        /**
-         * The record of the last active item.
-         */
-        this.lastActiveRecord = null;
-        /**
-         * Apply this listener to the element that will receive `keydown` events that
-         * should trigger this controller.
-         *
-         * @param e The native browser `KeyboardEvent` from the `keydown` event.
-         */
-        this.onKeydown = (e) => {
-            if (this.isTypingAhead) {
-                this.typeahead(e);
-            }
-            else {
-                this.beginTypeahead(e);
-            }
-        };
-        /**
-         * Ends the current typeahead and clears the buffer.
-         */
-        this.endTypeahead = () => {
-            this.isTypingAhead = false;
-            this.typaheadBuffer = '';
-            this.typeaheadRecords = [];
-        };
-    }
-    get items() {
-        return this.getProperties().getItems();
-    }
-    get active() {
-        return this.getProperties().active;
-    }
-    /**
-     * Sets up typingahead
-     */
-    beginTypeahead(e) {
-        if (!this.active) {
-            return;
-        }
-        // We don't want to typeahead if the _beginning_ of the typeahead is a menu
-        // navigation, or a selection. We will handle "Space" only if it's in the
-        // middle of a typeahead
-        if (e.code === 'Space' || e.code === 'Enter' ||
-            e.code.startsWith('Arrow') || e.code === 'Escape') {
-            return;
-        }
-        this.isTypingAhead = true;
-        // Generates the record array data structure which is the index, the element
-        // and a normalized header.
-        this.typeaheadRecords = this.items.map((el, index) => [index, el, el.headline.trim().toLowerCase()]);
-        this.lastActiveRecord =
-            this.typeaheadRecords.find(record => record[TYPEAHEAD_RECORD.ITEM].active) ??
-                null;
-        if (this.lastActiveRecord) {
-            this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;
-        }
-        this.typeahead(e);
-    }
-    /**
-     * Performs the typeahead. Based on the normalized items and the current text
-     * buffer, finds the _next_ item with matching text and activates it.
-     *
-     * @example
-     *
-     * items: Apple, Banana, Olive, Orange, Cucumber
-     * buffer: ''
-     * user types: o
-     *
-     * activates Olive
-     *
-     * @example
-     *
-     * items: Apple, Banana, Olive (active), Orange, Cucumber
-     * buffer: 'o'
-     * user types: l
-     *
-     * activates Olive
-     *
-     * @example
-     *
-     * items: Apple, Banana, Olive (active), Orange, Cucumber
-     * buffer: ''
-     * user types: o
-     *
-     * activates Orange
-     *
-     * @example
-     *
-     * items: Apple, Banana, Olive, Orange (active), Cucumber
-     * buffer: ''
-     * user types: o
-     *
-     * activates Olive
-     */
-    typeahead(e) {
-        clearTimeout(this.cancelTypeaheadTimeout);
-        // Stop typingahead if one of the navigation or selection keys (except for
-        // Space) are pressed
-        if (e.code === 'Enter' || e.code.startsWith('Arrow') ||
-            e.code === 'Escape') {
-            this.endTypeahead();
-            if (this.lastActiveRecord) {
-                this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;
-            }
-            return;
-        }
-        // If Space is pressed, prevent it from selecting and closing the menu
-        if (e.code === 'Space') {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-        // Start up a new keystroke buffer timeout
-        this.cancelTypeaheadTimeout =
-            setTimeout(this.endTypeahead, this.getProperties().typeaheadBufferTime);
-        this.typaheadBuffer += e.key.toLowerCase();
-        const lastActiveIndex = this.lastActiveRecord ?
-            this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX] :
-            -1;
-        const numRecords = this.typeaheadRecords.length;
-        /**
-         * Sorting function that will resort the items starting with the given index
-         *
-         * @example
-         *
-         * this.typeaheadRecords =
-         * 0: [0, <reference>, 'apple']
-         * 1: [1, <reference>, 'apricot']
-         * 2: [2, <reference>, 'banana']
-         * 3: [3, <reference>, 'olive'] <-- lastActiveIndex
-         * 4: [4, <reference>, 'orange']
-         * 5: [5, <reference>, 'strawberry']
-         *
-         * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a)
-         *                                       - rebaseIndexOnActive(b)) ===
-         * 0: [3, <reference>, 'olive'] <-- lastActiveIndex
-         * 1: [4, <reference>, 'orange']
-         * 2: [5, <reference>, 'strawberry']
-         * 3: [0, <reference>, 'apple']
-         * 4: [1, <reference>, 'apricot']
-         * 5: [2, <reference>, 'banana']
-         */
-        const rebaseIndexOnActive = (record) => {
-            return (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %
-                numRecords;
-        };
-        // records filtered and sorted / rebased around the last active index
-        const matchingRecords = this.typeaheadRecords
-            .filter(record => !record[TYPEAHEAD_RECORD.ITEM].disabled &&
-            record[TYPEAHEAD_RECORD.TEXT].startsWith(this.typaheadBuffer))
-            .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));
-        // Just leave if there's nothing that matches. Native select will just
-        // choose the first thing that starts with the next letter in the alphabet
-        // but that's out of scope and hard to localize
-        if (matchingRecords.length === 0) {
-            clearTimeout(this.cancelTypeaheadTimeout);
-            if (this.lastActiveRecord) {
-                this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;
-            }
-            this.endTypeahead();
-            return;
-        }
-        const isNewQuery = this.typaheadBuffer.length === 1;
-        let nextRecord;
-        // This is likely the case that someone is trying to "tab" through different
-        // entries that start with the same letter
-        if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) {
-            nextRecord = matchingRecords[1] ?? matchingRecords[0];
-        }
-        else {
-            nextRecord = matchingRecords[0];
-        }
-        if (this.lastActiveRecord) {
-            this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;
-        }
-        this.lastActiveRecord = nextRecord;
-        nextRecord[TYPEAHEAD_RECORD.ITEM].active = true;
-        return;
-    }
-}
-//# sourceMappingURL=typeaheadController.js.map

package/menu/lib/typeaheadController.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"typeaheadController.js","sourceRoot":"","sources":["typeaheadController.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MenuItem} from './shared.js';\n\n/**\n * The options that are passed to the typeahead controller.\n */\nexport interface TypeaheadControllerProperties {\n  /**\n   * A function that returns an array of menu items to be searched.\n   * @return An array of menu items to be searched by typing.\n   */\n  getItems: () => MenuItem[];\n  /**\n   * The maximum time between each keystroke to keep the current type buffer\n   * alive.\n   */\n  typeaheadBufferTime: number;\n  /**\n   * Whether or not the typeahead should listen for keystrokes or not.\n   */\n  active: boolean;\n}\n\n/**\n * Data structure tuple that helps with indexing.\n *\n * [index, item, normalized header text]\n */\ntype TypeaheadRecord = [number, MenuItem, string];\n/**\n * Indicies to access the TypeaheadRecord tuple type.\n */\nexport const TYPEAHEAD_RECORD = {\n  INDEX: 0,\n  ITEM: 1,\n  TEXT: 2,\n} as const;\n\n/**\n * This controller listens to `keydown` events and searches the header text of\n * an array of `MenuItem`s with the corresponding entered keys within the buffer\n * time and activates the item.\n *\n * @example\n * ```ts\n * const typeaheadController = new TypeaheadController(() => ({\n *   typeaheadBufferTime: 50,\n *   getItems: () => Array.from(document.querySelectorAll('md-menu-item'))\n * }));\n * html`\n *   <div\n *       @keydown=${typeaheadController.onKeydown}\n *       tabindex=\"0\"\n *       class=\"activeItemText\">\n *     <!-- focusable element that will receive keydown events -->\n *     Apple\n *   </div>\n *   <div>\n *     <md-menu-item active header=\"Apple\"></md-menu-item>\n *     <md-menu-item header=\"Apricot\"></md-menu-item>\n *     <md-menu-item header=\"Banana\"></md-menu-item>\n *     <md-menu-item header=\"Olive\"></md-menu-item>\n *     <md-menu-item header=\"Orange\"></md-menu-item>\n *   </div>\n * `;\n * ```\n */\nexport class TypeaheadController {\n  /**\n   * Array of tuples that helps with indexing.\n   */\n  private typeaheadRecords: TypeaheadRecord[] = [];\n  /**\n   * Currently-typed text since last buffer timeout\n   */\n  private typaheadBuffer = '';\n  /**\n   * The timeout id from the current buffer's setTimeout\n   */\n  private cancelTypeaheadTimeout = 0;\n  /**\n   * If we are currently \"typing\"\n   */\n  isTypingAhead = false;\n  /**\n   * The record of the last active item.\n   */\n  lastActiveRecord: TypeaheadRecord|null = null;\n\n  /**\n   * @param getProperties A function that returns the options of the typeahead\n   * controller:\n   *\n   * {\n   *   getItems: A function that returns an array of menu items to be searched.\n   *   typeaheadBufferTime: The maximum time between each keystroke to keep the\n   *       current type buffer alive.\n   * }\n   */\n  constructor(\n      private readonly getProperties: () => TypeaheadControllerProperties,\n  ) {}\n\n  private get items() {\n    return this.getProperties().getItems();\n  }\n\n  private get active() {\n    return this.getProperties().active;\n  }\n\n  /**\n   * Apply this listener to the element that will receive `keydown` events that\n   * should trigger this controller.\n   *\n   * @param e The native browser `KeyboardEvent` from the `keydown` event.\n   */\n  readonly onKeydown = (e: KeyboardEvent) => {\n    if (this.isTypingAhead) {\n      this.typeahead(e);\n    } else {\n      this.beginTypeahead(e);\n    }\n  };\n\n  /**\n   * Sets up typingahead\n   */\n  private beginTypeahead(e: KeyboardEvent) {\n    if (!this.active) {\n      return;\n    }\n\n    // We don't want to typeahead if the _beginning_ of the typeahead is a menu\n    // navigation, or a selection. We will handle \"Space\" only if it's in the\n    // middle of a typeahead\n    if (e.code === 'Space' || e.code === 'Enter' ||\n        e.code.startsWith('Arrow') || e.code === 'Escape') {\n      return;\n    }\n\n    this.isTypingAhead = true;\n    // Generates the record array data structure which is the index, the element\n    // and a normalized header.\n    this.typeaheadRecords = this.items.map(\n        (el, index) => [index, el, el.headline.trim().toLowerCase()]);\n    this.lastActiveRecord =\n        this.typeaheadRecords.find(\n            record => record[TYPEAHEAD_RECORD.ITEM].active) ??\n        null;\n    if (this.lastActiveRecord) {\n      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;\n    }\n    this.typeahead(e);\n  }\n\n  /**\n   * Performs the typeahead. Based on the normalized items and the current text\n   * buffer, finds the _next_ item with matching text and activates it.\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive, Orange, Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Olive\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive (active), Orange, Cucumber\n   * buffer: 'o'\n   * user types: l\n   *\n   * activates Olive\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive (active), Orange, Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Orange\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive, Orange (active), Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Olive\n   */\n  private typeahead(e: KeyboardEvent) {\n    clearTimeout(this.cancelTypeaheadTimeout);\n    // Stop typingahead if one of the navigation or selection keys (except for\n    // Space) are pressed\n    if (e.code === 'Enter' || e.code.startsWith('Arrow') ||\n        e.code === 'Escape') {\n      this.endTypeahead();\n      if (this.lastActiveRecord) {\n        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;\n      }\n      return;\n    }\n\n    // If Space is pressed, prevent it from selecting and closing the menu\n    if (e.code === 'Space') {\n      e.stopPropagation();\n      e.preventDefault();\n    }\n\n    // Start up a new keystroke buffer timeout\n    this.cancelTypeaheadTimeout =\n        setTimeout(this.endTypeahead, this.getProperties().typeaheadBufferTime);\n\n    this.typaheadBuffer += e.key.toLowerCase();\n\n    const lastActiveIndex = this.lastActiveRecord ?\n        this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX] :\n        -1;\n    const numRecords = this.typeaheadRecords.length;\n\n    /**\n     * Sorting function that will resort the items starting with the given index\n     *\n     * @example\n     *\n     * this.typeaheadRecords =\n     * 0: [0, <reference>, 'apple']\n     * 1: [1, <reference>, 'apricot']\n     * 2: [2, <reference>, 'banana']\n     * 3: [3, <reference>, 'olive'] <-- lastActiveIndex\n     * 4: [4, <reference>, 'orange']\n     * 5: [5, <reference>, 'strawberry']\n     *\n     * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a)\n     *                                       - rebaseIndexOnActive(b)) ===\n     * 0: [3, <reference>, 'olive'] <-- lastActiveIndex\n     * 1: [4, <reference>, 'orange']\n     * 2: [5, <reference>, 'strawberry']\n     * 3: [0, <reference>, 'apple']\n     * 4: [1, <reference>, 'apricot']\n     * 5: [2, <reference>, 'banana']\n     */\n    const rebaseIndexOnActive = (record: TypeaheadRecord) => {\n      return (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %\n          numRecords;\n    };\n\n    // records filtered and sorted / rebased around the last active index\n    const matchingRecords =\n        this.typeaheadRecords\n            .filter(\n                record => !record[TYPEAHEAD_RECORD.ITEM].disabled &&\n                    record[TYPEAHEAD_RECORD.TEXT].startsWith(\n                        this.typaheadBuffer))\n            .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));\n\n    // Just leave if there's nothing that matches. Native select will just\n    // choose the first thing that starts with the next letter in the alphabet\n    // but that's out of scope and hard to localize\n    if (matchingRecords.length === 0) {\n      clearTimeout(this.cancelTypeaheadTimeout);\n      if (this.lastActiveRecord) {\n        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;\n      }\n      this.endTypeahead();\n      return;\n    }\n\n    const isNewQuery = this.typaheadBuffer.length === 1;\n    let nextRecord: TypeaheadRecord;\n\n    // This is likely the case that someone is trying to \"tab\" through different\n    // entries that start with the same letter\n    if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) {\n      nextRecord = matchingRecords[1] ?? matchingRecords[0];\n    } else {\n      nextRecord = matchingRecords[0];\n    }\n\n    if (this.lastActiveRecord) {\n      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].active = false;\n    }\n\n    this.lastActiveRecord = nextRecord;\n    nextRecord[TYPEAHEAD_RECORD.ITEM].active = true;\n    return;\n  }\n\n  /**\n   * Ends the current typeahead and clears the buffer.\n   */\n  private readonly endTypeahead = () => {\n    this.isTypingAhead = false;\n    this.typaheadBuffer = '';\n    this.typeaheadRecords = [];\n  };\n}\n"]}

package/radio/lib/_radio.scss

@@ -1,169 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:list';
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../focus/focus-ring';
-@use '../../internal/motion/animation';
-@use '../../ripple/ripple';
-@use '../../tokens';
-// go/keep-sorted end
-
-$_md-sys-motion: tokens.md-sys-motion-values();
-
-@mixin theme($tokens) {
-  $supported-tokens: tokens.$md-comp-radio-button-supported-tokens;
-
-  @each $token, $value in $tokens {
-    @if list.index($supported-tokens, $token) == null {
-      @error 'Token `#{$token}` is not a supported token.';
-    }
-
-    @if $value {
-      --md-radio-#{$token}: #{$value};
-    }
-  }
-}
-
-@mixin styles() {
-  $tokens: tokens.md-comp-radio-button-values();
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-radio-#{$token}, #{$value});
-    }
-
-    @include ripple.theme(
-      (
-        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(
-      (
-        'outward-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;
-  }
-
-  .checked {
-    @include ripple.theme(
-      (
-        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,
-  .icon {
-    inset: 0;
-    margin: auto;
-    position: absolute;
-  }
-
-  input {
-    appearance: none;
-    outline: none;
-  }
-
-  md-ripple {
-    border-radius: 50%;
-    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;
-  }
-
-  .checked .icon {
-    fill: var(--_selected-icon-color);
-  }
-
-  .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(:hover) .checked .icon {
-    fill: var(--_selected-hover-icon-color);
-  }
-
-  :host(:focus-within) .checked .icon {
-    fill: var(--_selected-focus-icon-color);
-  }
-
-  :host(:active) .checked .icon {
-    fill: var(--_selected-pressed-icon-color);
-  }
-
-  :host([disabled]) .checked .icon {
-    fill: var(--_disabled-selected-icon-color);
-    opacity: var(--_disabled-selected-icon-opacity);
-  }
-}

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-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-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-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-outward-offset: -2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.checked{--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,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{border-radius:50%;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}.checked .icon{fill:var(--_selected-icon-color)}.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(:hover) .checked .icon{fill:var(--_selected-hover-icon-color)}:host(:focus-within) .checked .icon{fill:var(--_selected-focus-icon-color)}:host(:active) .checked .icon{fill:var(--_selected-pressed-icon-color)}:host([disabled]) .checked .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-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-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-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-outward-offset: -2px;display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.checked{--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,.icon{inset:0;margin:auto;position:absolute}input{appearance:none;outline:none}md-ripple{border-radius:50%;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}.checked .icon{fill:var(--_selected-icon-color)}.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(:hover) .checked .icon{fill:var(--_selected-hover-icon-color)}:host(:focus-within) .checked .icon{fill:var(--_selected-focus-icon-color)}:host(:active) .checked .icon{fill:var(--_selected-pressed-icon-color)}:host([disabled]) .checked .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,57 +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';
-declare const CHECKED: unique symbol;
-/**
- * A radio component.
- */
-export declare class Radio extends LitElement {
-    /** @nocollapse */
-    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.
-     */
-    get name(): string;
-    set name(name: string);
-    /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form(): HTMLFormElement;
-    /**
-     * The labels this element is associated with.
-     */
-    get labels(): NodeList;
-    private readonly input;
-    private readonly selectionController;
-    private readonly internals;
-    constructor();
-    focus(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
-    private handleChange;
-    /** @private */
-    formResetCallback(): void;
-    /** @private */
-    formStateRestoreCallback(state: string): void;
-}
-export {};