@vonage/vivid 5.0.0 → 5.2.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/{shared/definition2.cjs → accordion/definition.cjs} +20 -20
- package/{shared/definition2.js → accordion/definition.js} +5 -7
- package/accordion/index.cjs +5 -5
- package/accordion/index.js +129 -3
- package/accordion-item/definition.cjs +145 -0
- package/accordion-item/definition.js +139 -0
- package/accordion-item/index.cjs +1 -5
- package/accordion-item/index.js +2 -3
- package/{shared/definition3.cjs → action-group/definition.cjs} +12 -9
- package/{shared/definition3.js → action-group/definition.js} +5 -4
- package/action-group/index.cjs +6 -5
- package/action-group/index.js +49 -3
- package/{shared/definition4.cjs → alert/definition.cjs} +33 -31
- package/{shared/definition4.js → alert/definition.js} +11 -11
- package/alert/index.cjs +30 -5
- package/alert/index.js +158 -3
- package/{shared/definition5.cjs → audio-player/definition.cjs} +95 -61
- package/{shared/definition5.js → audio-player/definition.js} +48 -16
- package/audio-player/index.cjs +68 -4
- package/audio-player/index.js +333 -2
- package/{shared/definition6.cjs → avatar/definition.cjs} +28 -26
- package/{shared/definition6.js → avatar/definition.js} +7 -7
- package/avatar/index.cjs +18 -5
- package/avatar/index.js +93 -3
- package/{shared/definition7.cjs → badge/definition.cjs} +18 -16
- package/{shared/definition7.js → badge/definition.js} +6 -6
- package/badge/index.cjs +4 -5
- package/badge/index.js +66 -3
- package/{shared/definition8.cjs → banner/definition.cjs} +26 -25
- package/{shared/definition8.js → banner/definition.js} +10 -11
- package/banner/index.cjs +29 -4
- package/banner/index.js +128 -2
- package/{shared/definition10.cjs → breadcrumb/definition.cjs} +11 -9
- package/{shared/definition10.js → breadcrumb/definition.js} +5 -5
- package/breadcrumb/index.cjs +12 -5
- package/breadcrumb/index.js +69 -3
- package/{shared/definition9.cjs → breadcrumb-item/definition.cjs} +18 -15
- package/{shared/definition9.js → breadcrumb-item/definition.js} +7 -7
- package/breadcrumb-item/index.cjs +5 -5
- package/breadcrumb-item/index.js +33 -3
- package/bundled/_has.cjs +1 -0
- package/bundled/_has.js +34 -0
- package/bundled/affix.cjs +13 -0
- package/bundled/affix.js +63 -0
- package/bundled/anchored.cjs +4 -0
- package/bundled/anchored.js +67 -0
- package/bundled/aria.cjs +1 -0
- package/bundled/aria.js +7 -0
- package/bundled/attribute-binding-behaviour.cjs +1 -0
- package/bundled/attribute-binding-behaviour.js +27 -0
- package/bundled/base-progress.cjs +1 -0
- package/bundled/base-progress.js +57 -0
- package/bundled/breadcrumb-item.cjs +1 -0
- package/bundled/breadcrumb-item.js +21 -0
- package/bundled/button.cjs +1 -0
- package/bundled/button.js +106 -0
- package/bundled/calendar-event.cjs +1 -0
- package/bundled/calendar-event.js +34 -0
- package/bundled/calendar-picker.template.cjs +148 -0
- package/bundled/calendar-picker.template.js +3371 -0
- package/bundled/char-count.cjs +13 -0
- package/bundled/char-count.js +54 -0
- package/bundled/children.cjs +1 -0
- package/bundled/children.js +38 -0
- package/bundled/class-names.cjs +1 -0
- package/bundled/class-names.js +9 -0
- package/bundled/definition.cjs +39 -0
- package/bundled/definition.js +122 -0
- package/bundled/definition10.cjs +19 -0
- package/bundled/definition10.js +73 -0
- package/bundled/definition11.cjs +10 -0
- package/bundled/definition11.js +44 -0
- package/bundled/definition12.cjs +1 -0
- package/bundled/definition12.js +20 -0
- package/bundled/definition13.cjs +73 -0
- package/bundled/definition13.js +359 -0
- package/bundled/definition14.cjs +5 -0
- package/bundled/definition14.js +29 -0
- package/bundled/definition15.cjs +30 -0
- package/bundled/definition15.js +80 -0
- package/bundled/definition16.cjs +19 -0
- package/bundled/definition16.js +103 -0
- package/bundled/definition17.cjs +13 -0
- package/bundled/definition17.js +137 -0
- package/bundled/definition18.cjs +12 -0
- package/bundled/definition18.js +94 -0
- package/bundled/definition19.cjs +70 -0
- package/bundled/definition19.js +674 -0
- package/bundled/definition2.cjs +20 -0
- package/bundled/definition2.js +180 -0
- package/bundled/definition20.cjs +20 -0
- package/bundled/definition20.js +106 -0
- package/bundled/definition21.cjs +5 -0
- package/bundled/definition21.js +19 -0
- package/bundled/definition22.cjs +24 -0
- package/bundled/definition22.js +151 -0
- package/bundled/definition3.cjs +29 -0
- package/bundled/definition3.js +195 -0
- package/bundled/definition4.cjs +6 -0
- package/bundled/definition4.js +42 -0
- package/bundled/definition5.cjs +1 -0
- package/bundled/definition5.js +345 -0
- package/bundled/definition6.cjs +31 -0
- package/bundled/definition6.js +268 -0
- package/bundled/definition7.cjs +30 -0
- package/bundled/definition7.js +288 -0
- package/bundled/definition8.cjs +19 -0
- package/bundled/definition8.js +145 -0
- package/bundled/definition9.cjs +14 -0
- package/bundled/definition9.js +1406 -0
- package/bundled/delegates-aria.cjs +1 -0
- package/bundled/delegates-aria.js +77 -0
- package/bundled/divider.cjs +1 -0
- package/bundled/divider.js +34 -0
- package/bundled/dom.cjs +1 -0
- package/bundled/dom.js +6 -0
- package/bundled/enums.cjs +1 -0
- package/bundled/enums.js +9 -0
- package/bundled/form-associated.cjs +1 -0
- package/bundled/form-associated.js +320 -0
- package/bundled/form-element.cjs +1 -0
- package/bundled/form-element.js +56 -0
- package/bundled/host-semantics.cjs +1 -0
- package/bundled/host-semantics.js +57 -0
- package/bundled/index.cjs +1 -0
- package/bundled/index.js +6 -0
- package/bundled/key-codes.cjs +1 -0
- package/bundled/key-codes.js +16 -0
- package/bundled/linkable.cjs +15 -0
- package/bundled/linkable.js +49 -0
- package/bundled/listbox.cjs +1 -0
- package/bundled/listbox.js +345 -0
- package/bundled/localized.cjs +1 -0
- package/bundled/localized.js +460 -0
- package/bundled/mixins.cjs +33 -0
- package/bundled/mixins.js +226 -0
- package/bundled/numbers.cjs +1 -0
- package/bundled/numbers.js +14 -0
- package/bundled/option.cjs +1 -0
- package/bundled/option.js +158 -0
- package/bundled/picker-field.template.cjs +67 -0
- package/bundled/picker-field.template.js +242 -0
- package/bundled/playbackRates.cjs +1 -0
- package/bundled/playbackRates.js +11 -0
- package/bundled/ref.cjs +1 -0
- package/bundled/ref.js +32 -0
- package/bundled/repeat.cjs +1 -0
- package/bundled/repeat.js +341 -0
- package/bundled/scrollIntoView.cjs +1 -0
- package/bundled/scrollIntoView.js +33 -0
- package/bundled/single-date-picker.cjs +1 -0
- package/bundled/single-date-picker.js +39 -0
- package/bundled/single-value-picker.cjs +1 -0
- package/bundled/single-value-picker.js +87 -0
- package/bundled/slider.template.cjs +41 -0
- package/bundled/slider.template.js +100 -0
- package/bundled/slotted.cjs +1 -0
- package/bundled/slotted.js +81 -0
- package/bundled/strings.cjs +1 -0
- package/bundled/strings.js +7 -0
- package/bundled/text-field.cjs +1 -0
- package/bundled/text-field.js +4 -0
- package/bundled/time-selection-picker.template.cjs +46 -0
- package/bundled/time-selection-picker.template.js +575 -0
- package/bundled/vivid-element.cjs +1 -0
- package/bundled/vivid-element.js +1761 -0
- package/bundled/when.cjs +1 -0
- package/bundled/when.js +11 -0
- package/bundled/with-contextual-help.cjs +1 -0
- package/bundled/with-contextual-help.js +32 -0
- package/bundled/with-error-text.cjs +1 -0
- package/bundled/with-error-text.js +39 -0
- package/bundled/with-success-text.cjs +1 -0
- package/bundled/with-success-text.js +16 -0
- package/button/definition.cjs +14 -0
- package/button/definition.js +4 -0
- package/button/index.cjs +1 -5
- package/button/index.js +2 -3
- package/{shared/definition13.cjs → calendar/definition.cjs} +27 -449
- package/{shared/definition13.js → calendar/definition.js} +7 -431
- package/calendar/index.cjs +53 -5
- package/calendar/index.js +431 -3
- package/{shared/definition12.cjs → calendar-event/definition.cjs} +12 -9
- package/{shared/definition12.js → calendar-event/definition.js} +6 -6
- package/calendar-event/index.cjs +9 -5
- package/calendar-event/index.js +43 -3
- package/card/definition.cjs +186 -0
- package/{shared/definition14.js → card/definition.js} +10 -11
- package/card/index.cjs +47 -5
- package/card/index.js +163 -3
- package/{shared/definition15.cjs → checkbox/definition.cjs} +30 -29
- package/{shared/definition15.js → checkbox/definition.js} +12 -13
- package/checkbox/index.cjs +1 -5
- package/checkbox/index.js +2 -3
- package/{shared/definition16.cjs → combobox/definition.cjs} +61 -56
- package/{shared/definition16.js → combobox/definition.js} +30 -27
- package/combobox/index.cjs +69 -5
- package/combobox/index.js +519 -3
- package/contextual-help/definition.cjs +62 -0
- package/contextual-help/definition.js +57 -0
- package/contextual-help/index.cjs +1 -0
- package/contextual-help/index.js +2 -0
- package/custom-elements.json +2504 -335
- package/{shared/definition17.cjs → data-grid/definition.cjs} +111 -121
- package/{shared/definition17.js → data-grid/definition.js} +11 -23
- package/data-grid/index.cjs +81 -5
- package/data-grid/index.js +1011 -3
- package/{shared/definition18.cjs → date-picker/definition.cjs} +20 -17
- package/{shared/definition18.js → date-picker/definition.js} +12 -11
- package/date-picker/index.cjs +1 -5
- package/date-picker/index.js +115 -3
- package/{shared/definition19.cjs → date-range-picker/definition.cjs} +26 -23
- package/{shared/definition19.js → date-range-picker/definition.js} +10 -9
- package/date-range-picker/index.cjs +1 -5
- package/date-range-picker/index.js +335 -3
- package/{shared/definition20.cjs → date-time-picker/definition.cjs} +27 -24
- package/{shared/definition20.js → date-time-picker/definition.js} +13 -12
- package/date-time-picker/index.cjs +8 -5
- package/date-time-picker/index.js +216 -3
- package/{shared/definition21.cjs → dial-pad/definition.cjs} +89 -40
- package/{shared/definition21.js → dial-pad/definition.js} +60 -13
- package/dial-pad/index.cjs +57 -5
- package/dial-pad/index.js +245 -3
- package/{shared/definition22.cjs → dialog/definition.cjs} +48 -47
- package/{shared/definition22.js → dialog/definition.js} +10 -11
- package/dialog/index.cjs +44 -5
- package/dialog/index.js +257 -3
- package/{shared/definition23.cjs → divider/definition.cjs} +10 -6
- package/{shared/definition23.js → divider/definition.js} +6 -5
- package/divider/index.cjs +1 -5
- package/divider/index.js +2 -3
- package/elevation/definition.cjs +11 -0
- package/elevation/definition.js +2 -0
- package/elevation/index.cjs +1 -5
- package/elevation/index.js +2 -3
- package/empty-state/definition.cjs +81 -0
- package/empty-state/definition.js +75 -0
- package/empty-state/index.cjs +14 -5
- package/empty-state/index.js +64 -3
- package/fab/definition.cjs +105 -0
- package/fab/definition.js +99 -0
- package/fab/index.cjs +20 -5
- package/fab/index.js +86 -3
- package/file-picker/definition.cjs +519 -0
- package/file-picker/definition.js +513 -0
- package/file-picker/index.cjs +61 -5
- package/file-picker/index.js +391 -3
- package/{shared/definition27.cjs → header/definition.cjs} +14 -11
- package/{shared/definition27.js → header/definition.js} +6 -5
- package/header/index.cjs +19 -5
- package/header/index.js +57 -3
- package/{shared/definition28.cjs → icon/definition.cjs} +25 -149
- package/{shared/definition28.js → icon/definition.js} +6 -132
- package/icon/index.cjs +1 -5
- package/icon/index.js +2 -3
- package/index.cjs +268 -264
- package/index.js +72 -71
- package/{shared/definition29.cjs → layout/definition.cjs} +13 -10
- package/{shared/definition29.js → layout/definition.js} +4 -3
- package/layout/index.cjs +3 -5
- package/layout/index.js +52 -3
- package/lib/accordion-item/accordion-item.d.ts +0 -1
- package/lib/action-group/action-group.d.ts +0 -1
- package/lib/alert/alert.d.ts +0 -2
- package/lib/audio-player/audio-player.d.ts +4 -1
- package/lib/avatar/avatar.d.ts +0 -1
- package/lib/badge/badge.d.ts +0 -1
- package/lib/banner/banner.d.ts +0 -3
- package/lib/breadcrumb/breadcrumb.d.ts +0 -1
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +0 -1
- package/lib/button/button.d.ts +1 -3
- package/lib/calendar-event/calendar-event.d.ts +0 -1
- package/lib/card/card.d.ts +0 -1
- package/lib/checkbox/checkbox.d.ts +0 -6
- package/lib/combobox/combobox.d.ts +483 -72
- package/lib/components.d.ts +1 -0
- package/lib/contextual-help/contextual-help.d.ts +5 -0
- package/lib/contextual-help/contextual-help.template.d.ts +3 -0
- package/lib/contextual-help/definition.d.ts +1 -0
- package/lib/data-grid/data-grid-cell.d.ts +0 -2
- package/lib/data-grid/data-grid-row.d.ts +0 -1
- package/lib/date-picker/date-picker.d.ts +892 -888
- package/lib/date-range-picker/date-range-picker.d.ts +590 -588
- package/lib/date-time-picker/date-time-picker.d.ts +893 -889
- package/lib/dial-pad/dial-pad.d.ts +0 -1
- package/lib/dial-pad/dial-pad.template.d.ts +1 -1
- package/lib/dial-pad/locale.d.ts +1 -0
- package/lib/dialog/dialog.d.ts +0 -2
- package/lib/divider/divider.d.ts +0 -1
- package/lib/fab/fab.d.ts +1 -1
- package/lib/file-picker/accept.d.ts +1 -0
- package/lib/file-picker/data-transfer.d.ts +1 -0
- package/lib/file-picker/file-picker.d.ts +490 -91
- package/lib/header/header.d.ts +0 -1
- package/lib/menu/menu.d.ts +1 -2
- package/lib/menu-item/menu-item.d.ts +0 -2
- package/lib/nav/nav.d.ts +0 -1
- package/lib/nav-disclosure/nav-disclosure.d.ts +0 -2
- package/lib/nav-item/nav-item.d.ts +0 -2
- package/lib/note/note.d.ts +0 -1
- package/lib/number-field/number-field.d.ts +505 -96
- package/lib/option/option.d.ts +1 -2
- package/lib/pagination/pagination.d.ts +0 -1
- package/lib/progress/progress.d.ts +0 -1
- package/lib/progress-ring/progress-ring.d.ts +0 -1
- package/lib/radio/radio.d.ts +0 -3
- package/lib/radio-group/radio-group.d.ts +0 -1
- package/lib/range-slider/range-slider.d.ts +0 -3
- package/lib/rich-text-editor/menubar/menubar.d.ts +0 -1
- package/lib/rich-text-editor/rich-text-editor.d.ts +0 -1
- package/lib/searchable-select/option-tag.d.ts +0 -1
- package/lib/searchable-select/searchable-select.d.ts +505 -96
- package/lib/select/select.d.ts +470 -60
- package/lib/selectable-box/selectable-box.d.ts +0 -1
- package/lib/simple-color-picker/definition.d.ts +4 -0
- package/lib/simple-color-picker/locale.d.ts +4 -0
- package/lib/simple-color-picker/simple-color-picker.d.ts +1600 -0
- package/lib/simple-color-picker/simple-color-picker.template.d.ts +3 -0
- package/lib/slider/slider.d.ts +0 -3
- package/lib/split-button/split-button.d.ts +2 -3
- package/lib/switch/switch.d.ts +0 -2
- package/lib/tab/tab.d.ts +0 -3
- package/lib/tab-panel/tab-panel.d.ts +0 -1
- package/lib/tag/tag.d.ts +0 -3
- package/lib/tag-group/tag-group.d.ts +0 -1
- package/lib/tag-name-map.d.ts +2 -1
- package/lib/text-area/text-area.d.ts +494 -84
- package/lib/text-field/text-field.d.ts +505 -96
- package/lib/time-picker/time-picker.d.ts +571 -569
- package/lib/toggletip/toggletip.d.ts +0 -2
- package/lib/tooltip/tooltip.d.ts +0 -1
- package/lib/tree-item/tree-item.d.ts +0 -2
- package/lib/tree-view/tree-view.d.ts +0 -1
- package/lib/video-player/video-player.d.ts +0 -1
- package/locales/de-DE.cjs +13 -1
- package/locales/de-DE.js +13 -1
- package/locales/en-GB.cjs +13 -1
- package/locales/en-GB.js +13 -1
- package/locales/en-US.cjs +13 -1
- package/locales/en-US.js +13 -1
- package/locales/ja-JP.cjs +13 -1
- package/locales/ja-JP.js +13 -1
- package/locales/zh-CN.cjs +13 -1
- package/locales/zh-CN.js +13 -1
- package/{shared/definition31.cjs → menu/definition.cjs} +46 -42
- package/{shared/definition31.js → menu/definition.js} +16 -14
- package/menu/index.cjs +1 -5
- package/menu/index.js +2 -3
- package/menu-item/definition.cjs +14 -0
- package/menu-item/definition.js +3 -0
- package/menu-item/index.cjs +1 -5
- package/menu-item/index.js +2 -3
- package/{shared/definition34.cjs → nav/definition.cjs} +7 -4
- package/{shared/definition34.js → nav/definition.js} +4 -3
- package/nav/index.cjs +5 -5
- package/nav/index.js +13 -3
- package/nav-disclosure/definition.cjs +122 -0
- package/nav-disclosure/definition.js +116 -0
- package/nav-disclosure/index.cjs +16 -5
- package/nav-disclosure/index.js +96 -3
- package/{shared/definition33.cjs → nav-item/definition.cjs} +19 -16
- package/{shared/definition33.js → nav-item/definition.js} +9 -8
- package/nav-item/index.cjs +2 -5
- package/nav-item/index.js +59 -3
- package/{shared/definition35.cjs → note/definition.cjs} +15 -13
- package/{shared/definition35.js → note/definition.js} +6 -6
- package/note/index.cjs +9 -5
- package/note/index.js +44 -3
- package/{shared/definition36.cjs → number-field/definition.cjs} +66 -60
- package/{shared/definition36.js → number-field/definition.js} +31 -27
- package/number-field/index.cjs +60 -5
- package/number-field/index.js +370 -3
- package/option/definition.cjs +84 -0
- package/option/definition.js +78 -0
- package/option/index.cjs +1 -5
- package/option/index.js +2 -3
- package/package.json +15 -4
- package/{shared/definition38.cjs → pagination/definition.cjs} +31 -33
- package/{shared/definition38.js → pagination/definition.js} +7 -11
- package/pagination/index.cjs +43 -5
- package/pagination/index.js +194 -3
- package/popup/definition.cjs +13 -0
- package/popup/definition.js +4 -0
- package/popup/index.cjs +1 -5
- package/popup/index.js +2 -3
- package/{shared/definition40.cjs → progress/definition.cjs} +17 -15
- package/{shared/definition40.js → progress/definition.js} +6 -6
- package/progress/index.cjs +17 -5
- package/progress/index.js +69 -3
- package/{shared/definition39.cjs → progress-ring/definition.cjs} +17 -15
- package/{shared/definition39.js → progress-ring/definition.js} +7 -7
- package/progress-ring/index.cjs +1 -5
- package/progress-ring/index.js +2 -3
- package/{shared/definition42.cjs → radio/definition.cjs} +20 -19
- package/{shared/definition42.js → radio/definition.js} +8 -9
- package/radio/index.cjs +1 -5
- package/radio/index.js +2 -3
- package/{shared/definition41.cjs → radio-group/definition.cjs} +31 -30
- package/{shared/definition41.js → radio-group/definition.js} +8 -9
- package/radio-group/index.cjs +23 -5
- package/radio-group/index.js +255 -3
- package/{shared/definition43.cjs → range-slider/definition.cjs} +62 -61
- package/{shared/definition43.js → range-slider/definition.js} +13 -14
- package/range-slider/index.cjs +68 -5
- package/range-slider/index.js +456 -3
- package/rich-text-editor/definition.cjs +1206 -0
- package/rich-text-editor/definition.js +1200 -0
- package/rich-text-editor/index.cjs +133 -4
- package/rich-text-editor/index.js +10386 -2
- package/{shared/definition45.cjs → searchable-select/definition.cjs} +142 -130
- package/{shared/definition45.js → searchable-select/definition.js} +51 -41
- package/searchable-select/index.cjs +167 -5
- package/searchable-select/index.js +1034 -3
- package/{shared/definition46.cjs → select/definition.cjs} +92 -87
- package/{shared/definition46.js → select/definition.js} +32 -29
- package/select/index.cjs +1 -5
- package/select/index.js +2 -3
- package/{shared/definition47.cjs → selectable-box/definition.cjs} +26 -24
- package/{shared/definition47.js → selectable-box/definition.js} +9 -9
- package/selectable-box/index.cjs +28 -5
- package/selectable-box/index.js +136 -3
- package/shared/aria/aria-mixin.d.ts +0 -1
- package/shared/aria/delegates-aria.d.ts +0 -1
- package/shared/aria/host-semantics.d.ts +0 -1
- package/shared/color-picker/index.d.ts +2 -0
- package/shared/color-picker/types.d.ts +4 -0
- package/shared/color-picker/utils.d.ts +3 -0
- package/shared/feedback/feedback-message.d.ts +0 -1
- package/shared/feedback/mixins.d.ts +0 -2
- package/shared/foundation/button/button.d.ts +0 -2
- package/shared/foundation/form-associated/form-associated.d.ts +0 -2
- package/shared/foundation/vivid-element/vivid-element.d.ts +0 -1
- package/shared/localization/Locale.d.ts +2 -0
- package/shared/patterns/affix.d.ts +0 -2
- package/shared/patterns/anchored.d.ts +0 -2
- package/shared/patterns/char-count/char-count.d.ts +0 -1
- package/shared/patterns/form-elements/form-element.d.ts +0 -2
- package/shared/patterns/form-elements/index.d.ts +1 -0
- package/shared/patterns/form-elements/with-contextual-help.d.ts +1239 -0
- package/shared/patterns/form-elements/with-error-text.d.ts +0 -3
- package/shared/patterns/form-elements/with-success-text.d.ts +0 -1
- package/shared/patterns/linkable.d.ts +0 -1
- package/shared/patterns/localized.d.ts +0 -1
- package/shared/patterns/trapped-focus.d.ts +0 -1
- package/shared/picker-field/mixins/calendar-picker.d.ts +452 -451
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +452 -451
- package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +0 -1
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +594 -592
- package/shared/picker-field/mixins/single-date-picker.d.ts +734 -731
- package/shared/picker-field/mixins/single-value-picker.d.ts +449 -448
- package/shared/picker-field/mixins/time-selection-picker.d.ts +571 -569
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +571 -569
- package/shared/picker-field/picker-field.d.ts +483 -72
- package/{shared/definition48.cjs → side-drawer/definition.cjs} +16 -14
- package/{shared/definition48.js → side-drawer/definition.js} +5 -5
- package/side-drawer/index.cjs +17 -3
- package/side-drawer/index.js +100 -2
- package/simple-color-picker/definition.cjs +398 -0
- package/simple-color-picker/definition.js +392 -0
- package/simple-color-picker/index.cjs +31 -0
- package/simple-color-picker/index.js +250 -0
- package/{shared/definition49.cjs → slider/definition.cjs} +46 -53
- package/{shared/definition49.js → slider/definition.js} +11 -20
- package/slider/index.cjs +1 -5
- package/slider/index.js +2 -3
- package/split-button/definition.cjs +176 -0
- package/split-button/definition.js +170 -0
- package/split-button/index.cjs +26 -5
- package/split-button/index.js +149 -3
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/{shared/definition51.cjs → switch/definition.cjs} +20 -19
- package/{shared/definition51.js → switch/definition.js} +8 -9
- package/switch/index.cjs +16 -5
- package/switch/index.js +102 -3
- package/tab/definition.cjs +127 -0
- package/tab/definition.js +121 -0
- package/tab/index.cjs +1 -5
- package/tab/index.js +2 -3
- package/{shared/definition52.cjs → tab-panel/definition.cjs} +7 -4
- package/{shared/definition52.js → tab-panel/definition.js} +4 -3
- package/tab-panel/index.cjs +1 -5
- package/tab-panel/index.js +2 -3
- package/{shared/definition54.cjs → tabs/definition.cjs} +46 -39
- package/{shared/definition54.js → tabs/definition.js} +18 -13
- package/tabs/index.cjs +31 -5
- package/tabs/index.js +321 -3
- package/tag/definition.cjs +156 -0
- package/tag/definition.js +150 -0
- package/tag/index.cjs +19 -5
- package/tag/index.js +118 -3
- package/{shared/definition55.cjs → tag-group/definition.cjs} +9 -6
- package/{shared/definition55.js → tag-group/definition.js} +5 -4
- package/tag-group/index.cjs +8 -5
- package/tag-group/index.js +26 -3
- package/{shared/definition57.cjs → text-area/definition.cjs} +62 -42
- package/{shared/definition57.js → text-area/definition.js} +38 -20
- package/text-area/index.cjs +41 -5
- package/text-area/index.js +293 -3
- package/{shared/definition58.cjs → text-field/definition.cjs} +70 -52
- package/{shared/definition58.js → text-field/definition.js} +40 -24
- package/text-field/index.cjs +1 -5
- package/text-field/index.js +2 -3
- package/time-picker/definition.cjs +43 -0
- package/{shared/definition59.js → time-picker/definition.js} +9 -8
- package/time-picker/index.cjs +1 -5
- package/time-picker/index.js +29 -3
- package/{shared/definition60.cjs → toggletip/definition.cjs} +20 -18
- package/{shared/definition60.js → toggletip/definition.js} +8 -8
- package/toggletip/index.cjs +1 -5
- package/toggletip/index.js +2 -3
- package/{shared/definition61.cjs → tooltip/definition.cjs} +16 -13
- package/{shared/definition61.js → tooltip/definition.js} +7 -6
- package/tooltip/index.cjs +1 -5
- package/tooltip/index.js +2 -3
- package/tree-item/definition.cjs +13 -0
- package/tree-item/definition.js +3 -0
- package/tree-item/index.cjs +1 -5
- package/tree-item/index.js +2 -3
- package/{shared/definition63.cjs → tree-view/definition.cjs} +41 -42
- package/{shared/definition63.js → tree-view/definition.js} +6 -9
- package/tree-view/index.cjs +13 -5
- package/tree-view/index.js +171 -3
- package/{shared → unbundled}/affix.cjs +10 -11
- package/{shared → unbundled}/affix.js +2 -3
- package/{shared → unbundled}/anchored.cjs +7 -8
- package/{shared → unbundled}/anchored.js +1 -2
- package/{shared → unbundled}/attribute-binding-behaviour.cjs +3 -3
- package/{shared → unbundled}/attribute-binding-behaviour.js +1 -1
- package/{shared → unbundled}/base-progress.cjs +6 -5
- package/{shared → unbundled}/base-progress.js +2 -1
- package/{shared → unbundled}/breadcrumb-item.cjs +3 -2
- package/{shared → unbundled}/breadcrumb-item.js +2 -1
- package/{shared → unbundled}/button.cjs +10 -9
- package/{shared → unbundled}/button.js +2 -1
- package/{shared → unbundled}/calendar-event.cjs +8 -7
- package/{shared → unbundled}/calendar-event.js +2 -1
- package/unbundled/calendar-picker.template.cjs +917 -0
- package/unbundled/calendar-picker.template.js +906 -0
- package/{shared → unbundled}/char-count.cjs +6 -7
- package/{shared → unbundled}/char-count.js +2 -3
- package/unbundled/definition.cjs +225 -0
- package/unbundled/definition.js +220 -0
- package/{shared/definition30.cjs → unbundled/definition2.cjs} +41 -42
- package/{shared/definition30.js → unbundled/definition2.js} +6 -7
- package/unbundled/definition3.cjs +207 -0
- package/{shared/definition62.js → unbundled/definition3.js} +5 -9
- package/unbundled/definition4.cjs +298 -0
- package/unbundled/definition4.js +293 -0
- package/{shared/definition65.cjs → unbundled/definition5.cjs} +7 -6
- package/{shared/definition65.js → unbundled/definition5.js} +3 -2
- package/{shared → unbundled}/delegates-aria.cjs +4 -3
- package/{shared → unbundled}/delegates-aria.js +2 -1
- package/{shared → unbundled}/divider.cjs +5 -4
- package/{shared → unbundled}/divider.js +3 -2
- package/{shared → unbundled}/form-associated.cjs +13 -13
- package/{shared → unbundled}/form-associated.js +2 -2
- package/{shared → unbundled}/form-element.cjs +3 -3
- package/{shared → unbundled}/form-element.js +1 -1
- package/{shared → unbundled}/host-semantics.cjs +2 -1
- package/{shared → unbundled}/host-semantics.js +2 -1
- package/unbundled/key-codes.cjs +10 -0
- package/unbundled/key-codes.js +7 -0
- package/{shared → unbundled}/linkable.cjs +11 -12
- package/{shared → unbundled}/linkable.js +1 -2
- package/{shared → unbundled}/listbox.cjs +21 -37
- package/{shared → unbundled}/listbox.js +3 -19
- package/{shared → unbundled}/localized.cjs +2 -2
- package/{shared → unbundled}/localized.js +1 -1
- package/{shared → unbundled}/mixins.cjs +27 -83
- package/{shared → unbundled}/mixins.js +6 -62
- package/{shared → unbundled}/option.cjs +29 -17
- package/{shared → unbundled}/option.js +14 -2
- package/{shared → unbundled}/picker-field.template.cjs +32 -24
- package/{shared → unbundled}/picker-field.template.js +18 -10
- package/{shared → unbundled}/slider.template.cjs +15 -19
- package/{shared → unbundled}/slider.template.js +3 -7
- package/unbundled/text-field.cjs +5 -0
- package/unbundled/text-field.js +3 -0
- package/{shared → unbundled}/time-selection-picker.template.cjs +28 -30
- package/{shared → unbundled}/time-selection-picker.template.js +4 -6
- package/unbundled/vivid-element.cjs +283 -0
- package/unbundled/vivid-element.js +274 -0
- package/unbundled/with-contextual-help.cjs +40 -0
- package/unbundled/with-contextual-help.js +38 -0
- package/{shared → unbundled}/with-error-text.cjs +2 -2
- package/{shared → unbundled}/with-error-text.js +1 -1
- package/{shared → unbundled}/with-success-text.cjs +2 -2
- package/{shared → unbundled}/with-success-text.js +1 -1
- package/video-player/definition.cjs +536 -0
- package/video-player/definition.js +530 -0
- package/video-player/index.cjs +536 -3
- package/video-player/index.js +35912 -2
- package/{shared/definition66.cjs → visually-hidden/definition.cjs} +6 -3
- package/{shared/definition66.js → visually-hidden/definition.js} +3 -2
- package/visually-hidden/index.cjs +1 -5
- package/visually-hidden/index.js +2 -3
- package/vivid.api.json +722 -799
- package/shared/_has.cjs +0 -58
- package/shared/_has.js +0 -54
- package/shared/aria.cjs +0 -11
- package/shared/aria.js +0 -9
- package/shared/calendar-picker.template.cjs +0 -6377
- package/shared/calendar-picker.template.js +0 -6366
- package/shared/children.cjs +0 -61
- package/shared/children.js +0 -59
- package/shared/class-names.cjs +0 -17
- package/shared/class-names.js +0 -15
- package/shared/definition.cjs +0 -145
- package/shared/definition.js +0 -141
- package/shared/definition11.cjs +0 -220
- package/shared/definition11.js +0 -215
- package/shared/definition14.cjs +0 -185
- package/shared/definition24.cjs +0 -80
- package/shared/definition24.js +0 -76
- package/shared/definition25.cjs +0 -90
- package/shared/definition25.js +0 -86
- package/shared/definition26.cjs +0 -2549
- package/shared/definition26.js +0 -2545
- package/shared/definition32.cjs +0 -120
- package/shared/definition32.js +0 -116
- package/shared/definition37.cjs +0 -71
- package/shared/definition37.js +0 -68
- package/shared/definition44.cjs +0 -14666
- package/shared/definition44.js +0 -14662
- package/shared/definition50.cjs +0 -148
- package/shared/definition50.js +0 -144
- package/shared/definition53.cjs +0 -124
- package/shared/definition53.js +0 -120
- package/shared/definition56.cjs +0 -154
- package/shared/definition56.js +0 -150
- package/shared/definition59.cjs +0 -39
- package/shared/definition62.cjs +0 -211
- package/shared/definition64.cjs +0 -69579
- package/shared/definition64.js +0 -69575
- package/shared/definition67.cjs +0 -2227
- package/shared/definition67.js +0 -2222
- package/shared/dom.cjs +0 -10
- package/shared/dom.js +0 -8
- package/shared/key-codes.cjs +0 -32
- package/shared/key-codes.js +0 -18
- package/shared/numbers.cjs +0 -38
- package/shared/numbers.js +0 -34
- package/shared/ref.cjs +0 -43
- package/shared/ref.js +0 -41
- package/shared/repeat.cjs +0 -767
- package/shared/repeat.js +0 -764
- package/shared/slotted.cjs +0 -123
- package/shared/slotted.js +0 -119
- package/shared/strings.cjs +0 -11
- package/shared/strings.js +0 -9
- package/shared/text-field.cjs +0 -5
- package/shared/text-field.js +0 -3
- package/shared/vivid-element.cjs +0 -2822
- package/shared/vivid-element.js +0 -2799
- package/shared/when.cjs +0 -31
- package/shared/when.js +0 -29
- /package/{shared → unbundled}/enums.cjs +0 -0
- /package/{shared → unbundled}/enums.js +0 -0
- /package/{shared → unbundled}/index.cjs +0 -0
- /package/{shared → unbundled}/index.js +0 -0
- /package/{shared → unbundled}/playbackRates.cjs +0 -0
- /package/{shared → unbundled}/playbackRates.js +0 -0
- /package/{shared → unbundled}/scrollIntoView.cjs +0 -0
- /package/{shared → unbundled}/scrollIntoView.js +0 -0
- /package/{shared → unbundled}/single-date-picker.cjs +0 -0
- /package/{shared → unbundled}/single-date-picker.js +0 -0
- /package/{shared → unbundled}/single-value-picker.cjs +0 -0
- /package/{shared → unbundled}/single-value-picker.js +0 -0
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";const f=require("./definition2.cjs"),m=require("./definition15.cjs"),a=require("./vivid-element.cjs"),I=require("./button.cjs"),b=require("./affix.cjs"),B=require("./localized.cjs"),C=require("./linkable.cjs"),s=require("./enums.cjs"),T=require("./delegates-aria.cjs"),d=require("./when.cjs"),y=require("./class-names.cjs"),S=require("./ref.cjs");var F=Object.defineProperty,c=(n,o,e,p)=>{for(var t=void 0,l=n.length-1,i;l>=0;l--)(i=n[l])&&(t=i(o,e,t)||t);return t&&F(o,e,t),t};class r extends b.AffixIconWithTrailing(B.Localized(C.Linkable(I.VividFoundationButton))){constructor(){super(),this.stacked=!1,this.pending=!1,this.dropdownIndicator=!1,this.active=!1,this.title=""}clickHandler(o){if(this.disabled||this.pending){o.preventDefault(),o.stopImmediatePropagation();return}}}c([a.attr({converter:{fromView:n=>n||null,toView:n=>n||null}})],r.prototype,"title");c([a.attr],r.prototype,"connotation");c([a.attr],r.prototype,"shape");c([a.attr],r.prototype,"appearance");c([a.attr],r.prototype,"size");c([a.attr({mode:"boolean",attribute:"stacked"})],r.prototype,"stacked");c([a.attr({mode:"boolean",attribute:"pending"})],r.prototype,"pending");c([a.attr({mode:"boolean",attribute:"dropdown-indicator"})],r.prototype,"dropdownIndicator");c([a.attr({mode:"boolean",attribute:"active"})],r.prototype,"active");c([a.attr],r.prototype,"label");const L='.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper: var( --vvd-button-accent-firm );--_vvd-button-cta-firm-wrapper: var( --vvd-button-cta-firm );--_vvd-button-success-firm-wrapper: var( --vvd-button-success-firm );--_vvd-button-alert-firm-wrapper: var( --vvd-button-alert-firm );--_vvd-button-announcement-firm-wrapper: var( --vvd-button-announcement-firm )}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm: var( --_vvd-button-accent-firm-wrapper, var(--vvd-button-accent-primary) );--vvd-button-cta-firm: var( --_vvd-button-cta-firm-wrapper, var(--vvd-button-cta-primary) );--vvd-button-success-firm: var( --_vvd-button-success-firm-wrapper, var(--vvd-button-success-primary) );--vvd-button-alert-firm: var( --_vvd-button-alert-firm-wrapper, var(--vvd-button-alert-primary) );--vvd-button-announcement-firm: var( --_vvd-button-announcement-firm-wrapper, var(--vvd-button-announcement-primary) )}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-button-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce-primary: var(--vvd-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled.appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled,.control.disabled.appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:space-between;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%;text-align:start}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:pointer}.control.disabled{cursor:not-allowed}@supports (user-select: none){.control{user-select:none}}.control:not(.stacked).size-super-condensed{--_button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 8px;--_button-chevron-size: 12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius: 24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius: 16px}.control.shape-pill.stacked.size-normal{--_button-border-radius: 20px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked.size-super-condensed{--stacked-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 6px;--_button-chevron-size: 12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color: transparent}.control.appearance-filled:focus-visible{position:relative;outline:none}.control.appearance-filled:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{display:flex;overflow:hidden;flex:1;align-items:center;justify-content:center;gap:var(--_button-icon-gap)}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment, flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment, flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}',x=n=>{const o=n.tagFor(f.Icon);return a.html`<${o} class="chevron" aria-hidden="true" name="chevron-down-line"></${o}>`},h=({connotation:n,appearance:o,shape:e,iconTrailing:p,icon:t,label:l,disabled:i,pending:v,stacked:u,size:_,iconSlottedContent:k,ariaExpanded:w,active:$,dropdownIndicator:q})=>y.classNames("control",[`connotation-${n}`,!!n],[`appearance-${o}`,!!o],["disabled",i||v],[`shape-${e}`,!!e],[`size-${_}`,!!_],["icon-only",!l&&!!(t||k?.length)&&!q],["icon-trailing",p],["stacked",!!u],["active",w==="true"||$]);function D(n,o,e,p=s.Size.Normal){if(e&&p!=s.Size.SuperCondensed){const t=n.tagFor(m.ProgressRing),l={[s.Size.Condensed]:"-6",[s.Size.Normal]:"-5",[s.Size.Expanded]:"-4"},i=v=>{const u=v.querySelector('[slot="icon"]');return y.classNames("icon","pending",["pending-no-icon",!(o||u)])};return a.html`<span class="${i}" aria-hidden="true"><${t} size="${l[p]}"></${t}></span>`}else return b.affixIconTemplateFactory(n)(o,b.IconWrapper.Slot)}const N=n=>["submit","button","reset"].indexOf(n)>-1?n:"submit",g=n=>{const o=x(n);return a.html`<span class="content">
|
|
2
|
+
${e=>D(n,e.icon,e.pending,e.size)}
|
|
3
|
+
${d.when(e=>e.label,a.html`<span class="text" aria-hidden="true">${e=>e.label}</span>`)}
|
|
4
|
+
<span class="sr-only"
|
|
5
|
+
>${e=>e.pending?e.locale.button.pendingLabel:e.ariaLabel??e.label}</span
|
|
6
|
+
>
|
|
7
|
+
</span>
|
|
8
|
+
${d.when(e=>e.dropdownIndicator,o)}`};function j(n){return a.html` <button
|
|
9
|
+
class="${h}"
|
|
10
|
+
?autofocus="${o=>o.autofocus}"
|
|
11
|
+
form="${o=>o.formId}"
|
|
12
|
+
formaction="${o=>o.formaction}"
|
|
13
|
+
formenctype="${o=>o.formenctype}"
|
|
14
|
+
formmethod="${o=>o.formmethod}"
|
|
15
|
+
formnovalidate="${o=>o.formnovalidate}"
|
|
16
|
+
formtarget="${o=>o.formtarget}"
|
|
17
|
+
name="${o=>o.name}"
|
|
18
|
+
type="${o=>N(o.type)}"
|
|
19
|
+
value="${o=>o.value}"
|
|
20
|
+
title="${o=>o.title}"
|
|
21
|
+
${T.delegateAria({ariaLabel:null,ariaDisabled:o=>o.disabled||o.pending})}
|
|
22
|
+
${S.ref("control")}
|
|
23
|
+
@click="${(o,e)=>o.clickHandler(e.event)}"
|
|
24
|
+
>
|
|
25
|
+
${g(n)}
|
|
26
|
+
</button>`}function P(n){return a.html`${o=>o._renderLinkElement(g(n),h,{ariaLabel:null})}`}const A=n=>a.html` <template>
|
|
27
|
+
${d.when(o=>!o.href,a.html`${j(n)}`)}
|
|
28
|
+
${d.when(o=>o.href,P(n))}
|
|
29
|
+
</template>`,z=a.defineVividComponent("button",r,A,[f.iconDefinition,m.progressRingDefinition],{styles:L,shadowOptions:{delegatesFocus:!0}}),E=a.createRegisterFunction(z);exports.Button=r;exports.buttonDefinition=z;exports.chevronTemplateFactory=x;exports.registerButton=E;
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
import { I as k, i as w } from "./definition2.js";
|
|
2
|
+
import { P as $, p as I } from "./definition15.js";
|
|
3
|
+
import { a as t, h as l, c as C, d as B } from "./vivid-element.js";
|
|
4
|
+
import { V as T } from "./button.js";
|
|
5
|
+
import { A as L, a as F, I as P } from "./affix.js";
|
|
6
|
+
import { L as j } from "./localized.js";
|
|
7
|
+
import { L as D } from "./linkable.js";
|
|
8
|
+
import { a as d } from "./enums.js";
|
|
9
|
+
import { d as N } from "./delegates-aria.js";
|
|
10
|
+
import { w as v } from "./when.js";
|
|
11
|
+
import { c as m } from "./class-names.js";
|
|
12
|
+
import { r as S } from "./ref.js";
|
|
13
|
+
var V = Object.defineProperty, c = (n, o, a, p) => {
|
|
14
|
+
for (var r = void 0, i = n.length - 1, s; i >= 0; i--)
|
|
15
|
+
(s = n[i]) && (r = s(o, a, r) || r);
|
|
16
|
+
return r && V(o, a, r), r;
|
|
17
|
+
};
|
|
18
|
+
class e extends L(
|
|
19
|
+
j(D(T))
|
|
20
|
+
) {
|
|
21
|
+
constructor() {
|
|
22
|
+
super(), this.stacked = !1, this.pending = !1, this.dropdownIndicator = !1, this.active = !1, this.title = "";
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Handles click events.
|
|
26
|
+
* Prevents interaction when disabled or pending.
|
|
27
|
+
*/
|
|
28
|
+
clickHandler(o) {
|
|
29
|
+
if (this.disabled || this.pending) {
|
|
30
|
+
o.preventDefault(), o.stopImmediatePropagation();
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
c([
|
|
36
|
+
t({
|
|
37
|
+
converter: {
|
|
38
|
+
fromView: (n) => n || null,
|
|
39
|
+
toView: (n) => n || null
|
|
40
|
+
}
|
|
41
|
+
})
|
|
42
|
+
], e.prototype, "title");
|
|
43
|
+
c([
|
|
44
|
+
t
|
|
45
|
+
], e.prototype, "connotation");
|
|
46
|
+
c([
|
|
47
|
+
t
|
|
48
|
+
], e.prototype, "shape");
|
|
49
|
+
c([
|
|
50
|
+
t
|
|
51
|
+
], e.prototype, "appearance");
|
|
52
|
+
c([
|
|
53
|
+
t
|
|
54
|
+
], e.prototype, "size");
|
|
55
|
+
c([
|
|
56
|
+
t({
|
|
57
|
+
mode: "boolean",
|
|
58
|
+
attribute: "stacked"
|
|
59
|
+
})
|
|
60
|
+
], e.prototype, "stacked");
|
|
61
|
+
c([
|
|
62
|
+
t({
|
|
63
|
+
mode: "boolean",
|
|
64
|
+
attribute: "pending"
|
|
65
|
+
})
|
|
66
|
+
], e.prototype, "pending");
|
|
67
|
+
c([
|
|
68
|
+
t({
|
|
69
|
+
mode: "boolean",
|
|
70
|
+
attribute: "dropdown-indicator"
|
|
71
|
+
})
|
|
72
|
+
], e.prototype, "dropdownIndicator");
|
|
73
|
+
c([
|
|
74
|
+
t({
|
|
75
|
+
mode: "boolean",
|
|
76
|
+
attribute: "active"
|
|
77
|
+
})
|
|
78
|
+
], e.prototype, "active");
|
|
79
|
+
c([
|
|
80
|
+
t
|
|
81
|
+
], e.prototype, "label");
|
|
82
|
+
const A = '.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper: var( --vvd-button-accent-firm );--_vvd-button-cta-firm-wrapper: var( --vvd-button-cta-firm );--_vvd-button-success-firm-wrapper: var( --vvd-button-success-firm );--_vvd-button-alert-firm-wrapper: var( --vvd-button-alert-firm );--_vvd-button-announcement-firm-wrapper: var( --vvd-button-announcement-firm )}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm: var( --_vvd-button-accent-firm-wrapper, var(--vvd-button-accent-primary) );--vvd-button-cta-firm: var( --_vvd-button-cta-firm-wrapper, var(--vvd-button-cta-primary) );--vvd-button-success-firm: var( --_vvd-button-success-firm-wrapper, var(--vvd-button-success-primary) );--vvd-button-alert-firm: var( --_vvd-button-alert-firm-wrapper, var(--vvd-button-alert-primary) );--vvd-button-announcement-firm: var( --_vvd-button-announcement-firm-wrapper, var(--vvd-button-announcement-primary) )}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-button-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce-primary: var(--vvd-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled.appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled,.control.disabled.appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:space-between;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%;text-align:start}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:pointer}.control.disabled{cursor:not-allowed}@supports (user-select: none){.control{user-select:none}}.control:not(.stacked).size-super-condensed{--_button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 8px;--_button-chevron-size: 12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius: 24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius: 16px}.control.shape-pill.stacked.size-normal{--_button-border-radius: 20px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked.size-super-condensed{--stacked-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 6px;--_button-chevron-size: 12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color: transparent}.control.appearance-filled:focus-visible{position:relative;outline:none}.control.appearance-filled:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{display:flex;overflow:hidden;flex:1;align-items:center;justify-content:center;gap:var(--_button-icon-gap)}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment, flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment, flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}', O = (n) => {
|
|
83
|
+
const o = n.tagFor(k);
|
|
84
|
+
return l`<${o} class="chevron" aria-hidden="true" name="chevron-down-line"></${o}>`;
|
|
85
|
+
}, _ = ({
|
|
86
|
+
connotation: n,
|
|
87
|
+
appearance: o,
|
|
88
|
+
shape: a,
|
|
89
|
+
iconTrailing: p,
|
|
90
|
+
icon: r,
|
|
91
|
+
label: i,
|
|
92
|
+
disabled: s,
|
|
93
|
+
pending: u,
|
|
94
|
+
stacked: b,
|
|
95
|
+
size: f,
|
|
96
|
+
iconSlottedContent: x,
|
|
97
|
+
ariaExpanded: h,
|
|
98
|
+
active: g,
|
|
99
|
+
dropdownIndicator: z
|
|
100
|
+
}) => m(
|
|
101
|
+
"control",
|
|
102
|
+
[`connotation-${n}`, !!n],
|
|
103
|
+
[`appearance-${o}`, !!o],
|
|
104
|
+
["disabled", s || u],
|
|
105
|
+
[`shape-${a}`, !!a],
|
|
106
|
+
[`size-${f}`, !!f],
|
|
107
|
+
[
|
|
108
|
+
"icon-only",
|
|
109
|
+
!i && !!(r || x?.length) && !z
|
|
110
|
+
],
|
|
111
|
+
["icon-trailing", p],
|
|
112
|
+
["stacked", !!b],
|
|
113
|
+
["active", h === "true" || g]
|
|
114
|
+
);
|
|
115
|
+
function E(n, o, a, p = d.Normal) {
|
|
116
|
+
if (a && p != d.SuperCondensed) {
|
|
117
|
+
const r = n.tagFor($), i = {
|
|
118
|
+
[d.Condensed]: "-6",
|
|
119
|
+
[d.Normal]: "-5",
|
|
120
|
+
[d.Expanded]: "-4"
|
|
121
|
+
};
|
|
122
|
+
return l`<span class="${(u) => {
|
|
123
|
+
const b = u.querySelector('[slot="icon"]');
|
|
124
|
+
return m("icon", "pending", [
|
|
125
|
+
"pending-no-icon",
|
|
126
|
+
!(o || b)
|
|
127
|
+
]);
|
|
128
|
+
}}" aria-hidden="true"><${r} size="${i[p]}"></${r}></span>`;
|
|
129
|
+
} else
|
|
130
|
+
return F(n)(o, P.Slot);
|
|
131
|
+
}
|
|
132
|
+
const R = (n) => ["submit", "button", "reset"].indexOf(n) > -1 ? n : "submit", y = (n) => {
|
|
133
|
+
const o = O(n);
|
|
134
|
+
return l`<span class="content">
|
|
135
|
+
${(a) => E(n, a.icon, a.pending, a.size)}
|
|
136
|
+
${v(
|
|
137
|
+
(a) => a.label,
|
|
138
|
+
l`<span class="text" aria-hidden="true">${(a) => a.label}</span>`
|
|
139
|
+
)}
|
|
140
|
+
<span class="sr-only"
|
|
141
|
+
>${(a) => a.pending ? a.locale.button.pendingLabel : a.ariaLabel ?? a.label}</span
|
|
142
|
+
>
|
|
143
|
+
</span>
|
|
144
|
+
${v((a) => a.dropdownIndicator, o)}`;
|
|
145
|
+
};
|
|
146
|
+
function H(n) {
|
|
147
|
+
return l` <button
|
|
148
|
+
class="${_}"
|
|
149
|
+
?autofocus="${(o) => o.autofocus}"
|
|
150
|
+
form="${(o) => o.formId}"
|
|
151
|
+
formaction="${(o) => o.formaction}"
|
|
152
|
+
formenctype="${(o) => o.formenctype}"
|
|
153
|
+
formmethod="${(o) => o.formmethod}"
|
|
154
|
+
formnovalidate="${(o) => o.formnovalidate}"
|
|
155
|
+
formtarget="${(o) => o.formtarget}"
|
|
156
|
+
name="${(o) => o.name}"
|
|
157
|
+
type="${(o) => R(o.type)}"
|
|
158
|
+
value="${(o) => o.value}"
|
|
159
|
+
title="${(o) => o.title}"
|
|
160
|
+
${N({
|
|
161
|
+
ariaLabel: null,
|
|
162
|
+
ariaDisabled: (o) => o.disabled || o.pending
|
|
163
|
+
})}
|
|
164
|
+
${S("control")}
|
|
165
|
+
@click="${(o, a) => o.clickHandler(a.event)}"
|
|
166
|
+
>
|
|
167
|
+
${y(n)}
|
|
168
|
+
</button>`;
|
|
169
|
+
}
|
|
170
|
+
function W(n) {
|
|
171
|
+
return l`${(o) => o._renderLinkElement(y(n), _, {
|
|
172
|
+
ariaLabel: null
|
|
173
|
+
})}`;
|
|
174
|
+
}
|
|
175
|
+
const q = (n) => l` <template>
|
|
176
|
+
${v((o) => !o.href, l`${H(n)}`)}
|
|
177
|
+
${v((o) => o.href, W(n))}
|
|
178
|
+
</template>`, G = B(
|
|
179
|
+
"button",
|
|
180
|
+
e,
|
|
181
|
+
q,
|
|
182
|
+
[w, I],
|
|
183
|
+
{
|
|
184
|
+
styles: A,
|
|
185
|
+
shadowOptions: {
|
|
186
|
+
delegatesFocus: !0
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
), eo = C(G);
|
|
190
|
+
export {
|
|
191
|
+
e as B,
|
|
192
|
+
G as b,
|
|
193
|
+
O as c,
|
|
194
|
+
eo as r
|
|
195
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";const e=require("./vivid-element.cjs"),i=require("./class-names.cjs");var c=Object.defineProperty,n=(o,r,d,h)=>{for(var t=void 0,v=o.length-1,l;v>=0;v--)(l=o[v])&&(t=l(r,d,t)||t);return t&&c(r,d,t),t};class a extends e.VividElement{}n([e.attr],a.prototype,"dp");n([e.attr({attribute:"no-shadow",mode:"boolean"})],a.prototype,"noShadow");n([e.attr({attribute:"not-relative",mode:"boolean"})],a.prototype,"notRelative");const p=':host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:"";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}',f=({dp:o,noShadow:r,notRelative:d})=>i.classNames("control",[`dp-${o}`,!!o],["no-shadow",!!r],["not-relative",!!d]),u=e.html` <div
|
|
2
|
+
class="${f}"
|
|
3
|
+
part="base"
|
|
4
|
+
>
|
|
5
|
+
<slot></slot>
|
|
6
|
+
</div>`,s=e.defineVividComponent("elevation",a,u,[],{styles:p}),_=e.createRegisterFunction(s);exports.Elevation=a;exports.elevationDefinition=s;exports.registerElevation=_;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { V as n, a as v, h as i, c, d as p } from "./vivid-element.js";
|
|
2
|
+
import { c as f } from "./class-names.js";
|
|
3
|
+
var u = Object.defineProperty, s = (o, a, t, m) => {
|
|
4
|
+
for (var e = void 0, r = o.length - 1, l; r >= 0; r--)
|
|
5
|
+
(l = o[r]) && (e = l(a, t, e) || e);
|
|
6
|
+
return e && u(a, t, e), e;
|
|
7
|
+
};
|
|
8
|
+
class d extends n {
|
|
9
|
+
}
|
|
10
|
+
s([
|
|
11
|
+
v
|
|
12
|
+
], d.prototype, "dp");
|
|
13
|
+
s([
|
|
14
|
+
v({ attribute: "no-shadow", mode: "boolean" })
|
|
15
|
+
], d.prototype, "noShadow");
|
|
16
|
+
s([
|
|
17
|
+
v({ attribute: "not-relative", mode: "boolean" })
|
|
18
|
+
], d.prototype, "notRelative");
|
|
19
|
+
const _ = ':host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:"";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}', h = ({ dp: o, noShadow: a, notRelative: t }) => f(
|
|
20
|
+
"control",
|
|
21
|
+
[`dp-${o}`, !!o],
|
|
22
|
+
["no-shadow", !!a],
|
|
23
|
+
["not-relative", !!t]
|
|
24
|
+
), w = i` <div
|
|
25
|
+
class="${h}"
|
|
26
|
+
part="base"
|
|
27
|
+
>
|
|
28
|
+
<slot></slot>
|
|
29
|
+
</div>`, b = p(
|
|
30
|
+
"elevation",
|
|
31
|
+
d,
|
|
32
|
+
w,
|
|
33
|
+
[],
|
|
34
|
+
{
|
|
35
|
+
styles: _
|
|
36
|
+
}
|
|
37
|
+
), k = c(b);
|
|
38
|
+
export {
|
|
39
|
+
d as E,
|
|
40
|
+
b as e,
|
|
41
|
+
k as r
|
|
42
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const b=require("./definition9.cjs"),i=require("./vivid-element.cjs"),c=require("./key-codes.cjs"),h=require("./slider.template.cjs"),m=require("./delegates-aria.cjs"),g=require("./form-associated.cjs"),d=require("./aria.cjs"),k=require("./localized.cjs"),f=require("./numbers.cjs");var l;(function(a){a.ltr="ltr",a.rtl="rtl"})(l||(l={}));const y=':host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover: hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:"";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:"";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover: hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}',_=a=>{const t=a.closest("[dir]");return t!==null&&t.dir==="rtl"?l.rtl:l.ltr};var z=Object.defineProperty,x=Object.getOwnPropertyDescriptor,r=(a,t,e,n)=>{for(var s=n>1?void 0:n?x(t,e):t,u=a.length-1,p;u>=0;u--)(p=a[u])&&(s=(n?p(t,e,s):p(s))||s);return n&&s&&z(t,e,s),s};const w={singleValue:"single-value"};class o extends k.Localized(m.DelegatesAria(g.FormAssociated(i.VividElement))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.direction=l.ltr,this.isDragging=!1,this.trackWidth=0,this.trackMinWidth=0,this.trackHeight=0,this.trackLeft=0,this.trackMinHeight=0,this.valueTextFormatter=t=>parseFloat(t).toLocaleString(this.locale.lang),this.min=0,this.max=10,this.step=1,this.orientation=d.Orientation.horizontal,this.mode=w.singleValue,this.keypressHandler=t=>{if(this._focusVisible=!0,!this.readOnly){if(t.key===c.keyHome)t.preventDefault(),this.value=`${this.min}`;else if(t.key===c.keyEnd)t.preventDefault(),this.value=`${this.max}`;else if(!t.shiftKey)switch(t.key){case c.keyArrowRight:case c.keyArrowUp:t.preventDefault(),this.increment();break;case c.keyArrowLeft:case c.keyArrowDown:t.preventDefault(),this.decrement();break}}},this.setupTrackConstraints=()=>{const t=this.track.getBoundingClientRect();this.trackWidth=this.track.clientWidth,this.trackMinWidth=this.track.clientLeft,this.trackHeight=t.bottom,this.trackMinHeight=t.top,this.trackLeft=this.getBoundingClientRect().left,this.trackWidth===0&&(this.trackWidth=1)},this.setupListeners=(t=!1)=>{const e=t?"removeEventListener":"addEventListener";this[e]("keydown",this.keypressHandler),this[e]("mousedown",this.handleMouseDown),this.thumb[e]("mousedown",this.handleThumbMouseDown,{passive:!0}),this.thumb[e]("touchstart",this.handleThumbMouseDown,{passive:!0}),t&&(this.handleMouseDown(null),this.handleThumbMouseDown(null))},this.initialValue="",this.handleThumbMouseDown=t=>{if(t){if(this.readOnly||this.disabled||t.defaultPrevented)return;this.#e=!0,t.target.focus(),this.#e=!1}const e=t!==null?"addEventListener":"removeEventListener";window[e]("mouseup",this.handleWindowMouseUp),window[e]("mousemove",this.handleMouseMove,{passive:!0}),window[e]("touchmove",this.handleMouseMove,{passive:!0}),window[e]("touchend",this.handleWindowMouseUp),this.isDragging=t!==null},this.handleMouseMove=t=>{if(this.readOnly||this.disabled||t.defaultPrevented)return;const e="TouchEvent"in window&&t instanceof TouchEvent?t.touches[0]:t,n=this.#r(e);this.value=`${this.#t(n)}`},this.handleWindowMouseUp=t=>{this.stopDragging()},this.stopDragging=()=>{this.isDragging=!1,this.handleMouseDown(null),this.handleThumbMouseDown(null)},this.handleMouseDown=t=>{const e=t!==null?"addEventListener":"removeEventListener";if((t===null||!this.disabled&&!this.readOnly)&&(window[e]("mouseup",this.handleWindowMouseUp),window.document[e]("mouseleave",this.handleWindowMouseUp),window[e]("mousemove",this.handleMouseMove),t)){t.preventDefault(),this.setupTrackConstraints(),this.#e=!0,t.target.focus(),this.#e=!1;const n=this.#r(t);this.value=`${this.#t(n)}`,this.isDragging=!0}},this.markers=!1,this.pin=!1,this._focusVisible=!1,this._hoveringOnThumb=!1,this.#e=!1,this._onFocusIn=()=>{this.#e||(this._focusVisible=!0)},this._onFocusOut=()=>{this._focusVisible=!1},this.#i=()=>{this._hoveringOnThumb=!0},this.#o=()=>{this._hoveringOnThumb=!1}}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}get valueAsNumber(){return parseFloat(this.value)}set valueAsNumber(t){this.value=t.toString()}valueChanged(t,e){if(super.valueChanged(t,e),this.$fastController.isConnected){const n=parseFloat(e),s=this.#t(n).toString();if(s!==e){this.value=s;return}this.setThumbPositionForOrientation(this.direction),this.$emit("change")}}minChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.min=`${this.min}`),this.validate()}maxChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.max=`${this.max}`),this.validate()}stepChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.step=`${this.step}`),this.updateStepMultiplier(),this.validate()}orientationChanged(){this.$fastController.isConnected&&this.setThumbPositionForOrientation(this.direction)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","range"),this.direction=_(this),this.updateStepMultiplier(),this.setupTrackConstraints(),this.setupListeners(),this.setupDefaultValue(),this.setThumbPositionForOrientation(this.direction),this.#s()}disconnectedCallback(){this.setupListeners(!0),this.#a()}increment(){const t=this.direction!==l.rtl&&this.orientation!==d.Orientation.vertical?Number(this.value)+Number(this.step):Number(this.value)-Number(this.step);this.value=this.#t(t).toString()}decrement(){const t=this.direction!==l.rtl&&this.orientation!==d.Orientation.vertical?Number(this.value)-Number(this.step):Number(this.value)+Number(this.step);this.value=this.#t(t).toString()}setThumbPositionForOrientation(t){const e=this.#n(this.valueAsNumber);this.orientation===d.Orientation.horizontal?this.position=this.isDragging?`right: ${e}%; transition: none;`:`right: ${e}%; transition: right 0.2s ease;`:this.position=this.isDragging?`bottom: ${e}%; transition: none;`:`bottom: ${e}%; transition: bottom 0.2s ease;`}#n(t){return(1-h.inverseLerp(this.min,this.max,t))*100}updateStepMultiplier(){const t=this.step+"",e=this.step%1?t.length-t.indexOf(".")-1:0;this.stepMultiplier=Math.pow(10,e)}get midpoint(){return`${this.#t((this.max+this.min)/2)}`}setupDefaultValue(){if(typeof this.value=="string")if(this.value.length===0)this.initialValue=this.midpoint;else{const t=parseFloat(this.value);!Number.isNaN(t)&&(t<this.min||t>this.max)&&(this.value=this.midpoint)}}#r(t){const e=this.track.getBoundingClientRect(),[n,s,u]=this.orientation===d.Orientation.horizontal?[this.track.clientLeft,this.track.clientWidth,t.pageX-document.documentElement.scrollLeft-this.getBoundingClientRect().left]:[e.top,e.bottom,t.pageY-document.documentElement.scrollTop];return h.lerp(this.min,this.max,h.inverseLerp(n,s,u))}#t(t){return f.limit(this.min,this.max,h.roundToStepValue(t-this.min,this.step)+this.min)}get _isThumbPopupOpen(){return this._focusVisible||this._hoveringOnThumb||this.isDragging}#e;#s(){this.thumb.addEventListener("mouseover",this.#i,{passive:!0}),this.thumb.addEventListener("mouseout",this.#o,{passive:!0})}#a(){this.thumb.removeEventListener("mouseover",this.#i),this.thumb.removeEventListener("mouseout",this.#o)}#i;#o}r([i.attr({attribute:"readonly",mode:"boolean"})],o.prototype,"readOnly",2);r([i.observable],o.prototype,"direction",2);r([i.observable],o.prototype,"isDragging",2);r([i.observable],o.prototype,"position",2);r([i.observable],o.prototype,"trackWidth",2);r([i.observable],o.prototype,"trackMinWidth",2);r([i.observable],o.prototype,"trackHeight",2);r([i.observable],o.prototype,"trackLeft",2);r([i.observable],o.prototype,"trackMinHeight",2);r([i.observable],o.prototype,"valueTextFormatter",2);r([i.attr({converter:i.nullableNumberConverter})],o.prototype,"min",2);r([i.attr({converter:i.nullableNumberConverter})],o.prototype,"max",2);r([i.attr({converter:h.defaultToOneConverter})],o.prototype,"step",2);r([i.attr],o.prototype,"orientation",2);r([i.attr],o.prototype,"mode",2);r([i.attr({mode:"boolean"})],o.prototype,"markers",2);r([i.attr({mode:"boolean"})],o.prototype,"pin",2);r([i.attr],o.prototype,"connotation",2);r([i.observable],o.prototype,"_focusVisible",2);r([i.observable],o.prototype,"_hoveringOnThumb",2);r([i.volatile],o.prototype,"_isThumbPopupOpen",1);const v=i.defineVividComponent("slider",o,h.SliderTemplate,[b.popupDefinition],{styles:y,shadowOptions:{delegatesFocus:!0}}),M=i.createRegisterFunction(v);exports.Slider=o;exports.registerSlider=M;exports.sliderDefinition=v;
|