kanto-ds 1.6.0 → 1.7.0

package/dist/docs/kt-date-picker.md

@@ -0,0 +1,116 @@
+# `<kt-date-picker>`
+
+A date field with a calendar, for one day or a period.
+
+```html
+<kt-date-picker label="Due date" name="due" min="2026-01-01"></kt-date-picker>
+<kt-date-picker range label="Report period" value="2026-09-01/2026-09-25"></kt-date-picker>
+```
+
+## ISO in, the reader's language out
+
+The value is ISO 8601 text — what a server, a database and
+`<input type="date">` already speak:
+
+- one day: `2026-09-25`
+- a period, with `range`: `2026-09-01/2026-09-25`, the ISO interval
+
+What the field shows is the same value formatted for the reader: "25 Sept
+2026", "1–25 Sept 2026". The calendar's month names, weekday names and first
+day of the week follow the locale too — weeks start on Monday in France, on
+Sunday in the US. The locale is `locale` if set, else the page's `lang`, else
+the browser's language.
+
+No time, no time zone: a date picker deals in days, and a day never shifts by
+one because someone opened the form in another zone.
+
+## Typing a date
+
+The field takes a date typed the way the reader writes it, on `Enter` or when
+it is left:
+
+- in numbers, in the language's order: `25/09/2026` in London, `9/25/2026` in
+  New York, `25.09.2026` in Berlin, ISO `2026-09-25` anywhere;
+- with the month's name, short or long: `25 Sept 2026`, `25 septembre`;
+- without the year when it is this one, and with two digits for it — `98` is
+  1998, `30` is 2030;
+- a period as two dates around a dash: `1/9 – 25/9/2026`.
+
+What does not read as a date, or falls outside `min`/`max`, puts the field in
+its error state — the message in a tooltip on the alert icon, shown while the
+field has focus, as `<kt-input>` does — and the value it had is kept. The form
+sees a `badInput`. `Escape` puts the text back; emptying the field empties the
+value.
+
+## The calendar
+
+The calendar button leads the field and opens the popup, a
+[`<kt-calendar>`](./kt-calendar.md), with the focus in it; a click
+in the text opens it too, leaving the focus to type, and `↓` from the text
+moves into it. Its title opens the year and month panel, so a date years away
+is two clicks. A single date gets a **Today** button under it.
+
+`Escape` closes it and puts the focus back in the field — except in the year
+and month panel, where it first goes back to the days. Tabbing out closes it
+too. Days outside `min`/`max` can be reached, so the keyboard never gets stuck
+at a boundary, but not chosen.
+
+## Choosing a period
+
+With `range`, the popup leads with the periods a dashboard asks for most —
+today, the last 7 and 30 days, this month and last, this year, each ending
+today — beside two months. A click on a period applies it and closes; the one
+the value matches is marked, and one reaching outside `min`/`max` is disabled.
+
+```js
+picker.presets = [
+  { label: 'Q3 2026', value: '2026-07-01/2026-09-30' },
+  { label: 'Q4 2026', value: '2026-10-01/2026-12-31' },
+];
+picker.presets = []; // no column
+```
+
+In the calendar, the first pick sets one end; the band between it and the
+pointer — or the day in focus — previews the period; the second sets the other
+end, in whichever order. `kt-change` fires once, with the whole period.
+
+Below 720px wide the popup shows one month, with the periods wrapped above it.
+
+## In a form
+
+A form control: it submits the ISO value under `name`. A period submits
+nothing until both ends are chosen. `required` blocks submission while it is
+empty, `error` shows a message, and `form.reset()` puts back the initial
+value.
+
+## API
+
+| Property      | Attribute     | Type                             | Default            |
+| ------------- | ------------- | -------------------------------- | ------------------ |
+| `value`       | `value`       | `string \| null`                 | `null`             |
+| `range`       | `range`       | `boolean`                        | `false`            |
+| `min`         | `min`         | `string`                         | `''`               |
+| `max`         | `max`         | `string`                         | `''`               |
+| `name`        | `name`        | `string`                         | `''`               |
+| `label`       | `label`       | `string`                         | `''`               |
+| `placeholder` | `placeholder` | `string`                         | from `setStrings`  |
+| `locale`      | `locale`      | `string`                         | page, then browser |
+| `size`        | `size`        | `'small' \| 'medium' \| 'large'` | `'medium'`         |
+| `disabled`    | `disabled`    | `boolean`                        | `false`            |
+| `required`    | `required`    | `boolean`                        | `false`            |
+| `clearable`   | —             | `boolean`                        | `true`             |
+| `presets`     | —             | `KtDatePreset[]`                 | the six above      |
+| `error`       | `error`       | `string`                         | `''`               |
+
+| Event       | Detail                                                     |
+| ----------- | ---------------------------------------------------------- |
+| `kt-change` | `{ value: string \| null }` — ISO date, interval or `null` |
+
+| Part       | Description                       |
+| ---------- | --------------------------------- |
+| `field`    | The field                         |
+| `input`    | The text the date is typed into   |
+| `trigger`  | The button that opens the popup   |
+| `panel`    | The calendar popup                |
+| `presets`  | The column of periods, with range |
+| `calendar` | The `<kt-calendar>` inside it     |

