@material/web 1.5.1 → 1.5.2-nightly.5df9410.0

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, attribute: 'no-asterisk'}) noAsterisk = false;\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}${\n      this.required && !this.noAsterisk ? '*' : ''\n    }`;\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, attribute: 'no-asterisk'}) noAsterisk = false;\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}${\n      this.required && !this.noAsterisk ? '*' : ''\n    }`;\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"]}

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

@@ -8,7 +8,7 @@ import '../../ripple/ripple.js';
 import { LitElement } from 'lit';
 import { FormSubmitter, type FormSubmitterType } from '../../internal/controller/form-submitter.js';
 type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
-declare const iconButtonBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../labs/behaviors/element-internals.js").WithElementInternals>;
+declare const iconButtonBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<import("../../labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../labs/behaviors/element-internals.js").WithElementInternals>>;
 /**
  * A button for rendering icons.
  *

package/iconbutton/internal/icon-button.js

@@ -10,12 +10,12 @@ import { html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { literal, html as staticHtml } from 'lit/static-html.js';
-import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+import { mixinDelegatesAria } from '../../internal/aria/delegate.js';
 import { setupFormSubmitter, } from '../../internal/controller/form-submitter.js';
 import { isRtl } from '../../internal/controller/is-rtl.js';
 import { internals, mixinElementInternals, } from '../../labs/behaviors/element-internals.js';
 // Separate variable needed for closure.
-const iconButtonBaseClass = mixinElementInternals(LitElement);
+const iconButtonBaseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
 /**
  * A button for rendering icons.
  *
@@ -185,7 +185,6 @@ export class IconButton extends iconButtonBaseClass {
     }
 }
 (() => {
-    requestUpdateOnAriaChange(IconButton);
     setupFormSubmitter(IconButton);
 })();
 /** @nocollapse */

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

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

package/internal/aria/aria.js

