vectis-ui 0.8.1 → 0.9.0

package/dist/components/VFilePicker/fileKind.d.ts

@@ -1,4 +1,4 @@
 import { FileCandidate } from '../../utils/file.js';
-export type FileKind = 'image' | 'pdf' | 'audio' | 'video' | 'archive' | 'spreadsheet' | 'code' | 'file';
+export type FilePickerKind = 'image' | 'pdf' | 'audio' | 'video' | 'archive' | 'spreadsheet' | 'code' | 'file';
 /** Works out which kind a file belongs to. */
-export declare function fileKind(file: FileCandidate): FileKind;
+export declare function fileKind(file: FileCandidate): FilePickerKind;

package/dist/components/VFilePicker/fileKind.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileKind.js","names":[],"sources":["../../../src/components/VFilePicker/fileKind.ts"],"sourcesContent":["/**\n * What KIND of thing a file is, for the sole purpose of choosing an icon. It is\n * deliberately coarse: the question is which of eight pictures to show, not how to\n * classify every type in existence.\n *\n * The answer comes from the type the browser reports FIRST, and from the extension\n * afterwards. That order is the contract: the reported type is authoritative when there\n * IS one, but it is empty far more often than one expects — an extension the operating\n * system does not know, certain Linux setups — which is why the extension has to be\n * there as a fallback rather than as a first resort.\n *\n * The module is pure and knows nothing of Vue. It lives in the component's folder for\n * the usual reason: a single consumer, so it does not qualify as shared code — promote\n * it the day a second one appears.\n *\n * What is NOT here is which icon each kind takes. That belongs to VFilePicker, which\n * exposes it as a prop a consumer can override.\n */\n\nimport type { FileCandidate } from '../../utils/file'\n\nexport type FileKind =\n  'image' | 'pdf' | 'audio' | 'video' | 'archive' | 'spreadsheet' | 'code' | 'file'\n\nconst MIME_KINDS: Record<string, FileKind> = {\n  'application/pdf': 'pdf',\n  'application/zip': 'archive',\n  'application/x-zip-compressed': 'archive',\n  'application/vnd.rar': 'archive',\n  'application/x-7z-compressed': 'archive',\n  'application/x-tar': 'archive',\n  'application/gzip': 'archive',\n  'text/csv': 'spreadsheet',\n  'application/vnd.ms-excel': 'spreadsheet',\n  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'spreadsheet',\n  'application/vnd.oasis.opendocument.spreadsheet': 'spreadsheet',\n  'application/json': 'code',\n  'application/xml': 'code',\n  'text/xml': 'code',\n  'text/html': 'code',\n  'text/css': 'code',\n  'text/javascript': 'code',\n  'application/javascript': 'code',\n}\n\nconst EXTENSION_KINDS: Record<string, FileKind> = {\n  avif: 'image',\n  bmp: 'image',\n  gif: 'image',\n  heic: 'image',\n  heif: 'image',\n  ico: 'image',\n  jpeg: 'image',\n  jpg: 'image',\n  png: 'image',\n  svg: 'image',\n  tif: 'image',\n  tiff: 'image',\n  webp: 'image',\n\n  pdf: 'pdf',\n\n  aac: 'audio',\n  flac: 'audio',\n  m4a: 'audio',\n  mp3: 'audio',\n  ogg: 'audio',\n  wav: 'audio',\n\n  avi: 'video',\n  mkv: 'video',\n  mov: 'video',\n  mp4: 'video',\n  webm: 'video',\n\n  '7z': 'archive',\n  bz2: 'archive',\n  gz: 'archive',\n  iso: 'archive',\n  rar: 'archive',\n  tar: 'archive',\n  xz: 'archive',\n  zip: 'archive',\n\n  csv: 'spreadsheet',\n  ods: 'spreadsheet',\n  tsv: 'spreadsheet',\n  xls: 'spreadsheet',\n  xlsx: 'spreadsheet',\n\n  css: 'code',\n  go: 'code',\n  html: 'code',\n  java: 'code',\n  js: 'code',\n  json: 'code',\n  jsx: 'code',\n  py: 'code',\n  rb: 'code',\n  rs: 'code',\n  scss: 'code',\n  sh: 'code',\n  ts: 'code',\n  tsx: 'code',\n  xml: 'code',\n  yaml: 'code',\n  yml: 'code',\n}\n\n/** Works out which kind a file belongs to. */\nexport function fileKind(file: FileCandidate): FileKind {\n  const type = file.type.toLowerCase()\n\n  // The whole families first: matching on the family covers every image, audio and\n  // video format, including the ones no table will ever list.\n  if (type.startsWith('image/')) return 'image'\n  if (type.startsWith('audio/')) return 'audio'\n  if (type.startsWith('video/')) return 'video'\n\n  const byMime = lookup(MIME_KINDS, type)\n  if (byMime) return byMime\n\n  // TRAP — the dot must be found PAST the first character and not at it: a file named\n  // `.gitignore` has no extension at all, it has a name beginning with a dot.\n  const dot = file.name.lastIndexOf('.')\n  const extension = dot > 0 ? file.name.slice(dot + 1).toLowerCase() : ''\n  return lookup(EXTENSION_KINDS, extension) ?? 'file'\n}\n\n/**\n * TRAP — the tables are object literals, so a bare index also answers for what they\n * INHERIT: a file named `x.constructor` would get a function back, and the component would\n * look its icon up with it. Only a table's own keys are kinds.\n */\nconst lookup = (table: Record<string, FileKind>, key: string): FileKind | undefined =>\n  Object.hasOwn(table, key) ? table[key] : undefined\n"],"mappings":";AAwBA,IAAM,IAAuC;CAC3C,mBAAmB;CACnB,mBAAmB;CACnB,gCAAgC;CAChC,uBAAuB;CACvB,+BAA+B;CAC/B,qBAAqB;CACrB,oBAAoB;CACpB,YAAY;CACZ,4BAA4B;CAC5B,qEAAqE;CACrE,kDAAkD;CAClD,oBAAoB;CACpB,mBAAmB;CACnB,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,0BAA0B;AAC5B,GAEM,IAA4C;CAChD,MAAM;CACN,KAAK;CACL,KAAK;CACL,MAAM;CACN,MAAM;CACN,KAAK;CACL,MAAM;CACN,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,MAAM;CACN,MAAM;CAEN,KAAK;CAEL,KAAK;CACL,MAAM;CACN,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,MAAM;CAEN,MAAM;CACN,KAAK;CACL,IAAI;CACJ,KAAK;CACL,KAAK;CACL,KAAK;CACL,IAAI;CACJ,KAAK;CAEL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,MAAM;CAEN,KAAK;CACL,IAAI;CACJ,MAAM;CACN,MAAM;CACN,IAAI;CACJ,MAAM;CACN,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;AACP;AAGA,SAAgB,EAAS,GAA+B;CACtD,IAAM,IAAO,EAAK,KAAK,YAAY;CAInC,IAAI,EAAK,WAAW,QAAQ,GAAG,OAAO;CACtC,IAAI,EAAK,WAAW,QAAQ,GAAG,OAAO;CACtC,IAAI,EAAK,WAAW,QAAQ,GAAG,OAAO;CAEtC,IAAM,IAAS,EAAO,GAAY,CAAI;CACtC,IAAI,GAAQ,OAAO;CAInB,IAAM,IAAM,EAAK,KAAK,YAAY,GAAG;CAErC,OAAO,EAAO,GADI,IAAM,IAAI,EAAK,KAAK,MAAM,IAAM,CAAC,CAAC,CAAC,YAAY,IAAI,EAC7B,KAAK;AAC/C;AAOA,IAAM,KAAU,GAAiC,MAC/C,OAAO,OAAO,GAAO,CAAG,IAAI,EAAM,KAAO,KAAA"}
+{"version":3,"file":"fileKind.js","names":[],"sources":["../../../src/components/VFilePicker/fileKind.ts"],"sourcesContent":["/**\n * What KIND of thing a file is, for the sole purpose of choosing an icon. It is\n * deliberately coarse: the question is which of eight pictures to show, not how to\n * classify every type in existence.\n *\n * The answer comes from the type the browser reports FIRST, and from the extension\n * afterwards. That order is the contract: the reported type is authoritative when there\n * IS one, but it is empty far more often than one expects — an extension the operating\n * system does not know, certain Linux setups — which is why the extension has to be\n * there as a fallback rather than as a first resort.\n *\n * The module is pure and knows nothing of Vue. It lives in the component's folder for\n * the usual reason: a single consumer, so it does not qualify as shared code — promote\n * it the day a second one appears.\n *\n * What is NOT here is which icon each kind takes. That belongs to VFilePicker, which\n * exposes it as a prop a consumer can override.\n */\n\nimport type { FileCandidate } from '../../utils/file'\n\nexport type FilePickerKind =\n  'image' | 'pdf' | 'audio' | 'video' | 'archive' | 'spreadsheet' | 'code' | 'file'\n\nconst MIME_KINDS: Record<string, FilePickerKind> = {\n  'application/pdf': 'pdf',\n  'application/zip': 'archive',\n  'application/x-zip-compressed': 'archive',\n  'application/vnd.rar': 'archive',\n  'application/x-7z-compressed': 'archive',\n  'application/x-tar': 'archive',\n  'application/gzip': 'archive',\n  'text/csv': 'spreadsheet',\n  'application/vnd.ms-excel': 'spreadsheet',\n  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'spreadsheet',\n  'application/vnd.oasis.opendocument.spreadsheet': 'spreadsheet',\n  'application/json': 'code',\n  'application/xml': 'code',\n  'text/xml': 'code',\n  'text/html': 'code',\n  'text/css': 'code',\n  'text/javascript': 'code',\n  'application/javascript': 'code',\n}\n\nconst EXTENSION_KINDS: Record<string, FilePickerKind> = {\n  avif: 'image',\n  bmp: 'image',\n  gif: 'image',\n  heic: 'image',\n  heif: 'image',\n  ico: 'image',\n  jpeg: 'image',\n  jpg: 'image',\n  png: 'image',\n  svg: 'image',\n  tif: 'image',\n  tiff: 'image',\n  webp: 'image',\n\n  pdf: 'pdf',\n\n  aac: 'audio',\n  flac: 'audio',\n  m4a: 'audio',\n  mp3: 'audio',\n  ogg: 'audio',\n  wav: 'audio',\n\n  avi: 'video',\n  mkv: 'video',\n  mov: 'video',\n  mp4: 'video',\n  webm: 'video',\n\n  '7z': 'archive',\n  bz2: 'archive',\n  gz: 'archive',\n  iso: 'archive',\n  rar: 'archive',\n  tar: 'archive',\n  xz: 'archive',\n  zip: 'archive',\n\n  csv: 'spreadsheet',\n  ods: 'spreadsheet',\n  tsv: 'spreadsheet',\n  xls: 'spreadsheet',\n  xlsx: 'spreadsheet',\n\n  css: 'code',\n  go: 'code',\n  html: 'code',\n  java: 'code',\n  js: 'code',\n  json: 'code',\n  jsx: 'code',\n  py: 'code',\n  rb: 'code',\n  rs: 'code',\n  scss: 'code',\n  sh: 'code',\n  ts: 'code',\n  tsx: 'code',\n  xml: 'code',\n  yaml: 'code',\n  yml: 'code',\n}\n\n/** Works out which kind a file belongs to. */\nexport function fileKind(file: FileCandidate): FilePickerKind {\n  const type = file.type.toLowerCase()\n\n  // The whole families first: matching on the family covers every image, audio and\n  // video format, including the ones no table will ever list.\n  if (type.startsWith('image/')) return 'image'\n  if (type.startsWith('audio/')) return 'audio'\n  if (type.startsWith('video/')) return 'video'\n\n  const byMime = lookup(MIME_KINDS, type)\n  if (byMime) return byMime\n\n  // TRAP — the dot must be found PAST the first character and not at it: a file named\n  // `.gitignore` has no extension at all, it has a name beginning with a dot.\n  const dot = file.name.lastIndexOf('.')\n  const extension = dot > 0 ? file.name.slice(dot + 1).toLowerCase() : ''\n  return lookup(EXTENSION_KINDS, extension) ?? 'file'\n}\n\n/**\n * TRAP — the tables are object literals, so a bare index also answers for what they\n * INHERIT: a file named `x.constructor` would get a function back, and the component would\n * look its icon up with it. Only a table's own keys are kinds.\n */\nconst lookup = (table: Record<string, FilePickerKind>, key: string): FilePickerKind | undefined =>\n  Object.hasOwn(table, key) ? table[key] : undefined\n"],"mappings":";AAwBA,IAAM,IAA6C;CACjD,mBAAmB;CACnB,mBAAmB;CACnB,gCAAgC;CAChC,uBAAuB;CACvB,+BAA+B;CAC/B,qBAAqB;CACrB,oBAAoB;CACpB,YAAY;CACZ,4BAA4B;CAC5B,qEAAqE;CACrE,kDAAkD;CAClD,oBAAoB;CACpB,mBAAmB;CACnB,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,0BAA0B;AAC5B,GAEM,IAAkD;CACtD,MAAM;CACN,KAAK;CACL,KAAK;CACL,MAAM;CACN,MAAM;CACN,KAAK;CACL,MAAM;CACN,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,MAAM;CACN,MAAM;CAEN,KAAK;CAEL,KAAK;CACL,MAAM;CACN,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,MAAM;CAEN,MAAM;CACN,KAAK;CACL,IAAI;CACJ,KAAK;CACL,KAAK;CACL,KAAK;CACL,IAAI;CACJ,KAAK;CAEL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,MAAM;CAEN,KAAK;CACL,IAAI;CACJ,MAAM;CACN,MAAM;CACN,IAAI;CACJ,MAAM;CACN,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,KAAK;CACL,KAAK;CACL,MAAM;CACN,KAAK;AACP;AAGA,SAAgB,EAAS,GAAqC;CAC5D,IAAM,IAAO,EAAK,KAAK,YAAY;CAInC,IAAI,EAAK,WAAW,QAAQ,GAAG,OAAO;CACtC,IAAI,EAAK,WAAW,QAAQ,GAAG,OAAO;CACtC,IAAI,EAAK,WAAW,QAAQ,GAAG,OAAO;CAEtC,IAAM,IAAS,EAAO,GAAY,CAAI;CACtC,IAAI,GAAQ,OAAO;CAInB,IAAM,IAAM,EAAK,KAAK,YAAY,GAAG;CAErC,OAAO,EAAO,GADI,IAAM,IAAI,EAAK,KAAK,MAAM,IAAM,CAAC,CAAC,CAAC,YAAY,IAAI,EAC7B,KAAK;AAC/C;AAOA,IAAM,KAAU,GAAuC,MACrD,OAAO,OAAO,GAAO,CAAG,IAAI,EAAM,KAAO,KAAA"}

package/dist/components/VHotkeys/VHotkeys.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-hotkeys{vertical-align:middle;font-family:var(--vectis-text-family);font-size:var(--control-font-size);--hotkeys-pad:var(--control-padding-inline);justify-content:center;align-items:center;display:inline-flex}.v-hotkeys-keys{align-items:center;gap:var(--control-gap);display:inline-flex}.v-hotkeys-key{font-family:inherit;font-size:inherit;font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);justify-content:center;align-items:center;display:inline-flex}.v-hotkeys[data-variant=soft]{--hotkeys-bg:color-mix(in oklab, currentcolor, transparent 90%);--hotkeys-border:transparent;--hotkeys-shadow:none}.v-hotkeys[data-variant=outlined]{--hotkeys-bg:transparent;--hotkeys-border:color-mix(in oklab, currentcolor, transparent 70%);--hotkeys-shadow:none}.v-hotkeys[data-variant=elevated]{--hotkeys-bg:color-mix(in oklab, currentcolor, transparent 94%);--hotkeys-border:transparent;--hotkeys-shadow:var(--vectis-shadow-sm)}.v-hotkeys[data-attached]{--hotkeys-pad:var(--control-gap)}.v-hotkeys[data-attached],.v-hotkeys:not([data-attached]) .v-hotkeys-key{height:var(--control-height);min-inline-size:var(--control-height);padding-inline:var(--hotkeys-pad);border:1px solid var(--hotkeys-border);border-radius:var(--vectis-radius-interactive);background:var(--hotkeys-bg);box-shadow:var(--hotkeys-shadow)}.v-hotkeys-separator{color:color-mix(in oklab, currentcolor, transparent 40%)}}
+@layer vectis.components{.v-hotkeys{vertical-align:middle;font-family:var(--vectis-text-family);font-size:var(--control-font-size);--hotkeys-pad:var(--control-padding-inline);justify-content:center;align-items:center;display:inline-flex}.v-hotkeys-keys{align-items:center;gap:var(--control-gap);display:inline-flex}.v-hotkeys-key{font-family:inherit;font-size:inherit;font-weight:var(--vectis-text-control-weight);line-height:var(--vectis-text-control-leading);justify-content:center;align-items:center;display:inline-flex}.v-hotkeys[data-variant=soft]{--hotkeys-bg:color-mix(in oklab, currentcolor, transparent 90%);--hotkeys-border:transparent;--hotkeys-shadow:none}.v-hotkeys[data-variant=outline]{--hotkeys-bg:transparent;--hotkeys-border:color-mix(in oklab, currentcolor, transparent 70%);--hotkeys-shadow:none}.v-hotkeys[data-variant=elevated]{--hotkeys-bg:color-mix(in oklab, currentcolor, transparent 94%);--hotkeys-border:transparent;--hotkeys-shadow:var(--vectis-shadow-sm)}.v-hotkeys[data-attached]{--hotkeys-pad:var(--control-gap)}.v-hotkeys[data-attached],.v-hotkeys:not([data-attached]) .v-hotkeys-key{height:var(--control-height);min-inline-size:var(--control-height);padding-inline:var(--hotkeys-pad);border:1px solid var(--hotkeys-border);border-radius:var(--vectis-radius-interactive);background:var(--hotkeys-bg);box-shadow:var(--hotkeys-shadow)}.v-hotkeys-separator{color:color-mix(in oklab, currentcolor, transparent 40%)}@media (forced-colors:active){.v-hotkeys[data-variant]{--hotkeys-border:CanvasText}}}

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