package/dist/docs/kt-drag-drop.md

@@ -0,0 +1,85 @@
+# `<kt-drag-drop>`
+
+A file drop zone. Takes a drop or a click, lists what was picked, and lets each
+entry be removed.
+
+```html
+<kt-drag-drop accept="image/*" max-size="2097152" recommended-size="800×400px"></kt-drag-drop>
+```
+
+```js
+zone.addEventListener('kt-files-change', (e) => console.log(e.detail.files));
+zone.addEventListener('kt-files-rejected', (e) => {
+  toast.error(e.detail.reason === 'size' ? 'File too large' : 'Unsupported format');
+});
+```
+
+The element holds the files and reports them. **Uploading is yours** — it makes
+no requests.
+
+## In a form
+
+Give it a `name` and it is a form control: a `<form>` submits every held file
+under that name, exactly as `<input type="file" multiple>` would, so a
+`multipart/form-data` post needs no extra code. Without a `name` it submits
+nothing, like the native input. `required` blocks submission until a file is
+held, and `form.reset()` empties it.
+
+```html
+<form method="post" enctype="multipart/form-data">
+  <kt-drag-drop name="attachments" required></kt-drag-drop>
+  <kt-button type="submit">Send</kt-button>
+</form>
+```
+
+## Validation
+
+`accept` on a native input is advisory: the OS dialog filters by it, but a
+_dropped_ file bypasses it completely. So `<kt-drag-drop>` re-checks every file
+itself, by extension (`.pdf`), by mime prefix (`image/*`) or by exact type, and
+fires `kt-files-rejected` with what it turned away and why.
+
+`max-size` is in bytes and has no native equivalent at all.
+
+## Accessibility
+
+The zone is `role="button"` with a tab stop and Enter/Space activation, so it
+can be used without a pointer — a drop zone reachable only by dragging is
+unusable for anyone who does not drag. Each file's remove button carries the
+file name in its accessible label, rather than nine identical "Delete"
+buttons.
+
+## API
+
+| Property          | Attribute          | Type      | Default               |
+| ----------------- | ------------------ | --------- | --------------------- |
+| `heading`         | `heading`          | `string`  | `'Drag and drop or'`  |
+| `linkText`        | `link-text`        | `string`  | `'browse your files'` |
+| `recommendedSize` | `recommended-size` | `string`  | `''`                  |
+| `multiple`        | `multiple`         | `boolean` | `true`                |
+| `accept`          | `accept`           | `string`  | `''`                  |
+| `maxSize`         | `max-size`         | `number`  | `0` (no limit)        |
+| `disabled`        | `disabled`         | `boolean` | `false`               |
+| `name`            | `name`             | `string`  | `''`                  |
+| `required`        | `required`         | `boolean` | `false`               |
+
+`heading` rather than `title`: an element already has a `title`, and reusing it
+would drop the prompt into a native tooltip over the whole zone.
+
+| Getter          | Returns           |
+| --------------- | ----------------- |
+| `selectedFiles` | `readonly File[]` |
+
+| Method    | Description                                    |
+| --------- | ---------------------------------------------- |
+| `clear()` | Empties the selection, fires `kt-files-change` |
+
+| Event               | Detail                                        |
+| ------------------- | --------------------------------------------- |
+| `kt-files-change`   | `{ files: File[] }` — the full current list   |
+| `kt-files-rejected` | `{ files: File[], reason: 'type' \| 'size' }` |
+
+| Part   | Description          |
+| ------ | -------------------- |
+| `base` | The dashed drop zone |
+| `list` | The list of files    |

