@brandsync/wc 1.8.0 → 1.10.0

package/dist/esm/bs-navigation-drawer-item.entry.js

@@ -91,7 +91,7 @@ const BsNavigationDrawerItem = class {
         // incorrectly also toggle this parent row on every child click. Both are wrapped in a
         // `display: contents` container so render() still returns a single root node (this codebase's
         // convention, e.g. bs-input.tsx) without that wrapper affecting layout at all.
-        return (h("div", { key: 'ff4a72a5d5c8b37fa92ff244398153ca81b7f864', class: "bs-navigation-drawer-item__root" }, h("button", { key: 'f8c1d1e9c72aba5b6012f4f9d7fdc5956b919dff', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: 'cf46152a1d7e0f4783a3ee29fd9eb7ae2a566c68', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: '32a1ea999456bf584bebf03e73aab3e7c01281cc', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: '496a7d21f7a3878bd58fd4bdbb978b3bde40f588', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '3b1d65cd36d19c3714174a3a05a1b68ec3910042' })), this.expandable && (h("span", { key: '041b8fc587482288c4adf7b023edc7b7057a2fda', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '0957e9218a1360b35726ee346e1e3718eb1b3eff' })))), this.expandable && (h("span", { key: 'df4d3384410c6eaffd7e42aa17380740710db0ad', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '273844338141f5429aa7b53f55a06fca4293fa2a', name: "children" })))));
+        return (h("div", { key: 'a62142391a3302dd6379135af11aa3215786df60', class: "bs-navigation-drawer-item__root" }, h("button", { key: '859f32bb1588ec661fea55d405a60a20e803b969', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: '0191eb506a8fa145732fb250d52d1ad650ea9a0f', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: '29bfc6b85d32172ac4f92ca482ffcbf71ed2158c', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: 'd5e681c8dfc6b8517a01caea2daa49089ef73994', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '6f60e5831a064caae85747d6c6b735912abc9a3c' })), this.expandable && (h("span", { key: '37eebaa53518961ac10e37abe8a6f68e1066b173', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '5c212defdf0226202d710f799dbf380aca087ff6' })))), this.expandable && (h("span", { key: 'abc9eb5ca2161706511b3691c71d5fedd33ee74f', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '9b501d624d2bd055e4a71848d08dfb7198e17ece', name: "children" })))));
     }
 };
 // 16x16 native viewBox (not a 24x24 icon scaled down) -- authored directly at display size, per

package/dist/esm/bs-navigation-drawer.entry.js

@@ -1,12 +1,13 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-AgoOSYvW.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-AgoOSYvW.js';
 
-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}@media (max-width: 768px){.bs-navigation-drawer{width:var(--bs-navigation-drawer-collapsed-width);padding-left:0;padding-right:0;align-items:center}.bs-navigation-drawer__logo--full{display:none}.bs-navigation-drawer__logo--mark{display:flex}.bs-navigation-drawer__title{display:none}.bs-navigation-drawer__search{display:none}.bs-navigation-drawer__search-trigger{display:inline-flex}}`;
+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}}`;
 
 const BsNavigationDrawer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.bsCollapse = createEvent(this, "bsCollapse");
         this.bsSearchClick = createEvent(this, "bsSearchClick");
+        this.bsClose = createEvent(this, "bsClose");
     }
     get el() { return getElement(this); }
     /** Heading text shown next to the collapse toggle, and used as the `<nav>` landmark's
@@ -44,11 +45,112 @@ const BsNavigationDrawer = class {
      * pairing works too: a header that keeps its own logo (`alignment="default"`) paired with this
      * drawer set to `showLogo={false}`, so the brand mark only ever appears once. */
     showLogo = true;
