vectis-ui 0.1.0 → 0.8.0

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

@@ -1,45 +1,60 @@
 import { IconSource } from '../VIcon/types.js';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-/**
- * A round avatar standing for a person or an entity. It shows the best of what it
- * was given, in that order: the picture, failing that an icon, failing that the
- * initials taken from the name, and failing that whatever the default slot holds —
- * the escape hatch VAvatarGroup uses to render its "+X" overflow badge.
- *
- * Four things here genuinely need JavaScript. A picture that fails to download
- * reports it as a DOM event and nothing else, so the script listens for it and
- * hands over to the initials rather than leaving an empty circle. The initials and
- * the automatic colour are both computed from the name, which is arithmetic no
- * stylesheet can do. A disabled link has no native equivalent of a disabled
- * button, so it is turned inert by hand (its `href` is removed, `aria-disabled`
- * announces the state and the click handler is dropped). Finally the attributes
- * the consumer passes are split so that `style` never reaches the element
- * directly: the component has to merge its own `--avatar-hue`/`--custom-color`
- * into it first, and a plain fallthrough would overwrite them.
- */
 interface AvatarProps {
-    /** Image URL (priority 1). */
+    /**
+     * The picture to show. It is what the avatar prefers above everything else, and an image
+     * that fails to load hands over to the icon or the initials rather than leaving a gap.
+     */
     src?: string;
-    /** Icon shown in the absence of an image (priority 2): a name, or an explicit render. */
+    /**
+     * The icon to show when there is no picture. It comes before the initials, so an avatar
+     * given both an icon and a name shows the icon.
+     */
     icon?: IconSource;
-    /** Full name — the default alt, the source of the initials and the seed of the auto hue. */
+    /**
+     * 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.
+     */
     name?: string;
-    /** Explicit alt/label (wins over `name`). */
+    /**
+     * 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`.
+     */
     alt?: string;
     /**
-     * Custom colour (hex, CSS name or oklch()) which REPLACES the auto hue: set inline
-     * as `--custom-color`. Otherwise, in the absence of an image, a deterministic OKLCH
-     * hue is derived from `name`.
+     * A colour of your own, as a hex value, a CSS colour name or an `oklch()`. It REPLACES the
+     * hue otherwise derived from `name`, and the text on it is always white, so a light colour
+     * is the consumer's own risk.
      */
     color?: string;
-    /** Default `md`. `undefined` = inherited from an enclosing VAvatarGroup. */
+    /**
+     * The diameter of the disc, from the size scale shared by every control. Leaving it out
+     * inside a VAvatarGroup takes the group's size, which is the point of not defaulting it
+     * here; on its own it is `md`.
+     */
     size?: AvatarSize;
-    /** Height reduced by 4px (like the other controls). */
+    /**
+     * 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.
+     */
     compact?: boolean;
-    /** Rendered as `<a>`. disabled → an inert link (href removed + aria-disabled). */
+    /**
+     * Turns the avatar into an `<a>` pointing at this address. A disabled link becomes inert:
+     * the address is dropped, so it can be neither focused nor followed.
+     */
     href?: string;
-    /** Rendered as `<button type="button">` (a VTooltip's #trigger slot plugs in through fallthrough). */
+    /**
+     * Turns the avatar into a `<button>`. It is ignored as soon as `href` makes it a link.
+     * A VTooltip wrapping the avatar reaches this button through fallthrough.
+     */
     clickable?: boolean;
+    /**
+     * Makes an interactive avatar unusable: it stops responding, leaves the tab order and greys
+     * out. It says nothing on a plain avatar, which was never interactive to begin with.
+     */
     disabled?: boolean;
 }
 type __VLS_Slots = {
@@ -48,8 +63,8 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import('vue').DefineComponent<AvatarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
     alt: string;
-    size: AvatarSize;
     name: string;
+    size: AvatarSize;
     src: string;
     compact: boolean;
     href: string;

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\">\nimport { computed, inject, ref, useAttrs, 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 { avatarGroupKey } from './context'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\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 (its `href` is removed, `aria-disabled`\n * announces the state and the click handler is dropped). 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 */\ninterface AvatarProps {\n  /** Image URL (priority 1). */\n  src?: string\n  /** Icon shown in the absence of an image (priority 2): a name, or an explicit render. */\n  icon?: IconSource\n  /** Full name — the default alt, the source of the initials and the seed of the auto hue. */\n  name?: string\n  /** Explicit alt/label (wins over `name`). */\n  alt?: string\n  /**\n   * Custom colour (hex, CSS name or oklch()) which REPLACES the auto hue: set inline\n   * as `--custom-color`. Otherwise, in the absence of an image, a deterministic OKLCH\n   * hue is derived from `name`.\n   */\n  color?: string\n  /** Default `md`. `undefined` = inherited from an enclosing VAvatarGroup. */\n  size?: AvatarSize\n  /** Height reduced by 4px (like the other controls). */\n  compact?: boolean\n  /** Rendered as `<a>`. disabled → an inert link (href removed + aria-disabled). */\n  href?: string\n  /** Rendered as `<button type=\"button\">` (a VTooltip's #trigger slot plugs in through fallthrough). */\n  clickable?: boolean\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// Size/compact: the explicit prop, else the group's, else the default.\nconst resolvedSize = computed<AvatarSize>(() => props.size ?? group?.size ?? 'md')\nconst resolvedCompact = computed(() => props.compact || (group?.compact ?? false))\n\n/* Interactivity priority: href > clickable > static. */\nconst isLink = computed(() => props.href !== undefined)\nconst isInteractive = computed(() => isLink.value || props.clickable)\nconst tag = computed(() => (isLink.value ? 'a' : props.clickable ? 'button' : 'span'))\nconst isInertLink = computed(() => isLink.value && props.disabled)\n\n// @fallback — the image failed to load: the initials take over, so an avatar is\n// 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\nconst accessibleName = computed(() => props.alt ?? props.name)\n\nconst initials = computed(() => {\n  if (!props.name) return ''\n  return props.name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((part) => part[0]?.toLocaleUpperCase() ?? '')\n    .join('')\n})\n\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 */\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\nconst rootStyle = computed<StyleValue>(() => [\n  props.color !== undefined\n    ? { '--custom-color': props.color }\n    : isAuto.value\n      ? { '--avatar-hue': String(hue.value) }\n      : undefined,\n  attrs.style as StyleValue,\n])\n\n// Fallthrough without `style` (handled by rootStyle); onClick removed on an inert link.\nconst passedAttrs = computed(() => {\n  const rest = { ...(attrs as Record<string, unknown>) }\n  delete rest.style\n  if (isInertLink.value) delete rest.onClick\n  return rest\n})\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\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=\"isLink && !disabled ? href : undefined\"\n    :type=\"tag === 'button' ? 'button' : undefined\"\n    :disabled=\"tag === 'button' ? disabled : undefined\"\n    :aria-disabled=\"isInertLink ? 'true' : undefined\"\n    :role=\"!isInteractive && !showImage && accessibleName ? 'img' : undefined\"\n    :aria-label=\"!showImage ? accessibleName : undefined\"\n  >\n    <img\n      v-if=\"showImage\"\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-full);\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    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  /* Auto hue */\n  .v-avatar[data-auto] {\n    --avatar-bg: oklch(0.9 0.06 var(--avatar-hue));\n    --avatar-text: oklch(0.42 0.13 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  [data-theme='dark'] .v-avatar[data-auto] {\n    --avatar-bg: oklch(0.42 0.09 var(--avatar-hue));\n    --avatar-text: oklch(0.92 0.05 var(--avatar-hue));\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</style>\n"],"mappings":""}
+{"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, ref, useAttrs, 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 { useInertLink } from '../../composables/useInertLink'\nimport { customColorStyle } from '../../utils/css'\n\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`.\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// @fallback — the image failed to load: the initials take over, so an avatar is\n// 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\nconst accessibleName = computed(() => props.alt ?? props.name)\n\nconst initials = computed(() => {\n  if (!props.name) return ''\n  return props.name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((part) => part[0]?.toLocaleUpperCase() ?? '')\n    .join('')\n})\n\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// 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 && accessibleName.value\n    ? 'img'\n    : (passedAttrs.value.role as string | undefined),\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    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    :aria-disabled=\"isInertLink ? 'true' : undefined\"\n    :role=\"role\"\n    :aria-label=\"!showImage ? accessibleName : undefined\"\n  >\n    <img\n      v-if=\"showImage\"\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</style>\n"],"mappings":""}

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

