mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
feat: add --md-sys-shape-* tokens for all components
PiperOrigin-RevId: 607427925
This commit is contained in:
Elizabeth Mitchell
Copybara-Service
parent
b23e3218ee
commit
41bac9e44d
@ -410,7 +410,7 @@ in terms of color, typography, and shape.
|
||||
Token | Default value
|
||||
--------------------------------------- | -------------------------------------
|
||||
`--md-elevated-button-container-color` | `--md-sys-color-surface`
|
||||
`--md-elevated-button-container-shape` | `9999px`
|
||||
`--md-elevated-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-elevated-button-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-elevated-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
@ -470,7 +470,7 @@ Token | Default value
|
||||
Token | Default value
|
||||
------------------------------------- | -------------------------------------
|
||||
`--md-filled-button-container-color` | `--md-sys-color-primary`
|
||||
`--md-filled-button-container-shape` | `9999px`
|
||||
`--md-filled-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-filled-button-label-text-color` | `--md-sys-color-on-primary`
|
||||
`--md-filled-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
@ -530,7 +530,7 @@ Token | Default value
|
||||
Token | Default value
|
||||
------------------------------------------- | -------------
|
||||
`--md-filled-tonal-button-container-color` | `--md-sys-color-secondary-container`
|
||||
`--md-filled-tonal-button-container-shape` | `9999px`
|
||||
`--md-filled-tonal-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-filled-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container`
|
||||
`--md-filled-tonal-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
@ -590,7 +590,7 @@ Token | Default value
|
||||
Token | Default value
|
||||
--------------------------------------- | -------------------------------------
|
||||
`--md-outlined-button-outline-color` | `--md-sys-color-outline`
|
||||
`--md-outlined-button-container-shape` | `9999px`
|
||||
`--md-outlined-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-outlined-button-label-text-color` | `--md-sys-color-primary`
|
||||
`--md-outlined-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
|
||||
@ -352,7 +352,7 @@ terms of color, typography, and shape.
|
||||
Token | Default value
|
||||
----------------------------------- | -------------------------------------
|
||||
`--md-assist-chip-outline-color` | `--md-sys-color-outline`
|
||||
`--md-assist-chip-container-shape` | `8px`
|
||||
`--md-assist-chip-container-shape` | `--md-sys-shape-corner-small`
|
||||
`--md-assist-chip-icon-size` | `18px`
|
||||
`--md-assist-chip-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-assist-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
@ -386,7 +386,7 @@ Token | Default value
|
||||
------------------------------------------- | -------------
|
||||
`--md-filter-chip-selected-container-color` | `--md-sys-color-secondary-container`
|
||||
`--md-filter-chip-outline-color` | `--md-sys-color-outline`
|
||||
`--md-filter-chip-container-shape` | `8px`
|
||||
`--md-filter-chip-container-shape` | `--md-sys-shape-corner-small`
|
||||
`--md-filter-chip-icon-size` | `18px`
|
||||
`--md-filter-chip-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-filter-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
@ -420,7 +420,7 @@ Token | Default value
|
||||
Token | Default value
|
||||
---------------------------------- | -------------------------------------
|
||||
`--md-input-chip-outline-color` | `--md-sys-color-outline`
|
||||
`--md-input-chip-container-shape` | `8px`
|
||||
`--md-input-chip-container-shape` | `--md-sys-shape-corner-small`
|
||||
`--md-input-chip-icon-size` | `18px`
|
||||
`--md-input-chip-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-input-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
@ -453,7 +453,7 @@ Token | Default value
|
||||
Token | Default value
|
||||
--------------------------------------- | -------------------------------------
|
||||
`--md-suggestion-chip-outline-color` | `--md-sys-color-outline`
|
||||
`--md-suggestion-chip-container-shape` | `8px`
|
||||
`--md-suggestion-chip-container-shape` | `--md-sys-shape-corner-small`
|
||||
`--md-suggestion-chip-icon-size` | `18px`
|
||||
`--md-suggestion-chip-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-suggestion-chip-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
@ -494,7 +494,7 @@ Token | Default value
|
||||
|
||||
Property | Attribute | Type | Default | Description
|
||||
--- | --- | --- | --- | ---
|
||||
`chips` | | `Chip[]` | `undefined` |
|
||||
`chips` | | `Chip[]` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -506,9 +506,9 @@ Property | Attribute | Type | Default | Description
|
||||
|
||||
Property | Attribute | Type | Default | Description
|
||||
--- | --- | --- | --- | ---
|
||||
`elevated` | `elevated` | `boolean` | `false` |
|
||||
`href` | `href` | `string` | `''` |
|
||||
`target` | `target` | `string` | `''` |
|
||||
`elevated` | `elevated` | `boolean` | `false` |
|
||||
`href` | `href` | `string` | `''` |
|
||||
`target` | `target` | `string` | `''` |
|
||||
`disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set.
|
||||
`alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>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.
|
||||
`label` | `label` | `string` | `''` | The label of the chip.
|
||||
@ -523,14 +523,14 @@ Property | Attribute | Type | Default | Description
|
||||
|
||||
Property | Attribute | Type | Default | Description
|
||||
--- | --- | --- | --- | ---
|
||||
`elevated` | `elevated` | `boolean` | `false` |
|
||||
`removable` | `removable` | `boolean` | `false` |
|
||||
`selected` | `selected` | `boolean` | `false` |
|
||||
`elevated` | `elevated` | `boolean` | `false` |
|
||||
`removable` | `removable` | `boolean` | `false` |
|
||||
`selected` | `selected` | `boolean` | `false` |
|
||||
`disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set.
|
||||
`alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>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.
|
||||
`label` | `label` | `string` | `''` | The label of the chip.
|
||||
`handleTrailingActionFocus` | | `() => void` | `undefined` |
|
||||
`ariaLabelRemove` | | `string` | `undefined` |
|
||||
`handleTrailingActionFocus` | | `() => void` | `undefined` |
|
||||
`ariaLabelRemove` | | `string` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -542,16 +542,16 @@ Property | Attribute | Type | Default | Description
|
||||
|
||||
Property | Attribute | Type | Default | Description
|
||||
--- | --- | --- | --- | ---
|
||||
`avatar` | `avatar` | `boolean` | `false` |
|
||||
`href` | `href` | `string` | `''` |
|
||||
`target` | `target` | `string` | `''` |
|
||||
`removeOnly` | `remove-only` | `boolean` | `false` |
|
||||
`selected` | `selected` | `boolean` | `false` |
|
||||
`avatar` | `avatar` | `boolean` | `false` |
|
||||
`href` | `href` | `string` | `''` |
|
||||
`target` | `target` | `string` | `''` |
|
||||
`removeOnly` | `remove-only` | `boolean` | `false` |
|
||||
`selected` | `selected` | `boolean` | `false` |
|
||||
`disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set.
|
||||
`alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>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.
|
||||
`label` | `label` | `string` | `''` | The label of the chip.
|
||||
`handleTrailingActionFocus` | | `() => void` | `undefined` |
|
||||
`ariaLabelRemove` | | `string` | `undefined` |
|
||||
`handleTrailingActionFocus` | | `() => void` | `undefined` |
|
||||
`ariaLabelRemove` | | `string` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -563,9 +563,9 @@ Property | Attribute | Type | Default | Description
|
||||
|
||||
Property | Attribute | Type | Default | Description
|
||||
--- | --- | --- | --- | ---
|
||||
`elevated` | `elevated` | `boolean` | `false` |
|
||||
`href` | `href` | `string` | `''` |
|
||||
`target` | `target` | `string` | `''` |
|
||||
`elevated` | `elevated` | `boolean` | `false` |
|
||||
`href` | `href` | `string` | `''` |
|
||||
`target` | `target` | `string` | `''` |
|
||||
`disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set.
|
||||
`alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>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.
|
||||
`label` | `label` | `string` | `''` | The label of the chip.
|
||||
|
||||
@ -351,7 +351,7 @@ Token | Default value
|
||||
---------------------------------- | ---------------------------------------
|
||||
`--md-fab-container-color` | `--md-sys-color-surface-container-high`
|
||||
`--md-fab-lowered-container-color` | `--md-sys-color-surface-container-low`
|
||||
`--md-fab-container-shape` | `16px`
|
||||
`--md-fab-container-shape` | `--md-sys-shape-corner-large`
|
||||
`--md-fab-icon-color` | `--md-sys-color-primary`
|
||||
`--md-fab-icon-size` | `24px`
|
||||
|
||||
@ -386,9 +386,9 @@ Token | Default value
|
||||
|
||||
Token | Default value
|
||||
-------------------------------- | -------------
|
||||
`--md-fab-small-container-shape` | `12px`
|
||||
`--md-fab-small-container-shape` | `--md-sys-shape-corner-medium`
|
||||
`--md-fab-small-icon-size` | `24px`
|
||||
`--md-fab-large-container-shape` | `28px`
|
||||
`--md-fab-large-container-shape` | `--md-sys-shape-corner-extra-large`
|
||||
`--md-fab-large-icon-size` | `36px`
|
||||
|
||||
#### Extended FAB tokens
|
||||
@ -427,7 +427,7 @@ Token | Default value
|
||||
Token | Default value
|
||||
---------------------------------- | ---------------------------------------
|
||||
`--md-fab-branded-container-color` | `--md-sys-color-surface-container-high`
|
||||
`--md-fab-branded-container-shape` | `16px`
|
||||
`--md-fab-branded-container-shape` | `--md-sys-shape-corner-large`
|
||||
`--md-fab-branded-icon-size` | `36px`
|
||||
`--md-fab-branded-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
@ -515,7 +515,7 @@ Property | Attribute | Type | Default | Description
|
||||
|
||||
Method | Parameters | Returns | Description
|
||||
--- | --- | --- | ---
|
||||
`getRenderClasses` | _None_ | `{ primary: boolean; secondary: boolean; tertiary: boolean; small: boolean; lowered: boolean; large: boolean; extended: boolean; }` |
|
||||
`getRenderClasses` | _None_ | `{ primary: boolean; secondary: boolean; tertiary: boolean; small: boolean; lowered: boolean; large: boolean; extended: boolean; }` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
|
||||
@ -105,7 +105,7 @@ customized in terms of color and shape.
|
||||
Token | Default value
|
||||
----------------------- | --------------------------
|
||||
`--md-focus-ring-color` | `--md-sys-color-secondary`
|
||||
`--md-focus-ring-shape` | `9999px`
|
||||
`--md-focus-ring-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-focus-ring-width` | `3px`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-focus-ring.scss)
|
||||
|
||||
@ -287,7 +287,7 @@ customized in terms of color, and shape.
|
||||
Token | Default value
|
||||
------------------------------------ | -----------------------------------
|
||||
`--md-icon-button-icon-color` | `--md-sys-color-on-surface-variant`
|
||||
`--md-icon-button-state-layer-shape` | `9999px`
|
||||
`--md-icon-button-state-layer-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-icon-button-icon-size` | `24px`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon-button.scss)
|
||||
@ -321,7 +321,7 @@ Token | Default value
|
||||
Token | Default value
|
||||
-------------------------------------------------- | ------------------------
|
||||
`--md-filled-icon-button-selected-container-color` | `--md-sys-color-primary`
|
||||
`--md-filled-icon-button-container-shape` | `9999px`
|
||||
`--md-filled-icon-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-filled-icon-button-container-width` | `40px`
|
||||
`--md-filled-icon-button-container-height` | `40px`
|
||||
`--md-filled-icon-button-icon-size` | `24px`
|
||||
@ -359,7 +359,7 @@ Token | Default value
|
||||
Token | Default value
|
||||
-------------------------------------------------------- | -------------
|
||||
`--md-filled-tonal-icon-button-selected-container-color` | `--md-sys-color-secondary-container`
|
||||
`--md-filled-tonal-icon-button-container-shape` | `9999px`
|
||||
`--md-filled-tonal-icon-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-filled-tonal-icon-button-container-width` | `40px`
|
||||
`--md-filled-tonal-icon-button-container-height` | `40px`
|
||||
`--md-filled-tonal-icon-button-icon-size` | `24px`
|
||||
@ -394,7 +394,7 @@ Token | Default value
|
||||
-------------------------------------------- | ------------------------
|
||||
`--md-outlined-icon-button-outline-color` | `--md-sys-color-outline`
|
||||
`--md-outlined-icon-button-outline-width` | `1px`
|
||||
`--md-outlined-icon-button-container-shape` | `9999px`
|
||||
`--md-outlined-icon-button-container-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-outlined-icon-button-container-width` | `40px`
|
||||
`--md-outlined-icon-button-container-height` | `40px`
|
||||
`--md-outlined-icon-button-icon-size` | `24px`
|
||||
|
||||
@ -200,7 +200,7 @@ and can be customized in terms of color, typography, and shape.
|
||||
Token | Default value
|
||||
----------------------------------------------- | -------------
|
||||
`--md-list-container-color` | `--md-sys-color-surface`
|
||||
`--md-list-item-container-shape` | `0px`
|
||||
`--md-list-item-container-shape` | `--md-sys-shape-corner-none`
|
||||
`--md-list-item-label-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-list-item-supporting-text-color` | `--md-sys-color-on-surface-variant`
|
||||
`--md-list-item-trailing-supporting-text-color` | `--md-sys-color-on-surface-variant`
|
||||
@ -322,7 +322,7 @@ Token | Default value
|
||||
`--md-list-item-leading-avatar-label-font` | `--md-sys-typescale-title-medium-font`
|
||||
`--md-list-item-leading-avatar-color` | `--md-sys-color-primary-container`
|
||||
`--md-list-item-leading-avatar-size` | `40px`
|
||||
`--md-list-item-leading-avatar-shape` | `9999px`
|
||||
`--md-list-item-leading-avatar-shape` | `--md-sys-shape-corner-full`
|
||||
|
||||
* [All List Item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)
|
||||
<!-- {.external} -->
|
||||
@ -333,7 +333,7 @@ Token | Default value
|
||||
------------------------------------- | -------------
|
||||
`--md-list-item-leading-image-height` | `56px`
|
||||
`--md-list-item-leading-image-width` | `56px`
|
||||
`--md-list-item-leading-image-shape` | `0px`
|
||||
`--md-list-item-leading-image-shape` | `--md-sys-shape-corner-none`
|
||||
|
||||
* [All List Item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
@ -433,7 +433,7 @@ the tokens for those components can also be used for Menu.
|
||||
Token | Default value
|
||||
----------------------------------------- | ------------------------------------
|
||||
`--md-menu-container-color` | `--md-sys-color-surface-container`
|
||||
`--md-menu-container-shape` | `4px`
|
||||
`--md-menu-container-shape` | `--md-sys-shape-corner-extra-small`
|
||||
`--md-menu-item-container-color` | `--md-sys-color-surface-container`
|
||||
`--md-menu-item-selected-container-color` | `--md-sys-color-secondary-container`
|
||||
|
||||
@ -532,8 +532,8 @@ Property | Attribute | Type | Default | Description
|
||||
`defaultFocus` | `default-focus` | `string` | `FocusState.FIRST_ITEM` | The element that should be focused by default once opened.<br>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.
|
||||
`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.
|
||||
`anchorElement` | | `HTMLElement & Partial<SurfacePositionTarget>` | `undefined` |
|
||||
`items` | | `MenuItem[]` | `undefined` |
|
||||
`anchorElement` | | `HTMLElement & Partial<SurfacePositionTarget>` | `undefined` |
|
||||
`items` | | `MenuItem[]` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -543,8 +543,8 @@ Property | Attribute | Type | Default | Description
|
||||
|
||||
Method | Parameters | Returns | Description
|
||||
--- | --- | --- | ---
|
||||
`close` | _None_ | `void` |
|
||||
`show` | _None_ | `void` |
|
||||
`close` | _None_ | `void` |
|
||||
`show` | _None_ | `void` |
|
||||
`activateNextItem` | _None_ | `MenuItem` | Activates the next item in the menu. If at the end of the menu, the first item will be activated.
|
||||
`activatePreviousItem` | _None_ | `MenuItem` | Activates the previous item in the menu. If at the start of the menu, the last item will be activated.
|
||||
|
||||
@ -577,7 +577,7 @@ Property | Attribute | Type | Default | Description
|
||||
`target` | `target` | `string` | `''` | 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` |
|
||||
`typeaheadText` | | `string` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -587,7 +587,7 @@ Property | Attribute | Type | Default | Description
|
||||
|
||||
Event | Description
|
||||
--- | ---
|
||||
`close-menu` |
|
||||
`close-menu` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -604,8 +604,8 @@ Property | Attribute | Type | Default | Description
|
||||
`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
|
||||
`item` | | `MenuItem` | `undefined` |
|
||||
`menu` | | `Menu` | `undefined` |
|
||||
`item` | | `MenuItem` | `undefined` |
|
||||
`menu` | | `Menu` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
|
||||
@ -316,7 +316,7 @@ Token | Default value
|
||||
---------------------------------------------- | -------------
|
||||
`--md-linear-progress-track-color` | `--md-sys-color-surface-container-highest`
|
||||
`--md-linear-progress-track-height` | `4px`
|
||||
`--md-linear-progress-track-shape` | `0px`
|
||||
`--md-linear-progress-track-shape` | `--md-sys-shape-corner-none`
|
||||
`--md-linear-progress-active-indicator-color` | `--md-sys-color-primary`
|
||||
`--md-linear-progress-active-indicator-height` | `4px`
|
||||
|
||||
|
||||
@ -116,7 +116,7 @@ and can be customized in terms of color, typography, and shape.
|
||||
Token | Default value
|
||||
------------------------------------------------ | -------------
|
||||
`--md-filled-select-text-field-container-color` | `--md-sys-color-surface-container-highest`
|
||||
`--md-filled-select-text-field-container-shape` | `4px`
|
||||
`--md-filled-select-text-field-container-shape` | `--md-sys-shape-corner-extra-small`
|
||||
`--md-filled-select-text-field-input-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-filled-select-text-field-input-text-font` | `--md-sys-typescale-body-large-font`
|
||||
|
||||
@ -165,7 +165,7 @@ md-filled-select::part(menu) {
|
||||
Token | Default value
|
||||
-------------------------------------------------- | -------------
|
||||
`--md-outlined-select-text-field-outline-color` | `--md-sys-color-outline`
|
||||
`--md-outlined-select-text-field-container-shape` | `4px`
|
||||
`--md-outlined-select-text-field-container-shape` | `--md-sys-shape-corner-extra-small`
|
||||
`--md-outlined-select-text-field-input-text-color` | `--md-sys-color-on-surface`
|
||||
`--md-outlined-select-text-field-input-text-font` | `--md-sys-typescale-body-large-font`
|
||||
|
||||
@ -230,16 +230,16 @@ Property | Attribute | Type | Default | Description
|
||||
`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.
|
||||
`value` | `value` | `string` | `undefined` |
|
||||
`selectedIndex` | `selected-index` | `number` | `undefined` |
|
||||
`options` | | `SelectOption[]` | `undefined` |
|
||||
`selectedOptions` | | `SelectOption[]` | `undefined` |
|
||||
`name` | | `string` | `undefined` |
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
`validity` | | `ValidityState` | `undefined` |
|
||||
`validationMessage` | | `string` | `undefined` |
|
||||
`willValidate` | | `boolean` | `undefined` |
|
||||
`value` | `value` | `string` | `undefined` |
|
||||
`selectedIndex` | `selected-index` | `number` | `undefined` |
|
||||
`options` | | `SelectOption[]` | `undefined` |
|
||||
`selectedOptions` | | `SelectOption[]` | `undefined` |
|
||||
`name` | | `string` | `undefined` |
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
`validity` | | `ValidityState` | `undefined` |
|
||||
`validationMessage` | | `string` | `undefined` |
|
||||
`willValidate` | | `boolean` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -255,7 +255,7 @@ Method | Parameters | Returns | Description
|
||||
`checkValidity` | _None_ | `boolean` | Checks the select's native validation and returns whether or not the element is valid.<br>If invalid, this method will dispatch the `invalid` event.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
|
||||
`reportValidity` | _None_ | `boolean` | Checks the select's native validation and returns whether or not the element is valid.<br>If invalid, this method will dispatch the `invalid` event.<br>This method will display or clear an error text message equal to the select's `validationMessage`, unless the invalid event is canceled.<br>Use `setCustomValidity()` to customize the `validationMessage`.<br>This method can also be used to re-announce error messages to screen readers.
|
||||
`setCustomValidity` | `error` | `void` | Sets the select's native validation error message. This is used to customize `validationMessage`.<br>When the error is not an empty string, the select is considered invalid and `validity.customError` will be true.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity
|
||||
`getUpdateComplete` | _None_ | `Promise<boolean>` |
|
||||
`getUpdateComplete` | _None_ | `Promise<boolean>` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -293,16 +293,16 @@ Property | Attribute | Type | Default | Description
|
||||
`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.
|
||||
`value` | `value` | `string` | `undefined` |
|
||||
`selectedIndex` | `selected-index` | `number` | `undefined` |
|
||||
`options` | | `SelectOption[]` | `undefined` |
|
||||
`selectedOptions` | | `SelectOption[]` | `undefined` |
|
||||
`name` | | `string` | `undefined` |
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
`validity` | | `ValidityState` | `undefined` |
|
||||
`validationMessage` | | `string` | `undefined` |
|
||||
`willValidate` | | `boolean` | `undefined` |
|
||||
`value` | `value` | `string` | `undefined` |
|
||||
`selectedIndex` | `selected-index` | `number` | `undefined` |
|
||||
`options` | | `SelectOption[]` | `undefined` |
|
||||
`selectedOptions` | | `SelectOption[]` | `undefined` |
|
||||
`name` | | `string` | `undefined` |
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
`validity` | | `ValidityState` | `undefined` |
|
||||
`validationMessage` | | `string` | `undefined` |
|
||||
`willValidate` | | `boolean` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -318,7 +318,7 @@ Method | Parameters | Returns | Description
|
||||
`checkValidity` | _None_ | `boolean` | Checks the select's native validation and returns whether or not the element is valid.<br>If invalid, this method will dispatch the `invalid` event.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
|
||||
`reportValidity` | _None_ | `boolean` | Checks the select's native validation and returns whether or not the element is valid.<br>If invalid, this method will dispatch the `invalid` event.<br>This method will display or clear an error text message equal to the select's `validationMessage`, unless the invalid event is canceled.<br>Use `setCustomValidity()` to customize the `validationMessage`.<br>This method can also be used to re-announce error messages to screen readers.
|
||||
`setCustomValidity` | `error` | `void` | Sets the select's native validation error message. This is used to customize `validationMessage`.<br>When the error is not an empty string, the select is considered invalid and `validity.customError` will be true.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity
|
||||
`getUpdateComplete` | _None_ | `Promise<boolean>` |
|
||||
`getUpdateComplete` | _None_ | `Promise<boolean>` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -348,9 +348,9 @@ Property | Attribute | Type | Default | Description
|
||||
`disabled` | `disabled` | `boolean` | `false` | Disables the item and makes it non-selectable and non-interactive.
|
||||
`selected` | `selected` | `boolean` | `false` | Sets the item in the selected visual state when a submenu is opened.
|
||||
`value` | `value` | `string` | `''` | Form value of the option.
|
||||
`type` | | `string` | `'option' as const` |
|
||||
`typeaheadText` | | `string` | `undefined` |
|
||||
`displayText` | | `string` | `undefined` |
|
||||
`type` | | `string` | `'option' as const` |
|
||||
`typeaheadText` | | `string` | `undefined` |
|
||||
`displayText` | | `string` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
|
||||
@ -119,11 +119,11 @@ in terms of color and shape.
|
||||
Token | Default value
|
||||
---------------------------------- | ------------------------------------------
|
||||
`--md-slider-active-track-color` | `--md-sys-color-primary`
|
||||
`--md-slider-active-track-shape` | `9999px`
|
||||
`--md-slider-active-track-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-slider-inactive-track-color` | `--md-sys-color-surface-container-highest`
|
||||
`--md-slider-inactive-track-shape` | `9999px`
|
||||
`--md-slider-inactive-track-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-slider-handle-color` | `--md-sys-color-primary`
|
||||
`--md-slider-handle-shape` | `9999px`
|
||||
`--md-slider-handle-shape` | `--md-sys-shape-corner-full`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-slider.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
@ -137,9 +137,9 @@ in terms of color and shape.
|
||||
Token | Default value
|
||||
----------------------------------- | ------------------------------------------
|
||||
`--md-switch-handle-color` | `--md-sys-color-outline`
|
||||
`--md-switch-handle-shape` | `9999px`
|
||||
`--md-switch-handle-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-switch-track-color` | `--md-sys-color-surface-container-highest`
|
||||
`--md-switch-track-shape` | `9999px`
|
||||
`--md-switch-track-shape` | `--md-sys-shape-corner-full`
|
||||
`--md-switch-selected-handle-color` | `--md-sys-color-on-primary`
|
||||
`--md-switch-selected-track-color` | `--md-sys-color-primary`
|
||||
|
||||
|
||||
@ -298,7 +298,7 @@ Token | Default value
|
||||
`--md-primary-tab-label-text-font` | `--md-sys-typescale-title-small-font`
|
||||
`--md-primary-tab-active-indicator-color` | `--md-sys-color-primary`
|
||||
`--md-primary-tab-icon-color` | `--md-sys-color-on-surface-variant`
|
||||
`--md-primary-tab-container-shape` | `0px`
|
||||
`--md-primary-tab-container-shape` | `--md-sys-shape-corner-none`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-primary-tab.scss)
|
||||
<!-- {.external} -->
|
||||
@ -339,7 +339,7 @@ Token | Default value
|
||||
`--md-secondary-tab-label-text-font` | `--md-sys-typescale-title-small-font`
|
||||
`--md-secondary-tab-active-indicator-color` | `--md-sys-color-primary`
|
||||
`--md-secondary-tab-icon-color` | `--md-sys-color-on-surface-variant`
|
||||
`--md-secondary-tab-container-shape` | `0px`
|
||||
`--md-secondary-tab-container-shape` | `--md-sys-shape-corner-none`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-secondary-tab.scss)
|
||||
<!-- {.external} -->
|
||||
@ -385,8 +385,8 @@ Property | Attribute | Type | Default | Description
|
||||
--- | --- | --- | --- | ---
|
||||
`autoActivate` | `auto-activate` | `boolean` | `false` | Whether or not to automatically select a tab when it is focused.
|
||||
`tabs` | | `Tab[]` | `undefined` | The tabs of this tab bar.
|
||||
`activeTab` | | `Tab` | `undefined` |
|
||||
`activeTabIndex` | | `number` | `undefined` |
|
||||
`activeTab` | | `Tab` | `undefined` |
|
||||
`activeTabIndex` | | `number` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -423,7 +423,7 @@ Property | Attribute | Type | Default | Description
|
||||
`active` | `active` | `boolean` | `false` | Whether or not the tab is selected.
|
||||
`hasIcon` | `has-icon` | `boolean` | `false` | In SSR, set this to true when an icon is present.
|
||||
`iconOnly` | `icon-only` | `boolean` | `false` | In SSR, set this to true when there is no label and only an icon.
|
||||
`selected` | `selected` | `boolean` | `undefined` |
|
||||
`selected` | `selected` | `boolean` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -439,7 +439,7 @@ Property | Attribute | Type | Default | Description
|
||||
`active` | `active` | `boolean` | `false` | Whether or not the tab is selected.
|
||||
`hasIcon` | `has-icon` | `boolean` | `false` | In SSR, set this to true when an icon is present.
|
||||
`iconOnly` | `icon-only` | `boolean` | `false` | In SSR, set this to true when there is no label and only an icon.
|
||||
`selected` | `selected` | `boolean` | `undefined` |
|
||||
`selected` | `selected` | `boolean` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
|
||||
@ -406,7 +406,7 @@ customized in terms of color, typography, and shape.
|
||||
|
||||
Token | Default value
|
||||
----------------------------------------------------- | -------------
|
||||
`--md-filled-text-field-container-shape` | `4px 4px 0px 0px`
|
||||
`--md-filled-text-field-container-shape` | `--md-sys-shape-corner-extra-small`
|
||||
`--md-filled-text-field-container-color` | `--md-sys-color-surface-container-highest`
|
||||
`--md-filled-text-field-focus-active-indicator-color` | `--md-sys-color-primary`
|
||||
`--md-filled-text-field-input-text-font` | `--md-sys-typescale-body-large-font`
|
||||
@ -444,7 +444,7 @@ Token | Default value
|
||||
|
||||
Token | Default value
|
||||
---------------------------------------------- | -------------
|
||||
`--md-outlined-text-field-container-shape` | `4px`
|
||||
`--md-outlined-text-field-container-shape` | `--md-sys-shape-corner-extra-small`
|
||||
`--md-outlined-text-field-focus-outline-color` | `--md-sys-color-primary`
|
||||
`--md-outlined-text-field-input-text-font` | `--md-sys-typescale-body-large-font`
|
||||
`--md-outlined-text-field-label-text-font` | `--md-sys-typescale-body-large-font`
|
||||
@ -488,11 +488,11 @@ Token | Default value
|
||||
|
||||
Property | Attribute | Type | Default | Description
|
||||
--- | --- | --- | --- | ---
|
||||
`disabled` | `disabled` | `boolean` | `false` |
|
||||
`disabled` | `disabled` | `boolean` | `false` |
|
||||
`error` | `error` | `boolean` | `false` | Gets or sets whether or not the text field is in a visually invalid state.<br>This error state overrides the error state controlled by `reportValidity()`.
|
||||
`errorText` | `error-text` | `string` | `''` | The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.<br>This error message overrides the error message displayed by `reportValidity()`.
|
||||
`label` | `label` | `string` | `''` |
|
||||
`required` | `required` | `boolean` | `false` |
|
||||
`label` | `label` | `string` | `''` |
|
||||
`required` | `required` | `boolean` | `false` |
|
||||
`value` | `value` | `string` | `''` | The current value of the text field. It is always a string.
|
||||
`prefixText` | `prefix-text` | `string` | `''` | An optional prefix to display before the input value.
|
||||
`suffixText` | `suffix-text` | `string` | `''` | An optional suffix to display after the input value.
|
||||
@ -502,29 +502,29 @@ Property | Attribute | Type | Default | Description
|
||||
`textDirection` | `text-direction` | `string` | `''` | Override the input text CSS `direction`. Useful for RTL languages that use LTR notation for fractions.
|
||||
`rows` | `rows` | `number` | `2` | The number of rows to display for a `type="textarea"` text field. Defaults to 2.
|
||||
`cols` | `cols` | `number` | `20` | The number of cols to display for a `type="textarea"` text field. Defaults to 20.
|
||||
`inputMode` | `inputmode` | `string` | `''` |
|
||||
`inputMode` | `inputmode` | `string` | `''` |
|
||||
`max` | `max` | `string` | `''` | Defines the greatest value in the range of permitted values.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
|
||||
`maxLength` | `maxlength` | `number` | `-1` | The maximum number of characters a user can enter into the text field. Set to -1 for none.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
|
||||
`min` | `min` | `string` | `''` | Defines the most negative value in the range of permitted values.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
|
||||
`minLength` | `minlength` | `number` | `-1` | The minimum number of characters a user can enter into the text field. Set to -1 for none.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
|
||||
`pattern` | `pattern` | `string` | `''` | A regular expression that the text field's value must match to pass constraint validation.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
|
||||
`placeholder` | `placeholder` | `string` | `''` |
|
||||
`placeholder` | `placeholder` | `string` | `''` |
|
||||
`readOnly` | `readonly` | `boolean` | `false` | Indicates whether or not a user should be able to edit the text field's value.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
|
||||
`multiple` | `multiple` | `boolean` | `false` | Indicates that input accepts multiple email addresses.<br>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.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
|
||||
`type` | `type` | `string` | `'text'` | The `<input>` type to use, defaults to "text". The type greatly changes how the text field behaves.<br>Text fields support a limited number of `<input>` types:<br>- text - textarea - email - number - password - search - tel - url<br>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.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
`name` | | `string` | `undefined` |
|
||||
`selectionDirection` | | `string` | `undefined` |
|
||||
`selectionEnd` | | `number` | `undefined` |
|
||||
`selectionStart` | | `number` | `undefined` |
|
||||
`validationMessage` | | `string` | `undefined` |
|
||||
`validity` | | `ValidityState` | `undefined` |
|
||||
`valueAsNumber` | | `number` | `undefined` |
|
||||
`valueAsDate` | | `Date` | `undefined` |
|
||||
`willValidate` | | `boolean` | `undefined` |
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
`name` | | `string` | `undefined` |
|
||||
`selectionDirection` | | `string` | `undefined` |
|
||||
`selectionEnd` | | `number` | `undefined` |
|
||||
`selectionStart` | | `number` | `undefined` |
|
||||
`validationMessage` | | `string` | `undefined` |
|
||||
`validity` | | `ValidityState` | `undefined` |
|
||||
`valueAsNumber` | | `number` | `undefined` |
|
||||
`valueAsDate` | | `Date` | `undefined` |
|
||||
`willValidate` | | `boolean` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -538,7 +538,7 @@ Method | Parameters | Returns | Description
|
||||
`reportValidity` | _None_ | `boolean` | Checks the text field's native validation and returns whether or not the element is valid.<br>If invalid, this method will dispatch the `invalid` event.<br>This method will display or clear an error text message equal to the text field's `validationMessage`, unless the invalid event is canceled.<br>Use `setCustomValidity()` to customize the `validationMessage`.<br>This method can also be used to re-announce error messages to screen readers.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity
|
||||
`select` | _None_ | `void` | Selects all the text in the text field.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
|
||||
`setCustomValidity` | `error` | `void` | Sets a custom validation error message for the text field. Use this for custom error message.<br>When the error is not an empty string, the text field is considered invalid and `validity.customError` will be true.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
|
||||
`setRangeText` | `args` | `void` |
|
||||
`setRangeText` | `args` | `void` |
|
||||
`setSelectionRange` | `start`, `end`, `direction` | `void` | Sets the start and end positions of a selection in the text field.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
|
||||
`stepDown` | `stepDecrement` | `void` | Decrements the value of a numeric type text field by `step` or `n` `step` number of times.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown
|
||||
`stepUp` | `stepIncrement` | `void` | Increments the value of a numeric type text field by `step` or `n` `step` number of times.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp
|
||||
@ -554,11 +554,11 @@ Method | Parameters | Returns | Description
|
||||
|
||||
Property | Attribute | Type | Default | Description
|
||||
--- | --- | --- | --- | ---
|
||||
`disabled` | `disabled` | `boolean` | `false` |
|
||||
`disabled` | `disabled` | `boolean` | `false` |
|
||||
`error` | `error` | `boolean` | `false` | Gets or sets whether or not the text field is in a visually invalid state.<br>This error state overrides the error state controlled by `reportValidity()`.
|
||||
`errorText` | `error-text` | `string` | `''` | The error message that replaces supporting text when `error` is true. If `errorText` is an empty string, then the supporting text will continue to show.<br>This error message overrides the error message displayed by `reportValidity()`.
|
||||
`label` | `label` | `string` | `''` |
|
||||
`required` | `required` | `boolean` | `false` |
|
||||
`label` | `label` | `string` | `''` |
|
||||
`required` | `required` | `boolean` | `false` |
|
||||
`value` | `value` | `string` | `''` | The current value of the text field. It is always a string.
|
||||
`prefixText` | `prefix-text` | `string` | `''` | An optional prefix to display before the input value.
|
||||
`suffixText` | `suffix-text` | `string` | `''` | An optional suffix to display after the input value.
|
||||
@ -568,29 +568,29 @@ Property | Attribute | Type | Default | Description
|
||||
`textDirection` | `text-direction` | `string` | `''` | Override the input text CSS `direction`. Useful for RTL languages that use LTR notation for fractions.
|
||||
`rows` | `rows` | `number` | `2` | The number of rows to display for a `type="textarea"` text field. Defaults to 2.
|
||||
`cols` | `cols` | `number` | `20` | The number of cols to display for a `type="textarea"` text field. Defaults to 20.
|
||||
`inputMode` | `inputmode` | `string` | `''` |
|
||||
`inputMode` | `inputmode` | `string` | `''` |
|
||||
`max` | `max` | `string` | `''` | Defines the greatest value in the range of permitted values.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
|
||||
`maxLength` | `maxlength` | `number` | `-1` | The maximum number of characters a user can enter into the text field. Set to -1 for none.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
|
||||
`min` | `min` | `string` | `''` | Defines the most negative value in the range of permitted values.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
|
||||
`minLength` | `minlength` | `number` | `-1` | The minimum number of characters a user can enter into the text field. Set to -1 for none.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
|
||||
`pattern` | `pattern` | `string` | `''` | A regular expression that the text field's value must match to pass constraint validation.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
|
||||
`placeholder` | `placeholder` | `string` | `''` |
|
||||
`placeholder` | `placeholder` | `string` | `''` |
|
||||
`readOnly` | `readonly` | `boolean` | `false` | Indicates whether or not a user should be able to edit the text field's value.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
|
||||
`multiple` | `multiple` | `boolean` | `false` | Indicates that input accepts multiple email addresses.<br>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.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
|
||||
`type` | `type` | `string` | `'text'` | The `<input>` type to use, defaults to "text". The type greatly changes how the text field behaves.<br>Text fields support a limited number of `<input>` types:<br>- text - textarea - email - number - password - search - tel - url<br>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.<br>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
`name` | | `string` | `undefined` |
|
||||
`selectionDirection` | | `string` | `undefined` |
|
||||
`selectionEnd` | | `number` | `undefined` |
|
||||
`selectionStart` | | `number` | `undefined` |
|
||||
`validationMessage` | | `string` | `undefined` |
|
||||
`validity` | | `ValidityState` | `undefined` |
|
||||
`valueAsNumber` | | `number` | `undefined` |
|
||||
`valueAsDate` | | `Date` | `undefined` |
|
||||
`willValidate` | | `boolean` | `undefined` |
|
||||
`form` | | `HTMLFormElement` | `undefined` |
|
||||
`labels` | | `NodeList` | `undefined` |
|
||||
`name` | | `string` | `undefined` |
|
||||
`selectionDirection` | | `string` | `undefined` |
|
||||
`selectionEnd` | | `number` | `undefined` |
|
||||
`selectionStart` | | `number` | `undefined` |
|
||||
`validationMessage` | | `string` | `undefined` |
|
||||
`validity` | | `ValidityState` | `undefined` |
|
||||
`valueAsNumber` | | `number` | `undefined` |
|
||||
`valueAsDate` | | `Date` | `undefined` |
|
||||
`willValidate` | | `boolean` | `undefined` |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
@ -604,7 +604,7 @@ Method | Parameters | Returns | Description
|
||||
`reportValidity` | _None_ | `boolean` | Checks the text field's native validation and returns whether or not the element is valid.<br>If invalid, this method will dispatch the `invalid` event.<br>This method will display or clear an error text message equal to the text field's `validationMessage`, unless the invalid event is canceled.<br>Use `setCustomValidity()` to customize the `validationMessage`.<br>This method can also be used to re-announce error messages to screen readers.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity
|
||||
`select` | _None_ | `void` | Selects all the text in the text field.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
|
||||
`setCustomValidity` | `error` | `void` | Sets a custom validation error message for the text field. Use this for custom error message.<br>When the error is not an empty string, the text field is considered invalid and `validity.customError` will be true.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
|
||||
`setRangeText` | `args` | `void` |
|
||||
`setRangeText` | `args` | `void` |
|
||||
`setSelectionRange` | `start`, `end`, `direction` | `void` | Sets the start and end positions of a selection in the text field.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
|
||||
`stepDown` | `stepDecrement` | `void` | Decrements the value of a numeric type text field by `step` or `n` `step` number of times.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown
|
||||
`stepUp` | `stepIncrement` | `void` | Increments the value of a numeric type text field by `step` or `n` `step` number of times.<br>https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp
|
||||
|
||||
@ -10,7 +10,7 @@ order: 1
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2023-09-06' }
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2024-02-12' }
|
||||
tag: 'docType:concepts'
|
||||
*-->
|
||||
|
||||
@ -101,7 +101,16 @@ details.
|
||||
|
||||
#### Shape
|
||||
|
||||
*MWC does not currently support `--md-sys-shape` tokens.*
|
||||
[`--md-sys-shape` tokens](shape.md#tokens) define corner shapes used in
|
||||
components. See the [shape guide](shape.md) for more details.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--md-sys-shape-corner-small: 4px;
|
||||
--md-sys-shape-corner-medium: 6px;
|
||||
--md-sys-shape-corner-large: 8px;
|
||||
}
|
||||
```
|
||||
|
||||
#### Motion
|
||||
|
||||
|
||||
57
docs/theming/shape.md
Normal file
57
docs/theming/shape.md
Normal file
@ -0,0 +1,57 @@
|
||||
<!-- catalog-only-start --><!-- ---
|
||||
name: Shape
|
||||
title: Shape
|
||||
order: 4
|
||||
-----><!-- catalog-only-end -->
|
||||
|
||||
# Shape
|
||||
|
||||
<!-- go/mwc-shape -->
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2024-02-12' }
|
||||
tag: 'docType:howTo'
|
||||
*-->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
[Shape](https://m3.material.io/styles/shape)<!-- {.external} --> can direct attention,
|
||||
communicate state, and express brand.
|
||||
|
||||
## Shape
|
||||
|
||||
<!-- go/md-sys-shape -->
|
||||
|
||||
Corners use a
|
||||
[range of shape scales](https://m3.material.io/styles/shape/shape-scale-tokens#b85fe884-325c-45e6-b7fb-e753c6e03c82)<!-- {.external} -->
|
||||
for their roundness, from straight to fully round.
|
||||
|
||||
> Note: "cut" corners are not supported.
|
||||
|
||||
### Tokens
|
||||
|
||||
Shape corners can be set using
|
||||
[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)<!-- {.external} -->.
|
||||
Tokens follow the naming convention `--md-sys-shape-<token>`.
|
||||
|
||||
Shape | Token
|
||||
------ | -----------------------------------
|
||||
Corner | `--md-sys-shape-corner-none`
|
||||
| `--md-sys-shape-corner-extra-small`
|
||||
| `--md-sys-shape-corner-small`
|
||||
| `--md-sys-shape-corner-medium`
|
||||
| `--md-sys-shape-corner-large`
|
||||
| `--md-sys-shape-corner-extra-large`
|
||||
| `--md-sys-shape-corner-full`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-sys-shape.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
```css
|
||||
:root {
|
||||
--md-sys-shape-corner-small: 4px;
|
||||
--md-sys-shape-corner-medium: 6px;
|
||||
--md-sys-shape-corner-large: 8px;
|
||||
}
|
||||
```
|
||||
@ -4,9 +4,99 @@
|
||||
//
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use './internal/validate';
|
||||
@use './v0_192/md-sys-shape';
|
||||
// go/keep-sorted end
|
||||
|
||||
@function values($exclude-hardcoded-values: false) {
|
||||
@return md-sys-shape.values($exclude-hardcoded-values);
|
||||
$supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'corner-extra-large',
|
||||
'corner-extra-small',
|
||||
'corner-full',
|
||||
'corner-large',
|
||||
'corner-medium',
|
||||
'corner-none',
|
||||
'corner-small',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
$unsupported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'corner-extra-large-top',
|
||||
'corner-extra-small-top',
|
||||
'corner-large-end',
|
||||
'corner-large-start',
|
||||
'corner-large-top',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
@function values(
|
||||
$exclude-hardcoded-values: false,
|
||||
$exclude-custom-properties: false
|
||||
) {
|
||||
$original-tokens: md-sys-shape.values($exclude-hardcoded-values);
|
||||
$tokens: validate.values(
|
||||
$original-tokens,
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens
|
||||
);
|
||||
|
||||
@if not $exclude-custom-properties {
|
||||
// Create --md-sys-shape-* custom properties
|
||||
@each $token, $value in $tokens {
|
||||
@if $value != null {
|
||||
$tokens: map.set(
|
||||
$tokens,
|
||||
$token,
|
||||
var(--md-sys-shape-#{$token}, #{$value})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add multi-corner shape tokens purely for other Sass token APIs. These do
|
||||
// not represent real token custom properties that can be set (there is no
|
||||
// `--md-sys-shape-corner-extra-large-top` custom property).
|
||||
// Instead, these are shorthand values that point to single-corner custom
|
||||
// properties for usage in Sass component token mappings.
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'corner-extra-large-top': (
|
||||
map.get($tokens, 'corner-extra-large'),
|
||||
map.get($tokens, 'corner-extra-large'),
|
||||
map.get($tokens, 'corner-none'),
|
||||
map.get($tokens, 'corner-none'),
|
||||
),
|
||||
'corner-extra-small-top': (
|
||||
map.get($tokens, 'corner-extra-small'),
|
||||
map.get($tokens, 'corner-extra-small'),
|
||||
map.get($tokens, 'corner-none'),
|
||||
map.get($tokens, 'corner-none'),
|
||||
),
|
||||
'corner-large-end': (
|
||||
map.get($tokens, 'corner-none'),
|
||||
map.get($tokens, 'corner-large'),
|
||||
map.get($tokens, 'corner-large'),
|
||||
map.get($tokens, 'corner-none'),
|
||||
),
|
||||
'corner-large-start': (
|
||||
map.get($tokens, 'corner-large'),
|
||||
map.get($tokens, 'corner-none'),
|
||||
map.get($tokens, 'corner-none'),
|
||||
map.get($tokens, 'corner-large'),
|
||||
),
|
||||
'corner-large-top': (
|
||||
map.get($tokens, 'corner-large'),
|
||||
map.get($tokens, 'corner-large'),
|
||||
map.get($tokens, 'corner-none'),
|
||||
map.get($tokens, 'corner-none'),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
@return $tokens;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user