package/dist/docs/kt-dropdown.md

@@ -0,0 +1,65 @@
+# `<kt-dropdown>`
+
+A panel anchored to a trigger. The generic overlay in the system.
+
+```html
+<kt-dropdown>
+  <kt-button slot="trigger" variant="dark" icon="ellipsis" label="Actions"></kt-button>
+</kt-dropdown>
+```
+
+```js
+menu.options = [
+  { id: 'edit', label: 'Edit' },
+  { id: 'delete', label: 'Delete' },
+];
+menu.addEventListener('kt-select', (e) => run(e.detail.value));
+```
+
+Leave `options` empty and slot arbitrary content into `panel` instead — a
+filter form, a colour picker, a preview.
+
+**For choosing a value in a form, use `<kt-select>` or `<kt-input-menu>`.** They
+carry the listbox semantics and the keyboard model this element deliberately
+does not assume; a dropdown is a menu of actions.
+
+## Placement
+
+The panel goes below the trigger, and flips above it when there is not enough
+room — or, when neither side fits, to whichever has more. Set
+`preferred-placement="top"` to reverse the preference.
+
+Placement is recalculated on open and on window resize.
+
+Horizontally the panel lines up with the trigger's left edge. `align="end"`
+lines it up with the right edge instead — for a trigger that sits at the right
+of the thing it belongs to, such as the caret of a `<kt-split-button>`.
+
+## API
+
+| Property             | Attribute             | Type                       | Default        |
+| -------------------- | --------------------- | -------------------------- | -------------- |
+| `options`            | —                     | `KtOption[]`               | `[]`           |
+| `value`              | `value`               | `string \| number \| null` | `null`         |
+| `preferredPlacement` | `preferred-placement` | `'bottom' \| 'top'`        | `'bottom'`     |
+| `align`              | `align`               | `'start' \| 'end'`         | `'start'`      |
+| `disabled`           | `disabled`            | `boolean`                  | `false`        |
+| `emptyText`          | `empty-text`          | `string`                   | `'No results'` |
+
+| Method / getter | Description           |
+| --------------- | --------------------- |
+| `show()`        | Opens the panel       |
+| `hide()`        | Closes it             |
+| `toggle()`      | Either                |
+| `isOpen`        | Whether it is showing |
+
+| Event       | Detail              |
+| ----------- | ------------------- |
+| `kt-select` | `{ value, option }` |
+| `kt-open`   | —                   |
+| `kt-close`  | —                   |
+
+| Slot      | Description                 |
+| --------- | --------------------------- |
+| `trigger` | What opens the panel        |
+| `panel`   | Contents, without `options` |

package/dist/docs/kt-empty-state.md

@@ -0,0 +1,36 @@
+# `<kt-empty-state>`
+
+What a screen shows when it has nothing to show.
+
+```html
+<kt-empty-state
+  icon="inbox"
+  heading="Nothing in your inbox"
+  description="New messages will appear here as they arrive."
+>
+  <kt-button slot="actions" icon="plus">Compose</kt-button>
+</kt-empty-state>
+```
+
+Worth a component because the empty case is where products are usually
+thinnest, and where they most need to say what happens next. An icon, a
+sentence and an action beat a blank panel every time — and "no results" after a
+search is a different message from "nothing here yet", so the wording is a
+property rather than a default.
+
+Use `compact` inside a card or a panel, where the full 48px of padding would
+push everything else off screen.
+
+## API
+
+| Property      | Attribute     | Type      | Default   |
+| ------------- | ------------- | --------- | --------- |
+| `icon`        | `icon`        | `string`  | `'inbox'` |
+| `heading`     | `heading`     | `string`  | `''`      |
+| `description` | `description` | `string`  | `''`      |
+| `compact`     | `compact`     | `boolean` | `false`   |
+
+| Slot      | Description                                   |
+| --------- | --------------------------------------------- |
+| _default_ | Extra content between description and actions |
+| `actions` | Buttons                                       |

package/dist/docs/kt-form.md

