vectis-ui 0.1.0

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

@@ -0,0 +1,74 @@
+import { IconSource } from '../VIcon/types.js';
+export type BadgeTone = 'neutral' | 'accent' | 'danger' | 'success' | 'warning';
+export type BadgeOverlayPosition = 'top' | 'bottom';
+interface BadgeProps {
+    /**
+     * The meaning the badge carries, expressed as a colour. The pill is filled with
+     * it and the text adapts to stay readable; there is a single, fully coloured
+     * rendering, so no variant to choose alongside it.
+     */
+    tone?: BadgeTone;
+    /**
+     * A colour of your own (hex, CSS name or `oklch()`), which replaces the tone. On
+     * browsers that support `contrast-color()` the text turns black or white by
+     * itself; everywhere else it falls back to white, so with a light colour the
+     * contrast is yours to check.
+     */
+    color?: string;
+    /**
+     * The number to display. Anything above 99 is shown as "99+", so that a busy
+     * counter cannot stretch the pill indefinitely.
+     */
+    count?: number;
+    /**
+     * A single icon shown instead of a number: an icon name, or an explicit render
+     * (the VIcon contract). It takes precedence over `count`, and is ignored when the
+     * badge is a `dot`.
+     */
+    icon?: IconSource;
+    /**
+     * Reduces the badge to a 10px dot with no content — the discreet way to signal
+     * that something is new without saying how much.
+     */
+    dot?: boolean;
+    /**
+     * Pins the badge to a corner of the target element instead of placing it beside
+     * it. It does nothing when the badge has no target.
+     */
+    overlay?: boolean;
+    /**
+     * Which corner an `overlay` badge is pinned to: the top one by default, the
+     * bottom one for a marker that belongs at the foot of its target — a presence dot
+     * under an avatar, for instance. The horizontal side follows the reading
+     * direction and is not configurable. It does nothing without `overlay`.
+     */
+    overlayPosition?: BadgeOverlayPosition;
+    /**
+     * Draws a 2px ring in the colour of the surface behind the badge
+     * (`--vectis-color-surface`, overridable per subtree), which detaches it from a
+     * busy target such as a picture.
+     */
+    bordered?: boolean;
+}
+type __VLS_Slots = {
+    /**
+     * The element the badge belongs to. Without it the badge stands on its own; with
+     * it, the badge is placed beside the element, or in its corner under `overlay`.
+     */
+    default?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<BadgeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+    tone: BadgeTone;
+    icon: IconSource;
+    color: string;
+    count: number;
+    overlayPosition: BadgeOverlayPosition;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VBadge/VBadge.js

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

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

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

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

@@ -0,0 +1,40 @@
+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";
+//#region src/components/VBadge/VBadge.vue?vue&type=script&setup=true&lang.ts
+var _ = ["data-overlay", "data-overlay-position"], v = /*@__PURE__*/ l({
+	__name: "VBadge",
+	props: {
+		tone: { default: "accent" },
+		color: { default: void 0 },
+		count: { default: void 0 },
+		icon: { default: void 0 },
+		dot: { type: Boolean },
+		overlay: { type: Boolean },
+		overlayPosition: { default: "top" },
+		bordered: { type: Boolean }
+	},
+	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", {
+			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));
+	}
+});
+//#endregion
+export { v 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

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

package/dist/components/VBreadcrumb/VBreadcrumb.css

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

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

@@ -0,0 +1,68 @@
+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;
+    /**
+     * Where the segment leads. It is also the value compared with `currentPath` to
+     * decide which segment is the current page.
+     */
+    href: string;
+    /**
+     * An icon placed before the label: a Material Symbols Rounded name, an icon URL,
+     * or an explicit render (`{ src: '/logo.svg' }`, `{ component }`…).
+     */
+    iconStart?: IconSource;
+}
+interface BreadcrumbProps {
+    /** The segments of the trail, ordered from the most general down to the deepest. */
+    items: BreadcrumbItem[];
+    /**
+     * The name screen readers announce for this navigation. It falls back to the
+     * wording of the DS dictionary, in the current language.
+     */
+    label?: string;
+    /**
+     * The address of the page being displayed. The segment whose `href` matches it is
+     * the current one; a trailing slash on either side makes no difference.
+     */
+    currentPath?: string;
+    /**
+     * The icon drawn between two segments: an icon name, or an explicit render,
+     * exactly like `iconStart`.
+     */
+    separator?: 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
+     * alone. Below 3 there would be nothing left to fold, so 3 is the effective
+     * minimum.
+     */
+    maxItems?: number;
+    /**
+     * The name screen readers announce for the "…" button. It falls back to the
+     * wording of the DS dictionary.
+     */
+    ellipsisLabel?: string;
+}
+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;
+    maxItems: number;
+    ellipsisLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VBreadcrumb/VBreadcrumb.js

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

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

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

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

