@material/web 1.0.0-pre.13 → 1.0.0-pre.15

package/README.md

@@ -8,7 +8,7 @@ Material Web is implemented as a collection of
 [Material 3](https://m3.material.io/) 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: Check out the [quick start guide](docs/quick-start.md) to jump in<!-- external-only-start --> as well as the [documentation site](https://material-web.dev)<!-- external-only-end -->.
 
 ## Roadmap
 
@@ -28,26 +28,26 @@ breaking changes.
 
 Component                     | Alpha | Beta | Stable
 ----------------------------- | :---: | :--: | :----:
-Button                        | ✅     | ✅    | ❌
+Button                        | ✅     | ✅    | 🟡
 FAB                           | ✅     | ✅    | ❌
-Icon button                   | ✅     | ✅    | ❌
-Checkbox                      | ✅     | ✅    | ❌
+Icon button                   | ✅     | ✅    | 🟡
+Checkbox                      | ✅     | ✅    | ✅
 Chips                         | ✅     | ✅    | ❌
-Dialog                        | ✅     | ✅    | ❌
+Dialog                        | ✅     | ✅    | 🟡
 Divider                       | ✅     | ✅    | ✅
 Elevation                     | ✅     | ✅    | ✅
 Focus ring                    | ✅     | ✅    | ✅
 Field                         | ✅     | ✅    | 🟡
-Icon                          | ✅     | ✅    | ❌
+Icon                          | ✅     | ✅    | 🟡
 List                          | ✅     | ✅    | ❌
 Menu                          | ✅     | ✅    | ❌
-Progress indicator (circular) | ✅     | ✅    | 🟡
+Progress indicator (circular) | ✅     | ✅    | ✅
 Progress indicator (linear)   | ✅     | ✅    | 🟡
-Radio button                  | ✅     | ✅    | ❌
+Radio button                  | ✅     | ✅    | 🟡
 Ripple                        | ✅     | ✅    | ✅
 Select                        | ✅     | ✅    | ❌
 Slider                        | ✅     | ✅    | ❌
-Switch                        | ✅     | ✅    | ❌
+Switch                        | ✅     | ✅    | 🟡
 Tabs                          | ✅     | ✅    | ❌
 Text field                    | ✅     | ✅    | 🟡
 

package/all.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @fileoverview A convenience bundle import that includes all components.
+ *
+ * WARNING: This import is intended for prototyping and development builds only.
+ * Import only the individual components used for production.
+ */
+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 './checkbox/checkbox.js';
+import './chips/assist-chip.js';
+import './chips/filter-chip.js';
+import './chips/input-chip.js';
+import './chips/suggestion-chip.js';
+import './dialog/dialog.js';
+import './divider/divider.js';
+import './elevation/elevation.js';
+import './fab/branded-fab.js';
+import './fab/fab.js';
+import './field/filled-field.js';
+import './field/outlined-field.js';
+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 './list/list.js';
+import './list/list-item.js';
+import './menu/menu.js';
+import './menu/menu-item.js';
+import './menu/sub-menu-item.js';
+import './progress/circular-progress.js';
+import './progress/linear-progress.js';
+import './radio/radio.js';
+import './ripple/ripple.js';
+import './select/filled-select.js';
+import './select/outlined-select.js';
+import './select/select-option.js';
+import './slider/slider.js';
+import './switch/switch.js';
+import './tabs/tab.js';
+import './tabs/tabs.js';
+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 './checkbox/checkbox.js';
+export * from './chips/assist-chip.js';
+export * from './chips/filter-chip.js';
+export * from './chips/input-chip.js';
+export * from './chips/suggestion-chip.js';
+export * from './dialog/dialog.js';
+export * from './divider/divider.js';
+export * from './elevation/elevation.js';
+export * from './fab/branded-fab.js';
+export * from './fab/fab.js';
+export * from './field/filled-field.js';
+export * from './field/outlined-field.js';
+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 './list/list.js';
+export * from './list/list-item.js';
+export * from './menu/menu.js';
+export * from './menu/menu-item.js';
+export * from './menu/sub-menu-item.js';
+export * from './progress/circular-progress.js';
+export * from './progress/linear-progress.js';
+export * from './radio/radio.js';
+export * from './ripple/ripple.js';
+export * from './select/filled-select.js';
+export * from './select/outlined-select.js';
+export * from './select/select-option.js';
+export * from './slider/slider.js';
+export * from './switch/switch.js';
+export * from './tabs/tab.js';
+export * from './tabs/tabs.js';
+export * from './textfield/filled-text-field.js';
+export * from './textfield/outlined-text-field.js';

package/all.js

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @fileoverview A convenience bundle import that includes all components.
+ *
+ * WARNING: This import is intended for prototyping and development builds only.
+ * Import only the individual components used for production.
+ */
+// LINT.IfChange(imports)
+// 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 './checkbox/checkbox.js';
+import './chips/assist-chip.js';
+import './chips/filter-chip.js';
+import './chips/input-chip.js';
+import './chips/suggestion-chip.js';
+import './dialog/dialog.js';
+import './divider/divider.js';
+import './elevation/elevation.js';
+import './fab/branded-fab.js';
+import './fab/fab.js';
+import './field/filled-field.js';
+import './field/outlined-field.js';
+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 './list/list.js';
+import './list/list-item.js';
+import './menu/menu.js';
+import './menu/menu-item.js';
+import './menu/sub-menu-item.js';
+import './progress/circular-progress.js';
+import './progress/linear-progress.js';
+import './radio/radio.js';
+import './ripple/ripple.js';
+import './select/filled-select.js';
+import './select/outlined-select.js';
+import './select/select-option.js';
+import './slider/slider.js';
+import './switch/switch.js';
+import './tabs/tab.js';
+import './tabs/tabs.js';
+import './textfield/filled-text-field.js';
+import './textfield/outlined-text-field.js';
+// go/keep-sorted end
+// LINT.ThenChange(:exports)
+// LINT.IfChange(exports)
+// 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 './checkbox/checkbox.js';
+export * from './chips/assist-chip.js';
+export * from './chips/filter-chip.js';
+export * from './chips/input-chip.js';
+export * from './chips/suggestion-chip.js';
+export * from './dialog/dialog.js';
+export * from './divider/divider.js';
+export * from './elevation/elevation.js';
+export * from './fab/branded-fab.js';
+export * from './fab/fab.js';
+export * from './field/filled-field.js';
+export * from './field/outlined-field.js';
+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 './list/list.js';
+export * from './list/list-item.js';
+export * from './menu/menu.js';
+export * from './menu/menu-item.js';
+export * from './menu/sub-menu-item.js';
+export * from './progress/circular-progress.js';
+export * from './progress/linear-progress.js';
+export * from './radio/radio.js';
+export * from './ripple/ripple.js';
+export * from './select/filled-select.js';
+export * from './select/outlined-select.js';
+export * from './select/select-option.js';
+export * from './slider/slider.js';
+export * from './switch/switch.js';
+export * from './tabs/tab.js';
+export * from './tabs/tabs.js';
+export * from './textfield/filled-text-field.js';
+export * from './textfield/outlined-text-field.js';
+// go/keep-sorted end
+// LINT.ThenChange(:imports)
+//# sourceMappingURL=all.js.map

package/all.js.map

@@ -0,0 +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/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/_elevated-button.scss

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

package/button/_filled-button.scss

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

package/button/_filled-tonal-button.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/filled-tonal-button' show theme;

package/button/_outlined-button.scss

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

package/button/_text-button.scss

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

package/button/elevated-button.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ElevatedButton } from './lib/elevated-button.js';
+import { ElevatedButton } from './internal/elevated-button.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-elevated-button': MdElevatedButton;

