@xleddyl/443-components-vue 0.2.3 → 0.4.0

package/README.md

@@ -194,6 +194,8 @@ k: {
 }
 ```
 
+A collection can also come from any Iconify JSON file: `{ prefix: 'brand', from: '~/assets/brand-icons.json' }` (a module that ships its own collection passes an absolute path). When two entries use the same prefix, the first one wins, so the host app overrides a collection added by another module.
+
 Each collection is a separate chunk loaded the first time one of its icons renders. The server loads every collection, records which ones a page used and the client loads those before hydration, so server rendered icons never flash. `include` and `exclude` take `*` wildcards and keep a collection small.
 
 ## Languages
@@ -221,16 +223,62 @@ const form = useForm({
 })
 ```
 
+Issues are keyed by their first path segment and by their full dotted path (`blocks.0.title`), so a nested `FormField name="blocks.0.title"` shows its own error. Pass `issueKey: (path) => string | string[]` to choose the keys yourself. Issues with an empty path become `rootErrors`, which `Form` renders as alerts above the content (`alerts="end"` moves them below, `alerts="false"` hides them, the `#alerts` slot replaces them). `setError('', message)` adds a root error, for example from the server.
+
 Built-in messages follow the active language. `messages` overrides them for one form.
 
+Forms can also drive values they do not own. Pass `values` (a reactive object, ref or getter) and the form reads, validates, tracks dirty state and submits it. The schema becomes optional and only adds rules, labels and `required`; its `initial` values are not used. `reset()` restores the clean snapshot, `reset(next)` replaces the values and makes them the new clean state (`form.reset(record.value)` after a save). `validator` accepts a ref or getter, so it can change with the record type:
+
+```ts
+const record = ref({ title: '', slug: '', blocks: [{ title: '' }] })
+
+const form = useForm({
+   values: record,
+   validator: computed(() => schemaFor(record.value)),
+   warnings: (values) => ({ slug: values.slug.length < 4 ? 'Short slug' : undefined }),
+   onSubmit: (values) => save(values),
+})
+```
+
+`warnings` takes a Standard Schema or a function returning `{ [path]: message }` (or issues). Warnings are live, never block submit, are exposed as `form.warnings` (keyed like errors) and `form.rootWarnings`, and `FormField` reads them by `name`. Errors still appear only after the first submit or as `validateOn` says.
+
+A control can report its own error (a JSON field that fails to parse) through the surrounding `FormField`: `const control = useFieldControl()` then `control.setControlError(message | undefined)`. The form error wins over it, and it clears when the control unmounts. `FieldMessage` renders the same inline error, warning or hint line outside a `FormField` (`tone="danger" | "warning" | "neutral"`, `icon`, `id` for `aria-describedby`).
+
+`validate()` is async. When every rule, `validate` function and Standard Schema is synchronous, `validateSync()` answers immediately and fills `form.errors` in the same tick, so a caller can reveal the first error without parsing again (it throws when it meets a Promise):
+
+```ts
+if (!form.validateSync()) revealField(Object.keys(form.errors).find((key) => form.errors[key]))
+```
+
+Nested forms. Overlays stay in the DOM, so a `Form` inside a Modal opened from another `Form` would nest `<form>` elements. Render the inner one with `as="div"`: it submits on Enter in its inputs and through its own submit and reset buttons, and keeps those events from reaching the outer form. An outer `Form` also ignores submit events whose target is not its own form element. A component that renders fields without `Form` gives them the form with `provideForm(form)` and shows the root alerts with `<KFormAlerts />` (it reads `rootErrors` and `rootWarnings` from the provided form, or takes `errors` and `warnings` props). `Form` exposes `submit()`, `reset()` and `el`.
+
+```vue
+<KForm :form="entry">
+   <KModal v-model:open="open" title="New tag">
+      <KForm as="div" :form="tag">...</KForm>
+   </KModal>
+</KForm>
+```
+
+Several controls in one `FormField`. Only the primary control takes the field id, name, description and invalid state. Wrap secondary controls (a search input above a Tree) in `<KFieldBoundary auxiliary>`, or call `useFieldControl({ role: 'auxiliary' })` in your own control: they keep their own id and only follow `disabled`. `<KFieldBoundary>` without `auxiliary` cuts the field context completely, like the overlays do. A primary control that is not labelable (a tree, a group, a contenteditable editor) passes `useFieldControl({ labelable: false })`; `FormField` then drops `for` from its label and the control uses `aria-labelledby` with `field.labelId` instead. `Tree`, `CheckboxGroup`, `RadioGroup`, `SegmentedControl` and `RichTextEditor` already do.
+
+```vue
+<KFormField label="Folder">
+   <KFieldBoundary auxiliary>
+      <KInput v-model="query" aria-label="Find a folder" />
+   </KFieldBoundary>
+   <KTree v-model:selected="folder" :nodes="nodes" />
+</KFormField>
+```
+
 ## Components
 
 | Group     | Components                                                                                                                                                                                                                      |
 | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| core      | Root, Icon, Button, Spinner, Input, Textarea, FormField, Form, Kbd, VisuallyHidden                                                                                                                                              |
