@brandsync/wc 0.0.7 → 0.0.9

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

@@ -1,15 +1,22 @@
-import { r as registerInstance, c as createEvent, h } from './index-nLORuTUY.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-nLORuTUY.js';
 
-const bsInputCss = () => `:host{display:block}.bs-input{display:flex;flex-direction:column;gap:var(--bs-spacing-100);font-family:inherit}.bs-input__label{font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);color:var(--bs-input-label)}.bs-input__control{height:var(--bs-spacing-600);padding:0 var(--bs-spacing-300);border:1px solid var(--bs-input-border-default);border-radius:var(--bs-border-radius-100);background:var(--bs-input-bg-default);color:var(--bs-input-text);font-size:var(--bs-font-size-md);font-family:inherit}.bs-input__control::placeholder{color:var(--bs-input-placeholder)}.bs-input__control:hover:not(:disabled){border-color:var(--bs-input-border-hover)}.bs-input__control:focus-visible{outline:none;border-color:var(--bs-input-border-focus)}.bs-input__control:disabled{background:var(--bs-input-bg-disabled);color:var(--bs-input-text-disabled);cursor:not-allowed}.bs-input--error .bs-input__control{border-color:var(--bs-input-border-error)}.bs-input--error .bs-input__label{color:var(--bs-input-label)}.bs-input__description{font-size:var(--bs-font-size-xs);color:var(--bs-input-description)}.bs-input__error{font-size:var(--bs-font-size-xs);color:var(--bs-input-error)}`;
+const bsInputCss = () => `:host{display:block;--bs-input-radius:var(--bs-border-radius-100);--bs-input-height:var(--bs-spacing-600);--bs-input-padding-x:var(--bs-spacing-150);--bs-input-padding-y:var(--bs-spacing-100);--bs-input-gap:var(--bs-spacing-200);--bs-input-icon-size:var(--bs-spacing-300);--bs-input-stack-gap:var(--bs-spacing-50);--bs-input-error-icon-size:var(--bs-spacing-250);--bs-input-field-bg:var(--bs-input-bg-default);--bs-input-field-bg-disabled:var(--bs-input-bg-disabled);--bs-input-field-border:var(--bs-input-border-default);--bs-input-field-border-hover:var(--bs-input-border-hover);--bs-input-field-border-focus:var(--bs-input-border-focus);--bs-input-field-border-error:var(--bs-input-border-error);--bs-input-field-text:var(--bs-input-text);--bs-input-field-placeholder:var(--bs-input-placeholder);--bs-input-label-color:var(--bs-input-label);--bs-input-description-color:var(--bs-input-description);--bs-input-error-color:var(--bs-input-error);--bs-input-icon-color:var(--bs-icon-muted);--bs-input-icon-color-error:var(--bs-input-icon-error);--bs-input-icon-color-disabled:var(--bs-input-icon-disabled);--bs-input-chip-bg:var(--bs-input-bg-disabled);--bs-input-chip-text:var(--bs-input-text)}.bs-input{display:flex;flex-direction:column;gap:var(--bs-input-stack-gap);font-family:inherit}.bs-input__label{font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);color:var(--bs-input-label-color)}.bs-input__required{color:var(--bs-input-error-color);margin-left:2px}.bs-input__field{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-input-gap);height:var(--bs-input-height);padding:var(--bs-input-padding-y) var(--bs-input-padding-x);border:1px solid var(--bs-input-field-border);border-radius:var(--bs-input-radius);background:var(--bs-input-field-bg)}.bs-input__field:hover:not(.bs-input__field--disabled){border-color:var(--bs-input-field-border-hover)}.bs-input__field:focus-within{border-color:var(--bs-input-field-border-focus)}.bs-input__field--error{border-color:var(--bs-input-field-border-error)}.bs-input__field--disabled{background:var(--bs-input-field-bg-disabled);cursor:not-allowed}.bs-input__control{flex:1;min-width:0;border:none;outline:none;padding:0;background:transparent;color:var(--bs-input-field-text);font-size:var(--bs-font-size-md);font-family:inherit}.bs-input__control::placeholder{color:var(--bs-input-field-placeholder)}.bs-input__control:disabled{color:var(--bs-input-text-disabled);cursor:not-allowed}.bs-input__control::-webkit-strong-password-auto-fill-button,.bs-input__control::-webkit-credentials-auto-fill-button{display:none !important;visibility:hidden;pointer-events:none;position:absolute;right:0}.bs-input__control::-webkit-textfield-decoration-container{visibility:hidden}.bs-input__control::-ms-reveal,.bs-input__control::-ms-clear{display:none}.bs-input--error .bs-input__label{color:var(--bs-input-label-color)}.bs-input__icon,.bs-input__end-icon{display:none;align-items:center;flex-shrink:0;color:var(--bs-input-icon-color)}.bs-input__icon--visible,.bs-input__end-icon--visible{display:flex}.bs-input__icon ::slotted(*),.bs-input__end-icon ::slotted(*){display:block;width:var(--bs-input-icon-size);height:var(--bs-input-icon-size)}.bs-input__field--error .bs-input__icon,.bs-input__field--error .bs-input__end-icon{color:var(--bs-input-icon-color-error)}.bs-input__field--disabled .bs-input__icon,.bs-input__field--disabled .bs-input__end-icon{color:var(--bs-input-icon-color-disabled)}.bs-input__description{font-size:var(--bs-font-size-xs);color:var(--bs-input-description-color)}.bs-input__error{display:flex;align-items:center;gap:var(--bs-input-stack-gap);font-size:var(--bs-font-size-xs);color:var(--bs-input-error-color)}.bs-input__error-icon{flex-shrink:0;width:var(--bs-input-error-icon-size);height:var(--bs-input-error-icon-size)}.bs-input__field--textarea{height:auto;align-items:flex-start}.bs-input__control--textarea{resize:vertical}.bs-input__stepper{display:flex;flex-direction:column}.bs-input__stepper-btn{display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;padding:0;cursor:pointer}.bs-input__stepper-btn:disabled{cursor:not-allowed}.bs-input__password-toggle{display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;padding:0;cursor:pointer;width:var(--bs-input-icon-size);height:var(--bs-input-icon-size)}.bs-input__password-toggle:disabled{cursor:not-allowed}.bs-input__password-toggle svg{width:100%;height:100%}.bs-input__chevron{width:var(--bs-input-icon-size);height:var(--bs-input-icon-size)}.bs-input__field-wrapper{position:relative;width:100%}.bs-input__dropdown-menu{position:absolute;top:calc(100% + var(--bs-input-stack-gap));left:0;right:0;z-index:1}.bs-input__calendar{width:var(--bs-input-icon-size);height:var(--bs-input-icon-size)}.bs-input__search-icon{width:var(--bs-input-icon-size);height:var(--bs-input-icon-size)}.bs-input__field--chip{flex-wrap:wrap;height:auto;min-height:var(--bs-input-height)}.bs-input__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bs-spacing-100);flex:1;min-width:0}.bs-input__chip{display:inline-flex;align-items:center;gap:4px;background:var(--bs-input-chip-bg);color:var(--bs-input-chip-text);border-radius:var(--bs-input-radius);padding:2px 6px;font-size:var(--bs-font-size-sm)}.bs-input__chip-remove{border:none;background:transparent;color:inherit;cursor:pointer;padding:0;line-height:1}.bs-input__chip-input{flex:1;min-width:60px}.bs-input__title-select,.bs-input__country-select{flex-shrink:0;width:auto;border:none;outline:none;background:transparent;color:var(--bs-input-field-text);font-size:var(--bs-font-size-md);font-family:inherit}.bs-input__field--pin{border:none;padding:0;background:transparent;gap:var(--bs-input-gap)}.bs-input__pin-cell{box-sizing:border-box;width:var(--bs-input-height);height:var(--bs-input-height);text-align:center;border:1px solid var(--bs-input-field-border);border-radius:var(--bs-input-radius);background:var(--bs-input-field-bg);color:var(--bs-input-field-text);font-size:var(--bs-font-size-md);font-family:inherit;outline:none}.bs-input__pin-cell:focus{border-color:var(--bs-input-field-border-focus)}.bs-input__field--pin.bs-input__field--disabled .bs-input__pin-cell{background:var(--bs-input-field-bg-disabled);cursor:not-allowed}`;
 
 const BsInput = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.bsInput = createEvent(this, "bsInput");
         this.bsChange = createEvent(this, "bsChange");
