@brandsync/wc 0.0.11 → 0.0.12

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

@@ -0,0 +1,102 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DST5-cTx.js';
+
+const bsNavigationDrawerItemCss = () => `:host{display:block;--bs-navigation-drawer-item-gap:var(--bs-spacing-100);--bs-navigation-drawer-item-radius:var(--bs-border-radius-100);--bs-navigation-drawer-item-padding-y:var(--bs-spacing-150);--bs-navigation-drawer-item-padding-x:var(--bs-spacing-100);--bs-navigation-drawer-item-padding-left-nested:var(--bs-spacing-600);--bs-navigation-drawer-item-font-weight:var(--bs-font-weight-medium);--bs-navigation-drawer-item-font-size:var(--bs-font-size-md);--bs-navigation-drawer-item-line-height:var(--bs-line-height-body-md);--bs-navigation-drawer-item-color:var(--bs-text-muted);--bs-navigation-drawer-item-color-selected:var(--bs-text-default);--bs-navigation-drawer-item-color-hover:var(--bs-text-secondary);--bs-navigation-drawer-item-bg-selected:var(--bs-surface-selected);--bs-navigation-drawer-item-bg-hover:var(--bs-surface-hover);--bs-navigation-drawer-item-bg-pressed:var(--bs-surface-pressed);--bs-navigation-drawer-item-bg-focus:var(--bs-surface-focus);--bs-navigation-drawer-item-bg-selected-hover:var(--bs-surface-selected-hover);--bs-navigation-drawer-item-bg-selected-pressed:var(--bs-surface-selected-pressed);--bs-navigation-drawer-item-bg-selected-focus:var(--bs-surface-selected-focus);--bs-navigation-drawer-item-focus-ring-color:var(--bs-border-neutral-focus);--bs-navigation-drawer-item-children-gap:var(--bs-spacing-100);--bs-navigation-drawer-item-collapsed-gap:var(--bs-spacing-100);--bs-navigation-drawer-item-collapsed-padding:var(--bs-spacing-100);--bs-navigation-drawer-item-collapsed-icon-padding-x:var(--bs-spacing-100);--bs-navigation-drawer-item-collapsed-icon-padding-y:var(--bs-spacing-50);--bs-navigation-drawer-item-collapsed-font-size:var(--bs-fontsize-caption-sm);--bs-navigation-drawer-item-collapsed-line-height:var(--bs-line-height-caption-sm)}.bs-navigation-drawer-item__root{display:contents}.bs-navigation-drawer-item{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:var(--bs-navigation-drawer-item-gap);border:none;border-radius:var(--bs-navigation-drawer-item-radius);padding:var(--bs-navigation-drawer-item-padding-y) var(--bs-navigation-drawer-item-padding-x);background:transparent;color:var(--bs-navigation-drawer-item-color);font-family:inherit;font-weight:var(--bs-navigation-drawer-item-font-weight);font-size:var(--bs-navigation-drawer-item-font-size);line-height:calc(var(--bs-navigation-drawer-item-line-height) * 1px);text-align:left;cursor:pointer;transition:color var(--bs-duration-fast) var(--bs-easing-standard),     background-color var(--bs-duration-fast) var(--bs-easing-standard)}:host(:not([collapsed])) .bs-navigation-drawer-item:hover:not(.bs-navigation-drawer-item--selected){background:var(--bs-navigation-drawer-item-bg-hover);color:var(--bs-navigation-drawer-item-color-hover)}:host(:not([collapsed])) .bs-navigation-drawer-item:active:not(.bs-navigation-drawer-item--selected){background:var(--bs-navigation-drawer-item-bg-pressed);color:var(--bs-navigation-drawer-item-color-hover)}:host(:not([collapsed])) .bs-navigation-drawer-item:focus-visible:not(.bs-navigation-drawer-item--selected){background:var(--bs-navigation-drawer-item-bg-focus);color:var(--bs-navigation-drawer-item-color-hover)}:host(:not([collapsed])) .bs-navigation-drawer-item--selected:hover{background:var(--bs-navigation-drawer-item-bg-selected-hover)}:host(:not([collapsed])) .bs-navigation-drawer-item--selected:active{background:var(--bs-navigation-drawer-item-bg-selected-pressed)}:host(:not([collapsed])) .bs-navigation-drawer-item--selected:focus-visible{background:var(--bs-navigation-drawer-item-bg-selected-focus)}.bs-navigation-drawer-item:focus-visible{outline:2px solid var(--bs-navigation-drawer-item-focus-ring-color);outline-offset:-2px}.bs-navigation-drawer-item--nested{padding-left:var(--bs-navigation-drawer-item-padding-left-nested)}.bs-navigation-drawer-item--selected{background:var(--bs-navigation-drawer-item-bg-selected);color:var(--bs-navigation-drawer-item-color-selected)}.bs-navigation-drawer-item--selected .bs-navigation-drawer-item__icon--has-content{color:var(--bs-navigation-drawer-item-color-selected)}:host([collapsed]) .bs-navigation-drawer-item{flex-direction:column;justify-content:center;gap:var(--bs-navigation-drawer-item-collapsed-gap);padding:var(--bs-navigation-drawer-item-collapsed-padding);background:transparent}.bs-navigation-drawer-item__icon{display:none;width:24px;height:24px;flex-shrink:0;color:inherit}.bs-navigation-drawer-item__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-navigation-drawer-item__icon ::slotted(svg){width:24px;height:24px}:host([collapsed]) .bs-navigation-drawer-item__icon--has-content{padding:var(--bs-navigation-drawer-item-collapsed-icon-padding-y) var(--bs-navigation-drawer-item-collapsed-icon-padding-x);border-radius:var(--bs-navigation-drawer-item-radius)}:host([collapsed][selected]) .bs-navigation-drawer-item__icon--has-content{background:var(--bs-navigation-drawer-item-bg-selected)}:host([collapsed]:not([selected])) .bs-navigation-drawer-item:hover .bs-navigation-drawer-item__icon--has-content{background:var(--bs-navigation-drawer-item-bg-hover)}:host([collapsed]:not([selected])) .bs-navigation-drawer-item:active .bs-navigation-drawer-item__icon--has-content{background:var(--bs-navigation-drawer-item-bg-pressed)}:host([collapsed]:not([selected])) .bs-navigation-drawer-item:focus-visible .bs-navigation-drawer-item__icon--has-content{background:var(--bs-navigation-drawer-item-bg-focus)}:host([collapsed][selected]) .bs-navigation-drawer-item:hover .bs-navigation-drawer-item__icon--has-content{background:var(--bs-navigation-drawer-item-bg-selected-hover)}:host([collapsed][selected]) .bs-navigation-drawer-item:active .bs-navigation-drawer-item__icon--has-content{background:var(--bs-navigation-drawer-item-bg-selected-pressed)}:host([collapsed][selected]) .bs-navigation-drawer-item:focus-visible .bs-navigation-drawer-item__icon--has-content{background:var(--bs-navigation-drawer-item-bg-selected-focus)}:host([collapsed]:not([selected])) .bs-navigation-drawer-item:hover .bs-navigation-drawer-item__label,:host([collapsed]:not([selected])) .bs-navigation-drawer-item:active .bs-navigation-drawer-item__label,:host([collapsed]:not([selected])) .bs-navigation-drawer-item:focus-visible .bs-navigation-drawer-item__label,:host([collapsed]:not([selected])) .bs-navigation-drawer-item:hover .bs-navigation-drawer-item__icon--has-content,:host([collapsed]:not([selected])) .bs-navigation-drawer-item:active .bs-navigation-drawer-item__icon--has-content,:host([collapsed]:not([selected])) .bs-navigation-drawer-item:focus-visible .bs-navigation-drawer-item__icon--has-content{color:var(--bs-navigation-drawer-item-color-hover)}.bs-navigation-drawer-item__label{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([collapsed]) .bs-navigation-drawer-item__label{flex:none;width:100%;text-align:center;font-size:var(--bs-navigation-drawer-item-collapsed-font-size);line-height:calc(var(--bs-navigation-drawer-item-collapsed-line-height) * 1px)}.bs-navigation-drawer-item__chevron{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:inherit;transition:transform var(--bs-duration-fast) var(--bs-easing-standard)}.bs-navigation-drawer-item__chevron svg{width:16px;height:16px}.bs-navigation-drawer-item__chevron--expanded{transform:rotate(180deg)}.bs-navigation-drawer-item__children{display:flex;flex-direction:column;gap:var(--bs-navigation-drawer-item-children-gap)}:host(:not([expanded])) .bs-navigation-drawer-item__children{display:none}:host([collapsed]) .bs-navigation-drawer-item__chevron,:host([collapsed]) .bs-navigation-drawer-item__children{display:none}`;
+
+const BsNavigationDrawerItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsSelect = createEvent(this, "bsSelect");
+        this.bsToggle = createEvent(this, "bsToggle");
+    }
+    get el() { return getElement(this); }
+    /** Tints the row's background/text to indicate it's the current destination. NOT
+     * self-toggling -- see the class doc above for why. Ignored (never applied) when `expandable`
+     * is true. Reflected so consumers/CSS can target `bs-navigation-drawer-item[selected]`. */
+    selected = false;
+    /** Renders this row as a disclosure/group header (trailing chevron, self-toggling `expanded`,
+     * `bsToggle` instead of `bsSelect` on click) instead of a plain navigable leaf item. See the
+     * class doc above for the full click-behavior split. */
+    expandable = false;
+    /** Whether an `expandable` row's `children` slot is shown. Mutable and reflected -- clicking an
+     * `expandable` row toggles this directly (self-toggling, unlike `selected` above), and CSS
+     * shows/hides the `children` slot wrapper based on the reflected attribute. Ignored when
+     * `expandable` is false. */
+    expanded = false;
+    /** Marks this as a child row nested under an `expandable` parent (via `slot="children"`) --
+     * deepens the left indent and stops reserving `icon` slot space entirely (Figma's nested rows
+     * never have icons). */
+    nested = false;
+    /**
+     * Optional accessible name override. Not required for `collapsed` rows -- unlike an
+     * icon-only button, the label caption stays visible (just restyled smaller, under the icon) in
+     * that mode per Figma, so the button's default accessible-name computation (its own text
+     * content) already works. Set this if you want a fuller/different name than the visible caption
+     * (e.g. truncated captions, or matching `bs-switch`/`bs-slider`'s `ariaLabel` convention for
+     * consistency).
+     */
+    ariaLabel = null;
+    /**
+     * Switches this row to the compact icon-above-caption column layout used when its parent
+     * `bs-navigation-drawer` is `collapsed` (see the class doc above). Reflected so
+     * `bs-navigation-drawer-item[collapsed]` is CSS-targetable. Also forces `expandable` rows'
+     * chevron and `children` slot to stay hidden regardless of `expanded` -- Figma's collapsed rail
+     * never shows a nested tree.
+     */
+    collapsed = false;
+    /** Fires on click, only when `expandable` is false. See the class doc above. */
+    bsSelect;
+    /** Fires with the new `expanded` value on click, only when `expandable` is true. See the class
+     * doc above. */
+    bsToggle;
+    /** Tracks whether the `icon` slot has assigned content, so the icon wrapper only reserves
+     * layout space when there's actually an icon -- same pattern as `bs-tab`'s `hasIcon`. Not used
+     * at all for `nested` rows, which never render an icon wrapper in the first place. */
+    hasIcon = false;
+    /**
+     * Computes the initial `hasIcon` state directly from the host's light DOM children, before
+     * first render -- same reasoning as `bs-tab.componentWillLoad`'s identical comment (a slot with
+     * zero assigned nodes from the start never fires `slotchange`).
+     */
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === slotName);
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onClick = () => {
+        if (this.expandable) {
+            this.expanded = !this.expanded;
+            this.bsToggle.emit(this.expanded);
+        }
+        else {
+            this.bsSelect.emit();
+        }
+    };
+    render() {
+        const rowClasses = [
+            'bs-navigation-drawer-item',
+            this.selected && !this.expandable ? 'bs-navigation-drawer-item--selected' : '',
+            this.nested ? 'bs-navigation-drawer-item--nested' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        // The `children` slot wrapper is deliberately a SIBLING of the <button>, not nested inside
+        // it -- a nested child row's own shadow DOM renders its own real <button>, and putting that
+        // inside this row's <button> would produce invalid nested interactive controls (button inside
+        // button). Nested buttons also break click handling in practice: a click on the child bubbles
+        // through this outer <button> too (it's a real ancestor in the flattened tree), which would
+        // 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: '56087157f61114bbc3eda6ea4ed9c953c6776e7a', class: "bs-navigation-drawer-item__root" }, h("button", { key: '9d7bc98cdcccb4724a7d388209e98c66140d509d', 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: 'b071e6437b1394002e3494e533e199399b077d09', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: 'bacc7cf8105454457bd90ca563fd93ab202477af', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: '373e0875b1a68f5c02fe0473a1ff9a322d2dd9eb', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '0ba908c6abe37b35a72bd4e99491e828a7b27661' })), this.expandable && (h("span", { key: '025af7ea24428581f3a7e89642d09638ebeb1734', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '270f60521effe7a06d4720caa6392a6a76cf5d94' })))), this.expandable && (h("span", { key: '4108f797246cc31029c9a7379d6da6a70ec0dba8', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: 'b09f6e81f28fff754f46d2e750fa791e63f8cfe3', name: "children" })))));
+    }
+};
+// 16x16 native viewBox (not a 24x24 icon scaled down) -- authored directly at display size, per
+// the class doc's note on this being the author's choice between the two options offered.
+const ChevronDownIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+BsNavigationDrawerItem.style = bsNavigationDrawerItemCss();
+
+export { BsNavigationDrawerItem as bs_navigation_drawer_item };

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

