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

package/README.md

@@ -34,23 +34,23 @@ changes.
 Component                     | Alpha | Beta | Stable
 ----------------------------- | :---: | :--: | :----:
 Button                        | ✅     | ✅    | ❌
-FAB                           | ✅     | ❌    | ❌
+FAB                           | ✅     | ✅    | ❌
 Icon button                   | ✅     | ✅    | ❌
 Checkbox                      | ✅     | ✅    | ❌
 Chips                         | 🟡     | ❌    | ❌
 Dialog                        | ✅     | ✅    | ❌
 Divider                       | ✅     | ✅    | 🟡
-Elevation                     | ✅     | ❌    | ❌
-Focus ring                    | ✅     | ❌    | ❌
+Elevation                     | ✅     | ✅    | 🟡
+Focus ring                    | ✅     | ✅    | 🟡
 Field                         | ✅     | ✅    | 🟡
 Icon                          | ✅     | ✅    | ❌
-List                          | ✅     | 🟡    | 🟡
-Menu                          | ✅     | 🟡    | 🟡
-Progress indicator (circular) | ✅     | 🟡    | ❌
-Progress indicator (linear)   | 🟡     | ❌    | ❌
+List                          | ✅     | ✅    | ❌
+Menu                          | ✅     | ✅    | ❌
+Progress indicator (circular) | ✅     | ✅    | 🟡
+Progress indicator (linear)   | ✅     | ✅    | 🟡
 Radio button                  | ✅     | ✅    | ❌
 Ripple                        | ✅     | ✅    | 🟡
-Select                        | 🟡     | ❌    | ❌
+Select                        | ✅     | ✅    | ❌
 Slider                        | ✅     | ✅    | ❌
 Switch                        | ✅     | ✅    | ❌
 Tabs                          | 🟡     | ❌    | ❌

package/aria/aria.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Accessibility Object Model reflective aria property name types.
+ */
+export type ARIAProperty = Exclude<keyof ARIAMixin, 'role'>;
+/**
+ * Accessibility Object Model reflective aria properties.
+ */
+export declare const ARIA_PROPERTIES: ARIAProperty[];
+/**
+ * Accessibility Object Model aria attribute name types.
+ */
+export type ARIAAttribute = ARIAPropertyToAttribute<ARIAProperty>;
+/**
+ * Accessibility Object Model aria attributes.
+ */
+export declare const ARIA_ATTRIBUTES: ("aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-current" | "aria-disabled" | "aria-expanded" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext")[];
+/**
+ * Checks if an attribute is one of the AOM aria attributes.
+ *
+ * @example
+ * isAriaAttribute('aria-label'); // true
+ *
+ * @param attribute The attribute to check.
+ * @return True if the attribute is an aria attribute, or false if not.
+ */
+export declare function isAriaAttribute(attribute: string): attribute is ARIAAttribute;
+/**
+ * Converts an AOM aria property into its corresponding attribute.
+ *
+ * @example
+ * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'
+ *
+ * @param property The aria property.
+ * @return The aria attribute.
+ */
+export declare function ariaPropertyToAttribute<K extends ARIAProperty | 'role'>(property: K): ARIAPropertyToAttribute<K>;
+type ARIAPropertyToAttribute<K extends string> = K extends `aria${infer Suffix}Element${infer OptS}` ? `aria-${Lowercase<Suffix>}` : K extends `aria${infer Suffix}` ? `aria-${Lowercase<Suffix>}` : K;
+export {};

package/aria/aria.js

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Accessibility Object Model reflective aria properties.
+ */
+export const ARIA_PROPERTIES = [
+    '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.
+ */
+export const ARIA_ATTRIBUTES = ARIA_PROPERTIES.map(ariaPropertyToAttribute);
+/**
+ * Checks if an attribute is one of the AOM aria attributes.
+ *
+ * @example
+ * isAriaAttribute('aria-label'); // true
+ *
+ * @param attribute The attribute to check.
+ * @return True if the attribute is an aria attribute, or false if not.
+ */
+export function isAriaAttribute(attribute) {
+    return attribute.startsWith('aria-');
+}
+/**
+ * Converts an AOM aria property into its corresponding attribute.
+ *
+ * @example
+ * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'
+ *
+ * @param property The aria property.
+ * @return The aria attribute.
+ */
+export function ariaPropertyToAttribute(property) {
+    return property
+        .replace('aria', 'aria-')
+        // IDREF attributes also include an "Element" or "Elements" suffix
+        .replace(/Elements?/g, '')
+        .toLowerCase();
+}
+//# sourceMappingURL=aria.js.map

package/aria/aria.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ReactiveElement } from 'lit';
+/**
+ * Sets up a `ReactiveElement` constructor to enable updates when delegating
+ * aria attributes. Elements may bind `this.aria*` properties to `aria-*`
+ * attributes in their render functions.
+ *
+ * This function will:
+ * - Call `requestUpdate()` when an aria attribute changes.
+ * - Add `role="presentation"` to the host.
+ *
+ * NOTE: The following features are not currently supported:
+ * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)
+ * - Delegating the `role` attribute
+ *
+ * @example
+ * class XButton extends LitElement {
+ *   static {
+ *     requestUpdateOnAriaChange(this);
+ *   }
+ *
+ *   protected override render() {
+ *     return html`
+ *       <button aria-label=${this.ariaLabel || nothing}>
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ *
+ * @param ctor The `ReactiveElement` constructor to patch.
+ */
+export declare function requestUpdateOnAriaChange(ctor: typeof ReactiveElement): void;

package/aria/delegate.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ARIA_PROPERTIES, ariaPropertyToAttribute } from './aria.js';
+/**
+ * Sets up a `ReactiveElement` constructor to enable updates when delegating
+ * aria attributes. Elements may bind `this.aria*` properties to `aria-*`
+ * attributes in their render functions.
+ *
+ * This function will:
+ * - Call `requestUpdate()` when an aria attribute changes.
+ * - Add `role="presentation"` to the host.
+ *
+ * NOTE: The following features are not currently supported:
+ * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)
+ * - Delegating the `role` attribute
+ *
+ * @example
+ * class XButton extends LitElement {
+ *   static {
+ *     requestUpdateOnAriaChange(this);
+ *   }
+ *
+ *   protected override render() {
+ *     return html`
+ *       <button aria-label=${this.ariaLabel || nothing}>
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ *
+ * @param ctor The `ReactiveElement` constructor to patch.
+ */
+export function requestUpdateOnAriaChange(ctor) {
+    for (const ariaProperty of ARIA_PROPERTIES) {
+        ctor.createProperty(ariaProperty, {
+            attribute: ariaPropertyToAttribute(ariaProperty),
+            reflect: true,
+        });
+    }
+    ctor.addInitializer(element => {
+        const controller = {
+            hostConnected() {
+                element.setAttribute('role', 'presentation');
+            }
+        };
+        element.addController(controller);
+    });
+}
+//# sourceMappingURL=delegate.js.map

