vectis-ui 0.1.0 → 0.8.0

package/dist/tokens/semantic.js.map

@@ -1 +1 @@
-{"version":3,"file":"semantic.js","names":[],"sources":["../../src/tokens/semantic.ts"],"sourcesContent":["/**\n * The tokens that name a ROLE rather than a value: the page's background, the colour of\n * ordinary text, the accent an application is built around, the pause before a tooltip\n * appears.\n *\n * These are the ONLY tokens a component ever mentions, and that is the whole point. A\n * component asks for the accent colour and never for a particular indigo, so an\n * application can change what the accent IS without a single component knowing.\n *\n * Almost every entry points at a step of a palette rather than stating a value, by naming\n * it in braces. The values written out here are the LIGHT theme; the dark theme restates\n * the same roles, pointing them elsewhere.\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 the loading silhouettes (VSkeletonLoader); the highlight derives from it in CSS',\n    ),\n\n    'text-on-inverse': color('{color.white}', 'Text set on an inverted surface'),\n\n    text: color('{color.gray.900}'),\n    'text-muted': color('{color.gray.600}'),\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}'),\n    'border-strong': color('{color.gray.300}', 'The borders of form controls'),\n\n    accent: color('{color.indigo.600}'),\n    'accent-hover': color('{color.indigo.700}'),\n    'accent-active': color('{color.indigo.800}'),\n    'accent-surface': color('{color.indigo.50}', 'A tinted accent background (badges, selections)'),\n    'accent-border': color('{color.indigo.200}'),\n    'accent-text': color('{color.indigo.700}', 'Accent text on a neutral or tinted background'),\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.50}'),\n    'danger-border': color('{color.red.200}'),\n    'danger-text': color('{color.red.700}'),\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}'),\n    'success-hover': color('{color.green.800}'),\n    'success-active': color('{color.green.900}'),\n    'success-surface': color('{color.green.50}'),\n    'success-border': color('{color.green.200}'),\n    'success-text': color('{color.green.800}'),\n\n    warning: color('{color.amber.600}'),\n    'warning-hover': color('{color.amber.700}'),\n    'warning-active': color('{color.amber.800}'),\n    'warning-surface': color('{color.amber.50}'),\n    'warning-border': color('{color.amber.200}'),\n    'warning-text': color('{color.amber.900}'),\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 it arrives here through `--vectis-calendar-event-hue`, a per-instance input the\n     * component sets on each card. That is why they are written out rather than aliased to\n     * a palette — there is no palette to point at, only a wheel.\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     * A custom property substitutes at the point it is USED, not where it is declared, so\n     * the hue each card sets is what these resolve against — the trick `VSkeletonLoader`\n     * uses for its highlight.\n     */\n    'event-surface': color(\n      'oklch(0.95 0.045 var(--vectis-calendar-event-hue, 265))',\n      'The face of a calendar event that carries no colour of its own',\n    ),\n    'event-border': color(\n      'oklch(0.85 0.08 var(--vectis-calendar-event-hue, 265))',\n      'The edge of that event, and the bar marking its leading side',\n    ),\n    'event-text': color(\n      'oklch(0.4 0.11 var(--vectis-calendar-event-hue, 265))',\n      'The title written on that face',\n    ),\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 font of all the design system text'),\n    'family-heading': fontFamily(\n      '{font.family.display}',\n      'The font of the display and heading roles; identical to the running font until it is overridden',\n    ),\n    'family-code': fontFamily(\n      '{font.family.mono}',\n      'The font of code content (the code variant, 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    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}'),\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}', 'Colour and border changes on hover, focus, 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('{color.indigo.500}'),\n    'ring-width': dimension('2px'),\n    'ring-offset': dimension('2px'),\n  },\n  control: {\n    'height-xs': dimension('1.5rem'),\n    'height-sm': dimension('2rem'),\n    'height-md': dimension('2.5rem'),\n    'height-lg': dimension('3rem'),\n    'height-xl': dimension('3.5rem'),\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', \"VCheckbox's SVG tick\"),\n    'size-check-dot': dimension('0.5rem', \"VRadio's inner dot\"),\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    '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. Load-bearing in the vertical orientation: a percentage flex-basis has no definite reference on the block axis, and every slide would collapse onto its content without it\",\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 main-axis size 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 (overridable through `height`)',\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-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 VBadge (the pill)'),\n    'size-badge-dot': dimension('0.625rem', 'The diameter of VBadge in dot mode'),\n    'size-avatar-ring': dimension('2px', 'The separating ring of stacked Avatars (VAvatarGroup)'),\n    'size-date-picker-cell': dimension(\n      '2.5rem',\n      'The side (height/width) of a VDatePicker day cell',\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 (≈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(\n      '16rem',\n      \"The diameter of VTimePicker's clock face (the M3 spec)\",\n    ),\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 centre 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-time-input-list-max-block': dimension(\n      '18rem',\n      \"The maximum height of VTimeInput's list panel (the scrolling area)\",\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 that band scrolls instead of growing',\n    ),\n    'size-calendar-now-dot': dimension('0.625rem', \"The dot on VCalendar's current-time line\"),\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', '16px icons'),\n    'size-md': dimension('1.25rem', '20px icons'),\n    'size-lg': dimension('1.5rem', '24px icons'),\n  },\n} satisfies TokenGroup\n"],"mappings":"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"}
+{"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 the loading silhouettes (VSkeletonLoader); the highlight derives from it in CSS',\n    ),\n\n    'text-on-inverse': color('{color.white}', 'Text set on an inverted surface'),\n\n    text: color('{color.gray.900}'),\n    'text-muted': color('{color.gray.600}'),\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}'),\n    'border-strong': color('{color.gray.300}', 'The borders of form controls'),\n\n    accent: color('{color.indigo.600}'),\n    'accent-hover': color('{color.indigo.700}'),\n    'accent-active': color('{color.indigo.800}'),\n    'accent-surface': color('{color.indigo.50}', 'A tinted accent background (badges, selections)'),\n    'accent-border': color('{color.indigo.200}'),\n    'accent-text': color('{color.indigo.700}', 'Accent text on a neutral or tinted background'),\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.50}'),\n    'danger-border': color('{color.red.200}'),\n    'danger-text': color('{color.red.700}'),\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}'),\n    'success-hover': color('{color.green.800}'),\n    'success-active': color('{color.green.900}'),\n    'success-surface': color('{color.green.50}'),\n    'success-border': color('{color.green.200}'),\n    'success-text': color('{color.green.800}'),\n\n    warning: color('{color.amber.600}'),\n    'warning-hover': color('{color.amber.700}'),\n    'warning-active': color('{color.amber.800}'),\n    'warning-surface': color('{color.amber.50}'),\n    'warning-border': color('{color.amber.200}'),\n    'warning-text': color('{color.amber.900}'),\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 it arrives here through `--vectis-calendar-event-hue`, a per-instance input the\n     * component sets on each card. That is why they are written out rather than aliased to\n     * a palette — there is no palette to point at, only a wheel.\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     * A custom property substitutes at the point it is USED, not where it is declared, so\n     * the hue each card sets is what these resolve against — the trick `VSkeletonLoader`\n     * uses for its highlight.\n     */\n    'event-surface': color(\n      'oklch(0.95 0.045 var(--vectis-calendar-event-hue, 265))',\n      'The face of a calendar event that carries no colour of its own',\n    ),\n    'event-border': color(\n      'oklch(0.85 0.08 var(--vectis-calendar-event-hue, 265))',\n      'The edge of that event, and the bar marking its leading side',\n    ),\n    'event-text': color(\n      'oklch(0.4 0.11 var(--vectis-calendar-event-hue, 265))',\n      'The title written on that face',\n    ),\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 font of all the design system text'),\n    'family-heading': fontFamily(\n      '{font.family.display}',\n      'The font of the display and heading roles; identical to the running font until it is overridden',\n    ),\n    'family-code': fontFamily(\n      '{font.family.mono}',\n      'The font of code content (the code variant, 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    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}'),\n    chip: dimension('{radius.interactive}', 'Chips (shape=\"chip\"), follows interactive by default'),\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}', 'Colour and border changes on hover, focus, 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('{color.indigo.500}'),\n    'ring-width': dimension('2px'),\n    'ring-offset': dimension('2px'),\n  },\n  control: {\n    'height-xs': dimension('1.5rem'),\n    'height-sm': dimension('2rem'),\n    'height-md': dimension('2.5rem'),\n    'height-lg': dimension('3rem'),\n    'height-xl': dimension('3.5rem'),\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', \"VCheckbox's SVG tick\"),\n    'size-check-dot': dimension('0.5rem', \"VRadio's inner dot\"),\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. Load-bearing in the vertical orientation: a percentage flex-basis has no definite reference on the block axis, and every slide would collapse onto its content without it\",\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 main-axis size 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 (overridable through `height`)',\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-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 VBadge (the 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 separating ring of stacked Avatars (VAvatarGroup)'),\n    'size-date-picker-cell': dimension(\n      '2.5rem',\n      'The side (height/width) of a VDatePicker day cell',\n    ),\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 (≈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(\n      '16rem',\n      \"The diameter of VTimePicker's clock face (the M3 spec)\",\n    ),\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 centre 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 that band scrolls instead of growing',\n    ),\n    'size-calendar-now-dot': dimension('0.625rem', \"The dot on VCalendar's current-time line\"),\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', '16px icons'),\n    'size-md': dimension('1.25rem', '20px icons'),\n    'size-lg': dimension('1.5rem', '24px icons'),\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.\n *\n * It restates the tokens that describe a ROLE — the page's background, the colour of\n * ordinary text, the accent — and never the palette those roles draw from. The palette is\n * the same in both themes; what changes is which step of it each role points at.\n *\n * Every entry here must correspond to a role that already exists, and the build checks\n * it. A theme is allowed to reassign a role, never to invent one: a token existing in\n * only one theme would leave a 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 var(--vectis-calendar-event-hue, 265))'),\n    'event-border': color('oklch(0.42 0.08 var(--vectis-calendar-event-hue, 265))'),\n    'event-text': color('oklch(0.9 0.06 var(--vectis-calendar-event-hue, 265))'),\n  },\n  focus: {\n    'ring-color': color('{color.indigo.400}'),\n  },\n} satisfies TokenGroup\n"],"mappings":";;AAaA,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,uDAAuD;EAC9E,gBAAgB,EAAM,wDAAwD;EAC9E,cAAc,EAAM,uDAAuD;CAC7E;CACA,OAAO,EACL,cAAc,EAAM,oBAAoB,EAC1C;AACF"}
+{"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 var(--vectis-calendar-event-hue, 265))'),\n    'event-border': color('oklch(0.42 0.08 var(--vectis-calendar-event-hue, 265))'),\n    'event-text': color('oklch(0.9 0.06 var(--vectis-calendar-event-hue, 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,uDAAuD;EAC9E,gBAAgB,EAAM,wDAAwD;EAC9E,cAAc,EAAM,uDAAuD;CAC7E;CACA,OAAO,EACL,cAAc,EAAM,oBAAoB,EAC1C;AACF"}