package/button/elevated-button.js

@@ -5,10 +5,10 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { ElevatedButton } from './lib/elevated-button.js';
-import { styles as elevatedStyles } from './lib/elevated-styles.css.js';
-import { styles as sharedElevationStyles } from './lib/shared-elevation-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { ElevatedButton } from './internal/elevated-button.js';
+import { styles as elevatedStyles } from './internal/elevated-styles.css.js';
+import { styles as sharedElevationStyles } from './internal/shared-elevation-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * @summary Buttons help people take action, such as sending an email, sharing a
  * document, or liking a comment.

package/button/elevated-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevated-button.js","sourceRoot":"","sources":["elevated-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AACrF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAClB,CAAC,YAAY,EAAE,qBAAqB,EAAE,cAAc,CAAC,CAAC;AAF/C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAG5B;SAHY,gBAAgB","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 {ElevatedButton} from './lib/elevated-button.js';\nimport {styles as elevatedStyles} from './lib/elevated-styles.css.js';\nimport {styles as sharedElevationStyles} from './lib/shared-elevation-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevated-button': MdElevatedButton;\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:__ Elevated buttons are essentially filled buttons with a lighter\n * background color and a shadow. To prevent shadow creep, only use them when\n * absolutely necessary, such as when the button requires visual separation from\n * a patterned background.\n *\n * __Example usages:__\n * - Reply\n * - View all\n * - Add to cart\n * - Take out of trash\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevated-button')\nexport class MdElevatedButton extends ElevatedButton {\n  static override styles =\n      [sharedStyles, sharedElevationStyles, elevatedStyles];\n}\n"]}
+{"version":3,"file":"elevated-button.js","sourceRoot":"","sources":["elevated-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,qBAAqB,EAAC,MAAM,2CAA2C,CAAC;AAC1F,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAClB,CAAC,YAAY,EAAE,qBAAqB,EAAE,cAAc,CAAC,CAAC;AAF/C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAG5B;SAHY,gBAAgB","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 {ElevatedButton} from './internal/elevated-button.js';\nimport {styles as elevatedStyles} from './internal/elevated-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-elevated-button': MdElevatedButton;\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:__ Elevated buttons are essentially filled buttons with a lighter\n * background color and a shadow. To prevent shadow creep, only use them when\n * absolutely necessary, such as when the button requires visual separation from\n * a patterned background.\n *\n * __Example usages:__\n * - Reply\n * - View all\n * - Add to cart\n * - Take out of trash\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevated-button')\nexport class MdElevatedButton extends ElevatedButton {\n  static override styles =\n      [sharedStyles, sharedElevationStyles, elevatedStyles];\n}\n"]}

