@universal-material/web 3.8.0 → 3.9.0
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/.claude-plugin/plugin.json +12 -0
- package/README.md +12 -0
- package/app-bar/top-app-bar.d.ts +7 -6
- package/app-bar/top-app-bar.d.ts.map +1 -1
- package/app-bar/top-app-bar.js +71 -35
- package/app-bar/top-app-bar.js.map +1 -1
- package/app-bar/top-app-bar.styles.d.ts.map +1 -1
- package/app-bar/top-app-bar.styles.js +18 -1
- package/app-bar/top-app-bar.styles.js.map +1 -1
- package/badge/badge.d.ts +2 -2
- package/badge/badge.d.ts.map +1 -1
- package/badge/badge.js +6 -6
- package/badge/badge.js.map +1 -1
- package/badge/badge.styles.d.ts.map +1 -1
- package/badge/badge.styles.js +1 -0
- package/badge/badge.styles.js.map +1 -1
- package/bundle.min.js +4469 -1277
- package/button/button-base.d.ts +2 -2
- package/button/button-base.d.ts.map +1 -1
- package/button/button-base.js +5 -5
- package/button/button-base.js.map +1 -1
- package/button/button-set.d.ts +3 -3
- package/button/button-set.d.ts.map +1 -1
- package/button/button-set.js +7 -7
- package/button/button-set.js.map +1 -1
- package/button/button.d.ts +7 -7
- package/button/button.d.ts.map +1 -1
- package/button/button.js +14 -14
- package/button/button.js.map +1 -1
- package/button/fab-menu-color-context.d.ts +2 -2
- package/button/fab-menu-color-context.d.ts.map +1 -1
- package/button/fab-menu-color-context.js.map +1 -1
- package/button/fab-menu-item.d.ts +3 -3
- package/button/fab-menu-item.d.ts.map +1 -1
- package/button/fab-menu-item.js +11 -11
- package/button/fab-menu-item.js.map +1 -1
- package/button/fab-menu.d.ts +20 -5
- package/button/fab-menu.d.ts.map +1 -1
- package/button/fab-menu.js +48 -11
- package/button/fab-menu.js.map +1 -1
- package/button/fab.d.ts +22 -7
- package/button/fab.d.ts.map +1 -1
- package/button/fab.js +49 -11
- package/button/fab.js.map +1 -1
- package/button/icon-button.d.ts +7 -7
- package/button/icon-button.d.ts.map +1 -1
- package/button/icon-button.js +8 -8
- package/button/icon-button.js.map +1 -1
- package/button/toggle-button.d.ts +6 -6
- package/button/toggle-button.d.ts.map +1 -1
- package/button/toggle-button.js +10 -10
- package/button/toggle-button.js.map +1 -1
- package/button-field/button-field.d.ts +3 -3
- package/button-field/button-field.d.ts.map +1 -1
- package/button-field/button-field.js +9 -9
- package/button-field/button-field.js.map +1 -1
- package/calendar/calendar-base.d.ts +1 -1
- package/calendar/calendar-base.d.ts.map +1 -1
- package/calendar/calendar-base.js +10 -10
- package/calendar/calendar-base.js.map +1 -1
- package/calendar/calendar.d.ts +2 -2
- package/calendar/calendar.d.ts.map +1 -1
- package/calendar/calendar.js +8 -8
- package/calendar/calendar.js.map +1 -1
- package/calendar/range-calendar.d.ts +2 -2
- package/calendar/range-calendar.d.ts.map +1 -1
- package/calendar/range-calendar.js +9 -9
- package/calendar/range-calendar.js.map +1 -1
- package/card/card-content.d.ts +2 -2
- package/card/card-content.d.ts.map +1 -1
- package/card/card-content.js +5 -5
- package/card/card-content.js.map +1 -1
- package/card/card-media.d.ts +2 -2
- package/card/card-media.d.ts.map +1 -1
- package/card/card-media.js +5 -5
- package/card/card-media.js.map +1 -1
- package/card/card.d.ts +4 -4
- package/card/card.d.ts.map +1 -1
- package/card/card.js +5 -5
- package/card/card.js.map +1 -1
- package/checkbox/checkbox-list-item.d.ts +4 -4
- package/checkbox/checkbox-list-item.d.ts.map +1 -1
- package/checkbox/checkbox-list-item.js +5 -5
- package/checkbox/checkbox-list-item.js.map +1 -1
- package/checkbox/checkbox.d.ts +3 -3
- package/checkbox/checkbox.d.ts.map +1 -1
- package/checkbox/checkbox.js +7 -7
- package/checkbox/checkbox.js.map +1 -1
- package/chip/chip-set.d.ts +3 -3
- package/chip/chip-set.d.ts.map +1 -1
- package/chip/chip-set.js +6 -6
- package/chip/chip-set.js.map +1 -1
- package/chip/chip.d.ts +5 -5
- package/chip/chip.d.ts.map +1 -1
- package/chip/chip.js +20 -20
- package/chip/chip.js.map +1 -1
- package/chip-field/chip-field.d.ts +3 -3
- package/chip-field/chip-field.d.ts.map +1 -1
- package/chip-field/chip-field.js +9 -9
- package/chip-field/chip-field.js.map +1 -1
- package/collapse/collapse.d.ts +26 -0
- package/collapse/collapse.d.ts.map +1 -0
- package/collapse/collapse.js +62 -0
- package/collapse/collapse.js.map +1 -0
- package/collapse/collapse.styles.d.ts +2 -0
- package/collapse/collapse.styles.d.ts.map +1 -0
- package/collapse/collapse.styles.js +8 -0
- package/collapse/collapse.styles.js.map +1 -0
- package/config.js.map +1 -1
- package/css/universal-material.css +2 -1
- package/css/universal-material.min.css +2 -1
- package/custom-elements.json +16615 -12152
- package/datepicker/datepicker.d.ts +6 -4
- package/datepicker/datepicker.d.ts.map +1 -1
- package/datepicker/datepicker.js +33 -19
- package/datepicker/datepicker.js.map +1 -1
- package/datepicker/datepicker.styles.d.ts.map +1 -1
- package/datepicker/datepicker.styles.js +25 -0
- package/datepicker/datepicker.styles.js.map +1 -1
- package/datepicker/range-datepicker.d.ts +6 -4
- package/datepicker/range-datepicker.d.ts.map +1 -1
- package/datepicker/range-datepicker.js +33 -19
- package/datepicker/range-datepicker.js.map +1 -1
- package/dialog/confirm-dialog-builder.d.ts +3 -3
- package/dialog/confirm-dialog-builder.d.ts.map +1 -1
- package/dialog/confirm-dialog-builder.js.map +1 -1
- package/dialog/dialog-builder.d.ts +5 -4
- package/dialog/dialog-builder.d.ts.map +1 -1
- package/dialog/dialog-builder.js +10 -3
- package/dialog/dialog-builder.js.map +1 -1
- package/dialog/dialog-button-def.d.ts +3 -3
- package/dialog/dialog-button-def.d.ts.map +1 -1
- package/dialog/dialog-button-def.js.map +1 -1
- package/dialog/dialog.d.ts +2 -2
- package/dialog/dialog.d.ts.map +1 -1
- package/dialog/dialog.js +14 -14
- package/dialog/dialog.js.map +1 -1
- package/dialog/message-dialog-builder.d.ts +2 -2
- package/dialog/message-dialog-builder.d.ts.map +1 -1
- package/dialog/message-dialog-builder.js.map +1 -1
- package/elevation/elevation.d.ts +2 -2
- package/elevation/elevation.d.ts.map +1 -1
- package/elevation/elevation.js +4 -4
- package/elevation/elevation.js.map +1 -1
- package/expansion-panel/expansion-panel-container.d.ts +24 -0
- package/expansion-panel/expansion-panel-container.d.ts.map +1 -0
- package/expansion-panel/expansion-panel-container.js +54 -0
- package/expansion-panel/expansion-panel-container.js.map +1 -0
- package/expansion-panel/expansion-panel-container.styles.d.ts +2 -0
- package/expansion-panel/expansion-panel-container.styles.d.ts.map +1 -0
- package/expansion-panel/expansion-panel-container.styles.js +9 -0
- package/expansion-panel/expansion-panel-container.styles.js.map +1 -0
- package/expansion-panel/expansion-panel.d.ts +37 -0
- package/expansion-panel/expansion-panel.d.ts.map +1 -0
- package/expansion-panel/expansion-panel.js +89 -0
- package/expansion-panel/expansion-panel.js.map +1 -0
- package/expansion-panel/expansion-panel.styles.d.ts +2 -0
- package/expansion-panel/expansion-panel.styles.d.ts.map +1 -0
- package/expansion-panel/expansion-panel.styles.js +66 -0
- package/expansion-panel/expansion-panel.styles.js.map +1 -0
- package/field/field-base.d.ts +3 -3
- package/field/field-base.d.ts.map +1 -1
- package/field/field-base.js +20 -20
- package/field/field-base.js.map +1 -1
- package/field/field-defaults-context.d.ts +2 -2
- package/field/field-defaults-context.d.ts.map +1 -1
- package/field/field-defaults-context.js.map +1 -1
- package/field/field-defaults.d.ts +3 -3
- package/field/field-defaults.d.ts.map +1 -1
- package/field/field-defaults.js.map +1 -1
- package/field/field-variant.d.ts +1 -1
- package/field/field-variant.d.ts.map +1 -1
- package/field/field-variant.js.map +1 -1
- package/field/field.d.ts +3 -3
- package/field/field.d.ts.map +1 -1
- package/field/field.js +6 -6
- package/field/field.js.map +1 -1
- package/icon/icon.d.ts +2 -2
- package/icon/icon.d.ts.map +1 -1
- package/icon/icon.js +4 -4
- package/icon/icon.js.map +1 -1
- package/index.d.ts +24 -1
- package/index.d.ts.map +1 -1
- package/index.js +24 -1
- package/index.js.map +1 -1
- package/list/list-item.d.ts +16 -2
- package/list/list-item.d.ts.map +1 -1
- package/list/list-item.js +26 -6
- package/list/list-item.js.map +1 -1
- package/list/list-item.styles.d.ts.map +1 -1
- package/list/list-item.styles.js +13 -0
- package/list/list-item.styles.js.map +1 -1
- package/list/list.d.ts +2 -2
- package/list/list.d.ts.map +1 -1
- package/list/list.js +4 -4
- package/list/list.js.map +1 -1
- package/menu/menu-item.d.ts +3 -3
- package/menu/menu-item.d.ts.map +1 -1
- package/menu/menu-item.js +10 -10
- package/menu/menu-item.js.map +1 -1
- package/menu/menu.d.ts +2 -2
- package/menu/menu.d.ts.map +1 -1
- package/menu/menu.js +13 -13
- package/menu/menu.js.map +1 -1
- package/navigation/drawer-headline.d.ts +2 -2
- package/navigation/drawer-headline.d.ts.map +1 -1
- package/navigation/drawer-headline.js +6 -6
- package/navigation/drawer-headline.js.map +1 -1
- package/navigation/drawer-item.d.ts +3 -3
- package/navigation/drawer-item.d.ts.map +1 -1
- package/navigation/drawer-item.js +17 -12
- package/navigation/drawer-item.js.map +1 -1
- package/navigation/drawer.d.ts +2 -2
- package/navigation/drawer.d.ts.map +1 -1
- package/navigation/drawer.js +4 -4
- package/navigation/drawer.js.map +1 -1
- package/navigation/side-navigation.d.ts +9 -2
- package/navigation/side-navigation.d.ts.map +1 -1
- package/navigation/side-navigation.js +15 -8
- package/navigation/side-navigation.js.map +1 -1
- package/navigation-bar/navigation-bar-item.d.ts +40 -0
- package/navigation-bar/navigation-bar-item.d.ts.map +1 -0
- package/navigation-bar/navigation-bar-item.js +113 -0
- package/navigation-bar/navigation-bar-item.js.map +1 -0
- package/navigation-bar/navigation-bar-item.styles.d.ts +2 -0
- package/navigation-bar/navigation-bar-item.styles.d.ts.map +1 -0
- package/navigation-bar/navigation-bar-item.styles.js +101 -0
- package/navigation-bar/navigation-bar-item.styles.js.map +1 -0
- package/navigation-bar/navigation-bar.d.ts +40 -0
- package/navigation-bar/navigation-bar.d.ts.map +1 -0
- package/navigation-bar/navigation-bar.js +85 -0
- package/navigation-bar/navigation-bar.js.map +1 -0
- package/navigation-bar/navigation-bar.styles.d.ts +2 -0
- package/navigation-bar/navigation-bar.styles.d.ts.map +1 -0
- package/navigation-bar/navigation-bar.styles.js +44 -0
- package/navigation-bar/navigation-bar.styles.js.map +1 -0
- package/navigation-rail/navigation-rail-headline.d.ts +23 -0
- package/navigation-rail/navigation-rail-headline.d.ts.map +1 -0
- package/navigation-rail/navigation-rail-headline.js +28 -0
- package/navigation-rail/navigation-rail-headline.js.map +1 -0
- package/navigation-rail/navigation-rail-headline.styles.d.ts +2 -0
- package/navigation-rail/navigation-rail-headline.styles.d.ts.map +1 -0
- package/navigation-rail/navigation-rail-headline.styles.js +19 -0
- package/navigation-rail/navigation-rail-headline.styles.js.map +1 -0
- package/navigation-rail/navigation-rail-item.d.ts +58 -0
- package/navigation-rail/navigation-rail-item.d.ts.map +1 -0
- package/navigation-rail/navigation-rail-item.js +160 -0
- package/navigation-rail/navigation-rail-item.js.map +1 -0
- package/navigation-rail/navigation-rail-item.styles.d.ts +2 -0
- package/navigation-rail/navigation-rail-item.styles.d.ts.map +1 -0
- package/navigation-rail/navigation-rail-item.styles.js +182 -0
- package/navigation-rail/navigation-rail-item.styles.js.map +1 -0
- package/navigation-rail/navigation-rail.d.ts +66 -0
- package/navigation-rail/navigation-rail.d.ts.map +1 -0
- package/navigation-rail/navigation-rail.js +223 -0
- package/navigation-rail/navigation-rail.js.map +1 -0
- package/navigation-rail/navigation-rail.styles.d.ts +2 -0
- package/navigation-rail/navigation-rail.styles.d.ts.map +1 -0
- package/navigation-rail/navigation-rail.styles.js +220 -0
- package/navigation-rail/navigation-rail.styles.js.map +1 -0
- package/overflow-menu/overflow-menu.d.ts +8 -2
- package/overflow-menu/overflow-menu.d.ts.map +1 -1
- package/overflow-menu/overflow-menu.js +10 -1
- package/overflow-menu/overflow-menu.js.map +1 -1
- package/package.json +19 -3
- package/progress/circular-progress.d.ts +2 -2
- package/progress/circular-progress.d.ts.map +1 -1
- package/progress/circular-progress.js +6 -6
- package/progress/circular-progress.js.map +1 -1
- package/progress/progress-bar.d.ts +2 -2
- package/progress/progress-bar.d.ts.map +1 -1
- package/progress/progress-bar.js +6 -6
- package/progress/progress-bar.js.map +1 -1
- package/radio/radio-list-item.d.ts +4 -4
- package/radio/radio-list-item.d.ts.map +1 -1
- package/radio/radio-list-item.js +5 -5
- package/radio/radio-list-item.js.map +1 -1
- package/radio/radio.d.ts +3 -3
- package/radio/radio.d.ts.map +1 -1
- package/radio/radio.js +6 -6
- package/radio/radio.js.map +1 -1
- package/ripple/ripple.d.ts +2 -2
- package/ripple/ripple.d.ts.map +1 -1
- package/ripple/ripple.js +9 -9
- package/ripple/ripple.js.map +1 -1
- package/scaffold/pane.d.ts +127 -0
- package/scaffold/pane.d.ts.map +1 -0
- package/scaffold/pane.js +220 -0
- package/scaffold/pane.js.map +1 -0
- package/scaffold/pane.styles.d.ts +2 -0
- package/scaffold/pane.styles.d.ts.map +1 -0
- package/scaffold/pane.styles.js +1909 -0
- package/scaffold/pane.styles.js.map +1 -0
- package/scaffold/scaffold.d.ts +45 -0
- package/scaffold/scaffold.d.ts.map +1 -0
- package/scaffold/scaffold.js +170 -0
- package/scaffold/scaffold.js.map +1 -0
- package/scaffold/scaffold.styles.d.ts +2 -0
- package/scaffold/scaffold.styles.d.ts.map +1 -0
- package/scaffold/scaffold.styles.js +69 -0
- package/scaffold/scaffold.styles.js.map +1 -0
- package/scaffold/scroll-container-context.d.ts +4 -0
- package/scaffold/scroll-container-context.d.ts.map +1 -0
- package/scaffold/scroll-container-context.js +3 -0
- package/scaffold/scroll-container-context.js.map +1 -0
- package/scss/utilities/_divider.scss +4 -0
- package/search/search.d.ts +3 -3
- package/search/search.d.ts.map +1 -1
- package/search/search.js +7 -7
- package/search/search.js.map +1 -1
- package/search/search.styles.d.ts.map +1 -1
- package/search/search.styles.js +7 -2
- package/search/search.styles.js.map +1 -1
- package/select/option.d.ts +3 -3
- package/select/option.d.ts.map +1 -1
- package/select/option.js +8 -8
- package/select/option.js.map +1 -1
- package/select/select-navigation-controller.d.ts +4 -4
- package/select/select-navigation-controller.d.ts.map +1 -1
- package/select/select-navigation-controller.js.map +1 -1
- package/select/select.d.ts +18 -12
- package/select/select.d.ts.map +1 -1
- package/select/select.js +77 -31
- package/select/select.js.map +1 -1
- package/shared/button-wrapper.d.ts +1 -1
- package/shared/button-wrapper.d.ts.map +1 -1
- package/shared/button-wrapper.js +8 -8
- package/shared/button-wrapper.js.map +1 -1
- package/shared/char-count-text-field/native-text-field-wrapper.d.ts +2 -2
- package/shared/char-count-text-field/native-text-field-wrapper.d.ts.map +1 -1
- package/shared/char-count-text-field/native-text-field-wrapper.js +6 -6
- package/shared/char-count-text-field/native-text-field-wrapper.js.map +1 -1
- package/shared/menu-field/menu-field-navigation-controller.d.ts +3 -3
- package/shared/menu-field/menu-field-navigation-controller.d.ts.map +1 -1
- package/shared/menu-field/menu-field-navigation-controller.js.map +1 -1
- package/shared/menu-field/menu-field.d.ts +5 -5
- package/shared/menu-field/menu-field.d.ts.map +1 -1
- package/shared/menu-field/menu-field.js.map +1 -1
- package/shared/selection-control/selection-control-list-item.d.ts +2 -2
- package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
- package/shared/selection-control/selection-control-list-item.js +10 -1
- package/shared/selection-control/selection-control-list-item.js.map +1 -1
- package/shared/selection-control/selection-control.d.ts +1 -1
- package/shared/selection-control/selection-control.d.ts.map +1 -1
- package/shared/selection-control/selection-control.js +15 -7
- package/shared/selection-control/selection-control.js.map +1 -1
- package/shared/sets/set-base.d.ts +1 -1
- package/shared/sets/set-base.d.ts.map +1 -1
- package/shared/sets/set-base.js +2 -2
- package/shared/sets/set-base.js.map +1 -1
- package/shared/text-field-base/text-field-base.d.ts +34 -2
- package/shared/text-field-base/text-field-base.d.ts.map +1 -1
- package/shared/text-field-base/text-field-base.js +63 -4
- package/shared/text-field-base/text-field-base.js.map +1 -1
- package/skills/badge/SKILL.md +43 -0
- package/skills/buttons/SKILL.md +115 -0
- package/skills/card/SKILL.md +162 -0
- package/skills/chips/SKILL.md +95 -0
- package/skills/collapse/SKILL.md +37 -0
- package/skills/datepicker/SKILL.md +110 -0
- package/skills/dialog/SKILL.md +92 -0
- package/skills/drawer/SKILL.md +94 -0
- package/skills/expansion-panel/SKILL.md +65 -0
- package/skills/fab/SKILL.md +79 -0
- package/skills/list/SKILL.md +105 -0
- package/skills/menu/SKILL.md +120 -0
- package/skills/navigation-bar/SKILL.md +87 -0
- package/skills/navigation-rail/SKILL.md +127 -0
- package/skills/overview/SKILL.md +44 -0
- package/skills/progress/SKILL.md +63 -0
- package/skills/scaffold/SKILL.md +392 -0
- package/skills/search/SKILL.md +65 -0
- package/skills/select/SKILL.md +120 -0
- package/skills/selection-controls/SKILL.md +88 -0
- package/skills/setup/SKILL.md +58 -0
- package/skills/slider/SKILL.md +119 -0
- package/skills/snackbar/SKILL.md +70 -0
- package/skills/tab-bar/SKILL.md +55 -0
- package/skills/text-field/SKILL.md +114 -0
- package/skills/theming/SKILL.md +80 -0
- package/skills/top-app-bar/SKILL.md +64 -0
- package/skills/typeahead/SKILL.md +113 -0
- package/slider/slider.d.ts +73 -0
- package/slider/slider.d.ts.map +1 -0
- package/slider/slider.js +506 -0
- package/slider/slider.js.map +1 -0
- package/slider/slider.styles.d.ts +2 -0
- package/slider/slider.styles.d.ts.map +1 -0
- package/slider/slider.styles.js +292 -0
- package/slider/slider.styles.js.map +1 -0
- package/snackbar/snackbar.d.ts +4 -4
- package/snackbar/snackbar.d.ts.map +1 -1
- package/snackbar/snackbar.js +28 -28
- package/snackbar/snackbar.js.map +1 -1
- package/snackbar/snackbar.styles.js +1 -1
- package/snackbar/snackbar.styles.js.map +1 -1
- package/switch/switch-list-item.d.ts +4 -4
- package/switch/switch-list-item.d.ts.map +1 -1
- package/switch/switch-list-item.js +5 -5
- package/switch/switch-list-item.js.map +1 -1
- package/switch/switch.d.ts +3 -3
- package/switch/switch.d.ts.map +1 -1
- package/switch/switch.js +5 -5
- package/switch/switch.js.map +1 -1
- package/tab-bar/tab-bar.d.ts +6 -6
- package/tab-bar/tab-bar.d.ts.map +1 -1
- package/tab-bar/tab-bar.js +40 -23
- package/tab-bar/tab-bar.js.map +1 -1
- package/tab-bar/tab.d.ts +5 -5
- package/tab-bar/tab.d.ts.map +1 -1
- package/tab-bar/tab.js +9 -9
- package/tab-bar/tab.js.map +1 -1
- package/text-area/text-area.d.ts +3 -3
- package/text-area/text-area.d.ts.map +1 -1
- package/text-area/text-area.js +9 -9
- package/text-area/text-area.js.map +1 -1
- package/text-field/text-field.d.ts +15 -3
- package/text-field/text-field.d.ts.map +1 -1
- package/text-field/text-field.js +46 -13
- package/text-field/text-field.js.map +1 -1
- package/typeahead/highlight.d.ts +2 -2
- package/typeahead/highlight.d.ts.map +1 -1
- package/typeahead/highlight.js +7 -7
- package/typeahead/highlight.js.map +1 -1
- package/typeahead/typeahead.d.ts +7 -7
- package/typeahead/typeahead.d.ts.map +1 -1
- package/typeahead/typeahead.js +22 -18
- package/typeahead/typeahead.js.map +1 -1
- package/vscode.html-custom-data.json +870 -481
package/slider/slider.js
ADDED
|
@@ -0,0 +1,506 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html, LitElement, nothing } from 'lit';
|
|
3
|
+
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
4
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
+
import { live } from 'lit/directives/live.js';
|
|
6
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
7
|
+
import { styles as baseStyles } from '../shared/base.styles.js';
|
|
8
|
+
import { styles } from './slider.styles.js';
|
|
9
|
+
// Px distance from handle center to track-segment edge: handle-width/2 + 6dp handle-gap.
|
|
10
|
+
const SIZE_GAP_PX = {
|
|
11
|
+
'extra-small': 8, // 4/2 + 6
|
|
12
|
+
small: 8,
|
|
13
|
+
medium: 9, // 6/2 + 6
|
|
14
|
+
large: 9,
|
|
15
|
+
'extra-large': 10, // 8/2 + 6
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Material 3 expressive slider. Single-thumb by default; becomes a range slider
|
|
19
|
+
* when both `value-start` and `value-end` are set (or `range` is forced).
|
|
20
|
+
*
|
|
21
|
+
* @fires input - Dispatched continuously while dragging.
|
|
22
|
+
* @fires change - Dispatched when the user commits a value change.
|
|
23
|
+
* @csspart track - The track container.
|
|
24
|
+
* @csspart track-inactive-start - The inactive segment before the start handle (range mode only).
|
|
25
|
+
* @csspart track-active - The highlighted segment between (or up to) the thumbs.
|
|
26
|
+
* @csspart track-inactive-end - The inactive segment after the end handle.
|
|
27
|
+
* @csspart thumb - The thumb indicator (or the start thumb in range mode).
|
|
28
|
+
* @csspart thumb-end - The end thumb in range mode.
|
|
29
|
+
* @csspart value-indicator - The floating value indicator shown in `discrete` mode while dragging.
|
|
30
|
+
* @csspart stop-indicator - The dot at each end of the slider.
|
|
31
|
+
*/
|
|
32
|
+
let Slider = class Slider extends LitElement {
|
|
33
|
+
static { this.styles = [baseStyles, styles]; }
|
|
34
|
+
static { this.formAssociated = true; }
|
|
35
|
+
constructor() {
|
|
36
|
+
super();
|
|
37
|
+
/** Minimum value. */
|
|
38
|
+
this.min = 0;
|
|
39
|
+
/** Maximum value. */
|
|
40
|
+
this.max = 100;
|
|
41
|
+
/** Step increment. Use `0` for fully continuous values. */
|
|
42
|
+
this.step = 1;
|
|
43
|
+
/**
|
|
44
|
+
* Forces range mode. Auto-enabled when both `value-start` and `value-end`
|
|
45
|
+
* are provided.
|
|
46
|
+
*/
|
|
47
|
+
this.range = false;
|
|
48
|
+
/** Shows tick marks and a floating value indicator while dragging. */
|
|
49
|
+
this.discrete = false;
|
|
50
|
+
/** Shows tick marks without enabling the floating value indicator. */
|
|
51
|
+
this.ticks = false;
|
|
52
|
+
/** Disables the slider. */
|
|
53
|
+
this.disabled = false;
|
|
54
|
+
/** Form-association name. */
|
|
55
|
+
this.name = '';
|
|
56
|
+
/** Visual size variant. */
|
|
57
|
+
this.size = 'extra-small';
|
|
58
|
+
/** Custom formatter for the floating value indicator. */
|
|
59
|
+
this.labelFormat = (v) => String(v);
|
|
60
|
+
this._dragging = false;
|
|
61
|
+
this._activeThumb = null;
|
|
62
|
+
this._hoveredThumb = null;
|
|
63
|
+
this.#handleContainerPointerDown = (e) => {
|
|
64
|
+
if (this.disabled)
|
|
65
|
+
return;
|
|
66
|
+
// Ignore non-primary buttons.
|
|
67
|
+
if (e.button !== undefined && e.button !== 0)
|
|
68
|
+
return;
|
|
69
|
+
e.preventDefault();
|
|
70
|
+
const value = this.#pointerToValue(e.clientX);
|
|
71
|
+
const thumb = this.#closestThumb(value);
|
|
72
|
+
this.#beginDrag(thumb);
|
|
73
|
+
this.#setThumbValue(thumb, value);
|
|
74
|
+
// Intentionally do NOT focus the input on pointer interaction — that would inherit
|
|
75
|
+
// an active :focus-visible state from prior keyboard navigation and incorrectly show
|
|
76
|
+
// the focus ring on click. The user must Tab to the slider for keyboard control.
|
|
77
|
+
try {
|
|
78
|
+
this._container.setPointerCapture(e.pointerId);
|
|
79
|
+
}
|
|
80
|
+
catch { /* */ }
|
|
81
|
+
this._container.addEventListener('pointermove', this.#handleDragMove);
|
|
82
|
+
this._container.addEventListener('pointerup', this.#handleDragEnd, { once: true });
|
|
83
|
+
this._container.addEventListener('pointercancel', this.#handleDragEnd, { once: true });
|
|
84
|
+
};
|
|
85
|
+
this.#handleDragMove = (e) => {
|
|
86
|
+
if (!this._dragging || !this._activeThumb)
|
|
87
|
+
return;
|
|
88
|
+
const value = this.#pointerToValue(e.clientX);
|
|
89
|
+
this.#setThumbValue(this._activeThumb, value);
|
|
90
|
+
};
|
|
91
|
+
this.#handleDragEnd = () => {
|
|
92
|
+
this._container.removeEventListener('pointermove', this.#handleDragMove);
|
|
93
|
+
this.#endDrag();
|
|
94
|
+
this.#handleChange();
|
|
95
|
+
};
|
|
96
|
+
// Hover tracking — light up the state layer of the thumb nearest the pointer.
|
|
97
|
+
this.#handleHoverMove = (e) => {
|
|
98
|
+
if (this.disabled || this._dragging)
|
|
99
|
+
return;
|
|
100
|
+
const value = this.#pointerToValue(e.clientX);
|
|
101
|
+
this._hoveredThumb = this.#closestThumb(value);
|
|
102
|
+
};
|
|
103
|
+
this.#handleHoverLeave = () => {
|
|
104
|
+
if (!this._dragging)
|
|
105
|
+
this._hoveredThumb = null;
|
|
106
|
+
};
|
|
107
|
+
this.#endDrag = () => {
|
|
108
|
+
this._dragging = false;
|
|
109
|
+
this._activeThumb = null;
|
|
110
|
+
};
|
|
111
|
+
// Keyboard input on the native range inputs still updates the bound value.
|
|
112
|
+
this.#handleSingleInput = () => {
|
|
113
|
+
this.value = this._input.valueAsNumber;
|
|
114
|
+
this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
|
|
115
|
+
};
|
|
116
|
+
this.#handleStartInput = () => {
|
|
117
|
+
this.valueStart = Math.min(this._input.valueAsNumber, this.valueEnd);
|
|
118
|
+
this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
|
|
119
|
+
};
|
|
120
|
+
this.#handleEndInput = () => {
|
|
121
|
+
this.valueEnd = Math.max(this._inputEnd.valueAsNumber, this.valueStart);
|
|
122
|
+
this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
|
|
123
|
+
};
|
|
124
|
+
this.#handleChange = () => {
|
|
125
|
+
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
|
126
|
+
};
|
|
127
|
+
this.elementInternals = this.attachInternals();
|
|
128
|
+
}
|
|
129
|
+
get form() {
|
|
130
|
+
return this.elementInternals.form;
|
|
131
|
+
}
|
|
132
|
+
willUpdate(changed) {
|
|
133
|
+
if (changed.has('valueStart') || changed.has('valueEnd')) {
|
|
134
|
+
if (this.valueStart !== undefined && this.valueEnd !== undefined) {
|
|
135
|
+
this.range = true;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
if (this.range) {
|
|
139
|
+
if (this.valueStart === undefined)
|
|
140
|
+
this.valueStart = this.min;
|
|
141
|
+
if (this.valueEnd === undefined)
|
|
142
|
+
this.valueEnd = this.max;
|
|
143
|
+
if (this.valueStart > this.valueEnd) {
|
|
144
|
+
[this.valueStart, this.valueEnd] = [this.valueEnd, this.valueStart];
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
else if (this.value === undefined) {
|
|
148
|
+
this.value = (this.max - this.min) / 2 + this.min;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
firstUpdated() {
|
|
152
|
+
this.#updateFormValue();
|
|
153
|
+
}
|
|
154
|
+
updated(changed) {
|
|
155
|
+
if (changed.has('value') || changed.has('valueStart') || changed.has('valueEnd') || changed.has('name')) {
|
|
156
|
+
this.#updateFormValue();
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
render() {
|
|
160
|
+
const range = (this.max - this.min) || 1;
|
|
161
|
+
const startPct = this.range ? this.#pct(this.valueStart) : 0;
|
|
162
|
+
const endPct = this.range ? this.#pct(this.valueEnd) : this.#pct(this.value);
|
|
163
|
+
const tickCount = (this.discrete || this.ticks) && this.step > 0 ? Math.floor(range / this.step) + 1 : 0;
|
|
164
|
+
const gap = SIZE_GAP_PX[this.size];
|
|
165
|
+
const collapseStart = !this.range || startPct <= 0;
|
|
166
|
+
const collapseEnd = endPct >= 100;
|
|
167
|
+
// Handle position formula: walks the same coordinate system as the track segments
|
|
168
|
+
// and ticks, so a handle at value v sits exactly on the tick at v. The travel range is
|
|
169
|
+
// (container width − handle width) and the handle's center starts at handle-width/2.
|
|
170
|
+
const handlePos = (pct) => `calc(${pct / 100} * (100% - var(--_handle-width)) + var(--_handle-width) / 2)`;
|
|
171
|
+
const activeStart = !this.range
|
|
172
|
+
? '0'
|
|
173
|
+
: (collapseStart ? '0' : `calc(${startPct}% + ${gap}px)`);
|
|
174
|
+
const activeEnd = collapseEnd ? '0' : `calc(${100 - endPct}% + ${gap}px)`;
|
|
175
|
+
const activeRadius = this.#activeRadius(collapseStart, collapseEnd);
|
|
176
|
+
const fullR = 'calc(var(--_track-height) / 2)';
|
|
177
|
+
const innerR = 'var(--_inner-corner)';
|
|
178
|
+
const inactiveStartRadius = `${fullR} ${collapseStart ? fullR : innerR} ${collapseStart ? fullR : innerR} ${fullR}`;
|
|
179
|
+
const inactiveEndRadius = `${collapseEnd ? fullR : innerR} ${fullR} ${fullR} ${collapseEnd ? fullR : innerR}`;
|
|
180
|
+
return html `
|
|
181
|
+
<div
|
|
182
|
+
class="container ${classMap({ dragging: this._dragging, range: this.range, discrete: this.discrete })}"
|
|
183
|
+
@pointerdown=${this.#handleContainerPointerDown}
|
|
184
|
+
@pointermove=${this.#handleHoverMove}
|
|
185
|
+
@pointerleave=${this.#handleHoverLeave}
|
|
186
|
+
>
|
|
187
|
+
<div class="track" part="track">
|
|
188
|
+
${this.range && !collapseStart
|
|
189
|
+
? html `<div
|
|
190
|
+
class="segment inactive inactive-start"
|
|
191
|
+
part="track-inactive-start"
|
|
192
|
+
style=${styleMap({
|
|
193
|
+
insetInlineStart: '0',
|
|
194
|
+
insetInlineEnd: `calc(${100 - startPct}% + ${gap}px)`,
|
|
195
|
+
borderRadius: inactiveStartRadius,
|
|
196
|
+
})}
|
|
197
|
+
></div>`
|
|
198
|
+
: nothing}
|
|
199
|
+
<div
|
|
200
|
+
class="segment active"
|
|
201
|
+
part="track-active"
|
|
202
|
+
style=${styleMap({
|
|
203
|
+
insetInlineStart: activeStart,
|
|
204
|
+
insetInlineEnd: activeEnd,
|
|
205
|
+
borderRadius: activeRadius,
|
|
206
|
+
})}
|
|
207
|
+
></div>
|
|
208
|
+
${!collapseEnd
|
|
209
|
+
? html `<div
|
|
210
|
+
class="segment inactive inactive-end"
|
|
211
|
+
part="track-inactive-end"
|
|
212
|
+
style=${styleMap({
|
|
213
|
+
insetInlineStart: `calc(${endPct}% + ${gap}px)`,
|
|
214
|
+
insetInlineEnd: '0',
|
|
215
|
+
borderRadius: inactiveEndRadius,
|
|
216
|
+
})}
|
|
217
|
+
></div>`
|
|
218
|
+
: nothing}
|
|
219
|
+
${tickCount > 0 ? this.#renderTicks(tickCount, startPct, endPct, gap) : nothing}
|
|
220
|
+
${tickCount === 0
|
|
221
|
+
? html `<span
|
|
222
|
+
class="stop-indicator leading"
|
|
223
|
+
part="stop-indicator"
|
|
224
|
+
style=${styleMap({
|
|
225
|
+
backgroundColor: this.range && !collapseStart
|
|
226
|
+
? 'var(--_stop-indicator-inactive-color)'
|
|
227
|
+
: 'var(--_stop-indicator-active-color)',
|
|
228
|
+
})}
|
|
229
|
+
></span>
|
|
230
|
+
<span
|
|
231
|
+
class="stop-indicator trailing"
|
|
232
|
+
part="stop-indicator"
|
|
233
|
+
style=${styleMap({
|
|
234
|
+
backgroundColor: collapseEnd
|
|
235
|
+
? 'var(--_stop-indicator-active-color)'
|
|
236
|
+
: 'var(--_stop-indicator-inactive-color)',
|
|
237
|
+
})}
|
|
238
|
+
></span>`
|
|
239
|
+
: nothing}
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
${this.range
|
|
243
|
+
? html `
|
|
244
|
+
<input
|
|
245
|
+
id="input"
|
|
246
|
+
class="native"
|
|
247
|
+
type="range"
|
|
248
|
+
aria-label="Start value"
|
|
249
|
+
.min=${String(this.min)}
|
|
250
|
+
.max=${String(this.valueEnd)}
|
|
251
|
+
step=${this.step || 'any'}
|
|
252
|
+
.value=${live(String(this.valueStart))}
|
|
253
|
+
?disabled=${this.disabled}
|
|
254
|
+
@input=${this.#handleStartInput}
|
|
255
|
+
@change=${this.#handleChange}
|
|
256
|
+
/>
|
|
257
|
+
<input
|
|
258
|
+
id="input-end"
|
|
259
|
+
class="native"
|
|
260
|
+
type="range"
|
|
261
|
+
aria-label="End value"
|
|
262
|
+
.min=${String(this.valueStart)}
|
|
263
|
+
.max=${String(this.max)}
|
|
264
|
+
step=${this.step || 'any'}
|
|
265
|
+
.value=${live(String(this.valueEnd))}
|
|
266
|
+
?disabled=${this.disabled}
|
|
267
|
+
@input=${this.#handleEndInput}
|
|
268
|
+
@change=${this.#handleChange}
|
|
269
|
+
/>
|
|
270
|
+
<div
|
|
271
|
+
class=${classMap({
|
|
272
|
+
thumb: true,
|
|
273
|
+
'thumb-start': true,
|
|
274
|
+
'active-thumb': this._activeThumb === 'start',
|
|
275
|
+
hovered: this._hoveredThumb === 'start',
|
|
276
|
+
})}
|
|
277
|
+
part="thumb"
|
|
278
|
+
style=${styleMap({ insetInlineStart: handlePos(startPct) })}
|
|
279
|
+
>
|
|
280
|
+
<span class="focus-ring"></span>
|
|
281
|
+
${this.#renderValueIndicator('start', this.valueStart)}
|
|
282
|
+
</div>
|
|
283
|
+
<div
|
|
284
|
+
class=${classMap({
|
|
285
|
+
thumb: true,
|
|
286
|
+
'thumb-end': true,
|
|
287
|
+
'active-thumb': this._activeThumb === 'end',
|
|
288
|
+
hovered: this._hoveredThumb === 'end',
|
|
289
|
+
})}
|
|
290
|
+
part="thumb-end"
|
|
291
|
+
style=${styleMap({ insetInlineStart: handlePos(endPct) })}
|
|
292
|
+
>
|
|
293
|
+
<span class="focus-ring"></span>
|
|
294
|
+
${this.#renderValueIndicator('end', this.valueEnd)}
|
|
295
|
+
</div>
|
|
296
|
+
`
|
|
297
|
+
: html `
|
|
298
|
+
<input
|
|
299
|
+
id="input"
|
|
300
|
+
class="native"
|
|
301
|
+
type="range"
|
|
302
|
+
aria-label=${this.getAttribute('aria-label') ?? 'Slider'}
|
|
303
|
+
.min=${String(this.min)}
|
|
304
|
+
.max=${String(this.max)}
|
|
305
|
+
step=${this.step || 'any'}
|
|
306
|
+
.value=${live(String(this.value))}
|
|
307
|
+
?disabled=${this.disabled}
|
|
308
|
+
@input=${this.#handleSingleInput}
|
|
309
|
+
@change=${this.#handleChange}
|
|
310
|
+
/>
|
|
311
|
+
<div
|
|
312
|
+
class=${classMap({
|
|
313
|
+
thumb: true,
|
|
314
|
+
'active-thumb': this._activeThumb === 'end',
|
|
315
|
+
hovered: this._hoveredThumb === 'end',
|
|
316
|
+
})}
|
|
317
|
+
part="thumb"
|
|
318
|
+
style=${styleMap({ insetInlineStart: handlePos(endPct) })}
|
|
319
|
+
>
|
|
320
|
+
<span class="focus-ring"></span>
|
|
321
|
+
${this.#renderValueIndicator('end', this.value)}
|
|
322
|
+
</div>
|
|
323
|
+
`}
|
|
324
|
+
</div>
|
|
325
|
+
`;
|
|
326
|
+
}
|
|
327
|
+
#activeRadius(collapseStart, collapseEnd) {
|
|
328
|
+
const fullR = 'calc(var(--_track-height) / 2)';
|
|
329
|
+
const innerR = 'var(--_inner-corner)';
|
|
330
|
+
if (this.range) {
|
|
331
|
+
const sR = collapseStart ? fullR : innerR;
|
|
332
|
+
const eR = collapseEnd ? fullR : innerR;
|
|
333
|
+
return `${sR} ${eR} ${eR} ${sR}`;
|
|
334
|
+
}
|
|
335
|
+
const eR = collapseEnd ? fullR : innerR;
|
|
336
|
+
return `${fullR} ${eR} ${eR} ${fullR}`;
|
|
337
|
+
}
|
|
338
|
+
#renderTicks(count, startPct, endPct, gapPx) {
|
|
339
|
+
const ticks = [];
|
|
340
|
+
const trackWidth = this.offsetWidth || 200;
|
|
341
|
+
const gapPct = (gapPx / trackWidth) * 100;
|
|
342
|
+
for (let i = 0; i < count; i++) {
|
|
343
|
+
const pct = (i / (count - 1)) * 100;
|
|
344
|
+
const inActive = pct >= startPct && pct <= endPct;
|
|
345
|
+
const inGap = Math.abs(pct - endPct) < gapPct || (this.range && Math.abs(pct - startPct) < gapPct);
|
|
346
|
+
ticks.push(html `<span
|
|
347
|
+
class=${classMap({ tick: true, active: inActive, 'in-gap': inGap })}
|
|
348
|
+
style=${styleMap({ insetInlineStart: `${pct}%` })}
|
|
349
|
+
></span>`);
|
|
350
|
+
}
|
|
351
|
+
return html `<div class="ticks">${ticks}</div>`;
|
|
352
|
+
}
|
|
353
|
+
#renderValueIndicator(thumb, value) {
|
|
354
|
+
if (!this.discrete)
|
|
355
|
+
return nothing;
|
|
356
|
+
if (!this._dragging || this._activeThumb !== thumb)
|
|
357
|
+
return nothing;
|
|
358
|
+
return html `<div class="value-indicator" part="value-indicator">${this.labelFormat(value)}</div>`;
|
|
359
|
+
}
|
|
360
|
+
#pct(value) {
|
|
361
|
+
const range = (this.max - this.min) || 1;
|
|
362
|
+
return ((value - this.min) / range) * 100;
|
|
363
|
+
}
|
|
364
|
+
// Determine slider value from pointer x (clamped to [min, max]).
|
|
365
|
+
#pointerToValue(clientX) {
|
|
366
|
+
const rect = this._container.getBoundingClientRect();
|
|
367
|
+
const padPx = this.#paddingPx();
|
|
368
|
+
const usableWidth = rect.width - padPx * 2;
|
|
369
|
+
const local = Math.max(0, Math.min(usableWidth, clientX - rect.left - padPx));
|
|
370
|
+
const ratio = usableWidth > 0 ? local / usableWidth : 0;
|
|
371
|
+
const raw = this.min + ratio * (this.max - this.min);
|
|
372
|
+
return this.#snap(raw);
|
|
373
|
+
}
|
|
374
|
+
#snap(value) {
|
|
375
|
+
if (!this.step || this.step <= 0)
|
|
376
|
+
return value;
|
|
377
|
+
const steps = Math.round((value - this.min) / this.step);
|
|
378
|
+
return Math.max(this.min, Math.min(this.max, this.min + steps * this.step));
|
|
379
|
+
}
|
|
380
|
+
#paddingPx() {
|
|
381
|
+
// Matches container's padding-inline = handle-width/2 (4-8px depending on size).
|
|
382
|
+
const cs = getComputedStyle(this);
|
|
383
|
+
const handleW = parseFloat(cs.getPropertyValue('--_handle-width')) || 4;
|
|
384
|
+
return handleW / 2;
|
|
385
|
+
}
|
|
386
|
+
#closestThumb(value) {
|
|
387
|
+
if (!this.range)
|
|
388
|
+
return 'end';
|
|
389
|
+
const startDist = Math.abs(value - (this.valueStart ?? this.min));
|
|
390
|
+
const endDist = Math.abs(value - (this.valueEnd ?? this.max));
|
|
391
|
+
// Bias to 'end' when distances tie and pointer is to the right of midpoint,
|
|
392
|
+
// so clicking past either thumb still moves the natural one.
|
|
393
|
+
if (startDist === endDist) {
|
|
394
|
+
const mid = ((this.valueStart ?? this.min) + (this.valueEnd ?? this.max)) / 2;
|
|
395
|
+
return value < mid ? 'start' : 'end';
|
|
396
|
+
}
|
|
397
|
+
return startDist <= endDist ? 'start' : 'end';
|
|
398
|
+
}
|
|
399
|
+
#handleContainerPointerDown;
|
|
400
|
+
#handleDragMove;
|
|
401
|
+
#handleDragEnd;
|
|
402
|
+
// Hover tracking — light up the state layer of the thumb nearest the pointer.
|
|
403
|
+
#handleHoverMove;
|
|
404
|
+
#handleHoverLeave;
|
|
405
|
+
#setThumbValue(thumb, value) {
|
|
406
|
+
if (this.range) {
|
|
407
|
+
if (thumb === 'start') {
|
|
408
|
+
this.valueStart = Math.min(value, this.valueEnd);
|
|
409
|
+
}
|
|
410
|
+
else {
|
|
411
|
+
this.valueEnd = Math.max(value, this.valueStart);
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
else {
|
|
415
|
+
this.value = value;
|
|
416
|
+
}
|
|
417
|
+
this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
|
|
418
|
+
}
|
|
419
|
+
#beginDrag(thumb) {
|
|
420
|
+
this._activeThumb = thumb;
|
|
421
|
+
this._dragging = true;
|
|
422
|
+
this._hoveredThumb = thumb;
|
|
423
|
+
}
|
|
424
|
+
#endDrag;
|
|
425
|
+
// Keyboard input on the native range inputs still updates the bound value.
|
|
426
|
+
#handleSingleInput;
|
|
427
|
+
#handleStartInput;
|
|
428
|
+
#handleEndInput;
|
|
429
|
+
#handleChange;
|
|
430
|
+
#updateFormValue() {
|
|
431
|
+
if (!this.name) {
|
|
432
|
+
this.elementInternals.setFormValue(null);
|
|
433
|
+
return;
|
|
434
|
+
}
|
|
435
|
+
if (this.range) {
|
|
436
|
+
const data = new FormData();
|
|
437
|
+
data.append(`${this.name}-start`, String(this.valueStart ?? this.min));
|
|
438
|
+
data.append(`${this.name}-end`, String(this.valueEnd ?? this.max));
|
|
439
|
+
this.elementInternals.setFormValue(data);
|
|
440
|
+
return;
|
|
441
|
+
}
|
|
442
|
+
this.elementInternals.setFormValue(String(this.value ?? ''));
|
|
443
|
+
}
|
|
444
|
+
};
|
|
445
|
+
__decorate([
|
|
446
|
+
property({ type: Number })
|
|
447
|
+
], Slider.prototype, "min", void 0);
|
|
448
|
+
__decorate([
|
|
449
|
+
property({ type: Number })
|
|
450
|
+
], Slider.prototype, "max", void 0);
|
|
451
|
+
__decorate([
|
|
452
|
+
property({ type: Number })
|
|
453
|
+
], Slider.prototype, "step", void 0);
|
|
454
|
+
__decorate([
|
|
455
|
+
property({ type: Number })
|
|
456
|
+
], Slider.prototype, "value", void 0);
|
|
457
|
+
__decorate([
|
|
458
|
+
property({ type: Number, attribute: 'value-start' })
|
|
459
|
+
], Slider.prototype, "valueStart", void 0);
|
|
460
|
+
__decorate([
|
|
461
|
+
property({ type: Number, attribute: 'value-end' })
|
|
462
|
+
], Slider.prototype, "valueEnd", void 0);
|
|
463
|
+
__decorate([
|
|
464
|
+
property({ type: Boolean, reflect: true })
|
|
465
|
+
], Slider.prototype, "range", void 0);
|
|
466
|
+
__decorate([
|
|
467
|
+
property({ type: Boolean, reflect: true })
|
|
468
|
+
], Slider.prototype, "discrete", void 0);
|
|
469
|
+
__decorate([
|
|
470
|
+
property({ type: Boolean, reflect: true })
|
|
471
|
+
], Slider.prototype, "ticks", void 0);
|
|
472
|
+
__decorate([
|
|
473
|
+
property({ type: Boolean, reflect: true })
|
|
474
|
+
], Slider.prototype, "disabled", void 0);
|
|
475
|
+
__decorate([
|
|
476
|
+
property({ reflect: true })
|
|
477
|
+
], Slider.prototype, "name", void 0);
|
|
478
|
+
__decorate([
|
|
479
|
+
property({ reflect: true })
|
|
480
|
+
], Slider.prototype, "size", void 0);
|
|
481
|
+
__decorate([
|
|
482
|
+
property({ attribute: false })
|
|
483
|
+
], Slider.prototype, "labelFormat", void 0);
|
|
484
|
+
__decorate([
|
|
485
|
+
state()
|
|
486
|
+
], Slider.prototype, "_dragging", void 0);
|
|
487
|
+
__decorate([
|
|
488
|
+
state()
|
|
489
|
+
], Slider.prototype, "_activeThumb", void 0);
|
|
490
|
+
__decorate([
|
|
491
|
+
state()
|
|
492
|
+
], Slider.prototype, "_hoveredThumb", void 0);
|
|
493
|
+
__decorate([
|
|
494
|
+
query('#input')
|
|
495
|
+
], Slider.prototype, "_input", void 0);
|
|
496
|
+
__decorate([
|
|
497
|
+
query('#input-end')
|
|
498
|
+
], Slider.prototype, "_inputEnd", void 0);
|
|
499
|
+
__decorate([
|
|
500
|
+
query('.container')
|
|
501
|
+
], Slider.prototype, "_container", void 0);
|
|
502
|
+
Slider = __decorate([
|
|
503
|
+
customElement('u-slider')
|
|
504
|
+
], Slider);
|
|
505
|
+
export { Slider };
|
|
506
|
+
//# sourceMappingURL=slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../src/slider/slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './slider.styles.js';\n\ntype LabelFormat = (value: number) => string;\ntype Thumb = 'start' | 'end';\n\nexport type SliderSize = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n\n// Px distance from handle center to track-segment edge: handle-width/2 + 6dp handle-gap.\nconst SIZE_GAP_PX: Record<SliderSize, number> = {\n 'extra-small': 8, // 4/2 + 6\n small: 8,\n medium: 9, // 6/2 + 6\n large: 9,\n 'extra-large': 10, // 8/2 + 6\n};\n\n/**\n * Material 3 expressive slider. Single-thumb by default; becomes a range slider\n * when both `value-start` and `value-end` are set (or `range` is forced).\n *\n * @fires input - Dispatched continuously while dragging.\n * @fires change - Dispatched when the user commits a value change.\n * @csspart track - The track container.\n * @csspart track-inactive-start - The inactive segment before the start handle (range mode only).\n * @csspart track-active - The highlighted segment between (or up to) the thumbs.\n * @csspart track-inactive-end - The inactive segment after the end handle.\n * @csspart thumb - The thumb indicator (or the start thumb in range mode).\n * @csspart thumb-end - The end thumb in range mode.\n * @csspart value-indicator - The floating value indicator shown in `discrete` mode while dragging.\n * @csspart stop-indicator - The dot at each end of the slider.\n */\n@customElement('u-slider')\nexport class Slider extends LitElement {\n static override styles = [baseStyles, styles];\n\n static readonly formAssociated = true;\n\n protected readonly elementInternals: ElementInternals;\n\n constructor() {\n super();\n this.elementInternals = this.attachInternals();\n }\n\n /** Minimum value. */\n @property({ type: Number }) min = 0;\n\n /** Maximum value. */\n @property({ type: Number }) max = 100;\n\n /** Step increment. Use `0` for fully continuous values. */\n @property({ type: Number }) step = 1;\n\n /** Current value (single-thumb mode). */\n @property({ type: Number }) value: number | undefined;\n\n /** Start value (range mode). */\n @property({ type: Number, attribute: 'value-start' }) valueStart: number | undefined;\n\n /** End value (range mode). */\n @property({ type: Number, attribute: 'value-end' }) valueEnd: number | undefined;\n\n /**\n * Forces range mode. Auto-enabled when both `value-start` and `value-end`\n * are provided.\n */\n @property({ type: Boolean, reflect: true }) range = false;\n\n /** Shows tick marks and a floating value indicator while dragging. */\n @property({ type: Boolean, reflect: true }) discrete = false;\n\n /** Shows tick marks without enabling the floating value indicator. */\n @property({ type: Boolean, reflect: true }) ticks = false;\n\n /** Disables the slider. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Form-association name. */\n @property({ reflect: true }) name = '';\n\n /** Visual size variant. */\n @property({ reflect: true }) size: SliderSize = 'extra-small';\n\n /** Custom formatter for the floating value indicator. */\n @property({ attribute: false }) labelFormat: LabelFormat = (v) => String(v);\n\n @state() private _dragging = false;\n @state() private _activeThumb: Thumb | null = null;\n @state() private _hoveredThumb: Thumb | null = null;\n\n @query('#input') private readonly _input!: HTMLInputElement;\n @query('#input-end') private readonly _inputEnd!: HTMLInputElement | null;\n @query('.container') private readonly _container!: HTMLElement;\n\n get form(): HTMLFormElement | null {\n return this.elementInternals.form;\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (changed.has('valueStart') || changed.has('valueEnd')) {\n if (this.valueStart !== undefined && this.valueEnd !== undefined) {\n this.range = true;\n }\n }\n\n if (this.range) {\n if (this.valueStart === undefined) this.valueStart = this.min;\n if (this.valueEnd === undefined) this.valueEnd = this.max;\n if (this.valueStart > this.valueEnd) {\n [this.valueStart, this.valueEnd] = [this.valueEnd, this.valueStart];\n }\n } else if (this.value === undefined) {\n this.value = (this.max - this.min) / 2 + this.min;\n }\n }\n\n protected override firstUpdated(): void {\n this.#updateFormValue();\n }\n\n protected override updated(changed: PropertyValues): void {\n if (changed.has('value') || changed.has('valueStart') || changed.has('valueEnd') || changed.has('name')) {\n this.#updateFormValue();\n }\n }\n\n override render(): HTMLTemplateResult {\n const range = (this.max - this.min) || 1;\n const startPct = this.range ? this.#pct(this.valueStart!) : 0;\n const endPct = this.range ? this.#pct(this.valueEnd!) : this.#pct(this.value!);\n const tickCount = (this.discrete || this.ticks) && this.step > 0 ? Math.floor(range / this.step) + 1 : 0;\n const gap = SIZE_GAP_PX[this.size];\n\n const collapseStart = !this.range || startPct <= 0;\n const collapseEnd = endPct >= 100;\n\n // Handle position formula: walks the same coordinate system as the track segments\n // and ticks, so a handle at value v sits exactly on the tick at v. The travel range is\n // (container width − handle width) and the handle's center starts at handle-width/2.\n const handlePos = (pct: number) =>\n `calc(${pct / 100} * (100% - var(--_handle-width)) + var(--_handle-width) / 2)`;\n\n const activeStart = !this.range\n ? '0'\n : (collapseStart ? '0' : `calc(${startPct}% + ${gap}px)`);\n const activeEnd = collapseEnd ? '0' : `calc(${100 - endPct}% + ${gap}px)`;\n const activeRadius = this.#activeRadius(collapseStart, collapseEnd);\n\n const fullR = 'calc(var(--_track-height) / 2)';\n const innerR = 'var(--_inner-corner)';\n const inactiveStartRadius = `${fullR} ${collapseStart ? fullR : innerR} ${collapseStart ? fullR : innerR} ${fullR}`;\n const inactiveEndRadius = `${collapseEnd ? fullR : innerR} ${fullR} ${fullR} ${collapseEnd ? fullR : innerR}`;\n\n return html`\n <div\n class=\"container ${classMap({ dragging: this._dragging, range: this.range, discrete: this.discrete })}\"\n @pointerdown=${this.#handleContainerPointerDown}\n @pointermove=${this.#handleHoverMove}\n @pointerleave=${this.#handleHoverLeave}\n >\n <div class=\"track\" part=\"track\">\n ${this.range && !collapseStart\n ? html`<div\n class=\"segment inactive inactive-start\"\n part=\"track-inactive-start\"\n style=${styleMap({\n insetInlineStart: '0',\n insetInlineEnd: `calc(${100 - startPct}% + ${gap}px)`,\n borderRadius: inactiveStartRadius,\n })}\n ></div>`\n : nothing}\n <div\n class=\"segment active\"\n part=\"track-active\"\n style=${styleMap({\n insetInlineStart: activeStart,\n insetInlineEnd: activeEnd,\n borderRadius: activeRadius,\n })}\n ></div>\n ${!collapseEnd\n ? html`<div\n class=\"segment inactive inactive-end\"\n part=\"track-inactive-end\"\n style=${styleMap({\n insetInlineStart: `calc(${endPct}% + ${gap}px)`,\n insetInlineEnd: '0',\n borderRadius: inactiveEndRadius,\n })}\n ></div>`\n : nothing}\n ${tickCount > 0 ? this.#renderTicks(tickCount, startPct, endPct, gap) : nothing}\n ${tickCount === 0\n ? html`<span\n class=\"stop-indicator leading\"\n part=\"stop-indicator\"\n style=${styleMap({\n backgroundColor: this.range && !collapseStart\n ? 'var(--_stop-indicator-inactive-color)'\n : 'var(--_stop-indicator-active-color)',\n })}\n ></span>\n <span\n class=\"stop-indicator trailing\"\n part=\"stop-indicator\"\n style=${styleMap({\n backgroundColor: collapseEnd\n ? 'var(--_stop-indicator-active-color)'\n : 'var(--_stop-indicator-inactive-color)',\n })}\n ></span>`\n : nothing}\n </div>\n\n ${this.range\n ? html`\n <input\n id=\"input\"\n class=\"native\"\n type=\"range\"\n aria-label=\"Start value\"\n .min=${String(this.min)}\n .max=${String(this.valueEnd!)}\n step=${this.step || 'any'}\n .value=${live(String(this.valueStart!))}\n ?disabled=${this.disabled}\n @input=${this.#handleStartInput}\n @change=${this.#handleChange}\n />\n <input\n id=\"input-end\"\n class=\"native\"\n type=\"range\"\n aria-label=\"End value\"\n .min=${String(this.valueStart!)}\n .max=${String(this.max)}\n step=${this.step || 'any'}\n .value=${live(String(this.valueEnd!))}\n ?disabled=${this.disabled}\n @input=${this.#handleEndInput}\n @change=${this.#handleChange}\n />\n <div\n class=${classMap({\n thumb: true,\n 'thumb-start': true,\n 'active-thumb': this._activeThumb === 'start',\n hovered: this._hoveredThumb === 'start',\n })}\n part=\"thumb\"\n style=${styleMap({ insetInlineStart: handlePos(startPct) })}\n >\n <span class=\"focus-ring\"></span>\n ${this.#renderValueIndicator('start', this.valueStart!)}\n </div>\n <div\n class=${classMap({\n thumb: true,\n 'thumb-end': true,\n 'active-thumb': this._activeThumb === 'end',\n hovered: this._hoveredThumb === 'end',\n })}\n part=\"thumb-end\"\n style=${styleMap({ insetInlineStart: handlePos(endPct) })}\n >\n <span class=\"focus-ring\"></span>\n ${this.#renderValueIndicator('end', this.valueEnd!)}\n </div>\n `\n : html`\n <input\n id=\"input\"\n class=\"native\"\n type=\"range\"\n aria-label=${this.getAttribute('aria-label') ?? 'Slider'}\n .min=${String(this.min)}\n .max=${String(this.max)}\n step=${this.step || 'any'}\n .value=${live(String(this.value!))}\n ?disabled=${this.disabled}\n @input=${this.#handleSingleInput}\n @change=${this.#handleChange}\n />\n <div\n class=${classMap({\n thumb: true,\n 'active-thumb': this._activeThumb === 'end',\n hovered: this._hoveredThumb === 'end',\n })}\n part=\"thumb\"\n style=${styleMap({ insetInlineStart: handlePos(endPct) })}\n >\n <span class=\"focus-ring\"></span>\n ${this.#renderValueIndicator('end', this.value!)}\n </div>\n `}\n </div>\n `;\n }\n\n #activeRadius(collapseStart: boolean, collapseEnd: boolean): string {\n const fullR = 'calc(var(--_track-height) / 2)';\n const innerR = 'var(--_inner-corner)';\n if (this.range) {\n const sR = collapseStart ? fullR : innerR;\n const eR = collapseEnd ? fullR : innerR;\n return `${sR} ${eR} ${eR} ${sR}`;\n }\n const eR = collapseEnd ? fullR : innerR;\n return `${fullR} ${eR} ${eR} ${fullR}`;\n }\n\n #renderTicks(count: number, startPct: number, endPct: number, gapPx: number): HTMLTemplateResult {\n const ticks = [];\n const trackWidth = this.offsetWidth || 200;\n const gapPct = (gapPx / trackWidth) * 100;\n for (let i = 0; i < count; i++) {\n const pct = (i / (count - 1)) * 100;\n const inActive = pct >= startPct && pct <= endPct;\n const inGap =\n Math.abs(pct - endPct) < gapPct || (this.range && Math.abs(pct - startPct) < gapPct);\n ticks.push(html`<span\n class=${classMap({ tick: true, active: inActive, 'in-gap': inGap })}\n style=${styleMap({ insetInlineStart: `${pct}%` })}\n ></span>`);\n }\n return html`<div class=\"ticks\">${ticks}</div>`;\n }\n\n #renderValueIndicator(thumb: Thumb, value: number): HTMLTemplateResult | typeof nothing {\n if (!this.discrete) return nothing;\n if (!this._dragging || this._activeThumb !== thumb) return nothing;\n return html`<div class=\"value-indicator\" part=\"value-indicator\">${this.labelFormat(value)}</div>`;\n }\n\n #pct(value: number): number {\n const range = (this.max - this.min) || 1;\n return ((value - this.min) / range) * 100;\n }\n\n // Determine slider value from pointer x (clamped to [min, max]).\n #pointerToValue(clientX: number): number {\n const rect = this._container.getBoundingClientRect();\n const padPx = this.#paddingPx();\n const usableWidth = rect.width - padPx * 2;\n const local = Math.max(0, Math.min(usableWidth, clientX - rect.left - padPx));\n const ratio = usableWidth > 0 ? local / usableWidth : 0;\n const raw = this.min + ratio * (this.max - this.min);\n return this.#snap(raw);\n }\n\n #snap(value: number): number {\n if (!this.step || this.step <= 0) return value;\n const steps = Math.round((value - this.min) / this.step);\n return Math.max(this.min, Math.min(this.max, this.min + steps * this.step));\n }\n\n #paddingPx(): number {\n // Matches container's padding-inline = handle-width/2 (4-8px depending on size).\n const cs = getComputedStyle(this);\n const handleW = parseFloat(cs.getPropertyValue('--_handle-width')) || 4;\n return handleW / 2;\n }\n\n #closestThumb(value: number): Thumb {\n if (!this.range) return 'end';\n const startDist = Math.abs(value - (this.valueStart ?? this.min));\n const endDist = Math.abs(value - (this.valueEnd ?? this.max));\n // Bias to 'end' when distances tie and pointer is to the right of midpoint,\n // so clicking past either thumb still moves the natural one.\n if (startDist === endDist) {\n const mid = ((this.valueStart ?? this.min) + (this.valueEnd ?? this.max)) / 2;\n return value < mid ? 'start' : 'end';\n }\n return startDist <= endDist ? 'start' : 'end';\n }\n\n #handleContainerPointerDown = (e: PointerEvent) => {\n if (this.disabled) return;\n // Ignore non-primary buttons.\n if (e.button !== undefined && e.button !== 0) return;\n e.preventDefault();\n const value = this.#pointerToValue(e.clientX);\n const thumb = this.#closestThumb(value);\n this.#beginDrag(thumb);\n this.#setThumbValue(thumb, value);\n // Intentionally do NOT focus the input on pointer interaction — that would inherit\n // an active :focus-visible state from prior keyboard navigation and incorrectly show\n // the focus ring on click. The user must Tab to the slider for keyboard control.\n try { this._container.setPointerCapture(e.pointerId); } catch { /* */ }\n this._container.addEventListener('pointermove', this.#handleDragMove);\n this._container.addEventListener('pointerup', this.#handleDragEnd, { once: true });\n this._container.addEventListener('pointercancel', this.#handleDragEnd, { once: true });\n };\n\n #handleDragMove = (e: PointerEvent) => {\n if (!this._dragging || !this._activeThumb) return;\n const value = this.#pointerToValue(e.clientX);\n this.#setThumbValue(this._activeThumb, value);\n };\n\n #handleDragEnd = () => {\n this._container.removeEventListener('pointermove', this.#handleDragMove);\n this.#endDrag();\n this.#handleChange();\n };\n\n // Hover tracking — light up the state layer of the thumb nearest the pointer.\n #handleHoverMove = (e: PointerEvent) => {\n if (this.disabled || this._dragging) return;\n const value = this.#pointerToValue(e.clientX);\n this._hoveredThumb = this.#closestThumb(value);\n };\n\n #handleHoverLeave = () => {\n if (!this._dragging) this._hoveredThumb = null;\n };\n\n #setThumbValue(thumb: Thumb, value: number) {\n if (this.range) {\n if (thumb === 'start') {\n this.valueStart = Math.min(value, this.valueEnd!);\n } else {\n this.valueEnd = Math.max(value, this.valueStart!);\n }\n } else {\n this.value = value;\n }\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n #beginDrag(thumb: Thumb) {\n this._activeThumb = thumb;\n this._dragging = true;\n this._hoveredThumb = thumb;\n }\n\n #endDrag = () => {\n this._dragging = false;\n this._activeThumb = null;\n };\n\n // Keyboard input on the native range inputs still updates the bound value.\n #handleSingleInput = () => {\n this.value = this._input.valueAsNumber;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n };\n\n #handleStartInput = () => {\n this.valueStart = Math.min(this._input.valueAsNumber, this.valueEnd!);\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n };\n\n #handleEndInput = () => {\n this.valueEnd = Math.max(this._inputEnd!.valueAsNumber, this.valueStart!);\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n };\n\n #handleChange = () => {\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n };\n\n #updateFormValue() {\n if (!this.name) {\n this.elementInternals.setFormValue(null);\n return;\n }\n if (this.range) {\n const data = new FormData();\n data.append(`${this.name}-start`, String(this.valueStart ?? this.min));\n data.append(`${this.name}-end`, String(this.valueEnd ?? this.max));\n this.elementInternals.setFormValue(data);\n return;\n }\n this.elementInternals.setFormValue(String(this.value ?? ''));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-slider': Slider;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider.styles.d.ts","sourceRoot":"","sources":["../../src/slider/slider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiSlB,CAAC"}
|