vectis-ui 0.12.0 → 0.13.0

package/dist/components/VHotkeys/VHotkeys.js.map

@@ -1 +1 @@
-{"version":3,"file":"VHotkeys.js","names":[],"sources":["../../../src/components/VHotkeys/VHotkeys.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Render platform-specific shortcut glyphs. Detect the platform after mount for SSR; attach\n * keyboard listeners only when listen is enabled.\n */\n\nimport { computed, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue'\n\nimport {\n  DEFAULT_PLATFORM,\n  capLabel,\n  detectPlatform,\n  isEditableTarget,\n  matchesEvent,\n  parseHotkeys,\n  resolveKeys,\n} from './platform'\nimport type { HotkeysPlatform } from './platform'\nimport { useMessages } from '../../i18n/state'\n\n/** How a key cap is drawn. */\nexport type HotkeysVariant = 'soft' | 'outline' | 'elevated'\n/** The size of the caps, from the two smallest steps of the control scale. */\nexport type HotkeysSize = 'xs' | 'sm'\n\ninterface HotkeysProps {\n  /** The combination, `+`-separated: `mod+k`, `ctrl+shift+p`, `alt+enter`, `esc`. */\n  keys: string\n  /** How a key cap is drawn: tinted (`soft`), outlined (`outline`), or raised off the page (`elevated`). */\n  variant?: HotkeysVariant\n  /**\n   * Draws the whole combination as a SINGLE key rather than as several: the decoration moves\n   * from each cap to the shortcut as a whole, so the separator ends up inside the key instead\n   * of between two of them.\n   */\n  attached?: boolean\n  /** The size of the caps, `xs` by default: a shortcut is chrome beside other text. */\n  size?: HotkeysSize\n  /** Takes 4px off the height, leaving the padding and the text as they are. */\n  compact?: boolean\n  /**\n   * Forces the keyboard's OS instead of detecting it, for a deterministic\n   * rendering (stories, tests, a table showing all three) or a host that already\n   * knows (Electron, Tauri, a server reading the User-Agent).\n   */\n  platform?: HotkeysPlatform\n  /**\n   * What is written between two caps. An empty string gives the macOS convention,\n   * where the symbols simply follow one another: ⇧⌘K.\n   */\n  separator?: string\n  /**\n   * Actually listens for the combination and reports it. It is off by default: a\n   * component whose job is to display a shortcut must not capture the page's keyboard\n   * without being asked.\n   */\n  listen?: boolean\n  /**\n   * While listening, lets the browser go on doing whatever the combination normally does. Left\n   * out, the browser is stopped, which is the entire point of taking over something like ⌘K.\n   */\n  allowDefault?: boolean\n  /**\n   * While listening, fires even when the reader is typing in a field. It is off by\n   * default, so a shortcut cannot fire in the middle of a sentence.\n   */\n  allowInInput?: boolean\n  /**\n   * What screen readers announce, \"Keyboard shortcut: Ctrl + K\" by default, from the\n   * design system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<HotkeysProps>(), {\n  variant: 'soft',\n  attached: false,\n  size: 'xs',\n  compact: false,\n  platform: undefined,\n  separator: '+',\n  listen: false,\n  allowDefault: false,\n  allowInInput: false,\n  label: undefined,\n})\n\nconst emit = defineEmits<{\n  /** The combination was pressed. It is only ever emitted while `listen` is on. */\n  trigger: [event: KeyboardEvent]\n}>()\n\nconst m = useMessages()\n\n// @ssr\n/*\n * The value is held per instance and not at module level. A shared one, having already resolved\n * to macOS, would make a component hydrated later; a Nuxt island, a route loaded on demand;\n * render ⌘ on its very first client pass where the server had written Ctrl.\n */\nconst detected = ref<HotkeysPlatform>(DEFAULT_PLATFORM)\nonMounted(() => {\n  detected.value = detectPlatform()\n  if (props.listen) attach()\n})\n\nconst platform = computed(() => props.platform ?? detected.value)\nconst tokens = computed(() => parseHotkeys(props.keys))\nconst resolved = computed(() => resolveKeys(tokens.value, platform.value))\n\n// @a11y\n/*\n * On SCREEN the symbol wins, ⌘ being what is engraved on the key; in the ANNOUNCED NAME the\n * word does, because that symbol is either passed over in silence or read out as \"place of\n * interest sign\", depending on the screen reader. Inverting the preference is what lets one\n * table serve both.\n */\nconst caps = computed(() =>\n  resolved.value.map(\n    (key) => key.glyph ?? (key.word ? m.value.hotkeys[key.word] : capLabel(key.token)),\n  ),\n)\nconst spoken = computed(() =>\n  resolved.value\n    .map((key) => (key.word ? m.value.hotkeys[key.word] : (key.glyph ?? capLabel(key.token))))\n    .join(' + '),\n)\nconst resolvedLabel = computed(() => props.label ?? m.value.hotkeys.label(spoken.value))\n\n// @core\n/*\n * It is called `listening` and not `attached`. Every top-level binding of a `<script setup>` is\n * exposed to the template, where it SHADOWS the prop of the same name: called `attached`, this\n * flag would silently be what the template read instead of the prop, and the joined rendering\n * would follow whether a listener happened to be installed.\n */\nlet listening = false\n\nfunction attach() {\n  if (listening || typeof document === 'undefined') return\n  document.addEventListener('keydown', onKeydown)\n  listening = true\n}\n\nfunction detach() {\n  if (!listening) return\n  document.removeEventListener('keydown', onKeydown)\n  listening = false\n}\n\n// @keyboard @core\nfunction onKeydown(event: KeyboardEvent) {\n  /* A held-down combination repeats at the system's auto-repeat rate, which would\n     reopen the consumer's palette a dozen times a second; only the first press\n     counts. */\n  if (!props.listen || event.repeat) return\n  /* A key another handler has already dealt with (a menu's arrow, a field's Enter) is not\n     a shortcut any more. And the Enter that confirms an input method's candidate is the\n     end of a word being typed, not a command. */\n  if (event.defaultPrevented || event.isComposing) return\n  /* The document sees a key typed inside a shadow root as coming from the shadow HOST, a\n     plain element: the field itself is the first entry of the composed path. */\n  if (!props.allowInInput && isEditableTarget(event.composedPath()[0] ?? event.target)) return\n  if (!matchesEvent(event, tokens.value, platform.value)) return\n  /*\n   * Escape is never cancelled. A cancelled Escape is not turned into a close request, so every\n   * open dialog and light-dismiss popover on the page would stop closing on it.\n   */\n  if (!props.allowDefault && !tokens.value.includes('esc')) event.preventDefault()\n  emit('trigger', event)\n}\n\n/* Attaching the listener once and simply returning early inside it would be shorter to\n   write, but a documentation page listing fifty shortcuts would then install fifty\n   document listeners that do nothing. Following the prop is what keeps that at zero. */\nwatch(\n  () => props.listen,\n  (on) => (on ? attach() : detach()),\n)\nonBeforeUnmount(detach)\n/* A view kept alive by <KeepAlive> is never unmounted, only put aside: its shortcut must\n   stop with it, or a hidden page would go on answering the keyboard. */\nonDeactivated(detach)\nonActivated(() => {\n  if (props.listen) attach()\n})\n</script>\n\n<template>\n  <kbd\n    class=\"v-hotkeys v-control\"\n    :data-variant=\"variant\"\n    :data-attached=\"attached ? '' : undefined\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-platform=\"platform\"\n  >\n    <span class=\"v-hotkeys-keys\" aria-hidden=\"true\">\n      <template v-for=\"(cap, index) in caps\" :key=\"index\">\n        <span v-if=\"index > 0 && separator\" class=\"v-hotkeys-separator\">{{ separator }}</span>\n        <kbd class=\"v-hotkeys-key\">{{ cap }}</kbd>\n      </template>\n    </span>\n    <span class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n  </kbd>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The browser gives a `<kbd>` a monospaced family and a smaller size, and that reduction\n   * COMPOUNDS when one `<kbd>` sits inside another, as it does here: the caps would come out at\n   * roughly 69% of the surrounding text. Both are reset here and again on the caps themselves,\n   * and deleting either line silently miniaturizes the whole component.\n   */\n  .v-hotkeys {\n    display: inline-flex;\n    align-items: center;\n    /* Centres the content in the cases where the minimum width wins over it: a\n       single-character combination drawn as one key. */\n    justify-content: center;\n    vertical-align: middle;\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    --hotkeys-pad: var(--control-padding-inline);\n  }\n\n  /* The size comes from the shared class set on the ROOT: its variables inherit down,\n     and it is the CAPS that read the height from them. The scale itself holds five\n     steps; the component's type restricts it to the two smallest, a key cap being\n     smaller than a control. */\n  .v-hotkeys-keys {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--control-gap);\n  }\n\n  .v-hotkeys-key {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  /*\n   * Deriving the whole cap from the inherited colour is what makes the component\n   * ground-independent, and it is the same reason there is no tone table at all. They set\n   * VARIABLES rather than declaring the look straight away, because that look has two possible\n   * carriers (see below).\n   */\n  .v-hotkeys[data-variant='soft'] {\n    --hotkeys-bg: color-mix(in oklab, currentcolor, transparent 90%);\n    --hotkeys-border: transparent;\n    --hotkeys-shadow: none;\n  }\n\n  .v-hotkeys[data-variant='outline'] {\n    --hotkeys-bg: transparent;\n    --hotkeys-border: color-mix(in oklab, currentcolor, transparent 70%);\n    --hotkeys-shadow: none;\n  }\n\n  /* Lifted rather than settled into its ground, so the tint is the lighter of the two\n     and the shadow does the work. That shadow is the one paint left that is not\n     derived: it is a cast rather than a colour, so on a dark ground it simply has\n     nothing to fall on, and the tint is what still separates the cap there. */\n  .v-hotkeys[data-variant='elevated'] {\n    --hotkeys-bg: color-mix(in oklab, currentcolor, transparent 94%);\n    --hotkeys-border: transparent;\n    --hotkeys-shadow: var(--vectis-shadow-sm);\n  }\n\n  /*\n   * When one key holds the whole combination, its ends take the same breathing room as the gaps\n   * inside it, which gives the key a single rhythm. The usual control padding is sized to wrap\n   * ONE short label; around three runs of text already spaced from one another, it reads as\n   * slack at the edges.\n   */\n  .v-hotkeys[data-attached] {\n    --hotkeys-pad: var(--control-gap);\n  }\n\n  /*\n   * THE key recipe, written once for its two possible carriers: every cap by default, and the\n   * whole shortcut alone when it is drawn as a single key; which is exactly what puts the\n   * separator inside the key rather than between two of them. Written out twice, the two\n   * renderings would drift apart at the first token change.\n   */\n  .v-hotkeys[data-attached],\n  .v-hotkeys:not([data-attached]) .v-hotkeys-key {\n    height: var(--control-height);\n    /* A minimum equal to the height makes a single-character key read as a square\n       rather than as a sliver. */\n    min-inline-size: var(--control-height);\n    padding-inline: var(--hotkeys-pad);\n    border: 1px solid var(--hotkeys-border);\n    border-radius: var(--vectis-radius-interactive);\n    background: var(--hotkeys-bg);\n    box-shadow: var(--hotkeys-shadow);\n  }\n\n  /* Softened rather than full strength: the separator is punctuation between two\n     caps, and at the same weight as them it competes with what it separates. */\n  .v-hotkeys-separator {\n    color: color-mix(in oklab, currentcolor, transparent 40%);\n  }\n\n  /*\n   * Forced colours flatten the tint and drop the shadow, which is all a soft or an elevated cap\n   * is made of. Every variant takes the edge of the outlined one, in the system text colour.\n   */\n  @media (forced-colors: active) {\n    .v-hotkeys[data-variant] {\n      --hotkeys-border: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VHotkeys.js","names":[],"sources":["../../../src/components/VHotkeys/VHotkeys.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Render platform-specific shortcut glyphs. Detect the platform after mount for SSR; attach\n * keyboard listeners only when listen is enabled.\n */\n\nimport { computed, onMounted, ref } from 'vue'\n\nimport { DEFAULT_PLATFORM, capLabel, detectPlatform, parseHotkeys, resolveKeys } from './platform'\nimport type { HotkeysPlatform } from './platform'\nimport { useHotkeyListener } from '../../composables/useHotkeyListener'\nimport { useMessages } from '../../i18n/state'\n\n/** How a key cap is drawn. */\nexport type HotkeysVariant = 'soft' | 'outline' | 'elevated'\n/** The size of the caps, from the two smallest steps of the control scale. */\nexport type HotkeysSize = 'xs' | 'sm'\n\ninterface HotkeysProps {\n  /** The combination, `+`-separated: `mod+k`, `ctrl+shift+p`, `alt+enter`, `esc`. */\n  keys: string\n  /** How a key cap is drawn: tinted (`soft`), outlined (`outline`), or raised off the page (`elevated`). */\n  variant?: HotkeysVariant\n  /**\n   * Draws the whole combination as a SINGLE key rather than as several: the decoration moves\n   * from each cap to the shortcut as a whole, so the separator ends up inside the key instead\n   * of between two of them.\n   */\n  attached?: boolean\n  /** The size of the caps, `xs` by default: a shortcut is chrome beside other text. */\n  size?: HotkeysSize\n  /** Takes 4px off the height, leaving the padding and the text as they are. */\n  compact?: boolean\n  /**\n   * Forces the keyboard's OS instead of detecting it, for a deterministic\n   * rendering (stories, tests, a table showing all three) or a host that already\n   * knows (Electron, Tauri, a server reading the User-Agent).\n   */\n  platform?: HotkeysPlatform\n  /**\n   * What is written between two caps. An empty string gives the macOS convention,\n   * where the symbols simply follow one another: ⇧⌘K.\n   */\n  separator?: string\n  /**\n   * Actually listens for the combination and reports it. It is off by default: a\n   * component whose job is to display a shortcut must not capture the page's keyboard\n   * without being asked.\n   */\n  listen?: boolean\n  /**\n   * While listening, lets the browser go on doing whatever the combination normally does. Left\n   * out, the browser is stopped, which is the entire point of taking over something like ⌘K.\n   */\n  allowDefault?: boolean\n  /**\n   * While listening, fires even when the reader is typing in a field. It is off by\n   * default, so a shortcut cannot fire in the middle of a sentence.\n   */\n  allowInInput?: boolean\n  /**\n   * What screen readers announce, \"Keyboard shortcut: Ctrl + K\" by default, from the\n   * design system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<HotkeysProps>(), {\n  variant: 'soft',\n  attached: false,\n  size: 'xs',\n  compact: false,\n  platform: undefined,\n  separator: '+',\n  listen: false,\n  allowDefault: false,\n  allowInInput: false,\n  label: undefined,\n})\n\nconst emit = defineEmits<{\n  /** The combination was pressed. It is only ever emitted while `listen` is on. */\n  trigger: [event: KeyboardEvent]\n}>()\n\nconst m = useMessages()\n\n// @ssr\n/*\n * The value is held per instance and not at module level. A shared one, having already resolved\n * to macOS, would make a component hydrated later; a Nuxt island, a route loaded on demand;\n * render ⌘ on its very first client pass where the server had written Ctrl.\n */\nconst detected = ref<HotkeysPlatform>(DEFAULT_PLATFORM)\nonMounted(() => {\n  detected.value = detectPlatform()\n})\n\nconst platform = computed(() => props.platform ?? detected.value)\nconst tokens = computed(() => parseHotkeys(props.keys))\nconst resolved = computed(() => resolveKeys(tokens.value, platform.value))\n\n// @a11y\n/*\n * On SCREEN the symbol wins, ⌘ being what is engraved on the key; in the ANNOUNCED NAME the\n * word does, because that symbol is either passed over in silence or read out as \"place of\n * interest sign\", depending on the screen reader. Inverting the preference is what lets one\n * table serve both.\n */\nconst caps = computed(() =>\n  resolved.value.map(\n    (key) => key.glyph ?? (key.word ? m.value.hotkeys[key.word] : capLabel(key.token)),\n  ),\n)\nconst spoken = computed(() =>\n  resolved.value\n    .map((key) => (key.word ? m.value.hotkeys[key.word] : (key.glyph ?? capLabel(key.token))))\n    .join(' + '),\n)\nconst resolvedLabel = computed(() => props.label ?? m.value.hotkeys.label(spoken.value))\n\nuseHotkeyListener({\n  tokens: () => tokens.value,\n  platform: () => platform.value,\n  enabled: () => props.listen,\n  allowDefault: () => props.allowDefault,\n  allowInInput: () => props.allowInInput,\n  onTrigger: (event) => emit('trigger', event),\n})\n</script>\n\n<template>\n  <kbd\n    class=\"v-hotkeys v-control\"\n    :data-variant=\"variant\"\n    :data-attached=\"attached ? '' : undefined\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-platform=\"platform\"\n  >\n    <span class=\"v-hotkeys-keys\" aria-hidden=\"true\">\n      <template v-for=\"(cap, index) in caps\" :key=\"index\">\n        <span v-if=\"index > 0 && separator\" class=\"v-hotkeys-separator\">{{ separator }}</span>\n        <kbd class=\"v-hotkeys-key\">{{ cap }}</kbd>\n      </template>\n    </span>\n    <span class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n  </kbd>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The browser gives a `<kbd>` a monospaced family and a smaller size, and that reduction\n   * COMPOUNDS when one `<kbd>` sits inside another, as it does here: the caps would come out at\n   * roughly 69% of the surrounding text. Both are reset here and again on the caps themselves,\n   * and deleting either line silently miniaturizes the whole component.\n   */\n  .v-hotkeys {\n    display: inline-flex;\n    align-items: center;\n    /* Centres the content in the cases where the minimum width wins over it: a\n       single-character combination drawn as one key. */\n    justify-content: center;\n    vertical-align: middle;\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n  }\n\n  /* The size comes from the shared class set on the ROOT: its variables inherit down,\n     and it is the CAPS that read the height from them. The scale itself holds five\n     steps; the component's type restricts it to the two smallest, a key cap being\n     smaller than a control. */\n  .v-hotkeys-keys {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--control-gap);\n  }\n\n  .v-hotkeys-key {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  /*\n   * Deriving the whole cap from the inherited colour is what makes the component\n   * ground-independent, and it is the same reason there is no tone table at all. They set\n   * VARIABLES rather than declaring the look straight away, because that look has two possible\n   * carriers (see below).\n   */\n  .v-hotkeys[data-variant='soft'] {\n    --hotkeys-bg: color-mix(in oklab, currentcolor, transparent 90%);\n    --hotkeys-border: transparent;\n    --hotkeys-shadow: none;\n  }\n\n  .v-hotkeys[data-variant='outline'] {\n    --hotkeys-bg: transparent;\n    --hotkeys-border: color-mix(in oklab, currentcolor, transparent 70%);\n    --hotkeys-shadow: none;\n  }\n\n  /* Lifted rather than settled into its ground, so the tint is the lighter of the two\n     and the shadow does the work. That shadow is the one paint left that is not\n     derived: it is a cast rather than a colour, so on a dark ground it simply has\n     nothing to fall on, and the tint is what still separates the cap there. */\n  .v-hotkeys[data-variant='elevated'] {\n    --hotkeys-bg: color-mix(in oklab, currentcolor, transparent 94%);\n    --hotkeys-border: transparent;\n    --hotkeys-shadow: var(--vectis-shadow-sm);\n  }\n\n  /*\n   * THE key recipe, written once for its two possible carriers: every cap by default, and the\n   * whole shortcut alone when it is drawn as a single key; which is exactly what puts the\n   * separator inside the key rather than between two of them. Written out twice, the two\n   * renderings would drift apart at the first token change.\n   */\n  .v-hotkeys[data-attached],\n  .v-hotkeys:not([data-attached]) .v-hotkeys-key {\n    height: var(--control-height);\n    /* A minimum equal to the height makes a single-character key read as a square\n       rather than as a sliver. */\n    min-inline-size: var(--control-height);\n    padding-inline: var(--control-padding-inline);\n    border: 1px solid var(--hotkeys-border);\n    border-radius: var(--vectis-radius-interactive);\n    background: var(--hotkeys-bg);\n    box-shadow: var(--hotkeys-shadow);\n  }\n\n  /* Softened rather than full strength: the separator is punctuation between two\n     caps, and at the same weight as them it competes with what it separates. */\n  .v-hotkeys-separator {\n    color: color-mix(in oklab, currentcolor, transparent 40%);\n  }\n\n  /*\n   * Forced colours flatten the tint and drop the shadow, which is all a soft or an elevated cap\n   * is made of. Every variant takes the edge of the outlined one, in the system text colour.\n   */\n  @media (forced-colors: active) {\n    .v-hotkeys[data-variant] {\n      --hotkeys-border: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VHotkeys/VHotkeys.vue_vue_type_script_setup_true_lang.js

@@ -1,20 +1,21 @@
 import { useMessages as e } from "../../i18n/state.js";
-import { DEFAULT_PLATFORM as t, capLabel as n, detectPlatform as r, isEditableTarget as i, matchesEvent as a, parseHotkeys as o, resolveKeys as s } from "./platform.js";
-import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, onActivated as m, onBeforeUnmount as h, onDeactivated as g, onMounted as _, openBlock as v, ref as y, renderList as b, toDisplayString as x, watch as S } from "vue";
+import { DEFAULT_PLATFORM as t, capLabel as n, detectPlatform as r, parseHotkeys as i, resolveKeys as a } from "./platform.js";
+import { useHotkeyListener as o } from "../../composables/useHotkeyListener.js";
+import { Fragment as s, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, defineComponent as f, onMounted as p, openBlock as m, ref as h, renderList as g, toDisplayString as _ } from "vue";
 //#region src/components/VHotkeys/VHotkeys.vue?vue&type=script&setup=true&lang.ts
-var C = [
+var v = [
 	"data-variant",
 	"data-attached",
 	"data-size",
 	"data-compact",
 	"data-platform"
-], w = {
+], y = {
 	class: "v-hotkeys-keys",
 	"aria-hidden": "true"
-}, T = {
+}, b = {
 	key: 0,
 	class: "v-hotkeys-separator"
-}, E = { class: "v-hotkeys-key" }, D = { class: "v-visually-hidden" }, O = /*@__PURE__*/ p({
+}, x = { class: "v-hotkeys-key" }, S = { class: "v-visually-hidden" }, C = /*@__PURE__*/ f({
 	__name: "VHotkeys",
 	props: {
 		keys: {},
@@ -45,34 +46,30 @@ var C = [
 		label: { default: void 0 }
 	},
 	emits: ["trigger"],
-	setup(p, { emit: O }) {
-		let k = p, A = O, j = e(), M = y(t);
-		_(() => {
-			M.value = r(), k.listen && B();
+	setup(f, { emit: C }) {
+		let w = f, T = C, E = e(), D = h(t);
+		p(() => {
+			D.value = r();
 		});
-		let N = l(() => k.platform ?? M.value), P = l(() => o(k.keys)), F = l(() => s(P.value, N.value)), I = l(() => F.value.map((e) => e.glyph ?? (e.word ? j.value.hotkeys[e.word] : n(e.token)))), L = l(() => F.value.map((e) => e.word ? j.value.hotkeys[e.word] : e.glyph ?? n(e.token)).join(" + ")), R = l(() => k.label ?? j.value.hotkeys.label(L.value)), z = !1;
-		function B() {
-			z || typeof document > "u" || (document.addEventListener("keydown", H), z = !0);
-		}
-		function V() {
-			z &&= (document.removeEventListener("keydown", H), !1);
-		}
-		function H(e) {
-			!k.listen || e.repeat || e.defaultPrevented || e.isComposing || !k.allowInInput && i(e.composedPath()[0] ?? e.target) || a(e, P.value, N.value) && (!k.allowDefault && !P.value.includes("esc") && e.preventDefault(), A("trigger", e));
-		}
-		return S(() => k.listen, (e) => e ? B() : V()), h(V), g(V), m(() => {
-			k.listen && B();
-		}), (e, t) => (v(), d("kbd", {
+		let O = c(() => w.platform ?? D.value), k = c(() => i(w.keys)), A = c(() => a(k.value, O.value)), j = c(() => A.value.map((e) => e.glyph ?? (e.word ? E.value.hotkeys[e.word] : n(e.token)))), M = c(() => A.value.map((e) => e.word ? E.value.hotkeys[e.word] : e.glyph ?? n(e.token)).join(" + ")), N = c(() => w.label ?? E.value.hotkeys.label(M.value));
+		return o({
+			tokens: () => k.value,
+			platform: () => O.value,
+			enabled: () => w.listen,
+			allowDefault: () => w.allowDefault,
+			allowInInput: () => w.allowInInput,
+			onTrigger: (e) => T("trigger", e)
+		}), (e, t) => (m(), u("kbd", {
 			class: "v-hotkeys v-control",
-			"data-variant": p.variant,
-			"data-attached": p.attached ? "" : void 0,
-			"data-size": p.size,
-			"data-compact": p.compact ? "" : void 0,
-			"data-platform": N.value
-		}, [f("span", w, [(v(!0), d(c, null, b(I.value, (e, t) => (v(), d(c, { key: t }, [t > 0 && p.separator ? (v(), d("span", T, x(p.separator), 1)) : u("", !0), f("kbd", E, x(e), 1)], 64))), 128))]), f("span", D, x(R.value), 1)], 8, C));
+			"data-variant": f.variant,
+			"data-attached": f.attached ? "" : void 0,
+			"data-size": f.size,
+			"data-compact": f.compact ? "" : void 0,
+			"data-platform": O.value
+		}, [d("span", y, [(m(!0), u(s, null, g(j.value, (e, t) => (m(), u(s, { key: t }, [t > 0 && f.separator ? (m(), u("span", b, _(f.separator), 1)) : l("", !0), d("kbd", x, _(e), 1)], 64))), 128))]), d("span", S, _(N.value), 1)], 8, v));
 	}
 });
 //#endregion
-export { O as default };
+export { C as default };
 
 //# sourceMappingURL=VHotkeys.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VHotkeys.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VHotkeys/VHotkeys.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Render platform-specific shortcut glyphs. Detect the platform after mount for SSR; attach\n * keyboard listeners only when listen is enabled.\n */\n\nimport { computed, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue'\n\nimport {\n  DEFAULT_PLATFORM,\n  capLabel,\n  detectPlatform,\n  isEditableTarget,\n  matchesEvent,\n  parseHotkeys,\n  resolveKeys,\n} from './platform'\nimport type { HotkeysPlatform } from './platform'\nimport { useMessages } from '../../i18n/state'\n\n/** How a key cap is drawn. */\nexport type HotkeysVariant = 'soft' | 'outline' | 'elevated'\n/** The size of the caps, from the two smallest steps of the control scale. */\nexport type HotkeysSize = 'xs' | 'sm'\n\ninterface HotkeysProps {\n  /** The combination, `+`-separated: `mod+k`, `ctrl+shift+p`, `alt+enter`, `esc`. */\n  keys: string\n  /** How a key cap is drawn: tinted (`soft`), outlined (`outline`), or raised off the page (`elevated`). */\n  variant?: HotkeysVariant\n  /**\n   * Draws the whole combination as a SINGLE key rather than as several: the decoration moves\n   * from each cap to the shortcut as a whole, so the separator ends up inside the key instead\n   * of between two of them.\n   */\n  attached?: boolean\n  /** The size of the caps, `xs` by default: a shortcut is chrome beside other text. */\n  size?: HotkeysSize\n  /** Takes 4px off the height, leaving the padding and the text as they are. */\n  compact?: boolean\n  /**\n   * Forces the keyboard's OS instead of detecting it, for a deterministic\n   * rendering (stories, tests, a table showing all three) or a host that already\n   * knows (Electron, Tauri, a server reading the User-Agent).\n   */\n  platform?: HotkeysPlatform\n  /**\n   * What is written between two caps. An empty string gives the macOS convention,\n   * where the symbols simply follow one another: ⇧⌘K.\n   */\n  separator?: string\n  /**\n   * Actually listens for the combination and reports it. It is off by default: a\n   * component whose job is to display a shortcut must not capture the page's keyboard\n   * without being asked.\n   */\n  listen?: boolean\n  /**\n   * While listening, lets the browser go on doing whatever the combination normally does. Left\n   * out, the browser is stopped, which is the entire point of taking over something like ⌘K.\n   */\n  allowDefault?: boolean\n  /**\n   * While listening, fires even when the reader is typing in a field. It is off by\n   * default, so a shortcut cannot fire in the middle of a sentence.\n   */\n  allowInInput?: boolean\n  /**\n   * What screen readers announce, \"Keyboard shortcut: Ctrl + K\" by default, from the\n   * design system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<HotkeysProps>(), {\n  variant: 'soft',\n  attached: false,\n  size: 'xs',\n  compact: false,\n  platform: undefined,\n  separator: '+',\n  listen: false,\n  allowDefault: false,\n  allowInInput: false,\n  label: undefined,\n})\n\nconst emit = defineEmits<{\n  /** The combination was pressed. It is only ever emitted while `listen` is on. */\n  trigger: [event: KeyboardEvent]\n}>()\n\nconst m = useMessages()\n\n// @ssr\n/*\n * The value is held per instance and not at module level. A shared one, having already resolved\n * to macOS, would make a component hydrated later; a Nuxt island, a route loaded on demand;\n * render ⌘ on its very first client pass where the server had written Ctrl.\n */\nconst detected = ref<HotkeysPlatform>(DEFAULT_PLATFORM)\nonMounted(() => {\n  detected.value = detectPlatform()\n  if (props.listen) attach()\n})\n\nconst platform = computed(() => props.platform ?? detected.value)\nconst tokens = computed(() => parseHotkeys(props.keys))\nconst resolved = computed(() => resolveKeys(tokens.value, platform.value))\n\n// @a11y\n/*\n * On SCREEN the symbol wins, ⌘ being what is engraved on the key; in the ANNOUNCED NAME the\n * word does, because that symbol is either passed over in silence or read out as \"place of\n * interest sign\", depending on the screen reader. Inverting the preference is what lets one\n * table serve both.\n */\nconst caps = computed(() =>\n  resolved.value.map(\n    (key) => key.glyph ?? (key.word ? m.value.hotkeys[key.word] : capLabel(key.token)),\n  ),\n)\nconst spoken = computed(() =>\n  resolved.value\n    .map((key) => (key.word ? m.value.hotkeys[key.word] : (key.glyph ?? capLabel(key.token))))\n    .join(' + '),\n)\nconst resolvedLabel = computed(() => props.label ?? m.value.hotkeys.label(spoken.value))\n\n// @core\n/*\n * It is called `listening` and not `attached`. Every top-level binding of a `<script setup>` is\n * exposed to the template, where it SHADOWS the prop of the same name: called `attached`, this\n * flag would silently be what the template read instead of the prop, and the joined rendering\n * would follow whether a listener happened to be installed.\n */\nlet listening = false\n\nfunction attach() {\n  if (listening || typeof document === 'undefined') return\n  document.addEventListener('keydown', onKeydown)\n  listening = true\n}\n\nfunction detach() {\n  if (!listening) return\n  document.removeEventListener('keydown', onKeydown)\n  listening = false\n}\n\n// @keyboard @core\nfunction onKeydown(event: KeyboardEvent) {\n  /* A held-down combination repeats at the system's auto-repeat rate, which would\n     reopen the consumer's palette a dozen times a second; only the first press\n     counts. */\n  if (!props.listen || event.repeat) return\n  /* A key another handler has already dealt with (a menu's arrow, a field's Enter) is not\n     a shortcut any more. And the Enter that confirms an input method's candidate is the\n     end of a word being typed, not a command. */\n  if (event.defaultPrevented || event.isComposing) return\n  /* The document sees a key typed inside a shadow root as coming from the shadow HOST, a\n     plain element: the field itself is the first entry of the composed path. */\n  if (!props.allowInInput && isEditableTarget(event.composedPath()[0] ?? event.target)) return\n  if (!matchesEvent(event, tokens.value, platform.value)) return\n  /*\n   * Escape is never cancelled. A cancelled Escape is not turned into a close request, so every\n   * open dialog and light-dismiss popover on the page would stop closing on it.\n   */\n  if (!props.allowDefault && !tokens.value.includes('esc')) event.preventDefault()\n  emit('trigger', event)\n}\n\n/* Attaching the listener once and simply returning early inside it would be shorter to\n   write, but a documentation page listing fifty shortcuts would then install fifty\n   document listeners that do nothing. Following the prop is what keeps that at zero. */\nwatch(\n  () => props.listen,\n  (on) => (on ? attach() : detach()),\n)\nonBeforeUnmount(detach)\n/* A view kept alive by <KeepAlive> is never unmounted, only put aside: its shortcut must\n   stop with it, or a hidden page would go on answering the keyboard. */\nonDeactivated(detach)\nonActivated(() => {\n  if (props.listen) attach()\n})\n</script>\n\n<template>\n  <kbd\n    class=\"v-hotkeys v-control\"\n    :data-variant=\"variant\"\n    :data-attached=\"attached ? '' : undefined\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-platform=\"platform\"\n  >\n    <span class=\"v-hotkeys-keys\" aria-hidden=\"true\">\n      <template v-for=\"(cap, index) in caps\" :key=\"index\">\n        <span v-if=\"index > 0 && separator\" class=\"v-hotkeys-separator\">{{ separator }}</span>\n        <kbd class=\"v-hotkeys-key\">{{ cap }}</kbd>\n      </template>\n    </span>\n    <span class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n  </kbd>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The browser gives a `<kbd>` a monospaced family and a smaller size, and that reduction\n   * COMPOUNDS when one `<kbd>` sits inside another, as it does here: the caps would come out at\n   * roughly 69% of the surrounding text. Both are reset here and again on the caps themselves,\n   * and deleting either line silently miniaturizes the whole component.\n   */\n  .v-hotkeys {\n    display: inline-flex;\n    align-items: center;\n    /* Centres the content in the cases where the minimum width wins over it: a\n       single-character combination drawn as one key. */\n    justify-content: center;\n    vertical-align: middle;\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n    --hotkeys-pad: var(--control-padding-inline);\n  }\n\n  /* The size comes from the shared class set on the ROOT: its variables inherit down,\n     and it is the CAPS that read the height from them. The scale itself holds five\n     steps; the component's type restricts it to the two smallest, a key cap being\n     smaller than a control. */\n  .v-hotkeys-keys {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--control-gap);\n  }\n\n  .v-hotkeys-key {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  /*\n   * Deriving the whole cap from the inherited colour is what makes the component\n   * ground-independent, and it is the same reason there is no tone table at all. They set\n   * VARIABLES rather than declaring the look straight away, because that look has two possible\n   * carriers (see below).\n   */\n  .v-hotkeys[data-variant='soft'] {\n    --hotkeys-bg: color-mix(in oklab, currentcolor, transparent 90%);\n    --hotkeys-border: transparent;\n    --hotkeys-shadow: none;\n  }\n\n  .v-hotkeys[data-variant='outline'] {\n    --hotkeys-bg: transparent;\n    --hotkeys-border: color-mix(in oklab, currentcolor, transparent 70%);\n    --hotkeys-shadow: none;\n  }\n\n  /* Lifted rather than settled into its ground, so the tint is the lighter of the two\n     and the shadow does the work. That shadow is the one paint left that is not\n     derived: it is a cast rather than a colour, so on a dark ground it simply has\n     nothing to fall on, and the tint is what still separates the cap there. */\n  .v-hotkeys[data-variant='elevated'] {\n    --hotkeys-bg: color-mix(in oklab, currentcolor, transparent 94%);\n    --hotkeys-border: transparent;\n    --hotkeys-shadow: var(--vectis-shadow-sm);\n  }\n\n  /*\n   * When one key holds the whole combination, its ends take the same breathing room as the gaps\n   * inside it, which gives the key a single rhythm. The usual control padding is sized to wrap\n   * ONE short label; around three runs of text already spaced from one another, it reads as\n   * slack at the edges.\n   */\n  .v-hotkeys[data-attached] {\n    --hotkeys-pad: var(--control-gap);\n  }\n\n  /*\n   * THE key recipe, written once for its two possible carriers: every cap by default, and the\n   * whole shortcut alone when it is drawn as a single key; which is exactly what puts the\n   * separator inside the key rather than between two of them. Written out twice, the two\n   * renderings would drift apart at the first token change.\n   */\n  .v-hotkeys[data-attached],\n  .v-hotkeys:not([data-attached]) .v-hotkeys-key {\n    height: var(--control-height);\n    /* A minimum equal to the height makes a single-character key read as a square\n       rather than as a sliver. */\n    min-inline-size: var(--control-height);\n    padding-inline: var(--hotkeys-pad);\n    border: 1px solid var(--hotkeys-border);\n    border-radius: var(--vectis-radius-interactive);\n    background: var(--hotkeys-bg);\n    box-shadow: var(--hotkeys-shadow);\n  }\n\n  /* Softened rather than full strength: the separator is punctuation between two\n     caps, and at the same weight as them it competes with what it separates. */\n  .v-hotkeys-separator {\n    color: color-mix(in oklab, currentcolor, transparent 40%);\n  }\n\n  /*\n   * Forced colours flatten the tint and drop the shadow, which is all a soft or an elevated cap\n   * is made of. Every variant takes the edge of the outlined one, in the system text colour.\n   */\n  @media (forced-colors: active) {\n    .v-hotkeys[data-variant] {\n      --hotkeys-border: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EA,IAAM,IAAQ,GAaR,IAAO,GAKP,IAAI,EAAY,GAQhB,IAAW,EAAqB,CAAgB;EACtD,QAAgB;GAEd,AADA,EAAS,QAAQ,EAAe,GAC5B,EAAM,UAAQ,EAAO;EAC3B,CAAC;EAED,IAAM,IAAW,QAAe,EAAM,YAAY,EAAS,KAAK,GAC1D,IAAS,QAAe,EAAa,EAAM,IAAI,CAAC,GAChD,IAAW,QAAe,EAAY,EAAO,OAAO,EAAS,KAAK,CAAC,GASnE,IAAO,QACX,EAAS,MAAM,KACZ,MAAQ,EAAI,UAAU,EAAI,OAAO,EAAE,MAAM,QAAQ,EAAI,QAAQ,EAAS,EAAI,KAAK,EAClF,CACF,GACM,IAAS,QACb,EAAS,MACN,KAAK,MAAS,EAAI,OAAO,EAAE,MAAM,QAAQ,EAAI,QAAS,EAAI,SAAS,EAAS,EAAI,KAAK,CAAG,CAAA,CACxF,KAAK,KAAK,CACf,GACM,IAAgB,QAAe,EAAM,SAAS,EAAE,MAAM,QAAQ,MAAM,EAAO,KAAK,CAAC,GASnF,IAAY;EAEhB,SAAS,IAAS;GACZ,KAAa,OAAO,WAAa,QACrC,SAAS,iBAAiB,WAAW,CAAS,GAC9C,IAAY;EACd;EAEA,SAAS,IAAS;GACX,AAEL,OADA,SAAS,oBAAoB,WAAW,CAAS,GACrC;EACd;EAGA,SAAS,EAAU,GAAsB;GAInC,CAAC,EAAM,UAAU,EAAM,UAIvB,EAAM,oBAAoB,EAAM,eAGhC,CAAC,EAAM,gBAAgB,EAAiB,EAAM,aAAa,CAAC,CAAC,MAAM,EAAM,MAAM,KAC9E,EAAa,GAAO,EAAO,OAAO,EAAS,KAAK,MAKjD,CAAC,EAAM,gBAAgB,CAAC,EAAO,MAAM,SAAS,KAAK,KAAG,EAAM,eAAe,GAC/E,EAAK,WAAW,CAAK;EACvB;SAKA,QACQ,EAAM,SACX,MAAQ,IAAK,EAAO,IAAI,EAAO,CAClC,GACA,EAAgB,CAAM,GAGtB,EAAc,CAAM,GACpB,QAAkB;GAChB,AAAI,EAAM,UAAQ,EAAO;EAC3B,CAAC,mBAIC,EAeM,OAAA;GAdJ,OAAM;GACL,gBAAc,EAAA;GACd,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,iBAAe,EAAA;MAEhB,EAKO,QALP,GAKO,EAAA,EAAA,EAAA,GAJL,EAGW,GAAA,MAAA,EAHsB,EAAA,QAAf,GAAK,wBAAsB,EAAK,GAAA,CACpC,IAAK,KAAQ,EAAA,aAAA,EAAA,GAAzB,EAAsF,QAAtF,GAAsF,EAAnB,EAAA,SAAS,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAC5E,EAA0C,OAA1C,GAA0C,EAAZ,CAAG,GAAA,CAAA,CAAA,GAAA,EAAA,cAGrC,EAA0D,QAA1D,GAA0D,EAAvB,EAAA,KAAa,GAAA,CAAA,CAAA,GAAA,GAAA,CAAA"}
+{"version":3,"file":"VHotkeys.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VHotkeys/VHotkeys.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Render platform-specific shortcut glyphs. Detect the platform after mount for SSR; attach\n * keyboard listeners only when listen is enabled.\n */\n\nimport { computed, onMounted, ref } from 'vue'\n\nimport { DEFAULT_PLATFORM, capLabel, detectPlatform, parseHotkeys, resolveKeys } from './platform'\nimport type { HotkeysPlatform } from './platform'\nimport { useHotkeyListener } from '../../composables/useHotkeyListener'\nimport { useMessages } from '../../i18n/state'\n\n/** How a key cap is drawn. */\nexport type HotkeysVariant = 'soft' | 'outline' | 'elevated'\n/** The size of the caps, from the two smallest steps of the control scale. */\nexport type HotkeysSize = 'xs' | 'sm'\n\ninterface HotkeysProps {\n  /** The combination, `+`-separated: `mod+k`, `ctrl+shift+p`, `alt+enter`, `esc`. */\n  keys: string\n  /** How a key cap is drawn: tinted (`soft`), outlined (`outline`), or raised off the page (`elevated`). */\n  variant?: HotkeysVariant\n  /**\n   * Draws the whole combination as a SINGLE key rather than as several: the decoration moves\n   * from each cap to the shortcut as a whole, so the separator ends up inside the key instead\n   * of between two of them.\n   */\n  attached?: boolean\n  /** The size of the caps, `xs` by default: a shortcut is chrome beside other text. */\n  size?: HotkeysSize\n  /** Takes 4px off the height, leaving the padding and the text as they are. */\n  compact?: boolean\n  /**\n   * Forces the keyboard's OS instead of detecting it, for a deterministic\n   * rendering (stories, tests, a table showing all three) or a host that already\n   * knows (Electron, Tauri, a server reading the User-Agent).\n   */\n  platform?: HotkeysPlatform\n  /**\n   * What is written between two caps. An empty string gives the macOS convention,\n   * where the symbols simply follow one another: ⇧⌘K.\n   */\n  separator?: string\n  /**\n   * Actually listens for the combination and reports it. It is off by default: a\n   * component whose job is to display a shortcut must not capture the page's keyboard\n   * without being asked.\n   */\n  listen?: boolean\n  /**\n   * While listening, lets the browser go on doing whatever the combination normally does. Left\n   * out, the browser is stopped, which is the entire point of taking over something like ⌘K.\n   */\n  allowDefault?: boolean\n  /**\n   * While listening, fires even when the reader is typing in a field. It is off by\n   * default, so a shortcut cannot fire in the middle of a sentence.\n   */\n  allowInInput?: boolean\n  /**\n   * What screen readers announce, \"Keyboard shortcut: Ctrl + K\" by default, from the\n   * design system dictionary.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<HotkeysProps>(), {\n  variant: 'soft',\n  attached: false,\n  size: 'xs',\n  compact: false,\n  platform: undefined,\n  separator: '+',\n  listen: false,\n  allowDefault: false,\n  allowInInput: false,\n  label: undefined,\n})\n\nconst emit = defineEmits<{\n  /** The combination was pressed. It is only ever emitted while `listen` is on. */\n  trigger: [event: KeyboardEvent]\n}>()\n\nconst m = useMessages()\n\n// @ssr\n/*\n * The value is held per instance and not at module level. A shared one, having already resolved\n * to macOS, would make a component hydrated later; a Nuxt island, a route loaded on demand;\n * render ⌘ on its very first client pass where the server had written Ctrl.\n */\nconst detected = ref<HotkeysPlatform>(DEFAULT_PLATFORM)\nonMounted(() => {\n  detected.value = detectPlatform()\n})\n\nconst platform = computed(() => props.platform ?? detected.value)\nconst tokens = computed(() => parseHotkeys(props.keys))\nconst resolved = computed(() => resolveKeys(tokens.value, platform.value))\n\n// @a11y\n/*\n * On SCREEN the symbol wins, ⌘ being what is engraved on the key; in the ANNOUNCED NAME the\n * word does, because that symbol is either passed over in silence or read out as \"place of\n * interest sign\", depending on the screen reader. Inverting the preference is what lets one\n * table serve both.\n */\nconst caps = computed(() =>\n  resolved.value.map(\n    (key) => key.glyph ?? (key.word ? m.value.hotkeys[key.word] : capLabel(key.token)),\n  ),\n)\nconst spoken = computed(() =>\n  resolved.value\n    .map((key) => (key.word ? m.value.hotkeys[key.word] : (key.glyph ?? capLabel(key.token))))\n    .join(' + '),\n)\nconst resolvedLabel = computed(() => props.label ?? m.value.hotkeys.label(spoken.value))\n\nuseHotkeyListener({\n  tokens: () => tokens.value,\n  platform: () => platform.value,\n  enabled: () => props.listen,\n  allowDefault: () => props.allowDefault,\n  allowInInput: () => props.allowInInput,\n  onTrigger: (event) => emit('trigger', event),\n})\n</script>\n\n<template>\n  <kbd\n    class=\"v-hotkeys v-control\"\n    :data-variant=\"variant\"\n    :data-attached=\"attached ? '' : undefined\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-platform=\"platform\"\n  >\n    <span class=\"v-hotkeys-keys\" aria-hidden=\"true\">\n      <template v-for=\"(cap, index) in caps\" :key=\"index\">\n        <span v-if=\"index > 0 && separator\" class=\"v-hotkeys-separator\">{{ separator }}</span>\n        <kbd class=\"v-hotkeys-key\">{{ cap }}</kbd>\n      </template>\n    </span>\n    <span class=\"v-visually-hidden\">{{ resolvedLabel }}</span>\n  </kbd>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The browser gives a `<kbd>` a monospaced family and a smaller size, and that reduction\n   * COMPOUNDS when one `<kbd>` sits inside another, as it does here: the caps would come out at\n   * roughly 69% of the surrounding text. Both are reset here and again on the caps themselves,\n   * and deleting either line silently miniaturizes the whole component.\n   */\n  .v-hotkeys {\n    display: inline-flex;\n    align-items: center;\n    /* Centres the content in the cases where the minimum width wins over it: a\n       single-character combination drawn as one key. */\n    justify-content: center;\n    vertical-align: middle;\n    font-family: var(--vectis-text-family);\n    font-size: var(--control-font-size);\n  }\n\n  /* The size comes from the shared class set on the ROOT: its variables inherit down,\n     and it is the CAPS that read the height from them. The scale itself holds five\n     steps; the component's type restricts it to the two smallest, a key cap being\n     smaller than a control. */\n  .v-hotkeys-keys {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--control-gap);\n  }\n\n  .v-hotkeys-key {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: var(--vectis-text-control-weight);\n    line-height: var(--vectis-text-control-leading);\n  }\n\n  /*\n   * Deriving the whole cap from the inherited colour is what makes the component\n   * ground-independent, and it is the same reason there is no tone table at all. They set\n   * VARIABLES rather than declaring the look straight away, because that look has two possible\n   * carriers (see below).\n   */\n  .v-hotkeys[data-variant='soft'] {\n    --hotkeys-bg: color-mix(in oklab, currentcolor, transparent 90%);\n    --hotkeys-border: transparent;\n    --hotkeys-shadow: none;\n  }\n\n  .v-hotkeys[data-variant='outline'] {\n    --hotkeys-bg: transparent;\n    --hotkeys-border: color-mix(in oklab, currentcolor, transparent 70%);\n    --hotkeys-shadow: none;\n  }\n\n  /* Lifted rather than settled into its ground, so the tint is the lighter of the two\n     and the shadow does the work. That shadow is the one paint left that is not\n     derived: it is a cast rather than a colour, so on a dark ground it simply has\n     nothing to fall on, and the tint is what still separates the cap there. */\n  .v-hotkeys[data-variant='elevated'] {\n    --hotkeys-bg: color-mix(in oklab, currentcolor, transparent 94%);\n    --hotkeys-border: transparent;\n    --hotkeys-shadow: var(--vectis-shadow-sm);\n  }\n\n  /*\n   * THE key recipe, written once for its two possible carriers: every cap by default, and the\n   * whole shortcut alone when it is drawn as a single key; which is exactly what puts the\n   * separator inside the key rather than between two of them. Written out twice, the two\n   * renderings would drift apart at the first token change.\n   */\n  .v-hotkeys[data-attached],\n  .v-hotkeys:not([data-attached]) .v-hotkeys-key {\n    height: var(--control-height);\n    /* A minimum equal to the height makes a single-character key read as a square\n       rather than as a sliver. */\n    min-inline-size: var(--control-height);\n    padding-inline: var(--control-padding-inline);\n    border: 1px solid var(--hotkeys-border);\n    border-radius: var(--vectis-radius-interactive);\n    background: var(--hotkeys-bg);\n    box-shadow: var(--hotkeys-shadow);\n  }\n\n  /* Softened rather than full strength: the separator is punctuation between two\n     caps, and at the same weight as them it competes with what it separates. */\n  .v-hotkeys-separator {\n    color: color-mix(in oklab, currentcolor, transparent 40%);\n  }\n\n  /*\n   * Forced colours flatten the tint and drop the shadow, which is all a soft or an elevated cap\n   * is made of. Every variant takes the edge of the outlined one, in the system text colour.\n   */\n  @media (forced-colors: active) {\n    .v-hotkeys[data-variant] {\n      --hotkeys-border: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEA,IAAM,IAAQ,GAaR,IAAO,GAKP,IAAI,EAAY,GAQhB,IAAW,EAAqB,CAAgB;EACtD,QAAgB;GACd,EAAS,QAAQ,EAAe;EAClC,CAAC;EAED,IAAM,IAAW,QAAe,EAAM,YAAY,EAAS,KAAK,GAC1D,IAAS,QAAe,EAAa,EAAM,IAAI,CAAC,GAChD,IAAW,QAAe,EAAY,EAAO,OAAO,EAAS,KAAK,CAAC,GASnE,IAAO,QACX,EAAS,MAAM,KACZ,MAAQ,EAAI,UAAU,EAAI,OAAO,EAAE,MAAM,QAAQ,EAAI,QAAQ,EAAS,EAAI,KAAK,EAClF,CACF,GACM,IAAS,QACb,EAAS,MACN,KAAK,MAAS,EAAI,OAAO,EAAE,MAAM,QAAQ,EAAI,QAAS,EAAI,SAAS,EAAS,EAAI,KAAK,CAAG,CAAA,CACxF,KAAK,KAAK,CACf,GACM,IAAgB,QAAe,EAAM,SAAS,EAAE,MAAM,QAAQ,MAAM,EAAO,KAAK,CAAC;SAEvF,EAAkB;GAChB,cAAc,EAAO;GACrB,gBAAgB,EAAS;GACzB,eAAe,EAAM;GACrB,oBAAoB,EAAM;GAC1B,oBAAoB,EAAM;GAC1B,YAAY,MAAU,EAAK,WAAW,CAAK;EAC7C,CAAC,mBAIC,EAeM,OAAA;GAdJ,OAAM;GACL,gBAAc,EAAA;GACd,iBAAe,EAAA,WAAQ,KAAQ,KAAA;GAC/B,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,iBAAe,EAAA;MAEhB,EAKO,QALP,GAKO,EAAA,EAAA,EAAA,GAJL,EAGW,GAAA,MAAA,EAHsB,EAAA,QAAf,GAAK,wBAAsB,EAAK,GAAA,CACpC,IAAK,KAAQ,EAAA,aAAA,EAAA,GAAzB,EAAsF,QAAtF,GAAsF,EAAnB,EAAA,SAAS,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAC5E,EAA0C,OAA1C,GAA0C,EAAZ,CAAG,GAAA,CAAA,CAAA,GAAA,EAAA,cAGrC,EAA0D,QAA1D,GAA0D,EAAvB,EAAA,KAAa,GAAA,CAAA,CAAA,GAAA,GAAA,CAAA"}

package/dist/components/VHotkeys/platform.d.ts

@@ -40,6 +40,8 @@ export declare function capLabel(token: string): string;
  * on it and the dictionary entry naming it, where either exists.
  */
 export declare function resolveKeys(tokens: string[], platform: HotkeysPlatform): ResolvedKey[];
+/** Spells a combination as the `aria-keyshortcuts` attribute does: `Control+K`, `Meta+K`. */
+export declare function ariaKeyshortcuts(tokens: string[], platform: HotkeysPlatform): string;
 /** Whether a key press IS this combination. */
 export declare function matchesEvent(event: KeyboardEvent, tokens: string[], platform: HotkeysPlatform): boolean;
 export declare function isEditableTarget(target: EventTarget | null | undefined): boolean;

package/dist/components/VHotkeys/platform.js

@@ -104,23 +104,42 @@ function p(e, t) {
 		word: f(e, t)
 	}));
 }
-function m(e) {
+var m = {
+	meta: "Meta",
+	ctrl: "Control",
+	alt: "Alt",
+	shift: "Shift",
+	enter: "Enter",
+	esc: "Escape",
+	space: "Space",
+	backspace: "Backspace",
+	delete: "Delete",
+	tab: "Tab",
+	up: "ArrowUp",
+	down: "ArrowDown",
+	left: "ArrowLeft",
+	right: "ArrowRight"
+};
+function h(e, t) {
+	return p(e, t).map(({ token: e }) => e === "mod" ? t === "mac" ? "Meta" : "Control" : m[e] ?? d(e)).join("+");
+}
+function g(e) {
 	let t = e.key.toLowerCase();
 	return r[t] ?? t;
 }
-function h(e, t, n) {
+function _(e, t, n) {
 	let r = t.includes("ctrl") || n !== "mac" && t.includes("mod"), i = t.includes("meta") || n === "mac" && t.includes("mod");
 	if (e.ctrlKey !== r || e.metaKey !== i || e.altKey !== t.includes("alt") || e.shiftKey !== t.includes("shift")) return !1;
 	let a = t.find((e) => !u(e));
-	return a !== void 0 && m(e) === a;
+	return a !== void 0 && g(e) === a;
 }
-function g(e) {
+function v(e) {
 	if (!(e instanceof HTMLElement)) return !1;
 	if (e.isContentEditable) return !0;
 	let t = e.tagName;
 	return t === "TEXTAREA" || t === "SELECT" || t === "INPUT" && !c.has(e.type);
 }
 //#endregion
-export { t as DEFAULT_PLATFORM, d as capLabel, n as detectPlatform, g as isEditableTarget, h as matchesEvent, l as parseHotkeys, p as resolveKeys };
+export { t as DEFAULT_PLATFORM, h as ariaKeyshortcuts, d as capLabel, n as detectPlatform, v as isEditableTarget, _ as matchesEvent, l as parseHotkeys, p as resolveKeys };
 
 //# sourceMappingURL=platform.js.map

package/dist/components/VHotkeys/platform.js.map

@@ -1 +1 @@
-{"version":3,"file":"platform.js","names":[],"sources":["../../../src/components/VHotkeys/platform.ts"],"sourcesContent":["// @core\n// Shortcut parsing and platform glyphs are pure; read navigator only after mount to preserve\n// deterministic SSR output.\n/**\n * Detecting the platform must only ever be done once a component is mounted. There is nothing\n * to read it from on a server, and sniffing a request header is not this library's business.\n */\n\nimport { isDev } from '../../utils/env'\n\n/** The system a keyboard belongs to, which decides its symbols and some of its words. */\nexport type HotkeysPlatform = 'mac' | 'windows' | 'linux' | 'other'\n\n/**\n * The dictionary entries naming a key, and only those: the sentence framing the shortcut is not\n * one of them.\n */\nexport type HotkeysWord =\n  | 'command'\n  | 'ctrl'\n  | 'alt'\n  | 'shift'\n  | 'windows'\n  | 'super'\n  | 'enter'\n  | 'escape'\n  | 'space'\n  | 'backspace'\n  | 'delete'\n  | 'tab'\n  | 'up'\n  | 'down'\n  | 'left'\n  | 'right'\n\n/** One key of a shortcut, once resolved for a given platform. */\nexport interface ResolvedKey {\n  /** Its canonical name, which the matcher compares a key press against. */\n  token: string\n  /** The symbol engraved on that key, where the system engraves one. */\n  glyph?: string\n  /**\n   * Which dictionary entry names it. Nothing here means the design system does not\n   * know this key, and it is printed as it was written.\n   */\n  word?: HotkeysWord\n}\n\n// @ssr\n/** What a SERVER renders, and therefore what the browser's first render must be as well. */\nexport const DEFAULT_PLATFORM: HotkeysPlatform = 'other'\n\n// @ssr @fallback\n/** Works out which system the keyboard belongs to, from two sources in order. */\nexport function detectPlatform(): HotkeysPlatform {\n  if (typeof navigator === 'undefined') return DEFAULT_PLATFORM\n  const nav = navigator as Navigator & { userAgentData?: { platform?: string } }\n  const source = (nav.userAgentData?.platform || nav.platform || '').toLowerCase()\n  /*\n   * IPadOS reports itself as a Mac, which is fine here: an attached keyboard carries the same\n   * modifier symbols either way.\n   */\n  if (/mac|iphone|ipad|ipod/.test(source)) return 'mac'\n  if (source.includes('win')) return 'windows'\n  /* ChromeOS spells itself two different ways depending on which of the two sources\n     answered. Both have to be listed, or the branch is dead precisely where it\n     matters. */\n  if (/linux|android|cros|chrome os/.test(source)) return 'linux'\n  return DEFAULT_PLATFORM\n}\n\n/*\n * Serving both is what guarantees the two can never disagree. The `+` key is canonically named\n * `plus`, since `+` is the separator and cannot name itself in the prop; but the browser does\n * report it as `'+'`, hence its presence here.\n */\nconst ALIASES: Record<string, string> = {\n  cmd: 'meta',\n  command: 'meta',\n  win: 'meta',\n  windows: 'meta',\n  super: 'meta',\n  os: 'meta',\n  cmdorctrl: 'mod',\n  commandorcontrol: 'mod',\n  control: 'ctrl',\n  option: 'alt',\n  opt: 'alt',\n  return: 'enter',\n  escape: 'esc',\n  spacebar: 'space',\n  ' ': 'space',\n  del: 'delete',\n  arrowup: 'up',\n  arrowdown: 'down',\n  arrowleft: 'left',\n  arrowright: 'right',\n  '+': 'plus',\n}\n\n/* The symbols engraved on an Apple keyboard, and on no other. Escape and the space bar\n   are deliberately absent: the Mac key really does read \"esc\", and the space bar\n   carries no symbol at all. */\nconst MAC_GLYPHS: Record<string, string> = {\n  mod: '⌘',\n  meta: '⌘',\n  ctrl: '⌃',\n  alt: '⌥',\n  shift: '⇧',\n  enter: '↵',\n  backspace: '⌫',\n  delete: '⌦',\n  tab: '⇥',\n}\n\n/* Symbols that are the same everywhere: an arrow key is engraved with an arrow on\n   every keyboard ever made. */\nconst GLYPHS: Record<string, string> = {\n  up: '↑',\n  down: '↓',\n  left: '←',\n  right: '→',\n  plus: '+',\n}\n\nconst WORDS: Record<string, HotkeysWord> = {\n  ctrl: 'ctrl',\n  alt: 'alt',\n  shift: 'shift',\n  enter: 'enter',\n  esc: 'escape',\n  space: 'space',\n  backspace: 'backspace',\n  delete: 'delete',\n  tab: 'tab',\n  up: 'up',\n  down: 'down',\n  left: 'left',\n  right: 'right',\n}\n\nconst MODIFIERS = new Set(['mod', 'meta', 'ctrl', 'alt', 'shift'])\n\n/**\n * The kinds of field one cannot type prose into. A shortcut stays live over a\n * checkbox, a button or a colour picker: there is no sentence to interrupt there.\n */\nconst NON_TEXT_INPUT_TYPES = new Set([\n  'button',\n  'submit',\n  'reset',\n  'checkbox',\n  'radio',\n  'file',\n  'range',\n  'color',\n  'image',\n])\n\n/**\n * Reads a combination as it was written and returns its keys in canonical form: `'mod+k'` and\n * `' Mod + K '` both give the same two.\n */\nexport function parseHotkeys(keys: string): string[] {\n  const tokens = keys\n    .split('+')\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean)\n    .map((token) => ALIASES[token] ?? token)\n  if (isDev) {\n    const pressed = tokens.filter((token) => !isModifier(token)).length\n    if (tokens.length === 0) {\n      console.warn(`[VHotkeys] \\`keys\\` is empty: \"${keys}\" declares no key.`)\n    } else if (pressed === 0) {\n      /* `ctrl++` reads as Ctrl and the + key, but the second + is a separator: the key\n         itself is written `plus`. */\n      console.warn(\n        `[VHotkeys] \\`keys\\` holds only modifiers: \"${keys}\" never fires. The + key is written \\`plus\\`.`,\n      )\n    } else if (pressed > 1) {\n      /* A shortcut is modifiers and ONE key: `g+h` is not a sequence, and only its first\n         key would ever be matched. */\n      console.warn(\n        `[VHotkeys] \\`keys\\` names more than one key: \"${keys}\" is matched on the first alone.`,\n      )\n    }\n  }\n  return tokens\n}\n\n/** Whether this key is one that is held down rather than pressed. */\nfunction isModifier(token: string): boolean {\n  return MODIFIERS.has(token)\n}\n\n/**\n * How a key nobody has a word or a symbol for is printed: as it was written, merely\n * capitalized: `k` becomes K, `f5` becomes F5, and a slash stays a slash.\n */\nexport function capLabel(token: string): string {\n  return token.charAt(0).toUpperCase() + token.slice(1)\n}\n\nfunction wordOf(token: string, platform: HotkeysPlatform): HotkeysWord | undefined {\n  /*\n   * The two keys whose name depends on the system. `mod` is the modifier a consumer writes when\n   * they mean \"the usual one here\"; Command on a Mac, Ctrl elsewhere; while `meta` names that\n   * physical key literally, and it is called something different on each system.\n   */\n  if (token === 'mod') return platform === 'mac' ? 'command' : 'ctrl'\n  if (token === 'meta') {\n    if (platform === 'mac') return 'command'\n    return platform === 'windows' ? 'windows' : 'super'\n  }\n  return WORDS[token]\n}\n\n/**\n * Resolves each key of a combination for a given system, attaching the symbol engraved\n * on it and the dictionary entry naming it, where either exists.\n */\nexport function resolveKeys(tokens: string[], platform: HotkeysPlatform): ResolvedKey[] {\n  /* A modifier named twice is one key held down: `ctrl+ctrl+k`, or `mod+ctrl+k` away from a\n     Mac, where `mod` IS Ctrl. Drawn twice it would read as a chord of two keys. */\n  const held = new Set<string>()\n  const once = tokens.filter((token) => {\n    if (!isModifier(token)) return true\n    const key = token === 'mod' ? (platform === 'mac' ? 'meta' : 'ctrl') : token\n    if (held.has(key)) return false\n    held.add(key)\n    return true\n  })\n  return once.map((token) => ({\n    token,\n    glyph: (platform === 'mac' ? MAC_GLYPHS[token] : undefined) ?? GLYPHS[token],\n    word: wordOf(token, platform),\n  }))\n}\n\nfunction normalizeEventKey(event: KeyboardEvent): string {\n  const key = event.key.toLowerCase()\n  return ALIASES[key] ?? key\n}\n\n/** Whether a key press IS this combination. */\nexport function matchesEvent(\n  event: KeyboardEvent,\n  tokens: string[],\n  platform: HotkeysPlatform,\n): boolean {\n  const wantCtrl = tokens.includes('ctrl') || (platform !== 'mac' && tokens.includes('mod'))\n  const wantMeta = tokens.includes('meta') || (platform === 'mac' && tokens.includes('mod'))\n  if (event.ctrlKey !== wantCtrl) return false\n  if (event.metaKey !== wantMeta) return false\n  if (event.altKey !== tokens.includes('alt')) return false\n  if (event.shiftKey !== tokens.includes('shift')) return false\n  const main = tokens.find((token) => !isModifier(token))\n  /* A combination made of modifiers alone never fires: there is no key to press. */\n  if (main === undefined) return false\n  /*\n   * Both sides go through the same normalization, which is also what makes a press reported as\n   * \"K\"; because Shift was held; match a shortcut written `k`.\n   */\n  return normalizeEventKey(event) === main\n}\n\n// @keyboard\nexport function isEditableTarget(target: EventTarget | null | undefined): boolean {\n  if (!(target instanceof HTMLElement)) return false\n  if (target.isContentEditable) return true\n  const tag = target.tagName\n  if (tag === 'TEXTAREA' || tag === 'SELECT') return true\n  if (tag !== 'INPUT') return false\n  return !NON_TEXT_INPUT_TYPES.has((target as HTMLInputElement).type)\n}\n"],"mappings":"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"}
+{"version":3,"file":"platform.js","names":[],"sources":["../../../src/components/VHotkeys/platform.ts"],"sourcesContent":["// @core\n// Shortcut parsing and platform glyphs are pure; read navigator only after mount to preserve\n// deterministic SSR output.\n/**\n * Detecting the platform must only ever be done once a component is mounted. There is nothing\n * to read it from on a server, and sniffing a request header is not this library's business.\n */\n\nimport { isDev } from '../../utils/env'\n\n/** The system a keyboard belongs to, which decides its symbols and some of its words. */\nexport type HotkeysPlatform = 'mac' | 'windows' | 'linux' | 'other'\n\n/**\n * The dictionary entries naming a key, and only those: the sentence framing the shortcut is not\n * one of them.\n */\nexport type HotkeysWord =\n  | 'command'\n  | 'ctrl'\n  | 'alt'\n  | 'shift'\n  | 'windows'\n  | 'super'\n  | 'enter'\n  | 'escape'\n  | 'space'\n  | 'backspace'\n  | 'delete'\n  | 'tab'\n  | 'up'\n  | 'down'\n  | 'left'\n  | 'right'\n\n/** One key of a shortcut, once resolved for a given platform. */\nexport interface ResolvedKey {\n  /** Its canonical name, which the matcher compares a key press against. */\n  token: string\n  /** The symbol engraved on that key, where the system engraves one. */\n  glyph?: string\n  /**\n   * Which dictionary entry names it. Nothing here means the design system does not\n   * know this key, and it is printed as it was written.\n   */\n  word?: HotkeysWord\n}\n\n// @ssr\n/** What a SERVER renders, and therefore what the browser's first render must be as well. */\nexport const DEFAULT_PLATFORM: HotkeysPlatform = 'other'\n\n// @ssr @fallback\n/** Works out which system the keyboard belongs to, from two sources in order. */\nexport function detectPlatform(): HotkeysPlatform {\n  if (typeof navigator === 'undefined') return DEFAULT_PLATFORM\n  const nav = navigator as Navigator & { userAgentData?: { platform?: string } }\n  const source = (nav.userAgentData?.platform || nav.platform || '').toLowerCase()\n  /*\n   * IPadOS reports itself as a Mac, which is fine here: an attached keyboard carries the same\n   * modifier symbols either way.\n   */\n  if (/mac|iphone|ipad|ipod/.test(source)) return 'mac'\n  if (source.includes('win')) return 'windows'\n  /* ChromeOS spells itself two different ways depending on which of the two sources\n     answered. Both have to be listed, or the branch is dead precisely where it\n     matters. */\n  if (/linux|android|cros|chrome os/.test(source)) return 'linux'\n  return DEFAULT_PLATFORM\n}\n\n/*\n * Serving both is what guarantees the two can never disagree. The `+` key is canonically named\n * `plus`, since `+` is the separator and cannot name itself in the prop; but the browser does\n * report it as `'+'`, hence its presence here.\n */\nconst ALIASES: Record<string, string> = {\n  cmd: 'meta',\n  command: 'meta',\n  win: 'meta',\n  windows: 'meta',\n  super: 'meta',\n  os: 'meta',\n  cmdorctrl: 'mod',\n  commandorcontrol: 'mod',\n  control: 'ctrl',\n  option: 'alt',\n  opt: 'alt',\n  return: 'enter',\n  escape: 'esc',\n  spacebar: 'space',\n  ' ': 'space',\n  del: 'delete',\n  arrowup: 'up',\n  arrowdown: 'down',\n  arrowleft: 'left',\n  arrowright: 'right',\n  '+': 'plus',\n}\n\n/* The symbols engraved on an Apple keyboard, and on no other. Escape and the space bar\n   are deliberately absent: the Mac key really does read \"esc\", and the space bar\n   carries no symbol at all. */\nconst MAC_GLYPHS: Record<string, string> = {\n  mod: '⌘',\n  meta: '⌘',\n  ctrl: '⌃',\n  alt: '⌥',\n  shift: '⇧',\n  enter: '↵',\n  backspace: '⌫',\n  delete: '⌦',\n  tab: '⇥',\n}\n\n/* Symbols that are the same everywhere: an arrow key is engraved with an arrow on\n   every keyboard ever made. */\nconst GLYPHS: Record<string, string> = {\n  up: '↑',\n  down: '↓',\n  left: '←',\n  right: '→',\n  plus: '+',\n}\n\nconst WORDS: Record<string, HotkeysWord> = {\n  ctrl: 'ctrl',\n  alt: 'alt',\n  shift: 'shift',\n  enter: 'enter',\n  esc: 'escape',\n  space: 'space',\n  backspace: 'backspace',\n  delete: 'delete',\n  tab: 'tab',\n  up: 'up',\n  down: 'down',\n  left: 'left',\n  right: 'right',\n}\n\nconst MODIFIERS = new Set(['mod', 'meta', 'ctrl', 'alt', 'shift'])\n\n/**\n * The kinds of field one cannot type prose into. A shortcut stays live over a\n * checkbox, a button or a colour picker: there is no sentence to interrupt there.\n */\nconst NON_TEXT_INPUT_TYPES = new Set([\n  'button',\n  'submit',\n  'reset',\n  'checkbox',\n  'radio',\n  'file',\n  'range',\n  'color',\n  'image',\n])\n\n/**\n * Reads a combination as it was written and returns its keys in canonical form: `'mod+k'` and\n * `' Mod + K '` both give the same two.\n */\nexport function parseHotkeys(keys: string): string[] {\n  const tokens = keys\n    .split('+')\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean)\n    .map((token) => ALIASES[token] ?? token)\n  if (isDev) {\n    const pressed = tokens.filter((token) => !isModifier(token)).length\n    if (tokens.length === 0) {\n      console.warn(`[VHotkeys] \\`keys\\` is empty: \"${keys}\" declares no key.`)\n    } else if (pressed === 0) {\n      /* `ctrl++` reads as Ctrl and the + key, but the second + is a separator: the key\n         itself is written `plus`. */\n      console.warn(\n        `[VHotkeys] \\`keys\\` holds only modifiers: \"${keys}\" never fires. The + key is written \\`plus\\`.`,\n      )\n    } else if (pressed > 1) {\n      /* A shortcut is modifiers and ONE key: `g+h` is not a sequence, and only its first\n         key would ever be matched. */\n      console.warn(\n        `[VHotkeys] \\`keys\\` names more than one key: \"${keys}\" is matched on the first alone.`,\n      )\n    }\n  }\n  return tokens\n}\n\n/** Whether this key is one that is held down rather than pressed. */\nfunction isModifier(token: string): boolean {\n  return MODIFIERS.has(token)\n}\n\n/**\n * How a key nobody has a word or a symbol for is printed: as it was written, merely\n * capitalized: `k` becomes K, `f5` becomes F5, and a slash stays a slash.\n */\nexport function capLabel(token: string): string {\n  return token.charAt(0).toUpperCase() + token.slice(1)\n}\n\nfunction wordOf(token: string, platform: HotkeysPlatform): HotkeysWord | undefined {\n  /*\n   * The two keys whose name depends on the system. `mod` is the modifier a consumer writes when\n   * they mean \"the usual one here\"; Command on a Mac, Ctrl elsewhere; while `meta` names that\n   * physical key literally, and it is called something different on each system.\n   */\n  if (token === 'mod') return platform === 'mac' ? 'command' : 'ctrl'\n  if (token === 'meta') {\n    if (platform === 'mac') return 'command'\n    return platform === 'windows' ? 'windows' : 'super'\n  }\n  return WORDS[token]\n}\n\n/**\n * Resolves each key of a combination for a given system, attaching the symbol engraved\n * on it and the dictionary entry naming it, where either exists.\n */\nexport function resolveKeys(tokens: string[], platform: HotkeysPlatform): ResolvedKey[] {\n  /* A modifier named twice is one key held down: `ctrl+ctrl+k`, or `mod+ctrl+k` away from a\n     Mac, where `mod` IS Ctrl. Drawn twice it would read as a chord of two keys. */\n  const held = new Set<string>()\n  const once = tokens.filter((token) => {\n    if (!isModifier(token)) return true\n    const key = token === 'mod' ? (platform === 'mac' ? 'meta' : 'ctrl') : token\n    if (held.has(key)) return false\n    held.add(key)\n    return true\n  })\n  return once.map((token) => ({\n    token,\n    glyph: (platform === 'mac' ? MAC_GLYPHS[token] : undefined) ?? GLYPHS[token],\n    word: wordOf(token, platform),\n  }))\n}\n\n/* The key names `aria-keyshortcuts` expects, which are those of `KeyboardEvent.key`. */\nconst ARIA_KEYS: Record<string, string> = {\n  meta: 'Meta',\n  ctrl: 'Control',\n  alt: 'Alt',\n  shift: 'Shift',\n  enter: 'Enter',\n  esc: 'Escape',\n  space: 'Space',\n  backspace: 'Backspace',\n  delete: 'Delete',\n  tab: 'Tab',\n  up: 'ArrowUp',\n  down: 'ArrowDown',\n  left: 'ArrowLeft',\n  right: 'ArrowRight',\n}\n\n// @a11y\n/** Spells a combination as the `aria-keyshortcuts` attribute does: `Control+K`, `Meta+K`. */\nexport function ariaKeyshortcuts(tokens: string[], platform: HotkeysPlatform): string {\n  return resolveKeys(tokens, platform)\n    .map(({ token }) =>\n      token === 'mod'\n        ? platform === 'mac'\n          ? 'Meta'\n          : 'Control'\n        : (ARIA_KEYS[token] ?? capLabel(token)),\n    )\n    .join('+')\n}\n\nfunction normalizeEventKey(event: KeyboardEvent): string {\n  const key = event.key.toLowerCase()\n  return ALIASES[key] ?? key\n}\n\n/** Whether a key press IS this combination. */\nexport function matchesEvent(\n  event: KeyboardEvent,\n  tokens: string[],\n  platform: HotkeysPlatform,\n): boolean {\n  const wantCtrl = tokens.includes('ctrl') || (platform !== 'mac' && tokens.includes('mod'))\n  const wantMeta = tokens.includes('meta') || (platform === 'mac' && tokens.includes('mod'))\n  if (event.ctrlKey !== wantCtrl) return false\n  if (event.metaKey !== wantMeta) return false\n  if (event.altKey !== tokens.includes('alt')) return false\n  if (event.shiftKey !== tokens.includes('shift')) return false\n  const main = tokens.find((token) => !isModifier(token))\n  /* A combination made of modifiers alone never fires: there is no key to press. */\n  if (main === undefined) return false\n  /*\n   * Both sides go through the same normalization, which is also what makes a press reported as\n   * \"K\"; because Shift was held; match a shortcut written `k`.\n   */\n  return normalizeEventKey(event) === main\n}\n\n// @keyboard\nexport function isEditableTarget(target: EventTarget | null | undefined): boolean {\n  if (!(target instanceof HTMLElement)) return false\n  if (target.isContentEditable) return true\n  const tag = target.tagName\n  if (tag === 'TEXTAREA' || tag === 'SELECT') return true\n  if (tag !== 'INPUT') return false\n  return !NON_TEXT_INPUT_TYPES.has((target as HTMLInputElement).type)\n}\n"],"mappings":"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"}

package/dist/components/VHoverCard/VHoverCard.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-hover-card{anchor-name:--hover-card-anchor;anchor-scope:--hover-card-anchor;align-items:center;display:inline-flex}.v-panel.v-hover-card-panel{position-anchor:--hover-card-anchor;gap:var(--vectis-space-2);padding:var(--vectis-space-4);inline-size:max-content;max-inline-size:min(var(--vectis-control-size-hover-card-max), calc(100dvi - var(--vectis-space-8)));font-size:var(--vectis-text-body-md-size);font-weight:var(--vectis-text-body-md-weight);line-height:var(--vectis-text-body-md-leading);text-align:start;white-space:normal}}

package/dist/components/VHoverCard/VHoverCard.d.ts

@@ -0,0 +1,62 @@
+/** Which side of the trigger the card appears on. */
+export type HoverCardPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+/** What the trigger has to carry: the link to the card holding its details. */
+export type HoverCardTriggerProps = {
+    'aria-details': string;
+};
+interface HoverCardProps {
+    /**
+     * Which side of the trigger the card appears on. The browser flips it to the opposite side by
+     * itself when there is not enough room.
+     */
+    placement?: HoverCardPlacement;
+    /**
+     * How long the pointer or the keyboard focus must rest on the trigger before the card opens,
+     * in milliseconds.
+     */
+    openDelay?: number;
+    /**
+     * How long the card stays once the pointer has left both the trigger and the card, in
+     * milliseconds. It is the time to cross the gap between them.
+     */
+    closeDelay?: number;
+}
+type __VLS_Props = HoverCardProps;
+type __VLS_Slots = {
+    /** The trigger, usually a link. Bind the `triggerProps` it receives onto it. */
+    default(props: {
+        triggerProps: HoverCardTriggerProps;
+    }): unknown;
+    /** What the card contains. It may hold links and buttons, and is rendered on first opening. */
+    content?(): unknown;
+};
+declare function hide(): void;
+type __VLS_ModelProps = {
+    /** Whether the card is showing. Setting it opens or closes the card without any delay. */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Opens the card at once, without the delay. */
+    show: () => void;
+    /** Closes the card, handing a focus inside it back to the trigger. */
+    close: typeof hide;
+    /** The card element. */
+    el: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    placement: HoverCardPlacement;
+    openDelay: number;
+    closeDelay: number;
+}, {}, {}, {}, 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/VHoverCard/VHoverCard.js

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

package/dist/components/VHoverCard/VHoverCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VHoverCard.js","names":[],"sources":["../../../src/components/VHoverCard/VHoverCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A manual popover driven by hover and keyboard focus: no stable HTML primitive opens a panel\n * with a delay, as `popover=\"hint\"` and interest invokers are missing at the browser floor.\n * Manual mode also leaves any open menu or popover untouched.\n */\n\nimport { ref, useId } from 'vue'\n\nimport { useEscapeDismiss } from '../../composables/useEscapeDismiss'\nimport { usePopover, usePopoverModel } from '../../composables/usePopover'\nimport { useTimer } from '../../composables/useTimer'\nimport { isKeyboardFocus } from '../../utils/focus'\n\n/** Which side of the trigger the card appears on. */\nexport type HoverCardPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n\n/** What the trigger has to carry: the link to the card holding its details. */\nexport type HoverCardTriggerProps = {\n  'aria-details': string\n}\n\ninterface HoverCardProps {\n  /**\n   * Which side of the trigger the card appears on. The browser flips it to the opposite side by\n   * itself when there is not enough room.\n   */\n  placement?: HoverCardPlacement\n  /**\n   * How long the pointer or the keyboard focus must rest on the trigger before the card opens,\n   * in milliseconds.\n   */\n  openDelay?: number\n  /**\n   * How long the card stays once the pointer has left both the trigger and the card, in\n   * milliseconds. It is the time to cross the gap between them.\n   */\n  closeDelay?: number\n}\n\nconst props = withDefaults(defineProps<HoverCardProps>(), {\n  placement: 'bottom',\n  openDelay: 500,\n  closeDelay: 300,\n})\n\n/** Whether the card is showing. Setting it opens or closes the card without any delay. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The trigger, usually a link. Bind the `triggerProps` it receives onto it. */\n  default(props: { triggerProps: HoverCardTriggerProps }): unknown\n  /** What the card contains. It may hold links and buttons, and is rendered on first opening. */\n  content?(): unknown\n}>()\n\nconst cardId = useId()\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\nconst { shown, syncShown, show: showPanel, hide: hidePanel } = usePopover(panelEl)\n\n// @ssr\n/*\n * The card is a `<span>` and its content mounts on first opening, so a trigger inside a\n * paragraph still produces valid server HTML: the parser closes a `<p>` at the first `<div>` or\n * `<p>` it meets, which would break hydration. The content then stays for the exit transition.\n */\nconst rendered = ref(false)\n\nconst timer = useTimer()\n\nlet hovered = false\nlet focused = false\n// Set while the card hands the focus back to its trigger, whose keyboard focus would reopen it.\nlet returningFocus = false\n\nconst inCard = (node: EventTarget | null) => !!panelEl.value?.contains(node as Node | null)\n\nfunction trigger() {\n  return rootEl.value?.querySelector<HTMLElement>(`[aria-details=\"${cardId}\"]`) ?? null\n}\n\n// @core\nfunction show(immediate = false) {\n  if (shown.value) {\n    timer.cancel()\n    return\n  }\n  // A delay of 0 runs the callback synchronously; the convention useTimer documents.\n  timer.start(showPanel, immediate ? 0 : props.openDelay)\n}\n\n// @a11y\n/*\n * The trigger takes the focus back before the card hides. Left inside, the focus would follow\n * the browser's own restoration, which returns it to whatever held it when the card OPENED: for\n * a card opened by hover, an unrelated control elsewhere on the page.\n */\nfunction returnFocus() {\n  if (!inCard(document.activeElement)) return\n  returningFocus = true\n  trigger()?.focus()\n  returningFocus = false\n}\n\nfunction hide() {\n  timer.cancel()\n  returnFocus()\n  hidePanel()\n}\n\n// @a11y\n// There is no hover on a touch screen: a tap keeps its usual meaning and opens nothing, so\n// whatever the card shows must also be reachable through the trigger's destination.\nfunction onPointerEnter(event: PointerEvent) {\n  if (event.pointerType === 'touch') return\n  hovered = true\n  show()\n}\n\nfunction onPointerLeave(event: PointerEvent) {\n  if (event.pointerType === 'touch') return\n  hovered = false\n  if (!focused) timer.start(hide, props.closeDelay)\n}\n\n/*\n * Pressing the trigger closes the card so it cannot stand over a dialog or a page the trigger\n * opens. A press inside the card is a use of its content and keeps it.\n */\nfunction onPointerDown(event: PointerEvent) {\n  if (inCard(event.target)) return\n  hovered = false\n  focused = false\n  hide()\n}\n\n// @a11y\n/*\n * Only the KEYBOARD focus opens the card from the trigger, read from `:focus-visible` as VTooltip\n * does: a focus given by a click opens nothing. Any focus inside the card keeps it, since a\n * click on one of its controls is still a use of it.\n */\nfunction onFocusIn(event: FocusEvent) {\n  if (returningFocus) return\n  if (inCard(event.target)) {\n    focused = true\n    timer.cancel()\n    return\n  }\n  if (!isKeyboardFocus(event.target)) return\n  focused = true\n  show()\n}\n\nfunction onFocusOut(event: FocusEvent) {\n  if (rootEl.value?.contains(event.relatedTarget as Node | null)) return\n  focused = false\n  if (!hovered) hide()\n}\n\n// Escape closes the card, handing a focus inside it back to the trigger.\nconst listen = useEscapeDismiss(() => {\n  hovered = false\n  focused = false\n  hide()\n})\n\nfunction onBeforeToggle(event: Event) {\n  syncShown(event)\n  if (shown.value) rendered.value = true\n}\n\n// The toggle event is synchronous, so Escape works from the moment the card shows.\nfunction onToggle(event: Event) {\n  onBeforeToggle(event)\n  open.value = shown.value\n  listen(shown.value)\n}\n\n// A model closing the card goes through `hide`, which hands a focus inside it back as well.\nusePopoverModel(open, () => shown.value, showPanel, hide)\n\ndefineExpose({\n  /** Opens the card at once, without the delay. */\n  show: () => show(true),\n  /** Closes the card, handing a focus inside it back to the trigger. */\n  close: hide,\n  /** The card element. */\n  el: panelEl,\n})\n</script>\n\n<template>\n  <span\n    ref=\"rootEl\"\n    class=\"v-hover-card\"\n    @pointerenter=\"onPointerEnter\"\n    @pointerleave=\"onPointerLeave\"\n    @pointerdown=\"onPointerDown\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <slot :trigger-props=\"{ 'aria-details': cardId }\" />\n    <!--\n      The card follows the trigger in the DOM, so Tab moves from the trigger into the card's\n      content while it shows.\n    -->\n    <span\n      :id=\"cardId\"\n      ref=\"panelEl\"\n      popover=\"manual\"\n      class=\"v-overlay v-floating v-panel v-hover-card-panel\"\n      :data-placement=\"placement\"\n      @beforetoggle=\"onBeforeToggle\"\n      @toggle=\"onToggle\"\n    >\n      <slot v-if=\"rendered\" name=\"content\" />\n    </span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-hover-card {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --hover-card-anchor;\n    /*\n     * A visible card sits in the top layer, which anchor resolution treats as following the\n     * whole document: without the scope, every card would attach to the last wrapper.\n     */\n    anchor-scope: --hover-card-anchor;\n  }\n\n  /*\n   * Compound with `.v-panel` so the card's spacing outranks the shared panel chrome whatever\n   * order the stylesheets load in.\n   */\n  .v-panel.v-hover-card-panel {\n    position-anchor: --hover-card-anchor;\n    gap: var(--vectis-space-2);\n    padding: var(--vectis-space-4);\n    inline-size: max-content;\n    max-inline-size: min(\n      var(--vectis-control-size-hover-card-max),\n      calc(100dvi - var(--vectis-space-8))\n    );\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    white-space: normal;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VHoverCard/VHoverCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,97 @@
+import { usePopover as e, usePopoverModel as t } from "../../composables/usePopover.js";
+import { isKeyboardFocus as n } from "../../utils/focus.js";
+import { useTimer as r } from "../../composables/useTimer.js";
+import { useEscapeDismiss as i } from "../../composables/useEscapeDismiss.js";
+import { createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeModels as l, openBlock as u, ref as d, renderSlot as f, unref as p, useId as m, useModel as h } from "vue";
+//#region src/components/VHoverCard/VHoverCard.vue?vue&type=script&setup=true&lang.ts
+var g = ["id", "data-placement"], _ = /*@__PURE__*/ c({
+	__name: "VHoverCard",
+	props: /*@__PURE__*/ l({
+		placement: { default: "bottom" },
+		openDelay: { default: 500 },
+		closeDelay: { default: 300 }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(c, { expose: l }) {
+		let _ = c, v = h(c, "open"), y = m(), b = d(null), x = d(null), { shown: S, syncShown: C, show: w, hide: T } = e(x), E = d(!1), D = r(), O = !1, k = !1, A = !1, j = (e) => !!x.value?.contains(e);
+		function M() {
+			return b.value?.querySelector(`[aria-details="${y}"]`) ?? null;
+		}
+		function N(e = !1) {
+			if (S.value) {
+				D.cancel();
+				return;
+			}
+			D.start(w, e ? 0 : _.openDelay);
+		}
+		function P() {
+			j(document.activeElement) && (A = !0, M()?.focus(), A = !1);
+		}
+		function F() {
+			D.cancel(), P(), T();
+		}
+		function I(e) {
+			e.pointerType !== "touch" && (O = !0, N());
+		}
+		function L(e) {
+			e.pointerType !== "touch" && (O = !1, k || D.start(F, _.closeDelay));
+		}
+		function R(e) {
+			j(e.target) || (O = !1, k = !1, F());
+		}
+		function z(e) {
+			if (!A) {
+				if (j(e.target)) {
+					k = !0, D.cancel();
+					return;
+				}
+				n(e.target) && (k = !0, N());
+			}
+		}
+		function B(e) {
+			b.value?.contains(e.relatedTarget) || (k = !1, O || F());
+		}
+		let V = i(() => {
+			O = !1, k = !1, F();
+		});
+		function H(e) {
+			C(e), S.value && (E.value = !0);
+		}
+		function U(e) {
+			H(e), v.value = S.value, V(S.value);
+		}
+		return t(v, () => S.value, w, F), l({
+			show: () => N(!0),
+			close: F,
+			el: x
+		}), (e, t) => (u(), o("span", {
+			ref_key: "rootEl",
+			ref: b,
+			class: "v-hover-card",
+			onPointerenter: I,
+			onPointerleave: L,
+			onPointerdown: R,
+			onFocusin: z,
+			onFocusout: B
+		}, [f(e.$slots, "default", { triggerProps: { "aria-details": p(y) } }), s("span", {
+			id: p(y),
+			ref_key: "panelEl",
+			ref: x,
+			popover: "manual",
+			class: "v-overlay v-floating v-panel v-hover-card-panel",
+			"data-placement": c.placement,
+			onBeforetoggle: H,
+			onToggle: U
+		}, [E.value ? f(e.$slots, "content", {}, void 0, void 0, 0) : a("", !0)], 40, g)], 544));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=VHoverCard.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VHoverCard.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VHoverCard/VHoverCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A manual popover driven by hover and keyboard focus: no stable HTML primitive opens a panel\n * with a delay, as `popover=\"hint\"` and interest invokers are missing at the browser floor.\n * Manual mode also leaves any open menu or popover untouched.\n */\n\nimport { ref, useId } from 'vue'\n\nimport { useEscapeDismiss } from '../../composables/useEscapeDismiss'\nimport { usePopover, usePopoverModel } from '../../composables/usePopover'\nimport { useTimer } from '../../composables/useTimer'\nimport { isKeyboardFocus } from '../../utils/focus'\n\n/** Which side of the trigger the card appears on. */\nexport type HoverCardPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n\n/** What the trigger has to carry: the link to the card holding its details. */\nexport type HoverCardTriggerProps = {\n  'aria-details': string\n}\n\ninterface HoverCardProps {\n  /**\n   * Which side of the trigger the card appears on. The browser flips it to the opposite side by\n   * itself when there is not enough room.\n   */\n  placement?: HoverCardPlacement\n  /**\n   * How long the pointer or the keyboard focus must rest on the trigger before the card opens,\n   * in milliseconds.\n   */\n  openDelay?: number\n  /**\n   * How long the card stays once the pointer has left both the trigger and the card, in\n   * milliseconds. It is the time to cross the gap between them.\n   */\n  closeDelay?: number\n}\n\nconst props = withDefaults(defineProps<HoverCardProps>(), {\n  placement: 'bottom',\n  openDelay: 500,\n  closeDelay: 300,\n})\n\n/** Whether the card is showing. Setting it opens or closes the card without any delay. */\nconst open = defineModel<boolean>('open', { default: false })\n\ndefineSlots<{\n  /** The trigger, usually a link. Bind the `triggerProps` it receives onto it. */\n  default(props: { triggerProps: HoverCardTriggerProps }): unknown\n  /** What the card contains. It may hold links and buttons, and is rendered on first opening. */\n  content?(): unknown\n}>()\n\nconst cardId = useId()\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\nconst { shown, syncShown, show: showPanel, hide: hidePanel } = usePopover(panelEl)\n\n// @ssr\n/*\n * The card is a `<span>` and its content mounts on first opening, so a trigger inside a\n * paragraph still produces valid server HTML: the parser closes a `<p>` at the first `<div>` or\n * `<p>` it meets, which would break hydration. The content then stays for the exit transition.\n */\nconst rendered = ref(false)\n\nconst timer = useTimer()\n\nlet hovered = false\nlet focused = false\n// Set while the card hands the focus back to its trigger, whose keyboard focus would reopen it.\nlet returningFocus = false\n\nconst inCard = (node: EventTarget | null) => !!panelEl.value?.contains(node as Node | null)\n\nfunction trigger() {\n  return rootEl.value?.querySelector<HTMLElement>(`[aria-details=\"${cardId}\"]`) ?? null\n}\n\n// @core\nfunction show(immediate = false) {\n  if (shown.value) {\n    timer.cancel()\n    return\n  }\n  // A delay of 0 runs the callback synchronously; the convention useTimer documents.\n  timer.start(showPanel, immediate ? 0 : props.openDelay)\n}\n\n// @a11y\n/*\n * The trigger takes the focus back before the card hides. Left inside, the focus would follow\n * the browser's own restoration, which returns it to whatever held it when the card OPENED: for\n * a card opened by hover, an unrelated control elsewhere on the page.\n */\nfunction returnFocus() {\n  if (!inCard(document.activeElement)) return\n  returningFocus = true\n  trigger()?.focus()\n  returningFocus = false\n}\n\nfunction hide() {\n  timer.cancel()\n  returnFocus()\n  hidePanel()\n}\n\n// @a11y\n// There is no hover on a touch screen: a tap keeps its usual meaning and opens nothing, so\n// whatever the card shows must also be reachable through the trigger's destination.\nfunction onPointerEnter(event: PointerEvent) {\n  if (event.pointerType === 'touch') return\n  hovered = true\n  show()\n}\n\nfunction onPointerLeave(event: PointerEvent) {\n  if (event.pointerType === 'touch') return\n  hovered = false\n  if (!focused) timer.start(hide, props.closeDelay)\n}\n\n/*\n * Pressing the trigger closes the card so it cannot stand over a dialog or a page the trigger\n * opens. A press inside the card is a use of its content and keeps it.\n */\nfunction onPointerDown(event: PointerEvent) {\n  if (inCard(event.target)) return\n  hovered = false\n  focused = false\n  hide()\n}\n\n// @a11y\n/*\n * Only the KEYBOARD focus opens the card from the trigger, read from `:focus-visible` as VTooltip\n * does: a focus given by a click opens nothing. Any focus inside the card keeps it, since a\n * click on one of its controls is still a use of it.\n */\nfunction onFocusIn(event: FocusEvent) {\n  if (returningFocus) return\n  if (inCard(event.target)) {\n    focused = true\n    timer.cancel()\n    return\n  }\n  if (!isKeyboardFocus(event.target)) return\n  focused = true\n  show()\n}\n\nfunction onFocusOut(event: FocusEvent) {\n  if (rootEl.value?.contains(event.relatedTarget as Node | null)) return\n  focused = false\n  if (!hovered) hide()\n}\n\n// Escape closes the card, handing a focus inside it back to the trigger.\nconst listen = useEscapeDismiss(() => {\n  hovered = false\n  focused = false\n  hide()\n})\n\nfunction onBeforeToggle(event: Event) {\n  syncShown(event)\n  if (shown.value) rendered.value = true\n}\n\n// The toggle event is synchronous, so Escape works from the moment the card shows.\nfunction onToggle(event: Event) {\n  onBeforeToggle(event)\n  open.value = shown.value\n  listen(shown.value)\n}\n\n// A model closing the card goes through `hide`, which hands a focus inside it back as well.\nusePopoverModel(open, () => shown.value, showPanel, hide)\n\ndefineExpose({\n  /** Opens the card at once, without the delay. */\n  show: () => show(true),\n  /** Closes the card, handing a focus inside it back to the trigger. */\n  close: hide,\n  /** The card element. */\n  el: panelEl,\n})\n</script>\n\n<template>\n  <span\n    ref=\"rootEl\"\n    class=\"v-hover-card\"\n    @pointerenter=\"onPointerEnter\"\n    @pointerleave=\"onPointerLeave\"\n    @pointerdown=\"onPointerDown\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <slot :trigger-props=\"{ 'aria-details': cardId }\" />\n    <!--\n      The card follows the trigger in the DOM, so Tab moves from the trigger into the card's\n      content while it shows.\n    -->\n    <span\n      :id=\"cardId\"\n      ref=\"panelEl\"\n      popover=\"manual\"\n      class=\"v-overlay v-floating v-panel v-hover-card-panel\"\n      :data-placement=\"placement\"\n      @beforetoggle=\"onBeforeToggle\"\n      @toggle=\"onToggle\"\n    >\n      <slot v-if=\"rendered\" name=\"content\" />\n    </span>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-hover-card {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --hover-card-anchor;\n    /*\n     * A visible card sits in the top layer, which anchor resolution treats as following the\n     * whole document: without the scope, every card would attach to the last wrapper.\n     */\n    anchor-scope: --hover-card-anchor;\n  }\n\n  /*\n   * Compound with `.v-panel` so the card's spacing outranks the shared panel chrome whatever\n   * order the stylesheets load in.\n   */\n  .v-panel.v-hover-card-panel {\n    position-anchor: --hover-card-anchor;\n    gap: var(--vectis-space-2);\n    padding: var(--vectis-space-4);\n    inline-size: max-content;\n    max-inline-size: min(\n      var(--vectis-control-size-hover-card-max),\n      calc(100dvi - var(--vectis-space-8))\n    );\n    font-size: var(--vectis-text-body-md-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    white-space: normal;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAoDA,IAAM,IAAQ,GAOR,IAAO,EAAoB,GAAC,MAA0B,GAStD,IAAS,EAAM,GACf,IAAS,EAAwB,IAAI,GACrC,IAAU,EAAwB,IAAI,GACtC,EAAE,UAAO,cAAW,MAAM,GAAW,MAAM,MAAc,EAAW,CAAO,GAQ3E,IAAW,EAAI,EAAK,GAEpB,IAAQ,EAAS,GAEnB,IAAU,IACV,IAAU,IAEV,IAAiB,IAEf,KAAU,MAA6B,CAAC,CAAC,EAAQ,OAAO,SAAS,CAAmB;EAE1F,SAAS,IAAU;GACjB,OAAO,EAAO,OAAO,cAA2B,kBAAkB,EAAO,GAAG,KAAK;EACnF;EAGA,SAAS,EAAK,IAAY,IAAO;GAC/B,IAAI,EAAM,OAAO;IACf,EAAM,OAAO;IACb;GACF;GAEA,EAAM,MAAM,GAAW,IAAY,IAAI,EAAM,SAAS;EACxD;EAQA,SAAS,IAAc;GAChB,EAAO,SAAS,aAAa,MAClC,IAAiB,IACjB,EAAQ,CAAC,EAAE,MAAM,GACjB,IAAiB;EACnB;EAEA,SAAS,IAAO;GAGd,AAFA,EAAM,OAAO,GACb,EAAY,GACZ,EAAU;EACZ;EAKA,SAAS,EAAe,GAAqB;GACvC,EAAM,gBAAgB,YAC1B,IAAU,IACV,EAAK;EACP;EAEA,SAAS,EAAe,GAAqB;GACvC,EAAM,gBAAgB,YAC1B,IAAU,IACL,KAAS,EAAM,MAAM,GAAM,EAAM,UAAU;EAClD;EAMA,SAAS,EAAc,GAAqB;GACtC,EAAO,EAAM,MAAM,MACvB,IAAU,IACV,IAAU,IACV,EAAK;EACP;EAQA,SAAS,EAAU,GAAmB;GAChC,QACJ;QAAI,EAAO,EAAM,MAAM,GAAG;KAExB,AADA,IAAU,IACV,EAAM,OAAO;KACb;IACF;IACK,EAAgB,EAAM,MAAM,MACjC,IAAU,IACV,EAAK;GAHL;EAIF;EAEA,SAAS,EAAW,GAAmB;GACjC,EAAO,OAAO,SAAS,EAAM,aAA4B,MAC7D,IAAU,IACL,KAAS,EAAK;EACrB;EAGA,IAAM,IAAS,QAAuB;GAGpC,AAFA,IAAU,IACV,IAAU,IACV,EAAK;EACP,CAAC;EAED,SAAS,EAAe,GAAc;GAEpC,AADA,EAAU,CAAK,GACX,EAAM,UAAO,EAAS,QAAQ;EACpC;EAGA,SAAS,EAAS,GAAc;GAG9B,AAFA,EAAe,CAAK,GACpB,EAAK,QAAQ,EAAM,OACnB,EAAO,EAAM,KAAK;EACpB;SAGA,EAAgB,SAAY,EAAM,OAAO,GAAW,CAAI,GAExD,EAAa;GAEX,YAAY,EAAK,EAAI;GAErB,OAAO;GAEP,IAAI;EACN,CAAC,mBAIC,EAyBO,QAAA;YAxBD;GAAJ,KAAI;GACJ,OAAM;GACL,gBAAc;GACd,gBAAc;GACd,eAAa;GACb,WAAS;GACT,YAAU;MAEX,EAAoD,EAAA,QAAA,WAAA,EAA7C,cAAa,EAAA,gBAAoB,EAAA,CAAA,EAAM,EAAA,CAAA,GAK9C,EAUO,QAAA;GATJ,IAAI,EAAA,CAAA;YACD;GAAJ,KAAI;GACJ,SAAQ;GACR,OAAM;GACL,kBAAgB,EAAA;GAChB,gBAAc;GACN;MAEG,EAAA,QAAZ,EAAuC,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,EAAA,IAAA,EAAA,CAAA,GAAA,IAAA,CAAA,CAAA,GAAA,GAAA"}

package/dist/components/VIcon/icons/add.d.ts

@@ -0,0 +1,5 @@
+/** Material Symbols Rounded `add`. */
+export declare const add: {
+    readonly name: "add";
+    readonly paths: readonly ["M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z"];
+};

package/dist/components/VIcon/icons/add.js

@@ -0,0 +1,9 @@
+//#region src/components/VIcon/icons/add.ts
+var e = {
+	name: "add",
+	paths: ["M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z"]
+};
+//#endregion
+export { e as add };
+
+//# sourceMappingURL=add.js.map

package/dist/components/VIcon/icons/add.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add.js","names":[],"sources":["../../../../src/components/VIcon/icons/add.ts"],"sourcesContent":["/*\n * GENERATED FILE — do not edit by hand.\n * Regenerate: pnpm icons  ·  Source: scripts/build-icons.ts\n *\n * Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24)\n * google/material-design-icons @ 528cb964c01fb2b09bc3b9208f82b6d8f8c1c1e2\n * Apache-2.0 licence © Google.\n */\nimport type { BuiltinIcon } from '../types'\n\n/** Material Symbols Rounded `add`. */\nexport const add = {\n  name: 'add',\n  paths: [\n    'M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z',\n  ],\n} as const satisfies BuiltinIcon\n"],"mappings":";AAWA,IAAa,IAAM;CACjB,MAAM;CACN,OAAO,CACL,uOACF;AACF"}

package/dist/components/VIcon/icons/colorize.d.ts

@@ -0,0 +1,5 @@
+/** Material Symbols Rounded `colorize`, outline then filled. */
+export declare const colorize: {
+    readonly name: "colorize";
+    readonly paths: readonly ["M120-160v-117q0-16 6-30.5t17-25.5l335-335-58-56 58-56 76 76 124-124q5-5 12.5-8t15.5-3q8 0 15 3t13 8l94 94q5 6 8 13t3 15q0 8-3 15.5t-8 12.5L705-555l76 78-57 57-56-58-335 335q-11 11-25.5 17t-30.5 6H160q-17 0-28.5-11.5T120-160Zm80-40h78l332-334-76-76-334 332v78Zm447-410 96-96-37-37-96 96 37 37Zm0 0-37-37 37 37Z", "M120-160v-117q0-16 6-30.5t17-25.5l335-335-58-56 58-56 76 76 124-124q5-5 12.5-8t15.5-3q8 0 15 3t13 8l94 94q5 6 8 13t3 15q0 8-3 15.5t-8 12.5L705-555l76 78-57 57-56-58-335 335q-11 11-25.5 17t-30.5 6H160q-17 0-28.5-11.5T120-160Zm80-40h78l332-334-76-76-334 332v78Z"];
+};

package/dist/components/VIcon/icons/colorize.js

@@ -0,0 +1,9 @@
+//#region src/components/VIcon/icons/colorize.ts
+var e = {
+	name: "colorize",
+	paths: ["M120-160v-117q0-16 6-30.5t17-25.5l335-335-58-56 58-56 76 76 124-124q5-5 12.5-8t15.5-3q8 0 15 3t13 8l94 94q5 6 8 13t3 15q0 8-3 15.5t-8 12.5L705-555l76 78-57 57-56-58-335 335q-11 11-25.5 17t-30.5 6H160q-17 0-28.5-11.5T120-160Zm80-40h78l332-334-76-76-334 332v78Zm447-410 96-96-37-37-96 96 37 37Zm0 0-37-37 37 37Z", "M120-160v-117q0-16 6-30.5t17-25.5l335-335-58-56 58-56 76 76 124-124q5-5 12.5-8t15.5-3q8 0 15 3t13 8l94 94q5 6 8 13t3 15q0 8-3 15.5t-8 12.5L705-555l76 78-57 57-56-58-335 335q-11 11-25.5 17t-30.5 6H160q-17 0-28.5-11.5T120-160Zm80-40h78l332-334-76-76-334 332v78Z"]
+};
+//#endregion
+export { e as colorize };
+
+//# sourceMappingURL=colorize.js.map

package/dist/components/VIcon/icons/colorize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorize.js","names":[],"sources":["../../../../src/components/VIcon/icons/colorize.ts"],"sourcesContent":["/*\n * GENERATED FILE — do not edit by hand.\n * Regenerate: pnpm icons  ·  Source: scripts/build-icons.ts\n *\n * Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24)\n * google/material-design-icons @ 528cb964c01fb2b09bc3b9208f82b6d8f8c1c1e2\n * Apache-2.0 licence © Google.\n */\nimport type { BuiltinIcon } from '../types'\n\n/** Material Symbols Rounded `colorize`, outline then filled. */\nexport const colorize = {\n  name: 'colorize',\n  paths: [\n    'M120-160v-117q0-16 6-30.5t17-25.5l335-335-58-56 58-56 76 76 124-124q5-5 12.5-8t15.5-3q8 0 15 3t13 8l94 94q5 6 8 13t3 15q0 8-3 15.5t-8 12.5L705-555l76 78-57 57-56-58-335 335q-11 11-25.5 17t-30.5 6H160q-17 0-28.5-11.5T120-160Zm80-40h78l332-334-76-76-334 332v78Zm447-410 96-96-37-37-96 96 37 37Zm0 0-37-37 37 37Z',\n    'M120-160v-117q0-16 6-30.5t17-25.5l335-335-58-56 58-56 76 76 124-124q5-5 12.5-8t15.5-3q8 0 15 3t13 8l94 94q5 6 8 13t3 15q0 8-3 15.5t-8 12.5L705-555l76 78-57 57-56-58-335 335q-11 11-25.5 17t-30.5 6H160q-17 0-28.5-11.5T120-160Zm80-40h78l332-334-76-76-334 332v78Z',\n  ],\n} as const satisfies BuiltinIcon\n"],"mappings":";AAWA,IAAa,IAAW;CACtB,MAAM;CACN,OAAO,CACL,yTACA,qQACF;AACF"}