vectis-ui 0.12.0 → 0.13.0

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)}.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}}
+@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-variant=flat]{--accordion-corner-radius:var(--vectis-radius-surface)}.v-accordion[data-compact]{--accordion-pad-delta:var(--vectis-space-1)}.v-accordion:is([data-variant=outline],[data-variant=elevated],[data-variant=filled]){--accordion-corner-radius:calc(var(--vectis-radius-surface) - 1px);border-radius:var(--vectis-radius-surface);border:1px solid #0000;overflow:clip}.v-accordion[data-variant=outline]{background:var(--vectis-color-surface);border-color:var(--vectis-color-border)}.v-accordion[data-variant=elevated]{--accordion-corner-radius:var(--vectis-radius-surface);background:var(--vectis-color-surface-raised);box-shadow:var(--vectis-shadow-sm);border:none}.v-accordion[data-variant=filled]{--accordion-hover-bg:color-mix(in oklab, var(--vectis-color-surface-muted), var(--vectis-color-text) 4%);background:var(--vectis-color-surface-muted)}}

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

@@ -1,6 +1,6 @@
 import { IconSource } from '../VIcon/types.js';
-/** How much decoration the block carries. */
-export type AccordionVariant = 'flat' | 'outlined';
+/** How the group is set off from the page: nothing, a border, a shadow, or a muted fill. */
+export type AccordionVariant = 'flat' | 'outline' | 'elevated' | 'filled';
 interface AccordionProps {
     /**
      * Lets the reader keep several sections open at once. Left out, only one may stay
@@ -9,9 +9,10 @@ interface AccordionProps {
      */
     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.
+     * How the group is set off from the page. `flat`, the default, draws nothing and lets
+     * the accordion sit directly on the surface behind it. The other three frame it with
+     * rounded corners, like a card: a border on the page surface (`outline`), a shadow over
+     * a raised surface (`elevated`), or a muted fill with no border (`filled`).
      */
     variant?: AccordionVariant;
     /**

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\">\n/**\n * Native details elements own disclosure and exclusive groups; multiple removes the shared\n * group name.\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":""}
+{"version":3,"file":"VAccordion.js","names":[],"sources":["../../../src/components/VAccordion/VAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Native details elements own disclosure and exclusive groups; multiple removes the shared\n * group name.\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 the group is set off from the page: nothing, a border, a shadow, or a muted fill. */\nexport type AccordionVariant = 'flat' | 'outline' | 'elevated' | 'filled'\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 set off from the page. `flat`, the default, draws nothing and lets\n   * the accordion sit directly on the surface behind it. The other three frame it with\n   * rounded corners, like a card: a border on the page surface (`outline`), a shadow over\n   * a raised surface (`elevated`), or a muted fill with no border (`filled`).\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  /* Read by the first and last rows to round their hover. Without a frame there is no clip,\n     so the rows carry the whole radius. */\n  .v-accordion[data-variant='flat'] {\n    --accordion-corner-radius: var(--vectis-radius-surface);\n  }\n\n  .v-accordion[data-compact] {\n    --accordion-pad-delta: var(--vectis-space-1);\n  }\n\n  .v-accordion:is([data-variant='outline'], [data-variant='elevated'], [data-variant='filled']) {\n    --accordion-corner-radius: calc(var(--vectis-radius-surface) - 1px);\n\n    /* Transparent rather than absent on `filled`: forced colours paint it. `elevated` has\n       none, so that the separators and the hover reach the edge its shadow draws. */\n    border: 1px solid transparent;\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 variants that HAVE 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  .v-accordion[data-variant='outline'] {\n    background: var(--vectis-color-surface);\n    border-color: var(--vectis-color-border);\n  }\n\n  .v-accordion[data-variant='elevated'] {\n    --accordion-corner-radius: var(--vectis-radius-surface);\n\n    border: none;\n    background: var(--vectis-color-surface-raised);\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  /* The usual hover is the muted surface itself, which would vanish on this fill. */\n  .v-accordion[data-variant='filled'] {\n    --accordion-hover-bg: color-mix(\n      in oklab,\n      var(--vectis-color-surface-muted),\n      var(--vectis-color-text) 4%\n    );\n\n    background: var(--vectis-color-surface-muted);\n  }\n}\n</style>\n"],"mappings":""}

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\">\n/**\n * Native details elements own disclosure and exclusive groups; multiple removes the shared\n * group name.\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":";;;;;;;;;;;;;;;;;;;;EA+CA,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"}
+{"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 * Native details elements own disclosure and exclusive groups; multiple removes the shared\n * group name.\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 the group is set off from the page: nothing, a border, a shadow, or a muted fill. */\nexport type AccordionVariant = 'flat' | 'outline' | 'elevated' | 'filled'\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 set off from the page. `flat`, the default, draws nothing and lets\n   * the accordion sit directly on the surface behind it. The other three frame it with\n   * rounded corners, like a card: a border on the page surface (`outline`), a shadow over\n   * a raised surface (`elevated`), or a muted fill with no border (`filled`).\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  /* Read by the first and last rows to round their hover. Without a frame there is no clip,\n     so the rows carry the whole radius. */\n  .v-accordion[data-variant='flat'] {\n    --accordion-corner-radius: var(--vectis-radius-surface);\n  }\n\n  .v-accordion[data-compact] {\n    --accordion-pad-delta: var(--vectis-space-1);\n  }\n\n  .v-accordion:is([data-variant='outline'], [data-variant='elevated'], [data-variant='filled']) {\n    --accordion-corner-radius: calc(var(--vectis-radius-surface) - 1px);\n\n    /* Transparent rather than absent on `filled`: forced colours paint it. `elevated` has\n       none, so that the separators and the hover reach the edge its shadow draws. */\n    border: 1px solid transparent;\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 variants that HAVE 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  .v-accordion[data-variant='outline'] {\n    background: var(--vectis-color-surface);\n    border-color: var(--vectis-color-border);\n  }\n\n  .v-accordion[data-variant='elevated'] {\n    --accordion-corner-radius: var(--vectis-radius-surface);\n\n    border: none;\n    background: var(--vectis-color-surface-raised);\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  /* The usual hover is the muted surface itself, which would vanish on this fill. */\n  .v-accordion[data-variant='filled'] {\n    --accordion-hover-bg: color-mix(\n      in oklab,\n      var(--vectis-color-surface-muted),\n      var(--vectis-color-text) 4%\n    );\n\n    background: var(--vectis-color-surface-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAgDA,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+.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)}}
+@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(--accordion-hover-bg,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

@@ -46,9 +46,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:open"?: ((value: boolean | null) => any) | undefined;
 }>, {
     title: string;
-    subtitle: string;
     disabled: boolean;
     icon: IconSource;
+    subtitle: string;
     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\">\n/**\n * Native details owns disclosure. useDetailsOpen bridges v-model and cancels activation of\n * disabled summaries.\n */\n\nimport { computed, inject, provide } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { accordionKey } from './context'\n\nimport { useDetailsOpen } from '../../composables/useDetailsOpen'\n\ninterface AccordionItemProps {\n  /**\n   * The heading of the section, the line that stays visible when it is closed. Use the `#title`\n   * 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 (`{ src }`,\n   * `{ component }`…). The `#icon` slot replaces it.\n   */\n  icon?: IconSource\n  /** Renders the section already open. Bind `v-model:open` to drive it instead. */\n  defaultOpen?: boolean\n  /** Makes the section inert. */\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// \"not bound\" is written as `null` and not `undefined`. A model typed as a plain boolean is\n// declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`, which would\n// silently overwrite `defaultOpen`.\n/**\n * Whether the section is open, when the consumer wants to drive or observe it. Left\n * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial\n * value. `null` means unbound.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\ndefineSlots<{\n  /** The content revealed when the section is open. */\n  default(): unknown\n  /** A title made of markup, which replaces the `title` prop. */\n  title?(): unknown\n  /** A subtitle made of markup, which replaces the `subtitle` prop. */\n  subtitle?(): unknown\n  /** Free content before the title, which takes the place of `icon`. */\n  icon?(): unknown\n}>()\n\nconst accordion = inject(accordionKey, null)\n// The group stops here: an item nested in this one's content without a VAccordion of its\n// own would otherwise share this group's name, and the browser closes every other member\n// of a name group when one opens, the section holding it included.\nprovide(accordionKey, null)\n\n/**\n * Both icons are chosen on the enclosing group. The chevron fallback is what keeps\n * an item rendering correctly when it is used outside a VAccordion.\n */\nconst expandIcon = computed(() => accordion?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => accordion?.collapseIcon)\n\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item v-disclosure\"\n    :name=\"accordion?.name\"\n    :open=\"openAttr\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"icon\">\n        <VIcon v-if=\"icon\" class=\"v-accordion-icon\" v-bind=\"iconProps(icon)\" />\n      </slot>\n      <span class=\"v-accordion-heading\">\n        <span class=\"v-accordion-title\"\n          ><slot name=\"title\">{{ title }}</slot></span\n        >\n        <VTypography\n          v-if=\"subtitle !== undefined || $slots.subtitle\"\n          as=\"span\"\n          variant=\"caption\"\n          tone=\"muted\"\n          class=\"v-accordion-subtitle\"\n          ><slot name=\"subtitle\">{{ subtitle }}</slot></VTypography\n        >\n      </span>\n      <VIcon class=\"v-accordion-chevron v-disclosure-chevron\" v-bind=\"iconProps(expandIcon)\" />\n      <VIcon\n        v-if=\"collapseIcon\"\n        class=\"v-accordion-chevron v-accordion-chevron-open v-disclosure-chevron v-disclosure-chevron-open\"\n        v-bind=\"iconProps(collapseIcon)\"\n      />\n    </summary>\n    <div class=\"v-accordion-content\">\n      <slot />\n    </div>\n  </details>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion-item + .v-accordion-item {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-accordion-summary {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--accordion-pad-block, var(--vectis-space-4))\n      var(--accordion-pad-inline, var(--vectis-space-5));\n    cursor: pointer;\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    color: var(--vectis-color-text);\n  }\n\n  .v-accordion-summary:hover:not([data-disabled]) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-accordion-summary:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-accordion-item:first-child > .v-accordion-summary {\n    border-start-start-radius: var(--accordion-corner-radius, 0);\n    border-start-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-item:last-child:not([open]) > .v-accordion-summary {\n    border-end-start-radius: var(--accordion-corner-radius, 0);\n    border-end-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-heading {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* A disabled item greys out through the colour tokens and never through\n     `opacity`, the rule every control in the DS follows. */\n  .v-accordion-summary[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icon and the subtitle default to text-muted, which is DARKER than the\n     text-subtle a disabled title takes: left to themselves they would come out\n     stronger than the label they belong to, so they inherit it instead. The chevron\n     gets the same treatment from `styles/disclosure.css`. */\n  .v-accordion-summary[data-disabled] .v-accordion-icon,\n  .v-accordion-summary[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  .v-accordion-content {\n    padding: var(--accordion-content-pad-start, var(--vectis-space-2))\n      var(--accordion-pad-inline, var(--vectis-space-5))\n      var(--accordion-pad-block, var(--vectis-space-4));\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The disclosure animation, the chevron's rotation or swap and the WebKit marker come\n     from `styles/disclosure.css`, reduced-motion block included. */\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VAccordionItem.js","names":[],"sources":["../../../src/components/VAccordion/VAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Native details owns disclosure. useDetailsOpen bridges v-model and cancels activation of\n * disabled summaries.\n */\n\nimport { computed, inject, provide } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { accordionKey } from './context'\n\nimport { useDetailsOpen } from '../../composables/useDetailsOpen'\n\ninterface AccordionItemProps {\n  /**\n   * The heading of the section, the line that stays visible when it is closed. Use the `#title`\n   * 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 (`{ src }`,\n   * `{ component }`…). The `#icon` slot replaces it.\n   */\n  icon?: IconSource\n  /** Renders the section already open. Bind `v-model:open` to drive it instead. */\n  defaultOpen?: boolean\n  /** Makes the section inert. */\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// \"not bound\" is written as `null` and not `undefined`. A model typed as a plain boolean is\n// declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`, which would\n// silently overwrite `defaultOpen`.\n/**\n * Whether the section is open, when the consumer wants to drive or observe it. Left\n * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial\n * value. `null` means unbound.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\ndefineSlots<{\n  /** The content revealed when the section is open. */\n  default(): unknown\n  /** A title made of markup, which replaces the `title` prop. */\n  title?(): unknown\n  /** A subtitle made of markup, which replaces the `subtitle` prop. */\n  subtitle?(): unknown\n  /** Free content before the title, which takes the place of `icon`. */\n  icon?(): unknown\n}>()\n\nconst accordion = inject(accordionKey, null)\n// The group stops here: an item nested in this one's content without a VAccordion of its\n// own would otherwise share this group's name, and the browser closes every other member\n// of a name group when one opens, the section holding it included.\nprovide(accordionKey, null)\n\n/**\n * Both icons are chosen on the enclosing group. The chevron fallback is what keeps\n * an item rendering correctly when it is used outside a VAccordion.\n */\nconst expandIcon = computed(() => accordion?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => accordion?.collapseIcon)\n\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item v-disclosure\"\n    :name=\"accordion?.name\"\n    :open=\"openAttr\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"icon\">\n        <VIcon v-if=\"icon\" class=\"v-accordion-icon\" v-bind=\"iconProps(icon)\" />\n      </slot>\n      <span class=\"v-accordion-heading\">\n        <span class=\"v-accordion-title\"\n          ><slot name=\"title\">{{ title }}</slot></span\n        >\n        <VTypography\n          v-if=\"subtitle !== undefined || $slots.subtitle\"\n          as=\"span\"\n          variant=\"caption\"\n          tone=\"muted\"\n          class=\"v-accordion-subtitle\"\n          ><slot name=\"subtitle\">{{ subtitle }}</slot></VTypography\n        >\n      </span>\n      <VIcon class=\"v-accordion-chevron v-disclosure-chevron\" v-bind=\"iconProps(expandIcon)\" />\n      <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(--accordion-hover-bg, 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.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\">\n/**\n * Native details owns disclosure. useDetailsOpen bridges v-model and cancels activation of\n * disabled summaries.\n */\n\nimport { computed, inject, provide } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { accordionKey } from './context'\n\nimport { useDetailsOpen } from '../../composables/useDetailsOpen'\n\ninterface AccordionItemProps {\n  /**\n   * The heading of the section, the line that stays visible when it is closed. Use the `#title`\n   * 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 (`{ src }`,\n   * `{ component }`…). The `#icon` slot replaces it.\n   */\n  icon?: IconSource\n  /** Renders the section already open. Bind `v-model:open` to drive it instead. */\n  defaultOpen?: boolean\n  /** Makes the section inert. */\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// \"not bound\" is written as `null` and not `undefined`. A model typed as a plain boolean is\n// declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`, which would\n// silently overwrite `defaultOpen`.\n/**\n * Whether the section is open, when the consumer wants to drive or observe it. Left\n * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial\n * value. `null` means unbound.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\ndefineSlots<{\n  /** The content revealed when the section is open. */\n  default(): unknown\n  /** A title made of markup, which replaces the `title` prop. */\n  title?(): unknown\n  /** A subtitle made of markup, which replaces the `subtitle` prop. */\n  subtitle?(): unknown\n  /** Free content before the title, which takes the place of `icon`. */\n  icon?(): unknown\n}>()\n\nconst accordion = inject(accordionKey, null)\n// The group stops here: an item nested in this one's content without a VAccordion of its\n// own would otherwise share this group's name, and the browser closes every other member\n// of a name group when one opens, the section holding it included.\nprovide(accordionKey, null)\n\n/**\n * Both icons are chosen on the enclosing group. The chevron fallback is what keeps\n * an item rendering correctly when it is used outside a VAccordion.\n */\nconst expandIcon = computed(() => accordion?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => accordion?.collapseIcon)\n\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item v-disclosure\"\n    :name=\"accordion?.name\"\n    :open=\"openAttr\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"icon\">\n        <VIcon v-if=\"icon\" class=\"v-accordion-icon\" v-bind=\"iconProps(icon)\" />\n      </slot>\n      <span class=\"v-accordion-heading\">\n        <span class=\"v-accordion-title\"\n          ><slot name=\"title\">{{ title }}</slot></span\n        >\n        <VTypography\n          v-if=\"subtitle !== undefined || $slots.subtitle\"\n          as=\"span\"\n          variant=\"caption\"\n          tone=\"muted\"\n          class=\"v-accordion-subtitle\"\n          ><slot name=\"subtitle\">{{ subtitle }}</slot></VTypography\n        >\n      </span>\n      <VIcon class=\"v-accordion-chevron v-disclosure-chevron\" v-bind=\"iconProps(expandIcon)\" />\n      <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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCA,IAAM,IAAQ,GAgBR,IAAO,EAA2B,GAAC,MAAyB,GAa5D,IAAY,EAAO,GAAc,IAAI;EAI3C,EAAQ,GAAc,IAAI;EAM1B,IAAM,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,EAwCU,WAAA;GAvCR,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,EA6BU,WAAA;GA5BR,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;GAE5E,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"}
+{"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 * Native details owns disclosure. useDetailsOpen bridges v-model and cancels activation of\n * disabled summaries.\n */\n\nimport { computed, inject, provide } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { accordionKey } from './context'\n\nimport { useDetailsOpen } from '../../composables/useDetailsOpen'\n\ninterface AccordionItemProps {\n  /**\n   * The heading of the section, the line that stays visible when it is closed. Use the `#title`\n   * 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 (`{ src }`,\n   * `{ component }`…). The `#icon` slot replaces it.\n   */\n  icon?: IconSource\n  /** Renders the section already open. Bind `v-model:open` to drive it instead. */\n  defaultOpen?: boolean\n  /** Makes the section inert. */\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// \"not bound\" is written as `null` and not `undefined`. A model typed as a plain boolean is\n// declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`, which would\n// silently overwrite `defaultOpen`.\n/**\n * Whether the section is open, when the consumer wants to drive or observe it. Left\n * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial\n * value. `null` means unbound.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\ndefineSlots<{\n  /** The content revealed when the section is open. */\n  default(): unknown\n  /** A title made of markup, which replaces the `title` prop. */\n  title?(): unknown\n  /** A subtitle made of markup, which replaces the `subtitle` prop. */\n  subtitle?(): unknown\n  /** Free content before the title, which takes the place of `icon`. */\n  icon?(): unknown\n}>()\n\nconst accordion = inject(accordionKey, null)\n// The group stops here: an item nested in this one's content without a VAccordion of its\n// own would otherwise share this group's name, and the browser closes every other member\n// of a name group when one opens, the section holding it included.\nprovide(accordionKey, null)\n\n/**\n * Both icons are chosen on the enclosing group. The chevron fallback is what keeps\n * an item rendering correctly when it is used outside a VAccordion.\n */\nconst expandIcon = computed(() => accordion?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => accordion?.collapseIcon)\n\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item v-disclosure\"\n    :name=\"accordion?.name\"\n    :open=\"openAttr\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"icon\">\n        <VIcon v-if=\"icon\" class=\"v-accordion-icon\" v-bind=\"iconProps(icon)\" />\n      </slot>\n      <span class=\"v-accordion-heading\">\n        <span class=\"v-accordion-title\"\n          ><slot name=\"title\">{{ title }}</slot></span\n        >\n        <VTypography\n          v-if=\"subtitle !== undefined || $slots.subtitle\"\n          as=\"span\"\n          variant=\"caption\"\n          tone=\"muted\"\n          class=\"v-accordion-subtitle\"\n          ><slot name=\"subtitle\">{{ subtitle }}</slot></VTypography\n        >\n      </span>\n      <VIcon class=\"v-accordion-chevron v-disclosure-chevron\" v-bind=\"iconProps(expandIcon)\" />\n      <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(--accordion-hover-bg, 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCA,IAAM,IAAQ,GAgBR,IAAO,EAA2B,GAAC,MAAyB,GAa5D,IAAY,EAAO,GAAc,IAAI;EAI3C,EAAQ,GAAc,IAAI;EAM1B,IAAM,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,EAwCU,WAAA;GAvCR,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,EA6BU,WAAA;GA5BR,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;GAE5E,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/VAlert/VAlert.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-alert{--alert-line:calc(var(--vectis-text-body-md-size) * var(--vectis-text-body-md-leading));align-items:flex-start;gap:var(--vectis-space-3);padding:var(--vectis-space-3) var(--vectis-space-4);border:1px solid var(--tone-border-soft);border-radius:var(--vectis-radius-surface);color:var(--vectis-color-text);font-family:var(--vectis-text-family);font-size:var(--vectis-text-body-md-size);font-weight:var(--vectis-text-body-md-weight);line-height:var(--vectis-text-body-md-leading);display:flex}.v-alert[data-variant=soft]{background:var(--tone-bg-soft)}.v-alert[data-variant=outline]{background:var(--vectis-color-surface)}.v-alert-icon{--vectis-icon-size:var(--vectis-icon-size-md);margin-block:calc((var(--alert-line) - var(--vectis-icon-size-md)) / 2);color:var(--tone-text-tinted);flex:none}.v-alert-body{gap:var(--vectis-space-1);overflow-wrap:anywhere;flex-direction:column;flex:1;min-inline-size:0;display:flex}.v-alert-title{color:var(--tone-text-tinted);font-weight:var(--vectis-font-weight-semibold)}.v-alert-actions{gap:var(--vectis-space-2);flex-wrap:wrap;margin-block-start:var(--vectis-space-2);display:flex}.v-alert-close{margin-block:calc((var(--alert-line) - var(--vectis-control-height-sm)) / 2);flex:none;margin-inline-end:calc(-1 * var(--vectis-space-2))}.v-alert .v-alert-close[data-tone]{--tone-text-tinted:var(--vectis-color-text-muted);--tone-bg-soft:color-mix(in oklab, currentcolor, transparent 88%)}}

package/dist/components/VAlert/VAlert.d.ts

@@ -0,0 +1,73 @@
+import { IconSource } from '../VIcon/types.js';
+/** How the alert is painted: a tinted surface, or the page surface inside a tinted border. */
+export type AlertVariant = 'soft' | 'outline';
+/** What the alert means, in colour. */
+export type AlertTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning';
+interface AlertProps {
+    /**
+     * How the alert is painted: a surface tinted with the tone (`soft`, the default), or the page
+     * surface inside a border of the tone (`outline`), for an alert that should weigh less.
+     */
+    variant?: AlertVariant;
+    /** What the alert means, expressed as a colour. It also picks the default icon. */
+    tone?: AlertTone;
+    /** A short line above the message, in bold. The `#title` slot replaces it. */
+    title?: string;
+    /**
+     * The icon before the text: an icon name, or an explicit render (the VIcon contract). Left
+     * out, the tone brings its own.
+     */
+    icon?: IconSource;
+    /** Draws no icon at all, neither the one given nor the tone's. */
+    hideIcon?: boolean;
+    /** Adds a close cross, which sets `open` to false and emits `close`. */
+    closable?: boolean;
+    /** What the close cross does, in words. It falls back to the design system dictionary. */
+    closeLabel?: string;
+    /**
+     * Makes the alert a live region, for a message that appears in answer to what the reader
+     * did: `role="alert"` for the `danger` tone, which interrupts, `role="status"` otherwise.
+     */
+    live?: boolean;
+}
+type __VLS_Props = AlertProps;
+type __VLS_Slots = {
+    /** The message. */
+    default?(): unknown;
+    /** Replaces the `title` prop with content of your own. */
+    title?(): unknown;
+    /** Buttons or links under the message. */
+    actions?(): unknown;
+};
+type __VLS_ModelProps = {
+    /**
+     * Whether the alert is shown. It is true by default, unlike other boolean props: an alert is
+     * there until something takes it away, and binding the model is only needed to bring it back.
+     */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    title: string;
+    variant: AlertVariant;
+    tone: AlertTone;
+    icon: IconSource;
+    closeLabel: string;
+    hideIcon: boolean;
+    closable: boolean;
+    live: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VAlert/VAlert.js

@@ -0,0 +1,9 @@
+import './VAlert.css';
+import e from "./VAlert.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                       */
+//#region src/components/VAlert/VAlert.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VAlert.js.map

package/dist/components/VAlert/VAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VAlert.js","names":[],"sources":["../../../src/components/VAlert/VAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A message that stays in the flow of the page. It carries no live role unless asked: a page\n * that renders alerts on load would otherwise have them all read out at once.\n */\n\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check_circle as checkCircleIcon } from '../VIcon/icons/check_circle'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport { error as errorIcon } from '../VIcon/icons/error'\nimport { info as infoIcon } from '../VIcon/icons/info'\nimport { warning as warningIcon } from '../VIcon/icons/warning'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport { useMessages } from '../../i18n/state'\n\n/** How the alert is painted: a tinted surface, or the page surface inside a tinted border. */\nexport type AlertVariant = 'soft' | 'outline'\n/** What the alert means, in colour. */\nexport type AlertTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\ninterface AlertProps {\n  /**\n   * How the alert is painted: a surface tinted with the tone (`soft`, the default), or the page\n   * surface inside a border of the tone (`outline`), for an alert that should weigh less.\n   */\n  variant?: AlertVariant\n  /** What the alert means, expressed as a colour. It also picks the default icon. */\n  tone?: AlertTone\n  /** A short line above the message, in bold. The `#title` slot replaces it. */\n  title?: string\n  /**\n   * The icon before the text: an icon name, or an explicit render (the VIcon contract). Left\n   * out, the tone brings its own.\n   */\n  icon?: IconSource\n  /** Draws no icon at all, neither the one given nor the tone's. */\n  hideIcon?: boolean\n  /** Adds a close cross, which sets `open` to false and emits `close`. */\n  closable?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n  /**\n   * Makes the alert a live region, for a message that appears in answer to what the reader\n   * did: `role=\"alert\"` for the `danger` tone, which interrupts, `role=\"status\"` otherwise.\n   */\n  live?: boolean\n}\n\nconst props = withDefaults(defineProps<AlertProps>(), {\n  variant: 'soft',\n  tone: 'accent',\n  title: undefined,\n  icon: undefined,\n  hideIcon: false,\n  closable: false,\n  closeLabel: undefined,\n  live: false,\n})\n\n/**\n * Whether the alert is shown. It is true by default, unlike other boolean props: an alert is\n * there until something takes it away, and binding the model is only needed to bring it back.\n */\nconst open = defineModel<boolean>('open', { default: true })\n\nconst emit = defineEmits<{\n  /** The reader closed the alert with its cross. `open` has already turned false. */\n  close: []\n}>()\n\ndefineSlots<{\n  /** The message. */\n  default?(): unknown\n  /** Replaces the `title` prop with content of your own. */\n  title?(): unknown\n  /** Buttons or links under the message. */\n  actions?(): unknown\n}>()\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\nconst DEFAULT_ICONS: Record<AlertTone, IconSource> = {\n  neutral: infoIcon,\n  accent: infoIcon,\n  success: checkCircleIcon,\n  danger: errorIcon,\n  warning: warningIcon,\n}\n\nconst resolvedIcon = computed(() =>\n  props.hideIcon ? undefined : iconProps(props.icon ?? DEFAULT_ICONS[props.tone]),\n)\n\nconst role = computed(() =>\n  props.live ? (props.tone === 'danger' ? 'alert' : 'status') : undefined,\n)\n\nfunction close() {\n  open.value = false\n  emit('close')\n}\n</script>\n\n<template>\n  <div v-if=\"open\" :role=\"role\" class=\"v-alert v-tone\" :data-variant=\"variant\" :data-tone=\"tone\">\n    <VIcon v-if=\"resolvedIcon\" class=\"v-alert-icon\" v-bind=\"resolvedIcon\" />\n    <div class=\"v-alert-body\">\n      <p v-if=\"$slots.title || title\" class=\"v-alert-title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </p>\n      <div v-if=\"$slots.default\" class=\"v-alert-message\">\n        <slot />\n      </div>\n      <div v-if=\"$slots.actions\" class=\"v-alert-actions\">\n        <slot name=\"actions\" />\n      </div>\n    </div>\n    <VIconButton\n      v-if=\"closable\"\n      class=\"v-alert-close\"\n      :label=\"resolvedCloseLabel\"\n      size=\"sm\"\n      @click=\"close\"\n    >\n      <VIcon :name=\"closeIcon\" />\n    </VIconButton>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The colours come from the shared tone table (styles/tones.css, `.v-tone`), read here rather\n   * than through `.v-variant`: the alert paints its own border and keeps the message in the body\n   * text colour, which no shared variant does.\n   */\n  .v-alert {\n    /* The height of one line of text, which the icon and the cross are centred against. */\n    --alert-line: calc(var(--vectis-text-body-md-size) * var(--vectis-text-body-md-leading));\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-4);\n    border: 1px solid var(--tone-border-soft);\n    border-radius: var(--vectis-radius-surface);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-alert[data-variant='soft'] {\n    background: var(--tone-bg-soft);\n  }\n\n  .v-alert[data-variant='outline'] {\n    background: var(--vectis-color-surface);\n  }\n\n  .v-alert-icon {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    flex: none;\n    margin-block: calc((var(--alert-line) - var(--vectis-icon-size-md)) / 2);\n    color: var(--tone-text-tinted);\n  }\n\n  /* Long unbroken text, a URL in an error message, wraps instead of widening the alert. */\n  .v-alert-body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .v-alert-title {\n    color: var(--tone-text-tinted);\n    /*\n     * The heavier weight marks the title against its own message, which is emphasis rather than\n     * a typographic role; hence a font token read directly.\n     */\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  .v-alert-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-2);\n    margin-block-start: var(--vectis-space-2);\n  }\n\n  /*\n   * The cross keeps the height of a small control but is centred on the first line, and gives\n   * back its own padding so it does not double the alert's gutter.\n   */\n  .v-alert-close {\n    flex: none;\n    margin-block: calc((var(--alert-line) - var(--vectis-control-height-sm)) / 2);\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  /*\n   * A neutral ghost hovers in grey, which turns muddy on a tinted surface: the cross hovers in a\n   * tint of the alert's own tone instead. The tone table sits in a lower layer, so this rebind\n   * wins whatever the specificity of the button's `[data-tone]` row.\n   */\n  .v-alert .v-alert-close[data-tone] {\n    --tone-text-tinted: var(--vectis-color-text-muted);\n    --tone-bg-soft: color-mix(in oklab, currentcolor, transparent 88%);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VAlert/VAlert.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+import { useMessages as e } from "../../i18n/state.js";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import n from "../VIcon/VIcon.js";
+import r from "../VIconButton/VIconButton.js";
+import { error as i } from "../VIcon/icons/error.js";
+import { close as a } from "../VIcon/icons/close.js";
+import { check_circle as o } from "../VIcon/icons/check_circle.js";
+import { info as s } from "../VIcon/icons/info.js";
+import { warning as c } from "../VIcon/icons/warning.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeModels as _, mergeProps as v, openBlock as y, renderSlot as b, toDisplayString as x, unref as S, useModel as C, withCtx as w } from "vue";
+//#region src/components/VAlert/VAlert.vue?vue&type=script&setup=true&lang.ts
+var T = [
+	"role",
+	"data-variant",
+	"data-tone"
+], E = { class: "v-alert-body" }, D = {
+	key: 0,
+	class: "v-alert-title"
+}, O = {
+	key: 1,
+	class: "v-alert-message"
+}, k = {
+	key: 2,
+	class: "v-alert-actions"
+}, A = /*@__PURE__*/ g({
+	__name: "VAlert",
+	props: /*@__PURE__*/ _({
+		variant: { default: "soft" },
+		tone: { default: "accent" },
+		title: { default: void 0 },
+		icon: { default: void 0 },
+		hideIcon: {
+			type: Boolean,
+			default: !1
+		},
+		closable: {
+			type: Boolean,
+			default: !1
+		},
+		closeLabel: { default: void 0 },
+		live: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: !0
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ _(["close"], ["update:open"]),
+	setup(g, { emit: _ }) {
+		let A = g, j = C(g, "open"), M = _, N = e(), P = l(() => A.closeLabel ?? N.value.common.close), F = {
+			neutral: s,
+			accent: s,
+			success: o,
+			danger: i,
+			warning: c
+		}, I = l(() => A.hideIcon ? void 0 : t(A.icon ?? F[A.tone])), L = l(() => A.live ? A.tone === "danger" ? "alert" : "status" : void 0);
+		function R() {
+			j.value = !1, M("close");
+		}
+		return (e, t) => j.value ? (y(), f("div", {
+			key: 0,
+			role: L.value,
+			class: "v-alert v-tone",
+			"data-variant": g.variant,
+			"data-tone": g.tone
+		}, [
+			I.value ? (y(), u(n, v({
+				key: 0,
+				class: "v-alert-icon"
+			}, I.value), null, 16)) : d("", !0),
+			p("div", E, [
+				e.$slots.title || g.title ? (y(), f("p", D, [b(e.$slots, "title", {}, () => [m(x(g.title), 1)])])) : d("", !0),
+				e.$slots.default ? (y(), f("div", O, [b(e.$slots, "default")])) : d("", !0),
+				e.$slots.actions ? (y(), f("div", k, [b(e.$slots, "actions")])) : d("", !0)
+			]),
+			g.closable ? (y(), u(r, {
+				key: 1,
+				class: "v-alert-close",
+				label: P.value,
+				size: "sm",
+				onClick: R
+			}, {
+				default: w(() => [h(n, { name: S(a) }, null, 8, ["name"])]),
+				_: 1
+			}, 8, ["label"])) : d("", !0)
+		], 8, T)) : d("", !0);
+	}
+});
+//#endregion
+export { A as default };
+
+//# sourceMappingURL=VAlert.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VAlert.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VAlert/VAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A message that stays in the flow of the page. It carries no live role unless asked: a page\n * that renders alerts on load would otherwise have them all read out at once.\n */\n\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check_circle as checkCircleIcon } from '../VIcon/icons/check_circle'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport { error as errorIcon } from '../VIcon/icons/error'\nimport { info as infoIcon } from '../VIcon/icons/info'\nimport { warning as warningIcon } from '../VIcon/icons/warning'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport { useMessages } from '../../i18n/state'\n\n/** How the alert is painted: a tinted surface, or the page surface inside a tinted border. */\nexport type AlertVariant = 'soft' | 'outline'\n/** What the alert means, in colour. */\nexport type AlertTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\ninterface AlertProps {\n  /**\n   * How the alert is painted: a surface tinted with the tone (`soft`, the default), or the page\n   * surface inside a border of the tone (`outline`), for an alert that should weigh less.\n   */\n  variant?: AlertVariant\n  /** What the alert means, expressed as a colour. It also picks the default icon. */\n  tone?: AlertTone\n  /** A short line above the message, in bold. The `#title` slot replaces it. */\n  title?: string\n  /**\n   * The icon before the text: an icon name, or an explicit render (the VIcon contract). Left\n   * out, the tone brings its own.\n   */\n  icon?: IconSource\n  /** Draws no icon at all, neither the one given nor the tone's. */\n  hideIcon?: boolean\n  /** Adds a close cross, which sets `open` to false and emits `close`. */\n  closable?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n  /**\n   * Makes the alert a live region, for a message that appears in answer to what the reader\n   * did: `role=\"alert\"` for the `danger` tone, which interrupts, `role=\"status\"` otherwise.\n   */\n  live?: boolean\n}\n\nconst props = withDefaults(defineProps<AlertProps>(), {\n  variant: 'soft',\n  tone: 'accent',\n  title: undefined,\n  icon: undefined,\n  hideIcon: false,\n  closable: false,\n  closeLabel: undefined,\n  live: false,\n})\n\n/**\n * Whether the alert is shown. It is true by default, unlike other boolean props: an alert is\n * there until something takes it away, and binding the model is only needed to bring it back.\n */\nconst open = defineModel<boolean>('open', { default: true })\n\nconst emit = defineEmits<{\n  /** The reader closed the alert with its cross. `open` has already turned false. */\n  close: []\n}>()\n\ndefineSlots<{\n  /** The message. */\n  default?(): unknown\n  /** Replaces the `title` prop with content of your own. */\n  title?(): unknown\n  /** Buttons or links under the message. */\n  actions?(): unknown\n}>()\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\nconst DEFAULT_ICONS: Record<AlertTone, IconSource> = {\n  neutral: infoIcon,\n  accent: infoIcon,\n  success: checkCircleIcon,\n  danger: errorIcon,\n  warning: warningIcon,\n}\n\nconst resolvedIcon = computed(() =>\n  props.hideIcon ? undefined : iconProps(props.icon ?? DEFAULT_ICONS[props.tone]),\n)\n\nconst role = computed(() =>\n  props.live ? (props.tone === 'danger' ? 'alert' : 'status') : undefined,\n)\n\nfunction close() {\n  open.value = false\n  emit('close')\n}\n</script>\n\n<template>\n  <div v-if=\"open\" :role=\"role\" class=\"v-alert v-tone\" :data-variant=\"variant\" :data-tone=\"tone\">\n    <VIcon v-if=\"resolvedIcon\" class=\"v-alert-icon\" v-bind=\"resolvedIcon\" />\n    <div class=\"v-alert-body\">\n      <p v-if=\"$slots.title || title\" class=\"v-alert-title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </p>\n      <div v-if=\"$slots.default\" class=\"v-alert-message\">\n        <slot />\n      </div>\n      <div v-if=\"$slots.actions\" class=\"v-alert-actions\">\n        <slot name=\"actions\" />\n      </div>\n    </div>\n    <VIconButton\n      v-if=\"closable\"\n      class=\"v-alert-close\"\n      :label=\"resolvedCloseLabel\"\n      size=\"sm\"\n      @click=\"close\"\n    >\n      <VIcon :name=\"closeIcon\" />\n    </VIconButton>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The colours come from the shared tone table (styles/tones.css, `.v-tone`), read here rather\n   * than through `.v-variant`: the alert paints its own border and keeps the message in the body\n   * text colour, which no shared variant does.\n   */\n  .v-alert {\n    /* The height of one line of text, which the icon and the cross are centred against. */\n    --alert-line: calc(var(--vectis-text-body-md-size) * var(--vectis-text-body-md-leading));\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-4);\n    border: 1px solid var(--tone-border-soft);\n    border-radius: var(--vectis-radius-surface);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-alert[data-variant='soft'] {\n    background: var(--tone-bg-soft);\n  }\n\n  .v-alert[data-variant='outline'] {\n    background: var(--vectis-color-surface);\n  }\n\n  .v-alert-icon {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    flex: none;\n    margin-block: calc((var(--alert-line) - var(--vectis-icon-size-md)) / 2);\n    color: var(--tone-text-tinted);\n  }\n\n  /* Long unbroken text, a URL in an error message, wraps instead of widening the alert. */\n  .v-alert-body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .v-alert-title {\n    color: var(--tone-text-tinted);\n    /*\n     * The heavier weight marks the title against its own message, which is emphasis rather than\n     * a typographic role; hence a font token read directly.\n     */\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  .v-alert-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-2);\n    margin-block-start: var(--vectis-space-2);\n  }\n\n  /*\n   * The cross keeps the height of a small control but is centred on the first line, and gives\n   * back its own padding so it does not double the alert's gutter.\n   */\n  .v-alert-close {\n    flex: none;\n    margin-block: calc((var(--alert-line) - var(--vectis-control-height-sm)) / 2);\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  /*\n   * A neutral ghost hovers in grey, which turns muddy on a tinted surface: the cross hovers in a\n   * tint of the alert's own tone instead. The tone table sits in a lower layer, so this rebind\n   * wins whatever the specificity of the button's `[data-tone]` row.\n   */\n  .v-alert .v-alert-close[data-tone] {\n    --tone-text-tinted: var(--vectis-color-text-muted);\n    --tone-bg-soft: color-mix(in oklab, currentcolor, transparent 88%);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAM,IAAQ,GAeR,IAAO,EAAoB,GAAC,MAAyB,GAErD,IAAO,GAcP,IAAI,EAAY,GAChB,IAAqB,QAAe,EAAM,cAAc,EAAE,MAAM,OAAO,KAAK,GAE5E,IAA+C;GACnD,SAAS;GACT,QAAQ;GACR,SAAS;GACT,QAAQ;GACC;EACX,GAEM,IAAe,QACnB,EAAM,WAAW,KAAA,IAAY,EAAU,EAAM,QAAQ,EAAc,EAAM,KAAK,CAChF,GAEM,IAAO,QACX,EAAM,OAAQ,EAAM,SAAS,WAAW,UAAU,WAAY,KAAA,CAChE;EAEA,SAAS,IAAQ;GAEf,AADA,EAAK,QAAQ,IACb,EAAK,OAAO;EACd;mBAIa,EAAA,SAAA,EAAA,GAAX,EAsBM,OAAA;;GAtBY,MAAM,EAAA;GAAM,OAAM;GAAkB,gBAAc,EAAA;GAAU,aAAW,EAAA;;GAC1E,EAAA,SAAA,EAAA,GAAb,EAAwE,GAAxE,EAAwE;;IAA7C,OAAM;MAAuB,EAAA,KAAY,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;GACpE,EAUM,OAVN,GAUM;IATKA,EAAAA,OAAO,SAAS,EAAA,SAAA,EAAA,GAAzB,EAEI,KAFJ,GAEI,CADF,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAElBA,EAAAA,OAAO,WAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAECA,EAAAA,OAAO,WAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAuB,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;GAInB,EAAA,YAAA,EAAA,GADR,EAQc,GAAA;;IANZ,OAAM;IACL,OAAO,EAAA;IACR,MAAK;IACJ,SAAO;;qBAEmB,CAA3B,EAA2B,GAAA,EAAnB,MAAM,EAAA,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA"}

package/dist/components/VAvatar/VAvatar.d.ts

@@ -58,12 +58,12 @@ declare const __VLS_base: import('vue').DefineComponent<AvatarProps, {}, {}, {},
     name: string;
     size: AvatarSize;
     src: string;
+    color: string;
     compact: boolean;
+    clickable: boolean;
     href: string;
     disabled: boolean;
     icon: IconSource;
-    color: string;
-    clickable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/VAvatar/VAvatarGroup.d.ts

@@ -44,8 +44,8 @@ declare const __VLS_base: import('vue').DefineComponent<AvatarGroupProps, {}, {}
     label: string;
     size: AvatarSize;
     compact: boolean;
-    ringColor: string;
     max: number;
+    ringColor: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/VAvatar/VAvatarGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
-import { useAriaLabel as e } from "../../composables/useAriaLabel.js";
-import { avatarGroupKey as t } from "./context.js";
-import n from "./VAvatar.js";
-import { useSlotNodes as r } from "../../composables/useSlotNodes.js";
+import { useSlotNodes as e } from "../../composables/useSlotNodes.js";
+import { useAriaLabel as t } from "../../composables/useAriaLabel.js";
+import { avatarGroupKey as n } from "./context.js";
+import r from "./VAvatar.js";
 import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeStyle as d, openBlock as f, provide as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
 //#region src/components/VAvatar/VAvatarGroup.vue?vue&type=script&setup=true&lang.ts
 var y = [
@@ -21,8 +21,8 @@ var y = [
 		label: { default: void 0 }
 	},
 	setup(u) {
-		let b = u, x = e(() => b.label);
-		p(t, {
+		let b = u, x = t(() => b.label);
+		p(n, {
 			get size() {
 				return b.size;
 			},
@@ -30,7 +30,7 @@ var y = [
 				return b.compact;
 			}
 		});
-		let S = r(), C = i(() => b.max !== void 0 && b.max > 0 ? S.value.slice(0, b.max) : S.value), w = i(() => S.value.length - C.value.length), T = () => C.value, E = i(() => b.ringColor === void 0 ? void 0 : { "--avatar-ring-color": b.ringColor }), D = i(() => b.size ?? "md");
+		let S = e(), C = i(() => b.max !== void 0 && b.max > 0 ? S.value.slice(0, b.max) : S.value), w = i(() => S.value.length - C.value.length), T = () => C.value, E = i(() => b.ringColor === void 0 ? void 0 : { "--avatar-ring-color": b.ringColor }), D = i(() => b.size ?? "md");
 		return (e, t) => (f(), s("div", {
 			class: "v-avatar-group v-control",
 			role: "group",
@@ -38,7 +38,7 @@ var y = [
 			style: d(E.value),
 			"data-size": D.value,
 			"data-compact": u.compact ? "" : void 0
-		}, [(f(), a(h(T))), w.value > 0 ? m(e.$slots, "overflow", { count: w.value }, () => [l(n, null, {
+		}, [(f(), a(h(T))), w.value > 0 ? m(e.$slots, "overflow", { count: w.value }, () => [l(r, null, {
 			default: v(() => [c("+" + g(w.value), 1)]),
 			_: 1
 		})], void 0, 0) : o("", !0)], 12, y));

package/dist/components/VBadge/VBadge.d.ts

@@ -66,12 +66,12 @@ type __VLS_Slots = {
 declare const __VLS_base: import('vue').DefineComponent<BadgeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
     variant: BadgeVariant;
     tone: BadgeTone;
+    color: string;
+    overlay: boolean;
+    dot: boolean;
     icon: IconSource;
     bordered: boolean;
-    color: string;
     count: number;
-    dot: boolean;
-    overlay: boolean;
     overlayPosition: BadgeOverlayPosition;
     ringColor: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/VBreadcrumb/VBreadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -3,9 +3,9 @@ import { iconProps as t } from "../VIcon/iconProps.js";
 import n from "../VIcon/VIcon.js";
 import r from "../VIconButton/VIconButton.js";
 import { useAriaLabel as i } from "../../composables/useAriaLabel.js";
-import { chevron_right as a } from "../VIcon/icons/chevron_right.js";
-import { more_horiz as o } from "../VIcon/icons/more_horiz.js";
-import s from "../VMenu/VMenu.js";
+import a from "../VMenu/VMenu.js";
+import { chevron_right as o } from "../VIcon/icons/chevron_right.js";
+import { more_horiz as s } from "../VIcon/icons/more_horiz.js";
 import c from "../VMenu/VMenuItem.js";
 import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeProps as v, openBlock as y, renderList as b, toDisplayString as x, unref as S, withCtx as C } from "vue";
 //#region src/components/VBreadcrumb/VBreadcrumb.vue?vue&type=script&setup=true&lang.ts
@@ -18,12 +18,12 @@ var w = ["aria-label"], T = { class: "v-breadcrumb-list" }, E = {
 		items: {},
 		label: { default: void 0 },
 		currentPath: { default: void 0 },
-		separatorIcon: { default: () => a },
+		separatorIcon: { default: () => o },
 		maxItems: { default: void 0 },
 		ellipsisLabel: { default: void 0 }
 	},
-	setup(a) {
-		let _ = a, k = e(), A = i(() => _.label ?? k.value.breadcrumb.label), j = u(() => _.ellipsisLabel ?? k.value.breadcrumb.ellipsis);
+	setup(o) {
+		let _ = o, k = e(), A = i(() => _.label ?? k.value.breadcrumb.label), j = u(() => _.ellipsisLabel ?? k.value.breadcrumb.ellipsis);
 		function M(e) {
 			let t = e.replace(/[?#].*$/, "");
 			return t.length > 1 && t.endsWith("/") ? t.slice(0, -1) : t;
@@ -36,11 +36,11 @@ var w = ["aria-label"], T = { class: "v-breadcrumb-list" }, E = {
 		return (e, i) => (y(), p("nav", {
 			class: "v-breadcrumb",
 			"aria-label": S(A)
-		}, [m("ol", T, [(y(!0), p(l, null, b(L.value, (e, i) => (y(), p(l, { key: e.href }, [F.value && i === 1 ? (y(), p("li", E, [g(n, v({ class: "v-breadcrumb-separator" }, { ref_for: !0 }, S(t)(a.separatorIcon), { mirrored: "" }), null, 16), g(s, null, {
+		}, [m("ol", T, [(y(!0), p(l, null, b(L.value, (e, i) => (y(), p(l, { key: e.href }, [F.value && i === 1 ? (y(), p("li", E, [g(n, v({ class: "v-breadcrumb-separator" }, { ref_for: !0 }, S(t)(o.separatorIcon), { mirrored: "" }), null, 16), g(a, null, {
 			trigger: C(({ triggerProps: e }) => [g(r, v({
 				size: "sm",
 				label: j.value,
-				icon: S(o)
+				icon: S(s)
 			}, { ref_for: !0 }, e), null, 16, ["label", "icon"])]),
 			default: C(() => [(y(!0), p(l, null, b(I.value, (e) => (y(), d(c, {
 				key: e.href,
@@ -57,7 +57,7 @@ var w = ["aria-label"], T = { class: "v-breadcrumb-list" }, E = {
 				"aria-current"
 			]))), 128))]),
 			_: 1
-		})])) : f("", !0), m("li", D, [g(n, v({ class: "v-breadcrumb-separator" }, { ref_for: !0 }, S(t)(a.separatorIcon), { mirrored: "" }), null, 16), m("a", {
+		})])) : f("", !0), m("li", D, [g(n, v({ class: "v-breadcrumb-separator" }, { ref_for: !0 }, S(t)(o.separatorIcon), { mirrored: "" }), null, 16), m("a", {
 			class: "v-breadcrumb-link",
 			href: e.href,
 			"aria-current": P(e) ? "page" : void 0

package/dist/components/VButton/VButton.d.ts

@@ -82,17 +82,17 @@ type __VLS_Slots = {
 declare const __VLS_base: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     loading: boolean;
     size: ButtonSize;
-    type: "button" | "submit" | "reset";
+    type: "button" | "reset" | "submit";
     variant: ButtonVariant;
     tone: ButtonTone;
-    elevated: boolean;
     compact: boolean;
-    fullWidth: boolean;
     href: string;
-    disabled: boolean;
     iconStart: IconSource;
     iconEnd: IconSource;
     iconFilled: boolean;
+    disabled: boolean;
+    elevated: boolean;
+    fullWidth: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;