vectis-ui 0.1.0 → 0.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"platform.js","names":[],"sources":["../../../src/components/VHotkeys/platform.ts"],"sourcesContent":["import { isDev } from '../../utils/env'\n\n// @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 */\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":";AAsEA,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\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"}

package/dist/components/VIcon/VIcon.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-icon{--icon-size:var(--vectis-icon-size,1em);--icon-opsz:var(--vectis-icon-opsz,24);inline-size:var(--icon-size);block-size:var(--icon-size);font-size:var(--icon-size);flex:none;justify-content:center;align-items:center;display:inline-flex}.v-icon:has(>.v-icon-symbol){overflow:hidden}.v-icon-symbol{font-family:var(--vectis-font-family-icon);font-weight:var(--vectis-font-weight-regular);font-style:normal;line-height:var(--vectis-font-leading-none);letter-spacing:normal;text-transform:none;white-space:nowrap;font-variation-settings:"FILL" var(--icon-fill,0), "wght" 400, "GRAD" 0, "opsz" var(--icon-opsz);direction:ltr}.v-icon[data-filled] .v-icon-symbol{--icon-fill:1}.v-icon-img,.v-icon>svg{object-fit:contain;block-size:100%;inline-size:100%}.v-icon-glyph{font-style:normal;line-height:var(--vectis-font-leading-none);display:block}.v-icon-svg{fill:currentColor;display:block}}
+@layer vectis.components{.v-icon{--icon-size:var(--vectis-icon-size,1em);--icon-opsz:var(--vectis-icon-opsz,24);inline-size:var(--icon-size);block-size:var(--icon-size);font-size:var(--icon-size);flex:none;justify-content:center;align-items:center;display:inline-flex}.v-icon:has(>.v-icon-symbol){overflow:hidden}.v-icon-symbol{font-family:var(--vectis-font-family-icon);font-weight:var(--vectis-font-weight-regular);font-style:normal;line-height:var(--vectis-font-leading-none);letter-spacing:normal;text-transform:none;white-space:nowrap;font-variation-settings:"FILL" var(--icon-fill,0), "wght" 400, "GRAD" 0, "opsz" var(--icon-opsz);direction:ltr}.v-icon[data-filled] .v-icon-symbol{--icon-fill:1}.v-icon[data-mirror]:dir(rtl){scale:-1 1}.v-icon-img,.v-icon>svg{object-fit:contain;block-size:100%;inline-size:100%}.v-icon-glyph{font-style:normal;line-height:var(--vectis-font-leading-none);display:block}.v-icon-svg{fill:currentColor;display:block}}

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

