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

package/README.md

@@ -41,13 +41,13 @@ Chips                         | 🟡     | ❌    | ❌
 Dialog                        | ✅     | ✅    | ❌
 Divider                       | ✅     | ✅    | 🟡
 Elevation                     | ✅     | ✅    | 🟡
-Focus ring                    | ✅     | ❌    | ❌
+Focus ring                    | ✅     | ✅    | 🟡
 Field                         | ✅     | ✅    | 🟡
 Icon                          | ✅     | ✅    | ❌
 List                          | ✅     | ✅    | ❌
 Menu                          | ✅     | ✅    | ❌
-Progress indicator (circular) | ✅     | ✅    | ❌
-Progress indicator (linear)   | ✅     | ✅    | ❌
+Progress indicator (circular) | ✅     | ✅    | 🟡
+Progress indicator (linear)   | ✅     | ✅    | 🟡
 Radio button                  | ✅     | ✅    | ❌
 Ripple                        | ✅     | ✅    | 🟡
 Select                        | ✅     | ✅    | ❌

package/aria/aria.js

@@ -7,19 +7,43 @@
  * Accessibility Object Model reflective aria properties.
  */
 export const ARIA_PROPERTIES = [
-    'ariaAtomic', 'ariaAutoComplete', 'ariaBusy',
-    'ariaChecked', 'ariaColCount', 'ariaColIndex',
-    'ariaColIndexText', 'ariaColSpan', 'ariaCurrent',
-    'ariaDisabled', 'ariaExpanded', 'ariaHasPopup',
-    'ariaHidden', 'ariaInvalid', 'ariaKeyShortcuts',
-    'ariaLabel', 'ariaLevel', 'ariaLive',
-    'ariaModal', 'ariaMultiLine', 'ariaMultiSelectable',
-    'ariaOrientation', 'ariaPlaceholder', 'ariaPosInSet',
-    'ariaPressed', 'ariaReadOnly', 'ariaRequired',
-    'ariaRoleDescription', 'ariaRowCount', 'ariaRowIndex',
-    'ariaRowIndexText', 'ariaRowSpan', 'ariaSelected',
-    'ariaSetSize', 'ariaSort', 'ariaValueMax',
-    'ariaValueMin', 'ariaValueNow', 'ariaValueText',
+    'ariaAtomic',
+    'ariaAutoComplete',
+    'ariaBusy',
+    'ariaChecked',
+    'ariaColCount',
+    'ariaColIndex',
+    'ariaColSpan',
+    'ariaCurrent',
+    'ariaDisabled',
+    'ariaExpanded',
+    'ariaHasPopup',
+    'ariaHidden',
+    'ariaInvalid',
+    'ariaKeyShortcuts',
+    'ariaLabel',
+    'ariaLevel',
+    'ariaLive',
+    'ariaModal',
+    'ariaMultiLine',
+    'ariaMultiSelectable',
+    'ariaOrientation',
+    'ariaPlaceholder',
+    'ariaPosInSet',
+    'ariaPressed',
+    'ariaReadOnly',
+    'ariaRequired',
+    'ariaRoleDescription',
+    'ariaRowCount',
+    'ariaRowIndex',
+    'ariaRowSpan',
+    'ariaSelected',
+    'ariaSetSize',
+    'ariaSort',
+    'ariaValueMax',
+    'ariaValueMin',
+    'ariaValueNow',
+    'ariaValueText',
 ];
 /**
  * Accessibility Object Model aria attributes.

package/aria/aria.js.map

@@ -1 +1 @@
-{"version":3,"file":"aria.js","sourceRoot":"","sources":["aria.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAmB;IAC7C,YAAY,EAAW,kBAAkB,EAAE,UAAU;IACrD,aAAa,EAAU,cAAc,EAAM,cAAc;IACzD,kBAAkB,EAAK,aAAa,EAAO,aAAa;IACxD,cAAc,EAAS,cAAc,EAAM,cAAc;IACzD,YAAY,EAAW,aAAa,EAAO,kBAAkB;IAC7D,WAAW,EAAY,WAAW,EAAS,UAAU;IACrD,WAAW,EAAY,eAAe,EAAK,qBAAqB;IAChE,iBAAiB,EAAM,iBAAiB,EAAG,cAAc;IACzD,aAAa,EAAU,cAAc,EAAM,cAAc;IACzD,qBAAqB,EAAE,cAAc,EAAM,cAAc;IACzD,kBAAkB,EAAK,aAAa,EAAO,cAAc;IACzD,aAAa,EAAU,UAAU,EAAU,cAAc;IACzD,cAAc,EAAS,cAAc,EAAM,eAAe;CAC3D,CAAC;AAOF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;AAE5E;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAAC,SAAiB;IAC/C,OAAO,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AACvC,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,uBAAuB,CACnC,QAAW;IACb,OAAO,QAAQ;SACH,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC;QACzB,kEAAkE;SACjE,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC;SACzB,WAAW,EAAgC,CAAC;AAC1D,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Accessibility Object Model reflective aria property name types.\n */\nexport type ARIAProperty = Exclude<keyof ARIAMixin, 'role'>;\n\n/**\n * Accessibility Object Model reflective aria properties.\n */\nexport const ARIA_PROPERTIES: ARIAProperty[] = [\n  'ariaAtomic',          'ariaAutoComplete', 'ariaBusy',\n  'ariaChecked',         'ariaColCount',     'ariaColIndex',\n  'ariaColIndexText',    'ariaColSpan',      'ariaCurrent',\n  'ariaDisabled',        'ariaExpanded',     'ariaHasPopup',\n  'ariaHidden',          'ariaInvalid',      'ariaKeyShortcuts',\n  'ariaLabel',           'ariaLevel',        'ariaLive',\n  'ariaModal',           'ariaMultiLine',    'ariaMultiSelectable',\n  'ariaOrientation',     'ariaPlaceholder',  'ariaPosInSet',\n  'ariaPressed',         'ariaReadOnly',     'ariaRequired',\n  'ariaRoleDescription', 'ariaRowCount',     'ariaRowIndex',\n  'ariaRowIndexText',    'ariaRowSpan',      'ariaSelected',\n  'ariaSetSize',         'ariaSort',         'ariaValueMax',\n  'ariaValueMin',        'ariaValueNow',     'ariaValueText',\n];\n\n/**\n * Accessibility Object Model aria attribute name types.\n */\nexport type ARIAAttribute = ARIAPropertyToAttribute<ARIAProperty>;\n\n/**\n * Accessibility Object Model aria attributes.\n */\nexport const ARIA_ATTRIBUTES = ARIA_PROPERTIES.map(ariaPropertyToAttribute);\n\n/**\n * Checks if an attribute is one of the AOM aria attributes.\n *\n * @example\n * isAriaAttribute('aria-label'); // true\n *\n * @param attribute The attribute to check.\n * @return True if the attribute is an aria attribute, or false if not.\n */\nexport function isAriaAttribute(attribute: string): attribute is ARIAAttribute {\n  return attribute.startsWith('aria-');\n}\n\n/**\n * Converts an AOM aria property into its corresponding attribute.\n *\n * @example\n * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'\n *\n * @param property The aria property.\n * @return The aria attribute.\n */\nexport function ariaPropertyToAttribute<K extends ARIAProperty|'role'>(\n    property: K) {\n  return property\n             .replace('aria', 'aria-')\n             // IDREF attributes also include an \"Element\" or \"Elements\" suffix\n             .replace(/Elements?/g, '')\n             .toLowerCase() as ARIAPropertyToAttribute<K>;\n}\n\n// Converts an `ariaFoo` string type to an `aria-foo` string type.\ntype ARIAPropertyToAttribute<K extends string> =\n    K extends `aria${infer Suffix}Element${infer OptS}` ?\n    `aria-${Lowercase < Suffix >}` :\n    K extends `aria${infer Suffix}` ? `aria-${Lowercase < Suffix >}` : K;\n"]}
+{"version":3,"file":"aria.js","sourceRoot":"","sources":["aria.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAmB;IAC7C,YAAY;IACZ,kBAAkB;IAClB,UAAU;IACV,aAAa;IACb,cAAc;IACd,cAAc;IACd,aAAa;IACb,aAAa;IACb,cAAc;IACd,cAAc;IACd,cAAc;IACd,YAAY;IACZ,aAAa;IACb,kBAAkB;IAClB,WAAW;IACX,WAAW;IACX,UAAU;IACV,WAAW;IACX,eAAe;IACf,qBAAqB;IACrB,iBAAiB;IACjB,iBAAiB;IACjB,cAAc;IACd,aAAa;IACb,cAAc;IACd,cAAc;IACd,qBAAqB;IACrB,cAAc;IACd,cAAc;IACd,aAAa;IACb,cAAc;IACd,aAAa;IACb,UAAU;IACV,cAAc;IACd,cAAc;IACd,cAAc;IACd,eAAe;CAChB,CAAC;AAOF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;AAE5E;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAAC,SAAiB;IAC/C,OAAO,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AACvC,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,uBAAuB,CACnC,QAAW;IACb,OAAO,QAAQ;SACH,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC;QACzB,kEAAkE;SACjE,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC;SACzB,WAAW,EAAgC,CAAC;AAC1D,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Accessibility Object Model reflective aria property name types.\n */\nexport type ARIAProperty = Exclude<keyof ARIAMixin, 'role'>;\n\n/**\n * Accessibility Object Model reflective aria properties.\n */\nexport const ARIA_PROPERTIES: ARIAProperty[] = [\n  'ariaAtomic',\n  'ariaAutoComplete',\n  'ariaBusy',\n  'ariaChecked',\n  'ariaColCount',\n  'ariaColIndex',\n  'ariaColSpan',\n  'ariaCurrent',\n  'ariaDisabled',\n  'ariaExpanded',\n  'ariaHasPopup',\n  'ariaHidden',\n  'ariaInvalid',\n  'ariaKeyShortcuts',\n  'ariaLabel',\n  'ariaLevel',\n  'ariaLive',\n  'ariaModal',\n  'ariaMultiLine',\n  'ariaMultiSelectable',\n  'ariaOrientation',\n  'ariaPlaceholder',\n  'ariaPosInSet',\n  'ariaPressed',\n  'ariaReadOnly',\n  'ariaRequired',\n  'ariaRoleDescription',\n  'ariaRowCount',\n  'ariaRowIndex',\n  'ariaRowSpan',\n  'ariaSelected',\n  'ariaSetSize',\n  'ariaSort',\n  'ariaValueMax',\n  'ariaValueMin',\n  'ariaValueNow',\n  'ariaValueText',\n];\n\n/**\n * Accessibility Object Model aria attribute name types.\n */\nexport type ARIAAttribute = ARIAPropertyToAttribute<ARIAProperty>;\n\n/**\n * Accessibility Object Model aria attributes.\n */\nexport const ARIA_ATTRIBUTES = ARIA_PROPERTIES.map(ariaPropertyToAttribute);\n\n/**\n * Checks if an attribute is one of the AOM aria attributes.\n *\n * @example\n * isAriaAttribute('aria-label'); // true\n *\n * @param attribute The attribute to check.\n * @return True if the attribute is an aria attribute, or false if not.\n */\nexport function isAriaAttribute(attribute: string): attribute is ARIAAttribute {\n  return attribute.startsWith('aria-');\n}\n\n/**\n * Converts an AOM aria property into its corresponding attribute.\n *\n * @example\n * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'\n *\n * @param property The aria property.\n * @return The aria attribute.\n */\nexport function ariaPropertyToAttribute<K extends ARIAProperty|'role'>(\n    property: K) {\n  return property\n             .replace('aria', 'aria-')\n             // IDREF attributes also include an \"Element\" or \"Elements\" suffix\n             .replace(/Elements?/g, '')\n             .toLowerCase() as ARIAPropertyToAttribute<K>;\n}\n\n// Converts an `ariaFoo` string type to an `aria-foo` string type.\ntype ARIAPropertyToAttribute<K extends string> =\n    K extends `aria${infer Suffix}Element${infer OptS}` ?\n    `aria-${Lowercase < Suffix >}` :\n    K extends `aria${infer Suffix}` ? `aria-${Lowercase < Suffix >}` : K;\n"]}

package/aria/delegate.d.ts

@@ -23,7 +23,7 @@ import { ReactiveElement } from 'lit';
  *     requestUpdateOnAriaChange(this);
  *   }
  *