-    onCollapsedChange(collapsed) {
-        this.syncItemsCollapsed(collapsed);
+    /** Small screens only (768px and below): whether the off-canvas overlay is shown. Mutable and
+     * reflected -- the drawer sets it back to `false` itself when the user dismisses it (Escape or
+     * the backdrop), and emits `bsClose`. Ignored on wider screens, where the drawer is always in
+     * the page flow. There is no built-in trigger: set this from your own button. */
+    open = false;
+    /** Fires when the user dismisses the overlay (Escape, or a click on the backdrop), after `open`
+     * has been set back to `false`. Does not fire when you set `open = false` yourself. */
+    bsClose;
+    /** Whether the viewport is in the small-screen range (<= 768px), tracked with `matchMedia`. */
+    mobile = false;
+    mediaQuery;
+    focusPending = false;
+    navRef;
+    previouslyFocused;
+    bodyOverflowBefore;
+    get overlayOpen() {
+        return this.mobile && this.open;
+    }
+    connectedCallback() {
+        this.mediaQuery = window.matchMedia?.('(max-width: 768px)');
+        if (this.mediaQuery) {
+            this.mobile = this.mediaQuery.matches;
+            this.mediaQuery.addEventListener('change', this.onMediaChange);
+        }
+    }
+    disconnectedCallback() {
+        this.mediaQuery?.removeEventListener('change', this.onMediaChange);
+        this.unlockScroll();
+    }
+    onMediaChange = (ev) => {
+        this.mobile = ev.matches;
+    };
+    onCollapsedChange() {
+        this.syncItems();
+    }
+    onMobileChange() {
+        this.syncItems();
+        this.applyOverlayState();
+    }
+    onOpenChange() {
+        this.applyOverlayState();
     }
     componentDidLoad() {
-        this.syncItemsCollapsed(this.collapsed);
+        this.syncItems();
+        this.applyOverlayState();
+        this.flushFocus();
+    }
+    componentDidRender() {
+        this.flushFocus();
+    }
+    /** Focus is moved only after the render that makes the panel visible -- focusing earlier races the
+     * re-render (the panel is still `visibility: hidden`), and a hidden element can't take focus. */
+    flushFocus() {
+        if (this.focusPending && this.overlayOpen) {
+            this.focusPending = false;
+            requestAnimationFrame(() => this.navRef?.focus());
+        }
+    }
+    /** In the small-screen overlay the items always use their expanded layout -- the collapsed
+     * (icon-above-caption) layout is for the desktop rail, and would clip labels in a full-width
+     * panel and hide nested items. */
+    syncItems() {
+        this.syncItemsCollapsed(this.mobile ? false : this.collapsed);
+    }
+    /** Scroll lock, focus entry and focus return for the overlay, mirroring `bs-dialog`: the focus
+     * move is deferred a frame because focusing right after the panel becomes visible does not
+     * reliably land. */
+    applyOverlayState() {
+        if (this.overlayOpen) {
+            if (this.bodyOverflowBefore === undefined) {
+                this.bodyOverflowBefore = document.body.style.overflow;
+                document.body.style.overflow = 'hidden';
+            }
+            if (!this.previouslyFocused) {
+                this.previouslyFocused = document.activeElement;
+            }
+            this.focusPending = true;
+        }
+        else {
+            this.focusPending = false;
+            this.unlockScroll();
+            if (this.previouslyFocused?.isConnected)
+                this.previouslyFocused.focus();
+            this.previouslyFocused = undefined;
+        }
+    }
+    unlockScroll() {
+        if (this.bodyOverflowBefore !== undefined) {
+            document.body.style.overflow = this.bodyOverflowBefore;
+            this.bodyOverflowBefore = undefined;
+        }
+    }
+    requestClose = () => {
+        this.open = false;
+        this.bsClose.emit();
+    };
+    onDocumentKeydown(ev) {
+        if (this.overlayOpen && ev.key === 'Escape')
+            this.requestClose();
+    }
+    /** Keeps focus inside the open overlay: focus that lands anywhere outside this component is
+     * pulled back in. `composedPath()` is used so this works across shadow-DOM boundaries (same
+     * approach as `bs-dialog`). */
+    onDocumentFocusIn(ev) {
+        if (this.overlayOpen && !ev.composedPath().includes(this.el))
+            this.navRef?.focus();
     }
     /** Keeps every direct-child `bs-navigation-drawer-item`'s `collapsed` prop in sync with this
      * component's own -- same direct-children-prop-sync approach `bs-tabs` uses for `selected`
@@ -69,11 +171,22 @@ const BsNavigationDrawer = class {
         this.bsSearchClick.emit();
     };
     render() {
-        return (h("nav", { key: '8be5fb4e45d6919408ff7057b963c2d95281b470', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: 'f66ec1272c4c226d1a67fb7321b1247c3be54fb1', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '88cddd1d8696f895b33dd141bc2f5bfd3bd260b4', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '89b4efebeac6b934cbdd6cf3d25caaf5a36c86e8', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '4f9ef53f8a02d9bb21b134e6a73caf28d9e864fc', variant: "mark", background: this.logoBackground }))), h("div", { key: '841040ad4770b0590ce632db1ce7122766c27ef6', class: "bs-navigation-drawer__title-row" }, h("span", { key: '857e9420aae428b44c2086bec5a2b4205a3dda04', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: 'c109b6f3b54268cf729e114a249864fbd57203cc', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: 'e46c9d2569b59e76398772d7a48e7a02d6b36ba3' })))), h("div", { key: '88031f0fd6cffb8480f2a086efb93a9d6418b4fc', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: 'c86cb8c32f754fe81d91b76d8e1a352f9de5b31b', name: "search" })), h("button", { key: '90ade94c988aac8a1b2c855da7b193167b4eeee6', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: 'ff02c6f7f07de15b98bc5799914756e2245e36b9' })), h("div", { key: '41203613ef27dba8768c2755b8653d17c65d02c6', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: 'd120d4a7477e748f5be81a5af742bfa558bf00bd' }))));
+        const classes = ['bs-navigation-drawer', this.mobile ? 'bs-navigation-drawer--overlay' : '', this.overlayOpen ? 'bs-navigation-drawer--open' : ''].filter(Boolean).join(' ');
+        return (h(Host, { key: 'c1e563e7b2a9474286671a3f6e1f2d3aed312620', "data-overlay": this.mobile ? '' : undefined }, this.mobile && h("div", { key: 'f6885e88df1607bb9e85a27c4e1cb616ce6b6c0d', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), h("nav", { key: 'a3086b5203fd3724fce5fe82be394a77a6d9a1e1', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
+            // Stays a plain <nav> landmark in every state: ARIA does not allow role="dialog" on <nav>
+            // (axe: aria-allowed-role). Modality is behavioral -- focus is held inside, the page behind is
+            // scrimmed, Escape closes -- rather than announced through aria-modal.
+            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (h("div", { key: 'c1b8700d6936ae14acf900d3cc83c6a8a7d79a20', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '27f4205dcdd609c4709a09dbeb7d4d59a41340db', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: 'b8474734a50dbd690a9a8d8febd6cda084498d02', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: 'c89909a16f7255d24ddaae54ddd2c6cfca361572', variant: "mark", background: this.logoBackground }))), h("div", { key: '83b7641c3c1f8b8307bf8006bbef147ccfdc917c', class: "bs-navigation-drawer__title-row" }, h("span", { key: '97075d0df805b02f3f520c42ef4eceaa377e7064', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '184f4f2f35f74f145621d2854a6a50e52006ebd1', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: '168c4a4f30f9cf92afd5cffc63e989e0a3d4e45a' })))), h("div", { key: 'd93ec72e4f6ba6f01d4fdc8fc3d9e0c9f0649242', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '3441fb753d206b84e68bb777e60ec849185882b9', name: "search" })), h("button", { key: '98b3bf5e4807afb1ba5a91e2b5238d917f584ab8', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: 'c61c32465503084caab0b3741bc95e3f0f274214' })), h("div", { key: 'f75111a609795d6ed83e3e843a433440a932b730', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '50f7cee1ae4e352b56561740bfc6ff035d521354' })))));
     }
     static get watchers() { return {
         "collapsed": [{
                 "onCollapsedChange": 0
+            }],
+        "mobile": [{
+                "onMobileChange": 0
+            }],
+        "open": [{
+                "onOpenChange": 0
             }]
     }; }
 };

package/dist/esm/bs-navigation-header.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-AgoOSYvW.js';
 
-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:1920px;--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__right,.bs-navigation-header--with-navigation-drawer .bs-navigation-header__right{flex:1 1 100%;justify-content:flex-end}}`;
+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}}`;
 
 const BsNavigationHeader = class {
     constructor(hostRef) {
@@ -34,7 +34,7 @@ const BsNavigationHeader = class {
     render() {
         const showLogo = this.alignment !== 'with-navigation-drawer';
         const rootClasses = `bs-navigation-header bs-navigation-header--${this.alignment}`;
-        return (h("header", { key: '0dc99abb8f2db96f0befe1b838a2db037636a75c', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: '1f906366d5398aa62d2485afdb1c9cf350354f05', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: 'c735b4647acc92ff5b6725dc72bfbab421230a9c', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: '845c1d60319daf2aa7aa57f0f8ba71e0f633598e', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: '67436745b63a843e86a79163f927f2b563b6e2e4', name: "left" })), h("div", { key: '4c6d514d7cf238b5be8476f9fede7292b1dc1c10', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: 'a6c12231c6cc728314fdfc076a48fd1ce0f79ede', name: "right" }))));
+        return (h("header", { key: '8df6952f56af87f50c453d923d579a873565f340', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: 'fc18af20e2900ad6ae6c84e48bf34cbb1a5a256a', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: '8b903db4bf61de487379378bf7ed241b7bfe588a', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: '16db4c45690961fe6f362204f97969375a6fda7c', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: '96b0d128230c694f104d1d0578d3dfb81cd3f3c1', name: "left" })), h("div", { key: 'e5250ad7e8ad58d0305ee5a41259704ec4a00a4a', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: 'd2620bea8d01c0abc1751e44ed9bdd8e5ce36d6b', name: "right" }))));
     }
 };
 BsNavigationHeader.style = bsNavigationHeaderCss();

package/dist/esm/bs-pagination.entry.js

@@ -68,7 +68,7 @@ const BsPagination = class {
     }
     render() {
         const pageList = this.getPageList();
-        return (h("nav", { key: 'f5f1e20a72ffc81ca14b05ad735e3ca714069ed3', "aria-label": "Pagination" }, h("ul", { key: '416ef86fe6aca589869e529d1248cbca7ad254ac', part: "list", class: "bs-pagination__list" }, h("li", { key: 'c550eada1eb765db7734e0971f4a2222ad1488e8', part: "item", class: "bs-pagination__item" }, h("button", { key: '8a88280dc813abe71ba3315048ca8931ef2b20cf', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'ea30181c70ff4c7c39852cb978b4cc9307bfa736' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '1c587333c1795e4b189c793b442c03e75937ab11', part: "item", class: "bs-pagination__item" }, h("button", { key: '707144112eb882431b9d6ad43f7557be32d08e78', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: '5c94c76cbda7938da625f326ea2ef7ddadce3929' }))))));
+        return (h("nav", { key: '9c08eac677410bc05682ff8e4219b63226eb81bd', "aria-label": "Pagination" }, h("ul", { key: '2d62248f42a4a19470ac6a259ab759ccdfd9a245', part: "list", class: "bs-pagination__list" }, h("li", { key: 'db5f800712d37adb8d3d28cd24016a2e3c2cdda1', part: "item", class: "bs-pagination__item" }, h("button", { key: 'cdee1107fa0f38d3e92adb58d2147f97b7b0605f', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'f1293927db7446d8ceb6b8391e9a5796b0fad61c' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '530829cfaccd79476c8788f1079991cd7ccc3a4b', part: "item", class: "bs-pagination__item" }, h("button", { key: '9a38949a2dd2de77cf57e3fe7e281c1fe49fcc50', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: '10f3d9f6a79b431ece2c1b8f12e579b210e95e2f' }))))));
     }
 };
 function range(start, end) {

package/dist/esm/bs-progress-linear.entry.js

@@ -33,13 +33,13 @@ const BsProgressLinear = class {
     render() {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
-        return (h("div", { key: '279dbb0cd17b9584b500570d58cc09bd91e8a0d7', part: "container", class: "bs-progress-linear" }, h("div", { key: '9299c229184d172f743fb7fb0dce2a9c55a4496f', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
+        return (h("div", { key: '84a59a0536a42cbf196fe981b8574a2e530e99a0', part: "container", class: "bs-progress-linear" }, h("div", { key: '6ef60ecc713e514ee0d11c4f26fe12fd395c685d', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
         // Figma's indeterminate bar is a soft "comet" gradient segment (transparent -> blue ->
         // transparent) sliding left-to-right across the track's full width in a loop -- the
         // same fade concept as bs-progress's indeterminate ring's conic-gradient comet tail,
         // but along a straight line via a linear-gradient + `transform: translateX(...)`
         // keyframe animation instead of a rotating conic-gradient.
-        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: '51a75cae90630fec1d8757d483c239a534385aa7', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '7e6639ff4f7219cbb3fa09d7c7570268534530b4' })))));
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: 'd637632ca0bebe53088d4ee0ba984bbb2cf0b212', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '01830596779d6f41387cff50bbcbc9892ab71162' })))));
     }
     // The default slot's assigned content lives in the host's light DOM regardless of whether a
     // <slot> is currently rendered in the shadow tree, so this can be computed directly from the

package/dist/esm/bs-progress.entry.js

@@ -55,7 +55,7 @@ const BsProgress = class {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (h("div", { key: 'add8dfafdbee4eaa9712c6e2ba6ddff6f8f6c47f', part: "container", class: "bs-progress" }, h("div", { key: 'fd89c73aa247fc3770187a45dc4681857e257d4e', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
+        return (h("div", { key: 'b1516c02f0f6ec3865930a5ef1be7bab30c9cdfe', part: "container", class: "bs-progress" }, h("div", { key: '0689f281619a940d73d24bb79d25d54a0863c1af', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
         // Figma's indeterminate ring is a fading "comet tail" (transparent -> solid color),
         // not a flat-colored partial arc -- SVG has no angular/conic gradient primitive, so a
         // CSS conic-gradient (color varying by angle) + a radial-gradient mask (carving the
@@ -64,7 +64,7 @@ const BsProgress = class {
         h("div", { part: "arc", class: "bs-progress__spinner", style: {
                 '--bs-progress-spinner-stroke-width': `${this.strokeWidth}px`,
                 '--bs-progress-spinner-sweep': `${INDETERMINATE_SWEEP_DEGREES}deg`,
-            } }))), isDeterminate && this.showLabel && (h("span", { key: '9c86dc195204f28c06e05bf09f823241bf9f3a86', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: '2482112c5f6cac5dceffe49bd878e05a526ea64e', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
 };
 BsProgress.style = bsProgressCss();

package/dist/esm/bs-radio.entry.js

@@ -98,7 +98,7 @@ const BsRadio = class {
         }
     };
     render() {
-        return (h("label", { key: '84bfc39d5714d15c45936c8150b9bd7473b79574', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '0a118d5e59f4d33b0411f7be0fba08a706cda298', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: '889dadd67126819c3d39a5823d48be58a9c71f9f', class: "bs-radio__hit-area" }, h("span", { key: '5bbed4d44bcf4d810693b5912a90855d680540d0', class: "bs-radio__state-layer" }, h("span", { key: '509389527b876127ca456900e3bb4aa21c735f72', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '9a7e335f9646eb72fb06fb0ca9436e763c3ad278', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '2017790d3d99355b4eb93e3659c809df58c61065', part: "label", class: "bs-radio__label" }, h("slot", { key: '199450bb26f7966cdd64b04c78e3015300d793c9' }))));
+        return (h("label", { key: 'd261741b6d1823387c7df668759910761da6afec', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '649a22151782938d8aff9229446060a54ce84e98', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: '3399b1629f64b148957031eac2787dd4a673e0fe', class: "bs-radio__hit-area" }, h("span", { key: 'ed5e9f03d38d76b6e69e3800489ae50c48dfcd19', class: "bs-radio__state-layer" }, h("span", { key: 'e8384a66bf5785aef4c608dde2ff96d0208cd798', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: 'abbe35f86db25e6c4732cf056d2f359f73938024', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '6d29a3fd68fdaa511c66535893bedf5e49205d8c', part: "label", class: "bs-radio__label" }, h("slot", { key: '20d9bc9f8008cf775a520f25cef88cec5a36021a' }))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

package/dist/esm/bs-slider.entry.js

@@ -217,7 +217,7 @@ const BsSlider = class {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: 'f2db9b3d88d97f4183227dca165e4943586100b7', class: rootClasses }, this.showLabel && (h("div", { key: 'b5898da538670e481c1e0c0120f8ac67fec49ffe', class: "bs-slider__header" }, h("span", { key: '3f0257ee85b18fdce7a51825f9e3005b7c8c8985', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), 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')))), h("div", { key: '74adbfd1c596cb0de4bf484cd2ffbc2f283d9074', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '334f03095f5246d4156e7853a1b9d3ddcb594f0a', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '5173a19292bd029121cf9412a2087383700ec61b', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: 'c6648b04d434b95f21b9020ee7eb773c30bad01d', class: rootClasses }, this.showLabel && (h("div", { key: '441e317ad19da525a721da0529aadd959a73c3ad', class: "bs-slider__header" }, h("span", { key: '5ed50642ee23d285a472a701bca67f68a05848fc', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), 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')))), h("div", { key: '2883165b7d7c649f317442a5925300c34b183e63', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '7b9d60275fb8e71371277012b4fb460b357da8c8', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '1b450b15db44433662a916dd52aaf961217e71dd', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

package/dist/esm/bs-snackbar.entry.js

@@ -39,7 +39,7 @@ const BsSnackbar = class {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: 'c84de130f993938339fd16d9f534f1da18fe6c0a', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '0941f900229f6b3208f8268d34b0cde49e4dba22', class: "bs-snackbar__content" }, h("span", { key: 'cf89eff5ea640950573f9b610d6eff46e5d0154e', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: 'd4ae7e62ecaea7b53962b08d69bae435ecf0a810', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'a99ec601f27f79f42fc61cd14c0fed742d2fa334' }))), h("div", { key: 'a139c0287e2eacb26ccbd604ff0343bca23eeb5d', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: 'f22c4a63903fdb50da087ab2c38dd076298a12ed', part: "action", variant: ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), h("bs-icon-button", { key: '4cd5c8f367ee71f11dad1f6f47ff1cdf6436a764', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'a52e6af7acf7c95a54aa6cb5237f2b53e30ea601' })))));
+        return (h("div", { key: '26d056b4b494847c48b1c60ac0c392334d27d54e', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '583ad744a0b8c274992bf2e98f5bc06f8937ed4c', class: "bs-snackbar__content" }, h("span", { key: '518b02e526a261be557587bb4d39a93964bcdf24', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: 'ad8436b86fc5232e74a5e92604adfca129b9c698', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'b6fa1efe3c4da2e03f3c45fb18f5b899411af791' }))), h("div", { key: '674f7dc064863843406f87cc5c2534e90c7d4b30', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '56a7051b28197f34a5a11eb3f92087defd3a495a', part: "action", variant: ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), h("bs-icon-button", { key: 'cfb7f10a70ed48f0c0ecfde5212e2ce41aca17f1', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '75fd2a71af3f309a19322304e7937a39729638b9' })))));
     }
 };
 const CheckCircleIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8.25 12.75L10.5 15L15.75 9.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/esm/bs-source-link.entry.js

@@ -24,8 +24,8 @@ const BsSourceLink = class {
     };
     render() {
         const inner = [
-            h("span", { key: '5c6382ad80cc971f302da1d80af089306a612e73', class: "bs-source-link__left" }, h("span", { key: '07c8591469e23fe4304846e9282cea0a9eae3ba2', class: "bs-source-link__filename-row" }, h("span", { key: 'ffdb99816134be212cc4d30ebdbf8dd8bcdc085f', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '475cd85bcb5caa1d3a82d08318731ef4bdf6cb60', name: "icon" }, h(FileTextIcon, { key: '6915810a89f15b823b2b744d30db5b2cefff8162' }))), h("p", { key: '14facc92c71f91701654ea2ce2f9f2ef4b980c5e', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'ecd7080f8bc8ce5d7e169f917aaae275ac7a474e', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'f1697d3e278225b26909ec1c40ce2c4cb51c884b', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '8efe25341dc7c68ec9c66b91f5f399c9b8ed659f', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'cddd46792f911af65434554e56d1cb72d2b88cae', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '166b5070329771cd7e8f20689e5b257d3f6f1fd0', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'c2a820c6b36ead5f1bbfd74d84c70cb9894c8f1f' })),
+            h("span", { key: '0b24af45da9ac7753eabcfde75547e08e19c2fa5', class: "bs-source-link__left" }, h("span", { key: '305dd947e35832c5dc2cb04585b3289e0c36072e', class: "bs-source-link__filename-row" }, h("span", { key: '09658f61e3806bbd2c4c03c0367ab79ad9a3faa6', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'dcbe10c8789f9dbcd95c3d796a555a387a5626ee', name: "icon" }, h(FileTextIcon, { key: 'c56ece8394e6fce4d7a327203c109e72b883ab91' }))), h("p", { key: '293a17d2135821a549b7874338b02c8cec345632', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'ac200e11ee885d366f146d7413526661b9d76cfa', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'd076f98b5a70593e575ff764da84cfbecf5ffdef', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '50fca70a24f3c4f6c8d8b4a5f1cdb46dba4d7de3', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'ccdf4864ed01b0a517118219b55bf8cc7c442548', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '48ef2cf4c2441fb94d48112860a0ee5982176152', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '6942e3329d26b9244d57377498ac2b46966c0c64' })),
         ];
         return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
     }

package/dist/esm/bs-stepper-step.entry.js

@@ -32,7 +32,7 @@ const BsStepperStep = class {
     }
     render() {
         const state = this.state;
-        return (h(Host, { key: 'fe270c356f44c25a3a12450eec8e1a7657d4d88f', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '1bc833a5ca917d141078e3b69e9e455ec8d877ad', class: "bs-stepper-step__top" }, h("span", { key: 'aa91b7e91d600b08c389be456b28f4a65450d72e', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'e3fee594c97bf9f5d47e1b922bf9adffa1c0d438', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '4930e7653d7c81c8fcf18920fdd0a9a0e975eee4' }), state === 'error' && h(ExclamationIcon, { key: 'ca757e769dd4411c987bf5f22b7cda904d9fd067' })), h("span", { key: '2b0621849727e355d4d0944087ff1d9eacb5b5f7', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '0d08b9591ea2c9a967ebf85dce105f667cb86370', class: "bs-stepper-step__connector-line" }))), h("span", { key: '3bd0490ef190a4e4f33f822383be230e4e20e7dc', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'cf6cb4f72fcf546a954085d125a72548cfe521fe', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'b0ef234071983ae8c87d68440e7bfa4a491a35f5', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: '809ebc9656bc8c309b603c1940ea982d02560630', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '05484ab3c56d0c42dac1b8af99d715109679389b', class: "bs-stepper-step__top" }, h("span", { key: '2076c16d90d907a4b40de84304bd77a7b9ae1bf9', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '6fcbca00f7010e49583522a83f54f2db5ea01441', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '17589e79f8806e30aa6f6683fc6f7acd857dc8c9' }), state === 'error' && h(ExclamationIcon, { key: '29fd2fdd31b9d899153396e758bcc8c69cbddaea' })), h("span", { key: 'cbd47c375dc0f287449e2b1ea9f49bc15302389a', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '6d29361f15e62a945f7f9c8a37b05025b3173214', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'edb0ca51856917b8703ec88655bd4c8c1a1ff5df', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'abe23448bb9bc8a818551dc219aa89f05b9a6721', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'e469eb84389527f380c37f7e7724809528d624ae', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
 };
 const CheckIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M2.5 9L6 12.5L14 4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/esm/bs-stepper.entry.js

@@ -42,7 +42,7 @@ const BsStepper = class {
     }
     render() {
         // role="list" so each bs-stepper-step's role="listitem" has the required parent.
-        return (h(Host, { key: 'a9c1838c549b0c3ea9cc145624bc38e9edb32a51', role: "list" }, h("slot", { key: '549a18512ad246b5988008b8d2b6a9142e5380a5', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: 'db168a586dfd3142f6dc75627f6f13fd6bde56dd', role: "list" }, h("slot", { key: 'fe06e525cb9e790d97be4d153cc07757c3624732', onSlotchange: this.onSlotChange })));
     }
     static get watchers() { return {
         "currentStep": [{

package/dist/esm/bs-switch.entry.js

@@ -70,7 +70,7 @@ const BsSwitch = class {
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '37466aa7ca1b18c07b92bd7855fd974d62ad5845', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'f4e0073dd9a322692003593385da04a9289ea848', 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 }), h("span", { key: 'f8cbdb6bb25964ba79e9cb09d82beab0c3946a14', part: "track", class: trackClasses }, h("span", { key: '7e8598698e08a95d1ada9829264df99abd507d81', part: "knob", class: knobClasses })), h("span", { key: '11d464eaf95f555f3874524adc5fb2373b1fd056', part: "label", class: "bs-switch__label" }, h("slot", { key: '2409cb732d23f613c2595fa62e9fd7539bb2041e' }))));
+        return (h("label", { key: '29aaef97a7a237cddfdfffb7cdb693c8934a9d4f', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '03a1e41e0b66f823a95b76c85a19c8ca6c418763', 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 }), h("span", { key: '4dc7254d5855d91221048aa2fbddcb0532c4f572', part: "track", class: trackClasses }, h("span", { key: '11dbb2724c94e6a58413d36b8d673015ad44a5e3', part: "knob", class: knobClasses })), h("span", { key: '9954a8d69131ca00bcd177d1d7cfe7ca83bc32a1', part: "label", class: "bs-switch__label" }, h("slot", { key: '98058212aed27b2d6b589eb769fddd5fe3156510' }))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

package/dist/esm/bs-tab.entry.js

@@ -24,6 +24,10 @@ const BsTab = class {
      * violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
      * automatically, same as `bs-button`'s identical prop. */
     ariaLabel = null;
+    /** Identifies this tab within a parent `bs-tabs`: the group's `value` is the selected tab's
+     * `value`, and `bsChange` reports it. Optional -- a tab without one is identified by its
+     * zero-based position in the group (`"0"`, `"1"`...). */
+    value;
     /** Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the
      * Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays
      * a normal tab stop. */
@@ -74,7 +78,7 @@ const BsTab = class {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: '368a2f20536d169e06e47500dcca4d6a54f17dde', 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 }, h("span", { key: '3b22e92a5d6bca27c0b12b6f80ef29af06bcc564', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'd75cb8cc85547a8c6a8be3bca3fc82a61d3cfa38', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '43ff4feb2425f1b0dd9485f323b1886b42e10a32', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '74a0af9a35043faa3baa2415c3b4a204f5745155', onSlotchange: this.onLabelSlotchange })), h("span", { key: '22b5c4671b7a7c93abffae5a34a4e3bb600d8ed3', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '17b123826ca4b78ff00b89d3a0944e1d805ad4fe', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'd51f23caa9d0fd0abddd37c7394994e1ffef0586', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '87234360dfed766afe447c3e8f037d8b59868a15', 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 }, h("span", { key: 'cecdf03d52896828f098956a25342209c0244f39', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'f4bbc1ac9ee7df0db6cb393c69b43227add0db3e', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'c14726bc5b6f47d0a96fdf5807a2dd7b2466a27f', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '88936beb454b7fa0b9d1c67d39e812f86e89ae56', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'a32984bfa7879e702748171fc51a4679b58d0b8b', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'ad516087badafb57ff4df818d0b9a100373f205e', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '30e25441bd650875ce8b6dd97befc1053c40ca47', part: "indicator", class: "bs-tab__indicator" })));
     }
 };
 BsTab.style = bsTabCss();

