vectis-ui 0.12.0 → 0.13.0

package/dist/tokens/semantic.js

@@ -17,6 +17,7 @@ var a = {
 		"text-on-warning": e("{color.gray.950}", "Text set on a solid warning background (amber too light for white)"),
 		border: e("{color.gray.200}", "Dividers, and the frames of cards, tables and panels"),
 		"border-strong": e("{color.gray.300}", "The borders of form controls"),
+		"border-on-fill": e("oklch(0% 0 0 / 0.12)", "A veil edging or dividing a filled background: VButtonGroup seams, VColorPicker swatches"),
 		accent: e("{color.indigo.600}", "The brand color: solid buttons, checked controls, the selected item"),
 		"accent-hover": e("{color.indigo.700}", "The accent color under the pointer"),
 		"accent-active": e("{color.indigo.800}", "The accent color while pressed"),
@@ -175,27 +176,68 @@ var a = {
 		"size-carousel-indicator": t("0.625rem", "The diameter of a VCarousel indicator dot (its hit area comes from --vectis-control-height-xs)"),
 		"size-carousel-indicator-active": t("1.25rem", "The length of the active VCarousel indicator, which stretches from a dot into a pill"),
 		"size-combobox-list-max-block": t("18rem", "The maximum height of VCombobox's list panel (the scrolling area)"),
+		"size-select-list-max-block": t("18rem", "The maximum height of VSelect's list panel (the scrolling area)"),
 		"size-menu-min": t("11rem", "The minimum width of VMenu's panel"),
 		"size-menu-max": t("20rem", "The maximum width of VMenu's panel"),
 		"size-progress-linear-thickness": t("0.25rem", "The default thickness of VProgressLinear's bar (4px)"),
 		"size-progress-linear-length": t("10rem", "The default length of a vertical VProgressLinear, which a height set on the bar replaces"),
+		"size-meter-thickness-sm": t("0.25rem", "The thickness of a small VMeter (4px)"),
+		"size-meter-thickness-md": t("0.5rem", "The thickness of a medium VMeter (8px)"),
+		"size-meter-thickness-lg": t("0.75rem", "The thickness of a large VMeter (12px)"),
+		"size-meter-segment-gap": t("0.125rem", "The gap between two VMeter segments (2px)"),
 		"size-progress-circular-diameter": t("3rem", "The default diameter of VProgressCircular"),
 		"size-progress-circular-thickness": t("0.25rem", "The default stroke thickness of VProgressCircular (4px)"),
 		"size-skeleton-surface": t("6rem", "The default height of a surface-shaped VSkeletonLoader: a card, an image (96px)"),
+		"size-resizable-hit": t("0.75rem", "The width of the strip around a VResizable handle that catches the pointer (12px)"),
+		"size-resizable-grip-length": t("1.5rem", "The length of the grip VResizable draws on its handles under `grip` (24px)"),
+		"size-resizable-grip-thickness": t("0.5rem", "The thickness of the grip VResizable draws on its handles under `grip` (8px)"),
 		"size-toast-width": t("22rem", "The default width of a toast"),
 		"size-tooltip-max": t("18rem", "The widest a tooltip grows before it wraps (288px)"),
+		"size-hover-card-max": t("20rem", "The widest a VHoverCard grows (320px)"),
 		"size-dialog-width": t("25rem", "The default width of VDialog and VDialogAlert (400px), when no `width` is given"),
+		"size-command-palette-width": t("40rem", "The default width of VCommandPalette (640px), when no `width` is given"),
+		"size-command-palette-list-max-block": t("20rem", "The tallest VCommandPalette's list of commands grows before it scrolls (320px)"),
+		"size-command-palette-offset": t("6rem", "The distance from the top of the viewport to VCommandPalette, which keeps its search field still as the list changes height (96px)"),
+		"size-stepper-indicator": t("2rem", "The diameter of the circle holding a VStepper step number (32px)"),
+		"size-stepper-connector-min": t("1.5rem", "The shortest a horizontal VStepper connector gets between two steps (24px)"),
+		"size-timeline-dot-sm": t("0.5rem", "The dot marking an event of a small VTimeline (8px)"),
+		"size-timeline-dot-md": t("0.625rem", "The dot marking an event of a VTimeline (10px)"),
+		"size-timeline-icon-sm": t("1.5rem", "The round badge holding the icon of an event in a small VTimeline (24px)"),
+		"size-timeline-icon-md": t("2rem", "The round badge holding the icon of an event in a VTimeline (32px)"),
+		"size-timeline-item-min": t("12rem", "The narrowest an event of a horizontal VTimeline gets before the list scrolls (192px)"),
+		"size-rating-sm": t("1.25rem", "The icon of a small VRating (20px)"),
+		"size-rating-md": t("1.5rem", "The icon of a medium VRating (24px)"),
+		"size-rating-lg": t("2rem", "The icon of a large VRating (32px)"),
+		"size-drawer-sm": t("20rem", "The width of a small VDrawer on a side, or the height of one at the top or bottom (320px)"),
+		"size-drawer-md": t("25rem", "The width of a medium VDrawer on a side, or the height of one at the top or bottom (400px)"),
+		"size-drawer-lg": t("35rem", "The width of a large VDrawer on a side, or the height of one at the top or bottom (560px)"),
 		"size-snackbar-min": t("18rem", "The minimum width of a snackbar (288px)"),
 		"size-snackbar-max": t("36rem", "The maximum width of a snackbar (576px)"),
+		"size-card-media": t("12rem", "The width a horizontal VCard gives its media before the content wraps under it (192px)"),
+		"size-card-body-min": t("16rem", "The narrowest content of a horizontal VCard: below it, the media moves above the content"),
+		"size-empty-state-media-sm": t("2.5rem", "The diameter of the icon badge of a small VEmptyState (40px)"),
+		"size-empty-state-media-md": t("3rem", "The diameter of the icon badge of a medium VEmptyState (48px)"),
+		"size-empty-state-media-lg": t("4rem", "The diameter of the icon badge of a large VEmptyState (64px)"),
+		"size-empty-state-text-max": t("28rem", "The widest the title and description of a VEmptyState run before they wrap (448px)"),
+		"size-field-label": t("10rem", "The width of a VField label placed beside its control, before the control wraps under it (160px)"),
+		"size-field-control-min": t("16rem", "The narrowest control of a VField with a side label: below it, the label moves above the control"),
 		"size-badge-h": t("1.25rem", "The height of a VBadge pill"),
 		"size-badge-dot": t("0.625rem", "The diameter of VBadge in dot mode"),
 		"size-badge-ring": t("2px", "The detaching ring of a bordered VBadge"),
 		"size-avatar-ring": t("2px", "The ring separating stacked avatars (VAvatarGroup)"),
+		"size-color-picker-width": t("16rem", "The width of VColorPicker (256px)"),
+		"size-color-picker-area": t("10rem", "The height of VColorPicker's saturation and brightness area (160px)"),
+		"size-color-picker-track": t("0.75rem", "The thickness of VColorPicker's hue and opacity tracks (12px)"),
+		"size-color-picker-thumb": t("1.25rem", "The diameter of VColorPicker's thumbs, on the area and the tracks (20px)"),
+		"size-color-picker-preview": t("2rem", "The disc showing the current colour in VColorPicker (32px)"),
+		"size-color-picker-format": t("6rem", "The width of VColorPicker's format menu, which holds its longest name (96px)"),
+		"size-color-picker-swatch": t("1.5rem", "The side of a VColorPicker swatch (24px)"),
+		"size-color-picker-checker": t("0.5rem", "The side of the checkerboard showing through a translucent colour (8px)"),
 		"size-date-picker-cell": t("2.5rem", "The side of a VDatePicker day cell"),
 		"size-date-picker-day": t("{control.height.md}", "The diameter of the disc a VDatePicker day is drawn on; the cell grows to hold it"),
 		"size-date-picker-dot": t("0.25rem", "The diameter of a VDatePicker event dot"),
 		"size-date-picker-nav-min": t("5.375rem", "The minimum width of VDatePicker's month/year picker buttons (about 86px)"),
-		"size-tab-indicator": t("2px", "The thickness of the active tab indicator (VTabs, flat/outlined)"),
+		"size-tab-indicator": t("2px", "The thickness of the active tab indicator (VTabs, every variant but inset)"),
 		"size-table-search": t("16rem", "The width of VDataTable's search field"),
 		"size-time-picker-dial": t("16rem", "The diameter of VTimePicker's clock face"),
 		"size-time-picker-number": t("3rem", "A numeral cell on VTimePicker's face, and the hand's dot on a marker"),

package/dist/tokens/semantic.js.map

@@ -1 +1 @@
-{"version":3,"file":"semantic.js","names":[],"sources":["../../src/tokens/semantic.ts"],"sourcesContent":["/**\n * Semantic roles alias primitives; components depend on these roles so applications can theme\n * without rewriting component CSS.\n */\nimport { color, dimension, duration, fontFamily, fontWeight, type TokenGroup } from './types'\n\nexport const semantic = {\n  color: {\n    surface: color('{color.white}', 'The default page background'),\n    'surface-muted': color('{color.gray.100}', 'A muted background (secondary areas)'),\n    'surface-raised': color('{color.white}', 'Raised surfaces: cards'),\n    'surface-overlay': color('{color.white}', 'Floating surfaces: dialogs, popovers, menus'),\n    'surface-sunken': color('{color.gray.50}', 'Sunken surfaces: wells, code areas'),\n    'surface-inverse': color('{color.gray.900}', 'Inverted-contrast surfaces: tooltips'),\n    'surface-skeleton': color(\n      '{color.gray.200}',\n      \"The background of VSkeletonLoader's silhouettes, from which its highlight is derived\",\n    ),\n\n    'text-on-inverse': color('{color.white}', 'Text set on an inverted surface'),\n\n    text: color('{color.gray.900}', 'The running text of the interface'),\n    'text-muted': color(\n      '{color.gray.600}',\n      'Secondary text: hints, captions, descriptions, start icons',\n    ),\n    'text-subtle': color('{color.gray.500}', 'Placeholders, disabled text'),\n    'text-on-accent': color('{color.white}', 'Text set on an accent/danger/success background'),\n    'text-on-warning': color(\n      '{color.gray.950}',\n      'Text set on a solid warning background (amber too light for white)',\n    ),\n\n    border: color('{color.gray.200}', 'Dividers, and the frames of cards, tables and panels'),\n    'border-strong': color('{color.gray.300}', 'The borders of form controls'),\n\n    accent: color(\n      '{color.indigo.600}',\n      'The brand color: solid buttons, checked controls, the selected item',\n    ),\n    'accent-hover': color('{color.indigo.700}', 'The accent color under the pointer'),\n    'accent-active': color('{color.indigo.800}', 'The accent color while pressed'),\n    'accent-surface': color('{color.indigo.50}', 'A tinted accent background (badges, selections)'),\n    'accent-border': color(\n      '{color.indigo.200}',\n      'The border of a tinted accent element, matching the accent surface',\n    ),\n    'accent-text': color('{color.indigo.700}', 'Accent text on a neutral or tinted background'),\n\n    danger: color('{color.red.600}', 'Destructive actions and errors: solid buttons, error states'),\n    'danger-hover': color('{color.red.700}', 'The danger color under the pointer'),\n    'danger-active': color('{color.red.800}', 'The danger color while pressed'),\n    'danger-surface': color(\n      '{color.red.50}',\n      'A tinted danger background (soft buttons and chips, a destructive menu item)',\n    ),\n    'danger-border': color(\n      '{color.red.200}',\n      'The border of a tinted danger element, matching the danger surface',\n    ),\n    'danger-text': color(\n      '{color.red.700}',\n      'Danger text on a neutral or tinted background: error messages, a destructive menu item',\n    ),\n\n    /* Green filled surfaces need step 700 to contrast with white text. */\n    success: color('{color.green.700}', 'A positive outcome: solid chips, badges, notifications'),\n    'success-hover': color('{color.green.800}', 'The success color under the pointer'),\n    'success-active': color('{color.green.900}', 'The success color while pressed'),\n    'success-surface': color(\n      '{color.green.50}',\n      'A tinted success background (soft chips, badges, notifications)',\n    ),\n    'success-border': color(\n      '{color.green.200}',\n      'The border of a tinted success element, matching the success surface',\n    ),\n    'success-text': color('{color.green.800}', 'Success text on a neutral or tinted background'),\n\n    warning: color(\n      '{color.amber.600}',\n      'A situation that calls for attention: solid chips, badges, notifications',\n    ),\n    'warning-hover': color('{color.amber.700}', 'The warning color under the pointer'),\n    'warning-active': color('{color.amber.800}', 'The warning color while pressed'),\n    'warning-surface': color(\n      '{color.amber.50}',\n      'A tinted warning background (soft chips, badges, notifications)',\n    ),\n    'warning-border': color(\n      '{color.amber.200}',\n      'The border of a tinted warning element, matching the warning surface',\n    ),\n    'warning-text': color('{color.amber.900}', 'Warning text on a neutral or tinted background'),\n\n    backdrop: color('oklch(0% 0 0 / 0.45)', 'The veil behind modal dialogs'),\n\n    /*\n     * Keep event colours literal: root-declared var aliases resolve their hue before cards can\n     * supply per-event hues.\n     */\n    'event-surface': color(\n      'oklch(0.95 0.045 265)',\n      'The face of a calendar event that carries no color of its own',\n    ),\n    'event-border': color(\n      'oklch(0.85 0.08 265)',\n      'The edge of that calendar event, and the bar marking its leading side',\n    ),\n    'event-text': color('oklch(0.4 0.11 265)', 'The title of that calendar event'),\n  },\n  text: {\n    family: fontFamily('{font.family.sans}', 'The running font of every component'),\n    'family-heading': fontFamily(\n      '{font.family.display}',\n      'The font of the display and heading roles, the running font until it is overridden',\n    ),\n    'family-code': fontFamily(\n      '{font.family.mono}',\n      'The font of code content (the code role, VInputOTP)',\n    ),\n    display: {\n      size: dimension('{font.size.5xl}'),\n      weight: fontWeight('{font.weight.bold}'),\n      leading: dimension('{font.leading.none}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-1': {\n      size: dimension('{font.size.4xl}'),\n      weight: fontWeight('{font.weight.bold}'),\n      leading: dimension('{font.leading.tight}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-2': {\n      size: dimension('{font.size.2xl}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.tight}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-3': {\n      size: dimension('{font.size.lg}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    'heading-4': {\n      size: dimension('{font.size.md}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    subtitle: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    'body-xl': {\n      size: dimension('{font.size.lg}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.relaxed}'),\n    },\n    'body-lg': {\n      size: dimension('{font.size.md}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.relaxed}'),\n    },\n    'body-md': {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    'body-sm': {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    label: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    /* Choice text uses label dimensions at regular weight to remain distinct from field labels. */\n    choice: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    caption: {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    overline: {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.snug}'),\n      tracking: dimension('{font.tracking.wide}'),\n    },\n    code: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    /* Control size comes from --control-font-size; this recipe supplies weight and leading only. */\n    control: {\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.none}'),\n    },\n  },\n  radius: {\n    interactive: dimension('{radius.md}', 'Buttons, inputs, controls'),\n    surface: dimension('{radius.lg}', 'Cards, alerts'),\n    overlay: dimension('{radius.xl}', 'Dialogs, popovers, menus'),\n    pill: dimension('{radius.full}', 'Full rounding: switches, badges, pill-shaped chips'),\n    chip: dimension(\n      '{radius.interactive}',\n      'Chips with shape=\"chip\", which follow the interactive radius by default',\n    ),\n  },\n  /** Semantic transition durations are theme-independent. */\n  duration: {\n    fast: duration('{duration.150}', 'Color and border changes on hover, focus and press'),\n    base: duration('{duration.200}', 'The default: a panel opening, a value moving'),\n    slow: duration('{duration.300}', 'Movements large enough to be followed by the eye'),\n  },\n  focus: {\n    'ring-color': color(\n      '{color.indigo.500}',\n      'The keyboard focus ring, which has to stand out against the page',\n    ),\n    'ring-width': dimension('2px', 'The thickness of the focus ring'),\n    'ring-offset': dimension('2px', 'The gap between a control and its focus ring'),\n  },\n  control: {\n    'height-xs': dimension(\n      '1.5rem',\n      'The height of every control at size=\"xs\" (24px), 4px less when compact',\n    ),\n    'height-sm': dimension(\n      '2rem',\n      'The height of every control at size=\"sm\" (32px), 4px less when compact',\n    ),\n    'height-md': dimension(\n      '2.5rem',\n      'The height of every control at size=\"md\" (40px), 4px less when compact',\n    ),\n    'height-lg': dimension(\n      '3rem',\n      'The height of every control at size=\"lg\" (48px), 4px less when compact',\n    ),\n    'height-xl': dimension(\n      '3.5rem',\n      'The height of every control at size=\"xl\" (56px), 4px less when compact',\n    ),\n    'border-width': dimension('2px', 'The border of checkable controls (VCheckbox, VRadio)'),\n    'size-check': dimension('1.25rem', 'The box of checkable controls (VCheckbox, VRadio)'),\n    'size-check-mark': dimension('0.875rem', \"The tick inside VCheckbox's box\"),\n    'size-check-dot': dimension('0.5rem', \"The dot inside VRadio's circle\"),\n    'size-switch-w': dimension('2.5rem', \"The width of VSwitch's track\"),\n    'size-switch-h': dimension('1.25rem', \"The height of VSwitch's track\"),\n    'size-switch-pad': dimension(\n      '0.125rem',\n      \"The gap between VSwitch's thumb and the edge of its track\",\n    ),\n    'action-size-sm': dimension(\n      '1.25rem',\n      'The inner buttons of sm input fields (clear, a clickable icon)',\n    ),\n    'action-size-md': dimension(\n      '1.5rem',\n      'The inner buttons of md input fields (clear, a clickable icon)',\n    ),\n    'action-size-lg': dimension(\n      '1.75rem',\n      'The inner buttons of lg input fields (clear, a clickable icon)',\n    ),\n    'size-slider-track': dimension('0.375rem', \"The thickness of VSlider's track\"),\n    'size-slider-thumb': dimension('1.25rem', \"The diameter of VSlider's thumb\"),\n    'size-slider-length': dimension('10rem', 'The default length of a vertical VSlider'),\n    'size-slider-field': dimension('5rem', \"The width of VSlider's number fields\"),\n    'size-carousel-block': dimension(\n      '24rem',\n      \"The default block size of VCarousel's viewport, which a vertical carousel needs to lay its slides out\",\n    ),\n    'size-carousel-indicator': dimension(\n      '0.625rem',\n      'The diameter of a VCarousel indicator dot (its hit area comes from --vectis-control-height-xs)',\n    ),\n    'size-carousel-indicator-active': dimension(\n      '1.25rem',\n      'The length of the active VCarousel indicator, which stretches from a dot into a pill',\n    ),\n    'size-combobox-list-max-block': dimension(\n      '18rem',\n      \"The maximum height of VCombobox's list panel (the scrolling area)\",\n    ),\n    'size-menu-min': dimension('11rem', \"The minimum width of VMenu's panel\"),\n    'size-menu-max': dimension('20rem', \"The maximum width of VMenu's panel\"),\n    'size-progress-linear-thickness': dimension(\n      '0.25rem',\n      \"The default thickness of VProgressLinear's bar (4px)\",\n    ),\n    'size-progress-linear-length': dimension(\n      '10rem',\n      'The default length of a vertical VProgressLinear, which a height set on the bar replaces',\n    ),\n    'size-progress-circular-diameter': dimension(\n      '3rem',\n      'The default diameter of VProgressCircular',\n    ),\n    'size-progress-circular-thickness': dimension(\n      '0.25rem',\n      'The default stroke thickness of VProgressCircular (4px)',\n    ),\n    'size-skeleton-surface': dimension(\n      '6rem',\n      'The default height of a surface-shaped VSkeletonLoader: a card, an image (96px)',\n    ),\n    'size-toast-width': dimension('22rem', 'The default width of a toast'),\n    'size-tooltip-max': dimension('18rem', 'The widest a tooltip grows before it wraps (288px)'),\n    'size-dialog-width': dimension(\n      '25rem',\n      'The default width of VDialog and VDialogAlert (400px), when no `width` is given',\n    ),\n    'size-snackbar-min': dimension('18rem', 'The minimum width of a snackbar (288px)'),\n    'size-snackbar-max': dimension('36rem', 'The maximum width of a snackbar (576px)'),\n    'size-badge-h': dimension('1.25rem', 'The height of a VBadge pill'),\n    'size-badge-dot': dimension('0.625rem', 'The diameter of VBadge in dot mode'),\n    'size-badge-ring': dimension('2px', 'The detaching ring of a bordered VBadge'),\n    'size-avatar-ring': dimension('2px', 'The ring separating stacked avatars (VAvatarGroup)'),\n    'size-date-picker-cell': dimension('2.5rem', 'The side of a VDatePicker day cell'),\n    'size-date-picker-day': dimension(\n      '{control.height.md}',\n      'The diameter of the disc a VDatePicker day is drawn on; the cell grows to hold it',\n    ),\n    'size-date-picker-dot': dimension('0.25rem', 'The diameter of a VDatePicker event dot'),\n    'size-date-picker-nav-min': dimension(\n      '5.375rem',\n      \"The minimum width of VDatePicker's month/year picker buttons (about 86px)\",\n    ),\n    'size-tab-indicator': dimension(\n      '2px',\n      'The thickness of the active tab indicator (VTabs, flat/outlined)',\n    ),\n    'size-table-search': dimension('16rem', \"The width of VDataTable's search field\"),\n    'size-time-picker-dial': dimension('16rem', \"The diameter of VTimePicker's clock face\"),\n    'size-time-picker-number': dimension(\n      '3rem',\n      \"A numeral cell on VTimePicker's face, and the hand's dot on a marker\",\n    ),\n    'size-time-picker-center': dimension('0.5rem', \"The center dot of VTimePicker's face\"),\n    'size-time-picker-hand': dimension('2px', \"The thickness of the hand on VTimePicker's face\"),\n    'size-time-picker-hand-minor': dimension(\n      '1rem',\n      \"The dot of VTimePicker's hand on a minute off the 5-minute markers\",\n    ),\n    'size-file-picker-min-block': dimension(\n      '10rem',\n      \"The minimum height of VFilePicker's drop zone: icon, two lines, separator and button\",\n    ),\n    'size-file-picker-icon': dimension(\n      '2.5rem',\n      \"The large icon at the top of VFilePicker's drop zone\",\n    ),\n    'size-file-picker-thumb': dimension(\n      '2.5rem',\n      'The thumbnail square of a VFilePicker preview row (an image, or its type icon)',\n    ),\n    /*\n     * This hour height must leave room for a readable title in short events; cards have no\n     * minimum height.\n     */\n    'size-calendar-hour': dimension('4rem', \"The height of one hour in VCalendar's time grid\"),\n    'size-calendar-gutter': dimension(\n      '4.5rem',\n      \"The column of hour labels beside VCalendar's time grid, wide enough for a 12-hour clock's '12:00 AM' on one line\",\n    ),\n    'size-calendar-tick': dimension(\n      '0.375rem',\n      \"How far an hour's rule runs back into VCalendar's gutter, tying the label to its line\",\n    ),\n    /*\n     * Keep this visual edge-strip width aligned with EDGE_BAND in VCalendar/edgeStep.ts so\n     * paging starts where the highlight appears.\n     */\n    'size-calendar-edge': dimension(\n      '3rem',\n      'The strip at the side of VCalendar that pages the view when a dragged event rests on it',\n    ),\n    'size-calendar-day-min': dimension(\n      '5rem',\n      'The width a VCalendar day column may not go below, past which the grid scrolls',\n    ),\n    'size-calendar-handle': dimension(\n      '0.5rem',\n      \"The strip along a VCalendar card's bottom edge that its end is dragged by\",\n    ),\n    'size-calendar-allday-lane': dimension('1.5rem', \"One lane of VCalendar's all-day band\"),\n    'size-calendar-allday-max': dimension(\n      '7rem',\n      \"The height past which VCalendar's all-day band scrolls instead of growing\",\n    ),\n    'size-calendar-now-dot': dimension('0.625rem', \"The dot on VCalendar's current-time line\"),\n    'size-calendar-event-edge': dimension(\n      '3px',\n      'The width of the coloured leading edge of a VCalendar event',\n    ),\n    'size-calendar-gap': dimension(\n      '0.125rem',\n      'The gap VCalendar keeps between two events, side by side in a day or stacked in a month',\n    ),\n    'size-calendar-grip': dimension(\n      '1rem',\n      \"The length of the grip drawn on a VCalendar card's resize strip\",\n    ),\n    'size-calendar-grip-thickness': dimension(\n      '2px',\n      \"The thickness of that grip, which is also its distance from the card's bottom edge\",\n    ),\n    'size-calendar-year-month': dimension(\n      '13rem',\n      \"The narrowest a mini-month of VCalendar's year view gets before the year reflows\",\n    ),\n    /*\n     * Keep enough cell height for monthEventLimit chips and the overflow line; clipped cells do\n     * not scroll to reveal hidden rows.\n     */\n    'size-calendar-month-cell': dimension(\n      '8.5rem',\n      \"The minimum height of a day in VCalendar's month view\",\n    ),\n    'size-calendar-year-cell': dimension(\n      '1.5rem',\n      \"The side of a day square in the mini-months of VCalendar's year view\",\n    ),\n  },\n  icon: {\n    'size-sm': dimension('1rem', 'The icon size of xs controls (16px)'),\n    'size-md': dimension('1.25rem', 'The icon size of sm and md controls (20px)'),\n    'size-lg': dimension('1.5rem', 'The icon size of lg and xl controls (24px)'),\n  },\n} satisfies TokenGroup\n"],"mappings":";;AAMA,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;EAGA,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;EAMvE,iBAAiB,EACf,yBACA,+DACF;EACA,gBAAgB,EACd,wBACA,uEACF;EACA,cAAc,EAAM,uBAAuB,kCAAkC;CAC/E;CACA,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;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,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;EAEA,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;EAEA,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;CAEA,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;EAKA,sBAAsB,EAAU,QAAQ,iDAAiD;EACzF,wBAAwB,EACtB,UACA,kHACF;EACA,sBAAsB,EACpB,YACA,uFACF;EAKA,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;EAKA,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"}
+{"version":3,"file":"semantic.js","names":[],"sources":["../../src/tokens/semantic.ts"],"sourcesContent":["/**\n * Semantic roles alias primitives; components depend on these roles so applications can theme\n * without rewriting component CSS.\n */\nimport { color, dimension, duration, fontFamily, fontWeight, type TokenGroup } from './types'\n\nexport const semantic = {\n  color: {\n    surface: color('{color.white}', 'The default page background'),\n    'surface-muted': color('{color.gray.100}', 'A muted background (secondary areas)'),\n    'surface-raised': color('{color.white}', 'Raised surfaces: cards'),\n    'surface-overlay': color('{color.white}', 'Floating surfaces: dialogs, popovers, menus'),\n    'surface-sunken': color('{color.gray.50}', 'Sunken surfaces: wells, code areas'),\n    'surface-inverse': color('{color.gray.900}', 'Inverted-contrast surfaces: tooltips'),\n    'surface-skeleton': color(\n      '{color.gray.200}',\n      \"The background of VSkeletonLoader's silhouettes, from which its highlight is derived\",\n    ),\n\n    'text-on-inverse': color('{color.white}', 'Text set on an inverted surface'),\n\n    text: color('{color.gray.900}', 'The running text of the interface'),\n    'text-muted': color(\n      '{color.gray.600}',\n      'Secondary text: hints, captions, descriptions, start icons',\n    ),\n    'text-subtle': color('{color.gray.500}', 'Placeholders, disabled text'),\n    'text-on-accent': color('{color.white}', 'Text set on an accent/danger/success background'),\n    'text-on-warning': color(\n      '{color.gray.950}',\n      'Text set on a solid warning background (amber too light for white)',\n    ),\n\n    border: color('{color.gray.200}', 'Dividers, and the frames of cards, tables and panels'),\n    'border-strong': color('{color.gray.300}', 'The borders of form controls'),\n    'border-on-fill': color(\n      'oklch(0% 0 0 / 0.12)',\n      'A veil edging or dividing a filled background: VButtonGroup seams, VColorPicker swatches',\n    ),\n\n    accent: color(\n      '{color.indigo.600}',\n      'The brand color: solid buttons, checked controls, the selected item',\n    ),\n    'accent-hover': color('{color.indigo.700}', 'The accent color under the pointer'),\n    'accent-active': color('{color.indigo.800}', 'The accent color while pressed'),\n    'accent-surface': color('{color.indigo.50}', 'A tinted accent background (badges, selections)'),\n    'accent-border': color(\n      '{color.indigo.200}',\n      'The border of a tinted accent element, matching the accent surface',\n    ),\n    'accent-text': color('{color.indigo.700}', 'Accent text on a neutral or tinted background'),\n\n    danger: color('{color.red.600}', 'Destructive actions and errors: solid buttons, error states'),\n    'danger-hover': color('{color.red.700}', 'The danger color under the pointer'),\n    'danger-active': color('{color.red.800}', 'The danger color while pressed'),\n    'danger-surface': color(\n      '{color.red.50}',\n      'A tinted danger background (soft buttons and chips, a destructive menu item)',\n    ),\n    'danger-border': color(\n      '{color.red.200}',\n      'The border of a tinted danger element, matching the danger surface',\n    ),\n    'danger-text': color(\n      '{color.red.700}',\n      'Danger text on a neutral or tinted background: error messages, a destructive menu item',\n    ),\n\n    /* Green filled surfaces need step 700 to contrast with white text. */\n    success: color('{color.green.700}', 'A positive outcome: solid chips, badges, notifications'),\n    'success-hover': color('{color.green.800}', 'The success color under the pointer'),\n    'success-active': color('{color.green.900}', 'The success color while pressed'),\n    'success-surface': color(\n      '{color.green.50}',\n      'A tinted success background (soft chips, badges, notifications)',\n    ),\n    'success-border': color(\n      '{color.green.200}',\n      'The border of a tinted success element, matching the success surface',\n    ),\n    'success-text': color('{color.green.800}', 'Success text on a neutral or tinted background'),\n\n    warning: color(\n      '{color.amber.600}',\n      'A situation that calls for attention: solid chips, badges, notifications',\n    ),\n    'warning-hover': color('{color.amber.700}', 'The warning color under the pointer'),\n    'warning-active': color('{color.amber.800}', 'The warning color while pressed'),\n    'warning-surface': color(\n      '{color.amber.50}',\n      'A tinted warning background (soft chips, badges, notifications)',\n    ),\n    'warning-border': color(\n      '{color.amber.200}',\n      'The border of a tinted warning element, matching the warning surface',\n    ),\n    'warning-text': color('{color.amber.900}', 'Warning text on a neutral or tinted background'),\n\n    backdrop: color('oklch(0% 0 0 / 0.45)', 'The veil behind modal dialogs'),\n\n    /*\n     * Keep event colours literal: root-declared var aliases resolve their hue before cards can\n     * supply per-event hues.\n     */\n    'event-surface': color(\n      'oklch(0.95 0.045 265)',\n      'The face of a calendar event that carries no color of its own',\n    ),\n    'event-border': color(\n      'oklch(0.85 0.08 265)',\n      'The edge of that calendar event, and the bar marking its leading side',\n    ),\n    'event-text': color('oklch(0.4 0.11 265)', 'The title of that calendar event'),\n  },\n  text: {\n    family: fontFamily('{font.family.sans}', 'The running font of every component'),\n    'family-heading': fontFamily(\n      '{font.family.display}',\n      'The font of the display and heading roles, the running font until it is overridden',\n    ),\n    'family-code': fontFamily(\n      '{font.family.mono}',\n      'The font of code content (the code role, VInputOTP)',\n    ),\n    display: {\n      size: dimension('{font.size.5xl}'),\n      weight: fontWeight('{font.weight.bold}'),\n      leading: dimension('{font.leading.none}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-1': {\n      size: dimension('{font.size.4xl}'),\n      weight: fontWeight('{font.weight.bold}'),\n      leading: dimension('{font.leading.tight}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-2': {\n      size: dimension('{font.size.2xl}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.tight}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-3': {\n      size: dimension('{font.size.lg}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    'heading-4': {\n      size: dimension('{font.size.md}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    subtitle: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    'body-xl': {\n      size: dimension('{font.size.lg}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.relaxed}'),\n    },\n    'body-lg': {\n      size: dimension('{font.size.md}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.relaxed}'),\n    },\n    'body-md': {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    'body-sm': {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    label: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    /* Choice text uses label dimensions at regular weight to remain distinct from field labels. */\n    choice: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    caption: {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    overline: {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.snug}'),\n      tracking: dimension('{font.tracking.wide}'),\n    },\n    code: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    /* Control size comes from --control-font-size; this recipe supplies weight and leading only. */\n    control: {\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.none}'),\n    },\n  },\n  radius: {\n    interactive: dimension('{radius.md}', 'Buttons, inputs, controls'),\n    surface: dimension('{radius.lg}', 'Cards, alerts'),\n    overlay: dimension('{radius.xl}', 'Dialogs, popovers, menus'),\n    pill: dimension('{radius.full}', 'Full rounding: switches, badges, pill-shaped chips'),\n    chip: dimension(\n      '{radius.interactive}',\n      'Chips with shape=\"chip\", which follow the interactive radius by default',\n    ),\n  },\n  /** Semantic transition durations are theme-independent. */\n  duration: {\n    fast: duration('{duration.150}', 'Color and border changes on hover, focus and press'),\n    base: duration('{duration.200}', 'The default: a panel opening, a value moving'),\n    slow: duration('{duration.300}', 'Movements large enough to be followed by the eye'),\n  },\n  focus: {\n    'ring-color': color(\n      '{color.indigo.500}',\n      'The keyboard focus ring, which has to stand out against the page',\n    ),\n    'ring-width': dimension('2px', 'The thickness of the focus ring'),\n    'ring-offset': dimension('2px', 'The gap between a control and its focus ring'),\n  },\n  control: {\n    'height-xs': dimension(\n      '1.5rem',\n      'The height of every control at size=\"xs\" (24px), 4px less when compact',\n    ),\n    'height-sm': dimension(\n      '2rem',\n      'The height of every control at size=\"sm\" (32px), 4px less when compact',\n    ),\n    'height-md': dimension(\n      '2.5rem',\n      'The height of every control at size=\"md\" (40px), 4px less when compact',\n    ),\n    'height-lg': dimension(\n      '3rem',\n      'The height of every control at size=\"lg\" (48px), 4px less when compact',\n    ),\n    'height-xl': dimension(\n      '3.5rem',\n      'The height of every control at size=\"xl\" (56px), 4px less when compact',\n    ),\n    'border-width': dimension('2px', 'The border of checkable controls (VCheckbox, VRadio)'),\n    'size-check': dimension('1.25rem', 'The box of checkable controls (VCheckbox, VRadio)'),\n    'size-check-mark': dimension('0.875rem', \"The tick inside VCheckbox's box\"),\n    'size-check-dot': dimension('0.5rem', \"The dot inside VRadio's circle\"),\n    'size-switch-w': dimension('2.5rem', \"The width of VSwitch's track\"),\n    'size-switch-h': dimension('1.25rem', \"The height of VSwitch's track\"),\n    'size-switch-pad': dimension(\n      '0.125rem',\n      \"The gap between VSwitch's thumb and the edge of its track\",\n    ),\n    'action-size-sm': dimension(\n      '1.25rem',\n      'The inner buttons of sm input fields (clear, a clickable icon)',\n    ),\n    'action-size-md': dimension(\n      '1.5rem',\n      'The inner buttons of md input fields (clear, a clickable icon)',\n    ),\n    'action-size-lg': dimension(\n      '1.75rem',\n      'The inner buttons of lg input fields (clear, a clickable icon)',\n    ),\n    'size-slider-track': dimension('0.375rem', \"The thickness of VSlider's track\"),\n    'size-slider-thumb': dimension('1.25rem', \"The diameter of VSlider's thumb\"),\n    'size-slider-length': dimension('10rem', 'The default length of a vertical VSlider'),\n    'size-slider-field': dimension('5rem', \"The width of VSlider's number fields\"),\n    'size-carousel-block': dimension(\n      '24rem',\n      \"The default block size of VCarousel's viewport, which a vertical carousel needs to lay its slides out\",\n    ),\n    'size-carousel-indicator': dimension(\n      '0.625rem',\n      'The diameter of a VCarousel indicator dot (its hit area comes from --vectis-control-height-xs)',\n    ),\n    'size-carousel-indicator-active': dimension(\n      '1.25rem',\n      'The length of the active VCarousel indicator, which stretches from a dot into a pill',\n    ),\n    'size-combobox-list-max-block': dimension(\n      '18rem',\n      \"The maximum height of VCombobox's list panel (the scrolling area)\",\n    ),\n    'size-select-list-max-block': dimension(\n      '18rem',\n      \"The maximum height of VSelect'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-meter-thickness-sm': dimension('0.25rem', 'The thickness of a small VMeter (4px)'),\n    'size-meter-thickness-md': dimension('0.5rem', 'The thickness of a medium VMeter (8px)'),\n    'size-meter-thickness-lg': dimension('0.75rem', 'The thickness of a large VMeter (12px)'),\n    'size-meter-segment-gap': dimension('0.125rem', 'The gap between two VMeter segments (2px)'),\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-resizable-hit': dimension(\n      '0.75rem',\n      'The width of the strip around a VResizable handle that catches the pointer (12px)',\n    ),\n    'size-resizable-grip-length': dimension(\n      '1.5rem',\n      'The length of the grip VResizable draws on its handles under `grip` (24px)',\n    ),\n    'size-resizable-grip-thickness': dimension(\n      '0.5rem',\n      'The thickness of the grip VResizable draws on its handles under `grip` (8px)',\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-hover-card-max': dimension('20rem', 'The widest a VHoverCard grows (320px)'),\n    'size-dialog-width': dimension(\n      '25rem',\n      'The default width of VDialog and VDialogAlert (400px), when no `width` is given',\n    ),\n    'size-command-palette-width': dimension(\n      '40rem',\n      'The default width of VCommandPalette (640px), when no `width` is given',\n    ),\n    'size-command-palette-list-max-block': dimension(\n      '20rem',\n      \"The tallest VCommandPalette's list of commands grows before it scrolls (320px)\",\n    ),\n    'size-command-palette-offset': dimension(\n      '6rem',\n      'The distance from the top of the viewport to VCommandPalette, which keeps its search field still as the list changes height (96px)',\n    ),\n    'size-stepper-indicator': dimension(\n      '2rem',\n      'The diameter of the circle holding a VStepper step number (32px)',\n    ),\n    'size-stepper-connector-min': dimension(\n      '1.5rem',\n      'The shortest a horizontal VStepper connector gets between two steps (24px)',\n    ),\n    'size-timeline-dot-sm': dimension(\n      '0.5rem',\n      'The dot marking an event of a small VTimeline (8px)',\n    ),\n    'size-timeline-dot-md': dimension('0.625rem', 'The dot marking an event of a VTimeline (10px)'),\n    'size-timeline-icon-sm': dimension(\n      '1.5rem',\n      'The round badge holding the icon of an event in a small VTimeline (24px)',\n    ),\n    'size-timeline-icon-md': dimension(\n      '2rem',\n      'The round badge holding the icon of an event in a VTimeline (32px)',\n    ),\n    'size-timeline-item-min': dimension(\n      '12rem',\n      'The narrowest an event of a horizontal VTimeline gets before the list scrolls (192px)',\n    ),\n    'size-rating-sm': dimension('1.25rem', 'The icon of a small VRating (20px)'),\n    'size-rating-md': dimension('1.5rem', 'The icon of a medium VRating (24px)'),\n    'size-rating-lg': dimension('2rem', 'The icon of a large VRating (32px)'),\n    'size-drawer-sm': dimension(\n      '20rem',\n      'The width of a small VDrawer on a side, or the height of one at the top or bottom (320px)',\n    ),\n    'size-drawer-md': dimension(\n      '25rem',\n      'The width of a medium VDrawer on a side, or the height of one at the top or bottom (400px)',\n    ),\n    'size-drawer-lg': dimension(\n      '35rem',\n      'The width of a large VDrawer on a side, or the height of one at the top or bottom (560px)',\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-card-media': dimension(\n      '12rem',\n      'The width a horizontal VCard gives its media before the content wraps under it (192px)',\n    ),\n    'size-card-body-min': dimension(\n      '16rem',\n      'The narrowest content of a horizontal VCard: below it, the media moves above the content',\n    ),\n    'size-empty-state-media-sm': dimension(\n      '2.5rem',\n      'The diameter of the icon badge of a small VEmptyState (40px)',\n    ),\n    'size-empty-state-media-md': dimension(\n      '3rem',\n      'The diameter of the icon badge of a medium VEmptyState (48px)',\n    ),\n    'size-empty-state-media-lg': dimension(\n      '4rem',\n      'The diameter of the icon badge of a large VEmptyState (64px)',\n    ),\n    'size-empty-state-text-max': dimension(\n      '28rem',\n      'The widest the title and description of a VEmptyState run before they wrap (448px)',\n    ),\n    'size-field-label': dimension(\n      '10rem',\n      'The width of a VField label placed beside its control, before the control wraps under it (160px)',\n    ),\n    'size-field-control-min': dimension(\n      '16rem',\n      'The narrowest control of a VField with a side label: below it, the label moves above the control',\n    ),\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-color-picker-width': dimension('16rem', 'The width of VColorPicker (256px)'),\n    'size-color-picker-area': dimension(\n      '10rem',\n      \"The height of VColorPicker's saturation and brightness area (160px)\",\n    ),\n    'size-color-picker-track': dimension(\n      '0.75rem',\n      \"The thickness of VColorPicker's hue and opacity tracks (12px)\",\n    ),\n    'size-color-picker-thumb': dimension(\n      '1.25rem',\n      \"The diameter of VColorPicker's thumbs, on the area and the tracks (20px)\",\n    ),\n    'size-color-picker-preview': dimension(\n      '2rem',\n      'The disc showing the current colour in VColorPicker (32px)',\n    ),\n    'size-color-picker-format': dimension(\n      '6rem',\n      \"The width of VColorPicker's format menu, which holds its longest name (96px)\",\n    ),\n    'size-color-picker-swatch': dimension('1.5rem', 'The side of a VColorPicker swatch (24px)'),\n    'size-color-picker-checker': dimension(\n      '0.5rem',\n      'The side of the checkerboard showing through a translucent colour (8px)',\n    ),\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, every variant but inset)',\n    ),\n    'size-table-search': dimension('16rem', \"The width of VDataTable's search field\"),\n    'size-time-picker-dial': dimension('16rem', \"The diameter of VTimePicker's clock face\"),\n    'size-time-picker-number': dimension(\n      '3rem',\n      \"A numeral cell on VTimePicker's face, and the hand's dot on a marker\",\n    ),\n    'size-time-picker-center': dimension('0.5rem', \"The center dot of VTimePicker's face\"),\n    'size-time-picker-hand': dimension('2px', \"The thickness of the hand on VTimePicker's face\"),\n    'size-time-picker-hand-minor': dimension(\n      '1rem',\n      \"The dot of VTimePicker's hand on a minute off the 5-minute markers\",\n    ),\n    'size-file-picker-min-block': dimension(\n      '10rem',\n      \"The minimum height of VFilePicker's drop zone: icon, two lines, separator and button\",\n    ),\n    'size-file-picker-icon': dimension(\n      '2.5rem',\n      \"The large icon at the top of VFilePicker's drop zone\",\n    ),\n    'size-file-picker-thumb': dimension(\n      '2.5rem',\n      'The thumbnail square of a VFilePicker preview row (an image, or its type icon)',\n    ),\n    /*\n     * This hour height must leave room for a readable title in short events; cards have no\n     * minimum height.\n     */\n    'size-calendar-hour': dimension('4rem', \"The height of one hour in VCalendar's time grid\"),\n    'size-calendar-gutter': dimension(\n      '4.5rem',\n      \"The column of hour labels beside VCalendar's time grid, wide enough for a 12-hour clock's '12:00 AM' on one line\",\n    ),\n    'size-calendar-tick': dimension(\n      '0.375rem',\n      \"How far an hour's rule runs back into VCalendar's gutter, tying the label to its line\",\n    ),\n    /*\n     * Keep this visual edge-strip width aligned with EDGE_BAND in VCalendar/edgeStep.ts so\n     * paging starts where the highlight appears.\n     */\n    'size-calendar-edge': dimension(\n      '3rem',\n      'The strip at the side of VCalendar that pages the view when a dragged event rests on it',\n    ),\n    'size-calendar-day-min': dimension(\n      '5rem',\n      'The width a VCalendar day column may not go below, past which the grid scrolls',\n    ),\n    'size-calendar-handle': dimension(\n      '0.5rem',\n      \"The strip along a VCalendar card's bottom edge that its end is dragged by\",\n    ),\n    'size-calendar-allday-lane': dimension('1.5rem', \"One lane of VCalendar's all-day band\"),\n    'size-calendar-allday-max': dimension(\n      '7rem',\n      \"The height past which VCalendar's all-day band scrolls instead of growing\",\n    ),\n    'size-calendar-now-dot': dimension('0.625rem', \"The dot on VCalendar's current-time line\"),\n    'size-calendar-event-edge': dimension(\n      '3px',\n      'The width of the coloured leading edge of a VCalendar event',\n    ),\n    'size-calendar-gap': dimension(\n      '0.125rem',\n      'The gap VCalendar keeps between two events, side by side in a day or stacked in a month',\n    ),\n    'size-calendar-grip': dimension(\n      '1rem',\n      \"The length of the grip drawn on a VCalendar card's resize strip\",\n    ),\n    'size-calendar-grip-thickness': dimension(\n      '2px',\n      \"The thickness of that grip, which is also its distance from the card's bottom edge\",\n    ),\n    'size-calendar-year-month': dimension(\n      '13rem',\n      \"The narrowest a mini-month of VCalendar's year view gets before the year reflows\",\n    ),\n    /*\n     * Keep enough cell height for monthEventLimit chips and the overflow line; clipped cells do\n     * not scroll to reveal hidden rows.\n     */\n    'size-calendar-month-cell': dimension(\n      '8.5rem',\n      \"The minimum height of a day in VCalendar's month view\",\n    ),\n    'size-calendar-year-cell': dimension(\n      '1.5rem',\n      \"The side of a day square in the mini-months of VCalendar's year view\",\n    ),\n  },\n  icon: {\n    'size-sm': dimension('1rem', 'The icon size of xs controls (16px)'),\n    'size-md': dimension('1.25rem', 'The icon size of sm and md controls (20px)'),\n    'size-lg': dimension('1.5rem', 'The icon size of lg and xl controls (24px)'),\n  },\n} satisfies TokenGroup\n"],"mappings":"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"}

package/dist/tokens/themes/dark.d.ts

@@ -14,6 +14,7 @@ export declare const dark: {
         'text-on-accent': import('..').DesignToken;
         border: import('..').DesignToken;
         'border-strong': import('..').DesignToken;
+        'border-on-fill': import('..').DesignToken;
         accent: import('..').DesignToken;
         'accent-hover': import('..').DesignToken;
         'accent-active': import('..').DesignToken;

package/dist/tokens/themes/dark.js

@@ -16,6 +16,7 @@ var t = {
 		"text-on-accent": e("{color.white}"),
 		border: e("{color.gray.800}"),
 		"border-strong": e("{color.gray.700}"),
+		"border-on-fill": e("oklch(100% 0 0 / 0.15)"),
 		accent: e("{color.indigo.500}"),
 		"accent-hover": e("{color.indigo.400}"),
 		"accent-active": e("{color.indigo.300}"),

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

@@ -1 +1 @@
-{"version":3,"file":"dark.js","names":[],"sources":["../../../src/tokens/themes/dark.ts"],"sourcesContent":["/** Dark mode repoints existing semantic roles while retaining the shared primitive palette. */\nimport { color, type TokenGroup } from '../types'\n\nexport const dark = {\n  color: {\n    surface: color('{color.gray.950}'),\n    'surface-muted': color('{color.gray.800}'),\n    'surface-raised': color('{color.gray.900}'),\n    'surface-overlay': color('{color.gray.900}'),\n    'surface-sunken': color('oklch(11% 0.006 260)'),\n    'surface-inverse': color('{color.gray.800}'),\n    'surface-skeleton': color('{color.gray.800}'),\n\n    'text-on-inverse': color('{color.gray.50}'),\n\n    text: color('{color.gray.50}'),\n    'text-muted': color('{color.gray.300}'),\n    'text-subtle': color('{color.gray.400}'),\n    'text-on-accent': color('{color.white}'),\n\n    border: color('{color.gray.800}'),\n    'border-strong': color('{color.gray.700}'),\n\n    accent: color('{color.indigo.500}'),\n    'accent-hover': color('{color.indigo.400}'),\n    'accent-active': color('{color.indigo.300}'),\n    'accent-surface': color('{color.indigo.950}'),\n    'accent-border': color('{color.indigo.900}'),\n    'accent-text': color('{color.indigo.300}'),\n\n    /*\n     * Retain explicit red/green steps for white-text contrast. Their dark-theme hover steps\n     * grow darker, unlike accent and warning.\n     */\n    danger: color('{color.red.600}'),\n    'danger-hover': color('{color.red.700}'),\n    'danger-active': color('{color.red.800}'),\n    'danger-surface': color('{color.red.950}'),\n    'danger-border': color('{color.red.900}'),\n    'danger-text': color('{color.red.300}'),\n\n    success: color('{color.green.700}'),\n    'success-hover': color('{color.green.800}'),\n    'success-active': color('{color.green.900}'),\n    'success-surface': color('{color.green.950}'),\n    'success-border': color('{color.green.900}'),\n    'success-text': color('{color.green.300}'),\n\n    warning: color('{color.amber.500}'),\n    'warning-hover': color('{color.amber.400}'),\n    'warning-active': color('{color.amber.300}'),\n    'warning-surface': color('{color.amber.950}'),\n    'warning-border': color('{color.amber.900}'),\n    'warning-text': color('{color.amber.300}'),\n\n    backdrop: color('oklch(0% 0 0 / 0.6)'),\n\n    /* Swap event surface and text lightness in dark mode; each card still supplies its own hue. */\n    'event-surface': color('oklch(0.3 0.05 265)'),\n    'event-border': color('oklch(0.42 0.08 265)'),\n    'event-text': color('oklch(0.9 0.06 265)'),\n  },\n  focus: {\n    'ring-color': color('{color.indigo.400}'),\n  },\n} satisfies TokenGroup\n"],"mappings":";;AAGA,IAAa,IAAO;CAClB,OAAO;EACL,SAAS,EAAM,kBAAkB;EACjC,iBAAiB,EAAM,kBAAkB;EACzC,kBAAkB,EAAM,kBAAkB;EAC1C,mBAAmB,EAAM,kBAAkB;EAC3C,kBAAkB,EAAM,sBAAsB;EAC9C,mBAAmB,EAAM,kBAAkB;EAC3C,oBAAoB,EAAM,kBAAkB;EAE5C,mBAAmB,EAAM,iBAAiB;EAE1C,MAAM,EAAM,iBAAiB;EAC7B,cAAc,EAAM,kBAAkB;EACtC,eAAe,EAAM,kBAAkB;EACvC,kBAAkB,EAAM,eAAe;EAEvC,QAAQ,EAAM,kBAAkB;EAChC,iBAAiB,EAAM,kBAAkB;EAEzC,QAAQ,EAAM,oBAAoB;EAClC,gBAAgB,EAAM,oBAAoB;EAC1C,iBAAiB,EAAM,oBAAoB;EAC3C,kBAAkB,EAAM,oBAAoB;EAC5C,iBAAiB,EAAM,oBAAoB;EAC3C,eAAe,EAAM,oBAAoB;EAMzC,QAAQ,EAAM,iBAAiB;EAC/B,gBAAgB,EAAM,iBAAiB;EACvC,iBAAiB,EAAM,iBAAiB;EACxC,kBAAkB,EAAM,iBAAiB;EACzC,iBAAiB,EAAM,iBAAiB;EACxC,eAAe,EAAM,iBAAiB;EAEtC,SAAS,EAAM,mBAAmB;EAClC,iBAAiB,EAAM,mBAAmB;EAC1C,kBAAkB,EAAM,mBAAmB;EAC3C,mBAAmB,EAAM,mBAAmB;EAC5C,kBAAkB,EAAM,mBAAmB;EAC3C,gBAAgB,EAAM,mBAAmB;EAEzC,SAAS,EAAM,mBAAmB;EAClC,iBAAiB,EAAM,mBAAmB;EAC1C,kBAAkB,EAAM,mBAAmB;EAC3C,mBAAmB,EAAM,mBAAmB;EAC5C,kBAAkB,EAAM,mBAAmB;EAC3C,gBAAgB,EAAM,mBAAmB;EAEzC,UAAU,EAAM,qBAAqB;EAGrC,iBAAiB,EAAM,qBAAqB;EAC5C,gBAAgB,EAAM,sBAAsB;EAC5C,cAAc,EAAM,qBAAqB;CAC3C;CACA,OAAO,EACL,cAAc,EAAM,oBAAoB,EAC1C;AACF"}
+{"version":3,"file":"dark.js","names":[],"sources":["../../../src/tokens/themes/dark.ts"],"sourcesContent":["/** Dark mode repoints existing semantic roles while retaining the shared primitive palette. */\nimport { color, type TokenGroup } from '../types'\n\nexport const dark = {\n  color: {\n    surface: color('{color.gray.950}'),\n    'surface-muted': color('{color.gray.800}'),\n    'surface-raised': color('{color.gray.900}'),\n    'surface-overlay': color('{color.gray.900}'),\n    'surface-sunken': color('oklch(11% 0.006 260)'),\n    'surface-inverse': color('{color.gray.800}'),\n    'surface-skeleton': color('{color.gray.800}'),\n\n    'text-on-inverse': color('{color.gray.50}'),\n\n    text: color('{color.gray.50}'),\n    'text-muted': color('{color.gray.300}'),\n    'text-subtle': color('{color.gray.400}'),\n    'text-on-accent': color('{color.white}'),\n\n    border: color('{color.gray.800}'),\n    'border-strong': color('{color.gray.700}'),\n    'border-on-fill': color('oklch(100% 0 0 / 0.15)'),\n\n    accent: color('{color.indigo.500}'),\n    'accent-hover': color('{color.indigo.400}'),\n    'accent-active': color('{color.indigo.300}'),\n    'accent-surface': color('{color.indigo.950}'),\n    'accent-border': color('{color.indigo.900}'),\n    'accent-text': color('{color.indigo.300}'),\n\n    /*\n     * Retain explicit red/green steps for white-text contrast. Their dark-theme hover steps\n     * grow darker, unlike accent and warning.\n     */\n    danger: color('{color.red.600}'),\n    'danger-hover': color('{color.red.700}'),\n    'danger-active': color('{color.red.800}'),\n    'danger-surface': color('{color.red.950}'),\n    'danger-border': color('{color.red.900}'),\n    'danger-text': color('{color.red.300}'),\n\n    success: color('{color.green.700}'),\n    'success-hover': color('{color.green.800}'),\n    'success-active': color('{color.green.900}'),\n    'success-surface': color('{color.green.950}'),\n    'success-border': color('{color.green.900}'),\n    'success-text': color('{color.green.300}'),\n\n    warning: color('{color.amber.500}'),\n    'warning-hover': color('{color.amber.400}'),\n    'warning-active': color('{color.amber.300}'),\n    'warning-surface': color('{color.amber.950}'),\n    'warning-border': color('{color.amber.900}'),\n    'warning-text': color('{color.amber.300}'),\n\n    backdrop: color('oklch(0% 0 0 / 0.6)'),\n\n    /* Swap event surface and text lightness in dark mode; each card still supplies its own hue. */\n    'event-surface': color('oklch(0.3 0.05 265)'),\n    'event-border': color('oklch(0.42 0.08 265)'),\n    'event-text': color('oklch(0.9 0.06 265)'),\n  },\n  focus: {\n    'ring-color': color('{color.indigo.400}'),\n  },\n} satisfies TokenGroup\n"],"mappings":";;AAGA,IAAa,IAAO;CAClB,OAAO;EACL,SAAS,EAAM,kBAAkB;EACjC,iBAAiB,EAAM,kBAAkB;EACzC,kBAAkB,EAAM,kBAAkB;EAC1C,mBAAmB,EAAM,kBAAkB;EAC3C,kBAAkB,EAAM,sBAAsB;EAC9C,mBAAmB,EAAM,kBAAkB;EAC3C,oBAAoB,EAAM,kBAAkB;EAE5C,mBAAmB,EAAM,iBAAiB;EAE1C,MAAM,EAAM,iBAAiB;EAC7B,cAAc,EAAM,kBAAkB;EACtC,eAAe,EAAM,kBAAkB;EACvC,kBAAkB,EAAM,eAAe;EAEvC,QAAQ,EAAM,kBAAkB;EAChC,iBAAiB,EAAM,kBAAkB;EACzC,kBAAkB,EAAM,wBAAwB;EAEhD,QAAQ,EAAM,oBAAoB;EAClC,gBAAgB,EAAM,oBAAoB;EAC1C,iBAAiB,EAAM,oBAAoB;EAC3C,kBAAkB,EAAM,oBAAoB;EAC5C,iBAAiB,EAAM,oBAAoB;EAC3C,eAAe,EAAM,oBAAoB;EAMzC,QAAQ,EAAM,iBAAiB;EAC/B,gBAAgB,EAAM,iBAAiB;EACvC,iBAAiB,EAAM,iBAAiB;EACxC,kBAAkB,EAAM,iBAAiB;EACzC,iBAAiB,EAAM,iBAAiB;EACxC,eAAe,EAAM,iBAAiB;EAEtC,SAAS,EAAM,mBAAmB;EAClC,iBAAiB,EAAM,mBAAmB;EAC1C,kBAAkB,EAAM,mBAAmB;EAC3C,mBAAmB,EAAM,mBAAmB;EAC5C,kBAAkB,EAAM,mBAAmB;EAC3C,gBAAgB,EAAM,mBAAmB;EAEzC,SAAS,EAAM,mBAAmB;EAClC,iBAAiB,EAAM,mBAAmB;EAC1C,kBAAkB,EAAM,mBAAmB;EAC3C,mBAAmB,EAAM,mBAAmB;EAC5C,kBAAkB,EAAM,mBAAmB;EAC3C,gBAAgB,EAAM,mBAAmB;EAEzC,UAAU,EAAM,qBAAqB;EAGrC,iBAAiB,EAAM,qBAAqB;EAC5C,gBAAgB,EAAM,sBAAsB;EAC5C,cAAc,EAAM,qBAAqB;CAC3C;CACA,OAAO,EACL,cAAc,EAAM,oBAAoB,EAC1C;AACF"}

package/dist/tokens.json

@@ -611,6 +611,11 @@
         "$value": "{color.gray.300}",
         "$description": "The borders of form controls"
       },
+      "border-on-fill": {
+        "$type": "color",
+        "$value": "oklch(0% 0 0 / 0.12)",
+        "$description": "A veil edging or dividing a filled background: VButtonGroup seams, VColorPicker swatches"
+      },
       "accent": {
         "$type": "color",
         "$value": "{color.indigo.600}",
@@ -1182,6 +1187,11 @@
         "$value": "18rem",
         "$description": "The maximum height of VCombobox's list panel (the scrolling area)"
       },
+      "size-select-list-max-block": {
+        "$type": "dimension",
+        "$value": "18rem",
+        "$description": "The maximum height of VSelect's list panel (the scrolling area)"
+      },
       "size-menu-min": {
         "$type": "dimension",
         "$value": "11rem",
@@ -1202,6 +1212,26 @@
         "$value": "10rem",
         "$description": "The default length of a vertical VProgressLinear, which a height set on the bar replaces"
       },
+      "size-meter-thickness-sm": {
+        "$type": "dimension",
+        "$value": "0.25rem",
+        "$description": "The thickness of a small VMeter (4px)"
+      },
+      "size-meter-thickness-md": {
+        "$type": "dimension",
+        "$value": "0.5rem",
+        "$description": "The thickness of a medium VMeter (8px)"
+      },
+      "size-meter-thickness-lg": {
+        "$type": "dimension",
+        "$value": "0.75rem",
+        "$description": "The thickness of a large VMeter (12px)"
+      },
+      "size-meter-segment-gap": {
+        "$type": "dimension",
+        "$value": "0.125rem",
+        "$description": "The gap between two VMeter segments (2px)"
+      },
       "size-progress-circular-diameter": {
         "$type": "dimension",
         "$value": "3rem",
@@ -1217,6 +1247,21 @@
         "$value": "6rem",
         "$description": "The default height of a surface-shaped VSkeletonLoader: a card, an image (96px)"
       },
+      "size-resizable-hit": {
+        "$type": "dimension",
+        "$value": "0.75rem",
+        "$description": "The width of the strip around a VResizable handle that catches the pointer (12px)"
+      },
+      "size-resizable-grip-length": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "$description": "The length of the grip VResizable draws on its handles under `grip` (24px)"
+      },
+      "size-resizable-grip-thickness": {
+        "$type": "dimension",
+        "$value": "0.5rem",
+        "$description": "The thickness of the grip VResizable draws on its handles under `grip` (8px)"
+      },
       "size-toast-width": {
         "$type": "dimension",
         "$value": "22rem",
@@ -1227,11 +1272,96 @@
         "$value": "18rem",
         "$description": "The widest a tooltip grows before it wraps (288px)"
       },
+      "size-hover-card-max": {
+        "$type": "dimension",
+        "$value": "20rem",
+        "$description": "The widest a VHoverCard grows (320px)"
+      },
       "size-dialog-width": {
         "$type": "dimension",
         "$value": "25rem",
         "$description": "The default width of VDialog and VDialogAlert (400px), when no `width` is given"
       },
+      "size-command-palette-width": {
+        "$type": "dimension",
+        "$value": "40rem",
+        "$description": "The default width of VCommandPalette (640px), when no `width` is given"
+      },
+      "size-command-palette-list-max-block": {
+        "$type": "dimension",
+        "$value": "20rem",
+        "$description": "The tallest VCommandPalette's list of commands grows before it scrolls (320px)"
+      },
+      "size-command-palette-offset": {
+        "$type": "dimension",
+        "$value": "6rem",
+        "$description": "The distance from the top of the viewport to VCommandPalette, which keeps its search field still as the list changes height (96px)"
+      },
+      "size-stepper-indicator": {
+        "$type": "dimension",
+        "$value": "2rem",
+        "$description": "The diameter of the circle holding a VStepper step number (32px)"
+      },
+      "size-stepper-connector-min": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "$description": "The shortest a horizontal VStepper connector gets between two steps (24px)"
+      },
+      "size-timeline-dot-sm": {
+        "$type": "dimension",
+        "$value": "0.5rem",
+        "$description": "The dot marking an event of a small VTimeline (8px)"
+      },
+      "size-timeline-dot-md": {
+        "$type": "dimension",
+        "$value": "0.625rem",
+        "$description": "The dot marking an event of a VTimeline (10px)"
+      },
+      "size-timeline-icon-sm": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "$description": "The round badge holding the icon of an event in a small VTimeline (24px)"
+      },
+      "size-timeline-icon-md": {
+        "$type": "dimension",
+        "$value": "2rem",
+        "$description": "The round badge holding the icon of an event in a VTimeline (32px)"
+      },
+      "size-timeline-item-min": {
+        "$type": "dimension",
+        "$value": "12rem",
+        "$description": "The narrowest an event of a horizontal VTimeline gets before the list scrolls (192px)"
+      },
+      "size-rating-sm": {
+        "$type": "dimension",
+        "$value": "1.25rem",
+        "$description": "The icon of a small VRating (20px)"
+      },
+      "size-rating-md": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "$description": "The icon of a medium VRating (24px)"
+      },
+      "size-rating-lg": {
+        "$type": "dimension",
+        "$value": "2rem",
+        "$description": "The icon of a large VRating (32px)"
+      },
+      "size-drawer-sm": {
+        "$type": "dimension",
+        "$value": "20rem",
+        "$description": "The width of a small VDrawer on a side, or the height of one at the top or bottom (320px)"
+      },
+      "size-drawer-md": {
+        "$type": "dimension",
+        "$value": "25rem",
+        "$description": "The width of a medium VDrawer on a side, or the height of one at the top or bottom (400px)"
+      },
+      "size-drawer-lg": {
+        "$type": "dimension",
+        "$value": "35rem",
+        "$description": "The width of a large VDrawer on a side, or the height of one at the top or bottom (560px)"
+      },
       "size-snackbar-min": {
         "$type": "dimension",
         "$value": "18rem",
@@ -1242,6 +1372,46 @@
         "$value": "36rem",
         "$description": "The maximum width of a snackbar (576px)"
       },