@@ -0,0 +1,79 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DST5-cTx.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}`;
+
+const BsNavigationDrawer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsCollapse = createEvent(this, "bsCollapse");
+        this.bsSearchClick = createEvent(this, "bsSearchClick");
+    }
+    get el() { return getElement(this); }
+    /** Heading text shown next to the collapse toggle, and used as the `<nav>` landmark's
+     * `aria-label` (so the landmark keeps a name even when `collapsed` hides the visible text). */
+    heading = 'Main Menu';
+    /** Whether this drawer can be collapsed at all. `false` renders no collapse toggle/chevron --
+     * a "fixed" side nav (Carbon's terminology: a `Fixed Side Nav` never collapses, as opposed to a
+     * rail-capable one) that's always fully expanded. `collapsed` is ignored while this is `false`. */
+    collapsible = true;
+    /** Narrows the drawer to a 96px icon-only rail (Figma node 8028:135374). Mutable and reflected
+     * -- clicking the collapse toggle toggles this directly (self-toggling, see the class doc above
+     * for why), and this component keeps every direct-child `bs-navigation-drawer-item`'s own
+     * `collapsed` prop synced to match (see `syncItemsCollapsed`). */
+    collapsed = false;
+    /** Fires with the new `collapsed` value when the collapse toggle button is clicked. */
+    bsCollapse;
+    /** Fires when the compact search-trigger button (shown instead of the `search` slot while
+     * `collapsed`) is clicked -- e.g. to open a full search overlay. This component has no
+     * visibility into what the `search` slot actually contains, so it can't drive a real search
+     * itself once shrunk to icon size. */
+    bsSearchClick;
+    /** Forwarded straight to both internal `bs-logo` elements' own `background` prop. Defaults to
+     * `"auto"`, which follows the ambient `[data-theme="dark"]` state automatically (see `bs-logo`'s
+     * own docs) -- so if this drawer ends up on a dark surface via the normal theming mechanism, the
+     * logo switches to its dedicated dark-background asset with no wiring needed. Set
+     * `"light"`/`"dark"` explicitly only if you've overridden `--bs-navigation-drawer-bg` to
+     * something dark yourself *without* setting `[data-theme="dark"]`, and need to pin the logo
+     * regardless of theme. Has no visible effect on the `variant="mark"` logo shown while
+     * `collapsed` (see `bs-logo`'s own docs -- there's only one real designed mark asset, it's
+     * background-agnostic). */
+    logoBackground = 'auto';
+    onCollapsedChange(collapsed) {
+        this.syncItemsCollapsed(collapsed);
+    }
+    componentDidLoad() {
+        this.syncItemsCollapsed(this.collapsed);
+    }
+    /** 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`
+     * across its `bs-tab` children. Only direct children (top-level items): Figma's collapsed rail
+     * never shows nested/expanded children in the first place (see bs-navigation-drawer-item.css's
+     * `:host([collapsed])` rule forcing those hidden), so there's nothing to sync on them. */
+    syncItemsCollapsed(collapsed) {
+        const items = this.el.querySelectorAll(':scope > bs-navigation-drawer-item');
+        items.forEach(item => {
+            item.collapsed = collapsed;
+        });
+    }
+    onCollapseClick = () => {
+        this.collapsed = !this.collapsed;
+        this.bsCollapse.emit(this.collapsed);
+    };
+    onSearchTriggerClick = () => {
+        this.bsSearchClick.emit();
+    };
+    render() {
+        return (h("nav", { key: '643a802cfef5b124603056ca409c67e5e9fa0561', class: "bs-navigation-drawer", "aria-label": this.heading }, h("div", { key: '31384937f95737b961aa4f1cb0b535fc78c8fcfd', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '834c8a1a031072803815085036ea6b8a744012a2', variant: "full", background: this.logoBackground })), h("div", { key: '50b877188cea0fce86959517f1e14eb4f6869923', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '64b66e3e221d9641026009e0b7b0a0bbdf7b946a', variant: "mark", background: this.logoBackground })), h("div", { key: 'a7634d178a491940cb43ceca3dd93aa83539a316', class: "bs-navigation-drawer__title-row" }, h("span", { key: 'fc018e4474f3a38f96538be9064da6b472193b3f', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '516e28aba1e037b74ac616fbc8f293c0cef9da1a', 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: 'fba23fed9c12283360bd89dddee6248ec45c98fb' })))), h("div", { key: '29279ec0051d495810f177a194f8dc6f3c649f90', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '6eef2761d887ddc776132327c8343626071fc3b3', name: "search" })), h("button", { key: '4ee9e0ca46ca85b17394466b452cba29c0e528cc', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '844c581c6ea6c496718866150e24415f746daa36' })), h("div", { key: '3f7f3c6bb4eae12aa87c732fbc4da6d5b3a87e40', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: '20833d282601ea298a39ead5b928155e2db33a97' }))));
+    }
+    static get watchers() { return {
+        "collapsed": [{
+                "onCollapsedChange": 0
+            }]
+    }; }
+};
+// Same inline-icon-helper-function pattern as bs-chatbot-header.tsx's NewChatIcon/ExpandIcon/etc.
+const CaretLeftIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const SearchIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("circle", { cx: "11", cy: "11", r: "7", stroke: "currentColor", "stroke-width": "2" }), h("path", { d: "M16.5 16.5L21 21", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })));
+BsNavigationDrawer.style = bsNavigationDrawerCss();
+
+export { BsNavigationDrawer as bs_navigation_drawer };

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

