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

package/internal/aria/aria.d.ts

@@ -3,6 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import { ReactiveElement } from 'lit';
 /**
  * Accessibility Object Model reflective aria property name types.
  */
@@ -18,7 +19,7 @@ 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")[];
+export declare const ARIA_ATTRIBUTES: ("aria-hidden" | "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-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.
  *
@@ -100,4 +101,54 @@ export interface ARIAMixinStrict extends ARIAMixin {
  * Valid values for `role`.
  */
 export type ARIARole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'gridcell' | 'link' | 'log' | 'marquee' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tabpanel' | 'textbox' | 'timer' | 'tooltip' | 'treeitem' | 'combobox' | 'grid' | 'listbox' | 'menu' | 'menubar' | 'radiogroup' | 'tablist' | 'tree' | 'treegrid' | 'application' | 'article' | 'cell' | 'columnheader' | 'definition' | 'directory' | 'document' | 'feed' | 'figure' | 'group' | 'heading' | 'img' | 'list' | 'listitem' | 'math' | 'none' | 'note' | 'presentation' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'separator' | 'table' | 'term' | 'text' | 'toolbar' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'main' | 'navigation' | 'region' | 'search' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-backlink' | 'doc-biblioentry' | 'doc-bibliography' | 'doc-biblioref' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-cover' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnote' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-footnote' | 'doc-foreword' | 'doc-glossary' | 'doc-glossref' | 'doc-index' | 'doc-introduction' | 'doc-noteref' | 'doc-notice' | 'doc-pagebreak' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-subtitle' | 'doc-tip' | 'doc-toc';
+/**
+ * Enables a host custom element to be the target for aria roles and attributes.
+ * Components should set the `elementInternals.role` property.
+ *
+ * By default, aria components are tab focusable. Provide a `focusable: false`
+ * option for components that should not be tab focusable, such as
+ * `role="listbox"`.
+ *
+ * This function will also polyfill aria `ElementInternals` properties for
+ * Firefox.
+ *
+ * @param ctor The `ReactiveElement` constructor to set up.
+ * @param options Options to configure the element's host aria.
+ */
+export declare function setupHostAria(ctor: typeof ReactiveElement, { focusable }?: SetupHostAriaOptions): void;
+/**
+ * Options for setting up a host element as an aria target.
+ */
+export interface SetupHostAriaOptions {
+    /**
+     * Whether or not the element can be focused with the tab key. Defaults to
+     * true.
+     *
+     * Set this to false for aria roles that should not be tab focusable, such as
+     * `role="listbox"`.
+     */
+    focusable?: boolean;
+}
+/**
+ * Polyfills an element and its `ElementInternals` to support `ARIAMixin`
+ * properties on internals. This is needed for Firefox.
+ *
+ * `setupHostAria()` must be called for the element class.
+ *
+ * @example
+ * class XButton extends LitElement {
+ *   static {
+ *     setupHostAria(XButton);
+ *   }
+ *
+ *   private internals =
+ *       polyfillElementInternalsAria(this, this.attachInternals());
+ *
+ *   constructor() {
+ *     super();
+ *     this.internals.role = 'button';
+ *   }
+ * }
+ */
+export declare function polyfillElementInternalsAria(host: ReactiveElement, internals: ElementInternals): ElementInternals;
 export {};

package/internal/aria/aria.js

@@ -3,6 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import { isServer } from 'lit';
 /**
  * Accessibility Object Model reflective aria properties.
  */
@@ -77,4 +78,149 @@ export function ariaPropertyToAttribute(property) {
         .replace(/Elements?/g, '')
         .toLowerCase();
 }
+/**
+ * Enables a host custom element to be the target for aria roles and attributes.
+ * Components should set the `elementInternals.role` property.
+ *
+ * By default, aria components are tab focusable. Provide a `focusable: false`
+ * option for components that should not be tab focusable, such as
+ * `role="listbox"`.
+ *
+ * This function will also polyfill aria `ElementInternals` properties for
+ * Firefox.
+ *
+ * @param ctor The `ReactiveElement` constructor to set up.
+ * @param options Options to configure the element's host aria.
+ */
+export function setupHostAria(ctor, { focusable } = {}) {
+    if (focusable !== false) {
+        ctor.addInitializer(host => {
+            host.addController({
+                hostConnected() {
+                    if (host.hasAttribute('tabindex')) {
+                        return;
+                    }
+                    host.tabIndex = 0;
+                }
+            });
+        });
+    }
+    if (isServer || 'role' in Element.prototype) {
+        return;
+    }
+    // Polyfill reflective aria properties for Firefox
+    for (const ariaProperty of ARIA_PROPERTIES) {
+        ctor.createProperty(ariaProperty, {
+            attribute: ariaPropertyToAttribute(ariaProperty),
+            reflect: true,
+        });
+    }
+    ctor.createProperty('role', { reflect: true });
+}
+/**
+ * Polyfills an element and its `ElementInternals` to support `ARIAMixin`
+ * properties on internals. This is needed for Firefox.
+ *
+ * `setupHostAria()` must be called for the element class.
+ *
+ * @example
+ * class XButton extends LitElement {
+ *   static {
+ *     setupHostAria(XButton);
+ *   }
+ *
+ *   private internals =
+ *       polyfillElementInternalsAria(this, this.attachInternals());
+ *
+ *   constructor() {
+ *     super();
+ *     this.internals.role = 'button';
+ *   }
+ * }
+ */
+export function polyfillElementInternalsAria(host, internals) {
+    if (checkIfElementInternalsSupportsAria(internals)) {
+        return internals;
+    }
+    if (!('role' in host)) {
+        throw new Error('Missing setupHostAria()');
+    }
+    let firstConnectedCallbacks = [];
+    let hasBeenConnected = false;
+    // Add support for Firefox, which has not yet implement ElementInternals aria
+    for (const ariaProperty of ARIA_PROPERTIES) {
+        let ariaValueBeforeConnected = null;
+        Object.defineProperty(internals, ariaProperty, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                if (!hasBeenConnected) {
+                    return ariaValueBeforeConnected;
+                }
+                // Dynamic lookup rather than hardcoding all properties.
+                // tslint:disable-next-line:no-dict-access-on-struct-type
+                return host[ariaProperty];
+            },
+            set(value) {
+                const setValue = () => {
+                    // Dynamic lookup rather than hardcoding all properties.
+                    // tslint:disable-next-line:no-dict-access-on-struct-type
+                    host[ariaProperty] = value;
+                };
+                if (!hasBeenConnected) {
+                    ariaValueBeforeConnected = value;
+                    firstConnectedCallbacks.push(setValue);
+                    return;
+                }
+                setValue();
+            },
+        });
+    }
+    let roleValueBeforeConnected = null;
+    Object.defineProperty(internals, 'role', {
+        enumerable: true,
+        configurable: true,
+        get() {
+            if (!hasBeenConnected) {
+                return roleValueBeforeConnected;
+            }
+            return host.getAttribute('role');
+        },
+        set(value) {
+            const setRole = () => {
+                if (value === null) {
+                    host.removeAttribute('role');
+                }
+                else {
+                    host.setAttribute('role', value);
+                }
+            };
+            if (!hasBeenConnected) {
+                roleValueBeforeConnected = value;
+                firstConnectedCallbacks.push(setRole);
+                return;
+            }
+            setRole();
+        },
+    });
+    host.addController({
+        hostConnected() {
+            if (hasBeenConnected) {
+                return;
+            }
+            hasBeenConnected = true;
+            for (const callback of firstConnectedCallbacks) {
+                callback();
+            }
+            // Remove strong callback references
+            firstConnectedCallbacks = [];
+        }
+    });
+    return internals;
+}
+// Separate function so that typescript doesn't complain about internals being
+// "never".
+function checkIfElementInternalsSupportsAria(internals) {
+    return 'role' in internals;
+}
 //# sourceMappingURL=aria.js.map

