vectis-ui 0.8.1 → 0.9.0

package/dist/tokens.json

@@ -569,7 +569,7 @@
       "surface-skeleton": {
         "$type": "color",
         "$value": "{color.gray.200}",
-        "$description": "The background of the loading silhouettes (VSkeletonLoader); the highlight derives from it in CSS"
+        "$description": "The background of VSkeletonLoader's silhouettes, from which its highlight is derived"
       },
       "text-on-inverse": {
         "$type": "color",
@@ -578,11 +578,13 @@
       },
       "text": {
         "$type": "color",
-        "$value": "{color.gray.900}"
+        "$value": "{color.gray.900}",
+        "$description": "The running text of the interface"
       },
       "text-muted": {
         "$type": "color",
-        "$value": "{color.gray.600}"
+        "$value": "{color.gray.600}",
+        "$description": "Secondary text: hints, captions, descriptions, start icons"
       },
       "text-subtle": {
         "$type": "color",
@@ -601,7 +603,8 @@
       },
       "border": {
         "$type": "color",
-        "$value": "{color.gray.200}"
+        "$value": "{color.gray.200}",
+        "$description": "Dividers, and the frames of cards, tables and panels"
       },
       "border-strong": {
         "$type": "color",
@@ -610,15 +613,18 @@
       },
       "accent": {
         "$type": "color",
-        "$value": "{color.indigo.600}"
+        "$value": "{color.indigo.600}",
+        "$description": "The brand color: solid buttons, checked controls, the selected item"
       },
       "accent-hover": {
         "$type": "color",
-        "$value": "{color.indigo.700}"
+        "$value": "{color.indigo.700}",
+        "$description": "The accent color under the pointer"
       },
       "accent-active": {
         "$type": "color",
-        "$value": "{color.indigo.800}"
+        "$value": "{color.indigo.800}",
+        "$description": "The accent color while pressed"
       },
       "accent-surface": {
         "$type": "color",
@@ -627,7 +633,8 @@
       },
       "accent-border": {
         "$type": "color",
-        "$value": "{color.indigo.200}"
+        "$value": "{color.indigo.200}",
+        "$description": "The border of a tinted accent element, matching the accent surface"
       },
       "accent-text": {
         "$type": "color",
@@ -636,75 +643,93 @@
       },
       "danger": {
         "$type": "color",
-        "$value": "{color.red.600}"
+        "$value": "{color.red.600}",
+        "$description": "Destructive actions and errors: solid buttons, error states"
       },
       "danger-hover": {
         "$type": "color",
-        "$value": "{color.red.700}"
+        "$value": "{color.red.700}",
+        "$description": "The danger color under the pointer"
       },
       "danger-active": {
         "$type": "color",
-        "$value": "{color.red.800}"
+        "$value": "{color.red.800}",
+        "$description": "The danger color while pressed"
       },
       "danger-surface": {
         "$type": "color",
-        "$value": "{color.red.50}"
+        "$value": "{color.red.50}",
+        "$description": "A tinted danger background (soft buttons and chips, a destructive menu item)"
       },
       "danger-border": {
         "$type": "color",
-        "$value": "{color.red.200}"
+        "$value": "{color.red.200}",
+        "$description": "The border of a tinted danger element, matching the danger surface"
       },
       "danger-text": {
         "$type": "color",
-        "$value": "{color.red.700}"
+        "$value": "{color.red.700}",
+        "$description": "Danger text on a neutral or tinted background: error messages, a destructive menu item"
       },
       "success": {
         "$type": "color",
-        "$value": "{color.green.700}"
+        "$value": "{color.green.700}",
+        "$description": "A positive outcome: solid chips, badges, notifications"
       },
       "success-hover": {
         "$type": "color",
-        "$value": "{color.green.800}"
+        "$value": "{color.green.800}",
+        "$description": "The success color under the pointer"
       },
       "success-active": {
         "$type": "color",
-        "$value": "{color.green.900}"
+        "$value": "{color.green.900}",
+        "$description": "The success color while pressed"
       },
       "success-surface": {
         "$type": "color",
-        "$value": "{color.green.50}"
+        "$value": "{color.green.50}",
+        "$description": "A tinted success background (soft chips, badges, notifications)"
       },
       "success-border": {
         "$type": "color",
-        "$value": "{color.green.200}"
+        "$value": "{color.green.200}",
+        "$description": "The border of a tinted success element, matching the success surface"
       },
       "success-text": {
         "$type": "color",
-        "$value": "{color.green.800}"
+        "$value": "{color.green.800}",
+        "$description": "Success text on a neutral or tinted background"
       },
       "warning": {
         "$type": "color",
-        "$value": "{color.amber.600}"
+        "$value": "{color.amber.600}",
+        "$description": "A situation that calls for attention: solid chips, badges, notifications"
       },
       "warning-hover": {
         "$type": "color",
-        "$value": "{color.amber.700}"
+        "$value": "{color.amber.700}",
+        "$description": "The warning color under the pointer"
       },
       "warning-active": {
         "$type": "color",
-        "$value": "{color.amber.800}"
+        "$value": "{color.amber.800}",
+        "$description": "The warning color while pressed"
       },
       "warning-surface": {
         "$type": "color",
-        "$value": "{color.amber.50}"
+        "$value": "{color.amber.50}",
+        "$description": "A tinted warning background (soft chips, badges, notifications)"
       },
       "warning-border": {
         "$type": "color",
-        "$value": "{color.amber.200}"
+        "$value": "{color.amber.200}",
+        "$description": "The border of a tinted warning element, matching the warning surface"
       },
       "warning-text": {
         "$type": "color",
-        "$value": "{color.amber.900}"
+        "$value": "{color.amber.900}",
+        "$description": "Warning text on a neutral or tinted background"
       },
       "backdrop": {
         "$type": "color",
@@ -713,35 +738,35 @@
       },
       "event-surface": {
         "$type": "color",
-        "$value": "oklch(0.95 0.045 var(--vectis-calendar-event-hue, 265))",
-        "$description": "The face of a calendar event that carries no colour of its own"
+        "$value": "oklch(0.95 0.045 265)",
+        "$description": "The face of a calendar event that carries no color of its own"
       },
       "event-border": {
         "$type": "color",
-        "$value": "oklch(0.85 0.08 var(--vectis-calendar-event-hue, 265))",
-        "$description": "The edge of that event, and the bar marking its leading side"
+        "$value": "oklch(0.85 0.08 265)",
+        "$description": "The edge of that calendar event, and the bar marking its leading side"
       },
       "event-text": {
         "$type": "color",
-        "$value": "oklch(0.4 0.11 var(--vectis-calendar-event-hue, 265))",
-        "$description": "The title written on that face"
+        "$value": "oklch(0.4 0.11 265)",
+        "$description": "The title of that calendar event"
       }
     },
     "text": {
       "family": {
         "$type": "fontFamily",
         "$value": "{font.family.sans}",
-        "$description": "The font of all the design system text"
+        "$description": "The running font of every component"
       },
       "family-heading": {
         "$type": "fontFamily",
         "$value": "{font.family.display}",
-        "$description": "The font of the display and heading roles; identical to the running font until it is overridden"
+        "$description": "The font of the display and heading roles, the running font until it is overridden"
       },
       "family-code": {
         "$type": "fontFamily",
         "$value": "{font.family.mono}",
-        "$description": "The font of code content (the code variant, VInputOTP)"
+        "$description": "The font of code content (the code role, VInputOTP)"
       },
       "display": {
         "size": {
@@ -984,19 +1009,20 @@
       },
       "pill": {
         "$type": "dimension",
-        "$value": "{radius.full}"
+        "$value": "{radius.full}",
+        "$description": "Full rounding: switches, badges, pill-shaped chips"
       },
       "chip": {
         "$type": "dimension",
         "$value": "{radius.interactive}",
-        "$description": "Chips (shape=\"chip\"), follows interactive by default"
+        "$description": "Chips with shape=\"chip\", which follow the interactive radius by default"
       }
     },
     "duration": {
       "fast": {
         "$type": "duration",
         "$value": "{duration.150}",
-        "$description": "Colour and border changes on hover, focus, press"
+        "$description": "Color and border changes on hover, focus and press"
       },
       "base": {
         "$type": "duration",
@@ -1012,37 +1038,45 @@
     "focus": {
       "ring-color": {
         "$type": "color",
-        "$value": "{color.indigo.500}"
+        "$value": "{color.indigo.500}",
+        "$description": "The keyboard focus ring, which has to stand out against the page"
       },
       "ring-width": {
         "$type": "dimension",
-        "$value": "2px"
+        "$value": "2px",
+        "$description": "The thickness of the focus ring"
       },
       "ring-offset": {
         "$type": "dimension",
-        "$value": "2px"
+        "$value": "2px",
+        "$description": "The gap between a control and its focus ring"
       }
     },
     "control": {
       "height-xs": {
         "$type": "dimension",
-        "$value": "1.5rem"
+        "$value": "1.5rem",
+        "$description": "The height of every control at size=\"xs\" (24px), 4px less when compact"
       },
       "height-sm": {
         "$type": "dimension",
-        "$value": "2rem"
+        "$value": "2rem",
+        "$description": "The height of every control at size=\"sm\" (32px), 4px less when compact"
       },
       "height-md": {
         "$type": "dimension",
-        "$value": "2.5rem"
+        "$value": "2.5rem",
+        "$description": "The height of every control at size=\"md\" (40px), 4px less when compact"
       },
       "height-lg": {
         "$type": "dimension",
-        "$value": "3rem"
+        "$value": "3rem",
+        "$description": "The height of every control at size=\"lg\" (48px), 4px less when compact"
       },
       "height-xl": {
         "$type": "dimension",
-        "$value": "3.5rem"
+        "$value": "3.5rem",
+        "$description": "The height of every control at size=\"xl\" (56px), 4px less when compact"
       },
       "border-width": {
         "$type": "dimension",
@@ -1057,12 +1091,12 @@
       "size-check-mark": {
         "$type": "dimension",
         "$value": "0.875rem",
-        "$description": "VCheckbox's SVG tick"
+        "$description": "The tick inside VCheckbox's box"
       },
       "size-check-dot": {
         "$type": "dimension",
         "$value": "0.5rem",
-        "$description": "VRadio's inner dot"
+        "$description": "The dot inside VRadio's circle"
       },
       "size-switch-w": {
         "$type": "dimension",
@@ -1117,7 +1151,7 @@
       "size-carousel-block": {
         "$type": "dimension",
         "$value": "24rem",
-        "$description": "The default block size of VCarousel's viewport. Load-bearing in the vertical orientation: a percentage flex-basis has no definite reference on the block axis, and every slide would collapse onto its content without it"
+        "$description": "The default block size of VCarousel's viewport, which a vertical carousel needs to lay its slides out"
       },
       "size-carousel-indicator": {
         "$type": "dimension",
@@ -1127,7 +1161,7 @@
       "size-carousel-indicator-active": {
         "$type": "dimension",
         "$value": "1.25rem",
-        "$description": "The main-axis size of the ACTIVE VCarousel indicator, which stretches from a dot into a pill"
+        "$description": "The length of the active VCarousel indicator, which stretches from a dot into a pill"
       },
       "size-combobox-list-max-block": {
         "$type": "dimension",
@@ -1152,7 +1186,7 @@
       "size-progress-linear-length": {
         "$type": "dimension",
         "$value": "10rem",
-        "$description": "The default length of a vertical VProgressLinear (overridable through `height`)"
+        "$description": "The default length of a vertical VProgressLinear, which a height set on the bar replaces"
       },
       "size-progress-circular-diameter": {
         "$type": "dimension",
@@ -1167,13 +1201,18 @@
       "size-skeleton-surface": {
         "$type": "dimension",
         "$value": "6rem",
-        "$description": "The default height of a surface-shaped VSkeletonLoader — a card, an image (96px)"
+        "$description": "The default height of a surface-shaped VSkeletonLoader: a card, an image (96px)"
       },
       "size-toast-width": {
         "$type": "dimension",
         "$value": "22rem",
         "$description": "The default width of a toast"
       },
+      "size-tooltip-max": {
+        "$type": "dimension",
+        "$value": "18rem",
+        "$description": "The widest a tooltip grows before it wraps (288px)"
+      },
       "size-dialog-width": {
         "$type": "dimension",
         "$value": "25rem",
@@ -1192,7 +1231,7 @@
       "size-badge-h": {
         "$type": "dimension",
         "$value": "1.25rem",
-        "$description": "The height of VBadge (the pill)"
+        "$description": "The height of a VBadge pill"
       },
       "size-badge-dot": {
         "$type": "dimension",
@@ -1207,12 +1246,12 @@
       "size-avatar-ring": {
         "$type": "dimension",
         "$value": "2px",
-        "$description": "The separating ring of stacked Avatars (VAvatarGroup)"
+        "$description": "The ring separating stacked avatars (VAvatarGroup)"
       },
       "size-date-picker-cell": {
         "$type": "dimension",
         "$value": "2.5rem",
-        "$description": "The side (height/width) of a VDatePicker day cell"
+        "$description": "The side of a VDatePicker day cell"
       },
       "size-date-picker-day": {
         "$type": "dimension",
@@ -1227,7 +1266,7 @@
       "size-date-picker-nav-min": {
         "$type": "dimension",
         "$value": "5.375rem",
-        "$description": "The minimum width of VDatePicker's month/year picker buttons (≈86px)"
+        "$description": "The minimum width of VDatePicker's month/year picker buttons (about 86px)"
       },
       "size-tab-indicator": {
         "$type": "dimension",
@@ -1242,7 +1281,7 @@
       "size-time-picker-dial": {
         "$type": "dimension",
         "$value": "16rem",
-        "$description": "The diameter of VTimePicker's clock face (the M3 spec)"
+        "$description": "The diameter of VTimePicker's clock face"
       },
       "size-time-picker-number": {
         "$type": "dimension",
@@ -1252,7 +1291,7 @@
       "size-time-picker-center": {
         "$type": "dimension",
         "$value": "0.5rem",
-        "$description": "The centre dot of VTimePicker's face"
+        "$description": "The center dot of VTimePicker's face"
       },
       "size-time-picker-hand": {
         "$type": "dimension",
@@ -1267,7 +1306,7 @@
       "size-file-picker-min-block": {
         "$type": "dimension",
         "$value": "10rem",
-        "$description": "The minimum height of VFilePicker's drop zone — icon, two lines, separator and button"
+        "$description": "The minimum height of VFilePicker's drop zone: icon, two lines, separator and button"
       },
       "size-file-picker-icon": {
         "$type": "dimension",
@@ -1317,13 +1356,38 @@
       "size-calendar-allday-max": {
         "$type": "dimension",
         "$value": "7rem",
-        "$description": "The height past which that band scrolls instead of growing"
+        "$description": "The height past which VCalendar's all-day band scrolls instead of growing"
       },
       "size-calendar-now-dot": {
         "$type": "dimension",
         "$value": "0.625rem",
         "$description": "The dot on VCalendar's current-time line"
       },
+      "size-calendar-event-edge": {
+        "$type": "dimension",
+        "$value": "3px",
+        "$description": "The width of the coloured leading edge of a VCalendar event"
+      },
+      "size-calendar-gap": {
+        "$type": "dimension",
+        "$value": "0.125rem",
+        "$description": "The gap VCalendar keeps between two events, side by side in a day or stacked in a month"
+      },
+      "size-calendar-grip": {
+        "$type": "dimension",
+        "$value": "1rem",
+        "$description": "The length of the grip drawn on a VCalendar card's resize strip"
+      },
+      "size-calendar-grip-thickness": {
+        "$type": "dimension",
+        "$value": "2px",
+        "$description": "The thickness of that grip, which is also its distance from the card's bottom edge"
+      },
+      "size-calendar-year-month": {
+        "$type": "dimension",
+        "$value": "13rem",
+        "$description": "The narrowest a mini-month of VCalendar's year view gets before the year reflows"
+      },
       "size-calendar-month-cell": {
         "$type": "dimension",
         "$value": "8.5rem",
@@ -1339,17 +1403,17 @@
       "size-sm": {
         "$type": "dimension",
         "$value": "1rem",
-        "$description": "16px icons"
+        "$description": "The icon size of xs controls (16px)"
       },
       "size-md": {
         "$type": "dimension",
         "$value": "1.25rem",
-        "$description": "20px icons"
+        "$description": "The icon size of sm and md controls (20px)"
       },
       "size-lg": {
         "$type": "dimension",
         "$value": "1.5rem",
-        "$description": "24px icons"
+        "$description": "The icon size of lg and xl controls (24px)"
       }
     }
   },
@@ -1514,15 +1578,15 @@
         },
         "event-surface": {
           "$type": "color",
-          "$value": "oklch(0.3 0.05 var(--vectis-calendar-event-hue, 265))"
+          "$value": "oklch(0.3 0.05 265)"
         },
         "event-border": {
           "$type": "color",
-          "$value": "oklch(0.42 0.08 var(--vectis-calendar-event-hue, 265))"
+          "$value": "oklch(0.42 0.08 265)"
         },
         "event-text": {
           "$type": "color",
-          "$value": "oklch(0.9 0.06 var(--vectis-calendar-event-hue, 265))"
+          "$value": "oklch(0.9 0.06 265)"
         }
       },
       "focus": {

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 /**
  * 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,
+ * 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

package/dist/utils/arrowNav.d.ts

@@ -10,7 +10,7 @@
  */
 export declare function navigableItems(container: HTMLElement, selector: string): HTMLElement[];
 /**
- * Moves focus for the arrows and Home/End, and reports whether it took the key —
+ * 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.
@@ -18,6 +18,9 @@ export declare function navigableItems(container: HTMLElement, selector: string)
  * 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.

package/dist/utils/arrowNav.js

@@ -4,8 +4,7 @@ function t(e, t) {
 	return [...e.querySelectorAll(t)].filter((e) => getComputedStyle(e).display !== "none");
 }
 function n(t, n, r, i = {}) {
-	let a = i.vertical ?? !1;
-	if (!(a ? [
+	let a = i.vertical ?? !1, o = a ? [
 		"ArrowDown",
 		"ArrowUp",
 		"Home",
@@ -15,12 +14,13 @@ function n(t, n, r, i = {}) {
 		"ArrowLeft",
 		"Home",
 		"End"
-	]).includes(t.key)) return !1;
-	let o = r();
-	if (o.length === 0) return !1;
+	];
+	if (t.altKey || t.ctrlKey || t.metaKey || !o.includes(t.key)) return !1;
+	let s = r();
+	if (s.length === 0) return !1;
 	t.preventDefault();
-	let s = () => a ? t.key === "ArrowDown" : t.key === "ArrowRight" !== e(n), c = o.indexOf(document.activeElement);
-	return o[t.key === "Home" ? 0 : t.key === "End" ? o.length - 1 : c === -1 ? 0 : (c + (s() ? 1 : -1) + o.length) % o.length]?.focus(), !0;
+	let c = () => a ? t.key === "ArrowDown" : t.key === "ArrowRight" !== e(n), l = s.indexOf(document.activeElement);
+	return s[t.key === "Home" ? 0 : t.key === "End" ? s.length - 1 : l === -1 ? 0 : (l + (c() ? 1 : -1) + s.length) % s.length]?.focus(), !0;
 }
 //#endregion
 export { n as arrowNavigate, t as navigableItems };

package/dist/utils/arrowNav.js.map

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

package/dist/utils/chip.d.ts

@@ -4,7 +4,7 @@ import { ChipSize } from '../components/VChip/VChip.js';
  *
  * A chip is one step below its field, so a row of them does not push the field taller. Below
  * the lowest step of each pair there is no smaller size left, and `compact` makes up the
- * difference instead — which is why an `sm` field forces it and an `md` one, already having
+ * 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

package/dist/utils/chip.js.map

@@ -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"}
+{"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"}