- *   override render() {
+ *   protected override render() {
  *     return html`
  *       <button aria-label=${this.ariaLabel || nothing}>
  *         <slot></slot>

package/aria/delegate.js

@@ -23,7 +23,7 @@ import { ARIA_PROPERTIES, ariaPropertyToAttribute } from './aria.js';
  *     requestUpdateOnAriaChange(this);
  *   }
  *
- *   override render() {
+ *   protected override render() {
  *     return html`
  *       <button aria-label=${this.ariaLabel || nothing}>
  *         <slot></slot>

package/aria/delegate.js.map

@@ -1 +1 @@
-{"version":3,"file":"delegate.js","sourceRoot":"","sources":["delegate.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,eAAe,EAAE,uBAAuB,EAAC,MAAM,WAAW,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,yBAAyB,CAAC,IAA4B;IACpE,KAAK,MAAM,YAAY,IAAI,eAAe,EAAE;QAC1C,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE;YAChC,SAAS,EAAE,uBAAuB,CAAC,YAAY,CAAC;YAChD,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;QAC5B,MAAM,UAAU,GAAG;YACjB,aAAa;gBACX,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;YAC/C,CAAC;SACF,CAAC;QAEF,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveElement} from 'lit';\n\nimport {ARIA_PROPERTIES, ariaPropertyToAttribute} from './aria.js';\n\n/**\n * Sets up a `ReactiveElement` constructor to enable updates when delegating\n * aria attributes. Elements may bind `this.aria*` properties to `aria-*`\n * attributes in their render functions.\n *\n * This function will:\n * - Call `requestUpdate()` when an aria attribute changes.\n * - Add `role=\"presentation\"` to the host.\n *\n * NOTE: The following features are not currently supported:\n * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)\n * - Delegating the `role` attribute\n *\n * @example\n * class XButton extends LitElement {\n *   static {\n *     requestUpdateOnAriaChange(this);\n *   }\n *\n *   override render() {\n *     return html`\n *       <button aria-label=${this.ariaLabel || nothing}>\n *         <slot></slot>\n *       </button>\n *     `;\n *   }\n * }\n *\n * @param ctor The `ReactiveElement` constructor to patch.\n */\nexport function requestUpdateOnAriaChange(ctor: typeof ReactiveElement) {\n  for (const ariaProperty of ARIA_PROPERTIES) {\n    ctor.createProperty(ariaProperty, {\n      attribute: ariaPropertyToAttribute(ariaProperty),\n      reflect: true,\n    });\n  }\n\n  ctor.addInitializer(element => {\n    const controller = {\n      hostConnected() {\n        element.setAttribute('role', 'presentation');\n      }\n    };\n\n    element.addController(controller);\n  });\n}\n"]}
+{"version":3,"file":"delegate.js","sourceRoot":"","sources":["delegate.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,eAAe,EAAE,uBAAuB,EAAC,MAAM,WAAW,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,yBAAyB,CAAC,IAA4B;IACpE,KAAK,MAAM,YAAY,IAAI,eAAe,EAAE;QAC1C,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE;YAChC,SAAS,EAAE,uBAAuB,CAAC,YAAY,CAAC;YAChD,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;QAC5B,MAAM,UAAU,GAAG;YACjB,aAAa;gBACX,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;YAC/C,CAAC;SACF,CAAC;QAEF,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveElement} from 'lit';\n\nimport {ARIA_PROPERTIES, ariaPropertyToAttribute} from './aria.js';\n\n/**\n * Sets up a `ReactiveElement` constructor to enable updates when delegating\n * aria attributes. Elements may bind `this.aria*` properties to `aria-*`\n * attributes in their render functions.\n *\n * This function will:\n * - Call `requestUpdate()` when an aria attribute changes.\n * - Add `role=\"presentation\"` to the host.\n *\n * NOTE: The following features are not currently supported:\n * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)\n * - Delegating the `role` attribute\n *\n * @example\n * class XButton extends LitElement {\n *   static {\n *     requestUpdateOnAriaChange(this);\n *   }\n *\n *   protected override render() {\n *     return html`\n *       <button aria-label=${this.ariaLabel || nothing}>\n *         <slot></slot>\n *       </button>\n *     `;\n *   }\n * }\n *\n * @param ctor The `ReactiveElement` constructor to patch.\n */\nexport function requestUpdateOnAriaChange(ctor: typeof ReactiveElement) {\n  for (const ariaProperty of ARIA_PROPERTIES) {\n    ctor.createProperty(ariaProperty, {\n      attribute: ariaPropertyToAttribute(ariaProperty),\n      reflect: true,\n    });\n  }\n\n  ctor.addInitializer(element => {\n    const controller = {\n      hostConnected() {\n        element.setAttribute('role', 'presentation');\n      }\n    };\n\n    element.addController(controller);\n  });\n}\n"]}

package/badge/lib/badge.d.ts

@@ -10,7 +10,4 @@ import { LitElement } from 'lit';
 export declare class Badge extends LitElement {
     value: string;
     protected render(): import("lit-html").TemplateResult<1>;
-    protected getRenderClasses(): {
-        'md3-badge--large': string;
-    };
 }

package/badge/lib/badge.js

@@ -16,12 +16,10 @@ export class Badge extends LitElement {
         this.value = '';
     }
     render() {
-        return html `<div class="md3-badge ${classMap(this.getRenderClasses())}"><p class="md3-badge__value">${this.value}</p></div>`;
-    }
-    getRenderClasses() {
-        return {
-            'md3-badge--large': this.value,
-        };
+        const classes = { 'md3-badge--large': this.value };
+        return html `<div class="md3-badge ${classMap(classes)}">
+      <p class="md3-badge__value">${this.value}</p>
+    </div>`;
     }
 }
 __decorate([

package/badge/lib/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD;;GAEG;AACH,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QACc,UAAK,GAAG,EAAE,CAAC;IAazB,CAAC;IAXoB,MAAM;QACvB,OAAO,IAAI,CAAA,yBACP,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,iCACjC,IAAI,CAAC,KAAK,YAAY,CAAC;IAC7B,CAAC;IAES,gBAAgB;QACxB,OAAO;YACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;SAC/B,CAAC;IACJ,CAAC;CACF;AAba;IAAX,QAAQ,EAAE;oCAAY","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\n/**\n * TODO(b/265340196): add docs\n */\nexport class Badge extends LitElement {\n  @property() value = '';\n\n  protected override render() {\n    return html`<div class=\"md3-badge ${\n        classMap(this.getRenderClasses())}\"><p class=\"md3-badge__value\">${\n        this.value}</p></div>`;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'md3-badge--large': this.value,\n    };\n  }\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD;;GAEG;AACH,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QACc,UAAK,GAAG,EAAE,CAAC;IASzB,CAAC;IAPoB,MAAM;QACvB,MAAM,OAAO,GAAG,EAAC,kBAAkB,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC;QAEjD,OAAO,IAAI,CAAA,yBAAyB,QAAQ,CAAC,OAAO,CAAC;oCACrB,IAAI,CAAC,KAAK;WACnC,CAAC;IACV,CAAC;CACF;AATa;IAAX,QAAQ,EAAE;oCAAY","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\n/**\n * TODO(b/265340196): add docs\n */\nexport class Badge extends LitElement {\n  @property() value = '';\n\n  protected override render() {\n    const classes = {'md3-badge--large': this.value};\n\n    return html`<div class=\"md3-badge ${classMap(classes)}\">\n      <p class=\"md3-badge__value\">${this.value}</p>\n    </div>`;\n  }\n}\n"]}

package/button/lib/_elevated-button.scss

@@ -4,21 +4,32 @@
 //
 
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/theme';
 @use '../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-elevated-button-values(),
-    $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 {
-    --md-elevated-button-#{$token}: #{$value};
+    @if list.index($supported-tokens, $token) {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-elevated-button-#{$token}: #{$value};
+    }
   }
 }
 
@@ -27,7 +38,25 @@
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$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)
+    );
   }
 }

