vectis-ui 0.14.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":[],"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":[],"sources":["../../../src/components/VAccordion/VAccordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Native details elements own disclosure and exclusive groups; multiple removes the shared\n * group name.\n */\n\nimport { provide, useId } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\n\nimport { accordionKey } from './context'\n\n/** How the group is set off from the page: nothing, a border, a shadow, or a muted fill. */\nexport type AccordionVariant = 'flat' | 'outline' | 'elevated' | 'filled'\n\ninterface AccordionProps {\n  /**\n   * Lets the reader keep several sections open at once. Left out, only one may stay\n   * open and opening one closes the previous one, which the browser does on its own\n   * once every item shares the same `<details>` name.\n   */\n  multiple?: boolean\n  /**\n   * How the group is set off from the page. `flat`, the default, draws nothing and lets\n   * the accordion sit directly on the surface behind it. The other three frame it with\n   * rounded corners, like a card: a border on the page surface (`outline`), a shadow over\n   * a raised surface (`elevated`), or a muted fill with no border (`filled`).\n   */\n  variant?: AccordionVariant\n  /**\n   * The icon shown on a closed item: an icon name, or an explicit `{ src }` /\n   * `{ component }`. It is a chevron by default, which rotates by 180° when the\n   * item opens.\n   */\n  expandIcon?: IconSource\n  /**\n   * The icon shown on an open item. Leave it out and the `expandIcon` is simply\n   * rotated 180°; provide one and the two icons are swapped instead.\n   */\n  collapseIcon?: IconSource\n  /**\n   * Reduced density: every padding loses 4px, while the text and the icons keep\n   * their size.\n   */\n  compact?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionProps>(), {\n  multiple: false,\n  variant: 'flat',\n  expandIcon: () => expandMoreIcon,\n  collapseIcon: undefined,\n  compact: false,\n})\n\ndefineSlots<{\n  /** The `<VAccordionItem>`s that make up the group. */\n  default(): unknown\n}>()\n\nconst groupName = useId()\nprovide(accordionKey, {\n  get name() {\n    return props.multiple ? undefined : groupName\n  },\n  get expandIcon() {\n    return props.expandIcon\n  },\n  get collapseIcon() {\n    return props.collapseIcon\n  },\n})\n</script>\n\n<template>\n  <div class=\"v-accordion\" :data-variant=\"variant\" :data-compact=\"compact ? '' : undefined\">\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion {\n    --accordion-pad-delta: 0px;\n    --accordion-pad-block: calc(var(--vectis-space-4) - var(--accordion-pad-delta));\n    --accordion-pad-inline: calc(var(--vectis-space-5) - var(--accordion-pad-delta));\n    --accordion-content-pad-start: calc(var(--vectis-space-2) - var(--accordion-pad-delta));\n\n    font-family: var(--vectis-text-family);\n  }\n\n  /* Read by the first and last rows to round their hover. Without a frame there is no clip,\n     so the rows carry the whole radius. */\n  .v-accordion[data-variant='flat'] {\n    --accordion-corner-radius: var(--vectis-radius-surface);\n  }\n\n  .v-accordion[data-compact] {\n    --accordion-pad-delta: var(--vectis-space-1);\n  }\n\n  .v-accordion:is([data-variant='outline'], [data-variant='elevated'], [data-variant='filled']) {\n    --accordion-corner-radius: calc(var(--vectis-radius-surface) - 1px);\n\n    /* Transparent rather than absent on `filled`: forced colours paint it. `elevated` has\n       none, so that the separators and the hover reach the edge its shadow draws. */\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-surface);\n    /* The clip is what keeps the first and last rows' hover inside the rounded corners, so\n       it belongs to the variants that HAVE corners. `clip` and not `hidden`: `hidden` makes\n       the box a scroll container, which captures every `position: sticky` in the content\n       and pins it to the accordion instead of the page. */\n    overflow: clip;\n  }\n\n  .v-accordion[data-variant='outline'] {\n    background: var(--vectis-color-surface);\n    border-color: var(--vectis-color-border);\n  }\n\n  .v-accordion[data-variant='elevated'] {\n    --accordion-corner-radius: var(--vectis-radius-surface);\n\n    border: none;\n    background: var(--vectis-color-surface-raised);\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  /* The usual hover is the muted surface itself, which would vanish on this fill. */\n  .v-accordion[data-variant='filled'] {\n    --accordion-hover-bg: color-mix(\n      in oklab,\n      var(--vectis-color-surface-muted),\n      var(--vectis-color-text) 4%\n    );\n\n    background: var(--vectis-color-surface-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAgDA,IAAM,IAAQ,GAaR,IAAY,EAAM;SACxB,EAAQ,GAAc;GACpB,IAAI,OAAO;IACT,OAAO,EAAM,WAAW,KAAA,IAAY;GACtC;GACA,IAAI,aAAa;IACf,OAAO,EAAM;GACf;GACA,IAAI,eAAe;IACjB,OAAO,EAAM;GACf;EACF,CAAC,mBAIC,EAEM,OAAA;GAFD,OAAM;GAAe,gBAAc,EAAA;GAAU,gBAAc,EAAA,UAAO,KAAQ,KAAA;MAC7E,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA"}
+{"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/VAccordionItem.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"VAccordionItem.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VAccordion/VAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Native details owns disclosure. useDetailsOpen bridges v-model and cancels activation of\n * disabled summaries.\n */\n\nimport { computed, inject, provide } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { accordionKey } from './context'\n\nimport { useDetailsOpen } from '../../composables/useDetailsOpen'\n\ninterface AccordionItemProps {\n  /**\n   * The heading of the section, the line that stays visible when it is closed. Use the `#title`\n   * slot instead when the heading needs markup rather than plain text.\n   */\n  title?: string\n  /**\n   * A secondary line under the title, for a short explanation or a status. The\n   * `#subtitle` slot replaces it when markup is needed.\n   */\n  subtitle?: string\n  /**\n   * An icon placed before the title: an icon name, or an explicit render (`{ src }`,\n   * `{ component }`…). The `#icon` slot replaces it.\n   */\n  icon?: IconSource\n  /** Renders the section already open. Bind `v-model:open` to drive it instead. */\n  defaultOpen?: boolean\n  /** Makes the section inert. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionItemProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  icon: undefined,\n  defaultOpen: false,\n  disabled: false,\n})\n\n// \"not bound\" is written as `null` and not `undefined`. A model typed as a plain boolean is\n// declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`, which would\n// silently overwrite `defaultOpen`.\n/**\n * Whether the section is open, when the consumer wants to drive or observe it. Left\n * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial\n * value. `null` means unbound.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\ndefineSlots<{\n  /** The content revealed when the section is open. */\n  default(): unknown\n  /** A title made of markup, which replaces the `title` prop. */\n  title?(): unknown\n  /** A subtitle made of markup, which replaces the `subtitle` prop. */\n  subtitle?(): unknown\n  /** Free content before the title, which takes the place of `icon`. */\n  icon?(): unknown\n}>()\n\nconst accordion = inject(accordionKey, null)\n// The group stops here: an item nested in this one's content without a VAccordion of its\n// own would otherwise share this group's name, and the browser closes every other member\n// of a name group when one opens, the section holding it included.\nprovide(accordionKey, null)\n\n/**\n * Both icons are chosen on the enclosing group. The chevron fallback is what keeps\n * an item rendering correctly when it is used outside a VAccordion.\n */\nconst expandIcon = computed(() => accordion?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => accordion?.collapseIcon)\n\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item v-disclosure\"\n    :name=\"accordion?.name\"\n    :open=\"openAttr\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"icon\">\n        <VIcon v-if=\"icon\" class=\"v-accordion-icon\" v-bind=\"iconProps(icon)\" />\n      </slot>\n      <span class=\"v-accordion-heading\">\n        <span class=\"v-accordion-title\"\n          ><slot name=\"title\">{{ title }}</slot></span\n        >\n        <VTypography\n          v-if=\"subtitle !== undefined || $slots.subtitle\"\n          as=\"span\"\n          variant=\"caption\"\n          tone=\"muted\"\n          class=\"v-accordion-subtitle\"\n          ><slot name=\"subtitle\">{{ subtitle }}</slot></VTypography\n        >\n      </span>\n      <VIcon class=\"v-accordion-chevron v-disclosure-chevron\" v-bind=\"iconProps(expandIcon)\" />\n      <VIcon\n        v-if=\"collapseIcon\"\n        class=\"v-accordion-chevron v-accordion-chevron-open v-disclosure-chevron v-disclosure-chevron-open\"\n        v-bind=\"iconProps(collapseIcon)\"\n      />\n    </summary>\n    <div class=\"v-accordion-content\">\n      <slot />\n    </div>\n  </details>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion-item + .v-accordion-item {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-accordion-summary {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--accordion-pad-block, var(--vectis-space-4))\n      var(--accordion-pad-inline, var(--vectis-space-5));\n    cursor: pointer;\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    color: var(--vectis-color-text);\n  }\n\n  .v-accordion-summary:hover:not([data-disabled]) {\n    background: var(--accordion-hover-bg, var(--vectis-color-surface-muted));\n  }\n\n  .v-accordion-summary:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-accordion-item:first-child > .v-accordion-summary {\n    border-start-start-radius: var(--accordion-corner-radius, 0);\n    border-start-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-item:last-child:not([open]) > .v-accordion-summary {\n    border-end-start-radius: var(--accordion-corner-radius, 0);\n    border-end-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-heading {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* A disabled item greys out through the colour tokens and never through\n     `opacity`, the rule every control in the DS follows. */\n  .v-accordion-summary[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icon and the subtitle default to text-muted, which is DARKER than the\n     text-subtle a disabled title takes: left to themselves they would come out\n     stronger than the label they belong to, so they inherit it instead. The chevron\n     gets the same treatment from `styles/disclosure.css`. */\n  .v-accordion-summary[data-disabled] .v-accordion-icon,\n  .v-accordion-summary[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  .v-accordion-content {\n    padding: var(--accordion-content-pad-start, var(--vectis-space-2))\n      var(--accordion-pad-inline, var(--vectis-space-5))\n      var(--accordion-pad-block, var(--vectis-space-4));\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The disclosure animation, the chevron's rotation or swap and the WebKit marker come\n     from `styles/disclosure.css`, reduced-motion block included. */\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCA,IAAM,IAAQ,GAgBR,IAAO,EAA2B,GAAC,MAAyB,GAa5D,IAAY,EAAO,GAAc,IAAI;EAI3C,EAAQ,GAAc,IAAI;EAM1B,IAAM,IAAa,QAAe,GAAW,cAAc,CAAc,GACnE,IAAe,QAAe,GAAW,YAAY,GAErD,EAAE,aAAU,aAAU,sBAAmB,EAAe,GAAM;GAClE,mBAAmB,EAAM;GACzB,gBAAgB,EAAM;EACxB,CAAC;yBAIC,EAwCU,WAAA;GAvCR,OAAM;GACL,MAAM,EAAA,CAAA,CAAS,EAAE;GACjB,MAAM,EAAA,CAAA;GACN,aAAW,EAAA,QAAY,KAAQ,KAAA;GAC/B,UAAM,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;MAET,EA6BU,WAAA;GA5BR,OAAM;GACL,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,iBAAe,EAAA,YAAY,KAAA;GAC3B,UAAU,EAAA,WAAQ,KAAQ,KAAA;GAC1B,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;;GAER,EAEO,EAAA,QAAA,QAAA,CAAA,SAAA,CADQ,EAAA,QAAA,EAAA,GAAb,EAAuE,GAAvE,EAAuE;;IAApD,OAAM;MAA2B,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;GAEpE,EAYO,QAZP,GAYO,CAXL,EAEC,QAFD,GAEC,CADE,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGtB,EAAA,aAAa,KAAA,KAAaA,EAAAA,OAAO,YAAA,EAAA,GADzC,EAOC,GAAA;;IALC,IAAG;IACH,SAAQ;IACR,MAAK;IACL,OAAM;;qBACsC,CAA3C,EAA2C,EAAA,QAAA,YAAA,CAAA,SAAA,CAAA,EAAA,EAAlB,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAGtC,EAAyF,GAAzF,EAAyF,EAAlF,OAAM,2CAA0C,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,KAAU,CAAA,GAAA,MAAA,EAAA;GAE5E,EAAA,SAAA,EAAA,GADR,EAIE,GAJF,EAIE;;IAFA,OAAM;MACE,EAAA,CAAA,CAAS,CAAC,EAAA,KAAY,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;YAGlC,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VAccordionItem.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","expandMoreIcon","_openBlock","_createElementBlock","_unref","_createElementVNode","_renderSlot","_createBlock","VIcon","_mergeProps","_createCommentVNode","_createTextVNode","_toDisplayString","VTypography","_withCtx","_createVNode","VIcon_default","VTypography_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","VAccordionItem_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","props","__props","open","useModel","accordion","inject","accordionKey","expandIcon","computed","expand_more","collapseIcon","useDetailsOpen","openBlock","createElementBlock","unref","openAttr","_cache","args","onToggle","createElementVNode","onSummaryClick","renderSlot","_ctx","createBlock","mergeProps","iconProps","createCommentVNode","createTextVNode","toDisplayString","withCtx","createVNode"],"sources":["../../../src/components/VAccordion/VAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Native details owns disclosure. useDetailsOpen bridges v-model and cancels activation of\n * disabled summaries.\n */\n\nimport { computed, inject, provide } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { accordionKey } from './context'\n\nimport { useDetailsOpen } from '../../composables/useDetailsOpen'\n\ninterface AccordionItemProps {\n  /**\n   * The heading of the section, the line that stays visible when it is closed. Use the `#title`\n   * slot instead when the heading needs markup rather than plain text.\n   */\n  title?: string\n  /**\n   * A secondary line under the title, for a short explanation or a status. The\n   * `#subtitle` slot replaces it when markup is needed.\n   */\n  subtitle?: string\n  /**\n   * An icon placed before the title: an icon name, or an explicit render (`{ src }`,\n   * `{ component }`…). The `#icon` slot replaces it.\n   */\n  icon?: IconSource\n  /** Renders the section already open. Bind `v-model:open` to drive it instead. */\n  defaultOpen?: boolean\n  /** Makes the section inert. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionItemProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  icon: undefined,\n  defaultOpen: false,\n  disabled: false,\n})\n\n// \"not bound\" is written as `null` and not `undefined`. A model typed as a plain boolean is\n// declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`, which would\n// silently overwrite `defaultOpen`.\n/**\n * Whether the section is open, when the consumer wants to drive or observe it. Left\n * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial\n * value. `null` means unbound.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\ndefineSlots<{\n  /** The content revealed when the section is open. */\n  default(): unknown\n  /** A title made of markup, which replaces the `title` prop. */\n  title?(): unknown\n  /** A subtitle made of markup, which replaces the `subtitle` prop. */\n  subtitle?(): unknown\n  /** Free content before the title, which takes the place of `icon`. */\n  icon?(): unknown\n}>()\n\nconst accordion = inject(accordionKey, null)\n// The group stops here: an item nested in this one's content without a VAccordion of its\n// own would otherwise share this group's name, and the browser closes every other member\n// of a name group when one opens, the section holding it included.\nprovide(accordionKey, null)\n\n/**\n * Both icons are chosen on the enclosing group. The chevron fallback is what keeps\n * an item rendering correctly when it is used outside a VAccordion.\n */\nconst expandIcon = computed(() => accordion?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => accordion?.collapseIcon)\n\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item v-disclosure\"\n    :name=\"accordion?.name\"\n    :open=\"openAttr\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"icon\">\n        <VIcon v-if=\"icon\" class=\"v-accordion-icon\" v-bind=\"iconProps(icon)\" />\n      </slot>\n      <span class=\"v-accordion-heading\">\n        <span class=\"v-accordion-title\"\n          ><slot name=\"title\">{{ title }}</slot></span\n        >\n        <VTypography\n          v-if=\"subtitle !== undefined || $slots.subtitle\"\n          as=\"span\"\n          variant=\"caption\"\n          tone=\"muted\"\n          class=\"v-accordion-subtitle\"\n          ><slot name=\"subtitle\">{{ subtitle }}</slot></VTypography\n        >\n      </span>\n      <VIcon class=\"v-accordion-chevron v-disclosure-chevron\" v-bind=\"iconProps(expandIcon)\" />\n      <VIcon\n        v-if=\"collapseIcon\"\n        class=\"v-accordion-chevron v-accordion-chevron-open v-disclosure-chevron v-disclosure-chevron-open\"\n        v-bind=\"iconProps(collapseIcon)\"\n      />\n    </summary>\n    <div class=\"v-accordion-content\">\n      <slot />\n    </div>\n  </details>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion-item + .v-accordion-item {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-accordion-summary {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--accordion-pad-block, var(--vectis-space-4))\n      var(--accordion-pad-inline, var(--vectis-space-5));\n    cursor: pointer;\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    color: var(--vectis-color-text);\n  }\n\n  .v-accordion-summary:hover:not([data-disabled]) {\n    background: var(--accordion-hover-bg, var(--vectis-color-surface-muted));\n  }\n\n  .v-accordion-summary:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-accordion-item:first-child > .v-accordion-summary {\n    border-start-start-radius: var(--accordion-corner-radius, 0);\n    border-start-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-item:last-child:not([open]) > .v-accordion-summary {\n    border-end-start-radius: var(--accordion-corner-radius, 0);\n    border-end-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-heading {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* A disabled item greys out through the colour tokens and never through\n     `opacity`, the rule every control in the DS follows. */\n  .v-accordion-summary[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icon and the subtitle default to text-muted, which is DARKER than the\n     text-subtle a disabled title takes: left to themselves they would come out\n     stronger than the label they belong to, so they inherit it instead. The chevron\n     gets the same treatment from `styles/disclosure.css`. */\n  .v-accordion-summary[data-disabled] .v-accordion-icon,\n  .v-accordion-summary[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  .v-accordion-content {\n    padding: var(--accordion-content-pad-start, var(--vectis-space-2))\n      var(--accordion-pad-inline, var(--vectis-space-5))\n      var(--accordion-pad-block, var(--vectis-space-4));\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The disclosure animation, the chevron's rotation or swap and the WebKit marker come\n     from `styles/disclosure.css`, reduced-motion block included. */\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCA,IAAM2B,IAAQC,GAgBRC,IAAO5B,EAA2B2B,GAAC,MAAyB,GAa5DG,IAAYC,EAAOC,GAAc,IAAI;EAI3C,EAAQA,GAAc,IAAI;EAM1B,IAAMC,IAAaC,QAAeJ,GAAW,cAAc7B,CAAc,GACnEmC,IAAeF,QAAeJ,GAAW,YAAY,GAErD,EAAE,aAAU,aAAU,sBAAmBO,EAAeT,GAAM;GAClE,mBAAmBF,EAAM;GACzB,gBAAgBA,EAAM;EACxB,CAAC;oBAICxB,EAAA,GAAAC,EAwCU,WAAA;GAvCR,OAAM;GACL,MAAMC,EAAA0B,CAAA,CAAS,EAAE;GACjB,MAAM1B,EAAAqC,CAAA;GACN,aAAWL,EAAA,QAAY,KAAQ,KAAA;GAC/B,UAAM,AAAAM,EAAA,QAAE,GAAAC,MAAAvC,EAAAwC,CAAA,KAAAxC,EAAAwC,CAAA,CAAA,CAAA,GAAAD,CAAA;EAETtC,GAAAA,CAAAA,EA6BU,WAAA;GA5BR,OAAM;GACL,iBAAesB,EAAA,WAAQ,KAAQ,KAAA;GAC/B,iBAAeA,EAAA,YAAY,KAAA;GAC3B,UAAUA,EAAA,WAAQ,KAAQ,KAAA;GAC1B,SAAK,AAAAe,EAAA,QAAE,GAAAC,MAAAvC,EAAA0C,CAAA,KAAA1C,EAAA0C,CAAA,CAAA,CAAA,GAAAH,CAAA;;GAERrC,EAEO0C,EAAA,QAAA,QAAA,CAAA,SAAA,CADQrB,EAAA,QAAbzB,EAAA,GAAAK,EAAuEC,GAAvEC,EAAuE;;IAApD,OAAM;GAA2B,GAAAL,EAAA+C,CAAA,CAAS,CAACxB,EAAA,IAAI,CAAA,GAAA,MAAA,EAAA,KAAAyB,EAAA,IAAA,EAAA,CAAA,CAAA;GAEpE/C,EAYO,QAZPe,GAYO,CAXLf,EAEC,QAFDgB,GAEC,CADEf,EAAqC0C,EAAA,QAAA,SAAA,CAAA,SAAA,CAAfrC,EAAAC,EAAAe,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGtBA,EAAA,aAAa,KAAA,KAAa5B,EAAAA,OAAO,YADzCG,EAAA,GAAAK,EAOCM,GAAA;;IALC,IAAG;IACH,SAAQ;IACR,MAAK;IACL,OAAM;;IACL,SAAAC,QAA2C,CAA3CR,EAA2C0C,EAAA,QAAA,YAAA,CAAA,SAAA,CAAlBrC,EAAAC,EAAAe,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAGtCZ,EAAyFP,GAAzFC,EAAyF,EAAlF,OAAM,2CAA0C,GAASL,EAAA+C,CAAA,CAAS,CAAClB,EAAA,KAAU,CAAA,GAAA,MAAA,EAAA;GAE5EG,EAAA,SADRlC,EAAA,GAAAK,EAIEC,GAJFC,EAIE;;IAFA,OAAM;GACE,GAAAL,EAAA+C,CAAA,CAAS,CAACf,EAAA,KAAY,CAAA,GAAA,MAAA,EAAA,KAAAgB,EAAA,IAAA,EAAA;EAGlC/C,GAAAA,GAAAA,CAAAA,GAAAA,EAEM,OAFNiB,GAEM,CADJhB,EAAQ0C,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,IAAA9B,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"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,IAAa,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/VAlert/VAlert.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"VAlert.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VAlert/VAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A message that stays in the flow of the page. It carries no live role unless asked: a page\n * that renders alerts on load would otherwise have them all read out at once.\n */\n\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check_circle as checkCircleIcon } from '../VIcon/icons/check_circle'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport { error as errorIcon } from '../VIcon/icons/error'\nimport { info as infoIcon } from '../VIcon/icons/info'\nimport { warning as warningIcon } from '../VIcon/icons/warning'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport { useMessages } from '../../i18n/state'\n\n/** How the alert is painted: a tinted surface, or the page surface inside a tinted border. */\nexport type AlertVariant = 'soft' | 'outline'\n/** What the alert means, in colour. */\nexport type AlertTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\ninterface AlertProps {\n  /**\n   * How the alert is painted: a surface tinted with the tone (`soft`, the default), or the page\n   * surface inside a border of the tone (`outline`), for an alert that should weigh less.\n   */\n  variant?: AlertVariant\n  /** What the alert means, expressed as a colour. It also picks the default icon. */\n  tone?: AlertTone\n  /** A short line above the message, in bold. The `#title` slot replaces it. */\n  title?: string\n  /**\n   * The icon before the text: an icon name, or an explicit render (the VIcon contract). Left\n   * out, the tone brings its own.\n   */\n  icon?: IconSource\n  /** Draws no icon at all, neither the one given nor the tone's. */\n  hideIcon?: boolean\n  /** Adds a close cross, which sets `open` to false and emits `close`. */\n  closable?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n  /**\n   * Makes the alert a live region, for a message that appears in answer to what the reader\n   * did: `role=\"alert\"` for the `danger` tone, which interrupts, `role=\"status\"` otherwise.\n   */\n  live?: boolean\n}\n\nconst props = withDefaults(defineProps<AlertProps>(), {\n  variant: 'soft',\n  tone: 'accent',\n  title: undefined,\n  icon: undefined,\n  hideIcon: false,\n  closable: false,\n  closeLabel: undefined,\n  live: false,\n})\n\n/**\n * Whether the alert is shown. It is true by default, unlike other boolean props: an alert is\n * there until something takes it away, and binding the model is only needed to bring it back.\n */\nconst open = defineModel<boolean>('open', { default: true })\n\nconst emit = defineEmits<{\n  /** The reader closed the alert with its cross. `open` has already turned false. */\n  close: []\n}>()\n\ndefineSlots<{\n  /** The message. */\n  default?(): unknown\n  /** Replaces the `title` prop with content of your own. */\n  title?(): unknown\n  /** Buttons or links under the message. */\n  actions?(): unknown\n}>()\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\nconst DEFAULT_ICONS: Record<AlertTone, IconSource> = {\n  neutral: infoIcon,\n  accent: infoIcon,\n  success: checkCircleIcon,\n  danger: errorIcon,\n  warning: warningIcon,\n}\n\nconst resolvedIcon = computed(() =>\n  props.hideIcon ? undefined : iconProps(props.icon ?? DEFAULT_ICONS[props.tone]),\n)\n\nconst role = computed(() =>\n  props.live ? (props.tone === 'danger' ? 'alert' : 'status') : undefined,\n)\n\nfunction close() {\n  open.value = false\n  emit('close')\n}\n</script>\n\n<template>\n  <div v-if=\"open\" :role=\"role\" class=\"v-alert v-tone\" :data-variant=\"variant\" :data-tone=\"tone\">\n    <VIcon v-if=\"resolvedIcon\" class=\"v-alert-icon\" v-bind=\"resolvedIcon\" />\n    <div class=\"v-alert-body\">\n      <p v-if=\"$slots.title || title\" class=\"v-alert-title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </p>\n      <div v-if=\"$slots.default\" class=\"v-alert-message\">\n        <slot />\n      </div>\n      <div v-if=\"$slots.actions\" class=\"v-alert-actions\">\n        <slot name=\"actions\" />\n      </div>\n    </div>\n    <VIconButton\n      v-if=\"closable\"\n      class=\"v-alert-close\"\n      :label=\"resolvedCloseLabel\"\n      size=\"sm\"\n      @click=\"close\"\n    >\n      <VIcon :name=\"closeIcon\" />\n    </VIconButton>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The colours come from the shared tone table (styles/tones.css, `.v-tone`), read here rather\n   * than through `.v-variant`: the alert paints its own border and keeps the message in the body\n   * text colour, which no shared variant does.\n   */\n  .v-alert {\n    /* The height of one line of text, which the icon and the cross are centred against. */\n    --alert-line: calc(var(--vectis-text-body-md-size) * var(--vectis-text-body-md-leading));\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-4);\n    border: 1px solid var(--tone-border-soft);\n    border-radius: var(--vectis-radius-surface);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-alert[data-variant='soft'] {\n    background: var(--tone-bg-soft);\n  }\n\n  .v-alert[data-variant='outline'] {\n    background: var(--vectis-color-surface);\n  }\n\n  .v-alert-icon {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    flex: none;\n    margin-block: calc((var(--alert-line) - var(--vectis-icon-size-md)) / 2);\n    color: var(--tone-text-tinted);\n  }\n\n  /* Long unbroken text, a URL in an error message, wraps instead of widening the alert. */\n  .v-alert-body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .v-alert-title {\n    color: var(--tone-text-tinted);\n    /*\n     * The heavier weight marks the title against its own message, which is emphasis rather than\n     * a typographic role; hence a font token read directly.\n     */\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  .v-alert-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-2);\n    margin-block-start: var(--vectis-space-2);\n  }\n\n  /*\n   * The cross keeps the height of a small control but is centred on the first line, and gives\n   * back its own padding so it does not double the alert's gutter.\n   */\n  .v-alert-close {\n    flex: none;\n    margin-block: calc((var(--alert-line) - var(--vectis-control-height-sm)) / 2);\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  /*\n   * A neutral ghost hovers in grey, which turns muddy on a tinted surface: the cross hovers in a\n   * tint of the alert's own tone instead. The tone table sits in a lower layer, so this rebind\n   * wins whatever the specificity of the button's `[data-tone]` row.\n   */\n  .v-alert .v-alert-close[data-tone] {\n    --tone-text-tinted: var(--vectis-color-text-muted);\n    --tone-bg-soft: color-mix(in oklab, currentcolor, transparent 88%);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAM,IAAQ,GAeR,IAAO,EAAoB,GAAC,MAAyB,GAErD,IAAO,GAcP,IAAI,EAAY,GAChB,IAAqB,QAAe,EAAM,cAAc,EAAE,MAAM,OAAO,KAAK,GAE5E,IAA+C;GACnD,SAAS;GACT,QAAQ;GACR,SAAS;GACT,QAAQ;GACC;EACX,GAEM,IAAe,QACnB,EAAM,WAAW,KAAA,IAAY,EAAU,EAAM,QAAQ,EAAc,EAAM,KAAK,CAChF,GAEM,IAAO,QACX,EAAM,OAAQ,EAAM,SAAS,WAAW,UAAU,WAAY,KAAA,CAChE;EAEA,SAAS,IAAQ;GAEf,AADA,EAAK,QAAQ,IACb,EAAK,OAAO;EACd;mBAIa,EAAA,SAAA,EAAA,GAAX,EAsBM,OAAA;;GAtBY,MAAM,EAAA;GAAM,OAAM;GAAkB,gBAAc,EAAA;GAAU,aAAW,EAAA;;GAC1E,EAAA,SAAA,EAAA,GAAb,EAAwE,GAAxE,EAAwE;;IAA7C,OAAM;MAAuB,EAAA,KAAY,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;GACpE,EAUM,OAVN,GAUM;IATKA,EAAAA,OAAO,SAAS,EAAA,SAAA,EAAA,GAAzB,EAEI,KAFJ,GAEI,CADF,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAElBA,EAAAA,OAAO,WAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAECA,EAAAA,OAAO,WAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAuB,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;GAInB,EAAA,YAAA,EAAA,GADR,EAQc,GAAA;;IANZ,OAAM;IACL,OAAO,EAAA;IACR,MAAK;IACJ,SAAO;;qBAEmB,CAA3B,EAA2B,GAAA,EAAnB,MAAM,EAAA,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"VAlert.vue_vue_type_script_setup_true_lang.js","names":["$slots","_useModel","infoIcon","checkCircleIcon","errorIcon","warningIcon","close","_openBlock","_createElementBlock","_createBlock","VIcon","_mergeProps","_createCommentVNode","_createElementVNode","_renderSlot","_createTextVNode","_toDisplayString","VIconButton","_withCtx","_createVNode","_unref","closeIcon","VIcon_default","VIconButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","VAlert_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","open","useModel","emit","m","useMessages","resolvedCloseLabel","computed","DEFAULT_ICONS","info","check_circle","error","resolvedIcon","iconProps","role","close$1","openBlock","createElementBlock","createBlock","mergeProps","createCommentVNode","createElementVNode","_ctx","renderSlot","createTextVNode","toDisplayString","withCtx","createVNode","unref","close"],"sources":["../../../src/components/VAlert/VAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * A message that stays in the flow of the page. It carries no live role unless asked: a page\n * that renders alerts on load would otherwise have them all read out at once.\n */\n\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { check_circle as checkCircleIcon } from '../VIcon/icons/check_circle'\nimport { close as closeIcon } from '../VIcon/icons/close'\nimport { error as errorIcon } from '../VIcon/icons/error'\nimport { info as infoIcon } from '../VIcon/icons/info'\nimport { warning as warningIcon } from '../VIcon/icons/warning'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport { useMessages } from '../../i18n/state'\n\n/** How the alert is painted: a tinted surface, or the page surface inside a tinted border. */\nexport type AlertVariant = 'soft' | 'outline'\n/** What the alert means, in colour. */\nexport type AlertTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n\ninterface AlertProps {\n  /**\n   * How the alert is painted: a surface tinted with the tone (`soft`, the default), or the page\n   * surface inside a border of the tone (`outline`), for an alert that should weigh less.\n   */\n  variant?: AlertVariant\n  /** What the alert means, expressed as a colour. It also picks the default icon. */\n  tone?: AlertTone\n  /** A short line above the message, in bold. The `#title` slot replaces it. */\n  title?: string\n  /**\n   * The icon before the text: an icon name, or an explicit render (the VIcon contract). Left\n   * out, the tone brings its own.\n   */\n  icon?: IconSource\n  /** Draws no icon at all, neither the one given nor the tone's. */\n  hideIcon?: boolean\n  /** Adds a close cross, which sets `open` to false and emits `close`. */\n  closable?: boolean\n  /** What the close cross does, in words. It falls back to the design system dictionary. */\n  closeLabel?: string\n  /**\n   * Makes the alert a live region, for a message that appears in answer to what the reader\n   * did: `role=\"alert\"` for the `danger` tone, which interrupts, `role=\"status\"` otherwise.\n   */\n  live?: boolean\n}\n\nconst props = withDefaults(defineProps<AlertProps>(), {\n  variant: 'soft',\n  tone: 'accent',\n  title: undefined,\n  icon: undefined,\n  hideIcon: false,\n  closable: false,\n  closeLabel: undefined,\n  live: false,\n})\n\n/**\n * Whether the alert is shown. It is true by default, unlike other boolean props: an alert is\n * there until something takes it away, and binding the model is only needed to bring it back.\n */\nconst open = defineModel<boolean>('open', { default: true })\n\nconst emit = defineEmits<{\n  /** The reader closed the alert with its cross. `open` has already turned false. */\n  close: []\n}>()\n\ndefineSlots<{\n  /** The message. */\n  default?(): unknown\n  /** Replaces the `title` prop with content of your own. */\n  title?(): unknown\n  /** Buttons or links under the message. */\n  actions?(): unknown\n}>()\n\nconst m = useMessages()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? m.value.common.close)\n\nconst DEFAULT_ICONS: Record<AlertTone, IconSource> = {\n  neutral: infoIcon,\n  accent: infoIcon,\n  success: checkCircleIcon,\n  danger: errorIcon,\n  warning: warningIcon,\n}\n\nconst resolvedIcon = computed(() =>\n  props.hideIcon ? undefined : iconProps(props.icon ?? DEFAULT_ICONS[props.tone]),\n)\n\nconst role = computed(() =>\n  props.live ? (props.tone === 'danger' ? 'alert' : 'status') : undefined,\n)\n\nfunction close() {\n  open.value = false\n  emit('close')\n}\n</script>\n\n<template>\n  <div v-if=\"open\" :role=\"role\" class=\"v-alert v-tone\" :data-variant=\"variant\" :data-tone=\"tone\">\n    <VIcon v-if=\"resolvedIcon\" class=\"v-alert-icon\" v-bind=\"resolvedIcon\" />\n    <div class=\"v-alert-body\">\n      <p v-if=\"$slots.title || title\" class=\"v-alert-title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </p>\n      <div v-if=\"$slots.default\" class=\"v-alert-message\">\n        <slot />\n      </div>\n      <div v-if=\"$slots.actions\" class=\"v-alert-actions\">\n        <slot name=\"actions\" />\n      </div>\n    </div>\n    <VIconButton\n      v-if=\"closable\"\n      class=\"v-alert-close\"\n      :label=\"resolvedCloseLabel\"\n      size=\"sm\"\n      @click=\"close\"\n    >\n      <VIcon :name=\"closeIcon\" />\n    </VIconButton>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The colours come from the shared tone table (styles/tones.css, `.v-tone`), read here rather\n   * than through `.v-variant`: the alert paints its own border and keeps the message in the body\n   * text colour, which no shared variant does.\n   */\n  .v-alert {\n    /* The height of one line of text, which the icon and the cross are centred against. */\n    --alert-line: calc(var(--vectis-text-body-md-size) * var(--vectis-text-body-md-leading));\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--vectis-space-3);\n    padding: var(--vectis-space-3) var(--vectis-space-4);\n    border: 1px solid var(--tone-border-soft);\n    border-radius: var(--vectis-radius-surface);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n  }\n\n  .v-alert[data-variant='soft'] {\n    background: var(--tone-bg-soft);\n  }\n\n  .v-alert[data-variant='outline'] {\n    background: var(--vectis-color-surface);\n  }\n\n  .v-alert-icon {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    flex: none;\n    margin-block: calc((var(--alert-line) - var(--vectis-icon-size-md)) / 2);\n    color: var(--tone-text-tinted);\n  }\n\n  /* Long unbroken text, a URL in an error message, wraps instead of widening the alert. */\n  .v-alert-body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n    min-inline-size: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .v-alert-title {\n    color: var(--tone-text-tinted);\n    /*\n     * The heavier weight marks the title against its own message, which is emphasis rather than\n     * a typographic role; hence a font token read directly.\n     */\n    font-weight: var(--vectis-font-weight-semibold);\n  }\n\n  .v-alert-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-2);\n    margin-block-start: var(--vectis-space-2);\n  }\n\n  /*\n   * The cross keeps the height of a small control but is centred on the first line, and gives\n   * back its own padding so it does not double the alert's gutter.\n   */\n  .v-alert-close {\n    flex: none;\n    margin-block: calc((var(--alert-line) - var(--vectis-control-height-sm)) / 2);\n    margin-inline-end: calc(-1 * var(--vectis-space-2));\n  }\n\n  /*\n   * A neutral ghost hovers in grey, which turns muddy on a tinted surface: the cross hovers in a\n   * tint of the alert's own tone instead. The tone table sits in a lower layer, so this rebind\n   * wins whatever the specificity of the button's `[data-tone]` row.\n   */\n  .v-alert .v-alert-close[data-tone] {\n    --tone-text-tinted: var(--vectis-color-text-muted);\n    --tone-bg-soft: color-mix(in oklab, currentcolor, transparent 88%);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAMiC,IAAQC,GAeRC,IAAOlC,EAAoBiC,GAAC,MAAyB,GAErDG,IAAOL,GAcPM,IAAIC,EAAY,GAChBC,IAAqBC,QAAeR,EAAM,cAAcK,EAAE,MAAM,OAAO,KAAK,GAE5EI,IAA+C;GACnD,SAASxC;GACT,QAAQA;GACR,SAASC;GACT,QAAQC;GACCC;EACX,GAEMyC,IAAeL,QACnBR,EAAM,WAAW,KAAA,IAAYc,EAAUd,EAAM,QAAQS,EAAcT,EAAM,KAAK,CAChF,GAEMe,IAAOP,QACXR,EAAM,OAAQA,EAAM,SAAS,WAAW,UAAU,WAAY,KAAA,CAChE;EAEA,SAAS3B,IAAQ;GAEf,AADA,EAAK,QAAQ,IACb+B,EAAK,OAAO;EACd;mBAIaF,EAAA,SAAX5B,EAAA,GAAAC,EAsBM,OAAA;;GAtBY,MAAMwC,EAAA;GAAM,OAAM;GAAkB,gBAAcd,EAAA;GAAU,aAAWA,EAAA;;GAC1EY,EAAA,SAAbvC,EAAA,GAAAE,EAAwEC,GAAxEC,EAAwE;;IAA7C,OAAM;GAAuB,GAAAmC,EAAA,KAAY,GAAA,MAAA,EAAA,KAAAQ,EAAA,IAAA,EAAA;GACpEzC,EAUM,OAVNY,GAUM;IATKzB,EAAAA,OAAO,SAASkC,EAAA,SAAzB3B,EAAA,GAAAC,EAEI,KAFJkB,GAEI,CADFZ,EAAqC0C,EAAA,QAAA,SAAA,CAAA,SAAA,CAAfzC,EAAAC,EAAAkB,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAAoB,EAAA,IAAA,EAAA;IAElBtD,EAAAA,OAAO,WAAlBO,EAAA,GAAAC,EAEM,OAFNmB,GAEM,CADJb,EAAQ0C,EAAA,QAAA,SAAA,CAAA,CAAA,KAAAF,EAAA,IAAA,EAAA;IAECtD,EAAAA,OAAO,WAAlBO,EAAA,GAAAC,EAEM,OAFNoB,GAEM,CADJd,EAAuB0C,EAAA,QAAA,SAAA,CAAA,CAAA,KAAAF,EAAA,IAAA,EAAA;;GAInBpB,EAAA,YADR3B,EAAA,GAAAE,EAQcQ,GAAA;;IANZ,OAAM;IACL,OAAOuB,EAAA;IACR,MAAK;IACJ,SAAOlC;;IAER,SAAAY,QAA2B,CAA3BC,EAA2BT,GAAA,EAAnB,MAAMU,EAAAC,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA"}

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":[],"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":[],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuEA,IAAM,IAAQ,GAoBR,IAAQ,EAAS,GACjB,IAAQ,EAAO,GAAgB,IAAI,GAInC,IAAe,QAA2B,EAAM,QAAQ,GAAO,QAAA,IAA2B,GAC1F,IAAkB,QAAe,EAAM,WAAW,EAAQ,GAAO,OAAQ,GAIzE,EACJ,WACA,gBACA,aACA,OAAO,MACL,EAAa;GACf,YAAY,EAAM;GAClB,aAAa,EAAM;GACnB,aAAa,OAAO,YAAY,OAAO,QAAQ,CAAK,CAAC,CAAC,QAAQ,CAAC,OAAS,MAAQ,OAAO,CAAC;EAC1F,CAAC,GAEK,IAAgB,QAAe,EAAO,SAAS,EAAM,SAAS,GAC9D,IAAM,QAAgB,EAAO,QAAQ,MAAM,EAAM,YAAY,WAAW,MAAO,GAI/E,IAAS,EAAI,EAAK;EACxB,QACQ,EAAM,WACN;GACJ,EAAO,QAAQ;EACjB,CACF;EACA,IAAM,IAAY,QAAe,EAAQ,EAAM,OAAQ,CAAC,EAAO,KAAK,GAO9D,IAAU,EAAiC,OAAO;EACxD,QAAgB;GACd,IAAM,IAAM,EAAQ;GACpB,AAAI,GAAK,YAAY,EAAI,iBAAiB,MAAG,EAAO,QAAQ;EAC9D,CAAC;EAQD,IAAM,IAAY,QAAoB,EAAU,QAAQ,KAAA,IAAa,EAAM,OAAO,EAAM,IAAM,GACxF,IAAQ,QAAe,EAAU,UAAU,KAAA,KAAa,EAAM,sBAAsB,IAAI,GAGxF,IAAW,QACV,EAAM,OAIJ,EAAM,KACV,MAAM,KAAK,CAAA,CACX,OAAO,OAAO,CAAA,CACd,MAAM,GAAG,CAAC,CAAA,CACV,KAAK,MAAS,CAAC,GAAG,CAAI,CAAC,CAAC,EAAE,EAAE,YAAY,KAAK,EAAE,CAAA,CAC/C,KAAK,EAAE,IATc,EAUzB,GAQK,IAAM,QAAe;GACzB,IAAI,CAAC,EAAM,MAAM,OAAO;GACxB,IAAI,IAAO;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,EAAM,KAAK,QAAQ,KACrC,IAAQ,IAAO,KAAK,EAAM,KAAK,WAAW,CAAC,IAAK;GAElD,OAAO,KAAK,IAAI,CAAI,IAAI;EAC1B,CAAC,GACK,IAAS,QAAe,EAAM,UAAU,KAAA,KAAa,EAAI,UAAU,IAAI,GAKvE,IAAO,QACX,CAAC,EAAc,SAAS,CAAC,EAAU,SAAS,EAAM,QAC9C,QACC,EAAY,MAAM,IACzB;EAKA,IAAI,GAAO;GACT,IAAM,IAAQ,EAAS;GACvB,QAAgB;IACd,AAAI,EAAc,SAAS,CAAC,EAAM,SAAS,CAAC,EAAM,OAAO,CAAC,EAAM,QAAQ,CAAC,EAAM,WAC7E,QAAQ,KACN,qGACF;GAEJ,CAAC;EACH;EAEA,IAAM,IAAY,QAA2B,CAC3C,EAAiB,EAAM,KAAK,MACzB,EAAO,QAAQ,EAAE,gBAAgB,OAAO,EAAI,KAAK,EAAE,IAAI,KAAA,IAC1D,EAAM,KACR,CAAC;yBAIC,EA4BY,EA3BL,EAAA,KAAG,GADV,EA4BY,EA1BT,iBAAe,EAAA,CAAA,IAAW,SAAY,KAAA,EAAA,GAC/B,EAAA,CAAA,GAAW;GACnB,OAAM;GACL,OAAO,EAAA;GACP,aAAW,EAAA;GACX,gBAAc,EAAA,QAAe,KAAQ,KAAA;GACrC,eAAa,EAAA,UAAU,KAAA,IAAiB,KAAA,IAAR;GAChC,aAAW,EAAA,QAAM,KAAQ,KAAA;GACzB,MAAM,EAAA,CAAA;GACN,MAAM,EAAA,UAAG,WAAA,WAA2B,KAAA;GACpC,UAAU,EAAA,UAAG,WAAgB,EAAA,WAAW,KAAA;GACxC,MAAM,EAAA;GACN,cAAY,EAAA,CAAA;;oBASX,CANM,EAAA,SAAA,EAAA,GADR,EAOE,OAAA;;IALA,KAAI;IACJ,OAAM;IACL,KAAK,EAAA;IACL,KAAK,EAAA,OAAO,EAAA,QAAI;IAChB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAM;sBAEE,EAAA,QAAA,EAAA,GAAlB,EAAyE,GAAzE,EAAyE,EAAA,KAAA,EAAA,GAAzC,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,GAAA,EAAG,OAAM,gBAAe,CAAA,GAAA,MAAA,EAAA,KACtE,EAEO,EAAA,QAAA,WAAA,CAAA,SAAA,CADL,EAAwE,QAAxE,GAAwE,EAAlB,EAAA,KAAQ,GAAA,CAAA,CAAA,GAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}
+{"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"}