@@ -0,0 +1,42 @@
+import { r as registerInstance, h } from './index-DST5-cTx.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}`;
+
+const BsNavigationHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Controls whether the logo renders and how the `left`/`right` slots are laid out -- see the
+     * class doc above for the three variants' exact behavior. */
+    alignment = 'default';
+    /** Accessible label for the header landmark, useful when a page has more than one `<header>`
+     * (e.g. this one plus a page-specific sub-header) and screen reader users need to tell them
+     * apart in the landmarks list. */
+    ariaLabel = null;
+    /**
+     * Fragment/URL to jump to when the "Skip to main content" link is activated (e.g.
+     * `#main-content`, matching an id on your page's main landmark). Unset by default -- the link
+     * is opt-in rather than pointing at a guessed default id, since a skip link to a target that
+     * doesn't exist on the consumer's page is worse than no skip link at all (it silently does
+     * nothing when activated). Set this to the same id your page's `<main>` (or equivalent) already
+     * has to enable it.
+     */
+    skipToContentHref = null;
+    /** Link text for the skip-to-content link. Only rendered when `skipToContentHref` is set. */
+    skipToContentLabel = 'Skip to main content';
+    /** Forwarded straight to the internal `bs-logo`'s own `background` prop. Defaults to `"auto"`,
+     * which follows the ambient `[data-theme="dark"]` state automatically (see `bs-logo`'s own
+     * docs) -- so if this bar ends up on a dark surface via the normal theming mechanism, the logo
+     * switches to its dedicated dark-background asset with no wiring needed. Set `"light"`/`"dark"`
+     * explicitly only if you've overridden `--bs-navigation-header-bg` to something dark yourself
+     * *without* setting `[data-theme="dark"]`, and need to pin the logo regardless of theme. */
+    logoBackground = 'auto';
+    render() {
+        const showLogo = this.alignment !== 'with-navigation-drawer';
+        const rootClasses = `bs-navigation-header bs-navigation-header--${this.alignment}`;
+        return (h("header", { key: 'e106c295d18a32638e8b2e8179264da30c6343fd', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: '9b0aa4f626e2ac17fd02ff35f63861be5cca0a4c', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: '079ebb7b6077307cb84dacf5504eeca259c265df', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: '79fb735078a3d2b200811c4c055b881fb17feb54', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: '8c72405a0adeb158bd6427e9c6afb77950cb1de2', name: "left" })), h("div", { key: '81941860e7e9b2780cc02b3ca9a13c0f0cde00bd', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: 'ceb361449083be06404b862e22d461daa56cd8ca', name: "right" }))));
+    }
+};
+BsNavigationHeader.style = bsNavigationHeaderCss();
+
+export { BsNavigationHeader as bs_navigation_header };

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

