vectis-ui 0.14.0 → 0.16.0

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/VBadge/VBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"VBadge.js","names":[],"sources":["../../../src/components/VBadge/VBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Render the default slot once: inspect its VNodes to decide whether a noninteractive badge has\n * content.\n */\nimport { computed, h } from 'vue'\nimport type { FunctionalComponent } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\nimport { customColorStyle } from '../../utils/css'\n\n/** How strongly the badge is painted: the full colour, or a tint of it. */\nexport type BadgeVariant = 'solid' | 'soft'\n/** What the badge means, in colour. */\nexport type BadgeTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n/** The corner an overlaid badge is pinned to. */\nexport type BadgeOverlayPosition = 'top' | 'bottom'\n\ninterface BadgeProps {\n  /**\n   * How strongly the badge is painted: filled with the full colour (`solid`, the default), or a\n   * tinted background with the text in the colour (`soft`), for a count that should not draw\n   * the eye.\n   */\n  variant?: BadgeVariant\n  /**\n   * The meaning the badge carries, expressed as a colour. A solid badge is filled\n   * with it and its text adapts to stay readable; a soft one is tinted with it and\n   * writes its text in it.\n   */\n  tone?: BadgeTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. On a solid\n   * badge, browsers that support `contrast-color()` turn the text black or white by themselves;\n   * everywhere else it falls back to white, so with a light colour the contrast is yours to\n   * check.\n   */\n  color?: string\n  /**\n   * The number to display. Anything above 99 is shown as \"99+\", so that a busy\n   * counter cannot stretch the pill indefinitely.\n   */\n  count?: number\n  /**\n   * A single icon shown instead of a number: an icon name, or an explicit render\n   * (the VIcon contract). It takes precedence over `count`, and is ignored when the\n   * badge is a `dot`.\n   */\n  icon?: IconSource\n  /**\n   * Reduces the badge to a 10px dot with no content, the discreet way to signal\n   * that something is new without saying how much.\n   */\n  dot?: boolean\n  /**\n   * Pins the badge to a corner of the target element instead of placing it beside\n   * it. It does nothing when the badge has no target.\n   */\n  overlay?: boolean\n  /**\n   * Which corner an `overlay` badge is pinned to: the top one by default, the bottom one for a\n   * marker that belongs at the foot of its target, such as a presence dot under an avatar.\n   */\n  overlayPosition?: BadgeOverlayPosition\n  /**\n   * Draws a 2px ring around the badge, in the colour of the surface behind it, which detaches\n   * it from a busy target such as a picture.\n   */\n  bordered?: boolean\n  /** The colour of the ring drawn by `bordered`. */\n  ringColor?: string\n}\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n  variant: 'solid',\n  tone: 'accent',\n  color: undefined,\n  count: undefined,\n  icon: undefined,\n  overlayPosition: 'top',\n  ringColor: undefined,\n  // Written out although Vue casts an absent boolean to `false` on its own: left out,\n  // `vue-component-meta` reports no default at all and the docs table's cell goes blank.\n  dot: false,\n  overlay: false,\n  bordered: false,\n})\n\nconst slots = defineSlots<{\n  /** The element the badge belongs to. */\n  default?(): unknown\n}>()\n\n// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// would keep its first answer while a slot behind a `v-if` comes and goes.\nfunction hasTarget() {\n  return slots.default !== undefined\n}\n\n/**\n * The counter as it is actually displayed: a whole number, zero or more, and anything past 99\n * becomes \"99+\".\n */\nconst displayCount = computed(() => {\n  const count = props.count\n  if (count === undefined || !Number.isFinite(count)) return undefined\n  return count > 99 ? '99+' : Math.max(0, Math.trunc(count))\n})\n\n/*\n * The template has two roots; one wrapping a target, one standing alone; and both render the\n * same badge; a functional component is the one way to put the same markup in two places of a\n * template without writing it twice.\n */\nconst Pill: FunctionalComponent = () =>\n  h(\n    'span',\n    {\n      class: 'v-badge v-tone v-variant',\n      'data-variant': props.variant,\n      'data-tone': props.tone,\n      'data-custom': props.color !== undefined ? '' : undefined,\n      'data-dot': props.dot ? '' : undefined,\n      'data-icon-only': !props.dot && props.icon ? '' : undefined,\n      'data-bordered': props.bordered ? '' : undefined,\n      style: [\n        customColorStyle(props.color),\n        props.ringColor !== undefined ? { '--badge-ring-color': props.ringColor } : undefined,\n      ],\n    },\n    props.dot\n      ? undefined\n      : props.icon\n        ? [h(VIcon, iconProps(props.icon))]\n        : displayCount.value === undefined\n          ? undefined\n          : String(displayCount.value),\n  )\n// The empty list is not decoration. A functional component that declares no props lets only\n// `class`, `style` and listeners fall through, so a standalone badge, whose root this is, would\n// silently drop every other attribute a consumer set on VBadge (an `id`, a `data-*`).\nPill.props = []\n</script>\n\n<template>\n  <span\n    v-if=\"hasTarget()\"\n    class=\"v-badge-host\"\n    :data-overlay=\"overlay ? '' : undefined\"\n    :data-overlay-position=\"overlayPosition\"\n  >\n    <slot />\n    <Pill aria-hidden=\"true\" />\n  </span>\n  <Pill v-else />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-badge-host {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  /* The pill is painted by the shared `.v-variant` rules (styles/variants.css) over the\n     tone table (`.v-tone`), both set in the template: `solid` is the tone's full colour,\n     `soft` its tint with the text in the tone's own colour. A custom colour is the table's\n     `[data-custom]` row, in styles/tones.css. */\n  .v-badge {\n    --vectis-icon-size: var(--vectis-icon-size-sm);\n    --vectis-icon-opsz: 20;\n    /* The colour of the `bordered` ring: a bet on the page background, the only one a\n       component can make since CSS cannot read what its parent paints. The `ringColor`\n       prop overrides it inline for a badge sitting on anything else. */\n    --badge-ring-color: var(--vectis-color-surface);\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--vectis-control-size-badge-h);\n    /* A minimum width equal to the height, with a small padding on top, is what\n       makes a one- or two-digit counter come out round rather than oval. */\n    min-width: var(--vectis-control-size-badge-h);\n    padding-inline: var(--vectis-space-1);\n    border-radius: var(--vectis-radius-pill);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  /*\n   * The class is compounded to (0,3,0): `.v-variant[data-variant='solid']` sets `color` at\n   * (0,2,0) from another sheet, and a tie would be settled by sheet order. The soft pill keeps\n   * the tone's own text colour, which says the tone where black or white would not.\n   */\n  @supports (color: contrast-color(red)) {\n    .v-badge.v-variant[data-variant='solid'] {\n      color: contrast-color(var(--tone-bg-solid));\n    }\n  }\n\n  /* A dot is always solid: with no content, a soft dot is a pale disc on the page, which a\n     presence marker cannot afford. (0,3,0), above the soft variant's background. */\n  .v-badge.v-variant[data-dot] {\n    background: var(--tone-bg-solid);\n  }\n\n  .v-badge[data-icon-only] {\n    padding: 0;\n  }\n\n  .v-badge[data-dot] {\n    width: var(--vectis-control-size-badge-dot);\n    height: var(--vectis-control-size-badge-dot);\n    min-width: 0;\n    padding: 0;\n  }\n\n  .v-badge[data-bordered] {\n    box-shadow: 0 0 0 var(--vectis-control-size-badge-ring) var(--badge-ring-color);\n  }\n\n  /*\n   * The tuck-in offset is a ratio of the badge's own size, so it stays proportionate across the\n   * pill, the dot and the icon. Each half of it is held in its own variable: the corner and the\n   * reading direction each flip ONE axis, and writing the whole `translate` again in each\n   * branch would make the two multiply; four rules to keep in step by hand for two independent\n   * decisions.\n   */\n  .v-badge-host[data-overlay] > .v-badge {\n    --badge-overlay-x: 25%;\n    --badge-overlay-y: -25%;\n\n    position: absolute;\n    inset-block: 0 auto;\n    inset-inline-end: 0;\n    translate: var(--badge-overlay-x) var(--badge-overlay-y);\n    /*\n     * Raise overlaid badges above later positioned siblings; tree order alone lets neighbouring\n     * segments cover them.\n     */\n    z-index: 1;\n  }\n\n  .v-badge-host[data-overlay][data-overlay-position='bottom'] > .v-badge {\n    --badge-overlay-y: 25%;\n\n    inset-block: auto 0;\n  }\n\n  /*\n   * In a right-to-left direction the logical corner moves to the left, so the horizontal half\n   * of the translation has to flip with it; `translate` is a physical property and knows\n   * nothing about direction.\n   */\n  .v-badge-host[data-overlay]:dir(rtl) > .v-badge {\n    --badge-overlay-x: -25%;\n  }\n\n  /* Forced colours repaint the background as Canvas and drop the ring, a shadow: the pill\n     loses its shape, and a dot, which has nothing else, disappears altogether. The pill\n     gets an edge, and the dot is filled in the text colour. */\n  @media (forced-colors: active) {\n    .v-badge {\n      outline: var(--vectis-control-border-width) solid CanvasText;\n      outline-offset: calc(-1 * var(--vectis-control-border-width));\n    }\n\n    .v-badge.v-variant[data-dot] {\n      forced-color-adjust: none;\n      background: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VBadge.js","names":["_sfc_main","VBadge_vue_vue_type_script_setup_true_lang_default","VBadge_default"],"sources":["../../../src/components/VBadge/VBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Render the default slot once: inspect its VNodes to decide whether a noninteractive badge has\n * content.\n */\nimport { computed, h } from 'vue'\nimport type { FunctionalComponent } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\nimport { customColorStyle } from '../../utils/css'\n\n/** How strongly the badge is painted: the full colour, or a tint of it. */\nexport type BadgeVariant = 'solid' | 'soft'\n/** What the badge means, in colour. */\nexport type BadgeTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n/** The corner an overlaid badge is pinned to. */\nexport type BadgeOverlayPosition = 'top' | 'bottom'\n\ninterface BadgeProps {\n  /**\n   * How strongly the badge is painted: filled with the full colour (`solid`, the default), or a\n   * tinted background with the text in the colour (`soft`), for a count that should not draw\n   * the eye.\n   */\n  variant?: BadgeVariant\n  /**\n   * The meaning the badge carries, expressed as a colour. A solid badge is filled\n   * with it and its text adapts to stay readable; a soft one is tinted with it and\n   * writes its text in it.\n   */\n  tone?: BadgeTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. On a solid\n   * badge, browsers that support `contrast-color()` turn the text black or white by themselves;\n   * everywhere else it falls back to white, so with a light colour the contrast is yours to\n   * check.\n   */\n  color?: string\n  /**\n   * The number to display. Anything above 99 is shown as \"99+\", so that a busy\n   * counter cannot stretch the pill indefinitely.\n   */\n  count?: number\n  /**\n   * A single icon shown instead of a number: an icon name, or an explicit render\n   * (the VIcon contract). It takes precedence over `count`, and is ignored when the\n   * badge is a `dot`.\n   */\n  icon?: IconSource\n  /**\n   * Reduces the badge to a 10px dot with no content, the discreet way to signal\n   * that something is new without saying how much.\n   */\n  dot?: boolean\n  /**\n   * Pins the badge to a corner of the target element instead of placing it beside\n   * it. It does nothing when the badge has no target.\n   */\n  overlay?: boolean\n  /**\n   * Which corner an `overlay` badge is pinned to: the top one by default, the bottom one for a\n   * marker that belongs at the foot of its target, such as a presence dot under an avatar.\n   */\n  overlayPosition?: BadgeOverlayPosition\n  /**\n   * Draws a 2px ring around the badge, in the colour of the surface behind it, which detaches\n   * it from a busy target such as a picture.\n   */\n  bordered?: boolean\n  /** The colour of the ring drawn by `bordered`. */\n  ringColor?: string\n}\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n  variant: 'solid',\n  tone: 'accent',\n  color: undefined,\n  count: undefined,\n  icon: undefined,\n  overlayPosition: 'top',\n  ringColor: undefined,\n  // Written out although Vue casts an absent boolean to `false` on its own: left out,\n  // `vue-component-meta` reports no default at all and the docs table's cell goes blank.\n  dot: false,\n  overlay: false,\n  bordered: false,\n})\n\nconst slots = defineSlots<{\n  /** The element the badge belongs to. */\n  default?(): unknown\n}>()\n\n// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// would keep its first answer while a slot behind a `v-if` comes and goes.\nfunction hasTarget() {\n  return slots.default !== undefined\n}\n\n/**\n * The counter as it is actually displayed: a whole number, zero or more, and anything past 99\n * becomes \"99+\".\n */\nconst displayCount = computed(() => {\n  const count = props.count\n  if (count === undefined || !Number.isFinite(count)) return undefined\n  return count > 99 ? '99+' : Math.max(0, Math.trunc(count))\n})\n\n/*\n * The template has two roots; one wrapping a target, one standing alone; and both render the\n * same badge; a functional component is the one way to put the same markup in two places of a\n * template without writing it twice.\n */\nconst Pill: FunctionalComponent = () =>\n  h(\n    'span',\n    {\n      class: 'v-badge v-tone v-variant',\n      'data-variant': props.variant,\n      'data-tone': props.tone,\n      'data-custom': props.color !== undefined ? '' : undefined,\n      'data-dot': props.dot ? '' : undefined,\n      'data-icon-only': !props.dot && props.icon ? '' : undefined,\n      'data-bordered': props.bordered ? '' : undefined,\n      style: [\n        customColorStyle(props.color),\n        props.ringColor !== undefined ? { '--badge-ring-color': props.ringColor } : undefined,\n      ],\n    },\n    props.dot\n      ? undefined\n      : props.icon\n        ? [h(VIcon, iconProps(props.icon))]\n        : displayCount.value === undefined\n          ? undefined\n          : String(displayCount.value),\n  )\n// The empty list is not decoration. A functional component that declares no props lets only\n// `class`, `style` and listeners fall through, so a standalone badge, whose root this is, would\n// silently drop every other attribute a consumer set on VBadge (an `id`, a `data-*`).\nPill.props = []\n</script>\n\n<template>\n  <span\n    v-if=\"hasTarget()\"\n    class=\"v-badge-host\"\n    :data-overlay=\"overlay ? '' : undefined\"\n    :data-overlay-position=\"overlayPosition\"\n  >\n    <slot />\n    <Pill aria-hidden=\"true\" />\n  </span>\n  <Pill v-else />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-badge-host {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  /* The pill is painted by the shared `.v-variant` rules (styles/variants.css) over the\n     tone table (`.v-tone`), both set in the template: `solid` is the tone's full colour,\n     `soft` its tint with the text in the tone's own colour. A custom colour is the table's\n     `[data-custom]` row, in styles/tones.css. */\n  .v-badge {\n    --vectis-icon-size: var(--vectis-icon-size-sm);\n    --vectis-icon-opsz: 20;\n    /* The colour of the `bordered` ring: a bet on the page background, the only one a\n       component can make since CSS cannot read what its parent paints. The `ringColor`\n       prop overrides it inline for a badge sitting on anything else. */\n    --badge-ring-color: var(--vectis-color-surface);\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--vectis-control-size-badge-h);\n    /* A minimum width equal to the height, with a small padding on top, is what\n       makes a one- or two-digit counter come out round rather than oval. */\n    min-width: var(--vectis-control-size-badge-h);\n    padding-inline: var(--vectis-space-1);\n    border-radius: var(--vectis-radius-pill);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  /*\n   * The class is compounded to (0,3,0): `.v-variant[data-variant='solid']` sets `color` at\n   * (0,2,0) from another sheet, and a tie would be settled by sheet order. The soft pill keeps\n   * the tone's own text colour, which says the tone where black or white would not.\n   */\n  @supports (color: contrast-color(red)) {\n    .v-badge.v-variant[data-variant='solid'] {\n      color: contrast-color(var(--tone-bg-solid));\n    }\n  }\n\n  /* A dot is always solid: with no content, a soft dot is a pale disc on the page, which a\n     presence marker cannot afford. (0,3,0), above the soft variant's background. */\n  .v-badge.v-variant[data-dot] {\n    background: var(--tone-bg-solid);\n  }\n\n  .v-badge[data-icon-only] {\n    padding: 0;\n  }\n\n  .v-badge[data-dot] {\n    width: var(--vectis-control-size-badge-dot);\n    height: var(--vectis-control-size-badge-dot);\n    min-width: 0;\n    padding: 0;\n  }\n\n  .v-badge[data-bordered] {\n    box-shadow: 0 0 0 var(--vectis-control-size-badge-ring) var(--badge-ring-color);\n  }\n\n  /*\n   * The tuck-in offset is a ratio of the badge's own size, so it stays proportionate across the\n   * pill, the dot and the icon. Each half of it is held in its own variable: the corner and the\n   * reading direction each flip ONE axis, and writing the whole `translate` again in each\n   * branch would make the two multiply; four rules to keep in step by hand for two independent\n   * decisions.\n   */\n  .v-badge-host[data-overlay] > .v-badge {\n    --badge-overlay-x: 25%;\n    --badge-overlay-y: -25%;\n\n    position: absolute;\n    inset-block: 0 auto;\n    inset-inline-end: 0;\n    translate: var(--badge-overlay-x) var(--badge-overlay-y);\n    /*\n     * Raise overlaid badges above later positioned siblings; tree order alone lets neighbouring\n     * segments cover them.\n     */\n    z-index: 1;\n  }\n\n  .v-badge-host[data-overlay][data-overlay-position='bottom'] > .v-badge {\n    --badge-overlay-y: 25%;\n\n    inset-block: auto 0;\n  }\n\n  /*\n   * In a right-to-left direction the logical corner moves to the left, so the horizontal half\n   * of the translation has to flip with it; `translate` is a physical property and knows\n   * nothing about direction.\n   */\n  .v-badge-host[data-overlay]:dir(rtl) > .v-badge {\n    --badge-overlay-x: -25%;\n  }\n\n  /* Forced colours repaint the background as Canvas and drop the ring, a shadow: the pill\n     loses its shape, and a dot, which has nothing else, disappears altogether. The pill\n     gets an edge, and the dot is filled in the text colour. */\n  @media (forced-colors: active) {\n    .v-badge {\n      outline: var(--vectis-control-border-width) solid CanvasText;\n      outline-offset: calc(-1 * var(--vectis-control-border-width));\n    }\n\n    .v-badge.v-variant[data-dot] {\n      forced-color-adjust: none;\n      background: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VBadge/VBadge.vue_vue_type_script_setup_true_lang.js

@@ -33,7 +33,7 @@ var f = ["data-overlay", "data-overlay-position"], p = /*@__PURE__*/ s({
 		}
 		let g = r(() => {
 			let e = p.count;
-			if (!(e === void 0 || !Number.isFinite(e))) return e > 99 ? "99+" : Math.max(0, Math.trunc(e));
+			if (e !== void 0 && Number.isFinite(e)) return e > 99 ? "99+" : Math.max(0, Math.trunc(e));
 		}), _ = () => c("span", {
 			class: "v-badge v-tone v-variant",
 			"data-variant": p.variant,

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

@@ -1 +1 @@
-{"version":3,"file":"VBadge.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VBadge/VBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Render the default slot once: inspect its VNodes to decide whether a noninteractive badge has\n * content.\n */\nimport { computed, h } from 'vue'\nimport type { FunctionalComponent } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\nimport { customColorStyle } from '../../utils/css'\n\n/** How strongly the badge is painted: the full colour, or a tint of it. */\nexport type BadgeVariant = 'solid' | 'soft'\n/** What the badge means, in colour. */\nexport type BadgeTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n/** The corner an overlaid badge is pinned to. */\nexport type BadgeOverlayPosition = 'top' | 'bottom'\n\ninterface BadgeProps {\n  /**\n   * How strongly the badge is painted: filled with the full colour (`solid`, the default), or a\n   * tinted background with the text in the colour (`soft`), for a count that should not draw\n   * the eye.\n   */\n  variant?: BadgeVariant\n  /**\n   * The meaning the badge carries, expressed as a colour. A solid badge is filled\n   * with it and its text adapts to stay readable; a soft one is tinted with it and\n   * writes its text in it.\n   */\n  tone?: BadgeTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. On a solid\n   * badge, browsers that support `contrast-color()` turn the text black or white by themselves;\n   * everywhere else it falls back to white, so with a light colour the contrast is yours to\n   * check.\n   */\n  color?: string\n  /**\n   * The number to display. Anything above 99 is shown as \"99+\", so that a busy\n   * counter cannot stretch the pill indefinitely.\n   */\n  count?: number\n  /**\n   * A single icon shown instead of a number: an icon name, or an explicit render\n   * (the VIcon contract). It takes precedence over `count`, and is ignored when the\n   * badge is a `dot`.\n   */\n  icon?: IconSource\n  /**\n   * Reduces the badge to a 10px dot with no content, the discreet way to signal\n   * that something is new without saying how much.\n   */\n  dot?: boolean\n  /**\n   * Pins the badge to a corner of the target element instead of placing it beside\n   * it. It does nothing when the badge has no target.\n   */\n  overlay?: boolean\n  /**\n   * Which corner an `overlay` badge is pinned to: the top one by default, the bottom one for a\n   * marker that belongs at the foot of its target, such as a presence dot under an avatar.\n   */\n  overlayPosition?: BadgeOverlayPosition\n  /**\n   * Draws a 2px ring around the badge, in the colour of the surface behind it, which detaches\n   * it from a busy target such as a picture.\n   */\n  bordered?: boolean\n  /** The colour of the ring drawn by `bordered`. */\n  ringColor?: string\n}\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n  variant: 'solid',\n  tone: 'accent',\n  color: undefined,\n  count: undefined,\n  icon: undefined,\n  overlayPosition: 'top',\n  ringColor: undefined,\n  // Written out although Vue casts an absent boolean to `false` on its own: left out,\n  // `vue-component-meta` reports no default at all and the docs table's cell goes blank.\n  dot: false,\n  overlay: false,\n  bordered: false,\n})\n\nconst slots = defineSlots<{\n  /** The element the badge belongs to. */\n  default?(): unknown\n}>()\n\n// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// would keep its first answer while a slot behind a `v-if` comes and goes.\nfunction hasTarget() {\n  return slots.default !== undefined\n}\n\n/**\n * The counter as it is actually displayed: a whole number, zero or more, and anything past 99\n * becomes \"99+\".\n */\nconst displayCount = computed(() => {\n  const count = props.count\n  if (count === undefined || !Number.isFinite(count)) return undefined\n  return count > 99 ? '99+' : Math.max(0, Math.trunc(count))\n})\n\n/*\n * The template has two roots; one wrapping a target, one standing alone; and both render the\n * same badge; a functional component is the one way to put the same markup in two places of a\n * template without writing it twice.\n */\nconst Pill: FunctionalComponent = () =>\n  h(\n    'span',\n    {\n      class: 'v-badge v-tone v-variant',\n      'data-variant': props.variant,\n      'data-tone': props.tone,\n      'data-custom': props.color !== undefined ? '' : undefined,\n      'data-dot': props.dot ? '' : undefined,\n      'data-icon-only': !props.dot && props.icon ? '' : undefined,\n      'data-bordered': props.bordered ? '' : undefined,\n      style: [\n        customColorStyle(props.color),\n        props.ringColor !== undefined ? { '--badge-ring-color': props.ringColor } : undefined,\n      ],\n    },\n    props.dot\n      ? undefined\n      : props.icon\n        ? [h(VIcon, iconProps(props.icon))]\n        : displayCount.value === undefined\n          ? undefined\n          : String(displayCount.value),\n  )\n// The empty list is not decoration. A functional component that declares no props lets only\n// `class`, `style` and listeners fall through, so a standalone badge, whose root this is, would\n// silently drop every other attribute a consumer set on VBadge (an `id`, a `data-*`).\nPill.props = []\n</script>\n\n<template>\n  <span\n    v-if=\"hasTarget()\"\n    class=\"v-badge-host\"\n    :data-overlay=\"overlay ? '' : undefined\"\n    :data-overlay-position=\"overlayPosition\"\n  >\n    <slot />\n    <Pill aria-hidden=\"true\" />\n  </span>\n  <Pill v-else />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-badge-host {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  /* The pill is painted by the shared `.v-variant` rules (styles/variants.css) over the\n     tone table (`.v-tone`), both set in the template: `solid` is the tone's full colour,\n     `soft` its tint with the text in the tone's own colour. A custom colour is the table's\n     `[data-custom]` row, in styles/tones.css. */\n  .v-badge {\n    --vectis-icon-size: var(--vectis-icon-size-sm);\n    --vectis-icon-opsz: 20;\n    /* The colour of the `bordered` ring: a bet on the page background, the only one a\n       component can make since CSS cannot read what its parent paints. The `ringColor`\n       prop overrides it inline for a badge sitting on anything else. */\n    --badge-ring-color: var(--vectis-color-surface);\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--vectis-control-size-badge-h);\n    /* A minimum width equal to the height, with a small padding on top, is what\n       makes a one- or two-digit counter come out round rather than oval. */\n    min-width: var(--vectis-control-size-badge-h);\n    padding-inline: var(--vectis-space-1);\n    border-radius: var(--vectis-radius-pill);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  /*\n   * The class is compounded to (0,3,0): `.v-variant[data-variant='solid']` sets `color` at\n   * (0,2,0) from another sheet, and a tie would be settled by sheet order. The soft pill keeps\n   * the tone's own text colour, which says the tone where black or white would not.\n   */\n  @supports (color: contrast-color(red)) {\n    .v-badge.v-variant[data-variant='solid'] {\n      color: contrast-color(var(--tone-bg-solid));\n    }\n  }\n\n  /* A dot is always solid: with no content, a soft dot is a pale disc on the page, which a\n     presence marker cannot afford. (0,3,0), above the soft variant's background. */\n  .v-badge.v-variant[data-dot] {\n    background: var(--tone-bg-solid);\n  }\n\n  .v-badge[data-icon-only] {\n    padding: 0;\n  }\n\n  .v-badge[data-dot] {\n    width: var(--vectis-control-size-badge-dot);\n    height: var(--vectis-control-size-badge-dot);\n    min-width: 0;\n    padding: 0;\n  }\n\n  .v-badge[data-bordered] {\n    box-shadow: 0 0 0 var(--vectis-control-size-badge-ring) var(--badge-ring-color);\n  }\n\n  /*\n   * The tuck-in offset is a ratio of the badge's own size, so it stays proportionate across the\n   * pill, the dot and the icon. Each half of it is held in its own variable: the corner and the\n   * reading direction each flip ONE axis, and writing the whole `translate` again in each\n   * branch would make the two multiply; four rules to keep in step by hand for two independent\n   * decisions.\n   */\n  .v-badge-host[data-overlay] > .v-badge {\n    --badge-overlay-x: 25%;\n    --badge-overlay-y: -25%;\n\n    position: absolute;\n    inset-block: 0 auto;\n    inset-inline-end: 0;\n    translate: var(--badge-overlay-x) var(--badge-overlay-y);\n    /*\n     * Raise overlaid badges above later positioned siblings; tree order alone lets neighbouring\n     * segments cover them.\n     */\n    z-index: 1;\n  }\n\n  .v-badge-host[data-overlay][data-overlay-position='bottom'] > .v-badge {\n    --badge-overlay-y: 25%;\n\n    inset-block: auto 0;\n  }\n\n  /*\n   * In a right-to-left direction the logical corner moves to the left, so the horizontal half\n   * of the translation has to flip with it; `translate` is a physical property and knows\n   * nothing about direction.\n   */\n  .v-badge-host[data-overlay]:dir(rtl) > .v-badge {\n    --badge-overlay-x: -25%;\n  }\n\n  /* Forced colours repaint the background as Canvas and drop the ring, a shadow: the pill\n     loses its shape, and a dot, which has nothing else, disappears altogether. The pill\n     gets an edge, and the dot is filled in the text colour. */\n  @media (forced-colors: active) {\n    .v-badge {\n      outline: var(--vectis-control-border-width) solid CanvasText;\n      outline-offset: calc(-1 * var(--vectis-control-border-width));\n    }\n\n    .v-badge.v-variant[data-dot] {\n      forced-color-adjust: none;\n      background: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6EA,IAAM,IAAQ,GAeR,IAAQ,EAAA;EAOd,SAAS,IAAY;GACnB,OAAO,EAAM,YAAY,KAAA;EAC3B;EAMA,IAAM,IAAe,QAAe;GAClC,IAAM,IAAQ,EAAM;GAChB,YAAU,KAAA,KAAa,CAAC,OAAO,SAAS,CAAK,IACjD,OAAO,IAAQ,KAAK,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,CAAK,CAAC;EAC3D,CAAC,GAOK,UACJ,EACE,QACA;GACE,OAAO;GACP,gBAAgB,EAAM;GACtB,aAAa,EAAM;GACnB,eAAe,EAAM,UAAU,KAAA,IAAiB,KAAA,IAAL;GAC3C,YAAY,EAAM,MAAM,KAAK,KAAA;GAC7B,kBAAkB,CAAC,EAAM,OAAO,EAAM,OAAO,KAAK,KAAA;GAClD,iBAAiB,EAAM,WAAW,KAAK,KAAA;GACvC,OAAO,CACL,EAAiB,EAAM,KAAK,GAC5B,EAAM,cAAc,KAAA,IAAwD,KAAA,IAA5C,EAAE,sBAAsB,EAAM,UAAU,CAC1E;EACF,GACA,EAAM,MACF,KAAA,IACA,EAAM,OACJ,CAAC,EAAE,GAAO,EAAU,EAAM,IAAI,CAAC,CAAC,IAChC,EAAa,UAAU,KAAA,IACrB,KAAA,IACA,OAAO,EAAa,KAAK,CACnC;SAIF,EAAK,QAAQ,CAAC,aAKJ,EAAS,KAAA,EAAA,GADjB,EAQO,QAAA;;GANL,OAAM;GACL,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,yBAAuB,EAAA;MAExB,EAAQ,EAAA,QAAA,SAAA,GACR,EAA2B,GAAA,EAArB,eAAY,OAAM,CAAA,CAAA,GAAA,GAAA,CAAA,MAAA,EAAA,GAE1B,EAAe,GAAA,EAAA,KAAA,EAAA,CAAA"}
+{"version":3,"file":"VBadge.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","VIcon","_openBlock","_createElementBlock","_renderSlot","_createVNode","_createBlock","VIcon_default","_hoisted_1","VBadge_vue_vue_type_script_setup_true_lang_default","props","__props","slots","useSlots","hasTarget","displayCount","computed","count","Pill","h","customColorStyle","iconProps","openBlock","createElementBlock","renderSlot","_ctx","createVNode","createBlock"],"sources":["../../../src/components/VBadge/VBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * Render the default slot once: inspect its VNodes to decide whether a noninteractive badge has\n * content.\n */\nimport { computed, h } from 'vue'\nimport type { FunctionalComponent } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\nimport { customColorStyle } from '../../utils/css'\n\n/** How strongly the badge is painted: the full colour, or a tint of it. */\nexport type BadgeVariant = 'solid' | 'soft'\n/** What the badge means, in colour. */\nexport type BadgeTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\n/** The corner an overlaid badge is pinned to. */\nexport type BadgeOverlayPosition = 'top' | 'bottom'\n\ninterface BadgeProps {\n  /**\n   * How strongly the badge is painted: filled with the full colour (`solid`, the default), or a\n   * tinted background with the text in the colour (`soft`), for a count that should not draw\n   * the eye.\n   */\n  variant?: BadgeVariant\n  /**\n   * The meaning the badge carries, expressed as a colour. A solid badge is filled\n   * with it and its text adapts to stay readable; a soft one is tinted with it and\n   * writes its text in it.\n   */\n  tone?: BadgeTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. On a solid\n   * badge, browsers that support `contrast-color()` turn the text black or white by themselves;\n   * everywhere else it falls back to white, so with a light colour the contrast is yours to\n   * check.\n   */\n  color?: string\n  /**\n   * The number to display. Anything above 99 is shown as \"99+\", so that a busy\n   * counter cannot stretch the pill indefinitely.\n   */\n  count?: number\n  /**\n   * A single icon shown instead of a number: an icon name, or an explicit render\n   * (the VIcon contract). It takes precedence over `count`, and is ignored when the\n   * badge is a `dot`.\n   */\n  icon?: IconSource\n  /**\n   * Reduces the badge to a 10px dot with no content, the discreet way to signal\n   * that something is new without saying how much.\n   */\n  dot?: boolean\n  /**\n   * Pins the badge to a corner of the target element instead of placing it beside\n   * it. It does nothing when the badge has no target.\n   */\n  overlay?: boolean\n  /**\n   * Which corner an `overlay` badge is pinned to: the top one by default, the bottom one for a\n   * marker that belongs at the foot of its target, such as a presence dot under an avatar.\n   */\n  overlayPosition?: BadgeOverlayPosition\n  /**\n   * Draws a 2px ring around the badge, in the colour of the surface behind it, which detaches\n   * it from a busy target such as a picture.\n   */\n  bordered?: boolean\n  /** The colour of the ring drawn by `bordered`. */\n  ringColor?: string\n}\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n  variant: 'solid',\n  tone: 'accent',\n  color: undefined,\n  count: undefined,\n  icon: undefined,\n  overlayPosition: 'top',\n  ringColor: undefined,\n  // Written out although Vue casts an absent boolean to `false` on its own: left out,\n  // `vue-component-meta` reports no default at all and the docs table's cell goes blank.\n  dot: false,\n  overlay: false,\n  bordered: false,\n})\n\nconst slots = defineSlots<{\n  /** The element the badge belongs to. */\n  default?(): unknown\n}>()\n\n// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// would keep its first answer while a slot behind a `v-if` comes and goes.\nfunction hasTarget() {\n  return slots.default !== undefined\n}\n\n/**\n * The counter as it is actually displayed: a whole number, zero or more, and anything past 99\n * becomes \"99+\".\n */\nconst displayCount = computed(() => {\n  const count = props.count\n  if (count === undefined || !Number.isFinite(count)) return undefined\n  return count > 99 ? '99+' : Math.max(0, Math.trunc(count))\n})\n\n/*\n * The template has two roots; one wrapping a target, one standing alone; and both render the\n * same badge; a functional component is the one way to put the same markup in two places of a\n * template without writing it twice.\n */\nconst Pill: FunctionalComponent = () =>\n  h(\n    'span',\n    {\n      class: 'v-badge v-tone v-variant',\n      'data-variant': props.variant,\n      'data-tone': props.tone,\n      'data-custom': props.color !== undefined ? '' : undefined,\n      'data-dot': props.dot ? '' : undefined,\n      'data-icon-only': !props.dot && props.icon ? '' : undefined,\n      'data-bordered': props.bordered ? '' : undefined,\n      style: [\n        customColorStyle(props.color),\n        props.ringColor !== undefined ? { '--badge-ring-color': props.ringColor } : undefined,\n      ],\n    },\n    props.dot\n      ? undefined\n      : props.icon\n        ? [h(VIcon, iconProps(props.icon))]\n        : displayCount.value === undefined\n          ? undefined\n          : String(displayCount.value),\n  )\n// The empty list is not decoration. A functional component that declares no props lets only\n// `class`, `style` and listeners fall through, so a standalone badge, whose root this is, would\n// silently drop every other attribute a consumer set on VBadge (an `id`, a `data-*`).\nPill.props = []\n</script>\n\n<template>\n  <span\n    v-if=\"hasTarget()\"\n    class=\"v-badge-host\"\n    :data-overlay=\"overlay ? '' : undefined\"\n    :data-overlay-position=\"overlayPosition\"\n  >\n    <slot />\n    <Pill aria-hidden=\"true\" />\n  </span>\n  <Pill v-else />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-badge-host {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  /* The pill is painted by the shared `.v-variant` rules (styles/variants.css) over the\n     tone table (`.v-tone`), both set in the template: `solid` is the tone's full colour,\n     `soft` its tint with the text in the tone's own colour. A custom colour is the table's\n     `[data-custom]` row, in styles/tones.css. */\n  .v-badge {\n    --vectis-icon-size: var(--vectis-icon-size-sm);\n    --vectis-icon-opsz: 20;\n    /* The colour of the `bordered` ring: a bet on the page background, the only one a\n       component can make since CSS cannot read what its parent paints. The `ringColor`\n       prop overrides it inline for a badge sitting on anything else. */\n    --badge-ring-color: var(--vectis-color-surface);\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--vectis-control-size-badge-h);\n    /* A minimum width equal to the height, with a small padding on top, is what\n       makes a one- or two-digit counter come out round rather than oval. */\n    min-width: var(--vectis-control-size-badge-h);\n    padding-inline: var(--vectis-space-1);\n    border-radius: var(--vectis-radius-pill);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  /*\n   * The class is compounded to (0,3,0): `.v-variant[data-variant='solid']` sets `color` at\n   * (0,2,0) from another sheet, and a tie would be settled by sheet order. The soft pill keeps\n   * the tone's own text colour, which says the tone where black or white would not.\n   */\n  @supports (color: contrast-color(red)) {\n    .v-badge.v-variant[data-variant='solid'] {\n      color: contrast-color(var(--tone-bg-solid));\n    }\n  }\n\n  /* A dot is always solid: with no content, a soft dot is a pale disc on the page, which a\n     presence marker cannot afford. (0,3,0), above the soft variant's background. */\n  .v-badge.v-variant[data-dot] {\n    background: var(--tone-bg-solid);\n  }\n\n  .v-badge[data-icon-only] {\n    padding: 0;\n  }\n\n  .v-badge[data-dot] {\n    width: var(--vectis-control-size-badge-dot);\n    height: var(--vectis-control-size-badge-dot);\n    min-width: 0;\n    padding: 0;\n  }\n\n  .v-badge[data-bordered] {\n    box-shadow: 0 0 0 var(--vectis-control-size-badge-ring) var(--badge-ring-color);\n  }\n\n  /*\n   * The tuck-in offset is a ratio of the badge's own size, so it stays proportionate across the\n   * pill, the dot and the icon. Each half of it is held in its own variable: the corner and the\n   * reading direction each flip ONE axis, and writing the whole `translate` again in each\n   * branch would make the two multiply; four rules to keep in step by hand for two independent\n   * decisions.\n   */\n  .v-badge-host[data-overlay] > .v-badge {\n    --badge-overlay-x: 25%;\n    --badge-overlay-y: -25%;\n\n    position: absolute;\n    inset-block: 0 auto;\n    inset-inline-end: 0;\n    translate: var(--badge-overlay-x) var(--badge-overlay-y);\n    /*\n     * Raise overlaid badges above later positioned siblings; tree order alone lets neighbouring\n     * segments cover them.\n     */\n    z-index: 1;\n  }\n\n  .v-badge-host[data-overlay][data-overlay-position='bottom'] > .v-badge {\n    --badge-overlay-y: 25%;\n\n    inset-block: auto 0;\n  }\n\n  /*\n   * In a right-to-left direction the logical corner moves to the left, so the horizontal half\n   * of the translation has to flip with it; `translate` is a physical property and knows\n   * nothing about direction.\n   */\n  .v-badge-host[data-overlay]:dir(rtl) > .v-badge {\n    --badge-overlay-x: -25%;\n  }\n\n  /* Forced colours repaint the background as Canvas and drop the ring, a shadow: the pill\n     loses its shape, and a dot, which has nothing else, disappears altogether. The pill\n     gets an edge, and the dot is filled in the text colour. */\n  @media (forced-colors: active) {\n    .v-badge {\n      outline: var(--vectis-control-border-width) solid CanvasText;\n      outline-offset: calc(-1 * var(--vectis-control-border-width));\n    }\n\n    .v-badge.v-variant[data-dot] {\n      forced-color-adjust: none;\n      background: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6EA,IAAMU,IAAQC,GAeRC,IAAQZ,EAAA;EAOd,SAASc,IAAY;GACnB,OAAOF,EAAM,YAAY,KAAA;EAC3B;EAMA,IAAMG,IAAeC,QAAe;GAClC,IAAMC,IAAQP,EAAM;GACpB,IAAIO,MAAU,KAAA,KAAc,OAAO,SAASA,CAAK,GACjD,OAAOA,IAAQ,KAAK,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAMA,CAAK,CAAC;EAC3D,CAAC,GAOKC,UACJC,EACE,QACA;GACE,OAAO;GACP,gBAAgBT,EAAM;GACtB,aAAaA,EAAM;GACnB,eAAeA,EAAM,UAAU,KAAA,IAAiB,KAAA,IAAL;GAC3C,YAAYA,EAAM,MAAM,KAAK,KAAA;GAC7B,kBAAkB,CAACA,EAAM,OAAOA,EAAM,OAAO,KAAK,KAAA;GAClD,iBAAiBA,EAAM,WAAW,KAAK,KAAA;GACvC,OAAO,CACLU,EAAiBV,EAAM,KAAK,GAC5BA,EAAM,cAAc,KAAA,IAAwD,KAAA,IAA5C,EAAE,sBAAsBA,EAAM,UAAU,CAC1E;EACF,GACAA,EAAM,MACF,KAAA,IACAA,EAAM,OACJ,CAACS,EAAElB,GAAOoB,EAAUX,EAAM,IAAI,CAAC,CAAC,IAChCK,EAAa,UAAU,KAAA,IACrB,KAAA,IACA,OAAOA,EAAa,KAAK,CACnC;SAIF,EAAK,QAAQ,CAAC,aAKJD,EAAS,KADjBZ,EAAA,GAAAC,EAQO,QAAA;;GANL,OAAM;GACL,gBAAcQ,EAAA,UAAO,KAAQ,KAAA;GAC7B,yBAAuBA,EAAA;EAExBP,GAAAA,CAAAA,EAAQqB,EAAA,QAAA,SAAA,GACRpB,EAA2Ba,GAAA,EAArB,eAAY,OAAM,CAAA,CAAA,GAAA,GAAAV,CAAA,MAE1BN,EAAA,GAAAI,EAAeY,GAAA,EAAA,KAAA,EAAA,CAAA"}

package/dist/components/VBreadcrumb/VBreadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"VBreadcrumb.js","names":[],"sources":["../../../src/components/VBreadcrumb/VBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core\n/**\n * Mark the matching link aria-current without disabling it. CSS hides the first separator so\n * SSR needs no child registry.\n */\n\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { more_horiz as moreHorizIcon } from '../VIcon/icons/more_horiz'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VMenu from '../VMenu/VMenu.vue'\nimport VMenuItem from '../VMenu/VMenuItem.vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\nexport interface BreadcrumbItem {\n  /** The text shown for this segment. */\n  label: string\n  /**\n   * Where the segment leads. It is also the value compared with `currentPath` to\n   * decide which segment is the current page.\n   */\n  href: string\n  /**\n   * An icon placed before the label: an icon name, or an explicit render\n   * (`{ src: '/logo.svg' }`, `{ component }`…). A string is always a name.\n   */\n  icon?: IconSource\n}\n\ninterface BreadcrumbProps {\n  /** The segments of the trail, ordered from the most general down to the deepest. */\n  items: BreadcrumbItem[]\n  /**\n   * The name screen readers announce for this navigation. It falls back to the\n   * wording of the DS dictionary, in the current language.\n   */\n  label?: string\n  /** The address of the page being displayed. */\n  currentPath?: string\n  /**\n   * The icon drawn between two segments: an icon name, or an explicit render,\n   * exactly like an item's `icon`. It is mirrored in a right-to-left page.\n   */\n  separatorIcon?: IconSource\n  /**\n   * The length past which the trail folds: only the first segment, an \"…\" button and the last\n   * two remain, the button opening a menu that lists the hidden segments alone.\n   */\n  maxItems?: number\n  /**\n   * The name screen readers announce for the \"…\" button. It falls back to the\n   * wording of the DS dictionary.\n   */\n  ellipsisLabel?: string\n}\n\nconst props = withDefaults(defineProps<BreadcrumbProps>(), {\n  label: undefined,\n  currentPath: undefined,\n  separatorIcon: () => chevronRightIcon,\n  maxItems: undefined,\n  ellipsisLabel: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.breadcrumb.label)\nconst resolvedEllipsisLabel = computed(() => props.ellipsisLabel ?? m.value.breadcrumb.ellipsis)\n\n/**\n * Drops the query, the hash and a trailing slash, so that `/docs`, `/docs/` and a router's full\n * path `/docs?tab=2#intro` compare as the same page; the root `/` is left alone.\n */\nfunction normalize(path: string): string {\n  const bare = path.replace(/[?#].*$/, '')\n  return bare.length > 1 && bare.endsWith('/') ? bare.slice(0, -1) : bare\n}\n\nconst normalizedCurrent = computed(() =>\n  props.currentPath === undefined ? undefined : normalize(props.currentPath),\n)\n\n// @a11y\n// This is what feeds `aria-current=\"page\"`, the only marker telling assistive technology\n// where the trail ends, the folded segments of the menu included.\nfunction isCurrent(item: BreadcrumbItem): boolean {\n  return normalizedCurrent.value !== undefined && normalize(item.href) === normalizedCurrent.value\n}\n\nconst truncated = computed(\n  () => props.maxItems !== undefined && props.items.length > Math.max(props.maxItems, 3),\n)\n/** The segments folded into the menu: everything between the first and the last two. */\nconst hiddenItems = computed(() => (truncated.value ? props.items.slice(1, -2) : []))\n/**\n * The segments actually rendered in the list; when the trail is folded, the first one followed\n * by the last two.\n */\nconst visibleItems = computed(() =>\n  truncated.value ? [props.items[0] as BreadcrumbItem, ...props.items.slice(-2)] : props.items,\n)\n</script>\n\n<template>\n  <nav class=\"v-breadcrumb\" :aria-label=\"ariaLabel\">\n    <ol class=\"v-breadcrumb-list\">\n      <template v-for=\"(item, index) in visibleItems\" :key=\"item.href\">\n        <li v-if=\"truncated && index === 1\" class=\"v-breadcrumb-item v-breadcrumb-ellipsis\">\n          <VIcon class=\"v-breadcrumb-separator\" v-bind=\"iconProps(separatorIcon)\" mirrored />\n          <VMenu>\n            <template #trigger=\"{ triggerProps }\">\n              <VIconButton\n                size=\"sm\"\n                :label=\"resolvedEllipsisLabel\"\n                :icon=\"moreHorizIcon\"\n                v-bind=\"triggerProps\"\n              />\n            </template>\n            <VMenuItem\n              v-for=\"hidden in hiddenItems\"\n              :key=\"hidden.href\"\n              :href=\"hidden.href\"\n              :label=\"hidden.label\"\n              :icon-start=\"hidden.icon\"\n              :selected=\"isCurrent(hidden)\"\n              :aria-current=\"isCurrent(hidden) ? 'page' : undefined\"\n            />\n          </VMenu>\n        </li>\n        <li class=\"v-breadcrumb-item\">\n          <VIcon class=\"v-breadcrumb-separator\" v-bind=\"iconProps(separatorIcon)\" mirrored />\n          <a\n            class=\"v-breadcrumb-link\"\n            :href=\"item.href\"\n            :aria-current=\"isCurrent(item) ? 'page' : undefined\"\n          >\n            <VIcon v-if=\"item.icon\" v-bind=\"iconProps(item.icon)\" />\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The icon context is set here rather than through `.v-control`, which is the usual\n     route: a trail has no `size` prop and no height to speak of, so the size scale would\n     bring a table of five steps to pick one value from. */\n  .v-breadcrumb {\n    --vectis-icon-size: var(--vectis-icon-size-sm);\n    --vectis-icon-opsz: 20;\n  }\n\n  .v-breadcrumb-list {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-body-md-size);\n  }\n\n  .v-breadcrumb-item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * Every item renders its own leading separator and the first one is hidden here, which keeps\n   * the template free of an index test. Delete this rule and the trail opens on a stray\n   * chevron; both child combinators are load-bearing too, so wrapping an item or the list in\n   * anything puts that chevron straight back.\n   */\n  .v-breadcrumb-list > .v-breadcrumb-item:first-child > .v-breadcrumb-separator {\n    display: none;\n  }\n\n  .v-breadcrumb-separator {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The corner is only ever seen on the focus ring, which follows it. It is the control\n     radius capped at half a line, the row recipe of VSideNavigationItem with the line\n     standing in for a control height the link does not have: a label that wraps keeps\n     the corner of a one-line one under a pill override. */\n  .v-breadcrumb-link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    color: var(--vectis-color-text-muted);\n    text-decoration: none;\n    border-radius: min(var(--vectis-radius-interactive), 0.5lh);\n    transition: color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-breadcrumb-link:hover {\n    color: var(--vectis-color-text);\n    text-decoration: underline;\n  }\n\n  .v-breadcrumb-link: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-breadcrumb-link[aria-current='page'] {\n    color: var(--vectis-color-text);\n    font-weight: var(--vectis-text-label-weight);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-breadcrumb-link {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VBreadcrumb.js","names":["_sfc_main","VBreadcrumb_vue_vue_type_script_setup_true_lang_default","VBreadcrumb_default"],"sources":["../../../src/components/VBreadcrumb/VBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core\n/**\n * Mark the matching link aria-current without disabling it. CSS hides the first separator so\n * SSR needs no child registry.\n */\n\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { more_horiz as moreHorizIcon } from '../VIcon/icons/more_horiz'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VMenu from '../VMenu/VMenu.vue'\nimport VMenuItem from '../VMenu/VMenuItem.vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\nexport interface BreadcrumbItem {\n  /** The text shown for this segment. */\n  label: string\n  /**\n   * Where the segment leads. It is also the value compared with `currentPath` to\n   * decide which segment is the current page.\n   */\n  href: string\n  /**\n   * An icon placed before the label: an icon name, or an explicit render\n   * (`{ src: '/logo.svg' }`, `{ component }`…). A string is always a name.\n   */\n  icon?: IconSource\n}\n\ninterface BreadcrumbProps {\n  /** The segments of the trail, ordered from the most general down to the deepest. */\n  items: BreadcrumbItem[]\n  /**\n   * The name screen readers announce for this navigation. It falls back to the\n   * wording of the DS dictionary, in the current language.\n   */\n  label?: string\n  /** The address of the page being displayed. */\n  currentPath?: string\n  /**\n   * The icon drawn between two segments: an icon name, or an explicit render,\n   * exactly like an item's `icon`. It is mirrored in a right-to-left page.\n   */\n  separatorIcon?: IconSource\n  /**\n   * The length past which the trail folds: only the first segment, an \"…\" button and the last\n   * two remain, the button opening a menu that lists the hidden segments alone.\n   */\n  maxItems?: number\n  /**\n   * The name screen readers announce for the \"…\" button. It falls back to the\n   * wording of the DS dictionary.\n   */\n  ellipsisLabel?: string\n}\n\nconst props = withDefaults(defineProps<BreadcrumbProps>(), {\n  label: undefined,\n  currentPath: undefined,\n  separatorIcon: () => chevronRightIcon,\n  maxItems: undefined,\n  ellipsisLabel: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.breadcrumb.label)\nconst resolvedEllipsisLabel = computed(() => props.ellipsisLabel ?? m.value.breadcrumb.ellipsis)\n\n/**\n * Drops the query, the hash and a trailing slash, so that `/docs`, `/docs/` and a router's full\n * path `/docs?tab=2#intro` compare as the same page; the root `/` is left alone.\n */\nfunction normalize(path: string): string {\n  const bare = path.replace(/[?#].*$/, '')\n  return bare.length > 1 && bare.endsWith('/') ? bare.slice(0, -1) : bare\n}\n\nconst normalizedCurrent = computed(() =>\n  props.currentPath === undefined ? undefined : normalize(props.currentPath),\n)\n\n// @a11y\n// This is what feeds `aria-current=\"page\"`, the only marker telling assistive technology\n// where the trail ends, the folded segments of the menu included.\nfunction isCurrent(item: BreadcrumbItem): boolean {\n  return normalizedCurrent.value !== undefined && normalize(item.href) === normalizedCurrent.value\n}\n\nconst truncated = computed(\n  () => props.maxItems !== undefined && props.items.length > Math.max(props.maxItems, 3),\n)\n/** The segments folded into the menu: everything between the first and the last two. */\nconst hiddenItems = computed(() => (truncated.value ? props.items.slice(1, -2) : []))\n/**\n * The segments actually rendered in the list; when the trail is folded, the first one followed\n * by the last two.\n */\nconst visibleItems = computed(() =>\n  truncated.value ? [props.items[0] as BreadcrumbItem, ...props.items.slice(-2)] : props.items,\n)\n</script>\n\n<template>\n  <nav class=\"v-breadcrumb\" :aria-label=\"ariaLabel\">\n    <ol class=\"v-breadcrumb-list\">\n      <template v-for=\"(item, index) in visibleItems\" :key=\"item.href\">\n        <li v-if=\"truncated && index === 1\" class=\"v-breadcrumb-item v-breadcrumb-ellipsis\">\n          <VIcon class=\"v-breadcrumb-separator\" v-bind=\"iconProps(separatorIcon)\" mirrored />\n          <VMenu>\n            <template #trigger=\"{ triggerProps }\">\n              <VIconButton\n                size=\"sm\"\n                :label=\"resolvedEllipsisLabel\"\n                :icon=\"moreHorizIcon\"\n                v-bind=\"triggerProps\"\n              />\n            </template>\n            <VMenuItem\n              v-for=\"hidden in hiddenItems\"\n              :key=\"hidden.href\"\n              :href=\"hidden.href\"\n              :label=\"hidden.label\"\n              :icon-start=\"hidden.icon\"\n              :selected=\"isCurrent(hidden)\"\n              :aria-current=\"isCurrent(hidden) ? 'page' : undefined\"\n            />\n          </VMenu>\n        </li>\n        <li class=\"v-breadcrumb-item\">\n          <VIcon class=\"v-breadcrumb-separator\" v-bind=\"iconProps(separatorIcon)\" mirrored />\n          <a\n            class=\"v-breadcrumb-link\"\n            :href=\"item.href\"\n            :aria-current=\"isCurrent(item) ? 'page' : undefined\"\n          >\n            <VIcon v-if=\"item.icon\" v-bind=\"iconProps(item.icon)\" />\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The icon context is set here rather than through `.v-control`, which is the usual\n     route: a trail has no `size` prop and no height to speak of, so the size scale would\n     bring a table of five steps to pick one value from. */\n  .v-breadcrumb {\n    --vectis-icon-size: var(--vectis-icon-size-sm);\n    --vectis-icon-opsz: 20;\n  }\n\n  .v-breadcrumb-list {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-body-md-size);\n  }\n\n  .v-breadcrumb-item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * Every item renders its own leading separator and the first one is hidden here, which keeps\n   * the template free of an index test. Delete this rule and the trail opens on a stray\n   * chevron; both child combinators are load-bearing too, so wrapping an item or the list in\n   * anything puts that chevron straight back.\n   */\n  .v-breadcrumb-list > .v-breadcrumb-item:first-child > .v-breadcrumb-separator {\n    display: none;\n  }\n\n  .v-breadcrumb-separator {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The corner is only ever seen on the focus ring, which follows it. It is the control\n     radius capped at half a line, the row recipe of VSideNavigationItem with the line\n     standing in for a control height the link does not have: a label that wraps keeps\n     the corner of a one-line one under a pill override. */\n  .v-breadcrumb-link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    color: var(--vectis-color-text-muted);\n    text-decoration: none;\n    border-radius: min(var(--vectis-radius-interactive), 0.5lh);\n    transition: color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-breadcrumb-link:hover {\n    color: var(--vectis-color-text);\n    text-decoration: underline;\n  }\n\n  .v-breadcrumb-link: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-breadcrumb-link[aria-current='page'] {\n    color: var(--vectis-color-text);\n    font-weight: var(--vectis-text-label-weight);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-breadcrumb-link {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"VBreadcrumb.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VBreadcrumb/VBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core\n/**\n * Mark the matching link aria-current without disabling it. CSS hides the first separator so\n * SSR needs no child registry.\n */\n\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { more_horiz as moreHorizIcon } from '../VIcon/icons/more_horiz'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VMenu from '../VMenu/VMenu.vue'\nimport VMenuItem from '../VMenu/VMenuItem.vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\nexport interface BreadcrumbItem {\n  /** The text shown for this segment. */\n  label: string\n  /**\n   * Where the segment leads. It is also the value compared with `currentPath` to\n   * decide which segment is the current page.\n   */\n  href: string\n  /**\n   * An icon placed before the label: an icon name, or an explicit render\n   * (`{ src: '/logo.svg' }`, `{ component }`…). A string is always a name.\n   */\n  icon?: IconSource\n}\n\ninterface BreadcrumbProps {\n  /** The segments of the trail, ordered from the most general down to the deepest. */\n  items: BreadcrumbItem[]\n  /**\n   * The name screen readers announce for this navigation. It falls back to the\n   * wording of the DS dictionary, in the current language.\n   */\n  label?: string\n  /** The address of the page being displayed. */\n  currentPath?: string\n  /**\n   * The icon drawn between two segments: an icon name, or an explicit render,\n   * exactly like an item's `icon`. It is mirrored in a right-to-left page.\n   */\n  separatorIcon?: IconSource\n  /**\n   * The length past which the trail folds: only the first segment, an \"…\" button and the last\n   * two remain, the button opening a menu that lists the hidden segments alone.\n   */\n  maxItems?: number\n  /**\n   * The name screen readers announce for the \"…\" button. It falls back to the\n   * wording of the DS dictionary.\n   */\n  ellipsisLabel?: string\n}\n\nconst props = withDefaults(defineProps<BreadcrumbProps>(), {\n  label: undefined,\n  currentPath: undefined,\n  separatorIcon: () => chevronRightIcon,\n  maxItems: undefined,\n  ellipsisLabel: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.breadcrumb.label)\nconst resolvedEllipsisLabel = computed(() => props.ellipsisLabel ?? m.value.breadcrumb.ellipsis)\n\n/**\n * Drops the query, the hash and a trailing slash, so that `/docs`, `/docs/` and a router's full\n * path `/docs?tab=2#intro` compare as the same page; the root `/` is left alone.\n */\nfunction normalize(path: string): string {\n  const bare = path.replace(/[?#].*$/, '')\n  return bare.length > 1 && bare.endsWith('/') ? bare.slice(0, -1) : bare\n}\n\nconst normalizedCurrent = computed(() =>\n  props.currentPath === undefined ? undefined : normalize(props.currentPath),\n)\n\n// @a11y\n// This is what feeds `aria-current=\"page\"`, the only marker telling assistive technology\n// where the trail ends, the folded segments of the menu included.\nfunction isCurrent(item: BreadcrumbItem): boolean {\n  return normalizedCurrent.value !== undefined && normalize(item.href) === normalizedCurrent.value\n}\n\nconst truncated = computed(\n  () => props.maxItems !== undefined && props.items.length > Math.max(props.maxItems, 3),\n)\n/** The segments folded into the menu: everything between the first and the last two. */\nconst hiddenItems = computed(() => (truncated.value ? props.items.slice(1, -2) : []))\n/**\n * The segments actually rendered in the list; when the trail is folded, the first one followed\n * by the last two.\n */\nconst visibleItems = computed(() =>\n  truncated.value ? [props.items[0] as BreadcrumbItem, ...props.items.slice(-2)] : props.items,\n)\n</script>\n\n<template>\n  <nav class=\"v-breadcrumb\" :aria-label=\"ariaLabel\">\n    <ol class=\"v-breadcrumb-list\">\n      <template v-for=\"(item, index) in visibleItems\" :key=\"item.href\">\n        <li v-if=\"truncated && index === 1\" class=\"v-breadcrumb-item v-breadcrumb-ellipsis\">\n          <VIcon class=\"v-breadcrumb-separator\" v-bind=\"iconProps(separatorIcon)\" mirrored />\n          <VMenu>\n            <template #trigger=\"{ triggerProps }\">\n              <VIconButton\n                size=\"sm\"\n                :label=\"resolvedEllipsisLabel\"\n                :icon=\"moreHorizIcon\"\n                v-bind=\"triggerProps\"\n              />\n            </template>\n            <VMenuItem\n              v-for=\"hidden in hiddenItems\"\n              :key=\"hidden.href\"\n              :href=\"hidden.href\"\n              :label=\"hidden.label\"\n              :icon-start=\"hidden.icon\"\n              :selected=\"isCurrent(hidden)\"\n              :aria-current=\"isCurrent(hidden) ? 'page' : undefined\"\n            />\n          </VMenu>\n        </li>\n        <li class=\"v-breadcrumb-item\">\n          <VIcon class=\"v-breadcrumb-separator\" v-bind=\"iconProps(separatorIcon)\" mirrored />\n          <a\n            class=\"v-breadcrumb-link\"\n            :href=\"item.href\"\n            :aria-current=\"isCurrent(item) ? 'page' : undefined\"\n          >\n            <VIcon v-if=\"item.icon\" v-bind=\"iconProps(item.icon)\" />\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The icon context is set here rather than through `.v-control`, which is the usual\n     route: a trail has no `size` prop and no height to speak of, so the size scale would\n     bring a table of five steps to pick one value from. */\n  .v-breadcrumb {\n    --vectis-icon-size: var(--vectis-icon-size-sm);\n    --vectis-icon-opsz: 20;\n  }\n\n  .v-breadcrumb-list {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-body-md-size);\n  }\n\n  .v-breadcrumb-item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * Every item renders its own leading separator and the first one is hidden here, which keeps\n   * the template free of an index test. Delete this rule and the trail opens on a stray\n   * chevron; both child combinators are load-bearing too, so wrapping an item or the list in\n   * anything puts that chevron straight back.\n   */\n  .v-breadcrumb-list > .v-breadcrumb-item:first-child > .v-breadcrumb-separator {\n    display: none;\n  }\n\n  .v-breadcrumb-separator {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The corner is only ever seen on the focus ring, which follows it. It is the control\n     radius capped at half a line, the row recipe of VSideNavigationItem with the line\n     standing in for a control height the link does not have: a label that wraps keeps\n     the corner of a one-line one under a pill override. */\n  .v-breadcrumb-link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    color: var(--vectis-color-text-muted);\n    text-decoration: none;\n    border-radius: min(var(--vectis-radius-interactive), 0.5lh);\n    transition: color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-breadcrumb-link:hover {\n    color: var(--vectis-color-text);\n    text-decoration: underline;\n  }\n\n  .v-breadcrumb-link: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-breadcrumb-link[aria-current='page'] {\n    color: var(--vectis-color-text);\n    font-weight: var(--vectis-text-label-weight);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-breadcrumb-link {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM,IAAQ,GAQR,IAAI,EAAY,GAChB,IAAY,QAAmB,EAAM,SAAS,EAAE,MAAM,WAAW,KAAK,GACtE,IAAwB,QAAe,EAAM,iBAAiB,EAAE,MAAM,WAAW,QAAQ;EAM/F,SAAS,EAAU,GAAsB;GACvC,IAAM,IAAO,EAAK,QAAQ,WAAW,EAAE;GACvC,OAAO,EAAK,SAAS,KAAK,EAAK,SAAS,GAAG,IAAI,EAAK,MAAM,GAAG,EAAE,IAAI;EACrE;EAEA,IAAM,IAAoB,QACxB,EAAM,gBAAgB,KAAA,IAAY,KAAA,IAAY,EAAU,EAAM,WAAW,CAC3E;EAKA,SAAS,EAAU,GAA+B;GAChD,OAAO,EAAkB,UAAU,KAAA,KAAa,EAAU,EAAK,IAAI,MAAM,EAAkB;EAC7F;EAEA,IAAM,IAAY,QACV,EAAM,aAAa,KAAA,KAAa,EAAM,MAAM,SAAS,KAAK,IAAI,EAAM,UAAU,CAAC,CACvF,GAEM,IAAc,QAAgB,EAAU,QAAQ,EAAM,MAAM,MAAM,GAAG,EAAE,IAAI,CAAC,CAAE,GAK9E,IAAe,QACnB,EAAU,QAAQ,CAAC,EAAM,MAAM,IAAsB,GAAG,EAAM,MAAM,MAAM,EAAE,CAAC,IAAI,EAAM,KACzF;yBAIE,EAsCM,OAAA;GAtCD,OAAM;GAAgB,cAAY,EAAA,CAAA;MACrC,EAoCK,MApCL,GAoCK,EAAA,EAAA,EAAA,GAnCH,EAkCW,GAAA,MAAA,EAlCuB,EAAA,QAAhB,GAAM,wBAA8B,EAAK,KAAA,GAAA,CAC/C,EAAA,SAAa,MAAK,KAAA,EAAA,GAA5B,EAqBK,MArBL,GAqBK,CApBH,EAAmF,GAAnF,EAAmF,EAA5E,OAAM,yBAAwB,GAAA,EAAA,SAAA,GAAA,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,aAAa,GAAA,EAAG,UAAA,GAAQ,CAAA,GAAA,MAAA,EAAA,GAChF,EAkBQ,GAAA,MAAA;GAjBK,SAAO,GAMd,EANkB,sBAAY,CAChC,EAKE,GALF,EAKE;IAJA,MAAK;IACJ,OAAO,EAAA;IACP,MAAM,EAAA,CAAA;uBACC,CAAY,GAAA,MAAA,IAAA,CAAA,SAAA,MAAA,CAAA,CAAA,CAAA;oBAIO,EAAA,EAAA,EAAA,GAD/B,EAQE,GAAA,MAAA,EAPiB,EAAA,QAAV,YADT,EAQE,GAAA;IANC,KAAK,EAAO;IACZ,MAAM,EAAO;IACb,OAAO,EAAO;IACd,cAAY,EAAO;IACnB,UAAU,EAAU,CAAM;IAC1B,gBAAc,EAAU,CAAM,IAAA,SAAa,KAAA;;;;;;;;;qBAIlD,EAUK,MAVL,GAUK,CATH,EAAmF,GAAnF,EAAmF,EAA5E,OAAM,yBAAwB,GAAA,EAAA,SAAA,GAAA,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,aAAa,GAAA,EAAG,UAAA,GAAQ,CAAA,GAAA,MAAA,EAAA,GAChF,EAOI,KAAA;GANF,OAAM;GACL,MAAM,EAAK;GACX,gBAAc,EAAU,CAAI,IAAA,SAAa,KAAA;MAE7B,EAAK,QAAA,EAAA,GAAlB,EAAwD,GAAxD,EAAwD;;;KAAxB,EAAA,CAAA,CAAS,CAAC,EAAK,IAAI,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAK,MACxD,EAAG,EAAK,KAAK,GAAA,CAAA,CAAA,GAAA,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"VBreadcrumb.vue_vue_type_script_setup_true_lang.js","names":["chevronRightIcon","_openBlock","_createElementBlock","_unref","_createElementVNode","_Fragment","_renderList","_createVNode","VIcon","_mergeProps","VMenu","_withCtx","VIconButton","moreHorizIcon","_createBlock","VMenuItem","_createCommentVNode","_createTextVNode","_toDisplayString","VIcon_default","VIconButton_default","VMenu_default","VMenuItem_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","VBreadcrumb_vue_vue_type_script_setup_true_lang_default","chevron_right","props","__props","m","useMessages","ariaLabel","useAriaLabel","resolvedEllipsisLabel","computed","normalize","bare","path","normalizedCurrent","isCurrent","item","truncated","hiddenItems","visibleItems","openBlock","createElementBlock","unref","createElementVNode","Fragment","renderList","index","createVNode","mergeProps","iconProps","withCtx","more_horiz","triggerProps","createBlock","hidden","createCommentVNode","createTextVNode","toDisplayString"],"sources":["../../../src/components/VBreadcrumb/VBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core\n/**\n * Mark the matching link aria-current without disabling it. CSS hides the first separator so\n * SSR needs no child registry.\n */\n\nimport { computed } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { more_horiz as moreHorizIcon } from '../VIcon/icons/more_horiz'\nimport type { IconSource } from '../VIcon/types'\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VMenu from '../VMenu/VMenu.vue'\nimport VMenuItem from '../VMenu/VMenuItem.vue'\n\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useMessages } from '../../i18n/state'\n\nexport interface BreadcrumbItem {\n  /** The text shown for this segment. */\n  label: string\n  /**\n   * Where the segment leads. It is also the value compared with `currentPath` to\n   * decide which segment is the current page.\n   */\n  href: string\n  /**\n   * An icon placed before the label: an icon name, or an explicit render\n   * (`{ src: '/logo.svg' }`, `{ component }`…). A string is always a name.\n   */\n  icon?: IconSource\n}\n\ninterface BreadcrumbProps {\n  /** The segments of the trail, ordered from the most general down to the deepest. */\n  items: BreadcrumbItem[]\n  /**\n   * The name screen readers announce for this navigation. It falls back to the\n   * wording of the DS dictionary, in the current language.\n   */\n  label?: string\n  /** The address of the page being displayed. */\n  currentPath?: string\n  /**\n   * The icon drawn between two segments: an icon name, or an explicit render,\n   * exactly like an item's `icon`. It is mirrored in a right-to-left page.\n   */\n  separatorIcon?: IconSource\n  /**\n   * The length past which the trail folds: only the first segment, an \"…\" button and the last\n   * two remain, the button opening a menu that lists the hidden segments alone.\n   */\n  maxItems?: number\n  /**\n   * The name screen readers announce for the \"…\" button. It falls back to the\n   * wording of the DS dictionary.\n   */\n  ellipsisLabel?: string\n}\n\nconst props = withDefaults(defineProps<BreadcrumbProps>(), {\n  label: undefined,\n  currentPath: undefined,\n  separatorIcon: () => chevronRightIcon,\n  maxItems: undefined,\n  ellipsisLabel: undefined,\n})\n\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.breadcrumb.label)\nconst resolvedEllipsisLabel = computed(() => props.ellipsisLabel ?? m.value.breadcrumb.ellipsis)\n\n/**\n * Drops the query, the hash and a trailing slash, so that `/docs`, `/docs/` and a router's full\n * path `/docs?tab=2#intro` compare as the same page; the root `/` is left alone.\n */\nfunction normalize(path: string): string {\n  const bare = path.replace(/[?#].*$/, '')\n  return bare.length > 1 && bare.endsWith('/') ? bare.slice(0, -1) : bare\n}\n\nconst normalizedCurrent = computed(() =>\n  props.currentPath === undefined ? undefined : normalize(props.currentPath),\n)\n\n// @a11y\n// This is what feeds `aria-current=\"page\"`, the only marker telling assistive technology\n// where the trail ends, the folded segments of the menu included.\nfunction isCurrent(item: BreadcrumbItem): boolean {\n  return normalizedCurrent.value !== undefined && normalize(item.href) === normalizedCurrent.value\n}\n\nconst truncated = computed(\n  () => props.maxItems !== undefined && props.items.length > Math.max(props.maxItems, 3),\n)\n/** The segments folded into the menu: everything between the first and the last two. */\nconst hiddenItems = computed(() => (truncated.value ? props.items.slice(1, -2) : []))\n/**\n * The segments actually rendered in the list; when the trail is folded, the first one followed\n * by the last two.\n */\nconst visibleItems = computed(() =>\n  truncated.value ? [props.items[0] as BreadcrumbItem, ...props.items.slice(-2)] : props.items,\n)\n</script>\n\n<template>\n  <nav class=\"v-breadcrumb\" :aria-label=\"ariaLabel\">\n    <ol class=\"v-breadcrumb-list\">\n      <template v-for=\"(item, index) in visibleItems\" :key=\"item.href\">\n        <li v-if=\"truncated && index === 1\" class=\"v-breadcrumb-item v-breadcrumb-ellipsis\">\n          <VIcon class=\"v-breadcrumb-separator\" v-bind=\"iconProps(separatorIcon)\" mirrored />\n          <VMenu>\n            <template #trigger=\"{ triggerProps }\">\n              <VIconButton\n                size=\"sm\"\n                :label=\"resolvedEllipsisLabel\"\n                :icon=\"moreHorizIcon\"\n                v-bind=\"triggerProps\"\n              />\n            </template>\n            <VMenuItem\n              v-for=\"hidden in hiddenItems\"\n              :key=\"hidden.href\"\n              :href=\"hidden.href\"\n              :label=\"hidden.label\"\n              :icon-start=\"hidden.icon\"\n              :selected=\"isCurrent(hidden)\"\n              :aria-current=\"isCurrent(hidden) ? 'page' : undefined\"\n            />\n          </VMenu>\n        </li>\n        <li class=\"v-breadcrumb-item\">\n          <VIcon class=\"v-breadcrumb-separator\" v-bind=\"iconProps(separatorIcon)\" mirrored />\n          <a\n            class=\"v-breadcrumb-link\"\n            :href=\"item.href\"\n            :aria-current=\"isCurrent(item) ? 'page' : undefined\"\n          >\n            <VIcon v-if=\"item.icon\" v-bind=\"iconProps(item.icon)\" />\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The icon context is set here rather than through `.v-control`, which is the usual\n     route: a trail has no `size` prop and no height to speak of, so the size scale would\n     bring a table of five steps to pick one value from. */\n  .v-breadcrumb {\n    --vectis-icon-size: var(--vectis-icon-size-sm);\n    --vectis-icon-opsz: 20;\n  }\n\n  .v-breadcrumb-list {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-body-md-size);\n  }\n\n  .v-breadcrumb-item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * Every item renders its own leading separator and the first one is hidden here, which keeps\n   * the template free of an index test. Delete this rule and the trail opens on a stray\n   * chevron; both child combinators are load-bearing too, so wrapping an item or the list in\n   * anything puts that chevron straight back.\n   */\n  .v-breadcrumb-list > .v-breadcrumb-item:first-child > .v-breadcrumb-separator {\n    display: none;\n  }\n\n  .v-breadcrumb-separator {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The corner is only ever seen on the focus ring, which follows it. It is the control\n     radius capped at half a line, the row recipe of VSideNavigationItem with the line\n     standing in for a control height the link does not have: a label that wraps keeps\n     the corner of a one-line one under a pill override. */\n  .v-breadcrumb-link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    color: var(--vectis-color-text-muted);\n    text-decoration: none;\n    border-radius: min(var(--vectis-radius-interactive), 0.5lh);\n    transition: color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-breadcrumb-link:hover {\n    color: var(--vectis-color-text);\n    text-decoration: underline;\n  }\n\n  .v-breadcrumb-link: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-breadcrumb-link[aria-current='page'] {\n    color: var(--vectis-color-text);\n    font-weight: var(--vectis-text-label-weight);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-breadcrumb-link {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM8B,IAAQC,GAQRC,IAAIC,EAAY,GAChBC,IAAYC,QAAmBL,EAAM,SAASE,EAAE,MAAM,WAAW,KAAK,GACtEI,IAAwBC,QAAeP,EAAM,iBAAiBE,EAAE,MAAM,WAAW,QAAQ;EAM/F,SAASM,EAAU,GAAsB;GACvC,IAAMC,IAAOC,EAAK,QAAQ,WAAW,EAAE;GACvC,OAAOD,EAAK,SAAS,KAAKA,EAAK,SAAS,GAAG,IAAIA,EAAK,MAAM,GAAG,EAAE,IAAIA;EACrE;EAEA,IAAME,IAAoBJ,QACxBP,EAAM,gBAAgB,KAAA,IAAY,KAAA,IAAYQ,EAAUR,EAAM,WAAW,CAC3E;EAKA,SAASY,EAAU,GAA+B;GAChD,OAAOD,EAAkB,UAAU,KAAA,KAAaH,EAAUK,EAAK,IAAI,MAAMF,EAAkB;EAC7F;EAEA,IAAMG,IAAYP,QACVP,EAAM,aAAa,KAAA,KAAaA,EAAM,MAAM,SAAS,KAAK,IAAIA,EAAM,UAAU,CAAC,CACvF,GAEMe,IAAcR,QAAgBO,EAAU,QAAQd,EAAM,MAAM,MAAM,GAAG,EAAE,IAAI,CAAC,CAAE,GAK9EgB,IAAeT,QACnBO,EAAU,QAAQ,CAACd,EAAM,MAAM,IAAsB,GAAGA,EAAM,MAAM,MAAM,EAAE,CAAC,IAAIA,EAAM,KACzF;oBAIE7B,EAAA,GAAAC,EAsCM,OAAA;GAtCD,OAAM;GAAgB,cAAYC,EAAA+B,CAAA;EACrC9B,GAAAA,CAAAA,EAoCK,MApCLoB,GAoCK,EAnCHvB,EAAA,EAAA,GAAAC,EAkCWG,GAAA,MAAAC,EAlCuBwC,EAAA,QAAhB,GAAM,OAA8BC,EAAA,GAAAC,EAAAG,GAAA,EAAA,KAAAR,EAAK,KAAA,GAAA,CAC/CC,EAAA,SAAaS,MAAK,KAA5BpD,EAAA,GAAAC,EAqBK,MArBLuB,GAqBK,CApBHlB,EAAmFC,GAAnFC,EAAmF,EAA5E,OAAM,yBAAwB,GAAA,EAAA,SAAA,GAAA,GAASN,EAAAqD,CAAA,CAAS,CAACzB,EAAA,aAAa,GAAA,EAAG,UAAA,GAAQ,CAAA,GAAA,MAAA,EAAA,GAChFxB,EAkBQG,GAAA,MAAA;GAjBK,SAAOC,GAMd,EANkB,sBAAY,CAChCJ,EAKEK,GALFH,EAKE;IAJA,MAAK;IACJ,OAAO2B,EAAA;IACP,MAAMjC,EAAAU,CAAA;GACC,GAAA,EAAA,SAAA,GAAA,GAAA8C,CAAY,GAAA,MAAA,IAAA,CAAA,SAAA,MAAA,CAAA,CAAA,CAAA;GAItB,SAAAhD,QAA6B,EAD/BV,EAAA,EAAA,GAAAC,EAQEG,GAAA,MAAAC,EAPiBuC,EAAA,QAAV,OADT5C,EAAA,GAAAa,EAQEC,GAAA;IANC,KAAK8C,EAAO;IACZ,MAAMA,EAAO;IACb,OAAOA,EAAO;IACd,cAAYA,EAAO;IACnB,UAAUnB,EAAUmB,CAAM;IAC1B,gBAAcnB,EAAUmB,CAAM,IAAA,SAAa,KAAA;;;;;;;;;EAIlDzD,CAAAA,CAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAUK,MAVLsB,GAUK,CATHnB,EAAmFC,GAAnFC,EAAmF,EAA5E,OAAM,yBAAwB,GAAA,EAAA,SAAA,GAAA,GAASN,EAAAqD,CAAA,CAAS,CAACzB,EAAA,aAAa,GAAA,EAAG,UAAA,GAAQ,CAAA,GAAA,MAAA,EAAA,GAChF3B,EAOI,KAAA;GANF,OAAM;GACL,MAAMuC,EAAK;GACX,gBAAcD,EAAUC,CAAI,IAAA,SAAa,KAAA;EAE7B,GAAA,CAAAA,EAAK,QAAlB1C,EAAA,GAAAa,EAAwDN,GAAxDC,EAAwD;;;EAAxB,GAAAN,EAAAqD,CAAA,CAAS,CAACb,EAAK,IAAI,CAAA,GAAA,MAAA,EAAA,KAAAmB,EAAA,IAAA,EAAA,GAAK7C,EAAA,MACxDC,EAAGyB,EAAK,KAAK,GAAA,CAAA,CAAA,GAAA,GAAAhB,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA"}

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

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

package/dist/components/VButton/VButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"VButton.js","names":[],"sources":["../../../src/components/VButton/VButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Native buttons own activation and disabling. Links use useInertLink because anchors have no\n * disabled state; group shape overrides preserve individual tones.\n */\nimport { computed, inject, useAttrs } from 'vue'\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport { buttonGroupKey } from './context'\n\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useInertLink } from '../../composables/useInertLink'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\n/** How much visual weight the button carries. */\nexport type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft'\n/** What the action means, in colour. */\nexport type ButtonTone = 'accent' | 'neutral' | 'danger'\n/** The height of the button, from the scale every control shares. */\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface ButtonProps {\n  /**\n   * How much visual weight the button carries: `solid` is filled with the tone, `soft` uses a\n   * tinted background, `outline` keeps only a border, and `ghost` shows nothing until it is\n   * hovered.\n   */\n  variant?: ButtonVariant\n  /**\n   * What the action means: `accent` for the ordinary one, `neutral` for a secondary one,\n   * `danger` for one that destroys something. Left out inside a VButtonGroup it takes the\n   * group's tone, which is the point of not defaulting it here; on its own it is `accent`.\n   */\n  tone?: ButtonTone\n  /**\n   * Raises the button off the page: a shadow that grows on hover and settles back when pressed,\n   * whatever the variant. Inside a VButtonGroup the group's own value wins over this one.\n   */\n  elevated?: boolean\n  /**\n   * The height of the button, taken from the size scale shared by every control.\n   * Inside a VButtonGroup the group's own size wins over this one.\n   */\n  size?: ButtonSize\n  /**\n   * Takes 4px off the height, leaving the padding, the text and the icons as they\n   * are. Inside a VButtonGroup the group's own value wins over this one.\n   */\n  compact?: boolean\n  /**\n   * Stretches the button to the whole inline size of its parent, instead of leaving it only as\n   * wide as its content.\n   */\n  fullWidth?: boolean\n  /**\n   * Turns the button into an `<a>` pointing at this address. A disabled or loading\n   * link becomes inert: the address is dropped, so it can be neither focused nor\n   * followed.\n   */\n  href?: string\n  /** The native type of the button. It is ignored as soon as `href` makes it a link. */\n  type?: ButtonHTMLAttributes['type']\n  /**\n   * Makes the button unusable: it stops responding, leaves the tab order and greys\n   * out through the colour tokens.\n   */\n  disabled?: boolean\n  /**\n   * Shows a spinner, disables the button and announces it as busy. The spinner takes\n   * the place of the start slot (`iconStart` / `#start`), so an icon and a spinner\n   * are never displayed side by side.\n   */\n  loading?: boolean\n  /** An icon before the label. The `#start` slot replaces it when both are given. */\n  iconStart?: IconSource\n  /** An icon after the label. The `#end` slot replaces it when both are given. */\n  iconEnd?: IconSource\n  /**\n   * Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis).\n   * It has no effect on the `#start`/`#end` slots, whose icons the consumer builds.\n   */\n  iconFilled?: boolean\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  variant: 'solid',\n  // The only one of the five with no default. `tone` is the prop a button keeps against its\n  // group, so `undefined` has to stay distinguishable from an explicit `accent`, which would\n  // otherwise silence the group for every button in the row.\n  tone: undefined,\n  elevated: false,\n  size: 'md',\n  compact: false,\n  fullWidth: false,\n  href: undefined,\n  type: 'button',\n  disabled: false,\n  loading: false,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n})\n\ndefineSlots<{\n  /** The label of the button. */\n  default(): unknown\n  /**\n   * Content placed before the label, usually an icon. Mark it `aria-hidden` when it\n   * only repeats what the label already says.\n   */\n  start?(): unknown\n  /** Content placed after the label. */\n  end?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst group = inject(buttonGroupKey, null)\n\n// The shape of the segmented control belongs to the row: the group is read first, and a\n// group that named nothing hands the prop straight back. The tone goes the other way,\n// the button's own answer first (see context.ts).\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape<ButtonSize>(props, group)\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant ?? props.variant)\nconst resolvedElevated = computed(() => group?.elevated ?? props.elevated)\n// The tone goes the OTHER way, the button's own answer first: one action in a row can be\n// the destructive one, and the row has to be able to say so (see context.ts).\nconst resolvedTone = computed<ButtonTone>(() => props.tone ?? group?.tone ?? 'accent')\n\nconst isInert = computed(() => resolvedDisabled.value || props.loading)\nconst {\n  isLink,\n  isInertLink,\n  linkHref,\n  attrs: passedAttrs,\n} = useInertLink({\n  href: () => props.href,\n  inert: () => isInert.value,\n  attrs: () => attrs,\n})\n</script>\n\n<template>\n  <component\n    :is=\"isLink ? 'a' : 'button'\"\n    :aria-disabled=\"isInertLink ? 'true' : undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"passedAttrs\"\n    class=\"v-button v-control v-tone v-variant\"\n    :href=\"linkHref\"\n    :type=\"isLink ? undefined : type\"\n    :disabled=\"isLink ? undefined : isInert\"\n    :data-variant=\"resolvedVariant\"\n    :data-tone=\"resolvedTone\"\n    :data-elevated=\"resolvedElevated ? '' : undefined\"\n    :data-size=\"resolvedSize\"\n    :data-compact=\"resolvedCompact ? '' : undefined\"\n    :data-full-width=\"fullWidth ? '' : undefined\"\n    :data-loading=\"loading ? '' : undefined\"\n  >\n    <!-- The button already carries aria-busy, so the spinner is hidden from\n         assistive technology: its own role=\"status\" would announce the same state a\n         second time -->\n    <span v-if=\"loading\" class=\"v-button-spinner\" aria-hidden=\"true\">\n      <VSpinner />\n    </span>\n    <slot v-else name=\"start\">\n      <VIcon v-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" :filled=\"iconFilled\" />\n    </slot>\n    <slot />\n    <slot name=\"end\">\n      <VIcon v-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" :filled=\"iconFilled\" />\n    </slot>\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--control-gap);\n    block-size: var(--control-height);\n    padding-inline: var(--control-padding-inline);\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-interactive);\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* An explicit display, rather than a width alone: an inline-level box sits on a line\n     box, which would add the strut's descender under a button the consumer asked to\n     fill its parent. Block-level, it measures the parent's content box exactly. */\n  .v-button[data-full-width] {\n    display: flex;\n    inline-size: 100%;\n  }\n\n  /*\n   * At (0,2,0) it beats this sheet's own padding by weight, and it is the only rule that may\n   * touch that padding on an icon-only button. A consumer of VButton restyling the padding of\n   * its own buttons at (0,2,0) from another sheet would tie with it, and the bundler would\n   * decide: such a rule has to exclude `[data-icon-only]`.\n   */\n  .v-button[data-icon-only] {\n    min-inline-size: var(--control-height);\n    padding-inline: 0;\n  }\n\n  .v-button: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  /* Tone and variant recipes are shared; component-specific interaction states remain here. */\n\n  .v-button[data-variant='solid']:hover:not(:disabled, [aria-disabled='true']) {\n    background: var(--tone-bg-solid-hover);\n  }\n\n  .v-button[data-variant='solid']:active:not(:disabled, [aria-disabled='true']) {\n    background: var(--tone-bg-solid-active);\n  }\n\n  /*\n   * Nothing then arbitrates the background of a raised ghost by a one-step specificity margin,\n   * so a declaration added to either set later cannot silently leak into the other case.\n   */\n  .v-button:is([data-variant='outline'], [data-variant='ghost']):not([data-elevated]):hover:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: var(--tone-bg-soft);\n  }\n\n  /* One step of tint, reached two ways: pressing a ghost or an outline, which already sit on\n     the soft surface while hovered, and hovering a soft one. A selector list keeps each\n     member's own weight, so merging them moves no arbitration: the outline/ghost half is\n     still (0,5,0) after its hover, the soft half still (0,4,0) before its active. */\n  .v-button:is([data-variant='outline'], [data-variant='ghost']):not([data-elevated]):active:not(\n      :disabled,\n      [aria-disabled='true']\n    ),\n  .v-button[data-variant='soft']:hover:not(:disabled, [aria-disabled='true']) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%);\n  }\n\n  .v-button[data-variant='soft']:active:not(:disabled, [aria-disabled='true']) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 14%);\n  }\n\n  /*\n   * The `:is()` here is not decoration; it is what gives these rules a specificity of (0,3,0),\n   * beating the (0,2,0) of the ghost and outline bases without depending on the order the rules\n   * end up in.\n   */\n  .v-button[data-elevated] {\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  .v-button[data-elevated]:is([data-variant='ghost'], [data-variant='outline']) {\n    background: var(--vectis-color-surface-raised);\n  }\n\n  .v-button[data-elevated]:hover:not(:disabled, [aria-disabled='true']) {\n    box-shadow: var(--vectis-shadow-md);\n  }\n\n  .v-button[data-elevated]:is([data-variant='ghost'], [data-variant='outline']):hover:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: color-mix(in oklab, var(--vectis-color-surface-raised), var(--tone-text-tinted) 8%);\n  }\n\n  .v-button[data-elevated]:active:not(:disabled, [aria-disabled='true']) {\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  .v-button[data-elevated]:is([data-variant='ghost'], [data-variant='outline']):active:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-surface-raised),\n      var(--tone-text-tinted) 12%\n    );\n  }\n\n  .v-button:is(:disabled, [aria-disabled='true']) {\n    cursor: not-allowed;\n  }\n\n  .v-button[data-loading] {\n    opacity: 0.5;\n  }\n\n  /* A disabled button that is not loading greys out through the colour tokens and\n     never through opacity. These three rules are (0,4,0), so they already beat the\n     (0,3,0) of the raised background whatever the order they are read in. */\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading]):is(\n      [data-variant='solid'],\n      [data-variant='soft']\n    ) {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading])[data-variant='outline'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    border-color: var(--vectis-color-border);\n  }\n\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading])[data-variant='ghost'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * The shadow needs a rule of its own. No variant declares a shadow, so none of the three\n   * rules above cancels one, and a disabled raised ghost would otherwise go on casting its\n   * shadow-sm.\n   */\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading])[data-elevated] {\n    box-shadow: none;\n  }\n\n  .v-button-spinner {\n    /*\n     * Match the spinner box and font size to the icon it replaces so loading preserves button\n     * width and visual scale.\n     */\n    font-size: var(--vectis-icon-size);\n    /* 1em of the line above rather than the variable again: a relative icon size would\n       otherwise be resolved twice, once against the button's text and once against this\n       box's own enlarged font-size. */\n    inline-size: 1em;\n    block-size: 1em;\n    flex: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-button {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VButton.js","names":["_sfc_main","VButton_vue_vue_type_script_setup_true_lang_default","VButton_default"],"sources":["../../../src/components/VButton/VButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Native buttons own activation and disabling. Links use useInertLink because anchors have no\n * disabled state; group shape overrides preserve individual tones.\n */\nimport { computed, inject, useAttrs } from 'vue'\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport { buttonGroupKey } from './context'\n\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useInertLink } from '../../composables/useInertLink'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\n/** How much visual weight the button carries. */\nexport type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft'\n/** What the action means, in colour. */\nexport type ButtonTone = 'accent' | 'neutral' | 'danger'\n/** The height of the button, from the scale every control shares. */\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\ninterface ButtonProps {\n  /**\n   * How much visual weight the button carries: `solid` is filled with the tone, `soft` uses a\n   * tinted background, `outline` keeps only a border, and `ghost` shows nothing until it is\n   * hovered.\n   */\n  variant?: ButtonVariant\n  /**\n   * What the action means: `accent` for the ordinary one, `neutral` for a secondary one,\n   * `danger` for one that destroys something. Left out inside a VButtonGroup it takes the\n   * group's tone, which is the point of not defaulting it here; on its own it is `accent`.\n   */\n  tone?: ButtonTone\n  /**\n   * Raises the button off the page: a shadow that grows on hover and settles back when pressed,\n   * whatever the variant. Inside a VButtonGroup the group's own value wins over this one.\n   */\n  elevated?: boolean\n  /**\n   * The height of the button, taken from the size scale shared by every control.\n   * Inside a VButtonGroup the group's own size wins over this one.\n   */\n  size?: ButtonSize\n  /**\n   * Stretches the button to the whole inline size of its parent, instead of leaving it only as\n   * wide as its content.\n   */\n  fullWidth?: boolean\n  /**\n   * Turns the button into an `<a>` pointing at this address. A disabled or loading\n   * link becomes inert: the address is dropped, so it can be neither focused nor\n   * followed.\n   */\n  href?: string\n  /** The native type of the button. It is ignored as soon as `href` makes it a link. */\n  type?: ButtonHTMLAttributes['type']\n  /**\n   * Makes the button unusable: it stops responding, leaves the tab order and greys\n   * out through the colour tokens.\n   */\n  disabled?: boolean\n  /**\n   * Shows a spinner, disables the button and announces it as busy. The spinner takes\n   * the place of the start slot (`iconStart` / `#start`), so an icon and a spinner\n   * are never displayed side by side.\n   */\n  loading?: boolean\n  /** An icon before the label. The `#start` slot replaces it when both are given. */\n  iconStart?: IconSource\n  /** An icon after the label. The `#end` slot replaces it when both are given. */\n  iconEnd?: IconSource\n  /**\n   * Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis).\n   * It has no effect on the `#start`/`#end` slots, whose icons the consumer builds.\n   */\n  iconFilled?: boolean\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  variant: 'solid',\n  // The only one of the five with no default. `tone` is the prop a button keeps against its\n  // group, so `undefined` has to stay distinguishable from an explicit `accent`, which would\n  // otherwise silence the group for every button in the row.\n  tone: undefined,\n  elevated: false,\n  size: 'md',\n  fullWidth: false,\n  href: undefined,\n  type: 'button',\n  disabled: false,\n  loading: false,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n})\n\ndefineSlots<{\n  /** The label of the button. */\n  default(): unknown\n  /**\n   * Content placed before the label, usually an icon. Mark it `aria-hidden` when it\n   * only repeats what the label already says.\n   */\n  start?(): unknown\n  /** Content placed after the label. */\n  end?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst group = inject(buttonGroupKey, null)\n\n// The shape of the segmented control belongs to the row: the group is read first, and a\n// group that named nothing hands the prop straight back. The tone goes the other way,\n// the button's own answer first (see context.ts).\nconst { size: resolvedSize, disabled: resolvedDisabled } = useControlShape<ButtonSize>(props, group)\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant ?? props.variant)\nconst resolvedElevated = computed(() => group?.elevated ?? props.elevated)\n// The tone goes the OTHER way, the button's own answer first: one action in a row can be\n// the destructive one, and the row has to be able to say so (see context.ts).\nconst resolvedTone = computed<ButtonTone>(() => props.tone ?? group?.tone ?? 'accent')\n\nconst isInert = computed(() => resolvedDisabled.value || props.loading)\nconst {\n  isLink,\n  isInertLink,\n  linkHref,\n  attrs: passedAttrs,\n} = useInertLink({\n  href: () => props.href,\n  inert: () => isInert.value,\n  attrs: () => attrs,\n})\n</script>\n\n<template>\n  <component\n    :is=\"isLink ? 'a' : 'button'\"\n    :aria-disabled=\"isInertLink ? 'true' : undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"passedAttrs\"\n    class=\"v-button v-control v-tone v-variant\"\n    :href=\"linkHref\"\n    :type=\"isLink ? undefined : type\"\n    :disabled=\"isLink ? undefined : isInert\"\n    :data-variant=\"resolvedVariant\"\n    :data-tone=\"resolvedTone\"\n    :data-elevated=\"resolvedElevated ? '' : undefined\"\n    :data-size=\"resolvedSize\"\n    :data-full-width=\"fullWidth ? '' : undefined\"\n    :data-loading=\"loading ? '' : undefined\"\n  >\n    <!-- The button already carries aria-busy, so the spinner is hidden from\n         assistive technology: its own role=\"status\" would announce the same state a\n         second time -->\n    <span v-if=\"loading\" class=\"v-button-spinner\" aria-hidden=\"true\">\n      <VSpinner />\n    </span>\n    <slot v-else name=\"start\">\n      <VIcon v-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" :filled=\"iconFilled\" />\n    </slot>\n    <slot />\n    <slot name=\"end\">\n      <VIcon v-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" :filled=\"iconFilled\" />\n    </slot>\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--control-gap);\n    block-size: var(--control-height);\n    padding-inline: var(--control-padding-inline);\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-interactive);\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* An explicit display, rather than a width alone: an inline-level box sits on a line\n     box, which would add the strut's descender under a button the consumer asked to\n     fill its parent. Block-level, it measures the parent's content box exactly. */\n  .v-button[data-full-width] {\n    display: flex;\n    inline-size: 100%;\n  }\n\n  /*\n   * At (0,2,0) it beats this sheet's own padding by weight, and it is the only rule that may\n   * touch that padding on an icon-only button. A consumer of VButton restyling the padding of\n   * its own buttons at (0,2,0) from another sheet would tie with it, and the bundler would\n   * decide: such a rule has to exclude `[data-icon-only]`.\n   */\n  .v-button[data-icon-only] {\n    min-inline-size: var(--control-height);\n    padding-inline: 0;\n  }\n\n  .v-button: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  /* Tone and variant recipes are shared; component-specific interaction states remain here. */\n\n  .v-button[data-variant='solid']:hover:not(:disabled, [aria-disabled='true']) {\n    background: var(--tone-bg-solid-hover);\n  }\n\n  .v-button[data-variant='solid']:active:not(:disabled, [aria-disabled='true']) {\n    background: var(--tone-bg-solid-active);\n  }\n\n  /*\n   * Nothing then arbitrates the background of a raised ghost by a one-step specificity margin,\n   * so a declaration added to either set later cannot silently leak into the other case.\n   */\n  .v-button:is([data-variant='outline'], [data-variant='ghost']):not([data-elevated]):hover:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: var(--tone-bg-soft);\n  }\n\n  /* One step of tint, reached two ways: pressing a ghost or an outline, which already sit on\n     the soft surface while hovered, and hovering a soft one. A selector list keeps each\n     member's own weight, so merging them moves no arbitration: the outline/ghost half is\n     still (0,5,0) after its hover, the soft half still (0,4,0) before its active. */\n  .v-button:is([data-variant='outline'], [data-variant='ghost']):not([data-elevated]):active:not(\n      :disabled,\n      [aria-disabled='true']\n    ),\n  .v-button[data-variant='soft']:hover:not(:disabled, [aria-disabled='true']) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%);\n  }\n\n  .v-button[data-variant='soft']:active:not(:disabled, [aria-disabled='true']) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 14%);\n  }\n\n  /*\n   * The `:is()` here is not decoration; it is what gives these rules a specificity of (0,3,0),\n   * beating the (0,2,0) of the ghost and outline bases without depending on the order the rules\n   * end up in.\n   */\n  .v-button[data-elevated] {\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  .v-button[data-elevated]:is([data-variant='ghost'], [data-variant='outline']) {\n    background: var(--vectis-color-surface-raised);\n  }\n\n  .v-button[data-elevated]:hover:not(:disabled, [aria-disabled='true']) {\n    box-shadow: var(--vectis-shadow-md);\n  }\n\n  .v-button[data-elevated]:is([data-variant='ghost'], [data-variant='outline']):hover:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: color-mix(in oklab, var(--vectis-color-surface-raised), var(--tone-text-tinted) 8%);\n  }\n\n  .v-button[data-elevated]:active:not(:disabled, [aria-disabled='true']) {\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  .v-button[data-elevated]:is([data-variant='ghost'], [data-variant='outline']):active:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-surface-raised),\n      var(--tone-text-tinted) 12%\n    );\n  }\n\n  .v-button:is(:disabled, [aria-disabled='true']) {\n    cursor: not-allowed;\n  }\n\n  .v-button[data-loading] {\n    opacity: 0.5;\n  }\n\n  /* A disabled button that is not loading greys out through the colour tokens and\n     never through opacity. These three rules are (0,4,0), so they already beat the\n     (0,3,0) of the raised background whatever the order they are read in. */\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading]):is(\n      [data-variant='solid'],\n      [data-variant='soft']\n    ) {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading])[data-variant='outline'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    border-color: var(--vectis-color-border);\n  }\n\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading])[data-variant='ghost'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * The shadow needs a rule of its own. No variant declares a shadow, so none of the three\n   * rules above cancels one, and a disabled raised ghost would otherwise go on casting its\n   * shadow-sm.\n   */\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading])[data-elevated] {\n    box-shadow: none;\n  }\n\n  .v-button-spinner {\n    /*\n     * Match the spinner box and font size to the icon it replaces so loading preserves button\n     * width and visual scale.\n     */\n    font-size: var(--vectis-icon-size);\n    /* 1em of the line above rather than the variable again: a relative icon size would\n       otherwise be resolved twice, once against the button's text and once against this\n       box's own enlarged font-size. */\n    inline-size: 1em;\n    block-size: 1em;\n    flex: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-button {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VButton/VButton.vue_vue_type_script_setup_true_lang.js

@@ -21,10 +21,6 @@ var b = {
 			default: !1
 		},
 		size: { default: "md" },
-		compact: {
-			type: Boolean,
-			default: !1
-		},
 		fullWidth: {
 			type: Boolean,
 			default: !1
@@ -47,24 +43,23 @@ var b = {
 		}
 	},
 	setup(d) {
-		let x = d, S = v(), C = f(n, null), { size: w, compact: T, disabled: E } = r(x, C), D = o(() => C?.variant ?? x.variant), O = o(() => C?.elevated ?? x.elevated), k = o(() => x.tone ?? C?.tone ?? "accent"), A = o(() => E.value || x.loading), { isLink: j, isInertLink: M, linkHref: N, attrs: P } = i({
+		let x = d, S = v(), C = f(n, null), { size: w, disabled: T } = r(x, C), E = o(() => C?.variant ?? x.variant), D = o(() => C?.elevated ?? x.elevated), O = o(() => x.tone ?? C?.tone ?? "accent"), k = o(() => T.value || x.loading), { isLink: A, isInertLink: j, linkHref: M, attrs: N } = i({
 			href: () => x.href,
-			inert: () => A.value,
+			inert: () => k.value,
 			attrs: () => S
 		});
-		return (n, r) => (m(), s(g(_(j) ? "a" : "button"), p({
-			"aria-disabled": _(M) ? "true" : void 0,
+		return (n, r) => (m(), s(g(_(A) ? "a" : "button"), p({
+			"aria-disabled": _(j) ? "true" : void 0,
 			"aria-busy": d.loading || void 0
-		}, _(P), {
+		}, _(N), {
 			class: "v-button v-control v-tone v-variant",
-			href: _(N),
-			type: _(j) ? void 0 : d.type,
-			disabled: _(j) ? void 0 : A.value,
-			"data-variant": D.value,
-			"data-tone": k.value,
-			"data-elevated": O.value ? "" : void 0,
+			href: _(M),
+			type: _(A) ? void 0 : d.type,
+			disabled: _(A) ? void 0 : k.value,
+			"data-variant": E.value,
+			"data-tone": O.value,
+			"data-elevated": D.value ? "" : void 0,
 			"data-size": _(w),
-			"data-compact": _(T) ? "" : void 0,
 			"data-full-width": d.fullWidth ? "" : void 0,
 			"data-loading": d.loading ? "" : void 0
 		}), {
@@ -84,7 +79,6 @@ var b = {
 			"data-tone",
 			"data-elevated",
 			"data-size",
-			"data-compact",
 			"data-full-width",
 			"data-loading"
 		]));