vectis-ui 0.10.0 → 0.10.2

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

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

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

@@ -1,11 +1,8 @@
 import { IconSource } from '../VIcon/types.js';
 interface AccordionItemProps {
     /**
-     * The heading of the section, the line that stays visible when it is closed. Use
-     * the `#title` slot instead when the heading needs markup rather than plain text.
-     *
-     * Note that this prop shadows the HTML attribute of the same name on the component,
-     * so no tooltip can be set through it.
+     * The heading of the section, the line that stays visible when it is closed. Use the `#title`
+     * slot instead when the heading needs markup rather than plain text.
      */
     title?: string;
     /**
@@ -14,25 +11,13 @@ interface AccordionItemProps {
      */
     subtitle?: string;
     /**
-     * An icon placed before the title: an icon name, or an explicit render
-     * (`{ src }`, `{ component }`…). The `#icon` slot replaces it.
-     *
-     * It carries no side in its name because there is only one: the end of the row belongs
-     * to the chevron, so there is nothing for a start to be told apart from. That is the
-     * rule every single-icon component of the design system follows, and its slot is named
-     * `#icon` for the same reason.
+     * An icon placed before the title: an icon name, or an explicit render (`{ src }`,
+     * `{ component }`…). The `#icon` slot replaces it.
      */
     icon?: IconSource;
-    /**
-     * Renders the section already open. Only its initial value is read: the browser
-     * owns the state afterwards, so changing this prop later will not close a section
-     * the reader has opened. Bind `v-model:open` to drive it instead.
-     */
+    /** Renders the section already open. Bind `v-model:open` to drive it instead. */
     defaultOpen?: boolean;
-    /**
-     * Makes the section inert. It can no longer be opened, the keyboard skips over
-     * it, and it is greyed out through the colour tokens.
-     */
+    /** Makes the section inert. */
     disabled?: boolean;
 }
 type __VLS_Props = AccordionItemProps;

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 * One section of an accordion: a heading the reader can click, and the content it\n * reveals. It is a native `<details>`/`<summary>` pair, so the browser owns the\n * open and closed state, the keyboard and the accessibility semantics. The only JS\n * is the `v-model:open` bridge, fed by the element, and the click a disabled summary\n * has to cancel, both shared with VSideNavigationItem through `useDetailsOpen`.\n *\n * The opening is animated entirely in CSS, with `::details-content` and\n * `interpolate-size` (`styles/disclosure.css`). Both are recent additions to the\n * language: where they are missing the section simply appears at once, which is the\n * intended fallback.\n */\n\nimport { computed, inject, 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\n   * the `#title` slot instead when the heading needs markup rather than plain text.\n   *\n   * Note that this prop shadows the HTML attribute of the same name on the component,\n   * so no tooltip can be set through it.\n   */\n  title?: string\n  /**\n   * A secondary line under the title, for a short explanation or a status. The\n   * `#subtitle` slot replaces it when markup is needed.\n   */\n  subtitle?: string\n  /**\n   * An icon placed before the title: an icon name, or an explicit render\n   * (`{ src }`, `{ component }`…). The `#icon` slot replaces it.\n   *\n   * It carries no side in its name because there is only one: the end of the row belongs\n   * to the chevron, so there is nothing for a start to be told apart from. That is the\n   * rule every single-icon component of the design system follows, and its slot is named\n   * `#icon` for the same reason.\n   */\n  icon?: IconSource\n  /**\n   * Renders the section already open. Only its initial value is read: the browser\n   * owns the state afterwards, so changing this prop later will not close a section\n   * the reader has opened. Bind `v-model:open` to drive it instead.\n   */\n  defaultOpen?: boolean\n  /**\n   * Makes the section inert. It can no longer be opened, the keyboard skips over\n   * it, and it is greyed out through the colour tokens.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionItemProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  icon: undefined,\n  defaultOpen: false,\n  disabled: false,\n})\n\n// TRAP — \"not bound\" is written as `null` and not `undefined`. A model typed as a plain\n// boolean is declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`,\n// which would silently overwrite `defaultOpen`. The explicit default disarms that cast.\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      <!-- Both icons are always in the DOM; [open] decides which one shows, in CSS alone -->\n      <VIcon\n        v-if=\"collapseIcon\"\n        class=\"v-accordion-chevron v-accordion-chevron-open v-disclosure-chevron v-disclosure-chevron-open\"\n        v-bind=\"iconProps(collapseIcon)\"\n      />\n    </summary>\n    <div class=\"v-accordion-content\">\n      <slot />\n    </div>\n  </details>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion-item + .v-accordion-item {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-accordion-summary {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--accordion-pad-block, var(--vectis-space-4))\n      var(--accordion-pad-inline, var(--vectis-space-5));\n    cursor: pointer;\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    color: var(--vectis-color-text);\n  }\n\n  .v-accordion-summary:hover:not([data-disabled]) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-accordion-summary:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-accordion-item:first-child > .v-accordion-summary {\n    border-start-start-radius: var(--accordion-corner-radius, 0);\n    border-start-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-item:last-child:not([open]) > .v-accordion-summary {\n    border-end-start-radius: var(--accordion-corner-radius, 0);\n    border-end-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-heading {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* A disabled item greys out through the colour tokens and never through\n     `opacity`, the rule every control in the DS follows. */\n  .v-accordion-summary[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icon and the subtitle default to text-muted, which is DARKER than the\n     text-subtle a disabled title takes: left to themselves they would come out\n     stronger than the label they belong to, so they inherit it instead. The chevron\n     gets the same treatment from `styles/disclosure.css`. */\n  .v-accordion-summary[data-disabled] .v-accordion-icon,\n  .v-accordion-summary[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  .v-accordion-content {\n    padding: var(--accordion-content-pad-start, var(--vectis-space-2))\n      var(--accordion-pad-inline, var(--vectis-space-5))\n      var(--accordion-pad-block, var(--vectis-space-4));\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The disclosure animation, the chevron's rotation or swap and the WebKit marker come\n     from `styles/disclosure.css`, reduced-motion block included. */\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VAccordionItem.js","names":[],"sources":["../../../src/components/VAccordion/VAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Native details owns disclosure. useDetailsOpen bridges v-model and cancels activation of\n * disabled summaries.\n */\n\nimport { computed, inject, provide } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { accordionKey } from './context'\n\nimport { useDetailsOpen } from '../../composables/useDetailsOpen'\n\ninterface AccordionItemProps {\n  /**\n   * The heading of the section, the line that stays visible when it is closed. Use the `#title`\n   * slot instead when the heading needs markup rather than plain text.\n   */\n  title?: string\n  /**\n   * A secondary line under the title, for a short explanation or a status. The\n   * `#subtitle` slot replaces it when markup is needed.\n   */\n  subtitle?: string\n  /**\n   * An icon placed before the title: an icon name, or an explicit render (`{ src }`,\n   * `{ component }`…). The `#icon` slot replaces it.\n   */\n  icon?: IconSource\n  /** Renders the section already open. Bind `v-model:open` to drive it instead. */\n  defaultOpen?: boolean\n  /** Makes the section inert. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionItemProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  icon: undefined,\n  defaultOpen: false,\n  disabled: false,\n})\n\n// \"not bound\" is written as `null` and not `undefined`. A model typed as a plain boolean is\n// declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`, which would\n// silently overwrite `defaultOpen`.\n/**\n * Whether the section is open, when the consumer wants to drive or observe it. Left\n * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial\n * value. `null` means unbound.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\ndefineSlots<{\n  /** The content revealed when the section is open. */\n  default(): unknown\n  /** A title made of markup, which replaces the `title` prop. */\n  title?(): unknown\n  /** A subtitle made of markup, which replaces the `subtitle` prop. */\n  subtitle?(): unknown\n  /** Free content before the title, which takes the place of `icon`. */\n  icon?(): unknown\n}>()\n\nconst accordion = inject(accordionKey, null)\n// The group stops here: an item nested in this one's content without a VAccordion of its\n// own would otherwise share this group's name, and the browser closes every other member\n// of a name group when one opens, the section holding it included.\nprovide(accordionKey, null)\n\n/**\n * Both icons are chosen on the enclosing group. The chevron fallback is what keeps\n * an item rendering correctly when it is used outside a VAccordion.\n */\nconst expandIcon = computed(() => accordion?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => accordion?.collapseIcon)\n\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item v-disclosure\"\n    :name=\"accordion?.name\"\n    :open=\"openAttr\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"icon\">\n        <VIcon v-if=\"icon\" class=\"v-accordion-icon\" v-bind=\"iconProps(icon)\" />\n      </slot>\n      <span class=\"v-accordion-heading\">\n        <span class=\"v-accordion-title\"\n          ><slot name=\"title\">{{ title }}</slot></span\n        >\n        <VTypography\n          v-if=\"subtitle !== undefined || $slots.subtitle\"\n          as=\"span\"\n          variant=\"caption\"\n          tone=\"muted\"\n          class=\"v-accordion-subtitle\"\n          ><slot name=\"subtitle\">{{ subtitle }}</slot></VTypography\n        >\n      </span>\n      <VIcon class=\"v-accordion-chevron v-disclosure-chevron\" v-bind=\"iconProps(expandIcon)\" />\n      <VIcon\n        v-if=\"collapseIcon\"\n        class=\"v-accordion-chevron v-accordion-chevron-open v-disclosure-chevron v-disclosure-chevron-open\"\n        v-bind=\"iconProps(collapseIcon)\"\n      />\n    </summary>\n    <div class=\"v-accordion-content\">\n      <slot />\n    </div>\n  </details>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion-item + .v-accordion-item {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-accordion-summary {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--accordion-pad-block, var(--vectis-space-4))\n      var(--accordion-pad-inline, var(--vectis-space-5));\n    cursor: pointer;\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    color: var(--vectis-color-text);\n  }\n\n  .v-accordion-summary:hover:not([data-disabled]) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-accordion-summary:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-accordion-item:first-child > .v-accordion-summary {\n    border-start-start-radius: var(--accordion-corner-radius, 0);\n    border-start-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-item:last-child:not([open]) > .v-accordion-summary {\n    border-end-start-radius: var(--accordion-corner-radius, 0);\n    border-end-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-heading {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* A disabled item greys out through the colour tokens and never through\n     `opacity`, the rule every control in the DS follows. */\n  .v-accordion-summary[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icon and the subtitle default to text-muted, which is DARKER than the\n     text-subtle a disabled title takes: left to themselves they would come out\n     stronger than the label they belong to, so they inherit it instead. The chevron\n     gets the same treatment from `styles/disclosure.css`. */\n  .v-accordion-summary[data-disabled] .v-accordion-icon,\n  .v-accordion-summary[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  .v-accordion-content {\n    padding: var(--accordion-content-pad-start, var(--vectis-space-2))\n      var(--accordion-pad-inline, var(--vectis-space-5))\n      var(--accordion-pad-block, var(--vectis-space-4));\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The disclosure animation, the chevron's rotation or swap and the WebKit marker come\n     from `styles/disclosure.css`, reduced-motion block included. */\n}\n</style>\n"],"mappings":""}

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 * One section of an accordion: a heading the reader can click, and the content it\n * reveals. It is a native `<details>`/`<summary>` pair, so the browser owns the\n * open and closed state, the keyboard and the accessibility semantics. The only JS\n * is the `v-model:open` bridge, fed by the element, and the click a disabled summary\n * has to cancel, both shared with VSideNavigationItem through `useDetailsOpen`.\n *\n * The opening is animated entirely in CSS, with `::details-content` and\n * `interpolate-size` (`styles/disclosure.css`). Both are recent additions to the\n * language: where they are missing the section simply appears at once, which is the\n * intended fallback.\n */\n\nimport { computed, inject, 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\n   * the `#title` slot instead when the heading needs markup rather than plain text.\n   *\n   * Note that this prop shadows the HTML attribute of the same name on the component,\n   * so no tooltip can be set through it.\n   */\n  title?: string\n  /**\n   * A secondary line under the title, for a short explanation or a status. The\n   * `#subtitle` slot replaces it when markup is needed.\n   */\n  subtitle?: string\n  /**\n   * An icon placed before the title: an icon name, or an explicit render\n   * (`{ src }`, `{ component }`…). The `#icon` slot replaces it.\n   *\n   * It carries no side in its name because there is only one: the end of the row belongs\n   * to the chevron, so there is nothing for a start to be told apart from. That is the\n   * rule every single-icon component of the design system follows, and its slot is named\n   * `#icon` for the same reason.\n   */\n  icon?: IconSource\n  /**\n   * Renders the section already open. Only its initial value is read: the browser\n   * owns the state afterwards, so changing this prop later will not close a section\n   * the reader has opened. Bind `v-model:open` to drive it instead.\n   */\n  defaultOpen?: boolean\n  /**\n   * Makes the section inert. It can no longer be opened, the keyboard skips over\n   * it, and it is greyed out through the colour tokens.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionItemProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  icon: undefined,\n  defaultOpen: false,\n  disabled: false,\n})\n\n// TRAP — \"not bound\" is written as `null` and not `undefined`. A model typed as a plain\n// boolean is declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`,\n// which would silently overwrite `defaultOpen`. The explicit default disarms that cast.\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      <!-- Both icons are always in the DOM; [open] decides which one shows, in CSS alone -->\n      <VIcon\n        v-if=\"collapseIcon\"\n        class=\"v-accordion-chevron v-accordion-chevron-open v-disclosure-chevron v-disclosure-chevron-open\"\n        v-bind=\"iconProps(collapseIcon)\"\n      />\n    </summary>\n    <div class=\"v-accordion-content\">\n      <slot />\n    </div>\n  </details>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion-item + .v-accordion-item {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-accordion-summary {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--accordion-pad-block, var(--vectis-space-4))\n      var(--accordion-pad-inline, var(--vectis-space-5));\n    cursor: pointer;\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    color: var(--vectis-color-text);\n  }\n\n  .v-accordion-summary:hover:not([data-disabled]) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-accordion-summary:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-accordion-item:first-child > .v-accordion-summary {\n    border-start-start-radius: var(--accordion-corner-radius, 0);\n    border-start-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-item:last-child:not([open]) > .v-accordion-summary {\n    border-end-start-radius: var(--accordion-corner-radius, 0);\n    border-end-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-heading {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* A disabled item greys out through the colour tokens and never through\n     `opacity`, the rule every control in the DS follows. */\n  .v-accordion-summary[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icon and the subtitle default to text-muted, which is DARKER than the\n     text-subtle a disabled title takes: left to themselves they would come out\n     stronger than the label they belong to, so they inherit it instead. The chevron\n     gets the same treatment from `styles/disclosure.css`. */\n  .v-accordion-summary[data-disabled] .v-accordion-icon,\n  .v-accordion-summary[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  .v-accordion-content {\n    padding: var(--accordion-content-pad-start, var(--vectis-space-2))\n      var(--accordion-pad-inline, var(--vectis-space-5))\n      var(--accordion-pad-block, var(--vectis-space-4));\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The disclosure animation, the chevron's rotation or swap and the WebKit marker come\n     from `styles/disclosure.css`, reduced-motion block included. */\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8DA,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,EAyCU,WAAA;GAxCR,OAAM;GACL,MAAM,EAAA,CAAA,CAAS,EAAE;GACjB,MAAM,EAAA,CAAA;GACN,aAAW,EAAA,QAAY,KAAQ,KAAA;GAC/B,UAAM,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;MAET,EA8BU,WAAA;GA7BR,OAAM;GACL,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,iBAAe,EAAA,YAAY,KAAA;GAC3B,UAAU,EAAA,WAAQ,KAAQ,KAAA;GAC1B,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;;GAER,EAEO,EAAA,QAAA,QAAA,CAAA,SAAA,CADQ,EAAA,QAAA,EAAA,GAAb,EAAuE,GAAvE,EAAuE;;IAApD,OAAM;MAA2B,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;GAEpE,EAYO,QAZP,GAYO,CAXL,EAEC,QAFD,GAEC,CADE,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGtB,EAAA,aAAa,KAAA,KAAaA,EAAAA,OAAO,YAAA,EAAA,GADzC,EAOC,GAAA;;IALC,IAAG;IACH,SAAQ;IACR,MAAK;IACL,OAAM;;qBACsC,CAA3C,EAA2C,EAAA,QAAA,YAAA,CAAA,SAAA,CAAA,EAAA,EAAlB,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAGtC,EAAyF,GAAzF,EAAyF,EAAlF,OAAM,2CAA0C,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,KAAU,CAAA,GAAA,MAAA,EAAA;GAG5E,EAAA,SAAA,EAAA,GADR,EAIE,GAJF,EAIE;;IAFA,OAAM;MACE,EAAA,CAAA,CAAS,CAAC,EAAA,KAAY,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;YAGlC,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VAccordionItem.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VAccordion/VAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Native details owns disclosure. useDetailsOpen bridges v-model and cancels activation of\n * disabled summaries.\n */\n\nimport { computed, inject, provide } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { accordionKey } from './context'\n\nimport { useDetailsOpen } from '../../composables/useDetailsOpen'\n\ninterface AccordionItemProps {\n  /**\n   * The heading of the section, the line that stays visible when it is closed. Use the `#title`\n   * slot instead when the heading needs markup rather than plain text.\n   */\n  title?: string\n  /**\n   * A secondary line under the title, for a short explanation or a status. The\n   * `#subtitle` slot replaces it when markup is needed.\n   */\n  subtitle?: string\n  /**\n   * An icon placed before the title: an icon name, or an explicit render (`{ src }`,\n   * `{ component }`…). The `#icon` slot replaces it.\n   */\n  icon?: IconSource\n  /** Renders the section already open. Bind `v-model:open` to drive it instead. */\n  defaultOpen?: boolean\n  /** Makes the section inert. */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionItemProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  icon: undefined,\n  defaultOpen: false,\n  disabled: false,\n})\n\n// \"not bound\" is written as `null` and not `undefined`. A model typed as a plain boolean is\n// declared as such at runtime, and Vue casts an ABSENT boolean prop to `false`, which would\n// silently overwrite `defaultOpen`.\n/**\n * Whether the section is open, when the consumer wants to drive or observe it. Left\n * unbound, the browser keeps that state to itself, `defaultOpen` giving only the initial\n * value. `null` means unbound.\n */\nconst open = defineModel<boolean | null>('open', { default: null })\n\ndefineSlots<{\n  /** The content revealed when the section is open. */\n  default(): unknown\n  /** A title made of markup, which replaces the `title` prop. */\n  title?(): unknown\n  /** A subtitle made of markup, which replaces the `subtitle` prop. */\n  subtitle?(): unknown\n  /** Free content before the title, which takes the place of `icon`. */\n  icon?(): unknown\n}>()\n\nconst accordion = inject(accordionKey, null)\n// The group stops here: an item nested in this one's content without a VAccordion of its\n// own would otherwise share this group's name, and the browser closes every other member\n// of a name group when one opens, the section holding it included.\nprovide(accordionKey, null)\n\n/**\n * Both icons are chosen on the enclosing group. The chevron fallback is what keeps\n * an item rendering correctly when it is used outside a VAccordion.\n */\nconst expandIcon = computed(() => accordion?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => accordion?.collapseIcon)\n\nconst { openAttr, onToggle, onSummaryClick } = useDetailsOpen(open, {\n  defaultOpen: () => props.defaultOpen,\n  disabled: () => props.disabled,\n})\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item v-disclosure\"\n    :name=\"accordion?.name\"\n    :open=\"openAttr\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    @toggle=\"onToggle\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"icon\">\n        <VIcon v-if=\"icon\" class=\"v-accordion-icon\" v-bind=\"iconProps(icon)\" />\n      </slot>\n      <span class=\"v-accordion-heading\">\n        <span class=\"v-accordion-title\"\n          ><slot name=\"title\">{{ title }}</slot></span\n        >\n        <VTypography\n          v-if=\"subtitle !== undefined || $slots.subtitle\"\n          as=\"span\"\n          variant=\"caption\"\n          tone=\"muted\"\n          class=\"v-accordion-subtitle\"\n          ><slot name=\"subtitle\">{{ subtitle }}</slot></VTypography\n        >\n      </span>\n      <VIcon class=\"v-accordion-chevron v-disclosure-chevron\" v-bind=\"iconProps(expandIcon)\" />\n      <VIcon\n        v-if=\"collapseIcon\"\n        class=\"v-accordion-chevron v-accordion-chevron-open v-disclosure-chevron v-disclosure-chevron-open\"\n        v-bind=\"iconProps(collapseIcon)\"\n      />\n    </summary>\n    <div class=\"v-accordion-content\">\n      <slot />\n    </div>\n  </details>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion-item + .v-accordion-item {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-accordion-summary {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--accordion-pad-block, var(--vectis-space-4))\n      var(--accordion-pad-inline, var(--vectis-space-5));\n    cursor: pointer;\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    color: var(--vectis-color-text);\n  }\n\n  .v-accordion-summary:hover:not([data-disabled]) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-accordion-summary:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-accordion-item:first-child > .v-accordion-summary {\n    border-start-start-radius: var(--accordion-corner-radius, 0);\n    border-start-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-item:last-child:not([open]) > .v-accordion-summary {\n    border-end-start-radius: var(--accordion-corner-radius, 0);\n    border-end-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-heading {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* A disabled item greys out through the colour tokens and never through\n     `opacity`, the rule every control in the DS follows. */\n  .v-accordion-summary[data-disabled] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icon and the subtitle default to text-muted, which is DARKER than the\n     text-subtle a disabled title takes: left to themselves they would come out\n     stronger than the label they belong to, so they inherit it instead. The chevron\n     gets the same treatment from `styles/disclosure.css`. */\n  .v-accordion-summary[data-disabled] .v-accordion-icon,\n  .v-accordion-summary[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  .v-accordion-content {\n    padding: var(--accordion-content-pad-start, var(--vectis-space-2))\n      var(--accordion-pad-inline, var(--vectis-space-5))\n      var(--accordion-pad-block, var(--vectis-space-4));\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* The disclosure animation, the chevron's rotation or swap and the WebKit marker come\n     from `styles/disclosure.css`, reduced-motion block included. */\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCA,IAAM,IAAQ,GAgBR,IAAO,EAA2B,GAAC,MAAyB,GAa5D,IAAY,EAAO,GAAc,IAAI;EAI3C,EAAQ,GAAc,IAAI;EAM1B,IAAM,IAAa,QAAe,GAAW,cAAc,CAAc,GACnE,IAAe,QAAe,GAAW,YAAY,GAErD,EAAE,aAAU,aAAU,sBAAmB,EAAe,GAAM;GAClE,mBAAmB,EAAM;GACzB,gBAAgB,EAAM;EACxB,CAAC;yBAIC,EAwCU,WAAA;GAvCR,OAAM;GACL,MAAM,EAAA,CAAA,CAAS,EAAE;GACjB,MAAM,EAAA,CAAA;GACN,aAAW,EAAA,QAAY,KAAQ,KAAA;GAC/B,UAAM,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;MAET,EA6BU,WAAA;GA5BR,OAAM;GACL,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,iBAAe,EAAA,YAAY,KAAA;GAC3B,UAAU,EAAA,WAAQ,KAAQ,KAAA;GAC1B,SAAK,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;;GAER,EAEO,EAAA,QAAA,QAAA,CAAA,SAAA,CADQ,EAAA,QAAA,EAAA,GAAb,EAAuE,GAAvE,EAAuE;;IAApD,OAAM;MAA2B,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;GAEpE,EAYO,QAZP,GAYO,CAXL,EAEC,QAFD,GAEC,CADE,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGtB,EAAA,aAAa,KAAA,KAAaA,EAAAA,OAAO,YAAA,EAAA,GADzC,EAOC,GAAA;;IALC,IAAG;IACH,SAAQ;IACR,MAAK;IACL,OAAM;;qBACsC,CAA3C,EAA2C,EAAA,QAAA,YAAA,CAAA,SAAA,CAAA,EAAA,EAAlB,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAGtC,EAAyF,GAAzF,EAAyF,EAAlF,OAAM,2CAA0C,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,KAAU,CAAA,GAAA,MAAA,EAAA;GAE5E,EAAA,SAAA,EAAA,GADR,EAIE,GAJF,EAIE;;IAFA,OAAM;MACE,EAAA,CAAA,CAAS,CAAC,EAAA,KAAY,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;YAGlC,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}

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

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

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

@@ -12,17 +12,11 @@ interface AvatarProps {
      * given both an icon and a name shows the icon.
      */
     icon?: IconSource;
-    /**
-     * The person's full name. It does three things at once: it names the avatar for assistive
-     * technology, its initials are what shows when there is no picture and no icon, and it is
-     * the seed the automatic colour is derived from, so the same person keeps the same colour
-     * everywhere.
-     */
+    /** The person's full name. */
     name?: string;
     /**
      * The accessible name, when it should not simply be `name`: an avatar standing for a team
      * rather than a person, say. It wins over `name`, and a consumer `aria-label` wins over it.
-     * On a picture it is the image's `alt` text.
      */
     alt?: string;
     /**
@@ -37,11 +31,7 @@ interface AvatarProps {
      * here; on its own it is `md`.
      */
     size?: AvatarSize;
-    /**
-     * Takes 4px off the diameter, as it does on every other control. Unlike `size` it is
-     * cumulative: inside a compact VAvatarGroup the avatar is compact whatever this says, and
-     * setting it on one avatar of a regular group makes that one compact alone.
-     */
+    /** 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:

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 * A round avatar standing for a person or an entity. It shows the best of what it\n * was given, in that order: the picture, failing that an icon, failing that the\n * initials taken from the name, and failing that whatever the default slot holds —\n * the escape hatch VAvatarGroup uses to render its \"+X\" overflow badge.\n *\n * Four things here genuinely need JavaScript. A picture that fails to download\n * reports it as a DOM event and nothing else, so the script listens for it and\n * hands over to the initials rather than leaving an empty circle. The initials and\n * the automatic colour are both computed from the name, which is arithmetic no\n * stylesheet can do. A disabled link has no native equivalent of a disabled\n * button, so it is turned inert by hand (composables/useInertLink). Finally the attributes\n * the consumer passes are split so that `style` never reaches the element\n * directly: the component has to merge its own `--avatar-hue`/`--custom-color`\n * into it first, and a plain fallthrough would overwrite them.\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  /**\n   * The person's full name. It does three things at once: it names the avatar for assistive\n   * technology, its initials are what shows when there is no picture and no icon, and it is\n   * the seed the automatic colour is derived from, so the same person keeps the same colour\n   * everywhere.\n   */\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   * On a picture it is the image's `alt` text.\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   * Takes 4px off the diameter, as it does on every other control. Unlike `size` it is\n   * cumulative: inside a compact VAvatarGroup the avatar is compact whatever this says, and\n   * setting it on one avatar of a regular group makes that one compact alone.\n   */\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\n/* Interactivity priority: href > clickable > static. */\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/* TRAP — on a server-rendered page the browser may give up on the picture BEFORE hydration\n   attaches `@error`, and that event is never sent again: the disc would stay an empty\n   circle. A picture already settled with no pixels at mount is one that failed. */\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 * Auto hue: a pure JS hash of the name → an OKLCH hue (0–359). Only the hue is\n * inline (a unitless scalar); the CSS composes background/text with L/C fixed per\n * theme (light/dark adaptation without depending on contrast-color). A colour\n * computed outside the tokens, a deliberate exception. SSR-safe: no browser API.\n *\n * VCalendar derives an event's hue the same way (`VCalendar/color.ts`, `hueOf`) with a hash\n * of its own, and the two stay apart ON PURPOSE: changing this one would give every person\n * already shown in an application a new colour. Nothing ties an avatar's hue to an event's,\n * so a person and an event sharing a string do not share a colour.\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    /* `--avatar-ring-color` is a contract with VAvatarGroup, which is the only thing that\n       ever sets it — a private name shared across two sheets, like the `anchor-name`\n       idents. The `transparent` fallback is what lets a lone avatar render ringless, and\n       it is also what makes a divergence silent: rename it on one side and the discs in a\n       group simply stop being separated, with no error and nothing missing from the box. */\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  /* `--avatar-hue` is set inline by the script, which derives it from the name — so these\n     pairs cannot be tokens: only the hue varies, and it is not known until render. The two\n     themes are written out separately for the same reason relative colours are not used\n     elsewhere in the library: OKLCH's lightness is perceptual, so the dark pair is a\n     design decision rather than a delta off the light one.\n\n     TRAP — the lightness/chroma pairs are set on the THEME scopes and INHERITED, rather\n     than written in a `[data-theme='dark'] .v-avatar` rule: a descendant selector matches\n     ANY dark ancestor, so a light subtree nested in a dark page kept the dark discs. An\n     inherited value is resolved by the NEAREST scope, which is exactly how the semantic\n     tokens behave. The selectors and their order are `tokens.css`'s own: all three are\n     (0,1,0), so on a dark root the later block wins. */\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  /* The icon occupies ~55% of the disc (a unitless ratio, like the font-size). */\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  /* Forced colours repaint the disc as Canvas and drop the separation ring, a shadow, so\n     an avatar has no edge and the discs of a group run into one another. The outline gives\n     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":[],"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":""}

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 * A round avatar standing for a person or an entity. It shows the best of what it\n * was given, in that order: the picture, failing that an icon, failing that the\n * initials taken from the name, and failing that whatever the default slot holds —\n * the escape hatch VAvatarGroup uses to render its \"+X\" overflow badge.\n *\n * Four things here genuinely need JavaScript. A picture that fails to download\n * reports it as a DOM event and nothing else, so the script listens for it and\n * hands over to the initials rather than leaving an empty circle. The initials and\n * the automatic colour are both computed from the name, which is arithmetic no\n * stylesheet can do. A disabled link has no native equivalent of a disabled\n * button, so it is turned inert by hand (composables/useInertLink). Finally the attributes\n * the consumer passes are split so that `style` never reaches the element\n * directly: the component has to merge its own `--avatar-hue`/`--custom-color`\n * into it first, and a plain fallthrough would overwrite them.\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  /**\n   * The person's full name. It does three things at once: it names the avatar for assistive\n   * technology, its initials are what shows when there is no picture and no icon, and it is\n   * the seed the automatic colour is derived from, so the same person keeps the same colour\n   * everywhere.\n   */\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   * On a picture it is the image's `alt` text.\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   * Takes 4px off the diameter, as it does on every other control. Unlike `size` it is\n   * cumulative: inside a compact VAvatarGroup the avatar is compact whatever this says, and\n   * setting it on one avatar of a regular group makes that one compact alone.\n   */\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\n/* Interactivity priority: href > clickable > static. */\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/* TRAP — on a server-rendered page the browser may give up on the picture BEFORE hydration\n   attaches `@error`, and that event is never sent again: the disc would stay an empty\n   circle. A picture already settled with no pixels at mount is one that failed. */\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 * Auto hue: a pure JS hash of the name → an OKLCH hue (0–359). Only the hue is\n * inline (a unitless scalar); the CSS composes background/text with L/C fixed per\n * theme (light/dark adaptation without depending on contrast-color). A colour\n * computed outside the tokens, a deliberate exception. SSR-safe: no browser API.\n *\n * VCalendar derives an event's hue the same way (`VCalendar/color.ts`, `hueOf`) with a hash\n * of its own, and the two stay apart ON PURPOSE: changing this one would give every person\n * already shown in an application a new colour. Nothing ties an avatar's hue to an event's,\n * so a person and an event sharing a string do not share a colour.\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    /* `--avatar-ring-color` is a contract with VAvatarGroup, which is the only thing that\n       ever sets it — a private name shared across two sheets, like the `anchor-name`\n       idents. The `transparent` fallback is what lets a lone avatar render ringless, and\n       it is also what makes a divergence silent: rename it on one side and the discs in a\n       group simply stop being separated, with no error and nothing missing from the box. */\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  /* `--avatar-hue` is set inline by the script, which derives it from the name — so these\n     pairs cannot be tokens: only the hue varies, and it is not known until render. The two\n     themes are written out separately for the same reason relative colours are not used\n     elsewhere in the library: OKLCH's lightness is perceptual, so the dark pair is a\n     design decision rather than a delta off the light one.\n\n     TRAP — the lightness/chroma pairs are set on the THEME scopes and INHERITED, rather\n     than written in a `[data-theme='dark'] .v-avatar` rule: a descendant selector matches\n     ANY dark ancestor, so a light subtree nested in a dark page kept the dark discs. An\n     inherited value is resolved by the NEAREST scope, which is exactly how the semantic\n     tokens behave. The selectors and their order are `tokens.css`'s own: all three are\n     (0,1,0), so on a dark root the later block wins. */\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  /* The icon occupies ~55% of the disc (a unitless ratio, like the font-size). */\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  /* Forced colours repaint the disc as Canvas and drop the separation ring, a shadow, so\n     an avatar has no edge and the discs of a group run into one another. The outline gives\n     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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6FA,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,GAGK,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,GAK9D,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,GAcK,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":[],"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"}

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

@@ -21,8 +21,8 @@ interface AvatarGroupProps {
      */
     compact?: boolean;
     /**
-     * The colour of the ring drawn around each disc. It defaults to the page
-     * background, which is what makes the ring read as a gap between two avatars.
+     * The colour of the ring drawn around each disc. It defaults to the page background, which
+     * makes the ring read as a gap between two avatars.
      */
     ringColor?: string;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"VAvatarGroup.js","names":[],"sources":["../../../src/components/VAvatar/VAvatarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core — the number of avatars is read from the slot's VNODES through\n// `useSlotNodes`, never from a registry the children would fill at mount: such a\n// registry is empty during the server render and full on the client, which is a\n// hydration mismatch.\n/**\n * Several VAvatars stacked into an overlapping row — a team, the participants in a\n * conversation. Each disc bites into the one before it and, coming later in the document, is\n * painted over it: the browser's paint order does the work, with no positioning code. A ring\n * in `--avatar-ring-color` keeps the overlapping edges distinct.\n *\n * Two things need JS. Counting the avatars given and keeping only the first few, so the rest\n * can be summed up as one \"+N\" disc, is expressible in neither HTML nor CSS — and the count\n * comes from the slot's VNODES, never a registry, which would render 0 on the server and N\n * in the browser. And the group's size and density reach the avatars through provide/inject.\n */\n\nimport { computed, provide } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VAvatar from './VAvatar.vue'\nimport type { AvatarSize } from './VAvatar.vue'\nimport { AVATAR_DEFAULT_SIZE, avatarGroupKey } from './context'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useSlotNodes } from '../../composables/useSlotNodes'\n\n/** What the `#overflow` slot receives. */\nexport interface AvatarGroupOverflowSlotProps {\n  /** How many avatars are hidden beyond `max`. */\n  count: number\n}\n\ninterface AvatarGroupProps {\n  /**\n   * How many avatars to show before the remaining ones are summed up as a single\n   * \"+X\" disc. Left out, or set to 0, every avatar is shown.\n   */\n  max?: number\n  /**\n   * The size given to the avatars inside the group. An avatar that sets a `size`\n   * of its own keeps it.\n   */\n  size?: AvatarSize\n  /**\n   * Applies the reduced density to every avatar inside. Unlike `size` it is cumulative: an\n   * avatar cannot opt back out of a compact group.\n   */\n  compact?: boolean\n  /**\n   * The colour of the ring drawn around each disc. It defaults to the page\n   * background, which is what makes the ring read as a gap between two avatars.\n   */\n  ringColor?: string\n  /**\n   * The accessible name of the group, e.g. \"Project members\". A row of faces does not say on\n   * its own who these people are. A consumer `aria-label` or `aria-labelledby` wins over it.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<AvatarGroupProps>(), {\n  max: undefined,\n  size: undefined,\n  compact: false,\n  ringColor: undefined,\n  label: undefined,\n})\n\nconst ariaLabel = useAriaLabel(() => props.label)\n\ndefineSlots<{\n  /** The VAvatars to stack. */\n  default?(): unknown\n  /**\n   * Replaces the \"+X\" disc that stands for the avatars beyond `max`. It receives\n   * `count`, the number of avatars being hidden.\n   */\n  overflow?(props: AvatarGroupOverflowSlotProps): unknown\n}>()\n\nprovide(avatarGroupKey, {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n})\n\nconst items = useSlotNodes()\n// `max: 0` means \"no limit\", as documented, and so does a negative one: `slice(0, -1)` would\n// drop the LAST avatar and sum it into a \"+1\" disc.\nconst visibleItems = computed(() =>\n  props.max !== undefined && props.max > 0 ? items.value.slice(0, props.max) : items.value,\n)\nconst overflowCount = computed(() => items.value.length - visibleItems.value.length)\n\n// A functional component is the only way to render VNodes that have already been\n// captured: <component :is> expects a component definition, not a vnode.\nconst VisibleAvatars = () => visibleItems.value\n\nconst rootStyle = computed<StyleValue>(() =>\n  props.ringColor !== undefined ? { '--avatar-ring-color': props.ringColor } : undefined,\n)\n\n// The group carries v-control so that --control-height is defined at ITS level,\n// which keeps the overlap computable even when a child is wrapped — a VTooltip, for\n// instance, inserts a <span> between the group and the VAvatar. An avatar given a\n// size of its own redefines --control-height on itself, so its own overlap follows\n// that size rather than the group's.\nconst resolvedGroupSize = computed<AvatarSize>(() => props.size ?? AVATAR_DEFAULT_SIZE)\n</script>\n\n<template>\n  <div\n    class=\"v-avatar-group v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedGroupSize\"\n    :data-compact=\"compact ? '' : undefined\"\n  >\n    <component :is=\"VisibleAvatars\" />\n    <slot v-if=\"overflowCount > 0\" name=\"overflow\" :count=\"overflowCount\">\n      <VAvatar>+{{ overflowCount }}</VAvatar>\n    </slot>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-avatar-group {\n    /* The separation ring, declared here so that every child .v-avatar inherits it. */\n    --avatar-ring-color: var(--vectis-color-surface);\n    display: inline-flex;\n    align-items: center;\n  }\n\n  /* The overlap itself: each disc bites into the previous one by a fraction of its\n     own height, and the DOM order is what makes the following one paint over it.\n     The selector deliberately targets the direct child whatever it is — a bare\n     VAvatar as well as a VTooltip wrapper — which is why --control-height has to\n     come from the group; an avatar carrying its own size overrides it on itself.\n     The ratio is unitless so it scales with whichever height applies. */\n  .v-avatar-group > * + * {\n    margin-inline-start: calc(var(--control-height) * -0.3);\n  }\n\n  /* On hover, or as soon as something inside it takes focus, a disc rises above its\n     neighbours so it is seen whole rather than clipped by the next one. */\n  .v-avatar-group > *:hover,\n  .v-avatar-group > *:focus-within {\n    z-index: 1;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VAvatarGroup.js","names":[],"sources":["../../../src/components/VAvatar/VAvatarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core\n/**\n * Count avatars through slot VNodes for SSR-consistent overflow; useSlotNodes keeps that count\n * reactive when the parent replaces its slot.\n */\n\nimport { computed, provide } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VAvatar from './VAvatar.vue'\nimport type { AvatarSize } from './VAvatar.vue'\nimport { AVATAR_DEFAULT_SIZE, avatarGroupKey } from './context'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useSlotNodes } from '../../composables/useSlotNodes'\n\n/** What the `#overflow` slot receives. */\nexport interface AvatarGroupOverflowSlotProps {\n  /** How many avatars are hidden beyond `max`. */\n  count: number\n}\n\ninterface AvatarGroupProps {\n  /**\n   * How many avatars to show before the remaining ones are summed up as a single\n   * \"+X\" disc. Left out, or set to 0, every avatar is shown.\n   */\n  max?: number\n  /**\n   * The size given to the avatars inside the group. An avatar that sets a `size`\n   * of its own keeps it.\n   */\n  size?: AvatarSize\n  /**\n   * Applies the reduced density to every avatar inside. Unlike `size` it is cumulative: an\n   * avatar cannot opt back out of a compact group.\n   */\n  compact?: boolean\n  /**\n   * The colour of the ring drawn around each disc. It defaults to the page background, which\n   * makes the ring read as a gap between two avatars.\n   */\n  ringColor?: string\n  /**\n   * The accessible name of the group, e.g. \"Project members\". A row of faces does not say on\n   * its own who these people are. A consumer `aria-label` or `aria-labelledby` wins over it.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<AvatarGroupProps>(), {\n  max: undefined,\n  size: undefined,\n  compact: false,\n  ringColor: undefined,\n  label: undefined,\n})\n\nconst ariaLabel = useAriaLabel(() => props.label)\n\ndefineSlots<{\n  /** The VAvatars to stack. */\n  default?(): unknown\n  /**\n   * Replaces the \"+X\" disc that stands for the avatars beyond `max`. It receives\n   * `count`, the number of avatars being hidden.\n   */\n  overflow?(props: AvatarGroupOverflowSlotProps): unknown\n}>()\n\nprovide(avatarGroupKey, {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n})\n\nconst items = useSlotNodes()\n// `max: 0` means \"no limit\", as documented, and so does a negative one: `slice(0, -1)` would\n// drop the last avatar and sum it into a \"+1\" disc.\nconst visibleItems = computed(() =>\n  props.max !== undefined && props.max > 0 ? items.value.slice(0, props.max) : items.value,\n)\nconst overflowCount = computed(() => items.value.length - visibleItems.value.length)\n\n// A functional component is the only way to render VNodes that have already been\n// captured: <component :is> expects a component definition, not a vnode.\nconst VisibleAvatars = () => visibleItems.value\n\nconst rootStyle = computed<StyleValue>(() =>\n  props.ringColor !== undefined ? { '--avatar-ring-color': props.ringColor } : undefined,\n)\n\n// The group carries v-control so that --control-height is defined at ITS level, which keeps the\n// overlap computable even when a child is wrapped; a VTooltip, for instance, inserts a <span>\n// between the group and the VAvatar. An avatar given a size of its own redefines\n// --control-height on itself, so its own overlap follows that size rather than the group's.\nconst resolvedGroupSize = computed<AvatarSize>(() => props.size ?? AVATAR_DEFAULT_SIZE)\n</script>\n\n<template>\n  <div\n    class=\"v-avatar-group v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedGroupSize\"\n    :data-compact=\"compact ? '' : undefined\"\n  >\n    <component :is=\"VisibleAvatars\" />\n    <slot v-if=\"overflowCount > 0\" name=\"overflow\" :count=\"overflowCount\">\n      <VAvatar>+{{ overflowCount }}</VAvatar>\n    </slot>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-avatar-group {\n    /* The separation ring, declared here so that every child .v-avatar inherits it. */\n    --avatar-ring-color: var(--vectis-color-surface);\n    display: inline-flex;\n    align-items: center;\n  }\n\n  /*\n   * Take overlap height from the group so wrappers and differently sized avatars share one row\n   * contract.\n   */\n  .v-avatar-group > * + * {\n    margin-inline-start: calc(var(--control-height) * -0.3);\n  }\n\n  /* On hover, or as soon as something inside it takes focus, a disc rises above its\n     neighbours so it is seen whole rather than clipped by the next one. */\n  .v-avatar-group > *:hover,\n  .v-avatar-group > *:focus-within {\n    z-index: 1;\n  }\n}\n</style>\n"],"mappings":""}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"VAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VAvatar/VAvatarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core — the number of avatars is read from the slot's VNODES through\n// `useSlotNodes`, never from a registry the children would fill at mount: such a\n// registry is empty during the server render and full on the client, which is a\n// hydration mismatch.\n/**\n * Several VAvatars stacked into an overlapping row — a team, the participants in a\n * conversation. Each disc bites into the one before it and, coming later in the document, is\n * painted over it: the browser's paint order does the work, with no positioning code. A ring\n * in `--avatar-ring-color` keeps the overlapping edges distinct.\n *\n * Two things need JS. Counting the avatars given and keeping only the first few, so the rest\n * can be summed up as one \"+N\" disc, is expressible in neither HTML nor CSS — and the count\n * comes from the slot's VNODES, never a registry, which would render 0 on the server and N\n * in the browser. And the group's size and density reach the avatars through provide/inject.\n */\n\nimport { computed, provide } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VAvatar from './VAvatar.vue'\nimport type { AvatarSize } from './VAvatar.vue'\nimport { AVATAR_DEFAULT_SIZE, avatarGroupKey } from './context'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useSlotNodes } from '../../composables/useSlotNodes'\n\n/** What the `#overflow` slot receives. */\nexport interface AvatarGroupOverflowSlotProps {\n  /** How many avatars are hidden beyond `max`. */\n  count: number\n}\n\ninterface AvatarGroupProps {\n  /**\n   * How many avatars to show before the remaining ones are summed up as a single\n   * \"+X\" disc. Left out, or set to 0, every avatar is shown.\n   */\n  max?: number\n  /**\n   * The size given to the avatars inside the group. An avatar that sets a `size`\n   * of its own keeps it.\n   */\n  size?: AvatarSize\n  /**\n   * Applies the reduced density to every avatar inside. Unlike `size` it is cumulative: an\n   * avatar cannot opt back out of a compact group.\n   */\n  compact?: boolean\n  /**\n   * The colour of the ring drawn around each disc. It defaults to the page\n   * background, which is what makes the ring read as a gap between two avatars.\n   */\n  ringColor?: string\n  /**\n   * The accessible name of the group, e.g. \"Project members\". A row of faces does not say on\n   * its own who these people are. A consumer `aria-label` or `aria-labelledby` wins over it.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<AvatarGroupProps>(), {\n  max: undefined,\n  size: undefined,\n  compact: false,\n  ringColor: undefined,\n  label: undefined,\n})\n\nconst ariaLabel = useAriaLabel(() => props.label)\n\ndefineSlots<{\n  /** The VAvatars to stack. */\n  default?(): unknown\n  /**\n   * Replaces the \"+X\" disc that stands for the avatars beyond `max`. It receives\n   * `count`, the number of avatars being hidden.\n   */\n  overflow?(props: AvatarGroupOverflowSlotProps): unknown\n}>()\n\nprovide(avatarGroupKey, {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n})\n\nconst items = useSlotNodes()\n// `max: 0` means \"no limit\", as documented, and so does a negative one: `slice(0, -1)` would\n// drop the LAST avatar and sum it into a \"+1\" disc.\nconst visibleItems = computed(() =>\n  props.max !== undefined && props.max > 0 ? items.value.slice(0, props.max) : items.value,\n)\nconst overflowCount = computed(() => items.value.length - visibleItems.value.length)\n\n// A functional component is the only way to render VNodes that have already been\n// captured: <component :is> expects a component definition, not a vnode.\nconst VisibleAvatars = () => visibleItems.value\n\nconst rootStyle = computed<StyleValue>(() =>\n  props.ringColor !== undefined ? { '--avatar-ring-color': props.ringColor } : undefined,\n)\n\n// The group carries v-control so that --control-height is defined at ITS level,\n// which keeps the overlap computable even when a child is wrapped — a VTooltip, for\n// instance, inserts a <span> between the group and the VAvatar. An avatar given a\n// size of its own redefines --control-height on itself, so its own overlap follows\n// that size rather than the group's.\nconst resolvedGroupSize = computed<AvatarSize>(() => props.size ?? AVATAR_DEFAULT_SIZE)\n</script>\n\n<template>\n  <div\n    class=\"v-avatar-group v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedGroupSize\"\n    :data-compact=\"compact ? '' : undefined\"\n  >\n    <component :is=\"VisibleAvatars\" />\n    <slot v-if=\"overflowCount > 0\" name=\"overflow\" :count=\"overflowCount\">\n      <VAvatar>+{{ overflowCount }}</VAvatar>\n    </slot>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-avatar-group {\n    /* The separation ring, declared here so that every child .v-avatar inherits it. */\n    --avatar-ring-color: var(--vectis-color-surface);\n    display: inline-flex;\n    align-items: center;\n  }\n\n  /* The overlap itself: each disc bites into the previous one by a fraction of its\n     own height, and the DOM order is what makes the following one paint over it.\n     The selector deliberately targets the direct child whatever it is — a bare\n     VAvatar as well as a VTooltip wrapper — which is why --control-height has to\n     come from the group; an avatar carrying its own size overrides it on itself.\n     The ratio is unitless so it scales with whichever height applies. */\n  .v-avatar-group > * + * {\n    margin-inline-start: calc(var(--control-height) * -0.3);\n  }\n\n  /* On hover, or as soon as something inside it takes focus, a disc rises above its\n     neighbours so it is seen whole rather than clipped by the next one. */\n  .v-avatar-group > *:hover,\n  .v-avatar-group > *:focus-within {\n    z-index: 1;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA6DA,IAAM,IAAQ,GAQR,IAAY,QAAmB,EAAM,KAAK;EAYhD,EAAQ,GAAgB;GACtB,IAAI,OAAO;IACT,OAAO,EAAM;GACf;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;EACF,CAAC;EAED,IAAM,IAAQ,EAAa,GAGrB,IAAe,QACnB,EAAM,QAAQ,KAAA,KAAa,EAAM,MAAM,IAAI,EAAM,MAAM,MAAM,GAAG,EAAM,GAAG,IAAI,EAAM,KACrF,GACM,IAAgB,QAAe,EAAM,MAAM,SAAS,EAAa,MAAM,MAAM,GAI7E,UAAuB,EAAa,OAEpC,IAAY,QAChB,EAAM,cAAc,KAAA,IAAyD,KAAA,IAA7C,EAAE,uBAAuB,EAAM,UAAU,CAC3E,GAOM,IAAoB,QAA2B,EAAM,QAAA,IAA2B;yBAIpF,EAYM,OAAA;GAXJ,OAAM;GACN,MAAK;GACJ,cAAY,EAAA,CAAA;GACZ,OAAK,EAAE,EAAA,KAAS;GAChB,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;YAE9B,EAAkC,EAAlB,CAAc,CAAA,IAClB,EAAA,QAAa,IAAzB,EAEO,EAAA,QAAA,YAAA,EAFyC,OAAO,EAAA,MAAa,SAE7D,CADL,EAAuC,GAAA,MAAA;oBAA7B,CAAA,EAAD,MAAC,EAAG,EAAA,KAAa,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"VAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VAvatar/VAvatarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core\n/**\n * Count avatars through slot VNodes for SSR-consistent overflow; useSlotNodes keeps that count\n * reactive when the parent replaces its slot.\n */\n\nimport { computed, provide } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VAvatar from './VAvatar.vue'\nimport type { AvatarSize } from './VAvatar.vue'\nimport { AVATAR_DEFAULT_SIZE, avatarGroupKey } from './context'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useSlotNodes } from '../../composables/useSlotNodes'\n\n/** What the `#overflow` slot receives. */\nexport interface AvatarGroupOverflowSlotProps {\n  /** How many avatars are hidden beyond `max`. */\n  count: number\n}\n\ninterface AvatarGroupProps {\n  /**\n   * How many avatars to show before the remaining ones are summed up as a single\n   * \"+X\" disc. Left out, or set to 0, every avatar is shown.\n   */\n  max?: number\n  /**\n   * The size given to the avatars inside the group. An avatar that sets a `size`\n   * of its own keeps it.\n   */\n  size?: AvatarSize\n  /**\n   * Applies the reduced density to every avatar inside. Unlike `size` it is cumulative: an\n   * avatar cannot opt back out of a compact group.\n   */\n  compact?: boolean\n  /**\n   * The colour of the ring drawn around each disc. It defaults to the page background, which\n   * makes the ring read as a gap between two avatars.\n   */\n  ringColor?: string\n  /**\n   * The accessible name of the group, e.g. \"Project members\". A row of faces does not say on\n   * its own who these people are. A consumer `aria-label` or `aria-labelledby` wins over it.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<AvatarGroupProps>(), {\n  max: undefined,\n  size: undefined,\n  compact: false,\n  ringColor: undefined,\n  label: undefined,\n})\n\nconst ariaLabel = useAriaLabel(() => props.label)\n\ndefineSlots<{\n  /** The VAvatars to stack. */\n  default?(): unknown\n  /**\n   * Replaces the \"+X\" disc that stands for the avatars beyond `max`. It receives\n   * `count`, the number of avatars being hidden.\n   */\n  overflow?(props: AvatarGroupOverflowSlotProps): unknown\n}>()\n\nprovide(avatarGroupKey, {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n})\n\nconst items = useSlotNodes()\n// `max: 0` means \"no limit\", as documented, and so does a negative one: `slice(0, -1)` would\n// drop the last avatar and sum it into a \"+1\" disc.\nconst visibleItems = computed(() =>\n  props.max !== undefined && props.max > 0 ? items.value.slice(0, props.max) : items.value,\n)\nconst overflowCount = computed(() => items.value.length - visibleItems.value.length)\n\n// A functional component is the only way to render VNodes that have already been\n// captured: <component :is> expects a component definition, not a vnode.\nconst VisibleAvatars = () => visibleItems.value\n\nconst rootStyle = computed<StyleValue>(() =>\n  props.ringColor !== undefined ? { '--avatar-ring-color': props.ringColor } : undefined,\n)\n\n// The group carries v-control so that --control-height is defined at ITS level, which keeps the\n// overlap computable even when a child is wrapped; a VTooltip, for instance, inserts a <span>\n// between the group and the VAvatar. An avatar given a size of its own redefines\n// --control-height on itself, so its own overlap follows that size rather than the group's.\nconst resolvedGroupSize = computed<AvatarSize>(() => props.size ?? AVATAR_DEFAULT_SIZE)\n</script>\n\n<template>\n  <div\n    class=\"v-avatar-group v-control\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :style=\"rootStyle\"\n    :data-size=\"resolvedGroupSize\"\n    :data-compact=\"compact ? '' : undefined\"\n  >\n    <component :is=\"VisibleAvatars\" />\n    <slot v-if=\"overflowCount > 0\" name=\"overflow\" :count=\"overflowCount\">\n      <VAvatar>+{{ overflowCount }}</VAvatar>\n    </slot>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-avatar-group {\n    /* The separation ring, declared here so that every child .v-avatar inherits it. */\n    --avatar-ring-color: var(--vectis-color-surface);\n    display: inline-flex;\n    align-items: center;\n  }\n\n  /*\n   * Take overlap height from the group so wrappers and differently sized avatars share one row\n   * contract.\n   */\n  .v-avatar-group > * + * {\n    margin-inline-start: calc(var(--control-height) * -0.3);\n  }\n\n  /* On hover, or as soon as something inside it takes focus, a disc rises above its\n     neighbours so it is seen whole rather than clipped by the next one. */\n  .v-avatar-group > *:hover,\n  .v-avatar-group > *:focus-within {\n    z-index: 1;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAmDA,IAAM,IAAQ,GAQR,IAAY,QAAmB,EAAM,KAAK;EAYhD,EAAQ,GAAgB;GACtB,IAAI,OAAO;IACT,OAAO,EAAM;GACf;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;EACF,CAAC;EAED,IAAM,IAAQ,EAAa,GAGrB,IAAe,QACnB,EAAM,QAAQ,KAAA,KAAa,EAAM,MAAM,IAAI,EAAM,MAAM,MAAM,GAAG,EAAM,GAAG,IAAI,EAAM,KACrF,GACM,IAAgB,QAAe,EAAM,MAAM,SAAS,EAAa,MAAM,MAAM,GAI7E,UAAuB,EAAa,OAEpC,IAAY,QAChB,EAAM,cAAc,KAAA,IAAyD,KAAA,IAA7C,EAAE,uBAAuB,EAAM,UAAU,CAC3E,GAMM,IAAoB,QAA2B,EAAM,QAAA,IAA2B;yBAIpF,EAYM,OAAA;GAXJ,OAAM;GACN,MAAK;GACJ,cAAY,EAAA,CAAA;GACZ,OAAK,EAAE,EAAA,KAAS;GAChB,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;YAE9B,EAAkC,EAAlB,CAAc,CAAA,IAClB,EAAA,QAAa,IAAzB,EAEO,EAAA,QAAA,YAAA,EAFyC,OAAO,EAAA,MAAa,SAE7D,CADL,EAAuC,GAAA,MAAA;oBAA7B,CAAA,EAAD,MAAC,EAAG,EAAA,KAAa,GAAA,CAAA,CAAA,CAAA"}

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

@@ -4,10 +4,6 @@ export interface AvatarGroupContext {
     size?: AvatarSize;
     compact?: boolean;
 }
-/**
- * The size of an avatar that neither names one nor sits in a group that does. VAvatar and
- * VAvatarGroup both read it: the group sets `--control-height` at its own level, for the
- * overlap, so the two cannot disagree on what an unsized avatar measures.
- */
+/** The size of an avatar that neither names one nor sits in a group that does. */
 export declare const AVATAR_DEFAULT_SIZE: AvatarSize;
 export declare const avatarGroupKey: InjectionKey<AvatarGroupContext>;

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VAvatar/context.ts"],"sourcesContent":["/**\n * This is what a VAvatarGroup passes down to the VAvatars it contains. Sizing a\n * row of avatars is a decision that belongs to the row, so the group announces\n * its size and its compact density once and every avatar inside picks them up,\n * instead of the writer repeating the same two props on each one.\n *\n * The two members are arbitrated differently, and on purpose:\n *\n * - `size` is a fallback: an avatar that was given an explicit size keeps it, one that was\n *   not takes the group's, and one that has neither falls back to\n *   `AVATAR_DEFAULT_SIZE` (`props.size ?? group.size ?? AVATAR_DEFAULT_SIZE`).\n * - `compact` is CUMULATIVE, the VButtonGroup `disabled` model (`props.compact ||\n *   group.compact`): a compact group has no avatar that can opt back out, and one avatar\n *   set compact in a regular group is compact alone. A boolean prop defaulting to `false`\n *   has no way to say \"no opinion\", so a fallback could never let the avatar refuse.\n */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { AvatarSize } from './VAvatar.vue'\n\nexport interface AvatarGroupContext {\n  size?: AvatarSize\n  compact?: boolean\n}\n\n/**\n * The size of an avatar that neither names one nor sits in a group that does. VAvatar and\n * VAvatarGroup both read it: the group sets `--control-height` at its own level, for the\n * overlap, so the two cannot disagree on what an unsized avatar measures.\n */\nexport const AVATAR_DEFAULT_SIZE: AvatarSize = 'md'\n\nexport const avatarGroupKey: InjectionKey<AvatarGroupContext> = Symbol('v-avatar-group')\n"],"mappings":";AAiCA,IAAa,IAAmD,OAAO,gBAAgB"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VAvatar/context.ts"],"sourcesContent":["/**\n * Explicit avatar size overrides the group fallback. Compact is cumulative, so a compact group\n * cannot have an expanded child.\n */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { AvatarSize } from './VAvatar.vue'\n\nexport interface AvatarGroupContext {\n  size?: AvatarSize\n  compact?: boolean\n}\n\n/** The size of an avatar that neither names one nor sits in a group that does. */\nexport const AVATAR_DEFAULT_SIZE: AvatarSize = 'md'\n\nexport const avatarGroupKey: InjectionKey<AvatarGroupContext> = Symbol('v-avatar-group')\n"],"mappings":";AAiBA,IAAa,IAAmD,OAAO,gBAAgB"}