@brandsync/wc 1.8.0 → 1.9.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/custom-elements.json +139 -11
- package/dist/brandsync-wc/brandsync-wc.esm.js +1 -1
- package/dist/brandsync-wc/p-0eed6813.entry.js +1 -0
- package/dist/brandsync-wc/{p-ee7da23d.entry.js → p-107b1c5d.entry.js} +1 -1
- package/dist/brandsync-wc/p-2181378f.entry.js +1 -0
- package/dist/brandsync-wc/p-27bbed83.entry.js +1 -0
- package/dist/brandsync-wc/p-36bf37d9.entry.js +1 -0
- package/dist/brandsync-wc/p-3b64e3cd.entry.js +1 -0
- package/dist/brandsync-wc/p-6fd7dd6a.entry.js +1 -0
- package/dist/brandsync-wc/p-9f6fe37d.entry.js +1 -0
- package/dist/brandsync-wc/{p-03b08508.entry.js → p-c3f72584.entry.js} +1 -1
- package/dist/brandsync-wc/p-fc240aa0.entry.js +1 -0
- package/dist/cjs/brandsync-wc.cjs.js +1 -1
- package/dist/cjs/bs-breadcrumb-overflow.cjs.entry.js +13 -1
- package/dist/cjs/bs-breadcrumb.cjs.entry.js +15 -1
- package/dist/cjs/bs-data-table.cjs.entry.js +18 -4
- package/dist/cjs/bs-icon-button.cjs.entry.js +2 -2
- package/dist/cjs/bs-inline-tab.cjs.entry.js +5 -1
- package/dist/cjs/bs-navigation-drawer-item.cjs.entry.js +1 -1
- package/dist/cjs/bs-navigation-drawer.cjs.entry.js +118 -5
- package/dist/cjs/bs-navigation-header.cjs.entry.js +1 -1
- package/dist/cjs/bs-tab.cjs.entry.js +5 -1
- package/dist/cjs/bs-tabs.cjs.entry.js +47 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.cmp.test.js +63 -0
- package/dist/collection/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.js +32 -1
- package/dist/collection/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.cmp.test.js +45 -0
- package/dist/collection/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.js +30 -1
- package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.cmp.test.js +20 -0
- package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.css +21 -4
- package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.js +3 -2
- package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.stories.js +10 -0
- package/dist/collection/components/bs-data-table/bs-data-table.cmp.test.js +19 -0
- package/dist/collection/components/bs-data-table/bs-data-table.js +19 -5
- package/dist/collection/components/bs-data-table/bs-data-table.stories.js +8 -1
- package/dist/collection/components/bs-logo/bs-logo.cmp.test.js +52 -3
- package/dist/collection/components/bs-menu/bs-menu.stories.js +54 -0
- package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js +24 -1
- package/dist/collection/components/bs-tab/bs-tab/bs-tab.js +24 -1
- package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.cmp.test.js +88 -0
- package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js +83 -2
- package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.stories.js +24 -0
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.cmp.test.js +173 -5
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.css +106 -34
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.js +181 -5
- package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.stories.js +48 -0
- 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.cmp.test.js +68 -0
- package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.css +31 -17
- package/dist/components/bs-attachment.js +1 -1
- package/dist/components/bs-breadcrumb-overflow.js +1 -1
- package/dist/components/bs-breadcrumb.js +1 -1
- package/dist/components/bs-carousel.js +1 -1
- package/dist/components/bs-data-table.js +1 -1
- package/dist/components/bs-dialog.js +1 -1
- package/dist/components/bs-file-upload-item.js +1 -1
- package/dist/components/bs-icon-button.js +1 -1
- package/dist/components/bs-inline-tab.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-snackbar.js +1 -1
- package/dist/components/bs-tab.js +1 -1
- package/dist/components/bs-tabs.js +1 -1
- package/dist/components/p-BoeorHNv.js +1 -0
- package/dist/esm/brandsync-wc.js +1 -1
- package/dist/esm/bs-breadcrumb-overflow.entry.js +14 -2
- package/dist/esm/bs-breadcrumb.entry.js +16 -2
- package/dist/esm/bs-data-table.entry.js +18 -4
- package/dist/esm/bs-icon-button.entry.js +2 -2
- package/dist/esm/bs-inline-tab.entry.js +5 -1
- package/dist/esm/bs-navigation-drawer-item.entry.js +1 -1
- package/dist/esm/bs-navigation-drawer.entry.js +119 -6
- package/dist/esm/bs-navigation-header.entry.js +1 -1
- package/dist/esm/bs-tab.entry.js +5 -1
- package/dist/esm/bs-tabs.entry.js +48 -3
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.d.ts +10 -0
- package/dist/types/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.d.ts +8 -0
- package/dist/types/components/bs-button/bs-icon-button/bs-icon-button.d.ts +2 -1
- package/dist/types/components/bs-button/bs-icon-button/bs-icon-button.stories.d.ts +1 -0
- package/dist/types/components/bs-data-table/bs-data-table.d.ts +16 -2
- package/dist/types/components/bs-menu/bs-menu.stories.d.ts +1 -0
- package/dist/types/components/bs-tab/bs-inline-tab/bs-inline-tab.d.ts +4 -0
- package/dist/types/components/bs-tab/bs-tab/bs-tab.d.ts +4 -0
- package/dist/types/components/bs-tab/bs-tabs/bs-tabs.d.ts +17 -0
- package/dist/types/components/bs-tab/bs-tabs/bs-tabs.stories.d.ts +1 -0
- package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.d.ts +50 -1
- package/dist/types/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.stories.d.ts +2 -0
- package/dist/types/components.d.ts +130 -2
- package/package.json +1 -1
- package/dist/brandsync-wc/p-002d258d.entry.js +0 -1
- package/dist/brandsync-wc/p-153da845.entry.js +0 -1
- package/dist/brandsync-wc/p-2e7a1082.entry.js +0 -1
- package/dist/brandsync-wc/p-612cf79c.entry.js +0 -1
- package/dist/brandsync-wc/p-652d4068.entry.js +0 -1
- package/dist/brandsync-wc/p-bc69a96c.entry.js +0 -1
- package/dist/brandsync-wc/p-bf53ad52.entry.js +0 -1
- package/dist/brandsync-wc/p-c7f4c114.entry.js +0 -1
- package/dist/components/p-BkHYJIyj.js +0 -1
|
@@ -18,7 +18,7 @@ var patchBrowser = () => {
|
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(async (options) => {
|
|
20
20
|
await index.globalScripts();
|
|
21
|
-
return index.bootstrapLazy([["bs-carousel.cjs",[[769,"bs-carousel",{"tracker":[1],"slidesPerView":[2,"slides-per-view"],"currentPage":[1538,"current-page"],"autoplay":[4],"interval":[2],"paused":[1540],"label":[1],"previousLabel":[1,"previous-label"],"nextLabel":[1,"next-label"],"pauseLabel":[1,"pause-label"],"playLabel":[1,"play-label"],"slideCount":[32],"interacting":[32]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"]],{"currentPage":[{"onCurrentPageChange":0}],"autoplay":[{"updateTimer":0}],"paused":[{"updateTimer":0}],"interval":[{"updateTimer":0}],"interacting":[{"updateTimer":0}],"slideCount":[{"updateTimer":0}],"slidesPerView":[{"updateTimer":0}]}]]],["bs-file-upload-item.cjs",[[769,"bs-file-upload-item",{"state":[513],"fileName":[1,"file-name"],"fileSize":[1,"file-size"],"progress":[2],"message":[1],"thumbnailSrc":[1,"thumbnail-src"],"thumbnailAlt":[1,"thumbnail-alt"],"cancelLabel":[1,"cancel-label"],"removeLabel":[1,"remove-label"]}]]],["bs-input.cjs",[[849,"bs-input",{"name":[513],"value":[1025],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[516],"required":[4],"step":[2],"min":[2],"max":[2],"options":[16],"rows":[2],"chips":[16],"titleOptions":[16],"initialsTitle":[1,"initials-title"],"countryOptions":[16],"country":[1],"length":[2],"open":[1540],"hasIcon":[32],"hasEndIcon":[32],"passwordVisible":[32],"chipDraft":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]],{"value":[{"onFormStateChange":0}],"type":[{"onFormStateChange":0}],"chips":[{"onFormStateChange":0}],"required":[{"onFormStateChange":0}]}]]],["bs-snackbar.cjs",[[769,"bs-snackbar",{"variant":[1],"loading":[4],"actionLabel":[1,"action-label"]}]]],["bs-attachment.cjs",[[513,"bs-attachment",{"type":[1],"fileName":[1,"file-name"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"loading":[4],"removable":[4]}]]],["bs-breadcrumb-overflow.cjs",[[513,"bs-breadcrumb-overflow",{"items":[16],"overflowLabel":[1,"overflow-label"],"size":[513],"open":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["bs-chatbot-header.cjs",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["bs-dialog.cjs",[[769,"bs-dialog",{"open":[1540],"heading":[1],"size":[1],"centered":[516],"hasFooter":[32],"hasImage":[32],"hasIcon":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["bs-file-upload.cjs",[[769,"bs-file-upload",{"direction":[513],"heading":[1],"description":[1],"buttonLabel":[1,"button-label"],"accept":[1],"multiple":[4],"disabled":[516],"dragging":[1540]}]]],["bs-navigation-drawer.cjs",[[769,"bs-navigation-drawer",{"heading":[1],"collapsible":[4],"collapsed":[1540],"logoBackground":[1,"logo-background"],"showLogo":[4,"show-logo"]},
|
|
21
|
+
return index.bootstrapLazy([["bs-carousel.cjs",[[769,"bs-carousel",{"tracker":[1],"slidesPerView":[2,"slides-per-view"],"currentPage":[1538,"current-page"],"autoplay":[4],"interval":[2],"paused":[1540],"label":[1],"previousLabel":[1,"previous-label"],"nextLabel":[1,"next-label"],"pauseLabel":[1,"pause-label"],"playLabel":[1,"play-label"],"slideCount":[32],"interacting":[32]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"]],{"currentPage":[{"onCurrentPageChange":0}],"autoplay":[{"updateTimer":0}],"paused":[{"updateTimer":0}],"interval":[{"updateTimer":0}],"interacting":[{"updateTimer":0}],"slideCount":[{"updateTimer":0}],"slidesPerView":[{"updateTimer":0}]}]]],["bs-file-upload-item.cjs",[[769,"bs-file-upload-item",{"state":[513],"fileName":[1,"file-name"],"fileSize":[1,"file-size"],"progress":[2],"message":[1],"thumbnailSrc":[1,"thumbnail-src"],"thumbnailAlt":[1,"thumbnail-alt"],"cancelLabel":[1,"cancel-label"],"removeLabel":[1,"remove-label"]}]]],["bs-input.cjs",[[849,"bs-input",{"name":[513],"value":[1025],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[516],"required":[4],"step":[2],"min":[2],"max":[2],"options":[16],"rows":[2],"chips":[16],"titleOptions":[16],"initialsTitle":[1,"initials-title"],"countryOptions":[16],"country":[1],"length":[2],"open":[1540],"hasIcon":[32],"hasEndIcon":[32],"passwordVisible":[32],"chipDraft":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]],{"value":[{"onFormStateChange":0}],"type":[{"onFormStateChange":0}],"chips":[{"onFormStateChange":0}],"required":[{"onFormStateChange":0}]}]]],["bs-snackbar.cjs",[[769,"bs-snackbar",{"variant":[1],"loading":[4],"actionLabel":[1,"action-label"]}]]],["bs-attachment.cjs",[[513,"bs-attachment",{"type":[1],"fileName":[1,"file-name"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"loading":[4],"removable":[4]}]]],["bs-breadcrumb-overflow.cjs",[[513,"bs-breadcrumb-overflow",{"items":[16],"overflowLabel":[1,"overflow-label"],"size":[513],"open":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["bs-chatbot-header.cjs",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["bs-dialog.cjs",[[769,"bs-dialog",{"open":[1540],"heading":[1],"size":[1],"centered":[516],"hasFooter":[32],"hasImage":[32],"hasIcon":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["bs-file-upload.cjs",[[769,"bs-file-upload",{"direction":[513],"heading":[1],"description":[1],"buttonLabel":[1,"button-label"],"accept":[1],"multiple":[4],"disabled":[516],"dragging":[1540]}]]],["bs-navigation-drawer.cjs",[[769,"bs-navigation-drawer",{"heading":[1],"collapsible":[4],"collapsed":[1540],"logoBackground":[1,"logo-background"],"showLogo":[4,"show-logo"],"open":[1540],"mobile":[32]},[[4,"keydown","onDocumentKeydown"],[4,"focusin","onDocumentFocusIn"]],{"collapsed":[{"onCollapsedChange":0}],"mobile":[{"onMobileChange":0}],"open":[{"onOpenChange":0}]}]]],["bs-navigation-header.cjs",[[769,"bs-navigation-header",{"alignment":[1],"ariaLabel":[1,"aria-label"],"skipToContentHref":[1,"skip-to-content-href"],"skipToContentLabel":[1,"skip-to-content-label"],"logoBackground":[1,"logo-background"]}]]],["bs-accordion.cjs",[[769,"bs-accordion",{"expanded":[516],"size":[1],"disabled":[4],"showIcon":[4,"show-icon"],"showPreview":[4,"show-preview"]}]]],["bs-ai-disclaimer.cjs",[[257,"bs-ai-disclaimer"]]],["bs-ai-greeting.cjs",[[513,"bs-ai-greeting",{"assistantName":[1,"assistant-name"],"productName":[1,"product-name"]}]]],["bs-ai-thinking.cjs",[[513,"bs-ai-thinking",{"label":[1]}]]],["bs-attachment-list.cjs",[[769,"bs-attachment-list",{"ariaLabel":[1,"aria-label"],"canScrollRight":[32]}]]],["bs-avatar.cjs",[[513,"bs-avatar",{"type":[1],"size":[1],"initials":[1],"src":[1],"alt":[1],"ariaLabel":[1,"aria-label"],"disabled":[516]}]]],["bs-badge.cjs",[[769,"bs-badge",{"variant":[1]}]]],["bs-breadcrumb.cjs",[[769,"bs-breadcrumb",{"href":[1],"current":[516],"size":[513]}]]],["bs-breadcrumbs.cjs",[[769,"bs-breadcrumbs",{"label":[1],"size":[1]},null,{"size":[{"onSizeChange":0}]}]]],["bs-button-skeleton.cjs",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card.cjs",[[769,"bs-card",{"surface":[1],"hasImage":[32]}]]],["bs-chatbot-feedback.cjs",[[513,"bs-chatbot-feedback",{"rating":[1538],"submitted":[1540],"comment":[1025],"heading":[1],"subtitle":[1]}]]],["bs-chatbot-response-action.cjs",[[769,"bs-chatbot-response-action",{"sourcesCount":[2,"sources-count"],"menuOpen":[1540,"menu-open"]},[[4,"click","onDocumentClick"],[4,"keydown","onKeydown"]]]]],["bs-chatbot-sources-drawer.cjs",[[769,"bs-chatbot-sources-drawer",{"heading":[1],"count":[2],"slottedCount":[32]}]]],["bs-chatbot-suggestion-button.cjs",[[769,"bs-chatbot-suggestion-button",{"disabled":[4]}]]],["bs-checkbox.cjs",[[849,"bs-checkbox",{"name":[513],"value":[1],"required":[4],"size":[1],"checked":[1540],"indeterminate":[1540],"disabled":[516],"error":[4],"ariaLabel":[1,"aria-label"]},null,{"checked":[{"syncFormValue":0}],"value":[{"syncFormValue":0}],"required":[{"syncFormValue":0}],"indeterminate":[{"onIndeterminateChange":0}]}]]],["bs-checkbox-skeleton.cjs",[[513,"bs-checkbox-skeleton",{"size":[1]}]]],["bs-chip-filter.cjs",[[785,"bs-chip-filter",{"size":[1],"selected":[516],"dropdown":[4],"disabled":[4],"ariaLabel":[1,"aria-label"],"hasIcon":[32]}]]],["bs-chip-informative.cjs",[[769,"bs-chip-informative",{"color":[1],"size":[1],"disabled":[516],"hasIcon":[32]}]]],["bs-chip-input.cjs",[[785,"bs-chip-input",{"size":[1],"selected":[1540],"disabled":[516],"hasIcon":[32],"labelText":[32]}]]],["bs-composer.cjs",[[785,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1025],"state":[513],"ariaLabel":[1,"aria-label"],"hasAttachments":[32]}]]],["bs-composer-status-banner.cjs",[[769,"bs-composer-status-banner",{"type":[1],"message":[1],"showIcon":[4,"show-icon"],"showButton":[4,"show-button"],"actionLabel":[1,"action-label"],"allowClose":[4,"allow-close"]}]]],["bs-data-table.cjs",[[513,"bs-data-table",{"columns":[16],"rows":[16],"sortColumn":[1,"sort-column"],"sortDirection":[1,"sort-direction"],"selectable":[4],"cellRenderer":[16],"selectedIds":[32],"clearSelection":[64]}]]],["bs-inline-tab.cjs",[[769,"bs-inline-tab",{"selected":[516],"disabled":[4],"ariaLabel":[1,"aria-label"],"value":[513],"tabbable":[4],"hasIcon":[32],"hasLabel":[32]}]]],["bs-navigation-drawer-item.cjs",[[769,"bs-navigation-drawer-item",{"selected":[516],"expandable":[4],"expanded":[1540],"nested":[4],"ariaLabel":[1,"aria-label"],"collapsed":[516],"hasIcon":[32]}]]],["bs-progress.cjs",[[513,"bs-progress",{"type":[1],"size":[1],"strokeWidth":[2,"stroke-width"],"value":[2],"showLabel":[4,"show-label"],"ariaLabel":[1,"aria-label"]}]]],["bs-radio.cjs",[[849,"bs-radio",{"name":[513],"value":[1],"checked":[1540],"disabled":[516],"groupHasChecked":[32]},[[4,"bsChange","onAnyRadioChange"]],{"checked":[{"onCheckedChange":0}],"value":[{"onCheckedChange":0}]}]]],["bs-slider.cjs",[[593,"bs-slider",{"type":[1],"name":[513],"showLabel":[4,"show-label"],"label":[1],"min":[2],"max":[2],"step":[2],"value":[1026],"valueStart":[1026,"value-start"],"valueEnd":[1026,"value-end"],"segments":[2],"disabled":[516],"ariaLabel":[1,"aria-label"]},null,{"value":[{"syncFormValue":0}],"valueStart":[{"syncFormValue":0}],"valueEnd":[{"syncFormValue":0}],"type":[{"syncFormValue":0}]}]]],["bs-source-link.cjs",[[769,"bs-source-link",{"fileName":[1,"file-name"],"sourceName":[1,"source-name"],"version":[1],"href":[1],"target":[1]}]]],["bs-stepper.cjs",[[769,"bs-stepper",{"currentStep":[2,"current-step"],"direction":[513],"showDescription":[4,"show-description"]},null,{"currentStep":[{"onPropChange":0}],"direction":[{"onPropChange":0}],"showDescription":[{"onPropChange":0}]}]]],["bs-stepper-step.cjs",[[513,"bs-stepper-step",{"name":[1],"description":[1],"error":[4],"disabled":[4],"computedState":[1,"computed-state"],"direction":[1],"showDescription":[4,"show-description"]}]]],["bs-switch.cjs",[[849,"bs-switch",{"name":[513],"value":[1],"size":[1],"checked":[1540],"disabled":[516],"ariaLabel":[1,"aria-label"]},null,{"checked":[{"syncFormValue":0}],"value":[{"syncFormValue":0}]}]]],["bs-tab.cjs",[[769,"bs-tab",{"selected":[516],"disabled":[4],"iconPosition":[1,"icon-position"],"ariaLabel":[1,"aria-label"],"value":[513],"tabbable":[4],"hasIcon":[32],"hasLabel":[32],"hasBadge":[32]}]]],["bs-tabs.cjs",[[769,"bs-tabs",{"type":[1],"orientation":[1],"value":[1537]},[[0,"bsSelect","onTabSelect"],[0,"keydown","onKeyDown"]],{"value":[{"onValueChange":0}],"orientation":[{"syncRovingTabindex":0}]}]]],["bs-toast.cjs",[[769,"bs-toast",{"state":[1]}]]],["bs-menu-item.cjs",[[769,"bs-menu-item",{"disabled":[4],"hasIcon":[32]}]]],["bs-pagination.cjs",[[513,"bs-pagination",{"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"],"siblingCount":[2,"sibling-count"],"previousLabel":[1,"previous-label"],"nextLabel":[1,"next-label"]}]]],["bs-progress-linear.cjs",[[769,"bs-progress-linear",{"type":[1],"size":[1],"value":[2],"showLabel":[4,"show-label"],"ariaLabel":[1,"aria-label"],"hasLabelContent":[32]}]]],["bs-tooltip.cjs",[[769,"bs-tooltip",{"placement":[1]}]]],["bs-logo.cjs",[[513,"bs-logo",{"variant":[1],"background":[1],"src":[1],"alt":[1]}]]],["bs-menu.cjs",[[257,"bs-menu",null,[[0,"keydown","onKeyDown"]]]]],["bs-button.cjs",[[849,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-icon-button.cjs",[[849,"bs-icon-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]]], options);
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
exports.setNonce = index.setNonce;
|
|
@@ -7,6 +7,7 @@ const bsBreadcrumbOverflowCss = () => `:host{display:inline-flex;align-items:cen
|
|
|
7
7
|
const BsBreadcrumbOverflow = class {
|
|
8
8
|
constructor(hostRef) {
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
|
+
this.bsNavigate = index.createEvent(this, "bsNavigate");
|
|
10
11
|
}
|
|
11
12
|
get el() { return index.getElement(this); }
|
|
12
13
|
/** Array prop -- must be set as a JS property (`el.items = [...]`), not an HTML attribute, since
|
|
@@ -23,6 +24,17 @@ const BsBreadcrumbOverflow = class {
|
|
|
23
24
|
size = 'md';
|
|
24
25
|
/** Whether the overflow popup is open. */
|
|
25
26
|
open = false;
|
|
27
|
+
/** Fires when one of the popup's links is clicked, before the browser navigates. **Cancelable**
|
|
28
|
+
* -- see `bs-breadcrumb`'s `bsNavigate`, which this mirrors (same detail, same modified-click
|
|
29
|
+
* rule). Detail is `{ href }`. */
|
|
30
|
+
bsNavigate;
|
|
31
|
+
onItemClick = (href) => (ev) => {
|
|
32
|
+
if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
|
|
33
|
+
return;
|
|
34
|
+
const navigate = this.bsNavigate.emit({ href });
|
|
35
|
+
if (navigate.defaultPrevented)
|
|
36
|
+
ev.preventDefault();
|
|
37
|
+
};
|
|
26
38
|
onEllipsisToggle = () => {
|
|
27
39
|
this.open = !this.open;
|
|
28
40
|
};
|
|
@@ -46,7 +58,7 @@ const BsBreadcrumbOverflow = class {
|
|
|
46
58
|
}
|
|
47
59
|
}
|
|
48
60
|
render() {
|
|
49
|
-
return (index.h(index.Host, { key: '
|
|
61
|
+
return (index.h(index.Host, { key: '4dd958f3f99f42072bb314654fc5a0856d8e41c4', role: "listitem" }, index.h("span", { key: 'ab7d01467e99b810b62e71d7ed289316470529f5', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, index.h(CaretRightIcon, { key: '6590de37057e39c4c914fde3dc3490e17566ad66' })), index.h("span", { key: '63081f592180f605716221c80dbb877acf926d48', class: "bs-breadcrumb-overflow__wrapper" }, index.h("button", { key: '0ec87f47561dc329269b1fefef0ccb76dae4cdb4', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, index.h(DotsThreeIcon, { key: '6da3c5bee9f532264e2e58227dccc4dfc3786782' })), this.open && this.items.length > 0 && (index.h("bs-menu", { key: '66f772f0f53090e960d2a9b08e1283989dfc02f8', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (index.h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href, onClick: this.onItemClick(item.href) }, item.label)) : (index.h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
|
|
50
62
|
}
|
|
51
63
|
};
|
|
52
64
|
const CaretRightIcon = () => (index.h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
|
|
@@ -7,6 +7,7 @@ const bsBreadcrumbCss = () => `:host{display:inline-flex;align-items:center;--bs
|
|
|
7
7
|
const BsBreadcrumb = class {
|
|
8
8
|
constructor(hostRef) {
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
|
+
this.bsNavigate = index.createEvent(this, "bsNavigate");
|
|
10
11
|
}
|
|
11
12
|
/** Destination for a non-current crumb. Ignored when `current` is true -- the current page is
|
|
12
13
|
* never a link, even if `href` is set (see the class JSDoc). */
|
|
@@ -23,8 +24,21 @@ const BsBreadcrumb = class {
|
|
|
23
24
|
* size is unchanged, since Figma didn't specify a `sm` icon size and guessing one risked drifting
|
|
24
25
|
* off-brand. Reflected so consumers/CSS can target `bs-breadcrumb[size="sm"]`. */
|
|
25
26
|
size = 'md';
|
|
27
|
+
/** Fires when the crumb's link is clicked, before the browser navigates. **Cancelable**: call
|
|
28
|
+
* `event.preventDefault()` to stop the native navigation and route it yourself (an SPA router).
|
|
29
|
+
* Detail is `{ href }`. Only a plain primary-button click emits it -- ctrl/cmd/shift/alt-clicks
|
|
30
|
+
* and middle-clicks (open in a new tab/window) are left to the browser. Bubbles and is composed,
|
|
31
|
+
* so one listener on the surrounding `<bs-breadcrumbs>` covers every crumb. */
|
|
32
|
+
bsNavigate;
|
|
33
|
+
onLinkClick = (ev) => {
|
|
34
|
+
if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
|
|
35
|
+
return;
|
|
36
|
+
const navigate = this.bsNavigate.emit({ href: this.href });
|
|
37
|
+
if (navigate.defaultPrevented)
|
|
38
|
+
ev.preventDefault();
|
|
39
|
+
};
|
|
26
40
|
render() {
|
|
27
|
-
return (index.h(index.Host, { key: '
|
|
41
|
+
return (index.h(index.Host, { key: '92b78d6b9eeb98420ed6a42496d632d4d437ea78', role: "listitem" }, index.h("span", { key: '0fbd23cacfecc6b5ea75c250d65875a1087913f7', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, index.h(CaretRightIcon, { key: '2799c66de6d3291622bd3dea39e4c1f7f97a1bc9' })), this.current ? (index.h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, index.h("slot", null))) : this.href ? (index.h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href, onClick: this.onLinkClick }, index.h("slot", null))) : (index.h("span", { part: "link", class: "bs-breadcrumb__link" }, index.h("slot", null)))));
|
|
28
42
|
}
|
|
29
43
|
};
|
|
30
44
|
const CaretRightIcon = () => (index.h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
|
|
@@ -18,8 +18,22 @@ const BsDataTable = class {
|
|
|
18
18
|
sortColumn;
|
|
19
19
|
sortDirection = 'asc';
|
|
20
20
|
selectable = false;
|
|
21
|
-
/** Optional custom cell renderer,
|
|
22
|
-
*
|
|
21
|
+
/** Optional custom cell renderer, for rich cells such as a status badge, a link or an actions
|
|
22
|
+
* column. It returns an **HTML string** that is inserted into the cell as real markup
|
|
23
|
+
* (`innerHTML`), so links, buttons, `<img>` and other web components (e.g. `<bs-badge>`) all render.
|
|
24
|
+
*
|
|
25
|
+
* **When set it renders every cell, not just the special ones** -- return the plain value for
|
|
26
|
+
* ordinary columns too. And **the returned string is not escaped or sanitized** (same trust
|
|
27
|
+
* model as React's `dangerouslySetInnerHTML`): escape any untrusted row data you put in it, plain
|
|
28
|
+
* columns included, or it will be interpreted as HTML. Without a `cellRenderer`, values are
|
|
29
|
+
* rendered as escaped text.
|
|
30
|
+
*
|
|
31
|
+
* The markup is static HTML -- attach behavior yourself, e.g. one `click` listener on the table
|
|
32
|
+
* that reads `event.composedPath()[0]` (events from inside the shadow root are retargeted to the
|
|
33
|
+
* table itself).
|
|
34
|
+
*
|
|
35
|
+
* Function props are JS-property-only, same as array props -- there is no attribute equivalent.
|
|
36
|
+
* Falls back to the raw cell value (as escaped text) when unset. */
|
|
23
37
|
cellRenderer;
|
|
24
38
|
bsSort;
|
|
25
39
|
bsRowSelect;
|
|
@@ -60,11 +74,11 @@ const BsDataTable = class {
|
|
|
60
74
|
}
|
|
61
75
|
}
|
|
62
76
|
render() {
|
|
63
|
-
return (index.h("table", { key: '
|
|
77
|
+
return (index.h("table", { key: '7ea79a70148513512cdba2f8cb8d5a5c7ae09706', part: "table", class: "bs-data-table" }, index.h("thead", { key: 'e9cf73cbba196e9caf4b03a837866a5370c13e19', part: "head" }, index.h("tr", { key: 'a33fbd57f1925e34c6e7ce292b6945d2ee5c6113' }, this.selectable && (index.h("th", { key: '876948b66e54ae68d6aa6148c962781223fa0441', class: "bs-data-table__select-col" }, this.rows.length > 0 && (index.h("input", { key: 'cf8f26258bcee486190e3ac4b3d5ce4715784d5f', type: "checkbox", "aria-label": "Select all rows", checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
|
|
64
78
|
const isSorted = this.sortColumn === column.key;
|
|
65
79
|
const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
|
|
66
80
|
return (index.h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (index.h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && index.h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
|
|
67
|
-
}))), index.h("tbody", { key: '
|
|
81
|
+
}))), index.h("tbody", { key: '3a0c2ce6fea27797b855ee2b3c724d0e99471d28', part: "body" }, this.rows.map(row => (index.h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (index.h("td", { class: "bs-data-table__select-col" }, index.h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
|
|
68
82
|
// cellRenderer is a developer-supplied, trusted function (JS-property-only, never
|
|
69
83
|
// derived from untrusted input) -- its HTML output is intentionally not escaped,
|
|
70
84
|
// same trust model as React's dangerouslySetInnerHTML.
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-kk9YXF2S.js');
|
|
4
4
|
|
|
5
|
-
const bsIconButtonCss = () => `:host{display:inline-block;--bs-icon-button-radius:var(--bs-border-radius-100);--bs-icon-button-size-sm:40px;--bs-icon-button-size-md:44px;--bs-icon-button-size-lg:48px;--bs-icon-button-icon-size-sm:16px;--bs-icon-button-icon-size-md:20px;--bs-icon-button-icon-size-lg:24px;--bs-icon-button-padding:var(--bs-spacing-150);--bs-icon-button-radius-xs:var(--bs-border-radius-50);--bs-icon-button-size-xs:16px;--bs-icon-button-icon-size-xs:8px;--bs-icon-button-padding-xs:var(--bs-spacing-50);--bs-icon-button-primary-default:var(--bs-color-primary-default);--bs-icon-button-primary-hover:var(--bs-color-primary-hover);--bs-icon-button-primary-pressed:var(--bs-color-primary-pressed);--bs-icon-button-primary-disabled:var(--bs-surface-action-disabled);--bs-icon-button-neutral-container:var(--bs-color-neutral-container);--bs-icon-button-neutral-hover:var(--bs-color-neutral-container-hover);--bs-icon-button-neutral-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-neutral-border:var(--bs-border-neutral-container);--bs-icon-button-neutral-border-hover:var(--bs-border-neutral-container-hover);--bs-icon-button-neutral-border-pressed:var(--bs-border-neutral-container-pressed);--bs-icon-button-subtle-hover:var(--bs-color-neutral-container);--bs-icon-button-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-subtle-focus:var(--bs-border-primary-focus);--bs-icon-button-outlined-border:var(--bs-color-primary-default);--bs-icon-button-outlined-border-hover:var(--bs-color-primary-hover);--bs-icon-button-outlined-border-pressed:var(--bs-color-primary-pressed);--bs-icon-button-outlined-text-hover:var(--bs-text-action-hover);--bs-icon-button-outlined-container:var(--bs-color-primary-container);--bs-icon-button-outlined-focus:var(--bs-border-primary-focus);--bs-icon-button-success-default:var(--bs-color-success-default);--bs-icon-button-success-hover:var(--bs-color-success-hover);--bs-icon-button-success-pressed:var(--bs-color-success-pressed);--bs-icon-button-success-disabled:var(--bs-surface-action-disabled);--bs-icon-button-success-focus:var(--bs-border-success-focus);--bs-icon-button-warning-default:var(--bs-color-warning-default);--bs-icon-button-warning-hover:var(--bs-color-warning-hover);--bs-icon-button-warning-pressed:var(--bs-color-warning-pressed);--bs-icon-button-warning-disabled:var(--bs-surface-action-disabled);--bs-icon-button-warning-focus:var(--bs-border-warning-focus);--bs-icon-button-info-default:var(--bs-color-info-default);--bs-icon-button-info-hover:var(--bs-color-info-hover);--bs-icon-button-info-pressed:var(--bs-color-info-pressed);--bs-icon-button-info-disabled:var(--bs-surface-action-disabled);--bs-icon-button-info-focus:var(--bs-border-info-focus);--bs-icon-button-error-default:var(--bs-color-error-default);--bs-icon-button-error-hover:var(--bs-color-error-hover);--bs-icon-button-error-pressed:var(--bs-color-error-pressed);--bs-icon-button-error-disabled:var(--bs-surface-action-disabled);--bs-icon-button-error-focus:var(--bs-border-error-focus)}.bs-icon-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;border-radius:var(--bs-icon-button-radius);padding:var(--bs-icon-button-padding);cursor:pointer;transition:background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease)}.bs-icon-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-icon-button:disabled{cursor:not-allowed}.bs-icon-button--xs{width:var(--bs-icon-button-size-xs);height:var(--bs-icon-button-size-xs);padding:var(--bs-icon-button-padding-xs);border-radius:var(--bs-icon-button-radius-xs)}.bs-icon-button--xs .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-xs);height:var(--bs-icon-button-icon-size-xs)}.bs-icon-button--sm{width:var(--bs-icon-button-size-sm);height:var(--bs-icon-button-size-sm)}.bs-icon-button--sm .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-sm);height:var(--bs-icon-button-icon-size-sm)}.bs-icon-button--md{width:var(--bs-icon-button-size-md);height:var(--bs-icon-button-size-md)}.bs-icon-button--md .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-md);height:var(--bs-icon-button-icon-size-md)}.bs-icon-button--lg{width:var(--bs-icon-button-size-lg);height:var(--bs-icon-button-size-lg)}.bs-icon-button--lg .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-lg);height:var(--bs-icon-button-icon-size-lg)}.bs-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;color:inherit}.bs-icon-button__icon ::slotted(*){display:block;width:100%;height:100
|
|
5
|
+
const bsIconButtonCss = () => `:host{display:inline-block;--bs-icon-button-radius:var(--bs-border-radius-100);--bs-icon-button-size-sm:40px;--bs-icon-button-size-md:44px;--bs-icon-button-size-lg:48px;--bs-icon-button-icon-size-sm:16px;--bs-icon-button-icon-size-md:20px;--bs-icon-button-icon-size-lg:24px;--bs-icon-button-padding:var(--bs-spacing-150);--bs-icon-button-radius-xs:var(--bs-border-radius-50);--bs-icon-button-size-xs:16px;--bs-icon-button-icon-size-xs:8px;--bs-icon-button-padding-xs:var(--bs-spacing-50);--bs-icon-button-primary-default:var(--bs-color-primary-default);--bs-icon-button-primary-hover:var(--bs-color-primary-hover);--bs-icon-button-primary-pressed:var(--bs-color-primary-pressed);--bs-icon-button-primary-disabled:var(--bs-surface-action-disabled);--bs-icon-button-neutral-container:var(--bs-color-neutral-container);--bs-icon-button-neutral-hover:var(--bs-color-neutral-container-hover);--bs-icon-button-neutral-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-neutral-border:var(--bs-border-neutral-container);--bs-icon-button-neutral-border-hover:var(--bs-border-neutral-container-hover);--bs-icon-button-neutral-border-pressed:var(--bs-border-neutral-container-pressed);--bs-icon-button-subtle-hover:var(--bs-color-neutral-container);--bs-icon-button-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-icon-button-subtle-focus:var(--bs-border-primary-focus);--bs-icon-button-outlined-border:var(--bs-color-primary-default);--bs-icon-button-outlined-border-hover:var(--bs-color-primary-hover);--bs-icon-button-outlined-border-pressed:var(--bs-color-primary-pressed);--bs-icon-button-outlined-text-hover:var(--bs-text-action-hover);--bs-icon-button-outlined-container:var(--bs-color-primary-container);--bs-icon-button-outlined-focus:var(--bs-border-primary-focus);--bs-icon-button-success-default:var(--bs-color-success-default);--bs-icon-button-success-hover:var(--bs-color-success-hover);--bs-icon-button-success-pressed:var(--bs-color-success-pressed);--bs-icon-button-success-disabled:var(--bs-surface-action-disabled);--bs-icon-button-success-focus:var(--bs-border-success-focus);--bs-icon-button-warning-default:var(--bs-color-warning-default);--bs-icon-button-warning-hover:var(--bs-color-warning-hover);--bs-icon-button-warning-pressed:var(--bs-color-warning-pressed);--bs-icon-button-warning-disabled:var(--bs-surface-action-disabled);--bs-icon-button-warning-focus:var(--bs-border-warning-focus);--bs-icon-button-info-default:var(--bs-color-info-default);--bs-icon-button-info-hover:var(--bs-color-info-hover);--bs-icon-button-info-pressed:var(--bs-color-info-pressed);--bs-icon-button-info-disabled:var(--bs-surface-action-disabled);--bs-icon-button-info-focus:var(--bs-border-info-focus);--bs-icon-button-error-default:var(--bs-color-error-default);--bs-icon-button-error-hover:var(--bs-color-error-hover);--bs-icon-button-error-pressed:var(--bs-color-error-pressed);--bs-icon-button-error-disabled:var(--bs-surface-action-disabled);--bs-icon-button-error-focus:var(--bs-border-error-focus)}.bs-icon-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;border-radius:var(--bs-icon-button-radius);padding:var(--bs-icon-button-padding);cursor:pointer;transition:background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease)}.bs-icon-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-icon-button:disabled{cursor:not-allowed}.bs-icon-button--xs{width:var(--bs-icon-button-size-xs);height:var(--bs-icon-button-size-xs);padding:var(--bs-icon-button-padding-xs);border-radius:var(--bs-icon-button-radius-xs)}.bs-icon-button--xs .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-xs);height:var(--bs-icon-button-icon-size-xs);font-size:var(--bs-icon-button-icon-size-xs)}.bs-icon-button--sm{width:var(--bs-icon-button-size-sm);height:var(--bs-icon-button-size-sm)}.bs-icon-button--sm .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-sm);height:var(--bs-icon-button-icon-size-sm);font-size:var(--bs-icon-button-icon-size-sm)}.bs-icon-button--md{width:var(--bs-icon-button-size-md);height:var(--bs-icon-button-size-md)}.bs-icon-button--md .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-md);height:var(--bs-icon-button-icon-size-md);font-size:var(--bs-icon-button-icon-size-md)}.bs-icon-button--lg{width:var(--bs-icon-button-size-lg);height:var(--bs-icon-button-size-lg)}.bs-icon-button--lg .bs-icon-button__icon{width:var(--bs-icon-button-icon-size-lg);height:var(--bs-icon-button-icon-size-lg);font-size:var(--bs-icon-button-icon-size-lg)}.bs-icon-button__icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1}.bs-icon-button__icon ::slotted(*){display:block;width:100%;height:100%;font-size:inherit;line-height:1}.bs-icon-button--primary{background:var(--bs-icon-button-primary-default);color:var(--bs-text-on-action)}.bs-icon-button--primary:hover:not(:disabled){background:var(--bs-icon-button-primary-hover)}.bs-icon-button--primary:active:not(:disabled){background:var(--bs-icon-button-primary-pressed)}.bs-icon-button--primary:disabled{background:var(--bs-icon-button-primary-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--neutral{background:var(--bs-icon-button-neutral-container);color:var(--bs-text-default);border:1px solid var(--bs-icon-button-neutral-border)}.bs-icon-button--neutral:hover:not(:disabled){background:var(--bs-icon-button-neutral-hover);border-color:var(--bs-icon-button-neutral-border-hover)}.bs-icon-button--neutral:active:not(:disabled){background:var(--bs-icon-button-neutral-pressed);border-color:var(--bs-icon-button-neutral-border-pressed)}.bs-icon-button--neutral:disabled{background:var(--bs-icon-button-neutral-container);color:var(--bs-text-on-disabled);border-color:var(--bs-icon-button-neutral-border)}.bs-icon-button--error{background:var(--bs-icon-button-error-default);color:var(--bs-text-on-action)}.bs-icon-button--error:hover:not(:disabled){background:var(--bs-icon-button-error-hover)}.bs-icon-button--error:active:not(:disabled){background:var(--bs-icon-button-error-pressed)}.bs-icon-button--error:disabled{background:var(--bs-icon-button-error-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--error:focus-visible{outline-color:var(--bs-icon-button-error-focus)}.bs-icon-button--success{background:var(--bs-icon-button-success-default);color:var(--bs-text-on-action)}.bs-icon-button--success:hover:not(:disabled){background:var(--bs-icon-button-success-hover)}.bs-icon-button--success:active:not(:disabled){background:var(--bs-icon-button-success-pressed)}.bs-icon-button--success:disabled{background:var(--bs-icon-button-success-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--success:focus-visible{outline-color:var(--bs-icon-button-success-focus)}.bs-icon-button--warning{background:var(--bs-icon-button-warning-default);color:var(--bs-text-on-action)}.bs-icon-button--warning:hover:not(:disabled){background:var(--bs-icon-button-warning-hover)}.bs-icon-button--warning:active:not(:disabled){background:var(--bs-icon-button-warning-pressed)}.bs-icon-button--warning:disabled{background:var(--bs-icon-button-warning-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--warning:focus-visible{outline-color:var(--bs-icon-button-warning-focus)}.bs-icon-button--info{background:var(--bs-icon-button-info-default);color:var(--bs-text-on-action)}.bs-icon-button--info:hover:not(:disabled){background:var(--bs-icon-button-info-hover)}.bs-icon-button--info:active:not(:disabled){background:var(--bs-icon-button-info-pressed)}.bs-icon-button--info:disabled{background:var(--bs-icon-button-info-disabled);color:var(--bs-text-on-disabled)}.bs-icon-button--info:focus-visible{outline-color:var(--bs-icon-button-info-focus)}.bs-icon-button--subtle{background:transparent;color:var(--bs-icon-neutral-default)}.bs-icon-button--subtle:hover:not(:disabled){background:var(--bs-icon-button-subtle-hover)}.bs-icon-button--subtle:active:not(:disabled){background:var(--bs-icon-button-subtle-pressed)}.bs-icon-button--subtle:disabled{background:transparent;color:var(--bs-text-on-disabled)}.bs-icon-button--subtle:focus-visible{outline-color:var(--bs-icon-button-subtle-focus);background:var(--bs-icon-button-subtle-hover)}.bs-icon-button--outlined{background:transparent;color:var(--bs-color-primary-default);border:1px solid var(--bs-icon-button-outlined-border)}.bs-icon-button--outlined:hover:not(:disabled){background:var(--bs-icon-button-outlined-container);border-color:var(--bs-icon-button-outlined-border-hover);color:var(--bs-icon-button-outlined-text-hover)}.bs-icon-button--outlined:active:not(:disabled){background:var(--bs-icon-button-outlined-container);color:var(--bs-icon-button-outlined-text-hover);border-color:var(--bs-icon-button-outlined-border-pressed)}.bs-icon-button--outlined:disabled{opacity:var(--bs-opacity-disabled);cursor:not-allowed}.bs-icon-button--outlined:focus-visible{outline-color:var(--bs-icon-button-outlined-focus)}`;
|
|
6
6
|
|
|
7
7
|
const BsIconButton = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -49,7 +49,7 @@ const BsIconButton = class {
|
|
|
49
49
|
form.reset();
|
|
50
50
|
};
|
|
51
51
|
render() {
|
|
52
|
-
return (index.h("button", { key: '
|
|
52
|
+
return (index.h("button", { key: '538cd121df25e20ea7e21a7b5269e73d275f8bff', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, index.h("span", { key: '35548fe082134edb85dbdcb0caf820ec3b5233c2', part: "icon", class: "bs-icon-button__icon" }, index.h("slot", { key: '7f16ef5f2c08fc5d2bb852bd5c36598be5aa1175' }))));
|
|
53
53
|
}
|
|
54
54
|
static get delegatesFocus() { return true; }
|
|
55
55
|
static get formAssociated() { return true; }
|
|
@@ -23,6 +23,10 @@ const BsInlineTab = class {
|
|
|
23
23
|
* violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
|
|
24
24
|
* automatically, same as `bs-tab`'s identical prop. */
|
|
25
25
|
ariaLabel = null;
|
|
26
|
+
/** Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's
|
|
27
|
+
* `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its
|
|
28
|
+
* zero-based position in the group (`"0"`, `"1"`...). */
|
|
29
|
+
value;
|
|
26
30
|
/** Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the
|
|
27
31
|
* Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays
|
|
28
32
|
* a normal tab stop. */
|
|
@@ -65,7 +69,7 @@ const BsInlineTab = class {
|
|
|
65
69
|
};
|
|
66
70
|
render() {
|
|
67
71
|
const iconOnly = this.hasIcon && !this.hasLabel;
|
|
68
|
-
return (index.h("button", { key: '
|
|
72
|
+
return (index.h("button", { key: '0d6927b0b39a7d84add287e6473681e5052b5f2d', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, index.h("span", { key: '866660f0f79927cd018df42286719f2f48262cbb', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, index.h("slot", { key: '58e11c8a0a57646644cb0b7c950d73f5cee52310', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '38d2e1df2b4e494f68d3c4b9ea34d7a317401953', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, index.h("slot", { key: '51fb6ec04479b18af787bca4e64f8105a0b19311', onSlotchange: this.onLabelSlotchange }))));
|
|
69
73
|
}
|
|
70
74
|
};
|
|
71
75
|
BsInlineTab.style = bsInlineTabCss();
|
|
@@ -93,7 +93,7 @@ const BsNavigationDrawerItem = class {
|
|
|
93
93
|
// incorrectly also toggle this parent row on every child click. Both are wrapped in a
|
|
94
94
|
// `display: contents` container so render() still returns a single root node (this codebase's
|
|
95
95
|
// convention, e.g. bs-input.tsx) without that wrapper affecting layout at all.
|
|
96
|
-
return (index.h("div", { key: '
|
|
96
|
+
return (index.h("div", { key: '34d31ff7c612fa135b6dc14b757d66d4b00f99e4', class: "bs-navigation-drawer-item__root" }, index.h("button", { key: '08e244c8ada605dc7705df5b1d45ebce80165f3e', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (index.h("span", { key: 'a6e09b5edb35ec8f76ed6d6a78ddd1eb141f87b6', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, index.h("slot", { key: '851289379dacae965639ed7963d800c8a92472c2', name: "icon", onSlotchange: this.onIconSlotchange }))), index.h("span", { key: '4b46c2ca6a5bf4d5e777ae72c9ea826ffcffea02', part: "label", class: "bs-navigation-drawer-item__label" }, index.h("slot", { key: 'df214a2bcea435a678c18d0f461d9011c767a995' })), this.expandable && (index.h("span", { key: 'd12e91043617e96567acd5497a53dd98c612c6af', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, index.h(ChevronDownIcon, { key: 'c278774ae33cf86e7d1b3f70f4e99b8c7afc4d68' })))), this.expandable && (index.h("span", { key: '85081ed698d078b94225c7b984eaee1edfd22b49', part: "children", class: "bs-navigation-drawer-item__children" }, index.h("slot", { key: '85c22788467a67f18b9cca6018c179a28d06fa19', name: "children" })))));
|
|
97
97
|
}
|
|
98
98
|
};
|
|
99
99
|
// 16x16 native viewBox (not a 24x24 icon scaled down) -- authored directly at display size, per
|
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-kk9YXF2S.js');
|
|
4
4
|
|
|
5
|
-
const bsNavigationDrawerCss = () => `:host{display:block;--bs-navigation-drawer-bg:var(--bs-surface-base);--bs-navigation-drawer-border:var(--bs-border-neutral-container);--bs-navigation-drawer-padding-y:var(--bs-spacing-300);--bs-navigation-drawer-padding-left:var(--bs-spacing-300);--bs-navigation-drawer-padding-right:var(--bs-spacing-200);--bs-navigation-drawer-gap:var(--bs-spacing-300);--bs-navigation-drawer-width:280px;--bs-navigation-drawer-title-font-family:var(--bs-typography-font-family-heading);--bs-navigation-drawer-title-font-weight:var(--bs-font-weight-bold);--bs-navigation-drawer-title-font-size:var(--bs-font-size-md);--bs-navigation-drawer-title-line-height:var(--bs-line-height-heading-h6);--bs-navigation-drawer-title-color:var(--bs-text-default);--bs-navigation-drawer-collapse-size:48px;--bs-navigation-drawer-collapse-radius:var(--bs-border-radius-100);--bs-navigation-drawer-collapse-hover:var(--bs-color-neutral-container);--bs-navigation-drawer-collapse-pressed:var(--bs-color-neutral-container-pressed);--bs-navigation-drawer-collapse-icon:var(--bs-icon-default);--bs-navigation-drawer-items-gap:var(--bs-spacing-100);--bs-navigation-drawer-collapsed-width:96px;--bs-navigation-drawer-search-trigger-size:44px;--bs-navigation-drawer-search-trigger-bg:var(--bs-color-neutral-container);--bs-navigation-drawer-search-trigger-border:var(--bs-border-neutral-container);--bs-navigation-drawer-search-trigger-icon:var(--bs-icon-default)}.bs-navigation-drawer{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-navigation-drawer-gap);width:var(--bs-navigation-drawer-width);height:100%;background:var(--bs-navigation-drawer-bg);border-right:1px solid var(--bs-navigation-drawer-border);padding:var(--bs-navigation-drawer-padding-y) var(--bs-navigation-drawer-padding-right) var(--bs-navigation-drawer-padding-y) var(--bs-navigation-drawer-padding-left);font-family:inherit;transition:width var(--bs-duration-fast) var(--bs-easing-standard), padding var(--bs-duration-fast) var(--bs-easing-standard)}:host([collapsed]) .bs-navigation-drawer{width:var(--bs-navigation-drawer-collapsed-width);padding-left:0;padding-right:0;align-items:center}.bs-navigation-drawer__logo{flex-shrink:0;display:flex;align-items:center}.bs-navigation-drawer__logo--mark{display:none}:host([collapsed]) .bs-navigation-drawer__logo--full{display:none}:host([collapsed]) .bs-navigation-drawer__logo--mark{display:flex}.bs-navigation-drawer__title-row{flex-shrink:0;display:flex;align-items:center;gap:var(--bs-navigation-drawer-gap)}.bs-navigation-drawer__title{flex:1;min-width:0;font-family:var(--bs-navigation-drawer-title-font-family);font-weight:var(--bs-navigation-drawer-title-font-weight);font-size:var(--bs-navigation-drawer-title-font-size);line-height:calc(var(--bs-navigation-drawer-title-line-height) * 1px);color:var(--bs-navigation-drawer-title-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([collapsed]) .bs-navigation-drawer__title{display:none}.bs-navigation-drawer__collapse{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bs-navigation-drawer-collapse-size);height:var(--bs-navigation-drawer-collapse-size);border:none;border-radius:var(--bs-navigation-drawer-collapse-radius);padding:0;background:transparent;color:var(--bs-navigation-drawer-collapse-icon);cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-navigation-drawer__collapse svg{width:24px;height:24px}.bs-navigation-drawer__collapse:hover{background:var(--bs-navigation-drawer-collapse-hover)}.bs-navigation-drawer__collapse:active{background:var(--bs-navigation-drawer-collapse-pressed)}.bs-navigation-drawer__collapse:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-navigation-drawer__search{flex-shrink:0;width:100%}:host([collapsed]) .bs-navigation-drawer__search{display:none}.bs-navigation-drawer__search-trigger{display:none;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bs-navigation-drawer-search-trigger-size);height:var(--bs-navigation-drawer-search-trigger-size);border:1px solid var(--bs-navigation-drawer-search-trigger-border);border-radius:var(--bs-navigation-drawer-collapse-radius);background:var(--bs-navigation-drawer-search-trigger-bg);color:var(--bs-navigation-drawer-search-trigger-icon);cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-navigation-drawer__search-trigger svg{width:24px;height:24px}.bs-navigation-drawer__search-trigger:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}:host([collapsed]) .bs-navigation-drawer__search-trigger{display:inline-flex}.bs-navigation-drawer__items{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--bs-navigation-drawer-items-gap);scrollbar-width:none}.bs-navigation-drawer__items::-webkit-scrollbar{display:none}
|
|
5
|
+
const bsNavigationDrawerCss = () => `:host{display:block;--bs-navigation-drawer-bg:var(--bs-surface-base);--bs-navigation-drawer-border:var(--bs-border-neutral-container);--bs-navigation-drawer-padding-y:var(--bs-spacing-300);--bs-navigation-drawer-padding-left:var(--bs-spacing-300);--bs-navigation-drawer-padding-right:var(--bs-spacing-200);--bs-navigation-drawer-gap:var(--bs-spacing-300);--bs-navigation-drawer-width:280px;--bs-navigation-drawer-title-font-family:var(--bs-typography-font-family-heading);--bs-navigation-drawer-title-font-weight:var(--bs-font-weight-bold);--bs-navigation-drawer-title-font-size:var(--bs-font-size-md);--bs-navigation-drawer-title-line-height:var(--bs-line-height-heading-h6);--bs-navigation-drawer-title-color:var(--bs-text-default);--bs-navigation-drawer-collapse-size:48px;--bs-navigation-drawer-collapse-radius:var(--bs-border-radius-100);--bs-navigation-drawer-collapse-hover:var(--bs-color-neutral-container);--bs-navigation-drawer-collapse-pressed:var(--bs-color-neutral-container-pressed);--bs-navigation-drawer-collapse-icon:var(--bs-icon-default);--bs-navigation-drawer-items-gap:var(--bs-spacing-100);--bs-navigation-drawer-collapsed-width:96px;--bs-navigation-drawer-search-trigger-size:44px;--bs-navigation-drawer-search-trigger-bg:var(--bs-color-neutral-container);--bs-navigation-drawer-search-trigger-border:var(--bs-border-neutral-container);--bs-navigation-drawer-search-trigger-icon:var(--bs-icon-default);--bs-navigation-drawer-backdrop:var(--bs-surface-overlay-level-2);--bs-navigation-drawer-overlay-shadow:var(--bs-shadow-lg);--bs-navigation-drawer-overlay-z-index:var(--bs-z-index-modal);--bs-navigation-drawer-overlay-duration:var(--bs-duration-default)}.bs-navigation-drawer{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-navigation-drawer-gap);width:var(--bs-navigation-drawer-width);height:100%;background:var(--bs-navigation-drawer-bg);border-right:1px solid var(--bs-navigation-drawer-border);padding:var(--bs-navigation-drawer-padding-y) var(--bs-navigation-drawer-padding-right) var(--bs-navigation-drawer-padding-y) var(--bs-navigation-drawer-padding-left);font-family:inherit;transition:width var(--bs-duration-fast) var(--bs-easing-standard), padding var(--bs-duration-fast) var(--bs-easing-standard)}:host([collapsed]) .bs-navigation-drawer{width:var(--bs-navigation-drawer-collapsed-width);padding-left:0;padding-right:0;align-items:center}.bs-navigation-drawer__logo{flex-shrink:0;display:flex;align-items:center}.bs-navigation-drawer__logo--mark{display:none}:host([collapsed]) .bs-navigation-drawer__logo--full{display:none}:host([collapsed]) .bs-navigation-drawer__logo--mark{display:flex}.bs-navigation-drawer__title-row{flex-shrink:0;display:flex;align-items:center;gap:var(--bs-navigation-drawer-gap)}.bs-navigation-drawer__title{flex:1;min-width:0;font-family:var(--bs-navigation-drawer-title-font-family);font-weight:var(--bs-navigation-drawer-title-font-weight);font-size:var(--bs-navigation-drawer-title-font-size);line-height:calc(var(--bs-navigation-drawer-title-line-height) * 1px);color:var(--bs-navigation-drawer-title-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([collapsed]) .bs-navigation-drawer__title{display:none}.bs-navigation-drawer__collapse{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bs-navigation-drawer-collapse-size);height:var(--bs-navigation-drawer-collapse-size);border:none;border-radius:var(--bs-navigation-drawer-collapse-radius);padding:0;background:transparent;color:var(--bs-navigation-drawer-collapse-icon);cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-navigation-drawer__collapse svg{width:24px;height:24px}.bs-navigation-drawer__collapse:hover{background:var(--bs-navigation-drawer-collapse-hover)}.bs-navigation-drawer__collapse:active{background:var(--bs-navigation-drawer-collapse-pressed)}.bs-navigation-drawer__collapse:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-navigation-drawer__search{flex-shrink:0;width:100%}:host([collapsed]) .bs-navigation-drawer__search{display:none}.bs-navigation-drawer__search-trigger{display:none;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bs-navigation-drawer-search-trigger-size);height:var(--bs-navigation-drawer-search-trigger-size);border:1px solid var(--bs-navigation-drawer-search-trigger-border);border-radius:var(--bs-navigation-drawer-collapse-radius);background:var(--bs-navigation-drawer-search-trigger-bg);color:var(--bs-navigation-drawer-search-trigger-icon);cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-navigation-drawer__search-trigger svg{width:24px;height:24px}.bs-navigation-drawer__search-trigger:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}:host([collapsed]) .bs-navigation-drawer__search-trigger{display:inline-flex}.bs-navigation-drawer__items{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--bs-navigation-drawer-items-gap);scrollbar-width:none}.bs-navigation-drawer__items::-webkit-scrollbar{display:none}.bs-navigation-drawer:focus{outline:none;}:host([data-overlay]) .bs-navigation-drawer{position:fixed;inset-block:0;inset-inline-start:0;z-index:calc(var(--bs-navigation-drawer-overlay-z-index) + 1);width:var(--bs-navigation-drawer-width);max-width:100vw;padding:var(--bs-navigation-drawer-padding-y) var(--bs-navigation-drawer-padding-right) var(--bs-navigation-drawer-padding-y) var(--bs-navigation-drawer-padding-left);align-items:stretch;box-shadow:var(--bs-navigation-drawer-overlay-shadow);transform:translateX(-100%);visibility:hidden;transition:transform var(--bs-navigation-drawer-overlay-duration) var(--bs-easing-standard), visibility 0s linear var(--bs-navigation-drawer-overlay-duration)}:host([data-overlay]:dir(rtl)) .bs-navigation-drawer{transform:translateX(100%)}:host([data-overlay]) .bs-navigation-drawer.bs-navigation-drawer--open{transform:none;visibility:visible;transition:transform var(--bs-navigation-drawer-overlay-duration) var(--bs-easing-standard), visibility 0s}:host([data-overlay]) .bs-navigation-drawer__logo--full{display:flex}:host([data-overlay]) .bs-navigation-drawer__logo--mark{display:none}:host([data-overlay]) .bs-navigation-drawer__title{display:block}:host([data-overlay]) .bs-navigation-drawer__search{display:block}:host([data-overlay]) .bs-navigation-drawer__search-trigger,:host([data-overlay]) .bs-navigation-drawer__collapse{display:none}.bs-navigation-drawer__backdrop{position:fixed;inset:0;z-index:var(--bs-navigation-drawer-overlay-z-index);background:var(--bs-navigation-drawer-backdrop);opacity:0;visibility:hidden;transition:opacity var(--bs-navigation-drawer-overlay-duration) var(--bs-easing-standard), visibility 0s linear var(--bs-navigation-drawer-overlay-duration)}:host([open]) .bs-navigation-drawer__backdrop{opacity:1;visibility:visible;transition:opacity var(--bs-navigation-drawer-overlay-duration) var(--bs-easing-standard), visibility 0s}@media (prefers-reduced-motion: reduce){:host([data-overlay]) .bs-navigation-drawer,.bs-navigation-drawer__backdrop{transition:none}}@media (forced-colors: active){:host([data-overlay]) .bs-navigation-drawer{border:1px solid CanvasText}}`;
|
|
6
6
|
|
|
7
7
|
const BsNavigationDrawer = class {
|
|
8
8
|
constructor(hostRef) {
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
this.bsCollapse = index.createEvent(this, "bsCollapse");
|
|
11
11
|
this.bsSearchClick = index.createEvent(this, "bsSearchClick");
|
|
12
|
+
this.bsClose = index.createEvent(this, "bsClose");
|
|
12
13
|
}
|
|
13
14
|
get el() { return index.getElement(this); }
|
|
14
15
|
/** Heading text shown next to the collapse toggle, and used as the `<nav>` landmark's
|
|
@@ -46,11 +47,112 @@ const BsNavigationDrawer = class {
|
|
|
46
47
|
* pairing works too: a header that keeps its own logo (`alignment="default"`) paired with this
|
|
47
48
|
* drawer set to `showLogo={false}`, so the brand mark only ever appears once. */
|
|
48
49
|
showLogo = true;
|
|
49
|
-
|
|
50
|
-
|
|
50
|
+
/** Small screens only (768px and below): whether the off-canvas overlay is shown. Mutable and
|
|
51
|
+
* reflected -- the drawer sets it back to `false` itself when the user dismisses it (Escape or
|
|
52
|
+
* the backdrop), and emits `bsClose`. Ignored on wider screens, where the drawer is always in
|
|
53
|
+
* the page flow. There is no built-in trigger: set this from your own button. */
|
|
54
|
+
open = false;
|
|
55
|
+
/** Fires when the user dismisses the overlay (Escape, or a click on the backdrop), after `open`
|
|
56
|
+
* has been set back to `false`. Does not fire when you set `open = false` yourself. */
|
|
57
|
+
bsClose;
|
|
58
|
+
/** Whether the viewport is in the small-screen range (<= 768px), tracked with `matchMedia`. */
|
|
59
|
+
mobile = false;
|
|
60
|
+
mediaQuery;
|
|
61
|
+
focusPending = false;
|
|
62
|
+
navRef;
|
|
63
|
+
previouslyFocused;
|
|
64
|
+
bodyOverflowBefore;
|
|
65
|
+
get overlayOpen() {
|
|
66
|
+
return this.mobile && this.open;
|
|
67
|
+
}
|
|
68
|
+
connectedCallback() {
|
|
69
|
+
this.mediaQuery = window.matchMedia?.('(max-width: 768px)');
|
|
70
|
+
if (this.mediaQuery) {
|
|
71
|
+
this.mobile = this.mediaQuery.matches;
|
|
72
|
+
this.mediaQuery.addEventListener('change', this.onMediaChange);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
disconnectedCallback() {
|
|
76
|
+
this.mediaQuery?.removeEventListener('change', this.onMediaChange);
|
|
77
|
+
this.unlockScroll();
|
|
78
|
+
}
|
|
79
|
+
onMediaChange = (ev) => {
|
|
80
|
+
this.mobile = ev.matches;
|
|
81
|
+
};
|
|
82
|
+
onCollapsedChange() {
|
|
83
|
+
this.syncItems();
|
|
84
|
+
}
|
|
85
|
+
onMobileChange() {
|
|
86
|
+
this.syncItems();
|
|
87
|
+
this.applyOverlayState();
|
|
88
|
+
}
|
|
89
|
+
onOpenChange() {
|
|
90
|
+
this.applyOverlayState();
|
|
51
91
|
}
|
|
52
92
|
componentDidLoad() {
|
|
53
|
-
this.
|
|
93
|
+
this.syncItems();
|
|
94
|
+
this.applyOverlayState();
|
|
95
|
+
this.flushFocus();
|
|
96
|
+
}
|
|
97
|
+
componentDidRender() {
|
|
98
|
+
this.flushFocus();
|
|
99
|
+
}
|
|
100
|
+
/** Focus is moved only after the render that makes the panel visible -- focusing earlier races the
|
|
101
|
+
* re-render (the panel is still `visibility: hidden`), and a hidden element can't take focus. */
|
|
102
|
+
flushFocus() {
|
|
103
|
+
if (this.focusPending && this.overlayOpen) {
|
|
104
|
+
this.focusPending = false;
|
|
105
|
+
requestAnimationFrame(() => this.navRef?.focus());
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
/** In the small-screen overlay the items always use their expanded layout -- the collapsed
|
|
109
|
+
* (icon-above-caption) layout is for the desktop rail, and would clip labels in a full-width
|
|
110
|
+
* panel and hide nested items. */
|
|
111
|
+
syncItems() {
|
|
112
|
+
this.syncItemsCollapsed(this.mobile ? false : this.collapsed);
|
|
113
|
+
}
|
|
114
|
+
/** Scroll lock, focus entry and focus return for the overlay, mirroring `bs-dialog`: the focus
|
|
115
|
+
* move is deferred a frame because focusing right after the panel becomes visible does not
|
|
116
|
+
* reliably land. */
|
|
117
|
+
applyOverlayState() {
|
|
118
|
+
if (this.overlayOpen) {
|
|
119
|
+
if (this.bodyOverflowBefore === undefined) {
|
|
120
|
+
this.bodyOverflowBefore = document.body.style.overflow;
|
|
121
|
+
document.body.style.overflow = 'hidden';
|
|
122
|
+
}
|
|
123
|
+
if (!this.previouslyFocused) {
|
|
124
|
+
this.previouslyFocused = document.activeElement;
|
|
125
|
+
}
|
|
126
|
+
this.focusPending = true;
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
this.focusPending = false;
|
|
130
|
+
this.unlockScroll();
|
|
131
|
+
if (this.previouslyFocused?.isConnected)
|
|
132
|
+
this.previouslyFocused.focus();
|
|
133
|
+
this.previouslyFocused = undefined;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
unlockScroll() {
|
|
137
|
+
if (this.bodyOverflowBefore !== undefined) {
|
|
138
|
+
document.body.style.overflow = this.bodyOverflowBefore;
|
|
139
|
+
this.bodyOverflowBefore = undefined;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
requestClose = () => {
|
|
143
|
+
this.open = false;
|
|
144
|
+
this.bsClose.emit();
|
|
145
|
+
};
|
|
146
|
+
onDocumentKeydown(ev) {
|
|
147
|
+
if (this.overlayOpen && ev.key === 'Escape')
|
|
148
|
+
this.requestClose();
|
|
149
|
+
}
|
|
150
|
+
/** Keeps focus inside the open overlay: focus that lands anywhere outside this component is
|
|
151
|
+
* pulled back in. `composedPath()` is used so this works across shadow-DOM boundaries (same
|
|
152
|
+
* approach as `bs-dialog`). */
|
|
153
|
+
onDocumentFocusIn(ev) {
|
|
154
|
+
if (this.overlayOpen && !ev.composedPath().includes(this.el))
|
|
155
|
+
this.navRef?.focus();
|
|
54
156
|
}
|
|
55
157
|
/** Keeps every direct-child `bs-navigation-drawer-item`'s `collapsed` prop in sync with this
|
|
56
158
|
* component's own -- same direct-children-prop-sync approach `bs-tabs` uses for `selected`
|
|
@@ -71,11 +173,22 @@ const BsNavigationDrawer = class {
|
|
|
71
173
|
this.bsSearchClick.emit();
|
|
72
174
|
};
|
|
73
175
|
render() {
|
|
74
|
-
|
|
176
|
+
const classes = ['bs-navigation-drawer', this.mobile ? 'bs-navigation-drawer--overlay' : '', this.overlayOpen ? 'bs-navigation-drawer--open' : ''].filter(Boolean).join(' ');
|
|
177
|
+
return (index.h(index.Host, { key: '94c3fbfb2d9826979f2f90ec0c9571aadc484450', "data-overlay": this.mobile ? '' : undefined }, this.mobile && index.h("div", { key: 'cc8b62b02a561dfbb0a15918e4bbbf241919ea7d', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), index.h("nav", { key: 'ad3e970438fca27636992cc434584bfae7888895', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
|
|
178
|
+
// Stays a plain <nav> landmark in every state: ARIA does not allow role="dialog" on <nav>
|
|
179
|
+
// (axe: aria-allowed-role). Modality is behavioral -- focus is held inside, the page behind is
|
|
180
|
+
// scrimmed, Escape closes -- rather than announced through aria-modal.
|
|
181
|
+
tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (index.h("div", { key: '41552cc9bc1fd33081119b6b6a475e9a81281e97', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, index.h("bs-logo", { key: '96503cee7e467c535747171f46ab8b36f2d9262a', variant: "full", background: this.logoBackground }))), this.showLogo && (index.h("div", { key: '6b4e91b0296772ea492a2e12c1f81933be1af02b', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, index.h("bs-logo", { key: '72c4cae8f25aebef923d2b346ee3a3224a1a4550', variant: "mark", background: this.logoBackground }))), index.h("div", { key: '2fde5f92e629d34321e0e0e6eaf776027614836a', class: "bs-navigation-drawer__title-row" }, index.h("span", { key: 'fde5717eeec30bbade48f574e44f9eec841bab36', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (index.h("button", { key: '59d514aec296c5b4eb459de259aa29d77a435ecf', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, index.h(CaretLeftIcon, { key: 'a992c1fcaa3e143ee9f1469958eeab12e03bce03' })))), index.h("div", { key: '1a74885abe2e50b3a6eccd7d4cacca4582dc5fa9', part: "search", class: "bs-navigation-drawer__search" }, index.h("slot", { key: 'ac98f9ca62a289e21fcbf0f005c6c0f7e02d9967', name: "search" })), index.h("button", { key: 'c7c50e5cf2c81ec8445a557505faf2ea40add094', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, index.h(SearchIcon, { key: '538bcfc474036d2c79fe821011490bf7cbd4d018' })), index.h("div", { key: '1a7aa824a99823b2d06309c5192a200afe378a7b', part: "items", class: "bs-navigation-drawer__items" }, index.h("slot", { key: '1a79d4f0e809b16a9d19efb06d36052c0539bba2' })))));
|
|
75
182
|
}
|
|
76
183
|
static get watchers() { return {
|
|
77
184
|
"collapsed": [{
|
|
78
185
|
"onCollapsedChange": 0
|
|
186
|
+
}],
|
|
187
|
+
"mobile": [{
|
|
188
|
+
"onMobileChange": 0
|
|
189
|
+
}],
|
|
190
|
+
"open": [{
|
|
191
|
+
"onOpenChange": 0
|
|
79
192
|
}]
|
|
80
193
|
}; }
|
|
81
194
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-kk9YXF2S.js');
|
|
4
4
|
|
|
5
|
-
const bsNavigationHeaderCss = () => `:host{display:block;--bs-navigation-header-bg:var(--bs-surface-base);--bs-navigation-header-border:var(--bs-border-default);--bs-navigation-header-padding-top:var(--bs-spacing-200);--bs-navigation-header-padding-bottom:var(--bs-spacing-100);--bs-navigation-header-padding-x:var(--bs-margin-fluid);--bs-navigation-header-max-width:
|
|
5
|
+
const bsNavigationHeaderCss = () => `:host{display:block;--bs-navigation-header-bg:var(--bs-surface-base);--bs-navigation-header-border:var(--bs-border-default);--bs-navigation-header-padding-top:var(--bs-spacing-200);--bs-navigation-header-padding-bottom:var(--bs-spacing-100);--bs-navigation-header-padding-x:var(--bs-margin-fluid);--bs-navigation-header-max-width:none;--bs-navigation-header-item-gap:calc(var(--bs-navigation-header-gap) * 1px);--bs-navigation-header-slot-gap:var(--bs-spacing-100);--bs-navigation-header-skip-link-bg:var(--bs-surface-action);--bs-navigation-header-skip-link-color:var(--bs-text-inverse)}.bs-navigation-header{box-sizing:border-box;position:relative;display:flex;align-items:center;width:100%;max-width:var(--bs-navigation-header-max-width);background:var(--bs-navigation-header-bg);border-bottom:1px solid var(--bs-navigation-header-border);padding:var(--bs-navigation-header-padding-top) var(--bs-navigation-header-padding-x) var(--bs-navigation-header-padding-bottom)}.bs-navigation-header__skip-link{position:absolute;top:var(--bs-spacing-100);left:-9999px;z-index:1;padding:var(--bs-spacing-100) var(--bs-spacing-200);border-radius:var(--bs-border-radius-100);background:var(--bs-navigation-header-skip-link-bg);color:var(--bs-navigation-header-skip-link-color);font-size:var(--bs-font-size-sm);text-decoration:underline}.bs-navigation-header__skip-link:focus{left:var(--bs-navigation-header-padding-x)}.bs-navigation-header--default,.bs-navigation-header--with-navigation-drawer{gap:var(--bs-navigation-header-item-gap)}.bs-navigation-header__logo{flex-shrink:0;display:flex;align-items:center}.bs-navigation-header--center .bs-navigation-header__logo{flex:1 0 0;min-width:0}.bs-navigation-header__left{display:flex;align-items:center;gap:var(--bs-navigation-header-slot-gap);flex-shrink:0}.bs-navigation-header__right{display:flex;align-items:center;justify-content:flex-end;gap:var(--bs-navigation-header-slot-gap);flex:1 0 0;min-width:0}@media (max-width: 768px){.bs-navigation-header--default,.bs-navigation-header--with-navigation-drawer{flex-wrap:wrap;row-gap:var(--bs-navigation-header-slot-gap)}.bs-navigation-header--default .bs-navigation-header__left,.bs-navigation-header--with-navigation-drawer .bs-navigation-header__left{flex:1 1 0%;min-width:0}.bs-navigation-header--default .bs-navigation-header__right,.bs-navigation-header--with-navigation-drawer .bs-navigation-header__right{flex:0 0 auto;margin-inline-start:auto;justify-content:flex-end}}`;
|
|
6
6
|
|
|
7
7
|
const BsNavigationHeader = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -26,6 +26,10 @@ const BsTab = class {
|
|
|
26
26
|
* violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
|
|
27
27
|
* automatically, same as `bs-button`'s identical prop. */
|
|
28
28
|
ariaLabel = null;
|
|
29
|
+
/** Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's
|
|
30
|
+
* `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its
|
|
31
|
+
* zero-based position in the group (`"0"`, `"1"`...). */
|
|
32
|
+
value;
|
|
29
33
|
/** Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the
|
|
30
34
|
* Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays
|
|
31
35
|
* a normal tab stop. */
|
|
@@ -76,7 +80,7 @@ const BsTab = class {
|
|
|
76
80
|
const iconOnly = this.hasIcon && !this.hasLabel;
|
|
77
81
|
const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
|
|
78
82
|
const showBadge = this.hasBadge && !iconOnly && !vertical;
|
|
79
|
-
return (index.h("button", { key: '
|
|
83
|
+
return (index.h("button", { key: '383cf44dfcf1feb5404e6a392318c8ce5a8a1178', 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, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, index.h("span", { key: '8b3a6b9ee663c2957c206024478ee76abf4fb905', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, index.h("slot", { key: 'b46fd73bac532345e747bb214f8c91f32b04810c', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '9d3e69f4dc96e20a327ebccdbdf934f07a4892c0', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, index.h("slot", { key: 'e724d44bec76845b64e8e0ebb5c883dc47ff11a3', onSlotchange: this.onLabelSlotchange })), index.h("span", { key: '1cb4e5a8056ebac8b1b098c350c4a5d89bd2968a', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, index.h("slot", { key: '46a6bbf2c8702645b85062012294eedf3facceac', name: "badge", onSlotchange: this.onBadgeSlotchange })), index.h("span", { key: '38845ccafeddfe79af64c3e291197e88bbced150', part: "indicator", class: "bs-tab__indicator" })));
|
|
80
84
|
}
|
|
81
85
|
};
|
|
82
86
|
BsTab.style = bsTabCss();
|