npm - vectis-ui - Versions diffs - 0.10.0 → 0.10.2 - Mend

vectis-ui 0.10.0 → 0.10.2

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 (334) 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":"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"}
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":"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"}

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

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

package/dist/tokens/types.d.ts CHANGED Viewed

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

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

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

package/dist/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/dist/types.d.ts CHANGED Viewed

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

package/dist/utils/array.d.ts CHANGED Viewed

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

package/dist/utils/array.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"array.js","names":[],"sources":["../../src/utils/array.ts"],"sourcesContent":["// @core\n/*\n ~~Adds~~ a ~~value~~ to a ~~selection,~~ or ~~takes it out again if it is already there.\n \n ALWAYS returns~~ a new ~~list~~ ~~rather~~ ~~than mutating the one it was given: it is the new~~\n * ~~reference,~~ ~~not~~ ~~a change made inside the old list, that wakes a consumer's~~ v-model.\n */\nexport function toggleValue<T>(list: readonly T[], value: T): T[] {\n return list.includes(value) ? list.filter((v) => v !== value) : [...list, value]\n}\n"],"mappings":";~~AAOA~~,SAAgB,EAAe,GAAoB,GAAe;CAChE,OAAO,EAAK,SAAS,CAAK,IAAI,EAAK,QAAQ,MAAM,MAAM,CAAK,IAAI,CAAC,GAAG,GAAM,CAAK;AACjF"}
1	+ {"version":3,"file":"array.js","names":[],"sources":["../../src/utils/array.ts"],"sourcesContent":["// @core\n/*\n Toggle membership without mutating the input; returning a new reference propagates selection\n * changes through v-model.\n */\nexport function toggleValue<T>(list: readonly T[], value: T): T[] {\n return list.includes(value) ? list.filter((v) => v !== value) : [...list, value]\n}\n"],"mappings":";AAKA,SAAgB,EAAe,GAAoB,GAAe;CAChE,OAAO,EAAK,SAAS,CAAK,IAAI,EAAK,QAAQ,MAAM,MAAM,CAAK,IAAI,CAAC,GAAG,GAAM,CAAK;AACjF"}

package/dist/utils/arrowNav.d.ts CHANGED Viewed

@@ -1,30 +1,6 @@
-/**
- * The elements the arrows may land on, discovered from the DOM rather than a registry. The
- * selector is the caller's, and it is what excludes anything disabled.
- *
- * `display: none` is filtered here because it has to be: VPagination hides its neighbours
- * through container queries as the bar narrows, and a consumer may hide a tab outright.
- * Focus must not land on an element nobody can see. The read costs a style recalculation
- * per element, which is why `arrowNavigate` asks for the list only once it knows the key is
- * one it handles.
- */
+/** The elements the arrows may land on, discovered from the DOM rather than a registry. */
 export declare function navigableItems(container: HTMLElement, selector: string): HTMLElement[];
-/**
- * Moves focus for the arrows and Home/End, and reports whether it took the key.
- * `preventDefault` is applied only when it did, leaving the caller free otherwise.
- *
- * The ends wrap. With nothing in the list focused, any arrow starts at the beginning.
- * Left and Right name a physical side, so RTL swaps them: Right must reach the NEXT item,
- * which is then on the left. The block axis needs no such treatment, no language
- * reversing it.
- *
- * A key held with Alt, Ctrl or Meta is never taken: those are the browser's and the system's
- * shortcuts (Alt+Left goes back a page), and cancelling one to move a focus would break it.
- *
- * `items` is a FUNCTION, called only once the key is known to be one of the four. A keydown
- * handler on a container sees every key typed inside it (Tab, Enter, letters), and collecting
- * the list costs a query plus, for most callers, one style read per element.
- */
+/** Moves focus for the arrows and Home/End, and reports whether it took the key. */
 export declare function arrowNavigate(event: KeyboardEvent, container: HTMLElement, items: () => HTMLElement[], options?: {
     vertical?: boolean;
 }): boolean;