@@ -1,31 +1,33 @@
 import { HotkeysPlatform } from './platform.js';
-export type HotkeysVariant = 'soft' | 'outlined' | 'elevated';
+/** How a key cap is drawn. */
+export type HotkeysVariant = 'soft' | 'outline' | 'elevated';
+/** The size of the caps, from the two smallest steps of the control scale. */
 export type HotkeysSize = 'xs' | 'sm';
 interface HotkeysProps {
     /**
      * The combination, `+`-separated: `mod+k`, `ctrl+shift+p`, `alt+enter`, `esc`.
-     * Case- and space-insensitive. `mod` is the CROSS-PLATFORM modifier — ⌘ on
+     * Case- and space-insensitive. `mod` is the CROSS-PLATFORM modifier: ⌘ on
      * macOS, Ctrl everywhere else; `meta` is the literal Command/Windows/Super key.
      * Aliases: cmd/command/win/super → meta, control → ctrl, option/opt → alt,
      * return → enter, escape → esc, del → delete, arrowup… → up…. An unknown token
      * is displayed as declared (`k` → K, `f5` → F5). The `+` key is `plus`.
      */
     keys: string;
-    /** How a key cap is drawn: tinted, outlined, or raised off the page. */
+    /** How a key cap is drawn: tinted (`soft`), outlined (`outline`), or raised off the page (`elevated`). */
     variant?: HotkeysVariant;
     /**
      * Draws the whole combination as a SINGLE key rather than as several: the decoration
      * moves from each cap to the shortcut as a whole, so the separator ends up inside
-     * the key instead of between two of them. It is purely visual — the markup and the
+     * the key instead of between two of them. It is purely visual: the markup and the
      * announced name are identical either way.
      */
     attached?: boolean;
-    /** The size of the caps, `xs` by default — a shortcut is chrome beside other text. */
+    /** The size of the caps, `xs` by default: a shortcut is chrome beside other text. */
     size?: HotkeysSize;
     /** Takes 4px off the height, leaving the padding and the text as they are. */
     compact?: boolean;
     /**
-     * Forces the keyboard's OS instead of detecting it — for a deterministic
+     * Forces the keyboard's OS instead of detecting it, for a deterministic
      * rendering (stories, tests, a table showing all three) or a host that already
      * knows (Electron, Tauri, a server reading the User-Agent).
      */
@@ -43,8 +45,8 @@ interface HotkeysProps {
     listen?: boolean;
     /**
      * While listening, lets the browser go on doing whatever the combination normally
-     * does. Left out, the browser is stopped — which is the entire point of taking over
-     * something like ⌘K.
+     * does. Left out, the browser is stopped, which is the entire point of taking over
+     * something like ⌘K. Escape is never stopped: it has to stay the close request of dialogs.
      */
     allowDefault?: boolean;
     /**

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 * A keyboard shortcut, DISPLAYED. Written as a plain string — `mod+k` — and rendered with\n * the symbols of the system the reader is on: ⌘K on a Mac, Ctrl+K elsewhere.\n *\n * Two things here are unique in the library. It carries the ONLY `navigator` read, in\n * `onMounted` and nowhere else: the server cannot know the OS and the first client render\n * has to match what it sent, so a Mac visitor pays one frame of `Ctrl`. The `platform` prop\n * is the escape hatch, and what makes stories and tests deterministic.\n *\n * And `listen` attaches the library's ONLY document-level listener, which is why it must be\n * asked for: a component whose job is to display a shortcut must not silently capture the\n * page's keyboard.\n *\n * It is not interactive and not focusable, so it carries no hover, active or focus rule, and\n * therefore no transition and no reduced-motion block. That absence is deliberate — do not\n * copy VButton's state rules into it.\n */\n\nimport { computed, onBeforeUnmount, 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\nexport type HotkeysVariant = 'soft' | 'outlined' | 'elevated'\nexport type HotkeysSize = 'xs' | 'sm'\n\ninterface HotkeysProps {\n  /**\n   * The combination, `+`-separated: `mod+k`, `ctrl+shift+p`, `alt+enter`, `esc`.\n   * Case- and space-insensitive. `mod` is the CROSS-PLATFORM modifier — ⌘ on\n   * macOS, Ctrl everywhere else; `meta` is the literal Command/Windows/Super key.\n   * Aliases: cmd/command/win/super → meta, control → ctrl, option/opt → alt,\n   * return → enter, escape → esc, del → delete, arrowup… → up…. An unknown token\n   * is displayed as declared (`k` → K, `f5` → F5). The `+` key is `plus`.\n   */\n  keys: string\n  /** How a key cap is drawn: tinted, outlined, or raised off the page. */\n  variant?: HotkeysVariant\n  /**\n   * Draws the whole combination as a SINGLE key rather than as several: the decoration\n   * moves from each cap to the shortcut as a whole, so the separator ends up inside\n   * the key instead of between two of them. It is purely visual — the markup and the\n   * announced name are identical either way.\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\n   * does. Left out, the browser is stopped — which is the entire point of taking over\n   * 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 — the library's ONLY reading of the visitor's platform, and the reason it\n// happens after mounting.\n/* The operating system is read once the component is in the page and never during\n   setup: a server has nothing to read it from, so rendering the detected value\n   directly would make the two markups differ.\n\n   TRAP — the value is held PER INSTANCE and not at module level. A shared one, having\n   already resolved to macOS, would make a component hydrated later — a Nuxt island, a\n   route loaded on demand — render ⌘ on its very first client pass where the server had\n   written Ctrl. */\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/* The same table is read twice, in opposite directions. On SCREEN the symbol wins, ⌘\n   being what is engraved on the key; in the ANNOUNCED NAME the word does, because that\n   symbol is either passed over in silence or read out as \"place of interest sign\",\n   depending on the screen reader. Inverting the preference is what lets one table\n   serve both. */\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/* A plain variable and not a reactive one: nothing renders it, and making it reactive\n   would cause renders for no reason — the same reasoning as in `useTimer`.\n\n   TRAP — it is called `listening` and NOT `attached`. Every top-level binding of a\n   `<script setup>` is exposed to the template, where it SHADOWS the prop of the same\n   name: called `attached`, this flag would silently be what the template read instead\n   of the prop, and the joined rendering would follow whether a listener happened to be\n   installed. */\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 — the listening half. Deciding whether a key event IS the\n// combination is pure and lives in `platform.ts`.\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  if (!props.allowInInput && isEditableTarget(event.target)) return\n  if (!matchesEvent(event, tokens.value, platform.value)) return\n  if (!props.allowDefault) 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</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  /* TRAP — the browser gives a `<kbd>` a monospaced family AND a smaller size, and\n     that reduction COMPOUNDS when one `<kbd>` sits inside another, as it does here:\n     the caps would come out at roughly 69% of the surrounding text. Both are reset\n     here and again on the caps themselves, and deleting either line silently\n     miniaturizes the whole component.\n\n     The vertical alignment is the second correction: a box laid out this way sits on\n     the baseline of its FIRST item, which drops the caps below the line of prose\n     around them. */\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  /* The three variants are tinted (`soft`, the word VButton and VChip use for a tinted\n     surface, where `flat` names the absence of decoration on VTabs, VAccordion and\n     VDataTable), outlined and raised, and EVERY paint here derives\n     from `currentcolor` rather than from a surface token — the argument the separator\n     at the bottom of this sheet already makes, carried through to the caps themselves.\n\n     A shortcut is chrome, so it sits in whatever surrounds it: a paragraph, a field, a\n     menu row, a tooltip painted on an inverse surface. Greys chosen against the page\n     are wrong in half of those, and the failure is silent in the worst way — the caps\n     kept the page's text colour while the ground under them was the opposite one, so\n     on a light theme a shortcut inside a tooltip wrote dark keys on a dark panel.\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.\n\n     They set VARIABLES rather than declaring the look straight away, because that look\n     has two possible carriers (see below). The names are qualified on purpose: these\n     variables inherit, so a bare `--bg` would be captured by any ancestor in the host\n     application that happened to define one. `currentcolor` inside them is resolved on\n     whichever element ends up USING them, which is exactly what is wanted here. */\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='outlined'] {\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  /* When one key holds the WHOLE combination, its ends take the same breathing room as\n     the gaps inside it, which gives the key a single rhythm. The usual control padding\n     is sized to wrap ONE short label; around three runs of text already spaced from\n     one another, it reads as slack at the edges. */\n  .v-hotkeys[data-attached] {\n    --hotkeys-pad: var(--control-gap);\n  }\n\n  /* THE key recipe, written once for its two possible carriers: every cap by default,\n     and the whole shortcut alone when it is drawn as a single key — which is exactly\n     what puts the separator inside the key rather than between two of them. Written\n     out twice, the two renderings would drift apart at the first token change. */\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</style>\n"],"mappings":""}
+{"version":3,"file":"VHotkeys.js","names":[],"sources":["../../../src/components/VHotkeys/VHotkeys.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A keyboard shortcut, DISPLAYED. Written as a plain string — `mod+k` — and rendered with\n * the symbols of the system the reader is on: ⌘K on a Mac, Ctrl+K elsewhere.\n *\n * Two things here are unique in the library. It carries the ONLY `navigator` read, in\n * `onMounted` and nowhere else: the server cannot know the OS and the first client render\n * has to match what it sent, so a Mac visitor pays one frame of `Ctrl`. The `platform` prop\n * is the escape hatch, and what makes stories and tests deterministic.\n *\n * And `listen` attaches the library's ONLY document-level listener, which is why it must be\n * asked for: a component whose job is to display a shortcut must not silently capture the\n * page's keyboard.\n *\n * It is not interactive and not focusable, so it carries no hover, active or focus rule, and\n * therefore no transition and no reduced-motion block. That absence is deliberate — do not\n * copy VButton's state rules into it.\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  /**\n   * The combination, `+`-separated: `mod+k`, `ctrl+shift+p`, `alt+enter`, `esc`.\n   * Case- and space-insensitive. `mod` is the CROSS-PLATFORM modifier: ⌘ on\n   * macOS, Ctrl everywhere else; `meta` is the literal Command/Windows/Super key.\n   * Aliases: cmd/command/win/super → meta, control → ctrl, option/opt → alt,\n   * return → enter, escape → esc, del → delete, arrowup… → up…. An unknown token\n   * is displayed as declared (`k` → K, `f5` → F5). The `+` key is `plus`.\n   */\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\n   * moves from each cap to the shortcut as a whole, so the separator ends up inside\n   * the key instead of between two of them. It is purely visual: the markup and the\n   * announced name are identical either way.\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\n   * does. Left out, the browser is stopped, which is the entire point of taking over\n   * something like ⌘K. Escape is never stopped: it has to stay the close request of dialogs.\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 — the library's ONLY reading of the visitor's platform, and the reason it\n// happens after mounting.\n/* The operating system is read once the component is in the page and never during\n   setup: a server has nothing to read it from, so rendering the detected value\n   directly would make the two markups differ.\n\n   TRAP — the value is held PER INSTANCE and not at module level. A shared one, having\n   already resolved to macOS, would make a component hydrated later — a Nuxt island, a\n   route loaded on demand — render ⌘ on its very first client pass where the server had\n   written Ctrl. */\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/* The same table is read twice, in opposite directions. On SCREEN the symbol wins, ⌘\n   being what is engraved on the key; in the ANNOUNCED NAME the word does, because that\n   symbol is either passed over in silence or read out as \"place of interest sign\",\n   depending on the screen reader. Inverting the preference is what lets one table\n   serve both. */\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/* A plain variable and not a reactive one: nothing renders it, and making it reactive\n   would cause renders for no reason — the same reasoning as in `useTimer`.\n\n   TRAP — it is called `listening` and NOT `attached`. Every top-level binding of a\n   `<script setup>` is exposed to the template, where it SHADOWS the prop of the same\n   name: called `attached`, this flag would silently be what the template read instead\n   of the prop, and the joined rendering would follow whether a listener happened to be\n   installed. */\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 — the listening half. Deciding whether a key event IS the\n// combination is pure and lives in `platform.ts`.\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  /* TRAP — Escape is never cancelled. A cancelled Escape is not turned into a close request,\n     so every open dialog and light-dismiss popover on the page would stop closing on it. */\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  /* TRAP — the browser gives a `<kbd>` a monospaced family AND a smaller size, and\n     that reduction COMPOUNDS when one `<kbd>` sits inside another, as it does here:\n     the caps would come out at roughly 69% of the surrounding text. Both are reset\n     here and again on the caps themselves, and deleting either line silently\n     miniaturizes the whole component.\n\n     The vertical alignment is the second correction: a box laid out this way sits on\n     the baseline of its FIRST item, which drops the caps below the line of prose\n     around them. */\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  /* The three variants are tinted (`soft`, the word VButton and VChip use for a tinted\n     surface, where `flat` names the absence of decoration on VTabs, VAccordion and\n     VDataTable), outlined and raised, and EVERY paint here derives\n     from `currentcolor` rather than from a surface token — the argument the separator\n     at the bottom of this sheet already makes, carried through to the caps themselves.\n\n     A shortcut is chrome, so it sits in whatever surrounds it: a paragraph, a field, a\n     menu row, a tooltip painted on an inverse surface. Greys chosen against the page\n     are wrong in half of those, and the failure is silent in the worst way — the caps\n     kept the page's text colour while the ground under them was the opposite one, so\n     on a light theme a shortcut inside a tooltip wrote dark keys on a dark panel.\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.\n\n     They set VARIABLES rather than declaring the look straight away, because that look\n     has two possible carriers (see below). The names are qualified on purpose: these\n     variables inherit, so a bare `--bg` would be captured by any ancestor in the host\n     application that happened to define one. `currentcolor` inside them is resolved on\n     whichever element ends up USING them, which is exactly what is wanted here. */\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  /* When one key holds the WHOLE combination, its ends take the same breathing room as\n     the gaps inside it, which gives the key a single rhythm. The usual control padding\n     is sized to wrap ONE short label; around three runs of text already spaced from\n     one another, it reads as slack at the edges. */\n  .v-hotkeys[data-attached] {\n    --hotkeys-pad: var(--control-gap);\n  }\n\n  /* THE key recipe, written once for its two possible carriers: every cap by default,\n     and the whole shortcut alone when it is drawn as a single key — which is exactly\n     what puts the separator inside the key rather than between two of them. Written\n     out twice, the two renderings would drift apart at the first token change. */\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  /* Forced colours flatten the tint and drop the shadow, which is all a soft or an\n     elevated cap is made of. Every variant takes the edge of the outlined one, in the\n     system text colour. At (0,2,0) and later in the sheet, this beats the variant rules. */\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,20 @@
 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, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, watch as b } from "vue";
+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";
 //#region src/components/VHotkeys/VHotkeys.vue?vue&type=script&setup=true&lang.ts
-var x = [
+var C = [
 	"data-variant",
 	"data-attached",
 	"data-size",
 	"data-compact",
 	"data-platform"
-], S = {
+], w = {
 	class: "v-hotkeys-keys",
 	"aria-hidden": "true"
-}, C = {
+}, T = {
 	key: 0,
 	class: "v-hotkeys-separator"
-}, w = { class: "v-hotkeys-key" }, T = { class: "v-visually-hidden" }, E = /*@__PURE__*/ p({
+}, E = { class: "v-hotkeys-key" }, D = { class: "v-visually-hidden" }, O = /*@__PURE__*/ p({
 	__name: "VHotkeys",
 	props: {
 		keys: {},
@@ -45,32 +45,34 @@ var x = [
 		label: { default: void 0 }
 	},
 	emits: ["trigger"],
-	setup(p, { emit: E }) {
-		let D = p, O = E, k = e(), A = _(t);
-		h(() => {
-			A.value = r(), D.listen && R();
+	setup(p, { emit: O }) {
+		let k = p, A = O, j = e(), M = y(t);
+		_(() => {
+			M.value = r(), k.listen && B();
 		});
-		let j = l(() => D.platform ?? A.value), M = l(() => o(D.keys)), N = l(() => s(M.value, j.value)), P = l(() => N.value.map((e) => e.glyph ?? (e.word ? k.value.hotkeys[e.word] : n(e.token)))), F = l(() => N.value.map((e) => e.word ? k.value.hotkeys[e.word] : e.glyph ?? n(e.token)).join(" + ")), I = l(() => D.label ?? k.value.hotkeys.label(F.value)), L = !1;
-		function R() {
-			L || typeof document > "u" || (document.addEventListener("keydown", B), L = !0);
+		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 z() {
-			L &&= (document.removeEventListener("keydown", B), !1);
+		function V() {
+			z &&= (document.removeEventListener("keydown", H), !1);
 		}
-		function B(e) {
-			!D.listen || e.repeat || !D.allowInInput && i(e.target) || a(e, M.value, j.value) && (D.allowDefault || e.preventDefault(), O("trigger", e));
+		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 b(() => D.listen, (e) => e ? R() : z()), m(z), (e, t) => (g(), d("kbd", {
+		return S(() => k.listen, (e) => e ? B() : V()), h(V), g(V), m(() => {
+			k.listen && B();
+		}), (e, t) => (v(), d("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": j.value
-		}, [f("span", S, [(g(!0), d(c, null, v(P.value, (e, t) => (g(), d(c, { key: t }, [t > 0 && p.separator ? (g(), d("span", C, y(p.separator), 1)) : u("", !0), f("kbd", w, y(e), 1)], 64))), 128))]), f("span", T, y(I.value), 1)], 8, x));
+			"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));
 	}
 });
 //#endregion
-export { E as default };
+export { O 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 * A keyboard shortcut, DISPLAYED. Written as a plain string — `mod+k` — and rendered with\n * the symbols of the system the reader is on: ⌘K on a Mac, Ctrl+K elsewhere.\n *\n * Two things here are unique in the library. It carries the ONLY `navigator` read, in\n * `onMounted` and nowhere else: the server cannot know the OS and the first client render\n * has to match what it sent, so a Mac visitor pays one frame of `Ctrl`. The `platform` prop\n * is the escape hatch, and what makes stories and tests deterministic.\n *\n * And `listen` attaches the library's ONLY document-level listener, which is why it must be\n * asked for: a component whose job is to display a shortcut must not silently capture the\n * page's keyboard.\n *\n * It is not interactive and not focusable, so it carries no hover, active or focus rule, and\n * therefore no transition and no reduced-motion block. That absence is deliberate — do not\n * copy VButton's state rules into it.\n */\n\nimport { computed, onBeforeUnmount, 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\nexport type HotkeysVariant = 'soft' | 'outlined' | 'elevated'\nexport type HotkeysSize = 'xs' | 'sm'\n\ninterface HotkeysProps {\n  /**\n   * The combination, `+`-separated: `mod+k`, `ctrl+shift+p`, `alt+enter`, `esc`.\n   * Case- and space-insensitive. `mod` is the CROSS-PLATFORM modifier — ⌘ on\n   * macOS, Ctrl everywhere else; `meta` is the literal Command/Windows/Super key.\n   * Aliases: cmd/command/win/super → meta, control → ctrl, option/opt → alt,\n   * return → enter, escape → esc, del → delete, arrowup… → up…. An unknown token\n   * is displayed as declared (`k` → K, `f5` → F5). The `+` key is `plus`.\n   */\n  keys: string\n  /** How a key cap is drawn: tinted, outlined, or raised off the page. */\n  variant?: HotkeysVariant\n  /**\n   * Draws the whole combination as a SINGLE key rather than as several: the decoration\n   * moves from each cap to the shortcut as a whole, so the separator ends up inside\n   * the key instead of between two of them. It is purely visual — the markup and the\n   * announced name are identical either way.\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\n   * does. Left out, the browser is stopped — which is the entire point of taking over\n   * 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 — the library's ONLY reading of the visitor's platform, and the reason it\n// happens after mounting.\n/* The operating system is read once the component is in the page and never during\n   setup: a server has nothing to read it from, so rendering the detected value\n   directly would make the two markups differ.\n\n   TRAP — the value is held PER INSTANCE and not at module level. A shared one, having\n   already resolved to macOS, would make a component hydrated later — a Nuxt island, a\n   route loaded on demand — render ⌘ on its very first client pass where the server had\n   written Ctrl. */\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/* The same table is read twice, in opposite directions. On SCREEN the symbol wins, ⌘\n   being what is engraved on the key; in the ANNOUNCED NAME the word does, because that\n   symbol is either passed over in silence or read out as \"place of interest sign\",\n   depending on the screen reader. Inverting the preference is what lets one table\n   serve both. */\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/* A plain variable and not a reactive one: nothing renders it, and making it reactive\n   would cause renders for no reason — the same reasoning as in `useTimer`.\n\n   TRAP — it is called `listening` and NOT `attached`. Every top-level binding of a\n   `<script setup>` is exposed to the template, where it SHADOWS the prop of the same\n   name: called `attached`, this flag would silently be what the template read instead\n   of the prop, and the joined rendering would follow whether a listener happened to be\n   installed. */\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 — the listening half. Deciding whether a key event IS the\n// combination is pure and lives in `platform.ts`.\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  if (!props.allowInInput && isEditableTarget(event.target)) return\n  if (!matchesEvent(event, tokens.value, platform.value)) return\n  if (!props.allowDefault) 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</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  /* TRAP — the browser gives a `<kbd>` a monospaced family AND a smaller size, and\n     that reduction COMPOUNDS when one `<kbd>` sits inside another, as it does here:\n     the caps would come out at roughly 69% of the surrounding text. Both are reset\n     here and again on the caps themselves, and deleting either line silently\n     miniaturizes the whole component.\n\n     The vertical alignment is the second correction: a box laid out this way sits on\n     the baseline of its FIRST item, which drops the caps below the line of prose\n     around them. */\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  /* The three variants are tinted (`soft`, the word VButton and VChip use for a tinted\n     surface, where `flat` names the absence of decoration on VTabs, VAccordion and\n     VDataTable), outlined and raised, and EVERY paint here derives\n     from `currentcolor` rather than from a surface token — the argument the separator\n     at the bottom of this sheet already makes, carried through to the caps themselves.\n\n     A shortcut is chrome, so it sits in whatever surrounds it: a paragraph, a field, a\n     menu row, a tooltip painted on an inverse surface. Greys chosen against the page\n     are wrong in half of those, and the failure is silent in the worst way — the caps\n     kept the page's text colour while the ground under them was the opposite one, so\n     on a light theme a shortcut inside a tooltip wrote dark keys on a dark panel.\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.\n\n     They set VARIABLES rather than declaring the look straight away, because that look\n     has two possible carriers (see below). The names are qualified on purpose: these\n     variables inherit, so a bare `--bg` would be captured by any ancestor in the host\n     application that happened to define one. `currentcolor` inside them is resolved on\n     whichever element ends up USING them, which is exactly what is wanted here. */\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='outlined'] {\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  /* When one key holds the WHOLE combination, its ends take the same breathing room as\n     the gaps inside it, which gives the key a single rhythm. The usual control padding\n     is sized to wrap ONE short label; around three runs of text already spaced from\n     one another, it reads as slack at the edges. */\n  .v-hotkeys[data-attached] {\n    --hotkeys-pad: var(--control-gap);\n  }\n\n  /* THE key recipe, written once for its two possible carriers: every cap by default,\n     and the whole shortcut alone when it is drawn as a single key — which is exactly\n     what puts the separator inside the key rather than between two of them. Written\n     out twice, the two renderings would drift apart at the first token change. */\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</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FA,IAAM,IAAQ,GAaR,IAAO,GAKP,IAAI,EAAY,GAYhB,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,GAQnE,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,GAUnF,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;EAIA,SAAS,EAAU,GAAsB;GAInC,CAAC,EAAM,UAAU,EAAM,UACvB,CAAC,EAAM,gBAAgB,EAAiB,EAAM,MAAM,KACnD,EAAa,GAAO,EAAO,OAAO,EAAS,KAAK,MAChD,EAAM,gBAAc,EAAM,eAAe,GAC9C,EAAK,WAAW,CAAK;EACvB;SAKA,QACQ,EAAM,SACX,MAAQ,IAAK,EAAO,IAAI,EAAO,CAClC,GACA,EAAgB,CAAM,mBAIpB,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 * A keyboard shortcut, DISPLAYED. Written as a plain string — `mod+k` — and rendered with\n * the symbols of the system the reader is on: ⌘K on a Mac, Ctrl+K elsewhere.\n *\n * Two things here are unique in the library. It carries the ONLY `navigator` read, in\n * `onMounted` and nowhere else: the server cannot know the OS and the first client render\n * has to match what it sent, so a Mac visitor pays one frame of `Ctrl`. The `platform` prop\n * is the escape hatch, and what makes stories and tests deterministic.\n *\n * And `listen` attaches the library's ONLY document-level listener, which is why it must be\n * asked for: a component whose job is to display a shortcut must not silently capture the\n * page's keyboard.\n *\n * It is not interactive and not focusable, so it carries no hover, active or focus rule, and\n * therefore no transition and no reduced-motion block. That absence is deliberate — do not\n * copy VButton's state rules into it.\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  /**\n   * The combination, `+`-separated: `mod+k`, `ctrl+shift+p`, `alt+enter`, `esc`.\n   * Case- and space-insensitive. `mod` is the CROSS-PLATFORM modifier: ⌘ on\n   * macOS, Ctrl everywhere else; `meta` is the literal Command/Windows/Super key.\n   * Aliases: cmd/command/win/super → meta, control → ctrl, option/opt → alt,\n   * return → enter, escape → esc, del → delete, arrowup… → up…. An unknown token\n   * is displayed as declared (`k` → K, `f5` → F5). The `+` key is `plus`.\n   */\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\n   * moves from each cap to the shortcut as a whole, so the separator ends up inside\n   * the key instead of between two of them. It is purely visual: the markup and the\n   * announced name are identical either way.\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\n   * does. Left out, the browser is stopped, which is the entire point of taking over\n   * something like ⌘K. Escape is never stopped: it has to stay the close request of dialogs.\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 — the library's ONLY reading of the visitor's platform, and the reason it\n// happens after mounting.\n/* The operating system is read once the component is in the page and never during\n   setup: a server has nothing to read it from, so rendering the detected value\n   directly would make the two markups differ.\n\n   TRAP — the value is held PER INSTANCE and not at module level. A shared one, having\n   already resolved to macOS, would make a component hydrated later — a Nuxt island, a\n   route loaded on demand — render ⌘ on its very first client pass where the server had\n   written Ctrl. */\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/* The same table is read twice, in opposite directions. On SCREEN the symbol wins, ⌘\n   being what is engraved on the key; in the ANNOUNCED NAME the word does, because that\n   symbol is either passed over in silence or read out as \"place of interest sign\",\n   depending on the screen reader. Inverting the preference is what lets one table\n   serve both. */\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/* A plain variable and not a reactive one: nothing renders it, and making it reactive\n   would cause renders for no reason — the same reasoning as in `useTimer`.\n\n   TRAP — it is called `listening` and NOT `attached`. Every top-level binding of a\n   `<script setup>` is exposed to the template, where it SHADOWS the prop of the same\n   name: called `attached`, this flag would silently be what the template read instead\n   of the prop, and the joined rendering would follow whether a listener happened to be\n   installed. */\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 — the listening half. Deciding whether a key event IS the\n// combination is pure and lives in `platform.ts`.\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  /* TRAP — Escape is never cancelled. A cancelled Escape is not turned into a close request,\n     so every open dialog and light-dismiss popover on the page would stop closing on it. */\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  /* TRAP — the browser gives a `<kbd>` a monospaced family AND a smaller size, and\n     that reduction COMPOUNDS when one `<kbd>` sits inside another, as it does here:\n     the caps would come out at roughly 69% of the surrounding text. Both are reset\n     here and again on the caps themselves, and deleting either line silently\n     miniaturizes the whole component.\n\n     The vertical alignment is the second correction: a box laid out this way sits on\n     the baseline of its FIRST item, which drops the caps below the line of prose\n     around them. */\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  /* The three variants are tinted (`soft`, the word VButton and VChip use for a tinted\n     surface, where `flat` names the absence of decoration on VTabs, VAccordion and\n     VDataTable), outlined and raised, and EVERY paint here derives\n     from `currentcolor` rather than from a surface token — the argument the separator\n     at the bottom of this sheet already makes, carried through to the caps themselves.\n\n     A shortcut is chrome, so it sits in whatever surrounds it: a paragraph, a field, a\n     menu row, a tooltip painted on an inverse surface. Greys chosen against the page\n     are wrong in half of those, and the failure is silent in the worst way — the caps\n     kept the page's text colour while the ground under them was the opposite one, so\n     on a light theme a shortcut inside a tooltip wrote dark keys on a dark panel.\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.\n\n     They set VARIABLES rather than declaring the look straight away, because that look\n     has two possible carriers (see below). The names are qualified on purpose: these\n     variables inherit, so a bare `--bg` would be captured by any ancestor in the host\n     application that happened to define one. `currentcolor` inside them is resolved on\n     whichever element ends up USING them, which is exactly what is wanted here. */\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  /* When one key holds the WHOLE combination, its ends take the same breathing room as\n     the gaps inside it, which gives the key a single rhythm. The usual control padding\n     is sized to wrap ONE short label; around three runs of text already spaced from\n     one another, it reads as slack at the edges. */\n  .v-hotkeys[data-attached] {\n    --hotkeys-pad: var(--control-gap);\n  }\n\n  /* THE key recipe, written once for its two possible carriers: every cap by default,\n     and the whole shortcut alone when it is drawn as a single key — which is exactly\n     what puts the separator inside the key rather than between two of them. Written\n     out twice, the two renderings would drift apart at the first token change. */\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  /* Forced colours flatten the tint and drop the shadow, which is all a soft or an\n     elevated cap is made of. Every variant takes the edge of the outlined one, in the\n     system text colour. At (0,2,0) and later in the sheet, this beats the variant rules. */\n  @media (forced-colors: active) {\n    .v-hotkeys[data-variant] {\n      --hotkeys-border: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgGA,IAAM,IAAQ,GAaR,IAAO,GAKP,IAAI,EAAY,GAYhB,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,GAQnE,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,GAWnF,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;EAIA,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,MAGjD,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"}

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

@@ -17,9 +17,10 @@
  * There is nothing to read it from on a server, and sniffing a request header is not
  * this library's business.
  */
+/** The system a keyboard belongs to, which decides its symbols and some of its words. */
 export type HotkeysPlatform = 'mac' | 'windows' | 'linux' | 'other';
 /**
- * The dictionary entries naming a key, and only those — the sentence framing the
+ * The dictionary entries naming a key, and only those: the sentence framing the
  * shortcut is not one of them.
  *
  * The list is written out here rather than derived from the dictionary's own type,
@@ -41,8 +42,9 @@ export interface ResolvedKey {
 }
 /**
  * What a SERVER renders, and therefore what the browser's FIRST render must be as
- * well. It shares its words with Windows and Linux — Ctrl, Alt, Shift — so only a Mac
- * visitor pays a single frame of "Ctrl" before it is corrected to ⌘.
+ * well. It shares Ctrl, Alt and Shift with Windows and Linux, so a Mac visitor pays a
+ * single frame of "Ctrl" before it is corrected to ⌘. The literal `meta` key is the one
+ * word it shares with Linux alone: a Windows visitor sees "Super" for a frame before "Win".
  */
 export declare const DEFAULT_PLATFORM: HotkeysPlatform;
 /**
@@ -51,19 +53,19 @@ export declare const DEFAULT_PLATFORM: HotkeysPlatform;
  * still the only one Firefox and Safari provide.
  *
  * The modern one is missing from TypeScript's own definitions, so it is described by a
- * type declared LOCALLY rather than added to the global ones — the latter would leak
+ * type declared LOCALLY rather than added to the global ones: the latter would leak
  * out into every consumer's compilation.
  */
 export declare function detectPlatform(): HotkeysPlatform;
 /**
  * Reads a combination as it was written and returns its keys in canonical form:
  * `'mod+k'` and `' Mod + K '` both give the same two. Empty segments are dropped, so a
- * trailing separator is harmless — and the `+` KEY itself is written `plus`.
+ * trailing separator is harmless, and the `+` KEY itself is written `plus`.
  */
 export declare function parseHotkeys(keys: string): string[];
 /**
  * How a key nobody has a word or a symbol for is printed: as it was written, merely
- * capitalized — `k` becomes K, `f5` becomes F5, and a slash stays a slash.
+ * capitalized: `k` becomes K, `f5` becomes F5, and a slash stays a slash.
  */
 export declare function capLabel(token: string): string;
 /**
@@ -79,4 +81,4 @@ export declare function resolveKeys(tokens: string[], platform: HotkeysPlatform)
  * would swallow every press meant for the second.
  */
 export declare function matchesEvent(event: KeyboardEvent, tokens: string[], platform: HotkeysPlatform): boolean;
-export declare function isEditableTarget(target: EventTarget | null): boolean;
+export declare function isEditableTarget(target: EventTarget | null | undefined): boolean;

package/dist/components/VHotkeys/platform.js

@@ -1,11 +1,12 @@
+import { isDev as e } from "../../utils/env.js";
 //#region src/components/VHotkeys/platform.ts
-var e = "other";
-function t() {
-	if (typeof navigator > "u") return e;
-	let t = navigator, n = (t.userAgentData?.platform || t.platform || "").toLowerCase();
-	return /mac|iphone|ipad|ipod/.test(n) ? "mac" : n.includes("win") ? "windows" : /linux|android|cros|chrome os/.test(n) ? "linux" : e;
+var t = "other";
+function n() {
+	if (typeof navigator > "u") return t;
+	let e = navigator, n = (e.userAgentData?.platform || e.platform || "").toLowerCase();
+	return /mac|iphone|ipad|ipod/.test(n) ? "mac" : n.includes("win") ? "windows" : /linux|android|cros|chrome os/.test(n) ? "linux" : t;
 }
-var n = {
+var r = {
 	cmd: "meta",
 	command: "meta",
 	win: "meta",
@@ -27,7 +28,7 @@ var n = {
 	arrowleft: "left",
 	arrowright: "right",
 	"+": "plus"
-}, r = {
+}, i = {
 	mod: "⌘",
 	meta: "⌘",
 	ctrl: "⌃",
@@ -37,13 +38,13 @@ var n = {
 	backspace: "⌫",
 	delete: "⌦",
 	tab: "⇥"
-}, i = {
+}, a = {
 	up: "↑",
 	down: "↓",
 	left: "←",
 	right: "→",
 	plus: "+"
-}, a = {
+}, o = {
 	ctrl: "ctrl",
 	alt: "alt",
 	shift: "shift",
@@ -57,13 +58,13 @@ var n = {
 	down: "down",
 	left: "left",
 	right: "right"
-}, o = /* @__PURE__ */ new Set([
+}, s = /* @__PURE__ */ new Set([
 	"mod",
 	"meta",
 	"ctrl",
 	"alt",
 	"shift"
-]), s = /* @__PURE__ */ new Set([
+]), c = /* @__PURE__ */ new Set([
 	"button",
 	"submit",
 	"reset",
@@ -74,42 +75,52 @@ var n = {
 	"color",
 	"image"
 ]);
-function c(e) {
-	return e.split("+").map((e) => e.trim().toLowerCase()).filter(Boolean).map((e) => n[e] ?? e);
-}
-function l(e) {
-	return o.has(e);
+function l(t) {
+	let n = t.split("+").map((e) => e.trim().toLowerCase()).filter(Boolean).map((e) => r[e] ?? e);
+	if (e) {
+		let e = n.filter((e) => !u(e)).length;
+		n.length === 0 ? console.warn(`[VHotkeys] \`keys\` is empty: "${t}" declares no key.`) : e === 0 ? console.warn(`[VHotkeys] \`keys\` holds only modifiers: "${t}" never fires. The + key is written \`plus\`.`) : e > 1 && console.warn(`[VHotkeys] \`keys\` names more than one key: "${t}" is matched on the first alone.`);
+	}
+	return n;
 }
 function u(e) {
-	return e.charAt(0).toUpperCase() + e.slice(1);
+	return s.has(e);
 }
-function d(e, t) {
-	return e === "mod" ? t === "mac" ? "command" : "ctrl" : e === "meta" ? t === "mac" ? "command" : t === "windows" ? "windows" : "super" : a[e];
+function d(e) {
+	return e.charAt(0).toUpperCase() + e.slice(1);
 }
 function f(e, t) {
-	return e.map((e) => ({
+	return e === "mod" ? t === "mac" ? "command" : "ctrl" : e === "meta" ? t === "mac" ? "command" : t === "windows" ? "windows" : "super" : o[e];
+}
+function p(e, t) {
+	let n = /* @__PURE__ */ new Set();
+	return e.filter((e) => {
+		if (!u(e)) return !0;
+		let r = e === "mod" ? t === "mac" ? "meta" : "ctrl" : e;
+		return n.has(r) ? !1 : (n.add(r), !0);
+	}).map((e) => ({
 		token: e,
-		glyph: (t === "mac" ? r[e] : void 0) ?? i[e],
-		word: d(e, t)
+		glyph: (t === "mac" ? i[e] : void 0) ?? a[e],
+		word: f(e, t)
 	}));
 }
-function p(e) {
+function m(e) {
 	let t = e.key.toLowerCase();
-	return n[t] ?? t;
+	return r[t] ?? t;
 }
-function m(e, t, n) {
+function h(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) => !l(e));
-	return a !== void 0 && p(e) === a;
+	let a = t.find((e) => !u(e));
+	return a !== void 0 && m(e) === a;
 }
-function h(e) {
+function g(e) {
 	if (!(e instanceof HTMLElement)) return !1;
 	if (e.isContentEditable) return !0;
 	let t = e.tagName;
-	return t === "TEXTAREA" || t === "SELECT" || t === "INPUT" && !s.has(e.type);
+	return t === "TEXTAREA" || t === "SELECT" || t === "INPUT" && !c.has(e.type);
 }
 //#endregion
-export { e as DEFAULT_PLATFORM, u as capLabel, t as detectPlatform, h as isEditableTarget, m as matchesEvent, c as parseHotkeys, f as resolveKeys };
+export { t as DEFAULT_PLATFORM, d as capLabel, n as detectPlatform, g as isEditableTarget, h 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 — module-wide: pure, no Vue and no lifecycle. `detectPlatform` is the\n// exception below.\n/**\n * Everything VHotkeys needs to know about keyboards: which system this one belongs to,\n * and how a written token relates to the symbol engraved on the key, to the word for\n * it, and to what the browser reports when it is pressed.\n *\n * An operating system is not a language, and the distinction matters here. Whether a\n * key shows ⌘ or Ctrl is a fact about the hardware, so it does NOT depend on the\n * reader's language. Only the WORDS do — Shift becomes Maj in French — and those live\n * in the dictionary: this module hands back the dictionary KEY and never the text\n * itself.\n *\n * What earns the module its existence is the alias table. The SAME table normalizes\n * the tokens a consumer writes in `keys` and the key names the browser reports, so a\n * shortcut cannot be declared in a spelling the matcher would fail to recognize.\n *\n * TRAP — detecting the platform must only ever be done once a component is mounted.\n * There is nothing to read it from on a server, and sniffing a request header is not\n * this library's business.\n */\n\nimport { isDev } from '../../utils/env'\n\nexport type HotkeysPlatform = 'mac' | 'windows' | 'linux' | 'other'\n\n/**\n * The dictionary entries naming a key, and only those — the sentence framing the\n * shortcut is not one of them.\n *\n * The list is written out here rather than derived from the dictionary's own type,\n * which would tie this module to the dictionary's shape. Nothing is lost: reading an\n * entry by one of these names is checked just as strictly at the point of use.\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 is what 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/**\n * What a SERVER renders, and therefore what the browser's FIRST render must be as\n * well. It shares its words with Windows and Linux — Ctrl, Alt, Shift — so only a Mac\n * visitor pays a single frame of \"Ctrl\" before it is corrected to ⌘.\n */\nexport const DEFAULT_PLATFORM: HotkeysPlatform = 'other'\n\n// @ssr @fallback — the DS's ONLY `navigator` read, with a two-source ladder.\n/**\n * Works out which system the keyboard belongs to, from two sources in order. The\n * modern one is the more reliable; the older one is deprecated and frozen, but it is\n * still the only one Firefox and Safari provide.\n *\n * The modern one is missing from TypeScript's own definitions, so it is described by a\n * type declared LOCALLY rather than added to the global ones — the latter would leak\n * out into every consumer's compilation.\n */\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  /* iPadOS reports itself as a Mac, which is fine here: an attached keyboard carries\n     the same modifier symbols either way. */\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/* Every spelling accepted in the `keys` prop, and at the same time the table that\n   normalizes what the browser reports. Serving both is what guarantees the two can\n   never disagree.\n\n   The `+` key is canonically named `plus`, since `+` is the separator and cannot name\n   itself in the prop — but the browser does report it as `'+'`, hence its presence\n   here. */\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:\n * `'mod+k'` and `' Mod + K '` both give the same two. Empty segments are dropped, so a\n * trailing separator is harmless — and the `+` KEY itself is written `plus`.\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 && tokens.length === 0) {\n    console.warn(`[VHotkeys] \\`keys\\` is empty: \"${keys}\" declares no key.`)\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  /* The two keys whose name depends on the system. `mod` is the modifier a consumer\n     writes when they mean \"the usual one here\" — Command on a Mac, Ctrl elsewhere —\n     while `meta` names that physical key literally, and it is called something\n     different on each system. */\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  return tokens.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/**\n * Whether a key press IS this combination.\n *\n * The modifiers are compared EXACTLY, and never as \"at least these ones\". Without\n * that, `mod+k` and `mod+shift+k` could not coexist in one application: the first\n * would swallow every press meant for the second.\n */\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  /* Both sides go through the same normalization, which is also what makes a press\n     reported as \"K\" — because Shift was held — match a shortcut written `k`. */\n  return normalizeEventKey(event) === main\n}\n\n// @keyboard — what `allowInInput` is asked about: a shortcut must not fire in the\n// middle of someone typing a sentence.\nexport function isEditableTarget(target: EventTarget | null): 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":";AAuEA,IAAa,IAAoC;AAYjD,SAAgB,IAAkC;CAChD,IAAI,OAAO,YAAc,KAAa,OAAO;CAC7C,IAAM,IAAM,WACN,KAAU,EAAI,eAAe,YAAY,EAAI,YAAY,GAAA,CAAI,YAAY;CAS/E,OANI,uBAAuB,KAAK,CAAM,IAAU,QAC5C,EAAO,SAAS,KAAK,IAAU,YAI/B,+BAA+B,KAAK,CAAM,IAAU,UACjD;AACT;AASA,IAAM,IAAkC;CACtC,KAAK;CACL,SAAS;CACT,KAAK;CACL,SAAS;CACT,OAAO;CACP,IAAI;CACJ,WAAW;CACX,kBAAkB;CAClB,SAAS;CACT,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,KAAK;CACL,KAAK;CACL,SAAS;CACT,WAAW;CACX,WAAW;CACX,YAAY;CACZ,KAAK;AACP,GAKM,IAAqC;CACzC,KAAK;CACL,MAAM;CACN,MAAM;CACN,KAAK;CACL,OAAO;CACP,OAAO;CACP,WAAW;CACX,QAAQ;CACR,KAAK;AACP,GAIM,IAAiC;CACrC,IAAI;CACJ,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;AACR,GAEM,IAAqC;CACzC,MAAM;CACN,KAAK;CACL,OAAO;CACP,OAAO;CACP,KAAK;CACL,OAAO;CACP,WAAW;CACX,QAAQ;CACR,KAAK;CACL,IAAI;CACJ,MAAM;CACN,MAAM;CACN,OAAO;AACT,GAEM,oBAAY,IAAI,IAAI;CAAC;CAAO;CAAQ;CAAQ;CAAO;AAAO,CAAC,GAM3D,oBAAuB,IAAI,IAAI;CACnC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAOD,SAAgB,EAAa,GAAwB;CASnD,OARe,EACZ,MAAM,GAAG,CAAC,CACV,KAAK,MAAU,EAAM,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAC1C,OAAO,OAAO,CAAC,CACf,KAAK,MAAU,EAAQ,MAAU,CAI7B;AACT;AAGA,SAAS,EAAW,GAAwB;CAC1C,OAAO,EAAU,IAAI,CAAK;AAC5B;AAMA,SAAgB,EAAS,GAAuB;CAC9C,OAAO,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,MAAM,CAAC;AACtD;AAEA,SAAS,EAAO,GAAe,GAAoD;CAUjF,OALI,MAAU,QAAc,MAAa,QAAQ,YAAY,SACzD,MAAU,SACR,MAAa,QAAc,YACxB,MAAa,YAAY,YAAY,UAEvC,EAAM;AACf;AAMA,SAAgB,EAAY,GAAkB,GAA0C;CACtF,OAAO,EAAO,KAAK,OAAW;EAC5B;EACA,QAAQ,MAAa,QAAQ,EAAW,KAAS,KAAA,MAAc,EAAO;EACtE,MAAM,EAAO,GAAO,CAAQ;CAC9B,EAAE;AACJ;AAEA,SAAS,EAAkB,GAA8B;CACvD,IAAM,IAAM,EAAM,IAAI,YAAY;CAClC,OAAO,EAAQ,MAAQ;AACzB;AASA,SAAgB,EACd,GACA,GACA,GACS;CACT,IAAM,IAAW,EAAO,SAAS,MAAM,KAAM,MAAa,SAAS,EAAO,SAAS,KAAK,GAClF,IAAW,EAAO,SAAS,MAAM,KAAM,MAAa,SAAS,EAAO,SAAS,KAAK;CAIxF,IAHI,EAAM,YAAY,KAClB,EAAM,YAAY,KAClB,EAAM,WAAW,EAAO,SAAS,KAAK,KACtC,EAAM,aAAa,EAAO,SAAS,OAAO,GAAG,OAAO;CACxD,IAAM,IAAO,EAAO,MAAM,MAAU,CAAC,EAAW,CAAK,CAAC;CAKtD,OAHI,MAAS,KAAA,KAGN,EAAkB,CAAK,MAAM;AACtC;AAIA,SAAgB,EAAiB,GAAqC;CACpE,IAAI,EAAE,aAAkB,cAAc,OAAO;CAC7C,IAAI,EAAO,mBAAmB,OAAO;CACrC,IAAM,IAAM,EAAO;CAGnB,OAFI,MAAQ,cAAc,MAAQ,YAC9B,MAAQ,WACL,CAAC,EAAqB,IAAK,EAA4B,IAAI;AACpE"}
+{"version":3,"file":"platform.js","names":[],"sources":["../../../src/components/VHotkeys/platform.ts"],"sourcesContent":["// @core — module-wide: pure, no Vue and no lifecycle. `detectPlatform` is the\n// exception below.\n/**\n * Everything VHotkeys needs to know about keyboards: which system this one belongs to,\n * and how a written token relates to the symbol engraved on the key, to the word for\n * it, and to what the browser reports when it is pressed.\n *\n * An operating system is not a language, and the distinction matters here. Whether a\n * key shows ⌘ or Ctrl is a fact about the hardware, so it does NOT depend on the\n * reader's language. Only the WORDS do — Shift becomes Maj in French — and those live\n * in the dictionary: this module hands back the dictionary KEY and never the text\n * itself.\n *\n * What earns the module its existence is the alias table. The SAME table normalizes\n * the tokens a consumer writes in `keys` and the key names the browser reports, so a\n * shortcut cannot be declared in a spelling the matcher would fail to recognize.\n *\n * TRAP — detecting the platform must only ever be done once a component is mounted.\n * There is nothing to read it from on a server, and sniffing a request header is not\n * 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\n * shortcut is not one of them.\n *\n * The list is written out here rather than derived from the dictionary's own type,\n * which would tie this module to the dictionary's shape. Nothing is lost: reading an\n * entry by one of these names is checked just as strictly at the point of use.\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 is what 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/**\n * What a SERVER renders, and therefore what the browser's FIRST render must be as\n * well. It shares Ctrl, Alt and Shift with Windows and Linux, so a Mac visitor pays a\n * single frame of \"Ctrl\" before it is corrected to ⌘. The literal `meta` key is the one\n * word it shares with Linux alone: a Windows visitor sees \"Super\" for a frame before \"Win\".\n */\nexport const DEFAULT_PLATFORM: HotkeysPlatform = 'other'\n\n// @ssr @fallback — the DS's ONLY `navigator` read, with a two-source ladder.\n/**\n * Works out which system the keyboard belongs to, from two sources in order. The\n * modern one is the more reliable; the older one is deprecated and frozen, but it is\n * still the only one Firefox and Safari provide.\n *\n * The modern one is missing from TypeScript's own definitions, so it is described by a\n * type declared LOCALLY rather than added to the global ones: the latter would leak\n * out into every consumer's compilation.\n */\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  /* iPadOS reports itself as a Mac, which is fine here: an attached keyboard carries\n     the same modifier symbols either way. */\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/* Every spelling accepted in the `keys` prop, and at the same time the table that\n   normalizes what the browser reports. Serving both is what guarantees the two can\n   never disagree.\n\n   The `+` key is canonically named `plus`, since `+` is the separator and cannot name\n   itself in the prop — but the browser does report it as `'+'`, hence its presence\n   here. */\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:\n * `'mod+k'` and `' Mod + K '` both give the same two. Empty segments are dropped, so a\n * trailing separator is harmless, and the `+` KEY itself is written `plus`.\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  /* The two keys whose name depends on the system. `mod` is the modifier a consumer\n     writes when they mean \"the usual one here\" — Command on a Mac, Ctrl elsewhere —\n     while `meta` names that physical key literally, and it is called something\n     different on each system. */\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/**\n * Whether a key press IS this combination.\n *\n * The modifiers are compared EXACTLY, and never as \"at least these ones\". Without\n * that, `mod+k` and `mod+shift+k` could not coexist in one application: the first\n * would swallow every press meant for the second.\n */\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  /* Both sides go through the same normalization, which is also what makes a press\n     reported as \"K\" — because Shift was held — match a shortcut written `k`. */\n  return normalizeEventKey(event) === main\n}\n\n// @keyboard — what `allowInInput` is asked about: a shortcut must not fire in the\n// middle of someone typing a sentence.\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":";;AAyEA,IAAa,IAAoC;AAYjD,SAAgB,IAAkC;CAChD,IAAI,OAAO,YAAc,KAAa,OAAO;CAC7C,IAAM,IAAM,WACN,KAAU,EAAI,eAAe,YAAY,EAAI,YAAY,GAAA,CAAI,YAAY;CAS/E,OANI,uBAAuB,KAAK,CAAM,IAAU,QAC5C,EAAO,SAAS,KAAK,IAAU,YAI/B,+BAA+B,KAAK,CAAM,IAAU,UACjD;AACT;AASA,IAAM,IAAkC;CACtC,KAAK;CACL,SAAS;CACT,KAAK;CACL,SAAS;CACT,OAAO;CACP,IAAI;CACJ,WAAW;CACX,kBAAkB;CAClB,SAAS;CACT,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,KAAK;CACL,KAAK;CACL,SAAS;CACT,WAAW;CACX,WAAW;CACX,YAAY;CACZ,KAAK;AACP,GAKM,IAAqC;CACzC,KAAK;CACL,MAAM;CACN,MAAM;CACN,KAAK;CACL,OAAO;CACP,OAAO;CACP,WAAW;CACX,QAAQ;CACR,KAAK;AACP,GAIM,IAAiC;CACrC,IAAI;CACJ,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;AACR,GAEM,IAAqC;CACzC,MAAM;CACN,KAAK;CACL,OAAO;CACP,OAAO;CACP,KAAK;CACL,OAAO;CACP,WAAW;CACX,QAAQ;CACR,KAAK;CACL,IAAI;CACJ,MAAM;CACN,MAAM;CACN,OAAO;AACT,GAEM,oBAAY,IAAI,IAAI;CAAC;CAAO;CAAQ;CAAQ;CAAO;AAAO,CAAC,GAM3D,oBAAuB,IAAI,IAAI;CACnC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAOD,SAAgB,EAAa,GAAwB;CACnD,IAAM,IAAS,EACZ,MAAM,GAAG,CAAC,CACV,KAAK,MAAU,EAAM,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAC1C,OAAO,OAAO,CAAC,CACf,KAAK,MAAU,EAAQ,MAAU,CAAK;CACzC,IAAI,GAAO;EACT,IAAM,IAAU,EAAO,QAAQ,MAAU,CAAC,EAAW,CAAK,CAAC,CAAC,CAAC;EAC7D,AAAI,EAAO,WAAW,IACpB,QAAQ,KAAK,kCAAkC,EAAK,mBAAmB,IAC9D,MAAY,IAGrB,QAAQ,KACN,8CAA8C,EAAK,8CACrD,IACS,IAAU,KAGnB,QAAQ,KACN,iDAAiD,EAAK,iCACxD;CAEJ;CACA,OAAO;AACT;AAGA,SAAS,EAAW,GAAwB;CAC1C,OAAO,EAAU,IAAI,CAAK;AAC5B;AAMA,SAAgB,EAAS,GAAuB;CAC9C,OAAO,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,MAAM,CAAC;AACtD;AAEA,SAAS,EAAO,GAAe,GAAoD;CAUjF,OALI,MAAU,QAAc,MAAa,QAAQ,YAAY,SACzD,MAAU,SACR,MAAa,QAAc,YACxB,MAAa,YAAY,YAAY,UAEvC,EAAM;AACf;AAMA,SAAgB,EAAY,GAAkB,GAA0C;CAGtF,IAAM,oBAAO,IAAI,IAAY;CAQ7B,OAPa,EAAO,QAAQ,MAAU;EACpC,IAAI,CAAC,EAAW,CAAK,GAAG,OAAO;EAC/B,IAAM,IAAM,MAAU,QAAS,MAAa,QAAQ,SAAS,SAAU;EAGvE,OAFI,EAAK,IAAI,CAAG,IAAU,MAC1B,EAAK,IAAI,CAAG,GACL;CACT,CACO,CAAA,CAAK,KAAK,OAAW;EAC1B;EACA,QAAQ,MAAa,QAAQ,EAAW,KAAS,KAAA,MAAc,EAAO;EACtE,MAAM,EAAO,GAAO,CAAQ;CAC9B,EAAE;AACJ;AAEA,SAAS,EAAkB,GAA8B;CACvD,IAAM,IAAM,EAAM,IAAI,YAAY;CAClC,OAAO,EAAQ,MAAQ;AACzB;AASA,SAAgB,EACd,GACA,GACA,GACS;CACT,IAAM,IAAW,EAAO,SAAS,MAAM,KAAM,MAAa,SAAS,EAAO,SAAS,KAAK,GAClF,IAAW,EAAO,SAAS,MAAM,KAAM,MAAa,SAAS,EAAO,SAAS,KAAK;CAIxF,IAHI,EAAM,YAAY,KAClB,EAAM,YAAY,KAClB,EAAM,WAAW,EAAO,SAAS,KAAK,KACtC,EAAM,aAAa,EAAO,SAAS,OAAO,GAAG,OAAO;CACxD,IAAM,IAAO,EAAO,MAAM,MAAU,CAAC,EAAW,CAAK,CAAC;CAKtD,OAHI,MAAS,KAAA,KAGN,EAAkB,CAAK,MAAM;AACtC;AAIA,SAAgB,EAAiB,GAAiD;CAChF,IAAI,EAAE,aAAkB,cAAc,OAAO;CAC7C,IAAI,EAAO,mBAAmB,OAAO;CACrC,IAAM,IAAM,EAAO;CAGnB,OAFI,MAAQ,cAAc,MAAQ,YAC9B,MAAQ,WACL,CAAC,EAAqB,IAAK,EAA4B,IAAI;AACpE"}