@material/web 1.0.1 → 1.0.2-nightly.6a1fb38.0

package/field/internal/shared-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start,.with-end .end{min-width:48px}.with-start .start{margin-inline-end:4px}.with-end .end{margin-inline-start:4px}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;white-space:pre-wrap}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}/*# sourceMappingURL=shared-styles.css.map */
+export const styles = css `:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}@layer styles{.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start,.with-end .end{min-width:48px}.with-start .start{margin-inline-end:4px}.with-end .end{margin-inline-start:4px}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;white-space:pre-wrap}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}}@layer hcm{@media(forced-colors: active){.disabled :is(.start,.content,.end){color:GrayText;opacity:1}}}@layer styles{.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .label:not(.hidden){color:GrayText;opacity:1}}}@layer styles{.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .supporting-text{color:GrayText;opacity:1}}}/*# sourceMappingURL=shared-styles.css.map */
 `;
 //# sourceMappingURL=shared-styles.css.js.map

package/field/internal/shared-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-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{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start,.with-end .end{min-width:48px}.with-start .start{margin-inline-end:4px}.with-end .end{margin-inline-start:4px}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;white-space:pre-wrap}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
+{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-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{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}@layer styles{.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start,.with-end .end{min-width:48px}.with-start .start{margin-inline-end:4px}.with-end .end{margin-inline-start:4px}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;white-space:pre-wrap}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}}@layer hcm{@media(forced-colors: active){.disabled :is(.start,.content,.end){color:GrayText;opacity:1}}}@layer styles{.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .label:not(.hidden){color:GrayText;opacity:1}}}@layer styles{.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .supporting-text{color:GrayText;opacity:1}}}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/focus/internal/focus-ring.d.ts