@@ -17,11 +17,12 @@ interface IconProps {
     /** The address of an image to use as the icon. It wins over `name`. */
     src?: string;
     /**
-     * A size in pixels. Left out, the icon takes the size its context imposes — a
-     * button sets one for the icons inside it — and failing that 1em, which makes it
-     * follow the surrounding text.
+     * A size in pixels, as a number or a numeric string. Left out, or given something that
+     * is not a number, the icon takes the size its context imposes — a button sets one for
+     * the icons inside it — and failing that 1em, which makes it follow the surrounding
+     * text.
      */
-    size?: number;
+    size?: number | string;
     /**
      * What the icon means, for screen readers. Leaving it out marks the icon as
      * decorative and hides it from them, which is the right thing whenever the
@@ -34,6 +35,13 @@ interface IconProps {
      * means nothing for an image or an inline SVG, whose shape is fixed.
      */
     filled?: boolean;
+    /**
+     * Flips the icon horizontally in a right-to-left context, for a glyph that points
+     * at a physical direction: a "previous" chevron points left in English and right in
+     * Arabic. Off by default, since most icons mean the same thing in both directions.
+     * The direction is the one the browser computed, so an ancestor's `dir` is enough.
+     */
+    mirrored?: boolean;
 }
 type __VLS_Slots = {
     /** An inline SVG, used when neither `src` nor `name` was given. */
@@ -41,11 +49,12 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import('vue').DefineComponent<IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IconProps> & Readonly<{}>, {
     label: string;
-    size: number;
-    name: string | BuiltinIcon;
     render: IconRender;
+    name: string | BuiltinIcon;
+    size: number | string;
     src: string;
     filled: boolean;
+    mirrored: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1 +1 @@
-{"version":3,"file":"VIcon.js","names":[],"sources":["../../../src/components/VIcon/VIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * An icon, whatever the icons of the host application happen to be made of. The\n * component's real work is deciding WHERE the drawing comes from, and it asks in a\n * fixed order: an explicit render first, then an image address, then the name —\n * which is offered to the consumer's own resolver if one was installed, then to the\n * drawing the icon brought along with it, and finally to a ligature font. A raw SVG\n * can always be passed through the slot instead.\n *\n * That order IS the contract. The resolver is asked before the built-in drawing,\n * otherwise the design system's own icons would stay Material for a consumer who has\n * wired in their own library; and a resolver that answers `undefined` for a name\n * simply hands over to that drawing, which is what makes a PARTIAL mapping usable.\n *\n * It is what allows the design system to work with no icon font at all: the icons\n * the library draws by itself — crosses, chevrons, toast tones — are imported by the\n * components that render them and travel as a name AND its paths, so they depend on\n * nothing being installed, and a consumer downloads only the ones their components\n * actually draw. The ligature remains the fallback for every other name.\n *\n * Despite the `computed`, there is no behavioural JavaScript here: no event, no\n * lifecycle, no DOM. It is a pure choice of source, which the server and the browser\n * make identically.\n */\nimport { computed, type Component } from 'vue'\n\nimport { ICON_VIEW_BOX } from './icons/viewBox'\nimport { resolveIcon } from './resolver'\nimport type { BuiltinIcon, IconRender } from './types'\n\ninterface IconProps {\n  /**\n   * Which icon to draw. A plain string is a name: it is offered to the consumer's\n   * resolver and then left to the icon font as a ligature. One of the design\n   * system's own icons, imported from `vectis-ui/icons`, carries its drawing with\n   * it — the resolver is still asked first, and the drawing is what answers when\n   * nothing else does.\n   */\n  name?: string | BuiltinIcon\n  /**\n   * An explicit description of what to draw — an image, a component, a path, a class\n   * — which wins over everything else. This is the route every `IconSource` prop of\n   * the design system takes when it is given something other than a plain name.\n   */\n  render?: IconRender\n  /** The address of an image to use as the icon. It wins over `name`. */\n  src?: string\n  /**\n   * A size in pixels. Left out, the icon takes the size its context imposes — a\n   * button sets one for the icons inside it — and failing that 1em, which makes it\n   * follow the surrounding text.\n   */\n  size?: number\n  /**\n   * What the icon means, for screen readers. Leaving it out marks the icon as\n   * decorative and hides it from them, which is the right thing whenever the\n   * surrounding text already says what it says.\n   */\n  label?: string\n  /**\n   * Draws the filled version of the icon. The built-in icons honour it wherever\n   * filling actually changes the drawing, and the ligature font always does. It\n   * means nothing for an image or an inline SVG, whose shape is fixed.\n   */\n  filled?: boolean\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n  name: undefined,\n  render: undefined,\n  src: undefined,\n  size: undefined,\n  label: undefined,\n  filled: false,\n})\n\ndefineSlots<{\n  /** An inline SVG, used when neither `src` nor `name` was given. */\n  default?(): unknown\n}>()\n\n/**\n * The chosen source, labelled with its kind. The public `IconRender` union carries\n * no such label — the consumer writes it by hand and has nothing to tag it with —\n * but the template needs one thing it can branch on reliably, and applying the tag\n * is also where the documented precedence between the shapes gets decided.\n */\ntype Resolved =\n  | { kind: 'path'; path: string; viewBox: string }\n  | { kind: 'component'; component: Component; props?: Record<string, unknown> }\n  | { kind: 'src'; src: string }\n  | { kind: 'text'; text: string; class?: string }\n  | { kind: 'class'; class: string }\n\nfunction tag(render: IconRender): Resolved {\n  if ('path' in render)\n    return { kind: 'path', path: render.path, viewBox: render.viewBox ?? ICON_VIEW_BOX }\n  if ('component' in render)\n    return { kind: 'component', component: render.component, props: render.props }\n  if ('src' in render) return { kind: 'src', src: render.src }\n  if ('text' in render) return { kind: 'text', text: render.text, class: render.class }\n  return { kind: 'class', class: render.class }\n}\n\n// @fallback — the ladder itself: every rung hands over to the next one, and the\n// ligature is the last resort, reached when neither the resolver nor the registry\n// recognized the name.\n/**\n * Works out what to draw: an explicit `render` if there is one, then the consumer's\n * resolver, then the icons built into the library. Answering `undefined` here is not\n * a failure — it means the template falls through to the image, the ligature or the\n * slot.\n */\n/**\n * The icon's identity: the name the resolver is asked for, and the one `data-icon`\n * records whatever the drawing turned out to come from.\n */\nconst iconName = computed(() => (typeof props.name === 'string' ? props.name : props.name?.name))\n\nconst resolved = computed<Resolved | undefined>(() => {\n  if (props.render) return tag(props.render)\n  if (props.src !== undefined || props.name === undefined) return undefined\n\n  const custom = resolveIcon(iconName.value!, { filled: props.filled })\n  if (custom) return tag(custom)\n\n  // A bare name has no drawing of its own, so it falls through to the ligature; only\n  // one of the library's own icons brings its paths along.\n  if (typeof props.name === 'string') return undefined\n\n  const { paths } = props.name\n  // A second path is only stored when filling actually changes the drawing, so most\n  // icons have one path and fall back to it (see icons.ts).\n  const path = (props.filled ? paths[1] : undefined) ?? paths[0]\n  return { kind: 'path', path, viewBox: ICON_VIEW_BOX }\n})\n</script>\n\n<template>\n  <span\n    class=\"v-icon\"\n    :style=\"size !== undefined ? { '--vectis-icon-size': `${size}px` } : undefined\"\n    :data-icon=\"iconName\"\n    :data-filled=\"filled || undefined\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  >\n    <template v-if=\"resolved\">\n      <svg\n        v-if=\"resolved.kind === 'path'\"\n        class=\"v-icon-svg\"\n        :viewBox=\"resolved.viewBox\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path :d=\"resolved.path\" />\n      </svg>\n      <component\n        :is=\"resolved.component\"\n        v-else-if=\"resolved.kind === 'component'\"\n        v-bind=\"resolved.props\"\n      />\n      <img v-else-if=\"resolved.kind === 'src'\" class=\"v-icon-img\" :src=\"resolved.src\" alt=\"\" />\n      <!-- The interpolation is written flush against the tags: a ligature is matched\n           on the exact text, and any surrounding whitespace would break it -->\n      <span v-else-if=\"resolved.kind === 'text'\" class=\"v-icon-symbol\" :class=\"resolved.class\">{{\n        resolved.text\n      }}</span>\n      <span v-else class=\"v-icon-glyph\" :class=\"resolved.class\" />\n    </template>\n    <img v-else-if=\"src\" class=\"v-icon-img\" :src=\"src\" alt=\"\" />\n    <span v-else-if=\"name\" class=\"v-icon-symbol\">{{ name }}</span>\n    <slot v-else />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-icon {\n    /*\n     * How the size is settled, in order of priority:\n     * 1. the `size` prop, written inline on the element as --vectis-icon-size — a\n     *    declaration made on the element itself beats both inheritance and the\n     *    layer, so it always wins;\n     * 2. the variables inherited from an ancestor, which is the context API: a\n     *    VButton sets them from its own size, and the icons inside follow;\n     * 3. 1em, which makes the icon follow the size of the text around it.\n     */\n    --icon-size: var(--vectis-icon-size, 1em);\n    --icon-opsz: var(--vectis-icon-opsz, 24);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: var(--icon-size);\n    block-size: var(--icon-size);\n    /* a ligature is text, so it is the font-size that sizes it */\n    font-size: var(--icon-size);\n  }\n\n  /* When the icon font has not loaded, a ligature shows as its own name in plain\n     text. Clipping keeps that text inside the square instead of letting it push the\n     layout apart. The rule is scoped to the ONE branch it protects rather than to\n     `.v-icon`: a third-party icon font may legitimately draw outside its 1em box,\n     and clipping everything would cut those glyphs. */\n  .v-icon:has(> .v-icon-symbol) {\n    overflow: hidden;\n  }\n\n  .v-icon-symbol {\n    font-family: var(--vectis-font-family-icon);\n    font-weight: var(--vectis-font-weight-regular);\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n    letter-spacing: normal;\n    text-transform: none;\n    white-space: nowrap;\n    direction: ltr;\n    /* The variable axes of the Material Symbols font. These numbers are the font's\n       own technical contract and not design decisions, which is why they are written\n       literally here rather than taken from tokens — the same tolerance as the\n       opacities. */\n    font-variation-settings:\n      'FILL' var(--icon-fill, 0),\n      'wght' 400,\n      'GRAD' 0,\n      'opsz' var(--icon-opsz);\n  }\n\n  .v-icon[data-filled] .v-icon-symbol {\n    --icon-fill: 1;\n  }\n\n  .v-icon-img,\n  .v-icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* An icon coming from a class-based font, as Font Awesome and Phosphor ship them:\n     the glyph is drawn by a `::before`, at the font-size `.v-icon` has set. Because\n     the design system renders this element itself rather than accepting the usual\n     `<i>`, one rule normalizes it for every such library — `font-style` undoes the\n     italics those conventions carry, and `line-height` stops the inherited line box\n     from pushing the glyph off centre. */\n  .v-icon-glyph {\n    display: block;\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n  }\n\n  /* An SVG drawn from the built-in icons. The fill is set on OUR class and never on\n     `.v-icon > svg`, so that a multicoloured SVG handed in through the slot keeps\n     its own colours instead of being flattened to the text colour. `display: block`\n     removes the gap an inline element leaves under its baseline. */\n  .v-icon-svg {\n    display: block;\n    fill: currentcolor;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VIcon.js","names":[],"sources":["../../../src/components/VIcon/VIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * An icon, whatever the host application's icons are made of. The real work is deciding\n * WHERE the drawing comes from, asked in a fixed order: `render`, then `src`, then `name` —\n * offered to the consumer's resolver if one was installed, then to the drawing the icon\n * carries, and finally to a ligature font. A raw SVG can always come through the slot.\n *\n * That order IS the contract. The resolver comes before the built-in drawing, or the\n * library's own icons would stay Material for a consumer who wired in their own set; and a\n * resolver returning `undefined` hands over to that drawing, which is what makes a PARTIAL\n * mapping usable.\n *\n * It is what lets the library require no icon font: the icons it draws by default are\n * imported by the components that render them and travel as a name AND its paths, so a\n * consumer downloads only the ones their components actually draw.\n *\n * Despite the `computed`, there is no behavioural JS here — no event, no lifecycle, no DOM.\n * A pure choice of source, made identically on the server and in the browser.\n */\nimport { computed, type Component } from 'vue'\n\nimport { iconName as nameOf } from './iconProps'\nimport { ICON_VIEW_BOX } from './icons/viewBox'\nimport { resolveIcon } from './resolver'\nimport type { BuiltinIcon, IconRender } from './types'\n\nimport { px } from '../../utils/css'\n\ninterface IconProps {\n  /**\n   * Which icon to draw. A plain string is a name: it is offered to the consumer's\n   * resolver and then left to the icon font as a ligature. One of the design\n   * system's own icons, imported from `vectis-ui/icons`, carries its drawing with\n   * it — the resolver is still asked first, and the drawing is what answers when\n   * nothing else does.\n   */\n  name?: string | BuiltinIcon\n  /**\n   * An explicit description of what to draw — an image, a component, a path, a class\n   * — which wins over everything else. This is the route every `IconSource` prop of\n   * the design system takes when it is given something other than a plain name.\n   */\n  render?: IconRender\n  /** The address of an image to use as the icon. It wins over `name`. */\n  src?: string\n  /**\n   * A size in pixels, as a number or a numeric string. Left out, or given something that\n   * is not a number, the icon takes the size its context imposes — a button sets one for\n   * the icons inside it — and failing that 1em, which makes it follow the surrounding\n   * text.\n   */\n  size?: number | string\n  /**\n   * What the icon means, for screen readers. Leaving it out marks the icon as\n   * decorative and hides it from them, which is the right thing whenever the\n   * surrounding text already says what it says.\n   */\n  label?: string\n  /**\n   * Draws the filled version of the icon. The built-in icons honour it wherever\n   * filling actually changes the drawing, and the ligature font always does. It\n   * means nothing for an image or an inline SVG, whose shape is fixed.\n   */\n  filled?: boolean\n  /**\n   * Flips the icon horizontally in a right-to-left context, for a glyph that points\n   * at a physical direction: a \"previous\" chevron points left in English and right in\n   * Arabic. Off by default, since most icons mean the same thing in both directions.\n   * The direction is the one the browser computed, so an ancestor's `dir` is enough.\n   */\n  mirrored?: boolean\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n  name: undefined,\n  render: undefined,\n  src: undefined,\n  size: undefined,\n  label: undefined,\n  filled: false,\n  mirrored: false,\n})\n\ndefineSlots<{\n  /** An inline SVG, used when neither `src` nor `name` was given. */\n  default?(): unknown\n}>()\n\n/**\n * The chosen source, labelled with its kind. The public `IconRender` union carries\n * no such label — the consumer writes it by hand and has nothing to tag it with —\n * but the template needs one thing it can branch on reliably, and applying the tag\n * is also where the documented precedence between the shapes gets decided.\n */\ntype Resolved =\n  | { kind: 'path'; path: string; viewBox: string }\n  | { kind: 'component'; component: Component; props?: Record<string, unknown> }\n  | { kind: 'src'; src: string }\n  | { kind: 'text'; text: string; class?: string }\n  | { kind: 'class'; class: string }\n\nfunction tag(render: IconRender): Resolved {\n  if ('path' in render)\n    return { kind: 'path', path: render.path, viewBox: render.viewBox ?? ICON_VIEW_BOX }\n  if ('component' in render)\n    return { kind: 'component', component: render.component, props: render.props }\n  if ('src' in render) return { kind: 'src', src: render.src }\n  if ('text' in render) return { kind: 'text', text: render.text, class: render.class }\n  return { kind: 'class', class: render.class }\n}\n\n/**\n * The icon's identity: the name the resolver is asked for, and the one `data-icon`\n * records whatever the drawing turned out to come from.\n */\nconst iconName = computed(() => nameOf(props.name))\n\n// @fallback — the ladder itself: every rung hands over to the next one, and the\n// ligature is the last resort, reached when neither the resolver nor the registry\n// recognized the name.\n/**\n * Works out what to draw: an explicit `render` if there is one, then the consumer's\n * resolver, then the icons built into the library. Answering `undefined` here is not\n * a failure — it means the template falls through to the image, the ligature or the\n * slot.\n */\nconst resolved = computed<Resolved | undefined>(() => {\n  if (props.render) return tag(props.render)\n  // TRUTHINESS on `src`, the test the template renders the image with: an empty `src=\"\"`\n  // renders no image, so it must not stop the name from being drawn either.\n  if (props.src || props.name === undefined) return undefined\n\n  const custom = resolveIcon(iconName.value!, { filled: props.filled })\n  if (custom) return tag(custom)\n\n  // A bare name has no drawing of its own, so it falls through to the ligature; only\n  // one of the library's own icons brings its paths along.\n  if (typeof props.name === 'string') return undefined\n\n  const { paths } = props.name\n  // A second path is only stored when filling actually changes the drawing, so most\n  // icons have one path and fall back to it (see icons.ts).\n  const path = (props.filled ? paths[1] : undefined) ?? paths[0]\n  return { kind: 'path', path, viewBox: ICON_VIEW_BOX }\n})\n</script>\n\n<template>\n  <span\n    class=\"v-icon\"\n    :style=\"px(size) !== undefined ? { '--vectis-icon-size': px(size) } : undefined\"\n    :data-icon=\"iconName\"\n    :data-filled=\"filled || undefined\"\n    :data-mirror=\"mirrored || undefined\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  >\n    <template v-if=\"resolved\">\n      <svg\n        v-if=\"resolved.kind === 'path'\"\n        class=\"v-icon-svg\"\n        :viewBox=\"resolved.viewBox\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path :d=\"resolved.path\" />\n      </svg>\n      <component\n        :is=\"resolved.component\"\n        v-else-if=\"resolved.kind === 'component'\"\n        v-bind=\"resolved.props\"\n      />\n      <img v-else-if=\"resolved.kind === 'src'\" class=\"v-icon-img\" :src=\"resolved.src\" alt=\"\" />\n      <!-- The interpolation is written flush against the tags: a ligature is matched\n           on the exact text, and any surrounding whitespace would break it -->\n      <span v-else-if=\"resolved.kind === 'text'\" class=\"v-icon-symbol\" :class=\"resolved.class\">{{\n        resolved.text\n      }}</span>\n      <span v-else class=\"v-icon-glyph\" :class=\"resolved.class\" />\n    </template>\n    <img v-else-if=\"src\" class=\"v-icon-img\" :src=\"src\" alt=\"\" />\n    <span v-else-if=\"name\" class=\"v-icon-symbol\">{{ iconName }}</span>\n    <slot v-else />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-icon {\n    /*\n     * How the size is settled, in order of priority:\n     * 1. the `size` prop, written inline on the element as --vectis-icon-size — a\n     *    declaration made on the element itself beats both inheritance and the\n     *    layer, so it always wins;\n     * 2. the variables inherited from an ancestor, which is the context API: a\n     *    VButton sets them from its own size, and the icons inside follow;\n     * 3. 1em, which makes the icon follow the size of the text around it.\n     */\n    --icon-size: var(--vectis-icon-size, 1em);\n    --icon-opsz: var(--vectis-icon-opsz, 24);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: var(--icon-size);\n    block-size: var(--icon-size);\n    /* a ligature is text, so it is the font-size that sizes it */\n    font-size: var(--icon-size);\n  }\n\n  /* When the icon font has not loaded, a ligature shows as its own name in plain\n     text. Clipping keeps that text inside the square instead of letting it push the\n     layout apart. The rule is scoped to the ONE branch it protects rather than to\n     `.v-icon`: a third-party icon font may legitimately draw outside its 1em box,\n     and clipping everything would cut those glyphs. */\n  .v-icon:has(> .v-icon-symbol) {\n    overflow: hidden;\n  }\n\n  .v-icon-symbol {\n    font-family: var(--vectis-font-family-icon);\n    font-weight: var(--vectis-font-weight-regular);\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n    letter-spacing: normal;\n    text-transform: none;\n    white-space: nowrap;\n    direction: ltr;\n    /* The variable axes of the Material Symbols font. These numbers are the font's\n       own technical contract and not design decisions, which is why they are written\n       literally here rather than taken from tokens — the same tolerance as the\n       opacities. */\n    font-variation-settings:\n      'FILL' var(--icon-fill, 0),\n      'wght' 400,\n      'GRAD' 0,\n      'opsz' var(--icon-opsz);\n  }\n\n  .v-icon[data-filled] .v-icon-symbol {\n    --icon-fill: 1;\n  }\n\n  /* `:dir()` reads the direction the browser computed rather than an attribute spelled on\n     an ancestor, and `scale` is the individual property, so it composes with a rotation\n     a consumer applies (a disclosure chevron) instead of replacing its transform. */\n  .v-icon[data-mirror]:dir(rtl) {\n    scale: -1 1;\n  }\n\n  .v-icon-img,\n  .v-icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* An icon coming from a class-based font, as Font Awesome and Phosphor ship them:\n     the glyph is drawn by a `::before`, at the font-size `.v-icon` has set. Because\n     the design system renders this element itself rather than accepting the usual\n     `<i>`, one rule normalizes it for every such library — `font-style` undoes the\n     italics those conventions carry, and `line-height` stops the inherited line box\n     from pushing the glyph off centre. */\n  .v-icon-glyph {\n    display: block;\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n  }\n\n  /* An SVG drawn from the built-in icons. The fill is set on OUR class and never on\n     `.v-icon > svg`, so that a multicoloured SVG handed in through the slot keeps\n     its own colours instead of being flattened to the text colour. `display: block`\n     removes the gap an inline element leaves under its baseline. */\n  .v-icon-svg {\n    display: block;\n    fill: currentcolor;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VIcon/VIcon.vue_vue_type_script_setup_true_lang.js

@@ -1,17 +1,20 @@
-import { ICON_VIEW_BOX as e } from "./icons/viewBox.js";
-import { resolveIcon as t } from "./resolver.js";
-import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeProps as c, normalizeClass as l, normalizeProps as u, normalizeStyle as d, openBlock as f, renderSlot as p, resolveDynamicComponent as m, toDisplayString as h } from "vue";
+import { iconName as e } from "./iconProps.js";
+import { ICON_VIEW_BOX as t } from "./icons/viewBox.js";
+import { resolveIcon as n } from "./resolver.js";
+import { px as r } from "../../utils/css.js";
+import { Fragment as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, defineComponent as l, mergeProps as u, normalizeClass as d, normalizeProps as f, normalizeStyle as p, openBlock as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v } from "vue";
 //#region src/components/VIcon/VIcon.vue?vue&type=script&setup=true&lang.ts
-var g = [
+var y = [
 	"data-icon",
 	"data-filled",
+	"data-mirror",
 	"role",
 	"aria-label",
 	"aria-hidden"
-], _ = ["viewBox"], v = ["d"], y = ["src"], b = ["src"], x = {
+], b = ["viewBox"], x = ["d"], S = ["src"], C = ["src"], w = {
 	key: 2,
 	class: "v-icon-symbol"
-}, S = /*@__PURE__*/ s({
+}, T = /*@__PURE__*/ l({
 	__name: "VIcon",
 	props: {
 		name: { default: void 0 },
@@ -22,11 +25,15 @@ var g = [
 		filled: {
 			type: Boolean,
 			default: !1
+		},
+		mirrored: {
+			type: Boolean,
+			default: !1
 		}
 	},
-	setup(s) {
-		let S = s;
-		function C(e) {
+	setup(l) {
+		let T = l;
+		function E(e) {
 			return "path" in e ? {
 				kind: "path",
 				path: e.path,
@@ -47,53 +54,54 @@ var g = [
 				class: e.class
 			};
 		}
-		let w = r(() => typeof S.name == "string" ? S.name : S.name?.name), T = r(() => {
-			if (S.render) return C(S.render);
-			if (S.src !== void 0 || S.name === void 0) return;
-			let n = t(w.value, { filled: S.filled });
-			if (n) return C(n);
-			if (typeof S.name == "string") return;
-			let { paths: r } = S.name;
+		let D = a(() => e(T.name)), O = a(() => {
+			if (T.render) return E(T.render);
+			if (T.src || T.name === void 0) return;
+			let e = n(D.value, { filled: T.filled });
+			if (e) return E(e);
+			if (typeof T.name == "string") return;
+			let { paths: r } = T.name;
 			return {
 				kind: "path",
-				path: (S.filled ? r[1] : void 0) ?? r[0],
-				viewBox: e
+				path: (T.filled ? r[1] : void 0) ?? r[0],
+				viewBox: t
 			};
 		});
-		return (e, t) => (f(), a("span", {
+		return (e, t) => (m(), s("span", {
 			class: "v-icon",
-			style: d(s.size === void 0 ? void 0 : { "--vectis-icon-size": `${s.size}px` }),
-			"data-icon": w.value,
-			"data-filled": s.filled || void 0,
-			role: s.label ? "img" : void 0,
-			"aria-label": s.label,
-			"aria-hidden": s.label ? void 0 : "true"
-		}, [T.value ? (f(), a(n, { key: 0 }, [T.value.kind === "path" ? (f(), a("svg", {
+			style: p(v(r)(l.size) === void 0 ? void 0 : { "--vectis-icon-size": v(r)(l.size) }),
+			"data-icon": D.value,
+			"data-filled": l.filled || void 0,
+			"data-mirror": l.mirrored || void 0,
+			role: l.label ? "img" : void 0,
+			"aria-label": l.label,
+			"aria-hidden": l.label ? void 0 : "true"
+		}, [O.value ? (m(), s(i, { key: 0 }, [O.value.kind === "path" ? (m(), s("svg", {
 			key: 0,
 			class: "v-icon-svg",
-			viewBox: T.value.viewBox,
+			viewBox: O.value.viewBox,
 			"aria-hidden": "true",
 			focusable: "false"
-		}, [o("path", { d: T.value.path }, null, 8, v)], 8, _)) : T.value.kind === "component" ? (f(), i(m(T.value.component), u(c({ key: 1 }, T.value.props)), null, 16)) : T.value.kind === "src" ? (f(), a("img", {
+		}, [c("path", { d: O.value.path }, null, 8, x)], 8, b)) : O.value.kind === "component" ? (m(), o(g(O.value.component), f(u({ key: 1 }, O.value.props)), null, 16)) : O.value.kind === "src" ? (m(), s("img", {
 			key: 2,
 			class: "v-icon-img",
-			src: T.value.src,
+			src: O.value.src,
 			alt: ""
-		}, null, 8, y)) : T.value.kind === "text" ? (f(), a("span", {
+		}, null, 8, S)) : O.value.kind === "text" ? (m(), s("span", {
 			key: 3,
-			class: l(["v-icon-symbol", T.value.class])
-		}, h(T.value.text), 3)) : (f(), a("span", {
+			class: d(["v-icon-symbol", O.value.class])
+		}, _(O.value.text), 3)) : (m(), s("span", {
 			key: 4,
-			class: l(["v-icon-glyph", T.value.class])
-		}, null, 2))], 64)) : s.src ? (f(), a("img", {
+			class: d(["v-icon-glyph", O.value.class])
+		}, null, 2))], 64)) : l.src ? (m(), s("img", {
 			key: 1,
 			class: "v-icon-img",
-			src: s.src,
+			src: l.src,
 			alt: ""
-		}, null, 8, b)) : s.name ? (f(), a("span", x, h(s.name), 1)) : p(e.$slots, "default", {}, void 0, void 0, 3)], 12, g));
+		}, null, 8, C)) : l.name ? (m(), s("span", w, _(D.value), 1)) : h(e.$slots, "default", {}, void 0, void 0, 3)], 12, y));
 	}
 });
 //#endregion
-export { S as default };
+export { T as default };
 
 //# sourceMappingURL=VIcon.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VIcon/VIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * An icon, whatever the icons of the host application happen to be made of. The\n * component's real work is deciding WHERE the drawing comes from, and it asks in a\n * fixed order: an explicit render first, then an image address, then the name —\n * which is offered to the consumer's own resolver if one was installed, then to the\n * drawing the icon brought along with it, and finally to a ligature font. A raw SVG\n * can always be passed through the slot instead.\n *\n * That order IS the contract. The resolver is asked before the built-in drawing,\n * otherwise the design system's own icons would stay Material for a consumer who has\n * wired in their own library; and a resolver that answers `undefined` for a name\n * simply hands over to that drawing, which is what makes a PARTIAL mapping usable.\n *\n * It is what allows the design system to work with no icon font at all: the icons\n * the library draws by itself — crosses, chevrons, toast tones — are imported by the\n * components that render them and travel as a name AND its paths, so they depend on\n * nothing being installed, and a consumer downloads only the ones their components\n * actually draw. The ligature remains the fallback for every other name.\n *\n * Despite the `computed`, there is no behavioural JavaScript here: no event, no\n * lifecycle, no DOM. It is a pure choice of source, which the server and the browser\n * make identically.\n */\nimport { computed, type Component } from 'vue'\n\nimport { ICON_VIEW_BOX } from './icons/viewBox'\nimport { resolveIcon } from './resolver'\nimport type { BuiltinIcon, IconRender } from './types'\n\ninterface IconProps {\n  /**\n   * Which icon to draw. A plain string is a name: it is offered to the consumer's\n   * resolver and then left to the icon font as a ligature. One of the design\n   * system's own icons, imported from `vectis-ui/icons`, carries its drawing with\n   * it — the resolver is still asked first, and the drawing is what answers when\n   * nothing else does.\n   */\n  name?: string | BuiltinIcon\n  /**\n   * An explicit description of what to draw — an image, a component, a path, a class\n   * — which wins over everything else. This is the route every `IconSource` prop of\n   * the design system takes when it is given something other than a plain name.\n   */\n  render?: IconRender\n  /** The address of an image to use as the icon. It wins over `name`. */\n  src?: string\n  /**\n   * A size in pixels. Left out, the icon takes the size its context imposes — a\n   * button sets one for the icons inside it — and failing that 1em, which makes it\n   * follow the surrounding text.\n   */\n  size?: number\n  /**\n   * What the icon means, for screen readers. Leaving it out marks the icon as\n   * decorative and hides it from them, which is the right thing whenever the\n   * surrounding text already says what it says.\n   */\n  label?: string\n  /**\n   * Draws the filled version of the icon. The built-in icons honour it wherever\n   * filling actually changes the drawing, and the ligature font always does. It\n   * means nothing for an image or an inline SVG, whose shape is fixed.\n   */\n  filled?: boolean\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n  name: undefined,\n  render: undefined,\n  src: undefined,\n  size: undefined,\n  label: undefined,\n  filled: false,\n})\n\ndefineSlots<{\n  /** An inline SVG, used when neither `src` nor `name` was given. */\n  default?(): unknown\n}>()\n\n/**\n * The chosen source, labelled with its kind. The public `IconRender` union carries\n * no such label — the consumer writes it by hand and has nothing to tag it with —\n * but the template needs one thing it can branch on reliably, and applying the tag\n * is also where the documented precedence between the shapes gets decided.\n */\ntype Resolved =\n  | { kind: 'path'; path: string; viewBox: string }\n  | { kind: 'component'; component: Component; props?: Record<string, unknown> }\n  | { kind: 'src'; src: string }\n  | { kind: 'text'; text: string; class?: string }\n  | { kind: 'class'; class: string }\n\nfunction tag(render: IconRender): Resolved {\n  if ('path' in render)\n    return { kind: 'path', path: render.path, viewBox: render.viewBox ?? ICON_VIEW_BOX }\n  if ('component' in render)\n    return { kind: 'component', component: render.component, props: render.props }\n  if ('src' in render) return { kind: 'src', src: render.src }\n  if ('text' in render) return { kind: 'text', text: render.text, class: render.class }\n  return { kind: 'class', class: render.class }\n}\n\n// @fallback — the ladder itself: every rung hands over to the next one, and the\n// ligature is the last resort, reached when neither the resolver nor the registry\n// recognized the name.\n/**\n * Works out what to draw: an explicit `render` if there is one, then the consumer's\n * resolver, then the icons built into the library. Answering `undefined` here is not\n * a failure — it means the template falls through to the image, the ligature or the\n * slot.\n */\n/**\n * The icon's identity: the name the resolver is asked for, and the one `data-icon`\n * records whatever the drawing turned out to come from.\n */\nconst iconName = computed(() => (typeof props.name === 'string' ? props.name : props.name?.name))\n\nconst resolved = computed<Resolved | undefined>(() => {\n  if (props.render) return tag(props.render)\n  if (props.src !== undefined || props.name === undefined) return undefined\n\n  const custom = resolveIcon(iconName.value!, { filled: props.filled })\n  if (custom) return tag(custom)\n\n  // A bare name has no drawing of its own, so it falls through to the ligature; only\n  // one of the library's own icons brings its paths along.\n  if (typeof props.name === 'string') return undefined\n\n  const { paths } = props.name\n  // A second path is only stored when filling actually changes the drawing, so most\n  // icons have one path and fall back to it (see icons.ts).\n  const path = (props.filled ? paths[1] : undefined) ?? paths[0]\n  return { kind: 'path', path, viewBox: ICON_VIEW_BOX }\n})\n</script>\n\n<template>\n  <span\n    class=\"v-icon\"\n    :style=\"size !== undefined ? { '--vectis-icon-size': `${size}px` } : undefined\"\n    :data-icon=\"iconName\"\n    :data-filled=\"filled || undefined\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  >\n    <template v-if=\"resolved\">\n      <svg\n        v-if=\"resolved.kind === 'path'\"\n        class=\"v-icon-svg\"\n        :viewBox=\"resolved.viewBox\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path :d=\"resolved.path\" />\n      </svg>\n      <component\n        :is=\"resolved.component\"\n        v-else-if=\"resolved.kind === 'component'\"\n        v-bind=\"resolved.props\"\n      />\n      <img v-else-if=\"resolved.kind === 'src'\" class=\"v-icon-img\" :src=\"resolved.src\" alt=\"\" />\n      <!-- The interpolation is written flush against the tags: a ligature is matched\n           on the exact text, and any surrounding whitespace would break it -->\n      <span v-else-if=\"resolved.kind === 'text'\" class=\"v-icon-symbol\" :class=\"resolved.class\">{{\n        resolved.text\n      }}</span>\n      <span v-else class=\"v-icon-glyph\" :class=\"resolved.class\" />\n    </template>\n    <img v-else-if=\"src\" class=\"v-icon-img\" :src=\"src\" alt=\"\" />\n    <span v-else-if=\"name\" class=\"v-icon-symbol\">{{ name }}</span>\n    <slot v-else />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-icon {\n    /*\n     * How the size is settled, in order of priority:\n     * 1. the `size` prop, written inline on the element as --vectis-icon-size — a\n     *    declaration made on the element itself beats both inheritance and the\n     *    layer, so it always wins;\n     * 2. the variables inherited from an ancestor, which is the context API: a\n     *    VButton sets them from its own size, and the icons inside follow;\n     * 3. 1em, which makes the icon follow the size of the text around it.\n     */\n    --icon-size: var(--vectis-icon-size, 1em);\n    --icon-opsz: var(--vectis-icon-opsz, 24);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: var(--icon-size);\n    block-size: var(--icon-size);\n    /* a ligature is text, so it is the font-size that sizes it */\n    font-size: var(--icon-size);\n  }\n\n  /* When the icon font has not loaded, a ligature shows as its own name in plain\n     text. Clipping keeps that text inside the square instead of letting it push the\n     layout apart. The rule is scoped to the ONE branch it protects rather than to\n     `.v-icon`: a third-party icon font may legitimately draw outside its 1em box,\n     and clipping everything would cut those glyphs. */\n  .v-icon:has(> .v-icon-symbol) {\n    overflow: hidden;\n  }\n\n  .v-icon-symbol {\n    font-family: var(--vectis-font-family-icon);\n    font-weight: var(--vectis-font-weight-regular);\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n    letter-spacing: normal;\n    text-transform: none;\n    white-space: nowrap;\n    direction: ltr;\n    /* The variable axes of the Material Symbols font. These numbers are the font's\n       own technical contract and not design decisions, which is why they are written\n       literally here rather than taken from tokens — the same tolerance as the\n       opacities. */\n    font-variation-settings:\n      'FILL' var(--icon-fill, 0),\n      'wght' 400,\n      'GRAD' 0,\n      'opsz' var(--icon-opsz);\n  }\n\n  .v-icon[data-filled] .v-icon-symbol {\n    --icon-fill: 1;\n  }\n\n  .v-icon-img,\n  .v-icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* An icon coming from a class-based font, as Font Awesome and Phosphor ship them:\n     the glyph is drawn by a `::before`, at the font-size `.v-icon` has set. Because\n     the design system renders this element itself rather than accepting the usual\n     `<i>`, one rule normalizes it for every such library — `font-style` undoes the\n     italics those conventions carry, and `line-height` stops the inherited line box\n     from pushing the glyph off centre. */\n  .v-icon-glyph {\n    display: block;\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n  }\n\n  /* An SVG drawn from the built-in icons. The fill is set on OUR class and never on\n     `.v-icon > svg`, so that a multicoloured SVG handed in through the slot keeps\n     its own colours instead of being flattened to the text colour. `display: block`\n     removes the gap an inline element leaves under its baseline. */\n  .v-icon-svg {\n    display: block;\n    fill: currentcolor;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA,IAAM,IAAQ;EA2Bd,SAAS,EAAI,GAA8B;GAOzC,OANI,UAAU,IACL;IAAE,MAAM;IAAQ,MAAM,EAAO;IAAM,SAAS,EAAO,WAAA;GAAyB,IACjF,eAAe,IACV;IAAE,MAAM;IAAa,WAAW,EAAO;IAAW,OAAO,EAAO;GAAM,IAC3E,SAAS,IAAe;IAAE,MAAM;IAAO,KAAK,EAAO;GAAI,IACvD,UAAU,IAAe;IAAE,MAAM;IAAQ,MAAM,EAAO;IAAM,OAAO,EAAO;GAAM,IAC7E;IAAE,MAAM;IAAS,OAAO,EAAO;GAAM;EAC9C;EAeA,IAAM,IAAW,QAAgB,OAAO,EAAM,QAAS,WAAW,EAAM,OAAO,EAAM,MAAM,IAAK,GAE1F,IAAW,QAAqC;GACpD,IAAI,EAAM,QAAQ,OAAO,EAAI,EAAM,MAAM;GACzC,IAAI,EAAM,QAAQ,KAAA,KAAa,EAAM,SAAS,KAAA,GAAW;GAEzD,IAAM,IAAS,EAAY,EAAS,OAAQ,EAAE,QAAQ,EAAM,OAAO,CAAC;GACpE,IAAI,GAAQ,OAAO,EAAI,CAAM;GAI7B,IAAI,OAAO,EAAM,QAAS,UAAU;GAEpC,IAAM,EAAE,aAAU,EAAM;GAIxB,OAAO;IAAE,MAAM;IAAQ,OADT,EAAM,SAAS,EAAM,KAAK,KAAA,MAAc,EAAM;IAC/B,SAAS;GAAc;EACtD,CAAC;yBAIC,EAmCO,QAAA;GAlCL,OAAM;GACL,OAAK,EAAE,EAAA,SAAS,KAAA,IAAoD,KAAA,IAA3C,EAAA,sBAAA,GAA8B,EAAA,KAAI,IAAA,CAAkB;GAC7E,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA;GACvB,MAAM,EAAA,QAAK,QAAW,KAAA;GACtB,cAAY,EAAA;GACZ,eAAa,EAAA,QAAQ,KAAA,IAAS;MAEf,EAAA,SAAA,EAAA,GAAhB,EAsBW,GAAA,EAAA,KAAA,EAAA,GAAA,CApBD,EAAA,MAAS,SAAI,UAAA,EAAA,GADrB,EAQM,OAAA;;GANJ,OAAM;GACL,SAAS,EAAA,MAAS;GACnB,eAAY;GACZ,WAAU;MAEV,EAA2B,QAAA,EAApB,GAAG,EAAA,MAAS,KAAA,GAAA,MAAA,GAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAIR,EAAA,MAAS,SAAI,eAAA,EAAA,GAF1B,EAIE,EAHK,EAAA,MAAS,SAAS,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAEf,EAAA,MAAS,KAAK,CAAA,GAAA,MAAA,EAAA,KAER,EAAA,MAAS,SAAI,SAAA,EAAA,GAA7B,EAAyF,OAAA;;GAAhD,OAAM;GAAc,KAAK,EAAA,MAAS;GAAK,KAAI;oBAGnE,EAAA,MAAS,SAAI,UAAA,EAAA,GAA9B,EAES,QAAA;;GAFkC,OAAK,EAAA,CAAC,iBAAwB,EAAA,MAAS,KAAK,CAAA;OACrF,EAAA,MAAS,IAAI,GAAA,CAAA,MAAA,EAAA,GAEf,EAA4D,QAAA;;GAA/C,OAAK,EAAA,CAAC,gBAAuB,EAAA,MAAS,KAAK,CAAA;wBAE1C,EAAA,OAAA,EAAA,GAAhB,EAA4D,OAAA;;GAAvC,OAAM;GAAc,KAAK,EAAA;GAAK,KAAI;oBACtC,EAAA,QAAA,EAAA,GAAjB,EAA8D,QAA9D,GAA8D,EAAd,EAAA,IAAI,GAAA,CAAA,KACpD,EAAe,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VIcon/VIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core\n/**\n * An icon, whatever the host application's icons are made of. The real work is deciding\n * WHERE the drawing comes from, asked in a fixed order: `render`, then `src`, then `name` —\n * offered to the consumer's resolver if one was installed, then to the drawing the icon\n * carries, and finally to a ligature font. A raw SVG can always come through the slot.\n *\n * That order IS the contract. The resolver comes before the built-in drawing, or the\n * library's own icons would stay Material for a consumer who wired in their own set; and a\n * resolver returning `undefined` hands over to that drawing, which is what makes a PARTIAL\n * mapping usable.\n *\n * It is what lets the library require no icon font: the icons it draws by default are\n * imported by the components that render them and travel as a name AND its paths, so a\n * consumer downloads only the ones their components actually draw.\n *\n * Despite the `computed`, there is no behavioural JS here — no event, no lifecycle, no DOM.\n * A pure choice of source, made identically on the server and in the browser.\n */\nimport { computed, type Component } from 'vue'\n\nimport { iconName as nameOf } from './iconProps'\nimport { ICON_VIEW_BOX } from './icons/viewBox'\nimport { resolveIcon } from './resolver'\nimport type { BuiltinIcon, IconRender } from './types'\n\nimport { px } from '../../utils/css'\n\ninterface IconProps {\n  /**\n   * Which icon to draw. A plain string is a name: it is offered to the consumer's\n   * resolver and then left to the icon font as a ligature. One of the design\n   * system's own icons, imported from `vectis-ui/icons`, carries its drawing with\n   * it — the resolver is still asked first, and the drawing is what answers when\n   * nothing else does.\n   */\n  name?: string | BuiltinIcon\n  /**\n   * An explicit description of what to draw — an image, a component, a path, a class\n   * — which wins over everything else. This is the route every `IconSource` prop of\n   * the design system takes when it is given something other than a plain name.\n   */\n  render?: IconRender\n  /** The address of an image to use as the icon. It wins over `name`. */\n  src?: string\n  /**\n   * A size in pixels, as a number or a numeric string. Left out, or given something that\n   * is not a number, the icon takes the size its context imposes — a button sets one for\n   * the icons inside it — and failing that 1em, which makes it follow the surrounding\n   * text.\n   */\n  size?: number | string\n  /**\n   * What the icon means, for screen readers. Leaving it out marks the icon as\n   * decorative and hides it from them, which is the right thing whenever the\n   * surrounding text already says what it says.\n   */\n  label?: string\n  /**\n   * Draws the filled version of the icon. The built-in icons honour it wherever\n   * filling actually changes the drawing, and the ligature font always does. It\n   * means nothing for an image or an inline SVG, whose shape is fixed.\n   */\n  filled?: boolean\n  /**\n   * Flips the icon horizontally in a right-to-left context, for a glyph that points\n   * at a physical direction: a \"previous\" chevron points left in English and right in\n   * Arabic. Off by default, since most icons mean the same thing in both directions.\n   * The direction is the one the browser computed, so an ancestor's `dir` is enough.\n   */\n  mirrored?: boolean\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n  name: undefined,\n  render: undefined,\n  src: undefined,\n  size: undefined,\n  label: undefined,\n  filled: false,\n  mirrored: false,\n})\n\ndefineSlots<{\n  /** An inline SVG, used when neither `src` nor `name` was given. */\n  default?(): unknown\n}>()\n\n/**\n * The chosen source, labelled with its kind. The public `IconRender` union carries\n * no such label — the consumer writes it by hand and has nothing to tag it with —\n * but the template needs one thing it can branch on reliably, and applying the tag\n * is also where the documented precedence between the shapes gets decided.\n */\ntype Resolved =\n  | { kind: 'path'; path: string; viewBox: string }\n  | { kind: 'component'; component: Component; props?: Record<string, unknown> }\n  | { kind: 'src'; src: string }\n  | { kind: 'text'; text: string; class?: string }\n  | { kind: 'class'; class: string }\n\nfunction tag(render: IconRender): Resolved {\n  if ('path' in render)\n    return { kind: 'path', path: render.path, viewBox: render.viewBox ?? ICON_VIEW_BOX }\n  if ('component' in render)\n    return { kind: 'component', component: render.component, props: render.props }\n  if ('src' in render) return { kind: 'src', src: render.src }\n  if ('text' in render) return { kind: 'text', text: render.text, class: render.class }\n  return { kind: 'class', class: render.class }\n}\n\n/**\n * The icon's identity: the name the resolver is asked for, and the one `data-icon`\n * records whatever the drawing turned out to come from.\n */\nconst iconName = computed(() => nameOf(props.name))\n\n// @fallback — the ladder itself: every rung hands over to the next one, and the\n// ligature is the last resort, reached when neither the resolver nor the registry\n// recognized the name.\n/**\n * Works out what to draw: an explicit `render` if there is one, then the consumer's\n * resolver, then the icons built into the library. Answering `undefined` here is not\n * a failure — it means the template falls through to the image, the ligature or the\n * slot.\n */\nconst resolved = computed<Resolved | undefined>(() => {\n  if (props.render) return tag(props.render)\n  // TRUTHINESS on `src`, the test the template renders the image with: an empty `src=\"\"`\n  // renders no image, so it must not stop the name from being drawn either.\n  if (props.src || props.name === undefined) return undefined\n\n  const custom = resolveIcon(iconName.value!, { filled: props.filled })\n  if (custom) return tag(custom)\n\n  // A bare name has no drawing of its own, so it falls through to the ligature; only\n  // one of the library's own icons brings its paths along.\n  if (typeof props.name === 'string') return undefined\n\n  const { paths } = props.name\n  // A second path is only stored when filling actually changes the drawing, so most\n  // icons have one path and fall back to it (see icons.ts).\n  const path = (props.filled ? paths[1] : undefined) ?? paths[0]\n  return { kind: 'path', path, viewBox: ICON_VIEW_BOX }\n})\n</script>\n\n<template>\n  <span\n    class=\"v-icon\"\n    :style=\"px(size) !== undefined ? { '--vectis-icon-size': px(size) } : undefined\"\n    :data-icon=\"iconName\"\n    :data-filled=\"filled || undefined\"\n    :data-mirror=\"mirrored || undefined\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  >\n    <template v-if=\"resolved\">\n      <svg\n        v-if=\"resolved.kind === 'path'\"\n        class=\"v-icon-svg\"\n        :viewBox=\"resolved.viewBox\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <path :d=\"resolved.path\" />\n      </svg>\n      <component\n        :is=\"resolved.component\"\n        v-else-if=\"resolved.kind === 'component'\"\n        v-bind=\"resolved.props\"\n      />\n      <img v-else-if=\"resolved.kind === 'src'\" class=\"v-icon-img\" :src=\"resolved.src\" alt=\"\" />\n      <!-- The interpolation is written flush against the tags: a ligature is matched\n           on the exact text, and any surrounding whitespace would break it -->\n      <span v-else-if=\"resolved.kind === 'text'\" class=\"v-icon-symbol\" :class=\"resolved.class\">{{\n        resolved.text\n      }}</span>\n      <span v-else class=\"v-icon-glyph\" :class=\"resolved.class\" />\n    </template>\n    <img v-else-if=\"src\" class=\"v-icon-img\" :src=\"src\" alt=\"\" />\n    <span v-else-if=\"name\" class=\"v-icon-symbol\">{{ iconName }}</span>\n    <slot v-else />\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-icon {\n    /*\n     * How the size is settled, in order of priority:\n     * 1. the `size` prop, written inline on the element as --vectis-icon-size — a\n     *    declaration made on the element itself beats both inheritance and the\n     *    layer, so it always wins;\n     * 2. the variables inherited from an ancestor, which is the context API: a\n     *    VButton sets them from its own size, and the icons inside follow;\n     * 3. 1em, which makes the icon follow the size of the text around it.\n     */\n    --icon-size: var(--vectis-icon-size, 1em);\n    --icon-opsz: var(--vectis-icon-opsz, 24);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: var(--icon-size);\n    block-size: var(--icon-size);\n    /* a ligature is text, so it is the font-size that sizes it */\n    font-size: var(--icon-size);\n  }\n\n  /* When the icon font has not loaded, a ligature shows as its own name in plain\n     text. Clipping keeps that text inside the square instead of letting it push the\n     layout apart. The rule is scoped to the ONE branch it protects rather than to\n     `.v-icon`: a third-party icon font may legitimately draw outside its 1em box,\n     and clipping everything would cut those glyphs. */\n  .v-icon:has(> .v-icon-symbol) {\n    overflow: hidden;\n  }\n\n  .v-icon-symbol {\n    font-family: var(--vectis-font-family-icon);\n    font-weight: var(--vectis-font-weight-regular);\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n    letter-spacing: normal;\n    text-transform: none;\n    white-space: nowrap;\n    direction: ltr;\n    /* The variable axes of the Material Symbols font. These numbers are the font's\n       own technical contract and not design decisions, which is why they are written\n       literally here rather than taken from tokens — the same tolerance as the\n       opacities. */\n    font-variation-settings:\n      'FILL' var(--icon-fill, 0),\n      'wght' 400,\n      'GRAD' 0,\n      'opsz' var(--icon-opsz);\n  }\n\n  .v-icon[data-filled] .v-icon-symbol {\n    --icon-fill: 1;\n  }\n\n  /* `:dir()` reads the direction the browser computed rather than an attribute spelled on\n     an ancestor, and `scale` is the individual property, so it composes with a rotation\n     a consumer applies (a disclosure chevron) instead of replacing its transform. */\n  .v-icon[data-mirror]:dir(rtl) {\n    scale: -1 1;\n  }\n\n  .v-icon-img,\n  .v-icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* An icon coming from a class-based font, as Font Awesome and Phosphor ship them:\n     the glyph is drawn by a `::before`, at the font-size `.v-icon` has set. Because\n     the design system renders this element itself rather than accepting the usual\n     `<i>`, one rule normalizes it for every such library — `font-style` undoes the\n     italics those conventions carry, and `line-height` stops the inherited line box\n     from pushing the glyph off centre. */\n  .v-icon-glyph {\n    display: block;\n    font-style: normal;\n    line-height: var(--vectis-font-leading-none);\n  }\n\n  /* An SVG drawn from the built-in icons. The fill is set on OUR class and never on\n     `.v-icon > svg`, so that a multicoloured SVG handed in through the slot keeps\n     its own colours instead of being flattened to the text colour. `display: block`\n     removes the gap an inline element leaves under its baseline. */\n  .v-icon-svg {\n    display: block;\n    fill: currentcolor;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EA,IAAM,IAAQ;EA4Bd,SAAS,EAAI,GAA8B;GAOzC,OANI,UAAU,IACL;IAAE,MAAM;IAAQ,MAAM,EAAO;IAAM,SAAS,EAAO,WAAA;GAAyB,IACjF,eAAe,IACV;IAAE,MAAM;IAAa,WAAW,EAAO;IAAW,OAAO,EAAO;GAAM,IAC3E,SAAS,IAAe;IAAE,MAAM;IAAO,KAAK,EAAO;GAAI,IACvD,UAAU,IAAe;IAAE,MAAM;IAAQ,MAAM,EAAO;IAAM,OAAO,EAAO;GAAM,IAC7E;IAAE,MAAM;IAAS,OAAO,EAAO;GAAM;EAC9C;EAMA,IAAM,IAAW,QAAe,EAAO,EAAM,IAAI,CAAC,GAW5C,IAAW,QAAqC;GACpD,IAAI,EAAM,QAAQ,OAAO,EAAI,EAAM,MAAM;GAGzC,IAAI,EAAM,OAAO,EAAM,SAAS,KAAA,GAAW;GAE3C,IAAM,IAAS,EAAY,EAAS,OAAQ,EAAE,QAAQ,EAAM,OAAO,CAAC;GACpE,IAAI,GAAQ,OAAO,EAAI,CAAM;GAI7B,IAAI,OAAO,EAAM,QAAS,UAAU;GAEpC,IAAM,EAAE,aAAU,EAAM;GAIxB,OAAO;IAAE,MAAM;IAAQ,OADT,EAAM,SAAS,EAAM,KAAK,KAAA,MAAc,EAAM;IAC/B,SAAS;GAAc;EACtD,CAAC;yBAIC,EAoCO,QAAA;GAnCL,OAAM;GACL,OAAK,EAAE,EAAA,CAAA,CAAE,CAAC,EAAA,IAAI,MAAM,KAAA,IAAiD,KAAA,IAAxC,EAAA,sBAA2B,EAAA,CAAA,CAAE,CAAC,EAAA,IAAI,EAAA,CAAe;GAC9E,aAAW,EAAA;GACX,eAAa,EAAA,UAAU,KAAA;GACvB,eAAa,EAAA,YAAY,KAAA;GACzB,MAAM,EAAA,QAAK,QAAW,KAAA;GACtB,cAAY,EAAA;GACZ,eAAa,EAAA,QAAQ,KAAA,IAAS;MAEf,EAAA,SAAA,EAAA,GAAhB,EAsBW,GAAA,EAAA,KAAA,EAAA,GAAA,CApBD,EAAA,MAAS,SAAI,UAAA,EAAA,GADrB,EAQM,OAAA;;GANJ,OAAM;GACL,SAAS,EAAA,MAAS;GACnB,eAAY;GACZ,WAAU;MAEV,EAA2B,QAAA,EAApB,GAAG,EAAA,MAAS,KAAA,GAAA,MAAA,GAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAIR,EAAA,MAAS,SAAI,eAAA,EAAA,GAF1B,EAIE,EAHK,EAAA,MAAS,SAAS,GAAA,EAAA,EAAA,EAAA,KAAA,EAAA,GAEf,EAAA,MAAS,KAAK,CAAA,GAAA,MAAA,EAAA,KAER,EAAA,MAAS,SAAI,SAAA,EAAA,GAA7B,EAAyF,OAAA;;GAAhD,OAAM;GAAc,KAAK,EAAA,MAAS;GAAK,KAAI;oBAGnE,EAAA,MAAS,SAAI,UAAA,EAAA,GAA9B,EAES,QAAA;;GAFkC,OAAK,EAAA,CAAC,iBAAwB,EAAA,MAAS,KAAK,CAAA;OACrF,EAAA,MAAS,IAAI,GAAA,CAAA,MAAA,EAAA,GAEf,EAA4D,QAAA;;GAA/C,OAAK,EAAA,CAAC,gBAAuB,EAAA,MAAS,KAAK,CAAA;wBAE1C,EAAA,OAAA,EAAA,GAAhB,EAA4D,OAAA;;GAAvC,OAAM;GAAc,KAAK,EAAA;GAAK,KAAI;oBACtC,EAAA,QAAA,EAAA,GAAjB,EAAkE,QAAlE,GAAkE,EAAlB,EAAA,KAAQ,GAAA,CAAA,KACxD,EAAe,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VIcon/iconProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"iconProps.js","names":[],"sources":["../../../src/components/VIcon/iconProps.ts"],"sourcesContent":["import type { BuiltinIcon, IconRender, IconSource } from './types'\n\n/**\n * Tells one of the library's own icons from something the consumer described by\n * hand. Only a `BuiltinIcon` carries `paths`, and the distinction matters: it is\n * what routes a built-in default to `name` — where the resolver still gets first\n * refusal — instead of to `render`, which wins outright and would silence it.\n */\nconst isBuiltinIcon = (icon: BuiltinIcon | IconRender): icon is BuiltinIcon => 'paths' in icon\n\n/**\n * Turns what a consumer wrote in an icon prop into the props VIcon expects. It is\n * what every component of the design system calls before rendering an icon it was\n * given.\n *\n * There is NO guesswork in the conversion: a plain string is ALWAYS a name, and an\n * image or a component is declared explicitly as an object, `{ src: '/logo.svg' }`.\n * That is what keeps the usual naming conventions — `mdi:close`, `fa6-solid:xmark` —\n * reaching the resolver intact rather than being mistaken for addresses.\n */\nexport const iconProps = (icon: IconSource) =>\n  typeof icon === 'string' || isBuiltinIcon(icon) ? { name: icon } : { render: icon }\n\n/**\n * A readable name for an icon, used as a last-resort accessible label when the\n * consumer supplied none.\n *\n * It answers `undefined` as soon as the icon was DESCRIBED rather than named — an\n * image, a component, a class — because such a description has no name to give and\n * an `[object Object]` read out by a screen reader would be worse than silence.\n * `useIconClickHandlers` is what warns the integrator when that happens on a control\n * that needs a name. One of the library's own icons does carry its name, so it\n * answers here exactly as the bare string used to.\n */\nexport const iconName = (icon: IconSource | undefined) =>\n  typeof icon === 'string' ? icon : icon && isBuiltinIcon(icon) ? icon.name : undefined\n"],"mappings":";AAQA,IAAM,KAAiB,MAAwD,WAAW,GAY7E,KAAa,MACxB,OAAO,KAAS,YAAY,EAAc,CAAI,IAAI,EAAE,MAAM,EAAK,IAAI,EAAE,QAAQ,EAAK,GAavE,KAAY,MACvB,OAAO,KAAS,WAAW,IAAO,KAAQ,EAAc,CAAI,IAAI,EAAK,OAAO,KAAA"}
+{"version":3,"file":"iconProps.js","names":[],"sources":["../../../src/components/VIcon/iconProps.ts"],"sourcesContent":["/**\n * Tells one of the library's own icons from something the consumer described by\n * hand. Only a `BuiltinIcon` carries `paths`, and the distinction matters: it is\n * what routes a built-in default to `name` — where the resolver still gets first\n * refusal — instead of to `render`, which wins outright and would silence it.\n */\n\nimport type { BuiltinIcon, IconRender, IconSource } from './types'\n\nconst isBuiltinIcon = (icon: BuiltinIcon | IconRender): icon is BuiltinIcon => 'paths' in icon\n\n/**\n * Turns what a consumer wrote in an icon prop into the props VIcon expects. It is\n * what every component of the design system calls before rendering an icon it was\n * given.\n *\n * There is NO guesswork in the conversion: a plain string is ALWAYS a name, and an\n * image or a component is declared explicitly as an object, `{ src: '/logo.svg' }`.\n * That is what keeps the usual naming conventions — `mdi:close`, `fa6-solid:xmark` —\n * reaching the resolver intact rather than being mistaken for addresses.\n */\nexport const iconProps = (icon: IconSource) =>\n  typeof icon === 'string' || isBuiltinIcon(icon) ? { name: icon } : { render: icon }\n\n/**\n * A readable name for an icon, used as a last-resort accessible label when the\n * consumer supplied none.\n *\n * It answers `undefined` as soon as the icon was DESCRIBED rather than named — an\n * image, a component, a class — because such a description has no name to give and\n * an `[object Object]` read out by a screen reader would be worse than silence.\n * `useIconClickHandlers` is what warns the integrator when that happens on a control\n * that needs a name. One of the library's own icons does carry its name, so it\n * answers here exactly as the bare string used to.\n */\nexport const iconName = (icon: IconSource | undefined) =>\n  typeof icon === 'string' ? icon : icon && isBuiltinIcon(icon) ? icon.name : undefined\n"],"mappings":";AASA,IAAM,KAAiB,MAAwD,WAAW,GAY7E,KAAa,MACxB,OAAO,KAAS,YAAY,EAAc,CAAI,IAAI,EAAE,MAAM,EAAK,IAAI,EAAE,QAAQ,EAAK,GAavE,KAAY,MACvB,OAAO,KAAS,WAAW,IAAO,KAAQ,EAAc,CAAI,IAAI,EAAK,OAAO,KAAA"}

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

@@ -33,7 +33,7 @@ import { table_chart } from './table_chart.js';
 import { video_file } from './video_file.js';
 import { warning } from './warning.js';
 export { ICON_VIEW_BOX } from './viewBox.js';
-export { builtinIconNames, type VectisIconName } from './names.js';
+export { builtinIconNames, type IconName } from './names.js';
 export { arrow_downward, arrow_downward_alt, arrow_drop_down, arrow_drop_up, arrow_left_alt, arrow_right_alt, arrow_upward, arrow_upward_alt, attach_file, audio_file, calendar_today, check, check_circle, chevron_left, chevron_right, close, cloud_upload, code, description, error, expand_less, expand_more, folder_zip, image, info, more_horiz, notifications, picture_as_pdf, schedule, search, swap_vert, table_chart, video_file, warning, };
 /**
  * Every icon at once, for the places that legitimately want the whole set: the

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/VIcon/icons/index.ts"],"sourcesContent":["/*\n * GENERATED FILE — do not edit by hand.\n * Regenerate: pnpm icons  ·  Source: scripts/build-icons.ts\n *\n * Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24)\n * google/material-design-icons @ 528cb964c01fb2b09bc3b9208f82b6d8f8c1c1e2\n * Apache-2.0 licence © Google.\n */\nimport { arrow_downward } from './arrow_downward'\nimport { arrow_downward_alt } from './arrow_downward_alt'\nimport { arrow_drop_down } from './arrow_drop_down'\nimport { arrow_drop_up } from './arrow_drop_up'\nimport { arrow_left_alt } from './arrow_left_alt'\nimport { arrow_right_alt } from './arrow_right_alt'\nimport { arrow_upward } from './arrow_upward'\nimport { arrow_upward_alt } from './arrow_upward_alt'\nimport { attach_file } from './attach_file'\nimport { audio_file } from './audio_file'\nimport { calendar_today } from './calendar_today'\nimport { check } from './check'\nimport { check_circle } from './check_circle'\nimport { chevron_left } from './chevron_left'\nimport { chevron_right } from './chevron_right'\nimport { close } from './close'\nimport { cloud_upload } from './cloud_upload'\nimport { code } from './code'\nimport { description } from './description'\nimport { error } from './error'\nimport { expand_less } from './expand_less'\nimport { expand_more } from './expand_more'\nimport { folder_zip } from './folder_zip'\nimport { image } from './image'\nimport { info } from './info'\nimport { more_horiz } from './more_horiz'\nimport { notifications } from './notifications'\nimport { picture_as_pdf } from './picture_as_pdf'\nimport { schedule } from './schedule'\nimport { search } from './search'\nimport { swap_vert } from './swap_vert'\nimport { table_chart } from './table_chart'\nimport { video_file } from './video_file'\nimport { warning } from './warning'\n\nexport { ICON_VIEW_BOX } from './viewBox'\nexport { builtinIconNames, type VectisIconName } from './names'\nexport {\n  arrow_downward,\n  arrow_downward_alt,\n  arrow_drop_down,\n  arrow_drop_up,\n  arrow_left_alt,\n  arrow_right_alt,\n  arrow_upward,\n  arrow_upward_alt,\n  attach_file,\n  audio_file,\n  calendar_today,\n  check,\n  check_circle,\n  chevron_left,\n  chevron_right,\n  close,\n  cloud_upload,\n  code,\n  description,\n  error,\n  expand_less,\n  expand_more,\n  folder_zip,\n  image,\n  info,\n  more_horiz,\n  notifications,\n  picture_as_pdf,\n  schedule,\n  search,\n  swap_vert,\n  table_chart,\n  video_file,\n  warning,\n}\n\n/**\n * Every icon at once, for the places that legitimately want the whole set: the\n * gallery in the stories, the documentation site, the tests.\n *\n * NOTHING the library ships imports this barrel — a component imports the two or\n * three icon modules it draws, by name. Importing it from a component would pull all\n * 34 drawings back into every consumer's bundle and undo the split.\n */\nexport const builtinIcons = {\n  arrow_downward,\n  arrow_downward_alt,\n  arrow_drop_down,\n  arrow_drop_up,\n  arrow_left_alt,\n  arrow_right_alt,\n  arrow_upward,\n  arrow_upward_alt,\n  attach_file,\n  audio_file,\n  calendar_today,\n  check,\n  check_circle,\n  chevron_left,\n  chevron_right,\n  close,\n  cloud_upload,\n  code,\n  description,\n  error,\n  expand_less,\n  expand_more,\n  folder_zip,\n  image,\n  info,\n  more_horiz,\n  notifications,\n  picture_as_pdf,\n  schedule,\n  search,\n  swap_vert,\n  table_chart,\n  video_file,\n  warning,\n} as const\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,IAAa,IAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/VIcon/icons/index.ts"],"sourcesContent":["/*\n * GENERATED FILE — do not edit by hand.\n * Regenerate: pnpm icons  ·  Source: scripts/build-icons.ts\n *\n * Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24)\n * google/material-design-icons @ 528cb964c01fb2b09bc3b9208f82b6d8f8c1c1e2\n * Apache-2.0 licence © Google.\n */\nimport { arrow_downward } from './arrow_downward'\nimport { arrow_downward_alt } from './arrow_downward_alt'\nimport { arrow_drop_down } from './arrow_drop_down'\nimport { arrow_drop_up } from './arrow_drop_up'\nimport { arrow_left_alt } from './arrow_left_alt'\nimport { arrow_right_alt } from './arrow_right_alt'\nimport { arrow_upward } from './arrow_upward'\nimport { arrow_upward_alt } from './arrow_upward_alt'\nimport { attach_file } from './attach_file'\nimport { audio_file } from './audio_file'\nimport { calendar_today } from './calendar_today'\nimport { check } from './check'\nimport { check_circle } from './check_circle'\nimport { chevron_left } from './chevron_left'\nimport { chevron_right } from './chevron_right'\nimport { close } from './close'\nimport { cloud_upload } from './cloud_upload'\nimport { code } from './code'\nimport { description } from './description'\nimport { error } from './error'\nimport { expand_less } from './expand_less'\nimport { expand_more } from './expand_more'\nimport { folder_zip } from './folder_zip'\nimport { image } from './image'\nimport { info } from './info'\nimport { more_horiz } from './more_horiz'\nimport { notifications } from './notifications'\nimport { picture_as_pdf } from './picture_as_pdf'\nimport { schedule } from './schedule'\nimport { search } from './search'\nimport { swap_vert } from './swap_vert'\nimport { table_chart } from './table_chart'\nimport { video_file } from './video_file'\nimport { warning } from './warning'\n\nexport { ICON_VIEW_BOX } from './viewBox'\nexport { builtinIconNames, type IconName } from './names'\nexport {\n  arrow_downward,\n  arrow_downward_alt,\n  arrow_drop_down,\n  arrow_drop_up,\n  arrow_left_alt,\n  arrow_right_alt,\n  arrow_upward,\n  arrow_upward_alt,\n  attach_file,\n  audio_file,\n  calendar_today,\n  check,\n  check_circle,\n  chevron_left,\n  chevron_right,\n  close,\n  cloud_upload,\n  code,\n  description,\n  error,\n  expand_less,\n  expand_more,\n  folder_zip,\n  image,\n  info,\n  more_horiz,\n  notifications,\n  picture_as_pdf,\n  schedule,\n  search,\n  swap_vert,\n  table_chart,\n  video_file,\n  warning,\n}\n\n/**\n * Every icon at once, for the places that legitimately want the whole set: the\n * gallery in the stories, the documentation site, the tests.\n *\n * NOTHING the library ships imports this barrel — a component imports the two or\n * three icon modules it draws, by name. Importing it from a component would pull all\n * 34 drawings back into every consumer's bundle and undo the split.\n */\nexport const builtinIcons = {\n  arrow_downward,\n  arrow_downward_alt,\n  arrow_drop_down,\n  arrow_drop_up,\n  arrow_left_alt,\n  arrow_right_alt,\n  arrow_upward,\n  arrow_upward_alt,\n  attach_file,\n  audio_file,\n  calendar_today,\n  check,\n  check_circle,\n  chevron_left,\n  chevron_right,\n  close,\n  cloud_upload,\n  code,\n  description,\n  error,\n  expand_less,\n  expand_more,\n  folder_zip,\n  image,\n  info,\n  more_horiz,\n  notifications,\n  picture_as_pdf,\n  schedule,\n  search,\n  swap_vert,\n  table_chart,\n  video_file,\n  warning,\n} as const\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,IAAa,IAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

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

@@ -1,6 +1,6 @@
 declare const NAMES: readonly ["arrow_downward", "arrow_downward_alt", "arrow_drop_down", "arrow_drop_up", "arrow_left_alt", "arrow_right_alt", "arrow_upward", "arrow_upward_alt", "attach_file", "audio_file", "calendar_today", "check", "check_circle", "chevron_left", "chevron_right", "close", "cloud_upload", "code", "description", "error", "expand_less", "expand_more", "folder_zip", "image", "info", "more_horiz", "notifications", "picture_as_pdf", "schedule", "search", "swap_vert", "table_chart", "video_file", "warning"];
 /** The icon names the DS renders itself — the contract of a consumer resolver. */
-export type VectisIconName = (typeof NAMES)[number];
+export type IconName = (typeof NAMES)[number];
 /**
  * The names alone, carrying no drawing at all. `classIconResolver` in `strict` mode
  * asks nothing more than "does the design system ship this name?", and a module of

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

@@ -1 +1 @@
-{"version":3,"file":"names.js","names":[],"sources":["../../../../src/components/VIcon/icons/names.ts"],"sourcesContent":["/*\n * GENERATED FILE — do not edit by hand.\n * Regenerate: pnpm icons  ·  Source: scripts/build-icons.ts\n *\n * Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24)\n * google/material-design-icons @ 528cb964c01fb2b09bc3b9208f82b6d8f8c1c1e2\n * Apache-2.0 licence © Google.\n */\n\nconst NAMES = [\n  'arrow_downward',\n  'arrow_downward_alt',\n  'arrow_drop_down',\n  'arrow_drop_up',\n  'arrow_left_alt',\n  'arrow_right_alt',\n  'arrow_upward',\n  'arrow_upward_alt',\n  'attach_file',\n  'audio_file',\n  'calendar_today',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'close',\n  'cloud_upload',\n  'code',\n  'description',\n  'error',\n  'expand_less',\n  'expand_more',\n  'folder_zip',\n  'image',\n  'info',\n  'more_horiz',\n  'notifications',\n  'picture_as_pdf',\n  'schedule',\n  'search',\n  'swap_vert',\n  'table_chart',\n  'video_file',\n  'warning',\n] as const\n\n/** The icon names the DS renders itself — the contract of a consumer resolver. */\nexport type VectisIconName = (typeof NAMES)[number]\n\n/**\n * The names alone, carrying no drawing at all. `classIconResolver` in `strict` mode\n * asks nothing more than \"does the design system ship this name?\", and a module of\n * its own is what stops a consumer who wired in their OWN icon library from\n * downloading 34 Material paths to answer that one question.\n */\nexport const builtinIconNames: ReadonlySet<string> = /* @__PURE__ */ new Set(NAMES)\n"],"mappings":"AAuDA,IAAa,oBAAwD,IAAI,IAAI,gBA9C/D,qZA8C+D,CAAK"}
+{"version":3,"file":"names.js","names":[],"sources":["../../../../src/components/VIcon/icons/names.ts"],"sourcesContent":["/*\n * GENERATED FILE — do not edit by hand.\n * Regenerate: pnpm icons  ·  Source: scripts/build-icons.ts\n *\n * Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24)\n * google/material-design-icons @ 528cb964c01fb2b09bc3b9208f82b6d8f8c1c1e2\n * Apache-2.0 licence © Google.\n */\n\nconst NAMES = [\n  'arrow_downward',\n  'arrow_downward_alt',\n  'arrow_drop_down',\n  'arrow_drop_up',\n  'arrow_left_alt',\n  'arrow_right_alt',\n  'arrow_upward',\n  'arrow_upward_alt',\n  'attach_file',\n  'audio_file',\n  'calendar_today',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'close',\n  'cloud_upload',\n  'code',\n  'description',\n  'error',\n  'expand_less',\n  'expand_more',\n  'folder_zip',\n  'image',\n  'info',\n  'more_horiz',\n  'notifications',\n  'picture_as_pdf',\n  'schedule',\n  'search',\n  'swap_vert',\n  'table_chart',\n  'video_file',\n  'warning',\n] as const\n\n/** The icon names the DS renders itself — the contract of a consumer resolver. */\nexport type IconName = (typeof NAMES)[number]\n\n/**\n * The names alone, carrying no drawing at all. `classIconResolver` in `strict` mode\n * asks nothing more than \"does the design system ship this name?\", and a module of\n * its own is what stops a consumer who wired in their OWN icon library from\n * downloading 34 Material paths to answer that one question.\n */\nexport const builtinIconNames: ReadonlySet<string> = /* @__PURE__ */ new Set(NAMES)\n"],"mappings":"AAuDA,IAAa,oBAAwD,IAAI,IAAI,gBA9C/D,qZA8C+D,CAAK"}

package/dist/components/VIcon/resolver.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'vue';
-import { VectisIconName } from './icons/names.js';
+import { IconName } from './icons/names.js';
 import { IconContext, IconRender } from './types.js';
 /**
  * Turns an icon name into a description of what to draw. Answering `undefined` means
@@ -14,7 +14,7 @@ export type IconResolver = (name: string, ctx: IconContext) => IconRender | unde
  * names the library ships with, and any other key is accepted too, so your
  * application's own icons can be aliased through the same table.
  */
-export type IconAliases = Partial<Record<VectisIconName, string>> & Record<string, string>;
+export type IconAliases = Partial<Record<IconName, string>> & Record<string, string>;
 /**
  * Installs the resolver every VIcon will consult, or removes it when passed
  * `undefined`.
@@ -71,6 +71,6 @@ export declare function classIconResolver(options: {
  * because that is the element the stylesheet sizes.
  */
 export declare function componentIconResolver(options: {
-    components: Partial<Record<VectisIconName, Component>> & Record<string, Component>;
+    components: Partial<Record<IconName, Component>> & Record<string, Component>;
     props?: (name: string, filled: boolean) => Record<string, unknown>;
 }): IconResolver;

package/dist/components/VIcon/resolver.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolver.js","names":[],"sources":["../../../src/components/VIcon/resolver.ts"],"sourcesContent":["// @ssr @core — module-level state, to be set at module level and never\n// client-only: a resolver installed after hydration is a mismatch.\n/**\n * The way to plug a third-party icon library into the design system. A resolver is a\n * function turning a name into something to draw, and it is consulted BEFORE the\n * icons built into the library — which is what lets a consumer move ALL of them onto\n * their own icon set rather than ending up with two styles side by side.\n *\n * The resolver is held in module-level state rather than provided through a Vue\n * plugin, because it is configuration: identical for every request a process\n * handles, and settable from any `.ts` file — a Nuxt plugin, `main.ts` — without a\n * component being involved.\n */\nimport { shallowRef, type Component } from 'vue'\n\nimport { builtinIconNames, type VectisIconName } from './icons/names'\nimport type { IconContext, IconRender } from './types'\n\n/**\n * Turns an icon name into a description of what to draw. Answering `undefined` means\n * \"I do not know this name\", and not \"draw nothing\": VIcon then falls back to the\n * built-in icons, and after that to the ligature font. That distinction is what\n * makes a PARTIAL mapping usable — map the five names you care about and let the\n * rest be.\n */\nexport type IconResolver = (name: string, ctx: IconContext) => IconRender | undefined\n\n/**\n * A table mapping the design system's icon names to your own. The IDE suggests the\n * names the library ships with, and any other key is accepted too, so your\n * application's own icons can be aliased through the same table.\n */\nexport type IconAliases = Partial<Record<VectisIconName, string>> & Record<string, string>\n\nconst resolver = shallowRef<IconResolver | undefined>(undefined)\n\n/**\n * Installs the resolver every VIcon will consult, or removes it when passed\n * `undefined`.\n *\n * Call it at MODULE level — from a Nuxt plugin or from `main.ts` — and never inside\n * a component's `setup()`. Two traps follow from where the state lives. On a server\n * it belongs to the process rather than to a request, which is right for\n * configuration and wrong for anything varying per visitor. And installing it on the\n * client only, from a `plugins/*.client.ts`, makes the browser draw different icons\n * from the ones the server sent, which is a hydration mismatch.\n */\nexport function setIconResolver(next: IconResolver | undefined): void {\n  resolver.value = next\n}\n\n/** Asks the installed resolver, if there is one. Internal to VIcon, not public API. */\nexport function resolveIcon(name: string, ctx: IconContext): IconRender | undefined {\n  return resolver.value?.(name, ctx)\n}\n\n/**\n * A resolver for a LIGATURE font — Material Symbols in any of its variants, or an\n * IcoMoon build made that way. It answers to every name, since the font itself\n * decides what it recognizes.\n *\n * Installing it is also how to have the design system's own icons drawn by the font\n * instead of by the SVGs shipped with the library, and therefore how to get the\n * optical size axis back: those SVGs are drawn at one optical size and cannot follow\n * `--vectis-icon-opsz`.\n */\nexport function ligatureIconResolver(options: { aliases?: IconAliases } = {}): IconResolver {\n  const { aliases } = options\n  return (name) => ({ text: aliases?.[name] ?? name })\n}\n\n/**\n * A resolver for a font driven by a CLASS and a pseudo-element: Font Awesome,\n * Phosphor, Bootstrap Icons and their kind.\n *\n * `strict`, which is the default, protects the design system's own icons. One of its\n * names that is NOT in your alias table would otherwise be turned into a class the\n * font does not define, and the icon would render as an empty square; refusing to\n * answer instead lets it fall back to the SVG shipped with the library. Names of\n * your own always pass, since they are already written in your vocabulary.\n */\nexport function classIconResolver(options: {\n  aliases?: IconAliases\n  /**\n   * Builds the class list for one icon. `mapped` is the alias when the table has\n   * one, and the original name otherwise.\n   */\n  className: (mapped: string, filled: boolean) => string\n  strict?: boolean\n}): IconResolver {\n  const { aliases, className, strict = true } = options\n  return (name, ctx) => {\n    const mapped = aliases?.[name]\n    // The SET of names, never the icons themselves: this asks whether the design\n    // system ships the name, and reaching for the drawings to answer it would make a\n    // consumer who wired in their OWN icon library download all 34 Material paths.\n    if (mapped === undefined && strict && builtinIconNames.has(name)) return undefined\n    return { class: className(mapped ?? name, ctx.filled) }\n  }\n}\n\n/**\n * A resolver for an icon set shipped as Vue COMPONENTS: Lucide, Untitled UI and\n * their kind. It is strict by construction, since a name absent from the table has\n * no component to return: it falls back to the built-in icons, and then to the\n * ligature.\n *\n * One contract to honour: each component must have a single `<svg>` as its root,\n * because that is the element the stylesheet sizes.\n */\nexport function componentIconResolver(options: {\n  components: Partial<Record<VectisIconName, Component>> & Record<string, Component>\n  props?: (name: string, filled: boolean) => Record<string, unknown>\n}): IconResolver {\n  const { components, props } = options\n  return (name, ctx) => {\n    const component = components[name]\n    return component ? { component, props: props?.(name, ctx.filled) } : undefined\n  }\n}\n"],"mappings":";;;AAkCA,IAAM,IAAW,EAAqC,KAAA,CAAS;AAa/D,SAAgB,EAAgB,GAAsC;CACpE,EAAS,QAAQ;AACnB;AAGA,SAAgB,EAAY,GAAc,GAA0C;CAClF,OAAO,EAAS,QAAQ,GAAM,CAAG;AACnC;AAYA,SAAgB,EAAqB,IAAqC,CAAC,GAAiB;CAC1F,IAAM,EAAE,eAAY;CACpB,QAAQ,OAAU,EAAE,MAAM,IAAU,MAAS,EAAK;AACpD;AAYA,SAAgB,EAAkB,GAQjB;CACf,IAAM,EAAE,YAAS,cAAW,YAAS,OAAS;CAC9C,QAAQ,GAAM,MAAQ;EACpB,IAAM,IAAS,IAAU;EAIrB,YAAW,KAAA,KAAa,KAAU,EAAiB,IAAI,CAAI,IAC/D,OAAO,EAAE,OAAO,EAAU,KAAU,GAAM,EAAI,MAAM,EAAE;CACxD;AACF;AAWA,SAAgB,EAAsB,GAGrB;CACf,IAAM,EAAE,eAAY,aAAU;CAC9B,QAAQ,GAAM,MAAQ;EACpB,IAAM,IAAY,EAAW;EAC7B,OAAO,IAAY;GAAE;GAAW,OAAO,IAAQ,GAAM,EAAI,MAAM;EAAE,IAAI,KAAA;CACvE;AACF"}
+{"version":3,"file":"resolver.js","names":[],"sources":["../../../src/components/VIcon/resolver.ts"],"sourcesContent":["// @ssr @core — module-level state, to be set at module level and never\n// client-only: a resolver installed after hydration is a mismatch.\n/**\n * The way to plug a third-party icon library into the design system. A resolver is a\n * function turning a name into something to draw, and it is consulted BEFORE the\n * icons built into the library — which is what lets a consumer move ALL of them onto\n * their own icon set rather than ending up with two styles side by side.\n *\n * The resolver is held in module-level state rather than provided through a Vue\n * plugin, because it is configuration: identical for every request a process\n * handles, and settable from any `.ts` file — a Nuxt plugin, `main.ts` — without a\n * component being involved.\n */\nimport { shallowRef, type Component } from 'vue'\n\nimport { builtinIconNames, type IconName } from './icons/names'\nimport type { IconContext, IconRender } from './types'\n\n/**\n * Turns an icon name into a description of what to draw. Answering `undefined` means\n * \"I do not know this name\", and not \"draw nothing\": VIcon then falls back to the\n * built-in icons, and after that to the ligature font. That distinction is what\n * makes a PARTIAL mapping usable — map the five names you care about and let the\n * rest be.\n */\nexport type IconResolver = (name: string, ctx: IconContext) => IconRender | undefined\n\n/**\n * A table mapping the design system's icon names to your own. The IDE suggests the\n * names the library ships with, and any other key is accepted too, so your\n * application's own icons can be aliased through the same table.\n */\nexport type IconAliases = Partial<Record<IconName, string>> & Record<string, string>\n\nconst resolver = shallowRef<IconResolver | undefined>(undefined)\n\n/**\n * Installs the resolver every VIcon will consult, or removes it when passed\n * `undefined`.\n *\n * Call it at MODULE level — from a Nuxt plugin or from `main.ts` — and never inside\n * a component's `setup()`. Two traps follow from where the state lives. On a server\n * it belongs to the process rather than to a request, which is right for\n * configuration and wrong for anything varying per visitor. And installing it on the\n * client only, from a `plugins/*.client.ts`, makes the browser draw different icons\n * from the ones the server sent, which is a hydration mismatch.\n */\nexport function setIconResolver(next: IconResolver | undefined): void {\n  resolver.value = next\n}\n\n/** Asks the installed resolver, if there is one. Internal to VIcon, not public API. */\nexport function resolveIcon(name: string, ctx: IconContext): IconRender | undefined {\n  return resolver.value?.(name, ctx)\n}\n\n/**\n * A resolver for a LIGATURE font — Material Symbols in any of its variants, or an\n * IcoMoon build made that way. It answers to every name, since the font itself\n * decides what it recognizes.\n *\n * Installing it is also how to have the design system's own icons drawn by the font\n * instead of by the SVGs shipped with the library, and therefore how to get the\n * optical size axis back: those SVGs are drawn at one optical size and cannot follow\n * `--vectis-icon-opsz`.\n */\nexport function ligatureIconResolver(options: { aliases?: IconAliases } = {}): IconResolver {\n  const { aliases } = options\n  return (name) => ({ text: aliases?.[name] ?? name })\n}\n\n/**\n * A resolver for a font driven by a CLASS and a pseudo-element: Font Awesome,\n * Phosphor, Bootstrap Icons and their kind.\n *\n * `strict`, which is the default, protects the design system's own icons. One of its\n * names that is NOT in your alias table would otherwise be turned into a class the\n * font does not define, and the icon would render as an empty square; refusing to\n * answer instead lets it fall back to the SVG shipped with the library. Names of\n * your own always pass, since they are already written in your vocabulary.\n */\nexport function classIconResolver(options: {\n  aliases?: IconAliases\n  /**\n   * Builds the class list for one icon. `mapped` is the alias when the table has\n   * one, and the original name otherwise.\n   */\n  className: (mapped: string, filled: boolean) => string\n  strict?: boolean\n}): IconResolver {\n  const { aliases, className, strict = true } = options\n  return (name, ctx) => {\n    const mapped = aliases?.[name]\n    // The SET of names, never the icons themselves: this asks whether the design\n    // system ships the name, and reaching for the drawings to answer it would make a\n    // consumer who wired in their OWN icon library download all 34 Material paths.\n    if (mapped === undefined && strict && builtinIconNames.has(name)) return undefined\n    return { class: className(mapped ?? name, ctx.filled) }\n  }\n}\n\n/**\n * A resolver for an icon set shipped as Vue COMPONENTS: Lucide, Untitled UI and\n * their kind. It is strict by construction, since a name absent from the table has\n * no component to return: it falls back to the built-in icons, and then to the\n * ligature.\n *\n * One contract to honour: each component must have a single `<svg>` as its root,\n * because that is the element the stylesheet sizes.\n */\nexport function componentIconResolver(options: {\n  components: Partial<Record<IconName, Component>> & Record<string, Component>\n  props?: (name: string, filled: boolean) => Record<string, unknown>\n}): IconResolver {\n  const { components, props } = options\n  return (name, ctx) => {\n    const component = components[name]\n    return component ? { component, props: props?.(name, ctx.filled) } : undefined\n  }\n}\n"],"mappings":";;;AAkCA,IAAM,IAAW,EAAqC,KAAA,CAAS;AAa/D,SAAgB,EAAgB,GAAsC;CACpE,EAAS,QAAQ;AACnB;AAGA,SAAgB,EAAY,GAAc,GAA0C;CAClF,OAAO,EAAS,QAAQ,GAAM,CAAG;AACnC;AAYA,SAAgB,EAAqB,IAAqC,CAAC,GAAiB;CAC1F,IAAM,EAAE,eAAY;CACpB,QAAQ,OAAU,EAAE,MAAM,IAAU,MAAS,EAAK;AACpD;AAYA,SAAgB,EAAkB,GAQjB;CACf,IAAM,EAAE,YAAS,cAAW,YAAS,OAAS;CAC9C,QAAQ,GAAM,MAAQ;EACpB,IAAM,IAAS,IAAU;EAIrB,YAAW,KAAA,KAAa,KAAU,EAAiB,IAAI,CAAI,IAC/D,OAAO,EAAE,OAAO,EAAU,KAAU,GAAM,EAAI,MAAM,EAAE;CACxD;AACF;AAWA,SAAgB,EAAsB,GAGrB;CACf,IAAM,EAAE,eAAY,aAAU;CAC9B,QAAQ,GAAM,MAAQ;EACpB,IAAM,IAAY,EAAW;EAC7B,OAAO,IAAY;GAAE;GAAW,OAAO,IAAQ,GAAM,EAAI,MAAM;EAAE,IAAI,KAAA;CACvE;AACF"}

package/dist/components/VIcon/types.d.ts

@@ -8,18 +8,6 @@ export interface IconContext {
     /** Whether the caller asked for the filled form — VIcon's prop, VButton's `iconFilled`. */
     filled: boolean;
 }
-/**
- * The five ways an icon can be described. Between them they cover every family of
- * icon source in use: raw SVG paths, icon sets shipped as components (Lucide,
- * Untitled UI), sprites and image files, ligature or codepoint fonts (Material,
- * IcoMoon), and fonts driven by a class and a pseudo-element (Font Awesome,
- * Phosphor, Bootstrap Icons).
- *
- * The union carries no discriminating field, because this is what a consumer writes
- * by hand and there would be nothing for them to tag it with. Which shape wins when
- * several are present is settled by VIcon instead, in the order path, component,
- * src, text, class.
- */
 /**
  * One of the icons the design system ships with: its canonical NAME together with the
  * drawing that goes with it, `[outline, filled?]` on the Material Symbols grid — the
@@ -38,6 +26,18 @@ export interface BuiltinIcon {
     name: string;
     paths: readonly [string] | readonly [string, string];
 }
+/**
+ * The five ways an icon can be described. Between them they cover every family of
+ * icon source in use: raw SVG paths, icon sets shipped as components (Lucide,
+ * Untitled UI), sprites and image files, ligature or codepoint fonts (Material,
+ * IcoMoon), and fonts driven by a class and a pseudo-element (Font Awesome,
+ * Phosphor, Bootstrap Icons).
+ *
+ * The union carries no discriminating field, because this is what a consumer writes
+ * by hand and there would be nothing for them to tag it with. Which shape wins when
+ * several are present is settled by VIcon instead, in the order path, component,
+ * src, text, class.
+ */
 export type IconRender = 
 /** SVG path data. Without a `viewBox` it is read on the Material Symbols grid. */
 {

package/dist/components/VIconButton/VIconButton.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-icon-button[data-size]{width:var(--control-height);padding-inline:0}.v-icon-button[data-shape=circular]{border-radius:var(--vectis-radius-pill)}}
+@layer vectis.components{.v-icon-button[data-shape=circular]{border-radius:var(--vectis-radius-pill)}}