@@ -0,0 +1,70 @@
+import { useMessages as e } from "../../i18n/state.js";
+import t from "../VIcon/VIcon.js";
+import { iconProps as n } from "../VIcon/iconProps.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 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";
+//#region src/components/VBreadcrumb/VBreadcrumb.vue?vue&type=script&setup=true&lang.ts
+var w = ["aria-label"], T = { class: "v-breadcrumb-list" }, E = {
+	key: 0,
+	class: "v-breadcrumb-item v-breadcrumb-ellipsis"
+}, D = { class: "v-breadcrumb-item" }, O = ["href", "aria-current"], k = /*@__PURE__*/ _({
+	__name: "VBreadcrumb",
+	props: {
+		items: {},
+		label: { default: void 0 },
+		currentPath: { default: void 0 },
+		separator: { default: () => i },
+		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);
+		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 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", {
+			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: "" }, {
+			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, {
+				key: e.href,
+				href: e.href,
+				label: e.label,
+				"icon-start": e.iconStart
+			}, 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", {
+			class: "v-breadcrumb-link",
+			href: e.href,
+			"aria-current": N(e) ? "page" : void 0
+		}, [e.iconStart ? (y(), d(t, 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));
+	}
+});
+//#endregion
+export { k as default };
+
+//# sourceMappingURL=VBreadcrumb.vue_vue_type_script_setup_true_lang.js.map

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

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

package/dist/components/VButton/VButton.css

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

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

