@brandsync/wc 0.0.12 → 1.0.0

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

@@ -0,0 +1,42 @@
+import { r as registerInstance, h, H as Host } from './index-Do3l4of3.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-left: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-left:var(--bs-stepper-step-gap);text-align:left}.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)}`;
+
+const BsStepperStep = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** This step's name/title. */
+    name = '';
+    /** Optional supporting text below the name. Only rendered when `showDescription` (propagated
+     * from the parent `<bs-stepper>`) is also true. */
+    description;
+    /** Shows the error treatment for this step, regardless of its `computedState`. */
+    error = false;
+    /** Shows the disabled treatment for this step, regardless of its `computedState`. Takes priority
+     * over `error` if both are somehow set. */
+    disabled = false;
+    /** Set automatically by the parent `<bs-stepper>` from this step's position relative to its
+     * `currentStep` -- see the class doc above. Can be set directly for a standalone step. */
+    computedState = 'enabled';
+    /** Set automatically by the parent `<bs-stepper>`, propagated to every slotted step. */
+    direction = 'horizontal';
+    /** Set automatically by the parent `<bs-stepper>`, propagated to every slotted step. */
+    showDescription = true;
+    get state() {
+        if (this.disabled)
+            return 'disabled';
+        if (this.error)
+            return 'error';
+        return this.computedState;
+    }
+    render() {
+        const state = this.state;
+        return (h(Host, { key: '434e05ca150a24b2c9d5e3017198b1c5938460ba', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'b9c924f3f834a6c4bb45f6f2b5a655c48f5439fb', class: "bs-stepper-step__top" }, h("span", { key: '89b61162775733afef65c862e60b66e3eb732382', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '7633c0612a65bbbc48fee9da55be642c22e8cc8f', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '608682cbba1ad1f3bff467b1139cbd76d703ac2f' }), state === 'error' && h(ExclamationIcon, { key: '51123ab8c6a73faad6905c52065af8b59325a819' })), h("span", { key: '93d157b4df08963ab5febcf0cf855575cc1ed53f', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '1af364efa632e94cf6e51a3e95f94b82dd1a51fd', class: "bs-stepper-step__connector-line" }))), h("span", { key: '3fb8c121d7180d82000ce516955e2597a43cefff', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '07c716576b437a6e936be7746fa5db130bdf5e70', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '8240af6eca62f42101c3101e653d6e4b3c1470da', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+    }
+};
+const CheckIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M2.5 9L6 12.5L14 4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const ExclamationIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8 3V9.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "12.5", r: "1", fill: "currentColor" })));
+BsStepperStep.style = bsStepperStepCss();
+
+export { BsStepperStep as bs_stepper_step };

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