@@ -7,6 +7,8 @@ import { LitElement, PropertyValues } from 'lit';
 import { Attachable } from '../../internal/controller/attachable-controller.js';
 /**
  * A focus ring component.
+ *
+ * @fires visibility-changed {Event} Fired whenever `visible` changes.
  */
 export declare class FocusRing extends LitElement implements Attachable {
     /**

package/focus/internal/focus-ring.js

@@ -6,15 +6,15 @@
 import { __decorate } from "tslib";
 import { isServer, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { AttachableController } from '../../internal/controller/attachable-controller.js';
+import { AttachableController, } from '../../internal/controller/attachable-controller.js';
 /**
  * Events that the focus ring listens to.
- *
- * @fires visibility-changed Fired whenever `visible` changes.
  */
 const EVENTS = ['focusin', 'focusout', 'pointerdown'];
 /**
  * A focus ring component.
+ *
+ * @fires visibility-changed {Event} Fired whenever `visible` changes.
  */
 export class FocusRing extends LitElement {
     constructor() {

package/focus/internal/focus-ring.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAa,oBAAoB,EAAC,MAAM,oDAAoD,CAAC;AAEpG;;;;GAIG;AACH,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;AAEtD;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACE;;WAEG;QACuC,YAAO,GAAG,KAAK,CAAC;QAE1D;;WAEG;QACuC,WAAM,GAAG,KAAK,CAAC;QAiBxC,yBAAoB,GACjC,IAAI,oBAAoB,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAyDtE,CAAC;IAzEC,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC;IAC3C,CAAC;IAED,IAAI,OAAO,CAAC,OAAoB;QAC9B,IAAI,CAAC,oBAAoB,CAAC,OAAO,GAAG,OAAO,CAAC;IAC9C,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC;IAC3C,CAAC;IACD,IAAI,OAAO,CAAC,OAAyB;QACnC,IAAI,CAAC,oBAAoB,CAAC,OAAO,GAAG,OAAO,CAAC;IAC9C,CAAC;IAKD,MAAM,CAAC,OAAoB;QACzB,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,CAAC;IACrC,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,wEAAwE;QACxE,4BAA4B;QAC5B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IAED,eAAe;IACf,WAAW,CAAC,KAAqB;QAC/B,IAAI,KAAK,CAAC,qBAAqB,CAAC,EAAE;YAChC,0EAA0E;YAC1E,sCAAsC;YACtC,OAAO;SACR;QAED,QAAQ,KAAK,CAAC,IAAI,EAAE;YAClB;gBACE,OAAO;YACT,KAAK,SAAS;gBACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,gBAAgB,CAAC,IAAI,KAAK,CAAC;gBAChE,MAAM;YACR,KAAK,UAAU,CAAC;YAChB,KAAK,aAAa;gBAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACrB,MAAM;SACT;QAED,KAAK,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC;IACtC,CAAC;IAEO,eAAe,CAAC,IAAsB,EAAE,IAAsB;QACpE,IAAI,QAAQ;YAAE,OAAO;QAErB,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;YAC1B,IAAI,EAAE,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YACvC,IAAI,EAAE,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;SACrC;IACH,CAAC;IAEQ,MAAM,CAAC,OAAkC;QAChD,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,yEAAyE;YACzE,iEAAiE;YACjE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC;SACrD;QACD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC;CACF;AAhF2C;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAiB;AAKhB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAgB;AA6E3D,MAAM,qBAAqB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, LitElement, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {Attachable, AttachableController} from '../../internal/controller/attachable-controller.js';\n\n/**\n * Events that the focus ring listens to.\n *\n * @fires visibility-changed Fired whenever `visible` changes.\n */\nconst EVENTS = ['focusin', 'focusout', 'pointerdown'];\n\n/**\n * A focus ring component.\n */\nexport class FocusRing extends LitElement implements Attachable {\n  /**\n   * Makes the focus ring visible.\n   */\n  @property({type: Boolean, reflect: true}) visible = false;\n\n  /**\n   * Makes the focus ring animate inwards instead of outwards.\n   */\n  @property({type: Boolean, reflect: true}) inward = false;\n\n  get htmlFor() {\n    return this.attachableController.htmlFor;\n  }\n\n  set htmlFor(htmlFor: string|null) {\n    this.attachableController.htmlFor = htmlFor;\n  }\n\n  get control() {\n    return this.attachableController.control;\n  }\n  set control(control: HTMLElement|null) {\n    this.attachableController.control = control;\n  }\n\n  private readonly attachableController =\n      new AttachableController(this, this.onControlChange.bind(this));\n\n  attach(control: HTMLElement) {\n    this.attachableController.attach(control);\n  }\n\n  detach() {\n    this.attachableController.detach();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Needed for VoiceOver, which will create a \"group\" if the element is a\n    // sibling to other content.\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  /** @private */\n  handleEvent(event: FocusRingEvent) {\n    if (event[HANDLED_BY_FOCUS_RING]) {\n      // This ensures the focus ring does not activate when multiple focus rings\n      // are used within a single component.\n      return;\n    }\n\n    switch (event.type) {\n      default:\n        return;\n      case 'focusin':\n        this.visible = this.control?.matches(':focus-visible') ?? false;\n        break;\n      case 'focusout':\n      case 'pointerdown':\n        this.visible = false;\n        break;\n    }\n\n    event[HANDLED_BY_FOCUS_RING] = true;\n  }\n\n  private onControlChange(prev: HTMLElement|null, next: HTMLElement|null) {\n    if (isServer) return;\n\n    for (const event of EVENTS) {\n      prev?.removeEventListener(event, this);\n      next?.addEventListener(event, this);\n    }\n  }\n\n  override update(changed: PropertyValues<FocusRing>) {\n    if (changed.has('visible')) {\n      // This logic can be removed once the `:has` selector has been introduced\n      // to Firefox. This is necessary to allow correct submenu styles.\n      this.dispatchEvent(new Event('visibility-changed'));\n    }\n    super.update(changed);\n  }\n}\n\nconst HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing');\n\ninterface FocusRingEvent extends Event {\n  [HANDLED_BY_FOCUS_RING]: true;\n}\n"]}
+{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, LitElement, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {\n  Attachable,\n  AttachableController,\n} from '../../internal/controller/attachable-controller.js';\n\n/**\n * Events that the focus ring listens to.\n */\nconst EVENTS = ['focusin', 'focusout', 'pointerdown'];\n\n/**\n * A focus ring component.\n *\n * @fires visibility-changed {Event} Fired whenever `visible` changes.\n */\nexport class FocusRing extends LitElement implements Attachable {\n  /**\n   * Makes the focus ring visible.\n   */\n  @property({type: Boolean, reflect: true}) visible = false;\n\n  /**\n   * Makes the focus ring animate inwards instead of outwards.\n   */\n  @property({type: Boolean, reflect: true}) inward = false;\n\n  get htmlFor() {\n    return this.attachableController.htmlFor;\n  }\n\n  set htmlFor(htmlFor: string | null) {\n    this.attachableController.htmlFor = htmlFor;\n  }\n\n  get control() {\n    return this.attachableController.control;\n  }\n  set control(control: HTMLElement | null) {\n    this.attachableController.control = control;\n  }\n\n  private readonly attachableController = new AttachableController(\n    this,\n    this.onControlChange.bind(this),\n  );\n\n  attach(control: HTMLElement) {\n    this.attachableController.attach(control);\n  }\n\n  detach() {\n    this.attachableController.detach();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Needed for VoiceOver, which will create a \"group\" if the element is a\n    // sibling to other content.\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  /** @private */\n  handleEvent(event: FocusRingEvent) {\n    if (event[HANDLED_BY_FOCUS_RING]) {\n      // This ensures the focus ring does not activate when multiple focus rings\n      // are used within a single component.\n      return;\n    }\n\n    switch (event.type) {\n      default:\n        return;\n      case 'focusin':\n        this.visible = this.control?.matches(':focus-visible') ?? false;\n        break;\n      case 'focusout':\n      case 'pointerdown':\n        this.visible = false;\n        break;\n    }\n\n    event[HANDLED_BY_FOCUS_RING] = true;\n  }\n\n  private onControlChange(prev: HTMLElement | null, next: HTMLElement | null) {\n    if (isServer) return;\n\n    for (const event of EVENTS) {\n      prev?.removeEventListener(event, this);\n      next?.addEventListener(event, this);\n    }\n  }\n\n  override update(changed: PropertyValues<FocusRing>) {\n    if (changed.has('visible')) {\n      // This logic can be removed once the `:has` selector has been introduced\n      // to Firefox. This is necessary to allow correct submenu styles.\n      this.dispatchEvent(new Event('visibility-changed'));\n    }\n    super.update(changed);\n  }\n}\n\nconst HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing');\n\ninterface FocusRingEvent extends Event {\n  [HANDLED_BY_FOCUS_RING]: true;\n}\n"]}

package/icon/internal/_icon.scss

@@ -27,15 +27,18 @@
 
 @mixin styles() {
   $tokens: tokens.md-comp-icon-values();
+  @each $token, $value in $tokens {
+    $tokens: map.set($tokens, $token, var(--md-icon-#{$token}, #{$value}));
+  }
 
   :host {
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
+    font-size: map.get($tokens, 'size');
+    width: map.get($tokens, 'size');
+    height: map.get($tokens, 'size');
     color: inherit;
     font-variation-settings: inherit;
     font-weight: 400;
-    font-family: var(--md-icon-font, #{map.get($tokens, font)});
+    font-family: map.get($tokens, 'font');
     display: inline-flex;
     font-style: normal;
     line-height: 1;

package/icon/internal/icon-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{font-size:24px;width:24px;height:24px;color:inherit;font-variation-settings:inherit;font-weight:400;font-family:var(--md-icon-font, Material Symbols Outlined);display:inline-flex;font-style:normal;line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;user-select:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}::slotted(svg){fill:currentColor}::slotted(*){height:100%;width:100%}/*# sourceMappingURL=icon-styles.css.map */
+export const styles = css `:host{font-size:var(--md-icon-size, 24px);width:var(--md-icon-size, 24px);height:var(--md-icon-size, 24px);color:inherit;font-variation-settings:inherit;font-weight:400;font-family:var(--md-icon-font, Material Symbols Outlined);display:inline-flex;font-style:normal;line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;user-select:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}::slotted(svg){fill:currentColor}::slotted(*){height:100%;width:100%}/*# sourceMappingURL=icon-styles.css.map */
 `;
 //# sourceMappingURL=icon-styles.css.js.map

package/icon/internal/icon-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-styles.css.js","sourceRoot":"","sources":["icon-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{font-size:24px;width:24px;height:24px;color:inherit;font-variation-settings:inherit;font-weight:400;font-family:var(--md-icon-font, Material Symbols Outlined);display:inline-flex;font-style:normal;line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;user-select:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}::slotted(svg){fill:currentColor}::slotted(*){height:100%;width:100%}/*# sourceMappingURL=icon-styles.css.map */\n`;\n "]}
+{"version":3,"file":"icon-styles.css.js","sourceRoot":"","sources":["icon-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{font-size:var(--md-icon-size, 24px);width:var(--md-icon-size, 24px);height:var(--md-icon-size, 24px);color:inherit;font-variation-settings:inherit;font-weight:400;font-family:var(--md-icon-font, Material Symbols Outlined);display:inline-flex;font-style:normal;line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;user-select:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}::slotted(svg){fill:currentColor}::slotted(*){height:100%;width:100%}/*# sourceMappingURL=icon-styles.css.map */\n`;\n "]}

package/iconbutton/internal/icon-button.d.ts

@@ -6,10 +6,17 @@
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { LitElement } from 'lit';
-import { internals } from '../../internal/controller/element-internals.js';
 import { FormSubmitter, FormSubmitterType } from '../../internal/controller/form-submitter.js';
 type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
-export declare class IconButton extends LitElement implements FormSubmitter {
+declare const iconButtonBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../labs/behaviors/element-internals.js").WithElementInternals>;
+/**
+ * A button for rendering icons.
+ *
+ * @fires input {InputEvent} Dispatched when a toggle button toggles --bubbles
+ * --composed
+ * @fires change {Event} Dispatched when a toggle button toggles --bubbles
+ */
+export declare class IconButton extends iconButtonBaseClass implements FormSubmitter {
     /** @nocollapse */
     static readonly formAssociated = true;
     /** @nocollapse */
@@ -58,8 +65,6 @@ export declare class IconButton extends LitElement implements FormSubmitter {
      */
     get labels(): NodeList;
     private flipIcon;
-    /** @private */
-    [internals]: ElementInternals;
     /**
      * Link buttons cannot be disabled.
      */

package/iconbutton/internal/icon-button.js

@@ -3,20 +3,27 @@
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-var _a;
 import { __decorate } from "tslib";
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { html as staticHtml, literal } from 'lit/static-html.js';
+import { literal, html as staticHtml } from 'lit/static-html.js';
 import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
-import { internals } from '../../internal/controller/element-internals.js';
-import { setupFormSubmitter } from '../../internal/controller/form-submitter.js';
+import { setupFormSubmitter, } from '../../internal/controller/form-submitter.js';
 import { isRtl } from '../../internal/controller/is-rtl.js';
-// tslint:disable-next-line:enforce-comments-on-exported-symbols
-export class IconButton extends LitElement {
+import { internals, mixinElementInternals, } from '../../labs/behaviors/element-internals.js';
+// Separate variable needed for closure.
+const iconButtonBaseClass = mixinElementInternals(LitElement);
+/**
+ * A button for rendering icons.
+ *
+ * @fires input {InputEvent} Dispatched when a toggle button toggles --bubbles
+ * --composed
+ * @fires change {Event} Dispatched when a toggle button toggles --bubbles
+ */
+export class IconButton extends iconButtonBaseClass {
     constructor() {
         super(...arguments);
         /**
@@ -53,8 +60,6 @@ export class IconButton extends LitElement {
         this.type = 'submit';
         this.value = '';
         this.flipIcon = isRtl(this, this.flipIconInRtl);
-        /** @private */
-        this[_a] = this /* needed for closure */.attachInternals();
     }
     get name() {
         return this.getAttribute('name') ?? '';
@@ -90,16 +95,17 @@ export class IconButton extends LitElement {
         const ariaPressedValue = !this.toggle ? nothing : this.selected;
         let ariaLabelValue = nothing;
         if (!this.href) {
-            ariaLabelValue = (hasToggledAriaLabel && this.selected) ?
-                this.ariaLabelSelected :
-                ariaLabel;
+            ariaLabelValue =
+                hasToggledAriaLabel && this.selected
+                    ? this.ariaLabelSelected
+                    : ariaLabel;
         }
         return staticHtml `<${tag}
         class="icon-button ${classMap(this.getRenderClasses())}"
         id="button"
         aria-label="${ariaLabelValue || nothing}"
-        aria-haspopup="${!this.href && ariaHasPopup || nothing}"
-        aria-expanded="${!this.href && ariaExpanded || nothing}"
+        aria-haspopup="${(!this.href && ariaHasPopup) || nothing}"
+        aria-expanded="${(!this.href && ariaExpanded) || nothing}"
         aria-pressed="${ariaPressedValue}"
         ?disabled="${!this.href && this.disabled}"
         @click="${this.handleClick}">
@@ -115,12 +121,12 @@ export class IconButton extends LitElement {
         // Needed for closure conformance
         const { ariaLabel } = this;
         return html `
-      <a class="link"
+      <a
+        class="link"
         id="link"
         href="${this.href}"
         target="${this.target || nothing}"
-        aria-label="${ariaLabel || nothing}"
-      ></a>
+        aria-label="${ariaLabel || nothing}"></a>
     `;
     }
     getRenderClasses() {
@@ -134,19 +140,24 @@ export class IconButton extends LitElement {
     }
     renderSelectedIcon() {
         // Use default slot as fallback to not require specifying multiple icons
-        return html `<span class="icon icon--selected"><slot name="selected"><slot></slot></slot></span>`;
+        return html `<span class="icon icon--selected"
+      ><slot name="selected"><slot></slot></slot
+    ></span>`;
     }
     renderTouchTarget() {
         return html `<span class="touch"></span>`;
     }
     renderFocusRing() {
-        return html `<md-focus-ring part="focus-ring" for=${this.href ? 'link' : 'button'}></md-focus-ring>`;
+        // TODO(b/310046938): use the same id for both elements
+        return html `<md-focus-ring
+      part="focus-ring"
+      for=${this.href ? 'link' : 'button'}></md-focus-ring>`;
     }
     renderRipple() {
+        // TODO(b/310046938): use the same id for both elements
         return html `<md-ripple
       for=${this.href ? 'link' : nothing}
-      ?disabled="${!this.href && this.disabled}"
-    ></md-ripple>`;
+      ?disabled="${!this.href && this.disabled}"></md-ripple>`;
     }
     connectedCallback() {
         this.flipIcon = isRtl(this, this.flipIconInRtl);
@@ -165,7 +176,6 @@ export class IconButton extends LitElement {
         this.dispatchEvent(new Event('change', { bubbles: true }));
     }
 }
-_a = internals;
 (() => {
     requestUpdateOnAriaChange(IconButton);
     setupFormSubmitter(IconButton);
@@ -173,7 +183,10 @@ _a = internals;
 /** @nocollapse */
 IconButton.formAssociated = true;
 /** @nocollapse */
-IconButton.shadowRootOptions = { mode: 'open', delegatesFocus: true };
+IconButton.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IconButton.prototype, "disabled", void 0);

package/iconbutton/internal/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {internals} from '../../internal/controller/element-internals.js';\nimport {FormSubmitter, FormSubmitterType, setupFormSubmitter} from '../../internal/controller/form-submitter.js';\nimport {isRtl} from '../../internal/controller/is-rtl.js';\n\ntype LinkTarget = '_blank'|'_parent'|'_self'|'_top';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class IconButton extends LitElement implements FormSubmitter {\n  static {\n    requestUpdateOnAriaChange(IconButton);\n    setupFormSubmitter(IconButton);\n  }\n\n  /** @nocollapse */\n  static readonly formAssociated = true;\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  /**\n   * Disables the icon button and makes it non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Flips the icon if it is in an RTL context at startup.\n   */\n  @property({type: Boolean, attribute: 'flip-icon-in-rtl'})\n  flipIconInRtl = false;\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n   */\n  @property() target: LinkTarget|'' = '';\n\n  /**\n   * The `aria-label` of the button when the button is toggleable and selected.\n   */\n  @property({attribute: 'aria-label-selected'}) ariaLabelSelected = '';\n\n  /**\n   * When true, the button will toggle between selected and unselected\n   * states\n   */\n  @property({type: Boolean}) toggle = false;\n\n  /**\n   * Sets the selected state. When false, displays the default icon. When true,\n   * displays the selected icon, or the default icon If no `slot=\"selected\"`\n   * icon is provided.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  @property() type: FormSubmitterType = 'submit';\n\n  @property() value = '';\n\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this[internals].form;\n  }\n\n  /**\n   * The labels this element is associated with.\n   */\n  get labels() {\n    return this[internals].labels;\n  }\n\n  @state() private flipIcon = isRtl(this, this.flipIconInRtl);\n\n  /** @private */\n  [internals] =\n      (this as HTMLElement /* needed for closure */).attachInternals();\n\n  /**\n   * Link buttons cannot be disabled.\n   */\n  protected override willUpdate() {\n    if (this.href) {\n      this.disabled = false;\n    }\n  }\n\n  protected override render() {\n    const tag = this.href ? literal`div` : literal`button`;\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected;\n    const ariaPressedValue = !this.toggle ? nothing : this.selected;\n    let ariaLabelValue: string|null|typeof nothing = nothing;\n    if (!this.href) {\n      ariaLabelValue = (hasToggledAriaLabel && this.selected) ?\n          this.ariaLabelSelected :\n          ariaLabel;\n    }\n    return staticHtml`<${tag}\n        class=\"icon-button ${classMap(this.getRenderClasses())}\"\n        id=\"button\"\n        aria-label=\"${ariaLabelValue || nothing}\"\n        aria-haspopup=\"${!this.href && ariaHasPopup || nothing}\"\n        aria-expanded=\"${!this.href && ariaExpanded || nothing}\"\n        aria-pressed=\"${ariaPressedValue}\"\n        ?disabled=\"${!this.href && this.disabled}\"\n        @click=\"${this.handleClick}\">\n        ${this.renderFocusRing()}\n        ${this.renderRipple()}\n        ${!this.selected ? this.renderIcon() : nothing}\n        ${this.selected ? this.renderSelectedIcon() : nothing}\n        ${this.renderTouchTarget()}\n        ${this.href && this.renderLink()}\n  </${tag}>`;\n  }\n\n  private renderLink() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <a class=\"link\"\n        id=\"link\"\n        href=\"${this.href}\"\n        target=\"${this.target || nothing}\"\n        aria-label=\"${ariaLabel || nothing}\"\n      ></a>\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'flip-icon': this.flipIcon,\n      'selected': this.toggle && this.selected,\n    };\n  }\n\n  private renderIcon() {\n    return html`<span class=\"icon\"><slot></slot></span>`;\n  }\n\n  private renderSelectedIcon() {\n    // Use default slot as fallback to not require specifying multiple icons\n    return html`<span class=\"icon icon--selected\"><slot name=\"selected\"><slot></slot></slot></span>`;\n  }\n\n  private renderTouchTarget() {\n    return html`<span class=\"touch\"></span>`;\n  }\n\n  private renderFocusRing() {\n    return html`<md-focus-ring part=\"focus-ring\" for=${\n        this.href ? 'link' : 'button'}></md-focus-ring>`;\n  }\n\n  private renderRipple() {\n    return html`<md-ripple\n      for=${this.href ? 'link' : nothing}\n      ?disabled=\"${!this.href && this.disabled}\"\n    ></md-ripple>`;\n  }\n\n  override connectedCallback() {\n    this.flipIcon = isRtl(this, this.flipIconInRtl);\n    super.connectedCallback();\n  }\n\n  private async handleClick(event: Event) {\n    // Allow the event to propagate\n    await 0;\n    if (!this.toggle || this.disabled || event.defaultPrevented) {\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.dispatchEvent(\n        new InputEvent('input', {bubbles: true, composed: true}));\n    // Bubbles but does not compose to mimic native browser <input> & <select>\n    // Additionally, native change event is not an InputEvent.\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {literal, html as staticHtml} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {\n  FormSubmitter,\n  FormSubmitterType,\n  setupFormSubmitter,\n} from '../../internal/controller/form-submitter.js';\nimport {isRtl} from '../../internal/controller/is-rtl.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../labs/behaviors/element-internals.js';\n\ntype LinkTarget = '_blank' | '_parent' | '_self' | '_top';\n\n// Separate variable needed for closure.\nconst iconButtonBaseClass = mixinElementInternals(LitElement);\n\n/**\n * A button for rendering icons.\n *\n * @fires input {InputEvent} Dispatched when a toggle button toggles --bubbles\n * --composed\n * @fires change {Event} Dispatched when a toggle button toggles --bubbles\n */\nexport class IconButton extends iconButtonBaseClass implements FormSubmitter {\n  static {\n    requestUpdateOnAriaChange(IconButton);\n    setupFormSubmitter(IconButton);\n  }\n\n  /** @nocollapse */\n  static readonly formAssociated = true;\n\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /**\n   * Disables the icon button and makes it non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Flips the icon if it is in an RTL context at startup.\n   */\n  @property({type: Boolean, attribute: 'flip-icon-in-rtl'})\n  flipIconInRtl = false;\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n   */\n  @property() target: LinkTarget | '' = '';\n\n  /**\n   * The `aria-label` of the button when the button is toggleable and selected.\n   */\n  @property({attribute: 'aria-label-selected'}) ariaLabelSelected = '';\n\n  /**\n   * When true, the button will toggle between selected and unselected\n   * states\n   */\n  @property({type: Boolean}) toggle = false;\n\n  /**\n   * Sets the selected state. When false, displays the default icon. When true,\n   * displays the selected icon, or the default icon If no `slot=\"selected\"`\n   * icon is provided.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  @property() type: FormSubmitterType = 'submit';\n\n  @property() value = '';\n\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this[internals].form;\n  }\n\n  /**\n   * The labels this element is associated with.\n   */\n  get labels() {\n    return this[internals].labels;\n  }\n\n  @state() private flipIcon = isRtl(this, this.flipIconInRtl);\n\n  /**\n   * Link buttons cannot be disabled.\n   */\n  protected override willUpdate() {\n    if (this.href) {\n      this.disabled = false;\n    }\n  }\n\n  protected override render() {\n    const tag = this.href ? literal`div` : literal`button`;\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected;\n    const ariaPressedValue = !this.toggle ? nothing : this.selected;\n    let ariaLabelValue: string | null | typeof nothing = nothing;\n    if (!this.href) {\n      ariaLabelValue =\n        hasToggledAriaLabel && this.selected\n          ? this.ariaLabelSelected\n          : ariaLabel;\n    }\n    return staticHtml`<${tag}\n        class=\"icon-button ${classMap(this.getRenderClasses())}\"\n        id=\"button\"\n        aria-label=\"${ariaLabelValue || nothing}\"\n        aria-haspopup=\"${(!this.href && ariaHasPopup) || nothing}\"\n        aria-expanded=\"${(!this.href && ariaExpanded) || nothing}\"\n        aria-pressed=\"${ariaPressedValue}\"\n        ?disabled=\"${!this.href && this.disabled}\"\n        @click=\"${this.handleClick}\">\n        ${this.renderFocusRing()}\n        ${this.renderRipple()}\n        ${!this.selected ? this.renderIcon() : nothing}\n        ${this.selected ? this.renderSelectedIcon() : nothing}\n        ${this.renderTouchTarget()}\n        ${this.href && this.renderLink()}\n  </${tag}>`;\n  }\n\n  private renderLink() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <a\n        class=\"link\"\n        id=\"link\"\n        href=\"${this.href}\"\n        target=\"${this.target || nothing}\"\n        aria-label=\"${ariaLabel || nothing}\"></a>\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'flip-icon': this.flipIcon,\n      'selected': this.toggle && this.selected,\n    };\n  }\n\n  private renderIcon() {\n    return html`<span class=\"icon\"><slot></slot></span>`;\n  }\n\n  private renderSelectedIcon() {\n    // Use default slot as fallback to not require specifying multiple icons\n    return html`<span class=\"icon icon--selected\"\n      ><slot name=\"selected\"><slot></slot></slot\n    ></span>`;\n  }\n\n  private renderTouchTarget() {\n    return html`<span class=\"touch\"></span>`;\n  }\n\n  private renderFocusRing() {\n    // TODO(b/310046938): use the same id for both elements\n    return html`<md-focus-ring\n      part=\"focus-ring\"\n      for=${this.href ? 'link' : 'button'}></md-focus-ring>`;\n  }\n\n  private renderRipple() {\n    // TODO(b/310046938): use the same id for both elements\n    return html`<md-ripple\n      for=${this.href ? 'link' : nothing}\n      ?disabled=\"${!this.href && this.disabled}\"></md-ripple>`;\n  }\n\n  override connectedCallback() {\n    this.flipIcon = isRtl(this, this.flipIconInRtl);\n    super.connectedCallback();\n  }\n\n  private async handleClick(event: Event) {\n    // Allow the event to propagate\n    await 0;\n    if (!this.toggle || this.disabled || event.defaultPrevented) {\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.dispatchEvent(\n      new InputEvent('input', {bubbles: true, composed: true}),\n    );\n    // Bubbles but does not compose to mimic native browser <input> & <select>\n    // Additionally, native change event is not an InputEvent.\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n}\n"]}

package/internal/aria/aria.d.ts

@@ -102,43 +102,21 @@ export interface ARIAMixinStrict extends ARIAMixin {
  */
 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.
+ * This function will polyfill `ARIAMixin` 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;
-}
+export declare function polyfillARIAMixin(ctor: typeof ReactiveElement): void;
 /**
  * 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.
+ * `polyfillARIAMixin()` must be called for the element class.
  *
  * @example
  * class XButton extends LitElement {
  *   static {
- *     setupHostAria(XButton);
+ *     polyfillARIAMixin(XButton);
  *   }
  *
  *   private internals =

package/internal/aria/aria.js

@@ -79,32 +79,11 @@ export function ariaPropertyToAttribute(property) {
         .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.
+ * This function will polyfill `ARIAMixin` 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;
-                }
-            });
-        });
-    }
+export function polyfillARIAMixin(ctor) {
     if (isServer || 'role' in Element.prototype) {
         return;
     }
@@ -121,12 +100,12 @@ export function setupHostAria(ctor, { focusable } = {}) {
  * 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.
+ * `polyfillARIAMixin()` must be called for the element class.
  *
  * @example
  * class XButton extends LitElement {
  *   static {
- *     setupHostAria(XButton);
+ *     polyfillARIAMixin(XButton);
  *   }
  *
  *   private internals =
@@ -143,7 +122,7 @@ export function polyfillElementInternalsAria(host, internals) {
         return internals;
     }
     if (!('role' in host)) {
-        throw new Error('Missing setupHostAria()');
+        throw new Error('Missing polyfillARIAMixin()');
     }
     let firstConnectedCallbacks = [];
     let hasBeenConnected = false;
@@ -160,7 +139,10 @@ export function polyfillElementInternalsAria(host, internals) {
                 const setValue = () => {
                     internalAriaValue = value;
                     if (!hasBeenConnected) {
-                        firstConnectedCallbacks.push({ property: ariaProperty, callback: setValue });
+                        firstConnectedCallbacks.push({
+                            property: ariaProperty,
+                            callback: setValue,
+                        });
                         return;
                     }
                     // Dynamic lookup rather than hardcoding all properties.
@@ -227,7 +209,7 @@ export function polyfillElementInternalsAria(host, internals) {
             }
             // Remove strong callback references
             firstConnectedCallbacks = [];
-        }
+        },
     });
     return internals;
 }

package/internal/aria/aria.js.map

@@ -1 +1 @@
-{"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:\n      Array<{property: ARIAProperty | 'role', callback: () => 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 internalAriaValue: string|null = null;\n    Object.defineProperty(internals, ariaProperty, {\n      enumerable: true,\n      configurable: true,\n      get() {\n        return internalAriaValue;\n      },\n      set(value: string|null) {\n        const setValue = () => {\n          internalAriaValue = value;\n          if (!hasBeenConnected) {\n            firstConnectedCallbacks.push(\n                {property: ariaProperty, callback: setValue});\n            return;\n          }\n\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        setValue();\n      },\n    });\n  }\n\n  let internalRoleValue: string|null = null;\n  Object.defineProperty(internals, 'role', {\n    enumerable: true,\n    configurable: true,\n    get() {\n      return internalRoleValue;\n    },\n    set(value: string|null) {\n      const setRole = () => {\n        internalRoleValue = value;\n\n        if (!hasBeenConnected) {\n          firstConnectedCallbacks.push({\n            property: 'role',\n            callback: setRole,\n          });\n          return;\n        }\n\n        if (value === null) {\n          host.removeAttribute('role');\n        } else {\n          host.setAttribute('role', value);\n        }\n      };\n\n      setRole();\n    },\n  });\n\n  host.addController({\n    hostConnected() {\n      if (hasBeenConnected) {\n        return;\n      }\n\n      hasBeenConnected = true;\n\n      const propertiesSetByUser = new Set<ARIAProperty|'role'>();\n\n      // See which properties were set by the user on host before we apply\n      // internals values as attributes to host. Needs to be done in another\n      // for loop because the callbacks set these attributes on host.\n      for (const {property} of firstConnectedCallbacks) {\n        const wasSetByUser =\n            host.getAttribute(ariaPropertyToAttribute(property)) !== null ||\n            // Dynamic lookup rather than hardcoding all properties.\n            // tslint:disable-next-line:no-dict-access-on-struct-type\n            host[property] !== undefined;\n\n        if (wasSetByUser) {\n          propertiesSetByUser.add(property);\n        }\n      }\n\n      for (const {property, callback} of firstConnectedCallbacks) {\n        // If the user has set the attribute or property, do not override the\n        // user's value\n        if (propertiesSetByUser.has(property)) {\n          continue;\n        }\n\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"]}
+{"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) {\n  return (\n    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\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}`\n    ? `aria-${Lowercase<Suffix>}`\n    : 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:\n    | 'page'\n    | 'step'\n    | 'location'\n    | 'date'\n    | 'time'\n    | 'true'\n    | 'false'\n    | null;\n  ariaDisabled: 'true' | 'false' | null;\n  ariaExpanded: 'true' | 'false' | null;\n  ariaHasPopup:\n    | 'false'\n    | 'true'\n    | 'menu'\n    | 'listbox'\n    | 'tree'\n    | 'grid'\n    | 'dialog'\n    | 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'\n  | 'alertdialog'\n  | 'button'\n  | 'checkbox'\n  | 'dialog'\n  | 'gridcell'\n  | 'link'\n  | 'log'\n  | 'marquee'\n  | 'menuitem'\n  | 'menuitemcheckbox'\n  | 'menuitemradio'\n  | 'option'\n  | 'progressbar'\n  | 'radio'\n  | 'scrollbar'\n  | 'searchbox'\n  | 'slider'\n  | 'spinbutton'\n  | 'status'\n  | 'switch'\n  | 'tab'\n  | 'tabpanel'\n  | 'textbox'\n  | 'timer'\n  | 'tooltip'\n  | 'treeitem'\n  | 'combobox'\n  | 'grid'\n  | 'listbox'\n  | 'menu'\n  | 'menubar'\n  | 'radiogroup'\n  | 'tablist'\n  | 'tree'\n  | 'treegrid'\n  | 'application'\n  | 'article'\n  | 'cell'\n  | 'columnheader'\n  | 'definition'\n  | 'directory'\n  | 'document'\n  | 'feed'\n  | 'figure'\n  | 'group'\n  | 'heading'\n  | 'img'\n  | 'list'\n  | 'listitem'\n  | 'math'\n  | 'none'\n  | 'note'\n  | 'presentation'\n  | 'region'\n  | 'row'\n  | 'rowgroup'\n  | 'rowheader'\n  | 'separator'\n  | 'table'\n  | 'term'\n  | 'text'\n  | 'toolbar'\n  | 'banner'\n  | 'complementary'\n  | 'contentinfo'\n  | 'form'\n  | 'main'\n  | 'navigation'\n  | 'region'\n  | 'search'\n  | 'doc-abstract'\n  | 'doc-acknowledgments'\n  | 'doc-afterword'\n  | 'doc-appendix'\n  | 'doc-backlink'\n  | 'doc-biblioentry'\n  | 'doc-bibliography'\n  | 'doc-biblioref'\n  | 'doc-chapter'\n  | 'doc-colophon'\n  | 'doc-conclusion'\n  | 'doc-cover'\n  | 'doc-credit'\n  | 'doc-credits'\n  | 'doc-dedication'\n  | 'doc-endnote'\n  | 'doc-endnotes'\n  | 'doc-epigraph'\n  | 'doc-epilogue'\n  | 'doc-errata'\n  | 'doc-example'\n  | 'doc-footnote'\n  | 'doc-foreword'\n  | 'doc-glossary'\n  | 'doc-glossref'\n  | 'doc-index'\n  | 'doc-introduction'\n  | 'doc-noteref'\n  | 'doc-notice'\n  | 'doc-pagebreak'\n  | 'doc-pagelist'\n  | 'doc-part'\n  | 'doc-preface'\n  | 'doc-prologue'\n  | 'doc-pullquote'\n  | 'doc-qna'\n  | 'doc-subtitle'\n  | 'doc-tip'\n  | 'doc-toc';\n\n/**\n * This function will polyfill `ARIAMixin` properties for Firefox.\n *\n * @param ctor The `ReactiveElement` constructor to set up.\n */\nexport function polyfillARIAMixin(ctor: typeof ReactiveElement) {\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 * Polyfills an element and its `ElementInternals` to support `ARIAMixin`\n * properties on internals. This is needed for Firefox.\n *\n * `polyfillARIAMixin()` must be called for the element class.\n *\n * @example\n * class XButton extends LitElement {\n *   static {\n *     polyfillARIAMixin(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,\n  internals: ElementInternals,\n) {\n  if (checkIfElementInternalsSupportsAria(internals)) {\n    return internals;\n  }\n\n  if (!('role' in host)) {\n    throw new Error('Missing polyfillARIAMixin()');\n  }\n\n  let firstConnectedCallbacks: Array<{\n    property: ARIAProperty | 'role';\n    callback: () => void;\n  }> = [];\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 internalAriaValue: string | null = null;\n    Object.defineProperty(internals, ariaProperty, {\n      enumerable: true,\n      configurable: true,\n      get() {\n        return internalAriaValue;\n      },\n      set(value: string | null) {\n        const setValue = () => {\n          internalAriaValue = value;\n          if (!hasBeenConnected) {\n            firstConnectedCallbacks.push({\n              property: ariaProperty,\n              callback: setValue,\n            });\n            return;\n          }\n\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        setValue();\n      },\n    });\n  }\n\n  let internalRoleValue: string | null = null;\n  Object.defineProperty(internals, 'role', {\n    enumerable: true,\n    configurable: true,\n    get() {\n      return internalRoleValue;\n    },\n    set(value: string | null) {\n      const setRole = () => {\n        internalRoleValue = value;\n\n        if (!hasBeenConnected) {\n          firstConnectedCallbacks.push({\n            property: 'role',\n            callback: setRole,\n          });\n          return;\n        }\n\n        if (value === null) {\n          host.removeAttribute('role');\n        } else {\n          host.setAttribute('role', value);\n        }\n      };\n\n      setRole();\n    },\n  });\n\n  host.addController({\n    hostConnected() {\n      if (hasBeenConnected) {\n        return;\n      }\n\n      hasBeenConnected = true;\n\n      const propertiesSetByUser = new Set<ARIAProperty | 'role'>();\n\n      // See which properties were set by the user on host before we apply\n      // internals values as attributes to host. Needs to be done in another\n      // for loop because the callbacks set these attributes on host.\n      for (const {property} of firstConnectedCallbacks) {\n        const wasSetByUser =\n          host.getAttribute(ariaPropertyToAttribute(property)) !== null ||\n          // Dynamic lookup rather than hardcoding all properties.\n          // tslint:disable-next-line:no-dict-access-on-struct-type\n          host[property] !== undefined;\n\n        if (wasSetByUser) {\n          propertiesSetByUser.add(property);\n        }\n      }\n\n      for (const {property, callback} of firstConnectedCallbacks) {\n        // If the user has set the attribute or property, do not override the\n        // user's value\n        if (propertiesSetByUser.has(property)) {\n          continue;\n        }\n\n        callback();\n      }\n\n      // Remove strong callback references\n      firstConnectedCallbacks = [];\n    },\n  });\n\n  return internals;\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/aria/delegate.js

@@ -41,11 +41,11 @@ export function requestUpdateOnAriaChange(ctor) {
             reflect: true,
         });
     }
-    ctor.addInitializer(element => {
+    ctor.addInitializer((element) => {
         const controller = {
             hostConnected() {
                 element.setAttribute('role', 'presentation');
-            }
+            },
         };
         element.addController(controller);
     });