package/button/filled-button.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { FilledButton } from './lib/filled-button.js';
+import { FilledButton } from './internal/filled-button.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-filled-button': MdFilledButton;

package/button/filled-button.js

@@ -5,10 +5,10 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { FilledButton } from './lib/filled-button.js';
-import { styles as filledStyles } from './lib/filled-styles.css.js';
-import { styles as sharedElevationStyles } from './lib/shared-elevation-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { FilledButton } from './internal/filled-button.js';
+import { styles as filledStyles } from './internal/filled-styles.css.js';
+import { styles as sharedElevationStyles } from './internal/shared-elevation-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * @summary Buttons help people take action, such as sending an email, sharing a
  * document, or liking a comment.

package/button/filled-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-button.js","sourceRoot":"","sources":["filled-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,MAAM,IAAI,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AACrF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,YAAY,EAAE,qBAAqB,EAAE,YAAY,CAAC,CAAC;AADlE,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B;SAFY,cAAc","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 {FilledButton} from './lib/filled-button.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {styles as sharedElevationStyles} from './lib/shared-elevation-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-button': MdFilledButton;\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:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The filled button’s contrasting surface color makes it the\n * most prominent button after the FAB. It’s used for final or unblocking\n * actions in a flow.\n *\n * __Example usages:__\n * - Save\n * - Confirm\n * - Done\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-button')\nexport class MdFilledButton extends FilledButton {\n  static override styles = [sharedStyles, sharedElevationStyles, filledStyles];\n}\n"]}
+{"version":3,"file":"filled-button.js","sourceRoot":"","sources":["filled-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,YAAY,EAAC,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,qBAAqB,EAAC,MAAM,2CAA2C,CAAC;AAC1F,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,YAAY,EAAE,qBAAqB,EAAE,YAAY,CAAC,CAAC;AADlE,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B;SAFY,cAAc","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 {FilledButton} from './internal/filled-button.js';\nimport {styles as filledStyles} from './internal/filled-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-button': MdFilledButton;\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:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The filled button’s contrasting surface color makes it the\n * most prominent button after the FAB. It’s used for final or unblocking\n * actions in a flow.\n *\n * __Example usages:__\n * - Save\n * - Confirm\n * - Done\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-button')\nexport class MdFilledButton extends FilledButton {\n  static override styles = [sharedStyles, sharedElevationStyles, filledStyles];\n}\n"]}