package/button/lib/_filled-button.scss

@@ -12,10 +12,24 @@
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-filled-button-values(), $tokens);
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-button-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
+  );
 
   @each $token, $value in $tokens {
-    --md-filled-button-#{$token}: #{$value};
+    @if list.index($supported-tokens, $token) {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-filled-button-#{$token}: #{$value};
+    }
   }
 }
 
@@ -24,7 +38,25 @@
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-filled-button-#{$token}, #{$value});
     }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-filled-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-filled-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-filled-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-filled-button-container-shape-end-start,
+      var(--_container-shape)
+    );
   }
 }

package/button/lib/_outlined-button.scss

@@ -4,10 +4,10 @@
 //
 
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/theme';
 @use '../../tokens';
 // go/keep-sorted end
 
@@ -15,13 +15,24 @@
 // Selector '.md3-*' should only be used in this project.
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-outlined-button-values(),
-    $tokens
+  $supported-tokens: list.join(
+    tokens.$md-comp-outlined-button-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
   );
 
   @each $token, $value in $tokens {
-    --md-outlined-button-#{$token}: #{$value};
+    @if list.index($supported-tokens, $token) {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-outlined-button-#{$token}: #{$value};
+    }
   }
 }
 
@@ -30,8 +41,26 @@
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-outlined-button-#{$token}, #{$value});
     }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-outlined-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-outlined-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-outlined-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-outlined-button-container-shape-end-start,
