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

package/README.md

@@ -1,14 +1,19 @@
 # Material Web
 
-Material Web is Google’s UI toolkit for building beautiful, accessible web
-applications.
+Material
+[web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)<!-- {.external} -->
+is a UI toolkit to build customizable and accessible web applications.
 
-Material Web is implemented as a collection of
-[web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
-[Material 3](https://m3.material.io/) is the latest version of Google’s
-open-source design system.
+[Material 3](https://m3.material.io/)<!-- {.external} --> is the latest version of
+Google's open-source design system.
 
-> Tip: Check out the [quick start guide](docs/quick-start.md) to jump in.
+> Tip: Using Angular? We recommend using
+> [Angular Material](https://material.angular.io/)<!-- {.external} --> components
+> instead.
+
+**Resources**
+
+-   [Introduction](docs/intro.md)
 
 ## Roadmap
 
@@ -29,26 +34,26 @@ breaking changes.
 Component                     | Alpha | Beta | Stable
 ----------------------------- | :---: | :--: | :----:
 Button                        | ✅     | ✅    | 🟡
-FAB                           | ✅     | ✅    | ❌
-Icon button                   | ✅     | ✅    | ❌
-Checkbox                      | ✅     | ✅    | 🟡
-Chips                         | ✅     | ✅    | ❌
-Dialog                        | ✅     | ✅    | ❌
+FAB                           | ✅     | ✅    | ✅
+Icon button                   | ✅     | ✅    | 🟡
+Checkbox                      | ✅     | ✅    | ✅
+Chips                         | ✅     | ✅    | 🟡
+Dialog                        | ✅     | ✅    | ✅
 Divider                       | ✅     | ✅    | ✅
 Elevation                     | ✅     | ✅    | ✅
 Focus ring                    | ✅     | ✅    | ✅
 Field                         | ✅     | ✅    | 🟡
-Icon                          | ✅     | ✅    | ❌
-List                          | ✅     | ✅    | ❌
-Menu                          | ✅     | ✅    | ❌
+Icon                          | ✅     | ✅    | ✅
+List                          | ✅     | ✅    | ✅
+Menu                          | ✅     | ✅    | 🟡
 Progress indicator (circular) | ✅     | ✅    | ✅
-Progress indicator (linear)   | ✅     | ✅    | 🟡
+Progress indicator (linear)   | ✅     | ✅    | ✅
 Radio button                  | ✅     | ✅    | 🟡
 Ripple                        | ✅     | ✅    | ✅
-Select                        | ✅     | ✅    | ❌
-Slider                        | ✅     | ✅    | ❌
+Select                        | ✅     | ✅    | 🟡
+Slider                        | ✅     | ✅    | 🟡
 Switch                        | ✅     | ✅    | 🟡
-Tabs                          | ✅     | ✅    | ❌
+Tabs                          | ✅     | ✅    | 🟡
 Text field                    | ✅     | ✅    | 🟡
 
 ### Future

package/all.d.ts

@@ -11,9 +11,9 @@
  */
 import './button/elevated-button.js';
 import './button/filled-button.js';
+import './button/filled-tonal-button.js';
 import './button/outlined-button.js';
 import './button/text-button.js';
-import './button/tonal-button.js';
 import './checkbox/checkbox.js';
 import './chips/assist-chip.js';
 import './chips/filter-chip.js';
@@ -30,14 +30,12 @@ import './focus/md-focus-ring.js';
 import './icon/icon.js';
 import './iconbutton/filled-icon-button.js';
 import './iconbutton/filled-tonal-icon-button.js';
+import './iconbutton/icon-button.js';
 import './iconbutton/outlined-icon-button.js';
-import './iconbutton/standard-icon-button.js';
 import './list/list.js';
 import './list/list-item.js';
-import './list/list-item-link.js';
 import './menu/menu.js';
 import './menu/menu-item.js';
-import './menu/menu-item-link.js';
 import './menu/sub-menu-item.js';
 import './progress/circular-progress.js';
 import './progress/linear-progress.js';
@@ -54,9 +52,9 @@ import './textfield/filled-text-field.js';
 import './textfield/outlined-text-field.js';
 export * from './button/elevated-button.js';
 export * from './button/filled-button.js';
+export * from './button/filled-tonal-button.js';
 export * from './button/outlined-button.js';
 export * from './button/text-button.js';
-export * from './button/tonal-button.js';
 export * from './checkbox/checkbox.js';
 export * from './chips/assist-chip.js';
 export * from './chips/filter-chip.js';
@@ -73,14 +71,12 @@ export * from './focus/md-focus-ring.js';
 export * from './icon/icon.js';
 export * from './iconbutton/filled-icon-button.js';
 export * from './iconbutton/filled-tonal-icon-button.js';
+export * from './iconbutton/icon-button.js';
 export * from './iconbutton/outlined-icon-button.js';
-export * from './iconbutton/standard-icon-button.js';
 export * from './list/list.js';
 export * from './list/list-item.js';
-export * from './list/list-item-link.js';
 export * from './menu/menu.js';
 export * from './menu/menu-item.js';
-export * from './menu/menu-item-link.js';
 export * from './menu/sub-menu-item.js';
 export * from './progress/circular-progress.js';
 export * from './progress/linear-progress.js';

package/all.js

@@ -13,9 +13,9 @@
 // go/keep-sorted start
 import './button/elevated-button.js';
 import './button/filled-button.js';
+import './button/filled-tonal-button.js';
 import './button/outlined-button.js';
 import './button/text-button.js';
-import './button/tonal-button.js';
 import './checkbox/checkbox.js';
 import './chips/assist-chip.js';
 import './chips/filter-chip.js';
@@ -32,14 +32,12 @@ import './focus/md-focus-ring.js';
 import './icon/icon.js';
 import './iconbutton/filled-icon-button.js';
 import './iconbutton/filled-tonal-icon-button.js';
+import './iconbutton/icon-button.js';
 import './iconbutton/outlined-icon-button.js';
-import './iconbutton/standard-icon-button.js';
 import './list/list.js';
 import './list/list-item.js';
-import './list/list-item-link.js';
 import './menu/menu.js';
 import './menu/menu-item.js';
-import './menu/menu-item-link.js';
 import './menu/sub-menu-item.js';
 import './progress/circular-progress.js';
 import './progress/linear-progress.js';
@@ -60,9 +58,9 @@ import './textfield/outlined-text-field.js';
 // go/keep-sorted start
 export * from './button/elevated-button.js';
 export * from './button/filled-button.js';
+export * from './button/filled-tonal-button.js';
 export * from './button/outlined-button.js';
 export * from './button/text-button.js';
-export * from './button/tonal-button.js';
 export * from './checkbox/checkbox.js';
 export * from './chips/assist-chip.js';
 export * from './chips/filter-chip.js';
@@ -79,14 +77,12 @@ export * from './focus/md-focus-ring.js';
 export * from './icon/icon.js';
 export * from './iconbutton/filled-icon-button.js';
 export * from './iconbutton/filled-tonal-icon-button.js';
+export * from './iconbutton/icon-button.js';
 export * from './iconbutton/outlined-icon-button.js';
-export * from './iconbutton/standard-icon-button.js';
 export * from './list/list.js';
 export * from './list/list-item.js';
-export * from './list/list-item-link.js';
 export * from './menu/menu.js';
 export * from './menu/menu-item.js';
-export * from './menu/menu-item-link.js';
 export * from './menu/sub-menu-item.js';
 export * from './progress/circular-progress.js';
 export * from './progress/linear-progress.js';

package/all.js.map

@@ -1 +1 @@
-{"version":3,"file":"all.js","sourceRoot":"","sources":["all.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * @fileoverview A convenience bundle import that includes all components.\n *\n * WARNING: This import is intended for prototyping and development builds only.\n * Import only the individual components used for production.\n */\n\n// LINT.IfChange(imports)\n// go/keep-sorted start\nimport './button/elevated-button.js';\nimport './button/filled-button.js';\nimport './button/outlined-button.js';\nimport './button/text-button.js';\nimport './button/tonal-button.js';\nimport './checkbox/checkbox.js';\nimport './chips/assist-chip.js';\nimport './chips/filter-chip.js';\nimport './chips/input-chip.js';\nimport './chips/suggestion-chip.js';\nimport './dialog/dialog.js';\nimport './divider/divider.js';\nimport './elevation/elevation.js';\nimport './fab/branded-fab.js';\nimport './fab/fab.js';\nimport './field/filled-field.js';\nimport './field/outlined-field.js';\nimport './focus/md-focus-ring.js';\nimport './icon/icon.js';\nimport './iconbutton/filled-icon-button.js';\nimport './iconbutton/filled-tonal-icon-button.js';\nimport './iconbutton/outlined-icon-button.js';\nimport './iconbutton/standard-icon-button.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './list/list-item-link.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './menu/menu-item-link.js';\nimport './menu/sub-menu-item.js';\nimport './progress/circular-progress.js';\nimport './progress/linear-progress.js';\nimport './radio/radio.js';\nimport './ripple/ripple.js';\nimport './select/filled-select.js';\nimport './select/outlined-select.js';\nimport './select/select-option.js';\nimport './slider/slider.js';\nimport './switch/switch.js';\nimport './tabs/tab.js';\nimport './tabs/tabs.js';\nimport './textfield/filled-text-field.js';\nimport './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:exports)\n\n// LINT.IfChange(exports)\n// go/keep-sorted start\nexport * from './button/elevated-button.js';\nexport * from './button/filled-button.js';\nexport * from './button/outlined-button.js';\nexport * from './button/text-button.js';\nexport * from './button/tonal-button.js';\nexport * from './checkbox/checkbox.js';\nexport * from './chips/assist-chip.js';\nexport * from './chips/filter-chip.js';\nexport * from './chips/input-chip.js';\nexport * from './chips/suggestion-chip.js';\nexport * from './dialog/dialog.js';\nexport * from './divider/divider.js';\nexport * from './elevation/elevation.js';\nexport * from './fab/branded-fab.js';\nexport * from './fab/fab.js';\nexport * from './field/filled-field.js';\nexport * from './field/outlined-field.js';\nexport * from './focus/md-focus-ring.js';\nexport * from './icon/icon.js';\nexport * from './iconbutton/filled-icon-button.js';\nexport * from './iconbutton/filled-tonal-icon-button.js';\nexport * from './iconbutton/outlined-icon-button.js';\nexport * from './iconbutton/standard-icon-button.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './list/list-item-link.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './menu/menu-item-link.js';\nexport * from './menu/sub-menu-item.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/linear-progress.js';\nexport * from './radio/radio.js';\nexport * from './ripple/ripple.js';\nexport * from './select/filled-select.js';\nexport * from './select/outlined-select.js';\nexport * from './select/select-option.js';\nexport * from './slider/slider.js';\nexport * from './switch/switch.js';\nexport * from './tabs/tab.js';\nexport * from './tabs/tabs.js';\nexport * from './textfield/filled-text-field.js';\nexport * from './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:imports)\n"]}
+{"version":3,"file":"all.js","sourceRoot":"","sources":["all.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * @fileoverview A convenience bundle import that includes all components.\n *\n * WARNING: This import is intended for prototyping and development builds only.\n * Import only the individual components used for production.\n */\n\n// LINT.IfChange(imports)\n// go/keep-sorted start\nimport './button/elevated-button.js';\nimport './button/filled-button.js';\nimport './button/filled-tonal-button.js';\nimport './button/outlined-button.js';\nimport './button/text-button.js';\nimport './checkbox/checkbox.js';\nimport './chips/assist-chip.js';\nimport './chips/filter-chip.js';\nimport './chips/input-chip.js';\nimport './chips/suggestion-chip.js';\nimport './dialog/dialog.js';\nimport './divider/divider.js';\nimport './elevation/elevation.js';\nimport './fab/branded-fab.js';\nimport './fab/fab.js';\nimport './field/filled-field.js';\nimport './field/outlined-field.js';\nimport './focus/md-focus-ring.js';\nimport './icon/icon.js';\nimport './iconbutton/filled-icon-button.js';\nimport './iconbutton/filled-tonal-icon-button.js';\nimport './iconbutton/icon-button.js';\nimport './iconbutton/outlined-icon-button.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './menu/sub-menu-item.js';\nimport './progress/circular-progress.js';\nimport './progress/linear-progress.js';\nimport './radio/radio.js';\nimport './ripple/ripple.js';\nimport './select/filled-select.js';\nimport './select/outlined-select.js';\nimport './select/select-option.js';\nimport './slider/slider.js';\nimport './switch/switch.js';\nimport './tabs/tab.js';\nimport './tabs/tabs.js';\nimport './textfield/filled-text-field.js';\nimport './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:exports)\n\n// LINT.IfChange(exports)\n// go/keep-sorted start\nexport * from './button/elevated-button.js';\nexport * from './button/filled-button.js';\nexport * from './button/filled-tonal-button.js';\nexport * from './button/outlined-button.js';\nexport * from './button/text-button.js';\nexport * from './checkbox/checkbox.js';\nexport * from './chips/assist-chip.js';\nexport * from './chips/filter-chip.js';\nexport * from './chips/input-chip.js';\nexport * from './chips/suggestion-chip.js';\nexport * from './dialog/dialog.js';\nexport * from './divider/divider.js';\nexport * from './elevation/elevation.js';\nexport * from './fab/branded-fab.js';\nexport * from './fab/fab.js';\nexport * from './field/filled-field.js';\nexport * from './field/outlined-field.js';\nexport * from './focus/md-focus-ring.js';\nexport * from './icon/icon.js';\nexport * from './iconbutton/filled-icon-button.js';\nexport * from './iconbutton/filled-tonal-icon-button.js';\nexport * from './iconbutton/icon-button.js';\nexport * from './iconbutton/outlined-icon-button.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './menu/sub-menu-item.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/linear-progress.js';\nexport * from './radio/radio.js';\nexport * from './ripple/ripple.js';\nexport * from './select/filled-select.js';\nexport * from './select/outlined-select.js';\nexport * from './select/select-option.js';\nexport * from './slider/slider.js';\nexport * from './switch/switch.js';\nexport * from './tabs/tab.js';\nexport * from './tabs/tabs.js';\nexport * from './textfield/filled-text-field.js';\nexport * from './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:imports)\n"]}

package/button/{_tonal-button.scss → _filled-tonal-button.scss}

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/tonal-button' show theme;
+@forward './internal/filled-tonal-button' show theme;

package/button/{tonal-button.d.ts → filled-tonal-button.d.ts}

@@ -3,10 +3,10 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { TonalButton } from './internal/tonal-button.js';
+import { FilledTonalButton } from './internal/filled-tonal-button.js';
 declare global {
     interface HTMLElementTagNameMap {
-        'md-tonal-button': MdTonalButton;
+        'md-filled-tonal-button': MdFilledTonalButton;
     }
 }
 /**
@@ -30,6 +30,6 @@ declare global {
  * @final
  * @suppress {visibility}
  */
-export declare class MdTonalButton extends TonalButton {
+export declare class MdFilledTonalButton extends FilledTonalButton {
     static styles: import("lit").CSSResult[];
 }

package/button/{tonal-button.js → filled-tonal-button.js}

@@ -5,10 +5,10 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
+import { FilledTonalButton } from './internal/filled-tonal-button.js';
+import { styles as tonalStyles } from './internal/filled-tonal-styles.css.js';
 import { styles as sharedElevationStyles } from './internal/shared-elevation-styles.css.js';
 import { styles as sharedStyles } from './internal/shared-styles.css.js';
-import { TonalButton } from './internal/tonal-button.js';
-import { styles as tonalStyles } from './internal/tonal-styles.css.js';
 /**
  * @summary Buttons help people take action, such as sending an email, sharing a
  * document, or liking a comment.
@@ -30,11 +30,11 @@ import { styles as tonalStyles } from './internal/tonal-styles.css.js';
  * @final
  * @suppress {visibility}
  */
-let MdTonalButton = class MdTonalButton extends TonalButton {
+let MdFilledTonalButton = class MdFilledTonalButton extends FilledTonalButton {
 };
-MdTonalButton.styles = [sharedStyles, sharedElevationStyles, tonalStyles];
-MdTonalButton = __decorate([
-    customElement('md-tonal-button')
-], MdTonalButton);
-export { MdTonalButton };
-//# sourceMappingURL=tonal-button.js.map
+MdFilledTonalButton.styles = [sharedStyles, sharedElevationStyles, tonalStyles];
+MdFilledTonalButton = __decorate([
+    customElement('md-filled-tonal-button')
+], MdFilledTonalButton);
+export { MdFilledTonalButton };
+//# sourceMappingURL=filled-tonal-button.js.map

package/button/filled-tonal-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-tonal-button.js","sourceRoot":"","sources":["filled-tonal-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,iBAAiB,EAAC,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAC,MAAM,IAAI,WAAW,EAAC,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAC,MAAM,IAAI,qBAAqB,EAAC,MAAM,2CAA2C,CAAC;AAC1F,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;;;;;;;;;;;;;;;;GAoBG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB;;AACxC,0BAAM,GAAG,CAAC,YAAY,EAAE,qBAAqB,EAAE,WAAW,CAAC,CAAC;AADjE,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAE/B;SAFY,mBAAmB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledTonalButton} from './internal/filled-tonal-button.js';\nimport {styles as tonalStyles} from './internal/filled-tonal-styles.css.js';\nimport {styles as sharedElevationStyles} from './internal/shared-elevation-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-tonal-button': MdFilledTonalButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ Medium emphasis – For important actions that don’t distract\n * from other onscreen elements.\n *\n * __Rationale:__ Filled tonal buttons have a lighter background color and\n * darker label color, making them less visually prominent than a regular,\n * filled button. They’re still used for final or unblocking actions in a flow,\n * but do so with less emphasis.\n *\n * __Example usages:__\n * - Save\n * - Confirm\n * - Done\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-tonal-button')\nexport class MdFilledTonalButton extends FilledTonalButton {\n  static override styles = [sharedStyles, sharedElevationStyles, tonalStyles];\n}\n"]}

package/button/internal/_filled-button.scss

@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../internal/sass/theme';
 @use '../../tokens';
 // go/keep-sorted end
 

package/button/internal/{_tonal-button.scss → _filled-tonal-button.scss}

@@ -12,7 +12,7 @@
 
 @mixin theme($tokens) {
   $supported-tokens: list.join(
-    tokens.$md-comp-filled-button-supported-tokens,
+    tokens.$md-comp-filled-tonal-button-supported-tokens,
     (
       'container-shape-start-start',
       'container-shape-start-end',
@@ -27,7 +27,7 @@
     }
 
     @if $value {
-      --md-tonal-button-#{$token}: #{$value};
+      --md-filled-tonal-button-#{$token}: #{$value};
     }
   }
 }
@@ -37,24 +37,24 @@
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-tonal-button-#{$token}, #{$value});
+      --_#{$token}: var(--md-filled-tonal-button-#{$token}, #{$value});
     }
 
     // Support logical shape properties
     --_container-shape-start-start: var(
-      --md-tonal-button-container-shape-start-start,
+      --md-filled-tonal-button-container-shape-start-start,
       var(--_container-shape)
     );
     --_container-shape-start-end: var(
-      --md-tonal-button-container-shape-start-end,
+      --md-filled-tonal-button-container-shape-start-end,
       var(--_container-shape)
     );
     --_container-shape-end-end: var(
-      --md-tonal-button-container-shape-end-end,
+      --md-filled-tonal-button-container-shape-end-end,
       var(--_container-shape)
     );
     --_container-shape-end-start: var(
-      --md-tonal-button-container-shape-end-start,
+      --md-filled-tonal-button-container-shape-end-start,
       var(--_container-shape)
     );
   }

package/button/internal/_outlined-button.scss

@@ -83,6 +83,12 @@
       border-color: var(--_disabled-outline-color);
       opacity: var(--_disabled-outline-opacity);
     }
+
+    @media (forced-colors: active) {
+      .button:disabled & {
+        opacity: 1;
+      }
+    }
   }
 
   .button__outline,

package/button/internal/_shared.scss

@@ -14,6 +14,7 @@
 @mixin styles() {
   :host {
     display: inline-flex;
+    height: var(--_container-height);
     outline: none;
     -webkit-tap-highlight-color: transparent;
     // Override vertical-align with shortest value "top". Vertical-align's
@@ -31,6 +32,10 @@
     );
   }
 
+  :host([touch-target='wrapper']) {
+    margin: max(0px, (48px - var(--_container-height)) / 2) 0;
+  }
+
   md-focus-ring {
     @include focus-ring.theme(
       (
@@ -63,12 +68,12 @@
     inline-size: 100%;
     position: relative;
     z-index: 0; // Place content on top of elevation and ripple
-    block-size: var(--_container-height);
+    height: 100%;
     font: var(--_label-text-type);
     color: var(--_label-text-color);
     // TODO(b/181413732): Verify token below are named correctly
-    padding-inline-start: var(--_spacing-leading);
-    padding-inline-end: var(--_spacing-trailing);
+    padding-inline-start: var(--_leading-space);
+    padding-inline-end: var(--_trailing-space);
     gap: 8px;
 
     &::before {
@@ -113,12 +118,18 @@
       &::before {
         content: '';
         box-sizing: border-box;
-        border: 1px solid transparent;
+        border: 1px solid CanvasText;
         border-radius: inherit;
         inset: 0;
         pointer-events: none;
         position: absolute;
       }
+
+      &:disabled {
+        --_disabled-icon-opacity: 1;
+        --_disabled-container-opacity: 1;
+        --_disabled-label-text-opacity: 1;
+      }
     }
   }
 
@@ -139,13 +150,13 @@
 
   // TODO(b/181413732): Verify token below are named correctly
   .button--icon-leading {
-    padding-inline-start: var(--_with-icon-spacing-leading);
-    padding-inline-end: var(--_with-icon-spacing-trailing);
+    padding-inline-start: var(--_with-leading-icon-leading-space);
+    padding-inline-end: var(--_with-leading-icon-trailing-space);
   }
 
   .button--icon-trailing {
-    padding-inline-start: var(--_with-trailing-icon-spacing-leading);
-    padding-inline-end: var(--_with-trailing-icon-spacing-trailing);
+    padding-inline-start: var(--_with-trailing-icon-leading-space);
+    padding-inline-end: var(--_with-trailing-icon-trailing-space);
   }
 
   .link-button-wrapper {

package/button/internal/_touch-target.scss

@@ -4,7 +4,7 @@
 //
 
 @mixin styles() {
-  .button__touch {
+  .touch {
     position: absolute;
     top: 50%;
     height: 48px;
@@ -12,4 +12,8 @@
     right: 0;
     transform: translateY(-50%);
   }
+
+  :host([touch-target='none']) .touch {
+    display: none;
+  }
 }

package/button/internal/button.d.ts

@@ -5,13 +5,15 @@
  */
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
-import { LitElement, nothing, TemplateResult } from 'lit';
+import { LitElement } from 'lit';
+import { internals } from '../../internal/controller/element-internals.js';
+import { FormSubmitter, FormSubmitterType } from '../../internal/controller/form-submitter.js';
 /**
  * A button component.
  */
-export declare abstract class Button extends LitElement {
+export declare abstract class Button extends LitElement implements FormSubmitter {
     /** @nocollapse */
-    static get formAssociated(): boolean;
+    static readonly formAssociated = true;
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
     /**
@@ -21,12 +23,12 @@ export declare abstract class Button extends LitElement {
     /**
      * The URL that the link button points to.
      */
-    href?: string;
+    href: string;
     /**
      * Where to display the linked `href` URL for a link button. Common options
      * include `_blank` to open in a new tab.
      */
-    target?: string;
+    target: '_blank' | '_parent' | '_self' | '_top' | '';
     /**
      * Whether to render the icon at the inline end of the label rather than the
      * inline start.
@@ -38,34 +40,29 @@ export declare abstract class Button extends LitElement {
      * Whether to display the icon or not.
      */
     hasIcon: boolean;
+    type: FormSubmitterType;
+    value: string;
+    get name(): string;
+    set name(name: string);
     /**
-     * Specifies the type of button, used for controlling forms. When type
-     * is `submit`, the containing form is submitted; when it is `reset` the
-     * form is reset.
+     * The associated form element with which this element's value will submit.
      */
-    type: '' | 'submit' | 'reset';
+    get form(): HTMLFormElement;
     private readonly buttonElement;
     private readonly assignedIcons;
-    private readonly internals;
-    private isRedispatchingEvent;
+    /** @private */
+    [internals]: ElementInternals;
     constructor();
     focus(): void;
     blur(): void;
-    protected render(): TemplateResult<2 | 1>;
+    protected render(): import("lit-html").TemplateResult<2 | 1>;
     protected getRenderClasses(): {
         'button--icon-leading': boolean;
         'button--icon-trailing': boolean;
     };
-    protected renderElevation(): TemplateResult | typeof nothing;
-    protected renderOutline(): TemplateResult | typeof nothing;
-    private renderTouchTarget;
+    protected renderElevation?(): unknown;
+    protected renderOutline?(): unknown;
+    private renderContent;
     private readonly handleActivationClick;
-    private renderRipple;
-    private renderFocusRing;
-    private renderLabel;
-    private renderLeadingIcon;
-    private renderTrailingIcon;
-    private renderIcon;
-    private handleClick;
     private handleSlotChange;
 }