package/dist/utils/arrowNav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"arrowNav.js","names":[],"sources":["../../src/utils/arrowNav.ts"],"sourcesContent":["// @keyboard @a11y ~~— module-wide: the browser walks focus out of a group with Tab, never~~\n~~// from one control to the next, which is what the arrows are expected to do.\n~~/*\n Arrow-key navigation over a row or column of controls, in one place: VPagination, VTabs,\n * VToggle, VMenuPanel and VSideNavigation all use it.\n \n CONTRACT — the arrows and Home/End MOVE focus and never activate what they land on.\n * Activating on arrival would navigate somewhere the reader did not ask to go, or select a\n * value merely passed over. A component that wants selection on focus (VTabs'\n * `activation: 'automatic'`) arranges it in its own `@focus`.\n /\nimport { isRtl } from './direction'\n\n~~/\n~~ The elements the arrows may land on, discovered from the DOM rather than a registry. The\n * selector is the caller's, and it is what excludes anything disabled.\n \n `display: none` is filtered here because it has to be: VPagination hides its neighbours\n * through container queries as the bar narrows, and a consumer may hide a tab outright.\n * Focus must not land on an element nobody can see. The read costs a style recalculation\n * per element, which is why `arrowNavigate` asks for the list only once it knows the key is\n * one it handles.\n /\nexport function navigableItems(container: HTMLElement, selector: string): HTMLElement[] {\n return [...container.querySelectorAll<HTMLElement>(selector)].filter(\n (el) => getComputedStyle(el).display !== 'none',\n )\n}\n\n~~/\n~~ Moves focus for the arrows and Home/End, and reports whether it took the key~~.\n * `preventDefault` is applied only when it did, leaving the caller free otherwise.\n \n The ends wrap~~. With nothing in the list focused, any arrow starts at the beginning.\n * Left and Right name a physical side, so RTL swaps them: Right must reach the NEXT item,\n * which is then on the left. The block axis needs no such treatment, no language\n * reversing it.\n \n A key held with Alt, Ctrl or Meta is never taken: those are the browser's and the system's\n * shortcuts (Alt+Left goes back a page), and cancelling one to move a focus would break it.\n \n `items` is a FUNCTION, called only once the key is known to be one of the four. A keydown\n * handler on a container sees every key typed inside it (Tab, Enter, letters), and collecting\n * the list costs a query plus, for most callers, one style read per element.\n */\nexport function arrowNavigate(\n event: KeyboardEvent,\n container: HTMLElement,\n items: () => HTMLElement[],\n options: { vertical?: boolean } = {},\n): boolean {\n const vertical = options.vertical ?? false\n const keys = vertical\n ? ['ArrowDown', 'ArrowUp', 'Home', 'End']\n : ['ArrowRight', 'ArrowLeft', 'Home', 'End']\n if (event.altKey \|\| event.ctrlKey \|\| event.metaKey \|\| !keys.includes(event.key)) return false\n const list = items()\n if (list.length === 0) return false\n event.preventDefault()\n\n // A function, not a value: only the arrow branch asks, so Home and End are spared the\n // style recalculation that reading the direction forces.\n const forward = () =>\n vertical ? event.key === 'ArrowDown' : (event.key === 'ArrowRight') !== isRtl(container)\n const current = list.indexOf(document.activeElement as HTMLElement)\n const next =\n event.key === 'Home'\n ? 0\n : event.key === 'End'\n ? list.length - 1\n : current === -1\n ? 0\n : (current + (forward() ? 1 : -1) + list.length) % list.length\n list[next]?.focus()\n return true\n}\n"],"mappings":";;~~AAuBA~~,SAAgB,EAAe,GAAwB,GAAiC;CACtF,OAAO,CAAC,GAAG,EAAU,iBAA8B,CAAQ,CAAC,CAAC,CAAC,QAC3D,MAAO,iBAAiB,CAAE,CAAC,CAAC,YAAY,MAC3C;AACF;~~AAkBA~~,SAAgB,EACd,GACA,GACA,GACA,IAAkC,CAAC,GAC1B;CACT,IAAM,IAAW,EAAQ,YAAY,IAC/B,IAAO,IACT;EAAC;EAAa;EAAW;EAAQ;CAAK,IACtC;EAAC;EAAc;EAAa;EAAQ;CAAK;CAC7C,IAAI,EAAM,UAAU,EAAM,WAAW,EAAM,WAAW,CAAC,EAAK,SAAS,EAAM,GAAG,GAAG,OAAO;CACxF,IAAM,IAAO,EAAM;CACnB,IAAI,EAAK,WAAW,GAAG,OAAO;CAC9B,EAAM,eAAe;CAIrB,IAAM,UACJ,IAAW,EAAM,QAAQ,cAAe,EAAM,QAAQ,iBAAkB,EAAM,CAAS,GACnF,IAAU,EAAK,QAAQ,SAAS,aAA4B;CAUlE,OADA,EAPE,EAAM,QAAQ,SACV,IACA,EAAM,QAAQ,QACZ,EAAK,SAAS,IACd,MAAY,KACV,KACC,KAAW,EAAQ,IAAI,IAAI,MAAM,EAAK,UAAU,EAAK,OACtD,EAAE,MAAM,GACX;AACT"}
1	+ {"version":3,"file":"arrowNav.js","names":[],"sources":["../../src/utils/arrowNav.ts"],"sourcesContent":["// @keyboard @a11y\n/*\n Arrow-key navigation over a row or column of controls, in one place: VPagination, VTabs,\n * VToggle, VMenuPanel and VSideNavigation all use it.\n /\nimport { isRtl } from './direction'\n\n/* The elements the arrows may land on, discovered from the DOM rather than a registry. /\nexport function navigableItems(container: HTMLElement, selector: string): HTMLElement[] {\n return [...container.querySelectorAll<HTMLElement>(selector)].filter(\n (el) => getComputedStyle(el).display !== 'none',\n )\n}\n\n/* Moves focus for the arrows and Home/End, and reports whether it took the key. */\nexport function arrowNavigate(\n event: KeyboardEvent,\n container: HTMLElement,\n items: () => HTMLElement[],\n options: { vertical?: boolean } = {},\n): boolean {\n const vertical = options.vertical ?? false\n const keys = vertical\n ? ['ArrowDown', 'ArrowUp', 'Home', 'End']\n : ['ArrowRight', 'ArrowLeft', 'Home', 'End']\n if (event.altKey \|\| event.ctrlKey \|\| event.metaKey \|\| !keys.includes(event.key)) return false\n const list = items()\n if (list.length === 0) return false\n event.preventDefault()\n\n // A function, not a value: only the arrow branch asks, so Home and End are spared the\n // style recalculation that reading the direction forces.\n const forward = () =>\n vertical ? event.key === 'ArrowDown' : (event.key === 'ArrowRight') !== isRtl(container)\n const current = list.indexOf(document.activeElement as HTMLElement)\n const next =\n event.key === 'Home'\n ? 0\n : event.key === 'End'\n ? list.length - 1\n : current === -1\n ? 0\n : (current + (forward() ? 1 : -1) + list.length) % list.length\n list[next]?.focus()\n return true\n}\n"],"mappings":";;AAQA,SAAgB,EAAe,GAAwB,GAAiC;CACtF,OAAO,CAAC,GAAG,EAAU,iBAA8B,CAAQ,CAAC,CAAC,CAAC,QAC3D,MAAO,iBAAiB,CAAE,CAAC,CAAC,YAAY,MAC3C;AACF;AAGA,SAAgB,EACd,GACA,GACA,GACA,IAAkC,CAAC,GAC1B;CACT,IAAM,IAAW,EAAQ,YAAY,IAC/B,IAAO,IACT;EAAC;EAAa;EAAW;EAAQ;CAAK,IACtC;EAAC;EAAc;EAAa;EAAQ;CAAK;CAC7C,IAAI,EAAM,UAAU,EAAM,WAAW,EAAM,WAAW,CAAC,EAAK,SAAS,EAAM,GAAG,GAAG,OAAO;CACxF,IAAM,IAAO,EAAM;CACnB,IAAI,EAAK,WAAW,GAAG,OAAO;CAC9B,EAAM,eAAe;CAIrB,IAAM,UACJ,IAAW,EAAM,QAAQ,cAAe,EAAM,QAAQ,iBAAkB,EAAM,CAAS,GACnF,IAAU,EAAK,QAAQ,SAAS,aAA4B;CAUlE,OADA,EAPE,EAAM,QAAQ,SACV,IACA,EAAM,QAAQ,QACZ,EAAK,SAAS,IACd,MAAY,KACV,KACC,KAAW,EAAQ,IAAI,IAAI,MAAM,EAAK,UAAU,EAAK,OACtD,EAAE,MAAM,GACX;AACT"}

