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

package/button/lib/_shared.scss

@@ -7,7 +7,7 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../ripple/ripple-theme';
+@use '../../ripple/ripple';
 @use '../../sass/color';
 @use '../../sass/dom';
 @use '../../sass/typography';
@@ -25,7 +25,7 @@
      */
     vertical-align: top;
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         hover-state-layer-color: var(--_hover-state-layer-color),
         focus-state-layer-color: var(--_focus-state-layer-color),

package/checkbox/lib/_checkbox.scss

@@ -128,7 +128,7 @@ $_checkmark-bottom-left: 7px, -14px;
       (
         offset-vertical: -2px,
         offset-horizontal: -2px,
-        shape: map.get(tokens.md-sys-shape-values(), corner-small),
+        shape: map.get(tokens.md-sys-shape-values(), corner-full),
       )
     );
   }

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-height: var(--md-checkbox-container-height, 18px);--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-width: var(--md-checkbox-container-width, 18px);--_error-focus-state-layer-color: var(--md-checkbox-error-focus-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-hover-state-layer-color: var(--md-checkbox-error-hover-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-hover-state-layer-opacity: var(--md-checkbox-error-hover-state-layer-opacity, 0.08);--_error-pressed-state-layer-color: var(--md-checkbox-error-pressed-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-pressed-state-layer-opacity: var(--md-checkbox-error-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fffbfe));--_selected-error-container-color: var(--md-checkbox-selected-error-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-focus-container-color: var(--md-checkbox-selected-error-focus-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-focus-icon-color: var(--md-checkbox-selected-error-focus-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-hover-container-color: var(--md-checkbox-selected-error-hover-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-hover-icon-color: var(--md-checkbox-selected-error-hover-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-icon-color: var(--md-checkbox-selected-error-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-pressed-container-color: var(--md-checkbox-selected-error-pressed-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-pressed-icon-color: var(--md-checkbox-selected-error-pressed-icon-color, var(--md-sys-color-on-error, #fff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-focus-state-layer-color: var(--md-checkbox-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-checkbox-selected-focus-state-layer-opacity, 0.12);--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_unselected-disabled-container-opacity: var(--md-checkbox-unselected-disabled-container-opacity, 0.38);--_unselected-disabled-outline-color: var(--md-checkbox-unselected-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-disabled-outline-width: var(--md-checkbox-unselected-disabled-outline-width, 2px);--_unselected-error-focus-outline-color: var(--md-checkbox-unselected-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-focus-outline-width: var(--md-checkbox-unselected-error-focus-outline-width, 2px);--_unselected-error-hover-outline-color: var(--md-checkbox-unselected-error-hover-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-hover-outline-width: var(--md-checkbox-unselected-error-hover-outline-width, 2px);--_unselected-error-outline-color: var(--md-checkbox-unselected-error-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-pressed-outline-color: var(--md-checkbox-unselected-error-pressed-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-pressed-outline-width: var(--md-checkbox-unselected-error-pressed-outline-width, 2px);--_unselected-focus-outline-color: var(--md-checkbox-unselected-focus-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-outline-width: var(--md-checkbox-unselected-focus-outline-width, 2px);--_unselected-focus-state-layer-color: var(--md-checkbox-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-opacity: var(--md-checkbox-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-outline-color: var(--md-checkbox-unselected-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-outline-width: var(--md-checkbox-unselected-hover-outline-width, 2px);--_unselected-hover-state-layer-color: var(--md-checkbox-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-opacity: var(--md-checkbox-unselected-hover-state-layer-opacity, 0.08);--_unselected-outline-color: var(--md-checkbox-unselected-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-outline-width: var(--md-checkbox-unselected-outline-width, 2px);--_unselected-pressed-outline-color: var(--md-checkbox-unselected-pressed-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-outline-width: var(--md-checkbox-unselected-pressed-outline-width, 2px);--_unselected-pressed-state-layer-color: var(--md-checkbox-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-checkbox-unselected-pressed-state-layer-opacity, 0.12);border-radius:var(--_container-shape);display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px}input{appearance:none;inset:0;margin:0;outline:none;position:absolute}.container{border-radius:inherit;height:100%;position:relative;width:100%}.outline,.background,md-ripple,.icon{inset:0;margin:auto;position:absolute}.outline,.background{border-radius:inherit;height:var(--_container-height);width:var(--_container-width)}.outline{border-color:var(--_unselected-outline-color);border-style:solid;border-width:var(--_unselected-outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}.selected .background,.selected .icon{opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-focus-ring{--md-focus-ring-shape-start-start:8px;--md-focus-ring-shape-start-end:8px;--md-focus-ring-shape-end-end:8px;--md-focus-ring-shape-end-start:8px;--md-focus-ring-offset-vertical:-2px;--md-focus-ring-offset-horizontal:-2px}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size);--md-ripple-focus-state-layer-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_unselected-pressed-state-layer-opacity);--md-ripple-state-layer-shape:var(--_state-layer-shape)}.selected md-ripple{--md-ripple-focus-state-layer-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_selected-pressed-state-layer-opacity)}.error md-ripple{--md-ripple-focus-state-layer-color:var(--_error-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_error-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_error-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_error-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_error-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}.error .outline{border-color:var(--_unselected-error-outline-color)}.error .background{background:var(--_selected-error-container-color)}.error .icon{fill:var(--_selected-error-icon-color)}:host(:hover) .outline{border-color:var(--_unselected-hover-outline-color);border-width:var(--_unselected-hover-outline-width)}:host(:hover) .background{background:var(--_selected-hover-container-color)}:host(:hover) .icon{fill:var(--_selected-hover-icon-color)}:host(:hover) .error .outline{border-color:var(--_unselected-error-hover-outline-color);border-width:var(--_unselected-error-hover-outline-width)}:host(:hover) .error .background{background:var(--_selected-error-hover-container-color)}:host(:hover) .error .icon{fill:var(--_selected-error-hover-icon-color)}:host(:focus-within) .outline{border-color:var(--_unselected-focus-outline-color);border-width:var(--_unselected-focus-outline-width)}:host(:focus-within) .background{background:var(--_selected-focus-container-color)}:host(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:host(:focus-within) .error .outline{border-color:var(--_unselected-error-focus-outline-color);border-width:var(--_unselected-error-focus-outline-width)}:host(:focus-within) .error .background{background:var(--_selected-error-focus-container-color)}:host(:focus-within) .error .icon{fill:var(--_selected-error-focus-icon-color)}:host(:active) .outline{border-color:var(--_unselected-pressed-outline-color);border-width:var(--_unselected-pressed-outline-width)}:host(:active) .background{background:var(--_selected-pressed-container-color)}:host(:active) .icon{fill:var(--_selected-pressed-icon-color)}:host(:active) .error .outline{border-color:var(--_unselected-error-pressed-outline-color);border-width:var(--_unselected-error-pressed-outline-width)}:host(:active) .error .background{background:var(--_selected-error-pressed-container-color)}:host(:active) .error .icon{fill:var(--_selected-error-pressed-icon-color)}:host([disabled]) .background,:host([disabled]) .icon,:host([disabled]) .mark,.prev-disabled .background,.prev-disabled .icon,.prev-disabled .mark{animation-duration:0s;transition-duration:0s}:host([disabled]) .outline{border-color:var(--_unselected-disabled-outline-color);border-width:var(--_unselected-disabled-outline-width);opacity:var(--_unselected-disabled-container-opacity)}:host([disabled]) .selected .outline{visibility:hidden}:host([disabled]) .selected .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:host([disabled]) .icon{fill:var(--_selected-disabled-icon-color)}/*# sourceMappingURL=checkbox-styles.css.map */
+export const styles = css `:host{--_container-height: var(--md-checkbox-container-height, 18px);--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-width: var(--md-checkbox-container-width, 18px);--_error-focus-state-layer-color: var(--md-checkbox-error-focus-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-hover-state-layer-color: var(--md-checkbox-error-hover-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-hover-state-layer-opacity: var(--md-checkbox-error-hover-state-layer-opacity, 0.08);--_error-pressed-state-layer-color: var(--md-checkbox-error-pressed-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-pressed-state-layer-opacity: var(--md-checkbox-error-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fffbfe));--_selected-error-container-color: var(--md-checkbox-selected-error-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-focus-container-color: var(--md-checkbox-selected-error-focus-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-focus-icon-color: var(--md-checkbox-selected-error-focus-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-hover-container-color: var(--md-checkbox-selected-error-hover-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-hover-icon-color: var(--md-checkbox-selected-error-hover-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-icon-color: var(--md-checkbox-selected-error-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-pressed-container-color: var(--md-checkbox-selected-error-pressed-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-pressed-icon-color: var(--md-checkbox-selected-error-pressed-icon-color, var(--md-sys-color-on-error, #fff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-focus-state-layer-color: var(--md-checkbox-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-checkbox-selected-focus-state-layer-opacity, 0.12);--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_unselected-disabled-container-opacity: var(--md-checkbox-unselected-disabled-container-opacity, 0.38);--_unselected-disabled-outline-color: var(--md-checkbox-unselected-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-disabled-outline-width: var(--md-checkbox-unselected-disabled-outline-width, 2px);--_unselected-error-focus-outline-color: var(--md-checkbox-unselected-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-focus-outline-width: var(--md-checkbox-unselected-error-focus-outline-width, 2px);--_unselected-error-hover-outline-color: var(--md-checkbox-unselected-error-hover-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-hover-outline-width: var(--md-checkbox-unselected-error-hover-outline-width, 2px);--_unselected-error-outline-color: var(--md-checkbox-unselected-error-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-pressed-outline-color: var(--md-checkbox-unselected-error-pressed-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-pressed-outline-width: var(--md-checkbox-unselected-error-pressed-outline-width, 2px);--_unselected-focus-outline-color: var(--md-checkbox-unselected-focus-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-outline-width: var(--md-checkbox-unselected-focus-outline-width, 2px);--_unselected-focus-state-layer-color: var(--md-checkbox-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-opacity: var(--md-checkbox-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-outline-color: var(--md-checkbox-unselected-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-outline-width: var(--md-checkbox-unselected-hover-outline-width, 2px);--_unselected-hover-state-layer-color: var(--md-checkbox-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-opacity: var(--md-checkbox-unselected-hover-state-layer-opacity, 0.08);--_unselected-outline-color: var(--md-checkbox-unselected-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-outline-width: var(--md-checkbox-unselected-outline-width, 2px);--_unselected-pressed-outline-color: var(--md-checkbox-unselected-pressed-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-outline-width: var(--md-checkbox-unselected-pressed-outline-width, 2px);--_unselected-pressed-state-layer-color: var(--md-checkbox-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-checkbox-unselected-pressed-state-layer-opacity, 0.12);border-radius:var(--_container-shape);display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px}input{appearance:none;inset:0;margin:0;outline:none;position:absolute}.container{border-radius:inherit;height:100%;position:relative;width:100%}.outline,.background,md-ripple,.icon{inset:0;margin:auto;position:absolute}.outline,.background{border-radius:inherit;height:var(--_container-height);width:var(--_container-width)}.outline{border-color:var(--_unselected-outline-color);border-style:solid;border-width:var(--_unselected-outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}.selected .background,.selected .icon{opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-focus-ring{--md-focus-ring-shape-start-start:9999px;--md-focus-ring-shape-start-end:9999px;--md-focus-ring-shape-end-end:9999px;--md-focus-ring-shape-end-start:9999px;--md-focus-ring-offset-vertical:-2px;--md-focus-ring-offset-horizontal:-2px}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size);--md-ripple-focus-state-layer-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_unselected-pressed-state-layer-opacity);--md-ripple-state-layer-shape:var(--_state-layer-shape)}.selected md-ripple{--md-ripple-focus-state-layer-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_selected-pressed-state-layer-opacity)}.error md-ripple{--md-ripple-focus-state-layer-color:var(--_error-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_error-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_error-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_error-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_error-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}.error .outline{border-color:var(--_unselected-error-outline-color)}.error .background{background:var(--_selected-error-container-color)}.error .icon{fill:var(--_selected-error-icon-color)}:host(:hover) .outline{border-color:var(--_unselected-hover-outline-color);border-width:var(--_unselected-hover-outline-width)}:host(:hover) .background{background:var(--_selected-hover-container-color)}:host(:hover) .icon{fill:var(--_selected-hover-icon-color)}:host(:hover) .error .outline{border-color:var(--_unselected-error-hover-outline-color);border-width:var(--_unselected-error-hover-outline-width)}:host(:hover) .error .background{background:var(--_selected-error-hover-container-color)}:host(:hover) .error .icon{fill:var(--_selected-error-hover-icon-color)}:host(:focus-within) .outline{border-color:var(--_unselected-focus-outline-color);border-width:var(--_unselected-focus-outline-width)}:host(:focus-within) .background{background:var(--_selected-focus-container-color)}:host(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:host(:focus-within) .error .outline{border-color:var(--_unselected-error-focus-outline-color);border-width:var(--_unselected-error-focus-outline-width)}:host(:focus-within) .error .background{background:var(--_selected-error-focus-container-color)}:host(:focus-within) .error .icon{fill:var(--_selected-error-focus-icon-color)}:host(:active) .outline{border-color:var(--_unselected-pressed-outline-color);border-width:var(--_unselected-pressed-outline-width)}:host(:active) .background{background:var(--_selected-pressed-container-color)}:host(:active) .icon{fill:var(--_selected-pressed-icon-color)}:host(:active) .error .outline{border-color:var(--_unselected-error-pressed-outline-color);border-width:var(--_unselected-error-pressed-outline-width)}:host(:active) .error .background{background:var(--_selected-error-pressed-container-color)}:host(:active) .error .icon{fill:var(--_selected-error-pressed-icon-color)}:host([disabled]) .background,:host([disabled]) .icon,:host([disabled]) .mark,.prev-disabled .background,.prev-disabled .icon,.prev-disabled .mark{animation-duration:0s;transition-duration:0s}:host([disabled]) .outline{border-color:var(--_unselected-disabled-outline-color);border-width:var(--_unselected-disabled-outline-width);opacity:var(--_unselected-disabled-container-opacity)}:host([disabled]) .selected .outline{visibility:hidden}:host([disabled]) .selected .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:host([disabled]) .icon{fill:var(--_selected-disabled-icon-color)}/*# sourceMappingURL=checkbox-styles.css.map */
 `;
 //# sourceMappingURL=checkbox-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-styles.css.js","sourceRoot":"","sources":["checkbox-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{--_container-height: var(--md-checkbox-container-height, 18px);--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-width: var(--md-checkbox-container-width, 18px);--_error-focus-state-layer-color: var(--md-checkbox-error-focus-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-hover-state-layer-color: var(--md-checkbox-error-hover-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-hover-state-layer-opacity: var(--md-checkbox-error-hover-state-layer-opacity, 0.08);--_error-pressed-state-layer-color: var(--md-checkbox-error-pressed-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-pressed-state-layer-opacity: var(--md-checkbox-error-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fffbfe));--_selected-error-container-color: var(--md-checkbox-selected-error-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-focus-container-color: var(--md-checkbox-selected-error-focus-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-focus-icon-color: var(--md-checkbox-selected-error-focus-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-hover-container-color: var(--md-checkbox-selected-error-hover-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-hover-icon-color: var(--md-checkbox-selected-error-hover-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-icon-color: var(--md-checkbox-selected-error-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-pressed-container-color: var(--md-checkbox-selected-error-pressed-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-pressed-icon-color: var(--md-checkbox-selected-error-pressed-icon-color, var(--md-sys-color-on-error, #fff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-focus-state-layer-color: var(--md-checkbox-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-checkbox-selected-focus-state-layer-opacity, 0.12);--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_unselected-disabled-container-opacity: var(--md-checkbox-unselected-disabled-container-opacity, 0.38);--_unselected-disabled-outline-color: var(--md-checkbox-unselected-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-disabled-outline-width: var(--md-checkbox-unselected-disabled-outline-width, 2px);--_unselected-error-focus-outline-color: var(--md-checkbox-unselected-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-focus-outline-width: var(--md-checkbox-unselected-error-focus-outline-width, 2px);--_unselected-error-hover-outline-color: var(--md-checkbox-unselected-error-hover-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-hover-outline-width: var(--md-checkbox-unselected-error-hover-outline-width, 2px);--_unselected-error-outline-color: var(--md-checkbox-unselected-error-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-pressed-outline-color: var(--md-checkbox-unselected-error-pressed-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-pressed-outline-width: var(--md-checkbox-unselected-error-pressed-outline-width, 2px);--_unselected-focus-outline-color: var(--md-checkbox-unselected-focus-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-outline-width: var(--md-checkbox-unselected-focus-outline-width, 2px);--_unselected-focus-state-layer-color: var(--md-checkbox-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-opacity: var(--md-checkbox-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-outline-color: var(--md-checkbox-unselected-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-outline-width: var(--md-checkbox-unselected-hover-outline-width, 2px);--_unselected-hover-state-layer-color: var(--md-checkbox-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-opacity: var(--md-checkbox-unselected-hover-state-layer-opacity, 0.08);--_unselected-outline-color: var(--md-checkbox-unselected-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-outline-width: var(--md-checkbox-unselected-outline-width, 2px);--_unselected-pressed-outline-color: var(--md-checkbox-unselected-pressed-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-outline-width: var(--md-checkbox-unselected-pressed-outline-width, 2px);--_unselected-pressed-state-layer-color: var(--md-checkbox-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-checkbox-unselected-pressed-state-layer-opacity, 0.12);border-radius:var(--_container-shape);display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px}input{appearance:none;inset:0;margin:0;outline:none;position:absolute}.container{border-radius:inherit;height:100%;position:relative;width:100%}.outline,.background,md-ripple,.icon{inset:0;margin:auto;position:absolute}.outline,.background{border-radius:inherit;height:var(--_container-height);width:var(--_container-width)}.outline{border-color:var(--_unselected-outline-color);border-style:solid;border-width:var(--_unselected-outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}.selected .background,.selected .icon{opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-focus-ring{--md-focus-ring-shape-start-start:8px;--md-focus-ring-shape-start-end:8px;--md-focus-ring-shape-end-end:8px;--md-focus-ring-shape-end-start:8px;--md-focus-ring-offset-vertical:-2px;--md-focus-ring-offset-horizontal:-2px}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size);--md-ripple-focus-state-layer-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_unselected-pressed-state-layer-opacity);--md-ripple-state-layer-shape:var(--_state-layer-shape)}.selected md-ripple{--md-ripple-focus-state-layer-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_selected-pressed-state-layer-opacity)}.error md-ripple{--md-ripple-focus-state-layer-color:var(--_error-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_error-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_error-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_error-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_error-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}.error .outline{border-color:var(--_unselected-error-outline-color)}.error .background{background:var(--_selected-error-container-color)}.error .icon{fill:var(--_selected-error-icon-color)}:host(:hover) .outline{border-color:var(--_unselected-hover-outline-color);border-width:var(--_unselected-hover-outline-width)}:host(:hover) .background{background:var(--_selected-hover-container-color)}:host(:hover) .icon{fill:var(--_selected-hover-icon-color)}:host(:hover) .error .outline{border-color:var(--_unselected-error-hover-outline-color);border-width:var(--_unselected-error-hover-outline-width)}:host(:hover) .error .background{background:var(--_selected-error-hover-container-color)}:host(:hover) .error .icon{fill:var(--_selected-error-hover-icon-color)}:host(:focus-within) .outline{border-color:var(--_unselected-focus-outline-color);border-width:var(--_unselected-focus-outline-width)}:host(:focus-within) .background{background:var(--_selected-focus-container-color)}:host(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:host(:focus-within) .error .outline{border-color:var(--_unselected-error-focus-outline-color);border-width:var(--_unselected-error-focus-outline-width)}:host(:focus-within) .error .background{background:var(--_selected-error-focus-container-color)}:host(:focus-within) .error .icon{fill:var(--_selected-error-focus-icon-color)}:host(:active) .outline{border-color:var(--_unselected-pressed-outline-color);border-width:var(--_unselected-pressed-outline-width)}:host(:active) .background{background:var(--_selected-pressed-container-color)}:host(:active) .icon{fill:var(--_selected-pressed-icon-color)}:host(:active) .error .outline{border-color:var(--_unselected-error-pressed-outline-color);border-width:var(--_unselected-error-pressed-outline-width)}:host(:active) .error .background{background:var(--_selected-error-pressed-container-color)}:host(:active) .error .icon{fill:var(--_selected-error-pressed-icon-color)}:host([disabled]) .background,:host([disabled]) .icon,:host([disabled]) .mark,.prev-disabled .background,.prev-disabled .icon,.prev-disabled .mark{animation-duration:0s;transition-duration:0s}:host([disabled]) .outline{border-color:var(--_unselected-disabled-outline-color);border-width:var(--_unselected-disabled-outline-width);opacity:var(--_unselected-disabled-container-opacity)}:host([disabled]) .selected .outline{visibility:hidden}:host([disabled]) .selected .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:host([disabled]) .icon{fill:var(--_selected-disabled-icon-color)}/*# sourceMappingURL=checkbox-styles.css.map */\n`;\n "]}
+{"version":3,"file":"checkbox-styles.css.js","sourceRoot":"","sources":["checkbox-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{--_container-height: var(--md-checkbox-container-height, 18px);--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-width: var(--md-checkbox-container-width, 18px);--_error-focus-state-layer-color: var(--md-checkbox-error-focus-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-hover-state-layer-color: var(--md-checkbox-error-hover-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-hover-state-layer-opacity: var(--md-checkbox-error-hover-state-layer-opacity, 0.08);--_error-pressed-state-layer-color: var(--md-checkbox-error-pressed-state-layer-color, var(--md-sys-color-error, #b3261e));--_error-pressed-state-layer-opacity: var(--md-checkbox-error-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fffbfe));--_selected-error-container-color: var(--md-checkbox-selected-error-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-focus-container-color: var(--md-checkbox-selected-error-focus-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-focus-icon-color: var(--md-checkbox-selected-error-focus-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-hover-container-color: var(--md-checkbox-selected-error-hover-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-hover-icon-color: var(--md-checkbox-selected-error-hover-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-icon-color: var(--md-checkbox-selected-error-icon-color, var(--md-sys-color-on-error, #fff));--_selected-error-pressed-container-color: var(--md-checkbox-selected-error-pressed-container-color, var(--md-sys-color-error, #b3261e));--_selected-error-pressed-icon-color: var(--md-checkbox-selected-error-pressed-icon-color, var(--md-sys-color-on-error, #fff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-focus-state-layer-color: var(--md-checkbox-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-checkbox-selected-focus-state-layer-opacity, 0.12);--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_unselected-disabled-container-opacity: var(--md-checkbox-unselected-disabled-container-opacity, 0.38);--_unselected-disabled-outline-color: var(--md-checkbox-unselected-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-disabled-outline-width: var(--md-checkbox-unselected-disabled-outline-width, 2px);--_unselected-error-focus-outline-color: var(--md-checkbox-unselected-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-focus-outline-width: var(--md-checkbox-unselected-error-focus-outline-width, 2px);--_unselected-error-hover-outline-color: var(--md-checkbox-unselected-error-hover-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-hover-outline-width: var(--md-checkbox-unselected-error-hover-outline-width, 2px);--_unselected-error-outline-color: var(--md-checkbox-unselected-error-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-pressed-outline-color: var(--md-checkbox-unselected-error-pressed-outline-color, var(--md-sys-color-error, #b3261e));--_unselected-error-pressed-outline-width: var(--md-checkbox-unselected-error-pressed-outline-width, 2px);--_unselected-focus-outline-color: var(--md-checkbox-unselected-focus-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-outline-width: var(--md-checkbox-unselected-focus-outline-width, 2px);--_unselected-focus-state-layer-color: var(--md-checkbox-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-opacity: var(--md-checkbox-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-outline-color: var(--md-checkbox-unselected-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-outline-width: var(--md-checkbox-unselected-hover-outline-width, 2px);--_unselected-hover-state-layer-color: var(--md-checkbox-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-opacity: var(--md-checkbox-unselected-hover-state-layer-opacity, 0.08);--_unselected-outline-color: var(--md-checkbox-unselected-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-outline-width: var(--md-checkbox-unselected-outline-width, 2px);--_unselected-pressed-outline-color: var(--md-checkbox-unselected-pressed-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-outline-width: var(--md-checkbox-unselected-pressed-outline-width, 2px);--_unselected-pressed-state-layer-color: var(--md-checkbox-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-pressed-state-layer-opacity: var(--md-checkbox-unselected-pressed-state-layer-opacity, 0.12);border-radius:var(--_container-shape);display:inline-flex;height:48px;position:relative;vertical-align:top;width:48px}input{appearance:none;inset:0;margin:0;outline:none;position:absolute}.container{border-radius:inherit;height:100%;position:relative;width:100%}.outline,.background,md-ripple,.icon{inset:0;margin:auto;position:absolute}.outline,.background{border-radius:inherit;height:var(--_container-height);width:var(--_container-width)}.outline{border-color:var(--_unselected-outline-color);border-style:solid;border-width:var(--_unselected-outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}.selected .background,.selected .icon{opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-focus-ring{--md-focus-ring-shape-start-start:9999px;--md-focus-ring-shape-start-end:9999px;--md-focus-ring-shape-end-end:9999px;--md-focus-ring-shape-end-start:9999px;--md-focus-ring-offset-vertical:-2px;--md-focus-ring-offset-horizontal:-2px}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size);--md-ripple-focus-state-layer-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_unselected-pressed-state-layer-opacity);--md-ripple-state-layer-shape:var(--_state-layer-shape)}.selected md-ripple{--md-ripple-focus-state-layer-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-state-layer-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-state-layer-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_selected-pressed-state-layer-opacity)}.error md-ripple{--md-ripple-focus-state-layer-color:var(--_error-focus-state-layer-color);--md-ripple-hover-state-layer-color:var(--_error-hover-state-layer-color);--md-ripple-hover-state-layer-opacity:var(--_error-hover-state-layer-opacity);--md-ripple-pressed-state-layer-color:var(--_error-pressed-state-layer-color);--md-ripple-pressed-state-layer-opacity:var(--_error-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}.error .outline{border-color:var(--_unselected-error-outline-color)}.error .background{background:var(--_selected-error-container-color)}.error .icon{fill:var(--_selected-error-icon-color)}:host(:hover) .outline{border-color:var(--_unselected-hover-outline-color);border-width:var(--_unselected-hover-outline-width)}:host(:hover) .background{background:var(--_selected-hover-container-color)}:host(:hover) .icon{fill:var(--_selected-hover-icon-color)}:host(:hover) .error .outline{border-color:var(--_unselected-error-hover-outline-color);border-width:var(--_unselected-error-hover-outline-width)}:host(:hover) .error .background{background:var(--_selected-error-hover-container-color)}:host(:hover) .error .icon{fill:var(--_selected-error-hover-icon-color)}:host(:focus-within) .outline{border-color:var(--_unselected-focus-outline-color);border-width:var(--_unselected-focus-outline-width)}:host(:focus-within) .background{background:var(--_selected-focus-container-color)}:host(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:host(:focus-within) .error .outline{border-color:var(--_unselected-error-focus-outline-color);border-width:var(--_unselected-error-focus-outline-width)}:host(:focus-within) .error .background{background:var(--_selected-error-focus-container-color)}:host(:focus-within) .error .icon{fill:var(--_selected-error-focus-icon-color)}:host(:active) .outline{border-color:var(--_unselected-pressed-outline-color);border-width:var(--_unselected-pressed-outline-width)}:host(:active) .background{background:var(--_selected-pressed-container-color)}:host(:active) .icon{fill:var(--_selected-pressed-icon-color)}:host(:active) .error .outline{border-color:var(--_unselected-error-pressed-outline-color);border-width:var(--_unselected-error-pressed-outline-width)}:host(:active) .error .background{background:var(--_selected-error-pressed-container-color)}:host(:active) .error .icon{fill:var(--_selected-error-pressed-icon-color)}:host([disabled]) .background,:host([disabled]) .icon,:host([disabled]) .mark,.prev-disabled .background,.prev-disabled .icon,.prev-disabled .mark{animation-duration:0s;transition-duration:0s}:host([disabled]) .outline{border-color:var(--_unselected-disabled-outline-color);border-width:var(--_unselected-disabled-outline-width);opacity:var(--_unselected-disabled-container-opacity)}:host([disabled]) .selected .outline{visibility:hidden}:host([disabled]) .selected .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:host([disabled]) .icon{fill:var(--_selected-disabled-icon-color)}/*# sourceMappingURL=checkbox-styles.css.map */\n`;\n "]}

package/chips/chip/lib/_chip-theme.scss

@@ -13,7 +13,7 @@
 @use 'sass:color';
 
 @use '../../../elevationold/lib/elevation-theme';
-@use '../../../ripple/ripple-theme';
+@use '../../../ripple/ripple';
 @use '../../../sass/dom';
 @use '../../../sass/resolvers';
 @use '../../../sass/theme';
@@ -452,7 +452,7 @@ $_custom-property-prefix: 'chip';
 
 @mixin _ripple-theme($ripple-theme) {
   .md3-chip__action--primary {
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         focus-state-layer-color: map.get($ripple-theme, focus-state-layer-color),
         focus-state-layer-opacity:
@@ -505,7 +505,7 @@ $_custom-property-prefix: 'chip';
 @mixin _ripple-color($color, $opacity-map) {
   .md3-chip__action--primary {
     // TODO(b/240224981): Translate to md3 ripple
-    // @include ripple-theme.states(
+    // @include ripple.states(
     //   $color: $color,
     //   $opacity-map: $opacity-map,
     //   $ripple-target: $ripple-target
@@ -521,7 +521,7 @@ $_custom-property-prefix: 'chip';
 @mixin delete-action-ripple-color($color, $opacity-map: null) {
   .md3-chip__action--delete {
     // TODO(b/240224981): Translate to md3 ripple
-    // @include ripple-theme.states(
+    // @include ripple.states(
     //   $color: $color,
     //   $opacity-map: $opacity-map,
     //   $ripple-target: $ripple-target
@@ -742,7 +742,7 @@ $_custom-property-prefix: 'chip';
 @mixin _focus-outline-color($color) {
   .md3-chip__action--primary:not(.md3-chip__action--presentational) {
     // TODO(b/240224981): Translate to md3 ripple
-    // @include ripple-theme.focus() {
+    // @include ripple.focus() {
     //   &:before {
     //     @if $color {
     //       border-color: $color;
@@ -837,7 +837,7 @@ $_custom-property-prefix: 'chip';
 
   .md3-chip__action--primary:not(.md3-chip__action--presentational) {
     // TODO(b/240224981): Translate to md3 ripple
-    // @include ripple-theme.focus() {
+    // @include ripple.focus() {
     //   @include _text-label-color(map.get($color-or-map, focus));
     // }
   }
@@ -945,7 +945,7 @@ $_custom-property-prefix: 'chip';
 
   .md3-chip__action--primary:not(.md3-chip__action--presentational) {
     // TODO(b/240224981): Translate to md3 ripple
-    // @include ripple-theme.focus() {
+    // @include ripple.focus() {
     //   @include _icon-color(map.get($color-or-map, focus));
     // }
   }
@@ -992,7 +992,7 @@ $_custom-property-prefix: 'chip';
 
   .md3-chip__action--primary:not(.md3-chip__action--presentational) {
     // TODO(b/240224981): Translate to md3 ripple
-    // @include ripple-theme.focus() {
+    // @include ripple.focus() {
     //   @include _icon-container-color(
     //     map.get($color-or-map, focus)
     //   );
@@ -1061,7 +1061,7 @@ $_custom-property-prefix: 'chip';
 
   .md3-chip__action--delete {
     // TODO(b/240224981): Translate to md3 ripple
-    // @include ripple-theme.focus() {
+    // @include ripple.focus() {
     //   @include _delete-action-color(
     //     map.get($color-or-map, focus)
     //   );
@@ -1117,7 +1117,7 @@ $_custom-property-prefix: 'chip';
 
   .md3-chip__action--primary {
     // TODO(b/240224981): Translate to md3 ripple
-    // @include ripple-theme.focus() {
+    // @include ripple.focus() {
     //   @include _checkmark-color(map.get($color-or-map, focus));
     // }
   }

package/chips/chip/lib/_chip.scss

@@ -356,7 +356,7 @@
 
   .md3-chip__action--primary:not(.md3-chip__action--presentational) {
     // TODO(b/240224981): Convert to md3 ripple
-    // @include ripple-theme.focus() {
+    // @include ripple.focus() {
     //   .md3-chip__focus-ring {
     //     z-index: 1;
     //     display: block;
@@ -367,7 +367,7 @@
 
   .md3-chip__action--delete:not(.md3-chip__action--presentational) {
     // TODO(b/240224981): Convert to md3 ripple
-    // @include ripple-theme.focus() {
+    // @include ripple.focus() {
     .md3-chip__focus-ring {
       z-index: 1;
       display: block;

package/fab/lib/_shared.scss

@@ -10,7 +10,7 @@
 @use 'sass:meta';
 @use '../../elevation/lib/elevation';
 @use '../../focus/focus-ring';
-@use '../../ripple/ripple-theme';
+@use '../../ripple/ripple';
 @use '../../sass/theme';
 @use '../../sass/touch-target';
 
@@ -52,7 +52,7 @@
       )
     );
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         hover-state-layer-color: var(--_hover-state-layer-color),
         focus-state-layer-color: var(--_focus-state-layer-color),

package/iconbutton/lib/_filled-icon-button.scss

@@ -7,7 +7,7 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../ripple/ripple-theme';
+@use '../../ripple/ripple';
 @use '../../sass/theme';
 @use '../../tokens';
 @use './shared';
@@ -57,7 +57,7 @@ $_custom-property-prefix: 'filled-icon-button';
       color: var(--_disabled-icon-color);
     }
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         focus-state-layer-color: var(--_focus-state-layer-color),
         focus-state-layer-opacity: var(--_focus-state-layer-opacity),
@@ -87,7 +87,7 @@ $_custom-property-prefix: 'filled-icon-button';
       }
     }
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         focus-state-layer-color:
           var(--_toggle-unselected-focus-state-layer-color),
@@ -117,7 +117,7 @@ $_custom-property-prefix: 'filled-icon-button';
       }
     }
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
         hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),

package/iconbutton/lib/_filled-tonal-icon-button.scss

@@ -7,7 +7,7 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../ripple/ripple-theme';
+@use '../../ripple/ripple';
 @use '../../sass/theme';
 @use '../../tokens';
 @use './shared';
@@ -57,7 +57,7 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
       color: var(--_disabled-icon-color);
     }
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         focus-state-layer-color: var(--_focus-state-layer-color),
         focus-state-layer-opacity: var(--_focus-state-layer-opacity),
@@ -87,7 +87,7 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
       }
     }
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         focus-state-layer-color:
           var(--_toggle-unselected-focus-state-layer-color),
@@ -117,7 +117,7 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
       }
     }
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
         hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),

package/iconbutton/lib/_outlined-icon-button.scss

@@ -7,7 +7,7 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../ripple/ripple-theme';
+@use '../../ripple/ripple';
 @use '../../sass/resolvers';
 @use '../../sass/color';
 @use '../../sass/theme';
@@ -57,7 +57,7 @@ $_custom-property-prefix: 'outlined-icon-button';
     background-color: transparent;
     color: var(--_unselected-icon-color);
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         focus-state-layer-color: var(--_unselected-focus-state-layer-color),
         focus-state-layer-opacity: var(--_focus-state-layer-opacity),
@@ -134,7 +134,7 @@ $_custom-property-prefix: 'outlined-icon-button';
       background-color: var(--_disabled-selected-container-color);
     }
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         focus-state-layer-color: var(--_selected-focus-state-layer-color),
         focus-state-layer-opacity: var(--_focus-state-layer-opacity),

package/iconbutton/lib/_standard-icon-button.scss

@@ -7,7 +7,7 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../ripple/ripple-theme';
+@use '../../ripple/ripple';
 @use '../../sass/theme';
 @use '../../tokens';
 @use './shared';
@@ -44,7 +44,7 @@ $_custom-property-prefix: 'icon-button';
       calc((#{$touch-target-height} - #{var(--_state-layer-size)}) / 2)
     );
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         focus-state-layer-color: var(--_unselected-focus-state-layer-color),
         focus-state-layer-opacity: var(--_unselected-focus-state-layer-opacity),
@@ -90,7 +90,7 @@ $_custom-property-prefix: 'icon-button';
       }
     }
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         focus-state-layer-color: var(--_selected-focus-state-layer-color),
         focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),

package/navigationtab/lib/_navigation-tab.scss

@@ -9,7 +9,7 @@
 @use 'sass:map';
 
 @use '../../badge/badge';
-@use '../../ripple/ripple-theme';
+@use '../../ripple/ripple';
 @use '../../focus/focus-ring';
 @use '../../motion/animation';
 @use '../../sass/theme';
@@ -209,7 +209,7 @@ $_custom-property-prefix: 'navigation-bar';
       }
     }
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         hover-state-layer-color: var(--_active-hover-state-layer-color),
         focus-state-layer-color: var(--_active-focus-state-layer-color),
@@ -260,7 +260,7 @@ $_custom-property-prefix: 'navigation-bar';
       }
     }
 
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         hover-state-layer-color: var(--_inactive-hover-state-layer-color),
         focus-state-layer-color: var(--_inactive-focus-state-layer-color),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material/web",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "publishConfig": {
     "access": "public"
   },

package/radio/lib/_radio-theme.scss

@@ -9,7 +9,7 @@
 @use 'sass:map';
 @use 'sass:selector';
 
-@use '../../ripple/ripple-theme';
+@use '../../ripple/ripple';
 @use '../../sass/theme';
 @use '../../tokens';
 
@@ -71,7 +71,7 @@ $custom-property-prefix: 'radio';
     @include _touch-target($size: map.get($theme, _touch-target-size));
   }
 
-  @include ripple-theme.theme(
+  @include ripple.theme(
     (
       hover-state-layer-color:
         map.get($theme, unselected-hover-state-layer-color),
@@ -89,7 +89,7 @@ $custom-property-prefix: 'radio';
   );
 
   @include _checked-selector() {
-    @include ripple-theme.theme(
+    @include ripple.theme(
       (
         hover-state-layer-color:
           map.get($theme, selected-hover-state-layer-color),

package/radio/lib/radio.d.ts

@@ -5,22 +5,16 @@
  */
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
-import { PropertyValues, TemplateResult } from 'lit';
-import { ActionElement, BeginPressConfig, EndPressConfig } from '../../actionelement/action-element.js';
-import { MdRipple } from '../../ripple/ripple.js';
-import { SingleSelectionController } from './single-selection-controller.js';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { getFormValue } from '../../controller/form-controller.js';
 /**
  * @fires checked
  * @soyCompatible
  */
-export declare class Radio extends ActionElement {
-    protected formElement: HTMLInputElement;
-    ripple: MdRipple;
-    protected _checked: boolean;
-    protected showFocusRing: boolean;
-    global: boolean;
+export declare class Radio extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static formAssociated: boolean;
     get checked(): boolean;
-    protected getChecked(): boolean;
     /**
      * We define our own getter/setter for `checked` because we need to track
      * changes to it synchronously.
@@ -41,9 +35,15 @@ export declare class Radio extends ActionElement {
      * and we couldn't tell that radio1 was the most recently checked.
      */
     set checked(isChecked: boolean);
-    protected setChecked(isChecked: boolean): void;
+    private _checked;
     disabled: boolean;
+    /**
+     * The element value to use in form submission when checked.
+     */
     value: string;
+    /**
+     * The HTML name to use in form submission.
+     */
     name: string;
     /**
      * Touch target extends beyond visual boundary of a component by default.
@@ -51,40 +51,39 @@ export declare class Radio extends ActionElement {
      * @see https://material.io/design/usability/accessibility.html
      */
     reducedTouchTarget: boolean;
-    protected selectionController?: SingleSelectionController;
     /**
      * input's tabindex is updated based on checked status.
      * Tab navigation will be removed from unchecked radios.
      */
     formElementTabIndex: number;
-    protected focused: boolean;
     ariaLabel: string;
-    ariaLabelledBy: string;
-    ariaDescribedBy: undefined | string;
-    protected rippleElement: MdRipple | null;
-    /** @soyTemplate */
-    protected renderRipple(): TemplateResult | string;
-    /** @soyTemplate */
-    protected renderFocusRing(): TemplateResult;
-    get isRippleActive(): boolean;
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form(): HTMLFormElement;
+    private focused;
+    private readonly input;
+    private readonly ripple;
+    private selectionController?;
+    private showFocusRing;
+    private showRipple;
+    constructor();
+    [getFormValue](): string;
+    focus(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues): void;
-    protected createAdapter(): void;
-    beginPress({ positionEvent }: BeginPressConfig): void;
-    endPress({ cancelled }: EndPressConfig): void;
-    click(): void;
-    protected handleFocus(): void;
-    protected handleBlur(): void;
-    protected setFormData(formData: FormData): void;
     /**
      * @soyTemplate
      * @soyAttributes radioAttributes: input
      * @soyClasses radioClasses: .md3-radio
      */
     protected render(): TemplateResult;
-    protected handlePointerEnter(): void;
-    handlePointerDown(event: PointerEvent): void;
-    handlePointerLeave(e: PointerEvent): void;
-    protected changeHandler(): void;
+    private handleBlur;
+    private handleFocus;
+    private handleChange;
+    private handlePointerDown;
+    private readonly getRipple;
+    private readonly renderRipple;
+    private renderFocusRing;
 }