+| core      | Root, Icon, Button, Spinner, Input, Textarea, FormField, FieldMessage, FieldBoundary, Form, FormAlerts, Kbd, VisuallyHidden                                                                                                     |
 | forms     | Calendar, Checkbox, CheckboxGroup, ColorInput, Combobox, DateInput, DatePicker, FileInput, InputAddon, InputGroup, NumberInput, PasswordInput, PinInput, Radio, RadioGroup, SegmentedControl, Select, Slider, Switch, TimeInput |
 | overlays  | CommandPalette, ConfirmDialog, ConfirmHost, ContextMenu, Drawer, DropdownMenu, HoverCard, Modal, OverlayHost, Popover, Toaster, Tooltip                                                                                         |
-| data      | Avatar, AvatarGroup, Badge, DescriptionList, FilterPills, Pagination, Stat, Table, Tag, Timeline, Tree                                                                                                                          |
+| data      | Avatar, AvatarGroup, Badge, DescriptionList, FilterPill, FilterPills, Pagination, SelectionBar, Stat, Table, Tag, Timeline, Tree                                                                                                |
 | layout    | Accordion, AppShell, Breadcrumbs, Card, CopyButton, Grid, NavLink, PageHeader, Separator, Sidebar, SidebarNav, SidebarSection, Stack, Tabs, ThemeSwitch, Toolbar                                                                |
 | templates | DashboardLayout, AuthLayout, DashboardPage, ListPage, DetailPage, FormPage, SettingsPage, SettingsSection, SettingsModal, SettingsGroup, AppearanceSettings, SaveBar, ErrorPage, NotFoundPage, EmptyPage, Brand, AccountMenu    |
 | feedback  | Alert, EmptyState, LoadingOverlay, Meter, Progress, ProgressRing, Skeleton                                                                                                                                                      |
@@ -238,7 +286,18 @@ Built-in messages follow the active language. `messages` overrides them for one
 | editor    | RichTextEditor                                                                                                                                                                                                                  |
 | chart     | ChartPanel, ChartLegend, LineChart, BarChart, DoughnutChart                                                                                                                                                                     |
 