@@ -60,7 +60,7 @@ export const ARIA_ATTRIBUTES = ARIA_PROPERTIES.map(ariaPropertyToAttribute);
  * @return True if the attribute is an aria attribute, or false if not.
  */
 export function isAriaAttribute(attribute) {
-    return attribute.startsWith('aria-') || attribute === 'role';
+    return ARIA_ATTRIBUTES.includes(attribute);
 }
 /**
  * Converts an AOM aria property into its corresponding attribute.

package/internal/aria/aria.js.map

@@ -1 +1 @@
-{"version":3,"file":"aria.js","sourceRoot":"","sources":["aria.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAmB;IAC7C,MAAM;IACN,YAAY;IACZ,kBAAkB;IAClB,UAAU;IACV,aAAa;IACb,cAAc;IACd,cAAc;IACd,aAAa;IACb,aAAa;IACb,cAAc;IACd,cAAc;IACd,cAAc;IACd,YAAY;IACZ,aAAa;IACb,kBAAkB;IAClB,WAAW;IACX,WAAW;IACX,UAAU;IACV,WAAW;IACX,eAAe;IACf,qBAAqB;IACrB,iBAAiB;IACjB,iBAAiB;IACjB,cAAc;IACd,aAAa;IACb,cAAc;IACd,cAAc;IACd,qBAAqB;IACrB,cAAc;IACd,cAAc;IACd,aAAa;IACb,cAAc;IACd,aAAa;IACb,UAAU;IACV,cAAc;IACd,cAAc;IACd,cAAc;IACd,eAAe;CAChB,CAAC;AAOF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;AAE5E;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAAC,SAAiB;IAC/C,OAAO,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,SAAS,KAAK,MAAM,CAAC;AAC/D,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,uBAAuB,CAAyB,QAAW;IACzE,OACE,QAAQ;SACL,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC;QACzB,kEAAkE;SACjE,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC;SACzB,WAAW,EACf,CAAC;AACJ,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Accessibility Object Model reflective aria property name types.\n */\nexport type ARIAProperty = keyof ARIAMixin;\n\n/**\n * Accessibility Object Model reflective aria properties.\n */\nexport const ARIA_PROPERTIES: ARIAProperty[] = [\n  'role',\n  'ariaAtomic',\n  'ariaAutoComplete',\n  'ariaBusy',\n  'ariaChecked',\n  'ariaColCount',\n  'ariaColIndex',\n  'ariaColSpan',\n  'ariaCurrent',\n  'ariaDisabled',\n  'ariaExpanded',\n  'ariaHasPopup',\n  'ariaHidden',\n  'ariaInvalid',\n  'ariaKeyShortcuts',\n  'ariaLabel',\n  'ariaLevel',\n  'ariaLive',\n  'ariaModal',\n  'ariaMultiLine',\n  'ariaMultiSelectable',\n  'ariaOrientation',\n  'ariaPlaceholder',\n  'ariaPosInSet',\n  'ariaPressed',\n  'ariaReadOnly',\n  'ariaRequired',\n  'ariaRoleDescription',\n  'ariaRowCount',\n  'ariaRowIndex',\n  'ariaRowSpan',\n  'ariaSelected',\n  'ariaSetSize',\n  'ariaSort',\n  'ariaValueMax',\n  'ariaValueMin',\n  'ariaValueNow',\n  'ariaValueText',\n];\n\n/**\n * Accessibility Object Model aria attribute name types.\n */\nexport type ARIAAttribute = ARIAPropertyToAttribute<ARIAProperty>;\n\n/**\n * Accessibility Object Model aria attributes.\n */\nexport const ARIA_ATTRIBUTES = ARIA_PROPERTIES.map(ariaPropertyToAttribute);\n\n/**\n * Checks if an attribute is one of the AOM aria attributes.\n *\n * @example\n * isAriaAttribute('aria-label'); // true\n *\n * @param attribute The attribute to check.\n * @return True if the attribute is an aria attribute, or false if not.\n */\nexport function isAriaAttribute(attribute: string): attribute is ARIAAttribute {\n  return attribute.startsWith('aria-') || attribute === 'role';\n}\n\n/**\n * Converts an AOM aria property into its corresponding attribute.\n *\n * @example\n * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'\n *\n * @param property The aria property.\n * @return The aria attribute.\n */\nexport function ariaPropertyToAttribute<K extends ARIAProperty>(property: K) {\n  return (\n    property\n      .replace('aria', 'aria-')\n      // IDREF attributes also include an \"Element\" or \"Elements\" suffix\n      .replace(/Elements?/g, '')\n      .toLowerCase() as ARIAPropertyToAttribute<K>\n  );\n}\n\n// Converts an `ariaFoo` string type to an `aria-foo` string type.\ntype ARIAPropertyToAttribute<K extends string> =\n  K extends `aria${infer Suffix}Element${infer OptS}`\n    ? `aria-${Lowercase<Suffix>}`\n    : K extends `aria${infer Suffix}`\n      ? `aria-${Lowercase<Suffix>}`\n      : K;\n\n/**\n * An extension of `ARIAMixin` that enforces strict value types for aria\n * properties.\n *\n * This is needed for correct typing in render functions with lit analyzer.\n *\n * @example\n * render() {\n *   const {ariaLabel} = this as ARIAMixinStrict;\n *   return html`\n *     <button aria-label=${ariaLabel || nothing}>\n *       <slot></slot>\n *     </button>\n *   `;\n * }\n */\nexport interface ARIAMixinStrict extends ARIAMixin {\n  ariaAtomic: 'true' | 'false' | null;\n  ariaAutoComplete: 'none' | 'inline' | 'list' | 'both' | null;\n  ariaBusy: 'true' | 'false' | null;\n  ariaChecked: 'true' | 'false' | null;\n  ariaColCount: `${number}` | null;\n  ariaColIndex: `${number}` | null;\n  ariaColSpan: `${number}` | null;\n  ariaCurrent:\n    | 'page'\n    | 'step'\n    | 'location'\n    | 'date'\n    | 'time'\n    | 'true'\n    | 'false'\n    | null;\n  ariaDisabled: 'true' | 'false' | null;\n  ariaExpanded: 'true' | 'false' | null;\n  ariaHasPopup:\n    | 'false'\n    | 'true'\n    | 'menu'\n    | 'listbox'\n    | 'tree'\n    | 'grid'\n    | 'dialog'\n    | null;\n  ariaHidden: 'true' | 'false' | null;\n  ariaInvalid: 'true' | 'false' | null;\n  ariaKeyShortcuts: string | null;\n  ariaLabel: string | null;\n  ariaLevel: `${number}` | null;\n  ariaLive: 'assertive' | 'off' | 'polite' | null;\n  ariaModal: 'true' | 'false' | null;\n  ariaMultiLine: 'true' | 'false' | null;\n  ariaMultiSelectable: 'true' | 'false' | null;\n  ariaOrientation: 'horizontal' | 'vertical' | 'undefined' | null;\n  ariaPlaceholder: string | null;\n  ariaPosInSet: `${number}` | null;\n  ariaPressed: 'true' | 'false' | null;\n  ariaReadOnly: 'true' | 'false' | null;\n  ariaRequired: 'true' | 'false' | null;\n  ariaRoleDescription: string | null;\n  ariaRowCount: `${number}` | null;\n  ariaRowIndex: `${number}` | null;\n  ariaRowSpan: `${number}` | null;\n  ariaSelected: 'true' | 'false' | null;\n  ariaSetSize: `${number}` | null;\n  ariaSort: 'ascending' | 'descending' | 'none' | 'other' | null;\n  ariaValueMax: `${number}` | null;\n  ariaValueMin: `${number}` | null;\n  ariaValueNow: `${number}` | null;\n  ariaValueText: string | null;\n  role: ARIARole | null;\n}\n\n/**\n * Valid values for `role`.\n */\nexport type ARIARole =\n  | 'alert'\n  | 'alertdialog'\n  | 'button'\n  | 'checkbox'\n  | 'dialog'\n  | 'gridcell'\n  | 'link'\n  | 'log'\n  | 'marquee'\n  | 'menuitem'\n  | 'menuitemcheckbox'\n  | 'menuitemradio'\n  | 'option'\n  | 'progressbar'\n  | 'radio'\n  | 'scrollbar'\n  | 'searchbox'\n  | 'slider'\n  | 'spinbutton'\n  | 'status'\n  | 'switch'\n  | 'tab'\n  | 'tabpanel'\n  | 'textbox'\n  | 'timer'\n  | 'tooltip'\n  | 'treeitem'\n  | 'combobox'\n  | 'grid'\n  | 'listbox'\n  | 'menu'\n  | 'menubar'\n  | 'radiogroup'\n  | 'tablist'\n  | 'tree'\n  | 'treegrid'\n  | 'application'\n  | 'article'\n  | 'cell'\n  | 'columnheader'\n  | 'definition'\n  | 'directory'\n  | 'document'\n  | 'feed'\n  | 'figure'\n  | 'group'\n  | 'heading'\n  | 'img'\n  | 'list'\n  | 'listitem'\n  | 'math'\n  | 'none'\n  | 'note'\n  | 'presentation'\n  | 'region'\n  | 'row'\n  | 'rowgroup'\n  | 'rowheader'\n  | 'separator'\n  | 'table'\n  | 'term'\n  | 'text'\n  | 'toolbar'\n  | 'banner'\n  | 'complementary'\n  | 'contentinfo'\n  | 'form'\n  | 'main'\n  | 'navigation'\n  | 'region'\n  | 'search'\n  | 'doc-abstract'\n  | 'doc-acknowledgments'\n  | 'doc-afterword'\n  | 'doc-appendix'\n  | 'doc-backlink'\n  | 'doc-biblioentry'\n  | 'doc-bibliography'\n  | 'doc-biblioref'\n  | 'doc-chapter'\n  | 'doc-colophon'\n  | 'doc-conclusion'\n  | 'doc-cover'\n  | 'doc-credit'\n  | 'doc-credits'\n  | 'doc-dedication'\n  | 'doc-endnote'\n  | 'doc-endnotes'\n  | 'doc-epigraph'\n  | 'doc-epilogue'\n  | 'doc-errata'\n  | 'doc-example'\n  | 'doc-footnote'\n  | 'doc-foreword'\n  | 'doc-glossary'\n  | 'doc-glossref'\n  | 'doc-index'\n  | 'doc-introduction'\n  | 'doc-noteref'\n  | 'doc-notice'\n  | 'doc-pagebreak'\n  | 'doc-pagelist'\n  | 'doc-part'\n  | 'doc-preface'\n  | 'doc-prologue'\n  | 'doc-pullquote'\n  | 'doc-qna'\n  | 'doc-subtitle'\n  | 'doc-tip'\n  | 'doc-toc';\n"]}
+{"version":3,"file":"aria.js","sourceRoot":"","sources":["aria.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAmB;IAC7C,MAAM;IACN,YAAY;IACZ,kBAAkB;IAClB,UAAU;IACV,aAAa;IACb,cAAc;IACd,cAAc;IACd,aAAa;IACb,aAAa;IACb,cAAc;IACd,cAAc;IACd,cAAc;IACd,YAAY;IACZ,aAAa;IACb,kBAAkB;IAClB,WAAW;IACX,WAAW;IACX,UAAU;IACV,WAAW;IACX,eAAe;IACf,qBAAqB;IACrB,iBAAiB;IACjB,iBAAiB;IACjB,cAAc;IACd,aAAa;IACb,cAAc;IACd,cAAc;IACd,qBAAqB;IACrB,cAAc;IACd,cAAc;IACd,aAAa;IACb,cAAc;IACd,aAAa;IACb,UAAU;IACV,cAAc;IACd,cAAc;IACd,cAAc;IACd,eAAe;CAChB,CAAC;AAOF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;AAE5E;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAAC,SAAiB;IAC/C,OAAO,eAAe,CAAC,QAAQ,CAAC,SAA0B,CAAC,CAAC;AAC9D,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,uBAAuB,CAAyB,QAAW;IACzE,OACE,QAAQ;SACL,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC;QACzB,kEAAkE;SACjE,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC;SACzB,WAAW,EACf,CAAC;AACJ,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Accessibility Object Model reflective aria property name types.\n */\nexport type ARIAProperty = keyof ARIAMixin;\n\n/**\n * Accessibility Object Model reflective aria properties.\n */\nexport const ARIA_PROPERTIES: ARIAProperty[] = [\n  'role',\n  'ariaAtomic',\n  'ariaAutoComplete',\n  'ariaBusy',\n  'ariaChecked',\n  'ariaColCount',\n  'ariaColIndex',\n  'ariaColSpan',\n  'ariaCurrent',\n  'ariaDisabled',\n  'ariaExpanded',\n  'ariaHasPopup',\n  'ariaHidden',\n  'ariaInvalid',\n  'ariaKeyShortcuts',\n  'ariaLabel',\n  'ariaLevel',\n  'ariaLive',\n  'ariaModal',\n  'ariaMultiLine',\n  'ariaMultiSelectable',\n  'ariaOrientation',\n  'ariaPlaceholder',\n  'ariaPosInSet',\n  'ariaPressed',\n  'ariaReadOnly',\n  'ariaRequired',\n  'ariaRoleDescription',\n  'ariaRowCount',\n  'ariaRowIndex',\n  'ariaRowSpan',\n  'ariaSelected',\n  'ariaSetSize',\n  'ariaSort',\n  'ariaValueMax',\n  'ariaValueMin',\n  'ariaValueNow',\n  'ariaValueText',\n];\n\n/**\n * Accessibility Object Model aria attribute name types.\n */\nexport type ARIAAttribute = ARIAPropertyToAttribute<ARIAProperty>;\n\n/**\n * Accessibility Object Model aria attributes.\n */\nexport const ARIA_ATTRIBUTES = ARIA_PROPERTIES.map(ariaPropertyToAttribute);\n\n/**\n * Checks if an attribute is one of the AOM aria attributes.\n *\n * @example\n * isAriaAttribute('aria-label'); // true\n *\n * @param attribute The attribute to check.\n * @return True if the attribute is an aria attribute, or false if not.\n */\nexport function isAriaAttribute(attribute: string): attribute is ARIAAttribute {\n  return ARIA_ATTRIBUTES.includes(attribute as ARIAAttribute);\n}\n\n/**\n * Converts an AOM aria property into its corresponding attribute.\n *\n * @example\n * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'\n *\n * @param property The aria property.\n * @return The aria attribute.\n */\nexport function ariaPropertyToAttribute<K extends ARIAProperty>(property: K) {\n  return (\n    property\n      .replace('aria', 'aria-')\n      // IDREF attributes also include an \"Element\" or \"Elements\" suffix\n      .replace(/Elements?/g, '')\n      .toLowerCase() as ARIAPropertyToAttribute<K>\n  );\n}\n\n// Converts an `ariaFoo` string type to an `aria-foo` string type.\ntype ARIAPropertyToAttribute<K extends string> =\n  K extends `aria${infer Suffix}Element${infer OptS}`\n    ? `aria-${Lowercase<Suffix>}`\n    : K extends `aria${infer Suffix}`\n      ? `aria-${Lowercase<Suffix>}`\n      : K;\n\n/**\n * An extension of `ARIAMixin` that enforces strict value types for aria\n * properties.\n *\n * This is needed for correct typing in render functions with lit analyzer.\n *\n * @example\n * render() {\n *   const {ariaLabel} = this as ARIAMixinStrict;\n *   return html`\n *     <button aria-label=${ariaLabel || nothing}>\n *       <slot></slot>\n *     </button>\n *   `;\n * }\n */\nexport interface ARIAMixinStrict extends ARIAMixin {\n  ariaAtomic: 'true' | 'false' | null;\n  ariaAutoComplete: 'none' | 'inline' | 'list' | 'both' | null;\n  ariaBusy: 'true' | 'false' | null;\n  ariaChecked: 'true' | 'false' | null;\n  ariaColCount: `${number}` | null;\n  ariaColIndex: `${number}` | null;\n  ariaColSpan: `${number}` | null;\n  ariaCurrent:\n    | 'page'\n    | 'step'\n    | 'location'\n    | 'date'\n    | 'time'\n    | 'true'\n    | 'false'\n    | null;\n  ariaDisabled: 'true' | 'false' | null;\n  ariaExpanded: 'true' | 'false' | null;\n  ariaHasPopup:\n    | 'false'\n    | 'true'\n    | 'menu'\n    | 'listbox'\n    | 'tree'\n    | 'grid'\n    | 'dialog'\n    | null;\n  ariaHidden: 'true' | 'false' | null;\n  ariaInvalid: 'true' | 'false' | null;\n  ariaKeyShortcuts: string | null;\n  ariaLabel: string | null;\n  ariaLevel: `${number}` | null;\n  ariaLive: 'assertive' | 'off' | 'polite' | null;\n  ariaModal: 'true' | 'false' | null;\n  ariaMultiLine: 'true' | 'false' | null;\n  ariaMultiSelectable: 'true' | 'false' | null;\n  ariaOrientation: 'horizontal' | 'vertical' | 'undefined' | null;\n  ariaPlaceholder: string | null;\n  ariaPosInSet: `${number}` | null;\n  ariaPressed: 'true' | 'false' | null;\n  ariaReadOnly: 'true' | 'false' | null;\n  ariaRequired: 'true' | 'false' | null;\n  ariaRoleDescription: string | null;\n  ariaRowCount: `${number}` | null;\n  ariaRowIndex: `${number}` | null;\n  ariaRowSpan: `${number}` | null;\n  ariaSelected: 'true' | 'false' | null;\n  ariaSetSize: `${number}` | null;\n  ariaSort: 'ascending' | 'descending' | 'none' | 'other' | null;\n  ariaValueMax: `${number}` | null;\n  ariaValueMin: `${number}` | null;\n  ariaValueNow: `${number}` | null;\n  ariaValueText: string | null;\n  role: ARIARole | null;\n}\n\n/**\n * Valid values for `role`.\n */\nexport type ARIARole =\n  | 'alert'\n  | 'alertdialog'\n  | 'button'\n  | 'checkbox'\n  | 'dialog'\n  | 'gridcell'\n  | 'link'\n  | 'log'\n  | 'marquee'\n  | 'menuitem'\n  | 'menuitemcheckbox'\n  | 'menuitemradio'\n  | 'option'\n  | 'progressbar'\n  | 'radio'\n  | 'scrollbar'\n  | 'searchbox'\n  | 'slider'\n  | 'spinbutton'\n  | 'status'\n  | 'switch'\n  | 'tab'\n  | 'tabpanel'\n  | 'textbox'\n  | 'timer'\n  | 'tooltip'\n  | 'treeitem'\n  | 'combobox'\n  | 'grid'\n  | 'listbox'\n  | 'menu'\n  | 'menubar'\n  | 'radiogroup'\n  | 'tablist'\n  | 'tree'\n  | 'treegrid'\n  | 'application'\n  | 'article'\n  | 'cell'\n  | 'columnheader'\n  | 'definition'\n  | 'directory'\n  | 'document'\n  | 'feed'\n  | 'figure'\n  | 'group'\n  | 'heading'\n  | 'img'\n  | 'list'\n  | 'listitem'\n  | 'math'\n  | 'none'\n  | 'note'\n  | 'presentation'\n  | 'region'\n  | 'row'\n  | 'rowgroup'\n  | 'rowheader'\n  | 'separator'\n  | 'table'\n  | 'term'\n  | 'text'\n  | 'toolbar'\n  | 'banner'\n  | 'complementary'\n  | 'contentinfo'\n  | 'form'\n  | 'main'\n  | 'navigation'\n  | 'region'\n  | 'search'\n  | 'doc-abstract'\n  | 'doc-acknowledgments'\n  | 'doc-afterword'\n  | 'doc-appendix'\n  | 'doc-backlink'\n  | 'doc-biblioentry'\n  | 'doc-bibliography'\n  | 'doc-biblioref'\n  | 'doc-chapter'\n  | 'doc-colophon'\n  | 'doc-conclusion'\n  | 'doc-cover'\n  | 'doc-credit'\n  | 'doc-credits'\n  | 'doc-dedication'\n  | 'doc-endnote'\n  | 'doc-endnotes'\n  | 'doc-epigraph'\n  | 'doc-epilogue'\n  | 'doc-errata'\n  | 'doc-example'\n  | 'doc-footnote'\n  | 'doc-foreword'\n  | 'doc-glossary'\n  | 'doc-glossref'\n  | 'doc-index'\n  | 'doc-introduction'\n  | 'doc-noteref'\n  | 'doc-notice'\n  | 'doc-pagebreak'\n  | 'doc-pagelist'\n  | 'doc-part'\n  | 'doc-preface'\n  | 'doc-prologue'\n  | 'doc-pullquote'\n  | 'doc-qna'\n  | 'doc-subtitle'\n  | 'doc-tip'\n  | 'doc-toc';\n"]}

package/internal/aria/delegate.d.ts

@@ -3,27 +3,24 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ReactiveElement } from 'lit';
+import { LitElement } from 'lit';
+import { MixinBase, MixinReturn } from '../../labs/behaviors/mixin.js';
 /**
- * Sets up a `ReactiveElement` constructor to enable updates when delegating
- * aria attributes. Elements may bind `this.aria*` properties to `aria-*`
- * attributes in their render functions.
+ * Mixes in aria delegation for elements that delegate focus and aria to inner
+ * shadow root elements.
  *
- * This function will:
- * - Call `requestUpdate()` when an aria attribute changes.
- * - Add `role="presentation"` to the host.
+ * This mixin fixes invalid aria announcements with shadow roots, caused by
+ * duplicate aria attributes on both the host and the inner shadow root element.
  *
- * NOTE: The following features are not currently supported:
- * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)
- * - Delegating the `role` attribute
+ * Note: this mixin **does not yet support** ID reference attributes, such as
+ * `aria-labelledby` or `aria-controls`.
  *
  * @example
- * class XButton extends LitElement {
- *   static {
- *     requestUpdateOnAriaChange(XButton);
- *   }
+ * ```ts
+ * class MyButton extends mixinDelegatesAria(LitElement) {
+ *   static shadowRootOptions = {mode: 'open', delegatesFocus: true};
  *
- *   protected override render() {
+ *   render() {
  *     return html`
  *       <button aria-label=${this.ariaLabel || nothing}>
  *         <slot></slot>
@@ -31,7 +28,27 @@ import { ReactiveElement } from 'lit';
  *     `;
  *   }
  * }
+ * ```
+ * ```html
+ * <my-button aria-label="Plus one">+1</my-button>
+ * ```
+ *
+ * Use `ARIAMixinStrict` for lit analyzer strict types, such as the "role"
+ * attribute.
+ *
+ * @example
+ * ```ts
+ * return html`
+ *   <button role=${(this as ARIAMixinStrict).role || nothing}>
+ *     <slot></slot>
+ *   </button>
+ * `;
+ * ```
+ *
+ * In the future, updates to the Accessibility Object Model (AOM) will provide
+ * built-in aria delegation features that will replace this mixin.
  *
- * @param ctor The `ReactiveElement` constructor to patch.
+ * @param base The class to mix functionality into.
+ * @return The provided class with aria delegation mixed in.
  */
-export declare function requestUpdateOnAriaChange(ctor: typeof ReactiveElement): void;
+export declare function mixinDelegatesAria<T extends MixinBase<LitElement>>(base: T): MixinReturn<T>;

package/internal/aria/delegate.js

@@ -3,27 +3,26 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ARIA_PROPERTIES, ariaPropertyToAttribute } from './aria.js';
+import { isServer } from 'lit';
+import { ARIA_PROPERTIES, ariaPropertyToAttribute, isAriaAttribute, } from './aria.js';
+// Private symbols
+const privateIgnoreAttributeChangesFor = Symbol('privateIgnoreAttributeChangesFor');
 /**
- * Sets up a `ReactiveElement` constructor to enable updates when delegating
- * aria attributes. Elements may bind `this.aria*` properties to `aria-*`
- * attributes in their render functions.
+ * Mixes in aria delegation for elements that delegate focus and aria to inner
+ * shadow root elements.
  *
- * This function will:
- * - Call `requestUpdate()` when an aria attribute changes.
- * - Add `role="presentation"` to the host.
+ * This mixin fixes invalid aria announcements with shadow roots, caused by
+ * duplicate aria attributes on both the host and the inner shadow root element.
  *
- * NOTE: The following features are not currently supported:
- * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)
- * - Delegating the `role` attribute
+ * Note: this mixin **does not yet support** ID reference attributes, such as
+ * `aria-labelledby` or `aria-controls`.
  *
  * @example
- * class XButton extends LitElement {
- *   static {
- *     requestUpdateOnAriaChange(XButton);
- *   }
+ * ```ts
+ * class MyButton extends mixinDelegatesAria(LitElement) {
+ *   static shadowRootOptions = {mode: 'open', delegatesFocus: true};
  *
- *   protected override render() {
+ *   render() {
  *     return html`
  *       <button aria-label=${this.ariaLabel || nothing}>
  *         <slot></slot>
@@ -31,23 +30,147 @@ import { ARIA_PROPERTIES, ariaPropertyToAttribute } from './aria.js';
  *     `;
  *   }
  * }
+ * ```
+ * ```html
+ * <my-button aria-label="Plus one">+1</my-button>
+ * ```
+ *
+ * Use `ARIAMixinStrict` for lit analyzer strict types, such as the "role"
+ * attribute.
+ *
+ * @example
+ * ```ts
+ * return html`
+ *   <button role=${(this as ARIAMixinStrict).role || nothing}>
+ *     <slot></slot>
+ *   </button>
+ * `;
+ * ```
+ *
+ * In the future, updates to the Accessibility Object Model (AOM) will provide
+ * built-in aria delegation features that will replace this mixin.
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with aria delegation mixed in.
+ */
+export function mixinDelegatesAria(base) {
+    var _a;
+    if (isServer) {
+        // Don't shift attributes when running with lit-ssr. The SSR renderer
+        // implements a subset of DOM APIs, including the methods this mixin
+        // overrides, causing errors. We don't need to shift on the server anyway
+        // since elements will shift attributes immediately once they hydrate.
+        return base;
+    }
+    class WithDelegatesAriaElement extends base {
+        constructor() {
+            super(...arguments);
+            this[_a] = new Set();
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (!isAriaAttribute(name)) {
+                super.attributeChangedCallback(name, oldValue, newValue);
+                return;
+            }
+            if (this[privateIgnoreAttributeChangesFor].has(name)) {
+                return;
+            }
+            // Don't trigger another `attributeChangedCallback` once we remove the
+            // aria attribute from the host. We check the explicit name of the
+            // attribute to ignore since `attributeChangedCallback` can be called
+            // multiple times out of an expected order when hydrating an element with
+            // multiple attributes.
+            this[privateIgnoreAttributeChangesFor].add(name);
+            this.removeAttribute(name);
+            this[privateIgnoreAttributeChangesFor].delete(name);
+            const dataProperty = ariaAttributeToDataProperty(name);
+            if (newValue === null) {
+                delete this.dataset[dataProperty];
+            }
+            else {
+                this.dataset[dataProperty] = newValue;
+            }
+            this.requestUpdate(ariaAttributeToDataProperty(name), oldValue);
+        }
+        getAttribute(name) {
+            if (isAriaAttribute(name)) {
+                return super.getAttribute(ariaAttributeToDataAttribute(name));
+            }
+            return super.getAttribute(name);
+        }
+        removeAttribute(name) {
+            super.removeAttribute(name);
+            if (isAriaAttribute(name)) {
+                super.removeAttribute(ariaAttributeToDataAttribute(name));
+                // Since `aria-*` attributes are already removed`, we need to request
+                // an update because `attributeChangedCallback` will not be called.
+                this.requestUpdate();
+            }
+        }
+    }
+    _a = privateIgnoreAttributeChangesFor;
+    setupDelegatesAriaProperties(WithDelegatesAriaElement);
+    return WithDelegatesAriaElement;
+}
+/**
+ * Overrides the constructor's native `ARIAMixin` properties to ensure that
+ * aria properties reflect the values that were shifted to a data attribute.
  *
  * @param ctor The `ReactiveElement` constructor to patch.
  */
