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

package/README.md

@@ -28,10 +28,10 @@ breaking changes.
 
 Component                     | Alpha | Beta | Stable
 ----------------------------- | :---: | :--: | :----:
-Button                        | ✅     | ✅    | ❌
+Button                        | ✅     | ✅    | 🟡
 FAB                           | ✅     | ✅    | ❌
 Icon button                   | ✅     | ✅    | ❌
-Checkbox                      | ✅     | ✅    | ❌
+Checkbox                      | ✅     | ✅    | 🟡
 Chips                         | ✅     | ✅    | ❌
 Dialog                        | ✅     | ✅    | ❌
 Divider                       | ✅     | ✅    | ✅
@@ -41,13 +41,13 @@ Field                         | ✅     | ✅    | 🟡
 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,97 @@
+/**
+ * @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/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';
+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/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';
+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/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';
+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/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';
+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,106 @@
+/**
+ * @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/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';
+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/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';
+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/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';
+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/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';
+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/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"]}

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/_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/_tonal-button.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/tonal-button' show theme;
+@forward './internal/tonal-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/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/{lib → internal}/_elevation.scss

@@ -3,9 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 // go/keep-sorted start
 @use 'sass:map';
 // go/keep-sorted end
@@ -23,7 +20,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
   }
 
-  .md3-button {
+  .button {
     @include elevation.theme(
       (
         'level': var(--_container-elevation),

package/button/{lib → internal}/_icon.scss

@@ -3,15 +3,12 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @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']) {
-    .md3-button & {
+    .button & {
       display: inline-flex;
       position: relative;
       writing-mode: horizontal-tb;
@@ -22,19 +19,19 @@
       block-size: var(--_icon-size);
     }
 
-    .md3-button:hover & {
+    .button:hover & {
       color: var(--_hover-icon-color);
     }
 
-    .md3-button:focus & {
+    .button:focus & {
       color: var(--_focus-icon-color);
     }
 
-    .md3-button:active & {
+    .button:active & {
       color: var(--_pressed-icon-color);
     }
 
-    .md3-button:disabled & {
+    .button:disabled & {
       color: var(--_disabled-icon-color);
       opacity: var(--_disabled-icon-opacity);
     }

package/button/{lib → internal}/_outlined-button.scss

@@ -11,9 +11,6 @@
 @use '../../tokens';
 // go/keep-sorted end
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @mixin theme($tokens) {
   $supported-tokens: list.join(
     tokens.$md-comp-outlined-button-supported-tokens,
@@ -67,7 +64,7 @@
     );
   }
 
-  .md3-button__outline {
+  .button__outline {
     inset: 0;
     border-style: solid;
     position: absolute;
@@ -78,22 +75,22 @@
     border-end-start-radius: var(--_container-shape-end-start);
     border-end-end-radius: var(--_container-shape-end-end);
 
-    .md3-button:active & {
+    .button:active & {
       border-color: var(--_pressed-outline-color);
     }
 
-    .md3-button:disabled & {
+    .button:disabled & {
       border-color: var(--_disabled-outline-color);
       opacity: var(--_disabled-outline-opacity);
     }
   }
 
-  .md3-button__outline,
-  .md3-button__ripple {
+  .button__outline,
+  .button__ripple {
     border-width: var(--_outline-width);
   }
 
-  .md3-button__ripple {
+  .button__ripple {
     inline-size: calc(100% - 2 * var(--_outline-width));
     block-size: calc(100% - 2 * var(--_outline-width));
     border-style: solid;

package/button/{lib → internal}/_shared.scss

@@ -3,9 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 // go/keep-sorted start
 @use 'sass:map';
 // go/keep-sorted end
@@ -19,11 +16,9 @@
     display: inline-flex;
     outline: none;
     -webkit-tap-highlight-color: transparent;
-    /**
-     * Override vertical-align with shortest value "top". Vertical-align's default
-     * "baseline" value causes buttons to be misaligned next to each other if one
-     * button has an icon and the other does not.
-     */
+    // Override vertical-align with shortest value "top". Vertical-align's
+    // default "baseline" value causes buttons to be misaligned next to each
+    // other if one button has an icon and the other does not.
     vertical-align: top;
 
     @include ripple.theme(
@@ -34,7 +29,9 @@
         pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
+  }
 
+  md-focus-ring {
     @include focus-ring.theme(
       (
         'shape-start-start': var(--_container-shape-start-start),
@@ -50,7 +47,7 @@
     pointer-events: none;
   }
 
-  .md3-button {
+  .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -102,7 +99,7 @@
       outline: none;
     }
 
-    &:disabled .md3-button__label {
+    &:disabled .button__label {
       color: var(--_disabled-label-text-color);
       opacity: var(--_disabled-label-text-opacity);
     }
@@ -125,38 +122,33 @@
     }
   }
 
-  .md3-button,
-  .md3-button__ripple {
+  .button,
+  .button__ripple {
     border-start-start-radius: var(--_container-shape-start-start);
     border-start-end-radius: var(--_container-shape-start-end);
     border-end-start-radius: var(--_container-shape-end-start);
     border-end-end-radius: var(--_container-shape-end-end);
   }
 
-  .md3-button::after,
-  .md3-button::before,
+  .button::after,
+  .button::before,
   md-elevation,
-  .md3-button__ripple {
+  .button__ripple {
     z-index: -1; // Place behind content
   }
 
   // TODO(b/181413732): Verify token below are named correctly
-  .md3-button--icon-leading {
+  .button--icon-leading {
     padding-inline-start: var(--_with-icon-spacing-leading);
     padding-inline-end: var(--_with-icon-spacing-trailing);
   }
 
-  .md3-button--icon-trailing {
+  .button--icon-trailing {
     padding-inline-start: var(--_with-trailing-icon-spacing-leading);
     padding-inline-end: var(--_with-trailing-icon-spacing-trailing);
   }
 
-  .md3-link-button-wrapper {
+  .link-button-wrapper {
     inline-size: 100%;
   }
 }
-
-:root {
-  --md-filled-button-container-shape-start-start: 12px;
-  --md-filled-button-container-shape: 8px;
-}

package/button/{lib → internal}/_touch-target.scss

@@ -3,11 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @mixin styles() {
-  .md3-button__touch {
+  .button__touch {
     position: absolute;
     top: 50%;
     height: 48px;

package/button/{lib → internal}/button.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '../../focus/focus-ring.js';
+import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { LitElement, nothing, TemplateResult } from 'lit';
 /**
@@ -53,8 +53,8 @@ export declare abstract class Button extends LitElement {
     blur(): void;
     protected render(): TemplateResult<2 | 1>;
     protected getRenderClasses(): {
-        'md3-button--icon-leading': boolean;
-        'md3-button--icon-trailing': boolean;
+        'button--icon-leading': boolean;
+        'button--icon-trailing': boolean;
     };
     protected renderElevation(): TemplateResult | typeof nothing;
     protected renderOutline(): TemplateResult | typeof nothing;