@material/web 1.0.0-pre.14 → 1.0.0-pre.16
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 +24 -19
- package/all.d.ts +4 -8
- package/all.js +4 -8
- package/all.js.map +1 -1
- package/button/{_tonal-button.scss → _filled-tonal-button.scss} +1 -1
- package/button/{tonal-button.d.ts → filled-tonal-button.d.ts} +3 -3
- package/button/{tonal-button.js → filled-tonal-button.js} +9 -9
- package/button/filled-tonal-button.js.map +1 -0
- package/button/internal/_filled-button.scss +0 -1
- package/button/internal/{_tonal-button.scss → _filled-tonal-button.scss} +7 -7
- package/button/internal/_outlined-button.scss +6 -0
- package/button/internal/_shared.scss +19 -8
- package/button/internal/_touch-target.scss +5 -1
- package/button/internal/button.d.ts +19 -22
- package/button/internal/button.js +48 -79
- package/button/internal/button.js.map +1 -1
- package/button/internal/elevated-styles.css.js +1 -1
- package/button/internal/elevated-styles.css.js.map +1 -1
- package/button/internal/filled-styles.css.js +1 -1
- package/button/internal/filled-styles.css.js.map +1 -1
- package/button/internal/{tonal-button.d.ts → filled-tonal-button.d.ts} +2 -2
- package/button/internal/{tonal-button.js → filled-tonal-button.js} +3 -3
- package/button/internal/filled-tonal-button.js.map +1 -0
- package/button/internal/filled-tonal-styles.css.js +9 -0
- package/button/internal/filled-tonal-styles.css.js.map +1 -0
- package/button/internal/{tonal-styles.scss → filled-tonal-styles.scss} +2 -2
- package/button/internal/outlined-styles.css.js +1 -1
- package/button/internal/outlined-styles.css.js.map +1 -1
- package/button/internal/shared-elevation-styles.css.js +1 -1
- package/button/internal/shared-elevation-styles.css.js.map +1 -1
- package/button/internal/shared-styles.css.js +1 -1
- package/button/internal/shared-styles.css.js.map +1 -1
- package/button/internal/text-styles.css.js +1 -1
- package/button/internal/text-styles.css.js.map +1 -1
- package/checkbox/internal/_checkbox.scss +23 -78
- package/checkbox/internal/checkbox-styles.css.js +1 -1
- package/checkbox/internal/checkbox-styles.css.js.map +1 -1
- package/checkbox/internal/checkbox.d.ts +78 -7
- package/checkbox/internal/checkbox.js +136 -23
- package/checkbox/internal/checkbox.js.map +1 -1
- package/chips/assist-chip.js +1 -2
- package/chips/assist-chip.js.map +1 -1
- package/chips/filter-chip.js +1 -3
- package/chips/filter-chip.js.map +1 -1
- package/chips/input-chip.js +1 -5
- package/chips/input-chip.js.map +1 -1
- package/chips/internal/_assist-chip.scss +6 -0
- package/chips/internal/_elevated.scss +1 -1
- package/chips/internal/_filter-chip.scss +6 -0
- package/chips/internal/_input-chip.scss +32 -0
- package/chips/internal/_selectable.scss +17 -13
- package/chips/internal/_shared.scss +25 -10
- package/chips/internal/_suggestion-chip.scss +6 -0
- package/chips/internal/_trailing-icon.scss +24 -24
- package/chips/internal/assist-styles.css.js +1 -1
- package/chips/internal/assist-styles.css.js.map +1 -1
- package/chips/internal/chip-set.js +1 -3
- package/chips/internal/chip-set.js.map +1 -1
- package/chips/internal/chip.js +1 -3
- package/chips/internal/chip.js.map +1 -1
- package/chips/internal/elevated-styles.css.js +1 -1
- package/chips/internal/elevated-styles.css.js.map +1 -1
- package/chips/internal/filter-chip.d.ts +1 -0
- package/chips/internal/filter-chip.js +12 -6
- package/chips/internal/filter-chip.js.map +1 -1
- package/chips/internal/filter-styles.css.js +1 -1
- package/chips/internal/filter-styles.css.js.map +1 -1
- package/chips/internal/input-styles.css.js +1 -1
- package/chips/internal/input-styles.css.js.map +1 -1
- package/chips/internal/selectable-styles.css.js +1 -1
- package/chips/internal/selectable-styles.css.js.map +1 -1
- package/chips/internal/shared-styles.css.js +1 -1
- package/chips/internal/shared-styles.css.js.map +1 -1
- package/chips/internal/suggestion-styles.css.js +1 -1
- package/chips/internal/suggestion-styles.css.js.map +1 -1
- package/chips/internal/trailing-icon-styles.css.js +1 -1
- package/chips/internal/trailing-icon-styles.css.js.map +1 -1
- package/chips/suggestion-chip.js +1 -2
- package/chips/suggestion-chip.js.map +1 -1
- package/common.d.ts +2 -6
- package/common.js +2 -6
- package/common.js.map +1 -1
- package/dialog/harness.d.ts +1 -6
- package/dialog/harness.js +2 -43
- package/dialog/harness.js.map +1 -1
- package/dialog/internal/_dialog.scss +165 -281
- package/dialog/internal/animations.d.ts +47 -0
- package/dialog/internal/animations.js +117 -0
- package/dialog/internal/animations.js.map +1 -0
- package/dialog/internal/dialog-styles.css.js +1 -1
- package/dialog/internal/dialog-styles.css.js.map +1 -1
- package/dialog/internal/dialog.d.ts +76 -169
- package/dialog/internal/dialog.js +251 -475
- package/dialog/internal/dialog.js.map +1 -1
- package/elevation/internal/_elevation.scss +14 -7
- package/elevation/internal/elevation-styles.css.js +1 -1
- package/elevation/internal/elevation-styles.css.js.map +1 -1
- package/fab/branded-fab.d.ts +0 -1
- package/fab/internal/_fab.scss +15 -10
- package/fab/internal/_shared.scss +16 -1
- package/fab/internal/fab-styles.css.js +1 -1
- package/fab/internal/fab-styles.css.js.map +1 -1
- package/fab/internal/fab.d.ts +0 -1
- package/fab/internal/shared-styles.css.js +1 -1
- package/fab/internal/shared-styles.css.js.map +1 -1
- package/fab/internal/shared.d.ts +0 -13
- package/fab/internal/shared.js +5 -31
- package/fab/internal/shared.js.map +1 -1
- package/field/internal/filled-styles.css.js +1 -1
- package/field/internal/filled-styles.css.js.map +1 -1
- package/field/internal/outlined-styles.css.js +1 -1
- package/field/internal/outlined-styles.css.js.map +1 -1
- package/focus/internal/_focus-ring.scss +52 -48
- package/focus/internal/focus-ring-styles.css.js +1 -1
- package/focus/internal/focus-ring-styles.css.js.map +1 -1
- package/focus/internal/focus-ring.d.ts +2 -1
- package/focus/internal/focus-ring.js +10 -0
- package/focus/internal/focus-ring.js.map +1 -1
- package/icon/internal/_icon.scss +26 -20
- package/icon/internal/icon-styles.css.js +1 -1
- package/icon/internal/icon-styles.css.js.map +1 -1
- package/icon/internal/icon.d.ts +1 -0
- package/icon/internal/icon.js +9 -0
- package/icon/internal/icon.js.map +1 -1
- package/iconbutton/{_standard-icon-button.scss → _icon-button.scss} +1 -1
- package/iconbutton/{standard-icon-button.d.ts → icon-button.d.ts} +2 -2
- package/iconbutton/{standard-icon-button.js → icon-button.js} +7 -7
- package/iconbutton/icon-button.js.map +1 -0
- package/iconbutton/internal/_filled-icon-button.scss +8 -6
- package/iconbutton/internal/_filled-tonal-icon-button.scss +8 -6
- package/iconbutton/internal/{_standard-icon-button.scss → _icon-button.scss} +12 -8
- package/iconbutton/internal/_outlined-icon-button.scss +14 -14
- package/iconbutton/internal/_shared.scss +15 -9
- package/iconbutton/internal/filled-styles.css.js +1 -1
- package/iconbutton/internal/filled-styles.css.js.map +1 -1
- package/iconbutton/internal/filled-tonal-styles.css.js +1 -1
- package/iconbutton/internal/filled-tonal-styles.css.js.map +1 -1
- package/iconbutton/internal/icon-button.d.ts +25 -3
- package/iconbutton/internal/icon-button.js +45 -6
- package/iconbutton/internal/icon-button.js.map +1 -1
- package/iconbutton/internal/outlined-styles.css.js +1 -1
- package/iconbutton/internal/outlined-styles.css.js.map +1 -1
- package/iconbutton/internal/shared-styles.css.js +1 -1
- package/iconbutton/internal/shared-styles.css.js.map +1 -1
- package/iconbutton/internal/standard-styles.css.js +1 -1
- package/iconbutton/internal/standard-styles.css.js.map +1 -1
- package/iconbutton/internal/standard-styles.scss +2 -2
- package/internal/aria/delegate.d.ts +1 -1
- package/internal/aria/delegate.js +1 -1
- package/internal/aria/delegate.js.map +1 -1
- package/internal/controller/element-internals.d.ts +35 -0
- package/internal/controller/element-internals.js +24 -0
- package/internal/controller/element-internals.js.map +1 -0
- package/internal/controller/form-submitter.d.ts +72 -0
- package/internal/controller/form-submitter.js +71 -0
- package/internal/controller/form-submitter.js.map +1 -0
- package/labs/badge/internal/_badge.scss +11 -8
- package/labs/navigationbar/internal/_navigation-bar.scss +11 -9
- package/labs/navigationbar/internal/navigation-bar-styles.css.js +1 -1
- package/labs/navigationbar/internal/navigation-bar-styles.css.js.map +1 -1
- package/labs/navigationbar/internal/navigation-bar.js +1 -3
- package/labs/navigationbar/internal/navigation-bar.js.map +1 -1
- package/labs/navigationdrawer/internal/_navigation-drawer-modal.scss +11 -8
- package/labs/navigationdrawer/internal/_navigation-drawer.scss +11 -8
- package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.css.js +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer-modal-styles.css.js.map +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer-modal.js +1 -3
- package/labs/navigationdrawer/internal/navigation-drawer-modal.js.map +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer-styles.css.js +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer-styles.css.js.map +1 -1
- package/labs/navigationdrawer/internal/navigation-drawer.js +1 -3
- package/labs/navigationdrawer/internal/navigation-drawer.js.map +1 -1
- package/labs/navigationtab/internal/_navigation-tab.scss +10 -10
- package/labs/navigationtab/internal/navigation-tab.js +1 -3
- package/labs/navigationtab/internal/navigation-tab.js.map +1 -1
- package/labs/segmentedbutton/internal/_outlined-segmented-button.scss +1 -3
- package/labs/segmentedbutton/internal/outlined-styles.css.js +1 -1
- package/labs/segmentedbutton/internal/outlined-styles.css.js.map +1 -1
- package/labs/segmentedbutton/internal/segmented-button.js +1 -3
- package/labs/segmentedbutton/internal/segmented-button.js.map +1 -1
- package/labs/segmentedbuttonset/internal/outlined-styles.css.js +1 -1
- package/labs/segmentedbuttonset/internal/outlined-styles.css.js.map +1 -1
- package/labs/segmentedbuttonset/internal/segmented-button-set.js +1 -3
- package/labs/segmentedbuttonset/internal/segmented-button-set.js.map +1 -1
- package/list/internal/_list.scss +6 -2
- package/list/internal/list-styles.css.js +1 -1
- package/list/internal/list-styles.css.js.map +1 -1
- package/list/internal/list.d.ts +2 -2
- package/list/internal/list.js +1 -3
- package/list/internal/list.js.map +1 -1
- package/list/internal/listitem/_list-item.scss +87 -131
- package/list/internal/listitem/forced-colors-styles.css.js +1 -1
- package/list/internal/listitem/forced-colors-styles.css.js.map +1 -1
- package/list/internal/listitem/forced-colors-styles.scss +6 -6
- package/list/internal/listitem/list-item-styles.css.js +1 -1
- package/list/internal/listitem/list-item-styles.css.js.map +1 -1
- package/list/internal/listitem/list-item.d.ts +15 -3
- package/list/internal/listitem/list-item.js +43 -10
- package/list/internal/listitem/list-item.js.map +1 -1
- package/menu/internal/_menu.scss +6 -3
- package/menu/internal/menu-styles.css.js +1 -1
- package/menu/internal/menu-styles.css.js.map +1 -1
- package/menu/internal/menu.js +9 -10
- package/menu/internal/menu.js.map +1 -1
- package/menu/internal/menuitem/_menu-item.scss +8 -5
- package/menu/internal/menuitem/forced-colors-styles.css.js +1 -1
- package/menu/internal/menuitem/forced-colors-styles.css.js.map +1 -1
- package/menu/internal/menuitem/forced-colors-styles.scss +1 -1
- package/menu/internal/menuitem/menu-item-styles.css.js +1 -1
- package/menu/internal/menuitem/menu-item-styles.css.js.map +1 -1
- package/menu/internal/menuitem/menu-item.d.ts +9 -0
- package/menu/internal/menuitem/menu-item.js +18 -4
- package/menu/internal/menuitem/menu-item.js.map +1 -1
- package/menu/internal/shared.d.ts +45 -38
- package/menu/internal/shared.js +29 -40
- package/menu/internal/shared.js.map +1 -1
- package/menu/internal/submenuitem/sub-menu-item.d.ts +22 -12
- package/menu/internal/submenuitem/sub-menu-item.js +39 -24
- package/menu/internal/submenuitem/sub-menu-item.js.map +1 -1
- package/menu/menu-item.d.ts +1 -1
- package/menu/menu-item.js +0 -1
- package/menu/menu-item.js.map +1 -1
- package/menu/menu.d.ts +1 -1
- package/menu/menu.js +0 -1
- package/menu/menu.js.map +1 -1
- package/menu/sub-menu-item.d.ts +1 -1
- package/menu/sub-menu-item.js +0 -1
- package/menu/sub-menu-item.js.map +1 -1
- package/package.json +1 -3
- package/progress/harness.js +2 -4
- package/progress/harness.js.map +1 -1
- package/progress/internal/_circular-progress.scss +4 -4
- package/progress/internal/_linear-progress.scss +93 -132
- package/progress/internal/circular-progress-styles.css.js +1 -1
- package/progress/internal/circular-progress-styles.css.js.map +1 -1
- package/progress/internal/circular-progress.js +1 -1
- package/progress/internal/circular-progress.js.map +1 -1
- package/progress/internal/linear-progress-styles.css.js +1 -1
- package/progress/internal/linear-progress-styles.css.js.map +1 -1
- package/progress/internal/linear-progress.d.ts +0 -11
- package/progress/internal/linear-progress.js +4 -48
- package/progress/internal/linear-progress.js.map +1 -1
- package/progress/internal/progress.js +1 -3
- package/progress/internal/progress.js.map +1 -1
- package/radio/internal/_radio.scss +38 -24
- package/radio/internal/forced-colors-styles.css.js +1 -1
- package/radio/internal/forced-colors-styles.css.js.map +1 -1
- package/radio/internal/forced-colors-styles.scss +4 -4
- package/radio/internal/radio-styles.css.js +1 -1
- package/radio/internal/radio-styles.css.js.map +1 -1
- package/radio/internal/radio.d.ts +1 -1
- package/radio/internal/radio.js +7 -6
- package/radio/internal/radio.js.map +1 -1
- package/ripple/internal/_ripple.scss +1 -1
- package/ripple/internal/ripple-styles.css.js +1 -1
- package/ripple/internal/ripple-styles.css.js.map +1 -1
- package/select/internal/_filled-select.scss +2 -3
- package/select/internal/_outlined-select.scss +2 -3
- package/select/internal/_shared.scss +30 -1
- package/select/internal/filled-select-styles.css.js +1 -1
- package/select/internal/filled-select-styles.css.js.map +1 -1
- package/select/internal/outlined-select-styles.css.js +1 -1
- package/select/internal/outlined-select-styles.css.js.map +1 -1
- package/select/internal/select.d.ts +0 -5
- package/select/internal/select.js +11 -16
- package/select/internal/select.js.map +1 -1
- package/select/internal/selectoption/select-option.d.ts +5 -6
- package/select/internal/selectoption/select-option.js +8 -9
- package/select/internal/selectoption/select-option.js.map +1 -1
- package/select/internal/shared-styles.css.js +1 -1
- package/select/internal/shared-styles.css.js.map +1 -1
- package/select/internal/shared.d.ts +5 -9
- package/select/internal/shared.js +13 -11
- package/select/internal/shared.js.map +1 -1
- package/slider/internal/_slider.scss +33 -28
- package/slider/internal/forced-colors-styles.css.js +1 -1
- package/slider/internal/forced-colors-styles.css.js.map +1 -1
- package/slider/internal/slider-styles.css.js +1 -1
- package/slider/internal/slider-styles.css.js.map +1 -1
- package/slider/internal/slider.d.ts +22 -8
- package/slider/internal/slider.js +114 -25
- package/slider/internal/slider.js.map +1 -1
- package/switch/internal/_handle.scss +12 -12
- package/switch/internal/_icon.scss +8 -8
- package/switch/internal/_switch.scss +9 -1
- package/switch/internal/_track.scss +10 -10
- package/switch/internal/forced-colors-styles.css.js +1 -1
- package/switch/internal/forced-colors-styles.css.js.map +1 -1
- package/switch/internal/forced-colors-styles.scss +12 -12
- package/switch/internal/switch-styles.css.js +1 -1
- package/switch/internal/switch-styles.css.js.map +1 -1
- package/switch/internal/switch.d.ts +1 -1
- package/switch/internal/switch.js +3 -5
- package/switch/internal/switch.js.map +1 -1
- package/tabs/internal/_tab.scss +77 -21
- package/tabs/internal/_tabs.scss +1 -0
- package/tabs/internal/tab-styles.css.js +1 -1
- package/tabs/internal/tab-styles.css.js.map +1 -1
- package/tabs/internal/tab.d.ts +3 -9
- package/tabs/internal/tab.js +4 -8
- package/tabs/internal/tab.js.map +1 -1
- package/tabs/internal/tabs.d.ts +1 -4
- package/tabs/internal/tabs.js +5 -10
- package/tabs/internal/tabs.js.map +1 -1
- package/textfield/harness.js +4 -0
- package/textfield/harness.js.map +1 -1
- package/textfield/internal/filled-styles.css.js +1 -1
- package/textfield/internal/filled-styles.css.js.map +1 -1
- package/textfield/internal/outlined-styles.css.js +1 -1
- package/textfield/internal/outlined-styles.css.js.map +1 -1
- package/textfield/internal/text-field.d.ts +11 -10
- package/textfield/internal/text-field.js +60 -35
- package/textfield/internal/text-field.js.map +1 -1
- package/tokens/_index.scss +1 -0
- package/tokens/_md-comp-checkbox.scss +16 -16
- package/tokens/_md-comp-dialog.scss +2 -1
- package/tokens/_md-comp-elevated-button.scss +14 -12
- package/tokens/_md-comp-filled-button.scss +14 -12
- package/tokens/_md-comp-filled-field.scss +2 -2
- package/tokens/_md-comp-filled-icon-button.scss +23 -8
- package/tokens/_md-comp-filled-select.scss +22 -1
- package/tokens/_md-comp-filled-text-field.scss +3 -1
- package/tokens/_md-comp-filled-tonal-button.scss +14 -12
- package/tokens/_md-comp-filled-tonal-icon-button.scss +23 -8
- package/tokens/_md-comp-icon-button.scss +24 -11
- package/tokens/_md-comp-icon.scss +32 -0
- package/tokens/_md-comp-list-item.scss +117 -103
- package/tokens/_md-comp-menu-item.scss +3 -3
- package/tokens/_md-comp-outlined-button.scss +14 -12
- package/tokens/_md-comp-outlined-field.scss +2 -1
- package/tokens/_md-comp-outlined-icon-button.scss +26 -12
- package/tokens/_md-comp-outlined-segmented-button.scss +2 -2
- package/tokens/_md-comp-outlined-select.scss +8 -0
- package/tokens/_md-comp-outlined-text-field.scss +3 -1
- package/tokens/_md-comp-radio-button.scss +20 -9
- package/tokens/_md-comp-switch.scss +66 -32
- package/tokens/_md-comp-text-button.scss +14 -12
- package/button/internal/tonal-button.js.map +0 -1
- package/button/internal/tonal-styles.css.js +0 -9
- package/button/internal/tonal-styles.css.js.map +0 -1
- package/button/tonal-button.js.map +0 -1
- package/chips/internal/assist-forced-colors-styles.css.d.ts +0 -1
- package/chips/internal/assist-forced-colors-styles.css.js +0 -9
- package/chips/internal/assist-forced-colors-styles.css.js.map +0 -1
- package/chips/internal/assist-forced-colors-styles.scss +0 -27
- package/chips/internal/filter-forced-colors-styles.css.d.ts +0 -1
- package/chips/internal/filter-forced-colors-styles.css.js +0 -9
- package/chips/internal/filter-forced-colors-styles.css.js.map +0 -1
- package/chips/internal/filter-forced-colors-styles.scss +0 -34
- package/chips/internal/input-forced-colors-styles.css.d.ts +0 -1
- package/chips/internal/input-forced-colors-styles.css.js +0 -9
- package/chips/internal/input-forced-colors-styles.css.js.map +0 -1
- package/chips/internal/input-forced-colors-styles.scss +0 -39
- package/chips/internal/suggestion-forced-colors-styles.css.d.ts +0 -1
- package/chips/internal/suggestion-forced-colors-styles.css.js +0 -9
- package/chips/internal/suggestion-forced-colors-styles.css.js.map +0 -1
- package/chips/internal/suggestion-forced-colors-styles.scss +0 -27
- package/dialog/internal/_tokens.scss +0 -66
- package/icon/internal/_md-comp-icon.scss +0 -18
- package/iconbutton/standard-icon-button.js.map +0 -1
- package/internal/sass/_theme.scss +0 -249
- package/list/internal/listitemlink/list-item-link-only.d.ts +0 -23
- package/list/internal/listitemlink/list-item-link-only.js +0 -36
- package/list/internal/listitemlink/list-item-link-only.js.map +0 -1
- package/list/internal/listitemlink/list-item-link.d.ts +0 -18
- package/list/internal/listitemlink/list-item-link.js +0 -42
- package/list/internal/listitemlink/list-item-link.js.map +0 -1
- package/list/list-item-link.d.ts +0 -53
- package/list/list-item-link.js +0 -57
- package/list/list-item-link.js.map +0 -1
- package/menu/internal/menuitemlink/menu-item-link.d.ts +0 -23
- package/menu/internal/menuitemlink/menu-item-link.js +0 -49
- package/menu/internal/menuitemlink/menu-item-link.js.map +0 -1
- package/menu/menu-item-link.d.ts +0 -33
- package/menu/menu-item-link.js +0 -38
- package/menu/menu-item-link.js.map +0 -1
- /package/button/internal/{tonal-styles.css.d.ts → filled-tonal-styles.css.d.ts} +0 -0
|
@@ -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\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {isRtl} from '../../internal/controller/is-rtl.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, attribute: 'flip-icon-in-rtl'})\n 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 @state() private flipIcon = isRtl(this, this.flipIconInRtl);\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() {\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=\"icon-button ${classMap(this.getRenderClasses())}\"\n id=\"button\"\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 @click=\"${this.handleClick}\">\n ${this.renderFocusRing()}\n ${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 private renderLink() {\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <a class=\"link\"\n id=\"link\"\n href=\"${this.href}\"\n target=\"${this.target as LinkTarget || nothing}\"\n aria-label=\"${ariaLabel || nothing}\"\n ></a>\n `;\n }\n\n protected getRenderClasses() {\n return {\n 'flip-icon': this.flipIcon,\n 'selected': this.toggle && this.selected,\n };\n }\n\n private renderIcon() {\n return html`<span class=\"icon\"><slot></slot></span>`;\n }\n\n private renderSelectedIcon() {\n // Use default slot as fallback to not require specifying multiple icons\n return html`<span class=\"icon icon--selected\"><slot name=\"selectedIcon\"><slot></slot></slot></span>`;\n }\n\n private renderTouchTarget() {\n return html`<span class=\"touch\"></span>`;\n }\n\n private renderFocusRing() {\n return html`<md-focus-ring part=\"focus-ring\" for=${\n this.href ? 'link' : 'button'}></md-focus-ring>`;\n }\n\n private renderRipple() {\n return html`<md-ripple\n for=${this.href ? 'link' : nothing}\n ?disabled=\"${!this.href && this.disabled}\"\n ></md-ripple>`;\n }\n\n override connectedCallback() {\n this.flipIcon = isRtl(this, this.flipIconInRtl);\n super.connectedCallback();\n }\n\n private 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"]}
|
|
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/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {internals} from '../../internal/controller/element-internals.js';\nimport {FormSubmitter, FormSubmitterType, setupFormSubmitter} from '../../internal/controller/form-submitter.js';\nimport {isRtl} from '../../internal/controller/is-rtl.js';\n\ntype LinkTarget = '_blank'|'_parent'|'_self'|'_top';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class IconButton extends LitElement implements FormSubmitter {\n static {\n requestUpdateOnAriaChange(IconButton);\n setupFormSubmitter(IconButton);\n }\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n /** @nocollapse */\n static override shadowRootOptions:\n ShadowRootInit = {mode: 'open', delegatesFocus: true};\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, attribute: 'flip-icon-in-rtl'})\n 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: LinkTarget|'' = '';\n\n /**\n * The `aria-label` of the button when the button is toggleable and selected.\n */\n @property({attribute: 'aria-label-selected'}) ariaLabelSelected = '';\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 @property() type: FormSubmitterType = 'submit';\n\n @property() value = '';\n\n get name() {\n return this.getAttribute('name') ?? '';\n }\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this[internals].form;\n }\n\n /**\n * The labels this element is associated with.\n */\n get labels() {\n return this[internals].labels;\n }\n\n @state() private flipIcon = isRtl(this, this.flipIconInRtl);\n\n /** @private */\n [internals] =\n (this as HTMLElement /* needed for closure */).attachInternals();\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() {\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.ariaLabelSelected;\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.ariaLabelSelected :\n ariaLabel;\n }\n return staticHtml`<${tag}\n class=\"icon-button ${classMap(this.getRenderClasses())}\"\n id=\"button\"\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 @click=\"${this.handleClick}\">\n ${this.renderFocusRing()}\n ${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 private renderLink() {\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <a class=\"link\"\n id=\"link\"\n href=\"${this.href}\"\n target=\"${this.target || nothing}\"\n aria-label=\"${ariaLabel || nothing}\"\n ></a>\n `;\n }\n\n protected getRenderClasses() {\n return {\n 'flip-icon': this.flipIcon,\n 'selected': this.toggle && this.selected,\n };\n }\n\n private renderIcon() {\n return html`<span class=\"icon\"><slot></slot></span>`;\n }\n\n private renderSelectedIcon() {\n // Use default slot as fallback to not require specifying multiple icons\n return html`<span class=\"icon icon--selected\"><slot name=\"selectedIcon\"><slot></slot></slot></span>`;\n }\n\n private renderTouchTarget() {\n return html`<span class=\"touch\"></span>`;\n }\n\n private renderFocusRing() {\n return html`<md-focus-ring part=\"focus-ring\" for=${\n this.href ? 'link' : 'button'}></md-focus-ring>`;\n }\n\n private renderRipple() {\n return html`<md-ripple\n for=${this.href ? 'link' : nothing}\n ?disabled=\"${!this.href && this.disabled}\"\n ></md-ripple>`;\n }\n\n override connectedCallback() {\n this.flipIcon = isRtl(this, this.flipIconInRtl);\n super.connectedCallback();\n }\n\n private 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: 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, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-icon-button-disabled-icon-opacity, 0.38);--_disabled-selected-container-color: var(--md-outlined-icon-button-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-outlined-icon-button-disabled-selected-container-opacity, 0.12);--
|
|
7
|
+
export const styles = css `:host{--_container-shape: var(--md-outlined-icon-button-container-shape, 9999px);--_container-size: var(--md-outlined-icon-button-container-size, 40px);--_disabled-icon-color: var(--md-outlined-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-icon-button-disabled-icon-opacity, 0.38);--_disabled-selected-container-color: var(--md-outlined-icon-button-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-outlined-icon-button-disabled-selected-container-opacity, 0.12);--_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-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));--_disabled-outline-color: var(--md-outlined-icon-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-icon-button-disabled-outline-opacity, 0.12);--_focus-icon-color: var(--md-outlined-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-outlined-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-outlined-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_icon-color: var(--md-outlined-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-outlined-icon-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-icon-button-outline-width, 1px);--_pressed-icon-color: var(--md-outlined-icon-button-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-outlined-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-shape-start-start: var( --md-outlined-icon-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-outlined-icon-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-outlined-icon-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-outlined-icon-button-container-shape-end-start, var(--_container-shape) )}.outlined{background-color:rgba(0,0,0,0);color:var(--_icon-color);--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)}.outlined::before{border-color:var(--_outline-color);border-width:var(--_outline-width)}.outlined:hover{color:var(--_hover-icon-color)}.outlined:focus{color:var(--_focus-icon-color)}.outlined:active{color:var(--_pressed-icon-color)}.outlined:disabled{color:var(--_disabled-icon-color)}.outlined:disabled::before{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.outlined:disabled .icon{opacity:var(--_disabled-icon-opacity)}.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;z-index:-1}.outlined.selected::before{border-width:0}.selected{--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)}.selected:not(:disabled){color:var(--_selected-icon-color)}.selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}.selected:not(:disabled)::before{background-color:var(--_selected-container-color)}.selected:disabled::before{background-color:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}@media(forced-colors: active){.selected::before{border-color:var(--_outline-color);border-width:var(--_outline-width)}.selected:disabled::before{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-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: 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, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-icon-button-disabled-icon-opacity, 0.38);--_disabled-selected-container-color: var(--md-outlined-icon-button-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-outlined-icon-button-disabled-selected-container-opacity, 0.12);--
|
|
1
|
+
{"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape: var(--md-outlined-icon-button-container-shape, 9999px);--_container-size: var(--md-outlined-icon-button-container-size, 40px);--_disabled-icon-color: var(--md-outlined-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-icon-button-disabled-icon-opacity, 0.38);--_disabled-selected-container-color: var(--md-outlined-icon-button-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-outlined-icon-button-disabled-selected-container-opacity, 0.12);--_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-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));--_disabled-outline-color: var(--md-outlined-icon-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-icon-button-disabled-outline-opacity, 0.12);--_focus-icon-color: var(--md-outlined-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-outlined-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-outlined-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_icon-color: var(--md-outlined-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-outlined-icon-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-icon-button-outline-width, 1px);--_pressed-icon-color: var(--md-outlined-icon-button-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-outlined-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-shape-start-start: var( --md-outlined-icon-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-outlined-icon-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-outlined-icon-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-outlined-icon-button-container-shape-end-start, var(--_container-shape) )}.outlined{background-color:rgba(0,0,0,0);color:var(--_icon-color);--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)}.outlined::before{border-color:var(--_outline-color);border-width:var(--_outline-width)}.outlined:hover{color:var(--_hover-icon-color)}.outlined:focus{color:var(--_focus-icon-color)}.outlined:active{color:var(--_pressed-icon-color)}.outlined:disabled{color:var(--_disabled-icon-color)}.outlined:disabled::before{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}.outlined:disabled .icon{opacity:var(--_disabled-icon-opacity)}.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;z-index:-1}.outlined.selected::before{border-width:0}.selected{--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)}.selected:not(:disabled){color:var(--_selected-icon-color)}.selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}.selected:not(:disabled)::before{background-color:var(--_selected-container-color)}.selected:disabled::before{background-color:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}@media(forced-colors: active){.selected::before{border-color:var(--_outline-color);border-width:var(--_outline-width)}.selected:disabled::before{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-size);width:var(--_container-size);justify-content:center}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){pointer-events:none}.icon-button{align-items:center;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;outline:none;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.icon{
|
|
7
|
+
export const styles = css `:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-size);width:var(--_container-size);justify-content:center}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-size))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){pointer-events:none}.icon-button{align-items:center;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;outline:none;padding:0;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size);font-weight:inherit}md-ripple{z-index:-1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.flip-icon .icon{transform:scaleX(-1)}.icon{display:inline-flex}.link{height:100%;outline:none;position:absolute;width:100%}.touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}:host([touch-target=none]) .touch{display:none}/*# sourceMappingURL=shared-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=shared-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-size);width:var(--_container-size);justify-content:center}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){pointer-events:none}.icon-button{align-items:center;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;outline:none;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.icon{
|
|
1
|
+
{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-size);width:var(--_container-size);justify-content:center}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-size))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){pointer-events:none}.icon-button{align-items:center;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;outline:none;padding:0;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size);font-weight:inherit}md-ripple{z-index:-1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.flip-icon .icon{transform:scaleX(-1)}.icon{display:inline-flex}.link{height:100%;outline:none;position:absolute;width:100%}.touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}:host([touch-target=none]) .touch{display:none}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-icon-button-disabled-icon-opacity, 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-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-icon-button-state-layer-shape, 9999px);--_state-layer-size: var(--md-icon-button-state-layer-size, 40px);--
|
|
7
|
+
export const styles = css `:host{--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-icon-button-disabled-icon-opacity, 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-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-icon-button-state-layer-shape, 9999px);--_state-layer-size: var(--md-icon-button-state-layer-size, 40px);--_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-icon-button-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);height:var(--_state-layer-size);width:var(--_state-layer-size)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_state-layer-size))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_state-layer-shape);--md-focus-ring-shape-start-end: var(--_state-layer-shape);--md-focus-ring-shape-end-end: var(--_state-layer-shape);--md-focus-ring-shape-end-start: var(--_state-layer-shape)}.standard{background-color:rgba(0,0,0,0);color:var(--_icon-color);--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)}.standard:hover{color:var(--_hover-icon-color)}.standard:focus{color:var(--_focus-icon-color)}.standard:active{color:var(--_pressed-icon-color)}.standard:disabled{color:var(--_disabled-icon-color)}md-ripple{border-radius:var(--_state-layer-shape)}.standard:disabled .icon{opacity:var(--_disabled-icon-opacity)}.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.selected:not(:disabled){color:var(--_selected-icon-color)}.selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.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{--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-icon-button-disabled-icon-opacity, 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-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-icon-button-state-layer-shape, 9999px);--_state-layer-size: var(--md-icon-button-state-layer-size, 40px);--
|
|
1
|
+
{"version":3,"file":"standard-styles.css.js","sourceRoot":"","sources":["standard-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-icon-button-disabled-icon-opacity, 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-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-icon-button-state-layer-shape, 9999px);--_state-layer-size: var(--md-icon-button-state-layer-size, 40px);--_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-icon-button-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);height:var(--_state-layer-size);width:var(--_state-layer-size)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_state-layer-size))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_state-layer-shape);--md-focus-ring-shape-start-end: var(--_state-layer-shape);--md-focus-ring-shape-end-end: var(--_state-layer-shape);--md-focus-ring-shape-end-start: var(--_state-layer-shape)}.standard{background-color:rgba(0,0,0,0);color:var(--_icon-color);--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)}.standard:hover{color:var(--_hover-icon-color)}.standard:focus{color:var(--_focus-icon-color)}.standard:active{color:var(--_pressed-icon-color)}.standard:disabled{color:var(--_disabled-icon-color)}md-ripple{border-radius:var(--_state-layer-shape)}.standard:disabled .icon{opacity:var(--_disabled-icon-opacity)}.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.selected:not(:disabled){color:var(--_selected-icon-color)}.selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}/*# sourceMappingURL=standard-styles.css.map */\n`;\n "]}
|
|
@@ -20,7 +20,7 @@ import { ARIA_PROPERTIES, ariaPropertyToAttribute } from './aria.js';
|
|
|
20
20
|
* @example
|
|
21
21
|
* class XButton extends LitElement {
|
|
22
22
|
* static {
|
|
23
|
-
* requestUpdateOnAriaChange(
|
|
23
|
+
* requestUpdateOnAriaChange(XButton);
|
|
24
24
|
* }
|
|
25
25
|
*
|
|
26
26
|
* protected override render() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"delegate.js","sourceRoot":"","sources":["delegate.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,eAAe,EAAE,uBAAuB,EAAC,MAAM,WAAW,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,yBAAyB,CAAC,IAA4B;IACpE,KAAK,MAAM,YAAY,IAAI,eAAe,EAAE;QAC1C,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE;YAChC,SAAS,EAAE,uBAAuB,CAAC,YAAY,CAAC;YAChD,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;QAC5B,MAAM,UAAU,GAAG;YACjB,aAAa;gBACX,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;YAC/C,CAAC;SACF,CAAC;QAEF,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveElement} from 'lit';\n\nimport {ARIA_PROPERTIES, ariaPropertyToAttribute} from './aria.js';\n\n/**\n * Sets up a `ReactiveElement` constructor to enable updates when delegating\n * aria attributes. Elements may bind `this.aria*` properties to `aria-*`\n * attributes in their render functions.\n *\n * This function will:\n * - Call `requestUpdate()` when an aria attribute changes.\n * - Add `role=\"presentation\"` to the host.\n *\n * NOTE: The following features are not currently supported:\n * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)\n * - Delegating the `role` attribute\n *\n * @example\n * class XButton extends LitElement {\n * static {\n * requestUpdateOnAriaChange(
|
|
1
|
+
{"version":3,"file":"delegate.js","sourceRoot":"","sources":["delegate.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,eAAe,EAAE,uBAAuB,EAAC,MAAM,WAAW,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,yBAAyB,CAAC,IAA4B;IACpE,KAAK,MAAM,YAAY,IAAI,eAAe,EAAE;QAC1C,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE;YAChC,SAAS,EAAE,uBAAuB,CAAC,YAAY,CAAC;YAChD,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;QAC5B,MAAM,UAAU,GAAG;YACjB,aAAa;gBACX,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;YAC/C,CAAC;SACF,CAAC;QAEF,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveElement} from 'lit';\n\nimport {ARIA_PROPERTIES, ariaPropertyToAttribute} from './aria.js';\n\n/**\n * Sets up a `ReactiveElement` constructor to enable updates when delegating\n * aria attributes. Elements may bind `this.aria*` properties to `aria-*`\n * attributes in their render functions.\n *\n * This function will:\n * - Call `requestUpdate()` when an aria attribute changes.\n * - Add `role=\"presentation\"` to the host.\n *\n * NOTE: The following features are not currently supported:\n * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)\n * - Delegating the `role` attribute\n *\n * @example\n * class XButton extends LitElement {\n * static {\n * requestUpdateOnAriaChange(XButton);\n * }\n *\n * protected override render() {\n * return html`\n * <button aria-label=${this.ariaLabel || nothing}>\n * <slot></slot>\n * </button>\n * `;\n * }\n * }\n *\n * @param ctor The `ReactiveElement` constructor to patch.\n */\nexport function requestUpdateOnAriaChange(ctor: typeof ReactiveElement) {\n for (const ariaProperty of ARIA_PROPERTIES) {\n ctor.createProperty(ariaProperty, {\n attribute: ariaPropertyToAttribute(ariaProperty),\n reflect: true,\n });\n }\n\n ctor.addInitializer(element => {\n const controller = {\n hostConnected() {\n element.setAttribute('role', 'presentation');\n }\n };\n\n element.addController(controller);\n });\n}\n"]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* A unique symbol used for protected access to an instance's
|
|
8
|
+
* `ElementInternals`.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```ts
|
|
12
|
+
* class MyElement extends LitElement {
|
|
13
|
+
* static formAssociated = true;
|
|
14
|
+
*
|
|
15
|
+
* [internals] = this.attachInternals();
|
|
16
|
+
* }
|
|
17
|
+
*
|
|
18
|
+
* function getForm(element: MyElement) {
|
|
19
|
+
* return element[internals].form;
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare const internals: unique symbol;
|
|
24
|
+
/**
|
|
25
|
+
* An instance with `ElementInternals`.
|
|
26
|
+
*
|
|
27
|
+
* Use this when protected access is needed for an instance's `ElementInternals`
|
|
28
|
+
* from other files. A unique symbol is used to access the internals.
|
|
29
|
+
*/
|
|
30
|
+
export interface WithInternals {
|
|
31
|
+
/**
|
|
32
|
+
* An instance's `ElementInternals`.
|
|
33
|
+
*/
|
|
34
|
+
[internals]: ElementInternals;
|
|
35
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* A unique symbol used for protected access to an instance's
|
|
8
|
+
* `ElementInternals`.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```ts
|
|
12
|
+
* class MyElement extends LitElement {
|
|
13
|
+
* static formAssociated = true;
|
|
14
|
+
*
|
|
15
|
+
* [internals] = this.attachInternals();
|
|
16
|
+
* }
|
|
17
|
+
*
|
|
18
|
+
* function getForm(element: MyElement) {
|
|
19
|
+
* return element[internals].form;
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export const internals = Symbol('internals');
|
|
24
|
+
//# sourceMappingURL=element-internals.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-internals.js","sourceRoot":"","sources":["element-internals.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A unique symbol used for protected access to an instance's\n * `ElementInternals`.\n *\n * @example\n * ```ts\n * class MyElement extends LitElement {\n * static formAssociated = true;\n *\n * [internals] = this.attachInternals();\n * }\n *\n * function getForm(element: MyElement) {\n * return element[internals].form;\n * }\n * ```\n */\nexport const internals = Symbol('internals');\n\n/**\n * An instance with `ElementInternals`.\n *\n * Use this when protected access is needed for an instance's `ElementInternals`\n * from other files. A unique symbol is used to access the internals.\n */\nexport interface WithInternals {\n /**\n * An instance's `ElementInternals`.\n */\n [internals]: ElementInternals;\n}\n"]}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { ReactiveElement } from 'lit';
|
|
7
|
+
import { WithInternals } from './element-internals.js';
|
|
8
|
+
/**
|
|
9
|
+
* A string indicating the form submission behavior of the element.
|
|
10
|
+
*
|
|
11
|
+
* - submit: The element submits the form. This is the default value if the
|
|
12
|
+
* attribute is not specified, or if it is dynamically changed to an empty or
|
|
13
|
+
* invalid value.
|
|
14
|
+
* - reset: The element resets the form.
|
|
15
|
+
* - button: The element does nothing.
|
|
16
|
+
*/
|
|
17
|
+
export type FormSubmitterType = 'button' | 'submit' | 'reset';
|
|
18
|
+
/**
|
|
19
|
+
* An element that can submit or reset a `<form>`, similar to
|
|
20
|
+
* `<button type="submit">`.
|
|
21
|
+
*/
|
|
22
|
+
export interface FormSubmitter extends ReactiveElement, WithInternals {
|
|
23
|
+
/**
|
|
24
|
+
* A string indicating the form submission behavior of the element.
|
|
25
|
+
*
|
|
26
|
+
* - submit: The element submits the form. This is the default value if the
|
|
27
|
+
* attribute is not specified, or if it is dynamically changed to an empty or
|
|
28
|
+
* invalid value.
|
|
29
|
+
* - reset: The element resets the form.
|
|
30
|
+
* - button: The element does nothing.
|
|
31
|
+
*/
|
|
32
|
+
type: FormSubmitterType;
|
|
33
|
+
/**
|
|
34
|
+
* The HTML name to use in form submission. When combined with a `value`, the
|
|
35
|
+
* submitting button's name/value will be added to the form.
|
|
36
|
+
*
|
|
37
|
+
* Names must reflect to a `name` attribute for form integration.
|
|
38
|
+
*/
|
|
39
|
+
name: string;
|
|
40
|
+
/**
|
|
41
|
+
* The value of the button. When combined with a `name`, the submitting
|
|
42
|
+
* button's name/value will be added to the form.
|
|
43
|
+
*/
|
|
44
|
+
value: string;
|
|
45
|
+
}
|
|
46
|
+
type FormSubmitterConstructor = (new () => FormSubmitter) | (abstract new () => FormSubmitter);
|
|
47
|
+
/**
|
|
48
|
+
* Sets up an element's constructor to enable form submission. The element
|
|
49
|
+
* instance should be form associated and have a `type` property.
|
|
50
|
+
*
|
|
51
|
+
* A click listener is added to each element instance. If the click is not
|
|
52
|
+
* default prevented, it will submit the element's form, if any.
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```ts
|
|
56
|
+
* class MyElement extends LitElement {
|
|
57
|
+
* static {
|
|
58
|
+
* setupFormSubmitter(MyElement);
|
|
59
|
+
* }
|
|
60
|
+
*
|
|
61
|
+
* static formAssociated = true;
|
|
62
|
+
*
|
|
63
|
+
* type: FormSubmitterType = 'submit';
|
|
64
|
+
*
|
|
65
|
+
* [internals] = this.attachInternals();
|
|
66
|
+
* }
|
|
67
|
+
* ```
|
|
68
|
+
*
|
|
69
|
+
* @param ctor The form submitter element's constructor.
|
|
70
|
+
*/
|
|
71
|
+
export declare function setupFormSubmitter(ctor: FormSubmitterConstructor): void;
|
|
72
|
+
export {};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
5
|
+
*/
|
|
6
|
+
import { isServer } from 'lit';
|
|
7
|
+
import { internals } from './element-internals.js';
|
|
8
|
+
/**
|
|
9
|
+
* Sets up an element's constructor to enable form submission. The element
|
|
10
|
+
* instance should be form associated and have a `type` property.
|
|
11
|
+
*
|
|
12
|
+
* A click listener is added to each element instance. If the click is not
|
|
13
|
+
* default prevented, it will submit the element's form, if any.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```ts
|
|
17
|
+
* class MyElement extends LitElement {
|
|
18
|
+
* static {
|
|
19
|
+
* setupFormSubmitter(MyElement);
|
|
20
|
+
* }
|
|
21
|
+
*
|
|
22
|
+
* static formAssociated = true;
|
|
23
|
+
*
|
|
24
|
+
* type: FormSubmitterType = 'submit';
|
|
25
|
+
*
|
|
26
|
+
* [internals] = this.attachInternals();
|
|
27
|
+
* }
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* @param ctor The form submitter element's constructor.
|
|
31
|
+
*/
|
|
32
|
+
export function setupFormSubmitter(ctor) {
|
|
33
|
+
if (isServer) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
ctor.addInitializer(instance => {
|
|
37
|
+
const submitter = instance;
|
|
38
|
+
submitter.addEventListener('click', async (event) => {
|
|
39
|
+
const { type, [internals]: elementInternals } = submitter;
|
|
40
|
+
const { form } = elementInternals;
|
|
41
|
+
if (!form || type === 'button') {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
// Wait a microtask for event bubbling to complete.
|
|
45
|
+
await new Promise(resolve => {
|
|
46
|
+
resolve();
|
|
47
|
+
});
|
|
48
|
+
if (event.defaultPrevented) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
if (type === 'reset') {
|
|
52
|
+
form.reset();
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
// form.requestSubmit(submitter) does not work with form associated custom
|
|
56
|
+
// elements. This patches the dispatched submit event to add the correct
|
|
57
|
+
// `submitter`.
|
|
58
|
+
// See https://github.com/WICG/webcomponents/issues/814
|
|
59
|
+
form.addEventListener('submit', submitEvent => {
|
|
60
|
+
Object.defineProperty(submitEvent, 'submitter', {
|
|
61
|
+
configurable: true,
|
|
62
|
+
enumerable: true,
|
|
63
|
+
get: () => submitter,
|
|
64
|
+
});
|
|
65
|
+
}, { capture: true, once: true });
|
|
66
|
+
elementInternals.setFormValue(submitter.value);
|
|
67
|
+
form.requestSubmit();
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
//# sourceMappingURL=form-submitter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-submitter.js","sourceRoot":"","sources":["form-submitter.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,QAAQ,EAAkB,MAAM,KAAK,CAAC;AAE9C,OAAO,EAAC,SAAS,EAAgB,MAAM,wBAAwB,CAAC;AA+ChE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAA8B;IAC/D,IAAI,QAAQ,EAAE;QACZ,OAAO;KACR;IAEA,IAA0C,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QACpE,MAAM,SAAS,GAAG,QAAyB,CAAC;QAC5C,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;YAChD,MAAM,EAAC,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,gBAAgB,EAAC,GAAG,SAAS,CAAC;YACxD,MAAM,EAAC,IAAI,EAAC,GAAG,gBAAgB,CAAC;YAChC,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,QAAQ,EAAE;gBAC9B,OAAO;aACR;YAED,mDAAmD;YACnD,MAAM,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;gBAChC,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC,CAAC;YAEH,IAAI,KAAK,CAAC,gBAAgB,EAAE;gBAC1B,OAAO;aACR;YAED,IAAI,IAAI,KAAK,OAAO,EAAE;gBACpB,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,OAAO;aACR;YAED,0EAA0E;YAC1E,wEAAwE;YACxE,eAAe;YACf,uDAAuD;YACvD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE;gBAC5C,MAAM,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE;oBAC9C,YAAY,EAAE,IAAI;oBAClB,UAAU,EAAE,IAAI;oBAChB,GAAG,EAAE,GAAG,EAAE,CAAC,SAAS;iBACrB,CAAC,CAAC;YACL,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;YAEhC,gBAAgB,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YAC/C,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {isServer, ReactiveElement} from 'lit';\n\nimport {internals, WithInternals} from './element-internals.js';\n\n/**\n * A string indicating the form submission behavior of the element.\n *\n * - submit: The element submits the form. This is the default value if the\n * attribute is not specified, or if it is dynamically changed to an empty or\n * invalid value.\n * - reset: The element resets the form.\n * - button: The element does nothing.\n */\nexport type FormSubmitterType = 'button'|'submit'|'reset';\n\n/**\n * An element that can submit or reset a `<form>`, similar to\n * `<button type=\"submit\">`.\n */\nexport interface FormSubmitter extends ReactiveElement, WithInternals {\n /**\n * A string indicating the form submission behavior of the element.\n *\n * - submit: The element submits the form. This is the default value if the\n * attribute is not specified, or if it is dynamically changed to an empty or\n * invalid value.\n * - reset: The element resets the form.\n * - button: The element does nothing.\n */\n type: FormSubmitterType;\n\n /**\n * The HTML name to use in form submission. When combined with a `value`, the\n * submitting button's name/value will be added to the form.\n *\n * Names must reflect to a `name` attribute for form integration.\n */\n name: string;\n\n /**\n * The value of the button. When combined with a `name`, the submitting\n * button's name/value will be added to the form.\n */\n value: string;\n}\n\ntype FormSubmitterConstructor =\n (new () => FormSubmitter)|(abstract new () => FormSubmitter);\n\n/**\n * Sets up an element's constructor to enable form submission. The element\n * instance should be form associated and have a `type` property.\n *\n * A click listener is added to each element instance. If the click is not\n * default prevented, it will submit the element's form, if any.\n *\n * @example\n * ```ts\n * class MyElement extends LitElement {\n * static {\n * setupFormSubmitter(MyElement);\n * }\n *\n * static formAssociated = true;\n *\n * type: FormSubmitterType = 'submit';\n *\n * [internals] = this.attachInternals();\n * }\n * ```\n *\n * @param ctor The form submitter element's constructor.\n */\nexport function setupFormSubmitter(ctor: FormSubmitterConstructor) {\n if (isServer) {\n return;\n }\n\n (ctor as unknown as typeof ReactiveElement).addInitializer(instance => {\n const submitter = instance as FormSubmitter;\n submitter.addEventListener('click', async event => {\n const {type, [internals]: elementInternals} = submitter;\n const {form} = elementInternals;\n if (!form || type === 'button') {\n return;\n }\n\n // Wait a microtask for event bubbling to complete.\n await new Promise<void>(resolve => {\n resolve();\n });\n\n if (event.defaultPrevented) {\n return;\n }\n\n if (type === 'reset') {\n form.reset();\n return;\n }\n\n // form.requestSubmit(submitter) does not work with form associated custom\n // elements. This patches the dispatched submit event to add the correct\n // `submitter`.\n // See https://github.com/WICG/webcomponents/issues/814\n form.addEventListener('submit', submitEvent => {\n Object.defineProperty(submitEvent, 'submitter', {\n configurable: true,\n enumerable: true,\n get: () => submitter,\n });\n }, {capture: true, once: true});\n\n elementInternals.setFormValue(submitter.value);\n form.requestSubmit();\n });\n });\n}\n"]}
|
|
@@ -7,26 +7,29 @@
|
|
|
7
7
|
// Selector '.md3-*' should only be used in this project.
|
|
8
8
|
|
|
9
9
|
// go/keep-sorted start
|
|
10
|
-
@use '../../../internal/sass/theme';
|
|
11
10
|
@use '../../../tokens';
|
|
12
11
|
// go/keep-sorted end
|
|
13
12
|
|
|
14
|
-
$_custom-property-prefix: 'badge';
|
|
15
|
-
|
|
16
13
|
@mixin theme($tokens) {
|
|
17
|
-
$tokens:
|
|
18
|
-
|
|
14
|
+
// $supported-tokens: tokens.$md-comp-badge-supported-tokens;
|
|
15
|
+
|
|
16
|
+
@each $token, $value in $tokens {
|
|
17
|
+
// @if list.index($supported-tokens, $token) == null {
|
|
18
|
+
// @error 'Token `#{$token}` is not a supported token.';
|
|
19
|
+
// }
|
|
19
20
|
|
|
20
|
-
|
|
21
|
+
@if $value {
|
|
22
|
+
--md-badge-#{$token}: #{$value};
|
|
23
|
+
}
|
|
24
|
+
}
|
|
21
25
|
}
|
|
22
26
|
|
|
23
27
|
@mixin styles() {
|
|
24
28
|
$tokens: tokens.md-comp-badge-values();
|
|
25
|
-
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
|
26
29
|
|
|
27
30
|
:host {
|
|
28
31
|
@each $token, $value in $tokens {
|
|
29
|
-
--_#{$token}: #{$value};
|
|
32
|
+
--_#{$token}: var(--md-badge-#{$token}, #{$value});
|
|
30
33
|
}
|
|
31
34
|
}
|
|
32
35
|
|
|
@@ -11,29 +11,31 @@
|
|
|
11
11
|
// go/keep-sorted end
|
|
12
12
|
// go/keep-sorted start
|
|
13
13
|
@use '../../../elevation/elevation';
|
|
14
|
-
@use '../../../internal/sass/theme';
|
|
15
14
|
@use '../../../tokens';
|
|
16
15
|
// go/keep-sorted end
|
|
17
16
|
|
|
18
17
|
$_md-sys-motion: tokens.md-sys-motion-values();
|
|
19
18
|
|
|
20
19
|
@mixin theme($tokens) {
|
|
21
|
-
$tokens:
|
|
22
|
-
tokens.md-comp-navigation-bar-values(),
|
|
23
|
-
$tokens
|
|
24
|
-
);
|
|
25
|
-
$tokens: theme.create-theme-vars($tokens, 'navigation-bar');
|
|
20
|
+
// $supported-tokens: tokens.$md-comp-navigation-bar-supported-tokens;
|
|
26
21
|
|
|
27
|
-
@
|
|
22
|
+
@each $token, $value in $tokens {
|
|
23
|
+
// @if list.index($supported-tokens, $token) == null {
|
|
24
|
+
// @error 'Token `#{$token}` is not a supported token.';
|
|
25
|
+
// }
|
|
26
|
+
|
|
27
|
+
@if $value {
|
|
28
|
+
--md-navigation-bar-#{$token}: #{$value};
|
|
29
|
+
}
|
|
30
|
+
}
|
|
28
31
|
}
|
|
29
32
|
|
|
30
33
|
@mixin styles() {
|
|
31
34
|
$tokens: tokens.md-comp-navigation-bar-values();
|
|
32
|
-
$tokens: theme.create-theme-vars($tokens, 'navigation-bar');
|
|
33
35
|
|
|
34
36
|
:host {
|
|
35
37
|
@each $token, $value in $tokens {
|
|
36
|
-
--_#{$token}: #{$value};
|
|
38
|
+
--_#{$token}: var(--md-navigation-bar-#{$token}, #{$value});
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
@include elevation.theme(
|
|
@@ -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{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, 700);--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-ref-typeface-plain, Roboto));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, 1rem);--_label-text-size: var(--md-navigation-bar-label-text-size, 0.75rem);--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, 500 0.75rem / 1rem var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */
|
|
7
|
+
export const styles = css `:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, 700);--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-ref-typeface-plain, Roboto));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, 1rem);--_label-text-size: var(--md-navigation-bar-label-text-size, 0.75rem);--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, 500 0.75rem / 1rem var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=navigation-bar-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-bar-styles.css.js","sourceRoot":"","sources":["navigation-bar-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{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, 700);--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-ref-typeface-plain, Roboto));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, 1rem);--_label-text-size: var(--md-navigation-bar-label-text-size, 0.75rem);--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, 500 0.75rem / 1rem var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */\n`;\n "]}
|
|
1
|
+
{"version":3,"file":"navigation-bar-styles.css.js","sourceRoot":"","sources":["navigation-bar-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{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, 9999px);--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, 700);--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, 0px);--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-ref-typeface-plain, Roboto));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, 1rem);--_label-text-size: var(--md-navigation-bar-label-text-size, 0.75rem);--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, 0.031rem);--_label-text-type: var(--md-navigation-bar-label-text-type, 500 0.75rem / 1rem var(--md-ref-typeface-plain, Roboto));--_label-text-weight: var(--md-navigation-bar-label-text-weight, 500);--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */\n`;\n "]}
|