+      var(--_container-shape)
+    );
   }
 
   .md3-button__outline {

package/button/lib/_shared.scss

@@ -13,7 +13,6 @@
 @use '../../focus/focus-ring';
 @use '../../ripple/ripple';
 @use '../../sass/dom';
-@use '../../sass/shape';
 // go/keep-sorted end
 
 @mixin styles() {
@@ -41,7 +40,10 @@
 
     @include focus-ring.theme(
       (
-        shape: shape.corners-to-shape-token('--_container-shape'),
+        'shape-start-start': var(--_container-shape-start-start),
+        'shape-start-end': var(--_container-shape-start-end),
+        'shape-end-end': var(--_container-shape-end-end),
+        'shape-end-start': var(--_container-shape-end-start),
       )
     );
   }

package/button/lib/_text-button.scss

@@ -7,17 +7,28 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/theme';
 @use '../../tokens';
 // go/keep-sorted end
 
-$_custom-property-prefix: 'text-button';
-
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-text-button-values(), $tokens);
+  $supported-tokens: list.join(
+    tokens.$md-comp-text-button-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
+  );
 
   @each $token, $value in $tokens {
-    --md-text-button-#{$token}: #{$value};
+    @if list.index($supported-tokens, $token) {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-text-button-#{$token}: #{$value};
+    }
   }
 }
 