@@ -1,12 +1,14 @@
-import e from "../VIcon/VIcon.js";
-import { iconProps as t } from "../VIcon/iconProps.js";
-import { avatarGroupKey as n } from "./context.js";
-import { computed as r, createBlock as i, createElementBlock as a, createElementVNode as o, defineComponent as s, inject as c, mergeProps as l, openBlock as u, ref as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useAttrs as g, watch as _, withCtx as v } from "vue";
+import { iconProps as e } from "../VIcon/iconProps.js";
+import { customColorStyle as t } from "../../utils/css.js";
+import n from "../VIcon/VIcon.js";
+import { useInertLink as r } from "../../composables/useInertLink.js";
+import { avatarGroupKey as i } from "./context.js";
+import { computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, defineComponent as l, inject as u, mergeProps as d, openBlock as f, ref as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, useAttrs as v, watch as y, withCtx as b } from "vue";
 //#region src/components/VAvatar/VAvatar.vue?vue&type=script&setup=true&lang.ts
-var y = ["src", "alt"], b = {
+var x = ["src", "alt"], S = {
 	class: "v-avatar-initials",
 	"aria-hidden": "true"
-}, x = /*@__PURE__*/ s({
+}, C = /*@__PURE__*/ l({
 	inheritAttrs: !1,
 	__name: "VAvatar",
 	props: {
@@ -30,41 +32,42 @@ var y = ["src", "alt"], b = {
 			default: !1
 		}
 	},
-	setup(s) {
-		let x = s, S = g(), C = c(n, null), w = r(() => x.size ?? C?.size ?? "md"), T = r(() => x.compact || (C?.compact ?? !1)), E = r(() => x.href !== void 0), D = r(() => E.value || x.clickable), O = r(() => E.value ? "a" : x.clickable ? "button" : "span"), k = r(() => E.value && x.disabled), A = d(!1);
-		_(() => x.src, () => {
-			A.value = !1;
+	setup(l) {
+		let C = l, w = v(), T = u(i, null), E = a(() => C.size ?? T?.size ?? "md"), D = a(() => C.compact || !!T?.compact), { isLink: O, isInertLink: k, linkHref: A, attrs: j } = r({
+			href: () => C.href,
+			inert: () => C.disabled,
+			attrs: () => Object.fromEntries(Object.entries(w).filter(([e]) => e !== "style"))
+		}), M = a(() => O.value || C.clickable), N = a(() => O.value ? "a" : C.clickable ? "button" : "span"), P = p(!1);
+		y(() => C.src, () => {
+			P.value = !1;
 		});
-		let j = r(() => !!x.src && !A.value), M = r(() => x.alt ?? x.name), N = r(() => x.name ? x.name.split(/\s+/).slice(0, 2).map((e) => e[0]?.toLocaleUpperCase() ?? "").join("") : ""), P = r(() => {
-			if (!x.name) return null;
+		let F = a(() => !!C.src && !P.value), I = a(() => C.alt ?? C.name), L = a(() => C.name ? C.name.split(/\s+/).slice(0, 2).map((e) => e[0]?.toLocaleUpperCase() ?? "").join("") : ""), R = a(() => {
+			if (!C.name) return null;
 			let e = 0;
-			for (let t = 0; t < x.name.length; t++) e = e * 31 + x.name.charCodeAt(t) | 0;
+			for (let t = 0; t < C.name.length; t++) e = e * 31 + C.name.charCodeAt(t) | 0;
 			return Math.abs(e) % 360;
-		}), F = r(() => x.color === void 0 && P.value !== null), I = r(() => [x.color === void 0 ? F.value ? { "--avatar-hue": String(P.value) } : void 0 : { "--custom-color": x.color }, S.style]), L = r(() => {
-			let e = { ...S };
-			return delete e.style, k.value && delete e.onClick, e;
-		});
-		return (n, r) => (u(), i(p(O.value), l(L.value, {
+		}), z = a(() => C.color === void 0 && R.value !== null), B = a(() => !M.value && !F.value && I.value ? "img" : j.value.role), V = a(() => [t(C.color) ?? (z.value ? { "--avatar-hue": String(R.value) } : void 0), w.style]);
+		return (t, r) => (f(), o(h(N.value), d(_(j), {
 			class: "v-avatar v-control",
-			style: I.value,
-			"data-size": w.value,
-			"data-compact": T.value ? "" : void 0,
-			"data-custom": s.color === void 0 ? void 0 : "",
-			"data-auto": F.value ? "" : void 0,
-			href: E.value && !s.disabled ? s.href : void 0,
-			type: O.value === "button" ? "button" : void 0,
-			disabled: O.value === "button" ? s.disabled : void 0,
-			"aria-disabled": k.value ? "true" : void 0,
-			role: !D.value && !j.value && M.value ? "img" : void 0,
-			"aria-label": j.value ? void 0 : M.value
+			style: V.value,
+			"data-size": E.value,
+			"data-compact": D.value ? "" : void 0,
+			"data-custom": l.color === void 0 ? void 0 : "",
+			"data-auto": z.value ? "" : void 0,
+			href: _(A),
+			type: N.value === "button" ? "button" : void 0,
+			disabled: N.value === "button" ? l.disabled : void 0,
+			"aria-disabled": _(k) ? "true" : void 0,
+			role: B.value,
+			"aria-label": F.value ? void 0 : I.value
 		}), {
-			default: v(() => [j.value ? (u(), a("img", {
+			default: b(() => [F.value ? (f(), s("img", {
 				key: 0,
 				class: "v-avatar-image",
-				src: s.src,
-				alt: s.alt ?? s.name ?? "",
-				onError: r[0] ||= (e) => A.value = !0
-			}, null, 40, y)) : s.icon ? (u(), i(e, l({ key: 1 }, h(t)(s.icon), { class: "v-avatar-icon" }), null, 16)) : f(n.$slots, "default", {}, () => [o("span", b, m(N.value), 1)], void 0, 2)]),
+				src: l.src,
+				alt: l.alt ?? l.name ?? "",
+				onError: r[0] ||= (e) => P.value = !0
+			}, null, 40, x)) : l.icon ? (f(), o(n, d({ key: 1 }, _(e)(l.icon), { class: "v-avatar-icon" }), null, 16)) : m(t.$slots, "default", {}, () => [c("span", S, g(L.value), 1)], void 0, 2)]),
 			_: 3
 		}, 16, [
 			"style",
@@ -82,6 +85,6 @@ var y = ["src", "alt"], b = {
 	}
 });
 //#endregion
-export { x as default };
+export { C as default };
 
 //# sourceMappingURL=VAvatar.vue_vue_type_script_setup_true_lang.js.map

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\">\nimport { computed, inject, ref, useAttrs, 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 { avatarGroupKey } from './context'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\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 (its `href` is removed, `aria-disabled`\n * announces the state and the click handler is dropped). 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 */\ninterface AvatarProps {\n  /** Image URL (priority 1). */\n  src?: string\n  /** Icon shown in the absence of an image (priority 2): a name, or an explicit render. */\n  icon?: IconSource\n  /** Full name — the default alt, the source of the initials and the seed of the auto hue. */\n  name?: string\n  /** Explicit alt/label (wins over `name`). */\n  alt?: string\n  /**\n   * Custom colour (hex, CSS name or oklch()) which REPLACES the auto hue: set inline\n   * as `--custom-color`. Otherwise, in the absence of an image, a deterministic OKLCH\n   * hue is derived from `name`.\n   */\n  color?: string\n  /** Default `md`. `undefined` = inherited from an enclosing VAvatarGroup. */\n  size?: AvatarSize\n  /** Height reduced by 4px (like the other controls). */\n  compact?: boolean\n  /** Rendered as `<a>`. disabled → an inert link (href removed + aria-disabled). */\n  href?: string\n  /** Rendered as `<button type=\"button\">` (a VTooltip's #trigger slot plugs in through fallthrough). */\n  clickable?: boolean\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// Size/compact: the explicit prop, else the group's, else the default.\nconst resolvedSize = computed<AvatarSize>(() => props.size ?? group?.size ?? 'md')\nconst resolvedCompact = computed(() => props.compact || (group?.compact ?? false))\n\n/* Interactivity priority: href > clickable > static. */\nconst isLink = computed(() => props.href !== undefined)\nconst isInteractive = computed(() => isLink.value || props.clickable)\nconst tag = computed(() => (isLink.value ? 'a' : props.clickable ? 'button' : 'span'))\nconst isInertLink = computed(() => isLink.value && props.disabled)\n\n// @fallback — the image failed to load: the initials take over, so an avatar is\n// 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\nconst accessibleName = computed(() => props.alt ?? props.name)\n\nconst initials = computed(() => {\n  if (!props.name) return ''\n  return props.name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((part) => part[0]?.toLocaleUpperCase() ?? '')\n    .join('')\n})\n\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 */\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\nconst rootStyle = computed<StyleValue>(() => [\n  props.color !== undefined\n    ? { '--custom-color': props.color }\n    : isAuto.value\n      ? { '--avatar-hue': String(hue.value) }\n      : undefined,\n  attrs.style as StyleValue,\n])\n\n// Fallthrough without `style` (handled by rootStyle); onClick removed on an inert link.\nconst passedAttrs = computed(() => {\n  const rest = { ...(attrs as Record<string, unknown>) }\n  delete rest.style\n  if (isInertLink.value) delete rest.onClick\n  return rest\n})\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\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=\"isLink && !disabled ? href : undefined\"\n    :type=\"tag === 'button' ? 'button' : undefined\"\n    :disabled=\"tag === 'button' ? disabled : undefined\"\n    :aria-disabled=\"isInertLink ? 'true' : undefined\"\n    :role=\"!isInteractive && !showImage && accessibleName ? 'img' : undefined\"\n    :aria-label=\"!showImage ? accessibleName : undefined\"\n  >\n    <img\n      v-if=\"showImage\"\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-full);\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    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  /* Auto hue */\n  .v-avatar[data-auto] {\n    --avatar-bg: oklch(0.9 0.06 var(--avatar-hue));\n    --avatar-text: oklch(0.42 0.13 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  [data-theme='dark'] .v-avatar[data-auto] {\n    --avatar-bg: oklch(0.42 0.09 var(--avatar-hue));\n    --avatar-text: oklch(0.92 0.05 var(--avatar-hue));\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</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDA,IAAM,IAAQ,GAoBR,IAAQ,EAAS,GACjB,IAAQ,EAAO,GAAgB,IAAI,GAGnC,IAAe,QAA2B,EAAM,QAAQ,GAAO,QAAQ,IAAI,GAC3E,IAAkB,QAAe,EAAM,YAAY,GAAO,WAAW,GAAM,GAG3E,IAAS,QAAe,EAAM,SAAS,KAAA,CAAS,GAChD,IAAgB,QAAe,EAAO,SAAS,EAAM,SAAS,GAC9D,IAAM,QAAgB,EAAO,QAAQ,MAAM,EAAM,YAAY,WAAW,MAAO,GAC/E,IAAc,QAAe,EAAO,SAAS,EAAM,QAAQ,GAI3D,IAAS,EAAI,EAAK;EACxB,QACQ,EAAM,WACN;GACJ,EAAO,QAAQ;EACjB,CACF;EACA,IAAM,IAAY,QAAe,EAAQ,EAAM,OAAQ,CAAC,EAAO,KAAK,GAE9D,IAAiB,QAAe,EAAM,OAAO,EAAM,IAAI,GAEvD,IAAW,QACV,EAAM,OACJ,EAAM,KACV,MAAM,KAAK,CAAA,CACX,MAAM,GAAG,CAAC,CAAA,CACV,KAAK,MAAS,EAAK,EAAE,EAAE,kBAAkB,KAAK,EAAE,CAAA,CAChD,KAAK,EAAE,IALc,EAMzB,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,GAEvE,IAAY,QAA2B,CAC3C,EAAM,UAAU,KAAA,IAEZ,EAAO,QACL,EAAE,gBAAgB,OAAO,EAAI,KAAK,EAAE,IACpC,KAAA,IAHF,EAAE,kBAAkB,EAAM,MAAM,GAIpC,EAAM,KACR,CAAC,GAGK,IAAc,QAAe;GACjC,IAAM,IAAO,EAAE,GAAI,EAAkC;GAGrD,OAFA,OAAO,EAAK,OACR,EAAY,SAAO,OAAO,EAAK,SAC5B;EACT,CAAC;yBAIC,EA2BY,EA1BL,EAAA,KAAG,GADV,EAEU,EAyBE,OAzBS;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,SAAM,CAAK,EAAA,WAAW,EAAA,OAAO,KAAA;GACnC,MAAM,EAAA,UAAG,WAAA,WAA2B,KAAA;GACpC,UAAU,EAAA,UAAG,WAAgB,EAAA,WAAW,KAAA;GACxC,iBAAe,EAAA,QAAW,SAAY,KAAA;GACtC,MAAI,CAAG,EAAA,SAAa,CAAK,EAAA,SAAa,EAAA,QAAc,QAAW,KAAA;GAC/D,cAAa,EAAA,QAA6B,KAAA,IAAjB,EAAA;;oBAQxB,CALM,EAAA,SAAA,EAAA,GADR,EAME,OAAA;;IAJA,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 * 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, ref, useAttrs, 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 { useInertLink } from '../../composables/useInertLink'\nimport { customColorStyle } from '../../utils/css'\n\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`.\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// @fallback — the image failed to load: the initials take over, so an avatar is\n// 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\nconst accessibleName = computed(() => props.alt ?? props.name)\n\nconst initials = computed(() => {\n  if (!props.name) return ''\n  return props.name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((part) => part[0]?.toLocaleUpperCase() ?? '')\n    .join('')\n})\n\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// 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 && accessibleName.value\n    ? 'img'\n    : (passedAttrs.value.role as string | undefined),\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    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    :aria-disabled=\"isInertLink ? 'true' : undefined\"\n    :role=\"role\"\n    :aria-label=\"!showImage ? accessibleName : undefined\"\n  >\n    <img\n      v-if=\"showImage\"\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</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyFA,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,GAE9D,IAAiB,QAAe,EAAM,OAAO,EAAM,IAAI,GAEvD,IAAW,QACV,EAAM,OACJ,EAAM,KACV,MAAM,KAAK,CAAA,CACX,MAAM,GAAG,CAAC,CAAA,CACV,KAAK,MAAS,EAAK,EAAE,EAAE,kBAAkB,KAAK,EAAE,CAAA,CAChD,KAAK,EAAE,IALc,EAMzB,GAaK,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,GAIvE,IAAO,QACX,CAAC,EAAc,SAAS,CAAC,EAAU,SAAS,EAAe,QACvD,QACC,EAAY,MAAM,IACzB,GAEM,IAAY,QAA2B,CAC3C,EAAiB,EAAM,KAAK,MACzB,EAAO,QAAQ,EAAE,gBAAgB,OAAO,EAAI,KAAK,EAAE,IAAI,KAAA,IAC1D,EAAM,KACR,CAAC;yBAIC,EA2BY,EA1BL,EAAA,KAAG,GADV,EAEU,EAyBE,CAAA,GAzBS;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,iBAAe,EAAA,CAAA,IAAW,SAAY,KAAA;GACtC,MAAM,EAAA;GACN,cAAa,EAAA,QAA6B,KAAA,IAAjB,EAAA;;oBAQxB,CALM,EAAA,SAAA,EAAA,GADR,EAME,OAAA;;IAJA,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

@@ -1,18 +1,4 @@
 import { AvatarSize } from './VAvatar.js';
-/**
- * Stacks several VAvatars into an overlapping row, the usual way of showing the
- * members of a team or the participants in a conversation. Each disc bites into the
- * one before it and, coming later in the document, is painted over it: the
- * browser's own paint order does the work, no positioning code is involved. A ring
- * in `--avatar-ring-color` surrounds every disc so the overlapping edges stay
- * distinct from one another.
- *
- * Two things here do need JavaScript. Counting the avatars the group was given and
- * keeping only the first few, so that the rest can be summed up as a single "+X"
- * disc, is something neither HTML nor CSS can express. And the size and the density
- * chosen on the group are handed down to the avatars inside through Vue's
- * provide/inject.
- */
 interface AvatarGroupProps {
     /**
      * How many avatars to show before the remaining ones are summed up as a single
@@ -24,7 +10,10 @@ interface AvatarGroupProps {
      * of its own keeps it.
      */
     size?: AvatarSize;
-    /** Applies the reduced density to the avatars inside, on the same terms as `size`. */
+    /**
+     * Applies the reduced density to every avatar inside. Unlike `size` it is cumulative: an
+     * avatar cannot opt back out of a compact group.
+     */
     compact?: boolean;
     /**
      * The colour of the ring drawn around each disc. It defaults to the page
@@ -46,8 +35,8 @@ type __VLS_Slots = {
 declare const __VLS_base: import('vue').DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
     size: AvatarSize;
     compact: boolean;
-    max: number;
     ringColor: string;
+    max: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1 +1 @@
-{"version":3,"file":"VAvatarGroup.js","names":[],"sources":["../../../src/components/VAvatar/VAvatarGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, useSlots } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VAvatar from './VAvatar.vue'\nimport type { AvatarSize } from './VAvatar.vue'\nimport { avatarGroupKey } from './context'\n\nimport { flattenSlot } from '../../utils/vnode'\n\n// @ssr @core — the number of avatars is read from the slot's VNODES through\n// `flattenSlot`, 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 * Stacks several VAvatars into an overlapping row, the usual way of showing the\n * members of a team or the participants in a conversation. Each disc bites into the\n * one before it and, coming later in the document, is painted over it: the\n * browser's own paint order does the work, no positioning code is involved. A ring\n * in `--avatar-ring-color` surrounds every disc so the overlapping edges stay\n * distinct from one another.\n *\n * Two things here do need JavaScript. Counting the avatars the group was given and\n * keeping only the first few, so that the rest can be summed up as a single \"+X\"\n * disc, is something neither HTML nor CSS can express. And the size and the density\n * chosen on the group are handed down to the avatars inside through Vue's\n * provide/inject.\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  /** Applies the reduced density to the avatars inside, on the same terms as `size`. */\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\nconst props = withDefaults(defineProps<AvatarGroupProps>(), {\n  max: undefined,\n  size: undefined,\n  compact: false,\n  ringColor: undefined,\n})\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: { count: number }): unknown\n}>()\n\nprovide(avatarGroupKey, {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n})\n\nconst slots = useSlots()\n\nconst items = computed(() => flattenSlot(slots.default?.()))\nconst visibleItems = computed(() =>\n  props.max != null ? 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 ?? 'md')\n</script>\n\n<template>\n  <div\n    class=\"v-avatar-group v-control\"\n    role=\"group\"\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 — the number of avatars is read from the slot's VNODES through\n// `flattenSlot`, 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, useSlots } 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 { flattenSlot } from '../../utils/vnode'\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\nconst props = withDefaults(defineProps<AvatarGroupProps>(), {\n  max: undefined,\n  size: undefined,\n  compact: false,\n  ringColor: undefined,\n})\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: { count: number }): unknown\n}>()\n\nprovide(avatarGroupKey, {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n})\n\nconst slots = useSlots()\n\nconst items = computed(() => flattenSlot(slots.default?.()))\n// `max: 0` means \"no limit\", as documented: a truthiness test, never `!= null`, which would\n// slice everything away and sum the whole group into the \"+X\" disc.\nconst visibleItems = computed(() => (props.max ? items.value.slice(0, props.max) : items.value))\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    :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":""}

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

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

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\">\nimport { computed, provide, useSlots } from 'vue'\nimport type { StyleValue } from 'vue'\n\nimport VAvatar from './VAvatar.vue'\nimport type { AvatarSize } from './VAvatar.vue'\nimport { avatarGroupKey } from './context'\n\nimport { flattenSlot } from '../../utils/vnode'\n\n// @ssr @core — the number of avatars is read from the slot's VNODES through\n// `flattenSlot`, 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 * Stacks several VAvatars into an overlapping row, the usual way of showing the\n * members of a team or the participants in a conversation. Each disc bites into the\n * one before it and, coming later in the document, is painted over it: the\n * browser's own paint order does the work, no positioning code is involved. A ring\n * in `--avatar-ring-color` surrounds every disc so the overlapping edges stay\n * distinct from one another.\n *\n * Two things here do need JavaScript. Counting the avatars the group was given and\n * keeping only the first few, so that the rest can be summed up as a single \"+X\"\n * disc, is something neither HTML nor CSS can express. And the size and the density\n * chosen on the group are handed down to the avatars inside through Vue's\n * provide/inject.\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  /** Applies the reduced density to the avatars inside, on the same terms as `size`. */\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\nconst props = withDefaults(defineProps<AvatarGroupProps>(), {\n  max: undefined,\n  size: undefined,\n  compact: false,\n  ringColor: undefined,\n})\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: { count: number }): unknown\n}>()\n\nprovide(avatarGroupKey, {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n})\n\nconst slots = useSlots()\n\nconst items = computed(() => flattenSlot(slots.default?.()))\nconst visibleItems = computed(() =>\n  props.max != null ? 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 ?? 'md')\n</script>\n\n<template>\n  <div\n    class=\"v-avatar-group v-control\"\n    role=\"group\"\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":";;;;;;;;;;;;;;;;;EAgDA,IAAM,IAAQ;EAiBd,EAAQ,GAAgB;GACtB,IAAI,OAAO;IACT,OAAO,EAAM;GACf;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;EACF,CAAC;EAED,IAAM,IAAQ,EAAS,GAEjB,IAAQ,QAAe,EAAY,EAAM,UAAU,CAAC,CAAC,GACrD,IAAe,QACnB,EAAM,OAAO,OAAyC,EAAM,QAAxC,EAAM,MAAM,MAAM,GAAG,EAAM,GAAG,CACpD,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,QAAQ,IAAI;yBAIrE,EAWM,OAAA;GAVJ,OAAM;GACN,MAAK;GACJ,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 — the number of avatars is read from the slot's VNODES through\n// `flattenSlot`, 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, useSlots } 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 { flattenSlot } from '../../utils/vnode'\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\nconst props = withDefaults(defineProps<AvatarGroupProps>(), {\n  max: undefined,\n  size: undefined,\n  compact: false,\n  ringColor: undefined,\n})\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: { count: number }): unknown\n}>()\n\nprovide(avatarGroupKey, {\n  get size() {\n    return props.size\n  },\n  get compact() {\n    return props.compact\n  },\n})\n\nconst slots = useSlots()\n\nconst items = computed(() => flattenSlot(slots.default?.()))\n// `max: 0` means \"no limit\", as documented: a truthiness test, never `!= null`, which would\n// slice everything away and sum the whole group into the \"+X\" disc.\nconst visibleItems = computed(() => (props.max ? items.value.slice(0, props.max) : items.value))\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    :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":";;;;;;;;;;;;;;;;;EAiDA,IAAM,IAAQ;EAiBd,EAAQ,GAAgB;GACtB,IAAI,OAAO;IACT,OAAO,EAAM;GACf;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;EACF,CAAC;EAED,IAAM,IAAQ,EAAS,GAEjB,IAAQ,QAAe,EAAY,EAAM,UAAU,CAAC,CAAC,GAGrD,IAAe,QAAgB,EAAM,MAAM,EAAM,MAAM,MAAM,GAAG,EAAM,GAAG,IAAI,EAAM,KAAM,GACzF,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,EAWM,OAAA;GAVJ,OAAM;GACN,MAAK;GACJ,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

@@ -1,17 +1,13 @@
 import { InjectionKey } from 'vue';
 import { AvatarSize } from './VAvatar.js';
-/**
- * This is what a VAvatarGroup passes down to the VAvatars it contains. Sizing a
- * row of avatars is a decision that belongs to the row, so the group announces
- * its size and its compact density once and every avatar inside picks them up,
- * instead of the writer repeating the same two props on each one.
- *
- * The values are only a fallback: an avatar that was given an explicit prop keeps
- * it, an avatar that was not takes the group's, and one that has neither falls
- * back to the default size (`props.size ?? group.size ?? 'md'`).
- */
 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.
+ */
+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":["import type { InjectionKey } from 'vue'\n\nimport type { AvatarSize } from './VAvatar.vue'\n\n/**\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 values are only a fallback: an avatar that was given an explicit prop keeps\n * it, an avatar that was not takes the group's, and one that has neither falls\n * back to the default size (`props.size ?? group.size ?? 'md'`).\n */\nexport interface AvatarGroupContext {\n  size?: AvatarSize\n  compact?: boolean\n}\n\nexport const avatarGroupKey: InjectionKey<AvatarGroupContext> = Symbol('v-avatar-group')\n"],"mappings":";AAmBA,IAAa,IAAmD,OAAO,gBAAgB"}
+{"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"}

package/dist/components/VBadge/VBadge.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-badge-host{align-items:center;gap:var(--vectis-space-2);display:inline-flex;position:relative}.v-badge{--vectis-icon-size:var(--vectis-icon-size-sm);--vectis-icon-opsz:20;height:var(--vectis-control-size-badge-h);min-width:var(--vectis-control-size-badge-h);padding-inline:var(--vectis-space-1);border-radius:var(--vectis-radius-pill);background:var(--badge-bg);font-family:var(--vectis-text-family);font-size:var(--vectis-text-caption-size);font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);color:var(--tone-text-fallback);justify-content:center;align-items:center;display:inline-flex}@supports (color:contrast-color(red)){.v-badge{color:contrast-color(var(--badge-bg))}}.v-badge[data-tone=accent]{--badge-bg:var(--vectis-color-accent);--tone-text-fallback:var(--vectis-color-text-on-accent)}.v-badge[data-tone=danger]{--badge-bg:var(--vectis-color-danger);--tone-text-fallback:var(--vectis-color-text-on-accent)}.v-badge[data-tone=success]{--badge-bg:var(--vectis-color-success);--tone-text-fallback:var(--vectis-color-text-on-accent)}.v-badge[data-tone=warning]{--badge-bg:var(--vectis-color-warning);--tone-text-fallback:var(--vectis-color-text-on-warning)}.v-badge[data-tone=neutral]{--badge-bg:var(--vectis-color-text);--tone-text-fallback:var(--vectis-color-surface)}.v-badge[data-custom]{--badge-bg:var(--custom-color);--tone-text-fallback:var(--vectis-color-text-on-accent)}.v-badge[data-icon-only]{padding:0}.v-badge[data-dot]{width:var(--vectis-control-size-badge-dot);height:var(--vectis-control-size-badge-dot);min-width:0;padding:0}.v-badge[data-bordered]{box-shadow:0 0 0 2px var(--vectis-color-surface)}.v-badge-host[data-overlay]>.v-badge{--badge-overlay-x:25%;--badge-overlay-y:-25%;translate:var(--badge-overlay-x) var(--badge-overlay-y);position:absolute;inset-block:0 auto;inset-inline-end:0}.v-badge-host[data-overlay][data-overlay-position=bottom]>.v-badge{--badge-overlay-y:25%;inset-block:auto 0}.v-badge-host[data-overlay]:dir(rtl)>.v-badge{--badge-overlay-x:-25%}}
+@layer vectis.components{.v-badge-host{align-items:center;gap:var(--vectis-space-2);display:inline-flex;position:relative}.v-badge{--vectis-icon-size:var(--vectis-icon-size-sm);--vectis-icon-opsz:20;--badge-ring-color:var(--vectis-color-surface);--badge-bg:var(--tone-bg-solid);--badge-text-fallback:var(--tone-text-solid);height:var(--vectis-control-size-badge-h);min-width:var(--vectis-control-size-badge-h);padding-inline:var(--vectis-space-1);border-radius:var(--vectis-radius-pill);background:var(--badge-bg);font-family:var(--vectis-text-family);font-size:var(--vectis-text-caption-size);font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);color:var(--badge-text-fallback);justify-content:center;align-items:center;display:inline-flex}@supports (color:contrast-color(red)){.v-badge{color:contrast-color(var(--badge-bg))}}.v-badge[data-custom]{--badge-bg:var(--custom-color);--badge-text-fallback:var(--vectis-color-text-on-accent)}.v-badge[data-variant=soft]:not([data-dot]){--badge-bg:var(--tone-bg-soft);color:var(--tone-text-tinted)}.v-badge[data-variant=soft][data-custom]:not([data-dot]){--badge-bg:color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);color:color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 30%)}.v-badge[data-icon-only]{padding:0}.v-badge[data-dot]{width:var(--vectis-control-size-badge-dot);height:var(--vectis-control-size-badge-dot);min-width:0;padding:0}.v-badge[data-bordered]{box-shadow:0 0 0 var(--vectis-control-size-badge-ring) var(--badge-ring-color)}.v-badge-host[data-overlay]>.v-badge{--badge-overlay-x:25%;--badge-overlay-y:-25%;translate:var(--badge-overlay-x) var(--badge-overlay-y);z-index:1;position:absolute;inset-block:0 auto;inset-inline-end:0}.v-badge-host[data-overlay][data-overlay-position=bottom]>.v-badge{--badge-overlay-y:25%;inset-block:auto 0}.v-badge-host[data-overlay]:dir(rtl)>.v-badge{--badge-overlay-x:-25%}}

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

@@ -1,18 +1,27 @@
 import { IconSource } from '../VIcon/types.js';
+export type BadgeVariant = 'solid' | 'soft';
 export type BadgeTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning';
 export type BadgeOverlayPosition = 'top' | 'bottom';
 interface BadgeProps {
     /**
-     * The meaning the badge carries, expressed as a colour. The pill is filled with
-     * it and the text adapts to stay readable; there is a single, fully coloured
-     * rendering, so no variant to choose alongside it.
+     * How strongly the badge is painted: filled with the full colour (`solid`, the
+     * default), or a tinted background with the text in the colour (`soft`), for a
+     * count that should not draw the eye. A `dot` is always solid: with no content to
+     * tint, a soft dot would be a pale disc barely distinguishable from the page.
+     */
+    variant?: BadgeVariant;
+    /**
+     * The meaning the badge carries, expressed as a colour. A solid badge is filled
+     * with it and its text adapts to stay readable; a soft one is tinted with it and
+     * writes its text in it.
      */
     tone?: BadgeTone;
     /**
-     * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. On
-     * browsers that support `contrast-color()` the text turns black or white by
-     * itself; everywhere else it falls back to white, so with a light colour the
-     * contrast is yours to check.
+     * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. On a
+     * solid badge, browsers that support `contrast-color()` turn the text black or
+     * white by themselves; everywhere else it falls back to white, so with a light
+     * colour the contrast is yours to check. A soft badge derives its background and
+     * text from that colour mixed with the theme's surface and text.
      */
     color?: string;
     /**
@@ -44,11 +53,18 @@ interface BadgeProps {
      */
     overlayPosition?: BadgeOverlayPosition;
     /**
-     * Draws a 2px ring in the colour of the surface behind the badge
-     * (`--vectis-color-surface`, overridable per subtree), which detaches it from a
-     * busy target such as a picture.
+     * Draws a 2px ring around the badge, in the colour of the surface behind it,
+     * which detaches it from a busy target such as a picture. That colour defaults to
+     * the page background and is named through `ringColor` on any other surface.
      */
     bordered?: boolean;
+    /**
+     * The colour of the ring drawn by `bordered`. It defaults to the page background,
+     * which is what makes the ring read as a gap around the badge; on another surface
+     * (a card, a coloured banner), pass that surface's colour. It does nothing without
+     * `bordered`.
+     */
+    ringColor?: string;
 }
 type __VLS_Slots = {
     /**
@@ -58,11 +74,16 @@ type __VLS_Slots = {
     default?(): unknown;
 };
 declare const __VLS_base: import('vue').DefineComponent<BadgeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+    variant: BadgeVariant;
     tone: BadgeTone;
     icon: IconSource;
     color: string;
     count: number;
+    dot: boolean;
+    overlay: boolean;
     overlayPosition: BadgeOverlayPosition;
+    bordered: boolean;
+    ringColor: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;