@@ -0,0 +1,88 @@
+import { ButtonHTMLAttributes } from 'vue';
+import { IconSource } from '../VIcon/types.js';
+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.
+     */
+    variant?: 'solid' | 'outline' | 'ghost' | 'soft';
+    /**
+     * 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.
+     */
+    tone?: 'accent' | 'neutral' | 'danger';
+    /**
+     * 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.
+     */
+    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. */
+    compact?: 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
+     * followed.
+     */
+    href?: string;
+    /** The native type of the button. It is ignored as soon as `href` makes it a link. */
+    type?: ButtonHTMLAttributes['type'];
+    /**
+     * Makes the button unusable: it stops responding, leaves the tab order and greys
+     * out through the colour tokens.
+     */
+    disabled?: boolean;
+    /**
+     * Shows a spinner, disables the button and announces it as busy. The spinner takes
+     * the place of the start slot (`iconStart` / `#start`), so an icon and a spinner
+     * are never displayed side by side.
+     */
+    loading?: boolean;
+    /** An icon before the label. The `#start` slot replaces it when both are given. */
+    iconStart?: IconSource;
+    /** An icon after the label. The `#end` slot replaces it when both are given. */
+    iconEnd?: IconSource;
+    /**
+     * Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis).
+     * It has no effect on the `#start`/`#end` slots, whose icons the consumer builds.
+     */
+    iconFilled?: boolean;
+}
+type __VLS_Slots = {
+    /** The label of the button. */
+    default(): unknown;
+    /**
+     * Content placed before the label, usually an icon. Mark it `aria-hidden` when it
+     * only repeats what the label already says.
+     */
+    start?(): unknown;
+    /** Content placed after the label. */
+    end?(): unknown;
+};
+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";
+    type: "button" | "submit" | "reset";
+    variant: "solid" | "outline" | "ghost" | "soft";
+    tone: "accent" | "neutral" | "danger";
+    elevated: boolean;
+    compact: boolean;
+    href: string;
+    disabled: boolean;
+    iconStart: IconSource;
+    iconEnd: IconSource;
+    iconFilled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VButton/VButton.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VButton.js","names":[],"sources":["../../../src/components/VButton/VButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y — the component's ONLY behavioural JS, and it exists entirely for\n// accessibility: an <a> has no native `disabled`, so the inert-link bridge has to\n// reproduce it by hand.\n/**\n * The button that triggers an action, and the reference from which the tone and\n * variant tables of every other coloured component are taken.\n *\n * It renders a native <button>, or an <a> as soon as it is given an `href`, so\n * focus, keyboard activation and disabling all come from the browser. Its one piece\n * of behavioural code is the inert link: a link has no `disabled` attribute of its\n * own, so a disabled or loading <a> has its address removed — it can then be\n * neither focused nor followed — receives `aria-disabled` for assistive technology,\n * and has the click handlers it was given filtered out. Together these reproduce\n * the complete inertness that a <button disabled> gets for free.\n */\nimport { computed, useAttrs } from 'vue'\nimport type { ButtonHTMLAttributes } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\ninterface ButtonProps {\n  /**\n   * How much visual weight the button carries: `solid` is filled with the tone,\n   * `soft` uses a tinted background, `outline` keeps only a border, and `ghost`\n   * shows nothing until it is hovered.\n   */\n  variant?: 'solid' | 'outline' | 'ghost' | 'soft'\n  /**\n   * What the action means: `accent` for the ordinary one, `neutral` for a secondary\n   * one, `danger` for one that destroys something. On a button a tone is an\n   * intention, which is why states such as success or warning are not offered here.\n   */\n  tone?: 'accent' | 'neutral' | 'danger'\n  /**\n   * Raises the button off the page: a shadow that grows on hover and settles back\n   * when pressed, whatever the variant. On `ghost` and `outline`, which have no\n   * background of their own, it also paints the raised surface — in the dark theme\n   * a shadow lying straight on the page background has nothing casting it.\n   */\n  elevated?: boolean\n  /** The height of the button, taken from the size scale shared by every control. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Takes 4px off the height, leaving the padding, the text and the icons as they are. */\n  compact?: boolean\n  /**\n   * Turns the button into an `<a>` pointing at this address. A disabled or loading\n   * link becomes inert: the address is dropped, so it can be neither focused nor\n   * followed.\n   */\n  href?: string\n  /** The native type of the button. It is ignored as soon as `href` makes it a link. */\n  type?: ButtonHTMLAttributes['type']\n  /**\n   * Makes the button unusable: it stops responding, leaves the tab order and greys\n   * out through the colour tokens.\n   */\n  disabled?: boolean\n  /**\n   * Shows a spinner, disables the button and announces it as busy. The spinner takes\n   * the place of the start slot (`iconStart` / `#start`), so an icon and a spinner\n   * are never displayed side by side.\n   */\n  loading?: boolean\n  /** An icon before the label. The `#start` slot replaces it when both are given. */\n  iconStart?: IconSource\n  /** An icon after the label. The `#end` slot replaces it when both are given. */\n  iconEnd?: IconSource\n  /**\n   * Renders `iconStart` and `iconEnd` in their filled form (the font's `FILL` axis).\n   * It has no effect on the `#start`/`#end` slots, whose icons the consumer builds.\n   */\n  iconFilled?: boolean\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  variant: 'solid',\n  tone: 'accent',\n  elevated: false,\n  size: 'md',\n  compact: false,\n  href: undefined,\n  type: 'button',\n  disabled: false,\n  loading: false,\n  iconStart: undefined,\n  iconEnd: undefined,\n  iconFilled: false,\n})\n\ndefineSlots<{\n  /** The label of the button. */\n  default(): unknown\n  /**\n   * Content placed before the label, usually an icon. Mark it `aria-hidden` when it\n   * only repeats what the label already says.\n   */\n  start?(): unknown\n  /** Content placed after the label. */\n  end?(): unknown\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\nconst isLink = computed(() => props.href !== undefined)\nconst isInert = computed(() => props.disabled || props.loading)\nconst isInertLink = computed(() => isLink.value && isInert.value)\nconst passedAttrs = computed(() => {\n  if (!isInertLink.value) return attrs\n  const rest = { ...(attrs as Record<string, unknown>) }\n  delete rest.onClick\n  return rest\n})\n</script>\n\n<template>\n  <component\n    :is=\"isLink ? 'a' : 'button'\"\n    v-bind=\"passedAttrs\"\n    class=\"v-button v-control v-tone\"\n    :href=\"isLink && !isInert ? href : undefined\"\n    :type=\"isLink ? undefined : type\"\n    :disabled=\"isLink ? undefined : disabled || loading\"\n    :aria-disabled=\"isInertLink ? 'true' : undefined\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone\"\n    :data-elevated=\"elevated ? '' : undefined\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-loading=\"loading ? '' : undefined\"\n    :aria-busy=\"loading || undefined\"\n  >\n    <!-- The button already carries aria-busy, so the spinner is hidden from\n         assistive technology: its own role=\"status\" would announce the same state a\n         second time -->\n    <span v-if=\"loading\" class=\"v-button-spinner\" aria-hidden=\"true\">\n      <VSpinner />\n    </span>\n    <slot v-else name=\"start\">\n      <VIcon v-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" :filled=\"iconFilled\" />\n    </slot>\n    <slot />\n    <slot name=\"end\">\n      <VIcon v-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" :filled=\"iconFilled\" />\n    </slot>\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--control-gap);\n    height: var(--control-height);\n    padding-inline: var(--control-padding-inline);\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-interactive);\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      background-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-button:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* The tone table itself lives in styles/tones.css, on the `v-tone` class in the\n     vectis.tokens layer, and is shared with VChip and VToast. VButton overrides not\n     a single one of its values: it is the reference those values were written for. */\n\n  .v-button[data-variant='solid'] {\n    background: var(--tone-bg-solid);\n    color: var(--tone-text-solid);\n  }\n\n  .v-button[data-variant='solid']:hover:not(:disabled, [aria-disabled='true']) {\n    background: var(--tone-bg-solid-hover);\n  }\n\n  .v-button[data-variant='solid']:active:not(:disabled, [aria-disabled='true']) {\n    background: var(--tone-bg-solid-active);\n  }\n\n  .v-button[data-variant='outline'] {\n    background: transparent;\n    color: var(--tone-text-tinted);\n    border-color: var(--tone-border-soft);\n  }\n\n  .v-button[data-variant='ghost'] {\n    background: transparent;\n    color: var(--tone-text-tinted);\n  }\n\n  /* The `:not([data-elevated])` is what makes these rules DISJOINT from the\n     elevation rules below, rather than merely less specific than them. Nothing then\n     arbitrates the background of a raised ghost by a one-step specificity margin,\n     so a declaration added to either set later cannot silently leak into the other\n     case. */\n  .v-button[data-variant='outline']:not([data-elevated]):hover:not(\n      :disabled,\n      [aria-disabled='true']\n    ),\n  .v-button[data-variant='ghost']:not([data-elevated]):hover:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: var(--tone-bg-soft);\n  }\n\n  .v-button[data-variant='outline']:not([data-elevated]):active:not(\n      :disabled,\n      [aria-disabled='true']\n    ),\n  .v-button[data-variant='ghost']:not([data-elevated]):active:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%);\n  }\n\n  .v-button[data-variant='soft'] {\n    background: var(--tone-bg-soft);\n    color: var(--tone-text-tinted);\n  }\n\n  .v-button[data-variant='soft']:hover:not(:disabled, [aria-disabled='true']) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 8%);\n  }\n\n  .v-button[data-variant='soft']:active:not(:disabled, [aria-disabled='true']) {\n    background: color-mix(in oklab, var(--tone-bg-soft), var(--tone-text-tinted) 14%);\n  }\n\n  /* Elevation is ORTHOGONAL to the variant: the shadow scale applies to all four of\n     them, while the raised surface is only painted on the two that have no\n     background of their own. The `:is()` here is not decoration — it is what gives\n     these rules a specificity of (0,3,0), beating the (0,2,0) of the ghost and\n     outline bases without depending on the order the rules end up in. */\n  .v-button[data-elevated] {\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  .v-button[data-elevated]:is([data-variant='ghost'], [data-variant='outline']) {\n    background: var(--vectis-color-surface-raised);\n  }\n\n  .v-button[data-elevated]:hover:not(:disabled, [aria-disabled='true']) {\n    box-shadow: var(--vectis-shadow-md);\n  }\n\n  .v-button[data-elevated]:is([data-variant='ghost'], [data-variant='outline']):hover:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: color-mix(in oklab, var(--vectis-color-surface-raised), var(--tone-text-tinted) 8%);\n  }\n\n  .v-button[data-elevated]:active:not(:disabled, [aria-disabled='true']) {\n    box-shadow: var(--vectis-shadow-sm);\n  }\n\n  .v-button[data-elevated]:is([data-variant='ghost'], [data-variant='outline']):active:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-surface-raised),\n      var(--tone-text-tinted) 12%\n    );\n  }\n\n  .v-button:is(:disabled, [aria-disabled='true']) {\n    cursor: not-allowed;\n  }\n\n  .v-button[data-loading] {\n    opacity: 0.5;\n  }\n\n  /* A disabled button that is not loading greys out through the colour tokens and\n     never through opacity. These three rules are (0,4,0), so they already beat the\n     (0,3,0) of the raised background whatever the order they are read in. */\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading]):is(\n      [data-variant='solid'],\n      [data-variant='soft']\n    ) {\n    background: var(--vectis-color-surface-muted);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading])[data-variant='outline'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    border-color: var(--vectis-color-border);\n  }\n\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading])[data-variant='ghost'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /* The shadow needs a rule of its OWN. No variant declares a shadow, so none of the\n     three rules above cancels one, and a disabled raised ghost would otherwise go on\n     casting its shadow-sm. */\n  .v-button:is(:disabled, [aria-disabled='true']):not([data-loading])[data-elevated] {\n    box-shadow: none;\n  }\n\n  .v-button-spinner {\n    /* A box exactly the size of an icon, since the spinner takes the place of\n       iconStart: the button's width does not jump when it starts loading. The\n       font-size is set to that same size so that VSpinner's own box, which measures\n       1em, coincides with this one — VSpinner then draws its ring inside it at the\n       proportion Material Symbols gives `progress_activity`, which is what makes the\n       spinner and the icon it replaces read at the same size. */\n    width: var(--vectis-icon-size);\n    height: var(--vectis-icon-size);\n    font-size: var(--vectis-icon-size);\n    flex: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-button {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,86 @@
+import e from "../VIcon/VIcon.js";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import n from "../VSpinner/VSpinner.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createVNode as s, defineComponent as c, mergeProps as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, unref as p, useAttrs as m, withCtx as h } from "vue";
+//#region src/components/VButton/VButton.vue?vue&type=script&setup=true&lang.ts
+var g = {
+	key: 0,
+	class: "v-button-spinner",
+	"aria-hidden": "true"
+}, _ = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	__name: "VButton",
+	props: {
+		variant: { default: "solid" },
+		tone: { default: "accent" },
+		elevated: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		href: { default: void 0 },
+		type: { default: "button" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		iconStart: { default: void 0 },
+		iconEnd: { default: void 0 },
+		iconFilled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(c) {
+		let _ = c, v = m(), y = r(() => _.href !== void 0), b = r(() => _.disabled || _.loading), x = r(() => y.value && b.value), S = r(() => {
+			if (!x.value) return v;
+			let e = { ...v };
+			return delete e.onClick, e;
+		});
+		return (r, m) => (u(), i(f(y.value ? "a" : "button"), l(S.value, {
+			class: "v-button v-control v-tone",
+			href: y.value && !b.value ? c.href : void 0,
+			type: y.value ? void 0 : c.type,
+			disabled: y.value ? void 0 : c.disabled || c.loading,
+			"aria-disabled": x.value ? "true" : void 0,
+			"data-variant": c.variant,
+			"data-tone": c.tone,
+			"data-elevated": c.elevated ? "" : void 0,
+			"data-size": c.size,
+			"data-compact": c.compact ? "" : void 0,
+			"data-loading": c.loading ? "" : void 0,
+			"aria-busy": c.loading || void 0
+		}), {
+			default: h(() => [
+				c.loading ? (u(), o("span", g, [s(n)])) : d(r.$slots, "start", {}, () => [c.iconStart ? (u(), i(e, l({ key: 0 }, p(t)(c.iconStart), { filled: c.iconFilled }), null, 16, ["filled"])) : a("", !0)], void 0, 1),
+				d(r.$slots, "default"),
+				d(r.$slots, "end", {}, () => [c.iconEnd ? (u(), i(e, l({ key: 0 }, p(t)(c.iconEnd), { filled: c.iconFilled }), null, 16, ["filled"])) : a("", !0)])
+			]),
+			_: 3
+		}, 16, [
+			"href",
+			"type",
+			"disabled",
+			"aria-disabled",
+			"data-variant",
+			"data-tone",
+			"data-elevated",
+			"data-size",
+			"data-compact",
+			"data-loading",
+			"aria-busy"
+		]));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=VButton.vue_vue_type_script_setup_true_lang.js.map