package/dist/tokens/types.d.ts

@@ -1,21 +1,13 @@
 /**
- * The shape a design token takes in this repository.
+ * 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 is a named decision — this blue, this corner radius, this pause before a
- * tooltip appears — and it is written as a small object holding its value, what KIND of
- * thing it is, and optionally a sentence explaining it. Tokens are gathered in nested
- * groups, which is what gives each of them its full name.
+ * 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.
  *
- * A token may point at another instead of stating a value, by naming it in braces. That
- * is what lets "the colour of a primary button" be defined as "the indigo at step 600"
- * rather than as a colour repeated in twenty places.
- *
- * The format follows the one the W3C's design tokens group has been settling on, which is
- * what makes these files legible to tools other than ours.
- *
- * This is THE source of truth for every visual decision in the library. The stylesheet is
- * generated from it, and the live theming application to come will read and rewrite it
- * directly.
+ * 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.
  */
 export type TokenType = 'color' | 'dimension' | 'fontFamily' | 'fontWeight' | 'number' | 'duration' | 'cubicBezier' | 'shadow';
 export interface DesignToken {

package/dist/tokens/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/tokens/types.ts"],"sourcesContent":["/**\n * The shape a design token takes in this repository.\n *\n * A token is a named decision — this blue, this corner radius, this pause before a\n * tooltip appears — and it is written as a small object holding its value, what KIND of\n * thing it is, and optionally a sentence explaining it. Tokens are gathered in nested\n * groups, which is what gives each of them its full name.\n *\n * A token may point at another instead of stating a value, by naming it in braces. That\n * is what lets \"the colour of a primary button\" be defined as \"the indigo at step 600\"\n * rather than as a colour repeated in twenty places.\n *\n * The format follows the one the W3C's design tokens group has been settling on, which is\n * what makes these files legible to tools other than ours.\n *\n * This is THE source of truth for every visual decision in the library. The stylesheet is\n * generated from it, and the live theming application to come will read and rewrite it\n * 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":";AAwCA,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":["/**\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"}

package/dist/tokens.json

@@ -985,6 +985,11 @@
       "pill": {
         "$type": "dimension",
         "$value": "{radius.full}"
+      },
+      "chip": {
+        "$type": "dimension",
+        "$value": "{radius.interactive}",
+        "$description": "Chips (shape=\"chip\"), follows interactive by default"
       }
     },
     "duration": {
@@ -1069,6 +1074,11 @@
         "$value": "1.25rem",
         "$description": "The height of VSwitch's track"
       },
+      "size-switch-pad": {
+        "$type": "dimension",
+        "$value": "0.125rem",
+        "$description": "The gap between VSwitch's thumb and the edge of its track"
+      },
       "action-size-sm": {
         "$type": "dimension",
         "$value": "1.25rem",
@@ -1164,6 +1174,11 @@
         "$value": "22rem",
         "$description": "The default width of a toast"
       },
+      "size-dialog-width": {
+        "$type": "dimension",
+        "$value": "25rem",
+        "$description": "The default width of VDialog and VDialogAlert (400px), when no `width` is given"
+      },
       "size-snackbar-min": {
         "$type": "dimension",
         "$value": "18rem",
@@ -1184,6 +1199,11 @@
         "$value": "0.625rem",
         "$description": "The diameter of VBadge in dot mode"
       },
+      "size-badge-ring": {
+        "$type": "dimension",
+        "$value": "2px",
+        "$description": "The detaching ring of a bordered VBadge"
+      },
       "size-avatar-ring": {
         "$type": "dimension",
         "$value": "2px",
@@ -1194,6 +1214,11 @@
         "$value": "2.5rem",
         "$description": "The side (height/width) of a VDatePicker day cell"
       },
+      "size-date-picker-day": {
+        "$type": "dimension",
+        "$value": "{control.height.md}",
+        "$description": "The diameter of the disc a VDatePicker day is drawn on; the cell grows to hold it"
+      },
       "size-date-picker-dot": {
         "$type": "dimension",
         "$value": "0.25rem",
@@ -1239,11 +1264,6 @@
         "$value": "1rem",
         "$description": "The dot of VTimePicker's hand on a minute off the 5-minute markers"
       },
-      "size-time-input-list-max-block": {
-        "$type": "dimension",
-        "$value": "18rem",
-        "$description": "The maximum height of VTimeInput's list panel (the scrolling area)"
-      },
       "size-file-picker-min-block": {
         "$type": "dimension",
         "$value": "10rem",

package/dist/types.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+export type ItemValue = string | number;

package/dist/utils/array.d.ts

@@ -1,10 +1,7 @@
 /**
- * Adds a value to a selection or takes it out again, depending on whether it is already
- * there.
+ * Adds a value to a selection, or takes it out again if it is already there.
  *
- * It ALWAYS hands back a new list rather than changing the one it was given. Every
- * multiple-choice value in the design system works this way: it is the arrival of a new
- * list, not a change made inside the old one, that tells the surrounding application
- * something has happened.
+ * 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.
  */
 export declare function toggleValue<T>(list: readonly T[], value: T): T[];

package/dist/utils/array.js.map

@@ -1 +1 @@
-{"version":3,"file":"array.js","names":[],"sources":["../../src/utils/array.ts"],"sourcesContent":["// @core\n/**\n * Adds a value to a selection or takes it out again, depending on whether it is already\n * there.\n *\n * It ALWAYS hands back a new list rather than changing the one it was given. Every\n * multiple-choice value in the design system works this way: it is the arrival of a new\n * list, not a change made inside the old one, that tells the surrounding application\n * something has happened.\n */\nexport function toggleValue<T>(list: readonly T[], value: T): T[] {\n  return list.includes(value) ? list.filter((v) => v !== value) : [...list, value]\n}\n"],"mappings":";AAUA,SAAgB,EAAe,GAAoB,GAAe;CAChE,OAAO,EAAK,SAAS,CAAK,IAAI,EAAK,QAAQ,MAAM,MAAM,CAAK,IAAI,CAAC,GAAG,GAAM,CAAK;AACjF"}
+{"version":3,"file":"array.js","names":[],"sources":["../../src/utils/array.ts"],"sourcesContent":["// @core\n/**\n * Adds a value to a selection, or takes it out again if it is already there.\n *\n * ALWAYS returns a new list rather than mutating the one it was given: it is the new\n * reference, not a change made inside the old list, that wakes a consumer's v-model.\n */\nexport function toggleValue<T>(list: readonly T[], value: T): T[] {\n  return list.includes(value) ? list.filter((v) => v !== value) : [...list, value]\n}\n"],"mappings":";AAOA,SAAgB,EAAe,GAAoB,GAAe;CAChE,OAAO,EAAK,SAAS,CAAK,IAAI,EAAK,QAAQ,MAAM,MAAM,CAAK,IAAI,CAAC,GAAG,GAAM,CAAK;AACjF"}

package/dist/utils/arrowNav.d.ts

@@ -1,27 +1,27 @@
 /**
- * The elements inside a container that the arrows may land on. The selector is the
- * caller's, and it is the one that leaves out anything disabled.
+ * The elements the arrows may land on, discovered from the DOM rather than a registry. The
+ * selector is the caller's, and it is what excludes anything disabled.
  *
- * Anything hidden is dropped here, and it has to be: the pages hide their neighbours as
- * the bar gets narrower, and a consumer may hide a tab or a toggle outright. An element
- * nobody can see must not be given the focus.
+ * `display: none` is filtered here because it has to be: VPagination hides its neighbours
+ * through container queries as the bar narrows, and a consumer may hide a tab outright.
+ * Focus must not land on an element nobody can see. The read costs a style recalculation
+ * per element, which is why `arrowNavigate` asks for the list only once it knows the key is
+ * one it handles.
  */
 export declare function navigableItems(container: HTMLElement, selector: string): HTMLElement[];
 /**
- * Handles the four arrows and the Home and End keys over a list of elements, and moves
- * the focus.
+ * Moves focus for the arrows and Home/End, and reports whether it took the key —
+ * `preventDefault` is applied only when it did, leaving the caller free otherwise.
  *
- * It reports whether it took the key. When it did, the browser's own reaction has already
- * been suppressed; when it did not, the caller is free to do something else with it.
+ * The ends wrap. With nothing in the list focused, any arrow starts at the beginning.
+ * Left and Right name a physical side, so RTL swaps them: Right must reach the NEXT item,
+ * which is then on the left. The block axis needs no such treatment, no language
+ * reversing it.
  *
- * The ends WRAP: past the last element the focus comes back to the first. When nothing in
- * the list has the focus yet, any arrow starts at the beginning.
- *
- * The left and right arrows point at a physical side of the screen, so in a language
- * written right to left they are swapped: pressing right must move towards the NEXT item,
- * which is then to the left. Up and down need no such treatment, since no language
- * reverses them.
+ * `items` is a FUNCTION, called only once the key is known to be one of the four. A keydown
+ * handler on a container sees every key typed inside it (Tab, Enter, letters), and collecting
+ * the list costs a query plus, for most callers, one style read per element.
  */
-export declare function arrowNavigate(event: KeyboardEvent, container: HTMLElement, items: HTMLElement[], options?: {
+export declare function arrowNavigate(event: KeyboardEvent, container: HTMLElement, items: () => HTMLElement[], options?: {
     vertical?: boolean;
 }): boolean;

package/dist/utils/arrowNav.js

@@ -15,10 +15,12 @@ function n(t, n, r, i = {}) {
 		"ArrowLeft",
 		"Home",
 		"End"
-	]).includes(t.key) || r.length === 0) return !1;
+	]).includes(t.key)) return !1;
+	let o = r();
+	if (o.length === 0) return !1;
 	t.preventDefault();
