vectis-ui 0.8.0 → 0.9.0

package/README.md

@@ -1,48 +1,79 @@
-# vectis-ui
+<p align="center">
+  <a href="https://vectis-ui.com">
+    <img src="https://vectis-ui.com/favicon.svg" alt="Vectis UI logo" width="96" />
+  </a>
+</p>
 
-A **Vue 3 + TypeScript** design system, **Nuxt 3 (SSR)** compatible, built on the platform's native primitives: the Popover API, CSS Anchor Positioning, `<details name>`, `:user-invalid`… JavaScript is a last resort, never a reflex.
+<h1 align="center">Vectis UI</h1>
 
-## Principles
+<p align="center">
+  A Vue 3 component library built for modern browsers.
+</p>
 
-- **HTML and CSS first.** Menus, tooltips and toasts rest on the Popover API (`popovertarget`, the top layer, native light dismiss) and CSS anchor positioning — **no positioning library**. Accordions are `<details name>`. Where JS exists, it is justified by a comment in the component.
-- **Zero runtime dependency** besides `vue` (a peer dependency).
-- **All styling goes through design tokens** (`--vectis-*`), overridable at runtime with no rebuild.
-- **Real tree-shaking**: ESM, one module per component, named imports.
+<p align="center">
+  <a href="https://www.npmjs.com/package/vectis-ui"><img src="https://img.shields.io/npm/v/vectis-ui" alt="npm version" /></a>
+  <a href="https://github.com/Jypyx/vectis-ui/actions/workflows/ci.yml"><img src="https://github.com/Jypyx/vectis-ui/actions/workflows/ci.yml/badge.svg" alt="CI status" /></a>
+  <a href="https://github.com/Jypyx/vectis-ui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/vectis-ui" alt="MIT license" /></a>
+</p>
 
-## Installation
+<p align="center">
+  <a href="https://vectis-ui.com">Documentation</a> ·
+  <a href="https://vectis-ui.com/docs/installation/">Installation</a> ·
+  <a href="https://github.com/Jypyx/vectis-ui/blob/main/CHANGELOG.md">Changelog</a> ·
+  <a href="https://github.com/Jypyx/vectis-ui">GitHub</a>
+</p>
+
+## Introduction
+
+Vectis UI is a set of Vue 3 components written in TypeScript.
+The whole look is driven by CSS custom properties (`--vectis-*`), so you can retheme the library, or a single part of a page, without rebuilding anything. Styles live in cascade layers, which means your own CSS wins without fighting over specificity.
+
+A few things you get out of the box:
+
+- **No runtime dependency** other than Vue itself.
+- **Pay for what you import.** Each component ships as its own module with its own stylesheet.
+- **SSR-safe**, so it works with Nuxt 3 and 4 without a module or a plugin.
+- **Accessible by default.** Keyboard support and ARIA semantics on every component, with axe checks run in CI against both the light and the dark theme.
+- **Light and dark themes**, switchable on any DOM subtree with a `data-theme` attribute.
+- **English and French** built in, and any other language can be added from your app.
+- **No icon font required.** The icons the library draws are embedded SVGs, and you can plug in your own icon set.
+
+## Quick start
+
+Install the package:
 
 ```bash
-pnpm add vectis-ui vue
+npm install vectis-ui
+# or
+pnpm add vectis-ui
+# or
+yarn add vectis-ui
 ```
 
+Import the global stylesheet once, in your app's entry point:
+
 ```ts
 // main.ts
 import 'vectis-ui/styles.css'
 ```
 
-`styles.css` is the **core**: the reset, the tokens and the chrome shared by every component (5.27 kB gzip). Each component's own CSS ships with the component and is pulled in by the import you already write — nothing else to add, and you download the CSS of what you use. A single `VButton` costs 6.08 kB gzip of CSS instead of the 22.41 kB of a bundled stylesheet.
-
-Those figures are measured, not estimated: `pnpm --filter vectis-ui bench:size` prints them from the built artefact and holds them to a committed baseline, so they cannot drift out of step with the library again.
+Then import the components you need:
 
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
-import { VButton, VInput, toast } from 'vectis-ui'
+import { VButton, VInput } from 'vectis-ui'
 
 const email = ref('')
 </script>
 
 <template>
-  <VInput v-model="email" type="email" required placeholder="you@example.com" aria-label="Email" />
-  <VButton @click="toast({ message: `Confirmation sent to ${email}`, tone: 'success' })">
-    Subscribe
-  </VButton>
+  <VInput v-model="email" type="email" label="Email" />
+  <VButton>Subscribe</VButton>
 </template>
 ```
 
-## Nuxt 3
-
-The library is pre-built as ESM and SSR-safe (no `window`/`document` access outside the client lifecycle). No module and no plugin needed:
+Using Nuxt? Declare the stylesheet in `nuxt.config.ts` instead, so it's injected during server rendering:
 
 ```ts
 // nuxt.config.ts
