@material/web 1.0.0-pre.5 → 1.0.0-pre.7
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 +7 -7
- package/aria/aria.d.ts +43 -0
- package/aria/aria.js +56 -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-styles.css.js +1 -1
- package/badge/lib/badge-styles.css.js.map +1 -1
- package/badge/lib/badge.d.ts +8 -7
- package/badge/lib/badge.js +5 -6
- package/badge/lib/badge.js.map +1 -1
- package/button/lib/_elevation.scss +15 -11
- package/button/lib/_outlined-button.scss +1 -1
- package/button/lib/_shared.scss +5 -0
- package/button/lib/_text-button.scss +1 -1
- package/button/lib/_tonal-button.scss +1 -1
- package/button/lib/button.d.ts +13 -11
- package/button/lib/button.js +51 -60
- package/button/lib/button.js.map +1 -1
- package/button/lib/elevated-button.d.ts +3 -0
- package/button/lib/elevated-button.js +4 -2
- 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 +3 -1
- package/button/lib/filled-button.js +4 -3
- 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 +3 -0
- package/button/lib/outlined-button.js +3 -1
- 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 +3 -0
- package/button/lib/text-button.js +3 -1
- 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 +3 -1
- package/button/lib/tonal-button.js +4 -3
- 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-styles.css.js +1 -1
- package/checkbox/lib/checkbox-styles.css.js.map +1 -1
- package/checkbox/lib/checkbox.d.ts +0 -1
- package/checkbox/lib/checkbox.js +33 -43
- package/checkbox/lib/checkbox.js.map +1 -1
- package/chips/_filter-chip.scss +6 -0
- package/chips/filter-chip.d.ts +20 -0
- package/chips/filter-chip.js +24 -0
- package/chips/filter-chip.js.map +1 -0
- package/chips/lib/_filter-chip.scss +141 -0
- package/chips/lib/_shared.scss +71 -37
- 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 +8 -3
- package/chips/lib/chip.js +30 -31
- package/chips/lib/chip.js.map +1 -1
- package/chips/lib/filter-chip.d.ts +21 -0
- package/chips/lib/filter-chip.js +47 -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/{fab/lib/fab-extended-styles.scss → chips/lib/filter-styles.scss} +3 -3
- package/chips/lib/shared-styles.css.js +1 -1
- package/chips/lib/shared-styles.css.js.map +1 -1
- package/chips/lib/suggestion-styles.css.js +1 -1
- package/chips/lib/suggestion-styles.css.js.map +1 -1
- package/circularprogress/_circular-progress.scss +6 -0
- package/circularprogress/circular-progress.d.ts +24 -0
- package/circularprogress/circular-progress.js +27 -0
- package/circularprogress/circular-progress.js.map +1 -0
- package/circularprogress/harness.d.ts +13 -0
- package/circularprogress/harness.js +16 -0
- package/circularprogress/harness.js.map +1 -0
- package/circularprogress/lib/_circular-progress.scss +282 -0
- package/circularprogress/lib/circular-progress-styles.css.js +9 -0
- package/circularprogress/lib/circular-progress-styles.css.js.map +1 -0
- package/circularprogress/lib/circular-progress-styles.scss +8 -0
- package/circularprogress/lib/circular-progress.d.ts +28 -0
- package/circularprogress/lib/circular-progress.js +95 -0
- package/circularprogress/lib/circular-progress.js.map +1 -0
- package/dialog/lib/_dialog.scss +9 -14
- package/dialog/lib/dialog-styles.css.js +1 -1
- package/dialog/lib/dialog-styles.css.js.map +1 -1
- package/dialog/lib/dialog.js +26 -50
- 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 +14 -51
- 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 +0 -8
- package/elevation/lib/elevation.js +1 -25
- package/elevation/lib/elevation.js.map +1 -1
- package/fab/_fab.scss +1 -0
- package/fab/branded-fab.d.ts +53 -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 +27 -0
- package/fab/lib/_fab.scss +144 -16
- package/fab/lib/_shared.scss +153 -131
- 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 +14 -10
- package/fab/lib/fab.js +19 -12
- package/fab/lib/fab.js.map +1 -1
- 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/{fab-shared.d.ts → shared.d.ts} +24 -16
- package/fab/lib/shared.js +137 -0
- package/fab/lib/shared.js.map +1 -0
- 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 +0 -1
- package/focus/focus-ring.js +0 -1
- package/focus/focus-ring.js.map +1 -1
- package/focus/lib/_focus-ring.scss +30 -20
- 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.js +2 -3
- package/focus/lib/focus-ring.js.map +1 -1
- package/focus/strong-focus.d.ts +11 -0
- package/focus/strong-focus.js +16 -1
- package/focus/strong-focus.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.js +1 -0
- package/iconbutton/filled-icon-button.js.map +1 -1
- package/iconbutton/filled-tonal-icon-button.js +1 -0
- package/iconbutton/filled-tonal-icon-button.js.map +1 -1
- package/iconbutton/harness.d.ts +1 -2
- package/iconbutton/harness.js.map +1 -1
- 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 +31 -4
- package/iconbutton/lib/icon-button.js +105 -37
- 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/standard-styles.css.js +1 -1
- package/iconbutton/lib/standard-styles.css.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 +380 -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/harness.d.ts +1 -0
- package/list/harness.js +1 -0
- package/list/harness.js.map +1 -1
- package/list/lib/_list.scss +6 -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 +1 -3
- package/list/lib/list.js +20 -34
- package/list/lib/list.js.map +1 -1
- package/list/lib/listitem/_list-item.scss +19 -82
- package/list/lib/listitem/forced-colors-styles.css.d.ts +1 -0
- package/list/lib/listitem/forced-colors-styles.css.js +9 -0
- package/list/lib/listitem/forced-colors-styles.css.js.map +1 -0
- package/list/lib/listitem/forced-colors-styles.scss +23 -0
- 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 +5 -7
- package/list/lib/listitem/list-item.js +27 -56
- package/list/lib/listitem/list-item.js.map +1 -1
- package/list/lib/listitemlink/list-item-link.js +4 -6
- package/list/lib/listitemlink/list-item-link.js.map +1 -1
- package/list/list-item-link.js +2 -1
- package/list/list-item-link.js.map +1 -1
- package/list/list-item.js +2 -1
- package/list/list-item.js.map +1 -1
- package/menu/harness.d.ts +1 -0
- package/menu/harness.js +1 -0
- package/menu/harness.js.map +1 -1
- package/menu/lib/_menu.scss +10 -37
- package/menu/lib/forced-colors-styles.css.d.ts +1 -0
- package/menu/lib/forced-colors-styles.css.js +9 -0
- package/menu/lib/forced-colors-styles.css.js.map +1 -0
- package/menu/lib/forced-colors-styles.scss +12 -0
- 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 +13 -3
- package/menu/lib/menu.js +78 -65
- package/menu/lib/menu.js.map +1 -1
- package/menu/lib/menuitem/_menu-item.scss +18 -43
- package/menu/lib/menuitem/forced-colors-styles.css.d.ts +1 -0
- package/menu/lib/menuitem/forced-colors-styles.css.js +9 -0
- package/menu/lib/menuitem/forced-colors-styles.css.js.map +1 -0
- package/menu/lib/menuitem/forced-colors-styles.scss +22 -0
- 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 +16 -2
- package/menu/lib/shared.js +23 -0
- package/menu/lib/shared.js.map +1 -1
- package/menu/lib/submenuitem/sub-menu-item.d.ts +4 -2
- package/menu/lib/submenuitem/sub-menu-item.js +17 -13
- package/menu/lib/submenuitem/sub-menu-item.js.map +1 -1
- package/menu/lib/typeaheadController.d.ts +10 -2
- package/menu/lib/typeaheadController.js +20 -14
- package/menu/lib/typeaheadController.js.map +1 -1
- package/menu/menu-item-link.js +3 -1
- package/menu/menu-item-link.js.map +1 -1
- package/menu/menu-item.js +4 -2
- package/menu/menu-item.js.map +1 -1
- package/menu/menu.js +2 -1
- package/menu/menu.js.map +1 -1
- package/menu/sub-menu-item.js +3 -1
- package/menu/sub-menu-item.js.map +1 -1
- package/navigationbar/lib/_navigation-bar.scss +9 -6
- 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 +5 -5
- package/navigationbar/lib/navigation-bar.js +19 -20
- 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 +10 -11
- package/navigationdrawer/lib/_navigation-drawer.scss +9 -14
- 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 +5 -10
- 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 +5 -9
- package/navigationdrawer/lib/navigation-drawer.js +18 -39
- package/navigationdrawer/lib/navigation-drawer.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-styles.css.js +1 -1
- package/navigationtab/lib/navigation-tab-styles.css.js.map +1 -1
- package/navigationtab/lib/navigation-tab.d.ts +19 -24
- package/navigationtab/lib/navigation-tab.js +48 -68
- package/navigationtab/lib/navigation-tab.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 +2 -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 +0 -1
- package/radio/lib/radio.js +30 -37
- package/radio/lib/radio.js.map +1 -1
- package/ripple/lib/_md-comp-ripple.scss +3 -3
- package/ripple/lib/ripple-styles.css.js +1 -1
- package/ripple/lib/ripple-styles.css.js.map +1 -1
- package/ripple/lib/ripple.js +7 -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/outlined-styles.css.js +1 -1
- package/segmentedbutton/lib/outlined-styles.css.js.map +1 -1
- package/segmentedbutton/lib/segmented-button.d.ts +27 -33
- package/segmentedbutton/lib/segmented-button.js +42 -75
- 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.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 +163 -0
- package/select/lib/_outlined-select.scss +146 -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 +218 -0
- package/select/lib/select.js +587 -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 +1 -0
- package/slider/harness.js +5 -0
- package/slider/harness.js.map +1 -1
- package/slider/lib/_slider.scss +147 -171
- 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 +2 -7
- package/slider/lib/slider.js +65 -119
- package/slider/lib/slider.js.map +1 -1
- 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 -2
- package/switch/lib/switch.js +32 -54
- package/switch/lib/switch.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-styles.css.js +1 -1
- package/textfield/lib/outlined-styles.css.js.map +1 -1
- package/textfield/lib/text-field.d.ts +0 -10
- package/textfield/lib/text-field.js +45 -115
- package/textfield/lib/text-field.js.map +1 -1
- package/tokens/_index.scss +6 -0
- package/tokens/_md-comp-assist-chip.scss +81 -21
- package/tokens/_md-comp-badge.scss +8 -1
- package/tokens/_md-comp-banner.scss +1 -1
- package/tokens/_md-comp-bottom-app-bar.scss +1 -1
- package/tokens/_md-comp-carousel-item.scss +1 -1
- package/tokens/_md-comp-checkbox.scss +1 -1
- package/tokens/_md-comp-circular-progress-indicator.scss +17 -2
- package/tokens/_md-comp-data-table.scss +1 -1
- package/tokens/_md-comp-date-input-modal.scss +1 -1
- package/tokens/_md-comp-date-picker-docked.scss +1 -1
- package/tokens/_md-comp-date-picker-modal.scss +1 -1
- package/tokens/_md-comp-dialog.scss +10 -1
- package/tokens/_md-comp-divider.scss +1 -1
- package/tokens/_md-comp-elevated-button.scss +80 -20
- package/tokens/_md-comp-elevated-card.scss +1 -1
- package/tokens/_md-comp-elevation.scss +24 -0
- package/tokens/_md-comp-extended-fab-branded.scss +8 -1
- package/tokens/_md-comp-extended-fab-primary.scss +8 -1
- package/tokens/_md-comp-extended-fab-secondary.scss +8 -1
- package/tokens/_md-comp-extended-fab-surface.scss +8 -1
- package/tokens/_md-comp-extended-fab-tertiary.scss +8 -1
- package/tokens/_md-comp-fab-branded-large.scss +1 -1
- package/tokens/_md-comp-fab-branded.scss +110 -2
- package/tokens/_md-comp-fab-primary-large.scss +1 -1
- package/tokens/_md-comp-fab-primary-small.scss +1 -1
- package/tokens/_md-comp-fab-primary.scss +1 -1
- package/tokens/_md-comp-fab-secondary-large.scss +1 -1
- package/tokens/_md-comp-fab-secondary-small.scss +1 -1
- package/tokens/_md-comp-fab-secondary.scss +1 -1
- package/tokens/_md-comp-fab-surface-large.scss +1 -1
- package/tokens/_md-comp-fab-surface-small.scss +1 -1
- package/tokens/_md-comp-fab-surface.scss +1 -1
- package/tokens/_md-comp-fab-tertiary-large.scss +1 -1
- package/tokens/_md-comp-fab-tertiary-small.scss +1 -1
- package/tokens/_md-comp-fab-tertiary.scss +1 -1
- package/tokens/_md-comp-fab.scss +290 -0
- package/tokens/_md-comp-filled-autocomplete.scss +1 -1
- package/tokens/_md-comp-filled-button.scss +80 -20
- package/tokens/_md-comp-filled-card.scss +1 -1
- package/tokens/_md-comp-filled-icon-button.scss +1 -1
- package/tokens/_md-comp-filled-menu-button.scss +1 -1
- package/tokens/_md-comp-filled-select.scss +151 -2
- package/tokens/_md-comp-filled-text-field.scss +10 -1
- package/tokens/_md-comp-filled-tonal-button.scss +80 -20
- package/tokens/_md-comp-filled-tonal-icon-button.scss +1 -1
- package/tokens/_md-comp-filter-chip.scss +211 -11
- package/tokens/_md-comp-focus-ring.scss +46 -0
- package/tokens/_md-comp-full-screen-dialog.scss +1 -1
- package/tokens/_md-comp-icon-button.scss +1 -1
- package/tokens/_md-comp-input-chip.scss +186 -11
- package/tokens/_md-comp-linear-progress-indicator.scss +15 -2
- package/tokens/_md-comp-list-item.scss +201 -0
- package/tokens/_md-comp-list.scss +110 -12
- package/tokens/_md-comp-menu-item.scss +76 -0
- package/tokens/_md-comp-menu.scss +53 -3
- package/tokens/_md-comp-navigation-bar.scss +1 -1
- package/tokens/_md-comp-navigation-drawer.scss +1 -1
- package/tokens/_md-comp-navigation-rail.scss +1 -1
- package/tokens/_md-comp-outlined-autocomplete.scss +1 -1
- package/tokens/_md-comp-outlined-button.scss +77 -19
- package/tokens/_md-comp-outlined-card.scss +1 -1
- package/tokens/_md-comp-outlined-icon-button.scss +1 -1
- package/tokens/_md-comp-outlined-menu-button.scss +1 -1
- package/tokens/_md-comp-outlined-segmented-button.scss +10 -1
- package/tokens/_md-comp-outlined-select.scss +151 -2
- package/tokens/_md-comp-outlined-text-field.scss +10 -1
- package/tokens/_md-comp-plain-tooltip.scss +1 -1
- package/tokens/_md-comp-primary-navigation-tab.scss +10 -1
- package/tokens/_md-comp-radio-button.scss +1 -1
- package/tokens/_md-comp-rich-tooltip.scss +1 -1
- package/tokens/_md-comp-scrim.scss +1 -1
- package/tokens/_md-comp-search-bar.scss +1 -1
- package/tokens/_md-comp-search-view.scss +1 -1
- package/tokens/_md-comp-secondary-navigation-tab.scss +9 -1
- package/tokens/_md-comp-sheet-bottom.scss +1 -1
- package/tokens/_md-comp-sheet-floating.scss +1 -1
- package/tokens/_md-comp-sheet-side.scss +1 -1
- package/tokens/_md-comp-slider.scss +23 -2
- package/tokens/_md-comp-snackbar.scss +1 -1
- package/tokens/_md-comp-standard-menu-button.scss +1 -1
- package/tokens/_md-comp-suggestion-chip.scss +83 -24
- package/tokens/_md-comp-switch.scss +1 -1
- package/tokens/_md-comp-test-table.scss +31 -0
- package/tokens/_md-comp-text-button.scss +70 -19
- package/tokens/_md-comp-time-input.scss +1 -1
- package/tokens/_md-comp-time-picker.scss +1 -1
- package/tokens/_md-comp-top-app-bar-large.scss +1 -1
- package/tokens/_md-comp-top-app-bar-medium.scss +1 -1
- package/tokens/_md-comp-top-app-bar-small-centered.scss +1 -1
- package/tokens/_md-comp-top-app-bar-small.scss +1 -1
- package/tokens/_md-ref-palette.scss +1 -1
- package/tokens/_md-ref-typeface.scss +24 -2
- package/tokens/_md-sys-color.scss +1 -1
- package/tokens/_md-sys-elevation.scss +1 -1
- package/tokens/_md-sys-motion.scss +1 -1
- package/tokens/_md-sys-shape.scss +1 -1
- package/tokens/_md-sys-state.scss +1 -1
- package/tokens/_md-sys-typescale.scss +36 -2
- package/tokens/_values.scss +114 -0
- package/tokens/{v0_161 → v0_172}/_md-comp-assist-chip.scss +3 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-badge.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-banner.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-bottom-app-bar.scss +3 -5
- package/tokens/{v0_161 → v0_172}/_md-comp-carousel-item.scss +1 -3
- package/tokens/{v0_161 → v0_172}/_md-comp-checkbox.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-circular-progress-indicator.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-data-table.scss +2 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-date-input-modal.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-date-picker-docked.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-date-picker-modal.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-dialog.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-divider.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-elevated-button.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-elevated-card.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-branded.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-primary.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-secondary.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-surface.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-extended-fab-tertiary.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-branded-large.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-branded.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-primary-large.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-primary-small.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-primary.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-secondary-large.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-secondary-small.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-secondary.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-surface-large.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-surface-small.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-surface.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-tertiary-large.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-tertiary-small.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-fab-tertiary.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-autocomplete.scss +4 -6
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-card.scss +3 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-icon-button.scss +2 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-menu-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-select.scss +4 -6
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-text-field.scss +3 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-tonal-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-filled-tonal-icon-button.scss +2 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-filter-chip.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-full-screen-dialog.scss +3 -3
- package/tokens/{v0_161 → v0_172}/_md-comp-icon-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-input-chip.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-linear-progress-indicator.scss +2 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-list.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-menu.scss +3 -5
- package/tokens/{v0_161 → v0_172}/_md-comp-navigation-bar.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-navigation-drawer.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-navigation-rail.scss +1 -16
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-autocomplete.scss +4 -6
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-card.scss +1 -3
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-icon-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-menu-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-segmented-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-select.scss +4 -6
- package/tokens/{v0_161 → v0_172}/_md-comp-outlined-text-field.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-plain-tooltip.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-primary-navigation-tab.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-radio-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-rich-tooltip.scss +3 -5
- package/tokens/{v0_161 → v0_172}/_md-comp-scrim.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-search-bar.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-search-view.scss +2 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-secondary-navigation-tab.scss +3 -3
- package/tokens/{v0_161 → v0_172}/_md-comp-sheet-bottom.scss +3 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-sheet-floating.scss +3 -5
- package/tokens/{v0_161 → v0_172}/_md-comp-sheet-side.scss +4 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-slider.scss +3 -2
- package/tokens/{v0_161 → v0_172}/_md-comp-snackbar.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-standard-menu-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-suggestion-chip.scss +3 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-switch.scss +13 -11
- package/tokens/{v0_161 → v0_172}/_md-comp-text-button.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-time-input.scss +3 -4
- package/tokens/{v0_161 → v0_172}/_md-comp-time-picker.scss +5 -5
- package/tokens/{v0_161 → v0_172}/_md-comp-top-app-bar-large.scss +1 -3
- package/tokens/{v0_161 → v0_172}/_md-comp-top-app-bar-medium.scss +1 -3
- package/tokens/{v0_161 → v0_172}/_md-comp-top-app-bar-small-centered.scss +3 -1
- package/tokens/{v0_161 → v0_172}/_md-comp-top-app-bar-small.scss +3 -3
- package/tokens/{v0_161 → v0_172}/_md-ref-palette.scss +23 -23
- package/tokens/{v0_161 → v0_172}/_md-ref-typeface.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-sys-color.scss +9 -9
- package/tokens/{v0_161 → v0_172}/_md-sys-elevation.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-sys-motion.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-sys-shape.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-sys-state.scss +1 -1
- package/tokens/{v0_161 → v0_172}/_md-sys-typescale.scss +1 -1
- package/tokens/v0_172/index.test.css.d.ts +1 -0
- package/tokens/v0_172/lib.test.css.d.ts +1 -0
- package/types/aria.d.ts +61 -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/elevated-link-button.d.ts +0 -36
- package/button/elevated-link-button.js +0 -41
- package/button/elevated-link-button.js.map +0 -1
- package/button/filled-link-button.d.ts +0 -34
- package/button/filled-link-button.js +0 -39
- package/button/filled-link-button.js.map +0 -1
- package/button/lib/elevated-link-button.d.ts +0 -13
- package/button/lib/elevated-link-button.js +0 -21
- package/button/lib/elevated-link-button.js.map +0 -1
- package/button/lib/filled-link-button.d.ts +0 -14
- package/button/lib/filled-link-button.js +0 -22
- package/button/lib/filled-link-button.js.map +0 -1
- package/button/lib/link-button.d.ts +0 -24
- package/button/lib/link-button.js +0 -59
- package/button/lib/link-button.js.map +0 -1
- package/button/lib/outlined-link-button.d.ts +0 -12
- package/button/lib/outlined-link-button.js +0 -20
- package/button/lib/outlined-link-button.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/button/lib/text-link-button.d.ts +0 -10
- package/button/lib/text-link-button.js +0 -16
- package/button/lib/text-link-button.js.map +0 -1
- package/button/lib/tonal-link-button.d.ts +0 -14
- package/button/lib/tonal-link-button.js +0 -22
- package/button/lib/tonal-link-button.js.map +0 -1
- package/button/outlined-link-button.d.ts +0 -36
- package/button/outlined-link-button.js +0 -40
- package/button/outlined-link-button.js.map +0 -1
- package/button/text-link-button.d.ts +0 -34
- package/button/text-link-button.js +0 -38
- package/button/text-link-button.js.map +0 -1
- package/button/tonal-link-button.d.ts +0 -35
- package/button/tonal-link-button.js +0 -40
- package/button/tonal-link-button.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/elevation/lib/_md-comp-elevation.scss +0 -27
- 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.js +0 -121
- package/fab/lib/fab-shared.js.map +0 -1
- package/focus/lib/_md-comp-focus-ring.scss +0 -30
- package/iconbutton/filled-icon-button-toggle.d.ts +0 -31
- package/iconbutton/filled-icon-button-toggle.js +0 -40
- package/iconbutton/filled-icon-button-toggle.js.map +0 -1
- package/iconbutton/filled-link-icon-button.d.ts +0 -31
- package/iconbutton/filled-link-icon-button.js +0 -39
- package/iconbutton/filled-link-icon-button.js.map +0 -1
- package/iconbutton/filled-tonal-icon-button-toggle.d.ts +0 -31
- package/iconbutton/filled-tonal-icon-button-toggle.js +0 -40
- package/iconbutton/filled-tonal-icon-button-toggle.js.map +0 -1
- package/iconbutton/filled-tonal-link-icon-button.d.ts +0 -31
- package/iconbutton/filled-tonal-link-icon-button.js +0 -39
- package/iconbutton/filled-tonal-link-icon-button.js.map +0 -1
- package/iconbutton/lib/icon-button-toggle.d.ts +0 -34
- package/iconbutton/lib/icon-button-toggle.js +0 -87
- package/iconbutton/lib/icon-button-toggle.js.map +0 -1
- package/iconbutton/lib/link-icon-button.d.ts +0 -23
- package/iconbutton/lib/link-icon-button.js +0 -58
- package/iconbutton/lib/link-icon-button.js.map +0 -1
- package/iconbutton/outlined-icon-button-toggle.d.ts +0 -31
- package/iconbutton/outlined-icon-button-toggle.js +0 -39
- package/iconbutton/outlined-icon-button-toggle.js.map +0 -1
- package/iconbutton/outlined-link-icon-button.d.ts +0 -31
- package/iconbutton/outlined-link-icon-button.js +0 -39
- package/iconbutton/outlined-link-icon-button.js.map +0 -1
- package/iconbutton/standard-icon-button-toggle.d.ts +0 -31
- package/iconbutton/standard-icon-button-toggle.js +0 -39
- package/iconbutton/standard-icon-button-toggle.js.map +0 -1
- package/iconbutton/standard-link-icon-button.d.ts +0 -31
- package/iconbutton/standard-link-icon-button.js +0 -39
- package/iconbutton/standard-link-icon-button.js.map +0 -1
- package/slider/lib/_tokens.scss +0 -60
- /package/{fab/lib/fab-extended-styles.css.d.ts → chips/lib/filter-styles.css.d.ts} +0 -0
- /package/{fab/lib/fab-shared-styles.css.d.ts → circularprogress/lib/circular-progress-styles.css.d.ts} +0 -0
- /package/{tokens/v0_161/index.test.css.d.ts → fab/lib/fab-branded-styles.css.d.ts} +0 -0
- /package/{tokens/v0_161/lib.test.css.d.ts → fab/lib/forced-colors-styles.css.d.ts} +0 -0
- /package/tokens/{v0_161 → v0_172}/_index.scss +0 -0
- /package/tokens/{v0_161 → v0_172}/index.test.css.js +0 -0
- /package/tokens/{v0_161 → v0_172}/index.test.css.js.map +0 -0
- /package/tokens/{v0_161 → v0_172}/index.test.scss +0 -0
- /package/tokens/{v0_161 → v0_172}/lib.test.css.js +0 -0
- /package/tokens/{v0_161 → v0_172}/lib.test.css.js.map +0 -0
- /package/tokens/{v0_161 → v0_172}/lib.test.scss +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-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb,
|
|
7
|
+
export const styles = css `:host{--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-icon-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-focus-state-layer-color: var(--md-filled-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-unselected-focus-icon-color: var(--md-filled-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-focus-state-layer-color: var(--md-filled-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-icon-color: var(--md-filled-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-state-layer-color: var(--md-filled-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-icon-color: var(--md-filled-icon-button-toggle-unselected-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-icon-color: var(--md-filled-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--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)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled{--md-ripple-focus-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=filled-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-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-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb,
|
|
1
|
+
{"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-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-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-size: var(--md-filled-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-color: var(--md-filled-icon-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_focus-state-layer-opacity: var(--md-filled-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-focus-state-layer-color: var(--md-filled-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-unselected-focus-icon-color: var(--md-filled-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-focus-state-layer-color: var(--md-filled-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-icon-color: var(--md-filled-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-hover-state-layer-color: var(--md-filled-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-icon-color: var(--md-filled-icon-button-toggle-unselected-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-icon-color: var(--md-filled-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--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)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled{--md-ripple-focus-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-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{--_container-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-size: var(--md-filled-tonal-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb,
|
|
7
|
+
export const styles = css `:host{--_container-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-size: var(--md-filled-tonal-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-color: var(--md-filled-tonal-icon-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-opacity: var(--md-filled-tonal-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-unselected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--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)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled-tonal{--md-ripple-focus-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-tonal-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=filled-tonal-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filled-tonal-styles.css.js","sourceRoot":"","sources":["filled-tonal-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-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-size: var(--md-filled-tonal-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb,
|
|
1
|
+
{"version":3,"file":"filled-tonal-styles.css.js","sourceRoot":"","sources":["filled-tonal-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-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, var(--md-filled-tonal-icon-button-container-shape, 9999px));--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-size: var(--md-filled-tonal-icon-button-container-size, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.12));--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-color: var(--md-filled-tonal-icon-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-state-layer-opacity: var(--md-filled-tonal-icon-button-focus-state-layer-opacity, 0.12);--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-unselected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-focus-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-unselected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.md3-icon-button{background-color:var(--_container-color);color:var(--_icon-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--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)}.md3-icon-button:hover{color:var(--_hover-icon-color)}.md3-icon-button:focus{color:var(--_focus-icon-color)}.md3-icon-button:active{color:var(--_pressed-icon-color)}.md3-icon-button:disabled{background-color:var(--_disabled-container-color);color:var(--_disabled-icon-color)}.md3-icon-button--toggle-filled-tonal{--md-ripple-focus-color:var(--_toggle-unselected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-unselected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-unselected-pressed-state-layer-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled){background-color:var(--_unselected-container-color);color:var(--_toggle-unselected-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):hover{color:var(--_toggle-unselected-hover-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):focus{color:var(--_toggle-unselected-focus-icon-color)}.md3-icon-button--toggle-filled-tonal:not(:disabled):active{color:var(--_toggle-unselected-pressed-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_toggle-selected-focus-state-layer-color);--md-ripple-hover-color:var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color:var(--_toggle-selected-pressed-state-layer-color)}.md3-icon-button--selected:not(:disabled){background-color:var(--_selected-container-color);color:var(--_toggle-selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}/*# sourceMappingURL=filled-tonal-styles.css.map */\n`;\n "]}
|
|
@@ -9,7 +9,6 @@ import '../../ripple/ripple.js';
|
|
|
9
9
|
import { LitElement, TemplateResult } from 'lit';
|
|
10
10
|
import { ClassInfo } from 'lit/directives/class-map.js';
|
|
11
11
|
import { MdRipple } from '../../ripple/ripple.js';
|
|
12
|
-
import { ARIAHasPopup } from '../../types/aria.js';
|
|
13
12
|
export declare class IconButton extends LitElement {
|
|
14
13
|
/**
|
|
15
14
|
* Disables the icon button and makes it non-interactive.
|
|
@@ -19,22 +18,50 @@ export declare class IconButton extends LitElement {
|
|
|
19
18
|
* Flips the icon if it is in an RTL context at startup.
|
|
20
19
|
*/
|
|
21
20
|
flipIconInRtl: boolean;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
/**
|
|
22
|
+
* Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
|
|
23
|
+
*/
|
|
24
|
+
href: string;
|
|
25
|
+
/**
|
|
26
|
+
* Sets the underlying `HTMLAnchorElement`'s `target` attribute.
|
|
27
|
+
*/
|
|
28
|
+
target: string;
|
|
29
|
+
/**
|
|
30
|
+
* The `aria-label` of the button when the button is toggleable and selected.
|
|
31
|
+
*/
|
|
32
|
+
selectedAriaLabel: string;
|
|
33
|
+
/**
|
|
34
|
+
* When true, the button will toggle between selected and unselected
|
|
35
|
+
* states
|
|
36
|
+
*/
|
|
37
|
+
toggle: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Sets the selected state. When false, displays the default icon. When true,
|
|
40
|
+
* displays the `selectedIcon`, or the default icon If no `selectedIcon` is
|
|
41
|
+
* provided.
|
|
42
|
+
*/
|
|
43
|
+
selected: boolean;
|
|
25
44
|
protected buttonElement: HTMLElement;
|
|
26
45
|
protected ripple: Promise<MdRipple | null>;
|
|
27
46
|
protected showFocusRing: boolean;
|
|
28
47
|
protected showRipple: boolean;
|
|
48
|
+
protected flipIcon: boolean;
|
|
29
49
|
protected getRipple: () => Promise<MdRipple>;
|
|
30
50
|
protected readonly renderRipple: () => TemplateResult<1>;
|
|
51
|
+
/**
|
|
52
|
+
* Link buttons cannot be disabled.
|
|
53
|
+
*/
|
|
54
|
+
willUpdate(): void;
|
|
31
55
|
protected render(): TemplateResult;
|
|
56
|
+
protected renderLink(): TemplateResult<1>;
|
|
32
57
|
protected getRenderClasses(): ClassInfo;
|
|
33
58
|
protected renderIcon(): TemplateResult;
|
|
59
|
+
protected renderSelectedIcon(): TemplateResult<1>;
|
|
34
60
|
protected renderTouchTarget(): TemplateResult;
|
|
35
61
|
protected renderFocusRing(): TemplateResult;
|
|
36
62
|
connectedCallback(): void;
|
|
37
63
|
handlePointerDown(): void;
|
|
38
64
|
protected handleFocus(): void;
|
|
39
65
|
protected handleBlur(): void;
|
|
66
|
+
protected handleClick(): void;
|
|
40
67
|
}
|
|
@@ -3,19 +3,18 @@
|
|
|
3
3
|
* Copyright 2018 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
// tslint:disable:no-new-decorators
|
|
6
|
+
var _a;
|
|
7
|
+
import { __decorate } from "tslib";
|
|
9
8
|
import '../../focus/focus-ring.js';
|
|
10
9
|
import '../../icon/icon.js';
|
|
11
10
|
import '../../ripple/ripple.js';
|
|
12
|
-
import { html, LitElement } from 'lit';
|
|
11
|
+
import { html, LitElement, nothing } from 'lit';
|
|
13
12
|
import { property, query, queryAsync, state } from 'lit/decorators.js';
|
|
14
13
|
import { classMap } from 'lit/directives/class-map.js';
|
|
15
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
16
14
|
import { when } from 'lit/directives/when.js';
|
|
15
|
+
import { html as staticHtml, literal } from 'lit/static-html.js';
|
|
16
|
+
import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
|
|
17
17
|
import { isRtl } from '../../controller/is-rtl.js';
|
|
18
|
-
import { ariaProperty } from '../../decorators/aria-property.js';
|
|
19
18
|
import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
|
|
20
19
|
import { ripple } from '../../ripple/directive.js';
|
|
21
20
|
// tslint:disable-next-line:enforce-comments-on-exported-symbols
|
|
@@ -30,41 +29,98 @@ export class IconButton extends LitElement {
|
|
|
30
29
|
* Flips the icon if it is in an RTL context at startup.
|
|
31
30
|
*/
|
|
32
31
|
this.flipIconInRtl = false;
|
|
33
|
-
|
|
32
|
+
/**
|
|
33
|
+
* Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
|
|
34
|
+
*/
|
|
35
|
+
this.href = '';
|
|
36
|
+
/**
|
|
37
|
+
* Sets the underlying `HTMLAnchorElement`'s `target` attribute.
|
|
38
|
+
*/
|
|
39
|
+
this.target = '';
|
|
40
|
+
/**
|
|
41
|
+
* When true, the button will toggle between selected and unselected
|
|
42
|
+
* states
|
|
43
|
+
*/
|
|
44
|
+
this.toggle = false;
|
|
45
|
+
/**
|
|
46
|
+
* Sets the selected state. When false, displays the default icon. When true,
|
|
47
|
+
* displays the `selectedIcon`, or the default icon If no `selectedIcon` is
|
|
48
|
+
* provided.
|
|
49
|
+
*/
|
|
50
|
+
this.selected = false;
|
|
34
51
|
this.showFocusRing = false;
|
|
35
52
|
this.showRipple = false;
|
|
53
|
+
this.flipIcon = isRtl(this, this.flipIconInRtl);
|
|
36
54
|
this.getRipple = () => {
|
|
37
55
|
this.showRipple = true;
|
|
38
56
|
return this.ripple;
|
|
39
57
|
};
|
|
40
58
|
this.renderRipple = () => {
|
|
41
|
-
return html `<md-ripple ?disabled="${this.disabled}"></md-ripple>`;
|
|
59
|
+
return html `<md-ripple ?disabled="${!this.href && this.disabled}"></md-ripple>`;
|
|
42
60
|
};
|
|
43
61
|
}
|
|
62
|
+
/**
|
|
63
|
+
* Link buttons cannot be disabled.
|
|
64
|
+
*/
|
|
65
|
+
willUpdate() {
|
|
66
|
+
if (this.href) {
|
|
67
|
+
this.disabled = false;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
44
70
|
render() {
|
|
45
|
-
|
|
71
|
+
const tag = this.href ? literal `div` : literal `button`;
|
|
72
|
+
// Needed for closure conformance
|
|
73
|
+
const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
|
|
74
|
+
const hasToggledAriaLabel = ariaLabel && this.selectedAriaLabel;
|
|
75
|
+
const ariaPressedValue = hasToggledAriaLabel ? nothing : this.selected;
|
|
76
|
+
let ariaLabelValue = nothing;
|
|
77
|
+
if (!this.href) {
|
|
78
|
+
ariaLabelValue = (hasToggledAriaLabel && this.selected) ?
|
|
79
|
+
this.selectedAriaLabel :
|
|
80
|
+
ariaLabel;
|
|
81
|
+
}
|
|
82
|
+
return staticHtml `<${tag}
|
|
46
83
|
class="md3-icon-button ${classMap(this.getRenderClasses())}"
|
|
47
|
-
aria-label="${
|
|
48
|
-
aria-haspopup="${
|
|
49
|
-
|
|
84
|
+
aria-label="${ariaLabelValue || nothing}"
|
|
85
|
+
aria-haspopup="${!this.href && ariaHasPopup || nothing}"
|
|
86
|
+
aria-expanded="${!this.href && ariaExpanded || nothing}"
|
|
87
|
+
aria-pressed="${ariaPressedValue}"
|
|
88
|
+
?disabled="${!this.href && this.disabled}"
|
|
50
89
|
@focus="${this.handleFocus}"
|
|
51
90
|
@blur="${this.handleBlur}"
|
|
52
91
|
@pointerdown="${this.handlePointerDown}"
|
|
92
|
+
@click="${this.handleClick}"
|
|
53
93
|
${ripple(this.getRipple)}>
|
|
54
94
|
${this.renderFocusRing()}
|
|
55
95
|
${when(this.showRipple, this.renderRipple)}
|
|
56
|
-
${this.renderIcon()}
|
|
96
|
+
${!this.selected ? this.renderIcon() : nothing}
|
|
97
|
+
${this.selected ? this.renderSelectedIcon() : nothing}
|
|
57
98
|
${this.renderTouchTarget()}
|
|
58
|
-
|
|
99
|
+
${this.href && this.renderLink()}
|
|
100
|
+
</${tag}>`;
|
|
101
|
+
}
|
|
102
|
+
renderLink() {
|
|
103
|
+
// Needed for closure conformance
|
|
104
|
+
const { ariaLabel } = this;
|
|
105
|
+
return html `<a class="md3-icon-button__link" href="${this.href}"
|
|
106
|
+
target="${this.target || nothing}"
|
|
107
|
+
@focus="${this.handleFocus}"
|
|
108
|
+
@blur="${this.handleBlur}"
|
|
109
|
+
aria-label="${ariaLabel || nothing}"></a>`;
|
|
59
110
|
}
|
|
60
111
|
getRenderClasses() {
|
|
61
112
|
return {
|
|
62
113
|
'md3-icon-button--flip-icon': this.flipIcon,
|
|
114
|
+
'md3-icon-button--selected': this.toggle && this.selected,
|
|
63
115
|
};
|
|
64
116
|
}
|
|
65
117
|
renderIcon() {
|
|
66
118
|
return html `<md-icon class="md3-icon-button__icon"><slot></slot></md-icon>`;
|
|
67
119
|
}
|
|
120
|
+
renderSelectedIcon() {
|
|
121
|
+
// Use default slot as fallback to not require specifying multiple icons
|
|
122
|
+
return html `<md-icon class="md3-icon-button__icon md3-icon-button__icon--selected"><slot name="selectedIcon"><slot></slot></slot></md-icon>`;
|
|
123
|
+
}
|
|
68
124
|
renderTouchTarget() {
|
|
69
125
|
return html `<span class="md3-icon-button__touch"></span>`;
|
|
70
126
|
}
|
|
@@ -85,43 +141,55 @@ export class IconButton extends LitElement {
|
|
|
85
141
|
handleBlur() {
|
|
86
142
|
this.showFocusRing = false;
|
|
87
143
|
}
|
|
144
|
+
handleClick() {
|
|
145
|
+
if (!this.toggle || this.disabled) {
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
this.selected = !this.selected;
|
|
149
|
+
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
|
150
|
+
// Bubbles but does not compose to mimic native browser <input> & <select>
|
|
151
|
+
// Additionally, native change event is not an InputEvent.
|
|
152
|
+
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
153
|
+
}
|
|
88
154
|
}
|
|
155
|
+
_a = IconButton;
|
|
156
|
+
(() => {
|
|
157
|
+
requestUpdateOnAriaChange(_a);
|
|
158
|
+
})();
|
|
89
159
|
__decorate([
|
|
90
|
-
property({ type: Boolean, reflect: true })
|
|
91
|
-
__metadata("design:type", Object)
|
|
160
|
+
property({ type: Boolean, reflect: true })
|
|
92
161
|
], IconButton.prototype, "disabled", void 0);
|
|
93
162
|
__decorate([
|
|
94
|
-
property({ type: Boolean })
|
|
95
|
-
__metadata("design:type", Object)
|
|
163
|
+
property({ type: Boolean })
|
|
96
164
|
], IconButton.prototype, "flipIconInRtl", void 0);
|
|
97
165
|
__decorate([
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
], IconButton.prototype, "flipIcon", void 0);
|
|
166
|
+
property()
|
|
167
|
+
], IconButton.prototype, "href", void 0);
|
|
101
168
|
__decorate([
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
__metadata("design:type", String)
|
|
105
|
-
], IconButton.prototype, "ariaLabel", void 0);
|
|
169
|
+
property()
|
|
170
|
+
], IconButton.prototype, "target", void 0);
|
|
106
171
|
__decorate([
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
__metadata("design:type", String)
|
|
110
|
-
], IconButton.prototype, "ariaHasPopup", void 0);
|
|
172
|
+
property({ attribute: 'selected-aria-label', reflect: true })
|
|
173
|
+
], IconButton.prototype, "selectedAriaLabel", void 0);
|
|
111
174
|
__decorate([
|
|
112
|
-
|
|
113
|
-
|
|
175
|
+
property({ type: Boolean })
|
|
176
|
+
], IconButton.prototype, "toggle", void 0);
|
|
177
|
+
__decorate([
|
|
178
|
+
property({ type: Boolean, reflect: true })
|
|
179
|
+
], IconButton.prototype, "selected", void 0);
|
|
180
|
+
__decorate([
|
|
181
|
+
query('button')
|
|
114
182
|
], IconButton.prototype, "buttonElement", void 0);
|
|
115
183
|
__decorate([
|
|
116
|
-
queryAsync('md-ripple')
|
|
117
|
-
__metadata("design:type", Promise)
|
|
184
|
+
queryAsync('md-ripple')
|
|
118
185
|
], IconButton.prototype, "ripple", void 0);
|
|
119
186
|
__decorate([
|
|
120
|
-
state()
|
|
121
|
-
__metadata("design:type", Object)
|
|
187
|
+
state()
|
|
122
188
|
], IconButton.prototype, "showFocusRing", void 0);
|
|
123
189
|
__decorate([
|
|
124
|
-
state()
|
|
125
|
-
__metadata("design:type", Object)
|
|
190
|
+
state()
|
|
126
191
|
], IconButton.prototype, "showRipple", void 0);
|
|
192
|
+
__decorate([
|
|
193
|
+
state()
|
|
194
|
+
], IconButton.prototype, "flipIcon", void 0);
|
|
127
195
|
//# sourceMappingURL=icon-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// This is required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../icon/icon.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {isRtl} from '../../controller/is-rtl.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAHasPopup} from '../../types/aria.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class IconButton extends LitElement {\n /**\n * Disables the icon button and makes it non-interactive.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * Flips the icon if it is in an RTL context at startup.\n */\n @property({type: Boolean}) flipIconInRtl = false;\n\n @state() protected flipIcon: boolean = isRtl(this, this.flipIconInRtl);\n\n @ariaProperty\n @property({type: String, attribute: 'data-aria-label'})\n override ariaLabel!: string;\n\n @ariaProperty\n @property({type: String, attribute: 'data-aria-haspopup'})\n override ariaHasPopup!: ARIAHasPopup;\n\n @query('button') protected buttonElement!: HTMLElement;\n\n @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n @state() protected showFocusRing = false;\n\n @state() protected showRipple = false;\n\n protected getRipple = () => {\n this.showRipple = true;\n return this.ripple;\n };\n\n protected readonly renderRipple = () => {\n return html`<md-ripple ?disabled=\"${this.disabled}\"></md-ripple>`;\n };\n\n protected override render(): TemplateResult {\n return html`<button\n class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n aria-label=\"${ifDefined(this.ariaLabel)}\"\n aria-haspopup=\"${ifDefined(this.ariaHasPopup)}\"\n ?disabled=\"${this.disabled}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=\"${this.handlePointerDown}\"\n ${ripple(this.getRipple)}>\n ${this.renderFocusRing()}\n ${when(this.showRipple, this.renderRipple)}\n ${this.renderIcon()}\n ${this.renderTouchTarget()}\n </button>`;\n }\n\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-icon-button--flip-icon': this.flipIcon,\n };\n }\n\n protected renderIcon(): TemplateResult {\n return html`<md-icon class=\"md3-icon-button__icon\"><slot></slot></md-icon>`;\n }\n\n protected renderTouchTarget(): TemplateResult {\n return html`<span class=\"md3-icon-button__touch\"></span>`;\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring .visible=\"${\n this.showFocusRing}\"></md-focus-ring>`;\n }\n\n override connectedCallback() {\n this.flipIcon = isRtl(this, this.flipIconInRtl);\n super.connectedCallback();\n }\n\n handlePointerDown() {\n pointerPress();\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleBlur() {\n this.showFocusRing = false;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../icon/icon.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {isRtl} from '../../controller/is-rtl.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\ntype LinkTarget = '_blank'|'_parent'|'_self'|'_top';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class IconButton extends LitElement {\n static {\n requestUpdateOnAriaChange(this);\n }\n\n /**\n * Disables the icon button and makes it non-interactive.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * Flips the icon if it is in an RTL context at startup.\n */\n @property({type: Boolean}) flipIconInRtl = false;\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n */\n @property() href = '';\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n */\n @property() target = '';\n\n /**\n * The `aria-label` of the button when the button is toggleable and selected.\n */\n @property({attribute: 'selected-aria-label', reflect: true})\n selectedAriaLabel!: string;\n\n /**\n * When true, the button will toggle between selected and unselected\n * states\n */\n @property({type: Boolean}) toggle = false;\n\n /**\n * Sets the selected state. When false, displays the default icon. When true,\n * displays the `selectedIcon`, or the default icon If no `selectedIcon` is\n * provided.\n */\n @property({type: Boolean, reflect: true}) selected = false;\n\n @query('button') protected buttonElement!: HTMLElement;\n\n @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n @state() protected showFocusRing = false;\n\n @state() protected showRipple = false;\n\n @state() protected flipIcon: boolean = isRtl(this, this.flipIconInRtl);\n\n protected getRipple = () => {\n this.showRipple = true;\n return this.ripple;\n };\n\n protected readonly renderRipple = () => {\n return html`<md-ripple ?disabled=\"${\n !this.href && this.disabled}\"></md-ripple>`;\n };\n\n /**\n * Link buttons cannot be disabled.\n */\n override willUpdate() {\n if (this.href) {\n this.disabled = false;\n }\n }\n\n protected override render(): TemplateResult {\n const tag = this.href ? literal`div` : literal`button`;\n // Needed for closure conformance\n const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n const hasToggledAriaLabel = ariaLabel && this.selectedAriaLabel;\n const ariaPressedValue = hasToggledAriaLabel ? nothing : this.selected;\n let ariaLabelValue: string|null|typeof nothing = nothing;\n if (!this.href) {\n ariaLabelValue = (hasToggledAriaLabel && this.selected) ?\n this.selectedAriaLabel :\n ariaLabel;\n }\n return staticHtml`<${tag}\n class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n aria-label=\"${ariaLabelValue || nothing}\"\n aria-haspopup=\"${!this.href && ariaHasPopup || nothing}\"\n aria-expanded=\"${!this.href && ariaExpanded || nothing}\"\n aria-pressed=\"${ariaPressedValue}\"\n ?disabled=\"${!this.href && this.disabled}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n @pointerdown=\"${this.handlePointerDown}\"\n @click=\"${this.handleClick}\"\n ${ripple(this.getRipple)}>\n ${this.renderFocusRing()}\n ${when(this.showRipple, this.renderRipple)}\n ${!this.selected ? this.renderIcon() : nothing}\n ${this.selected ? this.renderSelectedIcon() : nothing}\n ${this.renderTouchTarget()}\n ${this.href && this.renderLink()}\n </${tag}>`;\n }\n\n protected renderLink() {\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`<a class=\"md3-icon-button__link\" href=\"${this.href}\"\n target=\"${this.target as LinkTarget || nothing}\"\n @focus=\"${this.handleFocus}\"\n @blur=\"${this.handleBlur}\"\n aria-label=\"${ariaLabel || nothing}\"></a>`;\n }\n\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-icon-button--flip-icon': this.flipIcon,\n 'md3-icon-button--selected': this.toggle && this.selected,\n };\n }\n\n protected renderIcon(): TemplateResult {\n return html`<md-icon class=\"md3-icon-button__icon\"><slot></slot></md-icon>`;\n }\n\n protected renderSelectedIcon() {\n // Use default slot as fallback to not require specifying multiple icons\n return html`<md-icon class=\"md3-icon-button__icon md3-icon-button__icon--selected\"><slot name=\"selectedIcon\"><slot></slot></slot></md-icon>`;\n }\n\n protected renderTouchTarget(): TemplateResult {\n return html`<span class=\"md3-icon-button__touch\"></span>`;\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring .visible=\"${\n this.showFocusRing}\"></md-focus-ring>`;\n }\n\n override connectedCallback() {\n this.flipIcon = isRtl(this, this.flipIconInRtl);\n super.connectedCallback();\n }\n\n handlePointerDown() {\n pointerPress();\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleFocus() {\n this.showFocusRing = shouldShowStrongFocus();\n }\n\n protected handleBlur() {\n this.showFocusRing = false;\n }\n\n protected handleClick() {\n if (!this.toggle || this.disabled) {\n return;\n }\n\n this.selected = !this.selected;\n this.dispatchEvent(\n new InputEvent('input', {bubbles: true, composed: true}));\n // Bubbles but does not compose to mimic native browser <input> & <select>\n // Additionally, native change event is not an InputEvent.\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n}\n"]}
|
|
@@ -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-start-start: var(--md-outlined-icon-button-container-shape-start-start, var(--md-outlined-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-outlined-icon-button-container-shape-start-end, var(--md-outlined-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-outlined-icon-button-container-shape-end-end, var(--md-outlined-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-outlined-icon-button-container-shape-end-start, 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,
|
|
7
|
+
export const styles = css `:host{--_container-shape-start-start: var(--md-outlined-icon-button-container-shape-start-start, var(--md-outlined-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-outlined-icon-button-container-shape-start-end, var(--md-outlined-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-outlined-icon-button-container-shape-end-end, var(--md-outlined-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-outlined-icon-button-container-shape-end-start, 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))}.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-start-start: var(--md-outlined-icon-button-container-shape-start-start, var(--md-outlined-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-outlined-icon-button-container-shape-start-end, var(--md-outlined-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-outlined-icon-button-container-shape-end-end, var(--md-outlined-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-outlined-icon-button-container-shape-end-start, 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,
|
|
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-start-start: var(--md-outlined-icon-button-container-shape-start-start, var(--md-outlined-icon-button-container-shape, 9999px));--_container-shape-start-end: var(--md-outlined-icon-button-container-shape-start-end, var(--md-outlined-icon-button-container-shape, 9999px));--_container-shape-end-end: var(--md-outlined-icon-button-container-shape-end-end, var(--md-outlined-icon-button-container-shape, 9999px));--_container-shape-end-start: var(--md-outlined-icon-button-container-shape-end-start, 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))}.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{--_state-layer-shape-start-start: var(--md-icon-button-state-layer-shape-start-start, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-start-end: var(--md-icon-button-state-layer-shape-start-end, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-end-end: var(--md-icon-button-state-layer-shape-end-end, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-end-start: var(--md-icon-button-state-layer-shape-end-start, var(--md-icon-button-state-layer-shape, 9999px));--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb,
|
|
7
|
+
export const styles = css `:host{--_state-layer-shape-start-start: var(--md-icon-button-state-layer-shape-start-start, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-start-end: var(--md-icon-button-state-layer-shape-start-end, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-end-end: var(--md-icon-button-state-layer-shape-end-end, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-end-start: var(--md-icon-button-state-layer-shape-end-start, var(--md-icon-button-state-layer-shape, 9999px));--_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-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-start-start:var(--md-focus-ring-shape, var(--_state-layer-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_state-layer-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_state-layer-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_state-layer-shape-end-start))}.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-start-start) var(--_state-layer-shape-start-end) var(--_state-layer-shape-end-end) var(--_state-layer-shape-end-start)}.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{--_state-layer-shape-start-start: var(--md-icon-button-state-layer-shape-start-start, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-start-end: var(--md-icon-button-state-layer-shape-start-end, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-end-end: var(--md-icon-button-state-layer-shape-end-end, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-end-start: var(--md-icon-button-state-layer-shape-end-start, var(--md-icon-button-state-layer-shape, 9999px));--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb,
|
|
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{--_state-layer-shape-start-start: var(--md-icon-button-state-layer-shape-start-start, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-start-end: var(--md-icon-button-state-layer-shape-start-end, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-end-end: var(--md-icon-button-state-layer-shape-end-end, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-end-start: var(--md-icon-button-state-layer-shape-end-start, var(--md-icon-button-state-layer-shape, 9999px));--_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-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-start-start:var(--md-focus-ring-shape, var(--_state-layer-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_state-layer-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_state-layer-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_state-layer-shape-end-start))}.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-start-start) var(--_state-layer-shape-start-end) var(--_state-layer-shape-end-end) var(--_state-layer-shape-end-start)}.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 "]}
|