@material/web 1.1.0 → 1.1.2-nightly.363fc05.0

package/README.md

@@ -16,5 +16,6 @@ Google's open-source design system.
 -   [Introduction](docs/intro.md)
 -   [Roadmap](docs/roadmap.md)
 -   [Quick start](docs/quick-start.md)
+-   [Bundle sizes](docs/size.md)
 -   [Component docs](docs/components/)
 -   [Browser support and FAQ](docs/support.md)

package/button/internal/button.js

@@ -9,8 +9,8 @@ import '../../ripple/ripple.js';
 import { html, isServer, LitElement, nothing } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
-import { dispatchActivationClick, isActivationClick, } from '../../internal/controller/events.js';
 import { setupFormSubmitter, } from '../../internal/controller/form-submitter.js';
+import { dispatchActivationClick, isActivationClick, } from '../../internal/events/form-label-activation.js';
 import { internals, mixinElementInternals, } from '../../labs/behaviors/element-internals.js';
 // Separate variable needed for closure.
 const buttonBaseClass = mixinElementInternals(LitElement);

package/button/internal/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../../internal/controller/events.js';\nimport {\n  FormSubmitter,\n  FormSubmitterType,\n  setupFormSubmitter,\n} from '../../internal/controller/form-submitter.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../labs/behaviors/element-internals.js';\n\n// Separate variable needed for closure.\nconst buttonBaseClass = mixinElementInternals(LitElement);\n\n/**\n * A button component.\n */\nexport abstract class Button extends buttonBaseClass implements FormSubmitter {\n  static {\n    requestUpdateOnAriaChange(Button);\n    setupFormSubmitter(Button);\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   * Whether or not the button is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   *\n   * _Note:_ Link buttons cannot have trailing icons.\n   */\n  @property({type: Boolean, attribute: 'trailing-icon', reflect: true})\n  trailingIcon = false;\n\n  /**\n   * Whether to display the icon or not.\n   */\n  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon =\n    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  @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.handleActivationClick);\n    }\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected override render() {\n    // Link buttons may not be disabled\n    const isDisabled = this.disabled && !this.href;\n    const buttonOrLink = this.href ? this.renderLink() : this.renderButton();\n    // TODO(b/310046938): due to a limitation in focus ring/ripple, we can't use\n    // the same ID for different elements, so we change the ID instead.\n    const buttonId = this.href ? 'link' : 'button';\n    return html`\n      ${this.renderElevationOrOutline?.()}\n      <div class=\"background\"></div>\n      <md-focus-ring part=\"focus-ring\" for=${buttonId}></md-focus-ring>\n      <md-ripple for=${buttonId} ?disabled=\"${isDisabled}\"></md-ripple>\n      ${buttonOrLink}\n    `;\n  }\n\n  // Buttons can override this to add elevation or an outline. Use this and\n  // return `<md-elevation>` (for elevated, filled, and tonal buttons)\n  // or `<div class=\"outline\">` (for outlined buttons).\n  // Text buttons that have neither do not need to implement this.\n  protected renderElevationOrOutline?(): unknown;\n\n  private renderButton() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    return html`<button\n      id=\"button\"\n      class=\"button\"\n      ?disabled=${this.disabled}\n      aria-label=\"${ariaLabel || nothing}\"\n      aria-haspopup=\"${ariaHasPopup || nothing}\"\n      aria-expanded=\"${ariaExpanded || nothing}\">\n      ${this.renderContent()}\n    </button>`;\n  }\n\n  private renderLink() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    return html`<a\n      id=\"link\"\n      class=\"button\"\n      aria-label=\"${ariaLabel || nothing}\"\n      aria-haspopup=\"${ariaHasPopup || nothing}\"\n      aria-expanded=\"${ariaExpanded || nothing}\"\n      href=${this.href}\n      target=${this.target || nothing}\n      >${this.renderContent()}\n    </a>`;\n  }\n\n  private renderContent() {\n    const icon = html`<slot\n      name=\"icon\"\n      @slotchange=\"${this.handleSlotChange}\"></slot>`;\n\n    return html`\n      <span class=\"touch\"></span>\n      ${this.trailingIcon ? nothing : icon}\n      <span class=\"label\"><slot></slot></span>\n      ${this.trailingIcon ? icon : nothing}\n    `;\n  }\n\n  private readonly handleActivationClick = (event: MouseEvent) => {\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  private handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.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 {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../labs/behaviors/element-internals.js';\n\n// Separate variable needed for closure.\nconst buttonBaseClass = mixinElementInternals(LitElement);\n\n/**\n * A button component.\n */\nexport abstract class Button extends buttonBaseClass implements FormSubmitter {\n  static {\n    requestUpdateOnAriaChange(Button);\n    setupFormSubmitter(Button);\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   * Whether or not the button is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   *\n   * _Note:_ Link buttons cannot have trailing icons.\n   */\n  @property({type: Boolean, attribute: 'trailing-icon', reflect: true})\n  trailingIcon = false;\n\n  /**\n   * Whether to display the icon or not.\n   */\n  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon =\n    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  @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.handleActivationClick);\n    }\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected override render() {\n    // Link buttons may not be disabled\n    const isDisabled = this.disabled && !this.href;\n    const buttonOrLink = this.href ? this.renderLink() : this.renderButton();\n    // TODO(b/310046938): due to a limitation in focus ring/ripple, we can't use\n    // the same ID for different elements, so we change the ID instead.\n    const buttonId = this.href ? 'link' : 'button';\n    return html`\n      ${this.renderElevationOrOutline?.()}\n      <div class=\"background\"></div>\n      <md-focus-ring part=\"focus-ring\" for=${buttonId}></md-focus-ring>\n      <md-ripple for=${buttonId} ?disabled=\"${isDisabled}\"></md-ripple>\n      ${buttonOrLink}\n    `;\n  }\n\n  // Buttons can override this to add elevation or an outline. Use this and\n  // return `<md-elevation>` (for elevated, filled, and tonal buttons)\n  // or `<div class=\"outline\">` (for outlined buttons).\n  // Text buttons that have neither do not need to implement this.\n  protected renderElevationOrOutline?(): unknown;\n\n  private renderButton() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    return html`<button\n      id=\"button\"\n      class=\"button\"\n      ?disabled=${this.disabled}\n      aria-label=\"${ariaLabel || nothing}\"\n      aria-haspopup=\"${ariaHasPopup || nothing}\"\n      aria-expanded=\"${ariaExpanded || nothing}\">\n      ${this.renderContent()}\n    </button>`;\n  }\n\n  private renderLink() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    return html`<a\n      id=\"link\"\n      class=\"button\"\n      aria-label=\"${ariaLabel || nothing}\"\n      aria-haspopup=\"${ariaHasPopup || nothing}\"\n      aria-expanded=\"${ariaExpanded || nothing}\"\n      href=${this.href}\n      target=${this.target || nothing}\n      >${this.renderContent()}\n    </a>`;\n  }\n\n  private renderContent() {\n    const icon = html`<slot\n      name=\"icon\"\n      @slotchange=\"${this.handleSlotChange}\"></slot>`;\n\n    return html`\n      <span class=\"touch\"></span>\n      ${this.trailingIcon ? nothing : icon}\n      <span class=\"label\"><slot></slot></span>\n      ${this.trailingIcon ? icon : nothing}\n    `;\n  }\n\n  private readonly handleActivationClick = (event: MouseEvent) => {\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  private handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n"]}

package/checkbox/internal/checkbox.js

