@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/dist/.storybook/utilities.js +4 -4
- package/dist/api.js +1 -1
- package/dist/api.js.map +2 -2
- package/dist/custom-elements.json +1303 -619
- package/dist/docs/affix/affix.md +120 -3
- package/dist/docs/affix/api.md +2 -2
- package/dist/docs/affix/styling.md +108 -0
- package/dist/docs/alert/alert.md +6 -6
- package/dist/docs/alert/api.md +4 -4
- package/dist/docs/alert/styling.md +1 -0
- package/dist/docs/attention/api.md +50 -2
- package/dist/docs/attention/attention.md +52 -2
- package/dist/docs/attention/styling.md +1 -0
- package/dist/docs/badge/api.md +50 -4
- package/dist/docs/badge/badge.md +52 -4
- package/dist/docs/badge/styling.md +1 -0
- package/dist/docs/box/api.md +2 -2
- package/dist/docs/box/box.md +24 -42
- package/dist/docs/box/examples.md +20 -38
- package/dist/docs/box/styling.md +1 -0
- package/dist/docs/breadcrumb-item/api.md +27 -0
- package/dist/docs/breadcrumb-item/breadcrumb-item.md +34 -0
- package/dist/docs/breadcrumbs/accessibility.md +8 -18
- package/dist/docs/breadcrumbs/breadcrumbs.md +128 -36
- package/dist/docs/breadcrumbs/examples.md +15 -9
- package/dist/docs/breadcrumbs/styling.md +97 -0
- package/dist/docs/breadcrumbs/usage.md +8 -8
- package/dist/docs/button/api.md +32 -24
- package/dist/docs/button/button.md +105 -26
- package/dist/docs/button/styling.md +72 -0
- package/dist/docs/card/api.md +8 -0
- package/dist/docs/card/card.md +10 -2
- package/dist/docs/card/styling.md +1 -0
- package/dist/docs/checkbox/api.md +176 -0
- package/dist/docs/checkbox/checkbox.md +356 -0
- package/dist/docs/checkbox/styling.md +173 -0
- package/dist/docs/checkbox-group/accessibility.md +71 -0
- package/dist/docs/checkbox-group/api.md +103 -0
- package/dist/docs/checkbox-group/checkbox-group.md +529 -0
- package/dist/docs/checkbox-group/examples.md +105 -0
- package/dist/docs/checkbox-group/styling.md +134 -0
- package/dist/docs/checkbox-group/usage.md +95 -0
- package/dist/docs/combobox/accessibility.md +71 -0
- package/dist/docs/combobox/api.md +74 -36
- package/dist/docs/combobox/combobox.md +219 -38
- package/dist/docs/combobox/examples.md +44 -0
- package/dist/docs/combobox/styling.md +1 -0
- package/dist/docs/combobox/usage.md +28 -0
- package/dist/docs/datepicker/accessibility.md +25 -0
- package/dist/docs/datepicker/api.md +37 -21
- package/dist/docs/datepicker/datepicker.md +223 -23
- package/dist/docs/datepicker/examples.md +75 -0
- package/dist/docs/datepicker/styling.md +1 -0
- package/dist/docs/datepicker/usage.md +84 -0
- package/dist/docs/expandable/api.md +23 -35
- package/dist/docs/expandable/examples.md +54 -0
- package/dist/docs/expandable/expandable.md +77 -35
- package/dist/docs/expandable/styling.md +1 -0
- package/dist/docs/icon/accessibility.md +5 -0
- package/dist/docs/icon/api.md +43 -0
- package/dist/docs/icon/examples.md +45 -0
- package/dist/docs/icon/icon.md +115 -0
- package/dist/docs/icon/styling.md +1 -0
- package/dist/docs/icon/usage.md +11 -0
- package/dist/docs/index.md +49 -0
- package/dist/docs/link/api.md +24 -28
- package/dist/docs/link/examples.md +75 -0
- package/dist/docs/link/link.md +119 -30
- package/dist/docs/link/styling.md +1 -0
- package/dist/docs/link/usage.md +18 -0
- package/dist/docs/modal/api.md +18 -2
- package/dist/docs/modal/modal.md +20 -2
- package/dist/docs/modal/styling.md +1 -0
- package/dist/docs/modal-footer/modal-footer.md +0 -6
- package/dist/docs/modal-header/modal-header.md +0 -6
- package/dist/docs/page-indicator/page-indicator.md +2 -0
- package/dist/docs/page-indicator/styling.md +1 -0
- package/dist/docs/pagination/api.md +4 -4
- package/dist/docs/pagination/pagination.md +6 -4
- package/dist/docs/pagination/styling.md +1 -0
- package/dist/docs/pill/api.md +8 -8
- package/dist/docs/pill/pill.md +10 -8
- package/dist/docs/pill/styling.md +1 -0
- package/dist/docs/radio/radio.md +1 -7
- package/dist/docs/radio-group/api.md +4 -4
- package/dist/docs/radio-group/radio-group.md +183 -68
- package/dist/docs/radio-group/styling.md +179 -64
- package/dist/docs/select/api.md +10 -10
- package/dist/docs/select/select.md +103 -10
- package/dist/docs/select/styling.md +92 -0
- package/dist/docs/slider/api.md +22 -22
- package/dist/docs/slider/slider.md +24 -22
- package/dist/docs/slider/styling.md +1 -0
- package/dist/docs/slider-thumb/api.md +28 -12
- package/dist/docs/slider-thumb/slider-thumb.md +30 -12
- package/dist/docs/slider-thumb/styling.md +1 -0
- package/dist/docs/snackbar/accessibility.md +20 -0
- package/dist/docs/snackbar/api.md +30 -0
- package/dist/docs/snackbar/examples.md +191 -0
- package/dist/docs/snackbar/snackbar.md +385 -0
- package/dist/docs/snackbar/styling.md +72 -0
- package/dist/docs/snackbar/usage.md +60 -0
- package/dist/docs/snackbar-item/api.md +41 -0
- package/dist/docs/snackbar-item/snackbar-item.md +49 -0
- package/dist/docs/step/api.md +16 -0
- package/dist/docs/step/step.md +16 -0
- package/dist/docs/step-indicator/step-indicator.md +2 -0
- package/dist/docs/step-indicator/styling.md +1 -0
- package/dist/docs/switch/api.md +8 -0
- package/dist/docs/switch/styling.md +1 -0
- package/dist/docs/switch/switch.md +10 -0
- package/dist/docs/tabs/api.md +2 -2
- package/dist/docs/tabs/styling.md +1 -0
- package/dist/docs/tabs/tabs.md +4 -2
- package/dist/docs/textarea/api.md +54 -14
- package/dist/docs/textarea/styling.md +92 -0
- package/dist/docs/textarea/textarea.md +147 -14
- package/dist/docs/textfield/api.md +74 -34
- package/dist/docs/textfield/styling.md +96 -0
- package/dist/docs/textfield/textfield.md +171 -34
- package/dist/index.d.ts +1359 -368
- package/dist/packages/affix/affix-styles.d.ts +8 -0
- package/dist/packages/affix/affix-styles.js +108 -0
- package/dist/packages/affix/affix.d.ts +16 -13
- package/dist/packages/affix/affix.hydration.test.d.ts +1 -1
- package/dist/packages/affix/affix.hydration.test.js +15 -15
- package/dist/packages/affix/affix.js +451 -320
- package/dist/packages/affix/affix.js.map +4 -4
- package/dist/packages/affix/affix.react.stories.d.ts +3 -3
- package/dist/packages/affix/affix.react.stories.js +3 -3
- package/dist/packages/affix/affix.react.test.js +5 -3
- package/dist/packages/affix/affix.stories.d.ts +3 -3
- package/dist/packages/affix/affix.stories.js +10 -10
- package/dist/packages/affix/affix.test.d.ts +1 -1
- package/dist/packages/affix/affix.test.js +10 -10
- package/dist/packages/affix/react.d.ts +3 -3
- package/dist/packages/affix/react.js +6 -6
- package/dist/packages/affix/styles.js +2 -2
- package/dist/packages/alert/alert.d.ts +3 -3
- package/dist/packages/alert/alert.hydration.test.d.ts +1 -1
- package/dist/packages/alert/alert.hydration.test.js +21 -21
- package/dist/packages/alert/alert.js +349 -324
- package/dist/packages/alert/alert.js.map +3 -3
- package/dist/packages/alert/alert.react.stories.d.ts +2 -2
- package/dist/packages/alert/alert.react.stories.js +13 -13
- package/dist/packages/alert/alert.stories.d.ts +4 -4
- package/dist/packages/alert/alert.stories.js +29 -27
- package/dist/packages/alert/alert.test.d.ts +1 -1
- package/dist/packages/alert/alert.test.js +34 -21
- package/dist/packages/alert/react.d.ts +1 -1
- package/dist/packages/alert/react.js +4 -4
- package/dist/packages/alert/styles.js +2 -2
- package/dist/packages/attention/attention.d.ts +11 -6
- package/dist/packages/attention/attention.hydration.test.d.ts +1 -1
- package/dist/packages/attention/attention.hydration.test.js +29 -29
- package/dist/packages/attention/attention.js +1795 -1781
- package/dist/packages/attention/attention.js.map +4 -4
- package/dist/packages/attention/attention.react.stories.d.ts +3 -3
- package/dist/packages/attention/attention.react.stories.js +13 -13
- package/dist/packages/attention/attention.react.test.js +11 -7
- package/dist/packages/attention/attention.stories.d.ts +4 -4
- package/dist/packages/attention/attention.stories.js +126 -117
- package/dist/packages/attention/attention.test.d.ts +1 -1
- package/dist/packages/attention/attention.test.js +18 -10
- package/dist/packages/attention/layout-styles.js +900 -900
- package/dist/packages/attention/react.d.ts +4 -4
- package/dist/packages/attention/react.js +13 -11
- package/dist/packages/attention/styles.js +2 -2
- package/dist/packages/badge/badge.d.ts +3 -3
- package/dist/packages/badge/badge.hydration.test.d.ts +1 -1
- package/dist/packages/badge/badge.hydration.test.js +25 -25
- package/dist/packages/badge/badge.js +281 -281
- package/dist/packages/badge/badge.js.map +3 -3
- package/dist/packages/badge/badge.react.stories.d.ts +3 -3
- package/dist/packages/badge/badge.react.stories.js +17 -17
- package/dist/packages/badge/badge.stories.d.ts +3 -3
- package/dist/packages/badge/badge.stories.js +22 -20
- package/dist/packages/badge/badge.test.d.ts +1 -1
- package/dist/packages/badge/badge.test.js +13 -11
- package/dist/packages/badge/react.d.ts +1 -1
- package/dist/packages/badge/react.js +4 -4
- package/dist/packages/badge/styles.js +2 -2
- package/dist/packages/box/box.d.ts +1 -1
- package/dist/packages/box/box.hydration.test.d.ts +1 -1
- package/dist/packages/box/box.hydration.test.js +14 -14
- package/dist/packages/box/box.js +288 -288
- package/dist/packages/box/box.js.map +3 -3
- package/dist/packages/box/box.react.stories.d.ts +3 -3
- package/dist/packages/box/box.react.stories.js +8 -8
- package/dist/packages/box/box.stories.d.ts +3 -3
- package/dist/packages/box/box.stories.js +25 -19
- package/dist/packages/box/box.test.d.ts +1 -1
- package/dist/packages/box/box.test.js +6 -6
- package/dist/packages/box/react.d.ts +1 -1
- package/dist/packages/box/react.js +4 -4
- package/dist/packages/box/slot.test.d.ts +1 -1
- package/dist/packages/box/slot.test.js +6 -6
- package/dist/packages/box/styles.js +2 -2
- package/dist/packages/breadcrumb-item/breadcrumb-item.d.ts +29 -0
- package/dist/packages/breadcrumb-item/breadcrumb-item.js +2529 -0
- package/dist/packages/breadcrumb-item/breadcrumb-item.js.map +7 -0
- package/dist/packages/breadcrumb-item/react.d.ts +2 -0
- package/dist/packages/breadcrumb-item/react.js +11 -0
- package/dist/packages/breadcrumb-item/styles.d.ts +4 -0
- package/dist/packages/breadcrumb-item/styles.js +81 -0
- package/dist/packages/breadcrumbs/breadcrumbs.d.ts +4 -3
- package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.d.ts +1 -1
- package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js +57 -50
- package/dist/packages/breadcrumbs/breadcrumbs.js +287 -283
- package/dist/packages/breadcrumbs/breadcrumbs.js.map +4 -4
- package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts +4 -4
- package/dist/packages/breadcrumbs/breadcrumbs.react.stories.js +17 -16
- package/dist/packages/breadcrumbs/breadcrumbs.stories.d.ts +7 -8
- package/dist/packages/breadcrumbs/breadcrumbs.stories.js +30 -26
- package/dist/packages/breadcrumbs/breadcrumbs.test.d.ts +1 -1
- package/dist/packages/breadcrumbs/breadcrumbs.test.js +19 -17
- package/dist/packages/breadcrumbs/react.d.ts +1 -1
- package/dist/packages/breadcrumbs/react.js +4 -4
- package/dist/packages/breadcrumbs/styles.js +2 -2
- package/dist/packages/button/button.d.ts +20 -15
- package/dist/packages/button/button.hydration.test.d.ts +1 -1
- package/dist/packages/button/button.hydration.test.js +19 -19
- package/dist/packages/button/button.js +809 -811
- package/dist/packages/button/button.js.map +4 -4
- package/dist/packages/button/button.react.stories.d.ts +5 -5
- package/dist/packages/button/button.react.stories.js +30 -30
- package/dist/packages/button/button.react.test.js +13 -13
- package/dist/packages/button/button.stories.d.ts +33 -4
- package/dist/packages/button/button.stories.js +353 -70
- package/dist/packages/button/button.test.d.ts +1 -1
- package/dist/packages/button/button.test.js +36 -35
- package/dist/packages/button/react.d.ts +3 -3
- package/dist/packages/button/react.js +7 -7
- package/dist/packages/button/styles.d.ts +22 -1
- package/dist/packages/button/styles.js +433 -2
- package/dist/packages/card/card.d.ts +1 -1
- package/dist/packages/card/card.hydration.test.d.ts +1 -1
- package/dist/packages/card/card.hydration.test.js +14 -14
- package/dist/packages/card/card.js +311 -296
- package/dist/packages/card/card.js.map +4 -4
- package/dist/packages/card/card.react.stories.d.ts +3 -3
- package/dist/packages/card/card.react.stories.js +11 -11
- package/dist/packages/card/card.stories.d.ts +3 -3
- package/dist/packages/card/card.stories.js +36 -24
- package/dist/packages/card/card.test.d.ts +1 -1
- package/dist/packages/card/card.test.js +6 -6
- package/dist/packages/card/react.d.ts +1 -1
- package/dist/packages/card/react.js +4 -4
- package/dist/packages/card/styles.js +2 -2
- package/dist/packages/checkbox/checkbox.a11y.test.d.ts +1 -1
- package/dist/packages/checkbox/checkbox.a11y.test.js +47 -33
- package/dist/packages/checkbox/checkbox.d.ts +48 -17
- package/dist/packages/checkbox/checkbox.hydration.test.d.ts +1 -1
- package/dist/packages/checkbox/checkbox.hydration.test.js +21 -21
- package/dist/packages/checkbox/checkbox.js +481 -430
- package/dist/packages/checkbox/checkbox.js.map +3 -3
- package/dist/packages/checkbox/checkbox.react.stories.d.ts +3 -3
- package/dist/packages/checkbox/checkbox.react.stories.js +3 -3
- package/dist/packages/checkbox/checkbox.stories.d.ts +5 -5
- package/dist/packages/checkbox/checkbox.stories.js +99 -91
- package/dist/packages/checkbox/checkbox.test.d.ts +1 -1
- package/dist/packages/checkbox/checkbox.test.js +64 -64
- package/dist/packages/checkbox/react.d.ts +2 -2
- package/dist/packages/checkbox/react.js +6 -6
- package/dist/packages/checkbox/styles.js +183 -132
- package/dist/packages/checkbox-group/checkbox-group.a11y.test.d.ts +2 -2
- package/dist/packages/checkbox-group/checkbox-group.a11y.test.js +83 -73
- package/dist/packages/checkbox-group/checkbox-group.d.ts +54 -13
- package/dist/packages/checkbox-group/checkbox-group.hydration.test.d.ts +2 -2
- package/dist/packages/checkbox-group/checkbox-group.hydration.test.js +36 -19
- package/dist/packages/checkbox-group/checkbox-group.js +62 -57
- package/dist/packages/checkbox-group/checkbox-group.js.map +4 -4
- package/dist/packages/checkbox-group/checkbox-group.react.test.js +4 -4
- package/dist/packages/checkbox-group/checkbox-group.test.d.ts +2 -2
- package/dist/packages/checkbox-group/checkbox-group.test.js +96 -90
- package/dist/packages/checkbox-group/react.d.ts +4 -4
- package/dist/packages/checkbox-group/react.js +6 -6
- package/dist/packages/combobox/combobox.a11y.test.d.ts +2 -2
- package/dist/packages/combobox/combobox.a11y.test.js +80 -33
- package/dist/packages/combobox/combobox.d.ts +67 -47
- package/dist/packages/combobox/combobox.hydration.test.d.ts +1 -1
- package/dist/packages/combobox/combobox.hydration.test.js +73 -35
- package/dist/packages/combobox/combobox.js +338 -339
- package/dist/packages/combobox/combobox.js.map +4 -4
- package/dist/packages/combobox/combobox.react.stories.d.ts +29 -13
- package/dist/packages/combobox/combobox.react.stories.js +29 -29
- package/dist/packages/combobox/combobox.react.test.js +8 -8
- package/dist/packages/combobox/combobox.stories.d.ts +4 -4
- package/dist/packages/combobox/combobox.stories.js +104 -85
- package/dist/packages/combobox/combobox.test.d.ts +2 -2
- package/dist/packages/combobox/combobox.test.js +194 -69
- package/dist/packages/combobox/react.d.ts +15 -7
- package/dist/packages/combobox/react.js +14 -14
- package/dist/packages/combobox/styles.js +2 -3
- package/dist/packages/datepicker/DatePicker.test.d.ts +2 -2
- package/dist/packages/datepicker/DatePicker.test.js +49 -42
- package/dist/packages/datepicker/datepicker.d.ts +30 -38
- package/dist/packages/datepicker/datepicker.hydration.test.d.ts +1 -1
- package/dist/packages/datepicker/datepicker.hydration.test.js +21 -21
- package/dist/packages/datepicker/datepicker.js +673 -632
- package/dist/packages/datepicker/datepicker.js.map +4 -4
- package/dist/packages/datepicker/datepicker.react.stories.d.ts +17 -17
- package/dist/packages/datepicker/datepicker.react.stories.js +9 -9
- package/dist/packages/datepicker/datepicker.react.test.js +6 -6
- package/dist/packages/datepicker/datepicker.stories.d.ts +4 -4
- package/dist/packages/datepicker/datepicker.stories.js +32 -32
- package/dist/packages/datepicker/datepicker.test.d.ts +2 -2
- package/dist/packages/datepicker/datepicker.test.js +77 -79
- package/dist/packages/datepicker/react.d.ts +9 -9
- package/dist/packages/datepicker/react.js +16 -14
- package/dist/packages/datepicker/styles/w-datepicker-calendar.styles.js +13 -12
- package/dist/packages/datepicker/styles/w-datepicker-day.styles.js +58 -55
- package/dist/packages/datepicker/styles/w-datepicker-month.styles.js +60 -57
- package/dist/packages/datepicker/styles/w-datepicker.styles.js +87 -87
- package/dist/packages/datepicker/utils.d.ts +3 -0
- package/dist/packages/datepicker/utils.js +40 -1
- package/dist/packages/datepicker/utils.test.d.ts +1 -0
- package/dist/packages/datepicker/utils.test.js +29 -0
- package/dist/packages/expandable/expandable.d.ts +18 -39
- package/dist/packages/expandable/expandable.hydration.test.d.ts +1 -1
- package/dist/packages/expandable/expandable.hydration.test.js +21 -21
- package/dist/packages/expandable/expandable.js +359 -332
- package/dist/packages/expandable/expandable.js.map +4 -4
- package/dist/packages/expandable/expandable.react.stories.d.ts +5 -5
- package/dist/packages/expandable/expandable.react.stories.js +7 -7
- package/dist/packages/expandable/expandable.react.test.js +15 -7
- package/dist/packages/expandable/expandable.stories.d.ts +5 -5
- package/dist/packages/expandable/expandable.stories.js +51 -45
- package/dist/packages/expandable/expandable.test.d.ts +1 -1
- package/dist/packages/expandable/expandable.test.js +19 -17
- package/dist/packages/expandable/react.d.ts +3 -3
- package/dist/packages/expandable/react.js +9 -9
- package/dist/packages/expandable/styles.js +2 -2
- package/dist/packages/global.d.ts +1 -0
- package/dist/packages/global.js +5 -0
- package/dist/packages/i18n.d.ts +1 -1
- package/dist/packages/i18n.js +37 -29
- package/dist/packages/icon/icon.d.ts +22 -5
- package/dist/packages/icon/icon.hydration.test.d.ts +1 -1
- package/dist/packages/icon/icon.hydration.test.js +25 -25
- package/dist/packages/icon/icon.js +31 -26
- package/dist/packages/icon/icon.js.map +3 -3
- package/dist/packages/icon/icon.react.stories.d.ts +4 -3
- package/dist/packages/icon/icon.react.stories.js +284 -283
- package/dist/packages/icon/icon.stories.d.ts +7 -30
- package/dist/packages/icon/icon.stories.js +307 -297
- package/dist/packages/icon/icon.test.d.ts +1 -1
- package/dist/packages/icon/icon.test.js +36 -28
- package/dist/packages/icon/react.d.ts +2 -2
- package/dist/packages/icon/react.js +4 -4
- package/dist/packages/icon/style.js +24 -25
- package/dist/packages/interaction-type-detection.d.ts +22 -0
- package/dist/packages/interaction-type-detection.js +38 -0
- package/dist/packages/link/link.d.ts +22 -23
- package/dist/packages/link/link.hydration.test.d.ts +1 -1
- package/dist/packages/link/link.hydration.test.js +27 -27
- package/dist/packages/link/link.js +775 -498
- package/dist/packages/link/link.js.map +4 -4
- package/dist/packages/link/link.react.stories.d.ts +3 -3
- package/dist/packages/link/link.react.stories.js +42 -42
- package/dist/packages/link/link.react.test.js +5 -3
- package/dist/packages/link/link.stories.d.ts +3 -3
- package/dist/packages/link/link.stories.js +51 -51
- package/dist/packages/link/link.test.d.ts +1 -1
- package/dist/packages/link/link.test.js +11 -7
- package/dist/packages/link/react.d.ts +2 -2
- package/dist/packages/link/react.js +6 -6
- package/dist/packages/link/styles.d.ts +5 -0
- package/dist/packages/link/styles.js +85 -0
- package/dist/packages/modal/index.d.ts +7 -7
- package/dist/packages/modal/index.js +7 -7
- package/dist/packages/modal/modal.d.ts +3 -2
- package/dist/packages/modal/modal.hydration.test.d.ts +1 -1
- package/dist/packages/modal/modal.hydration.test.js +12 -12
- package/dist/packages/modal/modal.js +409 -409
- package/dist/packages/modal/modal.js.map +3 -3
- package/dist/packages/modal/modal.react.stories.d.ts +7 -7
- package/dist/packages/modal/modal.react.stories.js +15 -6
- package/dist/packages/modal/modal.react.test.js +5 -5
- package/dist/packages/modal/modal.stories.d.ts +6 -6
- package/dist/packages/modal/modal.stories.js +253 -238
- package/dist/packages/modal/react.d.ts +38 -8
- package/dist/packages/modal/react.js +43 -13
- package/dist/packages/modal/util.js +3 -1
- package/dist/packages/modal-footer/modal-footer.d.ts +1 -1
- package/dist/packages/modal-footer/modal-footer.js +296 -296
- package/dist/packages/modal-footer/modal-footer.js.map +3 -3
- package/dist/packages/modal-footer/react.d.ts +1 -1
- package/dist/packages/modal-footer/react.js +4 -4
- package/dist/packages/modal-header/modal-header.d.ts +2 -2
- package/dist/packages/modal-header/modal-header.js +443 -422
- package/dist/packages/modal-header/modal-header.js.map +4 -4
- package/dist/packages/modal-header/modal-header.react.test.js +5 -3
- package/dist/packages/modal-header/react.d.ts +4 -4
- package/dist/packages/modal-header/react.js +8 -8
- package/dist/packages/page-indicator/page-indicator.d.ts +1 -5
- package/dist/packages/page-indicator/page-indicator.hydration.test.d.ts +1 -1
- package/dist/packages/page-indicator/page-indicator.hydration.test.js +22 -22
- package/dist/packages/page-indicator/page-indicator.js +29 -29
- package/dist/packages/page-indicator/page-indicator.js.map +4 -4
- package/dist/packages/page-indicator/page-indicator.react.stories.d.ts +3 -3
- package/dist/packages/page-indicator/page-indicator.react.stories.js +11 -11
- package/dist/packages/page-indicator/page-indicator.react.test.js +5 -5
- package/dist/packages/page-indicator/page-indicator.stories.d.ts +9 -27
- package/dist/packages/page-indicator/page-indicator.stories.js +63 -32
- package/dist/packages/page-indicator/page-indicator.test.d.ts +1 -1
- package/dist/packages/page-indicator/page-indicator.test.js +110 -70
- package/dist/packages/page-indicator/react.d.ts +2 -2
- package/dist/packages/page-indicator/react.js +7 -7
- package/dist/packages/page-indicator/style.js +21 -21
- package/dist/packages/pagination/pagination.a11y.test.d.ts +1 -1
- package/dist/packages/pagination/pagination.a11y.test.js +59 -25
- package/dist/packages/pagination/pagination.d.ts +10 -11
- package/dist/packages/pagination/pagination.hydration.test.d.ts +1 -1
- package/dist/packages/pagination/pagination.hydration.test.js +19 -19
- package/dist/packages/pagination/pagination.js +385 -354
- package/dist/packages/pagination/pagination.js.map +4 -4
- package/dist/packages/pagination/pagination.react.stories.d.ts +11 -11
- package/dist/packages/pagination/pagination.react.stories.js +8 -8
- package/dist/packages/pagination/pagination.react.test.js +6 -6
- package/dist/packages/pagination/pagination.stories.d.ts +3 -3
- package/dist/packages/pagination/pagination.stories.js +18 -18
- package/dist/packages/pagination/pagination.test.d.ts +1 -1
- package/dist/packages/pagination/pagination.test.js +146 -72
- package/dist/packages/pagination/react.d.ts +6 -6
- package/dist/packages/pagination/react.js +12 -10
- package/dist/packages/pagination/styles.js +2 -2
- package/dist/packages/pill/pill.d.ts +6 -6
- package/dist/packages/pill/pill.hydration.test.d.ts +1 -1
- package/dist/packages/pill/pill.hydration.test.js +14 -14
- package/dist/packages/pill/pill.js +337 -314
- package/dist/packages/pill/pill.js.map +4 -4
- package/dist/packages/pill/pill.react.stories.d.ts +11 -11
- package/dist/packages/pill/pill.react.stories.js +3 -3
- package/dist/packages/pill/pill.react.test.js +8 -8
- package/dist/packages/pill/pill.stories.d.ts +3 -3
- package/dist/packages/pill/pill.stories.js +8 -8
- package/dist/packages/pill/pill.test.d.ts +1 -1
- package/dist/packages/pill/pill.test.js +17 -15
- package/dist/packages/pill/react.d.ts +6 -6
- package/dist/packages/pill/react.js +18 -14
- package/dist/packages/pill/styles.js +2 -2
- package/dist/packages/radio/base-element.d.ts +3 -3
- package/dist/packages/radio/base-element.js +3 -3
- package/dist/packages/radio/custom-error-validator.d.ts +1 -1
- package/dist/packages/radio/custom-error-validator.js +3 -3
- package/dist/packages/radio/form-associated-element.d.ts +9 -9
- package/dist/packages/radio/form-associated-element.js +27 -26
- package/dist/packages/radio/host-styles.js +9 -9
- package/dist/packages/radio/invalid.d.ts +1 -1
- package/dist/packages/radio/invalid.js +1 -1
- package/dist/packages/radio/radio-styles.js +199 -160
- package/dist/packages/radio/radio.a11y.test.d.ts +2 -2
- package/dist/packages/radio/radio.a11y.test.js +60 -58
- package/dist/packages/radio/radio.d.ts +4 -4
- package/dist/packages/radio/radio.hydration.test.d.ts +1 -1
- package/dist/packages/radio/radio.hydration.test.js +23 -14
- package/dist/packages/radio/radio.js +491 -452
- package/dist/packages/radio/radio.js.map +3 -3
- package/dist/packages/radio/radio.react.stories.d.ts +2 -2
- package/dist/packages/radio/radio.react.stories.js +3 -3
- package/dist/packages/radio/radio.stories.d.ts +4 -4
- package/dist/packages/radio/radio.stories.js +152 -136
- package/dist/packages/radio/radio.test.d.ts +1 -1
- package/dist/packages/radio/radio.test.js +74 -73
- package/dist/packages/radio/react.d.ts +1 -1
- package/dist/packages/radio/react.js +4 -4
- package/dist/packages/radio/required-validator.d.ts +1 -1
- package/dist/packages/radio/required-validator.js +12 -7
- package/dist/packages/radio/slot.d.ts +1 -1
- package/dist/packages/radio/slot.js +11 -8
- package/dist/packages/radio/watch.d.ts +1 -1
- package/dist/packages/radio/watch.js +3 -1
- package/dist/packages/radio-group/radio-group-styles.js +121 -88
- package/dist/packages/radio-group/radio-group.a11y.test.d.ts +2 -2
- package/dist/packages/radio-group/radio-group.a11y.test.js +83 -77
- package/dist/packages/radio-group/radio-group.d.ts +16 -7
- package/dist/packages/radio-group/radio-group.hydration.test.d.ts +2 -2
- package/dist/packages/radio-group/radio-group.hydration.test.js +30 -15
- package/dist/packages/radio-group/radio-group.js +655 -567
- package/dist/packages/radio-group/radio-group.js.map +4 -4
- package/dist/packages/radio-group/radio-group.react.test.js +4 -4
- package/dist/packages/radio-group/radio-group.test.d.ts +2 -2
- package/dist/packages/radio-group/radio-group.test.js +234 -229
- package/dist/packages/radio-group/react.d.ts +7 -7
- package/dist/packages/radio-group/react.js +10 -10
- package/dist/packages/select/input-styles.d.ts +11 -0
- package/dist/packages/select/input-styles.js +88 -0
- package/dist/packages/select/react.d.ts +5 -5
- package/dist/packages/select/react.js +11 -11
- package/dist/packages/select/select.a11y.test.d.ts +1 -1
- package/dist/packages/select/select.a11y.test.js +100 -89
- package/dist/packages/select/select.d.ts +10 -11
- package/dist/packages/select/select.hydration.test.d.ts +1 -1
- package/dist/packages/select/select.hydration.test.js +16 -16
- package/dist/packages/select/select.js +432 -336
- package/dist/packages/select/select.js.map +4 -4
- package/dist/packages/select/select.react.stories.d.ts +10 -10
- package/dist/packages/select/select.react.stories.js +19 -14
- package/dist/packages/select/select.react.test.js +6 -6
- package/dist/packages/select/select.stories.d.ts +3 -3
- package/dist/packages/select/select.stories.js +51 -48
- package/dist/packages/select/select.test.d.ts +1 -1
- package/dist/packages/select/select.test.js +178 -179
- package/dist/packages/select/styles.js +2 -2
- package/dist/packages/slider/Slider.d.ts +1 -1
- package/dist/packages/slider/Slider.js +4 -4
- package/dist/packages/slider/index.d.ts +2 -2
- package/dist/packages/slider/index.js +2 -2
- package/dist/packages/slider/react.d.ts +4 -4
- package/dist/packages/slider/react.js +9 -9
- package/dist/packages/slider/slider.d.ts +17 -17
- package/dist/packages/slider/slider.hydration.test.d.ts +1 -1
- package/dist/packages/slider/slider.hydration.test.js +40 -16
- package/dist/packages/slider/slider.js +485 -467
- package/dist/packages/slider/slider.js.map +4 -4
- package/dist/packages/slider/slider.react.stories.d.ts +4 -4
- package/dist/packages/slider/slider.react.stories.js +29 -32
- package/dist/packages/slider/slider.react.test.js +6 -6
- package/dist/packages/slider/slider.stories.d.ts +7 -7
- package/dist/packages/slider/slider.stories.js +333 -340
- package/dist/packages/slider/slider.test.d.ts +5 -5
- package/dist/packages/slider/slider.test.js +367 -334
- package/dist/packages/slider/styles/w-slider.styles.js +166 -148
- package/dist/packages/slider/styles.js +2 -2
- package/dist/packages/slider-thumb/SliderThumb.d.ts +1 -1
- package/dist/packages/slider-thumb/SliderThumb.js +4 -4
- package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.d.ts +1 -1
- package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.js +1 -1
- package/dist/packages/slider-thumb/react.d.ts +5 -5
- package/dist/packages/slider-thumb/react.js +11 -9
- package/dist/packages/slider-thumb/slider-thumb.d.ts +17 -17
- package/dist/packages/slider-thumb/slider-thumb.hydration.test.d.ts +1 -1
- package/dist/packages/slider-thumb/slider-thumb.hydration.test.js +26 -17
- package/dist/packages/slider-thumb/slider-thumb.js +550 -553
- package/dist/packages/slider-thumb/slider-thumb.js.map +4 -4
- package/dist/packages/slider-thumb/slider-thumb.react.test.js +9 -5
- package/dist/packages/slider-thumb/styles/w-slider-thumb.styles.js +189 -188
- package/dist/packages/slider-thumb/styles.js +2 -0
- package/dist/packages/snackbar/locales/da/messages.d.mts +1 -0
- package/dist/packages/snackbar/locales/da/messages.mjs +1 -0
- package/dist/packages/snackbar/locales/en/messages.d.mts +1 -0
- package/dist/packages/snackbar/locales/en/messages.mjs +1 -0
- package/dist/packages/snackbar/locales/fi/messages.d.mts +1 -0
- package/dist/packages/snackbar/locales/fi/messages.mjs +1 -0
- package/dist/packages/snackbar/locales/nb/messages.d.mts +1 -0
- package/dist/packages/snackbar/locales/nb/messages.mjs +1 -0
- package/dist/packages/snackbar/locales/sv/messages.d.mts +1 -0
- package/dist/packages/snackbar/locales/sv/messages.mjs +1 -0
- package/dist/packages/snackbar/react.d.ts +2 -0
- package/dist/packages/snackbar/react.js +11 -0
- package/dist/packages/snackbar/snackbar.d.ts +132 -0
- package/dist/packages/snackbar/snackbar.hydration.test.d.ts +1 -0
- package/dist/packages/snackbar/snackbar.hydration.test.js +13 -0
- package/dist/packages/snackbar/snackbar.js +2665 -0
- package/dist/packages/snackbar/snackbar.js.map +7 -0
- package/dist/packages/snackbar/snackbar.react.stories.d.ts +12 -0
- package/dist/packages/snackbar/snackbar.react.stories.js +160 -0
- package/dist/packages/snackbar/snackbar.stories.d.ts +20 -0
- package/dist/packages/snackbar/snackbar.stories.js +363 -0
- package/dist/packages/snackbar/snackbar.test.d.ts +4 -0
- package/dist/packages/snackbar/snackbar.test.js +17 -0
- package/dist/packages/snackbar/styles.d.ts +1 -0
- package/dist/packages/snackbar/styles.js +35 -0
- package/dist/packages/snackbar-item/react.d.ts +5 -0
- package/dist/packages/snackbar-item/react.js +16 -0
- package/dist/packages/snackbar-item/snackbar-item.d.ts +69 -0
- package/dist/packages/snackbar-item/snackbar-item.js +2620 -0
- package/dist/packages/snackbar-item/snackbar-item.js.map +7 -0
- package/dist/packages/snackbar-item/snackbar-item.react.test.d.ts +1 -0
- package/dist/packages/snackbar-item/snackbar-item.react.test.js +5 -0
- package/dist/packages/snackbar-item/styles.d.ts +1 -0
- package/dist/packages/snackbar-item/styles.js +133 -0
- package/dist/packages/step/react.d.ts +1 -1
- package/dist/packages/step/react.js +4 -4
- package/dist/packages/step/step.d.ts +2 -2
- package/dist/packages/step/step.hydration.test.d.ts +1 -1
- package/dist/packages/step/step.hydration.test.js +10 -10
- package/dist/packages/step/step.js +337 -315
- package/dist/packages/step/step.js.map +4 -4
- package/dist/packages/step-indicator/index.d.ts +2 -2
- package/dist/packages/step-indicator/index.js +2 -2
- package/dist/packages/step-indicator/react.d.ts +2 -2
- package/dist/packages/step-indicator/react.js +5 -5
- package/dist/packages/step-indicator/step-indicator.a11y.test.d.ts +2 -2
- package/dist/packages/step-indicator/step-indicator.a11y.test.js +48 -46
- package/dist/packages/step-indicator/step-indicator.d.ts +1 -1
- package/dist/packages/step-indicator/step-indicator.hydration.test.d.ts +1 -1
- package/dist/packages/step-indicator/step-indicator.hydration.test.js +10 -10
- package/dist/packages/step-indicator/step-indicator.js +285 -281
- package/dist/packages/step-indicator/step-indicator.js.map +3 -3
- package/dist/packages/step-indicator/stepindicator.react.stories.d.ts +2 -2
- package/dist/packages/step-indicator/stepindicator.react.stories.js +3 -3
- package/dist/packages/step-indicator/stepindicator.stories.d.ts +3 -3
- package/dist/packages/step-indicator/stepindicator.stories.js +129 -129
- package/dist/packages/step-indicator/styles.js +2 -2
- package/dist/packages/styles.js +277 -275
- package/dist/packages/switch/react.d.ts +1 -1
- package/dist/packages/switch/react.js +6 -6
- package/dist/packages/switch/styles.js +2 -2
- package/dist/packages/switch/switch.a11y.test.d.ts +1 -1
- package/dist/packages/switch/switch.a11y.test.js +46 -38
- package/dist/packages/switch/switch.d.ts +3 -3
- package/dist/packages/switch/switch.hydration.test.d.ts +1 -1
- package/dist/packages/switch/switch.hydration.test.js +23 -23
- package/dist/packages/switch/switch.js +304 -304
- package/dist/packages/switch/switch.js.map +3 -3
- package/dist/packages/switch/switch.react.stories.d.ts +2 -2
- package/dist/packages/switch/switch.react.stories.js +2 -2
- package/dist/packages/switch/switch.stories.d.ts +2 -2
- package/dist/packages/switch/switch.stories.js +42 -37
- package/dist/packages/switch/switch.test.d.ts +1 -1
- package/dist/packages/switch/switch.test.js +30 -35
- package/dist/packages/tab/react.d.ts +9 -7
- package/dist/packages/tab/react.js +11 -10
- package/dist/packages/tab/styles.d.ts +1 -0
- package/dist/packages/tab/styles.js +2 -0
- package/dist/packages/tab/tab.d.ts +6 -6
- package/dist/packages/tab/tab.hydration.test.d.ts +1 -1
- package/dist/packages/tab/tab.hydration.test.js +18 -12
- package/dist/packages/tab/tab.js +309 -308
- package/dist/packages/tab/tab.js.map +4 -4
- package/dist/packages/tab/tab.react.test.js +5 -3
- package/dist/packages/tab-panel/react.d.ts +3 -2
- package/dist/packages/tab-panel/react.js +11 -5
- package/dist/packages/tab-panel/tab-panel.d.ts +3 -3
- package/dist/packages/tab-panel/tab-panel.hydration.test.d.ts +1 -1
- package/dist/packages/tab-panel/tab-panel.hydration.test.js +13 -10
- package/dist/packages/tab-panel/tab-panel.js +293 -291
- package/dist/packages/tab-panel/tab-panel.js.map +3 -3
- package/dist/packages/tabs/index.d.ts +4 -4
- package/dist/packages/tabs/index.js +3 -3
- package/dist/packages/tabs/react.d.ts +27 -8
- package/dist/packages/tabs/react.js +30 -9
- package/dist/packages/tabs/styles.js +2 -2
- package/dist/packages/tabs/tabs.a11y.test.d.ts +3 -3
- package/dist/packages/tabs/tabs.a11y.test.js +188 -169
- package/dist/packages/tabs/tabs.d.ts +6 -5
- package/dist/packages/tabs/tabs.hydration.test.d.ts +3 -1
- package/dist/packages/tabs/tabs.hydration.test.js +22 -8
- package/dist/packages/tabs/tabs.js +293 -286
- package/dist/packages/tabs/tabs.js.map +3 -3
- package/dist/packages/tabs/tabs.react.stories.d.ts +12 -10
- package/dist/packages/tabs/tabs.react.stories.js +28 -28
- package/dist/packages/tabs/tabs.stories.d.ts +4 -4
- package/dist/packages/tabs/tabs.stories.js +101 -95
- package/dist/packages/tabs/tabs.test.d.ts +3 -3
- package/dist/packages/tabs/tabs.test.js +137 -123
- package/dist/packages/textarea/input-styles.d.ts +11 -0
- package/dist/packages/textarea/input-styles.js +88 -0
- package/dist/packages/textarea/react.d.ts +11 -11
- package/dist/packages/textarea/react.js +17 -17
- package/dist/packages/textarea/styles.js +2 -2
- package/dist/packages/textarea/textarea.a11y.test.d.ts +1 -1
- package/dist/packages/textarea/textarea.a11y.test.js +90 -58
- package/dist/packages/textarea/textarea.d.ts +11 -11
- package/dist/packages/textarea/textarea.hydration.test.d.ts +1 -1
- package/dist/packages/textarea/textarea.hydration.test.js +19 -19
- package/dist/packages/textarea/textarea.js +385 -304
- package/dist/packages/textarea/textarea.js.map +4 -4
- package/dist/packages/textarea/textarea.react.stories.d.ts +21 -21
- package/dist/packages/textarea/textarea.react.stories.js +13 -13
- package/dist/packages/textarea/textarea.react.test.js +7 -7
- package/dist/packages/textarea/textarea.stories.d.ts +3 -3
- package/dist/packages/textarea/textarea.stories.js +44 -42
- package/dist/packages/textarea/textarea.test.d.ts +1 -1
- package/dist/packages/textarea/textarea.test.js +124 -88
- package/dist/packages/textfield/input-styles.d.ts +11 -0
- package/dist/packages/textfield/input-styles.js +88 -0
- package/dist/packages/textfield/locales/da/messages.d.mts +1 -0
- package/dist/packages/textfield/locales/da/messages.mjs +1 -0
- package/dist/packages/textfield/locales/en/messages.d.mts +1 -0
- package/dist/packages/textfield/locales/en/messages.mjs +1 -0
- package/dist/packages/textfield/locales/fi/messages.d.mts +1 -0
- package/dist/packages/textfield/locales/fi/messages.mjs +1 -0
- package/dist/packages/textfield/locales/nb/messages.d.mts +1 -0
- package/dist/packages/textfield/locales/nb/messages.mjs +1 -0
- package/dist/packages/textfield/locales/sv/messages.d.mts +1 -0
- package/dist/packages/textfield/locales/sv/messages.mjs +1 -0
- package/dist/packages/textfield/react.d.ts +11 -11
- package/dist/packages/textfield/react.js +17 -17
- package/dist/packages/textfield/styles/w-textfield.styles.js +60 -58
- package/dist/packages/textfield/styles.js +2 -2
- package/dist/packages/textfield/textfield.d.ts +36 -26
- package/dist/packages/textfield/textfield.hydration.test.d.ts +1 -1
- package/dist/packages/textfield/textfield.hydration.test.js +19 -19
- package/dist/packages/textfield/textfield.js +468 -373
- package/dist/packages/textfield/textfield.js.map +4 -4
- package/dist/packages/textfield/textfield.react.stories.d.ts +21 -21
- package/dist/packages/textfield/textfield.react.stories.js +31 -31
- package/dist/packages/textfield/textfield.react.test.js +7 -7
- package/dist/packages/textfield/textfield.stories.d.ts +4 -4
- package/dist/packages/textfield/textfield.stories.js +107 -89
- package/dist/packages/textfield/textfield.test.d.ts +2 -2
- package/dist/packages/textfield/textfield.test.js +103 -71
- package/dist/packages/toast/api.d.ts +2 -2
- package/dist/packages/toast/api.js +3 -3
- package/dist/packages/toast/index.d.ts +5 -5
- package/dist/packages/toast/index.js +5 -5
- package/dist/packages/toast/styles.js +2 -2
- package/dist/packages/toast/toast.d.ts +5 -5
- package/dist/packages/toast/toast.js +349 -320
- package/dist/packages/toast/toast.js.map +4 -4
- package/dist/packages/toast/toast.stories.d.ts +5 -9
- package/dist/packages/toast/toast.stories.js +37 -33
- package/dist/packages/toast/toast.test.d.ts +1 -1
- package/dist/packages/toast/toast.test.js +48 -31
- package/dist/packages/toast/types.d.ts +1 -1
- package/dist/packages/toast-container/styles.d.ts +1 -0
- package/dist/packages/toast-container/styles.js +2 -0
- package/dist/packages/toast-container/toast-container.d.ts +2 -2
- package/dist/packages/toast-container/toast-container.js +295 -294
- package/dist/packages/toast-container/toast-container.js.map +4 -4
- package/dist/packages/utils/element-collapse.d.ts +12 -0
- package/dist/packages/utils/element-collapse.js +102 -0
- package/dist/packages/utils/expand-transition.d.ts +1 -1
- package/dist/packages/utils/expand-transition.js +12 -10
- package/dist/packages/utils/unstyled-heading.d.ts +1 -1
- package/dist/packages/utils/unstyled-heading.js +4 -4
- package/dist/packages/utils/window-exists.js +1 -1
- package/dist/packages/utils.js +2 -2
- package/dist/setup-tests.d.ts +3 -3
- package/dist/setup-tests.js +16 -13
- package/dist/tests/react-hydration.js +29 -30
- package/dist/tests/react-ssr-attributes.d.ts +1 -1
- package/dist/tests/react-ssr-attributes.js +4 -4
- package/dist/web-types.json +566 -301
- package/eik/index.js +96 -0
- package/package.json +35 -29
- package/dist/docs/modal-footer/accessibility.md +0 -1
- package/dist/docs/modal-footer/examples.md +0 -1
- package/dist/docs/modal-footer/usage.md +0 -1
- package/dist/docs/modal-header/accessibility.md +0 -1
- package/dist/docs/modal-header/examples.md +0 -1
- package/dist/docs/modal-header/usage.md +0 -1
- package/dist/docs/radio/accessibility.md +0 -1
- package/dist/docs/radio/examples.md +0 -1
- package/dist/docs/radio/usage.md +0 -1
- package/dist/packages/button/styles/w-button.styles.d.ts +0 -1
- package/dist/packages/button/styles/w-button.styles.js +0 -282
- package/dist/packages/link/styles/w-link.styles.js +0 -213
- /package/dist/packages/{link/styles/w-link.styles.d.ts → slider-thumb/styles.d.ts} +0 -0
package/dist/docs/select/api.md
CHANGED
|
@@ -10,15 +10,15 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
|
|
|
10
10
|
| auto-focus | `boolean` | `false` | Whether the element should receive focus on render. **Deprecated**: Use the native `autofocus` attribute instead. |
|
|
11
11
|
| autofocus | `boolean` | `false` | Whether the element should receive focus on render |
|
|
12
12
|
| disabled | `boolean` | `false` | Renders the field in a disabled state. |
|
|
13
|
-
| help-text | `string` | `-` | The content displayed as the help text. |
|
|
14
|
-
| hint | `string` | `-` | The content displayed as the help text. **Deprecated**: Use `help-text` instead. |
|
|
13
|
+
| help-text | `string \| undefined` | `-` | The content displayed as the help text. |
|
|
14
|
+
| hint | `string \| undefined` | `-` | The content displayed as the help text. **Deprecated**: Use `help-text` instead. |
|
|
15
15
|
| invalid | `boolean` | `false` | Renders the field in an invalid state. |
|
|
16
|
-
| label | `string` | `-` | The content to display as the label. |
|
|
17
|
-
| name | `string` | `-` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. |
|
|
16
|
+
| label | `string \| undefined` | `-` | The content to display as the label. |
|
|
17
|
+
| name | `string \| undefined` | `-` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. |
|
|
18
18
|
| optional | `boolean` | `false` | Whether to show the optional indicator after the label. |
|
|
19
19
|
| read-only | `boolean` | `false` | Renders the field in a readonly state. **Deprecated**: Use the native readonly attribute instead. |
|
|
20
20
|
| readonly | `boolean` | `false` | Renders the field in a readonly state. |
|
|
21
|
-
| value | `string` | `-` | Lets you set the current value. |
|
|
21
|
+
| value | `string \| undefined` | `-` | Lets you set the current value. |
|
|
22
22
|
|
|
23
23
|
### Property Details
|
|
24
24
|
|
|
@@ -60,7 +60,7 @@ The content displayed as the help text.
|
|
|
60
60
|
|
|
61
61
|
Paired with `invalid` to show the text as a validation error.
|
|
62
62
|
|
|
63
|
-
- Type: `string`
|
|
63
|
+
- Type: `string | undefined`
|
|
64
64
|
- Default: `-`
|
|
65
65
|
|
|
66
66
|
#### hint
|
|
@@ -69,7 +69,7 @@ Paired with `invalid` to show the text as a validation error.
|
|
|
69
69
|
|
|
70
70
|
The content displayed as the help text.
|
|
71
71
|
|
|
72
|
-
- Type: `string`
|
|
72
|
+
- Type: `string | undefined`
|
|
73
73
|
- Default: `-`
|
|
74
74
|
|
|
75
75
|
#### invalid
|
|
@@ -85,14 +85,14 @@ Paired with `help-text` to provide feedback about the error.
|
|
|
85
85
|
|
|
86
86
|
The content to display as the label.
|
|
87
87
|
|
|
88
|
-
- Type: `string`
|
|
88
|
+
- Type: `string | undefined`
|
|
89
89
|
- Default: `-`
|
|
90
90
|
|
|
91
91
|
#### name
|
|
92
92
|
|
|
93
93
|
The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.
|
|
94
94
|
|
|
95
|
-
- Type: `string`
|
|
95
|
+
- Type: `string | undefined`
|
|
96
96
|
- Default: `-`
|
|
97
97
|
|
|
98
98
|
#### optional
|
|
@@ -122,7 +122,7 @@ Renders the field in a readonly state.
|
|
|
122
122
|
|
|
123
123
|
Lets you set the current value.
|
|
124
124
|
|
|
125
|
-
- Type: `string`
|
|
125
|
+
- Type: `string | undefined`
|
|
126
126
|
- Default: `-`
|
|
127
127
|
|
|
128
128
|
### Events
|
|
@@ -158,6 +158,99 @@ The `readonly` boolean attribute makes the selection immutable. Unlike disabled
|
|
|
158
158
|
|
|
159
159
|
</elements-example>
|
|
160
160
|
|
|
161
|
+
## Styling API
|
|
162
|
+
|
|
163
|
+
This section documents the supported styling hooks for `<w-select>`.
|
|
164
|
+
|
|
165
|
+
Use these hooks to customize appearance without relying on internal structure or selectors.
|
|
166
|
+
|
|
167
|
+
Before changing the default styles, remember that doing so can result in less consistent experiences for users across the product. Prefer defaults.
|
|
168
|
+
|
|
169
|
+
- Prefer **component tokens** for size, spacing, and state styling.
|
|
170
|
+
- Use **parts** only for small, local tweaks.
|
|
171
|
+
- Avoid relying on internal class names or selectors.
|
|
172
|
+
|
|
173
|
+
### Parts
|
|
174
|
+
|
|
175
|
+
The select exposes a minimal set of parts that can be targeted for last‑mile layout or typography tweaks.
|
|
176
|
+
|
|
177
|
+
| Part | Targets | Typical use |
|
|
178
|
+
|---|---|---|
|
|
179
|
+
| `input` | native select element | minor typography or spacing tweaks |
|
|
180
|
+
|
|
181
|
+
Example:
|
|
182
|
+
|
|
183
|
+
```css
|
|
184
|
+
w-select::part(input) {
|
|
185
|
+
letter-spacing: 0.5px;
|
|
186
|
+
}
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
Parts are intended as an **escape hatch**.
|
|
190
|
+
Prefer component tokens for anything state‑ or size‑related.
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
### Component tokens
|
|
194
|
+
|
|
195
|
+
Component tokens (`--w-c-input-*`) act as inputs to the select styling.
|
|
196
|
+
They can be set directly on the component or inherited from a parent container.
|
|
197
|
+
|
|
198
|
+
These tokens are **shared across textfield, textarea, and select** for consistent form styling.
|
|
199
|
+
|
|
200
|
+
```css
|
|
201
|
+
.form-section {
|
|
202
|
+
--w-c-input-label-font-weight: 600;
|
|
203
|
+
--w-c-input-help-text-color: var(--w-s-color-text);
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
Defaults are defined internally; setting a token is always optional.
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
#### Label tokens
|
|
211
|
+
|
|
212
|
+
| Token | Purpose | Default |
|
|
213
|
+
|---|---|---|
|
|
214
|
+
| `--w-c-input-label-color` | label text color | `--w-s-color-text` |
|
|
215
|
+
| `--w-c-input-label-font-size` | label font size | `--w-font-size-s` |
|
|
216
|
+
| `--w-c-input-label-line-height` | label line height | `--w-line-height-s` |
|
|
217
|
+
| `--w-c-input-label-font-weight` | label font weight | `700` |
|
|
218
|
+
| `--w-c-input-label-padding-bottom` | space below label | `0.4rem` |
|
|
219
|
+
| `--w-c-input-label-cursor` | cursor when hovering label | `pointer` |
|
|
220
|
+
| `--w-c-input-label-display` | label display mode | `block` |
|
|
221
|
+
|
|
222
|
+
|
|
223
|
+
#### Optional indicator tokens
|
|
224
|
+
|
|
225
|
+
When `optional` attribute is set, these tokens control the "(optional)" text styling:
|
|
226
|
+
|
|
227
|
+
| Token | Purpose | Default |
|
|
228
|
+
|---|---|---|
|
|
229
|
+
| `--w-c-input-optional-color` | optional text color | `--w-s-color-text-subtle` |
|
|
230
|
+
| `--w-c-input-optional-font-size` | optional text font size | `--w-font-size-s` |
|
|
231
|
+
| `--w-c-input-optional-line-height` | optional text line height | `--w-line-height-s` |
|
|
232
|
+
| `--w-c-input-optional-font-weight` | optional text font weight | `400` |
|
|
233
|
+
| `--w-c-input-optional-padding-left` | space before optional text | `0.8rem` |
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
#### Help text tokens
|
|
237
|
+
|
|
238
|
+
| Token | Purpose | Default |
|
|
239
|
+
|---|---|---|
|
|
240
|
+
| `--w-c-input-help-text-color` | help text color (normal state) | `--w-s-color-text-subtle` |
|
|
241
|
+
| `--w-c-input-help-text-color-invalid` | help text color when invalid | `--w-s-color-text-negative` |
|
|
242
|
+
| `--w-c-input-help-text-font-size` | help text font size | `--w-font-size-xs` |
|
|
243
|
+
| `--w-c-input-help-text-line-height` | help text line height | `--w-line-height-xs` |
|
|
244
|
+
| `--w-c-input-help-text-margin-top` | space above help text | `0.4rem` |
|
|
245
|
+
| `--w-c-input-help-text-display` | help text display mode | `block` |
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
## Implementation notes
|
|
249
|
+
|
|
250
|
+
### Shared token system
|
|
251
|
+
|
|
252
|
+
Select shares its label, optional indicator, and help text tokens with `w-textfield` and `w-textarea`. This ensures consistent form styling across all text input components.
|
|
253
|
+
|
|
161
254
|
## `<w-select>` API
|
|
162
255
|
|
|
163
256
|
Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
|
|
@@ -170,15 +263,15 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
|
|
|
170
263
|
| auto-focus | `boolean` | `false` | Whether the element should receive focus on render. **Deprecated**: Use the native `autofocus` attribute instead. |
|
|
171
264
|
| autofocus | `boolean` | `false` | Whether the element should receive focus on render |
|
|
172
265
|
| disabled | `boolean` | `false` | Renders the field in a disabled state. |
|
|
173
|
-
| help-text | `string` | `-` | The content displayed as the help text. |
|
|
174
|
-
| hint | `string` | `-` | The content displayed as the help text. **Deprecated**: Use `help-text` instead. |
|
|
266
|
+
| help-text | `string \| undefined` | `-` | The content displayed as the help text. |
|
|
267
|
+
| hint | `string \| undefined` | `-` | The content displayed as the help text. **Deprecated**: Use `help-text` instead. |
|
|
175
268
|
| invalid | `boolean` | `false` | Renders the field in an invalid state. |
|
|
176
|
-
| label | `string` | `-` | The content to display as the label. |
|
|
177
|
-
| name | `string` | `-` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. |
|
|
269
|
+
| label | `string \| undefined` | `-` | The content to display as the label. |
|
|
270
|
+
| name | `string \| undefined` | `-` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. |
|
|
178
271
|
| optional | `boolean` | `false` | Whether to show the optional indicator after the label. |
|
|
179
272
|
| read-only | `boolean` | `false` | Renders the field in a readonly state. **Deprecated**: Use the native readonly attribute instead. |
|
|
180
273
|
| readonly | `boolean` | `false` | Renders the field in a readonly state. |
|
|
181
|
-
| value | `string` | `-` | Lets you set the current value. |
|
|
274
|
+
| value | `string \| undefined` | `-` | Lets you set the current value. |
|
|
182
275
|
|
|
183
276
|
### Property Details
|
|
184
277
|
|
|
@@ -220,7 +313,7 @@ The content displayed as the help text.
|
|
|
220
313
|
|
|
221
314
|
Paired with `invalid` to show the text as a validation error.
|
|
222
315
|
|
|
223
|
-
- Type: `string`
|
|
316
|
+
- Type: `string | undefined`
|
|
224
317
|
- Default: `-`
|
|
225
318
|
|
|
226
319
|
#### hint
|
|
@@ -229,7 +322,7 @@ Paired with `invalid` to show the text as a validation error.
|
|
|
229
322
|
|
|
230
323
|
The content displayed as the help text.
|
|
231
324
|
|
|
232
|
-
- Type: `string`
|
|
325
|
+
- Type: `string | undefined`
|
|
233
326
|
- Default: `-`
|
|
234
327
|
|
|
235
328
|
#### invalid
|
|
@@ -245,14 +338,14 @@ Paired with `help-text` to provide feedback about the error.
|
|
|
245
338
|
|
|
246
339
|
The content to display as the label.
|
|
247
340
|
|
|
248
|
-
- Type: `string`
|
|
341
|
+
- Type: `string | undefined`
|
|
249
342
|
- Default: `-`
|
|
250
343
|
|
|
251
344
|
#### name
|
|
252
345
|
|
|
253
346
|
The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.
|
|
254
347
|
|
|
255
|
-
- Type: `string`
|
|
348
|
+
- Type: `string | undefined`
|
|
256
349
|
- Default: `-`
|
|
257
350
|
|
|
258
351
|
#### optional
|
|
@@ -282,7 +375,7 @@ Renders the field in a readonly state.
|
|
|
282
375
|
|
|
283
376
|
Lets you set the current value.
|
|
284
377
|
|
|
285
|
-
- Type: `string`
|
|
378
|
+
- Type: `string | undefined`
|
|
286
379
|
- Default: `-`
|
|
287
380
|
|
|
288
381
|
### Events
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
## Styling API
|
|
2
|
+
|
|
3
|
+
This section documents the supported styling hooks for `<w-select>`.
|
|
4
|
+
|
|
5
|
+
Use these hooks to customize appearance without relying on internal structure or selectors.
|
|
6
|
+
|
|
7
|
+
Before changing the default styles, remember that doing so can result in less consistent experiences for users across the product. Prefer defaults.
|
|
8
|
+
|
|
9
|
+
- Prefer **component tokens** for size, spacing, and state styling.
|
|
10
|
+
- Use **parts** only for small, local tweaks.
|
|
11
|
+
- Avoid relying on internal class names or selectors.
|
|
12
|
+
|
|
13
|
+
### Parts
|
|
14
|
+
|
|
15
|
+
The select exposes a minimal set of parts that can be targeted for last‑mile layout or typography tweaks.
|
|
16
|
+
|
|
17
|
+
| Part | Targets | Typical use |
|
|
18
|
+
|---|---|---|
|
|
19
|
+
| `input` | native select element | minor typography or spacing tweaks |
|
|
20
|
+
|
|
21
|
+
Example:
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
w-select::part(input) {
|
|
25
|
+
letter-spacing: 0.5px;
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Parts are intended as an **escape hatch**.
|
|
30
|
+
Prefer component tokens for anything state‑ or size‑related.
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
### Component tokens
|
|
34
|
+
|
|
35
|
+
Component tokens (`--w-c-input-*`) act as inputs to the select styling.
|
|
36
|
+
They can be set directly on the component or inherited from a parent container.
|
|
37
|
+
|
|
38
|
+
These tokens are **shared across textfield, textarea, and select** for consistent form styling.
|
|
39
|
+
|
|
40
|
+
```css
|
|
41
|
+
.form-section {
|
|
42
|
+
--w-c-input-label-font-weight: 600;
|
|
43
|
+
--w-c-input-help-text-color: var(--w-s-color-text);
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Defaults are defined internally; setting a token is always optional.
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
#### Label tokens
|
|
51
|
+
|
|
52
|
+
| Token | Purpose | Default |
|
|
53
|
+
|---|---|---|
|
|
54
|
+
| `--w-c-input-label-color` | label text color | `--w-s-color-text` |
|
|
55
|
+
| `--w-c-input-label-font-size` | label font size | `--w-font-size-s` |
|
|
56
|
+
| `--w-c-input-label-line-height` | label line height | `--w-line-height-s` |
|
|
57
|
+
| `--w-c-input-label-font-weight` | label font weight | `700` |
|
|
58
|
+
| `--w-c-input-label-padding-bottom` | space below label | `0.4rem` |
|
|
59
|
+
| `--w-c-input-label-cursor` | cursor when hovering label | `pointer` |
|
|
60
|
+
| `--w-c-input-label-display` | label display mode | `block` |
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
#### Optional indicator tokens
|
|
64
|
+
|
|
65
|
+
When `optional` attribute is set, these tokens control the "(optional)" text styling:
|
|
66
|
+
|
|
67
|
+
| Token | Purpose | Default |
|
|
68
|
+
|---|---|---|
|
|
69
|
+
| `--w-c-input-optional-color` | optional text color | `--w-s-color-text-subtle` |
|
|
70
|
+
| `--w-c-input-optional-font-size` | optional text font size | `--w-font-size-s` |
|
|
71
|
+
| `--w-c-input-optional-line-height` | optional text line height | `--w-line-height-s` |
|
|
72
|
+
| `--w-c-input-optional-font-weight` | optional text font weight | `400` |
|
|
73
|
+
| `--w-c-input-optional-padding-left` | space before optional text | `0.8rem` |
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
#### Help text tokens
|
|
77
|
+
|
|
78
|
+
| Token | Purpose | Default |
|
|
79
|
+
|---|---|---|
|
|
80
|
+
| `--w-c-input-help-text-color` | help text color (normal state) | `--w-s-color-text-subtle` |
|
|
81
|
+
| `--w-c-input-help-text-color-invalid` | help text color when invalid | `--w-s-color-text-negative` |
|
|
82
|
+
| `--w-c-input-help-text-font-size` | help text font size | `--w-font-size-xs` |
|
|
83
|
+
| `--w-c-input-help-text-line-height` | help text line height | `--w-line-height-xs` |
|
|
84
|
+
| `--w-c-input-help-text-margin-top` | space above help text | `0.4rem` |
|
|
85
|
+
| `--w-c-input-help-text-display` | help text display mode | `block` |
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
## Implementation notes
|
|
89
|
+
|
|
90
|
+
### Shared token system
|
|
91
|
+
|
|
92
|
+
Select shares its label, optional indicator, and help text tokens with `w-textfield` and `w-textarea`. This ensures consistent form styling across all text input components.
|
package/dist/docs/slider/api.md
CHANGED
|
@@ -7,21 +7,21 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
|
|
|
7
7
|
| Name | Type | Default | Summary |
|
|
8
8
|
|-|-|-|-|
|
|
9
9
|
| disabled | `boolean` | `false` | - |
|
|
10
|
-
| error | `string` | `-` | Validation error text, if any |
|
|
11
|
-
| help-text | `string` | `-` | Additional description to show below the fieldset |
|
|
10
|
+
| error | `string \| undefined` | `-` | Validation error text, if any |
|
|
11
|
+
| help-text | `string \| undefined` | `-` | Additional description to show below the fieldset |
|
|
12
12
|
| hidden-textfield | `boolean` | `false` | Should only be used in special cases |
|
|
13
13
|
| invalid | `boolean` | `false` | Sets the form fields and fieldset in an invalid state |
|
|
14
|
-
| label | `string` | `-` | The slider fieldset label. Required for proper accessibility. |
|
|
15
|
-
| labelFormatter (JS only) | `(slot: SliderSlot) => string` | `-` | Formatter for the min and max labels below the range. |
|
|
16
|
-
| markers | `number` | `-` | Pass a value similar to step to create visual markers at that interval |
|
|
17
|
-
| max | `string` | `100` | The maximum allowed value in the range inputs |
|
|
18
|
-
| min | `string` | `0` | The minimum allowed value in the range inputs |
|
|
14
|
+
| label | `string \| undefined` | `-` | The slider fieldset label. Required for proper accessibility. |
|
|
15
|
+
| labelFormatter (JS only) | `((slot: SliderSlot) => string) \| undefined` | `-` | Formatter for the min and max labels below the range. |
|
|
16
|
+
| markers | `number \| undefined` | `-` | Pass a value similar to step to create visual markers at that interval |
|
|
17
|
+
| max | `string \| undefined` | `100` | The maximum allowed value in the range inputs |
|
|
18
|
+
| min | `string \| undefined` | `0` | The minimum allowed value in the range inputs |
|
|
19
19
|
| open-ended | `boolean` | `false` | Whether or not to allow values outside the range such as "Before 1950" and "2025+". |
|
|
20
20
|
| required | `boolean` | `false` | Ensures a child slider thumb has a value before allowing the containing form to submit |
|
|
21
|
-
| step | `number` | `-` | ets step on the range input to jump between values when dragging |
|
|
22
|
-
| suffix | `string` | `-` | Suffix used in text input fields and for the min and max values of the slider |
|
|
23
|
-
| tooltipFormatter (JS only) | `(value: string, slot: SliderSlot) => string` | `-` | Overrides valueFormatter for the tooltip. |
|
|
24
|
-
| valueFormatter (JS only) | `(value: string, slot: SliderSlot) => string` | `-` | Formatter for the tooltip and input mask values |
|
|
21
|
+
| step | `number \| undefined` | `-` | ets step on the range input to jump between values when dragging |
|
|
22
|
+
| suffix | `string \| undefined` | `-` | Suffix used in text input fields and for the min and max values of the slider |
|
|
23
|
+
| tooltipFormatter (JS only) | `((value: string, slot: SliderSlot) => string) \| undefined` | `-` | Overrides valueFormatter for the tooltip. |
|
|
24
|
+
| valueFormatter (JS only) | `((value: string, slot: SliderSlot) => string) \| undefined` | `-` | Formatter for the tooltip and input mask values |
|
|
25
25
|
|
|
26
26
|
### Property Details
|
|
27
27
|
|
|
@@ -36,14 +36,14 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
|
|
|
36
36
|
|
|
37
37
|
Validation error text, if any
|
|
38
38
|
|
|
39
|
-
- Type: `string`
|
|
39
|
+
- Type: `string | undefined`
|
|
40
40
|
- Default: `-`
|
|
41
41
|
|
|
42
42
|
#### help-text
|
|
43
43
|
|
|
44
44
|
Additional description to show below the fieldset
|
|
45
45
|
|
|
46
|
-
- Type: `string`
|
|
46
|
+
- Type: `string | undefined`
|
|
47
47
|
- Default: `-`
|
|
48
48
|
|
|
49
49
|
#### hidden-textfield
|
|
@@ -66,35 +66,35 @@ The slider fieldset label. Required for proper accessibility.
|
|
|
66
66
|
|
|
67
67
|
If you need to display HTML, use the `label` slot instead (f. ex. `<legend class="sr-only" slot="label">Production year</legend>`)
|
|
68
68
|
|
|
69
|
-
- Type: `string`
|
|
69
|
+
- Type: `string | undefined`
|
|
70
70
|
- Default: `-`
|
|
71
71
|
|
|
72
72
|
#### labelFormatter (JS only)
|
|
73
73
|
|
|
74
74
|
Formatter for the min and max labels below the range.
|
|
75
75
|
|
|
76
|
-
- Type: `(slot: SliderSlot) => string`
|
|
76
|
+
- Type: `((slot: SliderSlot) => string) | undefined`
|
|
77
77
|
- Default: `-`
|
|
78
78
|
|
|
79
79
|
#### markers
|
|
80
80
|
|
|
81
81
|
Pass a value similar to step to create visual markers at that interval
|
|
82
82
|
|
|
83
|
-
- Type: `number`
|
|
83
|
+
- Type: `number | undefined`
|
|
84
84
|
- Default: `-`
|
|
85
85
|
|
|
86
86
|
#### max
|
|
87
87
|
|
|
88
88
|
The maximum allowed value in the range inputs
|
|
89
89
|
|
|
90
|
-
- Type: `string`
|
|
90
|
+
- Type: `string | undefined`
|
|
91
91
|
- Default: `100`
|
|
92
92
|
|
|
93
93
|
#### min
|
|
94
94
|
|
|
95
95
|
The minimum allowed value in the range inputs
|
|
96
96
|
|
|
97
|
-
- Type: `string`
|
|
97
|
+
- Type: `string | undefined`
|
|
98
98
|
- Default: `0`
|
|
99
99
|
|
|
100
100
|
#### open-ended
|
|
@@ -115,14 +115,14 @@ Ensures a child slider thumb has a value before allowing the containing form to
|
|
|
115
115
|
|
|
116
116
|
ets step on the range input to jump between values when dragging
|
|
117
117
|
|
|
118
|
-
- Type: `number`
|
|
118
|
+
- Type: `number | undefined`
|
|
119
119
|
- Default: `-`
|
|
120
120
|
|
|
121
121
|
#### suffix
|
|
122
122
|
|
|
123
123
|
Suffix used in text input fields and for the min and max values of the slider
|
|
124
124
|
|
|
125
|
-
- Type: `string`
|
|
125
|
+
- Type: `string | undefined`
|
|
126
126
|
- Default: `-`
|
|
127
127
|
|
|
128
128
|
#### tooltipFormatter (JS only)
|
|
@@ -131,13 +131,13 @@ Overrides valueFormatter for the tooltip.
|
|
|
131
131
|
|
|
132
132
|
Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip.
|
|
133
133
|
|
|
134
|
-
- Type: `(value: string, slot: SliderSlot) => string`
|
|
134
|
+
- Type: `((value: string, slot: SliderSlot) => string) | undefined`
|
|
135
135
|
- Default: `-`
|
|
136
136
|
|
|
137
137
|
#### valueFormatter (JS only)
|
|
138
138
|
|
|
139
139
|
Formatter for the tooltip and input mask values
|
|
140
140
|
|
|
141
|
-
- Type: `(value: string, slot: SliderSlot) => string`
|
|
141
|
+
- Type: `((value: string, slot: SliderSlot) => string) | undefined`
|
|
142
142
|
- Default: `-`
|
|
143
143
|
|
|
@@ -306,6 +306,8 @@ The text field doubles as a visualization of the exact value, which is difficult
|
|
|
306
306
|
|
|
307
307
|
</elements-example>
|
|
308
308
|
|
|
309
|
+
## Styling API
|
|
310
|
+
|
|
309
311
|
## `<w-slider>` API
|
|
310
312
|
|
|
311
313
|
Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
|
|
@@ -315,21 +317,21 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
|
|
|
315
317
|
| Name | Type | Default | Summary |
|
|
316
318
|
|-|-|-|-|
|
|
317
319
|
| disabled | `boolean` | `false` | - |
|
|
318
|
-
| error | `string` | `-` | Validation error text, if any |
|
|
319
|
-
| help-text | `string` | `-` | Additional description to show below the fieldset |
|
|
320
|
+
| error | `string \| undefined` | `-` | Validation error text, if any |
|
|
321
|
+
| help-text | `string \| undefined` | `-` | Additional description to show below the fieldset |
|
|
320
322
|
| hidden-textfield | `boolean` | `false` | Should only be used in special cases |
|
|
321
323
|
| invalid | `boolean` | `false` | Sets the form fields and fieldset in an invalid state |
|
|
322
|
-
| label | `string` | `-` | The slider fieldset label. Required for proper accessibility. |
|
|
323
|
-
| labelFormatter (JS only) | `(slot: SliderSlot) => string` | `-` | Formatter for the min and max labels below the range. |
|
|
324
|
-
| markers | `number` | `-` | Pass a value similar to step to create visual markers at that interval |
|
|
325
|
-
| max | `string` | `100` | The maximum allowed value in the range inputs |
|
|
326
|
-
| min | `string` | `0` | The minimum allowed value in the range inputs |
|
|
324
|
+
| label | `string \| undefined` | `-` | The slider fieldset label. Required for proper accessibility. |
|
|
325
|
+
| labelFormatter (JS only) | `((slot: SliderSlot) => string) \| undefined` | `-` | Formatter for the min and max labels below the range. |
|
|
326
|
+
| markers | `number \| undefined` | `-` | Pass a value similar to step to create visual markers at that interval |
|
|
327
|
+
| max | `string \| undefined` | `100` | The maximum allowed value in the range inputs |
|
|
328
|
+
| min | `string \| undefined` | `0` | The minimum allowed value in the range inputs |
|
|
327
329
|
| open-ended | `boolean` | `false` | Whether or not to allow values outside the range such as "Before 1950" and "2025+". |
|
|
328
330
|
| required | `boolean` | `false` | Ensures a child slider thumb has a value before allowing the containing form to submit |
|
|
329
|
-
| step | `number` | `-` | ets step on the range input to jump between values when dragging |
|
|
330
|
-
| suffix | `string` | `-` | Suffix used in text input fields and for the min and max values of the slider |
|
|
331
|
-
| tooltipFormatter (JS only) | `(value: string, slot: SliderSlot) => string` | `-` | Overrides valueFormatter for the tooltip. |
|
|
332
|
-
| valueFormatter (JS only) | `(value: string, slot: SliderSlot) => string` | `-` | Formatter for the tooltip and input mask values |
|
|
331
|
+
| step | `number \| undefined` | `-` | ets step on the range input to jump between values when dragging |
|
|
332
|
+
| suffix | `string \| undefined` | `-` | Suffix used in text input fields and for the min and max values of the slider |
|
|
333
|
+
| tooltipFormatter (JS only) | `((value: string, slot: SliderSlot) => string) \| undefined` | `-` | Overrides valueFormatter for the tooltip. |
|
|
334
|
+
| valueFormatter (JS only) | `((value: string, slot: SliderSlot) => string) \| undefined` | `-` | Formatter for the tooltip and input mask values |
|
|
333
335
|
|
|
334
336
|
### Property Details
|
|
335
337
|
|
|
@@ -344,14 +346,14 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
|
|
|
344
346
|
|
|
345
347
|
Validation error text, if any
|
|
346
348
|
|
|
347
|
-
- Type: `string`
|
|
349
|
+
- Type: `string | undefined`
|
|
348
350
|
- Default: `-`
|
|
349
351
|
|
|
350
352
|
#### help-text
|
|
351
353
|
|
|
352
354
|
Additional description to show below the fieldset
|
|
353
355
|
|
|
354
|
-
- Type: `string`
|
|
356
|
+
- Type: `string | undefined`
|
|
355
357
|
- Default: `-`
|
|
356
358
|
|
|
357
359
|
#### hidden-textfield
|
|
@@ -374,35 +376,35 @@ The slider fieldset label. Required for proper accessibility.
|
|
|
374
376
|
|
|
375
377
|
If you need to display HTML, use the `label` slot instead (f. ex. `<legend class="sr-only" slot="label">Production year</legend>`)
|
|
376
378
|
|
|
377
|
-
- Type: `string`
|
|
379
|
+
- Type: `string | undefined`
|
|
378
380
|
- Default: `-`
|
|
379
381
|
|
|
380
382
|
#### labelFormatter (JS only)
|
|
381
383
|
|
|
382
384
|
Formatter for the min and max labels below the range.
|
|
383
385
|
|
|
384
|
-
- Type: `(slot: SliderSlot) => string`
|
|
386
|
+
- Type: `((slot: SliderSlot) => string) | undefined`
|
|
385
387
|
- Default: `-`
|
|
386
388
|
|
|
387
389
|
#### markers
|
|
388
390
|
|
|
389
391
|
Pass a value similar to step to create visual markers at that interval
|
|
390
392
|
|
|
391
|
-
- Type: `number`
|
|
393
|
+
- Type: `number | undefined`
|
|
392
394
|
- Default: `-`
|
|
393
395
|
|
|
394
396
|
#### max
|
|
395
397
|
|
|
396
398
|
The maximum allowed value in the range inputs
|
|
397
399
|
|
|
398
|
-
- Type: `string`
|
|
400
|
+
- Type: `string | undefined`
|
|
399
401
|
- Default: `100`
|
|
400
402
|
|
|
401
403
|
#### min
|
|
402
404
|
|
|
403
405
|
The minimum allowed value in the range inputs
|
|
404
406
|
|
|
405
|
-
- Type: `string`
|
|
407
|
+
- Type: `string | undefined`
|
|
406
408
|
- Default: `0`
|
|
407
409
|
|
|
408
410
|
#### open-ended
|
|
@@ -423,14 +425,14 @@ Ensures a child slider thumb has a value before allowing the containing form to
|
|
|
423
425
|
|
|
424
426
|
ets step on the range input to jump between values when dragging
|
|
425
427
|
|
|
426
|
-
- Type: `number`
|
|
428
|
+
- Type: `number | undefined`
|
|
427
429
|
- Default: `-`
|
|
428
430
|
|
|
429
431
|
#### suffix
|
|
430
432
|
|
|
431
433
|
Suffix used in text input fields and for the min and max values of the slider
|
|
432
434
|
|
|
433
|
-
- Type: `string`
|
|
435
|
+
- Type: `string | undefined`
|
|
434
436
|
- Default: `-`
|
|
435
437
|
|
|
436
438
|
#### tooltipFormatter (JS only)
|
|
@@ -439,13 +441,13 @@ Overrides valueFormatter for the tooltip.
|
|
|
439
441
|
|
|
440
442
|
Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip.
|
|
441
443
|
|
|
442
|
-
- Type: `(value: string, slot: SliderSlot) => string`
|
|
444
|
+
- Type: `((value: string, slot: SliderSlot) => string) | undefined`
|
|
443
445
|
- Default: `-`
|
|
444
446
|
|
|
445
447
|
#### valueFormatter (JS only)
|
|
446
448
|
|
|
447
449
|
Formatter for the tooltip and input mask values
|
|
448
450
|
|
|
449
|
-
- Type: `(value: string, slot: SliderSlot) => string`
|
|
451
|
+
- Type: `((value: string, slot: SliderSlot) => string) | undefined`
|
|
450
452
|
- Default: `-`
|
|
451
453
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
## Styling API
|
|
@@ -4,11 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
| Name | Type | Default | Summary |
|
|
6
6
|
|-|-|-|-|
|
|
7
|
-
| aria-description | `string` |
|
|
8
|
-
| aria-label | `string
|
|
9
|
-
| name | `string` | `-` | The name of this input field in the form. The canonical source of the value is the text field. |
|
|
10
|
-
| placeholder | `string` | `-` | Placeholder in empty text fields |
|
|
11
|
-
|
|
|
7
|
+
| aria-description | `string \| null` | `null` | Contextual information for assistive technology, should it be needed |
|
|
8
|
+
| aria-label | `string \| null` | `null` | Label for the range input. |
|
|
9
|
+
| name | `string \| undefined` | `-` | The name of this input field in the form. The canonical source of the value is the text field. |
|
|
10
|
+
| placeholder | `string \| undefined` | `-` | Placeholder in empty text fields |
|
|
11
|
+
| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
|
|
12
|
+
| updateFieldAfterValidation (JS only) | `updateFieldAfterValidation() => void` | `-` | - |
|
|
13
|
+
| value | `string \| undefined` | `-` | The initial value, if any |
|
|
12
14
|
|
|
13
15
|
#### Property Details
|
|
14
16
|
|
|
@@ -16,35 +18,49 @@
|
|
|
16
18
|
|
|
17
19
|
Contextual information for assistive technology, should it be needed
|
|
18
20
|
|
|
19
|
-
- Type: `string`
|
|
20
|
-
- Default:
|
|
21
|
+
- Type: `string | null`
|
|
22
|
+
- Default: `null`
|
|
21
23
|
|
|
22
24
|
##### aria-label
|
|
23
25
|
|
|
24
26
|
Label for the range input.
|
|
25
27
|
|
|
26
|
-
- Type: `string`
|
|
27
|
-
- Default:
|
|
28
|
+
- Type: `string | null`
|
|
29
|
+
- Default: `null`
|
|
28
30
|
|
|
29
31
|
##### name
|
|
30
32
|
|
|
31
33
|
The name of this input field in the form. The canonical source of the value is the text field.
|
|
32
34
|
|
|
33
|
-
- Type: `string`
|
|
35
|
+
- Type: `string | undefined`
|
|
34
36
|
- Default: `-`
|
|
35
37
|
|
|
36
38
|
##### placeholder
|
|
37
39
|
|
|
38
40
|
Placeholder in empty text fields
|
|
39
41
|
|
|
40
|
-
- Type: `string`
|
|
42
|
+
- Type: `string | undefined`
|
|
43
|
+
- Default: `-`
|
|
44
|
+
|
|
45
|
+
##### resetFormControl (JS only)
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
- Type: `resetFormControl() => void`
|
|
50
|
+
- Default: `-`
|
|
51
|
+
|
|
52
|
+
##### updateFieldAfterValidation (JS only)
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
- Type: `updateFieldAfterValidation() => void`
|
|
41
57
|
- Default: `-`
|
|
42
58
|
|
|
43
59
|
##### value
|
|
44
60
|
|
|
45
61
|
The initial value, if any
|
|
46
62
|
|
|
47
|
-
- Type: `string`
|
|
63
|
+
- Type: `string | undefined`
|
|
48
64
|
- Default: `-`
|
|
49
65
|
|
|
50
66
|
#### Events
|