vectis-ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"VAccordionItem.js","names":[],"sources":["../../../src/components/VAccordion/VAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { accordionKey } from './context'\n\n/**\n * One section of an accordion: a heading the reader can click, and the content it\n * reveals. It is a native `<details>`/`<summary>` pair, so the browser owns the\n * open and closed state, the keyboard and the accessibility semantics, and this\n * component adds no code of its own for any of them.\n *\n * The opening is animated entirely in CSS, with `::details-content` and\n * `interpolate-size`. Both are recent additions to the language: where they are\n * missing the section simply appears at once, which is the intended fallback.\n */\ninterface AccordionItemProps {\n  /**\n   * The heading of the section, the line that stays visible when it is closed. Use\n   * the `#title` slot instead when the heading needs markup rather than plain text.\n   */\n  title?: string\n  /**\n   * A secondary line under the title, for a short explanation or a status. The\n   * `#subtitle` slot replaces it when markup is needed.\n   */\n  subtitle?: string\n  /**\n   * An icon placed before the title: an icon name, or an explicit render\n   * (`{ src }`, `{ component }`…).\n   */\n  iconStart?: IconSource\n  /**\n   * Renders the section already open. It only sets the state of the first render:\n   * the browser owns it afterwards, so changing this prop later will not close a\n   * section the reader has opened.\n   */\n  defaultOpen?: boolean\n  /**\n   * Makes the section inert. It can no longer be opened, the keyboard skips over\n   * it, and it is greyed out through the colour tokens.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionItemProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  iconStart: undefined,\n  defaultOpen: false,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** The content revealed when the section is open. */\n  default(): unknown\n  /** A title made of markup, which replaces the `title` prop. */\n  title?(): unknown\n  /** A subtitle made of markup, which replaces the `subtitle` prop. */\n  subtitle?(): unknown\n  /** Free content before the title, which takes the place of `iconStart`. */\n  start?(): unknown\n}>()\n\nconst accordion = inject(accordionKey, null)\n\n/**\n * Both icons are chosen on the enclosing group. The chevron fallback is what keeps\n * an item rendering correctly when it is used outside a VAccordion.\n */\nconst expandIcon = computed(() => accordion?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => accordion?.collapseIcon)\n\n// @a11y @core\n/*\n * The component's only behavioural JS. A <summary> has no native `disabled`\n * attribute, so there is no other way to stop a click from toggling the\n * <details>. The keyboard needs no handler of its own: `tabindex=\"-1\"` already\n * takes the summary out of the tab order.\n */\nfunction onSummaryClick(event: MouseEvent) {\n  if (props.disabled) event.preventDefault()\n}\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item\"\n    :name=\"accordion?.name\"\n    :open=\"defaultOpen || undefined\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"start\">\n        <VIcon v-if=\"iconStart\" class=\"v-accordion-icon-start\" v-bind=\"iconProps(iconStart)\" />\n      </slot>\n      <span class=\"v-accordion-heading\">\n        <span class=\"v-accordion-title\"\n          ><slot name=\"title\">{{ title }}</slot></span\n        >\n        <VTypography\n          v-if=\"subtitle || $slots.subtitle\"\n          as=\"span\"\n          variant=\"caption\"\n          tone=\"muted\"\n          class=\"v-accordion-subtitle\"\n          ><slot name=\"subtitle\">{{ subtitle }}</slot></VTypography\n        >\n      </span>\n      <VIcon class=\"v-accordion-icon\" v-bind=\"iconProps(expandIcon)\" />\n      <!-- Both icons are always in the DOM; [open] decides which one shows, in CSS alone -->\n      <VIcon\n        v-if=\"collapseIcon\"\n        class=\"v-accordion-icon v-accordion-icon-open\"\n        v-bind=\"iconProps(collapseIcon)\"\n      />\n    </summary>\n    <div class=\"v-accordion-content\">\n      <slot />\n    </div>\n  </details>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion-item {\n    interpolate-size: allow-keywords;\n  }\n\n  .v-accordion-item + .v-accordion-item {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-accordion-summary {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--accordion-pad-block, var(--vectis-space-4))\n      var(--accordion-pad-inline, var(--vectis-space-5));\n    list-style: none;\n    cursor: pointer;\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    color: var(--vectis-color-text);\n  }\n\n  .v-accordion-summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .v-accordion-item:not([data-disabled]) > .v-accordion-summary:hover {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-accordion-summary:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(var(--vectis-focus-ring-offset) * -1);\n  }\n\n  .v-accordion-item:first-child > .v-accordion-summary {\n    border-start-start-radius: var(--accordion-corner-radius, 0);\n    border-start-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-item:last-child:not([open]) > .v-accordion-summary {\n    border-end-start-radius: var(--accordion-corner-radius, 0);\n    border-end-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-heading {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-accordion-icon-start {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n    transition: rotate var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-accordion-item[open]:not([data-swap]) > .v-accordion-summary .v-accordion-icon {\n    rotate: 180deg;\n  }\n\n  /* data-swap marks an item whose group provided a collapseIcon: rather than\n     rotating a single chevron, each state hides one of the two rendered icons. */\n  .v-accordion-item[data-swap][open]\n    > .v-accordion-summary\n    .v-accordion-icon:not(.v-accordion-icon-open),\n  .v-accordion-item[data-swap]:not([open]) > .v-accordion-summary .v-accordion-icon-open {\n    display: none;\n  }\n\n  /* A disabled item greys out through the colour tokens and never through\n     `opacity`, the rule every control in the DS follows. */\n  .v-accordion-item[data-disabled] > .v-accordion-summary {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icons and the subtitle default to text-muted, which is DARKER than the\n     text-subtle a disabled title takes: left to themselves they would come out\n     stronger than the label they belong to, so they inherit it instead. */\n  .v-accordion-item[data-disabled] .v-accordion-icon,\n  .v-accordion-item[data-disabled] .v-accordion-icon-start,\n  .v-accordion-item[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  /* The opening animates in pure CSS: ::details-content targets the box the\n     browser wraps the content in, and the `interpolate-size` declared on the item\n     is what makes a transition towards `auto` possible at all. A browser missing\n     either simply opens the section instantly. */\n  .v-accordion-item::details-content {\n    block-size: 0;\n    overflow: clip;\n    transition:\n      block-size var(--vectis-duration-base) var(--vectis-ease-default),\n      content-visibility var(--vectis-duration-base) allow-discrete;\n  }\n\n  .v-accordion-item[open]::details-content {\n    block-size: auto;\n  }\n\n  .v-accordion-content {\n    padding: var(--accordion-content-pad-start, var(--vectis-space-2))\n      var(--accordion-pad-inline, var(--vectis-space-5))\n      var(--accordion-pad-block, var(--vectis-space-4));\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-accordion-icon {\n      transition: none;\n    }\n\n    .v-accordion-item::details-content {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,70 @@
+import e from "../VIcon/VIcon.js";
+import t from "../VTypography/VTypography.js";
+import { iconProps as n } from "../VIcon/iconProps.js";
+import { expand_more as r } from "../VIcon/icons/expand_more.js";
+import { accordionKey as i } from "./context.js";
+import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, inject as p, mergeProps as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
+//#region src/components/VAccordion/VAccordionItem.vue?vue&type=script&setup=true&lang.ts
+var b = [
+	"name",
+	"open",
+	"data-swap",
+	"data-disabled"
+], x = ["aria-disabled", "tabindex"], S = { class: "v-accordion-heading" }, C = { class: "v-accordion-title" }, w = { class: "v-accordion-content" }, T = /*@__PURE__*/ f({
+	__name: "VAccordionItem",
+	props: {
+		title: { default: void 0 },
+		subtitle: { default: void 0 },
+		iconStart: { default: void 0 },
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(f) {
+		let T = f, E = p(i, null), D = a(() => E?.expandIcon ?? r), O = a(() => E?.collapseIcon);
+		function k(e) {
+			T.disabled && e.preventDefault();
+		}
+		return (r, i) => (h(), c("details", {
+			class: "v-accordion-item",
+			name: v(E)?.name,
+			open: f.defaultOpen || void 0,
+			"data-swap": O.value ? "" : void 0,
+			"data-disabled": f.disabled ? "" : void 0
+		}, [l("summary", {
+			class: "v-accordion-summary",
+			"aria-disabled": f.disabled || void 0,
+			tabindex: f.disabled ? -1 : void 0,
+			onClick: k
+		}, [
+			g(r.$slots, "start", {}, () => [f.iconStart ? (h(), o(e, m({
+				key: 0,
+				class: "v-accordion-icon-start"
+			}, v(n)(f.iconStart)), null, 16)) : s("", !0)]),
+			l("span", S, [l("span", C, [g(r.$slots, "title", {}, () => [u(_(f.title), 1)])]), f.subtitle || r.$slots.subtitle ? (h(), o(t, {
+				key: 0,
+				as: "span",
+				variant: "caption",
+				tone: "muted",
+				class: "v-accordion-subtitle"
+			}, {
+				default: y(() => [g(r.$slots, "subtitle", {}, () => [u(_(f.subtitle), 1)])]),
+				_: 3
+			})) : s("", !0)]),
+			d(e, m({ class: "v-accordion-icon" }, v(n)(D.value)), null, 16),
+			O.value ? (h(), o(e, m({
+				key: 0,
+				class: "v-accordion-icon v-accordion-icon-open"
+			}, v(n)(O.value)), null, 16)) : s("", !0)
+		], 8, x), l("div", w, [g(r.$slots, "default")])], 8, b));
+	}
+});
+//#endregion
+export { T as default };
+
+//# sourceMappingURL=VAccordionItem.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VAccordionItem.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VAccordion/VAccordionItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport VTypography from '../VTypography/VTypography.vue'\nimport { accordionKey } from './context'\n\n/**\n * One section of an accordion: a heading the reader can click, and the content it\n * reveals. It is a native `<details>`/`<summary>` pair, so the browser owns the\n * open and closed state, the keyboard and the accessibility semantics, and this\n * component adds no code of its own for any of them.\n *\n * The opening is animated entirely in CSS, with `::details-content` and\n * `interpolate-size`. Both are recent additions to the language: where they are\n * missing the section simply appears at once, which is the intended fallback.\n */\ninterface AccordionItemProps {\n  /**\n   * The heading of the section, the line that stays visible when it is closed. Use\n   * the `#title` slot instead when the heading needs markup rather than plain text.\n   */\n  title?: string\n  /**\n   * A secondary line under the title, for a short explanation or a status. The\n   * `#subtitle` slot replaces it when markup is needed.\n   */\n  subtitle?: string\n  /**\n   * An icon placed before the title: an icon name, or an explicit render\n   * (`{ src }`, `{ component }`…).\n   */\n  iconStart?: IconSource\n  /**\n   * Renders the section already open. It only sets the state of the first render:\n   * the browser owns it afterwards, so changing this prop later will not close a\n   * section the reader has opened.\n   */\n  defaultOpen?: boolean\n  /**\n   * Makes the section inert. It can no longer be opened, the keyboard skips over\n   * it, and it is greyed out through the colour tokens.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<AccordionItemProps>(), {\n  title: undefined,\n  subtitle: undefined,\n  iconStart: undefined,\n  defaultOpen: false,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** The content revealed when the section is open. */\n  default(): unknown\n  /** A title made of markup, which replaces the `title` prop. */\n  title?(): unknown\n  /** A subtitle made of markup, which replaces the `subtitle` prop. */\n  subtitle?(): unknown\n  /** Free content before the title, which takes the place of `iconStart`. */\n  start?(): unknown\n}>()\n\nconst accordion = inject(accordionKey, null)\n\n/**\n * Both icons are chosen on the enclosing group. The chevron fallback is what keeps\n * an item rendering correctly when it is used outside a VAccordion.\n */\nconst expandIcon = computed(() => accordion?.expandIcon ?? expandMoreIcon)\nconst collapseIcon = computed(() => accordion?.collapseIcon)\n\n// @a11y @core\n/*\n * The component's only behavioural JS. A <summary> has no native `disabled`\n * attribute, so there is no other way to stop a click from toggling the\n * <details>. The keyboard needs no handler of its own: `tabindex=\"-1\"` already\n * takes the summary out of the tab order.\n */\nfunction onSummaryClick(event: MouseEvent) {\n  if (props.disabled) event.preventDefault()\n}\n</script>\n\n<template>\n  <details\n    class=\"v-accordion-item\"\n    :name=\"accordion?.name\"\n    :open=\"defaultOpen || undefined\"\n    :data-swap=\"collapseIcon ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <summary\n      class=\"v-accordion-summary\"\n      :aria-disabled=\"disabled || undefined\"\n      :tabindex=\"disabled ? -1 : undefined\"\n      @click=\"onSummaryClick\"\n    >\n      <slot name=\"start\">\n        <VIcon v-if=\"iconStart\" class=\"v-accordion-icon-start\" v-bind=\"iconProps(iconStart)\" />\n      </slot>\n      <span class=\"v-accordion-heading\">\n        <span class=\"v-accordion-title\"\n          ><slot name=\"title\">{{ title }}</slot></span\n        >\n        <VTypography\n          v-if=\"subtitle || $slots.subtitle\"\n          as=\"span\"\n          variant=\"caption\"\n          tone=\"muted\"\n          class=\"v-accordion-subtitle\"\n          ><slot name=\"subtitle\">{{ subtitle }}</slot></VTypography\n        >\n      </span>\n      <VIcon class=\"v-accordion-icon\" v-bind=\"iconProps(expandIcon)\" />\n      <!-- Both icons are always in the DOM; [open] decides which one shows, in CSS alone -->\n      <VIcon\n        v-if=\"collapseIcon\"\n        class=\"v-accordion-icon v-accordion-icon-open\"\n        v-bind=\"iconProps(collapseIcon)\"\n      />\n    </summary>\n    <div class=\"v-accordion-content\">\n      <slot />\n    </div>\n  </details>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-accordion-item {\n    interpolate-size: allow-keywords;\n  }\n\n  .v-accordion-item + .v-accordion-item {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n\n  .v-accordion-summary {\n    --vectis-icon-size: var(--vectis-icon-size-md);\n    --vectis-icon-opsz: 20;\n\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-3);\n    padding: var(--accordion-pad-block, var(--vectis-space-4))\n      var(--accordion-pad-inline, var(--vectis-space-5));\n    list-style: none;\n    cursor: pointer;\n    font-size: var(--vectis-text-label-size);\n    font-weight: var(--vectis-text-label-weight);\n    color: var(--vectis-color-text);\n  }\n\n  .v-accordion-summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .v-accordion-item:not([data-disabled]) > .v-accordion-summary:hover {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-accordion-summary:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(var(--vectis-focus-ring-offset) * -1);\n  }\n\n  .v-accordion-item:first-child > .v-accordion-summary {\n    border-start-start-radius: var(--accordion-corner-radius, 0);\n    border-start-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-item:last-child:not([open]) > .v-accordion-summary {\n    border-end-start-radius: var(--accordion-corner-radius, 0);\n    border-end-end-radius: var(--accordion-corner-radius, 0);\n  }\n\n  .v-accordion-heading {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    line-height: var(--vectis-text-label-leading);\n  }\n\n  .v-accordion-icon-start {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-accordion-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n    transition: rotate var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-accordion-item[open]:not([data-swap]) > .v-accordion-summary .v-accordion-icon {\n    rotate: 180deg;\n  }\n\n  /* data-swap marks an item whose group provided a collapseIcon: rather than\n     rotating a single chevron, each state hides one of the two rendered icons. */\n  .v-accordion-item[data-swap][open]\n    > .v-accordion-summary\n    .v-accordion-icon:not(.v-accordion-icon-open),\n  .v-accordion-item[data-swap]:not([open]) > .v-accordion-summary .v-accordion-icon-open {\n    display: none;\n  }\n\n  /* A disabled item greys out through the colour tokens and never through\n     `opacity`, the rule every control in the DS follows. */\n  .v-accordion-item[data-disabled] > .v-accordion-summary {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* The icons and the subtitle default to text-muted, which is DARKER than the\n     text-subtle a disabled title takes: left to themselves they would come out\n     stronger than the label they belong to, so they inherit it instead. */\n  .v-accordion-item[data-disabled] .v-accordion-icon,\n  .v-accordion-item[data-disabled] .v-accordion-icon-start,\n  .v-accordion-item[data-disabled] .v-accordion-subtitle {\n    color: inherit;\n  }\n\n  /* The opening animates in pure CSS: ::details-content targets the box the\n     browser wraps the content in, and the `interpolate-size` declared on the item\n     is what makes a transition towards `auto` possible at all. A browser missing\n     either simply opens the section instantly. */\n  .v-accordion-item::details-content {\n    block-size: 0;\n    overflow: clip;\n    transition:\n      block-size var(--vectis-duration-base) var(--vectis-ease-default),\n      content-visibility var(--vectis-duration-base) allow-discrete;\n  }\n\n  .v-accordion-item[open]::details-content {\n    block-size: auto;\n  }\n\n  .v-accordion-content {\n    padding: var(--accordion-content-pad-start, var(--vectis-space-2))\n      var(--accordion-pad-inline, var(--vectis-space-5))\n      var(--accordion-pad-block, var(--vectis-space-4));\n    font-size: var(--vectis-text-body-md-size);\n    line-height: var(--vectis-text-body-md-leading);\n    color: var(--vectis-color-text-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-accordion-icon {\n      transition: none;\n    }\n\n    .v-accordion-item::details-content {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDA,IAAM,IAAQ,GAmBR,IAAY,EAAO,GAAc,IAAI,GAMrC,IAAa,QAAe,GAAW,cAAc,CAAc,GACnE,IAAe,QAAe,GAAW,YAAY;EAS3D,SAAS,EAAe,GAAmB;GACzC,AAAI,EAAM,YAAU,EAAM,eAAe;EAC3C;yBAIE,EAwCU,WAAA;GAvCR,OAAM;GACL,MAAM,EAAA,CAAA,CAAS,EAAE;GACjB,MAAM,EAAA,eAAe,KAAA;GACrB,aAAW,EAAA,QAAY,KAAQ,KAAA;GAC/B,iBAAe,EAAA,WAAQ,KAAQ,KAAA;MAEhC,EA6BU,WAAA;GA5BR,OAAM;GACL,iBAAe,EAAA,YAAY,KAAA;GAC3B,UAAU,EAAA,WAAQ,KAAQ,KAAA;GAC1B,SAAO;;GAER,EAEO,EAAA,QAAA,SAAA,CAAA,SAAA,CADQ,EAAA,aAAA,EAAA,GAAb,EAAuF,GAAvF,EAAuF;;IAA/D,OAAM;MAAiC,EAAA,CAAA,CAAS,CAAC,EAAA,SAAS,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;GAEpF,EAYO,QAZP,GAYO,CAXL,EAEC,QAFD,GAEC,CADE,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAGtB,EAAA,YAAYA,EAAAA,OAAO,YAAA,EAAA,GAD3B,EAOC,GAAA;;IALC,IAAG;IACH,SAAQ;IACR,MAAK;IACL,OAAM;;qBACsC,CAA3C,EAA2C,EAAA,QAAA,YAAA,CAAA,SAAA,CAAA,EAAA,EAAlB,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAGtC,EAAiE,GAAjE,EAAiE,EAA1D,OAAM,mBAAkB,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,KAAU,CAAA,GAAA,MAAA,EAAA;GAGpD,EAAA,SAAA,EAAA,GADR,EAIE,GAJF,EAIE;;IAFA,OAAM;MACE,EAAA,CAAA,CAAS,CAAC,EAAA,KAAY,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;YAGlC,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA"}

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

@@ -0,0 +1,18 @@
+import { InjectionKey } from 'vue';
+import { IconSource } from '../VIcon/types.js';
+/**
+ * The parent→items contract: the shared name set on each <details> activates NATIVE
+ * exclusive mode (the `name` attribute, Baseline 2024) — a single item open, with no
+ * JS at all. The icons are set on the group (homogeneous density and iconography);
+ * `compact` does NOT travel here, it descends through CSS inheritance (the
+ * --accordion-* variables set on the root).
+ */
+export interface AccordionContext {
+    /** Group name for <details name>; undefined = multiple items can be open. */
+    name: string | undefined;
+    /** Icon in the closed state: an icon name, or an explicit render. */
+    expandIcon: IconSource;
+    /** Icon in the open state; undefined = a rotation of `expandIcon`. */
+    collapseIcon: IconSource | undefined;
+}
+export declare const accordionKey: InjectionKey<AccordionContext>;

package/dist/components/VAccordion/context.js

@@ -0,0 +1,6 @@
+//#region src/components/VAccordion/context.ts
+var e = Symbol("v-accordion");
+//#endregion
+export { e as accordionKey };
+
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VAccordion/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\n\nimport type { IconSource } from '../VIcon/types'\n\n/**\n * The parent→items contract: the shared name set on each <details> activates NATIVE\n * exclusive mode (the `name` attribute, Baseline 2024) — a single item open, with no\n * JS at all. The icons are set on the group (homogeneous density and iconography);\n * `compact` does NOT travel here, it descends through CSS inheritance (the\n * --accordion-* variables set on the root).\n */\nexport interface AccordionContext {\n  /** Group name for <details name>; undefined = multiple items can be open. */\n  name: string | undefined\n  /** Icon in the closed state: an icon name, or an explicit render. */\n  expandIcon: IconSource\n  /** Icon in the open state; undefined = a rotation of `expandIcon`. */\n  collapseIcon: IconSource | undefined\n}\n\nexport const accordionKey: InjectionKey<AccordionContext> = Symbol('v-accordion')\n"],"mappings":";AAoBA,IAAa,IAA+C,OAAO,aAAa"}

package/dist/components/VAvatar/VAvatar.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-avatar{--avatar-bg:var(--vectis-color-surface-muted);--avatar-text:var(--vectis-color-text-muted);inline-size:var(--control-height);block-size:var(--control-height);background:var(--avatar-bg);color:var(--avatar-text);border-radius:var(--vectis-radius-full);font-family:var(--vectis-text-family);font-size:var(--control-font-size);font-weight:var(--vectis-font-weight-semibold);line-height:var(--vectis-text-control-leading);-webkit-user-select:none;user-select:none;box-shadow:0 0 0 var(--vectis-control-size-avatar-ring) var(--avatar-ring-color,transparent);transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default), box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);border:none;flex:none;justify-content:center;align-items:center;padding:0;text-decoration:none;display:inline-flex;overflow:hidden}.v-avatar[data-auto]{--avatar-bg:oklch(.9 .06 var(--avatar-hue));--avatar-text:oklch(.42 .13 var(--avatar-hue))}.v-avatar[data-custom]{--avatar-bg:var(--custom-color);--avatar-text:var(--vectis-color-text-on-accent)}[data-theme=dark] .v-avatar[data-auto]{--avatar-bg:oklch(.42 .09 var(--avatar-hue));--avatar-text:oklch(.92 .05 var(--avatar-hue))}.v-avatar-image{object-fit:cover;block-size:100%;inline-size:100%}.v-avatar-icon{--vectis-icon-size:calc(var(--control-height) * .55)}:is(a,button).v-avatar{cursor:pointer}:is(a,button).v-avatar:hover:not([aria-disabled=true],:disabled){background:color-mix(in oklab, var(--avatar-bg), var(--vectis-color-text) 10%)}:is(a,button).v-avatar:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-avatar:is(:disabled,[aria-disabled=true]){cursor:not-allowed;background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-subtle)}@media (prefers-reduced-motion:reduce){.v-avatar{transition:none}}}

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

