vectis-ui 0.1.0 → 0.8.0

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 * A small pill carrying one piece of information at a glance: a count of unread\n * items, or a single icon. It is never interactive — there is nothing to click and\n * nothing to focus — and it either stands on its own, sits next to an element, or\n * is pinned to one of that element's corners.\n *\n * It is made of HTML and CSS alone. The only JavaScript decides what to render:\n * whether a target element was given at all, capping the counter at \"99+\", and\n * handing a custom colour to the stylesheet as `--custom-color`.\n */\nimport { computed, useSlots } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\nexport type BadgeTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\nexport type BadgeOverlayPosition = 'top' | 'bottom'\n\ninterface BadgeProps {\n  /**\n   * The meaning the badge carries, expressed as a colour. The pill is filled with\n   * it and the text adapts to stay readable; there is a single, fully coloured\n   * rendering, so no variant to choose alongside it.\n   */\n  tone?: BadgeTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. On\n   * browsers that support `contrast-color()` the text turns black or white by\n   * itself; everywhere else it falls back to white, so with a light colour the\n   * contrast is yours to 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\n   * bottom one for a marker that belongs at the foot of its target — a presence dot\n   * under an avatar, for instance. The horizontal side follows the reading\n   * direction and is not configurable. It does nothing without `overlay`.\n   */\n  overlayPosition?: BadgeOverlayPosition\n  /**\n   * Draws a 2px ring in the colour of the surface behind the badge\n   * (`--vectis-color-surface`, overridable per subtree), which detaches it from a\n   * busy target such as a picture.\n   */\n  bordered?: boolean\n}\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n  tone: 'accent',\n  color: undefined,\n  count: undefined,\n  icon: undefined,\n  overlayPosition: 'top',\n})\n\ndefineSlots<{\n  /**\n   * The element the badge belongs to. Without it the badge stands on its own; with\n   * it, the badge is placed beside the element, or in its corner under `overlay`.\n   */\n  default?(): unknown\n}>()\n\nconst slots = useSlots()\nconst hasTarget = computed(() => slots.default !== undefined)\n\n/** The counter as it is actually displayed: anything past 99 becomes \"99+\". */\nconst displayCount = computed(() =>\n  props.count !== undefined && props.count > 99 ? '99+' : props.count,\n)\n\n/*\n * The attributes of the pill itself. The template has two roots — one wrapping a\n * target, one standing alone — and both render the same badge, so the attributes\n * are computed once here rather than written twice.\n */\nconst badgeAttrs = computed(() => ({\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: props.color !== undefined ? { '--custom-color': props.color } : undefined,\n}))\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    <span class=\"v-badge\" v-bind=\"badgeAttrs\">\n      <template v-if=\"!dot\">\n        <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n        <template v-else>{{ displayCount }}</template>\n      </template>\n    </span>\n  </span>\n  <span v-else class=\"v-badge\" v-bind=\"badgeAttrs\">\n    <template v-if=\"!dot\">\n      <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n      <template v-else>{{ displayCount }}</template>\n    </template>\n  </span>\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); /* the space between the target and the badge, in inline mode */\n  }\n\n  .v-badge {\n    --vectis-icon-size: var(--vectis-icon-size-sm);\n    --vectis-icon-opsz: 20;\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    background: var(--badge-bg);\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    color: var(--tone-text-fallback);\n  }\n\n  @supports (color: contrast-color(red)) {\n    .v-badge {\n      color: contrast-color(var(--badge-bg));\n    }\n  }\n\n  .v-badge[data-tone='accent'] {\n    --badge-bg: var(--vectis-color-accent);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  .v-badge[data-tone='danger'] {\n    --badge-bg: var(--vectis-color-danger);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  .v-badge[data-tone='success'] {\n    --badge-bg: var(--vectis-color-success);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  .v-badge[data-tone='warning'] {\n    --badge-bg: var(--vectis-color-warning);\n    --tone-text-fallback: var(--vectis-color-text-on-warning);\n  }\n\n  /* The neutral tone inverts text and surface rather than using a grey. A grey of\n     the text-muted kind resolves to neutral-400 in the dark theme, where the white\n     fallback would no longer contrast with it; with the inversion, the fallback and\n     contrast-color() agree in both themes. */\n  .v-badge[data-tone='neutral'] {\n    --badge-bg: var(--vectis-color-text);\n    --tone-text-fallback: var(--vectis-color-surface);\n  }\n\n  /* Placed after the tones on purpose: the specificity is the same, so it is the\n     order that lets a custom colour override the tone it replaces. */\n  .v-badge[data-custom] {\n    --badge-bg: var(--custom-color);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\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 2px var(--vectis-color-surface);\n  }\n\n  /* The tuck-in offset is a ratio of the badge's own size, so it stays proportionate\n     across the pill, the dot and the icon. Each half of it is held in its own\n     variable: the corner and the reading direction each flip ONE axis, and writing\n     the whole `translate` again in each branch would make the two multiply — four\n     rules to keep in step by hand for two independent decisions. */\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\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  /* In a right-to-left direction the logical corner moves to the left, so the\n     horizontal half of the translation has to flip with it — `translate` is a\n     physical property and knows nothing about direction. */\n  .v-badge-host[data-overlay]:dir(rtl) > .v-badge {\n    --badge-overlay-x: -25%;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VBadge.js","names":[],"sources":["../../../src/components/VBadge/VBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * A small pill carrying one piece of information at a glance: a count of unread\n * items, or a single icon. It is never interactive — there is nothing to click and\n * nothing to focus — and it either stands on its own, sits next to an element, or\n * is pinned to one of that element's corners.\n *\n * It is made of HTML and CSS alone. The only JavaScript decides what to render:\n * whether a target element was given at all, capping the counter at \"99+\", and\n * handing the two colours a consumer may choose to the stylesheet as\n * `--custom-color` and `--badge-ring-color`.\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\nexport type BadgeVariant = 'solid' | 'soft'\nexport type BadgeTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\nexport type BadgeOverlayPosition = 'top' | 'bottom'\n\ninterface BadgeProps {\n  /**\n   * How strongly the badge is painted: filled with the full colour (`solid`, the\n   * default), or a tinted background with the text in the colour (`soft`), for a\n   * count that should not draw the eye. A `dot` is always solid: with no content to\n   * tint, a soft dot would be a pale disc barely distinguishable from the page.\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\n   * solid badge, browsers that support `contrast-color()` turn the text black or\n   * white by themselves; everywhere else it falls back to white, so with a light\n   * colour the contrast is yours to check. A soft badge derives its background and\n   * text from that colour mixed with the theme's surface and text.\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\n   * bottom one for a marker that belongs at the foot of its target — a presence dot\n   * under an avatar, for instance. The horizontal side follows the reading\n   * direction and is not configurable. It does nothing without `overlay`.\n   */\n  overlayPosition?: BadgeOverlayPosition\n  /**\n   * Draws a 2px ring around the badge, in the colour of the surface behind it,\n   * which detaches it from a busy target such as a picture. That colour defaults to\n   * the page background and is named through `ringColor` on any other surface.\n   */\n  bordered?: boolean\n  /**\n   * The colour of the ring drawn by `bordered`. It defaults to the page background,\n   * which is what makes the ring read as a gap around the badge; on another surface\n   * (a card, a coloured banner), pass that surface's colour. It does nothing without\n   * `bordered`.\n   */\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  /**\n   * The element the badge belongs to. Without it the badge stands on its own; with\n   * it, the badge is placed beside the element, or in its corner under `overlay`.\n   */\n  default?(): unknown\n}>()\n\n// TRAP — a function read by the template, never a `computed`: `slots` is not reactive, so a\n// computed 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/** The counter as it is actually displayed: anything past 99 becomes \"99+\". */\nconst displayCount = computed(() =>\n  props.count !== undefined && props.count > 99 ? '99+' : props.count,\n)\n\n/*\n * The pill itself, written once. The template has two roots — one wrapping a target, one\n * standing alone — and both render the same badge; a functional component is the one way\n * to put the same markup in two places of a template without writing it twice.\n */\nconst Pill: FunctionalComponent = () =>\n  h(\n    'span',\n    {\n      class: 'v-badge v-tone',\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// TRAP — the empty list is not decoration. A functional component that declares no props lets\n// only `class`, `style` and listeners fall through, so a standalone badge, whose root this is,\n// would 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 />\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); /* the space between the target and the badge, in inline mode */\n  }\n\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    /* The pill is the tone's solid pair, read from the shared table (`.v-tone`, set in the\n       template). Its neutral is the text/surface inversion, which is what lets the\n       fallback text and contrast-color() agree in both themes. */\n    --badge-bg: var(--tone-bg-solid);\n    --badge-text-fallback: var(--tone-text-solid);\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    background: var(--badge-bg);\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    color: var(--badge-text-fallback);\n  }\n\n  @supports (color: contrast-color(red)) {\n    .v-badge {\n      color: contrast-color(var(--badge-bg));\n    }\n  }\n\n  /* A custom colour replaces the tone: at (0,2,0) it beats the base rule's mapping\n     whatever the order the two are written in. */\n  .v-badge[data-custom] {\n    --badge-bg: var(--custom-color);\n    --badge-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  /* The soft pair of the same table. The text is the tone's own colour rather than\n     contrast-color(): the black or white that function picks reads on a pale tint, but\n     says nothing of the tone. At (0,3,0) it beats the `@supports` rule above whatever\n     the order. A dot is left out: with no content, a soft dot is a pale disc on the\n     page, which a presence marker cannot afford. */\n  .v-badge[data-variant='soft']:not([data-dot]) {\n    --badge-bg: var(--tone-bg-soft);\n\n    color: var(--tone-text-tinted);\n  }\n\n  /* A custom colour's soft pair, derived as VChip derives its own, so the same value\n     gives a soft chip and a soft badge the same tint in both themes. */\n  .v-badge[data-variant='soft'][data-custom]:not([data-dot]) {\n    --badge-bg: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);\n\n    color: color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 30%);\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  /* The tuck-in offset is a ratio of the badge's own size, so it stays proportionate\n     across the pill, the dot and the icon. Each half of it is held in its own\n     variable: the corner and the reading direction each flip ONE axis, and writing\n     the whole `translate` again in each branch would make the two multiply — four\n     rules to keep in step by hand for two independent decisions. */\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    /* TRAP — an overlaid badge deliberately leaves its target's box, so it lands on\n       whatever sits beside it, and the host opens no stacking context of its own\n       (`position: relative` with `z-index: auto`). Left at `auto` the badge is painted\n       with the other positioned boxes in TREE ORDER, which means anything positioned\n       after it covers it: inside a VButtonGroup, where every segment is positioned, the\n       badge on one segment disappears under the borders of the next. The lift takes it\n       past that step, and no further: the segment it leans into comes later in tree\n       order, so that segment's focus ring, raised to this same level, is still drawn\n       over the badge rather than under it. */\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  /* In a right-to-left direction the logical corner moves to the left, so the\n     horizontal half of the translation has to flip with it — `translate` is a\n     physical property and knows nothing about direction. */\n  .v-badge-host[data-overlay]:dir(rtl) > .v-badge {\n    --badge-overlay-x: -25%;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1,40 +1,55 @@
-import e from "../VIcon/VIcon.js";
-import { iconProps as t } from "../VIcon/iconProps.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, mergeProps as u, normalizeProps as d, openBlock as f, renderSlot as p, toDisplayString as m, unref as h, useSlots as g } from "vue";
+import { iconProps as e } from "../VIcon/iconProps.js";
+import { customColorStyle as t } from "../../utils/css.js";
+import n from "../VIcon/VIcon.js";
+import { computed as r, createBlock as i, createElementBlock as a, createVNode as o, defineComponent as s, h as c, openBlock as l, renderSlot as u, useSlots as d } from "vue";
 //#region src/components/VBadge/VBadge.vue?vue&type=script&setup=true&lang.ts