@@ -51,338 +82,41 @@ export default defineNuxtConfig({
 })
 ```
 
-```vue
-<script setup lang="ts">
-import { VButton, VBadge } from 'vectis-ui'
-</script>
-```
-
-Named imports are tree-shaken by Vite/Nitro. No `build.transpile` required.
-
-Component CSS travels with the component as a plain static `import`, which Vite, Nitro and webpack all turn into a render-blocking `<link>` — including for a lazily loaded route, whose stylesheet is awaited before the chunk runs. The one setup that would flash is a hand-rolled SSR server that injects its client CSS **through JavaScript** (`vite-plugin-css-injected-by-js`, webpack's `style-loader`): there, the first paint carries the core (tokens, layout, hidden popovers) but not the components' internal rules. Keep the client CSS extracted to a file and the question does not arise.
-
-For the locale and the icons, put the configuration in a **universal** plugin — `plugins/vectis.ts`, never `plugins/vectis.client.ts`: a client-only configuration would make the server and client renders diverge, hence a hydration mismatch. See [Internationalization](#internationalization).
-
-## Theming
-
-### Token architecture
-
-Two levels of custom properties, generated from a typed TypeScript source (a format inspired by the [W3C DTCG](https://design-tokens.github.io/community-group/format/)):
-
-- **Primitives**: OKLCH palettes (`--vectis-color-indigo-500`), spacing scales (`--vectis-space-4`), type, radii, shadows, durations/easings.
-- **Semantics** — the only ones components consume: `--vectis-color-surface`, `--vectis-color-text-muted`, `--vectis-color-accent`, `--vectis-radius-interactive`, `--vectis-focus-ring-color`…
-
-### Dark mode
-
-```html
-<html data-theme="dark"></html>
-```
-
-`data-theme` works on **any DOM subtree** (a dark panel inside a light page, or the reverse) and also drives `color-scheme` (scrollbars, native controls).
-
-### Runtime overrides — no rebuild
-
-Every customization is a redefinition of custom properties, in CSS:
-
-```css
-/* a "coral" theme: accent + pill radii */
-:root {
-  --vectis-color-accent: oklch(58% 0.2 25);
-  --vectis-color-accent-hover: oklch(51% 0.19 25);
-  --vectis-radius-interactive: 9999px;
-}
-```
-
-…or in JavaScript, on a subtree included:
-
-```ts
-panel.style.setProperty('--vectis-color-accent', 'oklch(58% 0.2 25)')
-```
-
-The design system's CSS lives in layers (`vectis.reset < vectis.tokens < vectis.components < vectis.utilities`): **any non-layered consumer style wins automatically** — overriding a component never calls for a specificity war. Every sheet the library emits re-declares that order, so it holds whichever one your bundler happens to place first.
-
-### Programmatic access to the tokens
-
-```ts
-import { tokens, flattenTokens } from 'vectis-ui/tokens'
-
-// [{ path: ['color', 'surface'], cssName: '--vectis-color-surface', token: {...} }, …]
-const semanticColors = flattenTokens(tokens.semantic.color, ['color'])
-```
-
-`vectis-ui/tokens.json` exposes the same source as raw JSON (tooling, configuration export). It is the foundation of the theming app to come: modify the object, inject the variables, export the config.
-
-## Icons
-
-**No icon font is required.** The icons the library renders itself — `VDialog`'s cross, `VDatePicker`'s and `VMenu`'s chevrons, the toasts' tone icons, `VDataTable`'s sorting… — are **embedded SVGs**, exact replicas of Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24, Apache-2.0 © Google). There are 34 of them and **each is a module of its own**, imported by the components that draw it: you pay for the icons your components actually render and for nothing else. A lone `VButton` ships none at all, which is most of why its JavaScript comes to 4.62 kB gzip with `VIcon`, `VSpinner` and the dictionary pulled in alongside it.
-
-Reach for one directly through the `vectis-ui/icons` subpath, and pass it where a name would go:
-
-```ts
-import { close, search } from 'vectis-ui/icons'
-```
-
-The `VIcon` component resolves its source in this order: **an explicit `render` → `src` → `name` (the consumer resolver first, then the drawing the icon brought along, then the ligature) → the slot**.
-
-```vue
-<VIcon :name="close" />
-<!-- one of the DS's own icons: SVG, no font needed -->
-<VIcon name="favorite" />
-<!-- a bare NAME: your resolver, then a ligature from YOUR icon font -->
-<VIcon src="/logo.svg" label="Logo" />
-<!-- an image -->
-<VIcon><svg …/></VIcon>
-<!-- an inline SVG (the slot) -->
-```
-
-A **bare string is always a NAME**, and it no longer reaches the library's own drawings: an icon is in your bundle because a module imported it, never because a string might one day ask for it.
-
-- **Decorative by default** (`aria-hidden`); the `label` prop makes it informative (`role="img"` + `aria-label`).
-- The **`data-icon`** attribute carries the requested name whatever the source — a stable hook for consumer CSS and for tests.
-- Size: **1em by default** — the icon follows the surrounding text. Override freely in pixels through `:size="32"`. With no prop, any parent can drive the context by setting the **`--vectis-icon-size`** and **`--vectis-icon-opsz`** custom properties (which is what the shared `v-control` class does — VButton, VInput, VTextarea, VInputOTP, VChip… — according to the control's size); the numeric prop wins over the context. `VSpinner` follows the same principle (1em + `:size` in px), with no context API.
-- **`--vectis-icon-opsz` only applies to the ligature**: it is a font variable axis, with no hold on a built-in SVG, an image or a third-party component. The size, by contrast, applies to every source.
-
-### Every icon prop takes a name **or** an explicit rendering
-
-```vue
-<VButton icon-start="download">Export</VButton>
-<VButton :icon-start="cloud_upload">Upload</VButton>
-<VBreadcrumb :separator-icon="{ src: '/chevron.svg' }" :items="items" />
-<VMenuItem label="Open" :icon-start="{ component: FolderIcon }" />
-```
-
-A string is **always** an icon name; one of the design system's own icons is imported from `vectis-ui/icons`; an image or a component is declared as an object (`{ src }`, `{ component }`, `{ path }`, `{ text }`, `{ class }`). That is what lets Iconify-style naming conventions (`mdi:close`, `fa6-solid:xmark`) work.
-
-### Wiring your own icon library
-
-`setIconResolver` is consulted **before** the icon's own drawing; returning `undefined` means "I do not know this name" and hands over to that drawing, then to the ligature. **Partial** mappings are therefore usable. The `IconName` type enumerates the names to cover.
-
-An imported icon carries its **name** as well as its paths, which is what keeps a single `setIconResolver` call enough to move the design system's own internals onto your icon set — exactly as it was when those defaults were plain strings.
-
-```ts
-// main.ts / plugins/icons.ts — at MODULE level, never inside a setup()
-import { setIconResolver, classIconResolver } from 'vectis-ui'
-
-// Font Awesome, Phosphor, Bootstrap Icons… (class-based fonts + ::before)
-// `fa-solid` unconditionally: the Free tier only draws a small fraction of the
-// catalogue in Regular, so mapping `filled: false` onto it would render empty
-// squares. FA's outline/filled pair requires the Pro tier.
-setIconResolver(
-  classIconResolver({
-    aliases: { close: 'xmark', expand_more: 'angle-down', check_circle: 'circle-check' },
-    className: (name) => `fa-solid fa-${name}`,
-  }),
-)
-
-// Lucide, Untitled UI… (SVG sets as Vue components, a single <svg> root)
-import { componentIconResolver } from 'vectis-ui'
-import { X, Check, ChevronDown } from 'lucide-vue-next'
-setIconResolver(
-  componentIconResolver({
-    components: { close: X, check: Check, expand_more: ChevronDown },
-    props: () => ({ strokeWidth: 1.75 }),
-  }),
-)
-
-// Material Symbols, ligature-based IcoMoon… — ALSO renders the design system's 20
-// icons through the font, which restores the --vectis-icon-opsz optical axis
-// (20 at xs/sm/md).
-import { ligatureIconResolver } from 'vectis-ui'
-setIconResolver(ligatureIconResolver())
-```
+The [installation guide](https://vectis-ui.com/docs/installation/) covers both setups in more detail.
 
-`classIconResolver` is **strict** by default: one of the design system's own names absent from your alias table falls back to the embedded SVG rather than producing a nonexistent class (an empty square). Your own names always pass through. It consults a **set of names** to decide, never the drawings, so wiring in your own library downloads none of the Material paths.
+## Documentation
 
-For a one-off need, `setIconResolver` accepts any function returning one of the five shapes: `{ path }`, `{ component }`, `{ src }`, `{ text }`, `{ class }`.
-
-> **SSR** — set the resolver at module level (a Nuxt plugin, `main.ts`), never inside a `setup()`: the state lives in the process, which is correct for configuration and wrong for per-request state. Above all, **do not install it client-only** (`plugins/*.client.ts`): the server would render the built-in SVG and the client your library — a hydration mismatch. Font Awesome in "SVG with JS" mode (which replaces elements in the DOM) is not supported: use its CSS mode.
-
-**Loading an icon font stays useful** for your own names. An example with Material Symbols Rounded through Google Fonts:
-
-```html
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
-/>
-```
-
-(or self-host the variable woff2, e.g. the `material-symbols` npm package). `display=block` avoids flashing the icon name in full. With no font loaded, the layout is preserved (the textual name stays inside the icon's box). Overriding the `--vectis-font-family-icon` token is enough to switch to another **ligature-based** font (Material Symbols Outlined/Sharp, an IcoMoon build) — with no resolver.
-
-On `VButton`: the `icon-start` / `icon-end` props take an icon name or an explicit rendering (the `#start`/`#end` slots stay available for custom content and win over the props). `VButton` also accepts `href` (rendered as `<a>`; `disabled`/`loading` produce an inert link: `href` removed + `aria-disabled`) and `compact` (height reduced by 4px: 20/28/36/44/52px depending on the `xs`–`xl` size).
-
-The `xs`–`xl` scale is not exposed by every component: those embedding a text input (`VInput`, `VTextarea`, `VInputOTP`, `VCombobox`, `VDateInput`, `VTimeInput`) restrict themselves to **`sm` / `md` / `lg`** (32/40/48px, default `md`), `compact` remaining available; `VChip` restricts itself to `xs`/`sm`.
-
-## Internationalization
-
-No user-facing text is hardcoded in the components: everything comes from a dictionary. The design system is **English by default** and ships French; any other language is added on the consumer side.
-
-Two things are settled separately: the **words** come from the dictionary, the **formats** (month and day names, date field order, hour cycle, first day of the week) derive from `Intl` from the locale tag. Setting a locale with no matching dictionary therefore already gives correct dates, with labels left in English.
-
-### Switching the design system to French
-
-```ts
-// main.ts
-import { fr, registerMessages, setLocale } from 'vectis-ui'
-
-registerMessages('fr', fr)
-setLocale('fr-FR')
-```
-
-French is **opt-in**: it only enters your bundle if you import it.
-
-Set a **complete** BCP 47 tag. `Intl` accepts `'en'`, but applies the language's default conventions to it — `'en'` means 12 h and a week starting on Sunday, which is not `'en-GB'`.
-
-### Adjusting a few words
-
-An override is **partial**: what you do not write stays unchanged, and successive calls on the same language accumulate.
-
-```ts
-import { registerMessages } from 'vectis-ui'
-
-registerMessages('en', {
-  dataTable: { empty: 'Nothing to display' },
-  common: { close: 'Quit' },
-})
-```
-
-### Adding a language the design system does not ship
-
-The same gesture as enabling French — there are not two categories of dictionary. What you do not write falls back to English, never to an empty string: a partial dictionary is usable from its very first key.
-
-```ts
-import { registerMessages, setLocale, type MessagesInput } from 'vectis-ui'
-
-const de: MessagesInput = {
-  common: { loading: 'Wird geladen…', close: 'Schließen' },
-  pagination: { previous: 'Vorherige Seite', next: 'Nächste Seite', page: (p) => `Seite ${p}` },
-}
-
-registerMessages('de', de)
-setLocale('de-DE')
-```
-
-An entry depending on a value is a **TypeScript function**, not a placeholder string: no plural engine and no ICU syntax to learn. Type the constant as `MessagesInput` for key autocompletion, or as `Messages` to have the compiler require full coverage.
-
-The key is the **language subtag** alone: `registerMessages('de', …)` covers `de-DE`, `de-AT` and `de-CH`.
-
-### Precedence
-
-A text prop set on a component stays **authoritative**: the global translation only changes the defaults. For containers' accessible names, the full chain is `aria-labelledby` › `aria-label` › the `label` prop › the dictionary › English.
-
-`VDatePicker`, `VDateInput`, `VTimePicker` and `VTimeInput` keep their `locale` prop, which takes precedence; without it, they follow the global locale.
-
-```vue
-<VDateInput />
-<!-- the global locale -->
-<VDateInput locale="ja-JP" />
-<!-- forced -->
-```
-
-### Limit: one locale per process
-
-The configuration lives at module level, like the icons': **a single locale per process**. A server-rendered site serving `/fr` and `/en` from the same Node process cannot rely on it to vary the language per request — it must pass the text props explicitly.
-
-## Components
-
-| Area      | Components                                                                                                                                                                                                           |
-| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Actions   | `VButton`, `VIconButton`, `VChip` (selectable, dismissible)                                                                                                                                                          |
-| Forms     | `VInput`, `VTextarea`, `VCheckbox`, `VRadio`, `VSwitch`, `VSlider` (single/range), `VInputOTP`, `VCombobox` (search, multi)                                                                                          |
-| Overlays  | `VTooltip`, `VMenu` + `VMenuItem`/`VMenuGroup`/`VMenuSeparator` (recursive submenus)                                                                                                                                 |
-| Structure | `VAccordion` + `VAccordionItem`, `VDataTable` (sorting, responsive), `VBreadcrumb` (data-driven, truncation)                                                                                                         |
-| Feedback  | `VToaster` + `toast()` (notifications), `VBadge`, `VAvatar`, `VSpinner`, `VSkeletonLoader` (loading silhouettes), `VProgressLinear`, `VProgressCircular`, `VIcon` (built-in SVGs, a font, an image or an inline SVG) |
-
-Implementation notes worth knowing:
-
-- **VSlider range** superimposes two native `<input type="range">` (each thumb stays a real keyboard/ARIA slider); the JS only prevents them crossing.
-- **VDataTable responsive**: the `stack` mode is pure CSS (container queries) — under a 640px container, rows become cards and the headers are re-injected through `::before + data-label`.
-- **VCombobox** follows the ARIA combobox/listbox pattern (`aria-activedescendant`, focus stays in the input); the panel is aligned on the control through `anchor-size(width)`.
-- **VToast**: mount `<VToaster />` once (at the app root), then call `toast({ message, tone, ... })` from anywhere — a component, a store, an API response (client only, never during SSR). Placements as Popover API stacks (the top layer), auto-dismiss (5 s by default, `duration: 0` = persistent, paused on hover), `dismissToast(id?)` to close programmatically.
-
-Cross-cutting conventions:
-
-- Prop-driven variants → `data-variant` / `data-tone` / `data-size` attributes (targetable in CSS).
-- `v-model` wherever state exists (`v-model:open` for VMenu).
-- Floating elements take their trigger from a scoped slot: `<template #trigger="{ triggerProps }"><VButton v-bind="triggerProps">…</VButton></template>` — `popovertarget` and the ARIA attributes are set for you.
-- Forms: the visual error state comes from native `:user-invalid` (zero validation JS); the `invalid` prop forces the state for server-side validation.
-
-The living documentation (stories, tokens page, theme switch): `pnpm storybook`.
+Everything lives on **[vectis-ui.com](https://vectis-ui.com)**, a page per component with live examples and API tables, plus guides on [theming](https://vectis-ui.com/docs/theming/), [iconography](https://vectis-ui.com/docs/iconography/), [internationalization](https://vectis-ui.com/docs/i18n/) and [accessibility](https://vectis-ui.com/docs/accessibility/).
 
 ## Browser support
 
-Target: **modern browsers** — Chrome/Edge 125+, Safari 26+, Firefox 147+.
-
-- Baseline, no compromise: the Popover API, `<dialog>`, `<details name>`, `:user-invalid`, `:has()`, `color-mix()`, `@layer`, custom properties.
-- **CSS Anchor Positioning** (VTooltip, VMenu and its submenus, VCombobox): shipped with no JS fallback, a deliberate choice — every engine above the floor implements it, Firefox from 147.
-- Pure progressive enhancement (clean degradation when unsupported): `@starting-style`/`allow-discrete` animations, `field-sizing: content` (VTextarea `auto-grow`), `::details-content` + `interpolate-size` (the VAccordion animation), and the scroll shadows of `VDialog` (`container-type: scroll-state`, Chrome/Edge 133+ — elsewhere the hairlines simply stay invisible).
+Vectis UI targets recent browsers only:
 
-### Do not let your build lower this CSS
+| Chrome / Edge | Safari | Firefox |
+| ------------- | ------ | ------- |
+| 134+          | 26+    | 147+    |
 
-Your bundler minifies the library's sheets along with the rest of your application, and a minifier
-aimed at older browsers **rewrites** part of what they contain. One of those rewrites is not a
-fallback but a change of meaning: **Lightning CSS** — the default CSS minifier of **Vite 8**, and
-Parcel's — replaces `:dir(rtl)` with an `:is(:lang(ae), :lang(ar), …, :lang(yi))` approximation as
-soon as its targets predate Chrome 120. That list matches on the document's **language** where the
-library flips on its **direction**, so on an `<html dir="rtl" lang="en">` page the rule never
-applies at all.
+Two features set this floor: CSS anchor positioning, used without a JavaScript fallback, and the `closedby` attribute of `<dialog>` (Chrome 134), which keeps a modal open on Escape or on a click outside when it should be. Safari does not implement `closedby` yet, and a small script stands in for it there. Some effects, like entry animations, are progressive enhancements and simply don't play on engines that lack them.
 
-Eleven components mirror something through `:dir(rtl)` and would silently stop: the arrows of
-VPagination, VTabs, VBreadcrumb, VMenu, VCalendar, VDatePicker and VCarousel, VBadge's overlay
-corner, VProgressCircular's direction of travel, VProgressLinear's clipped text copy and
-VSkeletonLoader's wave. Nothing errors, and a dev server shows none of it: only a production build
-minifies.
-
-Vite derives `build.cssTarget` from `build.target`, whose `'modules'` default stands for Chrome 87.
-Pin it to the floor above, and the modern CSS goes through untouched:
+If your bundler targets older browsers, it may rewrite part of the library's CSS during minification. Set `build.cssTarget` to the versions above in your Vite (or Nuxt) config to keep it intact:
 
 ```ts
 // vite.config.ts
 export default defineConfig({
-  build: { cssTarget: ['chrome125', 'edge125', 'safari26', 'firefox147'] },
-})
-
-// nuxt.config.ts — the same value, one level down
-export default defineNuxtConfig({
-  vite: { build: { cssTarget: ['chrome125', 'edge125', 'safari26', 'firefox147'] } },
+  build: { cssTarget: ['chrome134', 'edge134', 'safari26', 'firefox147'] },
 })
 ```
 
-It is also what keeps the output small: lowered, every OKLCH colour of the palette is emitted twice,
-once as an sRGB hex fallback and once as `lab()`.
+## Versioning
 
-## Accessibility
+Vectis UI follows [Semantic Versioning](https://semver.org/). While the version is still 0.x, a minor release can include breaking changes, so read the [changelog](https://github.com/Jypyx/vectis-ui/blob/main/CHANGELOG.md) before upgrading.
 
-Keyboard navigation and ARIA semantics on every component: the ARIA menu pattern (roving focus, focus returned to the trigger), `role="switch"`, tooltips linked by `aria-describedby` and dismissible with Escape (WCAG 1.4.13), `role="status"`/`role="alert"` according to criticality, an accessible label **required** on `VIconButton`. `prefers-reduced-motion` respected everywhere. Storybook's a11y addon audits every story.
-
-## Security model
-
-The package has **no runtime dependency** beyond Vue, makes **no network request**, and reads no
-storage. It renders no consumer string as HTML: there is no `v-html` anywhere in the library.
+## Contributing
 
-One contract is yours, and it is the standard one for a component library: **the design system does
-not filter URL schemes.** `href` (`VButton`, `VChip`, `VAvatar`, `VMenuItem`, `VSideNavigationItem`,
-`VBreadcrumb`) and `src` (`VIcon`, `VAvatar`) are passed through untouched, so a `javascript:` URL
-coming from your data runs on click. Validate it where the data enters your application — with
-particular care for `VBreadcrumb`, whose `items[].href` is typically built from a CMS or an API
-rather than written by hand.
+Bug reports and feature requests are welcome in the [issue tracker](https://github.com/Jypyx/vectis-ui/issues). To work on the library itself, see the [repository](https://github.com/Jypyx/vectis-ui).
 
-Custom colour props (`color` on `VChip`, `VBadge`, `VAvatar`, `VDatePicker` events) are written to CSS
-custom properties through `style.setProperty`, so they cannot escape the `style` attribute — but a
-hostile value can still be a valid `url(…)`, i.e. a tracking beacon. Treat them as data to validate
-if they come from outside your application.
+## License
 
-## Contributing
-
-```bash
-corepack enable pnpm
-pnpm install
-pnpm storybook          # development
-pnpm lint && pnpm format && pnpm typecheck && pnpm test && pnpm build && pnpm build-storybook
-```
+Vectis UI is released under the [MIT license](https://github.com/Jypyx/vectis-ui/blob/main/LICENSE).
 
-- **Tokens**: never edit `src/styles/tokens.css` or `src/tokens/tokens.json` (generated) — change the `src/tokens/*.ts` source then run `pnpm tokens`.
-- **A new component**: a `src/components/VX/` folder with `VX.vue` (non-scoped styles in `@layer vectis.components`, semantic tokens only, variants through `data-*`), `VX.stories.ts` (default, variants, states, edge cases, play functions), `VX.test.ts` (logic only — browser behaviour is tested in the play functions), and the named export in `src/index.ts`. The Storybook `title` and the `.mdx` heading are written **without the `V`** — the only exception to the prefix.
-- **Its CSS ships as `dist/components/VX/VX.css`, imported by `VX.js`.** No rule may depend on where another component's sheet lands: a declaration that would collide with another component's at equal specificity is qualified (`[data-size]`, a compound class, a descendant) or routed through the custom property the target reads. `pnpm build` checks the mechanism.
-- Any behavioural JS must be justified by a comment: "can modern HTML/CSS do it?" comes first.
+The built-in icons are drawn from [Material Symbols](https://github.com/google/material-design-icons) by Google, used under the Apache License 2.0. See [NOTICE](https://github.com/Jypyx/vectis-ui/blob/main/NOTICE) for details.

package/dist/components/VAccordion/VAccordionItem.d.ts

@@ -3,6 +3,9 @@ interface AccordionItemProps {
     /**
      * The heading of the section, the line that stays visible when it is closed. Use
      * the `#title` slot instead when the heading needs markup rather than plain text.
+     *
+     * Note that this prop shadows the HTML attribute of the same name on the component,
+     * so no tooltip can be set through it.
      */
     title?: string;
     /**
@@ -47,12 +50,7 @@ type __VLS_ModelProps = {
     /**
      * Whether the section is open, when the consumer wants to drive or observe it. Left
      * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial
-     * value.
-     *
-     * TRAP — "not bound" is written as `null` and not `undefined`. A model typed as a plain
-     * boolean is declared as such at runtime, and Vue casts an ABSENT boolean prop to
-     * `false`, which would silently overwrite `defaultOpen`. The explicit default disarms
-     * that cast.
+     * value. `null` means unbound.
      */
     'open'?: boolean | null;
 };