+        this.bsOpen = createEvent(this, "bsOpen");
+        this.bsChipAdd = createEvent(this, "bsChipAdd");
+        this.bsChipRemove = createEvent(this, "bsChipRemove");
+        this.bsTitleChange = createEvent(this, "bsTitleChange");
+        this.bsCountryChange = createEvent(this, "bsCountryChange");
     }
+    get el() { return getElement(this); }
     /** Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this
-     * component re-dispatches them as `bsInput`/`bsChange` custom events instead. */
+     * component re-dispatches them as `bsInput`/`bsChange` custom events instead. Mutable so the
+     * `number` type's stepper buttons can update it directly. */
     value = '';
     type = 'text';
     label;
@@ -17,8 +24,83 @@ const BsInput = class {
     description;
     error;
     disabled = false;
+    /** Marks the field as required: renders a red `*` after the label and sets `aria-required="true"`
+     * on the control. Applies regardless of `type`. */
+    required = false;
+    /** Step size for `type="number"`'s increment/decrement stepper buttons. */
+    step = 1;
+    /** Minimum value for `type="number"`'s stepper buttons. */
+    min;
+    /** Maximum value for `type="number"`'s stepper buttons. */
+    max;
+    /** Options for `type="select"` (rendered as native `<option>`s) and `type="dropdown"` (rendered
+     * as a `bs-menu` of `bs-menu-item`s when `open`). Must be set as a JS property, not an HTML
+     * attribute -- see CONVENTIONS.md's non-string props rule. */
+    options = [];
+    /** Number of visible rows for `type="textarea"`. */
+    rows = 3;
+    /** Current chips for `type="chip"`. Must be set as a JS property, not an HTML attribute -- see
+     * CONVENTIONS.md's non-string props rule. */
+    chips = [];
+    /** Title select options for `type="initials"` (e.g. `['Mrs.', 'Mr.', 'Dr.']`). Must be set as a
+     * JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule. */
+    titleOptions = [];
+    /** Current selected title for `type="initials"`. Named `initialsTitle` rather than `title` --
+     * `title` is a reserved standard HTML attribute (tooltip text) inherited by every element, and
+     * Stencil warns against shadowing it with a component `@Prop`. */
+    initialsTitle = '';
+    /** Country select options for `type="country"`. Must be set as a JS property, not an HTML
+     * attribute -- see CONVENTIONS.md's non-string props rule. */
+    countryOptions = [];
+    /** Current selected country code for `type="country"`. */
+    country = '';
+    /** Number of cells for `type="pin"`. */
+    length = 4;
+    /** Whether the `type="dropdown"` trigger is open. Reflects to an attribute so consumers can style
+     * an open state via CSS. When `options` is non-empty, this also controls whether the `bs-menu`
+     * of `bs-menu-item`s is rendered below the field. */
+    open = false;
     bsInput;
     bsChange;
+    /** Emitted when `type="dropdown"`'s trigger is toggled. See `open`'s doc comment for this type's
+     * shell-only limitation. */
+    bsOpen;
+    /** Emitted when a chip is committed (Enter pressed in the draft input) for `type="chip"`. */
+    bsChipAdd;
+    /** Emitted when a chip's remove button is clicked for `type="chip"`. */
+    bsChipRemove;
+    /** Emitted when the title `<select>` changes for `type="initials"`. */
+    bsTitleChange;
+    /** Emitted when the country `<select>` changes for `type="country"`. */
+    bsCountryChange;
+    /** Tracks whether the `icon` slot has assigned content, so the leading icon wrapper only takes
+     * up space in the field when there's actually an icon (same pattern as `bs-button`). */
+    hasIcon = false;
+    /** Tracks whether the `end-icon` slot has assigned content, so the trailing icon wrapper only
+     * takes up space in the field when there's actually a trailing icon. */
+    hasEndIcon = false;
+    /** Whether `type="password"`'s native input is currently rendered as `type="text"` (revealed). The
+     * `type` prop itself stays `'password'` -- this only toggles the rendered native input's type. */
+    passwordVisible = false;
+    /** Draft text for `type="chip"`'s trailing input, committed to a chip on Enter. */
+    chipDraft = '';
+    pinInputs = [];
+    /** Computes the initial `hasIcon`/`hasEndIcon` state directly from the host's light DOM
+     * children, before first render -- see `bs-button`'s `componentWillLoad` for why `slotchange`
+     * alone isn't enough for a slot that starts (and stays) empty. */
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+        this.hasEndIcon = this.hasSlottedContent('end-icon');
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === slotName);
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onEndIconSlotchange = (ev) => {
+        this.hasEndIcon = ev.target.assignedNodes().length > 0;
+    };
     onInput = (ev) => {
         const value = ev.target.value;
         this.bsInput.emit(value);
@@ -27,11 +109,195 @@ const BsInput = class {
         const value = ev.target.value;
         this.bsChange.emit(value);
     };
+    clampNumber(n) {
+        if (this.min !== undefined && n < this.min)
+            n = this.min;
+        if (this.max !== undefined && n > this.max)
+            n = this.max;
+        return n;
+    }
+    onStepperIncrement = () => {
+        if (this.disabled)
+            return;
+        const next = this.clampNumber((parseFloat(this.value) || 0) + this.step);
+        this.value = String(next);
+        this.bsChange.emit(this.value);
+    };
+    onStepperDecrement = () => {
+        if (this.disabled)
+            return;
+        const next = this.clampNumber((parseFloat(this.value) || 0) - this.step);
+        this.value = String(next);
+        this.bsChange.emit(this.value);
+    };
+    onTogglePasswordVisibility = () => {
+        this.passwordVisible = !this.passwordVisible;
+    };
+    onDropdownToggle = () => {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+        this.bsOpen.emit(this.open);
+    };
+    onDropdownKeydown = (ev) => {
+        if (ev.key === 'Enter' || ev.key === ' ') {
+            ev.preventDefault();
+            this.onDropdownToggle();
+        }
+    };
+    onDropdownOptionSelect = (option) => () => {
+        this.value = option.label;
+        this.open = false;
+        this.bsChange.emit(this.value);
+    };
+    /** Closes the `type="dropdown"` menu on Escape, from anywhere within the component (host is the
+     * default @Listen target, and both keydown from the native control and from `bs-menu-item`
+     * buttons bubble/compose up to it). */
+    onHostKeydown(ev) {
+        if (this.type === 'dropdown' && this.open && ev.key === 'Escape') {
+            this.open = false;
+        }
+    }
+    /** Closes the `type="dropdown"` menu 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-item` shadow boundary too. */
+    onHostFocusOut(ev) {
+        if (this.type !== 'dropdown' || !this.open)
+            return;
+        const related = ev.relatedTarget;
+        if (!related || !this.el.contains(related)) {
+            this.open = false;
+        }
+    }
+    onChipDraftInput = (ev) => {
+        this.chipDraft = ev.target.value;
+    };
+    onChipDraftKeydown = (ev) => {
+        if (ev.key === 'Enter') {
+            ev.preventDefault();
+            const value = this.chipDraft.trim();
+            if (value) {
+                this.bsChipAdd.emit(value);
+                this.chipDraft = '';
+            }
+        }
+    };
+    onChipRemove = (chip) => () => {
+        this.bsChipRemove.emit(chip);
+    };
+    onTitleChange = (ev) => {
+        this.bsTitleChange.emit(ev.target.value);
+    };
+    onCountryChange = (ev) => {
+        this.bsCountryChange.emit(ev.target.value);
+    };
+    onPinInput = (index) => (ev) => {
+        const input = ev.target;
+        let value = input.value;
+        if (value.length > 1) {
+            value = value.slice(-1);
+            input.value = value;
+        }
+        if (value && index < this.length - 1) {
+            this.pinInputs[index + 1]?.focus();
+        }
+        this.bsChange.emit(this.pinInputs.map(i => i?.value ?? '').join(''));
+    };
+    onPinKeydown = (index) => (ev) => {
+        if (ev.key === 'Backspace' && !ev.target.value && index > 0) {
+            this.pinInputs[index - 1]?.focus();
+        }
+    };
+    get showsEndIconArea() {
+        return (this.type === 'number' || this.type === 'password' || this.type === 'dropdown' || this.type === 'date' || this.hasEndIcon);
+    }
+    get showsIconArea() {
+        return (this.type === 'search' && !this.hasIcon) || this.hasIcon;
+    }
+    renderIconContent() {
+        if (this.type === 'search' && !this.hasIcon) {
+            return (h("svg", { class: "bs-input__search-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", "stroke-width": "1.3" }), h("path", { d: "M11 11L14.5 14.5", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round" })));
+        }
+        return h("slot", { name: "icon", onSlotchange: this.onIconSlotchange });
+    }
+    renderEndIconContent() {
+        if (this.type === 'number') {
+            return (h("span", { class: "bs-input__stepper" }, h("button", { type: "button", part: "control", class: "bs-input__stepper-btn", "aria-label": "Increment", tabIndex: -1, disabled: this.disabled, onClick: this.onStepperIncrement }, h("svg", { viewBox: "0 0 10 6", width: "10", height: "6", "aria-hidden": "true" }, h("path", { d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.3", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { type: "button", part: "control", class: "bs-input__stepper-btn", "aria-label": "Decrement", tabIndex: -1, disabled: this.disabled, onClick: this.onStepperDecrement }, h("svg", { viewBox: "0 0 10 6", width: "10", height: "6", "aria-hidden": "true" }, h("path", { d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.3", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        }
+        if (this.type === 'password') {
+            return (h("button", { type: "button", part: "control", class: "bs-input__password-toggle", "aria-label": this.passwordVisible ? 'Hide password' : 'Show password', disabled: this.disabled, onClick: this.onTogglePasswordVisibility }, this.passwordVisible ? (h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 8C2.2 5.5 4.9 3 8 3C11.1 3 13.8 5.5 15 8C13.8 10.5 11.1 13 8 13C4.9 13 2.2 10.5 1 8Z", stroke: "currentColor", "stroke-width": "1.2", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M2 2L14 14", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }))) : (h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 8C2.2 5.5 4.9 3 8 3C11.1 3 13.8 5.5 15 8C13.8 10.5 11.1 13 8 13C4.9 13 2.2 10.5 1 8Z", stroke: "currentColor", "stroke-width": "1.2", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" })))));
+        }
+        if (this.type === 'dropdown') {
+            return (h("svg", { class: "bs-input__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+        }
+        if (this.type === 'date' && !this.hasEndIcon) {
+            return (h("svg", { class: "bs-input__calendar", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("rect", { x: "2", y: "3", width: "12", height: "11", rx: "1", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M2 6.5H14", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M5 1.5V4M11 1.5V4", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" })));
+        }
+        return h("slot", { name: "end-icon", onSlotchange: this.onEndIconSlotchange });
+    }
+    renderStandardControl() {
+        const nativeType = this.type === 'password' ? (this.passwordVisible ? 'text' : 'password') : this.type === 'dropdown' ? 'text' : this.type;
+        return (h("input", { id: "control", part: "control", class: "bs-input__control", type: nativeType, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.type === 'dropdown', min: this.type === 'number' ? this.min : undefined, max: this.type === 'number' ? this.max : undefined, step: this.type === 'number' ? this.step : undefined, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
+    }
+    renderSelectControl() {
+        return (h("select", { id: "control", part: "control", class: "bs-input__control", disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }, this.options.map(opt => (h("option", { value: opt.value, selected: opt.value === this.value }, opt.label)))));
+    }
+    renderTextareaControl() {
+        return (h("textarea", { id: "control", part: "control", class: "bs-input__control bs-input__control--textarea", rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
+    }
+    renderChipControl() {
+        return (h("div", { class: "bs-input__chips" }, this.chips.map(chip => (h("span", { part: "chip", class: "bs-input__chip" }, chip, h("button", { type: "button", class: "bs-input__chip-remove", "aria-label": `Remove ${chip}`, onClick: this.onChipRemove(chip) }, "\u00D7")))), h("input", { id: "control", part: "control", class: "bs-input__control bs-input__chip-input", type: "text", value: this.chipDraft, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onChipDraftInput, onKeyDown: this.onChipDraftKeydown })));
+    }
+    renderInitialsControl() {
+        return [
+            h("select", { part: "control", class: "bs-input__control bs-input__title-select", disabled: this.disabled, onChange: this.onTitleChange }, this.titleOptions.map(opt => (h("option", { value: opt, selected: opt === this.initialsTitle }, opt)))),
+            h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }),
+        ];
+    }
+    renderCountryControl() {
+        return [
+            h("select", { part: "control", class: "bs-input__control bs-input__country-select", disabled: this.disabled, onChange: this.onCountryChange }, this.countryOptions.map(opt => (h("option", { value: opt.code, selected: opt.code === this.country }, opt.flagIcon ? `${opt.flagIcon} ` : '', opt.code, " ", opt.label)))),
+            h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }),
+        ];
+    }
+    renderControl() {
+        switch (this.type) {
+            case 'select':
+                return this.renderSelectControl();
+            case 'textarea':
+                return this.renderTextareaControl();
+            case 'chip':
+                return this.renderChipControl();
+            case 'initials':
+                return this.renderInitialsControl();
+            case 'country':
+                return this.renderCountryControl();
+            default:
+                return this.renderStandardControl();
+        }
+    }
+    renderField() {
+        const fieldClasses = [
+            'bs-input__field',
+            this.error ? 'bs-input__field--error' : '',
+            this.disabled ? 'bs-input__field--disabled' : '',
+            this.type === 'textarea' ? 'bs-input__field--textarea' : '',
+            this.type === 'chip' ? 'bs-input__field--chip' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const isDropdown = this.type === 'dropdown';
+        return (h("div", { class: "bs-input__field-wrapper" }, h("div", { part: "field", class: fieldClasses, onClick: isDropdown ? this.onDropdownToggle : undefined, onKeyDown: isDropdown ? this.onDropdownKeydown : undefined, "aria-haspopup": isDropdown ? 'listbox' : undefined, "aria-expanded": isDropdown ? String(this.open) : undefined }, h("span", { part: "icon", class: `bs-input__icon ${this.showsIconArea ? 'bs-input__icon--visible' : ''}` }, this.renderIconContent()), this.renderControl(), h("span", { part: "end-icon", class: `bs-input__end-icon ${this.showsEndIconArea ? 'bs-input__end-icon--visible' : ''}` }, this.renderEndIconContent())), isDropdown && this.open && this.options.length > 0 && (h("bs-menu", { part: "menu", class: "bs-input__dropdown-menu", role: "listbox" }, this.options.map(option => (h("bs-menu-item", { key: option.value, onBsSelect: this.onDropdownOptionSelect(option) }, option.label)))))));
+    }
+    renderPinField() {
+        this.pinInputs = [];
+        return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${this.disabled ? 'bs-input__field--disabled' : ''}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
+    }
     render() {
-        return (h("div", { key: '2c6b38b4594ccde2536515fcd252831bacb6aaeb', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: 'a929eee8f7b100f372763a259f5d5fed298c8dff', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '9df0fae013470d8a77b0cc6288c8178b1ac62e0d', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: 'a6ddc857d33c4e51a4c64b422a7df5b6261f5180', id: "control", part: "control", class: "bs-input__control", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: 'fba27eccc9a351caa58fd849aad54e9388de361c', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: 'd4852798433e75b6c4cac34a9fbc5f9c23c8925d', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/esm/{bs-menu-item.entry.js → bs-menu_2.entry.js}

@@ -1,4 +1,16 @@
-import { r as registerInstance, c as createEvent, h } from './index-nLORuTUY.js';
+import { r as registerInstance, h, c as createEvent } from './index-nLORuTUY.js';
+
+const bsMenuCss = () => `:host{display:block;--bs-menu-bg:var(--bs-surface-raised);--bs-menu-radius:var(--bs-border-radius-100);--bs-menu-padding-y:var(--bs-spacing-50);--bs-menu-gap:var(--bs-spacing-50);--bs-menu-shadow:var(--bs-shadow-sm)}.bs-menu{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-menu-gap);background:var(--bs-menu-bg);border-radius:var(--bs-menu-radius);padding:var(--bs-menu-padding-y) 0;box-shadow:var(--bs-menu-shadow);font-family:inherit}`;
+
+const BsMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("div", { key: 'e49c52a18ea8c10399d818a00e0c6b748f0c9b8f', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '7e8cef2af1a068d0ab31fc3aee0abf8b59645a08' })));
+    }
+};
+BsMenu.style = bsMenuCss();
 
 const bsMenuItemCss = () => `:host{display:block;--bs-menu-item-radius:var(--bs-border-radius-100);--bs-menu-item-padding-y:var(--bs-spacing-100);--bs-menu-item-padding-x:var(--bs-spacing-150);--bs-menu-item-gap:var(--bs-spacing-100);--bs-menu-item-hover:var(--bs-color-neutral-container);--bs-menu-item-pressed:var(--bs-color-neutral-container-pressed);--bs-menu-item-icon-color:var(--bs-icon-default);--bs-menu-item-color:var(--bs-text-muted);--bs-menu-item-font-size:var(--bs-font-size-md);--bs-menu-item-line-height:var(--bs-line-height-body-md)}.bs-menu-item{box-sizing:border-box;display:flex;align-items:center;width:100%;height:48px;border:none;cursor:pointer;background:transparent;color:var(--bs-menu-item-color);font-family:inherit;border-radius:var(--bs-menu-item-radius);padding:var(--bs-menu-item-padding-y) var(--bs-menu-item-padding-x);gap:var(--bs-menu-item-gap);transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-menu-item:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-menu-item:hover{background:var(--bs-menu-item-hover)}.bs-menu-item:active{background:var(--bs-menu-item-pressed)}.bs-menu-item__icon{display:none;width:24px;height:24px;flex-shrink:0;color:var(--bs-menu-item-icon-color)}.bs-menu-item__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-menu-item__icon ::slotted(svg){width:24px;height:24px}.bs-menu-item__label{font-size:var(--bs-menu-item-font-size);line-height:calc(var(--bs-menu-item-line-height) * 1px);white-space:nowrap}`;
 
@@ -19,9 +31,9 @@ const BsMenuItem = class {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '6083688b1903b514b0ed6a95a7ee2e64766a94f1', type: "button", part: "item", role: "menuitem", class: "bs-menu-item", onClick: this.onClick }, h("span", { key: '65f3df1d22c0e44ed77073de68ce36631b80a31e', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: 'a41d500967d857cc5e326194c422992aeab74055', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'ab17fb6fd7014b7ec74a2eb93de300812a610136', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '9b41e86d17fecd71cfe0ff1e5c735aaa143a8d12' }))));
+        return (h("button", { key: 'dee92b0e122d1a1d100e950ac5b3a368a94d075b', type: "button", part: "item", role: "menuitem", class: "bs-menu-item", onClick: this.onClick }, h("span", { key: 'e4ce02b4df1ec40bf0f3f72bd1611816e8851909', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '9e19fea7d90078577047b5aea0170c09d27fb340', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '179ce497185c4f9f5bbd238bd0c781a189743ad1', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'dfe5de71a770cc9ff9847d8f687bba01ae9e1b1e' }))));
     }
 };
 BsMenuItem.style = bsMenuItemCss();
 
-export { BsMenuItem as bs_menu_item };
+export { BsMenu as bs_menu, BsMenuItem as bs_menu_item };

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

@@ -0,0 +1,37 @@
+import { r as registerInstance, c as createEvent, h } from './index-nLORuTUY.js';
+
+const bsSourceLinkCss = () => `:host{display:block;--bs-source-link-radius:var(--bs-border-radius-150);--bs-source-link-padding:var(--bs-spacing-150);--bs-source-link-gap:var(--bs-spacing-50);--bs-source-link-icon-gap:var(--bs-spacing-75);--bs-source-link-hover:var(--bs-surface-hover);--bs-source-link-pressed:var(--bs-surface-pressed);--bs-source-link-focus:var(--bs-border-neutral-focus);--bs-source-link-filename-color:var(--bs-text-default);--bs-source-link-meta-color:var(--bs-text-secondary);--bs-source-link-icon-color:var(--bs-icon-default);--bs-source-link-dot-color:var(--bs-text-secondary)}.bs-source-link{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-source-link-gap);width:100%;padding:var(--bs-source-link-padding);background:none;border:none;border-radius:var(--bs-source-link-radius);font-family:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-source-link:hover,.bs-source-link:focus-visible{background:var(--bs-source-link-hover)}.bs-source-link:active{background:var(--bs-source-link-pressed)}.bs-source-link:focus-visible{outline:2px solid var(--bs-source-link-focus);outline-offset:1px}.bs-source-link__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:16px;height:16px;color:var(--bs-source-link-icon-color)}.bs-source-link__left{display:flex;flex:1 0 0;flex-direction:column;gap:2px;min-width:0}.bs-source-link__filename-row{display:flex;align-items:center;gap:var(--bs-source-link-icon-gap);width:100%}.bs-source-link__filename{margin:0;overflow:hidden;color:var(--bs-source-link-filename-color);font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-semibold);line-height:var(--bs-line-height-normal);text-overflow:ellipsis;white-space:nowrap}.bs-source-link__meta{display:flex;align-items:center;gap:var(--bs-spacing-50);padding-left:22px}.bs-source-link__source,.bs-source-link__version{color:var(--bs-source-link-meta-color);font-size:var(--bs-font-size-sm);line-height:var(--bs-line-height-normal);white-space:nowrap}.bs-source-link__dot{width:4px;height:4px;border-radius:50%;background:var(--bs-source-link-dot-color);flex-shrink:0}.bs-source-link__arrow{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:24px;height:24px;color:var(--bs-source-link-icon-color)}`;
+
+const BsSourceLink = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsOpen = createEvent(this, "bsOpen");
+    }
+    /** The cited document's filename. */
+    fileName = 'Source';
+    /** The system/app the document came from (e.g. "HoltePortalen"). */
+    sourceName;
+    /** The document's version label (e.g. "v3.2"). Omit if the source has no version. */
+    version;
+    /** If set, renders the row as a link that opens this URL; otherwise as a button that only emits `bsOpen`. */
+    href;
+    /** `target` used when `href` is set. */
+    target = '_blank';
+    /** Fires on click/activation, whether or not `href` is set -- lets the consuming app log or handle the open. */
+    bsOpen;
+    onClick = () => {
+        this.bsOpen.emit();
+    };
+    render() {
+        const inner = [
+            h("span", { key: '0e55cdcd04b7d6574835c1b5b21c20ad804fc36c', class: "bs-source-link__left" }, h("span", { key: '989f52e1b6b0a353470d65f5e3d75e40486b3842', class: "bs-source-link__filename-row" }, h("span", { key: 'e21ccdb9b78d4db3b18ca07039d61632b4390d80', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'fe35c5c3084af9ddba25db3c46c2d8bbe7e927d0', name: "icon" }, h(FileTextIcon, { key: '5612acc39809cca4d483ab22f2e0b1cb95cdb2e8' }))), h("p", { key: '39d92f5e7e7a50e943ff9a85efd314df5a2abf0b', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'd2eace60d67a344cd2bf522af38950fd3275bea2', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'd8d3fa79fa888db77ef44f402fd8747eb2cecad1', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '738770f5c4b091e59832100a17bda2f2d251ed75', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '56fcf72b43eebb138745d212e8bcaa680f808cd0', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: 'da453b51265f923c19505645cb33832c93863179', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'c23d308322df780d109691f87945bb511461304f' })),
+        ];
+        return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
+    }
+};
+const FileTextIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M9.5 1.5H4C3.73478 1.5 3.48043 1.60536 3.29289 1.79289C3.10536 1.98043 3 2.23478 3 2.5V13.5C3 13.7652 3.10536 14.0196 3.29289 14.2071C3.48043 14.3946 3.73478 14.5 4 14.5H12C12.2652 14.5 12.5196 14.3946 12.7071 14.2071C12.8946 14.0196 13 13.7652 13 13.5V5L9.5 1.5Z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M9.5 1.5V5H13", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M5.5 8.5H10.5", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M5.5 11H10.5", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const ArrowUpRightIcon = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M6.25 13.75L13.75 6.25", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M7.5 6.25H13.75V12.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+BsSourceLink.style = bsSourceLinkCss();
+
+export { BsSourceLink as bs_source_link };

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

@@ -14,7 +14,7 @@ const BsTooltip = class {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: '784b59f0a817e4756e7954588cd5e42a52508262', class: "bs-tooltip" }, h("span", { key: 'b564933fb13a90ab5482c4fde14c99b7431216e5', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: 'ffb9c4d052d7b8ce618ec825d3989b6311c90c03', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'cb6cdfe74feb87b23b90da251aa08e76f3bcf0ff' }))));
+        return (h("div", { key: '7020be9b961d1370449ce37570ae0c9162bd6176', class: "bs-tooltip" }, h("span", { key: 'e21d62d8f701917c7a074c105a7509c9f4582f64', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: 'f011584e85c9d10371f961e49d44b67a3983bd2e', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'f27da1c55a31d3e1a7ee330440ee9b4a3c577e9a' }))));
     }
 };
 BsTooltip.style = bsTooltipCss();

package/dist/esm/loader.js

@@ -4,7 +4,7 @@ export { s as setNonce } from './index-nLORuTUY.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["bs-chatbot-header",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["bs-ai-thinking",[[513,"bs-ai-thinking",{"label":[1]}]]],["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-response-action",[[769,"bs-chatbot-response-action",{"sourcesCount":[2,"sources-count"],"menuOpen":[1540,"menu-open"]},[[4,"click","onDocumentClick"],[4,"keydown","onKeydown"]]]]],["bs-chatbot-suggestion-button",[[769,"bs-chatbot-suggestion-button",{"disabled":[4]}]]],["bs-composer",[[785,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1],"state":[1],"ariaLabel":[1,"aria-label"]}]]],["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-input",[[529,"bs-input",{"value":[1],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[4]}]]],["bs-menu",[[257,"bs-menu"]]],["bs-menu-item",[[769,"bs-menu-item",{"hasIcon":[32]}]]],["bs-modal",[[769,"bs-modal",{"open":[1540],"heading":[1],"size":[1],"hasFooter":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["bs-tooltip",[[769,"bs-tooltip",{"placement":[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-chatbot-header",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["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",[[513,"bs-attachment",{"type":[1],"fileName":[1,"file-name"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"loading":[4],"removable":[4]}]]],["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-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-modal",[[769,"bs-modal",{"open":[1540],"heading":[1],"size":[1],"hasFooter":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["bs-source-link",[[769,"bs-source-link",{"fileName":[1,"file-name"],"sourceName":[1,"source-name"],"version":[1],"href":[1],"target":[1]}]]],["bs-tooltip",[[769,"bs-tooltip",{"placement":[1]}]]],["bs-menu_2",[[257,"bs-menu"],[769,"bs-menu-item",{"hasIcon":[32]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/components/bs-ai-chatbot/bs-ai-chatbot.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+/**
+ * This is not a real component -- `bs-ai-chatbot` isn't a registered custom element. It's a
+ * showcase composing the existing Genie AI components (bs-chatbot-header, bs-ai-greeting,
+ * bs-chatbot-suggestion-button, bs-composer, bs-composer-status-banner, bs-attachment-list,
+ * bs-ai-thinking, bs-chatbot-response-action, bs-chatbot-sources-drawer, bs-ai-disclaimer) into
+ * realistic full-panel use cases, since no single component's own story shows how they fit
+ * together end to end.
+ */
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const EmptyState: Story;
+export declare const ActiveConversation: Story;
+export declare const Thinking: Story;
+export declare const WithSourcesDrawerOpen: Story;
+export declare const UploadingAttachments: Story;
+export declare const SendFailed: Story;

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

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

package/dist/types/components/bs-ai-disclaimer/bs-ai-disclaimer.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A centered caption disclaimer for Genie AI surfaces, e.g. "AI can make mistakes. Please verify
+ * important information."
+ *
+ * ## When to use
+ * - Below or above `bs-composer` in a Genie AI chat panel, to remind users AI output can be wrong.
+ *
+ * ## When not to use
+ * - A general-purpose caption/helper text — use plain text or `bs-input`'s description slot for
+ *   non-AI-related helper copy.
+ *
+ * The default slot (rather than a fixed prop) is intentional: Figma only specifies plain text, but
+ * some consuming apps link out to a policy/help page from this copy, and a slot supports that
+ * without inventing an unconfirmed `href`/link prop.
+ *
+ * @slot - The disclaimer text/content, centered. Defaults to no content -- the consumer supplies
+ *   the copy, e.g. "AI can make mistakes. Please verify important information."
+ * @part text - The disclaimer text container.
+ * @prop --bs-ai-disclaimer-padding-x - Horizontal padding. Aliased to `--bs-spacing-200`.
+ * @prop --bs-ai-disclaimer-text-color - Text color. Aliased to `--bs-text-secondary`.
+ * @prop --bs-ai-disclaimer-font-size - Text font size. Aliased to `--bs-font-size-sm`.
+ * @prop --bs-ai-disclaimer-line-height - Text line height. Aliased to `--bs-line-height-body-sm`.
+ */
+export declare class BsAiDisclaimer {
+    render(): any;
+}

package/dist/types/components/bs-ai-disclaimer/bs-ai-disclaimer.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsAiDisclaimerArgs {
+    text: string;
+}
+declare const meta: Meta<BsAiDisclaimerArgs>;
+export default meta;
+type Story = StoryObj<BsAiDisclaimerArgs>;
+export declare const Default: Story;

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

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

package/dist/types/components/bs-ai-greeting/bs-ai-greeting.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The centered welcome heading shown at the top of an empty Genie AI chat panel, e.g.
+ * "Hi. I'm Genie, your AI assistant." + "How can I help you with [product] today?"
+ *
+ * ## When to use
+ * - The empty/initial state of a Genie AI chat panel, before the user has sent a message.
+ *
+ * ## When not to use
+ * - Once a conversation has started -- this is a one-time empty-state greeting, not a persistent
+ *   header (see `bs-chatbot-header` for that).
+ *
+ * `productName` is optional: Figma's copy has a `[product_name]` placeholder the consuming app is
+ * expected to fill in, but a component shouldn't force a product name to exist, so leaving it
+ * unset falls back to a product-agnostic "How can I help you today?".
+ *
+ * @part heading - The bold "Hi. I'm {assistantName}, your AI assistant." heading.
+ * @part subtext - The "How can I help you..." subtext.
+ * @prop --bs-ai-greeting-gap - Gap between heading and subtext. Aliased to `--bs-spacing-200`.
+ * @prop --bs-ai-greeting-max-width - Max width of the centered content block. Matches Figma's
+ *   490px.
+ * @prop --bs-ai-greeting-heading-color - Heading text color. Aliased to `--bs-text-default`.
+ * @prop --bs-ai-greeting-heading-font-size - Heading font size. Aliased to `--bs-font-size-4xl`.
+ * @prop --bs-ai-greeting-heading-line-height - Heading line height. Figma specifies 28px, which
+ *   doesn't match any `--bs-line-height-heading-*` token (h4 is 32) -- aliased directly to
+ *   `--bs-line-height-body-lg`, the token that happens to share the same numeric value.
+ * @prop --bs-ai-greeting-heading-weight - Heading font weight. Aliased to `--bs-font-weight-bold`.
+ * @prop --bs-ai-greeting-heading-gap - Gap between the two heading lines. Aliased to
+ *   `--bs-spacing-200`.
+ * @prop --bs-ai-greeting-subtext-color - Subtext color. Aliased to `--bs-text-secondary`.
+ * @prop --bs-ai-greeting-subtext-font-size - Subtext font size. Figma specifies 20px, which
+ *   doesn't match the semantic `--bs-text-style-body-lg-size` (18px) -- aliased directly to the
+ *   raw `--bs-font-size-xl` primitive instead.
+ * @prop --bs-ai-greeting-subtext-line-height - Subtext line height. Aliased to
+ *   `--bs-line-height-body-lg`.
+ */
+export declare class BsAiGreeting {
+    /** The assistant's name, used in the heading ("Hi. I'm {assistantName},"). */
+    assistantName: string;
+    /** The product name mentioned in the subtext. Omit to use a product-agnostic subtext. */
+    productName?: string;
+    render(): any;
+}

package/dist/types/components/bs-ai-greeting/bs-ai-greeting.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsAiGreetingArgs {
+    assistantName: string;
+    productName: string;
+}
+declare const meta: Meta<BsAiGreetingArgs>;
+export default meta;
+type Story = StoryObj<BsAiGreetingArgs>;
+export declare const Default: Story;
+export declare const WithoutProductName: Story;

package/dist/types/components/bs-ai-thinking/bs-ai-thinking.d.ts

@@ -1,7 +1,7 @@
 /**
  * A small inline status indicator for Genie AI surfaces: the colorful Genie mark next to a label
- * (e.g. "Retrieving", "Thinking", "Searching") whose text pulses in a slow breathing loop while
- * an operation is in progress.
+ * (e.g. "Retrieving", "Thinking", "Searching") whose text shimmers with a moving highlight band
+ * while an operation is in progress.
  *
  * ## When to use
  * - Inline in a Genie AI chat transcript to show what the assistant is currently doing while a
@@ -10,20 +10,18 @@
  * ## When not to use
  * - A blocking/full-panel loading state -- this is a small inline indicator, not a spinner overlay.
  *
- * The label's pulse animation reproduces Figma's exact keyframe track (a plain opacity
- * fade-in/hold/reset with the source's own cubic-bezier easing) rather than an invented
- * shimmer-sweep -- the source design only specifies this one animation.
- *
  * @part icon - The Genie mark icon.
  * @part label - The status label text.
  * @prop --bs-ai-thinking-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
  * @prop --bs-ai-thinking-icon-size - Width/height of the icon.
- * @prop --bs-ai-thinking-text - Label color. Aliased to `--bs-text-muted`.
+ * @prop --bs-ai-thinking-text - Label base color. Aliased to `--bs-text-muted`.
+ * @prop --bs-ai-thinking-shimmer-highlight - Color of the moving highlight band. Aliased to
+ *   `--bs-text-default` (more prominent than `--bs-text-muted` in both themes).
  * @prop --bs-ai-thinking-font-size - Label font size. Aliased to `--bs-font-size-md`.
  * @prop --bs-ai-thinking-line-height - Label line height. Aliased to `--bs-line-height-body-md`.
- * @prop --bs-ai-thinking-cycle-duration - Duration of one pulse loop. Figma specifies exactly 2s,
- *   longer than any `--bs-duration-*` token (max `--bs-duration-slower` is 500ms), so this is
- *   aliased directly to the literal value.
+ * @prop --bs-ai-thinking-cycle-duration - Duration of one shimmer sweep. Figma's own keyframe
+ *   track for this label runs over exactly 2s, longer than any `--bs-duration-*` token (max
+ *   `--bs-duration-slower` is 500ms), so this is aliased directly to the literal value.
  */
 export declare class BsAiThinking {
     /** The status text shown next to the icon, e.g. "Retrieving", "Thinking", "Searching". */

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

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