@brandsync/wc 1.18.0 → 1.20.0

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

@@ -1,457 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3SkQJpw.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-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-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-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));inset-inline-start:0;inset-inline-end: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{--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-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}.bs-input__field--pin.bs-input__field--error .bs-input__pin-cell{border-color:var(--bs-input-field-border-error)}@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) {
-        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");
-        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 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;
-    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 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.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;
-        this.bsInput.emit(value);
-    };
-    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.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.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 === '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": this.incrementLabel, 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": this.decrementLabel, 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 ? this.hidePasswordLabel : this.showPasswordLabel, 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',
-            // 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.type === 'dropdown' ? 'combobox' : undefined, "aria-haspopup": this.type === 'dropdown' ? 'listbox' : undefined, "aria-expanded": this.type === 'dropdown' ? String(this.open) : 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 }));
-    }
-    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("bs-chip-informative", { part: "chip", class: "bs-input__chip", size: "sm", disabled: this.disabled }, chip, 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) }, h(ChipRemoveIcon, null))))), 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' : '';
-        return (h("div", { class: "bs-input__initials-row" }, h("div", { part: "field", class: `bs-input__field bs-input__field--initials-title ${this.error ? 'bs-input__field--error' : ''} ${disabledClass}` }, 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)))), this.renderSelectChevron()), h("div", { part: "field", class: `bs-input__field bs-input__field--initials-value ${this.error ? 'bs-input__field--error' : ''} ${disabledClass}` }, 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 (h("svg", { class: "bs-input__select-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" })));
-    }
-    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)))),
-            this.renderSelectChevron(),
-            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 '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 }, 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 = [];
-        const errorClass = this.error ? 'bs-input__field--error' : '';
-        const disabledClass = this.disabled ? 'bs-input__field--disabled' : '';
-        return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, 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: '3c0ea65d5b8852b14e1295d6a6a33aef95d02d01', 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: '13e99193d9906c7c7534df1c9bd6395f1a758524', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: 'ac14aa6322a8ce40624cdc392dde96b7bad298a8', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : 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; }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "value": [{
-                "onFormStateChange": 0
-            }],
-        "type": [{
-                "onFormStateChange": 0
-            }],
-        "chips": [{
-                "onFormStateChange": 0
-            }],
-        "required": [{
-                "onFormStateChange": 0
-            }]
-    }; }
-};
-const ChipRemoveIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M18.75 5.25L5.25 18.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), 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) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return 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 (h("div", { key: '850122bbadc472043159746a66002281d53ddd7b', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '5a64d51431e7cad88d5a7f4d01aa004098e9b2d2' })));
-    }
-};
-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{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) {
-        registerInstance(this, hostRef);
-        this.bsSelect = 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 (h("button", { key: '6b051d2fd71b1be59a253c9eb10e7a8f1242e110', 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 }, h("span", { key: '245b088e3d5243d4b6ca8871b087d53174405590', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: 'f325951ecf61f5b2e39d54fb9dd7deda9fc313cb', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2d89029982559af29db78a0ba2fd48ccfbc1c416', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '56681e9c1241233fc36e9bcd5a19c58ef3af5b4b' }))));
-    }
-};
-BsMenuItem.style = bsMenuItemCss();
-
-export { BsInput as bs_input, BsMenu as bs_menu, BsMenuItem as bs_menu_item };