-Composables: `useTheme`, `usePreset`, `useForm`, `useField`, `useFieldControl`, `useToast` (and `toast`), `useConfirm`, `useAlert`, `usePrompt`, `useModal`, `useDrawer`, `useOverlay`, `useModalContext`, `useLoading` (and `withLoading`), `useLoadingState`, `useHotkey`, `useCopy`, `useFileDrop`, `usePasswordStrength`, `useTableSort`, `useAppShell`, `useScrollLock`, `useDirtyGuard`, `useIcons` helpers and `useLinkComponent`. With the Nuxt module also `useDashboard()` (runtime account, breadcrumbs and badges for the `k-dashboard` layout).
+Composables: `useTheme`, `usePreset`, `useForm`, `useField`, `useFieldControl`, `useToast` (and `toast`), `useConfirm`, `useAlert`, `usePrompt`, `useModal`, `useDrawer`, `useOverlay`, `useModalContext`, `useLoading` (and `withLoading`), `useLoadingState`, `useHotkey`, `useCopy`, `useFileDrop` (with `readDroppedFiles`), `usePasswordStrength`, `useTableSort`, `useAppShell`, `useScrollLock`, `useDirtyGuard`, `useIcons` helpers and `useLinkComponent`, `provideFieldBoundary`, `provideAuxiliaryControls`, `provideForm`, `useLocale`. With the Nuxt module also `useDashboard()` (runtime account, breadcrumbs and badges for the `k-dashboard` layout).
+
+### Lists, trees and uploads
+
+- `Tree` takes `size="sm"` for dense rows, `checkmark`, `descriptionVariant` (`mono`, the default for paths and slugs, or `text`; a node can override it with its own `descriptionVariant`), `emptyText` (or `#empty`) and works inside a `FormField` (labelled and described by the field). With `reorderable` rows get a drag handle and Alt with the up and down arrows moves them; `nestable` also lets rows change level (drop in the middle of a row, Alt with left and right). The `move` event carries `{ node, target, position, from: { parent, index }, to: { parent, index } }`, `to.index` being the final index, and `applyTreeMove(nodes, move)` returns the updated tree. `canDrop(move)` vetoes a move. Moves are announced to screen readers.
+- `SelectionBar` shows a plural aware selected count (announced in a live region), select all (`total` plus `@select-all`) and clear (`@clear`) actions, an `#actions` slot and `placement` `inline`, `sticky` or `floating`. With `count` 0 it renders no box (only its live region), so it can sit in a flex toolbar without adding a gap; the first count after mount is announced too. `ListPage` renders it for `#bulk`.
+- `FilterPills` is generic: the value type comes from the options, `multiple` makes the model an array and `required` drops `null` from it (like `SegmentedControl`). Options take `menu` items (a dropdown trigger showing `valueLabel`) or `panel: true`, which opens a popover with the `#panel-<value>` slot (`{ option, active, toggle, close }`, `panelLabel` names it). The `#pill` slot renders any trigger and its scope has `defaultPill`, a component that renders the built-in pill for that option, so one custom pill does not mean rewriting the others: `<component :is="defaultPill" v-else />`. `FilterPill` is exported so custom triggers match the other pills.
+- `SegmentedControl` with `required` narrows `v-model` to a non null value. Options take `title` (tooltip and description) and `muted`, and the `#option` slot replaces the content of each option.
+- `FileInput` takes `directory` (folder picker; dropped folders are walked, every file keeps its relative path) or `directory="drop"` (the click opens a file picker, dropped folders are still walked), `directoryAction` (an "Upload a folder" button under the dropzone, `directoryActionLabel` renames it) or the `#actions` slot (`{ browse, browseDirectory, disabled }`), `skipHidden` (ignores dot files and dot folders), `list: false` (no file list: picks and drops only emit `add`), `loading` and the `#hint` slot. `add` receives `(files, { entries: [{ file, path }], directories, source, event, dataTransfer })`; `directories` lists every folder path of a folder pick or drop, empty folders included, and `add` also fires for a drop of empty folders. `invalid` fires per file and `reject` once with every rejected file (`(events, detail)`). `acceptMode="hint"` only passes `accept` to the picker and leaves filtering to the host. The component exposes `browse()`, `browseDirectory()`, `addFiles()` and `focus()`.
+- `useFileDrop` returns `{ over, reset }` and takes `ignore(event)`. A drop handled by a nested drop zone is skipped by the outer ones, and the state resets after any drop, even when a child stops propagation. `readDroppedFiles(dataTransfer)` walks dropped folders (call it synchronously in the drop handler) and resolves to `[{ file, path }]`; `readDroppedFiles(dataTransfer, { directories: true })` resolves to `{ files, directories }` with every folder path, empty ones included, and `skipHidden: true` leaves out dot entries.
+- `Tabs` items take `badgeTone` and `badgeLabel` (the accessible name of the badge); the `#panel="{ item }"` slot renders a single panel for the active tab. `stretch` makes the tabs fill the remaining height of a flex column and the active panel grow with it (`flex: 1; min-height: 0`), and `inset` spaces the tab list from the container edges with the panel flush below it, for inspectors and side panes. `Breadcrumbs` items take `attrs` and `onClick` (an item without a link renders a button, handy for drop targets), `#item` customizes the content, and `ancestors` links every item and ends with a separator (`breadcrumbsAncestors` on `PageHeader`). `Accordion` takes `variant` `card` (default), `outline` (the same card without a shadow), `separated` or `plain`; items take `description`, and `contentVariant="neutral"` drops the content padding and text styling.
+- `RichTextEditor` labels heading buttons by their real level (`headingLabel="relative"` numbers them from 1) and `toolbar` picks and orders the buttons: `['headings', '|', 'bold', 'italic', 'link']`.
 
 ## Imperative hooks
 
