vectis-ui 0.1.0 → 0.8.0

package/README.md

@@ -20,7 +20,7 @@ pnpm add vectis-ui vue
 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.
+`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.
 
@@ -147,7 +147,7 @@ A **bare string is always a NAME**, and it no longer reaches the library's own d
 ```vue
 <VButton icon-start="download">Export</VButton>
 <VButton :icon-start="cloud_upload">Upload</VButton>
-<VBreadcrumb :separator="{ src: '/chevron.svg' }" :items="items" />
+<VBreadcrumb :separator-icon="{ src: '/chevron.svg' }" :items="items" />
 <VMenuItem label="Open" :icon-start="{ component: FolderIcon }" />
 ```
 
@@ -155,7 +155,7 @@ A string is **always** an icon name; one of the design system's own icons is imp
 
 ### 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 `VectisIconName` type enumerates the names to cover.
+`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.
 
@@ -252,9 +252,9 @@ registerMessages('en', {
 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'
+import { registerMessages, setLocale, type MessagesInput } from 'vectis-ui'
 
-const de: VectisMessagesInput = {
+const de: MessagesInput = {
   common: { loading: 'Wird geladen…', close: 'Schließen' },
   pagination: { previous: 'Vorherige Seite', next: 'Nächste Seite', page: (p) => `Seite ${p}` },
 }
@@ -263,7 +263,7 @@ 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.
+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`.
 
@@ -318,6 +318,40 @@ Target: **modern browsers** — Chrome/Edge 125+, Safari 26+, Firefox 147+.
 - **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).
 
+### Do not let your build lower this CSS
+
+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.
+
+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:
+
+```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'] } },
+})
+```
+
+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()`.
+
 ## 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.

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)}}

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

@@ -1,14 +1,4 @@
 import { IconSource } from '../VIcon/types.js';
-/**
- * One section of an accordion: a heading the reader can click, and the content it
- * reveals. It is a native `<details>`/`<summary>` pair, so the browser owns the
- * open and closed state, the keyboard and the accessibility semantics, and this
- * component adds no code of its own for any of them.
- *
- * The opening is animated entirely in CSS, with `::details-content` and
- * `interpolate-size`. Both are recent additions to the language: where they are
- * missing the section simply appears at once, which is the intended fallback.
- */
 interface AccordionItemProps {
     /**
      * The heading of the section, the line that stays visible when it is closed. Use
@@ -22,13 +12,18 @@ interface AccordionItemProps {
     subtitle?: string;
     /**
      * An icon placed before the title: an icon name, or an explicit render
-     * (`{ src }`, `{ component }`…).
+     * (`{ src }`, `{ component }`…). The `#icon` slot replaces it.
+     *
+     * It carries no side in its name because there is only one: the end of the row belongs
+     * to the chevron, so there is nothing for a start to be told apart from. That is the
+     * rule every single-icon component of the design system follows, and its slot is named
+     * `#icon` for the same reason.
      */
-    iconStart?: IconSource;
+    icon?: IconSource;
     /**
-     * Renders the section already open. It only sets the state of the first render:
-     * the browser owns it afterwards, so changing this prop later will not close a
-     * section the reader has opened.
+     * Renders the section already open. Only its initial value is read: the browser
+     * owns the state afterwards, so changing this prop later will not close a section
+     * the reader has opened. Bind `v-model:open` to drive it instead.
      */
     defaultOpen?: boolean;
     /**
@@ -37,6 +32,7 @@ interface AccordionItemProps {
      */
     disabled?: boolean;
 }