@@ -26,11 +37,29 @@ $_custom-property-prefix: 'text-button';
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-text-button-#{$token}, #{$value});
     }
 
     --_container-color: none;
     --_disabled-container-color: none;
     --_disabled-container-opacity: 0;
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-text-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-text-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-text-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-text-button-container-shape-end-start,
+      var(--_container-shape)
+    );
   }
 }

package/button/lib/_tonal-button.scss

@@ -7,19 +7,28 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/shape';
-@use '../../sass/theme';
 @use '../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-filled-tonal-button-values(),
-    $tokens
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-button-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
   );
 
   @each $token, $value in $tokens {
-    --md-tonal-button-#{$token}: #{$value};
+    @if list.index($supported-tokens, $token) {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-tonal-button-#{$token}: #{$value};
+    }
   }
 }
 
@@ -28,7 +37,25 @@
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-tonal-button-#{$token}, #{$value});
     }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-tonal-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-tonal-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-tonal-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-tonal-button-container-shape-end-start,
+      var(--_container-shape)
+    );
   }
 }

package/button/lib/button.d.ts

@@ -5,9 +5,7 @@
  */
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
-import { LitElement, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
-import { MdRipple } from '../../ripple/ripple.js';
+import { LitElement, nothing, TemplateResult } from 'lit';
 /**
  * A button component.
  */
@@ -43,30 +41,29 @@ export declare abstract class Button extends LitElement {
      * submissions.
      */
     preventClickDefault: boolean;
-    protected buttonElement: HTMLElement;
-    protected ripple: Promise<MdRipple | null>;
-    protected showFocusRing: boolean;
-    protected showRipple: boolean;
-    protected assignedIcons: HTMLElement[];
+    private readonly buttonElement;
+    private readonly ripple;
+    private showRipple;
+    private readonly assignedIcons;
     constructor();
-    private readonly handleActivationClick;
     focus(): void;
     blur(): void;
-    protected readonly getRipple: () => Promise<MdRipple>;
-    protected render(): TemplateResult;
-    protected getRenderClasses(): ClassInfo;
-    protected renderTouchTarget(): TemplateResult;
-    protected renderElevation(): TemplateResult;
-    protected renderRipple: () => TemplateResult<1>;
-    protected renderOutline(): TemplateResult;
-    protected renderFocusRing(): TemplateResult;
-    protected renderLabel(): TemplateResult;
-    protected renderLeadingIcon(): TemplateResult | string;
-    protected renderTrailingIcon(): TemplateResult | string;
-    protected renderIcon(): TemplateResult;
-    protected handlePointerDown(e: PointerEvent): void;
-    protected handleClick(e: MouseEvent): void;
-    protected handleFocus(): void;
-    protected handleBlur(): void;
-    protected handleSlotChange(): void;
+    protected render(): TemplateResult<2 | 1>;
+    protected getRenderClasses(): {
+        'md3-button--icon-leading': boolean;
+        'md3-button--icon-trailing': boolean;
+    };
+    protected renderElevation(): TemplateResult | typeof nothing;
+    protected renderOutline(): TemplateResult | typeof nothing;
+    private renderTouchTarget;
+    private readonly handleActivationClick;
+    private readonly getRipple;
+    private readonly renderRipple;
+    private renderFocusRing;
+    private renderLabel;
+    private renderLeadingIcon;
+    private renderTrailingIcon;
+    private renderIcon;
+    private handleClick;
+    private handleSlotChange;
 }