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

package/switch/internal/switch.js

@@ -10,7 +10,7 @@ import { html, isServer, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
-import { dispatchActivationClick, isActivationClick } from '../../internal/controller/events.js';
+import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../internal/controller/events.js';
 /**
  * @fires input {InputEvent} Fired whenever `selected` changes due to user
  * interaction (bubbles and composed).
@@ -39,6 +39,38 @@ export class Switch extends LitElement {
     get labels() {
         return this.internals.labels;
     }
+    /**
+     * Returns a ValidityState object that represents the validity states of the
+     * switch.
+     *
+     * Note that switches will only set `valueMissing` if `required` and not
+     * selected.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+     */
+    get validity() {
+        this.syncValidity();
+        return this.internals.validity;
+    }
+    /**
+     * Returns the native validation error message.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process
+     */
+    get validationMessage() {
+        this.syncValidity();
+        return this.internals.validationMessage;
+    }
+    /**
+     * Returns whether an element will successfully validate based on forms
+     * validation rules and constraints.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process
+     */
+    get willValidate() {
+        this.syncValidity();
+        return this.internals.willValidate;
+    }
     constructor() {
         super();
         /**
@@ -59,6 +91,13 @@ export class Switch extends LitElement {
          * overrides the behavior of the `icons` property.
          */
         this.showOnlySelectedIcon = false;
+        /**
+         * When true, require the switch to be selected when participating in
+         * form submission.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+         */
+        this.required = false;
         /**
          * The value associated with this switch on form submission. `null` is
          * submitted when `selected` is `false`.
@@ -70,14 +109,56 @@ export class Switch extends LitElement {
                 if (!isActivationClick(event)) {
                     return;
                 }
-                this.button?.focus();
-                if (this.button != null) {
-                    // this triggers the click behavior, and the ripple
-                    dispatchActivationClick(this.button);
-                }
+                this.focus();
+                dispatchActivationClick(this.input);
             });
         }
     }
+    /**
+     * Checks the switch's native validation and returns whether or not the
+     * element is valid.
+     *
+     * If invalid, this method will dispatch the `invalid` event.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
+     *
+     * @return true if the switch is valid, or false if not.
+     */
+    checkValidity() {
+        this.syncValidity();
+        return this.internals.checkValidity();
+    }
+    /**
+     * Checks the switch's native validation and returns whether or not the
+     * element is valid.
+     *
+     * If invalid, this method will dispatch the `invalid` event.
+     *
+     * The `validationMessage` is reported to the user by the browser. Use
+     * `setCustomValidity()` to customize the `validationMessage`.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity
+     *
+     * @return true if the switch is valid, or false if not.
+     */
+    reportValidity() {
+        this.syncValidity();
+        return this.internals.reportValidity();
+    }
+    /**
+     * Sets the switch's native validation error message. This is used to
+     * customize `validationMessage`.
+     *
+     * When the error is not an empty string, the switch is considered invalid
+     * and `validity.customError` will be true.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
+     *
+     * @param error The error message to display.
+     */
+    setCustomValidity(error) {
+        this.internals.setValidity({ customError: !!error }, error, this.getInput());
+    }
     update(changed) {
         const state = String(this.selected);
         this.internals.setFormValue(this.selected ? this.value : null, state);
@@ -88,40 +169,49 @@ export class Switch extends LitElement {
         // content](https://html.spec.whatwg.org/multipage/dom.html#phrasing-content)
         // children, which includes custom elements, but not `div`s
         return html `
-      <button
-        id="switch"
-        type="button"
-        class="switch ${classMap(this.getRenderClasses())}"
-        role="switch"
-        aria-checked="${this.selected}"
-        aria-label=${this.ariaLabel || nothing}
-        ?disabled=${this.disabled}
-        @click=${this.handleClick}
-      >
-        <md-focus-ring part="focus-ring"></md-focus-ring>
+      <div class="switch ${classMap(this.getRenderClasses())}">
+        <input
+          id="switch"
+          class="touch"
+          type="checkbox"
+          role="switch"
+          aria-label=${this.ariaLabel || nothing}
+          ?checked=${this.selected}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @change=${this.handleChange}
+        >
+
+        <md-focus-ring part="focus-ring" for="switch"></md-focus-ring>
         <span class="track">
           ${this.renderHandle()}
         </span>
-      </button>
+      </div>
     `;
     }
+    updated() {
+        // Sync validity when properties change, since validation properties may
+        // have changed.
+        this.syncValidity();
+    }
     getRenderClasses() {
         return {
-            'switch--selected': this.selected,
-            'switch--unselected': !this.selected,
+            'selected': this.selected,
+            'unselected': !this.selected,
+            'disabled': this.disabled,
         };
     }
     renderHandle() {
         const classes = {
-            'with-icon': this.icons || (this.showOnlySelectedIcon && this.selected),
+            'with-icon': this.showOnlySelectedIcon ? this.selected : this.icons,
         };
         return html `
+      ${this.renderTouchTarget()}
       <span class="handle-container">
         <md-ripple for="switch" ?disabled="${this.disabled}"></md-ripple>
         <span class="handle ${classMap(classes)}">
           ${this.shouldShowIcons() ? this.renderIcons() : html ``}
         </span>
-        ${this.renderTouchTarget()}
       </span>
     `;
     }
@@ -159,15 +249,36 @@ export class Switch extends LitElement {
     shouldShowIcons() {
         return this.icons || this.showOnlySelectedIcon;
     }
-    handleClick() {
-        if (this.disabled) {
-            return;
+    handleChange(event) {
+        const target = event.target;
+        this.selected = target.checked;
+        redispatchEvent(this, event);
+    }
+    syncValidity() {
+        // Sync the internal <input>'s validity and the host's ElementInternals
+        // validity. We do this to re-use native `<input>` validation messages.
+        const input = this.getInput();
+        if (this.internals.validity.customError) {
+            input.setCustomValidity(this.internals.validationMessage);
+        }
+        else {
+            input.setCustomValidity('');
         }
-        this.selected = !this.selected;
-        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
-        // Bubbles but does not compose to mimic native browser <input> & <select>
-        // Additionally, native change event is not an InputEvent.
-        this.dispatchEvent(new Event('change', { bubbles: true }));
+        this.internals.setValidity(input.validity, input.validationMessage, this.getInput());
+    }
+    getInput() {
+        if (!this.input) {
+            // If the input is not yet defined, synchronously render.
+            this.connectedCallback();
+            this.performUpdate();
+        }
+        if (this.isUpdatePending) {
+            // If there are pending updates, synchronously perform them. This ensures
+            // that constraint validation properties (like `required`) are synced
+            // before interacting with input APIs that depend on them.
+            this.scheduleUpdate();
+        }
+        return this.input;
     }
     /** @private */
     formResetCallback() {
@@ -200,9 +311,12 @@ __decorate([
     property({ type: Boolean, attribute: 'show-only-selected-icon' })
 ], Switch.prototype, "showOnlySelectedIcon", void 0);
 __decorate([
-    query('button')
-], Switch.prototype, "button", void 0);
+    property({ type: Boolean })
+], Switch.prototype, "required", void 0);
 __decorate([
     property()
 ], Switch.prototype, "value", void 0);
+__decorate([
+    query('input')
+], Switch.prototype, "input", void 0);
 //# sourceMappingURL=switch.js.map

package/switch/internal/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["switch.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 '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick} from '../../internal/controller/events.js';\n\n/**\n * @fires input {InputEvent} Fired whenever `selected` changes due to user\n * interaction (bubbles and composed).\n * @fires change {Event} Fired whenever `selected` changes due to user\n * interaction (bubbles).\n */\nexport class Switch extends LitElement {\n  static {\n    requestUpdateOnAriaChange(Switch);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  /** @nocollapse */\n  static formAssociated = true;\n\n  /**\n   * Disables the switch and makes it non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Puts the switch in the selected state and sets the form submission value to\n   * the `value` property.\n   */\n  @property({type: Boolean}) selected = false;\n\n  /**\n   * Shows both the selected and deselected icons.\n   */\n  @property({type: Boolean}) icons = false;\n\n  /**\n   * Shows only the selected icon, and not the deselected icon. If `true`,\n   * overrides the behavior of the `icons` property.\n   */\n  @property({type: Boolean, attribute: 'show-only-selected-icon'})\n  showOnlySelectedIcon = false;\n\n  // Button\n  @query('button') private readonly button!: HTMLButtonElement|null;\n\n  /**\n   * The value associated with this switch on form submission. `null` is\n   * submitted when `selected` is `false`.\n   */\n  @property() value = 'on';\n\n  /**\n   * The HTML name to use in form submission.\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  private readonly internals =\n      (this as HTMLElement /* needed for closure */).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', (event: MouseEvent) => {\n        if (!isActivationClick(event)) {\n          return;\n        }\n        this.button?.focus();\n        if (this.button != null) {\n          // this triggers the click behavior, and the ripple\n          dispatchActivationClick(this.button);\n        }\n      });\n    }\n  }\n\n  protected override update(changed: PropertyValues<Switch>) {\n    const state = String(this.selected);\n    this.internals.setFormValue(this.selected ? this.value : null, state);\n    super.update(changed);\n  }\n\n  protected override render(): TemplateResult {\n    // NOTE: buttons must use only [phrasing\n    // content](https://html.spec.whatwg.org/multipage/dom.html#phrasing-content)\n    // children, which includes custom elements, but not `div`s\n    return html`\n      <button\n        id=\"switch\"\n        type=\"button\"\n        class=\"switch ${classMap(this.getRenderClasses())}\"\n        role=\"switch\"\n        aria-checked=\"${this.selected}\"\n        aria-label=${(this as ARIAMixin).ariaLabel || nothing}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n      >\n        <md-focus-ring part=\"focus-ring\"></md-focus-ring>\n        <span class=\"track\">\n          ${this.renderHandle()}\n        </span>\n      </button>\n    `;\n  }\n\n  private getRenderClasses(): ClassInfo {\n    return {\n      'switch--selected': this.selected,\n      'switch--unselected': !this.selected,\n    };\n  }\n\n  private renderHandle() {\n    const classes = {\n      'with-icon': this.icons || (this.showOnlySelectedIcon && this.selected),\n    };\n    return html`\n      <span class=\"handle-container\">\n        <md-ripple for=\"switch\" ?disabled=\"${this.disabled}\"></md-ripple>\n        <span class=\"handle ${classMap(classes)}\">\n          ${this.shouldShowIcons() ? this.renderIcons() : html``}\n        </span>\n        ${this.renderTouchTarget()}\n      </span>\n    `;\n  }\n\n  private renderIcons() {\n    return html`\n      <div class=\"icons\">\n        ${this.renderOnIcon()}\n        ${this.showOnlySelectedIcon ? html`` : this.renderOffIcon()}\n      </div>\n    `;\n  }\n\n  /**\n   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n   */\n  private renderOnIcon() {\n    return html`\n      <svg class=\"icon icon--on\" viewBox=\"0 0 24 24\">\n        <path d=\"M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z\"/>\n      </svg>\n    `;\n  }\n\n  /**\n   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n   */\n  private renderOffIcon() {\n    return html`\n      <svg class=\"icon icon--off\" viewBox=\"0 0 24 24\">\n        <path d=\"M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z\"/>\n      </svg>\n    `;\n  }\n\n  private renderTouchTarget() {\n    return html`<span class=\"touch\"></span>`;\n  }\n\n  private shouldShowIcons(): boolean {\n    return this.icons || this.showOnlySelectedIcon;\n  }\n\n  private handleClick() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.dispatchEvent(\n        new InputEvent('input', {bubbles: true, composed: true}));\n    // Bubbles but does not compose to mimic native browser <input> & <select>\n    // Additionally, native change event is not an InputEvent.\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n\n  /** @private */\n  formResetCallback() {\n    // The selected property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.selected = this.hasAttribute('selected');\n  }\n\n  /** @private */\n  formStateRestoreCallback(state: string) {\n    this.selected = state === 'true';\n  }\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["switch.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 '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../internal/controller/events.js';\n\n/**\n * @fires input {InputEvent} Fired whenever `selected` changes due to user\n * interaction (bubbles and composed).\n * @fires change {Event} Fired whenever `selected` changes due to user\n * interaction (bubbles).\n */\nexport class Switch extends LitElement {\n  static {\n    requestUpdateOnAriaChange(Switch);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  /** @nocollapse */\n  static readonly formAssociated = true;\n\n  /**\n   * Disables the switch and makes it non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Puts the switch in the selected state and sets the form submission value to\n   * the `value` property.\n   */\n  @property({type: Boolean}) selected = false;\n\n  /**\n   * Shows both the selected and deselected icons.\n   */\n  @property({type: Boolean}) icons = false;\n\n  /**\n   * Shows only the selected icon, and not the deselected icon. If `true`,\n   * overrides the behavior of the `icons` property.\n   */\n  @property({type: Boolean, attribute: 'show-only-selected-icon'})\n  showOnlySelectedIcon = false;\n\n  /**\n   * When true, require the switch to be selected when participating in\n   * form submission.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The value associated with this switch on form submission. `null` is\n   * submitted when `selected` is `false`.\n   */\n  @property() value = 'on';\n\n  /**\n   * The HTML name to use in form submission.\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  /**\n   * Returns a ValidityState object that represents the validity states of the\n   * switch.\n   *\n   * Note that switches will only set `valueMissing` if `required` and not\n   * selected.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  get validity() {\n    this.syncValidity();\n    return this.internals.validity;\n  }\n\n  /**\n   * Returns the native validation error message.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process\n   */\n  get validationMessage() {\n    this.syncValidity();\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * Returns whether an element will successfully validate based on forms\n   * validation rules and constraints.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process\n   */\n  get willValidate() {\n    this.syncValidity();\n    return this.internals.willValidate;\n  }\n\n  @query('input') private readonly input!: HTMLInputElement|null;\n  private readonly internals =\n      (this as HTMLElement /* needed for closure */).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', (event: MouseEvent) => {\n        if (!isActivationClick(event)) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.input!);\n      });\n    }\n  }\n\n  /**\n   * Checks the switch's native validation and returns whether or not the\n   * element is valid.\n   *\n   * If invalid, this method will dispatch the `invalid` event.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n   *\n   * @return true if the switch is valid, or false if not.\n   */\n  checkValidity() {\n    this.syncValidity();\n    return this.internals.checkValidity();\n  }\n\n  /**\n   * Checks the switch's native validation and returns whether or not the\n   * element is valid.\n   *\n   * If invalid, this method will dispatch the `invalid` event.\n   *\n   * The `validationMessage` is reported to the user by the browser. Use\n   * `setCustomValidity()` to customize the `validationMessage`.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n   *\n   * @return true if the switch is valid, or false if not.\n   */\n  reportValidity() {\n    this.syncValidity();\n    return this.internals.reportValidity();\n  }\n\n  /**\n   * Sets the switch's native validation error message. This is used to\n   * customize `validationMessage`.\n   *\n   * When the error is not an empty string, the switch is considered invalid\n   * and `validity.customError` will be true.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n   *\n   * @param error The error message to display.\n   */\n  setCustomValidity(error: string) {\n    this.internals.setValidity({customError: !!error}, error, this.getInput());\n  }\n\n  protected override update(changed: PropertyValues<Switch>) {\n    const state = String(this.selected);\n    this.internals.setFormValue(this.selected ? this.value : null, state);\n    super.update(changed);\n  }\n\n  protected override render(): TemplateResult {\n    // NOTE: buttons must use only [phrasing\n    // content](https://html.spec.whatwg.org/multipage/dom.html#phrasing-content)\n    // children, which includes custom elements, but not `div`s\n    return html`\n      <div class=\"switch ${classMap(this.getRenderClasses())}\">\n        <input\n          id=\"switch\"\n          class=\"touch\"\n          type=\"checkbox\"\n          role=\"switch\"\n          aria-label=${(this as ARIAMixin).ariaLabel || nothing}\n          ?checked=${this.selected}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          @change=${this.handleChange}\n        >\n\n        <md-focus-ring part=\"focus-ring\" for=\"switch\"></md-focus-ring>\n        <span class=\"track\">\n          ${this.renderHandle()}\n        </span>\n      </div>\n    `;\n  }\n\n  protected override updated() {\n    // Sync validity when properties change, since validation properties may\n    // have changed.\n    this.syncValidity();\n  }\n\n  private getRenderClasses(): ClassInfo {\n    return {\n      'selected': this.selected,\n      'unselected': !this.selected,\n      'disabled': this.disabled,\n    };\n  }\n\n  private renderHandle() {\n    const classes = {\n      'with-icon': this.showOnlySelectedIcon ? this.selected : this.icons,\n    };\n    return html`\n      ${this.renderTouchTarget()}\n      <span class=\"handle-container\">\n        <md-ripple for=\"switch\" ?disabled=\"${this.disabled}\"></md-ripple>\n        <span class=\"handle ${classMap(classes)}\">\n          ${this.shouldShowIcons() ? this.renderIcons() : html``}\n        </span>\n      </span>\n    `;\n  }\n\n  private renderIcons() {\n    return html`\n      <div class=\"icons\">\n        ${this.renderOnIcon()}\n        ${this.showOnlySelectedIcon ? html`` : this.renderOffIcon()}\n      </div>\n    `;\n  }\n\n  /**\n   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n   */\n  private renderOnIcon() {\n    return html`\n      <svg class=\"icon icon--on\" viewBox=\"0 0 24 24\">\n        <path d=\"M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z\"/>\n      </svg>\n    `;\n  }\n\n  /**\n   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n   */\n  private renderOffIcon() {\n    return html`\n      <svg class=\"icon icon--off\" viewBox=\"0 0 24 24\">\n        <path d=\"M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z\"/>\n      </svg>\n    `;\n  }\n\n  private renderTouchTarget() {\n    return html`<span class=\"touch\"></span>`;\n  }\n\n  private shouldShowIcons(): boolean {\n    return this.icons || this.showOnlySelectedIcon;\n  }\n\n  private handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.selected = target.checked;\n    redispatchEvent(this, event);\n  }\n\n  private syncValidity() {\n    // Sync the internal <input>'s validity and the host's ElementInternals\n    // validity. We do this to re-use native `<input>` validation messages.\n    const input = this.getInput();\n    if (this.internals.validity.customError) {\n      input.setCustomValidity(this.internals.validationMessage);\n    } else {\n      input.setCustomValidity('');\n    }\n\n    this.internals.setValidity(\n        input.validity, input.validationMessage, this.getInput());\n  }\n\n  private getInput() {\n    if (!this.input) {\n      // If the input is not yet defined, synchronously render.\n      this.connectedCallback();\n      this.performUpdate();\n    }\n\n    if (this.isUpdatePending) {\n      // If there are pending updates, synchronously perform them. This ensures\n      // that constraint validation properties (like `required`) are synced\n      // before interacting with input APIs that depend on them.\n      this.scheduleUpdate();\n    }\n\n    return this.input!;\n  }\n\n  /** @private */\n  formResetCallback() {\n    // The selected property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.selected = this.hasAttribute('selected');\n  }\n\n  /** @private */\n  formStateRestoreCallback(state: string) {\n    this.selected = state === 'true';\n  }\n}\n"]}

package/tabs/{_tab.scss → _primary-tab.scss}

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './internal/tab' show theme;
+@forward './internal/primary-tab' show theme;

package/tabs/_secondary-tab.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/secondary-tab' show theme;

package/tabs/harness.d.ts

@@ -10,7 +10,7 @@ import { Tabs } from './internal/tabs.js';
  * Test harness for Tab.
  */
 export declare class TabHarness extends Harness<Tab> {
-    getInteractiveElement(): Promise<HTMLLinkElement | HTMLButtonElement>;
+    getInteractiveElement(): Promise<HTMLElement>;
     private completeIndicatorAnimation;
     isIndicatorShowing(): Promise<boolean>;
 }
@@ -18,6 +18,6 @@ export declare class TabHarness extends Harness<Tab> {
  * Test harness for Tabs.
  */
 export declare class TabsHarness extends Harness<Tabs> {
-    getInteractiveElement(): Promise<HTMLLinkElement | HTMLButtonElement>;
+    getInteractiveElement(): Promise<HTMLElement>;
     get harnessedItems(): TabHarness[];
 }

package/tabs/harness.js

@@ -10,8 +10,7 @@ import { Harness } from '../testing/harness.js';
 export class TabHarness extends Harness {
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return this.element.renderRoot
-            .querySelector('.button');
+        return this.element;
     }
     async completeIndicatorAnimation() {
         await this.element.updateComplete;

package/tabs/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAqB,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAKlE;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAY;IACjC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU;aACzB,aAAa,CAAoC,SAAS,CAAE,CAAC;IACpE,CAAC;IAEO,KAAK,CAAC,0BAA0B;QACtC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;QAC1D,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE;YAClC,SAAS,CAAC,MAAM,EAAE,CAAC;SACpB;IACH,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,MAAM,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACxC,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;QACpE,OAAO,OAAO,KAAK,GAAG,CAAC;IACzB,CAAC;CACF;AAED;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C,mEAAmE;IACnE,gBAAgB;IACP,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,mBAAmB,GACpB,IAAI,CAAC,OAAO,CAAC,YAAwC,CAAC,OACzC;YACd,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC9C,OAAO,MAAM,mBAAmB,CAAC,qBAAqB,EAAE,CAAC;IAC3D,CAAC;IAED,IAAI,cAAc;QAChB,oCAAoC;QACpC,yDAAyD;QACzD,OAAQ,IAAI,CAAC,OAAO,CAAC,OAAO,CAAoC;aAC3D,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,UAAU,CAAC,IAAI,CAAC,CAAe,CAAC;QAC9D,CAAC,CAAC,CAAC;IACT,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ElementWithHarness, Harness} from '../testing/harness.js';\n\nimport {Tab} from './internal/tab.js';\nimport {Tabs} from './internal/tabs.js';\n\n/**\n * Test harness for Tab.\n */\nexport class TabHarness extends Harness<Tab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot\n        .querySelector<HTMLButtonElement|HTMLLinkElement>('.button')!;\n  }\n\n  private async completeIndicatorAnimation() {\n    await this.element.updateComplete;\n    const animations = this.element.indicator.getAnimations();\n    for (const animation of animations) {\n      animation.finish();\n    }\n  }\n\n  async isIndicatorShowing() {\n    await this.completeIndicatorAnimation();\n    const opacity = getComputedStyle(this.element.indicator)['opacity'];\n    return opacity === '1';\n  }\n}\n\n/**\n * Test harness for Tabs.\n */\nexport class TabsHarness extends Harness<Tabs> {\n  // Note, Tabs interactive element is the interactive element of the\n  // selected tab.\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    const selectedItemHarness =\n        (this.element.selectedItem as ElementWithHarness<Tab>).harness as\n            TabHarness ??\n        new TabHarness(this.element.selectedItem);\n    return await selectedItemHarness.getInteractiveElement();\n  }\n\n  get harnessedItems() {\n    // Test access to protected property\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return (this.element['items'] as Array<ElementWithHarness<Tab>>)\n        .map(item => {\n          return (item.harness ?? new TabHarness(item)) as TabHarness;\n        });\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAqB,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAKlE;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAY;IACjC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAsB,CAAC;IACrC,CAAC;IAEO,KAAK,CAAC,0BAA0B;QACtC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;QAC1D,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE;YAClC,SAAS,CAAC,MAAM,EAAE,CAAC;SACpB;IACH,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,MAAM,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACxC,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;QACpE,OAAO,OAAO,KAAK,GAAG,CAAC;IACzB,CAAC;CACF;AAED;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C,mEAAmE;IACnE,gBAAgB;IACP,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,mBAAmB,GACpB,IAAI,CAAC,OAAO,CAAC,YAAwC,CAAC,OACzC;YACd,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC9C,OAAO,MAAM,mBAAmB,CAAC,qBAAqB,EAAE,CAAC;IAC3D,CAAC;IAED,IAAI,cAAc;QAChB,oCAAoC;QACpC,yDAAyD;QACzD,OAAQ,IAAI,CAAC,OAAO,CAAC,OAAO,CAAoC;aAC3D,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,UAAU,CAAC,IAAI,CAAC,CAAe,CAAC;QAC9D,CAAC,CAAC,CAAC;IACT,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ElementWithHarness, Harness} from '../testing/harness.js';\n\nimport {Tab} from './internal/tab.js';\nimport {Tabs} from './internal/tabs.js';\n\n/**\n * Test harness for Tab.\n */\nexport class TabHarness extends Harness<Tab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element as HTMLElement;\n  }\n\n  private async completeIndicatorAnimation() {\n    await this.element.updateComplete;\n    const animations = this.element.indicator.getAnimations();\n    for (const animation of animations) {\n      animation.finish();\n    }\n  }\n\n  async isIndicatorShowing() {\n    await this.completeIndicatorAnimation();\n    const opacity = getComputedStyle(this.element.indicator)['opacity'];\n    return opacity === '1';\n  }\n}\n\n/**\n * Test harness for Tabs.\n */\nexport class TabsHarness extends Harness<Tabs> {\n  // Note, Tabs interactive element is the interactive element of the\n  // selected tab.\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    const selectedItemHarness =\n        (this.element.selectedItem as ElementWithHarness<Tab>).harness as\n            TabHarness ??\n        new TabHarness(this.element.selectedItem);\n    return await selectedItemHarness.getInteractiveElement();\n  }\n\n  get harnessedItems() {\n    // Test access to protected property\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return (this.element['items'] as Array<ElementWithHarness<Tab>>)\n        .map(item => {\n          return (item.harness ?? new TabHarness(item)) as TabHarness;\n        });\n  }\n}\n"]}

package/tabs/internal/_primary-tab.scss

@@ -0,0 +1,70 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-primary-tab-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-primary-tab-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-primary-tab-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-primary-tab-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-primary-tab-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-primary-tab-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-primary-tab-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-primary-tab-container-shape-end-start,
+      var(--_container-shape)
+    );
+  }
+
+  .content.stacked {
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .content.stacked.has-icon.has-label {
+    height: var(--_with-icon-and-label-text-container-height);
+  }
+}

package/tabs/internal/_secondary-tab.scss

@@ -0,0 +1,61 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-secondary-tab-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-secondary-tab-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-secondary-tab-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-secondary-tab-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-secondary-tab-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-secondary-tab-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-secondary-tab-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-secondary-tab-container-shape-end-start,
+      var(--_container-shape)
+    );
+  }
+}