# hb-input-select

## Description

Native `<select>` bound to `schemaentry` options from `params.options` (each option has `id`, `value`, and optional `label`). Supports JSON string or object `schemaentry`, optional required state, and `show_validation` for Bulma validation styling on the wrapper (`select.is-success` / `select.is-danger`) plus a `validationTip` shown as `help is-danger`. Dispatches `setVal` with `{ value, valid, id }` on every change. Use `is_small="yes"` for Bulma **`select.is-small`** (compact control, e.g. next to **`hb-paginate`**).

## Styling (Bulma)

The component bundles **Bulma 1.x** form styles (`form/shared`, `form/select`, `form/tools`) scoped to the shadow root, with theme defaults on `:host` (`--bulma-hb-def-*`). To align with the rest of the app, set public **`--bulma-*`** variables on `body` or `:root`; they inherit onto the custom element host.

Markup pattern:

- Wrapper: `div.select` around the native `<select>` (Bulma arrow and control height).
- Validation: `is-success` / `is-danger` modifiers on `div.select` when `show_validation === "yes"` and `schemaentry.required` is set.
- Help text: `p.help.is-danger` with `part="invalid-feedback"` for theming (only when `show_validation === "yes"` and the value is invalid).
- `schemaentry.readonly` maps to the native `disabled` attribute on `<select>` (HTML does not support `readonly` on selects).

## Types

```typescript
export type FormSchemaEntry = {
  /**
   * This will be both the key of the object when submitting the form's data,
   * and also the id in the DOM.
   */
  id: string;

  /**
   * The descriptive label that will show alongside the form control.
   */
  label?: string;

  /**
   * Optional default value.
   */
  value?: string | number | boolean;

  /** When true, the native `<select>` is `disabled` (HTML has no `readonly` on `<select>`). */
  readonly?: boolean;

  /**
   * This doesn't matter if the dependencies requirements aren't met.
   */
  required?: boolean;

  validationRegex?: string;
  /**
   * Shows if value is not valid.
   */
  validationTip?: string;

  placeholder?: string;

  /**
   * Other parameters that may be specific to a certain kind of form control.
   */
  params?: Record<string, any>;
};

export type Component = {
  id?: string;
  style?: string;

  show_validation?: "yes" | "no";
  is_small?: "yes" | "no";
  schemaentry: FormSchemaEntry | undefined;
};

export type Events = {
  setVal: { value: string; valid: boolean; id: string };
};
```