@@ -0,0 +1,68 @@
+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). */
+    src?: string;
+    /** Icon shown in the absence of an image (priority 2): a name, or an explicit render. */
+    icon?: IconSource;
+    /** Full name — the default alt, the source of the initials and the seed of the auto hue. */
+    name?: string;
+    /** Explicit alt/label (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`.
+     */
+    color?: string;
+    /** Default `md`. `undefined` = inherited from an enclosing VAvatarGroup. */
+    size?: AvatarSize;
+    /** Height reduced by 4px (like the other controls). */
+    compact?: boolean;
+    /** Rendered as `<a>`. disabled → an inert link (href removed + aria-disabled). */
+    href?: string;
+    /** Rendered as `<button type="button">` (a VTooltip's #trigger slot plugs in through fallthrough). */
+    clickable?: boolean;
+    disabled?: boolean;
+}
+type __VLS_Slots = {
+    /** Fallback content (replaces the initials), e.g. VAvatarGroup's "+X". */
+    default?(): unknown;
+};
+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;
+    src: string;
+    compact: boolean;
+    href: string;
+    disabled: boolean;
+    icon: IconSource;
+    color: string;
+    clickable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VAvatar/VAvatar.js

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

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,87 @@
+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";
+//#region src/components/VAvatar/VAvatar.vue?vue&type=script&setup=true&lang.ts
+var y = ["src", "alt"], b = {
+	class: "v-avatar-initials",
+	"aria-hidden": "true"
+}, x = /*@__PURE__*/ s({
+	inheritAttrs: !1,
+	__name: "VAvatar",
+	props: {
+		src: { default: void 0 },
+		icon: { default: void 0 },
+		name: { default: void 0 },
+		alt: { default: void 0 },
+		color: { default: void 0 },
+		size: { default: void 0 },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		href: { default: void 0 },
+		clickable: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			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;
+		});
+		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 e = 0;
+			for (let t = 0; t < x.name.length; t++) e = e * 31 + x.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, {
+			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
+		}), {
+			default: v(() => [j.value ? (u(), a("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)]),
+			_: 3
+		}, 16, [
+			"style",
+			"data-size",
+			"data-compact",
+			"data-custom",
+			"data-auto",
+			"href",
+			"type",
+			"disabled",
+			"aria-disabled",
+			"role",
+			"aria-label"
+		]));
+	}
+});
+//#endregion
+export { x 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

@@ -0,0 +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"}

package/dist/components/VAvatar/VAvatarGroup.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-avatar-group{--avatar-ring-color:var(--vectis-color-surface);align-items:center;display:inline-flex}.v-avatar-group>*+*{margin-inline-start:calc(var(--control-height) * -.3)}.v-avatar-group>:hover,.v-avatar-group>:focus-within{z-index:1}}

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

