@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.17
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/dist/.storybook/utilities.js +4 -4
- package/dist/api.js.map +2 -2
- package/dist/custom-elements.json +68 -56
- package/dist/docs/affix/affix.md +2 -2
- package/dist/docs/affix/api.md +2 -2
- package/dist/docs/alert/alert.md +4 -4
- package/dist/docs/alert/api.md +4 -4
- package/dist/docs/attention/api.md +2 -2
- package/dist/docs/attention/attention.md +2 -2
- package/dist/docs/badge/api.md +50 -4
- package/dist/docs/badge/badge.md +50 -4
- package/dist/docs/box/api.md +2 -2
- package/dist/docs/box/box.md +2 -2
- package/dist/docs/checkbox/api.md +2 -2
- package/dist/docs/checkbox/checkbox.md +176 -2
- package/dist/docs/checkbox/styling.md +173 -0
- package/dist/docs/checkbox-group/checkbox-group.md +43 -30
- package/dist/docs/checkbox-group/styling.md +31 -29
- package/dist/docs/combobox/api.md +12 -12
- package/dist/docs/combobox/combobox.md +12 -12
- package/dist/docs/datepicker/api.md +6 -6
- package/dist/docs/datepicker/datepicker.md +6 -6
- package/dist/docs/icon/api.md +3 -3
- package/dist/docs/icon/icon.md +3 -3
- package/dist/docs/index.md +1 -1
- 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/snackbar/api.md +1 -1
- package/dist/docs/snackbar/snackbar.md +1 -1
- package/dist/docs/snackbar-item/api.md +2 -2
- package/dist/docs/snackbar-item/snackbar-item.md +2 -2
- package/dist/index.d.ts +24 -2
- package/dist/packages/affix/affix.d.ts +4 -4
- 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 +345 -315
- package/dist/packages/affix/affix.js.map +2 -2
- package/dist/packages/affix/affix.react.stories.d.ts +2 -2
- 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 +2 -2
- package/dist/packages/affix/react.js +6 -6
- package/dist/packages/affix/styles.js +1 -1
- 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 +344 -319
- package/dist/packages/alert/alert.js.map +2 -2
- 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 +1 -1
- package/dist/packages/attention/attention.d.ts +7 -7
- 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 +1725 -1683
- package/dist/packages/attention/attention.js.map +2 -2
- 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 +1 -1
- 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 +276 -276
- package/dist/packages/badge/badge.js.map +2 -2
- 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 +1 -1
- 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 +283 -283
- package/dist/packages/box/box.js.map +2 -2
- 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 +1 -1
- package/dist/packages/breadcrumbs/breadcrumbs.d.ts +1 -1
- package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.d.ts +1 -1
- package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js +55 -49
- package/dist/packages/breadcrumbs/breadcrumbs.js +284 -278
- package/dist/packages/breadcrumbs/breadcrumbs.js.map +2 -2
- package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts +3 -3
- package/dist/packages/breadcrumbs/breadcrumbs.react.stories.js +6 -6
- package/dist/packages/breadcrumbs/breadcrumbs.stories.d.ts +3 -3
- package/dist/packages/breadcrumbs/breadcrumbs.stories.js +27 -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 +1 -1
- package/dist/packages/button/button.d.ts +5 -5
- 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 +741 -715
- package/dist/packages/button/button.js.map +2 -2
- package/dist/packages/button/button.react.stories.d.ts +3 -3
- 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 +4 -4
- package/dist/packages/button/button.stories.js +276 -167
- package/dist/packages/button/button.test.d.ts +1 -1
- package/dist/packages/button/button.test.js +36 -34
- package/dist/packages/button/react.d.ts +2 -2
- package/dist/packages/button/react.js +7 -7
- package/dist/packages/button/styles.js +373 -347
- 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 +305 -290
- package/dist/packages/card/card.js.map +2 -2
- 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 +1 -1
- 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 +2 -2
- 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 +475 -424
- package/dist/packages/checkbox/checkbox.js.map +2 -2
- package/dist/packages/checkbox/checkbox.react.stories.d.ts +2 -2
- package/dist/packages/checkbox/checkbox.react.stories.js +3 -3
- package/dist/packages/checkbox/checkbox.stories.d.ts +4 -4
- 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 +1 -1
- 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 +16 -2
- 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 +60 -55
- package/dist/packages/checkbox-group/checkbox-group.js.map +2 -2
- 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 +2 -2
- 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 +72 -49
- package/dist/packages/combobox/combobox.d.ts +2 -2
- package/dist/packages/combobox/combobox.hydration.test.d.ts +1 -1
- package/dist/packages/combobox/combobox.hydration.test.js +45 -45
- package/dist/packages/combobox/combobox.js +332 -332
- package/dist/packages/combobox/combobox.js.map +3 -3
- package/dist/packages/combobox/combobox.react.stories.d.ts +3 -3
- 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 +100 -94
- package/dist/packages/combobox/combobox.test.d.ts +2 -2
- package/dist/packages/combobox/combobox.test.js +148 -133
- package/dist/packages/combobox/react.d.ts +2 -2
- package/dist/packages/combobox/react.js +14 -14
- package/dist/packages/combobox/styles.js +1 -1
- package/dist/packages/datepicker/DatePicker.test.d.ts +2 -2
- package/dist/packages/datepicker/DatePicker.test.js +46 -41
- package/dist/packages/datepicker/datepicker.d.ts +3 -3
- 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 +665 -625
- package/dist/packages/datepicker/datepicker.js.map +3 -3
- package/dist/packages/datepicker/datepicker.react.stories.d.ts +3 -3
- 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 +2 -2
- 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 +1 -1
- package/dist/packages/datepicker/utils.js +25 -19
- package/dist/packages/datepicker/utils.test.js +20 -20
- package/dist/packages/expandable/expandable.d.ts +4 -4
- 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 +353 -326
- package/dist/packages/expandable/expandable.js.map +2 -2
- package/dist/packages/expandable/expandable.react.stories.d.ts +3 -3
- 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 +2 -2
- package/dist/packages/expandable/react.js +9 -9
- package/dist/packages/expandable/styles.js +1 -1
- package/dist/packages/global.js +2 -2
- package/dist/packages/i18n.d.ts +1 -1
- package/dist/packages/i18n.js +37 -29
- package/dist/packages/icon/icon.d.ts +3 -3
- 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 +30 -25
- package/dist/packages/icon/icon.js.map +2 -2
- package/dist/packages/icon/icon.react.stories.d.ts +1 -1
- package/dist/packages/icon/icon.react.stories.js +283 -284
- package/dist/packages/icon/icon.stories.d.ts +3 -3
- package/dist/packages/icon/icon.stories.js +299 -298
- 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 +1 -1
- package/dist/packages/icon/react.js +4 -4
- package/dist/packages/icon/style.js +24 -25
- package/dist/packages/interaction-type-detection.js +9 -9
- package/dist/packages/link/link.d.ts +2 -2
- 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 +709 -683
- package/dist/packages/link/link.js.map +2 -2
- 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.js +57 -57
- package/dist/packages/modal/index.d.ts +7 -7
- package/dist/packages/modal/index.js +7 -7
- package/dist/packages/modal/modal.d.ts +1 -1
- 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 +404 -404
- package/dist/packages/modal/modal.js.map +2 -2
- package/dist/packages/modal/modal.react.stories.d.ts +3 -3
- package/dist/packages/modal/modal.react.stories.js +7 -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 +4 -4
- package/dist/packages/modal/react.js +13 -13
- package/dist/packages/modal/util.js +2 -2
- package/dist/packages/modal-footer/modal-footer.d.ts +1 -1
- package/dist/packages/modal-footer/modal-footer.js +291 -291
- package/dist/packages/modal-footer/modal-footer.js.map +2 -2
- 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 +437 -416
- package/dist/packages/modal-header/modal-header.js.map +2 -2
- package/dist/packages/modal-header/modal-header.react.test.js +5 -3
- package/dist/packages/modal-header/react.d.ts +2 -2
- package/dist/packages/modal-header/react.js +8 -8
- package/dist/packages/page-indicator/page-indicator.d.ts +1 -1
- 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 +26 -26
- package/dist/packages/page-indicator/page-indicator.js.map +2 -2
- 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 +3 -3
- package/dist/packages/page-indicator/page-indicator.stories.js +56 -27
- 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 +3 -3
- 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 +380 -349
- package/dist/packages/pagination/pagination.js.map +2 -2
- package/dist/packages/pagination/pagination.react.stories.d.ts +5 -5
- 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 -69
- package/dist/packages/pagination/react.d.ts +3 -3
- package/dist/packages/pagination/react.js +12 -10
- package/dist/packages/pagination/styles.js +1 -1
- package/dist/packages/pill/pill.d.ts +2 -2
- 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 +331 -308
- package/dist/packages/pill/pill.js.map +2 -2
- package/dist/packages/pill/pill.react.stories.d.ts +3 -3
- 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 +2 -2
- package/dist/packages/pill/react.js +18 -14
- package/dist/packages/pill/styles.js +1 -1
- 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 +8 -8
- 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 +3 -3
- 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 +485 -446
- 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 +81 -79
- package/dist/packages/radio-group/radio-group.d.ts +14 -5
- package/dist/packages/radio-group/radio-group.hydration.test.d.ts +2 -2
- package/dist/packages/radio-group/radio-group.hydration.test.js +29 -18
- package/dist/packages/radio-group/radio-group.js +648 -560
- package/dist/packages/radio-group/radio-group.js.map +3 -3
- 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 +2 -2
- package/dist/packages/radio-group/react.js +10 -10
- package/dist/packages/select/react.d.ts +2 -2
- 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 +98 -91
- package/dist/packages/select/select.d.ts +4 -4
- 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 +348 -329
- package/dist/packages/select/select.js.map +2 -2
- package/dist/packages/select/select.react.stories.d.ts +3 -3
- package/dist/packages/select/select.react.stories.js +7 -7
- 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 +175 -178
- package/dist/packages/select/styles.js +1 -1
- 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 +3 -3
- package/dist/packages/slider/react.js +9 -9
- package/dist/packages/slider/slider.d.ts +3 -3
- package/dist/packages/slider/slider.hydration.test.d.ts +1 -1
- package/dist/packages/slider/slider.hydration.test.js +39 -20
- package/dist/packages/slider/slider.js +480 -462
- package/dist/packages/slider/slider.js.map +2 -2
- package/dist/packages/slider/slider.react.stories.d.ts +3 -3
- package/dist/packages/slider/slider.react.stories.js +31 -34
- 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 +332 -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 +1 -1
- 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 +3 -3
- package/dist/packages/slider-thumb/react.js +11 -9
- package/dist/packages/slider-thumb/slider-thumb.d.ts +3 -3
- 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 +545 -548
- package/dist/packages/slider-thumb/slider-thumb.js.map +3 -3
- 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 +1 -1
- package/dist/packages/snackbar/react.d.ts +1 -1
- package/dist/packages/snackbar/react.js +4 -4
- package/dist/packages/snackbar/snackbar.d.ts +3 -3
- package/dist/packages/snackbar/snackbar.hydration.test.d.ts +1 -1
- package/dist/packages/snackbar/snackbar.hydration.test.js +6 -6
- package/dist/packages/snackbar/snackbar.js +487 -468
- package/dist/packages/snackbar/snackbar.js.map +2 -2
- package/dist/packages/snackbar/snackbar.react.stories.js +3 -3
- package/dist/packages/snackbar/snackbar.stories.d.ts +11 -11
- package/dist/packages/snackbar/snackbar.stories.js +253 -181
- package/dist/packages/snackbar/snackbar.test.d.ts +4 -4
- package/dist/packages/snackbar/snackbar.test.js +11 -11
- package/dist/packages/snackbar/styles.js +29 -29
- package/dist/packages/snackbar-item/react.d.ts +2 -2
- package/dist/packages/snackbar-item/react.js +6 -5
- package/dist/packages/snackbar-item/snackbar-item.d.ts +4 -4
- package/dist/packages/snackbar-item/snackbar-item.js +454 -435
- package/dist/packages/snackbar-item/snackbar-item.js.map +2 -2
- package/dist/packages/snackbar-item/snackbar-item.react.test.js +4 -4
- package/dist/packages/snackbar-item/styles.js +130 -108
- 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 +330 -308
- package/dist/packages/step/step.js.map +2 -2
- 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 +280 -276
- package/dist/packages/step-indicator/step-indicator.js.map +2 -2
- 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 +1 -1
- package/dist/packages/styles.js +274 -274
- package/dist/packages/switch/react.d.ts +1 -1
- package/dist/packages/switch/react.js +6 -6
- package/dist/packages/switch/styles.js +1 -1
- 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 +1 -1
- 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 +299 -299
- package/dist/packages/switch/switch.js.map +2 -2
- 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 +6 -4
- 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 +5 -5
- 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 +305 -304
- package/dist/packages/tab/tab.js.map +3 -3
- 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 +289 -287
- package/dist/packages/tab-panel/tab-panel.js.map +2 -2
- 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 +1 -1
- 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 +3 -3
- 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 +289 -282
- package/dist/packages/tabs/tabs.js.map +2 -2
- 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 +136 -122
- package/dist/packages/textarea/react.d.ts +2 -2
- package/dist/packages/textarea/react.js +17 -17
- package/dist/packages/textarea/styles.js +1 -1
- package/dist/packages/textarea/textarea.a11y.test.d.ts +1 -1
- package/dist/packages/textarea/textarea.a11y.test.js +89 -57
- package/dist/packages/textarea/textarea.d.ts +1 -1
- 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 +300 -298
- package/dist/packages/textarea/textarea.js.map +2 -2
- package/dist/packages/textarea/textarea.react.stories.d.ts +3 -3
- 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/react.d.ts +2 -2
- 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 +1 -1
- package/dist/packages/textfield/textfield.d.ts +3 -3
- 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 +376 -368
- package/dist/packages/textfield/textfield.js.map +3 -3
- package/dist/packages/textfield/textfield.react.stories.d.ts +3 -3
- 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 +1 -1
- 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/toast.d.ts +4 -4
- package/dist/packages/toast/toast.js +343 -314
- package/dist/packages/toast/toast.js.map +2 -2
- package/dist/packages/toast/toast.stories.d.ts +4 -4
- package/dist/packages/toast/toast.stories.js +37 -16
- 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.js +1 -1
- package/dist/packages/toast-container/toast-container.d.ts +2 -2
- package/dist/packages/toast-container/toast-container.js +291 -290
- package/dist/packages/toast-container/toast-container.js.map +2 -2
- package/dist/packages/utils/element-collapse.js +38 -28
- 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 +25 -22
- package/eik/index.js +9 -9
- package/package.json +11 -16
|
@@ -1,126 +1,128 @@
|
|
|
1
|
-
import { spread } from
|
|
2
|
-
import { getStorybookHelpers } from
|
|
3
|
-
import { html } from
|
|
4
|
-
import { prespread } from
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
const { events: modalEvents, args: modalArgs, argTypes: modalArgTypes } = getStorybookHelpers(
|
|
9
|
-
const { events: modalHeaderEvents, args: modalHeaderArgs, argTypes: modalHeaderArgTypes, } = getStorybookHelpers(
|
|
10
|
-
const { events: modalFooterEvents, args: modalFooterArgs, argTypes: modalFooterArgTypes, } = getStorybookHelpers(
|
|
1
|
+
import { spread } from "@open-wc/lit-helpers";
|
|
2
|
+
import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
|
|
3
|
+
import { html } from "lit";
|
|
4
|
+
import { prespread } from "../../.storybook/utilities.js";
|
|
5
|
+
import "./modal.js";
|
|
6
|
+
import "../modal-header/modal-header.js";
|
|
7
|
+
import "../modal-footer/modal-footer.js";
|
|
8
|
+
const { events: modalEvents, args: modalArgs, argTypes: modalArgTypes, } = getStorybookHelpers("w-modal");
|
|
9
|
+
const { events: modalHeaderEvents, args: modalHeaderArgs, argTypes: modalHeaderArgTypes, } = getStorybookHelpers("w-modal-header");
|
|
10
|
+
const { events: modalFooterEvents, args: modalFooterArgs, argTypes: modalFooterArgTypes, } = getStorybookHelpers("w-modal-footer");
|
|
11
11
|
const meta = {
|
|
12
|
-
title:
|
|
12
|
+
title: "Overlays/Modal",
|
|
13
13
|
};
|
|
14
14
|
export default meta;
|
|
15
15
|
export const Default = {
|
|
16
16
|
args: {},
|
|
17
17
|
render() {
|
|
18
18
|
return html `
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
19
|
+
<w-button id="modal-open-button-one" aria-haspopup="dialog"
|
|
20
|
+
>Open a modal</w-button
|
|
21
|
+
>
|
|
22
|
+
<w-modal id="example-modal-one">
|
|
23
|
+
<w-modal-header
|
|
24
|
+
id="modal-header-one"
|
|
25
|
+
slot="header"
|
|
26
|
+
title="An example modal"
|
|
27
|
+
></w-modal-header>
|
|
28
|
+
<div slot="content">
|
|
29
|
+
<h2 class="h4 mb-16">Triumph by Wu Tang Clan</h2>
|
|
30
|
+
<div style="margin-bottom: 12px">
|
|
31
|
+
<w-button id="modal-toggle-back-one" variant="utility" small
|
|
32
|
+
>Toggle back button</w-button
|
|
33
|
+
>
|
|
34
|
+
</div>
|
|
35
|
+
<p>
|
|
36
|
+
I bomb atomically, Socrates' philosophies and hypotheses Can't
|
|
37
|
+
define how I be droppin' these mockeries Lyrically perform armed
|
|
38
|
+
robbery Flee with the lottery, possibly they spotted me
|
|
39
|
+
Battle-scarred Shogun, explosion when my pen hits tremendous
|
|
40
|
+
Ultra-violet shine blind forensics I inspect view through the future
|
|
41
|
+
see millennium Killa Beez sold fifty gold, sixty platinum Shackling
|
|
42
|
+
the masses with drastic rap tactics Graphic displays melt the steel
|
|
43
|
+
like blacksmiths Black Wu jackets, Queen Beez ease the guns in
|
|
44
|
+
Rumble with patrolmen, tear gas laced the function Heads by the
|
|
45
|
+
score take flight, incite a war Chicks hit the floor, diehard fans
|
|
46
|
+
demand more Behold the bold soldier, control the globe slowly
|
|
47
|
+
Proceeds to blow, swingin' swords like Shinobi Stomp grounds and
|
|
48
|
+
pound footprints in solid rock Wu got it locked, performin' live on
|
|
49
|
+
your hottest block
|
|
50
|
+
</p>
|
|
51
|
+
<p>
|
|
52
|
+
First I'm gonna getcha, once I gotcha, I gat-cha, You could never
|
|
53
|
+
capture the Method Man's stature. So uhh, tic toc and keep ticking,
|
|
54
|
+
while I get you flipping off what I'm kicking. Yes, the rhythm, the
|
|
55
|
+
rebel, alone in my level heat it up past the boiling point of metal.
|
|
56
|
+
Shackling the masses with drastic rap tactics, graphic displays melt
|
|
57
|
+
the steel like blacksmiths. My beats travel like a vortex through
|
|
58
|
+
your spine, to the top of your cerebral cortex. Yes, the rhythm, the
|
|
59
|
+
rebel, alone in my level heat it up past the boiling point of metal.
|
|
60
|
+
Small change, they putting shame in the game. Murderous material,
|
|
61
|
+
made by a madman, it's the mic wrecker, Inspector, bad man.
|
|
62
|
+
</p>
|
|
63
|
+
<p>
|
|
64
|
+
My beats travel like a vortex through your spine, to the top of your
|
|
65
|
+
cerebral cortex. The rebel, I make more noise than heavy metal. Now,
|
|
66
|
+
lo and behold, another deadly episode, bound to catch another charge
|
|
67
|
+
when I explode Perpendicular to the square we stay in gold like
|
|
68
|
+
Flair, escape from your dragon's lair in particular. Handcuffed in
|
|
69
|
+
the back of a bus, forty of us. Slammin a hype verse til ya head
|
|
70
|
+
burst. Handcuffed in the back of a bus, forty of us. I bomb
|
|
71
|
+
atomically Socrates' philosophies and hypothesis can't define how I
|
|
72
|
+
be dropping these mockeries. I be that insane one from the psycho
|
|
73
|
+
ward, I'm on the trigger, plus I got the Wu-Tang sword. Step through
|
|
74
|
+
your section with the Force like Luke Skywalker, rhyme author,
|
|
75
|
+
orchestrate mind torture.
|
|
76
|
+
</p>
|
|
77
|
+
<p>
|
|
78
|
+
It was the night before New Year's all through the projects, not a
|
|
79
|
+
handgun was silent, not even a Tec. I smoke on the mic like smoking
|
|
80
|
+
Joe Frazier, the hell raiser, raising hell with the flavor. The Wu
|
|
81
|
+
is comin thru, the outcome is critical, Muckin wit my style, is sort
|
|
82
|
+
of like a Miracle. We got stick-up kids, corrupt cops, and pop
|
|
83
|
+
rocks. Step through your section with the Force like Luke Skywalker,
|
|
84
|
+
rhyme author, orchestrate mind torture. Rae got it going on pal,
|
|
85
|
+
call me the rap assassinator, rhymes rugged and built like
|
|
86
|
+
Schwarzenegger.
|
|
87
|
+
</p>
|
|
88
|
+
</div>
|
|
89
|
+
<w-modal-footer slot="footer">
|
|
90
|
+
<div class="flex gap-16">
|
|
91
|
+
<w-button variant="secondary" id="modal-close-button-cancel"
|
|
92
|
+
>Cancel</w-button
|
|
93
|
+
>
|
|
94
|
+
<w-button variant="primary" id="modal-close-button-one"
|
|
95
|
+
>Confirm</w-button
|
|
96
|
+
>
|
|
97
|
+
</div>
|
|
98
|
+
</w-modal-footer>
|
|
99
|
+
</w-modal>
|
|
100
|
+
`;
|
|
99
101
|
},
|
|
100
102
|
play: async ({ canvasElement }) => {
|
|
101
103
|
await Promise.all([
|
|
102
|
-
customElements.whenDefined(
|
|
103
|
-
customElements.whenDefined(
|
|
104
|
-
customElements.whenDefined(
|
|
105
|
-
customElements.whenDefined(
|
|
104
|
+
customElements.whenDefined("w-button"),
|
|
105
|
+
customElements.whenDefined("w-modal"),
|
|
106
|
+
customElements.whenDefined("w-modal-header"),
|
|
107
|
+
customElements.whenDefined("w-modal-footer"),
|
|
106
108
|
]);
|
|
107
|
-
const openButton = canvasElement.querySelector(
|
|
108
|
-
const closeButton = canvasElement.querySelector(
|
|
109
|
-
const toggleBackButton = canvasElement.querySelector(
|
|
110
|
-
const cancelButton = canvasElement.querySelector(
|
|
111
|
-
const modal = canvasElement.querySelector(
|
|
112
|
-
const modalHeader = canvasElement.querySelector(
|
|
109
|
+
const openButton = canvasElement.querySelector("#modal-open-button-one");
|
|
110
|
+
const closeButton = canvasElement.querySelector("#modal-close-button-one");
|
|
111
|
+
const toggleBackButton = canvasElement.querySelector("#modal-toggle-back-one");
|
|
112
|
+
const cancelButton = canvasElement.querySelector("#modal-close-button-cancel");
|
|
113
|
+
const modal = canvasElement.querySelector("#example-modal-one");
|
|
114
|
+
const modalHeader = canvasElement.querySelector("#modal-header-one");
|
|
113
115
|
if (openButton && modal) {
|
|
114
|
-
openButton.addEventListener(
|
|
116
|
+
openButton.addEventListener("click", () => modal.open());
|
|
115
117
|
}
|
|
116
118
|
if (closeButton && modal) {
|
|
117
|
-
closeButton.addEventListener(
|
|
119
|
+
closeButton.addEventListener("click", () => modal.close());
|
|
118
120
|
}
|
|
119
121
|
if (cancelButton && modal) {
|
|
120
|
-
cancelButton.addEventListener(
|
|
122
|
+
cancelButton.addEventListener("click", () => modal.close());
|
|
121
123
|
}
|
|
122
124
|
if (toggleBackButton && modalHeader) {
|
|
123
|
-
toggleBackButton.addEventListener(
|
|
125
|
+
toggleBackButton.addEventListener("click", () => {
|
|
124
126
|
modalHeader.back = !modalHeader.back;
|
|
125
127
|
});
|
|
126
128
|
}
|
|
@@ -137,77 +139,87 @@ export const InvokerCommands = {
|
|
|
137
139
|
args: {},
|
|
138
140
|
render() {
|
|
139
141
|
return html `
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
142
|
+
<w-button
|
|
143
|
+
commandfor="invoker-modal"
|
|
144
|
+
command="--show-modal"
|
|
145
|
+
aria-haspopup="dialog"
|
|
146
|
+
>Open a modal</w-button
|
|
147
|
+
>
|
|
148
|
+
<w-modal id="invoker-modal">
|
|
149
|
+
<w-modal-header
|
|
150
|
+
id="modal-header-one"
|
|
151
|
+
slot="header"
|
|
152
|
+
title="An example modal"
|
|
153
|
+
></w-modal-header>
|
|
154
|
+
<div slot="content">
|
|
155
|
+
<h2 class="h4 mb-16">Triumph by Wu Tang Clan</h2>
|
|
156
|
+
<p>
|
|
157
|
+
I bomb atomically, Socrates' philosophies and hypotheses Can't
|
|
158
|
+
define how I be droppin' these mockeries Lyrically perform armed
|
|
159
|
+
robbery Flee with the lottery, possibly they spotted me
|
|
160
|
+
Battle-scarred Shogun, explosion when my pen hits tremendous
|
|
161
|
+
Ultra-violet shine blind forensics I inspect view through the future
|
|
162
|
+
see millennium Killa Beez sold fifty gold, sixty platinum Shackling
|
|
163
|
+
the masses with drastic rap tactics Graphic displays melt the steel
|
|
164
|
+
like blacksmiths Black Wu jackets, Queen Beez ease the guns in
|
|
165
|
+
Rumble with patrolmen, tear gas laced the function Heads by the
|
|
166
|
+
score take flight, incite a war Chicks hit the floor, diehard fans
|
|
167
|
+
demand more Behold the bold soldier, control the globe slowly
|
|
168
|
+
Proceeds to blow, swingin' swords like Shinobi Stomp grounds and
|
|
169
|
+
pound footprints in solid rock Wu got it locked, performin' live on
|
|
170
|
+
your hottest block
|
|
171
|
+
</p>
|
|
172
|
+
<p>
|
|
173
|
+
First I'm gonna getcha, once I gotcha, I gat-cha, You could never
|
|
174
|
+
capture the Method Man's stature. So uhh, tic toc and keep ticking,
|
|
175
|
+
while I get you flipping off what I'm kicking. Yes, the rhythm, the
|
|
176
|
+
rebel, alone in my level heat it up past the boiling point of metal.
|
|
177
|
+
Shackling the masses with drastic rap tactics, graphic displays melt
|
|
178
|
+
the steel like blacksmiths. My beats travel like a vortex through
|
|
179
|
+
your spine, to the top of your cerebral cortex. Yes, the rhythm, the
|
|
180
|
+
rebel, alone in my level heat it up past the boiling point of metal.
|
|
181
|
+
Small change, they putting shame in the game. Murderous material,
|
|
182
|
+
made by a madman, it's the mic wrecker, Inspector, bad man.
|
|
183
|
+
</p>
|
|
184
|
+
<p>
|
|
185
|
+
My beats travel like a vortex through your spine, to the top of your
|
|
186
|
+
cerebral cortex. The rebel, I make more noise than heavy metal. Now,
|
|
187
|
+
lo and behold, another deadly episode, bound to catch another charge
|
|
188
|
+
when I explode Perpendicular to the square we stay in gold like
|
|
189
|
+
Flair, escape from your dragon's lair in particular. Handcuffed in
|
|
190
|
+
the back of a bus, forty of us. Slammin a hype verse til ya head
|
|
191
|
+
burst. Handcuffed in the back of a bus, forty of us. I bomb
|
|
192
|
+
atomically Socrates' philosophies and hypothesis can't define how I
|
|
193
|
+
be dropping these mockeries. I be that insane one from the psycho
|
|
194
|
+
ward, I'm on the trigger, plus I got the Wu-Tang sword. Step through
|
|
195
|
+
your section with the Force like Luke Skywalker, rhyme author,
|
|
196
|
+
orchestrate mind torture.
|
|
197
|
+
</p>
|
|
198
|
+
<p>
|
|
199
|
+
It was the night before New Year's all through the projects, not a
|
|
200
|
+
handgun was silent, not even a Tec. I smoke on the mic like smoking
|
|
201
|
+
Joe Frazier, the hell raiser, raising hell with the flavor. The Wu
|
|
202
|
+
is comin thru, the outcome is critical, Muckin wit my style, is sort
|
|
203
|
+
of like a Miracle. We got stick-up kids, corrupt cops, and pop
|
|
204
|
+
rocks. Step through your section with the Force like Luke Skywalker,
|
|
205
|
+
rhyme author, orchestrate mind torture. Rae got it going on pal,
|
|
206
|
+
call me the rap assassinator, rhymes rugged and built like
|
|
207
|
+
Schwarzenegger.
|
|
208
|
+
</p>
|
|
209
|
+
</div>
|
|
210
|
+
<w-modal-footer slot="footer">
|
|
211
|
+
<div class="flex gap-16">
|
|
212
|
+
<w-button
|
|
213
|
+
variant="secondary"
|
|
214
|
+
commandfor="invoker-modal"
|
|
215
|
+
command="--close"
|
|
216
|
+
>Cancel</w-button
|
|
217
|
+
>
|
|
218
|
+
<w-button variant="primary" id="invoker-confirm">Confirm</w-button>
|
|
219
|
+
</div>
|
|
220
|
+
</w-modal-footer>
|
|
221
|
+
</w-modal>
|
|
222
|
+
`;
|
|
211
223
|
},
|
|
212
224
|
parameters: {
|
|
213
225
|
docs: {
|
|
@@ -221,57 +233,60 @@ export const WithImage = {
|
|
|
221
233
|
args: {},
|
|
222
234
|
render() {
|
|
223
235
|
return html `
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
236
|
+
<w-button id="modal-open-button-two" aria-haspopup="dialog"
|
|
237
|
+
>Open a modal</w-button
|
|
238
|
+
>
|
|
239
|
+
<w-modal
|
|
240
|
+
id="example-modal-two"
|
|
241
|
+
style="--w-s-color-icon: var(--w-s-color-icon-inverted)"
|
|
242
|
+
>
|
|
243
|
+
<w-modal-header slot="header" title="Look a doggo!">
|
|
244
|
+
<img
|
|
245
|
+
slot="top"
|
|
246
|
+
style="height: 256px; width: 100%; object-fit: cover;"
|
|
247
|
+
src="https://images.unsplash.com/photo-1534361960057-19889db9621e"
|
|
248
|
+
alt="A really nice dog"
|
|
249
|
+
/>
|
|
250
|
+
</w-modal-header>
|
|
251
|
+
<div slot="content">
|
|
252
|
+
<p>
|
|
253
|
+
I bomb atomically, Socrates' philosophies and hypotheses Can't
|
|
254
|
+
define how I be droppin' these mockeries Lyrically perform armed
|
|
255
|
+
robbery Flee with the lottery, possibly they spotted me
|
|
256
|
+
Battle-scarred Shogun, explosion when my pen hits tremendous
|
|
257
|
+
Ultra-violet shine blind forensics I inspect view through the future
|
|
258
|
+
see millennium Killa Beez sold fifty gold, sixty platinum Shackling
|
|
259
|
+
the masses with drastic rap tactics Graphic displays melt the steel
|
|
260
|
+
like blacksmiths Black Wu jackets, Queen Beez ease the guns in
|
|
261
|
+
Rumble with patrolmen, tear gas laced the function Heads by the
|
|
262
|
+
score take flight, incite a war Chicks hit the floor, diehard fans
|
|
263
|
+
demand more Behold the bold soldier, control the globe slowly
|
|
264
|
+
Proceeds to blow, swingin' swords like Shinobi Stomp grounds and
|
|
265
|
+
pound footprints in solid rock Wu got it locked, performin' live on
|
|
266
|
+
your hottest block
|
|
267
|
+
</p>
|
|
268
|
+
</div>
|
|
269
|
+
<w-modal-footer slot="footer">
|
|
270
|
+
<w-button variant="primary" id="modal-close-button-two">OK</w-button>
|
|
271
|
+
</w-modal-footer>
|
|
272
|
+
</w-modal>
|
|
273
|
+
`;
|
|
259
274
|
},
|
|
260
275
|
play: async ({ canvasElement }) => {
|
|
261
276
|
await Promise.all([
|
|
262
|
-
customElements.whenDefined(
|
|
263
|
-
customElements.whenDefined(
|
|
264
|
-
customElements.whenDefined(
|
|
265
|
-
customElements.whenDefined(
|
|
277
|
+
customElements.whenDefined("w-button"),
|
|
278
|
+
customElements.whenDefined("w-modal"),
|
|
279
|
+
customElements.whenDefined("w-modal-header"),
|
|
280
|
+
customElements.whenDefined("w-modal-footer"),
|
|
266
281
|
]);
|
|
267
|
-
const openButton = canvasElement.querySelector(
|
|
268
|
-
const closeButton = canvasElement.querySelector(
|
|
269
|
-
const modal = canvasElement.querySelector(
|
|
282
|
+
const openButton = canvasElement.querySelector("#modal-open-button-two");
|
|
283
|
+
const closeButton = canvasElement.querySelector("#modal-close-button-two");
|
|
284
|
+
const modal = canvasElement.querySelector("#example-modal-two");
|
|
270
285
|
if (openButton && modal) {
|
|
271
|
-
openButton.addEventListener(
|
|
286
|
+
openButton.addEventListener("click", () => modal.open());
|
|
272
287
|
}
|
|
273
288
|
if (closeButton && modal) {
|
|
274
|
-
closeButton.addEventListener(
|
|
289
|
+
closeButton.addEventListener("click", () => modal.close());
|
|
275
290
|
}
|
|
276
291
|
},
|
|
277
292
|
parameters: {
|
|
@@ -285,12 +300,12 @@ export const WithImage = {
|
|
|
285
300
|
export const Modal = {
|
|
286
301
|
render(args) {
|
|
287
302
|
return html `
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
303
|
+
<p>
|
|
304
|
+
This is here to document attributes. See the Default example for a
|
|
305
|
+
complete usage example.
|
|
306
|
+
</p>
|
|
307
|
+
<w-modal ${spread(prespread(args))}></w-modal>
|
|
308
|
+
`;
|
|
294
309
|
},
|
|
295
310
|
args: modalArgs,
|
|
296
311
|
argTypes: modalArgTypes,
|
|
@@ -303,12 +318,12 @@ export const Modal = {
|
|
|
303
318
|
export const ModalHeader = {
|
|
304
319
|
render(args) {
|
|
305
320
|
return html `
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
321
|
+
<p>
|
|
322
|
+
This is here to document attributes. See the Default example for a
|
|
323
|
+
complete usage example.
|
|
324
|
+
</p>
|
|
325
|
+
<w-modal-header ${spread(prespread(args))}></w-modal-header>
|
|
326
|
+
`;
|
|
312
327
|
},
|
|
313
328
|
args: modalHeaderArgs,
|
|
314
329
|
argTypes: modalHeaderArgTypes,
|
|
@@ -321,12 +336,12 @@ export const ModalHeader = {
|
|
|
321
336
|
export const ModalFooter = {
|
|
322
337
|
render(args) {
|
|
323
338
|
return html `
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
339
|
+
<p>
|
|
340
|
+
This is here to document attributes. See the Default example for a
|
|
341
|
+
complete usage example.
|
|
342
|
+
</p>
|
|
343
|
+
<w-modal-footer ${spread(prespread(args))}></w-modal-footer>
|
|
344
|
+
`;
|
|
330
345
|
},
|
|
331
346
|
args: modalFooterArgs,
|
|
332
347
|
argTypes: modalFooterArgTypes,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { WarpModal } from
|
|
3
|
-
export { ModalFooter } from
|
|
4
|
-
export { ModalHeader } from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { WarpModal } from "./modal.js";
|
|
3
|
+
export { ModalFooter } from "../modal-footer/react.js";
|
|
4
|
+
export { ModalHeader } from "../modal-header/react.js";
|
|
5
5
|
/**
|
|
6
6
|
* Modals (or dialogs) display important information that users need to acknowledge.
|
|
7
7
|
*
|