-var _ = ["data-overlay", "data-overlay-position"], v = /*@__PURE__*/ l({
+var f = ["data-overlay", "data-overlay-position"], p = /*@__PURE__*/ s({
 	__name: "VBadge",
 	props: {
+		variant: { default: "solid" },
 		tone: { default: "accent" },
 		color: { default: void 0 },
 		count: { default: void 0 },
 		icon: { default: void 0 },
-		dot: { type: Boolean },
-		overlay: { type: Boolean },
+		dot: {
+			type: Boolean,
+			default: !1
+		},
+		overlay: {
+			type: Boolean,
+			default: !1
+		},
 		overlayPosition: { default: "top" },
-		bordered: { type: Boolean }
+		bordered: {
+			type: Boolean,
+			default: !1
+		},
+		ringColor: { default: void 0 }
 	},
-	setup(l) {
-		let v = l, y = g(), b = r(() => y.default !== void 0), x = r(() => v.count !== void 0 && v.count > 99 ? "99+" : v.count), S = r(() => ({
-			"data-tone": v.tone,
-			"data-custom": v.color === void 0 ? void 0 : "",
-			"data-dot": v.dot ? "" : void 0,
-			"data-icon-only": !v.dot && v.icon ? "" : void 0,
-			"data-bordered": v.bordered ? "" : void 0,
-			style: v.color === void 0 ? void 0 : { "--custom-color": v.color }
-		}));
-		return (r, g) => b.value ? (f(), o("span", {
+	setup(s) {
+		let p = s, m = d();
+		function h() {
+			return m.default !== void 0;
+		}
+		let g = r(() => p.count !== void 0 && p.count > 99 ? "99+" : p.count), _ = () => c("span", {
+			class: "v-badge v-tone",
+			"data-variant": p.variant,
+			"data-tone": p.tone,
+			"data-custom": p.color === void 0 ? void 0 : "",
+			"data-dot": p.dot ? "" : void 0,
+			"data-icon-only": !p.dot && p.icon ? "" : void 0,
+			"data-bordered": p.bordered ? "" : void 0,
+			style: [t(p.color), p.ringColor === void 0 ? void 0 : { "--badge-ring-color": p.ringColor }]
+		}, p.dot ? void 0 : p.icon ? [c(n, e(p.icon))] : g.value === void 0 ? void 0 : String(g.value));
+		return _.props = [], (e, t) => h() ? (l(), a("span", {
 			key: 0,
 			class: "v-badge-host",
-			"data-overlay": l.overlay ? "" : void 0,
-			"data-overlay-position": l.overlayPosition
-		}, [p(r.$slots, "default"), s("span", u({ class: "v-badge" }, S.value), [l.dot ? a("", !0) : (f(), o(n, { key: 0 }, [l.icon ? (f(), i(e, d(u({ key: 0 }, h(t)(l.icon))), null, 16)) : (f(), o(n, { key: 1 }, [c(m(x.value), 1)], 64))], 64))], 16)], 8, _)) : (f(), o("span", u({
-			key: 1,
-			class: "v-badge"
-		}, S.value), [l.dot ? a("", !0) : (f(), o(n, { key: 0 }, [l.icon ? (f(), i(e, d(u({ key: 0 }, h(t)(l.icon))), null, 16)) : (f(), o(n, { key: 1 }, [c(m(x.value), 1)], 64))], 64))], 16));
+			"data-overlay": s.overlay ? "" : void 0,
+			"data-overlay-position": s.overlayPosition
+		}, [u(e.$slots, "default"), o(_)], 8, f)) : (l(), i(_, { key: 1 }));
 	}
 });
 //#endregion
-export { v as default };
+export { p as default };
 
 //# sourceMappingURL=VBadge.vue_vue_type_script_setup_true_lang.js.map

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 * A small pill carrying one piece of information at a glance: a count of unread\n * items, or a single icon. It is never interactive — there is nothing to click and\n * nothing to focus — and it either stands on its own, sits next to an element, or\n * is pinned to one of that element's corners.\n *\n * It is made of HTML and CSS alone. The only JavaScript decides what to render:\n * whether a target element was given at all, capping the counter at \"99+\", and\n * handing a custom colour to the stylesheet as `--custom-color`.\n */\nimport { computed, useSlots } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\n\nexport type BadgeTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\nexport type BadgeOverlayPosition = 'top' | 'bottom'\n\ninterface BadgeProps {\n  /**\n   * The meaning the badge carries, expressed as a colour. The pill is filled with\n   * it and the text adapts to stay readable; there is a single, fully coloured\n   * rendering, so no variant to choose alongside it.\n   */\n  tone?: BadgeTone\n  /**\n   * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. On\n   * browsers that support `contrast-color()` the text turns black or white by\n   * itself; everywhere else it falls back to white, so with a light colour the\n   * contrast is yours to 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\n   * bottom one for a marker that belongs at the foot of its target — a presence dot\n   * under an avatar, for instance. The horizontal side follows the reading\n   * direction and is not configurable. It does nothing without `overlay`.\n   */\n  overlayPosition?: BadgeOverlayPosition\n  /**\n   * Draws a 2px ring in the colour of the surface behind the badge\n   * (`--vectis-color-surface`, overridable per subtree), which detaches it from a\n   * busy target such as a picture.\n   */\n  bordered?: boolean\n}\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n  tone: 'accent',\n  color: undefined,\n  count: undefined,\n  icon: undefined,\n  overlayPosition: 'top',\n})\n\ndefineSlots<{\n  /**\n   * The element the badge belongs to. Without it the badge stands on its own; with\n   * it, the badge is placed beside the element, or in its corner under `overlay`.\n   */\n  default?(): unknown\n}>()\n\nconst slots = useSlots()\nconst hasTarget = computed(() => slots.default !== undefined)\n\n/** The counter as it is actually displayed: anything past 99 becomes \"99+\". */\nconst displayCount = computed(() =>\n  props.count !== undefined && props.count > 99 ? '99+' : props.count,\n)\n\n/*\n * The attributes of the pill itself. The template has two roots — one wrapping a\n * target, one standing alone — and both render the same badge, so the attributes\n * are computed once here rather than written twice.\n */\nconst badgeAttrs = computed(() => ({\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: props.color !== undefined ? { '--custom-color': props.color } : undefined,\n}))\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    <span class=\"v-badge\" v-bind=\"badgeAttrs\">\n      <template v-if=\"!dot\">\n        <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n        <template v-else>{{ displayCount }}</template>\n      </template>\n    </span>\n  </span>\n  <span v-else class=\"v-badge\" v-bind=\"badgeAttrs\">\n    <template v-if=\"!dot\">\n      <VIcon v-if=\"icon\" v-bind=\"iconProps(icon)\" />\n      <template v-else>{{ displayCount }}</template>\n    </template>\n  </span>\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); /* the space between the target and the badge, in inline mode */\n  }\n\n  .v-badge {\n    --vectis-icon-size: var(--vectis-icon-size-sm);\n    --vectis-icon-opsz: 20;\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    background: var(--badge-bg);\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    color: var(--tone-text-fallback);\n  }\n\n  @supports (color: contrast-color(red)) {\n    .v-badge {\n      color: contrast-color(var(--badge-bg));\n    }\n  }\n\n  .v-badge[data-tone='accent'] {\n    --badge-bg: var(--vectis-color-accent);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  .v-badge[data-tone='danger'] {\n    --badge-bg: var(--vectis-color-danger);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  .v-badge[data-tone='success'] {\n    --badge-bg: var(--vectis-color-success);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  .v-badge[data-tone='warning'] {\n    --badge-bg: var(--vectis-color-warning);\n    --tone-text-fallback: var(--vectis-color-text-on-warning);\n  }\n\n  /* The neutral tone inverts text and surface rather than using a grey. A grey of\n     the text-muted kind resolves to neutral-400 in the dark theme, where the white\n     fallback would no longer contrast with it; with the inversion, the fallback and\n     contrast-color() agree in both themes. */\n  .v-badge[data-tone='neutral'] {\n    --badge-bg: var(--vectis-color-text);\n    --tone-text-fallback: var(--vectis-color-surface);\n  }\n\n  /* Placed after the tones on purpose: the specificity is the same, so it is the\n     order that lets a custom colour override the tone it replaces. */\n  .v-badge[data-custom] {\n    --badge-bg: var(--custom-color);\n    --tone-text-fallback: var(--vectis-color-text-on-accent);\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 2px var(--vectis-color-surface);\n  }\n\n  /* The tuck-in offset is a ratio of the badge's own size, so it stays proportionate\n     across the pill, the dot and the icon. Each half of it is held in its own\n     variable: the corner and the reading direction each flip ONE axis, and writing\n     the whole `translate` again in each branch would make the two multiply — four\n     rules to keep in step by hand for two independent decisions. */\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\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  /* In a right-to-left direction the logical corner moves to the left, so the\n     horizontal half of the translation has to flip with it — `translate` is a\n     physical property and knows nothing about direction. */\n  .v-badge-host[data-overlay]:dir(rtl) > .v-badge {\n    --badge-overlay-x: -25%;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAuEA,IAAM,IAAQ,GAgBR,IAAQ,EAAS,GACjB,IAAY,QAAe,EAAM,YAAY,KAAA,CAAS,GAGtD,IAAe,QACnB,EAAM,UAAU,KAAA,KAAa,EAAM,QAAQ,KAAK,QAAQ,EAAM,KAChE,GAOM,IAAa,SAAgB;GACjC,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,EAAM,UAAU,KAAA,IAAgD,KAAA,IAApC,EAAE,kBAAkB,EAAM,MAAM;EACrE,EAAE;mBAKQ,EAAA,SAAA,EAAA,GADR,EAaO,QAAA;;GAXL,OAAM;GACL,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,yBAAuB,EAAA;MAExB,EAAQ,EAAA,QAAA,SAAA,GACR,EAKO,QALP,EAKO,EALD,OAAM,UAAS,GAAS,EAAA,KAAU,GAAA,CACrB,EAAA,MAEiB,EAAA,IAAA,EAAA,KAFjB,EAAA,GAAjB,EAGW,GAAA,EAAA,KAAA,EAAA,GAAA,CAFI,EAAA,QAAA,EAAA,GAAb,EAA8C,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAAnB,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,CAAA,GAAA,MAAA,EAAA,MAAA,EAAA,GACzC,EAA8C,GAAA,EAAA,KAAA,EAAA,GAAA,CAAA,EAAA,EAA1B,EAAA,KAAY,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,EAAA,GAAA,EAAA,CAAA,GAAA,GAAA,CAAA,MAAA,EAAA,GAItC,EAKO,QALP,EAKO;;GALM,OAAM;KAAkB,EAAA,KAAU,GAAA,CAC5B,EAAA,MAEiB,EAAA,IAAA,EAAA,KAFjB,EAAA,GAAjB,EAGW,GAAA,EAAA,KAAA,EAAA,GAAA,CAFI,EAAA,QAAA,EAAA,GAAb,EAA8C,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAAnB,EAAA,CAAA,CAAS,CAAC,EAAA,IAAI,CAAA,CAAA,GAAA,MAAA,EAAA,MAAA,EAAA,GACzC,EAA8C,GAAA,EAAA,KAAA,EAAA,GAAA,CAAA,EAAA,EAA1B,EAAA,KAAY,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,EAAA,GAAA,EAAA"}
+{"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 * A small pill carrying one piece of information at a glance: a count of unread\n * items, or a single icon. It is never interactive — there is nothing to click and\n * nothing to focus — and it either stands on its own, sits next to an element, or\n * is pinned to one of that element's corners.\n *\n * It is made of HTML and CSS alone. The only JavaScript decides what to render:\n * whether a target element was given at all, capping the counter at \"99+\", and\n * handing the two colours a consumer may choose to the stylesheet as\n * `--custom-color` and `--badge-ring-color`.\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\nexport type BadgeVariant = 'solid' | 'soft'\nexport type BadgeTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning'\nexport type BadgeOverlayPosition = 'top' | 'bottom'\n\ninterface BadgeProps {\n  /**\n   * How strongly the badge is painted: filled with the full colour (`solid`, the\n   * default), or a tinted background with the text in the colour (`soft`), for a\n   * count that should not draw the eye. A `dot` is always solid: with no content to\n   * tint, a soft dot would be a pale disc barely distinguishable from the page.\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\n   * solid badge, browsers that support `contrast-color()` turn the text black or\n   * white by themselves; everywhere else it falls back to white, so with a light\n   * colour the contrast is yours to check. A soft badge derives its background and\n   * text from that colour mixed with the theme's surface and text.\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\n   * bottom one for a marker that belongs at the foot of its target — a presence dot\n   * under an avatar, for instance. The horizontal side follows the reading\n   * direction and is not configurable. It does nothing without `overlay`.\n   */\n  overlayPosition?: BadgeOverlayPosition\n  /**\n   * Draws a 2px ring around the badge, in the colour of the surface behind it,\n   * which detaches it from a busy target such as a picture. That colour defaults to\n   * the page background and is named through `ringColor` on any other surface.\n   */\n  bordered?: boolean\n  /**\n   * The colour of the ring drawn by `bordered`. It defaults to the page background,\n   * which is what makes the ring read as a gap around the badge; on another surface\n   * (a card, a coloured banner), pass that surface's colour. It does nothing without\n   * `bordered`.\n   */\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  /**\n   * The element the badge belongs to. Without it the badge stands on its own; with\n   * it, the badge is placed beside the element, or in its corner under `overlay`.\n   */\n  default?(): unknown\n}>()\n\n// TRAP — a function read by the template, never a `computed`: `slots` is not reactive, so a\n// computed 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/** The counter as it is actually displayed: anything past 99 becomes \"99+\". */\nconst displayCount = computed(() =>\n  props.count !== undefined && props.count > 99 ? '99+' : props.count,\n)\n\n/*\n * The pill itself, written once. The template has two roots — one wrapping a target, one\n * standing alone — and both render the same badge; a functional component is the one way\n * to put the same markup in two places of a template without writing it twice.\n */\nconst Pill: FunctionalComponent = () =>\n  h(\n    'span',\n    {\n      class: 'v-badge v-tone',\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// TRAP — the empty list is not decoration. A functional component that declares no props lets\n// only `class`, `style` and listeners fall through, so a standalone badge, whose root this is,\n// would 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 />\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); /* the space between the target and the badge, in inline mode */\n  }\n\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    /* The pill is the tone's solid pair, read from the shared table (`.v-tone`, set in the\n       template). Its neutral is the text/surface inversion, which is what lets the\n       fallback text and contrast-color() agree in both themes. */\n    --badge-bg: var(--tone-bg-solid);\n    --badge-text-fallback: var(--tone-text-solid);\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    background: var(--badge-bg);\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    color: var(--badge-text-fallback);\n  }\n\n  @supports (color: contrast-color(red)) {\n    .v-badge {\n      color: contrast-color(var(--badge-bg));\n    }\n  }\n\n  /* A custom colour replaces the tone: at (0,2,0) it beats the base rule's mapping\n     whatever the order the two are written in. */\n  .v-badge[data-custom] {\n    --badge-bg: var(--custom-color);\n    --badge-text-fallback: var(--vectis-color-text-on-accent);\n  }\n\n  /* The soft pair of the same table. The text is the tone's own colour rather than\n     contrast-color(): the black or white that function picks reads on a pale tint, but\n     says nothing of the tone. At (0,3,0) it beats the `@supports` rule above whatever\n     the order. A dot is left out: with no content, a soft dot is a pale disc on the\n     page, which a presence marker cannot afford. */\n  .v-badge[data-variant='soft']:not([data-dot]) {\n    --badge-bg: var(--tone-bg-soft);\n\n    color: var(--tone-text-tinted);\n  }\n\n  /* A custom colour's soft pair, derived as VChip derives its own, so the same value\n     gives a soft chip and a soft badge the same tint in both themes. */\n  .v-badge[data-variant='soft'][data-custom]:not([data-dot]) {\n    --badge-bg: color-mix(in oklab, var(--custom-color), var(--vectis-color-surface) 85%);\n\n    color: color-mix(in oklab, var(--custom-color), var(--vectis-color-text) 30%);\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  /* The tuck-in offset is a ratio of the badge's own size, so it stays proportionate\n     across the pill, the dot and the icon. Each half of it is held in its own\n     variable: the corner and the reading direction each flip ONE axis, and writing\n     the whole `translate` again in each branch would make the two multiply — four\n     rules to keep in step by hand for two independent decisions. */\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    /* TRAP — an overlaid badge deliberately leaves its target's box, so it lands on\n       whatever sits beside it, and the host opens no stacking context of its own\n       (`position: relative` with `z-index: auto`). Left at `auto` the badge is painted\n       with the other positioned boxes in TREE ORDER, which means anything positioned\n       after it covers it: inside a VButtonGroup, where every segment is positioned, the\n       badge on one segment disappears under the borders of the next. The lift takes it\n       past that step, and no further: the segment it leans into comes later in tree\n       order, so that segment's focus ring, raised to this same level, is still drawn\n       over the badge rather than under it. */\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  /* In a right-to-left direction the logical corner moves to the left, so the\n     horizontal half of the translation has to flip with it — `translate` is a\n     physical property and knows nothing about direction. */\n  .v-badge-host[data-overlay]:dir(rtl) > .v-badge {\n    --badge-overlay-x: -25%;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2FA,IAAM,IAAQ,GAeR,IAAQ,EAAA;EAUd,SAAS,IAAY;GACnB,OAAO,EAAM,YAAY,KAAA;EAC3B;EAGA,IAAM,IAAe,QACnB,EAAM,UAAU,KAAA,KAAa,EAAM,QAAQ,KAAK,QAAQ,EAAM,KAChE,GAOM,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,EAAQ,CAAA,CAAA,GAAA,GAAA,CAAA,MAAA,EAAA,GAEV,EAAe,GAAA,EAAA,KAAA,EAAA,CAAA"}

package/dist/components/VBreadcrumb/VBreadcrumb.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-breadcrumb{--vectis-icon-size:var(--vectis-icon-size-sm);--vectis-icon-opsz:20}.v-breadcrumb-list{align-items:center;gap:var(--vectis-space-2);font-family:var(--vectis-text-family);font-size:var(--vectis-text-body-md-size);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.v-breadcrumb-item{align-items:center;gap:var(--vectis-space-2);color:var(--vectis-color-text-muted);display:inline-flex}.v-breadcrumb-list>.v-breadcrumb-item:first-child>.v-breadcrumb-separator{display:none}.v-breadcrumb-separator{color:var(--vectis-color-text-subtle)}.v-breadcrumb-link{align-items:center;gap:var(--vectis-space-1);color:var(--vectis-color-text-muted);border-radius:var(--vectis-radius-xs);transition:color var(--vectis-duration-fast) var(--vectis-ease-default);text-decoration:none;display:inline-flex}.v-breadcrumb-link:hover{color:var(--vectis-color-text);text-decoration:underline}.v-breadcrumb-link:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-breadcrumb-link[aria-current=page]{color:var(--vectis-color-text);font-weight:var(--vectis-text-label-weight)}@media (prefers-reduced-motion:reduce){.v-breadcrumb-link{transition:none}}}
+@layer vectis.components{.v-breadcrumb{--vectis-icon-size:var(--vectis-icon-size-sm);--vectis-icon-opsz:20}.v-breadcrumb-list{align-items:center;gap:var(--vectis-space-2);font-family:var(--vectis-text-family);font-size:var(--vectis-text-body-md-size);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.v-breadcrumb-item{align-items:center;gap:var(--vectis-space-2);color:var(--vectis-color-text-muted);display:inline-flex}.v-breadcrumb-list>.v-breadcrumb-item:first-child>.v-breadcrumb-separator{display:none}.v-breadcrumb-separator{color:var(--vectis-color-text-subtle)}.v-breadcrumb-link{align-items:center;gap:var(--vectis-space-1);color:var(--vectis-color-text-muted);border-radius:min(var(--vectis-radius-interactive), .5lh);transition:color var(--vectis-duration-fast) var(--vectis-ease-default);text-decoration:none;display:inline-flex}.v-breadcrumb-link:hover{color:var(--vectis-color-text);text-decoration:underline}.v-breadcrumb-link:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-breadcrumb-link[aria-current=page]{color:var(--vectis-color-text);font-weight:var(--vectis-text-label-weight)}@media (prefers-reduced-motion:reduce){.v-breadcrumb-link{transition:none}}}

package/dist/components/VBreadcrumb/VBreadcrumb.d.ts

@@ -1,17 +1,4 @@
 import { IconSource } from '../VIcon/types.js';
-/**
- * A breadcrumb trail: the path that leads to the page being read, from the most
- * general section down to the current one. It is a `<nav>` holding an ordered list,
- * built entirely from the `items` prop — nothing is read from the browser, so the
- * server and the client render exactly the same thing.
- *
- * The separators between the segments are decorative icons, hidden from screen
- * readers, and the very first one is removed in CSS rather than by a condition in
- * the markup. The current page is found by comparing each segment's address with
- * `currentPath`: it is marked with `aria-current="page"` and stays a working link,
- * as the ARIA authoring practices recommend. When the trail grows past `maxItems`,
- * the middle segments are folded into a menu opened by an "…" button.
- */
 export interface BreadcrumbItem {
     /** The text shown for this segment. */
     label: string;
@@ -24,7 +11,7 @@ export interface BreadcrumbItem {
      * An icon placed before the label: a Material Symbols Rounded name, an icon URL,
      * or an explicit render (`{ src: '/logo.svg' }`, `{ component }`…).
      */
-    iconStart?: IconSource;
+    icon?: IconSource;
 }
 interface BreadcrumbProps {
     /** The segments of the trail, ordered from the most general down to the deepest. */
@@ -41,9 +28,9 @@ interface BreadcrumbProps {
     currentPath?: string;
     /**
      * The icon drawn between two segments: an icon name, or an explicit render,
-     * exactly like `iconStart`.
+     * exactly like an item's `icon`.
      */
-    separator?: IconSource;
+    separatorIcon?: IconSource;
     /**
      * The length past which the trail folds: only the first segment, an "…" button and
      * the last two remain, the button opening a menu that lists the hidden segments
@@ -59,8 +46,8 @@ interface BreadcrumbProps {
 }
 declare const __VLS_export: import('vue').DefineComponent<BreadcrumbProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BreadcrumbProps> & Readonly<{}>, {
     label: string;
-    separator: IconSource;
     currentPath: string;
+    separatorIcon: IconSource;
     maxItems: number;
     ellipsisLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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\">\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\n// @ssr @core\n/**\n * A breadcrumb trail: the path that leads to the page being read, from the most\n * general section down to the current one. It is a `<nav>` holding an ordered list,\n * built entirely from the `items` prop — nothing is read from the browser, so the\n * server and the client render exactly the same thing.\n *\n * The separators between the segments are decorative icons, hidden from screen\n * readers, and the very first one is removed in CSS rather than by a condition in\n * the markup. The current page is found by comparing each segment's address with\n * `currentPath`: it is marked with `aria-current=\"page\"` and stays a working link,\n * as the ARIA authoring practices recommend. When the trail grows past `maxItems`,\n * the middle segments are folded into a menu opened by an \"…\" button.\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: a Material Symbols Rounded name, an icon URL,\n   * or an explicit render (`{ src: '/logo.svg' }`, `{ component }`…).\n   */\n  iconStart?: 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  /**\n   * The address of the page being displayed. The segment whose `href` matches it is\n   * the current one; a trailing slash on either side makes no difference.\n   */\n  currentPath?: string\n  /**\n   * The icon drawn between two segments: an icon name, or an explicit render,\n   * exactly like `iconStart`.\n   */\n  separator?: IconSource\n  /**\n   * The length past which the trail folds: only the first segment, an \"…\" button and\n   * the last two remain, the button opening a menu that lists the hidden segments\n   * alone. Below 3 there would be nothing left to fold, so 3 is the effective\n   * minimum.\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  separator: () => 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 a trailing slash so that `/docs` and `/docs/` compare as the same page; the\n * root `/` is left alone. Pure string handling, hence safe to run on the server.\n */\nfunction normalize(path: string): string {\n  return path.length > 1 && path.endsWith('/') ? path.slice(0, -1) : path\n}\n\n// @a11y — this is what feeds `aria-current=\"page\"`, the only marker telling\n// assistive technology where the trail ends.\nfunction isCurrent(item: BreadcrumbItem): boolean {\n  if (props.currentPath === undefined) return false\n  return normalize(item.href) === normalize(props.currentPath)\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\n * one followed 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(separator)\" />\n          <VMenu compact>\n            <template #trigger=\"{ triggerProps }\">\n              <VIconButton size=\"sm\" compact :label=\"resolvedEllipsisLabel\" v-bind=\"triggerProps\">\n                <VIcon :name=\"moreHorizIcon\" />\n              </VIconButton>\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.iconStart\"\n            />\n          </VMenu>\n        </li>\n        <li class=\"v-breadcrumb-item\">\n          <VIcon class=\"v-breadcrumb-separator\" v-bind=\"iconProps(separator)\" />\n          <a\n            class=\"v-breadcrumb-link\"\n            :href=\"item.href\"\n            :aria-current=\"isCurrent(item) ? 'page' : undefined\"\n          >\n            <VIcon v-if=\"item.iconStart\" v-bind=\"iconProps(item.iconStart)\" />\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\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  .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  .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: var(--vectis-radius-xs);\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":[],"sources":["../../../src/components/VBreadcrumb/VBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core\n/**\n * The path leading to the page being read, from the broadest section down to the current\n * one: a `<nav>` holding an `<ol>`, built entirely from the `items` prop. Nothing is read\n * from the browser, so the server and the client render the same thing.\n *\n * The separators are decorative `aria-hidden` icons, and the first is removed in CSS rather\n * than by a condition in the markup. The current page is found by comparing each address\n * with `currentPath`, carries `aria-current=\"page\"` and stays a working link, as the ARIA\n * practices recommend. Past `maxItems`, the middle segments fold into a VMenu behind an \"…\".\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: a Material Symbols Rounded name, an icon URL,\n   * or an explicit render (`{ src: '/logo.svg' }`, `{ component }`…).\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  /**\n   * The address of the page being displayed. The segment whose `href` matches it is\n   * the current one; a trailing slash on either side makes no difference.\n   */\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`.\n   */\n  separatorIcon?: IconSource\n  /**\n   * The length past which the trail folds: only the first segment, an \"…\" button and\n   * the last two remain, the button opening a menu that lists the hidden segments\n   * alone. Below 3 there would be nothing left to fold, so 3 is the effective\n   * minimum.\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 a trailing slash so that `/docs` and `/docs/` compare as the same page; the\n * root `/` is left alone. Pure string handling, hence safe to run on the server.\n */\nfunction normalize(path: string): string {\n  return path.length > 1 && path.endsWith('/') ? path.slice(0, -1) : path\n}\n\n// Normalized once per change of the prop rather than once per segment on every render.\nconst normalizedCurrent = computed(() =>\n  props.currentPath === undefined ? undefined : normalize(props.currentPath),\n)\n\n// @a11y — this is what feeds `aria-current=\"page\"`, the only marker telling\n// assistive technology where the trail ends.\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\n * one followed 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            />\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  /* TRAP — every item renders its own leading separator and the first one is hidden HERE,\n     which is what keeps the template free of an index test. Delete this rule and the trail\n     opens on a stray chevron; both child combinators are load-bearing too, so wrapping an\n     item or the list in anything puts that chevron straight back. */\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

@@ -1,10 +1,10 @@
 import { useMessages as e } from "../../i18n/state.js";
-import t from "../VIcon/VIcon.js";
-import { iconProps as n } from "../VIcon/iconProps.js";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import n from "../VIcon/VIcon.js";
 import r from "../VIconButton/VIconButton.js";
-import { chevron_right as i } from "../VIcon/icons/chevron_right.js";
-import { more_horiz as a } from "../VIcon/icons/more_horiz.js";
-import { useAriaLabel as o } from "../../composables/useAriaLabel.js";
+import { useAriaLabel as i } from "../../composables/useAriaLabel.js";
+import { chevron_right as a } from "../VIcon/icons/chevron_right.js";
+import { more_horiz as o } from "../VIcon/icons/more_horiz.js";
 import s from "../VMenu/VMenu.js";
 import c from "../VMenu/VMenuItem.js";
 import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeProps as v, openBlock as y, renderList as b, toDisplayString as x, unref as S, withCtx as C } from "vue";
@@ -18,50 +18,48 @@ var w = ["aria-label"], T = { class: "v-breadcrumb-list" }, E = {
 		items: {},
 		label: { default: void 0 },
 		currentPath: { default: void 0 },
-		separator: { default: () => i },
+		separatorIcon: { default: () => a },
 		maxItems: { default: void 0 },
 		ellipsisLabel: { default: void 0 }
 	},
-	setup(i) {
-		let _ = i, k = e(), A = o(() => _.label ?? k.value.breadcrumb.label), j = u(() => _.ellipsisLabel ?? k.value.breadcrumb.ellipsis);
+	setup(a) {
+		let _ = a, k = e(), A = i(() => _.label ?? k.value.breadcrumb.label), j = u(() => _.ellipsisLabel ?? k.value.breadcrumb.ellipsis);
 		function M(e) {
 			return e.length > 1 && e.endsWith("/") ? e.slice(0, -1) : e;
 		}
-		function N(e) {
-			return _.currentPath !== void 0 && M(e.href) === M(_.currentPath);
+		let N = u(() => _.currentPath === void 0 ? void 0 : M(_.currentPath));
+		function P(e) {
+			return N.value !== void 0 && M(e.href) === N.value;
 		}
-		let P = u(() => _.maxItems !== void 0 && _.items.length > Math.max(_.maxItems, 3)), F = u(() => P.value ? _.items.slice(1, -2) : []), I = u(() => P.value ? [_.items[0], ..._.items.slice(-2)] : _.items);
-		return (e, o) => (y(), p("nav", {
+		let F = u(() => _.maxItems !== void 0 && _.items.length > Math.max(_.maxItems, 3)), I = u(() => F.value ? _.items.slice(1, -2) : []), L = u(() => F.value ? [_.items[0], ..._.items.slice(-2)] : _.items);
+		return (e, i) => (y(), p("nav", {
 			class: "v-breadcrumb",
 			"aria-label": S(A)
-		}, [m("ol", T, [(y(!0), p(l, null, b(I.value, (e, o) => (y(), p(l, { key: e.href }, [P.value && o === 1 ? (y(), p("li", E, [g(t, v({ class: "v-breadcrumb-separator" }, { ref_for: !0 }, S(n)(i.separator)), null, 16), g(s, { compact: "" }, {
+		}, [m("ol", T, [(y(!0), p(l, null, b(L.value, (e, i) => (y(), p(l, { key: e.href }, [F.value && i === 1 ? (y(), p("li", E, [g(n, v({ class: "v-breadcrumb-separator" }, { ref_for: !0 }, S(t)(a.separatorIcon), { mirrored: "" }), null, 16), g(s, null, {
 			trigger: C(({ triggerProps: e }) => [g(r, v({
 				size: "sm",
-				compact: "",
-				label: j.value
-			}, { ref_for: !0 }, e), {
-				default: C(() => [g(t, { name: S(a) }, null, 8, ["name"])]),
-				_: 1
-			}, 16, ["label"])]),
-			default: C(() => [(y(!0), p(l, null, b(F.value, (e) => (y(), d(c, {
+				label: j.value,
+				icon: S(o)
+			}, { ref_for: !0 }, e), null, 16, ["label", "icon"])]),
+			default: C(() => [(y(!0), p(l, null, b(I.value, (e) => (y(), d(c, {
 				key: e.href,
 				href: e.href,
 				label: e.label,
-				"icon-start": e.iconStart
+				"icon-start": e.icon
 			}, null, 8, [
 				"href",
 				"label",
 				"icon-start"
 			]))), 128))]),
 			_: 1
-		})])) : f("", !0), m("li", D, [g(t, v({ class: "v-breadcrumb-separator" }, { ref_for: !0 }, S(n)(i.separator)), null, 16), m("a", {
+		})])) : f("", !0), m("li", D, [g(n, v({ class: "v-breadcrumb-separator" }, { ref_for: !0 }, S(t)(a.separatorIcon), { mirrored: "" }), null, 16), m("a", {
 			class: "v-breadcrumb-link",
 			href: e.href,
-			"aria-current": N(e) ? "page" : void 0
-		}, [e.iconStart ? (y(), d(t, v({
+			"aria-current": P(e) ? "page" : void 0
+		}, [e.icon ? (y(), d(n, v({
 			key: 0,
 			ref_for: !0
-		}, S(n)(e.iconStart)), null, 16)) : f("", !0), h(" " + x(e.label), 1)], 8, O)])], 64))), 128))])], 8, w));
+		}, S(t)(e.icon)), null, 16)) : f("", !0), h(" " + x(e.label), 1)], 8, O)])], 64))), 128))])], 8, w));
 	}
 });
 //#endregion

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\">\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\n// @ssr @core\n/**\n * A breadcrumb trail: the path that leads to the page being read, from the most\n * general section down to the current one. It is a `<nav>` holding an ordered list,\n * built entirely from the `items` prop — nothing is read from the browser, so the\n * server and the client render exactly the same thing.\n *\n * The separators between the segments are decorative icons, hidden from screen\n * readers, and the very first one is removed in CSS rather than by a condition in\n * the markup. The current page is found by comparing each segment's address with\n * `currentPath`: it is marked with `aria-current=\"page\"` and stays a working link,\n * as the ARIA authoring practices recommend. When the trail grows past `maxItems`,\n * the middle segments are folded into a menu opened by an \"…\" button.\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: a Material Symbols Rounded name, an icon URL,\n   * or an explicit render (`{ src: '/logo.svg' }`, `{ component }`…).\n   */\n  iconStart?: 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  /**\n   * The address of the page being displayed. The segment whose `href` matches it is\n   * the current one; a trailing slash on either side makes no difference.\n   */\n  currentPath?: string\n  /**\n   * The icon drawn between two segments: an icon name, or an explicit render,\n   * exactly like `iconStart`.\n   */\n  separator?: IconSource\n  /**\n   * The length past which the trail folds: only the first segment, an \"…\" button and\n   * the last two remain, the button opening a menu that lists the hidden segments\n   * alone. Below 3 there would be nothing left to fold, so 3 is the effective\n   * minimum.\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  separator: () => 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 a trailing slash so that `/docs` and `/docs/` compare as the same page; the\n * root `/` is left alone. Pure string handling, hence safe to run on the server.\n */\nfunction normalize(path: string): string {\n  return path.length > 1 && path.endsWith('/') ? path.slice(0, -1) : path\n}\n\n// @a11y — this is what feeds `aria-current=\"page\"`, the only marker telling\n// assistive technology where the trail ends.\nfunction isCurrent(item: BreadcrumbItem): boolean {\n  if (props.currentPath === undefined) return false\n  return normalize(item.href) === normalize(props.currentPath)\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\n * one followed 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(separator)\" />\n          <VMenu compact>\n            <template #trigger=\"{ triggerProps }\">\n              <VIconButton size=\"sm\" compact :label=\"resolvedEllipsisLabel\" v-bind=\"triggerProps\">\n                <VIcon :name=\"moreHorizIcon\" />\n              </VIconButton>\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.iconStart\"\n            />\n          </VMenu>\n        </li>\n        <li class=\"v-breadcrumb-item\">\n          <VIcon class=\"v-breadcrumb-separator\" v-bind=\"iconProps(separator)\" />\n          <a\n            class=\"v-breadcrumb-link\"\n            :href=\"item.href\"\n            :aria-current=\"isCurrent(item) ? 'page' : undefined\"\n          >\n            <VIcon v-if=\"item.iconStart\" v-bind=\"iconProps(item.iconStart)\" />\n            {{ item.label }}\n          </a>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n\n<style>\n@layer vectis.components {\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  .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  .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: var(--vectis-radius-xs);\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":";;;;;;;;;;;;;;;;;;;;;;;;;EA4EA,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,OAAO,EAAK,SAAS,KAAK,EAAK,SAAS,GAAG,IAAI,EAAK,MAAM,GAAG,EAAE,IAAI;EACrE;EAIA,SAAS,EAAU,GAA+B;GAEhD,OADI,EAAM,gBAAgB,KAAA,KACnB,EAAU,EAAK,IAAI,MAAM,EAAU,EAAM,WAAW;EAC7D;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,EAiCM,OAAA;GAjCD,OAAM;GAAgB,cAAY,EAAA,CAAA;MACrC,EA+BK,MA/BL,GA+BK,EAAA,EAAA,EAAA,GA9BH,EA6BW,GAAA,MAAA,EA7BuB,EAAA,QAAhB,GAAM,wBAA8B,EAAK,KAAA,GAAA,CAC/C,EAAA,SAAa,MAAK,KAAA,EAAA,GAA5B,EAgBK,MAhBL,GAgBK,CAfH,EAAsE,GAAtE,EAAsE,EAA/D,OAAM,yBAAwB,GAAA,EAAA,SAAA,GAAA,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,SAAS,CAAA,GAAA,MAAA,EAAA,GACjE,EAaQ,GAAA,EAbD,SAAA,GAAO,GAAA;GACD,SAAO,GAGF,EAHM,sBAAY,CAChC,EAEc,GAFd,EAEc;IAFD,MAAK;IAAK,SAAA;IAAS,OAAO,EAAA;uBAA+B,CAAY,GAAA;qBACjD,CAA/B,EAA+B,GAAA,EAAvB,MAAM,EAAA,CAAA,EAAa,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA;;;oBAIA,EAAA,EAAA,EAAA,GAD/B,EAME,GAAA,MAAA,EALiB,EAAA,QAAV,YADT,EAME,GAAA;IAJC,KAAK,EAAO;IACZ,MAAM,EAAO;IACb,OAAO,EAAO;IACd,cAAY,EAAO;;;;;;;qBAI1B,EAUK,MAVL,GAUK,CATH,EAAsE,GAAtE,EAAsE,EAA/D,OAAM,yBAAwB,GAAA,EAAA,SAAA,GAAA,GAAS,EAAA,CAAA,CAAS,CAAC,EAAA,SAAS,CAAA,GAAA,MAAA,EAAA,GACjE,EAOI,KAAA;GANF,OAAM;GACL,MAAM,EAAK;GACX,gBAAc,EAAU,CAAI,IAAA,SAAa,KAAA;MAE7B,EAAK,aAAA,EAAA,GAAlB,EAAkE,GAAlE,EAAkE;;;KAA7B,EAAA,CAAA,CAAS,CAAC,EAAK,SAAS,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAK,MAClE,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":[],"sources":["../../../src/components/VBreadcrumb/VBreadcrumb.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @ssr @core\n/**\n * The path leading to the page being read, from the broadest section down to the current\n * one: a `<nav>` holding an `<ol>`, built entirely from the `items` prop. Nothing is read\n * from the browser, so the server and the client render the same thing.\n *\n * The separators are decorative `aria-hidden` icons, and the first is removed in CSS rather\n * than by a condition in the markup. The current page is found by comparing each address\n * with `currentPath`, carries `aria-current=\"page\"` and stays a working link, as the ARIA\n * practices recommend. Past `maxItems`, the middle segments fold into a VMenu behind an \"…\".\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: a Material Symbols Rounded name, an icon URL,\n   * or an explicit render (`{ src: '/logo.svg' }`, `{ component }`…).\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  /**\n   * The address of the page being displayed. The segment whose `href` matches it is\n   * the current one; a trailing slash on either side makes no difference.\n   */\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`.\n   */\n  separatorIcon?: IconSource\n  /**\n   * The length past which the trail folds: only the first segment, an \"…\" button and\n   * the last two remain, the button opening a menu that lists the hidden segments\n   * alone. Below 3 there would be nothing left to fold, so 3 is the effective\n   * minimum.\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 a trailing slash so that `/docs` and `/docs/` compare as the same page; the\n * root `/` is left alone. Pure string handling, hence safe to run on the server.\n */\nfunction normalize(path: string): string {\n  return path.length > 1 && path.endsWith('/') ? path.slice(0, -1) : path\n}\n\n// Normalized once per change of the prop rather than once per segment on every render.\nconst normalizedCurrent = computed(() =>\n  props.currentPath === undefined ? undefined : normalize(props.currentPath),\n)\n\n// @a11y — this is what feeds `aria-current=\"page\"`, the only marker telling\n// assistive technology where the trail ends.\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\n * one followed 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            />\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  /* TRAP — every item renders its own leading separator and the first one is hidden HERE,\n     which is what keeps the template free of an index test. Delete this rule and the trail\n     opens on a stray chevron; both child combinators are load-bearing too, so wrapping an\n     item or the list in anything puts that chevron straight back. */\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":";;;;;;;;;;;;;;;;;;;;;;;;;EA0EA,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,OAAO,EAAK,SAAS,KAAK,EAAK,SAAS,GAAG,IAAI,EAAK,MAAM,GAAG,EAAE,IAAI;EACrE;EAGA,IAAM,IAAoB,QACxB,EAAM,gBAAgB,KAAA,IAAY,KAAA,IAAY,EAAU,EAAM,WAAW,CAC3E;EAIA,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,EAoCM,OAAA;GApCD,OAAM;GAAgB,cAAY,EAAA,CAAA;MACrC,EAkCK,MAlCL,GAkCK,EAAA,EAAA,EAAA,GAjCH,EAgCW,GAAA,MAAA,EAhCuB,EAAA,QAAhB,GAAM,wBAA8B,EAAK,KAAA,GAAA,CAC/C,EAAA,SAAa,MAAK,KAAA,EAAA,GAA5B,EAmBK,MAnBL,GAmBK,CAlBH,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,EAgBQ,GAAA,MAAA;GAfK,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,EAME,GAAA,MAAA,EALiB,EAAA,QAAV,YADT,EAME,GAAA;IAJC,KAAK,EAAO;IACZ,MAAM,EAAO;IACb,OAAO,EAAO;IACd,cAAY,EAAO;;;;;;;qBAI1B,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"}

package/dist/components/VButton/VButton.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-button{justify-content:center;align-items:center;gap:var(--control-gap);height:var(--control-height);padding-inline:var(--control-padding-inline);border-radius:var(--vectis-radius-interactive);font-family:var(--vectis-text-family);font-size:var(--control-font-size);font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);cursor:pointer;transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default), border-color var(--vectis-duration-fast) var(--vectis-ease-default), color var(--vectis-duration-fast) var(--vectis-ease-default), box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);border:1px solid #0000;text-decoration:none;display:inline-flex}.v-button:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-button[data-variant=solid]{background:var(--tone-bg-solid);color:var(--tone-text-solid)}.v-button[data-variant=solid]:hover:not(:disabled,[aria-disabled=true]){background:var(--tone-bg-solid-hover)}.v-button[data-variant=solid]:active:not(:disabled,[aria-disabled=true]){background:var(--tone-bg-solid-active)}.v-button[data-variant=outline]{color:var(--tone-text-tinted);border-color:var(--tone-border-soft);background:0 0}.v-button[data-variant=ghost]{color:var(--tone-text-tinted);background:0 0}.v-button[data-variant=outline]:not([data-elevated]):hover:not(:disabled,[aria-disabled=true]),.v-button[data-variant=ghost]:not([data-elevated]):hover:not(:disabled,[aria-disabled=true]){background:var(--tone-bg-soft)}.v-button[data-variant=outline]:not([data-elevated]):active:not(:disabled,[aria-disabled=true]),.v-button[data-variant=ghost]:not([data-elevated]):active:not(:disabled,[aria-disabled=true]){background:color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%)}.v-button[data-variant=soft]{background:var(--tone-bg-soft);color:var(--tone-text-tinted)}.v-button[data-variant=soft]:hover:not(:disabled,[aria-disabled=true]){background:color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%)}.v-button[data-variant=soft]:active:not(:disabled,[aria-disabled=true]){background:color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 14%)}.v-button[data-elevated]{box-shadow:var(--vectis-shadow-sm)}.v-button[data-elevated]:is([data-variant=ghost],[data-variant=outline]){background:var(--vectis-color-surface-raised)}.v-button[data-elevated]:hover:not(:disabled,[aria-disabled=true]){box-shadow:var(--vectis-shadow-md)}.v-button[data-elevated]:is([data-variant=ghost],[data-variant=outline]):hover:not(:disabled,[aria-disabled=true]){background:color-mix(in oklab, var(--vectis-color-surface-raised), var(--tone-text-tinted) 8%)}.v-button[data-elevated]:active:not(:disabled,[aria-disabled=true]){box-shadow:var(--vectis-shadow-sm)}.v-button[data-elevated]:is([data-variant=ghost],[data-variant=outline]):active:not(:disabled,[aria-disabled=true]){background:color-mix(in oklab, var(--vectis-color-surface-raised), var(--tone-text-tinted) 12%)}.v-button:is(:disabled,[aria-disabled=true]){cursor:not-allowed}.v-button[data-loading]{opacity:.5}.v-button:is(:disabled,[aria-disabled=true]):not([data-loading]):is([data-variant=solid],[data-variant=soft]){background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-subtle)}.v-button:is(:disabled,[aria-disabled=true]):not([data-loading])[data-variant=outline]{color:var(--vectis-color-text-subtle);border-color:var(--vectis-color-border);background:0 0}.v-button:is(:disabled,[aria-disabled=true]):not([data-loading])[data-variant=ghost]{color:var(--vectis-color-text-subtle);background:0 0}.v-button:is(:disabled,[aria-disabled=true]):not([data-loading])[data-elevated]{box-shadow:none}.v-button-spinner{width:var(--vectis-icon-size);height:var(--vectis-icon-size);font-size:var(--vectis-icon-size);flex:none;justify-content:center;align-items:center;display:inline-flex}@media (prefers-reduced-motion:reduce){.v-button{transition:none}}}
+@layer vectis.components{.v-button{justify-content:center;align-items:center;gap:var(--control-gap);height:var(--control-height);padding-inline:var(--control-padding-inline);border-radius:var(--vectis-radius-interactive);font-family:var(--vectis-text-family);font-size:var(--control-font-size);font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);cursor:pointer;transition:background-color var(--vectis-duration-fast) var(--vectis-ease-default), border-color var(--vectis-duration-fast) var(--vectis-ease-default), color var(--vectis-duration-fast) var(--vectis-ease-default), box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);border:1px solid #0000;text-decoration:none;display:inline-flex}.v-button[data-full-width]{inline-size:100%;display:flex}.v-button[data-icon-only]{min-inline-size:var(--control-height);padding-inline:0}.v-button:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-button[data-variant=solid]:hover:not(:disabled,[aria-disabled=true]){background:var(--tone-bg-solid-hover)}.v-button[data-variant=solid]:active:not(:disabled,[aria-disabled=true]){background:var(--tone-bg-solid-active)}.v-button:is([data-variant=outline],[data-variant=ghost]):not([data-elevated]):hover:not(:disabled,[aria-disabled=true]){background:var(--tone-bg-soft)}.v-button:is([data-variant=outline],[data-variant=ghost]):not([data-elevated]):active:not(:disabled,[aria-disabled=true]),.v-button[data-variant=soft]:hover:not(:disabled,[aria-disabled=true]){background:color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%)}.v-button[data-variant=soft]:active:not(:disabled,[aria-disabled=true]){background:color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 14%)}.v-button[data-elevated]{box-shadow:var(--vectis-shadow-sm)}.v-button[data-elevated]:is([data-variant=ghost],[data-variant=outline]){background:var(--vectis-color-surface-raised)}.v-button[data-elevated]:hover:not(:disabled,[aria-disabled=true]){box-shadow:var(--vectis-shadow-md)}.v-button[data-elevated]:is([data-variant=ghost],[data-variant=outline]):hover:not(:disabled,[aria-disabled=true]){background:color-mix(in oklab, var(--vectis-color-surface-raised), var(--tone-text-tinted) 8%)}.v-button[data-elevated]:active:not(:disabled,[aria-disabled=true]){box-shadow:var(--vectis-shadow-sm)}.v-button[data-elevated]:is([data-variant=ghost],[data-variant=outline]):active:not(:disabled,[aria-disabled=true]){background:color-mix(in oklab, var(--vectis-color-surface-raised), var(--tone-text-tinted) 12%)}.v-button:is(:disabled,[aria-disabled=true]){cursor:not-allowed}.v-button[data-loading]{opacity:.5}.v-button:is(:disabled,[aria-disabled=true]):not([data-loading]):is([data-variant=solid],[data-variant=soft]){background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-subtle)}.v-button:is(:disabled,[aria-disabled=true]):not([data-loading])[data-variant=outline]{color:var(--vectis-color-text-subtle);border-color:var(--vectis-color-border);background:0 0}.v-button:is(:disabled,[aria-disabled=true]):not([data-loading])[data-variant=ghost]{color:var(--vectis-color-text-subtle);background:0 0}.v-button:is(:disabled,[aria-disabled=true]):not([data-loading])[data-elevated]{box-shadow:none}.v-button-spinner{width:var(--vectis-icon-size);height:var(--vectis-icon-size);font-size:var(--vectis-icon-size);flex:none;justify-content:center;align-items:center;display:inline-flex}@media (prefers-reduced-motion:reduce){.v-button{transition:none}}}

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

@@ -1,29 +1,48 @@
 import { ButtonHTMLAttributes } from 'vue';
 import { IconSource } from '../VIcon/types.js';
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft';
+export type ButtonTone = 'accent' | 'neutral' | 'danger';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 interface ButtonProps {
     /**
      * How much visual weight the button carries: `solid` is filled with the tone,
      * `soft` uses a tinted background, `outline` keeps only a border, and `ghost`
-     * shows nothing until it is hovered.
+     * shows nothing until it is hovered. Inside a VButtonGroup the group's own variant
+     * wins over this one.
      */
-    variant?: 'solid' | 'outline' | 'ghost' | 'soft';
+    variant?: ButtonVariant;
     /**
      * What the action means: `accent` for the ordinary one, `neutral` for a secondary
      * one, `danger` for one that destroys something. On a button a tone is an
      * intention, which is why states such as success or warning are not offered here.
+     * Left out inside a VButtonGroup it takes the group's tone, which is the point of
+     * not defaulting it here; on its own it is `accent`.
      */
-    tone?: 'accent' | 'neutral' | 'danger';
+    tone?: ButtonTone;
     /**
      * Raises the button off the page: a shadow that grows on hover and settles back
      * when pressed, whatever the variant. On `ghost` and `outline`, which have no
      * background of their own, it also paints the raised surface — in the dark theme
-     * a shadow lying straight on the page background has nothing casting it.
+     * a shadow lying straight on the page background has nothing casting it. Inside a
+     * VButtonGroup the group's own value wins over this one.
      */
     elevated?: boolean;
-    /** The height of the button, taken from the size scale shared by every control. */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */
+    /**
+     * The height of the button, taken from the size scale shared by every control.
+     * 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. The label stays centred, and the button becomes
+     * block-level, so it no longer sits on a line of text.
+     */
+    fullWidth?: boolean;
     /**
      * Turns the button into an `<a>` pointing at this address. A disabled or loading
      * link becomes inert: the address is dropped, so it can be neither focused nor
@@ -66,12 +85,13 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     loading: boolean;
-    size: "xs" | "sm" | "md" | "lg" | "xl";
+    size: ButtonSize;
     type: "button" | "submit" | "reset";
-    variant: "solid" | "outline" | "ghost" | "soft";
-    tone: "accent" | "neutral" | "danger";
+    variant: ButtonVariant;
+    tone: ButtonTone;
     elevated: boolean;
     compact: boolean;
+    fullWidth: boolean;
     href: string;
     disabled: boolean;
     iconStart: IconSource;