@brandsync/wc 1.18.0 → 1.20.0

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

@@ -0,0 +1,794 @@
+'use strict';
+
+var index = require('./index-BFxk-bY6.js');
+
+const bsInputCss = () => `:host{display:block;--bs-input-radius:var(--bs-border-radius-100);--bs-input-height:var(--bs-spacing-550);--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-100);--bs-input-pin-gap:var(--bs-spacing-75);--bs-input-pin-cell-size:var(--bs-spacing-550);--bs-input-listbox-bg:var(--bs-surface-raised);--bs-input-listbox-shadow:var(--bs-shadow-sm);--bs-input-listbox-max-height:calc(var(--bs-spacing-600) * 5);--bs-input-picker-min-width:calc(var(--bs-spacing-600) * 4);--bs-input-option-bg-active:var(--bs-color-neutral-container-hover);--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-label-font-size:var(--bs-font-size-sm);--bs-input-label-font-weight:var(--bs-font-weight-medium);--bs-input-label-line-height:normal;--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-initials-title-width:80px;--bs-input-initials-gap:var(--bs-spacing-50)}.bs-input{display:flex;flex-direction:column;gap:var(--bs-input-stack-gap);font-family:inherit}.bs-input__label{font-size:var(--bs-input-label-font-size);font-weight:var(--bs-input-label-font-weight);line-height:var(--bs-input-label-line-height);color:var(--bs-input-label-color)}.bs-input__required{color:var(--bs-input-error-color);margin-inline-start: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;inset-inline-end: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-sm);color:var(--bs-input-description-color)}.bs-input__error{display:flex;align-items:center;gap:var(--bs-spacing-50);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{width:var(--bs-input-icon-size);height:var(--bs-input-icon-size);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-spacing-50));inset-inline-start:0;inset-inline-end:0;z-index:1}.bs-input__control::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.bs-input__calendar-btn{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__calendar-btn:disabled{cursor:not-allowed}.bs-input__combobox-popup{position:absolute;top:calc(100% + var(--bs-spacing-50));inset-inline-start:0;inset-inline-end:0;z-index:1;box-sizing:border-box;background:var(--bs-input-listbox-bg);border-radius:var(--bs-input-radius);box-shadow:var(--bs-input-listbox-shadow);padding:var(--bs-spacing-50) 0}.bs-input__listbox{list-style:none;margin:0;padding:0;max-height:var(--bs-input-listbox-max-height);overflow-y:auto}.bs-input__option,.bs-input__listbox-status{padding:var(--bs-spacing-100) var(--bs-spacing-150);font-size:var(--bs-font-size-md);color:var(--bs-input-field-text)}.bs-input__option{cursor:pointer}.bs-input__option:hover,.bs-input__option--active{background:var(--bs-input-option-bg-active)}.bs-input__listbox-status{color:var(--bs-input-description-color)}.bs-input__clear{--bs-icon-button-size-xs:20px;--bs-icon-button-icon-size-xs:12px}.bs-input__end-icon{gap:var(--bs-spacing-50)}.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{--bs-chip-informative-padding-x-plain-side:var(--bs-spacing-150)}.bs-input__chip-remove{--bs-icon-button-size-xs:20px;--bs-icon-button-icon-size-xs:12px;margin-inline-end:calc(var(--bs-spacing-50) * -1)}.bs-input__chip-input{flex:1;min-width:60px}.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__title-select,.bs-input__country-select{appearance:none;-webkit-appearance:none;-moz-appearance:none}.bs-input__title-select::-ms-expand,.bs-input__country-select::-ms-expand{display:none}.bs-input__select-chevron{flex-shrink:0;width:var(--bs-input-icon-size);height:var(--bs-input-icon-size);color:var(--bs-input-icon-color);pointer-events:none}.bs-input__field--disabled .bs-input__select-chevron{color:var(--bs-input-icon-color-disabled)}.bs-input__initials-row{display:flex;gap:var(--bs-input-initials-gap);width:100%}.bs-input__field--initials-title{flex:0 0 auto;width:var(--bs-input-initials-title-width);gap:var(--bs-spacing-50)}.bs-input__field--initials-title .bs-input__select-chevron{width:10px;height:10px}.bs-input__field--initials-value{flex:1;min-width:0}.bs-input__country-select{width:auto}.bs-input__field--pin{border:none;padding:0;background:transparent;gap:var(--bs-input-pin-gap)}.bs-input__pin-cell{box-sizing:border-box;width:var(--bs-input-pin-cell-size);height:var(--bs-input-pin-cell-size);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}.bs-input__field--pin.bs-input__field--error .bs-input__pin-cell{border-color:var(--bs-input-field-border-error)}.bs-input__picker-trigger{display:flex;align-items:center;gap:var(--bs-spacing-100);height:100%;text-align:start;cursor:pointer}.bs-input__picker-trigger:disabled{cursor:not-allowed}.bs-input__picker-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bs-input__picker-wrap{position:relative;flex:0 0 auto}.bs-input__field--country{flex:0 0 auto;width:auto;gap:var(--bs-spacing-50)}.bs-input__field--country .bs-input__control{flex:0 0 auto}.bs-input__field--country .bs-input__select-chevron{width:10px;height:10px}.bs-input__field--initials-title,.bs-input__field--country{cursor:pointer}.bs-input__field--disabled.bs-input__field--initials-title,.bs-input__field--disabled.bs-input__field--country{cursor:not-allowed}.bs-input__picker-popup{inset-inline-end:auto;min-width:max(100%, var(--bs-input-picker-min-width));z-index:2}.bs-input__flag{flex-shrink:0;line-height:1}.bs-input__flag--img{width:var(--bs-spacing-300);height:auto}.bs-input__option{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-input__option-label{flex:1;white-space:nowrap}.bs-input__option-check{display:none;flex-shrink:0;width:var(--bs-input-icon-size);height:var(--bs-input-icon-size)}.bs-input__option--selected{font-weight:var(--bs-font-weight-medium)}.bs-input__option--selected .bs-input__option-check{display:block}@media (forced-colors: active){.bs-input__control{border:1px solid FieldText}.bs-input__control:focus-visible{outline:2px solid Highlight;outline-offset:2px}}`;
+
+const BsInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsInput = index.createEvent(this, "bsInput");
+        this.bsChange = index.createEvent(this, "bsChange");
+        this.bsOpen = index.createEvent(this, "bsOpen");
+        this.bsOptionSelect = index.createEvent(this, "bsOptionSelect");
+        this.bsChipAdd = index.createEvent(this, "bsChipAdd");
+        this.bsChipRemove = index.createEvent(this, "bsChipRemove");
+        this.bsTitleChange = index.createEvent(this, "bsTitleChange");
+        this.bsCountryChange = index.createEvent(this, "bsCountryChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    internals;
+    initialValue = '';
+    /** The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. */
+    name;
+    /** 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. Mutable so the
+     * `number` type's stepper buttons can update it directly. */
+    value = '';
+    /** Accessible name of the password toggle while the password is hidden. */
+    showPasswordLabel = 'Show password';
+    /** Accessible name of the password toggle while the password is visible. */
+    hidePasswordLabel = 'Hide password';
+    /** Accessible name of the number stepper's increment button. */
+    incrementLabel = 'Increment';
+    /** Accessible name of the number stepper's decrement button. */
+    decrementLabel = 'Decrement';
+    type = 'text';
+    label;
+    /** Accessible name for the control, used only when no visible `label` is set (e.g. a search field
+     * with no visible label). Passed to the inner native control, because an `aria-label` on the
+     * `<bs-input>` host cannot name an element inside its shadow root. */
+    ariaLabel = null;
+    placeholder;
+    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 `role="option"` rows of an in-shadow listbox) 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 = '';
+    /** `type="initials"`: accessible name of the title picker (its visible text is just the title). */
+    titleLabel = 'Title';
+    /** 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 = '';
+    /** `type="country"`: accessible name of the country picker (its visible content is just the flag). */
+    countryLabel = 'Country';
+    /** Number of cells for `type="pin"`. */
+    length = 4;
+    /** `type="combobox"`: shows a loading indicator and, while no options match, a loading message
+     * in the popup instead of "no results". Use while fetching `options` asynchronously. */
+    loading = false;
+    /** `type="combobox"`: when true (default) `options` are filtered client-side by whether the label
+     * contains the typed text. Set false when you supply already-filtered results yourself (e.g. from
+     * a server) in response to `bsInput`. */
+    filterOptions = true;
+    /** `type="combobox"`: text of the popup row shown when no option matches. */
+    noResultsLabel = 'No results';
+    /** `type="combobox"`: text of the popup row shown while `loading` and nothing matches. */
+    loadingLabel = 'Loading...';
+    /** `type="combobox"`: accessible name of the clear button. */
+    clearLabel = 'Clear';
+    /** `type="date"`: accessible name of the default calendar button that opens the native picker. */
+    openPickerLabel = 'Open date picker';
+    /** Whether the `type="dropdown"` / `type="combobox"` popup 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"`. */
+    /** Emitted when an option is chosen for `type="combobox"` (click or Enter), with the option's
+     * `{ label, value }`. `value` of the component itself becomes the option's label (the text shown). */
+    bsOptionSelect;
+    bsChipAdd;
+    /** Emitted when a chip's remove button is clicked for `type="chip"`. */
+    bsChipRemove;
+    /** Emitted when a title is chosen from the picker for `type="initials"`. */
+    bsTitleChange;
+    /** Emitted when a country is chosen from the picker 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 = '';
+    /** Index into the visible (filtered) options of the active option for `type="combobox"`, -1 for none. */
+    activeIndex = -1;
+    /** True once the user has typed in the `type="combobox"` input, so opening it with a value that is
+     * already a chosen label still lists every option instead of only that one. */
+    comboFiltering = false;
+    pinInputs = [];
+    get isPopupType() {
+        return this.type === 'dropdown' || this.type === 'combobox';
+    }
+    /** `select`, `initials` (title) and `country` render a trigger button plus an in-shadow listbox
+     * styled like `bs-menu`, instead of a native `<select>` whose popup cannot be themed. */
+    get isPickerType() {
+        return this.type === 'select' || this.type === 'initials' || this.type === 'country';
+    }
+    typeahead = '';
+    typeaheadTimer;
+    get pickerItems() {
+        if (this.type === 'select')
+            return this.options.map(o => ({ value: o.value, label: o.label }));
+        if (this.type === 'initials')
+            return this.titleOptions.map(o => ({ value: o, label: o }));
+        if (this.type === 'country') {
+            return this.countryOptions.map(o => ({ value: o.code, label: `${o.code} ${o.label}`, flag: o.flagIcon }));
+        }
+        return [];
+    }
+    get pickerSelectedValue() {
+        return this.type === 'select' ? this.value : this.type === 'initials' ? this.initialsTitle : this.country;
+    }
+    get pickerSelectedIndex() {
+        return this.pickerItems.findIndex(i => i.value === this.pickerSelectedValue);
+    }
+    get visibleOptions() {
+        if (this.type !== 'combobox' || !this.filterOptions || !this.comboFiltering || !this.value)
+            return this.options;
+        const q = this.value.toLowerCase();
+        return this.options.filter(o => o.label.toLowerCase().includes(q));
+    }
+    componentDidRender() {
+        if ((this.type === 'combobox' || this.isPickerType) && this.open && this.activeIndex >= 0) {
+            const opt = this.el.shadowRoot?.getElementById(`option-${this.activeIndex}`);
+            opt?.scrollIntoView?.({ block: 'nearest' });
+        }
+    }
+    /** 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.initialValue = this.value;
+        this.syncFormValue();
+        this.hasIcon = this.hasSlottedContent('icon');
+        this.hasEndIcon = this.hasSlottedContent('end-icon');
+    }
+    onFormStateChange() {
+        this.syncFormValue();
+    }
+    /** Pushes the current value + validity to the surrounding form. `chip` submits one entry per
+     * chip under `name`; every other type submits `value` as a single string. */
+    syncFormValue() {
+        if (!this.internals?.setFormValue)
+            return;
+        if (this.type === 'chip' && this.name) {
+            const data = new FormData();
+            this.chips.forEach(c => data.append(this.name, c));
+            this.internals.setFormValue(data);
+        }
+        else {
+            this.internals.setFormValue(this.value ?? '');
+        }
+        const empty = this.type === 'chip' ? this.chips.length === 0 : !this.value;
+        if (this.required && empty) {
+            this.internals.setValidity({ valueMissing: true }, 'Please fill out this field.');
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback() {
+        this.value = this.initialValue;
+    }
+    /** Called when the browser restores form state (back/forward navigation, autofill). */
+    formStateRestoreCallback(state) {
+        if (typeof state === 'string')
+            this.value = state;
+    }
+    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.value = value;
+        if (this.type === 'combobox') {
+            this.comboFiltering = true;
+            this.activeIndex = -1;
+            this.setOpen(true);
+        }
+        this.bsInput.emit(value);
+    };
+    setOpen(open) {
+        if (this.open === open)
+            return;
+        this.open = open;
+        if (!open) {
+            this.activeIndex = -1;
+            this.comboFiltering = false;
+        }
+        this.bsOpen.emit(open);
+    }
+    onComboboxKeydown = (ev) => {
+        if (this.disabled)
+            return;
+        const n = this.visibleOptions.length;
+        switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                ev.preventDefault();
+                if (!this.open) {
+                    this.setOpen(true);
+                    this.activeIndex = n === 0 ? -1 : ev.key === 'ArrowDown' ? 0 : n - 1;
+                }
+                else if (n > 0) {
+                    const down = ev.key === 'ArrowDown';
+                    this.activeIndex = this.activeIndex === -1 ? (down ? 0 : n - 1) : (this.activeIndex + (down ? 1 : -1) + n) % n;
+                }
+                break;
+            }
+            // Home/End only drive the list while an option is active; otherwise they keep moving the
+            // caret in the text field, as users expect from an editable combobox.
+            case 'Home':
+            case 'End':
+                if (this.open && this.activeIndex >= 0 && n > 0) {
+                    ev.preventDefault();
+                    this.activeIndex = ev.key === 'Home' ? 0 : n - 1;
+                }
+                break;
+            case 'Enter':
+                if (this.open && this.activeIndex >= 0 && this.visibleOptions[this.activeIndex]) {
+                    ev.preventDefault();
+                    this.selectComboOption(this.visibleOptions[this.activeIndex]);
+                }
+                break;
+        }
+    };
+    selectComboOption(option) {
+        this.value = option.label;
+        this.setOpen(false);
+        this.bsChange.emit(this.value);
+        this.bsOptionSelect.emit({ label: option.label, value: option.value });
+    }
+    onClear = () => {
+        if (this.disabled)
+            return;
+        this.value = '';
+        this.comboFiltering = true;
+        this.activeIndex = -1;
+        this.bsInput.emit('');
+        this.bsChange.emit('');
+        this.el.shadowRoot?.getElementById('control')?.focus();
+    };
+    onDatePickerOpen = () => {
+        if (this.disabled || this.type !== 'date')
+            return;
+        const input = this.el.shadowRoot?.getElementById('control');
+        if (!input)
+            return;
+        try {
+            if (typeof input.showPicker === 'function')
+                input.showPicker();
+            else
+                input.focus();
+        }
+        catch {
+            input.focus();
+        }
+    };
+    onChange = (ev) => {
+        const value = ev.target.value;
+        this.value = 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.isPopupType || this.isPickerType) && this.open && ev.key === 'Escape') {
+            if (this.type === 'combobox' || this.isPickerType)
+                this.setOpen(false);
+            else
+                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.isPopupType || this.isPickerType) || !this.open)
+            return;
+        const related = ev.relatedTarget;
+        if (!related || !this.el.contains(related)) {
+            if (this.type === 'combobox' || this.isPickerType)
+                this.setOpen(false);
+            else
+                this.open = false;
+        }
+    }
+    /** Closes an open picker on a click anywhere outside the component (focusout alone misses clicks
+     * on non-focusable page areas in some browsers). */
+    onDocumentClick(ev) {
+        if (!this.isPickerType || !this.open)
+            return;
+        if (!ev.composedPath().includes(this.el))
+            this.setOpen(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);
+    };
+    pickerCommit(item) {
+        if (this.type === 'select') {
+            this.value = item.value;
+            this.bsInput.emit(item.value);
+            this.bsChange.emit(item.value);
+        }
+        else if (this.type === 'initials') {
+            this.initialsTitle = item.value;
+            this.bsTitleChange.emit(item.value);
+        }
+        else {
+            this.country = item.value;
+            this.bsCountryChange.emit(item.value);
+        }
+    }
+    pickerOpen() {
+        if (this.pickerItems.length === 0)
+            return;
+        this.setOpen(true);
+        this.activeIndex = Math.max(this.pickerSelectedIndex, 0);
+    }
+    onPickerToggle = () => {
+        if (this.disabled)
+            return;
+        if (this.open)
+            this.setOpen(false);
+        else
+            this.pickerOpen();
+    };
+    onPickerOptionClick = (item) => () => {
+        this.pickerCommit(item);
+        this.setOpen(false);
+    };
+    onPickerKeyup = (ev) => {
+        // Some browsers synthesize a click from Space on keyup even if keydown was prevented.
+        if (ev.key === ' ')
+            ev.preventDefault();
+    };
+    onPickerKeydown = (ev) => {
+        if (this.disabled)
+            return;
+        const items = this.pickerItems;
+        const n = items.length;
+        if (n === 0)
+            return;
+        switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                ev.preventDefault();
+                if (!this.open) {
+                    this.pickerOpen();
+                }
+                else {
+                    const down = ev.key === 'ArrowDown';
+                    this.activeIndex = (this.activeIndex + (down ? 1 : -1) + n) % n;
+                }
+                return;
+            }
+            case 'Home':
+            case 'End':
+                ev.preventDefault();
+                if (!this.open)
+                    this.pickerOpen();
+                this.activeIndex = ev.key === 'Home' ? 0 : n - 1;
+                return;
+            case 'Enter':
+            case ' ':
+                if (ev.key === ' ' && this.typeahead)
+                    break;
+                ev.preventDefault();
+                if (this.open && this.activeIndex >= 0 && items[this.activeIndex]) {
+                    this.pickerCommit(items[this.activeIndex]);
+                    this.setOpen(false);
+                }
+                else if (!this.open) {
+                    this.pickerOpen();
+                }
+                return;
+            case 'Tab':
+                return;
+        }
+        if (ev.key.length === 1 && !ev.ctrlKey && !ev.metaKey && !ev.altKey) {
+            ev.preventDefault();
+            this.typeahead += ev.key.toLowerCase();
+            clearTimeout(this.typeaheadTimer);
+            this.typeaheadTimer = setTimeout(() => (this.typeahead = ''), 500);
+            const from = this.open ? this.activeIndex : this.pickerSelectedIndex;
+            // The same repeated letter cycles through matches; a longer prefix keeps the current match.
+            const single = this.typeahead.split('').every(c => c === this.typeahead[0]);
+            const needle = single ? this.typeahead[0] : this.typeahead;
+            const start = single ? from + 1 : Math.max(from, 0);
+            for (let k = 0; k < n; k++) {
+                const idx = (start + k + n) % n;
+                if (items[idx].label.toLowerCase().startsWith(needle)) {
+                    if (this.open)
+                        this.activeIndex = idx;
+                    else
+                        this.pickerCommit(items[idx]);
+                    return;
+                }
+            }
+        }
+    };
+    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.value = this.pinInputs.map(i => i?.value ?? '').join('');
+        this.bsChange.emit(this.value);
+    };
+    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 === 'combobox' || this.type === 'date' || this.hasEndIcon);
+    }
+    get showsIconArea() {
+        return (this.type === 'search' && !this.hasIcon) || this.hasIcon;
+    }
+    renderIconContent() {
+        if (this.type === 'search' && !this.hasIcon) {
+            return (index.h("svg", { class: "bs-input__search-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", "stroke-width": "1.3" }), index.h("path", { d: "M11 11L14.5 14.5", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round" })));
+        }
+        return index.h("slot", { name: "icon", onSlotchange: this.onIconSlotchange });
+    }
+    renderEndIconContent() {
+        if (this.type === 'number') {
+            return (index.h("span", { class: "bs-input__stepper" }, index.h("button", { type: "button", part: "control", class: "bs-input__stepper-btn", "aria-label": this.incrementLabel, tabIndex: -1, disabled: this.disabled, onClick: this.onStepperIncrement }, index.h("svg", { viewBox: "0 0 10 6", width: "10", height: "6", "aria-hidden": "true" }, index.h("path", { d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.3", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { type: "button", part: "control", class: "bs-input__stepper-btn", "aria-label": this.decrementLabel, tabIndex: -1, disabled: this.disabled, onClick: this.onStepperDecrement }, index.h("svg", { viewBox: "0 0 10 6", width: "10", height: "6", "aria-hidden": "true" }, index.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 (index.h("button", { type: "button", part: "control", class: "bs-input__password-toggle", "aria-label": this.passwordVisible ? this.hidePasswordLabel : this.showPasswordLabel, disabled: this.disabled, onClick: this.onTogglePasswordVisibility }, this.passwordVisible ? (index.h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.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" }), index.h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" }), index.h("path", { d: "M2 2L14 14", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }))) : (index.h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.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" }), index.h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" })))));
+        }
+        if (this.type === 'combobox') {
+            return [
+                this.loading && index.h("bs-spinner", { class: "bs-input__combobox-spinner", size: "sm", label: this.loadingLabel }),
+                this.value && !this.disabled && (index.h("bs-icon-button", { part: "clear", class: "bs-input__clear", variant: "subtle", size: "xs", ariaLabel: this.clearLabel, onMouseDown: (ev) => ev.preventDefault(), onClick: this.onClear }, index.h(ChipRemoveIcon, null))),
+                index.h("svg", { class: "bs-input__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })),
+            ];
+        }
+        if (this.type === 'dropdown') {
+            return (index.h("svg", { class: "bs-input__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.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 (index.h("button", { type: "button", class: "bs-input__calendar-btn", "aria-label": this.openPickerLabel, tabIndex: -1, disabled: this.disabled }, index.h("svg", { class: "bs-input__calendar", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("rect", { x: "2", y: "3", width: "12", height: "11", rx: "1", stroke: "currentColor", "stroke-width": "1.2" }), index.h("path", { d: "M2 6.5H14", stroke: "currentColor", "stroke-width": "1.2" }), index.h("path", { d: "M5 1.5V4M11 1.5V4", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }))));
+        }
+        return index.h("slot", { name: "end-icon", onSlotchange: this.onEndIconSlotchange });
+    }
+    renderStandardControl() {
+        const isCombobox = this.type === 'combobox';
+        const nativeType = this.type === 'password' ? (this.passwordVisible ? 'text' : 'password') : this.isPopupType ? 'text' : this.type;
+        const activeId = isCombobox && this.open && this.activeIndex >= 0 ? `option-${this.activeIndex}` : undefined;
+        return (index.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',
+            // The popup state belongs on the focusable control (a roleless wrapper div can't carry
+            // aria-haspopup/aria-expanded -- axe's aria-allowed-attr flags it).
+            role: this.isPopupType ? 'combobox' : undefined, "aria-haspopup": this.isPopupType ? 'listbox' : undefined, "aria-expanded": this.isPopupType ? String(this.open) : undefined, "aria-controls": isCombobox ? 'listbox' : undefined, "aria-activedescendant": activeId, "aria-autocomplete": isCombobox ? 'list' : undefined, autocomplete: isCombobox ? 'off' : undefined, "aria-label": this.label ? undefined : this.ariaLabel ?? undefined, 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, onKeyDown: isCombobox ? this.onComboboxKeydown : undefined }));
+    }
+    /** An image URL flag renders as `<img>`; anything else (an emoji) as text. */
+    renderFlag(flag) {
+        const isUrl = /^(https?:|\/|\.|data:)/.test(flag);
+        return isUrl ? (index.h("img", { part: "flag", class: "bs-input__flag bs-input__flag--img", src: flag, alt: "" })) : (index.h("span", { part: "flag", class: "bs-input__flag", "aria-hidden": "true" }, flag));
+    }
+    /** The trigger button of the select/title/country pickers: a focusable `role="combobox"` whose
+     * listbox lives in this same shadow root so aria-controls/aria-activedescendant resolve. */
+    renderPickerTrigger() {
+        const items = this.pickerItems;
+        const sel = items[this.pickerSelectedIndex];
+        const shown = sel ?? (this.placeholder ? undefined : items[0]);
+        const isCountry = this.type === 'country';
+        const isTitle = this.type === 'initials';
+        const isSelect = this.type === 'select';
+        const name = isCountry ? this.countryLabel : isTitle ? this.titleLabel : this.label ? undefined : this.ariaLabel ?? undefined;
+        const countryName = isCountry && shown ? this.countryOptions.find(o => o.code === shown.value)?.label : undefined;
+        const ariaLabel = isCountry ? `${name}${countryName ? `: ${countryName}` : ''}` : name;
+        return (index.h("button", { type: "button", id: isSelect ? 'control' : undefined, part: "control", class: `bs-input__control bs-input__picker-trigger ${isCountry ? 'bs-input__country-select' : isTitle ? 'bs-input__title-select' : ''}`, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-controls": "listbox", "aria-activedescendant": this.open && this.activeIndex >= 0 ? `option-${this.activeIndex}` : undefined, "aria-label": ariaLabel, "aria-describedby": isSelect && (this.error || this.description) ? 'description-or-error' : undefined, "aria-invalid": isSelect && this.error ? 'true' : undefined, "aria-required": isSelect && this.required ? 'true' : undefined, disabled: this.disabled, onKeyDown: this.onPickerKeydown, onKeyUp: this.onPickerKeyup }, isCountry ? (shown?.flag ? (this.renderFlag(shown.flag)) : (index.h("span", { class: "bs-input__picker-text" }, shown?.value))) : (index.h("span", { class: "bs-input__picker-text" }, shown ? shown.label : this.placeholder))));
+    }
+    renderPickerPopup() {
+        const listName = this.type === 'initials' ? this.titleLabel : this.type === 'country' ? this.countryLabel : this.label || this.ariaLabel || undefined;
+        return (index.h("div", { part: "menu", class: "bs-input__combobox-popup bs-input__picker-popup" }, index.h("ul", { id: "listbox", role: "listbox", class: "bs-input__listbox", "aria-label": listName }, this.pickerItems.map((item, i) => {
+            const selected = item.value === this.pickerSelectedValue;
+            return (index.h("li", { key: item.value, id: `option-${i}`, part: "option", role: "option", "aria-selected": String(selected), class: `bs-input__option ${i === this.activeIndex ? 'bs-input__option--active' : ''} ${selected ? 'bs-input__option--selected' : ''}`, onMouseDown: (ev) => ev.preventDefault(), onClick: this.onPickerOptionClick(item) }, item.flag && this.renderFlag(item.flag), index.h("span", { class: "bs-input__option-label" }, item.label), selected && (index.h("svg", { class: "bs-input__option-check", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { d: "M3 8.5L6.5 12L13 4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        }))));
+    }
+    renderSelectControl() {
+        return [this.renderPickerTrigger(), this.renderSelectChevron()];
+    }
+    renderTextareaControl() {
+        return (index.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, "aria-label": this.label ? undefined : this.ariaLabel ?? undefined, onInput: this.onInput, onChange: this.onChange }));
+    }
+    renderChipControl() {
+        return (index.h("div", { class: "bs-input__chips" }, this.chips.map(chip => (index.h("bs-chip-informative", { part: "chip", class: "bs-input__chip", size: "md", disabled: this.disabled }, chip, index.h("bs-icon-button", { part: "chip-remove", class: "bs-input__chip-remove", variant: "subtle", size: "xs", ariaLabel: `Remove ${chip}`, disabled: this.disabled, onClick: this.onChipRemove(chip) }, index.h(ChipRemoveIcon, null))))), index.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 })));
+    }
+    // type="initials" renders two genuinely separate bordered boxes side by side (each with its own
+    // border/radius/background, a small gap between them), not one shared field wrapper -- Figma
+    // node 10306:101047 specs this as two independent "Base Input" containers, unlike every other
+    // composite type in this file (`country` included) which shares one field box across its
+    // sub-controls. Bypasses renderField()/renderControl() entirely for this reason, the same way
+    // `pin` already does with its own renderPinField().
+    renderInitialsField() {
+        const disabledClass = this.disabled ? 'bs-input__field--disabled' : '';
+        const errorClass = this.error ? 'bs-input__field--error' : '';
+        return (index.h("div", { class: "bs-input__initials-row" }, index.h("div", { class: "bs-input__picker-wrap" }, index.h("div", { part: "field", class: `bs-input__field bs-input__field--initials-title ${errorClass} ${disabledClass}`, onClick: this.onPickerToggle }, this.renderPickerTrigger(), this.renderSelectChevron()), this.open && this.renderPickerPopup()), index.h("div", { part: "field", class: `bs-input__field bs-input__field--initials-value ${errorClass} ${disabledClass}` }, index.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 }))));
+    }
+    // type="country": like initials, two separate bordered fields -- a compact flag picker and the
+    // phone input.
+    renderCountryField() {
+        const disabledClass = this.disabled ? 'bs-input__field--disabled' : '';
+        const errorClass = this.error ? 'bs-input__field--error' : '';
+        return (index.h("div", { class: "bs-input__initials-row bs-input__country-row" }, index.h("div", { class: "bs-input__picker-wrap" }, index.h("div", { part: "field", class: `bs-input__field bs-input__field--country ${errorClass} ${disabledClass}`, onClick: this.onPickerToggle }, this.renderPickerTrigger(), this.renderSelectChevron()), this.open && this.renderPickerPopup()), index.h("div", { part: "field", class: `bs-input__field bs-input__field--initials-value ${errorClass} ${disabledClass}` }, index.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 }))));
+    }
+    /* Both the initials title <select> and the country <select> have their native OS arrow
+       suppressed (appearance: none in CSS) in favor of this single chevron-down, matching
+       type="dropdown"'s own chevron -- native rendering varies by OS/browser (e.g. an up+down
+       double arrow on some platforms), which this replaces with one consistent icon. */
+    renderSelectChevron() {
+        return (index.h("svg", { class: "bs-input__select-chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+    }
+    renderControl() {
+        switch (this.type) {
+            case 'select':
+                return this.renderSelectControl();
+            case 'textarea':
+                return this.renderTextareaControl();
+            case 'chip':
+                return this.renderChipControl();
+            default:
+                return this.renderStandardControl();
+        }
+    }
+    onComboboxFieldClick = (ev) => {
+        if (this.disabled)
+            return;
+        // The clear button handles itself; only plain field clicks toggle the popup.
+        if (ev.target.closest?.('[part="clear"]'))
+            return;
+        this.setOpen(!this.open);
+    };
+    /** The `type="combobox"` popup. Rendered inside this shadow root so `aria-controls` and
+     * `aria-activedescendant` on the input resolve to real elements. */
+    renderComboboxPopup() {
+        const opts = this.visibleOptions;
+        return (index.h("div", { part: "menu", class: "bs-input__combobox-popup" }, index.h("ul", { id: "listbox", role: "listbox", class: "bs-input__listbox", "aria-label": this.label || this.ariaLabel || undefined }, opts.map((option, i) => (index.h("li", { key: option.value, id: `option-${i}`, part: "option", role: "option", "aria-selected": String(i === this.activeIndex), class: `bs-input__option ${i === this.activeIndex ? 'bs-input__option--active' : ''}`,
+            // Keep focus in the input while choosing with the mouse.
+            onMouseDown: (ev) => ev.preventDefault(), onClick: () => this.selectComboOption(option) }, option.label)))), opts.length === 0 && (index.h("div", { role: "status", class: "bs-input__listbox-status" }, this.loading ? this.loadingLabel : this.noResultsLabel))));
+    }
+    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 (index.h("div", { class: "bs-input__field-wrapper" }, index.h("div", { part: "field", class: fieldClasses, onClick: isDropdown ? this.onDropdownToggle : this.type === 'combobox' ? this.onComboboxFieldClick : this.type === 'select' ? this.onPickerToggle : undefined, onKeyDown: isDropdown ? this.onDropdownKeydown : undefined }, index.h("span", { part: "icon", class: `bs-input__icon ${this.showsIconArea ? 'bs-input__icon--visible' : ''}` }, this.renderIconContent()), this.renderControl(), index.h("span", { part: "end-icon", class: `bs-input__end-icon ${this.showsEndIconArea ? 'bs-input__end-icon--visible' : ''}`, onClick: this.type === 'date' ? this.onDatePickerOpen : undefined }, this.renderEndIconContent())), this.type === 'combobox' && this.open && this.renderComboboxPopup(), this.type === 'select' && this.open && this.renderPickerPopup(), isDropdown && this.open && this.options.length > 0 && (index.h("bs-menu", { part: "menu", class: "bs-input__dropdown-menu", role: "listbox" }, this.options.map(option => (index.h("bs-menu-item", { key: option.value, onBsSelect: this.onDropdownOptionSelect(option) }, option.label)))))));
+    }
+    renderPinField() {
+        this.pinInputs = [];
+        const errorClass = this.error ? 'bs-input__field--error' : '';
+        const disabledClass = this.disabled ? 'bs-input__field--disabled' : '';
+        return (index.h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (index.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 (index.h("div", { key: '9eea22c2c7cbcbdcb2c37403b89c10efc145228d', 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.
+        index.h("label", { key: 'cbd4e5f0cd8fb0f004f7bc9f7e0dc3433d25e8dc', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (index.h("span", { key: 'bcd1fb8d607e87c204cb7d93506aa1c648478f34', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.type === 'country' ? this.renderCountryField() : this.renderField(), this.error ? (index.h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, index.h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), index.h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), index.h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (index.h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "onFormStateChange": 0
+            }],
+        "type": [{
+                "onFormStateChange": 0
+            }],
+        "chips": [{
+                "onFormStateChange": 0
+            }],
+        "required": [{
+                "onFormStateChange": 0
+            }]
+    }; }
+};
+const ChipRemoveIcon = () => (index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M18.75 5.25L5.25 18.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M18.75 18.75L5.25 5.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+BsInput.style = bsInputCss();
+
+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}@media (forced-colors: active){.bs-menu{border:1px solid CanvasText}}`;
+
+const BsMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** WAI-ARIA menu pattern: Up/Down move focus between enabled items (wrapping), Home/End jump
+     * to the first/last. Items are the slotted `bs-menu-item` children. */
+    onKeyDown(ev) {
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(ev.key))
+            return;
+        const items = Array.from(this.el.querySelectorAll('bs-menu-item')).filter(i => !i.disabled);
+        if (items.length === 0)
+            return;
+        const current = items.findIndex(i => i === ev.target || i.contains(ev.target));
+        ev.preventDefault();
+        let next;
+        if (ev.key === 'Home')
+            next = 0;
+        else if (ev.key === 'End')
+            next = items.length - 1;
+        else if (ev.key === 'ArrowDown')
+            next = current === -1 ? 0 : (current + 1) % items.length;
+        else
+            next = current === -1 ? items.length - 1 : (current - 1 + items.length) % items.length;
+        items[next].shadowRoot?.querySelector('button')?.focus();
+    }
+    render() {
+        return (index.h("div", { key: 'c14d9bedef9bcb0bef69c739c8f477d7390af729', part: "list", class: "bs-menu", role: "menu" }, index.h("slot", { key: '6e26c1a053dee4b7ad91e603b82609ac1fee1abb' })));
+    }
+};
+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-hover);--bs-menu-item-pressed:var(--bs-color-neutral-container-pressed);--bs-menu-item-disabled-bg:var(--bs-surface-action-disabled);--bs-menu-item-icon-color:var(--bs-icon-default);--bs-menu-item-icon-color-disabled:var(--bs-icon-disabled);--bs-menu-item-color:var(--bs-text-muted);--bs-menu-item-color-disabled:var(--bs-text-on-disabled);--bs-menu-item-font-size:var(--bs-font-size-md);--bs-menu-item-line-height:var(--bs-line-height-body-md)}.bs-menu-item{position:relative;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--disabled{background:var(--bs-menu-item-disabled-bg);color:var(--bs-menu-item-color-disabled);cursor:not-allowed}.bs-menu-item--disabled:hover,.bs-menu-item--disabled:active{background:var(--bs-menu-item-disabled-bg)}.bs-menu-item--disabled .bs-menu-item__icon{color:var(--bs-menu-item-icon-color-disabled)}.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}`;
+
+const BsMenuItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsSelect = index.createEvent(this, "bsSelect");
+    }
+    /** Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by
+     * keyboard tabbing, and clicking it does not emit `bsSelect`. */
+    disabled = false;
+    /** Tracks whether the `icon` slot has assigned content, so the icon wrapper (and its gap) only
+     * renders when there's actually an icon to show. */
+    hasIcon = false;
+    /** Fires when the item is clicked. */
+    bsSelect;
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onClick = () => {
+        if (this.disabled)
+            return;
+        this.bsSelect.emit();
+    };
+    render() {
+        return (index.h("button", { key: 'c52e126d6150c7814a0d53cc260b3c5ab8aa3c5e', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, index.h("bs-ripple", { key: 'f9da7fdf2cfb591562764f67a84c4c4b511bb348', part: "ripple", centered: false, disabled: this.disabled }), index.h("span", { key: 'a91da1d5500117b6d67a5c6a7398ad8b40064385', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, index.h("slot", { key: '3fa07f929ac18f5aab4ceb26c9712f79379c5f4a', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '2e7e80d88803abc7a6cb54c1eb18df53d49f85a9', part: "label", class: "bs-menu-item__label" }, index.h("slot", { key: 'ad8413c282494014160497635cec1f5efaf44e12' }))));
+    }
+};
+BsMenuItem.style = bsMenuItemCss();
+
+const bsSpinnerCss = () => `:host{display:inline-block;vertical-align:middle;--bs-spinner-size-xs:var(--bs-spacing-200);--bs-spinner-size-sm:var(--bs-spacing-250);--bs-spinner-size-md:var(--bs-spacing-300);--bs-spinner-color:currentColor;--bs-spinner-track-opacity:0.25;--bs-spinner-duration:0.8s}.bs-spinner{display:inline-flex;width:1em;height:1em;color:inherit}.bs-spinner--xs{width:var(--bs-spinner-size-xs);height:var(--bs-spinner-size-xs)}.bs-spinner--sm{width:var(--bs-spinner-size-sm);height:var(--bs-spinner-size-sm)}.bs-spinner--md{width:var(--bs-spinner-size-md);height:var(--bs-spinner-size-md)}.bs-spinner__svg{width:100%;height:100%;animation:bs-spinner-spin var(--bs-spinner-duration) linear infinite}.bs-spinner__track{stroke:var(--bs-spinner-color);opacity:var(--bs-spinner-track-opacity)}.bs-spinner__arc{stroke:var(--bs-spinner-color)}@keyframes bs-spinner-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.bs-spinner__svg{animation-duration:calc(var(--bs-spinner-duration) * 4)}}`;
+
+const BsSpinner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** `xs`/`sm`/`md` use fixed token sizes; `inherit` (default) is `1em`, following the font size. */
+    size = 'inherit';
+    /** Accessible name (e.g. "Loading"). When set, the spinner gets `role="status"` and this
+     * `aria-label`; when omitted it is `aria-hidden="true"` (use it next to visible text that already
+     * says what is happening). */
+    label;
+    render() {
+        const hasLabel = !!this.label;
+        return (index.h("span", { key: '536b5a9eeee4583c4a6e513deb458baa0c2351c7', part: "container", class: `bs-spinner bs-spinner--${this.size}`, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, index.h("svg", { key: '2daa95caf00c24adfbb181b54c510262494b51ae', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, index.h("circle", { key: '27f9997a334a11d735a42ff72a5d6b2293f45087', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), index.h("path", { key: '3d82ac0c874c564dc6383161c0b6b1b293370b88', class: "bs-spinner__arc", d: "M12 3a9 9 0 0 1 9 9", "stroke-width": "3", "stroke-linecap": "round" }))));
+    }
+};
+BsSpinner.style = bsSpinnerCss();
+
+exports.bs_input = BsInput;
+exports.bs_menu = BsMenu;
+exports.bs_menu_item = BsMenuItem;
+exports.bs_spinner = BsSpinner;