vectis-ui 0.1.1-rc.0 → 0.8.1

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 (4.33 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 4.87 kB gzip of CSS instead of the 21.58 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,304 +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="{ 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
+The [installation guide](https://vectis-ui.com/docs/installation/) covers both setups in more detail.
 
-`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 `VectisIconName` type enumerates the names to cover.
+## Documentation
 
-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.
+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/).
 
-```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())
-```
-
-`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.
-
-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')
-```
+## Browser support
 
-French is **opt-in**: it only enters your bundle if you import it.
+Vectis UI targets recent browsers only:
 
-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'`.
+| Chrome / Edge | Safari | Firefox |
+| ------------- | ------ | ------- |
+| 125+          | 26+    | 147+    |
 
-### Adjusting a few words
+CSS anchor positioning is used without a JavaScript fallback, which is what sets this floor. Some effects, like entry animations, are progressive enhancements and simply don't play on engines that lack them.
 
-An override is **partial**: what you do not write stays unchanged, and successive calls on the same language accumulate.
+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
-import { registerMessages } from 'vectis-ui'
-
-registerMessages('en', {
-  dataTable: { empty: 'Nothing to display' },
-  common: { close: 'Quit' },
+// vite.config.ts
+export default defineConfig({
+  build: { cssTarget: ['chrome125', 'edge125', 'safari26', 'firefox147'] },
 })
 ```
 
-### 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 VectisMessagesInput } from 'vectis-ui'
-
-const de: VectisMessagesInput = {
-  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 `VectisMessagesInput` for key autocompletion, or as `VectisMessages` 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.
+## Versioning
 
-Cross-cutting conventions:
+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.
 
-- 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`.
-
-## 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).
-
-## Accessibility
-
-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/VAccordion.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-accordion{--accordion-pad-delta:0px;--accordion-pad-block:calc(var(--vectis-space-4) - var(--accordion-pad-delta));--accordion-pad-inline:calc(var(--vectis-space-5) - var(--accordion-pad-delta));--accordion-content-pad-start:calc(var(--vectis-space-2) - var(--accordion-pad-delta));font-family:var(--vectis-text-family);overflow:hidden}.v-accordion[data-compact]{--accordion-pad-delta:var(--vectis-space-1)}.v-accordion[data-variant=outlined]{--accordion-corner-radius:calc(var(--vectis-radius-surface) - 1px);background:var(--vectis-color-surface-raised);border:1px solid var(--vectis-color-border);border-radius:var(--vectis-radius-surface)}}
+@layer vectis.components{.v-accordion{--accordion-pad-delta:0px;--accordion-pad-block:calc(var(--vectis-space-4) - var(--accordion-pad-delta));--accordion-pad-inline:calc(var(--vectis-space-5) - var(--accordion-pad-delta));--accordion-content-pad-start:calc(var(--vectis-space-2) - var(--accordion-pad-delta));font-family:var(--vectis-text-family)}.v-accordion[data-compact]{--accordion-pad-delta:var(--vectis-space-1)}.v-accordion[data-variant=outlined]{--accordion-corner-radius:calc(var(--vectis-radius-surface) - 1px);background:var(--vectis-color-surface-raised);border:1px solid var(--vectis-color-border);border-radius:var(--vectis-radius-surface);overflow:clip}}

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

@@ -1,26 +1,19 @@
 import { IconSource } from '../VIcon/types.js';
-/**
- * An accordion is a stack of sections whose content the reader can show or hide,
- * one heading at a time. This component is built entirely on the native HTML
- * `<details>` and `<summary>` elements: the browser itself handles opening,
- * closing, the keyboard and the accessibility semantics, so there is no
- * JavaScript here keeping track of which section is currently open.
- *
- * In exclusive mode, opening one section automatically closes the others.
- */
+/** How much decoration the block carries. */
+export type AccordionVariant = 'flat' | 'outlined';
 interface AccordionProps {
     /**
-     * Only one item may stay open at a time, so opening one closes the previous one.
-     * The browser does this on its own once every item shares the same `<details>`
-     * name. Set it to `false` to let the reader keep several sections open.
+     * Lets the reader keep several sections open at once. Left out, only one may stay
+     * open and opening one closes the previous one, which the browser does on its own
+     * once every item shares the same `<details>` name.
      */
-    exclusive?: boolean;
+    multiple?: boolean;
     /**
      * How the group is decorated. `flat`, the default, draws nothing and lets the
      * accordion sit directly on the surface behind it; `outlined` gives it a raised
      * background, a border and rounded corners, so it reads as a card.
      */
-    variant?: 'flat' | 'outlined';
+    variant?: AccordionVariant;
     /**
      * The icon shown on a closed item: an icon name, or an explicit `{ src }` /
      * `{ component }`. It is a chevron by default, which rotates by 180° when the
@@ -43,9 +36,9 @@ type __VLS_Slots = {
     default(): unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<AccordionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AccordionProps> & Readonly<{}>, {
-    variant: "flat" | "outlined";
+    variant: AccordionVariant;
     compact: boolean;
-    exclusive: boolean;
+    multiple: boolean;
     expandIcon: IconSource;
     collapseIcon: IconSource;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -1 +1 @@
-{"version":3,"file":"VAccordion.js","names":[],"sources":["../../../src/components/VAccordion/VAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { provide, useId } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\n\nimport { accordionKey } from './context'\n\n/**\n * An accordion is a stack of sections whose content the reader can show or hide,\n * one heading at a time. This component is built entirely on the native HTML\n * `<details>` and `<summary>` elements: the browser itself handles opening,\n * closing, the keyboard and the accessibility semantics, so there is no\n * JavaScript here keeping track of which section is currently open.\n *\n * In exclusive mode, opening one section automatically closes the others.\n */\ninterface AccordionProps {\n  /**\n   * Only one item may stay open at a time, so opening one closes the previous one.\n   * The browser does this on its own once every item shares the same `<details>`\n   * name. Set it to `false` to let the reader keep several sections open.\n   */\n  exclusive?: boolean\n  /**\n   * How the group is decorated. `flat`, the default, draws nothing and lets the\n   * accordion sit directly on the surface behind it; `outlined` gives it a raised\n   * background, a border and rounded corners, so it reads as a card.\n   */\n  variant?: 'flat' | 'outlined'\n  /**\n   * The icon shown on a closed item: an icon name, or an explicit `{ src }` /\n   * `{ component }`. It is a chevron by default, which rotates by 180° when the\n   * item opens.\n   */\n  expandIcon?: IconSource\n  /**\n   * The icon shown on an open item. Leave it out and the `expandIcon` is simply\n   * rotated 180°; provide one and the two icons are swapped instead.\n   */\n  collapseIcon?: IconSource\n  /**\n   * Reduced density: every padding loses 4px, while the text and the icons keep\n   * their size.\n   */\n  compact?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionProps>(), {\n  exclusive: true,\n  variant: 'flat',\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\n  compact: false,\n})\n\ndefineSlots<{\n  /** The `<VAccordionItem>`s that make up the group. */\n  default(): unknown\n}>()\n\nconst groupName = useId()\nprovide(accordionKey, {\n  get name() {\n    return props.exclusive ? groupName : undefined\n  },\n  get expandIcon() {\n    return props.expandIcon\n  },\n  get collapseIcon() {\n    return props.collapseIcon\n  },\n})\n</script>\n\n<template>\n  <div class=\"v-accordion\" :data-variant=\"variant\" :data-compact=\"compact ? '' : undefined\">\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion {\n    --accordion-pad-delta: 0px;\n    --accordion-pad-block: calc(var(--vectis-space-4) - var(--accordion-pad-delta));\n    --accordion-pad-inline: calc(var(--vectis-space-5) - var(--accordion-pad-delta));\n    --accordion-content-pad-start: calc(var(--vectis-space-2) - var(--accordion-pad-delta));\n\n    font-family: var(--vectis-text-family);\n    overflow: hidden;\n  }\n\n  .v-accordion[data-compact] {\n    --accordion-pad-delta: var(--vectis-space-1);\n  }\n\n  .v-accordion[data-variant='outlined'] {\n    --accordion-corner-radius: calc(var(--vectis-radius-surface) - 1px);\n\n    background: var(--vectis-color-surface-raised);\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-surface);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VAccordion.js","names":[],"sources":["../../../src/components/VAccordion/VAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * An accordion is a stack of sections whose content the reader can show or hide,\n * one heading at a time. This component is built entirely on the native HTML\n * `<details>` and `<summary>` elements: the browser itself handles opening,\n * closing, the keyboard and the accessibility semantics, so there is no\n * JavaScript here keeping track of which section is currently open.\n *\n * Opening one section closes the previous one, unless `multiple` says otherwise.\n */\n\nimport { provide, useId } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\n\nimport { accordionKey } from './context'\n\n/** How much decoration the block carries. */\nexport type AccordionVariant = 'flat' | 'outlined'\n\ninterface AccordionProps {\n  /**\n   * Lets the reader keep several sections open at once. Left out, only one may stay\n   * open and opening one closes the previous one, which the browser does on its own\n   * once every item shares the same `<details>` name.\n   */\n  multiple?: boolean\n  /**\n   * How the group is decorated. `flat`, the default, draws nothing and lets the\n   * accordion sit directly on the surface behind it; `outlined` gives it a raised\n   * background, a border and rounded corners, so it reads as a card.\n   */\n  variant?: AccordionVariant\n  /**\n   * The icon shown on a closed item: an icon name, or an explicit `{ src }` /\n   * `{ component }`. It is a chevron by default, which rotates by 180° when the\n   * item opens.\n   */\n  expandIcon?: IconSource\n  /**\n   * The icon shown on an open item. Leave it out and the `expandIcon` is simply\n   * rotated 180°; provide one and the two icons are swapped instead.\n   */\n  collapseIcon?: IconSource\n  /**\n   * Reduced density: every padding loses 4px, while the text and the icons keep\n   * their size.\n   */\n  compact?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionProps>(), {\n  multiple: false,\n  variant: 'flat',\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\n  compact: false,\n})\n\ndefineSlots<{\n  /** The `<VAccordionItem>`s that make up the group. */\n  default(): unknown\n}>()\n\nconst groupName = useId()\nprovide(accordionKey, {\n  get name() {\n    return props.multiple ? undefined : groupName\n  },\n  get expandIcon() {\n    return props.expandIcon\n  },\n  get collapseIcon() {\n    return props.collapseIcon\n  },\n})\n</script>\n\n<template>\n  <div class=\"v-accordion\" :data-variant=\"variant\" :data-compact=\"compact ? '' : undefined\">\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion {\n    --accordion-pad-delta: 0px;\n    --accordion-pad-block: calc(var(--vectis-space-4) - var(--accordion-pad-delta));\n    --accordion-pad-inline: calc(var(--vectis-space-5) - var(--accordion-pad-delta));\n    --accordion-content-pad-start: calc(var(--vectis-space-2) - var(--accordion-pad-delta));\n\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-accordion[data-compact] {\n    --accordion-pad-delta: var(--vectis-space-1);\n  }\n\n  .v-accordion[data-variant='outlined'] {\n    --accordion-corner-radius: calc(var(--vectis-radius-surface) - 1px);\n\n    background: var(--vectis-color-surface-raised);\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-surface);\n    /* The clip is what keeps the first and last rows' hover inside the rounded corners, so\n       it belongs to the variant that HAS corners. `clip` and not `hidden`: `hidden` makes\n       the box a scroll container, which captures every `position: sticky` in the content\n       and pins it to the accordion instead of the page. */\n    overflow: clip;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -5,9 +5,9 @@ import { createElementBlock as n, defineComponent as r, openBlock as i, provide
 var c = ["data-variant", "data-compact"], l = /*@__PURE__*/ r({
 	__name: "VAccordion",
 	props: {
-		exclusive: {
+		multiple: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		variant: { default: "flat" },
 		expandIcon: { default: () => e },
@@ -21,7 +21,7 @@ var c = ["data-variant", "data-compact"], l = /*@__PURE__*/ r({
 		let r = e, l = s();
 		return a(t, {
 			get name() {
-				return r.exclusive ? l : void 0;
+				return r.multiple ? void 0 : l;
 			},
 			get expandIcon() {
 				return r.expandIcon;

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

@@ -1 +1 @@
-{"version":3,"file":"VAccordion.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VAccordion/VAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { provide, useId } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\n\nimport { accordionKey } from './context'\n\n/**\n * An accordion is a stack of sections whose content the reader can show or hide,\n * one heading at a time. This component is built entirely on the native HTML\n * `<details>` and `<summary>` elements: the browser itself handles opening,\n * closing, the keyboard and the accessibility semantics, so there is no\n * JavaScript here keeping track of which section is currently open.\n *\n * In exclusive mode, opening one section automatically closes the others.\n */\ninterface AccordionProps {\n  /**\n   * Only one item may stay open at a time, so opening one closes the previous one.\n   * The browser does this on its own once every item shares the same `<details>`\n   * name. Set it to `false` to let the reader keep several sections open.\n   */\n  exclusive?: boolean\n  /**\n   * How the group is decorated. `flat`, the default, draws nothing and lets the\n   * accordion sit directly on the surface behind it; `outlined` gives it a raised\n   * background, a border and rounded corners, so it reads as a card.\n   */\n  variant?: 'flat' | 'outlined'\n  /**\n   * The icon shown on a closed item: an icon name, or an explicit `{ src }` /\n   * `{ component }`. It is a chevron by default, which rotates by 180° when the\n   * item opens.\n   */\n  expandIcon?: IconSource\n  /**\n   * The icon shown on an open item. Leave it out and the `expandIcon` is simply\n   * rotated 180°; provide one and the two icons are swapped instead.\n   */\n  collapseIcon?: IconSource\n  /**\n   * Reduced density: every padding loses 4px, while the text and the icons keep\n   * their size.\n   */\n  compact?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionProps>(), {\n  exclusive: true,\n  variant: 'flat',\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\n  compact: false,\n})\n\ndefineSlots<{\n  /** The `<VAccordionItem>`s that make up the group. */\n  default(): unknown\n}>()\n\nconst groupName = useId()\nprovide(accordionKey, {\n  get name() {\n    return props.exclusive ? groupName : undefined\n  },\n  get expandIcon() {\n    return props.expandIcon\n  },\n  get collapseIcon() {\n    return props.collapseIcon\n  },\n})\n</script>\n\n<template>\n  <div class=\"v-accordion\" :data-variant=\"variant\" :data-compact=\"compact ? '' : undefined\">\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion {\n    --accordion-pad-delta: 0px;\n    --accordion-pad-block: calc(var(--vectis-space-4) - var(--accordion-pad-delta));\n    --accordion-pad-inline: calc(var(--vectis-space-5) - var(--accordion-pad-delta));\n    --accordion-content-pad-start: calc(var(--vectis-space-2) - var(--accordion-pad-delta));\n\n    font-family: var(--vectis-text-family);\n    overflow: hidden;\n  }\n\n  .v-accordion[data-compact] {\n    --accordion-pad-delta: var(--vectis-space-1);\n  }\n\n  .v-accordion[data-variant='outlined'] {\n    --accordion-corner-radius: calc(var(--vectis-radius-surface) - 1px);\n\n    background: var(--vectis-color-surface-raised);\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-surface);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAgDA,IAAM,IAAQ,GAaR,IAAY,EAAM;SACxB,EAAQ,GAAc;GACpB,IAAI,OAAO;IACT,OAAO,EAAM,YAAY,IAAY,KAAA;GACvC;GACA,IAAI,aAAa;IACf,OAAO,EAAM;GACf;GACA,IAAI,eAAe;IACjB,OAAO,EAAM;GACf;EACF,CAAC,mBAIC,EAEM,OAAA;GAFD,OAAM;GAAe,gBAAc,EAAA;GAAU,gBAAc,EAAA,UAAO,KAAQ,KAAA;MAC7E,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA"}
+{"version":3,"file":"VAccordion.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VAccordion/VAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * An accordion is a stack of sections whose content the reader can show or hide,\n * one heading at a time. This component is built entirely on the native HTML\n * `<details>` and `<summary>` elements: the browser itself handles opening,\n * closing, the keyboard and the accessibility semantics, so there is no\n * JavaScript here keeping track of which section is currently open.\n *\n * Opening one section closes the previous one, unless `multiple` says otherwise.\n */\n\nimport { provide, useId } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\n\nimport { accordionKey } from './context'\n\n/** How much decoration the block carries. */\nexport type AccordionVariant = 'flat' | 'outlined'\n\ninterface AccordionProps {\n  /**\n   * Lets the reader keep several sections open at once. Left out, only one may stay\n   * open and opening one closes the previous one, which the browser does on its own\n   * once every item shares the same `<details>` name.\n   */\n  multiple?: boolean\n  /**\n   * How the group is decorated. `flat`, the default, draws nothing and lets the\n   * accordion sit directly on the surface behind it; `outlined` gives it a raised\n   * background, a border and rounded corners, so it reads as a card.\n   */\n  variant?: AccordionVariant\n  /**\n   * The icon shown on a closed item: an icon name, or an explicit `{ src }` /\n   * `{ component }`. It is a chevron by default, which rotates by 180° when the\n   * item opens.\n   */\n  expandIcon?: IconSource\n  /**\n   * The icon shown on an open item. Leave it out and the `expandIcon` is simply\n   * rotated 180°; provide one and the two icons are swapped instead.\n   */\n  collapseIcon?: IconSource\n  /**\n   * Reduced density: every padding loses 4px, while the text and the icons keep\n   * their size.\n   */\n  compact?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionProps>(), {\n  multiple: false,\n  variant: 'flat',\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\n  compact: false,\n})\n\ndefineSlots<{\n  /** The `<VAccordionItem>`s that make up the group. */\n  default(): unknown\n}>()\n\nconst groupName = useId()\nprovide(accordionKey, {\n  get name() {\n    return props.multiple ? undefined : groupName\n  },\n  get expandIcon() {\n    return props.expandIcon\n  },\n  get collapseIcon() {\n    return props.collapseIcon\n  },\n})\n</script>\n\n<template>\n  <div class=\"v-accordion\" :data-variant=\"variant\" :data-compact=\"compact ? '' : undefined\">\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion {\n    --accordion-pad-delta: 0px;\n    --accordion-pad-block: calc(var(--vectis-space-4) - var(--accordion-pad-delta));\n    --accordion-pad-inline: calc(var(--vectis-space-5) - var(--accordion-pad-delta));\n    --accordion-content-pad-start: calc(var(--vectis-space-2) - var(--accordion-pad-delta));\n\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-accordion[data-compact] {\n    --accordion-pad-delta: var(--vectis-space-1);\n  }\n\n  .v-accordion[data-variant='outlined'] {\n    --accordion-corner-radius: calc(var(--vectis-radius-surface) - 1px);\n\n    background: var(--vectis-color-surface-raised);\n    border: 1px solid var(--vectis-color-border);\n    border-radius: var(--vectis-radius-surface);\n    /* The clip is what keeps the first and last rows' hover inside the rounded corners, so\n       it belongs to the variant that HAS corners. `clip` and not `hidden`: `hidden` makes\n       the box a scroll container, which captures every `position: sticky` in the content\n       and pins it to the accordion instead of the page. */\n    overflow: clip;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAoDA,IAAM,IAAQ,GAaR,IAAY,EAAM;SACxB,EAAQ,GAAc;GACpB,IAAI,OAAO;IACT,OAAO,EAAM,WAAW,KAAA,IAAY;GACtC;GACA,IAAI,aAAa;IACf,OAAO,EAAM;GACf;GACA,IAAI,eAAe;IACjB,OAAO,EAAM;GACf;EACF,CAAC,mBAIC,EAEM,OAAA;GAFD,OAAM;GAAe,gBAAc,EAAA;GAAU,gBAAc,EAAA,UAAO,KAAQ,KAAA;MAC7E,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA"}

package/dist/components/VAccordion/VAccordionItem.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-accordion-item{interpolate-size:allow-keywords}.v-accordion-item+.v-accordion-item{border-block-start:1px solid var(--vectis-color-border)}.v-accordion-summary{--vectis-icon-size:var(--vectis-icon-size-md);--vectis-icon-opsz:20;align-items:center;gap:var(--vectis-space-3);padding:var(--accordion-pad-block,var(--vectis-space-4)) var(--accordion-pad-inline,var(--vectis-space-5));cursor:pointer;font-size:var(--vectis-text-label-size);font-weight:var(--vectis-text-label-weight);color:var(--vectis-color-text);list-style:none;display:flex}.v-accordion-summary::-webkit-details-marker{display:none}.v-accordion-item:not([data-disabled])>.v-accordion-summary:hover{background:var(--vectis-color-surface-muted)}.v-accordion-summary:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:calc(var(--vectis-focus-ring-offset) * -1)}.v-accordion-item:first-child>.v-accordion-summary{border-start-start-radius:var(--accordion-corner-radius,0);border-start-end-radius:var(--accordion-corner-radius,0)}.v-accordion-item:last-child:not([open])>.v-accordion-summary{border-end-end-radius:var(--accordion-corner-radius,0);border-end-start-radius:var(--accordion-corner-radius,0)}.v-accordion-heading{line-height:var(--vectis-text-label-leading);flex-direction:column;flex:1;display:flex}.v-accordion-icon-start{color:var(--vectis-color-text-muted);flex:none}.v-accordion-icon{color:var(--vectis-color-text-muted);transition:rotate var(--vectis-duration-base) var(--vectis-ease-default);flex:none}.v-accordion-item[open]:not([data-swap])>.v-accordion-summary .v-accordion-icon{rotate:180deg}.v-accordion-item[data-swap][open]>.v-accordion-summary .v-accordion-icon:not(.v-accordion-icon-open),.v-accordion-item[data-swap]:not([open])>.v-accordion-summary .v-accordion-icon-open{display:none}.v-accordion-item[data-disabled]>.v-accordion-summary{color:var(--vectis-color-text-subtle);cursor:not-allowed}.v-accordion-item[data-disabled] .v-accordion-icon,.v-accordion-item[data-disabled] .v-accordion-icon-start,.v-accordion-item[data-disabled] .v-accordion-subtitle{color:inherit}.v-accordion-item::details-content{block-size:0;transition:block-size var(--vectis-duration-base) var(--vectis-ease-default), content-visibility var(--vectis-duration-base) allow-discrete;overflow:clip}.v-accordion-item[open]::details-content{block-size:auto}.v-accordion-content{padding:var(--accordion-content-pad-start,var(--vectis-space-2)) var(--accordion-pad-inline,var(--vectis-space-5)) var(--accordion-pad-block,var(--vectis-space-4));font-size:var(--vectis-text-body-md-size);line-height:var(--vectis-text-body-md-leading);color:var(--vectis-color-text-muted)}@media (prefers-reduced-motion:reduce){.v-accordion-icon{transition:none}.v-accordion-item::details-content{transition:none}}}
+@layer vectis.components{.v-accordion-item+.v-accordion-item{border-block-start:1px solid var(--vectis-color-border)}.v-accordion-summary{--vectis-icon-size:var(--vectis-icon-size-md);--vectis-icon-opsz:20;align-items:center;gap:var(--vectis-space-3);padding:var(--accordion-pad-block,var(--vectis-space-4)) var(--accordion-pad-inline,var(--vectis-space-5));cursor:pointer;font-size:var(--vectis-text-label-size);font-weight:var(--vectis-text-label-weight);color:var(--vectis-color-text);display:flex}.v-accordion-summary:hover:not([data-disabled]){background:var(--vectis-color-surface-muted)}.v-accordion-summary:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:calc(-1 * var(--vectis-focus-ring-width))}.v-accordion-item:first-child>.v-accordion-summary{border-start-start-radius:var(--accordion-corner-radius,0);border-start-end-radius:var(--accordion-corner-radius,0)}.v-accordion-item:last-child:not([open])>.v-accordion-summary{border-end-end-radius:var(--accordion-corner-radius,0);border-end-start-radius:var(--accordion-corner-radius,0)}.v-accordion-heading{line-height:var(--vectis-text-label-leading);flex-direction:column;flex:1;display:flex}.v-accordion-icon{color:var(--vectis-color-text-muted);flex:none}.v-accordion-summary[data-disabled]{color:var(--vectis-color-text-subtle);cursor:not-allowed}.v-accordion-summary[data-disabled] .v-accordion-icon,.v-accordion-summary[data-disabled] .v-accordion-subtitle{color:inherit}.v-accordion-content{padding:var(--accordion-content-pad-start,var(--vectis-space-2)) var(--accordion-pad-inline,var(--vectis-space-5)) var(--accordion-pad-block,var(--vectis-space-4));font-size:var(--vectis-text-body-md-size);line-height:var(--vectis-text-body-md-leading);color:var(--vectis-color-text-muted)}}