@brandsync/wc 1.12.1 → 1.14.0

package/dist/cjs/bs-side-panel.cjs.entry.js

@@ -0,0 +1,164 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.js');
+
+const bsSidePanelCss = () => `:host{--bs-side-panel-bg:var(--bs-surface-raised);--bs-side-panel-width:calc(var(--bs-scale-1600) * 3);--bs-side-panel-padding:var(--bs-spacing-200);--bs-side-panel-shadow:var(--bs-shadow-md);--bs-side-panel-overlay-bg:var(--bs-surface-overlay);--bs-side-panel-color:var(--bs-text-default);--bs-side-panel-z-index:var(--bs-z-index-modal)}.bs-side-panel{position:fixed;inset:0;z-index:var(--bs-side-panel-z-index);pointer-events:none}.bs-side-panel__overlay{position:absolute;inset:0;background:var(--bs-side-panel-overlay-bg);pointer-events:auto}.bs-side-panel__panel{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;box-sizing:border-box;width:var(--bs-side-panel-width);max-width:100%;background:var(--bs-side-panel-bg);color:var(--bs-side-panel-color);box-shadow:var(--bs-side-panel-shadow);pointer-events:auto;outline:none}.bs-side-panel--start .bs-side-panel__panel{left:0}.bs-side-panel--end .bs-side-panel__panel{right:0}.bs-side-panel__header{display:flex;align-items:center;justify-content:space-between;gap:var(--bs-spacing-100);padding:var(--bs-side-panel-padding)}.bs-side-panel__heading{margin:0;font-size:var(--bs-font-size-lg);font-weight:var(--bs-font-weight-semibold)}.bs-side-panel__actions{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-side-panel__body{flex:1;overflow-y:auto;padding:0 var(--bs-side-panel-padding)}.bs-side-panel__footer{padding:var(--bs-side-panel-padding)}`;
+
+let panelId = 0;
+const BsSidePanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsClose = index.createEvent(this, "bsClose");
+    }
+    get el() { return index.getElement(this); }
+    /** Whether the panel is visible. */
+    open = false;
+    /** Panel title; also its accessible name. */
+    heading = '';
+    /** Edge the panel is anchored to. */
+    side = 'end';
+    /** Accessible label of the close button. */
+    closeLabel = 'Close';
+    /** Shows a backdrop behind the panel; clicking it closes the panel. */
+    overlay = false;
+    /** Emitted when the panel requests to close (close button, Escape, overlay click). */
+    bsClose;
+    headingId = `bs-side-panel-heading-${++panelId}`;
+    previouslyFocused = null;
+    panelEl;
+    /** Elements we set `inert` on (so we only undo our own changes). */
+    inertified = [];
+    onOpenChange(next) {
+        if (next) {
+            this.previouslyFocused = document.activeElement ?? null;
+            this.applyInert();
+        }
+        else {
+            this.restoreInert();
+            this.previouslyFocused?.focus?.();
+            this.previouslyFocused = null;
+        }
+    }
+    onOverlayChange() {
+        if (!this.open)
+            return;
+        this.restoreInert();
+        this.applyInert();
+    }
+    connectedCallback() {
+        if (this.open)
+            this.applyInert();
+    }
+    disconnectedCallback() {
+        this.restoreInert();
+    }
+    /** Marks everything outside the panel as inert (modal overlay only). */
+    applyInert() {
+        if (!this.overlay || this.inertified.length)
+            return;
+        let node = this.el;
+        while (node && node !== document.body) {
+            const parent = node.parentElement;
+            if (!parent)
+                break;
+            Array.from(parent.children).forEach(sib => {
+                if (sib === node || !(sib instanceof HTMLElement) || sib.inert)
+                    return;
+                sib.inert = true;
+                this.inertified.push(sib);
+            });
+            node = parent;
+        }
+    }
+    restoreInert() {
+        this.inertified.forEach(el => (el.inert = false));
+        this.inertified = [];
+    }
+    getFocusables() {
+        const sel = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),bs-icon-button,[contenteditable="true"]';
+        const out = [];
+        const visit = (root) => {
+            Array.from(root.children).forEach(child => {
+                if (child instanceof HTMLSlotElement) {
+                    const assigned = child.assignedElements({ flatten: true });
+                    assigned.forEach(a => consider(a));
+                }
+                else
+                    consider(child);
+            });
+        };
+        const consider = (el) => {
+            if (!(el instanceof HTMLElement) || el.hidden || el.inert)
+                return;
+            if (el.matches(sel) && el.getAttribute('tabindex') !== '-1') {
+                // A custom element that delegates focus is itself the tab stop.
+                out.push(el);
+                return;
+            }
+            visit(el.shadowRoot ?? el);
+        };
+        if (this.panelEl)
+            visit(this.panelEl);
+        return out;
+    }
+    trapTab(ev) {
+        const items = this.getFocusables();
+        if (!items.length) {
+            ev.preventDefault();
+            this.panelEl?.focus();
+            return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const path = ev.composedPath();
+        const active = items.find(i => path.includes(i));
+        const atPanel = path[0] === this.panelEl;
+        if (ev.shiftKey && (atPanel || active === first || !active)) {
+            ev.preventDefault();
+            last.focus();
+        }
+        else if (!ev.shiftKey && (active === last || (!active && !atPanel))) {
+            ev.preventDefault();
+            first.focus();
+        }
+    }
+    componentDidRender() {
+        if (this.open && this.panelEl && !this.focusedIn) {
+            this.focusedIn = true;
+            this.panelEl.focus();
+        }
+        else if (!this.open) {
+            this.focusedIn = false;
+        }
+    }
+    focusedIn = false;
+    close = () => {
+        this.open = false;
+        this.bsClose.emit();
+    };
+    onKeyDown = (ev) => {
+        if (ev.key === 'Escape' && this.open) {
+            ev.stopPropagation();
+            this.close();
+        }
+        else if (ev.key === 'Tab' && this.open) {
+            this.trapTab(ev);
+        }
+    };
+    render() {
+        if (!this.open)
+            return null;
+        return (index.h("div", { class: `bs-side-panel bs-side-panel--${this.side}`, onKeyDown: this.onKeyDown }, this.overlay && index.h("div", { part: "overlay", class: "bs-side-panel__overlay", onClick: this.close }), index.h("div", { part: "panel", class: "bs-side-panel__panel", role: "dialog", "aria-modal": "true", "aria-labelledby": this.headingId, tabindex: "-1", ref: el => (this.panelEl = el) }, index.h("div", { part: "header", class: "bs-side-panel__header" }, index.h("h2", { part: "heading", id: this.headingId, class: "bs-side-panel__heading" }, this.heading), index.h("div", { class: "bs-side-panel__actions" }, index.h("slot", { name: "header-actions" }), index.h("bs-icon-button", { variant: "subtle", ariaLabel: this.closeLabel, onClick: this.close }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { d: "M6 6L18 18M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }))))), index.h("div", { part: "body", class: "bs-side-panel__body" }, index.h("slot", null)), index.h("div", { part: "footer", class: "bs-side-panel__footer" }, index.h("slot", { name: "footer" })))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }],
+        "overlay": [{
+                "onOverlayChange": 0
+            }]
+    }; }
+};
+BsSidePanel.style = bsSidePanelCss();
+
+exports.bs_side_panel = BsSidePanel;

package/dist/cjs/bs-skeleton.cjs.entry.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.js');
+
+const bsSkeletonCss = () => `:host{display:block;--bs-skeleton-bg:var(--bs-color-neutral-container);--bs-skeleton-radius:var(--bs-border-radius-100);--bs-skeleton-width:100%;--bs-skeleton-text-height:1em;--bs-skeleton-rect-height:96px;--bs-skeleton-gap:var(--bs-spacing-100);--bs-skeleton-duration:1.5s}.bs-skeleton{display:flex;flex-direction:column;gap:var(--bs-skeleton-gap)}.bs-skeleton__line{display:block;max-width:100%;width:var(--bs-skeleton-width);background:var(--bs-skeleton-bg);border-radius:var(--bs-skeleton-radius)}.bs-skeleton__line--text{height:var(--bs-skeleton-text-height)}.bs-skeleton__line--rect{height:var(--bs-skeleton-rect-height)}.bs-skeleton__line--circle{height:var(--bs-skeleton-rect-height);width:var(--bs-skeleton-rect-height);border-radius:var(--bs-border-radius-full)}.bs-skeleton__line--short{width:60%}.bs-skeleton--animated .bs-skeleton__line{animation:bs-skeleton-pulse var(--bs-skeleton-duration) ease-in-out infinite}@keyframes bs-skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@media (prefers-reduced-motion: reduce){.bs-skeleton--animated .bs-skeleton__line{animation:none}}`;
+
+const BsSkeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Shape of the placeholder. */
+    variant = 'text';
+    /** Any CSS length (e.g. `200px`, `50%`). Falls back to `--bs-skeleton-width`. For `circle`, if
+     * only one of `width`/`height` is set the other matches it. */
+    width;
+    /** Any CSS length. Falls back to the variant's default height custom property. */
+    height;
+    /** Number of text lines (`variant="text"` only). The last line of a multi-line block is shorter.
+     * Values below 1 are treated as 1. */
+    lines = 1;
+    /** Whether the placeholder pulses. Disabled automatically under `prefers-reduced-motion`. */
+    animated = true;
+    /** When set, the placeholder gets `role="status"` and this as its `aria-label`; otherwise it is
+     * `aria-hidden="true"`. */
+    label;
+    render() {
+        const isText = this.variant === 'text';
+        const count = isText ? Math.max(1, Math.floor(Number(this.lines)) || 1) : 1;
+        let width = this.width;
+        let height = this.height;
+        if (this.variant === 'circle') {
+            width = width ?? height;
+            height = height ?? width;
+        }
+        const style = {};
+        if (width)
+            style.width = width;
+        if (height)
+            style.height = height;
+        const lines = [];
+        for (let i = 0; i < count; i++) {
+            const isShortLast = isText && count > 1 && i === count - 1 && !this.width;
+            lines.push(index.h("span", { part: "line", class: { 'bs-skeleton__line': true, [`bs-skeleton__line--${this.variant}`]: true, 'bs-skeleton__line--short': isShortLast }, style: style }));
+        }
+        const hasLabel = !!this.label;
+        return (index.h("span", { key: 'dc80e4fbb6d9da6387f5bb674595469e7566ce2c', part: "container", class: { 'bs-skeleton': true, 'bs-skeleton--animated': this.animated, [`bs-skeleton--${this.variant}`]: true }, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, lines));
+    }
+};
+BsSkeleton.style = bsSkeletonCss();
+
+exports.bs_skeleton = BsSkeleton;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-tFJjflK5.js');
+var index = require('./index-BYfMRtlW.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}`;
 
@@ -55,6 +55,10 @@ const BsSlider = class {
     /** 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 of the lower-bound thumb / percent field when `ariaLabel` is unset. */
+    startValueLabel = 'Start value';
+    /** Accessible name of the upper-bound thumb / percent field when `ariaLabel` is unset. */
+    endValueLabel = 'End value';
     /**
      * 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
@@ -214,12 +218,12 @@ const BsSlider = class {
         // 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 (index.h("div", { class: "bs-slider__track-wrapper", style: { '--bs-slider-fill-start': `${fillStart}%`, '--bs-slider-fill-end': `${fillEnd}%` } }, index.h("div", { part: "track", class: "bs-slider__track" }, index.h("div", { part: "fill", class: "bs-slider__track-fill" })), index.h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--start", style: { zIndex: startOnTop ? '4' : '3' }, min: this.min, max: this.max, step: this.step, value: start, disabled: this.disabled, "aria-label": this.ariaLabel ?? 'Start value', onInput: this.onStartInputChange, onChange: this.onStartInputChange }), index.h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--end", style: { zIndex: startOnTop ? '3' : '4' }, min: this.min, max: this.max, step: this.step, value: end, disabled: this.disabled, "aria-label": this.ariaLabel ? `${this.ariaLabel} end` : 'End value', onInput: this.onEndInputChange, onChange: this.onEndInputChange }), index.h("span", { class: "bs-slider__tooltip bs-slider__tooltip--start", part: "tooltip", style: { left: `${fillStart}%` }, "aria-hidden": "true" }, Math.round(this.percent(start)), "%"), index.h("span", { class: "bs-slider__tooltip bs-slider__tooltip--end", part: "tooltip", style: { left: `${fillEnd}%` }, "aria-hidden": "true" }, Math.round(this.percent(end)), "%")));
+        return (index.h("div", { class: "bs-slider__track-wrapper", style: { '--bs-slider-fill-start': `${fillStart}%`, '--bs-slider-fill-end': `${fillEnd}%` } }, index.h("div", { part: "track", class: "bs-slider__track" }, index.h("div", { part: "fill", class: "bs-slider__track-fill" })), index.h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--start", style: { zIndex: startOnTop ? '4' : '3' }, min: this.min, max: this.max, step: this.step, value: start, disabled: this.disabled, "aria-label": this.ariaLabel ?? this.startValueLabel, onInput: this.onStartInputChange, onChange: this.onStartInputChange }), index.h("input", { type: "range", part: "control", class: "bs-slider__input bs-slider__input--end", style: { zIndex: startOnTop ? '3' : '4' }, min: this.min, max: this.max, step: this.step, value: end, disabled: this.disabled, "aria-label": this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel, onInput: this.onEndInputChange, onChange: this.onEndInputChange }), index.h("span", { class: "bs-slider__tooltip bs-slider__tooltip--start", part: "tooltip", style: { left: `${fillStart}%` }, "aria-hidden": "true" }, Math.round(this.percent(start)), "%"), index.h("span", { class: "bs-slider__tooltip bs-slider__tooltip--end", part: "tooltip", style: { left: `${fillEnd}%` }, "aria-hidden": "true" }, Math.round(this.percent(end)), "%")));
     }
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (index.h("div", { key: '7fb6a534e41e91efe00bcba839641550398eed13', class: rootClasses }, this.showLabel && (index.h("div", { key: '5892936540c9e4f74dfadd3ad9088ffd2c04fef5', class: "bs-slider__header" }, index.h("span", { key: '220c0db8a2cc5f5f29cf99830fa0b4d30ec90d32', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (index.h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), index.h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), index.h("div", { key: '67830218b3aa9d927ab87c4c6ca419b3a24ca0af', class: "bs-slider__row" }, this.showLabel && (index.h("span", { key: 'b2569e64400853a503d1566825500f8d10fe0318', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (index.h("span", { key: '2b5ac8ff8dd48f4db7a0d4db3698bb64a4f9277a', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (index.h("div", { key: '24883c8b7d1f00df7a700de4e296ecdfc293bf47', class: rootClasses }, this.showLabel && (index.h("div", { key: 'd41690990898df937f99a5285f2f407b550d881c', class: "bs-slider__header" }, index.h("span", { key: '2519779a06f6bb9911be0bdb4539b36c3c16f725', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (index.h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), index.h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), index.h("div", { key: 'd0525503f51fc1dc3f9753fce131e008db7ded54', class: "bs-slider__row" }, this.showLabel && (index.h("span", { key: '98ecbdd3462da354a2fb7c719b8eb48c81a0c809', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (index.h("span", { key: '3e1690be98b45b3f595991d5cdde35f0abfe0da3', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-tFJjflK5.js');
+var index = require('./index-BYfMRtlW.js');
 
 const bsSnackbarCss = () => `:host{display:inline-flex;--bs-snackbar-radius:var(--bs-border-radius-100);--bs-snackbar-shadow:var(--bs-shadow-md);--bs-snackbar-gap:var(--bs-spacing-100);--bs-snackbar-content-padding-y:var(--bs-spacing-200);--bs-snackbar-content-padding-x:var(--bs-spacing-200);--bs-snackbar-content-gap:var(--bs-spacing-150);--bs-snackbar-icon-size:24px;--bs-snackbar-font-size:var(--bs-font-size-md);--bs-snackbar-line-height:var(--bs-line-height-body-md);--bs-snackbar-actions-padding-y:var(--bs-spacing-50);--bs-snackbar-actions-padding-x:var(--bs-spacing-100);--bs-snackbar-actions-gap:var(--bs-spacing-50);--bs-snackbar-surface-default:var(--bs-snackbar-bg-default);--bs-snackbar-color-default:var(--bs-snackbar-text-default);--bs-snackbar-surface-info:var(--bs-color-info-container);--bs-snackbar-text-info:var(--bs-text-info);--bs-snackbar-surface-warning:var(--bs-color-warning-container);--bs-snackbar-text-warning:var(--bs-text-warning);--bs-snackbar-surface-success:var(--bs-color-success-container);--bs-snackbar-text-success:var(--bs-text-success);--bs-snackbar-surface-error:var(--bs-color-error-container);--bs-snackbar-text-error:var(--bs-text-error);--bs-snackbar-spinner-track:var(--bs-neutral-200)}.bs-snackbar{display:flex;align-items:center;gap:var(--bs-snackbar-gap);border-radius:var(--bs-snackbar-radius);box-shadow:var(--bs-snackbar-shadow);font-family:inherit}.bs-snackbar--default{background:var(--bs-snackbar-surface-default);color:var(--bs-snackbar-color-default)}.bs-snackbar--info{background:var(--bs-snackbar-surface-info);color:var(--bs-snackbar-text-info)}.bs-snackbar--warning{background:var(--bs-snackbar-surface-warning);color:var(--bs-snackbar-text-warning)}.bs-snackbar--success{background:var(--bs-snackbar-surface-success);color:var(--bs-snackbar-text-success)}.bs-snackbar--error{background:var(--bs-snackbar-surface-error);color:var(--bs-snackbar-text-error)}.bs-snackbar__content{display:flex;align-items:center;gap:var(--bs-snackbar-content-gap);flex:1 1 auto;min-width:0;padding:var(--bs-snackbar-content-padding-y) 0 var(--bs-snackbar-content-padding-y) var(--bs-snackbar-content-padding-x)}.bs-snackbar__icon{display:flex;align-items:center;justify-content:center;width:var(--bs-snackbar-icon-size);height:var(--bs-snackbar-icon-size);flex-shrink:0;color:inherit}.bs-snackbar__icon svg{width:var(--bs-snackbar-icon-size);height:var(--bs-snackbar-icon-size)}.bs-snackbar__spinner{display:inline-block;box-sizing:border-box;width:24px;height:24px;border:2px solid var(--bs-snackbar-spinner-track);border-top-color:currentColor;border-radius:50%;animation:bs-snackbar-spin 0.8s linear infinite}@keyframes bs-snackbar-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.bs-snackbar__spinner{animation:none}}.bs-snackbar__message{flex:1 1 auto;min-width:0;font-size:var(--bs-snackbar-font-size);line-height:calc(var(--bs-snackbar-line-height) * 1px)}.bs-snackbar__actions{display:flex;align-items:center;align-self:stretch;gap:var(--bs-snackbar-actions-gap);flex-shrink:0;padding:var(--bs-snackbar-actions-padding-y) var(--bs-snackbar-actions-padding-x) var(--bs-snackbar-actions-padding-y) 0}`;
 
@@ -47,7 +47,7 @@ const BsSnackbar = class {
         this.bsDismiss.emit();
     };
     render() {
-        return (index.h("div", { key: '291914fd21d4d8634f49aad410f8cda212c7d07c', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, index.h("div", { key: '5d50b75478197ad433c96d66ed9de3fd22360b56', class: "bs-snackbar__content" }, index.h("span", { key: 'd625eb5d139d7811a28d781b8eb4fffa370debab', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? index.h("span", { class: "bs-snackbar__spinner" }) : index.h(CheckCircleIcon, null)), index.h("span", { key: '6c7666f8cd8d3bddf44d35a7d8e9d9c645def13f', part: "message", class: "bs-snackbar__message" }, index.h("slot", { key: '96e8eb40bb7a6c9292d948ac47f6e630dc843bb5' }))), index.h("div", { key: '60380f06bc10c964155c7cc97eb036a84506a103', class: "bs-snackbar__actions" }, this.actionLabel && (index.h("bs-button", { key: '843054ee154c565034ddaf7b000419d7ecc4bf63', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (index.h("bs-icon-button", { key: '383ea23e7e5f7681651b7a6394cb39b453e5f8cb', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, index.h(CloseIcon, { key: '6ec39615ed1e82f3bb6e45a5917fa6a35166d3f1' }))))));
+        return (index.h("div", { key: '869f548001524a78fa66a0b295c177a43160531e', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, index.h("div", { key: 'eca8a98a1ae3dff7ecadd7e370bd59c855a56025', class: "bs-snackbar__content" }, index.h("span", { key: 'ffba923b45ff59cd8501f7d3da9bd5260113de83', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? index.h("span", { class: "bs-snackbar__spinner" }) : index.h(CheckCircleIcon, null)), index.h("span", { key: '803f3247af157e79e2e2c2822977ae55cc058a98', part: "message", class: "bs-snackbar__message" }, index.h("slot", { key: 'fd66b14457361cca63be3a152003a098b56aa43e' }))), index.h("div", { key: 'ba808bf880cfb2f0c32a70f53ff4e0b2df05eb17', class: "bs-snackbar__actions" }, this.actionLabel && (index.h("bs-button", { key: '4e7ca40abdfd155cd064d153fee866e87ad64e26', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (index.h("bs-icon-button", { key: '89ba5909db07c9e910136e5723bb5df25d0a4b51', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, index.h(CloseIcon, { key: '6e3f8d010cf3f234d0e199b3a5d96c8200b25bcc' }))))));
     }
 };
 const CheckCircleIcon = () => (index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M8.25 12.75L10.5 15L15.75 9.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.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/cjs/bs-source-link.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-tFJjflK5.js');
+var index = require('./index-BYfMRtlW.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:start;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-inline-start: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)}`;
 
@@ -26,8 +26,8 @@ const BsSourceLink = class {
     };
     render() {
         const inner = [
-            index.h("span", { key: '4f7296f4d35b7779c91e791a7e674fff3f963239', class: "bs-source-link__left" }, index.h("span", { key: 'e8a03fb6ee46d64d8d9b2e86a39d15d36164a23d', class: "bs-source-link__filename-row" }, index.h("span", { key: '16ed535a5ab56b54edab2a39d02659c9be9cfc69', part: "icon", class: "bs-source-link__icon" }, index.h("slot", { key: '56661ab02c9628fd407f364c95db3832d9b86fdd', name: "icon" }, index.h(FileTextIcon, { key: 'c7a6f19c9dfee1c8b1e4ef24334c541fd8c88cbd' }))), index.h("p", { key: '5dac08dcde183f2a714c04cc0e700c4b2778bf7e', part: "filename", class: "bs-source-link__filename" }, this.fileName)), index.h("span", { key: 'bc4cd84ea0d990b5c456d7962bce8881cdaaf1b7', class: "bs-source-link__meta" }, this.sourceName && (index.h("span", { key: '94efb5a9ff386f86546ce56dbe2a8b386a342d16', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && index.h("span", { key: 'd084d96de4afe4522fc9ef28c6f870fa49ca68bc', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (index.h("span", { key: 'e2b976a66185a53dbd682081399ed946e1bbb318', part: "version", class: "bs-source-link__version" }, this.version)))),
-            index.h("span", { key: '23f361d9af84c4804e88d7f019623e2223fe7a33', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, index.h(ArrowUpRightIcon, { key: '0316db74234f0c66afc0372d5299b8fd19691163' })),
+            index.h("span", { key: '37082ba8b750f01d04cec4e437fc3d5481768f27', class: "bs-source-link__left" }, index.h("span", { key: '10f49ce451047e0b2656d0ec724a5841b112046a', class: "bs-source-link__filename-row" }, index.h("span", { key: '63b4c0dcb376053f68a5d62c6232a205451f1826', part: "icon", class: "bs-source-link__icon" }, index.h("slot", { key: '6df8546c36387bd130b68cda5f8aa5e3c35fd388', name: "icon" }, index.h(FileTextIcon, { key: '8ba49429459a63d05324e31b6994fa5f3b5c6534' }))), index.h("p", { key: '0b6d7826f62526c903048a25610bfed99381bce0', part: "filename", class: "bs-source-link__filename" }, this.fileName)), index.h("span", { key: 'f71e6440d5fe06486d5a10493ab5c7b17e2cfd78', class: "bs-source-link__meta" }, this.sourceName && (index.h("span", { key: 'a4d97d5fd1be65d17d9dca52d30eaa9d1a022f0e', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && index.h("span", { key: '809b5e51e436270dd304db280f98e164f2722eda', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (index.h("span", { key: '5e30c00db6cf2d659c62a6fc863a7c6fd8111d12', part: "version", class: "bs-source-link__version" }, this.version)))),
+            index.h("span", { key: '89dcb19eec419f95ed277d729925296ecfe0e4b1', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, index.h(ArrowUpRightIcon, { key: '8d2c8521747a1f3d7cd8b6bff5385ee04b2a7923' })),
         ];
         return this.href ? (index.h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (index.h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
     }

package/dist/cjs/bs-spinner.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.js');
+
+const bsSpinnerCss = () => `:host{display:inline-block;vertical-align:middle;--bs-spinner-size-xs:var(--bs-spacing-200);--bs-spinner-size-sm:var(--bs-spacing-250);--bs-spinner-size-md:var(--bs-spacing-300);--bs-spinner-color:currentColor;--bs-spinner-track-opacity:0.25;--bs-spinner-duration:0.8s}.bs-spinner{display:inline-flex;width:1em;height:1em;color:inherit}.bs-spinner--xs{width:var(--bs-spinner-size-xs);height:var(--bs-spinner-size-xs)}.bs-spinner--sm{width:var(--bs-spinner-size-sm);height:var(--bs-spinner-size-sm)}.bs-spinner--md{width:var(--bs-spinner-size-md);height:var(--bs-spinner-size-md)}.bs-spinner__svg{width:100%;height:100%;animation:bs-spinner-spin var(--bs-spinner-duration) linear infinite}.bs-spinner__track{stroke:var(--bs-spinner-color);opacity:var(--bs-spinner-track-opacity)}.bs-spinner__arc{stroke:var(--bs-spinner-color)}@keyframes bs-spinner-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.bs-spinner__svg{animation-duration:calc(var(--bs-spinner-duration) * 4)}}`;
+
+const BsSpinner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** `xs`/`sm`/`md` use fixed token sizes; `inherit` (default) is `1em`, following the font size. */
+    size = 'inherit';
+    /** Accessible name (e.g. "Loading"). When set, the spinner gets `role="status"` and this
+     * `aria-label`; when omitted it is `aria-hidden="true"` (use it next to visible text that already
+     * says what is happening). */
+    label;
+    render() {
+        const hasLabel = !!this.label;
+        return (index.h("span", { key: '31531b80418f912ded9ffabafc1ad36b48e1c4e1', part: "container", class: `bs-spinner bs-spinner--${this.size}`, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, index.h("svg", { key: '7c820016daa154c8e8486a8d5a60505a39d37bde', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, index.h("circle", { key: '60b8dce8ac87753a2a9d3c3521ce387bcf6e9491', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), index.h("path", { key: '3548aee65c89828fed57465a95b72e15c50807f4', class: "bs-spinner__arc", d: "M12 3a9 9 0 0 1 9 9", "stroke-width": "3", "stroke-linecap": "round" }))));
+    }
+};
+BsSpinner.style = bsSpinnerCss();
+
+exports.bs_spinner = BsSpinner;

package/dist/cjs/bs-split-pane.cjs.entry.js

@@ -0,0 +1,193 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.js');
+
+const bsSplitPaneCss = () => `:host{display:block;height:100%;min-height:0;--bs-split-pane-radius:var(--bs-border-radius-100);--bs-split-pane-bg:var(--bs-surface-base);--bs-split-pane-color:var(--bs-text-default);--bs-split-pane-first-size:333px;--bs-split-pane-collapsed-size:106px;--bs-split-pane-min-size:96px;--bs-split-pane-divider-size:var(--bs-spacing-75);--bs-split-pane-divider-bg:var(--bs-surface-container);--bs-split-pane-divider-thumb:var(--bs-border-neutral-container);--bs-split-pane-divider-thumb-active:var(--bs-border-neutral-hover);--bs-split-pane-divider-thumb-length:250px;--bs-split-pane-border:var(--bs-border-neutral-container);--bs-split-pane-focus-ring:var(--bs-border-neutral-focus)}.bs-split-pane{box-sizing:border-box;display:flex;width:100%;height:100%;overflow:clip;border-radius:var(--bs-split-pane-radius);background:var(--bs-split-pane-bg);color:var(--bs-split-pane-color)}.bs-split-pane--vertical{flex-direction:column}.bs-split-pane__pane{box-sizing:border-box;min-width:0;min-height:0;overflow:auto;background:var(--bs-split-pane-bg)}.bs-split-pane--horizontal>.bs-split-pane__pane{min-width:min(var(--bs-split-pane-min-size), 100%)}.bs-split-pane--vertical>.bs-split-pane__pane{min-height:min(var(--bs-split-pane-min-size), 100%)}.bs-split-pane__divider{position:relative;flex:0 0 var(--bs-split-pane-divider-size);display:flex;background:var(--bs-split-pane-divider-bg);touch-action:none;outline:none}.bs-split-pane--horizontal>.bs-split-pane__divider{cursor:col-resize;flex-direction:column}.bs-split-pane--vertical>.bs-split-pane__divider{cursor:row-resize;flex-direction:row}.bs-split-pane__divider--static{cursor:default;pointer-events:none}.bs-split-pane__thumb{display:block;border-radius:var(--bs-border-radius-full);background:var(--bs-split-pane-divider-thumb);transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-split-pane--horizontal>.bs-split-pane__divider>.bs-split-pane__thumb{width:100%;height:min(var(--bs-split-pane-divider-thumb-length), 100%)}.bs-split-pane--vertical>.bs-split-pane__divider>.bs-split-pane__thumb{height:100%;width:min(var(--bs-split-pane-divider-thumb-length), 100%)}.bs-split-pane__divider:hover>.bs-split-pane__thumb,.bs-split-pane__divider--active>.bs-split-pane__thumb,.bs-split-pane__divider:focus-visible>.bs-split-pane__thumb{background:var(--bs-split-pane-divider-thumb-active)}.bs-split-pane__divider:focus-visible{outline:2px solid var(--bs-split-pane-focus-ring);outline-offset:0}@media (prefers-reduced-motion: reduce){.bs-split-pane__thumb{transition:none}}`;
+
+const MAX_PANES = 3;
+const DEFAULT_MIN_SIZE = 96;
+const BsSplitPane = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsResize = index.createEvent(this, "bsResize");
+        this.bsCollapsedChange = index.createEvent(this, "bsCollapsedChange");
+    }
+    get el() { return index.getElement(this); }
+    /** `horizontal` = panes side by side, `vertical` = panes stacked. */
+    orientation = 'horizontal';
+    /** Collapses the first pane to a narrow rail. Mutable: the Enter key on the first divider toggles it. */
+    collapsed = false;
+    /** Whether the dividers can be dragged / operated by keyboard. `false` keeps them as visual separators. */
+    resizable = true;
+    /** Accessible name of each divider. */
+    dividerLabel = 'Resize panes';
+    /** Pixels moved per arrow-key press (Shift multiplies by 4). */
+    step = 16;
+    /** Fires after a resize (pointer release or key press) with the pixel size of every pane except the last. */
+    bsResize;
+    /** Fires when `collapsed` changes through user interaction. */
+    bsCollapsedChange;
+    paneCount = 2;
+    sizes = [];
+    draggingIndex = -1;
+    observer;
+    dragStart;
+    /** Toggles `collapsed` and emits `bsCollapsedChange`. */
+    async toggleCollapsed() {
+        this.collapsed = !this.collapsed;
+        this.bsCollapsedChange.emit(this.collapsed);
+    }
+    componentWillLoad() {
+        this.countPanes();
+    }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => this.countPanes());
+        this.observer.observe(this.el, { childList: true, attributes: true, attributeFilter: ['slot'], subtree: false });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    countPanes() {
+        let count = 1;
+        for (let i = 1; i <= MAX_PANES; i++) {
+            if (this.el.querySelector(`:scope > [slot="pane-${i}"]`))
+                count = i;
+        }
+        this.paneCount = Math.max(count, 1);
+    }
+    isRtl() {
+        return this.orientation === 'horizontal' && getComputedStyle(this.el).direction === 'rtl';
+    }
+    axisSize(pane) {
+        const rect = pane.getBoundingClientRect();
+        return this.orientation === 'horizontal' ? rect.width : rect.height;
+    }
+    minSize() {
+        const raw = parseFloat(getComputedStyle(this.el).getPropertyValue('--bs-split-pane-min-size'));
+        return Number.isFinite(raw) ? raw : DEFAULT_MIN_SIZE;
+    }
+    /** Largest size pane `index` may take: leave `minSize` for each pane after it, and the dividers. */
+    maxSize(index) {
+        const container = this.el.shadowRoot.querySelector('.bs-split-pane');
+        const total = this.axisSize(container);
+        const dividers = Array.from(container.querySelectorAll('.bs-split-pane__divider'));
+        const dividerTotal = dividers.reduce((sum, d) => sum + this.axisSize(d), 0);
+        const before = Array.from(container.querySelectorAll('.bs-split-pane__pane'))
+            .slice(0, index)
+            .reduce((sum, p) => sum + this.axisSize(p), 0);
+        const after = (this.paneCount - 1 - index) * this.minSize();
+        return Math.max(this.minSize(), total - dividerTotal - before - after);
+    }
+    paneEl(index) {
+        return this.el.shadowRoot.querySelectorAll('.bs-split-pane__pane')[index];
+    }
+    setSize(index, value) {
+        const clamped = Math.min(Math.max(value, this.minSize()), this.maxSize(index));
+        const next = this.sizes.slice();
+        next[index] = clamped;
+        this.sizes = next;
+    }
+    emitResize() {
+        const sizes = [];
+        // Prefer the size just committed to state: the DOM hasn't re-rendered yet when this runs.
+        for (let i = 0; i < this.paneCount - 1; i++)
+            sizes.push(Math.round(this.sizes[i] ?? this.axisSize(this.paneEl(i))));
+        this.bsResize.emit(sizes);
+    }
+    onPointerDown = (index) => (ev) => {
+        if (!this.resizable || (index === 0 && this.collapsed))
+            return;
+        ev.preventDefault();
+        ev.currentTarget.setPointerCapture(ev.pointerId);
+        this.dragStart = {
+            pointer: this.orientation === 'horizontal' ? ev.clientX : ev.clientY,
+            size: this.axisSize(this.paneEl(index)),
+            index,
+        };
+        this.draggingIndex = index;
+    };
+    onPointerMove = (ev) => {
+        if (!this.dragStart)
+            return;
+        const pointer = this.orientation === 'horizontal' ? ev.clientX : ev.clientY;
+        const delta = (pointer - this.dragStart.pointer) * (this.isRtl() ? -1 : 1);
+        this.setSize(this.dragStart.index, this.dragStart.size + delta);
+    };
+    onPointerUp = (ev) => {
+        if (!this.dragStart)
+            return;
+        ev.currentTarget.releasePointerCapture?.(ev.pointerId);
+        this.dragStart = undefined;
+        this.draggingIndex = -1;
+        this.emitResize();
+    };
+    onKeyDown = (index) => (ev) => {
+        if (!this.resizable)
+            return;
+        const horizontal = this.orientation === 'horizontal';
+        const grow = horizontal ? (this.isRtl() ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';
+        const shrink = horizontal ? (this.isRtl() ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';
+        const amount = this.step * (ev.shiftKey ? 4 : 1);
+        const current = this.axisSize(this.paneEl(index));
+        let handled = true;
+        if (ev.key === 'Enter' && index === 0) {
+            void this.toggleCollapsed();
+        }
+        else if (this.collapsed && index === 0) {
+            handled = false;
+        }
+        else if (ev.key === grow) {
+            this.setSize(index, current + amount);
+        }
+        else if (ev.key === shrink) {
+            this.setSize(index, current - amount);
+        }
+        else if (ev.key === 'Home') {
+            this.setSize(index, this.minSize());
+        }
+        else if (ev.key === 'End') {
+            this.setSize(index, this.maxSize(index));
+        }
+        else {
+            handled = false;
+        }
+        if (!handled)
+            return;
+        ev.preventDefault();
+        this.emitResize();
+    };
+    paneStyle(index) {
+        const last = index === this.paneCount - 1;
+        if (index === 0 && this.collapsed && this.paneCount > 1) {
+            return { flex: '0 0 var(--bs-split-pane-collapsed-size)' };
+        }
+        const size = this.sizes[index];
+        if (size !== undefined && !last)
+            return { flex: `0 0 ${size}px` };
+        if (index === 0 && !last)
+            return { flex: '0 0 var(--bs-split-pane-first-size)' };
+        return { flex: '1 1 0' };
+    }
+    percentFor(index) {
+        const container = this.el.shadowRoot?.querySelector('.bs-split-pane');
+        const pane = this.el.shadowRoot?.querySelectorAll('.bs-split-pane__pane')[index];
+        if (!container || !pane)
+            return 0;
+        const total = this.axisSize(container);
+        return total ? Math.round((this.axisSize(pane) / total) * 100) : 0;
+    }
+    render() {
+        const dividerOrientation = this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+        const nodes = [];
+        for (let i = 0; i < this.paneCount; i++) {
+            nodes.push(index.h("div", { part: `pane pane-${i + 1}`, class: `bs-split-pane__pane bs-split-pane__pane--${i + 1}`, style: this.paneStyle(i) }, index.h("slot", { name: `pane-${i + 1}` })));
+            if (i < this.paneCount - 1) {
+                nodes.push(index.h("div", { part: "divider", class: { 'bs-split-pane__divider': true, 'bs-split-pane__divider--active': this.draggingIndex === i, 'bs-split-pane__divider--static': !this.resizable }, role: "separator", "aria-orientation": dividerOrientation, "aria-label": this.dividerLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": this.percentFor(i), tabindex: this.resizable ? 0 : undefined, onPointerDown: this.onPointerDown(i), onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerUp, onKeyDown: this.onKeyDown(i) }, index.h("span", { part: "divider-thumb", class: "bs-split-pane__thumb" })));
+            }
+        }
+        return (index.h("div", { key: '8ef79e5ccc0ac2e8d4204f82b3507bef387e95cc', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
+    }
+};
+BsSplitPane.style = bsSplitPaneCss();
+
+exports.bs_split_pane = BsSplitPane;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-tFJjflK5.js');
+var index = require('./index-BYfMRtlW.js');
 
 const bsStepperStepCss = () => `:host{display:flex;font-family:inherit;font-size:var(--bs-stepper-step-font-size);line-height:calc(var(--bs-stepper-step-line-height) * 1px);--bs-stepper-step-gap:var(--bs-spacing-100);--bs-stepper-step-icon-size:24px;--bs-stepper-step-icon-border-width:1.5px;--bs-stepper-step-connector-color:var(--bs-border-default);--bs-stepper-step-connector-thickness:2px;--bs-stepper-step-icon-border-enabled:var(--bs-border-default);--bs-stepper-step-icon-border-current:var(--bs-color-primary-default);--bs-stepper-step-icon-dot-current:var(--bs-color-primary-default);--bs-stepper-step-icon-bg-done:var(--bs-color-primary-default);--bs-stepper-step-icon-color-done:var(--bs-text-on-action);--bs-stepper-step-icon-border-error:var(--bs-border-error);--bs-stepper-step-icon-color-error:var(--bs-border-error);--bs-stepper-step-icon-border-disabled:var(--bs-border-neutral-disabled);--bs-stepper-step-text-enabled:var(--bs-text-muted);--bs-stepper-step-text-active:var(--bs-text-default);--bs-stepper-step-text-disabled:var(--bs-text-on-disabled);--bs-stepper-step-font-size:var(--bs-font-size-md);--bs-stepper-step-line-height:var(--bs-line-height-body-md);--bs-stepper-step-name-font-weight:var(--bs-font-weight-semibold);--bs-stepper-step-description-font-weight:var(--bs-font-weight-regular)}:host(.bs-stepper-step--horizontal){flex:1 1 0;flex-direction:column}:host(.bs-stepper-step--vertical){width:100%;flex-direction:row;}.bs-stepper-step__top{display:flex;align-items:center}:host(.bs-stepper-step--horizontal) .bs-stepper-step__top{flex-direction:row}:host(.bs-stepper-step--vertical) .bs-stepper-step__top{flex-direction:column}.bs-stepper-step__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bs-stepper-step-icon-size);height:var(--bs-stepper-step-icon-size);border-radius:50%;box-sizing:border-box}.bs-stepper-step__icon svg{width:16px;height:16px}.bs-stepper-step__icon--enabled{border:var(--bs-stepper-step-icon-border-width) solid var(--bs-stepper-step-icon-border-enabled)}.bs-stepper-step__icon--current{border:var(--bs-stepper-step-icon-border-width) solid var(--bs-stepper-step-icon-border-current)}.bs-stepper-step__icon-dot{width:16px;height:16px;border-radius:50%;background:var(--bs-stepper-step-icon-dot-current)}.bs-stepper-step__icon--done{background:var(--bs-stepper-step-icon-bg-done);color:var(--bs-stepper-step-icon-color-done)}.bs-stepper-step__icon--error{border:var(--bs-stepper-step-icon-border-width) solid var(--bs-stepper-step-icon-border-error);color:var(--bs-stepper-step-icon-color-error)}.bs-stepper-step__icon--disabled{border:var(--bs-stepper-step-icon-border-width) solid var(--bs-stepper-step-icon-border-disabled)}.bs-stepper-step__connector{display:flex;align-items:center;justify-content:center}:host(.bs-stepper-step--horizontal) .bs-stepper-step__connector{flex:1 1 auto;margin-inline-start:var(--bs-stepper-step-gap)}:host(.bs-stepper-step--vertical) .bs-stepper-step__connector{flex:1 1 auto;flex-direction:column;align-items:center;width:var(--bs-stepper-step-icon-size);margin:var(--bs-stepper-step-gap) 0;min-height:var(--bs-stepper-step-icon-size)}.bs-stepper-step__connector-line{display:block;border-radius:calc(var(--bs-stepper-step-connector-thickness) / 2);background:var(--bs-stepper-step-connector-color)}:host(.bs-stepper-step--horizontal) .bs-stepper-step__connector-line{width:100%;height:var(--bs-stepper-step-connector-thickness)}:host(.bs-stepper-step--vertical) .bs-stepper-step__connector-line{flex:1 1 auto;width:var(--bs-stepper-step-connector-thickness)}:host(:last-child) .bs-stepper-step__connector{visibility:hidden}.bs-stepper-step__label{display:flex;flex-direction:column}:host(.bs-stepper-step--horizontal) .bs-stepper-step__label{margin-top:var(--bs-stepper-step-gap);width:var(--bs-stepper-step-icon-size);align-self:flex-start;align-items:center;text-align:center}:host(.bs-stepper-step--vertical) .bs-stepper-step__label{margin-inline-start:var(--bs-stepper-step-gap);text-align:start}.bs-stepper-step__name{font-weight:var(--bs-stepper-step-name-font-weight);white-space:nowrap}.bs-stepper-step__description{font-weight:var(--bs-stepper-step-description-font-weight);white-space:nowrap}.bs-stepper-step__label--enabled .bs-stepper-step__name,.bs-stepper-step__label--enabled .bs-stepper-step__description,.bs-stepper-step__label--error .bs-stepper-step__name,.bs-stepper-step__label--error .bs-stepper-step__description{color:var(--bs-stepper-step-text-enabled)}.bs-stepper-step__label--current .bs-stepper-step__name,.bs-stepper-step__label--current .bs-stepper-step__description,.bs-stepper-step__label--done .bs-stepper-step__name,.bs-stepper-step__label--done .bs-stepper-step__description{color:var(--bs-stepper-step-text-active)}.bs-stepper-step__label--disabled .bs-stepper-step__name,.bs-stepper-step__label--disabled .bs-stepper-step__description{color:var(--bs-stepper-step-text-disabled)}`;
 
@@ -34,7 +34,7 @@ const BsStepperStep = class {
     }
     render() {
         const state = this.state;
-        return (index.h(index.Host, { key: '07f068e7e9d54124e72e6f3c395532b1df28bf4d', role: "listitem", class: `bs-stepper-step--${this.direction}` }, index.h("div", { key: 'aa2c8cf568f8823be576b7cd8453db51dbc28ca3', class: "bs-stepper-step__top" }, index.h("span", { key: '55053a617f92b0f300987fad2f171d0c5a00cb48', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && index.h("span", { key: '83f5206192f6e3363ee37c1819e2c7584d2b4395', class: "bs-stepper-step__icon-dot" }), state === 'done' && index.h(CheckIcon, { key: '19960813f546d3bed470d486d64cda1f4f9ae05d' }), state === 'error' && index.h(ExclamationIcon, { key: '5dff15dc5e8183b6ebe75592dddd0710fe6318f3' })), index.h("span", { key: 'aa91c2544a472e836d79361453eccc6cc3c0ded2', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, index.h("span", { key: 'b4db85cdeed8fcd895ce5fe38fa98aaf9e40401d', class: "bs-stepper-step__connector-line" }))), index.h("span", { key: 'c4dcd488f9c177eab29d8d9cedee9ff139844049', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, index.h("span", { key: 'd486ade27072093c9bf90824e89b24ab4ff5b8a5', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (index.h("span", { key: 'eae26f6a683805ebc8eeb780df82060cf3ec699f', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (index.h(index.Host, { key: 'f51401da1a777c73fa70faa5a9f05f0234f517f1', role: "listitem", class: `bs-stepper-step--${this.direction}` }, index.h("div", { key: '30a1c060295b4addfc53ab67757661c7750ca781', class: "bs-stepper-step__top" }, index.h("span", { key: 'c4acc0a90fe006ed779072025c0aefc30a96c43f', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && index.h("span", { key: '2a03c4c0b2e07a3879b7dbbcfc2022c6d753072d', class: "bs-stepper-step__icon-dot" }), state === 'done' && index.h(CheckIcon, { key: 'a6492fbd22bc9659fa7e71340bab908eee807dbb' }), state === 'error' && index.h(ExclamationIcon, { key: '5390c086f6c8314040862b5a4f680685d67a1f86' })), index.h("span", { key: '535e553bca360fe96538afb4baf0063e18b88fd8', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, index.h("span", { key: 'a04809fbdb2a47a129cf1a499bf0f9956d425e95', class: "bs-stepper-step__connector-line" }))), index.h("span", { key: 'ff4b573a3f0b1bac78cabbc68d58d4ecfe330fe9', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, index.h("span", { key: '2cecc129a85da61efaa8c670754feca4a56fe717', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (index.h("span", { key: '5c06546a24247733d7df9c99c753074809272feb', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
 };
 const CheckIcon = () => (index.h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M2.5 9L6 12.5L14 4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-tFJjflK5.js');
+var index = require('./index-BYfMRtlW.js');
 
 const bsStepperCss = () => `:host{display:flex;width:100%;--bs-stepper-edge-padding:var(--bs-spacing-800)}:host([direction='vertical']){flex-direction:column}:host(:not([direction='vertical'])){flex-direction:row;align-items:flex-start;padding:0 var(--bs-stepper-edge-padding)}`;
 
@@ -44,7 +44,7 @@ const BsStepper = class {
     }
     render() {
         // role="list" so each bs-stepper-step's role="listitem" has the required parent.
-        return (index.h(index.Host, { key: '8a3c0b5ce7ffd6dfc34b0c5ae602ef4bca42e33c', role: "list" }, index.h("slot", { key: 'fcc69d5e89dfa5f1ae7aa2ae38667a7826fee89d', onSlotchange: this.onSlotChange })));
+        return (index.h(index.Host, { key: '7956314c41e9add72583aa8e2bd7271e6cf1068b', role: "list" }, index.h("slot", { key: '0ace9928ce7f573d9202a11e489a50e976d0e351', onSlotchange: this.onSlotChange })));
     }
     static get watchers() { return {
         "currentStep": [{