@@ -281,10 +340,36 @@ await run(() => api.save(form))
 ```
 
 - Toasts stack behind the newest one (up to `max`, default 4) and expand on hover or focus, which also pauses their timers. Each tone has its own icon; `description` takes a string or a list of lines. `dismissible: false` hides the close button, `duration: Infinity` keeps a toast open, `progress` on the toaster shows a timer bar.
-- `useConfirm()` resolves `true` or `false`, `useAlert()` resolves when closed, `usePrompt()` resolves the string or `null`. `useConfirm()` and `useAlert()` also take `body`, a component rendered under the description (for example a list of the pages that use a file). Prompt options: `label`, `placeholder`, `value`, `type`, `required`, `requiredText`, `validate(value)` (return an error message to keep the dialog open), `onConfirm(value)`. Without a host they fall back to the native browser dialogs.
+- `useConfirm()` resolves `true` or `false`, `useAlert()` resolves when closed, `usePrompt()` resolves the string or `null`. `useConfirm()` and `useAlert()` also take `body`, a component rendered under the description (for example a list of the pages that use a file). The body can emit `close` to dismiss the dialog as cancelled, for example when one of its links is clicked. Prompt options: `label`, `placeholder`, `value`, `type`, `required`, `requiredText`, `validate(value)` (return an error message to keep the dialog open), `onConfirm(value)`. Without a host they fall back to the native browser dialogs.
 - `modal.open(Component, props, options)` returns a promise for the result plus `id`, `close(result)` and `update(props)`. Options: `title`, `description`, `size`, `side` (drawers), `sheet`, `flush`, `dismissible`, `hideClose`, `closeLabel`, `as: 'modal' | 'drawer'`. Inside the component, `useModalContext<R>()` gives `close(result?)` and `setLoading(boolean)`. A component can open another modal on top; Escape and the backdrop resolve `undefined`. `modal.close(id?, result?)` and `modal.closeAll()` close from outside.
 - `useLoading()` is ref counted: `start()` returns a stop function, `wrap(promise | fn, options?)` and `withLoading(fn)` stop when settled, `active`, `count` and `blocking` are refs. The host shows a top progress bar after `delay`, and a blocking screen (a modal dialog, so the page is inert) for tasks started with `blocking: true`. `useLoadingState({ global? })` returns a scoped `{ loading, error, run }` for buttons and forms.
 
+### Dialogs
+
+`Modal` and `Drawer` take `beforeClose(reason)` (`'escape' | 'backdrop' | 'close-button' | 'action'`). It runs for every user close: Escape, a backdrop click, the close button and the `close` function of the slots. Return `false` (or a promise of `false`) to keep the dialog open, for example to ask before discarding changes. Setting `v-model:open` to `false` from the parent always closes. `useModal().open()` and `useDrawer().open()` take `beforeClose` too.
+
+```vue
+<KDrawer v-model:open="open" title="Spring campaign" :before-close="confirmDiscard">
+   <template #title-trailing><KBadge dot tone="success" label="Published" /></template>
+   ...
+</KDrawer>
+```
+
+```ts
+const confirm = useConfirm()
+const confirmDiscard = () => !dirty.value || confirm({ title: 'Discard changes?', tone: 'danger' })
+```
+
+- `#title-trailing` puts badges or a status next to the title without replacing `#header`.
+- `size="fullscreen"` on a Modal fills the viewport edge to edge (no radius, no outer padding, safe area insets inside the panel) and never turns into a bottom sheet.
+- Overlays reset the field context: controls inside a Modal, Drawer, CommandPalette, menu, Popover or HoverCard panel do not inherit the id, description or invalid state of a `FormField` that contains the trigger. Call `provideFieldBoundary()` in your own overlay components to do the same.
+
+`CommandPalette`: items take typed `data` (`CommandItem<T>`, `CommandGroup<T>`), which reaches the `#item` slot and the `select` event typed; `emptyText` also takes `(query) => string`. Groups take a `description` (shown after the label), the `#group-label` slot (`{ group, label, description, recent }`) replaces the label, and `notice` or the `#after-results` slot (`{ query, count }`) adds a line under the results, for example "Showing the first results".
+
+- `Brand`: `logo` takes an image URL, trusted inline SVG markup (`'<svg ...>'`) or a component; the `#logo` slot replaces the boxed mark; `show-name` keeps the name visible next to a logo.
+- `Card`: `selected` gives a pressed look (`aria-pressed` on `as="button"`, `aria-selected` with `role="option"` and similar roles); `:animated="false"` turns off the entrance animation.
+- `Spinner`: `block` renders a centered loading state that fills its container, with `label` shown under the spinner: `<KSpinner block size="lg" label="Loading entries" />`.
+
 ## Layouts and page templates
 
 Ready defaults to start a dashboard project: an app frame, an auth frame and page templates with loading, empty and error states. The default look is the nuxt-cms one: the sidebar sits on the canvas and the content is an inset raised panel.