@@ -0,0 +1,59 @@
+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
+     * "+X" disc. Left out, or set to 0, every avatar is shown.
+     */
+    max?: number;
+    /**
+     * The size given to the avatars inside the group. An avatar that sets a `size`
+     * of its own keeps it.
+     */
+    size?: AvatarSize;
+    /** Applies the reduced density to the avatars inside, on the same terms as `size`. */
+    compact?: boolean;
+    /**
+     * The colour of the ring drawn around each disc. It defaults to the page
+     * background, which is what makes the ring read as a gap between two avatars.
+     */
+    ringColor?: string;
+}
+type __VLS_Slots = {
+    /** The VAvatars to stack. */
+    default?(): unknown;
+    /**
+     * Replaces the "+X" disc that stands for the avatars beyond `max`. It receives
+     * `count`, the number of avatars being hidden.
+     */
+    overflow?(props: {
+        count: number;
+    }): unknown;
+};
+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;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VAvatar/VAvatarGroup.js

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

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,43 @@
+import { avatarGroupKey as e } from "./context.js";
+import t from "./VAvatar.js";
+import { flattenSlot as n } from "../../utils/vnode.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({
+	__name: "VAvatarGroup",
+	props: {
+		max: { default: void 0 },
+		size: { default: void 0 },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		ringColor: { default: void 0 }
+	},
+	setup(l) {
+		let y = l;
+		f(e, {
+			get size() {
+				return y.size;
+			},
+			get compact() {
+				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", {
+			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, {
+			default: _(() => [s("+" + h(C.value), 1)]),
+			_: 1
+		})], void 0, 0) : a("", !0)], 12, v));
+	}
+});
+//#endregion
+export { y as default };
+
+//# sourceMappingURL=VAvatarGroup.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,17 @@
+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;
+}
+export declare const avatarGroupKey: InjectionKey<AvatarGroupContext>;

package/dist/components/VAvatar/context.js

@@ -0,0 +1,6 @@
+//#region src/components/VAvatar/context.ts
+var e = Symbol("v-avatar-group");
+//#endregion
+export { e as avatarGroupKey };
+
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +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"}

package/dist/components/VBadge/VBadge.css

@@ -0,0 +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%}}