+type __VLS_Props = AccordionItemProps;
 type __VLS_Slots = {
     /** The content revealed when the section is open. */
     default(): unknown;
@@ -44,14 +40,32 @@ type __VLS_Slots = {
     title?(): unknown;
     /** A subtitle made of markup, which replaces the `subtitle` prop. */
     subtitle?(): unknown;
-    /** Free content before the title, which takes the place of `iconStart`. */
-    start?(): unknown;
+    /** Free content before the title, which takes the place of `icon`. */
+    icon?(): unknown;
 };
-declare const __VLS_base: import('vue').DefineComponent<AccordionItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AccordionItemProps> & Readonly<{}>, {
+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.
+     */
+    'open'?: boolean | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean | null) => any) | undefined;
+}>, {
     title: string;
     subtitle: string;
     disabled: boolean;
-    iconStart: IconSource;
+    icon: IconSource;
     defaultOpen: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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\">\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\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, and this\n * component adds no code of its own for any of them.\n *\n * The opening is animated entirely in CSS, with `::details-content` and\n * `interpolate-size`. Both are recent additions to the language: where they are\n * missing the section simply appears at once, which is the intended fallback.\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 }`…).\n   */\n  iconStart?: IconSource\n  /**\n   * Renders the section already open. It only sets the state of the first render:\n   * the browser owns it afterwards, so changing this prop later will not close a\n   * section the reader has opened.\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  iconStart: undefined,\n  defaultOpen: false,\n  disabled: false,\n})\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 `iconStart`. */\n  start?(): 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\n// @a11y @core\n/*\n * The component's only behavioural JS. A <summary> has no native `disabled`\n * attribute, so there is no other way to stop a click from toggling the\n * <details>. The keyboard needs no handler of its own: `tabindex=\"-1\"` already\n * takes the summary out of the tab order.\n */\nfunction onSummaryClick(event: MouseEvent) {\n  if (props.disabled) event.preventDefault()\n}\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item\"\n    :name=\"accordion?.name\"\n    :open=\"defaultOpen || undefined\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"start\">\n        <VIcon v-if=\"iconStart\" class=\"v-accordion-icon-start\" v-bind=\"iconProps(iconStart)\" />\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 || $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-icon\" 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-icon v-accordion-icon-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 {\n    interpolate-size: allow-keywords;\n  }\n\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    list-style: none;\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::-webkit-details-marker {\n    display: none;\n  }\n\n  .v-accordion-item:not([data-disabled]) > .v-accordion-summary:hover {\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(var(--vectis-focus-ring-offset) * -1);\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-start {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n    transition: rotate var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-accordion-item[open]:not([data-swap]) > .v-accordion-summary .v-accordion-icon {\n    rotate: 180deg;\n  }\n\n  /* data-swap marks an item whose group provided a collapseIcon: rather than\n     rotating a single chevron, each state hides one of the two rendered icons. */\n  .v-accordion-item[data-swap][open]\n    > .v-accordion-summary\n    .v-accordion-icon:not(.v-accordion-icon-open),\n  .v-accordion-item[data-swap]:not([open]) > .v-accordion-summary .v-accordion-icon-open {\n    display: none;\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-item[data-disabled] > .v-accordion-summary {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icons 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. */\n  .v-accordion-item[data-disabled] .v-accordion-icon,\n  .v-accordion-item[data-disabled] .v-accordion-icon-start,\n  .v-accordion-item[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  /* The opening animates in pure CSS: ::details-content targets the box the\n     browser wraps the content in, and the `interpolate-size` declared on the item\n     is what makes a transition towards `auto` possible at all. A browser missing\n     either simply opens the section instantly. */\n  .v-accordion-item::details-content {\n    block-size: 0;\n    overflow: clip;\n    transition:\n      block-size var(--vectis-duration-base) var(--vectis-ease-default),\n      content-visibility var(--vectis-duration-base) allow-discrete;\n  }\n\n  .v-accordion-item[open]::details-content {\n    block-size: auto;\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  @media (prefers-reduced-motion: reduce) {\n    .v-accordion-icon {\n      transition: none;\n    }\n\n    .v-accordion-item::details-content {\n      transition: none;\n    }\n  }\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 } 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":""}

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

