iryx-ui 0.4.0 → 0.6.0

package/README.md

@@ -104,7 +104,7 @@ and every component updates.
 
 ```vue
 <template>
-  <IApp theme="emerald" appearance="system" dir="ltr">
+  <IApp theme="rose" appearance="system" dir="ltr">
     <RouterView />
   </IApp>
 </template>
@@ -165,14 +165,14 @@ utilities (shadcn-style `@custom-variant dark`).
 
 ## Theming
 
-Pick a built-in color preset — `violet` (default), `emerald`, `rose`,
-`amber`, `sky` — at startup or at runtime:
+Pick a built-in color preset — `violet` (default) or `rose` — at startup or at
+runtime:
 
 ```ts
 import { applyTheme } from 'iryx-ui'
 
-app.use(createIryxUi({ theme: 'emerald' }))
-// nuxt.config.ts → iryxUi: { theme: 'emerald' }
+app.use(createIryxUi({ theme: 'rose' }))
+// nuxt.config.ts → iryxUi: { theme: 'rose' }
 
 applyTheme('rose') // runtime, e.g. from a theme picker
 ```
@@ -197,15 +197,42 @@ For a static re-brand, plain CSS works too — tokens are just variables:
 }
 ```
 
+### Typeface
+
+The library ships **no webfont** — that would put font files, a licence and a
+network request into every app whether it wanted them or not. It reads one
+variable, defaulting to the system stack. Point it at your own family and
+everything follows, including Tailwind's `font-sans`:
+
+```css
+@import "@fontsource-variable/instrument-sans"; /* or a <link>, or self-hosted */
+
+:root {
+  --iryx-font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Unlike the colour tokens, this one is not mode-specific — there is no `.dark`
+counterpart to keep in sync.
+
 Available tokens, each usable as a Tailwind color (`bg-primary`,
 `text-muted-foreground`, …):
 
 | Group | Tokens |
 | --- | --- |
-| Surfaces | `background`, `foreground`, `accent`, `accent-foreground`, `muted`, `muted-foreground`, `border` |
+| Surfaces | `background`, `foreground`, `accent`, `accent-foreground`, `muted`, `muted-foreground`, `border`, `input` |
 | Brand | `primary`, `primary-foreground`, `primary-from`, `primary-to` |
 | Status | `success`, `warning`, `danger`, `info` — each with `-foreground`, `-muted`, `-muted-foreground` and `-border` |
 
+`input` is the fill behind the fields — `IInput`, `ITextarea`, `INumberInput`,
+the `ISelect` trigger, the `ICombobox` anchor — and behind `IButton`'s
+`outline` variant, so the two read as the same kind of surface. It's a token
+of its own rather than a reused `muted`, so how raised a control looks can be
+tuned without moving every muted surface with it. It matches the page
+background in light mode and lifts off it in dark, where the difference is
+legible; that split lives in the token values, so no component needs a `dark:`
+class for it.
+
 `primary-from` / `primary-to` are the stops of the solid button's vertical
 gradient. The status tokens carry their own dark-mode values, so components
 never need a `dark:` class for them: `success` is the solid fill,
@@ -266,7 +293,8 @@ app.use(createIryxUi({ unstyled: true }))
 | `ITextarea` | Multi-line field with matching sizes and `invalid` state |
 | `ILabel` | Field label with optional `required` asterisk |
 | `ICheckbox` | Tri-state checkbox (`true` / `false` / `'indeterminate'`), optional `label` + `description` |
-| `ISelect` | Listbox with keyboard nav and typeahead, driven by an `items` array |
+| `ISelect` | Listbox with keyboard nav and typeahead, driven by an `items` array, with optional groups |
+| `ICombobox` | Searchable select — filters as you type, with optional groups, virtualized rows and a "create from query" row |
 | `IRadioGroup` | Radio list with labels wired up automatically; items take a `description` |
 | `ISwitch` | Accessible toggle, optional `label` + `description` |
 
@@ -282,8 +310,9 @@ app.use(createIryxUi({ unstyled: true }))
 
 | Component | Description |
 | --- | --- |
-| `IAlert` | Inline banner in four variants, with a variant icon and optional dismiss |
-| `IBadge` | Status pill — five variants × `soft`/`solid` tones × three sizes, optional `dot` |
+| `IAlert` | Inline, contextual message in four variants — variant icon, `actions` slot, optional dismiss |
+| `IBanner` | Page-level announcement — full-bleed, six variants, sticky top or fixed bottom |
+| `IBadge` | Status pill — five variants × three sizes; `dot` moves the colour onto a leading dot |
 | `IToaster` | Host for `useToast()`; six viewport positions, stacking, action buttons |
 | `IDialog` | Modal with header/body/footer slots, `dismissible` and `showClose` |
 | `IConfirmDialog` | Host for `useConfirm()` — renders the promise-based confirmation |
@@ -298,9 +327,10 @@ app.use(createIryxUi({ unstyled: true }))
 | --- | --- |
 | `ITabs` | `solid` or `line` variants with an animated indicator, horizontal or vertical |
 | `IBreadcrumb` | Trail from an `items` array; the last crumb is marked as the current page |
-| `IPagination` | Page list with ellipsis, edge pages and prev/next controls |
+| `IPagination` | Page list with ellipsis, edge pages and prev/next controls; `align` places it, `size` sets the button scale |
 | `IStepper` | Multi-step progress, horizontal or vertical, optional `linear` ordering |
 | `IStat` | KPI tile — label, value, signed delta with trend colour, and a hint |
+| `ITable` | Data table — sorting, selection, expansion and per-cell slots, client- or server-driven |
 
 Every component supports `unstyled` and a `class` override; multi-part ones take a `ui` prop for per-slot classes.
 
@@ -406,6 +436,77 @@ const framework = ref('vue')
 
 `ISelect` and `IRadioGroup` accept plain strings or `{ label, value, disabled }` objects. Both also take a default slot if you'd rather compose the Reka primitives yourself.
 
+`ISelect` also takes groups — an entry with its own `items` becomes a labelled
+heading, the same shape `ICombobox` uses:
+
+```vue
+<ISelect
+  v-model="framework"
+  :items="[
+    { label: 'Virtual DOM', items: ['Vue', 'React'] },
+    { label: 'Compiled', items: [{ label: 'Svelte', value: 'svelte' }] },
+  ]"
+/>
+```
+
+### Searchable selects
+
+`ICombobox` takes the same `items` as `ISelect` and filters them against what
+the user types, which is what you want once a list runs to hundreds of entries.
+The field shows the selected option's **label** while the model holds its value.
+
+```vue
+<ICombobox
+  v-model="clientId"
+  :items="clients"
+  placeholder="Search clients"
+  empty-text="No clients found."
+/>
+```
+
+Set `create` to offer a row for whatever the user typed when nothing matches.
+Choosing it emits `create` with the query and does **not** change the model —
+the option doesn't exist yet, so you add it and select it yourself:
+
+```vue
+<ICombobox
+  v-model="clientId"
+  :items="clients"
+  create
+  :create-label="query => `Add ${query}`"
+  @create="query => clients.push({ label: query, value: addClient(query) })"
+/>
+```
+
+Both `empty-text` and `create-label` are props precisely so a non-English app
+never inherits an English string; `empty` and `create` slots take over the
+markup entirely if you need more than text.
+
+An entry with its own `items` becomes a labelled group. A group disappears on
+its own once nothing inside it matches:
+
+```vue
+<ICombobox
+  v-model="clientId"
+  :items="[
+    { label: 'Recent', items: ['Acme Industries', 'Bolt Logistics'] },
+    { label: 'Archived', items: [{ label: 'Cirrus Systems', value: 'cirrus' }] },
+  ]"
+/>
+```
+
+For lists in the thousands, `virtual` renders only the rows on screen:
+
+```vue
+<ICombobox v-model="sku" virtual :items="fiveThousandItems" :estimate-size="32" />
+```
+
+`virtual` and grouped items are **mutually exclusive** — the underlying
+virtualizer is a flat window with no notion of group headings, so groups are
+flattened and their labels dropped (with a warning in dev). `estimate-size` is
+the assumed row height in px, used to size the scrollbar before rows are
+measured; set it if you have restyled rows to a different height.
+
 ### Numbers and money
 
 `INumberInput` never turns your value into a `number`. The model is a decimal
@@ -526,6 +627,188 @@ The control inside a field automatically inherits its `id`, invalid styling and
 
 Use the `#label` / `#description` slots instead of the props when you need markup (a link, a badge) inside the text.
 
