@brandsync/wc 0.0.8 → 0.0.9

package/dist/collection/components/bs-input/bs-input.js

@@ -1,23 +1,51 @@
 import { h } from "@stencil/core";
 /**
- * A single-line text field with an optional label, description, and error state.
+ * A single-line text field with an optional label, description, and error state. Also covers a
+ * range of related "field" shapes (number stepper, password reveal, date, dropdown trigger,
+ * select, textarea, chip input, initials, country, and pin) via the `type` prop, since they all
+ * share the same label/description/error/icon-slot chrome.
  *
  * ## When to use
  * - Collecting a single line of free-text, email, password, or numeric input.
+ * - Any of the other supported `type`s (search, date, dropdown, select, textarea, chip, initials,
+ *   country, pin) that share this component's label/description/error chrome.
  * - Pair with `error` for inline validation feedback tied to that specific field.
  *
  * ## When not to use
- * - Multi-line text — this component has no `textarea` mode.
- * - A fixed set of choices — use a select/radio/checkbox component instead of free text.
+ * - A fixed set of choices best served by a dedicated radio/checkbox group rather than a single
+ *   field. `type="select"` (native `<select>`) and `type="dropdown"` (a `bs-menu` of
+ *   `bs-menu-item`s from the `options` prop) cover the field-shaped cases; `type="chip"` has no
+ *   options list at all (freeform chip entry).
  *
+ * @slot icon - Optional leading icon, rendered before the native control (e.g. a mail icon for an
+ *   email field). For `type="search"`, the slot is used if provided, otherwise a default
+ *   magnifying-glass icon is shown.
+ * @slot end-icon - Optional trailing icon, rendered after the native control (e.g. a chevron for a
+ *   field that opens a picker). Ignored when `type` is `number` (stepper buttons), `password` (show/hide
+ *   toggle), or `dropdown` (chevron) -- those types always render their own trailing control there.
+ *   For `type="date"`, the slot is used if provided, otherwise a default calendar icon is shown.
+ * @part field - The bordered field wrapper containing the icon(s) and native control(s).
+ * @part menu - The `bs-menu` rendered below the field for `type="dropdown"` when `open` and
+ *   `options` is non-empty.
  * @part label - The `<label>` element.
- * @part control - The native `<input>` element.
+ * @part required - The red `*` rendered after the label text when `required` is set.
+ * @part icon - The leading icon wrapper element.
+ * @part control - The native control element (`<input>`, `<select>`, or `<textarea>` depending on
+ *   `type`). Composite types (`initials`, `country`) render this part on more than one element.
+ * @part end-icon - The trailing icon wrapper element.
+ * @part chip - A single chip pill, when `type="chip"`.
  * @part description - The helper text element (hidden when `error` is set).
  * @part error - The error message element.
+ * @part error-icon - The warning icon shown before the error message.
  */