package/dist/utils/chip.d.ts CHANGED Viewed

@@ -1,16 +1,9 @@
 import { ChipSize } from '../components/VChip/VChip.js';
 /**
  * The scale of a VChip rendered INSIDE a text field: VCombobox's values, VFileInput's files.
- *
- * A chip is one step below its field, so a row of them does not push the field taller. Below
- * the lowest step of each pair there is no smaller size left, and `compact` makes up the
+ * Below the lowest step of each pair there is no smaller size left, and `compact` makes up the
  * difference instead, which is why an `sm` field forces it and an `md` one, already having
  * room, does not pass its own through.
- *
- * The HEIGHT is what earns the module its place. The field must force its `<input>` to the
- * chips' height or it grows on focus, and that height is decided inside the VChip subtree,
- * out of the field's reach. Deriving it from the same pair that picks the size makes the two
- * incapable of drifting.
  */
 export type ChipFieldSize = 'sm' | 'md' | 'lg';
 export interface ChipScale {

package/dist/utils/chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.js","names":[],"sources":["../../src/utils/chip.ts"],"sourcesContent":["import type { ChipSize } from '../components/VChip/VChip.vue'\n\n// @core\n/*\n The scale of a VChip rendered INSIDE a text field: VCombobox's values, VFileInput's files.\n \n ~~A chip is one step below its field, so a row of them does not push the field taller.~~ Below\n * the lowest step of each pair there is no smaller size left, and `compact` makes up the\n * difference instead, which is why an `sm` field forces it and an `md` one, already having\n * room, does not pass its own through.\n \n The HEIGHT is what earns the module its place. The field must force its `<input>` to the\n * chips' height or it grows on focus, and that height is decided inside the VChip subtree,\n * out of the field's reach. Deriving it from the same pair that picks the size makes the two\n * incapable of drifting.\n /\nexport type ChipFieldSize = 'sm' \| 'md' \| 'lg'\n\nexport interface ChipScale {\n size: ChipSize\n compact: boolean\n /* The chips' height, ready to be set on the field so it can match its own text to it. */\n height: string\n}\n\nexport function chipScaleFor(size: ChipFieldSize, compact: boolean): ChipScale {\n const chipSize = size === 'lg' ? 'sm' : 'xs'\n const chipCompact = size === 'lg' ? compact : size === 'sm'\n const base = `var(--vectis-control-height-${chipSize})`\n return {\n size: chipSize,\n compact: chipCompact,\n height: chipCompact ? `calc(${base} - var(--vectis-space-1))` : base,\n }\n}\n"],"mappings":";~~AAyBA~~,SAAgB,EAAa,GAAqB,GAA6B;CAC7E,IAAM,IAAW,MAAS,OAAO,OAAO,MAClC,IAAc,MAAS,OAAO,IAAU,MAAS,MACjD,IAAO,+BAA+B,EAAS;CACrD,OAAO;EACL,MAAM;EACN,SAAS;EACT,QAAQ,IAAc,QAAQ,EAAK,6BAA6B;CAClE;AACF"}
1	+ {"version":3,"file":"chip.js","names":[],"sources":["../../src/utils/chip.ts"],"sourcesContent":["import type { ChipSize } from '../components/VChip/VChip.vue'\n\n// @core\n/*\n The scale of a VChip rendered INSIDE a text field: VCombobox's values, VFileInput's files.\n * Below the lowest step of each pair there is no smaller size left, and `compact` makes up the\n * difference instead, which is why an `sm` field forces it and an `md` one, already having\n * room, does not pass its own through.\n /\nexport type ChipFieldSize = 'sm' \| 'md' \| 'lg'\n\nexport interface ChipScale {\n size: ChipSize\n compact: boolean\n /* The chips' height, ready to be set on the field so it can match its own text to it. */\n height: string\n}\n\nexport function chipScaleFor(size: ChipFieldSize, compact: boolean): ChipScale {\n const chipSize = size === 'lg' ? 'sm' : 'xs'\n const chipCompact = size === 'lg' ? compact : size === 'sm'\n const base = `var(--vectis-control-height-${chipSize})`\n return {\n size: chipSize,\n compact: chipCompact,\n height: chipCompact ? `calc(${base} - var(--vectis-space-1))` : base,\n }\n}\n"],"mappings":";AAkBA,SAAgB,EAAa,GAAqB,GAA6B;CAC7E,IAAM,IAAW,MAAS,OAAO,OAAO,MAClC,IAAc,MAAS,OAAO,IAAU,MAAS,MACjD,IAAO,+BAA+B,EAAS;CACrD,OAAO;EACL,MAAM;EACN,SAAS;EACT,QAAQ,IAAc,QAAQ,EAAK,6BAA6B;CAClE;AACF"}

package/dist/utils/clock.d.ts CHANGED Viewed

@@ -23,40 +23,24 @@ export declare function hourWithMeridiem(hour24: number, meridiem: Meridiem): nu
  * not a time at all: `'09:30'` with PM gives `'21:30'`.
  */
 export declare function withMeridiem(time: string | null | undefined, meridiem: Meridiem): string | null;
-/**
- * Snaps a minute to the nearest allowed step and wraps it back inside the hour.
- *
- * Both ends need the wrap: 58 snapped to five-minute steps lands on 60, which is 0, and
- * stepping back from 0 with the keyboard passes through -1, which is 59.
- */
+/** Snaps a minute to the nearest allowed step and wraps it back inside the hour. */
 export declare function snapMinute(minute: number, step: number): number;
 /**
- * Which mark a pointer offset from the dial's centre is aiming at. Marks are numbered
- * clockwise from twelve o'clock and the nearest wins. `dy` is negated because screen
- * coordinates grow DOWNWARD and the angle is measured from the top.
+ * Which mark a pointer offset from the dial's centre is aiming at. Marks are numbered clockwise
+ * from twelve o'clock and the nearest wins.
  */
 export declare function angleToIndex(dx: number, dy: number, segments: number): number;
 /** How far from the centre a finger landed, as a fraction: nothing at the centre, one at the edge. */
 export declare function distanceFraction(dx: number, dy: number, radius: number): number;
 /**
- * How close to the centre a pointer must land to be aiming at the INNER ring, the one
- * holding the small hours of a 24-hour dial: the halfway mark between the two rings.
- *
- * TRAP: the number is DERIVED from the dial tokens. A 256px dial with 48px numerals puts
- * the rings' centres at 104px and 56px from the middle, whose midpoint is 0.625 of the
- * radius. Change either token without changing this and the threshold no longer separates
- * the two rings: a tap near the boundary quietly sets the wrong hour.
+ * The number is DERIVED from the dial tokens. A 256px dial with 48px numerals puts the rings'
+ * centres at 104px and 56px from the middle, whose midpoint is 0.625 of the radius.
  */
 export declare const DIAL_INNER_THRESHOLD = 0.625;
 /**
- * How close to the centre a pointer lands on NOTHING. At the very centre there is no angle
- * at all (`atan2(0, 0)` answers half a turn, which would set six o'clock), and the centre dot
- * drawn there is not a numeral.
- *
- * TRAP: derived from the same tokens as the threshold above: the inner ring's numerals
- * start 32px from the middle (56px less half a 48px numeral), 0.25 of the radius, so the
- * dead zone stops short of them. Grow it past 0.25 and the inner small hours lose their
- * inner half to it.
+ * Derived from the same tokens as the threshold above: the inner ring's numerals start 32px
+ * from the middle (56px less half a 48px numeral), 0.25 of the radius, so the dead zone stops
+ * short of them. Grow it past 0.25 and the inner small hours lose their inner half to it.
  */
 export declare const DIAL_DEAD_ZONE = 0.2;
 /**
@@ -64,25 +48,21 @@ export declare const DIAL_DEAD_ZONE = 0.2;
  * carries 00 then 13-23. Index 0 of each is the mark at twelve o'clock.
  */
 export declare function dialIndexToHour24(index: number, ring: 'outer' | 'inner'): number;
-/** The way back, which is what tells the hand where to point. */
+/** The way back, which tells the hand where to point. */
 export declare function hour24ToDial(hour: number): {
     index: number;
     ring: 'outer' | 'inner';
 };
 export interface TimeOption {
-    /** The canonical time, which is what the component's value will be set to. */
+    /** The canonical time, which the component's value will be set to. */
     value: string;
     /** The same time written out for the reader: "07:30", or "7:30 AM". */
     label: string;
 }
 /**
- * Every time of the day at a given interval, midnight to the last one before the next.
- *
- * It knows nothing of the restrictions: VTimeInput filters the rows it offers, so the list
- * itself stays one table per step and locale.
- *
- * A nonsensical step (zero, a fraction, more than an hour) falls back to hourly, so the
- * list stays FINITE even when the component's warning about it was ignored.
+ * Every time of the day at a given interval, midnight to the last one before the next. A
+ * nonsensical step (zero, a fraction, more than an hour) falls back to hourly, so the list
+ * stays FINITE even when the component's warning about it was ignored.
  */
 export declare function timeList(step: number, locale: string, format: HourFormat): TimeOption[];
 /**
@@ -91,12 +71,9 @@ export declare function timeList(step: number, locale: string, format: HourForma
  */
 export declare function formatTimeMask(digits: string): string;
 /**
- * Where the caret belongs to sit just after `n` digits. A closed formula rather than
- * `date.ts`'s scan, the colon always being in the same place.
- *
- * `skipSeparator` means something was INSERTED, and the caret then steps over the colon
- * into the minutes. On a DELETION it stays in front of it, or the next Backspace steps
- * over the colon instead of erasing a digit and the key appears to do nothing.
+ * Where the caret belongs to sit just after `n` digits. On a DELETION it stays in front of it,
+ * or the next Backspace steps over the colon instead of erasing a digit and the key appears to
+ * do nothing.
  */
 export declare function timeCaret(n: number, skipSeparator?: boolean): number;
 /**

package/dist/utils/clock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"clock.js","names":[],"sources":["../../src/utils/clock.ts"],"sourcesContent":["// @ssr @core — module-wide: every export below is @core unless tagged otherwise.\n/*\n What the CLOCK and the FIELD need of the time domain: the AM/PM arithmetic, the dial's\n * geometry, the typing mask and the list of times. VTimePicker and VTimeInput are its only\n * consumers; `./time` holds what VCalendar reads as well, and this is kept apart so that\n * no calendar pays for a dial it never draws.\n \n The dial's geometry lives here rather than in the component for a practical reason: jsdom\n * lays nothing out and measures every element at zero, so a calculation kept inside the\n * component is untestable.\n /\nimport { digitsOf, pad2 } from './text'\nimport { formatTime, parseTime, formatTimeDisplay } from './time'\nimport type { HourFormat, Meridiem } from './time'\n\n/\n Turns an hour of the 24-hour clock into the hour a 12-hour clock face shows, together\n * with which half of the day it belongs to: midnight is 12 AM, noon is 12 PM, and eleven\n * at night is 11 PM.\n /\nexport function to12h(hour24: number): { hour: number; meridiem: Meridiem } {\n const meridiem: Meridiem = hour24 >= 12 ? 'PM' : 'AM'\n const hour = hour24 % 12 === 0 ? 12 : hour24 % 12\n return { hour, meridiem }\n}\n\n/\n The way back: an hour read off a 12-hour clock face, plus the half of the day it is in,\n * gives the hour on the 24-hour clock: 12 in the morning is 0, 12 in the afternoon is 12.\n /\nexport function to24h(hour12: number, meridiem: Meridiem): number {\n const base = hour12 % 12 // Twelve is the zero of the cycle, not its top.\n return meridiem === 'PM' ? base + 12 : base\n}\n\n/\n The same hour moved into the other half of the day, or left where it is: 9 with PM gives\n * 21, and 21 with PM stays 21. It is what an AM/PM control does to the hour it qualifies.\n /\nexport function hourWithMeridiem(hour24: number, meridiem: Meridiem): number {\n return to24h(to12h(hour24).hour, meridiem)\n}\n\n/\n A canonical time moved into a half of the day, its minutes untouched, or `null` when it is\n * not a time at all: `'09:30'` with PM gives `'21:30'`.\n /\nexport function withMeridiem(time: string \| null \| undefined, meridiem: Meridiem): string \| null {\n const parts = parseTime(time)\n return parts ? formatTime(hourWithMeridiem(parts.hour, meridiem), parts.minute) : null\n}\n\n/\n Snaps a minute to the nearest allowed step and wraps it back inside the hour.\n \n Both ends need the wrap: 58 snapped to five-minute steps lands on 60, which is 0, and\n * stepping back from 0 with the keyboard passes through -1, which is 59.\n /\nexport function snapMinute(minute: number, step: number): number {\n // A step is whole minutes: 7.5 divides 60, and wrote `09:7.5` into the model.\n const size = Math.round(step)\n const snapped = size <= 1 ? Math.round(minute) : Math.round(minute / size) size\n return ((snapped % 60) + 60) % 60\n}\n\n/*\n Which mark a pointer offset from the dial's centre is aiming at. Marks are numbered\n * clockwise from twelve o'clock and the nearest wins. `dy` is negated because screen\n * coordinates grow DOWNWARD and the angle is measured from the top.\n /\nexport function angleToIndex(dx: number, dy: number, segments: number): number {\n // The angle from twelve o'clock, clockwise-positive, as a fraction of a full turn.\n const angle = Math.atan2(dx, -dy)\n const turn = (angle / (2 Math.PI) + 1) % 1\n return Math.round(turn * segments) % segments\n}\n\n/** How far from the centre a finger landed, as a fraction: nothing at the centre, one at the edge. /\nexport function distanceFraction(dx: number, dy: number, radius: number): number {\n return radius > 0 ? Math.hypot(dx, dy) / radius : 0\n}\n\n/\n How close to the centre a pointer must land to be aiming at the INNER ring, the one\n * holding the small hours of a 24-hour dial: the halfway mark between the two rings.\n \n TRAP: the number is DERIVED from the dial tokens. A 256px dial with 48px numerals puts\n * the rings' centres at 104px and 56px from the middle, whose midpoint is 0.625 of the\n * radius. Change either token without changing this and the threshold no longer separates\n * the two rings: a tap near the boundary quietly sets the wrong hour.\n /\nexport const DIAL_INNER_THRESHOLD = 0.625\n\n/\n How close to the centre a pointer lands on NOTHING. At the very centre there is no angle\n * at all (`atan2(0, 0)` answers half a turn, which would set six o'clock), and the centre dot\n * drawn there is not a numeral.\n \n TRAP: derived from the same tokens as the threshold above: the inner ring's numerals\n * start 32px from the middle (56px less half a 48px numeral), 0.25 of the radius, so the\n * dead zone stops short of them. Grow it past 0.25 and the inner small hours lose their\n * inner half to it.\n /\nexport const DIAL_DEAD_ZONE = 0.2\n\n/\n Which hour a mark stands for on the two-ring dial: outer carries 12 then 1-11, inner\n * carries 00 then 13-23. Index 0 of each is the mark at twelve o'clock.\n /\nexport function dialIndexToHour24(index: number, ring: 'outer' \| 'inner'): number {\n if (ring === 'outer') return index === 0 ? 12 : index\n return index === 0 ? 0 : index + 12\n}\n\n/* The way back, which is what tells the hand where to point. /\nexport function hour24ToDial(hour: number): { index: number; ring: 'outer' \| 'inner' } {\n if (hour === 0) return { index: 0, ring: 'inner' }\n if (hour === 12) return { index: 0, ring: 'outer' }\n if (hour > 12) return { index: hour - 12, ring: 'inner' }\n return { index: hour, ring: 'outer' }\n}\n\nexport interface TimeOption {\n /* The canonical time, which is what the component's value will be set to. /\n value: string\n /* The same time written out for the reader: \"07:30\", or \"7:30 AM\". /\n label: string\n}\n\n/\n Every time of the day at a given interval, midnight to the last one before the next.\n \n It knows nothing of the restrictions: VTimeInput filters the rows it offers, so the list\n * itself stays one table per step and locale.\n \n A nonsensical step (zero, a fraction, more than an hour) falls back to hourly, so the\n * list stays FINITE even when the component's warning about it was ignored.\n /\nexport function timeList(step: number, locale: string, format: HourFormat): TimeOption[] {\n const safe = Number.isInteger(step) && step >= 1 && step <= 60 ? step : 60\n const out: TimeOption[] = []\n for (let m = 0; m < 24 60; m += safe) {\n const value = formatTime(Math.floor(m / 60), m % 60)\n out.push({ value, label: formatTimeDisplay(value, locale, format) })\n }\n return out\n}\n\n/\n Unlike a date's separator this one is UNIVERSAL: every language writes a time with a\n * colon, and only the 12/24-hour cycle varies. It therefore stays out of the dictionary,\n * where the empty field's `hh:mm` placeholder does belong — that one is made of the\n * initials of words.\n /\nconst TIME_SEPARATOR = ':'\n\n/\n Lays a run of typed digits out as a time. The colon appears AS SOON AS the hour is\n * complete: typing \"09\" already gives \"09:\", exactly as a date's separators do.\n /\nexport function formatTimeMask(digits: string): string {\n const all = digitsOf(digits).slice(0, 4)\n return all.length >= 2 ? `${all.slice(0, 2)}${TIME_SEPARATOR}${all.slice(2)}` : all\n}\n\n/\n Where the caret belongs to sit just after `n` digits. A closed formula rather than\n * `date.ts`'s scan, the colon always being in the same place.\n \n `skipSeparator` means something was INSERTED, and the caret then steps over the colon\n * into the minutes. On a DELETION it stays in front of it, or the next Backspace steps\n * over the colon instead of erasing a digit and the key appears to do nothing.\n /\nexport function timeCaret(n: number, skipSeparator = false): number {\n if (n < 2) return n\n if (n === 2) return skipSeparator ? 3 : 2\n return Math.min(n + 1, 5)\n}\n\n/\n A canonical time written into the field in whichever form is SHOWN. On a 12-hour clock the\n * hour comes back into 1-12: the meridiem belongs to the toggle beside the field, never to\n * the text.\n /\nexport function timeToMask(time: string \| null \| undefined, format: HourFormat): string {\n const parts = parseTime(time)\n if (!parts) return ''\n const hour = format === '12h' ? to12h(parts.hour).hour : parts.hour\n return formatTimeMask(pad2(hour) + pad2(parts.minute))\n}\n\n/\n What was typed read back into a canonical time, or `null` when it is incomplete, too long\n * or not a real time. On a 12-hour clock this is the ONE place the typed digits and the\n * meridiem toggle meet.\n */\nexport function parseTimeMask(\n text: string,\n format: HourFormat,\n meridiem: Meridiem = 'AM',\n): string \| null {\n const digits = digitsOf(text)\n if (digits.length !== 4) return null\n const hour = Number(digits.slice(0, 2))\n const minute = Number(digits.slice(2))\n if (minute > 59) return null\n if (format === '12h')\n return hour >= 1 && hour <= 12 ? formatTime(to24h(hour, meridiem), minute) : null\n return hour <= 23 ? formatTime(hour, minute) : null\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"clock.js","names":[],"sources":["../../src/utils/clock.ts"],"sourcesContent":["// @ssr @core\n/*\n Clock- and input-specific time arithmetic stays outside the smaller time module imported by\n * calendar views.\n /\nimport { digitsOf, pad2 } from './text'\nimport { formatTime, parseTime, formatTimeDisplay } from './time'\nimport type { HourFormat, Meridiem } from './time'\n\n/\n Turns an hour of the 24-hour clock into the hour a 12-hour clock face shows, together\n * with which half of the day it belongs to: midnight is 12 AM, noon is 12 PM, and eleven\n * at night is 11 PM.\n /\nexport function to12h(hour24: number): { hour: number; meridiem: Meridiem } {\n const meridiem: Meridiem = hour24 >= 12 ? 'PM' : 'AM'\n const hour = hour24 % 12 === 0 ? 12 : hour24 % 12\n return { hour, meridiem }\n}\n\n/\n The way back: an hour read off a 12-hour clock face, plus the half of the day it is in,\n * gives the hour on the 24-hour clock: 12 in the morning is 0, 12 in the afternoon is 12.\n /\nexport function to24h(hour12: number, meridiem: Meridiem): number {\n const base = hour12 % 12 // Twelve is the zero of the cycle, not its top.\n return meridiem === 'PM' ? base + 12 : base\n}\n\n/\n The same hour moved into the other half of the day, or left where it is: 9 with PM gives\n * 21, and 21 with PM stays 21. It is what an AM/PM control does to the hour it qualifies.\n /\nexport function hourWithMeridiem(hour24: number, meridiem: Meridiem): number {\n return to24h(to12h(hour24).hour, meridiem)\n}\n\n/\n A canonical time moved into a half of the day, its minutes untouched, or `null` when it is\n * not a time at all: `'09:30'` with PM gives `'21:30'`.\n /\nexport function withMeridiem(time: string \| null \| undefined, meridiem: Meridiem): string \| null {\n const parts = parseTime(time)\n return parts ? formatTime(hourWithMeridiem(parts.hour, meridiem), parts.minute) : null\n}\n\n/* Snaps a minute to the nearest allowed step and wraps it back inside the hour. /\nexport function snapMinute(minute: number, step: number): number {\n const size = Math.round(step)\n const snapped = size <= 1 ? Math.round(minute) : Math.round(minute / size) size\n return ((snapped % 60) + 60) % 60\n}\n\n/*\n Which mark a pointer offset from the dial's centre is aiming at. Marks are numbered clockwise\n * from twelve o'clock and the nearest wins.\n /\nexport function angleToIndex(dx: number, dy: number, segments: number): number {\n const angle = Math.atan2(dx, -dy)\n const turn = (angle / (2 Math.PI) + 1) % 1\n return Math.round(turn * segments) % segments\n}\n\n/** How far from the centre a finger landed, as a fraction: nothing at the centre, one at the edge. /\nexport function distanceFraction(dx: number, dy: number, radius: number): number {\n return radius > 0 ? Math.hypot(dx, dy) / radius : 0\n}\n\n/\n The number is DERIVED from the dial tokens. A 256px dial with 48px numerals puts the rings'\n * centres at 104px and 56px from the middle, whose midpoint is 0.625 of the radius.\n /\nexport const DIAL_INNER_THRESHOLD = 0.625\n\n/\n Derived from the same tokens as the threshold above: the inner ring's numerals start 32px\n * from the middle (56px less half a 48px numeral), 0.25 of the radius, so the dead zone stops\n * short of them. Grow it past 0.25 and the inner small hours lose their inner half to it.\n /\nexport const DIAL_DEAD_ZONE = 0.2\n\n/\n Which hour a mark stands for on the two-ring dial: outer carries 12 then 1-11, inner\n * carries 00 then 13-23. Index 0 of each is the mark at twelve o'clock.\n /\nexport function dialIndexToHour24(index: number, ring: 'outer' \| 'inner'): number {\n if (ring === 'outer') return index === 0 ? 12 : index\n return index === 0 ? 0 : index + 12\n}\n\n/* The way back, which tells the hand where to point. /\nexport function hour24ToDial(hour: number): { index: number; ring: 'outer' \| 'inner' } {\n if (hour === 0) return { index: 0, ring: 'inner' }\n if (hour === 12) return { index: 0, ring: 'outer' }\n if (hour > 12) return { index: hour - 12, ring: 'inner' }\n return { index: hour, ring: 'outer' }\n}\n\nexport interface TimeOption {\n /* The canonical time, which the component's value will be set to. /\n value: string\n /* The same time written out for the reader: \"07:30\", or \"7:30 AM\". /\n label: string\n}\n\n/\n Every time of the day at a given interval, midnight to the last one before the next. A\n * nonsensical step (zero, a fraction, more than an hour) falls back to hourly, so the list\n * stays FINITE even when the component's warning about it was ignored.\n /\nexport function timeList(step: number, locale: string, format: HourFormat): TimeOption[] {\n const safe = Number.isInteger(step) && step >= 1 && step <= 60 ? step : 60\n const out: TimeOption[] = []\n for (let m = 0; m < 24 60; m += safe) {\n const value = formatTime(Math.floor(m / 60), m % 60)\n out.push({ value, label: formatTimeDisplay(value, locale, format) })\n }\n return out\n}\n\n/\n Unlike a date's separator this one is UNIVERSAL: every language writes a time with a colon,\n * and only the 12/24-hour cycle varies. It therefore stays out of the dictionary, where the\n * empty field's `hh:mm` placeholder does belong; that one is made of the initials of words.\n /\nconst TIME_SEPARATOR = ':'\n\n/\n Lays a run of typed digits out as a time. The colon appears AS SOON AS the hour is\n * complete: typing \"09\" already gives \"09:\", exactly as a date's separators do.\n /\nexport function formatTimeMask(digits: string): string {\n const all = digitsOf(digits).slice(0, 4)\n return all.length >= 2 ? `${all.slice(0, 2)}${TIME_SEPARATOR}${all.slice(2)}` : all\n}\n\n/\n Where the caret belongs to sit just after `n` digits. On a DELETION it stays in front of it,\n * or the next Backspace steps over the colon instead of erasing a digit and the key appears to\n * do nothing.\n /\nexport function timeCaret(n: number, skipSeparator = false): number {\n if (n < 2) return n\n if (n === 2) return skipSeparator ? 3 : 2\n return Math.min(n + 1, 5)\n}\n\n/\n A canonical time written into the field in whichever form is SHOWN. On a 12-hour clock the\n * hour comes back into 1-12: the meridiem belongs to the toggle beside the field, never to\n * the text.\n /\nexport function timeToMask(time: string \| null \| undefined, format: HourFormat): string {\n const parts = parseTime(time)\n if (!parts) return ''\n const hour = format === '12h' ? to12h(parts.hour).hour : parts.hour\n return formatTimeMask(pad2(hour) + pad2(parts.minute))\n}\n\n/\n What was typed read back into a canonical time, or `null` when it is incomplete, too long\n * or not a real time. On a 12-hour clock this is the ONE place the typed digits and the\n * meridiem toggle meet.\n */\nexport function parseTimeMask(\n text: string,\n format: HourFormat,\n meridiem: Meridiem = 'AM',\n): string \| null {\n const digits = digitsOf(text)\n if (digits.length !== 4) return null\n const hour = Number(digits.slice(0, 2))\n const minute = Number(digits.slice(2))\n if (minute > 59) return null\n if (format === '12h')\n return hour >= 1 && hour <= 12 ? formatTime(to24h(hour, meridiem), minute) : null\n return hour <= 23 ? formatTime(hour, minute) : null\n}\n"],"mappings":"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"}

package/dist/utils/css.d.ts CHANGED Viewed

@@ -1,23 +1,12 @@
 /**
- * A dimension always in pixels: `12` and `'12'` both give `12px`.
- *
- * Anything non-numeric, or negative, yields `undefined` rather than a custom property CSS cannot read:
- * an invalid value breaks the geometry outright, where nothing at all lets the component's
- * own default apply.
- *
- * TRAP: `Number`, never `parseFloat`: the latter reads a numeric PREFIX, so `'12rem'`
- * would come out as `12px`, a wrong size with nothing to say so. `Number('')` being 0, a
- * blank string is refused before it gets there.
+ * Accept complete numeric strings; parseFloat would silently reinterpret 12rem as 12px. Reject
+ * blanks before Number converts them to zero.
  */
 export declare function px(v: number | string | undefined): string | undefined;
 /**
- * A dimension in any unit: a bare number is read as pixels, a string passes through
- * untouched: `50%`, `20vw`, `max-content`.
- *
- * Unlike `px` above, the string is deliberately not examined: CSS judges it, and one it
- * cannot parse falls back to whatever the component declares for itself. A NUMBER is judged
- * here, as `px` judges one: a width computed as `NaN` or below zero, and an empty string,
- * give nothing rather than a declaration CSS drops, so the component's own default applies.
+ * A dimension in any unit: a bare number is read as pixels, a string passes through untouched:
+ * `50%`, `20vw`, `max-content`. Unlike `px` above, the string is deliberately not examined: CSS
+ * judges it, and one it cannot parse falls back to whatever the component declares for itself.
  */
 export declare function cssSize(v: number | string | undefined): string | undefined;
 /**

package/dist/utils/css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"css.js","names":[],"sources":["../../src/utils/css.ts"],"sourcesContent":["// @core\n/*\n A ~~dimension~~ ~~always in pixels: `12` and `'12'` both give `12px`.\n \n Anything non-~~numeric, or negative, yields `undefined` rather than a custom property CSS cannot read:\n * an invalid value breaks the geometry outright, where nothing at all lets the component's\n * own default apply.\n \n TRAP: `Number`, never `parseFloat`: ~~the~~ ~~latter~~ ~~reads~~ ~~a numeric PREFIX, so `'~~12rem~~'`\n~~ * would come out as `12px~~`, a wrong size with nothing to say so~~. ~~`Number('')` being 0, a~~\n * ~~blank~~ ~~string~~ is ~~refused~~ ~~before~~ it ~~gets there~~.\n /\nexport function px(v: number \| string \| undefined): string \| undefined {\n if (v === undefined) return undefined\n const n = typeof v === 'number' ? v : v.trim() === '' ? Number.NaN : Number(v)\n return Number.isFinite(n) && n >= 0 ? `${n}px` : undefined\n}\n\n// @core\n/\n A dimension in any unit: a bare number is read as pixels, a string passes through\n * ~~untouched:~~ `50%`, `20vw`, `max-content~~`.\n~~ ~~\n ~~ Unlike `px` above, the string is deliberately not examined: CSS judges it, and one it\n * cannot parse falls back to whatever the component declares for itself. A NUMBER is judged\n * here, as `px` judges one: a width computed as `NaN` or below zero, and an empty string,\n * give nothing rather than a declaration CSS drops, so the component's own default applies.\n /\nexport function cssSize(v: number \| string \| undefined): string \| undefined {\n if (v === undefined \|\| v === '') return undefined\n if (typeof v === 'string') return v\n return Number.isFinite(v) && v >= 0 ? `${v}px` : undefined\n}\n\n// @core\n/\n The inline style carrying a consumer's own colour to a component's sheet, which derives\n * every shade from `--custom-color`: VChip, VAvatar and VBadge.\n \n `undefined` when no colour was given, so a style array holding it binds nothing and the\n * tone the sheet already paints stays in force.\n */\nexport function customColorStyle(\n color: string \| undefined,\n): { '--custom-color': string } \| undefined {\n return color === undefined ? undefined : { '--custom-color': color }\n}\n"],"mappings":";~~AAYA~~,SAAgB,EAAG,GAAoD;CACrE,IAAI,MAAM,KAAA,GAAW;CACrB,IAAM,IAAI,OAAO,KAAM,WAAW,IAAI,EAAE,KAAK,MAAM,KAAK,MAAa,OAAO,CAAC;CAC7E,OAAO,OAAO,SAAS,CAAC,KAAK,KAAK,IAAI,GAAG,EAAE,MAAM,KAAA;AACnD;~~AAYA~~,SAAgB,EAAQ,GAAoD;CACtE,YAAM,KAAA,KAAa,MAAM,KAE7B,OADI,OAAO,KAAM,WAAiB,IAC3B,OAAO,SAAS,CAAC,KAAK,KAAK,IAAI,GAAG,EAAE,MAAM,KAAA;AACnD;AAUA,SAAgB,EACd,GAC0C;CAC1C,OAAO,MAAU,KAAA,IAAY,KAAA,IAAY,EAAE,kBAAkB,EAAM;AACrE"}
1	+ {"version":3,"file":"css.js","names":[],"sources":["../../src/utils/css.ts"],"sourcesContent":["// @core\n/*\n Accept complete numeric strings; parseFloat would silently reinterpret 12rem as 12px. Reject\n * blanks before Number converts them to zero.\n /\nexport function px(v: number \| string \| undefined): string \| undefined {\n if (v === undefined) return undefined\n const n = typeof v === 'number' ? v : v.trim() === '' ? Number.NaN : Number(v)\n return Number.isFinite(n) && n >= 0 ? `${n}px` : undefined\n}\n\n// @core\n/\n A dimension in any unit: a bare number is read as pixels, a string passes through untouched:\n * `50%`, `20vw`, `max-content`. Unlike `px` above, the string is deliberately not examined: CSS\n * judges it, and one it cannot parse falls back to whatever the component declares for itself.\n /\nexport function cssSize(v: number \| string \| undefined): string \| undefined {\n if (v === undefined \|\| v === '') return undefined\n if (typeof v === 'string') return v\n return Number.isFinite(v) && v >= 0 ? `${v}px` : undefined\n}\n\n// @core\n/\n The inline style carrying a consumer's own colour to a component's sheet, which derives\n * every shade from `--custom-color`: VChip, VAvatar and VBadge.\n \n `undefined` when no colour was given, so a style array holding it binds nothing and the\n * tone the sheet already paints stays in force.\n */\nexport function customColorStyle(\n color: string \| undefined,\n): { '--custom-color': string } \| undefined {\n return color === undefined ? undefined : { '--custom-color': color }\n}\n"],"mappings":";AAKA,SAAgB,EAAG,GAAoD;CACrE,IAAI,MAAM,KAAA,GAAW;CACrB,IAAM,IAAI,OAAO,KAAM,WAAW,IAAI,EAAE,KAAK,MAAM,KAAK,MAAa,OAAO,CAAC;CAC7E,OAAO,OAAO,SAAS,CAAC,KAAK,KAAK,IAAI,GAAG,EAAE,MAAM,KAAA;AACnD;AAQA,SAAgB,EAAQ,GAAoD;CACtE,YAAM,KAAA,KAAa,MAAM,KAE7B,OADI,OAAO,KAAM,WAAiB,IAC3B,OAAO,SAAS,CAAC,KAAK,KAAK,IAAI,GAAG,EAAE,MAAM,KAAA;AACnD;AAUA,SAAgB,EACd,GAC0C;CAC1C,OAAO,MAAU,KAAA,IAAY,KAAA,IAAY,EAAE,kBAAkB,EAAM;AACrE"}