package/aria/delegate.js.map

@@ -0,0 +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 *   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/badge.d.ts

@@ -10,7 +10,6 @@ declare global {
     }
 }
 /**
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */

package/badge/badge.js

@@ -8,7 +8,6 @@ import { customElement } from 'lit/decorators.js';
 import { Badge } from './lib/badge.js';
 import { styles } from './lib/badge-styles.css.js';
 /**
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */

package/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAQjD;;;;GAIG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,KAAK;;AAChB,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAEnB;SAFY,OAAO","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Badge} from './lib/badge.js';\nimport {styles} from './lib/badge-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-badge': MdBadge;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-badge')\nexport class MdBadge extends Badge {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAQjD;;;GAGG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,KAAK;;AAChB,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAEnB;SAFY,OAAO","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Badge} from './lib/badge.js';\nimport {styles} from './lib/badge-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-badge': MdBadge;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-badge')\nexport class MdBadge extends Badge {\n  static override styles = [styles];\n}\n"]}

package/badge/lib/badge.d.ts

@@ -3,13 +3,11 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { LitElement, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
-/** @soyCompatible */
+import { LitElement } from 'lit';
+/**
+ * TODO(b/265340196): add docs
+ */
 export declare class Badge extends LitElement {
     value: string;
-    /** @soyTemplate */
-    protected render(): TemplateResult;
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
+    protected render(): import("lit-html").TemplateResult<1>;
 }

package/badge/lib/badge.js

@@ -3,29 +3,26 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
+import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-/** @soyCompatible */
+/**
+ * TODO(b/265340196): add docs
+ */
 export class Badge extends LitElement {
     constructor() {
         super(...arguments);
         this.value = '';
     }
-    /** @soyTemplate */
     render() {
-        return html `<div class="md3-badge ${classMap(this.getRenderClasses())}"><p class="md3-badge__value">${this.value}</p></div>`;
-    }
-    /** @soyTemplate */
-    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([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], Badge.prototype, "value", void 0);
 //# sourceMappingURL=badge.js.map

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,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE,qBAAqB;AACrB,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QAC4B,UAAK,GAAG,EAAE,CAAC;IAevC,CAAC;IAbC,mBAAmB;IACA,MAAM;QACvB,OAAO,IAAI,CAAA,yBACP,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,iCACjC,IAAI,CAAC,KAAK,YAAY,CAAC;IAC7B,CAAC;IAED,mBAAmB;IACT,gBAAgB;QACxB,OAAO;YACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;SAC/B,CAAC;IACJ,CAAC;CACF;AAfC;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;oCAAY","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\n/** @soyCompatible */\nexport class Badge extends LitElement {\n  @property({type: String}) value = '';\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    return html`<div class=\"md3-badge ${\n        classMap(this.getRenderClasses())}\"><p class=\"md3-badge__value\">${\n        this.value}</p></div>`;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\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/_elevation.scss

@@ -6,18 +6,28 @@
 // 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
 // go/keep-sorted start
 @use '../../elevation/elevation';
+@use '../../tokens';
 // go/keep-sorted end
 
+$_md-sys-motion: tokens.md-sys-motion-values();
+
 @mixin styles() {
+  md-elevation {
+    // TODO: replace duration with animation tokens
+    transition-duration: 280ms;
+    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
+  }
+
   .md3-button {
     @include elevation.theme(
       (
-        // TODO: replace duration with animation tokens
-        'duration': 280ms,
         'level': var(--_container-elevation),
-        'shadow-color': var(--_container-shadow-color)
+        'shadow-color': var(--_container-shadow-color),
       )
     );
 

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)
+    );
   }
 }