@@ -10,7 +10,8 @@ import { html, isServer, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
-import { dispatchActivationClick, isActivationClick, redispatchEvent, } from '../../internal/controller/events.js';
+import { dispatchActivationClick, isActivationClick, } from '../../internal/events/form-label-activation.js';
+import { redispatchEvent } from '../../internal/events/redispatch-event.js';
 import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../labs/behaviors/constraint-validation.js';
 import { mixinElementInternals } from '../../labs/behaviors/element-internals.js';
 import { getFormState, getFormValue, mixinFormAssociated, } from '../../labs/behaviors/form-associated.js';

package/checkbox/internal/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n  redispatchEvent,\n} from '../../internal/controller/events.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../labs/behaviors/validators/checkbox-validator.js';\n\n// Separate variable needed for closure.\nconst checkboxBaseClass = mixinConstraintValidation(\n  mixinFormAssociated(mixinElementInternals(LitElement)),\n);\n\n/**\n * A checkbox component.\n *\n *\n * @fires change {Event} The native `change` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n * --bubbles\n * @fires input {InputEvent} The native `input` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)\n * --bubbles --composed\n */\nexport class Checkbox extends checkboxBaseClass {\n  static {\n    requestUpdateOnAriaChange(Checkbox);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Whether or not the checkbox is selected.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Whether or not the checkbox is indeterminate.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * When true, require the checkbox to be selected when participating in\n   * form submission.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The value of the checkbox that is submitted with a form when selected.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  @property() value = 'on';\n\n  @state() private prevChecked = false;\n  @state() private prevDisabled = false;\n  @state() private prevIndeterminate = false;\n  @query('input') private readonly input!: HTMLInputElement | null;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', (event: MouseEvent) => {\n        if (!isActivationClick(event) || !this.input) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.input);\n      });\n    }\n  }\n\n  protected override update(changed: PropertyValues<Checkbox>) {\n    if (\n      changed.has('checked') ||\n      changed.has('disabled') ||\n      changed.has('indeterminate')\n    ) {\n      this.prevChecked = changed.get('checked') ?? this.checked;\n      this.prevDisabled = changed.get('disabled') ?? this.disabled;\n      this.prevIndeterminate =\n        changed.get('indeterminate') ?? this.indeterminate;\n    }\n\n    super.update(changed);\n  }\n\n  protected override render() {\n    const prevNone = !this.prevChecked && !this.prevIndeterminate;\n    const prevChecked = this.prevChecked && !this.prevIndeterminate;\n    const prevIndeterminate = this.prevIndeterminate;\n    const isChecked = this.checked && !this.indeterminate;\n    const isIndeterminate = this.indeterminate;\n\n    const containerClasses = classMap({\n      'disabled': this.disabled,\n      'selected': isChecked || isIndeterminate,\n      'unselected': !isChecked && !isIndeterminate,\n      'checked': isChecked,\n      'indeterminate': isIndeterminate,\n      'prev-unselected': prevNone,\n      'prev-checked': prevChecked,\n      'prev-indeterminate': prevIndeterminate,\n      'prev-disabled': this.prevDisabled,\n    });\n\n    // Needed for closure conformance\n    const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n    // Note: <input> needs to be rendered before the <svg> for\n    // form.reportValidity() to work in Chrome.\n    return html`\n      <div class=\"container ${containerClasses}\">\n        <input\n          type=\"checkbox\"\n          id=\"input\"\n          aria-checked=${isIndeterminate ? 'mixed' : nothing}\n          aria-label=${ariaLabel || nothing}\n          aria-invalid=${ariaInvalid || nothing}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          .indeterminate=${this.indeterminate}\n          .checked=${this.checked}\n          @input=${this.handleInput}\n          @change=${this.handleChange} />\n\n        <div class=\"outline\"></div>\n        <div class=\"background\"></div>\n        <md-focus-ring part=\"focus-ring\" for=\"input\"></md-focus-ring>\n        <md-ripple for=\"input\" ?disabled=${this.disabled}></md-ripple>\n        <svg class=\"icon\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n          <rect class=\"mark short\" />\n          <rect class=\"mark long\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  private handleInput(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = target.indeterminate;\n    // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n  }\n\n  private handleChange(event: Event) {\n    // <input> 'change' event is not composed, re-dispatch it.\n    redispatchEvent(this, event);\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    if (!this.checked || this.indeterminate) {\n      return null;\n    }\n\n    return this.value;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    // The checked property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.checked = this.hasAttribute('checked');\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  [createValidator]() {\n    return new CheckboxValidator(() => this);\n  }\n\n  [getValidityAnchor]() {\n    return this.input;\n  }\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../labs/behaviors/validators/checkbox-validator.js';\n\n// Separate variable needed for closure.\nconst checkboxBaseClass = mixinConstraintValidation(\n  mixinFormAssociated(mixinElementInternals(LitElement)),\n);\n\n/**\n * A checkbox component.\n *\n *\n * @fires change {Event} The native `change` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n * --bubbles\n * @fires input {InputEvent} The native `input` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)\n * --bubbles --composed\n */\nexport class Checkbox extends checkboxBaseClass {\n  static {\n    requestUpdateOnAriaChange(Checkbox);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Whether or not the checkbox is selected.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Whether or not the checkbox is indeterminate.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * When true, require the checkbox to be selected when participating in\n   * form submission.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The value of the checkbox that is submitted with a form when selected.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  @property() value = 'on';\n\n  @state() private prevChecked = false;\n  @state() private prevDisabled = false;\n  @state() private prevIndeterminate = false;\n  @query('input') private readonly input!: HTMLInputElement | null;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', (event: MouseEvent) => {\n        if (!isActivationClick(event) || !this.input) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.input);\n      });\n    }\n  }\n\n  protected override update(changed: PropertyValues<Checkbox>) {\n    if (\n      changed.has('checked') ||\n      changed.has('disabled') ||\n      changed.has('indeterminate')\n    ) {\n      this.prevChecked = changed.get('checked') ?? this.checked;\n      this.prevDisabled = changed.get('disabled') ?? this.disabled;\n      this.prevIndeterminate =\n        changed.get('indeterminate') ?? this.indeterminate;\n    }\n\n    super.update(changed);\n  }\n\n  protected override render() {\n    const prevNone = !this.prevChecked && !this.prevIndeterminate;\n    const prevChecked = this.prevChecked && !this.prevIndeterminate;\n    const prevIndeterminate = this.prevIndeterminate;\n    const isChecked = this.checked && !this.indeterminate;\n    const isIndeterminate = this.indeterminate;\n\n    const containerClasses = classMap({\n      'disabled': this.disabled,\n      'selected': isChecked || isIndeterminate,\n      'unselected': !isChecked && !isIndeterminate,\n      'checked': isChecked,\n      'indeterminate': isIndeterminate,\n      'prev-unselected': prevNone,\n      'prev-checked': prevChecked,\n      'prev-indeterminate': prevIndeterminate,\n      'prev-disabled': this.prevDisabled,\n    });\n\n    // Needed for closure conformance\n    const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n    // Note: <input> needs to be rendered before the <svg> for\n    // form.reportValidity() to work in Chrome.\n    return html`\n      <div class=\"container ${containerClasses}\">\n        <input\n          type=\"checkbox\"\n          id=\"input\"\n          aria-checked=${isIndeterminate ? 'mixed' : nothing}\n          aria-label=${ariaLabel || nothing}\n          aria-invalid=${ariaInvalid || nothing}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          .indeterminate=${this.indeterminate}\n          .checked=${this.checked}\n          @input=${this.handleInput}\n          @change=${this.handleChange} />\n\n        <div class=\"outline\"></div>\n        <div class=\"background\"></div>\n        <md-focus-ring part=\"focus-ring\" for=\"input\"></md-focus-ring>\n        <md-ripple for=\"input\" ?disabled=${this.disabled}></md-ripple>\n        <svg class=\"icon\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n          <rect class=\"mark short\" />\n          <rect class=\"mark long\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  private handleInput(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = target.indeterminate;\n    // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n  }\n\n  private handleChange(event: Event) {\n    // <input> 'change' event is not composed, re-dispatch it.\n    redispatchEvent(this, event);\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    if (!this.checked || this.indeterminate) {\n      return null;\n    }\n\n    return this.value;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    // The checked property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.checked = this.hasAttribute('checked');\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  [createValidator]() {\n    return new CheckboxValidator(() => this);\n  }\n\n  [getValidityAnchor]() {\n    return this.input;\n  }\n}\n"]}

package/chips/internal/filter-chip.js

