@material/web 1.0.0-pre.11 → 1.0.0-pre.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -1
- package/button/lib/_icon.scss +9 -9
- package/button/lib/_outlined-button.scss +4 -0
- package/button/lib/button.d.ts +0 -6
- package/button/lib/button.js +2 -14
- package/button/lib/button.js.map +1 -1
- package/button/lib/elevated-styles.css.js +1 -1
- package/button/lib/elevated-styles.css.js.map +1 -1
- package/button/lib/filled-styles.css.js +1 -1
- package/button/lib/filled-styles.css.js.map +1 -1
- package/button/lib/outlined-styles.css.js +1 -1
- package/button/lib/outlined-styles.css.js.map +1 -1
- package/button/lib/shared-styles.css.js +1 -1
- package/button/lib/shared-styles.css.js.map +1 -1
- package/button/lib/text-styles.css.js +1 -1
- package/button/lib/text-styles.css.js.map +1 -1
- package/button/lib/tonal-styles.css.js +1 -1
- package/button/lib/tonal-styles.css.js.map +1 -1
- package/chips/assist-chip.js +2 -1
- package/chips/assist-chip.js.map +1 -1
- package/chips/filter-chip.js +3 -1
- package/chips/filter-chip.js.map +1 -1
- package/chips/harness.d.ts +2 -5
- package/chips/harness.js +9 -6
- package/chips/harness.js.map +1 -1
- package/chips/input-chip.js +5 -1
- package/chips/input-chip.js.map +1 -1
- package/chips/lib/_elevated.scss +14 -0
- package/chips/lib/_selectable.scss +8 -0
- package/chips/lib/_shared.scss +1 -0
- package/chips/lib/_trailing-icon.scss +1 -1
- package/chips/lib/assist-chip.d.ts +1 -0
- package/chips/lib/assist-chip.js +1 -0
- package/chips/lib/assist-chip.js.map +1 -1
- package/chips/lib/assist-forced-colors-styles.css.d.ts +1 -0
- package/chips/lib/assist-forced-colors-styles.css.js +9 -0
- package/chips/lib/assist-forced-colors-styles.css.js.map +1 -0
- package/chips/lib/assist-forced-colors-styles.scss +27 -0
- package/chips/lib/chip-set.js +4 -4
- package/chips/lib/chip-set.js.map +1 -1
- package/chips/lib/elevated-styles.css.js +1 -1
- package/chips/lib/elevated-styles.css.js.map +1 -1
- package/chips/lib/filter-chip.d.ts +1 -0
- package/chips/lib/filter-chip.js +2 -1
- package/chips/lib/filter-chip.js.map +1 -1
- package/chips/lib/filter-forced-colors-styles.css.d.ts +1 -0
- package/chips/lib/filter-forced-colors-styles.css.js +9 -0
- package/chips/lib/filter-forced-colors-styles.css.js.map +1 -0
- package/chips/lib/filter-forced-colors-styles.scss +34 -0
- package/chips/lib/input-chip.d.ts +2 -0
- package/chips/lib/input-chip.js +4 -2
- package/chips/lib/input-chip.js.map +1 -1
- package/chips/lib/input-forced-colors-styles.css.d.ts +1 -0
- package/chips/lib/input-forced-colors-styles.css.js +9 -0
- package/chips/lib/input-forced-colors-styles.css.js.map +1 -0
- package/chips/lib/input-forced-colors-styles.scss +39 -0
- package/chips/lib/input-styles.css.js +1 -1
- package/chips/lib/input-styles.css.js.map +1 -1
- package/chips/lib/selectable-styles.css.js +1 -1
- package/chips/lib/selectable-styles.css.js.map +1 -1
- package/chips/lib/shared-styles.css.js +1 -1
- package/chips/lib/shared-styles.css.js.map +1 -1
- package/chips/lib/suggestion-forced-colors-styles.css.d.ts +1 -0
- package/chips/lib/suggestion-forced-colors-styles.css.js +9 -0
- package/chips/lib/suggestion-forced-colors-styles.css.js.map +1 -0
- package/chips/lib/suggestion-forced-colors-styles.scss +27 -0
- package/chips/lib/trailing-icon-styles.css.js +1 -1
- package/chips/lib/trailing-icon-styles.css.js.map +1 -1
- package/chips/suggestion-chip.js +2 -1
- package/chips/suggestion-chip.js.map +1 -1
- package/dialog/lib/_dialog.scss +2 -2
- package/dialog/lib/_tokens.scss +5 -22
- package/dialog/lib/dialog-styles.css.js +1 -1
- package/dialog/lib/dialog-styles.css.js.map +1 -1
- package/dialog/lib/dialog.d.ts +9 -3
- package/dialog/lib/dialog.js +24 -16
- package/dialog/lib/dialog.js.map +1 -1
- package/fab/branded-fab.d.ts +1 -0
- package/fab/lib/_fab.scss +12 -0
- package/fab/lib/fab-styles.css.js +1 -1
- package/fab/lib/fab-styles.css.js.map +1 -1
- package/fab/lib/fab.d.ts +1 -0
- package/fab/lib/shared.d.ts +9 -0
- package/fab/lib/shared.js +23 -2
- package/fab/lib/shared.js.map +1 -1
- package/field/lib/_supporting-text.scss +6 -16
- package/field/lib/field.d.ts +26 -2
- package/field/lib/field.js +100 -15
- package/field/lib/field.js.map +1 -1
- package/field/lib/outlined-field.d.ts +1 -2
- package/field/lib/outlined-field.js.map +1 -1
- package/field/lib/shared-styles.css.js +1 -1
- package/field/lib/shared-styles.css.js.map +1 -1
- package/iconbutton/lib/icon-button.js +1 -1
- package/iconbutton/lib/icon-button.js.map +1 -1
- package/labs/navigationbar/lib/navigation-bar.js +2 -2
- package/labs/navigationbar/lib/navigation-bar.js.map +1 -1
- package/labs/navigationtab/lib/navigation-tab.js +3 -3
- package/labs/navigationtab/lib/navigation-tab.js.map +1 -1
- package/labs/segmentedbutton/lib/_shared.scss +7 -7
- package/labs/segmentedbutton/lib/outlined-styles.css.js +1 -1
- package/labs/segmentedbutton/lib/outlined-styles.css.js.map +1 -1
- package/labs/segmentedbutton/lib/segmented-button.js +2 -2
- package/labs/segmentedbutton/lib/segmented-button.js.map +1 -1
- package/labs/segmentedbutton/lib/shared-styles.css.js +1 -1
- package/labs/segmentedbutton/lib/shared-styles.css.js.map +1 -1
- package/labs/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
- package/labs/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
- package/list/harness.d.ts +24 -0
- package/list/harness.js +25 -0
- package/list/harness.js.map +1 -1
- package/list/lib/list.d.ts +28 -10
- package/list/lib/list.js +57 -19
- package/list/lib/list.js.map +1 -1
- package/list/lib/listitem/harness.d.ts +21 -1
- package/list/lib/listitem/harness.js +16 -2
- package/list/lib/listitem/harness.js.map +1 -1
- package/list/lib/listitem/list-item.js +4 -4
- package/list/lib/listitem/list-item.js.map +1 -1
- package/list/lib/listitemlink/list-item-link-only.d.ts +1 -0
- package/list/lib/listitemlink/list-item-link-only.js +4 -1
- package/list/lib/listitemlink/list-item-link-only.js.map +1 -1
- package/menu/harness.js.map +1 -1
- package/menu/lib/menu.d.ts +15 -1
- package/menu/lib/menu.js +29 -6
- package/menu/lib/menu.js.map +1 -1
- package/package.json +5 -4
- package/radio/lib/single-selection-controller.js +2 -3
- package/radio/lib/single-selection-controller.js.map +1 -1
- package/select/harness.js +1 -1
- package/select/harness.js.map +1 -1
- package/select/lib/_shared.scss +2 -1
- package/select/lib/select.d.ts +1 -11
- package/select/lib/select.js +15 -51
- package/select/lib/select.js.map +1 -1
- package/select/lib/shared-styles.css.js +1 -1
- package/select/lib/shared-styles.css.js.map +1 -1
- package/slider/lib/slider.d.ts +3 -3
- package/slider/lib/slider.js +10 -10
- package/slider/lib/slider.js.map +1 -1
- package/switch/lib/switch.js +1 -1
- package/switch/lib/switch.js.map +1 -1
- package/tabs/lib/tab.js +4 -2
- package/tabs/lib/tab.js.map +1 -1
- package/tabs/lib/tabs.js +3 -1
- package/tabs/lib/tabs.js.map +1 -1
- package/textfield/lib/_shared.scss +0 -4
- package/textfield/lib/shared-styles.css.js +1 -1
- package/textfield/lib/shared-styles.css.js.map +1 -1
- package/textfield/lib/text-field.d.ts +2 -13
- package/textfield/lib/text-field.js +44 -98
- package/textfield/lib/text-field.js.map +1 -1
- package/tokens/_md-comp-dialog.scss +48 -6
- package/tokens/_md-comp-elevated-button.scss +17 -7
- package/tokens/_md-comp-elevation.scss +11 -2
- package/tokens/_md-comp-filled-button.scss +17 -7
- package/tokens/_md-comp-filled-tonal-button.scss +17 -7
- package/tokens/_md-comp-input-chip.scss +7 -0
- package/tokens/_md-comp-list-item.scss +5 -0
- package/tokens/_md-comp-menu-item.scss +1 -0
- package/tokens/_md-comp-outlined-button.scss +19 -9
- package/tokens/_md-comp-outlined-segmented-button.scss +19 -13
- package/tokens/_md-comp-slider.scss +48 -2
- package/tokens/_md-comp-suggestion-chip.scss +1 -0
- package/tokens/_md-comp-text-button.scss +17 -7
- package/tokens/_values.scss +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-styles.css.js","sourceRoot":"","sources":["input-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-input-chip-container-height, 32px);--_container-shape: var(--md-input-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-input-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-input-chip-disabled-label-text-opacity, 0.38);--_disabled-selected-container-color: var(--md-input-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-input-chip-disabled-selected-container-opacity, 0.12);--_label-text-type: var(--md-input-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_selected-container-color: var(--md-input-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-label-text-color: var(--md-input-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-input-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-input-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-input-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-input-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-outline-width: var(--md-input-chip-selected-outline-width, 0px);--_selected-pressed-label-text-color: var(--md-input-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-input-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-opacity: var(--md-input-chip-selected-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-input-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-input-chip-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-input-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-input-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-input-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-input-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-input-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-input-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-input-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-input-chip-outline-width, 1px);--_pressed-label-text-color: var(--md-input-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-input-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-input-chip-pressed-state-layer-opacity, 0.12);--_avatar-shape: var(--md-input-chip-avatar-shape, 9999px);--_avatar-size: var(--md-input-chip-avatar-size, 24px);--_disabled-avatar-opacity: var(--md-input-chip-disabled-avatar-opacity, 0.38);--_disabled-leading-icon-color: var(--md-input-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-input-chip-disabled-leading-icon-opacity, 0.38);--_icon-size: var(--md-input-chip-icon-size, 18px);--_selected-focus-leading-icon-color: var(--md-input-chip-selected-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-leading-icon-color: var(--md-input-chip-selected-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-leading-icon-color: var(--md-input-chip-selected-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-leading-icon-color: var(--md-input-chip-selected-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-input-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-input-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-input-chip-leading-icon-color, var(--md-sys-color-
|
|
1
|
+
{"version":3,"file":"input-styles.css.js","sourceRoot":"","sources":["input-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-input-chip-container-height, 32px);--_container-shape: var(--md-input-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-input-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-input-chip-disabled-label-text-opacity, 0.38);--_disabled-selected-container-color: var(--md-input-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-input-chip-disabled-selected-container-opacity, 0.12);--_label-text-type: var(--md-input-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_selected-container-color: var(--md-input-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-label-text-color: var(--md-input-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-input-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-input-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-input-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-input-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-outline-width: var(--md-input-chip-selected-outline-width, 0px);--_selected-pressed-label-text-color: var(--md-input-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-input-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-opacity: var(--md-input-chip-selected-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-input-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-input-chip-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-input-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-input-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-input-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-input-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-input-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-input-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-input-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-input-chip-outline-width, 1px);--_pressed-label-text-color: var(--md-input-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-input-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-input-chip-pressed-state-layer-opacity, 0.12);--_avatar-shape: var(--md-input-chip-avatar-shape, 9999px);--_avatar-size: var(--md-input-chip-avatar-size, 24px);--_disabled-avatar-opacity: var(--md-input-chip-disabled-avatar-opacity, 0.38);--_disabled-leading-icon-color: var(--md-input-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-input-chip-disabled-leading-icon-opacity, 0.38);--_icon-size: var(--md-input-chip-icon-size, 18px);--_selected-focus-leading-icon-color: var(--md-input-chip-selected-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-leading-icon-color: var(--md-input-chip-selected-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-leading-icon-color: var(--md-input-chip-selected-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-leading-icon-color: var(--md-input-chip-selected-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-input-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-input-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-input-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-input-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-input-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-input-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-input-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-input-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-input-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-input-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-input-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-input-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-input-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-input-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--_container-shape) )}.avatar .primary.action{padding-inline-start:4px}.avatar .leading.icon ::slotted(:first-child){border-radius:var(--_avatar-shape);height:var(--_avatar-size);width:var(--_avatar-size)}.disabled.avatar .leading.icon{opacity:var(--_disabled-avatar-opacity)}/*# sourceMappingURL=input-styles.css.map */\n`;\n "]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.selected::before{background:var(--_selected-container-color)}.selected .outline{border-width:var(--_selected-outline-width)}.selected.disabled::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}.selected .label{color:var(--_selected-label-text-color)}.selected:hover .label{color:var(--_selected-hover-label-text-color)}.selected:focus .label{color:var(--_selected-focus-label-text-color)}.selected:active .label{color:var(--_selected-pressed-label-text-color)}.selected .leading.icon{color:var(--_selected-leading-icon-color)}.selected:hover .leading.icon{color:var(--_selected-hover-leading-icon-color)}.selected:focus .leading.icon{color:var(--_selected-focus-leading-icon-color)}.selected:active .leading.icon{color:var(--_selected-pressed-leading-icon-color)}/*# sourceMappingURL=selectable-styles.css.map */
|
|
7
|
+
export const styles = css `.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.selected::before{background:var(--_selected-container-color)}.selected .outline{border-width:var(--_selected-outline-width)}.selected.disabled::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}.selected .label{color:var(--_selected-label-text-color)}.selected:hover .label{color:var(--_selected-hover-label-text-color)}.selected:focus .label{color:var(--_selected-focus-label-text-color)}.selected:active .label{color:var(--_selected-pressed-label-text-color)}.selected .leading.icon{color:var(--_selected-leading-icon-color)}.selected:hover .leading.icon{color:var(--_selected-hover-leading-icon-color)}.selected:focus .leading.icon{color:var(--_selected-focus-leading-icon-color)}.selected:active .leading.icon{color:var(--_selected-pressed-leading-icon-color)}@media(forced-colors: active){.selected:not(.elevated)::before{border:1px solid rgba(0,0,0,0)}}/*# sourceMappingURL=selectable-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=selectable-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectable-styles.css.js","sourceRoot":"","sources":["selectable-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.selected::before{background:var(--_selected-container-color)}.selected .outline{border-width:var(--_selected-outline-width)}.selected.disabled::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}.selected .label{color:var(--_selected-label-text-color)}.selected:hover .label{color:var(--_selected-hover-label-text-color)}.selected:focus .label{color:var(--_selected-focus-label-text-color)}.selected:active .label{color:var(--_selected-pressed-label-text-color)}.selected .leading.icon{color:var(--_selected-leading-icon-color)}.selected:hover .leading.icon{color:var(--_selected-hover-leading-icon-color)}.selected:focus .leading.icon{color:var(--_selected-focus-leading-icon-color)}.selected:active .leading.icon{color:var(--_selected-pressed-leading-icon-color)}/*# sourceMappingURL=selectable-styles.css.map */\n`;\n "]}
|
|
1
|
+
{"version":3,"file":"selectable-styles.css.js","sourceRoot":"","sources":["selectable-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.selected::before{background:var(--_selected-container-color)}.selected .outline{border-width:var(--_selected-outline-width)}.selected.disabled::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}.selected .label{color:var(--_selected-label-text-color)}.selected:hover .label{color:var(--_selected-hover-label-text-color)}.selected:focus .label{color:var(--_selected-focus-label-text-color)}.selected:active .label{color:var(--_selected-pressed-label-text-color)}.selected .leading.icon{color:var(--_selected-leading-icon-color)}.selected:hover .leading.icon{color:var(--_selected-hover-leading-icon-color)}.selected:focus .leading.icon{color:var(--_selected-focus-leading-icon-color)}.selected:active .leading.icon{color:var(--_selected-pressed-leading-icon-color)}@media(forced-colors: active){.selected:not(.elevated)::before{border:1px solid rgba(0,0,0,0)}}/*# sourceMappingURL=selectable-styles.css.map */\n`;\n "]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.container{border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.container::before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.cell{display:flex}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;gap:8px;outline:none;padding:0;position:relative;text-decoration:none}.primary.action{padding-inline-start:8px;padding-inline-end:16px}.touch{height:48px;inset:50% 0 0;position:absolute;transform:translateY(-50%);width:100%}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:focus .outline{border-color:var(--_focus-outline-color)}.disabled .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon,.touch{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font:var(--_label-text-type);height:100%;text-overflow:ellipsis;user-select:none;white-space:nowrap}:hover .label{color:var(--_hover-label-text-color)}:focus .label{color:var(--_focus-label-text-color)}:active .label{color:var(--_pressed-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;display:flex;position:relative}.icon ::slotted(:first-child){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.leading.icon{color:var(--_leading-icon-color)}:hover .leading.icon{color:var(--_hover-leading-icon-color)}:focus .leading.icon{color:var(--_focus-leading-icon-color)}:active .leading.icon{color:var(--_pressed-leading-icon-color)}.disabled .leading.icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# sourceMappingURL=shared-styles.css.map */
|
|
7
|
+
export const styles = css `:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.container{border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.container::before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.cell{display:flex}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;gap:8px;outline:none;padding:0;position:relative;text-decoration:none}.primary.action{padding-inline-start:8px;padding-inline-end:16px}.touch{height:48px;inset:50% 0 0;position:absolute;transform:translateY(-50%);width:100%}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:focus .outline{border-color:var(--_focus-outline-color)}.disabled .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon,.touch{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font:var(--_label-text-type);height:100%;text-overflow:ellipsis;user-select:none;white-space:nowrap}:hover .label{color:var(--_hover-label-text-color)}:focus .label{color:var(--_focus-label-text-color)}:active .label{color:var(--_pressed-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;display:flex;fill:currentColor;position:relative}.icon ::slotted(:first-child){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.leading.icon{color:var(--_leading-icon-color)}:hover .leading.icon{color:var(--_hover-leading-icon-color)}:focus .leading.icon{color:var(--_focus-leading-icon-color)}:active .leading.icon{color:var(--_pressed-leading-icon-color)}.disabled .leading.icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# sourceMappingURL=shared-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=shared-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.container{border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.container::before{border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.cell{display:flex}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;gap:8px;outline:none;padding:0;position:relative;text-decoration:none}.primary.action{padding-inline-start:8px;padding-inline-end:16px}.touch{height:48px;inset:50% 0 0;position:absolute;transform:translateY(-50%);width:100%}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:focus .outline{border-color:var(--_focus-outline-color)}.disabled .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon,.touch{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font:var(--_label-text-type);height:100%;text-overflow:ellipsis;user-select:none;white-space:nowrap}:hover .label{color:var(--_hover-label-text-color)}:focus .label{color:var(--_focus-label-text-color)}:active .label{color:var(--_pressed-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;display:flex;position:relative}.icon ::slotted(:first-child){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.leading.icon{color:var(--_leading-icon-color)}:hover .leading.icon{color:var(--_hover-leading-icon-color)}:focus .leading.icon{color:var(--_focus-leading-icon-color)}:active .leading.icon{color:var(--_pressed-leading-icon-color)}.disabled .leading.icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
|
|
1
|
+
{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.container{border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.container::before{border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.cell{display:flex}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;gap:8px;outline:none;padding:0;position:relative;text-decoration:none}.primary.action{padding-inline-start:8px;padding-inline-end:16px}.touch{height:48px;inset:50% 0 0;position:absolute;transform:translateY(-50%);width:100%}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:focus .outline{border-color:var(--_focus-outline-color)}.disabled .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon,.touch{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font:var(--_label-text-type);height:100%;text-overflow:ellipsis;user-select:none;white-space:nowrap}:hover .label{color:var(--_hover-label-text-color)}:focus .label{color:var(--_focus-label-text-color)}:active .label{color:var(--_pressed-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;display:flex;fill:currentColor;position:relative}.icon ::slotted(:first-child){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.leading.icon{color:var(--_leading-icon-color)}:hover .leading.icon{color:var(--_hover-leading-icon-color)}:focus .leading.icon{color:var(--_focus-leading-icon-color)}:active .leading.icon{color:var(--_pressed-leading-icon-color)}.disabled .leading.icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2022 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { css } from 'lit';
|
|
7
|
+
export const styles = css `@media(forced-colors: active){:host{--md-suggestion-chip-disabled-label-text-color: GrayText;--md-suggestion-chip-disabled-label-text-opacity: 1;--md-suggestion-chip-disabled-leading-icon-color: GrayText;--md-suggestion-chip-disabled-leading-icon-opacity: 1;--md-suggestion-chip-disabled-outline-color: GrayText;--md-suggestion-chip-disabled-outline-opacity: 1}.link .outline{border-color:ActiveText}}/*# sourceMappingURL=suggestion-forced-colors-styles.css.map */
|
|
8
|
+
`;
|
|
9
|
+
//# sourceMappingURL=suggestion-forced-colors-styles.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"suggestion-forced-colors-styles.css.js","sourceRoot":"","sources":["suggestion-forced-colors-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`@media(forced-colors: active){:host{--md-suggestion-chip-disabled-label-text-color: GrayText;--md-suggestion-chip-disabled-label-text-opacity: 1;--md-suggestion-chip-disabled-leading-icon-color: GrayText;--md-suggestion-chip-disabled-leading-icon-opacity: 1;--md-suggestion-chip-disabled-outline-color: GrayText;--md-suggestion-chip-disabled-outline-opacity: 1}.link .outline{border-color:ActiveText}}/*# sourceMappingURL=suggestion-forced-colors-styles.css.map */\n`;\n "]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 Google LLC
|
|
3
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
//
|
|
5
|
+
|
|
6
|
+
// go/keep-sorted start
|
|
7
|
+
@use './suggestion-chip';
|
|
8
|
+
// go/keep-sorted end
|
|
9
|
+
|
|
10
|
+
@media (forced-colors: active) {
|
|
11
|
+
:host {
|
|
12
|
+
@include suggestion-chip.theme(
|
|
13
|
+
(
|
|
14
|
+
'disabled-label-text-color': GrayText,
|
|
15
|
+
'disabled-label-text-opacity': 1,
|
|
16
|
+
'disabled-leading-icon-color': GrayText,
|
|
17
|
+
'disabled-leading-icon-opacity': 1,
|
|
18
|
+
'disabled-outline-color': GrayText,
|
|
19
|
+
'disabled-outline-opacity': 1,
|
|
20
|
+
)
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.link .outline {
|
|
25
|
+
border-color: ActiveText;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `.trailing.action{align-items:center;justify-content:center;padding:0 8px;--md-focus-ring-shape-start-start: var(--_container-shape-start-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-outward-offset: -2px}.trailing.action md-ripple{border-radius:50%;height:calc(1.3333333333*var(--_icon-size));width:calc(1.3333333333*var(--_icon-size))}
|
|
7
|
+
export const styles = css `.trailing.action{align-items:center;justify-content:center;padding:0 8px;--md-focus-ring-shape-start-start: var(--_container-shape-start-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-outward-offset: -2px}.trailing.action md-ripple{border-radius:50%;height:calc(1.3333333333*var(--_icon-size));width:calc(1.3333333333*var(--_icon-size))}.has-trailing .primary.action{padding-inline-end:0}.trailing.icon{color:var(--_trailing-icon-color);height:var(--_icon-size);width:var(--_icon-size)}:hover .trailing.icon{color:var(--_hover-trailing-icon-color)}:focus .trailing.icon{color:var(--_focus-trailing-icon-color)}:active .trailing.icon{color:var(--_pressed-trailing-icon-color)}.disabled .trailing.icon{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.selected .trailing.icon{color:var(--_selected-trailing-icon-color)}.selected:hover .trailing.icon{color:var(--_selected-hover-trailing-icon-color)}.selected:focus .trailing.icon{color:var(--_selected-focus-trailing-icon-color)}.selected:active .trailing.icon{color:var(--_selected-pressed-trailing-icon-color)}/*# sourceMappingURL=trailing-icon-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=trailing-icon-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"trailing-icon-styles.css.js","sourceRoot":"","sources":["trailing-icon-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`.trailing.action{align-items:center;justify-content:center;padding:0 8px;--md-focus-ring-shape-start-start: var(--_container-shape-start-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-outward-offset: -2px}.trailing.action md-ripple{border-radius:50%;height:calc(1.3333333333*var(--_icon-size));width:calc(1.3333333333*var(--_icon-size))}
|
|
1
|
+
{"version":3,"file":"trailing-icon-styles.css.js","sourceRoot":"","sources":["trailing-icon-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`.trailing.action{align-items:center;justify-content:center;padding:0 8px;--md-focus-ring-shape-start-start: var(--_container-shape-start-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-outward-offset: -2px}.trailing.action md-ripple{border-radius:50%;height:calc(1.3333333333*var(--_icon-size));width:calc(1.3333333333*var(--_icon-size))}.has-trailing .primary.action{padding-inline-end:0}.trailing.icon{color:var(--_trailing-icon-color);height:var(--_icon-size);width:var(--_icon-size)}:hover .trailing.icon{color:var(--_hover-trailing-icon-color)}:focus .trailing.icon{color:var(--_focus-trailing-icon-color)}:active .trailing.icon{color:var(--_pressed-trailing-icon-color)}.disabled .trailing.icon{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.selected .trailing.icon{color:var(--_selected-trailing-icon-color)}.selected:hover .trailing.icon{color:var(--_selected-hover-trailing-icon-color)}.selected:focus .trailing.icon{color:var(--_selected-focus-trailing-icon-color)}.selected:active .trailing.icon{color:var(--_selected-pressed-trailing-icon-color)}/*# sourceMappingURL=trailing-icon-styles.css.map */\n`;\n "]}
|
package/chips/suggestion-chip.js
CHANGED
|
@@ -8,6 +8,7 @@ import { customElement } from 'lit/decorators.js';
|
|
|
8
8
|
import { styles as elevatedStyles } from './lib/elevated-styles.css.js';
|
|
9
9
|
import { styles as sharedStyles } from './lib/shared-styles.css.js';
|
|
10
10
|
import { SuggestionChip } from './lib/suggestion-chip.js';
|
|
11
|
+
import { styles as forcedColorsStyles } from './lib/suggestion-forced-colors-styles.css.js';
|
|
11
12
|
import { styles } from './lib/suggestion-styles.css.js';
|
|
12
13
|
/**
|
|
13
14
|
* TODO(b/243982145): add docs
|
|
@@ -17,7 +18,7 @@ import { styles } from './lib/suggestion-styles.css.js';
|
|
|
17
18
|
*/
|
|
18
19
|
let MdSuggestionChip = class MdSuggestionChip extends SuggestionChip {
|
|
19
20
|
};
|
|
20
|
-
MdSuggestionChip.styles = [sharedStyles, elevatedStyles, styles];
|
|
21
|
+
MdSuggestionChip.styles = [sharedStyles, elevatedStyles, styles, forcedColorsStyles];
|
|
21
22
|
MdSuggestionChip = __decorate([
|
|
22
23
|
customElement('md-suggestion-chip')
|
|
23
24
|
], MdSuggestionChip);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,
|
|
1
|
+
{"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,8CAA8C,CAAC;AAC1F,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAClB,CAAC,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAFpD,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAG5B;SAHY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as elevatedStyles} from './lib/elevated-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\nimport {SuggestionChip} from './lib/suggestion-chip.js';\nimport {styles as forcedColorsStyles} from './lib/suggestion-forced-colors-styles.css.js';\nimport {styles} from './lib/suggestion-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-suggestion-chip': MdSuggestionChip;\n }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-suggestion-chip')\nexport class MdSuggestionChip extends SuggestionChip {\n static override styles =\n [sharedStyles, elevatedStyles, styles, forcedColorsStyles];\n}\n"]}
|
package/dialog/lib/_dialog.scss
CHANGED
|
@@ -359,8 +359,8 @@
|
|
|
359
359
|
// Slot styling
|
|
360
360
|
[name='headline-prefix']::slotted(*),
|
|
361
361
|
[name='headline-suffix']::slotted(*) {
|
|
362
|
-
color: var(--
|
|
363
|
-
font-size: var(--
|
|
362
|
+
color: var(--_icon-color);
|
|
363
|
+
font-size: var(--_icon-size);
|
|
364
364
|
}
|
|
365
365
|
|
|
366
366
|
[name='header']::slotted(*) {
|
package/dialog/lib/_tokens.scss
CHANGED
|
@@ -57,29 +57,12 @@ $_fullscreen-tokens: (
|
|
|
57
57
|
fullscreen-container-block-padding: 8px,
|
|
58
58
|
);
|
|
59
59
|
|
|
60
|
-
@function _map-without-keys-with-prefix($map, $prefix) {
|
|
61
|
-
$filtered: ();
|
|
62
|
-
@each $prop, $value in $map {
|
|
63
|
-
@if not string-ext.has-prefix($prop, $prefix) {
|
|
64
|
-
$filtered: map.set($filtered, $prop, $value);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
@return $filtered;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
@function remove-unsupported-tokens($tokens) {
|
|
71
|
-
$remove-prefix: 'action-';
|
|
72
|
-
$tokens: _map-without-keys-with-prefix($tokens, $remove-prefix);
|
|
73
|
-
|
|
74
|
-
@return $tokens;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
60
|
/**
|
|
78
|
-
* Extended token set for dialog.
|
|
79
|
-
* `action-*-label-text` and `action-*-state-layer` since actions are
|
|
80
|
-
* spec'd as standard text buttons.
|
|
61
|
+
* Extended token set for dialog.
|
|
81
62
|
*/
|
|
82
63
|
@function md-comp-dialog-values() {
|
|
83
|
-
|
|
84
|
-
|
|
64
|
+
@return map.merge(
|
|
65
|
+
map.merge(tokens.md-comp-dialog-values(), $_tokens),
|
|
66
|
+
$_fullscreen-tokens
|
|
67
|
+
);
|
|
85
68
|
}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-dialog-container-elevation, 3);--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-type: var(--md-dialog-headline-type, var(--md-sys-typescale-headline-small, 400 1.5rem / 2rem var(--md-ref-typeface-brand, Roboto)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-dialog-supporting-text-type, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--
|
|
7
|
+
export const styles = css `:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-dialog-container-elevation, 3);--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-type: var(--md-dialog-headline-type, var(--md-sys-typescale-headline-small, 400 1.5rem / 2rem var(--md-ref-typeface-brand, Roboto)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-dialog-supporting-text-type, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-max-inline-size: var(--md-dialog-container-max-inline-size, min(560px, 100% - 48px));--_container-min-inline-size: var(--md-dialog-container-min-inline-size, 280px);--_container-max-block-size: var(--md-dialog-container-max-block-size, min(560px, 100% - 48px));--_container-min-block-size: var(--md-dialog-container-min-block-size, 140px);--_container-inset-inline-start: var(--md-dialog-container-inset-inline-start, auto);--_container-inset-inline-end: var(--md-dialog-container-inset-inline-end, auto);--_container-inset-block-start: var(--md-dialog-container-inset-block-start, auto);--_container-inset-block-end: var(--md-dialog-container-inset-block-end, auto);--_opening-transition-duration: var(--md-dialog-opening-transition-duration, 400ms);--_opening-transition-easing: var(--md-dialog-opening-transition-easing, cubic-bezier(0.05, 0.7, 0.1, 1));--_closing-transition-duration: var(--md-dialog-closing-transition-duration, 200ms);--_closing-transition-easing: var(--md-dialog-closing-transition-easing, cubic-bezier(0.3, 0, 0.8, 0.15));--_scrim-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.32));--_container-block-padding: var(--md-dialog-container-block-padding, 24px);--_container-inline-padding: var(--md-dialog-container-inline-padding, 24px);--_header-spacing: var(--md-dialog-header-spacing, 16px);--_action-spacing: var(--md-dialog-action-spacing, 8px);--_content-block-start-spacing: var(--md-dialog-content-block-start-spacing, 16px);--_content-block-end-spacing: var(--md-dialog-content-block-end-spacing, 24px);--_with-divider-divider-height: var(--md-dialog-with-divider-divider-height, 1px);--_with-divider-divider-color: var(--md-dialog-with-divider-divider-color, var(--md-sys-color-outline, #79747e));--_fullscreen-header-block-size: var(--md-dialog-fullscreen-header-block-size, 56px);--_fullscreen-footer-block-size: var(--md-dialog-fullscreen-footer-block-size, 56px);--_fullscreen-container-block-padding: var(--md-dialog-fullscreen-container-block-padding, 8px);--_container-drag-inline-start: initial;--_container-drag-block-start: initial}@media(prefers-reduced-motion: reduce){:host{--_opening-transition-duration: 0;--_closing-transition-duration: 0}}.dialog{position:fixed;align-items:center;justify-content:center;box-sizing:border-box;inset:0;block-size:100dvh;inline-size:100dvw;max-block-size:100dvh;max-inline-size:100dvw;border:none;background:rgba(0,0,0,0);padding:0;margin:0;overflow:clip}.dialog:not(:modal){z-index:10000;pointer-events:none}.dialog[open]{display:flex}.dialog::backdrop{background:none}.dialog::before{content:"";position:absolute;z-index:-1;inset:0;block-size:100dvh;inline-size:100dvw;pointer-events:none}:host([modeless]) .dialog:before{display:none}.container{position:absolute;inset-inline-start:var(--_container-drag-inline-start, var(--_container-inset-inline-start));inset-inline-end:var(--_container-inset-inline-end);inset-block-start:var(--_container-drag-block-start, var(--_container-inset-block-start));inset-block-end:var(--_container-inset-block-end);background-color:var(--_container-color);border-radius:var(--_container-shape);display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;min-block-size:var(--_container-min-block-size);max-block-size:var(--_container-max-block-size);min-inline-size:var(--_container-min-inline-size);max-inline-size:var(--_container-max-inline-size);padding-block-start:var(--_container-block-padding);padding-block-end:var(--_container-block-padding)}md-elevation{--md-elevation-level:var(--_container-elevation)}.container>*{box-sizing:border-box;padding-inline-start:var(--_container-inline-padding);padding-inline-end:var(--_container-inline-padding)}.header{display:flex;flex-direction:column;align-items:center;gap:var(--_header-spacing);-webkit-font-smoothing:antialiased;color:var(--_headline-color);font:var(--_headline-type)}.content{flex:1;overflow:auto;margin-block-start:var(--_content-block-start-spacing);margin-block-end:var(--_content-block-end-spacing);-webkit-font-smoothing:antialiased;color:var(--_supporting-text-color);font:var(--_supporting-text-type)}.footer{display:flex;position:relative;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;gap:var(--_action-spacing)}.footerHidden{--_content-block-end-spacing: 0px}.footerHidden .footer{display:none}.stacked .footer{flex-direction:column;align-items:flex-end}.scrollable .content{border-block-start:var(--_with-divider-divider-height) solid rgba(0,0,0,0);border-block-end:var(--_with-divider-divider-height) solid rgba(0,0,0,0)}.scroll-divider-header .content{border-block-start-color:var(--_with-divider-divider-color)}.scroll-divider-footer:not(.footerHidden) .content{border-block-end-color:var(--_with-divider-divider-color)}.dragging{user-select:none;cursor:move;touch-action:none}.container{will-change:transform,opacity;transition-property:transform;overflow:hidden}.container>*{transition-timing-function:inherit;transition-duration:inherit;transition-property:opacity,transform;will-change:transform,opacity;opacity:0}:host([transition][showing-open]) .container>*{opacity:1;transform:none}:host([transition][showing-open]) .container{opacity:1;transform:none}.dialog::before{transition:background-color linear;background-color:rgba(0,0,0,0)}:host([showing-open]) .dialog::before{background-color:var(--_scrim-color)}:host([opening]) .dialog::before{transition-duration:calc(var(--_opening-transition-duration)/2)}:host([closing]) .dialog::before{transition-duration:calc(var(--_closing-transition-duration)/2)}:host([opening]) .container{transition-duration:var(--_opening-transition-duration);transition-timing-function:var(--_opening-transition-easing)}:host([closing]) .container{transition-duration:var(--_closing-transition-duration);transition-timing-function:var(--_closing-transition-easing)}:host([trasition][closing]) .container>*{transform:none;opacity:0}:host([transition=grow-down]){--_opening-transform: scale(1, 0.1) translateY(-20%);--_closing-transform: scale(1, 0.9) translateY(-10%);--_origin: top;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-up]){--_opening-transform: scale(1, 0.1) translateY(20%);--_closing-transform: scale(1, 0.9) translateY(10%);--_origin: bottom;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-left]){--_opening-transform: scale(0.1, 1) translateX(20%);--_closing-transform: scale(0.9, 1) translateX(10%);--_origin: right;--_opening-content-transform: none;--_origin-footer: none}:host([transition=grow-right]){--_opening-transform: scale(0.1, 1) translateX(-20%);--_closing-transform: scale(0.9, 1) translateX(-10%);--_origin: left;--_opening-content-transform: none;--_origin-footer: none}:host([transition^=grow-]) .container{transform-origin:var(--_origin);transform:var(--_opening-transform)}:host([transition^=grow-]) .container>*{transform-origin:var(--_origin);transform:var(--_opening-content-transform)}:host([transition^=grow-]) .footer{transform-origin:var(--_origin-footer)}:host([transition^=grow-][closing]){transform:var(--_closing-transform)}:host([transition=shrink]) .container{transform:scale(1.2)}:host([transition=grow]) .container{transform:scale(0.8)}:host([transition=shrink][closing]) .container,:host([transition=grow][closing]) .container{transition-duration:0;transform:none}:host([showing-fullscreen]){--_container-max-block-size: none;--_container-max-inline-size: none}:host([showing-fullscreen]) .container{block-size:100dvh;inline-size:100dvw;border-radius:0px;padding-block-start:0;padding-block-end:0}:host([showing-fullscreen]) .header{justify-content:space-between;flex-direction:row;max-block-size:var(--_fullscreen-header-block-size);padding-block-start:var(--_fullscreen-container-block-padding);padding-inline:4px;--_header-spacing: 4px}:host([showing-fullscreen]) .content{margin-block-start:0;margin-block-end:0}:host([showing-fullscreen]) .footer{max-block-size:var(--_fullscreen-footer-block-size);padding-block-end:var(--_fullscreen-container-block-padding)}:host([showing-fullscreen]) .scroll-divider-footer .content{border-block-end-color:rgba(0,0,0,0)}@media screen and (forced-colors: active),(-ms-high-contrast: active){.container{outline:windowtext solid 2px}}[name=headline-prefix]::slotted(*),[name=headline-suffix]::slotted(*){color:var(--_icon-color);font-size:var(--_icon-size)}[name=header]::slotted(*){flex:1;align-self:stretch;display:flex;align-items:center}:host([showing-fullscreen]) [name=headline]::slotted(*){flex:1}/*# sourceMappingURL=dialog-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=dialog-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-styles.css.js","sourceRoot":"","sources":["dialog-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-dialog-container-elevation, 3);--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-type: var(--md-dialog-headline-type, var(--md-sys-typescale-headline-small, 400 1.5rem / 2rem var(--md-ref-typeface-brand, Roboto)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-dialog-supporting-text-type, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--
|
|
1
|
+
{"version":3,"file":"dialog-styles.css.js","sourceRoot":"","sources":["dialog-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-dialog-container-elevation, 3);--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-type: var(--md-dialog-headline-type, var(--md-sys-typescale-headline-small, 400 1.5rem / 2rem var(--md-ref-typeface-brand, Roboto)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-dialog-supporting-text-type, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-max-inline-size: var(--md-dialog-container-max-inline-size, min(560px, 100% - 48px));--_container-min-inline-size: var(--md-dialog-container-min-inline-size, 280px);--_container-max-block-size: var(--md-dialog-container-max-block-size, min(560px, 100% - 48px));--_container-min-block-size: var(--md-dialog-container-min-block-size, 140px);--_container-inset-inline-start: var(--md-dialog-container-inset-inline-start, auto);--_container-inset-inline-end: var(--md-dialog-container-inset-inline-end, auto);--_container-inset-block-start: var(--md-dialog-container-inset-block-start, auto);--_container-inset-block-end: var(--md-dialog-container-inset-block-end, auto);--_opening-transition-duration: var(--md-dialog-opening-transition-duration, 400ms);--_opening-transition-easing: var(--md-dialog-opening-transition-easing, cubic-bezier(0.05, 0.7, 0.1, 1));--_closing-transition-duration: var(--md-dialog-closing-transition-duration, 200ms);--_closing-transition-easing: var(--md-dialog-closing-transition-easing, cubic-bezier(0.3, 0, 0.8, 0.15));--_scrim-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.32));--_container-block-padding: var(--md-dialog-container-block-padding, 24px);--_container-inline-padding: var(--md-dialog-container-inline-padding, 24px);--_header-spacing: var(--md-dialog-header-spacing, 16px);--_action-spacing: var(--md-dialog-action-spacing, 8px);--_content-block-start-spacing: var(--md-dialog-content-block-start-spacing, 16px);--_content-block-end-spacing: var(--md-dialog-content-block-end-spacing, 24px);--_with-divider-divider-height: var(--md-dialog-with-divider-divider-height, 1px);--_with-divider-divider-color: var(--md-dialog-with-divider-divider-color, var(--md-sys-color-outline, #79747e));--_fullscreen-header-block-size: var(--md-dialog-fullscreen-header-block-size, 56px);--_fullscreen-footer-block-size: var(--md-dialog-fullscreen-footer-block-size, 56px);--_fullscreen-container-block-padding: var(--md-dialog-fullscreen-container-block-padding, 8px);--_container-drag-inline-start: initial;--_container-drag-block-start: initial}@media(prefers-reduced-motion: reduce){:host{--_opening-transition-duration: 0;--_closing-transition-duration: 0}}.dialog{position:fixed;align-items:center;justify-content:center;box-sizing:border-box;inset:0;block-size:100dvh;inline-size:100dvw;max-block-size:100dvh;max-inline-size:100dvw;border:none;background:rgba(0,0,0,0);padding:0;margin:0;overflow:clip}.dialog:not(:modal){z-index:10000;pointer-events:none}.dialog[open]{display:flex}.dialog::backdrop{background:none}.dialog::before{content:\"\";position:absolute;z-index:-1;inset:0;block-size:100dvh;inline-size:100dvw;pointer-events:none}:host([modeless]) .dialog:before{display:none}.container{position:absolute;inset-inline-start:var(--_container-drag-inline-start, var(--_container-inset-inline-start));inset-inline-end:var(--_container-inset-inline-end);inset-block-start:var(--_container-drag-block-start, var(--_container-inset-block-start));inset-block-end:var(--_container-inset-block-end);background-color:var(--_container-color);border-radius:var(--_container-shape);display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;min-block-size:var(--_container-min-block-size);max-block-size:var(--_container-max-block-size);min-inline-size:var(--_container-min-inline-size);max-inline-size:var(--_container-max-inline-size);padding-block-start:var(--_container-block-padding);padding-block-end:var(--_container-block-padding)}md-elevation{--md-elevation-level:var(--_container-elevation)}.container>*{box-sizing:border-box;padding-inline-start:var(--_container-inline-padding);padding-inline-end:var(--_container-inline-padding)}.header{display:flex;flex-direction:column;align-items:center;gap:var(--_header-spacing);-webkit-font-smoothing:antialiased;color:var(--_headline-color);font:var(--_headline-type)}.content{flex:1;overflow:auto;margin-block-start:var(--_content-block-start-spacing);margin-block-end:var(--_content-block-end-spacing);-webkit-font-smoothing:antialiased;color:var(--_supporting-text-color);font:var(--_supporting-text-type)}.footer{display:flex;position:relative;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;gap:var(--_action-spacing)}.footerHidden{--_content-block-end-spacing: 0px}.footerHidden .footer{display:none}.stacked .footer{flex-direction:column;align-items:flex-end}.scrollable .content{border-block-start:var(--_with-divider-divider-height) solid rgba(0,0,0,0);border-block-end:var(--_with-divider-divider-height) solid rgba(0,0,0,0)}.scroll-divider-header .content{border-block-start-color:var(--_with-divider-divider-color)}.scroll-divider-footer:not(.footerHidden) .content{border-block-end-color:var(--_with-divider-divider-color)}.dragging{user-select:none;cursor:move;touch-action:none}.container{will-change:transform,opacity;transition-property:transform;overflow:hidden}.container>*{transition-timing-function:inherit;transition-duration:inherit;transition-property:opacity,transform;will-change:transform,opacity;opacity:0}:host([transition][showing-open]) .container>*{opacity:1;transform:none}:host([transition][showing-open]) .container{opacity:1;transform:none}.dialog::before{transition:background-color linear;background-color:rgba(0,0,0,0)}:host([showing-open]) .dialog::before{background-color:var(--_scrim-color)}:host([opening]) .dialog::before{transition-duration:calc(var(--_opening-transition-duration)/2)}:host([closing]) .dialog::before{transition-duration:calc(var(--_closing-transition-duration)/2)}:host([opening]) .container{transition-duration:var(--_opening-transition-duration);transition-timing-function:var(--_opening-transition-easing)}:host([closing]) .container{transition-duration:var(--_closing-transition-duration);transition-timing-function:var(--_closing-transition-easing)}:host([trasition][closing]) .container>*{transform:none;opacity:0}:host([transition=grow-down]){--_opening-transform: scale(1, 0.1) translateY(-20%);--_closing-transform: scale(1, 0.9) translateY(-10%);--_origin: top;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-up]){--_opening-transform: scale(1, 0.1) translateY(20%);--_closing-transform: scale(1, 0.9) translateY(10%);--_origin: bottom;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-left]){--_opening-transform: scale(0.1, 1) translateX(20%);--_closing-transform: scale(0.9, 1) translateX(10%);--_origin: right;--_opening-content-transform: none;--_origin-footer: none}:host([transition=grow-right]){--_opening-transform: scale(0.1, 1) translateX(-20%);--_closing-transform: scale(0.9, 1) translateX(-10%);--_origin: left;--_opening-content-transform: none;--_origin-footer: none}:host([transition^=grow-]) .container{transform-origin:var(--_origin);transform:var(--_opening-transform)}:host([transition^=grow-]) .container>*{transform-origin:var(--_origin);transform:var(--_opening-content-transform)}:host([transition^=grow-]) .footer{transform-origin:var(--_origin-footer)}:host([transition^=grow-][closing]){transform:var(--_closing-transform)}:host([transition=shrink]) .container{transform:scale(1.2)}:host([transition=grow]) .container{transform:scale(0.8)}:host([transition=shrink][closing]) .container,:host([transition=grow][closing]) .container{transition-duration:0;transform:none}:host([showing-fullscreen]){--_container-max-block-size: none;--_container-max-inline-size: none}:host([showing-fullscreen]) .container{block-size:100dvh;inline-size:100dvw;border-radius:0px;padding-block-start:0;padding-block-end:0}:host([showing-fullscreen]) .header{justify-content:space-between;flex-direction:row;max-block-size:var(--_fullscreen-header-block-size);padding-block-start:var(--_fullscreen-container-block-padding);padding-inline:4px;--_header-spacing: 4px}:host([showing-fullscreen]) .content{margin-block-start:0;margin-block-end:0}:host([showing-fullscreen]) .footer{max-block-size:var(--_fullscreen-footer-block-size);padding-block-end:var(--_fullscreen-container-block-padding)}:host([showing-fullscreen]) .scroll-divider-footer .content{border-block-end-color:rgba(0,0,0,0)}@media screen and (forced-colors: active),(-ms-high-contrast: active){.container{outline:windowtext solid 2px}}[name=headline-prefix]::slotted(*),[name=headline-suffix]::slotted(*){color:var(--_icon-color);font-size:var(--_icon-size)}[name=header]::slotted(*){flex:1;align-self:stretch;display:flex;align-items:center}:host([showing-fullscreen]) [name=headline]::slotted(*){flex:1}/*# sourceMappingURL=dialog-styles.css.map */\n`;\n "]}
|
package/dialog/lib/dialog.d.ts
CHANGED
|
@@ -11,6 +11,12 @@ import { LitElement, PropertyValues } from 'lit';
|
|
|
11
11
|
export declare const CLOSE_ACTION = "close";
|
|
12
12
|
/**
|
|
13
13
|
* A dialog component.
|
|
14
|
+
*
|
|
15
|
+
* @fires opening Dispatched when the dialog is opening before any animations.
|
|
16
|
+
* @fires opened Dispatched when the dialog has opened after any animations.
|
|
17
|
+
* @fires closing Dispatched when the dialog is closing before any animations.
|
|
18
|
+
* @fires closed Dispatched when the dialog has closed after any animations.
|
|
19
|
+
* @fires cancel The native HTMLDialogElement cancel event.
|
|
14
20
|
*/
|
|
15
21
|
export declare class Dialog extends LitElement {
|
|
16
22
|
private static preventedScrollingCount;
|
|
@@ -73,11 +79,11 @@ export declare class Dialog extends LitElement {
|
|
|
73
79
|
* the dialog. If an element has an action attribute set, clicking it will
|
|
74
80
|
* close the dialog and the `closing` and `closed` events dispatched will
|
|
75
81
|
* have their action property set the value of this attribute on the
|
|
76
|
-
* clicked element.The default
|
|
82
|
+
* clicked element.The default value is `dialog-action`. For example,
|
|
77
83
|
*
|
|
78
84
|
* <md-dialog>
|
|
79
85
|
* Content
|
|
80
|
-
* <md-filled-button slot="footer"
|
|
86
|
+
* <md-filled-button slot="footer" dialog-action="buy">
|
|
81
87
|
* Buy
|
|
82
88
|
* </md-filled-button>
|
|
83
89
|
* </md-dialog>
|
|
@@ -91,7 +97,7 @@ export declare class Dialog extends LitElement {
|
|
|
91
97
|
* <md-dialog>
|
|
92
98
|
* <md-filled-text-field
|
|
93
99
|
* label="Enter some text"
|
|
94
|
-
*
|
|
100
|
+
* dialog-focus
|
|
95
101
|
* >
|
|
96
102
|
* </md-filled-text-field>
|
|
97
103
|
* </md-dialog>
|
package/dialog/lib/dialog.js
CHANGED
|
@@ -8,6 +8,7 @@ import '../../elevation/elevation.js';
|
|
|
8
8
|
import { html, LitElement } from 'lit';
|
|
9
9
|
import { property, query, state } from 'lit/decorators.js';
|
|
10
10
|
import { classMap } from 'lit/directives/class-map.js';
|
|
11
|
+
import { redispatchEvent } from '../../internal/controller/events.js';
|
|
11
12
|
import { createThrottle, msFromTimeCSSValue } from '../../internal/motion/animation.js';
|
|
12
13
|
// This is required for decorators.
|
|
13
14
|
// tslint:disable:no-new-decorators
|
|
@@ -19,6 +20,12 @@ const OPENING_TRANSITION_PROP = '--_opening-transition-duration';
|
|
|
19
20
|
const CLOSING_TRANSITION_PROP = '--_closing-transition-duration';
|
|
20
21
|
/**
|
|
21
22
|
* A dialog component.
|
|
23
|
+
*
|
|
24
|
+
* @fires opening Dispatched when the dialog is opening before any animations.
|
|
25
|
+
* @fires opened Dispatched when the dialog has opened after any animations.
|
|
26
|
+
* @fires closing Dispatched when the dialog is closing before any animations.
|
|
27
|
+
* @fires closed Dispatched when the dialog has closed after any animations.
|
|
28
|
+
* @fires cancel The native HTMLDialogElement cancel event.
|
|
22
29
|
*/
|
|
23
30
|
export class Dialog extends LitElement {
|
|
24
31
|
constructor() {
|
|
@@ -80,16 +87,16 @@ export class Dialog extends LitElement {
|
|
|
80
87
|
* the dialog. If an element has an action attribute set, clicking it will
|
|
81
88
|
* close the dialog and the `closing` and `closed` events dispatched will
|
|
82
89
|
* have their action property set the value of this attribute on the
|
|
83
|
-
* clicked element.The default
|
|
90
|
+
* clicked element.The default value is `dialog-action`. For example,
|
|
84
91
|
*
|
|
85
92
|
* <md-dialog>
|
|
86
93
|
* Content
|
|
87
|
-
* <md-filled-button slot="footer"
|
|
94
|
+
* <md-filled-button slot="footer" dialog-action="buy">
|
|
88
95
|
* Buy
|
|
89
96
|
* </md-filled-button>
|
|
90
97
|
* </md-dialog>
|
|
91
98
|
*/
|
|
92
|
-
this.actionAttribute = '
|
|
99
|
+
this.actionAttribute = 'dialog-action';
|
|
93
100
|
/**
|
|
94
101
|
* When the dialog is opened, it will focus the first element which has
|
|
95
102
|
* an attribute name matching this property. The default value is
|
|
@@ -98,12 +105,12 @@ export class Dialog extends LitElement {
|
|
|
98
105
|
* <md-dialog>
|
|
99
106
|
* <md-filled-text-field
|
|
100
107
|
* label="Enter some text"
|
|
101
|
-
*
|
|
108
|
+
* dialog-focus
|
|
102
109
|
* >
|
|
103
110
|
* </md-filled-text-field>
|
|
104
111
|
* </md-dialog>
|
|
105
112
|
*/
|
|
106
|
-
this.focusAttribute = '
|
|
113
|
+
this.focusAttribute = 'dialog-focus';
|
|
107
114
|
/**
|
|
108
115
|
* Clicking on the scrim surrounding the dialog closes the dialog.
|
|
109
116
|
* The `closing` and `closed` events this produces have an `action` property
|
|
@@ -320,6 +327,10 @@ export class Dialog extends LitElement {
|
|
|
320
327
|
async performTransition(shouldDispatchAction) {
|
|
321
328
|
// TODO: pause here only to avoid a double update warning.
|
|
322
329
|
await this.updateComplete;
|
|
330
|
+
// Focus initial element.
|
|
331
|
+
if (this.open) {
|
|
332
|
+
this.focus();
|
|
333
|
+
}
|
|
323
334
|
this.showingOpen = this.open;
|
|
324
335
|
if (shouldDispatchAction) {
|
|
325
336
|
this.dispatchActionEvent(this.open ? 'opening' : 'closing');
|
|
@@ -355,10 +366,6 @@ export class Dialog extends LitElement {
|
|
|
355
366
|
Dialog.setDocumentScrollingDisabled(this.open);
|
|
356
367
|
}
|
|
357
368
|
}
|
|
358
|
-
// Focus initial element.
|
|
359
|
-
if (this.open) {
|
|
360
|
-
this.focus();
|
|
361
|
-
}
|
|
362
369
|
if (shouldDispatchAction) {
|
|
363
370
|
this.dispatchActionEvent(this.open ? 'opened' : 'closed');
|
|
364
371
|
}
|
|
@@ -402,6 +409,7 @@ export class Dialog extends LitElement {
|
|
|
402
409
|
this.open = false;
|
|
403
410
|
this.opening = false;
|
|
404
411
|
this.closing = false;
|
|
412
|
+
redispatchEvent(this, e);
|
|
405
413
|
}
|
|
406
414
|
handleDialogClick(e) {
|
|
407
415
|
if (!this.open) {
|
|
@@ -485,28 +493,28 @@ __decorate([
|
|
|
485
493
|
property({ type: Boolean })
|
|
486
494
|
], Dialog.prototype, "fullscreen", void 0);
|
|
487
495
|
__decorate([
|
|
488
|
-
property()
|
|
496
|
+
property({ attribute: 'fullscreen-breakpoint' })
|
|
489
497
|
], Dialog.prototype, "fullscreenBreakpoint", void 0);
|
|
490
498
|
__decorate([
|
|
491
|
-
property({ type: Boolean })
|
|
499
|
+
property({ type: Boolean, attribute: 'footer-hidden' })
|
|
492
500
|
], Dialog.prototype, "footerHidden", void 0);
|
|
493
501
|
__decorate([
|
|
494
502
|
property({ type: Boolean })
|
|
495
503
|
], Dialog.prototype, "stacked", void 0);
|
|
496
504
|
__decorate([
|
|
497
|
-
property()
|
|
505
|
+
property({ attribute: 'default-action' })
|
|
498
506
|
], Dialog.prototype, "defaultAction", void 0);
|
|
499
507
|
__decorate([
|
|
500
|
-
property()
|
|
508
|
+
property({ attribute: 'action-attribute' })
|
|
501
509
|
], Dialog.prototype, "actionAttribute", void 0);
|
|
502
510
|
__decorate([
|
|
503
|
-
property()
|
|
511
|
+
property({ attribute: 'focus-attribute' })
|
|
504
512
|
], Dialog.prototype, "focusAttribute", void 0);
|
|
505
513
|
__decorate([
|
|
506
|
-
property()
|
|
514
|
+
property({ attribute: 'scrim-click-action' })
|
|
507
515
|
], Dialog.prototype, "scrimClickAction", void 0);
|
|
508
516
|
__decorate([
|
|
509
|
-
property()
|
|
517
|
+
property({ attribute: 'escape-key-action' })
|
|
510
518
|
], Dialog.prototype, "escapeKeyAction", void 0);
|
|
511
519
|
__decorate([
|
|
512
520
|
property({ type: Boolean, reflect: true })
|