@brandsync/wc 0.0.10 → 0.0.12
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/custom-elements.json +3584 -508
- package/dist/brandsync-wc/brandsync-wc.css +20 -0
- package/dist/brandsync-wc/brandsync-wc.esm.js +1 -1
- package/dist/brandsync-wc/{p-b1e1b2d6.entry.js → p-09aa03d1.entry.js} +1 -1
- package/dist/brandsync-wc/p-0eee5477.entry.js +1 -0
- package/dist/brandsync-wc/p-0fa017ce.entry.js +1 -0
- package/dist/brandsync-wc/p-12ec9e92.entry.js +1 -0
- package/dist/brandsync-wc/{p-3dacae70.entry.js → p-1900f6ce.entry.js} +1 -1
- package/dist/brandsync-wc/{p-575ce905.entry.js → p-1adc59be.entry.js} +1 -1
- package/dist/brandsync-wc/p-1c6fa697.entry.js +1 -0
- package/dist/brandsync-wc/{p-dd747a12.entry.js → p-1cf715aa.entry.js} +1 -1
- package/dist/brandsync-wc/{p-8a78d6ea.entry.js → p-20dbc6a1.entry.js} +1 -1
- package/dist/brandsync-wc/{p-a34f460d.entry.js → p-23457a21.entry.js} +1 -1
- package/dist/brandsync-wc/p-266f5dde.entry.js +1 -0
- package/dist/brandsync-wc/p-2a65aabb.entry.js +1 -0
- package/dist/brandsync-wc/{p-8d12ed96.entry.js → p-2c51d738.entry.js} +1 -1
- package/dist/brandsync-wc/p-3b31f7c7.entry.js +1 -0
- package/dist/brandsync-wc/p-46ddc8e1.entry.js +1 -0
- package/dist/brandsync-wc/p-56c66448.entry.js +1 -0
- package/dist/brandsync-wc/{p-18af02df.entry.js → p-57fdbb76.entry.js} +1 -1
- package/dist/brandsync-wc/{p-7776b57b.entry.js → p-64e2a7d7.entry.js} +1 -1
- package/dist/brandsync-wc/{p-805644e4.entry.js → p-6e854e92.entry.js} +1 -1
- package/dist/brandsync-wc/p-72a33f88.entry.js +1 -0
- package/dist/brandsync-wc/p-8049f9f2.entry.js +1 -0
- package/dist/brandsync-wc/{p-d682675e.entry.js → p-88a0abee.entry.js} +1 -1
- package/dist/brandsync-wc/p-8b662ee3.entry.js +1 -0
- package/dist/brandsync-wc/{p-94ed898a.entry.js → p-8ded1eb6.entry.js} +1 -1
- package/dist/brandsync-wc/{p-nLORuTUY.js → p-DST5-cTx.js} +2 -2
- package/dist/brandsync-wc/p-a5b15061.entry.js +1 -0
- package/dist/brandsync-wc/{p-30a0e168.entry.js → p-aba300a9.entry.js} +1 -1
- package/dist/brandsync-wc/p-b24a980b.entry.js +1 -0
- package/dist/brandsync-wc/{p-96f374be.entry.js → p-b289450a.entry.js} +1 -1
- package/dist/brandsync-wc/{p-880ea3f8.entry.js → p-b8a2f882.entry.js} +1 -1
- package/dist/brandsync-wc/p-c320b6b4.entry.js +1 -0
- package/dist/brandsync-wc/{p-1515498e.entry.js → p-d4e3ca77.entry.js} +1 -1
- package/dist/brandsync-wc/{p-ce0914a7.entry.js → p-dd09d335.entry.js} +1 -1
- package/dist/brandsync-wc/p-ef8522b5.entry.js +1 -0
- package/dist/brandsync-wc/p-f04db1b0.entry.js +1 -0
- package/dist/cjs/brandsync-wc.cjs.js +2 -2
- package/dist/cjs/bs-ai-disclaimer.cjs.entry.js +3 -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 +3 -3
- package/dist/cjs/bs-badge.cjs.entry.js +1 -1
- 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 +1 -1
- package/dist/cjs/bs-chatbot-feedback.cjs.entry.js +2 -2
- package/dist/cjs/bs-chatbot-header.cjs.entry.js +2 -2
- 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.cjs.entry.js +94 -0
- package/dist/cjs/bs-composer-status-banner.cjs.entry.js +14 -2
- package/dist/cjs/bs-composer.cjs.entry.js +37 -4
- package/dist/cjs/bs-data-table.cjs.entry.js +3 -3
- package/dist/cjs/bs-icon-button.cjs.entry.js +40 -0
- package/dist/cjs/bs-inline-tab.cjs.entry.js +69 -0
- package/dist/cjs/bs-input.cjs.entry.js +3 -3
- package/dist/cjs/bs-logo.cjs.entry.js +165 -0
- package/dist/cjs/bs-menu_2.cjs.entry.js +3 -3
- package/dist/cjs/bs-modal.cjs.entry.js +1 -1
- package/dist/cjs/bs-navigation-drawer-item.cjs.entry.js +104 -0
- package/dist/cjs/bs-navigation-drawer.cjs.entry.js +81 -0
- package/dist/cjs/bs-navigation-header.cjs.entry.js +44 -0
- package/dist/cjs/bs-radio.cjs.entry.js +49 -0
- package/dist/cjs/bs-slider.cjs.entry.js +191 -0
- package/dist/cjs/bs-source-link.cjs.entry.js +3 -3
- package/dist/cjs/bs-switch.cjs.entry.js +57 -0
- package/dist/cjs/bs-tab.cjs.entry.js +80 -0
- package/dist/cjs/bs-tabs.cjs.entry.js +39 -0
- package/dist/cjs/bs-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/{index-CVh-sqA_.js → index-B3sdhEGk.js} +74 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +14 -2
- package/dist/collection/components/bs-ai-chatbot/bs-ai-chatbot.stories.js +26 -11
- package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.js +2 -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.css +12 -33
- package/dist/collection/components/bs-attachment/bs-attachment.js +4 -10
- package/dist/collection/components/bs-attachment-list/bs-attachment-list.js +1 -1
- package/dist/collection/components/bs-button/{bs-button.cmp.test.js → bs-button/bs-button.cmp.test.js} +26 -0
- package/dist/collection/components/bs-button/{bs-button.css → bs-button/bs-button.css} +57 -6
- package/dist/collection/components/bs-button/{bs-button.js → bs-button/bs-button.js} +10 -5
- package/dist/collection/components/bs-button/{bs-button.stories.js → bs-button/bs-button.stories.js} +2 -27
- package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.cmp.test.js +83 -0
- package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.css +346 -0
- package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.js +185 -0
- package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.stories.js +74 -0
- package/dist/collection/components/bs-button-skeleton/bs-button-skeleton.js +3 -3
- package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.js +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.cmp.test.js +117 -0
- package/dist/collection/components/bs-checkbox/bs-checkbox.css +199 -0
- package/dist/collection/components/bs-checkbox/bs-checkbox.js +265 -0
- package/dist/collection/components/bs-checkbox/bs-checkbox.stories.js +65 -0
- package/dist/collection/components/bs-composer/bs-composer.cmp.test.js +48 -7
- package/dist/collection/components/bs-composer/bs-composer.css +15 -0
- package/dist/collection/components/bs-composer/bs-composer.js +38 -4
- package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.cmp.test.js +47 -1
- package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.js +20 -1
- package/dist/collection/components/bs-data-table/bs-data-table.js +2 -2
- package/dist/collection/components/bs-input/bs-input.js +2 -2
- package/dist/collection/components/bs-logo/brandsync-logo-full-dark.js +44 -0
- package/dist/collection/components/bs-logo/brandsync-logo-full-light.js +40 -0
- package/dist/collection/components/bs-logo/brandsync-logo-mark.js +17 -0
- package/dist/collection/components/bs-logo/bs-logo.cmp.test.js +113 -0
- package/dist/collection/components/bs-logo/bs-logo.css +79 -0
- package/dist/collection/components/bs-logo/bs-logo.js +193 -0
- package/dist/collection/components/bs-logo/bs-logo.stories.js +69 -0
- 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-radio/bs-radio.cmp.test.js +76 -0
- package/dist/collection/components/bs-radio/bs-radio.css +164 -0
- package/dist/collection/components/bs-radio/bs-radio.js +170 -0
- package/dist/collection/components/bs-radio/bs-radio.stories.js +56 -0
- package/dist/collection/components/bs-slider/bs-slider.cmp.test.js +139 -0
- package/dist/collection/components/bs-slider/bs-slider.css +409 -0
- package/dist/collection/components/bs-slider/bs-slider.js +499 -0
- package/dist/collection/components/bs-slider/bs-slider.stories.js +70 -0
- package/dist/collection/components/bs-source-link/bs-source-link.js +2 -2
- package/dist/collection/components/bs-switch/bs-switch.cmp.test.js +71 -0
- package/dist/collection/components/bs-switch/bs-switch.css +196 -0
- package/dist/collection/components/bs-switch/bs-switch.js +185 -0
- package/dist/collection/components/bs-switch/bs-switch.stories.js +60 -0
- package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.cmp.test.js +104 -0
- package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.css +163 -0
- package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js +192 -0
- package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.stories.js +95 -0
- package/dist/collection/components/bs-tab/bs-tab/bs-tab.cmp.test.js +120 -0
- package/dist/collection/components/bs-tab/bs-tab/bs-tab.css +216 -0
- package/dist/collection/components/bs-tab/bs-tab/bs-tab.js +232 -0
- package/dist/collection/components/bs-tab/bs-tab/bs-tab.stories.js +138 -0
- package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.cmp.test.js +61 -0
- package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.css +39 -0
- package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js +133 -0
- package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.stories.js +39 -0
- package/dist/collection/components/bs-tooltip/bs-tooltip.js +1 -1
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.cmp.test.js +131 -0
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.css +257 -0
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.js +253 -0
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.stories.js +202 -0
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.cmp.test.js +172 -0
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.css +325 -0
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.js +314 -0
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.stories.js +78 -0
- package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.cmp.test.js +77 -0
- package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.css +106 -0
- package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.js +188 -0
- package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.stories.js +189 -0
- 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-badge.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-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.d.ts +11 -0
- package/dist/components/bs-checkbox.js +1 -0
- package/dist/components/bs-composer-status-banner.js +1 -1
- package/dist/components/bs-composer.js +1 -1
- package/dist/components/bs-data-table.js +1 -1
- package/dist/components/bs-icon-button.d.ts +11 -0
- package/dist/components/bs-icon-button.js +1 -0
- package/dist/components/bs-inline-tab.d.ts +11 -0
- package/dist/components/bs-inline-tab.js +1 -0
- package/dist/components/bs-input.js +1 -1
- package/dist/components/bs-logo.d.ts +11 -0
- package/dist/components/bs-logo.js +1 -0
- package/dist/components/bs-menu-item.js +1 -1
- package/dist/components/bs-menu.js +1 -1
- package/dist/components/bs-modal.js +1 -1
- package/dist/components/bs-navigation-drawer-item.d.ts +11 -0
- package/dist/components/bs-navigation-drawer-item.js +1 -0
- package/dist/components/bs-navigation-drawer.d.ts +11 -0
- package/dist/components/bs-navigation-drawer.js +1 -0
- package/dist/components/bs-navigation-header.d.ts +11 -0
- package/dist/components/bs-navigation-header.js +1 -0
- package/dist/components/bs-radio.d.ts +11 -0
- package/dist/components/bs-radio.js +1 -0
- package/dist/components/bs-slider.d.ts +11 -0
- package/dist/components/bs-slider.js +1 -0
- package/dist/components/bs-source-link.js +1 -1
- package/dist/components/bs-switch.d.ts +11 -0
- package/dist/components/bs-switch.js +1 -0
- package/dist/components/bs-tab.d.ts +11 -0
- package/dist/components/bs-tab.js +1 -0
- package/dist/components/bs-tabs.d.ts +11 -0
- package/dist/components/bs-tabs.js +1 -0
- package/dist/components/bs-tooltip.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/p-BAOJc0V0.js +1 -0
- package/dist/components/{p-BpvhHQSw.js → p-Be1Pfcnm.js} +1 -1
- package/dist/components/{p-Cz2nfz2j.js → p-BqYyMGrB.js} +1 -1
- package/dist/components/p-CaWqTQBZ.js +1 -0
- package/dist/components/{p-DndQiCMP.js → p-DivZLd6i.js} +1 -1
- package/dist/components/{p-DHbUF0g6.js → p-xfx69LQx.js} +1 -1
- package/dist/esm/brandsync-wc.js +3 -3
- package/dist/esm/bs-ai-disclaimer.entry.js +3 -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 +3 -3
- package/dist/esm/bs-badge.entry.js +1 -1
- 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 +1 -1
- package/dist/esm/bs-chatbot-feedback.entry.js +2 -2
- package/dist/esm/bs-chatbot-header.entry.js +2 -2
- 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.entry.js +92 -0
- package/dist/esm/bs-composer-status-banner.entry.js +14 -2
- package/dist/esm/bs-composer.entry.js +37 -4
- package/dist/esm/bs-data-table.entry.js +3 -3
- package/dist/esm/bs-icon-button.entry.js +38 -0
- package/dist/esm/bs-inline-tab.entry.js +67 -0
- package/dist/esm/bs-input.entry.js +3 -3
- package/dist/esm/bs-logo.entry.js +163 -0
- package/dist/esm/bs-menu_2.entry.js +3 -3
- package/dist/esm/bs-modal.entry.js +1 -1
- package/dist/esm/bs-navigation-drawer-item.entry.js +102 -0
- package/dist/esm/bs-navigation-drawer.entry.js +79 -0
- package/dist/esm/bs-navigation-header.entry.js +42 -0
- package/dist/esm/bs-radio.entry.js +47 -0
- package/dist/esm/bs-slider.entry.js +189 -0
- package/dist/esm/bs-source-link.entry.js +3 -3
- package/dist/esm/bs-switch.entry.js +55 -0
- package/dist/esm/bs-tab.entry.js +78 -0
- package/dist/esm/bs-tabs.entry.js +37 -0
- package/dist/esm/bs-tooltip.entry.js +2 -2
- package/dist/esm/{index-nLORuTUY.js → index-DST5-cTx.js} +74 -2
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/bs-attachment/bs-attachment.d.ts +3 -9
- package/dist/types/components/bs-button/{bs-button.d.ts → bs-button/bs-button.d.ts} +5 -0
- package/dist/types/components/bs-button/{bs-button.stories.d.ts → bs-button/bs-button.stories.d.ts} +0 -2
- package/dist/types/components/bs-button/bs-icon-button/bs-icon-button.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-button/bs-icon-button/bs-icon-button.d.ts +51 -0
- package/dist/types/components/bs-button/bs-icon-button/bs-icon-button.stories.d.ts +16 -0
- package/dist/types/components/bs-button-skeleton/bs-button-skeleton.d.ts +1 -1
- package/dist/types/components/bs-button-skeleton/bs-button-skeleton.stories.d.ts +1 -1
- package/dist/types/components/bs-checkbox/bs-checkbox.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-checkbox/bs-checkbox.d.ts +64 -0
- package/dist/types/components/bs-checkbox/bs-checkbox.stories.d.ts +23 -0
- package/dist/types/components/bs-composer/bs-composer.d.ts +26 -2
- package/dist/types/components/bs-composer-status-banner/bs-composer-status-banner.d.ts +14 -0
- package/dist/types/components/bs-logo/brandsync-logo-full-dark.d.ts +1 -0
- package/dist/types/components/bs-logo/brandsync-logo-full-light.d.ts +1 -0
- package/dist/types/components/bs-logo/brandsync-logo-mark.d.ts +1 -0
- package/dist/types/components/bs-logo/bs-logo.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-logo/bs-logo.d.ts +73 -0
- package/dist/types/components/bs-logo/bs-logo.stories.d.ts +17 -0
- package/dist/types/components/bs-radio/bs-radio.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-radio/bs-radio.d.ts +45 -0
- package/dist/types/components/bs-radio/bs-radio.stories.d.ts +16 -0
- package/dist/types/components/bs-slider/bs-slider.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-slider/bs-slider.d.ts +109 -0
- package/dist/types/components/bs-slider/bs-slider.stories.d.ts +24 -0
- package/dist/types/components/bs-switch/bs-switch.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-switch/bs-switch.d.ts +45 -0
- package/dist/types/components/bs-switch/bs-switch.stories.d.ts +17 -0
- package/dist/types/components/bs-tab/bs-inline-tab/bs-inline-tab.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-tab/bs-inline-tab/bs-inline-tab.d.ts +65 -0
- package/dist/types/components/bs-tab/bs-inline-tab/bs-inline-tab.stories.d.ts +22 -0
- package/dist/types/components/bs-tab/bs-tab/bs-tab.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-tab/bs-tab/bs-tab.d.ts +74 -0
- package/dist/types/components/bs-tab/bs-tab/bs-tab.stories.d.ts +30 -0
- package/dist/types/components/bs-tab/bs-tabs/bs-tabs.cmp.test.d.ts +1 -0
- package/dist/types/components/bs-tab/bs-tabs/bs-tabs.d.ts +45 -0
- package/dist/types/components/bs-tab/bs-tabs/bs-tabs.stories.d.ts +13 -0
- package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.cmp.test.d.ts +1 -0
- package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.d.ts +96 -0
- package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.stories.d.ts +16 -0
- package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.cmp.test.d.ts +1 -0
- package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.d.ts +103 -0
- package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.stories.d.ts +20 -0
- package/dist/types/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.cmp.test.d.ts +1 -0
- package/dist/types/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.d.ts +60 -0
- package/dist/types/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.stories.d.ts +21 -0
- package/dist/types/components.d.ts +1973 -49
- package/package.json +1 -1
- package/dist/brandsync-wc/p-0d64ea40.entry.js +0 -1
- package/dist/brandsync-wc/p-16a54578.entry.js +0 -1
- package/dist/brandsync-wc/p-bc72439a.entry.js +0 -1
- package/dist/brandsync-wc/p-dad4a92c.entry.js +0 -1
- package/dist/brandsync-wc/p-eb4d87f0.entry.js +0 -1
- /package/dist/types/components/bs-button/{bs-button.cmp.test.d.ts → bs-button/bs-button.cmp.test.d.ts} +0 -0
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-B3sdhEGk.js');
|
|
4
|
+
|
|
5
|
+
const bsSliderCss = () => `:host{display:block;--bs-slider-gap:var(--bs-spacing-100);--bs-slider-label-color:var(--bs-text-default);--bs-slider-label-color-disabled:var(--bs-text-muted);--bs-slider-label-font-weight:var(--bs-font-weight-semibold);--bs-slider-track-height:var(--bs-spacing-50);--bs-slider-track-radius:var(--bs-border-radius-full);--bs-slider-track-bg:var(--bs-surface-container);--bs-slider-track-bg-disabled:var(--bs-surface-action-disabled);--bs-slider-fill-bg:var(--bs-surface-action);--bs-slider-fill-bg-disabled:var(--bs-surface-on-action-disabled);--bs-slider-knob-hit-size:var(--bs-spacing-600);--bs-slider-knob-size:var(--bs-spacing-300);--bs-slider-knob-bg:var(--bs-surface-action);--bs-slider-knob-color-disabled:var(--bs-surface-on-action-disabled);--bs-slider-focus-ring-color:var(--bs-border-primary-focus);--bs-slider-focus-ring-gap-color:var(--bs-surface-base);--bs-slider-tick-bg:var(--bs-surface-inset);--bs-slider-tooltip-bg:var(--bs-surface-inverse);--bs-slider-tooltip-color:var(--bs-text-inverse);--bs-slider-tooltip-radius:var(--bs-border-radius-50);--bs-slider-field-width:56px;--bs-slider-field-border:var(--bs-input-border-default);--bs-slider-field-bg:var(--bs-input-bg-default);--bs-slider-field-radius:var(--bs-border-radius-100);--bs-slider-field-text:var(--bs-input-text);--bs-slider-field-text-disabled:var(--bs-text-on-disabled);--bs-slider-bound-color:var(--bs-text-default);--bs-slider-bound-color-disabled:var(--bs-text-on-disabled)}.bs-slider{display:flex;flex-direction:column;gap:var(--bs-slider-gap);font-family:inherit}.bs-slider__label{font-size:var(--bs-font-size-sm);font-weight:var(--bs-slider-label-font-weight);color:var(--bs-slider-label-color)}.bs-slider--disabled .bs-slider__label{color:var(--bs-slider-label-color-disabled);font-weight:normal}.bs-slider__header{display:flex;align-items:center;justify-content:space-between;gap:var(--bs-slider-gap)}.bs-slider__value-fields{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-slider__row{display:flex;align-items:center;gap:var(--bs-slider-gap)}.bs-slider__bound{color:var(--bs-slider-bound-color);font-size:var(--bs-font-size-md);flex-shrink:0}.bs-slider--disabled .bs-slider__bound{color:var(--bs-slider-bound-color-disabled)}.bs-slider__separator{color:var(--bs-slider-field-text);flex-shrink:0}.bs-slider--disabled .bs-slider__separator{color:var(--bs-slider-field-text-disabled)}.bs-slider__field{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-spacing-25);flex-shrink:0;width:var(--bs-slider-field-width);border:1px solid var(--bs-slider-field-border);border-radius:var(--bs-slider-field-radius);background:var(--bs-slider-field-bg);padding:var(--bs-spacing-50) var(--bs-spacing-100)}.bs-slider--disabled .bs-slider__field{cursor:not-allowed}.bs-slider__field-input{flex:1;min-width:0;border:none;outline:none;padding:0;background:transparent;color:var(--bs-slider-field-text);font-size:var(--bs-font-size-sm);font-family:inherit;text-align:left;-moz-appearance:textfield}.bs-slider__field-suffix{flex-shrink:0;color:var(--bs-slider-field-text);font-size:var(--bs-font-size-sm)}.bs-slider--disabled .bs-slider__field-suffix{color:var(--bs-slider-field-text-disabled)}.bs-slider__field-input::-webkit-outer-spin-button,.bs-slider__field-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bs-slider__field-input:disabled{color:var(--bs-slider-field-text-disabled);cursor:not-allowed}.bs-slider__track-wrapper{position:relative;flex:1;min-width:0;height:var(--bs-slider-knob-hit-size);display:flex;align-items:center}.bs-slider__track{position:relative;width:100%;height:var(--bs-slider-track-height);border-radius:var(--bs-slider-track-radius);background:var(--bs-slider-track-bg);overflow:visible;pointer-events:none}.bs-slider--disabled .bs-slider__track{background:var(--bs-slider-track-bg-disabled)}.bs-slider__track-fill{position:absolute;top:0;bottom:0;left:var(--bs-slider-fill-start, 0%);right:calc(100% - var(--bs-slider-fill-end, 0%));border-radius:var(--bs-slider-track-radius);background:var(--bs-slider-fill-bg)}.bs-slider--disabled .bs-slider__track-fill{background:var(--bs-slider-fill-bg-disabled)}.bs-slider__ticks{position:absolute;top:50%;left:0;width:100%;height:0;display:flex;justify-content:space-between;transform:translateY(-50%);pointer-events:none}.bs-slider__tick{width:2px;height:var(--bs-spacing-50);background:var(--bs-slider-tick-bg)}.bs-slider__tick--hidden{opacity:0}.bs-slider__input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;appearance:none;background:transparent;cursor:pointer}.bs-slider--disabled .bs-slider__input{cursor:not-allowed}.bs-slider__input::-webkit-slider-runnable-track{background:transparent}.bs-slider__input::-moz-range-track{background:transparent}.bs-slider__input::-webkit-slider-thumb{appearance:none;box-sizing:border-box;width:var(--bs-slider-knob-size);height:var(--bs-slider-knob-size);border-radius:var(--bs-border-radius-full);border:none;background:var(--bs-slider-knob-bg);cursor:pointer}.bs-slider__input::-moz-range-thumb{box-sizing:border-box;width:var(--bs-slider-knob-size);height:var(--bs-slider-knob-size);border-radius:var(--bs-border-radius-full);border:none;background:var(--bs-slider-knob-bg);cursor:pointer}.bs-slider--disabled .bs-slider__input::-webkit-slider-thumb{cursor:not-allowed;background:var(--bs-slider-knob-color-disabled)}.bs-slider--disabled .bs-slider__input::-moz-range-thumb{cursor:not-allowed;background:var(--bs-slider-knob-color-disabled)}.bs-slider__input--start,.bs-slider__input--end{pointer-events:none}.bs-slider__input--start::-webkit-slider-thumb,.bs-slider__input--end::-webkit-slider-thumb{pointer-events:auto}.bs-slider__input--start::-moz-range-thumb,.bs-slider__input--end::-moz-range-thumb{pointer-events:auto}.bs-slider__input:focus-visible::-webkit-slider-thumb,.bs-slider__input:active::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--bs-slider-focus-ring-gap-color), 0 0 0 4px var(--bs-slider-focus-ring-color)}.bs-slider__input:focus-visible::-moz-range-thumb,.bs-slider__input:active::-moz-range-thumb{box-shadow:0 0 0 2px var(--bs-slider-focus-ring-gap-color), 0 0 0 4px var(--bs-slider-focus-ring-color)}.bs-slider__tooltip{position:absolute;bottom:calc(50% + 38px);transform:translateX(-50%);padding:var(--bs-spacing-25) var(--bs-spacing-100);background:var(--bs-slider-tooltip-bg);color:var(--bs-slider-tooltip-color);border-radius:var(--bs-slider-tooltip-radius);font-size:var(--bs-font-size-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.1s ease}.bs-slider__tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);width:8px;height:8px;background:var(--bs-slider-tooltip-bg);clip-path:polygon(50% 100%, 0% 0%, 100% 0%)}.bs-slider__input:focus-visible~.bs-slider__tooltip,.bs-slider__input:active~.bs-slider__tooltip{opacity:1}.bs-slider__input--start:focus-visible~.bs-slider__tooltip--end,.bs-slider__input--start:active~.bs-slider__tooltip--end,.bs-slider__input--end:focus-visible~.bs-slider__tooltip--start,.bs-slider__input--end:active~.bs-slider__tooltip--start{opacity:0}`;
|
|
6
|
+
|
|
7
|
+
const BsSlider = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
index.registerInstance(this, hostRef);
|
|
10
|
+
this.bsChange = index.createEvent(this, "bsChange");
|
|
11
|
+
this.bsRangeChange = index.createEvent(this, "bsRangeChange");
|
|
12
|
+
}
|
|
13
|
+
get el() { return index.getElement(this); }
|
|
14
|
+
/** Which slider shape to render. `range` uses two thumbs (`valueStart`/`valueEnd`); `default`
|
|
15
|
+
* and `segmented` use one thumb (`value`). `segmented` additionally draws `segments` tick marks
|
|
16
|
+
* along the track. */
|
|
17
|
+
type = 'default';
|
|
18
|
+
/** Shows/hides the "Label" text and editable percentage field(s) above the track, and the
|
|
19
|
+
* static min/max bound labels flanking it. When `false`, only the bare track (and its
|
|
20
|
+
* knob/knobs) renders. */
|
|
21
|
+
showLabel = true;
|
|
22
|
+
/** Label text shown above the track when `showLabel` is set. */
|
|
23
|
+
label = 'Label';
|
|
24
|
+
/** Minimum selectable value, for all `type`s. */
|
|
25
|
+
min = 0;
|
|
26
|
+
/** Maximum selectable value, for all `type`s. */
|
|
27
|
+
max = 100;
|
|
28
|
+
/** Step size between selectable values. For `type="segmented"`, the effective step is derived
|
|
29
|
+
* from `(max - min) / segments` instead, so the thumb always snaps to a tick. */
|
|
30
|
+
step = 1;
|
|
31
|
+
/** Current value for `type="default"`/`type="segmented"`. Ignored for `type="range"` -- use
|
|
32
|
+
* `valueStart`/`valueEnd` instead. Mutable so dragging the thumb updates it directly. */
|
|
33
|
+
value = 0;
|
|
34
|
+
/** Lower thumb's value for `type="range"`. Defaults to `min` when unset. Mutable so dragging the
|
|
35
|
+
* thumb updates it directly. */
|
|
36
|
+
valueStart;
|
|
37
|
+
/** Upper thumb's value for `type="range"`. Defaults to `max` when unset. Mutable so dragging the
|
|
38
|
+
* thumb updates it directly. */
|
|
39
|
+
valueEnd;
|
|
40
|
+
/** Number of equal divisions marked by tick lines along the track, for `type="segmented"` only.
|
|
41
|
+
* The first tick (at the very start of the track) is rendered with `opacity: 0` to keep the
|
|
42
|
+
* tick spacing math consistent while not visually doubling up with the track's own start edge --
|
|
43
|
+
* this matches the design spec, not a bug. */
|
|
44
|
+
segments = 10;
|
|
45
|
+
/** Disables the slider: sets the native `disabled` attribute on the range input(s), suppresses
|
|
46
|
+
* hover/focus/drag styling and the value tooltip, and prevents interaction. */
|
|
47
|
+
disabled = false;
|
|
48
|
+
/**
|
|
49
|
+
* Accessible name for the slider's native range input(s). Required whenever `showLabel` is
|
|
50
|
+
* `false` (a bare track with no visible "Label" text) -- without it, the internal native
|
|
51
|
+
* `<input>` has no accessible name at all. Setting `aria-label` directly on the `<bs-slider>`
|
|
52
|
+
* host does NOT work for this: that attribute stays on the light-DOM host and is never forwarded
|
|
53
|
+
* into the shadow DOM by the browser. Same pattern/reasoning as `bs-switch`'s and `bs-checkbox`'s
|
|
54
|
+
* identical `ariaLabel` prop. For `type="range"`, this labels the lower-bound thumb; the
|
|
55
|
+
* upper-bound thumb gets `"${ariaLabel} end"` (or `"End value"` when `ariaLabel` is unset).
|
|
56
|
+
*/
|
|
57
|
+
ariaLabel = null;
|
|
58
|
+
/** Emitted when `value` changes via user interaction (dragging the thumb, or committing the
|
|
59
|
+
* value field), with the new value. Only fires for `type="default"`/`type="segmented"`. */
|
|
60
|
+
bsChange;
|
|
61
|
+
/** Emitted when `valueStart`/`valueEnd` changes via user interaction, with both current values.
|
|
62
|
+
* Only fires for `type="range"`. */
|
|
63
|
+
bsRangeChange;
|
|
64
|
+
get effectiveValueStart() {
|
|
65
|
+
return this.valueStart ?? this.min;
|
|
66
|
+
}
|
|
67
|
+
get effectiveValueEnd() {
|
|
68
|
+
return this.valueEnd ?? this.max;
|
|
69
|
+
}
|
|
70
|
+
/** Effective step for the native range input(s): `step` as-is, except for `type="segmented"`,
|
|
71
|
+
* where it's derived from `segments` so the thumb always lands on a tick. */
|
|
72
|
+
get effectiveStep() {
|
|
73
|
+
if (this.type === 'segmented' && this.segments > 0) {
|
|
74
|
+
return (this.max - this.min) / this.segments;
|
|
75
|
+
}
|
|
76
|
+
return this.step;
|
|
77
|
+
}
|
|
78
|
+
clamp(n) {
|
|
79
|
+
if (Number.isNaN(n))
|
|
80
|
+
return this.min;
|
|
81
|
+
return Math.min(this.max, Math.max(this.min, n));
|
|
82
|
+
}
|
|
83
|
+
percent(value) {
|
|
84
|
+
if (this.max === this.min)
|
|
85
|
+
return 0;
|
|
86
|
+
return ((value - this.min) / (this.max - this.min)) * 100;
|
|
87
|
+
}
|
|
88
|
+
onInputChange = (ev) => {
|
|
89
|
+
if (this.disabled)
|
|
90
|
+
return;
|
|
91
|
+
const next = this.clamp(parseFloat(ev.target.value));
|
|
92
|
+
this.value = next;
|
|
93
|
+
this.bsChange.emit(next);
|
|
94
|
+
};
|
|
95
|
+
clampPercent(n) {
|
|
96
|
+
if (Number.isNaN(n))
|
|
97
|
+
return 0;
|
|
98
|
+
return Math.min(100, Math.max(0, n));
|
|
99
|
+
}
|
|
100
|
+
/** Converts an edited percentage (0-100, from the header field) back to a raw value in
|
|
101
|
+
* min/max units. */
|
|
102
|
+
fromPercent(pct) {
|
|
103
|
+
return this.min + (this.clampPercent(pct) / 100) * (this.max - this.min);
|
|
104
|
+
}
|
|
105
|
+
onPercentFieldChange = (ev) => {
|
|
106
|
+
if (this.disabled)
|
|
107
|
+
return;
|
|
108
|
+
const next = this.clamp(this.fromPercent(parseFloat(ev.target.value)));
|
|
109
|
+
this.value = next;
|
|
110
|
+
this.bsChange.emit(next);
|
|
111
|
+
};
|
|
112
|
+
onStartInputChange = (ev) => {
|
|
113
|
+
if (this.disabled)
|
|
114
|
+
return;
|
|
115
|
+
let next = this.clamp(parseFloat(ev.target.value));
|
|
116
|
+
next = Math.min(next, this.effectiveValueEnd);
|
|
117
|
+
this.valueStart = next;
|
|
118
|
+
this.bsRangeChange.emit({ start: next, end: this.effectiveValueEnd });
|
|
119
|
+
};
|
|
120
|
+
onEndInputChange = (ev) => {
|
|
121
|
+
if (this.disabled)
|
|
122
|
+
return;
|
|
123
|
+
let next = this.clamp(parseFloat(ev.target.value));
|
|
124
|
+
next = Math.max(next, this.effectiveValueStart);
|
|
125
|
+
this.valueEnd = next;
|
|
126
|
+
this.bsRangeChange.emit({ start: this.effectiveValueStart, end: next });
|
|
127
|
+
};
|
|
128
|
+
onStartPercentFieldChange = (ev) => {
|
|
129
|
+
if (this.disabled)
|
|
130
|
+
return;
|
|
131
|
+
let next = this.clamp(this.fromPercent(parseFloat(ev.target.value)));
|
|
132
|
+
next = Math.min(next, this.effectiveValueEnd);
|
|
133
|
+
this.valueStart = next;
|
|
134
|
+
this.bsRangeChange.emit({ start: next, end: this.effectiveValueEnd });
|
|
135
|
+
};
|
|
136
|
+
onEndPercentFieldChange = (ev) => {
|
|
137
|
+
if (this.disabled)
|
|
138
|
+
return;
|
|
139
|
+
let next = this.clamp(this.fromPercent(parseFloat(ev.target.value)));
|
|
140
|
+
next = Math.max(next, this.effectiveValueStart);
|
|
141
|
+
this.valueEnd = next;
|
|
142
|
+
this.bsRangeChange.emit({ start: this.effectiveValueStart, end: next });
|
|
143
|
+
};
|
|
144
|
+
/** The editable field shown top-right (or as a pair for `type="range"`), displaying/editing
|
|
145
|
+
* the thumb's position as a rounded 0-100 percentage of min/max -- not the raw value -- per
|
|
146
|
+
* the Figma spec (every state screenshot shows this field suffixed "%", matching the same
|
|
147
|
+
* percentage the tooltip shows while dragging). */
|
|
148
|
+
renderPercentField(percentValue, onChange, ariaLabel) {
|
|
149
|
+
return (index.h("span", { part: "field", class: "bs-slider__field" }, index.h("input", { type: "number", class: "bs-slider__field-input", value: Math.round(this.clampPercent(percentValue)), min: 0, max: 100, disabled: this.disabled, "aria-label": ariaLabel, onChange: onChange }), index.h("span", { class: "bs-slider__field-suffix", "aria-hidden": "true" }, "%")));
|
|
150
|
+
}
|
|
151
|
+
renderSegmentedTicks() {
|
|
152
|
+
if (this.type !== 'segmented' || this.segments <= 0)
|
|
153
|
+
return null;
|
|
154
|
+
// segments+1 ticks (both track ends plus every division), per the Figma spec -- the first
|
|
155
|
+
// tick is invisible (opacity: 0) so the spacing math stays consistent even though it would
|
|
156
|
+
// otherwise sit right on top of the track's own start edge.
|
|
157
|
+
const tickCount = this.segments + 1;
|
|
158
|
+
return (index.h("div", { class: "bs-slider__ticks", "aria-hidden": "true" }, Array.from({ length: tickCount }).map((_, i) => (index.h("span", { class: `bs-slider__tick ${i === 0 ? 'bs-slider__tick--hidden' : ''}` })))));
|
|
159
|
+
}
|
|
160
|
+
renderSingleThumb() {
|
|
161
|
+
const fillEnd = this.percent(this.value);
|
|
162
|
+
return (index.h("div", { class: "bs-slider__track-wrapper", style: { '--bs-slider-fill-start': '0%', '--bs-slider-fill-end': `${fillEnd}%` } }, index.h("div", { part: "track", class: "bs-slider__track" }, index.h("div", { part: "fill", class: "bs-slider__track-fill" }), this.renderSegmentedTicks()), index.h("input", { type: "range", part: "control", class: "bs-slider__input", min: this.min, max: this.max, step: this.effectiveStep, value: this.value, disabled: this.disabled, "aria-label": this.ariaLabel ?? undefined, "aria-labelledby": !this.ariaLabel && this.showLabel ? 'bs-slider-label' : undefined, onInput: this.onInputChange, onChange: this.onInputChange }), index.h("span", { class: "bs-slider__tooltip", part: "tooltip", style: { left: `${fillEnd}%` }, "aria-hidden": "true" }, Math.round(this.percent(this.value)), "%")));
|
|
163
|
+
}
|
|
164
|
+
renderRangeThumbs() {
|
|
165
|
+
const start = this.effectiveValueStart;
|
|
166
|
+
const end = this.effectiveValueEnd;
|
|
167
|
+
const fillStart = this.percent(start);
|
|
168
|
+
const fillEnd = this.percent(end);
|
|
169
|
+
// Two thumbs can't be done with a single native <input type="range"> -- the CSS spec only
|
|
170
|
+
// gives a range input one thumb. This is the well-known dual-range-slider pattern instead:
|
|
171
|
+
// two overlapping native range inputs, each with a fully transparent track (only their thumb
|
|
172
|
+
// is visible/interactive -- see bs-slider.css's pointer-events rules), plus a separate
|
|
173
|
+
// absolutely-positioned div for the "filled" segment between them.
|
|
174
|
+
//
|
|
175
|
+
// Both inputs sit at the same z-index by default, except whichever thumb is in the upper half
|
|
176
|
+
// of the track gets a higher z-index -- without that, once the two thumbs are close together
|
|
177
|
+
// near one end, only the topmost one is reachable by click, and the topmost one is always the
|
|
178
|
+
// one rendered last (the end thumb) unless we compensate.
|
|
179
|
+
const startOnTop = this.percent(start) > 50;
|
|
180
|
+
return (index.h("div", { class: "bs-slider__track-wrapper", style: { '--bs-slider-fill-start': `${fillStart}%`, '--bs-slider-fill-end': `${fillEnd}%` } }, index.h("div", { part: "track", class: "bs-slider__track" }, index.h("div", { part: "fill", class: "bs-slider__track-fill" })), index.h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--start", style: { zIndex: startOnTop ? '4' : '3' }, min: this.min, max: this.max, step: this.step, value: start, disabled: this.disabled, "aria-label": this.ariaLabel ?? 'Start value', onInput: this.onStartInputChange, onChange: this.onStartInputChange }), index.h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--end", style: { zIndex: startOnTop ? '3' : '4' }, min: this.min, max: this.max, step: this.step, value: end, disabled: this.disabled, "aria-label": this.ariaLabel ? `${this.ariaLabel} end` : 'End value', onInput: this.onEndInputChange, onChange: this.onEndInputChange }), index.h("span", { class: "bs-slider__tooltip bs-slider__tooltip--start", part: "tooltip", style: { left: `${fillStart}%` }, "aria-hidden": "true" }, Math.round(this.percent(start)), "%"), index.h("span", { class: "bs-slider__tooltip bs-slider__tooltip--end", part: "tooltip", style: { left: `${fillEnd}%` }, "aria-hidden": "true" }, Math.round(this.percent(end)), "%")));
|
|
181
|
+
}
|
|
182
|
+
render() {
|
|
183
|
+
const isRange = this.type === 'range';
|
|
184
|
+
const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
|
|
185
|
+
return (index.h("div", { key: '85529486524fc9859b4b1706a69e70f46537ab77', class: rootClasses }, this.showLabel && (index.h("div", { key: '4871263c05627057e838478048caed54554db6fc', class: "bs-slider__header" }, index.h("span", { key: '91ef26112441bdd1bdc7b4b0d1653c81db88bf4a', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (index.h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), index.h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), index.h("div", { key: '336901d2c9195c4415fce9fe9c683c51b652feb8', class: "bs-slider__row" }, this.showLabel && (index.h("span", { key: '49330dd4efe29c2f4d27ded8a5ed812b5a98d6af', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (index.h("span", { key: '6daa487800d4303d2d43c7d526bd457d3caddf7f', part: "bound", class: "bs-slider__bound" }, this.max)))));
|
|
186
|
+
}
|
|
187
|
+
static get delegatesFocus() { return true; }
|
|
188
|
+
};
|
|
189
|
+
BsSlider.style = bsSliderCss();
|
|
190
|
+
|
|
191
|
+
exports.bs_slider = BsSlider;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B3sdhEGk.js');
|
|
4
4
|
|
|
5
5
|
const bsSourceLinkCss = () => `:host{display:block;--bs-source-link-radius:var(--bs-border-radius-150);--bs-source-link-padding:var(--bs-spacing-150);--bs-source-link-gap:var(--bs-spacing-50);--bs-source-link-icon-gap:var(--bs-spacing-75);--bs-source-link-hover:var(--bs-surface-hover);--bs-source-link-pressed:var(--bs-surface-pressed);--bs-source-link-focus:var(--bs-border-neutral-focus);--bs-source-link-filename-color:var(--bs-text-default);--bs-source-link-meta-color:var(--bs-text-secondary);--bs-source-link-icon-color:var(--bs-icon-default);--bs-source-link-dot-color:var(--bs-text-secondary)}.bs-source-link{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-source-link-gap);width:100%;padding:var(--bs-source-link-padding);background:none;border:none;border-radius:var(--bs-source-link-radius);font-family:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-source-link:hover,.bs-source-link:focus-visible{background:var(--bs-source-link-hover)}.bs-source-link:active{background:var(--bs-source-link-pressed)}.bs-source-link:focus-visible{outline:2px solid var(--bs-source-link-focus);outline-offset:1px}.bs-source-link__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:16px;height:16px;color:var(--bs-source-link-icon-color)}.bs-source-link__left{display:flex;flex:1 0 0;flex-direction:column;gap:2px;min-width:0}.bs-source-link__filename-row{display:flex;align-items:center;gap:var(--bs-source-link-icon-gap);width:100%}.bs-source-link__filename{margin:0;overflow:hidden;color:var(--bs-source-link-filename-color);font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-semibold);line-height:var(--bs-line-height-normal);text-overflow:ellipsis;white-space:nowrap}.bs-source-link__meta{display:flex;align-items:center;gap:var(--bs-spacing-50);padding-left:22px}.bs-source-link__source,.bs-source-link__version{color:var(--bs-source-link-meta-color);font-size:var(--bs-font-size-sm);line-height:var(--bs-line-height-normal);white-space:nowrap}.bs-source-link__dot{width:4px;height:4px;border-radius:50%;background:var(--bs-source-link-dot-color);flex-shrink:0}.bs-source-link__arrow{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:24px;height:24px;color:var(--bs-source-link-icon-color)}`;
|
|
6
6
|
|
|
@@ -26,8 +26,8 @@ const BsSourceLink = class {
|
|
|
26
26
|
};
|
|
27
27
|
render() {
|
|
28
28
|
const inner = [
|
|
29
|
-
index.h("span", { key: '
|
|
30
|
-
index.h("span", { key: '
|
|
29
|
+
index.h("span", { key: '79756193e545c7bc24f6df3aa25a644294933536', class: "bs-source-link__left" }, index.h("span", { key: 'e3aee2ee301d383149f242ee40d681a75782a4b2', class: "bs-source-link__filename-row" }, index.h("span", { key: '6cc1a0f55f54a0cca0f2ca305c2f8566e3016243', part: "icon", class: "bs-source-link__icon" }, index.h("slot", { key: 'b61ee4c11179ce958dbc5f3eb4cf1f3a0ff90c26', name: "icon" }, index.h(FileTextIcon, { key: '2d94ec22dade078f3828e8d0d64adb984716fb00' }))), index.h("p", { key: 'a727c77f11c68b61b0307d31dd9c79e811a75406', part: "filename", class: "bs-source-link__filename" }, this.fileName)), index.h("span", { key: 'bec3857211075ce8ce4ff33c649ee6370b6039f5', class: "bs-source-link__meta" }, this.sourceName && (index.h("span", { key: '5ca4e697485e1f82d8375afe48b2ab13380efe40', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && index.h("span", { key: '4a69cae984e34e5329750bd19c868c9b0a83da28', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (index.h("span", { key: '8abd2c99dcea7b95bc7d79d24c1ba1f6fdd10436', part: "version", class: "bs-source-link__version" }, this.version)))),
|
|
30
|
+
index.h("span", { key: 'c5ff90d23096ab0cc70f6f906b8d04d29498e735', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, index.h(ArrowUpRightIcon, { key: '2bfc3acc65b7d9401c30999f4dd0adbf15f8a8d3' })),
|
|
31
31
|
];
|
|
32
32
|
return this.href ? (index.h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (index.h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
|
|
33
33
|
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-B3sdhEGk.js');
|
|
4
|
+
|
|
5
|
+
const bsSwitchCss = () => `:host{display:inline-block;--bs-switch-radius:var(--bs-border-radius-full);--bs-switch-padding:var(--bs-spacing-25);--bs-switch-gap:var(--bs-spacing-100);--bs-switch-track-width-md:36px;--bs-switch-track-height-md:20px;--bs-switch-track-width-lg:48px;--bs-switch-track-height-lg:28px;--bs-switch-knob-size-md:16px;--bs-switch-knob-size-lg:24px;--bs-switch-border-width:1px;--bs-switch-track-bg:var(--bs-switch-track-bg-default);--bs-switch-track-bg-checked:var(--bs-switch-track-bg-checked-default);--bs-switch-track-bg-checked-focus:var(--bs-switch-track-bg-checked-focused);--bs-switch-track-border:var(--bs-switch-track-border-default);--bs-switch-focus-ring-color:var(--bs-switch-track-border-focus);--bs-switch-knob-bg:var(--bs-switch-thumb-bg-default);--bs-switch-knob-bg-hover:var(--bs-switch-thumb-bg-hover);--bs-switch-knob-bg-checked:var(--bs-switch-thumb-bg-checked);--bs-switch-knob-bg-disabled:var(--bs-switch-thumb-bg-disabled);--bs-switch-label-color:var(--bs-text-default);--bs-switch-label-color-disabled:var(--bs-text-on-disabled)}.bs-switch{position:relative;display:inline-flex;align-items:center;gap:var(--bs-switch-gap);font-family:inherit;cursor:pointer}.bs-switch--disabled{cursor:not-allowed}.bs-switch__input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}.bs-switch__input:disabled{cursor:not-allowed}.bs-switch__track{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;padding:var(--bs-switch-padding);border:var(--bs-switch-border-width) solid var(--bs-switch-track-border);border-radius:var(--bs-switch-radius);background:var(--bs-switch-track-bg);transition:background-color 0.15s ease, border-color 0.15s ease}.bs-switch__track--md{width:var(--bs-switch-track-width-md);height:var(--bs-switch-track-height-md)}.bs-switch__track--lg{width:var(--bs-switch-track-width-lg);height:var(--bs-switch-track-height-lg)}.bs-switch__track--checked{justify-content:flex-end;background:var(--bs-switch-track-bg-checked)}.bs-switch__knob{box-sizing:border-box;border-radius:var(--bs-border-radius-full);background:var(--bs-switch-knob-bg);transition:background-color 0.15s ease}.bs-switch__knob--md{width:var(--bs-switch-knob-size-md);height:var(--bs-switch-knob-size-md)}.bs-switch__knob--lg{width:var(--bs-switch-knob-size-lg);height:var(--bs-switch-knob-size-lg)}.bs-switch__track--checked .bs-switch__knob{background:var(--bs-switch-knob-bg-checked)}.bs-switch__input:hover:not(:disabled)~.bs-switch__track{background:var(--bs-switch-track-bg-hover);border-color:var(--bs-switch-track-border-hover)}.bs-switch__input:hover:not(:disabled)~.bs-switch__track .bs-switch__knob{background:var(--bs-switch-knob-bg-hover)}.bs-switch__input:hover:not(:disabled)~.bs-switch__track--checked{background:var(--bs-switch-track-bg-checked-hover)}.bs-switch__input:focus-visible~.bs-switch__track{border-color:var(--bs-switch-track-border-hover);outline:2px solid var(--bs-switch-focus-ring-color);outline-offset:2px}.bs-switch__input:focus-visible~.bs-switch__track--checked{background:var(--bs-switch-track-bg-checked-focus)}.bs-switch__track--disabled{background:var(--bs-switch-track-bg-disabled);border-color:var(--bs-switch-track-border)}.bs-switch__track--disabled.bs-switch__track--checked{background:var(--bs-switch-track-bg-disabled)}.bs-switch__knob--disabled{background:var(--bs-switch-knob-bg-disabled)}.bs-switch__label{font-size:var(--bs-font-size-md);color:var(--bs-switch-label-color)}.bs-switch--disabled .bs-switch__label{color:var(--bs-switch-label-color-disabled)}`;
|
|
6
|
+
|
|
7
|
+
const BsSwitch = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
index.registerInstance(this, hostRef);
|
|
10
|
+
this.bsChange = index.createEvent(this, "bsChange");
|
|
11
|
+
}
|
|
12
|
+
get el() { return index.getElement(this); }
|
|
13
|
+
/** Sizing scale. Controls the track's width/height and the knob's diameter. */
|
|
14
|
+
size = 'lg';
|
|
15
|
+
/** Whether the switch is on. Mutable so clicking the label/input toggles it directly, and
|
|
16
|
+
* reflected so consumers can target `bs-switch[checked]` via CSS. */
|
|
17
|
+
checked = false;
|
|
18
|
+
/** Disables the switch: sets the native `disabled` attribute, suppresses hover/focus styling,
|
|
19
|
+
* and prevents toggling. */
|
|
20
|
+
disabled = false;
|
|
21
|
+
/**
|
|
22
|
+
* Accessible name for the switch. Required whenever the default (label) slot is empty (e.g. a
|
|
23
|
+
* bare "enabled" switch in a table row) -- without it, the internal native `<input>` has no
|
|
24
|
+
* accessible name at all. Setting `aria-label` directly on the `<bs-switch>` host does NOT
|
|
25
|
+
* work for this: that attribute stays on the light-DOM host and is never forwarded into the
|
|
26
|
+
* shadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays
|
|
27
|
+
* nameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and
|
|
28
|
+
* `bs-checkbox`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own
|
|
29
|
+
* internal focusable element for the same reason.
|
|
30
|
+
*/
|
|
31
|
+
ariaLabel = null;
|
|
32
|
+
/** Emitted when the checked state changes via user interaction, with the new `checked` value. */
|
|
33
|
+
bsChange;
|
|
34
|
+
onChange = (ev) => {
|
|
35
|
+
const checked = ev.target.checked;
|
|
36
|
+
this.checked = checked;
|
|
37
|
+
this.bsChange.emit(checked);
|
|
38
|
+
};
|
|
39
|
+
render() {
|
|
40
|
+
const trackClasses = [
|
|
41
|
+
'bs-switch__track',
|
|
42
|
+
`bs-switch__track--${this.size}`,
|
|
43
|
+
this.checked ? 'bs-switch__track--checked' : '',
|
|
44
|
+
this.disabled ? 'bs-switch__track--disabled' : '',
|
|
45
|
+
]
|
|
46
|
+
.filter(Boolean)
|
|
47
|
+
.join(' ');
|
|
48
|
+
const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
|
|
49
|
+
.filter(Boolean)
|
|
50
|
+
.join(' ');
|
|
51
|
+
return (index.h("label", { key: '4e5e5005cddacfaa695aae4023aefdae68330d8e', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, index.h("input", { key: '8adf2a272b1c9c757543b32f635f2129b4990cf1', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), index.h("span", { key: '2766916d51d0281bac341f636d99ee81f6c31564', part: "track", class: trackClasses }, index.h("span", { key: 'ec0f7d008cd34d575271dbdde1d34771a6095932', part: "knob", class: knobClasses })), index.h("span", { key: 'b28bace70e76c37163abcbc74c4fba2156f6da5d', part: "label", class: "bs-switch__label" }, index.h("slot", { key: '57c58faa8c6711fff5aa03eb559520ef31f531c6' }))));
|
|
52
|
+
}
|
|
53
|
+
static get delegatesFocus() { return true; }
|
|
54
|
+
};
|
|
55
|
+
BsSwitch.style = bsSwitchCss();
|
|
56
|
+
|
|
57
|
+
exports.bs_switch = BsSwitch;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-B3sdhEGk.js');
|
|
4
|
+
|
|
5
|
+
const bsTabCss = () => `:host{display:inline-block;--bs-tab-radius:var(--bs-border-radius-100);--bs-tab-padding-y:var(--bs-spacing-150);--bs-tab-padding-x:var(--bs-spacing-200);--bs-tab-gap:var(--bs-spacing-75);--bs-tab-gap-vertical:var(--bs-spacing-50);--bs-tab-color-default:var(--bs-text-muted);--bs-tab-icon-color-default:var(--bs-icon-muted);--bs-tab-color-hover:var(--bs-text-default);--bs-tab-icon-color-hover:var(--bs-icon-default);--bs-tab-indicator-hover:var(--bs-border-neutral-hover);--bs-tab-color-selected:var(--bs-color-primary-default);--bs-tab-color-selected-hover:var(--bs-color-primary-hover);--bs-tab-color-selected-pressed:var(--bs-color-primary-pressed);--bs-tab-indicator-selected:var(--bs-color-primary-default);--bs-tab-indicator-selected-hover:var(--bs-color-primary-hover);--bs-tab-indicator-selected-pressed:var(--bs-color-primary-pressed);--bs-tab-focus-ring-color:var(--bs-border-neutral-focus);--bs-tab-color-disabled:var(--bs-text-on-disabled);--bs-tab-icon-color-disabled:var(--bs-icon-disabled);--bs-tab-font-size:var(--bs-font-size-md);--bs-tab-line-height:var(--bs-line-height-body-md)}.bs-tab{box-sizing:border-box;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;border:none;cursor:pointer;background:transparent;color:var(--bs-tab-color-default);font-family:inherit;border-radius:var(--bs-tab-radius);padding:var(--bs-tab-padding-y) var(--bs-tab-padding-x);gap:var(--bs-tab-gap);transition:color var(--bs-duration-fast) var(--bs-easing-standard), background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-tab--vertical{flex-direction:column;gap:var(--bs-tab-gap-vertical)}.bs-tab:focus-visible{outline:2px solid var(--bs-tab-focus-ring-color);outline-offset:2px}.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):hover,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):focus-visible,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):active{color:var(--bs-tab-color-hover)}.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):hover .bs-tab__icon,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):focus-visible .bs-tab__icon,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):active .bs-tab__icon{color:var(--bs-tab-icon-color-hover)}.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):hover .bs-tab__indicator,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):focus-visible .bs-tab__indicator,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):active .bs-tab__indicator{background:var(--bs-tab-indicator-hover)}.bs-tab--selected{color:var(--bs-tab-color-selected)}.bs-tab--selected .bs-tab__icon--has-content{color:var(--bs-tab-color-selected)}.bs-tab--selected .bs-tab__indicator{background:var(--bs-tab-indicator-selected)}.bs-tab--selected:not(.bs-tab--disabled):hover,.bs-tab--selected:not(.bs-tab--disabled):focus-visible{color:var(--bs-tab-color-selected-hover)}.bs-tab--selected:not(.bs-tab--disabled):hover .bs-tab__icon--has-content,.bs-tab--selected:not(.bs-tab--disabled):focus-visible .bs-tab__icon--has-content{color:var(--bs-tab-color-selected-hover)}.bs-tab--selected:not(.bs-tab--disabled):hover .bs-tab__indicator,.bs-tab--selected:not(.bs-tab--disabled):focus-visible .bs-tab__indicator{background:var(--bs-tab-indicator-selected-hover)}.bs-tab--selected:not(.bs-tab--disabled):active{color:var(--bs-tab-color-selected-pressed)}.bs-tab--selected:not(.bs-tab--disabled):active .bs-tab__icon--has-content{color:var(--bs-tab-color-selected-pressed)}.bs-tab--selected:not(.bs-tab--disabled):active .bs-tab__indicator{background:var(--bs-tab-indicator-selected-pressed)}.bs-tab--disabled{color:var(--bs-tab-color-disabled);cursor:not-allowed}.bs-tab--disabled .bs-tab__icon--has-content{color:var(--bs-tab-icon-color-disabled)}.bs-tab--disabled .bs-tab__indicator{background:transparent}.bs-tab__icon{display:none;width:24px;height:24px;flex-shrink:0;color:var(--bs-tab-icon-color-default)}.bs-tab__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-tab__icon ::slotted(svg){width:24px;height:24px}.bs-tab__label{display:none;font-size:var(--bs-tab-font-size);line-height:calc(var(--bs-tab-line-height) * 1px);white-space:nowrap}.bs-tab__label--has-content{display:inline-block}.bs-tab__badge{display:none}.bs-tab__badge--has-content{display:inline-flex;align-items:center}.bs-tab__indicator{position:absolute;left:var(--bs-tab-padding-x);right:var(--bs-tab-padding-x);bottom:0;height:2px;background:transparent;border-radius:var(--bs-border-radius-50, 2px)}`;
|
|
6
|
+
|
|
7
|
+
const BsTab = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
index.registerInstance(this, hostRef);
|
|
10
|
+
this.bsSelect = index.createEvent(this, "bsSelect");
|
|
11
|
+
}
|
|
12
|
+
get el() { return index.getElement(this); }
|
|
13
|
+
/** Whether this tab is the currently active one. NOT mutable and NOT self-toggling -- see the
|
|
14
|
+
* "Known gap" note in the class JSDoc. Still reflected as an attribute so consumers/CSS can
|
|
15
|
+
* target `bs-tab[selected]`. */
|
|
16
|
+
selected = false;
|
|
17
|
+
/** Disables the tab: sets the native `disabled` attribute, suppresses hover/focus styling, and
|
|
18
|
+
* prevents clicking from emitting `bsSelect`. */
|
|
19
|
+
disabled = false;
|
|
20
|
+
/** Where the icon sits relative to the label, when both `icon` and the default slot are
|
|
21
|
+
* populated. Ignored for icon-only/text-only layouts. */
|
|
22
|
+
iconPosition = 'start';
|
|
23
|
+
/** Accessible name for the tab. Required for icon-only usage (no visible label text via the
|
|
24
|
+
* default slot) so screen readers still announce what the tab does -- without it, an icon-only
|
|
25
|
+
* tab has no discernible name at all (axe-core flags this as a critical `button-name`
|
|
26
|
+
* violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
|
|
27
|
+
* automatically, same as `bs-button`'s identical prop. */
|
|
28
|
+
ariaLabel = null;
|
|
29
|
+
/** Tracks whether the `icon` slot has assigned content. */
|
|
30
|
+
hasIcon = false;
|
|
31
|
+
/** Tracks whether the default (label) slot has assigned content. */
|
|
32
|
+
hasLabel = false;
|
|
33
|
+
/** Tracks whether the `badge` slot has assigned content. */
|
|
34
|
+
hasBadge = false;
|
|
35
|
+
/** Fires when the tab is clicked. Does not toggle `selected` itself -- see the class JSDoc. */
|
|
36
|
+
bsSelect;
|
|
37
|
+
/**
|
|
38
|
+
* Computes the initial `hasIcon`/`hasLabel`/`hasBadge` state directly from the host's light DOM
|
|
39
|
+
* children, before first render -- same reasoning as `bs-button.componentWillLoad` (a slot with
|
|
40
|
+
* zero assigned nodes from the start never fires `slotchange`).
|
|
41
|
+
*/
|
|
42
|
+
componentWillLoad() {
|
|
43
|
+
this.hasIcon = this.hasSlottedContent('icon');
|
|
44
|
+
this.hasLabel = this.hasSlottedContent(null);
|
|
45
|
+
this.hasBadge = this.hasSlottedContent('badge');
|
|
46
|
+
}
|
|
47
|
+
hasSlottedContent(slotName) {
|
|
48
|
+
return Array.from(this.el.childNodes).some(node => {
|
|
49
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
50
|
+
return node.getAttribute('slot') === slotName;
|
|
51
|
+
}
|
|
52
|
+
// Only elements can carry a `slot` attribute -- any other node type (text, comments) can
|
|
53
|
+
// only ever be assigned to the default slot.
|
|
54
|
+
return slotName === null;
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
onIconSlotchange = (ev) => {
|
|
58
|
+
this.hasIcon = ev.target.assignedNodes().length > 0;
|
|
59
|
+
};
|
|
60
|
+
onLabelSlotchange = (ev) => {
|
|
61
|
+
this.hasLabel = ev.target.assignedNodes().length > 0;
|
|
62
|
+
};
|
|
63
|
+
onBadgeSlotchange = (ev) => {
|
|
64
|
+
this.hasBadge = ev.target.assignedNodes().length > 0;
|
|
65
|
+
};
|
|
66
|
+
onClick = () => {
|
|
67
|
+
if (this.disabled)
|
|
68
|
+
return;
|
|
69
|
+
this.bsSelect.emit();
|
|
70
|
+
};
|
|
71
|
+
render() {
|
|
72
|
+
const iconOnly = this.hasIcon && !this.hasLabel;
|
|
73
|
+
const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
|
|
74
|
+
const showBadge = this.hasBadge && !iconOnly && !vertical;
|
|
75
|
+
return (index.h("button", { key: 'de1416c9ee8414405513dd4b9a828d7a3d0ae330', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, index.h("span", { key: 'd884d90267fac3ec8fc9e9bcd8b9cefc5153b47e', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, index.h("slot", { key: '2194a3d72bafda2d0f830e4f9f5a6a92d08c5aa3', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '181abd3f489648a7bf53a11b77bed47c56b2fd94', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, index.h("slot", { key: '683020efc34ea270b700b5034631a549796510f1', onSlotchange: this.onLabelSlotchange })), index.h("span", { key: '02dfede0c88b1b2f805128ce11a5134fd4c83b6d', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, index.h("slot", { key: 'e712da5b095aa9e3c6c8b7f8fa0bee86c0ef7b20', name: "badge", onSlotchange: this.onBadgeSlotchange })), index.h("span", { key: 'a743816f44a8c0cb08dbe518ae521bf05d5c5a08', part: "indicator", class: "bs-tab__indicator" })));
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
BsTab.style = bsTabCss();
|
|
79
|
+
|
|
80
|
+
exports.bs_tab = BsTab;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-B3sdhEGk.js');
|
|
4
|
+
|
|
5
|
+
const bsTabsCss = () => `:host{display:inline-block;--bs-tabs-tab-gap:var(--bs-spacing-100);--bs-tabs-inline-tab-bg:var(--bs-color-neutral-container);--bs-tabs-inline-tab-padding-x:var(--bs-spacing-50);--bs-tabs-inline-tab-radius:var(--bs-border-radius-full);--bs-tabs-inline-tab-gap:var(--bs-spacing-50)}.bs-tabs{display:inline-flex;align-items:center}.bs-tabs--vertical{display:flex;flex-direction:column;align-items:flex-start}.bs-tabs--bs-tab{gap:var(--bs-tabs-tab-gap)}.bs-tabs--bs-inline-tab{background:var(--bs-tabs-inline-tab-bg);padding:0 var(--bs-tabs-inline-tab-padding-x);border-radius:var(--bs-tabs-inline-tab-radius);gap:var(--bs-tabs-inline-tab-gap)}`;
|
|
6
|
+
|
|
7
|
+
const BsTabs = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
index.registerInstance(this, hostRef);
|
|
10
|
+
}
|
|
11
|
+
get el() { return index.getElement(this); }
|
|
12
|
+
/** Which tab-button family this group wraps. Governs the wrapper's own visual treatment (gap-only
|
|
13
|
+
* for `bs-tab`, a filled pill bar for `bs-inline-tab`). Not reflected as an attribute -- nothing
|
|
14
|
+
* external needs to target it via CSS attribute selector, it only drives internal class names. */
|
|
15
|
+
type = 'bs-tab';
|
|
16
|
+
/** Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and
|
|
17
|
+
* switches `flex-direction`. */
|
|
18
|
+
orientation = 'horizontal';
|
|
19
|
+
/**
|
|
20
|
+
* Catches `bsSelect` bubbling up from any slotted `<bs-tab>`/`<bs-inline-tab>` (Stencil's
|
|
21
|
+
* `@Event()` defaults to `bubbles: true, composed: true`, and `@Listen` without a target listens
|
|
22
|
+
* on the host itself), and sets `selected` on the clicked child / `false` on its siblings.
|
|
23
|
+
* Disabled children never emit `bsSelect` in the first place (each's own `onClick` guards
|
|
24
|
+
* `if (this.disabled) return;`), so no special-casing is needed here.
|
|
25
|
+
*/
|
|
26
|
+
onTabSelect(ev) {
|
|
27
|
+
const tabs = this.el.querySelectorAll(':scope > bs-tab, :scope > bs-inline-tab');
|
|
28
|
+
tabs.forEach(tab => {
|
|
29
|
+
tab.selected = tab === ev.target;
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
render() {
|
|
33
|
+
const vertical = this.orientation === 'vertical';
|
|
34
|
+
return (index.h("div", { key: '55006a332bf4d3b955f5c76cf2cfadf483affb4b', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, index.h("slot", { key: '0b0d1ec94485389d4bb6b4000384e337991060bd' })));
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
BsTabs.style = bsTabsCss();
|
|
38
|
+
|
|
39
|
+
exports.bs_tabs = BsTabs;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B3sdhEGk.js');
|
|
4
4
|
|
|
5
5
|
const bsTooltipCss = () => `:host{display:inline-block;--bs-tooltip-bg:var(--bs-surface-inverse);--bs-tooltip-color:var(--bs-text-inverse);--bs-tooltip-radius:var(--bs-border-radius-50);--bs-tooltip-padding-x:var(--bs-spacing-200);--bs-tooltip-padding-y:var(--bs-spacing-100);--bs-tooltip-max-width:200px;--bs-tooltip-shadow:-1px 4px 8px rgba(0, 0, 0, 0.08);--bs-tooltip-font-size:var(--bs-font-size-sm);--bs-tooltip-line-height:var(--bs-line-height-body-sm)}.bs-tooltip{position:relative;display:inline-block}.bs-tooltip__bubble{box-sizing:border-box;max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);background:var(--bs-tooltip-bg);color:var(--bs-tooltip-color);border-radius:var(--bs-tooltip-radius);box-shadow:var(--bs-tooltip-shadow);font-family:inherit;font-size:var(--bs-tooltip-font-size);line-height:calc(var(--bs-tooltip-line-height) * 1px)}.bs-tooltip__arrow{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:8px;height:8px;background:var(--bs-tooltip-bg);clip-path:polygon(50% 0, 0% 100%, 100% 100%)}`;
|
|
6
6
|
|
|
@@ -16,7 +16,7 @@ const BsTooltip = class {
|
|
|
16
16
|
*/
|
|
17
17
|
placement = 'top';
|
|
18
18
|
render() {
|
|
19
|
-
return (index.h("div", { key: '
|
|
19
|
+
return (index.h("div", { key: '64951f06f070f2d3b10796d09f2c97ef7cf098fa', class: "bs-tooltip" }, index.h("span", { key: 'b9ff6d99eb95aea33949f211aa80c29220a3e199', part: "arrow", class: "bs-tooltip__arrow" }), index.h("div", { key: '3b559c7952b42011f45bd59177dbdf3194b84b92', part: "bubble", class: "bs-tooltip__bubble" }, index.h("slot", { key: '54b278e8ee7c98360b9aaaea300e0631d8bfb8dd' }))));
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
BsTooltip.style = bsTooltipCss();
|