-	let o = () => a ? t.key === "ArrowDown" : t.key === "ArrowRight" !== e(n), s = r.indexOf(document.activeElement);
-	return r[t.key === "Home" ? 0 : t.key === "End" ? r.length - 1 : s === -1 ? 0 : (s + (o() ? 1 : -1) + r.length) % r.length]?.focus(), !0;
+	let s = () => a ? t.key === "ArrowDown" : t.key === "ArrowRight" !== e(n), c = o.indexOf(document.activeElement);
+	return o[t.key === "Home" ? 0 : t.key === "End" ? o.length - 1 : c === -1 ? 0 : (c + (s() ? 1 : -1) + o.length) % o.length]?.focus(), !0;
 }
 //#endregion
 export { n as arrowNavigate, t as navigableItems };

package/dist/utils/arrowNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrowNav.js","names":[],"sources":["../../src/utils/arrowNav.ts"],"sourcesContent":["/**\n * Moving through a row or a column of neighbouring controls with the arrow keys.\n *\n * There is code here because the browser offers nothing that walks the focus from one\n * button to the next: the Tab key steps out of the group entirely, and a group of tabs, a\n * set of pages or a menu is expected to be crossed with the arrows.\n *\n * The rule is the same everywhere in the design system, and it is worth stating plainly:\n * the arrow keys and Home and End MOVE the focus and never act on what they land on.\n * Acting on arrival would navigate somewhere the reader did not ask to go, or turn a\n * value on merely because they passed over it. A component that genuinely wants the\n * arrival to select — a row of tabs can be set up that way — arranges that itself.\n *\n * This is the single place that behaviour is written: the pages, the tabs, the toggle\n * group and the menu all use it.\n */\nimport { isRtl } from './direction'\n\n// @keyboard @a11y\n/**\n * The elements inside a container that the arrows may land on. The selector is the\n * caller's, and it is the one that leaves out anything disabled.\n *\n * Anything hidden is dropped here, and it has to be: the pages hide their neighbours as\n * the bar gets narrower, and a consumer may hide a tab or a toggle outright. An element\n * nobody can see must not be given the focus.\n */\nexport function navigableItems(container: HTMLElement, selector: string): HTMLElement[] {\n  return [...container.querySelectorAll<HTMLElement>(selector)].filter(\n    (el) => getComputedStyle(el).display !== 'none',\n  )\n}\n\n// @keyboard @a11y\n/**\n * Handles the four arrows and the Home and End keys over a list of elements, and moves\n * the focus.\n *\n * It reports whether it took the key. When it did, the browser's own reaction has already\n * been suppressed; when it did not, the caller is free to do something else with it.\n *\n * The ends WRAP: past the last element the focus comes back to the first. When nothing in\n * the list has the focus yet, any arrow starts at the beginning.\n *\n * The left and right arrows point at a physical side of the screen, so in a language\n * written right to left they are swapped: pressing right must move towards the NEXT item,\n * which is then to the left. Up and down need no such treatment, since no language\n * reverses them.\n */\nexport function arrowNavigate(\n  event: KeyboardEvent,\n  container: HTMLElement,\n  items: HTMLElement[],\n  options: { vertical?: boolean } = {},\n): boolean {\n  const vertical = options.vertical ?? false\n  const keys = vertical\n    ? ['ArrowDown', 'ArrowUp', 'Home', 'End']\n    : ['ArrowRight', 'ArrowLeft', 'Home', 'End']\n  if (!keys.includes(event.key)) return false\n  if (items.length === 0) return false\n  event.preventDefault()\n\n  // Only the arrow branch asks which way is forward, and only the horizontal axis needs\n  // the writing direction to answer. Keeping it a function rather than a value is what\n  // spares Home and End the style recalculation that reading the direction forces.\n  const forward = () =>\n    vertical ? event.key === 'ArrowDown' : (event.key === 'ArrowRight') !== isRtl(container)\n  const current = items.indexOf(document.activeElement as HTMLElement)\n  const next =\n    event.key === 'Home'\n      ? 0\n      : event.key === 'End'\n        ? items.length - 1\n        : current === -1\n          ? 0\n          : (current + (forward() ? 1 : -1) + items.length) % items.length\n  items[next]?.focus()\n  return true\n}\n"],"mappings":";;AA2BA,SAAgB,EAAe,GAAwB,GAAiC;CACtF,OAAO,CAAC,GAAG,EAAU,iBAA8B,CAAQ,CAAC,CAAC,CAAC,QAC3D,MAAO,iBAAiB,CAAE,CAAC,CAAC,YAAY,MAC3C;AACF;AAkBA,SAAgB,EACd,GACA,GACA,GACA,IAAkC,CAAC,GAC1B;CACT,IAAM,IAAW,EAAQ,YAAY;CAKrC,IADI,EAHS,IACT;EAAC;EAAa;EAAW;EAAQ;CAAK,IACtC;EAAC;EAAc;EAAa;EAAQ;CAAK,EAAA,CACnC,SAAS,EAAM,GAAG,KACxB,EAAM,WAAW,GAAG,OAAO;CAC/B,EAAM,eAAe;CAKrB,IAAM,UACJ,IAAW,EAAM,QAAQ,cAAe,EAAM,QAAQ,iBAAkB,EAAM,CAAS,GACnF,IAAU,EAAM,QAAQ,SAAS,aAA4B;CAUnE,OADA,EAPE,EAAM,QAAQ,SACV,IACA,EAAM,QAAQ,QACZ,EAAM,SAAS,IACf,MAAY,KACV,KACC,KAAW,EAAQ,IAAI,IAAI,MAAM,EAAM,UAAU,EAAM,OACvD,EAAE,MAAM,GACZ;AACT"}
+{"version":3,"file":"arrowNav.js","names":[],"sources":["../../src/utils/arrowNav.ts"],"sourcesContent":["// @keyboard @a11y — module-wide: the browser walks focus out of a group with Tab, never\n// from one control to the next, which is what the arrows are expected to do.\n/**\n * Arrow-key navigation over a row or column of controls, in one place: VPagination, VTabs,\n * VToggle, VMenuPanel and VSideNavigation all use it.\n *\n * CONTRACT — the arrows and Home/End MOVE focus and never activate what they land on.\n * Activating on arrival would navigate somewhere the reader did not ask to go, or select a\n * value merely passed over. A component that wants selection on focus (VTabs'\n * `activation: 'automatic'`) arranges it in its own `@focus`.\n */\nimport { isRtl } from './direction'\n\n/**\n * The elements the arrows may land on, discovered from the DOM rather than a registry. The\n * selector is the caller's, and it is what excludes anything disabled.\n *\n * `display: none` is filtered here because it has to be: VPagination hides its neighbours\n * through container queries as the bar narrows, and a consumer may hide a tab outright.\n * Focus must not land on an element nobody can see. The read costs a style recalculation\n * per element, which is why `arrowNavigate` asks for the list only once it knows the key is\n * one it handles.\n */\nexport function navigableItems(container: HTMLElement, selector: string): HTMLElement[] {\n  return [...container.querySelectorAll<HTMLElement>(selector)].filter(\n    (el) => getComputedStyle(el).display !== 'none',\n  )\n}\n\n/**\n * Moves focus for the arrows and Home/End, and reports whether it took the key —\n * `preventDefault` is applied only when it did, leaving the caller free otherwise.\n *\n * The ends wrap. With nothing in the list focused, any arrow starts at the beginning.\n * Left and Right name a physical side, so RTL swaps them: Right must reach the NEXT item,\n * which is then on the left. The block axis needs no such treatment, no language\n * reversing it.\n *\n * `items` is a FUNCTION, called only once the key is known to be one of the four. A keydown\n * handler on a container sees every key typed inside it (Tab, Enter, letters), and collecting\n * the list costs a query plus, for most callers, one style read per element.\n */\nexport function arrowNavigate(\n  event: KeyboardEvent,\n  container: HTMLElement,\n  items: () => HTMLElement[],\n  options: { vertical?: boolean } = {},\n): boolean {\n  const vertical = options.vertical ?? false\n  const keys = vertical\n    ? ['ArrowDown', 'ArrowUp', 'Home', 'End']\n    : ['ArrowRight', 'ArrowLeft', 'Home', 'End']\n  if (!keys.includes(event.key)) return false\n  const list = items()\n  if (list.length === 0) return false\n  event.preventDefault()\n\n  // A function, not a value: only the arrow branch asks, so Home and End are spared the\n  // style recalculation that reading the direction forces.\n  const forward = () =>\n    vertical ? event.key === 'ArrowDown' : (event.key === 'ArrowRight') !== isRtl(container)\n  const current = list.indexOf(document.activeElement as HTMLElement)\n  const next =\n    event.key === 'Home'\n      ? 0\n      : event.key === 'End'\n        ? list.length - 1\n        : current === -1\n          ? 0\n          : (current + (forward() ? 1 : -1) + list.length) % list.length\n  list[next]?.focus()\n  return true\n}\n"],"mappings":";;AAuBA,SAAgB,EAAe,GAAwB,GAAiC;CACtF,OAAO,CAAC,GAAG,EAAU,iBAA8B,CAAQ,CAAC,CAAC,CAAC,QAC3D,MAAO,iBAAiB,CAAE,CAAC,CAAC,YAAY,MAC3C;AACF;AAeA,SAAgB,EACd,GACA,GACA,GACA,IAAkC,CAAC,GAC1B;CACT,IAAM,IAAW,EAAQ,YAAY;CAIrC,IAAI,EAHS,IACT;EAAC;EAAa;EAAW;EAAQ;CAAK,IACtC;EAAC;EAAc;EAAa;EAAQ;CAAK,EAAA,CACnC,SAAS,EAAM,GAAG,GAAG,OAAO;CACtC,IAAM,IAAO,EAAM;CACnB,IAAI,EAAK,WAAW,GAAG,OAAO;CAC9B,EAAM,eAAe;CAIrB,IAAM,UACJ,IAAW,EAAM,QAAQ,cAAe,EAAM,QAAQ,iBAAkB,EAAM,CAAS,GACnF,IAAU,EAAK,QAAQ,SAAS,aAA4B;CAUlE,OADA,EAPE,EAAM,QAAQ,SACV,IACA,EAAM,QAAQ,QACZ,EAAK,SAAS,IACd,MAAY,KACV,KACC,KAAW,EAAQ,IAAI,IAAI,MAAM,EAAK,UAAU,EAAK,OACtD,EAAE,MAAM,GACX;AACT"}