package/dist/esm/bs-tabs.entry.js

@@ -1,10 +1,11 @@
-import { r as registerInstance, a as getElement, h } from './index-AgoOSYvW.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-AgoOSYvW.js';
 
 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)}`;
 
 const BsTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.bsChange = createEvent(this, "bsChange");
     }
     get el() { return getElement(this); }
     /** Which tab-button family this group wraps. Governs the wrapper's own visual treatment (gap-only
@@ -14,6 +15,16 @@ const BsTabs = class {
     /** Layout direction of the tab bar itself. Sets `aria-orientation` on the internal wrapper and
      * switches `flex-direction`. */
     orientation = 'horizontal';
+    /** The selected tab's `value`. Mutable and reflected: it follows the user's selection, and
+     * setting it from outside (attribute or property) selects the matching tab -- without emitting
+     * `bsChange`, which only fires for user-driven changes. A tab's value is its own `value` prop,
+     * or, for a tab without one, its zero-based position in the group as a string (`"0"`, `"1"`...).
+     * If unset, it is read from whichever tab is already `selected` once the group loads. */
+    value;
+    /** Fires when the user selects a different tab (click, or arrow/Home/End), with the new
+     * `value`. Does not fire when `value` is set programmatically. `bsSelect` on the individual tab
+     * still fires as before. */
+    bsChange;
     /**
      * Catches `bsSelect` bubbling up from any slotted `<bs-tab>`/`<bs-inline-tab>` (Stencil's
      * `@Event()` defaults to `bubbles: true, composed: true`, and `@Listen` without a target listens
@@ -22,15 +33,46 @@ const BsTabs = class {
      * `if (this.disabled) return;`), so no special-casing is needed here.
      */
     onTabSelect(ev) {
-        const tabs = this.el.querySelectorAll(':scope > bs-tab, :scope > bs-inline-tab');
+        const tabs = this.tabs();
         tabs.forEach(tab => {
             tab.selected = tab === ev.target;
         });
         this.syncRovingTabindex();
+        const index = tabs.findIndex(tab => tab === ev.target);
+        if (index === -1)
+            return;
+        const value = this.tabValue(tabs[index], index);
+        if (value !== this.value) {
+            this.value = value;
+            this.bsChange.emit({ value });
+        }
     }
     componentDidLoad() {
+        if (this.value !== undefined) {
+            this.applyValue();
+        }
+        else {
+            // Uncontrolled: report whichever tab the consumer already marked `selected`.
+            const tabs = this.tabs();
+            const index = tabs.findIndex(t => t.selected);
+            if (index !== -1)
+                this.value = this.tabValue(tabs[index], index);
+        }
         this.syncRovingTabindex();
     }
+    tabValue(tab, index) {
+        return tab.value ?? String(index);
+    }
+    /** Selects the tab whose value matches `this.value` (and deselects the rest). */
+    applyValue() {
+        this.tabs().forEach((tab, i) => {
+            tab.selected = this.tabValue(tab, i) === this.value;
+        });
+        this.syncRovingTabindex();
+    }
+    onValueChange() {
+        this.applyValue();
+    }
     syncRovingTabindex() {
         const tabs = this.tabs();
         const anySelected = tabs.some(t => t.selected);
@@ -73,9 +115,12 @@ const BsTabs = class {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: '81b3b46d54d4acc074b0c59d0da5e3e971e7b62e', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'ba296a99062629de3e331cd7de1ebc41548c77f9', onSlotchange: () => this.syncRovingTabindex() })));
+        return (h("div", { key: 'b47d3502305490c9098b825f1eb8c60f45dad5d8', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '133cf0b2ea93354a664bb304579fa59d85e53edf', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
         "orientation": [{
                 "syncRovingTabindex": 0
             }]