@material/web 2.5.1-nightly.b4de401.0 → 2.5.1-nightly.bd360db.0

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

@@ -44,6 +44,16 @@ export declare class IconButton extends iconButtonBaseClass {
      * Sets the underlying `HTMLAnchorElement`'s `target` attribute.
      */
     target: LinkTarget | '';
+    /**
+     * Sets the underlying `HTMLAnchorElement`'s `rel` attribute when `href` is
+     * set.
+     */
+    rel: string;
+    /**
+     * Sets the underlying `HTMLAnchorElement`'s `referrerpolicy` attribute when
+     * `href` is set.
+     */
+    referrerPolicy: string;
     /**
      * The `aria-label` of the button when the button is toggleable and selected.
      */

package/iconbutton/internal/icon-button.js

@@ -12,6 +12,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { literal, html as staticHtml } from 'lit/static-html.js';
 import { mixinDelegatesAria } from '../../internal/aria/delegate.js';
 import { isRtl } from '../../internal/controller/is-rtl.js';
+import { safeHref } from '../../internal/directives/safe-href.js';
 import { afterDispatch, setupDispatchHooks, } from '../../internal/events/dispatch-hooks.js';
 import { mixinElementInternals } from '../../labs/behaviors/element-internals.js';
 import { mixinFormAssociated } from '../../labs/behaviors/form-associated.js';
@@ -54,6 +55,16 @@ export class IconButton extends iconButtonBaseClass {
          * Sets the underlying `HTMLAnchorElement`'s `target` attribute.
          */
         this.target = '';
+        /**
+         * Sets the underlying `HTMLAnchorElement`'s `rel` attribute when `href` is
+         * set.
+         */
+        this.rel = '';
+        /**
+         * Sets the underlying `HTMLAnchorElement`'s `referrerpolicy` attribute when
+         * `href` is set.
+         */
+        this.referrerPolicy = '';
         /**
          * The `aria-label` of the button when the button is toggleable and selected.
          */
@@ -96,7 +107,7 @@ export class IconButton extends iconButtonBaseClass {
                 // Additionally, native change event is not an InputEvent.
                 this.dispatchEvent(new Event('change', { bubbles: true }));
             });
-        });
+        }, { capture: true });
     }
     willUpdate() {
         // Link buttons cannot be disabled or soft-disabled.
@@ -141,9 +152,11 @@ export class IconButton extends iconButtonBaseClass {
       <a
         class="link"
         id="link"
-        href="${this.href}"
+        href=${safeHref(this.href)}
         download="${this.download || nothing}"
         target="${this.target || nothing}"
+        rel=${this.rel || nothing}
+        referrerpolicy=${this.referrerPolicy || nothing}
         aria-label="${ariaLabel || nothing}">
         ${this.renderTouchTarget()}
       </a>
@@ -205,6 +218,12 @@ __decorate([
 __decorate([
     property()
 ], IconButton.prototype, "target", void 0);
+__decorate([
+    property()
+], IconButton.prototype, "rel", void 0);
+__decorate([
+    property()
+], IconButton.prototype, "referrerPolicy", void 0);
 __decorate([
     property({ attribute: 'aria-label-selected' })
 ], IconButton.prototype, "ariaLabelSelected", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, 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 {isRtl} from '../../internal/controller/is-rtl.js';\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../internal/events/dispatch-hooks.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../labs/behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';\n\ntype LinkTarget = '_blank' | '_parent' | '_self' | '_top';\n\n// Separate variable needed for closure.\nconst iconButtonBaseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(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 {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /**\n   * \"Soft-disables\" the icon button (disabled but still focusable).\n   *\n   * Use this when an icon button needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = 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   * The filename to use when downloading the linked resource.\n   * If not specified, the browser will determine a filename.\n   * This is only applicable when the icon button is used as a link (`href` is set).\n   */\n  @property() download = '';\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  @state() private flipIcon = isRtl(this, this.flipIconInRtl);\n\n  constructor() {\n    super();\n    if (isServer) return;\n    setupDispatchHooks(this, 'click');\n    this.addEventListener('click', (event) => {\n      // If the button is soft-disabled or a disabled link, we need to\n      // explicitly prevent the click from propagating to other event listeners\n      // as well as prevent the default action. This is because the underlying\n      // `<button>` or `<a>` element is not actually `:disabled`.\n      if (this.softDisabled || (this.disabled && this.href)) {\n        event.stopImmediatePropagation();\n        event.preventDefault();\n        return;\n      }\n\n      // Save current selected state to toggle, since an external event listener\n      // may also change the selected state on click.\n      const wasSelected = this.selected;\n      afterDispatch(event, () => {\n        if (!this.toggle || this.disabled || event.defaultPrevented) {\n          return;\n        }\n\n        this.selected = !wasSelected;\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  }\n\n  protected override willUpdate() {\n    // Link buttons cannot be disabled or soft-disabled.\n    if (this.href) {\n      this.disabled = false;\n      this.softDisabled = 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        aria-disabled=${(!this.href && this.softDisabled) || nothing}\n        ?disabled=\"${!this.href && this.disabled}\">\n        ${this.renderFocusRing()}\n        ${this.renderRipple()}\n        ${!this.selected ? this.renderIcon() : nothing}\n        ${this.selected ? this.renderSelectedIcon() : nothing}\n        ${this.href ? this.renderLink() : this.renderTouchTarget()}\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        download=\"${this.download || nothing}\"\n        target=\"${this.target || nothing}\"\n        aria-label=\"${ariaLabel || nothing}\">\n        ${this.renderTouchTarget()}\n      </a>\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'flip-icon': this.flipIcon,\n      'selected': this.toggle && this.selected,\n    };\n  }\n\n  private renderIcon() {\n    return html`<span class=\"icon\"><slot></slot></span>`;\n  }\n\n  private renderSelectedIcon() {\n    // Use default slot as fallback to not require specifying multiple icons\n    return html`<span class=\"icon icon--selected\"\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    const isRippleDisabled = !this.href && (this.disabled || this.softDisabled);\n    // TODO(b/310046938): use the same id for both elements\n    return html`<md-ripple\n      for=${this.href ? 'link' : nothing}\n      ?disabled=\"${isRippleDisabled}\"></md-ripple>`;\n  }\n\n  override connectedCallback() {\n    this.flipIcon = isRtl(this, this.flipIconInRtl);\n    super.connectedCallback();\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, isServer, 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 {isRtl} from '../../internal/controller/is-rtl.js';\nimport {safeHref} from '../../internal/directives/safe-href.js';\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../internal/events/dispatch-hooks.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../labs/behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';\n\ntype LinkTarget = '_blank' | '_parent' | '_self' | '_top';\n\n// Separate variable needed for closure.\nconst iconButtonBaseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(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 {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /**\n   * \"Soft-disables\" the icon button (disabled but still focusable).\n   *\n   * Use this when an icon button needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = 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   * The filename to use when downloading the linked resource.\n   * If not specified, the browser will determine a filename.\n   * This is only applicable when the icon button is used as a link (`href` is set).\n   */\n  @property() download = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n   */\n  @property() target: LinkTarget | '' = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `rel` attribute when `href` is\n   * set.\n   */\n  @property() rel = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `referrerpolicy` attribute when\n   * `href` is set.\n   */\n  @property() referrerPolicy = '';\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  @state() private flipIcon = isRtl(this, this.flipIconInRtl);\n\n  constructor() {\n    super();\n    if (isServer) return;\n    setupDispatchHooks(this, 'click');\n    this.addEventListener(\n      'click',\n      (event) => {\n        // If the button is soft-disabled or a disabled link, we need to\n        // explicitly prevent the click from propagating to other event listeners\n        // as well as prevent the default action. This is because the underlying\n        // `<button>` or `<a>` element is not actually `:disabled`.\n        if (this.softDisabled || (this.disabled && this.href)) {\n          event.stopImmediatePropagation();\n          event.preventDefault();\n          return;\n        }\n\n        // Save current selected state to toggle, since an external event listener\n        // may also change the selected state on click.\n        const wasSelected = this.selected;\n        afterDispatch(event, () => {\n          if (!this.toggle || this.disabled || event.defaultPrevented) {\n            return;\n          }\n\n          this.selected = !wasSelected;\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      {capture: true},\n    );\n  }\n\n  protected override willUpdate() {\n    // Link buttons cannot be disabled or soft-disabled.\n    if (this.href) {\n      this.disabled = false;\n      this.softDisabled = 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        aria-disabled=${(!this.href && this.softDisabled) || nothing}\n        ?disabled=\"${!this.href && this.disabled}\">\n        ${this.renderFocusRing()}\n        ${this.renderRipple()}\n        ${!this.selected ? this.renderIcon() : nothing}\n        ${this.selected ? this.renderSelectedIcon() : nothing}\n        ${this.href ? this.renderLink() : this.renderTouchTarget()}\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=${safeHref(this.href)}\n        download=\"${this.download || nothing}\"\n        target=\"${this.target || nothing}\"\n        rel=${this.rel || nothing}\n        referrerpolicy=${this.referrerPolicy || nothing}\n        aria-label=\"${ariaLabel || nothing}\">\n        ${this.renderTouchTarget()}\n      </a>\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'flip-icon': this.flipIcon,\n      'selected': this.toggle && this.selected,\n    };\n  }\n\n  private renderIcon() {\n    return html`<span class=\"icon\"><slot></slot></span>`;\n  }\n\n  private renderSelectedIcon() {\n    // Use default slot as fallback to not require specifying multiple icons\n    return html`<span class=\"icon icon--selected\"\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    const isRippleDisabled = !this.href && (this.disabled || this.softDisabled);\n    // TODO(b/310046938): use the same id for both elements\n    return html`<md-ripple\n      for=${this.href ? 'link' : nothing}\n      ?disabled=\"${isRippleDisabled}\"></md-ripple>`;\n  }\n\n  override connectedCallback() {\n    this.flipIcon = isRtl(this, this.flipIconInRtl);\n    super.connectedCallback();\n  }\n}\n"]}

package/internal/directives/safe-href.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { noChange, nothing } from 'lit';
+import { type AttributePart, Directive, type DirectiveParameters, type PartInfo } from 'lit/directive.js';
+/**
+ * A Lit directive that sanitizes URLs for href attributes and properties.
+ */
+export declare class SafeHrefDirective extends Directive {
+    constructor(partInfo: PartInfo);
+    render(value?: string | null | undefined | typeof nothing): string | typeof nothing;
+    update(part: AttributePart, [value]: DirectiveParameters<SafeHrefDirective>): typeof noChange | typeof nothing;
+}
+/**
+ * A Lit directive that sanitizes URLs for `href` attribute and property
+ * bindings.
+ *
+ * @param value The URL value to sanitize.
+ * @return A directive result that renders the sanitized URL or `nothing`.
+ */
+export declare const safeHref: (value?: string | typeof nothing) => import("lit-html/directive.js").DirectiveResult<typeof SafeHrefDirective>;

package/internal/directives/safe-href.js

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { noChange, nothing } from 'lit';
+import { directive, Directive, PartType, } from 'lit/directive.js';
+import { setAnchorHref } from 'safevalues/dom';
+/**
+ * A Lit directive that sanitizes URLs for href attributes and properties.
+ */
+export class SafeHrefDirective extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        if (partInfo.type !== PartType.ATTRIBUTE &&
+            partInfo.type !== PartType.PROPERTY) {
+            throw new Error('safeHref can only be used on attribute or property bindings');
+        }
+        if (partInfo.name !== 'href') {
+            throw new Error('safeHref() directive can only be used on "href" attribute or property bindings.');
+        }
+    }
+    render(value) {
+        return value || nothing;
+    }
+    update(part, [value]) {
+        const element = part.element;
+        element.removeAttribute('href');
+        if (!value || value === nothing) {
+            return nothing;
+        }
+        setAnchorHref(element, value);
+        return noChange;
+    }
+}
+/**
+ * A Lit directive that sanitizes URLs for `href` attribute and property
+ * bindings.
+ *
+ * @param value The URL value to sanitize.
+ * @return A directive result that renders the sanitized URL or `nothing`.
+ */
+export const safeHref = directive(SafeHrefDirective);
+//# sourceMappingURL=safe-href.js.map

package/internal/directives/safe-href.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-href.js","sourceRoot":"","sources":["safe-href.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtC,OAAO,EAEL,SAAS,EACT,SAAS,EAGT,QAAQ,GACT,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,SAAS;IAC9C,YAAY,QAAkB;QAC5B,KAAK,CAAC,QAAQ,CAAC,CAAC;QAChB,IACE,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC,SAAS;YACpC,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC,QAAQ,EACnC,CAAC;YACD,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAC;QACJ,CAAC;QACD,IAAI,QAAQ,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CACb,iFAAiF,CAClF,CAAC;QACJ,CAAC;IACH,CAAC;IAED,MAAM,CACJ,KAAkD;QAElD,OAAO,KAAK,IAAI,OAAO,CAAC;IAC1B,CAAC;IAEQ,MAAM,CACb,IAAmB,EACnB,CAAC,KAAK,CAAyC;QAE/C,MAAM,OAAO,GAAG,IAAI,CAAC,OAA4B,CAAC;QAClD,OAAO,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;YAChC,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAC9B,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {noChange, nothing} from 'lit';\nimport {\n  type AttributePart,\n  directive,\n  Directive,\n  type DirectiveParameters,\n  type PartInfo,\n  PartType,\n} from 'lit/directive.js';\nimport {setAnchorHref} from 'safevalues/dom';\n\n/**\n * A Lit directive that sanitizes URLs for href attributes and properties.\n */\nexport class SafeHrefDirective extends Directive {\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    if (\n      partInfo.type !== PartType.ATTRIBUTE &&\n      partInfo.type !== PartType.PROPERTY\n    ) {\n      throw new Error(\n        'safeHref can only be used on attribute or property bindings',\n      );\n    }\n    if (partInfo.name !== 'href') {\n      throw new Error(\n        'safeHref() directive can only be used on \"href\" attribute or property bindings.',\n      );\n    }\n  }\n\n  render(\n    value?: string | null | undefined | typeof nothing,\n  ): string | typeof nothing {\n    return value || nothing;\n  }\n\n  override update(\n    part: AttributePart,\n    [value]: DirectiveParameters<SafeHrefDirective>,\n  ) {\n    const element = part.element as HTMLAnchorElement;\n    element.removeAttribute('href');\n    if (!value || value === nothing) {\n      return nothing;\n    }\n    setAnchorHref(element, value);\n    return noChange;\n  }\n}\n\n/**\n * A Lit directive that sanitizes URLs for `href` attribute and property\n * bindings.\n *\n * @param value The URL value to sanitize.\n * @return A directive result that renders the sanitized URL or `nothing`.\n */\nexport const safeHref = directive(SafeHrefDirective);\n"]}

package/labs/aria/buttons/keyboard_click_handler.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Options for configuring keyboard click handling.
+ */
+export interface KeyboardClickHandlerOptions {
+    /**
+     * Optional function to determine if the element is disabled.
+     *
+     * Defaults to checking for disabled attributes or pseudo-classes.
+     */
+    isDisabled?: () => boolean;
+}
+/**
+ * Sets up button-like keyboard click activation for an element (Enter on
+ * keydown, Space on keyup).
+ *
+ * @param element The target HTMLElement.
+ * @param options Additional setup options.
+ * @return A cleanup function that removes all registered listeners.
+ */
+export declare function setupKeyboardClickHandler(element: HTMLElement, options?: KeyboardClickHandlerOptions): () => void;

package/labs/aria/buttons/keyboard_click_handler.js

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { afterDispatch, setupDispatchHooks, } from '../../../internal/events/dispatch-hooks.js';
+import { isDisabled as defaultIsDisabled } from '../pseudo-classes.js';
+/**
+ * Sets up button-like keyboard click activation for an element (Enter on
+ * keydown, Space on keyup).
+ *
+ * @param element The target HTMLElement.
+ * @param options Additional setup options.
+ * @return A cleanup function that removes all registered listeners.
+ */
+export function setupKeyboardClickHandler(element, options) {
+    const isDisabled = options?.isDisabled ?? (() => defaultIsDisabled(element));
+    // Tracks whether Space was pressed down on this element.
+    let isSpacePressed = false;
+    // Intercepts event dispatch to allow `afterDispatch` callbacks to run after
+    // the event has completely finished bubbling.
+    setupDispatchHooks(element, 'keydown', 'keyup');
+    const isSpace = (event) => event.key === ' ';
+    const isEnter = (event) => event.key === 'Enter';
+    const onKeyDown = (event) => {
+        if (!(isSpace(event) || isEnter(event)) || isDisabled()) {
+            return;
+        }
+        // Defer activation until after dispatch so keydown listeners can cancel
+        // via preventDefault().
+        afterDispatch(event, () => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            if (isSpace(event)) {
+                // Space activates on keyup, record that it is currently pressed.
+                isSpacePressed = true;
+                // Space natively scrolls the page unless prevented synchronously on
+                // keydown.
+                event.preventDefault();
+            }
+            else if (isEnter(event)) {
+                // Enter activates on keydown.
+                element.click();
+            }
+        });
+    };
+    const onKeyUp = (event) => {
+        if (!isSpace(event) || isDisabled()) {
+            return;
+        }
+        // Space activates on keyup. Defer click until after dispatch so keyup
+        // listeners can cancel via preventDefault().
+        afterDispatch(event, () => {
+            const wasSpacePressed = isSpacePressed;
+            isSpacePressed = false;
+            if (!event.defaultPrevented && wasSpacePressed) {
+                element.click();
+            }
+        });
+    };
+    // Reset pressed state if focus leaves the element before keyup.
+    const onBlur = () => {
+        isSpacePressed = false;
+    };
+    const controller = new AbortController();
+    element.addEventListener('keydown', onKeyDown, { signal: controller.signal });
+    element.addEventListener('keyup', onKeyUp, { signal: controller.signal });
+    element.addEventListener('blur', onBlur, { signal: controller.signal });
+    return () => {
+        controller.abort();
+    };
+}
+//# sourceMappingURL=keyboard_click_handler.js.map

package/labs/aria/buttons/keyboard_click_handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard_click_handler.js","sourceRoot":"","sources":["keyboard_click_handler.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,aAAa,EACb,kBAAkB,GACnB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAC,UAAU,IAAI,iBAAiB,EAAC,MAAM,sBAAsB,CAAC;AAcrE;;;;;;;GAOG;AACH,MAAM,UAAU,yBAAyB,CACvC,OAAoB,EACpB,OAAqC;IAErC,MAAM,UAAU,GAAG,OAAO,EAAE,UAAU,IAAI,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC;IAE7E,yDAAyD;IACzD,IAAI,cAAc,GAAG,KAAK,CAAC;IAE3B,4EAA4E;IAC5E,8CAA8C;IAC9C,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC;IAC5D,MAAM,OAAO,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,CAAC;IAEhE,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;QACzC,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,UAAU,EAAE,EAAE,CAAC;YACxD,OAAO;QACT,CAAC;QAED,wEAAwE;QACxE,wBAAwB;QACxB,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE;YACxB,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAC3B,OAAO;YACT,CAAC;YAED,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACnB,iEAAiE;gBACjE,cAAc,GAAG,IAAI,CAAC;gBACtB,oEAAoE;gBACpE,WAAW;gBACX,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;iBAAM,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC1B,8BAA8B;gBAC9B,OAAO,CAAC,KAAK,EAAE,CAAC;YAClB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,KAAoB,EAAE,EAAE;QACvC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,UAAU,EAAE,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,sEAAsE;QACtE,6CAA6C;QAC7C,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE;YACxB,MAAM,eAAe,GAAG,cAAc,CAAC;YACvC,cAAc,GAAG,KAAK,CAAC;YAEvB,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,eAAe,EAAE,CAAC;gBAC/C,OAAO,CAAC,KAAK,EAAE,CAAC;YAClB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,gEAAgE;IAChE,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,cAAc,GAAG,KAAK,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;IACzC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE,EAAC,MAAM,EAAE,UAAU,CAAC,MAAM,EAAC,CAAC,CAAC;IAC5E,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,EAAC,MAAM,EAAE,UAAU,CAAC,MAAM,EAAC,CAAC,CAAC;IACxE,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,EAAC,MAAM,EAAE,UAAU,CAAC,MAAM,EAAC,CAAC,CAAC;IAEtE,OAAO,GAAG,EAAE;QACV,UAAU,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC,CAAC;AACJ,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../internal/events/dispatch-hooks.js';\nimport {isDisabled as defaultIsDisabled} from '../pseudo-classes.js';\n\n/**\n * Options for configuring keyboard click handling.\n */\nexport interface KeyboardClickHandlerOptions {\n  /**\n   * Optional function to determine if the element is disabled.\n   *\n   * Defaults to checking for disabled attributes or pseudo-classes.\n   */\n  isDisabled?: () => boolean;\n}\n\n/**\n * Sets up button-like keyboard click activation for an element (Enter on\n * keydown, Space on keyup).\n *\n * @param element The target HTMLElement.\n * @param options Additional setup options.\n * @return A cleanup function that removes all registered listeners.\n */\nexport function setupKeyboardClickHandler(\n  element: HTMLElement,\n  options?: KeyboardClickHandlerOptions,\n): () => void {\n  const isDisabled = options?.isDisabled ?? (() => defaultIsDisabled(element));\n\n  // Tracks whether Space was pressed down on this element.\n  let isSpacePressed = false;\n\n  // Intercepts event dispatch to allow `afterDispatch` callbacks to run after\n  // the event has completely finished bubbling.\n  setupDispatchHooks(element, 'keydown', 'keyup');\n\n  const isSpace = (event: KeyboardEvent) => event.key === ' ';\n  const isEnter = (event: KeyboardEvent) => event.key === 'Enter';\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (!(isSpace(event) || isEnter(event)) || isDisabled()) {\n      return;\n    }\n\n    // Defer activation until after dispatch so keydown listeners can cancel\n    // via preventDefault().\n    afterDispatch(event, () => {\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      if (isSpace(event)) {\n        // Space activates on keyup, record that it is currently pressed.\n        isSpacePressed = true;\n        // Space natively scrolls the page unless prevented synchronously on\n        // keydown.\n        event.preventDefault();\n      } else if (isEnter(event)) {\n        // Enter activates on keydown.\n        element.click();\n      }\n    });\n  };\n\n  const onKeyUp = (event: KeyboardEvent) => {\n    if (!isSpace(event) || isDisabled()) {\n      return;\n    }\n\n    // Space activates on keyup. Defer click until after dispatch so keyup\n    // listeners can cancel via preventDefault().\n    afterDispatch(event, () => {\n      const wasSpacePressed = isSpacePressed;\n      isSpacePressed = false;\n\n      if (!event.defaultPrevented && wasSpacePressed) {\n        element.click();\n      }\n    });\n  };\n\n  // Reset pressed state if focus leaves the element before keyup.\n  const onBlur = () => {\n    isSpacePressed = false;\n  };\n\n  const controller = new AbortController();\n  element.addEventListener('keydown', onKeyDown, {signal: controller.signal});\n  element.addEventListener('keyup', onKeyUp, {signal: controller.signal});\n  element.addEventListener('blur', onBlur, {signal: controller.signal});\n\n  return () => {\n    controller.abort();\n  };\n}\n"]}

package/labs/aria/buttons/md-aria-toggle.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultGroup } from 'lit';
+import { AriaToggleElement } from './toggle.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** An ARIA toggle button element. */
+        'md-aria-toggle': MdAriaToggleElement;
+    }
+}
+/**
+ * An ARIA toggle button element with default properties and styles.
+ */
+export declare class MdAriaToggleElement extends AriaToggleElement {
+    static styles: CSSResultGroup;
+    /**
+     * Whether the toggle button is selected.
+     */
+    get selected(): boolean;
+    set selected(value: boolean);
+    /**
+     * Whether the toggle button is disabled.
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+}

package/labs/aria/buttons/md-aria-toggle.js

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { AriaToggleElement, isToggleDisabled, isTogglePressed } from './toggle.js';
+/**
+ * An ARIA toggle button element with default properties and styles.
+ */
+let MdAriaToggleElement = class MdAriaToggleElement extends AriaToggleElement {
+    /**
+     * Whether the toggle button is selected.
+     */
+    get selected() {
+        return this[isTogglePressed];
+    }
+    set selected(value) {
+        const oldValue = this.selected;
+        this[isTogglePressed] = value;
+        this.requestUpdate('selected', oldValue); // Remove when Lit 2 support is dropped.
+    }
+    /**
+     * Whether the toggle button is disabled.
+     */
+    get disabled() {
+        return this[isToggleDisabled];
+    }
+    set disabled(value) {
+        const oldValue = this.disabled;
+        this[isToggleDisabled] = value;
+        this.requestUpdate('disabled', oldValue); // Remove when Lit 2 support is dropped.
+    }
+};
+MdAriaToggleElement.styles = [
+    AriaToggleElement.styles,
+    css `
+      :host {
+        background-color: ButtonFace;
+        color: ButtonText;
+      }
+      :host(:state(selected)) {
+        background-color: SelectedItem;
+        color: SelectedItemText;
+      }
+      :host(:focus-visible) {
+        outline: 2px solid AccentColor;
+        outline-offset: 2px;
+      }
+      :host(:state(disabled)) {
+        opacity: 38%;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MdAriaToggleElement.prototype, "selected", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MdAriaToggleElement.prototype, "disabled", null);
+MdAriaToggleElement = __decorate([
+    customElement('md-aria-toggle')
+], MdAriaToggleElement);
+export { MdAriaToggleElement };
+//# sourceMappingURL=md-aria-toggle.js.map

package/labs/aria/buttons/md-aria-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-aria-toggle.js","sourceRoot":"","sources":["md-aria-toggle.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAC,MAAM,aAAa,CAAC;AASjF;;GAEG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB;IAsBxD;;OAEG;IAEH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC;IAC/B,CAAC;IACD,IAAI,QAAQ,CAAC,KAAc;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,eAAe,CAAC,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,wCAAwC;IACpF,CAAC;IAED;;OAEG;IAEH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAChC,CAAC;IACD,IAAI,QAAQ,CAAC,KAAc;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,wCAAwC;IACpF,CAAC;;AA7Ce,0BAAM,GAAmB;IACvC,iBAAiB,CAAC,MAAM;IACxB,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;CACF,AAnBqB,CAmBpB;AAMF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mDAGxC;AAWD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mDAGxC;AAzCU,mBAAmB;IAD/B,aAAa,CAAC,gBAAgB,CAAC;GACnB,mBAAmB,CA+C/B","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultGroup} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport {AriaToggleElement, isToggleDisabled, isTogglePressed} from './toggle.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** An ARIA toggle button element. */\n    'md-aria-toggle': MdAriaToggleElement;\n  }\n}\n\n/**\n * An ARIA toggle button element with default properties and styles.\n */\n@customElement('md-aria-toggle')\nexport class MdAriaToggleElement extends AriaToggleElement {\n  static override styles: CSSResultGroup = [\n    AriaToggleElement.styles,\n    css`\n      :host {\n        background-color: ButtonFace;\n        color: ButtonText;\n      }\n      :host(:state(selected)) {\n        background-color: SelectedItem;\n        color: SelectedItemText;\n      }\n      :host(:focus-visible) {\n        outline: 2px solid AccentColor;\n        outline-offset: 2px;\n      }\n      :host(:state(disabled)) {\n        opacity: 38%;\n      }\n    `,\n  ];\n\n  /**\n   * Whether the toggle button is selected.\n   */\n  @property({type: Boolean, reflect: true})\n  get selected(): boolean {\n    return this[isTogglePressed];\n  }\n  set selected(value: boolean) {\n    const oldValue = this.selected;\n    this[isTogglePressed] = value;\n    this.requestUpdate('selected', oldValue); // Remove when Lit 2 support is dropped.\n  }\n\n  /**\n   * Whether the toggle button is disabled.\n   */\n  @property({type: Boolean, reflect: true})\n  get disabled(): boolean {\n    return this[isToggleDisabled];\n  }\n  set disabled(value: boolean) {\n    const oldValue = this.disabled;\n    this[isToggleDisabled] = value;\n    this.requestUpdate('disabled', oldValue); // Remove when Lit 2 support is dropped.\n  }\n}\n"]}

package/labs/aria/buttons/toggle.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultGroup, LitElement } from 'lit';
+declare const baseClass: import("../../behaviors/mixin.js").MixinReturn<import("../../behaviors/mixin.js").MixinReturn<import("../../behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../behaviors/element-internals.js").WithElementInternals>, import("../../behaviors/custom-state-set.js").WithCustomStateSet>, import("../../behaviors/focusable.js").Focusable>;
+/**
+ * A unique symbol used to check if the toggle button is disabled.
+ */
+export declare const isToggleDisabled: unique symbol;
+/**
+ * A unique symbol used to check if the toggle button is pressed.
+ */
+export declare const isTogglePressed: unique symbol;
+/**
+ * An ARIA toggle button element.
+ *
+ * @fires {InputEvent} input - Fired when the toggle button is pressed or unpressed. --bubbles --composed
+ * @fires {Event} change - Fired when the toggle button is pressed or unpressed. --bubbles
+ * @cssstate selected - Whether the toggle button is selected.
+ * @cssstate enabled - True when the toggle button is enabled.
+ * @cssstate disabled - True when the toggle button is disabled.
+ */
+export declare class AriaToggleElement extends baseClass {
+    static styles: CSSResultGroup;
+    /**
+     * Whether the toggle button is selected.
+     */
+    get [isTogglePressed](): boolean;
+    set [isTogglePressed](value: boolean);
+    /**
+     * Whether the toggle button is disabled.
+     */
+    get [isToggleDisabled](): boolean;
+    set [isToggleDisabled](value: boolean);
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/labs/aria/buttons/toggle.js

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { css, html, isServer, LitElement } from 'lit';
+import { afterDispatch, setupDispatchHooks, } from '../../../internal/events/dispatch-hooks.js';
+import { mixinCustomStateSet, toggleState, } from '../../behaviors/custom-state-set.js';
+import { internals, mixinElementInternals, } from '../../behaviors/element-internals.js';
+import { isFocusable, mixinFocusable } from '../../behaviors/focusable.js';
+import { setupKeyboardClickHandler } from './keyboard_click_handler.js';
+const baseClass = mixinFocusable(mixinCustomStateSet(mixinElementInternals(LitElement)));
+/**
+ * A unique symbol used to check if the toggle button is disabled.
+ */
+export const isToggleDisabled = Symbol('isToggleDisabled');
+/**
+ * A unique symbol used to check if the toggle button is pressed.
+ */
+export const isTogglePressed = Symbol('isTogglePressed');
+/**
+ * An ARIA toggle button element.
+ *
+ * @fires {InputEvent} input - Fired when the toggle button is pressed or unpressed. --bubbles --composed
+ * @fires {Event} change - Fired when the toggle button is pressed or unpressed. --bubbles
+ * @cssstate selected - Whether the toggle button is selected.
+ * @cssstate enabled - True when the toggle button is enabled.
+ * @cssstate disabled - True when the toggle button is disabled.
+ */
+export class AriaToggleElement extends baseClass {
+    /**
+     * Whether the toggle button is selected.
+     */
+    get [isTogglePressed]() {
+        return this[internals].ariaPressed === 'true';
+    }
+    set [isTogglePressed](value) {
+        value = Boolean(value); // coerce for safety
+        this[internals].ariaPressed = String(value);
+        this[toggleState]('selected', value);
+    }
+    /**
+     * Whether the toggle button is disabled.
+     */
+    get [isToggleDisabled]() {
+        return this[internals].ariaDisabled === 'true';
+    }
+    set [isToggleDisabled](value) {
+        value = Boolean(value); // coerce for safety
+        this[internals].ariaDisabled = String(value);
+        this[toggleState]('disabled', value);
+        this[toggleState]('enabled', !value);
+        this[isFocusable] = !value;
+    }
+    constructor() {
+        super();
+        if (isServer)
+            return;
+        this[internals].role = 'button';
+        this[isTogglePressed] = false;
+        this[isToggleDisabled] = false;
+        setupDispatchHooks(this, 'click');
+        setupKeyboardClickHandler(this);
+        this.addEventListener('click', (event) => {
+            if (this[isToggleDisabled]) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            // Toggle state updates synchronously during capture phase before
+            // bubbling to other listeners. This ensures `event.target` has the
+            // correct state.
+            const wasPressed = this[isTogglePressed];
+            this[isTogglePressed] = !wasPressed;
+            afterDispatch(event, () => {
+                if (event.defaultPrevented) {
+                    // Revert state if a listener cancels the click event after the
+                    // event has finished bubbling.
+                    this[isTogglePressed] = wasPressed;
+                    return;
+                }
+                this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+                this.dispatchEvent(new Event('change', { bubbles: true }));
+            });
+        }, { capture: true });
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+AriaToggleElement.styles = css `
+    :host {
+      display: inline-flex;
+      user-select: none;
+    }
+    :host(:state(enabled)) {
+      cursor: pointer;
+    }
+  `;
+//# sourceMappingURL=toggle.js.map

package/labs/aria/buttons/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["toggle.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultGroup, html, isServer, LitElement} from 'lit';\n\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../internal/events/dispatch-hooks.js';\nimport {\n  mixinCustomStateSet,\n  toggleState,\n} from '../../behaviors/custom-state-set.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../behaviors/element-internals.js';\nimport {isFocusable, mixinFocusable} from '../../behaviors/focusable.js';\nimport {setupKeyboardClickHandler} from './keyboard_click_handler.js';\n\nconst baseClass = mixinFocusable(\n  mixinCustomStateSet(mixinElementInternals(LitElement)),\n);\n\n/**\n * A unique symbol used to check if the toggle button is disabled.\n */\nexport const isToggleDisabled = Symbol('isToggleDisabled');\n\n/**\n * A unique symbol used to check if the toggle button is pressed.\n */\nexport const isTogglePressed = Symbol('isTogglePressed');\n\n/**\n * An ARIA toggle button element.\n *\n * @fires {InputEvent} input - Fired when the toggle button is pressed or unpressed. --bubbles --composed\n * @fires {Event} change - Fired when the toggle button is pressed or unpressed. --bubbles\n * @cssstate selected - Whether the toggle button is selected.\n * @cssstate enabled - True when the toggle button is enabled.\n * @cssstate disabled - True when the toggle button is disabled.\n */\nexport class AriaToggleElement extends baseClass {\n  static override styles: CSSResultGroup = css`\n    :host {\n      display: inline-flex;\n      user-select: none;\n    }\n    :host(:state(enabled)) {\n      cursor: pointer;\n    }\n  `;\n\n  /**\n   * Whether the toggle button is selected.\n   */\n  get [isTogglePressed](): boolean {\n    return this[internals].ariaPressed === 'true';\n  }\n  set [isTogglePressed](value: boolean) {\n    value = Boolean(value); // coerce for safety\n    this[internals].ariaPressed = String(value);\n    this[toggleState]('selected', value);\n  }\n\n  /**\n   * Whether the toggle button is disabled.\n   */\n  get [isToggleDisabled](): boolean {\n    return this[internals].ariaDisabled === 'true';\n  }\n  set [isToggleDisabled](value: boolean) {\n    value = Boolean(value); // coerce for safety\n    this[internals].ariaDisabled = String(value);\n    this[toggleState]('disabled', value);\n    this[toggleState]('enabled', !value);\n    this[isFocusable] = !value;\n  }\n\n  constructor() {\n    super();\n    if (isServer) return;\n\n    this[internals].role = 'button';\n    this[isTogglePressed] = false;\n    this[isToggleDisabled] = false;\n\n    setupDispatchHooks(this, 'click');\n    setupKeyboardClickHandler(this);\n\n    this.addEventListener(\n      'click',\n      (event: MouseEvent) => {\n        if (this[isToggleDisabled]) {\n          event.stopImmediatePropagation();\n          event.preventDefault();\n          return;\n        }\n\n        // Toggle state updates synchronously during capture phase before\n        // bubbling to other listeners. This ensures `event.target` has the\n        // correct state.\n        const wasPressed = this[isTogglePressed];\n        this[isTogglePressed] = !wasPressed;\n        afterDispatch(event, () => {\n          if (event.defaultPrevented) {\n            // Revert state if a listener cancels the click event after the\n            // event has finished bubbling.\n            this[isTogglePressed] = wasPressed;\n            return;\n          }\n\n          this.dispatchEvent(\n            new InputEvent('input', {bubbles: true, composed: true}),\n          );\n          this.dispatchEvent(new Event('change', {bubbles: true}));\n        });\n      },\n      {capture: true},\n    );\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n"]}

package/labs/aria/command.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Performs the 'shared command invoker activation steps' for a button or
+ * menuitem, to be called when that element is activated: either runs a command
+ * (i.e. the element has `command` and `commandfor` attributes) or changes a
+ * popover's state (i.e. the element has the `popovertarget` and possibly
+ * `popovertargetaction` attributes).
+ *
+ * https://whatpr.org/html/12011/popover.html#shared-command-invoker-activation-steps
+ *
+ * @param element The button or menuitem being activated.
+ * @param event The event that activated `element`.
+ */
+export declare function sharedCommandInvokerActivationSteps(element: HTMLElement, event: Event): void;