+      "size-card-media": {
+        "$type": "dimension",
+        "$value": "12rem",
+        "$description": "The width a horizontal VCard gives its media before the content wraps under it (192px)"
+      },
+      "size-card-body-min": {
+        "$type": "dimension",
+        "$value": "16rem",
+        "$description": "The narrowest content of a horizontal VCard: below it, the media moves above the content"
+      },
+      "size-empty-state-media-sm": {
+        "$type": "dimension",
+        "$value": "2.5rem",
+        "$description": "The diameter of the icon badge of a small VEmptyState (40px)"
+      },
+      "size-empty-state-media-md": {
+        "$type": "dimension",
+        "$value": "3rem",
+        "$description": "The diameter of the icon badge of a medium VEmptyState (48px)"
+      },
+      "size-empty-state-media-lg": {
+        "$type": "dimension",
+        "$value": "4rem",
+        "$description": "The diameter of the icon badge of a large VEmptyState (64px)"
+      },
+      "size-empty-state-text-max": {
+        "$type": "dimension",
+        "$value": "28rem",
+        "$description": "The widest the title and description of a VEmptyState run before they wrap (448px)"
+      },
+      "size-field-label": {
+        "$type": "dimension",
+        "$value": "10rem",
+        "$description": "The width of a VField label placed beside its control, before the control wraps under it (160px)"
+      },
+      "size-field-control-min": {
+        "$type": "dimension",
+        "$value": "16rem",
+        "$description": "The narrowest control of a VField with a side label: below it, the label moves above the control"
+      },
       "size-badge-h": {
         "$type": "dimension",
         "$value": "1.25rem",
@@ -1262,6 +1432,46 @@
         "$value": "2px",
         "$description": "The ring separating stacked avatars (VAvatarGroup)"
       },
