@material/web 1.0.0-pre.6 → 1.0.0-pre.8

package/tokens/_md-comp-outlined-text-field.scss

@@ -11,15 +11,81 @@
 @use './md-sys-shape';
 @use './md-sys-typescale';
 @use './v0_172/md-comp-outlined-text-field';
+@use './values';
 // go/keep-sorted end
 
-$_default: (
-  'md-sys-color': md-sys-color.values-light(),
-  'md-sys-shape': md-sys-shape.values(),
-  'md-sys-typescale': md-sys-typescale.values(),
+$supported-tokens: (
+  // go/keep-sorted start
+  'caret-color',
+  'container-shape',
+  'disabled-input-text-color',
+  'disabled-input-text-opacity',
+  'disabled-label-text-color',
+  'disabled-label-text-opacity',
+  'disabled-leading-icon-color',
+  'disabled-leading-icon-opacity',
+  'disabled-outline-color',
+  'disabled-outline-opacity',
+  'disabled-outline-width',
+  'disabled-supporting-text-color',
+  'disabled-supporting-text-opacity',
+  'disabled-trailing-icon-color',
+  'disabled-trailing-icon-opacity',
+  'error-focus-caret-color',
+  'error-focus-input-text-color',
+  'error-focus-label-text-color',
+  'error-focus-leading-icon-color',
+  'error-focus-outline-color',
+  'error-focus-supporting-text-color',
+  'error-focus-trailing-icon-color',
+  'error-hover-input-text-color',
+  'error-hover-label-text-color',
+  'error-hover-leading-icon-color',
+  'error-hover-outline-color',
+  'error-hover-supporting-text-color',
+  'error-hover-trailing-icon-color',
+  'error-input-text-color',
+  'error-label-text-color',
+  'error-leading-icon-color',
+  'error-outline-color',
+  'error-supporting-text-color',
+  'error-trailing-icon-color',
+  'focus-input-text-color',
+  'focus-label-text-color',
+  'focus-leading-icon-color',
+  'focus-outline-color',
+  'focus-outline-width',
+  'focus-supporting-text-color',
+  'focus-trailing-icon-color',
+  'hover-input-text-color',
+  'hover-label-text-color',
+  'hover-leading-icon-color',
+  'hover-outline-color',
+  'hover-outline-width',
+  'hover-supporting-text-color',
+  'hover-trailing-icon-color',
+  'input-text-color',
+  'input-text-placeholder-color',
+  'input-text-prefix-color',
+  'input-text-suffix-color',
+  'input-text-type',
+  'label-text-color',
+  'label-text-populated-line-height',
+  'label-text-populated-size',
+  'label-text-type',
+  'leading-icon-color',
+  'leading-icon-size',
+  'outline-color',
+  'outline-width',
+  'supporting-text-color',
+  'supporting-text-type',
+  'trailing-icon-color',
+  'trailing-icon-size',
+  // go/keep-sorted end
 );
 
-$_unsupported-tokens: (
+$unsupported-tokens: (
+  // go/keep-sorted start
   'input-text-font',
   'input-text-line-height',
   'input-text-size',
@@ -34,12 +100,22 @@ $_unsupported-tokens: (
   'supporting-text-line-height',
   'supporting-text-size',
   'supporting-text-tracking',
-  'supporting-text-weight'
+  'supporting-text-weight' // go/keep-sorted end
+);
+
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  $tokens: md-comp-outlined-text-field.values($deps, $exclude-hardcoded-values);
-  $tokens: map.remove($tokens, $_unsupported-tokens...);
+  $tokens: values.validate(
+    md-comp-outlined-text-field.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $unsupported-tokens
+  );
+
   // TODO(b/271876162): remove when tokens compiler emits typescale tokens
   $tokens: map.merge(
     $tokens,
@@ -49,5 +125,6 @@ $_unsupported-tokens: (
       'supporting-text-type': map.get($deps, 'md-sys-typescale', 'body-small'),
     )
   );
+
   @return $tokens;
 }

package/tokens/_md-comp-slider.scss

@@ -24,11 +24,23 @@ $_default: (
 );
 
 $_unsupported-tokens: (
+  'disabled-handle-opacity',
+  'label-container-elevation',
   'label-label-text-font',
   'label-label-text-line-height',
   'label-label-text-size',
   'label-label-text-tracking',
-  'label-label-text-weight'
+  'label-label-text-weight',
+  'track-elevation',
+  // for efficiency, tick marks are rendered as radial-gradients and
+  // have more limited customization
+  'with-tick-marks-active-container-opacity',
+  'with-tick-marks-container-shape',
+  'with-tick-marks-disabled-container-opacity',
+  'with-tick-marks-inactive-container-opacity',
+  // focus tokens no longer used.
+  'focus-state-layer-color',
+  'focus-state-layer-opacity'
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {

package/tokens/_md-comp-suggestion-chip.scss

@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../sass/shape';
 @use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
@@ -24,6 +23,8 @@ $supported-tokens: (
   'disabled-label-text-color',
   'disabled-label-text-opacity',
   'disabled-leading-icon-color',
+  'disabled-outline-color',
+  'disabled-outline-opacity',
   'elevated-container-color',
   'elevated-container-elevation',
   'elevated-container-shadow-color',
@@ -33,13 +34,9 @@ $supported-tokens: (
   'elevated-focus-container-elevation',
   'elevated-hover-container-elevation',
   'elevated-pressed-container-elevation',
-  'flat-disabled-outline-color',
-  'flat-disabled-outline-opacity',
-  'flat-focus-outline-color',
-  'flat-outline-color',
-  'flat-outline-width',
   'focus-label-text-color',
   'focus-leading-icon-color',
+  'focus-outline-color',
   'focus-state-layer-color',
   'focus-state-layer-opacity',
   'hover-label-text-color',
@@ -50,6 +47,8 @@ $supported-tokens: (
   'label-text-color',
   'label-text-type',
   'leading-icon-color',
+  'outline-color',
+  'outline-width',
   'pressed-label-text-color',
   'pressed-leading-icon-color',
   'pressed-state-layer-color',
@@ -59,12 +58,12 @@ $supported-tokens: (
 
 $unsupported-tokens: (
   // go/keep-sorted start
+  'container-elevation',
   'dragged-container-elevation',
   'dragged-label-text-color',
   'dragged-leading-icon-color',
   'dragged-state-layer-color',
   'dragged-state-layer-opacity',
-  'flat-container-elevation',
   'label-text-font',
   'label-text-line-height',
   'label-text-size',
@@ -73,20 +72,6 @@ $unsupported-tokens: (
   // go/keep-sorted end
 );
 
-$renamed-tokens: (
-  // Remove "with-leading-icon-*" prefix (b/273534858)
-  'with-leading-icon-disabled-leading-icon-color': 'disabled-leading-icon-color',
-  'with-leading-icon-disabled-leading-icon-opacity':
-    'disabled-leading-icon-opacity',
-  'with-leading-icon-dragged-leading-icon-color': 'dragged-leading-icon-color',
-  'with-leading-icon-focus-leading-icon-color': 'focus-leading-icon-color',
-  'with-leading-icon-hover-leading-icon-color': 'hover-leading-icon-color',
-  'with-leading-icon-leading-icon-color': 'leading-icon-color',
-  'with-leading-icon-pressed-leading-icon-color': 'pressed-leading-icon-color',
-  // Rename "leading-icon-size" to "icon-size" (b/275577569)
-  'with-leading-icon-leading-icon-size': 'icon-size'
-);
-
 $_default: (
   'md-sys-color': md-sys-color.values-light(),
   'md-sys-elevation': md-sys-elevation.values(),
@@ -100,7 +85,29 @@ $_default: (
     md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
-    $renamed-tokens: $renamed-tokens
+    $renamed-tokens: (
+      // Remove "flat-*" prefix (b/275577569)
+      'flat-container-elevation': 'container-elevation',
+      'flat-disabled-outline-color': 'disabled-outline-color',
+      'flat-disabled-outline-opacity': 'disabled-outline-opacity',
+      'flat-focus-outline-color': 'focus-outline-color',
+      'flat-outline-color': 'outline-color',
+      'flat-outline-width': 'outline-width',
+      // Remove "with-*" prefixes (b/273534858)
+      'with-leading-icon-disabled-leading-icon-color':
+        'disabled-leading-icon-color',
+      'with-leading-icon-disabled-leading-icon-opacity':
+        'disabled-leading-icon-opacity',
+      'with-leading-icon-dragged-leading-icon-color':
+        'dragged-leading-icon-color',
+      'with-leading-icon-focus-leading-icon-color': 'focus-leading-icon-color',
+      'with-leading-icon-hover-leading-icon-color': 'hover-leading-icon-color',
+      'with-leading-icon-leading-icon-color': 'leading-icon-color',
+      'with-leading-icon-pressed-leading-icon-color':
+        'pressed-leading-icon-color',
+      // Rename "leading-icon-size" to "icon-size" (b/275577569)
+      'with-leading-icon-leading-icon-size': 'icon-size'
+    )
   );
 
   // TODO(b/271876162): remove when tokens compiler emits typescale tokens
@@ -111,13 +118,5 @@ $_default: (
     )
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set(
-      $tokens,
-      $token,
-      var(--md-suggestion-chip-#{$token}, #{$value})
-    );
-  }
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
   @return $tokens;
 }

package/tokens/_md-comp-switch.scss

@@ -8,8 +8,83 @@
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './v0_172/md-comp-switch';
+@use './values';
 // go/keep-sorted end
 
+$supported-tokens: (
+  // go/keep-sorted start
+  'disabled-selected-handle-color',
+  'disabled-selected-handle-opacity',
+  'disabled-selected-icon-color',
+  'disabled-selected-icon-opacity',
+  'disabled-selected-track-color',
+  'disabled-track-opacity',
+  'disabled-unselected-handle-color',
+  'disabled-unselected-handle-opacity',
+  'disabled-unselected-icon-color',
+  'disabled-unselected-icon-opacity',
+  'disabled-unselected-track-color',
+  'disabled-unselected-track-outline-color',
+  'handle-shape',
+  'pressed-handle-height',
+  'pressed-handle-width',
+  'selected-focus-handle-color',
+  'selected-focus-icon-color',
+  'selected-focus-state-layer-color',
+  'selected-focus-state-layer-opacity',
+  'selected-focus-track-color',
+  'selected-handle-color',
+  'selected-handle-height',
+  'selected-handle-width',
+  'selected-hover-handle-color',
+  'selected-hover-icon-color',
+  'selected-hover-state-layer-color',
+  'selected-hover-state-layer-opacity',
+  'selected-hover-track-color',
+  'selected-icon-color',
+  'selected-icon-size',
+  'selected-pressed-handle-color',
+  'selected-pressed-icon-color',
+  'selected-pressed-state-layer-color',
+  'selected-pressed-state-layer-opacity',
+  'selected-pressed-track-color',
+  'selected-track-color',
+  'state-layer-shape',
+  'state-layer-size',
+  'track-height',
+  'track-outline-width',
+  'track-shape',
+  'track-width',
+  'unselected-focus-handle-color',
+  'unselected-focus-icon-color',
+  'unselected-focus-state-layer-color',
+  'unselected-focus-state-layer-opacity',
+  'unselected-focus-track-color',
+  'unselected-focus-track-outline-color',
+  'unselected-handle-color',
+  'unselected-handle-height',
+  'unselected-handle-width',
+  'unselected-hover-handle-color',
+  'unselected-hover-icon-color',
+  'unselected-hover-state-layer-color',
+  'unselected-hover-state-layer-opacity',
+  'unselected-hover-track-color',
+  'unselected-hover-track-outline-color',
+  'unselected-icon-color',
+  'unselected-icon-size',
+  'unselected-pressed-handle-color',
+  'unselected-pressed-icon-color',
+  'unselected-pressed-state-layer-color',
+  'unselected-pressed-state-layer-opacity',
+  'unselected-pressed-track-color',
+  'unselected-pressed-track-outline-color',
+  'unselected-track-color',
+  'unselected-track-outline-color',
+  'with-icon-handle-height',
+  'with-icon-handle-width',
+  // go/keep-sorted end
+);
+
 $_default: (
   'md-sys-color': md-sys-color.values-light(),
   'md-sys-shape': md-sys-shape.values(),
@@ -17,5 +92,10 @@ $_default: (
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return md-comp-switch.values($deps, $exclude-hardcoded-values);
+  $tokens: values.validate(
+    md-comp-switch.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens
+  );
+
+  @return $tokens;
 }

package/tokens/_md-comp-text-button.scss

@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../sass/shape';
 @use './md-sys-color';
 @use './md-sys-shape';
 @use './md-sys-state';
@@ -94,14 +93,5 @@ $_default: (
     )
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set(
-      $tokens,
-      $token,
-      var(--md-text-button-#{$token}, #{$value})
-    );
-  }
-
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
   @return $tokens;
 }

package/tokens/_values.scss

@@ -50,7 +50,7 @@
 
     @each $old-token, $new-token in $renamed-tokens {
       @if not map.has-key($values, $old-token) {
-        @error 'values.validate($renamed-tokens: (\'#{$old-tokens}\': \'#{$new-token}\')) old-token in not the provided values.';
+        @error 'values.validate($renamed-tokens: (\'#{$old-token}\': \'#{$new-token}\')) old-token in not the provided values.';
       }
 
       $values: map.set($values, $new-token, map.get($values, $old-token));
@@ -84,9 +84,7 @@
         @warn 'values.validate($new-tokens: (\'#{$new-token}\': \'#{$new-value}\')) already exists. Has it been added to tokens? If so, remove this new token.';
       }
 
-      @if $new-value {
-        $values: map.set($values, $new-token, $new-value);
-      }
+      $values: map.set($values, $new-token, $new-value);
     }
   }
 

package/types/aria.d.ts

@@ -2,12 +2,70 @@
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- *
+ */
+/**
  * @fileoverview Provides types for `ariaX` properties. These are required when
  * typing `ariaX` properties since lit analyzer requires strict aria string
  * types.
  */
 
+/**
+ * An extension of `ARIAMixin` that enforces strict value types for aria
+ * properties.
+ *
+ * This is needed for correct typing in render functions with lit analyzer.
+ *
+ * @example
+ * render() {
+ *   const {ariaLabel} = this as ARIAMixinStrict;
+ *   return html`
+ *     <button aria-label=${ariaLabel || nothing}>
+ *       <slot></slot>
+ *     </button>
+ *   `;
+ * }
+ */
+export interface ARIAMixinStrict extends ARIAMixin {
+  ariaAtomic: 'true'|'false'|null;
+  ariaAutoComplete: 'none'|'inline'|'list'|'both'|null;
+  ariaBusy: 'true'|'false'|null;
+  ariaChecked: 'true'|'false'|null;
+  ariaColCount: `${number}`|null;
+  ariaColIndex: `${number}`|null;
+  ariaColSpan: `${number}`|null;
+  ariaCurrent: 'page'|'step'|'location'|'date'|'time'|'true'|'false'|null;
+  ariaDisabled: 'true'|'false'|null;
+  ariaExpanded: 'true'|'false'|null;
+  ariaHasPopup: 'false'|'true'|'menu'|'listbox'|'tree'|'grid'|'dialog'|null;
+  ariaHidden: 'true'|'false'|null;
+  ariaInvalid: 'true'|'false'|null;
+  ariaKeyShortcuts: string|null;
+  ariaLabel: string|null;
+  ariaLevel: `${number}`|null;
+  ariaLive: 'assertive'|'off'|'polite'|null;
+  ariaModal: 'true'|'false'|null;
+  ariaMultiLine: 'true'|'false'|null;
+  ariaMultiSelectable: 'true'|'false'|null;
+  ariaOrientation: 'horizontal'|'vertical'|'undefined'|null;
+  ariaPlaceholder: string|null;
+  ariaPosInSet: `${number}`|null;
+  ariaPressed: 'true'|'false'|null;
+  ariaReadOnly: 'true'|'false'|null;
+  ariaRequired: 'true'|'false'|null;
+  ariaRoleDescription: string|null;
+  ariaRowCount: `${number}`|null;
+  ariaRowIndex: `${number}`|null;
+  ariaRowSpan: `${number}`|null;
+  ariaSelected: 'true'|'false'|null;
+  ariaSetSize: `${number}`|null;
+  ariaSort: 'ascending'|'descending'|'none'|'other'|null;
+  ariaValueMax: `${number}`|null;
+  ariaValueMin: `${number}`|null;
+  ariaValueNow: `${number}`|null;
+  ariaValueText: string|null;
+  role: ARIARole|null;
+}
+
 /**
  * Valid values for `aria-expanded`.
  */

package/actionelement/action-element.d.ts

@@ -1,79 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { LitElement } from 'lit';
-import { ActionController, ActionControllerHost, BeginPressConfig, EndPressConfig } from '../controller/action-controller.js';
-export { BeginPressConfig, EndPressConfig };
-/**
- * @soyCompatible
- *
- * ActionElement is a base class that provides a handy starting point for using
- * ActionController. Subclasses should add the event handlers on the interactive
- * node in the template, and override `beginPress` and `endPress` to handle
- * pressed state, ripple interaction, and any other "press" interaction.
- */
-export declare abstract class ActionElement extends LitElement implements ActionControllerHost {
-    /**
-     * ActionController needs to know if the component is disabled, so subclasses
-     * must implement a `disabled` property.
-     */
-    abstract disabled: boolean;
-    protected actionController: ActionController;
-    /**
-     * Hook method called when we've confirmed that the gesture is intended to be
-     * a press. Subclasses should change the visual state of the control to
-     * 'active' at this point, and possibly fire an event. Subclasses should
-     * override this method if more needs to be done.
-     *
-     * @param options `positionEvent` is the Event that is considered the
-     * beginning of the press. Null if this was a keyboard interaction.
-     */
-    beginPress(options: BeginPressConfig): void;
-    /**
-     * Hook method called when the control goes from a pressed to unpressed
-     * state.
-     *
-     * @param options If `cancelled` is true, means the user canceled the action.
-     *    Subclasses which trigger events on endPress() should check the value
-     *    of this flag, and modify their behavior accordingly.
-     */
-    endPress({ cancelled, actionData }: EndPressConfig): void;
-    /**
-     * Hook method for the ActionController.
-     * Subclasses should add this method as an event handler on the interactive
-     * template element with `@pointerdown="${this.handlePointerDown}"`
-     */
-    handlePointerDown(e: PointerEvent): void;
-    /**
-     * Hook method for the ActionController.
-     * Subclasses should add this method as an event handler on the interactive
-     * template element with `@pointerup="${this.handlePointerUp}"`
-     */
-    handlePointerUp(e: PointerEvent): void;
-    /**
-     * Hook method for the ActionController.
-     * Subclasses should add this method as an event handler on the interactive
-     * template element with `@pointercancel="${this.handlePointerCancel}"`
-     */
-    handlePointerCancel(e: PointerEvent): void;
-    /**
-     * Hook method for the ActionController.
-     * Subclasses should add this method as an event handler on the interactive
-     * template element with `@pointerleave="${this.handlePointerleave}"`
-     */
-    handlePointerLeave(e: PointerEvent): void;
-    /**
-     * Hook method for the ActionController.
-     * Subclasses should add this method as an event handler on the interactive
-     * template element with `@click="${this.handleClick}"`
-     */
-    handleClick(e: MouseEvent): void;
-    /**
-     * Hook method for the ActionController.
-     * Subclasses should add this method as an event handler on the interactive
-     * template element with `@contextmenu="${this.handleContextMenu}"`
-     */
-    handleContextMenu(): void;
-}

package/actionelement/action-element.js

@@ -1,97 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { LitElement } from 'lit';
-import { ActionController } from '../controller/action-controller.js';
-/**
- * @soyCompatible
- *
- * ActionElement is a base class that provides a handy starting point for using
- * ActionController. Subclasses should add the event handlers on the interactive
- * node in the template, and override `beginPress` and `endPress` to handle
- * pressed state, ripple interaction, and any other "press" interaction.
- */
-export class ActionElement extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.actionController = new ActionController(this);
-    }
-    /**
-     * Hook method called when we've confirmed that the gesture is intended to be
-     * a press. Subclasses should change the visual state of the control to
-     * 'active' at this point, and possibly fire an event. Subclasses should
-     * override this method if more needs to be done.
-     *
-     * @param options `positionEvent` is the Event that is considered the
-     * beginning of the press. Null if this was a keyboard interaction.
-     */
-    beginPress(options) { }
-    /**
-     * Hook method called when the control goes from a pressed to unpressed
-     * state.
-     *
-     * @param options If `cancelled` is true, means the user canceled the action.
-     *    Subclasses which trigger events on endPress() should check the value
-     *    of this flag, and modify their behavior accordingly.
-     */
-    endPress({ cancelled, actionData }) {
-        if (!cancelled) {
-            this.dispatchEvent(new CustomEvent('action', {
-                detail: actionData,
-                bubbles: true,
-                composed: true,
-            }));
-        }
-    }
-    /**
-     * Hook method for the ActionController.
-     * Subclasses should add this method as an event handler on the interactive
-     * template element with `@pointerdown="${this.handlePointerDown}"`
-     */
-    handlePointerDown(e) {
-        this.actionController.pointerDown(e);
-    }
-    /**
-     * Hook method for the ActionController.
-     * Subclasses should add this method as an event handler on the interactive
-     * template element with `@pointerup="${this.handlePointerUp}"`
-     */
-    handlePointerUp(e) {
-        this.actionController.pointerUp(e);
-    }
-    /**
-     * Hook method for the ActionController.
-     * Subclasses should add this method as an event handler on the interactive
-     * template element with `@pointercancel="${this.handlePointerCancel}"`
-     */
-    handlePointerCancel(e) {
-        this.actionController.pointerCancel(e);
-    }
-    /**
-     * Hook method for the ActionController.
-     * Subclasses should add this method as an event handler on the interactive
-     * template element with `@pointerleave="${this.handlePointerleave}"`
-     */
-    handlePointerLeave(e) {
-        this.actionController.pointerLeave(e);
-    }
-    /**
-     * Hook method for the ActionController.
-     * Subclasses should add this method as an event handler on the interactive
-     * template element with `@click="${this.handleClick}"`
-     */
-    handleClick(e) {
-        this.actionController.click(e);
-    }
-    /**
-     * Hook method for the ActionController.
-     * Subclasses should add this method as an event handler on the interactive
-     * template element with `@contextmenu="${this.handleContextMenu}"`
-     */
-    handleContextMenu() {
-        this.actionController.contextMenu();
-    }
-}
-//# sourceMappingURL=action-element.js.map

package/actionelement/action-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"action-element.js","sourceRoot":"","sources":["action-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAyD,MAAM,oCAAoC,CAAC;AAI5H;;;;;;;GAOG;AACH,MAAM,OAAgB,aAAc,SAAQ,UAAU;IAAtD;;QAQY,qBAAgB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAoF1D,CAAC;IAlFC;;;;;;;;OAQG;IACH,UAAU,CAAC,OAAyB,IAAG,CAAC;IAExC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAC,SAAS,EAAE,UAAU,EAAiB;QAC9C,IAAI,CAAC,SAAS,EAAE;YACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;gBAC3C,MAAM,EAAE,UAAU;gBAClB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC,CAAC;SACL;IACH,CAAC;IAED;;;;OAIG;IACH,iBAAiB,CAAC,CAAe;QAC/B,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC;IAED;;;;OAIG;IACH,eAAe,CAAC,CAAe;QAC7B,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC;IAED;;;;OAIG;IACH,mBAAmB,CAAC,CAAe;QACjC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACzC,CAAC;IAED;;;;OAIG;IACH,kBAAkB,CAAC,CAAe;QAChC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,CAAa;QACvB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;IAED;;;;OAIG;IACH,iBAAiB;QACf,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC;IACtC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {ActionController, ActionControllerHost, BeginPressConfig, EndPressConfig} from '../controller/action-controller.js';\n\nexport {BeginPressConfig, EndPressConfig};\n\n/**\n * @soyCompatible\n *\n * ActionElement is a base class that provides a handy starting point for using\n * ActionController. Subclasses should add the event handlers on the interactive\n * node in the template, and override `beginPress` and `endPress` to handle\n * pressed state, ripple interaction, and any other \"press\" interaction.\n */\nexport abstract class ActionElement extends LitElement implements\n    ActionControllerHost {\n  /**\n   * ActionController needs to know if the component is disabled, so subclasses\n   * must implement a `disabled` property.\n   */\n  abstract disabled: boolean;\n\n  protected actionController = new ActionController(this);\n\n  /**\n   * Hook method called when we've confirmed that the gesture is intended to be\n   * a press. Subclasses should change the visual state of the control to\n   * 'active' at this point, and possibly fire an event. Subclasses should\n   * override this method if more needs to be done.\n   *\n   * @param options `positionEvent` is the Event that is considered the\n   * beginning of the press. Null if this was a keyboard interaction.\n   */\n  beginPress(options: BeginPressConfig) {}\n\n  /**\n   * Hook method called when the control goes from a pressed to unpressed\n   * state.\n   *\n   * @param options If `cancelled` is true, means the user canceled the action.\n   *    Subclasses which trigger events on endPress() should check the value\n   *    of this flag, and modify their behavior accordingly.\n   */\n  endPress({cancelled, actionData}: EndPressConfig) {\n    if (!cancelled) {\n      this.dispatchEvent(new CustomEvent('action', {\n        detail: actionData,\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerdown=\"${this.handlePointerDown}\"`\n   */\n  handlePointerDown(e: PointerEvent) {\n    this.actionController.pointerDown(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerup=\"${this.handlePointerUp}\"`\n   */\n  handlePointerUp(e: PointerEvent) {\n    this.actionController.pointerUp(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointercancel=\"${this.handlePointerCancel}\"`\n   */\n  handlePointerCancel(e: PointerEvent) {\n    this.actionController.pointerCancel(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@pointerleave=\"${this.handlePointerleave}\"`\n   */\n  handlePointerLeave(e: PointerEvent) {\n    this.actionController.pointerLeave(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@click=\"${this.handleClick}\"`\n   */\n  handleClick(e: MouseEvent) {\n    this.actionController.click(e);\n  }\n\n  /**\n   * Hook method for the ActionController.\n   * Subclasses should add this method as an event handler on the interactive\n   * template element with `@contextmenu=\"${this.handleContextMenu}\"`\n   */\n  handleContextMenu() {\n    this.actionController.contextMenu();\n  }\n}\n"]}

package/button/lib/state.d.ts

@@ -1,10 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-export interface ButtonState {
-    disabled: boolean;
-    label: string;
-    trailingIcon: boolean;
-}