+// Note: this component's CSS Custom Properties (--bs-input-*) are documented via @prop comments
+// in bs-input.css, not here -- Stencil's docs generator only parses @prop out of CSS file
+// comments (see stencil.js's parseStyleDocs/parseCssComment), not the class-level JSDoc.
 export class BsInput {
+    el;
     /** Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this
-     * component re-dispatches them as `bsInput`/`bsChange` custom events instead. */
+     * component re-dispatches them as `bsInput`/`bsChange` custom events instead. Mutable so the
+     * `number` type's stepper buttons can update it directly. */
     value = '';
     type = 'text';
     label;
@@ -25,8 +53,83 @@ export class BsInput {
     description;
     error;
     disabled = false;
+    /** Marks the field as required: renders a red `*` after the label and sets `aria-required="true"`
+     * on the control. Applies regardless of `type`. */
+    required = false;
+    /** Step size for `type="number"`'s increment/decrement stepper buttons. */
+    step = 1;
+    /** Minimum value for `type="number"`'s stepper buttons. */
+    min;
+    /** Maximum value for `type="number"`'s stepper buttons. */
+    max;
+    /** Options for `type="select"` (rendered as native `<option>`s) and `type="dropdown"` (rendered
+     * as a `bs-menu` of `bs-menu-item`s when `open`). Must be set as a JS property, not an HTML
+     * attribute -- see CONVENTIONS.md's non-string props rule. */
+    options = [];
+    /** Number of visible rows for `type="textarea"`. */
+    rows = 3;
+    /** Current chips for `type="chip"`. Must be set as a JS property, not an HTML attribute -- see
+     * CONVENTIONS.md's non-string props rule. */
+    chips = [];
+    /** Title select options for `type="initials"` (e.g. `['Mrs.', 'Mr.', 'Dr.']`). Must be set as a
+     * JS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule. */
+    titleOptions = [];
+    /** Current selected title for `type="initials"`. Named `initialsTitle` rather than `title` --
+     * `title` is a reserved standard HTML attribute (tooltip text) inherited by every element, and
+     * Stencil warns against shadowing it with a component `@Prop`. */
+    initialsTitle = '';
+    /** Country select options for `type="country"`. Must be set as a JS property, not an HTML
+     * attribute -- see CONVENTIONS.md's non-string props rule. */
+    countryOptions = [];
+    /** Current selected country code for `type="country"`. */
+    country = '';
+    /** Number of cells for `type="pin"`. */
+    length = 4;
+    /** Whether the `type="dropdown"` trigger is open. Reflects to an attribute so consumers can style
+     * an open state via CSS. When `options` is non-empty, this also controls whether the `bs-menu`
+     * of `bs-menu-item`s is rendered below the field. */
+    open = false;
     bsInput;
     bsChange;
+    /** Emitted when `type="dropdown"`'s trigger is toggled. See `open`'s doc comment for this type's
+     * shell-only limitation. */
+    bsOpen;
+    /** Emitted when a chip is committed (Enter pressed in the draft input) for `type="chip"`. */
+    bsChipAdd;
+    /** Emitted when a chip's remove button is clicked for `type="chip"`. */
+    bsChipRemove;
+    /** Emitted when the title `<select>` changes for `type="initials"`. */
+    bsTitleChange;
+    /** Emitted when the country `<select>` changes for `type="country"`. */
+    bsCountryChange;
+    /** Tracks whether the `icon` slot has assigned content, so the leading icon wrapper only takes
+     * up space in the field when there's actually an icon (same pattern as `bs-button`). */
+    hasIcon = false;
+    /** Tracks whether the `end-icon` slot has assigned content, so the trailing icon wrapper only
+     * takes up space in the field when there's actually a trailing icon. */
+    hasEndIcon = false;
+    /** Whether `type="password"`'s native input is currently rendered as `type="text"` (revealed). The
+     * `type` prop itself stays `'password'` -- this only toggles the rendered native input's type. */
+    passwordVisible = false;
+    /** Draft text for `type="chip"`'s trailing input, committed to a chip on Enter. */
+    chipDraft = '';
+    pinInputs = [];
+    /** Computes the initial `hasIcon`/`hasEndIcon` state directly from the host's light DOM
+     * children, before first render -- see `bs-button`'s `componentWillLoad` for why `slotchange`
+     * alone isn't enough for a slot that starts (and stays) empty. */
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+        this.hasEndIcon = this.hasSlottedContent('end-icon');
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === slotName);
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onEndIconSlotchange = (ev) => {
+        this.hasEndIcon = ev.target.assignedNodes().length > 0;
+    };
     onInput = (ev) => {
         const value = ev.target.value;
         this.bsInput.emit(value);
@@ -35,11 +138,195 @@ export class BsInput {
         const value = ev.target.value;
         this.bsChange.emit(value);
     };
+    clampNumber(n) {
+        if (this.min !== undefined && n < this.min)
+            n = this.min;
+        if (this.max !== undefined && n > this.max)
+            n = this.max;
+        return n;
+    }
+    onStepperIncrement = () => {
+        if (this.disabled)
+            return;
+        const next = this.clampNumber((parseFloat(this.value) || 0) + this.step);
+        this.value = String(next);
+        this.bsChange.emit(this.value);
+    };
+    onStepperDecrement = () => {
+        if (this.disabled)
+            return;
+        const next = this.clampNumber((parseFloat(this.value) || 0) - this.step);
+        this.value = String(next);
+        this.bsChange.emit(this.value);
+    };
+    onTogglePasswordVisibility = () => {
+        this.passwordVisible = !this.passwordVisible;
+    };
+    onDropdownToggle = () => {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+        this.bsOpen.emit(this.open);
+    };
+    onDropdownKeydown = (ev) => {
+        if (ev.key === 'Enter' || ev.key === ' ') {
+            ev.preventDefault();
+            this.onDropdownToggle();
+        }
+    };
+    onDropdownOptionSelect = (option) => () => {
+        this.value = option.label;
+        this.open = false;
+        this.bsChange.emit(this.value);
+    };
+    /** Closes the `type="dropdown"` menu on Escape, from anywhere within the component (host is the
+     * default @Listen target, and both keydown from the native control and from `bs-menu-item`
+     * buttons bubble/compose up to it). */
+    onHostKeydown(ev) {
+        if (this.type === 'dropdown' && this.open && ev.key === 'Escape') {
+            this.open = false;
+        }
+    }
+    /** Closes the `type="dropdown"` menu once focus leaves the component entirely (e.g. Tab away, or
+     * a click outside that moves focus elsewhere) -- `focusout` is composed, so it bubbles across
+     * the `bs-menu-item` shadow boundary too. */
+    onHostFocusOut(ev) {
+        if (this.type !== 'dropdown' || !this.open)
+            return;
+        const related = ev.relatedTarget;
+        if (!related || !this.el.contains(related)) {
+            this.open = false;
+        }
+    }
+    onChipDraftInput = (ev) => {
+        this.chipDraft = ev.target.value;
+    };
+    onChipDraftKeydown = (ev) => {
+        if (ev.key === 'Enter') {
+            ev.preventDefault();
+            const value = this.chipDraft.trim();
+            if (value) {
+                this.bsChipAdd.emit(value);
+                this.chipDraft = '';
+            }
+        }
+    };
+    onChipRemove = (chip) => () => {
+        this.bsChipRemove.emit(chip);
+    };
+    onTitleChange = (ev) => {
+        this.bsTitleChange.emit(ev.target.value);
+    };
+    onCountryChange = (ev) => {
+        this.bsCountryChange.emit(ev.target.value);
+    };
+    onPinInput = (index) => (ev) => {
+        const input = ev.target;
+        let value = input.value;
+        if (value.length > 1) {
+            value = value.slice(-1);
+            input.value = value;
+        }
+        if (value && index < this.length - 1) {
+            this.pinInputs[index + 1]?.focus();
+        }
+        this.bsChange.emit(this.pinInputs.map(i => i?.value ?? '').join(''));
+    };
+    onPinKeydown = (index) => (ev) => {
+        if (ev.key === 'Backspace' && !ev.target.value && index > 0) {
+            this.pinInputs[index - 1]?.focus();
+        }
+    };
+    get showsEndIconArea() {
+        return (this.type === 'number' || this.type === 'password' || this.type === 'dropdown' || this.type === 'date' || this.hasEndIcon);
+    }
+    get showsIconArea() {
+        return (this.type === 'search' && !this.hasIcon) || this.hasIcon;
+    }
+    renderIconContent() {
+        if (this.type === 'search' && !this.hasIcon) {
+            return (h("svg", { class: "bs-input__search-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", "stroke-width": "1.3" }), h("path", { d: "M11 11L14.5 14.5", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round" })));
+        }
+        return h("slot", { name: "icon", onSlotchange: this.onIconSlotchange });
+    }
+    renderEndIconContent() {
+        if (this.type === 'number') {
+            return (h("span", { class: "bs-input__stepper" }, h("button", { type: "button", part: "control", class: "bs-input__stepper-btn", "aria-label": "Increment", tabIndex: -1, disabled: this.disabled, onClick: this.onStepperIncrement }, h("svg", { viewBox: "0 0 10 6", width: "10", height: "6", "aria-hidden": "true" }, h("path", { d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.3", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { type: "button", part: "control", class: "bs-input__stepper-btn", "aria-label": "Decrement", tabIndex: -1, disabled: this.disabled, onClick: this.onStepperDecrement }, h("svg", { viewBox: "0 0 10 6", width: "10", height: "6", "aria-hidden": "true" }, h("path", { d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.3", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        }
+        if (this.type === 'password') {
+            return (h("button", { type: "button", part: "control", class: "bs-input__password-toggle", "aria-label": this.passwordVisible ? 'Hide password' : 'Show password', disabled: this.disabled, onClick: this.onTogglePasswordVisibility }, this.passwordVisible ? (h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 8C2.2 5.5 4.9 3 8 3C11.1 3 13.8 5.5 15 8C13.8 10.5 11.1 13 8 13C4.9 13 2.2 10.5 1 8Z", stroke: "currentColor", "stroke-width": "1.2", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M2 2L14 14", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }))) : (h("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 8C2.2 5.5 4.9 3 8 3C11.1 3 13.8 5.5 15 8C13.8 10.5 11.1 13 8 13C4.9 13 2.2 10.5 1 8Z", stroke: "currentColor", "stroke-width": "1.2", "stroke-linejoin": "round" }), h("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", "stroke-width": "1.2" })))));
+        }
+        if (this.type === 'dropdown') {
+            return (h("svg", { class: "bs-input__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+        }
+        if (this.type === 'date' && !this.hasEndIcon) {
+            return (h("svg", { class: "bs-input__calendar", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("rect", { x: "2", y: "3", width: "12", height: "11", rx: "1", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M2 6.5H14", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M5 1.5V4M11 1.5V4", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" })));
+        }
+        return h("slot", { name: "end-icon", onSlotchange: this.onEndIconSlotchange });
+    }
+    renderStandardControl() {
+        const nativeType = this.type === 'password' ? (this.passwordVisible ? 'text' : 'password') : this.type === 'dropdown' ? 'text' : this.type;
+        return (h("input", { id: "control", part: "control", class: "bs-input__control", type: nativeType, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.type === 'dropdown', min: this.type === 'number' ? this.min : undefined, max: this.type === 'number' ? this.max : undefined, step: this.type === 'number' ? this.step : undefined, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
+    }
+    renderSelectControl() {
+        return (h("select", { id: "control", part: "control", class: "bs-input__control", disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }, this.options.map(opt => (h("option", { value: opt.value, selected: opt.value === this.value }, opt.label)))));
+    }
+    renderTextareaControl() {
+        return (h("textarea", { id: "control", part: "control", class: "bs-input__control bs-input__control--textarea", rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
+    }
+    renderChipControl() {
+        return (h("div", { class: "bs-input__chips" }, this.chips.map(chip => (h("span", { part: "chip", class: "bs-input__chip" }, chip, h("button", { type: "button", class: "bs-input__chip-remove", "aria-label": `Remove ${chip}`, onClick: this.onChipRemove(chip) }, "\u00D7")))), h("input", { id: "control", part: "control", class: "bs-input__control bs-input__chip-input", type: "text", value: this.chipDraft, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onChipDraftInput, onKeyDown: this.onChipDraftKeydown })));
+    }
+    renderInitialsControl() {
+        return [
+            h("select", { part: "control", class: "bs-input__control bs-input__title-select", disabled: this.disabled, onChange: this.onTitleChange }, this.titleOptions.map(opt => (h("option", { value: opt, selected: opt === this.initialsTitle }, opt)))),
+            h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }),
+        ];
+    }
+    renderCountryControl() {
+        return [
+            h("select", { part: "control", class: "bs-input__control bs-input__country-select", disabled: this.disabled, onChange: this.onCountryChange }, this.countryOptions.map(opt => (h("option", { value: opt.code, selected: opt.code === this.country }, opt.flagIcon ? `${opt.flagIcon} ` : '', opt.code, " ", opt.label)))),
+            h("input", { id: "control", part: "control", class: "bs-input__control", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }),
+        ];
+    }
+    renderControl() {
+        switch (this.type) {
+            case 'select':
+                return this.renderSelectControl();
+            case 'textarea':
+                return this.renderTextareaControl();
+            case 'chip':
+                return this.renderChipControl();
+            case 'initials':
+                return this.renderInitialsControl();
+            case 'country':
+                return this.renderCountryControl();
+            default:
+                return this.renderStandardControl();
+        }
+    }
+    renderField() {
+        const fieldClasses = [
+            'bs-input__field',
+            this.error ? 'bs-input__field--error' : '',
+            this.disabled ? 'bs-input__field--disabled' : '',
+            this.type === 'textarea' ? 'bs-input__field--textarea' : '',
+            this.type === 'chip' ? 'bs-input__field--chip' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const isDropdown = this.type === 'dropdown';
+        return (h("div", { class: "bs-input__field-wrapper" }, h("div", { part: "field", class: fieldClasses, onClick: isDropdown ? this.onDropdownToggle : undefined, onKeyDown: isDropdown ? this.onDropdownKeydown : undefined, "aria-haspopup": isDropdown ? 'listbox' : undefined, "aria-expanded": isDropdown ? String(this.open) : undefined }, h("span", { part: "icon", class: `bs-input__icon ${this.showsIconArea ? 'bs-input__icon--visible' : ''}` }, this.renderIconContent()), this.renderControl(), h("span", { part: "end-icon", class: `bs-input__end-icon ${this.showsEndIconArea ? 'bs-input__end-icon--visible' : ''}` }, this.renderEndIconContent())), isDropdown && this.open && this.options.length > 0 && (h("bs-menu", { part: "menu", class: "bs-input__dropdown-menu", role: "listbox" }, this.options.map(option => (h("bs-menu-item", { key: option.value, onBsSelect: this.onDropdownOptionSelect(option) }, option.label)))))));
+    }
+    renderPinField() {
+        this.pinInputs = [];
+        return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${this.disabled ? 'bs-input__field--disabled' : ''}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
+    }
     render() {
-        return (h("div", { key: '2c6b38b4594ccde2536515fcd252831bacb6aaeb', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: 'a929eee8f7b100f372763a259f5d5fed298c8dff', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '9df0fae013470d8a77b0cc6288c8178b1ac62e0d', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: 'a6ddc857d33c4e51a4c64b422a7df5b6261f5180', id: "control", part: "control", class: "bs-input__control", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: 'fba27eccc9a351caa58fd849aad54e9388de361c', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: 'd4852798433e75b6c4cac34a9fbc5f9c23c8925d', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }
@@ -58,7 +345,7 @@ export class BsInput {
         return {
             "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -68,7 +355,7 @@ export class BsInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this\ncomponent re-dispatches them as `bsInput`/`bsChange` custom events instead."
+                    "text": "Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this\ncomponent re-dispatches them as `bsInput`/`bsChange` custom events instead. Mutable so the\n`number` type's stepper buttons can update it directly."
                 },
                 "getter": false,
                 "setter": false,
@@ -80,8 +367,8 @@ export class BsInput {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'text' | 'email' | 'password' | 'number'",
-                    "resolved": "\"email\" | \"number\" | \"password\" | \"text\"",
+                    "original": "| 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'search'\n    | 'date'\n    | 'dropdown'\n    | 'select'\n    | 'textarea'\n    | 'chip'\n    | 'initials'\n    | 'country'\n    | 'pin'",
+                    "resolved": "\"chip\" | \"country\" | \"date\" | \"dropdown\" | \"email\" | \"initials\" | \"number\" | \"password\" | \"pin\" | \"search\" | \"select\" | \"text\" | \"textarea\"",
                     "references": {}
                 },
                 "required": false,
@@ -191,9 +478,267 @@ export class BsInput {
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the field as required: renders a red `*` after the label and sets `aria-required=\"true\"`\non the control. Applies regardless of `type`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step size for `type=\"number\"`'s increment/decrement stepper buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum value for `type=\"number\"`'s stepper buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value for `type=\"number\"`'s stepper buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ label: string; value: string }[]",
+                    "resolved": "{ label: string; value: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options for `type=\"select\"` (rendered as native `<option>`s) and `type=\"dropdown\"` (rendered\nas a `bs-menu` of `bs-menu-item`s when `open`). Must be set as a JS property, not an HTML\nattribute -- see CONVENTIONS.md's non-string props rule."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of visible rows for `type=\"textarea\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "3"
+            },
+            "chips": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current chips for `type=\"chip\"`. Must be set as a JS property, not an HTML attribute -- see\nCONVENTIONS.md's non-string props rule."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "titleOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title select options for `type=\"initials\"` (e.g. `['Mrs.', 'Mr.', 'Dr.']`). Must be set as a\nJS property, not an HTML attribute -- see CONVENTIONS.md's non-string props rule."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "initialsTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current selected title for `type=\"initials\"`. Named `initialsTitle` rather than `title` --\n`title` is a reserved standard HTML attribute (tooltip text) inherited by every element, and\nStencil warns against shadowing it with a component `@Prop`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initials-title",
+                "defaultValue": "''"
+            },
+            "countryOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ code: string; label: string; flagIcon?: string }[]",
+                    "resolved": "{ code: string; label: string; flagIcon?: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Country select options for `type=\"country\"`. Must be set as a JS property, not an HTML\nattribute -- see CONVENTIONS.md's non-string props rule."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current selected country code for `type=\"country\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country",
+                "defaultValue": "''"
+            },
+            "length": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of cells for `type=\"pin\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "length",
+                "defaultValue": "4"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the `type=\"dropdown\"` trigger is open. Reflects to an attribute so consumers can style\nan open state via CSS. When `options` is non-empty, this also controls whether the `bs-menu`\nof `bs-menu-item`s is rendered below the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "hasEndIcon": {},
+            "passwordVisible": {},
+            "chipDraft": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bsInput",
@@ -225,6 +770,97 @@ export class BsInput {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "bsOpen",
+                "name": "bsOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when `type=\"dropdown\"`'s trigger is toggled. See `open`'s doc comment for this type's\nshell-only limitation."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "bsChipAdd",
+                "name": "bsChipAdd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a chip is committed (Enter pressed in the draft input) for `type=\"chip\"`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bsChipRemove",
+                "name": "bsChipRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a chip's remove button is clicked for `type=\"chip\"`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bsTitleChange",
+                "name": "bsTitleChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the title `<select>` changes for `type=\"initials\"`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bsCountryChange",
+                "name": "bsCountryChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the country `<select>` changes for `type=\"country\"`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onHostKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onHostFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }