@material/web 1.0.0-pre.6 → 1.0.0-pre.8
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 +8 -8
- package/aria/aria.d.ts +43 -0
- package/aria/aria.js +80 -0
- package/aria/aria.js.map +1 -0
- package/aria/delegate.d.ts +37 -0
- package/aria/delegate.js +53 -0
- package/aria/delegate.js.map +1 -0
- package/badge/badge.d.ts +0 -1
- package/badge/badge.js +0 -1
- package/badge/badge.js.map +1 -1
- package/badge/lib/badge.d.ts +5 -7
- package/badge/lib/badge.js +9 -12
- package/badge/lib/badge.js.map +1 -1
- package/button/lib/_elevated-button.scss +35 -6
- package/button/lib/_elevation.scss +13 -3
- package/button/lib/_filled-button.scss +35 -3
- package/button/lib/_outlined-button.scss +35 -6
- package/button/lib/_shared.scss +4 -2
- package/button/lib/_text-button.scss +35 -6
- package/button/lib/_tonal-button.scss +34 -7
- package/button/lib/button.d.ts +24 -38
- package/button/lib/button.js +40 -89
- package/button/lib/button.js.map +1 -1
- package/button/lib/elevated-button.d.ts +6 -4
- package/button/lib/elevated-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-button.d.ts +6 -4
- package/button/lib/filled-button.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-button.d.ts +6 -4
- package/button/lib/outlined-button.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-elevation-styles.css.js +1 -1
- package/button/lib/shared-elevation-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-button.d.ts +5 -2
- package/button/lib/text-button.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-button.d.ts +6 -4
- package/button/lib/tonal-button.js.map +1 -1
- package/button/lib/tonal-styles.css.js +1 -1
- package/button/lib/tonal-styles.css.js.map +1 -1
- package/checkbox/lib/_checkbox.scss +48 -47
- package/checkbox/lib/checkbox-styles.css.js +1 -1
- package/checkbox/lib/checkbox-styles.css.js.map +1 -1
- package/checkbox/lib/checkbox.d.ts +2 -7
- package/checkbox/lib/checkbox.js +35 -62
- package/checkbox/lib/checkbox.js.map +1 -1
- package/checkbox/lib/forced-colors-styles.css.js +1 -1
- package/checkbox/lib/forced-colors-styles.css.js.map +1 -1
- package/chips/_filter-chip.scss +6 -0
- package/chips/assist-chip.js +2 -1
- package/chips/assist-chip.js.map +1 -1
- package/chips/filter-chip.d.ts +20 -0
- package/chips/filter-chip.js +25 -0
- package/chips/filter-chip.js.map +1 -0
- package/chips/lib/_assist-chip.scss +37 -3
- package/chips/lib/_elevated.scss +60 -0
- package/chips/lib/_filter-chip.scss +175 -0
- package/chips/lib/_shared.scss +48 -84
- package/chips/lib/_suggestion-chip.scss +36 -5
- package/chips/lib/assist-chip.d.ts +12 -0
- package/chips/lib/assist-chip.js +64 -0
- package/chips/lib/assist-chip.js.map +1 -1
- package/chips/lib/assist-styles.css.js +1 -1
- package/chips/lib/assist-styles.css.js.map +1 -1
- package/chips/lib/chip.d.ts +24 -16
- package/chips/lib/chip.js +53 -74
- package/chips/lib/chip.js.map +1 -1
- package/chips/lib/elevated-styles.css.js +9 -0
- package/chips/lib/elevated-styles.css.js.map +1 -0
- package/{fab/lib/fab-extended-styles.scss → chips/lib/elevated-styles.scss} +3 -3
- package/chips/lib/filter-chip.d.ts +26 -0
- package/chips/lib/filter-chip.js +80 -0
- package/chips/lib/filter-chip.js.map +1 -0
- package/chips/lib/filter-styles.css.js +9 -0
- package/chips/lib/filter-styles.css.js.map +1 -0
- package/chips/lib/filter-styles.scss +10 -0
- package/chips/lib/shared-styles.css.js +1 -1
- package/chips/lib/shared-styles.css.js.map +1 -1
- package/chips/lib/suggestion-chip.d.ts +2 -2
- package/chips/lib/suggestion-chip.js +4 -2
- package/chips/lib/suggestion-chip.js.map +1 -1
- package/chips/lib/suggestion-styles.css.js +1 -1
- package/chips/lib/suggestion-styles.css.js.map +1 -1
- package/chips/suggestion-chip.js +2 -1
- package/chips/suggestion-chip.js.map +1 -1
- package/circularprogress/harness.d.ts +1 -0
- package/circularprogress/harness.js +4 -0
- package/circularprogress/harness.js.map +1 -1
- package/circularprogress/lib/_circular-progress.scss +13 -7
- package/circularprogress/lib/circular-progress-styles.css.js +1 -1
- package/circularprogress/lib/circular-progress-styles.css.js.map +1 -1
- package/circularprogress/lib/circular-progress.d.ts +5 -7
- package/circularprogress/lib/circular-progress.js +17 -21
- package/circularprogress/lib/circular-progress.js.map +1 -1
- package/dialog/lib/_dialog.scss +8 -9
- package/dialog/lib/_tokens.scss +0 -1
- 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 +10 -10
- package/dialog/lib/dialog.js +33 -56
- package/dialog/lib/dialog.js.map +1 -1
- package/divider/lib/divider.js +4 -7
- package/divider/lib/divider.js.map +1 -1
- package/elevation/lib/_elevation.scss +5 -7
- package/elevation/lib/elevation-styles.css.js +1 -1
- package/elevation/lib/elevation-styles.css.js.map +1 -1
- package/elevation/lib/elevation.d.ts +1 -1
- package/elevation/lib/elevation.js.map +1 -1
- package/fab/_fab.scss +1 -0
- package/fab/branded-fab.d.ts +56 -0
- package/fab/branded-fab.js +56 -0
- package/fab/branded-fab.js.map +1 -0
- package/fab/fab.d.ts +25 -5
- package/fab/fab.js +27 -10
- package/fab/fab.js.map +1 -1
- package/fab/harness.d.ts +1 -2
- package/fab/harness.js +1 -1
- package/fab/harness.js.map +1 -1
- package/fab/lib/_fab-branded.scss +81 -0
- package/fab/lib/_fab.scss +221 -19
- package/fab/lib/_shared.scss +161 -131
- package/fab/lib/fab-branded-styles.css.d.ts +1 -0
- package/fab/lib/fab-branded-styles.css.js +9 -0
- package/fab/lib/fab-branded-styles.css.js.map +1 -0
- package/fab/lib/fab-branded-styles.scss +10 -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 +18 -10
- package/fab/lib/fab.js +19 -12
- package/fab/lib/fab.js.map +1 -1
- package/fab/lib/forced-colors-styles.css.d.ts +1 -0
- package/fab/lib/forced-colors-styles.css.js +9 -0
- package/fab/lib/forced-colors-styles.css.js.map +1 -0
- package/fab/lib/forced-colors-styles.scss +26 -0
- package/fab/lib/shared-styles.css.d.ts +1 -0
- package/fab/lib/shared-styles.css.js +9 -0
- package/fab/lib/shared-styles.css.js.map +1 -0
- package/fab/lib/{fab-shared-styles.scss → shared-styles.scss} +1 -1
- package/fab/lib/shared.d.ts +49 -0
- package/fab/lib/shared.js +113 -0
- package/fab/lib/shared.js.map +1 -0
- package/field/lib/_filled-field.scss +47 -12
- package/field/lib/_outlined-field.scss +39 -12
- package/field/lib/field.js +14 -27
- package/field/lib/field.js.map +1 -1
- package/field/lib/filled-styles.css.js +1 -1
- package/field/lib/filled-styles.css.js.map +1 -1
- package/field/lib/outlined-styles.css.js +1 -1
- package/field/lib/outlined-styles.css.js.map +1 -1
- package/focus/focus-ring.d.ts +2 -1
- package/focus/focus-ring.js +2 -1
- package/focus/focus-ring.js.map +1 -1
- package/focus/lib/_focus-ring.scss +49 -34
- package/focus/lib/focus-ring-styles.css.js +1 -1
- package/focus/lib/focus-ring-styles.css.js.map +1 -1
- package/focus/lib/focus-ring.d.ts +59 -12
- package/focus/lib/focus-ring.js +118 -14
- package/focus/lib/focus-ring.js.map +1 -1
- package/icon/icon.d.ts +0 -1
- package/icon/icon.js +0 -1
- package/icon/icon.js.map +1 -1
- package/icon/lib/_icon.scss +2 -0
- package/icon/lib/icon-styles.css.js +1 -1
- package/icon/lib/icon-styles.css.js.map +1 -1
- package/icon/lib/icon.d.ts +5 -4
- package/icon/lib/icon.js +3 -2
- package/icon/lib/icon.js.map +1 -1
- package/iconbutton/filled-icon-button.d.ts +6 -2
- package/iconbutton/filled-icon-button.js.map +1 -1
- package/iconbutton/filled-tonal-icon-button.d.ts +6 -2
- package/iconbutton/filled-tonal-icon-button.js.map +1 -1
- package/iconbutton/harness.d.ts +1 -1
- package/iconbutton/harness.js +4 -1
- package/iconbutton/harness.js.map +1 -1
- package/iconbutton/lib/_filled-icon-button.scss +38 -13
- package/iconbutton/lib/_filled-tonal-icon-button.scss +38 -11
- package/iconbutton/lib/_outlined-icon-button.scss +38 -13
- package/iconbutton/lib/_shared.scss +4 -6
- package/iconbutton/lib/_standard-icon-button.scss +14 -14
- package/iconbutton/lib/filled-styles.css.js +1 -1
- package/iconbutton/lib/filled-styles.css.js.map +1 -1
- package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
- package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
- package/iconbutton/lib/icon-button.d.ts +17 -25
- package/iconbutton/lib/icon-button.js +37 -73
- package/iconbutton/lib/icon-button.js.map +1 -1
- package/iconbutton/lib/outlined-styles.css.js +1 -1
- package/iconbutton/lib/outlined-styles.css.js.map +1 -1
- package/iconbutton/lib/shared-styles.css.js +1 -1
- package/iconbutton/lib/shared-styles.css.js.map +1 -1
- package/iconbutton/lib/standard-styles.css.js +1 -1
- package/iconbutton/lib/standard-styles.css.js.map +1 -1
- package/iconbutton/outlined-icon-button.d.ts +5 -2
- package/iconbutton/outlined-icon-button.js.map +1 -1
- package/iconbutton/standard-icon-button.d.ts +5 -2
- package/iconbutton/standard-icon-button.js.map +1 -1
- package/linearprogress/_linear-progress.scss +6 -0
- package/linearprogress/harness.d.ts +13 -0
- package/linearprogress/harness.js +18 -0
- package/linearprogress/harness.js.map +1 -0
- package/linearprogress/lib/_linear-progress.scss +386 -0
- package/linearprogress/lib/linear-progress-styles.css.d.ts +1 -0
- package/linearprogress/lib/linear-progress-styles.css.js +9 -0
- package/linearprogress/lib/linear-progress-styles.css.js.map +1 -0
- package/linearprogress/lib/linear-progress-styles.scss +8 -0
- package/linearprogress/lib/linear-progress.d.ts +35 -0
- package/linearprogress/lib/linear-progress.js +127 -0
- package/linearprogress/lib/linear-progress.js.map +1 -0
- package/linearprogress/linear-progress.d.ts +23 -0
- package/linearprogress/linear-progress.js +26 -0
- package/linearprogress/linear-progress.js.map +1 -0
- package/list/lib/_list.scss +9 -50
- package/list/lib/list-styles.css.js +1 -1
- package/list/lib/list-styles.css.js.map +1 -1
- package/list/lib/list.d.ts +8 -15
- package/list/lib/list.js +20 -45
- package/list/lib/list.js.map +1 -1
- package/list/lib/listitem/_list-item.scss +17 -72
- package/list/lib/listitem/forced-colors-styles.css.js +1 -1
- package/list/lib/listitem/forced-colors-styles.css.js.map +1 -1
- package/list/lib/listitem/list-item-styles.css.js +1 -1
- package/list/lib/listitem/list-item-styles.css.js.map +1 -1
- package/list/lib/listitem/list-item.d.ts +29 -31
- package/list/lib/listitem/list-item.js +26 -80
- package/list/lib/listitem/list-item.js.map +1 -1
- package/list/lib/listitemlink/list-item-link.js +5 -9
- package/list/lib/listitemlink/list-item-link.js.map +1 -1
- package/menu/lib/_menu.scss +9 -29
- package/menu/lib/menu-styles.css.js +1 -1
- package/menu/lib/menu-styles.css.js.map +1 -1
- package/menu/lib/menu.d.ts +32 -41
- package/menu/lib/menu.js +51 -82
- package/menu/lib/menu.js.map +1 -1
- package/menu/lib/menuitem/_menu-item.scss +16 -33
- package/menu/lib/menuitem/menu-item-styles.css.js +1 -1
- package/menu/lib/menuitem/menu-item-styles.css.js.map +1 -1
- package/menu/lib/menuitem/menu-item.d.ts +1 -1
- package/menu/lib/menuitem/menu-item.js +4 -6
- package/menu/lib/menuitem/menu-item.js.map +1 -1
- package/menu/lib/menuitemlink/menu-item-link.d.ts +0 -2
- package/menu/lib/menuitemlink/menu-item-link.js +3 -6
- package/menu/lib/menuitemlink/menu-item-link.js.map +1 -1
- package/menu/lib/shared.d.ts +20 -2
- package/menu/lib/shared.js +18 -0
- package/menu/lib/shared.js.map +1 -1
- package/menu/lib/submenuitem/sub-menu-item.d.ts +16 -13
- package/menu/lib/submenuitem/sub-menu-item.js +27 -18
- package/menu/lib/submenuitem/sub-menu-item.js.map +1 -1
- package/menu/lib/typeaheadController.d.ts +9 -9
- package/menu/lib/typeaheadController.js.map +1 -1
- package/navigationbar/lib/_navigation-bar.scss +7 -1
- package/navigationbar/lib/navigation-bar-styles.css.js +1 -1
- package/navigationbar/lib/navigation-bar-styles.css.js.map +1 -1
- package/navigationbar/lib/navigation-bar.d.ts +6 -6
- package/navigationbar/lib/navigation-bar.js +17 -18
- package/navigationbar/lib/navigation-bar.js.map +1 -1
- package/navigationbar/navigation-bar.d.ts +0 -1
- package/navigationbar/navigation-bar.js +0 -1
- package/navigationbar/navigation-bar.js.map +1 -1
- package/navigationdrawer/lib/_navigation-drawer-modal.scss +0 -3
- package/navigationdrawer/lib/_navigation-drawer.scss +0 -3
- package/navigationdrawer/lib/_shared.scss +1 -4
- package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js +1 -1
- package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer-modal.d.ts +7 -12
- package/navigationdrawer/lib/navigation-drawer-modal.js +19 -41
- package/navigationdrawer/lib/navigation-drawer-modal.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
- package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer.d.ts +6 -10
- package/navigationdrawer/lib/navigation-drawer.js +17 -38
- package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
- package/navigationdrawer/lib/shared-styles.css.js +1 -1
- package/navigationdrawer/lib/shared-styles.css.js.map +1 -1
- package/navigationdrawer/navigation-drawer-modal.d.ts +0 -1
- package/navigationdrawer/navigation-drawer-modal.js +0 -1
- package/navigationdrawer/navigation-drawer-modal.js.map +1 -1
- package/navigationdrawer/navigation-drawer.d.ts +0 -1
- package/navigationdrawer/navigation-drawer.js +0 -1
- package/navigationdrawer/navigation-drawer.js.map +1 -1
- package/navigationtab/lib/_navigation-tab.scss +2 -2
- package/navigationtab/lib/navigation-tab-styles.css.js +1 -1
- package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
- package/navigationtab/lib/navigation-tab.d.ts +16 -29
- package/navigationtab/lib/navigation-tab.js +49 -88
- package/navigationtab/lib/navigation-tab.js.map +1 -1
- package/navigationtab/lib/state.d.ts +1 -1
- package/navigationtab/lib/state.js.map +1 -1
- package/navigationtab/navigation-tab.d.ts +0 -1
- package/navigationtab/navigation-tab.js +0 -1
- package/navigationtab/navigation-tab.js.map +1 -1
- package/package.json +1 -1
- package/radio/lib/_radio.scss +1 -1
- package/radio/lib/radio-styles.css.js +1 -1
- package/radio/lib/radio-styles.css.js.map +1 -1
- package/radio/lib/radio.d.ts +2 -8
- package/radio/lib/radio.js +31 -58
- package/radio/lib/radio.js.map +1 -1
- package/ripple/lib/ripple.js +11 -13
- package/ripple/lib/ripple.js.map +1 -1
- package/segmentedbutton/lib/outlined-segmented-button.d.ts +16 -7
- package/segmentedbutton/lib/outlined-segmented-button.js +3 -3
- package/segmentedbutton/lib/outlined-segmented-button.js.map +1 -1
- package/segmentedbutton/lib/segmented-button.d.ts +28 -40
- package/segmentedbutton/lib/segmented-button.js +42 -96
- package/segmentedbutton/lib/segmented-button.js.map +1 -1
- package/segmentedbutton/outlined-segmented-button.d.ts +0 -1
- package/segmentedbutton/outlined-segmented-button.js +0 -1
- package/segmentedbutton/outlined-segmented-button.js.map +1 -1
- package/segmentedbuttonset/lib/_outlined-segmented-button-set.scss +32 -13
- package/segmentedbuttonset/lib/outlined-segmented-button-set.d.ts +6 -4
- package/segmentedbuttonset/lib/outlined-segmented-button-set.js +3 -2
- package/segmentedbuttonset/lib/outlined-segmented-button-set.js.map +1 -1
- package/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
- package/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
- package/segmentedbuttonset/lib/segmented-button-set.d.ts +3 -9
- package/segmentedbuttonset/lib/segmented-button-set.js +14 -20
- package/segmentedbuttonset/lib/segmented-button-set.js.map +1 -1
- package/segmentedbuttonset/outlined-segmented-button-set.d.ts +0 -1
- package/segmentedbuttonset/outlined-segmented-button-set.js +0 -1
- package/segmentedbuttonset/outlined-segmented-button-set.js.map +1 -1
- package/select/_filled-select.scss +6 -0
- package/select/_outlined-select.scss +6 -0
- package/select/filled-select.d.ts +41 -0
- package/select/filled-select.js +46 -0
- package/select/filled-select.js.map +1 -0
- package/select/harness.d.ts +24 -0
- package/select/harness.js +53 -0
- package/select/harness.js.map +1 -0
- package/select/lib/_filled-select.scss +222 -0
- package/select/lib/_outlined-select.scss +180 -0
- package/select/lib/_shared.scss +48 -0
- package/select/lib/filled-forced-colors-styles.css.d.ts +1 -0
- package/select/lib/filled-forced-colors-styles.css.js +9 -0
- package/select/lib/filled-forced-colors-styles.css.js.map +1 -0
- package/select/lib/filled-forced-colors-styles.scss +29 -0
- package/select/lib/filled-select-styles.css.d.ts +1 -0
- package/select/lib/filled-select-styles.css.js +9 -0
- package/select/lib/filled-select-styles.css.js.map +1 -0
- package/select/lib/filled-select-styles.scss +10 -0
- package/select/lib/filled-select.d.ts +10 -0
- package/select/lib/filled-select.js +16 -0
- package/select/lib/filled-select.js.map +1 -0
- package/select/lib/outlined-forced-colors-styles.css.d.ts +1 -0
- package/select/lib/outlined-forced-colors-styles.css.js +9 -0
- package/select/lib/outlined-forced-colors-styles.css.js.map +1 -0
- package/select/lib/outlined-forced-colors-styles.scss +29 -0
- package/select/lib/outlined-select-styles.css.d.ts +1 -0
- package/select/lib/outlined-select-styles.css.js +9 -0
- package/select/lib/outlined-select-styles.css.js.map +1 -0
- package/select/lib/outlined-select-styles.scss +10 -0
- package/select/lib/outlined-select.d.ts +10 -0
- package/select/lib/outlined-select.js +16 -0
- package/select/lib/outlined-select.js.map +1 -0
- package/select/lib/select.d.ts +216 -0
- package/select/lib/select.js +589 -0
- package/select/lib/select.js.map +1 -0
- package/select/lib/selectoption/harness.d.ts +11 -0
- package/select/lib/selectoption/harness.js +12 -0
- package/select/lib/selectoption/harness.js.map +1 -0
- package/select/lib/selectoption/select-option.d.ts +30 -0
- package/select/lib/selectoption/select-option.js +71 -0
- package/select/lib/selectoption/select-option.js.map +1 -0
- package/select/lib/shared-styles.css.d.ts +1 -0
- package/select/lib/shared-styles.css.js +9 -0
- package/select/lib/shared-styles.css.js.map +1 -0
- package/select/lib/shared-styles.scss +10 -0
- package/select/lib/shared.d.ts +52 -0
- package/select/lib/shared.js +41 -0
- package/select/lib/shared.js.map +1 -0
- package/select/outlined-select.d.ts +41 -0
- package/select/outlined-select.js +46 -0
- package/select/outlined-select.js.map +1 -0
- package/select/select-option.d.ts +44 -0
- package/select/select-option.js +51 -0
- package/select/select-option.js.map +1 -0
- package/slider/harness.d.ts +2 -1
- package/slider/harness.js +14 -9
- package/slider/harness.js.map +1 -1
- package/slider/lib/_slider.scss +149 -167
- package/slider/lib/forced-colors-styles.css.js +1 -1
- package/slider/lib/forced-colors-styles.css.js.map +1 -1
- package/slider/lib/forced-colors-styles.scss +2 -2
- package/slider/lib/slider-styles.css.js +1 -1
- package/slider/lib/slider-styles.css.js.map +1 -1
- package/slider/lib/slider.d.ts +23 -57
- package/slider/lib/slider.js +77 -167
- package/slider/lib/slider.js.map +1 -1
- package/switch/lib/_switch.scss +63 -18
- package/switch/lib/switch-styles.css.js +1 -1
- package/switch/lib/switch-styles.css.js.map +1 -1
- package/switch/lib/switch.d.ts +0 -7
- package/switch/lib/switch.js +32 -79
- package/switch/lib/switch.js.map +1 -1
- package/textfield/harness.d.ts +1 -1
- package/textfield/harness.js.map +1 -1
- package/textfield/lib/_filled-text-field.scss +70 -14
- package/textfield/lib/_outlined-text-field.scss +60 -35
- package/textfield/lib/filled-forced-colors-styles.css.js +1 -1
- package/textfield/lib/filled-forced-colors-styles.css.js.map +1 -1
- package/textfield/lib/filled-styles.css.js +1 -1
- package/textfield/lib/filled-styles.css.js.map +1 -1
- package/textfield/lib/outlined-forced-colors-styles.css.js +1 -1
- package/textfield/lib/outlined-forced-colors-styles.css.js.map +1 -1
- package/textfield/lib/outlined-styles.css.js +1 -1
- package/textfield/lib/outlined-styles.css.js.map +1 -1
- package/textfield/lib/text-field.d.ts +1 -11
- package/textfield/lib/text-field.js +45 -115
- package/textfield/lib/text-field.js.map +1 -1
- package/tokens/_index.scss +5 -18
- package/tokens/_md-comp-assist-chip.scss +25 -29
- package/tokens/_md-comp-checkbox.scss +78 -1
- package/tokens/_md-comp-circular-progress-indicator.scss +39 -13
- package/tokens/_md-comp-elevated-button.scss +0 -10
- package/tokens/_md-comp-elevation.scss +0 -4
- package/tokens/_md-comp-fab-branded.scss +84 -1
- package/tokens/_md-comp-fab.scss +249 -0
- package/tokens/_md-comp-filled-button.scss +0 -10
- package/{field/lib → tokens}/_md-comp-filled-field.scss +91 -9
- package/tokens/_md-comp-filled-icon-button.scss +46 -1
- package/tokens/_md-comp-filled-select.scss +124 -1
- package/tokens/_md-comp-filled-text-field.scss +93 -9
- package/tokens/_md-comp-filled-tonal-button.scss +0 -11
- package/tokens/_md-comp-filled-tonal-icon-button.scss +45 -3
- package/tokens/_md-comp-filter-chip.scss +103 -103
- package/tokens/_md-comp-focus-ring.scss +23 -24
- package/tokens/_md-comp-icon-button.scss +37 -1
- package/tokens/_md-comp-input-chip.scss +77 -95
- package/tokens/_md-comp-linear-progress-indicator.scss +31 -3
- package/tokens/_md-comp-list-item.scss +174 -0
- package/tokens/_md-comp-list.scss +81 -26
- package/tokens/_md-comp-menu-item.scss +50 -0
- package/tokens/_md-comp-menu.scss +29 -2
- package/tokens/_md-comp-outlined-button.scss +0 -10
- package/{field/lib → tokens}/_md-comp-outlined-field.scss +85 -9
- package/tokens/_md-comp-outlined-icon-button.scss +41 -1
- package/tokens/_md-comp-outlined-segmented-button.scss +57 -11
- package/tokens/_md-comp-outlined-select.scss +123 -1
- package/tokens/_md-comp-outlined-text-field.scss +85 -8
- package/tokens/_md-comp-slider.scss +13 -1
- package/tokens/_md-comp-suggestion-chip.scss +29 -30
- package/tokens/_md-comp-switch.scss +81 -1
- package/tokens/_md-comp-text-button.scss +0 -10
- package/tokens/_values.scss +2 -4
- package/types/aria.d.ts +59 -1
- package/actionelement/action-element.d.ts +0 -79
- package/actionelement/action-element.js +0 -97
- package/actionelement/action-element.js.map +0 -1
- package/button/lib/state.d.ts +0 -10
- package/button/lib/state.js +0 -7
- package/button/lib/state.js.map +0 -1
- package/controller/action-controller.d.ts +0 -147
- package/controller/action-controller.js +0 -286
- package/controller/action-controller.js.map +0 -1
- package/decorators/aria-property.d.ts +0 -32
- package/decorators/aria-property.js +0 -99
- package/decorators/aria-property.js.map +0 -1
- package/fab/_fab-extended.scss +0 -6
- package/fab/fab-extended.d.ts +0 -23
- package/fab/fab-extended.js +0 -29
- package/fab/fab-extended.js.map +0 -1
- package/fab/lib/_fab-extended.scss +0 -73
- package/fab/lib/fab-extended-styles.css.js +0 -9
- package/fab/lib/fab-extended-styles.css.js.map +0 -1
- package/fab/lib/fab-extended.d.ts +0 -19
- package/fab/lib/fab-extended.js +0 -28
- package/fab/lib/fab-extended.js.map +0 -1
- package/fab/lib/fab-shared-styles.css.js +0 -9
- package/fab/lib/fab-shared-styles.css.js.map +0 -1
- package/fab/lib/fab-shared.d.ts +0 -44
- package/fab/lib/fab-shared.js +0 -121
- package/fab/lib/fab-shared.js.map +0 -1
- package/focus/strong-focus.d.ts +0 -56
- package/focus/strong-focus.js +0 -96
- package/focus/strong-focus.js.map +0 -1
- package/sass/_shape.scss +0 -154
- package/slider/lib/_tokens.scss +0 -65
- package/tokens/_md-comp-extended-fab-branded.scss +0 -45
- package/tokens/_md-comp-extended-fab-primary.scss +0 -45
- package/tokens/_md-comp-extended-fab-secondary.scss +0 -48
- package/tokens/_md-comp-extended-fab-surface.scss +0 -45
- package/tokens/_md-comp-extended-fab-tertiary.scss +0 -48
- package/tokens/_md-comp-fab-branded-large.scss +0 -23
- package/tokens/_md-comp-fab-primary-large.scss +0 -23
- package/tokens/_md-comp-fab-primary-small.scss +0 -23
- package/tokens/_md-comp-fab-primary.scss +0 -23
- package/tokens/_md-comp-fab-secondary-large.scss +0 -23
- package/tokens/_md-comp-fab-secondary-small.scss +0 -23
- package/tokens/_md-comp-fab-secondary.scss +0 -23
- package/tokens/_md-comp-fab-surface-large.scss +0 -23
- package/tokens/_md-comp-fab-surface-small.scss +0 -23
- package/tokens/_md-comp-fab-surface.scss +0 -23
- package/tokens/_md-comp-fab-tertiary-large.scss +0 -23
- package/tokens/_md-comp-fab-tertiary-small.scss +0 -23
- package/tokens/_md-comp-fab-tertiary.scss +0 -23
- /package/{fab/lib/fab-extended-styles.css.d.ts → chips/lib/elevated-styles.css.d.ts} +0 -0
- /package/{fab/lib/fab-shared-styles.css.d.ts → chips/lib/filter-styles.css.d.ts} +0 -0
|
@@ -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-shape
|
|
7
|
+
export const styles = css `:host{--_container-shape: var(--md-outlined-icon-button-container-shape, 9999px);--_container-size: var(--md-outlined-icon-button-container-size, 40px);--_disabled-icon-color: var(--md-outlined-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-selected-container-color: var(--md-outlined-icon-button-disabled-selected-container-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-unselected-outline-color: var(--md-outlined-icon-button-disabled-unselected-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-outline-opacity: var(--md-outlined-icon-button-disabled-unselected-outline-opacity, 0.12);--_focus-state-layer-opacity: var(--md-outlined-icon-button-focus-state-layer-opacity, 0.08);--_hover-state-layer-opacity: var(--md-outlined-icon-button-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-outlined-icon-button-icon-size, 24px);--_pressed-state-layer-opacity: var(--md-outlined-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-icon-button-selected-container-color, var(--md-sys-color-inverse-surface, #322f35));--_selected-focus-icon-color: var(--md-outlined-icon-button-selected-focus-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-focus-state-layer-color: var(--md-outlined-icon-button-selected-focus-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-icon-color: var(--md-outlined-icon-button-selected-hover-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-state-layer-color: var(--md-outlined-icon-button-selected-hover-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-icon-color: var(--md-outlined-icon-button-selected-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-icon-color: var(--md-outlined-icon-button-selected-pressed-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-state-layer-color: var(--md-outlined-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_unselected-focus-icon-color: var(--md-outlined-icon-button-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-state-layer-color: var(--md-outlined-icon-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-icon-color: var(--md-outlined-icon-button-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-state-layer-color: var(--md-outlined-icon-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-icon-color: var(--md-outlined-icon-button-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-outline-color: var(--md-outlined-icon-button-unselected-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-outline-width: var(--md-outlined-icon-button-unselected-outline-width, 1px);--_unselected-pressed-icon-color: var(--md-outlined-icon-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-outlined-icon-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-shape-start-start: var( --md-outlined-icon-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-outlined-icon-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-outlined-icon-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-outlined-icon-button-container-shape-end-start, var(--_container-shape) )}.md3-icon-button--outlined{background-color:rgba(0,0,0,0);color:var(--_unselected-icon-color);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button--outlined::before{border-color:var(--_unselected-outline-color);border-width:var(--_unselected-outline-width)}.md3-icon-button--outlined:hover{color:var(--_unselected-hover-icon-color)}.md3-icon-button--outlined:focus{color:var(--_unselected-focus-icon-color)}.md3-icon-button--outlined:active{color:var(--_unselected-pressed-icon-color)}.md3-icon-button--outlined:disabled{color:var(--_disabled-icon-color)}.md3-icon-button--outlined:disabled::before{border-color:var(--_disabled-unselected-outline-color);opacity:var(--_disabled-unselected-outline-opacity)}.md3-icon-button--outlined::before{block-size:100%;border-style:solid;border-radius:inherit;box-sizing:border-box;content:"";inline-size:100%;inset:0;pointer-events:none;position:absolute}.md3-icon-button--outlined.md3-icon-button--selected::before{border-width:0}.md3-icon-button--selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}.md3-icon-button--selected:disabled{background-color:var(--_disabled-selected-container-color)}@media(forced-colors: active){.md3-icon-button--selected::before{border-color:var(--_unselected-outline-color);border-width:var(--_unselected-outline-width)}.md3-icon-button--selected:disabled::before{border-color:var(--_disabled-unselected-outline-color);opacity:var(--_disabled-unselected-outline-opacity)}}/*# sourceMappingURL=outlined-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=outlined-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-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-shape
|
|
1
|
+
{"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-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-shape: var(--md-outlined-icon-button-container-shape, 9999px);--_container-size: var(--md-outlined-icon-button-container-size, 40px);--_disabled-icon-color: var(--md-outlined-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-selected-container-color: var(--md-outlined-icon-button-disabled-selected-container-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-unselected-outline-color: var(--md-outlined-icon-button-disabled-unselected-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-outline-opacity: var(--md-outlined-icon-button-disabled-unselected-outline-opacity, 0.12);--_focus-state-layer-opacity: var(--md-outlined-icon-button-focus-state-layer-opacity, 0.08);--_hover-state-layer-opacity: var(--md-outlined-icon-button-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-outlined-icon-button-icon-size, 24px);--_pressed-state-layer-opacity: var(--md-outlined-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-icon-button-selected-container-color, var(--md-sys-color-inverse-surface, #322f35));--_selected-focus-icon-color: var(--md-outlined-icon-button-selected-focus-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-focus-state-layer-color: var(--md-outlined-icon-button-selected-focus-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-icon-color: var(--md-outlined-icon-button-selected-hover-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-hover-state-layer-color: var(--md-outlined-icon-button-selected-hover-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-icon-color: var(--md-outlined-icon-button-selected-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-icon-color: var(--md-outlined-icon-button-selected-pressed-icon-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_selected-pressed-state-layer-color: var(--md-outlined-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-inverse-on-surface, #f5eff7));--_unselected-focus-icon-color: var(--md-outlined-icon-button-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-state-layer-color: var(--md-outlined-icon-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-icon-color: var(--md-outlined-icon-button-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-state-layer-color: var(--md-outlined-icon-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-icon-color: var(--md-outlined-icon-button-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-outline-color: var(--md-outlined-icon-button-unselected-outline-color, var(--md-sys-color-outline, #79747e));--_unselected-outline-width: var(--md-outlined-icon-button-unselected-outline-width, 1px);--_unselected-pressed-icon-color: var(--md-outlined-icon-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-outlined-icon-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-shape-start-start: var( --md-outlined-icon-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-outlined-icon-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-outlined-icon-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-outlined-icon-button-container-shape-end-start, var(--_container-shape) )}.md3-icon-button--outlined{background-color:rgba(0,0,0,0);color:var(--_unselected-icon-color);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button--outlined::before{border-color:var(--_unselected-outline-color);border-width:var(--_unselected-outline-width)}.md3-icon-button--outlined:hover{color:var(--_unselected-hover-icon-color)}.md3-icon-button--outlined:focus{color:var(--_unselected-focus-icon-color)}.md3-icon-button--outlined:active{color:var(--_unselected-pressed-icon-color)}.md3-icon-button--outlined:disabled{color:var(--_disabled-icon-color)}.md3-icon-button--outlined:disabled::before{border-color:var(--_disabled-unselected-outline-color);opacity:var(--_disabled-unselected-outline-opacity)}.md3-icon-button--outlined::before{block-size:100%;border-style:solid;border-radius:inherit;box-sizing:border-box;content:\"\";inline-size:100%;inset:0;pointer-events:none;position:absolute}.md3-icon-button--outlined.md3-icon-button--selected::before{border-width:0}.md3-icon-button--selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}.md3-icon-button--selected:disabled{background-color:var(--_disabled-selected-container-color)}@media(forced-colors: active){.md3-icon-button--selected::before{border-color:var(--_unselected-outline-color);border-width:var(--_unselected-outline-width)}.md3-icon-button--selected:disabled::before{border-color:var(--_disabled-unselected-outline-color);opacity:var(--_disabled-unselected-outline-opacity)}}/*# sourceMappingURL=outlined-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{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-size);width:var(--_container-size);justify-content:center;--md-focus-ring-shape-start-start:
|
|
7
|
+
export const styles = css `:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-size);width:var(--_container-size);justify-content:center;--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)}:host([disabled]){pointer-events:none}.md3-icon-button{align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;outline:none;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;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)}.md3-icon-button__icon{--md-icon-size:var(--_icon-size);--md-icon-weight:inherit}md-ripple{z-index:-1;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)}.md3-icon-button--flip-icon .md3-icon-button__icon{transform:scaleX(-1)}.md3-icon-button__icon{display:inline-flex}.md3-icon-button__link{height:100%;outline:none;position:absolute;width:100%}.md3-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}/*# 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{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-size);width:var(--_container-size);justify-content:center;--md-focus-ring-shape-start-start:
|
|
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{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-size);width:var(--_container-size);justify-content:center;--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)}:host([disabled]){pointer-events:none}.md3-icon-button{align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;outline:none;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;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)}.md3-icon-button__icon{--md-icon-size:var(--_icon-size);--md-icon-weight:inherit}md-ripple{z-index:-1;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)}.md3-icon-button--flip-icon .md3-icon-button__icon{transform:scaleX(-1)}.md3-icon-button__icon{display:inline-flex}.md3-icon-button__link{height:100%;outline:none;position:absolute;width:100%}.md3-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}/*# sourceMappingURL=shared-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{--
|
|
7
|
+
export const styles = css `:host{--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_icon-size: var(--md-icon-button-icon-size, 24px);--_selected-focus-icon-color: var(--md-icon-button-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-color: var(--md-icon-button-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-icon-button-selected-focus-state-layer-opacity, 0.12);--_selected-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-icon-button-state-layer-shape, 9999px);--_state-layer-size: var(--md-icon-button-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-icon-button-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-state-layer-color: var(--md-icon-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-state-layer-opacity: var(--md-icon-button-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-icon-color: var(--md-icon-button-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-state-layer-color: var(--md-icon-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-state-layer-opacity: var(--md-icon-button-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-icon-button-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-icon-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-state-layer-color: var(--md-icon-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-state-layer-opacity: var(--md-icon-button-unselected-pressed-state-layer-opacity, 0.12);height:var(--_state-layer-size);width:var(--_state-layer-size);--md-focus-ring-shape: var(--_state-layer-shape)}.md3-icon-button--standard{background-color:rgba(0,0,0,0);color:var(--_unselected-icon-color);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity);--md-ripple-shape:var(--_state-layer-shape)}.md3-icon-button--standard:hover{color:var(--_unselected-hover-icon-color)}.md3-icon-button--standard:focus{color:var(--_unselected-focus-icon-color)}.md3-icon-button--standard:active{color:var(--_unselected-pressed-icon-color)}.md3-icon-button--standard:disabled{color:var(--_disabled-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--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)}.md3-icon-button--selected:not(:disabled){color:var(--_selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}/*# sourceMappingURL=standard-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=standard-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"standard-styles.css.js","sourceRoot":"","sources":["standard-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{--
|
|
1
|
+
{"version":3,"file":"standard-styles.css.js","sourceRoot":"","sources":["standard-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{--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_icon-size: var(--md-icon-button-icon-size, 24px);--_selected-focus-icon-color: var(--md-icon-button-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-color: var(--md-icon-button-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-icon-button-selected-focus-state-layer-opacity, 0.12);--_selected-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-icon-button-state-layer-shape, 9999px);--_state-layer-size: var(--md-icon-button-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-icon-button-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-state-layer-color: var(--md-icon-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-state-layer-opacity: var(--md-icon-button-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-icon-color: var(--md-icon-button-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-state-layer-color: var(--md-icon-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-state-layer-opacity: var(--md-icon-button-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-icon-button-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-icon-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-state-layer-color: var(--md-icon-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-state-layer-opacity: var(--md-icon-button-unselected-pressed-state-layer-opacity, 0.12);height:var(--_state-layer-size);width:var(--_state-layer-size);--md-focus-ring-shape: var(--_state-layer-shape)}.md3-icon-button--standard{background-color:rgba(0,0,0,0);color:var(--_unselected-icon-color);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity);--md-ripple-shape:var(--_state-layer-shape)}.md3-icon-button--standard:hover{color:var(--_unselected-hover-icon-color)}.md3-icon-button--standard:focus{color:var(--_unselected-focus-icon-color)}.md3-icon-button--standard:active{color:var(--_unselected-pressed-icon-color)}.md3-icon-button--standard:disabled{color:var(--_disabled-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--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)}.md3-icon-button--selected:not(:disabled){color:var(--_selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}/*# sourceMappingURL=standard-styles.css.map */\n`;\n "]}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Copyright 2022 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { ClassInfo } from 'lit/directives/class-map.js';
|
|
7
6
|
import { IconButton } from './lib/icon-button.js';
|
|
8
7
|
declare global {
|
|
9
8
|
interface HTMLElementTagNameMap {
|
|
@@ -27,5 +26,9 @@ declare global {
|
|
|
27
26
|
*/
|
|
28
27
|
export declare class MdOutlinedIconButton extends IconButton {
|
|
29
28
|
static styles: import("lit").CSSResult[];
|
|
30
|
-
protected getRenderClasses():
|
|
29
|
+
protected getRenderClasses(): {
|
|
30
|
+
'md3-icon-button--outlined': boolean;
|
|
31
|
+
'md3-icon-button--flip-icon': boolean;
|
|
32
|
+
'md3-icon-button--selected': boolean;
|
|
33
|
+
};
|
|
31
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"outlined-icon-button.js","sourceRoot":"","sources":["outlined-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"outlined-icon-button.js","sourceRoot":"","sources":["outlined-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,EAAC,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;GAcG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAG/B,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,2BAA2B,EAAE,IAAI;SAClC,CAAC;IACJ,CAAC;;AAPe,2BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AADrC,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAShC;SATY,oBAAoB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {IconButton} from './lib/icon-button.js';\nimport {styles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-outlined-icon-button': MdOutlinedIconButton;\n }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n */\n@customElement('md-outlined-icon-button')\nexport class MdOutlinedIconButton extends IconButton {\n static override styles = [sharedStyles, styles];\n\n protected override getRenderClasses() {\n return {\n ...super.getRenderClasses(),\n 'md3-icon-button--outlined': true,\n };\n }\n}\n"]}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Copyright 2021 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { ClassInfo } from 'lit/directives/class-map.js';
|
|
7
6
|
import { IconButton } from './lib/icon-button.js';
|
|
8
7
|
declare global {
|
|
9
8
|
interface HTMLElementTagNameMap {
|
|
@@ -27,5 +26,9 @@ declare global {
|
|
|
27
26
|
*/
|
|
28
27
|
export declare class MdStandardIconButton extends IconButton {
|
|
29
28
|
static styles: import("lit").CSSResult[];
|
|
30
|
-
protected getRenderClasses():
|
|
29
|
+
protected getRenderClasses(): {
|
|
30
|
+
'md3-icon-button--standard': boolean;
|
|
31
|
+
'md3-icon-button--flip-icon': boolean;
|
|
32
|
+
'md3-icon-button--selected': boolean;
|
|
33
|
+
};
|
|
31
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"standard-icon-button.js","sourceRoot":"","sources":["standard-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"standard-icon-button.js","sourceRoot":"","sources":["standard-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,MAAM,EAAC,MAAM,8BAA8B,CAAC;AAQpD;;;;;;;;;;;;;;GAcG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAG/B,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,2BAA2B,EAAE,IAAI;SAClC,CAAC;IACJ,CAAC;;AAPe,2BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AADrC,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAShC;SATY,oBAAoB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {IconButton} from './lib/icon-button.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\nimport {styles} from './lib/standard-styles.css.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-standard-icon-button': MdStandardIconButton;\n }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n */\n@customElement('md-standard-icon-button')\nexport class MdStandardIconButton extends IconButton {\n static override styles = [sharedStyles, styles];\n\n protected override getRenderClasses() {\n return {\n ...super.getRenderClasses(),\n 'md3-icon-button--standard': true,\n };\n }\n}\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { Harness } from '../testing/harness.js';
|
|
7
|
+
import { LinearProgress } from './lib/linear-progress.js';
|
|
8
|
+
/**
|
|
9
|
+
* Test harness for linear-progress.
|
|
10
|
+
*/
|
|
11
|
+
export declare class LinearProgressHarness extends Harness<LinearProgress> {
|
|
12
|
+
getInteractiveElement(): Promise<HTMLElement>;
|
|
13
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { Harness } from '../testing/harness.js';
|
|
7
|
+
/**
|
|
8
|
+
* Test harness for linear-progress.
|
|
9
|
+
*/
|
|
10
|
+
export class LinearProgressHarness extends Harness {
|
|
11
|
+
async getInteractiveElement() {
|
|
12
|
+
await this.element.updateComplete;
|
|
13
|
+
// Test access to protected property
|
|
14
|
+
// tslint:disable-next-line:no-dict-access-on-struct-type
|
|
15
|
+
return this.element['rootEl'];
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=harness.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,qBAAsB,SAAQ,OAAuB;IACvD,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,oCAAoC;QACpC,yDAAyD;QACzD,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAChC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {LinearProgress} from './lib/linear-progress.js';\n\n/**\n * Test harness for linear-progress.\n */\nexport class LinearProgressHarness extends Harness<LinearProgress> {\n override async getInteractiveElement() {\n await this.element.updateComplete;\n // Test access to protected property\n // tslint:disable-next-line:no-dict-access-on-struct-type\n return this.element['rootEl'];\n }\n}\n"]}
|
|
@@ -0,0 +1,386 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 Google LLC
|
|
3
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
//
|
|
5
|
+
|
|
6
|
+
// go/keep-sorted start
|
|
7
|
+
@use 'sass:list';
|
|
8
|
+
// go/keep-sorted end
|
|
9
|
+
// go/keep-sorted start
|
|
10
|
+
@use '../../tokens';
|
|
11
|
+
// go/keep-sorted end
|
|
12
|
+
|
|
13
|
+
@mixin theme($tokens) {
|
|
14
|
+
$supported-tokens: tokens.$md-comp-linear-progress-indicator-supported-tokens;
|
|
15
|
+
@each $token, $value in $tokens {
|
|
16
|
+
@if list.index($supported-tokens, $token) == null {
|
|
17
|
+
@error 'Token `#{$token}` is not a supported token.';
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@if $value {
|
|
21
|
+
--md-linear-progress-#{$token}: #{$value};
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// note, transition settings match MDC
|
|
27
|
+
// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L79
|
|
28
|
+
$_determinate-duration: 250ms;
|
|
29
|
+
$_determinate-easing: cubic-bezier(0.4, 0, 0.6, 1);
|
|
30
|
+
// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L218
|
|
31
|
+
$_indeterminate-duration: 2s;
|
|
32
|
+
|
|
33
|
+
// Note, track background is a series of animating dots sized to fit
|
|
34
|
+
// the track height. Since the dots are circular, width scales with height.
|
|
35
|
+
// Background width is separated because it's also used to help animate the
|
|
36
|
+
// /dots.
|
|
37
|
+
$_track-dot-size: calc(var(--_track-height) / 2);
|
|
38
|
+
$_track-background-width: calc($_track-dot-size * 5);
|
|
39
|
+
// this is a series of sized/colored dots.
|
|
40
|
+
$_track-background: 0 / $_track-background-width 100%
|
|
41
|
+
radial-gradient(
|
|
42
|
+
circle at calc($_track-dot-size * 2),
|
|
43
|
+
var(--_track-color) 0,
|
|
44
|
+
var(--_track-color) $_track-dot-size,
|
|
45
|
+
transparent $_track-dot-size
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
// Generates a list of rtl selectors. This is done so rules can be generated
|
|
49
|
+
// separately so they don't get dropped where unsupported.
|
|
50
|
+
$rtl-selectors: (
|
|
51
|
+
':host-context([dir="rtl"]) .linear-progress',
|
|
52
|
+
':host([dir="rtl"]) .linear-progress',
|
|
53
|
+
'.linear-progress:dir(rtl)'
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
@mixin styles() {
|
|
57
|
+
$tokens: tokens.md-comp-linear-progress-indicator-values();
|
|
58
|
+
|
|
59
|
+
:host {
|
|
60
|
+
@each $token, $value in $tokens {
|
|
61
|
+
--_#{$token}: var(--md-linear-progress-#{$token}, #{$value});
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
display: block;
|
|
65
|
+
position: relative;
|
|
66
|
+
// note, this matches the `meter` element and is just done so
|
|
67
|
+
// there's a minimum width when in a container with a display like
|
|
68
|
+
// inline-flex.
|
|
69
|
+
min-inline-size: 80px;
|
|
70
|
+
block-size: var(--_track-height);
|
|
71
|
+
content-visibility: auto;
|
|
72
|
+
contain: strict;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.linear-progress,
|
|
76
|
+
.track,
|
|
77
|
+
.buffer-bar,
|
|
78
|
+
.bar,
|
|
79
|
+
.bar-inner {
|
|
80
|
+
position: absolute;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.linear-progress {
|
|
84
|
+
inset: 0;
|
|
85
|
+
outline: transparent solid 1px;
|
|
86
|
+
border-radius: var(--_track-shape);
|
|
87
|
+
overflow: hidden;
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.bar {
|
|
93
|
+
animation: none;
|
|
94
|
+
// position is offset for indeterminate animation, so we lock the inline size here.
|
|
95
|
+
inline-size: 100%;
|
|
96
|
+
block-size: var(--_active-indicator-height);
|
|
97
|
+
transform-origin: left center;
|
|
98
|
+
will-change: transform;
|
|
99
|
+
transition: transform $_determinate-duration $_determinate-easing;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.secondary-bar {
|
|
103
|
+
display: none;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.bar-inner {
|
|
107
|
+
inset: 0;
|
|
108
|
+
animation: none;
|
|
109
|
+
background: var(--_active-indicator-color);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.buffer-bar {
|
|
113
|
+
background: var(--_track-color);
|
|
114
|
+
inset: 0;
|
|
115
|
+
will-change: transform;
|
|
116
|
+
transition: transform $_determinate-duration $_determinate-easing;
|
|
117
|
+
transform-origin: left center;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.track {
|
|
121
|
+
inset: 0;
|
|
122
|
+
will-change: transform;
|
|
123
|
+
animation: linear infinite $_determinate-duration;
|
|
124
|
+
// stylelint-disable-next-line no-unknown-animations --
|
|
125
|
+
// animation generated via mixin
|
|
126
|
+
animation-name: buffering;
|
|
127
|
+
background: $_track-background;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// indeterminate
|
|
131
|
+
.indeterminate .bar {
|
|
132
|
+
transition: none;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// note, the numbers here come directly from the mdc implementation.
|
|
136
|
+
// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L208.
|
|
137
|
+
.indeterminate .primary-bar {
|
|
138
|
+
inset-inline-start: -145.167%;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.indeterminate .secondary-bar {
|
|
142
|
+
inset-inline-start: -54.8889%;
|
|
143
|
+
// this is display none by default.
|
|
144
|
+
display: block;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.indeterminate .track {
|
|
148
|
+
display: none;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.indeterminate.animation-ready .primary-bar {
|
|
152
|
+
will-change: transform;
|
|
153
|
+
animation: linear infinite $_indeterminate-duration;
|
|
154
|
+
// stylelint-disable-next-line no-unknown-animations --
|
|
155
|
+
// animation generated via mixin
|
|
156
|
+
animation-name: primary-indeterminate-translate;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.indeterminate.animation-ready .primary-bar > .bar-inner {
|
|
160
|
+
will-change: transform;
|
|
161
|
+
animation: linear infinite $_indeterminate-duration
|
|
162
|
+
primary-indeterminate-scale;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.indeterminate.animation-ready.four-colors .primary-bar > .bar-inner {
|
|
166
|
+
animation-name: primary-indeterminate-scale, four-colors;
|
|
167
|
+
animation-duration: $_indeterminate-duration,
|
|
168
|
+
calc($_indeterminate-duration * 2);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.indeterminate.animation-ready .secondary-bar {
|
|
172
|
+
will-change: transform;
|
|
173
|
+
animation: linear infinite $_indeterminate-duration;
|
|
174
|
+
// stylelint-disable-next-line no-unknown-animations --
|
|
175
|
+
// animation generated via mixin
|
|
176
|
+
animation-name: secondary-indeterminate-translate;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.indeterminate.animation-ready .secondary-bar > .bar-inner {
|
|
180
|
+
will-change: transform;
|
|
181
|
+
animation: linear infinite $_indeterminate-duration
|
|
182
|
+
secondary-indeterminate-scale;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.indeterminate.animation-ready.four-colors .secondary-bar > .bar-inner {
|
|
186
|
+
animation-name: secondary-indeterminate-scale, four-colors;
|
|
187
|
+
animation-duration: $_indeterminate-duration,
|
|
188
|
+
calc($_indeterminate-duration * 2);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
@each $selector in $rtl-selectors {
|
|
192
|
+
#{$selector} {
|
|
193
|
+
.bar {
|
|
194
|
+
transform-origin: right center;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.buffer-bar {
|
|
198
|
+
transform-origin: right center;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.track {
|
|
202
|
+
// stylelint-disable-next-line no-unknown-animations --
|
|
203
|
+
// animation generated via mixin
|
|
204
|
+
animation-name: buffering-rtl;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
&.indeterminate.animation-ready .primary-bar {
|
|
208
|
+
// stylelint-disable-next-line no-unknown-animations --
|
|
209
|
+
// animation generated via mixin
|
|
210
|
+
animation-name: primary-indeterminate-translate-rtl;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
&.indeterminate.animation-ready .secondary-bar {
|
|
214
|
+
// stylelint-disable-next-line no-unknown-animations --
|
|
215
|
+
// animation generated via mixin
|
|
216
|
+
animation-name: secondary-indeterminate-translate-rtl;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
@keyframes primary-indeterminate-scale {
|
|
222
|
+
0% {
|
|
223
|
+
transform: scaleX(0.08);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
36.65% {
|
|
227
|
+
animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
|
|
228
|
+
transform: scaleX(0.08);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
69.15% {
|
|
232
|
+
animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
|
|
233
|
+
transform: scaleX(0.661479);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
100% {
|
|
237
|
+
transform: scaleX(0.08);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
@keyframes secondary-indeterminate-scale {
|
|
242
|
+
0% {
|
|
243
|
+
animation-timing-function: cubic-bezier(
|
|
244
|
+
0.205028,
|
|
245
|
+
0.057051,
|
|
246
|
+
0.57661,
|
|
247
|
+
0.453971
|
|
248
|
+
);
|
|
249
|
+
transform: scaleX(0.08);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
19.15% {
|
|
253
|
+
animation-timing-function: cubic-bezier(
|
|
254
|
+
0.152313,
|
|
255
|
+
0.196432,
|
|
256
|
+
0.648374,
|
|
257
|
+
1.00432
|
|
258
|
+
);
|
|
259
|
+
transform: scaleX(0.457104);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
44.15% {
|
|
263
|
+
animation-timing-function: cubic-bezier(
|
|
264
|
+
0.257759,
|
|
265
|
+
-0.003163,
|
|
266
|
+
0.211762,
|
|
267
|
+
1.38179
|
|
268
|
+
);
|
|
269
|
+
transform: scaleX(0.72796);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
100% {
|
|
273
|
+
transform: scaleX(0.08);
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
@include _directional-keyframes('ltr');
|
|
278
|
+
@include _directional-keyframes('rtl');
|
|
279
|
+
|
|
280
|
+
@keyframes four-colors {
|
|
281
|
+
0% {
|
|
282
|
+
background: var(--_four-color-active-indicator-one-color);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
15% {
|
|
286
|
+
background: var(--_four-color-active-indicator-one-color);
|
|
287
|
+
}
|
|
288
|
+
25% {
|
|
289
|
+
background: var(--_four-color-active-indicator-two-color);
|
|
290
|
+
}
|
|
291
|
+
40% {
|
|
292
|
+
background: var(--_four-color-active-indicator-two-color);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
50% {
|
|
296
|
+
background: var(--_four-color-active-indicator-three-color);
|
|
297
|
+
}
|
|
298
|
+
65% {
|
|
299
|
+
background: var(--_four-color-active-indicator-three-color);
|
|
300
|
+
}
|
|
301
|
+
75% {
|
|
302
|
+
background: var(--_four-color-active-indicator-four-color);
|
|
303
|
+
}
|
|
304
|
+
90% {
|
|
305
|
+
background: var(--_four-color-active-indicator-four-color);
|
|
306
|
+
}
|
|
307
|
+
100% {
|
|
308
|
+
background: var(--_four-color-active-indicator-one-color);
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
@media screen and (forced-colors: active) {
|
|
313
|
+
.linear-progress {
|
|
314
|
+
--_active-indicator-color: canvastext;
|
|
315
|
+
--_track-color: graytext;
|
|
316
|
+
border: 1px solid canvastext;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.indeterminate.linear-progress {
|
|
320
|
+
--_track-color: canvas;
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
// Generates keyframes for ltr and rtl.
|
|
326
|
+
@mixin _directional-keyframes($dir) {
|
|
327
|
+
$is-rtl: $dir == 'rtl';
|
|
328
|
+
$sign: if($is-rtl, -1, 1);
|
|
329
|
+
$suffix: if($is-rtl, '-rtl', '');
|
|
330
|
+
|
|
331
|
+
@keyframes buffering#{$suffix} {
|
|
332
|
+
0% {
|
|
333
|
+
// the amount to animate is aligned with the default track background
|
|
334
|
+
transform: translateX(calc(#{$sign} * #{$_track-background-width}));
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
// note, the numbers here come directly from the mdc implementation.
|
|
339
|
+
// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L208.
|
|
340
|
+
// keyframes
|
|
341
|
+
@keyframes primary-indeterminate-translate#{$suffix} {
|
|
342
|
+
0% {
|
|
343
|
+
transform: translateX(0px);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
20% {
|
|
347
|
+
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
|
|
348
|
+
transform: translateX(0px);
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
59.15% {
|
|
352
|
+
animation-timing-function: cubic-bezier(
|
|
353
|
+
0.302435,
|
|
354
|
+
0.381352,
|
|
355
|
+
0.55,
|
|
356
|
+
0.956352
|
|
357
|
+
);
|
|
358
|
+
transform: translateX(calc(#{$sign} * 83.6714%));
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
100% {
|
|
362
|
+
transform: translateX(calc(#{$sign} * 200.611%));
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
@keyframes secondary-indeterminate-translate#{$suffix} {
|
|
367
|
+
0% {
|
|
368
|
+
animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
|
|
369
|
+
transform: translateX(0px);
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
25% {
|
|
373
|
+
animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
|
|
374
|
+
transform: translateX(calc(#{$sign} * 37.6519%));
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
48.35% {
|
|
378
|
+
animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
|
|
379
|
+
transform: translateX(calc(#{$sign} * 84.3862%));
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
100% {
|
|
383
|
+
transform: translateX(calc(#{$sign} * 160.278%));
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|