+### Alerts and banners
+
+They look similar and do different jobs, so they're separate components.
+
+**`IAlert` is contextual.** It sits in the flow next to the thing it's about —
+a failed upload, a form that won't submit — boxed, with an icon and a title.
+Danger and warning variants take `role="alert"` so a screen reader interrupts,
+because the user caused it and needs to know now.
+
+**`IBanner` is page-level.** It spans the full width and announces something
+that isn't about any one element: a trial ending, scheduled maintenance. It's a
+labelled `role="region"`, never an alert — it's ambient, so interrupting
+someone mid-task would be wrong.
+
+```vue
+<IBanner
+  v-model:open="showTrial"
+  variant="primary"
+  position="top"
+  title="Trial ends in 3 days."
+  description="Upgrade to keep your data."
+  closable
+  label="Trial notice"
+>
+  <template #actions>
+    <IButton size="sm" variant="outline">Upgrade</IButton>
+  </template>
+</IBanner>
+```
+
+`position` is `static` (in flow), `top` (sticky) or `bottom` (fixed to the
+viewport, with the rule moved to its top edge). `contained` keeps the text at a
+readable measure while the fill still spans the window.
+
+Both dismiss through `v-model:open`, so the usual case is one binding instead
+of a `close` handler plus a `v-if`. `close` still fires if you need to persist
+or confirm first:
+
+```vue
+<IAlert v-model:open="visible" variant="danger" title="Upload failed" closable>
+  The file was larger than 10 MB.
+  <template #actions>
+    <IButton size="sm" @click="retry()">Retry</IButton>
+  </template>
+</IAlert>
+```
+
+### Tables
+
+`ITable` takes `rows` and `columns` and renders a real `<table>`. Columns are
+plain objects — no render functions — and anything beyond the raw value is a
+slot:
+
+```vue
+<script setup>
+const columns = [
+  { key: 'number', label: 'Invoice', sortable: true },
+  { key: 'customer.name', label: 'Customer', sortable: true, sortKey: 'customer_name' },
+  { key: 'total', label: 'Total', sortable: true, numeric: true },
+  { key: 'status', label: 'Status' },
+]
+</script>
+
+<template>
+  <ITable :rows="invoices" :columns="columns" label="Invoices">
+    <template #cell-total="{ value }">
+      {{ formatMoney(value) }}
+    </template>
+    <template #cell-status="{ row }">
+      <IBadge :variant="row.paid ? 'success' : 'warning'">
+        {{ row.paid ? 'Paid' : 'Due' }}
+      </IBadge>
+    </template>
+  </ITable>
+</template>
+```
+
+`key` doubles as the accessor (dot-notation reaches nested values) and the slot
+suffix, so `#cell-customer.name` targets that column. `#header-<key>` replaces a
+header the same way.
+
+`numeric` gives a column tabular figures and end alignment, so amounts line up
+digit-for-digit down the column instead of wandering with each glyph's width.
+Set `align` alongside it to keep the figures but place the column differently.
+
+#### Client or server
+
+**The table never fetches.** It renders what you give it and emits what the
+user did, so caching, cancellation and auth stay in your data layer.
+
+Which mode it runs in is decided by one prop. Omit `total` and it sorts and
+paginates `rows` itself. Provide `total` and it does neither — the rows you
+passed are already the page the server returned, so it only reflects state and
+emits changes:
+
+```vue
+<ITable
+  v-model:sort="sort"
+  v-model:page="page"
+  :rows="data.rows"
+  :columns="columns"
+  :total="data.total"
+  :loading="pending"
+/>
+```
+
+Watch those models and refetch. Sorting a column resets `page` to 1, since the
+old page number means nothing against a reordered list.
+
+#### State ownership
+
+Every model is optional. Bind one and you own that state — put it in the URL, a
+store, or `useState`. Leave it unbound and the table keeps it internally, so the
+simple case needs no wiring:
+
+| Model | Type |
+| --- | --- |
+| `v-model:sort` | `{ key, order } \| null` — `null` is "unsorted", distinct from never-sorted |
+| `v-model:page` | `number`, 1-indexed |
+| `v-model:perPage` | `number` |
+| `v-model:selection` | `(string \| number)[]` of row keys |
+| `v-model:expanded` | `(string \| number)[]` of row keys |
+
+#### Selection and expansion
+
+`selectable` adds a checkbox column whose header is tri-state over the rows on
+screen. Selection is held as **row keys** (`rowKey`, default `'id'`), and
+select-all only touches the current page, so selections made on other pages
+survive. `isRowSelectable` vetoes a row — its checkbox is hidden and the header
+skips it.
+
+`expandable` adds a disclosure column and renders the `#expanded` slot beneath
+an open row; `canExpandRow` vetoes it per row.
+
+```vue
+<ITable
+  v-model:selection="selected"
+  :rows="rows"
+  :columns="columns"
+  selectable
+  expandable
+  :is-row-selectable="row => !row.locked"
+>
+  <template #expanded="{ row }">
+    <div class="p-4">{{ row.notes }}</div>
+  </template>
+</ITable>
+```
+
+#### States and props
+
+`loading` sets `aria-busy` and, when there is nothing to show yet, renders
+`loadingRows` skeleton rows instead of the empty message. With rows already on
+screen it leaves them in place, so a refetch doesn't blank the table. Otherwise
+`emptyText` — or the `#empty` slot — takes over.
+
+| Prop | What it does |
+| --- | --- |
+| `rowKey` | Field identifying a row. Default `'id'` |
+| `clickableRows` | Emits `rowClick` and shows a pointer cursor |
+| `striped` / `hoverable` / `stickyHeader` | Row and header treatment |
+| `size` | `sm` / `md` / `lg` row density |
+| `label` / `caption` | Accessible name, and an optional visible caption |
+
+Headers are real `<button>`s, sorted columns carry `aria-sort`, and the table is
+a plain `<table>`, so screen readers and keyboard users get the semantics for
+free. Give it a `label` (or a `caption`) — a table with no accessible name is
+hard to place when tabbing through a page.
+
+#### Without the markup
+
+`useDataTable()` holds the whole state machine — sorting, paging, selection,
+expansion — and renders nothing, if you want the logic under your own markup:
+
+```ts
+const table = useDataTable({
+  rows: () => rows.value,
+  columns: () => columns,
+})
+// table.pageRows, table.toggleSort, table.headerSelection, …
+```
+
 ## License
 
 [MIT](https://github.com/therok1/iryx-ui/blob/main/LICENSE)

package/dist/component-names.d.ts

@@ -3,5 +3,5 @@
  * Consumed by the Vue plugin (global registration) and the Nuxt module
  * (auto-imports). Keep in sync with `src/components/index.ts`.
  */
-export declare const componentNames: readonly ["Alert", "App", "Badge", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "ConfirmDialog", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "NumberInput", "Pagination", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Tabs", "Textarea", "Toaster", "Tooltip"];
+export declare const componentNames: readonly ["Alert", "App", "Badge", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "Combobox", "ConfirmDialog", "Dialog", "DropdownMenu", "EmptyState", "Form", "FormField", "Input", "Label", "NumberInput", "Pagination", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Stat", "Stepper", "Switch", "Table", "Tabs", "Textarea", "Toaster", "Tooltip"];
 export type ComponentName = (typeof componentNames)[number];

package/dist/components/Alert.vue.d.ts

@@ -26,10 +26,21 @@ export interface AlertProps {
         content?: string;
         title?: string;
         description?: string;
+        actions?: string;
         close?: string;
     };
 }
-declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+type __VLS_Props = AlertProps;
+type __VLS_ModelProps = {
+    /**
+     * Dismissal as a model, so the common case is one binding rather than a
+     * `close` handler plus a `v-if` in every consumer. `close` still fires, for
+     * callers that want to confirm or persist before it goes.
+     */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_8) => any;
 } & {
@@ -37,12 +48,16 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_17) => any;
 } & {
-    close?: (props: typeof __VLS_19) => any;
+    actions?: (props: typeof __VLS_19) => any;
+} & {
+    close?: (props: typeof __VLS_21) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
-}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     icon: IconLike | false;
     as: string;