@@ -1,21 +1,25 @@
-import e from "../VIcon/VIcon.js";
-import t from "../VTypography/VTypography.js";
-import { iconProps as n } from "../VIcon/iconProps.js";
+import { iconProps as e } from "../VIcon/iconProps.js";
+import t from "../VIcon/VIcon.js";
+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 { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, inject as p, mergeProps as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
+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";
 //#region src/components/VAccordion/VAccordionItem.vue?vue&type=script&setup=true&lang.ts
-var b = [
+var C = [
 	"name",
 	"open",
-	"data-swap",
-	"data-disabled"
-], x = ["aria-disabled", "tabindex"], S = { class: "v-accordion-heading" }, C = { class: "v-accordion-title" }, w = { class: "v-accordion-content" }, T = /*@__PURE__*/ f({
+	"data-swap"
+], w = [
+	"data-disabled",
+	"aria-disabled",
+	"tabindex"
+], T = { class: "v-accordion-heading" }, E = { class: "v-accordion-title" }, D = { class: "v-accordion-content" }, O = /*@__PURE__*/ p({
 	__name: "VAccordionItem",
-	props: {
+	props: /*@__PURE__*/ h({
 		title: { default: void 0 },
 		subtitle: { default: void 0 },
-		iconStart: { default: void 0 },
+		icon: { default: void 0 },
 		defaultOpen: {
 			type: Boolean,
 			default: !1
@@ -24,47 +28,55 @@ var b = [
 			type: Boolean,
 			default: !1
 		}
-	},
-	setup(f) {
-		let T = f, E = p(i, null), D = a(() => E?.expandIcon ?? r), O = a(() => E?.collapseIcon);
-		function k(e) {
-			T.disabled && e.preventDefault();
-		}
-		return (r, i) => (h(), c("details", {
-			class: "v-accordion-item",
-			name: v(E)?.name,
-			open: f.defaultOpen || void 0,
-			"data-swap": O.value ? "" : void 0,
-			"data-disabled": f.disabled ? "" : void 0
-		}, [l("summary", {
+	}, {
+		open: {
+			type: [Boolean, null],
+			default: null
+		},
+		openModifiers: {}
+	}),
+	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, {
+			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)
+		}, [u("summary", {
 			class: "v-accordion-summary",
-			"aria-disabled": f.disabled || void 0,
-			tabindex: f.disabled ? -1 : void 0,
-			onClick: k
+			"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)
 		}, [
-			g(r.$slots, "start", {}, () => [f.iconStart ? (h(), o(e, m({
+			v(r.$slots, "icon", {}, () => [p.icon ? (_(), s(t, g({
 				key: 0,
-				class: "v-accordion-icon-start"
-			}, v(n)(f.iconStart)), null, 16)) : s("", !0)]),
-			l("span", S, [l("span", C, [g(r.$slots, "title", {}, () => [u(_(f.title), 1)])]), f.subtitle || r.$slots.subtitle ? (h(), o(t, {
+				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, {
 				key: 0,
 				as: "span",
 				variant: "caption",
 				tone: "muted",
 				class: "v-accordion-subtitle"
 			}, {
-				default: y(() => [g(r.$slots, "subtitle", {}, () => [u(_(f.subtitle), 1)])]),
+				default: S(() => [v(r.$slots, "subtitle", {}, () => [d(y(p.subtitle), 1)])]),
 				_: 3
-			})) : s("", !0)]),
-			d(e, m({ class: "v-accordion-icon" }, v(n)(D.value)), null, 16),
-			O.value ? (h(), o(e, m({
+			})) : c("", !0)]),
+			f(t, g({ class: "v-accordion-chevron v-disclosure-chevron" }, b(e)(A.value)), null, 16),
+			j.value ? (_(), s(t, g({
 				key: 0,
-				class: "v-accordion-icon v-accordion-icon-open"
-			}, v(n)(O.value)), null, 16)) : s("", !0)
-		], 8, x), l("div", w, [g(r.$slots, "default")])], 8, b));
+				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));
 	}
 });
 //#endregion
-export { T as default };
+export { O as default };
 
 //# sourceMappingURL=VAccordionItem.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VAccordionItem.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VAccordion/VAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\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\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, and this\n * component adds no code of its own for any of them.\n *\n * The opening is animated entirely in CSS, with `::details-content` and\n * `interpolate-size`. Both are recent additions to the language: where they are\n * missing the section simply appears at once, which is the intended fallback.\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 }`…).\n   */\n  iconStart?: IconSource\n  /**\n   * Renders the section already open. It only sets the state of the first render:\n   * the browser owns it afterwards, so changing this prop later will not close a\n   * section the reader has opened.\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  iconStart: undefined,\n  defaultOpen: false,\n  disabled: false,\n})\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 `iconStart`. */\n  start?(): 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\n// @a11y @core\n/*\n * The component's only behavioural JS. A <summary> has no native `disabled`\n * attribute, so there is no other way to stop a click from toggling the\n * <details>. The keyboard needs no handler of its own: `tabindex=\"-1\"` already\n * takes the summary out of the tab order.\n */\nfunction onSummaryClick(event: MouseEvent) {\n  if (props.disabled) event.preventDefault()\n}\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item\"\n    :name=\"accordion?.name\"\n    :open=\"defaultOpen || undefined\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"start\">\n        <VIcon v-if=\"iconStart\" class=\"v-accordion-icon-start\" v-bind=\"iconProps(iconStart)\" />\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 || $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-icon\" 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-icon v-accordion-icon-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 {\n    interpolate-size: allow-keywords;\n  }\n\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    list-style: none;\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::-webkit-details-marker {\n    display: none;\n  }\n\n  .v-accordion-item:not([data-disabled]) > .v-accordion-summary:hover {\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(var(--vectis-focus-ring-offset) * -1);\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-start {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n    transition: rotate var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-accordion-item[open]:not([data-swap]) > .v-accordion-summary .v-accordion-icon {\n    rotate: 180deg;\n  }\n\n  /* data-swap marks an item whose group provided a collapseIcon: rather than\n     rotating a single chevron, each state hides one of the two rendered icons. */\n  .v-accordion-item[data-swap][open]\n    > .v-accordion-summary\n    .v-accordion-icon:not(.v-accordion-icon-open),\n  .v-accordion-item[data-swap]:not([open]) > .v-accordion-summary .v-accordion-icon-open {\n    display: none;\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-item[data-disabled] > .v-accordion-summary {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icons 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. */\n  .v-accordion-item[data-disabled] .v-accordion-icon,\n  .v-accordion-item[data-disabled] .v-accordion-icon-start,\n  .v-accordion-item[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  /* The opening animates in pure CSS: ::details-content targets the box the\n     browser wraps the content in, and the `interpolate-size` declared on the item\n     is what makes a transition towards `auto` possible at all. A browser missing\n     either simply opens the section instantly. */\n  .v-accordion-item::details-content {\n    block-size: 0;\n    overflow: clip;\n    transition:\n      block-size var(--vectis-duration-base) var(--vectis-ease-default),\n      content-visibility var(--vectis-duration-base) allow-discrete;\n  }\n\n  .v-accordion-item[open]::details-content {\n    block-size: auto;\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  @media (prefers-reduced-motion: reduce) {\n    .v-accordion-icon {\n      transition: none;\n    }\n\n    .v-accordion-item::details-content {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDA,IAAM,IAAQ,GAmBR,IAAY,EAAO,GAAc,IAAI,GAMrC,IAAa,QAAe,GAAW,cAAc,CAAc,GACnE,IAAe,QAAe,GAAW,YAAY;EAS3D,SAAS,EAAe,GAAmB;GACzC,AAAI,EAAM,YAAU,EAAM,eAAe;EAC3C;yBAIE,EAwCU,WAAA;GAvCR,OAAM;GACL,MAAM,EAAA,CAAA,CAAS,EAAE;GACjB,MAAM,EAAA,eAAe,KAAA;GACrB,aAAW,EAAA,QAAY,KAAQ,KAAA;GAC/B,iBAAe,EAAA,WAAQ,KAAQ,KAAA;MAEhC,EA6BU,WAAA;GA5BR,OAAM;GACL,iBAAe,EAAA,YAAY,KAAA;GAC3B,UAAU,EAAA,WAAQ,KAAQ,KAAA;GAC1B,SAAO;;GAER,EAEO,EAAA,QAAA,SAAA,CAAA,SAAA,CADQ,EAAA,aAAA,EAAA,GAAb,EAAuF,GAAvF,EAAuF;;IAA/D,OAAM;MAAiC,EAAA,CAAA,CAAS,CAAC,EAAA,SAAS,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;GAEpF,EAYO,QAZP,GAYO,CAXL,EAEC,QAFD,GAEC,CADE,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGtB,EAAA,YAAYA,EAAAA,OAAO,YAAA,EAAA,GAD3B,EAOC,GAAA;;IALC,IAAG;IACH,SAAQ;IACR,MAAK;IACL,OAAM;;qBACsC,CAA3C,EAA2C,EAAA,QAAA,YAAA,CAAA,SAAA,CAAA,EAAA,EAAlB,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAGtC,EAAiE,GAAjE,EAAiE,EAA1D,OAAM,mBAAkB,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,KAAU,CAAA,GAAA,MAAA,EAAA;GAGpD,EAAA,SAAA,EAAA,GADR,EAIE,GAJF,EAIE;;IAFA,OAAM;MACE,EAAA,CAAA,CAAS,CAAC,EAAA,KAAY,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;YAGlC,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA"}
+{"version":3,"file":"VAccordionItem.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DA,IAAM,IAAQ,GAkBR,IAAO,EAA2B,GAAC,MAAyB,GAa5D,IAAY,EAAO,GAAc,IAAI,GAMrC,IAAa,QAAe,GAAW,cAAc,CAAc,GACnE,IAAe,QAAe,GAAW,YAAY,GAErD,EAAE,aAAU,aAAU,sBAAmB,EAAe,GAAM;GAClE,mBAAmB,EAAM;GACzB,gBAAgB,EAAM;EACxB,CAAC;yBAIC,EAyCU,WAAA;GAxCR,OAAM;GACL,MAAM,EAAA,CAAA,CAAS,EAAE;GACjB,MAAM,EAAA,CAAA;GACN,aAAW,EAAA,QAAY,KAAQ,KAAA;GAC/B,UAAM,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;MAET,EA8BU,WAAA;GA7BR,OAAM;GACL,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,iBAAe,EAAA,YAAY,KAAA;GAC3B,UAAU,EAAA,WAAQ,KAAQ,KAAA;GAC1B,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;;GAER,EAEO,EAAA,QAAA,QAAA,CAAA,SAAA,CADQ,EAAA,QAAA,EAAA,GAAb,EAAuE,GAAvE,EAAuE;;IAApD,OAAM;MAA2B,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;GAEpE,EAYO,QAZP,GAYO,CAXL,EAEC,QAFD,GAEC,CADE,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGtB,EAAA,aAAa,KAAA,KAAaA,EAAAA,OAAO,YAAA,EAAA,GADzC,EAOC,GAAA;;IALC,IAAG;IACH,SAAQ;IACR,MAAK;IACL,OAAM;;qBACsC,CAA3C,EAA2C,EAAA,QAAA,YAAA,CAAA,SAAA,CAAA,EAAA,EAAlB,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAGtC,EAAyF,GAAzF,EAAyF,EAAlF,OAAM,2CAA0C,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,KAAU,CAAA,GAAA,MAAA,EAAA;GAG5E,EAAA,SAAA,EAAA,GADR,EAIE,GAJF,EAIE;;IAFA,OAAM;MACE,EAAA,CAAA,CAAS,CAAC,EAAA,KAAY,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;YAGlC,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}

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

@@ -1,14 +1,7 @@
 import { InjectionKey } from 'vue';
 import { IconSource } from '../VIcon/types.js';
-/**
- * The parent→items contract: the shared name set on each <details> activates NATIVE
- * exclusive mode (the `name` attribute, Baseline 2024) — a single item open, with no
- * JS at all. The icons are set on the group (homogeneous density and iconography);
- * `compact` does NOT travel here, it descends through CSS inheritance (the
- * --accordion-* variables set on the root).
- */
 export interface AccordionContext {
-    /** Group name for <details name>; undefined = multiple items can be open. */
+    /** Group name for <details name>; undefined = several items may stay open at once. */
     name: string | undefined;
     /** Icon in the closed state: an icon name, or an explicit render. */
     expandIcon: IconSource;

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VAccordion/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\n\nimport type { IconSource } from '../VIcon/types'\n\n/**\n * The parent→items contract: the shared name set on each <details> activates NATIVE\n * exclusive mode (the `name` attribute, Baseline 2024) — a single item open, with no\n * JS at all. The icons are set on the group (homogeneous density and iconography);\n * `compact` does NOT travel here, it descends through CSS inheritance (the\n * --accordion-* variables set on the root).\n */\nexport interface AccordionContext {\n  /** Group name for <details name>; undefined = multiple items can be open. */\n  name: string | undefined\n  /** Icon in the closed state: an icon name, or an explicit render. */\n  expandIcon: IconSource\n  /** Icon in the open state; undefined = a rotation of `expandIcon`. */\n  collapseIcon: IconSource | undefined\n}\n\nexport const accordionKey: InjectionKey<AccordionContext> = Symbol('v-accordion')\n"],"mappings":";AAoBA,IAAa,IAA+C,OAAO,aAAa"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VAccordion/context.ts"],"sourcesContent":["/**\n * The parent→items contract: the shared name set on each <details> is what makes the\n * BROWSER close the previous item (the `name` attribute, Baseline 2024) — a single item\n * open, with no JS at all. The icons are set on the group (homogeneous density and iconography);\n * `compact` does NOT travel here, it descends through CSS inheritance (the\n * --accordion-* variables set on the root).\n */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { IconSource } from '../VIcon/types'\n\nexport interface AccordionContext {\n  /** Group name for <details name>; undefined = several items may stay open at once. */\n  name: string | undefined\n  /** Icon in the closed state: an icon name, or an explicit render. */\n  expandIcon: IconSource\n  /** Icon in the open state; undefined = a rotation of `expandIcon`. */\n  collapseIcon: IconSource | undefined\n}\n\nexport const accordionKey: InjectionKey<AccordionContext> = Symbol('v-accordion')\n"],"mappings":";AAqBA,IAAa,IAA+C,OAAO,aAAa"}

package/dist/components/VAvatar/VAvatar.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-avatar{--avatar-bg:var(--vectis-color-surface-muted);--avatar-text:var(--vectis-color-text-muted);inline-size:var(--control-height);block-size:var(--control-height);background:var(--avatar-bg);color:var(--avatar-text);border-radius:var(--vectis-radius-full);font-family:var(--vectis-text-family);font-size:var(--control-font-size);font-weight:var(--vectis-font-weight-semibold);line-height:var(--vectis-text-control-leading);-webkit-user-select:none;user-select:none;box-shadow:0 0 0 var(--vectis-control-size-avatar-ring) var(--avatar-ring-color,transparent);transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default), box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);border:none;flex:none;justify-content:center;align-items:center;padding:0;text-decoration:none;display:inline-flex;overflow:hidden}.v-avatar[data-auto]{--avatar-bg:oklch(.9 .06 var(--avatar-hue));--avatar-text:oklch(.42 .13 var(--avatar-hue))}.v-avatar[data-custom]{--avatar-bg:var(--custom-color);--avatar-text:var(--vectis-color-text-on-accent)}[data-theme=dark] .v-avatar[data-auto]{--avatar-bg:oklch(.42 .09 var(--avatar-hue));--avatar-text:oklch(.92 .05 var(--avatar-hue))}.v-avatar-image{object-fit:cover;block-size:100%;inline-size:100%}.v-avatar-icon{--vectis-icon-size:calc(var(--control-height) * .55)}:is(a,button).v-avatar{cursor:pointer}:is(a,button).v-avatar:hover:not([aria-disabled=true],:disabled){background:color-mix(in oklab, var(--avatar-bg), var(--vectis-color-text) 10%)}:is(a,button).v-avatar:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-avatar:is(:disabled,[aria-disabled=true]){cursor:not-allowed;background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-subtle)}@media (prefers-reduced-motion:reduce){.v-avatar{transition:none}}}
+@layer vectis.components{.v-avatar{--avatar-bg:var(--vectis-color-surface-muted);--avatar-text:var(--vectis-color-text-muted);inline-size:var(--control-height);block-size:var(--control-height);background:var(--avatar-bg);color:var(--avatar-text);border-radius:var(--vectis-radius-pill);font-family:var(--vectis-text-family);font-size:var(--control-font-size);font-weight:var(--vectis-font-weight-semibold);line-height:var(--vectis-text-control-leading);-webkit-user-select:none;user-select:none;box-shadow:0 0 0 var(--vectis-control-size-avatar-ring) var(--avatar-ring-color,transparent);transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default), box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);border:none;flex:none;justify-content:center;align-items:center;padding:0;text-decoration:none;display:inline-flex;overflow:hidden}:root,[data-theme=light]{--avatar-auto-bg-lc:.9 .06;--avatar-auto-text-lc:.42 .13}[data-theme=dark]{--avatar-auto-bg-lc:.42 .09;--avatar-auto-text-lc:.92 .05}.v-avatar[data-auto]{--avatar-bg:oklch(var(--avatar-auto-bg-lc) var(--avatar-hue));--avatar-text:oklch(var(--avatar-auto-text-lc) var(--avatar-hue))}.v-avatar[data-custom]{--avatar-bg:var(--custom-color);--avatar-text:var(--vectis-color-text-on-accent)}.v-avatar-image{object-fit:cover;block-size:100%;inline-size:100%}.v-avatar-icon{--vectis-icon-size:calc(var(--control-height) * .55)}:is(a,button).v-avatar{cursor:pointer}:is(a,button).v-avatar:hover:not([aria-disabled=true],:disabled){background:color-mix(in oklab, var(--avatar-bg), var(--vectis-color-text) 10%)}:is(a,button).v-avatar:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-avatar:is(:disabled,[aria-disabled=true]){cursor:not-allowed;background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-subtle)}@media (prefers-reduced-motion:reduce){.v-avatar{transition:none}}}