package/dist/components/VAccordion/VAccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VAccordionItem.js","names":[],"sources":["../../../src/components/VAccordion/VAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * One section of an accordion: a heading the reader can click, and the content it\n * reveals. It is a native `<details>`/`<summary>` pair, so the browser owns the\n * open and closed state, the keyboard and the accessibility semantics. The only JS\n * is the `v-model:open` bridge, fed by the element, and the click a disabled summary\n * has to cancel, both shared with VSideNavigationItem through `useDetailsOpen`.\n *\n * The opening is animated entirely in CSS, with `::details-content` and\n * `interpolate-size` (`styles/disclosure.css`). Both are recent additions to the\n * language: where they are missing the section simply appears at once, which is the\n * intended fallback.\n */\n\nimport { computed, inject } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { accordionKey } from './context'\n\nimport { useDetailsOpen } from '../../composables/useDetailsOpen'\n\ninterface AccordionItemProps {\n  /**\n   * The heading of the section, the line that stays visible when it is closed. Use\n   * the `#title` slot instead when the heading needs markup rather than plain text.\n   */\n  title?: string\n  /**\n   * A secondary line under the title, for a short explanation or a status. The\n   * `#subtitle` slot replaces it when markup is needed.\n   */\n  subtitle?: string\n  /**\n   * An icon placed before the title: an icon name, or an explicit render\n   * (`{ src }`, `{ component }`…). The `#icon` slot replaces it.\n   *\n   * It carries no side in its name because there is only one: the end of the row belongs\n   * to the chevron, so there is nothing for a start to be told apart from. That is the\n   * rule every single-icon component of the design system follows, and its slot is named\n   * `#icon` for the same reason.\n   */\n  icon?: IconSource\n  /**\n   * Renders the section already open. Only its initial value is read: the browser\n   * owns the state afterwards, so changing this prop later will not close a section\n   * the reader has opened. Bind `v-model:open` to drive it instead.\n   */\n  defaultOpen?: boolean\n  /**\n   * Makes the section inert. It can no longer be opened, the keyboard skips over\n   * it, and it is greyed out through the colour tokens.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionItemProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  icon: undefined,\n  defaultOpen: false,\n  disabled: false,\n})\n\n/**\n * Whether the section is open, when the consumer wants to drive or observe it. Left\n * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial\n * value.\n *\n * TRAP — \"not bound\" is written as `null` and not `undefined`. A model typed as a plain\n * boolean is declared as such at runtime, and Vue casts an ABSENT boolean prop to\n * `false`, which would silently overwrite `defaultOpen`. The explicit default disarms\n * that cast.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\ndefineSlots<{\n  /** The content revealed when the section is open. */\n  default(): unknown\n  /** A title made of markup, which replaces the `title` prop. */\n  title?(): unknown\n  /** A subtitle made of markup, which replaces the `subtitle` prop. */\n  subtitle?(): unknown\n  /** Free content before the title, which takes the place of `icon`. */\n  icon?(): unknown\n}>()\n\nconst accordion = inject(accordionKey, null)\n\n/**\n * Both icons are chosen on the enclosing group. The chevron fallback is what keeps\n * an item rendering correctly when it is used outside a VAccordion.\n */\nconst expandIcon = computed(() => accordion?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => accordion?.collapseIcon)\n\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item v-disclosure\"\n    :name=\"accordion?.name\"\n    :open=\"openAttr\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"icon\">\n        <VIcon v-if=\"icon\" class=\"v-accordion-icon\" v-bind=\"iconProps(icon)\" />\n      </slot>\n      <span class=\"v-accordion-heading\">\n        <span class=\"v-accordion-title\"\n          ><slot name=\"title\">{{ title }}</slot></span\n        >\n        <VTypography\n          v-if=\"subtitle !== undefined || $slots.subtitle\"\n          as=\"span\"\n          variant=\"caption\"\n          tone=\"muted\"\n          class=\"v-accordion-subtitle\"\n          ><slot name=\"subtitle\">{{ subtitle }}</slot></VTypography\n        >\n      </span>\n      <VIcon class=\"v-accordion-chevron v-disclosure-chevron\" v-bind=\"iconProps(expandIcon)\" />\n      <!-- Both icons are always in the DOM; [open] decides which one shows, in CSS alone -->\n      <VIcon\n        v-if=\"collapseIcon\"\n        class=\"v-accordion-chevron v-accordion-chevron-open v-disclosure-chevron v-disclosure-chevron-open\"\n        v-bind=\"iconProps(collapseIcon)\"\n      />\n    </summary>\n    <div class=\"v-accordion-content\">\n      <slot />\n    </div>\n  </details>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion-item + .v-accordion-item {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-accordion-summary {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--accordion-pad-block, var(--vectis-space-4))\n      var(--accordion-pad-inline, var(--vectis-space-5));\n    cursor: pointer;\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    color: var(--vectis-color-text);\n  }\n\n  .v-accordion-summary:hover:not([data-disabled]) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-accordion-summary:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-accordion-item:first-child > .v-accordion-summary {\n    border-start-start-radius: var(--accordion-corner-radius, 0);\n    border-start-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-item:last-child:not([open]) > .v-accordion-summary {\n    border-end-start-radius: var(--accordion-corner-radius, 0);\n    border-end-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-heading {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* A disabled item greys out through the colour tokens and never through\n     `opacity`, the rule every control in the DS follows. */\n  .v-accordion-summary[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icon and the subtitle default to text-muted, which is DARKER than the\n     text-subtle a disabled title takes: left to themselves they would come out\n     stronger than the label they belong to, so they inherit it instead. The chevron\n     gets the same treatment from `styles/disclosure.css`. */\n  .v-accordion-summary[data-disabled] .v-accordion-icon,\n  .v-accordion-summary[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  .v-accordion-content {\n    padding: var(--accordion-content-pad-start, var(--vectis-space-2))\n      var(--accordion-pad-inline, var(--vectis-space-5))\n      var(--accordion-pad-block, var(--vectis-space-4));\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The disclosure animation, the chevron's rotation or swap and the WebKit marker come\n     from `styles/disclosure.css`, reduced-motion block included. */\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VAccordionItem.js","names":[],"sources":["../../../src/components/VAccordion/VAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * One section of an accordion: a heading the reader can click, and the content it\n * reveals. It is a native `<details>`/`<summary>` pair, so the browser owns the\n * open and closed state, the keyboard and the accessibility semantics. The only JS\n * is the `v-model:open` bridge, fed by the element, and the click a disabled summary\n * has to cancel, both shared with VSideNavigationItem through `useDetailsOpen`.\n *\n * The opening is animated entirely in CSS, with `::details-content` and\n * `interpolate-size` (`styles/disclosure.css`). Both are recent additions to the\n * language: where they are missing the section simply appears at once, which is the\n * intended fallback.\n */\n\nimport { computed, inject, provide } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { accordionKey } from './context'\n\nimport { useDetailsOpen } from '../../composables/useDetailsOpen'\n\ninterface AccordionItemProps {\n  /**\n   * The heading of the section, the line that stays visible when it is closed. Use\n   * the `#title` slot instead when the heading needs markup rather than plain text.\n   *\n   * Note that this prop shadows the HTML attribute of the same name on the component,\n   * so no tooltip can be set through it.\n   */\n  title?: string\n  /**\n   * A secondary line under the title, for a short explanation or a status. The\n   * `#subtitle` slot replaces it when markup is needed.\n   */\n  subtitle?: string\n  /**\n   * An icon placed before the title: an icon name, or an explicit render\n   * (`{ src }`, `{ component }`…). The `#icon` slot replaces it.\n   *\n   * It carries no side in its name because there is only one: the end of the row belongs\n   * to the chevron, so there is nothing for a start to be told apart from. That is the\n   * rule every single-icon component of the design system follows, and its slot is named\n   * `#icon` for the same reason.\n   */\n  icon?: IconSource\n  /**\n   * Renders the section already open. Only its initial value is read: the browser\n   * owns the state afterwards, so changing this prop later will not close a section\n   * the reader has opened. Bind `v-model:open` to drive it instead.\n   */\n  defaultOpen?: boolean\n  /**\n   * Makes the section inert. It can no longer be opened, the keyboard skips over\n   * it, and it is greyed out through the colour tokens.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionItemProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  icon: undefined,\n  defaultOpen: false,\n  disabled: false,\n})\n\n// TRAP — \"not bound\" is written as `null` and not `undefined`. A model typed as a plain\n// boolean is declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`,\n// which would silently overwrite `defaultOpen`. The explicit default disarms that cast.\n/**\n * Whether the section is open, when the consumer wants to drive or observe it. Left\n * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial\n * value. `null` means unbound.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\ndefineSlots<{\n  /** The content revealed when the section is open. */\n  default(): unknown\n  /** A title made of markup, which replaces the `title` prop. */\n  title?(): unknown\n  /** A subtitle made of markup, which replaces the `subtitle` prop. */\n  subtitle?(): unknown\n  /** Free content before the title, which takes the place of `icon`. */\n  icon?(): unknown\n}>()\n\nconst accordion = inject(accordionKey, null)\n// The group stops here: an item nested in this one's content without a VAccordion of its\n// own would otherwise share this group's name, and the browser closes every other member\n// of a name group when one opens, the section holding it included.\nprovide(accordionKey, null)\n\n/**\n * Both icons are chosen on the enclosing group. The chevron fallback is what keeps\n * an item rendering correctly when it is used outside a VAccordion.\n */\nconst expandIcon = computed(() => accordion?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => accordion?.collapseIcon)\n\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item v-disclosure\"\n    :name=\"accordion?.name\"\n    :open=\"openAttr\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"icon\">\n        <VIcon v-if=\"icon\" class=\"v-accordion-icon\" v-bind=\"iconProps(icon)\" />\n      </slot>\n      <span class=\"v-accordion-heading\">\n        <span class=\"v-accordion-title\"\n          ><slot name=\"title\">{{ title }}</slot></span\n        >\n        <VTypography\n          v-if=\"subtitle !== undefined || $slots.subtitle\"\n          as=\"span\"\n          variant=\"caption\"\n          tone=\"muted\"\n          class=\"v-accordion-subtitle\"\n          ><slot name=\"subtitle\">{{ subtitle }}</slot></VTypography\n        >\n      </span>\n      <VIcon class=\"v-accordion-chevron v-disclosure-chevron\" v-bind=\"iconProps(expandIcon)\" />\n      <!-- Both icons are always in the DOM; [open] decides which one shows, in CSS alone -->\n      <VIcon\n        v-if=\"collapseIcon\"\n        class=\"v-accordion-chevron v-accordion-chevron-open v-disclosure-chevron v-disclosure-chevron-open\"\n        v-bind=\"iconProps(collapseIcon)\"\n      />\n    </summary>\n    <div class=\"v-accordion-content\">\n      <slot />\n    </div>\n  </details>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion-item + .v-accordion-item {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-accordion-summary {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--accordion-pad-block, var(--vectis-space-4))\n      var(--accordion-pad-inline, var(--vectis-space-5));\n    cursor: pointer;\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    color: var(--vectis-color-text);\n  }\n\n  .v-accordion-summary:hover:not([data-disabled]) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-accordion-summary:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-accordion-item:first-child > .v-accordion-summary {\n    border-start-start-radius: var(--accordion-corner-radius, 0);\n    border-start-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-item:last-child:not([open]) > .v-accordion-summary {\n    border-end-start-radius: var(--accordion-corner-radius, 0);\n    border-end-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-heading {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* A disabled item greys out through the colour tokens and never through\n     `opacity`, the rule every control in the DS follows. */\n  .v-accordion-summary[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icon and the subtitle default to text-muted, which is DARKER than the\n     text-subtle a disabled title takes: left to themselves they would come out\n     stronger than the label they belong to, so they inherit it instead. The chevron\n     gets the same treatment from `styles/disclosure.css`. */\n  .v-accordion-summary[data-disabled] .v-accordion-icon,\n  .v-accordion-summary[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  .v-accordion-content {\n    padding: var(--accordion-content-pad-start, var(--vectis-space-2))\n      var(--accordion-pad-inline, var(--vectis-space-5))\n      var(--accordion-pad-block, var(--vectis-space-4));\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The disclosure animation, the chevron's rotation or swap and the WebKit marker come\n     from `styles/disclosure.css`, reduced-motion block included. */\n}\n</style>\n"],"mappings":""}