@@ -0,0 +1,93 @@
+# `<kt-form>`
+
+A panel grouping related fields.
+
+```html
+<form>
+  <kt-form heading="Identity" description="How we address you.">
+    <kt-label-input label="Company" required>
+      <kt-input name="company" required></kt-input>
+    </kt-label-input>
+    <kt-label-input label="Email address" required>
+      <kt-input name="email" type="email" required></kt-input>
+    </kt-label-input>
+
+    <kt-button slot="footer" variant="dark" type="reset">Reset</kt-button>
+    <kt-button slot="footer" type="submit">Save</kt-button>
+  </kt-form>
+</form>
+```
+
+## The surface
+
+The panel sits on `--surface-form`, one step above the page. Fields inside are
+filled at `--surface-field`, one step _below_ it — so they read as wells
+recessed into the panel rather than as boxes floating on it. The relationship
+survives the light theme, because both are roles rather than ramp steps.
+
+## Put it inside your own `<form>`
+
+This renders a `<fieldset>`, not a form, and that is deliberate.
+
+Kanto fields are form-associated custom elements, and a control finds its form
+by walking **its own tree**. A `<form>` inside this element's shadow root is not
+an ancestor of anything slotted into it, so it would own nothing and
+`new FormData(form)` would come back empty. The `<form>` above stays in charge
+of submission, validation and reset; the panel owns the grouping and the look.
+
+Several panels in one form is the usual shape:
+
+```html
+<form>
+  <kt-form heading="Identity">…</kt-form>
+  <kt-form heading="Subscription">…</kt-form>
+  <kt-button type="submit">Save</kt-button>
+</form>
+```
+
+## A fieldset, so the group has a name
+
+The heading is the `<legend>`, which is what gives the group its accessible
+name — a screen reader announces "Identity, group" as focus enters it. Without
+a heading the legend stays in the accessibility tree but is visually hidden,
+rather than being dropped.
+
+## Disabling
+
+`disabled` switches off every slotted control. A native `<fieldset disabled>`
+does this for its descendants, but slotted fields are not descendants of the
+fieldset in their own tree — the shadow boundary sits between them — so the
+platform never reaches them and the panel walks them itself.
+
+## Loading
+
+`loading` draws placeholder fields in front of the real ones. The fields stay
+mounted and keep their values, so a panel that reloads its options does not
+throw away what the user already typed.
+
+```html
+<kt-form heading="Identity" loading loading-fields="4"></kt-form>
+```
+
+## API
+
+| Property        | Attribute        | Type      | Default |
+| --------------- | ---------------- | --------- | ------- |
+| `heading`       | `heading`        | `string`  | `''`    |
+| `description`   | `description`    | `string`  | `''`    |
+| `loading`       | `loading`        | `boolean` | `false` |
+| `loadingFields` | `loading-fields` | `number`  | `3`     |
+| `disabled`      | `disabled`       | `boolean` | `false` |
+
+| Slot      | Description                                  |
+| --------- | -------------------------------------------- |
+| _default_ | The fields                                   |
+| `heading` | Replaces the `heading` attribute, for markup |
+| `footer`  | Actions, right-aligned. Hidden when empty.   |
+
+| Part     | Description      |
+| -------- | ---------------- |
+| `base`   | The `<fieldset>` |
+| `header` | The description  |
+| `fields` | The field column |
+| `footer` | The action row   |

package/dist/docs/kt-header.md

