@openvoxproject/voxblocks 0.12.0 → 0.15.0

package/dist/types/components/combobox/vox-combobox.d.ts

@@ -0,0 +1,56 @@
+import { type PropertyValues } from 'lit';
+import { VoxFieldElement } from '../../internal/field.js';
+/**
+ * A text input that filters a list of options as you type. Options are
+ * provided as light-DOM `<option>` children, the same as `<vox-select>`:
+ *
+ * ```html
+ * <vox-combobox label="Module">
+ *   <option value="nginx">puppet-nginx</option>
+ *   <option value="apache">puppet-apache</option>
+ * </vox-combobox>
+ * ```
+ *
+ * Implements the ARIA 1.2 combobox pattern: focus stays on the input and the
+ * active option is tracked with `aria-activedescendant`.
+ * Participates in native form submission via ElementInternals.
+ */
+export declare class VoxCombobox extends VoxFieldElement {
+    /** The selected option's value. */
+    value: string;
+    placeholder?: string;
+    /** Accept text that doesn't match any option. */
+    allowCustom: boolean;
+    /** Message shown when the filter matches nothing. */
+    emptyText: string;
+    /** Text currently in the input. Drives filtering. */
+    private query;
+    private open;
+    private activeIndex;
+    private options;
+    private inputEl;
+    private listboxEl;
+    static styles: import("lit").CSSResult[];
+    private get filtered();
+    private get selectedLabel();
+    willUpdate(changed: PropertyValues<this>): void;
+    formResetCallback(): void;
+    updated(): void;
+    focus(options?: FocusOptions): void;
+    private readOptions;
+    private openList;
+    private close;
+    private select;
+    private moveActive;
+    private scrollActiveIntoView;
+    private handleInput;
+    private handleKeydown;
+    private handleBlur;
+    private optionId;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vox-combobox': VoxCombobox;
+    }
+}

package/dist/types/components/input/vox-input.d.ts

@@ -1,6 +1,8 @@
 import { VoxFieldElement } from '../../internal/field.js';
 /**
- * A single-line text input with label and help note.
+ * A single-line input with label and help note. Accepts any native input
+ * type; `min`/`max`/`step`/`pattern` make the numeric, date and pattern
+ * types enforceable.
  * Participates in native form submission via ElementInternals.
  */
 export declare class VoxInput extends VoxFieldElement {
@@ -9,7 +11,22 @@ export declare class VoxInput extends VoxFieldElement {
     placeholder?: string;
     autocomplete?: string;
     readonly: boolean;
+    /**
+     * Bounds and granularity for the numeric and date-like types. Left as
+     * strings so date types can take `min="2026-01-01"` and number types
+     * `min="0"` through the same attribute.
+     */
+    min?: string;
+    max?: string;
+    step?: string;
+    /** Constraints for the text-like types. */
+    pattern?: string;
+    minlength?: string;
+    maxlength?: string;
+    /** On-screen keyboard hint for touch devices. */
+    inputmode?: string;
     static styles: import("lit").CSSResult;
+    private get accessibleName();
     formResetCallback(): void;
     updated(): void;
     focus(options?: FocusOptions): void;

package/dist/types/components/range/vox-range.d.ts

@@ -0,0 +1,36 @@
+import { VoxFieldElement } from '../../internal/field.js';
+/**
+ * A slider for picking a number from a range. Built on a native
+ * `<input type="range">` so keyboard interaction, the `slider` role and
+ * screen-reader value announcements come from the platform.
+ * Participates in native form submission via ElementInternals.
+ */
+export declare class VoxRange extends VoxFieldElement {
+    value: string;
+    min: string;
+    max: string;
+    step: string;
+    /** Show the current value beside the label. */
+    showValue: boolean;
+    /**
+     * Unit appended to the displayed value and to the spoken value. Use for
+     * things the number alone doesn't convey, e.g. "%" or "MB".
+     */
+    unit: string;
+    private inputEl;
+    /** Value to restore on form reset, per the native reset behaviour. */
+    private defaultValue;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    formResetCallback(): void;
+    updated(): void;
+    focus(options?: FocusOptions): void;
+    private handleInput;
+    private handleChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vox-range': VoxRange;
+    }
+}

package/dist/types/components/select/vox-select.d.ts

@@ -9,14 +9,31 @@ import { VoxFieldElement } from '../../internal/field.js';
  *   <option value="rpm">RHEL</option>
  * </vox-select>
  * ```
+ *
+ * Add `multiple` for a list that accepts more than one selection; read the
+ * result from `values` rather than `value`.
  */
 export declare class VoxSelect extends VoxFieldElement {
     value: string;
+    /** Accept more than one selection, rendering as a scrolling list box. */
+    multiple: boolean;
+    /** Rows shown when `multiple` is set. */
+    size?: number;
+    /** Selected values. Only meaningful when `multiple` is set. */
+    values: string[];
     private selectEl;
     static styles: import("lit").CSSResult[];
     formResetCallback(): void;
     updated(): void;
+    focus(options?: FocusOptions): void;
+    /**
+     * A multi-select submits one entry per selection, which only FormData can
+     * express. Without a `name` there is nothing to key them on, so submit
+     * nothing — matching a native select with no name.
+     */
+    private formData;
     private syncOptions;
+    private selected;
     private handleChange;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/types/index.d.ts

@@ -6,11 +6,13 @@ export { VoxCta } from './components/cta/vox-cta.js';
 export { VoxThemeToggle } from './components/theme-toggle/vox-theme-toggle.js';
 export { VoxIcon } from './components/icon/vox-icon.js';
 export { VoxCheckbox } from './components/checkbox/vox-checkbox.js';
+export { VoxCombobox } from './components/combobox/vox-combobox.js';
 export { VoxFileInput } from './components/file-input/vox-file-input.js';
 export { VoxInput } from './components/input/vox-input.js';
 export { VoxInputGroup } from './components/input-group/vox-input-group.js';
 export { VoxRadio } from './components/radio/vox-radio.js';
 export { VoxRadioGroup } from './components/radio/vox-radio-group.js';
+export { VoxRange } from './components/range/vox-range.js';
 export { VoxSelect } from './components/select/vox-select.js';
 export { VoxSwitch } from './components/switch/vox-switch.js';
 export { VoxTextarea } from './components/textarea/vox-textarea.js';