-export function requestUpdateOnAriaChange(ctor) {
+function setupDelegatesAriaProperties(ctor) {
     for (const ariaProperty of ARIA_PROPERTIES) {
+        // The casing between ariaProperty and the dataProperty may be different.
+        // ex: aria-haspopup -> ariaHasPopup
+        const ariaAttribute = ariaPropertyToAttribute(ariaProperty);
+        // ex: aria-haspopup -> data-aria-haspopup
+        const dataAttribute = ariaAttributeToDataAttribute(ariaAttribute);
+        // ex: aria-haspopup -> dataset.ariaHaspopup
+        const dataProperty = ariaAttributeToDataProperty(ariaAttribute);
+        // Call `ReactiveElement.createProperty()` so that the `aria-*` and `data-*`
+        // attributes are added to the `static observedAttributes` array. This
+        // triggers `attributeChangedCallback` for the delegates aria mixin to
+        // handle.
         ctor.createProperty(ariaProperty, {
-            attribute: ariaPropertyToAttribute(ariaProperty),
-            reflect: true,
+            attribute: ariaAttribute,
+            noAccessor: true,
         });
-    }
-    ctor.addInitializer((element) => {
-        const controller = {
-            hostConnected() {
-                element.setAttribute('role', 'presentation');
+        ctor.createProperty(Symbol(dataAttribute), {
+            attribute: dataAttribute,
+            noAccessor: true,
+        });
+        // Re-define the `ARIAMixin` properties to handle data attribute shifting.
+        // It is safe to use `Object.defineProperty` here because the properties
+        // are native and not renamed.
+        // tslint:disable-next-line:ban-unsafe-reflection
+        Object.defineProperty(ctor.prototype, ariaProperty, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return this.dataset[dataProperty] ?? null;
+            },
+            set(value) {
+                const prevValue = this.dataset[dataProperty] ?? null;
+                if (value === prevValue) {
+                    return;
+                }
+                if (value === null) {
+                    delete this.dataset[dataProperty];
+                }
+                else {
+                    this.dataset[dataProperty] = value;
+                }
+                this.requestUpdate(ariaProperty, prevValue);
             },
-        };
-        element.addController(controller);
-    });
+        });
+    }
+}
+function ariaAttributeToDataAttribute(ariaAttribute) {
+    // aria-haspopup -> data-aria-haspopup
+    return `data-${ariaAttribute}`;
+}
+function ariaAttributeToDataProperty(ariaAttribute) {
+    // aria-haspopup -> dataset.ariaHaspopup
+    return ariaAttribute.replace(/-\w/, (dashLetter) => dashLetter[1].toUpperCase());
 }
 //# sourceMappingURL=delegate.js.map

package/internal/aria/delegate.js.map

@@ -1 +1 @@
-{"version":3,"file":"delegate.js","sourceRoot":"","sources":["delegate.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,eAAe,EAAE,uBAAuB,EAAC,MAAM,WAAW,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,yBAAyB,CAAC,IAA4B;IACpE,KAAK,MAAM,YAAY,IAAI,eAAe,EAAE;QAC1C,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE;YAChC,SAAS,EAAE,uBAAuB,CAAC,YAAY,CAAC;YAChD,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;QAC9B,MAAM,UAAU,GAAG;YACjB,aAAa;gBACX,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;YAC/C,CAAC;SACF,CAAC;QAEF,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveElement} from 'lit';\n\nimport {ARIA_PROPERTIES, ariaPropertyToAttribute} from './aria.js';\n\n/**\n * Sets up a `ReactiveElement` constructor to enable updates when delegating\n * aria attributes. Elements may bind `this.aria*` properties to `aria-*`\n * attributes in their render functions.\n *\n * This function will:\n * - Call `requestUpdate()` when an aria attribute changes.\n * - Add `role=\"presentation\"` to the host.\n *\n * NOTE: The following features are not currently supported:\n * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)\n * - Delegating the `role` attribute\n *\n * @example\n * class XButton extends LitElement {\n *   static {\n *     requestUpdateOnAriaChange(XButton);\n *   }\n *\n *   protected override render() {\n *     return html`\n *       <button aria-label=${this.ariaLabel || nothing}>\n *         <slot></slot>\n *       </button>\n *     `;\n *   }\n * }\n *\n * @param ctor The `ReactiveElement` constructor to patch.\n */\nexport function requestUpdateOnAriaChange(ctor: typeof ReactiveElement) {\n  for (const ariaProperty of ARIA_PROPERTIES) {\n    ctor.createProperty(ariaProperty, {\n      attribute: ariaPropertyToAttribute(ariaProperty),\n      reflect: true,\n    });\n  }\n\n  ctor.addInitializer((element) => {\n    const controller = {\n      hostConnected() {\n        element.setAttribute('role', 'presentation');\n      },\n    };\n\n    element.addController(controller);\n  });\n}\n"]}
+{"version":3,"file":"delegate.js","sourceRoot":"","sources":["delegate.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 {LitElement, ReactiveElement, isServer} from 'lit';\n\nimport {MixinBase, MixinReturn} from '../../labs/behaviors/mixin.js';\nimport {\n  ARIA_PROPERTIES,\n  ariaPropertyToAttribute,\n  isAriaAttribute,\n} from './aria.js';\n\n// Private symbols\nconst privateIgnoreAttributeChangesFor = Symbol(\n  'privateIgnoreAttributeChangesFor',\n);\n\n/**\n * Mixes in aria delegation for elements that delegate focus and aria to inner\n * shadow root elements.\n *\n * This mixin fixes invalid aria announcements with shadow roots, caused by\n * duplicate aria attributes on both the host and the inner shadow root element.\n *\n * Note: this mixin **does not yet support** ID reference attributes, such as\n * `aria-labelledby` or `aria-controls`.\n *\n * @example\n * ```ts\n * class MyButton extends mixinDelegatesAria(LitElement) {\n *   static shadowRootOptions = {mode: 'open', delegatesFocus: true};\n *\n *   render() {\n *     return html`\n *       <button aria-label=${this.ariaLabel || nothing}>\n *         <slot></slot>\n *       </button>\n *     `;\n *   }\n * }\n * ```\n * ```html\n * <my-button aria-label=\"Plus one\">+1</my-button>\n * ```\n *\n * Use `ARIAMixinStrict` for lit analyzer strict types, such as the \"role\"\n * attribute.\n *\n * @example\n * ```ts\n * return html`\n *   <button role=${(this as ARIAMixinStrict).role || nothing}>\n *     <slot></slot>\n *   </button>\n * `;\n * ```\n *\n * In the future, updates to the Accessibility Object Model (AOM) will provide\n * built-in aria delegation features that will replace this mixin.\n *\n * @param base The class to mix functionality into.\n * @return The provided class with aria delegation mixed in.\n */\nexport function mixinDelegatesAria<T extends MixinBase<LitElement>>(\n  base: T,\n): MixinReturn<T> {\n  if (isServer) {\n    // Don't shift attributes when running with lit-ssr. The SSR renderer\n    // implements a subset of DOM APIs, including the methods this mixin\n    // overrides, causing errors. We don't need to shift on the server anyway\n    // since elements will shift attributes immediately once they hydrate.\n    return base;\n  }\n\n  abstract class WithDelegatesAriaElement extends base {\n    [privateIgnoreAttributeChangesFor] = new Set();\n\n    override attributeChangedCallback(\n      name: string,\n      oldValue: string | null,\n      newValue: string | null,\n    ) {\n      if (!isAriaAttribute(name)) {\n        super.attributeChangedCallback(name, oldValue, newValue);\n        return;\n      }\n\n      if (this[privateIgnoreAttributeChangesFor].has(name)) {\n        return;\n      }\n\n      // Don't trigger another `attributeChangedCallback` once we remove the\n      // aria attribute from the host. We check the explicit name of the\n      // attribute to ignore since `attributeChangedCallback` can be called\n      // multiple times out of an expected order when hydrating an element with\n      // multiple attributes.\n      this[privateIgnoreAttributeChangesFor].add(name);\n      this.removeAttribute(name);\n      this[privateIgnoreAttributeChangesFor].delete(name);\n      const dataProperty = ariaAttributeToDataProperty(name);\n      if (newValue === null) {\n        delete this.dataset[dataProperty];\n      } else {\n        this.dataset[dataProperty] = newValue;\n      }\n\n      this.requestUpdate(ariaAttributeToDataProperty(name), oldValue);\n    }\n\n    override getAttribute(name: string) {\n      if (isAriaAttribute(name)) {\n        return super.getAttribute(ariaAttributeToDataAttribute(name));\n      }\n\n      return super.getAttribute(name);\n    }\n\n    override removeAttribute(name: string) {\n      super.removeAttribute(name);\n      if (isAriaAttribute(name)) {\n        super.removeAttribute(ariaAttributeToDataAttribute(name));\n        // Since `aria-*` attributes are already removed`, we need to request\n        // an update because `attributeChangedCallback` will not be called.\n        this.requestUpdate();\n      }\n    }\n  }\n\n  setupDelegatesAriaProperties(\n    WithDelegatesAriaElement as unknown as typeof ReactiveElement,\n  );\n\n  return WithDelegatesAriaElement;\n}\n\n/**\n * Overrides the constructor's native `ARIAMixin` properties to ensure that\n * aria properties reflect the values that were shifted to a data attribute.\n *\n * @param ctor The `ReactiveElement` constructor to patch.\n */\nfunction setupDelegatesAriaProperties(ctor: typeof ReactiveElement) {\n  for (const ariaProperty of ARIA_PROPERTIES) {\n    // The casing between ariaProperty and the dataProperty may be different.\n    // ex: aria-haspopup -> ariaHasPopup\n    const ariaAttribute = ariaPropertyToAttribute(ariaProperty);\n    // ex: aria-haspopup -> data-aria-haspopup\n    const dataAttribute = ariaAttributeToDataAttribute(ariaAttribute);\n    // ex: aria-haspopup -> dataset.ariaHaspopup\n    const dataProperty = ariaAttributeToDataProperty(ariaAttribute);\n\n    // Call `ReactiveElement.createProperty()` so that the `aria-*` and `data-*`\n    // attributes are added to the `static observedAttributes` array. This\n    // triggers `attributeChangedCallback` for the delegates aria mixin to\n    // handle.\n    ctor.createProperty(ariaProperty, {\n      attribute: ariaAttribute,\n      noAccessor: true,\n    });\n    ctor.createProperty(Symbol(dataAttribute), {\n      attribute: dataAttribute,\n      noAccessor: true,\n    });\n\n    // Re-define the `ARIAMixin` properties to handle data attribute shifting.\n    // It is safe to use `Object.defineProperty` here because the properties\n    // are native and not renamed.\n    // tslint:disable-next-line:ban-unsafe-reflection\n    Object.defineProperty(ctor.prototype, ariaProperty, {\n      configurable: true,\n      enumerable: true,\n      get(this: ReactiveElement): string | null {\n        return this.dataset[dataProperty] ?? null;\n      },\n      set(this: ReactiveElement, value: string | null): void {\n        const prevValue = this.dataset[dataProperty] ?? null;\n        if (value === prevValue) {\n          return;\n        }\n\n        if (value === null) {\n          delete this.dataset[dataProperty];\n        } else {\n          this.dataset[dataProperty] = value;\n        }\n\n        this.requestUpdate(ariaProperty, prevValue);\n      },\n    });\n  }\n}\n\nfunction ariaAttributeToDataAttribute(ariaAttribute: string) {\n  // aria-haspopup -> data-aria-haspopup\n  return `data-${ariaAttribute}`;\n}\n\nfunction ariaAttributeToDataProperty(ariaAttribute: string) {\n  // aria-haspopup -> dataset.ariaHaspopup\n  return ariaAttribute.replace(/-\\w/, (dashLetter) =>\n    dashLetter[1].toUpperCase(),\n  );\n}\n"]}

package/labs/navigationbar/internal/navigation-bar.d.ts

@@ -7,13 +7,14 @@ import '../../../elevation/elevation.js';
 import { LitElement, PropertyValues } from 'lit';
 import { NavigationTab } from '../../navigationtab/internal/navigation-tab.js';
 import { NavigationBarState } from './state.js';
+declare const navigationBarBaseClass: import("../../behaviors/mixin.js").MixinReturn<typeof LitElement>;
 /**
  * b/265346501 - add docs
  *
  * @fires navigation-bar-activated {CustomEvent<tab: NavigationTab, activeIndex: number>}
  * Dispatched whenever the `activeIndex` changes. --bubbles --composed
  */
-export declare class NavigationBar extends LitElement implements NavigationBarState {
+export declare class NavigationBar extends navigationBarBaseClass implements NavigationBarState {
     activeIndex: number;
     hideInactiveLabels: boolean;
     tabs: NavigationTab[];
@@ -28,3 +29,4 @@ export declare class NavigationBar extends LitElement implements NavigationBarSt
     private onActiveIndexChange;
     private onHideInactiveLabelsChange;
 }
+export {};

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

@@ -7,15 +7,17 @@ import { __decorate } from "tslib";
 import '../../../elevation/elevation.js';
 import { html, LitElement, nothing } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
-import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
+import { mixinDelegatesAria } from '../../../internal/aria/delegate.js';
 import { isRtl } from '../../../internal/controller/is-rtl.js';
+// Separate variable needed for closure.
+const navigationBarBaseClass = mixinDelegatesAria(LitElement);
 /**
  * b/265346501 - add docs
  *
  * @fires navigation-bar-activated {CustomEvent<tab: NavigationTab, activeIndex: number>}
  * Dispatched whenever the `activeIndex` changes. --bubbles --composed
  */
-export class NavigationBar extends LitElement {
+export class NavigationBar extends navigationBarBaseClass {
     constructor() {
         super(...arguments);
         this.activeIndex = 0;
@@ -130,9 +132,6 @@ export class NavigationBar extends LitElement {
         }
     }
 }
-(() => {
-    requestUpdateOnAriaChange(NavigationBar);
-})();
 __decorate([
     property({ type: Number, attribute: 'active-index' })
 ], NavigationBar.prototype, "activeIndex", void 0);