@material/web 1.0.0-pre.8 → 1.0.0

package/README.md

@@ -1,81 +1,20 @@
 # Material Web
 
-> IMPORTANT: Material Web is a work in progress and subject to major changes
-> until 1.0 release.
+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 Google’s UI toolkit for building beautiful, 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.
 
-> Note: Looking for Material 2? `<mwc-*` components are now on the
-> [`mwc` branch](https://github.com/material-components/material-web/tree/mwc).
+> Tip: Using Angular? We recommend using
+> [Angular Material](https://material.angular.io/)<!-- {.external} --> components
+> instead.
 
-## Links
+**Resources**
 
-- [Quick start](docs/quick-start.md)
-
-## Roadmap
-
-**Alpha** components are in-development and may have many frequent breaking
-changes.
-
-**Beta** components are mostly polished and ready for use.
-
-**Stable** components are reviewed, documented, and API complete.
-
--   ❌ Not started
--   🟡 In progress
--   ✅ Complete
-
-### 1.0 Components
-
-Component                     | Alpha | Beta | Stable
------------------------------ | :---: | :--: | :----:
-Button                        | ✅     | ✅    | ❌
-FAB                           | ✅     | ✅    | ❌
-Icon button                   | ✅     | ✅    | ❌
-Checkbox                      | ✅     | ✅    | ❌
-Chips                         | 🟡     | ❌    | ❌
-Dialog                        | ✅     | ✅    | ❌
-Divider                       | ✅     | ✅    | 🟡
-Elevation                     | ✅     | ✅    | 🟡
-Focus ring                    | ✅     | ✅    | 🟡
-Field                         | ✅     | ✅    | 🟡
-Icon                          | ✅     | ✅    | ❌
-List                          | ✅     | ✅    | ❌
-Menu                          | ✅     | ✅    | ❌
-Progress indicator (circular) | ✅     | ✅    | 🟡
-Progress indicator (linear)   | ✅     | ✅    | 🟡
-Radio button                  | ✅     | ✅    | ❌
-Ripple                        | ✅     | ✅    | 🟡
-Select                        | ✅     | ✅    | ❌
-Slider                        | ✅     | ✅    | ❌
-Switch                        | ✅     | ✅    | ❌
-Tabs                          | 🟡     | ❌    | ❌
-Text field                    | ✅     | ✅    | 🟡
-
-### 1.1+ Components
-
-These components are planned for release after 1.0.
-
-Component         | Alpha | Beta | Stable
------------------ | :---: | :--: | :----:
-Autocomplete      | ❌     | ❌    | ❌
-Badge             | 🟡     | ❌    | ❌
-Banner            | ❌     | ❌    | ❌
-Bottom app bar    | ❌     | ❌    | ❌
-Bottom sheet      | ❌     | ❌    | ❌
-Segmented button  | 🟡     | ❌    | ❌
-Card              | ❌     | ❌    | ❌
-Data table        | ❌     | ❌    | ❌
-Date picker       | ❌     | ❌    | ❌
-Navigation bar    | 🟡     | ❌    | ❌
-Navigation drawer | 🟡     | ❌    | ❌
-Navigation rail   | ❌     | ❌    | ❌
-Search            | ❌     | ❌    | ❌
-Snackbar          | ❌     | ❌    | ❌
-Time picker       | ❌     | ❌    | ❌
-Tooltip           | ❌     | ❌    | ❌
-Top app bar       | ❌     | ❌    | ❌
+-   [Introduction](docs/intro.md)
+-   [Roadmap](docs/roadmap.md)
+-   [Quick start](docs/quick-start.md)
+-   [Component docs](docs/components/)
+-   [Browser support and FAQ](docs/support.md)

package/all.d.ts

@@ -0,0 +1,95 @@
+/**
+ * @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.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/primary-tab.js';
+import './tabs/secondary-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.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/primary-tab.js';
+export * from './tabs/secondary-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,104 @@
+/**
+ * @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.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/primary-tab.js';
+import './tabs/secondary-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.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/primary-tab.js';
+export * from './tabs/secondary-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.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/primary-tab.js';\nimport './tabs/secondary-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.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/primary-tab.js';\nexport * from './tabs/secondary-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.
@@ -31,11 +31,10 @@ import { styles as sharedStyles } from './lib/shared-styles.css.js';
  * @final
  * @suppress {visibility}
  */
-let MdElevatedButton = class MdElevatedButton extends ElevatedButton {
+export let MdElevatedButton = class MdElevatedButton extends ElevatedButton {
 };
 MdElevatedButton.styles = [sharedStyles, sharedElevationStyles, elevatedStyles];
 MdElevatedButton = __decorate([
     customElement('md-elevated-button')
 ], MdElevatedButton);
-export { MdElevatedButton };
 //# sourceMappingURL=elevated-button.js.map

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,WAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAClB,CAAC,YAAY,EAAE,qBAAqB,EAAE,cAAc,CAAC,AADnC,CACoC;AAF/C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAG5B","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.
@@ -29,11 +29,10 @@ import { styles as sharedStyles } from './lib/shared-styles.css.js';
  * @final
  * @suppress {visibility}
  */
-let MdFilledButton = class MdFilledButton extends FilledButton {
+export let MdFilledButton = class MdFilledButton extends FilledButton {
 };
 MdFilledButton.styles = [sharedStyles, sharedElevationStyles, filledStyles];
 MdFilledButton = __decorate([
     customElement('md-filled-button')
 ], MdFilledButton);
-export { MdFilledButton };
 //# sourceMappingURL=filled-button.js.map

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,WAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,YAAY,EAAE,qBAAqB,EAAE,YAAY,CAAC,AAAtD,CAAuD;AADlE,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B","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,39 @@
+/**
+ * @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}
+ */
+export let MdFilledTonalButton = class MdFilledTonalButton extends FilledTonalButton {
+};
+MdFilledTonalButton.styles = [sharedStyles, sharedElevationStyles, tonalStyles];
+MdFilledTonalButton = __decorate([
+    customElement('md-filled-tonal-button')
+], 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,WAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB;;AACxC,0BAAM,GAAG,CAAC,YAAY,EAAE,qBAAqB,EAAE,WAAW,CAAC,AAArD,CAAsD;AADjE,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAE/B","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/_elevated-button.scss

@@ -0,0 +1,62 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-elevated-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-elevated-button-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-elevated-button-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-elevated-button-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-elevated-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-elevated-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-elevated-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-elevated-button-container-shape-end-start,
+      var(--_container-shape)
+    );
+  }
+}