@brandsync/wc 1.10.0 → 1.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +155 -0
- package/custom-elements.json +8333 -4134
- package/dist/brandsync-wc/brandsync-wc.css +33 -0
- package/dist/brandsync-wc/brandsync-wc.esm.js +1 -1
- package/dist/brandsync-wc/{p-9f8852a0.entry.js → p-00a0d489.entry.js} +1 -1
- package/dist/brandsync-wc/{p-360452c2.entry.js → p-09435f41.entry.js} +1 -1
- package/dist/brandsync-wc/{p-dbcbe682.entry.js → p-09bc1923.entry.js} +1 -1
- package/dist/brandsync-wc/{p-1f7208cb.entry.js → p-09cbf05b.entry.js} +1 -1
- package/dist/brandsync-wc/{p-c99b6a66.entry.js → p-0b2d3b7e.entry.js} +1 -1
- package/dist/brandsync-wc/p-0b7c77c1.entry.js +1 -0
- package/dist/brandsync-wc/p-0ee4126c.entry.js +1 -0
- package/dist/brandsync-wc/{p-5f3cd501.entry.js → p-0f8cd2e8.entry.js} +1 -1
- package/dist/brandsync-wc/{p-1c0db4d6.entry.js → p-1261f0b0.entry.js} +1 -1
- package/dist/brandsync-wc/{p-b2074a32.entry.js → p-1978e63c.entry.js} +1 -1
- package/dist/brandsync-wc/p-1aab6d07.entry.js +1 -0
- package/dist/brandsync-wc/{p-96ed9386.entry.js → p-20030f4d.entry.js} +1 -1
- package/dist/brandsync-wc/p-2177042f.entry.js +1 -0
- package/dist/brandsync-wc/{p-a8e2a829.entry.js → p-2368a92e.entry.js} +1 -1
- package/dist/brandsync-wc/{p-2e958566.entry.js → p-247e36ad.entry.js} +1 -1
- package/dist/brandsync-wc/p-2497d128.entry.js +1 -0
- package/dist/brandsync-wc/{p-701ebf4a.entry.js → p-282ddbee.entry.js} +1 -1
- package/dist/brandsync-wc/{p-763876f5.entry.js → p-2f4e08e1.entry.js} +1 -1
- package/dist/brandsync-wc/{p-c3f72584.entry.js → p-34e5feaf.entry.js} +1 -1
- package/dist/brandsync-wc/{p-ea4e20ef.entry.js → p-39a26c64.entry.js} +1 -1
- package/dist/brandsync-wc/p-3a1af63a.entry.js +1 -0
- package/dist/brandsync-wc/{p-9f6fe37d.entry.js → p-3f09296a.entry.js} +1 -1
- package/dist/brandsync-wc/p-416322bd.entry.js +1 -0
- package/dist/brandsync-wc/{p-f89de457.entry.js → p-452f9c1c.entry.js} +1 -1
- package/dist/brandsync-wc/{p-bbcc47b0.entry.js → p-491b51e6.entry.js} +1 -1
- package/dist/brandsync-wc/p-52cb2358.entry.js +1 -0
- package/dist/brandsync-wc/{p-daab6b22.entry.js → p-56c37e0a.entry.js} +1 -1
- package/dist/brandsync-wc/p-5ba90a13.entry.js +1 -0
- package/dist/brandsync-wc/{p-08c99a60.entry.js → p-617bd13a.entry.js} +1 -1
- package/dist/brandsync-wc/p-68fcd4a4.entry.js +1 -0
- package/dist/brandsync-wc/{p-9e88f19c.entry.js → p-69c0a85d.entry.js} +1 -1
- package/dist/brandsync-wc/{p-d3f44cb7.entry.js → p-6a696161.entry.js} +1 -1
- package/dist/brandsync-wc/{p-32cd69f1.entry.js → p-6c6cdf77.entry.js} +1 -1
- package/dist/brandsync-wc/{p-041776c0.entry.js → p-6e735e37.entry.js} +1 -1
- package/dist/brandsync-wc/{p-fc58c663.entry.js → p-73f214ed.entry.js} +1 -1
- package/dist/brandsync-wc/{p-be2c1740.entry.js → p-7796b93f.entry.js} +1 -1
- package/dist/brandsync-wc/p-78a69a59.entry.js +1 -0
- package/dist/brandsync-wc/{p-f370b8fa.entry.js → p-78f4fcf0.entry.js} +1 -1
- package/dist/brandsync-wc/p-7f954939.entry.js +1 -0
- package/dist/brandsync-wc/{p-835a8dc7.entry.js → p-81605b82.entry.js} +1 -1
- package/dist/brandsync-wc/{p-a71d2811.entry.js → p-823ab3b2.entry.js} +1 -1
- package/dist/brandsync-wc/{p-2181378f.entry.js → p-83c90489.entry.js} +1 -1
- package/dist/brandsync-wc/p-89099a39.entry.js +1 -0
- package/dist/brandsync-wc/{p-a92eec48.entry.js → p-89fabf27.entry.js} +1 -1
- package/dist/brandsync-wc/{p-AgoOSYvW.js → p-DqQRXQMx.js} +2 -2
- package/dist/brandsync-wc/{p-18c3c22c.entry.js → p-a9169157.entry.js} +1 -1
- package/dist/brandsync-wc/{p-301b2455.entry.js → p-b84366a7.entry.js} +1 -1
- package/dist/brandsync-wc/{p-a5feaad4.entry.js → p-b8d2ce91.entry.js} +1 -1
- package/dist/brandsync-wc/p-b9a4042e.entry.js +1 -0
- package/dist/brandsync-wc/{p-275072dd.entry.js → p-b9ccd9d1.entry.js} +1 -1
- package/dist/brandsync-wc/{p-61c1a2a3.entry.js → p-be3dd446.entry.js} +1 -1
- package/dist/brandsync-wc/{p-8eba7f90.entry.js → p-d754ee13.entry.js} +1 -1
- package/dist/brandsync-wc/{p-e9b43754.entry.js → p-d75f3f87.entry.js} +1 -1
- package/dist/brandsync-wc/{p-e8a5b8eb.entry.js → p-d8b29a53.entry.js} +1 -1
- package/dist/brandsync-wc/p-de110ad0.entry.js +1 -0
- package/dist/brandsync-wc/p-e2556b4e.entry.js +1 -0
- package/dist/brandsync-wc/{p-af2bf957.entry.js → p-e5daa6ca.entry.js} +1 -1
- package/dist/brandsync-wc/{p-0132a2d1.entry.js → p-f15d9524.entry.js} +1 -1
- package/dist/brandsync-wc/p-f5180578.entry.js +1 -0
- package/dist/brandsync-wc/{p-fd254972.entry.js → p-f7d15fbe.entry.js} +1 -1
- package/dist/brandsync-wc/{p-50a251a4.entry.js → p-fc069773.entry.js} +1 -1
- package/dist/brandsync-wc/p-fcee0dc4.entry.js +1 -0
- package/dist/cjs/brandsync-wc.cjs.js +2 -2
- package/dist/cjs/bs-accordion.cjs.entry.js +1 -1
- package/dist/cjs/bs-ai-disclaimer.cjs.entry.js +2 -2
- package/dist/cjs/bs-ai-greeting.cjs.entry.js +2 -2
- package/dist/cjs/bs-ai-thinking.cjs.entry.js +2 -2
- package/dist/cjs/bs-attachment-list.cjs.entry.js +2 -2
- package/dist/cjs/bs-attachment.cjs.entry.js +1 -1
- package/dist/cjs/bs-avatar.cjs.entry.js +1 -1
- package/dist/cjs/bs-badge.cjs.entry.js +1 -1
- package/dist/cjs/bs-breadcrumb-overflow.cjs.entry.js +1 -1
- package/dist/cjs/bs-breadcrumb.cjs.entry.js +6 -3
- package/dist/cjs/bs-breadcrumbs.cjs.entry.js +2 -2
- package/dist/cjs/bs-button-skeleton.cjs.entry.js +2 -2
- package/dist/cjs/bs-button.cjs.entry.js +3 -3
- package/dist/cjs/bs-card.cjs.entry.js +3 -3
- package/dist/cjs/bs-carousel.cjs.entry.js +1 -1
- package/dist/cjs/bs-chatbot-feedback.cjs.entry.js +2 -2
- package/dist/cjs/bs-chatbot-header.cjs.entry.js +3 -3
- package/dist/cjs/bs-chatbot-response-action.cjs.entry.js +2 -2
- package/dist/cjs/bs-chatbot-sources-drawer.cjs.entry.js +2 -2
- package/dist/cjs/bs-chatbot-suggestion-button.cjs.entry.js +2 -2
- package/dist/cjs/bs-checkbox-skeleton.cjs.entry.js +2 -2
- package/dist/cjs/bs-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/bs-chip-filter.cjs.entry.js +1 -1
- package/dist/cjs/bs-chip-informative.cjs.entry.js +1 -1
- package/dist/cjs/bs-chip-input.cjs.entry.js +1 -1
- package/dist/cjs/bs-composer-status-banner.cjs.entry.js +1 -1
- package/dist/cjs/bs-composer.cjs.entry.js +2 -2
- package/dist/cjs/bs-cookie-consent.cjs.entry.js +186 -0
- package/dist/cjs/bs-data-table.cjs.entry.js +1 -1
- package/dist/cjs/bs-datepicker.cjs.entry.js +13 -9
- package/dist/cjs/bs-dialog.cjs.entry.js +1 -1
- package/dist/cjs/bs-error-page.cjs.entry.js +103 -0
- package/dist/cjs/bs-file-upload-item.cjs.entry.js +2 -2
- package/dist/cjs/bs-file-upload.cjs.entry.js +2 -2
- package/dist/cjs/bs-icon-button.cjs.entry.js +2 -2
- package/dist/cjs/bs-icon-tile.cjs.entry.js +52 -0
- package/dist/cjs/bs-inline-tab.cjs.entry.js +2 -2
- package/dist/cjs/{bs-input_2.cjs.entry.js → bs-input_3.cjs.entry.js} +42 -6
- package/dist/cjs/bs-logo.cjs.entry.js +1 -1
- package/dist/cjs/bs-navigation-drawer-item.cjs.entry.js +2 -2
- package/dist/cjs/bs-navigation-drawer.cjs.entry.js +3 -3
- package/dist/cjs/bs-navigation-header.cjs.entry.js +2 -2
- package/dist/cjs/bs-onboarding-checklist.cjs.entry.js +161 -0
- package/dist/cjs/bs-pagination.cjs.entry.js +2 -2
- package/dist/cjs/bs-product-tour.cjs.entry.js +78 -0
- package/dist/cjs/bs-progress-linear.cjs.entry.js +4 -4
- package/dist/cjs/bs-progress.cjs.entry.js +3 -3
- package/dist/cjs/bs-qr-code.cjs.entry.js +148 -0
- package/dist/cjs/bs-radio.cjs.entry.js +2 -2
- package/dist/cjs/bs-session-timeout.cjs.entry.js +215 -0
- package/dist/cjs/bs-slider.cjs.entry.js +2 -2
- package/dist/cjs/bs-snackbar.cjs.entry.js +9 -3
- package/dist/cjs/bs-source-link.cjs.entry.js +3 -3
- package/dist/cjs/bs-stepper-step.cjs.entry.js +2 -2
- package/dist/cjs/bs-stepper.cjs.entry.js +2 -2
- package/dist/cjs/bs-switch.cjs.entry.js +2 -2
- package/dist/cjs/bs-tab_3.cjs.entry.js +255 -0
- package/dist/cjs/bs-timepicker.cjs.entry.js +4 -4
- package/dist/cjs/bs-toast.cjs.entry.js +2 -2
- package/dist/cjs/bs-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/bs-whats-new.cjs.entry.js +144 -0
- package/dist/cjs/{index-kk9YXF2S.js → index-tFJjflK5.js} +15 -3
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +9 -0
- package/dist/collection/components/bs-a11y.cmp.test.js +22 -0
- package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.js +1 -1
- package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.js +1 -1
- package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js +1 -1
- package/dist/collection/components/bs-attachment/bs-attachment.stories.js +4 -3
- package/dist/collection/components/bs-attachment-list/bs-attachment-list.js +1 -1
- package/dist/collection/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.js +6 -3
- package/dist/collection/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.js +1 -1
- package/dist/collection/components/bs-button/bs-button/bs-button.cmp.test.js +28 -0
- package/dist/collection/components/bs-button/bs-button/bs-button.css +8 -2
- package/dist/collection/components/bs-button/bs-button/bs-button.js +4 -1
- package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.js +1 -1
- package/dist/collection/components/bs-button-skeleton/bs-button-skeleton.js +1 -1
- package/dist/collection/components/bs-card/bs-card.cmp.test.js +48 -0
- package/dist/collection/components/bs-card/bs-card.css +37 -16
- package/dist/collection/components/bs-card/bs-card.js +2 -2
- package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.js +1 -1
- package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.cmp.test.js +2 -2
- package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.css +1 -1
- package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.js +1 -1
- package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.js +1 -1
- package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.js +1 -1
- package/dist/collection/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.js +1 -1
- package/dist/collection/components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.js +1 -1
- package/dist/collection/components/bs-composer/bs-composer.css +4 -2
- package/dist/collection/components/bs-cookie-consent/bs-cookie-consent.cmp.test.js +217 -0
- package/dist/collection/components/bs-cookie-consent/bs-cookie-consent.css +350 -0
- package/dist/collection/components/bs-cookie-consent/bs-cookie-consent.js +668 -0
- package/dist/collection/components/bs-cookie-consent/bs-cookie-consent.stories.js +103 -0
- package/dist/collection/components/bs-datepicker/bs-datepicker.cmp.test.js +9 -0
- package/dist/collection/components/bs-datepicker/bs-datepicker.css +21 -11
- package/dist/collection/components/bs-datepicker/bs-datepicker.js +13 -7
- package/dist/collection/components/bs-datepicker/bs-datepicker.stories.js +3 -2
- package/dist/collection/components/bs-error-page/bs-error-page.cmp.test.js +99 -0
- package/dist/collection/components/bs-error-page/bs-error-page.css +105 -0
- package/dist/collection/components/bs-error-page/bs-error-page.js +328 -0
- package/dist/collection/components/bs-error-page/bs-error-page.stories.js +57 -0
- package/dist/collection/components/bs-file-upload/bs-file-upload.js +1 -1
- package/dist/collection/components/bs-file-upload-item/bs-file-upload-item.js +1 -1
- package/dist/collection/components/bs-icon-tile/bs-icon-tile.cmp.test.js +175 -0
- package/dist/collection/components/bs-icon-tile/bs-icon-tile.css +112 -0
- package/dist/collection/components/bs-icon-tile/bs-icon-tile.js +158 -0
- package/dist/collection/components/bs-icon-tile/bs-icon-tile.stories.js +45 -0
- package/dist/collection/components/bs-input/bs-input.cmp.test.js +16 -2
- package/dist/collection/components/bs-input/bs-input.css +15 -23
- package/dist/collection/components/bs-input/bs-input.js +8 -4
- package/dist/collection/components/bs-menu/bs-menu.js +1 -1
- package/dist/collection/components/bs-menu-item/bs-menu-item.js +1 -1
- package/dist/collection/components/bs-onboarding-checklist/bs-onboarding-checklist.cmp.test.js +280 -0
- package/dist/collection/components/bs-onboarding-checklist/bs-onboarding-checklist.css +488 -0
- package/dist/collection/components/bs-onboarding-checklist/bs-onboarding-checklist.js +674 -0
- package/dist/collection/components/bs-onboarding-checklist/bs-onboarding-checklist.stories.js +92 -0
- package/dist/collection/components/bs-pagination/bs-pagination.js +1 -1
- package/dist/collection/components/bs-product-tour/bs-product-tour.cmp.test.js +116 -0
- package/dist/collection/components/bs-product-tour/bs-product-tour.css +265 -0
- package/dist/collection/components/bs-product-tour/bs-product-tour.js +391 -0
- package/dist/collection/components/bs-product-tour/bs-product-tour.stories.js +68 -0
- package/dist/collection/components/bs-progress/bs-progress.js +2 -2
- package/dist/collection/components/bs-progress-linear/bs-progress-linear.css +1 -1
- package/dist/collection/components/bs-progress-linear/bs-progress-linear.js +2 -2
- package/dist/collection/components/bs-qr-code/bs-qr-code.cmp.test.js +152 -0
- package/dist/collection/components/bs-qr-code/bs-qr-code.css +307 -0
- package/dist/collection/components/bs-qr-code/bs-qr-code.js +767 -0
- package/dist/collection/components/bs-qr-code/bs-qr-code.stories.js +99 -0
- package/dist/collection/components/bs-radio/bs-radio.js +1 -1
- package/dist/collection/components/bs-session-timeout/bs-session-timeout.cmp.test.js +202 -0
- package/dist/collection/components/bs-session-timeout/bs-session-timeout.css +239 -0
- package/dist/collection/components/bs-session-timeout/bs-session-timeout.js +772 -0
- package/dist/collection/components/bs-session-timeout/bs-session-timeout.stories.js +88 -0
- package/dist/collection/components/bs-slider/bs-slider.js +1 -1
- package/dist/collection/components/bs-snackbar/bs-snackbar.cmp.test.js +20 -0
- package/dist/collection/components/bs-snackbar/bs-snackbar.css +6 -4
- package/dist/collection/components/bs-snackbar/bs-snackbar.js +53 -1
- package/dist/collection/components/bs-source-link/bs-source-link.js +2 -2
- package/dist/collection/components/bs-stepper/bs-stepper/bs-stepper.js +1 -1
- package/dist/collection/components/bs-stepper/bs-stepper-step/bs-stepper-step.js +1 -1
- package/dist/collection/components/bs-switch/bs-switch.js +1 -1
- package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js +1 -1
- package/dist/collection/components/bs-tab/bs-tab/bs-tab.js +1 -1
- package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js +1 -1
- package/dist/collection/components/bs-timepicker/bs-timepicker.css +15 -11
- package/dist/collection/components/bs-timepicker/bs-timepicker.js +4 -2
- package/dist/collection/components/bs-toast/bs-toast.js +1 -1
- package/dist/collection/components/bs-tooltip/bs-tooltip.js +1 -1
- package/dist/collection/components/bs-whats-new/bs-whats-new.cmp.test.js +200 -0
- package/dist/collection/components/bs-whats-new/bs-whats-new.css +315 -0
- package/dist/collection/components/bs-whats-new/bs-whats-new.js +790 -0
- package/dist/collection/components/bs-whats-new/bs-whats-new.stories.js +105 -0
- package/dist/collection/components/bs-whats-new-entry/bs-whats-new-entry.cmp.test.js +79 -0
- package/dist/collection/components/bs-whats-new-entry/bs-whats-new-entry.css +131 -0
- package/dist/collection/components/bs-whats-new-entry/bs-whats-new-entry.js +295 -0
- package/dist/collection/components/bs-whats-new-entry/bs-whats-new-entry.stories.js +67 -0
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.js +2 -2
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.js +1 -1
- package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.js +1 -1
- package/dist/components/bs-accordion.js +1 -1
- package/dist/components/bs-ai-disclaimer.js +1 -1
- package/dist/components/bs-ai-greeting.js +1 -1
- package/dist/components/bs-ai-thinking.js +1 -1
- package/dist/components/bs-attachment-list.js +1 -1
- package/dist/components/bs-attachment.js +1 -1
- package/dist/components/bs-avatar.js +1 -1
- package/dist/components/bs-badge.js +1 -1
- package/dist/components/bs-breadcrumb-overflow.js +1 -1
- package/dist/components/bs-breadcrumb.js +1 -1
- package/dist/components/bs-breadcrumbs.js +1 -1
- package/dist/components/bs-button-skeleton.js +1 -1
- package/dist/components/bs-button.js +1 -1
- package/dist/components/bs-card.js +1 -1
- package/dist/components/bs-carousel.js +1 -1
- package/dist/components/bs-chatbot-feedback.js +1 -1
- package/dist/components/bs-chatbot-header.js +1 -1
- package/dist/components/bs-chatbot-response-action.js +1 -1
- package/dist/components/bs-chatbot-sources-drawer.js +1 -1
- package/dist/components/bs-chatbot-suggestion-button.js +1 -1
- package/dist/components/bs-checkbox-skeleton.js +1 -1
- package/dist/components/bs-checkbox.js +1 -1
- package/dist/components/bs-chip-filter.js +1 -1
- package/dist/components/bs-chip-informative.js +1 -1
- package/dist/components/bs-chip-input.js +1 -1
- package/dist/components/bs-composer-status-banner.js +1 -1
- package/dist/components/bs-composer.js +1 -1
- package/dist/components/bs-cookie-consent.d.ts +11 -0
- package/dist/components/bs-cookie-consent.js +1 -0
- package/dist/components/bs-data-table.js +1 -1
- package/dist/components/bs-datepicker.js +1 -1
- package/dist/components/bs-dialog.js +1 -1
- package/dist/components/bs-error-page.d.ts +11 -0
- package/dist/components/bs-error-page.js +1 -0
- package/dist/components/bs-file-upload-item.js +1 -1
- package/dist/components/bs-file-upload.js +1 -1
- package/dist/components/bs-icon-button.js +1 -1
- package/dist/components/bs-icon-tile.d.ts +11 -0
- package/dist/components/bs-icon-tile.js +1 -0
- package/dist/components/bs-inline-tab.js +1 -1
- package/dist/components/bs-input.js +1 -1
- package/dist/components/bs-logo.js +1 -1
- package/dist/components/bs-menu-item.js +1 -1
- package/dist/components/bs-menu.js +1 -1
- package/dist/components/bs-navigation-drawer-item.js +1 -1
- package/dist/components/bs-navigation-drawer.js +1 -1
- package/dist/components/bs-navigation-header.js +1 -1
- package/dist/components/bs-onboarding-checklist.d.ts +11 -0
- package/dist/components/bs-onboarding-checklist.js +1 -0
- package/dist/components/bs-pagination.js +1 -1
- package/dist/components/bs-product-tour.d.ts +11 -0
- package/dist/components/bs-product-tour.js +1 -0
- package/dist/components/bs-progress-linear.js +1 -1
- package/dist/components/bs-progress.js +1 -1
- package/dist/components/bs-qr-code.d.ts +11 -0
- package/dist/components/bs-qr-code.js +1 -0
- package/dist/components/bs-radio.js +1 -1
- package/dist/components/bs-session-timeout.d.ts +11 -0
- package/dist/components/bs-session-timeout.js +1 -0
- package/dist/components/bs-slider.js +1 -1
- package/dist/components/bs-snackbar.js +1 -1
- package/dist/components/bs-source-link.js +1 -1
- package/dist/components/bs-stepper-step.js +1 -1
- package/dist/components/bs-stepper.js +1 -1
- package/dist/components/bs-switch.js +1 -1
- package/dist/components/bs-tab.js +1 -1
- package/dist/components/bs-tabs.js +1 -1
- package/dist/components/bs-timepicker.js +1 -1
- package/dist/components/bs-toast.js +1 -1
- package/dist/components/bs-tooltip.js +1 -1
- package/dist/components/bs-whats-new-entry.d.ts +11 -0
- package/dist/components/bs-whats-new-entry.js +1 -0
- package/dist/components/bs-whats-new.d.ts +11 -0
- package/dist/components/bs-whats-new.js +1 -0
- package/dist/components/index.js +1 -1
- package/dist/components/{p-R2MlkUzD.js → p-BEEoVNRu.js} +1 -1
- package/dist/components/p-BUskqBR6.js +1 -0
- package/dist/components/{p-DkIVyFOP.js → p-BZ3M4lOU.js} +1 -1
- package/dist/components/{p-ZK8p5zax.js → p-Be9L4_Fe.js} +1 -1
- package/dist/components/p-Be_Pmccm.js +1 -0
- package/dist/components/{p-CPvqZNO8.js → p-Bl_tVzeq.js} +1 -1
- package/dist/components/p-C8yT2Ucq.js +1 -0
- package/dist/components/p-CA31vqjL.js +1 -0
- package/dist/components/p-CUfs0ROR.js +1 -0
- package/dist/components/{p-JYlmcxBn.js → p-CVrEuVFo.js} +1 -1
- package/dist/components/{p-B7Icv1ho.js → p-C_j_jDM6.js} +1 -1
- package/dist/components/p-CbimDNGY.js +1 -0
- package/dist/components/p-CeUK3n7D.js +1 -0
- package/dist/components/p-CncySD_-.js +1 -0
- package/dist/components/p-DE8K7fg0.js +1 -0
- package/dist/components/p-Dr0Qk9Zc.js +1 -0
- package/dist/components/p-DuLL7Ouw.js +1 -0
- package/dist/components/p-YsHQLXET.js +1 -0
- package/dist/components/p-qmS2CBqi.js +1 -0
- package/dist/components/{p-BYR_ZC8v.js → p-zTHlbyH6.js} +1 -1
- package/dist/esm/brandsync-wc.js +3 -3
- package/dist/esm/bs-accordion.entry.js +1 -1
- package/dist/esm/bs-ai-disclaimer.entry.js +2 -2
- package/dist/esm/bs-ai-greeting.entry.js +2 -2
- package/dist/esm/bs-ai-thinking.entry.js +2 -2
- package/dist/esm/bs-attachment-list.entry.js +2 -2
- package/dist/esm/bs-attachment.entry.js +1 -1
- package/dist/esm/bs-avatar.entry.js +1 -1
- package/dist/esm/bs-badge.entry.js +1 -1
- package/dist/esm/bs-breadcrumb-overflow.entry.js +1 -1
- package/dist/esm/bs-breadcrumb.entry.js +6 -3
- package/dist/esm/bs-breadcrumbs.entry.js +2 -2
- package/dist/esm/bs-button-skeleton.entry.js +2 -2
- package/dist/esm/bs-button.entry.js +3 -3
- package/dist/esm/bs-card.entry.js +3 -3
- package/dist/esm/bs-carousel.entry.js +1 -1
- package/dist/esm/bs-chatbot-feedback.entry.js +2 -2
- package/dist/esm/bs-chatbot-header.entry.js +3 -3
- package/dist/esm/bs-chatbot-response-action.entry.js +2 -2
- package/dist/esm/bs-chatbot-sources-drawer.entry.js +2 -2
- package/dist/esm/bs-chatbot-suggestion-button.entry.js +2 -2
- package/dist/esm/bs-checkbox-skeleton.entry.js +2 -2
- package/dist/esm/bs-checkbox.entry.js +1 -1
- package/dist/esm/bs-chip-filter.entry.js +1 -1
- package/dist/esm/bs-chip-informative.entry.js +1 -1
- package/dist/esm/bs-chip-input.entry.js +1 -1
- package/dist/esm/bs-composer-status-banner.entry.js +1 -1
- package/dist/esm/bs-composer.entry.js +2 -2
- package/dist/esm/bs-cookie-consent.entry.js +184 -0
- package/dist/esm/bs-data-table.entry.js +1 -1
- package/dist/esm/bs-datepicker.entry.js +13 -9
- package/dist/esm/bs-dialog.entry.js +1 -1
- package/dist/esm/bs-error-page.entry.js +101 -0
- package/dist/esm/bs-file-upload-item.entry.js +2 -2
- package/dist/esm/bs-file-upload.entry.js +2 -2
- package/dist/esm/bs-icon-button.entry.js +2 -2
- package/dist/esm/bs-icon-tile.entry.js +50 -0
- package/dist/esm/bs-inline-tab.entry.js +2 -2
- package/dist/esm/{bs-input_2.entry.js → bs-input_3.entry.js} +42 -7
- package/dist/esm/bs-logo.entry.js +1 -1
- package/dist/esm/bs-navigation-drawer-item.entry.js +2 -2
- package/dist/esm/bs-navigation-drawer.entry.js +3 -3
- package/dist/esm/bs-navigation-header.entry.js +2 -2
- package/dist/esm/bs-onboarding-checklist.entry.js +159 -0
- package/dist/esm/bs-pagination.entry.js +2 -2
- package/dist/esm/bs-product-tour.entry.js +76 -0
- package/dist/esm/bs-progress-linear.entry.js +4 -4
- package/dist/esm/bs-progress.entry.js +3 -3
- package/dist/esm/bs-qr-code.entry.js +146 -0
- package/dist/esm/bs-radio.entry.js +2 -2
- package/dist/esm/bs-session-timeout.entry.js +213 -0
- package/dist/esm/bs-slider.entry.js +2 -2
- package/dist/esm/bs-snackbar.entry.js +9 -3
- package/dist/esm/bs-source-link.entry.js +3 -3
- package/dist/esm/bs-stepper-step.entry.js +2 -2
- package/dist/esm/bs-stepper.entry.js +2 -2
- package/dist/esm/bs-switch.entry.js +2 -2
- package/dist/esm/bs-tab_3.entry.js +251 -0
- package/dist/esm/bs-timepicker.entry.js +4 -4
- package/dist/esm/bs-toast.entry.js +2 -2
- package/dist/esm/bs-tooltip.entry.js +2 -2
- package/dist/esm/bs-whats-new.entry.js +142 -0
- package/dist/esm/{index-AgoOSYvW.js → index-DqQRXQMx.js} +15 -3
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/bs-attachment/bs-attachment.stories.d.ts +1 -1
- package/dist/types/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.d.ts +4 -1
- package/dist/types/components/bs-button/bs-button/bs-button.d.ts +3 -0
- package/dist/types/components/bs-cookie-consent/bs-cookie-consent.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-cookie-consent/bs-cookie-consent.d.ts +136 -0
- package/dist/types/components/bs-cookie-consent/bs-cookie-consent.stories.d.ts +16 -0
- package/dist/types/components/bs-datepicker/bs-datepicker.d.ts +2 -0
- package/dist/types/components/bs-error-page/bs-error-page.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-error-page/bs-error-page.d.ts +60 -0
- package/dist/types/components/bs-error-page/bs-error-page.stories.d.ts +22 -0
- package/dist/types/components/bs-icon-tile/bs-icon-tile.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-icon-tile/bs-icon-tile.d.ts +40 -0
- package/dist/types/components/bs-icon-tile/bs-icon-tile.stories.d.ts +13 -0
- package/dist/types/components/bs-input/bs-input.d.ts +4 -1
- package/dist/types/components/bs-onboarding-checklist/bs-onboarding-checklist.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-onboarding-checklist/bs-onboarding-checklist.d.ts +140 -0
- package/dist/types/components/bs-onboarding-checklist/bs-onboarding-checklist.stories.d.ts +18 -0
- package/dist/types/components/bs-product-tour/bs-product-tour.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-product-tour/bs-product-tour.d.ts +78 -0
- package/dist/types/components/bs-product-tour/bs-product-tour.stories.d.ts +19 -0
- package/dist/types/components/bs-qr-code/bs-qr-code.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-qr-code/bs-qr-code.d.ts +124 -0
- package/dist/types/components/bs-qr-code/bs-qr-code.stories.d.ts +28 -0
- package/dist/types/components/bs-session-timeout/bs-session-timeout.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-session-timeout/bs-session-timeout.d.ts +141 -0
- package/dist/types/components/bs-session-timeout/bs-session-timeout.stories.d.ts +19 -0
- package/dist/types/components/bs-snackbar/bs-snackbar.d.ts +7 -0
- package/dist/types/components/bs-timepicker/bs-timepicker.d.ts +2 -0
- package/dist/types/components/bs-whats-new/bs-whats-new.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-whats-new/bs-whats-new.d.ts +147 -0
- package/dist/types/components/bs-whats-new/bs-whats-new.stories.d.ts +14 -0
- package/dist/types/components/bs-whats-new-entry/bs-whats-new-entry.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-whats-new-entry/bs-whats-new-entry.d.ts +53 -0
- package/dist/types/components/bs-whats-new-entry/bs-whats-new-entry.stories.d.ts +18 -0
- package/dist/types/components.d.ts +2642 -98
- package/package.json +3 -2
- package/dist/brandsync-wc/p-1c3a43c7.entry.js +0 -1
- package/dist/brandsync-wc/p-1c427ffb.entry.js +0 -1
- package/dist/brandsync-wc/p-4f2c4929.entry.js +0 -1
- package/dist/brandsync-wc/p-76e1c295.entry.js +0 -1
- package/dist/brandsync-wc/p-790db8b3.entry.js +0 -1
- package/dist/brandsync-wc/p-796a1860.entry.js +0 -1
- package/dist/brandsync-wc/p-806a5347.entry.js +0 -1
- package/dist/brandsync-wc/p-addfa0a0.entry.js +0 -1
- package/dist/brandsync-wc/p-c9a72416.entry.js +0 -1
- package/dist/brandsync-wc/p-d42b1c2b.entry.js +0 -1
- package/dist/brandsync-wc/p-f006d962.entry.js +0 -1
- package/dist/brandsync-wc/p-f074f94e.entry.js +0 -1
- package/dist/cjs/bs-menu.cjs.entry.js +0 -39
- package/dist/cjs/bs-tab.cjs.entry.js +0 -88
- package/dist/cjs/bs-tabs.cjs.entry.js +0 -133
- package/dist/components/p-BTvme8CE.js +0 -1
- package/dist/components/p-Ba860ej1.js +0 -1
- package/dist/components/p-CpUHnsq9.js +0 -1
- package/dist/components/p-jDO25SfF.js +0 -1
- package/dist/esm/bs-menu.entry.js +0 -37
- package/dist/esm/bs-tab.entry.js +0 -86
- package/dist/esm/bs-tabs.entry.js +0 -131
|
@@ -13,7 +13,7 @@ import { BsBreadcrumbSize } from "./components/bs-breadcrumb/bs-breadcrumb/bs-br
|
|
|
13
13
|
import { BsBreadcrumbOverflowItem } from "./components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow";
|
|
14
14
|
import { BsBreadcrumbSize as BsBreadcrumbSize1 } from "./components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb";
|
|
15
15
|
import { BsButtonSize, BsButtonVariant } from "./components/bs-button/bs-button/bs-button";
|
|
16
|
-
import { BsButtonSize as BsButtonSize1 } from "./components/bs-button/bs-button/bs-button";
|
|
16
|
+
import { BsButtonSize as BsButtonSize1, BsButtonVariant as BsButtonVariant1 } from "./components/bs-button/bs-button/bs-button";
|
|
17
17
|
import { BsCardSurface } from "./components/bs-card/bs-card";
|
|
18
18
|
import { BsCarouselTracker } from "./components/bs-carousel/bs-carousel";
|
|
19
19
|
import { BsCheckboxSize } from "./components/bs-checkbox/bs-checkbox";
|
|
@@ -23,16 +23,23 @@ import { BsChipInformativeColor, BsChipInformativeSize } from "./components/bs-c
|
|
|
23
23
|
import { BsChipInputSize } from "./components/bs-chip/bs-chip-input/bs-chip-input";
|
|
24
24
|
import { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-composer";
|
|
25
25
|
import { BsComposerStatusBannerType } from "./components/bs-composer-status-banner/bs-composer-status-banner";
|
|
26
|
+
import { BsCookieCategory, BsCookieChoices, BsCookieConsentType } from "./components/bs-cookie-consent/bs-cookie-consent";
|
|
26
27
|
import { BsDataTableColumn, BsDataTableRow } from "./components/bs-data-table/bs-data-table";
|
|
27
28
|
import { BsDatepickerChange } from "./components/bs-datepicker/bs-datepicker";
|
|
28
29
|
import { BsDialogSize } from "./components/bs-dialog/bs-dialog";
|
|
30
|
+
import { BsErrorPageType } from "./components/bs-error-page/bs-error-page";
|
|
29
31
|
import { BsFileUploadDirection } from "./components/bs-file-upload/bs-file-upload";
|
|
30
32
|
import { BsFileUploadItemState } from "./components/bs-file-upload-item/bs-file-upload-item";
|
|
31
33
|
import { BsIconButtonSize, BsIconButtonVariant } from "./components/bs-button/bs-icon-button/bs-icon-button";
|
|
34
|
+
import { BsIconTileIntent, BsIconTileSize } from "./components/bs-icon-tile/bs-icon-tile";
|
|
32
35
|
import { BsLogoBackground, BsLogoVariant } from "./components/bs-logo/bs-logo";
|
|
33
36
|
import { BsNavigationHeaderAlignment } from "./components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header";
|
|
37
|
+
import { BsOnboardingChecklistType, BsOnboardingLauncherLayout, BsOnboardingStep } from "./components/bs-onboarding-checklist/bs-onboarding-checklist";
|
|
38
|
+
import { BsProductTourDirection, BsProductTourType } from "./components/bs-product-tour/bs-product-tour";
|
|
34
39
|
import { BsProgressSize, BsProgressStrokeWidth, BsProgressType } from "./components/bs-progress/bs-progress";
|
|
35
40
|
import { BsProgressLinearSize, BsProgressLinearType } from "./components/bs-progress-linear/bs-progress-linear";
|
|
41
|
+
import { BsQrCodeSize, BsQrCodeState, BsQrCodeType } from "./components/bs-qr-code/bs-qr-code";
|
|
42
|
+
import { BsSessionTimeoutAlternative, BsSessionTimeoutType } from "./components/bs-session-timeout/bs-session-timeout";
|
|
36
43
|
import { BsSliderType } from "./components/bs-slider/bs-slider";
|
|
37
44
|
import { BsSnackbarVariant } from "./components/bs-snackbar/bs-snackbar";
|
|
38
45
|
import { BsStepperDirection } from "./components/bs-stepper/bs-stepper-step/bs-stepper-step";
|
|
@@ -42,6 +49,9 @@ import { BsTabIconPosition } from "./components/bs-tab/bs-tab/bs-tab";
|
|
|
42
49
|
import { BsTabsOrientation, BsTabsType } from "./components/bs-tab/bs-tabs/bs-tabs";
|
|
43
50
|
import { BsTimepickerChange } from "./components/bs-timepicker/bs-timepicker";
|
|
44
51
|
import { BsToastState } from "./components/bs-toast/bs-toast";
|
|
52
|
+
import { BsWhatsNewFilter, BsWhatsNewItem, BsWhatsNewType } from "./components/bs-whats-new/bs-whats-new";
|
|
53
|
+
import { BsWhatsNewEntryTagColor } from "./components/bs-whats-new-entry/bs-whats-new-entry";
|
|
54
|
+
import { BsWhatsNewEntryTagColor as BsWhatsNewEntryTagColor1 } from "./components/bs-whats-new-entry/bs-whats-new-entry";
|
|
45
55
|
export { BsAccordionSize } from "./components/bs-accordion/bs-accordion";
|
|
46
56
|
export { BsAttachmentType } from "./components/bs-attachment/bs-attachment";
|
|
47
57
|
export { BsAvatarSize, BsAvatarType } from "./components/bs-avatar/bs-avatar";
|
|
@@ -50,7 +60,7 @@ export { BsBreadcrumbSize } from "./components/bs-breadcrumb/bs-breadcrumb/bs-br
|
|
|
50
60
|
export { BsBreadcrumbOverflowItem } from "./components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow";
|
|
51
61
|
export { BsBreadcrumbSize as BsBreadcrumbSize1 } from "./components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb";
|
|
52
62
|
export { BsButtonSize, BsButtonVariant } from "./components/bs-button/bs-button/bs-button";
|
|
53
|
-
export { BsButtonSize as BsButtonSize1 } from "./components/bs-button/bs-button/bs-button";
|
|
63
|
+
export { BsButtonSize as BsButtonSize1, BsButtonVariant as BsButtonVariant1 } from "./components/bs-button/bs-button/bs-button";
|
|
54
64
|
export { BsCardSurface } from "./components/bs-card/bs-card";
|
|
55
65
|
export { BsCarouselTracker } from "./components/bs-carousel/bs-carousel";
|
|
56
66
|
export { BsCheckboxSize } from "./components/bs-checkbox/bs-checkbox";
|
|
@@ -60,16 +70,23 @@ export { BsChipInformativeColor, BsChipInformativeSize } from "./components/bs-c
|
|
|
60
70
|
export { BsChipInputSize } from "./components/bs-chip/bs-chip-input/bs-chip-input";
|
|
61
71
|
export { BsComposerState, BsComposerVariant } from "./components/bs-composer/bs-composer";
|
|
62
72
|
export { BsComposerStatusBannerType } from "./components/bs-composer-status-banner/bs-composer-status-banner";
|
|
73
|
+
export { BsCookieCategory, BsCookieChoices, BsCookieConsentType } from "./components/bs-cookie-consent/bs-cookie-consent";
|
|
63
74
|
export { BsDataTableColumn, BsDataTableRow } from "./components/bs-data-table/bs-data-table";
|
|
64
75
|
export { BsDatepickerChange } from "./components/bs-datepicker/bs-datepicker";
|
|
65
76
|
export { BsDialogSize } from "./components/bs-dialog/bs-dialog";
|
|
77
|
+
export { BsErrorPageType } from "./components/bs-error-page/bs-error-page";
|
|
66
78
|
export { BsFileUploadDirection } from "./components/bs-file-upload/bs-file-upload";
|
|
67
79
|
export { BsFileUploadItemState } from "./components/bs-file-upload-item/bs-file-upload-item";
|
|
68
80
|
export { BsIconButtonSize, BsIconButtonVariant } from "./components/bs-button/bs-icon-button/bs-icon-button";
|
|
81
|
+
export { BsIconTileIntent, BsIconTileSize } from "./components/bs-icon-tile/bs-icon-tile";
|
|
69
82
|
export { BsLogoBackground, BsLogoVariant } from "./components/bs-logo/bs-logo";
|
|
70
83
|
export { BsNavigationHeaderAlignment } from "./components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header";
|
|
84
|
+
export { BsOnboardingChecklistType, BsOnboardingLauncherLayout, BsOnboardingStep } from "./components/bs-onboarding-checklist/bs-onboarding-checklist";
|
|
85
|
+
export { BsProductTourDirection, BsProductTourType } from "./components/bs-product-tour/bs-product-tour";
|
|
71
86
|
export { BsProgressSize, BsProgressStrokeWidth, BsProgressType } from "./components/bs-progress/bs-progress";
|
|
72
87
|
export { BsProgressLinearSize, BsProgressLinearType } from "./components/bs-progress-linear/bs-progress-linear";
|
|
88
|
+
export { BsQrCodeSize, BsQrCodeState, BsQrCodeType } from "./components/bs-qr-code/bs-qr-code";
|
|
89
|
+
export { BsSessionTimeoutAlternative, BsSessionTimeoutType } from "./components/bs-session-timeout/bs-session-timeout";
|
|
73
90
|
export { BsSliderType } from "./components/bs-slider/bs-slider";
|
|
74
91
|
export { BsSnackbarVariant } from "./components/bs-snackbar/bs-snackbar";
|
|
75
92
|
export { BsStepperDirection } from "./components/bs-stepper/bs-stepper-step/bs-stepper-step";
|
|
@@ -79,6 +96,9 @@ export { BsTabIconPosition } from "./components/bs-tab/bs-tab/bs-tab";
|
|
|
79
96
|
export { BsTabsOrientation, BsTabsType } from "./components/bs-tab/bs-tabs/bs-tabs";
|
|
80
97
|
export { BsTimepickerChange } from "./components/bs-timepicker/bs-timepicker";
|
|
81
98
|
export { BsToastState } from "./components/bs-toast/bs-toast";
|
|
99
|
+
export { BsWhatsNewFilter, BsWhatsNewItem, BsWhatsNewType } from "./components/bs-whats-new/bs-whats-new";
|
|
100
|
+
export { BsWhatsNewEntryTagColor } from "./components/bs-whats-new-entry/bs-whats-new-entry";
|
|
101
|
+
export { BsWhatsNewEntryTagColor as BsWhatsNewEntryTagColor1 } from "./components/bs-whats-new-entry/bs-whats-new-entry";
|
|
82
102
|
export namespace Components {
|
|
83
103
|
/**
|
|
84
104
|
* A single collapsible section -- a clickable header (optional leading icon, label, trailing
|
|
@@ -376,7 +396,7 @@ export namespace Components {
|
|
|
376
396
|
*/
|
|
377
397
|
"current": boolean;
|
|
378
398
|
/**
|
|
379
|
-
* Destination for a non-current crumb. Ignored when `current` is true -- the current page is never a link, even if `href` is set (see the class JSDoc).
|
|
399
|
+
* Destination for a non-current crumb. Ignored when `current` is true -- the current page is never a link, even if `href` is set (see the class JSDoc). A non-current crumb **without** `href` renders as plain text that looks identical to a link crumb at rest (only link crumbs get the hover/focus styles), so give every non-current crumb an `href` unless it is deliberately not navigable.
|
|
380
400
|
*/
|
|
381
401
|
"href"?: string;
|
|
382
402
|
/**
|
|
@@ -472,6 +492,9 @@ export namespace Components {
|
|
|
472
492
|
* - `error` purely for visual emphasis — it signals a destructive action to the user, so reserve
|
|
473
493
|
* it for actions that actually delete/revoke/undo something.
|
|
474
494
|
* @prop --bs-button-radius - Corner radius. Aliased to `--bs-border-radius-100` by default.
|
|
495
|
+
* @prop --bs-button-padding-x-sm - Left/right padding of a label-only button at `size="sm"`. Aliased to `--bs-spacing-300`.
|
|
496
|
+
* @prop --bs-button-width - Width of the button. `auto` by default (fits its content); set `100%` for a full-width button, e.g. `bs-button { --bs-button-width: 100%; }`.
|
|
497
|
+
* @prop --bs-button-subtle-color - Label/icon colour, `variant="subtle"`. Aliased to `--bs-color-neutral-default`; set it to `var(--bs-text-action)` for a blue text button.
|
|
475
498
|
* @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
|
|
476
499
|
* @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
|
|
477
500
|
* @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
|
|
@@ -1178,6 +1201,103 @@ export namespace Components {
|
|
|
1178
1201
|
*/
|
|
1179
1202
|
"type": BsComposerStatusBannerType;
|
|
1180
1203
|
}
|
|
1204
|
+
/**
|
|
1205
|
+
* A cookie consent prompt in four forms, matching the Figma "Cookie consent" component:
|
|
1206
|
+
* - `banner` -- a wide bar: icon, heading, text, policy link, and Customise / Reject optional / Accept
|
|
1207
|
+
* all. Stacks into a column on narrow containers (its own width, not the viewport's).
|
|
1208
|
+
* - `card` -- the compact version of the same question, in a card.
|
|
1209
|
+
* - `preferences` -- the detailed dialog: one row per cookie category with a switch (strictly
|
|
1210
|
+
* necessary is "Always on"), an expandable list of the cookies in each, and Reject optional /
|
|
1211
|
+
* Accept all / Save choices.
|
|
1212
|
+
* - `saved` -- a dark confirmation bar ("Cookie choices saved") with a Change action.
|
|
1213
|
+
* The component only collects the choice. It doesn't set, read or delete cookies, remember that the
|
|
1214
|
+
* user answered, or decide when to show itself: your app does that from the events, and swaps `type`
|
|
1215
|
+
* (e.g. `banner` -> `preferences` on `bsCustomise`, `preferences` -> `saved` on `bsSave`).
|
|
1216
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions),
|
|
1217
|
+
* `bs-switch` (the category switches), `bs-chip-informative` (the "Always on" badge), `bs-icon-button`
|
|
1218
|
+
* (the close button), `bs-snackbar` (the saved confirmation).
|
|
1219
|
+
* ## When to use
|
|
1220
|
+
* - Asking for consent to optional cookies or similar tracking, as the law of your market requires.
|
|
1221
|
+
* ## When not to use
|
|
1222
|
+
* - Telling people about necessary cookies only -- that needs no consent prompt.
|
|
1223
|
+
* ## Fair choice
|
|
1224
|
+
* "Reject optional" has the same prominence as "Accept all" (same size, both always visible). Keep it
|
|
1225
|
+
* that way: a prompt that makes refusing harder than accepting isn't valid consent in most places.
|
|
1226
|
+
*/
|
|
1227
|
+
interface BsCookieConsent {
|
|
1228
|
+
/**
|
|
1229
|
+
* Label of the Accept all button.
|
|
1230
|
+
* @default 'Accept all'
|
|
1231
|
+
*/
|
|
1232
|
+
"acceptLabel": string;
|
|
1233
|
+
/**
|
|
1234
|
+
* Text of the badge on required categories (`preferences`).
|
|
1235
|
+
* @default 'Always on'
|
|
1236
|
+
*/
|
|
1237
|
+
"alwaysOnLabel": string;
|
|
1238
|
+
/**
|
|
1239
|
+
* The categories in the preferences dialog (`preferences`): `[{ id, label, description?, required?, enabled?, cookies? }]`. Defaults to Strictly necessary, Preferences, Analytics and Marketing. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
1240
|
+
* @default [ { id: 'necessary', label: 'Strictly necessary', description: 'Needed for sign-in, security and to keep the service running. These cannot be turned off.', required: true, cookies: [ 'Session cookie — keeps you signed in as you move between pages.', 'Security cookie — helps prevent fraud and unauthorized access.', 'Consent cookie — remembers your cookie consent choices.', ], }, { id: 'preferences', label: 'Preferences', description: 'Remember your language, theme and table layouts on this device.', enabled: true }, { id: 'analytics', label: 'Analytics', description: 'Help us understand which features are used so we can improve them. Data is anonymised.' }, { id: 'marketing', label: 'Marketing', description: 'Show relevant products on other websites.' }, ]
|
|
1241
|
+
*/
|
|
1242
|
+
"categories": BsCookieCategory[];
|
|
1243
|
+
/**
|
|
1244
|
+
* Label of the action on the confirmation (`saved`).
|
|
1245
|
+
* @default 'Change'
|
|
1246
|
+
*/
|
|
1247
|
+
"changeLabel": string;
|
|
1248
|
+
/**
|
|
1249
|
+
* Accessible name of the close button (`preferences`).
|
|
1250
|
+
* @default 'Close'
|
|
1251
|
+
*/
|
|
1252
|
+
"closeLabel": string;
|
|
1253
|
+
/**
|
|
1254
|
+
* Label of the Customise button.
|
|
1255
|
+
* @default 'Customise'
|
|
1256
|
+
*/
|
|
1257
|
+
"customiseLabel": string;
|
|
1258
|
+
/**
|
|
1259
|
+
* Paragraph under the heading (the message, for `saved`). Defaults per `type`.
|
|
1260
|
+
*/
|
|
1261
|
+
"description"?: string;
|
|
1262
|
+
/**
|
|
1263
|
+
* Heading. Defaults per `type`.
|
|
1264
|
+
*/
|
|
1265
|
+
"heading"?: string;
|
|
1266
|
+
/**
|
|
1267
|
+
* HTML heading level, 1-6.
|
|
1268
|
+
* @default 2
|
|
1269
|
+
*/
|
|
1270
|
+
"headingLevel": number;
|
|
1271
|
+
/**
|
|
1272
|
+
* Text of the policy link.
|
|
1273
|
+
* @default 'Read the cookie policy'
|
|
1274
|
+
*/
|
|
1275
|
+
"policyLabel": string;
|
|
1276
|
+
/**
|
|
1277
|
+
* URL of your cookie policy. The "Read the cookie policy" link is only shown when this is set.
|
|
1278
|
+
*/
|
|
1279
|
+
"policyUrl"?: string;
|
|
1280
|
+
/**
|
|
1281
|
+
* Label of the Reject optional button.
|
|
1282
|
+
* @default 'Reject optional'
|
|
1283
|
+
*/
|
|
1284
|
+
"rejectLabel": string;
|
|
1285
|
+
/**
|
|
1286
|
+
* Label of the Save choices button (`preferences`).
|
|
1287
|
+
* @default 'Save choices'
|
|
1288
|
+
*/
|
|
1289
|
+
"saveLabel": string;
|
|
1290
|
+
/**
|
|
1291
|
+
* Label of a category's disclosure; `{count}` is replaced by the number of cookies.
|
|
1292
|
+
* @default 'See {count} cookies'
|
|
1293
|
+
*/
|
|
1294
|
+
"seeCookiesLabel": string;
|
|
1295
|
+
/**
|
|
1296
|
+
* Which form: `banner`, `card`, `preferences` or `saved`.
|
|
1297
|
+
* @default 'banner'
|
|
1298
|
+
*/
|
|
1299
|
+
"type": BsCookieConsentType;
|
|
1300
|
+
}
|
|
1181
1301
|
/**
|
|
1182
1302
|
* A sortable, optionally row-selectable table for tabular data.
|
|
1183
1303
|
* `columns`, `rows`, and `cellRenderer` are JS-property-only — HTML attributes can only carry
|
|
@@ -1226,6 +1346,7 @@ export namespace Components {
|
|
|
1226
1346
|
* ISO timestamps -- so a date can't shift by a day across time zones.
|
|
1227
1347
|
* The calendar renders inline at a fixed width; to show it as a popover, put it inside a
|
|
1228
1348
|
* `bs-menu` or your own overlay.
|
|
1349
|
+
* **Built from:** `bs-card` (the surface), `bs-input` (the month/year dropdown triggers and the range date fields), `bs-menu` and `bs-menu-item` (the month/year lists).
|
|
1229
1350
|
* ## When to use
|
|
1230
1351
|
* - Picking a date where seeing the surrounding days of the week/month helps (a booking, a
|
|
1231
1352
|
* deadline, a report window).
|
|
@@ -1345,6 +1466,56 @@ export namespace Components {
|
|
|
1345
1466
|
*/
|
|
1346
1467
|
"size": BsDialogSize;
|
|
1347
1468
|
}
|
|
1469
|
+
/**
|
|
1470
|
+
* A full-block page for when the user can't get to what they asked for: page not found (404), a server
|
|
1471
|
+
* error (500), no access (403), planned maintenance, or no internet connection. Matches the Figma
|
|
1472
|
+
* "Error page" component's five states.
|
|
1473
|
+
* Each `type` brings its own icon, tint, code label ("404", "Maintenance", ...), heading, paragraph and
|
|
1474
|
+
* buttons, all overridable by props. The component doesn't navigate or retry anything: it emits
|
|
1475
|
+
* `bsPrimary` / `bsSecondary` and your app decides what "Go to Overview" or "Try again" does.
|
|
1476
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions).
|
|
1477
|
+
* ## When to use
|
|
1478
|
+
* - Replacing the content of a page or panel that can't be shown, with a clear way forward.
|
|
1479
|
+
* ## When not to use
|
|
1480
|
+
* - A problem with one field or one action -- use inline validation or a `bs-snackbar`.
|
|
1481
|
+
* - A blocking question the user must answer -- use `bs-dialog`.
|
|
1482
|
+
*/
|
|
1483
|
+
interface BsErrorPage {
|
|
1484
|
+
/**
|
|
1485
|
+
* The small label under the icon, e.g. "404". Defaults per `type` ("404", "500", "403", "Maintenance", "Offline"). Set it to an empty string to hide it.
|
|
1486
|
+
*/
|
|
1487
|
+
"code"?: string;
|
|
1488
|
+
/**
|
|
1489
|
+
* Paragraph under the heading. Defaults per `type`.
|
|
1490
|
+
*/
|
|
1491
|
+
"description"?: string;
|
|
1492
|
+
/**
|
|
1493
|
+
* Heading. Defaults per `type`.
|
|
1494
|
+
*/
|
|
1495
|
+
"heading"?: string;
|
|
1496
|
+
/**
|
|
1497
|
+
* HTML heading level for the heading, 1-6. Use 1 when this replaces the whole page; lower when it sits inside a section that already has a heading above it.
|
|
1498
|
+
* @default 1
|
|
1499
|
+
*/
|
|
1500
|
+
"headingLevel": number;
|
|
1501
|
+
/**
|
|
1502
|
+
* Label of the primary button. Defaults per `type`. Set it to an empty string to hide it.
|
|
1503
|
+
*/
|
|
1504
|
+
"primaryLabel"?: string;
|
|
1505
|
+
/**
|
|
1506
|
+
* A small reference line under the buttons, e.g. `"Error ID: 7f3c-21a9 · 30.09.2026 10:42"`, for support to look up. Nothing is shown when empty.
|
|
1507
|
+
*/
|
|
1508
|
+
"reference"?: string;
|
|
1509
|
+
/**
|
|
1510
|
+
* Label of the secondary button. Defaults per `type` (only `not-found`, `server-error` and `no-access` have one). Set it to an empty string to hide it.
|
|
1511
|
+
*/
|
|
1512
|
+
"secondaryLabel"?: string;
|
|
1513
|
+
/**
|
|
1514
|
+
* Which error: `not-found` (404), `server-error` (500), `no-access` (403), `maintenance` or `offline`.
|
|
1515
|
+
* @default 'not-found'
|
|
1516
|
+
*/
|
|
1517
|
+
"type": BsErrorPageType;
|
|
1518
|
+
}
|
|
1348
1519
|
/**
|
|
1349
1520
|
* A file dropzone: drag files onto it, or press "Browse file" to open the file picker. It reports
|
|
1350
1521
|
* the chosen files and does nothing else -- the consuming app owns the upload itself and shows its
|
|
@@ -1495,6 +1666,36 @@ export namespace Components {
|
|
|
1495
1666
|
*/
|
|
1496
1667
|
"variant": BsIconButtonVariant;
|
|
1497
1668
|
}
|
|
1669
|
+
/**
|
|
1670
|
+
* A small rounded square holding an icon, tinted by intent -- the visual marker next to a status,
|
|
1671
|
+
* a list item or a feature. Matches the Figma "Icon tile" component (3 sizes x 6 intents).
|
|
1672
|
+
* Each intent shows a default glyph (house, check, warning, cross, grid, info); put your own icon in
|
|
1673
|
+
* the default slot to replace it. A slotted icon is sized to the tile (12/16/24px) and coloured
|
|
1674
|
+
* with the intent's icon colour, as long as it draws with `currentColor`.
|
|
1675
|
+
* The tile is decorative by default (hidden from assistive tech). Don't rely on the colour or glyph
|
|
1676
|
+
* alone to convey status: slot text into `text` (it sits beside the square, in
|
|
1677
|
+
* `--bs-icon-tile-text-color`), or set `label` to give the tile its own accessible name.
|
|
1678
|
+
* ## When to use
|
|
1679
|
+
* - Marking a row, card or message with a status or category icon.
|
|
1680
|
+
* ## When not to use
|
|
1681
|
+
* - As a button -- it isn't interactive. Use `bs-icon-button`.
|
|
1682
|
+
*/
|
|
1683
|
+
interface BsIconTile {
|
|
1684
|
+
/**
|
|
1685
|
+
* Colour and default glyph. `brand` uses the brand colours; `information` the info palette.
|
|
1686
|
+
* @default 'default'
|
|
1687
|
+
*/
|
|
1688
|
+
"intent": BsIconTileIntent;
|
|
1689
|
+
/**
|
|
1690
|
+
* Accessible name. When set, the tile is exposed as an image with this name; when empty it is decorative and hidden from assistive tech.
|
|
1691
|
+
*/
|
|
1692
|
+
"label"?: string;
|
|
1693
|
+
/**
|
|
1694
|
+
* Tile size: `sm` 24px, `md` 32px, `lg` 48px.
|
|
1695
|
+
* @default 'sm'
|
|
1696
|
+
*/
|
|
1697
|
+
"size": BsIconTileSize;
|
|
1698
|
+
}
|
|
1498
1699
|
/**
|
|
1499
1700
|
* A pill-shaped tab button -- an optional leading icon plus a text label, rendered as a real
|
|
1500
1701
|
* `<button>` so it participates correctly in tab order and native click/keyboard activation.
|
|
@@ -1547,6 +1748,7 @@ export namespace Components {
|
|
|
1547
1748
|
* range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
|
|
1548
1749
|
* select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
|
|
1549
1750
|
* share the same label/description/error/icon-slot chrome.
|
|
1751
|
+
* Built from: `bs-menu`/`bs-menu-item` (`type="dropdown"`) and `bs-chip-informative` + `bs-icon-button` (`type="chip"`).
|
|
1550
1752
|
* ## When to use
|
|
1551
1753
|
* - Collecting a single line of free-text, email, password, or numeric input.
|
|
1552
1754
|
* - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
|
|
@@ -1926,6 +2128,119 @@ export namespace Components {
|
|
|
1926
2128
|
*/
|
|
1927
2129
|
"skipToContentLabel": string;
|
|
1928
2130
|
}
|
|
2131
|
+
/**
|
|
2132
|
+
* A "get set up" checklist, in four forms that matching the Figma "Onboarding checklist" component:
|
|
2133
|
+
* - `panel` -- the full list: heading, progress, every step with a status icon, and the current step
|
|
2134
|
+
* expanded with its description, time estimate, Skip for now and a primary action.
|
|
2135
|
+
* - `dashboard` -- a wide card for the top of a page: summary and progress on the left, the current step
|
|
2136
|
+
* and the next ones as small cards on the right, and a "See all steps" link.
|
|
2137
|
+
* - `launcher` -- a small always-visible chip that reopens the checklist; three layouts (`icon`, `ring`,
|
|
2138
|
+
* `inline`).
|
|
2139
|
+
* - `completion` -- the "You're all set" card once every step is done.
|
|
2140
|
+
* The component shows progress and reports what the user pressed. It doesn't know what a step means,
|
|
2141
|
+
* run it, or remember anything: your app owns the steps (`steps`, each with `done`), marks them done, and
|
|
2142
|
+
* decides which form to show.
|
|
2143
|
+
* **Built from:** `bs-card` (every surface), `bs-icon-tile` (the icons), `bs-button` (the actions),
|
|
2144
|
+
* `bs-icon-button` (the close button), `bs-progress-linear` (the progress bar), `bs-progress` (the launcher
|
|
2145
|
+
* ring).
|
|
2146
|
+
* ## When to use
|
|
2147
|
+
* - Guiding a new account or user through a short list of setup tasks they can do in any order or later.
|
|
2148
|
+
* ## When not to use
|
|
2149
|
+
* - A strict, linear flow where each step needs the one before -- use `bs-stepper`.
|
|
2150
|
+
* - A tour of the interface itself -- use `bs-product-tour`.
|
|
2151
|
+
* ## Accessibility
|
|
2152
|
+
* Steps are an ordered list; the current one has `aria-current="step"`, and each step carries a visually
|
|
2153
|
+
* hidden "Done" / "Not done". The progress bar is named with the progress text.
|
|
2154
|
+
*/
|
|
2155
|
+
interface BsOnboardingChecklist {
|
|
2156
|
+
/**
|
|
2157
|
+
* Caption on the cards of steps that come after the current one (`dashboard`).
|
|
2158
|
+
* @default 'After the step before'
|
|
2159
|
+
*/
|
|
2160
|
+
"afterLabel": string;
|
|
2161
|
+
/**
|
|
2162
|
+
* Shows a close button (`panel`, `dashboard`).
|
|
2163
|
+
* @default false
|
|
2164
|
+
*/
|
|
2165
|
+
"closable": boolean;
|
|
2166
|
+
/**
|
|
2167
|
+
* Accessible name of the close button.
|
|
2168
|
+
* @default 'Close'
|
|
2169
|
+
*/
|
|
2170
|
+
"closeLabel": string;
|
|
2171
|
+
/**
|
|
2172
|
+
* Paragraph under the heading. Defaults to a summary of the progress for `dashboard`. Nothing for `launcher`.
|
|
2173
|
+
*/
|
|
2174
|
+
"description"?: string;
|
|
2175
|
+
/**
|
|
2176
|
+
* Label of the main button (`completion`).
|
|
2177
|
+
* @default 'Go to dashboard'
|
|
2178
|
+
*/
|
|
2179
|
+
"doneLabel": string;
|
|
2180
|
+
/**
|
|
2181
|
+
* Heading. Defaults per `type` ("Get started", "Finish setting up", "Setup", "You're all set").
|
|
2182
|
+
*/
|
|
2183
|
+
"heading"?: string;
|
|
2184
|
+
/**
|
|
2185
|
+
* HTML heading level, 1-6.
|
|
2186
|
+
* @default 2
|
|
2187
|
+
*/
|
|
2188
|
+
"headingLevel": number;
|
|
2189
|
+
/**
|
|
2190
|
+
* Label of the secondary button (`completion`).
|
|
2191
|
+
* @default 'Hide checklist'
|
|
2192
|
+
*/
|
|
2193
|
+
"hideLabel": string;
|
|
2194
|
+
/**
|
|
2195
|
+
* Layout of the `launcher`: `icon` (tile, title, progress text), `ring` (circular progress, title, text) or `inline` (tile, title and text on one line, with a chevron).
|
|
2196
|
+
* @default 'icon'
|
|
2197
|
+
*/
|
|
2198
|
+
"launcherLayout": BsOnboardingLauncherLayout;
|
|
2199
|
+
/**
|
|
2200
|
+
* Template of the progress label; `{done}` and `{total}` are replaced.
|
|
2201
|
+
* @default '{done} of {total} done'
|
|
2202
|
+
*/
|
|
2203
|
+
"progressLabel": string;
|
|
2204
|
+
/**
|
|
2205
|
+
* Text under the launcher title. Defaults to "N% complete".
|
|
2206
|
+
*/
|
|
2207
|
+
"progressText"?: string;
|
|
2208
|
+
/**
|
|
2209
|
+
* Label of the link that opens the whole checklist (`dashboard`).
|
|
2210
|
+
* @default 'See all steps'
|
|
2211
|
+
*/
|
|
2212
|
+
"seeAllLabel": string;
|
|
2213
|
+
/**
|
|
2214
|
+
* Label of "Skip for now" on the current step (`panel`).
|
|
2215
|
+
* @default 'Skip for now'
|
|
2216
|
+
*/
|
|
2217
|
+
"skipLabel": string;
|
|
2218
|
+
/**
|
|
2219
|
+
* Label of the Start link on the current step's card (`dashboard`).
|
|
2220
|
+
* @default 'Start'
|
|
2221
|
+
*/
|
|
2222
|
+
"startLabel": string;
|
|
2223
|
+
/**
|
|
2224
|
+
* Visually hidden text on a finished step.
|
|
2225
|
+
* @default 'Done'
|
|
2226
|
+
*/
|
|
2227
|
+
"statusDoneLabel": string;
|
|
2228
|
+
/**
|
|
2229
|
+
* Visually hidden text on an unfinished step.
|
|
2230
|
+
* @default 'Not done'
|
|
2231
|
+
*/
|
|
2232
|
+
"statusTodoLabel": string;
|
|
2233
|
+
/**
|
|
2234
|
+
* The steps: `[{ id, label, description?, done?, estimate?, actionLabel?, skippable? }]`. The first step that isn't `done` is the current one. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
2235
|
+
* @default []
|
|
2236
|
+
*/
|
|
2237
|
+
"steps": BsOnboardingStep[];
|
|
2238
|
+
/**
|
|
2239
|
+
* Which form: `panel`, `dashboard`, `launcher` or `completion`.
|
|
2240
|
+
* @default 'panel'
|
|
2241
|
+
*/
|
|
2242
|
+
"type": BsOnboardingChecklistType;
|
|
2243
|
+
}
|
|
1929
2244
|
/**
|
|
1930
2245
|
* A numbered page control -- previous/next chevrons, page-number buttons, and `...` overflow for
|
|
1931
2246
|
* large page counts. Matches the Figma "Pagination" component's "Default" type (the classic
|
|
@@ -1968,6 +2283,76 @@ export namespace Components {
|
|
|
1968
2283
|
*/
|
|
1969
2284
|
"totalPages": number;
|
|
1970
2285
|
}
|
|
2286
|
+
/**
|
|
2287
|
+
* One step of a product tour: a centred **welcome** or **success** card with an art tile, or a
|
|
2288
|
+
* **pointer** card -- a compact step with a close button, a "1 of 3" progress label and Back/Next
|
|
2289
|
+
* actions -- whose arrow points at the thing it describes. Matches the Figma "Product Tour" and
|
|
2290
|
+
* "Pointer" components.
|
|
2291
|
+
* This is the step *card* only. It doesn't run a tour: it has no overlay, no spotlight, no
|
|
2292
|
+
* positioning against a target and no step sequencing. Your code decides which step is showing,
|
|
2293
|
+
* places the card next to its target (the arrow can sit on any of 12 positions via `direction`),
|
|
2294
|
+
* and moves on from `bsPrimary`/`bsSecondary`.
|
|
2295
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the art tile), `bs-button` (the actions), `bs-icon-button` (the close button).
|
|
2296
|
+
* ## When to use
|
|
2297
|
+
* - Introducing a feature on first run (`welcome`), confirming a finished tour (`success`), or
|
|
2298
|
+
* walking through the UI one pointer at a time (`pointer`).
|
|
2299
|
+
* ## When not to use
|
|
2300
|
+
* - A blocking decision or form -- use `bs-dialog`.
|
|
2301
|
+
* - A hint on hover or focus -- use `bs-tooltip`.
|
|
2302
|
+
*/
|
|
2303
|
+
interface BsProductTour {
|
|
2304
|
+
/**
|
|
2305
|
+
* Shows a close button in the corner (`pointer`).
|
|
2306
|
+
* @default false
|
|
2307
|
+
*/
|
|
2308
|
+
"closable": boolean;
|
|
2309
|
+
/**
|
|
2310
|
+
* Accessible name of the close button.
|
|
2311
|
+
* @default 'Close'
|
|
2312
|
+
*/
|
|
2313
|
+
"closeLabel": string;
|
|
2314
|
+
/**
|
|
2315
|
+
* Paragraph under the heading.
|
|
2316
|
+
*/
|
|
2317
|
+
"description"?: string;
|
|
2318
|
+
/**
|
|
2319
|
+
* Where the arrow sits (`pointer` only): the side of the card it's on, and for corners/edges which end it's near, e.g. `top-left` = on the top edge, near the left corner.
|
|
2320
|
+
* @default 'top'
|
|
2321
|
+
*/
|
|
2322
|
+
"direction": BsProductTourDirection;
|
|
2323
|
+
/**
|
|
2324
|
+
* Heading.
|
|
2325
|
+
*/
|
|
2326
|
+
"heading"?: string;
|
|
2327
|
+
/**
|
|
2328
|
+
* Label of the primary button. Defaults to "Start" (`welcome`), "Done" (`success`) or "Next" (`pointer`). Set it to an empty string to hide the button.
|
|
2329
|
+
*/
|
|
2330
|
+
"primaryLabel"?: string;
|
|
2331
|
+
/**
|
|
2332
|
+
* Template of the progress label; `{step}` and `{total}` are replaced.
|
|
2333
|
+
* @default '{step} of {total}'
|
|
2334
|
+
*/
|
|
2335
|
+
"progressLabel": string;
|
|
2336
|
+
/**
|
|
2337
|
+
* Label of the secondary button. Defaults to "Later" (`welcome`) or "Back" (`pointer`); none for `success`. Set it to an empty string to hide the button.
|
|
2338
|
+
*/
|
|
2339
|
+
"secondaryLabel"?: string;
|
|
2340
|
+
/**
|
|
2341
|
+
* Current step, 1-based (`pointer`). Used with `total` for the progress label.
|
|
2342
|
+
* @default 1
|
|
2343
|
+
*/
|
|
2344
|
+
"step": number;
|
|
2345
|
+
/**
|
|
2346
|
+
* Number of steps (`pointer`). The progress label is hidden when this is 0.
|
|
2347
|
+
* @default 0
|
|
2348
|
+
*/
|
|
2349
|
+
"total": number;
|
|
2350
|
+
/**
|
|
2351
|
+
* `welcome` and `success` are centred cards with an art tile; `pointer` is the compact step with an arrow.
|
|
2352
|
+
* @default 'welcome'
|
|
2353
|
+
*/
|
|
2354
|
+
"type": BsProductTourType;
|
|
2355
|
+
}
|
|
1971
2356
|
/**
|
|
1972
2357
|
* A circular progress indicator -- either a static ring showing a percentage sweep
|
|
1973
2358
|
* (`type="determinate"`) or a continuously spinning ring signaling in-progress work with no known
|
|
@@ -2054,6 +2439,143 @@ export namespace Components {
|
|
|
2054
2439
|
*/
|
|
2055
2440
|
"value": number;
|
|
2056
2441
|
}
|
|
2442
|
+
/**
|
|
2443
|
+
* A block for sharing a link or taking a payment by QR code: a heading, the code on a white quiet
|
|
2444
|
+
* zone, the URL (or the amount, for payments) as text, an optional expiry chip, and Download and
|
|
2445
|
+
* Copy link actions. Matches the Figma "QR code" component (3 sizes x 2 types x 5 states, plus the
|
|
2446
|
+
* "with logo" variant).
|
|
2447
|
+
* **This component draws a code, it doesn't encode one.** Generate the real code in your product
|
|
2448
|
+
* with a QR library and hand it over either as a `matrix` (a square `boolean[][]`, `true` = dark
|
|
2449
|
+
* module) or as your own element in the `code` slot (an `<img>`, `<svg>` or `<canvas>`).
|
|
2450
|
+
* The code always sits on a white quiet zone with black modules, in dark mode too -- scanners need
|
|
2451
|
+
* the contrast.
|
|
2452
|
+
* **Built from:** `bs-card` (the surface), `bs-button` (Download, Copy link, Retry, Refresh), `bs-progress` (the loading spinner), `bs-chip-informative` (the expiry chip), `bs-icon-button` (the close button).
|
|
2453
|
+
* ## When to use
|
|
2454
|
+
* - Sharing a link to an order, document or page that someone will open on a phone.
|
|
2455
|
+
* - Taking a payment with an amount (`type="payment"`).
|
|
2456
|
+
* ## When not to use
|
|
2457
|
+
* - Encoding long text blobs -- a QR code that dense is hard to scan at the sizes here.
|
|
2458
|
+
* ## States
|
|
2459
|
+
* `loading` (generating the code), `error` (couldn't generate it; Retry), `expired` (Refresh) and
|
|
2460
|
+
* `scanned` (done: "Scanned", or "Payment received" for payments). Download and Copy link are disabled
|
|
2461
|
+
* in every state but `default`, and hidden once `scanned`.
|
|
2462
|
+
*/
|
|
2463
|
+
interface BsQrCode {
|
|
2464
|
+
/**
|
|
2465
|
+
* The amount shown under the code (`type="payment"`), e.g. `"148,00 kr"`.
|
|
2466
|
+
*/
|
|
2467
|
+
"amount"?: string;
|
|
2468
|
+
/**
|
|
2469
|
+
* Small label above the amount.
|
|
2470
|
+
* @default 'Total'
|
|
2471
|
+
*/
|
|
2472
|
+
"amountLabel": string;
|
|
2473
|
+
/**
|
|
2474
|
+
* Shows a close button in the corner.
|
|
2475
|
+
* @default false
|
|
2476
|
+
*/
|
|
2477
|
+
"closable": boolean;
|
|
2478
|
+
/**
|
|
2479
|
+
* Accessible name of the close button.
|
|
2480
|
+
* @default 'Close'
|
|
2481
|
+
*/
|
|
2482
|
+
"closeLabel": string;
|
|
2483
|
+
/**
|
|
2484
|
+
* Accessible name for the code image, e.g. `"QR code for order SO-10482"`. Applies to `matrix`; give a slotted `<img>` its own `alt`.
|
|
2485
|
+
* @default 'QR code'
|
|
2486
|
+
*/
|
|
2487
|
+
"codeLabel": string;
|
|
2488
|
+
/**
|
|
2489
|
+
* Label of the Copy link button.
|
|
2490
|
+
* @default 'Copy link'
|
|
2491
|
+
*/
|
|
2492
|
+
"copyLabel": string;
|
|
2493
|
+
/**
|
|
2494
|
+
* Line under the heading.
|
|
2495
|
+
*/
|
|
2496
|
+
"description"?: string;
|
|
2497
|
+
/**
|
|
2498
|
+
* Label of the Download button.
|
|
2499
|
+
* @default 'Download PNG'
|
|
2500
|
+
*/
|
|
2501
|
+
"downloadLabel": string;
|
|
2502
|
+
/**
|
|
2503
|
+
* Text in the `error` overlay.
|
|
2504
|
+
* @default "Couldn't load code"
|
|
2505
|
+
*/
|
|
2506
|
+
"errorLabel": string;
|
|
2507
|
+
/**
|
|
2508
|
+
* Text in the `expired` overlay.
|
|
2509
|
+
* @default 'Code expired'
|
|
2510
|
+
*/
|
|
2511
|
+
"expiredLabel": string;
|
|
2512
|
+
/**
|
|
2513
|
+
* Text of the expiry chip, e.g. `"Expires in 04:59"`. No chip when empty.
|
|
2514
|
+
*/
|
|
2515
|
+
"expiry"?: string;
|
|
2516
|
+
/**
|
|
2517
|
+
* Heading text.
|
|
2518
|
+
* @default 'Share the order'
|
|
2519
|
+
*/
|
|
2520
|
+
"heading": string;
|
|
2521
|
+
/**
|
|
2522
|
+
* Hides the Download and Copy link row.
|
|
2523
|
+
* @default false
|
|
2524
|
+
*/
|
|
2525
|
+
"hideActions": boolean;
|
|
2526
|
+
/**
|
|
2527
|
+
* Hides the Copy link button.
|
|
2528
|
+
* @default false
|
|
2529
|
+
*/
|
|
2530
|
+
"hideCopy": boolean;
|
|
2531
|
+
/**
|
|
2532
|
+
* Hides the Download button.
|
|
2533
|
+
* @default false
|
|
2534
|
+
*/
|
|
2535
|
+
"hideDownload": boolean;
|
|
2536
|
+
/**
|
|
2537
|
+
* Text in the `loading` overlay.
|
|
2538
|
+
* @default 'Generating code'
|
|
2539
|
+
*/
|
|
2540
|
+
"loadingLabel": string;
|
|
2541
|
+
/**
|
|
2542
|
+
* The code as a square matrix of modules, `true` = dark. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule. Ignored when the `code` slot is used.
|
|
2543
|
+
*/
|
|
2544
|
+
"matrix"?: boolean[][];
|
|
2545
|
+
/**
|
|
2546
|
+
* Label of the Refresh button (`expired`).
|
|
2547
|
+
* @default 'Refresh'
|
|
2548
|
+
*/
|
|
2549
|
+
"refreshLabel": string;
|
|
2550
|
+
/**
|
|
2551
|
+
* Label of the Retry button (`error`).
|
|
2552
|
+
* @default 'Retry'
|
|
2553
|
+
*/
|
|
2554
|
+
"retryLabel": string;
|
|
2555
|
+
/**
|
|
2556
|
+
* Text in the `scanned` overlay. Defaults to "Payment received" for `type="payment"` and "Scanned" otherwise.
|
|
2557
|
+
*/
|
|
2558
|
+
"scannedLabel"?: string;
|
|
2559
|
+
/**
|
|
2560
|
+
* Card size: `sm`, `md` (default) or `lg`.
|
|
2561
|
+
* @default 'md'
|
|
2562
|
+
*/
|
|
2563
|
+
"size": BsQrCodeSize;
|
|
2564
|
+
/**
|
|
2565
|
+
* `default`, or one of the overlay states: `loading`, `error`, `expired`, `scanned`.
|
|
2566
|
+
* @default 'default'
|
|
2567
|
+
*/
|
|
2568
|
+
"state": BsQrCodeState;
|
|
2569
|
+
/**
|
|
2570
|
+
* `default` shows the URL under the code; `payment` shows the amount instead.
|
|
2571
|
+
* @default 'default'
|
|
2572
|
+
*/
|
|
2573
|
+
"type": BsQrCodeType;
|
|
2574
|
+
/**
|
|
2575
|
+
* The link shown as text under the code (`type="default"`), and copied by Copy link.
|
|
2576
|
+
*/
|
|
2577
|
+
"url"?: string;
|
|
2578
|
+
}
|
|
2057
2579
|
/**
|
|
2058
2580
|
* A single radio button with its label, for one mutually-exclusive choice within a group.
|
|
2059
2581
|
* ## When to use
|
|
@@ -2084,6 +2606,130 @@ export namespace Components {
|
|
|
2084
2606
|
*/
|
|
2085
2607
|
"value": string;
|
|
2086
2608
|
}
|
|
2609
|
+
/**
|
|
2610
|
+
* The three moments around an expiring session, as one card. Matches the Figma "Session timeout"
|
|
2611
|
+
* component's three types:
|
|
2612
|
+
* - `warning` -- "You'll be signed out soon": a live countdown with a draining bar, an optional
|
|
2613
|
+
* "your work is saved" note, and Sign out now / Stay signed in.
|
|
2614
|
+
* - `signed-out` -- "You've been signed out": who was signed in, with Sign in again and Use a different
|
|
2615
|
+
* account.
|
|
2616
|
+
* - `confirm-identity` -- "Confirm it's you": a fresh password check before a sensitive action, with
|
|
2617
|
+
* passkey / BankID alternatives and Cancel.
|
|
2618
|
+
* The component never signs anyone in or out. It shows the state and emits `bsPrimary`, `bsSecondary`,
|
|
2619
|
+
* `bsAlternative`, `bsCancel` and `bsExpire`; your app talks to the identity provider.
|
|
2620
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions),
|
|
2621
|
+
* `bs-progress-linear` (the countdown bar), `bs-avatar` (the signed-in account), `bs-input` (the
|
|
2622
|
+
* password field).
|
|
2623
|
+
* ## When to use
|
|
2624
|
+
* - Warning someone, before it happens, that an inactivity timeout is about to end their session.
|
|
2625
|
+
* - Telling someone their session ended, and letting them pick up where they left off.
|
|
2626
|
+
* - Asking for a fresh credential before a sensitive action.
|
|
2627
|
+
* ## When not to use
|
|
2628
|
+
* - A first-time sign-in page -- this assumes there was a session.
|
|
2629
|
+
* - Anything that is not about the session or the user's identity -- use `bs-dialog`.
|
|
2630
|
+
* ## Accessibility
|
|
2631
|
+
* The card is a labelled region. The countdown is a `timer` and is *not* announced every second; a polite
|
|
2632
|
+
* live region announces the time left at 60, 30 and 10 seconds instead. Wrap the card in your own modal
|
|
2633
|
+
* (`bs-dialog`) if the warning must trap focus.
|
|
2634
|
+
*/
|
|
2635
|
+
interface BsSessionTimeout {
|
|
2636
|
+
/**
|
|
2637
|
+
* Email of the account that was signed in (`signed-out`).
|
|
2638
|
+
*/
|
|
2639
|
+
"accountEmail"?: string;
|
|
2640
|
+
/**
|
|
2641
|
+
* Initials in the avatar (`signed-out`). Derived from `accountName` when not set.
|
|
2642
|
+
*/
|
|
2643
|
+
"accountInitials"?: string;
|
|
2644
|
+
/**
|
|
2645
|
+
* Name of the account that was signed in (`signed-out`).
|
|
2646
|
+
*/
|
|
2647
|
+
"accountName"?: string;
|
|
2648
|
+
/**
|
|
2649
|
+
* Other ways to confirm, shown as outlined buttons under the divider: `[{ id, label, icon? }]`. Defaults to a passkey and a BankID button. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule. Set `[]` to hide them.
|
|
2650
|
+
* @default [ { id: 'passkey', label: 'Use passkey', icon: 'fingerprint' }, { id: 'bankid', label: 'Use BankID', icon: 'key' }, ]
|
|
2651
|
+
*/
|
|
2652
|
+
"alternatives": BsSessionTimeoutAlternative[];
|
|
2653
|
+
/**
|
|
2654
|
+
* Label of the Cancel button (`confirm-identity`). Set to an empty string to hide it.
|
|
2655
|
+
* @default 'Cancel'
|
|
2656
|
+
*/
|
|
2657
|
+
"cancelLabel": string;
|
|
2658
|
+
/**
|
|
2659
|
+
* Count `secondsLeft` down once a second (`warning`), firing `bsExpire` at zero.
|
|
2660
|
+
* @default false
|
|
2661
|
+
*/
|
|
2662
|
+
"countdown": boolean;
|
|
2663
|
+
/**
|
|
2664
|
+
* Paragraph under the heading. Defaults per `type`.
|
|
2665
|
+
*/
|
|
2666
|
+
"description"?: string;
|
|
2667
|
+
/**
|
|
2668
|
+
* Label of the divider between the password and the alternatives.
|
|
2669
|
+
* @default 'or'
|
|
2670
|
+
*/
|
|
2671
|
+
"dividerLabel": string;
|
|
2672
|
+
/**
|
|
2673
|
+
* Heading. Defaults per `type`.
|
|
2674
|
+
*/
|
|
2675
|
+
"heading"?: string;
|
|
2676
|
+
/**
|
|
2677
|
+
* HTML heading level, 1-6.
|
|
2678
|
+
* @default 2
|
|
2679
|
+
*/
|
|
2680
|
+
"headingLevel": number;
|
|
2681
|
+
/**
|
|
2682
|
+
* Hides the icon tile.
|
|
2683
|
+
* @default false
|
|
2684
|
+
*/
|
|
2685
|
+
"hideIcon": boolean;
|
|
2686
|
+
/**
|
|
2687
|
+
* Error shown under the password field, e.g. after a wrong password.
|
|
2688
|
+
*/
|
|
2689
|
+
"passwordError"?: string;
|
|
2690
|
+
/**
|
|
2691
|
+
* Label of the password field.
|
|
2692
|
+
* @default 'Password'
|
|
2693
|
+
*/
|
|
2694
|
+
"passwordLabel": string;
|
|
2695
|
+
/**
|
|
2696
|
+
* Label of the primary button. Defaults per `type` ("Stay signed in", "Sign in again", "Confirm").
|
|
2697
|
+
*/
|
|
2698
|
+
"primaryLabel"?: string;
|
|
2699
|
+
/**
|
|
2700
|
+
* Note under the countdown, e.g. "Your draft of INV-2041 is saved automatically." Hidden when empty.
|
|
2701
|
+
*/
|
|
2702
|
+
"savedMessage"?: string;
|
|
2703
|
+
/**
|
|
2704
|
+
* Label of the secondary button. Defaults per `type` ("Sign out now", "Use a different account"); none for `confirm-identity`. Set to an empty string to hide it.
|
|
2705
|
+
*/
|
|
2706
|
+
"secondaryLabel"?: string;
|
|
2707
|
+
/**
|
|
2708
|
+
* Seconds left before the session ends (`warning`). Mutable: with `countdown` the component decrements it itself; otherwise drive it from your own timer.
|
|
2709
|
+
* @default 0
|
|
2710
|
+
*/
|
|
2711
|
+
"secondsLeft": number;
|
|
2712
|
+
/**
|
|
2713
|
+
* Text next to the time under a minute.
|
|
2714
|
+
* @default 'seconds left'
|
|
2715
|
+
*/
|
|
2716
|
+
"secondsLeftLabel": string;
|
|
2717
|
+
/**
|
|
2718
|
+
* Text next to the time while a minute or more is left.
|
|
2719
|
+
* @default 'minutes left'
|
|
2720
|
+
*/
|
|
2721
|
+
"timeLeftLabel": string;
|
|
2722
|
+
/**
|
|
2723
|
+
* Length of the warning window in seconds, for the bar: it shows `secondsLeft / totalSeconds`. Defaults to the `secondsLeft` it first had.
|
|
2724
|
+
* @default 0
|
|
2725
|
+
*/
|
|
2726
|
+
"totalSeconds": number;
|
|
2727
|
+
/**
|
|
2728
|
+
* Which moment: `warning`, `signed-out` or `confirm-identity`.
|
|
2729
|
+
* @default 'warning'
|
|
2730
|
+
*/
|
|
2731
|
+
"type": BsSessionTimeoutType;
|
|
2732
|
+
}
|
|
2087
2733
|
/**
|
|
2088
2734
|
* A slider for picking a single numeric value (`type="default"`), a value snapped to evenly
|
|
2089
2735
|
* spaced ticks (`type="segmented"`), or a min/max pair (`type="range"`) from within a bounded
|
|
@@ -2187,6 +2833,15 @@ export namespace Components {
|
|
|
2187
2833
|
* Label for the optional action button (e.g. "Undo", "Retry"). Omit this prop entirely to render no action button at all -- its presence, not a boolean flag, is what shows it.
|
|
2188
2834
|
*/
|
|
2189
2835
|
"actionLabel"?: string;
|
|
2836
|
+
/**
|
|
2837
|
+
* Variant of the action button. Defaults to the one that matches `variant` (outlined for `default`). Use `subtle` for a plain text action; colour it with `--bs-button-subtle-color` on `::part(action)`.
|
|
2838
|
+
*/
|
|
2839
|
+
"actionVariant"?: BsButtonVariant1;
|
|
2840
|
+
/**
|
|
2841
|
+
* Hides the close button, for a confirmation that goes away on its own or whose only control is the action. A snackbar with no way to dismiss it must be removed by the consumer.
|
|
2842
|
+
* @default false
|
|
2843
|
+
*/
|
|
2844
|
+
"hideClose": boolean;
|
|
2190
2845
|
/**
|
|
2191
2846
|
* Replaces the checkmark icon with a spinning loading indicator, for a message describing in-progress work (e.g. "Uploading files...") rather than a completed result.
|
|
2192
2847
|
* @default false
|
|
@@ -2470,6 +3125,7 @@ export namespace Components {
|
|
|
2470
3125
|
* `value` is always 24-hour `HH:mm` (e.g. `"14:30"`), regardless of the displayed `format`.
|
|
2471
3126
|
* The picker renders inline at a fixed width; to show it as a popover, put it in your own overlay
|
|
2472
3127
|
* and close that overlay from `bsChange`/`bsCancel`.
|
|
3128
|
+
* **Built from:** `bs-card` (the surface), `bs-switch` (the 24h toggle), `bs-input` (the AM/PM dropdown), `bs-button` (Cancel/Confirm).
|
|
2473
3129
|
* ## When to use
|
|
2474
3130
|
* - Picking a time of day where the user steps through hours and minutes.
|
|
2475
3131
|
* ## When not to use
|
|
@@ -2493,95 +3149,287 @@ export namespace Components {
|
|
|
2493
3149
|
* Display format: `12h` (with an AM/PM dropdown) or `24h`. The user can switch it with the 24h switch. Does not change `value`, which is always 24-hour.
|
|
2494
3150
|
* @default '12h'
|
|
2495
3151
|
*/
|
|
2496
|
-
"format": '12h' | '24h';
|
|
3152
|
+
"format": '12h' | '24h';
|
|
3153
|
+
/**
|
|
3154
|
+
* Label of the 24h switch.
|
|
3155
|
+
* @default '24h'
|
|
3156
|
+
*/
|
|
3157
|
+
"formatLabel": string;
|
|
3158
|
+
/**
|
|
3159
|
+
* Heading text.
|
|
3160
|
+
* @default 'Select Time'
|
|
3161
|
+
*/
|
|
3162
|
+
"heading": string;
|
|
3163
|
+
/**
|
|
3164
|
+
* Accessible name of the hour spinner.
|
|
3165
|
+
* @default 'Hour'
|
|
3166
|
+
*/
|
|
3167
|
+
"hourLabel": string;
|
|
3168
|
+
/**
|
|
3169
|
+
* Accessible name of the minute spinner.
|
|
3170
|
+
* @default 'Minute'
|
|
3171
|
+
*/
|
|
3172
|
+
"minuteLabel": string;
|
|
3173
|
+
/**
|
|
3174
|
+
* Step, in minutes, of the minute spinner's carets and arrow keys. Typing is not constrained.
|
|
3175
|
+
* @default 1
|
|
3176
|
+
*/
|
|
3177
|
+
"minuteStep": number;
|
|
3178
|
+
/**
|
|
3179
|
+
* The `name` the confirmed value is submitted under in a surrounding `<form>`.
|
|
3180
|
+
*/
|
|
3181
|
+
"name"?: string;
|
|
3182
|
+
/**
|
|
3183
|
+
* Accessible name of the AM/PM dropdown.
|
|
3184
|
+
* @default 'AM/PM'
|
|
3185
|
+
*/
|
|
3186
|
+
"periodLabel": string;
|
|
3187
|
+
/**
|
|
3188
|
+
* The confirmed time, 24-hour `HH:mm`. Empty means no time chosen yet (the picker opens on 00:00). Mutable so Confirm updates it directly; `bsChange` still fires.
|
|
3189
|
+
* @default ''
|
|
3190
|
+
*/
|
|
3191
|
+
"value": string;
|
|
3192
|
+
}
|
|
3193
|
+
/**
|
|
3194
|
+
* A transient status message for confirming the result of an action (e.g. "Files uploaded
|
|
3195
|
+
* successfully.") -- a state-specific icon, a message, and a close button.
|
|
3196
|
+
* This component only renders the toast itself -- it doesn't manage its own visibility, timing, or
|
|
3197
|
+
* stacking. A consumer (typically a small "toast manager" utility) creates one per message and
|
|
3198
|
+
* removes it from the DOM again, whether on a timer or on `bsDismiss`. Figma's spec doesn't show
|
|
3199
|
+
* auto-dismiss timing at all (it's a static visual spec), so this deliberately doesn't invent one.
|
|
3200
|
+
*/
|
|
3201
|
+
interface BsToast {
|
|
3202
|
+
/**
|
|
3203
|
+
* Semantic state. Each state has its own icon and matching container/text tokens -- there is no neutral/default state.
|
|
3204
|
+
* @default 'info'
|
|
3205
|
+
*/
|
|
3206
|
+
"state": BsToastState;
|
|
3207
|
+
}
|
|
3208
|
+
/**
|
|
3209
|
+
* A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
|
|
3210
|
+
* next to a trigger element.
|
|
3211
|
+
* `bs-tooltip` is a purely presentational bubble -- like `bs-menu`, it does not manage its own
|
|
3212
|
+
* visibility, hover/focus triggering, or positioning relative to a trigger element. A consuming
|
|
3213
|
+
* app is responsible for showing/hiding it and for positioning it against its trigger (e.g. via a
|
|
3214
|
+
* wrapping `position: relative`/`absolute` pattern, the same approach used by
|
|
3215
|
+
* `bs-chatbot-response-action` for its own `menu` slot).
|
|
3216
|
+
* ## When to use
|
|
3217
|
+
* - A short, contextual hint of extra information shown next to a trigger element on hover/focus,
|
|
3218
|
+
* where the host app owns the show/hide and positioning logic.
|
|
3219
|
+
* ## When not to use
|
|
3220
|
+
* - A component that manages its own trigger interaction (hover/focus listeners) or positioning --
|
|
3221
|
+
* this component intentionally does not do that; wire that up in the consuming app instead.
|
|
3222
|
+
* @prop --bs-tooltip-bg - Background of the bubble and arrow. Aliased to `--bs-surface-inverse`.
|
|
3223
|
+
* @prop --bs-tooltip-color - Text color of the slotted content. Aliased to `--bs-text-inverse`.
|
|
3224
|
+
* @prop --bs-tooltip-radius - Corner radius of the bubble. Aliased to `--bs-border-radius-50`.
|
|
3225
|
+
* @prop --bs-tooltip-padding-x - Left/right padding of the bubble. Aliased to `--bs-spacing-200`.
|
|
3226
|
+
* @prop --bs-tooltip-padding-y - Top/bottom padding of the bubble. Aliased to `--bs-spacing-100`.
|
|
3227
|
+
* @prop --bs-tooltip-max-width - Max width of the bubble. Aliased to `200px`, Figma's own reference
|
|
3228
|
+
* width (the bubble's width is otherwise variable based on content).
|
|
3229
|
+
* @prop --bs-tooltip-shadow - Elevation shadow of the bubble. See `bs-tooltip.css` for why this is
|
|
3230
|
+
* a literal value rather than a `--bs-shadow-*` token alias.
|
|
3231
|
+
* @prop --bs-tooltip-font-size - Font size of the slotted content. Aliased to `--bs-font-size-sm`.
|
|
3232
|
+
* @prop --bs-tooltip-line-height - Line height of the slotted content. Aliased to
|
|
3233
|
+
* `--bs-line-height-body-sm`.
|
|
3234
|
+
*/
|
|
3235
|
+
interface BsTooltip {
|
|
3236
|
+
/**
|
|
3237
|
+
* Which edge of the bubble the arrow points from, and therefore which side of a trigger the bubble should be placed on. `'top'` is the only value implemented -- it is the only variant confirmed from the Figma "EG Tooltip" component (arrow at the top of the bubble, pointing up). Bottom/left/right variants aren't implemented pending further Figma design confirmation.
|
|
3238
|
+
* @default 'top'
|
|
3239
|
+
*/
|
|
3240
|
+
"placement": 'top';
|
|
3241
|
+
}
|
|
3242
|
+
/**
|
|
3243
|
+
* A product's "What's new" surface, in three forms matching the Figma component:
|
|
3244
|
+
* - `feed` -- a docked panel: heading, "Mark all as read", filter tabs, the list of updates (each a
|
|
3245
|
+
* `bs-whats-new-entry`) and a link to the full release notes.
|
|
3246
|
+
* - `announcement` -- one big update, with a hero image, a tag, a heading, a few bullet points, "1 of 3"
|
|
3247
|
+
* and Remind me later / Next.
|
|
3248
|
+
* - `teaser` -- a small card pointing at the feed: tag, date, heading, a line of text and "Open What's new".
|
|
3249
|
+
* The component only shows what you give it and reports what the user pressed. It doesn't fetch updates,
|
|
3250
|
+
* track which the user has seen, or decide when to appear: your app owns `entries` (with their `unread`
|
|
3251
|
+
* flags) and reacts to the events.
|
|
3252
|
+
* **Built from:** `bs-card` (the surface), `bs-whats-new-entry` (each update), `bs-tabs` (the filters),
|
|
3253
|
+
* `bs-chip-informative` (the tags), `bs-button`, `bs-icon-button`.
|
|
3254
|
+
* ## When to use
|
|
3255
|
+
* - Telling users about changes to the product, in a place they can come back to.
|
|
3256
|
+
* ## When not to use
|
|
3257
|
+
* - Messages about the user's own data or an action they just took -- use `bs-snackbar`, `bs-toast`.
|
|
3258
|
+
* - A guided walk through the interface -- use `bs-product-tour`.
|
|
3259
|
+
*/
|
|
3260
|
+
interface BsWhatsNew {
|
|
3261
|
+
/**
|
|
3262
|
+
* Label of the link (`teaser`).
|
|
3263
|
+
* @default 'Open What’s new'
|
|
3264
|
+
*/
|
|
3265
|
+
"actionLabel": string;
|
|
3266
|
+
/**
|
|
3267
|
+
* Shows a close button.
|
|
3268
|
+
* @default false
|
|
3269
|
+
*/
|
|
3270
|
+
"closable": boolean;
|
|
3271
|
+
/**
|
|
3272
|
+
* Accessible name of the close button.
|
|
3273
|
+
* @default 'Close'
|
|
3274
|
+
*/
|
|
3275
|
+
"closeLabel": string;
|
|
3276
|
+
/**
|
|
3277
|
+
* The date as text (`teaser`).
|
|
3278
|
+
*/
|
|
3279
|
+
"date"?: string;
|
|
3280
|
+
/**
|
|
3281
|
+
* The line under the heading (`teaser`).
|
|
3282
|
+
*/
|
|
3283
|
+
"description"?: string;
|
|
3284
|
+
/**
|
|
3285
|
+
* Text shown when the selected filter has no entries.
|
|
3286
|
+
* @default 'Nothing new here yet.'
|
|
3287
|
+
*/
|
|
3288
|
+
"emptyLabel": string;
|
|
3289
|
+
/**
|
|
3290
|
+
* The updates in the feed: `[{ id, category?, tag?, tagColor?, date?, unread?, heading, description?, actionLabel?, image? }]`. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
3291
|
+
* @default []
|
|
3292
|
+
*/
|
|
3293
|
+
"entries": BsWhatsNewItem[];
|
|
3294
|
+
/**
|
|
3295
|
+
* The selected filter's `value`. Mutable: choosing a tab updates it.
|
|
3296
|
+
* @default 'all'
|
|
3297
|
+
*/
|
|
3298
|
+
"filter": string;
|
|
3299
|
+
/**
|
|
3300
|
+
* The filter tabs: `[{ value, label }]`. `value: "all"` shows every entry; any other value shows the entries whose `category` matches. Defaults to All, New Features, Improvements and Fixes (categories `features`, `improvements`, `fixes`). Set `[]` for no tabs.
|
|
3301
|
+
* @default [ { value: 'all', label: 'All' }, { value: 'features', label: 'New Features' }, { value: 'improvements', label: 'Improvements' }, { value: 'fixes', label: 'Fixes' }, ]
|
|
3302
|
+
*/
|
|
3303
|
+
"filters": BsWhatsNewFilter[];
|
|
3304
|
+
/**
|
|
3305
|
+
* Heading. Defaults to "What's new" for `feed`; set it for the other forms.
|
|
3306
|
+
*/
|
|
3307
|
+
"heading"?: string;
|
|
3308
|
+
/**
|
|
3309
|
+
* HTML heading level, 1-6.
|
|
3310
|
+
* @default 2
|
|
3311
|
+
*/
|
|
3312
|
+
"headingLevel": number;
|
|
3313
|
+
/**
|
|
3314
|
+
* URL of the hero image (`announcement`). Or slot your own into `hero`.
|
|
3315
|
+
*/
|
|
3316
|
+
"image"?: string;
|
|
3317
|
+
/**
|
|
3318
|
+
* Label of the "Mark all as read" button, shown while any entry is `unread`.
|
|
3319
|
+
* @default 'Mark all as read'
|
|
3320
|
+
*/
|
|
3321
|
+
"markAllReadLabel": string;
|
|
3322
|
+
/**
|
|
3323
|
+
* The bullet points (`announcement`). Must be set as a JS property -- see CONVENTIONS.md.
|
|
3324
|
+
* @default []
|
|
3325
|
+
*/
|
|
3326
|
+
"points": string[];
|
|
3327
|
+
/**
|
|
3328
|
+
* Label of the primary button (`announcement`). Empty hides it.
|
|
3329
|
+
* @default 'Next'
|
|
3330
|
+
*/
|
|
3331
|
+
"primaryLabel": string;
|
|
3332
|
+
/**
|
|
3333
|
+
* Text of the release notes link.
|
|
3334
|
+
* @default 'See all release notes'
|
|
3335
|
+
*/
|
|
3336
|
+
"releaseNotesLabel": string;
|
|
3337
|
+
/**
|
|
3338
|
+
* URL of the full release notes. The link is only shown when this is set.
|
|
3339
|
+
*/
|
|
3340
|
+
"releaseNotesUrl"?: string;
|
|
3341
|
+
/**
|
|
3342
|
+
* Label of the secondary button (`announcement`). Empty hides it.
|
|
3343
|
+
* @default 'Remind me later'
|
|
3344
|
+
*/
|
|
3345
|
+
"secondaryLabel": string;
|
|
3346
|
+
/**
|
|
3347
|
+
* Current step, 1-based (`announcement`). Used with `total`.
|
|
3348
|
+
* @default 1
|
|
3349
|
+
*/
|
|
3350
|
+
"step": number;
|
|
3351
|
+
/**
|
|
3352
|
+
* Template of the step label; `{step}` and `{total}` are replaced.
|
|
3353
|
+
* @default '{step} of {total}'
|
|
3354
|
+
*/
|
|
3355
|
+
"stepLabel": string;
|
|
3356
|
+
/**
|
|
3357
|
+
* Tag text (`announcement`, `teaser`), e.g. "New feature".
|
|
3358
|
+
*/
|
|
3359
|
+
"tag"?: string;
|
|
3360
|
+
/**
|
|
3361
|
+
* Colour of the tag.
|
|
3362
|
+
* @default 'info'
|
|
3363
|
+
*/
|
|
3364
|
+
"tagColor": BsWhatsNewEntryTagColor;
|
|
3365
|
+
/**
|
|
3366
|
+
* Number of announcements in the sequence (`announcement`). The step label is hidden when 0.
|
|
3367
|
+
* @default 0
|
|
3368
|
+
*/
|
|
3369
|
+
"total": number;
|
|
2497
3370
|
/**
|
|
2498
|
-
*
|
|
2499
|
-
* @default '
|
|
3371
|
+
* Which form: `feed`, `announcement` or `teaser`.
|
|
3372
|
+
* @default 'feed'
|
|
2500
3373
|
*/
|
|
2501
|
-
"
|
|
3374
|
+
"type": BsWhatsNewType;
|
|
3375
|
+
}
|
|
3376
|
+
/**
|
|
3377
|
+
* One update in a "What's new" list: a tag ("New feature", "Improvement", "Fix"), a date, an unread dot,
|
|
3378
|
+
* an optional image, a title, a short description and an optional action link ("Try it"). Matches the Figma
|
|
3379
|
+
* "What's new / Entry" component. It is a plain block of content -- no card -- so it can sit in a feed
|
|
3380
|
+
* (`bs-whats-new`), a list, or a page of release notes.
|
|
3381
|
+
* **Built from:** `bs-chip-informative` (the tag) and `bs-button` (the action).
|
|
3382
|
+
* ## When to use
|
|
3383
|
+
* - Announcing a change to the product, with enough detail to know whether it matters.
|
|
3384
|
+
* ## When not to use
|
|
3385
|
+
* - A message about the user's own data or an action they just took -- use `bs-snackbar` or `bs-toast`.
|
|
3386
|
+
*/
|
|
3387
|
+
interface BsWhatsNewEntry {
|
|
2502
3388
|
/**
|
|
2503
|
-
*
|
|
2504
|
-
* @default 'Select Time'
|
|
3389
|
+
* Label of the action link (e.g. "Try it"). No action when empty.
|
|
2505
3390
|
*/
|
|
2506
|
-
"
|
|
3391
|
+
"actionLabel"?: string;
|
|
2507
3392
|
/**
|
|
2508
|
-
*
|
|
2509
|
-
* @default 'Hour'
|
|
3393
|
+
* The date as text, already formatted for the reader (e.g. "24.09.2026").
|
|
2510
3394
|
*/
|
|
2511
|
-
"
|
|
3395
|
+
"date"?: string;
|
|
2512
3396
|
/**
|
|
2513
|
-
*
|
|
2514
|
-
* @default 'Minute'
|
|
3397
|
+
* Short description under the title.
|
|
2515
3398
|
*/
|
|
2516
|
-
"
|
|
3399
|
+
"description"?: string;
|
|
2517
3400
|
/**
|
|
2518
|
-
*
|
|
2519
|
-
* @default
|
|
3401
|
+
* Draws a rule under the entry, to separate it from the next one.
|
|
3402
|
+
* @default false
|
|
2520
3403
|
*/
|
|
2521
|
-
"
|
|
3404
|
+
"divider": boolean;
|
|
2522
3405
|
/**
|
|
2523
|
-
*
|
|
3406
|
+
* Title.
|
|
2524
3407
|
*/
|
|
2525
|
-
"
|
|
3408
|
+
"heading"?: string;
|
|
2526
3409
|
/**
|
|
2527
|
-
*
|
|
2528
|
-
* @default
|
|
3410
|
+
* HTML heading level for the title, 1-6.
|
|
3411
|
+
* @default 3
|
|
2529
3412
|
*/
|
|
2530
|
-
"
|
|
3413
|
+
"headingLevel": number;
|
|
2531
3414
|
/**
|
|
2532
|
-
* The
|
|
2533
|
-
* @default ''
|
|
3415
|
+
* The tag text, e.g. "New feature". No tag when empty.
|
|
2534
3416
|
*/
|
|
2535
|
-
"
|
|
2536
|
-
}
|
|
2537
|
-
/**
|
|
2538
|
-
* A transient status message for confirming the result of an action (e.g. "Files uploaded
|
|
2539
|
-
* successfully.") -- a state-specific icon, a message, and a close button.
|
|
2540
|
-
* This component only renders the toast itself -- it doesn't manage its own visibility, timing, or
|
|
2541
|
-
* stacking. A consumer (typically a small "toast manager" utility) creates one per message and
|
|
2542
|
-
* removes it from the DOM again, whether on a timer or on `bsDismiss`. Figma's spec doesn't show
|
|
2543
|
-
* auto-dismiss timing at all (it's a static visual spec), so this deliberately doesn't invent one.
|
|
2544
|
-
*/
|
|
2545
|
-
interface BsToast {
|
|
3417
|
+
"tag"?: string;
|
|
2546
3418
|
/**
|
|
2547
|
-
*
|
|
3419
|
+
* Colour of the tag: `info` (default), `success`, `warning`, `error` or `neutral`.
|
|
2548
3420
|
* @default 'info'
|
|
2549
3421
|
*/
|
|
2550
|
-
"
|
|
2551
|
-
}
|
|
2552
|
-
/**
|
|
2553
|
-
* A dark tooltip bubble with a pointer arrow, used to surface a short hint of extra information
|
|
2554
|
-
* next to a trigger element.
|
|
2555
|
-
* `bs-tooltip` is a purely presentational bubble -- like `bs-menu`, it does not manage its own
|
|
2556
|
-
* visibility, hover/focus triggering, or positioning relative to a trigger element. A consuming
|
|
2557
|
-
* app is responsible for showing/hiding it and for positioning it against its trigger (e.g. via a
|
|
2558
|
-
* wrapping `position: relative`/`absolute` pattern, the same approach used by
|
|
2559
|
-
* `bs-chatbot-response-action` for its own `menu` slot).
|
|
2560
|
-
* ## When to use
|
|
2561
|
-
* - A short, contextual hint of extra information shown next to a trigger element on hover/focus,
|
|
2562
|
-
* where the host app owns the show/hide and positioning logic.
|
|
2563
|
-
* ## When not to use
|
|
2564
|
-
* - A component that manages its own trigger interaction (hover/focus listeners) or positioning --
|
|
2565
|
-
* this component intentionally does not do that; wire that up in the consuming app instead.
|
|
2566
|
-
* @prop --bs-tooltip-bg - Background of the bubble and arrow. Aliased to `--bs-surface-inverse`.
|
|
2567
|
-
* @prop --bs-tooltip-color - Text color of the slotted content. Aliased to `--bs-text-inverse`.
|
|
2568
|
-
* @prop --bs-tooltip-radius - Corner radius of the bubble. Aliased to `--bs-border-radius-50`.
|
|
2569
|
-
* @prop --bs-tooltip-padding-x - Left/right padding of the bubble. Aliased to `--bs-spacing-200`.
|
|
2570
|
-
* @prop --bs-tooltip-padding-y - Top/bottom padding of the bubble. Aliased to `--bs-spacing-100`.
|
|
2571
|
-
* @prop --bs-tooltip-max-width - Max width of the bubble. Aliased to `200px`, Figma's own reference
|
|
2572
|
-
* width (the bubble's width is otherwise variable based on content).
|
|
2573
|
-
* @prop --bs-tooltip-shadow - Elevation shadow of the bubble. See `bs-tooltip.css` for why this is
|
|
2574
|
-
* a literal value rather than a `--bs-shadow-*` token alias.
|
|
2575
|
-
* @prop --bs-tooltip-font-size - Font size of the slotted content. Aliased to `--bs-font-size-sm`.
|
|
2576
|
-
* @prop --bs-tooltip-line-height - Line height of the slotted content. Aliased to
|
|
2577
|
-
* `--bs-line-height-body-sm`.
|
|
2578
|
-
*/
|
|
2579
|
-
interface BsTooltip {
|
|
3422
|
+
"tagColor": BsWhatsNewEntryTagColor1;
|
|
2580
3423
|
/**
|
|
2581
|
-
*
|
|
2582
|
-
* @default
|
|
3424
|
+
* Shows a dot after the date for an update the user hasn't seen.
|
|
3425
|
+
* @default false
|
|
2583
3426
|
*/
|
|
2584
|
-
"
|
|
3427
|
+
"unread": boolean;
|
|
3428
|
+
/**
|
|
3429
|
+
* Visually hidden text for the unread dot.
|
|
3430
|
+
* @default 'Unread'
|
|
3431
|
+
*/
|
|
3432
|
+
"unreadLabel": string;
|
|
2585
3433
|
}
|
|
2586
3434
|
}
|
|
2587
3435
|
export interface BsAccordionCustomEvent<T> extends CustomEvent<T> {
|
|
@@ -2644,6 +3492,10 @@ export interface BsComposerStatusBannerCustomEvent<T> extends CustomEvent<T> {
|
|
|
2644
3492
|
detail: T;
|
|
2645
3493
|
target: HTMLBsComposerStatusBannerElement;
|
|
2646
3494
|
}
|
|
3495
|
+
export interface BsCookieConsentCustomEvent<T> extends CustomEvent<T> {
|
|
3496
|
+
detail: T;
|
|
3497
|
+
target: HTMLBsCookieConsentElement;
|
|
3498
|
+
}
|
|
2647
3499
|
export interface BsDataTableCustomEvent<T> extends CustomEvent<T> {
|
|
2648
3500
|
detail: T;
|
|
2649
3501
|
target: HTMLBsDataTableElement;
|
|
@@ -2656,6 +3508,10 @@ export interface BsDialogCustomEvent<T> extends CustomEvent<T> {
|
|
|
2656
3508
|
detail: T;
|
|
2657
3509
|
target: HTMLBsDialogElement;
|
|
2658
3510
|
}
|
|
3511
|
+
export interface BsErrorPageCustomEvent<T> extends CustomEvent<T> {
|
|
3512
|
+
detail: T;
|
|
3513
|
+
target: HTMLBsErrorPageElement;
|
|
3514
|
+
}
|
|
2659
3515
|
export interface BsFileUploadCustomEvent<T> extends CustomEvent<T> {
|
|
2660
3516
|
detail: T;
|
|
2661
3517
|
target: HTMLBsFileUploadElement;
|
|
@@ -2684,14 +3540,30 @@ export interface BsNavigationDrawerItemCustomEvent<T> extends CustomEvent<T> {
|
|
|
2684
3540
|
detail: T;
|
|
2685
3541
|
target: HTMLBsNavigationDrawerItemElement;
|
|
2686
3542
|
}
|
|
3543
|
+
export interface BsOnboardingChecklistCustomEvent<T> extends CustomEvent<T> {
|
|
3544
|
+
detail: T;
|
|
3545
|
+
target: HTMLBsOnboardingChecklistElement;
|
|
3546
|
+
}
|
|
2687
3547
|
export interface BsPaginationCustomEvent<T> extends CustomEvent<T> {
|
|
2688
3548
|
detail: T;
|
|
2689
3549
|
target: HTMLBsPaginationElement;
|
|
2690
3550
|
}
|
|
3551
|
+
export interface BsProductTourCustomEvent<T> extends CustomEvent<T> {
|
|
3552
|
+
detail: T;
|
|
3553
|
+
target: HTMLBsProductTourElement;
|
|
3554
|
+
}
|
|
3555
|
+
export interface BsQrCodeCustomEvent<T> extends CustomEvent<T> {
|
|
3556
|
+
detail: T;
|
|
3557
|
+
target: HTMLBsQrCodeElement;
|
|
3558
|
+
}
|
|
2691
3559
|
export interface BsRadioCustomEvent<T> extends CustomEvent<T> {
|
|
2692
3560
|
detail: T;
|
|
2693
3561
|
target: HTMLBsRadioElement;
|
|
2694
3562
|
}
|
|
3563
|
+
export interface BsSessionTimeoutCustomEvent<T> extends CustomEvent<T> {
|
|
3564
|
+
detail: T;
|
|
3565
|
+
target: HTMLBsSessionTimeoutElement;
|
|
3566
|
+
}
|
|
2695
3567
|
export interface BsSliderCustomEvent<T> extends CustomEvent<T> {
|
|
2696
3568
|
detail: T;
|
|
2697
3569
|
target: HTMLBsSliderElement;
|
|
@@ -2724,6 +3596,14 @@ export interface BsToastCustomEvent<T> extends CustomEvent<T> {
|
|
|
2724
3596
|
detail: T;
|
|
2725
3597
|
target: HTMLBsToastElement;
|
|
2726
3598
|
}
|
|
3599
|
+
export interface BsWhatsNewCustomEvent<T> extends CustomEvent<T> {
|
|
3600
|
+
detail: T;
|
|
3601
|
+
target: HTMLBsWhatsNewElement;
|
|
3602
|
+
}
|
|
3603
|
+
export interface BsWhatsNewEntryCustomEvent<T> extends CustomEvent<T> {
|
|
3604
|
+
detail: T;
|
|
3605
|
+
target: HTMLBsWhatsNewEntryElement;
|
|
3606
|
+
}
|
|
2727
3607
|
declare global {
|
|
2728
3608
|
interface HTMLBsAccordionElementEventMap {
|
|
2729
3609
|
"bsToggle": boolean;
|
|
@@ -3053,6 +3933,9 @@ declare global {
|
|
|
3053
3933
|
* - `error` purely for visual emphasis — it signals a destructive action to the user, so reserve
|
|
3054
3934
|
* it for actions that actually delete/revoke/undo something.
|
|
3055
3935
|
* @prop --bs-button-radius - Corner radius. Aliased to `--bs-border-radius-100` by default.
|
|
3936
|
+
* @prop --bs-button-padding-x-sm - Left/right padding of a label-only button at `size="sm"`. Aliased to `--bs-spacing-300`.
|
|
3937
|
+
* @prop --bs-button-width - Width of the button. `auto` by default (fits its content); set `100%` for a full-width button, e.g. `bs-button { --bs-button-width: 100%; }`.
|
|
3938
|
+
* @prop --bs-button-subtle-color - Label/icon colour, `variant="subtle"`. Aliased to `--bs-color-neutral-default`; set it to `var(--bs-text-action)` for a blue text button.
|
|
3056
3939
|
* @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
|
|
3057
3940
|
* @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
|
|
3058
3941
|
* @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
|
|
@@ -3660,6 +4543,52 @@ declare global {
|
|
|
3660
4543
|
prototype: HTMLBsComposerStatusBannerElement;
|
|
3661
4544
|
new (): HTMLBsComposerStatusBannerElement;
|
|
3662
4545
|
};
|
|
4546
|
+
interface HTMLBsCookieConsentElementEventMap {
|
|
4547
|
+
"bsAccept": { choices: BsCookieChoices };
|
|
4548
|
+
"bsReject": { choices: BsCookieChoices };
|
|
4549
|
+
"bsCustomise": void;
|
|
4550
|
+
"bsSave": { choices: BsCookieChoices };
|
|
4551
|
+
"bsChoice": { id: string; enabled: boolean };
|
|
4552
|
+
"bsClose": void;
|
|
4553
|
+
"bsManage": void;
|
|
4554
|
+
}
|
|
4555
|
+
/**
|
|
4556
|
+
* A cookie consent prompt in four forms, matching the Figma "Cookie consent" component:
|
|
4557
|
+
* - `banner` -- a wide bar: icon, heading, text, policy link, and Customise / Reject optional / Accept
|
|
4558
|
+
* all. Stacks into a column on narrow containers (its own width, not the viewport's).
|
|
4559
|
+
* - `card` -- the compact version of the same question, in a card.
|
|
4560
|
+
* - `preferences` -- the detailed dialog: one row per cookie category with a switch (strictly
|
|
4561
|
+
* necessary is "Always on"), an expandable list of the cookies in each, and Reject optional /
|
|
4562
|
+
* Accept all / Save choices.
|
|
4563
|
+
* - `saved` -- a dark confirmation bar ("Cookie choices saved") with a Change action.
|
|
4564
|
+
* The component only collects the choice. It doesn't set, read or delete cookies, remember that the
|
|
4565
|
+
* user answered, or decide when to show itself: your app does that from the events, and swaps `type`
|
|
4566
|
+
* (e.g. `banner` -> `preferences` on `bsCustomise`, `preferences` -> `saved` on `bsSave`).
|
|
4567
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions),
|
|
4568
|
+
* `bs-switch` (the category switches), `bs-chip-informative` (the "Always on" badge), `bs-icon-button`
|
|
4569
|
+
* (the close button), `bs-snackbar` (the saved confirmation).
|
|
4570
|
+
* ## When to use
|
|
4571
|
+
* - Asking for consent to optional cookies or similar tracking, as the law of your market requires.
|
|
4572
|
+
* ## When not to use
|
|
4573
|
+
* - Telling people about necessary cookies only -- that needs no consent prompt.
|
|
4574
|
+
* ## Fair choice
|
|
4575
|
+
* "Reject optional" has the same prominence as "Accept all" (same size, both always visible). Keep it
|
|
4576
|
+
* that way: a prompt that makes refusing harder than accepting isn't valid consent in most places.
|
|
4577
|
+
*/
|
|
4578
|
+
interface HTMLBsCookieConsentElement extends Components.BsCookieConsent, HTMLStencilElement {
|
|
4579
|
+
addEventListener<K extends keyof HTMLBsCookieConsentElementEventMap>(type: K, listener: (this: HTMLBsCookieConsentElement, ev: BsCookieConsentCustomEvent<HTMLBsCookieConsentElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
4580
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
4581
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
4582
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
4583
|
+
removeEventListener<K extends keyof HTMLBsCookieConsentElementEventMap>(type: K, listener: (this: HTMLBsCookieConsentElement, ev: BsCookieConsentCustomEvent<HTMLBsCookieConsentElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
4584
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
4585
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
4586
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
4587
|
+
}
|
|
4588
|
+
var HTMLBsCookieConsentElement: {
|
|
4589
|
+
prototype: HTMLBsCookieConsentElement;
|
|
4590
|
+
new (): HTMLBsCookieConsentElement;
|
|
4591
|
+
};
|
|
3663
4592
|
interface HTMLBsDataTableElementEventMap {
|
|
3664
4593
|
"bsSort": { column: string; direction: 'asc' | 'desc' };
|
|
3665
4594
|
"bsRowSelect": { id: string | number; selected: boolean };
|
|
@@ -3700,6 +4629,7 @@ declare global {
|
|
|
3700
4629
|
* ISO timestamps -- so a date can't shift by a day across time zones.
|
|
3701
4630
|
* The calendar renders inline at a fixed width; to show it as a popover, put it inside a
|
|
3702
4631
|
* `bs-menu` or your own overlay.
|
|
4632
|
+
* **Built from:** `bs-card` (the surface), `bs-input` (the month/year dropdown triggers and the range date fields), `bs-menu` and `bs-menu-item` (the month/year lists).
|
|
3703
4633
|
* ## When to use
|
|
3704
4634
|
* - Picking a date where seeing the surrounding days of the week/month helps (a booking, a
|
|
3705
4635
|
* deadline, a report window).
|
|
@@ -3759,6 +4689,38 @@ declare global {
|
|
|
3759
4689
|
prototype: HTMLBsDialogElement;
|
|
3760
4690
|
new (): HTMLBsDialogElement;
|
|
3761
4691
|
};
|
|
4692
|
+
interface HTMLBsErrorPageElementEventMap {
|
|
4693
|
+
"bsPrimary": void;
|
|
4694
|
+
"bsSecondary": void;
|
|
4695
|
+
}
|
|
4696
|
+
/**
|
|
4697
|
+
* A full-block page for when the user can't get to what they asked for: page not found (404), a server
|
|
4698
|
+
* error (500), no access (403), planned maintenance, or no internet connection. Matches the Figma
|
|
4699
|
+
* "Error page" component's five states.
|
|
4700
|
+
* Each `type` brings its own icon, tint, code label ("404", "Maintenance", ...), heading, paragraph and
|
|
4701
|
+
* buttons, all overridable by props. The component doesn't navigate or retry anything: it emits
|
|
4702
|
+
* `bsPrimary` / `bsSecondary` and your app decides what "Go to Overview" or "Try again" does.
|
|
4703
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions).
|
|
4704
|
+
* ## When to use
|
|
4705
|
+
* - Replacing the content of a page or panel that can't be shown, with a clear way forward.
|
|
4706
|
+
* ## When not to use
|
|
4707
|
+
* - A problem with one field or one action -- use inline validation or a `bs-snackbar`.
|
|
4708
|
+
* - A blocking question the user must answer -- use `bs-dialog`.
|
|
4709
|
+
*/
|
|
4710
|
+
interface HTMLBsErrorPageElement extends Components.BsErrorPage, HTMLStencilElement {
|
|
4711
|
+
addEventListener<K extends keyof HTMLBsErrorPageElementEventMap>(type: K, listener: (this: HTMLBsErrorPageElement, ev: BsErrorPageCustomEvent<HTMLBsErrorPageElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
4712
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
4713
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
4714
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
4715
|
+
removeEventListener<K extends keyof HTMLBsErrorPageElementEventMap>(type: K, listener: (this: HTMLBsErrorPageElement, ev: BsErrorPageCustomEvent<HTMLBsErrorPageElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
4716
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
4717
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
4718
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
4719
|
+
}
|
|
4720
|
+
var HTMLBsErrorPageElement: {
|
|
4721
|
+
prototype: HTMLBsErrorPageElement;
|
|
4722
|
+
new (): HTMLBsErrorPageElement;
|
|
4723
|
+
};
|
|
3762
4724
|
interface HTMLBsFileUploadElementEventMap {
|
|
3763
4725
|
"bsFilesSelect": File[];
|
|
3764
4726
|
"bsFilesReject": File[];
|
|
@@ -3841,6 +4803,26 @@ declare global {
|
|
|
3841
4803
|
prototype: HTMLBsIconButtonElement;
|
|
3842
4804
|
new (): HTMLBsIconButtonElement;
|
|
3843
4805
|
};
|
|
4806
|
+
/**
|
|
4807
|
+
* A small rounded square holding an icon, tinted by intent -- the visual marker next to a status,
|
|
4808
|
+
* a list item or a feature. Matches the Figma "Icon tile" component (3 sizes x 6 intents).
|
|
4809
|
+
* Each intent shows a default glyph (house, check, warning, cross, grid, info); put your own icon in
|
|
4810
|
+
* the default slot to replace it. A slotted icon is sized to the tile (12/16/24px) and coloured
|
|
4811
|
+
* with the intent's icon colour, as long as it draws with `currentColor`.
|
|
4812
|
+
* The tile is decorative by default (hidden from assistive tech). Don't rely on the colour or glyph
|
|
4813
|
+
* alone to convey status: slot text into `text` (it sits beside the square, in
|
|
4814
|
+
* `--bs-icon-tile-text-color`), or set `label` to give the tile its own accessible name.
|
|
4815
|
+
* ## When to use
|
|
4816
|
+
* - Marking a row, card or message with a status or category icon.
|
|
4817
|
+
* ## When not to use
|
|
4818
|
+
* - As a button -- it isn't interactive. Use `bs-icon-button`.
|
|
4819
|
+
*/
|
|
4820
|
+
interface HTMLBsIconTileElement extends Components.BsIconTile, HTMLStencilElement {
|
|
4821
|
+
}
|
|
4822
|
+
var HTMLBsIconTileElement: {
|
|
4823
|
+
prototype: HTMLBsIconTileElement;
|
|
4824
|
+
new (): HTMLBsIconTileElement;
|
|
4825
|
+
};
|
|
3844
4826
|
interface HTMLBsInlineTabElementEventMap {
|
|
3845
4827
|
"bsSelect": void;
|
|
3846
4828
|
}
|
|
@@ -3894,6 +4876,7 @@ declare global {
|
|
|
3894
4876
|
* range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
|
|
3895
4877
|
* select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
|
|
3896
4878
|
* share the same label/description/error/icon-slot chrome.
|
|
4879
|
+
* Built from: `bs-menu`/`bs-menu-item` (`type="dropdown"`) and `bs-chip-informative` + `bs-icon-button` (`type="chip"`).
|
|
3897
4880
|
* ## When to use
|
|
3898
4881
|
* - Collecting a single line of free-text, email, password, or numeric input.
|
|
3899
4882
|
* - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
|
|
@@ -4139,6 +5122,52 @@ declare global {
|
|
|
4139
5122
|
prototype: HTMLBsNavigationHeaderElement;
|
|
4140
5123
|
new (): HTMLBsNavigationHeaderElement;
|
|
4141
5124
|
};
|
|
5125
|
+
interface HTMLBsOnboardingChecklistElementEventMap {
|
|
5126
|
+
"bsStepAction": { id: string };
|
|
5127
|
+
"bsStepSkip": { id: string };
|
|
5128
|
+
"bsClose": void;
|
|
5129
|
+
"bsOpen": void;
|
|
5130
|
+
"bsDone": void;
|
|
5131
|
+
"bsHide": void;
|
|
5132
|
+
}
|
|
5133
|
+
/**
|
|
5134
|
+
* A "get set up" checklist, in four forms that matching the Figma "Onboarding checklist" component:
|
|
5135
|
+
* - `panel` -- the full list: heading, progress, every step with a status icon, and the current step
|
|
5136
|
+
* expanded with its description, time estimate, Skip for now and a primary action.
|
|
5137
|
+
* - `dashboard` -- a wide card for the top of a page: summary and progress on the left, the current step
|
|
5138
|
+
* and the next ones as small cards on the right, and a "See all steps" link.
|
|
5139
|
+
* - `launcher` -- a small always-visible chip that reopens the checklist; three layouts (`icon`, `ring`,
|
|
5140
|
+
* `inline`).
|
|
5141
|
+
* - `completion` -- the "You're all set" card once every step is done.
|
|
5142
|
+
* The component shows progress and reports what the user pressed. It doesn't know what a step means,
|
|
5143
|
+
* run it, or remember anything: your app owns the steps (`steps`, each with `done`), marks them done, and
|
|
5144
|
+
* decides which form to show.
|
|
5145
|
+
* **Built from:** `bs-card` (every surface), `bs-icon-tile` (the icons), `bs-button` (the actions),
|
|
5146
|
+
* `bs-icon-button` (the close button), `bs-progress-linear` (the progress bar), `bs-progress` (the launcher
|
|
5147
|
+
* ring).
|
|
5148
|
+
* ## When to use
|
|
5149
|
+
* - Guiding a new account or user through a short list of setup tasks they can do in any order or later.
|
|
5150
|
+
* ## When not to use
|
|
5151
|
+
* - A strict, linear flow where each step needs the one before -- use `bs-stepper`.
|
|
5152
|
+
* - A tour of the interface itself -- use `bs-product-tour`.
|
|
5153
|
+
* ## Accessibility
|
|
5154
|
+
* Steps are an ordered list; the current one has `aria-current="step"`, and each step carries a visually
|
|
5155
|
+
* hidden "Done" / "Not done". The progress bar is named with the progress text.
|
|
5156
|
+
*/
|
|
5157
|
+
interface HTMLBsOnboardingChecklistElement extends Components.BsOnboardingChecklist, HTMLStencilElement {
|
|
5158
|
+
addEventListener<K extends keyof HTMLBsOnboardingChecklistElementEventMap>(type: K, listener: (this: HTMLBsOnboardingChecklistElement, ev: BsOnboardingChecklistCustomEvent<HTMLBsOnboardingChecklistElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5159
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5160
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5161
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
5162
|
+
removeEventListener<K extends keyof HTMLBsOnboardingChecklistElementEventMap>(type: K, listener: (this: HTMLBsOnboardingChecklistElement, ev: BsOnboardingChecklistCustomEvent<HTMLBsOnboardingChecklistElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
5163
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
5164
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
5165
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
5166
|
+
}
|
|
5167
|
+
var HTMLBsOnboardingChecklistElement: {
|
|
5168
|
+
prototype: HTMLBsOnboardingChecklistElement;
|
|
5169
|
+
new (): HTMLBsOnboardingChecklistElement;
|
|
5170
|
+
};
|
|
4142
5171
|
interface HTMLBsPaginationElementEventMap {
|
|
4143
5172
|
"bsPageChange": number;
|
|
4144
5173
|
}
|
|
@@ -4171,6 +5200,42 @@ declare global {
|
|
|
4171
5200
|
prototype: HTMLBsPaginationElement;
|
|
4172
5201
|
new (): HTMLBsPaginationElement;
|
|
4173
5202
|
};
|
|
5203
|
+
interface HTMLBsProductTourElementEventMap {
|
|
5204
|
+
"bsPrimary": void;
|
|
5205
|
+
"bsSecondary": void;
|
|
5206
|
+
"bsClose": void;
|
|
5207
|
+
}
|
|
5208
|
+
/**
|
|
5209
|
+
* One step of a product tour: a centred **welcome** or **success** card with an art tile, or a
|
|
5210
|
+
* **pointer** card -- a compact step with a close button, a "1 of 3" progress label and Back/Next
|
|
5211
|
+
* actions -- whose arrow points at the thing it describes. Matches the Figma "Product Tour" and
|
|
5212
|
+
* "Pointer" components.
|
|
5213
|
+
* This is the step *card* only. It doesn't run a tour: it has no overlay, no spotlight, no
|
|
5214
|
+
* positioning against a target and no step sequencing. Your code decides which step is showing,
|
|
5215
|
+
* places the card next to its target (the arrow can sit on any of 12 positions via `direction`),
|
|
5216
|
+
* and moves on from `bsPrimary`/`bsSecondary`.
|
|
5217
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the art tile), `bs-button` (the actions), `bs-icon-button` (the close button).
|
|
5218
|
+
* ## When to use
|
|
5219
|
+
* - Introducing a feature on first run (`welcome`), confirming a finished tour (`success`), or
|
|
5220
|
+
* walking through the UI one pointer at a time (`pointer`).
|
|
5221
|
+
* ## When not to use
|
|
5222
|
+
* - A blocking decision or form -- use `bs-dialog`.
|
|
5223
|
+
* - A hint on hover or focus -- use `bs-tooltip`.
|
|
5224
|
+
*/
|
|
5225
|
+
interface HTMLBsProductTourElement extends Components.BsProductTour, HTMLStencilElement {
|
|
5226
|
+
addEventListener<K extends keyof HTMLBsProductTourElementEventMap>(type: K, listener: (this: HTMLBsProductTourElement, ev: BsProductTourCustomEvent<HTMLBsProductTourElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5227
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5228
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5229
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
5230
|
+
removeEventListener<K extends keyof HTMLBsProductTourElementEventMap>(type: K, listener: (this: HTMLBsProductTourElement, ev: BsProductTourCustomEvent<HTMLBsProductTourElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
5231
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
5232
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
5233
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
5234
|
+
}
|
|
5235
|
+
var HTMLBsProductTourElement: {
|
|
5236
|
+
prototype: HTMLBsProductTourElement;
|
|
5237
|
+
new (): HTMLBsProductTourElement;
|
|
5238
|
+
};
|
|
4174
5239
|
/**
|
|
4175
5240
|
* A circular progress indicator -- either a static ring showing a percentage sweep
|
|
4176
5241
|
* (`type="determinate"`) or a continuously spinning ring signaling in-progress work with no known
|
|
@@ -4210,6 +5275,48 @@ declare global {
|
|
|
4210
5275
|
prototype: HTMLBsProgressLinearElement;
|
|
4211
5276
|
new (): HTMLBsProgressLinearElement;
|
|
4212
5277
|
};
|
|
5278
|
+
interface HTMLBsQrCodeElementEventMap {
|
|
5279
|
+
"bsDownload": void;
|
|
5280
|
+
"bsCopy": { url?: string };
|
|
5281
|
+
"bsRetry": void;
|
|
5282
|
+
"bsRefresh": void;
|
|
5283
|
+
"bsClose": void;
|
|
5284
|
+
}
|
|
5285
|
+
/**
|
|
5286
|
+
* A block for sharing a link or taking a payment by QR code: a heading, the code on a white quiet
|
|
5287
|
+
* zone, the URL (or the amount, for payments) as text, an optional expiry chip, and Download and
|
|
5288
|
+
* Copy link actions. Matches the Figma "QR code" component (3 sizes x 2 types x 5 states, plus the
|
|
5289
|
+
* "with logo" variant).
|
|
5290
|
+
* **This component draws a code, it doesn't encode one.** Generate the real code in your product
|
|
5291
|
+
* with a QR library and hand it over either as a `matrix` (a square `boolean[][]`, `true` = dark
|
|
5292
|
+
* module) or as your own element in the `code` slot (an `<img>`, `<svg>` or `<canvas>`).
|
|
5293
|
+
* The code always sits on a white quiet zone with black modules, in dark mode too -- scanners need
|
|
5294
|
+
* the contrast.
|
|
5295
|
+
* **Built from:** `bs-card` (the surface), `bs-button` (Download, Copy link, Retry, Refresh), `bs-progress` (the loading spinner), `bs-chip-informative` (the expiry chip), `bs-icon-button` (the close button).
|
|
5296
|
+
* ## When to use
|
|
5297
|
+
* - Sharing a link to an order, document or page that someone will open on a phone.
|
|
5298
|
+
* - Taking a payment with an amount (`type="payment"`).
|
|
5299
|
+
* ## When not to use
|
|
5300
|
+
* - Encoding long text blobs -- a QR code that dense is hard to scan at the sizes here.
|
|
5301
|
+
* ## States
|
|
5302
|
+
* `loading` (generating the code), `error` (couldn't generate it; Retry), `expired` (Refresh) and
|
|
5303
|
+
* `scanned` (done: "Scanned", or "Payment received" for payments). Download and Copy link are disabled
|
|
5304
|
+
* in every state but `default`, and hidden once `scanned`.
|
|
5305
|
+
*/
|
|
5306
|
+
interface HTMLBsQrCodeElement extends Components.BsQrCode, HTMLStencilElement {
|
|
5307
|
+
addEventListener<K extends keyof HTMLBsQrCodeElementEventMap>(type: K, listener: (this: HTMLBsQrCodeElement, ev: BsQrCodeCustomEvent<HTMLBsQrCodeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5308
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5309
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5310
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
5311
|
+
removeEventListener<K extends keyof HTMLBsQrCodeElementEventMap>(type: K, listener: (this: HTMLBsQrCodeElement, ev: BsQrCodeCustomEvent<HTMLBsQrCodeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
5312
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
5313
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
5314
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
5315
|
+
}
|
|
5316
|
+
var HTMLBsQrCodeElement: {
|
|
5317
|
+
prototype: HTMLBsQrCodeElement;
|
|
5318
|
+
new (): HTMLBsQrCodeElement;
|
|
5319
|
+
};
|
|
4213
5320
|
interface HTMLBsRadioElementEventMap {
|
|
4214
5321
|
"bsChange": string;
|
|
4215
5322
|
}
|
|
@@ -4237,6 +5344,53 @@ declare global {
|
|
|
4237
5344
|
prototype: HTMLBsRadioElement;
|
|
4238
5345
|
new (): HTMLBsRadioElement;
|
|
4239
5346
|
};
|
|
5347
|
+
interface HTMLBsSessionTimeoutElementEventMap {
|
|
5348
|
+
"bsPrimary": { password?: string } | void;
|
|
5349
|
+
"bsSecondary": void;
|
|
5350
|
+
"bsAlternative": { id: string };
|
|
5351
|
+
"bsCancel": void;
|
|
5352
|
+
"bsExpire": void;
|
|
5353
|
+
}
|
|
5354
|
+
/**
|
|
5355
|
+
* The three moments around an expiring session, as one card. Matches the Figma "Session timeout"
|
|
5356
|
+
* component's three types:
|
|
5357
|
+
* - `warning` -- "You'll be signed out soon": a live countdown with a draining bar, an optional
|
|
5358
|
+
* "your work is saved" note, and Sign out now / Stay signed in.
|
|
5359
|
+
* - `signed-out` -- "You've been signed out": who was signed in, with Sign in again and Use a different
|
|
5360
|
+
* account.
|
|
5361
|
+
* - `confirm-identity` -- "Confirm it's you": a fresh password check before a sensitive action, with
|
|
5362
|
+
* passkey / BankID alternatives and Cancel.
|
|
5363
|
+
* The component never signs anyone in or out. It shows the state and emits `bsPrimary`, `bsSecondary`,
|
|
5364
|
+
* `bsAlternative`, `bsCancel` and `bsExpire`; your app talks to the identity provider.
|
|
5365
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions),
|
|
5366
|
+
* `bs-progress-linear` (the countdown bar), `bs-avatar` (the signed-in account), `bs-input` (the
|
|
5367
|
+
* password field).
|
|
5368
|
+
* ## When to use
|
|
5369
|
+
* - Warning someone, before it happens, that an inactivity timeout is about to end their session.
|
|
5370
|
+
* - Telling someone their session ended, and letting them pick up where they left off.
|
|
5371
|
+
* - Asking for a fresh credential before a sensitive action.
|
|
5372
|
+
* ## When not to use
|
|
5373
|
+
* - A first-time sign-in page -- this assumes there was a session.
|
|
5374
|
+
* - Anything that is not about the session or the user's identity -- use `bs-dialog`.
|
|
5375
|
+
* ## Accessibility
|
|
5376
|
+
* The card is a labelled region. The countdown is a `timer` and is *not* announced every second; a polite
|
|
5377
|
+
* live region announces the time left at 60, 30 and 10 seconds instead. Wrap the card in your own modal
|
|
5378
|
+
* (`bs-dialog`) if the warning must trap focus.
|
|
5379
|
+
*/
|
|
5380
|
+
interface HTMLBsSessionTimeoutElement extends Components.BsSessionTimeout, HTMLStencilElement {
|
|
5381
|
+
addEventListener<K extends keyof HTMLBsSessionTimeoutElementEventMap>(type: K, listener: (this: HTMLBsSessionTimeoutElement, ev: BsSessionTimeoutCustomEvent<HTMLBsSessionTimeoutElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5382
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5383
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5384
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
5385
|
+
removeEventListener<K extends keyof HTMLBsSessionTimeoutElementEventMap>(type: K, listener: (this: HTMLBsSessionTimeoutElement, ev: BsSessionTimeoutCustomEvent<HTMLBsSessionTimeoutElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
5386
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
5387
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
5388
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
5389
|
+
}
|
|
5390
|
+
var HTMLBsSessionTimeoutElement: {
|
|
5391
|
+
prototype: HTMLBsSessionTimeoutElement;
|
|
5392
|
+
new (): HTMLBsSessionTimeoutElement;
|
|
5393
|
+
};
|
|
4240
5394
|
interface HTMLBsSliderElementEventMap {
|
|
4241
5395
|
"bsChange": number;
|
|
4242
5396
|
"bsRangeChange": { start: number; end: number };
|
|
@@ -4509,6 +5663,7 @@ declare global {
|
|
|
4509
5663
|
* `value` is always 24-hour `HH:mm` (e.g. `"14:30"`), regardless of the displayed `format`.
|
|
4510
5664
|
* The picker renders inline at a fixed width; to show it as a popover, put it in your own overlay
|
|
4511
5665
|
* and close that overlay from `bsChange`/`bsCancel`.
|
|
5666
|
+
* **Built from:** `bs-card` (the surface), `bs-switch` (the 24h toggle), `bs-input` (the AM/PM dropdown), `bs-button` (Cancel/Confirm).
|
|
4512
5667
|
* ## When to use
|
|
4513
5668
|
* - Picking a time of day where the user steps through hours and minutes.
|
|
4514
5669
|
* ## When not to use
|
|
@@ -4589,6 +5744,75 @@ declare global {
|
|
|
4589
5744
|
prototype: HTMLBsTooltipElement;
|
|
4590
5745
|
new (): HTMLBsTooltipElement;
|
|
4591
5746
|
};
|
|
5747
|
+
interface HTMLBsWhatsNewElementEventMap {
|
|
5748
|
+
"bsMarkAllRead": void;
|
|
5749
|
+
"bsEntryAction": { id: string };
|
|
5750
|
+
"bsFilterChange": { value: string };
|
|
5751
|
+
"bsClose": void;
|
|
5752
|
+
"bsPrimary": void;
|
|
5753
|
+
"bsSecondary": void;
|
|
5754
|
+
"bsOpen": void;
|
|
5755
|
+
}
|
|
5756
|
+
/**
|
|
5757
|
+
* A product's "What's new" surface, in three forms matching the Figma component:
|
|
5758
|
+
* - `feed` -- a docked panel: heading, "Mark all as read", filter tabs, the list of updates (each a
|
|
5759
|
+
* `bs-whats-new-entry`) and a link to the full release notes.
|
|
5760
|
+
* - `announcement` -- one big update, with a hero image, a tag, a heading, a few bullet points, "1 of 3"
|
|
5761
|
+
* and Remind me later / Next.
|
|
5762
|
+
* - `teaser` -- a small card pointing at the feed: tag, date, heading, a line of text and "Open What's new".
|
|
5763
|
+
* The component only shows what you give it and reports what the user pressed. It doesn't fetch updates,
|
|
5764
|
+
* track which the user has seen, or decide when to appear: your app owns `entries` (with their `unread`
|
|
5765
|
+
* flags) and reacts to the events.
|
|
5766
|
+
* **Built from:** `bs-card` (the surface), `bs-whats-new-entry` (each update), `bs-tabs` (the filters),
|
|
5767
|
+
* `bs-chip-informative` (the tags), `bs-button`, `bs-icon-button`.
|
|
5768
|
+
* ## When to use
|
|
5769
|
+
* - Telling users about changes to the product, in a place they can come back to.
|
|
5770
|
+
* ## When not to use
|
|
5771
|
+
* - Messages about the user's own data or an action they just took -- use `bs-snackbar`, `bs-toast`.
|
|
5772
|
+
* - A guided walk through the interface -- use `bs-product-tour`.
|
|
5773
|
+
*/
|
|
5774
|
+
interface HTMLBsWhatsNewElement extends Components.BsWhatsNew, HTMLStencilElement {
|
|
5775
|
+
addEventListener<K extends keyof HTMLBsWhatsNewElementEventMap>(type: K, listener: (this: HTMLBsWhatsNewElement, ev: BsWhatsNewCustomEvent<HTMLBsWhatsNewElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5776
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5777
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5778
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
5779
|
+
removeEventListener<K extends keyof HTMLBsWhatsNewElementEventMap>(type: K, listener: (this: HTMLBsWhatsNewElement, ev: BsWhatsNewCustomEvent<HTMLBsWhatsNewElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
5780
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
5781
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
5782
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
5783
|
+
}
|
|
5784
|
+
var HTMLBsWhatsNewElement: {
|
|
5785
|
+
prototype: HTMLBsWhatsNewElement;
|
|
5786
|
+
new (): HTMLBsWhatsNewElement;
|
|
5787
|
+
};
|
|
5788
|
+
interface HTMLBsWhatsNewEntryElementEventMap {
|
|
5789
|
+
"bsAction": void;
|
|
5790
|
+
}
|
|
5791
|
+
/**
|
|
5792
|
+
* One update in a "What's new" list: a tag ("New feature", "Improvement", "Fix"), a date, an unread dot,
|
|
5793
|
+
* an optional image, a title, a short description and an optional action link ("Try it"). Matches the Figma
|
|
5794
|
+
* "What's new / Entry" component. It is a plain block of content -- no card -- so it can sit in a feed
|
|
5795
|
+
* (`bs-whats-new`), a list, or a page of release notes.
|
|
5796
|
+
* **Built from:** `bs-chip-informative` (the tag) and `bs-button` (the action).
|
|
5797
|
+
* ## When to use
|
|
5798
|
+
* - Announcing a change to the product, with enough detail to know whether it matters.
|
|
5799
|
+
* ## When not to use
|
|
5800
|
+
* - A message about the user's own data or an action they just took -- use `bs-snackbar` or `bs-toast`.
|
|
5801
|
+
*/
|
|
5802
|
+
interface HTMLBsWhatsNewEntryElement extends Components.BsWhatsNewEntry, HTMLStencilElement {
|
|
5803
|
+
addEventListener<K extends keyof HTMLBsWhatsNewEntryElementEventMap>(type: K, listener: (this: HTMLBsWhatsNewEntryElement, ev: BsWhatsNewEntryCustomEvent<HTMLBsWhatsNewEntryElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5804
|
+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5805
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
|
5806
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
5807
|
+
removeEventListener<K extends keyof HTMLBsWhatsNewEntryElementEventMap>(type: K, listener: (this: HTMLBsWhatsNewEntryElement, ev: BsWhatsNewEntryCustomEvent<HTMLBsWhatsNewEntryElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
|
5808
|
+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
5809
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
5810
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
5811
|
+
}
|
|
5812
|
+
var HTMLBsWhatsNewEntryElement: {
|
|
5813
|
+
prototype: HTMLBsWhatsNewEntryElement;
|
|
5814
|
+
new (): HTMLBsWhatsNewEntryElement;
|
|
5815
|
+
};
|
|
4592
5816
|
interface HTMLElementTagNameMap {
|
|
4593
5817
|
"bs-accordion": HTMLBsAccordionElement;
|
|
4594
5818
|
"bs-ai-disclaimer": HTMLBsAiDisclaimerElement;
|
|
@@ -4617,12 +5841,15 @@ declare global {
|
|
|
4617
5841
|
"bs-chip-input": HTMLBsChipInputElement;
|
|
4618
5842
|
"bs-composer": HTMLBsComposerElement;
|
|
4619
5843
|
"bs-composer-status-banner": HTMLBsComposerStatusBannerElement;
|
|
5844
|
+
"bs-cookie-consent": HTMLBsCookieConsentElement;
|
|
4620
5845
|
"bs-data-table": HTMLBsDataTableElement;
|
|
4621
5846
|
"bs-datepicker": HTMLBsDatepickerElement;
|
|
4622
5847
|
"bs-dialog": HTMLBsDialogElement;
|
|
5848
|
+
"bs-error-page": HTMLBsErrorPageElement;
|
|
4623
5849
|
"bs-file-upload": HTMLBsFileUploadElement;
|
|
4624
5850
|
"bs-file-upload-item": HTMLBsFileUploadItemElement;
|
|
4625
5851
|
"bs-icon-button": HTMLBsIconButtonElement;
|
|
5852
|
+
"bs-icon-tile": HTMLBsIconTileElement;
|
|
4626
5853
|
"bs-inline-tab": HTMLBsInlineTabElement;
|
|
4627
5854
|
"bs-input": HTMLBsInputElement;
|
|
4628
5855
|
"bs-logo": HTMLBsLogoElement;
|
|
@@ -4631,10 +5858,14 @@ declare global {
|
|
|
4631
5858
|
"bs-navigation-drawer": HTMLBsNavigationDrawerElement;
|
|
4632
5859
|
"bs-navigation-drawer-item": HTMLBsNavigationDrawerItemElement;
|
|
4633
5860
|
"bs-navigation-header": HTMLBsNavigationHeaderElement;
|
|
5861
|
+
"bs-onboarding-checklist": HTMLBsOnboardingChecklistElement;
|
|
4634
5862
|
"bs-pagination": HTMLBsPaginationElement;
|
|
5863
|
+
"bs-product-tour": HTMLBsProductTourElement;
|
|
4635
5864
|
"bs-progress": HTMLBsProgressElement;
|
|
4636
5865
|
"bs-progress-linear": HTMLBsProgressLinearElement;
|
|
5866
|
+
"bs-qr-code": HTMLBsQrCodeElement;
|
|
4637
5867
|
"bs-radio": HTMLBsRadioElement;
|
|
5868
|
+
"bs-session-timeout": HTMLBsSessionTimeoutElement;
|
|
4638
5869
|
"bs-slider": HTMLBsSliderElement;
|
|
4639
5870
|
"bs-snackbar": HTMLBsSnackbarElement;
|
|
4640
5871
|
"bs-source-link": HTMLBsSourceLinkElement;
|
|
@@ -4646,6 +5877,8 @@ declare global {
|
|
|
4646
5877
|
"bs-timepicker": HTMLBsTimepickerElement;
|
|
4647
5878
|
"bs-toast": HTMLBsToastElement;
|
|
4648
5879
|
"bs-tooltip": HTMLBsTooltipElement;
|
|
5880
|
+
"bs-whats-new": HTMLBsWhatsNewElement;
|
|
5881
|
+
"bs-whats-new-entry": HTMLBsWhatsNewEntryElement;
|
|
4649
5882
|
}
|
|
4650
5883
|
}
|
|
4651
5884
|
declare namespace LocalJSX {
|
|
@@ -4953,7 +6186,7 @@ declare namespace LocalJSX {
|
|
|
4953
6186
|
*/
|
|
4954
6187
|
"current"?: boolean;
|
|
4955
6188
|
/**
|
|
4956
|
-
* Destination for a non-current crumb. Ignored when `current` is true -- the current page is never a link, even if `href` is set (see the class JSDoc).
|
|
6189
|
+
* Destination for a non-current crumb. Ignored when `current` is true -- the current page is never a link, even if `href` is set (see the class JSDoc). A non-current crumb **without** `href` renders as plain text that looks identical to a link crumb at rest (only link crumbs get the hover/focus styles), so give every non-current crumb an `href` unless it is deliberately not navigable.
|
|
4957
6190
|
*/
|
|
4958
6191
|
"href"?: string;
|
|
4959
6192
|
/**
|
|
@@ -5057,6 +6290,9 @@ declare namespace LocalJSX {
|
|
|
5057
6290
|
* - `error` purely for visual emphasis — it signals a destructive action to the user, so reserve
|
|
5058
6291
|
* it for actions that actually delete/revoke/undo something.
|
|
5059
6292
|
* @prop --bs-button-radius - Corner radius. Aliased to `--bs-border-radius-100` by default.
|
|
6293
|
+
* @prop --bs-button-padding-x-sm - Left/right padding of a label-only button at `size="sm"`. Aliased to `--bs-spacing-300`.
|
|
6294
|
+
* @prop --bs-button-width - Width of the button. `auto` by default (fits its content); set `100%` for a full-width button, e.g. `bs-button { --bs-button-width: 100%; }`.
|
|
6295
|
+
* @prop --bs-button-subtle-color - Label/icon colour, `variant="subtle"`. Aliased to `--bs-color-neutral-default`; set it to `var(--bs-text-action)` for a blue text button.
|
|
5060
6296
|
* @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
|
|
5061
6297
|
* @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
|
|
5062
6298
|
* @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
|
|
@@ -5861,43 +7097,168 @@ declare namespace LocalJSX {
|
|
|
5861
7097
|
*/
|
|
5862
7098
|
interface BsComposerStatusBanner {
|
|
5863
7099
|
/**
|
|
5864
|
-
* Label for the action button, only rendered when `showButton` is true.
|
|
5865
|
-
* @default 'Continue'
|
|
7100
|
+
* Label for the action button, only rendered when `showButton` is true.
|
|
7101
|
+
* @default 'Continue'
|
|
7102
|
+
*/
|
|
7103
|
+
"actionLabel"?: string;
|
|
7104
|
+
/**
|
|
7105
|
+
* Whether the close button is rendered.
|
|
7106
|
+
* @default true
|
|
7107
|
+
*/
|
|
7108
|
+
"allowClose"?: boolean;
|
|
7109
|
+
/**
|
|
7110
|
+
* The message text.
|
|
7111
|
+
* @default 'This is a message'
|
|
7112
|
+
*/
|
|
7113
|
+
"message"?: string;
|
|
7114
|
+
/**
|
|
7115
|
+
* Fires when the action button is clicked. Only relevant when `showButton` is true.
|
|
7116
|
+
*/
|
|
7117
|
+
"onBsAction"?: (event: BsComposerStatusBannerCustomEvent<void>) => void;
|
|
7118
|
+
/**
|
|
7119
|
+
* Fires when the close button is clicked. Only relevant when `allowClose` is true.
|
|
7120
|
+
*/
|
|
7121
|
+
"onBsClose"?: (event: BsComposerStatusBannerCustomEvent<void>) => void;
|
|
7122
|
+
/**
|
|
7123
|
+
* Whether the "Continue"-style action button is rendered.
|
|
7124
|
+
* @default false
|
|
7125
|
+
*/
|
|
7126
|
+
"showButton"?: boolean;
|
|
7127
|
+
/**
|
|
7128
|
+
* Whether the leading icon (default: clock) is rendered.
|
|
7129
|
+
* @default true
|
|
7130
|
+
*/
|
|
7131
|
+
"showIcon"?: boolean;
|
|
7132
|
+
/**
|
|
7133
|
+
* Which severity/style to render. Drives background, text/icon color, and the action button's color.
|
|
7134
|
+
* @default 'error'
|
|
7135
|
+
*/
|
|
7136
|
+
"type"?: BsComposerStatusBannerType;
|
|
7137
|
+
}
|
|
7138
|
+
/**
|
|
7139
|
+
* A cookie consent prompt in four forms, matching the Figma "Cookie consent" component:
|
|
7140
|
+
* - `banner` -- a wide bar: icon, heading, text, policy link, and Customise / Reject optional / Accept
|
|
7141
|
+
* all. Stacks into a column on narrow containers (its own width, not the viewport's).
|
|
7142
|
+
* - `card` -- the compact version of the same question, in a card.
|
|
7143
|
+
* - `preferences` -- the detailed dialog: one row per cookie category with a switch (strictly
|
|
7144
|
+
* necessary is "Always on"), an expandable list of the cookies in each, and Reject optional /
|
|
7145
|
+
* Accept all / Save choices.
|
|
7146
|
+
* - `saved` -- a dark confirmation bar ("Cookie choices saved") with a Change action.
|
|
7147
|
+
* The component only collects the choice. It doesn't set, read or delete cookies, remember that the
|
|
7148
|
+
* user answered, or decide when to show itself: your app does that from the events, and swaps `type`
|
|
7149
|
+
* (e.g. `banner` -> `preferences` on `bsCustomise`, `preferences` -> `saved` on `bsSave`).
|
|
7150
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions),
|
|
7151
|
+
* `bs-switch` (the category switches), `bs-chip-informative` (the "Always on" badge), `bs-icon-button`
|
|
7152
|
+
* (the close button), `bs-snackbar` (the saved confirmation).
|
|
7153
|
+
* ## When to use
|
|
7154
|
+
* - Asking for consent to optional cookies or similar tracking, as the law of your market requires.
|
|
7155
|
+
* ## When not to use
|
|
7156
|
+
* - Telling people about necessary cookies only -- that needs no consent prompt.
|
|
7157
|
+
* ## Fair choice
|
|
7158
|
+
* "Reject optional" has the same prominence as "Accept all" (same size, both always visible). Keep it
|
|
7159
|
+
* that way: a prompt that makes refusing harder than accepting isn't valid consent in most places.
|
|
7160
|
+
*/
|
|
7161
|
+
interface BsCookieConsent {
|
|
7162
|
+
/**
|
|
7163
|
+
* Label of the Accept all button.
|
|
7164
|
+
* @default 'Accept all'
|
|
7165
|
+
*/
|
|
7166
|
+
"acceptLabel"?: string;
|
|
7167
|
+
/**
|
|
7168
|
+
* Text of the badge on required categories (`preferences`).
|
|
7169
|
+
* @default 'Always on'
|
|
7170
|
+
*/
|
|
7171
|
+
"alwaysOnLabel"?: string;
|
|
7172
|
+
/**
|
|
7173
|
+
* The categories in the preferences dialog (`preferences`): `[{ id, label, description?, required?, enabled?, cookies? }]`. Defaults to Strictly necessary, Preferences, Analytics and Marketing. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
7174
|
+
* @default [ { id: 'necessary', label: 'Strictly necessary', description: 'Needed for sign-in, security and to keep the service running. These cannot be turned off.', required: true, cookies: [ 'Session cookie — keeps you signed in as you move between pages.', 'Security cookie — helps prevent fraud and unauthorized access.', 'Consent cookie — remembers your cookie consent choices.', ], }, { id: 'preferences', label: 'Preferences', description: 'Remember your language, theme and table layouts on this device.', enabled: true }, { id: 'analytics', label: 'Analytics', description: 'Help us understand which features are used so we can improve them. Data is anonymised.' }, { id: 'marketing', label: 'Marketing', description: 'Show relevant products on other websites.' }, ]
|
|
7175
|
+
*/
|
|
7176
|
+
"categories"?: BsCookieCategory[];
|
|
7177
|
+
/**
|
|
7178
|
+
* Label of the action on the confirmation (`saved`).
|
|
7179
|
+
* @default 'Change'
|
|
7180
|
+
*/
|
|
7181
|
+
"changeLabel"?: string;
|
|
7182
|
+
/**
|
|
7183
|
+
* Accessible name of the close button (`preferences`).
|
|
7184
|
+
* @default 'Close'
|
|
7185
|
+
*/
|
|
7186
|
+
"closeLabel"?: string;
|
|
7187
|
+
/**
|
|
7188
|
+
* Label of the Customise button.
|
|
7189
|
+
* @default 'Customise'
|
|
5866
7190
|
*/
|
|
5867
|
-
"
|
|
7191
|
+
"customiseLabel"?: string;
|
|
5868
7192
|
/**
|
|
5869
|
-
*
|
|
5870
|
-
* @default true
|
|
7193
|
+
* Paragraph under the heading (the message, for `saved`). Defaults per `type`.
|
|
5871
7194
|
*/
|
|
5872
|
-
"
|
|
7195
|
+
"description"?: string;
|
|
5873
7196
|
/**
|
|
5874
|
-
*
|
|
5875
|
-
* @default 'This is a message'
|
|
7197
|
+
* Heading. Defaults per `type`.
|
|
5876
7198
|
*/
|
|
5877
|
-
"
|
|
7199
|
+
"heading"?: string;
|
|
5878
7200
|
/**
|
|
5879
|
-
*
|
|
7201
|
+
* HTML heading level, 1-6.
|
|
7202
|
+
* @default 2
|
|
5880
7203
|
*/
|
|
5881
|
-
"
|
|
7204
|
+
"headingLevel"?: number;
|
|
5882
7205
|
/**
|
|
5883
|
-
* Fires when
|
|
7206
|
+
* Fires when Accept all is pressed. `{ choices }` has every category on.
|
|
5884
7207
|
*/
|
|
5885
|
-
"
|
|
7208
|
+
"onBsAccept"?: (event: BsCookieConsentCustomEvent<{ choices: BsCookieChoices }>) => void;
|
|
5886
7209
|
/**
|
|
5887
|
-
*
|
|
5888
|
-
* @default false
|
|
7210
|
+
* Fires when a category switch is toggled (`preferences`).
|
|
5889
7211
|
*/
|
|
5890
|
-
"
|
|
7212
|
+
"onBsChoice"?: (event: BsCookieConsentCustomEvent<{ id: string; enabled: boolean }>) => void;
|
|
5891
7213
|
/**
|
|
5892
|
-
*
|
|
5893
|
-
* @default true
|
|
7214
|
+
* Fires when the close button is pressed (`preferences`).
|
|
5894
7215
|
*/
|
|
5895
|
-
"
|
|
7216
|
+
"onBsClose"?: (event: BsCookieConsentCustomEvent<void>) => void;
|
|
5896
7217
|
/**
|
|
5897
|
-
*
|
|
5898
|
-
* @default 'error'
|
|
7218
|
+
* Fires when Customise is pressed -- show the `preferences` form.
|
|
5899
7219
|
*/
|
|
5900
|
-
"
|
|
7220
|
+
"onBsCustomise"?: (event: BsCookieConsentCustomEvent<void>) => void;
|
|
7221
|
+
/**
|
|
7222
|
+
* Fires when the action on the confirmation is pressed (`saved`) -- reopen the preferences.
|
|
7223
|
+
*/
|
|
7224
|
+
"onBsManage"?: (event: BsCookieConsentCustomEvent<void>) => void;
|
|
7225
|
+
/**
|
|
7226
|
+
* Fires when Reject optional is pressed. `{ choices }` has only the required categories on.
|
|
7227
|
+
*/
|
|
7228
|
+
"onBsReject"?: (event: BsCookieConsentCustomEvent<{ choices: BsCookieChoices }>) => void;
|
|
7229
|
+
/**
|
|
7230
|
+
* Fires when Save choices is pressed (`preferences`), with the current switches.
|
|
7231
|
+
*/
|
|
7232
|
+
"onBsSave"?: (event: BsCookieConsentCustomEvent<{ choices: BsCookieChoices }>) => void;
|
|
7233
|
+
/**
|
|
7234
|
+
* Text of the policy link.
|
|
7235
|
+
* @default 'Read the cookie policy'
|
|
7236
|
+
*/
|
|
7237
|
+
"policyLabel"?: string;
|
|
7238
|
+
/**
|
|
7239
|
+
* URL of your cookie policy. The "Read the cookie policy" link is only shown when this is set.
|
|
7240
|
+
*/
|
|
7241
|
+
"policyUrl"?: string;
|
|
7242
|
+
/**
|
|
7243
|
+
* Label of the Reject optional button.
|
|
7244
|
+
* @default 'Reject optional'
|
|
7245
|
+
*/
|
|
7246
|
+
"rejectLabel"?: string;
|
|
7247
|
+
/**
|
|
7248
|
+
* Label of the Save choices button (`preferences`).
|
|
7249
|
+
* @default 'Save choices'
|
|
7250
|
+
*/
|
|
7251
|
+
"saveLabel"?: string;
|
|
7252
|
+
/**
|
|
7253
|
+
* Label of a category's disclosure; `{count}` is replaced by the number of cookies.
|
|
7254
|
+
* @default 'See {count} cookies'
|
|
7255
|
+
*/
|
|
7256
|
+
"seeCookiesLabel"?: string;
|
|
7257
|
+
/**
|
|
7258
|
+
* Which form: `banner`, `card`, `preferences` or `saved`.
|
|
7259
|
+
* @default 'banner'
|
|
7260
|
+
*/
|
|
7261
|
+
"type"?: BsCookieConsentType;
|
|
5901
7262
|
}
|
|
5902
7263
|
/**
|
|
5903
7264
|
* A sortable, optionally row-selectable table for tabular data.
|
|
@@ -5945,6 +7306,7 @@ declare namespace LocalJSX {
|
|
|
5945
7306
|
* ISO timestamps -- so a date can't shift by a day across time zones.
|
|
5946
7307
|
* The calendar renders inline at a fixed width; to show it as a popover, put it inside a
|
|
5947
7308
|
* `bs-menu` or your own overlay.
|
|
7309
|
+
* **Built from:** `bs-card` (the surface), `bs-input` (the month/year dropdown triggers and the range date fields), `bs-menu` and `bs-menu-item` (the month/year lists).
|
|
5948
7310
|
* ## When to use
|
|
5949
7311
|
* - Picking a date where seeing the surrounding days of the week/month helps (a booking, a
|
|
5950
7312
|
* deadline, a report window).
|
|
@@ -6077,6 +7439,64 @@ declare namespace LocalJSX {
|
|
|
6077
7439
|
*/
|
|
6078
7440
|
"size"?: BsDialogSize;
|
|
6079
7441
|
}
|
|
7442
|
+
/**
|
|
7443
|
+
* A full-block page for when the user can't get to what they asked for: page not found (404), a server
|
|
7444
|
+
* error (500), no access (403), planned maintenance, or no internet connection. Matches the Figma
|
|
7445
|
+
* "Error page" component's five states.
|
|
7446
|
+
* Each `type` brings its own icon, tint, code label ("404", "Maintenance", ...), heading, paragraph and
|
|
7447
|
+
* buttons, all overridable by props. The component doesn't navigate or retry anything: it emits
|
|
7448
|
+
* `bsPrimary` / `bsSecondary` and your app decides what "Go to Overview" or "Try again" does.
|
|
7449
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions).
|
|
7450
|
+
* ## When to use
|
|
7451
|
+
* - Replacing the content of a page or panel that can't be shown, with a clear way forward.
|
|
7452
|
+
* ## When not to use
|
|
7453
|
+
* - A problem with one field or one action -- use inline validation or a `bs-snackbar`.
|
|
7454
|
+
* - A blocking question the user must answer -- use `bs-dialog`.
|
|
7455
|
+
*/
|
|
7456
|
+
interface BsErrorPage {
|
|
7457
|
+
/**
|
|
7458
|
+
* The small label under the icon, e.g. "404". Defaults per `type` ("404", "500", "403", "Maintenance", "Offline"). Set it to an empty string to hide it.
|
|
7459
|
+
*/
|
|
7460
|
+
"code"?: string;
|
|
7461
|
+
/**
|
|
7462
|
+
* Paragraph under the heading. Defaults per `type`.
|
|
7463
|
+
*/
|
|
7464
|
+
"description"?: string;
|
|
7465
|
+
/**
|
|
7466
|
+
* Heading. Defaults per `type`.
|
|
7467
|
+
*/
|
|
7468
|
+
"heading"?: string;
|
|
7469
|
+
/**
|
|
7470
|
+
* HTML heading level for the heading, 1-6. Use 1 when this replaces the whole page; lower when it sits inside a section that already has a heading above it.
|
|
7471
|
+
* @default 1
|
|
7472
|
+
*/
|
|
7473
|
+
"headingLevel"?: number;
|
|
7474
|
+
/**
|
|
7475
|
+
* Fires when the primary button is pressed.
|
|
7476
|
+
*/
|
|
7477
|
+
"onBsPrimary"?: (event: BsErrorPageCustomEvent<void>) => void;
|
|
7478
|
+
/**
|
|
7479
|
+
* Fires when the secondary button is pressed.
|
|
7480
|
+
*/
|
|
7481
|
+
"onBsSecondary"?: (event: BsErrorPageCustomEvent<void>) => void;
|
|
7482
|
+
/**
|
|
7483
|
+
* Label of the primary button. Defaults per `type`. Set it to an empty string to hide it.
|
|
7484
|
+
*/
|
|
7485
|
+
"primaryLabel"?: string;
|
|
7486
|
+
/**
|
|
7487
|
+
* A small reference line under the buttons, e.g. `"Error ID: 7f3c-21a9 · 30.09.2026 10:42"`, for support to look up. Nothing is shown when empty.
|
|
7488
|
+
*/
|
|
7489
|
+
"reference"?: string;
|
|
7490
|
+
/**
|
|
7491
|
+
* Label of the secondary button. Defaults per `type` (only `not-found`, `server-error` and `no-access` have one). Set it to an empty string to hide it.
|
|
7492
|
+
*/
|
|
7493
|
+
"secondaryLabel"?: string;
|
|
7494
|
+
/**
|
|
7495
|
+
* Which error: `not-found` (404), `server-error` (500), `no-access` (403), `maintenance` or `offline`.
|
|
7496
|
+
* @default 'not-found'
|
|
7497
|
+
*/
|
|
7498
|
+
"type"?: BsErrorPageType;
|
|
7499
|
+
}
|
|
6080
7500
|
/**
|
|
6081
7501
|
* A file dropzone: drag files onto it, or press "Browse file" to open the file picker. It reports
|
|
6082
7502
|
* the chosen files and does nothing else -- the consuming app owns the upload itself and shows its
|
|
@@ -6251,6 +7671,36 @@ declare namespace LocalJSX {
|
|
|
6251
7671
|
*/
|
|
6252
7672
|
"variant"?: BsIconButtonVariant;
|
|
6253
7673
|
}
|
|
7674
|
+
/**
|
|
7675
|
+
* A small rounded square holding an icon, tinted by intent -- the visual marker next to a status,
|
|
7676
|
+
* a list item or a feature. Matches the Figma "Icon tile" component (3 sizes x 6 intents).
|
|
7677
|
+
* Each intent shows a default glyph (house, check, warning, cross, grid, info); put your own icon in
|
|
7678
|
+
* the default slot to replace it. A slotted icon is sized to the tile (12/16/24px) and coloured
|
|
7679
|
+
* with the intent's icon colour, as long as it draws with `currentColor`.
|
|
7680
|
+
* The tile is decorative by default (hidden from assistive tech). Don't rely on the colour or glyph
|
|
7681
|
+
* alone to convey status: slot text into `text` (it sits beside the square, in
|
|
7682
|
+
* `--bs-icon-tile-text-color`), or set `label` to give the tile its own accessible name.
|
|
7683
|
+
* ## When to use
|
|
7684
|
+
* - Marking a row, card or message with a status or category icon.
|
|
7685
|
+
* ## When not to use
|
|
7686
|
+
* - As a button -- it isn't interactive. Use `bs-icon-button`.
|
|
7687
|
+
*/
|
|
7688
|
+
interface BsIconTile {
|
|
7689
|
+
/**
|
|
7690
|
+
* Colour and default glyph. `brand` uses the brand colours; `information` the info palette.
|
|
7691
|
+
* @default 'default'
|
|
7692
|
+
*/
|
|
7693
|
+
"intent"?: BsIconTileIntent;
|
|
7694
|
+
/**
|
|
7695
|
+
* Accessible name. When set, the tile is exposed as an image with this name; when empty it is decorative and hidden from assistive tech.
|
|
7696
|
+
*/
|
|
7697
|
+
"label"?: string;
|
|
7698
|
+
/**
|
|
7699
|
+
* Tile size: `sm` 24px, `md` 32px, `lg` 48px.
|
|
7700
|
+
* @default 'sm'
|
|
7701
|
+
*/
|
|
7702
|
+
"size"?: BsIconTileSize;
|
|
7703
|
+
}
|
|
6254
7704
|
/**
|
|
6255
7705
|
* A pill-shaped tab button -- an optional leading icon plus a text label, rendered as a real
|
|
6256
7706
|
* `<button>` so it participates correctly in tab order and native click/keyboard activation.
|
|
@@ -6307,6 +7757,7 @@ declare namespace LocalJSX {
|
|
|
6307
7757
|
* range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
|
|
6308
7758
|
* select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
|
|
6309
7759
|
* share the same label/description/error/icon-slot chrome.
|
|
7760
|
+
* Built from: `bs-menu`/`bs-menu-item` (`type="dropdown"`) and `bs-chip-informative` + `bs-icon-button` (`type="chip"`).
|
|
6310
7761
|
* ## When to use
|
|
6311
7762
|
* - Collecting a single line of free-text, email, password, or numeric input.
|
|
6312
7763
|
* - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
|
|
@@ -6736,6 +8187,143 @@ declare namespace LocalJSX {
|
|
|
6736
8187
|
*/
|
|
6737
8188
|
"skipToContentLabel"?: string;
|
|
6738
8189
|
}
|
|
8190
|
+
/**
|
|
8191
|
+
* A "get set up" checklist, in four forms that matching the Figma "Onboarding checklist" component:
|
|
8192
|
+
* - `panel` -- the full list: heading, progress, every step with a status icon, and the current step
|
|
8193
|
+
* expanded with its description, time estimate, Skip for now and a primary action.
|
|
8194
|
+
* - `dashboard` -- a wide card for the top of a page: summary and progress on the left, the current step
|
|
8195
|
+
* and the next ones as small cards on the right, and a "See all steps" link.
|
|
8196
|
+
* - `launcher` -- a small always-visible chip that reopens the checklist; three layouts (`icon`, `ring`,
|
|
8197
|
+
* `inline`).
|
|
8198
|
+
* - `completion` -- the "You're all set" card once every step is done.
|
|
8199
|
+
* The component shows progress and reports what the user pressed. It doesn't know what a step means,
|
|
8200
|
+
* run it, or remember anything: your app owns the steps (`steps`, each with `done`), marks them done, and
|
|
8201
|
+
* decides which form to show.
|
|
8202
|
+
* **Built from:** `bs-card` (every surface), `bs-icon-tile` (the icons), `bs-button` (the actions),
|
|
8203
|
+
* `bs-icon-button` (the close button), `bs-progress-linear` (the progress bar), `bs-progress` (the launcher
|
|
8204
|
+
* ring).
|
|
8205
|
+
* ## When to use
|
|
8206
|
+
* - Guiding a new account or user through a short list of setup tasks they can do in any order or later.
|
|
8207
|
+
* ## When not to use
|
|
8208
|
+
* - A strict, linear flow where each step needs the one before -- use `bs-stepper`.
|
|
8209
|
+
* - A tour of the interface itself -- use `bs-product-tour`.
|
|
8210
|
+
* ## Accessibility
|
|
8211
|
+
* Steps are an ordered list; the current one has `aria-current="step"`, and each step carries a visually
|
|
8212
|
+
* hidden "Done" / "Not done". The progress bar is named with the progress text.
|
|
8213
|
+
*/
|
|
8214
|
+
interface BsOnboardingChecklist {
|
|
8215
|
+
/**
|
|
8216
|
+
* Caption on the cards of steps that come after the current one (`dashboard`).
|
|
8217
|
+
* @default 'After the step before'
|
|
8218
|
+
*/
|
|
8219
|
+
"afterLabel"?: string;
|
|
8220
|
+
/**
|
|
8221
|
+
* Shows a close button (`panel`, `dashboard`).
|
|
8222
|
+
* @default false
|
|
8223
|
+
*/
|
|
8224
|
+
"closable"?: boolean;
|
|
8225
|
+
/**
|
|
8226
|
+
* Accessible name of the close button.
|
|
8227
|
+
* @default 'Close'
|
|
8228
|
+
*/
|
|
8229
|
+
"closeLabel"?: string;
|
|
8230
|
+
/**
|
|
8231
|
+
* Paragraph under the heading. Defaults to a summary of the progress for `dashboard`. Nothing for `launcher`.
|
|
8232
|
+
*/
|
|
8233
|
+
"description"?: string;
|
|
8234
|
+
/**
|
|
8235
|
+
* Label of the main button (`completion`).
|
|
8236
|
+
* @default 'Go to dashboard'
|
|
8237
|
+
*/
|
|
8238
|
+
"doneLabel"?: string;
|
|
8239
|
+
/**
|
|
8240
|
+
* Heading. Defaults per `type` ("Get started", "Finish setting up", "Setup", "You're all set").
|
|
8241
|
+
*/
|
|
8242
|
+
"heading"?: string;
|
|
8243
|
+
/**
|
|
8244
|
+
* HTML heading level, 1-6.
|
|
8245
|
+
* @default 2
|
|
8246
|
+
*/
|
|
8247
|
+
"headingLevel"?: number;
|
|
8248
|
+
/**
|
|
8249
|
+
* Label of the secondary button (`completion`).
|
|
8250
|
+
* @default 'Hide checklist'
|
|
8251
|
+
*/
|
|
8252
|
+
"hideLabel"?: string;
|
|
8253
|
+
/**
|
|
8254
|
+
* Layout of the `launcher`: `icon` (tile, title, progress text), `ring` (circular progress, title, text) or `inline` (tile, title and text on one line, with a chevron).
|
|
8255
|
+
* @default 'icon'
|
|
8256
|
+
*/
|
|
8257
|
+
"launcherLayout"?: BsOnboardingLauncherLayout;
|
|
8258
|
+
/**
|
|
8259
|
+
* Fires when the close button is pressed.
|
|
8260
|
+
*/
|
|
8261
|
+
"onBsClose"?: (event: BsOnboardingChecklistCustomEvent<void>) => void;
|
|
8262
|
+
/**
|
|
8263
|
+
* Fires when the main button is pressed (`completion`).
|
|
8264
|
+
*/
|
|
8265
|
+
"onBsDone"?: (event: BsOnboardingChecklistCustomEvent<void>) => void;
|
|
8266
|
+
/**
|
|
8267
|
+
* Fires when Hide checklist is pressed (`completion`).
|
|
8268
|
+
*/
|
|
8269
|
+
"onBsHide"?: (event: BsOnboardingChecklistCustomEvent<void>) => void;
|
|
8270
|
+
/**
|
|
8271
|
+
* Fires when the user asks to open the full checklist: "See all steps" (`dashboard`) or the launcher.
|
|
8272
|
+
*/
|
|
8273
|
+
"onBsOpen"?: (event: BsOnboardingChecklistCustomEvent<void>) => void;
|
|
8274
|
+
/**
|
|
8275
|
+
* Fires when a step's primary action is pressed (`panel` button, `dashboard` Start): `{ id }`.
|
|
8276
|
+
*/
|
|
8277
|
+
"onBsStepAction"?: (event: BsOnboardingChecklistCustomEvent<{ id: string }>) => void;
|
|
8278
|
+
/**
|
|
8279
|
+
* Fires when "Skip for now" is pressed on the current step (`panel`): `{ id }`.
|
|
8280
|
+
*/
|
|
8281
|
+
"onBsStepSkip"?: (event: BsOnboardingChecklistCustomEvent<{ id: string }>) => void;
|
|
8282
|
+
/**
|
|
8283
|
+
* Template of the progress label; `{done}` and `{total}` are replaced.
|
|
8284
|
+
* @default '{done} of {total} done'
|
|
8285
|
+
*/
|
|
8286
|
+
"progressLabel"?: string;
|
|
8287
|
+
/**
|
|
8288
|
+
* Text under the launcher title. Defaults to "N% complete".
|
|
8289
|
+
*/
|
|
8290
|
+
"progressText"?: string;
|
|
8291
|
+
/**
|
|
8292
|
+
* Label of the link that opens the whole checklist (`dashboard`).
|
|
8293
|
+
* @default 'See all steps'
|
|
8294
|
+
*/
|
|
8295
|
+
"seeAllLabel"?: string;
|
|
8296
|
+
/**
|
|
8297
|
+
* Label of "Skip for now" on the current step (`panel`).
|
|
8298
|
+
* @default 'Skip for now'
|
|
8299
|
+
*/
|
|
8300
|
+
"skipLabel"?: string;
|
|
8301
|
+
/**
|
|
8302
|
+
* Label of the Start link on the current step's card (`dashboard`).
|
|
8303
|
+
* @default 'Start'
|
|
8304
|
+
*/
|
|
8305
|
+
"startLabel"?: string;
|
|
8306
|
+
/**
|
|
8307
|
+
* Visually hidden text on a finished step.
|
|
8308
|
+
* @default 'Done'
|
|
8309
|
+
*/
|
|
8310
|
+
"statusDoneLabel"?: string;
|
|
8311
|
+
/**
|
|
8312
|
+
* Visually hidden text on an unfinished step.
|
|
8313
|
+
* @default 'Not done'
|
|
8314
|
+
*/
|
|
8315
|
+
"statusTodoLabel"?: string;
|
|
8316
|
+
/**
|
|
8317
|
+
* The steps: `[{ id, label, description?, done?, estimate?, actionLabel?, skippable? }]`. The first step that isn't `done` is the current one. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
8318
|
+
* @default []
|
|
8319
|
+
*/
|
|
8320
|
+
"steps"?: BsOnboardingStep[];
|
|
8321
|
+
/**
|
|
8322
|
+
* Which form: `panel`, `dashboard`, `launcher` or `completion`.
|
|
8323
|
+
* @default 'panel'
|
|
8324
|
+
*/
|
|
8325
|
+
"type"?: BsOnboardingChecklistType;
|
|
8326
|
+
}
|
|
6739
8327
|
/**
|
|
6740
8328
|
* A numbered page control -- previous/next chevrons, page-number buttons, and `...` overflow for
|
|
6741
8329
|
* large page counts. Matches the Figma "Pagination" component's "Default" type (the classic
|
|
@@ -6782,6 +8370,88 @@ declare namespace LocalJSX {
|
|
|
6782
8370
|
*/
|
|
6783
8371
|
"totalPages"?: number;
|
|
6784
8372
|
}
|
|
8373
|
+
/**
|
|
8374
|
+
* One step of a product tour: a centred **welcome** or **success** card with an art tile, or a
|
|
8375
|
+
* **pointer** card -- a compact step with a close button, a "1 of 3" progress label and Back/Next
|
|
8376
|
+
* actions -- whose arrow points at the thing it describes. Matches the Figma "Product Tour" and
|
|
8377
|
+
* "Pointer" components.
|
|
8378
|
+
* This is the step *card* only. It doesn't run a tour: it has no overlay, no spotlight, no
|
|
8379
|
+
* positioning against a target and no step sequencing. Your code decides which step is showing,
|
|
8380
|
+
* places the card next to its target (the arrow can sit on any of 12 positions via `direction`),
|
|
8381
|
+
* and moves on from `bsPrimary`/`bsSecondary`.
|
|
8382
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the art tile), `bs-button` (the actions), `bs-icon-button` (the close button).
|
|
8383
|
+
* ## When to use
|
|
8384
|
+
* - Introducing a feature on first run (`welcome`), confirming a finished tour (`success`), or
|
|
8385
|
+
* walking through the UI one pointer at a time (`pointer`).
|
|
8386
|
+
* ## When not to use
|
|
8387
|
+
* - A blocking decision or form -- use `bs-dialog`.
|
|
8388
|
+
* - A hint on hover or focus -- use `bs-tooltip`.
|
|
8389
|
+
*/
|
|
8390
|
+
interface BsProductTour {
|
|
8391
|
+
/**
|
|
8392
|
+
* Shows a close button in the corner (`pointer`).
|
|
8393
|
+
* @default false
|
|
8394
|
+
*/
|
|
8395
|
+
"closable"?: boolean;
|
|
8396
|
+
/**
|
|
8397
|
+
* Accessible name of the close button.
|
|
8398
|
+
* @default 'Close'
|
|
8399
|
+
*/
|
|
8400
|
+
"closeLabel"?: string;
|
|
8401
|
+
/**
|
|
8402
|
+
* Paragraph under the heading.
|
|
8403
|
+
*/
|
|
8404
|
+
"description"?: string;
|
|
8405
|
+
/**
|
|
8406
|
+
* Where the arrow sits (`pointer` only): the side of the card it's on, and for corners/edges which end it's near, e.g. `top-left` = on the top edge, near the left corner.
|
|
8407
|
+
* @default 'top'
|
|
8408
|
+
*/
|
|
8409
|
+
"direction"?: BsProductTourDirection;
|
|
8410
|
+
/**
|
|
8411
|
+
* Heading.
|
|
8412
|
+
*/
|
|
8413
|
+
"heading"?: string;
|
|
8414
|
+
/**
|
|
8415
|
+
* Fires when the close button is pressed.
|
|
8416
|
+
*/
|
|
8417
|
+
"onBsClose"?: (event: BsProductTourCustomEvent<void>) => void;
|
|
8418
|
+
/**
|
|
8419
|
+
* Fires when the primary button is pressed.
|
|
8420
|
+
*/
|
|
8421
|
+
"onBsPrimary"?: (event: BsProductTourCustomEvent<void>) => void;
|
|
8422
|
+
/**
|
|
8423
|
+
* Fires when the secondary button is pressed.
|
|
8424
|
+
*/
|
|
8425
|
+
"onBsSecondary"?: (event: BsProductTourCustomEvent<void>) => void;
|
|
8426
|
+
/**
|
|
8427
|
+
* Label of the primary button. Defaults to "Start" (`welcome`), "Done" (`success`) or "Next" (`pointer`). Set it to an empty string to hide the button.
|
|
8428
|
+
*/
|
|
8429
|
+
"primaryLabel"?: string;
|
|
8430
|
+
/**
|
|
8431
|
+
* Template of the progress label; `{step}` and `{total}` are replaced.
|
|
8432
|
+
* @default '{step} of {total}'
|
|
8433
|
+
*/
|
|
8434
|
+
"progressLabel"?: string;
|
|
8435
|
+
/**
|
|
8436
|
+
* Label of the secondary button. Defaults to "Later" (`welcome`) or "Back" (`pointer`); none for `success`. Set it to an empty string to hide the button.
|
|
8437
|
+
*/
|
|
8438
|
+
"secondaryLabel"?: string;
|
|
8439
|
+
/**
|
|
8440
|
+
* Current step, 1-based (`pointer`). Used with `total` for the progress label.
|
|
8441
|
+
* @default 1
|
|
8442
|
+
*/
|
|
8443
|
+
"step"?: number;
|
|
8444
|
+
/**
|
|
8445
|
+
* Number of steps (`pointer`). The progress label is hidden when this is 0.
|
|
8446
|
+
* @default 0
|
|
8447
|
+
*/
|
|
8448
|
+
"total"?: number;
|
|
8449
|
+
/**
|
|
8450
|
+
* `welcome` and `success` are centred cards with an art tile; `pointer` is the compact step with an arrow.
|
|
8451
|
+
* @default 'welcome'
|
|
8452
|
+
*/
|
|
8453
|
+
"type"?: BsProductTourType;
|
|
8454
|
+
}
|
|
6785
8455
|
/**
|
|
6786
8456
|
* A circular progress indicator -- either a static ring showing a percentage sweep
|
|
6787
8457
|
* (`type="determinate"`) or a continuously spinning ring signaling in-progress work with no known
|
|
@@ -6861,12 +8531,169 @@ declare namespace LocalJSX {
|
|
|
6861
8531
|
* `determinate` renders a static fill reflecting `value`; `indeterminate` renders a continuously sliding gradient bar and ignores `value`.
|
|
6862
8532
|
* @default 'determinate'
|
|
6863
8533
|
*/
|
|
6864
|
-
"type"?: BsProgressLinearType;
|
|
8534
|
+
"type"?: BsProgressLinearType;
|
|
8535
|
+
/**
|
|
8536
|
+
* Progress percentage, `0`-`100`. Only meaningful for `type="determinate"` -- ignored (and never rendered) for `type="indeterminate"`. Out-of-range values are clamped defensively.
|
|
8537
|
+
* @default 0
|
|
8538
|
+
*/
|
|
8539
|
+
"value"?: number;
|
|
8540
|
+
}
|
|
8541
|
+
/**
|
|
8542
|
+
* A block for sharing a link or taking a payment by QR code: a heading, the code on a white quiet
|
|
8543
|
+
* zone, the URL (or the amount, for payments) as text, an optional expiry chip, and Download and
|
|
8544
|
+
* Copy link actions. Matches the Figma "QR code" component (3 sizes x 2 types x 5 states, plus the
|
|
8545
|
+
* "with logo" variant).
|
|
8546
|
+
* **This component draws a code, it doesn't encode one.** Generate the real code in your product
|
|
8547
|
+
* with a QR library and hand it over either as a `matrix` (a square `boolean[][]`, `true` = dark
|
|
8548
|
+
* module) or as your own element in the `code` slot (an `<img>`, `<svg>` or `<canvas>`).
|
|
8549
|
+
* The code always sits on a white quiet zone with black modules, in dark mode too -- scanners need
|
|
8550
|
+
* the contrast.
|
|
8551
|
+
* **Built from:** `bs-card` (the surface), `bs-button` (Download, Copy link, Retry, Refresh), `bs-progress` (the loading spinner), `bs-chip-informative` (the expiry chip), `bs-icon-button` (the close button).
|
|
8552
|
+
* ## When to use
|
|
8553
|
+
* - Sharing a link to an order, document or page that someone will open on a phone.
|
|
8554
|
+
* - Taking a payment with an amount (`type="payment"`).
|
|
8555
|
+
* ## When not to use
|
|
8556
|
+
* - Encoding long text blobs -- a QR code that dense is hard to scan at the sizes here.
|
|
8557
|
+
* ## States
|
|
8558
|
+
* `loading` (generating the code), `error` (couldn't generate it; Retry), `expired` (Refresh) and
|
|
8559
|
+
* `scanned` (done: "Scanned", or "Payment received" for payments). Download and Copy link are disabled
|
|
8560
|
+
* in every state but `default`, and hidden once `scanned`.
|
|
8561
|
+
*/
|
|
8562
|
+
interface BsQrCode {
|
|
8563
|
+
/**
|
|
8564
|
+
* The amount shown under the code (`type="payment"`), e.g. `"148,00 kr"`.
|
|
8565
|
+
*/
|
|
8566
|
+
"amount"?: string;
|
|
8567
|
+
/**
|
|
8568
|
+
* Small label above the amount.
|
|
8569
|
+
* @default 'Total'
|
|
8570
|
+
*/
|
|
8571
|
+
"amountLabel"?: string;
|
|
8572
|
+
/**
|
|
8573
|
+
* Shows a close button in the corner.
|
|
8574
|
+
* @default false
|
|
8575
|
+
*/
|
|
8576
|
+
"closable"?: boolean;
|
|
8577
|
+
/**
|
|
8578
|
+
* Accessible name of the close button.
|
|
8579
|
+
* @default 'Close'
|
|
8580
|
+
*/
|
|
8581
|
+
"closeLabel"?: string;
|
|
8582
|
+
/**
|
|
8583
|
+
* Accessible name for the code image, e.g. `"QR code for order SO-10482"`. Applies to `matrix`; give a slotted `<img>` its own `alt`.
|
|
8584
|
+
* @default 'QR code'
|
|
8585
|
+
*/
|
|
8586
|
+
"codeLabel"?: string;
|
|
8587
|
+
/**
|
|
8588
|
+
* Label of the Copy link button.
|
|
8589
|
+
* @default 'Copy link'
|
|
8590
|
+
*/
|
|
8591
|
+
"copyLabel"?: string;
|
|
8592
|
+
/**
|
|
8593
|
+
* Line under the heading.
|
|
8594
|
+
*/
|
|
8595
|
+
"description"?: string;
|
|
8596
|
+
/**
|
|
8597
|
+
* Label of the Download button.
|
|
8598
|
+
* @default 'Download PNG'
|
|
8599
|
+
*/
|
|
8600
|
+
"downloadLabel"?: string;
|
|
8601
|
+
/**
|
|
8602
|
+
* Text in the `error` overlay.
|
|
8603
|
+
* @default "Couldn't load code"
|
|
8604
|
+
*/
|
|
8605
|
+
"errorLabel"?: string;
|
|
8606
|
+
/**
|
|
8607
|
+
* Text in the `expired` overlay.
|
|
8608
|
+
* @default 'Code expired'
|
|
8609
|
+
*/
|
|
8610
|
+
"expiredLabel"?: string;
|
|
8611
|
+
/**
|
|
8612
|
+
* Text of the expiry chip, e.g. `"Expires in 04:59"`. No chip when empty.
|
|
8613
|
+
*/
|
|
8614
|
+
"expiry"?: string;
|
|
8615
|
+
/**
|
|
8616
|
+
* Heading text.
|
|
8617
|
+
* @default 'Share the order'
|
|
8618
|
+
*/
|
|
8619
|
+
"heading"?: string;
|
|
8620
|
+
/**
|
|
8621
|
+
* Hides the Download and Copy link row.
|
|
8622
|
+
* @default false
|
|
8623
|
+
*/
|
|
8624
|
+
"hideActions"?: boolean;
|
|
8625
|
+
/**
|
|
8626
|
+
* Hides the Copy link button.
|
|
8627
|
+
* @default false
|
|
8628
|
+
*/
|
|
8629
|
+
"hideCopy"?: boolean;
|
|
8630
|
+
/**
|
|
8631
|
+
* Hides the Download button.
|
|
8632
|
+
* @default false
|
|
8633
|
+
*/
|
|
8634
|
+
"hideDownload"?: boolean;
|
|
8635
|
+
/**
|
|
8636
|
+
* Text in the `loading` overlay.
|
|
8637
|
+
* @default 'Generating code'
|
|
8638
|
+
*/
|
|
8639
|
+
"loadingLabel"?: string;
|
|
8640
|
+
/**
|
|
8641
|
+
* The code as a square matrix of modules, `true` = dark. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule. Ignored when the `code` slot is used.
|
|
8642
|
+
*/
|
|
8643
|
+
"matrix"?: boolean[][];
|
|
8644
|
+
/**
|
|
8645
|
+
* Fires when the close button is pressed.
|
|
8646
|
+
*/
|
|
8647
|
+
"onBsClose"?: (event: BsQrCodeCustomEvent<void>) => void;
|
|
8648
|
+
/**
|
|
8649
|
+
* Fires when Copy link is pressed, after the component tries to put `url` on the clipboard. `{ url }` is the `url` prop.
|
|
8650
|
+
*/
|
|
8651
|
+
"onBsCopy"?: (event: BsQrCodeCustomEvent<{ url?: string }>) => void;
|
|
8652
|
+
/**
|
|
8653
|
+
* Fires when Download is pressed. The component doesn't render a file; produce it from the code you generated.
|
|
8654
|
+
*/
|
|
8655
|
+
"onBsDownload"?: (event: BsQrCodeCustomEvent<void>) => void;
|
|
8656
|
+
/**
|
|
8657
|
+
* Fires when Refresh is pressed (`expired` state). Set `state` back to `loading` yourself.
|
|
8658
|
+
*/
|
|
8659
|
+
"onBsRefresh"?: (event: BsQrCodeCustomEvent<void>) => void;
|
|
8660
|
+
/**
|
|
8661
|
+
* Fires when Retry is pressed (`error` state). Set `state` back to `loading` yourself.
|
|
8662
|
+
*/
|
|
8663
|
+
"onBsRetry"?: (event: BsQrCodeCustomEvent<void>) => void;
|
|
8664
|
+
/**
|
|
8665
|
+
* Label of the Refresh button (`expired`).
|
|
8666
|
+
* @default 'Refresh'
|
|
8667
|
+
*/
|
|
8668
|
+
"refreshLabel"?: string;
|
|
8669
|
+
/**
|
|
8670
|
+
* Label of the Retry button (`error`).
|
|
8671
|
+
* @default 'Retry'
|
|
8672
|
+
*/
|
|
8673
|
+
"retryLabel"?: string;
|
|
8674
|
+
/**
|
|
8675
|
+
* Text in the `scanned` overlay. Defaults to "Payment received" for `type="payment"` and "Scanned" otherwise.
|
|
8676
|
+
*/
|
|
8677
|
+
"scannedLabel"?: string;
|
|
8678
|
+
/**
|
|
8679
|
+
* Card size: `sm`, `md` (default) or `lg`.
|
|
8680
|
+
* @default 'md'
|
|
8681
|
+
*/
|
|
8682
|
+
"size"?: BsQrCodeSize;
|
|
8683
|
+
/**
|
|
8684
|
+
* `default`, or one of the overlay states: `loading`, `error`, `expired`, `scanned`.
|
|
8685
|
+
* @default 'default'
|
|
8686
|
+
*/
|
|
8687
|
+
"state"?: BsQrCodeState;
|
|
8688
|
+
/**
|
|
8689
|
+
* `default` shows the URL under the code; `payment` shows the amount instead.
|
|
8690
|
+
* @default 'default'
|
|
8691
|
+
*/
|
|
8692
|
+
"type"?: BsQrCodeType;
|
|
6865
8693
|
/**
|
|
6866
|
-
*
|
|
6867
|
-
* @default 0
|
|
8694
|
+
* The link shown as text under the code (`type="default"`), and copied by Copy link.
|
|
6868
8695
|
*/
|
|
6869
|
-
"
|
|
8696
|
+
"url"?: string;
|
|
6870
8697
|
}
|
|
6871
8698
|
/**
|
|
6872
8699
|
* A single radio button with its label, for one mutually-exclusive choice within a group.
|
|
@@ -6906,6 +8733,150 @@ declare namespace LocalJSX {
|
|
|
6906
8733
|
*/
|
|
6907
8734
|
"value"?: string;
|
|
6908
8735
|
}
|
|
8736
|
+
/**
|
|
8737
|
+
* The three moments around an expiring session, as one card. Matches the Figma "Session timeout"
|
|
8738
|
+
* component's three types:
|
|
8739
|
+
* - `warning` -- "You'll be signed out soon": a live countdown with a draining bar, an optional
|
|
8740
|
+
* "your work is saved" note, and Sign out now / Stay signed in.
|
|
8741
|
+
* - `signed-out` -- "You've been signed out": who was signed in, with Sign in again and Use a different
|
|
8742
|
+
* account.
|
|
8743
|
+
* - `confirm-identity` -- "Confirm it's you": a fresh password check before a sensitive action, with
|
|
8744
|
+
* passkey / BankID alternatives and Cancel.
|
|
8745
|
+
* The component never signs anyone in or out. It shows the state and emits `bsPrimary`, `bsSecondary`,
|
|
8746
|
+
* `bsAlternative`, `bsCancel` and `bsExpire`; your app talks to the identity provider.
|
|
8747
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions),
|
|
8748
|
+
* `bs-progress-linear` (the countdown bar), `bs-avatar` (the signed-in account), `bs-input` (the
|
|
8749
|
+
* password field).
|
|
8750
|
+
* ## When to use
|
|
8751
|
+
* - Warning someone, before it happens, that an inactivity timeout is about to end their session.
|
|
8752
|
+
* - Telling someone their session ended, and letting them pick up where they left off.
|
|
8753
|
+
* - Asking for a fresh credential before a sensitive action.
|
|
8754
|
+
* ## When not to use
|
|
8755
|
+
* - A first-time sign-in page -- this assumes there was a session.
|
|
8756
|
+
* - Anything that is not about the session or the user's identity -- use `bs-dialog`.
|
|
8757
|
+
* ## Accessibility
|
|
8758
|
+
* The card is a labelled region. The countdown is a `timer` and is *not* announced every second; a polite
|
|
8759
|
+
* live region announces the time left at 60, 30 and 10 seconds instead. Wrap the card in your own modal
|
|
8760
|
+
* (`bs-dialog`) if the warning must trap focus.
|
|
8761
|
+
*/
|
|
8762
|
+
interface BsSessionTimeout {
|
|
8763
|
+
/**
|
|
8764
|
+
* Email of the account that was signed in (`signed-out`).
|
|
8765
|
+
*/
|
|
8766
|
+
"accountEmail"?: string;
|
|
8767
|
+
/**
|
|
8768
|
+
* Initials in the avatar (`signed-out`). Derived from `accountName` when not set.
|
|
8769
|
+
*/
|
|
8770
|
+
"accountInitials"?: string;
|
|
8771
|
+
/**
|
|
8772
|
+
* Name of the account that was signed in (`signed-out`).
|
|
8773
|
+
*/
|
|
8774
|
+
"accountName"?: string;
|
|
8775
|
+
/**
|
|
8776
|
+
* Other ways to confirm, shown as outlined buttons under the divider: `[{ id, label, icon? }]`. Defaults to a passkey and a BankID button. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule. Set `[]` to hide them.
|
|
8777
|
+
* @default [ { id: 'passkey', label: 'Use passkey', icon: 'fingerprint' }, { id: 'bankid', label: 'Use BankID', icon: 'key' }, ]
|
|
8778
|
+
*/
|
|
8779
|
+
"alternatives"?: BsSessionTimeoutAlternative[];
|
|
8780
|
+
/**
|
|
8781
|
+
* Label of the Cancel button (`confirm-identity`). Set to an empty string to hide it.
|
|
8782
|
+
* @default 'Cancel'
|
|
8783
|
+
*/
|
|
8784
|
+
"cancelLabel"?: string;
|
|
8785
|
+
/**
|
|
8786
|
+
* Count `secondsLeft` down once a second (`warning`), firing `bsExpire` at zero.
|
|
8787
|
+
* @default false
|
|
8788
|
+
*/
|
|
8789
|
+
"countdown"?: boolean;
|
|
8790
|
+
/**
|
|
8791
|
+
* Paragraph under the heading. Defaults per `type`.
|
|
8792
|
+
*/
|
|
8793
|
+
"description"?: string;
|
|
8794
|
+
/**
|
|
8795
|
+
* Label of the divider between the password and the alternatives.
|
|
8796
|
+
* @default 'or'
|
|
8797
|
+
*/
|
|
8798
|
+
"dividerLabel"?: string;
|
|
8799
|
+
/**
|
|
8800
|
+
* Heading. Defaults per `type`.
|
|
8801
|
+
*/
|
|
8802
|
+
"heading"?: string;
|
|
8803
|
+
/**
|
|
8804
|
+
* HTML heading level, 1-6.
|
|
8805
|
+
* @default 2
|
|
8806
|
+
*/
|
|
8807
|
+
"headingLevel"?: number;
|
|
8808
|
+
/**
|
|
8809
|
+
* Hides the icon tile.
|
|
8810
|
+
* @default false
|
|
8811
|
+
*/
|
|
8812
|
+
"hideIcon"?: boolean;
|
|
8813
|
+
/**
|
|
8814
|
+
* Fires when an alternative method is pressed (`confirm-identity`): `{ id }`.
|
|
8815
|
+
*/
|
|
8816
|
+
"onBsAlternative"?: (event: BsSessionTimeoutCustomEvent<{ id: string }>) => void;
|
|
8817
|
+
/**
|
|
8818
|
+
* Fires when Cancel is pressed (`confirm-identity`).
|
|
8819
|
+
*/
|
|
8820
|
+
"onBsCancel"?: (event: BsSessionTimeoutCustomEvent<void>) => void;
|
|
8821
|
+
/**
|
|
8822
|
+
* Fires once when `countdown` reaches zero.
|
|
8823
|
+
*/
|
|
8824
|
+
"onBsExpire"?: (event: BsSessionTimeoutCustomEvent<void>) => void;
|
|
8825
|
+
/**
|
|
8826
|
+
* Fires when the primary button is pressed. For `confirm-identity` the detail is `{ password }`; otherwise it is empty.
|
|
8827
|
+
*/
|
|
8828
|
+
"onBsPrimary"?: (event: BsSessionTimeoutCustomEvent<{ password?: string } | void>) => void;
|
|
8829
|
+
/**
|
|
8830
|
+
* Fires when the secondary button is pressed.
|
|
8831
|
+
*/
|
|
8832
|
+
"onBsSecondary"?: (event: BsSessionTimeoutCustomEvent<void>) => void;
|
|
8833
|
+
/**
|
|
8834
|
+
* Error shown under the password field, e.g. after a wrong password.
|
|
8835
|
+
*/
|
|
8836
|
+
"passwordError"?: string;
|
|
8837
|
+
/**
|
|
8838
|
+
* Label of the password field.
|
|
8839
|
+
* @default 'Password'
|
|
8840
|
+
*/
|
|
8841
|
+
"passwordLabel"?: string;
|
|
8842
|
+
/**
|
|
8843
|
+
* Label of the primary button. Defaults per `type` ("Stay signed in", "Sign in again", "Confirm").
|
|
8844
|
+
*/
|
|
8845
|
+
"primaryLabel"?: string;
|
|
8846
|
+
/**
|
|
8847
|
+
* Note under the countdown, e.g. "Your draft of INV-2041 is saved automatically." Hidden when empty.
|
|
8848
|
+
*/
|
|
8849
|
+
"savedMessage"?: string;
|
|
8850
|
+
/**
|
|
8851
|
+
* Label of the secondary button. Defaults per `type` ("Sign out now", "Use a different account"); none for `confirm-identity`. Set to an empty string to hide it.
|
|
8852
|
+
*/
|
|
8853
|
+
"secondaryLabel"?: string;
|
|
8854
|
+
/**
|
|
8855
|
+
* Seconds left before the session ends (`warning`). Mutable: with `countdown` the component decrements it itself; otherwise drive it from your own timer.
|
|
8856
|
+
* @default 0
|
|
8857
|
+
*/
|
|
8858
|
+
"secondsLeft"?: number;
|
|
8859
|
+
/**
|
|
8860
|
+
* Text next to the time under a minute.
|
|
8861
|
+
* @default 'seconds left'
|
|
8862
|
+
*/
|
|
8863
|
+
"secondsLeftLabel"?: string;
|
|
8864
|
+
/**
|
|
8865
|
+
* Text next to the time while a minute or more is left.
|
|
8866
|
+
* @default 'minutes left'
|
|
8867
|
+
*/
|
|
8868
|
+
"timeLeftLabel"?: string;
|
|
8869
|
+
/**
|
|
8870
|
+
* Length of the warning window in seconds, for the bar: it shows `secondsLeft / totalSeconds`. Defaults to the `secondsLeft` it first had.
|
|
8871
|
+
* @default 0
|
|
8872
|
+
*/
|
|
8873
|
+
"totalSeconds"?: number;
|
|
8874
|
+
/**
|
|
8875
|
+
* Which moment: `warning`, `signed-out` or `confirm-identity`.
|
|
8876
|
+
* @default 'warning'
|
|
8877
|
+
*/
|
|
8878
|
+
"type"?: BsSessionTimeoutType;
|
|
8879
|
+
}
|
|
6909
8880
|
/**
|
|
6910
8881
|
* A slider for picking a single numeric value (`type="default"`), a value snapped to evenly
|
|
6911
8882
|
* spaced ticks (`type="segmented"`), or a min/max pair (`type="range"`) from within a bounded
|
|
@@ -7021,6 +8992,15 @@ declare namespace LocalJSX {
|
|
|
7021
8992
|
* Label for the optional action button (e.g. "Undo", "Retry"). Omit this prop entirely to render no action button at all -- its presence, not a boolean flag, is what shows it.
|
|
7022
8993
|
*/
|
|
7023
8994
|
"actionLabel"?: string;
|
|
8995
|
+
/**
|
|
8996
|
+
* Variant of the action button. Defaults to the one that matches `variant` (outlined for `default`). Use `subtle` for a plain text action; colour it with `--bs-button-subtle-color` on `::part(action)`.
|
|
8997
|
+
*/
|
|
8998
|
+
"actionVariant"?: BsButtonVariant1;
|
|
8999
|
+
/**
|
|
9000
|
+
* Hides the close button, for a confirmation that goes away on its own or whose only control is the action. A snackbar with no way to dismiss it must be removed by the consumer.
|
|
9001
|
+
* @default false
|
|
9002
|
+
*/
|
|
9003
|
+
"hideClose"?: boolean;
|
|
7024
9004
|
/**
|
|
7025
9005
|
* Replaces the checkmark icon with a spinning loading indicator, for a message describing in-progress work (e.g. "Uploading files...") rather than a completed result.
|
|
7026
9006
|
* @default false
|
|
@@ -7332,6 +9312,7 @@ declare namespace LocalJSX {
|
|
|
7332
9312
|
* `value` is always 24-hour `HH:mm` (e.g. `"14:30"`), regardless of the displayed `format`.
|
|
7333
9313
|
* The picker renders inline at a fixed width; to show it as a popover, put it in your own overlay
|
|
7334
9314
|
* and close that overlay from `bsChange`/`bsCancel`.
|
|
9315
|
+
* **Built from:** `bs-card` (the surface), `bs-switch` (the 24h toggle), `bs-input` (the AM/PM dropdown), `bs-button` (Cancel/Confirm).
|
|
7335
9316
|
* ## When to use
|
|
7336
9317
|
* - Picking a time of day where the user steps through hours and minutes.
|
|
7337
9318
|
* ## When not to use
|
|
@@ -7465,6 +9446,230 @@ declare namespace LocalJSX {
|
|
|
7465
9446
|
*/
|
|
7466
9447
|
"placement"?: 'top';
|
|
7467
9448
|
}
|
|
9449
|
+
/**
|
|
9450
|
+
* A product's "What's new" surface, in three forms matching the Figma component:
|
|
9451
|
+
* - `feed` -- a docked panel: heading, "Mark all as read", filter tabs, the list of updates (each a
|
|
9452
|
+
* `bs-whats-new-entry`) and a link to the full release notes.
|
|
9453
|
+
* - `announcement` -- one big update, with a hero image, a tag, a heading, a few bullet points, "1 of 3"
|
|
9454
|
+
* and Remind me later / Next.
|
|
9455
|
+
* - `teaser` -- a small card pointing at the feed: tag, date, heading, a line of text and "Open What's new".
|
|
9456
|
+
* The component only shows what you give it and reports what the user pressed. It doesn't fetch updates,
|
|
9457
|
+
* track which the user has seen, or decide when to appear: your app owns `entries` (with their `unread`
|
|
9458
|
+
* flags) and reacts to the events.
|
|
9459
|
+
* **Built from:** `bs-card` (the surface), `bs-whats-new-entry` (each update), `bs-tabs` (the filters),
|
|
9460
|
+
* `bs-chip-informative` (the tags), `bs-button`, `bs-icon-button`.
|
|
9461
|
+
* ## When to use
|
|
9462
|
+
* - Telling users about changes to the product, in a place they can come back to.
|
|
9463
|
+
* ## When not to use
|
|
9464
|
+
* - Messages about the user's own data or an action they just took -- use `bs-snackbar`, `bs-toast`.
|
|
9465
|
+
* - A guided walk through the interface -- use `bs-product-tour`.
|
|
9466
|
+
*/
|
|
9467
|
+
interface BsWhatsNew {
|
|
9468
|
+
/**
|
|
9469
|
+
* Label of the link (`teaser`).
|
|
9470
|
+
* @default 'Open What’s new'
|
|
9471
|
+
*/
|
|
9472
|
+
"actionLabel"?: string;
|
|
9473
|
+
/**
|
|
9474
|
+
* Shows a close button.
|
|
9475
|
+
* @default false
|
|
9476
|
+
*/
|
|
9477
|
+
"closable"?: boolean;
|
|
9478
|
+
/**
|
|
9479
|
+
* Accessible name of the close button.
|
|
9480
|
+
* @default 'Close'
|
|
9481
|
+
*/
|
|
9482
|
+
"closeLabel"?: string;
|
|
9483
|
+
/**
|
|
9484
|
+
* The date as text (`teaser`).
|
|
9485
|
+
*/
|
|
9486
|
+
"date"?: string;
|
|
9487
|
+
/**
|
|
9488
|
+
* The line under the heading (`teaser`).
|
|
9489
|
+
*/
|
|
9490
|
+
"description"?: string;
|
|
9491
|
+
/**
|
|
9492
|
+
* Text shown when the selected filter has no entries.
|
|
9493
|
+
* @default 'Nothing new here yet.'
|
|
9494
|
+
*/
|
|
9495
|
+
"emptyLabel"?: string;
|
|
9496
|
+
/**
|
|
9497
|
+
* The updates in the feed: `[{ id, category?, tag?, tagColor?, date?, unread?, heading, description?, actionLabel?, image? }]`. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule.
|
|
9498
|
+
* @default []
|
|
9499
|
+
*/
|
|
9500
|
+
"entries"?: BsWhatsNewItem[];
|
|
9501
|
+
/**
|
|
9502
|
+
* The selected filter's `value`. Mutable: choosing a tab updates it.
|
|
9503
|
+
* @default 'all'
|
|
9504
|
+
*/
|
|
9505
|
+
"filter"?: string;
|
|
9506
|
+
/**
|
|
9507
|
+
* The filter tabs: `[{ value, label }]`. `value: "all"` shows every entry; any other value shows the entries whose `category` matches. Defaults to All, New Features, Improvements and Fixes (categories `features`, `improvements`, `fixes`). Set `[]` for no tabs.
|
|
9508
|
+
* @default [ { value: 'all', label: 'All' }, { value: 'features', label: 'New Features' }, { value: 'improvements', label: 'Improvements' }, { value: 'fixes', label: 'Fixes' }, ]
|
|
9509
|
+
*/
|
|
9510
|
+
"filters"?: BsWhatsNewFilter[];
|
|
9511
|
+
/**
|
|
9512
|
+
* Heading. Defaults to "What's new" for `feed`; set it for the other forms.
|
|
9513
|
+
*/
|
|
9514
|
+
"heading"?: string;
|
|
9515
|
+
/**
|
|
9516
|
+
* HTML heading level, 1-6.
|
|
9517
|
+
* @default 2
|
|
9518
|
+
*/
|
|
9519
|
+
"headingLevel"?: number;
|
|
9520
|
+
/**
|
|
9521
|
+
* URL of the hero image (`announcement`). Or slot your own into `hero`.
|
|
9522
|
+
*/
|
|
9523
|
+
"image"?: string;
|
|
9524
|
+
/**
|
|
9525
|
+
* Label of the "Mark all as read" button, shown while any entry is `unread`.
|
|
9526
|
+
* @default 'Mark all as read'
|
|
9527
|
+
*/
|
|
9528
|
+
"markAllReadLabel"?: string;
|
|
9529
|
+
/**
|
|
9530
|
+
* Fires when the close button is pressed.
|
|
9531
|
+
*/
|
|
9532
|
+
"onBsClose"?: (event: BsWhatsNewCustomEvent<void>) => void;
|
|
9533
|
+
/**
|
|
9534
|
+
* Fires when an entry's action link is pressed (`feed`): `{ id }`.
|
|
9535
|
+
*/
|
|
9536
|
+
"onBsEntryAction"?: (event: BsWhatsNewCustomEvent<{ id: string }>) => void;
|
|
9537
|
+
/**
|
|
9538
|
+
* Fires when the user picks a filter tab (`feed`): `{ value }`.
|
|
9539
|
+
*/
|
|
9540
|
+
"onBsFilterChange"?: (event: BsWhatsNewCustomEvent<{ value: string }>) => void;
|
|
9541
|
+
/**
|
|
9542
|
+
* Fires when "Mark all as read" is pressed (`feed`). Update the entries' `unread` yourself.
|
|
9543
|
+
*/
|
|
9544
|
+
"onBsMarkAllRead"?: (event: BsWhatsNewCustomEvent<void>) => void;
|
|
9545
|
+
/**
|
|
9546
|
+
* Fires when the teaser's link is pressed (`teaser`) -- open the feed.
|
|
9547
|
+
*/
|
|
9548
|
+
"onBsOpen"?: (event: BsWhatsNewCustomEvent<void>) => void;
|
|
9549
|
+
/**
|
|
9550
|
+
* Fires when the primary button (`announcement`) is pressed.
|
|
9551
|
+
*/
|
|
9552
|
+
"onBsPrimary"?: (event: BsWhatsNewCustomEvent<void>) => void;
|
|
9553
|
+
/**
|
|
9554
|
+
* Fires when the secondary button (`announcement`) is pressed.
|
|
9555
|
+
*/
|
|
9556
|
+
"onBsSecondary"?: (event: BsWhatsNewCustomEvent<void>) => void;
|
|
9557
|
+
/**
|
|
9558
|
+
* The bullet points (`announcement`). Must be set as a JS property -- see CONVENTIONS.md.
|
|
9559
|
+
* @default []
|
|
9560
|
+
*/
|
|
9561
|
+
"points"?: string[];
|
|
9562
|
+
/**
|
|
9563
|
+
* Label of the primary button (`announcement`). Empty hides it.
|
|
9564
|
+
* @default 'Next'
|
|
9565
|
+
*/
|
|
9566
|
+
"primaryLabel"?: string;
|
|
9567
|
+
/**
|
|
9568
|
+
* Text of the release notes link.
|
|
9569
|
+
* @default 'See all release notes'
|
|
9570
|
+
*/
|
|
9571
|
+
"releaseNotesLabel"?: string;
|
|
9572
|
+
/**
|
|
9573
|
+
* URL of the full release notes. The link is only shown when this is set.
|
|
9574
|
+
*/
|
|
9575
|
+
"releaseNotesUrl"?: string;
|
|
9576
|
+
/**
|
|
9577
|
+
* Label of the secondary button (`announcement`). Empty hides it.
|
|
9578
|
+
* @default 'Remind me later'
|
|
9579
|
+
*/
|
|
9580
|
+
"secondaryLabel"?: string;
|
|
9581
|
+
/**
|
|
9582
|
+
* Current step, 1-based (`announcement`). Used with `total`.
|
|
9583
|
+
* @default 1
|
|
9584
|
+
*/
|
|
9585
|
+
"step"?: number;
|
|
9586
|
+
/**
|
|
9587
|
+
* Template of the step label; `{step}` and `{total}` are replaced.
|
|
9588
|
+
* @default '{step} of {total}'
|
|
9589
|
+
*/
|
|
9590
|
+
"stepLabel"?: string;
|
|
9591
|
+
/**
|
|
9592
|
+
* Tag text (`announcement`, `teaser`), e.g. "New feature".
|
|
9593
|
+
*/
|
|
9594
|
+
"tag"?: string;
|
|
9595
|
+
/**
|
|
9596
|
+
* Colour of the tag.
|
|
9597
|
+
* @default 'info'
|
|
9598
|
+
*/
|
|
9599
|
+
"tagColor"?: BsWhatsNewEntryTagColor;
|
|
9600
|
+
/**
|
|
9601
|
+
* Number of announcements in the sequence (`announcement`). The step label is hidden when 0.
|
|
9602
|
+
* @default 0
|
|
9603
|
+
*/
|
|
9604
|
+
"total"?: number;
|
|
9605
|
+
/**
|
|
9606
|
+
* Which form: `feed`, `announcement` or `teaser`.
|
|
9607
|
+
* @default 'feed'
|
|
9608
|
+
*/
|
|
9609
|
+
"type"?: BsWhatsNewType;
|
|
9610
|
+
}
|
|
9611
|
+
/**
|
|
9612
|
+
* One update in a "What's new" list: a tag ("New feature", "Improvement", "Fix"), a date, an unread dot,
|
|
9613
|
+
* an optional image, a title, a short description and an optional action link ("Try it"). Matches the Figma
|
|
9614
|
+
* "What's new / Entry" component. It is a plain block of content -- no card -- so it can sit in a feed
|
|
9615
|
+
* (`bs-whats-new`), a list, or a page of release notes.
|
|
9616
|
+
* **Built from:** `bs-chip-informative` (the tag) and `bs-button` (the action).
|
|
9617
|
+
* ## When to use
|
|
9618
|
+
* - Announcing a change to the product, with enough detail to know whether it matters.
|
|
9619
|
+
* ## When not to use
|
|
9620
|
+
* - A message about the user's own data or an action they just took -- use `bs-snackbar` or `bs-toast`.
|
|
9621
|
+
*/
|
|
9622
|
+
interface BsWhatsNewEntry {
|
|
9623
|
+
/**
|
|
9624
|
+
* Label of the action link (e.g. "Try it"). No action when empty.
|
|
9625
|
+
*/
|
|
9626
|
+
"actionLabel"?: string;
|
|
9627
|
+
/**
|
|
9628
|
+
* The date as text, already formatted for the reader (e.g. "24.09.2026").
|
|
9629
|
+
*/
|
|
9630
|
+
"date"?: string;
|
|
9631
|
+
/**
|
|
9632
|
+
* Short description under the title.
|
|
9633
|
+
*/
|
|
9634
|
+
"description"?: string;
|
|
9635
|
+
/**
|
|
9636
|
+
* Draws a rule under the entry, to separate it from the next one.
|
|
9637
|
+
* @default false
|
|
9638
|
+
*/
|
|
9639
|
+
"divider"?: boolean;
|
|
9640
|
+
/**
|
|
9641
|
+
* Title.
|
|
9642
|
+
*/
|
|
9643
|
+
"heading"?: string;
|
|
9644
|
+
/**
|
|
9645
|
+
* HTML heading level for the title, 1-6.
|
|
9646
|
+
* @default 3
|
|
9647
|
+
*/
|
|
9648
|
+
"headingLevel"?: number;
|
|
9649
|
+
/**
|
|
9650
|
+
* Fires when the action link is pressed.
|
|
9651
|
+
*/
|
|
9652
|
+
"onBsAction"?: (event: BsWhatsNewEntryCustomEvent<void>) => void;
|
|
9653
|
+
/**
|
|
9654
|
+
* The tag text, e.g. "New feature". No tag when empty.
|
|
9655
|
+
*/
|
|
9656
|
+
"tag"?: string;
|
|
9657
|
+
/**
|
|
9658
|
+
* Colour of the tag: `info` (default), `success`, `warning`, `error` or `neutral`.
|
|
9659
|
+
* @default 'info'
|
|
9660
|
+
*/
|
|
9661
|
+
"tagColor"?: BsWhatsNewEntryTagColor1;
|
|
9662
|
+
/**
|
|
9663
|
+
* Shows a dot after the date for an update the user hasn't seen.
|
|
9664
|
+
* @default false
|
|
9665
|
+
*/
|
|
9666
|
+
"unread"?: boolean;
|
|
9667
|
+
/**
|
|
9668
|
+
* Visually hidden text for the unread dot.
|
|
9669
|
+
* @default 'Unread'
|
|
9670
|
+
*/
|
|
9671
|
+
"unreadLabel"?: string;
|
|
9672
|
+
}
|
|
7468
9673
|
|
|
7469
9674
|
interface BsAccordionAttributes {
|
|
7470
9675
|
"expanded": boolean;
|
|
@@ -7610,6 +9815,22 @@ declare namespace LocalJSX {
|
|
|
7610
9815
|
"actionLabel": string;
|
|
7611
9816
|
"allowClose": boolean;
|
|
7612
9817
|
}
|
|
9818
|
+
interface BsCookieConsentAttributes {
|
|
9819
|
+
"type": BsCookieConsentType;
|
|
9820
|
+
"heading": string;
|
|
9821
|
+
"headingLevel": number;
|
|
9822
|
+
"description": string;
|
|
9823
|
+
"policyUrl": string;
|
|
9824
|
+
"policyLabel": string;
|
|
9825
|
+
"customiseLabel": string;
|
|
9826
|
+
"rejectLabel": string;
|
|
9827
|
+
"acceptLabel": string;
|
|
9828
|
+
"saveLabel": string;
|
|
9829
|
+
"changeLabel": string;
|
|
9830
|
+
"alwaysOnLabel": string;
|
|
9831
|
+
"seeCookiesLabel": string;
|
|
9832
|
+
"closeLabel": string;
|
|
9833
|
+
}
|
|
7613
9834
|
interface BsDataTableAttributes {
|
|
7614
9835
|
"sortColumn": string;
|
|
7615
9836
|
"sortDirection": 'asc' | 'desc';
|
|
@@ -7638,6 +9859,16 @@ declare namespace LocalJSX {
|
|
|
7638
9859
|
"size": BsDialogSize;
|
|
7639
9860
|
"centered": boolean;
|
|
7640
9861
|
}
|
|
9862
|
+
interface BsErrorPageAttributes {
|
|
9863
|
+
"type": BsErrorPageType;
|
|
9864
|
+
"code": string;
|
|
9865
|
+
"heading": string;
|
|
9866
|
+
"headingLevel": number;
|
|
9867
|
+
"description": string;
|
|
9868
|
+
"primaryLabel": string;
|
|
9869
|
+
"secondaryLabel": string;
|
|
9870
|
+
"reference": string;
|
|
9871
|
+
}
|
|
7641
9872
|
interface BsFileUploadAttributes {
|
|
7642
9873
|
"direction": BsFileUploadDirection;
|
|
7643
9874
|
"heading": string;
|
|
@@ -7666,6 +9897,11 @@ declare namespace LocalJSX {
|
|
|
7666
9897
|
"type": 'button' | 'submit' | 'reset';
|
|
7667
9898
|
"ariaLabel": string | null;
|
|
7668
9899
|
}
|
|
9900
|
+
interface BsIconTileAttributes {
|
|
9901
|
+
"size": BsIconTileSize;
|
|
9902
|
+
"intent": BsIconTileIntent;
|
|
9903
|
+
"label": string;
|
|
9904
|
+
}
|
|
7669
9905
|
interface BsInlineTabAttributes {
|
|
7670
9906
|
"selected": boolean;
|
|
7671
9907
|
"disabled": boolean;
|
|
@@ -7736,6 +9972,25 @@ declare namespace LocalJSX {
|
|
|
7736
9972
|
"skipToContentLabel": string;
|
|
7737
9973
|
"logoBackground": 'auto' | 'light' | 'dark';
|
|
7738
9974
|
}
|
|
9975
|
+
interface BsOnboardingChecklistAttributes {
|
|
9976
|
+
"type": BsOnboardingChecklistType;
|
|
9977
|
+
"launcherLayout": BsOnboardingLauncherLayout;
|
|
9978
|
+
"heading": string;
|
|
9979
|
+
"description": string;
|
|
9980
|
+
"headingLevel": number;
|
|
9981
|
+
"progressText": string;
|
|
9982
|
+
"closable": boolean;
|
|
9983
|
+
"progressLabel": string;
|
|
9984
|
+
"skipLabel": string;
|
|
9985
|
+
"startLabel": string;
|
|
9986
|
+
"seeAllLabel": string;
|
|
9987
|
+
"afterLabel": string;
|
|
9988
|
+
"doneLabel": string;
|
|
9989
|
+
"hideLabel": string;
|
|
9990
|
+
"closeLabel": string;
|
|
9991
|
+
"statusDoneLabel": string;
|
|
9992
|
+
"statusTodoLabel": string;
|
|
9993
|
+
}
|
|
7739
9994
|
interface BsPaginationAttributes {
|
|
7740
9995
|
"totalPages": number;
|
|
7741
9996
|
"currentPage": number;
|
|
@@ -7743,6 +9998,19 @@ declare namespace LocalJSX {
|
|
|
7743
9998
|
"previousLabel": string;
|
|
7744
9999
|
"nextLabel": string;
|
|
7745
10000
|
}
|
|
10001
|
+
interface BsProductTourAttributes {
|
|
10002
|
+
"type": BsProductTourType;
|
|
10003
|
+
"direction": BsProductTourDirection;
|
|
10004
|
+
"heading": string;
|
|
10005
|
+
"description": string;
|
|
10006
|
+
"step": number;
|
|
10007
|
+
"total": number;
|
|
10008
|
+
"progressLabel": string;
|
|
10009
|
+
"primaryLabel": string;
|
|
10010
|
+
"secondaryLabel": string;
|
|
10011
|
+
"closable": boolean;
|
|
10012
|
+
"closeLabel": string;
|
|
10013
|
+
}
|
|
7746
10014
|
interface BsProgressAttributes {
|
|
7747
10015
|
"type": BsProgressType;
|
|
7748
10016
|
"size": BsProgressSize;
|
|
@@ -7758,12 +10026,59 @@ declare namespace LocalJSX {
|
|
|
7758
10026
|
"showLabel": boolean;
|
|
7759
10027
|
"ariaLabel": string | null;
|
|
7760
10028
|
}
|
|
10029
|
+
interface BsQrCodeAttributes {
|
|
10030
|
+
"type": BsQrCodeType;
|
|
10031
|
+
"size": BsQrCodeSize;
|
|
10032
|
+
"state": BsQrCodeState;
|
|
10033
|
+
"heading": string;
|
|
10034
|
+
"description": string;
|
|
10035
|
+
"url": string;
|
|
10036
|
+
"amount": string;
|
|
10037
|
+
"amountLabel": string;
|
|
10038
|
+
"expiry": string;
|
|
10039
|
+
"codeLabel": string;
|
|
10040
|
+
"closable": boolean;
|
|
10041
|
+
"hideActions": boolean;
|
|
10042
|
+
"hideDownload": boolean;
|
|
10043
|
+
"hideCopy": boolean;
|
|
10044
|
+
"downloadLabel": string;
|
|
10045
|
+
"copyLabel": string;
|
|
10046
|
+
"retryLabel": string;
|
|
10047
|
+
"refreshLabel": string;
|
|
10048
|
+
"loadingLabel": string;
|
|
10049
|
+
"errorLabel": string;
|
|
10050
|
+
"expiredLabel": string;
|
|
10051
|
+
"scannedLabel": string;
|
|
10052
|
+
"closeLabel": string;
|
|
10053
|
+
}
|
|
7761
10054
|
interface BsRadioAttributes {
|
|
7762
10055
|
"name": string;
|
|
7763
10056
|
"value": string;
|
|
7764
10057
|
"checked": boolean;
|
|
7765
10058
|
"disabled": boolean;
|
|
7766
10059
|
}
|
|
10060
|
+
interface BsSessionTimeoutAttributes {
|
|
10061
|
+
"type": BsSessionTimeoutType;
|
|
10062
|
+
"heading": string;
|
|
10063
|
+
"headingLevel": number;
|
|
10064
|
+
"description": string;
|
|
10065
|
+
"hideIcon": boolean;
|
|
10066
|
+
"primaryLabel": string;
|
|
10067
|
+
"secondaryLabel": string;
|
|
10068
|
+
"secondsLeft": number;
|
|
10069
|
+
"totalSeconds": number;
|
|
10070
|
+
"countdown": boolean;
|
|
10071
|
+
"timeLeftLabel": string;
|
|
10072
|
+
"secondsLeftLabel": string;
|
|
10073
|
+
"savedMessage": string;
|
|
10074
|
+
"accountName": string;
|
|
10075
|
+
"accountEmail": string;
|
|
10076
|
+
"accountInitials": string;
|
|
10077
|
+
"passwordLabel": string;
|
|
10078
|
+
"passwordError": string;
|
|
10079
|
+
"dividerLabel": string;
|
|
10080
|
+
"cancelLabel": string;
|
|
10081
|
+
}
|
|
7767
10082
|
interface BsSliderAttributes {
|
|
7768
10083
|
"type": BsSliderType;
|
|
7769
10084
|
"name": string;
|
|
@@ -7783,6 +10098,8 @@ declare namespace LocalJSX {
|
|
|
7783
10098
|
"variant": BsSnackbarVariant;
|
|
7784
10099
|
"loading": boolean;
|
|
7785
10100
|
"actionLabel": string;
|
|
10101
|
+
"actionVariant": BsButtonVariant;
|
|
10102
|
+
"hideClose": boolean;
|
|
7786
10103
|
}
|
|
7787
10104
|
interface BsSourceLinkAttributes {
|
|
7788
10105
|
"fileName": string;
|
|
@@ -7845,6 +10162,41 @@ declare namespace LocalJSX {
|
|
|
7845
10162
|
interface BsTooltipAttributes {
|
|
7846
10163
|
"placement": 'top';
|
|
7847
10164
|
}
|
|
10165
|
+
interface BsWhatsNewAttributes {
|
|
10166
|
+
"type": BsWhatsNewType;
|
|
10167
|
+
"heading": string;
|
|
10168
|
+
"headingLevel": number;
|
|
10169
|
+
"closable": boolean;
|
|
10170
|
+
"closeLabel": string;
|
|
10171
|
+
"filter": string;
|
|
10172
|
+
"markAllReadLabel": string;
|
|
10173
|
+
"releaseNotesLabel": string;
|
|
10174
|
+
"releaseNotesUrl": string;
|
|
10175
|
+
"emptyLabel": string;
|
|
10176
|
+
"tag": string;
|
|
10177
|
+
"tagColor": BsWhatsNewEntryTagColor;
|
|
10178
|
+
"image": string;
|
|
10179
|
+
"step": number;
|
|
10180
|
+
"total": number;
|
|
10181
|
+
"stepLabel": string;
|
|
10182
|
+
"secondaryLabel": string;
|
|
10183
|
+
"primaryLabel": string;
|
|
10184
|
+
"date": string;
|
|
10185
|
+
"description": string;
|
|
10186
|
+
"actionLabel": string;
|
|
10187
|
+
}
|
|
10188
|
+
interface BsWhatsNewEntryAttributes {
|
|
10189
|
+
"tag": string;
|
|
10190
|
+
"tagColor": BsWhatsNewEntryTagColor;
|
|
10191
|
+
"date": string;
|
|
10192
|
+
"unread": boolean;
|
|
10193
|
+
"heading": string;
|
|
10194
|
+
"headingLevel": number;
|
|
10195
|
+
"description": string;
|
|
10196
|
+
"actionLabel": string;
|
|
10197
|
+
"divider": boolean;
|
|
10198
|
+
"unreadLabel": string;
|
|
10199
|
+
}
|
|
7848
10200
|
|
|
7849
10201
|
interface IntrinsicElements {
|
|
7850
10202
|
"bs-accordion": Omit<BsAccordion, keyof BsAccordionAttributes> & { [K in keyof BsAccordion & keyof BsAccordionAttributes]?: BsAccordion[K] } & { [K in keyof BsAccordion & keyof BsAccordionAttributes as `attr:${K}`]?: BsAccordionAttributes[K] } & { [K in keyof BsAccordion & keyof BsAccordionAttributes as `prop:${K}`]?: BsAccordion[K] };
|
|
@@ -7874,12 +10226,15 @@ declare namespace LocalJSX {
|
|
|
7874
10226
|
"bs-chip-input": Omit<BsChipInput, keyof BsChipInputAttributes> & { [K in keyof BsChipInput & keyof BsChipInputAttributes]?: BsChipInput[K] } & { [K in keyof BsChipInput & keyof BsChipInputAttributes as `attr:${K}`]?: BsChipInputAttributes[K] } & { [K in keyof BsChipInput & keyof BsChipInputAttributes as `prop:${K}`]?: BsChipInput[K] };
|
|
7875
10227
|
"bs-composer": Omit<BsComposer, keyof BsComposerAttributes> & { [K in keyof BsComposer & keyof BsComposerAttributes]?: BsComposer[K] } & { [K in keyof BsComposer & keyof BsComposerAttributes as `attr:${K}`]?: BsComposerAttributes[K] } & { [K in keyof BsComposer & keyof BsComposerAttributes as `prop:${K}`]?: BsComposer[K] };
|
|
7876
10228
|
"bs-composer-status-banner": Omit<BsComposerStatusBanner, keyof BsComposerStatusBannerAttributes> & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes]?: BsComposerStatusBanner[K] } & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes as `attr:${K}`]?: BsComposerStatusBannerAttributes[K] } & { [K in keyof BsComposerStatusBanner & keyof BsComposerStatusBannerAttributes as `prop:${K}`]?: BsComposerStatusBanner[K] };
|
|
10229
|
+
"bs-cookie-consent": Omit<BsCookieConsent, keyof BsCookieConsentAttributes> & { [K in keyof BsCookieConsent & keyof BsCookieConsentAttributes]?: BsCookieConsent[K] } & { [K in keyof BsCookieConsent & keyof BsCookieConsentAttributes as `attr:${K}`]?: BsCookieConsentAttributes[K] } & { [K in keyof BsCookieConsent & keyof BsCookieConsentAttributes as `prop:${K}`]?: BsCookieConsent[K] };
|
|
7877
10230
|
"bs-data-table": Omit<BsDataTable, keyof BsDataTableAttributes> & { [K in keyof BsDataTable & keyof BsDataTableAttributes]?: BsDataTable[K] } & { [K in keyof BsDataTable & keyof BsDataTableAttributes as `attr:${K}`]?: BsDataTableAttributes[K] } & { [K in keyof BsDataTable & keyof BsDataTableAttributes as `prop:${K}`]?: BsDataTable[K] };
|
|
7878
10231
|
"bs-datepicker": Omit<BsDatepicker, keyof BsDatepickerAttributes> & { [K in keyof BsDatepicker & keyof BsDatepickerAttributes]?: BsDatepicker[K] } & { [K in keyof BsDatepicker & keyof BsDatepickerAttributes as `attr:${K}`]?: BsDatepickerAttributes[K] } & { [K in keyof BsDatepicker & keyof BsDatepickerAttributes as `prop:${K}`]?: BsDatepicker[K] };
|
|
7879
10232
|
"bs-dialog": Omit<BsDialog, keyof BsDialogAttributes> & { [K in keyof BsDialog & keyof BsDialogAttributes]?: BsDialog[K] } & { [K in keyof BsDialog & keyof BsDialogAttributes as `attr:${K}`]?: BsDialogAttributes[K] } & { [K in keyof BsDialog & keyof BsDialogAttributes as `prop:${K}`]?: BsDialog[K] };
|
|
10233
|
+
"bs-error-page": Omit<BsErrorPage, keyof BsErrorPageAttributes> & { [K in keyof BsErrorPage & keyof BsErrorPageAttributes]?: BsErrorPage[K] } & { [K in keyof BsErrorPage & keyof BsErrorPageAttributes as `attr:${K}`]?: BsErrorPageAttributes[K] } & { [K in keyof BsErrorPage & keyof BsErrorPageAttributes as `prop:${K}`]?: BsErrorPage[K] };
|
|
7880
10234
|
"bs-file-upload": Omit<BsFileUpload, keyof BsFileUploadAttributes> & { [K in keyof BsFileUpload & keyof BsFileUploadAttributes]?: BsFileUpload[K] } & { [K in keyof BsFileUpload & keyof BsFileUploadAttributes as `attr:${K}`]?: BsFileUploadAttributes[K] } & { [K in keyof BsFileUpload & keyof BsFileUploadAttributes as `prop:${K}`]?: BsFileUpload[K] };
|
|
7881
10235
|
"bs-file-upload-item": Omit<BsFileUploadItem, keyof BsFileUploadItemAttributes> & { [K in keyof BsFileUploadItem & keyof BsFileUploadItemAttributes]?: BsFileUploadItem[K] } & { [K in keyof BsFileUploadItem & keyof BsFileUploadItemAttributes as `attr:${K}`]?: BsFileUploadItemAttributes[K] } & { [K in keyof BsFileUploadItem & keyof BsFileUploadItemAttributes as `prop:${K}`]?: BsFileUploadItem[K] };
|
|
7882
10236
|
"bs-icon-button": Omit<BsIconButton, keyof BsIconButtonAttributes> & { [K in keyof BsIconButton & keyof BsIconButtonAttributes]?: BsIconButton[K] } & { [K in keyof BsIconButton & keyof BsIconButtonAttributes as `attr:${K}`]?: BsIconButtonAttributes[K] } & { [K in keyof BsIconButton & keyof BsIconButtonAttributes as `prop:${K}`]?: BsIconButton[K] };
|
|
10237
|
+
"bs-icon-tile": Omit<BsIconTile, keyof BsIconTileAttributes> & { [K in keyof BsIconTile & keyof BsIconTileAttributes]?: BsIconTile[K] } & { [K in keyof BsIconTile & keyof BsIconTileAttributes as `attr:${K}`]?: BsIconTileAttributes[K] } & { [K in keyof BsIconTile & keyof BsIconTileAttributes as `prop:${K}`]?: BsIconTile[K] };
|
|
7883
10238
|
"bs-inline-tab": Omit<BsInlineTab, keyof BsInlineTabAttributes> & { [K in keyof BsInlineTab & keyof BsInlineTabAttributes]?: BsInlineTab[K] } & { [K in keyof BsInlineTab & keyof BsInlineTabAttributes as `attr:${K}`]?: BsInlineTabAttributes[K] } & { [K in keyof BsInlineTab & keyof BsInlineTabAttributes as `prop:${K}`]?: BsInlineTab[K] };
|
|
7884
10239
|
"bs-input": Omit<BsInput, keyof BsInputAttributes> & { [K in keyof BsInput & keyof BsInputAttributes]?: BsInput[K] } & { [K in keyof BsInput & keyof BsInputAttributes as `attr:${K}`]?: BsInputAttributes[K] } & { [K in keyof BsInput & keyof BsInputAttributes as `prop:${K}`]?: BsInput[K] };
|
|
7885
10240
|
"bs-logo": Omit<BsLogo, keyof BsLogoAttributes> & { [K in keyof BsLogo & keyof BsLogoAttributes]?: BsLogo[K] } & { [K in keyof BsLogo & keyof BsLogoAttributes as `attr:${K}`]?: BsLogoAttributes[K] } & { [K in keyof BsLogo & keyof BsLogoAttributes as `prop:${K}`]?: BsLogo[K] };
|
|
@@ -7888,10 +10243,14 @@ declare namespace LocalJSX {
|
|
|
7888
10243
|
"bs-navigation-drawer": Omit<BsNavigationDrawer, keyof BsNavigationDrawerAttributes> & { [K in keyof BsNavigationDrawer & keyof BsNavigationDrawerAttributes]?: BsNavigationDrawer[K] } & { [K in keyof BsNavigationDrawer & keyof BsNavigationDrawerAttributes as `attr:${K}`]?: BsNavigationDrawerAttributes[K] } & { [K in keyof BsNavigationDrawer & keyof BsNavigationDrawerAttributes as `prop:${K}`]?: BsNavigationDrawer[K] };
|
|
7889
10244
|
"bs-navigation-drawer-item": Omit<BsNavigationDrawerItem, keyof BsNavigationDrawerItemAttributes> & { [K in keyof BsNavigationDrawerItem & keyof BsNavigationDrawerItemAttributes]?: BsNavigationDrawerItem[K] } & { [K in keyof BsNavigationDrawerItem & keyof BsNavigationDrawerItemAttributes as `attr:${K}`]?: BsNavigationDrawerItemAttributes[K] } & { [K in keyof BsNavigationDrawerItem & keyof BsNavigationDrawerItemAttributes as `prop:${K}`]?: BsNavigationDrawerItem[K] };
|
|
7890
10245
|
"bs-navigation-header": Omit<BsNavigationHeader, keyof BsNavigationHeaderAttributes> & { [K in keyof BsNavigationHeader & keyof BsNavigationHeaderAttributes]?: BsNavigationHeader[K] } & { [K in keyof BsNavigationHeader & keyof BsNavigationHeaderAttributes as `attr:${K}`]?: BsNavigationHeaderAttributes[K] } & { [K in keyof BsNavigationHeader & keyof BsNavigationHeaderAttributes as `prop:${K}`]?: BsNavigationHeader[K] };
|
|
10246
|
+
"bs-onboarding-checklist": Omit<BsOnboardingChecklist, keyof BsOnboardingChecklistAttributes> & { [K in keyof BsOnboardingChecklist & keyof BsOnboardingChecklistAttributes]?: BsOnboardingChecklist[K] } & { [K in keyof BsOnboardingChecklist & keyof BsOnboardingChecklistAttributes as `attr:${K}`]?: BsOnboardingChecklistAttributes[K] } & { [K in keyof BsOnboardingChecklist & keyof BsOnboardingChecklistAttributes as `prop:${K}`]?: BsOnboardingChecklist[K] };
|
|
7891
10247
|
"bs-pagination": Omit<BsPagination, keyof BsPaginationAttributes> & { [K in keyof BsPagination & keyof BsPaginationAttributes]?: BsPagination[K] } & { [K in keyof BsPagination & keyof BsPaginationAttributes as `attr:${K}`]?: BsPaginationAttributes[K] } & { [K in keyof BsPagination & keyof BsPaginationAttributes as `prop:${K}`]?: BsPagination[K] };
|
|
10248
|
+
"bs-product-tour": Omit<BsProductTour, keyof BsProductTourAttributes> & { [K in keyof BsProductTour & keyof BsProductTourAttributes]?: BsProductTour[K] } & { [K in keyof BsProductTour & keyof BsProductTourAttributes as `attr:${K}`]?: BsProductTourAttributes[K] } & { [K in keyof BsProductTour & keyof BsProductTourAttributes as `prop:${K}`]?: BsProductTour[K] };
|
|
7892
10249
|
"bs-progress": Omit<BsProgress, keyof BsProgressAttributes> & { [K in keyof BsProgress & keyof BsProgressAttributes]?: BsProgress[K] } & { [K in keyof BsProgress & keyof BsProgressAttributes as `attr:${K}`]?: BsProgressAttributes[K] } & { [K in keyof BsProgress & keyof BsProgressAttributes as `prop:${K}`]?: BsProgress[K] };
|
|
7893
10250
|
"bs-progress-linear": Omit<BsProgressLinear, keyof BsProgressLinearAttributes> & { [K in keyof BsProgressLinear & keyof BsProgressLinearAttributes]?: BsProgressLinear[K] } & { [K in keyof BsProgressLinear & keyof BsProgressLinearAttributes as `attr:${K}`]?: BsProgressLinearAttributes[K] } & { [K in keyof BsProgressLinear & keyof BsProgressLinearAttributes as `prop:${K}`]?: BsProgressLinear[K] };
|
|
10251
|
+
"bs-qr-code": Omit<BsQrCode, keyof BsQrCodeAttributes> & { [K in keyof BsQrCode & keyof BsQrCodeAttributes]?: BsQrCode[K] } & { [K in keyof BsQrCode & keyof BsQrCodeAttributes as `attr:${K}`]?: BsQrCodeAttributes[K] } & { [K in keyof BsQrCode & keyof BsQrCodeAttributes as `prop:${K}`]?: BsQrCode[K] };
|
|
7894
10252
|
"bs-radio": Omit<BsRadio, keyof BsRadioAttributes> & { [K in keyof BsRadio & keyof BsRadioAttributes]?: BsRadio[K] } & { [K in keyof BsRadio & keyof BsRadioAttributes as `attr:${K}`]?: BsRadioAttributes[K] } & { [K in keyof BsRadio & keyof BsRadioAttributes as `prop:${K}`]?: BsRadio[K] };
|
|
10253
|
+
"bs-session-timeout": Omit<BsSessionTimeout, keyof BsSessionTimeoutAttributes> & { [K in keyof BsSessionTimeout & keyof BsSessionTimeoutAttributes]?: BsSessionTimeout[K] } & { [K in keyof BsSessionTimeout & keyof BsSessionTimeoutAttributes as `attr:${K}`]?: BsSessionTimeoutAttributes[K] } & { [K in keyof BsSessionTimeout & keyof BsSessionTimeoutAttributes as `prop:${K}`]?: BsSessionTimeout[K] };
|
|
7895
10254
|
"bs-slider": Omit<BsSlider, keyof BsSliderAttributes> & { [K in keyof BsSlider & keyof BsSliderAttributes]?: BsSlider[K] } & { [K in keyof BsSlider & keyof BsSliderAttributes as `attr:${K}`]?: BsSliderAttributes[K] } & { [K in keyof BsSlider & keyof BsSliderAttributes as `prop:${K}`]?: BsSlider[K] };
|
|
7896
10255
|
"bs-snackbar": Omit<BsSnackbar, keyof BsSnackbarAttributes> & { [K in keyof BsSnackbar & keyof BsSnackbarAttributes]?: BsSnackbar[K] } & { [K in keyof BsSnackbar & keyof BsSnackbarAttributes as `attr:${K}`]?: BsSnackbarAttributes[K] } & { [K in keyof BsSnackbar & keyof BsSnackbarAttributes as `prop:${K}`]?: BsSnackbar[K] };
|
|
7897
10256
|
"bs-source-link": Omit<BsSourceLink, keyof BsSourceLinkAttributes> & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes]?: BsSourceLink[K] } & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes as `attr:${K}`]?: BsSourceLinkAttributes[K] } & { [K in keyof BsSourceLink & keyof BsSourceLinkAttributes as `prop:${K}`]?: BsSourceLink[K] };
|
|
@@ -7903,6 +10262,8 @@ declare namespace LocalJSX {
|
|
|
7903
10262
|
"bs-timepicker": Omit<BsTimepicker, keyof BsTimepickerAttributes> & { [K in keyof BsTimepicker & keyof BsTimepickerAttributes]?: BsTimepicker[K] } & { [K in keyof BsTimepicker & keyof BsTimepickerAttributes as `attr:${K}`]?: BsTimepickerAttributes[K] } & { [K in keyof BsTimepicker & keyof BsTimepickerAttributes as `prop:${K}`]?: BsTimepicker[K] };
|
|
7904
10263
|
"bs-toast": Omit<BsToast, keyof BsToastAttributes> & { [K in keyof BsToast & keyof BsToastAttributes]?: BsToast[K] } & { [K in keyof BsToast & keyof BsToastAttributes as `attr:${K}`]?: BsToastAttributes[K] } & { [K in keyof BsToast & keyof BsToastAttributes as `prop:${K}`]?: BsToast[K] };
|
|
7905
10264
|
"bs-tooltip": Omit<BsTooltip, keyof BsTooltipAttributes> & { [K in keyof BsTooltip & keyof BsTooltipAttributes]?: BsTooltip[K] } & { [K in keyof BsTooltip & keyof BsTooltipAttributes as `attr:${K}`]?: BsTooltipAttributes[K] } & { [K in keyof BsTooltip & keyof BsTooltipAttributes as `prop:${K}`]?: BsTooltip[K] };
|
|
10265
|
+
"bs-whats-new": Omit<BsWhatsNew, keyof BsWhatsNewAttributes> & { [K in keyof BsWhatsNew & keyof BsWhatsNewAttributes]?: BsWhatsNew[K] } & { [K in keyof BsWhatsNew & keyof BsWhatsNewAttributes as `attr:${K}`]?: BsWhatsNewAttributes[K] } & { [K in keyof BsWhatsNew & keyof BsWhatsNewAttributes as `prop:${K}`]?: BsWhatsNew[K] };
|
|
10266
|
+
"bs-whats-new-entry": Omit<BsWhatsNewEntry, keyof BsWhatsNewEntryAttributes> & { [K in keyof BsWhatsNewEntry & keyof BsWhatsNewEntryAttributes]?: BsWhatsNewEntry[K] } & { [K in keyof BsWhatsNewEntry & keyof BsWhatsNewEntryAttributes as `attr:${K}`]?: BsWhatsNewEntryAttributes[K] } & { [K in keyof BsWhatsNewEntry & keyof BsWhatsNewEntryAttributes as `prop:${K}`]?: BsWhatsNewEntry[K] };
|
|
7906
10267
|
}
|
|
7907
10268
|
}
|
|
7908
10269
|
export { LocalJSX as JSX };
|
|
@@ -8138,6 +10499,9 @@ declare module "@stencil/core" {
|
|
|
8138
10499
|
* - `error` purely for visual emphasis — it signals a destructive action to the user, so reserve
|
|
8139
10500
|
* it for actions that actually delete/revoke/undo something.
|
|
8140
10501
|
* @prop --bs-button-radius - Corner radius. Aliased to `--bs-border-radius-100` by default.
|
|
10502
|
+
* @prop --bs-button-padding-x-sm - Left/right padding of a label-only button at `size="sm"`. Aliased to `--bs-spacing-300`.
|
|
10503
|
+
* @prop --bs-button-width - Width of the button. `auto` by default (fits its content); set `100%` for a full-width button, e.g. `bs-button { --bs-button-width: 100%; }`.
|
|
10504
|
+
* @prop --bs-button-subtle-color - Label/icon colour, `variant="subtle"`. Aliased to `--bs-color-neutral-default`; set it to `var(--bs-text-action)` for a blue text button.
|
|
8141
10505
|
* @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
|
|
8142
10506
|
* @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
|
|
8143
10507
|
* @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
|
|
@@ -8524,6 +10888,30 @@ declare module "@stencil/core" {
|
|
|
8524
10888
|
* every `type`). Aliased to `--bs-color-neutral-container-hover`.
|
|
8525
10889
|
*/
|
|
8526
10890
|
"bs-composer-status-banner": LocalJSX.IntrinsicElements["bs-composer-status-banner"] & JSXBase.HTMLAttributes<HTMLBsComposerStatusBannerElement>;
|
|
10891
|
+
/**
|
|
10892
|
+
* A cookie consent prompt in four forms, matching the Figma "Cookie consent" component:
|
|
10893
|
+
* - `banner` -- a wide bar: icon, heading, text, policy link, and Customise / Reject optional / Accept
|
|
10894
|
+
* all. Stacks into a column on narrow containers (its own width, not the viewport's).
|
|
10895
|
+
* - `card` -- the compact version of the same question, in a card.
|
|
10896
|
+
* - `preferences` -- the detailed dialog: one row per cookie category with a switch (strictly
|
|
10897
|
+
* necessary is "Always on"), an expandable list of the cookies in each, and Reject optional /
|
|
10898
|
+
* Accept all / Save choices.
|
|
10899
|
+
* - `saved` -- a dark confirmation bar ("Cookie choices saved") with a Change action.
|
|
10900
|
+
* The component only collects the choice. It doesn't set, read or delete cookies, remember that the
|
|
10901
|
+
* user answered, or decide when to show itself: your app does that from the events, and swaps `type`
|
|
10902
|
+
* (e.g. `banner` -> `preferences` on `bsCustomise`, `preferences` -> `saved` on `bsSave`).
|
|
10903
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions),
|
|
10904
|
+
* `bs-switch` (the category switches), `bs-chip-informative` (the "Always on" badge), `bs-icon-button`
|
|
10905
|
+
* (the close button), `bs-snackbar` (the saved confirmation).
|
|
10906
|
+
* ## When to use
|
|
10907
|
+
* - Asking for consent to optional cookies or similar tracking, as the law of your market requires.
|
|
10908
|
+
* ## When not to use
|
|
10909
|
+
* - Telling people about necessary cookies only -- that needs no consent prompt.
|
|
10910
|
+
* ## Fair choice
|
|
10911
|
+
* "Reject optional" has the same prominence as "Accept all" (same size, both always visible). Keep it
|
|
10912
|
+
* that way: a prompt that makes refusing harder than accepting isn't valid consent in most places.
|
|
10913
|
+
*/
|
|
10914
|
+
"bs-cookie-consent": LocalJSX.IntrinsicElements["bs-cookie-consent"] & JSXBase.HTMLAttributes<HTMLBsCookieConsentElement>;
|
|
8527
10915
|
/**
|
|
8528
10916
|
* A sortable, optionally row-selectable table for tabular data.
|
|
8529
10917
|
* `columns`, `rows`, and `cellRenderer` are JS-property-only — HTML attributes can only carry
|
|
@@ -8544,6 +10932,7 @@ declare module "@stencil/core" {
|
|
|
8544
10932
|
* ISO timestamps -- so a date can't shift by a day across time zones.
|
|
8545
10933
|
* The calendar renders inline at a fixed width; to show it as a popover, put it inside a
|
|
8546
10934
|
* `bs-menu` or your own overlay.
|
|
10935
|
+
* **Built from:** `bs-card` (the surface), `bs-input` (the month/year dropdown triggers and the range date fields), `bs-menu` and `bs-menu-item` (the month/year lists).
|
|
8547
10936
|
* ## When to use
|
|
8548
10937
|
* - Picking a date where seeing the surrounding days of the week/month helps (a booking, a
|
|
8549
10938
|
* deadline, a report window).
|
|
@@ -8574,6 +10963,21 @@ declare module "@stencil/core" {
|
|
|
8574
10963
|
* button in the header row next to the heading, same as before this addition.
|
|
8575
10964
|
*/
|
|
8576
10965
|
"bs-dialog": LocalJSX.IntrinsicElements["bs-dialog"] & JSXBase.HTMLAttributes<HTMLBsDialogElement>;
|
|
10966
|
+
/**
|
|
10967
|
+
* A full-block page for when the user can't get to what they asked for: page not found (404), a server
|
|
10968
|
+
* error (500), no access (403), planned maintenance, or no internet connection. Matches the Figma
|
|
10969
|
+
* "Error page" component's five states.
|
|
10970
|
+
* Each `type` brings its own icon, tint, code label ("404", "Maintenance", ...), heading, paragraph and
|
|
10971
|
+
* buttons, all overridable by props. The component doesn't navigate or retry anything: it emits
|
|
10972
|
+
* `bsPrimary` / `bsSecondary` and your app decides what "Go to Overview" or "Try again" does.
|
|
10973
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions).
|
|
10974
|
+
* ## When to use
|
|
10975
|
+
* - Replacing the content of a page or panel that can't be shown, with a clear way forward.
|
|
10976
|
+
* ## When not to use
|
|
10977
|
+
* - A problem with one field or one action -- use inline validation or a `bs-snackbar`.
|
|
10978
|
+
* - A blocking question the user must answer -- use `bs-dialog`.
|
|
10979
|
+
*/
|
|
10980
|
+
"bs-error-page": LocalJSX.IntrinsicElements["bs-error-page"] & JSXBase.HTMLAttributes<HTMLBsErrorPageElement>;
|
|
8577
10981
|
/**
|
|
8578
10982
|
* A file dropzone: drag files onto it, or press "Browse file" to open the file picker. It reports
|
|
8579
10983
|
* the chosen files and does nothing else -- the consuming app owns the upload itself and shows its
|
|
@@ -8617,6 +11021,21 @@ declare module "@stencil/core" {
|
|
|
8617
11021
|
* accessible name.
|
|
8618
11022
|
*/
|
|
8619
11023
|
"bs-icon-button": LocalJSX.IntrinsicElements["bs-icon-button"] & JSXBase.HTMLAttributes<HTMLBsIconButtonElement>;
|
|
11024
|
+
/**
|
|
11025
|
+
* A small rounded square holding an icon, tinted by intent -- the visual marker next to a status,
|
|
11026
|
+
* a list item or a feature. Matches the Figma "Icon tile" component (3 sizes x 6 intents).
|
|
11027
|
+
* Each intent shows a default glyph (house, check, warning, cross, grid, info); put your own icon in
|
|
11028
|
+
* the default slot to replace it. A slotted icon is sized to the tile (12/16/24px) and coloured
|
|
11029
|
+
* with the intent's icon colour, as long as it draws with `currentColor`.
|
|
11030
|
+
* The tile is decorative by default (hidden from assistive tech). Don't rely on the colour or glyph
|
|
11031
|
+
* alone to convey status: slot text into `text` (it sits beside the square, in
|
|
11032
|
+
* `--bs-icon-tile-text-color`), or set `label` to give the tile its own accessible name.
|
|
11033
|
+
* ## When to use
|
|
11034
|
+
* - Marking a row, card or message with a status or category icon.
|
|
11035
|
+
* ## When not to use
|
|
11036
|
+
* - As a button -- it isn't interactive. Use `bs-icon-button`.
|
|
11037
|
+
*/
|
|
11038
|
+
"bs-icon-tile": LocalJSX.IntrinsicElements["bs-icon-tile"] & JSXBase.HTMLAttributes<HTMLBsIconTileElement>;
|
|
8620
11039
|
/**
|
|
8621
11040
|
* A pill-shaped tab button -- an optional leading icon plus a text label, rendered as a real
|
|
8622
11041
|
* `<button>` so it participates correctly in tab order and native click/keyboard activation.
|
|
@@ -8645,6 +11064,7 @@ declare module "@stencil/core" {
|
|
|
8645
11064
|
* range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
|
|
8646
11065
|
* select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
|
|
8647
11066
|
* share the same label/description/error/icon-slot chrome.
|
|
11067
|
+
* Built from: `bs-menu`/`bs-menu-item` (`type="dropdown"`) and `bs-chip-informative` + `bs-icon-button` (`type="chip"`).
|
|
8648
11068
|
* ## When to use
|
|
8649
11069
|
* - Collecting a single line of free-text, email, password, or numeric input.
|
|
8650
11070
|
* - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
|
|
@@ -8811,6 +11231,31 @@ declare module "@stencil/core" {
|
|
|
8811
11231
|
* `right` slot content pushed to the far right.
|
|
8812
11232
|
*/
|
|
8813
11233
|
"bs-navigation-header": LocalJSX.IntrinsicElements["bs-navigation-header"] & JSXBase.HTMLAttributes<HTMLBsNavigationHeaderElement>;
|
|
11234
|
+
/**
|
|
11235
|
+
* A "get set up" checklist, in four forms that matching the Figma "Onboarding checklist" component:
|
|
11236
|
+
* - `panel` -- the full list: heading, progress, every step with a status icon, and the current step
|
|
11237
|
+
* expanded with its description, time estimate, Skip for now and a primary action.
|
|
11238
|
+
* - `dashboard` -- a wide card for the top of a page: summary and progress on the left, the current step
|
|
11239
|
+
* and the next ones as small cards on the right, and a "See all steps" link.
|
|
11240
|
+
* - `launcher` -- a small always-visible chip that reopens the checklist; three layouts (`icon`, `ring`,
|
|
11241
|
+
* `inline`).
|
|
11242
|
+
* - `completion` -- the "You're all set" card once every step is done.
|
|
11243
|
+
* The component shows progress and reports what the user pressed. It doesn't know what a step means,
|
|
11244
|
+
* run it, or remember anything: your app owns the steps (`steps`, each with `done`), marks them done, and
|
|
11245
|
+
* decides which form to show.
|
|
11246
|
+
* **Built from:** `bs-card` (every surface), `bs-icon-tile` (the icons), `bs-button` (the actions),
|
|
11247
|
+
* `bs-icon-button` (the close button), `bs-progress-linear` (the progress bar), `bs-progress` (the launcher
|
|
11248
|
+
* ring).
|
|
11249
|
+
* ## When to use
|
|
11250
|
+
* - Guiding a new account or user through a short list of setup tasks they can do in any order or later.
|
|
11251
|
+
* ## When not to use
|
|
11252
|
+
* - A strict, linear flow where each step needs the one before -- use `bs-stepper`.
|
|
11253
|
+
* - A tour of the interface itself -- use `bs-product-tour`.
|
|
11254
|
+
* ## Accessibility
|
|
11255
|
+
* Steps are an ordered list; the current one has `aria-current="step"`, and each step carries a visually
|
|
11256
|
+
* hidden "Done" / "Not done". The progress bar is named with the progress text.
|
|
11257
|
+
*/
|
|
11258
|
+
"bs-onboarding-checklist": LocalJSX.IntrinsicElements["bs-onboarding-checklist"] & JSXBase.HTMLAttributes<HTMLBsOnboardingChecklistElement>;
|
|
8814
11259
|
/**
|
|
8815
11260
|
* A numbered page control -- previous/next chevrons, page-number buttons, and `...` overflow for
|
|
8816
11261
|
* large page counts. Matches the Figma "Pagination" component's "Default" type (the classic
|
|
@@ -8827,6 +11272,24 @@ declare module "@stencil/core" {
|
|
|
8827
11272
|
* plain prev/next controls (no numbers) are simpler there.
|
|
8828
11273
|
*/
|
|
8829
11274
|
"bs-pagination": LocalJSX.IntrinsicElements["bs-pagination"] & JSXBase.HTMLAttributes<HTMLBsPaginationElement>;
|
|
11275
|
+
/**
|
|
11276
|
+
* One step of a product tour: a centred **welcome** or **success** card with an art tile, or a
|
|
11277
|
+
* **pointer** card -- a compact step with a close button, a "1 of 3" progress label and Back/Next
|
|
11278
|
+
* actions -- whose arrow points at the thing it describes. Matches the Figma "Product Tour" and
|
|
11279
|
+
* "Pointer" components.
|
|
11280
|
+
* This is the step *card* only. It doesn't run a tour: it has no overlay, no spotlight, no
|
|
11281
|
+
* positioning against a target and no step sequencing. Your code decides which step is showing,
|
|
11282
|
+
* places the card next to its target (the arrow can sit on any of 12 positions via `direction`),
|
|
11283
|
+
* and moves on from `bsPrimary`/`bsSecondary`.
|
|
11284
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the art tile), `bs-button` (the actions), `bs-icon-button` (the close button).
|
|
11285
|
+
* ## When to use
|
|
11286
|
+
* - Introducing a feature on first run (`welcome`), confirming a finished tour (`success`), or
|
|
11287
|
+
* walking through the UI one pointer at a time (`pointer`).
|
|
11288
|
+
* ## When not to use
|
|
11289
|
+
* - A blocking decision or form -- use `bs-dialog`.
|
|
11290
|
+
* - A hint on hover or focus -- use `bs-tooltip`.
|
|
11291
|
+
*/
|
|
11292
|
+
"bs-product-tour": LocalJSX.IntrinsicElements["bs-product-tour"] & JSXBase.HTMLAttributes<HTMLBsProductTourElement>;
|
|
8830
11293
|
/**
|
|
8831
11294
|
* A circular progress indicator -- either a static ring showing a percentage sweep
|
|
8832
11295
|
* (`type="determinate"`) or a continuously spinning ring signaling in-progress work with no known
|
|
@@ -8856,6 +11319,28 @@ declare module "@stencil/core" {
|
|
|
8856
11319
|
* weight of a bar.
|
|
8857
11320
|
*/
|
|
8858
11321
|
"bs-progress-linear": LocalJSX.IntrinsicElements["bs-progress-linear"] & JSXBase.HTMLAttributes<HTMLBsProgressLinearElement>;
|
|
11322
|
+
/**
|
|
11323
|
+
* A block for sharing a link or taking a payment by QR code: a heading, the code on a white quiet
|
|
11324
|
+
* zone, the URL (or the amount, for payments) as text, an optional expiry chip, and Download and
|
|
11325
|
+
* Copy link actions. Matches the Figma "QR code" component (3 sizes x 2 types x 5 states, plus the
|
|
11326
|
+
* "with logo" variant).
|
|
11327
|
+
* **This component draws a code, it doesn't encode one.** Generate the real code in your product
|
|
11328
|
+
* with a QR library and hand it over either as a `matrix` (a square `boolean[][]`, `true` = dark
|
|
11329
|
+
* module) or as your own element in the `code` slot (an `<img>`, `<svg>` or `<canvas>`).
|
|
11330
|
+
* The code always sits on a white quiet zone with black modules, in dark mode too -- scanners need
|
|
11331
|
+
* the contrast.
|
|
11332
|
+
* **Built from:** `bs-card` (the surface), `bs-button` (Download, Copy link, Retry, Refresh), `bs-progress` (the loading spinner), `bs-chip-informative` (the expiry chip), `bs-icon-button` (the close button).
|
|
11333
|
+
* ## When to use
|
|
11334
|
+
* - Sharing a link to an order, document or page that someone will open on a phone.
|
|
11335
|
+
* - Taking a payment with an amount (`type="payment"`).
|
|
11336
|
+
* ## When not to use
|
|
11337
|
+
* - Encoding long text blobs -- a QR code that dense is hard to scan at the sizes here.
|
|
11338
|
+
* ## States
|
|
11339
|
+
* `loading` (generating the code), `error` (couldn't generate it; Retry), `expired` (Refresh) and
|
|
11340
|
+
* `scanned` (done: "Scanned", or "Payment received" for payments). Download and Copy link are disabled
|
|
11341
|
+
* in every state but `default`, and hidden once `scanned`.
|
|
11342
|
+
*/
|
|
11343
|
+
"bs-qr-code": LocalJSX.IntrinsicElements["bs-qr-code"] & JSXBase.HTMLAttributes<HTMLBsQrCodeElement>;
|
|
8859
11344
|
/**
|
|
8860
11345
|
* A single radio button with its label, for one mutually-exclusive choice within a group.
|
|
8861
11346
|
* ## When to use
|
|
@@ -8867,6 +11352,33 @@ declare module "@stencil/core" {
|
|
|
8867
11352
|
* - An on/off setting that takes effect immediately (no explicit form submission) -- use `bs-switch`.
|
|
8868
11353
|
*/
|
|
8869
11354
|
"bs-radio": LocalJSX.IntrinsicElements["bs-radio"] & JSXBase.HTMLAttributes<HTMLBsRadioElement>;
|
|
11355
|
+
/**
|
|
11356
|
+
* The three moments around an expiring session, as one card. Matches the Figma "Session timeout"
|
|
11357
|
+
* component's three types:
|
|
11358
|
+
* - `warning` -- "You'll be signed out soon": a live countdown with a draining bar, an optional
|
|
11359
|
+
* "your work is saved" note, and Sign out now / Stay signed in.
|
|
11360
|
+
* - `signed-out` -- "You've been signed out": who was signed in, with Sign in again and Use a different
|
|
11361
|
+
* account.
|
|
11362
|
+
* - `confirm-identity` -- "Confirm it's you": a fresh password check before a sensitive action, with
|
|
11363
|
+
* passkey / BankID alternatives and Cancel.
|
|
11364
|
+
* The component never signs anyone in or out. It shows the state and emits `bsPrimary`, `bsSecondary`,
|
|
11365
|
+
* `bsAlternative`, `bsCancel` and `bsExpire`; your app talks to the identity provider.
|
|
11366
|
+
* **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions),
|
|
11367
|
+
* `bs-progress-linear` (the countdown bar), `bs-avatar` (the signed-in account), `bs-input` (the
|
|
11368
|
+
* password field).
|
|
11369
|
+
* ## When to use
|
|
11370
|
+
* - Warning someone, before it happens, that an inactivity timeout is about to end their session.
|
|
11371
|
+
* - Telling someone their session ended, and letting them pick up where they left off.
|
|
11372
|
+
* - Asking for a fresh credential before a sensitive action.
|
|
11373
|
+
* ## When not to use
|
|
11374
|
+
* - A first-time sign-in page -- this assumes there was a session.
|
|
11375
|
+
* - Anything that is not about the session or the user's identity -- use `bs-dialog`.
|
|
11376
|
+
* ## Accessibility
|
|
11377
|
+
* The card is a labelled region. The countdown is a `timer` and is *not* announced every second; a polite
|
|
11378
|
+
* live region announces the time left at 60, 30 and 10 seconds instead. Wrap the card in your own modal
|
|
11379
|
+
* (`bs-dialog`) if the warning must trap focus.
|
|
11380
|
+
*/
|
|
11381
|
+
"bs-session-timeout": LocalJSX.IntrinsicElements["bs-session-timeout"] & JSXBase.HTMLAttributes<HTMLBsSessionTimeoutElement>;
|
|
8870
11382
|
/**
|
|
8871
11383
|
* A slider for picking a single numeric value (`type="default"`), a value snapped to evenly
|
|
8872
11384
|
* spaced ticks (`type="segmented"`), or a min/max pair (`type="range"`) from within a bounded
|
|
@@ -9027,6 +11539,7 @@ declare module "@stencil/core" {
|
|
|
9027
11539
|
* `value` is always 24-hour `HH:mm` (e.g. `"14:30"`), regardless of the displayed `format`.
|
|
9028
11540
|
* The picker renders inline at a fixed width; to show it as a popover, put it in your own overlay
|
|
9029
11541
|
* and close that overlay from `bsChange`/`bsCancel`.
|
|
11542
|
+
* **Built from:** `bs-card` (the surface), `bs-switch` (the 24h toggle), `bs-input` (the AM/PM dropdown), `bs-button` (Cancel/Confirm).
|
|
9030
11543
|
* ## When to use
|
|
9031
11544
|
* - Picking a time of day where the user steps through hours and minutes.
|
|
9032
11545
|
* ## When not to use
|
|
@@ -9073,6 +11586,37 @@ declare module "@stencil/core" {
|
|
|
9073
11586
|
* `--bs-line-height-body-sm`.
|
|
9074
11587
|
*/
|
|
9075
11588
|
"bs-tooltip": LocalJSX.IntrinsicElements["bs-tooltip"] & JSXBase.HTMLAttributes<HTMLBsTooltipElement>;
|
|
11589
|
+
/**
|
|
11590
|
+
* A product's "What's new" surface, in three forms matching the Figma component:
|
|
11591
|
+
* - `feed` -- a docked panel: heading, "Mark all as read", filter tabs, the list of updates (each a
|
|
11592
|
+
* `bs-whats-new-entry`) and a link to the full release notes.
|
|
11593
|
+
* - `announcement` -- one big update, with a hero image, a tag, a heading, a few bullet points, "1 of 3"
|
|
11594
|
+
* and Remind me later / Next.
|
|
11595
|
+
* - `teaser` -- a small card pointing at the feed: tag, date, heading, a line of text and "Open What's new".
|
|
11596
|
+
* The component only shows what you give it and reports what the user pressed. It doesn't fetch updates,
|
|
11597
|
+
* track which the user has seen, or decide when to appear: your app owns `entries` (with their `unread`
|
|
11598
|
+
* flags) and reacts to the events.
|
|
11599
|
+
* **Built from:** `bs-card` (the surface), `bs-whats-new-entry` (each update), `bs-tabs` (the filters),
|
|
11600
|
+
* `bs-chip-informative` (the tags), `bs-button`, `bs-icon-button`.
|
|
11601
|
+
* ## When to use
|
|
11602
|
+
* - Telling users about changes to the product, in a place they can come back to.
|
|
11603
|
+
* ## When not to use
|
|
11604
|
+
* - Messages about the user's own data or an action they just took -- use `bs-snackbar`, `bs-toast`.
|
|
11605
|
+
* - A guided walk through the interface -- use `bs-product-tour`.
|
|
11606
|
+
*/
|
|
11607
|
+
"bs-whats-new": LocalJSX.IntrinsicElements["bs-whats-new"] & JSXBase.HTMLAttributes<HTMLBsWhatsNewElement>;
|
|
11608
|
+
/**
|
|
11609
|
+
* One update in a "What's new" list: a tag ("New feature", "Improvement", "Fix"), a date, an unread dot,
|
|
11610
|
+
* an optional image, a title, a short description and an optional action link ("Try it"). Matches the Figma
|
|
11611
|
+
* "What's new / Entry" component. It is a plain block of content -- no card -- so it can sit in a feed
|
|
11612
|
+
* (`bs-whats-new`), a list, or a page of release notes.
|
|
11613
|
+
* **Built from:** `bs-chip-informative` (the tag) and `bs-button` (the action).
|
|
11614
|
+
* ## When to use
|
|
11615
|
+
* - Announcing a change to the product, with enough detail to know whether it matters.
|
|
11616
|
+
* ## When not to use
|
|
11617
|
+
* - A message about the user's own data or an action they just took -- use `bs-snackbar` or `bs-toast`.
|
|
11618
|
+
*/
|
|
11619
|
+
"bs-whats-new-entry": LocalJSX.IntrinsicElements["bs-whats-new-entry"] & JSXBase.HTMLAttributes<HTMLBsWhatsNewEntryElement>;
|
|
9076
11620
|
}
|
|
9077
11621
|
}
|
|
9078
11622
|
}
|