vectis-ui 0.10.1 → 0.10.2

package/dist/i18n/types.d.ts

@@ -1,21 +1,6 @@
 /**
- * Every user-facing word the library can say, in one place: what a translator works from and
- * what a consumer overrides.
- *
- * Depth EXACTLY 2: namespace, then leaf. A leaf is finished text, or a TS function when
- * something has to be slotted in. There is deliberately no template language and no plural
- * engine: a parameterized message IS a hand-written function whose signature is the
- * contract, so a translation that forgets an argument does not compile, and a plural is a
- * ternary inside it.
- *
- * The two levels are structural, not aesthetic: they are what lets a partial override be
- * merged NON-RECURSIVELY, and therefore what makes it impossible to descend into one of
- * those functions and turn it into `{}`.
- *
- * Three kinds of text are deliberately absent. Whatever `Intl` derives from the tag (month
- * and day names, field order, hour cycle); whatever is made only of digits and universal
- * punctuation (`99+`, `+N`, an `N/M` counter, a time's colon); and the `[Component] …`
- * warnings, which address the integrator and are never translated.
+ * Two-level message namespaces permit nonrecursive partial merging. Parameterized messages are
+ * typed functions so translations preserve their argument contracts.
  */
 export interface Messages {
     /** Words several components share, so that they are translated once rather than five times. */
@@ -53,11 +38,7 @@ export interface Messages {
         ellipsis: string;
     };
     sideNavigation: {
-        /**
-         * What the navigation area is called. It is the component's only piece of text: the
-         * labels are written by the consumer, and whether a branch is open or closed is
-         * something the browser announces on its own.
-         */
+        /** What the navigation area is called. */
         label: string;
     };
     combobox: {
@@ -81,11 +62,7 @@ export interface Messages {
             end: number;
             total: number;
         }) => string;
-        /**
-         * What the pagination under a table is called. It is deliberately not the same as the
-         * name a standalone pagination takes: a page holding both would otherwise offer a
-         * screen reader two navigation areas under one name, with no way to tell them apart.
-         */
+        /** What the pagination under a table is called. */
         pagination: string;
     };
     toaster: {
@@ -93,16 +70,11 @@ export interface Messages {
     };
     snackbar: {
         /**
-         * What screen readers announce for the confirmation area itself, which is a landmark
-         * of the page. It is deliberately not the notifications' name: a page holding both
-         * would otherwise offer two areas under one word, with no way to tell them apart.
+         * What screen readers announce for the confirmation area itself, which is a landmark of the
+         * page.
          */
         label: string;
-        /**
-         * The single action a snackbar offers, when the caller does not name it. It means
-         * taking back what was just done: not cancelling a form, which is `common.cancel`
-         * and is a different word in several languages.
-         */
+        /** The single action a snackbar offers, when the caller does not name it. */
         action: string;
     };
     inputOTP: {
@@ -136,12 +108,8 @@ export interface Messages {
         label: string;
     };
     /**
-     * The keys of a keyboard shortcut, in WORDS. The symbols (⌘ ⌃ ⌥ ⇧ ↵ ⌫ ⌦ ⇥
-     * ↑ ↓ ← →) are not here: they are engraved on the hardware and the same in every
-     * language, so they live with the component.
-     *
-     * Every entry below is the SPOKEN form. Where a symbol exists it wins on screen, and
-     * the word wins in what a screen reader says.
+     * The keys of a keyboard shortcut, in words. Where a symbol exists it wins on screen, and the
+     * word wins in what a screen reader says.
      */
     hotkeys: {
         /** How ⌘, the Command key on a Mac, is spoken. */
@@ -210,23 +178,13 @@ export interface Messages {
         /** What the panel holding the clock is called. */
         pickerLabel: string;
         /**
-         * What the AM/PM button inside the field is called, the half of the day it currently
-         * shows included. The value is what the button reads on screen, so the name repeats
-         * it rather than replacing it: a reader arriving on the button is told which half is
-         * chosen, and hears the new one as soon as it changes.
+         * What the AM/PM button inside the field is called, the half of the day it currently shows
+         * included.
          */
         meridiemValue: (value: string) => string;
-        /**
-         * The grey template shown in an empty field, "hh:mm". It is translatable because those
-         * letters are the initials of WORDS, unlike the colon between them, which is the same
-         * everywhere and lives with the time helpers.
-         */
+        /** The grey template shown in an empty field, "hh:mm". */
         maskPlaceholder: string;
-        /**
-         * What the field says of a time the restrictions do not allow. It is carried by the
-         * control's own validity rather than displayed, so a browser is what shows it, and in
-         * the language the browser is being told to speak here.
-         */
+        /** What the field says of a time the restrictions do not allow. */
         unavailable: string;
     };
     fileInput: {
@@ -254,11 +212,8 @@ export interface Messages {
         list: string;
     };
     /**
-     * The carousel. Two of these entries are what a screen reader SAYS instead of the bare
-     * words "region" and "group", so they are text a reader hears and therefore text that
-     * belongs here. It is worth being deliberate about them: a role description left in
-     * English is the one accessibility string that goes wrong with no visible symptom
-     * whatsoever.
+     * The carousel. Two of these entries are what a screen reader SAYS instead of the bare words
+     * "region" and "group", so they are text a reader hears and therefore text that belongs here.
      */
     carousel: {
         /** What the carousel is called when the consumer gives it no name of its own. */
@@ -269,27 +224,14 @@ export interface Messages {
         slideRoleDescription: string;
         /** What the scrolling area itself is called: it can be reached with the Tab key. */
         slides: string;
-        /**
-         * What a slide is called, and its dot with it. The number is the one a reader counts,
-         * starting at one: the caller adds it. It carries the WORD "of", which is why it is
-         * here where the table's bare "3/8" counter is not.
-         */
+        /** What a slide is called, and its dot with it. */
         slide: (index: number, total: number) => string;
         previous: string;
         next: string;
         /** What the row of dots is called. */
         indicators: string;
     };
-    /**
-     * The calendar. Two groups of words that read very differently: the toolbar, which a
-     * reader SEES, and everything from `eventRoleDescription` down, which only a screen
-     * reader ever says: the same caution as the carousel's role description applies, since
-     * an untranslated one goes wrong with no visible symptom at all.
-     *
-     * The navigation labels are per view rather than one word plus a unit: "Previous" needs
-     * to say what it steps over, and building "Previous " + "week" out of two fragments is
-     * the kind of sentence assembly that survives English and nothing else.
-     */
+    /** The calendar. */
     calendar: {
         /** What the calendar is called when the consumer gives it no name of its own. */
         label: string;
@@ -342,12 +284,8 @@ export interface Messages {
     };
 }
 /**
- * A dictionary given in PART: every section and every entry is optional. Anything left
- * out falls back to the dictionary already in place, and never to an empty string.
- *
- * The optionality stops at the entries and does not descend into them, so a message that
- * takes a value stays a whole function. Making it recursive would allow one of those
- * functions to be described as a partial object, which is to say as nothing at all.
+ * A dictionary given in PART: every section and every entry is optional. Anything left out
+ * falls back to the dictionary already in place, and never to an empty string.
  */
 export type MessagesInput = {
     [K in keyof Messages]?: Partial<Messages[K]>;

package/dist/icons.d.ts

@@ -1,16 +1,6 @@
 /**
- * The icons the design system draws by itself, as importable values: the public
- * face of `vectis-ui/icons`.
- *
- * Reach for it when you want to render one of the library's own icons somewhere it
- * does not already appear: `import { search } from 'vectis-ui/icons'`, then
- * `<VIcon :name="search" />`. A bare `<VIcon name="search" />` is a NAME and does
- * not reach it, which is the point: an icon is shipped to a consumer's bundle because
- * a module imported it, never because a string might one day ask for it.
- *
- * Each value carries its NAME as well as its drawing, so it still passes through a
- * resolver installed with `setIconResolver`: wiring your own icon library keeps
- * working on these exactly as it does on the icons the components draw.
+ * Import built-in icon values explicitly from vectis-ui/icons; string names alone do not pull
+ * icon modules into consumer bundles.
  */
 export * from './components/VIcon/icons/index.js';
 export type { BuiltinIcon } from './components/VIcon/types.js';

package/dist/tokens/css.d.ts

@@ -4,22 +4,9 @@ export interface FlatToken {
     cssName: string;
     token: DesignToken;
 }
-/**
- * Walks the nested groups and returns one entry per token, each carrying the name of the
- * custom property it will become: the path through the groups, joined with dashes and
- * prefixed so that nothing collides with an application's own variables.
- */
+/** Flatten nested groups into token entries with qualified CSS custom-property names. */
 export declare function flattenTokens(group: TokenGroup, prefix?: string[]): FlatToken[];
-/**
- * A token's value may point at another token by name, in braces, instead of stating a
- * colour or a length of its own. Each of those references becomes a reading of the
- * corresponding custom property, so the link survives into the CSS and remains
- * overridable at runtime.
- *
- * A reference to a token that does not exist STOPS the build rather than being left as
- * it is. A dangling reference in CSS resolves to nothing at all, and the component using
- * it loses its colour with nothing in the console to say why.
- */
+/** Resolve DTCG references into CSS var aliases while preserving literal values. */
 export declare function resolveTokenValue(value: string, known: ReadonlySet<string>): string;
-/** The final step: a list of tokens written out as the lines of a CSS rule. */
+/** Serialize flat token entries into CSS declarations. */
 export declare function toCssDeclarations(flat: FlatToken[], known: ReadonlySet<string>, indent?: string): string;

package/dist/tokens/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","names":[],"sources":["../../src/tokens/css.ts"],"sourcesContent":["/**\n * The tokens' nested typed groups flattened into the list of custom properties a browser\n * needs. `pnpm tokens` uses it to generate the shipped stylesheet, and it is exported\n * through `vectis-ui/tokens` so an application can do the same at runtime — a theming tool\n * regenerating the variables as a slider moves, or exporting a configuration.\n */\nimport { isToken, type DesignToken, type TokenGroup } from './types'\n\nexport interface FlatToken {\n  path: string[]\n  cssName: string\n  token: DesignToken\n}\n\n/**\n * Walks the nested groups and returns one entry per token, each carrying the name of the\n * custom property it will become: the path through the groups, joined with dashes and\n * prefixed so that nothing collides with an application's own variables.\n */\nexport function flattenTokens(group: TokenGroup, prefix: string[] = []): FlatToken[] {\n  const out: FlatToken[] = []\n  for (const [key, node] of Object.entries(group)) {\n    const path = [...prefix, key]\n    if (isToken(node)) {\n      out.push({ path, cssName: `--vectis-${path.join('-')}`, token: node })\n    } else {\n      out.push(...flattenTokens(node, path))\n    }\n  }\n  return out\n}\n\nconst ALIAS_RE = /\\{([^}]+)\\}/g\n\n/**\n * A token's value may point at another token by name, in braces, instead of stating a\n * colour or a length of its own. Each of those references becomes a reading of the\n * corresponding custom property, so the link survives into the CSS and remains\n * overridable at runtime.\n *\n * A reference to a token that does not exist STOPS the build rather than being left as\n * it is. A dangling reference in CSS resolves to nothing at all, and the component using\n * it loses its colour with nothing in the console to say why.\n */\nexport function resolveTokenValue(value: string, known: ReadonlySet<string>): string {\n  return value.replace(ALIAS_RE, (_match, ref: string) => {\n    const cssName = `--vectis-${ref.trim().split('.').join('-')}`\n    if (!known.has(cssName)) {\n      throw new Error(`Unknown token alias: {${ref}}`)\n    }\n    return `var(${cssName})`\n  })\n}\n\n/** The final step: a list of tokens written out as the lines of a CSS rule. */\nexport function toCssDeclarations(\n  flat: FlatToken[],\n  known: ReadonlySet<string>,\n  indent = '  ',\n): string {\n  return flat\n    .map((f) => `${indent}${f.cssName}: ${resolveTokenValue(f.token.$value, known)};`)\n    .join('\\n')\n}\n"],"mappings":";;AAmBA,SAAgB,EAAc,GAAmB,IAAmB,CAAC,GAAgB;CACnF,IAAM,IAAmB,CAAC;CAC1B,KAAK,IAAM,CAAC,GAAK,MAAS,OAAO,QAAQ,CAAK,GAAG;EAC/C,IAAM,IAAO,CAAC,GAAG,GAAQ,CAAG;EAC5B,AAAI,EAAQ,CAAI,IACd,EAAI,KAAK;GAAE;GAAM,SAAS,YAAY,EAAK,KAAK,GAAG;GAAK,OAAO;EAAK,CAAC,IAErE,EAAI,KAAK,GAAG,EAAc,GAAM,CAAI,CAAC;CAEzC;CACA,OAAO;AACT;AAEA,IAAM,IAAW;AAYjB,SAAgB,EAAkB,GAAe,GAAoC;CACnF,OAAO,EAAM,QAAQ,IAAW,GAAQ,MAAgB;EACtD,IAAM,IAAU,YAAY,EAAI,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG;EAC1D,IAAI,CAAC,EAAM,IAAI,CAAO,GACpB,MAAU,MAAM,yBAAyB,EAAI,EAAE;EAEjD,OAAO,OAAO,EAAQ;CACxB,CAAC;AACH;AAGA,SAAgB,EACd,GACA,GACA,IAAS,MACD;CACR,OAAO,EACJ,KAAK,MAAM,GAAG,IAAS,EAAE,QAAQ,IAAI,EAAkB,EAAE,MAAM,QAAQ,CAAK,EAAE,EAAE,CAAC,CACjF,KAAK,IAAI;AACd"}
+{"version":3,"file":"css.js","names":[],"sources":["../../src/tokens/css.ts"],"sourcesContent":["/**\n * Flatten typed DTCG groups and aliases into CSS declarations for token generation and consumer\n * theming tools.\n */\nimport { isToken, type DesignToken, type TokenGroup } from './types'\n\nexport interface FlatToken {\n  path: string[]\n  cssName: string\n  token: DesignToken\n}\n\n/** Flatten nested groups into token entries with qualified CSS custom-property names. */\nexport function flattenTokens(group: TokenGroup, prefix: string[] = []): FlatToken[] {\n  const out: FlatToken[] = []\n  for (const [key, node] of Object.entries(group)) {\n    const path = [...prefix, key]\n    if (isToken(node)) {\n      out.push({ path, cssName: `--vectis-${path.join('-')}`, token: node })\n    } else {\n      out.push(...flattenTokens(node, path))\n    }\n  }\n  return out\n}\n\nconst ALIAS_RE = /\\{([^}]+)\\}/g\n\n/** Resolve DTCG references into CSS var aliases while preserving literal values. */\nexport function resolveTokenValue(value: string, known: ReadonlySet<string>): string {\n  return value.replace(ALIAS_RE, (_match, ref: string) => {\n    const cssName = `--vectis-${ref.trim().split('.').join('-')}`\n    if (!known.has(cssName)) {\n      throw new Error(`Unknown token alias: {${ref}}`)\n    }\n    return `var(${cssName})`\n  })\n}\n\n/** Serialize flat token entries into CSS declarations. */\nexport function toCssDeclarations(\n  flat: FlatToken[],\n  known: ReadonlySet<string>,\n  indent = '  ',\n): string {\n  return flat\n    .map((f) => `${indent}${f.cssName}: ${resolveTokenValue(f.token.$value, known)};`)\n    .join('\\n')\n}\n"],"mappings":";;AAaA,SAAgB,EAAc,GAAmB,IAAmB,CAAC,GAAgB;CACnF,IAAM,IAAmB,CAAC;CAC1B,KAAK,IAAM,CAAC,GAAK,MAAS,OAAO,QAAQ,CAAK,GAAG;EAC/C,IAAM,IAAO,CAAC,GAAG,GAAQ,CAAG;EAC5B,AAAI,EAAQ,CAAI,IACd,EAAI,KAAK;GAAE;GAAM,SAAS,YAAY,EAAK,KAAK,GAAG;GAAK,OAAO;EAAK,CAAC,IAErE,EAAI,KAAK,GAAG,EAAc,GAAM,CAAI,CAAC;CAEzC;CACA,OAAO;AACT;AAEA,IAAM,IAAW;AAGjB,SAAgB,EAAkB,GAAe,GAAoC;CACnF,OAAO,EAAM,QAAQ,IAAW,GAAQ,MAAgB;EACtD,IAAM,IAAU,YAAY,EAAI,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG;EAC1D,IAAI,CAAC,EAAM,IAAI,CAAO,GACpB,MAAU,MAAM,yBAAyB,EAAI,EAAE;EAEjD,OAAO,OAAO,EAAQ;CACxB,CAAC;AACH;AAGA,SAAgB,EACd,GACA,GACA,IAAS,MACD;CACR,OAAO,EACJ,KAAK,MAAM,GAAG,IAAS,EAAE,QAAQ,IAAI,EAAkB,EAAE,MAAM,QAAQ,CAAK,EAAE,EAAE,CAAC,CACjF,KAAK,IAAI;AACd"}

package/dist/tokens/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/tokens/index.ts"],"sourcesContent":["/**\n * What an application gets when it imports the design system's tokens: the tokens\n * themselves, exactly as the library defines them, and the means to turn them into CSS —\n * flattening the groups, following the references between tokens, writing the\n * declarations out.\n */\nimport { primitives } from './primitives'\nimport { semantic } from './semantic'\nimport { dark } from './themes/dark'\n\nexport type { DesignToken, TokenGroup, TokenType } from './types'\nexport { isToken } from './types'\nexport { flattenTokens, resolveTokenValue, toCssDeclarations, type FlatToken } from './css'\n\nexport const tokens = {\n  primitives,\n  semantic,\n  themes: { dark },\n}\n\nexport type Tokens = typeof tokens\n"],"mappings":";;;;;;AAcA,IAAa,IAAS;CACpB;CACA;CACA,QAAQ,EAAE,QAAK;AACjB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/tokens/index.ts"],"sourcesContent":["import { primitives } from './primitives'\nimport { semantic } from './semantic'\nimport { dark } from './themes/dark'\n\nexport type { DesignToken, TokenGroup, TokenType } from './types'\nexport { isToken } from './types'\nexport { flattenTokens, resolveTokenValue, toCssDeclarations, type FlatToken } from './css'\n\nexport const tokens = {\n  primitives,\n  semantic,\n  themes: { dark },\n}\n\nexport type Tokens = typeof tokens\n"],"mappings":";;;;;;AAQA,IAAa,IAAS;CACpB;CACA;CACA,QAAQ,EAAE,QAAK;AACjB"}

package/dist/tokens/primitives.js.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.js","names":[],"sources":["../../src/tokens/primitives.ts"],"sourcesContent":["/**\n * The raw material: the colour palettes and the numeric scales everything else is built from.\n *\n * No component reads these. A component asks for a ROLE — the accent, the page background —\n * and `semantic.ts` is what points that role at a step. Keeping the two apart is what makes\n * theming possible at all: a theme moves the roles, never the palette.\n *\n * OKLCH, so a step of one palette is as light as the same step of any other and a\n * `color-mix()` between two passes through the shades one expects rather than through grey.\n * The palettes are Tailwind CSS 4's, family for family and step for step.\n *\n * Exactly FIVE families, and they are exactly the five a role points at: gray for surfaces,\n * text and borders, indigo for the accent, red/green/amber for danger/success/warning. The\n * library ships no palette it does not paint with — a deliberate limit, since a family costs\n * eleven custom properties in every page that loads the sheet whether or not anything reads\n * them, and `tokens.test.ts` locks it. An application wanting a sixth declares its own eleven\n * steps in its own unlayered sheet and repoints the role; the docs site does exactly that\n * for its violet.\n */\nimport {\n  color,\n  cubicBezier,\n  dimension,\n  duration,\n  fontFamily,\n  fontWeight,\n  shadow,\n  type TokenGroup,\n} from './types'\n\nconst palette = (values: Record<string, string>): TokenGroup =>\n  Object.fromEntries(Object.entries(values).map(([step, value]) => [step, color(value)]))\n\nexport const primitives = {\n  color: {\n    white: color('oklch(100% 0 0)'),\n    black: color('oklch(0% 0 0)'),\n    red: palette({\n      '50': 'oklch(97.1% 0.013 17.38)',\n      '100': 'oklch(93.6% 0.032 17.717)',\n      '200': 'oklch(88.5% 0.062 18.334)',\n      '300': 'oklch(80.8% 0.114 19.571)',\n      '400': 'oklch(70.4% 0.191 22.216)',\n      '500': 'oklch(63.7% 0.237 25.331)',\n      '600': 'oklch(57.7% 0.245 27.325)',\n      '700': 'oklch(50.5% 0.213 27.518)',\n      '800': 'oklch(44.4% 0.177 26.899)',\n      '900': 'oklch(39.6% 0.141 25.723)',\n      '950': 'oklch(25.8% 0.092 26.042)',\n    }),\n    amber: palette({\n      '50': 'oklch(98.7% 0.022 95.277)',\n      '100': 'oklch(96.2% 0.059 95.617)',\n      '200': 'oklch(92.4% 0.12 95.746)',\n      '300': 'oklch(87.9% 0.169 91.605)',\n      '400': 'oklch(82.8% 0.189 84.429)',\n      '500': 'oklch(76.9% 0.188 70.08)',\n      '600': 'oklch(66.6% 0.179 58.318)',\n      '700': 'oklch(55.5% 0.163 48.998)',\n      '800': 'oklch(47.3% 0.137 46.201)',\n      '900': 'oklch(41.4% 0.112 45.904)',\n      '950': 'oklch(27.9% 0.077 45.635)',\n    }),\n    green: palette({\n      '50': 'oklch(98.2% 0.018 155.826)',\n      '100': 'oklch(96.2% 0.044 156.743)',\n      '200': 'oklch(92.5% 0.084 155.995)',\n      '300': 'oklch(87.1% 0.15 154.449)',\n      '400': 'oklch(79.2% 0.209 151.711)',\n      '500': 'oklch(72.3% 0.219 149.579)',\n      '600': 'oklch(62.7% 0.194 149.214)',\n      '700': 'oklch(52.7% 0.154 150.069)',\n      '800': 'oklch(44.8% 0.119 151.328)',\n      '900': 'oklch(39.3% 0.095 152.535)',\n      '950': 'oklch(26.6% 0.065 152.934)',\n    }),\n    indigo: palette({\n      '50': 'oklch(96.2% 0.018 272.314)',\n      '100': 'oklch(93% 0.034 272.788)',\n      '200': 'oklch(87% 0.065 274.039)',\n      '300': 'oklch(78.5% 0.115 274.713)',\n      '400': 'oklch(67.3% 0.182 276.935)',\n      '500': 'oklch(58.5% 0.233 277.117)',\n      '600': 'oklch(51.1% 0.262 276.966)',\n      '700': 'oklch(45.7% 0.24 277.023)',\n      '800': 'oklch(39.8% 0.195 277.366)',\n      '900': 'oklch(35.9% 0.144 278.697)',\n      '950': 'oklch(25.7% 0.09 281.288)',\n    }),\n    gray: palette({\n      '50': 'oklch(98.5% 0.002 247.839)',\n      '100': 'oklch(96.7% 0.003 264.542)',\n      '200': 'oklch(92.8% 0.006 264.531)',\n      '300': 'oklch(87.2% 0.01 258.338)',\n      '400': 'oklch(70.7% 0.022 261.325)',\n      '500': 'oklch(55.1% 0.027 264.364)',\n      '600': 'oklch(44.6% 0.03 256.802)',\n      '700': 'oklch(37.3% 0.034 259.733)',\n      '800': 'oklch(27.8% 0.033 256.848)',\n      '900': 'oklch(21% 0.034 264.665)',\n      '950': 'oklch(13% 0.028 261.692)',\n    }),\n  },\n  space: {\n    '1': dimension('0.25rem'),\n    '2': dimension('0.5rem'),\n    '3': dimension('0.75rem'),\n    '4': dimension('1rem'),\n    '5': dimension('1.25rem'),\n    '6': dimension('1.5rem'),\n    '7': dimension('2rem'),\n    '8': dimension('2.5rem'),\n    '9': dimension('3rem'),\n    '10': dimension('4rem'),\n    '11': dimension('5rem'),\n    '12': dimension('6rem'),\n  },\n  font: {\n    family: {\n      sans: fontFamily(\n        \"system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif\",\n      ),\n      // The heading typeface. It points at the running one, so out of the box the two are\n      // the same and nothing looks different; giving headings a face of their own is a\n      // matter of overriding this single token. The indirection is what makes the two\n      // decisions independent: replacing `sans` still carries the headings along, whereas\n      // replacing `display` moves the headings alone.\n      display: fontFamily('{font.family.sans}'),\n      mono: fontFamily(\n        \"ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace\",\n      ),\n      // The icon font, which the library never bundles: an application that wants icons\n      // drawn from a font loads it itself, as the README explains. Overriding this one\n      // token is what switches the whole system to another cut of Material Symbols.\n      icon: fontFamily(\"'Material Symbols Rounded'\"),\n    },\n    weight: {\n      regular: fontWeight('400'),\n      medium: fontWeight('500'),\n      semibold: fontWeight('600'),\n      bold: fontWeight('700'),\n    },\n    size: {\n      xs: dimension('0.75rem'),\n      sm: dimension('0.875rem'),\n      md: dimension('1rem'),\n      lg: dimension('1.125rem'),\n      xl: dimension('1.25rem'),\n      '2xl': dimension('1.5rem'),\n      '3xl': dimension('1.875rem'),\n      '4xl': dimension('2.25rem'),\n      '5xl': dimension('3rem'),\n    },\n    leading: {\n      none: dimension('1'),\n      tight: dimension('1.25'),\n      snug: dimension('1.4'),\n      normal: dimension('1.5'),\n      relaxed: dimension('1.65'),\n    },\n    tracking: {\n      tight: dimension('-0.015em', 'Tightening for large sizes (display, the top headings)'),\n      wide: dimension('0.05em', 'Letter spacing for all-caps micro labels (overline)'),\n    },\n  },\n  radius: {\n    // Carries a unit although it is zero: these tokens are subtracted from one another to\n    // derive a nested corner (`calc(var(--vectis-radius-surface) - 1px)`), and `calc(0 - 1px)`\n    // is invalid where `calc(0px - 1px)` is not.\n    none: dimension('0px'),\n    xs: dimension('0.125rem'),\n    sm: dimension('0.25rem'),\n    md: dimension('0.375rem'),\n    lg: dimension('0.5rem'),\n    xl: dimension('0.75rem'),\n    '2xl': dimension('1rem'),\n    full: dimension('9999px'),\n  },\n  shadow: {\n    xs: shadow('0 1px 2px 0 oklch(0% 0 0 / 0.05)'),\n    sm: shadow('0 1px 3px 0 oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1)'),\n    md: shadow('0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1)'),\n    lg: shadow('0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1)'),\n    xl: shadow('0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 8px 10px -6px oklch(0% 0 0 / 0.1)'),\n  },\n  /*\n   * The durations are named after the milliseconds they hold, and that is what lets a\n   * component state the time it actually wants. The roles a transition reaches for (fast,\n   * base, slow) are defined alongside the other roles; the values here are what those roles\n   * point at, and what the long looping animations — a spinner, a skeleton's wave — name\n   * directly, since \"one second\" is the whole point of such a loop and no role could say it\n   * better.\n   *\n   * The steps above a second exist for those loops and for their slowed-down counterparts\n   * under `prefers-reduced-motion`. Without them the same durations come back as arbitrary\n   * multipliers on a shorter token, which is what this scale replaces.\n   */\n  duration: {\n    '0': duration('0ms'),\n    '50': duration('50ms'),\n    '100': duration('100ms'),\n    '150': duration('150ms'),\n    '200': duration('200ms'),\n    '300': duration('300ms'),\n    '400': duration('400ms'),\n    '500': duration('500ms'),\n    '700': duration('700ms'),\n    '1000': duration('1000ms'),\n    '1500': duration('1500ms'),\n    '2000': duration('2000ms'),\n    '3000': duration('3000ms'),\n    '5000': duration('5000ms'),\n  },\n  ease: {\n    default: cubicBezier('cubic-bezier(0.2, 0, 0, 1)'),\n    in: cubicBezier('cubic-bezier(0.5, 0, 1, 1)'),\n    out: cubicBezier('cubic-bezier(0, 0, 0.2, 1)'),\n    'in-out': cubicBezier(\n      'cubic-bezier(0.4, 0, 0.2, 1)',\n      'Symmetric: both the start and the end are eased. Looping animations that cross the track (an indeterminate VProgressLinear).',\n    ),\n  },\n} satisfies TokenGroup\n"],"mappings":"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"}
+{"version":3,"file":"primitives.js","names":[],"sources":["../../src/tokens/primitives.ts"],"sourcesContent":["/**\n * OKLCH primitive palettes and scales; components consume semantic roles so themes can repoint\n * them independently.\n */\nimport {\n  color,\n  cubicBezier,\n  dimension,\n  duration,\n  fontFamily,\n  fontWeight,\n  shadow,\n  type TokenGroup,\n} from './types'\n\nconst palette = (values: Record<string, string>): TokenGroup =>\n  Object.fromEntries(Object.entries(values).map(([step, value]) => [step, color(value)]))\n\nexport const primitives = {\n  color: {\n    white: color('oklch(100% 0 0)'),\n    black: color('oklch(0% 0 0)'),\n    red: palette({\n      '50': 'oklch(97.1% 0.013 17.38)',\n      '100': 'oklch(93.6% 0.032 17.717)',\n      '200': 'oklch(88.5% 0.062 18.334)',\n      '300': 'oklch(80.8% 0.114 19.571)',\n      '400': 'oklch(70.4% 0.191 22.216)',\n      '500': 'oklch(63.7% 0.237 25.331)',\n      '600': 'oklch(57.7% 0.245 27.325)',\n      '700': 'oklch(50.5% 0.213 27.518)',\n      '800': 'oklch(44.4% 0.177 26.899)',\n      '900': 'oklch(39.6% 0.141 25.723)',\n      '950': 'oklch(25.8% 0.092 26.042)',\n    }),\n    amber: palette({\n      '50': 'oklch(98.7% 0.022 95.277)',\n      '100': 'oklch(96.2% 0.059 95.617)',\n      '200': 'oklch(92.4% 0.12 95.746)',\n      '300': 'oklch(87.9% 0.169 91.605)',\n      '400': 'oklch(82.8% 0.189 84.429)',\n      '500': 'oklch(76.9% 0.188 70.08)',\n      '600': 'oklch(66.6% 0.179 58.318)',\n      '700': 'oklch(55.5% 0.163 48.998)',\n      '800': 'oklch(47.3% 0.137 46.201)',\n      '900': 'oklch(41.4% 0.112 45.904)',\n      '950': 'oklch(27.9% 0.077 45.635)',\n    }),\n    green: palette({\n      '50': 'oklch(98.2% 0.018 155.826)',\n      '100': 'oklch(96.2% 0.044 156.743)',\n      '200': 'oklch(92.5% 0.084 155.995)',\n      '300': 'oklch(87.1% 0.15 154.449)',\n      '400': 'oklch(79.2% 0.209 151.711)',\n      '500': 'oklch(72.3% 0.219 149.579)',\n      '600': 'oklch(62.7% 0.194 149.214)',\n      '700': 'oklch(52.7% 0.154 150.069)',\n      '800': 'oklch(44.8% 0.119 151.328)',\n      '900': 'oklch(39.3% 0.095 152.535)',\n      '950': 'oklch(26.6% 0.065 152.934)',\n    }),\n    indigo: palette({\n      '50': 'oklch(96.2% 0.018 272.314)',\n      '100': 'oklch(93% 0.034 272.788)',\n      '200': 'oklch(87% 0.065 274.039)',\n      '300': 'oklch(78.5% 0.115 274.713)',\n      '400': 'oklch(67.3% 0.182 276.935)',\n      '500': 'oklch(58.5% 0.233 277.117)',\n      '600': 'oklch(51.1% 0.262 276.966)',\n      '700': 'oklch(45.7% 0.24 277.023)',\n      '800': 'oklch(39.8% 0.195 277.366)',\n      '900': 'oklch(35.9% 0.144 278.697)',\n      '950': 'oklch(25.7% 0.09 281.288)',\n    }),\n    gray: palette({\n      '50': 'oklch(98.5% 0.002 247.839)',\n      '100': 'oklch(96.7% 0.003 264.542)',\n      '200': 'oklch(92.8% 0.006 264.531)',\n      '300': 'oklch(87.2% 0.01 258.338)',\n      '400': 'oklch(70.7% 0.022 261.325)',\n      '500': 'oklch(55.1% 0.027 264.364)',\n      '600': 'oklch(44.6% 0.03 256.802)',\n      '700': 'oklch(37.3% 0.034 259.733)',\n      '800': 'oklch(27.8% 0.033 256.848)',\n      '900': 'oklch(21% 0.034 264.665)',\n      '950': 'oklch(13% 0.028 261.692)',\n    }),\n  },\n  space: {\n    '1': dimension('0.25rem'),\n    '2': dimension('0.5rem'),\n    '3': dimension('0.75rem'),\n    '4': dimension('1rem'),\n    '5': dimension('1.25rem'),\n    '6': dimension('1.5rem'),\n    '7': dimension('2rem'),\n    '8': dimension('2.5rem'),\n    '9': dimension('3rem'),\n    '10': dimension('4rem'),\n    '11': dimension('5rem'),\n    '12': dimension('6rem'),\n  },\n  font: {\n    family: {\n      sans: fontFamily(\n        \"system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif\",\n      ),\n      // Display aliases sans so consumers can change headings through a single family token.\n      display: fontFamily('{font.family.sans}'),\n      mono: fontFamily(\n        \"ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace\",\n      ),\n      // The consumer loads any icon font; the library supplies only its configurable family\n      // token.\n      icon: fontFamily(\"'Material Symbols Rounded'\"),\n    },\n    weight: {\n      regular: fontWeight('400'),\n      medium: fontWeight('500'),\n      semibold: fontWeight('600'),\n      bold: fontWeight('700'),\n    },\n    size: {\n      xs: dimension('0.75rem'),\n      sm: dimension('0.875rem'),\n      md: dimension('1rem'),\n      lg: dimension('1.125rem'),\n      xl: dimension('1.25rem'),\n      '2xl': dimension('1.5rem'),\n      '3xl': dimension('1.875rem'),\n      '4xl': dimension('2.25rem'),\n      '5xl': dimension('3rem'),\n    },\n    leading: {\n      none: dimension('1'),\n      tight: dimension('1.25'),\n      snug: dimension('1.4'),\n      normal: dimension('1.5'),\n      relaxed: dimension('1.65'),\n    },\n    tracking: {\n      tight: dimension('-0.015em', 'Tightening for large sizes (display, the top headings)'),\n      wide: dimension('0.05em', 'Letter spacing for all-caps micro labels (overline)'),\n    },\n  },\n  radius: {\n    // Zero radii need units because calc(0 - 1px) is invalid while calc(0px - 1px) is valid.\n    none: dimension('0px'),\n    xs: dimension('0.125rem'),\n    sm: dimension('0.25rem'),\n    md: dimension('0.375rem'),\n    lg: dimension('0.5rem'),\n    xl: dimension('0.75rem'),\n    '2xl': dimension('1rem'),\n    full: dimension('9999px'),\n  },\n  shadow: {\n    xs: shadow('0 1px 2px 0 oklch(0% 0 0 / 0.05)'),\n    sm: shadow('0 1px 3px 0 oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1)'),\n    md: shadow('0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1)'),\n    lg: shadow('0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1)'),\n    xl: shadow('0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 8px 10px -6px oklch(0% 0 0 / 0.1)'),\n  },\n  /* Use explicit duration steps for long loops instead of multiplying shorter transition roles. */\n  duration: {\n    '0': duration('0ms'),\n    '50': duration('50ms'),\n    '100': duration('100ms'),\n    '150': duration('150ms'),\n    '200': duration('200ms'),\n    '300': duration('300ms'),\n    '400': duration('400ms'),\n    '500': duration('500ms'),\n    '700': duration('700ms'),\n    '1000': duration('1000ms'),\n    '1500': duration('1500ms'),\n    '2000': duration('2000ms'),\n    '3000': duration('3000ms'),\n    '5000': duration('5000ms'),\n  },\n  ease: {\n    default: cubicBezier('cubic-bezier(0.2, 0, 0, 1)'),\n    in: cubicBezier('cubic-bezier(0.5, 0, 1, 1)'),\n    out: cubicBezier('cubic-bezier(0, 0, 0.2, 1)'),\n    'in-out': cubicBezier(\n      'cubic-bezier(0.4, 0, 0.2, 1)',\n      'Symmetric: both the start and the end are eased. Looping animations that cross the track (an indeterminate VProgressLinear).',\n    ),\n  },\n} satisfies TokenGroup\n"],"mappings":"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"}

package/dist/tokens/semantic.d.ts

@@ -44,15 +44,6 @@ export declare const semantic: {
         'event-border': import('./types.js').DesignToken;
         'event-text': import('./types.js').DesignToken;
     };
-    /**
-     * The typography, described by role rather than by measurement: a heading, a subtitle,
-     * a caption, a piece of code.
-     *
-     * Each role is a COMPLETE recipe — a size, a weight, the space between lines, and where
-     * it matters the space between letters. Asking for a role therefore settles every one of
-     * those at once, and two pieces of text in the same role cannot drift apart. It is what
-     * the typography component renders, and what the components' own stylesheets ask for.
-     */
     text: {
         family: import('./types.js').DesignToken;
         'family-heading': import('./types.js').DesignToken;
@@ -90,13 +81,6 @@ export declare const semantic: {
             weight: import('./types.js').DesignToken;
             leading: import('./types.js').DesignToken;
         };
-        /**
-         * The introduction that opens a page or a section, one step above the running text.
-         *
-         * It shares `body-lg`'s generous leading rather than taking a tighter one: a lead is read
-         * as prose, not as a heading, and the two therefore sit in the same column without the
-         * rhythm changing under the reader between the first paragraph and the second.
-         */
         'body-xl': {
             size: import('./types.js').DesignToken;
             weight: import('./types.js').DesignToken;
@@ -155,13 +139,7 @@ export declare const semantic: {
         pill: import('./types.js').DesignToken;
         chip: import('./types.js').DesignToken;
     };
-    /**
-     * How long a change takes, described by what it is: the immediate feedback of a control
-     * under the pointer, the ordinary pace of the design system, a deliberately slower move.
-     *
-     * These three are what a `transition` reaches for. Motion does not vary from one theme to
-     * the next, so unlike the colours they are stated once and never restated.
-     */
+    /** Semantic transition durations are theme-independent. */
     duration: {
         fast: import('./types.js').DesignToken;
         base: import('./types.js').DesignToken;

package/dist/tokens/semantic.js.map

@@ -1 +1 @@
-{"version":3,"file":"semantic.js","names":[],"sources":["../../src/tokens/semantic.ts"],"sourcesContent":["/**\n * The tokens naming a ROLE rather than a value: the page background, ordinary text, the\n * accent an application is built around, the pause before a tooltip.\n *\n * These are the ONLY tokens a component mentions, and that is the whole point — a component\n * asks for the accent and never for a particular indigo, so an application can change what\n * the accent IS without any component knowing.\n *\n * Almost every entry ALIASES a palette step in braces rather than stating a value. What is\n * written here is the LIGHT theme; `themes/dark.ts` repoints the same roles.\n */\nimport { color, dimension, duration, fontFamily, fontWeight, type TokenGroup } from './types'\n\nexport const semantic = {\n  color: {\n    surface: color('{color.white}', 'The default page background'),\n    'surface-muted': color('{color.gray.100}', 'A muted background (secondary areas)'),\n    'surface-raised': color('{color.white}', 'Raised surfaces: cards'),\n    'surface-overlay': color('{color.white}', 'Floating surfaces: dialogs, popovers, menus'),\n    'surface-sunken': color('{color.gray.50}', 'Sunken surfaces: wells, code areas'),\n    'surface-inverse': color('{color.gray.900}', 'Inverted-contrast surfaces: tooltips'),\n    'surface-skeleton': color(\n      '{color.gray.200}',\n      \"The background of VSkeletonLoader's silhouettes, from which its highlight is derived\",\n    ),\n\n    'text-on-inverse': color('{color.white}', 'Text set on an inverted surface'),\n\n    text: color('{color.gray.900}', 'The running text of the interface'),\n    'text-muted': color(\n      '{color.gray.600}',\n      'Secondary text: hints, captions, descriptions, start icons',\n    ),\n    'text-subtle': color('{color.gray.500}', 'Placeholders, disabled text'),\n    'text-on-accent': color('{color.white}', 'Text set on an accent/danger/success background'),\n    'text-on-warning': color(\n      '{color.gray.950}',\n      'Text set on a solid warning background (amber too light for white)',\n    ),\n\n    border: color('{color.gray.200}', 'Dividers, and the frames of cards, tables and panels'),\n    'border-strong': color('{color.gray.300}', 'The borders of form controls'),\n\n    accent: color(\n      '{color.indigo.600}',\n      'The brand color: solid buttons, checked controls, the selected item',\n    ),\n    'accent-hover': color('{color.indigo.700}', 'The accent color under the pointer'),\n    'accent-active': color('{color.indigo.800}', 'The accent color while pressed'),\n    'accent-surface': color('{color.indigo.50}', 'A tinted accent background (badges, selections)'),\n    'accent-border': color(\n      '{color.indigo.200}',\n      'The border of a tinted accent element, matching the accent surface',\n    ),\n    'accent-text': color('{color.indigo.700}', 'Accent text on a neutral or tinted background'),\n\n    danger: color('{color.red.600}', 'Destructive actions and errors: solid buttons, error states'),\n    'danger-hover': color('{color.red.700}', 'The danger color under the pointer'),\n    'danger-active': color('{color.red.800}', 'The danger color while pressed'),\n    'danger-surface': color(\n      '{color.red.50}',\n      'A tinted danger background (soft buttons and chips, a destructive menu item)',\n    ),\n    'danger-border': color(\n      '{color.red.200}',\n      'The border of a tinted danger element, matching the danger surface',\n    ),\n    'danger-text': color(\n      '{color.red.700}',\n      'Danger text on a neutral or tinted background: error messages, a destructive menu item',\n    ),\n\n    /*\n     * Green starts one step darker than the other colours. White text on a filled button\n     * only becomes readable enough from green 700 onwards — green 600 falls well short of\n     * the threshold. Darkening the colour rather than darkening the text is what keeps one\n     * simple rule true: a filled control carries white text.\n     *\n     * The one exception is the warning colour, since no step of an amber is ever dark\n     * enough for white, which is why it alone declares a text colour of its own.\n     */\n    success: color('{color.green.700}', 'A positive outcome: solid chips, badges, notifications'),\n    'success-hover': color('{color.green.800}', 'The success color under the pointer'),\n    'success-active': color('{color.green.900}', 'The success color while pressed'),\n    'success-surface': color(\n      '{color.green.50}',\n      'A tinted success background (soft chips, badges, notifications)',\n    ),\n    'success-border': color(\n      '{color.green.200}',\n      'The border of a tinted success element, matching the success surface',\n    ),\n    'success-text': color('{color.green.800}', 'Success text on a neutral or tinted background'),\n\n    warning: color(\n      '{color.amber.600}',\n      'A situation that calls for attention: solid chips, badges, notifications',\n    ),\n    'warning-hover': color('{color.amber.700}', 'The warning color under the pointer'),\n    'warning-active': color('{color.amber.800}', 'The warning color while pressed'),\n    'warning-surface': color(\n      '{color.amber.50}',\n      'A tinted warning background (soft chips, badges, notifications)',\n    ),\n    'warning-border': color(\n      '{color.amber.200}',\n      'The border of a tinted warning element, matching the warning surface',\n    ),\n    'warning-text': color('{color.amber.900}', 'Warning text on a neutral or tinted background'),\n\n    backdrop: color('oklch(0% 0 0 / 0.45)', 'The veil behind modal dialogs'),\n\n    /*\n     * The four colours of a calendar event that names none of its own.\n     *\n     * These are the one place in the design system where a colour is DATA rather than a\n     * role: which hue an event takes is derived from its id (see `VCalendar/color.ts`),\n     * and each card turns these colours to its own hue. That is why they are written out\n     * rather than aliased to a palette — there is no palette to point at, only a wheel. The\n     * hue written here, 265, is the one a card falls back to.\n     *\n     * WHAT MAKES THEM READABLE, and what must not be changed casually. Only the HUE\n     * varies; the lightness and the chroma below are fixed, and in OKLCH lightness is\n     * perceptual — so the distance between the text at L 0.40 and the card at L 0.95 is\n     * the same perceived distance at every hue, which is what turns \"an arbitrary colour\"\n     * into a contrast ratio that can be relied on. Moving either number moves the contrast\n     * of every event in the calendar at once. The same pair is restated in `themes/dark.ts`\n     * with the roles swapped end for end.\n     *\n     * TRAP — they are plain colours, with no `var()` in them. A custom property is resolved\n     * where it is DECLARED, which for a token is `:root`: a hue read there is the fallback's,\n     * and every card would be painted in it whatever hue it set. The card keeps the lightness\n     * and the chroma and swaps the hue itself, with relative colour syntax, in\n     * `VCalendarEvent.vue`.\n     */\n    'event-surface': color(\n      'oklch(0.95 0.045 265)',\n      'The face of a calendar event that carries no color of its own',\n    ),\n    'event-border': color(\n      'oklch(0.85 0.08 265)',\n      'The edge of that calendar event, and the bar marking its leading side',\n    ),\n    'event-text': color('oklch(0.4 0.11 265)', 'The title of that calendar event'),\n  },\n  /**\n   * The typography, described by role rather than by measurement: a heading, a subtitle,\n   * a caption, a piece of code.\n   *\n   * Each role is a COMPLETE recipe — a size, a weight, the space between lines, and where\n   * it matters the space between letters. Asking for a role therefore settles every one of\n   * those at once, and two pieces of text in the same role cannot drift apart. It is what\n   * the typography component renders, and what the components' own stylesheets ask for.\n   */\n  text: {\n    family: fontFamily('{font.family.sans}', 'The running font of every component'),\n    'family-heading': fontFamily(\n      '{font.family.display}',\n      'The font of the display and heading roles, the running font until it is overridden',\n    ),\n    'family-code': fontFamily(\n      '{font.family.mono}',\n      'The font of code content (the code role, VInputOTP)',\n    ),\n    display: {\n      size: dimension('{font.size.5xl}'),\n      weight: fontWeight('{font.weight.bold}'),\n      leading: dimension('{font.leading.none}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-1': {\n      size: dimension('{font.size.4xl}'),\n      weight: fontWeight('{font.weight.bold}'),\n      leading: dimension('{font.leading.tight}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-2': {\n      size: dimension('{font.size.2xl}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.tight}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-3': {\n      size: dimension('{font.size.lg}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    'heading-4': {\n      size: dimension('{font.size.md}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    subtitle: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    /**\n     * The introduction that opens a page or a section, one step above the running text.\n     *\n     * It shares `body-lg`'s generous leading rather than taking a tighter one: a lead is read\n     * as prose, not as a heading, and the two therefore sit in the same column without the\n     * rhythm changing under the reader between the first paragraph and the second.\n     */\n    'body-xl': {\n      size: dimension('{font.size.lg}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.relaxed}'),\n    },\n    'body-lg': {\n      size: dimension('{font.size.md}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.relaxed}'),\n    },\n    'body-md': {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    'body-sm': {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    label: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    /*\n     * The text beside a checkbox, a radio or a switch. It is `label`'s size and leading at the\n     * regular weight: an option reads as a sentence to choose, not as the name of a field, and\n     * a column of them set in medium weighs as much as the headings above it. A role of its own\n     * rather than a repointed `label`, which VAccordionItem, VBreadcrumb, VSideNavigationItem\n     * and VTypography also read.\n     */\n    choice: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    caption: {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    overline: {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.snug}'),\n      tracking: dimension('{font.tracking.wide}'),\n    },\n    code: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    /*\n     * A role of a different sort: the label of a control — a button, a chip, a badge. It\n     * deliberately carries no SIZE, because a control's text size comes from the size it\n     * was given, and this recipe only settles the weight and the space between lines.\n     */\n    control: {\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.none}'),\n    },\n  },\n  radius: {\n    interactive: dimension('{radius.md}', 'Buttons, inputs, controls'),\n    surface: dimension('{radius.lg}', 'Cards, alerts'),\n    overlay: dimension('{radius.xl}', 'Dialogs, popovers, menus'),\n    pill: dimension('{radius.full}', 'Full rounding: switches, badges, pill-shaped chips'),\n    chip: dimension(\n      '{radius.interactive}',\n      'Chips with shape=\"chip\", which follow the interactive radius by default',\n    ),\n  },\n  /**\n   * How long a change takes, described by what it is: the immediate feedback of a control\n   * under the pointer, the ordinary pace of the design system, a deliberately slower move.\n   *\n   * These three are what a `transition` reaches for. Motion does not vary from one theme to\n   * the next, so unlike the colours they are stated once and never restated.\n   */\n  duration: {\n    fast: duration('{duration.150}', 'Color and border changes on hover, focus and press'),\n    base: duration('{duration.200}', 'The default: a panel opening, a value moving'),\n    slow: duration('{duration.300}', 'Movements large enough to be followed by the eye'),\n  },\n  focus: {\n    'ring-color': color(\n      '{color.indigo.500}',\n      'The keyboard focus ring, which has to stand out against the page',\n    ),\n    'ring-width': dimension('2px', 'The thickness of the focus ring'),\n    'ring-offset': dimension('2px', 'The gap between a control and its focus ring'),\n  },\n  control: {\n    'height-xs': dimension(\n      '1.5rem',\n      'The height of every control at size=\"xs\" (24px), 4px less when compact',\n    ),\n    'height-sm': dimension(\n      '2rem',\n      'The height of every control at size=\"sm\" (32px), 4px less when compact',\n    ),\n    'height-md': dimension(\n      '2.5rem',\n      'The height of every control at size=\"md\" (40px), 4px less when compact',\n    ),\n    'height-lg': dimension(\n      '3rem',\n      'The height of every control at size=\"lg\" (48px), 4px less when compact',\n    ),\n    'height-xl': dimension(\n      '3.5rem',\n      'The height of every control at size=\"xl\" (56px), 4px less when compact',\n    ),\n    'border-width': dimension('2px', 'The border of checkable controls (VCheckbox, VRadio)'),\n    'size-check': dimension('1.25rem', 'The box of checkable controls (VCheckbox, VRadio)'),\n    'size-check-mark': dimension('0.875rem', \"The tick inside VCheckbox's box\"),\n    'size-check-dot': dimension('0.5rem', \"The dot inside VRadio's circle\"),\n    'size-switch-w': dimension('2.5rem', \"The width of VSwitch's track\"),\n    'size-switch-h': dimension('1.25rem', \"The height of VSwitch's track\"),\n    'size-switch-pad': dimension(\n      '0.125rem',\n      \"The gap between VSwitch's thumb and the edge of its track\",\n    ),\n    'action-size-sm': dimension(\n      '1.25rem',\n      'The inner buttons of sm input fields (clear, a clickable icon)',\n    ),\n    'action-size-md': dimension(\n      '1.5rem',\n      'The inner buttons of md input fields (clear, a clickable icon)',\n    ),\n    'action-size-lg': dimension(\n      '1.75rem',\n      'The inner buttons of lg input fields (clear, a clickable icon)',\n    ),\n    'size-slider-track': dimension('0.375rem', \"The thickness of VSlider's track\"),\n    'size-slider-thumb': dimension('1.25rem', \"The diameter of VSlider's thumb\"),\n    'size-slider-length': dimension('10rem', 'The default length of a vertical VSlider'),\n    'size-slider-field': dimension('5rem', \"The width of VSlider's number fields\"),\n    'size-carousel-block': dimension(\n      '24rem',\n      \"The default block size of VCarousel's viewport, which a vertical carousel needs to lay its slides out\",\n    ),\n    'size-carousel-indicator': dimension(\n      '0.625rem',\n      'The diameter of a VCarousel indicator dot (its hit area comes from --vectis-control-height-xs)',\n    ),\n    'size-carousel-indicator-active': dimension(\n      '1.25rem',\n      'The length of the active VCarousel indicator, which stretches from a dot into a pill',\n    ),\n    'size-combobox-list-max-block': dimension(\n      '18rem',\n      \"The maximum height of VCombobox's list panel (the scrolling area)\",\n    ),\n    'size-menu-min': dimension('11rem', \"The minimum width of VMenu's panel\"),\n    'size-menu-max': dimension('20rem', \"The maximum width of VMenu's panel\"),\n    'size-progress-linear-thickness': dimension(\n      '0.25rem',\n      \"The default thickness of VProgressLinear's bar (4px)\",\n    ),\n    'size-progress-linear-length': dimension(\n      '10rem',\n      'The default length of a vertical VProgressLinear, which a height set on the bar replaces',\n    ),\n    'size-progress-circular-diameter': dimension(\n      '3rem',\n      'The default diameter of VProgressCircular',\n    ),\n    'size-progress-circular-thickness': dimension(\n      '0.25rem',\n      'The default stroke thickness of VProgressCircular (4px)',\n    ),\n    'size-skeleton-surface': dimension(\n      '6rem',\n      'The default height of a surface-shaped VSkeletonLoader: a card, an image (96px)',\n    ),\n    'size-toast-width': dimension('22rem', 'The default width of a toast'),\n    'size-tooltip-max': dimension('18rem', 'The widest a tooltip grows before it wraps (288px)'),\n    'size-dialog-width': dimension(\n      '25rem',\n      'The default width of VDialog and VDialogAlert (400px), when no `width` is given',\n    ),\n    'size-snackbar-min': dimension('18rem', 'The minimum width of a snackbar (288px)'),\n    'size-snackbar-max': dimension('36rem', 'The maximum width of a snackbar (576px)'),\n    'size-badge-h': dimension('1.25rem', 'The height of a VBadge pill'),\n    'size-badge-dot': dimension('0.625rem', 'The diameter of VBadge in dot mode'),\n    'size-badge-ring': dimension('2px', 'The detaching ring of a bordered VBadge'),\n    'size-avatar-ring': dimension('2px', 'The ring separating stacked avatars (VAvatarGroup)'),\n    'size-date-picker-cell': dimension('2.5rem', 'The side of a VDatePicker day cell'),\n    'size-date-picker-day': dimension(\n      '{control.height.md}',\n      'The diameter of the disc a VDatePicker day is drawn on; the cell grows to hold it',\n    ),\n    'size-date-picker-dot': dimension('0.25rem', 'The diameter of a VDatePicker event dot'),\n    'size-date-picker-nav-min': dimension(\n      '5.375rem',\n      \"The minimum width of VDatePicker's month/year picker buttons (about 86px)\",\n    ),\n    'size-tab-indicator': dimension(\n      '2px',\n      'The thickness of the active tab indicator (VTabs, flat/outlined)',\n    ),\n    'size-table-search': dimension('16rem', \"The width of VDataTable's search field\"),\n    'size-time-picker-dial': dimension('16rem', \"The diameter of VTimePicker's clock face\"),\n    'size-time-picker-number': dimension(\n      '3rem',\n      \"A numeral cell on VTimePicker's face, and the hand's dot on a marker\",\n    ),\n    'size-time-picker-center': dimension('0.5rem', \"The center dot of VTimePicker's face\"),\n    'size-time-picker-hand': dimension('2px', \"The thickness of the hand on VTimePicker's face\"),\n    'size-time-picker-hand-minor': dimension(\n      '1rem',\n      \"The dot of VTimePicker's hand on a minute off the 5-minute markers\",\n    ),\n    'size-file-picker-min-block': dimension(\n      '10rem',\n      \"The minimum height of VFilePicker's drop zone: icon, two lines, separator and button\",\n    ),\n    'size-file-picker-icon': dimension(\n      '2.5rem',\n      \"The large icon at the top of VFilePicker's drop zone\",\n    ),\n    'size-file-picker-thumb': dimension(\n      '2.5rem',\n      'The thumbnail square of a VFilePicker preview row (an image, or its type icon)',\n    ),\n    /*\n     * A card is exactly as tall as its event is long — there is deliberately no floor — so\n     * this value alone decides how much room the shortest event gets. At 4rem an hour, a\n     * quarter of one is 16px, which holds a line of the title once its leading is tightened;\n     * VCalendarEvent does that by measuring the card rather than by counting minutes. Lower\n     * it much and the shortest events stop being readable at all.\n     */\n    'size-calendar-hour': dimension('4rem', \"The height of one hour in VCalendar's time grid\"),\n    'size-calendar-gutter': dimension(\n      '4.5rem',\n      \"The column of hour labels beside VCalendar's time grid, wide enough for a 12-hour clock's '12:00 AM' on one line\",\n    ),\n    'size-calendar-tick': dimension(\n      '0.375rem',\n      \"How far an hour's rule runs back into VCalendar's gutter, tying the label to its line\",\n    ),\n    /*\n     * TRAP — the twin of `EDGE_BAND` in `VCalendar/edgeStep.ts`, which is the same strip\n     * measured in JavaScript. This value is what the reader SEES light up; that one is where\n     * the calendar actually starts counting down to turn the page. Move one alone and the\n     * calendar pages from somewhere other than where it said it would, with nothing to point\n     * at it.\n     */\n    'size-calendar-edge': dimension(\n      '3rem',\n      'The strip at the side of VCalendar that pages the view when a dragged event rests on it',\n    ),\n    'size-calendar-day-min': dimension(\n      '5rem',\n      'The width a VCalendar day column may not go below, past which the grid scrolls',\n    ),\n    'size-calendar-handle': dimension(\n      '0.5rem',\n      \"The strip along a VCalendar card's bottom edge that its end is dragged by\",\n    ),\n    'size-calendar-allday-lane': dimension('1.5rem', \"One lane of VCalendar's all-day band\"),\n    'size-calendar-allday-max': dimension(\n      '7rem',\n      \"The height past which VCalendar's all-day band scrolls instead of growing\",\n    ),\n    'size-calendar-now-dot': dimension('0.625rem', \"The dot on VCalendar's current-time line\"),\n    'size-calendar-event-edge': dimension(\n      '3px',\n      'The width of the coloured leading edge of a VCalendar event',\n    ),\n    'size-calendar-gap': dimension(\n      '0.125rem',\n      'The gap VCalendar keeps between two events, side by side in a day or stacked in a month',\n    ),\n    'size-calendar-grip': dimension(\n      '1rem',\n      \"The length of the grip drawn on a VCalendar card's resize strip\",\n    ),\n    'size-calendar-grip-thickness': dimension(\n      '2px',\n      \"The thickness of that grip, which is also its distance from the card's bottom edge\",\n    ),\n    'size-calendar-year-month': dimension(\n      '13rem',\n      \"The narrowest a mini-month of VCalendar's year view gets before the year reflows\",\n    ),\n    /*\n     * Sized so the default `monthEventLimit` of three chips AND the \"+N more\" line beneath\n     * them fit without being clipped: 136px, less the padding, the border and the 32px day\n     * button, leaves 85px against 76px of chips and a 14px more-line. Shrinking it silently\n     * costs the third chip, since the cell clips rather than scrolls.\n     */\n    'size-calendar-month-cell': dimension(\n      '8.5rem',\n      \"The minimum height of a day in VCalendar's month view\",\n    ),\n    'size-calendar-year-cell': dimension(\n      '1.5rem',\n      \"The side of a day square in the mini-months of VCalendar's year view\",\n    ),\n  },\n  icon: {\n    'size-sm': dimension('1rem', 'The icon size of xs controls (16px)'),\n    'size-md': dimension('1.25rem', 'The icon size of sm and md controls (20px)'),\n    'size-lg': dimension('1.5rem', 'The icon size of lg and xl controls (24px)'),\n  },\n} satisfies TokenGroup\n"],"mappings":"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"}
+{"version":3,"file":"semantic.js","names":[],"sources":["../../src/tokens/semantic.ts"],"sourcesContent":["/**\n * Semantic roles alias primitives; components depend on these roles so applications can theme\n * without rewriting component CSS.\n */\nimport { color, dimension, duration, fontFamily, fontWeight, type TokenGroup } from './types'\n\nexport const semantic = {\n  color: {\n    surface: color('{color.white}', 'The default page background'),\n    'surface-muted': color('{color.gray.100}', 'A muted background (secondary areas)'),\n    'surface-raised': color('{color.white}', 'Raised surfaces: cards'),\n    'surface-overlay': color('{color.white}', 'Floating surfaces: dialogs, popovers, menus'),\n    'surface-sunken': color('{color.gray.50}', 'Sunken surfaces: wells, code areas'),\n    'surface-inverse': color('{color.gray.900}', 'Inverted-contrast surfaces: tooltips'),\n    'surface-skeleton': color(\n      '{color.gray.200}',\n      \"The background of VSkeletonLoader's silhouettes, from which its highlight is derived\",\n    ),\n\n    'text-on-inverse': color('{color.white}', 'Text set on an inverted surface'),\n\n    text: color('{color.gray.900}', 'The running text of the interface'),\n    'text-muted': color(\n      '{color.gray.600}',\n      'Secondary text: hints, captions, descriptions, start icons',\n    ),\n    'text-subtle': color('{color.gray.500}', 'Placeholders, disabled text'),\n    'text-on-accent': color('{color.white}', 'Text set on an accent/danger/success background'),\n    'text-on-warning': color(\n      '{color.gray.950}',\n      'Text set on a solid warning background (amber too light for white)',\n    ),\n\n    border: color('{color.gray.200}', 'Dividers, and the frames of cards, tables and panels'),\n    'border-strong': color('{color.gray.300}', 'The borders of form controls'),\n\n    accent: color(\n      '{color.indigo.600}',\n      'The brand color: solid buttons, checked controls, the selected item',\n    ),\n    'accent-hover': color('{color.indigo.700}', 'The accent color under the pointer'),\n    'accent-active': color('{color.indigo.800}', 'The accent color while pressed'),\n    'accent-surface': color('{color.indigo.50}', 'A tinted accent background (badges, selections)'),\n    'accent-border': color(\n      '{color.indigo.200}',\n      'The border of a tinted accent element, matching the accent surface',\n    ),\n    'accent-text': color('{color.indigo.700}', 'Accent text on a neutral or tinted background'),\n\n    danger: color('{color.red.600}', 'Destructive actions and errors: solid buttons, error states'),\n    'danger-hover': color('{color.red.700}', 'The danger color under the pointer'),\n    'danger-active': color('{color.red.800}', 'The danger color while pressed'),\n    'danger-surface': color(\n      '{color.red.50}',\n      'A tinted danger background (soft buttons and chips, a destructive menu item)',\n    ),\n    'danger-border': color(\n      '{color.red.200}',\n      'The border of a tinted danger element, matching the danger surface',\n    ),\n    'danger-text': color(\n      '{color.red.700}',\n      'Danger text on a neutral or tinted background: error messages, a destructive menu item',\n    ),\n\n    /* Green filled surfaces need step 700 to contrast with white text. */\n    success: color('{color.green.700}', 'A positive outcome: solid chips, badges, notifications'),\n    'success-hover': color('{color.green.800}', 'The success color under the pointer'),\n    'success-active': color('{color.green.900}', 'The success color while pressed'),\n    'success-surface': color(\n      '{color.green.50}',\n      'A tinted success background (soft chips, badges, notifications)',\n    ),\n    'success-border': color(\n      '{color.green.200}',\n      'The border of a tinted success element, matching the success surface',\n    ),\n    'success-text': color('{color.green.800}', 'Success text on a neutral or tinted background'),\n\n    warning: color(\n      '{color.amber.600}',\n      'A situation that calls for attention: solid chips, badges, notifications',\n    ),\n    'warning-hover': color('{color.amber.700}', 'The warning color under the pointer'),\n    'warning-active': color('{color.amber.800}', 'The warning color while pressed'),\n    'warning-surface': color(\n      '{color.amber.50}',\n      'A tinted warning background (soft chips, badges, notifications)',\n    ),\n    'warning-border': color(\n      '{color.amber.200}',\n      'The border of a tinted warning element, matching the warning surface',\n    ),\n    'warning-text': color('{color.amber.900}', 'Warning text on a neutral or tinted background'),\n\n    backdrop: color('oklch(0% 0 0 / 0.45)', 'The veil behind modal dialogs'),\n\n    /*\n     * Keep event colours literal: root-declared var aliases resolve their hue before cards can\n     * supply per-event hues.\n     */\n    'event-surface': color(\n      'oklch(0.95 0.045 265)',\n      'The face of a calendar event that carries no color of its own',\n    ),\n    'event-border': color(\n      'oklch(0.85 0.08 265)',\n      'The edge of that calendar event, and the bar marking its leading side',\n    ),\n    'event-text': color('oklch(0.4 0.11 265)', 'The title of that calendar event'),\n  },\n  text: {\n    family: fontFamily('{font.family.sans}', 'The running font of every component'),\n    'family-heading': fontFamily(\n      '{font.family.display}',\n      'The font of the display and heading roles, the running font until it is overridden',\n    ),\n    'family-code': fontFamily(\n      '{font.family.mono}',\n      'The font of code content (the code role, VInputOTP)',\n    ),\n    display: {\n      size: dimension('{font.size.5xl}'),\n      weight: fontWeight('{font.weight.bold}'),\n      leading: dimension('{font.leading.none}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-1': {\n      size: dimension('{font.size.4xl}'),\n      weight: fontWeight('{font.weight.bold}'),\n      leading: dimension('{font.leading.tight}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-2': {\n      size: dimension('{font.size.2xl}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.tight}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-3': {\n      size: dimension('{font.size.lg}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    'heading-4': {\n      size: dimension('{font.size.md}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    subtitle: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    'body-xl': {\n      size: dimension('{font.size.lg}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.relaxed}'),\n    },\n    'body-lg': {\n      size: dimension('{font.size.md}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.relaxed}'),\n    },\n    'body-md': {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    'body-sm': {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    label: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    /* Choice text uses label dimensions at regular weight to remain distinct from field labels. */\n    choice: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    caption: {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    overline: {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.snug}'),\n      tracking: dimension('{font.tracking.wide}'),\n    },\n    code: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    /* Control size comes from --control-font-size; this recipe supplies weight and leading only. */\n    control: {\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.none}'),\n    },\n  },\n  radius: {\n    interactive: dimension('{radius.md}', 'Buttons, inputs, controls'),\n    surface: dimension('{radius.lg}', 'Cards, alerts'),\n    overlay: dimension('{radius.xl}', 'Dialogs, popovers, menus'),\n    pill: dimension('{radius.full}', 'Full rounding: switches, badges, pill-shaped chips'),\n    chip: dimension(\n      '{radius.interactive}',\n      'Chips with shape=\"chip\", which follow the interactive radius by default',\n    ),\n  },\n  /** Semantic transition durations are theme-independent. */\n  duration: {\n    fast: duration('{duration.150}', 'Color and border changes on hover, focus and press'),\n    base: duration('{duration.200}', 'The default: a panel opening, a value moving'),\n    slow: duration('{duration.300}', 'Movements large enough to be followed by the eye'),\n  },\n  focus: {\n    'ring-color': color(\n      '{color.indigo.500}',\n      'The keyboard focus ring, which has to stand out against the page',\n    ),\n    'ring-width': dimension('2px', 'The thickness of the focus ring'),\n    'ring-offset': dimension('2px', 'The gap between a control and its focus ring'),\n  },\n  control: {\n    'height-xs': dimension(\n      '1.5rem',\n      'The height of every control at size=\"xs\" (24px), 4px less when compact',\n    ),\n    'height-sm': dimension(\n      '2rem',\n      'The height of every control at size=\"sm\" (32px), 4px less when compact',\n    ),\n    'height-md': dimension(\n      '2.5rem',\n      'The height of every control at size=\"md\" (40px), 4px less when compact',\n    ),\n    'height-lg': dimension(\n      '3rem',\n      'The height of every control at size=\"lg\" (48px), 4px less when compact',\n    ),\n    'height-xl': dimension(\n      '3.5rem',\n      'The height of every control at size=\"xl\" (56px), 4px less when compact',\n    ),\n    'border-width': dimension('2px', 'The border of checkable controls (VCheckbox, VRadio)'),\n    'size-check': dimension('1.25rem', 'The box of checkable controls (VCheckbox, VRadio)'),\n    'size-check-mark': dimension('0.875rem', \"The tick inside VCheckbox's box\"),\n    'size-check-dot': dimension('0.5rem', \"The dot inside VRadio's circle\"),\n    'size-switch-w': dimension('2.5rem', \"The width of VSwitch's track\"),\n    'size-switch-h': dimension('1.25rem', \"The height of VSwitch's track\"),\n    'size-switch-pad': dimension(\n      '0.125rem',\n      \"The gap between VSwitch's thumb and the edge of its track\",\n    ),\n    'action-size-sm': dimension(\n      '1.25rem',\n      'The inner buttons of sm input fields (clear, a clickable icon)',\n    ),\n    'action-size-md': dimension(\n      '1.5rem',\n      'The inner buttons of md input fields (clear, a clickable icon)',\n    ),\n    'action-size-lg': dimension(\n      '1.75rem',\n      'The inner buttons of lg input fields (clear, a clickable icon)',\n    ),\n    'size-slider-track': dimension('0.375rem', \"The thickness of VSlider's track\"),\n    'size-slider-thumb': dimension('1.25rem', \"The diameter of VSlider's thumb\"),\n    'size-slider-length': dimension('10rem', 'The default length of a vertical VSlider'),\n    'size-slider-field': dimension('5rem', \"The width of VSlider's number fields\"),\n    'size-carousel-block': dimension(\n      '24rem',\n      \"The default block size of VCarousel's viewport, which a vertical carousel needs to lay its slides out\",\n    ),\n    'size-carousel-indicator': dimension(\n      '0.625rem',\n      'The diameter of a VCarousel indicator dot (its hit area comes from --vectis-control-height-xs)',\n    ),\n    'size-carousel-indicator-active': dimension(\n      '1.25rem',\n      'The length of the active VCarousel indicator, which stretches from a dot into a pill',\n    ),\n    'size-combobox-list-max-block': dimension(\n      '18rem',\n      \"The maximum height of VCombobox's list panel (the scrolling area)\",\n    ),\n    'size-menu-min': dimension('11rem', \"The minimum width of VMenu's panel\"),\n    'size-menu-max': dimension('20rem', \"The maximum width of VMenu's panel\"),\n    'size-progress-linear-thickness': dimension(\n      '0.25rem',\n      \"The default thickness of VProgressLinear's bar (4px)\",\n    ),\n    'size-progress-linear-length': dimension(\n      '10rem',\n      'The default length of a vertical VProgressLinear, which a height set on the bar replaces',\n    ),\n    'size-progress-circular-diameter': dimension(\n      '3rem',\n      'The default diameter of VProgressCircular',\n    ),\n    'size-progress-circular-thickness': dimension(\n      '0.25rem',\n      'The default stroke thickness of VProgressCircular (4px)',\n    ),\n    'size-skeleton-surface': dimension(\n      '6rem',\n      'The default height of a surface-shaped VSkeletonLoader: a card, an image (96px)',\n    ),\n    'size-toast-width': dimension('22rem', 'The default width of a toast'),\n    'size-tooltip-max': dimension('18rem', 'The widest a tooltip grows before it wraps (288px)'),\n    'size-dialog-width': dimension(\n      '25rem',\n      'The default width of VDialog and VDialogAlert (400px), when no `width` is given',\n    ),\n    'size-snackbar-min': dimension('18rem', 'The minimum width of a snackbar (288px)'),\n    'size-snackbar-max': dimension('36rem', 'The maximum width of a snackbar (576px)'),\n    'size-badge-h': dimension('1.25rem', 'The height of a VBadge pill'),\n    'size-badge-dot': dimension('0.625rem', 'The diameter of VBadge in dot mode'),\n    'size-badge-ring': dimension('2px', 'The detaching ring of a bordered VBadge'),\n    'size-avatar-ring': dimension('2px', 'The ring separating stacked avatars (VAvatarGroup)'),\n    'size-date-picker-cell': dimension('2.5rem', 'The side of a VDatePicker day cell'),\n    'size-date-picker-day': dimension(\n      '{control.height.md}',\n      'The diameter of the disc a VDatePicker day is drawn on; the cell grows to hold it',\n    ),\n    'size-date-picker-dot': dimension('0.25rem', 'The diameter of a VDatePicker event dot'),\n    'size-date-picker-nav-min': dimension(\n      '5.375rem',\n      \"The minimum width of VDatePicker's month/year picker buttons (about 86px)\",\n    ),\n    'size-tab-indicator': dimension(\n      '2px',\n      'The thickness of the active tab indicator (VTabs, flat/outlined)',\n    ),\n    'size-table-search': dimension('16rem', \"The width of VDataTable's search field\"),\n    'size-time-picker-dial': dimension('16rem', \"The diameter of VTimePicker's clock face\"),\n    'size-time-picker-number': dimension(\n      '3rem',\n      \"A numeral cell on VTimePicker's face, and the hand's dot on a marker\",\n    ),\n    'size-time-picker-center': dimension('0.5rem', \"The center dot of VTimePicker's face\"),\n    'size-time-picker-hand': dimension('2px', \"The thickness of the hand on VTimePicker's face\"),\n    'size-time-picker-hand-minor': dimension(\n      '1rem',\n      \"The dot of VTimePicker's hand on a minute off the 5-minute markers\",\n    ),\n    'size-file-picker-min-block': dimension(\n      '10rem',\n      \"The minimum height of VFilePicker's drop zone: icon, two lines, separator and button\",\n    ),\n    'size-file-picker-icon': dimension(\n      '2.5rem',\n      \"The large icon at the top of VFilePicker's drop zone\",\n    ),\n    'size-file-picker-thumb': dimension(\n      '2.5rem',\n      'The thumbnail square of a VFilePicker preview row (an image, or its type icon)',\n    ),\n    /*\n     * This hour height must leave room for a readable title in short events; cards have no\n     * minimum height.\n     */\n    'size-calendar-hour': dimension('4rem', \"The height of one hour in VCalendar's time grid\"),\n    'size-calendar-gutter': dimension(\n      '4.5rem',\n      \"The column of hour labels beside VCalendar's time grid, wide enough for a 12-hour clock's '12:00 AM' on one line\",\n    ),\n    'size-calendar-tick': dimension(\n      '0.375rem',\n      \"How far an hour's rule runs back into VCalendar's gutter, tying the label to its line\",\n    ),\n    /*\n     * Keep this visual edge-strip width aligned with EDGE_BAND in VCalendar/edgeStep.ts so\n     * paging starts where the highlight appears.\n     */\n    'size-calendar-edge': dimension(\n      '3rem',\n      'The strip at the side of VCalendar that pages the view when a dragged event rests on it',\n    ),\n    'size-calendar-day-min': dimension(\n      '5rem',\n      'The width a VCalendar day column may not go below, past which the grid scrolls',\n    ),\n    'size-calendar-handle': dimension(\n      '0.5rem',\n      \"The strip along a VCalendar card's bottom edge that its end is dragged by\",\n    ),\n    'size-calendar-allday-lane': dimension('1.5rem', \"One lane of VCalendar's all-day band\"),\n    'size-calendar-allday-max': dimension(\n      '7rem',\n      \"The height past which VCalendar's all-day band scrolls instead of growing\",\n    ),\n    'size-calendar-now-dot': dimension('0.625rem', \"The dot on VCalendar's current-time line\"),\n    'size-calendar-event-edge': dimension(\n      '3px',\n      'The width of the coloured leading edge of a VCalendar event',\n    ),\n    'size-calendar-gap': dimension(\n      '0.125rem',\n      'The gap VCalendar keeps between two events, side by side in a day or stacked in a month',\n    ),\n    'size-calendar-grip': dimension(\n      '1rem',\n      \"The length of the grip drawn on a VCalendar card's resize strip\",\n    ),\n    'size-calendar-grip-thickness': dimension(\n      '2px',\n      \"The thickness of that grip, which is also its distance from the card's bottom edge\",\n    ),\n    'size-calendar-year-month': dimension(\n      '13rem',\n      \"The narrowest a mini-month of VCalendar's year view gets before the year reflows\",\n    ),\n    /*\n     * Keep enough cell height for monthEventLimit chips and the overflow line; clipped cells do\n     * not scroll to reveal hidden rows.\n     */\n    'size-calendar-month-cell': dimension(\n      '8.5rem',\n      \"The minimum height of a day in VCalendar's month view\",\n    ),\n    'size-calendar-year-cell': dimension(\n      '1.5rem',\n      \"The side of a day square in the mini-months of VCalendar's year view\",\n    ),\n  },\n  icon: {\n    'size-sm': dimension('1rem', 'The icon size of xs controls (16px)'),\n    'size-md': dimension('1.25rem', 'The icon size of sm and md controls (20px)'),\n    'size-lg': dimension('1.5rem', 'The icon size of lg and xl controls (24px)'),\n  },\n} satisfies TokenGroup\n"],"mappings":"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"}

package/dist/tokens/themes/dark.js.map

@@ -1 +1 @@
-{"version":3,"file":"dark.js","names":[],"sources":["../../../src/tokens/themes/dark.ts"],"sourcesContent":["/**\n * The dark theme: ROLES repointed, never the palette they draw from. The palette is the same\n * in both themes; what changes is which step each role names.\n *\n * Every key here must already exist in `semantic.ts`, and the build fails otherwise. A theme\n * may reassign a role, never invent one — a token existing in only one theme leaves a\n * component unstyled in the other.\n */\nimport { color, type TokenGroup } from '../types'\n\nexport const dark = {\n  color: {\n    surface: color('{color.gray.950}'),\n    'surface-muted': color('{color.gray.800}'),\n    'surface-raised': color('{color.gray.900}'),\n    'surface-overlay': color('{color.gray.900}'),\n    'surface-sunken': color('oklch(11% 0.006 260)'),\n    'surface-inverse': color('{color.gray.800}'),\n    'surface-skeleton': color('{color.gray.800}'),\n\n    'text-on-inverse': color('{color.gray.50}'),\n\n    text: color('{color.gray.50}'),\n    'text-muted': color('{color.gray.300}'),\n    'text-subtle': color('{color.gray.400}'),\n    'text-on-accent': color('{color.white}'),\n\n    border: color('{color.gray.800}'),\n    'border-strong': color('{color.gray.700}'),\n\n    accent: color('{color.indigo.500}'),\n    'accent-hover': color('{color.indigo.400}'),\n    'accent-active': color('{color.indigo.300}'),\n    'accent-surface': color('{color.indigo.950}'),\n    'accent-border': color('{color.indigo.900}'),\n    'accent-text': color('{color.indigo.300}'),\n\n    /*\n     * Danger and success keep exactly the steps the light theme gives them, brightness\n     * included. A filled button in either colour carries white text, and white only\n     * reaches the required contrast from red 600 and green 700 onwards — so there is no\n     * lighter step for the dark theme to move to. They therefore go DARKER on hover here,\n     * the opposite direction from the accent and the warning.\n     *\n     * These entries are deliberately identical to the light ones. Deleting them as\n     * redundant would let a later change to the roles quietly drag the dark theme back\n     * into the range where the text cannot be read.\n     */\n    danger: color('{color.red.600}'),\n    'danger-hover': color('{color.red.700}'),\n    'danger-active': color('{color.red.800}'),\n    'danger-surface': color('{color.red.950}'),\n    'danger-border': color('{color.red.900}'),\n    'danger-text': color('{color.red.300}'),\n\n    success: color('{color.green.700}'),\n    'success-hover': color('{color.green.800}'),\n    'success-active': color('{color.green.900}'),\n    'success-surface': color('{color.green.950}'),\n    'success-border': color('{color.green.900}'),\n    'success-text': color('{color.green.300}'),\n\n    warning: color('{color.amber.500}'),\n    'warning-hover': color('{color.amber.400}'),\n    'warning-active': color('{color.amber.300}'),\n    'warning-surface': color('{color.amber.950}'),\n    'warning-border': color('{color.amber.900}'),\n    'warning-text': color('{color.amber.300}'),\n\n    backdrop: color('oklch(0% 0 0 / 0.6)'),\n\n    /*\n     * The calendar event colours, with the two roles swapped end for end: the card becomes\n     * the dark value and the title the light one. The hue still arrives from the card\n     * itself, so only the lightness and the chroma are restated here — which is the whole\n     * point of splitting them that way, since the contrast between a fixed 0.90 and a fixed\n     * 0.30 holds at every hue exactly as its light counterpart does. See `semantic.ts` for\n     * the full reasoning; the two blocks have to be read together.\n     *\n     * The chroma is lower than in light on purpose: a saturated colour reads as brighter\n     * against a dark ground, and matching the light values would make a wall of events\n     * glare.\n     */\n    'event-surface': color('oklch(0.3 0.05 265)'),\n    'event-border': color('oklch(0.42 0.08 265)'),\n    'event-text': color('oklch(0.9 0.06 265)'),\n  },\n  focus: {\n    'ring-color': color('{color.indigo.400}'),\n  },\n} satisfies TokenGroup\n"],"mappings":";;AAUA,IAAa,IAAO;CAClB,OAAO;EACL,SAAS,EAAM,kBAAkB;EACjC,iBAAiB,EAAM,kBAAkB;EACzC,kBAAkB,EAAM,kBAAkB;EAC1C,mBAAmB,EAAM,kBAAkB;EAC3C,kBAAkB,EAAM,sBAAsB;EAC9C,mBAAmB,EAAM,kBAAkB;EAC3C,oBAAoB,EAAM,kBAAkB;EAE5C,mBAAmB,EAAM,iBAAiB;EAE1C,MAAM,EAAM,iBAAiB;EAC7B,cAAc,EAAM,kBAAkB;EACtC,eAAe,EAAM,kBAAkB;EACvC,kBAAkB,EAAM,eAAe;EAEvC,QAAQ,EAAM,kBAAkB;EAChC,iBAAiB,EAAM,kBAAkB;EAEzC,QAAQ,EAAM,oBAAoB;EAClC,gBAAgB,EAAM,oBAAoB;EAC1C,iBAAiB,EAAM,oBAAoB;EAC3C,kBAAkB,EAAM,oBAAoB;EAC5C,iBAAiB,EAAM,oBAAoB;EAC3C,eAAe,EAAM,oBAAoB;EAazC,QAAQ,EAAM,iBAAiB;EAC/B,gBAAgB,EAAM,iBAAiB;EACvC,iBAAiB,EAAM,iBAAiB;EACxC,kBAAkB,EAAM,iBAAiB;EACzC,iBAAiB,EAAM,iBAAiB;EACxC,eAAe,EAAM,iBAAiB;EAEtC,SAAS,EAAM,mBAAmB;EAClC,iBAAiB,EAAM,mBAAmB;EAC1C,kBAAkB,EAAM,mBAAmB;EAC3C,mBAAmB,EAAM,mBAAmB;EAC5C,kBAAkB,EAAM,mBAAmB;EAC3C,gBAAgB,EAAM,mBAAmB;EAEzC,SAAS,EAAM,mBAAmB;EAClC,iBAAiB,EAAM,mBAAmB;EAC1C,kBAAkB,EAAM,mBAAmB;EAC3C,mBAAmB,EAAM,mBAAmB;EAC5C,kBAAkB,EAAM,mBAAmB;EAC3C,gBAAgB,EAAM,mBAAmB;EAEzC,UAAU,EAAM,qBAAqB;EAcrC,iBAAiB,EAAM,qBAAqB;EAC5C,gBAAgB,EAAM,sBAAsB;EAC5C,cAAc,EAAM,qBAAqB;CAC3C;CACA,OAAO,EACL,cAAc,EAAM,oBAAoB,EAC1C;AACF"}
+{"version":3,"file":"dark.js","names":[],"sources":["../../../src/tokens/themes/dark.ts"],"sourcesContent":["/** Dark mode repoints existing semantic roles while retaining the shared primitive palette. */\nimport { color, type TokenGroup } from '../types'\n\nexport const dark = {\n  color: {\n    surface: color('{color.gray.950}'),\n    'surface-muted': color('{color.gray.800}'),\n    'surface-raised': color('{color.gray.900}'),\n    'surface-overlay': color('{color.gray.900}'),\n    'surface-sunken': color('oklch(11% 0.006 260)'),\n    'surface-inverse': color('{color.gray.800}'),\n    'surface-skeleton': color('{color.gray.800}'),\n\n    'text-on-inverse': color('{color.gray.50}'),\n\n    text: color('{color.gray.50}'),\n    'text-muted': color('{color.gray.300}'),\n    'text-subtle': color('{color.gray.400}'),\n    'text-on-accent': color('{color.white}'),\n\n    border: color('{color.gray.800}'),\n    'border-strong': color('{color.gray.700}'),\n\n    accent: color('{color.indigo.500}'),\n    'accent-hover': color('{color.indigo.400}'),\n    'accent-active': color('{color.indigo.300}'),\n    'accent-surface': color('{color.indigo.950}'),\n    'accent-border': color('{color.indigo.900}'),\n    'accent-text': color('{color.indigo.300}'),\n\n    /*\n     * Retain explicit red/green steps for white-text contrast. Their dark-theme hover steps\n     * grow darker, unlike accent and warning.\n     */\n    danger: color('{color.red.600}'),\n    'danger-hover': color('{color.red.700}'),\n    'danger-active': color('{color.red.800}'),\n    'danger-surface': color('{color.red.950}'),\n    'danger-border': color('{color.red.900}'),\n    'danger-text': color('{color.red.300}'),\n\n    success: color('{color.green.700}'),\n    'success-hover': color('{color.green.800}'),\n    'success-active': color('{color.green.900}'),\n    'success-surface': color('{color.green.950}'),\n    'success-border': color('{color.green.900}'),\n    'success-text': color('{color.green.300}'),\n\n    warning: color('{color.amber.500}'),\n    'warning-hover': color('{color.amber.400}'),\n    'warning-active': color('{color.amber.300}'),\n    'warning-surface': color('{color.amber.950}'),\n    'warning-border': color('{color.amber.900}'),\n    'warning-text': color('{color.amber.300}'),\n\n    backdrop: color('oklch(0% 0 0 / 0.6)'),\n\n    /* Swap event surface and text lightness in dark mode; each card still supplies its own hue. */\n    'event-surface': color('oklch(0.3 0.05 265)'),\n    'event-border': color('oklch(0.42 0.08 265)'),\n    'event-text': color('oklch(0.9 0.06 265)'),\n  },\n  focus: {\n    'ring-color': color('{color.indigo.400}'),\n  },\n} satisfies TokenGroup\n"],"mappings":";;AAGA,IAAa,IAAO;CAClB,OAAO;EACL,SAAS,EAAM,kBAAkB;EACjC,iBAAiB,EAAM,kBAAkB;EACzC,kBAAkB,EAAM,kBAAkB;EAC1C,mBAAmB,EAAM,kBAAkB;EAC3C,kBAAkB,EAAM,sBAAsB;EAC9C,mBAAmB,EAAM,kBAAkB;EAC3C,oBAAoB,EAAM,kBAAkB;EAE5C,mBAAmB,EAAM,iBAAiB;EAE1C,MAAM,EAAM,iBAAiB;EAC7B,cAAc,EAAM,kBAAkB;EACtC,eAAe,EAAM,kBAAkB;EACvC,kBAAkB,EAAM,eAAe;EAEvC,QAAQ,EAAM,kBAAkB;EAChC,iBAAiB,EAAM,kBAAkB;EAEzC,QAAQ,EAAM,oBAAoB;EAClC,gBAAgB,EAAM,oBAAoB;EAC1C,iBAAiB,EAAM,oBAAoB;EAC3C,kBAAkB,EAAM,oBAAoB;EAC5C,iBAAiB,EAAM,oBAAoB;EAC3C,eAAe,EAAM,oBAAoB;EAMzC,QAAQ,EAAM,iBAAiB;EAC/B,gBAAgB,EAAM,iBAAiB;EACvC,iBAAiB,EAAM,iBAAiB;EACxC,kBAAkB,EAAM,iBAAiB;EACzC,iBAAiB,EAAM,iBAAiB;EACxC,eAAe,EAAM,iBAAiB;EAEtC,SAAS,EAAM,mBAAmB;EAClC,iBAAiB,EAAM,mBAAmB;EAC1C,kBAAkB,EAAM,mBAAmB;EAC3C,mBAAmB,EAAM,mBAAmB;EAC5C,kBAAkB,EAAM,mBAAmB;EAC3C,gBAAgB,EAAM,mBAAmB;EAEzC,SAAS,EAAM,mBAAmB;EAClC,iBAAiB,EAAM,mBAAmB;EAC1C,kBAAkB,EAAM,mBAAmB;EAC3C,mBAAmB,EAAM,mBAAmB;EAC5C,kBAAkB,EAAM,mBAAmB;EAC3C,gBAAgB,EAAM,mBAAmB;EAEzC,UAAU,EAAM,qBAAqB;EAGrC,iBAAiB,EAAM,qBAAqB;EAC5C,gBAAgB,EAAM,sBAAsB;EAC5C,cAAc,EAAM,qBAAqB;CAC3C;CACA,OAAO,EACL,cAAc,EAAM,oBAAoB,EAC1C;AACF"}

package/dist/tokens/types.d.ts

@@ -1,14 +1,4 @@
-/**
- * The shape of a design token here: `{ $value, $type, $description? }`, gathered in nested
- * groups that give each one its full name. The DTCG format, which is what keeps these files
- * legible to tools other than ours.
- *
- * A token may ALIAS another by naming it in braces instead of stating a value, which is what
- * lets the accent be "indigo at step 600" rather than a colour repeated in twenty places.
- *
- * This is THE source of truth for every visual decision in the library: `tokens.css` is
- * generated from it, and the theming app to come will read and rewrite it directly.
- */
+/** Typed DTCG tokens: nested groups of $value, $type and optional $description. */
 export type TokenType = 'color' | 'dimension' | 'fontFamily' | 'fontWeight' | 'number' | 'duration' | 'cubicBezier' | 'shadow';
 export interface DesignToken {
     $value: string;
@@ -18,7 +8,7 @@ export interface DesignToken {
 export interface TokenGroup {
     [key: string]: DesignToken | TokenGroup;
 }
-/** Tells a token apart from a group of them, which is what walking the tree rests on. */
+/** Tells a token apart from a group of them, which walking the tree rests on. */
 export declare function isToken(node: DesignToken | TokenGroup): node is DesignToken;
 export declare const color: ($value: string, $description?: string) => DesignToken;
 export declare const dimension: ($value: string, $description?: string) => DesignToken;

package/dist/tokens/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/tokens/types.ts"],"sourcesContent":["/**\n * The shape of a design token here: `{ $value, $type, $description? }`, gathered in nested\n * groups that give each one its full name. The DTCG format, which is what keeps these files\n * legible to tools other than ours.\n *\n * A token may ALIAS another by naming it in braces instead of stating a value, which is what\n * lets the accent be \"indigo at step 600\" rather than a colour repeated in twenty places.\n *\n * This is THE source of truth for every visual decision in the library: `tokens.css` is\n * generated from it, and the theming app to come will read and rewrite it directly.\n */\nexport type TokenType =\n  | 'color'\n  | 'dimension'\n  | 'fontFamily'\n  | 'fontWeight'\n  | 'number'\n  | 'duration'\n  | 'cubicBezier'\n  | 'shadow'\n\nexport interface DesignToken {\n  $value: string\n  $type: TokenType\n  $description?: string\n}\n\nexport interface TokenGroup {\n  [key: string]: DesignToken | TokenGroup\n}\n\n/** Tells a token apart from a group of them, which is what walking the tree rests on. */\nexport function isToken(node: DesignToken | TokenGroup): node is DesignToken {\n  return typeof (node as DesignToken).$value === 'string'\n}\n\n/**\n * Builds the small helper used to declare a token of one kind, so that the token files\n * below read as `color('#fff')` rather than repeating the shape of the object each time.\n */\nconst make =\n  ($type: TokenType) =>\n  ($value: string, $description?: string): DesignToken =>\n    $description === undefined ? { $type, $value } : { $type, $value, $description }\n\nexport const color = make('color')\nexport const dimension = make('dimension')\nexport const fontFamily = make('fontFamily')\nexport const fontWeight = make('fontWeight')\nexport const number = make('number')\nexport const duration = make('duration')\nexport const cubicBezier = make('cubicBezier')\nexport const shadow = make('shadow')\n"],"mappings":";AAgCA,SAAgB,EAAQ,GAAqD;CAC3E,OAAO,OAAQ,EAAqB,UAAW;AACjD;AAMA,IAAM,KACH,OACA,GAAgB,MACf,MAAiB,KAAA,IAAY;CAAE;CAAO;AAAO,IAAI;CAAE;CAAO;CAAQ;AAAa,GAEtE,IAAQ,EAAK,OAAO,GACpB,IAAY,EAAK,WAAW,GAC5B,IAAa,EAAK,YAAY,GAC9B,IAAa,EAAK,YAAY,GAE9B,IAAW,EAAK,UAAU,GAC1B,IAAc,EAAK,aAAa,GAChC,IAAS,EAAK,QAAQ"}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/tokens/types.ts"],"sourcesContent":["/** Typed DTCG tokens: nested groups of $value, $type and optional $description. */\nexport type TokenType =\n  | 'color'\n  | 'dimension'\n  | 'fontFamily'\n  | 'fontWeight'\n  | 'number'\n  | 'duration'\n  | 'cubicBezier'\n  | 'shadow'\n\nexport interface DesignToken {\n  $value: string\n  $type: TokenType\n  $description?: string\n}\n\nexport interface TokenGroup {\n  [key: string]: DesignToken | TokenGroup\n}\n\n/** Tells a token apart from a group of them, which walking the tree rests on. */\nexport function isToken(node: DesignToken | TokenGroup): node is DesignToken {\n  return typeof (node as DesignToken).$value === 'string'\n}\n\nconst make =\n  ($type: TokenType) =>\n  ($value: string, $description?: string): DesignToken =>\n    $description === undefined ? { $type, $value } : { $type, $value, $description }\n\nexport const color = make('color')\nexport const dimension = make('dimension')\nexport const fontFamily = make('fontFamily')\nexport const fontWeight = make('fontWeight')\nexport const number = make('number')\nexport const duration = make('duration')\nexport const cubicBezier = make('cubicBezier')\nexport const shadow = make('shadow')\n"],"mappings":";AAsBA,SAAgB,EAAQ,GAAqD;CAC3E,OAAO,OAAQ,EAAqB,UAAW;AACjD;AAEA,IAAM,KACH,OACA,GAAgB,MACf,MAAiB,KAAA,IAAY;CAAE;CAAO;AAAO,IAAI;CAAE;CAAO;CAAQ;AAAa,GAEtE,IAAQ,EAAK,OAAO,GACpB,IAAY,EAAK,WAAW,GAC5B,IAAa,EAAK,YAAY,GAC9B,IAAa,EAAK,YAAY,GAE9B,IAAW,EAAK,UAAU,GAC1B,IAAc,EAAK,aAAa,GAChC,IAAS,EAAK,QAAQ"}

package/dist/types.d.ts

@@ -1,24 +1,6 @@
 /**
- * The types the design system's components pass BETWEEN them and that belong to none of them.
- *
- * A type is normally named after whatever owns it: `ButtonTone` for VButton,
- * `DatePickerRange` for the component that defines its shape, `FileRejection` for the module
- * that produces it. This file is for the case where nothing does: an item's value is shared
- * by a tab, a toggle item, a radio button and a combobox option, and naming it after any one of the three
- * would say something untrue about the other two.
- *
- * It stays small on purpose. A type reaching for it should first be asked whether a component
- * or a module really does own it.
- */
-/**
- * What identifies one item among several: a tab, a toggle item, an option in a list.
- *
- * A number is admitted because that is what a row from a database is keyed by, and a
- * consumer whose options come from an API should not have to convert on the way in and back
- * on the way out. Where the value reaches the DOM the component converts it itself.
- *
- * VRadio takes it too, and needs no conversion for it: the `value` ATTRIBUTE of a native radio
- * is text, but Vue's radio v-model reads back the value exactly as it was bound rather than
- * the attribute, so a number put in is the number handed back.
+ * Types shared across unrelated components; component-owned contracts stay in their own
+ * modules.
  */
+/** What identifies one item among several: a tab, a toggle item, an option in a list. */
 export type ItemValue = string | number;

package/dist/utils/array.d.ts

@@ -1,7 +1,5 @@
 /**
- * Adds a value to a selection, or takes it out again if it is already there.
- *
- * ALWAYS returns a new list rather than mutating the one it was given: it is the new
- * reference, not a change made inside the old list, that wakes a consumer's v-model.
+ * Toggle membership without mutating the input; returning a new reference propagates selection
+ * changes through v-model.
  */
 export declare function toggleValue<T>(list: readonly T[], value: T): T[];