package/button/filled-tonal-button.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FilledTonalButton } from './internal/filled-tonal-button.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-tonal-button': MdFilledTonalButton;
+    }
+}
+/**
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Filled tonal buttons have a lighter background color and
+ * darker label color, making them less visually prominent than a regular,
+ * filled button. They’re still used for final or unblocking actions in a flow,
+ * but do so with less emphasis.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFilledTonalButton extends FilledTonalButton {
+    static styles: import("lit").CSSResult[];
+}

package/button/filled-tonal-button.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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';
+/**
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Filled tonal buttons have a lighter background color and
+ * darker label color, making them less visually prominent than a regular,
+ * filled button. They’re still used for final or unblocking actions in a flow,
+ * but do so with less emphasis.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledTonalButton = class MdFilledTonalButton extends FilledTonalButton {
+};
+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/harness.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Button } from './lib/button.js';
+import { Button } from './internal/button.js';
 /**
  * Test harness for buttons.
  */

package/button/harness.js

@@ -10,7 +10,7 @@ import { Harness } from '../testing/harness.js';
 export class ButtonHarness extends Harness {
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return this.element.renderRoot.querySelector('.md3-button');
+        return this.element.renderRoot.querySelector('.button');
     }
 }
 //# sourceMappingURL=harness.js.map

package/button/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IAC7B,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAC;IAC7E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Button} from './lib/button.js';\n\n/**\n * Test harness for buttons.\n */\nexport class ButtonHarness extends Harness<Button> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.md3-button') as HTMLElement;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IAC7B,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAgB,CAAC;IACzE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Button} from './internal/button.js';\n\n/**\n * Test harness for buttons.\n */\nexport class ButtonHarness extends Harness<Button> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.button') as HTMLElement;\n  }\n}\n"]}

package/button/internal/_elevation.scss

@@ -0,0 +1,65 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../elevation/elevation';
+@use '../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+
+@mixin styles() {
+  md-elevation {
+    // TODO: replace duration with animation tokens
+    transition-duration: 280ms;
+    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
+  }
+
+  .button {
+    @include elevation.theme(
+      (
+        'level': var(--_container-elevation),
+        'shadow-color': var(--_container-shadow-color),
+      )
+    );
+
+    // apply elevation in order of focused, hovered, pressed, disabled
+    // this ensures a button will have hover elevation after being focused
+    &:focus {
+      @include elevation.theme(
+        (
+          'level': var(--_focus-container-elevation),
+        )
+      );
+    }
+
+    &:hover {
+      @include elevation.theme(
+        (
+          'level': var(--_hover-container-elevation),
+        )
+      );
+    }
+
+    &:active {
+      @include elevation.theme(
+        (
+          'level': var(--_pressed-container-elevation),
+        )
+      );
+    }
+
+    &:disabled {
+      @include elevation.theme(
+        (
+          'level': var(--_disabled-container-elevation),
+        )
+      );
+    }
+  }
+}

package/button/internal/_filled-tonal-button.scss

@@ -0,0 +1,61 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-tonal-button-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-filled-tonal-button-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-tonal-button-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-filled-tonal-button-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-filled-tonal-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-filled-tonal-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-filled-tonal-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-filled-tonal-button-container-shape-end-start,
+      var(--_container-shape)
+    );
+  }
+}

package/button/internal/_icon.scss

@@ -0,0 +1,39 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  // The icon CSS class overrides styles defined in the .material-icons CSS
+  // class, which is loaded separately so the order of CSS definitions is not
+  // guaranteed. Therefore, increase specifity to ensure overrides apply.
+  ::slotted([slot='icon']) {
+    .button & {
+      display: inline-flex;
+      position: relative;
+      writing-mode: horizontal-tb;
+      fill: currentColor;
+      color: var(--_icon-color);
+      font-size: var(--_icon-size);
+      inline-size: var(--_icon-size);
+      block-size: var(--_icon-size);
+    }
+
+    .button:hover & {
+      color: var(--_hover-icon-color);
+    }
+
+    .button:focus & {
+      color: var(--_focus-icon-color);
+    }
+
+    .button:active & {
+      color: var(--_pressed-icon-color);
+    }
+
+    .button:disabled & {
+      color: var(--_disabled-icon-color);
+      opacity: var(--_disabled-icon-opacity);
+    }
+  }
+}