diff --git a/button/internal/button.ts b/button/internal/button.ts
index c1d88321ec..f5525b1e9a 100644
--- a/button/internal/button.ts
+++ b/button/internal/button.ts
@@ -35,11 +35,6 @@ export abstract class Button extends buttonBaseClass {
delegatesFocus: true,
};
- /**
- * Whether or not the button is disabled.
- */
- declare disabled: boolean; // for jsdoc until lit-analyzer is updated
-
/**
* Whether or not the button is "soft-disabled" (disabled but still
* focusable).
diff --git a/checkbox/internal/checkbox.ts b/checkbox/internal/checkbox.ts
index 21a8ee03b5..0b1801d672 100644
--- a/checkbox/internal/checkbox.ts
+++ b/checkbox/internal/checkbox.ts
@@ -178,10 +178,6 @@ export class Checkbox extends checkboxBaseClass {
redispatchEvent(this, event);
}
- // Writable mixin properties for lit-html binding, needed for lit-analyzer
- declare disabled: boolean;
- declare name: string;
-
override [getFormValue]() {
if (!this.checked || this.indeterminate) {
return null;
diff --git a/docs/components/button.md b/docs/components/button.md
index 0975f19568..75d65a75ad 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -734,17 +734,18 @@ Token | Default value
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
-| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable). Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |
-| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
+| `target` | `target` | `"" \| "_blank" \| "_parent" \| "_self" \| "_top"` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start. _Note:_ Link buttons cannot have trailing icons. |
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
-| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
-| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
-| `name` | | `string` | `undefined` | |
-| `form` | | `HTMLFormElement` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `type` | `type` | `string` | `'submit'` | A string indicating the form submission behavior of the element. - submit: The element submits the form. This is the default value if the attribute is not specified, or if it is dynamically changed to an empty or invalid value. - reset: The element resets the form. - button: The element does nothing. |
+| `value` | `value` | `string` | `''` | The value of the button. When combined with a `name`, the submitting button's name/value will be added to the form. |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
@@ -756,17 +757,18 @@ Token | Default value
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
-| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable). Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |
-| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
+| `target` | `target` | `"" \| "_blank" \| "_parent" \| "_self" \| "_top"` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start. _Note:_ Link buttons cannot have trailing icons. |
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
-| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
-| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
-| `name` | | `string` | `undefined` | |
-| `form` | | `HTMLFormElement` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `type` | `type` | `string` | `'submit'` | A string indicating the form submission behavior of the element. - submit: The element submits the form. This is the default value if the attribute is not specified, or if it is dynamically changed to an empty or invalid value. - reset: The element resets the form. - button: The element does nothing. |
+| `value` | `value` | `string` | `''` | The value of the button. When combined with a `name`, the submitting button's name/value will be added to the form. |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
@@ -778,17 +780,18 @@ Token | Default value
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
-| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable). Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |
-| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
+| `target` | `target` | `"" \| "_blank" \| "_parent" \| "_self" \| "_top"` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start. _Note:_ Link buttons cannot have trailing icons. |
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
-| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
-| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
-| `name` | | `string` | `undefined` | |
-| `form` | | `HTMLFormElement` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `type` | `type` | `string` | `'submit'` | A string indicating the form submission behavior of the element. - submit: The element submits the form. This is the default value if the attribute is not specified, or if it is dynamically changed to an empty or invalid value. - reset: The element resets the form. - button: The element does nothing. |
+| `value` | `value` | `string` | `''` | The value of the button. When combined with a `name`, the submitting button's name/value will be added to the form. |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
@@ -800,17 +803,18 @@ Token | Default value
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
-| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable). Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |
-| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
+| `target` | `target` | `"" \| "_blank" \| "_parent" \| "_self" \| "_top"` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start. _Note:_ Link buttons cannot have trailing icons. |
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
-| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
-| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
-| `name` | | `string` | `undefined` | |
-| `form` | | `HTMLFormElement` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `type` | `type` | `string` | `'submit'` | A string indicating the form submission behavior of the element. - submit: The element submits the form. This is the default value if the attribute is not specified, or if it is dynamically changed to an empty or invalid value. - reset: The element resets the form. - button: The element does nothing. |
+| `value` | `value` | `string` | `''` | The value of the button. When combined with a `name`, the submitting button's name/value will be added to the form. |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
@@ -822,17 +826,18 @@ Token | Default value
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
-| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable). Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |
-| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
+| `target` | `target` | `"" \| "_blank" \| "_parent" \| "_self" \| "_top"` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start. _Note:_ Link buttons cannot have trailing icons. |
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
-| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
-| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
-| `name` | | `string` | `undefined` | |
-| `form` | | `HTMLFormElement` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `type` | `type` | `string` | `'submit'` | A string indicating the form submission behavior of the element. - submit: The element submits the form. This is the default value if the attribute is not specified, or if it is dynamically changed to an empty or invalid value. - reset: The element resets the form. - button: The element does nothing. |
+| `value` | `value` | `string` | `''` | The value of the button. When combined with a `name`, the submitting button's name/value will be added to the form. |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index 423a249fec..d4a5f7957a 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -180,8 +180,13 @@ Token | Default value
| `indeterminate` | `indeterminate` | `boolean` | `false` | Whether or not the checkbox is indeterminate. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes |
| `required` | `required` | `boolean` | `false` | When true, require the checkbox to be selected when participating in form submission. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation |
| `value` | `value` | `string` | `'on'` | The value of the checkbox that is submitted with a form when selected. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value |
-| `disabled` | | `boolean` | `undefined` | |
-| `name` | | `string` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
+| `validity` | | `ValidityState` | `undefined` | Returns a ValidityState object that represents the validity states of the element. https://developer.mozilla.org/en-US/docs/Web/API/ValidityState |
+| `validationMessage` | | `string` | `undefined` | Returns a validation error message or an empty string if the element is valid. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage |
+| `willValidate` | | `boolean` | `undefined` | Returns whether an element will successfully validate based on forms validation rules and constraints. Disabled and readonly elements will not validate. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate |
@@ -193,6 +198,9 @@ Token | Default value
| --- | --- | --- | --- |
| `formResetCallback` | _None_ | `void` | |
| `formStateRestoreCallback` | `state` | `void` | |
+| `checkValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch an `invalid` event. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity |
+| `reportValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch a cancelable `invalid` event. If not canceled, a the current `validationMessage` will be reported to the user. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity |
+| `setCustomValidity` | `error` | `void` | Sets the element's constraint validation error message. When set to a non-empty string, `validity.customError` will be true and `validationMessage` will display the provided error. Use this method to customize error messages reported. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity |
diff --git a/docs/components/chip.md b/docs/components/chip.md
index 7444c08d06..7c7084848b 100644
--- a/docs/components/chip.md
+++ b/docs/components/chip.md
@@ -509,7 +509,7 @@ Token | Default value
| `elevated` | `elevated` | `boolean` | `false` | |
| `href` | `href` | `string` | `''` | |
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the chip is used as a link (`href` is set). |
-| `target` | `target` | `string` | `''` | |
+| `target` | `target` | `"" \| "_blank" \| "_parent" \| "_self" \| "_top"` | `''` | |
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled. Disabled chips are not focusable, unless `always-focusable` is set. |
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable). Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
@@ -571,7 +571,7 @@ Token | Default value
| --- | --- | --- | --- | --- |
| `avatar` | `avatar` | `boolean` | `false` | |
| `href` | `href` | `string` | `''` | |
-| `target` | `target` | `string` | `''` | |
+| `target` | `target` | `"" \| "_blank" \| "_parent" \| "_self" \| "_top"` | `''` | |
| `removeOnly` | `remove-only` | `boolean` | `false` | |
| `selected` | `selected` | `boolean` | `false` | |
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled. Disabled chips are not focusable, unless `always-focusable` is set. |
@@ -606,7 +606,7 @@ Token | Default value
| `elevated` | `elevated` | `boolean` | `false` | |
| `href` | `href` | `string` | `''` | |
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the chip is used as a link (`href` is set). |
-| `target` | `target` | `string` | `''` | |
+| `target` | `target` | `"" \| "_blank" \| "_parent" \| "_self" \| "_top"` | `''` | |
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled. Disabled chips are not focusable, unless `always-focusable` is set. |
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable). Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
| `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys. Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
diff --git a/docs/components/fab.md b/docs/components/fab.md
index c3e829ef6e..fe545baf5a 100644
--- a/docs/components/fab.md
+++ b/docs/components/fab.md
@@ -487,8 +487,8 @@ Add with a different theme applied](images/fab/theming-branded.webp)
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
-| `variant` | `variant` | `string` | `'surface'` | The FAB color variant to render. |
-| `size` | `size` | `string` | `'medium'` | The size of the FAB. NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not have different sizes. |
+| `variant` | `variant` | `FabVariant` | `'surface'` | The FAB color variant to render. |
+| `size` | `size` | `FabSize` | `'medium'` | The size of the FAB. NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not have different sizes. |
| `label` | `label` | `string` | `''` | The text to display on the FAB. |
| `lowered` | `lowered` | `boolean` | `false` | Lowers the FAB's elevation. |
@@ -502,8 +502,8 @@ Add with a different theme applied](images/fab/theming-branded.webp)
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
-| `variant` | `variant` | `string` | `'surface'` | The FAB color variant to render. |
-| `size` | `size` | `string` | `'medium'` | The size of the FAB. NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not have different sizes. |
+| `variant` | `variant` | `FabVariant` | `'surface'` | The FAB color variant to render. |
+| `size` | `size` | `FabSize` | `'medium'` | The size of the FAB. NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not have different sizes. |
| `label` | `label` | `string` | `''` | The text to display on the FAB. |
| `lowered` | `lowered` | `boolean` | `false` | Lowers the FAB's elevation. |
diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md
index 4d8c4c204b..df92e2b9e1 100644
--- a/docs/components/icon-button.md
+++ b/docs/components/icon-button.md
@@ -465,20 +465,20 @@ Token | Default value
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
-| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable). Use this when an icon button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the icon button is used as a link (`href` is set). |
-| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
+| `target` | `target` | `"" \| LinkTarget` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |
| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |
| `selected` | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no `slot="selected"` icon is provided. |
-| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
-| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
-| `name` | | `string` | `undefined` | |
-| `form` | | `HTMLFormElement` | `undefined` | |
-| `labels` | | `NodeList` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `type` | `type` | `string` | `'submit'` | A string indicating the form submission behavior of the element. - submit: The element submits the form. This is the default value if the attribute is not specified, or if it is dynamically changed to an empty or invalid value. - reset: The element resets the form. - button: The element does nothing. |
+| `value` | `value` | `string` | `''` | The value of the button. When combined with a `name`, the submitting button's name/value will be added to the form. |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
@@ -501,20 +501,20 @@ Token | Default value
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
-| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable). Use this when an icon button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the icon button is used as a link (`href` is set). |
-| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
+| `target` | `target` | `"" \| LinkTarget` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |
| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |
| `selected` | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no `slot="selected"` icon is provided. |
-| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
-| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
-| `name` | | `string` | `undefined` | |
-| `form` | | `HTMLFormElement` | `undefined` | |
-| `labels` | | `NodeList` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `type` | `type` | `string` | `'submit'` | A string indicating the form submission behavior of the element. - submit: The element submits the form. This is the default value if the attribute is not specified, or if it is dynamically changed to an empty or invalid value. - reset: The element resets the form. - button: The element does nothing. |
+| `value` | `value` | `string` | `''` | The value of the button. When combined with a `name`, the submitting button's name/value will be added to the form. |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
@@ -537,20 +537,20 @@ Token | Default value
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
-| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable). Use this when an icon button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the icon button is used as a link (`href` is set). |
-| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
+| `target` | `target` | `"" \| LinkTarget` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |
| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |
| `selected` | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no `slot="selected"` icon is provided. |
-| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
-| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
-| `name` | | `string` | `undefined` | |
-| `form` | | `HTMLFormElement` | `undefined` | |
-| `labels` | | `NodeList` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `type` | `type` | `string` | `'submit'` | A string indicating the form submission behavior of the element. - submit: The element submits the form. This is the default value if the attribute is not specified, or if it is dynamically changed to an empty or invalid value. - reset: The element resets the form. - button: The element does nothing. |
+| `value` | `value` | `string` | `''` | The value of the button. When combined with a `name`, the submitting button's name/value will be added to the form. |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
@@ -573,20 +573,20 @@ Token | Default value
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
-| `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable). Use this when an icon button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
| `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the icon button is used as a link (`href` is set). |
-| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
+| `target` | `target` | `"" \| LinkTarget` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
| `ariaLabelSelected` | `aria-label-selected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. |
| `toggle` | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states |
| `selected` | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no `slot="selected"` icon is provided. |
-| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
-| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
-| `name` | | `string` | `undefined` | |
-| `form` | | `HTMLFormElement` | `undefined` | |
-| `labels` | | `NodeList` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `type` | `type` | `string` | `'submit'` | A string indicating the form submission behavior of the element. - submit: The element submits the form. This is the default value if the attribute is not specified, or if it is dynamically changed to an empty or invalid value. - reset: The element resets the form. - button: The element does nothing. |
+| `value` | `value` | `string` | `''` | The value of the button. When combined with a `name`, the submitting button's name/value will be added to the form. |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
diff --git a/docs/components/list.md b/docs/components/list.md
index 11c5ab3068..e4aaba19d2 100644
--- a/docs/components/list.md
+++ b/docs/components/list.md
@@ -411,9 +411,9 @@ Token | Default value
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
| `disabled` | `disabled` | `boolean` | `false` | Disables the item and makes it non-selectable and non-interactive. |
-| `type` | `type` | `string` | `'text'` | Sets the behavior of the list item, defaults to "text". Change to "link" or "button" for interactive items. |
+| `type` | `type` | `ListItemType` | `'text'` | Sets the behavior of the list item, defaults to "text". Change to "link" or "button" for interactive items. |
| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
-| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is set. |
+| `target` | `target` | `"" \| "_blank" \| "_parent" \| "_self" \| "_top"` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is set. |
diff --git a/docs/components/menu.md b/docs/components/menu.md
index c249479f2d..08080706e0 100644
--- a/docs/components/menu.md
+++ b/docs/components/menu.md
@@ -518,7 +518,7 @@ a sharp 0px border radius.](images/menu/theming.webp)
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
| `anchor` | `anchor` | `string` | `''` | The ID of the element in the same root node in which the menu should align to. Overrides setting `anchorElement = elementReference`. __NOTE__: anchor or anchorElement must either be an HTMLElement or resolve to an HTMLElement in order for menu to open. |
-| `positioning` | `positioning` | `string` | `'absolute'` | Whether the positioning algorithm should calculate relative to the parent of the anchor element (`absolute`), relative to the window (`fixed`), or relative to the document (`document`). `popover` will use the popover API to render the menu in the top-layer. If your browser does not support the popover API, it will fall back to `fixed`. __Examples for `position = 'fixed'`:__ - If there is no `position:relative` in the given parent tree and the surface is `position:absolute` - If the surface is `position:fixed` - If the surface is in the "top layer" - The anchor and the surface do not share a common `position:relative` ancestor When using `positioning=fixed`, in most cases, the menu should position itself above most other `position:absolute` or `position:fixed` elements when placed inside of them. e.g. using a menu inside of an `md-dialog`. __NOTE__: Fixed menus will not scroll with the page and will be fixed to the window instead. __Examples for `position = 'document'`:__ - There is no parent that creates a relative positioning context e.g. `position: relative`, `position: absolute`, `transform: translate(x, y)`, etc. - You put the effort into hoisting the menu to the top of the DOM like the end of the `` to render over everything or in a top-layer. - You are reusing a single `md-menu` element that dynamically renders content. __Examples for `position = 'popover'`:__ - Your browser supports `popover`. - Most cases. Once popover is in browsers, this will become the default. |
+| `positioning` | `positioning` | `"absolute" \| "fixed" \| "document" \| "popover"` | `'absolute'` | Whether the positioning algorithm should calculate relative to the parent of the anchor element (`absolute`), relative to the window (`fixed`), or relative to the document (`document`). `popover` will use the popover API to render the menu in the top-layer. If your browser does not support the popover API, it will fall back to `fixed`. __Examples for `position = 'fixed'`:__ - If there is no `position:relative` in the given parent tree and the surface is `position:absolute` - If the surface is `position:fixed` - If the surface is in the "top layer" - The anchor and the surface do not share a common `position:relative` ancestor When using `positioning=fixed`, in most cases, the menu should position itself above most other `position:absolute` or `position:fixed` elements when placed inside of them. e.g. using a menu inside of an `md-dialog`. __NOTE__: Fixed menus will not scroll with the page and will be fixed to the window instead. __Examples for `position = 'document'`:__ - There is no parent that creates a relative positioning context e.g. `position: relative`, `position: absolute`, `transform: translate(x, y)`, etc. - You put the effort into hoisting the menu to the top of the DOM like the end of the `` to render over everything or in a top-layer. - You are reusing a single `md-menu` element that dynamically renders content. __Examples for `position = 'popover'`:__ - Your browser supports `popover`. - Most cases. Once popover is in browsers, this will become the default. |
| `quick` | `quick` | `boolean` | `false` | Skips the opening and closing animations. |
| `hasOverflow` | `has-overflow` | `boolean` | `false` | Displays overflow content like a submenu. Not required in most cases when using `positioning="popover"`. __NOTE__: This may cause adverse effects if you set `md-menu {max-height:...}` and have items overflowing items in the "y" direction. |
| `open` | `open` | `boolean` | `false` | Opens the menu and makes it visible. Alternative to the `.show()` and `.close()` methods |
@@ -527,12 +527,12 @@ a sharp 0px border radius.](images/menu/theming.webp)
| `noHorizontalFlip` | `no-horizontal-flip` | `boolean` | `false` | Disable the `flip` behavior that usually happens on the horizontal axis when the surface would render outside the viewport. |
| `noVerticalFlip` | `no-vertical-flip` | `boolean` | `false` | Disable the `flip` behavior that usually happens on the vertical axis when the surface would render outside the viewport. |
| `typeaheadDelay` | `typeahead-delay` | `number` | `200` | The max time between the keystrokes of the typeahead menu behavior before it clears the typeahead buffer. |
-| `anchorCorner` | `anchor-corner` | `string` | `Corner.END_START` | The corner of the anchor which to align the menu in the standard logical property style of - e.g. `'end-start'`. NOTE: This value may not be respected by the menu positioning algorithm if the menu would render outisde the viewport. Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value |
-| `menuCorner` | `menu-corner` | `string` | `Corner.START_START` | The corner of the menu which to align the anchor in the standard logical property style of - e.g. `'start-start'`. NOTE: This value may not be respected by the menu positioning algorithm if the menu would render outisde the viewport. Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value |
+| `anchorCorner` | `anchor-corner` | `Corner` | `Corner.END_START` | The corner of the anchor which to align the menu in the standard logical property style of - e.g. `'end-start'`. NOTE: This value may not be respected by the menu positioning algorithm if the menu would render outisde the viewport. Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value |
+| `menuCorner` | `menu-corner` | `Corner` | `Corner.START_START` | The corner of the menu which to align the anchor in the standard logical property style of - e.g. `'start-start'`. NOTE: This value may not be respected by the menu positioning algorithm if the menu would render outisde the viewport. Use `no-horizontal-flip` or `no-vertical-flip` to force the usage of the value |
| `stayOpenOnOutsideClick` | `stay-open-on-outside-click` | `boolean` | `false` | Keeps the user clicks outside the menu. NOTE: clicking outside may still cause focusout to close the menu so see `stayOpenOnFocusout`. |
| `stayOpenOnFocusout` | `stay-open-on-focusout` | `boolean` | `false` | Keeps the menu open when focus leaves the menu's composed subtree. NOTE: Focusout behavior will stop propagation of the focusout event. Set this property to true to opt-out of menu's focusout handling altogether. |
| `skipRestoreFocus` | `skip-restore-focus` | `boolean` | `false` | After closing, does not restore focus to the last focused element before the menu was opened. |
-| `defaultFocus` | `default-focus` | `string` | `FocusState.FIRST_ITEM` | The element that should be focused by default once opened. NOTE: When setting default focus to 'LIST_ROOT', remember to change `tabindex` to `0` and change md-menu's display to something other than `display: contents` when necessary. |
+| `defaultFocus` | `default-focus` | `FocusState` | `FocusState.FIRST_ITEM` | The element that should be focused by default once opened. NOTE: When setting default focus to 'LIST_ROOT', remember to change `tabindex` to `0` and change md-menu's display to something other than `display: contents` when necessary. |
| `noNavigationWrap` | `no-navigation-wrap` | `boolean` | `false` | Turns off navigation wrapping. By default, navigating past the end of the menu items will wrap focus back to the beginning and vice versa. Use this for ARIA patterns that do not wrap focus, like combobox. |
| `isSubmenu` | | `boolean` | `false` | Whether or not the current menu is a submenu and should not handle specific navigation keys. |
| `typeaheadController` | | `TypeaheadController` | `function { ... }` | Handles typeahead navigation through the menu. |
@@ -579,9 +579,9 @@ a sharp 0px border radius.](images/menu/theming.webp)
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
| `disabled` | `disabled` | `boolean` | `false` | Disables the item and makes it non-selectable and non-interactive. |
-| `type` | `type` | `string` | `'menuitem'` | Sets the behavior and role of the menu item, defaults to "menuitem". |
+| `type` | `type` | `MenuItemType` | `'menuitem'` | Sets the behavior and role of the menu item, defaults to "menuitem". |
| `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
-| `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is set. |
+| `target` | `target` | `"" \| "_blank" \| "_parent" \| "_self" \| "_top"` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is set. |
| `keepOpen` | `keep-open` | `boolean` | `false` | Keeps the menu open if clicked or keyboard selected. |
| `selected` | `selected` | `boolean` | `false` | Sets the item in the selected visual state when a submenu is opened. |
| `typeaheadText` | | `string` | `undefined` | |
@@ -606,8 +606,8 @@ a sharp 0px border radius.](images/menu/theming.webp)
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
-| `anchorCorner` | `anchor-corner` | `string` | `Corner.START_END` | The anchorCorner to set on the submenu. |
-| `menuCorner` | `menu-corner` | `string` | `Corner.START_START` | The menuCorner to set on the submenu. |
+| `anchorCorner` | `anchor-corner` | `Corner` | `Corner.START_END` | The anchorCorner to set on the submenu. |
+| `menuCorner` | `menu-corner` | `Corner` | `Corner.START_START` | The menuCorner to set on the submenu. |
| `hoverOpenDelay` | `hover-open-delay` | `number` | `400` | The delay between mouseenter and submenu opening. |
| `hoverCloseDelay` | `hover-close-delay` | `number` | `400` | The delay between ponterleave and the submenu closing. |
| `isSubMenu` | `md-sub-menu` | `boolean` | `true` | READONLY: self-identifies as a menu item and sets its identifying attribute |
diff --git a/docs/components/radio.md b/docs/components/radio.md
index be2827485e..7478291106 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -180,8 +180,13 @@ Token | Default value
| `required` | `required` | `boolean` | `false` | Whether or not the radio is required. If any radio is required in a group, all radios are implicitly required. |
| `value` | `value` | `string` | `'on'` | The element value to use in form submission when checked. |
| `checked` | `checked` | `boolean` | `undefined` | |
-| `disabled` | | `boolean` | `undefined` | |
-| `name` | | `string` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
+| `validity` | | `ValidityState` | `undefined` | Returns a ValidityState object that represents the validity states of the element. https://developer.mozilla.org/en-US/docs/Web/API/ValidityState |
+| `validationMessage` | | `string` | `undefined` | Returns a validation error message or an empty string if the element is valid. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage |
+| `willValidate` | | `boolean` | `undefined` | Returns whether an element will successfully validate based on forms validation rules and constraints. Disabled and readonly elements will not validate. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate |
@@ -193,6 +198,9 @@ Token | Default value
| --- | --- | --- | --- |
| `formResetCallback` | _None_ | `void` | |
| `formStateRestoreCallback` | `state` | `void` | |
+| `checkValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch an `invalid` event. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity |
+| `reportValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch a cancelable `invalid` event. If not canceled, a the current `validationMessage` will be reported to the user. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity |
+| `setCustomValidity` | `error` | `void` | Sets the element's constraint validation error message. When set to a non-empty string, `validity.customError` will be true and `validationMessage` will display the provided error. Use this method to customize error messages reported. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity |
diff --git a/docs/components/select.md b/docs/components/select.md
index b11eebaad8..0f81ad6df7 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -226,18 +226,23 @@ md-outlined-select::part(menu) {
| `noAsterisk` | `no-asterisk` | `boolean` | `false` | Disables the asterisk on the floating label, when the select is required. |
| `supportingText` | `supporting-text` | `string` | `''` | Conveys additional information below the select, such as how it should be used. |
| `error` | `error` | `boolean` | `false` | Gets or sets whether or not the select is in a visually invalid state. This error state overrides the error state controlled by `reportValidity()`. |
-| `menuPositioning` | `menu-positioning` | `string` | `'popover'` | Whether or not the underlying md-menu should be position: fixed to display in a top-level manner, or position: absolute. position:fixed is useful for cases where select is inside of another element with stacking context and hidden overflows such as `md-dialog`. |
+| `menuPositioning` | `menu-positioning` | `"absolute" \| "fixed" \| "popover"` | `'popover'` | Whether or not the underlying md-menu should be position: fixed to display in a top-level manner, or position: absolute. position:fixed is useful for cases where select is inside of another element with stacking context and hidden overflows such as `md-dialog`. |
| `clampMenuWidth` | `clamp-menu-width` | `boolean` | `false` | Clamps the menu-width to the width of the select. |
| `typeaheadDelay` | `typeahead-delay` | `number` | `DEFAULT_TYPEAHEAD_BUFFER_TIME` | The max time between the keystrokes of the typeahead select / menu behavior before it clears the typeahead buffer. |
| `hasLeadingIcon` | `has-leading-icon` | `boolean` | `false` | Whether or not the text field has a leading icon. Used for SSR. |
| `displayText` | `display-text` | `string` | `''` | Text to display in the field. Only set for SSR. |
-| `menuAlign` | `menu-align` | `string` | `'start'` | Whether the menu should be aligned to the start or the end of the select's textbox. |
+| `menuAlign` | `menu-align` | `"start" \| "end"` | `'start'` | Whether the menu should be aligned to the start or the end of the select's textbox. |
| `value` | `value` | `string` | `undefined` | |
| `selectedIndex` | `selected-index` | `number` | `undefined` | |
-| `disabled` | | `boolean` | `undefined` | |
-| `name` | | `string` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
| `options` | | `SelectOption[]` | `undefined` | |
| `selectedOptions` | | `SelectOption[]` | `undefined` | |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
+| `validity` | | `ValidityState` | `undefined` | Returns a ValidityState object that represents the validity states of the element. https://developer.mozilla.org/en-US/docs/Web/API/ValidityState |
+| `validationMessage` | | `string` | `undefined` | Returns a validation error message or an empty string if the element is valid. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage |
+| `willValidate` | | `boolean` | `undefined` | Returns whether an element will successfully validate based on forms validation rules and constraints. Disabled and readonly elements will not validate. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate |
@@ -255,6 +260,9 @@ md-outlined-select::part(menu) {
| `formResetCallback` | _None_ | `void` | |
| `formStateRestoreCallback` | `state` | `void` | |
| `click` | _None_ | `void` | |
+| `checkValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch an `invalid` event. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity |
+| `reportValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch a cancelable `invalid` event. If not canceled, a the current `validationMessage` will be reported to the user. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity |
+| `setCustomValidity` | `error` | `void` | Sets the element's constraint validation error message. When set to a non-empty string, `validity.customError` will be true and `validationMessage` will display the provided error. Use this method to customize error messages reported. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity |
@@ -288,18 +296,23 @@ md-outlined-select::part(menu) {
| `noAsterisk` | `no-asterisk` | `boolean` | `false` | Disables the asterisk on the floating label, when the select is required. |
| `supportingText` | `supporting-text` | `string` | `''` | Conveys additional information below the select, such as how it should be used. |
| `error` | `error` | `boolean` | `false` | Gets or sets whether or not the select is in a visually invalid state. This error state overrides the error state controlled by `reportValidity()`. |
-| `menuPositioning` | `menu-positioning` | `string` | `'popover'` | Whether or not the underlying md-menu should be position: fixed to display in a top-level manner, or position: absolute. position:fixed is useful for cases where select is inside of another element with stacking context and hidden overflows such as `md-dialog`. |
+| `menuPositioning` | `menu-positioning` | `"absolute" \| "fixed" \| "popover"` | `'popover'` | Whether or not the underlying md-menu should be position: fixed to display in a top-level manner, or position: absolute. position:fixed is useful for cases where select is inside of another element with stacking context and hidden overflows such as `md-dialog`. |
| `clampMenuWidth` | `clamp-menu-width` | `boolean` | `false` | Clamps the menu-width to the width of the select. |
| `typeaheadDelay` | `typeahead-delay` | `number` | `DEFAULT_TYPEAHEAD_BUFFER_TIME` | The max time between the keystrokes of the typeahead select / menu behavior before it clears the typeahead buffer. |
| `hasLeadingIcon` | `has-leading-icon` | `boolean` | `false` | Whether or not the text field has a leading icon. Used for SSR. |
| `displayText` | `display-text` | `string` | `''` | Text to display in the field. Only set for SSR. |
-| `menuAlign` | `menu-align` | `string` | `'start'` | Whether the menu should be aligned to the start or the end of the select's textbox. |
+| `menuAlign` | `menu-align` | `"start" \| "end"` | `'start'` | Whether the menu should be aligned to the start or the end of the select's textbox. |
| `value` | `value` | `string` | `undefined` | |
| `selectedIndex` | `selected-index` | `number` | `undefined` | |
-| `disabled` | | `boolean` | `undefined` | |
-| `name` | | `string` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
| `options` | | `SelectOption[]` | `undefined` | |
| `selectedOptions` | | `SelectOption[]` | `undefined` | |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
+| `validity` | | `ValidityState` | `undefined` | Returns a ValidityState object that represents the validity states of the element. https://developer.mozilla.org/en-US/docs/Web/API/ValidityState |
+| `validationMessage` | | `string` | `undefined` | Returns a validation error message or an empty string if the element is valid. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage |
+| `willValidate` | | `boolean` | `undefined` | Returns whether an element will successfully validate based on forms validation rules and constraints. Disabled and readonly elements will not validate. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate |
@@ -317,6 +330,9 @@ md-outlined-select::part(menu) {
| `formResetCallback` | _None_ | `void` | |
| `formStateRestoreCallback` | `state` | `void` | |
| `click` | _None_ | `void` | |
+| `checkValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch an `invalid` event. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity |
+| `reportValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch a cancelable `invalid` event. If not canceled, a the current `validationMessage` will be reported to the user. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity |
+| `setCustomValidity` | `error` | `void` | Sets the element's constraint validation error message. When set to a non-empty string, `validity.customError` will be true and `validationMessage` will display the provided error. Use this method to customize error messages reported. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity |
diff --git a/docs/components/slider.md b/docs/components/slider.md
index 8473340c48..829d9c8aff 100644
--- a/docs/components/slider.md
+++ b/docs/components/slider.md
@@ -185,10 +185,12 @@ Token | Default value
| `ticks` | `ticks` | `boolean` | `false` | Whether or not to show tick marks. |
| `labeled` | `labeled` | `boolean` | `false` | Whether or not to show a value label when activated. |
| `range` | `range` | `boolean` | `false` | Whether or not to show a value range. When false, the slider displays a slideable handle for the value property; when true, it displays slideable handles for the valueStart and valueEnd properties. |
-| `disabled` | | `boolean` | `undefined` | |
-| `name` | | `string` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
| `nameStart` | | `string` | `undefined` | |
| `nameEnd` | | `string` | `undefined` | |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
diff --git a/docs/components/switch.md b/docs/components/switch.md
index 6aa756a88c..73d60768b4 100644
--- a/docs/components/switch.md
+++ b/docs/components/switch.md
@@ -190,8 +190,13 @@ Token | Default value
| `showOnlySelectedIcon` | `show-only-selected-icon` | `boolean` | `false` | Shows only the selected icon, and not the deselected icon. If `true`, overrides the behavior of the `icons` property. |
| `required` | `required` | `boolean` | `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 |
| `value` | `value` | `string` | `'on'` | The value associated with this switch on form submission. `null` is submitted when `selected` is `false`. |
-| `disabled` | | `boolean` | `undefined` | |
-| `name` | | `string` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
+| `validity` | | `ValidityState` | `undefined` | Returns a ValidityState object that represents the validity states of the element. https://developer.mozilla.org/en-US/docs/Web/API/ValidityState |
+| `validationMessage` | | `string` | `undefined` | Returns a validation error message or an empty string if the element is valid. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage |
+| `willValidate` | | `boolean` | `undefined` | Returns whether an element will successfully validate based on forms validation rules and constraints. Disabled and readonly elements will not validate. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate |
@@ -203,6 +208,9 @@ Token | Default value
| --- | --- | --- | --- |
| `formResetCallback` | _None_ | `void` | |
| `formStateRestoreCallback` | `state` | `void` | |
+| `checkValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch an `invalid` event. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity |
+| `reportValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch a cancelable `invalid` event. If not canceled, a the current `validationMessage` will be reported to the user. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity |
+| `setCustomValidity` | `error` | `void` | Sets the element's constraint validation error message. When set to a non-empty string, `validity.customError` will be true and `validationMessage` will display the provided error. Use this method to customize error messages reported. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity |
diff --git a/docs/components/text-field.md b/docs/components/text-field.md
index 4c9b2af2da..b8e61d003c 100644
--- a/docs/components/text-field.md
+++ b/docs/components/text-field.md
@@ -513,15 +513,20 @@ Token | Default value
| `readOnly` | `readonly` | `boolean` | `false` | Indicates whether or not a user should be able to edit the text field's value. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly |
| `multiple` | `multiple` | `boolean` | `false` | Indicates that input accepts multiple email addresses. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple |
| `step` | `step` | `string` | `''` | Returns or sets the element's step attribute, which works with min and max to limit the increments at which a numeric or date-time value can be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step |
-| `type` | `type` | `string` | `'text'` | The `` type to use, defaults to "text". The type greatly changes how the text field behaves. Text fields support a limited number of `` types: - text - textarea - email - number - password - search - tel - url See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types for more details on each input type. |
+| `type` | `type` | `TextFieldType \| UnsupportedTextFieldType` | `'text'` | The `` type to use, defaults to "text". The type greatly changes how the text field behaves. Text fields support a limited number of `` types: - text - textarea - email - number - password - search - tel - url See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types for more details on each input type. |
| `autocomplete` | `autocomplete` | `string` | `''` | Describes what, if any, type of autocomplete functionality the input should provide. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete |
-| `disabled` | | `boolean` | `undefined` | |
-| `name` | | `string` | `undefined` | |
-| `selectionDirection` | | `string` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `selectionDirection` | | `"none" \| "forward" \| "backward"` | `undefined` | |
| `selectionEnd` | | `number` | `undefined` | |
| `selectionStart` | | `number` | `undefined` | |
| `valueAsNumber` | | `number` | `undefined` | |
| `valueAsDate` | | `Date` | `undefined` | |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
+| `validity` | | `ValidityState` | `undefined` | Returns a ValidityState object that represents the validity states of the element. https://developer.mozilla.org/en-US/docs/Web/API/ValidityState |
+| `validationMessage` | | `string` | `undefined` | Returns a validation error message or an empty string if the element is valid. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage |
+| `willValidate` | | `boolean` | `undefined` | Returns whether an element will successfully validate based on forms validation rules and constraints. Disabled and readonly elements will not validate. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate |
@@ -540,6 +545,9 @@ Token | Default value
| `reset` | _None_ | `void` | Reset the text field to its default value. |
| `formResetCallback` | _None_ | `void` | |
| `formStateRestoreCallback` | `state` | `void` | |
+| `checkValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch an `invalid` event. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity |
+| `reportValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch a cancelable `invalid` event. If not canceled, a the current `validationMessage` will be reported to the user. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity |
+| `setCustomValidity` | `error` | `void` | Sets the element's constraint validation error message. When set to a non-empty string, `validity.customError` will be true and `validationMessage` will display the provided error. Use this method to customize error messages reported. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity |
@@ -588,15 +596,20 @@ Token | Default value
| `readOnly` | `readonly` | `boolean` | `false` | Indicates whether or not a user should be able to edit the text field's value. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly |
| `multiple` | `multiple` | `boolean` | `false` | Indicates that input accepts multiple email addresses. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple |
| `step` | `step` | `string` | `''` | Returns or sets the element's step attribute, which works with min and max to limit the increments at which a numeric or date-time value can be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step |
-| `type` | `type` | `string` | `'text'` | The `` type to use, defaults to "text". The type greatly changes how the text field behaves. Text fields support a limited number of `` types: - text - textarea - email - number - password - search - tel - url See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types for more details on each input type. |
+| `type` | `type` | `TextFieldType \| UnsupportedTextFieldType` | `'text'` | The `` type to use, defaults to "text". The type greatly changes how the text field behaves. Text fields support a limited number of `` types: - text - textarea - email - number - password - search - tel - url See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types for more details on each input type. |
| `autocomplete` | `autocomplete` | `string` | `''` | Describes what, if any, type of autocomplete functionality the input should provide. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete |
-| `disabled` | | `boolean` | `undefined` | |
-| `name` | | `string` | `undefined` | |
-| `selectionDirection` | | `string` | `undefined` | |
+| `name` | `name` | `string` | `undefined` | The HTML name to use in form submission. |
+| `disabled` | `disabled` | `boolean` | `undefined` | Whether or not the element is disabled. |
+| `selectionDirection` | | `"none" \| "forward" \| "backward"` | `undefined` | |
| `selectionEnd` | | `number` | `undefined` | |
| `selectionStart` | | `number` | `undefined` | |
| `valueAsNumber` | | `number` | `undefined` | |
| `valueAsDate` | | `Date` | `undefined` | |
+| `form` | | `HTMLFormElement` | `undefined` | The associated form element with which this element's value will submit. |
+| `labels` | | `NodeList` | `undefined` | The labels this element is associated with. |
+| `validity` | | `ValidityState` | `undefined` | Returns a ValidityState object that represents the validity states of the element. https://developer.mozilla.org/en-US/docs/Web/API/ValidityState |
+| `validationMessage` | | `string` | `undefined` | Returns a validation error message or an empty string if the element is valid. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage |
+| `willValidate` | | `boolean` | `undefined` | Returns whether an element will successfully validate based on forms validation rules and constraints. Disabled and readonly elements will not validate. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate |
@@ -615,6 +628,9 @@ Token | Default value
| `reset` | _None_ | `void` | Reset the text field to its default value. |
| `formResetCallback` | _None_ | `void` | |
| `formStateRestoreCallback` | `state` | `void` | |
+| `checkValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch an `invalid` event. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity |
+| `reportValidity` | _None_ | `boolean` | Checks the element's constraint validation and returns true if the element is valid or false if not. If invalid, this method will dispatch a cancelable `invalid` event. If not canceled, a the current `validationMessage` will be reported to the user. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity |
+| `setCustomValidity` | `error` | `void` | Sets the element's constraint validation error message. When set to a non-empty string, `validity.customError` will be true and `validationMessage` will display the provided error. Use this method to customize error messages reported. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity |
diff --git a/iconbutton/internal/icon-button.ts b/iconbutton/internal/icon-button.ts
index 33aa305d81..bfc210615e 100644
--- a/iconbutton/internal/icon-button.ts
+++ b/iconbutton/internal/icon-button.ts
@@ -44,11 +44,6 @@ export class IconButton extends iconButtonBaseClass {
delegatesFocus: true,
};
- /**
- * Disables the icon button and makes it non-interactive.
- */
- declare disabled: boolean; // for jsdoc until lit-analyzer is updated
-
/**
* "Soft-disables" the icon button (disabled but still focusable).
*
diff --git a/labs/behaviors/form-associated.ts b/labs/behaviors/form-associated.ts
index fdad2d795d..7be34fe1ed 100644
--- a/labs/behaviors/form-associated.ts
+++ b/labs/behaviors/form-associated.ts
@@ -12,17 +12,6 @@ import {MixinBase, MixinReturn} from './mixin.js';
/**
* A form-associated element.
- *
- * IMPORTANT: Requires declares for lit-analyzer
- * @example
- * ```ts
- * const base = mixinFormAssociated(mixinElementInternals(LitElement));
- * class MyControl extends base {
- * // Writable mixin properties for lit-html binding, needed for lit-analyzer
- * declare disabled: boolean;
- * declare name: string;
- * }
- * ```
*/
export interface FormAssociated {
/**
@@ -188,17 +177,6 @@ export const getFormState = Symbol('getFormState');
* }
* ```
*
- * IMPORTANT: Requires declares for lit-analyzer
- * @example
- * ```ts
- * const base = mixinFormAssociated(mixinElementInternals(LitElement));
- * class MyControl extends base {
- * // Writable mixin properties for lit-html binding, needed for lit-analyzer
- * declare disabled: boolean;
- * declare name: string;
- * }
- * ```
- *
* @param base The class to mix functionality into. The base class must use
* `mixinElementInternals()`.
* @return The provided class with `FormAssociated` mixed in.
diff --git a/package-lock.json b/package-lock.json
index 14b5264002..a8929c1584 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
"tslib": "^2.4.0"
},
"devDependencies": {
- "@lit-labs/analyzer": "^0.12.1",
+ "@lit-labs/analyzer": "^0.14.0",
"@rollup/plugin-multi-entry": "^6.0.1",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-terser": "^0.4.4",
@@ -919,26 +919,37 @@
}
},
"node_modules/@lit-labs/analyzer": {
- "version": "0.12.1",
- "resolved": "https://registry.npmjs.org/@lit-labs/analyzer/-/analyzer-0.12.1.tgz",
- "integrity": "sha512-V3bp3jSZAfsCCMRAp0JdiScyWbJgnmArgSdiNHS3jfV9WGf6IFckrOV3zsKj0OZlP0QJAmsgDno2AP4niCYjBg==",
+ "version": "0.14.0",
+ "resolved": "https://registry.npmjs.org/@lit-labs/analyzer/-/analyzer-0.14.0.tgz",
+ "integrity": "sha512-6/tjKDvA5pOea5t1OUYQ5dwPSQrTt7baSnDkT3q3j+/al/rHQPJmP+EWb/sSKc8e9dnJ1BAlMEN/9V4HVYAY6g==",
"dev": true,
+ "license": "BSD-3-Clause",
"dependencies": {
+ "@parse5/tools": "^0.7.0",
+ "lit-html": "^3.1.2",
"package-json-type": "^1.0.3",
- "typescript": "~5.3.3"
+ "parse5": "^7.3.0",
+ "typescript": "~5.9.0"
}
},
- "node_modules/@lit-labs/analyzer/node_modules/typescript": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
- "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+ "node_modules/@lit-labs/analyzer/node_modules/@parse5/tools": {
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/@parse5/tools/-/tools-0.7.0.tgz",
+ "integrity": "sha512-JDvrGhc8kYBq7/SM4obJkpgwWo6pRjF/fo9CCaiJyVOkDf203Ciq2UF6TjzCFXKs7Q/zS2sS4deyBx0XzRvh9Q==",
"dev": true,
- "bin": {
- "tsc": "bin/tsc",
- "tsserver": "bin/tsserver"
- },
- "engines": {
- "node": ">=14.17"
+ "license": "MIT",
+ "peerDependencies": {
+ "parse5": "7.x || 8.x"
+ }
+ },
+ "node_modules/@lit-labs/analyzer/node_modules/lit-html": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.2.tgz",
+ "integrity": "sha512-Qy9hU88zcmaxBXcc10ZpdK7cOLXvXpRoBxERdtqV9QOrfpMZZ6pSYP91LhpPtap3sFMUiL7Tw2RImbe0Al2/kw==",
+ "dev": true,
+ "license": "BSD-3-Clause",
+ "dependencies": {
+ "@types/trusted-types": "^2.0.2"
}
},
"node_modules/@lit-labs/eleventy-plugin-lit": {
@@ -7626,12 +7637,13 @@
"dev": true
},
"node_modules/parse5": {
- "version": "7.1.2",
- "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
- "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+ "version": "7.3.0",
+ "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+ "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
"dev": true,
+ "license": "MIT",
"dependencies": {
- "entities": "^4.4.0"
+ "entities": "^6.0.0"
},
"funding": {
"url": "https://github.com/inikulin/parse5?sponsor=1"
@@ -7650,6 +7662,19 @@
"url": "https://github.com/inikulin/parse5?sponsor=1"
}
},
+ "node_modules/parse5/node_modules/entities": {
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+ "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+ "dev": true,
+ "license": "BSD-2-Clause",
+ "engines": {
+ "node": ">=0.12"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/entities?sponsor=1"
+ }
+ },
"node_modules/parseurl": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
diff --git a/package.json b/package.json
index 91b9c7b690..25dfb5ff0a 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
"tslib": "^2.4.0"
},
"devDependencies": {
- "@lit-labs/analyzer": "^0.12.1",
+ "@lit-labs/analyzer": "^0.14.0",
"@rollup/plugin-multi-entry": "^6.0.1",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-terser": "^0.4.4",
diff --git a/radio/internal/radio.ts b/radio/internal/radio.ts
index a9e279e6cf..22da12251b 100644
--- a/radio/internal/radio.ts
+++ b/radio/internal/radio.ts
@@ -161,10 +161,6 @@ export class Radio extends radioBaseClass {
this.click();
}
- // Writable mixin properties for lit-html binding, needed for lit-analyzer
- declare disabled: boolean;
- declare name: string;
-
override [getFormValue]() {
return this.checked ? this.value : null;
}
diff --git a/scripts/analyzer/analyze-element.ts b/scripts/analyzer/analyze-element.ts
index d1cea1eac6..58ee1a8e47 100644
--- a/scripts/analyzer/analyze-element.ts
+++ b/scripts/analyzer/analyze-element.ts
@@ -12,9 +12,10 @@ import {
LitElementDeclaration,
LitElementExport,
Module,
+ Reference,
} from '@lit-labs/analyzer/package-analyzer.js';
import * as path from 'path';
-import type ts from 'typescript';
+import ts from 'typescript';
/**
* Represents a module that exports a custom element and links its superclasses
@@ -145,6 +146,8 @@ export function analyzeElementApi(
events,
};
+ let nextSuperClass: MdModuleInfo | undefined = undefined;
+
// If there is no superclass or we've gotten to the LitElement superclass,
// we're done. Stop analyzing. Otherwise, analyze the superclass.
if (superclass !== undefined && superclass.name !== 'LitElement') {
@@ -154,21 +157,138 @@ export function analyzeElementApi(
elementEntrypoint,
path.relative(elementEntrypoint, superClassLocation),
);
- const superClassModule = analyzeElementApi(
- analyzer,
- absolutePath,
- superclass.name,
+ nextSuperClass = analyzeElementApi(analyzer, absolutePath, superclass.name);
+ }
+
+ // Analyze and include any mixins in the superClass chain
+ for (const mixinRef of customElementModule.heritage.mixins) {
+ const mixinModule = analyzeMixin(
+ mixinRef,
+ elementModule,
+ elementEntrypoint,
+ nextSuperClass,
);
- elementDocModule.superClass = superClassModule;
+ if (mixinModule) {
+ nextSuperClass = mixinModule;
+ }
}
+ elementDocModule.superClass = nextSuperClass;
+
return elementDocModule;
}
/**
* These are fields we do not want to expose on the API docs.
*/
-const FIELDS_TO_IGNORE = new Set(['isListItem', 'isMenuItem']);
+const FIELDS_TO_IGNORE = new Set([
+ 'isListItem',
+ 'isMenuItem',
+ 'getAttribute',
+ 'removeAttribute',
+ 'tabIndex',
+ 'formAssociatedCallback',
+ 'formDisabledCallback',
+ 'requestUpdate',
+]);
+
+/**
+ * Analyzes a mixin from the custom element's heritage chain and returns info
+ * about its fields, methods, and events.
+ */
+export function analyzeMixin(
+ mixinRef: Reference,
+ elementModule: Module,
+ elementEntrypoint: string,
+ nextSuperClass?: MdModuleInfo,
+): MdModuleInfo | undefined {
+ const mixinModel = mixinRef.dereference();
+ if (!mixinModel) return undefined;
+
+ const mixinClass = mixinModel.isMixinDeclaration()
+ ? mixinModel.classDeclaration
+ : mixinModel.isClassDeclaration()
+ ? mixinModel
+ : null;
+
+ if (!mixinClass) return undefined;
+
+ const interfaceNames: string[] = [];
+ const classNode = mixinClass.node as ts.ClassLikeDeclaration;
+ if (classNode.heritageClauses) {
+ for (const clause of classNode.heritageClauses) {
+ if (
+ clause.token === ts.SyntaxKind.ImplementsKeyword ||
+ clause.getText().includes('implements')
+ ) {
+ for (const type of clause.types) {
+ interfaceNames.push(type.expression.getText());
+ }
+ }
+ }
+ }
+
+ const memberDocs = new Map();
+ const sourceFile = classNode.getSourceFile();
+ ts.forEachChild(sourceFile, (child) => {
+ const isMixinInterface =
+ ts.isInterfaceDeclaration(child) &&
+ interfaceNames.includes(child.name.text);
+ if (!isMixinInterface) return;
+
+ const propertiesAndMethods = child.members.filter(
+ (member) =>
+ ts.isPropertySignature(member) || ts.isMethodSignature(member),
+ );
+ for (const member of propertiesAndMethods) {
+ const name = member.name.getText();
+ const jsDocs = ts.getJSDocCommentsAndTags(member).filter(ts.isJSDoc);
+ const comment = jsDocs.reduce(
+ (prev, jsDoc) => `${prev}${jsDoc.comment}`,
+ '',
+ );
+ if (comment) {
+ memberDocs.set(name, comment);
+ }
+ }
+ });
+
+ let {
+ properties: mixinProperties,
+ reactiveProperties: mixinReactiveProperties,
+ } = analyzeFields(mixinClass, elementModule);
+ let mixinMethods = analyzeMethods(mixinClass);
+
+ mixinProperties = mixinProperties.filter(
+ (prop) => !FIELDS_TO_IGNORE.has(prop.name),
+ );
+ mixinReactiveProperties = mixinReactiveProperties.filter(
+ (prop) => !FIELDS_TO_IGNORE.has(prop.name),
+ );
+ mixinMethods = mixinMethods.filter(
+ (method) => !FIELDS_TO_IGNORE.has(method.name),
+ );
+
+ for (const prop of [
+ ...mixinProperties,
+ ...mixinReactiveProperties,
+ ...mixinMethods,
+ ]) {
+ if (!prop.description) {
+ prop.description = makeMarkdownFriendly(memberDocs.get(prop.name));
+ }
+ }
+
+ return {
+ className: mixinRef.name,
+ classPath: mixinRef.module || elementEntrypoint,
+ properties: mixinProperties,
+ reactiveProperties: mixinReactiveProperties,
+ methods: mixinMethods,
+ events: [],
+ superClass: nextSuperClass,
+ };
+}
/**
* Analyzes the fields of a LitElement class and returns information about the
diff --git a/select/internal/select.ts b/select/internal/select.ts
index 85148f35a7..9b739acdde 100644
--- a/select/internal/select.ts
+++ b/select/internal/select.ts
@@ -822,10 +822,6 @@ export abstract class Select extends selectBaseClass {
return this.error ? this.errorText : this.nativeErrorText;
}
- // Writable mixin properties for lit-html binding, needed for lit-analyzer
- declare disabled: boolean;
- declare name: string;
-
override [getFormValue]() {
return this.value;
}
diff --git a/slider/internal/slider.ts b/slider/internal/slider.ts
index 997859c1a9..3dad04eceb 100644
--- a/slider/internal/slider.ts
+++ b/slider/internal/slider.ts
@@ -725,10 +725,6 @@ export class Slider extends sliderBaseClass {
this.finishAction(event);
}
- // Writable mixin properties for lit-html binding, needed for lit-analyzer
- declare disabled: boolean;
- declare name: string;
-
override [getFormValue]() {
if (this.range) {
const data = new FormData();
diff --git a/switch/internal/switch.ts b/switch/internal/switch.ts
index 109e755821..4034e68db2 100644
--- a/switch/internal/switch.ts
+++ b/switch/internal/switch.ts
@@ -219,10 +219,6 @@ export class Switch extends switchBaseClass {
redispatchEvent(this, event);
}
- // Writable mixin properties for lit-html binding, needed for lit-analyzer
- declare disabled: boolean;
- declare name: string;
-
override [getFormValue]() {
return this.selected ? this.value : null;
}