@@ -306,21 +391,22 @@ Ready defaults to start a dashboard project: an app frame, an auth frame and pag
 </KDashboardLayout>
 ```
 
-| Prop                                                              | Default                         | Notes                                                                                                                                                                                                                                                                        |
-| ----------------------------------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `variant`                                                         | `'inset'`                       | `inset` (canvas sidebar, inset content panel), `sidebar` (bordered sidebar, full bleed content), `floating` (raised sidebar card on the canvas).                                                                                                                             |
-| `navigation`                                                      |                                 | `NavItem[]` or `NavSection[]` (`{ label?, items }`). Items: `label`, `to`/`href`, `icon`, `badge`, `exact`, `active`, `external`, `disabled`, `children`.                                                                                                                    |
-| `currentPath`                                                     | router path                     | Active state is computed from the router (`$route`) with prefix matching (`/` and `exact` items match exactly).                                                                                                                                                              |
-| `brandName`, `brandSubtitle`, `brandIcon`, `brandLogo`, `brandTo` | `brandTo: '/'`                  | Or the `#brand` slot.                                                                                                                                                                                                                                                        |
-| `account`                                                         |                                 | `{ name, email?, avatar?, role?, menu? }`. Shown as a row (avatar, name, email, chevron) at the bottom of the sidebar.                                                                                                                                                       |
-| `accountAction`                                                   | `'settings'`                    | `settings`: the row opens a `SettingsModal` (`settingsSections`, `settingsPresets`, `v-model:settings-open`, `v-model:settings-section`, `@sign-out`). `menu`: a DropdownMenu with `account.menu`, selections emit `account-select`. Or replace it with the `#account` slot. |
-| `breadcrumbs`                                                     |                                 | Rendered in the desktop topbar. `#topbar` replaces them, `#actions` adds buttons on the right.                                                                                                                                                                               |
-| `search`                                                          | `false`                         | `true` adds a CommandPalette with every navigation item, an array adds your own command groups. `#search` replaces it.                                                                                                                                                       |
-| `themeSwitch`                                                     | `'sidebar'`                     | `'sidebar'`, `'topbar'` or `false`.                                                                                                                                                                                                                                          |
-| `collapsible`, `v-model:collapsed`, `storageKey`                  | `true`, `'k-sidebar-collapsed'` | Icon rail on desktop. Persisted in a cookie under Nuxt (rendered on the server, no flash) or `localStorage` elsewhere. `false` disables persistence.                                                                                                                         |
-| `shortcut`                                                        | `'mod+b'`                       | Toggles the rail on desktop and the drawer on mobile. `searchShortcut` defaults to `mod+k`.                                                                                                                                                                                  |
-| `v-model:open`                                                    | `false`                         | Mobile drawer (below 768px of shell width): scrim, focus moves into the drawer, the content is `inert`, Escape and the scrim close it and focus returns to the burger.                                                                                                       |
-| `fluid`, `viewTransition`                                         | `false`, `true`                 | Full width content; `view-transition-name` on sidebar and panel so page transitions keep the frame still.                                                                                                                                                                    |
+| Prop                                                                               | Default                         | Notes                                                                                                                                                                                                                                                                                                                                                      |
+| ---------------------------------------------------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `variant`                                                                          | `'inset'`                       | `inset` (canvas sidebar, inset content panel), `sidebar` (bordered sidebar, full bleed content), `floating` (raised sidebar card on the canvas).                                                                                                                                                                                                           |
+| `navigation`                                                                       |                                 | `NavItem[]` or `NavSection[]` (`{ label?, items }`). Items: `label`, `to`/`href`, `icon`, `badge`, `exact`, `active`, `external`, `disabled`, `children`.                                                                                                                                                                                                  |
+| `currentPath`                                                                      | router path                     | Active state is computed from the router (`$route`) with prefix matching (`/` and `exact` items match exactly).                                                                                                                                                                                                                                            |
+| `brandName`, `brandSubtitle`, `brandIcon`, `brandLogo`, `brandShowName`, `brandTo` | `brandTo: '/'`                  | `brandLogo` takes an image URL, inline SVG markup or a component; the name is hidden next to a logo unless `brandShowName`. Or the `#brand` slot.                                                                                                                                                                                                          |
+| `account`                                                                          |                                 | `{ name, email?, avatar?, role?, menu? }`. Shown as a row (avatar, name, email, chevron) at the bottom of the sidebar.                                                                                                                                                                                                                                     |
+| `accountAction`                                                                    | `'settings'`                    | `settings`: the row opens a `SettingsModal` (`settingsSections`, `settingsPresets`, `v-model:settings-open`, `v-model:settings-section`, `@sign-out`). `menu`: a DropdownMenu with `account.menu`, selections emit `account-select`. Or replace it with the `#account` slot.                                                                               |
+| `breadcrumbs`                                                                      |                                 | Rendered in the desktop topbar. `#topbar` replaces them, `#actions` adds buttons on the right.                                                                                                                                                                                                                                                             |
+| `search`                                                                           | `false`                         | `true` adds a CommandPalette with every navigation item, an array adds your own command groups, an async function `(query, signal) => CommandGroup<T>[]` searches on your server (item `data` reaches `#search-item` typed) (matching navigation items come first unless `searchNavigation` is `false`). `#search` replaces it.                            |
+| `searchProps`                                                                      |                                 | Options for the built-in CommandPalette: `minQueryLength`, `debounce`, `placeholder`, `label`, `emptyText` (a string or `(query) => string`), `minQueryText`, `errorText`, `loadingText`, `resultsText`, `notice`, `recentKey`, footer labels. Slots `#search-item`, `#search-empty`, `#search-group-label` and `#search-after-results` reach the palette. |
+| `themeSwitch`                                                                      | `'sidebar'`                     | `'sidebar'`, `'topbar'` or `false`.                                                                                                                                                                                                                                                                                                                        |
+| `collapsible`, `v-model:collapsed`, `storageKey`                                   | `true`, `'k-sidebar-collapsed'` | Icon rail on desktop. Persisted in a cookie under Nuxt (rendered on the server, no flash) or `localStorage` elsewhere. `false` disables persistence.                                                                                                                                                                                                       |
+| `shortcut`                                                                         | `'mod+b'`                       | Toggles the rail on desktop and the drawer on mobile. `searchShortcut` defaults to `mod+k`.                                                                                                                                                                                                                                                                |
+| `v-model:open`                                                                     | `false`                         | Mobile drawer (below 768px of shell width): scrim, focus moves into the drawer, the content is `inert`, Escape and the scrim close it and focus returns to the burger.                                                                                                                                                                                     |
+| `fluid`, `viewTransition`                                                          | `false`, `true`                 | Full width content; `view-transition-name` on sidebar and panel so page transitions keep the frame still.                                                                                                                                                                                                                                                  |
 
 Slots: `brand`, `search`, `sidebar` (replaces the navigation), `sidebar-footer`, `account`, `topbar-brand`, `topbar`, `actions`, default, plus `settings-section-<id>`, `settings-actions-<id>` and `settings-account-fields`, forwarded to the SettingsModal. The exposed `openSettings(id?)` opens it on a section. Landmarks: skip link, `aside` and `nav` with labels, `main` with an id, `aria-current="page"` on the active link. `SidebarNav` (layout group) renders the same navigation data inside your own `Sidebar`.
 