package/internal/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;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\n/**\n * An extension of `ARIAMixin` that enforces strict value types for aria\n * properties.\n *\n * This is needed for correct typing in render functions with lit analyzer.\n *\n * @example\n * render() {\n *   const {ariaLabel} = this as ARIAMixinStrict;\n *   return html`\n *     <button aria-label=${ariaLabel || nothing}>\n *       <slot></slot>\n *     </button>\n *   `;\n * }\n */\nexport interface ARIAMixinStrict extends ARIAMixin {\n  ariaAtomic: 'true'|'false'|null;\n  ariaAutoComplete: 'none'|'inline'|'list'|'both'|null;\n  ariaBusy: 'true'|'false'|null;\n  ariaChecked: 'true'|'false'|null;\n  ariaColCount: `${number}`|null;\n  ariaColIndex: `${number}`|null;\n  ariaColSpan: `${number}`|null;\n  ariaCurrent: 'page'|'step'|'location'|'date'|'time'|'true'|'false'|null;\n  ariaDisabled: 'true'|'false'|null;\n  ariaExpanded: 'true'|'false'|null;\n  ariaHasPopup: 'false'|'true'|'menu'|'listbox'|'tree'|'grid'|'dialog'|null;\n  ariaHidden: 'true'|'false'|null;\n  ariaInvalid: 'true'|'false'|null;\n  ariaKeyShortcuts: string|null;\n  ariaLabel: string|null;\n  ariaLevel: `${number}`|null;\n  ariaLive: 'assertive'|'off'|'polite'|null;\n  ariaModal: 'true'|'false'|null;\n  ariaMultiLine: 'true'|'false'|null;\n  ariaMultiSelectable: 'true'|'false'|null;\n  ariaOrientation: 'horizontal'|'vertical'|'undefined'|null;\n  ariaPlaceholder: string|null;\n  ariaPosInSet: `${number}`|null;\n  ariaPressed: 'true'|'false'|null;\n  ariaReadOnly: 'true'|'false'|null;\n  ariaRequired: 'true'|'false'|null;\n  ariaRoleDescription: string|null;\n  ariaRowCount: `${number}`|null;\n  ariaRowIndex: `${number}`|null;\n  ariaRowSpan: `${number}`|null;\n  ariaSelected: 'true'|'false'|null;\n  ariaSetSize: `${number}`|null;\n  ariaSort: 'ascending'|'descending'|'none'|'other'|null;\n  ariaValueMax: `${number}`|null;\n  ariaValueMin: `${number}`|null;\n  ariaValueNow: `${number}`|null;\n  ariaValueText: string|null;\n  role: ARIARole|null;\n}\n\n/**\n * Valid values for `role`.\n */\nexport type ARIARole =\n    'alert'|'alertdialog'|'button'|'checkbox'|'dialog'|'gridcell'|'link'|'log'|\n    'marquee'|'menuitem'|'menuitemcheckbox'|'menuitemradio'|'option'|\n    'progressbar'|'radio'|'scrollbar'|'searchbox'|'slider'|'spinbutton'|\n    'status'|'switch'|'tab'|'tabpanel'|'textbox'|'timer'|'tooltip'|'treeitem'|\n    'combobox'|'grid'|'listbox'|'menu'|'menubar'|'radiogroup'|'tablist'|'tree'|\n    'treegrid'|'application'|'article'|'cell'|'columnheader'|'definition'|\n    'directory'|'document'|'feed'|'figure'|'group'|'heading'|'img'|'list'|\n    'listitem'|'math'|'none'|'note'|'presentation'|'region'|'row'|'rowgroup'|\n    'rowheader'|'separator'|'table'|'term'|'text'|'toolbar'|'banner'|\n    'complementary'|'contentinfo'|'form'|'main'|'navigation'|'region'|'search'|\n    'doc-abstract'|'doc-acknowledgments'|'doc-afterword'|'doc-appendix'|\n    'doc-backlink'|'doc-biblioentry'|'doc-bibliography'|'doc-biblioref'|\n    'doc-chapter'|'doc-colophon'|'doc-conclusion'|'doc-cover'|'doc-credit'|\n    'doc-credits'|'doc-dedication'|'doc-endnote'|'doc-endnotes'|'doc-epigraph'|\n    'doc-epilogue'|'doc-errata'|'doc-example'|'doc-footnote'|'doc-foreword'|\n    'doc-glossary'|'doc-glossref'|'doc-index'|'doc-introduction'|'doc-noteref'|\n    'doc-notice'|'doc-pagebreak'|'doc-pagelist'|'doc-part'|'doc-preface'|\n    'doc-prologue'|'doc-pullquote'|'doc-qna'|'doc-subtitle'|'doc-tip'|'doc-toc';\n"]}
+{"version":3,"file":"aria.js","sourceRoot":"","sources":["aria.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, ReactiveElement} from 'lit';\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\n/**\n * An extension of `ARIAMixin` that enforces strict value types for aria\n * properties.\n *\n * This is needed for correct typing in render functions with lit analyzer.\n *\n * @example\n * render() {\n *   const {ariaLabel} = this as ARIAMixinStrict;\n *   return html`\n *     <button aria-label=${ariaLabel || nothing}>\n *       <slot></slot>\n *     </button>\n *   `;\n * }\n */\nexport interface ARIAMixinStrict extends ARIAMixin {\n  ariaAtomic: 'true'|'false'|null;\n  ariaAutoComplete: 'none'|'inline'|'list'|'both'|null;\n  ariaBusy: 'true'|'false'|null;\n  ariaChecked: 'true'|'false'|null;\n  ariaColCount: `${number}`|null;\n  ariaColIndex: `${number}`|null;\n  ariaColSpan: `${number}`|null;\n  ariaCurrent: 'page'|'step'|'location'|'date'|'time'|'true'|'false'|null;\n  ariaDisabled: 'true'|'false'|null;\n  ariaExpanded: 'true'|'false'|null;\n  ariaHasPopup: 'false'|'true'|'menu'|'listbox'|'tree'|'grid'|'dialog'|null;\n  ariaHidden: 'true'|'false'|null;\n  ariaInvalid: 'true'|'false'|null;\n  ariaKeyShortcuts: string|null;\n  ariaLabel: string|null;\n  ariaLevel: `${number}`|null;\n  ariaLive: 'assertive'|'off'|'polite'|null;\n  ariaModal: 'true'|'false'|null;\n  ariaMultiLine: 'true'|'false'|null;\n  ariaMultiSelectable: 'true'|'false'|null;\n  ariaOrientation: 'horizontal'|'vertical'|'undefined'|null;\n  ariaPlaceholder: string|null;\n  ariaPosInSet: `${number}`|null;\n  ariaPressed: 'true'|'false'|null;\n  ariaReadOnly: 'true'|'false'|null;\n  ariaRequired: 'true'|'false'|null;\n  ariaRoleDescription: string|null;\n  ariaRowCount: `${number}`|null;\n  ariaRowIndex: `${number}`|null;\n  ariaRowSpan: `${number}`|null;\n  ariaSelected: 'true'|'false'|null;\n  ariaSetSize: `${number}`|null;\n  ariaSort: 'ascending'|'descending'|'none'|'other'|null;\n  ariaValueMax: `${number}`|null;\n  ariaValueMin: `${number}`|null;\n  ariaValueNow: `${number}`|null;\n  ariaValueText: string|null;\n  role: ARIARole|null;\n}\n\n/**\n * Valid values for `role`.\n */\nexport type ARIARole =\n    'alert'|'alertdialog'|'button'|'checkbox'|'dialog'|'gridcell'|'link'|'log'|\n    'marquee'|'menuitem'|'menuitemcheckbox'|'menuitemradio'|'option'|\n    'progressbar'|'radio'|'scrollbar'|'searchbox'|'slider'|'spinbutton'|\n    'status'|'switch'|'tab'|'tabpanel'|'textbox'|'timer'|'tooltip'|'treeitem'|\n    'combobox'|'grid'|'listbox'|'menu'|'menubar'|'radiogroup'|'tablist'|'tree'|\n    'treegrid'|'application'|'article'|'cell'|'columnheader'|'definition'|\n    'directory'|'document'|'feed'|'figure'|'group'|'heading'|'img'|'list'|\n    'listitem'|'math'|'none'|'note'|'presentation'|'region'|'row'|'rowgroup'|\n    'rowheader'|'separator'|'table'|'term'|'text'|'toolbar'|'banner'|\n    'complementary'|'contentinfo'|'form'|'main'|'navigation'|'region'|'search'|\n    'doc-abstract'|'doc-acknowledgments'|'doc-afterword'|'doc-appendix'|\n    'doc-backlink'|'doc-biblioentry'|'doc-bibliography'|'doc-biblioref'|\n    'doc-chapter'|'doc-colophon'|'doc-conclusion'|'doc-cover'|'doc-credit'|\n    'doc-credits'|'doc-dedication'|'doc-endnote'|'doc-endnotes'|'doc-epigraph'|\n    'doc-epilogue'|'doc-errata'|'doc-example'|'doc-footnote'|'doc-foreword'|\n    'doc-glossary'|'doc-glossref'|'doc-index'|'doc-introduction'|'doc-noteref'|\n    'doc-notice'|'doc-pagebreak'|'doc-pagelist'|'doc-part'|'doc-preface'|\n    'doc-prologue'|'doc-pullquote'|'doc-qna'|'doc-subtitle'|'doc-tip'|'doc-toc';\n\n/**\n * Enables a host custom element to be the target for aria roles and attributes.\n * Components should set the `elementInternals.role` property.\n *\n * By default, aria components are tab focusable. Provide a `focusable: false`\n * option for components that should not be tab focusable, such as\n * `role=\"listbox\"`.\n *\n * This function will also polyfill aria `ElementInternals` properties for\n * Firefox.\n *\n * @param ctor The `ReactiveElement` constructor to set up.\n * @param options Options to configure the element's host aria.\n */\nexport function setupHostAria(\n    ctor: typeof ReactiveElement, {focusable}: SetupHostAriaOptions = {}) {\n  if (focusable !== false) {\n    ctor.addInitializer(host => {\n      host.addController({\n        hostConnected() {\n          if (host.hasAttribute('tabindex')) {\n            return;\n          }\n\n          host.tabIndex = 0;\n        }\n      });\n    });\n  }\n\n  if (isServer || 'role' in Element.prototype) {\n    return;\n  }\n\n  // Polyfill reflective aria properties for Firefox\n  for (const ariaProperty of ARIA_PROPERTIES) {\n    ctor.createProperty(ariaProperty, {\n      attribute: ariaPropertyToAttribute(ariaProperty),\n      reflect: true,\n    });\n  }\n\n  ctor.createProperty('role', {reflect: true});\n}\n\n/**\n * Options for setting up a host element as an aria target.\n */\nexport interface SetupHostAriaOptions {\n  /**\n   * Whether or not the element can be focused with the tab key. Defaults to\n   * true.\n   *\n   * Set this to false for aria roles that should not be tab focusable, such as\n   * `role=\"listbox\"`.\n   */\n  focusable?: boolean;\n}\n\n/**\n * Polyfills an element and its `ElementInternals` to support `ARIAMixin`\n * properties on internals. This is needed for Firefox.\n *\n * `setupHostAria()` must be called for the element class.\n *\n * @example\n * class XButton extends LitElement {\n *   static {\n *     setupHostAria(XButton);\n *   }\n *\n *   private internals =\n *       polyfillElementInternalsAria(this, this.attachInternals());\n *\n *   constructor() {\n *     super();\n *     this.internals.role = 'button';\n *   }\n * }\n */\nexport function polyfillElementInternalsAria(\n    host: ReactiveElement, internals: ElementInternals) {\n  if (checkIfElementInternalsSupportsAria(internals)) {\n    return internals;\n  }\n\n  if (!('role' in host)) {\n    throw new Error('Missing setupHostAria()');\n  }\n\n  let firstConnectedCallbacks: Array<() => void> = [];\n  let hasBeenConnected = false;\n\n  // Add support for Firefox, which has not yet implement ElementInternals aria\n  for (const ariaProperty of ARIA_PROPERTIES) {\n    let ariaValueBeforeConnected: string|null = null;\n    Object.defineProperty(internals, ariaProperty, {\n      enumerable: true,\n      configurable: true,\n      get() {\n        if (!hasBeenConnected) {\n          return ariaValueBeforeConnected;\n        }\n\n        // Dynamic lookup rather than hardcoding all properties.\n        // tslint:disable-next-line:no-dict-access-on-struct-type\n        return host[ariaProperty];\n      },\n      set(value: string|null) {\n        const setValue = () => {\n          // Dynamic lookup rather than hardcoding all properties.\n          // tslint:disable-next-line:no-dict-access-on-struct-type\n          host[ariaProperty] = value;\n        };\n\n        if (!hasBeenConnected) {\n          ariaValueBeforeConnected = value;\n          firstConnectedCallbacks.push(setValue);\n          return;\n        }\n\n        setValue();\n      },\n    });\n  }\n\n  let roleValueBeforeConnected: string|null = null;\n  Object.defineProperty(internals, 'role', {\n    enumerable: true,\n    configurable: true,\n    get() {\n      if (!hasBeenConnected) {\n        return roleValueBeforeConnected;\n      }\n\n      return host.getAttribute('role');\n    },\n    set(value: string|null) {\n      const setRole = () => {\n        if (value === null) {\n          host.removeAttribute('role');\n        } else {\n          host.setAttribute('role', value);\n        }\n      };\n\n      if (!hasBeenConnected) {\n        roleValueBeforeConnected = value;\n        firstConnectedCallbacks.push(setRole);\n        return;\n      }\n\n      setRole();\n    },\n  });\n\n  host.addController({\n    hostConnected() {\n      if (hasBeenConnected) {\n        return;\n      }\n\n      hasBeenConnected = true;\n      for (const callback of firstConnectedCallbacks) {\n        callback();\n      }\n\n      // Remove strong callback references\n      firstConnectedCallbacks = [];\n    }\n  });\n\n  return internals;\n}\n\n\n// Separate function so that typescript doesn't complain about internals being\n// \"never\".\nfunction checkIfElementInternalsSupportsAria(internals: ElementInternals) {\n  return 'role' in internals;\n}\n"]}

