vectis-ui 0.15.0 → 0.16.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-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)}}
+@layer vectis.components{.v-accordion{--accordion-pad-block:calc(var(--vectis-space-4) - var(--vectis-density-delta));--accordion-pad-inline:calc(var(--vectis-space-5) - var(--vectis-density-delta));--accordion-content-pad-start:calc(var(--vectis-space-2) - var(--vectis-density-delta));font-family:var(--vectis-text-family)}.v-accordion[data-variant=flat]{--accordion-corner-radius:var(--vectis-radius-surface)}.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

@@ -26,11 +26,6 @@ interface AccordionProps {
      * rotated 180°; provide one and the two icons are swapped instead.
      */
     collapseIcon?: IconSource;
-    /**
-     * Reduced density: every padding loses 4px, while the text and the icons keep
-     * their size.
-     */
-    compact?: boolean;
 }
 type __VLS_Slots = {
     /** The `<VAccordionItem>`s that make up the group. */
@@ -38,7 +33,6 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import('vue').DefineComponent<AccordionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AccordionProps> & Readonly<{}>, {
     variant: AccordionVariant;
-    compact: boolean;
     multiple: boolean;
     expandIcon: IconSource;
     collapseIcon: IconSource;

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

@@ -1 +1 @@
-{"version":3,"file":"VAccordion.js","names":["_sfc_main","VAccordion_vue_vue_type_script_setup_true_lang_default","VAccordion_default"],"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":""}
+{"version":3,"file":"VAccordion.js","names":["_sfc_main","VAccordion_vue_vue_type_script_setup_true_lang_default","VAccordion_default"],"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\nconst props = withDefaults(defineProps<AccordionProps>(), {\n  multiple: false,\n  variant: 'flat',\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\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\">\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion {\n    --accordion-pad-block: calc(var(--vectis-space-4) - var(--vectis-density-delta));\n    --accordion-pad-inline: calc(var(--vectis-space-5) - var(--vectis-density-delta));\n    --accordion-content-pad-start: calc(var(--vectis-space-2) - var(--vectis-density-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: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

@@ -2,7 +2,7 @@ import { expand_more as e } from "../VIcon/icons/expand_more.js";
 import { accordionKey as t } from "./context.js";
 import { createElementBlock as n, defineComponent as r, openBlock as i, provide as a, renderSlot as o, useId as s } from "vue";
 //#region src/components/VAccordion/VAccordion.vue?vue&type=script&setup=true&lang.ts
-var c = ["data-variant", "data-compact"], l = /*@__PURE__*/ r({
+var c = ["data-variant"], l = /*@__PURE__*/ r({
 	__name: "VAccordion",
 	props: {
 		multiple: {
@@ -11,11 +11,7 @@ var c = ["data-variant", "data-compact"], l = /*@__PURE__*/ r({
 		},
 		variant: { default: "flat" },
 		expandIcon: { default: () => e },
-		collapseIcon: { default: void 0 },
-		compact: {
-			type: Boolean,
-			default: !1
-		}
+		collapseIcon: { default: void 0 }
 	},
 	setup(e) {
 		let r = e, l = s();
@@ -31,8 +27,7 @@ var c = ["data-variant", "data-compact"], l = /*@__PURE__*/ r({
 			}
 		}), (t, r) => (i(), n("div", {
 			class: "v-accordion",
-			"data-variant": e.variant,
-			"data-compact": e.compact ? "" : void 0
+			"data-variant": e.variant
 		}, [o(t.$slots, "default")], 8, c));
 	}
 });

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":["expandMoreIcon","_openBlock","_createElementBlock","_renderSlot","_hoisted_1","VAccordion_vue_vue_type_script_setup_true_lang_default","expand_more","props","__props","groupName","useId","provide","accordionKey","openBlock","createElementBlock","renderSlot","_ctx"],"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,IAAMO,IAAQC,GAaRC,IAAYC,EAAM;SACxBC,EAAQC,GAAc;GACpB,IAAI,OAAO;IACT,OAAOL,EAAM,WAAW,KAAA,IAAYE;GACtC;GACA,IAAI,aAAa;IACf,OAAOF,EAAM;GACf;GACA,IAAI,eAAe;IACjB,OAAOA,EAAM;GACf;EACF,CAAC,cAICN,EAAA,GAAAC,EAEM,OAAA;GAFD,OAAM;GAAe,gBAAcM,EAAA;GAAU,gBAAcA,EAAA,UAAO,KAAQ,KAAA;EAC7EL,GAAAA,CAAAA,EAAQa,EAAA,QAAA,SAAA,CAAA,GAAA,GAAAZ,CAAA"}
+{"version":3,"file":"VAccordion.vue_vue_type_script_setup_true_lang.js","names":["expandMoreIcon","_openBlock","_createElementBlock","_renderSlot","_hoisted_1","VAccordion_vue_vue_type_script_setup_true_lang_default","expand_more","props","__props","groupName","useId","provide","accordionKey","openBlock","createElementBlock","renderSlot","_ctx"],"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\nconst props = withDefaults(defineProps<AccordionProps>(), {\n  multiple: false,\n  variant: 'flat',\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\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\">\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion {\n    --accordion-pad-block: calc(var(--vectis-space-4) - var(--vectis-density-delta));\n    --accordion-pad-inline: calc(var(--vectis-space-5) - var(--vectis-density-delta));\n    --accordion-content-pad-start: calc(var(--vectis-space-2) - var(--vectis-density-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: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":";;;;;;;;;;;;;;;;EA2CA,IAAMO,IAAQC,GAYRC,IAAYC,EAAM;SACxBC,EAAQC,GAAc;GACpB,IAAI,OAAO;IACT,OAAOL,EAAM,WAAW,KAAA,IAAYE;GACtC;GACA,IAAI,aAAa;IACf,OAAOF,EAAM;GACf;GACA,IAAI,eAAe;IACjB,OAAOA,EAAM;GACf;EACF,CAAC,cAICN,EAAA,GAAAC,EAEM,OAAA;GAFD,OAAM;GAAe,gBAAcM,EAAA;EACtCL,GAAAA,CAAAA,EAAQa,EAAA,QAAA,SAAA,CAAA,GAAA,GAAAZ,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["accordionKey"],"sources":["../../../src/components/VAccordion/context.ts"],"sourcesContent":["/** Share group icons through context; compact spacing inherits through CSS variables. */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { IconSource } from '../VIcon/types'\n\nexport interface AccordionContext {\n  /** Group name for <details name>; undefined = several items may stay open at once. */\n  name: string | undefined\n  /** Icon in the closed state: an icon name, or an explicit render. */\n  expandIcon: IconSource\n  /** Icon in the open state; undefined = a rotation of `expandIcon`. */\n  collapseIcon: IconSource | undefined\n}\n\n/**\n * `null` is what an item provides to its own content: an item placed straight inside\n * another one must not join the outer group, since opening it would then close the section\n * that holds it.\n */\nexport const accordionKey: InjectionKey<AccordionContext | null> = Symbol('v-accordion')\n"],"mappings":";AAoBA,IAAaA,IAAsD,OAAO,aAAa"}
+{"version":3,"file":"context.js","names":["accordionKey"],"sources":["../../../src/components/VAccordion/context.ts"],"sourcesContent":["/** Share group icons through context; the density reaches the rows through its token. */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { IconSource } from '../VIcon/types'\n\nexport interface AccordionContext {\n  /** Group name for <details name>; undefined = several items may stay open at once. */\n  name: string | undefined\n  /** Icon in the closed state: an icon name, or an explicit render. */\n  expandIcon: IconSource\n  /** Icon in the open state; undefined = a rotation of `expandIcon`. */\n  collapseIcon: IconSource | undefined\n}\n\n/**\n * `null` is what an item provides to its own content: an item placed straight inside\n * another one must not join the outer group, since opening it would then close the section\n * that holds it.\n */\nexport const accordionKey: InjectionKey<AccordionContext | null> = Symbol('v-accordion')\n"],"mappings":";AAoBA,IAAaA,IAAsD,OAAO,aAAa"}

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

@@ -31,8 +31,6 @@ interface AvatarProps {
      * here; on its own it is `md`.
      */
     size?: AvatarSize;
-    /** Takes 4px off the diameter, as it does on every other control. */
-    compact?: boolean;
     /**
      * Turns the avatar into an `<a>` pointing at this address. A disabled link becomes inert:
      * the address is dropped, so it can be neither focused nor followed.
@@ -59,7 +57,6 @@ declare const __VLS_base: import('vue').DefineComponent<AvatarProps, {}, {}, {},
     size: AvatarSize;
     src: string;
     color: string;
-    compact: boolean;
     clickable: boolean;
     href: string;
     disabled: boolean;

package/dist/components/VAvatar/VAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"VAvatar.js","names":["_sfc_main","VAvatar_vue_vue_type_script_setup_true_lang_default","VAvatar_default"],"sources":["../../../src/components/VAvatar/VAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Resolve image, icon and initials in priority order. JavaScript handles failed images, inert\n * links and merging private colour variables with consumer styles.\n */\n\nimport { computed, inject, onMounted, ref, useAttrs, useSlots, useTemplateRef, watch } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { AVATAR_DEFAULT_SIZE, avatarGroupKey } from './context'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { customColorStyle } from '../../utils/css'\nimport { isDev } from '../../utils/env'\n\n/** The diameter of the disc, from the control size scale. */\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface AvatarProps {\n  /**\n   * The picture to show. It is what the avatar prefers above everything else, and an image\n   * that fails to load hands over to the icon or the initials rather than leaving a gap.\n   */\n  src?: string\n  /**\n   * The icon to show when there is no picture. It comes before the initials, so an avatar\n   * given both an icon and a name shows the icon.\n   */\n  icon?: IconSource\n  /** The person's full name. */\n  name?: string\n  /**\n   * The accessible name, when it should not simply be `name`: an avatar standing for a team\n   * rather than a person, say. It wins over `name`, and a consumer `aria-label` wins over it.\n   */\n  alt?: string\n  /**\n   * A colour of your own, as a hex value, a CSS colour name or an `oklch()`. It REPLACES the\n   * hue otherwise derived from `name`, and the text on it is always white, so a light colour\n   * is the consumer's own risk.\n   */\n  color?: string\n  /**\n   * The diameter of the disc, from the size scale shared by every control. Leaving it out\n   * inside a VAvatarGroup takes the group's size, which is the point of not defaulting it\n   * here; on its own it is `md`.\n   */\n  size?: AvatarSize\n  /** Takes 4px off the diameter, as it does on every other control. */\n  compact?: boolean\n  /**\n   * Turns the avatar into an `<a>` pointing at this address. A disabled link becomes inert:\n   * the address is dropped, so it can be neither focused nor followed.\n   */\n  href?: string\n  /**\n   * Turns the avatar into a `<button>`. It is ignored as soon as `href` makes it a link.\n   * A VTooltip wrapping the avatar reaches this button through fallthrough.\n   */\n  clickable?: boolean\n  /**\n   * Makes an interactive avatar unusable: it stops responding, leaves the tab order and greys\n   * out. It says nothing on a plain avatar, which was never interactive to begin with.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  src: undefined,\n  icon: undefined,\n  name: undefined,\n  alt: undefined,\n  color: undefined,\n  size: undefined,\n  compact: false,\n  href: undefined,\n  clickable: false,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** Fallback content (replaces the initials), e.g. VAvatarGroup's \"+X\". */\n  default?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst group = inject(avatarGroupKey, null)\n\n// The size is the avatar's own answer first, then the group's; the density is cumulative,\n// the two terms written out in context.ts.\nconst resolvedSize = computed<AvatarSize>(() => props.size ?? group?.size ?? AVATAR_DEFAULT_SIZE)\nconst resolvedCompact = computed(() => props.compact || Boolean(group?.compact))\n\n// Fallthrough without `style`, which rootStyle merges with the component's own; the click\n// handler is also dropped on an inert link.\nconst {\n  isLink,\n  isInertLink,\n  linkHref,\n  attrs: passedAttrs,\n} = useInertLink({\n  href: () => props.href,\n  inert: () => props.disabled,\n  attrs: () => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== 'style')),\n})\n\nconst isInteractive = computed(() => isLink.value || props.clickable)\nconst tag = computed(() => (isLink.value ? 'a' : props.clickable ? 'button' : 'span'))\n\n// @core\n// The image failed to load: the initials take over, so an avatar is never an empty box.\nconst failed = ref(false)\nwatch(\n  () => props.src,\n  () => {\n    failed.value = false\n  },\n)\nconst showImage = computed(() => Boolean(props.src) && !failed.value)\n\n/*\n * On a server-rendered page the browser may give up on the picture before hydration attaches\n * `@error`, and that event is never sent again: the disc would stay an empty circle. A picture\n * already settled with no pixels at mount is one that failed.\n */\nconst imageEl = useTemplateRef<HTMLImageElement>('image')\nonMounted(() => {\n  const img = imageEl.value\n  if (img?.complete && img.naturalWidth === 0) failed.value = true\n})\n\n// @a11y\n/*\n * The name bound on the root: a consumer `aria-labelledby` removes it, a consumer `aria-label`\n * replaces it, and otherwise it is `alt`, then `name`. A picture on show carries that name as\n * its own `alt`, so the root then names itself only with what the consumer wrote.\n */\nconst ariaLabel = useAriaLabel(() => (showImage.value ? undefined : (props.alt ?? props.name)))\nconst named = computed(() => ariaLabel.value !== undefined || attrs['aria-labelledby'] != null)\n\n// @core\nconst initials = computed(() => {\n  if (!props.name) return ''\n  /* Whole characters, not UTF-16 halves: `part[0]` of \"😀\" is a lone surrogate, drawn as a\n     replacement box. And `toUpperCase` rather than its locale-aware sibling, whose answer\n     depends on the runtime's locale, which the server and the browser need not share. */\n  return props.name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((part) => [...part][0]?.toUpperCase() ?? '')\n    .join('')\n})\n\n// @core\n/*\n * Only the hue is inline (a unitless scalar); the CSS composes background/text with L/C fixed\n * per theme (light/dark adaptation without depending on contrast-color). A colour computed\n * outside the tokens, a deliberate exception.\n */\nconst hue = computed(() => {\n  if (!props.name) return null\n  let hash = 0\n  for (let i = 0; i < props.name.length; i++) {\n    hash = (hash * 31 + props.name.charCodeAt(i)) | 0\n  }\n  return Math.abs(hash) % 360\n})\nconst isAuto = computed(() => props.color === undefined && hue.value !== null)\n\n// @a11y\n// A static avatar with no picture is an image named by `alt`/ `name`. Anything else keeps the\n// role that arrived in the attributes; `link` on an inert link, a consumer's own otherwise.\nconst role = computed(() =>\n  !isInteractive.value && !showImage.value && named.value\n    ? 'img'\n    : (passedAttrs.value.role as string | undefined),\n)\n\n// @devwarn\n// A button or a link named by nothing: no `name`, no `alt`, no `aria-*` and no slot text. A\n// picture alone does not count, its `alt` coming from the same two props.\nif (isDev) {\n  const slots = useSlots()\n  onMounted(() => {\n    if (isInteractive.value && !named.value && !props.alt && !props.name && !slots.default) {\n      console.warn(\n        '[VAvatar] a clickable or linked avatar needs an accessible name: set `name`, `alt` or `aria-label`.',\n      )\n    }\n  })\n}\n\nconst rootStyle = computed<StyleValue>(() => [\n  customColorStyle(props.color) ??\n    (isAuto.value ? { '--avatar-hue': String(hue.value) } : undefined),\n  attrs.style as StyleValue,\n])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    :aria-disabled=\"isInertLink ? 'true' : undefined\"\n    v-bind=\"passedAttrs\"\n    class=\"v-avatar v-control\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-auto=\"isAuto ? '' : undefined\"\n    :href=\"linkHref\"\n    :type=\"tag === 'button' ? 'button' : undefined\"\n    :disabled=\"tag === 'button' ? disabled : undefined\"\n    :role=\"role\"\n    :aria-label=\"ariaLabel\"\n  >\n    <img\n      v-if=\"showImage\"\n      ref=\"image\"\n      class=\"v-avatar-image\"\n      :src=\"src\"\n      :alt=\"alt ?? name ?? ''\"\n      @error=\"failed = true\"\n    />\n    <VIcon v-else-if=\"icon\" v-bind=\"iconProps(icon)\" class=\"v-avatar-icon\" />\n    <slot v-else>\n      <span class=\"v-avatar-initials\" aria-hidden=\"true\">{{ initials }}</span>\n    </slot>\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-avatar {\n    --avatar-bg: var(--vectis-color-surface-muted);\n    --avatar-text: var(--vectis-color-text-muted);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--control-height);\n    block-size: var(--control-height);\n    flex: none;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    background: var(--avatar-bg);\n    color: var(--avatar-text);\n    border-radius: var(--vectis-radius-pill);\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-font-weight-semibold);\n    line-height: var(--vectis-text-control-leading);\n    text-decoration: none;\n    user-select: none;\n    /*\n     * The `transparent` fallback is what lets a lone avatar render ringless, and it is also\n     * what makes a divergence silent: rename it on one side and the discs in a group simply\n     * stop being separated, with no error and nothing missing from the box.\n     */\n    box-shadow: 0 0 0 var(--vectis-control-size-avatar-ring) var(--avatar-ring-color, transparent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /*\n   * The lightness/chroma pairs are set on the THEME scopes and inherited, rather than written\n   * in a `[data-theme='dark'] .v-avatar` rule: a descendant selector matches ANY dark ancestor,\n   * so a light subtree nested in a dark page kept the dark discs. An inherited value is\n   * resolved by the NEAREST scope, which is exactly how the semantic tokens behave.\n   */\n  :root,\n  [data-theme='light'] {\n    --avatar-auto-bg-lc: 0.9 0.06;\n    --avatar-auto-text-lc: 0.42 0.13;\n  }\n\n  [data-theme='dark'] {\n    --avatar-auto-bg-lc: 0.42 0.09;\n    --avatar-auto-text-lc: 0.92 0.05;\n  }\n\n  .v-avatar[data-auto] {\n    --avatar-bg: oklch(var(--avatar-auto-bg-lc) var(--avatar-hue));\n    --avatar-text: oklch(var(--avatar-auto-text-lc) var(--avatar-hue));\n  }\n\n  /* Custom colour (--custom-color inline): wins, with a fixed white text (contrast\n     is the consumer's responsibility). */\n  .v-avatar[data-custom] {\n    --avatar-bg: var(--custom-color);\n    --avatar-text: var(--vectis-color-text-on-accent);\n  }\n\n  .v-avatar-image {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  .v-avatar-icon {\n    --vectis-icon-size: calc(var(--control-height) * 0.55);\n  }\n\n  :is(a, button).v-avatar {\n    cursor: pointer;\n  }\n\n  :is(a, button).v-avatar:hover:not([aria-disabled='true'], :disabled) {\n    background: color-mix(in oklab, var(--avatar-bg), var(--vectis-color-text) 10%);\n  }\n\n  :is(a, button).v-avatar:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-avatar:is(:disabled, [aria-disabled='true']) {\n    cursor: not-allowed;\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-avatar {\n      transition: none;\n    }\n  }\n\n  /* The outline gives each disc its circle back; the focus ring, at (0,2,0), still wins over it. */\n  @media (forced-colors: active) {\n    .v-avatar {\n      outline: var(--vectis-control-border-width) solid CanvasText;\n      outline-offset: calc(-1 * var(--vectis-control-border-width));\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VAvatar.js","names":["_sfc_main","VAvatar_vue_vue_type_script_setup_true_lang_default","VAvatar_default"],"sources":["../../../src/components/VAvatar/VAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Resolve image, icon and initials in priority order. JavaScript handles failed images, inert\n * links and merging private colour variables with consumer styles.\n */\n\nimport { computed, inject, onMounted, ref, useAttrs, useSlots, useTemplateRef, watch } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { AVATAR_DEFAULT_SIZE, avatarGroupKey } from './context'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { customColorStyle } from '../../utils/css'\nimport { isDev } from '../../utils/env'\n\n/** The diameter of the disc, from the control size scale. */\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface AvatarProps {\n  /**\n   * The picture to show. It is what the avatar prefers above everything else, and an image\n   * that fails to load hands over to the icon or the initials rather than leaving a gap.\n   */\n  src?: string\n  /**\n   * The icon to show when there is no picture. It comes before the initials, so an avatar\n   * given both an icon and a name shows the icon.\n   */\n  icon?: IconSource\n  /** The person's full name. */\n  name?: string\n  /**\n   * The accessible name, when it should not simply be `name`: an avatar standing for a team\n   * rather than a person, say. It wins over `name`, and a consumer `aria-label` wins over it.\n   */\n  alt?: string\n  /**\n   * A colour of your own, as a hex value, a CSS colour name or an `oklch()`. It REPLACES the\n   * hue otherwise derived from `name`, and the text on it is always white, so a light colour\n   * is the consumer's own risk.\n   */\n  color?: string\n  /**\n   * The diameter of the disc, from the size scale shared by every control. Leaving it out\n   * inside a VAvatarGroup takes the group's size, which is the point of not defaulting it\n   * here; on its own it is `md`.\n   */\n  size?: AvatarSize\n  /**\n   * Turns the avatar into an `<a>` pointing at this address. A disabled link becomes inert:\n   * the address is dropped, so it can be neither focused nor followed.\n   */\n  href?: string\n  /**\n   * Turns the avatar into a `<button>`. It is ignored as soon as `href` makes it a link.\n   * A VTooltip wrapping the avatar reaches this button through fallthrough.\n   */\n  clickable?: boolean\n  /**\n   * Makes an interactive avatar unusable: it stops responding, leaves the tab order and greys\n   * out. It says nothing on a plain avatar, which was never interactive to begin with.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  src: undefined,\n  icon: undefined,\n  name: undefined,\n  alt: undefined,\n  color: undefined,\n  size: undefined,\n  href: undefined,\n  clickable: false,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** Fallback content (replaces the initials), e.g. VAvatarGroup's \"+X\". */\n  default?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst group = inject(avatarGroupKey, null)\n\n// The size is the avatar's own answer first, then the group's (context.ts).\nconst resolvedSize = computed<AvatarSize>(() => props.size ?? group?.size ?? AVATAR_DEFAULT_SIZE)\n\n// Fallthrough without `style`, which rootStyle merges with the component's own; the click\n// handler is also dropped on an inert link.\nconst {\n  isLink,\n  isInertLink,\n  linkHref,\n  attrs: passedAttrs,\n} = useInertLink({\n  href: () => props.href,\n  inert: () => props.disabled,\n  attrs: () => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== 'style')),\n})\n\nconst isInteractive = computed(() => isLink.value || props.clickable)\nconst tag = computed(() => (isLink.value ? 'a' : props.clickable ? 'button' : 'span'))\n\n// @core\n// The image failed to load: the initials take over, so an avatar is never an empty box.\nconst failed = ref(false)\nwatch(\n  () => props.src,\n  () => {\n    failed.value = false\n  },\n)\nconst showImage = computed(() => Boolean(props.src) && !failed.value)\n\n/*\n * On a server-rendered page the browser may give up on the picture before hydration attaches\n * `@error`, and that event is never sent again: the disc would stay an empty circle. A picture\n * already settled with no pixels at mount is one that failed.\n */\nconst imageEl = useTemplateRef<HTMLImageElement>('image')\nonMounted(() => {\n  const img = imageEl.value\n  if (img?.complete && img.naturalWidth === 0) failed.value = true\n})\n\n// @a11y\n/*\n * The name bound on the root: a consumer `aria-labelledby` removes it, a consumer `aria-label`\n * replaces it, and otherwise it is `alt`, then `name`. A picture on show carries that name as\n * its own `alt`, so the root then names itself only with what the consumer wrote.\n */\nconst ariaLabel = useAriaLabel(() => (showImage.value ? undefined : (props.alt ?? props.name)))\nconst named = computed(() => ariaLabel.value !== undefined || attrs['aria-labelledby'] != null)\n\n// @core\nconst initials = computed(() => {\n  if (!props.name) return ''\n  /* Whole characters, not UTF-16 halves: `part[0]` of \"😀\" is a lone surrogate, drawn as a\n     replacement box. And `toUpperCase` rather than its locale-aware sibling, whose answer\n     depends on the runtime's locale, which the server and the browser need not share. */\n  return props.name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((part) => [...part][0]?.toUpperCase() ?? '')\n    .join('')\n})\n\n// @core\n/*\n * Only the hue is inline (a unitless scalar); the CSS composes background/text with L/C fixed\n * per theme (light/dark adaptation without depending on contrast-color). A colour computed\n * outside the tokens, a deliberate exception.\n */\nconst hue = computed(() => {\n  if (!props.name) return null\n  let hash = 0\n  for (let i = 0; i < props.name.length; i++) {\n    hash = (hash * 31 + props.name.charCodeAt(i)) | 0\n  }\n  return Math.abs(hash) % 360\n})\nconst isAuto = computed(() => props.color === undefined && hue.value !== null)\n\n// @a11y\n// A static avatar with no picture is an image named by `alt`/ `name`. Anything else keeps the\n// role that arrived in the attributes; `link` on an inert link, a consumer's own otherwise.\nconst role = computed(() =>\n  !isInteractive.value && !showImage.value && named.value\n    ? 'img'\n    : (passedAttrs.value.role as string | undefined),\n)\n\n// @devwarn\n// A button or a link named by nothing: no `name`, no `alt`, no `aria-*` and no slot text. A\n// picture alone does not count, its `alt` coming from the same two props.\nif (isDev) {\n  const slots = useSlots()\n  onMounted(() => {\n    if (isInteractive.value && !named.value && !props.alt && !props.name && !slots.default) {\n      console.warn(\n        '[VAvatar] a clickable or linked avatar needs an accessible name: set `name`, `alt` or `aria-label`.',\n      )\n    }\n  })\n}\n\nconst rootStyle = computed<StyleValue>(() => [\n  customColorStyle(props.color) ??\n    (isAuto.value ? { '--avatar-hue': String(hue.value) } : undefined),\n  attrs.style as StyleValue,\n])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    :aria-disabled=\"isInertLink ? 'true' : undefined\"\n    v-bind=\"passedAttrs\"\n    class=\"v-avatar v-control\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedSize\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-auto=\"isAuto ? '' : undefined\"\n    :href=\"linkHref\"\n    :type=\"tag === 'button' ? 'button' : undefined\"\n    :disabled=\"tag === 'button' ? disabled : undefined\"\n    :role=\"role\"\n    :aria-label=\"ariaLabel\"\n  >\n    <img\n      v-if=\"showImage\"\n      ref=\"image\"\n      class=\"v-avatar-image\"\n      :src=\"src\"\n      :alt=\"alt ?? name ?? ''\"\n      @error=\"failed = true\"\n    />\n    <VIcon v-else-if=\"icon\" v-bind=\"iconProps(icon)\" class=\"v-avatar-icon\" />\n    <slot v-else>\n      <span class=\"v-avatar-initials\" aria-hidden=\"true\">{{ initials }}</span>\n    </slot>\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-avatar {\n    --avatar-bg: var(--vectis-color-surface-muted);\n    --avatar-text: var(--vectis-color-text-muted);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--control-height);\n    block-size: var(--control-height);\n    flex: none;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    background: var(--avatar-bg);\n    color: var(--avatar-text);\n    border-radius: var(--vectis-radius-pill);\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-font-weight-semibold);\n    line-height: var(--vectis-text-control-leading);\n    text-decoration: none;\n    user-select: none;\n    /*\n     * The `transparent` fallback is what lets a lone avatar render ringless, and it is also\n     * what makes a divergence silent: rename it on one side and the discs in a group simply\n     * stop being separated, with no error and nothing missing from the box.\n     */\n    box-shadow: 0 0 0 var(--vectis-control-size-avatar-ring) var(--avatar-ring-color, transparent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /*\n   * The lightness/chroma pairs are set on the THEME scopes and inherited, rather than written\n   * in a `[data-theme='dark'] .v-avatar` rule: a descendant selector matches ANY dark ancestor,\n   * so a light subtree nested in a dark page kept the dark discs. An inherited value is\n   * resolved by the NEAREST scope, which is exactly how the semantic tokens behave.\n   */\n  :root,\n  [data-theme='light'] {\n    --avatar-auto-bg-lc: 0.9 0.06;\n    --avatar-auto-text-lc: 0.42 0.13;\n  }\n\n  [data-theme='dark'] {\n    --avatar-auto-bg-lc: 0.42 0.09;\n    --avatar-auto-text-lc: 0.92 0.05;\n  }\n\n  .v-avatar[data-auto] {\n    --avatar-bg: oklch(var(--avatar-auto-bg-lc) var(--avatar-hue));\n    --avatar-text: oklch(var(--avatar-auto-text-lc) var(--avatar-hue));\n  }\n\n  /* Custom colour (--custom-color inline): wins, with a fixed white text (contrast\n     is the consumer's responsibility). */\n  .v-avatar[data-custom] {\n    --avatar-bg: var(--custom-color);\n    --avatar-text: var(--vectis-color-text-on-accent);\n  }\n\n  .v-avatar-image {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  .v-avatar-icon {\n    --vectis-icon-size: calc(var(--control-height) * 0.55);\n  }\n\n  :is(a, button).v-avatar {\n    cursor: pointer;\n  }\n\n  :is(a, button).v-avatar:hover:not([aria-disabled='true'], :disabled) {\n    background: color-mix(in oklab, var(--avatar-bg), var(--vectis-color-text) 10%);\n  }\n\n  :is(a, button).v-avatar:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-avatar:is(:disabled, [aria-disabled='true']) {\n    cursor: not-allowed;\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-avatar {\n      transition: none;\n    }\n  }\n\n  /* The outline gives each disc its circle back; the focus ring, at (0,2,0), still wins over it. */\n  @media (forced-colors: active) {\n    .v-avatar {\n      outline: var(--vectis-control-border-width) solid CanvasText;\n      outline-offset: calc(-1 * var(--vectis-control-border-width));\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -20,10 +20,6 @@ var E = ["src", "alt"], D = {
 		alt: { default: void 0 },
 		color: { default: void 0 },
 		size: { default: void 0 },
-		compact: {
-			type: Boolean,
-			default: !1
-		},
 		href: { default: void 0 },
 		clickable: {
 			type: Boolean,
@@ -35,59 +31,57 @@ var E = ["src", "alt"], D = {
 		}
 	},
 	setup(d) {
-		let O = d, k = x(), A = f(o, null), j = s(() => O.size ?? A?.size ?? "md"), M = s(() => O.compact || !!A?.compact), { isLink: N, isInertLink: P, linkHref: F, attrs: I } = i({
+		let O = d, k = x(), A = f(o, null), j = s(() => O.size ?? A?.size ?? "md"), { isLink: M, isInertLink: N, linkHref: P, attrs: F } = i({
 			href: () => O.href,
 			inert: () => O.disabled,
 			attrs: () => Object.fromEntries(Object.entries(k).filter(([e]) => e !== "style"))
-		}), L = s(() => N.value || O.clickable), R = s(() => N.value ? "a" : O.clickable ? "button" : "span"), z = g(!1);
+		}), I = s(() => M.value || O.clickable), L = s(() => M.value ? "a" : O.clickable ? "button" : "span"), R = g(!1);
 		w(() => O.src, () => {
-			z.value = !1;
+			R.value = !1;
 		});
-		let B = s(() => !!O.src && !z.value), V = C("image");
+		let z = s(() => !!O.src && !R.value), B = C("image");
 		m(() => {
-			let e = V.value;
-			e?.complete && e.naturalWidth === 0 && (z.value = !0);
+			let e = B.value;
+			e?.complete && e.naturalWidth === 0 && (R.value = !0);
 		});
-		let H = a(() => B.value ? void 0 : O.alt ?? O.name), U = s(() => H.value !== void 0 || k["aria-labelledby"] != null), W = s(() => O.name ? O.name.split(/\s+/).filter(Boolean).slice(0, 2).map((e) => [...e][0]?.toUpperCase() ?? "").join("") : ""), G = s(() => {
+		let V = a(() => z.value ? void 0 : O.alt ?? O.name), H = s(() => V.value !== void 0 || k["aria-labelledby"] != null), U = s(() => O.name ? O.name.split(/\s+/).filter(Boolean).slice(0, 2).map((e) => [...e][0]?.toUpperCase() ?? "").join("") : ""), W = s(() => {
 			if (!O.name) return null;
 			let e = 0;
 			for (let t = 0; t < O.name.length; t++) e = e * 31 + O.name.charCodeAt(t) | 0;
 			return Math.abs(e) % 360;
-		}), K = s(() => O.color === void 0 && G.value !== null), q = s(() => !L.value && !B.value && U.value ? "img" : I.value.role);
+		}), G = s(() => O.color === void 0 && W.value !== null), K = s(() => !I.value && !z.value && H.value ? "img" : F.value.role);
 		if (e) {
 			let e = S();
 			m(() => {
-				L.value && !U.value && !O.alt && !O.name && !e.default && console.warn("[VAvatar] a clickable or linked avatar needs an accessible name: set `name`, `alt` or `aria-label`.");
+				I.value && !H.value && !O.alt && !O.name && !e.default && console.warn("[VAvatar] a clickable or linked avatar needs an accessible name: set `name`, `alt` or `aria-label`.");
 			});
 		}
-		let J = s(() => [n(O.color) ?? (K.value ? { "--avatar-hue": String(G.value) } : void 0), k.style]);
-		return (e, n) => (h(), c(v(R.value), p({ "aria-disabled": b(P) ? "true" : void 0 }, b(I), {
+		let q = s(() => [n(O.color) ?? (G.value ? { "--avatar-hue": String(W.value) } : void 0), k.style]);
+		return (e, n) => (h(), c(v(L.value), p({ "aria-disabled": b(N) ? "true" : void 0 }, b(F), {
 			class: "v-avatar v-control",
-			style: J.value,
+			style: q.value,
 			"data-size": j.value,
-			"data-compact": M.value ? "" : void 0,
 			"data-custom": d.color === void 0 ? void 0 : "",
-			"data-auto": K.value ? "" : void 0,
-			href: b(F),
-			type: R.value === "button" ? "button" : void 0,
-			disabled: R.value === "button" ? d.disabled : void 0,
-			role: q.value,
-			"aria-label": b(H)
+			"data-auto": G.value ? "" : void 0,
+			href: b(P),
+			type: L.value === "button" ? "button" : void 0,
+			disabled: L.value === "button" ? d.disabled : void 0,
+			role: K.value,
+			"aria-label": b(V)
 		}), {
-			default: T(() => [B.value ? (h(), l("img", {
+			default: T(() => [z.value ? (h(), l("img", {
 				key: 0,
 				ref: "image",
 				class: "v-avatar-image",
 				src: d.src,
 				alt: d.alt ?? d.name ?? "",
-				onError: n[0] ||= (e) => z.value = !0
-			}, null, 40, E)) : d.icon ? (h(), c(r, p({ key: 1 }, b(t)(d.icon), { class: "v-avatar-icon" }), null, 16)) : _(e.$slots, "default", {}, () => [u("span", D, y(W.value), 1)], void 0, 2)]),
+				onError: n[0] ||= (e) => R.value = !0
+			}, null, 40, E)) : d.icon ? (h(), c(r, p({ key: 1 }, b(t)(d.icon), { class: "v-avatar-icon" }), null, 16)) : _(e.$slots, "default", {}, () => [u("span", D, y(U.value), 1)], void 0, 2)]),
 			_: 3
 		}, 16, [
 			"aria-disabled",
 			"style",
 			"data-size",
-			"data-compact",
 			"data-custom",
 			"data-auto",
 			"href",

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

@@ -1 +1 @@
-{"version":3,"file":"VAvatar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","_withCtx","_createElementBlock","VIcon","_renderSlot","_createElementVNode","_toDisplayString","VIcon_default","_hoisted_1","_hoisted_2","VAvatar_vue_vue_type_script_setup_true_lang_default","props","__props","attrs","useAttrs","group","inject","avatarGroupKey","resolvedSize","computed","resolvedCompact","passedAttrs","useInertLink","key","isInteractive","isLink","tag","failed","ref","showImage","imageEl","useTemplateRef","img","ariaLabel","useAriaLabel","named","initials","part","hue","hash","i","isAuto","role","isDev","slots","useSlots","rootStyle","customColorStyle","openBlock","createBlock","resolveDynamicComponent","mergeProps","unref","isInertLink","linkHref","withCtx","createElementBlock","_cache","iconProps","renderSlot","_ctx","createElementVNode","toDisplayString"],"sources":["../../../src/components/VAvatar/VAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Resolve image, icon and initials in priority order. JavaScript handles failed images, inert\n * links and merging private colour variables with consumer styles.\n */\n\nimport { computed, inject, onMounted, ref, useAttrs, useSlots, useTemplateRef, watch } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { AVATAR_DEFAULT_SIZE, avatarGroupKey } from './context'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { customColorStyle } from '../../utils/css'\nimport { isDev } from '../../utils/env'\n\n/** The diameter of the disc, from the control size scale. */\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface AvatarProps {\n  /**\n   * The picture to show. It is what the avatar prefers above everything else, and an image\n   * that fails to load hands over to the icon or the initials rather than leaving a gap.\n   */\n  src?: string\n  /**\n   * The icon to show when there is no picture. It comes before the initials, so an avatar\n   * given both an icon and a name shows the icon.\n   */\n  icon?: IconSource\n  /** The person's full name. */\n  name?: string\n  /**\n   * The accessible name, when it should not simply be `name`: an avatar standing for a team\n   * rather than a person, say. It wins over `name`, and a consumer `aria-label` wins over it.\n   */\n  alt?: string\n  /**\n   * A colour of your own, as a hex value, a CSS colour name or an `oklch()`. It REPLACES the\n   * hue otherwise derived from `name`, and the text on it is always white, so a light colour\n   * is the consumer's own risk.\n   */\n  color?: string\n  /**\n   * The diameter of the disc, from the size scale shared by every control. Leaving it out\n   * inside a VAvatarGroup takes the group's size, which is the point of not defaulting it\n   * here; on its own it is `md`.\n   */\n  size?: AvatarSize\n  /** Takes 4px off the diameter, as it does on every other control. */\n  compact?: boolean\n  /**\n   * Turns the avatar into an `<a>` pointing at this address. A disabled link becomes inert:\n   * the address is dropped, so it can be neither focused nor followed.\n   */\n  href?: string\n  /**\n   * Turns the avatar into a `<button>`. It is ignored as soon as `href` makes it a link.\n   * A VTooltip wrapping the avatar reaches this button through fallthrough.\n   */\n  clickable?: boolean\n  /**\n   * Makes an interactive avatar unusable: it stops responding, leaves the tab order and greys\n   * out. It says nothing on a plain avatar, which was never interactive to begin with.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  src: undefined,\n  icon: undefined,\n  name: undefined,\n  alt: undefined,\n  color: undefined,\n  size: undefined,\n  compact: false,\n  href: undefined,\n  clickable: false,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** Fallback content (replaces the initials), e.g. VAvatarGroup's \"+X\". */\n  default?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst group = inject(avatarGroupKey, null)\n\n// The size is the avatar's own answer first, then the group's; the density is cumulative,\n// the two terms written out in context.ts.\nconst resolvedSize = computed<AvatarSize>(() => props.size ?? group?.size ?? AVATAR_DEFAULT_SIZE)\nconst resolvedCompact = computed(() => props.compact || Boolean(group?.compact))\n\n// Fallthrough without `style`, which rootStyle merges with the component's own; the click\n// handler is also dropped on an inert link.\nconst {\n  isLink,\n  isInertLink,\n  linkHref,\n  attrs: passedAttrs,\n} = useInertLink({\n  href: () => props.href,\n  inert: () => props.disabled,\n  attrs: () => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== 'style')),\n})\n\nconst isInteractive = computed(() => isLink.value || props.clickable)\nconst tag = computed(() => (isLink.value ? 'a' : props.clickable ? 'button' : 'span'))\n\n// @core\n// The image failed to load: the initials take over, so an avatar is never an empty box.\nconst failed = ref(false)\nwatch(\n  () => props.src,\n  () => {\n    failed.value = false\n  },\n)\nconst showImage = computed(() => Boolean(props.src) && !failed.value)\n\n/*\n * On a server-rendered page the browser may give up on the picture before hydration attaches\n * `@error`, and that event is never sent again: the disc would stay an empty circle. A picture\n * already settled with no pixels at mount is one that failed.\n */\nconst imageEl = useTemplateRef<HTMLImageElement>('image')\nonMounted(() => {\n  const img = imageEl.value\n  if (img?.complete && img.naturalWidth === 0) failed.value = true\n})\n\n// @a11y\n/*\n * The name bound on the root: a consumer `aria-labelledby` removes it, a consumer `aria-label`\n * replaces it, and otherwise it is `alt`, then `name`. A picture on show carries that name as\n * its own `alt`, so the root then names itself only with what the consumer wrote.\n */\nconst ariaLabel = useAriaLabel(() => (showImage.value ? undefined : (props.alt ?? props.name)))\nconst named = computed(() => ariaLabel.value !== undefined || attrs['aria-labelledby'] != null)\n\n// @core\nconst initials = computed(() => {\n  if (!props.name) return ''\n  /* Whole characters, not UTF-16 halves: `part[0]` of \"😀\" is a lone surrogate, drawn as a\n     replacement box. And `toUpperCase` rather than its locale-aware sibling, whose answer\n     depends on the runtime's locale, which the server and the browser need not share. */\n  return props.name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((part) => [...part][0]?.toUpperCase() ?? '')\n    .join('')\n})\n\n// @core\n/*\n * Only the hue is inline (a unitless scalar); the CSS composes background/text with L/C fixed\n * per theme (light/dark adaptation without depending on contrast-color). A colour computed\n * outside the tokens, a deliberate exception.\n */\nconst hue = computed(() => {\n  if (!props.name) return null\n  let hash = 0\n  for (let i = 0; i < props.name.length; i++) {\n    hash = (hash * 31 + props.name.charCodeAt(i)) | 0\n  }\n  return Math.abs(hash) % 360\n})\nconst isAuto = computed(() => props.color === undefined && hue.value !== null)\n\n// @a11y\n// A static avatar with no picture is an image named by `alt`/ `name`. Anything else keeps the\n// role that arrived in the attributes; `link` on an inert link, a consumer's own otherwise.\nconst role = computed(() =>\n  !isInteractive.value && !showImage.value && named.value\n    ? 'img'\n    : (passedAttrs.value.role as string | undefined),\n)\n\n// @devwarn\n// A button or a link named by nothing: no `name`, no `alt`, no `aria-*` and no slot text. A\n// picture alone does not count, its `alt` coming from the same two props.\nif (isDev) {\n  const slots = useSlots()\n  onMounted(() => {\n    if (isInteractive.value && !named.value && !props.alt && !props.name && !slots.default) {\n      console.warn(\n        '[VAvatar] a clickable or linked avatar needs an accessible name: set `name`, `alt` or `aria-label`.',\n      )\n    }\n  })\n}\n\nconst rootStyle = computed<StyleValue>(() => [\n  customColorStyle(props.color) ??\n    (isAuto.value ? { '--avatar-hue': String(hue.value) } : undefined),\n  attrs.style as StyleValue,\n])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    :aria-disabled=\"isInertLink ? 'true' : undefined\"\n    v-bind=\"passedAttrs\"\n    class=\"v-avatar v-control\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-auto=\"isAuto ? '' : undefined\"\n    :href=\"linkHref\"\n    :type=\"tag === 'button' ? 'button' : undefined\"\n    :disabled=\"tag === 'button' ? disabled : undefined\"\n    :role=\"role\"\n    :aria-label=\"ariaLabel\"\n  >\n    <img\n      v-if=\"showImage\"\n      ref=\"image\"\n      class=\"v-avatar-image\"\n      :src=\"src\"\n      :alt=\"alt ?? name ?? ''\"\n      @error=\"failed = true\"\n    />\n    <VIcon v-else-if=\"icon\" v-bind=\"iconProps(icon)\" class=\"v-avatar-icon\" />\n    <slot v-else>\n      <span class=\"v-avatar-initials\" aria-hidden=\"true\">{{ initials }}</span>\n    </slot>\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-avatar {\n    --avatar-bg: var(--vectis-color-surface-muted);\n    --avatar-text: var(--vectis-color-text-muted);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--control-height);\n    block-size: var(--control-height);\n    flex: none;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    background: var(--avatar-bg);\n    color: var(--avatar-text);\n    border-radius: var(--vectis-radius-pill);\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-font-weight-semibold);\n    line-height: var(--vectis-text-control-leading);\n    text-decoration: none;\n    user-select: none;\n    /*\n     * The `transparent` fallback is what lets a lone avatar render ringless, and it is also\n     * what makes a divergence silent: rename it on one side and the discs in a group simply\n     * stop being separated, with no error and nothing missing from the box.\n     */\n    box-shadow: 0 0 0 var(--vectis-control-size-avatar-ring) var(--avatar-ring-color, transparent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /*\n   * The lightness/chroma pairs are set on the THEME scopes and inherited, rather than written\n   * in a `[data-theme='dark'] .v-avatar` rule: a descendant selector matches ANY dark ancestor,\n   * so a light subtree nested in a dark page kept the dark discs. An inherited value is\n   * resolved by the NEAREST scope, which is exactly how the semantic tokens behave.\n   */\n  :root,\n  [data-theme='light'] {\n    --avatar-auto-bg-lc: 0.9 0.06;\n    --avatar-auto-text-lc: 0.42 0.13;\n  }\n\n  [data-theme='dark'] {\n    --avatar-auto-bg-lc: 0.42 0.09;\n    --avatar-auto-text-lc: 0.92 0.05;\n  }\n\n  .v-avatar[data-auto] {\n    --avatar-bg: oklch(var(--avatar-auto-bg-lc) var(--avatar-hue));\n    --avatar-text: oklch(var(--avatar-auto-text-lc) var(--avatar-hue));\n  }\n\n  /* Custom colour (--custom-color inline): wins, with a fixed white text (contrast\n     is the consumer's responsibility). */\n  .v-avatar[data-custom] {\n    --avatar-bg: var(--custom-color);\n    --avatar-text: var(--vectis-color-text-on-accent);\n  }\n\n  .v-avatar-image {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  .v-avatar-icon {\n    --vectis-icon-size: calc(var(--control-height) * 0.55);\n  }\n\n  :is(a, button).v-avatar {\n    cursor: pointer;\n  }\n\n  :is(a, button).v-avatar:hover:not([aria-disabled='true'], :disabled) {\n    background: color-mix(in oklab, var(--avatar-bg), var(--vectis-color-text) 10%);\n  }\n\n  :is(a, button).v-avatar:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-avatar:is(:disabled, [aria-disabled='true']) {\n    cursor: not-allowed;\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-avatar {\n      transition: none;\n    }\n  }\n\n  /* The outline gives each disc its circle back; the focus ring, at (0,2,0), still wins over it. */\n  @media (forced-colors: active) {\n    .v-avatar {\n      outline: var(--vectis-control-border-width) solid CanvasText;\n      outline-offset: calc(-1 * var(--vectis-control-border-width));\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VAvatar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","_withCtx","_createElementBlock","VIcon","_renderSlot","_createElementVNode","_toDisplayString","VIcon_default","_hoisted_1","_hoisted_2","VAvatar_vue_vue_type_script_setup_true_lang_default","props","__props","attrs","useAttrs","group","inject","avatarGroupKey","resolvedSize","computed","passedAttrs","useInertLink","key","isInteractive","isLink","tag","failed","ref","showImage","imageEl","useTemplateRef","img","ariaLabel","useAriaLabel","named","initials","part","hue","hash","i","isAuto","role","isDev","slots","useSlots","rootStyle","customColorStyle","openBlock","createBlock","resolveDynamicComponent","mergeProps","unref","isInertLink","linkHref","withCtx","createElementBlock","_cache","iconProps","renderSlot","_ctx","createElementVNode","toDisplayString"],"sources":["../../../src/components/VAvatar/VAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Resolve image, icon and initials in priority order. JavaScript handles failed images, inert\n * links and merging private colour variables with consumer styles.\n */\n\nimport { computed, inject, onMounted, ref, useAttrs, useSlots, useTemplateRef, watch } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { AVATAR_DEFAULT_SIZE, avatarGroupKey } from './context'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { customColorStyle } from '../../utils/css'\nimport { isDev } from '../../utils/env'\n\n/** The diameter of the disc, from the control size scale. */\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface AvatarProps {\n  /**\n   * The picture to show. It is what the avatar prefers above everything else, and an image\n   * that fails to load hands over to the icon or the initials rather than leaving a gap.\n   */\n  src?: string\n  /**\n   * The icon to show when there is no picture. It comes before the initials, so an avatar\n   * given both an icon and a name shows the icon.\n   */\n  icon?: IconSource\n  /** The person's full name. */\n  name?: string\n  /**\n   * The accessible name, when it should not simply be `name`: an avatar standing for a team\n   * rather than a person, say. It wins over `name`, and a consumer `aria-label` wins over it.\n   */\n  alt?: string\n  /**\n   * A colour of your own, as a hex value, a CSS colour name or an `oklch()`. It REPLACES the\n   * hue otherwise derived from `name`, and the text on it is always white, so a light colour\n   * is the consumer's own risk.\n   */\n  color?: string\n  /**\n   * The diameter of the disc, from the size scale shared by every control. Leaving it out\n   * inside a VAvatarGroup takes the group's size, which is the point of not defaulting it\n   * here; on its own it is `md`.\n   */\n  size?: AvatarSize\n  /**\n   * Turns the avatar into an `<a>` pointing at this address. A disabled link becomes inert:\n   * the address is dropped, so it can be neither focused nor followed.\n   */\n  href?: string\n  /**\n   * Turns the avatar into a `<button>`. It is ignored as soon as `href` makes it a link.\n   * A VTooltip wrapping the avatar reaches this button through fallthrough.\n   */\n  clickable?: boolean\n  /**\n   * Makes an interactive avatar unusable: it stops responding, leaves the tab order and greys\n   * out. It says nothing on a plain avatar, which was never interactive to begin with.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  src: undefined,\n  icon: undefined,\n  name: undefined,\n  alt: undefined,\n  color: undefined,\n  size: undefined,\n  href: undefined,\n  clickable: false,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** Fallback content (replaces the initials), e.g. VAvatarGroup's \"+X\". */\n  default?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst group = inject(avatarGroupKey, null)\n\n// The size is the avatar's own answer first, then the group's (context.ts).\nconst resolvedSize = computed<AvatarSize>(() => props.size ?? group?.size ?? AVATAR_DEFAULT_SIZE)\n\n// Fallthrough without `style`, which rootStyle merges with the component's own; the click\n// handler is also dropped on an inert link.\nconst {\n  isLink,\n  isInertLink,\n  linkHref,\n  attrs: passedAttrs,\n} = useInertLink({\n  href: () => props.href,\n  inert: () => props.disabled,\n  attrs: () => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== 'style')),\n})\n\nconst isInteractive = computed(() => isLink.value || props.clickable)\nconst tag = computed(() => (isLink.value ? 'a' : props.clickable ? 'button' : 'span'))\n\n// @core\n// The image failed to load: the initials take over, so an avatar is never an empty box.\nconst failed = ref(false)\nwatch(\n  () => props.src,\n  () => {\n    failed.value = false\n  },\n)\nconst showImage = computed(() => Boolean(props.src) && !failed.value)\n\n/*\n * On a server-rendered page the browser may give up on the picture before hydration attaches\n * `@error`, and that event is never sent again: the disc would stay an empty circle. A picture\n * already settled with no pixels at mount is one that failed.\n */\nconst imageEl = useTemplateRef<HTMLImageElement>('image')\nonMounted(() => {\n  const img = imageEl.value\n  if (img?.complete && img.naturalWidth === 0) failed.value = true\n})\n\n// @a11y\n/*\n * The name bound on the root: a consumer `aria-labelledby` removes it, a consumer `aria-label`\n * replaces it, and otherwise it is `alt`, then `name`. A picture on show carries that name as\n * its own `alt`, so the root then names itself only with what the consumer wrote.\n */\nconst ariaLabel = useAriaLabel(() => (showImage.value ? undefined : (props.alt ?? props.name)))\nconst named = computed(() => ariaLabel.value !== undefined || attrs['aria-labelledby'] != null)\n\n// @core\nconst initials = computed(() => {\n  if (!props.name) return ''\n  /* Whole characters, not UTF-16 halves: `part[0]` of \"😀\" is a lone surrogate, drawn as a\n     replacement box. And `toUpperCase` rather than its locale-aware sibling, whose answer\n     depends on the runtime's locale, which the server and the browser need not share. */\n  return props.name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((part) => [...part][0]?.toUpperCase() ?? '')\n    .join('')\n})\n\n// @core\n/*\n * Only the hue is inline (a unitless scalar); the CSS composes background/text with L/C fixed\n * per theme (light/dark adaptation without depending on contrast-color). A colour computed\n * outside the tokens, a deliberate exception.\n */\nconst hue = computed(() => {\n  if (!props.name) return null\n  let hash = 0\n  for (let i = 0; i < props.name.length; i++) {\n    hash = (hash * 31 + props.name.charCodeAt(i)) | 0\n  }\n  return Math.abs(hash) % 360\n})\nconst isAuto = computed(() => props.color === undefined && hue.value !== null)\n\n// @a11y\n// A static avatar with no picture is an image named by `alt`/ `name`. Anything else keeps the\n// role that arrived in the attributes; `link` on an inert link, a consumer's own otherwise.\nconst role = computed(() =>\n  !isInteractive.value && !showImage.value && named.value\n    ? 'img'\n    : (passedAttrs.value.role as string | undefined),\n)\n\n// @devwarn\n// A button or a link named by nothing: no `name`, no `alt`, no `aria-*` and no slot text. A\n// picture alone does not count, its `alt` coming from the same two props.\nif (isDev) {\n  const slots = useSlots()\n  onMounted(() => {\n    if (isInteractive.value && !named.value && !props.alt && !props.name && !slots.default) {\n      console.warn(\n        '[VAvatar] a clickable or linked avatar needs an accessible name: set `name`, `alt` or `aria-label`.',\n      )\n    }\n  })\n}\n\nconst rootStyle = computed<StyleValue>(() => [\n  customColorStyle(props.color) ??\n    (isAuto.value ? { '--avatar-hue': String(hue.value) } : undefined),\n  attrs.style as StyleValue,\n])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    :aria-disabled=\"isInertLink ? 'true' : undefined\"\n    v-bind=\"passedAttrs\"\n    class=\"v-avatar v-control\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedSize\"\n    :data-custom=\"color !== undefined ? '' : undefined\"\n    :data-auto=\"isAuto ? '' : undefined\"\n    :href=\"linkHref\"\n    :type=\"tag === 'button' ? 'button' : undefined\"\n    :disabled=\"tag === 'button' ? disabled : undefined\"\n    :role=\"role\"\n    :aria-label=\"ariaLabel\"\n  >\n    <img\n      v-if=\"showImage\"\n      ref=\"image\"\n      class=\"v-avatar-image\"\n      :src=\"src\"\n      :alt=\"alt ?? name ?? ''\"\n      @error=\"failed = true\"\n    />\n    <VIcon v-else-if=\"icon\" v-bind=\"iconProps(icon)\" class=\"v-avatar-icon\" />\n    <slot v-else>\n      <span class=\"v-avatar-initials\" aria-hidden=\"true\">{{ initials }}</span>\n    </slot>\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-avatar {\n    --avatar-bg: var(--vectis-color-surface-muted);\n    --avatar-text: var(--vectis-color-text-muted);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--control-height);\n    block-size: var(--control-height);\n    flex: none;\n    overflow: hidden;\n    padding: 0;\n    border: none;\n    background: var(--avatar-bg);\n    color: var(--avatar-text);\n    border-radius: var(--vectis-radius-pill);\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-font-weight-semibold);\n    line-height: var(--vectis-text-control-leading);\n    text-decoration: none;\n    user-select: none;\n    /*\n     * The `transparent` fallback is what lets a lone avatar render ringless, and it is also\n     * what makes a divergence silent: rename it on one side and the discs in a group simply\n     * stop being separated, with no error and nothing missing from the box.\n     */\n    box-shadow: 0 0 0 var(--vectis-control-size-avatar-ring) var(--avatar-ring-color, transparent);\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /*\n   * The lightness/chroma pairs are set on the THEME scopes and inherited, rather than written\n   * in a `[data-theme='dark'] .v-avatar` rule: a descendant selector matches ANY dark ancestor,\n   * so a light subtree nested in a dark page kept the dark discs. An inherited value is\n   * resolved by the NEAREST scope, which is exactly how the semantic tokens behave.\n   */\n  :root,\n  [data-theme='light'] {\n    --avatar-auto-bg-lc: 0.9 0.06;\n    --avatar-auto-text-lc: 0.42 0.13;\n  }\n\n  [data-theme='dark'] {\n    --avatar-auto-bg-lc: 0.42 0.09;\n    --avatar-auto-text-lc: 0.92 0.05;\n  }\n\n  .v-avatar[data-auto] {\n    --avatar-bg: oklch(var(--avatar-auto-bg-lc) var(--avatar-hue));\n    --avatar-text: oklch(var(--avatar-auto-text-lc) var(--avatar-hue));\n  }\n\n  /* Custom colour (--custom-color inline): wins, with a fixed white text (contrast\n     is the consumer's responsibility). */\n  .v-avatar[data-custom] {\n    --avatar-bg: var(--custom-color);\n    --avatar-text: var(--vectis-color-text-on-accent);\n  }\n\n  .v-avatar-image {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  .v-avatar-icon {\n    --vectis-icon-size: calc(var(--control-height) * 0.55);\n  }\n\n  :is(a, button).v-avatar {\n    cursor: pointer;\n  }\n\n  :is(a, button).v-avatar:hover:not([aria-disabled='true'], :disabled) {\n    background: color-mix(in oklab, var(--avatar-bg), var(--vectis-color-text) 10%);\n  }\n\n  :is(a, button).v-avatar:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-avatar:is(:disabled, [aria-disabled='true']) {\n    cursor: not-allowed;\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-avatar {\n      transition: none;\n    }\n  }\n\n  /* The outline gives each disc its circle back; the focus ring, at (0,2,0), still wins over it. */\n  @media (forced-colors: active) {\n    .v-avatar {\n      outline: var(--vectis-control-border-width) solid CanvasText;\n      outline-offset: calc(-1 * var(--vectis-control-border-width));\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqEA,IAAMe,IAAQC,GAmBRC,IAAQC,EAAS,GACjBC,IAAQC,EAAOC,GAAgB,IAAI,GAGnCC,IAAeC,QAA2BR,EAAM,QAAQI,GAAO,QAAA,IAA2B,GAI1F,EACJ,WACA,gBACA,aACA,OAAOK,MACLC,EAAa;GACf,YAAYV,EAAM;GAClB,aAAaA,EAAM;GACnB,aAAa,OAAO,YAAY,OAAO,QAAQE,CAAK,CAAC,CAAC,QAAQ,CAACS,OAASA,MAAQ,OAAO,CAAC;EAC1F,CAAC,GAEKC,IAAgBJ,QAAeK,EAAO,SAASb,EAAM,SAAS,GAC9Dc,IAAMN,QAAgBK,EAAO,QAAQ,MAAMb,EAAM,YAAY,WAAW,MAAO,GAI/Ee,IAASC,EAAI,EAAK;EACxB,QACQhB,EAAM,WACN;GACJ,EAAO,QAAQ;EACjB,CACF;EACA,IAAMiB,IAAYT,QAAe,EAAQR,EAAM,OAAQ,CAACe,EAAO,KAAK,GAO9DG,IAAUC,EAAiC,OAAO;EACxD,QAAgB;GACd,IAAMC,IAAMF,EAAQ;GACpB,AAAIE,GAAK,YAAYA,EAAI,iBAAiB,MAAG,EAAO,QAAQ;EAC9D,CAAC;EAQD,IAAMC,IAAYC,QAAoBL,EAAU,QAAQ,KAAA,IAAajB,EAAM,OAAOA,EAAM,IAAM,GACxFuB,IAAQf,QAAea,EAAU,UAAU,KAAA,KAAanB,EAAM,sBAAsB,IAAI,GAGxFsB,IAAWhB,QACVR,EAAM,OAIJA,EAAM,KACV,MAAM,KAAK,CAAA,CACX,OAAO,OAAO,CAAA,CACd,MAAM,GAAG,CAAC,CAAA,CACV,KAAK,MAAS,CAAC,GAAGyB,CAAI,CAAC,CAAC,EAAE,EAAE,YAAY,KAAK,EAAE,CAAA,CAC/C,KAAK,EAAE,IATc,EAUzB,GAQKC,IAAMlB,QAAe;GACzB,IAAI,CAACR,EAAM,MAAM,OAAO;GACxB,IAAI2B,IAAO;GACX,KAAK,IAAIC,IAAI,GAAGA,IAAI5B,EAAM,KAAK,QAAQ,KACrC,IAAQ2B,IAAO,KAAK3B,EAAM,KAAK,WAAW4B,CAAC,IAAK;GAElD,OAAO,KAAK,IAAID,CAAI,IAAI;EAC1B,CAAC,GACKE,IAASrB,QAAeR,EAAM,UAAU,KAAA,KAAa0B,EAAI,UAAU,IAAI,GAKvEI,IAAOtB,QACX,CAACI,EAAc,SAAS,CAACK,EAAU,SAASM,EAAM,QAC9C,QACCd,EAAY,MAAM,IACzB;EAKA,IAAIsB,GAAO;GACT,IAAMC,IAAQC,EAAS;GACvB,QAAgB;IACd,AAAIrB,EAAc,SAAS,CAACW,EAAM,SAAS,CAACvB,EAAM,OAAO,CAACA,EAAM,QAAQ,CAACgC,EAAM,WAC7E,QAAQ,KACN,qGACF;GAEJ,CAAC;EACH;EAEA,IAAME,IAAY1B,QAA2B,CAC3C2B,EAAiBnC,EAAM,KAAK,MACzB6B,EAAO,QAAQ,EAAE,gBAAgB,OAAOH,EAAI,KAAK,EAAE,IAAI,KAAA,IAC1DxB,EAAM,KACR,CAAC;oBAICjB,EAAA,GAAAC,EA2BYC,EA1BL2B,EAAA,KAAG,GADV1B,EA2BY,EAzBT,iBAAeC,EAAAoD,CAAA,IAAW,SAAY,KAAA,EAC/B,GAAApD,EAAAoB,CAAA,GAAW;GACnB,OAAM;GACL,OAAOyB,EAAA;GACP,aAAW3B,EAAA;GACX,eAAaN,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,aAAW4B,EAAA,QAAM,KAAQ,KAAA;GACzB,MAAMxC,EAAAqD,CAAA;GACN,MAAM5B,EAAA,UAAG,WAAA,WAA2B,KAAA;GACpC,UAAUA,EAAA,UAAG,WAAgBb,EAAA,WAAW,KAAA;GACxC,MAAM6B,EAAA;GACN,cAAYzC,EAAAgC,CAAA;;GAEb,SAAA/B,QAOE,CANM2B,EAAA,SADRhC,EAAA,GAAAM,EAOE,OAAA;;IALA,KAAI;IACJ,OAAM;IACL,KAAKU,EAAA;IACL,KAAKA,EAAA,OAAOA,EAAA,QAAI;IAChB,SAAK,AAAA4C,EAAA,QAAA,MAAE,EAAA,QAAM;GAEE,GAAA,MAAA,IAAAhD,CAAA,KAAAI,EAAA,QAAlBhB,EAAA,GAAAC,EAAyEM,GAAzEJ,EAAyE,EAAA,KAAA,EAAA,GAAzCC,EAAAyD,CAAA,CAAS,CAAC7C,EAAA,IAAI,GAAA,EAAG,OAAM,gBAAe,CAAA,GAAA,MAAA,EAAA,KACtER,EAEOuD,EAAA,QAAA,WAAA,CAAA,SAAA,CADLtD,EAAwE,QAAxEI,GAAwEH,EAAlB6B,EAAA,KAAQ,GAAA,CAAA,CAAA,GAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}

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

@@ -15,11 +15,6 @@ interface AvatarGroupProps {
      * of its own keeps it.
      */
     size?: AvatarSize;
-    /**
-     * Applies the reduced density to every avatar inside. Unlike `size` it is cumulative: an
-     * avatar cannot opt back out of a compact group.
-     */
-    compact?: boolean;
     /**
      * The colour of the ring drawn around each disc. It defaults to the page background, which
      * makes the ring read as a gap between two avatars.
@@ -43,7 +38,6 @@ type __VLS_Slots = {
 declare const __VLS_base: import('vue').DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
     label: string;
     size: AvatarSize;
-    compact: boolean;
     max: number;
     ringColor: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -1 +1 @@
-{"version":3,"file":"VAvatarGroup.js","names":["_sfc_main","VAvatarGroup_vue_vue_type_script_setup_true_lang_default","VAvatarGroup_default"],"sources":["../../../src/components/VAvatar/VAvatarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core\n/**\n * Count avatars through slot VNodes for SSR-consistent overflow; useSlotNodes keeps that count\n * reactive when the parent replaces its slot.\n */\n\nimport { computed, provide } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VAvatar from './VAvatar.vue'\nimport type { AvatarSize } from './VAvatar.vue'\nimport { AVATAR_DEFAULT_SIZE, avatarGroupKey } from './context'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useSlotNodes } from '../../composables/useSlotNodes'\n\n/** What the `#overflow` slot receives. */\nexport interface AvatarGroupOverflowSlotProps {\n  /** How many avatars are hidden beyond `max`. */\n  count: number\n}\n\ninterface AvatarGroupProps {\n  /**\n   * How many avatars to show before the remaining ones are summed up as a single\n   * \"+X\" disc. Left out, or set to 0, every avatar is shown.\n   */\n  max?: number\n  /**\n   * The size given to the avatars inside the group. An avatar that sets a `size`\n   * of its own keeps it.\n   */\n  size?: AvatarSize\n  /**\n   * Applies the reduced density to every avatar inside. Unlike `size` it is cumulative: an\n   * avatar cannot opt back out of a compact group.\n   */\n  compact?: boolean\n  /**\n   * The colour of the ring drawn around each disc. It defaults to the page background, which\n   * makes the ring read as a gap between two avatars.\n   */\n  ringColor?: string\n  /**\n   * The accessible name of the group, e.g. \"Project members\". A row of faces does not say on\n   * its own who these people are. A consumer `aria-label` or `aria-labelledby` wins over it.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<AvatarGroupProps>(), {\n  max: undefined,\n  size: undefined,\n  compact: false,\n  ringColor: undefined,\n  label: undefined,\n})\n\nconst ariaLabel = useAriaLabel(() => props.label)\n\ndefineSlots<{\n  /** The VAvatars to stack. */\n  default?(): unknown\n  /**\n   * Replaces the \"+X\" disc that stands for the avatars beyond `max`. It receives\n   * `count`, the number of avatars being hidden.\n   */\n  overflow?(props: AvatarGroupOverflowSlotProps): unknown\n}>()\n\nprovide(avatarGroupKey, {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n})\n\nconst items = useSlotNodes()\n// `max: 0` means \"no limit\", as documented, and so does a negative one: `slice(0, -1)` would\n// drop the last avatar and sum it into a \"+1\" disc.\nconst visibleItems = computed(() =>\n  props.max !== undefined && props.max > 0 ? items.value.slice(0, props.max) : items.value,\n)\nconst overflowCount = computed(() => items.value.length - visibleItems.value.length)\n\n// A functional component is the only way to render VNodes that have already been\n// captured: <component :is> expects a component definition, not a vnode.\nconst VisibleAvatars = () => visibleItems.value\n\nconst rootStyle = computed<StyleValue>(() =>\n  props.ringColor !== undefined ? { '--avatar-ring-color': props.ringColor } : undefined,\n)\n\n// The group carries v-control so that --control-height is defined at ITS level, which keeps the\n// overlap computable even when a child is wrapped; a VTooltip, for instance, inserts a <span>\n// between the group and the VAvatar. An avatar given a size of its own redefines\n// --control-height on itself, so its own overlap follows that size rather than the group's.\nconst resolvedGroupSize = computed<AvatarSize>(() => props.size ?? AVATAR_DEFAULT_SIZE)\n</script>\n\n<template>\n  <div\n    class=\"v-avatar-group v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedGroupSize\"\n    :data-compact=\"compact ? '' : undefined\"\n  >\n    <component :is=\"VisibleAvatars\" />\n    <slot v-if=\"overflowCount > 0\" name=\"overflow\" :count=\"overflowCount\">\n      <VAvatar>+{{ overflowCount }}</VAvatar>\n    </slot>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-avatar-group {\n    /* The separation ring, declared here so that every child .v-avatar inherits it. */\n    --avatar-ring-color: var(--vectis-color-surface);\n    display: inline-flex;\n    align-items: center;\n  }\n\n  /*\n   * Take overlap height from the group so wrappers and differently sized avatars share one row\n   * contract.\n   */\n  .v-avatar-group > * + * {\n    margin-inline-start: calc(var(--control-height) * -0.3);\n  }\n\n  /* On hover, or as soon as something inside it takes focus, a disc rises above its\n     neighbours so it is seen whole rather than clipped by the next one. */\n  .v-avatar-group > *:hover,\n  .v-avatar-group > *:focus-within {\n    z-index: 1;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VAvatarGroup.js","names":["_sfc_main","VAvatarGroup_vue_vue_type_script_setup_true_lang_default","VAvatarGroup_default"],"sources":["../../../src/components/VAvatar/VAvatarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core\n/**\n * Count avatars through slot VNodes for SSR-consistent overflow; useSlotNodes keeps that count\n * reactive when the parent replaces its slot.\n */\n\nimport { computed, provide } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VAvatar from './VAvatar.vue'\nimport type { AvatarSize } from './VAvatar.vue'\nimport { AVATAR_DEFAULT_SIZE, avatarGroupKey } from './context'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useSlotNodes } from '../../composables/useSlotNodes'\n\n/** What the `#overflow` slot receives. */\nexport interface AvatarGroupOverflowSlotProps {\n  /** How many avatars are hidden beyond `max`. */\n  count: number\n}\n\ninterface AvatarGroupProps {\n  /**\n   * How many avatars to show before the remaining ones are summed up as a single\n   * \"+X\" disc. Left out, or set to 0, every avatar is shown.\n   */\n  max?: number\n  /**\n   * The size given to the avatars inside the group. An avatar that sets a `size`\n   * of its own keeps it.\n   */\n  size?: AvatarSize\n  /**\n   * The colour of the ring drawn around each disc. It defaults to the page background, which\n   * makes the ring read as a gap between two avatars.\n   */\n  ringColor?: string\n  /**\n   * The accessible name of the group, e.g. \"Project members\". A row of faces does not say on\n   * its own who these people are. A consumer `aria-label` or `aria-labelledby` wins over it.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<AvatarGroupProps>(), {\n  max: undefined,\n  size: undefined,\n  ringColor: undefined,\n  label: undefined,\n})\n\nconst ariaLabel = useAriaLabel(() => props.label)\n\ndefineSlots<{\n  /** The VAvatars to stack. */\n  default?(): unknown\n  /**\n   * Replaces the \"+X\" disc that stands for the avatars beyond `max`. It receives\n   * `count`, the number of avatars being hidden.\n   */\n  overflow?(props: AvatarGroupOverflowSlotProps): unknown\n}>()\n\nprovide(avatarGroupKey, {\n  get size() {\n    return props.size\n  },\n})\n\nconst items = useSlotNodes()\n// `max: 0` means \"no limit\", as documented, and so does a negative one: `slice(0, -1)` would\n// drop the last avatar and sum it into a \"+1\" disc.\nconst visibleItems = computed(() =>\n  props.max !== undefined && props.max > 0 ? items.value.slice(0, props.max) : items.value,\n)\nconst overflowCount = computed(() => items.value.length - visibleItems.value.length)\n\n// A functional component is the only way to render VNodes that have already been\n// captured: <component :is> expects a component definition, not a vnode.\nconst VisibleAvatars = () => visibleItems.value\n\nconst rootStyle = computed<StyleValue>(() =>\n  props.ringColor !== undefined ? { '--avatar-ring-color': props.ringColor } : undefined,\n)\n\n// The group carries v-control so that --control-height is defined at ITS level, which keeps the\n// overlap computable even when a child is wrapped; a VTooltip, for instance, inserts a <span>\n// between the group and the VAvatar. An avatar given a size of its own redefines\n// --control-height on itself, so its own overlap follows that size rather than the group's.\nconst resolvedGroupSize = computed<AvatarSize>(() => props.size ?? AVATAR_DEFAULT_SIZE)\n</script>\n\n<template>\n  <div\n    class=\"v-avatar-group v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedGroupSize\"\n  >\n    <component :is=\"VisibleAvatars\" />\n    <slot v-if=\"overflowCount > 0\" name=\"overflow\" :count=\"overflowCount\">\n      <VAvatar>+{{ overflowCount }}</VAvatar>\n    </slot>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-avatar-group {\n    /* The separation ring, declared here so that every child .v-avatar inherits it. */\n    --avatar-ring-color: var(--vectis-color-surface);\n    display: inline-flex;\n    align-items: center;\n  }\n\n  /*\n   * Take overlap height from the group so wrappers and differently sized avatars share one row\n   * contract.\n   */\n  .v-avatar-group > * + * {\n    margin-inline-start: calc(var(--control-height) * -0.3);\n  }\n\n  /* On hover, or as soon as something inside it takes focus, a disc rises above its\n     neighbours so it is seen whole rather than clipped by the next one. */\n  .v-avatar-group > *:hover,\n  .v-avatar-group > *:focus-within {\n    z-index: 1;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -4,40 +4,26 @@ 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 = [
-	"aria-label",
-	"data-size",
-	"data-compact"
-], b = /*@__PURE__*/ u({
+var y = ["aria-label", "data-size"], b = /*@__PURE__*/ u({
 	__name: "VAvatarGroup",
 	props: {
 		max: { default: void 0 },
 		size: { default: void 0 },
-		compact: {
-			type: Boolean,
-			default: !1
-		},
 		ringColor: { default: void 0 },
 		label: { default: void 0 }
 	},
 	setup(u) {
 		let b = u, x = t(() => b.label);
-		p(n, {
-			get size() {
-				return b.size;
-			},
-			get compact() {
-				return b.compact;
-			}
-		});
+		p(n, { get size() {
+			return b.size;
+		} });
 		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",
 			"aria-label": _(x),
 			style: d(E.value),
-			"data-size": D.value,
-			"data-compact": u.compact ? "" : void 0
+			"data-size": D.value
 		}, [(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

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

@@ -1 +1 @@
-{"version":3,"file":"VAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_normalizeStyle","_createBlock","_resolveDynamicComponent","_renderSlot","_createVNode","VAvatar","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","VAvatar_default","_hoisted_1","VAvatarGroup_vue_vue_type_script_setup_true_lang_default","props","__props","ariaLabel","useAriaLabel","avatarGroupKey","items","useSlotNodes","visibleItems","computed","overflowCount","VisibleAvatars","rootStyle","resolvedGroupSize","openBlock","createElementBlock","unref","normalizeStyle","createBlock","resolveDynamicComponent","renderSlot","_ctx","createVNode","withCtx","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/VAvatar/VAvatarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core\n/**\n * Count avatars through slot VNodes for SSR-consistent overflow; useSlotNodes keeps that count\n * reactive when the parent replaces its slot.\n */\n\nimport { computed, provide } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VAvatar from './VAvatar.vue'\nimport type { AvatarSize } from './VAvatar.vue'\nimport { AVATAR_DEFAULT_SIZE, avatarGroupKey } from './context'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useSlotNodes } from '../../composables/useSlotNodes'\n\n/** What the `#overflow` slot receives. */\nexport interface AvatarGroupOverflowSlotProps {\n  /** How many avatars are hidden beyond `max`. */\n  count: number\n}\n\ninterface AvatarGroupProps {\n  /**\n   * How many avatars to show before the remaining ones are summed up as a single\n   * \"+X\" disc. Left out, or set to 0, every avatar is shown.\n   */\n  max?: number\n  /**\n   * The size given to the avatars inside the group. An avatar that sets a `size`\n   * of its own keeps it.\n   */\n  size?: AvatarSize\n  /**\n   * Applies the reduced density to every avatar inside. Unlike `size` it is cumulative: an\n   * avatar cannot opt back out of a compact group.\n   */\n  compact?: boolean\n  /**\n   * The colour of the ring drawn around each disc. It defaults to the page background, which\n   * makes the ring read as a gap between two avatars.\n   */\n  ringColor?: string\n  /**\n   * The accessible name of the group, e.g. \"Project members\". A row of faces does not say on\n   * its own who these people are. A consumer `aria-label` or `aria-labelledby` wins over it.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<AvatarGroupProps>(), {\n  max: undefined,\n  size: undefined,\n  compact: false,\n  ringColor: undefined,\n  label: undefined,\n})\n\nconst ariaLabel = useAriaLabel(() => props.label)\n\ndefineSlots<{\n  /** The VAvatars to stack. */\n  default?(): unknown\n  /**\n   * Replaces the \"+X\" disc that stands for the avatars beyond `max`. It receives\n   * `count`, the number of avatars being hidden.\n   */\n  overflow?(props: AvatarGroupOverflowSlotProps): unknown\n}>()\n\nprovide(avatarGroupKey, {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n})\n\nconst items = useSlotNodes()\n// `max: 0` means \"no limit\", as documented, and so does a negative one: `slice(0, -1)` would\n// drop the last avatar and sum it into a \"+1\" disc.\nconst visibleItems = computed(() =>\n  props.max !== undefined && props.max > 0 ? items.value.slice(0, props.max) : items.value,\n)\nconst overflowCount = computed(() => items.value.length - visibleItems.value.length)\n\n// A functional component is the only way to render VNodes that have already been\n// captured: <component :is> expects a component definition, not a vnode.\nconst VisibleAvatars = () => visibleItems.value\n\nconst rootStyle = computed<StyleValue>(() =>\n  props.ringColor !== undefined ? { '--avatar-ring-color': props.ringColor } : undefined,\n)\n\n// The group carries v-control so that --control-height is defined at ITS level, which keeps the\n// overlap computable even when a child is wrapped; a VTooltip, for instance, inserts a <span>\n// between the group and the VAvatar. An avatar given a size of its own redefines\n// --control-height on itself, so its own overlap follows that size rather than the group's.\nconst resolvedGroupSize = computed<AvatarSize>(() => props.size ?? AVATAR_DEFAULT_SIZE)\n</script>\n\n<template>\n  <div\n    class=\"v-avatar-group v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedGroupSize\"\n    :data-compact=\"compact ? '' : undefined\"\n  >\n    <component :is=\"VisibleAvatars\" />\n    <slot v-if=\"overflowCount > 0\" name=\"overflow\" :count=\"overflowCount\">\n      <VAvatar>+{{ overflowCount }}</VAvatar>\n    </slot>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-avatar-group {\n    /* The separation ring, declared here so that every child .v-avatar inherits it. */\n    --avatar-ring-color: var(--vectis-color-surface);\n    display: inline-flex;\n    align-items: center;\n  }\n\n  /*\n   * Take overlap height from the group so wrappers and differently sized avatars share one row\n   * contract.\n   */\n  .v-avatar-group > * + * {\n    margin-inline-start: calc(var(--control-height) * -0.3);\n  }\n\n  /* On hover, or as soon as something inside it takes focus, a disc rises above its\n     neighbours so it is seen whole rather than clipped by the next one. */\n  .v-avatar-group > *:hover,\n  .v-avatar-group > *:focus-within {\n    z-index: 1;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAmDA,IAAMgB,IAAQC,GAQRC,IAAYC,QAAmBH,EAAM,KAAK;EAYhD,EAAQI,GAAgB;GACtB,IAAI,OAAO;IACT,OAAOJ,EAAM;GACf;GACA,IAAI,UAAU;IACZ,OAAOA,EAAM;GACf;EACF,CAAC;EAED,IAAMK,IAAQC,EAAa,GAGrBC,IAAeC,QACnBR,EAAM,QAAQ,KAAA,KAAaA,EAAM,MAAM,IAAIK,EAAM,MAAM,MAAM,GAAGL,EAAM,GAAG,IAAIK,EAAM,KACrF,GACMI,IAAgBD,QAAeH,EAAM,MAAM,SAASE,EAAa,MAAM,MAAM,GAI7EG,UAAuBH,EAAa,OAEpCI,IAAYH,QAChBR,EAAM,cAAc,KAAA,IAAyD,KAAA,IAA7C,EAAE,uBAAuBA,EAAM,UAAU,CAC3E,GAMMY,IAAoBJ,QAA2BR,EAAM,QAAA,IAA2B;oBAIpFhB,EAAA,GAAAC,EAYM,OAAA;GAXJ,OAAM;GACN,MAAK;GACJ,cAAYC,EAAAgB,CAAA;GACZ,OAAKf,EAAEwB,EAAA,KAAS;GAChB,aAAWC,EAAA;GACX,gBAAcX,EAAA,UAAO,KAAQ,KAAA;EAE9BjB,GAAAA,EAAAA,EAAA,GAAAI,EAAkCC,EAAlBqB,CAAc,CAAA,IAClBD,EAAA,QAAa,IAAzBnB,EAEO8B,EAAA,QAAA,YAAA,EAFyC,OAAOX,EAAA,MAAa,SAE7D,CADLlB,EAAuCC,GAAA,MAAA;GAA9B,SAAAC,QAAC,CAADC,EAAA,MAACC,EAAGc,EAAA,KAAa,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"VAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_normalizeStyle","_createBlock","_resolveDynamicComponent","_renderSlot","_createVNode","VAvatar","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","VAvatar_default","_hoisted_1","VAvatarGroup_vue_vue_type_script_setup_true_lang_default","props","__props","ariaLabel","useAriaLabel","avatarGroupKey","items","useSlotNodes","visibleItems","computed","overflowCount","VisibleAvatars","rootStyle","resolvedGroupSize","openBlock","createElementBlock","unref","normalizeStyle","createBlock","resolveDynamicComponent","renderSlot","_ctx","createVNode","withCtx","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/VAvatar/VAvatarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core\n/**\n * Count avatars through slot VNodes for SSR-consistent overflow; useSlotNodes keeps that count\n * reactive when the parent replaces its slot.\n */\n\nimport { computed, provide } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VAvatar from './VAvatar.vue'\nimport type { AvatarSize } from './VAvatar.vue'\nimport { AVATAR_DEFAULT_SIZE, avatarGroupKey } from './context'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useSlotNodes } from '../../composables/useSlotNodes'\n\n/** What the `#overflow` slot receives. */\nexport interface AvatarGroupOverflowSlotProps {\n  /** How many avatars are hidden beyond `max`. */\n  count: number\n}\n\ninterface AvatarGroupProps {\n  /**\n   * How many avatars to show before the remaining ones are summed up as a single\n   * \"+X\" disc. Left out, or set to 0, every avatar is shown.\n   */\n  max?: number\n  /**\n   * The size given to the avatars inside the group. An avatar that sets a `size`\n   * of its own keeps it.\n   */\n  size?: AvatarSize\n  /**\n   * The colour of the ring drawn around each disc. It defaults to the page background, which\n   * makes the ring read as a gap between two avatars.\n   */\n  ringColor?: string\n  /**\n   * The accessible name of the group, e.g. \"Project members\". A row of faces does not say on\n   * its own who these people are. A consumer `aria-label` or `aria-labelledby` wins over it.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<AvatarGroupProps>(), {\n  max: undefined,\n  size: undefined,\n  ringColor: undefined,\n  label: undefined,\n})\n\nconst ariaLabel = useAriaLabel(() => props.label)\n\ndefineSlots<{\n  /** The VAvatars to stack. */\n  default?(): unknown\n  /**\n   * Replaces the \"+X\" disc that stands for the avatars beyond `max`. It receives\n   * `count`, the number of avatars being hidden.\n   */\n  overflow?(props: AvatarGroupOverflowSlotProps): unknown\n}>()\n\nprovide(avatarGroupKey, {\n  get size() {\n    return props.size\n  },\n})\n\nconst items = useSlotNodes()\n// `max: 0` means \"no limit\", as documented, and so does a negative one: `slice(0, -1)` would\n// drop the last avatar and sum it into a \"+1\" disc.\nconst visibleItems = computed(() =>\n  props.max !== undefined && props.max > 0 ? items.value.slice(0, props.max) : items.value,\n)\nconst overflowCount = computed(() => items.value.length - visibleItems.value.length)\n\n// A functional component is the only way to render VNodes that have already been\n// captured: <component :is> expects a component definition, not a vnode.\nconst VisibleAvatars = () => visibleItems.value\n\nconst rootStyle = computed<StyleValue>(() =>\n  props.ringColor !== undefined ? { '--avatar-ring-color': props.ringColor } : undefined,\n)\n\n// The group carries v-control so that --control-height is defined at ITS level, which keeps the\n// overlap computable even when a child is wrapped; a VTooltip, for instance, inserts a <span>\n// between the group and the VAvatar. An avatar given a size of its own redefines\n// --control-height on itself, so its own overlap follows that size rather than the group's.\nconst resolvedGroupSize = computed<AvatarSize>(() => props.size ?? AVATAR_DEFAULT_SIZE)\n</script>\n\n<template>\n  <div\n    class=\"v-avatar-group v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedGroupSize\"\n  >\n    <component :is=\"VisibleAvatars\" />\n    <slot v-if=\"overflowCount > 0\" name=\"overflow\" :count=\"overflowCount\">\n      <VAvatar>+{{ overflowCount }}</VAvatar>\n    </slot>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-avatar-group {\n    /* The separation ring, declared here so that every child .v-avatar inherits it. */\n    --avatar-ring-color: var(--vectis-color-surface);\n    display: inline-flex;\n    align-items: center;\n  }\n\n  /*\n   * Take overlap height from the group so wrappers and differently sized avatars share one row\n   * contract.\n   */\n  .v-avatar-group > * + * {\n    margin-inline-start: calc(var(--control-height) * -0.3);\n  }\n\n  /* On hover, or as soon as something inside it takes focus, a disc rises above its\n     neighbours so it is seen whole rather than clipped by the next one. */\n  .v-avatar-group > *:hover,\n  .v-avatar-group > *:focus-within {\n    z-index: 1;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EA8CA,IAAMgB,IAAQC,GAORC,IAAYC,QAAmBH,EAAM,KAAK;EAYhD,EAAQI,GAAgB,EACtB,IAAI,OAAO;GACT,OAAOJ,EAAM;EACf,EACF,CAAC;EAED,IAAMK,IAAQC,EAAa,GAGrBC,IAAeC,QACnBR,EAAM,QAAQ,KAAA,KAAaA,EAAM,MAAM,IAAIK,EAAM,MAAM,MAAM,GAAGL,EAAM,GAAG,IAAIK,EAAM,KACrF,GACMI,IAAgBD,QAAeH,EAAM,MAAM,SAASE,EAAa,MAAM,MAAM,GAI7EG,UAAuBH,EAAa,OAEpCI,IAAYH,QAChBR,EAAM,cAAc,KAAA,IAAyD,KAAA,IAA7C,EAAE,uBAAuBA,EAAM,UAAU,CAC3E,GAMMY,IAAoBJ,QAA2BR,EAAM,QAAA,IAA2B;oBAIpFhB,EAAA,GAAAC,EAWM,OAAA;GAVJ,OAAM;GACN,MAAK;GACJ,cAAYC,EAAAgB,CAAA;GACZ,OAAKf,EAAEwB,EAAA,KAAS;GAChB,aAAWC,EAAA;EAEZ5B,GAAAA,EAAAA,EAAA,GAAAI,EAAkCC,EAAlBqB,CAAc,CAAA,IAClBD,EAAA,QAAa,IAAzBnB,EAEO8B,EAAA,QAAA,YAAA,EAFyC,OAAOX,EAAA,MAAa,SAE7D,CADLlB,EAAuCC,GAAA,MAAA;GAA9B,SAAAC,QAAC,CAADC,EAAA,MAACC,EAAGc,EAAA,KAAa,GAAA,CAAA,CAAA,CAAA"}

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

@@ -2,7 +2,6 @@ import { InjectionKey } from 'vue';
 import { AvatarSize } from './VAvatar.js';
 export interface AvatarGroupContext {
     size?: AvatarSize;
-    compact?: boolean;
 }
 /** The size of an avatar that neither names one nor sits in a group that does. */
 export declare const AVATAR_DEFAULT_SIZE: AvatarSize;

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["avatarGroupKey"],"sources":["../../../src/components/VAvatar/context.ts"],"sourcesContent":["/**\n * Explicit avatar size overrides the group fallback. Compact is cumulative, so a compact group\n * cannot have an expanded child.\n */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { AvatarSize } from './VAvatar.vue'\n\nexport interface AvatarGroupContext {\n  size?: AvatarSize\n  compact?: boolean\n}\n\n/** The size of an avatar that neither names one nor sits in a group that does. */\nexport const AVATAR_DEFAULT_SIZE: AvatarSize = 'md'\n\nexport const avatarGroupKey: InjectionKey<AvatarGroupContext> = Symbol('v-avatar-group')\n"],"mappings":";AAiBA,IAAaA,IAAmD,OAAO,gBAAgB"}
+{"version":3,"file":"context.js","names":["avatarGroupKey"],"sources":["../../../src/components/VAvatar/context.ts"],"sourcesContent":["/** Explicit avatar size overrides the group fallback. */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { AvatarSize } from './VAvatar.vue'\n\nexport interface AvatarGroupContext {\n  size?: AvatarSize\n}\n\n/** The size of an avatar that neither names one nor sits in a group that does. */\nexport const AVATAR_DEFAULT_SIZE: AvatarSize = 'md'\n\nexport const avatarGroupKey: InjectionKey<AvatarGroupContext> = Symbol('v-avatar-group')\n"],"mappings":";AAaA,IAAaA,IAAmD,OAAO,gBAAgB"}

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

@@ -29,11 +29,6 @@ interface ButtonProps {
      * Inside a VButtonGroup the group's own size wins over this one.
      */
     size?: ButtonSize;
-    /**
-     * Takes 4px off the height, leaving the padding, the text and the icons as they
-     * are. Inside a VButtonGroup the group's own value wins over this one.
-     */
-    compact?: boolean;
     /**
      * Stretches the button to the whole inline size of its parent, instead of leaving it only as
      * wide as its content.
@@ -85,7 +80,6 @@ declare const __VLS_base: import('vue').DefineComponent<ButtonProps, {}, {}, {},
     type: "button" | "reset" | "submit";
     variant: ButtonVariant;
     tone: ButtonTone;
-    compact: boolean;
     href: string;
     iconStart: IconSource;
     iconEnd: IconSource;