@@ -357,6 +443,7 @@ A large dialog (60rem) with a section nav on the left and the content on the rig
 - Built-in sections, used when no `#section-<id>` slot fills them: `account` (profile card, your `#account-fields`, a sign out button) and `appearance` (`AppearanceSettings`: theme cards light, dark, system and preset cards; `presets` limits or hides them).
 - `@sign-out` adds a Sign out item at the bottom of the nav and in the account section.
 - Labels: `title` (accessible name of the dialog, default `Settings`), `closeLabel`, `navLabel`, `signOutLabel`, `accountLabel`, `accountText`, `appearanceLabel`, `appearanceText`, `sessionLabel`, `sessionText`, `themeLabel`, `themeText`, `presetLabel`, `presetText`.
+- `hide-session` hides the Session group (sign out) in the account section; the Sign out item in the nav stays. `beforeClose` works as on Modal.
 - Accessibility: native modal `<dialog>` (focus trap, Escape, focus returns to the trigger), the nav is a labelled `nav` of buttons with `aria-current` and `aria-controls`, the content is a `section` labelled by its heading.
 
 `SettingsGroup` (`label`, `description`, `row`, `#actions`) lays out a block inside a section; `AppearanceSettings` works on its own too, for example inside a `SettingsPage`.

package/dist/chart/BarChart.vue.d.ts