package/internal/controller/attachable-controller.d.ts

@@ -33,15 +33,15 @@ export interface Attachable {
      */
     htmlFor: string | null;
     /**
-     * The element that controls the visibility of the attachable element. It is
-     * one of:
+     * Gets or sets the element that controls the visibility of the attachable
+     * element. It is one of:
      *
      * - The control referenced by the `for` attribute.
      * - The control provided to `element.attach(control)`
      * - The element's parent.
      * - `null` if the element is not controlled.
      */
-    readonly control: HTMLElement | null;
+    control: HTMLElement | null;
     /**
      * Attaches the element to an interactive control.
      *
@@ -91,7 +91,8 @@ export declare class AttachableController implements ReactiveController, Attacha
     private readonly onControlChange;
     get htmlFor(): string | null;
     set htmlFor(htmlFor: string | null);
-    get control(): HTMLElement;
+    get control(): HTMLElement | null;
+    set control(control: HTMLElement | null);
     private currentControl;
     /**
      * Creates a new controller for an `Attachable` element.

package/internal/controller/attachable-controller.js

@@ -68,6 +68,14 @@ export class AttachableController {
         }
         return this.currentControl || this.host.parentElement;
     }
+    set control(control) {
+        if (control) {
+            this.attach(control);
+        }
+        else {
+            this.detach();
+        }
+    }
     /**
      * Creates a new controller for an `Attachable` element.
      *

package/internal/controller/attachable-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"attachable-controller.js","sourceRoot":"","sources":["attachable-controller.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveController, ReactiveControllerHost, isServer} from 'lit';\n\n/**\n * An element that can be attached to an associated controlling element.\n */\nexport interface Attachable {\n  /**\n   * Reflects the value of the `for` attribute, which is the ID of the element's\n   * associated control.\n   *\n   * Use this when the elements's associated control is not its parent.\n   *\n   * To manually control an element, set its `for` attribute to `\"\"`.\n   *\n   * @example\n   * ```html\n   * <div class=\"container\">\n   *   <md-attachable for=\"interactive\"></md-attachable>\n   *   <button id=\"interactive\">Action</button>\n   * </div>\n   * ```\n   *\n   * @example\n   * ```html\n   * <button class=\"manually-controlled\">\n   *   <md-attachable for=\"\"></md-attachable>\n   * </button>\n   * ```\n   */\n  htmlFor: string|null;\n\n  /**\n   * The element that controls the visibility of the attachable element. It is\n   * one of:\n   *\n   * - The control referenced by the `for` attribute.\n   * - The control provided to `element.attach(control)`\n   * - The element's parent.\n   * - `null` if the element is not controlled.\n   */\n  readonly control: HTMLElement|null;\n\n  /**\n   * Attaches the element to an interactive control.\n   *\n   * @param control The element that controls the attachable element.\n   */\n  attach(control: HTMLElement): void;\n\n  /**\n   * Detaches the element from its current control.\n   */\n  detach(): void;\n}\n\n/**\n * A key to retrieve an `Attachable` element's `AttachableController` from a\n * global `MutationObserver`.\n */\nconst ATTACHABLE_CONTROLLER = Symbol('attachableController');\n\n/**\n * The host of an `AttachableController`. The controller will add itself to\n * the host so it can be retrieved in a global `MutationObserver`.\n */\ninterface AttachableControllerHost extends ReactiveControllerHost, HTMLElement {\n  [ATTACHABLE_CONTROLLER]?: AttachableController;\n}\n\nlet FOR_ATTRIBUTE_OBSERVER: MutationObserver|undefined;\n\nif (!isServer) {\n  /**\n   * A global `MutationObserver` that reacts to `for` attribute changes on\n   * `Attachable` elements. If the `for` attribute changes, the controller will\n   * re-attach to the new referenced element.\n   */\n  FOR_ATTRIBUTE_OBSERVER = new MutationObserver(records => {\n    for (const record of records) {\n      // When a control's `for` attribute changes, inform its\n      // `AttachableController` to update to a new control.\n      (record.target as AttachableControllerHost)[ATTACHABLE_CONTROLLER]\n          ?.hostConnected();\n    }\n  });\n}\n\n/**\n * A controller that provides an implementation for `Attachable` elements.\n *\n * @example\n * ```ts\n * class MyElement extends LitElement implements Attachable {\n *   get control() { return this.attachableController.control; }\n *\n *   private readonly attachableController = new AttachableController(\n *     this,\n *     (previousControl, newControl) => {\n *       previousControl?.removeEventListener('click', this.handleClick);\n *       newControl?.addEventListener('click', this.handleClick);\n *     }\n *   );\n *\n *   // Implement remaining `Attachable` properties/methods that call the\n *   // controller's properties/methods.\n * }\n * ```\n */\nexport class AttachableController implements ReactiveController, Attachable {\n  get htmlFor() {\n    return this.host.getAttribute('for');\n  }\n\n  set htmlFor(htmlFor: string|null) {\n    if (htmlFor === null) {\n      this.host.removeAttribute('for');\n    } else {\n      this.host.setAttribute('for', htmlFor);\n    }\n  }\n\n  get control() {\n    if (this.host.hasAttribute('for')) {\n      if (!this.htmlFor || !this.host.isConnected) {\n        return null;\n      }\n\n      return (this.host.getRootNode() as Document | ShadowRoot)\n          .querySelector<HTMLElement>(`#${this.htmlFor}`);\n    }\n\n    return this.currentControl || this.host.parentElement;\n  }\n\n  private currentControl: HTMLElement|null = null;\n\n  /**\n   * Creates a new controller for an `Attachable` element.\n   *\n   * @param host The `Attachable` element.\n   * @param onControlChange A callback with two parameters for the previous and\n   *     next control. An `Attachable` element may perform setup or teardown\n   *     logic whenever the control changes.\n   */\n  constructor(\n      private readonly host: AttachableControllerHost,\n      private readonly onControlChange:\n          (prev: HTMLElement|null, next: HTMLElement|null) => void) {\n    host.addController(this);\n    host[ATTACHABLE_CONTROLLER] = this;\n    FOR_ATTRIBUTE_OBSERVER?.observe(host, {attributeFilter: ['for']});\n  }\n\n  attach(control: HTMLElement) {\n    if (control === this.currentControl) {\n      return;\n    }\n\n    this.setCurrentControl(control);\n    // When imperatively attaching, remove the `for` attribute so\n    // that the attached control is used instead of a referenced one.\n    this.host.removeAttribute('for');\n  }\n\n  detach() {\n    this.setCurrentControl(null);\n    // When imperatively detaching, add an empty `for=\"\"` attribute. This will\n    // ensure the control is `null` rather than the `parentElement`.\n    this.host.setAttribute('for', '');\n  }\n\n  /** @private */\n  hostConnected() {\n    this.setCurrentControl(this.control);\n  }\n\n  /** @private */\n  hostDisconnected() {\n    this.setCurrentControl(null);\n  }\n\n  private setCurrentControl(control: HTMLElement|null) {\n    this.onControlChange(this.currentControl, control);\n    this.currentControl = control;\n  }\n}\n"]}
+{"version":3,"file":"attachable-controller.js","sourceRoot":"","sources":["attachable-controller.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, ReactiveController, ReactiveControllerHost} from 'lit';\n\n/**\n * An element that can be attached to an associated controlling element.\n */\nexport interface Attachable {\n  /**\n   * Reflects the value of the `for` attribute, which is the ID of the element's\n   * associated control.\n   *\n   * Use this when the elements's associated control is not its parent.\n   *\n   * To manually control an element, set its `for` attribute to `\"\"`.\n   *\n   * @example\n   * ```html\n   * <div class=\"container\">\n   *   <md-attachable for=\"interactive\"></md-attachable>\n   *   <button id=\"interactive\">Action</button>\n   * </div>\n   * ```\n   *\n   * @example\n   * ```html\n   * <button class=\"manually-controlled\">\n   *   <md-attachable for=\"\"></md-attachable>\n   * </button>\n   * ```\n   */\n  htmlFor: string|null;\n\n  /**\n   * Gets or sets the element that controls the visibility of the attachable\n   * element. It is one of:\n   *\n   * - The control referenced by the `for` attribute.\n   * - The control provided to `element.attach(control)`\n   * - The element's parent.\n   * - `null` if the element is not controlled.\n   */\n  control: HTMLElement|null;\n\n  /**\n   * Attaches the element to an interactive control.\n   *\n   * @param control The element that controls the attachable element.\n   */\n  attach(control: HTMLElement): void;\n\n  /**\n   * Detaches the element from its current control.\n   */\n  detach(): void;\n}\n\n/**\n * A key to retrieve an `Attachable` element's `AttachableController` from a\n * global `MutationObserver`.\n */\nconst ATTACHABLE_CONTROLLER = Symbol('attachableController');\n\n/**\n * The host of an `AttachableController`. The controller will add itself to\n * the host so it can be retrieved in a global `MutationObserver`.\n */\ninterface AttachableControllerHost extends ReactiveControllerHost, HTMLElement {\n  [ATTACHABLE_CONTROLLER]?: AttachableController;\n}\n\nlet FOR_ATTRIBUTE_OBSERVER: MutationObserver|undefined;\n\nif (!isServer) {\n  /**\n   * A global `MutationObserver` that reacts to `for` attribute changes on\n   * `Attachable` elements. If the `for` attribute changes, the controller will\n   * re-attach to the new referenced element.\n   */\n  FOR_ATTRIBUTE_OBSERVER = new MutationObserver(records => {\n    for (const record of records) {\n      // When a control's `for` attribute changes, inform its\n      // `AttachableController` to update to a new control.\n      (record.target as AttachableControllerHost)[ATTACHABLE_CONTROLLER]\n          ?.hostConnected();\n    }\n  });\n}\n\n/**\n * A controller that provides an implementation for `Attachable` elements.\n *\n * @example\n * ```ts\n * class MyElement extends LitElement implements Attachable {\n *   get control() { return this.attachableController.control; }\n *\n *   private readonly attachableController = new AttachableController(\n *     this,\n *     (previousControl, newControl) => {\n *       previousControl?.removeEventListener('click', this.handleClick);\n *       newControl?.addEventListener('click', this.handleClick);\n *     }\n *   );\n *\n *   // Implement remaining `Attachable` properties/methods that call the\n *   // controller's properties/methods.\n * }\n * ```\n */\nexport class AttachableController implements ReactiveController, Attachable {\n  get htmlFor() {\n    return this.host.getAttribute('for');\n  }\n\n  set htmlFor(htmlFor: string|null) {\n    if (htmlFor === null) {\n      this.host.removeAttribute('for');\n    } else {\n      this.host.setAttribute('for', htmlFor);\n    }\n  }\n\n  get control() {\n    if (this.host.hasAttribute('for')) {\n      if (!this.htmlFor || !this.host.isConnected) {\n        return null;\n      }\n\n      return (this.host.getRootNode() as Document | ShadowRoot)\n          .querySelector<HTMLElement>(`#${this.htmlFor}`);\n    }\n\n    return this.currentControl || this.host.parentElement;\n  }\n  set control(control: HTMLElement|null) {\n    if (control) {\n      this.attach(control);\n    } else {\n      this.detach();\n    }\n  }\n\n  private currentControl: HTMLElement|null = null;\n\n  /**\n   * Creates a new controller for an `Attachable` element.\n   *\n   * @param host The `Attachable` element.\n   * @param onControlChange A callback with two parameters for the previous and\n   *     next control. An `Attachable` element may perform setup or teardown\n   *     logic whenever the control changes.\n   */\n  constructor(\n      private readonly host: AttachableControllerHost,\n      private readonly onControlChange:\n          (prev: HTMLElement|null, next: HTMLElement|null) => void) {\n    host.addController(this);\n    host[ATTACHABLE_CONTROLLER] = this;\n    FOR_ATTRIBUTE_OBSERVER?.observe(host, {attributeFilter: ['for']});\n  }\n\n  attach(control: HTMLElement) {\n    if (control === this.currentControl) {\n      return;\n    }\n\n    this.setCurrentControl(control);\n    // When imperatively attaching, remove the `for` attribute so\n    // that the attached control is used instead of a referenced one.\n    this.host.removeAttribute('for');\n  }\n\n  detach() {\n    this.setCurrentControl(null);\n    // When imperatively detaching, add an empty `for=\"\"` attribute. This will\n    // ensure the control is `null` rather than the `parentElement`.\n    this.host.setAttribute('for', '');\n  }\n\n  /** @private */\n  hostConnected() {\n    this.setCurrentControl(this.control);\n  }\n\n  /** @private */\n  hostDisconnected() {\n    this.setCurrentControl(null);\n  }\n\n  private setCurrentControl(control: HTMLElement|null) {\n    this.onControlChange(this.currentControl, control);\n    this.currentControl = control;\n  }\n}\n"]}

package/internal/controller/form-submitter.d.ts

@@ -30,6 +30,18 @@ export interface FormSubmitter extends ReactiveElement, WithInternals {
      * - button: The element does nothing.
      */
     type: FormSubmitterType;
+    /**
+     * The HTML name to use in form submission. When combined with a `value`, the
+     * submitting button's name/value will be added to the form.
+     *
+     * Names must reflect to a `name` attribute for form integration.
+     */
+    name: string;
+    /**
+     * The value of the button. When combined with a `name`, the submitting
+     * button's name/value will be added to the form.
+     */
+    value: string;
 }
 type FormSubmitterConstructor = (new () => FormSubmitter) | (abstract new () => FormSubmitter);
 /**

package/internal/controller/form-submitter.js

@@ -36,7 +36,8 @@ export function setupFormSubmitter(ctor) {
     ctor.addInitializer(instance => {
         const submitter = instance;
         submitter.addEventListener('click', async (event) => {
-            const { type, [internals]: { form } } = submitter;
+            const { type, [internals]: elementInternals } = submitter;
+            const { form } = elementInternals;
             if (!form || type === 'button') {
                 return;
             }
@@ -62,6 +63,7 @@ export function setupFormSubmitter(ctor) {
                     get: () => submitter,
                 });
             }, { capture: true, once: true });
+            elementInternals.setFormValue(submitter.value);
             form.requestSubmit();
         });
     });

package/internal/controller/form-submitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-submitter.js","sourceRoot":"","sources":["form-submitter.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,QAAQ,EAAkB,MAAM,KAAK,CAAC;AAE9C,OAAO,EAAC,SAAS,EAAgB,MAAM,wBAAwB,CAAC;AAiChE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAA8B;IAC/D,IAAI,QAAQ,EAAE;QACZ,OAAO;KACR;IAEA,IAA0C,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QACpE,MAAM,SAAS,GAAG,QAAyB,CAAC;QAC5C,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;YAChD,MAAM,EAAC,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,EAAC,IAAI,EAAC,EAAC,GAAG,SAAS,CAAC;YAC9C,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,QAAQ,EAAE;gBAC9B,OAAO;aACR;YAED,mDAAmD;YACnD,MAAM,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;gBAChC,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC,CAAC;YAEH,IAAI,KAAK,CAAC,gBAAgB,EAAE;gBAC1B,OAAO;aACR;YAED,IAAI,IAAI,KAAK,OAAO,EAAE;gBACpB,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,OAAO;aACR;YAED,0EAA0E;YAC1E,wEAAwE;YACxE,eAAe;YACf,uDAAuD;YACvD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE;gBAC5C,MAAM,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE;oBAC9C,YAAY,EAAE,IAAI;oBAClB,UAAU,EAAE,IAAI;oBAChB,GAAG,EAAE,GAAG,EAAE,CAAC,SAAS;iBACrB,CAAC,CAAC;YACL,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;YAEhC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, ReactiveElement} from 'lit';\n\nimport {internals, WithInternals} from './element-internals.js';\n\n/**\n * A string indicating the form submission behavior of the element.\n *\n * - submit: The element submits the form. This is the default value if the\n * attribute is not specified, or if it is dynamically changed to an empty or\n * invalid value.\n * - reset: The element resets the form.\n * - button: The element does nothing.\n */\nexport type FormSubmitterType = 'button'|'submit'|'reset';\n\n/**\n * An element that can submit or reset a `<form>`, similar to\n * `<button type=\"submit\">`.\n */\nexport interface FormSubmitter extends ReactiveElement, WithInternals {\n  /**\n   * A string indicating the form submission behavior of the element.\n   *\n   * - submit: The element submits the form. This is the default value if the\n   * attribute is not specified, or if it is dynamically changed to an empty or\n   * invalid value.\n   * - reset: The element resets the form.\n   * - button: The element does nothing.\n   */\n  type: FormSubmitterType;\n}\n\ntype FormSubmitterConstructor =\n    (new () => FormSubmitter)|(abstract new () => FormSubmitter);\n\n/**\n * Sets up an element's constructor to enable form submission. The element\n * instance should be form associated and have a `type` property.\n *\n * A click listener is added to each element instance. If the click is not\n * default prevented, it will submit the element's form, if any.\n *\n * @example\n * ```ts\n * class MyElement extends LitElement {\n *   static {\n *     setupFormSubmitter(MyElement);\n *   }\n *\n *   static formAssociated = true;\n *\n *   type: FormSubmitterType = 'submit';\n *\n *   [internals] = this.attachInternals();\n * }\n * ```\n *\n * @param ctor The form submitter element's constructor.\n */\nexport function setupFormSubmitter(ctor: FormSubmitterConstructor) {\n  if (isServer) {\n    return;\n  }\n\n  (ctor as unknown as typeof ReactiveElement).addInitializer(instance => {\n    const submitter = instance as FormSubmitter;\n    submitter.addEventListener('click', async event => {\n      const {type, [internals]: {form}} = submitter;\n      if (!form || type === 'button') {\n        return;\n      }\n\n      // Wait a microtask for event bubbling to complete.\n      await new Promise<void>(resolve => {\n        resolve();\n      });\n\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      if (type === 'reset') {\n        form.reset();\n        return;\n      }\n\n      // form.requestSubmit(submitter) does not work with form associated custom\n      // elements. This patches the dispatched submit event to add the correct\n      // `submitter`.\n      // See https://github.com/WICG/webcomponents/issues/814\n      form.addEventListener('submit', submitEvent => {\n        Object.defineProperty(submitEvent, 'submitter', {\n          configurable: true,\n          enumerable: true,\n          get: () => submitter,\n        });\n      }, {capture: true, once: true});\n\n      form.requestSubmit();\n    });\n  });\n}\n"]}
+{"version":3,"file":"form-submitter.js","sourceRoot":"","sources":["form-submitter.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,QAAQ,EAAkB,MAAM,KAAK,CAAC;AAE9C,OAAO,EAAC,SAAS,EAAgB,MAAM,wBAAwB,CAAC;AA+ChE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAA8B;IAC/D,IAAI,QAAQ,EAAE;QACZ,OAAO;KACR;IAEA,IAA0C,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QACpE,MAAM,SAAS,GAAG,QAAyB,CAAC;QAC5C,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;YAChD,MAAM,EAAC,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,gBAAgB,EAAC,GAAG,SAAS,CAAC;YACxD,MAAM,EAAC,IAAI,EAAC,GAAG,gBAAgB,CAAC;YAChC,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,QAAQ,EAAE;gBAC9B,OAAO;aACR;YAED,mDAAmD;YACnD,MAAM,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;gBAChC,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC,CAAC;YAEH,IAAI,KAAK,CAAC,gBAAgB,EAAE;gBAC1B,OAAO;aACR;YAED,IAAI,IAAI,KAAK,OAAO,EAAE;gBACpB,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,OAAO;aACR;YAED,0EAA0E;YAC1E,wEAAwE;YACxE,eAAe;YACf,uDAAuD;YACvD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE;gBAC5C,MAAM,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE;oBAC9C,YAAY,EAAE,IAAI;oBAClB,UAAU,EAAE,IAAI;oBAChB,GAAG,EAAE,GAAG,EAAE,CAAC,SAAS;iBACrB,CAAC,CAAC;YACL,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;YAEhC,gBAAgB,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YAC/C,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, ReactiveElement} from 'lit';\n\nimport {internals, WithInternals} from './element-internals.js';\n\n/**\n * A string indicating the form submission behavior of the element.\n *\n * - submit: The element submits the form. This is the default value if the\n * attribute is not specified, or if it is dynamically changed to an empty or\n * invalid value.\n * - reset: The element resets the form.\n * - button: The element does nothing.\n */\nexport type FormSubmitterType = 'button'|'submit'|'reset';\n\n/**\n * An element that can submit or reset a `<form>`, similar to\n * `<button type=\"submit\">`.\n */\nexport interface FormSubmitter extends ReactiveElement, WithInternals {\n  /**\n   * A string indicating the form submission behavior of the element.\n   *\n   * - submit: The element submits the form. This is the default value if the\n   * attribute is not specified, or if it is dynamically changed to an empty or\n   * invalid value.\n   * - reset: The element resets the form.\n   * - button: The element does nothing.\n   */\n  type: FormSubmitterType;\n\n  /**\n   * The HTML name to use in form submission. When combined with a `value`, the\n   * submitting button's name/value will be added to the form.\n   *\n   * Names must reflect to a `name` attribute for form integration.\n   */\n  name: string;\n\n  /**\n   * The value of the button. When combined with a `name`, the submitting\n   * button's name/value will be added to the form.\n   */\n  value: string;\n}\n\ntype FormSubmitterConstructor =\n    (new () => FormSubmitter)|(abstract new () => FormSubmitter);\n\n/**\n * Sets up an element's constructor to enable form submission. The element\n * instance should be form associated and have a `type` property.\n *\n * A click listener is added to each element instance. If the click is not\n * default prevented, it will submit the element's form, if any.\n *\n * @example\n * ```ts\n * class MyElement extends LitElement {\n *   static {\n *     setupFormSubmitter(MyElement);\n *   }\n *\n *   static formAssociated = true;\n *\n *   type: FormSubmitterType = 'submit';\n *\n *   [internals] = this.attachInternals();\n * }\n * ```\n *\n * @param ctor The form submitter element's constructor.\n */\nexport function setupFormSubmitter(ctor: FormSubmitterConstructor) {\n  if (isServer) {\n    return;\n  }\n\n  (ctor as unknown as typeof ReactiveElement).addInitializer(instance => {\n    const submitter = instance as FormSubmitter;\n    submitter.addEventListener('click', async event => {\n      const {type, [internals]: elementInternals} = submitter;\n      const {form} = elementInternals;\n      if (!form || type === 'button') {\n        return;\n      }\n\n      // Wait a microtask for event bubbling to complete.\n      await new Promise<void>(resolve => {\n        resolve();\n      });\n\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      if (type === 'reset') {\n        form.reset();\n        return;\n      }\n\n      // form.requestSubmit(submitter) does not work with form associated custom\n      // elements. This patches the dispatched submit event to add the correct\n      // `submitter`.\n      // See https://github.com/WICG/webcomponents/issues/814\n      form.addEventListener('submit', submitEvent => {\n        Object.defineProperty(submitEvent, 'submitter', {\n          configurable: true,\n          enumerable: true,\n          get: () => submitter,\n        });\n      }, {capture: true, once: true});\n\n      elementInternals.setFormValue(submitter.value);\n      form.requestSubmit();\n    });\n  });\n}\n"]}

package/labs/badge/internal/_badge.scss

@@ -7,26 +7,29 @@
 // Selector '.md3-*' should only be used in this project.
 
 // go/keep-sorted start
-@use '../../../internal/sass/theme';
 @use '../../../tokens';
 // go/keep-sorted end
 
-$_custom-property-prefix: 'badge';
-
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-badge-values(), $tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+  // $supported-tokens: tokens.$md-comp-badge-supported-tokens;
+
+  @each $token, $value in $tokens {
+    // @if list.index($supported-tokens, $token) == null {
+    //   @error 'Token `#{$token}` is not a supported token.';
+    // }
 
-  @include theme.emit-theme-vars($tokens);
+    @if $value {
+      --md-badge-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-badge-values();
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-badge-#{$token}, #{$value});
     }
   }
 
@@ -59,11 +62,15 @@ $_custom-property-prefix: 'badge';
 
       .md3-badge__value {
         padding: 0px 4px;
+        text-align: center;
       }
     }
   }
 
   .md3-badge__value {
-    font: var(--_large-label-text-type);
+    font-family: var(--_large-label-text-font);
+    font-size: var(--_large-label-text-size);
+    line-height: var(--_large-label-text-line-height);
+    font-weight: var(--_large-label-text-weight);
   }
 }

package/labs/badge/internal/badge-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-type: var(--md-badge-large-label-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px}.md3-badge__value{font:var(--_large-label-text-type)}/*# sourceMappingURL=badge-styles.css.map */
+export const styles = css `:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-font: var(--md-badge-large-label-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));--_large-label-text-line-height: var(--md-badge-large-label-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));--_large-label-text-size: var(--md-badge-large-label-text-size, var(--md-sys-typescale-label-small-size, 0.688rem));--_large-label-text-weight: var(--md-badge-large-label-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px;text-align:center}.md3-badge__value{font-family:var(--_large-label-text-font);font-size:var(--_large-label-text-size);line-height:var(--_large-label-text-line-height);font-weight:var(--_large-label-text-weight)}/*# sourceMappingURL=badge-styles.css.map */
 `;
 //# sourceMappingURL=badge-styles.css.js.map

package/labs/badge/internal/badge-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge-styles.css.js","sourceRoot":"","sources":["badge-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-type: var(--md-badge-large-label-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px}.md3-badge__value{font:var(--_large-label-text-type)}/*# sourceMappingURL=badge-styles.css.map */\n`;\n "]}
+{"version":3,"file":"badge-styles.css.js","sourceRoot":"","sources":["badge-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-font: var(--md-badge-large-label-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));--_large-label-text-line-height: var(--md-badge-large-label-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));--_large-label-text-size: var(--md-badge-large-label-text-size, var(--md-sys-typescale-label-small-size, 0.688rem));--_large-label-text-weight: var(--md-badge-large-label-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px;text-align:center}.md3-badge__value{font-family:var(--_large-label-text-font);font-size:var(--_large-label-text-size);line-height:var(--_large-label-text-line-height);font-weight:var(--_large-label-text-weight)}/*# sourceMappingURL=badge-styles.css.map */\n`;\n "]}

package/labs/navigationbar/internal/_navigation-bar.scss

@@ -11,29 +11,31 @@
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../../elevation/elevation';
-@use '../../../internal/sass/theme';
 @use '../../../tokens';
 // go/keep-sorted end
 
 $_md-sys-motion: tokens.md-sys-motion-values();
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-navigation-bar-values(),
-    $tokens
-  );
-  $tokens: theme.create-theme-vars($tokens, 'navigation-bar');
+  // $supported-tokens: tokens.$md-comp-navigation-bar-supported-tokens;
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    // @if list.index($supported-tokens, $token) == null {
+    //   @error 'Token `#{$token}` is not a supported token.';
+    // }
+
+    @if $value {
+      --md-navigation-bar-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
   $tokens: tokens.md-comp-navigation-bar-values();
-  $tokens: theme.create-theme-vars($tokens, 'navigation-bar');
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-navigation-bar-#{$token}, #{$value});
     }
 
     @include elevation.theme(

package/labs/navigationbar/internal/navigation-bar-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, 700);--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-ref-typeface-plain, Roboto));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, 1rem);--_label-text-size: var(--md-navigation-bar-label-text-size, 0.75rem);--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, 500 0.75rem / 1rem var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */
+export const styles = css `:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-ref-typeface-weight-bold, 700));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */
 `;
 //# sourceMappingURL=navigation-bar-styles.css.js.map

package/labs/navigationbar/internal/navigation-bar-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-bar-styles.css.js","sourceRoot":"","sources":["navigation-bar-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, 700);--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-ref-typeface-plain, Roboto));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, 1rem);--_label-text-size: var(--md-navigation-bar-label-text-size, 0.75rem);--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, 500 0.75rem / 1rem var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */\n`;\n "]}
+{"version":3,"file":"navigation-bar-styles.css.js","sourceRoot":"","sources":["navigation-bar-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-ref-typeface-weight-bold, 700));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */\n`;\n "]}