@@ -0,0 +1,47 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DST5-cTx.js';
+
+const bsRadioCss = () => `:host{display:inline-block;--bs-radio-size:var(--bs-spacing-300);--bs-radio-border-width:2px;--bs-radio-state-layer-size:40px;--bs-radio-hit-area-size:48px;--bs-radio-gap:var(--bs-spacing-100)}.bs-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bs-radio-gap);font-family:inherit;cursor:pointer}.bs-radio--disabled{cursor:not-allowed}.bs-radio__input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}.bs-radio__input:disabled{cursor:not-allowed}.bs-radio__hit-area{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bs-radio-hit-area-size);height:var(--bs-radio-hit-area-size)}.bs-radio__state-layer{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:var(--bs-radio-state-layer-size);height:var(--bs-radio-state-layer-size);border-radius:50%;background:var(--bs-radio-bg-default)}.bs-radio__circle{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bs-radio-size);height:var(--bs-radio-size);border:var(--bs-radio-border-width) solid var(--bs-radio-enabled-border-default);border-radius:50%;background:transparent}.bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-default)}.bs-radio__dot{width:50%;height:50%;border-radius:50%;background:var(--bs-radio-icon-checked)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-hover)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-enabled-border-hover)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-hover)}.bs-radio__input:hover:not(:disabled)~.bs-radio__hit-area .bs-radio__circle--selected .bs-radio__dot{background:var(--bs-radio-icon-hover)}.bs-radio__input:focus-visible~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-focus);outline:2px solid var(--bs-radio-focus-ring);outline-offset:2px}.bs-radio__input:focus-visible~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-enabled-border-focus)}.bs-radio__input:focus-visible~.bs-radio__hit-area .bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-focus)}.bs-radio__input:active:not(:disabled)~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-pressed)}.bs-radio__input:active:not(:disabled)~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-enabled-border-pressed)}.bs-radio__input:active:not(:disabled)~.bs-radio__hit-area .bs-radio__circle--selected{border-color:var(--bs-radio-selected-border-pressed)}.bs-radio__input:disabled~.bs-radio__hit-area .bs-radio__state-layer{background:var(--bs-radio-bg-disabled)}.bs-radio__input:disabled~.bs-radio__hit-area .bs-radio__circle{border-color:var(--bs-radio-border-disabled)}.bs-radio__input:disabled~.bs-radio__hit-area .bs-radio__circle--selected .bs-radio__dot{background:var(--bs-radio-icon-disabled)}.bs-radio__label{font-size:var(--bs-font-size-md);color:var(--bs-radio-label-default)}.bs-radio--disabled .bs-radio__label{color:var(--bs-radio-label-disabled)}`;
+
+const BsRadio = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsChange = createEvent(this, "bsChange");
+    }
+    get el() { return getElement(this); }
+    /** The native radio input's `name` attribute. Passed straight through to the native input inside.
+     * NOTE: because each `bs-radio` renders its own shadow root, native `<input type="radio">`
+     * mutual-exclusion grouping (which the HTML spec scopes to a single DOM tree) does NOT extend
+     * across separate `bs-radio` instances sharing the same `name` -- checking one will not natively
+     * uncheck another. Within a single instance this still behaves like a normal radio input. See
+     * bs-radio.mdx's Accessibility section for this known gap; consumers building a group currently
+     * need to manage mutual exclusivity themselves (e.g. via `bsChange`) until a `bs-radio-group`
+     * wrapper exists. */
+    name;
+    /** The native radio input's `value` attribute -- read from `event.target.value`, or used when
+     * wiring the group up to a form. */
+    value;
+    /** Whether the radio is checked. Mutable so clicking the label/input sets it directly. */
+    checked = false;
+    /** Disables the radio: sets the native `disabled` attribute, suppresses hover/focus styling, and
+     * prevents toggling. */
+    disabled = false;
+    /** Emitted with this radio's own `value` when it becomes checked via user interaction. Since
+     * native same-`name` grouping doesn't cross shadow-root boundaries (see the `name` prop's doc),
+     * a consumer wiring up a group of `bs-radio`s must itself set `checked = false` on the others in
+     * response to this event -- there's no automatic un-checking to rely on here. */
+    bsChange;
+    onChange = (ev) => {
+        const checked = ev.target.checked;
+        this.checked = checked;
+        if (checked) {
+            this.bsChange.emit(this.value);
+        }
+    };
+    render() {
+        return (h("label", { key: 'da5cdc3a3661ed9d2f10741e46f87cc9beb9dbfd', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '431a861dbbd5ea993272714e5c366eaea3a0bd8d', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: '525d9b9d3d980a70af93a7ee800043ce0ba8d98e', class: "bs-radio__hit-area" }, h("span", { key: '8c19cc4f2eb771fe82d4cb20376563b61da0f69e', class: "bs-radio__state-layer" }, h("span", { key: '33829a5a6c179a8bc3289f4a25fe65ddbcce5c96', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '36fc0fa7d46a6bd32879c83a3d084afb282fd39d', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'efc3e222bae86289767794a23ede57b349567238', part: "label", class: "bs-radio__label" }, h("slot", { key: 'd4842d16ecade0d79572bf53a37549f017f846dd' }))));
+    }
+    static get delegatesFocus() { return true; }
+};
+BsRadio.style = bsRadioCss();
+
+export { BsRadio as bs_radio };

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