@@ -7,7 +7,7 @@ import { __decorate } from "tslib";
 import '../../elevation/elevation.js';
 import { html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { redispatchEvent } from '../../internal/controller/events.js';
+import { redispatchEvent } from '../../internal/events/redispatch-event.js';
 import { MultiActionChip } from './multi-action-chip.js';
 import { renderRemoveButton } from './trailing-icons.js';
 /**

package/chips/internal/filter-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.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 '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {redispatchEvent} from '../../internal/controller/events.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * A filter chip component.\n *\n * @fires remove {Event} Dispatched when the remove button is clicked.\n */\nexport class FilterChip extends MultiActionChip {\n  @property({type: Boolean}) elevated = false;\n  @property({type: Boolean}) removable = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when a filter chip has a `slot=\"selected-icon\"` to avoid\n   * a Flash Of Unstyled Content.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'has-selected-icon'})\n  hasSelectedIcon = false;\n\n  protected get primaryId() {\n    return 'button';\n  }\n\n  @query('.primary.action')\n  protected readonly primaryAction!: HTMLElement | null;\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement | null;\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      elevated: this.elevated,\n      selected: this.selected,\n      'has-trailing': this.removable,\n      'has-icon': this.hasIcon || this.selected,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-pressed=${this.selected}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        @click=${this.handleClick}\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderLeadingIcon() {\n    if (!this.selected) {\n      return super.renderLeadingIcon();\n    }\n\n    return html`\n      <slot name=\"selected-icon\">\n        <svg class=\"checkmark\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n          <path\n            d=\"M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z\" />\n        </svg>\n      </slot>\n    `;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    if (this.removable) {\n      return renderRemoveButton({\n        focusListener,\n        ariaLabel: this.ariaLabelRemove,\n        disabled: this.disabled,\n      });\n    }\n\n    return nothing;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    this.selected = !this.selected;\n\n    const preventDefault = !redispatchEvent(this, event);\n    if (preventDefault) {\n      this.selected = !this.selected;\n      return;\n    }\n  }\n}\n"]}
+{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.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 '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * A filter chip component.\n *\n * @fires remove {Event} Dispatched when the remove button is clicked.\n */\nexport class FilterChip extends MultiActionChip {\n  @property({type: Boolean}) elevated = false;\n  @property({type: Boolean}) removable = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when a filter chip has a `slot=\"selected-icon\"` to avoid\n   * a Flash Of Unstyled Content.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'has-selected-icon'})\n  hasSelectedIcon = false;\n\n  protected get primaryId() {\n    return 'button';\n  }\n\n  @query('.primary.action')\n  protected readonly primaryAction!: HTMLElement | null;\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement | null;\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      elevated: this.elevated,\n      selected: this.selected,\n      'has-trailing': this.removable,\n      'has-icon': this.hasIcon || this.selected,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-pressed=${this.selected}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        @click=${this.handleClick}\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderLeadingIcon() {\n    if (!this.selected) {\n      return super.renderLeadingIcon();\n    }\n\n    return html`\n      <slot name=\"selected-icon\">\n        <svg class=\"checkmark\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n          <path\n            d=\"M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z\" />\n        </svg>\n      </slot>\n    `;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    if (this.removable) {\n      return renderRemoveButton({\n        focusListener,\n        ariaLabel: this.ariaLabelRemove,\n        disabled: this.disabled,\n      });\n    }\n\n    return nothing;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    this.selected = !this.selected;\n\n    const preventDefault = !redispatchEvent(this, event);\n    if (preventDefault) {\n      this.selected = !this.selected;\n      return;\n    }\n  }\n}\n"]}

package/dialog/internal/dialog.d.ts

@@ -17,12 +17,6 @@ import { DialogAnimation } from './animations.js';
  * on the scrim or pressing Escape.
  */
 export declare class Dialog extends LitElement {
-    /** @nocollapse */
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode;
-    };
     /**
      * Opens the dialog when set to `true` and closes it when set to `false`.
      */
@@ -70,6 +64,7 @@ export declare class Dialog extends LitElement {
     private hasHeadline;
     private hasActions;
     private hasIcon;
+    private escapePressedWithoutCancel;
     constructor();
     /**
      * Opens the dialog and fires a cancelable `open` event. After a dialog's
@@ -101,6 +96,8 @@ export declare class Dialog extends LitElement {
     private handleContentClick;
     private handleSubmit;
     private handleCancel;
+    private handleClose;
+    private handleKeydown;
     private animateDialog;
     private handleHeadlineChange;
     private handleActionsChange;

package/dialog/internal/dialog.js

@@ -9,7 +9,7 @@ import { html, isServer, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
-import { redispatchEvent } from '../../internal/controller/events.js';
+import { redispatchEvent } from '../../internal/events/redispatch-event.js';
 import { DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION, } from './animations.js';
 /**
  * A dialog component.
@@ -71,8 +71,41 @@ export class Dialog extends LitElement {
         this.hasHeadline = false;
         this.hasActions = false;
         this.hasIcon = false;
+        // See https://bugs.chromium.org/p/chromium/issues/detail?id=1512224
+        // Chrome v120 has a bug where escape keys do not trigger cancels. If we get
+        // a dialog "close" event that is triggered without a "cancel" after an escape
+        // keydown, then we need to manually trigger our closing logic.
+        //
+        // This bug occurs when pressing escape to close a dialog without first
+        // interacting with the dialog's content.
+        //
+        // Cleanup tracking:
+        // https://github.com/material-components/material-web/issues/5330
+        // This can be removed when full CloseWatcher support added and the above bug
+        // in Chromium is fixed to fire 'cancel' with one escape press and close with
+        // multiple.
+        this.escapePressedWithoutCancel = false;
         if (!isServer) {
             this.addEventListener('submit', this.handleSubmit);
+            // We do not use `delegatesFocus: true` due to a Chromium bug with
+            // selecting text.
+            // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357
+            //
+            // Material requires using focus trapping within the dialog (see
+            // b/314840853 for the bug to add it). This would normally mean we don't
+            // care about delegating focus since the `<dialog>` never receives it.
+            // However, we still need to handle situations when a user has not
+            // provided an focusable child in the content. When that happens, the
+            // `<dialog>` itself is focused.
+            //
+            // Listen to focus/blur instead of focusin/focusout since those can bubble
+            // from content.
+            this.addEventListener('focus', () => {
+                this.dialog?.focus();
+            });
+            this.addEventListener('blur', () => {
+                this.dialog?.blur();
+            });
         }
     }
     /**
@@ -181,6 +214,8 @@ export class Dialog extends LitElement {
         role=${this.type === 'alert' ? 'alertdialog' : nothing}
         @cancel=${this.handleCancel}
         @click=${this.handleDialogClick}
+        @close=${this.handleClose}
+        @keydown=${this.handleKeydown}
         .returnValue=${this.returnValue || nothing}>
         <div class="container" @click=${this.handleContentClick}>
           <div class="headline">
@@ -251,6 +286,7 @@ export class Dialog extends LitElement {
             // Ignore any cancel events dispatched by content.
             return;
         }
+        this.escapePressedWithoutCancel = false;
         const preventDefault = !redispatchEvent(this, event);
         // We always prevent default on the original dialog event since we'll
         // animate closing it before it actually closes.
@@ -260,6 +296,26 @@ export class Dialog extends LitElement {
         }
         this.close();
     }
+    handleClose() {
+        if (!this.escapePressedWithoutCancel) {
+            return;
+        }
+        this.escapePressedWithoutCancel = false;
+        this.dialog?.dispatchEvent(new Event('cancel', { cancelable: true }));
+    }
+    handleKeydown(event) {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        // An escape key was pressed. If a "close" event fires next without a
+        // "cancel" event first, then we know we're in the Chrome v120 bug.
+        this.escapePressedWithoutCancel = true;
+        // Wait a full task for the cancel/close event listeners to fire, then
+        // reset the flag.
+        setTimeout(() => {
+            this.escapePressedWithoutCancel = false;
+        });
+    }
     async animateDialog(animation) {
         const { dialog, scrim, container, headline, content, actions } = this;
         if (!dialog || !scrim || !container || !headline || !content || !actions) {
@@ -312,11 +368,6 @@ export class Dialog extends LitElement {
 (() => {
     requestUpdateOnAriaChange(Dialog);
 })();
-/** @nocollapse */
-Dialog.shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-};
 __decorate([
     property({ type: Boolean })
 ], Dialog.prototype, "open", null);

package/dialog/internal/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACxD,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAC,eAAe,EAAC,MAAM,qCAAqC,CAAC;AAEpE,OAAO,EACL,8BAA8B,EAC9B,6BAA6B,GAG9B,MAAM,iBAAiB,CAAC;AAEzB;;;;;;;;;GASG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAWpC;;OAEG;IAEH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,IAAI,CAAC,IAAa;QACpB,IAAI,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;YACxB,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;IACH,CAAC;IAmDD;QACE,KAAK,EAAE,CAAC;QAlDV;;;;;WAKG;QAC2B,gBAAW,GAAG,EAAE,CAAC;QAQ/C;;;WAGG;QACH,qBAAgB,GAAG,GAAG,EAAE,CAAC,6BAA6B,CAAC;QAEvD;;;WAGG;QACH,sBAAiB,GAAG,GAAG,EAAE,CAAC,8BAA8B,CAAC;QAEjD,WAAM,GAAG,KAAK,CAAC;QACf,cAAS,GAAG,KAAK,CAAC;QAGlB,uBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAOzC,kBAAa,GAAG,KAAK,CAAC;QACtB,qBAAgB,GAAG,KAAK,CAAC;QAIlC,2BAAsB,GAAG,KAAK,CAAC;QAEvC,6EAA6E;QAC5D,gBAAW,GAAG,KAAK,CAAC;QACpB,eAAU,GAAG,KAAK,CAAC;QACnB,YAAO,GAAG,KAAK,CAAC;QAI/B,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SACpD;IACH,CAAC;IAED;;;;;;;;;OASG;IACH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,wEAAwE;QACxE,2DAA2D;QAC3D,MAAM,IAAI,CAAC,kBAAkB,CAAC;QAC9B,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAO,CAAC;QAC5B,4EAA4E;QAC5E,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,OAAO;SACR;QAED,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,aAAa,CACrC,IAAI,KAAK,CAAC,MAAM,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CACtC,CAAC;QACF,IAAI,WAAW,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,OAAO;SACR;QAED,kCAAkC;QAClC,MAAM,CAAC,SAAS,EAAE,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,sEAAsE;QACtE,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,CAAC,CAAC;SAC7B;QACD,uEAAuE;QACvE,yEAAyE;QACzE,0BAA0B;QAC1B,IAAI,CAAC,aAAa,CAAc,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;QAExD,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED;;;;;;;;;OASG;IACH,KAAK,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW;QACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,4DAA4D;YAC5D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,OAAO;SACR;QAED,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAO,CAAC;QAC5B,2EAA2E;QAC3E,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YAClC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,OAAO;SACR;QAED,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC;QACzC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,aAAa,CACtC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CACvC,CAAC;QACF,IAAI,YAAY,EAAE;YAChB,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;QACnD,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IACzD,CAAC;IAEkB,MAAM;QACvB,MAAM,UAAU,GACd,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC9D,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI,CAAC,WAAW;YAChC,aAAa,EAAE,IAAI,CAAC,UAAU;YAC9B,UAAU,EAAE,IAAI,CAAC,OAAO;YACxB,YAAY,EAAE,UAAU;YACxB,kBAAkB,EAAE,UAAU,IAAI,CAAC,IAAI,CAAC,aAAa;YACrD,qBAAqB,EAAE,UAAU,IAAI,CAAC,IAAI,CAAC,gBAAgB;SAC5D,CAAC;QAEF,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,OAAO,CAAC;qBACZ,SAAS,IAAI,OAAO;0BACf,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;eAClD,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;kBAC5C,IAAI,CAAC,YAAY;iBAClB,IAAI,CAAC,iBAAiB;uBAChB,IAAI,CAAC,WAAW,IAAI,OAAO;wCACV,IAAI,CAAC,kBAAkB;;;8CAGjB,IAAI,CAAC,gBAAgB;;4CAEvB,CAAC,IAAI,CAAC,WAAW,IAAI,OAAO;;;8BAG1C,IAAI,CAAC,oBAAoB;;;;;;;;;;;;;+CAaR,IAAI,CAAC,mBAAmB;;;;KAIlE,CAAC;IACJ,CAAC;IAEkB,YAAY;QAC7B,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAClD,CAAC,OAAO,EAAE,EAAE;YACV,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;aACtC;QACH,CAAC,EACD,EAAC,IAAI,EAAE,IAAI,CAAC,QAAS,EAAC,CACvB,CAAC;QAEF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,SAAU,CAAC,CAAC;QACnD,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAa,CAAC,CAAC;IACxD,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,wEAAwE;YACxE,WAAW;YACX,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;YACpC,OAAO;SACR;QAED,wEAAwE;QACxE,2BAA2B;QAC3B,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,aAAa,CACxC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CACxC,CAAC;QACF,IAAI,cAAc,EAAE;YAClB,OAAO;SACR;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;IACrC,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,MAAM,EAAC,SAAS,EAAC,GAAG,KAAK,CAAC;QAC1B,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,CAAC,SAAS,EAAE;YAC1C,OAAO;SACR;QAED,mEAAmE;QACnE,0CAA0C;QAC1C,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC;IAClE,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE;YAChC,kDAAkD;YAClD,OAAO;SACR;QAED,MAAM,cAAc,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACrD,qEAAqE;QACrE,gDAAgD;QAChD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,cAAc,EAAE;YAClB,OAAO;SACR;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAEO,KAAK,CAAC,aAAa,CAAC,SAA0B;QACpD,MAAM,EAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC;QACpE,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;YACxE,OAAO;SACR;QAED,MAAM,EACJ,SAAS,EAAE,gBAAgB,EAC3B,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,cAAc,GACxB,GAAG,SAAS,CAAC;QAEd,MAAM,mBAAmB,GAA4C;YACnE,CAAC,MAAM,EAAE,aAAa,IAAI,EAAE,CAAC;YAC7B,CAAC,KAAK,EAAE,YAAY,IAAI,EAAE,CAAC;YAC3B,CAAC,SAAS,EAAE,gBAAgB,IAAI,EAAE,CAAC;YACnC,CAAC,QAAQ,EAAE,eAAe,IAAI,EAAE,CAAC;YACjC,CAAC,OAAO,EAAE,cAAc,IAAI,EAAE,CAAC;YAC/B,CAAC,OAAO,EAAE,cAAc,IAAI,EAAE,CAAC;SAChC,CAAC;QAEF,MAAM,UAAU,GAAgB,EAAE,CAAC;QACnC,KAAK,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,mBAAmB,EAAE;YACtD,KAAK,MAAM,WAAW,IAAI,SAAS,EAAE;gBACnC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC;aAClD;SACF;QAED,MAAM,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;IACvE,CAAC;IAEO,oBAAoB,CAAC,KAAY;QACvC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IACxD,CAAC;IAEO,mBAAmB,CAAC,KAAY;QACtC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,CAAC;IAEO,gBAAgB,CAAC,KAAY;QACnC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IACpD,CAAC;IAEO,wBAAwB,CAAC,KAAgC;QAC/D,MAAM,EAAC,MAAM,EAAE,cAAc,EAAC,GAAG,KAAK,CAAC;QACvC,IAAI,MAAM,KAAK,IAAI,CAAC,SAAS,EAAE;YAC7B,IAAI,CAAC,aAAa,GAAG,cAAc,CAAC;SACrC;QAED,IAAI,MAAM,KAAK,IAAI,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAC;SACxC;IACH,CAAC;IAEO,qBAAqB;QAC3B,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;YACnC,IAAI,CAAC,yBAAyB,GAAG,OAAO,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;;AAnXD;IACE,yBAAyB,CAAC,MAAM,CAAC,CAAC;AACpC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,wBAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAMF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;kCAGzB;AAuB6B;IAA7B,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;2CAAkB;AAMnC;IAAX,QAAQ,EAAE;oCAAgB;AAmBO;IAAjC,KAAK,CAAC,QAAQ,CAAC;sCAAoD;AAClC;IAAjC,KAAK,CAAC,QAAQ,CAAC;qCAAmD;AAC7B;IAArC,KAAK,CAAC,YAAY,CAAC;yCAAuD;AACtC;IAApC,KAAK,CAAC,WAAW,CAAC;wCAAsD;AACrC;IAAnC,KAAK,CAAC,UAAU,CAAC;uCAAqD;AACnC;IAAnC,KAAK,CAAC,UAAU,CAAC;uCAAqD;AACtD;IAAhB,KAAK,EAAE;6CAA+B;AACtB;IAAhB,KAAK,EAAE;gDAAkC;AACL;IAApC,KAAK,CAAC,WAAW,CAAC;wCAAgD;AAC5B;IAAtC,KAAK,CAAC,aAAa,CAAC;yCAAiD;AAC5B;IAAzC,KAAK,CAAC,gBAAgB,CAAC;4CAAoD;AAI3D;IAAhB,KAAK,EAAE;2CAA6B;AACpB;IAAhB,KAAK,EAAE;0CAA4B;AACnB;IAAhB,KAAK,EAAE;uCAAyB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../divider/divider.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../internal/controller/events.js';\n\nimport {\n  DIALOG_DEFAULT_CLOSE_ANIMATION,\n  DIALOG_DEFAULT_OPEN_ANIMATION,\n  DialogAnimation,\n  DialogAnimationArgs,\n} from './animations.js';\n\n/**\n * A dialog component.\n *\n * @fires open {Event} Dispatched when the dialog is opening before any animations.\n * @fires opened {Event} Dispatched when the dialog has opened after any animations.\n * @fires close {Event} Dispatched when the dialog is closing before any animations.\n * @fires closed {Event} Dispatched when the dialog has closed after any animations.\n * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking\n * on the scrim or pressing Escape.\n */\nexport class Dialog extends LitElement {\n  static {\n    requestUpdateOnAriaChange(Dialog);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Opens the dialog when set to `true` and closes it when set to `false`.\n   */\n  @property({type: Boolean})\n  get open() {\n    return this.isOpen;\n  }\n\n  set open(open: boolean) {\n    if (open === this.isOpen) {\n      return;\n    }\n\n    this.isOpen = open;\n    if (open) {\n      this.setAttribute('open', '');\n      this.show();\n    } else {\n      this.removeAttribute('open');\n      this.close();\n    }\n  }\n\n  /**\n   * Gets or sets the dialog's return value, usually to indicate which button\n   * a user pressed to close it.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue\n   */\n  @property({attribute: false}) returnValue = '';\n\n  /**\n   * The type of dialog for accessibility. Set this to `alert` to announce a\n   * dialog as an alert dialog.\n   */\n  @property() type?: 'alert';\n\n  /**\n   * Gets the opening animation for a dialog. Set to a new function to customize\n   * the animation.\n   */\n  getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;\n\n  /**\n   * Gets the closing animation for a dialog. Set to a new function to customize\n   * the animation.\n   */\n  getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;\n\n  private isOpen = false;\n  private isOpening = false;\n  // getIsConnectedPromise() immediately sets the resolve property.\n  private isConnectedPromiseResolve!: () => void;\n  private isConnectedPromise = this.getIsConnectedPromise();\n  @query('dialog') private readonly dialog!: HTMLDialogElement | null;\n  @query('.scrim') private readonly scrim!: HTMLDialogElement | null;\n  @query('.container') private readonly container!: HTMLDialogElement | null;\n  @query('.headline') private readonly headline!: HTMLDialogElement | null;\n  @query('.content') private readonly content!: HTMLDialogElement | null;\n  @query('.actions') private readonly actions!: HTMLDialogElement | null;\n  @state() private isAtScrollTop = false;\n  @state() private isAtScrollBottom = false;\n  @query('.scroller') private readonly scroller!: HTMLElement | null;\n  @query('.top.anchor') private readonly topAnchor!: HTMLElement | null;\n  @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement | null;\n  private nextClickIsFromContent = false;\n  private intersectionObserver?: IntersectionObserver;\n  // Dialogs should not be SSR'd while open, so we can just use runtime checks.\n  @state() private hasHeadline = false;\n  @state() private hasActions = false;\n  @state() private hasIcon = false;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('submit', this.handleSubmit);\n    }\n  }\n\n  /**\n   * Opens the dialog and fires a cancelable `open` event. After a dialog's\n   * animation, an `opened` event is fired.\n   *\n   * Add an `autocomplete` attribute to a child of the dialog that should\n   * receive focus after opening.\n   *\n   * @return A Promise that resolves after the animation is finished and the\n   *     `opened` event was fired.\n   */\n  async show() {\n    this.isOpening = true;\n    // Dialogs can be opened before being attached to the DOM, so we need to\n    // wait until we're connected before calling `showModal()`.\n    await this.isConnectedPromise;\n    await this.updateComplete;\n    const dialog = this.dialog!;\n    // Check if already opened or if `dialog.close()` was called while awaiting.\n    if (dialog.open || !this.isOpening) {\n      this.isOpening = false;\n      return;\n    }\n\n    const preventOpen = !this.dispatchEvent(\n      new Event('open', {cancelable: true}),\n    );\n    if (preventOpen) {\n      this.open = false;\n      return;\n    }\n\n    // All Material dialogs are modal.\n    dialog.showModal();\n    this.open = true;\n    // Reset scroll position if re-opening a dialog with the same content.\n    if (this.scroller) {\n      this.scroller.scrollTop = 0;\n    }\n    // Native modal dialogs ignore autofocus and instead force focus to the\n    // first focusable child. Override this behavior if there is a child with\n    // an autofocus attribute.\n    this.querySelector<HTMLElement>('[autofocus]')?.focus();\n\n    await this.animateDialog(this.getOpenAnimation());\n    this.dispatchEvent(new Event('opened'));\n    this.isOpening = false;\n  }\n\n  /**\n   * Closes the dialog and fires a cancelable `close` event. After a dialog's\n   * animation, a `closed` event is fired.\n   *\n   * @param returnValue A return value usually indicating which button was used\n   *     to close a dialog. If a dialog is canceled by clicking the scrim or\n   *     pressing Escape, it will not change the return value after closing.\n   * @return A Promise that resolves after the animation is finished and the\n   *     `closed` event was fired.\n   */\n  async close(returnValue = this.returnValue) {\n    this.isOpening = false;\n    if (!this.isConnected) {\n      // Disconnected dialogs do not fire close events or animate.\n      this.open = false;\n      return;\n    }\n\n    await this.updateComplete;\n    const dialog = this.dialog!;\n    // Check if already closed or if `dialog.show()` was called while awaiting.\n    if (!dialog.open || this.isOpening) {\n      this.open = false;\n      return;\n    }\n\n    const prevReturnValue = this.returnValue;\n    this.returnValue = returnValue;\n    const preventClose = !this.dispatchEvent(\n      new Event('close', {cancelable: true}),\n    );\n    if (preventClose) {\n      this.returnValue = prevReturnValue;\n      return;\n    }\n\n    await this.animateDialog(this.getCloseAnimation());\n    dialog.close(returnValue);\n    this.open = false;\n    this.dispatchEvent(new Event('closed'));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.isConnectedPromiseResolve();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.isConnectedPromise = this.getIsConnectedPromise();\n  }\n\n  protected override render() {\n    const scrollable =\n      this.open && !(this.isAtScrollTop && this.isAtScrollBottom);\n    const classes = {\n      'has-headline': this.hasHeadline,\n      'has-actions': this.hasActions,\n      'has-icon': this.hasIcon,\n      'scrollable': scrollable,\n      'show-top-divider': scrollable && !this.isAtScrollTop,\n      'show-bottom-divider': scrollable && !this.isAtScrollBottom,\n    };\n\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <div class=\"scrim\"></div>\n      <dialog\n        class=${classMap(classes)}\n        aria-label=${ariaLabel || nothing}\n        aria-labelledby=${this.hasHeadline ? 'headline' : nothing}\n        role=${this.type === 'alert' ? 'alertdialog' : nothing}\n        @cancel=${this.handleCancel}\n        @click=${this.handleDialogClick}\n        .returnValue=${this.returnValue || nothing}>\n        <div class=\"container\" @click=${this.handleContentClick}>\n          <div class=\"headline\">\n            <div class=\"icon\" aria-hidden=\"true\">\n              <slot name=\"icon\" @slotchange=${this.handleIconChange}></slot>\n            </div>\n            <h2 id=\"headline\" aria-hidden=${!this.hasHeadline || nothing}>\n              <slot\n                name=\"headline\"\n                @slotchange=${this.handleHeadlineChange}></slot>\n            </h2>\n            <md-divider></md-divider>\n          </div>\n          <div class=\"scroller\">\n            <div class=\"content\">\n              <div class=\"top anchor\"></div>\n              <slot name=\"content\"></slot>\n              <div class=\"bottom anchor\"></div>\n            </div>\n          </div>\n          <div class=\"actions\">\n            <md-divider></md-divider>\n            <slot name=\"actions\" @slotchange=${this.handleActionsChange}></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  }\n\n  protected override firstUpdated() {\n    this.intersectionObserver = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          this.handleAnchorIntersection(entry);\n        }\n      },\n      {root: this.scroller!},\n    );\n\n    this.intersectionObserver.observe(this.topAnchor!);\n    this.intersectionObserver.observe(this.bottomAnchor!);\n  }\n\n  private handleDialogClick() {\n    if (this.nextClickIsFromContent) {\n      // Avoid doing a layout calculation below if we know the click came from\n      // content.\n      this.nextClickIsFromContent = false;\n      return;\n    }\n\n    // Click originated on the backdrop. Native `<dialog>`s will not cancel,\n    // but Material dialogs do.\n    const preventDefault = !this.dispatchEvent(\n      new Event('cancel', {cancelable: true}),\n    );\n    if (preventDefault) {\n      return;\n    }\n\n    this.close();\n  }\n\n  private handleContentClick() {\n    this.nextClickIsFromContent = true;\n  }\n\n  private handleSubmit(event: SubmitEvent) {\n    const form = event.target as HTMLFormElement;\n    const {submitter} = event;\n    if (form.method !== 'dialog' || !submitter) {\n      return;\n    }\n\n    // Close reason is the submitter's value attribute, or the dialog's\n    // `returnValue` if there is no attribute.\n    this.close(submitter.getAttribute('value') ?? this.returnValue);\n  }\n\n  private handleCancel(event: Event) {\n    if (event.target !== this.dialog) {\n      // Ignore any cancel events dispatched by content.\n      return;\n    }\n\n    const preventDefault = !redispatchEvent(this, event);\n    // We always prevent default on the original dialog event since we'll\n    // animate closing it before it actually closes.\n    event.preventDefault();\n    if (preventDefault) {\n      return;\n    }\n\n    this.close();\n  }\n\n  private async animateDialog(animation: DialogAnimation) {\n    const {dialog, scrim, container, headline, content, actions} = this;\n    if (!dialog || !scrim || !container || !headline || !content || !actions) {\n      return;\n    }\n\n    const {\n      container: containerAnimate,\n      dialog: dialogAnimate,\n      scrim: scrimAnimate,\n      headline: headlineAnimate,\n      content: contentAnimate,\n      actions: actionsAnimate,\n    } = animation;\n\n    const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [\n      [dialog, dialogAnimate ?? []],\n      [scrim, scrimAnimate ?? []],\n      [container, containerAnimate ?? []],\n      [headline, headlineAnimate ?? []],\n      [content, contentAnimate ?? []],\n      [actions, actionsAnimate ?? []],\n    ];\n\n    const animations: Animation[] = [];\n    for (const [element, animation] of elementAndAnimation) {\n      for (const animateArgs of animation) {\n        animations.push(element.animate(...animateArgs));\n      }\n    }\n\n    await Promise.all(animations.map((animation) => animation.finished));\n  }\n\n  private handleHeadlineChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasHeadline = slot.assignedElements().length > 0;\n  }\n\n  private handleActionsChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasActions = slot.assignedElements().length > 0;\n  }\n\n  private handleIconChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasIcon = slot.assignedElements().length > 0;\n  }\n\n  private handleAnchorIntersection(entry: IntersectionObserverEntry) {\n    const {target, isIntersecting} = entry;\n    if (target === this.topAnchor) {\n      this.isAtScrollTop = isIntersecting;\n    }\n\n    if (target === this.bottomAnchor) {\n      this.isAtScrollBottom = isIntersecting;\n    }\n  }\n\n  private getIsConnectedPromise() {\n    return new Promise<void>((resolve) => {\n      this.isConnectedPromiseResolve = resolve;\n    });\n  }\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACxD,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAC,eAAe,EAAC,MAAM,2CAA2C,CAAC;AAE1E,OAAO,EACL,8BAA8B,EAC9B,6BAA6B,GAG9B,MAAM,iBAAiB,CAAC;AAEzB;;;;;;;;;GASG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAKpC;;OAEG;IAEH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,IAAI,CAAC,IAAa;QACpB,IAAI,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;YACxB,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;IACH,CAAC;IAkED;QACE,KAAK,EAAE,CAAC;QAjEV;;;;;WAKG;QAC2B,gBAAW,GAAG,EAAE,CAAC;QAQ/C;;;WAGG;QACH,qBAAgB,GAAG,GAAG,EAAE,CAAC,6BAA6B,CAAC;QAEvD;;;WAGG;QACH,sBAAiB,GAAG,GAAG,EAAE,CAAC,8BAA8B,CAAC;QAEjD,WAAM,GAAG,KAAK,CAAC;QACf,cAAS,GAAG,KAAK,CAAC;QAGlB,uBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAOzC,kBAAa,GAAG,KAAK,CAAC;QACtB,qBAAgB,GAAG,KAAK,CAAC;QAIlC,2BAAsB,GAAG,KAAK,CAAC;QAEvC,6EAA6E;QAC5D,gBAAW,GAAG,KAAK,CAAC;QACpB,eAAU,GAAG,KAAK,CAAC;QACnB,YAAO,GAAG,KAAK,CAAC;QAEjC,oEAAoE;QACpE,4EAA4E;QAC5E,8EAA8E;QAC9E,+DAA+D;QAC/D,EAAE;QACF,uEAAuE;QACvE,yCAAyC;QACzC,EAAE;QACF,oBAAoB;QACpB,kEAAkE;QAClE,6EAA6E;QAC7E,6EAA6E;QAC7E,YAAY;QACJ,+BAA0B,GAAG,KAAK,CAAC;QAIzC,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAEnD,kEAAkE;YAClE,kBAAkB;YAClB,mEAAmE;YACnE,EAAE;YACF,gEAAgE;YAChE,wEAAwE;YACxE,sEAAsE;YACtE,kEAAkE;YAClE,qEAAqE;YACrE,gCAAgC;YAChC,EAAE;YACF,0EAA0E;YAC1E,gBAAgB;YAChB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBAClC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;YACvB,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;gBACjC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;YACtB,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED;;;;;;;;;OASG;IACH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,wEAAwE;QACxE,2DAA2D;QAC3D,MAAM,IAAI,CAAC,kBAAkB,CAAC;QAC9B,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAO,CAAC;QAC5B,4EAA4E;QAC5E,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,OAAO;SACR;QAED,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,aAAa,CACrC,IAAI,KAAK,CAAC,MAAM,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CACtC,CAAC;QACF,IAAI,WAAW,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,OAAO;SACR;QAED,kCAAkC;QAClC,MAAM,CAAC,SAAS,EAAE,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,sEAAsE;QACtE,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,CAAC,CAAC;SAC7B;QACD,uEAAuE;QACvE,yEAAyE;QACzE,0BAA0B;QAC1B,IAAI,CAAC,aAAa,CAAc,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;QAExD,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED;;;;;;;;;OASG;IACH,KAAK,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW;QACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,4DAA4D;YAC5D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,OAAO;SACR;QAED,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAO,CAAC;QAC5B,2EAA2E;QAC3E,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YAClC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,OAAO;SACR;QAED,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC;QACzC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,aAAa,CACtC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CACvC,CAAC;QACF,IAAI,YAAY,EAAE;YAChB,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;QACnD,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IACzD,CAAC;IAEkB,MAAM;QACvB,MAAM,UAAU,GACd,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC9D,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI,CAAC,WAAW;YAChC,aAAa,EAAE,IAAI,CAAC,UAAU;YAC9B,UAAU,EAAE,IAAI,CAAC,OAAO;YACxB,YAAY,EAAE,UAAU;YACxB,kBAAkB,EAAE,UAAU,IAAI,CAAC,IAAI,CAAC,aAAa;YACrD,qBAAqB,EAAE,UAAU,IAAI,CAAC,IAAI,CAAC,gBAAgB;SAC5D,CAAC;QAEF,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,OAAO,CAAC;qBACZ,SAAS,IAAI,OAAO;0BACf,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;eAClD,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;kBAC5C,IAAI,CAAC,YAAY;iBAClB,IAAI,CAAC,iBAAiB;iBACtB,IAAI,CAAC,WAAW;mBACd,IAAI,CAAC,aAAa;uBACd,IAAI,CAAC,WAAW,IAAI,OAAO;wCACV,IAAI,CAAC,kBAAkB;;;8CAGjB,IAAI,CAAC,gBAAgB;;4CAEvB,CAAC,IAAI,CAAC,WAAW,IAAI,OAAO;;;8BAG1C,IAAI,CAAC,oBAAoB;;;;;;;;;;;;;+CAaR,IAAI,CAAC,mBAAmB;;;;KAIlE,CAAC;IACJ,CAAC;IAEkB,YAAY;QAC7B,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAClD,CAAC,OAAO,EAAE,EAAE;YACV,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;aACtC;QACH,CAAC,EACD,EAAC,IAAI,EAAE,IAAI,CAAC,QAAS,EAAC,CACvB,CAAC;QAEF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,SAAU,CAAC,CAAC;QACnD,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAa,CAAC,CAAC;IACxD,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,wEAAwE;YACxE,WAAW;YACX,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;YACpC,OAAO;SACR;QAED,wEAAwE;QACxE,2BAA2B;QAC3B,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,aAAa,CACxC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CACxC,CAAC;QACF,IAAI,cAAc,EAAE;YAClB,OAAO;SACR;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;IACrC,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,MAAM,EAAC,SAAS,EAAC,GAAG,KAAK,CAAC;QAC1B,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,CAAC,SAAS,EAAE;YAC1C,OAAO;SACR;QAED,mEAAmE;QACnE,0CAA0C;QAC1C,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC;IAClE,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE;YAChC,kDAAkD;YAClD,OAAO;SACR;QAED,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;QACxC,MAAM,cAAc,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACrD,qEAAqE;QACrE,gDAAgD;QAChD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,cAAc,EAAE;YAClB,OAAO;SACR;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,0BAA0B,EAAE;YACpC,OAAO;SACR;QAED,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;QACxC,IAAI,CAAC,MAAM,EAAE,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IACtE,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC1B,OAAO;SACR;QAED,qEAAqE;QACrE,mEAAmE;QACnE,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC;QACvC,sEAAsE;QACtE,kBAAkB;QAClB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,KAAK,CAAC,aAAa,CAAC,SAA0B;QACpD,MAAM,EAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC;QACpE,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;YACxE,OAAO;SACR;QAED,MAAM,EACJ,SAAS,EAAE,gBAAgB,EAC3B,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,cAAc,GACxB,GAAG,SAAS,CAAC;QAEd,MAAM,mBAAmB,GAA4C;YACnE,CAAC,MAAM,EAAE,aAAa,IAAI,EAAE,CAAC;YAC7B,CAAC,KAAK,EAAE,YAAY,IAAI,EAAE,CAAC;YAC3B,CAAC,SAAS,EAAE,gBAAgB,IAAI,EAAE,CAAC;YACnC,CAAC,QAAQ,EAAE,eAAe,IAAI,EAAE,CAAC;YACjC,CAAC,OAAO,EAAE,cAAc,IAAI,EAAE,CAAC;YAC/B,CAAC,OAAO,EAAE,cAAc,IAAI,EAAE,CAAC;SAChC,CAAC;QAEF,MAAM,UAAU,GAAgB,EAAE,CAAC;QACnC,KAAK,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,mBAAmB,EAAE;YACtD,KAAK,MAAM,WAAW,IAAI,SAAS,EAAE;gBACnC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC;aAClD;SACF;QAED,MAAM,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;IACvE,CAAC;IAEO,oBAAoB,CAAC,KAAY;QACvC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IACxD,CAAC;IAEO,mBAAmB,CAAC,KAAY;QACtC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,CAAC;IAEO,gBAAgB,CAAC,KAAY;QACnC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC7C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IACpD,CAAC;IAEO,wBAAwB,CAAC,KAAgC;QAC/D,MAAM,EAAC,MAAM,EAAE,cAAc,EAAC,GAAG,KAAK,CAAC;QACvC,IAAI,MAAM,KAAK,IAAI,CAAC,SAAS,EAAE;YAC7B,IAAI,CAAC,aAAa,GAAG,cAAc,CAAC;SACrC;QAED,IAAI,MAAM,KAAK,IAAI,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAC;SACxC;IACH,CAAC;IAEO,qBAAqB;QAC3B,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;YACnC,IAAI,CAAC,yBAAyB,GAAG,OAAO,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;CACF;AA5aC;IACE,yBAAyB,CAAC,MAAM,CAAC,CAAC;AACpC,CAAC,GAAA,CAAA;AAMD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;kCAGzB;AAuB6B;IAA7B,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;2CAAkB;AAMnC;IAAX,QAAQ,EAAE;oCAAgB;AAmBO;IAAjC,KAAK,CAAC,QAAQ,CAAC;sCAAoD;AAClC;IAAjC,KAAK,CAAC,QAAQ,CAAC;qCAAmD;AAC7B;IAArC,KAAK,CAAC,YAAY,CAAC;yCAAuD;AACtC;IAApC,KAAK,CAAC,WAAW,CAAC;wCAAsD;AACrC;IAAnC,KAAK,CAAC,UAAU,CAAC;uCAAqD;AACnC;IAAnC,KAAK,CAAC,UAAU,CAAC;uCAAqD;AACtD;IAAhB,KAAK,EAAE;6CAA+B;AACtB;IAAhB,KAAK,EAAE;gDAAkC;AACL;IAApC,KAAK,CAAC,WAAW,CAAC;wCAAgD;AAC5B;IAAtC,KAAK,CAAC,aAAa,CAAC;yCAAiD;AAC5B;IAAzC,KAAK,CAAC,gBAAgB,CAAC;4CAAoD;AAI3D;IAAhB,KAAK,EAAE;2CAA6B;AACpB;IAAhB,KAAK,EAAE;0CAA4B;AACnB;IAAhB,KAAK,EAAE;uCAAyB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../divider/divider.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\n\nimport {\n  DIALOG_DEFAULT_CLOSE_ANIMATION,\n  DIALOG_DEFAULT_OPEN_ANIMATION,\n  DialogAnimation,\n  DialogAnimationArgs,\n} from './animations.js';\n\n/**\n * A dialog component.\n *\n * @fires open {Event} Dispatched when the dialog is opening before any animations.\n * @fires opened {Event} Dispatched when the dialog has opened after any animations.\n * @fires close {Event} Dispatched when the dialog is closing before any animations.\n * @fires closed {Event} Dispatched when the dialog has closed after any animations.\n * @fires cancel {Event} Dispatched when the dialog has been canceled by clicking\n * on the scrim or pressing Escape.\n */\nexport class Dialog extends LitElement {\n  static {\n    requestUpdateOnAriaChange(Dialog);\n  }\n\n  /**\n   * Opens the dialog when set to `true` and closes it when set to `false`.\n   */\n  @property({type: Boolean})\n  get open() {\n    return this.isOpen;\n  }\n\n  set open(open: boolean) {\n    if (open === this.isOpen) {\n      return;\n    }\n\n    this.isOpen = open;\n    if (open) {\n      this.setAttribute('open', '');\n      this.show();\n    } else {\n      this.removeAttribute('open');\n      this.close();\n    }\n  }\n\n  /**\n   * Gets or sets the dialog's return value, usually to indicate which button\n   * a user pressed to close it.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue\n   */\n  @property({attribute: false}) returnValue = '';\n\n  /**\n   * The type of dialog for accessibility. Set this to `alert` to announce a\n   * dialog as an alert dialog.\n   */\n  @property() type?: 'alert';\n\n  /**\n   * Gets the opening animation for a dialog. Set to a new function to customize\n   * the animation.\n   */\n  getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;\n\n  /**\n   * Gets the closing animation for a dialog. Set to a new function to customize\n   * the animation.\n   */\n  getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;\n\n  private isOpen = false;\n  private isOpening = false;\n  // getIsConnectedPromise() immediately sets the resolve property.\n  private isConnectedPromiseResolve!: () => void;\n  private isConnectedPromise = this.getIsConnectedPromise();\n  @query('dialog') private readonly dialog!: HTMLDialogElement | null;\n  @query('.scrim') private readonly scrim!: HTMLDialogElement | null;\n  @query('.container') private readonly container!: HTMLDialogElement | null;\n  @query('.headline') private readonly headline!: HTMLDialogElement | null;\n  @query('.content') private readonly content!: HTMLDialogElement | null;\n  @query('.actions') private readonly actions!: HTMLDialogElement | null;\n  @state() private isAtScrollTop = false;\n  @state() private isAtScrollBottom = false;\n  @query('.scroller') private readonly scroller!: HTMLElement | null;\n  @query('.top.anchor') private readonly topAnchor!: HTMLElement | null;\n  @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement | null;\n  private nextClickIsFromContent = false;\n  private intersectionObserver?: IntersectionObserver;\n  // Dialogs should not be SSR'd while open, so we can just use runtime checks.\n  @state() private hasHeadline = false;\n  @state() private hasActions = false;\n  @state() private hasIcon = false;\n\n  // See https://bugs.chromium.org/p/chromium/issues/detail?id=1512224\n  // Chrome v120 has a bug where escape keys do not trigger cancels. If we get\n  // a dialog \"close\" event that is triggered without a \"cancel\" after an escape\n  // keydown, then we need to manually trigger our closing logic.\n  //\n  // This bug occurs when pressing escape to close a dialog without first\n  // interacting with the dialog's content.\n  //\n  // Cleanup tracking:\n  // https://github.com/material-components/material-web/issues/5330\n  // This can be removed when full CloseWatcher support added and the above bug\n  // in Chromium is fixed to fire 'cancel' with one escape press and close with\n  // multiple.\n  private escapePressedWithoutCancel = false;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('submit', this.handleSubmit);\n\n      // We do not use `delegatesFocus: true` due to a Chromium bug with\n      // selecting text.\n      // See https://bugs.chromium.org/p/chromium/issues/detail?id=950357\n      //\n      // Material requires using focus trapping within the dialog (see\n      // b/314840853 for the bug to add it). This would normally mean we don't\n      // care about delegating focus since the `<dialog>` never receives it.\n      // However, we still need to handle situations when a user has not\n      // provided an focusable child in the content. When that happens, the\n      // `<dialog>` itself is focused.\n      //\n      // Listen to focus/blur instead of focusin/focusout since those can bubble\n      // from content.\n      this.addEventListener('focus', () => {\n        this.dialog?.focus();\n      });\n      this.addEventListener('blur', () => {\n        this.dialog?.blur();\n      });\n    }\n  }\n\n  /**\n   * Opens the dialog and fires a cancelable `open` event. After a dialog's\n   * animation, an `opened` event is fired.\n   *\n   * Add an `autocomplete` attribute to a child of the dialog that should\n   * receive focus after opening.\n   *\n   * @return A Promise that resolves after the animation is finished and the\n   *     `opened` event was fired.\n   */\n  async show() {\n    this.isOpening = true;\n    // Dialogs can be opened before being attached to the DOM, so we need to\n    // wait until we're connected before calling `showModal()`.\n    await this.isConnectedPromise;\n    await this.updateComplete;\n    const dialog = this.dialog!;\n    // Check if already opened or if `dialog.close()` was called while awaiting.\n    if (dialog.open || !this.isOpening) {\n      this.isOpening = false;\n      return;\n    }\n\n    const preventOpen = !this.dispatchEvent(\n      new Event('open', {cancelable: true}),\n    );\n    if (preventOpen) {\n      this.open = false;\n      return;\n    }\n\n    // All Material dialogs are modal.\n    dialog.showModal();\n    this.open = true;\n    // Reset scroll position if re-opening a dialog with the same content.\n    if (this.scroller) {\n      this.scroller.scrollTop = 0;\n    }\n    // Native modal dialogs ignore autofocus and instead force focus to the\n    // first focusable child. Override this behavior if there is a child with\n    // an autofocus attribute.\n    this.querySelector<HTMLElement>('[autofocus]')?.focus();\n\n    await this.animateDialog(this.getOpenAnimation());\n    this.dispatchEvent(new Event('opened'));\n    this.isOpening = false;\n  }\n\n  /**\n   * Closes the dialog and fires a cancelable `close` event. After a dialog's\n   * animation, a `closed` event is fired.\n   *\n   * @param returnValue A return value usually indicating which button was used\n   *     to close a dialog. If a dialog is canceled by clicking the scrim or\n   *     pressing Escape, it will not change the return value after closing.\n   * @return A Promise that resolves after the animation is finished and the\n   *     `closed` event was fired.\n   */\n  async close(returnValue = this.returnValue) {\n    this.isOpening = false;\n    if (!this.isConnected) {\n      // Disconnected dialogs do not fire close events or animate.\n      this.open = false;\n      return;\n    }\n\n    await this.updateComplete;\n    const dialog = this.dialog!;\n    // Check if already closed or if `dialog.show()` was called while awaiting.\n    if (!dialog.open || this.isOpening) {\n      this.open = false;\n      return;\n    }\n\n    const prevReturnValue = this.returnValue;\n    this.returnValue = returnValue;\n    const preventClose = !this.dispatchEvent(\n      new Event('close', {cancelable: true}),\n    );\n    if (preventClose) {\n      this.returnValue = prevReturnValue;\n      return;\n    }\n\n    await this.animateDialog(this.getCloseAnimation());\n    dialog.close(returnValue);\n    this.open = false;\n    this.dispatchEvent(new Event('closed'));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.isConnectedPromiseResolve();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.isConnectedPromise = this.getIsConnectedPromise();\n  }\n\n  protected override render() {\n    const scrollable =\n      this.open && !(this.isAtScrollTop && this.isAtScrollBottom);\n    const classes = {\n      'has-headline': this.hasHeadline,\n      'has-actions': this.hasActions,\n      'has-icon': this.hasIcon,\n      'scrollable': scrollable,\n      'show-top-divider': scrollable && !this.isAtScrollTop,\n      'show-bottom-divider': scrollable && !this.isAtScrollBottom,\n    };\n\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <div class=\"scrim\"></div>\n      <dialog\n        class=${classMap(classes)}\n        aria-label=${ariaLabel || nothing}\n        aria-labelledby=${this.hasHeadline ? 'headline' : nothing}\n        role=${this.type === 'alert' ? 'alertdialog' : nothing}\n        @cancel=${this.handleCancel}\n        @click=${this.handleDialogClick}\n        @close=${this.handleClose}\n        @keydown=${this.handleKeydown}\n        .returnValue=${this.returnValue || nothing}>\n        <div class=\"container\" @click=${this.handleContentClick}>\n          <div class=\"headline\">\n            <div class=\"icon\" aria-hidden=\"true\">\n              <slot name=\"icon\" @slotchange=${this.handleIconChange}></slot>\n            </div>\n            <h2 id=\"headline\" aria-hidden=${!this.hasHeadline || nothing}>\n              <slot\n                name=\"headline\"\n                @slotchange=${this.handleHeadlineChange}></slot>\n            </h2>\n            <md-divider></md-divider>\n          </div>\n          <div class=\"scroller\">\n            <div class=\"content\">\n              <div class=\"top anchor\"></div>\n              <slot name=\"content\"></slot>\n              <div class=\"bottom anchor\"></div>\n            </div>\n          </div>\n          <div class=\"actions\">\n            <md-divider></md-divider>\n            <slot name=\"actions\" @slotchange=${this.handleActionsChange}></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  }\n\n  protected override firstUpdated() {\n    this.intersectionObserver = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          this.handleAnchorIntersection(entry);\n        }\n      },\n      {root: this.scroller!},\n    );\n\n    this.intersectionObserver.observe(this.topAnchor!);\n    this.intersectionObserver.observe(this.bottomAnchor!);\n  }\n\n  private handleDialogClick() {\n    if (this.nextClickIsFromContent) {\n      // Avoid doing a layout calculation below if we know the click came from\n      // content.\n      this.nextClickIsFromContent = false;\n      return;\n    }\n\n    // Click originated on the backdrop. Native `<dialog>`s will not cancel,\n    // but Material dialogs do.\n    const preventDefault = !this.dispatchEvent(\n      new Event('cancel', {cancelable: true}),\n    );\n    if (preventDefault) {\n      return;\n    }\n\n    this.close();\n  }\n\n  private handleContentClick() {\n    this.nextClickIsFromContent = true;\n  }\n\n  private handleSubmit(event: SubmitEvent) {\n    const form = event.target as HTMLFormElement;\n    const {submitter} = event;\n    if (form.method !== 'dialog' || !submitter) {\n      return;\n    }\n\n    // Close reason is the submitter's value attribute, or the dialog's\n    // `returnValue` if there is no attribute.\n    this.close(submitter.getAttribute('value') ?? this.returnValue);\n  }\n\n  private handleCancel(event: Event) {\n    if (event.target !== this.dialog) {\n      // Ignore any cancel events dispatched by content.\n      return;\n    }\n\n    this.escapePressedWithoutCancel = false;\n    const preventDefault = !redispatchEvent(this, event);\n    // We always prevent default on the original dialog event since we'll\n    // animate closing it before it actually closes.\n    event.preventDefault();\n    if (preventDefault) {\n      return;\n    }\n\n    this.close();\n  }\n\n  private handleClose() {\n    if (!this.escapePressedWithoutCancel) {\n      return;\n    }\n\n    this.escapePressedWithoutCancel = false;\n    this.dialog?.dispatchEvent(new Event('cancel', {cancelable: true}));\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key !== 'Escape') {\n      return;\n    }\n\n    // An escape key was pressed. If a \"close\" event fires next without a\n    // \"cancel\" event first, then we know we're in the Chrome v120 bug.\n    this.escapePressedWithoutCancel = true;\n    // Wait a full task for the cancel/close event listeners to fire, then\n    // reset the flag.\n    setTimeout(() => {\n      this.escapePressedWithoutCancel = false;\n    });\n  }\n\n  private async animateDialog(animation: DialogAnimation) {\n    const {dialog, scrim, container, headline, content, actions} = this;\n    if (!dialog || !scrim || !container || !headline || !content || !actions) {\n      return;\n    }\n\n    const {\n      container: containerAnimate,\n      dialog: dialogAnimate,\n      scrim: scrimAnimate,\n      headline: headlineAnimate,\n      content: contentAnimate,\n      actions: actionsAnimate,\n    } = animation;\n\n    const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [\n      [dialog, dialogAnimate ?? []],\n      [scrim, scrimAnimate ?? []],\n      [container, containerAnimate ?? []],\n      [headline, headlineAnimate ?? []],\n      [content, contentAnimate ?? []],\n      [actions, actionsAnimate ?? []],\n    ];\n\n    const animations: Animation[] = [];\n    for (const [element, animation] of elementAndAnimation) {\n      for (const animateArgs of animation) {\n        animations.push(element.animate(...animateArgs));\n      }\n    }\n\n    await Promise.all(animations.map((animation) => animation.finished));\n  }\n\n  private handleHeadlineChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasHeadline = slot.assignedElements().length > 0;\n  }\n\n  private handleActionsChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasActions = slot.assignedElements().length > 0;\n  }\n\n  private handleIconChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasIcon = slot.assignedElements().length > 0;\n  }\n\n  private handleAnchorIntersection(entry: IntersectionObserverEntry) {\n    const {target, isIntersecting} = entry;\n    if (target === this.topAnchor) {\n      this.isAtScrollTop = isIntersecting;\n    }\n\n    if (target === this.bottomAnchor) {\n      this.isAtScrollBottom = isIntersecting;\n    }\n  }\n\n  private getIsConnectedPromise() {\n    return new Promise<void>((resolve) => {\n      this.isConnectedPromiseResolve = resolve;\n    });\n  }\n}\n"]}

package/field/internal/field.js

@@ -43,10 +43,15 @@ export class Field extends LitElement {
         this.disableTransitions = false;
     }
     get counterText() {
-        if (this.count < 0 || this.max < 0) {
+        // Count and max are typed as number, but can be set to null when Lit removes
+        // their attributes. These getters coerce back to a number for calculations.
+        const countAsNumber = this.count ?? -1;
+        const maxAsNumber = this.max ?? -1;
+        // Counter does not show if count is negative, or max is negative or 0.
+        if (countAsNumber < 0 || maxAsNumber <= 0) {
             return '';
         }
-        return `${this.count} / ${this.max}`;
+        return `${countAsNumber} / ${maxAsNumber}`;
     }
     get supportingOrErrorText() {
         return this.error && this.errorText ? this.errorText : this.supportingText;

package/field/internal/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sourceRoot":"","sources":["field.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 {\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  render,\n  TemplateResult,\n} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {EASING} from '../../internal/motion/animation.js';\n\n/**\n * A field component.\n */\nexport class Field extends LitElement {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) error = false;\n  @property({type: Boolean}) focused = false;\n  @property() label = '';\n  @property({type: Boolean}) populated = false;\n  @property({type: Boolean}) required = false;\n  @property({type: Boolean}) resizable = false;\n  @property({attribute: 'supporting-text'}) supportingText = '';\n  @property({attribute: 'error-text'}) errorText = '';\n  @property({type: Number}) count = -1;\n  @property({type: Number}) max = -1;\n\n  /**\n   * Whether or not the field has leading content.\n   */\n  @property({type: Boolean, attribute: 'has-start'}) hasStart = false;\n\n  /**\n   * Whether or not the field has trailing content.\n   */\n  @property({type: Boolean, attribute: 'has-end'}) hasEnd = false;\n\n  @queryAssignedElements({slot: 'aria-describedby'})\n  private readonly slottedAriaDescribedBy!: HTMLElement[];\n\n  private get counterText() {\n    if (this.count < 0 || this.max < 0) {\n      return '';\n    }\n\n    return `${this.count} / ${this.max}`;\n  }\n\n  private get supportingOrErrorText() {\n    return this.error && this.errorText ? this.errorText : this.supportingText;\n  }\n\n  @state() private isAnimating = false;\n  private labelAnimation?: Animation;\n  /**\n   * When set to true, the error text's `role=\"alert\"` will be removed, then\n   * re-added after an animation frame. This will re-announce an error message\n   * to screen readers.\n   */\n  @state() private refreshErrorAlert = false;\n  @state() private disableTransitions = false;\n  @query('.label.floating')\n  private readonly floatingLabelEl!: HTMLElement | null;\n  @query('.label.resting') private readonly restingLabelEl!: HTMLElement | null;\n  @query('.container') private readonly containerEl!: HTMLElement | null;\n\n  /**\n   * Re-announces the field's error supporting text to screen readers.\n   *\n   * Error text announces to screen readers anytime it is visible and changes.\n   * Use the method to re-announce the message when the text has not changed,\n   * but announcement is still needed (such as for `reportValidity()`).\n   */\n  reannounceError() {\n    this.refreshErrorAlert = true;\n  }\n\n  protected override update(props: PropertyValues<Field>) {\n    // Client-side property updates\n    const isDisabledChanging =\n      props.has('disabled') && props.get('disabled') !== undefined;\n    if (isDisabledChanging) {\n      this.disableTransitions = true;\n    }\n\n    // When disabling, remove focus styles if focused.\n    if (this.disabled && this.focused) {\n      props.set('focused', true);\n      this.focused = false;\n    }\n\n    // Animate if focused or populated change.\n    this.animateLabelIfNeeded({\n      wasFocused: props.get('focused'),\n      wasPopulated: props.get('populated'),\n    });\n\n    super.update(props);\n  }\n\n  protected override render() {\n    const floatingLabel = this.renderLabel(/*isFloating*/ true);\n    const restingLabel = this.renderLabel(/*isFloating*/ false);\n    const outline = this.renderOutline?.(floatingLabel);\n    const classes = {\n      'disabled': this.disabled,\n      'disable-transitions': this.disableTransitions,\n      'error': this.error && !this.disabled,\n      'focused': this.focused,\n      'with-start': this.hasStart,\n      'with-end': this.hasEnd,\n      'populated': this.populated,\n      'resizable': this.resizable,\n      'required': this.required,\n      'no-label': !this.label,\n    };\n\n    return html`\n      <div class=\"field ${classMap(classes)}\">\n        <div class=\"container-overflow\">\n          ${this.renderBackground?.()} ${this.renderIndicator?.()} ${outline}\n          <div class=\"container\">\n            <div class=\"start\">\n              <slot name=\"start\"></slot>\n            </div>\n            <div class=\"middle\">\n              <div class=\"label-wrapper\">\n                ${restingLabel} ${outline ? nothing : floatingLabel}\n              </div>\n              <div class=\"content\">\n                <slot></slot>\n              </div>\n            </div>\n            <div class=\"end\">\n              <slot name=\"end\"></slot>\n            </div>\n          </div>\n        </div>\n        ${this.renderSupportingText()}\n      </div>\n    `;\n  }\n\n  protected override updated(changed: PropertyValues<Field>) {\n    if (\n      changed.has('supportingText') ||\n      changed.has('errorText') ||\n      changed.has('count') ||\n      changed.has('max')\n    ) {\n      this.updateSlottedAriaDescribedBy();\n    }\n\n    if (this.refreshErrorAlert) {\n      // The past render cycle removed the role=\"alert\" from the error message.\n      // Re-add it after an animation frame to re-announce the error.\n      requestAnimationFrame(() => {\n        this.refreshErrorAlert = false;\n      });\n    }\n\n    if (this.disableTransitions) {\n      requestAnimationFrame(() => {\n        this.disableTransitions = false;\n      });\n    }\n  }\n\n  protected renderBackground?(): TemplateResult;\n  protected renderIndicator?(): TemplateResult;\n  protected renderOutline?(floatingLabel: unknown): TemplateResult;\n\n  private renderSupportingText() {\n    const {supportingOrErrorText, counterText} = this;\n    if (!supportingOrErrorText && !counterText) {\n      return nothing;\n    }\n\n    // Always render the supporting text span so that our `space-around`\n    // container puts the counter at the end.\n    const start = html`<span>${supportingOrErrorText}</span>`;\n    // Conditionally render counter so we don't render the extra `gap`.\n    // TODO(b/244473435): add aria-label and announcements\n    const end = counterText\n      ? html`<span class=\"counter\">${counterText}</span>`\n      : nothing;\n\n    // Announce if there is an error and error text visible.\n    // If refreshErrorAlert is true, do not announce. This will remove the\n    // role=\"alert\" attribute. Another render cycle will happen after an\n    // animation frame to re-add the role.\n    const shouldErrorAnnounce =\n      this.error && this.errorText && !this.refreshErrorAlert;\n    const role = shouldErrorAnnounce ? 'alert' : nothing;\n    return html`\n      <div class=\"supporting-text\" role=${role}>${start}${end}</div>\n      <slot\n        name=\"aria-describedby\"\n        @slotchange=${this.updateSlottedAriaDescribedBy}></slot>\n    `;\n  }\n\n  private updateSlottedAriaDescribedBy() {\n    for (const element of this.slottedAriaDescribedBy) {\n      render(html`${this.supportingOrErrorText} ${this.counterText}`, element);\n      element.setAttribute('hidden', '');\n    }\n  }\n\n  private renderLabel(isFloating: boolean) {\n    if (!this.label) {\n      return nothing;\n    }\n\n    let visible: boolean;\n    if (isFloating) {\n      // Floating label is visible when focused/populated or when animating.\n      visible = this.focused || this.populated || this.isAnimating;\n    } else {\n      // Resting label is visible when unfocused. It is never visible while\n      // animating.\n      visible = !this.focused && !this.populated && !this.isAnimating;\n    }\n\n    const classes = {\n      'hidden': !visible,\n      'floating': isFloating,\n      'resting': !isFloating,\n    };\n\n    // Add '*' if a label is present and the field is required\n    const labelText = `${this.label}${this.required ? '*' : ''}`;\n\n    return html`\n      <span class=\"label ${classMap(classes)}\" aria-hidden=${!visible}\n        >${labelText}</span\n      >\n    `;\n  }\n\n  private animateLabelIfNeeded({\n    wasFocused,\n    wasPopulated,\n  }: {\n    wasFocused?: boolean;\n    wasPopulated?: boolean;\n  }) {\n    if (!this.label) {\n      return;\n    }\n\n    wasFocused ??= this.focused;\n    wasPopulated ??= this.populated;\n    const wasFloating = wasFocused || wasPopulated;\n    const shouldBeFloating = this.focused || this.populated;\n    if (wasFloating === shouldBeFloating) {\n      return;\n    }\n\n    this.isAnimating = true;\n    this.labelAnimation?.cancel();\n\n    // Only one label is visible at a time for clearer text rendering.\n    // The floating label is visible and used during animation. At the end of\n    // the animation, it will either remain visible (if floating) or hide and\n    // the resting label will be shown.\n    //\n    // We don't use forward filling because if the dimensions of the text field\n    // change (leading icon removed, density changes, etc), then the animation\n    // will be inaccurate.\n    //\n    // Re-calculating the animation each time will prevent any visual glitches\n    // from appearing.\n    // TODO(b/241113345): use animation tokens\n    this.labelAnimation = this.floatingLabelEl?.animate(\n      this.getLabelKeyframes(),\n      {duration: 150, easing: EASING.STANDARD},\n    );\n\n    this.labelAnimation?.addEventListener('finish', () => {\n      // At the end of the animation, update the visible label.\n      this.isAnimating = false;\n    });\n  }\n\n  private getLabelKeyframes() {\n    const {floatingLabelEl, restingLabelEl} = this;\n    if (!floatingLabelEl || !restingLabelEl) {\n      return [];\n    }\n\n    const {\n      x: floatingX,\n      y: floatingY,\n      height: floatingHeight,\n    } = floatingLabelEl.getBoundingClientRect();\n    const {\n      x: restingX,\n      y: restingY,\n      height: restingHeight,\n    } = restingLabelEl.getBoundingClientRect();\n    const floatingScrollWidth = floatingLabelEl.scrollWidth;\n    const restingScrollWidth = restingLabelEl.scrollWidth;\n    // Scale by width ratio instead of font size since letter-spacing will scale\n    // incorrectly. Using the width we can better approximate the adjusted\n    // scale and compensate for tracking and overflow.\n    // (use scrollWidth instead of width to account for clipped labels)\n    const scale = restingScrollWidth / floatingScrollWidth;\n    const xDelta = restingX - floatingX;\n    // The line-height of the resting and floating label are different. When\n    // we move the floating label down to the resting label's position, it won't\n    // exactly match because of this. We need to adjust by half of what the\n    // final scaled floating label's height will be.\n    const yDelta =\n      restingY -\n      floatingY +\n      Math.round((restingHeight - floatingHeight * scale) / 2);\n\n    // Create the two transforms: floating to resting (using the calculations\n    // above), and resting to floating (re-setting the transform to initial\n    // values).\n    const restTransform = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;\n    const floatTransform = `translateX(0) translateY(0) scale(1)`;\n\n    // Constrain the floating labels width to a scaled percentage of the\n    // resting label's width. This will prevent long clipped labels from\n    // overflowing the container.\n    const restingClientWidth = restingLabelEl.clientWidth;\n    const isRestingClipped = restingScrollWidth > restingClientWidth;\n    const width = isRestingClipped ? `${restingClientWidth / scale}px` : '';\n    if (this.focused || this.populated) {\n      return [\n        {transform: restTransform, width},\n        {transform: floatTransform, width},\n      ];\n    }\n\n    return [\n      {transform: floatTransform, width},\n      {transform: restTransform, width},\n    ];\n  }\n\n  getSurfacePositionClientRect() {\n    return this.containerEl!.getBoundingClientRect();\n  }\n}\n"]}
+{"version":3,"file":"field.js","sourceRoot":"","sources":["field.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 {\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  render,\n  TemplateResult,\n} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {EASING} from '../../internal/motion/animation.js';\n\n/**\n * A field component.\n */\nexport class Field extends LitElement {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) error = false;\n  @property({type: Boolean}) focused = false;\n  @property() label = '';\n  @property({type: Boolean}) populated = false;\n  @property({type: Boolean}) required = false;\n  @property({type: Boolean}) resizable = false;\n  @property({attribute: 'supporting-text'}) supportingText = '';\n  @property({attribute: 'error-text'}) errorText = '';\n  @property({type: Number}) count = -1;\n  @property({type: Number}) max = -1;\n\n  /**\n   * Whether or not the field has leading content.\n   */\n  @property({type: Boolean, attribute: 'has-start'}) hasStart = false;\n\n  /**\n   * Whether or not the field has trailing content.\n   */\n  @property({type: Boolean, attribute: 'has-end'}) hasEnd = false;\n\n  @queryAssignedElements({slot: 'aria-describedby'})\n  private readonly slottedAriaDescribedBy!: HTMLElement[];\n\n  private get counterText() {\n    // Count and max are typed as number, but can be set to null when Lit removes\n    // their attributes. These getters coerce back to a number for calculations.\n    const countAsNumber = this.count ?? -1;\n    const maxAsNumber = this.max ?? -1;\n    // Counter does not show if count is negative, or max is negative or 0.\n    if (countAsNumber < 0 || maxAsNumber <= 0) {\n      return '';\n    }\n\n    return `${countAsNumber} / ${maxAsNumber}`;\n  }\n\n  private get supportingOrErrorText() {\n    return this.error && this.errorText ? this.errorText : this.supportingText;\n  }\n\n  @state() private isAnimating = false;\n  private labelAnimation?: Animation;\n  /**\n   * When set to true, the error text's `role=\"alert\"` will be removed, then\n   * re-added after an animation frame. This will re-announce an error message\n   * to screen readers.\n   */\n  @state() private refreshErrorAlert = false;\n  @state() private disableTransitions = false;\n  @query('.label.floating')\n  private readonly floatingLabelEl!: HTMLElement | null;\n  @query('.label.resting') private readonly restingLabelEl!: HTMLElement | null;\n  @query('.container') private readonly containerEl!: HTMLElement | null;\n\n  /**\n   * Re-announces the field's error supporting text to screen readers.\n   *\n   * Error text announces to screen readers anytime it is visible and changes.\n   * Use the method to re-announce the message when the text has not changed,\n   * but announcement is still needed (such as for `reportValidity()`).\n   */\n  reannounceError() {\n    this.refreshErrorAlert = true;\n  }\n\n  protected override update(props: PropertyValues<Field>) {\n    // Client-side property updates\n    const isDisabledChanging =\n      props.has('disabled') && props.get('disabled') !== undefined;\n    if (isDisabledChanging) {\n      this.disableTransitions = true;\n    }\n\n    // When disabling, remove focus styles if focused.\n    if (this.disabled && this.focused) {\n      props.set('focused', true);\n      this.focused = false;\n    }\n\n    // Animate if focused or populated change.\n    this.animateLabelIfNeeded({\n      wasFocused: props.get('focused'),\n      wasPopulated: props.get('populated'),\n    });\n\n    super.update(props);\n  }\n\n  protected override render() {\n    const floatingLabel = this.renderLabel(/*isFloating*/ true);\n    const restingLabel = this.renderLabel(/*isFloating*/ false);\n    const outline = this.renderOutline?.(floatingLabel);\n    const classes = {\n      'disabled': this.disabled,\n      'disable-transitions': this.disableTransitions,\n      'error': this.error && !this.disabled,\n      'focused': this.focused,\n      'with-start': this.hasStart,\n      'with-end': this.hasEnd,\n      'populated': this.populated,\n      'resizable': this.resizable,\n      'required': this.required,\n      'no-label': !this.label,\n    };\n\n    return html`\n      <div class=\"field ${classMap(classes)}\">\n        <div class=\"container-overflow\">\n          ${this.renderBackground?.()} ${this.renderIndicator?.()} ${outline}\n          <div class=\"container\">\n            <div class=\"start\">\n              <slot name=\"start\"></slot>\n            </div>\n            <div class=\"middle\">\n              <div class=\"label-wrapper\">\n                ${restingLabel} ${outline ? nothing : floatingLabel}\n              </div>\n              <div class=\"content\">\n                <slot></slot>\n              </div>\n            </div>\n            <div class=\"end\">\n              <slot name=\"end\"></slot>\n            </div>\n          </div>\n        </div>\n        ${this.renderSupportingText()}\n      </div>\n    `;\n  }\n\n  protected override updated(changed: PropertyValues<Field>) {\n    if (\n      changed.has('supportingText') ||\n      changed.has('errorText') ||\n      changed.has('count') ||\n      changed.has('max')\n    ) {\n      this.updateSlottedAriaDescribedBy();\n    }\n\n    if (this.refreshErrorAlert) {\n      // The past render cycle removed the role=\"alert\" from the error message.\n      // Re-add it after an animation frame to re-announce the error.\n      requestAnimationFrame(() => {\n        this.refreshErrorAlert = false;\n      });\n    }\n\n    if (this.disableTransitions) {\n      requestAnimationFrame(() => {\n        this.disableTransitions = false;\n      });\n    }\n  }\n\n  protected renderBackground?(): TemplateResult;\n  protected renderIndicator?(): TemplateResult;\n  protected renderOutline?(floatingLabel: unknown): TemplateResult;\n\n  private renderSupportingText() {\n    const {supportingOrErrorText, counterText} = this;\n    if (!supportingOrErrorText && !counterText) {\n      return nothing;\n    }\n\n    // Always render the supporting text span so that our `space-around`\n    // container puts the counter at the end.\n    const start = html`<span>${supportingOrErrorText}</span>`;\n    // Conditionally render counter so we don't render the extra `gap`.\n    // TODO(b/244473435): add aria-label and announcements\n    const end = counterText\n      ? html`<span class=\"counter\">${counterText}</span>`\n      : nothing;\n\n    // Announce if there is an error and error text visible.\n    // If refreshErrorAlert is true, do not announce. This will remove the\n    // role=\"alert\" attribute. Another render cycle will happen after an\n    // animation frame to re-add the role.\n    const shouldErrorAnnounce =\n      this.error && this.errorText && !this.refreshErrorAlert;\n    const role = shouldErrorAnnounce ? 'alert' : nothing;\n    return html`\n      <div class=\"supporting-text\" role=${role}>${start}${end}</div>\n      <slot\n        name=\"aria-describedby\"\n        @slotchange=${this.updateSlottedAriaDescribedBy}></slot>\n    `;\n  }\n\n  private updateSlottedAriaDescribedBy() {\n    for (const element of this.slottedAriaDescribedBy) {\n      render(html`${this.supportingOrErrorText} ${this.counterText}`, element);\n      element.setAttribute('hidden', '');\n    }\n  }\n\n  private renderLabel(isFloating: boolean) {\n    if (!this.label) {\n      return nothing;\n    }\n\n    let visible: boolean;\n    if (isFloating) {\n      // Floating label is visible when focused/populated or when animating.\n      visible = this.focused || this.populated || this.isAnimating;\n    } else {\n      // Resting label is visible when unfocused. It is never visible while\n      // animating.\n      visible = !this.focused && !this.populated && !this.isAnimating;\n    }\n\n    const classes = {\n      'hidden': !visible,\n      'floating': isFloating,\n      'resting': !isFloating,\n    };\n\n    // Add '*' if a label is present and the field is required\n    const labelText = `${this.label}${this.required ? '*' : ''}`;\n\n    return html`\n      <span class=\"label ${classMap(classes)}\" aria-hidden=${!visible}\n        >${labelText}</span\n      >\n    `;\n  }\n\n  private animateLabelIfNeeded({\n    wasFocused,\n    wasPopulated,\n  }: {\n    wasFocused?: boolean;\n    wasPopulated?: boolean;\n  }) {\n    if (!this.label) {\n      return;\n    }\n\n    wasFocused ??= this.focused;\n    wasPopulated ??= this.populated;\n    const wasFloating = wasFocused || wasPopulated;\n    const shouldBeFloating = this.focused || this.populated;\n    if (wasFloating === shouldBeFloating) {\n      return;\n    }\n\n    this.isAnimating = true;\n    this.labelAnimation?.cancel();\n\n    // Only one label is visible at a time for clearer text rendering.\n    // The floating label is visible and used during animation. At the end of\n    // the animation, it will either remain visible (if floating) or hide and\n    // the resting label will be shown.\n    //\n    // We don't use forward filling because if the dimensions of the text field\n    // change (leading icon removed, density changes, etc), then the animation\n    // will be inaccurate.\n    //\n    // Re-calculating the animation each time will prevent any visual glitches\n    // from appearing.\n    // TODO(b/241113345): use animation tokens\n    this.labelAnimation = this.floatingLabelEl?.animate(\n      this.getLabelKeyframes(),\n      {duration: 150, easing: EASING.STANDARD},\n    );\n\n    this.labelAnimation?.addEventListener('finish', () => {\n      // At the end of the animation, update the visible label.\n      this.isAnimating = false;\n    });\n  }\n\n  private getLabelKeyframes() {\n    const {floatingLabelEl, restingLabelEl} = this;\n    if (!floatingLabelEl || !restingLabelEl) {\n      return [];\n    }\n\n    const {\n      x: floatingX,\n      y: floatingY,\n      height: floatingHeight,\n    } = floatingLabelEl.getBoundingClientRect();\n    const {\n      x: restingX,\n      y: restingY,\n      height: restingHeight,\n    } = restingLabelEl.getBoundingClientRect();\n    const floatingScrollWidth = floatingLabelEl.scrollWidth;\n    const restingScrollWidth = restingLabelEl.scrollWidth;\n    // Scale by width ratio instead of font size since letter-spacing will scale\n    // incorrectly. Using the width we can better approximate the adjusted\n    // scale and compensate for tracking and overflow.\n    // (use scrollWidth instead of width to account for clipped labels)\n    const scale = restingScrollWidth / floatingScrollWidth;\n    const xDelta = restingX - floatingX;\n    // The line-height of the resting and floating label are different. When\n    // we move the floating label down to the resting label's position, it won't\n    // exactly match because of this. We need to adjust by half of what the\n    // final scaled floating label's height will be.\n    const yDelta =\n      restingY -\n      floatingY +\n      Math.round((restingHeight - floatingHeight * scale) / 2);\n\n    // Create the two transforms: floating to resting (using the calculations\n    // above), and resting to floating (re-setting the transform to initial\n    // values).\n    const restTransform = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;\n    const floatTransform = `translateX(0) translateY(0) scale(1)`;\n\n    // Constrain the floating labels width to a scaled percentage of the\n    // resting label's width. This will prevent long clipped labels from\n    // overflowing the container.\n    const restingClientWidth = restingLabelEl.clientWidth;\n    const isRestingClipped = restingScrollWidth > restingClientWidth;\n    const width = isRestingClipped ? `${restingClientWidth / scale}px` : '';\n    if (this.focused || this.populated) {\n      return [\n        {transform: restTransform, width},\n        {transform: floatTransform, width},\n      ];\n    }\n\n    return [\n      {transform: floatTransform, width},\n      {transform: restTransform, width},\n    ];\n  }\n\n  getSurfacePositionClientRect() {\n    return this.containerEl!.getBoundingClientRect();\n  }\n}\n"]}