package/dist/utils/chip.d.ts

@@ -1,24 +1,20 @@
+import { ChipSize } from '../components/VChip/VChip.js';
 /**
- * How big a chip should be when it sits INSIDE a text field — the selected values in the
- * search field, the chosen files in the file field.
+ * The scale of a VChip rendered INSIDE a text field: VCombobox's values, VFileInput's files.
  *
- * A chip is always one step smaller than the field holding it, so that a row of them fits
- * without pushing the field taller. There are only three field sizes, and the two
- * smallest take the smallest chip while the largest takes the next one up. Below the
- * smallest step of each pair there is no smaller size left, so the extra reduction is
- * asked for as a "compact" chip instead. A medium field already has room to spare, which
- * is why its own compact setting does not reach the chips at all.
+ * A chip is one step below its field, so a row of them does not push the field taller. Below
+ * the lowest step of each pair there is no smaller size left, and `compact` makes up the
+ * difference instead — which is why an `sm` field forces it and an `md` one, already having
+ * room, does not pass its own through.
  *
- * The HEIGHT is what earns this module its existence. The field has to force the text
- * being typed to the same height as the chips beside it, or the natural height of that
- * text exceeds them and the field grows the moment it is focused — but the chips' height
- * is decided inside the chip, out of the field's reach. Deriving it here, from the very
- * same pair of settings that chooses the chip's size, makes the two incapable of drifting
- * apart.
+ * The HEIGHT is what earns the module its place. The field must force its `<input>` to the
+ * chips' height or it grows on focus, and that height is decided inside the VChip subtree,
+ * out of the field's reach. Deriving it from the same pair that picks the size makes the two
+ * incapable of drifting.
  */
 export type ChipFieldSize = 'sm' | 'md' | 'lg';
 export interface ChipScale {
-    size: 'xs' | 'sm';
+    size: ChipSize;
     compact: boolean;
     /** The chips' height, ready to be set on the field so it can match its own text to it. */
     height: string;

package/dist/utils/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","names":[],"sources":["../../src/utils/chip.ts"],"sourcesContent":["// @core\n/**\n * How big a chip should be when it sits INSIDE a text field — the selected values in the\n * search field, the chosen files in the file field.\n *\n * A chip is always one step smaller than the field holding it, so that a row of them fits\n * without pushing the field taller. There are only three field sizes, and the two\n * smallest take the smallest chip while the largest takes the next one up. Below the\n * smallest step of each pair there is no smaller size left, so the extra reduction is\n * asked for as a \"compact\" chip instead. A medium field already has room to spare, which\n * is why its own compact setting does not reach the chips at all.\n *\n * The HEIGHT is what earns this module its existence. The field has to force the text\n * being typed to the same height as the chips beside it, or the natural height of that\n * text exceeds them and the field grows the moment it is focused — but the chips' height\n * is decided inside the chip, out of the field's reach. Deriving it here, from the very\n * same pair of settings that chooses the chip's size, makes the two incapable of drifting\n * apart.\n */\nexport type ChipFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface ChipScale {\n  size: 'xs' | 'sm'\n  compact: boolean\n  /** The chips' height, ready to be set on the field so it can match its own text to it. */\n  height: string\n}\n\nexport function chipScaleFor(size: ChipFieldSize, compact: boolean): ChipScale {\n  const chipSize = size === 'lg' ? 'sm' : 'xs'\n  const chipCompact = size === 'lg' ? compact : size === 'sm'\n  const base = `var(--vectis-control-height-${chipSize})`\n  return {\n    size: chipSize,\n    compact: chipCompact,\n    height: chipCompact ? `calc(${base} - var(--vectis-space-1))` : base,\n  }\n}\n"],"mappings":";AA4BA,SAAgB,EAAa,GAAqB,GAA6B;CAC7E,IAAM,IAAW,MAAS,OAAO,OAAO,MAClC,IAAc,MAAS,OAAO,IAAU,MAAS,MACjD,IAAO,+BAA+B,EAAS;CACrD,OAAO;EACL,MAAM;EACN,SAAS;EACT,QAAQ,IAAc,QAAQ,EAAK,6BAA6B;CAClE;AACF"}
+{"version":3,"file":"chip.js","names":[],"sources":["../../src/utils/chip.ts"],"sourcesContent":["import type { ChipSize } from '../components/VChip/VChip.vue'\n\n// @core\n/**\n * The scale of a VChip rendered INSIDE a text field: VCombobox's values, VFileInput's files.\n *\n * A chip is one step below its field, so a row of them does not push the field taller. Below\n * the lowest step of each pair there is no smaller size left, and `compact` makes up the\n * difference instead — which is why an `sm` field forces it and an `md` one, already having\n * room, does not pass its own through.\n *\n * The HEIGHT is what earns the module its place. The field must force its `<input>` to the\n * chips' height or it grows on focus, and that height is decided inside the VChip subtree,\n * out of the field's reach. Deriving it from the same pair that picks the size makes the two\n * incapable of drifting.\n */\nexport type ChipFieldSize = 'sm' | 'md' | 'lg'\n\nexport interface ChipScale {\n  size: ChipSize\n  compact: boolean\n  /** The chips' height, ready to be set on the field so it can match its own text to it. */\n  height: string\n}\n\nexport function chipScaleFor(size: ChipFieldSize, compact: boolean): ChipScale {\n  const chipSize = size === 'lg' ? 'sm' : 'xs'\n  const chipCompact = size === 'lg' ? compact : size === 'sm'\n  const base = `var(--vectis-control-height-${chipSize})`\n  return {\n    size: chipSize,\n    compact: chipCompact,\n    height: chipCompact ? `calc(${base} - var(--vectis-space-1))` : base,\n  }\n}\n"],"mappings":";AAyBA,SAAgB,EAAa,GAAqB,GAA6B;CAC7E,IAAM,IAAW,MAAS,OAAO,OAAO,MAClC,IAAc,MAAS,OAAO,IAAU,MAAS,MACjD,IAAO,+BAA+B,EAAS;CACrD,OAAO;EACL,MAAM;EACN,SAAS;EACT,QAAQ,IAAc,QAAQ,EAAK,6BAA6B;CAClE;AACF"}

package/dist/utils/css.d.ts

@@ -1,19 +1,30 @@
 /**
- * A dimension that is always expressed in pixels: both the number twelve and the text
- * "12" come out as "12px".
+ * A dimension always in pixels: `12` and `'12'` both give `12px`.
  *
- * Anything that is not a number at all yields nothing rather than a value CSS cannot
- * read. That distinction matters: a nonsensical value would break the geometry outright,
- * where nothing at all simply lets the component's own default apply.
+ * Anything non-numeric yields `undefined` rather than a custom property CSS cannot read —
+ * an invalid value breaks the geometry outright, where nothing at all lets the component's
+ * own default apply.
+ *
+ * TRAP — `Number`, never `parseFloat`: the latter reads a numeric PREFIX, so `'12rem'`
+ * would come out as `12px`, a wrong size with nothing to say so. `Number('')` being 0, a
+ * blank string is refused before it gets there.
  */
 export declare function px(v: number | string | undefined): string | undefined;
 /**
- * A dimension in whatever unit the caller likes: a bare number is read as pixels, and any
- * text goes through untouched — a percentage, a fraction of the window, "as wide as the
- * content".
+ * A dimension in any unit: a bare number is read as pixels, a string passes through
+ * untouched — `50%`, `20vw`, `max-content`.
  *
- * The text is deliberately not examined, unlike the pixels-only version above. CSS is
- * left to judge it, and a value it cannot make sense of falls back to what the component
- * declares for itself.
+ * Unlike `px` above, the string is deliberately not examined: CSS judges it, and one it
+ * cannot parse falls back to whatever the component declares for itself.
  */
 export declare function cssSize(v: number | string | undefined): string | undefined;
+/**
+ * The inline style carrying a consumer's own colour to a component's sheet, which derives
+ * every shade from `--custom-color`: VChip, VAvatar and VBadge.
+ *
+ * `undefined` when no colour was given, so a style array holding it binds nothing and the
+ * tone the sheet already paints stays in force.
+ */
+export declare function customColorStyle(color: string | undefined): {
+    '--custom-color': string;
+} | undefined;

package/dist/utils/css.js

@@ -1,13 +1,16 @@
 //#region src/utils/css.ts
 function e(e) {
 	if (e === void 0) return;
-	let t = typeof e == "number" ? e : Number.parseFloat(e);
+	let t = typeof e == "number" ? e : e.trim() === "" ? NaN : Number(e);
 	return Number.isFinite(t) ? `${t}px` : void 0;
 }
 function t(e) {
 	if (e !== void 0) return typeof e == "number" ? `${e}px` : e;
 }
+function n(e) {
+	return e === void 0 ? void 0 : { "--custom-color": e };
+}
 //#endregion
-export { t as cssSize, e as px };
+export { t as cssSize, n as customColorStyle, e as px };
 
 //# sourceMappingURL=css.js.map

package/dist/utils/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","names":[],"sources":["../../src/utils/css.ts"],"sourcesContent":["// @core\n/**\n * A dimension that is always expressed in pixels: both the number twelve and the text\n * \"12\" come out as \"12px\".\n *\n * Anything that is not a number at all yields nothing rather than a value CSS cannot\n * read. That distinction matters: a nonsensical value would break the geometry outright,\n * where nothing at all simply lets the component's own default apply.\n */\nexport function px(v: number | string | undefined): string | undefined {\n  if (v === undefined) return undefined\n  const n = typeof v === 'number' ? v : Number.parseFloat(v)\n  return Number.isFinite(n) ? `${n}px` : undefined\n}\n\n// @core\n/**\n * A dimension in whatever unit the caller likes: a bare number is read as pixels, and any\n * text goes through untouched — a percentage, a fraction of the window, \"as wide as the\n * content\".\n *\n * The text is deliberately not examined, unlike the pixels-only version above. CSS is\n * left to judge it, and a value it cannot make sense of falls back to what the component\n * declares for itself.\n */\nexport function cssSize(v: number | string | undefined): string | undefined {\n  if (v === undefined) return undefined\n  return typeof v === 'number' ? `${v}px` : v\n}\n"],"mappings":";AASA,SAAgB,EAAG,GAAoD;CACrE,IAAI,MAAM,KAAA,GAAW;CACrB,IAAM,IAAI,OAAO,KAAM,WAAW,IAAI,OAAO,WAAW,CAAC;CACzD,OAAO,OAAO,SAAS,CAAC,IAAI,GAAG,EAAE,MAAM,KAAA;AACzC;AAYA,SAAgB,EAAQ,GAAoD;CACtE,UAAM,KAAA,GACV,OAAO,OAAO,KAAM,WAAW,GAAG,EAAE,MAAM;AAC5C"}
+{"version":3,"file":"css.js","names":[],"sources":["../../src/utils/css.ts"],"sourcesContent":["// @core\n/**\n * A dimension always in pixels: `12` and `'12'` both give `12px`.\n *\n * Anything non-numeric yields `undefined` rather than a custom property CSS cannot read —\n * an invalid value breaks the geometry outright, where nothing at all lets the component's\n * own default apply.\n *\n * TRAP — `Number`, never `parseFloat`: the latter reads a numeric PREFIX, so `'12rem'`\n * would come out as `12px`, a wrong size with nothing to say so. `Number('')` being 0, a\n * blank string is refused before it gets there.\n */\nexport function px(v: number | string | undefined): string | undefined {\n  if (v === undefined) return undefined\n  const n = typeof v === 'number' ? v : v.trim() === '' ? Number.NaN : Number(v)\n  return Number.isFinite(n) ? `${n}px` : undefined\n}\n\n// @core\n/**\n * A dimension in any unit: a bare number is read as pixels, a string passes through\n * untouched — `50%`, `20vw`, `max-content`.\n *\n * Unlike `px` above, the string is deliberately not examined: CSS judges it, and one it\n * cannot parse falls back to whatever the component declares for itself.\n */\nexport function cssSize(v: number | string | undefined): string | undefined {\n  if (v === undefined) return undefined\n  return typeof v === 'number' ? `${v}px` : v\n}\n\n// @core\n/**\n * The inline style carrying a consumer's own colour to a component's sheet, which derives\n * every shade from `--custom-color`: VChip, VAvatar and VBadge.\n *\n * `undefined` when no colour was given, so a style array holding it binds nothing and the\n * tone the sheet already paints stays in force.\n */\nexport function customColorStyle(\n  color: string | undefined,\n): { '--custom-color': string } | undefined {\n  return color === undefined ? undefined : { '--custom-color': color }\n}\n"],"mappings":";AAYA,SAAgB,EAAG,GAAoD;CACrE,IAAI,MAAM,KAAA,GAAW;CACrB,IAAM,IAAI,OAAO,KAAM,WAAW,IAAI,EAAE,KAAK,MAAM,KAAK,MAAa,OAAO,CAAC;CAC7E,OAAO,OAAO,SAAS,CAAC,IAAI,GAAG,EAAE,MAAM,KAAA;AACzC;AAUA,SAAgB,EAAQ,GAAoD;CACtE,UAAM,KAAA,GACV,OAAO,OAAO,KAAM,WAAW,GAAG,EAAE,MAAM;AAC5C;AAUA,SAAgB,EACd,GAC0C;CAC1C,OAAO,MAAU,KAAA,IAAY,KAAA,IAAY,EAAE,kBAAkB,EAAM;AACrE"}