package/dist/components/VAccordion/VAccordionItem.vue_vue_type_script_setup_true_lang.js

@@ -4,17 +4,17 @@ import n from "../VTypography/VTypography.js";
 import { expand_more as r } from "../VIcon/icons/expand_more.js";
 import { accordionKey as i } from "./context.js";
 import { useDetailsOpen as a } from "../../composables/useDetailsOpen.js";
-import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, inject as m, mergeModels as h, mergeProps as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useModel as x, withCtx as S } from "vue";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, inject as m, mergeModels as h, mergeProps as g, openBlock as _, provide as v, renderSlot as y, toDisplayString as b, unref as x, useModel as S, withCtx as C } from "vue";
 //#region src/components/VAccordion/VAccordionItem.vue?vue&type=script&setup=true&lang.ts
-var C = [
+var w = [
 	"name",
 	"open",
 	"data-swap"
-], w = [
+], T = [
 	"data-disabled",
 	"aria-disabled",
 	"tabindex"
-], T = { class: "v-accordion-heading" }, E = { class: "v-accordion-title" }, D = { class: "v-accordion-content" }, O = /*@__PURE__*/ p({
+], E = { class: "v-accordion-heading" }, D = { class: "v-accordion-title" }, O = { class: "v-accordion-content" }, k = /*@__PURE__*/ p({
 	__name: "VAccordionItem",
 	props: /*@__PURE__*/ h({
 		title: { default: void 0 },
@@ -37,46 +37,48 @@ var C = [
 	}),
 	emits: ["update:open"],
 	setup(p) {
-		let h = p, O = x(p, "open"), k = m(i, null), A = o(() => k?.expandIcon ?? r), j = o(() => k?.collapseIcon), { openAttr: M, onToggle: N, onSummaryClick: P } = a(O, {
+		let h = p, k = S(p, "open"), A = m(i, null);
+		v(i, null);
+		let j = o(() => A?.expandIcon ?? r), M = o(() => A?.collapseIcon), { openAttr: N, onToggle: P, onSummaryClick: F } = a(k, {
 			defaultOpen: () => h.defaultOpen,
 			disabled: () => h.disabled
 		});
 		return (r, i) => (_(), l("details", {
 			class: "v-accordion-item v-disclosure",
-			name: b(k)?.name,
-			open: b(M),
-			"data-swap": j.value ? "" : void 0,
-			onToggle: i[1] ||= (...e) => b(N) && b(N)(...e)
+			name: x(A)?.name,
+			open: x(N),
+			"data-swap": M.value ? "" : void 0,
+			onToggle: i[1] ||= (...e) => x(P) && x(P)(...e)
 		}, [u("summary", {
 			class: "v-accordion-summary",
 			"data-disabled": p.disabled ? "" : void 0,
 			"aria-disabled": p.disabled || void 0,
 			tabindex: p.disabled ? -1 : void 0,
-			onClick: i[0] ||= (...e) => b(P) && b(P)(...e)
+			onClick: i[0] ||= (...e) => x(F) && x(F)(...e)
 		}, [
-			v(r.$slots, "icon", {}, () => [p.icon ? (_(), s(t, g({
+			y(r.$slots, "icon", {}, () => [p.icon ? (_(), s(t, g({
 				key: 0,
 				class: "v-accordion-icon"
-			}, b(e)(p.icon)), null, 16)) : c("", !0)]),
-			u("span", T, [u("span", E, [v(r.$slots, "title", {}, () => [d(y(p.title), 1)])]), p.subtitle !== void 0 || r.$slots.subtitle ? (_(), s(n, {
+			}, x(e)(p.icon)), null, 16)) : c("", !0)]),
+			u("span", E, [u("span", D, [y(r.$slots, "title", {}, () => [d(b(p.title), 1)])]), p.subtitle !== void 0 || r.$slots.subtitle ? (_(), s(n, {
 				key: 0,
 				as: "span",
 				variant: "caption",
 				tone: "muted",
 				class: "v-accordion-subtitle"
 			}, {
-				default: S(() => [v(r.$slots, "subtitle", {}, () => [d(y(p.subtitle), 1)])]),
+				default: C(() => [y(r.$slots, "subtitle", {}, () => [d(b(p.subtitle), 1)])]),
 				_: 3
 			})) : c("", !0)]),
-			f(t, g({ class: "v-accordion-chevron v-disclosure-chevron" }, b(e)(A.value)), null, 16),
-			j.value ? (_(), s(t, g({
+			f(t, g({ class: "v-accordion-chevron v-disclosure-chevron" }, x(e)(j.value)), null, 16),
+			M.value ? (_(), s(t, g({
 				key: 0,
 				class: "v-accordion-chevron v-accordion-chevron-open v-disclosure-chevron v-disclosure-chevron-open"
-			}, b(e)(j.value)), null, 16)) : c("", !0)
-		], 8, w), u("div", D, [v(r.$slots, "default")])], 40, C));
+			}, x(e)(M.value)), null, 16)) : c("", !0)
+		], 8, T), u("div", O, [y(r.$slots, "default")])], 40, w));
 	}
 });
 //#endregion
-export { O as default };
+export { k as default };
 
 //# sourceMappingURL=VAccordionItem.vue_vue_type_script_setup_true_lang.js.map