@@ -0,0 +1,189 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DST5-cTx.js';
+
+const bsSliderCss = () => `:host{display:block;--bs-slider-gap:var(--bs-spacing-100);--bs-slider-label-color:var(--bs-text-default);--bs-slider-label-color-disabled:var(--bs-text-muted);--bs-slider-label-font-weight:var(--bs-font-weight-semibold);--bs-slider-track-height:var(--bs-spacing-50);--bs-slider-track-radius:var(--bs-border-radius-full);--bs-slider-track-bg:var(--bs-surface-container);--bs-slider-track-bg-disabled:var(--bs-surface-action-disabled);--bs-slider-fill-bg:var(--bs-surface-action);--bs-slider-fill-bg-disabled:var(--bs-surface-on-action-disabled);--bs-slider-knob-hit-size:var(--bs-spacing-600);--bs-slider-knob-size:var(--bs-spacing-300);--bs-slider-knob-bg:var(--bs-surface-action);--bs-slider-knob-color-disabled:var(--bs-surface-on-action-disabled);--bs-slider-focus-ring-color:var(--bs-border-primary-focus);--bs-slider-focus-ring-gap-color:var(--bs-surface-base);--bs-slider-tick-bg:var(--bs-surface-inset);--bs-slider-tooltip-bg:var(--bs-surface-inverse);--bs-slider-tooltip-color:var(--bs-text-inverse);--bs-slider-tooltip-radius:var(--bs-border-radius-50);--bs-slider-field-width:56px;--bs-slider-field-border:var(--bs-input-border-default);--bs-slider-field-bg:var(--bs-input-bg-default);--bs-slider-field-radius:var(--bs-border-radius-100);--bs-slider-field-text:var(--bs-input-text);--bs-slider-field-text-disabled:var(--bs-text-on-disabled);--bs-slider-bound-color:var(--bs-text-default);--bs-slider-bound-color-disabled:var(--bs-text-on-disabled)}.bs-slider{display:flex;flex-direction:column;gap:var(--bs-slider-gap);font-family:inherit}.bs-slider__label{font-size:var(--bs-font-size-sm);font-weight:var(--bs-slider-label-font-weight);color:var(--bs-slider-label-color)}.bs-slider--disabled .bs-slider__label{color:var(--bs-slider-label-color-disabled);font-weight:normal}.bs-slider__header{display:flex;align-items:center;justify-content:space-between;gap:var(--bs-slider-gap)}.bs-slider__value-fields{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-slider__row{display:flex;align-items:center;gap:var(--bs-slider-gap)}.bs-slider__bound{color:var(--bs-slider-bound-color);font-size:var(--bs-font-size-md);flex-shrink:0}.bs-slider--disabled .bs-slider__bound{color:var(--bs-slider-bound-color-disabled)}.bs-slider__separator{color:var(--bs-slider-field-text);flex-shrink:0}.bs-slider--disabled .bs-slider__separator{color:var(--bs-slider-field-text-disabled)}.bs-slider__field{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-spacing-25);flex-shrink:0;width:var(--bs-slider-field-width);border:1px solid var(--bs-slider-field-border);border-radius:var(--bs-slider-field-radius);background:var(--bs-slider-field-bg);padding:var(--bs-spacing-50) var(--bs-spacing-100)}.bs-slider--disabled .bs-slider__field{cursor:not-allowed}.bs-slider__field-input{flex:1;min-width:0;border:none;outline:none;padding:0;background:transparent;color:var(--bs-slider-field-text);font-size:var(--bs-font-size-sm);font-family:inherit;text-align:left;-moz-appearance:textfield}.bs-slider__field-suffix{flex-shrink:0;color:var(--bs-slider-field-text);font-size:var(--bs-font-size-sm)}.bs-slider--disabled .bs-slider__field-suffix{color:var(--bs-slider-field-text-disabled)}.bs-slider__field-input::-webkit-outer-spin-button,.bs-slider__field-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bs-slider__field-input:disabled{color:var(--bs-slider-field-text-disabled);cursor:not-allowed}.bs-slider__track-wrapper{position:relative;flex:1;min-width:0;height:var(--bs-slider-knob-hit-size);display:flex;align-items:center}.bs-slider__track{position:relative;width:100%;height:var(--bs-slider-track-height);border-radius:var(--bs-slider-track-radius);background:var(--bs-slider-track-bg);overflow:visible;pointer-events:none}.bs-slider--disabled .bs-slider__track{background:var(--bs-slider-track-bg-disabled)}.bs-slider__track-fill{position:absolute;top:0;bottom:0;left:var(--bs-slider-fill-start, 0%);right:calc(100% - var(--bs-slider-fill-end, 0%));border-radius:var(--bs-slider-track-radius);background:var(--bs-slider-fill-bg)}.bs-slider--disabled .bs-slider__track-fill{background:var(--bs-slider-fill-bg-disabled)}.bs-slider__ticks{position:absolute;top:50%;left:0;width:100%;height:0;display:flex;justify-content:space-between;transform:translateY(-50%);pointer-events:none}.bs-slider__tick{width:2px;height:var(--bs-spacing-50);background:var(--bs-slider-tick-bg)}.bs-slider__tick--hidden{opacity:0}.bs-slider__input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;appearance:none;background:transparent;cursor:pointer}.bs-slider--disabled .bs-slider__input{cursor:not-allowed}.bs-slider__input::-webkit-slider-runnable-track{background:transparent}.bs-slider__input::-moz-range-track{background:transparent}.bs-slider__input::-webkit-slider-thumb{appearance:none;box-sizing:border-box;width:var(--bs-slider-knob-size);height:var(--bs-slider-knob-size);border-radius:var(--bs-border-radius-full);border:none;background:var(--bs-slider-knob-bg);cursor:pointer}.bs-slider__input::-moz-range-thumb{box-sizing:border-box;width:var(--bs-slider-knob-size);height:var(--bs-slider-knob-size);border-radius:var(--bs-border-radius-full);border:none;background:var(--bs-slider-knob-bg);cursor:pointer}.bs-slider--disabled .bs-slider__input::-webkit-slider-thumb{cursor:not-allowed;background:var(--bs-slider-knob-color-disabled)}.bs-slider--disabled .bs-slider__input::-moz-range-thumb{cursor:not-allowed;background:var(--bs-slider-knob-color-disabled)}.bs-slider__input--start,.bs-slider__input--end{pointer-events:none}.bs-slider__input--start::-webkit-slider-thumb,.bs-slider__input--end::-webkit-slider-thumb{pointer-events:auto}.bs-slider__input--start::-moz-range-thumb,.bs-slider__input--end::-moz-range-thumb{pointer-events:auto}.bs-slider__input:focus-visible::-webkit-slider-thumb,.bs-slider__input:active::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--bs-slider-focus-ring-gap-color), 0 0 0 4px var(--bs-slider-focus-ring-color)}.bs-slider__input:focus-visible::-moz-range-thumb,.bs-slider__input:active::-moz-range-thumb{box-shadow:0 0 0 2px var(--bs-slider-focus-ring-gap-color), 0 0 0 4px var(--bs-slider-focus-ring-color)}.bs-slider__tooltip{position:absolute;bottom:calc(50% + 38px);transform:translateX(-50%);padding:var(--bs-spacing-25) var(--bs-spacing-100);background:var(--bs-slider-tooltip-bg);color:var(--bs-slider-tooltip-color);border-radius:var(--bs-slider-tooltip-radius);font-size:var(--bs-font-size-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.1s ease}.bs-slider__tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);width:8px;height:8px;background:var(--bs-slider-tooltip-bg);clip-path:polygon(50% 100%, 0% 0%, 100% 0%)}.bs-slider__input:focus-visible~.bs-slider__tooltip,.bs-slider__input:active~.bs-slider__tooltip{opacity:1}.bs-slider__input--start:focus-visible~.bs-slider__tooltip--end,.bs-slider__input--start:active~.bs-slider__tooltip--end,.bs-slider__input--end:focus-visible~.bs-slider__tooltip--start,.bs-slider__input--end:active~.bs-slider__tooltip--start{opacity:0}`;
+
+const BsSlider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsChange = createEvent(this, "bsChange");
+        this.bsRangeChange = createEvent(this, "bsRangeChange");
+    }
+    get el() { return getElement(this); }
+    /** Which slider shape to render. `range` uses two thumbs (`valueStart`/`valueEnd`); `default`
+     * and `segmented` use one thumb (`value`). `segmented` additionally draws `segments` tick marks
+     * along the track. */
+    type = 'default';
+    /** Shows/hides the "Label" text and editable percentage field(s) above the track, and the
+     * static min/max bound labels flanking it. When `false`, only the bare track (and its
+     * knob/knobs) renders. */
+    showLabel = true;
+    /** Label text shown above the track when `showLabel` is set. */
+    label = 'Label';
+    /** Minimum selectable value, for all `type`s. */
+    min = 0;
+    /** Maximum selectable value, for all `type`s. */
+    max = 100;
+    /** Step size between selectable values. For `type="segmented"`, the effective step is derived
+     * from `(max - min) / segments` instead, so the thumb always snaps to a tick. */
+    step = 1;
+    /** Current value for `type="default"`/`type="segmented"`. Ignored for `type="range"` -- use
+     * `valueStart`/`valueEnd` instead. Mutable so dragging the thumb updates it directly. */
+    value = 0;
+    /** Lower thumb's value for `type="range"`. Defaults to `min` when unset. Mutable so dragging the
+     * thumb updates it directly. */
+    valueStart;
+    /** Upper thumb's value for `type="range"`. Defaults to `max` when unset. Mutable so dragging the
+     * thumb updates it directly. */
+    valueEnd;
+    /** Number of equal divisions marked by tick lines along the track, for `type="segmented"` only.
+     * The first tick (at the very start of the track) is rendered with `opacity: 0` to keep the
+     * tick spacing math consistent while not visually doubling up with the track's own start edge --
+     * this matches the design spec, not a bug. */
+    segments = 10;
+    /** Disables the slider: sets the native `disabled` attribute on the range input(s), suppresses
+     * hover/focus/drag styling and the value tooltip, and prevents interaction. */
+    disabled = false;
+    /**
+     * Accessible name for the slider's native range input(s). Required whenever `showLabel` is
+     * `false` (a bare track with no visible "Label" text) -- without it, the internal native
+     * `<input>` has no accessible name at all. Setting `aria-label` directly on the `<bs-slider>`
+     * host does NOT work for this: that attribute stays on the light-DOM host and is never forwarded
+     * into the shadow DOM by the browser. Same pattern/reasoning as `bs-switch`'s and `bs-checkbox`'s
+     * identical `ariaLabel` prop. For `type="range"`, this labels the lower-bound thumb; the
+     * upper-bound thumb gets `"${ariaLabel} end"` (or `"End value"` when `ariaLabel` is unset).
+     */
+    ariaLabel = null;
+    /** Emitted when `value` changes via user interaction (dragging the thumb, or committing the
+     * value field), with the new value. Only fires for `type="default"`/`type="segmented"`. */
+    bsChange;
+    /** Emitted when `valueStart`/`valueEnd` changes via user interaction, with both current values.
+     * Only fires for `type="range"`. */
+    bsRangeChange;
+    get effectiveValueStart() {
+        return this.valueStart ?? this.min;
+    }
+    get effectiveValueEnd() {
+        return this.valueEnd ?? this.max;
+    }
+    /** Effective step for the native range input(s): `step` as-is, except for `type="segmented"`,
+     * where it's derived from `segments` so the thumb always lands on a tick. */
+    get effectiveStep() {
+        if (this.type === 'segmented' && this.segments > 0) {
+            return (this.max - this.min) / this.segments;
+        }
+        return this.step;
+    }
+    clamp(n) {
+        if (Number.isNaN(n))
+            return this.min;
+        return Math.min(this.max, Math.max(this.min, n));
+    }
+    percent(value) {
+        if (this.max === this.min)
+            return 0;
+        return ((value - this.min) / (this.max - this.min)) * 100;
+    }
+    onInputChange = (ev) => {
+        if (this.disabled)
+            return;
+        const next = this.clamp(parseFloat(ev.target.value));
+        this.value = next;
+        this.bsChange.emit(next);
+    };
+    clampPercent(n) {
+        if (Number.isNaN(n))
+            return 0;
+        return Math.min(100, Math.max(0, n));
+    }
+    /** Converts an edited percentage (0-100, from the header field) back to a raw value in
+     * min/max units. */
+    fromPercent(pct) {
+        return this.min + (this.clampPercent(pct) / 100) * (this.max - this.min);
+    }
+    onPercentFieldChange = (ev) => {
+        if (this.disabled)
+            return;
+        const next = this.clamp(this.fromPercent(parseFloat(ev.target.value)));
+        this.value = next;
+        this.bsChange.emit(next);
+    };
+    onStartInputChange = (ev) => {
+        if (this.disabled)
+            return;
+        let next = this.clamp(parseFloat(ev.target.value));
+        next = Math.min(next, this.effectiveValueEnd);
+        this.valueStart = next;
+        this.bsRangeChange.emit({ start: next, end: this.effectiveValueEnd });
+    };
+    onEndInputChange = (ev) => {
+        if (this.disabled)
+            return;
+        let next = this.clamp(parseFloat(ev.target.value));
+        next = Math.max(next, this.effectiveValueStart);
+        this.valueEnd = next;
+        this.bsRangeChange.emit({ start: this.effectiveValueStart, end: next });
+    };
+    onStartPercentFieldChange = (ev) => {
+        if (this.disabled)
+            return;
+        let next = this.clamp(this.fromPercent(parseFloat(ev.target.value)));
+        next = Math.min(next, this.effectiveValueEnd);
+        this.valueStart = next;
+        this.bsRangeChange.emit({ start: next, end: this.effectiveValueEnd });
+    };
+    onEndPercentFieldChange = (ev) => {
+        if (this.disabled)
+            return;
+        let next = this.clamp(this.fromPercent(parseFloat(ev.target.value)));
+        next = Math.max(next, this.effectiveValueStart);
+        this.valueEnd = next;
+        this.bsRangeChange.emit({ start: this.effectiveValueStart, end: next });
+    };
+    /** The editable field shown top-right (or as a pair for `type="range"`), displaying/editing
+     * the thumb's position as a rounded 0-100 percentage of min/max -- not the raw value -- per
+     * the Figma spec (every state screenshot shows this field suffixed "%", matching the same
+     * percentage the tooltip shows while dragging). */
+    renderPercentField(percentValue, onChange, ariaLabel) {
+        return (h("span", { part: "field", class: "bs-slider__field" }, h("input", { type: "number", class: "bs-slider__field-input", value: Math.round(this.clampPercent(percentValue)), min: 0, max: 100, disabled: this.disabled, "aria-label": ariaLabel, onChange: onChange }), h("span", { class: "bs-slider__field-suffix", "aria-hidden": "true" }, "%")));
+    }
+    renderSegmentedTicks() {
+        if (this.type !== 'segmented' || this.segments <= 0)
+            return null;
+        // segments+1 ticks (both track ends plus every division), per the Figma spec -- the first
+        // tick is invisible (opacity: 0) so the spacing math stays consistent even though it would
+        // otherwise sit right on top of the track's own start edge.
+        const tickCount = this.segments + 1;
+        return (h("div", { class: "bs-slider__ticks", "aria-hidden": "true" }, Array.from({ length: tickCount }).map((_, i) => (h("span", { class: `bs-slider__tick ${i === 0 ? 'bs-slider__tick--hidden' : ''}` })))));
+    }
+    renderSingleThumb() {
+        const fillEnd = this.percent(this.value);
+        return (h("div", { class: "bs-slider__track-wrapper", style: { '--bs-slider-fill-start': '0%', '--bs-slider-fill-end': `${fillEnd}%` } }, h("div", { part: "track", class: "bs-slider__track" }, h("div", { part: "fill", class: "bs-slider__track-fill" }), this.renderSegmentedTicks()), h("input", { type: "range", part: "control", class: "bs-slider__input", min: this.min, max: this.max, step: this.effectiveStep, value: this.value, disabled: this.disabled, "aria-label": this.ariaLabel ?? undefined, "aria-labelledby": !this.ariaLabel && this.showLabel ? 'bs-slider-label' : undefined, onInput: this.onInputChange, onChange: this.onInputChange }), h("span", { class: "bs-slider__tooltip", part: "tooltip", style: { left: `${fillEnd}%` }, "aria-hidden": "true" }, Math.round(this.percent(this.value)), "%")));
+    }
+    renderRangeThumbs() {
+        const start = this.effectiveValueStart;
+        const end = this.effectiveValueEnd;
+        const fillStart = this.percent(start);
+        const fillEnd = this.percent(end);
+        // Two thumbs can't be done with a single native <input type="range"> -- the CSS spec only
+        // gives a range input one thumb. This is the well-known dual-range-slider pattern instead:
+        // two overlapping native range inputs, each with a fully transparent track (only their thumb
+        // is visible/interactive -- see bs-slider.css's pointer-events rules), plus a separate
+        // absolutely-positioned div for the "filled" segment between them.
+        //
+        // Both inputs sit at the same z-index by default, except whichever thumb is in the upper half
+        // of the track gets a higher z-index -- without that, once the two thumbs are close together
+        // near one end, only the topmost one is reachable by click, and the topmost one is always the
+        // one rendered last (the end thumb) unless we compensate.
+        const startOnTop = this.percent(start) > 50;
+        return (h("div", { class: "bs-slider__track-wrapper", style: { '--bs-slider-fill-start': `${fillStart}%`, '--bs-slider-fill-end': `${fillEnd}%` } }, h("div", { part: "track", class: "bs-slider__track" }, h("div", { part: "fill", class: "bs-slider__track-fill" })), h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--start", style: { zIndex: startOnTop ? '4' : '3' }, min: this.min, max: this.max, step: this.step, value: start, disabled: this.disabled, "aria-label": this.ariaLabel ?? 'Start value', onInput: this.onStartInputChange, onChange: this.onStartInputChange }), h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--end", style: { zIndex: startOnTop ? '3' : '4' }, min: this.min, max: this.max, step: this.step, value: end, disabled: this.disabled, "aria-label": this.ariaLabel ? `${this.ariaLabel} end` : 'End value', onInput: this.onEndInputChange, onChange: this.onEndInputChange }), h("span", { class: "bs-slider__tooltip bs-slider__tooltip--start", part: "tooltip", style: { left: `${fillStart}%` }, "aria-hidden": "true" }, Math.round(this.percent(start)), "%"), h("span", { class: "bs-slider__tooltip bs-slider__tooltip--end", part: "tooltip", style: { left: `${fillEnd}%` }, "aria-hidden": "true" }, Math.round(this.percent(end)), "%")));
+    }
+    render() {
+        const isRange = this.type === 'range';
+        const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
+        return (h("div", { key: '85529486524fc9859b4b1706a69e70f46537ab77', class: rootClasses }, this.showLabel && (h("div", { key: '4871263c05627057e838478048caed54554db6fc', class: "bs-slider__header" }, h("span", { key: '91ef26112441bdd1bdc7b4b0d1653c81db88bf4a', 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: '336901d2c9195c4415fce9fe9c683c51b652feb8', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '49330dd4efe29c2f4d27ded8a5ed812b5a98d6af', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '6daa487800d4303d2d43c7d526bd457d3caddf7f', part: "bound", class: "bs-slider__bound" }, this.max)))));
+    }
+    static get delegatesFocus() { return true; }
+};
+BsSlider.style = bsSliderCss();
+
+export { BsSlider as bs_slider };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DP_bvuvB.js';
+import { r as registerInstance, c as createEvent, h } from './index-DST5-cTx.js';
 
 const bsSourceLinkCss = () => `:host{display:block;--bs-source-link-radius:var(--bs-border-radius-150);--bs-source-link-padding:var(--bs-spacing-150);--bs-source-link-gap:var(--bs-spacing-50);--bs-source-link-icon-gap:var(--bs-spacing-75);--bs-source-link-hover:var(--bs-surface-hover);--bs-source-link-pressed:var(--bs-surface-pressed);--bs-source-link-focus:var(--bs-border-neutral-focus);--bs-source-link-filename-color:var(--bs-text-default);--bs-source-link-meta-color:var(--bs-text-secondary);--bs-source-link-icon-color:var(--bs-icon-default);--bs-source-link-dot-color:var(--bs-text-secondary)}.bs-source-link{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-source-link-gap);width:100%;padding:var(--bs-source-link-padding);background:none;border:none;border-radius:var(--bs-source-link-radius);font-family:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-source-link:hover,.bs-source-link:focus-visible{background:var(--bs-source-link-hover)}.bs-source-link:active{background:var(--bs-source-link-pressed)}.bs-source-link:focus-visible{outline:2px solid var(--bs-source-link-focus);outline-offset:1px}.bs-source-link__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:16px;height:16px;color:var(--bs-source-link-icon-color)}.bs-source-link__left{display:flex;flex:1 0 0;flex-direction:column;gap:2px;min-width:0}.bs-source-link__filename-row{display:flex;align-items:center;gap:var(--bs-source-link-icon-gap);width:100%}.bs-source-link__filename{margin:0;overflow:hidden;color:var(--bs-source-link-filename-color);font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-semibold);line-height:var(--bs-line-height-normal);text-overflow:ellipsis;white-space:nowrap}.bs-source-link__meta{display:flex;align-items:center;gap:var(--bs-spacing-50);padding-left:22px}.bs-source-link__source,.bs-source-link__version{color:var(--bs-source-link-meta-color);font-size:var(--bs-font-size-sm);line-height:var(--bs-line-height-normal);white-space:nowrap}.bs-source-link__dot{width:4px;height:4px;border-radius:50%;background:var(--bs-source-link-dot-color);flex-shrink:0}.bs-source-link__arrow{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:24px;height:24px;color:var(--bs-source-link-icon-color)}`;
 