@@ -0,0 +1,60 @@
+import { r as registerInstance, a as getElement, h } from './index-Do3l4of3.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)}`;
+
+const BsStepper = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** 0-indexed: which step is current. Every step before this index reads as "done" (unless that
+     * step's own `error`/`disabled` overrides it), every step after reads as "enabled". */
+    currentStep = 0;
+    /** `horizontal` (icon above name/description, connected by a horizontal rail) or `vertical`
+     * (icon beside name/description, connected by a vertical rail). Propagated to every slotted
+     * `bs-stepper-step`, and reflected as an attribute so this container's own `:host` CSS can switch
+     * its `flex-direction` to match -- a bare `<slot>` with no wrapping element (see `render()`)
+     * means the slotted steps' flex-row/column layout comes directly from `:host` here, not from any
+     * wrapper div. */
+    direction = 'horizontal';
+    /** Whether each step's description renders at all. Propagated to every slotted
+     * `bs-stepper-step`. */
+    showDescription = true;
+    onPropChange() {
+        this.propagateToSteps();
+    }
+    componentDidLoad() {
+        this.propagateToSteps();
+    }
+    onSlotChange = () => {
+        this.propagateToSteps();
+    };
+    propagateToSteps() {
+        const steps = this.el.querySelectorAll(':scope > bs-stepper-step');
+        steps.forEach((step, index) => {
+            const computedState = index < this.currentStep ? 'done' : index === this.currentStep ? 'current' : 'enabled';
+            Object.assign(step, {
+                computedState,
+                direction: this.direction,
+                showDescription: this.showDescription,
+            });
+        });
+    }
+    render() {
+        return h("slot", { key: 'aed14a6d1d81b19d7d53fe9a536b2eb4912a2108', onSlotchange: this.onSlotChange });
+    }
+    static get watchers() { return {
+        "currentStep": [{
+                "onPropChange": 0
+            }],
+        "direction": [{
+                "onPropChange": 0
+            }],
+        "showDescription": [{
+                "onPropChange": 0
+            }]
+    }; }
+};
+BsStepper.style = bsStepperCss();
+
+export { BsStepper as bs_stepper };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DST5-cTx.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Do3l4of3.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)}`;
 
@@ -46,7 +46,7 @@ const BsSwitch = class {
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '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' }))));
+        return (h("label", { key: '166f681e2f776beda7d084c59437f1fff09a4ca8', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '15a147b4c9ce829ffd1a233331eb0dc177d95f87', 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: '97e17ef669469c8b0751c2c950fcf9b17a12cb77', part: "track", class: trackClasses }, h("span", { key: '218b41fc9943769b41a8959d7715740dc3a14f4e', part: "knob", class: knobClasses })), h("span", { key: 'd967c820aeb62b522726ad7aff0aeb96ff59276f', part: "label", class: "bs-switch__label" }, h("slot", { key: '507e82bc8eb6389c79cc27cd8ae98b583ec6bc1c' }))));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DST5-cTx.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Do3l4of3.js';
 
 const bsTabCss = () => `:host{display:inline-block;--bs-tab-radius:var(--bs-border-radius-100);--bs-tab-padding-y:var(--bs-spacing-150);--bs-tab-padding-x:var(--bs-spacing-200);--bs-tab-gap:var(--bs-spacing-75);--bs-tab-gap-vertical:var(--bs-spacing-50);--bs-tab-color-default:var(--bs-text-muted);--bs-tab-icon-color-default:var(--bs-icon-muted);--bs-tab-color-hover:var(--bs-text-default);--bs-tab-icon-color-hover:var(--bs-icon-default);--bs-tab-indicator-hover:var(--bs-border-neutral-hover);--bs-tab-color-selected:var(--bs-color-primary-default);--bs-tab-color-selected-hover:var(--bs-color-primary-hover);--bs-tab-color-selected-pressed:var(--bs-color-primary-pressed);--bs-tab-indicator-selected:var(--bs-color-primary-default);--bs-tab-indicator-selected-hover:var(--bs-color-primary-hover);--bs-tab-indicator-selected-pressed:var(--bs-color-primary-pressed);--bs-tab-focus-ring-color:var(--bs-border-neutral-focus);--bs-tab-color-disabled:var(--bs-text-on-disabled);--bs-tab-icon-color-disabled:var(--bs-icon-disabled);--bs-tab-font-size:var(--bs-font-size-md);--bs-tab-line-height:var(--bs-line-height-body-md)}.bs-tab{box-sizing:border-box;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;border:none;cursor:pointer;background:transparent;color:var(--bs-tab-color-default);font-family:inherit;border-radius:var(--bs-tab-radius);padding:var(--bs-tab-padding-y) var(--bs-tab-padding-x);gap:var(--bs-tab-gap);transition:color var(--bs-duration-fast) var(--bs-easing-standard),     background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-tab--vertical{flex-direction:column;gap:var(--bs-tab-gap-vertical)}.bs-tab:focus-visible{outline:2px solid var(--bs-tab-focus-ring-color);outline-offset:2px}.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):hover,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):focus-visible,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):active{color:var(--bs-tab-color-hover)}.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):hover .bs-tab__icon,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):focus-visible .bs-tab__icon,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):active .bs-tab__icon{color:var(--bs-tab-icon-color-hover)}.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):hover .bs-tab__indicator,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):focus-visible .bs-tab__indicator,.bs-tab:not(.bs-tab--selected):not(.bs-tab--disabled):active .bs-tab__indicator{background:var(--bs-tab-indicator-hover)}.bs-tab--selected{color:var(--bs-tab-color-selected)}.bs-tab--selected .bs-tab__icon--has-content{color:var(--bs-tab-color-selected)}.bs-tab--selected .bs-tab__indicator{background:var(--bs-tab-indicator-selected)}.bs-tab--selected:not(.bs-tab--disabled):hover,.bs-tab--selected:not(.bs-tab--disabled):focus-visible{color:var(--bs-tab-color-selected-hover)}.bs-tab--selected:not(.bs-tab--disabled):hover .bs-tab__icon--has-content,.bs-tab--selected:not(.bs-tab--disabled):focus-visible .bs-tab__icon--has-content{color:var(--bs-tab-color-selected-hover)}.bs-tab--selected:not(.bs-tab--disabled):hover .bs-tab__indicator,.bs-tab--selected:not(.bs-tab--disabled):focus-visible .bs-tab__indicator{background:var(--bs-tab-indicator-selected-hover)}.bs-tab--selected:not(.bs-tab--disabled):active{color:var(--bs-tab-color-selected-pressed)}.bs-tab--selected:not(.bs-tab--disabled):active .bs-tab__icon--has-content{color:var(--bs-tab-color-selected-pressed)}.bs-tab--selected:not(.bs-tab--disabled):active .bs-tab__indicator{background:var(--bs-tab-indicator-selected-pressed)}.bs-tab--disabled{color:var(--bs-tab-color-disabled);cursor:not-allowed}.bs-tab--disabled .bs-tab__icon--has-content{color:var(--bs-tab-icon-color-disabled)}.bs-tab--disabled .bs-tab__indicator{background:transparent}.bs-tab__icon{display:none;width:24px;height:24px;flex-shrink:0;color:var(--bs-tab-icon-color-default)}.bs-tab__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-tab__icon ::slotted(svg){width:24px;height:24px}.bs-tab__label{display:none;font-size:var(--bs-tab-font-size);line-height:calc(var(--bs-tab-line-height) * 1px);white-space:nowrap}.bs-tab__label--has-content{display:inline-block}.bs-tab__badge{display:none}.bs-tab__badge--has-content{display:inline-flex;align-items:center}.bs-tab__indicator{position:absolute;left:var(--bs-tab-padding-x);right:var(--bs-tab-padding-x);bottom:0;height:2px;background:transparent;border-radius:var(--bs-border-radius-50, 2px)}`;
 
@@ -70,7 +70,7 @@ const BsTab = class {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: 'de1416c9ee8414405513dd4b9a828d7a3d0ae330', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'd884d90267fac3ec8fc9e9bcd8b9cefc5153b47e', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '2194a3d72bafda2d0f830e4f9f5a6a92d08c5aa3', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '181abd3f489648a7bf53a11b77bed47c56b2fd94', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '683020efc34ea270b700b5034631a549796510f1', onSlotchange: this.onLabelSlotchange })), h("span", { key: '02dfede0c88b1b2f805128ce11a5134fd4c83b6d', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'e712da5b095aa9e3c6c8b7f8fa0bee86c0ef7b20', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: 'a743816f44a8c0cb08dbe518ae521bf05d5c5a08', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '9459bb70d5a9d6152f8339505c9b2bdeac846040', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '270fc529b567e7acf1cd087d11ca1486a4f57398', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '679bbd689b8381b57e44ce12ecd7a0fc13bcdb28', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '48cc55b855d58ebefcb1aeed92e8d23c5245778a', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: 'f35e484c8d52507b81f96cad42f169a388f15a4d', onSlotchange: this.onLabelSlotchange })), h("span", { key: '637e767ef63781c97675bd296f45778025bd23bb', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '66bd5e481528d69d5f6a15641bdd8f911ea7b2aa', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '5ecc8124efb448f67bc470bd2473e3e988619fbf', part: "indicator", class: "bs-tab__indicator" })));
     }
 };
 BsTab.style = bsTabCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-DST5-cTx.js';
+import { r as registerInstance, a as getElement, h } from './index-Do3l4of3.js';
 
 const bsTabsCss = () => `:host{display:inline-block;--bs-tabs-tab-gap:var(--bs-spacing-100);--bs-tabs-inline-tab-bg:var(--bs-color-neutral-container);--bs-tabs-inline-tab-padding-x:var(--bs-spacing-50);--bs-tabs-inline-tab-radius:var(--bs-border-radius-full);--bs-tabs-inline-tab-gap:var(--bs-spacing-50)}.bs-tabs{display:inline-flex;align-items:center}.bs-tabs--vertical{display:flex;flex-direction:column;align-items:flex-start}.bs-tabs--bs-tab{gap:var(--bs-tabs-tab-gap)}.bs-tabs--bs-inline-tab{background:var(--bs-tabs-inline-tab-bg);padding:0 var(--bs-tabs-inline-tab-padding-x);border-radius:var(--bs-tabs-inline-tab-radius);gap:var(--bs-tabs-inline-tab-gap)}`;
 
@@ -29,7 +29,7 @@ const BsTabs = class {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: '55006a332bf4d3b955f5c76cf2cfadf483affb4b', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '0b0d1ec94485389d4bb6b4000384e337991060bd' })));
+        return (h("div", { key: '0b871aaeed20b903217a2c458df5d507f4fed4e0', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '0d8f3a81a14b1225f4c1d1ef2c241b16b39122ad' })));
     }
 };
 BsTabs.style = bsTabsCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DST5-cTx.js';
+import { r as registerInstance, h } from './index-Do3l4of3.js';
 
 const bsTooltipCss = () => `:host{display:inline-block;--bs-tooltip-bg:var(--bs-surface-inverse);--bs-tooltip-color:var(--bs-text-inverse);--bs-tooltip-radius:var(--bs-border-radius-50);--bs-tooltip-padding-x:var(--bs-spacing-200);--bs-tooltip-padding-y:var(--bs-spacing-100);--bs-tooltip-max-width:200px;--bs-tooltip-shadow:-1px 4px 8px rgba(0, 0, 0, 0.08);--bs-tooltip-font-size:var(--bs-font-size-sm);--bs-tooltip-line-height:var(--bs-line-height-body-sm)}.bs-tooltip{position:relative;display:inline-block}.bs-tooltip__bubble{box-sizing:border-box;max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);background:var(--bs-tooltip-bg);color:var(--bs-tooltip-color);border-radius:var(--bs-tooltip-radius);box-shadow:var(--bs-tooltip-shadow);font-family:inherit;font-size:var(--bs-tooltip-font-size);line-height:calc(var(--bs-tooltip-line-height) * 1px)}.bs-tooltip__arrow{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:8px;height:8px;background:var(--bs-tooltip-bg);clip-path:polygon(50% 0, 0% 100%, 100% 100%)}`;
 
@@ -14,7 +14,7 @@ const BsTooltip = class {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: '64951f06f070f2d3b10796d09f2c97ef7cf098fa', class: "bs-tooltip" }, h("span", { key: 'b9ff6d99eb95aea33949f211aa80c29220a3e199', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '3b559c7952b42011f45bd59177dbdf3194b84b92', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '54b278e8ee7c98360b9aaaea300e0631d8bfb8dd' }))));
+        return (h("div", { key: '85557db8e543c53d4fe18cdcd1a83249bd3ecfe5', class: "bs-tooltip" }, h("span", { key: '1ff57d8ef7b6e2e9314111efd2da1457baeb3815', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '9bb7cb09a1c3631b5bff6a08c28d549a6cadb408', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '75a4b424d1e8cac1caec42ec12ff1ba4ac1f72e2' }))));
     }
 };
 BsTooltip.style = bsTooltipCss();

package/dist/esm/{index-DST5-cTx.js → index-Do3l4of3.js}

@@ -1773,4 +1773,4 @@ function transformTag(tag) {
   return tag;
 }
 
-export { getElement as a, bootstrapLazy as b, createEvent as c, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Host as H, getElement as a, bootstrapLazy as b, createEvent as c, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-DST5-cTx.js';
-export { s as setNonce } from './index-DST5-cTx.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-Do3l4of3.js';
+export { s as setNonce } from './index-Do3l4of3.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["bs-input",[[785,"bs-input",{"value":[1025],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[4],"required":[4],"step":[2],"min":[2],"max":[2],"options":[16],"rows":[2],"chips":[16],"titleOptions":[16],"initialsTitle":[1,"initials-title"],"countryOptions":[16],"country":[1],"length":[2],"open":[1540],"hasIcon":[32],"hasEndIcon":[32],"passwordVisible":[32],"chipDraft":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["bs-attachment",[[513,"bs-attachment",{"type":[1],"fileName":[1,"file-name"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"loading":[4],"removable":[4]}]]],["bs-chatbot-header",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["bs-navigation-drawer",[[769,"bs-navigation-drawer",{"heading":[1],"collapsible":[4],"collapsed":[1540],"logoBackground":[1,"logo-background"]},null,{"collapsed":[{"onCollapsedChange":0}]}]]],["bs-navigation-header",[[769,"bs-navigation-header",{"alignment":[1],"ariaLabel":[1,"aria-label"],"skipToContentHref":[1,"skip-to-content-href"],"skipToContentLabel":[1,"skip-to-content-label"],"logoBackground":[1,"logo-background"]}]]],["bs-ai-disclaimer",[[257,"bs-ai-disclaimer"]]],["bs-ai-greeting",[[513,"bs-ai-greeting",{"assistantName":[1,"assistant-name"],"productName":[1,"product-name"]}]]],["bs-ai-thinking",[[513,"bs-ai-thinking",{"label":[1]}]]],["bs-attachment-list",[[769,"bs-attachment-list",{"ariaLabel":[1,"aria-label"],"canScrollRight":[32]}]]],["bs-badge",[[769,"bs-badge",{"variant":[1]}]]],["bs-button",[[785,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-button-skeleton",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card",[[769,"bs-card",{"surface":[1]}]]],["bs-chatbot-feedback",[[513,"bs-chatbot-feedback",{"rating":[1538],"submitted":[1540],"comment":[1025],"heading":[1],"subtitle":[1]}]]],["bs-chatbot-response-action",[[769,"bs-chatbot-response-action",{"sourcesCount":[2,"sources-count"],"menuOpen":[1540,"menu-open"]},[[4,"click","onDocumentClick"],[4,"keydown","onKeydown"]]]]],["bs-chatbot-sources-drawer",[[769,"bs-chatbot-sources-drawer",{"heading":[1],"count":[2],"slottedCount":[32]}]]],["bs-chatbot-suggestion-button",[[769,"bs-chatbot-suggestion-button",{"disabled":[4]}]]],["bs-checkbox",[[785,"bs-checkbox",{"size":[1],"checked":[1540],"indeterminate":[1540],"disabled":[4],"error":[4],"ariaLabel":[1,"aria-label"]},null,{"indeterminate":[{"onIndeterminateChange":0}]}]]],["bs-composer",[[785,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1],"state":[1],"ariaLabel":[1,"aria-label"],"hasAttachments":[32]}]]],["bs-composer-status-banner",[[769,"bs-composer-status-banner",{"type":[1],"message":[1],"showIcon":[4,"show-icon"],"showButton":[4,"show-button"],"actionLabel":[1,"action-label"],"allowClose":[4,"allow-close"]}]]],["bs-data-table",[[513,"bs-data-table",{"columns":[16],"rows":[16],"sortColumn":[1,"sort-column"],"sortDirection":[1,"sort-direction"],"selectable":[4],"cellRenderer":[16],"selectedIds":[32]}]]],["bs-inline-tab",[[769,"bs-inline-tab",{"selected":[516],"disabled":[4],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasLabel":[32]}]]],["bs-modal",[[769,"bs-modal",{"open":[1540],"heading":[1],"size":[1],"hasFooter":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["bs-navigation-drawer-item",[[769,"bs-navigation-drawer-item",{"selected":[516],"expandable":[4],"expanded":[1540],"nested":[4],"ariaLabel":[1,"aria-label"],"collapsed":[516],"hasIcon":[32]}]]],["bs-radio",[[785,"bs-radio",{"name":[1],"value":[1],"checked":[1540],"disabled":[4]}]]],["bs-slider",[[529,"bs-slider",{"type":[1],"showLabel":[4,"show-label"],"label":[1],"min":[2],"max":[2],"step":[2],"value":[1026],"valueStart":[1026,"value-start"],"valueEnd":[1026,"value-end"],"segments":[2],"disabled":[4],"ariaLabel":[1,"aria-label"]}]]],["bs-source-link",[[769,"bs-source-link",{"fileName":[1,"file-name"],"sourceName":[1,"source-name"],"version":[1],"href":[1],"target":[1]}]]],["bs-switch",[[785,"bs-switch",{"size":[1],"checked":[1540],"disabled":[4],"ariaLabel":[1,"aria-label"]}]]],["bs-tab",[[769,"bs-tab",{"selected":[516],"disabled":[4],"iconPosition":[1,"icon-position"],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasLabel":[32],"hasBadge":[32]}]]],["bs-tabs",[[769,"bs-tabs",{"type":[1],"orientation":[1]},[[0,"bsSelect","onTabSelect"]]]]],["bs-icon-button",[[785,"bs-icon-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["bs-tooltip",[[769,"bs-tooltip",{"placement":[1]}]]],["bs-menu_2",[[257,"bs-menu"],[769,"bs-menu-item",{"disabled":[4],"hasIcon":[32]}]]],["bs-logo",[[513,"bs-logo",{"variant":[1],"background":[1],"src":[1],"alt":[1]}]]]], options);
+  return bootstrapLazy([["bs-input",[[785,"bs-input",{"value":[1025],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[4],"required":[4],"step":[2],"min":[2],"max":[2],"options":[16],"rows":[2],"chips":[16],"titleOptions":[16],"initialsTitle":[1,"initials-title"],"countryOptions":[16],"country":[1],"length":[2],"open":[1540],"hasIcon":[32],"hasEndIcon":[32],"passwordVisible":[32],"chipDraft":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["bs-attachment",[[513,"bs-attachment",{"type":[1],"fileName":[1,"file-name"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"loading":[4],"removable":[4]}]]],["bs-breadcrumb-overflow",[[513,"bs-breadcrumb-overflow",{"items":[16],"overflowLabel":[1,"overflow-label"],"size":[513],"open":[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["bs-chatbot-header",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["bs-dialog",[[769,"bs-dialog",{"open":[1540],"heading":[1],"size":[1],"centered":[516],"hasFooter":[32],"hasImage":[32],"hasIcon":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["bs-navigation-drawer",[[769,"bs-navigation-drawer",{"heading":[1],"collapsible":[4],"collapsed":[1540],"logoBackground":[1,"logo-background"],"showLogo":[4,"show-logo"]},null,{"collapsed":[{"onCollapsedChange":0}]}]]],["bs-navigation-header",[[769,"bs-navigation-header",{"alignment":[1],"ariaLabel":[1,"aria-label"],"skipToContentHref":[1,"skip-to-content-href"],"skipToContentLabel":[1,"skip-to-content-label"],"logoBackground":[1,"logo-background"]}]]],["bs-ai-disclaimer",[[257,"bs-ai-disclaimer"]]],["bs-ai-greeting",[[513,"bs-ai-greeting",{"assistantName":[1,"assistant-name"],"productName":[1,"product-name"]}]]],["bs-ai-thinking",[[513,"bs-ai-thinking",{"label":[1]}]]],["bs-attachment-list",[[769,"bs-attachment-list",{"ariaLabel":[1,"aria-label"],"canScrollRight":[32]}]]],["bs-avatar",[[513,"bs-avatar",{"type":[1],"size":[1],"initials":[1],"src":[1],"alt":[1],"ariaLabel":[1,"aria-label"],"disabled":[516]}]]],["bs-badge",[[769,"bs-badge",{"variant":[1]}]]],["bs-breadcrumb",[[769,"bs-breadcrumb",{"href":[1],"current":[516],"size":[513]}]]],["bs-breadcrumbs",[[769,"bs-breadcrumbs",{"label":[1],"size":[1]},null,{"size":[{"onSizeChange":0}]}]]],["bs-button",[[785,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-button-skeleton",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card",[[769,"bs-card",{"surface":[1],"hasImage":[32]}]]],["bs-chatbot-feedback",[[513,"bs-chatbot-feedback",{"rating":[1538],"submitted":[1540],"comment":[1025],"heading":[1],"subtitle":[1]}]]],["bs-chatbot-response-action",[[769,"bs-chatbot-response-action",{"sourcesCount":[2,"sources-count"],"menuOpen":[1540,"menu-open"]},[[4,"click","onDocumentClick"],[4,"keydown","onKeydown"]]]]],["bs-chatbot-sources-drawer",[[769,"bs-chatbot-sources-drawer",{"heading":[1],"count":[2],"slottedCount":[32]}]]],["bs-chatbot-suggestion-button",[[769,"bs-chatbot-suggestion-button",{"disabled":[4]}]]],["bs-checkbox",[[785,"bs-checkbox",{"size":[1],"checked":[1540],"indeterminate":[1540],"disabled":[4],"error":[4],"ariaLabel":[1,"aria-label"]},null,{"indeterminate":[{"onIndeterminateChange":0}]}]]],["bs-checkbox-skeleton",[[513,"bs-checkbox-skeleton",{"size":[1]}]]],["bs-composer",[[785,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1],"state":[1],"ariaLabel":[1,"aria-label"],"hasAttachments":[32]}]]],["bs-composer-status-banner",[[769,"bs-composer-status-banner",{"type":[1],"message":[1],"showIcon":[4,"show-icon"],"showButton":[4,"show-button"],"actionLabel":[1,"action-label"],"allowClose":[4,"allow-close"]}]]],["bs-data-table",[[513,"bs-data-table",{"columns":[16],"rows":[16],"sortColumn":[1,"sort-column"],"sortDirection":[1,"sort-direction"],"selectable":[4],"cellRenderer":[16],"selectedIds":[32]}]]],["bs-inline-tab",[[769,"bs-inline-tab",{"selected":[516],"disabled":[4],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasLabel":[32]}]]],["bs-navigation-drawer-item",[[769,"bs-navigation-drawer-item",{"selected":[516],"expandable":[4],"expanded":[1540],"nested":[4],"ariaLabel":[1,"aria-label"],"collapsed":[516],"hasIcon":[32]}]]],["bs-pagination",[[513,"bs-pagination",{"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"],"siblingCount":[2,"sibling-count"],"previousLabel":[1,"previous-label"],"nextLabel":[1,"next-label"]}]]],["bs-radio",[[785,"bs-radio",{"name":[1],"value":[1],"checked":[1540],"disabled":[4]}]]],["bs-slider",[[529,"bs-slider",{"type":[1],"showLabel":[4,"show-label"],"label":[1],"min":[2],"max":[2],"step":[2],"value":[1026],"valueStart":[1026,"value-start"],"valueEnd":[1026,"value-end"],"segments":[2],"disabled":[4],"ariaLabel":[1,"aria-label"]}]]],["bs-snackbar",[[769,"bs-snackbar",{"variant":[1],"loading":[4],"actionLabel":[1,"action-label"]}]]],["bs-source-link",[[769,"bs-source-link",{"fileName":[1,"file-name"],"sourceName":[1,"source-name"],"version":[1],"href":[1],"target":[1]}]]],["bs-stepper",[[769,"bs-stepper",{"currentStep":[2,"current-step"],"direction":[513],"showDescription":[4,"show-description"]},null,{"currentStep":[{"onPropChange":0}],"direction":[{"onPropChange":0}],"showDescription":[{"onPropChange":0}]}]]],["bs-stepper-step",[[513,"bs-stepper-step",{"name":[1],"description":[1],"error":[4],"disabled":[4],"computedState":[1,"computed-state"],"direction":[1],"showDescription":[4,"show-description"]}]]],["bs-switch",[[785,"bs-switch",{"size":[1],"checked":[1540],"disabled":[4],"ariaLabel":[1,"aria-label"]}]]],["bs-tab",[[769,"bs-tab",{"selected":[516],"disabled":[4],"iconPosition":[1,"icon-position"],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasLabel":[32],"hasBadge":[32]}]]],["bs-tabs",[[769,"bs-tabs",{"type":[1],"orientation":[1]},[[0,"bsSelect","onTabSelect"]]]]],["bs-menu-item",[[769,"bs-menu-item",{"disabled":[4],"hasIcon":[32]}]]],["bs-tooltip",[[769,"bs-tooltip",{"placement":[1]}]]],["bs-icon-button",[[785,"bs-icon-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["bs-logo",[[513,"bs-logo",{"variant":[1],"background":[1],"src":[1],"alt":[1]}]]],["bs-menu",[[257,"bs-menu"]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/components/bs-avatar/bs-avatar.d.ts

@@ -0,0 +1,67 @@
+export type BsAvatarType = 'icon' | 'initials' | 'image';
+export type BsAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * A circular representation of a person or entity -- a photo, initials, or (as a fallback when
+ * neither is available) a generic user-silhouette icon.
+ *
+ * ## When to use
+ * - Representing a specific user or account: in a header, a comment, a member list, etc.
+ * - `type="initials"` when a photo isn't available but a name is (e.g. "Sam Lee" -> "SL").
+ * - `type="icon"` (the default) as the generic fallback when neither a photo nor a name/initials
+ *   is available yet.
+ *
+ * ## When not to use
+ * - A company/brand logo -- use `bs-logo` instead.
+ *
+ * This component is decorative/informational by default, not an interactive control -- it renders
+ * a plain `<span>`/`<img>`, not a `<button>`. Figma's own component set includes hover/focused/
+ * pressed states (e.g. for an account-switcher trigger use case), which this implements as real
+ * `:hover`/`:focus-visible`/`:active` CSS on the host itself -- so wrapping this in your own
+ * `<button>`, or setting `tabindex` and a click handler on the `<bs-avatar>` element directly, gets
+ * the matching visual treatment for free with no extra wiring. Left genuinely non-interactive
+ * (no implicit role/tabindex of its own) so it doesn't misrepresent a purely decorative avatar
+ * (e.g. next to a comment) as a control when it isn't one.
+ *
+ * @part container - The circular wrapper (all three `type`s render this; `image` additionally
+ *   wraps a real `<img>` inside it, since the border/background/radius treatment is identical
+ *   across types and factoring it into one shared part keeps `::part(container)` overrides
+ *   consistent regardless of which `type` ends up rendering).
+ * @part image - The `<img>` itself. Only rendered for `type="image"`.
+ * @part initials - The initials text. Only rendered for `type="initials"`.
+ * @part icon - The fallback user-silhouette icon. Only rendered for `type="icon"`.
+ */
+export declare class BsAvatar {
+    /** What to render inside the circle. `icon` (default) is the generic fallback for when neither
+     * a photo nor initials are available yet. */
+    type: BsAvatarType;
+    /** Sizing scale -- `xs` (24px) through `xxl` (128px), matching Figma's own six-step scale. */
+    size: BsAvatarSize;
+    /** `type="initials"` only: the initials text to display (e.g. `"SL"` for "Sam Lee"). Ignored
+     * for `icon`/`image`. */
+    initials: string | null;
+    /** `type="image"` only: the photo URL. This component does not fetch it itself -- network
+     * calls, loading/error states, and caching are the consuming app's responsibility, same
+     * convention as `bs-logo`'s own `src` prop. Ignored for `icon`/`initials`. */
+    src: string | null;
+    /** `type="image"` only: accessible alt text for the photo, set directly on the real `<img>`
+     * this renders -- a person's photo is meaningful content, not decorative, so pass something
+     * real (e.g. their name). Falls back to `alt=""` (decorative to assistive tech) when unset,
+     * rather than omitting the attribute entirely, but don't rely on that fallback. Ignored for
+     * `icon`/`initials` -- see `ariaLabel` for those instead. */
+    alt: string | null;
+    /** `type="icon"`/`"initials"` only: accessible name for the avatar, set as `aria-label` on the
+     * `role="img"` wrapper this renders (neither is a real `<img>`, so there's no native `alt` to
+     * set). Setting a plain `aria-label` attribute on the `<bs-avatar>` host does NOT work for this
+     * -- that attribute stays on the light-DOM host and never crosses into the shadow DOM, so the
+     * actual `role="img"` element stays nameless. Same pattern as `bs-checkbox`'s identical
+     * `ariaLabel` prop. Ignored for `image` -- see `alt` for that instead. */
+    ariaLabel: string | null;
+    /** Applies the disabled treatment (50% opacity) and suppresses the hover/focus/pressed CSS
+     * states -- this doesn't set a native `disabled` attribute (this component renders no native
+     * form control), it's purely a visual/interaction-state flag for when a consuming app has
+     * wrapped this in its own disabled control. Reflected so the `:host([disabled])` CSS selector
+     * that drives all of the above still matches when a consumer sets the JS property directly
+     * (`el.disabled = true`) rather than the HTML attribute. */
+    disabled: boolean;
+    render(): any;
+}

package/dist/types/components/bs-avatar/bs-avatar.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import type { BsAvatarType, BsAvatarSize } from './bs-avatar';
+interface BsAvatarArgs {
+    type: BsAvatarType;
+    size: BsAvatarSize;
+    initials: string;
+    src: string;
+    alt: string;
+    ariaLabel: string;
+    disabled: boolean;
+}
+declare const meta: Meta<BsAvatarArgs>;
+export default meta;
+type Story = StoryObj<BsAvatarArgs>;
+export declare const Icon: Story;
+export declare const Initials: Story;
+export declare const Image: Story;
+export declare const Sizes: Story;
+export declare const Disabled: Story;
+export declare const Interactive: Story;

package/dist/types/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-breadcrumb/bs-breadcrumb/bs-breadcrumb.d.ts

@@ -0,0 +1,44 @@
+export type BsBreadcrumbSize = 'sm' | 'md';
+/**
+ * A single crumb within a `<bs-breadcrumbs>` trail: a leading separator icon plus either a link,
+ * plain text, or the current-page label, depending on `current`/`href`.
+ *
+ * Rendering follows the W3C ARIA Authoring Practices breadcrumb pattern
+ * (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/): the current page is marked
+ * `aria-current="page"` and is never a link -- this holds even when `href` is also set, unlike
+ * Carbon Design System's `cds-breadcrumb-item`, which allows a link on the current item.
+ *
+ * Sets `role="listitem"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`
+ * -- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the
+ * accessibility tree needs this explicit role to preserve the list's semantics.
+ *
+ * ## When to use
+ * - As one crumb inside a `<bs-breadcrumbs>` trail.
+ *
+ * ## When not to use
+ * - Standalone, outside a `<bs-breadcrumbs>` wrapper -- its `<ol>`/`<nav>` context and
+ *   first-child-aware separator hiding depend on that parent structure.
+ *
+ * @slot - Default slot: the crumb's label content/text.
+ * @part separator - The leading separator icon wrapper.
+ * @part link - The anchor (or, when there's no `href`, plain `<span>`) for a non-current crumb.
+ * @part current - The current-page text element.
+ */
+export declare class BsBreadcrumb {
+    /** Destination for a non-current crumb. Ignored when `current` is true -- the current page is
+     * never a link, even if `href` is set (see the class JSDoc). */
+    href?: string;
+    /** Whether this crumb is the current page. Renders as plain (non-link) text marked
+     * `aria-current="page"`, reflected as an attribute so consumers/CSS can target
+     * `bs-breadcrumb[current]`. */
+    current: boolean;
+    /** Size variant. Normally set automatically by a parent `<bs-breadcrumbs size="...">` -- the
+     * container propagates its own `size` as a JS property to every slotted `bs-breadcrumb`/
+     * `bs-breadcrumb-overflow` child (see `bs-breadcrumbs.tsx`'s `propagateSize`), since CSS custom
+     * properties can't carry an enum that switches rules on their own. Can also be set directly on a
+     * standalone crumb. `sm` scales down font-size/line-height only -- the separator icon's pixel
+     * size is unchanged, since Figma didn't specify a `sm` icon size and guessing one risked drifting
+     * off-brand. Reflected so consumers/CSS can target `bs-breadcrumb[size="sm"]`. */
+    size: BsBreadcrumbSize;
+    render(): any;
+}

package/dist/types/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.d.ts

@@ -0,0 +1,69 @@
+import type { BsBreadcrumbSize } from '../bs-breadcrumb/bs-breadcrumb';
+export interface BsBreadcrumbOverflowItem {
+    label: string;
+    href?: string;
+}
+/**
+ * A manually-placed collapsed-items disclosure for a `<bs-breadcrumbs>` trail: a leading separator
+ * plus an icon-only ellipsis button that reveals a `bs-menu` popup listing every hidden crumb.
+ *
+ * `items` is JS-property-only -- must be set as a JS property (`el.items = [...]`), not an HTML
+ * attribute, since attributes can only carry strings. See CONVENTIONS.md.
+ *
+ * Unlike an earlier `bs-breadcrumbs`-owned automatic `maxItems` collapse, this component does no
+ * collapsing logic itself -- the consumer decides which crumbs to hide and places this element
+ * wherever they want the disclosure, exactly matching Carbon Design System's own approach (Carbon
+ * doesn't auto-collapse breadcrumbs either; a consumer there manually decides what's visible).
+ *
+ * Hidden items with an `href` render as real `<a href>` rows inside the popup, not `bs-menu-item`
+ * (which renders a `<button>`) -- this matters because consuming apps commonly use client-side
+ * routers that intercept clicks on real `<a>` tags to do `preventDefault` + push-state navigation.
+ * Rendering hidden links any other way (e.g. `window.location`) would silently break client-side
+ * routing for hidden crumbs while working fine for visible ones. Hidden items without an `href`
+ * render as plain non-interactive text, matching how `bs-breadcrumb` itself handles link vs.
+ * no-link crumbs.
+ *
+ * Sets `role="listitem"` on the host, mirroring Carbon's own `CDSBreadcrumbItem.connectedCallback()`
+ * -- since this is a custom-element child of a real `<ol>` rather than a real `<li>`, the
+ * accessibility tree needs this explicit role to preserve the list's semantics.
+ *
+ * ## When to use
+ * - Inside a `<bs-breadcrumbs>` trail, wherever the consumer wants an interactive disclosure for
+ *   crumbs they've chosen not to render directly.
+ *
+ * ## When not to use
+ * - As an automatic collapsing mechanism -- there is none; the consumer decides what's hidden.
+ *
+ * @slot - None: `items` fully drives the popup's contents.
+ * @part separator - The leading separator icon wrapper.
+ * @part ellipsis - The icon-only disclosure button.
+ * @part menu - The `bs-menu` popup revealed by the ellipsis button.
+ * @part link - Each anchor/span row inside the popup.
+ */
+export declare class BsBreadcrumbOverflow {
+    el: HTMLElement;
+    /** Array prop -- must be set as a JS property (`el.items = [...]`), not an HTML attribute, since
+     * attributes can only carry strings. See CONVENTIONS.md. The hidden crumbs reachable via this
+     * disclosure -- no collapsing logic here, the consumer decides what goes in this list. */
+    items: BsBreadcrumbOverflowItem[];
+    /** Accessible name (`aria-label`) for the icon-only ellipsis trigger button. */
+    overflowLabel: string;
+    /** Size variant. Normally set automatically by a parent `<bs-breadcrumbs size="...">` -- see
+     * `bs-breadcrumb`'s identical `size` prop doc comment for why this is propagated as a JS
+     * property rather than inherited via CSS. Scales the popup rows' font-size/line-height only; the
+     * separator/ellipsis icons' pixel sizes are unchanged. Reflected so consumers/CSS can target
+     * `bs-breadcrumb-overflow[size="sm"]`. */
+    size: BsBreadcrumbSize;
+    /** Whether the overflow popup is open. */
+    open: boolean;
+    private onEllipsisToggle;
+    /** Closes the overflow popup on Escape, from anywhere within the component -- host is the
+     * default @Listen target, so this fires whether focus is on the ellipsis button itself or on a
+     * link inside the popup. Mirrors `bs-input`'s `type="dropdown"` `onHostKeydown`. */
+    onHostKeydown(ev: KeyboardEvent): void;
+    /** Closes the overflow popup once focus leaves the component entirely (e.g. Tab away, or a click
+     * outside that moves focus elsewhere) -- `focusout` is composed, so it bubbles across the
+     * `bs-menu` shadow boundary too. Mirrors `bs-input`'s `type="dropdown"` `onHostFocusOut`. */
+    onHostFocusOut(ev: FocusEvent): void;
+    render(): any;
+}

package/dist/types/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.d.ts

@@ -0,0 +1,45 @@
+import type { BsBreadcrumbSize } from '../bs-breadcrumb/bs-breadcrumb';
+/**
+ * A breadcrumb trail container: a real `<nav>` landmark wrapping an `<ol>`, meant to be populated
+ * with slotted `<bs-breadcrumb>` (and, where the consumer wants a collapsed-items disclosure,
+ * `<bs-breadcrumb-overflow>`) children -- same composition-over-configuration architecture as
+ * Carbon Design System's `cds-breadcrumb`/`cds-breadcrumb-item`/`cds-breadcrumb-link`.
+ *
+ * This component is intentionally thin: it owns only the `<nav>` landmark and list semantics.
+ * Unlike an earlier `items`-array-driven design, there is no automatic collapsing here -- exactly
+ * like Carbon, the consumer decides what's visible and manually places a `<bs-breadcrumb-overflow>`
+ * wherever they want a collapsed-items disclosure. See `bs-breadcrumbs.mdx` for the consolidated
+ * docs covering all three components in this feature area.
+ *
+ * ## When to use
+ * - Showing a user's current location within a hierarchical page structure, with a path back to
+ *   its ancestors.
+ *
+ * ## When not to use
+ * - Primary in-app navigation -- use `bs-navigation-drawer`/`bs-navigation-header` instead.
+ * - A flat set of unrelated pages with no hierarchy -- breadcrumbs imply ancestry, not just history.
+ *
+ * @slot - Default slot: the trail's crumbs, `<bs-breadcrumb>` and/or `<bs-breadcrumb-overflow>`
+ * elements, in visual order.
+ * @part list - The `<ol>` element.
+ */
+export declare class BsBreadcrumbs {
+    el: HTMLElement;
+    /** Accessible name for the `<nav>` landmark, via `aria-label`. Same pattern as
+     * `bs-navigation-drawer`'s `heading` prop. */
+    label: string;
+    /** Size variant, propagated as a JS property to every slotted `bs-breadcrumb`/
+     * `bs-breadcrumb-overflow` child -- this container has no visual sizing of its own (font/spacing
+     * live on the item components, see `bs-breadcrumb.tsx`'s identical `size` prop), so propagation
+     * is the only way setting `size` here reaches every crumb. CSS custom properties can't carry an
+     * enum that switches rules on their own, which is why this is pushed via JS property instead of
+     * CSS inheritance -- same reasoning as `bs-tabs` setting `selected` directly on its slotted
+     * `bs-tab`/`bs-inline-tab` children. Re-propagated on `size` changes and whenever the slotted
+     * children change (e.g. a crumb added later). */
+    size: BsBreadcrumbSize;
+    onSizeChange(size: BsBreadcrumbSize): void;
+    componentDidLoad(): void;
+    private onSlotChange;
+    private propagateSize;
+    render(): any;
+}

package/dist/types/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+type BsBreadcrumbsSize = 'sm' | 'md';
+interface BsBreadcrumbsArgs {
+    label: string;
+    size: BsBreadcrumbsSize;
+}
+declare const meta: Meta<BsBreadcrumbsArgs>;
+export default meta;
+type Story = StoryObj<BsBreadcrumbsArgs>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const WithOverflow: Story;
+export declare const NonLinkCrumb: Story;
+export declare const OverflowFirst: Story;

package/dist/types/components/bs-card/bs-card.d.ts

@@ -10,10 +10,14 @@ export type BsCardSurface = 'base' | 'raised' | 'container';
  * - As the only structural element on a page — cards group content, they don't replace layout.
  * - For a dismissible/transient message — use a modal or a dedicated notification component.
  *
+ * @slot image - Optional hero image across the top of the card, flush with its edges and clipped
+ * to its top corners. Presence of assigned content is what shows it -- doesn't affect layout when
+ * empty.
  * @slot header - Optional heading content above the body.
  * @slot - Default slot: the card's main body content.
  * @slot footer - Optional actions/content below the body (e.g. a button).
- * @part container - The outer bordered surface element.
+ * @part container - The outer surface element.
+ * @part image - The hero image wrapper (only visible when the `image` slot has content).
  * @part header - The header wrapper.
  * @part body - The body wrapper.
  * @part footer - The footer wrapper.
@@ -22,5 +26,10 @@ export declare class BsCard {
     /** Maps to the brandsync-tokens `--bs-paper-bg-*` set — Brandsync's tokens don't have a
      * dedicated "card" component yet, so this reuses the existing Paper surface tokens. */
     surface: BsCardSurface;
+    /** Tracks whether the `image` slot has assigned content, so the image wrapper only reserves
+     * layout space (and clips its top corners) when there's actually an image -- same pattern as
+     * `bs-dialog`'s `hasImage`. */
+    hasImage: boolean;
+    private onImageSlotchange;
     render(): any;
 }

package/dist/types/components/bs-card/bs-card.stories.d.ts

@@ -8,3 +8,4 @@ type Story = StoryObj<BsCardArgs>;
 export declare const Raised: Story;
 export declare const Base: Story;
 export declare const Container: Story;
+export declare const WithImage: Story;

package/dist/types/components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.d.ts

@@ -0,0 +1,36 @@
+import type { BsCheckboxSize } from '../bs-checkbox';
+/**
+ * A shape-matched loading placeholder for `bs-checkbox`, shown while the real label text isn't
+ * known yet (e.g. still being fetched from an API). Renders a small square (matching the
+ * checkbox's own box) beside a text-bar placeholder (standing in for the label), both pulsing
+ * together, sized to match `bs-checkbox`'s `sm`/`md`/`lg` box dimensions so layout doesn't shift
+ * once the real checkbox renders.
+ *
+ * ## When to use
+ * - In place of a `bs-checkbox` whose label/checked state depends on data that hasn't loaded yet.
+ *
+ * ## When not to use
+ * - While a checkbox's own change handler is running (e.g. a save request in flight) -- render the
+ *   real `bs-checkbox` itself; this component is not a saving-in-progress spinner.
+ *
+ * @part container - The outer wrapper holding both placeholder pieces.
+ * @part box - The pulsing placeholder standing in for the checkbox's own box.
+ * @part label - The pulsing placeholder bar standing in for the label text.
+ * @prop --bs-checkbox-skeleton-size-sm - Box width/height at `size="sm"`. Aliased to
+ *   `--bs-spacing-200`, mirroring `bs-checkbox`'s own `--bs-checkbox-size-sm` -- not read directly
+ *   from it, since these are two separate shadow roots.
+ * @prop --bs-checkbox-skeleton-size-md - Box width/height at `size="md"`. Aliased to
+ *   `--bs-spacing-250`.
+ * @prop --bs-checkbox-skeleton-size-lg - Box width/height at `size="lg"`. Aliased to
+ *   `--bs-spacing-300`.
+ * @prop --bs-checkbox-skeleton-gap - Gap between the box and label placeholders. Aliased to
+ *   `--bs-spacing-100`, mirroring `bs-checkbox`'s own `--bs-checkbox-gap`.
+ * @prop --bs-checkbox-skeleton-label-width - Width of the label placeholder bar. Defaults to
+ *   `96px`.
+ */
+export declare class BsCheckboxSkeleton {
+    /** Sizing scale, matching the `bs-checkbox` size it stands in for. Defaults to `lg`, the same
+     * (unusual) default `bs-checkbox` itself uses. */
+    size: BsCheckboxSize;
+    render(): any;
+}