@@ -66,7 +66,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -269,7 +269,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/chart/ChartLegend.vue.d.ts

@@ -8,7 +8,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -120,7 +119,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -157,6 +156,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -204,7 +204,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -316,7 +315,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -353,6 +352,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;

package/dist/chart/ChartPanel.vue.d.ts

@@ -72,7 +72,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -271,7 +271,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/chart/ChartSummary.vue.d.ts

@@ -62,7 +62,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -262,7 +262,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/chart/DoughnutChart.vue.d.ts

@@ -70,7 +70,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -273,7 +273,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/chart/LineChart.vue.d.ts

@@ -68,7 +68,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -273,7 +273,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/components/core/Button.vue.d.ts

@@ -85,7 +85,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -310,7 +310,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/components/core/FieldBoundary.vue

@@ -0,0 +1,14 @@
+<template>
+   <slot />
+</template>
+
+<script setup>
+import { provideAuxiliaryControls, provideFieldBoundary } from "../../composables/useFieldBoundary";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  auxiliary: { type: Boolean, required: false }
+});
+if (props.auxiliary) provideAuxiliaryControls();
+else provideFieldBoundary();
+defineSlots();
+</script>

package/dist/components/core/FieldBoundary.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    auxiliary?: boolean;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/core/FieldMessage.vue

@@ -0,0 +1,28 @@
+<template>
+   <p
+      v-if="message || $slots.default"
+      :id="id"
+      class="k-field-message"
+      :class="`k-field-message-${tone}`"
+   >
+      <Icon v-if="resolvedIcon" :name="resolvedIcon" class="k-field-message-icon" />
+      <span class="k-field-message-text"
+         ><slot>{{ message }}</slot></span
+      >
+   </p>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { toneIcons } from "../../internal/core/tone";
+import Icon from "./Icon.vue";
+const props = defineProps({
+  message: { type: String, required: false },
+  tone: { type: String, required: false, default: "danger" },
+  icon: { type: [String, Object, Boolean], required: false, skipCheck: true, default: void 0 },
+  id: { type: String, required: false }
+});
+const resolvedIcon = computed(
+  () => props.icon === false ? void 0 : props.icon ?? toneIcons[props.tone]
+);
+</script>