@@ -0,0 +1,100 @@
+# `<kt-header>`
+
+The application header: a banner landmark holding the brand, the primary
+navigation and a row of actions.
+
+```html
+<kt-header sticky>
+  <a slot="brand" href="/">KANTO</a>
+
+  <nav>
+    <a href="/docs">Docs</a>
+    <a href="/components">Components</a>
+  </nav>
+
+  <kt-button slot="actions" size="small" variant="dark" icon="search">Search</kt-button>
+
+  <nav slot="menu">
+    <a href="/docs">Docs</a>
+    <a href="/components">Components</a>
+  </nav>
+
+  <kt-tabs slot="bottom"></kt-tabs>
+</kt-header>
+```
+
+## Slots
+
+| Slot      | Where                                                      |
+| --------- | ---------------------------------------------------------- |
+| `brand`   | Start of the bar. Logo or wordmark.                        |
+| _default_ | Centre. Primary navigation.                                |
+| `actions` | End. Stays visible at every width.                         |
+| `menu`    | What the menu button reveals below the breakpoint.         |
+| `bottom`  | A second row under the bar — sub-navigation, a breadcrumb. |
+
+`menu` is a separate slot rather than a reuse of the default one because a node
+can only be assigned to one slot. Put a compact copy of the navigation there —
+usually a plain stacked list rather than the horizontal bar.
+
+## Centring
+
+The bar is a three-column grid whose outer columns are equal, so the navigation
+sits in the middle of the **bar** rather than in the middle of whatever the
+brand and the actions left over. With a flex row it lands off-centre by half the
+difference between those two, which is small enough to look like a mistake
+rather than like a choice.
+
+Everything in the default slot is centred as one group, so put anything that
+belongs beside the wordmark — a version chip, an environment badge — in the
+`brand` slot rather than in the default one.
+
+Set `nav-align="start"` to butt the navigation against the brand instead, for a
+header whose middle column is a search field or a breadcrumb.
+
+## Collapsing
+
+Below `--kt-header-breakpoint` (900px) the default slot is hidden and a menu
+button appears; pressing it reveals the `menu` slot as a panel under the bar.
+
+The breakpoint is a token rather than a fixed media query because how much
+navigation fits depends entirely on how much navigation you put in — a header
+with two links and one with eight do not want the same threshold.
+
+Call `closeMenu()` after routing, or the panel stays open over the new page.
+
+## Sticky and translucent
+
+`sticky` pins the header and makes it translucent with a backdrop blur — but
+only where `backdrop-filter` is supported. Without the blur it stays opaque: a
+semi-transparent bar over scrolling content with nothing blurring it is simply
+hard to read.
+
+## API
+
+| Property   | Attribute   | Type                  | Default    |
+| ---------- | ----------- | --------------------- | ---------- |
+| `sticky`   | `sticky`    | `boolean`             | `false`    |
+| `bordered` | `bordered`  | `boolean`             | `true`     |
+| `label`    | `label`     | `string`              | `''`       |
+| `navAlign` | `nav-align` | `'center' \| 'start'` | `'center'` |
+
+| Method / getter | Description               |
+| --------------- | ------------------------- |
+| `closeMenu()`   | Shuts the collapsed panel |
+| `isMenuOpen`    | Whether it is showing     |
+
+| Event            | Detail              |
+| ---------------- | ------------------- |
+| `kt-menu-toggle` | `{ open: boolean }` |
+
+| CSS property             | Default | Description                    |
+| ------------------------ | ------- | ------------------------------ |
+| `--kt-header-height`     | `64px`  | Height of the main row         |
+| `--kt-header-breakpoint` | `900px` | Where the navigation collapses |
+
+| Part     | Description    |
+| -------- | -------------- |
+| `base`   | The `<header>` |
+| `bar`    | The main row   |
+| `bottom` | The second row |

package/dist/docs/kt-icon.md

