@xleddyl/443-components-vue 0.14.0 → 0.16.0

package/README.md

@@ -96,7 +96,7 @@ import { Button, OverlayHost, Root, toast } from '@xleddyl/443-components-vue'
 
 Language and icon collections without Nuxt: `app.use(createLocale(it))` (or `createLocale(computed(() => ...))` to follow your own i18n), and `registerIconCollection('lucide', () => import('@iconify-json/lucide/icons.json'))`.
 
-Without Nuxt the theme and preset preferences are kept in `localStorage`; pass your own stores with `app.use(createTheme(ref('dark')))` and `app.use(createPreset(ref('suedtirol')))`. Import the fonts of the presets you use yourself (see [Presets](#presets)). Optional groups: `import { DataGrid } from '@xleddyl/443-components-vue/grid'` plus `import '@xleddyl/443-components-vue/grid/style.css'` (same for `editor` and `chart`). With a router, provide the link component once: `app.use(createLinkComponent(RouterLink))`.
+Without Nuxt the theme and preset preferences are kept in `localStorage` (and in the [preferences store](#preferences)); pass your own stores with `app.use(createTheme(ref('dark')))` and `app.use(createPreset(ref('suedtirol')))`. Import the fonts of the presets you use yourself (see [Presets](#presets)). Optional groups: `import { DataGrid } from '@xleddyl/443-components-vue/grid'` plus `import '@xleddyl/443-components-vue/grid/style.css'` (same for `editor` and `chart`). With a router, provide the link component once: `app.use(createLinkComponent(RouterLink))`.
 
 Vite 8 minifies CSS with Lightning CSS. Set `build.cssTarget` to browsers that support `light-dark()` (for example `['chrome123', 'edge123', 'firefox128', 'safari17.5']`) to keep the native function. See the theming notes below for what changes when it is transpiled.
 
@@ -201,6 +201,81 @@ Semantic color props are always called `tone` and accept `'neutral' | 'accent' |
 
 Buttons show `icon` before the label and `trailingIcon` after it. Put action icons (`plus`, `trash`, `pencil`) in `icon`. Put direction icons (`arrow-right`, `chevron-right`, `arrow-top-right-on-square`) in `trailingIcon`: `<KButton trailing-icon="arrow-right">Continue</KButton>`.
 
+## Preferences
+
+UI choices are kept in one preferences store: the theme, the preset, the collapsed sidebar and the DataGrid columns and page size. By default the store is `localStorage` (keys `k-pref:<key>`, JSON, SSR safe, never throws, synced across tabs). Give the app your own store to keep the choices per user in a database, so they follow the user across devices.
+
+| Key                  | Value                                                          | Written by                                                                |
+| -------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| `theme`              | `'system' \| 'light' \| 'dark'`                                | `useTheme().set`, `ThemeSwitch`, `AppearanceSettings`                     |
+| `preset`             | `ThemePreset`                                                  | `usePreset().set`, `AppearanceSettings`                                   |
+| `shell:<storageKey>` | `boolean` (collapsed)                                          | `AppShell` and `DashboardLayout` (`shell:k-sidebar-collapsed`)            |
+| `grid:<storageKey>`  | `GridPreference` (`{ columns?: GridColumnState[], pageSize }`) | `DataGrid` with `storageKey`: visibility, order, width, pinned, page size |
+
+`PREFERENCE_KEYS` builds them (`PREFERENCE_KEYS.grid('orders')`). Your own keys work too: use a namespace of your app (`app:<name>`).
+
+A store is a plain object:
+
+```ts
+interface PreferenceStore {
+   get(key: string): unknown
+   set(key: string, value: unknown): void
+   subscribe?(listener: (key: string, value: unknown) => void): () => void
+   clientOnly?: boolean
+}
+```
+
+`set(key, undefined)` removes a key. `subscribe` tells the components about changes that come from outside (another tab, a new snapshot). `clientOnly: true` means the values exist only in the browser (the `localStorage` store): components then render the fallback on the server and in the first client render, and read the store after mount. A store with `clientOnly: false` must return the same values on the server and in the browser (a snapshot from the session), so the first render already uses them.
+
+| API                                          | Use                                                                                                                                                 |
+| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `createPreferences(store?)`                  | A preferences instance (Vue plugin): `app.use(createPreferences(store))`. Without a store, `localStorage`.                                          |
+| `providePreferences(store \| preferences)`   | The same in a component `setup` (a subtree with its own store). Returns the instance.                                                               |
+| `usePreferences()`                           | The current instance: `get(key)` (reactive), `set(key, value)`, `remove(key)`, `store`.                                                             |
+| `usePreference(key, fallback, { validate })` | A writable computed of one key (`key` can be a getter). Invalid or missing values read as `fallback`.                                               |
+| `createLocalPreferenceStore(prefix?)`        | The default store (`k-pref:` prefix).                                                                                                               |
+| `createRemotePreferenceStore(options)`       | An in memory store for a backend: `initial` snapshot, `save(patch)`, `debounce` (ms, default 0), plus `replace(snapshot)`, `snapshot()`, `flush()`. |
+
+```ts
+const sidebarWide = usePreference('app:inspector-open', true, {
+   validate: (value): value is boolean => typeof value === 'boolean',
+})
+```
+
+### A store backed by your API
+
+`createRemotePreferenceStore` keeps the values in memory, groups the changes and calls `save(patch)` once per `debounce` window (a removed key is `null` in the patch). It flushes on `pagehide` and when the page is hidden, and keeps a failed patch for the next save. The default `localStorage` store does not debounce, because it is synchronous; a store that writes to a network API should debounce (about 1 second), because a column resize or a drag writes on every step. In Nuxt, add a plugin and send the snapshot with the session, so the server render and the first client render already use it:
+
+```ts
+export default defineNuxtPlugin((nuxtApp) => {
+   const { session, loggedIn } = useUserSession()
+   const store = createRemotePreferenceStore({
+      initial: session.value?.preferences,
+      debounce: 1000,
+      save: (patch) => {
+         if (loggedIn.value)
+            return $fetch('/api/account/preferences', { method: 'PUT', body: patch })
+      },
+   })
+   if (import.meta.client)
+      watch(
+         () => session.value?.user?.id,
+         () => store.replace(session.value?.preferences)
+      )
+   nuxtApp.vueApp.use(createPreferences(store))
+})
+```
+
+Without Nuxt: `app.use(createPreferences(createRemotePreferenceStore({ initial, save })))` before `mount`.
+
+### Cookies, SSR and the first render
+
+The Nuxt module still writes the theme (`k-theme`), the preset (`k-preset`) and the collapsed sidebar (the `storageKey` name) to cookies, because the server needs them before the app store is known (a logged out page, a store without a value). The store wins:
+
+- With a snapshot store (`clientOnly: false`) the root reads the store during setup, on the server and on the client, applies its value and updates the cookie. The server render and the hydration use the same value, so there is no flash.
+- With the `localStorage` store the cookie drives the server render, and the store is read after mount. The library writes both on every change, so on one device they agree and nothing moves; only a value set in another tab before the load is applied after mount.
+- When the store has no value yet, the current cookie (or a legacy key) is copied into it once: `k-grid:<storageKey>` (DataGrid columns), the `localStorage` collapsed flag and a non default theme or preset.
+
 ## Scoping
 
 - The reset only matches `.k-root` and its descendants, wrapped in `:where()` (zero specificity). Markup outside a root keeps browser defaults.
@@ -371,6 +446,7 @@ Composables: `useTheme`, `usePreset`, `useForm`, `useField`, `useFieldControl`,
 - `Combobox` with `creatable` takes `createTransform` (`ComboboxCreateTransform`, `(input) => string | null | undefined`) and `createValidate` (`ComboboxCreateValidate`, `(input) => string | true | undefined`). The transform runs on the typed text first: the "Create" option shows its result, and an empty result (or `null`) shows no create option. The validator gets the transformed text when the user picks the create option: a returned string is the error, shown inline through the surrounding `FormField` (`useFieldControl().setControlError`, or a `FieldMessage` under the control and an announcement without a field) with `aria-invalid` on the input, and nothing is created; `true` or nothing accepts it. The error clears when the query changes. Both work with `multiple`, where created values become tags: `<KCombobox v-model="tags" multiple creatable :create-transform="(input) => input.toLowerCase()" :create-validate="(input) => input.length >= 3 || 'Too short'" />`.
 - `Combobox` with `multiple` takes `hideTags`: the selected values are not rendered as tags inside the control (the host shows them elsewhere), the placeholder stays visible and Backspace no longer removes the last value. Selection is still announced through the options.
 - `Pagination` takes `showEdges` (first and last page buttons, `firstLabel`, `lastLabel`) and `showJump` (a typed page number, `jumpLabel`). Both are off by default. `page` is clamped to the page count only when `total` is known: while `total` is `0` or `loading` is set (it also sets `aria-busy`), the page is kept, so a server reload does not reset it.
+- Page sizes are `PageSize` values (`number | 'all'`): `pageSizes: [25, 50, 100, 'all']` adds an "All" option (`pagination.all`, override with `allLabel`). With `'all'` the page size model is `'all'`, there is one page and the summary reads `1-<total> of <total>`. `Pagination`, `ListPage` and `DataGrid` take it; with `serverPagination` the grid emits `'all'` through `v-model:page-size` and your API returns every row.
 - `FilterPills` can list active filters: options with `removable: true` render as active pills with a remove button (`removeLabel`, a `'Remove {label}'` template). Clicking the pill emits `select(value)`, the button emits `remove(value)` (and drops the value from the model when it is selected); focus moves to the next pill when the removed one disappears.
 - `Calendar` takes `dayText: (iso) => string | undefined`, a short line under each day number that is also added to the day's accessible name (availability, prices). The `#day` slot (`{ date, number, text, selected, unavailable, outOfRange, inMonth }`) replaces the cell content; it is decorative, so announced text still comes from `dayText`. Days before `min` or after `max` get the `is-out-of-range` class (and `is-unavailable`, like days rejected by `isDateDisabled`), so the `--k-calendar-out-of-range-*` tokens style them apart from disabled days.
 - `Separator` takes `description` (or `#description`) under its label, and an `#actions` slot rendered next to them (a small add or edit button). `variant="heading"` (`SeparatorVariant`, `'label' | 'heading'`, default `'label'`) shows the label as a section title on its own (an `h3`, `level` changes it) with the description below and the actions at the end, under one line above instead of the small muted label between two lines. `:lines="false"` (default `true`) hides the lines of either variant. `align` (`SeparatorAlign`, `'start' | 'center'`, default `'start'`) centers the heading title and description. `--k-separator-heading-font-size` (0.9375rem) sizes the heading, `--k-separator-heading-color` (default `--k-text`) colors it, and `--k-separator-label-font-size` (0.75rem) sizes the small label of `variant="label"`, with or without lines.
@@ -552,11 +628,12 @@ Ready defaults to start a dashboard project: an app frame, an auth frame and pag
 | `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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `settingsRoute`, `settingsResolvePage`                                             | `false`                         | Sync the settings modal with the URL (`?settings=users/usr_123`): `true` uses the key `settings`, a string sets the key. `settingsResolvePage(section, id, parents)` gives the label of a subpage restored from the URL. See SettingsModal.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `settingsHideSession`                                                              | `false`                         | Hides the Session group (sign out) in the account section of the settings modal. The Sign out item in the nav stays.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `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`                                                                      | `false`                         | `'sidebar'`, `'topbar'` or `false`. The default keeps the theme choice only in the Appearance section of the settings modal. With `accountAction="menu"` there is no settings modal, so set `'sidebar'` or `'topbar'`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `collapsible`, `v-model:collapsed`, `storageKey`                                   | `true`, `'k-sidebar-collapsed'` | Icon rail on desktop. Saved in the [preferences store](#preferences) under `shell:<storageKey>`, and in a cookie under Nuxt (rendered on the server, no flash). `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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |

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

@@ -24,7 +24,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
@@ -230,7 +230,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;

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

@@ -10,6 +10,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
     dir?: string | undefined | undefined;
+    contextmenu?: string | undefined | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -163,11 +165,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextmenu?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
     translate?: "yes" | "no" | undefined | undefined;
@@ -207,6 +207,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
     dir?: string | undefined | undefined;
+    contextmenu?: string | undefined | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -360,11 +362,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextmenu?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
     translate?: "yes" | "no" | undefined | undefined;

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

@@ -29,7 +29,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
@@ -229,7 +229,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;

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

@@ -18,7 +18,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
@@ -219,7 +219,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;

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

@@ -25,7 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
@@ -228,7 +228,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;

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

@@ -24,7 +24,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
@@ -230,7 +230,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;

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

@@ -40,7 +40,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
@@ -265,7 +265,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;

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

@@ -18,7 +18,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
     placeholder?: string | undefined | undefined;
@@ -214,7 +214,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
     placeholder?: string | undefined | undefined;

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

@@ -11,7 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
@@ -206,7 +206,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;

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

@@ -38,7 +38,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
     placeholder?: string | undefined | undefined;
@@ -242,7 +242,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
     placeholder?: string | undefined | undefined;

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

@@ -39,6 +39,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     placeholder?: string | undefined | undefined;
     name?: string | undefined | undefined;
     dir?: string | undefined | undefined;
+    contextmenu?: string | undefined | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -195,11 +197,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     step?: (string | number) | undefined;
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextmenu?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
     translate?: "yes" | "no" | undefined | undefined;
@@ -284,6 +284,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     placeholder?: string | undefined | undefined;
     name?: string | undefined | undefined;
     dir?: string | undefined | undefined;
+    contextmenu?: string | undefined | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -440,11 +442,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     step?: (string | number) | undefined;
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextmenu?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
     translate?: "yes" | "no" | undefined | undefined;

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

@@ -15,7 +15,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
@@ -210,7 +210,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;

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

@@ -25,6 +25,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
     dir?: string | undefined;
+    contextmenu?: string | undefined;
+    hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -183,11 +185,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined;
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextmenu?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
-    hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
     translate?: "yes" | "no" | undefined;
@@ -243,6 +243,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
     dir?: string | undefined;
+    contextmenu?: string | undefined;
+    hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -401,11 +403,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined;
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextmenu?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
-    hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
     translate?: "yes" | "no" | undefined;

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

@@ -13,7 +13,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
@@ -210,7 +210,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;

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

@@ -27,6 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     placeholder?: string | undefined | undefined;
     name?: string | undefined | undefined;
     dir?: string | undefined | undefined;
+    contextmenu?: string | undefined | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -180,11 +182,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextmenu?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
     translate?: "yes" | "no" | undefined | undefined;
@@ -247,6 +247,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     placeholder?: string | undefined | undefined;
     name?: string | undefined | undefined;
     dir?: string | undefined | undefined;
+    contextmenu?: string | undefined | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -400,11 +402,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextmenu?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
     translate?: "yes" | "no" | undefined | undefined;

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

@@ -15,6 +15,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
     dir?: string | undefined;
+    contextmenu?: string | undefined;
+    hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -173,11 +175,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined;
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextmenu?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
-    hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
     translate?: "yes" | "no" | undefined;
@@ -226,6 +226,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
     dir?: string | undefined;
+    contextmenu?: string | undefined;
+    hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -384,11 +386,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined;
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextmenu?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
-    hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     spellcheck?: (boolean | "true" | "false") | undefined;
     translate?: "yes" | "no" | undefined;

package/dist/components/data/Avatar.vue.d.ts

@@ -22,7 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;
@@ -223,7 +223,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
-    hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
+    hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
     lang?: string | undefined | undefined;