package/dist/components/App.vue.d.ts

@@ -7,7 +7,7 @@ export interface AppProps extends /* @vue-ignore */ ConfigProviderProps {
      * below. Reactive, unlike the install-time plugin option.
      */
     unstyled?: boolean;
-    /** Colour theme: a preset name (`'emerald'`…) or a custom theme. */
+    /** Colour theme: a preset name (`'violet'`, `'rose'`) or a custom theme. */
     theme?: Theme | ThemePresetName;
     /** Startup appearance. A preference the user already stored wins over this. */
     appearance?: Appearance;

package/dist/components/Badge.vue.d.ts

@@ -4,10 +4,11 @@ export interface BadgeProps {
     /** Merge props onto the immediate child instead of rendering an element. */
     asChild?: boolean;
     variant?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
-    /** `soft` is a tinted background; `solid` is a filled block of colour. */
-    tone?: 'soft' | 'solid';
     size?: 'sm' | 'md' | 'lg';
-    /** Show a small leading dot in the current text colour. */
+    /**
+     * Show a leading status dot. This also switches the look: the badge goes
+     * neutral and the dot alone carries the variant's colour.
+     */
     dot?: boolean;
     /** Text content. Ignored when the default slot is used. */
     label?: string;

package/dist/components/Banner.vue.d.ts

@@ -0,0 +1,81 @@
+import type { IconLike } from '../composables/icon';
+export interface BannerProps {
+    /** Render as a different element or component. */
+    as?: string;
+    variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'primary';
+    /**
+     * `static` sits in the flow, `top` sticks to the top of the scroll
+     * container, `bottom` pins to the bottom of the viewport.
+     */
+    position?: 'static' | 'top' | 'bottom';
+    /** Bold lead-in before the message. */
+    title?: string;
+    /** Message text. Ignored when the default slot is used. */
+    description?: string;
+    /** Leading icon. None by default — a banner is ambient, not a status report. */
+    icon?: IconLike;
+    /** Constrain the text to a readable measure while the fill still spans full width. */
+    contained?: boolean;
+    align?: 'start' | 'center';
+    /** Render a dismiss button. */
+    closable?: boolean;
+    /** Accessible name for the dismiss button — override for non-English apps. */
+    closeLabel?: string;
+    /**
+     * Accessible name for the landmark. A banner is a region rather than an
+     * alert: it is ambient, so it must not interrupt a screen reader mid-task.
+     */
+    label?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ container: 'max-w-3xl' }`. */
+    ui?: {
+        root?: string;
+        container?: string;
+        icon?: string;
+        content?: string;
+        title?: string;
+        actions?: string;
+        close?: string;
+    };
+}
+type __VLS_Props = BannerProps;
+type __VLS_ModelProps = {
+    /** Dismissal as a model, matching IAlert — bind it, or let the banner hide itself. */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_8) => any;
+} & {
+    title?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    actions?: (props: typeof __VLS_19) => any;
+} & {
+    close?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    as: string;
+    closeLabel: string;
+    unstyled: boolean;
+    label: string;
+    contained: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Combobox.vue.d.ts

@@ -0,0 +1,112 @@
+import type { AcceptableValue, ComboboxRootProps } from 'reka-ui';
+export interface ComboboxItemOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+/** A labelled run of options. Reka hides the whole group once nothing in it matches. */
+export interface ComboboxItemGroup {
+    label: string;
+    items: (ComboboxItemOption | string)[];
+}
+export type ComboboxItems = (ComboboxItemOption | ComboboxItemGroup | string)[];
+export interface ComboboxProps extends ComboboxRootProps {
+    /**
+     * Options to render. Strings are expanded to `{ label, value }`, and an
+     * entry with its own `items` becomes a labelled group.
+     */
+    items?: ComboboxItems;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Mark the field as invalid — styles the border and ring red. */
+    invalid?: boolean;
+    id?: string;
+    /** Shown when the query matches nothing. Override for non-English apps. */
+    emptyText?: string;
+    /**
+     * Offer a "create" row when the query matches no option's label, for
+     * adding a client or item without leaving the field. Selecting it emits
+     * `create` with the query — the value is *not* set, since the option
+     * doesn't exist yet; add it to `items` and set the model yourself.
+     */
+    create?: boolean;
+    /** Label for that row. Receives the current query. */
+    createLabel?: (query: string) => string;
+    /**
+     * Render only the rows in view. Worth it in the thousands, not the hundreds.
+     * Groups are flattened — Reka's virtualizer is a flat window — so `virtual`
+     * and grouped `items` are mutually exclusive.
+     */
+    virtual?: boolean;
+    /** Row height in px, used to size the scrollbar before rows are measured. */
+    estimateSize?: number;
+    /** Rows rendered beyond the viewport on each side. */
+    overscan?: number;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    ui?: {
+        anchor?: string;
+        input?: string;
+        trigger?: string;
+        content?: string;
+        viewport?: string;
+        item?: string;
+        empty?: string;
+        group?: string;
+        groupLabel?: string;
+    };
+}
+declare var __VLS_50: {
+    query: string;
+}, __VLS_58: {
+    query: string;
+}, __VLS_60: {}, __VLS_139: {
+    query: string;
+};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_50) => any;
+} & {
+    empty?: (props: typeof __VLS_58) => any;
+} & {
+    default?: (props: typeof __VLS_60) => any;
+} & {
+    create?: (props: typeof __VLS_139) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComboboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "update:modelValue": (value: AcceptableValue) => any;
+    create: (query: string) => any;
+    highlight: (payload: {
+        ref: HTMLElement;
+        value: AcceptableValue;
+    } | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<ComboboxProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: AcceptableValue) => any) | undefined;
+    onCreate?: ((query: string) => any) | undefined;
+    onHighlight?: ((payload: {
+        ref: HTMLElement;
+        value: AcceptableValue;
+    } | undefined) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    open: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    emptyText: string;
+    create: boolean;
+    createLabel: (query: string) => string;
+    virtual: boolean;
+    estimateSize: number;
+    overscan: number;
+    defaultOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Pagination.vue.d.ts

@@ -7,6 +7,8 @@ export interface PaginationProps {
     /** Keep the first and last page visible however far away they are. */
     showEdges?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    /** Where the control sits in its container. Centred by default. */
+    align?: 'start' | 'center' | 'end';
     /** Accessible names — override for non-English apps. */
     prevLabel?: string;
     nextLabel?: string;