@@ -0,0 +1,68 @@
+# `<kt-icon>`
+
+A [Lucide](https://lucide.dev) icon, resolved from the registry by name.
+
+Default 24px, stroke width 2, drawn in `currentColor` — the icon takes the
+colour of the text around it, with no attribute to keep in sync.
+
+```html
+<kt-icon name="search"></kt-icon>
+<kt-icon name="trash-2" size="16"></kt-icon>
+<kt-icon name="circle-alert" style="color: var(--color-danger-base)"></kt-icon>
+```
+
+## Registering icons
+
+Kanto ships the 24 icons its own elements draw and nine a first screen reaches
+for — `plus`, `pencil`, `settings`, `download`, `upload`, `external-link`,
+`filter`, `ellipsis`, `refresh-cw`. Register whatever else the application
+uses, once, at start-up:
+
+```js
+import { Rocket, Wallet } from 'lucide';
+import { registerIcons } from 'kanto-ds/icons';
+
+registerIcons({ Rocket, Wallet }); // now <kt-icon name="rocket">
+```
+
+Names normalise to kebab-case, so `Rocket`, `rocket` and `ROCKET` all resolve
+to `rocket`.
+
+Prototyping and can afford the weight? Register the lot:
+
+```js
+import * as lucide from 'lucide';
+registerIcons(lucide); // ~2000 icons, do not ship this
+```
+
+## Accessibility
+
+By default the icon is `aria-hidden` — correct for the common case, where it
+sits next to text that already names the action.
+
+Give it a `label` only when it carries meaning alone, which makes it
+`role="img"` with that accessible name:
+
+```html
+<!-- text says it; icon is decoration -->
+<kt-button icon="trash-2">Delete</kt-button>
+
+<!-- icon says it; it needs a name -->
+<kt-icon name="trash-2" label="Delete"></kt-icon>
+```
+
+## API
+
+| Property      | Attribute      | Type     | Default | Description                       |
+| ------------- | -------------- | -------- | ------- | --------------------------------- |
+| `name`        | `name`         | `string` | `''`    | Registered icon name, kebab-case. |
+| `size`        | `size`         | `number` | `24`    | Width and height, in pixels.      |
+| `strokeWidth` | `stroke-width` | `number` | `2`     | SVG stroke width.                 |
+| `label`       | `label`        | `string` | `''`    | Accessible name. Empty = hidden.  |
+
+| Part  | Description      |
+| ----- | ---------------- |
+| `svg` | The `<svg>` root |
+
+An unknown name renders an empty box of the right size and warns once in the
+console — a typo shifts no layout while you find it.

package/dist/docs/kt-input-menu.md

@@ -0,0 +1,90 @@
+# `<kt-input-menu>`
+
+A combobox: type to narrow the list, then pick.
+
+```html
+<kt-input-menu placeholder="Search a country"></kt-input-menu>
+```
+
+```js
+menu.options = [
+  { id: 'fr', label: 'France' },
+  { id: 'be', label: 'Belgium' },
+  { id: 'ch', label: 'Switzerland' },
+];
+
+menu.addEventListener('kt-change', (e) => console.log(e.detail.value));
+menu.addEventListener('kt-filter', (e) => console.log(e.detail.query));
+```
+
+## Against `<kt-select>`
+
+Both choose one option from a list. Reach for the combobox once scanning the
+list is slower than typing three letters — roughly twenty options. Below that,
+`<kt-select>` is less work for the user: no typing, and the whole list is
+visible.
+
+## One field, two jobs
+
+While the list is open and a query has been typed, the field shows the query.
+Otherwise it shows the chosen option's label. That single field is what makes
+this a combobox rather than a search box that happens to sit above a list.
+
+Escape closes and forgets the query, leaving the previous selection intact.
+
+## Server-side filtering
+
+`kt-filter` fires on every keystroke, so a large or remote list can be fetched
+instead of filtered locally — assign the results back to `options` and the
+element renders them.
+
+```js
+menu.addEventListener('kt-filter', async (e) => {
+  menu.options = await search(e.detail.query);
+});
+```
+
+## In a form
+
+`<kt-input-menu>` is a form control. Inside a `<form>` it submits the chosen
+option's `id` under `name` — never the label, and nothing at all while empty.
+`required` blocks submission until something is chosen, and `form.reset()` puts
+back the initial `value`.
+
+## Keyboard
+
+| Key            | Does                                           |
+| -------------- | ---------------------------------------------- |
+| `↓` / `↑`      | Opens the list, then moves the active option   |
+| `Home` / `End` | First / last match                             |
+| `Enter`        | Commits the active option                      |
+| `Escape`       | Closes, forgets the query, keeps the selection |
+| `Tab`          | Closes and moves on                            |
+
+The arrows walk the **filtered** list, not the full one.
+
+## API
+
+| Property      | Attribute     | Type                       | Default         |
+| ------------- | ------------- | -------------------------- | --------------- |
+| `options`     | —             | `KtOption[]`               | `[]`            |
+| `value`       | `value`       | `string \| number \| null` | `null`          |
+| `placeholder` | `placeholder` | `string`                   | `''`            |
+| `name`        | `name`        | `string`                   | `''`            |
+| `disabled`    | `disabled`    | `boolean`                  | `false`         |
+| `required`    | `required`    | `boolean`                  | `false`         |
+| `error`       | `error`       | `string`                   | `''`            |
+| `label`       | `label`       | `string`                   | `''`            |
+| `emptyText`   | `empty-text`  | `string`                   | `'No options…'` |
+
+| Event       | Detail              |
+| ----------- | ------------------- |
+| `kt-change` | `{ value, option }` |
+| `kt-filter` | `{ query: string }` |
+
+| Part      | Description          |
+| --------- | -------------------- |
+| `control` | The field            |
+| `input`   | The native `<input>` |
+| `popup`   | The option list      |
+| `option`  | An option row        |