@@ -24,8 +24,8 @@ const BsSourceLink = class {
     };
     render() {
         const inner = [
-            h("span", { key: '3aa9b7617d8ee912f19a8a51acd9b7bdc91c8db7', class: "bs-source-link__left" }, h("span", { key: '4489eb50cc93b509e51ecb6439be00a49e9bfe5c', class: "bs-source-link__filename-row" }, h("span", { key: '391055326352c9296e9732b8e047e9004735147e', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'ec44e5f429c68b315cbf3a4aac93328211ea01f8', name: "icon" }, h(FileTextIcon, { key: '2837c2a63e0575af578db04ced09a6623f4ebead' }))), h("p", { key: '677c00bf7ce6ad0f0a7e91f6e46a50647d8178d9', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'ab536a62b3487f55884dc0fb6c6b78360054223e', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '699ca6a8877a1a8e00cb25c54d05345fe6603daa', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '3235b045ab945f6a58f1bcdaa0d926a5679b04f4', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'adfb7f67f65b26b276163c2538308ceabc62fae5', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '0c23000d49c1faadd5af81c993283fa2f4cf9272', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '98447d6522f6af02cef14c42b0f817853fca2d3d' })),
+            h("span", { key: '79756193e545c7bc24f6df3aa25a644294933536', class: "bs-source-link__left" }, h("span", { key: 'e3aee2ee301d383149f242ee40d681a75782a4b2', class: "bs-source-link__filename-row" }, h("span", { key: '6cc1a0f55f54a0cca0f2ca305c2f8566e3016243', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'b61ee4c11179ce958dbc5f3eb4cf1f3a0ff90c26', name: "icon" }, h(FileTextIcon, { key: '2d94ec22dade078f3828e8d0d64adb984716fb00' }))), h("p", { key: 'a727c77f11c68b61b0307d31dd9c79e811a75406', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'bec3857211075ce8ce4ff33c649ee6370b6039f5', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '5ca4e697485e1f82d8375afe48b2ab13380efe40', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '4a69cae984e34e5329750bd19c868c9b0a83da28', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '8abd2c99dcea7b95bc7d79d24c1ba1f6fdd10436', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: 'c5ff90d23096ab0cc70f6f906b8d04d29498e735', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '2bfc3acc65b7d9401c30999f4dd0adbf15f8a8d3' })),
         ];
         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-switch.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DST5-cTx.js';
+
+const bsSwitchCss = () => `:host{display:inline-block;--bs-switch-radius:var(--bs-border-radius-full);--bs-switch-padding:var(--bs-spacing-25);--bs-switch-gap:var(--bs-spacing-100);--bs-switch-track-width-md:36px;--bs-switch-track-height-md:20px;--bs-switch-track-width-lg:48px;--bs-switch-track-height-lg:28px;--bs-switch-knob-size-md:16px;--bs-switch-knob-size-lg:24px;--bs-switch-border-width:1px;--bs-switch-track-bg:var(--bs-switch-track-bg-default);--bs-switch-track-bg-checked:var(--bs-switch-track-bg-checked-default);--bs-switch-track-bg-checked-focus:var(--bs-switch-track-bg-checked-focused);--bs-switch-track-border:var(--bs-switch-track-border-default);--bs-switch-focus-ring-color:var(--bs-switch-track-border-focus);--bs-switch-knob-bg:var(--bs-switch-thumb-bg-default);--bs-switch-knob-bg-hover:var(--bs-switch-thumb-bg-hover);--bs-switch-knob-bg-checked:var(--bs-switch-thumb-bg-checked);--bs-switch-knob-bg-disabled:var(--bs-switch-thumb-bg-disabled);--bs-switch-label-color:var(--bs-text-default);--bs-switch-label-color-disabled:var(--bs-text-on-disabled)}.bs-switch{position:relative;display:inline-flex;align-items:center;gap:var(--bs-switch-gap);font-family:inherit;cursor:pointer}.bs-switch--disabled{cursor:not-allowed}.bs-switch__input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}.bs-switch__input:disabled{cursor:not-allowed}.bs-switch__track{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;padding:var(--bs-switch-padding);border:var(--bs-switch-border-width) solid var(--bs-switch-track-border);border-radius:var(--bs-switch-radius);background:var(--bs-switch-track-bg);transition:background-color 0.15s ease, border-color 0.15s ease}.bs-switch__track--md{width:var(--bs-switch-track-width-md);height:var(--bs-switch-track-height-md)}.bs-switch__track--lg{width:var(--bs-switch-track-width-lg);height:var(--bs-switch-track-height-lg)}.bs-switch__track--checked{justify-content:flex-end;background:var(--bs-switch-track-bg-checked)}.bs-switch__knob{box-sizing:border-box;border-radius:var(--bs-border-radius-full);background:var(--bs-switch-knob-bg);transition:background-color 0.15s ease}.bs-switch__knob--md{width:var(--bs-switch-knob-size-md);height:var(--bs-switch-knob-size-md)}.bs-switch__knob--lg{width:var(--bs-switch-knob-size-lg);height:var(--bs-switch-knob-size-lg)}.bs-switch__track--checked .bs-switch__knob{background:var(--bs-switch-knob-bg-checked)}.bs-switch__input:hover:not(:disabled)~.bs-switch__track{background:var(--bs-switch-track-bg-hover);border-color:var(--bs-switch-track-border-hover)}.bs-switch__input:hover:not(:disabled)~.bs-switch__track .bs-switch__knob{background:var(--bs-switch-knob-bg-hover)}.bs-switch__input:hover:not(:disabled)~.bs-switch__track--checked{background:var(--bs-switch-track-bg-checked-hover)}.bs-switch__input:focus-visible~.bs-switch__track{border-color:var(--bs-switch-track-border-hover);outline:2px solid var(--bs-switch-focus-ring-color);outline-offset:2px}.bs-switch__input:focus-visible~.bs-switch__track--checked{background:var(--bs-switch-track-bg-checked-focus)}.bs-switch__track--disabled{background:var(--bs-switch-track-bg-disabled);border-color:var(--bs-switch-track-border)}.bs-switch__track--disabled.bs-switch__track--checked{background:var(--bs-switch-track-bg-disabled)}.bs-switch__knob--disabled{background:var(--bs-switch-knob-bg-disabled)}.bs-switch__label{font-size:var(--bs-font-size-md);color:var(--bs-switch-label-color)}.bs-switch--disabled .bs-switch__label{color:var(--bs-switch-label-color-disabled)}`;
+
+const BsSwitch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsChange = createEvent(this, "bsChange");
+    }
+    get el() { return getElement(this); }
+    /** Sizing scale. Controls the track's width/height and the knob's diameter. */
+    size = 'lg';
+    /** Whether the switch is on. Mutable so clicking the label/input toggles it directly, and
+     * reflected so consumers can target `bs-switch[checked]` via CSS. */
+    checked = false;
+    /** Disables the switch: sets the native `disabled` attribute, suppresses hover/focus styling,
+     * and prevents toggling. */
+    disabled = false;
+    /**
+     * Accessible name for the switch. Required whenever the default (label) slot is empty (e.g. a
+     * bare "enabled" switch in a table row) -- without it, the internal native `<input>` has no
+     * accessible name at all. Setting `aria-label` directly on the `<bs-switch>` host does NOT
+     * work for this: that attribute stays on the light-DOM host and is never forwarded into the
+     * shadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays
+     * nameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and
+     * `bs-checkbox`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own
+     * internal focusable element for the same reason.
+     */
+    ariaLabel = null;
+    /** Emitted when the checked state changes via user interaction, with the new `checked` value. */
+    bsChange;
+    onChange = (ev) => {
+        const checked = ev.target.checked;
+        this.checked = checked;
+        this.bsChange.emit(checked);
+    };
+    render() {
+        const trackClasses = [
+            'bs-switch__track',
+            `bs-switch__track--${this.size}`,
+            this.checked ? 'bs-switch__track--checked' : '',
+            this.disabled ? 'bs-switch__track--disabled' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
+            .filter(Boolean)
+            .join(' ');
+        return (h("label", { key: '4e5e5005cddacfaa695aae4023aefdae68330d8e', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '8adf2a272b1c9c757543b32f635f2129b4990cf1', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '2766916d51d0281bac341f636d99ee81f6c31564', part: "track", class: trackClasses }, h("span", { key: 'ec0f7d008cd34d575271dbdde1d34771a6095932', part: "knob", class: knobClasses })), h("span", { key: 'b28bace70e76c37163abcbc74c4fba2156f6da5d', part: "label", class: "bs-switch__label" }, h("slot", { key: '57c58faa8c6711fff5aa03eb559520ef31f531c6' }))));
+    }
+    static get delegatesFocus() { return true; }
+};
+BsSwitch.style = bsSwitchCss();
+
+export { BsSwitch as bs_switch };