+      "size-color-picker-width": {
+        "$type": "dimension",
+        "$value": "16rem",
+        "$description": "The width of VColorPicker (256px)"
+      },
+      "size-color-picker-area": {
+        "$type": "dimension",
+        "$value": "10rem",
+        "$description": "The height of VColorPicker's saturation and brightness area (160px)"
+      },
+      "size-color-picker-track": {
+        "$type": "dimension",
+        "$value": "0.75rem",
+        "$description": "The thickness of VColorPicker's hue and opacity tracks (12px)"
+      },
+      "size-color-picker-thumb": {
+        "$type": "dimension",
+        "$value": "1.25rem",
+        "$description": "The diameter of VColorPicker's thumbs, on the area and the tracks (20px)"
+      },
+      "size-color-picker-preview": {
+        "$type": "dimension",
+        "$value": "2rem",
+        "$description": "The disc showing the current colour in VColorPicker (32px)"
+      },
+      "size-color-picker-format": {
+        "$type": "dimension",
+        "$value": "6rem",
+        "$description": "The width of VColorPicker's format menu, which holds its longest name (96px)"
+      },
+      "size-color-picker-swatch": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "$description": "The side of a VColorPicker swatch (24px)"
+      },
+      "size-color-picker-checker": {
+        "$type": "dimension",
+        "$value": "0.5rem",
+        "$description": "The side of the checkerboard showing through a translucent colour (8px)"
+      },
       "size-date-picker-cell": {
         "$type": "dimension",
         "$value": "2.5rem",
@@ -1285,7 +1495,7 @@
       "size-tab-indicator": {
         "$type": "dimension",
         "$value": "2px",
-        "$description": "The thickness of the active tab indicator (VTabs, flat/outlined)"
+        "$description": "The thickness of the active tab indicator (VTabs, every variant but inset)"
       },
       "size-table-search": {
         "$type": "dimension",
@@ -1490,6 +1700,10 @@
           "$type": "color",
           "$value": "{color.gray.700}"
         },
+        "border-on-fill": {
+          "$type": "color",
+          "$value": "oklch(100% 0 0 / 0.15)"
+        },
         "accent": {
           "$type": "color",
           "$value": "{color.indigo.500}"

package/dist/types.d.ts

@@ -1,6 +1,59 @@
-/**
- * Types shared across unrelated components; component-owned contracts stay in their own
- * modules.
- */
+import { ChipSize } from './components/VChip/VChip.js';
+import { IconSource } from './components/VIcon/types.js';
 /** What identifies one item among several: a tab, a toggle item, an option in a list. */
 export type ItemValue = string | number;
+/** One thing that can be chosen in a list of options. */
+export interface ListboxOption {
+    /**
+     * What choosing it means: this is what the value holds. A number is admitted because a
+     * list of options almost always comes from somewhere that keys its rows by one.
+     */
+    value: ItemValue;
+    /** What it is called on screen, and what a search or a typed prefix matches against. */
+    label: string;
+    /** An icon before the label: an icon name, or an explicit render. */
+    icon?: IconSource;
+    /** Shows the option without allowing it to be chosen. */
+    disabled?: boolean;
+}
+/**
+ * A named block of options, the equivalent of a native `<optgroup>`. A group none of whose
+ * options survive a search disappears entirely, its name included.
+ */
+export interface ListboxGroup {
+    /** The name of the block. */
+    label: string;
+    /** The options it holds. */
+    options: ListboxOption[];
+}
+/**
+ * A rule drawn between two blocks of options. It is purely decorative, and a separator left
+ * stranded (at the top, at the bottom, or against another one) is simply not drawn.
+ */
+export interface ListboxSeparator {
+    separator: true;
+}
+/** Anything a list of options may hold: an option, a named block, or a separator. */
+export type ListboxItem = ListboxOption | ListboxGroup | ListboxSeparator;
+/** What the `#option` slot of VCombobox and VSelect receives. */
+export interface ListboxOptionSlotProps {
+    option: ListboxOption;
+    index: number;
+    active: boolean;
+    selected: boolean;
+}
+/** What the `#chip` slot of VCombobox and VSelect receives. */
+export interface ListboxChipSlotProps {
+    value: ItemValue;
+    option: ListboxOption | undefined;
+    label: string;
+    remove: () => void;
+    size: ChipSize;
+    compact: boolean;
+}
+/** What the `#overflow` slot of VCombobox and VSelect receives. */
+export interface ListboxOverflowSlotProps {
+    count: number;
+    size: ChipSize;
+    compact: boolean;
+}