npm - vectis-ui - Versions diffs - 0.9.1 → 0.10.1 - Mend

vectis-ui 0.9.1 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/tokens/semantic.js.map CHANGED Viewed

	@@ -1 +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 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":";;AAaA,IAAa,IAAW;CACtB,OAAO;EACL,SAAS,EAAM,iBAAiB,6BAA6B;EAC7D,iBAAiB,EAAM,oBAAoB,sCAAsC;EACjF,kBAAkB,EAAM,iBAAiB,wBAAwB;EACjE,mBAAmB,EAAM,iBAAiB,6CAA6C;EACvF,kBAAkB,EAAM,mBAAmB,oCAAoC;EAC/E,mBAAmB,EAAM,oBAAoB,sCAAsC;EACnF,oBAAoB,EAClB,oBACA,sFACF;EAEA,mBAAmB,EAAM,iBAAiB,iCAAiC;EAE3E,MAAM,EAAM,oBAAoB,mCAAmC;EACnE,cAAc,EACZ,oBACA,4DACF;EACA,eAAe,EAAM,oBAAoB,6BAA6B;EACtE,kBAAkB,EAAM,iBAAiB,iDAAiD;EAC1F,mBAAmB,EACjB,oBACA,oEACF;EAEA,QAAQ,EAAM,oBAAoB,sDAAsD;EACxF,iBAAiB,EAAM,oBAAoB,8BAA8B;EAEzE,QAAQ,EACN,sBACA,qEACF;EACA,gBAAgB,EAAM,sBAAsB,oCAAoC;EAChF,iBAAiB,EAAM,sBAAsB,gCAAgC;EAC7E,kBAAkB,EAAM,qBAAqB,iDAAiD;EAC9F,iBAAiB,EACf,sBACA,oEACF;EACA,eAAe,EAAM,sBAAsB,+CAA+C;EAE1F,QAAQ,EAAM,mBAAmB,6DAA6D;EAC9F,gBAAgB,EAAM,mBAAmB,oCAAoC;EAC7E,iBAAiB,EAAM,mBAAmB,gCAAgC;EAC1E,kBAAkB,EAChB,kBACA,8EACF;EACA,iBAAiB,EACf,mBACA,oEACF;EACA,eAAe,EACb,mBACA,wFACF;EAWA,SAAS,EAAM,qBAAqB,wDAAwD;EAC5F,iBAAiB,EAAM,qBAAqB,qCAAqC;EACjF,kBAAkB,EAAM,qBAAqB,iCAAiC;EAC9E,mBAAmB,EACjB,oBACA,iEACF;EACA,kBAAkB,EAChB,qBACA,sEACF;EACA,gBAAgB,EAAM,qBAAqB,gDAAgD;EAE3F,SAAS,EACP,qBACA,0EACF;EACA,iBAAiB,EAAM,qBAAqB,qCAAqC;EACjF,kBAAkB,EAAM,qBAAqB,iCAAiC;EAC9E,mBAAmB,EACjB,oBACA,iEACF;EACA,kBAAkB,EAChB,qBACA,sEACF;EACA,gBAAgB,EAAM,qBAAqB,gDAAgD;EAE3F,UAAU,EAAM,wBAAwB,+BAA+B;EAyBvE,iBAAiB,EACf,yBACA,+DACF;EACA,gBAAgB,EACd,wBACA,uEACF;EACA,cAAc,EAAM,uBAAuB,kCAAkC;CAC/E;CAUA,MAAM;EACJ,QAAQ,EAAW,sBAAsB,qCAAqC;EAC9E,kBAAkB,EAChB,yBACA,oFACF;EACA,eAAe,EACb,sBACA,qDACF;EACA,SAAS;GACP,MAAM,EAAU,iBAAiB;GACjC,QAAQ,EAAW,oBAAoB;GACvC,SAAS,EAAU,qBAAqB;GACxC,UAAU,EAAU,uBAAuB;EAC7C;EACA,aAAa;GACX,MAAM,EAAU,iBAAiB;GACjC,QAAQ,EAAW,oBAAoB;GACvC,SAAS,EAAU,sBAAsB;GACzC,UAAU,EAAU,uBAAuB;EAC7C;EACA,aAAa;GACX,MAAM,EAAU,iBAAiB;GACjC,QAAQ,EAAW,wBAAwB;GAC3C,SAAS,EAAU,sBAAsB;GACzC,UAAU,EAAU,uBAAuB;EAC7C;EACA,aAAa;GACX,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,wBAAwB;GAC3C,SAAS,EAAU,qBAAqB;EAC1C;EACA,aAAa;GACX,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,wBAAwB;GAC3C,SAAS,EAAU,qBAAqB;EAC1C;EACA,UAAU;GACR,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,uBAAuB;EAC5C;EAQA,WAAW;GACT,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,wBAAwB;EAC7C;EACA,WAAW;GACT,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,wBAAwB;EAC7C;EACA,WAAW;GACT,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,uBAAuB;EAC5C;EACA,WAAW;GACT,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,uBAAuB;EAC5C;EACA,OAAO;GACL,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,sBAAsB;GACzC,SAAS,EAAU,qBAAqB;EAC1C;EACA,SAAS;GACP,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,qBAAqB;EAC1C;EACA,UAAU;GACR,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,sBAAsB;GACzC,SAAS,EAAU,qBAAqB;GACxC,UAAU,EAAU,sBAAsB;EAC5C;EACA,MAAM;GACJ,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,uBAAuB;EAC5C;EAMA,SAAS;GACP,QAAQ,EAAW,sBAAsB;GACzC,SAAS,EAAU,qBAAqB;EAC1C;CACF;CACA,QAAQ;EACN,aAAa,EAAU,eAAe,2BAA2B;EACjE,SAAS,EAAU,eAAe,eAAe;EACjD,SAAS,EAAU,eAAe,0BAA0B;EAC5D,MAAM,EAAU,iBAAiB,oDAAoD;EACrF,MAAM,EACJ,wBACA,2EACF;CACF;CAQA,UAAU;EACR,MAAM,EAAS,kBAAkB,oDAAoD;EACrF,MAAM,EAAS,kBAAkB,8CAA8C;EAC/E,MAAM,EAAS,kBAAkB,kDAAkD;CACrF;CACA,OAAO;EACL,cAAc,EACZ,sBACA,kEACF;EACA,cAAc,EAAU,OAAO,iCAAiC;EAChE,eAAe,EAAU,OAAO,8CAA8C;CAChF;CACA,SAAS;EACP,aAAa,EACX,UACA,0EACF;EACA,aAAa,EACX,QACA,0EACF;EACA,aAAa,EACX,UACA,0EACF;EACA,aAAa,EACX,QACA,0EACF;EACA,aAAa,EACX,UACA,0EACF;EACA,gBAAgB,EAAU,OAAO,sDAAsD;EACvF,cAAc,EAAU,WAAW,mDAAmD;EACtF,mBAAmB,EAAU,YAAY,iCAAiC;EAC1E,kBAAkB,EAAU,UAAU,gCAAgC;EACtE,iBAAiB,EAAU,UAAU,8BAA8B;EACnE,iBAAiB,EAAU,WAAW,+BAA+B;EACrE,mBAAmB,EACjB,YACA,2DACF;EACA,kBAAkB,EAChB,WACA,gEACF;EACA,kBAAkB,EAChB,UACA,gEACF;EACA,kBAAkB,EAChB,WACA,gEACF;EACA,qBAAqB,EAAU,YAAY,kCAAkC;EAC7E,qBAAqB,EAAU,WAAW,iCAAiC;EAC3E,sBAAsB,EAAU,SAAS,0CAA0C;EACnF,qBAAqB,EAAU,QAAQ,sCAAsC;EAC7E,uBAAuB,EACrB,SACA,uGACF;EACA,2BAA2B,EACzB,YACA,gGACF;EACA,kCAAkC,EAChC,WACA,sFACF;EACA,gCAAgC,EAC9B,SACA,mEACF;EACA,iBAAiB,EAAU,SAAS,oCAAoC;EACxE,iBAAiB,EAAU,SAAS,oCAAoC;EACxE,kCAAkC,EAChC,WACA,sDACF;EACA,+BAA+B,EAC7B,SACA,0FACF;EACA,mCAAmC,EACjC,QACA,2CACF;EACA,oCAAoC,EAClC,WACA,yDACF;EACA,yBAAyB,EACvB,QACA,iFACF;EACA,oBAAoB,EAAU,SAAS,8BAA8B;EACrE,oBAAoB,EAAU,SAAS,oDAAoD;EAC3F,qBAAqB,EACnB,SACA,iFACF;EACA,qBAAqB,EAAU,SAAS,yCAAyC;EACjF,qBAAqB,EAAU,SAAS,yCAAyC;EACjF,gBAAgB,EAAU,WAAW,6BAA6B;EAClE,kBAAkB,EAAU,YAAY,oCAAoC;EAC5E,mBAAmB,EAAU,OAAO,yCAAyC;EAC7E,oBAAoB,EAAU,OAAO,oDAAoD;EACzF,yBAAyB,EAAU,UAAU,oCAAoC;EACjF,wBAAwB,EACtB,uBACA,mFACF;EACA,wBAAwB,EAAU,WAAW,yCAAyC;EACtF,4BAA4B,EAC1B,YACA,2EACF;EACA,sBAAsB,EACpB,OACA,kEACF;EACA,qBAAqB,EAAU,SAAS,wCAAwC;EAChF,yBAAyB,EAAU,SAAS,0CAA0C;EACtF,2BAA2B,EACzB,QACA,sEACF;EACA,2BAA2B,EAAU,UAAU,sCAAsC;EACrF,yBAAyB,EAAU,OAAO,iDAAiD;EAC3F,+BAA+B,EAC7B,QACA,oEACF;EACA,8BAA8B,EAC5B,SACA,sFACF;EACA,yBAAyB,EACvB,UACA,sDACF;EACA,0BAA0B,EACxB,UACA,gFACF;EAQA,sBAAsB,EAAU,QAAQ,iDAAiD;EACzF,wBAAwB,EACtB,UACA,kHACF;EACA,sBAAsB,EACpB,YACA,uFACF;EAQA,sBAAsB,EACpB,QACA,yFACF;EACA,yBAAyB,EACvB,QACA,gFACF;EACA,wBAAwB,EACtB,UACA,2EACF;EACA,6BAA6B,EAAU,UAAU,sCAAsC;EACvF,4BAA4B,EAC1B,QACA,2EACF;EACA,yBAAyB,EAAU,YAAY,0CAA0C;EACzF,4BAA4B,EAC1B,OACA,6DACF;EACA,qBAAqB,EACnB,YACA,yFACF;EACA,sBAAsB,EACpB,QACA,iEACF;EACA,gCAAgC,EAC9B,OACA,oFACF;EACA,4BAA4B,EAC1B,SACA,kFACF;EAOA,4BAA4B,EAC1B,UACA,uDACF;EACA,2BAA2B,EACzB,UACA,sEACF;CACF;CACA,MAAM;EACJ,WAAW,EAAU,QAAQ,qCAAqC;EAClE,WAAW,EAAU,WAAW,4CAA4C;EAC5E,WAAW,EAAU,UAAU,4CAA4C;CAC7E;AACF"}
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":";;AAaA,IAAa,IAAW;CACtB,OAAO;EACL,SAAS,EAAM,iBAAiB,6BAA6B;EAC7D,iBAAiB,EAAM,oBAAoB,sCAAsC;EACjF,kBAAkB,EAAM,iBAAiB,wBAAwB;EACjE,mBAAmB,EAAM,iBAAiB,6CAA6C;EACvF,kBAAkB,EAAM,mBAAmB,oCAAoC;EAC/E,mBAAmB,EAAM,oBAAoB,sCAAsC;EACnF,oBAAoB,EAClB,oBACA,sFACF;EAEA,mBAAmB,EAAM,iBAAiB,iCAAiC;EAE3E,MAAM,EAAM,oBAAoB,mCAAmC;EACnE,cAAc,EACZ,oBACA,4DACF;EACA,eAAe,EAAM,oBAAoB,6BAA6B;EACtE,kBAAkB,EAAM,iBAAiB,iDAAiD;EAC1F,mBAAmB,EACjB,oBACA,oEACF;EAEA,QAAQ,EAAM,oBAAoB,sDAAsD;EACxF,iBAAiB,EAAM,oBAAoB,8BAA8B;EAEzE,QAAQ,EACN,sBACA,qEACF;EACA,gBAAgB,EAAM,sBAAsB,oCAAoC;EAChF,iBAAiB,EAAM,sBAAsB,gCAAgC;EAC7E,kBAAkB,EAAM,qBAAqB,iDAAiD;EAC9F,iBAAiB,EACf,sBACA,oEACF;EACA,eAAe,EAAM,sBAAsB,+CAA+C;EAE1F,QAAQ,EAAM,mBAAmB,6DAA6D;EAC9F,gBAAgB,EAAM,mBAAmB,oCAAoC;EAC7E,iBAAiB,EAAM,mBAAmB,gCAAgC;EAC1E,kBAAkB,EAChB,kBACA,8EACF;EACA,iBAAiB,EACf,mBACA,oEACF;EACA,eAAe,EACb,mBACA,wFACF;EAWA,SAAS,EAAM,qBAAqB,wDAAwD;EAC5F,iBAAiB,EAAM,qBAAqB,qCAAqC;EACjF,kBAAkB,EAAM,qBAAqB,iCAAiC;EAC9E,mBAAmB,EACjB,oBACA,iEACF;EACA,kBAAkB,EAChB,qBACA,sEACF;EACA,gBAAgB,EAAM,qBAAqB,gDAAgD;EAE3F,SAAS,EACP,qBACA,0EACF;EACA,iBAAiB,EAAM,qBAAqB,qCAAqC;EACjF,kBAAkB,EAAM,qBAAqB,iCAAiC;EAC9E,mBAAmB,EACjB,oBACA,iEACF;EACA,kBAAkB,EAChB,qBACA,sEACF;EACA,gBAAgB,EAAM,qBAAqB,gDAAgD;EAE3F,UAAU,EAAM,wBAAwB,+BAA+B;EAyBvE,iBAAiB,EACf,yBACA,+DACF;EACA,gBAAgB,EACd,wBACA,uEACF;EACA,cAAc,EAAM,uBAAuB,kCAAkC;CAC/E;CAUA,MAAM;EACJ,QAAQ,EAAW,sBAAsB,qCAAqC;EAC9E,kBAAkB,EAChB,yBACA,oFACF;EACA,eAAe,EACb,sBACA,qDACF;EACA,SAAS;GACP,MAAM,EAAU,iBAAiB;GACjC,QAAQ,EAAW,oBAAoB;GACvC,SAAS,EAAU,qBAAqB;GACxC,UAAU,EAAU,uBAAuB;EAC7C;EACA,aAAa;GACX,MAAM,EAAU,iBAAiB;GACjC,QAAQ,EAAW,oBAAoB;GACvC,SAAS,EAAU,sBAAsB;GACzC,UAAU,EAAU,uBAAuB;EAC7C;EACA,aAAa;GACX,MAAM,EAAU,iBAAiB;GACjC,QAAQ,EAAW,wBAAwB;GAC3C,SAAS,EAAU,sBAAsB;GACzC,UAAU,EAAU,uBAAuB;EAC7C;EACA,aAAa;GACX,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,wBAAwB;GAC3C,SAAS,EAAU,qBAAqB;EAC1C;EACA,aAAa;GACX,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,wBAAwB;GAC3C,SAAS,EAAU,qBAAqB;EAC1C;EACA,UAAU;GACR,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,uBAAuB;EAC5C;EAQA,WAAW;GACT,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,wBAAwB;EAC7C;EACA,WAAW;GACT,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,wBAAwB;EAC7C;EACA,WAAW;GACT,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,uBAAuB;EAC5C;EACA,WAAW;GACT,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,uBAAuB;EAC5C;EACA,OAAO;GACL,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,sBAAsB;GACzC,SAAS,EAAU,qBAAqB;EAC1C;EAQA,QAAQ;GACN,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,qBAAqB;EAC1C;EACA,SAAS;GACP,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,qBAAqB;EAC1C;EACA,UAAU;GACR,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,sBAAsB;GACzC,SAAS,EAAU,qBAAqB;GACxC,UAAU,EAAU,sBAAsB;EAC5C;EACA,MAAM;GACJ,MAAM,EAAU,gBAAgB;GAChC,QAAQ,EAAW,uBAAuB;GAC1C,SAAS,EAAU,uBAAuB;EAC5C;EAMA,SAAS;GACP,QAAQ,EAAW,sBAAsB;GACzC,SAAS,EAAU,qBAAqB;EAC1C;CACF;CACA,QAAQ;EACN,aAAa,EAAU,eAAe,2BAA2B;EACjE,SAAS,EAAU,eAAe,eAAe;EACjD,SAAS,EAAU,eAAe,0BAA0B;EAC5D,MAAM,EAAU,iBAAiB,oDAAoD;EACrF,MAAM,EACJ,wBACA,2EACF;CACF;CAQA,UAAU;EACR,MAAM,EAAS,kBAAkB,oDAAoD;EACrF,MAAM,EAAS,kBAAkB,8CAA8C;EAC/E,MAAM,EAAS,kBAAkB,kDAAkD;CACrF;CACA,OAAO;EACL,cAAc,EACZ,sBACA,kEACF;EACA,cAAc,EAAU,OAAO,iCAAiC;EAChE,eAAe,EAAU,OAAO,8CAA8C;CAChF;CACA,SAAS;EACP,aAAa,EACX,UACA,0EACF;EACA,aAAa,EACX,QACA,0EACF;EACA,aAAa,EACX,UACA,0EACF;EACA,aAAa,EACX,QACA,0EACF;EACA,aAAa,EACX,UACA,0EACF;EACA,gBAAgB,EAAU,OAAO,sDAAsD;EACvF,cAAc,EAAU,WAAW,mDAAmD;EACtF,mBAAmB,EAAU,YAAY,iCAAiC;EAC1E,kBAAkB,EAAU,UAAU,gCAAgC;EACtE,iBAAiB,EAAU,UAAU,8BAA8B;EACnE,iBAAiB,EAAU,WAAW,+BAA+B;EACrE,mBAAmB,EACjB,YACA,2DACF;EACA,kBAAkB,EAChB,WACA,gEACF;EACA,kBAAkB,EAChB,UACA,gEACF;EACA,kBAAkB,EAChB,WACA,gEACF;EACA,qBAAqB,EAAU,YAAY,kCAAkC;EAC7E,qBAAqB,EAAU,WAAW,iCAAiC;EAC3E,sBAAsB,EAAU,SAAS,0CAA0C;EACnF,qBAAqB,EAAU,QAAQ,sCAAsC;EAC7E,uBAAuB,EACrB,SACA,uGACF;EACA,2BAA2B,EACzB,YACA,gGACF;EACA,kCAAkC,EAChC,WACA,sFACF;EACA,gCAAgC,EAC9B,SACA,mEACF;EACA,iBAAiB,EAAU,SAAS,oCAAoC;EACxE,iBAAiB,EAAU,SAAS,oCAAoC;EACxE,kCAAkC,EAChC,WACA,sDACF;EACA,+BAA+B,EAC7B,SACA,0FACF;EACA,mCAAmC,EACjC,QACA,2CACF;EACA,oCAAoC,EAClC,WACA,yDACF;EACA,yBAAyB,EACvB,QACA,iFACF;EACA,oBAAoB,EAAU,SAAS,8BAA8B;EACrE,oBAAoB,EAAU,SAAS,oDAAoD;EAC3F,qBAAqB,EACnB,SACA,iFACF;EACA,qBAAqB,EAAU,SAAS,yCAAyC;EACjF,qBAAqB,EAAU,SAAS,yCAAyC;EACjF,gBAAgB,EAAU,WAAW,6BAA6B;EAClE,kBAAkB,EAAU,YAAY,oCAAoC;EAC5E,mBAAmB,EAAU,OAAO,yCAAyC;EAC7E,oBAAoB,EAAU,OAAO,oDAAoD;EACzF,yBAAyB,EAAU,UAAU,oCAAoC;EACjF,wBAAwB,EACtB,uBACA,mFACF;EACA,wBAAwB,EAAU,WAAW,yCAAyC;EACtF,4BAA4B,EAC1B,YACA,2EACF;EACA,sBAAsB,EACpB,OACA,kEACF;EACA,qBAAqB,EAAU,SAAS,wCAAwC;EAChF,yBAAyB,EAAU,SAAS,0CAA0C;EACtF,2BAA2B,EACzB,QACA,sEACF;EACA,2BAA2B,EAAU,UAAU,sCAAsC;EACrF,yBAAyB,EAAU,OAAO,iDAAiD;EAC3F,+BAA+B,EAC7B,QACA,oEACF;EACA,8BAA8B,EAC5B,SACA,sFACF;EACA,yBAAyB,EACvB,UACA,sDACF;EACA,0BAA0B,EACxB,UACA,gFACF;EAQA,sBAAsB,EAAU,QAAQ,iDAAiD;EACzF,wBAAwB,EACtB,UACA,kHACF;EACA,sBAAsB,EACpB,YACA,uFACF;EAQA,sBAAsB,EACpB,QACA,yFACF;EACA,yBAAyB,EACvB,QACA,gFACF;EACA,wBAAwB,EACtB,UACA,2EACF;EACA,6BAA6B,EAAU,UAAU,sCAAsC;EACvF,4BAA4B,EAC1B,QACA,2EACF;EACA,yBAAyB,EAAU,YAAY,0CAA0C;EACzF,4BAA4B,EAC1B,OACA,6DACF;EACA,qBAAqB,EACnB,YACA,yFACF;EACA,sBAAsB,EACpB,QACA,iEACF;EACA,gCAAgC,EAC9B,OACA,oFACF;EACA,4BAA4B,EAC1B,SACA,kFACF;EAOA,4BAA4B,EAC1B,UACA,uDACF;EACA,2BAA2B,EACzB,UACA,sEACF;CACF;CACA,MAAM;EACJ,WAAW,EAAU,QAAQ,qCAAqC;EAClE,WAAW,EAAU,WAAW,4CAA4C;EAC5E,WAAW,EAAU,UAAU,4CAA4C;CAC7E;AACF"}

package/dist/tokens.json CHANGED Viewed

@@ -934,6 +934,20 @@
           "$value": "{font.leading.snug}"
         }
       },
+      "choice": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.sm}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.regular}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.snug}"
+        }
+      },
       "caption": {
         "size": {
           "$type": "dimension",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vectis-ui",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "description": "Vue 3 design system — HTML/CSS first, CSS tokens, Nuxt 3 (SSR) compatible",
   "type": "module",
   "license": "MIT",