rei-kit 3.7.0 → 4.1.0

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 (9) hide show
  1. package/README.md +5 -5
  2. package/dist/app.js +2 -2
  3. package/dist/app.js.map +1 -1
  4. package/dist/check.js +34 -2
  5. package/dist/check.js.map +1 -1
  6. package/dist/index.js +2 -2
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +4 -4
  9. package/package.json +1 -1
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["$slots","$slots","$slots","$el","$slots","$slots"],"sources":["../src/utils/day-label.ts","../src/utils/download.ts","../src/palettes/palettes.generated.json","../src/utils/appearance.ts","../src/composables/use-today.ts","../src/composables/use-debounced-callback.ts","../src/components/BaseAvatar.vue","../src/components/BaseAvatar.vue","../src/components/BaseBadge.vue","../src/components/BaseBadge.vue","../src/components/BaseMenu.vue","../src/components/BaseMenu.vue","../src/components/BaseCard.vue","../src/components/BaseCard.vue","../src/composables/use-virtual-window.ts","../src/components/BaseCombobox.vue","../src/components/BaseCombobox.vue","../src/components/BaseRadioGroup.vue","../src/components/BaseRadioGroup.vue","../src/components/BaseSelect.vue","../src/components/BaseSelect.vue","../src/components/BaseSlider.vue","../src/components/BaseSlider.vue","../src/components/NumberInput.vue","../src/components/NumberInput.vue","../src/components/SliderField.vue","../src/components/SliderField.vue","../src/components/BaseSpinner.vue","../src/components/BaseSpinner.vue","../src/components/BaseSwitch.vue","../src/components/BaseSwitch.vue","../src/components/BaseTable.vue","../src/components/BaseTable.vue","../src/components/BaseTextarea.vue","../src/components/BaseTextarea.vue","../src/components/EmptyState.vue","../src/components/EmptyState.vue","../src/components/ErrorBoundary.vue","../src/components/ErrorBoundary.vue","../src/components/PageContainer.vue","../src/components/PageContainer.vue","../src/components/PageHeader.vue","../src/components/PageHeader.vue","../src/components/ProgressBar.vue","../src/components/ProgressBar.vue","../src/components/PriceCard.vue","../src/components/PriceCard.vue","../src/components/ToneDot.vue","../src/components/ToneDot.vue","../src/components/SectionHeading.vue","../src/components/SectionHeading.vue","../src/components/SegmentedControl.vue","../src/components/SegmentedControl.vue","../src/components/SkeletonList.vue","../src/components/SkeletonList.vue","../src/components/StatCard.vue","../src/components/StatCard.vue","../src/components/ToastHost.vue","../src/components/ToastHost.vue","../src/components/LocaleLinks.vue","../src/components/LocaleLinks.vue","../src/components/TabBar.vue","../src/components/TabBar.vue","../src/components/ActivityGrid.vue","../src/components/ActivityGrid.vue","../src/components/BarChart.vue","../src/components/BarChart.vue","../src/components/DonutChart.vue","../src/components/DonutChart.vue","../src/components/VirtualList.vue","../src/components/VirtualList.vue","../src/components/AnnounceHost.vue","../src/components/AnnounceHost.vue","../src/components/ErrorSummary.vue","../src/components/ErrorSummary.vue","../src/components/AvatarStack.vue","../src/components/AvatarStack.vue","../src/components/BaseCalendar.vue","../src/components/BaseCalendar.vue","../src/components/BaseChip.vue","../src/components/BaseChip.vue","../src/components/BaseKbd.vue","../src/components/BaseKbd.vue","../src/components/BaseLink.vue","../src/components/BaseLink.vue","../src/components/BaseRating.vue","../src/components/BaseRating.vue","../src/components/BaseSeparator.vue","../src/components/BaseSeparator.vue","../src/components/ColorPicker.vue","../src/components/ColorPicker.vue","../src/components/CopyButton.vue","../src/components/CopyButton.vue","../src/components/CodeBlock.vue","../src/components/CodeBlock.vue","../src/components/DescriptionList.vue","../src/components/DescriptionList.vue","../src/components/FileDrop.vue","../src/components/FileDrop.vue","../src/components/TagsInput.vue","../src/components/TagsInput.vue","../src/components/BasePopover.vue","../src/components/BasePopover.vue","../src/components/TimePicker.vue","../src/components/TimePicker.vue","../src/components/BaseTimeline.vue","../src/components/BaseTimeline.vue","../src/components/BaseDatePicker.vue","../src/components/BaseDatePicker.vue","../src/components/BasePopconfirm.vue","../src/components/BasePopconfirm.vue","../src/components/ToggleGroup.vue","../src/components/ToggleGroup.vue","../src/components/PinInput.vue","../src/components/PinInput.vue","../src/components/PasswordInput.vue","../src/components/PasswordInput.vue","../src/components/CircularProgress.vue","../src/components/CircularProgress.vue","../src/components/BaseStepper.vue","../src/components/BaseStepper.vue","../src/i18n/runtime.ts","../src/index.ts"],"sourcesContent":["import { addDays, fromDateKey } from './date'\nimport { formatDate } from './format'\n\n/** The two days worth naming rather than numbering. */\nexport interface DayLabels {\n today: string\n yesterday: string\n}\n\n/**\n * A short name for a day, relative to today.\n *\n * \"Today\" and \"Yesterday\" are worth spelling out — they are the two a user\n * actually reaches for. Anything older gets its weekday, which inside a\n * five-day window is unambiguous and stays two or three characters in every\n * language.\n *\n * The two words are arguments rather than translated here: a library that calls\n * `t()` forces every consumer onto one i18n setup.\n *\n * @param dateKey - The day to label (`YYYY-MM-DD`).\n * @param today - Today's key, passed in so the caller controls the clock.\n * @param labels - What to call today and yesterday.\n *\n * @example\n * ```ts\n * relativeDayLabel('2026-08-28', '2026-08-31', { today: 'Today', yesterday: 'Yesterday' })\n * // 'Fri'\n * ```\n */\nexport function relativeDayLabel(dateKey: string, today: string, labels: DayLabels): string {\n if (dateKey === today) return labels.today\n if (dateKey === addDays(today, -1)) return labels.yesterday\n\n return formatDate(fromDateKey(dateKey), { weekday: 'short' })\n}\n","/**\n * Hands the user a file without a server round trip.\n *\n * @param data - Anything `JSON.stringify` can serialise.\n * @param filename - Suggested name, e.g. `hibi-export-2026-08-24.json`.\n */\nexport function downloadJson(data: unknown, filename: string): void {\n const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })\n const url = URL.createObjectURL(blob)\n const link = document.createElement('a')\n\n link.href = url\n link.download = filename\n link.click()\n\n URL.revokeObjectURL(url)\n}\n","[\n {\n \"name\": \"rei\",\n \"label\": \"Rei\",\n \"origin\": \"rei-kit\",\n \"light\": {\n \"primary\": \"#26667f\",\n \"accent\": \"#124170\",\n \"positive\": \"#67c090\",\n \"negative\": \"#c7453a\",\n \"warning\": \"#d89a3e\",\n \"canvas\": \"#f4faf8\",\n \"surface\": \"#ffffff\",\n \"muted\": \"#ddf4e7\",\n \"ink\": \"#0f2229\",\n \"inkSoft\": \"#586f7b\",\n \"hair\": \"#e1edea\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#07141a\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#07141a\"\n },\n \"dark\": {\n \"primary\": \"#5fb0c9\",\n \"accent\": \"#8cb8e0\",\n \"positive\": \"#67c090\",\n \"negative\": \"#f07a6f\",\n \"warning\": \"#e6ad58\",\n \"canvas\": \"#07141a\",\n \"surface\": \"#102630\",\n \"muted\": \"#12303a\",\n \"ink\": \"#e6f0ee\",\n \"inkSoft\": \"#8fa8b2\",\n \"hair\": \"#1c3945\",\n \"onPrimary\": \"#07141a\",\n \"onAccent\": \"#07141a\",\n \"onPositive\": \"#07141a\",\n \"onNegative\": \"#07141a\",\n \"onWarning\": \"#07141a\"\n },\n \"swatch\": [\n \"#26667f\",\n \"#124170\",\n \"#67c090\",\n \"#d89a3e\"\n ]\n },\n {\n \"name\": \"nord\",\n \"label\": \"Nord\",\n \"origin\": \"Arctic Ice Studio\",\n \"light\": {\n \"primary\": \"#506e93\",\n \"accent\": \"#b48ead\",\n \"positive\": \"#a3be8c\",\n \"negative\": \"#a6545c\",\n \"warning\": \"#ebcb8b\",\n \"canvas\": \"#eceff4\",\n \"surface\": \"#ffffff\",\n \"muted\": \"#e5e9f0\",\n \"ink\": \"#2e3440\",\n \"inkSoft\": \"#4c566a\",\n \"hair\": \"#d8dee9\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#111111\",\n \"onPositive\": \"#2e3440\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#2e3440\"\n },\n \"dark\": {\n \"primary\": \"#88c0d0\",\n \"accent\": \"#b48ead\",\n \"positive\": \"#a3be8c\",\n \"negative\": \"#d89fa4\",\n \"warning\": \"#ebcb8b\",\n \"canvas\": \"#2e3440\",\n \"surface\": \"#3b4252\",\n \"muted\": \"#434c5e\",\n \"ink\": \"#eceff4\",\n \"inkSoft\": \"#d8dee9\",\n \"hair\": \"#4c566a\",\n \"onPrimary\": \"#2e3440\",\n \"onAccent\": \"#111111\",\n \"onPositive\": \"#2e3440\",\n \"onNegative\": \"#2e3440\",\n \"onWarning\": \"#2e3440\"\n },\n \"swatch\": [\n \"#506e93\",\n \"#b48ead\",\n \"#a3be8c\",\n \"#ebcb8b\"\n ]\n },\n {\n \"name\": \"dracula\",\n \"label\": \"Dracula\",\n \"origin\": \"Dracula Theme\",\n \"swatch\": [\n \"#bd93f9\",\n \"#ff79c6\",\n \"#50fa7b\",\n \"#282a36\"\n ],\n \"light\": {\n \"primary\": \"#644ac9\",\n \"accent\": \"#a3144d\",\n \"positive\": \"#14710a\",\n \"negative\": \"#cb3a2a\",\n \"warning\": \"#a34d14\",\n \"canvas\": \"#fffbeb\",\n \"surface\": \"#ffffff\",\n \"muted\": \"#f3eeda\",\n \"ink\": \"#1f1f1f\",\n \"inkSoft\": \"#635d4f\",\n \"hair\": \"#e6e0c8\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#ffffff\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#ffffff\"\n },\n \"dark\": {\n \"primary\": \"#bd93f9\",\n \"accent\": \"#ff79c6\",\n \"positive\": \"#50fa7b\",\n \"negative\": \"#ff5555\",\n \"warning\": \"#ffb86c\",\n \"canvas\": \"#21222c\",\n \"surface\": \"#282a36\",\n \"muted\": \"#343746\",\n \"ink\": \"#f8f8f2\",\n \"inkSoft\": \"#b6b9cf\",\n \"hair\": \"#44475a\",\n \"onPrimary\": \"#1f1f1f\",\n \"onAccent\": \"#1f1f1f\",\n \"onPositive\": \"#1f1f1f\",\n \"onNegative\": \"#1f1f1f\",\n \"onWarning\": \"#1f1f1f\"\n }\n },\n {\n \"name\": \"catppuccin\",\n \"label\": \"Catppuccin\",\n \"origin\": \"Catppuccin\",\n \"light\": {\n \"primary\": \"#8839ef\",\n \"accent\": \"#1e66f5\",\n \"positive\": \"#40a02b\",\n \"negative\": \"#d20f39\",\n \"warning\": \"#df8e1d\",\n \"canvas\": \"#eff1f5\",\n \"surface\": \"#ffffff\",\n \"muted\": \"#e6e9ef\",\n \"ink\": \"#4c4f69\",\n \"inkSoft\": \"#5c5f77\",\n \"hair\": \"#ccd0da\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#1e1e2e\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#1e1e2e\"\n },\n \"dark\": {\n \"primary\": \"#cba6f7\",\n \"accent\": \"#89b4fa\",\n \"positive\": \"#a6e3a1\",\n \"negative\": \"#f38ba8\",\n \"warning\": \"#f9e2af\",\n \"canvas\": \"#1e1e2e\",\n \"surface\": \"#24273a\",\n \"muted\": \"#313244\",\n \"ink\": \"#cdd6f4\",\n \"inkSoft\": \"#a6adc8\",\n \"hair\": \"#45475a\",\n \"onPrimary\": \"#1e1e2e\",\n \"onAccent\": \"#1e1e2e\",\n \"onPositive\": \"#1e1e2e\",\n \"onNegative\": \"#1e1e2e\",\n \"onWarning\": \"#1e1e2e\"\n },\n \"swatch\": [\n \"#8839ef\",\n \"#1e66f5\",\n \"#40a02b\",\n \"#df8e1d\"\n ]\n },\n {\n \"name\": \"solarized\",\n \"label\": \"Solarized\",\n \"origin\": \"Ethan Schoonover\",\n \"light\": {\n \"primary\": \"#2075b2\",\n \"accent\": \"#6a6fc0\",\n \"positive\": \"#859900\",\n \"negative\": \"#d5312e\",\n \"warning\": \"#b58900\",\n \"canvas\": \"#fdf6e3\",\n \"surface\": \"#fffcf3\",\n \"muted\": \"#eee8d5\",\n \"ink\": \"#073642\",\n \"inkSoft\": \"#566c73\",\n \"hair\": \"#e4dcc4\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#002b36\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#002b36\"\n },\n \"dark\": {\n \"primary\": \"#4b9fda\",\n \"accent\": \"#6a6fc0\",\n \"positive\": \"#859900\",\n \"negative\": \"#e87674\",\n \"warning\": \"#b58900\",\n \"canvas\": \"#002b36\",\n \"surface\": \"#073642\",\n \"muted\": \"#0b3f4c\",\n \"ink\": \"#eee8d5\",\n \"inkSoft\": \"#97a5a5\",\n \"hair\": \"#16505e\",\n \"onPrimary\": \"#002b36\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#002b36\",\n \"onNegative\": \"#002b36\",\n \"onWarning\": \"#002b36\"\n },\n \"swatch\": [\n \"#2075b2\",\n \"#6a6fc0\",\n \"#859900\",\n \"#b58900\"\n ]\n },\n {\n \"name\": \"gruvbox\",\n \"label\": \"Gruvbox\",\n \"origin\": \"morhetz\",\n \"light\": {\n \"primary\": \"#076678\",\n \"accent\": \"#8f3f71\",\n \"positive\": \"#79740e\",\n \"negative\": \"#9d0006\",\n \"warning\": \"#b57614\",\n \"canvas\": \"#fbf1c7\",\n \"surface\": \"#fdf7dd\",\n \"muted\": \"#ebdbb2\",\n \"ink\": \"#3c3836\",\n \"inkSoft\": \"#665c54\",\n \"hair\": \"#e2cfa4\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#ffffff\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#111111\"\n },\n \"dark\": {\n \"primary\": \"#83a598\",\n \"accent\": \"#d3869b\",\n \"positive\": \"#b8bb26\",\n \"negative\": \"#fc6857\",\n \"warning\": \"#fabd2f\",\n \"canvas\": \"#282828\",\n \"surface\": \"#32302f\",\n \"muted\": \"#3c3836\",\n \"ink\": \"#ebdbb2\",\n \"inkSoft\": \"#bdae93\",\n \"hair\": \"#504945\",\n \"onPrimary\": \"#282828\",\n \"onAccent\": \"#282828\",\n \"onPositive\": \"#282828\",\n \"onNegative\": \"#282828\",\n \"onWarning\": \"#282828\"\n },\n \"swatch\": [\n \"#076678\",\n \"#8f3f71\",\n \"#79740e\",\n \"#b57614\"\n ]\n },\n {\n \"name\": \"tokyo-night\",\n \"label\": \"Tokyo Night\",\n \"origin\": \"enkia\",\n \"swatch\": [\n \"#7aa2f7\",\n \"#bb9af7\",\n \"#9ece6a\",\n \"#1a1b26\"\n ],\n \"light\": {\n \"primary\": \"#2463b8\",\n \"accent\": \"#9351ea\",\n \"positive\": \"#587539\",\n \"negative\": \"#c0214f\",\n \"warning\": \"#8c6c3e\",\n \"canvas\": \"#e1e2e7\",\n \"surface\": \"#f5f5f8\",\n \"muted\": \"#d5d6db\",\n \"ink\": \"#2e51a3\",\n \"inkSoft\": \"#4d5b8c\",\n \"hair\": \"#c4c8da\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#ffffff\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#ffffff\"\n },\n \"dark\": {\n \"primary\": \"#7aa2f7\",\n \"accent\": \"#bb9af7\",\n \"positive\": \"#9ece6a\",\n \"negative\": \"#f7768e\",\n \"warning\": \"#e0af68\",\n \"canvas\": \"#16161e\",\n \"surface\": \"#1a1b26\",\n \"muted\": \"#292e42\",\n \"ink\": \"#c0caf5\",\n \"inkSoft\": \"#a9b1d6\",\n \"hair\": \"#2f3549\",\n \"onPrimary\": \"#16161e\",\n \"onAccent\": \"#16161e\",\n \"onPositive\": \"#16161e\",\n \"onNegative\": \"#16161e\",\n \"onWarning\": \"#16161e\"\n }\n },\n {\n \"name\": \"rose-pine\",\n \"label\": \"Rosé Pine\",\n \"origin\": \"Rosé Pine\",\n \"light\": {\n \"primary\": \"#286983\",\n \"accent\": \"#907aa9\",\n \"positive\": \"#56949f\",\n \"negative\": \"#a45a6f\",\n \"warning\": \"#ea9d34\",\n \"canvas\": \"#faf4ed\",\n \"surface\": \"#fffaf3\",\n \"muted\": \"#f2e9e1\",\n \"ink\": \"#575279\",\n \"inkSoft\": \"#6a6681\",\n \"hair\": \"#dfdad9\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#191724\",\n \"onPositive\": \"#191724\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#191724\"\n },\n \"dark\": {\n \"primary\": \"#9ccfd8\",\n \"accent\": \"#c4a7e7\",\n \"positive\": \"#31748f\",\n \"negative\": \"#eb6f92\",\n \"warning\": \"#f6c177\",\n \"canvas\": \"#191724\",\n \"surface\": \"#1f1d2e\",\n \"muted\": \"#26233a\",\n \"ink\": \"#e0def4\",\n \"inkSoft\": \"#908caa\",\n \"hair\": \"#403d52\",\n \"onPrimary\": \"#191724\",\n \"onAccent\": \"#191724\",\n \"onPositive\": \"#ffffff\",\n \"onNegative\": \"#191724\",\n \"onWarning\": \"#191724\"\n },\n \"swatch\": [\n \"#286983\",\n \"#907aa9\",\n \"#56949f\",\n \"#ea9d34\"\n ]\n },\n {\n \"name\": \"sakura\",\n \"label\": \"Sakura\",\n \"origin\": \"rei-kit\",\n \"light\": {\n \"primary\": \"#c2415d\",\n \"accent\": \"#7a3b4f\",\n \"positive\": \"#3f8f6a\",\n \"negative\": \"#c43d3d\",\n \"warning\": \"#c98a2a\",\n \"canvas\": \"#fdf6f7\",\n \"surface\": \"#ffffff\",\n \"muted\": \"#fbe4e8\",\n \"ink\": \"#2a1b1f\",\n \"inkSoft\": \"#6f5a5f\",\n \"hair\": \"#f0dde1\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#1a1013\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#1a1013\"\n },\n \"dark\": {\n \"primary\": \"#f08aa0\",\n \"accent\": \"#d7a1b3\",\n \"positive\": \"#6fc39a\",\n \"negative\": \"#f07a7a\",\n \"warning\": \"#e6b060\",\n \"canvas\": \"#1a1013\",\n \"surface\": \"#24171b\",\n \"muted\": \"#321f25\",\n \"ink\": \"#f6e8eb\",\n \"inkSoft\": \"#c3a9b0\",\n \"hair\": \"#3d2930\",\n \"onPrimary\": \"#1a1013\",\n \"onAccent\": \"#1a1013\",\n \"onPositive\": \"#1a1013\",\n \"onNegative\": \"#1a1013\",\n \"onWarning\": \"#1a1013\"\n },\n \"swatch\": [\n \"#c2415d\",\n \"#7a3b4f\",\n \"#3f8f6a\",\n \"#c98a2a\"\n ]\n },\n {\n \"name\": \"matcha\",\n \"label\": \"Matcha\",\n \"origin\": \"rei-kit\",\n \"light\": {\n \"primary\": \"#5a7a2e\",\n \"accent\": \"#3d5a3a\",\n \"positive\": \"#4a8a4f\",\n \"negative\": \"#b8473a\",\n \"warning\": \"#b8862c\",\n \"canvas\": \"#f6f7f0\",\n \"surface\": \"#ffffff\",\n \"muted\": \"#e7ecd6\",\n \"ink\": \"#1e2418\",\n \"inkSoft\": \"#5b6450\",\n \"hair\": \"#e1e6d3\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#111111\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#11140d\"\n },\n \"dark\": {\n \"primary\": \"#a8c77a\",\n \"accent\": \"#8fb58a\",\n \"positive\": \"#7cc281\",\n \"negative\": \"#e8826f\",\n \"warning\": \"#e0b35c\",\n \"canvas\": \"#11140d\",\n \"surface\": \"#191d13\",\n \"muted\": \"#242a1b\",\n \"ink\": \"#eef1e6\",\n \"inkSoft\": \"#aab39e\",\n \"hair\": \"#2e3525\",\n \"onPrimary\": \"#11140d\",\n \"onAccent\": \"#11140d\",\n \"onPositive\": \"#11140d\",\n \"onNegative\": \"#11140d\",\n \"onWarning\": \"#11140d\"\n },\n \"swatch\": [\n \"#5a7a2e\",\n \"#3d5a3a\",\n \"#4a8a4f\",\n \"#b8862c\"\n ]\n }\n]\n","import { ref, watch } from 'vue'\nimport type { Ref } from 'vue'\n\nimport generated from '../palettes/palettes.generated.json'\n\n/* ---------------------------------------------------------------------------\n Materials.\n\n How a surface is made — its fill, its edge, its depth — independent of what\n colour it is. The kit's own components never ask which one is active; they\n read the tokens, and the material redefines the tokens.\n --------------------------------------------------------------------------- */\n\nexport const MATERIALS = ['quiet', 'glass', 'brutal', 'soft'] as const\nexport type Material = (typeof MATERIALS)[number]\n\nexport function isMaterial(value: unknown): value is Material {\n return typeof value === 'string' && (MATERIALS as readonly string[]).includes(value)\n}\n\n/**\n * Switches the material for everything under `root`.\n *\n * `quiet` removes the attribute rather than writing it, because quiet is what\n * the tokens already are — there is nothing to override.\n *\n * Needs `rei-kit/materials.css` (or the one material file) imported after\n * `tokens.css`, or the attribute changes nothing.\n */\nexport function applyMaterial(material: Material, root?: HTMLElement): void {\n const el = root ?? (typeof document === 'undefined' ? undefined : document.documentElement)\n if (!el) return\n\n if (material === 'quiet') delete el.dataset['material']\n else el.dataset['material'] = material\n}\n\n/* ---------------------------------------------------------------------------\n Palettes.\n\n Generated from `src/palettes/palettes.source.json`, with the on-colours\n chosen by contrast and every text pairing measured against WCAG AA in both\n modes before a palette is allowed to ship.\n --------------------------------------------------------------------------- */\n\n/** The eleven colour roles plus the five on-colours, for one mode. */\nexport interface PaletteRoles {\n primary: string\n accent: string\n positive: string\n negative: string\n warning: string\n canvas: string\n surface: string\n muted: string\n ink: string\n inkSoft: string\n hair: string\n onPrimary: string\n onAccent: string\n onPositive: string\n onNegative: string\n onWarning: string\n}\n\nexport interface Palette {\n /** The value for `data-palette`. */\n name: string\n /** A display name. */\n label: string\n /** Who made it. Several are well-known open palettes, credited here. */\n origin: string\n /** Four colours for a picker to show at a glance. */\n swatch: readonly [string, string, string, string]\n light: PaletteRoles\n dark: PaletteRoles\n}\n\nexport const PALETTES = generated as unknown as readonly Palette[]\n\nexport type PaletteName = string\n\nexport function isPaletteName(value: unknown): value is PaletteName {\n return typeof value === 'string' && PALETTES.some((p) => p.name === value)\n}\n\n/**\n * Switches the palette for everything under `root`.\n *\n * `rei` is the tokens' own palette, so it removes the attribute. Needs\n * `rei-kit/palettes.css` imported after `tokens.css`.\n */\nexport function applyPalette(name: PaletteName, root?: HTMLElement): void {\n const el = root ?? (typeof document === 'undefined' ? undefined : document.documentElement)\n if (!el) return\n\n if (name === 'rei') delete el.dataset['palette']\n else el.dataset['palette'] = name\n}\n\n/* ---------------------------------------------------------------------------\n Persisted preferences.\n\n The same shape as `useTheme`: a module-level ref, so every caller shares one\n answer, written through to storage and applied on every change.\n --------------------------------------------------------------------------- */\n\nfunction stored<T extends string>(key: string, accept: (v: unknown) => v is T, fallback: T): T {\n try {\n const value = localStorage.getItem(key)\n return accept(value) ? value : fallback\n } catch {\n return fallback\n }\n}\n\nfunction store(key: string, value: string): void {\n try {\n localStorage.setItem(key, value)\n } catch {\n // Private mode or blocked storage: the choice just will not persist.\n }\n}\n\nlet materialKey = 'rei-material'\nlet materialRef: Ref<Material> | null = null\n\n/** Call once at startup, before `useMaterial`, to namespace the stored value. */\nexport function setMaterialStorageKey(key: string): void {\n materialKey = key\n if (materialRef) materialRef.value = stored(key, isMaterial, 'quiet')\n}\n\n/**\n * The active material, as a writable ref. Assigning it stores and applies it.\n *\n * @example\n * ```ts\n * const material = useMaterial()\n * material.value = 'glass'\n * ```\n */\nexport function useMaterial(): Ref<Material> {\n if (materialRef) return materialRef\n\n materialRef = ref<Material>(stored(materialKey, isMaterial, 'quiet'))\n watch(\n materialRef,\n (next) => {\n store(materialKey, next)\n applyMaterial(next)\n },\n { immediate: true },\n )\n\n return materialRef\n}\n\nlet paletteKey = 'rei-palette'\nlet paletteRef: Ref<PaletteName> | null = null\n\n/** Call once at startup, before `usePalette`, to namespace the stored value. */\nexport function setPaletteStorageKey(key: string): void {\n paletteKey = key\n if (paletteRef) paletteRef.value = stored(key, isPaletteName, 'rei')\n}\n\n/** The active palette's name, as a writable ref. Assigning it stores and applies it. */\nexport function usePalette(): Ref<PaletteName> {\n if (paletteRef) return paletteRef\n\n paletteRef = ref<PaletteName>(stored(paletteKey, isPaletteName, 'rei'))\n watch(\n paletteRef,\n (next) => {\n store(paletteKey, next)\n applyPalette(next)\n },\n { immediate: true },\n )\n\n return paletteRef\n}\n","import { readonly, ref } from 'vue'\n\nimport { todayKey } from '../utils/date'\n\n/**\n * Today's date key, kept current while the app stays open.\n *\n * `todayKey()` called once in `setup` freezes the date for the lifetime of the\n * component. Nobody notices in a session that lasts minutes, but a phone left\n * on the Today screen overnight would keep marking yesterday, and the Week grid\n * would disable the column that just became today.\n */\nconst current = ref(todayKey())\n\nlet timer: ReturnType<typeof setTimeout> | undefined\nlet watching = false\n\n/** A second past midnight, so a fast timer cannot fire on the old date. */\nfunction msUntilMidnight(): number {\n const now = new Date()\n const next = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 1)\n\n return next.getTime() - now.getTime()\n}\n\nfunction refresh() {\n current.value = todayKey()\n}\n\nfunction schedule() {\n clearTimeout(timer)\n timer = setTimeout(() => {\n refresh()\n schedule()\n }, msUntilMidnight())\n}\n\n/**\n * Starts the clock, once, and only where there is a clock to watch.\n *\n * This used to run at import time, which made the module impossible to load on\n * a server: `document` is not defined there, and a barrel export means one\n * `import { BaseButton } from 'rei-kit'` pulls this file in. Deferring it to\n * the first `useToday()` also means an app that never asks for today never\n * arms a timer.\n */\nfunction watchTheClock() {\n if (watching || typeof document === 'undefined') return\n\n watching = true\n schedule()\n\n // A sleeping phone does not run timers reliably, so the tab also re-checks\n // the moment it comes back — which is when the user would see a stale date.\n document.addEventListener('visibilitychange', () => {\n if (document.visibilityState !== 'visible') return\n\n refresh()\n schedule()\n })\n}\n\n/**\n * @returns Read-only ref holding today's `YYYY-MM-DD` key.\n *\n * Rendered on a server this is the *server's* today, which is a different day\n * from the visitor's either side of midnight. Anything prerendered from it\n * would hydrate to a different value; render it on the client.\n *\n * @example\n * ```ts\n * const today = useToday()\n * const isFuture = computed(() => day > today.value)\n * ```\n */\nexport function useToday() {\n watchTheClock()\n\n return readonly(current)\n}\n","import { onScopeDispose } from 'vue'\n\n/**\n * Delays a callback until the caller stops calling it.\n *\n * Used for note autosave: a request per keystroke would be wasteful, but losing\n * the last keystrokes when the user navigates away would be worse — so the\n * pending call is flushed on dispose, and `flush` is exposed for route guards.\n *\n * @param callback - Runs with the arguments of the most recent call.\n * @param delay - Quiet period in milliseconds.\n * @returns `run` to schedule, `flush` to run now, `cancel` to drop.\n *\n * @example\n * ```ts\n * const save = useDebouncedCallback((body: string) => mutate(body), 800)\n * watch(text, (value) => save.run(value))\n * onBeforeRouteLeave(() => save.flush())\n * ```\n */\nexport function useDebouncedCallback<A extends unknown[]>(\n callback: (...args: A) => void,\n delay = 800,\n) {\n let timer: ReturnType<typeof setTimeout> | null = null\n let pending: A | null = null\n\n /** Runs the pending call right now, if there is one. */\n function flush() {\n if (timer !== null) clearTimeout(timer)\n timer = null\n\n if (pending !== null) {\n const args = pending\n pending = null\n callback(...args)\n }\n }\n\n /** Drops the pending call without running it. */\n function cancel() {\n if (timer !== null) clearTimeout(timer)\n timer = null\n pending = null\n }\n\n function run(...args: A) {\n pending = args\n if (timer !== null) clearTimeout(timer)\n timer = setTimeout(flush, delay)\n }\n\n // A closing sheet or an unmounting view must not eat the last keystrokes.\n onScopeDispose(flush)\n\n return { run, flush, cancel }\n}\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\n/**\n * The person, in the corner where the account lives.\n *\n * ## Why the default is a glyph and not an initial\n *\n * An initial in a circle reads as a profile picture that failed to load, and it\n * says nothing at all to somebody who has never seen an avatar in that spot\n * before — which is most people, the first time. A drawn person says \"this is\n * you\" without knowing your name. So `fallback` defaults to the figure, and\n * initials are available for the places where the name is the point: a list of\n * members, a comment thread, anywhere several people appear at once and telling\n * them apart is the job.\n *\n * An image that fails is caught and falls back rather than leaving a broken\n * frame, because a missing avatar is normal and a broken image is an error.\n */\nconst {\n name = '',\n src = '',\n size = 'md',\n fallback = 'figure',\n label = '',\n} = defineProps<{\n /** Used for the initials and, failing a `label`, as the accessible name. */\n name?: string | undefined\n src?: string | undefined\n size?: 'sm' | 'md' | 'lg' | undefined\n fallback?: 'figure' | 'initials' | undefined\n /** Overrides the accessible name. For \"Your account\" rather than a person's name. */\n label?: string | undefined\n}>()\n\nconst broken = ref(false)\nwatch(\n () => src,\n () => (broken.value = false),\n)\n\nconst showImage = computed(() => Boolean(src) && !broken.value)\n\n/**\n * Two letters at most, from the first and last word.\n *\n * `Array.from` rather than `slice`, so a name written in a script outside the\n * basic plane is cut between characters rather than through one.\n */\nconst initials = computed(() => {\n const words = name.trim().split(/\\s+/).filter(Boolean)\n if (words.length === 0) return ''\n\n const first = Array.from(words[0]!)[0] ?? ''\n const last = words.length > 1 ? (Array.from(words[words.length - 1]!)[0] ?? '') : ''\n\n return (first + last).toUpperCase()\n})\n\nconst accessibleName = computed(() => label || name)\n</script>\n\n<template>\n <span\n class=\"rk-avatar\"\n :class=\"`is-${size}`\"\n :role=\"accessibleName ? 'img' : undefined\"\n :aria-label=\"accessibleName || undefined\"\n :aria-hidden=\"accessibleName ? undefined : 'true'\"\n >\n <img v-if=\"showImage\" :src=\"src\" alt=\"\" class=\"rk-avatar-img\" @error=\"broken = true\" />\n\n <span v-else-if=\"fallback === 'initials' && initials\" class=\"rk-avatar-initials\">\n {{ initials }}\n </span>\n\n <svg v-else viewBox=\"0 0 20 20\" class=\"rk-avatar-figure\" fill=\"none\" stroke=\"currentColor\">\n <circle cx=\"10\" cy=\"6.75\" r=\"3.25\" stroke-width=\"1.5\" />\n <path\n d=\"M3.75 17c0-3.05 2.8-5.25 6.25-5.25S16.25 13.95 16.25 17\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </span>\n</template>\n\n<style scoped>\n.rk-avatar {\n display: grid;\n place-items: center;\n flex-shrink: 0;\n overflow: hidden;\n border-radius: var(--radius-cell);\n border: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n background: var(--color-surface);\n color: var(--color-ink-soft);\n}\n\n.is-sm {\n width: 1.75rem;\n height: 1.75rem;\n}\n\n.is-md {\n width: 2.25rem;\n height: 2.25rem;\n}\n\n.is-lg {\n width: 3rem;\n height: 3rem;\n}\n\n.rk-avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.rk-avatar-initials {\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1;\n color: var(--color-ink);\n}\n\n.is-lg .rk-avatar-initials {\n font-size: 1rem;\n}\n\n.rk-avatar-figure {\n width: 65%;\n height: 65%;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\n/**\n * The person, in the corner where the account lives.\n *\n * ## Why the default is a glyph and not an initial\n *\n * An initial in a circle reads as a profile picture that failed to load, and it\n * says nothing at all to somebody who has never seen an avatar in that spot\n * before — which is most people, the first time. A drawn person says \"this is\n * you\" without knowing your name. So `fallback` defaults to the figure, and\n * initials are available for the places where the name is the point: a list of\n * members, a comment thread, anywhere several people appear at once and telling\n * them apart is the job.\n *\n * An image that fails is caught and falls back rather than leaving a broken\n * frame, because a missing avatar is normal and a broken image is an error.\n */\nconst {\n name = '',\n src = '',\n size = 'md',\n fallback = 'figure',\n label = '',\n} = defineProps<{\n /** Used for the initials and, failing a `label`, as the accessible name. */\n name?: string | undefined\n src?: string | undefined\n size?: 'sm' | 'md' | 'lg' | undefined\n fallback?: 'figure' | 'initials' | undefined\n /** Overrides the accessible name. For \"Your account\" rather than a person's name. */\n label?: string | undefined\n}>()\n\nconst broken = ref(false)\nwatch(\n () => src,\n () => (broken.value = false),\n)\n\nconst showImage = computed(() => Boolean(src) && !broken.value)\n\n/**\n * Two letters at most, from the first and last word.\n *\n * `Array.from` rather than `slice`, so a name written in a script outside the\n * basic plane is cut between characters rather than through one.\n */\nconst initials = computed(() => {\n const words = name.trim().split(/\\s+/).filter(Boolean)\n if (words.length === 0) return ''\n\n const first = Array.from(words[0]!)[0] ?? ''\n const last = words.length > 1 ? (Array.from(words[words.length - 1]!)[0] ?? '') : ''\n\n return (first + last).toUpperCase()\n})\n\nconst accessibleName = computed(() => label || name)\n</script>\n\n<template>\n <span\n class=\"rk-avatar\"\n :class=\"`is-${size}`\"\n :role=\"accessibleName ? 'img' : undefined\"\n :aria-label=\"accessibleName || undefined\"\n :aria-hidden=\"accessibleName ? undefined : 'true'\"\n >\n <img v-if=\"showImage\" :src=\"src\" alt=\"\" class=\"rk-avatar-img\" @error=\"broken = true\" />\n\n <span v-else-if=\"fallback === 'initials' && initials\" class=\"rk-avatar-initials\">\n {{ initials }}\n </span>\n\n <svg v-else viewBox=\"0 0 20 20\" class=\"rk-avatar-figure\" fill=\"none\" stroke=\"currentColor\">\n <circle cx=\"10\" cy=\"6.75\" r=\"3.25\" stroke-width=\"1.5\" />\n <path\n d=\"M3.75 17c0-3.05 2.8-5.25 6.25-5.25S16.25 13.95 16.25 17\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </span>\n</template>\n\n<style scoped>\n.rk-avatar {\n display: grid;\n place-items: center;\n flex-shrink: 0;\n overflow: hidden;\n border-radius: var(--radius-cell);\n border: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n background: var(--color-surface);\n color: var(--color-ink-soft);\n}\n\n.is-sm {\n width: 1.75rem;\n height: 1.75rem;\n}\n\n.is-md {\n width: 2.25rem;\n height: 2.25rem;\n}\n\n.is-lg {\n width: 3rem;\n height: 3rem;\n}\n\n.rk-avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.rk-avatar-initials {\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1;\n color: var(--color-ink);\n}\n\n.is-lg .rk-avatar-initials {\n font-size: 1rem;\n}\n\n.rk-avatar-figure {\n width: 65%;\n height: 65%;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A small standing label: a level, a state, a count.\n *\n * Not a button and never clickable — the moment one of these needs a click it\n * is a chip, which is a different component with focus, a hit area and a way\n * to be removed. Keeping that line drawn is most of the value.\n */\nconst { tone = 'neutral' } = defineProps<{\n tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined\n}>()\n\n/*\n * The role paints the ground and the edge; `ink` paints the words.\n *\n * These used to write the role on a tint of itself — `text-positive` on\n * `bg-positive/12` — which is the obvious way to build a coloured badge and\n * is unreadable by construction. A twelve per cent tint of a colour is\n * always close to that colour, so the pair measured 1.89:1 at worst across\n * the ten palettes and failed WCAG AA in twelve of the twenty\n * palette-and-mode combinations. Nothing caught it: the palette check\n * measures token against token and this ground is neither, and the jsdom\n * audit has contrast switched off because there is no layout to measure. A\n * real browser found it.\n *\n * `text-ink` on the same tint is 4.56:1 at worst, because a faint wash of\n * anything over a surface is still nearly that surface. The colour has not\n * gone anywhere — it is the ground and the border, which is what `BaseAlert`\n * already did, and a badge was the odd one out rather than the rule.\n */\nconst TONES = {\n neutral: 'border-hair bg-muted text-ink',\n primary: 'border-primary/30 bg-primary/10 text-ink',\n success: 'border-positive/35 bg-positive/12 text-ink',\n warning: 'border-warning/40 bg-warning/15 text-ink',\n danger: 'border-negative/35 bg-negative/12 text-ink',\n} as const\n\nconst skin = computed(() => TONES[tone])\n</script>\n\n<template>\n <span\n class=\"rounded-cell inline-flex items-center gap-1 border px-2.5 py-1 text-xs font-medium whitespace-nowrap\"\n :class=\"skin\"\n >\n <slot />\n </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A small standing label: a level, a state, a count.\n *\n * Not a button and never clickable — the moment one of these needs a click it\n * is a chip, which is a different component with focus, a hit area and a way\n * to be removed. Keeping that line drawn is most of the value.\n */\nconst { tone = 'neutral' } = defineProps<{\n tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined\n}>()\n\n/*\n * The role paints the ground and the edge; `ink` paints the words.\n *\n * These used to write the role on a tint of itself — `text-positive` on\n * `bg-positive/12` — which is the obvious way to build a coloured badge and\n * is unreadable by construction. A twelve per cent tint of a colour is\n * always close to that colour, so the pair measured 1.89:1 at worst across\n * the ten palettes and failed WCAG AA in twelve of the twenty\n * palette-and-mode combinations. Nothing caught it: the palette check\n * measures token against token and this ground is neither, and the jsdom\n * audit has contrast switched off because there is no layout to measure. A\n * real browser found it.\n *\n * `text-ink` on the same tint is 4.56:1 at worst, because a faint wash of\n * anything over a surface is still nearly that surface. The colour has not\n * gone anywhere — it is the ground and the border, which is what `BaseAlert`\n * already did, and a badge was the odd one out rather than the rule.\n */\nconst TONES = {\n neutral: 'border-hair bg-muted text-ink',\n primary: 'border-primary/30 bg-primary/10 text-ink',\n success: 'border-positive/35 bg-positive/12 text-ink',\n warning: 'border-warning/40 bg-warning/15 text-ink',\n danger: 'border-negative/35 bg-negative/12 text-ink',\n} as const\n\nconst skin = computed(() => TONES[tone])\n</script>\n\n<template>\n <span\n class=\"rounded-cell inline-flex items-center gap-1 border px-2.5 py-1 text-xs font-medium whitespace-nowrap\"\n :class=\"skin\"\n >\n <slot />\n </span>\n</template>\n","<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport { useAnchoredPanel } from '../composables/use-anchored-panel'\nimport { useMenuKeys } from '../composables/use-menu-keys'\n\n/**\n * A list of actions behind one control.\n *\n * ## `role=\"menu\"` is a promise\n *\n * Declaring it tells a screen reader that the arrow keys move between the\n * items, that Escape closes, and that Tab leaves rather than walking through.\n * A div with `role=\"menu\"` and none of that is worse than a plain list of\n * links: it announces a contract and then breaks it, and the reader is left\n * pressing keys that do nothing.\n *\n * The hand-written menu this replaces declared the role and had none of the\n * behaviour. That is the usual shape of the bug — the roles are the part people\n * remember, because they are the part you can see in the markup.\n *\n * It opens above its trigger when there is no room below — a menu button\n * near the bottom of a window is the common case, not the awkward one, and\n * the panel that ran off the screen still rendered, still passed axe, and\n * still had every item in it.\n *\n * So: focus moves into the menu on open and back to the trigger on close,\n * ArrowUp/ArrowDown move and wrap, Home and End jump, Escape closes, and a\n * click outside closes. Items are found in the DOM rather than declared as\n * data, so a caller can mix links, buttons and separators freely.\n *\n * @example\n * ```vue\n * <BaseMenu :label=\"t('nav.account')\">\n * <template #trigger=\"{ open }\">\n * <BaseAvatar :label=\"t('nav.account')\" />\n * </template>\n *\n * <RouterLink to=\"/profil\" role=\"menuitem\">{{ t('nav.profile') }}</RouterLink>\n * <button type=\"button\" role=\"menuitem\" @click=\"signOut\">{{ t('auth.signOut') }}</button>\n * </BaseMenu>\n * ```\n */\nconst { label, align = 'end' } = defineProps<{\n /** Accessible name for the trigger. Required: the trigger is usually a glyph. */\n label: string\n /** Which edge the panel lines up with. */\n align?: 'start' | 'end' | undefined\n}>()\n\ndefineSlots<{\n /** The control that opens it. Receives the open state for its own styling. */\n trigger?: (props: { open: boolean }) => unknown\n /** The items. Anything with `role=\"menuitem\"` joins the keyboard order. */\n default: () => unknown\n}>()\n\nconst open = defineModel<boolean>({ default: false })\n\nconst root = ref<HTMLElement | null>(null)\nconst panel = ref<HTMLElement | null>(null)\nconst trigger = ref<HTMLElement | null>(null)\n\nconst id = useId()\n\nconst { placed, shift } = useAnchoredPanel({ root, panel, open })\n\nconst { items: menuItems, onKeydown: onMenuKeydown } = useMenuKeys({\n panel,\n onClose: () => (open.value = false),\n})\n\nfunction onKeydown(event: KeyboardEvent) {\n if (!open.value) {\n // The arrows open the menu from the trigger, which is what makes it\n // reachable without a mouse in the first place.\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault()\n open.value = true\n }\n\n return\n }\n\n onMenuKeydown(event)\n}\n\nfunction onDocumentPointer(event: Event) {\n if (root.value && !root.value.contains(event.target as Node)) open.value = false\n}\n\n/* `immediate`, because a menu can be mounted already open -- a caller driving\n it from a route, or a test. Without it that menu has no outside-click\n listener and never moves focus, and nothing says so: it looks open and\n behaves like a div. The closed case is a no-op, since removing a listener\n that was never added is free and focus is only taken back from inside. */\nwatch(\n open,\n async (isOpen) => {\n if (typeof document === 'undefined') return\n\n if (isOpen) {\n document.addEventListener('pointerdown', onDocumentPointer)\n await nextTick()\n menuItems()[0]?.focus()\n } else {\n document.removeEventListener('pointerdown', onDocumentPointer)\n // Only take focus back if it is still inside the menu; otherwise the menu\n // is closing *because* the reader went somewhere else, and dragging them\n // back is the rudest thing it could do.\n if (root.value?.contains(document.activeElement)) trigger.value?.focus()\n }\n },\n { immediate: true },\n)\n\nonBeforeUnmount(() => {\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointerdown', onDocumentPointer)\n }\n})\n</script>\n\n<template>\n <div ref=\"root\" class=\"rk-menu\" @keydown=\"onKeydown\">\n <button\n ref=\"trigger\"\n type=\"button\"\n class=\"rk-menu-trigger\"\n :aria-label=\"label\"\n :aria-expanded=\"open\"\n :aria-haspopup=\"true\"\n :aria-controls=\"open ? id : undefined\"\n @click=\"open = !open\"\n >\n <slot name=\"trigger\" :open=\"open\" />\n </button>\n\n <div\n v-if=\"open\"\n :id=\"id\"\n ref=\"panel\"\n class=\"rk-menu-panel surface-overlay\"\n :class=\"[`is-${align}`, `is-${placed}`]\"\n :style=\"shift ? { '--rk-menu-shift': `${shift}px` } : undefined\"\n role=\"menu\"\n >\n <slot />\n </div>\n </div>\n</template>\n\n<style scoped>\n.rk-menu {\n position: relative;\n display: inline-flex;\n}\n\n.rk-menu-trigger {\n display: inline-flex;\n border-radius: var(--radius-cell);\n}\n\n.rk-menu-trigger:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-menu-panel {\n position: absolute;\n z-index: 50;\n /* The slide is a translate rather than an inset, so it composes with the\n `is-start`/`is-end` edge the caller asked for instead of replacing it. */\n transform: translateX(var(--rk-menu-shift, 0px));\n min-width: 12rem;\n overflow: hidden;\n border-radius: var(--radius-card);\n padding: 0.375rem;\n}\n\n.rk-menu-panel.is-bottom {\n top: calc(100% + 0.5rem);\n}\n\n.rk-menu-panel.is-top {\n bottom: calc(100% + 0.5rem);\n}\n\n.rk-menu-panel.is-end {\n inset-inline-end: 0;\n}\n\n.rk-menu-panel.is-start {\n inset-inline-start: 0;\n}\n\n/* The items belong to the caller, so this styles them by role rather than by\n class: whatever they render, it lines up. */\n.rk-menu-panel :deep([role='menuitem']) {\n display: block;\n width: 100%;\n border-radius: var(--radius-cell);\n padding: 0.5rem 0.75rem;\n text-align: start;\n font-size: 0.875rem;\n color: var(--color-ink);\n transition: background-color var(--duration-fast);\n}\n\n.rk-menu-panel :deep([role='menuitem']:hover) {\n background: var(--color-muted);\n}\n\n.rk-menu-panel :deep([role='menuitem']:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n.rk-menu-panel :deep(hr) {\n margin: 0.375rem 0;\n height: 1px;\n border: 0;\n background: color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport { useAnchoredPanel } from '../composables/use-anchored-panel'\nimport { useMenuKeys } from '../composables/use-menu-keys'\n\n/**\n * A list of actions behind one control.\n *\n * ## `role=\"menu\"` is a promise\n *\n * Declaring it tells a screen reader that the arrow keys move between the\n * items, that Escape closes, and that Tab leaves rather than walking through.\n * A div with `role=\"menu\"` and none of that is worse than a plain list of\n * links: it announces a contract and then breaks it, and the reader is left\n * pressing keys that do nothing.\n *\n * The hand-written menu this replaces declared the role and had none of the\n * behaviour. That is the usual shape of the bug — the roles are the part people\n * remember, because they are the part you can see in the markup.\n *\n * It opens above its trigger when there is no room below — a menu button\n * near the bottom of a window is the common case, not the awkward one, and\n * the panel that ran off the screen still rendered, still passed axe, and\n * still had every item in it.\n *\n * So: focus moves into the menu on open and back to the trigger on close,\n * ArrowUp/ArrowDown move and wrap, Home and End jump, Escape closes, and a\n * click outside closes. Items are found in the DOM rather than declared as\n * data, so a caller can mix links, buttons and separators freely.\n *\n * @example\n * ```vue\n * <BaseMenu :label=\"t('nav.account')\">\n * <template #trigger=\"{ open }\">\n * <BaseAvatar :label=\"t('nav.account')\" />\n * </template>\n *\n * <RouterLink to=\"/profil\" role=\"menuitem\">{{ t('nav.profile') }}</RouterLink>\n * <button type=\"button\" role=\"menuitem\" @click=\"signOut\">{{ t('auth.signOut') }}</button>\n * </BaseMenu>\n * ```\n */\nconst { label, align = 'end' } = defineProps<{\n /** Accessible name for the trigger. Required: the trigger is usually a glyph. */\n label: string\n /** Which edge the panel lines up with. */\n align?: 'start' | 'end' | undefined\n}>()\n\ndefineSlots<{\n /** The control that opens it. Receives the open state for its own styling. */\n trigger?: (props: { open: boolean }) => unknown\n /** The items. Anything with `role=\"menuitem\"` joins the keyboard order. */\n default: () => unknown\n}>()\n\nconst open = defineModel<boolean>({ default: false })\n\nconst root = ref<HTMLElement | null>(null)\nconst panel = ref<HTMLElement | null>(null)\nconst trigger = ref<HTMLElement | null>(null)\n\nconst id = useId()\n\nconst { placed, shift } = useAnchoredPanel({ root, panel, open })\n\nconst { items: menuItems, onKeydown: onMenuKeydown } = useMenuKeys({\n panel,\n onClose: () => (open.value = false),\n})\n\nfunction onKeydown(event: KeyboardEvent) {\n if (!open.value) {\n // The arrows open the menu from the trigger, which is what makes it\n // reachable without a mouse in the first place.\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault()\n open.value = true\n }\n\n return\n }\n\n onMenuKeydown(event)\n}\n\nfunction onDocumentPointer(event: Event) {\n if (root.value && !root.value.contains(event.target as Node)) open.value = false\n}\n\n/* `immediate`, because a menu can be mounted already open -- a caller driving\n it from a route, or a test. Without it that menu has no outside-click\n listener and never moves focus, and nothing says so: it looks open and\n behaves like a div. The closed case is a no-op, since removing a listener\n that was never added is free and focus is only taken back from inside. */\nwatch(\n open,\n async (isOpen) => {\n if (typeof document === 'undefined') return\n\n if (isOpen) {\n document.addEventListener('pointerdown', onDocumentPointer)\n await nextTick()\n menuItems()[0]?.focus()\n } else {\n document.removeEventListener('pointerdown', onDocumentPointer)\n // Only take focus back if it is still inside the menu; otherwise the menu\n // is closing *because* the reader went somewhere else, and dragging them\n // back is the rudest thing it could do.\n if (root.value?.contains(document.activeElement)) trigger.value?.focus()\n }\n },\n { immediate: true },\n)\n\nonBeforeUnmount(() => {\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointerdown', onDocumentPointer)\n }\n})\n</script>\n\n<template>\n <div ref=\"root\" class=\"rk-menu\" @keydown=\"onKeydown\">\n <button\n ref=\"trigger\"\n type=\"button\"\n class=\"rk-menu-trigger\"\n :aria-label=\"label\"\n :aria-expanded=\"open\"\n :aria-haspopup=\"true\"\n :aria-controls=\"open ? id : undefined\"\n @click=\"open = !open\"\n >\n <slot name=\"trigger\" :open=\"open\" />\n </button>\n\n <div\n v-if=\"open\"\n :id=\"id\"\n ref=\"panel\"\n class=\"rk-menu-panel surface-overlay\"\n :class=\"[`is-${align}`, `is-${placed}`]\"\n :style=\"shift ? { '--rk-menu-shift': `${shift}px` } : undefined\"\n role=\"menu\"\n >\n <slot />\n </div>\n </div>\n</template>\n\n<style scoped>\n.rk-menu {\n position: relative;\n display: inline-flex;\n}\n\n.rk-menu-trigger {\n display: inline-flex;\n border-radius: var(--radius-cell);\n}\n\n.rk-menu-trigger:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-menu-panel {\n position: absolute;\n z-index: 50;\n /* The slide is a translate rather than an inset, so it composes with the\n `is-start`/`is-end` edge the caller asked for instead of replacing it. */\n transform: translateX(var(--rk-menu-shift, 0px));\n min-width: 12rem;\n overflow: hidden;\n border-radius: var(--radius-card);\n padding: 0.375rem;\n}\n\n.rk-menu-panel.is-bottom {\n top: calc(100% + 0.5rem);\n}\n\n.rk-menu-panel.is-top {\n bottom: calc(100% + 0.5rem);\n}\n\n.rk-menu-panel.is-end {\n inset-inline-end: 0;\n}\n\n.rk-menu-panel.is-start {\n inset-inline-start: 0;\n}\n\n/* The items belong to the caller, so this styles them by role rather than by\n class: whatever they render, it lines up. */\n.rk-menu-panel :deep([role='menuitem']) {\n display: block;\n width: 100%;\n border-radius: var(--radius-cell);\n padding: 0.5rem 0.75rem;\n text-align: start;\n font-size: 0.875rem;\n color: var(--color-ink);\n transition: background-color var(--duration-fast);\n}\n\n.rk-menu-panel :deep([role='menuitem']:hover) {\n background: var(--color-muted);\n}\n\n.rk-menu-panel :deep([role='menuitem']:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n.rk-menu-panel :deep(hr) {\n margin: 0.375rem 0;\n height: 1px;\n border: 0;\n background: color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * A surface with a border, and optionally a head and a foot.\n *\n * Every app here had written this div. That is not a crisis on its own — it is\n * four classes — but it is four classes that were slightly different in each,\n * so a card on one screen had a heavier border than a card on the next and\n * nobody could say why.\n *\n * With no head and no foot there is no wrapper div: the padding lands on the\n * card itself and the card *is* the element. That matters more than a saved\n * node — most cards in the apps lay their contents out (`flex items-center\n * gap-4`, `flex flex-col gap-3`), and with a wrapper in the way those classes\n * reach the border and not the content, so the app has to add back the div\n * this component exists to remove. One that makes you do that is one you skip.\n *\n * `interactive` is for a card that is a link or a button: it adds the lift and\n * the press, and it is opt-in because a card holding a form should not move\n * when the pointer crosses it.\n */\nconst {\n interactive = false,\n as = 'div',\n padding = 'md',\n} = defineProps<{\n interactive?: boolean | undefined\n as?: string | undefined\n /**\n * How much room the card gives its contents.\n *\n * This component shipped with `px-5 py-4` baked in and was then used by\n * nobody, across three apps and thirty-five hand-written card surfaces —\n * which used `p-3` six times, `p-4` six times, `p-5` five times and `p-1`\n * four times, and not once the pair this insisted on. A card that fixes its\n * padding cannot be reached for, which is the same mistake `PageContainer`\n * made with its width and `size=\"sm\"` made with its height.\n *\n * `none` is for a card that holds a list: the rows own the padding, and the\n * dividers have to reach the border.\n */\n padding?: 'none' | 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst BODY = {\n none: '',\n sm: 'p-3',\n md: 'p-4',\n lg: 'p-5',\n} as const\n\n/* The head and the foot follow the body, so a card cannot be tight around its\n contents and loose around its title. */\nconst HEAD = {\n none: '',\n sm: 'px-3 py-2.5',\n md: 'px-4 py-3',\n lg: 'px-5 py-4',\n} as const\n</script>\n\n<template>\n <component\n :is=\"as\"\n class=\"surface rounded-card\"\n :class=\"[\n interactive\n ? 'ease-standard transition-[transform,box-shadow] duration-(--duration-slow) hover:-translate-y-0.5 hover:[--surface-shadow:var(--shadow-raised)] active:translate-y-0 active:[--surface-shadow:var(--shadow-card)]'\n : '',\n $slots.head || $slots.foot ? '' : BODY[padding],\n ]\"\n >\n <div v-if=\"$slots.head\" class=\"border-hair/70 border-b\" :class=\"HEAD[padding]\">\n <slot name=\"head\" />\n </div>\n\n <div v-if=\"$slots.head || $slots.foot\" :class=\"BODY[padding]\"><slot /></div>\n <slot v-else />\n\n <div v-if=\"$slots.foot\" class=\"border-hair/70 bg-muted/30 border-t\" :class=\"HEAD[padding]\">\n <slot name=\"foot\" />\n </div>\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * A surface with a border, and optionally a head and a foot.\n *\n * Every app here had written this div. That is not a crisis on its own — it is\n * four classes — but it is four classes that were slightly different in each,\n * so a card on one screen had a heavier border than a card on the next and\n * nobody could say why.\n *\n * With no head and no foot there is no wrapper div: the padding lands on the\n * card itself and the card *is* the element. That matters more than a saved\n * node — most cards in the apps lay their contents out (`flex items-center\n * gap-4`, `flex flex-col gap-3`), and with a wrapper in the way those classes\n * reach the border and not the content, so the app has to add back the div\n * this component exists to remove. One that makes you do that is one you skip.\n *\n * `interactive` is for a card that is a link or a button: it adds the lift and\n * the press, and it is opt-in because a card holding a form should not move\n * when the pointer crosses it.\n */\nconst {\n interactive = false,\n as = 'div',\n padding = 'md',\n} = defineProps<{\n interactive?: boolean | undefined\n as?: string | undefined\n /**\n * How much room the card gives its contents.\n *\n * This component shipped with `px-5 py-4` baked in and was then used by\n * nobody, across three apps and thirty-five hand-written card surfaces —\n * which used `p-3` six times, `p-4` six times, `p-5` five times and `p-1`\n * four times, and not once the pair this insisted on. A card that fixes its\n * padding cannot be reached for, which is the same mistake `PageContainer`\n * made with its width and `size=\"sm\"` made with its height.\n *\n * `none` is for a card that holds a list: the rows own the padding, and the\n * dividers have to reach the border.\n */\n padding?: 'none' | 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst BODY = {\n none: '',\n sm: 'p-3',\n md: 'p-4',\n lg: 'p-5',\n} as const\n\n/* The head and the foot follow the body, so a card cannot be tight around its\n contents and loose around its title. */\nconst HEAD = {\n none: '',\n sm: 'px-3 py-2.5',\n md: 'px-4 py-3',\n lg: 'px-5 py-4',\n} as const\n</script>\n\n<template>\n <component\n :is=\"as\"\n class=\"surface rounded-card\"\n :class=\"[\n interactive\n ? 'ease-standard transition-[transform,box-shadow] duration-(--duration-slow) hover:-translate-y-0.5 hover:[--surface-shadow:var(--shadow-raised)] active:translate-y-0 active:[--surface-shadow:var(--shadow-card)]'\n : '',\n $slots.head || $slots.foot ? '' : BODY[padding],\n ]\"\n >\n <div v-if=\"$slots.head\" class=\"border-hair/70 border-b\" :class=\"HEAD[padding]\">\n <slot name=\"head\" />\n </div>\n\n <div v-if=\"$slots.head || $slots.foot\" :class=\"BODY[padding]\"><slot /></div>\n <slot v-else />\n\n <div v-if=\"$slots.foot\" class=\"border-hair/70 bg-muted/30 border-t\" :class=\"HEAD[padding]\">\n <slot name=\"foot\" />\n </div>\n </component>\n</template>\n","import { computed, ref } from 'vue'\nimport type { Ref } from 'vue'\n\n/** Rows of slack each way, so a fast scroll does not show a gap before the\n * next frame fills it. */\nconst OVERSCAN_ROWS = 3\n\nexport interface VirtualWindowOptions {\n /** How many rows there are in total. */\n count: Ref<number>\n /** Every row is this tall, in pixels. Fixed — that is what makes the\n * arithmetic possible without measuring each one. */\n rowHeight: Ref<number>\n /**\n * Below this many rows the window is the whole list and the padding is\n * zero, so a short list renders exactly as it would without any of this.\n */\n threshold: Ref<number>\n}\n\n/**\n * The arithmetic behind a windowed list: which rows are near the viewport,\n * and how much empty space stands in for the rest.\n *\n * This is the part `BaseCombobox` and `VirtualList` share. It was written\n * inside the combobox first, and pulling it out here is the reason there is\n * one copy of it rather than two — the second would have drifted, and the\n * half that drifts silently is the padding, which is what keeps the\n * scrollbar honest about how long the list is.\n *\n * There is no clock and no observer in here: it is a function of the scroll\n * position, and the component that owns the element is what tells it where\n * that is. That is also what makes it testable without a layout.\n */\nexport function useVirtualWindow({ count, rowHeight, threshold }: VirtualWindowOptions) {\n /** How far down the list is scrolled. Set by the owner from a scroll event. */\n const scrollTop = ref(0)\n /** How tall the viewport is. Measured by the owner, never guessed here. */\n const viewportHeight = ref(0)\n\n const active = computed(() => count.value > threshold.value)\n\n const window_ = computed(() => {\n if (!active.value) return { start: 0, end: count.value }\n\n const first = Math.max(0, Math.floor(scrollTop.value / rowHeight.value) - OVERSCAN_ROWS)\n const rows = Math.ceil(viewportHeight.value / rowHeight.value) + OVERSCAN_ROWS * 2\n\n return { start: first, end: Math.min(count.value, first + rows) }\n })\n\n /** The empty space standing in for the rows above and below the window. */\n const padTop = computed(() => (active.value ? window_.value.start * rowHeight.value : 0))\n const padBottom = computed(() =>\n active.value ? (count.value - window_.value.end) * rowHeight.value : 0,\n )\n\n /** Takes the scroll position straight off the event the owner received. */\n function onScroll(event: Event) {\n scrollTop.value = (event.target as HTMLElement).scrollTop\n }\n\n return { active, window: window_, padTop, padBottom, scrollTop, viewportHeight, onScroll }\n}\n","<script setup lang=\"ts\" generic=\"V extends string, M extends 'single' | 'multiple' = 'single'\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport { useBoundValue } from '../composables/use-bound-value'\nimport { useAnchoredPanel } from '../composables/use-anchored-panel'\nimport { useVirtualWindow } from '../composables/use-virtual-window'\nimport BaseSkeleton from './BaseSkeleton.vue'\n\nexport interface ComboboxOption<V extends string> {\n value: V\n /** Already translated. */\n label: string\n}\n\n/**\n * A field you type into to narrow a list, then choose from it.\n *\n * ## When to reach for this instead of `BaseSelect`\n *\n * A native select is better up to a few dozen options: it uses the platform's\n * own picker, which on a phone is a wheel the reader already knows and which no\n * web control can match. This is for when the list is long enough that reading\n * it is the problem — a country, a currency, a course — and typing three\n * letters beats scrolling.\n *\n * ## What the pattern requires\n *\n * The ARIA combobox is prescribed down to which element owns which attribute,\n * and hand-written ones get the same three things wrong:\n *\n * - **`aria-activedescendant`, not focus.** Focus stays in the text field while\n * the arrows move a highlight through the list. Moving real focus into the\n * list means typing stops working, which is the entire point of the control.\n * - **`aria-expanded` on the input**, not the wrapper. A screen reader looks for\n * it on the element with `role=\"combobox\"`.\n * - **Escape closes before it clears.** One press shuts the list, a second\n * empties the field. Clearing on the first press throws away what was typed\n * when somebody only wanted the list out of the way.\n *\n * The highlighted option is scrolled into view, because a highlight below the\n * fold is a selection nobody can see.\n *\n * ## A list that comes from a server\n *\n * `@search` is the typed text, debounced — the kit holds the timer so every\n * app does not write the same one, and it is cancelled on unmount so a\n * request is never fired at a component that has gone. Set `filter=\"none\"`\n * alongside it: when the server has already narrowed the list, narrowing it\n * again here hides rows that matched for a reason the client cannot see.\n *\n * `loading` marks the list `aria-busy` while the answer is on its way, which\n * is the part that is heard. `loadingLabel` is the part that is read, and it\n * is optional for the same reason every other visible string here is a prop:\n * the kit has no language of its own.\n *\n * ## More than one answer\n *\n * `mode=\"multiple\"` keeps the chosen ones as chips in the field, and choosing\n * an option again takes it back off. Backspace on an empty field removes the\n * last one. The chips carry a remove button only when `removeLabel` is given,\n * because a button whose name the kit had to invent would be a button that\n * speaks a language the app does not.\n *\n * ## A list too long to render\n *\n * Past `virtualizeAfter` options only the rows near the viewport are in the\n * DOM, with a spacer above and below standing in for the rest. Every row\n * still states `aria-setsize` and `aria-posinset`, so what a screen reader\n * hears is the whole list — \"3 of 4000\" — rather than the window.\n */\nconst {\n modelValue = undefined,\n label,\n options,\n placeholder = '',\n hint = '',\n error = '',\n disabled = false,\n emptyLabel,\n mode = 'single' as M,\n removeLabel = undefined,\n loading = false,\n loadingLabel = '',\n filter = 'local',\n debounce = 200,\n virtualizeAfter = 150,\n rowHeight = 36,\n} = defineProps<{\n /** The chosen value, or values in `multiple` mode, with `v-model`. */\n modelValue?: Value | undefined\n label: string\n options: readonly ComboboxOption<V>[]\n placeholder?: string | undefined\n hint?: string | undefined\n error?: string | undefined\n disabled?: boolean | undefined\n /** Shown when nothing matches. Already translated. */\n emptyLabel: string\n /** `multiple` keeps the chosen ones as chips in the field. */\n mode?: M | undefined\n /** Names a chip's remove button. Without it, chips carry no button. */\n removeLabel?: ((label: string) => string) | undefined\n /** Marks the list busy while an answer is on its way. */\n loading?: boolean | undefined\n /** Read while `loading`. Already translated. */\n loadingLabel?: string | undefined\n /** `none` when the server has already narrowed the list. */\n filter?: 'local' | 'none' | undefined\n /** How long typing settles before `search`, in milliseconds. */\n debounce?: number | undefined\n /** Past this many options, only the rows near the viewport are rendered. */\n virtualizeAfter?: number | undefined\n /** A row's height in pixels; the virtual window is measured in these. */\n rowHeight?: number | undefined\n}>()\n\n/** Multiple always hands back an array; a single choice is the value or ''. */\ntype Value = M extends 'multiple' ? V[] : V | ''\n\n/* Declared by hand rather than with defineModel, which cannot both accept\n `undefined` and promise never to emit it -- and an app whose model is\n `ref('')` is exactly the one that breaks. See `use-bound-value.ts`. */\nconst emit = defineEmits<{\n 'update:modelValue': [value: Value]\n /** The typed text, once it has settled. For a list that lives on a server. */\n search: [query: string]\n}>()\n\nconst model = useBoundValue<Value>(\n () => modelValue as Value | undefined,\n (value) => emit('update:modelValue', value),\n)\n\nconst multiple = computed(() => mode === 'multiple')\n\n/** The chosen values, however many there are, as a plain array. */\nconst chosen = computed<V[]>(() => {\n const value = model.value as V | V[] | '' | undefined\n if (Array.isArray(value)) return value\n return value === undefined || value === '' ? [] : [value]\n})\n\nconst chosenOptions = computed(() =>\n chosen.value.map(\n (value) => options.find((option) => option.value === value) ?? { value, label: value },\n ),\n)\n\nconst id = useId()\nconst listId = `${id}-list`\nconst hintId = `${id}-hint`\nconst errorId = `${id}-error`\nconst optionId = (index: number) => `${id}-opt-${index}`\n\nconst open = ref(false)\nconst query = ref('')\nconst highlighted = ref(0)\nconst root = ref<HTMLElement | null>(null)\nconst list = ref<HTMLElement | null>(null)\n\n/* A field near the bottom of a form is where a combobox usually is — the\n last question before the button — so the list opens above it when that\n is where the room is. */\nconst { placed, shift } = useAnchoredPanel({ root, panel: list, open })\n\nconst single = computed(() => (multiple.value ? undefined : chosenOptions.value[0]))\n\n/**\n * What the input shows.\n *\n * In multiple mode it is always the query: the answers are the chips beside\n * it, and writing one of them into the field would mean deleting it to search\n * for the next.\n */\nconst text = computed({\n get: () => (multiple.value || open.value ? query.value : (single.value?.label ?? '')),\n set: (value: string) => {\n query.value = value\n open.value = true\n highlighted.value = 0\n announce(value)\n },\n})\n\nconst matches = computed(() => {\n const needle = query.value.trim().toLowerCase()\n // `none` is for a list the server has already narrowed: filtering again\n // here would hide rows that matched for a reason this side cannot see.\n if (filter === 'none' || !open.value || needle === '') return options\n\n return options.filter((option) => option.label.toLowerCase().includes(needle))\n})\n\nconst describedBy = computed(() => {\n if (error) return errorId\n if (hint) return hintId\n return undefined\n})\n\n/* ─── A list that comes from a server ─── */\n\nlet timer: ReturnType<typeof setTimeout> | undefined\n\nfunction announce(value: string) {\n if (timer) clearTimeout(timer)\n timer = setTimeout(() => emit('search', value.trim()), debounce)\n}\n\n/* ─── Virtualisation ─── */\n\n/* The windowing arithmetic lives in `useVirtualWindow`, which `VirtualList`\n shares: one copy, so the padding that keeps the scrollbar honest about\n the length of the list cannot drift between them. */\nconst {\n active: virtual,\n window: window_,\n padTop,\n padBottom,\n viewportHeight: viewport,\n onScroll,\n} = useVirtualWindow({\n count: computed(() => matches.value.length),\n rowHeight: computed(() => rowHeight),\n threshold: computed(() => virtualizeAfter),\n})\n\n/** How tall the list box is; read once it is open, and this until then. */\nviewport.value = 224\n\nconst rows = computed(() =>\n matches.value.slice(window_.value.start, window_.value.end).map((option, index) => ({\n option,\n /** The row's place in the whole list, not in the window. */\n index: window_.value.start + index,\n })),\n)\n\n/* ─── Choosing ─── */\n\nfunction choose(option: ComboboxOption<V> | undefined) {\n if (!option) return\n\n if (multiple.value) {\n const next = chosen.value.includes(option.value)\n ? chosen.value.filter((one) => one !== option.value)\n : [...chosen.value, option.value]\n\n model.value = next as Value\n // The field stays open: choosing several means choosing again.\n query.value = ''\n return\n }\n\n model.value = option.value as Value\n query.value = ''\n open.value = false\n}\n\nfunction remove(value: V) {\n if (!multiple.value) return\n model.value = chosen.value.filter((one) => one !== value) as Value\n}\n\nfunction move(delta: number) {\n const count = matches.value.length\n if (count === 0) return\n\n open.value = true\n highlighted.value = (highlighted.value + delta + count) % count\n void scrollHighlightIntoView()\n}\n\nasync function scrollHighlightIntoView() {\n await nextTick()\n\n // A virtual row may not be in the DOM at all, so the scroller is moved by\n // arithmetic rather than by asking an element that is not there.\n if (virtual.value && list.value) {\n const top = highlighted.value * rowHeight\n const bottom = top + rowHeight\n if (top < list.value.scrollTop) list.value.scrollTop = top\n else if (bottom > list.value.scrollTop + viewport.value) {\n list.value.scrollTop = bottom - viewport.value\n }\n return\n }\n\n // By position rather than by selector: `CSS.escape` does not exist in jsdom\n // or on a server, and the rows are the only children here -- the spacers\n // are rendered only in the virtual case, which returned above.\n const el = list.value?.children[highlighted.value] as HTMLElement | undefined\n // A highlight below the fold is a selection nobody can see. Feature-detected\n // rather than called: `scrollIntoView` is missing in jsdom and in more than\n // one embedded webview, and a keyboard that throws is worse than a list that\n // does not scroll.\n el?.scrollIntoView?.({ block: 'nearest' })\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault()\n move(1)\n break\n case 'ArrowUp':\n event.preventDefault()\n move(-1)\n break\n case 'Enter':\n if (!open.value) return\n event.preventDefault()\n choose(matches.value[highlighted.value])\n break\n case 'Backspace':\n // Only with nothing to delete in the field, or it would eat a letter\n // and a chip with the same press.\n if (multiple.value && query.value === '' && chosen.value.length > 0) {\n event.preventDefault()\n remove(chosen.value[chosen.value.length - 1]!)\n }\n break\n case 'Escape':\n // Close first, clear second. One press to get the list out of the way\n // without losing what was typed.\n event.preventDefault()\n if (open.value) {\n open.value = false\n query.value = ''\n } else if (!multiple.value) {\n model.value = '' as Value\n }\n break\n case 'Tab':\n open.value = false\n break\n }\n}\n\nfunction onDocumentPointer(event: Event) {\n if (root.value && !root.value.contains(event.target as Node)) {\n open.value = false\n query.value = ''\n }\n}\n\nwatch(\n open,\n async (isOpen) => {\n if (typeof document === 'undefined') return\n\n if (isOpen) {\n document.addEventListener('pointerdown', onDocumentPointer)\n await nextTick()\n // Measured, not assumed: the height is a CSS value an app may change.\n if (list.value) viewport.value = list.value.clientHeight || viewport.value\n } else document.removeEventListener('pointerdown', onDocumentPointer)\n },\n { immediate: true },\n)\n\n/* A shorter list can leave the highlight past its end. */\nwatch(matches, () => {\n if (highlighted.value >= matches.value.length) highlighted.value = 0\n})\n\nonBeforeUnmount(() => {\n if (timer) clearTimeout(timer)\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointerdown', onDocumentPointer)\n }\n})\n</script>\n\n<template>\n <div ref=\"root\" class=\"rk-combo\">\n <label :for=\"id\" class=\"rk-combo-label\">{{ label }}</label>\n\n <!-- With chips the whole box is the control, so it is the box that\n carries the `control` surface and the focus ring; the input inside\n it is plain text. Leaving `control` on the input drew a second\n field inside the first. -->\n <div class=\"rk-combo-field\" :class=\"multiple ? 'is-multiple control' : ''\">\n <span\n v-for=\"option in multiple ? chosenOptions : []\"\n :key=\"option.value\"\n class=\"rk-combo-chip\"\n >\n <span>{{ option.label }}</span>\n <button\n v-if=\"removeLabel\"\n type=\"button\"\n class=\"rk-combo-chip-x focus-ring\"\n :aria-label=\"removeLabel(option.label)\"\n :disabled=\"disabled\"\n @click=\"remove(option.value)\"\n >\n ×\n </button>\n </span>\n\n <input\n :id=\"id\"\n v-model=\"text\"\n type=\"text\"\n role=\"combobox\"\n class=\"rk-combo-input\"\n :class=\"{ control: !multiple }\"\n autocomplete=\"off\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-expanded=\"open\"\n :aria-controls=\"listId\"\n aria-autocomplete=\"list\"\n :aria-activedescendant=\"open ? optionId(highlighted) : undefined\"\n :aria-invalid=\"Boolean(error)\"\n :aria-describedby=\"describedBy\"\n @keydown=\"onKeydown\"\n @focus=\"open = true\"\n />\n\n <button\n type=\"button\"\n class=\"rk-combo-toggle\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :disabled=\"disabled\"\n @click=\"open = !open\"\n >\n ▾\n </button>\n </div>\n\n <ul\n v-show=\"open\"\n :id=\"listId\"\n ref=\"list\"\n role=\"listbox\"\n class=\"rk-combo-list surface-overlay\"\n :class=\"`is-${placed}`\"\n :style=\"shift ? { '--rk-combo-shift': `${shift}px` } : undefined\"\n :aria-label=\"label\"\n :aria-multiselectable=\"multiple ? true : undefined\"\n :aria-busy=\"loading ? true : undefined\"\n @scroll=\"onScroll\"\n >\n <li v-if=\"padTop > 0\" :style=\"{ height: `${padTop}px` }\" aria-hidden=\"true\" />\n\n <li\n v-for=\"row in rows\"\n :id=\"optionId(row.index)\"\n :key=\"row.option.value\"\n role=\"option\"\n class=\"rk-combo-option\"\n :class=\"{\n 'is-highlighted': row.index === highlighted,\n 'is-selected': chosen.includes(row.option.value),\n }\"\n :style=\"virtual ? { height: `${rowHeight}px` } : undefined\"\n :aria-selected=\"chosen.includes(row.option.value)\"\n :aria-setsize=\"matches.length\"\n :aria-posinset=\"row.index + 1\"\n @pointerdown.prevent=\"choose(row.option)\"\n @pointermove=\"highlighted = row.index\"\n >\n {{ row.option.label }}\n </li>\n\n <li v-if=\"padBottom > 0\" :style=\"{ height: `${padBottom}px` }\" aria-hidden=\"true\" />\n\n <!-- Rows in the shape of the rows that are coming, rather than a\n spinner: the list keeps its height, so the page under it does not\n jump when the answer lands. The list says `aria-busy`, which is\n what is heard; `loadingLabel` is what is read, when given. -->\n <li v-if=\"loading\" class=\"rk-combo-status\">\n <span v-if=\"loadingLabel\">{{ loadingLabel }}</span>\n <span class=\"rk-combo-status-rows\" aria-hidden=\"true\">\n <BaseSkeleton v-for=\"n in 3\" :key=\"n\" shape=\"text\" height=\"0.75rem\" />\n </span>\n </li>\n\n <li v-else-if=\"matches.length === 0\" class=\"rk-combo-empty\">{{ emptyLabel }}</li>\n </ul>\n\n <p v-if=\"error\" :id=\"errorId\" class=\"rk-combo-error\">{{ error }}</p>\n <p v-else-if=\"hint\" :id=\"hintId\" class=\"rk-combo-hint\">{{ hint }}</p>\n </div>\n</template>\n\n<style scoped>\n.rk-combo {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n}\n\n.rk-combo-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-combo-field {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n/* With chips the field is a box that wraps, and the input is one item in it\n that grows into whatever is left. */\n.rk-combo-field.is-multiple {\n flex-wrap: wrap;\n gap: 0.25rem;\n min-height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0.3125rem 2rem 0.3125rem 0.375rem;\n}\n\n.rk-combo-chip {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n border-radius: 9999px;\n background: var(--color-muted);\n padding: 0.125rem 0.25rem 0.125rem 0.5rem;\n font-size: 0.8125rem;\n color: var(--color-ink);\n}\n\n.rk-combo-chip-x {\n display: grid;\n width: 1.125rem;\n height: 1.125rem;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink-soft);\n line-height: 1;\n}\n\n.rk-combo-chip-x:hover {\n color: var(--color-ink);\n}\n\n/* 16px, like every other text control here: iOS zooms the viewport when it\n focuses a field under 16px and never zooms back. */\n.rk-combo-input {\n width: 100%;\n height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0 2rem 0 0.75rem;\n font-size: 1rem;\n color: var(--color-ink);\n}\n\n.is-multiple .rk-combo-input {\n width: auto;\n height: 1.75rem;\n min-width: 6rem;\n flex: 1;\n border: 0;\n border-radius: 0;\n padding: 0;\n background: transparent;\n box-shadow: none;\n}\n\n.rk-combo-input:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -1px;\n}\n\n.is-multiple .rk-combo-input:focus-visible {\n outline: none;\n}\n\n/* The ring belongs to the whole box once the box is the control. */\n.rk-combo-field.is-multiple:focus-within {\n outline: 2px solid var(--color-primary);\n outline-offset: -1px;\n}\n\n.rk-combo-input:disabled {\n opacity: 0.5;\n}\n\n.rk-combo-toggle {\n position: absolute;\n inset-inline-end: 0.5rem;\n color: var(--color-ink-soft);\n font-size: 0.75rem;\n}\n\n.rk-combo-list {\n position: absolute;\n z-index: 50;\n transform: translateX(var(--rk-combo-shift, 0px));\n max-height: 14rem;\n width: 100%;\n overflow-y: auto;\n border-radius: var(--radius-card);\n padding: 0.25rem;\n}\n\n.rk-combo-list.is-bottom {\n top: calc(100% - 1.25rem);\n}\n\n.rk-combo-list.is-top {\n bottom: calc(100% - 1.25rem);\n}\n\n.rk-combo-option {\n cursor: pointer;\n border-radius: var(--radius-cell);\n padding: 0.5rem 0.625rem;\n font-size: 0.875rem;\n color: var(--color-ink);\n}\n\n/* A virtual row's height is the arithmetic the spacers are built on, so it\n cannot be left to the text inside it. */\n.rk-combo-option[style] {\n display: flex;\n align-items: center;\n padding-block: 0;\n}\n\n.rk-combo-option.is-highlighted {\n background: var(--color-muted);\n}\n\n.rk-combo-option.is-selected {\n font-weight: 600;\n}\n\n.rk-combo-empty,\n.rk-combo-status {\n padding: 0.75rem 0.625rem;\n font-size: 0.875rem;\n color: var(--color-ink-soft);\n}\n\n.rk-combo-status {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-combo-status-rows {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-combo-error {\n font-size: 0.75rem;\n color: var(--color-negative);\n}\n\n.rk-combo-hint {\n font-size: 0.75rem;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\" generic=\"V extends string, M extends 'single' | 'multiple' = 'single'\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport { useBoundValue } from '../composables/use-bound-value'\nimport { useAnchoredPanel } from '../composables/use-anchored-panel'\nimport { useVirtualWindow } from '../composables/use-virtual-window'\nimport BaseSkeleton from './BaseSkeleton.vue'\n\nexport interface ComboboxOption<V extends string> {\n value: V\n /** Already translated. */\n label: string\n}\n\n/**\n * A field you type into to narrow a list, then choose from it.\n *\n * ## When to reach for this instead of `BaseSelect`\n *\n * A native select is better up to a few dozen options: it uses the platform's\n * own picker, which on a phone is a wheel the reader already knows and which no\n * web control can match. This is for when the list is long enough that reading\n * it is the problem — a country, a currency, a course — and typing three\n * letters beats scrolling.\n *\n * ## What the pattern requires\n *\n * The ARIA combobox is prescribed down to which element owns which attribute,\n * and hand-written ones get the same three things wrong:\n *\n * - **`aria-activedescendant`, not focus.** Focus stays in the text field while\n * the arrows move a highlight through the list. Moving real focus into the\n * list means typing stops working, which is the entire point of the control.\n * - **`aria-expanded` on the input**, not the wrapper. A screen reader looks for\n * it on the element with `role=\"combobox\"`.\n * - **Escape closes before it clears.** One press shuts the list, a second\n * empties the field. Clearing on the first press throws away what was typed\n * when somebody only wanted the list out of the way.\n *\n * The highlighted option is scrolled into view, because a highlight below the\n * fold is a selection nobody can see.\n *\n * ## A list that comes from a server\n *\n * `@search` is the typed text, debounced — the kit holds the timer so every\n * app does not write the same one, and it is cancelled on unmount so a\n * request is never fired at a component that has gone. Set `filter=\"none\"`\n * alongside it: when the server has already narrowed the list, narrowing it\n * again here hides rows that matched for a reason the client cannot see.\n *\n * `loading` marks the list `aria-busy` while the answer is on its way, which\n * is the part that is heard. `loadingLabel` is the part that is read, and it\n * is optional for the same reason every other visible string here is a prop:\n * the kit has no language of its own.\n *\n * ## More than one answer\n *\n * `mode=\"multiple\"` keeps the chosen ones as chips in the field, and choosing\n * an option again takes it back off. Backspace on an empty field removes the\n * last one. The chips carry a remove button only when `removeLabel` is given,\n * because a button whose name the kit had to invent would be a button that\n * speaks a language the app does not.\n *\n * ## A list too long to render\n *\n * Past `virtualizeAfter` options only the rows near the viewport are in the\n * DOM, with a spacer above and below standing in for the rest. Every row\n * still states `aria-setsize` and `aria-posinset`, so what a screen reader\n * hears is the whole list — \"3 of 4000\" — rather than the window.\n */\nconst {\n modelValue = undefined,\n label,\n options,\n placeholder = '',\n hint = '',\n error = '',\n disabled = false,\n emptyLabel,\n mode = 'single' as M,\n removeLabel = undefined,\n loading = false,\n loadingLabel = '',\n filter = 'local',\n debounce = 200,\n virtualizeAfter = 150,\n rowHeight = 36,\n} = defineProps<{\n /** The chosen value, or values in `multiple` mode, with `v-model`. */\n modelValue?: Value | undefined\n label: string\n options: readonly ComboboxOption<V>[]\n placeholder?: string | undefined\n hint?: string | undefined\n error?: string | undefined\n disabled?: boolean | undefined\n /** Shown when nothing matches. Already translated. */\n emptyLabel: string\n /** `multiple` keeps the chosen ones as chips in the field. */\n mode?: M | undefined\n /** Names a chip's remove button. Without it, chips carry no button. */\n removeLabel?: ((label: string) => string) | undefined\n /** Marks the list busy while an answer is on its way. */\n loading?: boolean | undefined\n /** Read while `loading`. Already translated. */\n loadingLabel?: string | undefined\n /** `none` when the server has already narrowed the list. */\n filter?: 'local' | 'none' | undefined\n /** How long typing settles before `search`, in milliseconds. */\n debounce?: number | undefined\n /** Past this many options, only the rows near the viewport are rendered. */\n virtualizeAfter?: number | undefined\n /** A row's height in pixels; the virtual window is measured in these. */\n rowHeight?: number | undefined\n}>()\n\n/** Multiple always hands back an array; a single choice is the value or ''. */\ntype Value = M extends 'multiple' ? V[] : V | ''\n\n/* Declared by hand rather than with defineModel, which cannot both accept\n `undefined` and promise never to emit it -- and an app whose model is\n `ref('')` is exactly the one that breaks. See `use-bound-value.ts`. */\nconst emit = defineEmits<{\n 'update:modelValue': [value: Value]\n /** The typed text, once it has settled. For a list that lives on a server. */\n search: [query: string]\n}>()\n\nconst model = useBoundValue<Value>(\n () => modelValue as Value | undefined,\n (value) => emit('update:modelValue', value),\n)\n\nconst multiple = computed(() => mode === 'multiple')\n\n/** The chosen values, however many there are, as a plain array. */\nconst chosen = computed<V[]>(() => {\n const value = model.value as V | V[] | '' | undefined\n if (Array.isArray(value)) return value\n return value === undefined || value === '' ? [] : [value]\n})\n\nconst chosenOptions = computed(() =>\n chosen.value.map(\n (value) => options.find((option) => option.value === value) ?? { value, label: value },\n ),\n)\n\nconst id = useId()\nconst listId = `${id}-list`\nconst hintId = `${id}-hint`\nconst errorId = `${id}-error`\nconst optionId = (index: number) => `${id}-opt-${index}`\n\nconst open = ref(false)\nconst query = ref('')\nconst highlighted = ref(0)\nconst root = ref<HTMLElement | null>(null)\nconst list = ref<HTMLElement | null>(null)\n\n/* A field near the bottom of a form is where a combobox usually is — the\n last question before the button — so the list opens above it when that\n is where the room is. */\nconst { placed, shift } = useAnchoredPanel({ root, panel: list, open })\n\nconst single = computed(() => (multiple.value ? undefined : chosenOptions.value[0]))\n\n/**\n * What the input shows.\n *\n * In multiple mode it is always the query: the answers are the chips beside\n * it, and writing one of them into the field would mean deleting it to search\n * for the next.\n */\nconst text = computed({\n get: () => (multiple.value || open.value ? query.value : (single.value?.label ?? '')),\n set: (value: string) => {\n query.value = value\n open.value = true\n highlighted.value = 0\n announce(value)\n },\n})\n\nconst matches = computed(() => {\n const needle = query.value.trim().toLowerCase()\n // `none` is for a list the server has already narrowed: filtering again\n // here would hide rows that matched for a reason this side cannot see.\n if (filter === 'none' || !open.value || needle === '') return options\n\n return options.filter((option) => option.label.toLowerCase().includes(needle))\n})\n\nconst describedBy = computed(() => {\n if (error) return errorId\n if (hint) return hintId\n return undefined\n})\n\n/* ─── A list that comes from a server ─── */\n\nlet timer: ReturnType<typeof setTimeout> | undefined\n\nfunction announce(value: string) {\n if (timer) clearTimeout(timer)\n timer = setTimeout(() => emit('search', value.trim()), debounce)\n}\n\n/* ─── Virtualisation ─── */\n\n/* The windowing arithmetic lives in `useVirtualWindow`, which `VirtualList`\n shares: one copy, so the padding that keeps the scrollbar honest about\n the length of the list cannot drift between them. */\nconst {\n active: virtual,\n window: window_,\n padTop,\n padBottom,\n viewportHeight: viewport,\n onScroll,\n} = useVirtualWindow({\n count: computed(() => matches.value.length),\n rowHeight: computed(() => rowHeight),\n threshold: computed(() => virtualizeAfter),\n})\n\n/** How tall the list box is; read once it is open, and this until then. */\nviewport.value = 224\n\nconst rows = computed(() =>\n matches.value.slice(window_.value.start, window_.value.end).map((option, index) => ({\n option,\n /** The row's place in the whole list, not in the window. */\n index: window_.value.start + index,\n })),\n)\n\n/* ─── Choosing ─── */\n\nfunction choose(option: ComboboxOption<V> | undefined) {\n if (!option) return\n\n if (multiple.value) {\n const next = chosen.value.includes(option.value)\n ? chosen.value.filter((one) => one !== option.value)\n : [...chosen.value, option.value]\n\n model.value = next as Value\n // The field stays open: choosing several means choosing again.\n query.value = ''\n return\n }\n\n model.value = option.value as Value\n query.value = ''\n open.value = false\n}\n\nfunction remove(value: V) {\n if (!multiple.value) return\n model.value = chosen.value.filter((one) => one !== value) as Value\n}\n\nfunction move(delta: number) {\n const count = matches.value.length\n if (count === 0) return\n\n open.value = true\n highlighted.value = (highlighted.value + delta + count) % count\n void scrollHighlightIntoView()\n}\n\nasync function scrollHighlightIntoView() {\n await nextTick()\n\n // A virtual row may not be in the DOM at all, so the scroller is moved by\n // arithmetic rather than by asking an element that is not there.\n if (virtual.value && list.value) {\n const top = highlighted.value * rowHeight\n const bottom = top + rowHeight\n if (top < list.value.scrollTop) list.value.scrollTop = top\n else if (bottom > list.value.scrollTop + viewport.value) {\n list.value.scrollTop = bottom - viewport.value\n }\n return\n }\n\n // By position rather than by selector: `CSS.escape` does not exist in jsdom\n // or on a server, and the rows are the only children here -- the spacers\n // are rendered only in the virtual case, which returned above.\n const el = list.value?.children[highlighted.value] as HTMLElement | undefined\n // A highlight below the fold is a selection nobody can see. Feature-detected\n // rather than called: `scrollIntoView` is missing in jsdom and in more than\n // one embedded webview, and a keyboard that throws is worse than a list that\n // does not scroll.\n el?.scrollIntoView?.({ block: 'nearest' })\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault()\n move(1)\n break\n case 'ArrowUp':\n event.preventDefault()\n move(-1)\n break\n case 'Enter':\n if (!open.value) return\n event.preventDefault()\n choose(matches.value[highlighted.value])\n break\n case 'Backspace':\n // Only with nothing to delete in the field, or it would eat a letter\n // and a chip with the same press.\n if (multiple.value && query.value === '' && chosen.value.length > 0) {\n event.preventDefault()\n remove(chosen.value[chosen.value.length - 1]!)\n }\n break\n case 'Escape':\n // Close first, clear second. One press to get the list out of the way\n // without losing what was typed.\n event.preventDefault()\n if (open.value) {\n open.value = false\n query.value = ''\n } else if (!multiple.value) {\n model.value = '' as Value\n }\n break\n case 'Tab':\n open.value = false\n break\n }\n}\n\nfunction onDocumentPointer(event: Event) {\n if (root.value && !root.value.contains(event.target as Node)) {\n open.value = false\n query.value = ''\n }\n}\n\nwatch(\n open,\n async (isOpen) => {\n if (typeof document === 'undefined') return\n\n if (isOpen) {\n document.addEventListener('pointerdown', onDocumentPointer)\n await nextTick()\n // Measured, not assumed: the height is a CSS value an app may change.\n if (list.value) viewport.value = list.value.clientHeight || viewport.value\n } else document.removeEventListener('pointerdown', onDocumentPointer)\n },\n { immediate: true },\n)\n\n/* A shorter list can leave the highlight past its end. */\nwatch(matches, () => {\n if (highlighted.value >= matches.value.length) highlighted.value = 0\n})\n\nonBeforeUnmount(() => {\n if (timer) clearTimeout(timer)\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointerdown', onDocumentPointer)\n }\n})\n</script>\n\n<template>\n <div ref=\"root\" class=\"rk-combo\">\n <label :for=\"id\" class=\"rk-combo-label\">{{ label }}</label>\n\n <!-- With chips the whole box is the control, so it is the box that\n carries the `control` surface and the focus ring; the input inside\n it is plain text. Leaving `control` on the input drew a second\n field inside the first. -->\n <div class=\"rk-combo-field\" :class=\"multiple ? 'is-multiple control' : ''\">\n <span\n v-for=\"option in multiple ? chosenOptions : []\"\n :key=\"option.value\"\n class=\"rk-combo-chip\"\n >\n <span>{{ option.label }}</span>\n <button\n v-if=\"removeLabel\"\n type=\"button\"\n class=\"rk-combo-chip-x focus-ring\"\n :aria-label=\"removeLabel(option.label)\"\n :disabled=\"disabled\"\n @click=\"remove(option.value)\"\n >\n ×\n </button>\n </span>\n\n <input\n :id=\"id\"\n v-model=\"text\"\n type=\"text\"\n role=\"combobox\"\n class=\"rk-combo-input\"\n :class=\"{ control: !multiple }\"\n autocomplete=\"off\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-expanded=\"open\"\n :aria-controls=\"listId\"\n aria-autocomplete=\"list\"\n :aria-activedescendant=\"open ? optionId(highlighted) : undefined\"\n :aria-invalid=\"Boolean(error)\"\n :aria-describedby=\"describedBy\"\n @keydown=\"onKeydown\"\n @focus=\"open = true\"\n />\n\n <button\n type=\"button\"\n class=\"rk-combo-toggle\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :disabled=\"disabled\"\n @click=\"open = !open\"\n >\n ▾\n </button>\n </div>\n\n <ul\n v-show=\"open\"\n :id=\"listId\"\n ref=\"list\"\n role=\"listbox\"\n class=\"rk-combo-list surface-overlay\"\n :class=\"`is-${placed}`\"\n :style=\"shift ? { '--rk-combo-shift': `${shift}px` } : undefined\"\n :aria-label=\"label\"\n :aria-multiselectable=\"multiple ? true : undefined\"\n :aria-busy=\"loading ? true : undefined\"\n @scroll=\"onScroll\"\n >\n <li v-if=\"padTop > 0\" :style=\"{ height: `${padTop}px` }\" aria-hidden=\"true\" />\n\n <li\n v-for=\"row in rows\"\n :id=\"optionId(row.index)\"\n :key=\"row.option.value\"\n role=\"option\"\n class=\"rk-combo-option\"\n :class=\"{\n 'is-highlighted': row.index === highlighted,\n 'is-selected': chosen.includes(row.option.value),\n }\"\n :style=\"virtual ? { height: `${rowHeight}px` } : undefined\"\n :aria-selected=\"chosen.includes(row.option.value)\"\n :aria-setsize=\"matches.length\"\n :aria-posinset=\"row.index + 1\"\n @pointerdown.prevent=\"choose(row.option)\"\n @pointermove=\"highlighted = row.index\"\n >\n {{ row.option.label }}\n </li>\n\n <li v-if=\"padBottom > 0\" :style=\"{ height: `${padBottom}px` }\" aria-hidden=\"true\" />\n\n <!-- Rows in the shape of the rows that are coming, rather than a\n spinner: the list keeps its height, so the page under it does not\n jump when the answer lands. The list says `aria-busy`, which is\n what is heard; `loadingLabel` is what is read, when given. -->\n <li v-if=\"loading\" class=\"rk-combo-status\">\n <span v-if=\"loadingLabel\">{{ loadingLabel }}</span>\n <span class=\"rk-combo-status-rows\" aria-hidden=\"true\">\n <BaseSkeleton v-for=\"n in 3\" :key=\"n\" shape=\"text\" height=\"0.75rem\" />\n </span>\n </li>\n\n <li v-else-if=\"matches.length === 0\" class=\"rk-combo-empty\">{{ emptyLabel }}</li>\n </ul>\n\n <p v-if=\"error\" :id=\"errorId\" class=\"rk-combo-error\">{{ error }}</p>\n <p v-else-if=\"hint\" :id=\"hintId\" class=\"rk-combo-hint\">{{ hint }}</p>\n </div>\n</template>\n\n<style scoped>\n.rk-combo {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n}\n\n.rk-combo-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-combo-field {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n/* With chips the field is a box that wraps, and the input is one item in it\n that grows into whatever is left. */\n.rk-combo-field.is-multiple {\n flex-wrap: wrap;\n gap: 0.25rem;\n min-height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0.3125rem 2rem 0.3125rem 0.375rem;\n}\n\n.rk-combo-chip {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n border-radius: 9999px;\n background: var(--color-muted);\n padding: 0.125rem 0.25rem 0.125rem 0.5rem;\n font-size: 0.8125rem;\n color: var(--color-ink);\n}\n\n.rk-combo-chip-x {\n display: grid;\n width: 1.125rem;\n height: 1.125rem;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink-soft);\n line-height: 1;\n}\n\n.rk-combo-chip-x:hover {\n color: var(--color-ink);\n}\n\n/* 16px, like every other text control here: iOS zooms the viewport when it\n focuses a field under 16px and never zooms back. */\n.rk-combo-input {\n width: 100%;\n height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0 2rem 0 0.75rem;\n font-size: 1rem;\n color: var(--color-ink);\n}\n\n.is-multiple .rk-combo-input {\n width: auto;\n height: 1.75rem;\n min-width: 6rem;\n flex: 1;\n border: 0;\n border-radius: 0;\n padding: 0;\n background: transparent;\n box-shadow: none;\n}\n\n.rk-combo-input:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -1px;\n}\n\n.is-multiple .rk-combo-input:focus-visible {\n outline: none;\n}\n\n/* The ring belongs to the whole box once the box is the control. */\n.rk-combo-field.is-multiple:focus-within {\n outline: 2px solid var(--color-primary);\n outline-offset: -1px;\n}\n\n.rk-combo-input:disabled {\n opacity: 0.5;\n}\n\n.rk-combo-toggle {\n position: absolute;\n inset-inline-end: 0.5rem;\n color: var(--color-ink-soft);\n font-size: 0.75rem;\n}\n\n.rk-combo-list {\n position: absolute;\n z-index: 50;\n transform: translateX(var(--rk-combo-shift, 0px));\n max-height: 14rem;\n width: 100%;\n overflow-y: auto;\n border-radius: var(--radius-card);\n padding: 0.25rem;\n}\n\n.rk-combo-list.is-bottom {\n top: calc(100% - 1.25rem);\n}\n\n.rk-combo-list.is-top {\n bottom: calc(100% - 1.25rem);\n}\n\n.rk-combo-option {\n cursor: pointer;\n border-radius: var(--radius-cell);\n padding: 0.5rem 0.625rem;\n font-size: 0.875rem;\n color: var(--color-ink);\n}\n\n/* A virtual row's height is the arithmetic the spacers are built on, so it\n cannot be left to the text inside it. */\n.rk-combo-option[style] {\n display: flex;\n align-items: center;\n padding-block: 0;\n}\n\n.rk-combo-option.is-highlighted {\n background: var(--color-muted);\n}\n\n.rk-combo-option.is-selected {\n font-weight: 600;\n}\n\n.rk-combo-empty,\n.rk-combo-status {\n padding: 0.75rem 0.625rem;\n font-size: 0.875rem;\n color: var(--color-ink-soft);\n}\n\n.rk-combo-status {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-combo-status-rows {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-combo-error {\n font-size: 0.75rem;\n color: var(--color-negative);\n}\n\n.rk-combo-hint {\n font-size: 0.75rem;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\nimport { useBoundValue } from '../composables/use-bound-value'\n\n/**\n * A set of radios, and the reason there is no `BaseRadio`.\n *\n * One radio on its own is not a control — it is half of a choice that cannot\n * be unmade, and every real use is a group. So the group is the component.\n *\n * `fieldset` and `legend` rather than a label: a label points at one element,\n * and the thing being named here is the question, not any single answer. Left\n * as a plain label, a screen reader reads the options with no idea what they\n * are options for.\n */\nconst {\n modelValue = undefined,\n legend,\n options,\n error = '',\n hint = '',\n legendHidden = false,\n} = defineProps<{\n /** The chosen option's value, with `v-model`. */\n modelValue?: string | undefined\n legend: string\n options: readonly { value: string; label: string; disabled?: boolean | undefined }[]\n error?: string | undefined\n hint?: string | undefined\n legendHidden?: boolean | undefined\n}>()\n\n/* Declared by hand rather than with defineModel: it accepts `undefined` and\n emits only strings, which defineModel cannot type both ways. See\n `use-bound-value.ts`. */\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\nconst model = useBoundValue(\n () => modelValue,\n (value) => emit('update:modelValue', value),\n)\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n if (error) return errorId\n if (hint) return hintId\n return undefined\n})\n</script>\n\n<template>\n <fieldset class=\"flex flex-col gap-1.5\" :aria-describedby=\"describedBy\">\n <legend class=\"text-ink mb-1.5 text-sm font-medium\" :class=\"legendHidden ? 'sr-only' : ''\">\n {{ legend }}\n </legend>\n\n <label\n v-for=\"option in options\"\n :key=\"option.value\"\n class=\"flex items-center gap-3\"\n :class=\"option.disabled ? 'opacity-50' : 'cursor-pointer'\"\n >\n <input\n v-model=\"model\"\n type=\"radio\"\n :name=\"id\"\n :value=\"option.value\"\n :disabled=\"option.disabled\"\n class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n />\n <span class=\"text-ink text-sm\">{{ option.label }}</span>\n </label>\n\n <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n </fieldset>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\nimport { useBoundValue } from '../composables/use-bound-value'\n\n/**\n * A set of radios, and the reason there is no `BaseRadio`.\n *\n * One radio on its own is not a control — it is half of a choice that cannot\n * be unmade, and every real use is a group. So the group is the component.\n *\n * `fieldset` and `legend` rather than a label: a label points at one element,\n * and the thing being named here is the question, not any single answer. Left\n * as a plain label, a screen reader reads the options with no idea what they\n * are options for.\n */\nconst {\n modelValue = undefined,\n legend,\n options,\n error = '',\n hint = '',\n legendHidden = false,\n} = defineProps<{\n /** The chosen option's value, with `v-model`. */\n modelValue?: string | undefined\n legend: string\n options: readonly { value: string; label: string; disabled?: boolean | undefined }[]\n error?: string | undefined\n hint?: string | undefined\n legendHidden?: boolean | undefined\n}>()\n\n/* Declared by hand rather than with defineModel: it accepts `undefined` and\n emits only strings, which defineModel cannot type both ways. See\n `use-bound-value.ts`. */\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\nconst model = useBoundValue(\n () => modelValue,\n (value) => emit('update:modelValue', value),\n)\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n if (error) return errorId\n if (hint) return hintId\n return undefined\n})\n</script>\n\n<template>\n <fieldset class=\"flex flex-col gap-1.5\" :aria-describedby=\"describedBy\">\n <legend class=\"text-ink mb-1.5 text-sm font-medium\" :class=\"legendHidden ? 'sr-only' : ''\">\n {{ legend }}\n </legend>\n\n <label\n v-for=\"option in options\"\n :key=\"option.value\"\n class=\"flex items-center gap-3\"\n :class=\"option.disabled ? 'opacity-50' : 'cursor-pointer'\"\n >\n <input\n v-model=\"model\"\n type=\"radio\"\n :name=\"id\"\n :value=\"option.value\"\n :disabled=\"option.disabled\"\n class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n />\n <span class=\"text-ink text-sm\">{{ option.label }}</span>\n </label>\n\n <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n </fieldset>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { ref } from 'vue'\nimport { ChevronDown } from 'lucide-vue-next'\n\nimport FormField from './FormField.vue'\n\n/**\n * A native `<select>`, wearing the kit's field.\n *\n * Native on purpose. A custom listbox has to reimplement typeahead, the\n * keyboard, and the way a phone lifts the options into its own picker — and it\n * gets one of them wrong. What is worth replacing is the chrome, so the arrow\n * is drawn and the browser's own is removed.\n *\n * Options are passed rather than slotted so the label can be a translated\n * string the kit never sees.\n *\n * Generic over the value, because a select whose value must be a string makes\n * every consumer with numbered options write conversion glue on both sides of\n * it — and a component you have to wrap to use is one you write yourself\n * instead. A day of the month is a number.\n */\nconst {\n label,\n options,\n error = '',\n hint = '',\n labelHidden = false,\n placeholder = '',\n size = 'md',\n variant = 'default',\n fieldId = undefined,\n controlClass = undefined,\n} = defineProps<{\n label: string\n options: readonly { value: T; label: string; disabled?: boolean | undefined }[]\n error?: string | undefined\n hint?: string | undefined\n labelHidden?: boolean | undefined\n /**\n * An unselectable first row, for a field with no sensible default.\n *\n * Disabled rather than merely empty: an empty option that can be chosen lets\n * someone go back to having answered nothing, which no form wants.\n */\n placeholder?: string | undefined\n /**\n * `sm` for a select that filters or sorts rather than answers a form.\n *\n * Every hand-written select across the three consuming apps was this one.\n */\n size?: 'sm' | 'md' | undefined\n /**\n * `unstyled` keeps the wiring and drops the surface.\n *\n * The label, the generated id, `aria-describedby` and the error are what a\n * field is; the border and the height are what it looks like. A search box\n * inside a bordered row, a url field in an editor popover — those places\n * were hand-writing the whole thing to avoid the appearance, and losing the\n * wiring with it.\n *\n * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n * primitive is finished when the app can take its behaviour without its\n * paint.\n */\n variant?: 'default' | 'unstyled' | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n /**\n * Classes for the control itself, rather than for the field around it.\n *\n * `class` lands on the field, because that is where Vue puts a\n * component's class and because a layout class means \"space this field\".\n * That leaves `variant=\"unstyled\"` with no way to paint the control it\n * just stripped — the point of stripping it — which is why an app with a\n * large amount field wrote the whole thing by hand instead.\n *\n * It appends, so with the default variant a conflict is settled by\n * Tailwind's own order rather than by writing it here; reach for it with\n * `unstyled`, where there is nothing to settle.\n */\n controlClass?: string | undefined\n}>()\n\n/* The scale is typographic, not dimensional. Both sizes keep the 44px touch\n target — of the five hand-written controls this replaces, none was shorter\n than 40px and two were exactly 44, and a select that filters a list is\n pressed with the same thumb as one that answers a form. What changes is the\n type, and with it how loudly the field asks to be read. */\nconst SIZE_CLASS = {\n sm: 'h-11 text-sm',\n md: 'h-11 text-base',\n} as const\n\nconst model = defineModel<T | undefined>()\nconst control = ref<HTMLSelectElement | null>(null)\n\n/**\n * Focus the control, for a caller that owns when it happens.\n *\n * A `ref` on a component gives the component and not the element, so without\n * this a field cannot be focused at all — which is why an app that focuses\n * its amount field when a sheet opens, and again when the amount is\n * rejected, wrote the whole field by hand instead and said so in a comment.\n * That is the gap test, with the reason already written down.\n *\n * `ErrorSummary` has exposed `focus` since it existed, for the same need\n * from the other end.\n */\nfunction focus() {\n control.value?.focus()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :label-hidden=\"labelHidden\"\n :size=\"size\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"relative\">\n <select\n :id=\"id\"\n ref=\"control\"\n v-model=\"model\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n class=\"w-full appearance-none\"\n :class=\"[\n variant === 'unstyled'\n ? ''\n : 'control text-ink rounded-card focus-visible:outline-primary py-0 pr-10 pl-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n variant === 'unstyled' ? '' : SIZE_CLASS[size],\n variant !== 'unstyled' && invalid ? 'border-negative' : '',\n controlClass,\n ]\"\n >\n <option v-if=\"placeholder\" :value=\"undefined\" disabled>{{ placeholder }}</option>\n <option\n v-for=\"option in options\"\n :key=\"option.value\"\n :value=\"option.value\"\n :disabled=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <ChevronDown\n class=\"text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2\"\n aria-hidden=\"true\"\n />\n </div>\n </template>\n </FormField>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { ref } from 'vue'\nimport { ChevronDown } from 'lucide-vue-next'\n\nimport FormField from './FormField.vue'\n\n/**\n * A native `<select>`, wearing the kit's field.\n *\n * Native on purpose. A custom listbox has to reimplement typeahead, the\n * keyboard, and the way a phone lifts the options into its own picker — and it\n * gets one of them wrong. What is worth replacing is the chrome, so the arrow\n * is drawn and the browser's own is removed.\n *\n * Options are passed rather than slotted so the label can be a translated\n * string the kit never sees.\n *\n * Generic over the value, because a select whose value must be a string makes\n * every consumer with numbered options write conversion glue on both sides of\n * it — and a component you have to wrap to use is one you write yourself\n * instead. A day of the month is a number.\n */\nconst {\n label,\n options,\n error = '',\n hint = '',\n labelHidden = false,\n placeholder = '',\n size = 'md',\n variant = 'default',\n fieldId = undefined,\n controlClass = undefined,\n} = defineProps<{\n label: string\n options: readonly { value: T; label: string; disabled?: boolean | undefined }[]\n error?: string | undefined\n hint?: string | undefined\n labelHidden?: boolean | undefined\n /**\n * An unselectable first row, for a field with no sensible default.\n *\n * Disabled rather than merely empty: an empty option that can be chosen lets\n * someone go back to having answered nothing, which no form wants.\n */\n placeholder?: string | undefined\n /**\n * `sm` for a select that filters or sorts rather than answers a form.\n *\n * Every hand-written select across the three consuming apps was this one.\n */\n size?: 'sm' | 'md' | undefined\n /**\n * `unstyled` keeps the wiring and drops the surface.\n *\n * The label, the generated id, `aria-describedby` and the error are what a\n * field is; the border and the height are what it looks like. A search box\n * inside a bordered row, a url field in an editor popover — those places\n * were hand-writing the whole thing to avoid the appearance, and losing the\n * wiring with it.\n *\n * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n * primitive is finished when the app can take its behaviour without its\n * paint.\n */\n variant?: 'default' | 'unstyled' | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n /**\n * Classes for the control itself, rather than for the field around it.\n *\n * `class` lands on the field, because that is where Vue puts a\n * component's class and because a layout class means \"space this field\".\n * That leaves `variant=\"unstyled\"` with no way to paint the control it\n * just stripped — the point of stripping it — which is why an app with a\n * large amount field wrote the whole thing by hand instead.\n *\n * It appends, so with the default variant a conflict is settled by\n * Tailwind's own order rather than by writing it here; reach for it with\n * `unstyled`, where there is nothing to settle.\n */\n controlClass?: string | undefined\n}>()\n\n/* The scale is typographic, not dimensional. Both sizes keep the 44px touch\n target — of the five hand-written controls this replaces, none was shorter\n than 40px and two were exactly 44, and a select that filters a list is\n pressed with the same thumb as one that answers a form. What changes is the\n type, and with it how loudly the field asks to be read. */\nconst SIZE_CLASS = {\n sm: 'h-11 text-sm',\n md: 'h-11 text-base',\n} as const\n\nconst model = defineModel<T | undefined>()\nconst control = ref<HTMLSelectElement | null>(null)\n\n/**\n * Focus the control, for a caller that owns when it happens.\n *\n * A `ref` on a component gives the component and not the element, so without\n * this a field cannot be focused at all — which is why an app that focuses\n * its amount field when a sheet opens, and again when the amount is\n * rejected, wrote the whole field by hand instead and said so in a comment.\n * That is the gap test, with the reason already written down.\n *\n * `ErrorSummary` has exposed `focus` since it existed, for the same need\n * from the other end.\n */\nfunction focus() {\n control.value?.focus()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :label-hidden=\"labelHidden\"\n :size=\"size\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"relative\">\n <select\n :id=\"id\"\n ref=\"control\"\n v-model=\"model\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n class=\"w-full appearance-none\"\n :class=\"[\n variant === 'unstyled'\n ? ''\n : 'control text-ink rounded-card focus-visible:outline-primary py-0 pr-10 pl-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n variant === 'unstyled' ? '' : SIZE_CLASS[size],\n variant !== 'unstyled' && invalid ? 'border-negative' : '',\n controlClass,\n ]\"\n >\n <option v-if=\"placeholder\" :value=\"undefined\" disabled>{{ placeholder }}</option>\n <option\n v-for=\"option in options\"\n :key=\"option.value\"\n :value=\"option.value\"\n :disabled=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <ChevronDown\n class=\"text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2\"\n aria-hidden=\"true\"\n />\n </div>\n </template>\n </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A value picked from a range, where roughly right is the point.\n *\n * A native `input[type=\"range\"]`, painted. That is deliberate: the native\n * control already has the keyboard (arrows, Page Up/Down, Home/End), the\n * pointer, the touch target and the correct announcements, and every\n * hand-rolled slider gives some of that up. What it does not have is a look\n * that matches the rest of the kit, so the look is all that is replaced.\n *\n * `aria-valuetext` is the part worth stopping on. Without it a screen reader\n * reads the number alone — \"45\" — and a number with no unit is not an answer to\n * anything. Pass `format` and it reads \"45 minutes\".\n */\nconst {\n label,\n min = 0,\n max = 100,\n step = 1,\n hint = '',\n disabled = false,\n format,\n showValue = true,\n} = defineProps<{\n label: string\n min?: number | undefined\n max?: number | undefined\n step?: number | undefined\n hint?: string | undefined\n disabled?: boolean | undefined\n /**\n * Turns the number into something a person would say — \"45 minutes\", \"₺12\".\n *\n * Used for the visible readout and for `aria-valuetext`, so both say the same\n * thing and neither is a bare number.\n */\n format?: ((value: number) => string) | undefined\n showValue?: boolean | undefined\n}>()\n\nconst model = defineModel<number>({ default: 0 })\n\nconst id = useId()\nconst hintId = `${id}-hint`\n\nconst text = computed(() => (format ? format(model.value) : String(model.value)))\n/** Where the fill stops, as a percentage of the track. */\nconst filled = computed(() => {\n const span = max - min\n return span <= 0 ? 0 : ((model.value - min) / span) * 100\n})\n</script>\n\n<template>\n <div class=\"rk-slider\">\n <div class=\"rk-slider-head\">\n <label :for=\"id\" class=\"rk-slider-label\">{{ label }}</label>\n <output v-if=\"showValue\" :for=\"id\" class=\"rk-slider-value\">{{ text }}</output>\n </div>\n\n <input\n :id=\"id\"\n v-model.number=\"model\"\n type=\"range\"\n class=\"rk-slider-input\"\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :disabled=\"disabled\"\n :aria-valuetext=\"text\"\n :aria-describedby=\"hint ? hintId : undefined\"\n :style=\"{ '--rk-slider-filled': `${filled}%` }\"\n />\n\n <p v-if=\"hint\" :id=\"hintId\" class=\"rk-slider-hint\">{{ hint }}</p>\n </div>\n</template>\n\n<style scoped>\n.rk-slider {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-slider-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 1rem;\n}\n\n.rk-slider-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-slider-value {\n font-size: 0.875rem;\n color: var(--color-ink-soft);\n font-variant-numeric: tabular-nums;\n}\n\n.rk-slider-input {\n width: 100%;\n height: 1.25rem;\n appearance: none;\n background: transparent;\n cursor: pointer;\n}\n\n.rk-slider-input:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n/* The two engines will not accept these in one rule: an unknown pseudo-element\n invalidates the whole selector, so WebKit and Firefox are written twice. */\n.rk-slider-input::-webkit-slider-runnable-track {\n height: 0.375rem;\n border-radius: 9999px;\n background: linear-gradient(\n to right,\n var(--color-primary) var(--rk-slider-filled, 0%),\n var(--color-hair) var(--rk-slider-filled, 0%)\n );\n}\n\n/* A gradient has no logical direction, so the one hand-painted track in the\n kit is written twice. Firefox needs no counterpart: `::-moz-range-progress`\n is positioned by the engine, which already knows which way the input runs.\n Only WebKit's track is painted here, and it would have filled from the\n left while the thumb started on the right. */\n[dir='rtl'] .rk-slider-input::-webkit-slider-runnable-track {\n background: linear-gradient(\n to left,\n var(--color-primary) var(--rk-slider-filled, 0%),\n var(--color-hair) var(--rk-slider-filled, 0%)\n );\n}\n\n.rk-slider-input::-moz-range-track {\n height: 0.375rem;\n border-radius: 9999px;\n background: var(--color-hair);\n}\n\n.rk-slider-input::-moz-range-progress {\n height: 0.375rem;\n border-radius: 9999px;\n background: var(--color-primary);\n}\n\n.rk-slider-input::-webkit-slider-thumb {\n appearance: none;\n margin-top: -0.4375rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 9999px;\n background: var(--color-surface);\n border: 2px solid var(--color-primary);\n box-shadow: var(--shadow-control);\n}\n\n.rk-slider-input::-moz-range-thumb {\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid var(--color-primary);\n border-radius: 9999px;\n background: var(--color-surface);\n box-shadow: var(--shadow-control);\n}\n\n.rk-slider-input:focus-visible::-webkit-slider-thumb {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-slider-input:focus-visible::-moz-range-thumb {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-slider-hint {\n font-size: 0.75rem;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A value picked from a range, where roughly right is the point.\n *\n * A native `input[type=\"range\"]`, painted. That is deliberate: the native\n * control already has the keyboard (arrows, Page Up/Down, Home/End), the\n * pointer, the touch target and the correct announcements, and every\n * hand-rolled slider gives some of that up. What it does not have is a look\n * that matches the rest of the kit, so the look is all that is replaced.\n *\n * `aria-valuetext` is the part worth stopping on. Without it a screen reader\n * reads the number alone — \"45\" — and a number with no unit is not an answer to\n * anything. Pass `format` and it reads \"45 minutes\".\n */\nconst {\n label,\n min = 0,\n max = 100,\n step = 1,\n hint = '',\n disabled = false,\n format,\n showValue = true,\n} = defineProps<{\n label: string\n min?: number | undefined\n max?: number | undefined\n step?: number | undefined\n hint?: string | undefined\n disabled?: boolean | undefined\n /**\n * Turns the number into something a person would say — \"45 minutes\", \"₺12\".\n *\n * Used for the visible readout and for `aria-valuetext`, so both say the same\n * thing and neither is a bare number.\n */\n format?: ((value: number) => string) | undefined\n showValue?: boolean | undefined\n}>()\n\nconst model = defineModel<number>({ default: 0 })\n\nconst id = useId()\nconst hintId = `${id}-hint`\n\nconst text = computed(() => (format ? format(model.value) : String(model.value)))\n/** Where the fill stops, as a percentage of the track. */\nconst filled = computed(() => {\n const span = max - min\n return span <= 0 ? 0 : ((model.value - min) / span) * 100\n})\n</script>\n\n<template>\n <div class=\"rk-slider\">\n <div class=\"rk-slider-head\">\n <label :for=\"id\" class=\"rk-slider-label\">{{ label }}</label>\n <output v-if=\"showValue\" :for=\"id\" class=\"rk-slider-value\">{{ text }}</output>\n </div>\n\n <input\n :id=\"id\"\n v-model.number=\"model\"\n type=\"range\"\n class=\"rk-slider-input\"\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :disabled=\"disabled\"\n :aria-valuetext=\"text\"\n :aria-describedby=\"hint ? hintId : undefined\"\n :style=\"{ '--rk-slider-filled': `${filled}%` }\"\n />\n\n <p v-if=\"hint\" :id=\"hintId\" class=\"rk-slider-hint\">{{ hint }}</p>\n </div>\n</template>\n\n<style scoped>\n.rk-slider {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-slider-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 1rem;\n}\n\n.rk-slider-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-slider-value {\n font-size: 0.875rem;\n color: var(--color-ink-soft);\n font-variant-numeric: tabular-nums;\n}\n\n.rk-slider-input {\n width: 100%;\n height: 1.25rem;\n appearance: none;\n background: transparent;\n cursor: pointer;\n}\n\n.rk-slider-input:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n/* The two engines will not accept these in one rule: an unknown pseudo-element\n invalidates the whole selector, so WebKit and Firefox are written twice. */\n.rk-slider-input::-webkit-slider-runnable-track {\n height: 0.375rem;\n border-radius: 9999px;\n background: linear-gradient(\n to right,\n var(--color-primary) var(--rk-slider-filled, 0%),\n var(--color-hair) var(--rk-slider-filled, 0%)\n );\n}\n\n/* A gradient has no logical direction, so the one hand-painted track in the\n kit is written twice. Firefox needs no counterpart: `::-moz-range-progress`\n is positioned by the engine, which already knows which way the input runs.\n Only WebKit's track is painted here, and it would have filled from the\n left while the thumb started on the right. */\n[dir='rtl'] .rk-slider-input::-webkit-slider-runnable-track {\n background: linear-gradient(\n to left,\n var(--color-primary) var(--rk-slider-filled, 0%),\n var(--color-hair) var(--rk-slider-filled, 0%)\n );\n}\n\n.rk-slider-input::-moz-range-track {\n height: 0.375rem;\n border-radius: 9999px;\n background: var(--color-hair);\n}\n\n.rk-slider-input::-moz-range-progress {\n height: 0.375rem;\n border-radius: 9999px;\n background: var(--color-primary);\n}\n\n.rk-slider-input::-webkit-slider-thumb {\n appearance: none;\n margin-top: -0.4375rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 9999px;\n background: var(--color-surface);\n border: 2px solid var(--color-primary);\n box-shadow: var(--shadow-control);\n}\n\n.rk-slider-input::-moz-range-thumb {\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid var(--color-primary);\n border-radius: 9999px;\n background: var(--color-surface);\n box-shadow: var(--shadow-control);\n}\n\n.rk-slider-input:focus-visible::-webkit-slider-thumb {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-slider-input:focus-visible::-moz-range-thumb {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-slider-hint {\n font-size: 0.75rem;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { computed, ref, watch } from 'vue'\n\nimport FormField from './FormField.vue'\n\n/**\n * A number, typed or stepped — a quantity, a price, a count of minutes.\n *\n * `<input type=\"number\">` is what everyone reaches for and nearly everyone\n * regrets: it accepts \"e\", scrolls the value when the page is scrolled over\n * it, and hands back an empty string for anything it does not like. This is\n * a text field that only settles on numbers, with a minus and a plus beside\n * it, and the spin-button keyboard: arrows step, Page Up and Down step ten\n * at a time, Home and End go to the limits.\n *\n * Typing is free while the field has focus — \"-\", \"1.\" and \"\" are all fine\n * halfway through a number. On leaving it, the value is clamped to `min` and\n * `max` and rounded to the precision of `step`, so 0.1 + 0.2 lands on 0.3.\n */\nconst {\n label,\n min = -Infinity,\n max = Infinity,\n step = 1,\n decrementLabel,\n incrementLabel,\n error = '',\n hint = '',\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n min?: number | undefined\n max?: number | undefined\n /** One press of a button or an arrow key. Its decimals set the rounding. */\n step?: number | undefined\n /** Accessible name of the minus button, e.g. \"Decrease\". */\n decrementLabel: string\n /** Accessible name of the plus button, e.g. \"Increase\". */\n incrementLabel: string\n error?: string | undefined\n hint?: string | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/** The number, with `v-model`. `undefined` while the field is empty. */\nconst model = defineModel<number | undefined>()\n\nconst places = computed(() => (String(step).split('.')[1] ?? '').length)\n\nconst settle = (value: number) =>\n Number(Math.min(max, Math.max(min, value)).toFixed(Math.min(places.value, 20)))\n\n/* What the field shows. Kept apart from the model so a half-typed \"1.\" is\n not rewritten to \"1\" under the reader's cursor. */\nconst draft = ref(model.value === undefined ? '' : String(model.value))\n\nwatch(model, (value) => {\n const shown = draft.value === '' ? undefined : Number(draft.value)\n if (shown !== value) draft.value = value === undefined ? '' : String(value)\n})\n\nfunction onInput(event: Event) {\n const text = (event.target as HTMLInputElement).value.replace(',', '.')\n draft.value = text\n if (text.trim() === '') {\n model.value = undefined\n return\n }\n\n const value = Number(text)\n if (Number.isFinite(value)) model.value = value\n}\n\nfunction commit() {\n if (model.value === undefined) {\n draft.value = ''\n return\n }\n setTo(model.value)\n}\n\nfunction setTo(value: number) {\n model.value = settle(value)\n draft.value = String(model.value)\n}\n\nfunction stepBy(times: number) {\n if (disabled) return\n const start = model.value ?? (Number.isFinite(min) ? min : 0)\n setTo(start + step * times)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n const keys: Record<string, () => void> = {\n ArrowUp: () => stepBy(1),\n ArrowDown: () => stepBy(-1),\n PageUp: () => stepBy(10),\n PageDown: () => stepBy(-10),\n Home: () => {\n if (Number.isFinite(min)) setTo(min)\n },\n End: () => {\n if (Number.isFinite(max)) setTo(max)\n },\n }\n const action = keys[event.key]\n if (!action) return\n event.preventDefault()\n action()\n}\n\nconst atMin = computed(() => model.value !== undefined && model.value <= min)\nconst atMax = computed(() => model.value !== undefined && model.value >= max)\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"rk-number control\" :class=\"{ 'is-invalid': invalid, 'is-disabled': disabled }\">\n <button\n type=\"button\"\n class=\"rk-number-step focus-ring\"\n :aria-label=\"decrementLabel\"\n :disabled=\"disabled || atMin\"\n tabindex=\"-1\"\n @click=\"stepBy(-1)\"\n >\n <Minus class=\"size-4\" aria-hidden=\"true\" />\n </button>\n <input\n :id=\"id\"\n :value=\"draft\"\n type=\"text\"\n inputmode=\"decimal\"\n role=\"spinbutton\"\n autocomplete=\"off\"\n class=\"rk-number-field\"\n :aria-valuenow=\"model\"\n :aria-valuemin=\"Number.isFinite(min) ? min : undefined\"\n :aria-valuemax=\"Number.isFinite(max) ? max : undefined\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n @input=\"onInput\"\n @blur=\"commit\"\n @keydown=\"onKeydown\"\n />\n <button\n type=\"button\"\n class=\"rk-number-step focus-ring\"\n :aria-label=\"incrementLabel\"\n :disabled=\"disabled || atMax\"\n tabindex=\"-1\"\n @click=\"stepBy(1)\"\n >\n <Plus class=\"size-4\" aria-hidden=\"true\" />\n </button>\n </div>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n/* The buttons are out of the Tab order: the keyboard already has the arrows,\n and three stops for one number is two too many. They stay reachable by\n pointer and by touch, which is who they are for. */\n.rk-number {\n display: flex;\n align-items: center;\n height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0 0.25rem;\n}\n\n.rk-number:focus-within {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n\n.rk-number.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-number.is-disabled {\n opacity: 0.5;\n}\n\n.rk-number-field {\n min-width: 0;\n flex: 1;\n background: transparent;\n text-align: center;\n font-size: 1rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n outline: none;\n}\n\n.rk-number-step {\n display: grid;\n width: 2.25rem;\n height: 2.25rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: calc(var(--radius-card) - 4px);\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-number-step:hover:not(:disabled) {\n background: var(--color-muted);\n}\n\n.rk-number-step:disabled {\n opacity: 0.35;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { computed, ref, watch } from 'vue'\n\nimport FormField from './FormField.vue'\n\n/**\n * A number, typed or stepped — a quantity, a price, a count of minutes.\n *\n * `<input type=\"number\">` is what everyone reaches for and nearly everyone\n * regrets: it accepts \"e\", scrolls the value when the page is scrolled over\n * it, and hands back an empty string for anything it does not like. This is\n * a text field that only settles on numbers, with a minus and a plus beside\n * it, and the spin-button keyboard: arrows step, Page Up and Down step ten\n * at a time, Home and End go to the limits.\n *\n * Typing is free while the field has focus — \"-\", \"1.\" and \"\" are all fine\n * halfway through a number. On leaving it, the value is clamped to `min` and\n * `max` and rounded to the precision of `step`, so 0.1 + 0.2 lands on 0.3.\n */\nconst {\n label,\n min = -Infinity,\n max = Infinity,\n step = 1,\n decrementLabel,\n incrementLabel,\n error = '',\n hint = '',\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n min?: number | undefined\n max?: number | undefined\n /** One press of a button or an arrow key. Its decimals set the rounding. */\n step?: number | undefined\n /** Accessible name of the minus button, e.g. \"Decrease\". */\n decrementLabel: string\n /** Accessible name of the plus button, e.g. \"Increase\". */\n incrementLabel: string\n error?: string | undefined\n hint?: string | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/** The number, with `v-model`. `undefined` while the field is empty. */\nconst model = defineModel<number | undefined>()\n\nconst places = computed(() => (String(step).split('.')[1] ?? '').length)\n\nconst settle = (value: number) =>\n Number(Math.min(max, Math.max(min, value)).toFixed(Math.min(places.value, 20)))\n\n/* What the field shows. Kept apart from the model so a half-typed \"1.\" is\n not rewritten to \"1\" under the reader's cursor. */\nconst draft = ref(model.value === undefined ? '' : String(model.value))\n\nwatch(model, (value) => {\n const shown = draft.value === '' ? undefined : Number(draft.value)\n if (shown !== value) draft.value = value === undefined ? '' : String(value)\n})\n\nfunction onInput(event: Event) {\n const text = (event.target as HTMLInputElement).value.replace(',', '.')\n draft.value = text\n if (text.trim() === '') {\n model.value = undefined\n return\n }\n\n const value = Number(text)\n if (Number.isFinite(value)) model.value = value\n}\n\nfunction commit() {\n if (model.value === undefined) {\n draft.value = ''\n return\n }\n setTo(model.value)\n}\n\nfunction setTo(value: number) {\n model.value = settle(value)\n draft.value = String(model.value)\n}\n\nfunction stepBy(times: number) {\n if (disabled) return\n const start = model.value ?? (Number.isFinite(min) ? min : 0)\n setTo(start + step * times)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n const keys: Record<string, () => void> = {\n ArrowUp: () => stepBy(1),\n ArrowDown: () => stepBy(-1),\n PageUp: () => stepBy(10),\n PageDown: () => stepBy(-10),\n Home: () => {\n if (Number.isFinite(min)) setTo(min)\n },\n End: () => {\n if (Number.isFinite(max)) setTo(max)\n },\n }\n const action = keys[event.key]\n if (!action) return\n event.preventDefault()\n action()\n}\n\nconst atMin = computed(() => model.value !== undefined && model.value <= min)\nconst atMax = computed(() => model.value !== undefined && model.value >= max)\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"rk-number control\" :class=\"{ 'is-invalid': invalid, 'is-disabled': disabled }\">\n <button\n type=\"button\"\n class=\"rk-number-step focus-ring\"\n :aria-label=\"decrementLabel\"\n :disabled=\"disabled || atMin\"\n tabindex=\"-1\"\n @click=\"stepBy(-1)\"\n >\n <Minus class=\"size-4\" aria-hidden=\"true\" />\n </button>\n <input\n :id=\"id\"\n :value=\"draft\"\n type=\"text\"\n inputmode=\"decimal\"\n role=\"spinbutton\"\n autocomplete=\"off\"\n class=\"rk-number-field\"\n :aria-valuenow=\"model\"\n :aria-valuemin=\"Number.isFinite(min) ? min : undefined\"\n :aria-valuemax=\"Number.isFinite(max) ? max : undefined\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n @input=\"onInput\"\n @blur=\"commit\"\n @keydown=\"onKeydown\"\n />\n <button\n type=\"button\"\n class=\"rk-number-step focus-ring\"\n :aria-label=\"incrementLabel\"\n :disabled=\"disabled || atMax\"\n tabindex=\"-1\"\n @click=\"stepBy(1)\"\n >\n <Plus class=\"size-4\" aria-hidden=\"true\" />\n </button>\n </div>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n/* The buttons are out of the Tab order: the keyboard already has the arrows,\n and three stops for one number is two too many. They stay reachable by\n pointer and by touch, which is who they are for. */\n.rk-number {\n display: flex;\n align-items: center;\n height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0 0.25rem;\n}\n\n.rk-number:focus-within {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n\n.rk-number.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-number.is-disabled {\n opacity: 0.5;\n}\n\n.rk-number-field {\n min-width: 0;\n flex: 1;\n background: transparent;\n text-align: center;\n font-size: 1rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n outline: none;\n}\n\n.rk-number-step {\n display: grid;\n width: 2.25rem;\n height: 2.25rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: calc(var(--radius-card) - 4px);\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-number-step:hover:not(:disabled) {\n background: var(--color-muted);\n}\n\n.rk-number-step:disabled {\n opacity: 0.35;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport BaseSlider from './BaseSlider.vue'\nimport NumberInput from './NumberInput.vue'\n\n/**\n * One number, reached either way: dragged along a range or typed exactly.\n *\n * The pair exists because the two controls answer different halves of the\n * same question. A slider is for finding a value — you can see where you are\n * in the range and what \"a bit more\" looks like — and it is hopeless at\n * landing on 37 out of 500. A number field lands on 37 immediately and tells\n * you nothing about whether 37 is a lot. Anything with a wide range and an\n * exact answer somewhere in it — a price ceiling, an opacity, a timeout —\n * wants both, and apps kept building the pair by hand.\n *\n * ## Both controls carry the same name, and that is on purpose\n *\n * A screen reader announces two controls here, not one, because there are\n * two: each can be focused and each changes the value. Giving them one name\n * is what says they are the same answer rather than two settings that happen\n * to sit together. The number field's label is visually hidden, since the\n * slider's is right above it.\n *\n * ## Typing is allowed to be wrong on the way\n *\n * The field clamps on commit, not on every keystroke: clamping as you type\n * turns \"50\" into \"5\" and then into \"50\" again while you are still typing it\n * — for a range starting at 10, the 5 is rewritten before the 0 arrives.\n * `NumberInput` already holds that line; this passes the range through and\n * stays out of it.\n */\nconst {\n label,\n min = 0,\n max = 100,\n step = 1,\n decrementLabel,\n incrementLabel,\n hint = '',\n disabled = false,\n format,\n} = defineProps<{\n /** Names both controls. Already translated. */\n label: string\n min?: number | undefined\n max?: number | undefined\n step?: number | undefined\n /** Names the number field's step-down button. Already translated. */\n decrementLabel: string\n /** Names the number field's step-up button. Already translated. */\n incrementLabel: string\n hint?: string | undefined\n disabled?: boolean | undefined\n /**\n * Turns the number into something a person would say — \"45 minutes\", \"₺12\".\n *\n * The slider's readout is the number field here, so this is only what a\n * screen reader hears for the slider: `aria-valuetext`, which without it\n * is a bare number and a bare number is not an answer to anything.\n */\n format?: ((value: number) => string) | undefined\n}>()\n\nconst model = defineModel<number>({ default: 0 })\n\n/**\n * The field's own binding, which can be emptied; the pair's cannot.\n *\n * `NumberInput` hands back `undefined` while the field is empty, because\n * halfway through typing a number there is no number. A slider has no such\n * state — the thumb is always somewhere — so an empty field leaves the value\n * where it was until something is typed, rather than dragging the thumb to\n * zero the moment the last digit is deleted.\n */\nconst typed = computed<number | undefined>({\n get: () => model.value,\n set: (value) => {\n if (value !== undefined) model.value = value\n },\n})\n</script>\n\n<template>\n <div class=\"rk-slider-field\">\n <BaseSlider\n v-model=\"model\"\n :label=\"label\"\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :hint=\"hint\"\n :disabled=\"disabled\"\n :format=\"format\"\n :show-value=\"false\"\n />\n\n <NumberInput\n v-model=\"typed\"\n class=\"rk-slider-field-number\"\n :label=\"label\"\n label-hidden\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :decrement-label=\"decrementLabel\"\n :increment-label=\"incrementLabel\"\n :disabled=\"disabled\"\n size=\"sm\"\n />\n </div>\n</template>\n\n<style scoped>\n/* The slider takes the room; the field is as wide as its digits need and no\n wider, so the pair does not read as two fields of equal weight. */\n.rk-slider-field {\n display: flex;\n flex-wrap: wrap;\n /* Centred rather than bottom-aligned: the slider's block grows when its\n hint wraps to a second line, and aligning to the bottom edge sank the\n field down with it. */\n align-items: center;\n gap: 0.75rem;\n}\n\n/* It wraps rather than squeezing: a slider shorter than this is one nobody\n can aim with, and then the field belongs under it instead of beside it.\n Wrapping does that by itself, so it needs no container query -- which\n would have been a rule that silently never matched unless the app had\n declared a container above it. */\n.rk-slider-field > :first-child {\n min-width: 12rem;\n flex: 1 1 12rem;\n}\n\n.rk-slider-field-number {\n width: 7.5rem;\n flex: 0 1 7.5rem;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport BaseSlider from './BaseSlider.vue'\nimport NumberInput from './NumberInput.vue'\n\n/**\n * One number, reached either way: dragged along a range or typed exactly.\n *\n * The pair exists because the two controls answer different halves of the\n * same question. A slider is for finding a value — you can see where you are\n * in the range and what \"a bit more\" looks like — and it is hopeless at\n * landing on 37 out of 500. A number field lands on 37 immediately and tells\n * you nothing about whether 37 is a lot. Anything with a wide range and an\n * exact answer somewhere in it — a price ceiling, an opacity, a timeout —\n * wants both, and apps kept building the pair by hand.\n *\n * ## Both controls carry the same name, and that is on purpose\n *\n * A screen reader announces two controls here, not one, because there are\n * two: each can be focused and each changes the value. Giving them one name\n * is what says they are the same answer rather than two settings that happen\n * to sit together. The number field's label is visually hidden, since the\n * slider's is right above it.\n *\n * ## Typing is allowed to be wrong on the way\n *\n * The field clamps on commit, not on every keystroke: clamping as you type\n * turns \"50\" into \"5\" and then into \"50\" again while you are still typing it\n * — for a range starting at 10, the 5 is rewritten before the 0 arrives.\n * `NumberInput` already holds that line; this passes the range through and\n * stays out of it.\n */\nconst {\n label,\n min = 0,\n max = 100,\n step = 1,\n decrementLabel,\n incrementLabel,\n hint = '',\n disabled = false,\n format,\n} = defineProps<{\n /** Names both controls. Already translated. */\n label: string\n min?: number | undefined\n max?: number | undefined\n step?: number | undefined\n /** Names the number field's step-down button. Already translated. */\n decrementLabel: string\n /** Names the number field's step-up button. Already translated. */\n incrementLabel: string\n hint?: string | undefined\n disabled?: boolean | undefined\n /**\n * Turns the number into something a person would say — \"45 minutes\", \"₺12\".\n *\n * The slider's readout is the number field here, so this is only what a\n * screen reader hears for the slider: `aria-valuetext`, which without it\n * is a bare number and a bare number is not an answer to anything.\n */\n format?: ((value: number) => string) | undefined\n}>()\n\nconst model = defineModel<number>({ default: 0 })\n\n/**\n * The field's own binding, which can be emptied; the pair's cannot.\n *\n * `NumberInput` hands back `undefined` while the field is empty, because\n * halfway through typing a number there is no number. A slider has no such\n * state — the thumb is always somewhere — so an empty field leaves the value\n * where it was until something is typed, rather than dragging the thumb to\n * zero the moment the last digit is deleted.\n */\nconst typed = computed<number | undefined>({\n get: () => model.value,\n set: (value) => {\n if (value !== undefined) model.value = value\n },\n})\n</script>\n\n<template>\n <div class=\"rk-slider-field\">\n <BaseSlider\n v-model=\"model\"\n :label=\"label\"\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :hint=\"hint\"\n :disabled=\"disabled\"\n :format=\"format\"\n :show-value=\"false\"\n />\n\n <NumberInput\n v-model=\"typed\"\n class=\"rk-slider-field-number\"\n :label=\"label\"\n label-hidden\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :decrement-label=\"decrementLabel\"\n :increment-label=\"incrementLabel\"\n :disabled=\"disabled\"\n size=\"sm\"\n />\n </div>\n</template>\n\n<style scoped>\n/* The slider takes the room; the field is as wide as its digits need and no\n wider, so the pair does not read as two fields of equal weight. */\n.rk-slider-field {\n display: flex;\n flex-wrap: wrap;\n /* Centred rather than bottom-aligned: the slider's block grows when its\n hint wraps to a second line, and aligning to the bottom edge sank the\n field down with it. */\n align-items: center;\n gap: 0.75rem;\n}\n\n/* It wraps rather than squeezing: a slider shorter than this is one nobody\n can aim with, and then the field belongs under it instead of beside it.\n Wrapping does that by itself, so it needs no container query -- which\n would have been a rule that silently never matched unless the app had\n declared a container above it. */\n.rk-slider-field > :first-child {\n min-width: 12rem;\n flex: 1 1 12rem;\n}\n\n.rk-slider-field-number {\n width: 7.5rem;\n flex: 0 1 7.5rem;\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * Work in progress, with no idea how much is left.\n *\n * `ProgressBar` is the one to reach for when the amount is known; this is for\n * when it is not. Showing a bar that cannot move is worse than a spinner,\n * because a bar is a promise about how long.\n *\n * `role=\"status\"` and a label, so a screen reader says what is happening. A\n * spinner with no accessible name is a decoration that happens to be the only\n * thing on screen — which is why `label` is required and not defaulted to\n * \"Loading\" in a language the app may not speak.\n */\nconst { label, size = 'md' } = defineProps<{\n /** What is being waited for. Already translated. */\n label: string\n size?: 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst SIZES = { sm: '1rem', md: '1.5rem', lg: '2.5rem' } as const\n</script>\n\n<template>\n <span class=\"rk-spin-wrap\" role=\"status\">\n <span class=\"rk-spin\" :style=\"{ width: SIZES[size], height: SIZES[size] }\" aria-hidden=\"true\" />\n <!-- Off screen rather than hidden: `display: none` is not announced. -->\n <span class=\"rk-spin-label\">{{ label }}</span>\n </span>\n</template>\n\n<style scoped>\n.rk-spin-wrap {\n display: inline-flex;\n align-items: center;\n}\n\n.rk-spin {\n display: block;\n border-radius: 9999px;\n border: 2px solid color-mix(in srgb, currentColor 20%, transparent);\n border-top-color: currentColor;\n animation: rk-spin 700ms linear infinite;\n}\n\n.rk-spin-label {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n@keyframes rk-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Still moving, because a spinner that does not move says the app has hung --\n but a slow fade rather than a fast rotation. */\n@media (prefers-reduced-motion: reduce) {\n .rk-spin {\n animation: rk-pulse 1.4s ease-in-out infinite;\n }\n\n @keyframes rk-pulse {\n 50% {\n opacity: 0.35;\n }\n }\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * Work in progress, with no idea how much is left.\n *\n * `ProgressBar` is the one to reach for when the amount is known; this is for\n * when it is not. Showing a bar that cannot move is worse than a spinner,\n * because a bar is a promise about how long.\n *\n * `role=\"status\"` and a label, so a screen reader says what is happening. A\n * spinner with no accessible name is a decoration that happens to be the only\n * thing on screen — which is why `label` is required and not defaulted to\n * \"Loading\" in a language the app may not speak.\n */\nconst { label, size = 'md' } = defineProps<{\n /** What is being waited for. Already translated. */\n label: string\n size?: 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst SIZES = { sm: '1rem', md: '1.5rem', lg: '2.5rem' } as const\n</script>\n\n<template>\n <span class=\"rk-spin-wrap\" role=\"status\">\n <span class=\"rk-spin\" :style=\"{ width: SIZES[size], height: SIZES[size] }\" aria-hidden=\"true\" />\n <!-- Off screen rather than hidden: `display: none` is not announced. -->\n <span class=\"rk-spin-label\">{{ label }}</span>\n </span>\n</template>\n\n<style scoped>\n.rk-spin-wrap {\n display: inline-flex;\n align-items: center;\n}\n\n.rk-spin {\n display: block;\n border-radius: 9999px;\n border: 2px solid color-mix(in srgb, currentColor 20%, transparent);\n border-top-color: currentColor;\n animation: rk-spin 700ms linear infinite;\n}\n\n.rk-spin-label {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n@keyframes rk-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Still moving, because a spinner that does not move says the app has hung --\n but a slow fade rather than a fast rotation. */\n@media (prefers-reduced-motion: reduce) {\n .rk-spin {\n animation: rk-pulse 1.4s ease-in-out infinite;\n }\n\n @keyframes rk-pulse {\n 50% {\n opacity: 0.35;\n }\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A setting that takes effect the moment it is touched.\n *\n * Not `BaseCheckbox` with a rounder skin, and the difference is not visual. A\n * checkbox states an intention that something else commits — a form is\n * submitted, a dialog is confirmed. A switch *is* the commit: there is no Save\n * after it, which is why it belongs in a settings row and why a form full of\n * them is usually a form of checkboxes drawn wrong.\n *\n * `role=\"switch\"` rather than a styled checkbox, because a screen reader\n * announces \"on\"/\"off\" for a switch and \"checked\"/\"unchecked\" for a checkbox,\n * and those are different sentences about different things.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n label,\n hint = '',\n disabled = false,\n labelHidden = false,\n} = defineProps<{\n label: string\n hint?: string | undefined\n disabled?: boolean | undefined\n /** For a switch inside a row that already names it — it keeps its accessible name. */\n labelHidden?: boolean | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => (hint ? hintId : undefined))\n\nfunction toggle() {\n if (!disabled) model.value = !model.value\n}\n</script>\n\n<template>\n <div class=\"flex items-center justify-between gap-4\">\n <span v-if=\"!labelHidden\" class=\"min-w-0\">\n <span :id=\"id\" class=\"text-ink block text-sm\">{{ label }}</span>\n <span v-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft mt-0.5 block text-xs\">{{ hint }}</span>\n </span>\n\n <!--\n A button, not an <input type=\"checkbox\">. The native control cannot carry\n `role=\"switch\"` in every engine that matters, and the track has to be\n painted anyway; what a native input would have bought is the label\n association, and `aria-labelledby` buys that outright.\n -->\n <button\n type=\"button\"\n role=\"switch\"\n class=\"rk-switch\"\n :class=\"{ 'is-on': model }\"\n :aria-checked=\"model\"\n :aria-labelledby=\"labelHidden ? undefined : id\"\n :aria-label=\"labelHidden ? label : undefined\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n @click=\"toggle\"\n >\n <span class=\"rk-switch-knob\" aria-hidden=\"true\" />\n </button>\n </div>\n</template>\n\n<style scoped>\n.rk-switch {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n width: 2.75rem;\n height: 1.625rem;\n border-radius: 9999px;\n background: var(--color-hair);\n transition: background-color var(--duration-base) ease;\n}\n\n.rk-switch.is-on {\n background: var(--color-primary);\n}\n\n.rk-switch:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-switch:disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.rk-switch-knob {\n position: absolute;\n inset-inline-start: 0.1875rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 9999px;\n /* The on-colour, because the knob sits on the primary track when it is on,\n and that is exactly the pairing `on-primary` is tuned for. */\n background: var(--color-on-primary);\n box-shadow: var(--shadow-control);\n transition: transform var(--duration-base) var(--ease-sheet);\n}\n\n.rk-switch.is-on .rk-switch-knob {\n transform: translateX(1.125rem);\n}\n\n/* `translateX` has no logical form, so the one direction-dependent value in\n the kit that cannot be written logically is written twice. Without this\n the knob leaves the track entirely in a right-to-left layout. */\n[dir='rtl'] .rk-switch.is-on .rk-switch-knob {\n transform: translateX(-1.125rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-switch,\n .rk-switch-knob {\n transition: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A setting that takes effect the moment it is touched.\n *\n * Not `BaseCheckbox` with a rounder skin, and the difference is not visual. A\n * checkbox states an intention that something else commits — a form is\n * submitted, a dialog is confirmed. A switch *is* the commit: there is no Save\n * after it, which is why it belongs in a settings row and why a form full of\n * them is usually a form of checkboxes drawn wrong.\n *\n * `role=\"switch\"` rather than a styled checkbox, because a screen reader\n * announces \"on\"/\"off\" for a switch and \"checked\"/\"unchecked\" for a checkbox,\n * and those are different sentences about different things.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n label,\n hint = '',\n disabled = false,\n labelHidden = false,\n} = defineProps<{\n label: string\n hint?: string | undefined\n disabled?: boolean | undefined\n /** For a switch inside a row that already names it — it keeps its accessible name. */\n labelHidden?: boolean | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => (hint ? hintId : undefined))\n\nfunction toggle() {\n if (!disabled) model.value = !model.value\n}\n</script>\n\n<template>\n <div class=\"flex items-center justify-between gap-4\">\n <span v-if=\"!labelHidden\" class=\"min-w-0\">\n <span :id=\"id\" class=\"text-ink block text-sm\">{{ label }}</span>\n <span v-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft mt-0.5 block text-xs\">{{ hint }}</span>\n </span>\n\n <!--\n A button, not an <input type=\"checkbox\">. The native control cannot carry\n `role=\"switch\"` in every engine that matters, and the track has to be\n painted anyway; what a native input would have bought is the label\n association, and `aria-labelledby` buys that outright.\n -->\n <button\n type=\"button\"\n role=\"switch\"\n class=\"rk-switch\"\n :class=\"{ 'is-on': model }\"\n :aria-checked=\"model\"\n :aria-labelledby=\"labelHidden ? undefined : id\"\n :aria-label=\"labelHidden ? label : undefined\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n @click=\"toggle\"\n >\n <span class=\"rk-switch-knob\" aria-hidden=\"true\" />\n </button>\n </div>\n</template>\n\n<style scoped>\n.rk-switch {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n width: 2.75rem;\n height: 1.625rem;\n border-radius: 9999px;\n background: var(--color-hair);\n transition: background-color var(--duration-base) ease;\n}\n\n.rk-switch.is-on {\n background: var(--color-primary);\n}\n\n.rk-switch:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-switch:disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.rk-switch-knob {\n position: absolute;\n inset-inline-start: 0.1875rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 9999px;\n /* The on-colour, because the knob sits on the primary track when it is on,\n and that is exactly the pairing `on-primary` is tuned for. */\n background: var(--color-on-primary);\n box-shadow: var(--shadow-control);\n transition: transform var(--duration-base) var(--ease-sheet);\n}\n\n.rk-switch.is-on .rk-switch-knob {\n transform: translateX(1.125rem);\n}\n\n/* `translateX` has no logical form, so the one direction-dependent value in\n the kit that cannot be written logically is written twice. Without this\n the knob leaves the track entirely in a right-to-left layout. */\n[dir='rtl'] .rk-switch.is-on .rk-switch-knob {\n transform: translateX(-1.125rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-switch,\n .rk-switch-knob {\n transition: none;\n }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"Row extends Record<string, unknown>\">\nimport ScrollArea from './ScrollArea.vue'\n\nexport interface Column<Row> {\n /** Key into the row, and the slot name for a custom cell. */\n key: string & keyof Row\n /** Column heading. Already translated. */\n label: string\n /**\n * `end` for money and counts, which are read by their last digit.\n * The heading follows the cells, so the column reads as one column.\n */\n align?: 'start' | 'center' | 'end' | undefined\n /** Stops a column wrapping — dates, short codes. */\n nowrap?: boolean | undefined\n}\n\n/**\n * Rows of data, with the parts a hand-written `<table>` leaves out.\n *\n * ## The caption is required, and it is not a heading\n *\n * A table with no caption is announced as \"table\" and nothing else, so a screen\n * reader user landing in one has no idea what they are in. `captionHidden`\n * exists because the page usually already says it in a heading above — but the\n * table still has to carry its own name, because a heading is not attached to\n * anything.\n *\n * ## Scrolling belongs to the table, not the page\n *\n * A wide table inside a narrow column either overflows the page sideways —\n * which takes every other element with it — or is clipped. So the table sits in\n * its own scroller, and the scroller is focusable: a region you can only reach\n * by dragging is a region a keyboard cannot read at all. That is one line of\n * markup and it is the line everyone forgets.\n *\n * Headers carry `scope=\"col\"`, which is what lets a screen reader say the\n * column name before each cell instead of reading a wall of numbers.\n */\nconst {\n columns,\n rows,\n caption,\n captionHidden = false,\n rowKey,\n} = defineProps<{\n columns: readonly Column<Row>[]\n rows: readonly Row[]\n /** What this table is. Required — an unnamed table is a box of numbers. */\n caption: string\n /** Keeps the caption for assistive tech when the page already shows a heading. */\n captionHidden?: boolean | undefined\n /** Which field identifies a row. Falls back to the index. */\n rowKey?: (string & keyof Row) | undefined\n}>()\n\ndefineSlots<{\n /** Per-column cell override, named for the column key. */\n [key: string]: (props: { row: Row; value: unknown }) => unknown\n /** Shown instead of the body when there are no rows. */\n empty?: () => unknown\n}>()\n\nconst keyFor = (row: Row, index: number) => (rowKey ? String(row[rowKey]) : index)\n</script>\n\n<template>\n <!-- `ScrollArea` rather than a scroller written here: it makes this a\n named focus stop only when it overflows *and* holds nothing\n focusable. A table of links or buttons already moves under the\n keyboard, and the stop this used to have unconditionally was a press\n for nothing on every one of them. -->\n <ScrollArea axis=\"x\" :label=\"caption\" class=\"rk-table-scroll\">\n <table class=\"rk-table\">\n <caption :class=\"captionHidden ? 'rk-table-caption-hidden' : 'rk-table-caption'\">\n {{\n caption\n }}\n </caption>\n\n <thead>\n <tr>\n <th\n v-for=\"column in columns\"\n :key=\"column.key\"\n scope=\"col\"\n :class=\"[column.align && `is-${column.align}`, column.nowrap && 'is-nowrap']\"\n >\n {{ column.label }}\n </th>\n </tr>\n </thead>\n\n <tbody v-if=\"rows.length > 0\">\n <tr v-for=\"(row, index) in rows\" :key=\"keyFor(row, index)\">\n <td\n v-for=\"column in columns\"\n :key=\"column.key\"\n :class=\"[column.align && `is-${column.align}`, column.nowrap && 'is-nowrap']\"\n >\n <slot :name=\"column.key\" :row=\"row\" :value=\"row[column.key]\">\n {{ row[column.key] }}\n </slot>\n </td>\n </tr>\n </tbody>\n\n <tbody v-else>\n <tr>\n <td :colspan=\"columns.length\" class=\"rk-table-empty\">\n <slot name=\"empty\" />\n </td>\n </tr>\n </tbody>\n </table>\n </ScrollArea>\n</template>\n\n<style scoped>\n.rk-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.875rem;\n}\n\n.rk-table-caption {\n padding-bottom: 0.75rem;\n text-align: start;\n font-size: 0.8125rem;\n color: var(--color-ink-soft);\n}\n\n/* Off screen rather than `display: none`, which is not announced at all. */\n.rk-table-caption-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n.rk-table th {\n border-bottom: 1px solid var(--color-hair);\n padding: 0.625rem 0.75rem;\n text-align: start;\n font-weight: 500;\n color: var(--color-ink-soft);\n white-space: nowrap;\n}\n\n.rk-table td {\n border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 50%, transparent);\n padding: 0.75rem;\n color: var(--color-ink);\n vertical-align: top;\n}\n\n.rk-table tbody tr:last-child td {\n border-bottom: 0;\n}\n\n/* Numbers line up on their last digit, which is the one being compared.\n Both the heading and the cells, and named against `.rk-table th` rather\n than on its own: a bare `.is-end` loses to it, and the column then reads as\n two columns — a heading on the left and its numbers far off to the right. */\n.rk-table th.is-end,\n.rk-table td.is-end {\n text-align: end;\n font-variant-numeric: tabular-nums;\n}\n\n.rk-table th.is-center,\n.rk-table td.is-center {\n text-align: center;\n}\n\n.rk-table th.is-start,\n.rk-table td.is-start {\n text-align: start;\n}\n\n.is-nowrap {\n white-space: nowrap;\n}\n\n.rk-table-empty {\n padding: 2rem 0.75rem;\n text-align: center;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\" generic=\"Row extends Record<string, unknown>\">\nimport ScrollArea from './ScrollArea.vue'\n\nexport interface Column<Row> {\n /** Key into the row, and the slot name for a custom cell. */\n key: string & keyof Row\n /** Column heading. Already translated. */\n label: string\n /**\n * `end` for money and counts, which are read by their last digit.\n * The heading follows the cells, so the column reads as one column.\n */\n align?: 'start' | 'center' | 'end' | undefined\n /** Stops a column wrapping — dates, short codes. */\n nowrap?: boolean | undefined\n}\n\n/**\n * Rows of data, with the parts a hand-written `<table>` leaves out.\n *\n * ## The caption is required, and it is not a heading\n *\n * A table with no caption is announced as \"table\" and nothing else, so a screen\n * reader user landing in one has no idea what they are in. `captionHidden`\n * exists because the page usually already says it in a heading above — but the\n * table still has to carry its own name, because a heading is not attached to\n * anything.\n *\n * ## Scrolling belongs to the table, not the page\n *\n * A wide table inside a narrow column either overflows the page sideways —\n * which takes every other element with it — or is clipped. So the table sits in\n * its own scroller, and the scroller is focusable: a region you can only reach\n * by dragging is a region a keyboard cannot read at all. That is one line of\n * markup and it is the line everyone forgets.\n *\n * Headers carry `scope=\"col\"`, which is what lets a screen reader say the\n * column name before each cell instead of reading a wall of numbers.\n */\nconst {\n columns,\n rows,\n caption,\n captionHidden = false,\n rowKey,\n} = defineProps<{\n columns: readonly Column<Row>[]\n rows: readonly Row[]\n /** What this table is. Required — an unnamed table is a box of numbers. */\n caption: string\n /** Keeps the caption for assistive tech when the page already shows a heading. */\n captionHidden?: boolean | undefined\n /** Which field identifies a row. Falls back to the index. */\n rowKey?: (string & keyof Row) | undefined\n}>()\n\ndefineSlots<{\n /** Per-column cell override, named for the column key. */\n [key: string]: (props: { row: Row; value: unknown }) => unknown\n /** Shown instead of the body when there are no rows. */\n empty?: () => unknown\n}>()\n\nconst keyFor = (row: Row, index: number) => (rowKey ? String(row[rowKey]) : index)\n</script>\n\n<template>\n <!-- `ScrollArea` rather than a scroller written here: it makes this a\n named focus stop only when it overflows *and* holds nothing\n focusable. A table of links or buttons already moves under the\n keyboard, and the stop this used to have unconditionally was a press\n for nothing on every one of them. -->\n <ScrollArea axis=\"x\" :label=\"caption\" class=\"rk-table-scroll\">\n <table class=\"rk-table\">\n <caption :class=\"captionHidden ? 'rk-table-caption-hidden' : 'rk-table-caption'\">\n {{\n caption\n }}\n </caption>\n\n <thead>\n <tr>\n <th\n v-for=\"column in columns\"\n :key=\"column.key\"\n scope=\"col\"\n :class=\"[column.align && `is-${column.align}`, column.nowrap && 'is-nowrap']\"\n >\n {{ column.label }}\n </th>\n </tr>\n </thead>\n\n <tbody v-if=\"rows.length > 0\">\n <tr v-for=\"(row, index) in rows\" :key=\"keyFor(row, index)\">\n <td\n v-for=\"column in columns\"\n :key=\"column.key\"\n :class=\"[column.align && `is-${column.align}`, column.nowrap && 'is-nowrap']\"\n >\n <slot :name=\"column.key\" :row=\"row\" :value=\"row[column.key]\">\n {{ row[column.key] }}\n </slot>\n </td>\n </tr>\n </tbody>\n\n <tbody v-else>\n <tr>\n <td :colspan=\"columns.length\" class=\"rk-table-empty\">\n <slot name=\"empty\" />\n </td>\n </tr>\n </tbody>\n </table>\n </ScrollArea>\n</template>\n\n<style scoped>\n.rk-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.875rem;\n}\n\n.rk-table-caption {\n padding-bottom: 0.75rem;\n text-align: start;\n font-size: 0.8125rem;\n color: var(--color-ink-soft);\n}\n\n/* Off screen rather than `display: none`, which is not announced at all. */\n.rk-table-caption-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n.rk-table th {\n border-bottom: 1px solid var(--color-hair);\n padding: 0.625rem 0.75rem;\n text-align: start;\n font-weight: 500;\n color: var(--color-ink-soft);\n white-space: nowrap;\n}\n\n.rk-table td {\n border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 50%, transparent);\n padding: 0.75rem;\n color: var(--color-ink);\n vertical-align: top;\n}\n\n.rk-table tbody tr:last-child td {\n border-bottom: 0;\n}\n\n/* Numbers line up on their last digit, which is the one being compared.\n Both the heading and the cells, and named against `.rk-table th` rather\n than on its own: a bare `.is-end` loses to it, and the column then reads as\n two columns — a heading on the left and its numbers far off to the right. */\n.rk-table th.is-end,\n.rk-table td.is-end {\n text-align: end;\n font-variant-numeric: tabular-nums;\n}\n\n.rk-table th.is-center,\n.rk-table td.is-center {\n text-align: center;\n}\n\n.rk-table th.is-start,\n.rk-table td.is-start {\n text-align: start;\n}\n\n.is-nowrap {\n white-space: nowrap;\n}\n\n.rk-table-empty {\n padding: 2rem 0.75rem;\n text-align: center;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { useBoundValue } from '../composables/use-bound-value'\nimport FormField from './FormField.vue'\nimport { useFieldAttrs } from '../composables/use-field-attrs'\n\n/**\n * A multi-line field.\n *\n * `rows` rather than an auto-growing box: a textarea that resizes as it is\n * typed into moves everything below it, and in a form that means the button\n * the writer is heading for keeps sliding away. Growth is left to the browser's\n * own resize handle, which the writer controls.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs()\n\nconst {\n modelValue = undefined,\n label,\n error = '',\n hint = '',\n labelHidden = false,\n rows = 4,\n size = 'md',\n variant = 'default',\n fieldId = undefined,\n controlClass = undefined,\n} = defineProps<{\n /** The text, with `v-model`. */\n modelValue?: string | undefined\n label: string\n error?: string | undefined\n hint?: string | undefined\n labelHidden?: boolean | undefined\n rows?: number | undefined\n /**\n * `sm` tightens the label and the spacing. It does **not** shrink the text:\n * iOS zooms the viewport when it focuses a field under 16px and never zooms\n * back, which is why both phone apps force 16px on form elements in their\n * base layer.\n */\n size?: 'sm' | 'md' | undefined\n /**\n * `unstyled` keeps the wiring and drops the surface.\n *\n * The label, the generated id, `aria-describedby` and the error are what a\n * field is; the border and the height are what it looks like. A search box\n * inside a bordered row, a url field in an editor popover — those places\n * were hand-writing the whole thing to avoid the appearance, and losing the\n * wiring with it.\n *\n * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n * primitive is finished when the app can take its behaviour without its\n * paint.\n */\n variant?: 'default' | 'unstyled' | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n /**\n * Classes for the control itself, rather than for the field around it.\n *\n * `class` lands on the field, because that is where Vue puts a\n * component's class and because a layout class means \"space this field\".\n * That leaves `variant=\"unstyled\"` with no way to paint the control it\n * just stripped — the point of stripping it — which is why an app with a\n * large amount field wrote the whole thing by hand instead.\n *\n * It appends, so with the default variant a conflict is settled by\n * Tailwind's own order rather than by writing it here; reach for it with\n * `unstyled`, where there is nothing to settle.\n */\n controlClass?: string | undefined\n}>()\n\n/* Declared by hand rather than with defineModel: it accepts `undefined` and\n emits only strings, which defineModel cannot type both ways. See\n `use-bound-value.ts`. */\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\nconst model = useBoundValue(\n () => modelValue,\n (value) => emit('update:modelValue', value),\n)\nconst control = ref<HTMLTextAreaElement | null>(null)\n\n/**\n * Focus the control, for a caller that owns when it happens.\n *\n * A `ref` on a component gives the component and not the element, so without\n * this a field cannot be focused at all — which is why an app that focuses\n * its amount field when a sheet opens, and again when the amount is\n * rejected, wrote the whole field by hand instead and said so in a comment.\n * That is the gap test, with the reason already written down.\n *\n * `ErrorSummary` has exposed `focus` since it existed, for the same need\n * from the other end.\n */\nfunction focus() {\n control.value?.focus()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :class=\"fieldClass\"\n :style=\"fieldStyle\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :label-hidden=\"labelHidden\"\n :size=\"size\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <textarea\n :id=\"id\"\n ref=\"control\"\n v-model=\"model\"\n :rows=\"rows\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n v-bind=\"controlAttrs\"\n :class=\"[\n variant === 'unstyled'\n ? ''\n : 'control text-ink rounded-card focus-visible:outline-primary resize-y px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1',\n 'text-base',\n variant !== 'unstyled' && invalid ? 'border-negative' : '',\n controlClass,\n ]\"\n />\n </template>\n </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { useBoundValue } from '../composables/use-bound-value'\nimport FormField from './FormField.vue'\nimport { useFieldAttrs } from '../composables/use-field-attrs'\n\n/**\n * A multi-line field.\n *\n * `rows` rather than an auto-growing box: a textarea that resizes as it is\n * typed into moves everything below it, and in a form that means the button\n * the writer is heading for keeps sliding away. Growth is left to the browser's\n * own resize handle, which the writer controls.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs()\n\nconst {\n modelValue = undefined,\n label,\n error = '',\n hint = '',\n labelHidden = false,\n rows = 4,\n size = 'md',\n variant = 'default',\n fieldId = undefined,\n controlClass = undefined,\n} = defineProps<{\n /** The text, with `v-model`. */\n modelValue?: string | undefined\n label: string\n error?: string | undefined\n hint?: string | undefined\n labelHidden?: boolean | undefined\n rows?: number | undefined\n /**\n * `sm` tightens the label and the spacing. It does **not** shrink the text:\n * iOS zooms the viewport when it focuses a field under 16px and never zooms\n * back, which is why both phone apps force 16px on form elements in their\n * base layer.\n */\n size?: 'sm' | 'md' | undefined\n /**\n * `unstyled` keeps the wiring and drops the surface.\n *\n * The label, the generated id, `aria-describedby` and the error are what a\n * field is; the border and the height are what it looks like. A search box\n * inside a bordered row, a url field in an editor popover — those places\n * were hand-writing the whole thing to avoid the appearance, and losing the\n * wiring with it.\n *\n * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n * primitive is finished when the app can take its behaviour without its\n * paint.\n */\n variant?: 'default' | 'unstyled' | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n /**\n * Classes for the control itself, rather than for the field around it.\n *\n * `class` lands on the field, because that is where Vue puts a\n * component's class and because a layout class means \"space this field\".\n * That leaves `variant=\"unstyled\"` with no way to paint the control it\n * just stripped — the point of stripping it — which is why an app with a\n * large amount field wrote the whole thing by hand instead.\n *\n * It appends, so with the default variant a conflict is settled by\n * Tailwind's own order rather than by writing it here; reach for it with\n * `unstyled`, where there is nothing to settle.\n */\n controlClass?: string | undefined\n}>()\n\n/* Declared by hand rather than with defineModel: it accepts `undefined` and\n emits only strings, which defineModel cannot type both ways. See\n `use-bound-value.ts`. */\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\nconst model = useBoundValue(\n () => modelValue,\n (value) => emit('update:modelValue', value),\n)\nconst control = ref<HTMLTextAreaElement | null>(null)\n\n/**\n * Focus the control, for a caller that owns when it happens.\n *\n * A `ref` on a component gives the component and not the element, so without\n * this a field cannot be focused at all — which is why an app that focuses\n * its amount field when a sheet opens, and again when the amount is\n * rejected, wrote the whole field by hand instead and said so in a comment.\n * That is the gap test, with the reason already written down.\n *\n * `ErrorSummary` has exposed `focus` since it existed, for the same need\n * from the other end.\n */\nfunction focus() {\n control.value?.focus()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :class=\"fieldClass\"\n :style=\"fieldStyle\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :label-hidden=\"labelHidden\"\n :size=\"size\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <textarea\n :id=\"id\"\n ref=\"control\"\n v-model=\"model\"\n :rows=\"rows\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n v-bind=\"controlAttrs\"\n :class=\"[\n variant === 'unstyled'\n ? ''\n : 'control text-ink rounded-card focus-visible:outline-primary resize-y px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1',\n 'text-base',\n variant !== 'unstyled' && invalid ? 'border-negative' : '',\n controlClass,\n ]\"\n />\n </template>\n </FormField>\n</template>\n","<script lang=\"ts\" setup>\n/**\n * A list with nothing in it yet, said kindly.\n *\n * A blank area reads as a page that failed to load, and the reader's first\n * thought is that something is broken rather than that they have not started.\n * So there is always a sentence, and the slot below it is where the way out\n * goes — the button that creates the first one.\n */\nconst { title, description = '' } = defineProps<{\n title: string\n description?: string | undefined\n}>()\n</script>\n\n<template>\n <div class=\"flex flex-col items-center gap-3 px-6 py-10 text-center\">\n <div\n v-if=\"$slots.icon\"\n class=\"bg-muted text-primary rounded-card flex size-12 items-center justify-center\"\n >\n <slot name=\"icon\" />\n </div>\n\n <h3 class=\"text-ink text-base font-semibold\">{{ title }}</h3>\n <p v-if=\"description\" class=\"text-ink-soft max-w-[36ch] text-sm\">\n {{ description }}\n </p>\n\n <div v-if=\"$slots.action\" class=\"mt-2 flex w-full flex-col gap-2\">\n <slot name=\"action\" />\n </div>\n </div>\n</template>\n\n<style></style>\n","<script lang=\"ts\" setup>\n/**\n * A list with nothing in it yet, said kindly.\n *\n * A blank area reads as a page that failed to load, and the reader's first\n * thought is that something is broken rather than that they have not started.\n * So there is always a sentence, and the slot below it is where the way out\n * goes — the button that creates the first one.\n */\nconst { title, description = '' } = defineProps<{\n title: string\n description?: string | undefined\n}>()\n</script>\n\n<template>\n <div class=\"flex flex-col items-center gap-3 px-6 py-10 text-center\">\n <div\n v-if=\"$slots.icon\"\n class=\"bg-muted text-primary rounded-card flex size-12 items-center justify-center\"\n >\n <slot name=\"icon\" />\n </div>\n\n <h3 class=\"text-ink text-base font-semibold\">{{ title }}</h3>\n <p v-if=\"description\" class=\"text-ink-soft max-w-[36ch] text-sm\">\n {{ description }}\n </p>\n\n <div v-if=\"$slots.action\" class=\"mt-2 flex w-full flex-col gap-2\">\n <slot name=\"action\" />\n </div>\n </div>\n</template>\n\n<style></style>\n","<script setup lang=\"ts\">\nimport { onErrorCaptured, ref, watch } from 'vue'\n\n/**\n * Keeps one broken screen from taking the whole app down.\n *\n * An error thrown while a component renders unmounts the tree above it, and a\n * single-page app has nothing underneath — the tab goes white and whoever was\n * using it loses what they were in the middle of.\n *\n * What it does *not* do is decide what that looks like. All three apps in this\n * workshop had written this component, and the parts they had in common were\n * the mechanism — catch, report, reset when the route changes — while the\n * parts that differed were the ones that should: an icon, a sentence, a way\n * back. So the fallback is a slot, and the kit stays out of the wording.\n *\n * Only errors thrown while rendering a descendant reach `onErrorCaptured`.\n * Rejected promises and failed queries do not, and should not: those belong to\n * the code that owns the request.\n *\n * @example\n * ```vue\n * <ErrorBoundary :resetKey=\"route.fullPath\" @error=\"reportError\">\n * <template #fallback=\"{ reset }\">\n * <EmptyState :title=\"t('error.title')\">\n * <BaseButton @click=\"reset\">{{ t('error.retry') }}</BaseButton>\n * </EmptyState>\n * </template>\n * <RouterView />\n * </ErrorBoundary>\n * ```\n */\nconst { resetKey } = defineProps<{\n /**\n * Clears the error whenever it changes — a route path, usually.\n *\n * An error on one screen should not follow somebody to the next one, and\n * without this the boundary stays broken until a full reload.\n */\n resetKey?: string | number | undefined\n}>()\n\nconst emit = defineEmits<{ error: [cause: unknown] }>()\n\nconst failed = ref<unknown>(null)\n\nfunction reset() {\n failed.value = null\n}\n\nonErrorCaptured((cause) => {\n failed.value = cause\n emit('error', cause)\n\n // Swallowed on purpose: the fallback is now showing, and letting it travel\n // further up would unmount the boundary along with everything else.\n return false\n})\n\nwatch(\n () => resetKey,\n () => reset(),\n)\n</script>\n\n<template>\n <slot v-if=\"failed\" name=\"fallback\" :error=\"failed\" :reset=\"reset\" />\n <slot v-else />\n</template>\n","<script setup lang=\"ts\">\nimport { onErrorCaptured, ref, watch } from 'vue'\n\n/**\n * Keeps one broken screen from taking the whole app down.\n *\n * An error thrown while a component renders unmounts the tree above it, and a\n * single-page app has nothing underneath — the tab goes white and whoever was\n * using it loses what they were in the middle of.\n *\n * What it does *not* do is decide what that looks like. All three apps in this\n * workshop had written this component, and the parts they had in common were\n * the mechanism — catch, report, reset when the route changes — while the\n * parts that differed were the ones that should: an icon, a sentence, a way\n * back. So the fallback is a slot, and the kit stays out of the wording.\n *\n * Only errors thrown while rendering a descendant reach `onErrorCaptured`.\n * Rejected promises and failed queries do not, and should not: those belong to\n * the code that owns the request.\n *\n * @example\n * ```vue\n * <ErrorBoundary :resetKey=\"route.fullPath\" @error=\"reportError\">\n * <template #fallback=\"{ reset }\">\n * <EmptyState :title=\"t('error.title')\">\n * <BaseButton @click=\"reset\">{{ t('error.retry') }}</BaseButton>\n * </EmptyState>\n * </template>\n * <RouterView />\n * </ErrorBoundary>\n * ```\n */\nconst { resetKey } = defineProps<{\n /**\n * Clears the error whenever it changes — a route path, usually.\n *\n * An error on one screen should not follow somebody to the next one, and\n * without this the boundary stays broken until a full reload.\n */\n resetKey?: string | number | undefined\n}>()\n\nconst emit = defineEmits<{ error: [cause: unknown] }>()\n\nconst failed = ref<unknown>(null)\n\nfunction reset() {\n failed.value = null\n}\n\nonErrorCaptured((cause) => {\n failed.value = cause\n emit('error', cause)\n\n // Swallowed on purpose: the fallback is now showing, and letting it travel\n // further up would unmount the boundary along with everything else.\n return false\n})\n\nwatch(\n () => resetKey,\n () => reset(),\n)\n</script>\n\n<template>\n <slot v-if=\"failed\" name=\"fallback\" :error=\"failed\" :reset=\"reset\" />\n <slot v-else />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One measure, centred, with the page's gutters.\n *\n * The first thing a desktop app needs and the last thing a kit built for\n * phones thinks to provide — a 430 px shell has no use for a maximum width, so\n * this was missing, and the consuming app wrote `max-w-[1200px] mx-auto px-6`\n * into every layout instead. Written once it costs nothing; written eleven\n * times it is eleven chances for one page to be forty pixels narrower than the\n * rest, which is the kind of thing nobody can name and everybody can see.\n *\n * Two widths rather than one, because a page and a passage are different\n * problems: `wide` is the page, `reading` is a column of prose at the width\n * type wants to be read at. Both come from tokens, so an app that measures its\n * page at 1120 rather than 1200 can still use this.\n */\nconst { width = 'wide', as = 'div' } = defineProps<{\n /** `wide` for a page, `reading` for prose, `full` to opt out. */\n width?: 'wide' | 'reading' | 'full' | undefined\n /** The element to render. `main`, `section` and `article` all belong here. */\n as?: string | undefined\n}>()\n\n/**\n * From tokens, not from literals.\n *\n * A width is a role the same way a colour is, and baking one in makes the\n * component unusable by any app that measured its own page differently — which\n * the first consumer had, deliberately. Override `--measure-page` and\n * `--measure-reading` in the app's `@theme` and every container follows.\n */\nconst WIDTHS = {\n wide: 'var(--measure-page)',\n reading: 'var(--measure-reading)',\n full: 'none',\n} as const\n\nconst measure = computed(() => WIDTHS[width])\n</script>\n\n<template>\n <component :is=\"as\" class=\"mx-auto w-full px-5 sm:px-8\" :style=\"{ maxWidth: measure }\">\n <slot />\n </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One measure, centred, with the page's gutters.\n *\n * The first thing a desktop app needs and the last thing a kit built for\n * phones thinks to provide — a 430 px shell has no use for a maximum width, so\n * this was missing, and the consuming app wrote `max-w-[1200px] mx-auto px-6`\n * into every layout instead. Written once it costs nothing; written eleven\n * times it is eleven chances for one page to be forty pixels narrower than the\n * rest, which is the kind of thing nobody can name and everybody can see.\n *\n * Two widths rather than one, because a page and a passage are different\n * problems: `wide` is the page, `reading` is a column of prose at the width\n * type wants to be read at. Both come from tokens, so an app that measures its\n * page at 1120 rather than 1200 can still use this.\n */\nconst { width = 'wide', as = 'div' } = defineProps<{\n /** `wide` for a page, `reading` for prose, `full` to opt out. */\n width?: 'wide' | 'reading' | 'full' | undefined\n /** The element to render. `main`, `section` and `article` all belong here. */\n as?: string | undefined\n}>()\n\n/**\n * From tokens, not from literals.\n *\n * A width is a role the same way a colour is, and baking one in makes the\n * component unusable by any app that measured its own page differently — which\n * the first consumer had, deliberately. Override `--measure-page` and\n * `--measure-reading` in the app's `@theme` and every container follows.\n */\nconst WIDTHS = {\n wide: 'var(--measure-page)',\n reading: 'var(--measure-reading)',\n full: 'none',\n} as const\n\nconst measure = computed(() => WIDTHS[width])\n</script>\n\n<template>\n <component :is=\"as\" class=\"mx-auto w-full px-5 sm:px-8\" :style=\"{ maxWidth: measure }\">\n <slot />\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * The bar at the top of a screen: a title with room either side of it.\n *\n * Three fixed columns rather than a flex row, so the title is centred on the\n * screen rather than centred on what is left after the buttons. A back arrow on\n * one side and nothing on the other would otherwise push every title off centre\n * by exactly half a button, which is visible the moment two screens sit next to\n * each other.\n */\nconst { title } = defineProps<{ title: string }>()\n</script>\n\n<template>\n <header class=\"grid h-12 shrink-0 grid-cols-[2.5rem_1fr_2.5rem] items-center\">\n <div class=\"justify-self-start\"><slot name=\"left\" /></div>\n\n <h1 class=\"text-ink flex min-w-0 justify-center text-base font-semibold tabular-nums\">\n <slot name=\"title\">\n <span class=\"truncate\">{{ title }}</span>\n </slot>\n </h1>\n\n <div class=\"justify-self-end\"><slot name=\"right\" /></div>\n </header>\n</template>\n","<script setup lang=\"ts\">\n/**\n * The bar at the top of a screen: a title with room either side of it.\n *\n * Three fixed columns rather than a flex row, so the title is centred on the\n * screen rather than centred on what is left after the buttons. A back arrow on\n * one side and nothing on the other would otherwise push every title off centre\n * by exactly half a button, which is visible the moment two screens sit next to\n * each other.\n */\nconst { title } = defineProps<{ title: string }>()\n</script>\n\n<template>\n <header class=\"grid h-12 shrink-0 grid-cols-[2.5rem_1fr_2.5rem] items-center\">\n <div class=\"justify-self-start\"><slot name=\"left\" /></div>\n\n <h1 class=\"text-ink flex min-w-0 justify-center text-base font-semibold tabular-nums\">\n <slot name=\"title\">\n <span class=\"truncate\">{{ title }}</span>\n </slot>\n </h1>\n\n <div class=\"justify-self-end\"><slot name=\"right\" /></div>\n </header>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * How far through something somebody is.\n *\n * Clamped rather than trusted. A progress bar is always fed a computed number,\n * and computed numbers arrive as 101, as -0, and as NaN when the denominator\n * is zero — which is the ordinary state of a course nobody has started. Any of\n * those renders a bar that runs past its own track, and it is the sort of\n * thing that ships because the happy path was the only one anybody looked at.\n */\nconst {\n value,\n max = 100,\n label,\n size = 'md',\n} = defineProps<{\n value: number\n max?: number | undefined\n /**\n * How thick the track is. `sm` for a bar under a step counter, where it is a\n * hint rather than the subject; `lg` where the progress is the point.\n *\n * It shipped at one thickness and the two bars anybody wanted were `h-1`.\n */\n size?: 'sm' | 'md' | 'lg' | undefined\n /** For screen readers. Without it this is a rectangle that means nothing. */\n label?: string | undefined\n}>()\n\nconst TRACK = {\n sm: 'h-1',\n md: 'h-1.5',\n lg: 'h-2',\n} as const\n\nconst portion = computed(() => {\n if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0\n\n return Math.min(100, Math.max(0, (value / max) * 100))\n})\n</script>\n\n<template>\n <div\n class=\"bg-muted w-full overflow-hidden rounded-full\"\n :class=\"TRACK[size]\"\n role=\"progressbar\"\n :aria-valuenow=\"Math.round(portion)\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n :aria-label=\"label\"\n >\n <div\n class=\"bg-primary h-full rounded-full transition-[width] duration-700 ease-out\"\n :style=\"{ width: `${portion}%` }\"\n />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * How far through something somebody is.\n *\n * Clamped rather than trusted. A progress bar is always fed a computed number,\n * and computed numbers arrive as 101, as -0, and as NaN when the denominator\n * is zero — which is the ordinary state of a course nobody has started. Any of\n * those renders a bar that runs past its own track, and it is the sort of\n * thing that ships because the happy path was the only one anybody looked at.\n */\nconst {\n value,\n max = 100,\n label,\n size = 'md',\n} = defineProps<{\n value: number\n max?: number | undefined\n /**\n * How thick the track is. `sm` for a bar under a step counter, where it is a\n * hint rather than the subject; `lg` where the progress is the point.\n *\n * It shipped at one thickness and the two bars anybody wanted were `h-1`.\n */\n size?: 'sm' | 'md' | 'lg' | undefined\n /** For screen readers. Without it this is a rectangle that means nothing. */\n label?: string | undefined\n}>()\n\nconst TRACK = {\n sm: 'h-1',\n md: 'h-1.5',\n lg: 'h-2',\n} as const\n\nconst portion = computed(() => {\n if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0\n\n return Math.min(100, Math.max(0, (value / max) * 100))\n})\n</script>\n\n<template>\n <div\n class=\"bg-muted w-full overflow-hidden rounded-full\"\n :class=\"TRACK[size]\"\n role=\"progressbar\"\n :aria-valuenow=\"Math.round(portion)\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n :aria-label=\"label\"\n >\n <div\n class=\"bg-primary h-full rounded-full transition-[width] duration-700 ease-out\"\n :style=\"{ width: `${portion}%` }\"\n />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One plan in a pricing table.\n *\n * Every string arrives as a prop. A component in a kit that reaches for its\n * consumer's translations is not shared, it is one app's furniture parked\n * somewhere else — and the second app to want it would have to fork it.\n *\n * The tone is semantic rather than named after a colour. \"Gold\" and \"diamond\"\n * are one product's tiers; `warm` and `cool` are what a pricing table actually\n * needs, which is for three columns to be distinguishable at a glance without\n * any of them shouting. A table where every column is a different hue reads as\n * three products from three companies.\n */\nconst {\n name,\n lead,\n price,\n period,\n note,\n features,\n tone = 'neutral',\n badge,\n chip,\n recommended = false,\n} = defineProps<{\n name: string\n lead?: string | undefined\n /** Already formatted, or whatever stands in while there is no price. */\n price: string\n period?: string | undefined\n note?: string | undefined\n features: readonly string[]\n tone?: 'neutral' | 'warm' | 'cool' | undefined\n /** Rides on the card's edge, e.g. \"Recommended\". */\n badge?: string | undefined\n /** Sits inside, e.g. \"30% cheaper\" or \"Your plan\". */\n chip?: string | undefined\n /** Raises the card and lets the badge show. */\n recommended?: boolean | undefined\n}>()\n\n/* Roles, not hex values. This used to carry `#b8862c` and `#4a86a8` with\n hand-picked darker shades for text, which is the one thing the kit's rules\n forbid: a colour in a component cannot follow a palette, so a pricing table\n stayed amber and blue whatever the app had rebranded to.\n\n The ring is handed to the surface as a variable rather than set as a\n `border-color` class. The surface draws its own border, and two utilities\n setting the same property would be decided by stylesheet order. */\n/* The icon box takes the tone as its ground and `ink` for whatever is in\n it. The slot is the app's, so the kit cannot know whether it holds a\n decorative glyph or a letter somebody has to read — and a role written on\n a wash of itself is unreadable either way. The ring and the soft panel\n still carry the tone. */\nconst TONE = {\n neutral: {\n ring: '',\n soft: 'bg-muted text-ink-soft',\n icon: 'bg-primary/10 text-ink',\n },\n warm: {\n ring: '[--surface-border-color:color-mix(in_oklab,var(--color-warning)_40%,transparent)]',\n soft: 'bg-warning/15 text-ink',\n icon: 'bg-warning/15 text-ink',\n },\n cool: {\n ring: '[--surface-border-color:color-mix(in_oklab,var(--color-accent)_38%,transparent)]',\n soft: 'bg-accent/12 text-ink',\n icon: 'bg-accent/12 text-ink',\n },\n} as const\n\nconst palette = computed(() => TONE[tone])\n</script>\n\n<template>\n <article\n class=\"surface rounded-card ease-standard relative flex h-full flex-col p-7 transition-[border-color,box-shadow,transform] duration-(--duration-slower) hover:[--surface-border-color:color-mix(in_oklab,var(--color-primary)_60%,transparent)] hover:[--surface-shadow:var(--shadow-raised)] sm:p-8\"\n :class=\"[\n palette.ring,\n recommended ? '[--surface-shadow:var(--shadow-raised)]' : 'hover:-translate-y-0.5',\n ]\"\n >\n <!-- On the edge rather than inside, so it cannot be mistaken for one of\n the plan's own features. -->\n <span\n v-if=\"badge && recommended\"\n class=\"bg-primary rounded-cell text-on-primary absolute -top-3 left-7 px-3 py-1 text-[0.7rem] font-semibold\"\n >\n {{ badge }}\n </span>\n\n <div class=\"flex items-start justify-between gap-4\">\n <span\n v-if=\"$slots.icon\"\n class=\"rounded-card grid size-11 place-items-center text-xl\"\n :class=\"palette.icon\"\n >\n <slot name=\"icon\" />\n </span>\n\n <span\n v-if=\"chip\"\n class=\"rounded-cell ml-auto px-2.5 py-1 text-[0.7rem] font-medium\"\n :class=\"palette.soft\"\n >\n {{ chip }}\n </span>\n </div>\n\n <h3 class=\"text-ink mt-5 text-lg font-semibold\">{{ name }}</h3>\n <p v-if=\"lead\" class=\"text-ink-soft mt-1.5 text-sm leading-relaxed\">{{ lead }}</p>\n\n <p class=\"mt-6 flex items-baseline gap-1.5\">\n <span class=\"text-ink text-3xl font-semibold tracking-tight tabular-nums\">{{ price }}</span>\n <span v-if=\"period\" class=\"text-ink-soft text-sm\">{{ period }}</span>\n </p>\n <p v-if=\"note\" class=\"text-ink-soft mt-1 text-xs\">{{ note }}</p>\n\n <ul class=\"mt-7 flex-1 space-y-3\">\n <li v-for=\"feature in features\" :key=\"feature\" class=\"flex gap-3 text-sm\">\n <!-- The marker is a slot because a pricing table often uses it to say\n something the tone cannot: on the tier you already have, these are\n things you hold rather than things you would get. A consumer that\n had drawn that distinction should not have to give it up to reach\n for this component. -->\n <span v-if=\"$slots.bullet\" class=\"mt-[0.45rem] shrink-0\"><slot name=\"bullet\" /></span>\n <span\n v-else\n class=\"bg-primary/45 mt-[0.45rem] size-1.5 shrink-0 rounded-full\"\n aria-hidden=\"true\"\n />\n <span class=\"text-ink-soft leading-relaxed\">{{ feature }}</span>\n </li>\n </ul>\n\n <div v-if=\"$slots.action\" class=\"mt-8\"><slot name=\"action\" /></div>\n </article>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One plan in a pricing table.\n *\n * Every string arrives as a prop. A component in a kit that reaches for its\n * consumer's translations is not shared, it is one app's furniture parked\n * somewhere else — and the second app to want it would have to fork it.\n *\n * The tone is semantic rather than named after a colour. \"Gold\" and \"diamond\"\n * are one product's tiers; `warm` and `cool` are what a pricing table actually\n * needs, which is for three columns to be distinguishable at a glance without\n * any of them shouting. A table where every column is a different hue reads as\n * three products from three companies.\n */\nconst {\n name,\n lead,\n price,\n period,\n note,\n features,\n tone = 'neutral',\n badge,\n chip,\n recommended = false,\n} = defineProps<{\n name: string\n lead?: string | undefined\n /** Already formatted, or whatever stands in while there is no price. */\n price: string\n period?: string | undefined\n note?: string | undefined\n features: readonly string[]\n tone?: 'neutral' | 'warm' | 'cool' | undefined\n /** Rides on the card's edge, e.g. \"Recommended\". */\n badge?: string | undefined\n /** Sits inside, e.g. \"30% cheaper\" or \"Your plan\". */\n chip?: string | undefined\n /** Raises the card and lets the badge show. */\n recommended?: boolean | undefined\n}>()\n\n/* Roles, not hex values. This used to carry `#b8862c` and `#4a86a8` with\n hand-picked darker shades for text, which is the one thing the kit's rules\n forbid: a colour in a component cannot follow a palette, so a pricing table\n stayed amber and blue whatever the app had rebranded to.\n\n The ring is handed to the surface as a variable rather than set as a\n `border-color` class. The surface draws its own border, and two utilities\n setting the same property would be decided by stylesheet order. */\n/* The icon box takes the tone as its ground and `ink` for whatever is in\n it. The slot is the app's, so the kit cannot know whether it holds a\n decorative glyph or a letter somebody has to read — and a role written on\n a wash of itself is unreadable either way. The ring and the soft panel\n still carry the tone. */\nconst TONE = {\n neutral: {\n ring: '',\n soft: 'bg-muted text-ink-soft',\n icon: 'bg-primary/10 text-ink',\n },\n warm: {\n ring: '[--surface-border-color:color-mix(in_oklab,var(--color-warning)_40%,transparent)]',\n soft: 'bg-warning/15 text-ink',\n icon: 'bg-warning/15 text-ink',\n },\n cool: {\n ring: '[--surface-border-color:color-mix(in_oklab,var(--color-accent)_38%,transparent)]',\n soft: 'bg-accent/12 text-ink',\n icon: 'bg-accent/12 text-ink',\n },\n} as const\n\nconst palette = computed(() => TONE[tone])\n</script>\n\n<template>\n <article\n class=\"surface rounded-card ease-standard relative flex h-full flex-col p-7 transition-[border-color,box-shadow,transform] duration-(--duration-slower) hover:[--surface-border-color:color-mix(in_oklab,var(--color-primary)_60%,transparent)] hover:[--surface-shadow:var(--shadow-raised)] sm:p-8\"\n :class=\"[\n palette.ring,\n recommended ? '[--surface-shadow:var(--shadow-raised)]' : 'hover:-translate-y-0.5',\n ]\"\n >\n <!-- On the edge rather than inside, so it cannot be mistaken for one of\n the plan's own features. -->\n <span\n v-if=\"badge && recommended\"\n class=\"bg-primary rounded-cell text-on-primary absolute -top-3 left-7 px-3 py-1 text-[0.7rem] font-semibold\"\n >\n {{ badge }}\n </span>\n\n <div class=\"flex items-start justify-between gap-4\">\n <span\n v-if=\"$slots.icon\"\n class=\"rounded-card grid size-11 place-items-center text-xl\"\n :class=\"palette.icon\"\n >\n <slot name=\"icon\" />\n </span>\n\n <span\n v-if=\"chip\"\n class=\"rounded-cell ml-auto px-2.5 py-1 text-[0.7rem] font-medium\"\n :class=\"palette.soft\"\n >\n {{ chip }}\n </span>\n </div>\n\n <h3 class=\"text-ink mt-5 text-lg font-semibold\">{{ name }}</h3>\n <p v-if=\"lead\" class=\"text-ink-soft mt-1.5 text-sm leading-relaxed\">{{ lead }}</p>\n\n <p class=\"mt-6 flex items-baseline gap-1.5\">\n <span class=\"text-ink text-3xl font-semibold tracking-tight tabular-nums\">{{ price }}</span>\n <span v-if=\"period\" class=\"text-ink-soft text-sm\">{{ period }}</span>\n </p>\n <p v-if=\"note\" class=\"text-ink-soft mt-1 text-xs\">{{ note }}</p>\n\n <ul class=\"mt-7 flex-1 space-y-3\">\n <li v-for=\"feature in features\" :key=\"feature\" class=\"flex gap-3 text-sm\">\n <!-- The marker is a slot because a pricing table often uses it to say\n something the tone cannot: on the tier you already have, these are\n things you hold rather than things you would get. A consumer that\n had drawn that distinction should not have to give it up to reach\n for this component. -->\n <span v-if=\"$slots.bullet\" class=\"mt-[0.45rem] shrink-0\"><slot name=\"bullet\" /></span>\n <span\n v-else\n class=\"bg-primary/45 mt-[0.45rem] size-1.5 shrink-0 rounded-full\"\n aria-hidden=\"true\"\n />\n <span class=\"text-ink-soft leading-relaxed\">{{ feature }}</span>\n </li>\n </ul>\n\n <div v-if=\"$slots.action\" class=\"mt-8\"><slot name=\"action\" /></div>\n </article>\n</template>\n","<script setup lang=\"ts\">\n/**\n * A small coloured dot, optionally labelled.\n *\n * Takes the colour as a class rather than a category, so an app can key it off\n * whatever its own domain calls a category — habit kinds, expense types,\n * priorities — without this component knowing about any of them.\n */\nconst { fill, label = '' } = defineProps<{\n /** Background utility for the dot, e.g. `bg-positive`. */\n fill: string\n /** Optional text after the dot. Omit for a bare marker. */\n label?: string | undefined\n}>()\n</script>\n\n<template>\n <span class=\"inline-flex items-center gap-1.5\">\n <span class=\"size-2 rounded-full\" :class=\"fill\" />\n <span v-if=\"label\" class=\"text-ink-soft text-xs font-medium\">{{ label }}</span>\n </span>\n</template>\n","<script setup lang=\"ts\">\n/**\n * A small coloured dot, optionally labelled.\n *\n * Takes the colour as a class rather than a category, so an app can key it off\n * whatever its own domain calls a category — habit kinds, expense types,\n * priorities — without this component knowing about any of them.\n */\nconst { fill, label = '' } = defineProps<{\n /** Background utility for the dot, e.g. `bg-positive`. */\n fill: string\n /** Optional text after the dot. Omit for a bare marker. */\n label?: string | undefined\n}>()\n</script>\n\n<template>\n <span class=\"inline-flex items-center gap-1.5\">\n <span class=\"size-2 rounded-full\" :class=\"fill\" />\n <span v-if=\"label\" class=\"text-ink-soft text-xs font-medium\">{{ label }}</span>\n </span>\n</template>\n","<script setup lang=\"ts\">\nimport ToneDot from './ToneDot.vue'\n\n/** The three classes a category needs to colour a heading. */\nexport interface Tone {\n /** Solid background for the dot, e.g. `bg-positive`. */\n fill: string\n /** Tinted surface for the pill, e.g. `bg-positive/5 border-positive/25`. */\n card: string\n /** Foreground that pairs with the surface, e.g. `text-positive`. */\n text: string\n}\n\n/**\n * A pill heading for a group of things.\n *\n * The tone arrives as three class strings rather than a category name: Tailwind\n * reads source files as plain text, so a class assembled at runtime never\n * reaches the stylesheet — the app has to write them out, and it is the app\n * that knows its own categories anyway.\n */\nconst {\n tone,\n label,\n count = 0,\n} = defineProps<{\n /**\n * The colour classes for the dot and the label, as written-out class names.\n * `Tone` is a pair rather than a role token because the categories here are\n * the app's own, and Tailwind reads source as plain text: a class assembled\n * at runtime never reaches the stylesheet.\n */\n tone: Tone\n label: string\n /** Hidden when zero, so an empty group's heading stays quiet. */\n count?: number | undefined\n}>()\n</script>\n\n<template>\n <h2\n class=\"flex w-fit items-center gap-2 self-start rounded-full border px-3 py-1\"\n :class=\"tone.card\"\n >\n <ToneDot :fill=\"tone.fill\" />\n <span class=\"text-xs font-semibold tracking-wide uppercase\" :class=\"tone.text\">\n {{ label }}\n </span>\n <span v-if=\"count > 0\" class=\"text-ink-soft text-xs tabular-nums\">{{ count }}</span>\n </h2>\n</template>\n","<script setup lang=\"ts\">\nimport ToneDot from './ToneDot.vue'\n\n/** The three classes a category needs to colour a heading. */\nexport interface Tone {\n /** Solid background for the dot, e.g. `bg-positive`. */\n fill: string\n /** Tinted surface for the pill, e.g. `bg-positive/5 border-positive/25`. */\n card: string\n /** Foreground that pairs with the surface, e.g. `text-positive`. */\n text: string\n}\n\n/**\n * A pill heading for a group of things.\n *\n * The tone arrives as three class strings rather than a category name: Tailwind\n * reads source files as plain text, so a class assembled at runtime never\n * reaches the stylesheet — the app has to write them out, and it is the app\n * that knows its own categories anyway.\n */\nconst {\n tone,\n label,\n count = 0,\n} = defineProps<{\n /**\n * The colour classes for the dot and the label, as written-out class names.\n * `Tone` is a pair rather than a role token because the categories here are\n * the app's own, and Tailwind reads source as plain text: a class assembled\n * at runtime never reaches the stylesheet.\n */\n tone: Tone\n label: string\n /** Hidden when zero, so an empty group's heading stays quiet. */\n count?: number | undefined\n}>()\n</script>\n\n<template>\n <h2\n class=\"flex w-fit items-center gap-2 self-start rounded-full border px-3 py-1\"\n :class=\"tone.card\"\n >\n <ToneDot :fill=\"tone.fill\" />\n <span class=\"text-xs font-semibold tracking-wide uppercase\" :class=\"tone.text\">\n {{ label }}\n </span>\n <span v-if=\"count > 0\" class=\"text-ink-soft text-xs tabular-nums\">{{ count }}</span>\n </h2>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { useId } from 'vue'\n\n/**\n * A row of mutually exclusive choices.\n *\n * Radio inputs rather than buttons: it is a single choice out of a small set,\n * so arrow-key navigation and the \"one of N selected\" announcement come free.\n */\nconst { options } = defineProps<{\n options: readonly { value: T; label: string }[]\n}>()\n\nconst model = defineModel<T>({ required: true })\n\nconst name = useId()\n</script>\n\n<template>\n <div class=\"bg-muted rounded-card flex w-full gap-1 p-1\">\n <label v-for=\"option in options\" :key=\"String(option.value)\" class=\"flex-1 cursor-pointer\">\n <input v-model=\"model\" type=\"radio\" :value=\"option.value\" :name=\"name\" class=\"peer sr-only\" />\n <span\n class=\"peer-focus-visible:outline-primary rounded-control flex h-10 items-center justify-center px-2 text-sm font-medium transition-colors select-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2\"\n :class=\"\n model === option.value ? 'bg-surface text-ink shadow-(--shadow-control)' : 'text-ink-soft'\n \"\n >\n {{ option.label }}\n </span>\n </label>\n </div>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { useId } from 'vue'\n\n/**\n * A row of mutually exclusive choices.\n *\n * Radio inputs rather than buttons: it is a single choice out of a small set,\n * so arrow-key navigation and the \"one of N selected\" announcement come free.\n */\nconst { options } = defineProps<{\n options: readonly { value: T; label: string }[]\n}>()\n\nconst model = defineModel<T>({ required: true })\n\nconst name = useId()\n</script>\n\n<template>\n <div class=\"bg-muted rounded-card flex w-full gap-1 p-1\">\n <label v-for=\"option in options\" :key=\"String(option.value)\" class=\"flex-1 cursor-pointer\">\n <input v-model=\"model\" type=\"radio\" :value=\"option.value\" :name=\"name\" class=\"peer sr-only\" />\n <span\n class=\"peer-focus-visible:outline-primary rounded-control flex h-10 items-center justify-center px-2 text-sm font-medium transition-colors select-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2\"\n :class=\"\n model === option.value ? 'bg-surface text-ink shadow-(--shadow-control)' : 'text-ink-soft'\n \"\n >\n {{ option.label }}\n </span>\n </label>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst {\n rows = 3,\n rowHeight = 'h-14',\n label = 'Loading…',\n} = defineProps<{\n rows?: number | undefined\n /**\n * How tall each row is, as either a utility class (`h-20`) or a CSS length\n * (`5rem`, `72px`, `var(--row)`).\n *\n * Both are accepted because the class-only version failed silently: a length\n * passed here landed in `class` as `5rem`, which is not a class, so the rows\n * had no height and the placeholder rendered as nothing at all. A loading\n * state that shows an empty page is worse than no loading state, because it\n * looks like the page is finished and empty.\n */\n rowHeight?: string | undefined\n label?: string | undefined\n}>()\n\n/** A length starts with a digit, a dot, or opens a CSS function. */\nconst isLength = computed(() => /^(?:[.\\d]|calc\\(|var\\(|clamp\\(|min\\(|max\\()/.test(rowHeight))\n</script>\n\n<template>\n <div role=\"status\" class=\"flex flex-col gap-1\">\n <span class=\"sr-only\">{{ label }}</span>\n\n <div\n v-for=\"row in rows\"\n :key=\"row\"\n class=\"bg-muted rounded-card animate-pulse\"\n :class=\"isLength ? undefined : rowHeight\"\n :style=\"isLength ? { height: rowHeight } : undefined\"\n aria-hidden=\"true\"\n />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst {\n rows = 3,\n rowHeight = 'h-14',\n label = 'Loading…',\n} = defineProps<{\n rows?: number | undefined\n /**\n * How tall each row is, as either a utility class (`h-20`) or a CSS length\n * (`5rem`, `72px`, `var(--row)`).\n *\n * Both are accepted because the class-only version failed silently: a length\n * passed here landed in `class` as `5rem`, which is not a class, so the rows\n * had no height and the placeholder rendered as nothing at all. A loading\n * state that shows an empty page is worse than no loading state, because it\n * looks like the page is finished and empty.\n */\n rowHeight?: string | undefined\n label?: string | undefined\n}>()\n\n/** A length starts with a digit, a dot, or opens a CSS function. */\nconst isLength = computed(() => /^(?:[.\\d]|calc\\(|var\\(|clamp\\(|min\\(|max\\()/.test(rowHeight))\n</script>\n\n<template>\n <div role=\"status\" class=\"flex flex-col gap-1\">\n <span class=\"sr-only\">{{ label }}</span>\n\n <div\n v-for=\"row in rows\"\n :key=\"row\"\n class=\"bg-muted rounded-card animate-pulse\"\n :class=\"isLength ? undefined : rowHeight\"\n :style=\"isLength ? { height: rowHeight } : undefined\"\n aria-hidden=\"true\"\n />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ArrowDown, ArrowRight, ArrowUp } from 'lucide-vue-next'\n\n/**\n * One number, with what it means and which way it is going.\n *\n * The trend is an arrow and a colour, and neither is allowed to be the whole\n * message: the direction is also in the arrow's shape, so it survives a reader\n * who cannot separate the kit's positive and negative hues. `null` is a real\n * state rather than a missing one — a figure with no comparison yet is not a\n * flat figure.\n */\nconst {\n value,\n label,\n trend = null,\n} = defineProps<{\n /**\n * Already formatted — \"₺1.240\", \"68%\", \"12 days\". A number would make this\n * component choose a currency, a locale and a number of decimals, which are\n * three product decisions it has no way to be right about.\n */\n value: string\n label: string\n trend?: 'up' | 'down' | 'flat' | null | undefined\n}>()\n\nconst TREND_ICON = { up: ArrowUp, down: ArrowDown, flat: ArrowRight } as const\n</script>\n\n<template>\n <div class=\"surface rounded-card flex flex-1 flex-col gap-0.5 p-3\">\n <div class=\"flex items-baseline gap-1\">\n <span class=\"text-ink text-xl font-semibold tabular-nums\">{{ value }}</span>\n <component :is=\"TREND_ICON[trend]\" v-if=\"trend\" class=\"text-ink-soft size-3\" />\n </div>\n <span class=\"text-ink-soft text-xs\">{{ label }}</span>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ArrowDown, ArrowRight, ArrowUp } from 'lucide-vue-next'\n\n/**\n * One number, with what it means and which way it is going.\n *\n * The trend is an arrow and a colour, and neither is allowed to be the whole\n * message: the direction is also in the arrow's shape, so it survives a reader\n * who cannot separate the kit's positive and negative hues. `null` is a real\n * state rather than a missing one — a figure with no comparison yet is not a\n * flat figure.\n */\nconst {\n value,\n label,\n trend = null,\n} = defineProps<{\n /**\n * Already formatted — \"₺1.240\", \"68%\", \"12 days\". A number would make this\n * component choose a currency, a locale and a number of decimals, which are\n * three product decisions it has no way to be right about.\n */\n value: string\n label: string\n trend?: 'up' | 'down' | 'flat' | null | undefined\n}>()\n\nconst TREND_ICON = { up: ArrowUp, down: ArrowDown, flat: ArrowRight } as const\n</script>\n\n<template>\n <div class=\"surface rounded-card flex flex-1 flex-col gap-0.5 p-3\">\n <div class=\"flex items-baseline gap-1\">\n <span class=\"text-ink text-xl font-semibold tabular-nums\">{{ value }}</span>\n <component :is=\"TREND_ICON[trend]\" v-if=\"trend\" class=\"text-ink-soft size-3\" />\n </div>\n <span class=\"text-ink-soft text-xs\">{{ label }}</span>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { CheckCircle2, Info, TriangleAlert, X, XCircle } from 'lucide-vue-next'\n\nimport BaseButton from './BaseButton.vue'\nimport { useToast } from '../composables/use-toast'\nimport type { ToastTone } from '../composables/use-toast'\n\n/**\n * Where the toasts land. One of these, at the app root.\n *\n * @example\n * ```vue\n * <!-- App.vue -->\n * <ToastHost :close-label=\"$t('common.close')\" />\n * ```\n */\nconst { closeLabel, bottom = false } = defineProps<{\n /**\n * The accessible name of each dismiss button. Required, because the button\n * is an X and an X has no name — and the kit does not know the language.\n */\n closeLabel: string\n /**\n * Stack from the bottom instead of the top. For a phone shell, where the top\n * is a status bar and a header and the thumb is nowhere near it.\n */\n bottom?: boolean | undefined\n}>()\n\nconst { toasts, dismiss, pause, resume } = useToast()\n\n/* Dismissed first, so a handler that throws cannot leave the button on\n screen to be pressed twice. */\nfunction runAction(id: number, onClick: () => void) {\n dismiss(id)\n onClick()\n}\n\n/**\n * Teleport needs a `body`, and a server has none.\n *\n * Rendering nothing until mounted is also correct rather than merely safe: a\n * prerendered page has no toasts in it, so there is nothing to hydrate and\n * nothing to flash.\n */\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n\nconst ICON = {\n info: Info,\n success: CheckCircle2,\n warning: TriangleAlert,\n danger: XCircle,\n} as const satisfies Record<ToastTone, unknown>\n\n/* Roles, never colours. The app repaints these by redefining the token. */\nconst TONE_CLASS = {\n info: 'text-primary',\n success: 'text-positive',\n warning: 'text-warning',\n danger: 'text-negative',\n} as const satisfies Record<ToastTone, string>\n</script>\n\n<template>\n <Teleport v-if=\"mounted\" to=\"body\">\n <!--\n `polite`, not `assertive`, and it is a considered choice: a toast reports\n something that already happened, and interrupting a screen reader\n mid-sentence to say \"saved\" is ruder than waiting. A failure the reader\n must act on belongs in a `BaseAlert` beside the thing that failed.\n\n `role=\"status\"` rather than `role=\"log\"` so the whole region is read when\n it changes, not only the appended line.\n -->\n <div\n class=\"pointer-events-none fixed inset-x-0 z-[100] flex flex-col items-center gap-2 px-4\"\n :class=\"bottom ? 'bottom-0 pb-[max(1rem,env(safe-area-inset-bottom))]' : 'top-0 pt-4'\"\n role=\"status\"\n aria-live=\"polite\"\n >\n <TransitionGroup name=\"toast\">\n <div\n v-for=\"toast in toasts\"\n :key=\"toast.id\"\n class=\"surface-raised text-ink rounded-card pointer-events-auto flex w-full max-w-sm items-start gap-3 p-3\"\n @mouseenter=\"pause(toast.id)\"\n @mouseleave=\"resume(toast.id)\"\n @focusin=\"pause(toast.id)\"\n @focusout=\"resume(toast.id)\"\n >\n <component\n :is=\"ICON[toast.tone]\"\n class=\"mt-0.5 size-5 shrink-0\"\n :class=\"TONE_CLASS[toast.tone]\"\n aria-hidden=\"true\"\n />\n\n <p class=\"flex-1 text-sm leading-snug\">{{ toast.message }}</p>\n\n <BaseButton\n v-if=\"toast.action\"\n variant=\"link\"\n size=\"sm\"\n class=\"-my-1 shrink-0\"\n @click=\"runAction(toast.id, toast.action.onClick)\"\n >\n {{ toast.action.label }}\n </BaseButton>\n\n <BaseButton\n variant=\"quiet\"\n icon\n pill\n size=\"sm\"\n class=\"-my-1 shrink-0\"\n :aria-label=\"closeLabel\"\n @click=\"dismiss(toast.id)\"\n >\n <X class=\"size-4\" />\n </BaseButton>\n </div>\n </TransitionGroup>\n </div>\n </Teleport>\n</template>\n\n<style scoped>\n/* Movement is small and downward from the top, upward from the bottom — the\n direction it came from either way. */\n.toast-enter-active,\n.toast-leave-active {\n transition:\n opacity var(--duration-base) ease-out,\n transform var(--duration-base) ease-out;\n}\n\n.toast-enter-from,\n.toast-leave-to {\n opacity: 0;\n transform: translateY(-0.5rem);\n}\n\n/* Leaving is taken out of flow so the ones below close the gap smoothly\n instead of jumping when it unmounts. */\n.toast-leave-active {\n position: absolute;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .toast-enter-active,\n .toast-leave-active {\n transition-duration: 1ms;\n }\n\n .toast-enter-from,\n .toast-leave-to {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { CheckCircle2, Info, TriangleAlert, X, XCircle } from 'lucide-vue-next'\n\nimport BaseButton from './BaseButton.vue'\nimport { useToast } from '../composables/use-toast'\nimport type { ToastTone } from '../composables/use-toast'\n\n/**\n * Where the toasts land. One of these, at the app root.\n *\n * @example\n * ```vue\n * <!-- App.vue -->\n * <ToastHost :close-label=\"$t('common.close')\" />\n * ```\n */\nconst { closeLabel, bottom = false } = defineProps<{\n /**\n * The accessible name of each dismiss button. Required, because the button\n * is an X and an X has no name — and the kit does not know the language.\n */\n closeLabel: string\n /**\n * Stack from the bottom instead of the top. For a phone shell, where the top\n * is a status bar and a header and the thumb is nowhere near it.\n */\n bottom?: boolean | undefined\n}>()\n\nconst { toasts, dismiss, pause, resume } = useToast()\n\n/* Dismissed first, so a handler that throws cannot leave the button on\n screen to be pressed twice. */\nfunction runAction(id: number, onClick: () => void) {\n dismiss(id)\n onClick()\n}\n\n/**\n * Teleport needs a `body`, and a server has none.\n *\n * Rendering nothing until mounted is also correct rather than merely safe: a\n * prerendered page has no toasts in it, so there is nothing to hydrate and\n * nothing to flash.\n */\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n\nconst ICON = {\n info: Info,\n success: CheckCircle2,\n warning: TriangleAlert,\n danger: XCircle,\n} as const satisfies Record<ToastTone, unknown>\n\n/* Roles, never colours. The app repaints these by redefining the token. */\nconst TONE_CLASS = {\n info: 'text-primary',\n success: 'text-positive',\n warning: 'text-warning',\n danger: 'text-negative',\n} as const satisfies Record<ToastTone, string>\n</script>\n\n<template>\n <Teleport v-if=\"mounted\" to=\"body\">\n <!--\n `polite`, not `assertive`, and it is a considered choice: a toast reports\n something that already happened, and interrupting a screen reader\n mid-sentence to say \"saved\" is ruder than waiting. A failure the reader\n must act on belongs in a `BaseAlert` beside the thing that failed.\n\n `role=\"status\"` rather than `role=\"log\"` so the whole region is read when\n it changes, not only the appended line.\n -->\n <div\n class=\"pointer-events-none fixed inset-x-0 z-[100] flex flex-col items-center gap-2 px-4\"\n :class=\"bottom ? 'bottom-0 pb-[max(1rem,env(safe-area-inset-bottom))]' : 'top-0 pt-4'\"\n role=\"status\"\n aria-live=\"polite\"\n >\n <TransitionGroup name=\"toast\">\n <div\n v-for=\"toast in toasts\"\n :key=\"toast.id\"\n class=\"surface-raised text-ink rounded-card pointer-events-auto flex w-full max-w-sm items-start gap-3 p-3\"\n @mouseenter=\"pause(toast.id)\"\n @mouseleave=\"resume(toast.id)\"\n @focusin=\"pause(toast.id)\"\n @focusout=\"resume(toast.id)\"\n >\n <component\n :is=\"ICON[toast.tone]\"\n class=\"mt-0.5 size-5 shrink-0\"\n :class=\"TONE_CLASS[toast.tone]\"\n aria-hidden=\"true\"\n />\n\n <p class=\"flex-1 text-sm leading-snug\">{{ toast.message }}</p>\n\n <BaseButton\n v-if=\"toast.action\"\n variant=\"link\"\n size=\"sm\"\n class=\"-my-1 shrink-0\"\n @click=\"runAction(toast.id, toast.action.onClick)\"\n >\n {{ toast.action.label }}\n </BaseButton>\n\n <BaseButton\n variant=\"quiet\"\n icon\n pill\n size=\"sm\"\n class=\"-my-1 shrink-0\"\n :aria-label=\"closeLabel\"\n @click=\"dismiss(toast.id)\"\n >\n <X class=\"size-4\" />\n </BaseButton>\n </div>\n </TransitionGroup>\n </div>\n </Teleport>\n</template>\n\n<style scoped>\n/* Movement is small and downward from the top, upward from the bottom — the\n direction it came from either way. */\n.toast-enter-active,\n.toast-leave-active {\n transition:\n opacity var(--duration-base) ease-out,\n transform var(--duration-base) ease-out;\n}\n\n.toast-enter-from,\n.toast-leave-to {\n opacity: 0;\n transform: translateY(-0.5rem);\n}\n\n/* Leaving is taken out of flow so the ones below close the gap smoothly\n instead of jumping when it unmounts. */\n.toast-leave-active {\n position: absolute;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .toast-enter-active,\n .toast-leave-active {\n transition-duration: 1ms;\n }\n\n .toast-enter-from,\n .toast-leave-to {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"L extends string\">\n/**\n * A flat language switcher for screens with no Settings behind them.\n *\n * The list and the labels are props: only the app knows which languages it\n * ships, and endonyms — each language written in itself — are what make the\n * right option legible to someone who cannot read the current interface.\n */\nconst {\n locales,\n labels,\n label = '',\n} = defineProps<{\n locales: readonly L[]\n /** Endonyms, e.g. `{ en: 'English', tr: 'Türkçe' }`. */\n labels: Record<L, string>\n /** Accessible name for the group. */\n label?: string | undefined\n}>()\n\n/**\n * Two-way bound rather than taking the runtime's ref as a prop: props are not\n * unwrapped in a template and cannot be assigned to, so the ref would compare\n * against itself and the click handler would not compile.\n */\nconst preference = defineModel<'system' | L>({ required: true })\n</script>\n\n<template>\n <nav class=\"flex flex-wrap items-center justify-center gap-1\" :aria-label=\"label || undefined\">\n <button\n v-for=\"locale in locales\"\n :key=\"locale\"\n type=\"button\"\n :lang=\"locale\"\n class=\"focus-ring rounded-full px-2.5 py-1.5 text-xs transition-colors\"\n :class=\"\n preference === locale ? 'bg-muted text-ink font-semibold' : 'text-ink-soft hover:text-ink'\n \"\n :aria-pressed=\"preference === locale\"\n @click=\"preference = locale\"\n >\n {{ labels[locale] }}\n </button>\n </nav>\n</template>\n","<script setup lang=\"ts\" generic=\"L extends string\">\n/**\n * A flat language switcher for screens with no Settings behind them.\n *\n * The list and the labels are props: only the app knows which languages it\n * ships, and endonyms — each language written in itself — are what make the\n * right option legible to someone who cannot read the current interface.\n */\nconst {\n locales,\n labels,\n label = '',\n} = defineProps<{\n locales: readonly L[]\n /** Endonyms, e.g. `{ en: 'English', tr: 'Türkçe' }`. */\n labels: Record<L, string>\n /** Accessible name for the group. */\n label?: string | undefined\n}>()\n\n/**\n * Two-way bound rather than taking the runtime's ref as a prop: props are not\n * unwrapped in a template and cannot be assigned to, so the ref would compare\n * against itself and the click handler would not compile.\n */\nconst preference = defineModel<'system' | L>({ required: true })\n</script>\n\n<template>\n <nav class=\"flex flex-wrap items-center justify-center gap-1\" :aria-label=\"label || undefined\">\n <button\n v-for=\"locale in locales\"\n :key=\"locale\"\n type=\"button\"\n :lang=\"locale\"\n class=\"focus-ring rounded-full px-2.5 py-1.5 text-xs transition-colors\"\n :class=\"\n preference === locale ? 'bg-muted text-ink font-semibold' : 'text-ink-soft hover:text-ink'\n \"\n :aria-pressed=\"preference === locale\"\n @click=\"preference = locale\"\n >\n {{ labels[locale] }}\n </button>\n </nav>\n</template>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { RouterLink } from 'vue-router'\nimport type { Component } from 'vue'\n\nimport { tapFeedback } from '../utils/haptics'\n\nexport interface TabItem<K extends string> {\n /** Identity, compared against `active`. */\n key: K\n /** Router destination. */\n to: string\n /** Text under the icon. Already translated. */\n label: string\n icon: Component\n}\n\n/**\n * The floating bottom bar.\n *\n * Items and the active key are props: the package has no opinion about how an\n * app names its screens, and reading `route.meta` here would force one.\n */\nconst {\n items,\n active,\n label = '',\n} = defineProps<{\n items: readonly TabItem<K>[]\n /** Which item is current. Usually from `route.meta`. */\n active?: K | undefined\n /** Accessible name for the navigation landmark. */\n label?: string | undefined\n}>()\n</script>\n\n<template>\n <header class=\"tab-bar\">\n <nav class=\"tab-bar-inner\" :aria-label=\"label || undefined\">\n <RouterLink\n v-for=\"item in items\"\n :key=\"item.key\"\n :to=\"item.to\"\n class=\"tab-link\"\n :class=\"{ 'is-active': item.key === active }\"\n :aria-current=\"item.key === active ? 'page' : undefined\"\n @click=\"tapFeedback()\"\n >\n <span class=\"tab-icon-slot\">\n <component :is=\"item.icon\" class=\"tab-icon\" />\n </span>\n <span class=\"tab-label\">{{ item.label }}</span>\n </RouterLink>\n </nav>\n </header>\n</template>\n\n<style scoped>\n@reference \"../styles/_reference.css\";\n\n/* absolute, not fixed: the bar hangs inside the app shell. Fixed would pin it\n to the browser window, which on a desktop is nowhere near the app. */\n.tab-bar {\n @apply absolute left-1/2 z-40 w-full max-w-[360px] -translate-x-1/2 px-4;\n bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.tab-bar-inner {\n /* A raised surface that is always a little translucent: it floats over the\n content it navigates, and a solid bar would read as a wall at the bottom of\n the page. The material decides how much — glass makes it far more so. */\n @apply surface-raised flex items-center justify-between gap-1 p-1.5;\n background-color: color-mix(\n in oklab,\n var(--color-surface) min(var(--surface-opacity), 88%),\n transparent\n );\n backdrop-filter: var(--surface-backdrop, blur(12px));\n -webkit-backdrop-filter: var(--surface-backdrop, blur(12px));\n border-radius: var(--radius-shell);\n}\n\n.tab-link {\n @apply text-ink-soft focus-ring flex min-h-[52px] flex-1 cursor-pointer flex-col items-center justify-center gap-1 py-1.5;\n border-radius: calc(var(--radius-shell) - 6px);\n /* Only the icon reacts to a press. Scaling the whole link drags the label and\n the pill with it, which reads as the bar wobbling. */\n transition: color var(--duration-base) ease;\n}\n\n.tab-link:hover {\n @apply text-ink;\n}\n\n/* The pill sits behind the icon rather than the link, so the active tab grows a\n marker instead of the row changing shape. */\n.tab-icon-slot {\n @apply flex h-7 w-12 items-center justify-center rounded-full transition-all duration-(--duration-base) ease-out;\n}\n\n.tab-link:active .tab-icon-slot {\n transform: scale(0.88);\n}\n\n.is-active {\n @apply text-primary;\n}\n\n.is-active .tab-icon-slot {\n @apply bg-muted;\n}\n\n.tab-icon {\n @apply size-[18px] stroke-2 transition-transform duration-(--duration-base);\n}\n\n.is-active .tab-icon {\n @apply scale-110 stroke-[2.5px];\n}\n\n.tab-label {\n @apply text-[10px] leading-none font-medium;\n}\n\n.is-active .tab-label {\n @apply font-semibold;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .tab-icon-slot,\n .tab-icon {\n transition: none;\n }\n .tab-link:active .tab-icon-slot {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { RouterLink } from 'vue-router'\nimport type { Component } from 'vue'\n\nimport { tapFeedback } from '../utils/haptics'\n\nexport interface TabItem<K extends string> {\n /** Identity, compared against `active`. */\n key: K\n /** Router destination. */\n to: string\n /** Text under the icon. Already translated. */\n label: string\n icon: Component\n}\n\n/**\n * The floating bottom bar.\n *\n * Items and the active key are props: the package has no opinion about how an\n * app names its screens, and reading `route.meta` here would force one.\n */\nconst {\n items,\n active,\n label = '',\n} = defineProps<{\n items: readonly TabItem<K>[]\n /** Which item is current. Usually from `route.meta`. */\n active?: K | undefined\n /** Accessible name for the navigation landmark. */\n label?: string | undefined\n}>()\n</script>\n\n<template>\n <header class=\"tab-bar\">\n <nav class=\"tab-bar-inner\" :aria-label=\"label || undefined\">\n <RouterLink\n v-for=\"item in items\"\n :key=\"item.key\"\n :to=\"item.to\"\n class=\"tab-link\"\n :class=\"{ 'is-active': item.key === active }\"\n :aria-current=\"item.key === active ? 'page' : undefined\"\n @click=\"tapFeedback()\"\n >\n <span class=\"tab-icon-slot\">\n <component :is=\"item.icon\" class=\"tab-icon\" />\n </span>\n <span class=\"tab-label\">{{ item.label }}</span>\n </RouterLink>\n </nav>\n </header>\n</template>\n\n<style scoped>\n@reference \"../styles/_reference.css\";\n\n/* absolute, not fixed: the bar hangs inside the app shell. Fixed would pin it\n to the browser window, which on a desktop is nowhere near the app. */\n.tab-bar {\n @apply absolute left-1/2 z-40 w-full max-w-[360px] -translate-x-1/2 px-4;\n bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.tab-bar-inner {\n /* A raised surface that is always a little translucent: it floats over the\n content it navigates, and a solid bar would read as a wall at the bottom of\n the page. The material decides how much — glass makes it far more so. */\n @apply surface-raised flex items-center justify-between gap-1 p-1.5;\n background-color: color-mix(\n in oklab,\n var(--color-surface) min(var(--surface-opacity), 88%),\n transparent\n );\n backdrop-filter: var(--surface-backdrop, blur(12px));\n -webkit-backdrop-filter: var(--surface-backdrop, blur(12px));\n border-radius: var(--radius-shell);\n}\n\n.tab-link {\n @apply text-ink-soft focus-ring flex min-h-[52px] flex-1 cursor-pointer flex-col items-center justify-center gap-1 py-1.5;\n border-radius: calc(var(--radius-shell) - 6px);\n /* Only the icon reacts to a press. Scaling the whole link drags the label and\n the pill with it, which reads as the bar wobbling. */\n transition: color var(--duration-base) ease;\n}\n\n.tab-link:hover {\n @apply text-ink;\n}\n\n/* The pill sits behind the icon rather than the link, so the active tab grows a\n marker instead of the row changing shape. */\n.tab-icon-slot {\n @apply flex h-7 w-12 items-center justify-center rounded-full transition-all duration-(--duration-base) ease-out;\n}\n\n.tab-link:active .tab-icon-slot {\n transform: scale(0.88);\n}\n\n.is-active {\n @apply text-primary;\n}\n\n.is-active .tab-icon-slot {\n @apply bg-muted;\n}\n\n.tab-icon {\n @apply size-[18px] stroke-2 transition-transform duration-(--duration-base);\n}\n\n.is-active .tab-icon {\n @apply scale-110 stroke-[2.5px];\n}\n\n.tab-label {\n @apply text-[10px] leading-none font-medium;\n}\n\n.is-active .tab-label {\n @apply font-semibold;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .tab-icon-slot,\n .tab-icon {\n transition: none;\n }\n .tab-link:active .tab-icon-slot {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue'\n\nimport ScrollArea from './ScrollArea.vue'\nimport { fromDateKey } from '../utils/date'\nimport { elementDirection, horizontalStep } from '../utils/direction'\nimport type { WeekStart } from '../utils/date'\nimport { formatDate } from '../utils/format'\n\n/**\n * A year of days, as a grid you can read at a glance.\n *\n * ## It is a table, and that is not a detail\n *\n * Weekdays are the rows and weeks are the columns, so the markup is a\n * `<table>` and the visual layout falls out of it. The obvious way — one\n * CSS grid flowing column by column — puts the DOM in a different order\n * from the picture, and anything laid over that order afterwards\n * (`role=\"grid\"`, arrow keys, a reader's own table navigation) then\n * describes a shape that is not on screen.\n *\n * ## One stop, not three hundred and sixty-five\n *\n * Every day is reachable, and the whole grid is a single stop in the tab\n * order: the arrows move between days, Home and End go to the ends of a\n * week, and Enter chooses. A grid of focusable cells is the other way this\n * is written, and it costs somebody using a keyboard a year of presses to\n * get past a picture.\n *\n * ## The colours are yours\n *\n * `levelFor` returns a class, the same contract as `ToneDot`'s `fill` and\n * `BaseTimeline`'s: the kit does not know whether four of something is a\n * lot, or which hue your product uses for \"done\". `dayLabel` is the same\n * for words — the kit has no language, and a date reads differently in\n * every one.\n */\nconst {\n days,\n label,\n levelFor,\n dayLabel,\n isSelectable = undefined,\n weekStartsOn = 1,\n startAtEnd = true,\n} = defineProps<{\n /** The days to draw, as `YYYY-MM-DD`, oldest first. */\n days: readonly string[]\n /** Names the grid, e.g. \"Your year\". Already translated. */\n label: string\n /** A class for one day's square, e.g. `bg-positive/40`. */\n levelFor: (key: string) => string\n /** What a reader hears on a day: the date, and what happened. Translated. */\n dayLabel: (key: string) => string\n /** Which days lead somewhere. Unset, the grid is a picture and nothing else. */\n isSelectable?: ((key: string) => boolean) | undefined\n /** `1` Monday, `0` Sunday. */\n weekStartsOn?: WeekStart | undefined\n /** Open on the most recent weeks — a year otherwise starts far off-screen. */\n startAtEnd?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ select: [key: string] }>()\n\nconst scroller = useTemplateRef<InstanceType<typeof ScrollArea>>('scroller')\nconst grid = useTemplateRef<HTMLElement>('grid')\n\n/** Where the keyboard is: an index into `cells`, not a date. */\nconst focused = ref(0)\n\n/*\n * The days, padded out to whole weeks.\n *\n * A week is seven slots whatever the range starts on, so the first column\n * is short at the top and the last is short at the bottom. Those slots are\n * `null` rather than missing, because a row with fewer cells than the one\n * above it stops being a table.\n */\nconst weeks = computed<(string | null)[][]>(() => {\n if (days.length === 0) return []\n\n const first = days[0]!\n const lead = (fromDateKey(first).getDay() - weekStartsOn + 7) % 7\n const slots: (string | null)[] = [...Array.from({ length: lead }, () => null), ...days]\n\n while (slots.length % 7 !== 0) slots.push(null)\n\n return Array.from({ length: slots.length / 7 }, (_, week) => slots.slice(week * 7, week * 7 + 7))\n})\n\n/** The weekday names, in the app's locale, starting on the chosen day. */\nconst weekdays = computed(() =>\n Array.from({ length: 7 }, (_, row) => {\n // 2024-01-07 was a Sunday, so this walks a real week in the right order.\n const date = new Date(2024, 0, 7)\n date.setDate(date.getDate() + ((row + weekStartsOn) % 7))\n\n return formatDate(date, { weekday: 'long' })\n }),\n)\n\n/**\n * A month heading per run of weeks.\n *\n * A week is counted under the month its first real day falls in, so a week\n * split across two months does not give the later one a heading of its own\n * one column wide.\n */\nconst months = computed(() => {\n const runs: { key: string; label: string; span: number }[] = []\n\n for (const week of weeks.value) {\n const day = week.find((one): one is string => one !== null)\n if (!day) continue\n\n const key = day.slice(0, 7)\n const last = runs.at(-1)\n\n if (last?.key === key) last.span += 1\n else runs.push({ key, label: formatDate(fromDateKey(day), { month: 'short' }), span: 1 })\n }\n\n return runs\n})\n\n/** Every real day, in reading order, which is what the arrows walk. */\nconst cells = computed(() =>\n weeks.value.flatMap((week, column) =>\n week.flatMap((day, row) => (day === null ? [] : [{ day, column, row }])),\n ),\n)\n\n/* `data-day` through `v-bind` rather than as an attribute of its own:\n `strictTemplates` knows the real attributes of a `<td>` and rejects a\n `data-*` written directly, while an object of them is fine. It is the\n click delegation below that needs it on the element at all. */\nconst dayAttrs = (day: string) => ({ 'data-day': day })\n\nconst indexOf = (day: string) => cells.value.findIndex((cell) => cell.day === day)\n\nfunction moveTo(index: number) {\n const next = Math.max(0, Math.min(cells.value.length - 1, index))\n focused.value = next\n\n void nextTick(() => {\n grid.value?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus()\n })\n}\n\n/** Steps a whole column, which is a week, in reading order. */\nfunction step(by: number) {\n const here = cells.value[focused.value]\n if (!here) return\n\n const wanted = { column: here.column + by, row: here.row }\n const found = cells.value.findIndex(\n (cell) => cell.column === wanted.column && cell.row === wanted.row,\n )\n\n // Falling off the end of a short first or last week is a no-op rather\n // than a jump to some other weekday.\n if (found !== -1) moveTo(found)\n}\n\nfunction choose(day: string) {\n if (isSelectable?.(day)) emit('select', day)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n const here = cells.value[focused.value]\n if (!here) return\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault()\n moveTo(focused.value - 1)\n break\n case 'ArrowDown':\n event.preventDefault()\n moveTo(focused.value + 1)\n break\n /* Weeks run the way the language does, so in Arabic the column to the\n left of this one is the following week. */\n case 'ArrowLeft':\n case 'ArrowRight':\n event.preventDefault()\n step(horizontalStep(event.key, event.currentTarget as Element))\n break\n case 'Home':\n event.preventDefault()\n moveTo(0)\n break\n case 'End':\n event.preventDefault()\n moveTo(cells.value.length - 1)\n break\n case 'Enter':\n case ' ':\n event.preventDefault()\n choose(here.day)\n break\n }\n}\n\n/*\n * One listener for the whole grid.\n *\n * There are three hundred and sixty-five of these on screen. A handler each\n * is three hundred and sixty-five closures for markup that is a hit target\n * rather than a control, so the click is caught once and the day read off\n * the cell it landed in.\n */\nfunction onClick(event: MouseEvent) {\n const cell = (event.target as HTMLElement).closest<HTMLElement>('[data-day]')\n const day = cell?.dataset.day\n if (!day) return\n\n focused.value = indexOf(day)\n choose(day)\n}\n\nonMounted(() => {\n if (!startAtEnd) return\n\n const element = scroller.value?.viewport\n if (!element) return\n\n /*\n * A right-to-left box counts `scrollLeft` down from zero, so its far end\n * is the most negative value it takes rather than the largest. Assigning\n * `scrollWidth` there clamps to zero, which is the *start* — the grid\n * would have opened on the oldest week, which is the one thing this prop\n * exists to avoid, in the one direction nobody tests.\n */\n const rtl = elementDirection(element) === 'rtl'\n element.scrollLeft = rtl ? -element.scrollWidth : element.scrollWidth\n})\n</script>\n\n<template>\n <ScrollArea ref=\"scroller\" axis=\"x\" scrollbar=\"hidden\" :label=\"label\" class=\"rk-activity\">\n <table\n ref=\"grid\"\n class=\"rk-activity-table\"\n :aria-label=\"label\"\n @keydown=\"onKeydown\"\n @click=\"onClick\"\n >\n <thead>\n <tr>\n <!-- The weekday column is a spacer here: the headings below name\n their own rows, and a heading for the headings says nothing. -->\n <td class=\"rk-activity-corner\"></td>\n <th v-for=\"month in months\" :key=\"month.key\" :colspan=\"month.span\" scope=\"colgroup\">\n {{ month.label }}\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr v-for=\"(weekday, row) in weekdays\" :key=\"weekday\">\n <th scope=\"row\" class=\"rk-activity-weekday\">\n <span class=\"sr-only\">{{ weekday }}</span>\n </th>\n\n <template v-for=\"(week, column) in weeks\" :key=\"column\">\n <td\n v-if=\"week[row]\"\n class=\"rk-activity-cell\"\n v-bind=\"dayAttrs(week[row]!)\"\n :tabindex=\"cells[focused]?.day === week[row] ? 0 : -1\"\n :aria-label=\"dayLabel(week[row]!)\"\n :class=\"[levelFor(week[row]!), { 'is-pickable': isSelectable?.(week[row]!) }]\"\n />\n <!-- The padding at either end of the range. Empty, and skipped\n by the arrows, but present: a row with fewer cells than the\n one above it is no longer a table. -->\n <td v-else class=\"rk-activity-cell is-blank\" aria-hidden=\"true\" />\n </template>\n </tr>\n </tbody>\n </table>\n </ScrollArea>\n</template>\n\n<style scoped>\n.rk-activity-table {\n border-collapse: separate;\n border-spacing: 2px;\n}\n\n.rk-activity-corner,\n.rk-activity-weekday {\n width: 0;\n padding: 0;\n}\n\n.rk-activity-table th {\n color: var(--color-ink-soft);\n font-size: 0.5625rem;\n font-weight: 500;\n line-height: 1;\n text-align: start;\n}\n\n.rk-activity-cell {\n width: 0.625rem;\n height: 0.625rem;\n padding: 0;\n border-radius: var(--radius-cell);\n background: var(--color-muted);\n}\n\n.rk-activity-cell.is-blank {\n background: transparent;\n}\n\n.rk-activity-cell.is-pickable {\n cursor: pointer;\n}\n\n.rk-activity-cell:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue'\n\nimport ScrollArea from './ScrollArea.vue'\nimport { fromDateKey } from '../utils/date'\nimport { elementDirection, horizontalStep } from '../utils/direction'\nimport type { WeekStart } from '../utils/date'\nimport { formatDate } from '../utils/format'\n\n/**\n * A year of days, as a grid you can read at a glance.\n *\n * ## It is a table, and that is not a detail\n *\n * Weekdays are the rows and weeks are the columns, so the markup is a\n * `<table>` and the visual layout falls out of it. The obvious way — one\n * CSS grid flowing column by column — puts the DOM in a different order\n * from the picture, and anything laid over that order afterwards\n * (`role=\"grid\"`, arrow keys, a reader's own table navigation) then\n * describes a shape that is not on screen.\n *\n * ## One stop, not three hundred and sixty-five\n *\n * Every day is reachable, and the whole grid is a single stop in the tab\n * order: the arrows move between days, Home and End go to the ends of a\n * week, and Enter chooses. A grid of focusable cells is the other way this\n * is written, and it costs somebody using a keyboard a year of presses to\n * get past a picture.\n *\n * ## The colours are yours\n *\n * `levelFor` returns a class, the same contract as `ToneDot`'s `fill` and\n * `BaseTimeline`'s: the kit does not know whether four of something is a\n * lot, or which hue your product uses for \"done\". `dayLabel` is the same\n * for words — the kit has no language, and a date reads differently in\n * every one.\n */\nconst {\n days,\n label,\n levelFor,\n dayLabel,\n isSelectable = undefined,\n weekStartsOn = 1,\n startAtEnd = true,\n} = defineProps<{\n /** The days to draw, as `YYYY-MM-DD`, oldest first. */\n days: readonly string[]\n /** Names the grid, e.g. \"Your year\". Already translated. */\n label: string\n /** A class for one day's square, e.g. `bg-positive/40`. */\n levelFor: (key: string) => string\n /** What a reader hears on a day: the date, and what happened. Translated. */\n dayLabel: (key: string) => string\n /** Which days lead somewhere. Unset, the grid is a picture and nothing else. */\n isSelectable?: ((key: string) => boolean) | undefined\n /** `1` Monday, `0` Sunday. */\n weekStartsOn?: WeekStart | undefined\n /** Open on the most recent weeks — a year otherwise starts far off-screen. */\n startAtEnd?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ select: [key: string] }>()\n\nconst scroller = useTemplateRef<InstanceType<typeof ScrollArea>>('scroller')\nconst grid = useTemplateRef<HTMLElement>('grid')\n\n/** Where the keyboard is: an index into `cells`, not a date. */\nconst focused = ref(0)\n\n/*\n * The days, padded out to whole weeks.\n *\n * A week is seven slots whatever the range starts on, so the first column\n * is short at the top and the last is short at the bottom. Those slots are\n * `null` rather than missing, because a row with fewer cells than the one\n * above it stops being a table.\n */\nconst weeks = computed<(string | null)[][]>(() => {\n if (days.length === 0) return []\n\n const first = days[0]!\n const lead = (fromDateKey(first).getDay() - weekStartsOn + 7) % 7\n const slots: (string | null)[] = [...Array.from({ length: lead }, () => null), ...days]\n\n while (slots.length % 7 !== 0) slots.push(null)\n\n return Array.from({ length: slots.length / 7 }, (_, week) => slots.slice(week * 7, week * 7 + 7))\n})\n\n/** The weekday names, in the app's locale, starting on the chosen day. */\nconst weekdays = computed(() =>\n Array.from({ length: 7 }, (_, row) => {\n // 2024-01-07 was a Sunday, so this walks a real week in the right order.\n const date = new Date(2024, 0, 7)\n date.setDate(date.getDate() + ((row + weekStartsOn) % 7))\n\n return formatDate(date, { weekday: 'long' })\n }),\n)\n\n/**\n * A month heading per run of weeks.\n *\n * A week is counted under the month its first real day falls in, so a week\n * split across two months does not give the later one a heading of its own\n * one column wide.\n */\nconst months = computed(() => {\n const runs: { key: string; label: string; span: number }[] = []\n\n for (const week of weeks.value) {\n const day = week.find((one): one is string => one !== null)\n if (!day) continue\n\n const key = day.slice(0, 7)\n const last = runs.at(-1)\n\n if (last?.key === key) last.span += 1\n else runs.push({ key, label: formatDate(fromDateKey(day), { month: 'short' }), span: 1 })\n }\n\n return runs\n})\n\n/** Every real day, in reading order, which is what the arrows walk. */\nconst cells = computed(() =>\n weeks.value.flatMap((week, column) =>\n week.flatMap((day, row) => (day === null ? [] : [{ day, column, row }])),\n ),\n)\n\n/* `data-day` through `v-bind` rather than as an attribute of its own:\n `strictTemplates` knows the real attributes of a `<td>` and rejects a\n `data-*` written directly, while an object of them is fine. It is the\n click delegation below that needs it on the element at all. */\nconst dayAttrs = (day: string) => ({ 'data-day': day })\n\nconst indexOf = (day: string) => cells.value.findIndex((cell) => cell.day === day)\n\nfunction moveTo(index: number) {\n const next = Math.max(0, Math.min(cells.value.length - 1, index))\n focused.value = next\n\n void nextTick(() => {\n grid.value?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus()\n })\n}\n\n/** Steps a whole column, which is a week, in reading order. */\nfunction step(by: number) {\n const here = cells.value[focused.value]\n if (!here) return\n\n const wanted = { column: here.column + by, row: here.row }\n const found = cells.value.findIndex(\n (cell) => cell.column === wanted.column && cell.row === wanted.row,\n )\n\n // Falling off the end of a short first or last week is a no-op rather\n // than a jump to some other weekday.\n if (found !== -1) moveTo(found)\n}\n\nfunction choose(day: string) {\n if (isSelectable?.(day)) emit('select', day)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n const here = cells.value[focused.value]\n if (!here) return\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault()\n moveTo(focused.value - 1)\n break\n case 'ArrowDown':\n event.preventDefault()\n moveTo(focused.value + 1)\n break\n /* Weeks run the way the language does, so in Arabic the column to the\n left of this one is the following week. */\n case 'ArrowLeft':\n case 'ArrowRight':\n event.preventDefault()\n step(horizontalStep(event.key, event.currentTarget as Element))\n break\n case 'Home':\n event.preventDefault()\n moveTo(0)\n break\n case 'End':\n event.preventDefault()\n moveTo(cells.value.length - 1)\n break\n case 'Enter':\n case ' ':\n event.preventDefault()\n choose(here.day)\n break\n }\n}\n\n/*\n * One listener for the whole grid.\n *\n * There are three hundred and sixty-five of these on screen. A handler each\n * is three hundred and sixty-five closures for markup that is a hit target\n * rather than a control, so the click is caught once and the day read off\n * the cell it landed in.\n */\nfunction onClick(event: MouseEvent) {\n const cell = (event.target as HTMLElement).closest<HTMLElement>('[data-day]')\n const day = cell?.dataset.day\n if (!day) return\n\n focused.value = indexOf(day)\n choose(day)\n}\n\nonMounted(() => {\n if (!startAtEnd) return\n\n const element = scroller.value?.viewport\n if (!element) return\n\n /*\n * A right-to-left box counts `scrollLeft` down from zero, so its far end\n * is the most negative value it takes rather than the largest. Assigning\n * `scrollWidth` there clamps to zero, which is the *start* — the grid\n * would have opened on the oldest week, which is the one thing this prop\n * exists to avoid, in the one direction nobody tests.\n */\n const rtl = elementDirection(element) === 'rtl'\n element.scrollLeft = rtl ? -element.scrollWidth : element.scrollWidth\n})\n</script>\n\n<template>\n <ScrollArea ref=\"scroller\" axis=\"x\" scrollbar=\"hidden\" :label=\"label\" class=\"rk-activity\">\n <table\n ref=\"grid\"\n class=\"rk-activity-table\"\n :aria-label=\"label\"\n @keydown=\"onKeydown\"\n @click=\"onClick\"\n >\n <thead>\n <tr>\n <!-- The weekday column is a spacer here: the headings below name\n their own rows, and a heading for the headings says nothing. -->\n <td class=\"rk-activity-corner\"></td>\n <th v-for=\"month in months\" :key=\"month.key\" :colspan=\"month.span\" scope=\"colgroup\">\n {{ month.label }}\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr v-for=\"(weekday, row) in weekdays\" :key=\"weekday\">\n <th scope=\"row\" class=\"rk-activity-weekday\">\n <span class=\"sr-only\">{{ weekday }}</span>\n </th>\n\n <template v-for=\"(week, column) in weeks\" :key=\"column\">\n <td\n v-if=\"week[row]\"\n class=\"rk-activity-cell\"\n v-bind=\"dayAttrs(week[row]!)\"\n :tabindex=\"cells[focused]?.day === week[row] ? 0 : -1\"\n :aria-label=\"dayLabel(week[row]!)\"\n :class=\"[levelFor(week[row]!), { 'is-pickable': isSelectable?.(week[row]!) }]\"\n />\n <!-- The padding at either end of the range. Empty, and skipped\n by the arrows, but present: a row with fewer cells than the\n one above it is no longer a table. -->\n <td v-else class=\"rk-activity-cell is-blank\" aria-hidden=\"true\" />\n </template>\n </tr>\n </tbody>\n </table>\n </ScrollArea>\n</template>\n\n<style scoped>\n.rk-activity-table {\n border-collapse: separate;\n border-spacing: 2px;\n}\n\n.rk-activity-corner,\n.rk-activity-weekday {\n width: 0;\n padding: 0;\n}\n\n.rk-activity-table th {\n color: var(--color-ink-soft);\n font-size: 0.5625rem;\n font-weight: 500;\n line-height: 1;\n text-align: start;\n}\n\n.rk-activity-cell {\n width: 0.625rem;\n height: 0.625rem;\n padding: 0;\n border-radius: var(--radius-cell);\n background: var(--color-muted);\n}\n\n.rk-activity-cell.is-blank {\n background: transparent;\n}\n\n.rk-activity-cell.is-pickable {\n cursor: pointer;\n}\n\n.rk-activity-cell:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends { key: string; label: string; value: number }\">\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'\n\nimport { watchVisibility } from '../motion/environment'\n\n/**\n * A row of values, compared.\n *\n * ## It is a table, for the same reason `ActivityGrid` is\n *\n * The rows are `<tr>`, each label is a `<th>`, and each value is printed as\n * text beside its bar. That is not a concession bolted on afterwards — it\n * is the accessible form *and* the layout, and it means the data can be\n * read with the bars switched off entirely. The bars themselves are\n * `aria-hidden`, because a reader who has just been told \"element-plus,\n * 104.1 KB\" does not also need \"graphic\".\n *\n * The alternative every chart reaches for first is an SVG with a\n * `role=\"img\"` and a sentence describing it. That sentence is written once,\n * by hand, and is wrong the first time the data changes.\n *\n * ## The scale starts at zero, and there is no prop to change that\n *\n * A bar chart whose axis starts at 80 makes a five per cent difference look\n * like a doubling, and it is the single most common way a true set of\n * numbers is used to say something false. `max` raises the top of the scale\n * — for a fixed ceiling across several charts — and nothing lowers the\n * bottom.\n *\n * ## The colours are yours\n *\n * `fill` returns a class per row, the same contract as `ToneDot`'s and\n * `ActivityGrid`'s `levelFor`: the kit does not know which of your rows is\n * the one you are making a point about. It defaults to `bg-primary`, which\n * is a role rather than a colour, so a chart that makes no point still\n * follows the palette.\n */\nconst {\n series,\n label,\n valueLabel,\n fill = () => 'bg-primary',\n max = undefined,\n animate = true,\n} = defineProps<{\n /** The rows, in the order they should read. */\n series: readonly T[]\n /** Names the chart, e.g. \"Bundle size by kit\". Becomes its caption. */\n label: string\n /** How a value reads, e.g. `(kb) => `${kb} KB``. The kit has no units. */\n valueLabel: (value: number, item: T) => string\n /** A class for one row's bar, e.g. `bg-positive`. */\n fill?: ((item: T, index: number) => string) | undefined\n /** The top of the scale. Defaults to the largest value present. */\n max?: number | undefined\n /** Grow the bars when the chart first scrolls into view. */\n animate?: boolean | undefined\n}>()\n\ndefineSlots<{\n /** Overrides a row's printed value — a note beside the number, a link. */\n value?: (props: { item: T; index: number }) => unknown\n}>()\n\nconst root = useTemplateRef<HTMLElement>('root')\n\n/* Drawn flat until it is on screen, then grown. The duration is a token, so\n a reader who asked for less motion gets the finished chart with no branch\n here: `tokens.css` zeroes every duration under `prefers-reduced-motion`. */\nconst grown = ref(!animate)\n\nlet stopWatching: (() => void) | undefined\n\nonMounted(() => {\n if (grown.value || !root.value) return\n\n stopWatching = watchVisibility(root.value, (visible) => {\n if (!visible) return\n grown.value = true\n stopWatching?.()\n })\n})\n\nonBeforeUnmount(() => stopWatching?.())\n\n/* The top of the scale, never the bottom. A zero ceiling would divide by\n zero; an empty series has nothing to draw either way. */\nconst ceiling = computed(() => {\n const largest = Math.max(0, ...series.map((item) => item.value))\n\n return Math.max(max ?? largest, Number.EPSILON)\n})\n\nconst rows = computed(() =>\n series.map((item, index) => ({\n item,\n index,\n /* Clamped: a value past an explicit `max` would otherwise draw a bar\n wider than its own chart. */\n width: `${Math.min(100, Math.max(0, (item.value / ceiling.value) * 100))}%`,\n fill: fill(item, index),\n })),\n)\n</script>\n\n<template>\n <table ref=\"root\" class=\"rk-bars\">\n <caption class=\"sr-only\">\n {{\n label\n }}\n </caption>\n <tbody>\n <tr v-for=\"row in rows\" :key=\"row.item.key\" class=\"rk-bars-row\">\n <th scope=\"row\" class=\"rk-bars-label\">{{ row.item.label }}</th>\n <td class=\"rk-bars-track\">\n <!-- The number beside it is what a reader hears; this is the\n picture of it. -->\n <span\n class=\"rk-bars-fill\"\n :class=\"row.fill\"\n :style=\"{ width: grown ? row.width : '0%' }\"\n aria-hidden=\"true\"\n />\n </td>\n <td class=\"rk-bars-value\">\n <slot name=\"value\" :item=\"row.item\" :index=\"row.index\">\n {{ valueLabel(row.item.value, row.item) }}\n </slot>\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<style scoped>\n.rk-bars {\n width: 100%;\n border-collapse: collapse;\n}\n\n.rk-bars-label {\n padding-block: 0.3125rem;\n padding-inline-end: 0.75rem;\n color: var(--color-ink);\n font-size: 0.8125rem;\n font-weight: 500;\n text-align: start;\n white-space: nowrap;\n}\n\n.rk-bars-track {\n width: 100%;\n padding-block: 0.3125rem;\n}\n\n.rk-bars-fill {\n display: block;\n height: 0.625rem;\n border-radius: 9999px;\n transition: width var(--duration-slower) var(--ease-standard);\n}\n\n.rk-bars-value {\n padding-block: 0.3125rem;\n padding-inline-start: 0.75rem;\n color: var(--color-ink-soft);\n font-size: 0.8125rem;\n font-variant-numeric: tabular-nums;\n text-align: end;\n white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends { key: string; label: string; value: number }\">\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'\n\nimport { watchVisibility } from '../motion/environment'\n\n/**\n * A row of values, compared.\n *\n * ## It is a table, for the same reason `ActivityGrid` is\n *\n * The rows are `<tr>`, each label is a `<th>`, and each value is printed as\n * text beside its bar. That is not a concession bolted on afterwards — it\n * is the accessible form *and* the layout, and it means the data can be\n * read with the bars switched off entirely. The bars themselves are\n * `aria-hidden`, because a reader who has just been told \"element-plus,\n * 104.1 KB\" does not also need \"graphic\".\n *\n * The alternative every chart reaches for first is an SVG with a\n * `role=\"img\"` and a sentence describing it. That sentence is written once,\n * by hand, and is wrong the first time the data changes.\n *\n * ## The scale starts at zero, and there is no prop to change that\n *\n * A bar chart whose axis starts at 80 makes a five per cent difference look\n * like a doubling, and it is the single most common way a true set of\n * numbers is used to say something false. `max` raises the top of the scale\n * — for a fixed ceiling across several charts — and nothing lowers the\n * bottom.\n *\n * ## The colours are yours\n *\n * `fill` returns a class per row, the same contract as `ToneDot`'s and\n * `ActivityGrid`'s `levelFor`: the kit does not know which of your rows is\n * the one you are making a point about. It defaults to `bg-primary`, which\n * is a role rather than a colour, so a chart that makes no point still\n * follows the palette.\n */\nconst {\n series,\n label,\n valueLabel,\n fill = () => 'bg-primary',\n max = undefined,\n animate = true,\n} = defineProps<{\n /** The rows, in the order they should read. */\n series: readonly T[]\n /** Names the chart, e.g. \"Bundle size by kit\". Becomes its caption. */\n label: string\n /** How a value reads, e.g. `(kb) => `${kb} KB``. The kit has no units. */\n valueLabel: (value: number, item: T) => string\n /** A class for one row's bar, e.g. `bg-positive`. */\n fill?: ((item: T, index: number) => string) | undefined\n /** The top of the scale. Defaults to the largest value present. */\n max?: number | undefined\n /** Grow the bars when the chart first scrolls into view. */\n animate?: boolean | undefined\n}>()\n\ndefineSlots<{\n /** Overrides a row's printed value — a note beside the number, a link. */\n value?: (props: { item: T; index: number }) => unknown\n}>()\n\nconst root = useTemplateRef<HTMLElement>('root')\n\n/* Drawn flat until it is on screen, then grown. The duration is a token, so\n a reader who asked for less motion gets the finished chart with no branch\n here: `tokens.css` zeroes every duration under `prefers-reduced-motion`. */\nconst grown = ref(!animate)\n\nlet stopWatching: (() => void) | undefined\n\nonMounted(() => {\n if (grown.value || !root.value) return\n\n stopWatching = watchVisibility(root.value, (visible) => {\n if (!visible) return\n grown.value = true\n stopWatching?.()\n })\n})\n\nonBeforeUnmount(() => stopWatching?.())\n\n/* The top of the scale, never the bottom. A zero ceiling would divide by\n zero; an empty series has nothing to draw either way. */\nconst ceiling = computed(() => {\n const largest = Math.max(0, ...series.map((item) => item.value))\n\n return Math.max(max ?? largest, Number.EPSILON)\n})\n\nconst rows = computed(() =>\n series.map((item, index) => ({\n item,\n index,\n /* Clamped: a value past an explicit `max` would otherwise draw a bar\n wider than its own chart. */\n width: `${Math.min(100, Math.max(0, (item.value / ceiling.value) * 100))}%`,\n fill: fill(item, index),\n })),\n)\n</script>\n\n<template>\n <table ref=\"root\" class=\"rk-bars\">\n <caption class=\"sr-only\">\n {{\n label\n }}\n </caption>\n <tbody>\n <tr v-for=\"row in rows\" :key=\"row.item.key\" class=\"rk-bars-row\">\n <th scope=\"row\" class=\"rk-bars-label\">{{ row.item.label }}</th>\n <td class=\"rk-bars-track\">\n <!-- The number beside it is what a reader hears; this is the\n picture of it. -->\n <span\n class=\"rk-bars-fill\"\n :class=\"row.fill\"\n :style=\"{ width: grown ? row.width : '0%' }\"\n aria-hidden=\"true\"\n />\n </td>\n <td class=\"rk-bars-value\">\n <slot name=\"value\" :item=\"row.item\" :index=\"row.index\">\n {{ valueLabel(row.item.value, row.item) }}\n </slot>\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<style scoped>\n.rk-bars {\n width: 100%;\n border-collapse: collapse;\n}\n\n.rk-bars-label {\n padding-block: 0.3125rem;\n padding-inline-end: 0.75rem;\n color: var(--color-ink);\n font-size: 0.8125rem;\n font-weight: 500;\n text-align: start;\n white-space: nowrap;\n}\n\n.rk-bars-track {\n width: 100%;\n padding-block: 0.3125rem;\n}\n\n.rk-bars-fill {\n display: block;\n height: 0.625rem;\n border-radius: 9999px;\n transition: width var(--duration-slower) var(--ease-standard);\n}\n\n.rk-bars-value {\n padding-block: 0.3125rem;\n padding-inline-start: 0.75rem;\n color: var(--color-ink-soft);\n font-size: 0.8125rem;\n font-variant-numeric: tabular-nums;\n text-align: end;\n white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends { key: string; label: string; value: number }\">\nimport { computed } from 'vue'\n\n/**\n * Parts of a whole.\n *\n * ## Not for comparing things\n *\n * This is the chart people reach for when they mean the other one. Judging\n * the difference between two angles is measurably harder than judging the\n * difference between two lengths, so six values that need ranking belong in\n * a `BarChart` and not here. Reach for this when the point is that the\n * slices *add up* — where a budget went, what a bundle is made of — and\n * when there are few enough slices to tell apart.\n *\n * ## The legend is the chart\n *\n * The ring is `aria-hidden`, and every slice's name and value is real text\n * beside it. Same decision as `BarChart`'s table: the description of a\n * chart is not a sentence somebody writes once and forgets to update, it\n * is the data, rendered.\n *\n * ## The colours are yours\n *\n * `fill` returns a class per slice, like `ToneDot`'s and `ActivityGrid`'s\n * `levelFor`. It is required here rather than defaulted: a ring whose\n * slices are all one colour is not a chart, so there is no sensible\n * default to give it.\n */\nconst {\n slices,\n label,\n valueLabel,\n fill,\n thickness = 14,\n} = defineProps<{\n /** The parts, in the order they should read around the ring. */\n slices: readonly T[]\n /** Names the chart, e.g. \"What the stylesheet is made of\". */\n label: string\n /** How a value reads, e.g. `(kb) => `${kb} KB``. The kit has no units. */\n valueLabel: (value: number, item: T) => string\n /** A class for one slice, e.g. `text-primary` — it paints the stroke. */\n fill: (item: T, index: number) => string\n /** How thick the ring is, as a percentage of its radius. */\n thickness?: number | undefined\n}>()\n\n/* A 100-unit circumference, so every slice's length is its percentage and\n there is no arithmetic to get wrong twice. */\nconst CIRCUMFERENCE = 100\nconst RADIUS = CIRCUMFERENCE / (2 * Math.PI)\n\nconst total = computed(() => slices.reduce((sum, slice) => sum + Math.max(0, slice.value), 0))\n\nconst arcs = computed(() => {\n let travelled = 0\n\n return slices.map((item, index) => {\n const share = total.value === 0 ? 0 : (Math.max(0, item.value) / total.value) * CIRCUMFERENCE\n /* Drawn anticlockwise from twelve o'clock by the transform below, so\n the offset counts the slices already placed. */\n const offset = -travelled\n travelled += share\n\n return {\n item,\n index,\n share,\n offset,\n percent: total.value === 0 ? 0 : (item.value / total.value) * 100,\n fill: fill(item, index),\n }\n })\n})\n</script>\n\n<template>\n <div class=\"rk-donut\">\n <!-- The names and numbers beside it are what a reader hears. -->\n <svg class=\"rk-donut-ring\" viewBox=\"0 0 40 40\" aria-hidden=\"true\">\n <g transform=\"rotate(-90 20 20)\">\n <circle\n v-for=\"arc in arcs\"\n :key=\"arc.item.key\"\n :class=\"arc.fill\"\n cx=\"20\"\n cy=\"20\"\n :r=\"RADIUS\"\n fill=\"none\"\n stroke=\"currentColor\"\n :stroke-width=\"(thickness / 100) * RADIUS * 2\"\n :stroke-dasharray=\"`${arc.share} ${CIRCUMFERENCE - arc.share}`\"\n :stroke-dashoffset=\"arc.offset\"\n />\n </g>\n </svg>\n\n <ul class=\"rk-donut-legend\" :aria-label=\"label\">\n <li v-for=\"arc in arcs\" :key=\"arc.item.key\" class=\"rk-donut-item\">\n <span class=\"rk-donut-swatch\" :class=\"arc.fill\" aria-hidden=\"true\" />\n <span class=\"rk-donut-name\">{{ arc.item.label }}</span>\n <span class=\"rk-donut-value\">{{ valueLabel(arc.item.value, arc.item) }}</span>\n </li>\n </ul>\n </div>\n</template>\n\n<style scoped>\n.rk-donut {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 1.25rem;\n}\n\n.rk-donut-ring {\n width: 8.5rem;\n height: 8.5rem;\n flex: none;\n}\n\n.rk-donut-legend {\n margin: 0;\n padding: 0;\n min-width: 0;\n flex: 1 1 12rem;\n list-style: none;\n}\n\n.rk-donut-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding-block: 0.1875rem;\n font-size: 0.8125rem;\n}\n\n.rk-donut-swatch {\n width: 0.625rem;\n height: 0.625rem;\n flex: none;\n border-radius: 9999px;\n background: currentColor;\n}\n\n.rk-donut-name {\n min-width: 0;\n flex: 1 1 auto;\n color: var(--color-ink);\n}\n\n.rk-donut-value {\n color: var(--color-ink-soft);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends { key: string; label: string; value: number }\">\nimport { computed } from 'vue'\n\n/**\n * Parts of a whole.\n *\n * ## Not for comparing things\n *\n * This is the chart people reach for when they mean the other one. Judging\n * the difference between two angles is measurably harder than judging the\n * difference between two lengths, so six values that need ranking belong in\n * a `BarChart` and not here. Reach for this when the point is that the\n * slices *add up* — where a budget went, what a bundle is made of — and\n * when there are few enough slices to tell apart.\n *\n * ## The legend is the chart\n *\n * The ring is `aria-hidden`, and every slice's name and value is real text\n * beside it. Same decision as `BarChart`'s table: the description of a\n * chart is not a sentence somebody writes once and forgets to update, it\n * is the data, rendered.\n *\n * ## The colours are yours\n *\n * `fill` returns a class per slice, like `ToneDot`'s and `ActivityGrid`'s\n * `levelFor`. It is required here rather than defaulted: a ring whose\n * slices are all one colour is not a chart, so there is no sensible\n * default to give it.\n */\nconst {\n slices,\n label,\n valueLabel,\n fill,\n thickness = 14,\n} = defineProps<{\n /** The parts, in the order they should read around the ring. */\n slices: readonly T[]\n /** Names the chart, e.g. \"What the stylesheet is made of\". */\n label: string\n /** How a value reads, e.g. `(kb) => `${kb} KB``. The kit has no units. */\n valueLabel: (value: number, item: T) => string\n /** A class for one slice, e.g. `text-primary` — it paints the stroke. */\n fill: (item: T, index: number) => string\n /** How thick the ring is, as a percentage of its radius. */\n thickness?: number | undefined\n}>()\n\n/* A 100-unit circumference, so every slice's length is its percentage and\n there is no arithmetic to get wrong twice. */\nconst CIRCUMFERENCE = 100\nconst RADIUS = CIRCUMFERENCE / (2 * Math.PI)\n\nconst total = computed(() => slices.reduce((sum, slice) => sum + Math.max(0, slice.value), 0))\n\nconst arcs = computed(() => {\n let travelled = 0\n\n return slices.map((item, index) => {\n const share = total.value === 0 ? 0 : (Math.max(0, item.value) / total.value) * CIRCUMFERENCE\n /* Drawn anticlockwise from twelve o'clock by the transform below, so\n the offset counts the slices already placed. */\n const offset = -travelled\n travelled += share\n\n return {\n item,\n index,\n share,\n offset,\n percent: total.value === 0 ? 0 : (item.value / total.value) * 100,\n fill: fill(item, index),\n }\n })\n})\n</script>\n\n<template>\n <div class=\"rk-donut\">\n <!-- The names and numbers beside it are what a reader hears. -->\n <svg class=\"rk-donut-ring\" viewBox=\"0 0 40 40\" aria-hidden=\"true\">\n <g transform=\"rotate(-90 20 20)\">\n <circle\n v-for=\"arc in arcs\"\n :key=\"arc.item.key\"\n :class=\"arc.fill\"\n cx=\"20\"\n cy=\"20\"\n :r=\"RADIUS\"\n fill=\"none\"\n stroke=\"currentColor\"\n :stroke-width=\"(thickness / 100) * RADIUS * 2\"\n :stroke-dasharray=\"`${arc.share} ${CIRCUMFERENCE - arc.share}`\"\n :stroke-dashoffset=\"arc.offset\"\n />\n </g>\n </svg>\n\n <ul class=\"rk-donut-legend\" :aria-label=\"label\">\n <li v-for=\"arc in arcs\" :key=\"arc.item.key\" class=\"rk-donut-item\">\n <span class=\"rk-donut-swatch\" :class=\"arc.fill\" aria-hidden=\"true\" />\n <span class=\"rk-donut-name\">{{ arc.item.label }}</span>\n <span class=\"rk-donut-value\">{{ valueLabel(arc.item.value, arc.item) }}</span>\n </li>\n </ul>\n </div>\n</template>\n\n<style scoped>\n.rk-donut {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 1.25rem;\n}\n\n.rk-donut-ring {\n width: 8.5rem;\n height: 8.5rem;\n flex: none;\n}\n\n.rk-donut-legend {\n margin: 0;\n padding: 0;\n min-width: 0;\n flex: 1 1 12rem;\n list-style: none;\n}\n\n.rk-donut-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding-block: 0.1875rem;\n font-size: 0.8125rem;\n}\n\n.rk-donut-swatch {\n width: 0.625rem;\n height: 0.625rem;\n flex: none;\n border-radius: 9999px;\n background: currentColor;\n}\n\n.rk-donut-name {\n min-width: 0;\n flex: 1 1 auto;\n color: var(--color-ink);\n}\n\n.rk-donut-value {\n color: var(--color-ink-soft);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T\">\nimport { computed, onMounted, onScopeDispose, useTemplateRef, watch, watchEffect } from 'vue'\n\nimport { useVirtualWindow } from '../composables/use-virtual-window'\nimport ScrollArea from './ScrollArea.vue'\n\n/**\n * A long list where only the rows near the viewport are in the DOM.\n *\n * ## The part that is usually dropped\n *\n * Windowing is easy to get right visually and easy to get wrong for a\n * reader: a list of ten thousand names that renders twenty of them reads\n * as a list of twenty, and the twenty change under the reader as they\n * move. So every row states its place in the whole — `aria-setsize` is the\n * real length and `aria-posinset` is the real index, not the index in the\n * window. Without those two the list is a different list every time it\n * scrolls.\n *\n * ## Fixed rows, and why that is a prop rather than a measurement\n *\n * Every row is `rowHeight` tall. That is what lets the window be\n * arithmetic — a division rather than a measurement of every row — and it\n * is why the empty space above and below is exactly right, which is what\n * keeps the scrollbar honest about how long the list is. A list of rows\n * that are not all the same height is not this component.\n *\n * ## Below the threshold it is a plain list\n *\n * Under `virtualizeAfter` rows nothing is windowed, no padding is rendered\n * and the markup is what it would have been without any of this. The cost\n * of windowing is only paid by a list long enough to need it.\n */\nconst {\n items,\n rowHeight,\n label,\n virtualizeAfter = 50,\n scrollbar = 'auto',\n} = defineProps<{\n /** The whole list. Only the rows near the viewport are rendered. */\n items: readonly T[]\n /** Every row is this tall, in pixels. */\n rowHeight: number\n /** Names the list, e.g. \"Bütün kayıtlar\". Already translated. */\n label: string\n /** Below this many rows the list is not windowed at all. */\n virtualizeAfter?: number | undefined\n /** Passed to the scroll area: `hidden` takes the native bar away. */\n scrollbar?: 'auto' | 'hidden' | undefined\n}>()\n\ndefineSlots<{\n /** One row. `index` is its place in the whole list, not in the window. */\n default: (props: { item: T; index: number }) => unknown\n}>()\n\nconst area = useTemplateRef<InstanceType<typeof ScrollArea>>('area')\n\nconst {\n window: shown,\n padTop,\n padBottom,\n viewportHeight,\n onScroll,\n} = useVirtualWindow({\n count: computed(() => items.length),\n rowHeight: computed(() => rowHeight),\n threshold: computed(() => virtualizeAfter),\n})\n\nconst rows = computed(() =>\n items.slice(shown.value.start, shown.value.end).map((item, offset) => ({\n item,\n /** The row's place in the whole list, which is what a reader is told. */\n index: shown.value.start + offset,\n })),\n)\n\n/* How tall the viewport is, measured rather than guessed: it decides how\n many rows are in the window, and a guess that is too small leaves a gap\n at the bottom of a tall list. */\nfunction measure() {\n const element = area.value?.viewport\n if (element) viewportHeight.value = element.clientHeight\n}\n\nonMounted(measure)\n// A list that arrives after mount can change the box's height along with it.\nwatch(() => items.length, measure)\n\n/*\n * And again whenever the box itself changes size.\n *\n * `ScrollArea` observes the viewport for its own fades, but that answers a\n * different question and its result does not reach here. Without this, a\n * window resize, a sidebar opening, or a list mounted inside a panel that\n * is laid out a frame later leaves `viewportHeight` at whatever it was —\n * which renders too few rows and leaves a gap at the bottom, or too many.\n */\nlet observer: ResizeObserver | null = null\n\nwatchEffect(() => {\n observer?.disconnect()\n observer = null\n\n const element = area.value?.viewport\n if (!element || typeof ResizeObserver === 'undefined') return\n\n observer = new ResizeObserver(measure)\n observer.observe(element)\n})\n\nonScopeDispose(() => observer?.disconnect())\n\n/** Scrolls a row into view by its index, for an app driving the list itself. */\nfunction scrollToIndex(index: number) {\n const element = area.value?.viewport\n if (!element) return\n\n const top = Math.max(0, Math.min(items.length - 1, index)) * rowHeight\n if (top < element.scrollTop) element.scrollTop = top\n else if (top + rowHeight > element.scrollTop + element.clientHeight) {\n element.scrollTop = top + rowHeight - element.clientHeight\n }\n}\n\ndefineExpose({ scrollToIndex })\n</script>\n\n<template>\n <ScrollArea\n ref=\"area\"\n axis=\"y\"\n :label=\"label\"\n :scrollbar=\"scrollbar\"\n class=\"rk-vlist\"\n @scroll=\"onScroll\"\n >\n <ul class=\"rk-vlist-rows\" :aria-label=\"label\">\n <!-- The rows that are not rendered, as height. This is what makes the\n scrollbar the length of the whole list rather than the window. -->\n <li v-if=\"padTop > 0\" :style=\"{ height: `${padTop}px` }\" aria-hidden=\"true\" />\n\n <li\n v-for=\"row in rows\"\n :key=\"row.index\"\n class=\"rk-vlist-row\"\n :style=\"{ height: `${rowHeight}px` }\"\n :aria-setsize=\"items.length\"\n :aria-posinset=\"row.index + 1\"\n >\n <slot :item=\"row.item\" :index=\"row.index\" />\n </li>\n\n <li v-if=\"padBottom > 0\" :style=\"{ height: `${padBottom}px` }\" aria-hidden=\"true\" />\n </ul>\n </ScrollArea>\n</template>\n\n<style scoped>\n.rk-vlist-rows {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.rk-vlist-row {\n box-sizing: border-box;\n overflow: hidden;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T\">\nimport { computed, onMounted, onScopeDispose, useTemplateRef, watch, watchEffect } from 'vue'\n\nimport { useVirtualWindow } from '../composables/use-virtual-window'\nimport ScrollArea from './ScrollArea.vue'\n\n/**\n * A long list where only the rows near the viewport are in the DOM.\n *\n * ## The part that is usually dropped\n *\n * Windowing is easy to get right visually and easy to get wrong for a\n * reader: a list of ten thousand names that renders twenty of them reads\n * as a list of twenty, and the twenty change under the reader as they\n * move. So every row states its place in the whole — `aria-setsize` is the\n * real length and `aria-posinset` is the real index, not the index in the\n * window. Without those two the list is a different list every time it\n * scrolls.\n *\n * ## Fixed rows, and why that is a prop rather than a measurement\n *\n * Every row is `rowHeight` tall. That is what lets the window be\n * arithmetic — a division rather than a measurement of every row — and it\n * is why the empty space above and below is exactly right, which is what\n * keeps the scrollbar honest about how long the list is. A list of rows\n * that are not all the same height is not this component.\n *\n * ## Below the threshold it is a plain list\n *\n * Under `virtualizeAfter` rows nothing is windowed, no padding is rendered\n * and the markup is what it would have been without any of this. The cost\n * of windowing is only paid by a list long enough to need it.\n */\nconst {\n items,\n rowHeight,\n label,\n virtualizeAfter = 50,\n scrollbar = 'auto',\n} = defineProps<{\n /** The whole list. Only the rows near the viewport are rendered. */\n items: readonly T[]\n /** Every row is this tall, in pixels. */\n rowHeight: number\n /** Names the list, e.g. \"Bütün kayıtlar\". Already translated. */\n label: string\n /** Below this many rows the list is not windowed at all. */\n virtualizeAfter?: number | undefined\n /** Passed to the scroll area: `hidden` takes the native bar away. */\n scrollbar?: 'auto' | 'hidden' | undefined\n}>()\n\ndefineSlots<{\n /** One row. `index` is its place in the whole list, not in the window. */\n default: (props: { item: T; index: number }) => unknown\n}>()\n\nconst area = useTemplateRef<InstanceType<typeof ScrollArea>>('area')\n\nconst {\n window: shown,\n padTop,\n padBottom,\n viewportHeight,\n onScroll,\n} = useVirtualWindow({\n count: computed(() => items.length),\n rowHeight: computed(() => rowHeight),\n threshold: computed(() => virtualizeAfter),\n})\n\nconst rows = computed(() =>\n items.slice(shown.value.start, shown.value.end).map((item, offset) => ({\n item,\n /** The row's place in the whole list, which is what a reader is told. */\n index: shown.value.start + offset,\n })),\n)\n\n/* How tall the viewport is, measured rather than guessed: it decides how\n many rows are in the window, and a guess that is too small leaves a gap\n at the bottom of a tall list. */\nfunction measure() {\n const element = area.value?.viewport\n if (element) viewportHeight.value = element.clientHeight\n}\n\nonMounted(measure)\n// A list that arrives after mount can change the box's height along with it.\nwatch(() => items.length, measure)\n\n/*\n * And again whenever the box itself changes size.\n *\n * `ScrollArea` observes the viewport for its own fades, but that answers a\n * different question and its result does not reach here. Without this, a\n * window resize, a sidebar opening, or a list mounted inside a panel that\n * is laid out a frame later leaves `viewportHeight` at whatever it was —\n * which renders too few rows and leaves a gap at the bottom, or too many.\n */\nlet observer: ResizeObserver | null = null\n\nwatchEffect(() => {\n observer?.disconnect()\n observer = null\n\n const element = area.value?.viewport\n if (!element || typeof ResizeObserver === 'undefined') return\n\n observer = new ResizeObserver(measure)\n observer.observe(element)\n})\n\nonScopeDispose(() => observer?.disconnect())\n\n/** Scrolls a row into view by its index, for an app driving the list itself. */\nfunction scrollToIndex(index: number) {\n const element = area.value?.viewport\n if (!element) return\n\n const top = Math.max(0, Math.min(items.length - 1, index)) * rowHeight\n if (top < element.scrollTop) element.scrollTop = top\n else if (top + rowHeight > element.scrollTop + element.clientHeight) {\n element.scrollTop = top + rowHeight - element.clientHeight\n }\n}\n\ndefineExpose({ scrollToIndex })\n</script>\n\n<template>\n <ScrollArea\n ref=\"area\"\n axis=\"y\"\n :label=\"label\"\n :scrollbar=\"scrollbar\"\n class=\"rk-vlist\"\n @scroll=\"onScroll\"\n >\n <ul class=\"rk-vlist-rows\" :aria-label=\"label\">\n <!-- The rows that are not rendered, as height. This is what makes the\n scrollbar the length of the whole list rather than the window. -->\n <li v-if=\"padTop > 0\" :style=\"{ height: `${padTop}px` }\" aria-hidden=\"true\" />\n\n <li\n v-for=\"row in rows\"\n :key=\"row.index\"\n class=\"rk-vlist-row\"\n :style=\"{ height: `${rowHeight}px` }\"\n :aria-setsize=\"items.length\"\n :aria-posinset=\"row.index + 1\"\n >\n <slot :item=\"row.item\" :index=\"row.index\" />\n </li>\n\n <li v-if=\"padBottom > 0\" :style=\"{ height: `${padBottom}px` }\" aria-hidden=\"true\" />\n </ul>\n </ScrollArea>\n</template>\n\n<style scoped>\n.rk-vlist-rows {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.rk-vlist-row {\n box-sizing: border-box;\n overflow: hidden;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useAnnounce } from '../composables/use-announce'\n\n/**\n * The two live regions `announce()` speaks through. Render one per app,\n * anywhere — nothing here is ever visible.\n *\n * Both regions are rendered empty from mount and stay in the page for its\n * whole life. That is the point of the component: a live region inserted\n * along with its first message is usually not announced at all, because\n * the reader has nothing to notice a change *to*. Only the text inside\n * them ever changes.\n */\nconst { polite, assertive } = useAnnounce()\n</script>\n\n<template>\n <div class=\"rk-announcer\">\n <!-- `status` waits for a pause; `alert` interrupts. Two regions rather\n than one with a changing `aria-live`, because changing the\n politeness of a live region is not reliably picked up. -->\n <p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{ polite }}</p>\n <p role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">{{ assertive }}</p>\n </div>\n</template>\n\n<style scoped>\n/* Clipped rather than `display: none`: a hidden live region is not read at\n all, which is the quietest possible way for this to fail. */\n.rk-announcer {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useAnnounce } from '../composables/use-announce'\n\n/**\n * The two live regions `announce()` speaks through. Render one per app,\n * anywhere — nothing here is ever visible.\n *\n * Both regions are rendered empty from mount and stay in the page for its\n * whole life. That is the point of the component: a live region inserted\n * along with its first message is usually not announced at all, because\n * the reader has nothing to notice a change *to*. Only the text inside\n * them ever changes.\n */\nconst { polite, assertive } = useAnnounce()\n</script>\n\n<template>\n <div class=\"rk-announcer\">\n <!-- `status` waits for a pause; `alert` interrupts. Two regions rather\n than one with a changing `aria-live`, because changing the\n politeness of a live region is not reliably picked up. -->\n <p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{ polite }}</p>\n <p role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">{{ assertive }}</p>\n </div>\n</template>\n\n<style scoped>\n/* Clipped rather than `display: none`: a hidden live region is not read at\n all, which is the quietest possible way for this to fail. */\n.rk-announcer {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, useTemplateRef, watch } from 'vue'\n\nimport { focusTarget } from '../utils/focus-target'\n\n/**\n * What a rejected form says at the top of itself.\n *\n * ## Why a summary and not just the messages beside the fields\n *\n * `FormField` already puts the reason beside the field it belongs to, and\n * that is where it has to stay — it is where the reader's eye is and where\n * it stays until the field is fixed. What that does not do is tell anyone\n * the submission failed at all. On a long form the first rejected field\n * can be a screenful above or below, focus is still on the submit button,\n * and to a screen reader nothing happened when it was pressed.\n *\n * So this is not a second copy of the messages. It is the answer to \"did\n * that work?\", and a way to get from there to each field in one press.\n *\n * ## It is focused, not announced\n *\n * The obvious build gives this `role=\"alert\"`, and then a reader hears the\n * whole list read at it while focus stays on the button it cannot use. The\n * standard answer is better: move focus *into* the summary. Its heading\n * and list are read because the reader is now there, the links are one Tab\n * away rather than a search, and Escape is not needed because nothing was\n * taken over.\n *\n * Focus moves on its own the first time errors appear. It does not move\n * again on its own, because a form that re-validates as you type would\n * otherwise drag focus out of the field being corrected on every\n * keystroke. Call `focus()` from the submit handler for the second and\n * third attempts — the exposed method exists for exactly that.\n *\n * ## The order is the form's, not the object's\n *\n * Errors are read in the order the keys arrive, which is the order the\n * schema lists them, which is usually the order the fields are in. When it\n * is not, `fields` names the order explicitly — a list that reads bottom to\n * top sends the reader up and down the form instead of through it.\n */\nconst {\n errors,\n title,\n labelFor,\n fieldId = (field: string) => field,\n fields = undefined,\n} = defineProps<{\n /** Field name to message, as `fieldErrors` returns it. */\n errors: Readonly<Record<string, string>>\n /** Heads the summary, e.g. \"Düzeltilmesi gereken 2 alan var\". Already translated. */\n title: string\n /** A field's name as the reader knows it. The kit has no words of its own. */\n labelFor: (field: string) => string\n /**\n * A field's `id`, to link to. Pass the same one to that `FormField`'s\n * `fieldId`, or the link points at nothing and the reader is left at the\n * top of a form they cannot navigate.\n */\n fieldId?: ((field: string) => string) | undefined\n /** The order to read them in, when the object's own order is not the form's. */\n fields?: readonly string[] | undefined\n}>()\n\nconst panel = useTemplateRef<HTMLElement>('panel')\n\nconst listed = computed(() => {\n const names = fields ?? Object.keys(errors)\n\n return names\n .filter((field) => errors[field] !== undefined)\n .map((field) => ({ field, message: errors[field]!, id: fieldId(field) }))\n})\n\nconst hasErrors = computed(() => listed.value.length > 0)\n\n/** Moves focus into the summary. Call it on every failed submit. */\nfunction focus() {\n focusTarget(panel.value)\n}\n\n/* The fragment is left on the link so it still works without JavaScript,\n but a fragment alone scrolls without moving focus — the reader arrives\n at the field visually and is still up here for everything else. */\nfunction goToField(event: MouseEvent, id: string) {\n if (focusTarget(id)) event.preventDefault()\n}\n\n/*\n * Once, on the way from valid to not.\n *\n * The watched value is *whether* there are errors, not which — so a form\n * that re-validates while the reader types cannot fire this, and focus\n * stays in the field being corrected. Watching the messages instead would\n * pull focus out of it on every keystroke, which is worse than never\n * focusing at all.\n */\nwatch(hasErrors, async (now) => {\n if (!now) return\n\n // The panel does not exist until this change has rendered.\n await nextTick()\n focus()\n})\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <div v-if=\"hasErrors\" ref=\"panel\" class=\"rk-errsum\" tabindex=\"-1\">\n <p class=\"rk-errsum-title\">{{ title }}</p>\n\n <ul class=\"rk-errsum-list\">\n <li v-for=\"item in listed\" :key=\"item.field\">\n <a :href=\"`#${item.id}`\" class=\"rk-errsum-link\" @click=\"goToField($event, item.id)\">\n {{ labelFor(item.field) }}: {{ item.message }}\n </a>\n </li>\n </ul>\n </div>\n</template>\n\n<style scoped>\n.rk-errsum {\n border: 2px solid var(--color-negative);\n border-radius: var(--radius-card);\n padding: 0.875rem 1rem;\n}\n\n.rk-errsum:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-errsum-title {\n margin: 0;\n color: var(--color-negative);\n font-size: 0.875rem;\n font-weight: 600;\n}\n\n.rk-errsum-list {\n margin: 0.5rem 0 0;\n padding-inline-start: 1.125rem;\n color: var(--color-negative);\n font-size: 0.8125rem;\n}\n\n.rk-errsum-list li + li {\n margin-block-start: 0.25rem;\n}\n\n.rk-errsum-link {\n color: inherit;\n text-decoration: underline;\n}\n\n.rk-errsum-link:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, useTemplateRef, watch } from 'vue'\n\nimport { focusTarget } from '../utils/focus-target'\n\n/**\n * What a rejected form says at the top of itself.\n *\n * ## Why a summary and not just the messages beside the fields\n *\n * `FormField` already puts the reason beside the field it belongs to, and\n * that is where it has to stay — it is where the reader's eye is and where\n * it stays until the field is fixed. What that does not do is tell anyone\n * the submission failed at all. On a long form the first rejected field\n * can be a screenful above or below, focus is still on the submit button,\n * and to a screen reader nothing happened when it was pressed.\n *\n * So this is not a second copy of the messages. It is the answer to \"did\n * that work?\", and a way to get from there to each field in one press.\n *\n * ## It is focused, not announced\n *\n * The obvious build gives this `role=\"alert\"`, and then a reader hears the\n * whole list read at it while focus stays on the button it cannot use. The\n * standard answer is better: move focus *into* the summary. Its heading\n * and list are read because the reader is now there, the links are one Tab\n * away rather than a search, and Escape is not needed because nothing was\n * taken over.\n *\n * Focus moves on its own the first time errors appear. It does not move\n * again on its own, because a form that re-validates as you type would\n * otherwise drag focus out of the field being corrected on every\n * keystroke. Call `focus()` from the submit handler for the second and\n * third attempts — the exposed method exists for exactly that.\n *\n * ## The order is the form's, not the object's\n *\n * Errors are read in the order the keys arrive, which is the order the\n * schema lists them, which is usually the order the fields are in. When it\n * is not, `fields` names the order explicitly — a list that reads bottom to\n * top sends the reader up and down the form instead of through it.\n */\nconst {\n errors,\n title,\n labelFor,\n fieldId = (field: string) => field,\n fields = undefined,\n} = defineProps<{\n /** Field name to message, as `fieldErrors` returns it. */\n errors: Readonly<Record<string, string>>\n /** Heads the summary, e.g. \"Düzeltilmesi gereken 2 alan var\". Already translated. */\n title: string\n /** A field's name as the reader knows it. The kit has no words of its own. */\n labelFor: (field: string) => string\n /**\n * A field's `id`, to link to. Pass the same one to that `FormField`'s\n * `fieldId`, or the link points at nothing and the reader is left at the\n * top of a form they cannot navigate.\n */\n fieldId?: ((field: string) => string) | undefined\n /** The order to read them in, when the object's own order is not the form's. */\n fields?: readonly string[] | undefined\n}>()\n\nconst panel = useTemplateRef<HTMLElement>('panel')\n\nconst listed = computed(() => {\n const names = fields ?? Object.keys(errors)\n\n return names\n .filter((field) => errors[field] !== undefined)\n .map((field) => ({ field, message: errors[field]!, id: fieldId(field) }))\n})\n\nconst hasErrors = computed(() => listed.value.length > 0)\n\n/** Moves focus into the summary. Call it on every failed submit. */\nfunction focus() {\n focusTarget(panel.value)\n}\n\n/* The fragment is left on the link so it still works without JavaScript,\n but a fragment alone scrolls without moving focus — the reader arrives\n at the field visually and is still up here for everything else. */\nfunction goToField(event: MouseEvent, id: string) {\n if (focusTarget(id)) event.preventDefault()\n}\n\n/*\n * Once, on the way from valid to not.\n *\n * The watched value is *whether* there are errors, not which — so a form\n * that re-validates while the reader types cannot fire this, and focus\n * stays in the field being corrected. Watching the messages instead would\n * pull focus out of it on every keystroke, which is worse than never\n * focusing at all.\n */\nwatch(hasErrors, async (now) => {\n if (!now) return\n\n // The panel does not exist until this change has rendered.\n await nextTick()\n focus()\n})\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <div v-if=\"hasErrors\" ref=\"panel\" class=\"rk-errsum\" tabindex=\"-1\">\n <p class=\"rk-errsum-title\">{{ title }}</p>\n\n <ul class=\"rk-errsum-list\">\n <li v-for=\"item in listed\" :key=\"item.field\">\n <a :href=\"`#${item.id}`\" class=\"rk-errsum-link\" @click=\"goToField($event, item.id)\">\n {{ labelFor(item.field) }}: {{ item.message }}\n </a>\n </li>\n </ul>\n </div>\n</template>\n\n<style scoped>\n.rk-errsum {\n border: 2px solid var(--color-negative);\n border-radius: var(--radius-card);\n padding: 0.875rem 1rem;\n}\n\n.rk-errsum:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-errsum-title {\n margin: 0;\n color: var(--color-negative);\n font-size: 0.875rem;\n font-weight: 600;\n}\n\n.rk-errsum-list {\n margin: 0.5rem 0 0;\n padding-inline-start: 1.125rem;\n color: var(--color-negative);\n font-size: 0.8125rem;\n}\n\n.rk-errsum-list li + li {\n margin-block-start: 0.25rem;\n}\n\n.rk-errsum-link {\n color: inherit;\n text-decoration: underline;\n}\n\n.rk-errsum-link:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport BaseAvatar from './BaseAvatar.vue'\n\n/**\n * The people on a thing, overlapped: who is in a conversation, who shares a\n * list.\n *\n * Past `max` it stops drawing faces and says how many are left, because ten\n * overlapping circles are neither ten faces nor a number. The whole stack is\n * one thing to a screen reader — `label` names it, usually with the count in\n * it, which is what somebody listening actually needs.\n */\nconst {\n people,\n label,\n max = 4,\n size = 'md',\n} = defineProps<{\n /** Each person's name, and a picture where there is one. */\n people: readonly { name: string; src?: string | undefined }[]\n /** The stack's accessible name: \"Shared with 6 people\". Already translated. */\n label: string\n /** How many faces before the rest become a number. */\n max?: number | undefined\n size?: 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst shown = computed(() => people.slice(0, max))\nconst rest = computed(() => Math.max(0, people.length - shown.value.length))\n</script>\n\n<template>\n <div class=\"rk-stack\" :class=\"`is-${size}`\" role=\"img\" :aria-label=\"label\">\n <span v-for=\"person in shown\" :key=\"person.name\" class=\"rk-stack-item\" aria-hidden=\"true\">\n <BaseAvatar :name=\"person.name\" :src=\"person.src\" :size=\"size\" fallback=\"initials\" />\n </span>\n <span v-if=\"rest\" class=\"rk-stack-item rk-stack-rest\" aria-hidden=\"true\">+{{ rest }}</span>\n </div>\n</template>\n\n<style scoped>\n.rk-stack {\n display: inline-flex;\n align-items: center;\n}\n\n/* Overlapped by a third, with a ring in the page's own colour so each face\n keeps an edge against the one under it — on any material. */\n.rk-stack-item + .rk-stack-item {\n margin-inline-start: -0.5rem;\n}\n\n.rk-stack.is-sm .rk-stack-item + .rk-stack-item {\n margin-inline-start: -0.5rem;\n}\n\n.rk-stack.is-lg .rk-stack-item + .rk-stack-item {\n margin-inline-start: -0.875rem;\n}\n\n.rk-stack-item {\n display: inline-flex;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px var(--color-surface);\n}\n\n.rk-stack-rest {\n display: inline-grid;\n width: 2.25rem;\n height: 2.25rem;\n place-items: center;\n background: var(--color-muted);\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--color-ink-soft);\n font-variant-numeric: tabular-nums;\n}\n\n.rk-stack.is-sm .rk-stack-rest {\n width: 1.75rem;\n height: 1.75rem;\n font-size: 0.6875rem;\n}\n\n.rk-stack.is-lg .rk-stack-rest {\n width: 3rem;\n height: 3rem;\n font-size: 0.8125rem;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport BaseAvatar from './BaseAvatar.vue'\n\n/**\n * The people on a thing, overlapped: who is in a conversation, who shares a\n * list.\n *\n * Past `max` it stops drawing faces and says how many are left, because ten\n * overlapping circles are neither ten faces nor a number. The whole stack is\n * one thing to a screen reader — `label` names it, usually with the count in\n * it, which is what somebody listening actually needs.\n */\nconst {\n people,\n label,\n max = 4,\n size = 'md',\n} = defineProps<{\n /** Each person's name, and a picture where there is one. */\n people: readonly { name: string; src?: string | undefined }[]\n /** The stack's accessible name: \"Shared with 6 people\". Already translated. */\n label: string\n /** How many faces before the rest become a number. */\n max?: number | undefined\n size?: 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst shown = computed(() => people.slice(0, max))\nconst rest = computed(() => Math.max(0, people.length - shown.value.length))\n</script>\n\n<template>\n <div class=\"rk-stack\" :class=\"`is-${size}`\" role=\"img\" :aria-label=\"label\">\n <span v-for=\"person in shown\" :key=\"person.name\" class=\"rk-stack-item\" aria-hidden=\"true\">\n <BaseAvatar :name=\"person.name\" :src=\"person.src\" :size=\"size\" fallback=\"initials\" />\n </span>\n <span v-if=\"rest\" class=\"rk-stack-item rk-stack-rest\" aria-hidden=\"true\">+{{ rest }}</span>\n </div>\n</template>\n\n<style scoped>\n.rk-stack {\n display: inline-flex;\n align-items: center;\n}\n\n/* Overlapped by a third, with a ring in the page's own colour so each face\n keeps an edge against the one under it — on any material. */\n.rk-stack-item + .rk-stack-item {\n margin-inline-start: -0.5rem;\n}\n\n.rk-stack.is-sm .rk-stack-item + .rk-stack-item {\n margin-inline-start: -0.5rem;\n}\n\n.rk-stack.is-lg .rk-stack-item + .rk-stack-item {\n margin-inline-start: -0.875rem;\n}\n\n.rk-stack-item {\n display: inline-flex;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px var(--color-surface);\n}\n\n.rk-stack-rest {\n display: inline-grid;\n width: 2.25rem;\n height: 2.25rem;\n place-items: center;\n background: var(--color-muted);\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--color-ink-soft);\n font-variant-numeric: tabular-nums;\n}\n\n.rk-stack.is-sm .rk-stack-rest {\n width: 1.75rem;\n height: 1.75rem;\n font-size: 0.6875rem;\n}\n\n.rk-stack.is-lg .rk-stack-rest {\n width: 3rem;\n height: 3rem;\n font-size: 0.8125rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"M extends 'single' | 'range' = 'single'\">\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\n\nimport { addDays, fromDateKey, toDateKey, todayKey } from '../utils/date'\nimport type { WeekStart } from '../utils/date'\nimport { horizontalStep } from '../utils/direction'\nimport { formatDate } from '../utils/format'\n\nexport interface DateRange {\n /** `YYYY-MM-DD`, always local. */\n start: string\n end: string\n}\n\n/**\n * A month of days, for choosing one or a stretch of them.\n *\n * Dates are the kit's date keys — `YYYY-MM-DD`, always local — and never\n * `Date` objects across the boundary. `toISOString()` on a late evening in\n * Istanbul is tomorrow, which is the bug `toDateKey` exists to prevent, and\n * a component that handed back `Date`s would hand that bug to every app.\n *\n * The keyboard is the date-grid pattern: the arrows move a day and a week,\n * Home and End go to the ends of the week, Page Up and Down change the\n * month, and with Shift, the year. Only one day is in the Tab order at a\n * time, so a calendar is one stop rather than thirty-one.\n *\n * Every name a screen reader reads — the month, the weekdays, each day —\n * comes from `Intl` in the app's own locale. The two arrows are the only\n * words the app has to pass, because \"previous\" has no date to build it\n * from.\n */\nconst {\n mode = 'single' as M,\n min = undefined,\n max = undefined,\n isDisabled = undefined,\n weekStartsOn = 1,\n previousLabel,\n nextLabel,\n today = todayKey(),\n} = defineProps<{\n /** One day, or a stretch from one day to another. */\n mode?: M | undefined\n /** The earliest day that can be chosen, as `YYYY-MM-DD`. */\n min?: string | undefined\n max?: string | undefined\n /** Days to rule out inside the range — weekends, days already booked. */\n isDisabled?: ((key: string) => boolean) | undefined\n /** `1` Monday, `0` Sunday. */\n weekStartsOn?: WeekStart | undefined\n /** Accessible name of the back arrow, e.g. \"Previous month\". */\n previousLabel: string\n /** Accessible name of the forward arrow. */\n nextLabel: string\n /** Which day is marked as today. Given, so a test or a demo can fix it. */\n today?: string | undefined\n}>()\n\n/* `| undefined` outside the condition, not inside each branch: TypeScript\n can then see that `Value | undefined` is `Value`, which it cannot while\n `M` is still open. */\ntype Value = (M extends 'range' ? DateRange : string) | undefined\n\n/** The chosen day, or the chosen range, with `v-model`. */\nconst model = defineModel<Value>()\n\nconst single = computed(() => (mode === 'single' ? (model.value as string | undefined) : undefined))\nconst range = computed(() =>\n mode === 'range' ? (model.value as DateRange | undefined) : undefined,\n)\n\n/* Which month is on screen, and which day the keyboard is on. They move\n together: stepping off the edge of a month turns the page. */\nconst focused = ref(single.value ?? range.value?.start ?? today)\nconst view = ref<'days' | 'months' | 'years'>('days')\nconst grid = useTemplateRef<HTMLElement>('grid')\n\n/** Set while a range is half chosen, to paint what hovering would take. */\nconst pendingStart = ref<string | null>(null)\nconst hovered = ref<string | null>(null)\n\nconst focusedDate = computed(() => fromDateKey(focused.value))\nconst year = computed(() => focusedDate.value.getFullYear())\nconst month = computed(() => focusedDate.value.getMonth())\n\nconst monthTitle = computed(() => formatDate(focusedDate.value, { month: 'long', year: 'numeric' }))\n\n/** The weekday headings, in the app's locale, starting on the chosen day. */\nconst weekdays = computed(() => {\n // 2024-01-07 was a Sunday, so this walks a real week in the right order.\n const sunday = new Date(2024, 0, 7)\n return Array.from({ length: 7 }, (_, i) => {\n const date = new Date(sunday)\n date.setDate(sunday.getDate() + ((i + weekStartsOn) % 7))\n return {\n short: formatDate(date, { weekday: 'short' }),\n long: formatDate(date, { weekday: 'long' }),\n }\n })\n})\n\n/** Six weeks, always: a calendar that changes height as you page it jumps. */\nconst weeks = computed(() => {\n const first = new Date(year.value, month.value, 1)\n const offset = (first.getDay() - weekStartsOn + 7) % 7\n let cursor = addDays(toDateKey(first), -offset)\n\n return Array.from({ length: 6 }, () =>\n Array.from({ length: 7 }, () => {\n const key = cursor\n cursor = addDays(cursor, 1)\n return key\n }),\n )\n})\n\nconst months = computed(() =>\n Array.from({ length: 12 }, (_, i) => ({\n index: i,\n label: formatDate(new Date(year.value, i, 1), { month: 'short' }),\n long: formatDate(new Date(year.value, i, 1), { month: 'long' }),\n })),\n)\n\n/** A block of twelve years, the one the focused year falls in. */\nconst years = computed(() => {\n const start = Math.floor(year.value / 12) * 12\n return Array.from({ length: 12 }, (_, i) => start + i)\n})\n\nconst outside = (key: string) => fromDateKey(key).getMonth() !== month.value\n\nfunction disabled(key: string) {\n if (min !== undefined && key < min) return true\n if (max !== undefined && key > max) return true\n return isDisabled?.(key) ?? false\n}\n\n/* What a day looks like: chosen, an end of the range, or inside it —\n including the stretch the pointer is hovering over while a range is half\n made, which is what makes the second click land where it looks like it\n will. */\nconst edges = computed(() => {\n if (mode !== 'range') return null\n if (pendingStart.value) {\n const other = hovered.value ?? pendingStart.value\n return pendingStart.value <= other\n ? { start: pendingStart.value, end: other }\n : { start: other, end: pendingStart.value }\n }\n return range.value ?? null\n})\n\nfunction stateOf(key: string) {\n if (mode === 'single') return single.value === key ? 'selected' : ''\n const span = edges.value\n if (!span) return ''\n if (key === span.start || key === span.end) return 'selected'\n return key > span.start && key < span.end ? 'inside' : ''\n}\n\nfunction choose(key: string) {\n if (disabled(key)) return\n focused.value = key\n\n if (mode === 'single') {\n model.value = key as Value\n return\n }\n\n if (!pendingStart.value) {\n pendingStart.value = key\n return\n }\n\n const start = pendingStart.value <= key ? pendingStart.value : key\n const end = pendingStart.value <= key ? key : pendingStart.value\n pendingStart.value = null\n hovered.value = null\n model.value = { start, end } as Value\n}\n\nasync function moveTo(key: string) {\n focused.value = key\n await nextTick()\n grid.value?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus()\n}\n\nfunction shiftMonths(count: number) {\n const date = new Date(year.value, month.value + count, 1)\n // The same day of the month where it exists: the 31st of a 30-day month\n // lands on the 30th rather than spilling into the next one.\n const last = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()\n date.setDate(Math.min(focusedDate.value.getDate(), last))\n return toDateKey(date)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n const key = event.key\n /* A week runs the way the language does, so in Arabic the day to the left\n of today is tomorrow. Up and down cross whole weeks and are the same\n either way. */\n const along = horizontalStep(key, event.currentTarget as Element)\n const jumps: Record<string, () => string> = {\n ArrowLeft: () => addDays(focused.value, along),\n ArrowRight: () => addDays(focused.value, along),\n ArrowUp: () => addDays(focused.value, -7),\n ArrowDown: () => addDays(focused.value, 7),\n Home: () =>\n addDays(focused.value, -((fromDateKey(focused.value).getDay() - weekStartsOn + 7) % 7)),\n End: () =>\n addDays(focused.value, 6 - ((fromDateKey(focused.value).getDay() - weekStartsOn + 7) % 7)),\n PageUp: () => shiftMonths(event.shiftKey ? -12 : -1),\n PageDown: () => shiftMonths(event.shiftKey ? 12 : 1),\n }\n\n const next = jumps[key]\n if (!next) return\n\n event.preventDefault()\n void moveTo(next())\n}\n\n/** The arrows move a month, a year, or twelve years — whatever is on screen. */\nfunction step(direction: 1 | -1) {\n if (view.value === 'days') return moveTo(shiftMonths(direction))\n const years = view.value === 'months' ? 1 : 12\n return moveTo(toDateKey(new Date(year.value + direction * years, month.value, 1)))\n}\n\n/** Down one view: years pick a year, months pick a month and land on days. */\nfunction chooseYear(value: number) {\n void moveTo(toDateKey(new Date(value, month.value, 1)))\n view.value = 'months'\n}\n\nfunction chooseMonth(index: number) {\n void moveTo(toDateKey(new Date(year.value, index, 1)))\n view.value = 'days'\n}\n\nfunction cycleView() {\n view.value = view.value === 'days' ? 'months' : view.value === 'months' ? 'years' : 'days'\n}\n\n/* Following the value: a date chosen elsewhere — a preset, a text field —\n turns the page to it. */\nwatch(\n () => [single.value, range.value?.start] as const,\n ([day, start]) => {\n const next = day ?? start\n if (next) focused.value = next\n },\n)\n</script>\n\n<template>\n <div class=\"rk-cal\">\n <div class=\"rk-cal-head\">\n <button\n type=\"button\"\n class=\"rk-cal-arrow focus-ring\"\n :aria-label=\"previousLabel\"\n @click=\"step(-1)\"\n >\n <ChevronLeft class=\"size-4\" aria-hidden=\"true\" />\n </button>\n\n <button\n type=\"button\"\n class=\"rk-cal-title focus-ring\"\n :aria-expanded=\"view !== 'days'\"\n @click=\"cycleView\"\n >\n {{ view === 'years' ? `${years[0]} – ${years[11]}` : monthTitle }}\n </button>\n\n <button\n type=\"button\"\n class=\"rk-cal-arrow focus-ring\"\n :aria-label=\"nextLabel\"\n @click=\"step(1)\"\n >\n <ChevronRight class=\"size-4\" aria-hidden=\"true\" />\n </button>\n </div>\n\n <!-- Days -->\n <div v-if=\"view === 'days'\" class=\"rk-cal-weekdays\" aria-hidden=\"true\">\n <span v-for=\"day in weekdays\" :key=\"day.long\">{{ day.short }}</span>\n </div>\n\n <div\n v-if=\"view === 'days'\"\n ref=\"grid\"\n class=\"rk-cal-grid\"\n role=\"grid\"\n :aria-label=\"monthTitle\"\n @keydown=\"onKeydown\"\n @pointerleave=\"hovered = null\"\n >\n <div v-for=\"(week, index) in weeks\" :key=\"index\" class=\"rk-cal-week\" role=\"row\">\n <!-- Selection belongs to the cell, not to the button inside it:\n `role=\"button\"` does not support `aria-selected`, so a reader\n was told nothing at all about which day is chosen. -->\n <div\n v-for=\"key in week\"\n :key=\"key\"\n role=\"gridcell\"\n class=\"rk-cal-cell\"\n :aria-selected=\"stateOf(key) === 'selected'\"\n >\n <button\n type=\"button\"\n class=\"rk-cal-day\"\n :class=\"[stateOf(key) && `is-${stateOf(key)}`, { 'is-outside': outside(key) }]\"\n :tabindex=\"key === focused ? 0 : -1\"\n :disabled=\"disabled(key)\"\n :aria-label=\"formatDate(fromDateKey(key), { dateStyle: 'full' })\"\n :aria-current=\"key === today ? 'date' : undefined\"\n @click=\"choose(key)\"\n @pointerenter=\"hovered = key\"\n >\n {{ fromDateKey(key).getDate() }}\n </button>\n </div>\n </div>\n </div>\n\n <!-- Months and years: the way to a date two years out without paging. -->\n <div v-else-if=\"view === 'months'\" class=\"rk-cal-blocks\">\n <button\n v-for=\"entry in months\"\n :key=\"entry.index\"\n type=\"button\"\n class=\"rk-cal-block focus-ring\"\n :aria-label=\"entry.long\"\n @click=\"chooseMonth(entry.index)\"\n >\n {{ entry.label }}\n </button>\n </div>\n\n <div v-else class=\"rk-cal-blocks\">\n <button\n v-for=\"value in years\"\n :key=\"value\"\n type=\"button\"\n class=\"rk-cal-block focus-ring\"\n @click=\"chooseYear(value)\"\n >\n {{ value }}\n </button>\n </div>\n </div>\n</template>\n\n<style scoped>\n.rk-cal {\n display: flex;\n width: 100%;\n max-width: 19rem;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-cal-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.25rem;\n}\n\n.rk-cal-arrow {\n display: grid;\n width: 2rem;\n height: 2rem;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-cal-arrow:hover {\n background: var(--color-muted);\n}\n\n.rk-cal-title {\n border-radius: var(--radius-cell);\n padding: 0.25rem 0.625rem;\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-ink);\n}\n\n.rk-cal-title:hover {\n background: var(--color-muted);\n}\n\n.rk-cal-weekdays,\n.rk-cal-week {\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n\n.rk-cal-weekdays {\n gap: 2px;\n font-size: 0.6875rem;\n font-weight: 600;\n text-align: center;\n color: var(--color-ink-soft);\n}\n\n.rk-cal-grid {\n display: grid;\n gap: 2px;\n}\n\n.rk-cal-cell {\n display: grid;\n place-items: center;\n}\n\n.rk-cal-day {\n display: grid;\n width: 100%;\n height: 2.25rem;\n place-items: center;\n border-radius: var(--radius-cell);\n font-size: 0.8125rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n transition:\n background-color var(--duration-fast) var(--ease-standard),\n color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-cal-day:hover:not(:disabled) {\n background: var(--color-muted);\n}\n\n.rk-cal-day:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n/* A day from the month either side: still reachable, visibly not this month. */\n/* `ink-soft` and nothing else. It used to carry `opacity: 0.55` on top,\n which took a colour that clears AA down to 2.2:1 — and these are real\n buttons with real labels, reachable by script and read out by name, not\n decoration. The softer ink is already the difference between this month\n and the next. */\n.rk-cal-day.is-outside {\n color: var(--color-ink-soft);\n}\n\n.rk-cal-day.is-inside {\n background: color-mix(in oklab, var(--color-primary) 14%, transparent);\n border-radius: 0;\n}\n\n.rk-cal-day.is-selected {\n background: var(--color-primary);\n color: var(--color-on-primary);\n font-weight: 600;\n opacity: 1;\n}\n\n.rk-cal-day[aria-current='date']:not(.is-selected) {\n box-shadow: inset 0 0 0 1px var(--color-primary);\n}\n\n.rk-cal-day:disabled {\n cursor: not-allowed;\n opacity: 0.3;\n}\n\n.rk-cal-blocks {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0.375rem;\n}\n\n.rk-cal-block {\n height: 2.5rem;\n border-radius: var(--radius-cell);\n font-size: 0.8125rem;\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-cal-block:hover {\n background: var(--color-muted);\n}\n</style>\n","<script setup lang=\"ts\" generic=\"M extends 'single' | 'range' = 'single'\">\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\n\nimport { addDays, fromDateKey, toDateKey, todayKey } from '../utils/date'\nimport type { WeekStart } from '../utils/date'\nimport { horizontalStep } from '../utils/direction'\nimport { formatDate } from '../utils/format'\n\nexport interface DateRange {\n /** `YYYY-MM-DD`, always local. */\n start: string\n end: string\n}\n\n/**\n * A month of days, for choosing one or a stretch of them.\n *\n * Dates are the kit's date keys — `YYYY-MM-DD`, always local — and never\n * `Date` objects across the boundary. `toISOString()` on a late evening in\n * Istanbul is tomorrow, which is the bug `toDateKey` exists to prevent, and\n * a component that handed back `Date`s would hand that bug to every app.\n *\n * The keyboard is the date-grid pattern: the arrows move a day and a week,\n * Home and End go to the ends of the week, Page Up and Down change the\n * month, and with Shift, the year. Only one day is in the Tab order at a\n * time, so a calendar is one stop rather than thirty-one.\n *\n * Every name a screen reader reads — the month, the weekdays, each day —\n * comes from `Intl` in the app's own locale. The two arrows are the only\n * words the app has to pass, because \"previous\" has no date to build it\n * from.\n */\nconst {\n mode = 'single' as M,\n min = undefined,\n max = undefined,\n isDisabled = undefined,\n weekStartsOn = 1,\n previousLabel,\n nextLabel,\n today = todayKey(),\n} = defineProps<{\n /** One day, or a stretch from one day to another. */\n mode?: M | undefined\n /** The earliest day that can be chosen, as `YYYY-MM-DD`. */\n min?: string | undefined\n max?: string | undefined\n /** Days to rule out inside the range — weekends, days already booked. */\n isDisabled?: ((key: string) => boolean) | undefined\n /** `1` Monday, `0` Sunday. */\n weekStartsOn?: WeekStart | undefined\n /** Accessible name of the back arrow, e.g. \"Previous month\". */\n previousLabel: string\n /** Accessible name of the forward arrow. */\n nextLabel: string\n /** Which day is marked as today. Given, so a test or a demo can fix it. */\n today?: string | undefined\n}>()\n\n/* `| undefined` outside the condition, not inside each branch: TypeScript\n can then see that `Value | undefined` is `Value`, which it cannot while\n `M` is still open. */\ntype Value = (M extends 'range' ? DateRange : string) | undefined\n\n/** The chosen day, or the chosen range, with `v-model`. */\nconst model = defineModel<Value>()\n\nconst single = computed(() => (mode === 'single' ? (model.value as string | undefined) : undefined))\nconst range = computed(() =>\n mode === 'range' ? (model.value as DateRange | undefined) : undefined,\n)\n\n/* Which month is on screen, and which day the keyboard is on. They move\n together: stepping off the edge of a month turns the page. */\nconst focused = ref(single.value ?? range.value?.start ?? today)\nconst view = ref<'days' | 'months' | 'years'>('days')\nconst grid = useTemplateRef<HTMLElement>('grid')\n\n/** Set while a range is half chosen, to paint what hovering would take. */\nconst pendingStart = ref<string | null>(null)\nconst hovered = ref<string | null>(null)\n\nconst focusedDate = computed(() => fromDateKey(focused.value))\nconst year = computed(() => focusedDate.value.getFullYear())\nconst month = computed(() => focusedDate.value.getMonth())\n\nconst monthTitle = computed(() => formatDate(focusedDate.value, { month: 'long', year: 'numeric' }))\n\n/** The weekday headings, in the app's locale, starting on the chosen day. */\nconst weekdays = computed(() => {\n // 2024-01-07 was a Sunday, so this walks a real week in the right order.\n const sunday = new Date(2024, 0, 7)\n return Array.from({ length: 7 }, (_, i) => {\n const date = new Date(sunday)\n date.setDate(sunday.getDate() + ((i + weekStartsOn) % 7))\n return {\n short: formatDate(date, { weekday: 'short' }),\n long: formatDate(date, { weekday: 'long' }),\n }\n })\n})\n\n/** Six weeks, always: a calendar that changes height as you page it jumps. */\nconst weeks = computed(() => {\n const first = new Date(year.value, month.value, 1)\n const offset = (first.getDay() - weekStartsOn + 7) % 7\n let cursor = addDays(toDateKey(first), -offset)\n\n return Array.from({ length: 6 }, () =>\n Array.from({ length: 7 }, () => {\n const key = cursor\n cursor = addDays(cursor, 1)\n return key\n }),\n )\n})\n\nconst months = computed(() =>\n Array.from({ length: 12 }, (_, i) => ({\n index: i,\n label: formatDate(new Date(year.value, i, 1), { month: 'short' }),\n long: formatDate(new Date(year.value, i, 1), { month: 'long' }),\n })),\n)\n\n/** A block of twelve years, the one the focused year falls in. */\nconst years = computed(() => {\n const start = Math.floor(year.value / 12) * 12\n return Array.from({ length: 12 }, (_, i) => start + i)\n})\n\nconst outside = (key: string) => fromDateKey(key).getMonth() !== month.value\n\nfunction disabled(key: string) {\n if (min !== undefined && key < min) return true\n if (max !== undefined && key > max) return true\n return isDisabled?.(key) ?? false\n}\n\n/* What a day looks like: chosen, an end of the range, or inside it —\n including the stretch the pointer is hovering over while a range is half\n made, which is what makes the second click land where it looks like it\n will. */\nconst edges = computed(() => {\n if (mode !== 'range') return null\n if (pendingStart.value) {\n const other = hovered.value ?? pendingStart.value\n return pendingStart.value <= other\n ? { start: pendingStart.value, end: other }\n : { start: other, end: pendingStart.value }\n }\n return range.value ?? null\n})\n\nfunction stateOf(key: string) {\n if (mode === 'single') return single.value === key ? 'selected' : ''\n const span = edges.value\n if (!span) return ''\n if (key === span.start || key === span.end) return 'selected'\n return key > span.start && key < span.end ? 'inside' : ''\n}\n\nfunction choose(key: string) {\n if (disabled(key)) return\n focused.value = key\n\n if (mode === 'single') {\n model.value = key as Value\n return\n }\n\n if (!pendingStart.value) {\n pendingStart.value = key\n return\n }\n\n const start = pendingStart.value <= key ? pendingStart.value : key\n const end = pendingStart.value <= key ? key : pendingStart.value\n pendingStart.value = null\n hovered.value = null\n model.value = { start, end } as Value\n}\n\nasync function moveTo(key: string) {\n focused.value = key\n await nextTick()\n grid.value?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus()\n}\n\nfunction shiftMonths(count: number) {\n const date = new Date(year.value, month.value + count, 1)\n // The same day of the month where it exists: the 31st of a 30-day month\n // lands on the 30th rather than spilling into the next one.\n const last = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()\n date.setDate(Math.min(focusedDate.value.getDate(), last))\n return toDateKey(date)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n const key = event.key\n /* A week runs the way the language does, so in Arabic the day to the left\n of today is tomorrow. Up and down cross whole weeks and are the same\n either way. */\n const along = horizontalStep(key, event.currentTarget as Element)\n const jumps: Record<string, () => string> = {\n ArrowLeft: () => addDays(focused.value, along),\n ArrowRight: () => addDays(focused.value, along),\n ArrowUp: () => addDays(focused.value, -7),\n ArrowDown: () => addDays(focused.value, 7),\n Home: () =>\n addDays(focused.value, -((fromDateKey(focused.value).getDay() - weekStartsOn + 7) % 7)),\n End: () =>\n addDays(focused.value, 6 - ((fromDateKey(focused.value).getDay() - weekStartsOn + 7) % 7)),\n PageUp: () => shiftMonths(event.shiftKey ? -12 : -1),\n PageDown: () => shiftMonths(event.shiftKey ? 12 : 1),\n }\n\n const next = jumps[key]\n if (!next) return\n\n event.preventDefault()\n void moveTo(next())\n}\n\n/** The arrows move a month, a year, or twelve years — whatever is on screen. */\nfunction step(direction: 1 | -1) {\n if (view.value === 'days') return moveTo(shiftMonths(direction))\n const years = view.value === 'months' ? 1 : 12\n return moveTo(toDateKey(new Date(year.value + direction * years, month.value, 1)))\n}\n\n/** Down one view: years pick a year, months pick a month and land on days. */\nfunction chooseYear(value: number) {\n void moveTo(toDateKey(new Date(value, month.value, 1)))\n view.value = 'months'\n}\n\nfunction chooseMonth(index: number) {\n void moveTo(toDateKey(new Date(year.value, index, 1)))\n view.value = 'days'\n}\n\nfunction cycleView() {\n view.value = view.value === 'days' ? 'months' : view.value === 'months' ? 'years' : 'days'\n}\n\n/* Following the value: a date chosen elsewhere — a preset, a text field —\n turns the page to it. */\nwatch(\n () => [single.value, range.value?.start] as const,\n ([day, start]) => {\n const next = day ?? start\n if (next) focused.value = next\n },\n)\n</script>\n\n<template>\n <div class=\"rk-cal\">\n <div class=\"rk-cal-head\">\n <button\n type=\"button\"\n class=\"rk-cal-arrow focus-ring\"\n :aria-label=\"previousLabel\"\n @click=\"step(-1)\"\n >\n <ChevronLeft class=\"size-4\" aria-hidden=\"true\" />\n </button>\n\n <button\n type=\"button\"\n class=\"rk-cal-title focus-ring\"\n :aria-expanded=\"view !== 'days'\"\n @click=\"cycleView\"\n >\n {{ view === 'years' ? `${years[0]} – ${years[11]}` : monthTitle }}\n </button>\n\n <button\n type=\"button\"\n class=\"rk-cal-arrow focus-ring\"\n :aria-label=\"nextLabel\"\n @click=\"step(1)\"\n >\n <ChevronRight class=\"size-4\" aria-hidden=\"true\" />\n </button>\n </div>\n\n <!-- Days -->\n <div v-if=\"view === 'days'\" class=\"rk-cal-weekdays\" aria-hidden=\"true\">\n <span v-for=\"day in weekdays\" :key=\"day.long\">{{ day.short }}</span>\n </div>\n\n <div\n v-if=\"view === 'days'\"\n ref=\"grid\"\n class=\"rk-cal-grid\"\n role=\"grid\"\n :aria-label=\"monthTitle\"\n @keydown=\"onKeydown\"\n @pointerleave=\"hovered = null\"\n >\n <div v-for=\"(week, index) in weeks\" :key=\"index\" class=\"rk-cal-week\" role=\"row\">\n <!-- Selection belongs to the cell, not to the button inside it:\n `role=\"button\"` does not support `aria-selected`, so a reader\n was told nothing at all about which day is chosen. -->\n <div\n v-for=\"key in week\"\n :key=\"key\"\n role=\"gridcell\"\n class=\"rk-cal-cell\"\n :aria-selected=\"stateOf(key) === 'selected'\"\n >\n <button\n type=\"button\"\n class=\"rk-cal-day\"\n :class=\"[stateOf(key) && `is-${stateOf(key)}`, { 'is-outside': outside(key) }]\"\n :tabindex=\"key === focused ? 0 : -1\"\n :disabled=\"disabled(key)\"\n :aria-label=\"formatDate(fromDateKey(key), { dateStyle: 'full' })\"\n :aria-current=\"key === today ? 'date' : undefined\"\n @click=\"choose(key)\"\n @pointerenter=\"hovered = key\"\n >\n {{ fromDateKey(key).getDate() }}\n </button>\n </div>\n </div>\n </div>\n\n <!-- Months and years: the way to a date two years out without paging. -->\n <div v-else-if=\"view === 'months'\" class=\"rk-cal-blocks\">\n <button\n v-for=\"entry in months\"\n :key=\"entry.index\"\n type=\"button\"\n class=\"rk-cal-block focus-ring\"\n :aria-label=\"entry.long\"\n @click=\"chooseMonth(entry.index)\"\n >\n {{ entry.label }}\n </button>\n </div>\n\n <div v-else class=\"rk-cal-blocks\">\n <button\n v-for=\"value in years\"\n :key=\"value\"\n type=\"button\"\n class=\"rk-cal-block focus-ring\"\n @click=\"chooseYear(value)\"\n >\n {{ value }}\n </button>\n </div>\n </div>\n</template>\n\n<style scoped>\n.rk-cal {\n display: flex;\n width: 100%;\n max-width: 19rem;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-cal-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.25rem;\n}\n\n.rk-cal-arrow {\n display: grid;\n width: 2rem;\n height: 2rem;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-cal-arrow:hover {\n background: var(--color-muted);\n}\n\n.rk-cal-title {\n border-radius: var(--radius-cell);\n padding: 0.25rem 0.625rem;\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-ink);\n}\n\n.rk-cal-title:hover {\n background: var(--color-muted);\n}\n\n.rk-cal-weekdays,\n.rk-cal-week {\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n\n.rk-cal-weekdays {\n gap: 2px;\n font-size: 0.6875rem;\n font-weight: 600;\n text-align: center;\n color: var(--color-ink-soft);\n}\n\n.rk-cal-grid {\n display: grid;\n gap: 2px;\n}\n\n.rk-cal-cell {\n display: grid;\n place-items: center;\n}\n\n.rk-cal-day {\n display: grid;\n width: 100%;\n height: 2.25rem;\n place-items: center;\n border-radius: var(--radius-cell);\n font-size: 0.8125rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n transition:\n background-color var(--duration-fast) var(--ease-standard),\n color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-cal-day:hover:not(:disabled) {\n background: var(--color-muted);\n}\n\n.rk-cal-day:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n/* A day from the month either side: still reachable, visibly not this month. */\n/* `ink-soft` and nothing else. It used to carry `opacity: 0.55` on top,\n which took a colour that clears AA down to 2.2:1 — and these are real\n buttons with real labels, reachable by script and read out by name, not\n decoration. The softer ink is already the difference between this month\n and the next. */\n.rk-cal-day.is-outside {\n color: var(--color-ink-soft);\n}\n\n.rk-cal-day.is-inside {\n background: color-mix(in oklab, var(--color-primary) 14%, transparent);\n border-radius: 0;\n}\n\n.rk-cal-day.is-selected {\n background: var(--color-primary);\n color: var(--color-on-primary);\n font-weight: 600;\n opacity: 1;\n}\n\n.rk-cal-day[aria-current='date']:not(.is-selected) {\n box-shadow: inset 0 0 0 1px var(--color-primary);\n}\n\n.rk-cal-day:disabled {\n cursor: not-allowed;\n opacity: 0.3;\n}\n\n.rk-cal-blocks {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0.375rem;\n}\n\n.rk-cal-block {\n height: 2.5rem;\n border-radius: var(--radius-cell);\n font-size: 0.8125rem;\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-cal-block:hover {\n background: var(--color-muted);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { X } from 'lucide-vue-next'\nimport type { Component } from 'vue'\n\n/**\n * A short label with, when it is one of a set someone assembled, a way to\n * take it off: a filter, a recipient, a tag.\n *\n * Next to `BaseBadge`, which is a standing label and never a control. A chip\n * is removable, or selectable, or both. If it neither removes nor selects,\n * reach for the badge.\n *\n * `removeLabel` is required when it can be removed, because \"×\" alone is a\n * button a screen reader reads as \"times\".\n *\n * A chip that both selects and removes is two buttons side by side, never\n * one inside the other: a button nested in a button is not a control a\n * browser or a screen reader can make sense of.\n */\nconst {\n label,\n icon = undefined,\n tone = 'neutral',\n removeLabel = undefined,\n selected = undefined,\n disabled = false,\n} = defineProps<{\n /** The text. Already translated. */\n label: string\n icon?: Component | undefined\n tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined\n /** Given, the chip grows a remove button. Its accessible name. */\n removeLabel?: string | undefined\n /** Given, the whole chip is a toggle and this is its state. */\n selected?: boolean | undefined\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ remove: []; select: [] }>()\n</script>\n\n<template>\n <span\n class=\"rk-chip\"\n :class=\"[`tone-${tone}`, { 'is-selected': selected, 'is-disabled': disabled }]\"\n >\n <component\n :is=\"selected === undefined ? 'span' : 'button'\"\n :type=\"selected === undefined ? undefined : 'button'\"\n class=\"rk-chip-body\"\n :class=\"{ 'focus-ring is-button': selected !== undefined }\"\n :aria-pressed=\"selected\"\n :disabled=\"selected === undefined ? undefined : disabled\"\n @click=\"selected === undefined ? undefined : emit('select')\"\n >\n <component :is=\"icon\" v-if=\"icon\" class=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ label }}</span>\n </component>\n\n <button\n v-if=\"removeLabel\"\n type=\"button\"\n class=\"rk-chip-remove focus-ring\"\n :aria-label=\"removeLabel\"\n :disabled=\"disabled\"\n @click=\"emit('remove')\"\n >\n <X class=\"size-3\" aria-hidden=\"true\" />\n </button>\n </span>\n</template>\n\n<style scoped>\n.rk-chip {\n display: inline-flex;\n max-width: 100%;\n align-items: center;\n gap: 0.375rem;\n border-radius: 9999px;\n border: 1px solid transparent;\n padding: 0.1875rem 0.5rem 0.1875rem 0.625rem;\n font-size: 0.8125rem;\n font-weight: 500;\n background: var(--color-muted);\n color: var(--color-ink);\n}\n\n.rk-chip-body {\n display: inline-flex;\n min-width: 0;\n align-items: center;\n gap: 0.375rem;\n border-radius: 9999px;\n color: inherit;\n}\n\n.rk-chip-body.is-button {\n cursor: pointer;\n}\n\n.rk-chip.is-selected {\n background: var(--color-primary);\n color: var(--color-on-primary);\n}\n\n.rk-chip.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* The tones tint rather than fill: a row of chips in five solid colours is a\n row where nothing stands out. The selected one fills, and that is the point\n of it.\n \n The ground and the edge carry the role; `ink` carries the words. Two of\n these used to write the role straight onto a tint of itself and the other\n two mixed it most of the way there, which is the same fault by degrees —\n a browser measured the warning chip at 4.13:1. There is one answer to\n this in the kit now, and `BaseBadge`, `BaseAlert` and `BaseListbox` give\n the same one. */\n.rk-chip.tone-primary {\n background: color-mix(in oklab, var(--color-primary) 12%, transparent);\n border-color: color-mix(in oklab, var(--color-primary) 25%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip.tone-success {\n background: color-mix(in oklab, var(--color-positive) 14%, transparent);\n border-color: color-mix(in oklab, var(--color-positive) 28%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip.tone-warning {\n background: color-mix(in oklab, var(--color-warning) 16%, transparent);\n border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip.tone-danger {\n background: color-mix(in oklab, var(--color-negative) 12%, transparent);\n border-color: color-mix(in oklab, var(--color-negative) 26%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip-remove {\n display: grid;\n width: 1.125rem;\n height: 1.125rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n color: currentColor;\n opacity: 0.7;\n transition: opacity var(--duration-fast) var(--ease-standard);\n}\n\n.rk-chip-remove:hover {\n opacity: 1;\n background: color-mix(in oklab, currentColor 15%, transparent);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { X } from 'lucide-vue-next'\nimport type { Component } from 'vue'\n\n/**\n * A short label with, when it is one of a set someone assembled, a way to\n * take it off: a filter, a recipient, a tag.\n *\n * Next to `BaseBadge`, which is a standing label and never a control. A chip\n * is removable, or selectable, or both. If it neither removes nor selects,\n * reach for the badge.\n *\n * `removeLabel` is required when it can be removed, because \"×\" alone is a\n * button a screen reader reads as \"times\".\n *\n * A chip that both selects and removes is two buttons side by side, never\n * one inside the other: a button nested in a button is not a control a\n * browser or a screen reader can make sense of.\n */\nconst {\n label,\n icon = undefined,\n tone = 'neutral',\n removeLabel = undefined,\n selected = undefined,\n disabled = false,\n} = defineProps<{\n /** The text. Already translated. */\n label: string\n icon?: Component | undefined\n tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined\n /** Given, the chip grows a remove button. Its accessible name. */\n removeLabel?: string | undefined\n /** Given, the whole chip is a toggle and this is its state. */\n selected?: boolean | undefined\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ remove: []; select: [] }>()\n</script>\n\n<template>\n <span\n class=\"rk-chip\"\n :class=\"[`tone-${tone}`, { 'is-selected': selected, 'is-disabled': disabled }]\"\n >\n <component\n :is=\"selected === undefined ? 'span' : 'button'\"\n :type=\"selected === undefined ? undefined : 'button'\"\n class=\"rk-chip-body\"\n :class=\"{ 'focus-ring is-button': selected !== undefined }\"\n :aria-pressed=\"selected\"\n :disabled=\"selected === undefined ? undefined : disabled\"\n @click=\"selected === undefined ? undefined : emit('select')\"\n >\n <component :is=\"icon\" v-if=\"icon\" class=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ label }}</span>\n </component>\n\n <button\n v-if=\"removeLabel\"\n type=\"button\"\n class=\"rk-chip-remove focus-ring\"\n :aria-label=\"removeLabel\"\n :disabled=\"disabled\"\n @click=\"emit('remove')\"\n >\n <X class=\"size-3\" aria-hidden=\"true\" />\n </button>\n </span>\n</template>\n\n<style scoped>\n.rk-chip {\n display: inline-flex;\n max-width: 100%;\n align-items: center;\n gap: 0.375rem;\n border-radius: 9999px;\n border: 1px solid transparent;\n padding: 0.1875rem 0.5rem 0.1875rem 0.625rem;\n font-size: 0.8125rem;\n font-weight: 500;\n background: var(--color-muted);\n color: var(--color-ink);\n}\n\n.rk-chip-body {\n display: inline-flex;\n min-width: 0;\n align-items: center;\n gap: 0.375rem;\n border-radius: 9999px;\n color: inherit;\n}\n\n.rk-chip-body.is-button {\n cursor: pointer;\n}\n\n.rk-chip.is-selected {\n background: var(--color-primary);\n color: var(--color-on-primary);\n}\n\n.rk-chip.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* The tones tint rather than fill: a row of chips in five solid colours is a\n row where nothing stands out. The selected one fills, and that is the point\n of it.\n \n The ground and the edge carry the role; `ink` carries the words. Two of\n these used to write the role straight onto a tint of itself and the other\n two mixed it most of the way there, which is the same fault by degrees —\n a browser measured the warning chip at 4.13:1. There is one answer to\n this in the kit now, and `BaseBadge`, `BaseAlert` and `BaseListbox` give\n the same one. */\n.rk-chip.tone-primary {\n background: color-mix(in oklab, var(--color-primary) 12%, transparent);\n border-color: color-mix(in oklab, var(--color-primary) 25%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip.tone-success {\n background: color-mix(in oklab, var(--color-positive) 14%, transparent);\n border-color: color-mix(in oklab, var(--color-positive) 28%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip.tone-warning {\n background: color-mix(in oklab, var(--color-warning) 16%, transparent);\n border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip.tone-danger {\n background: color-mix(in oklab, var(--color-negative) 12%, transparent);\n border-color: color-mix(in oklab, var(--color-negative) 26%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip-remove {\n display: grid;\n width: 1.125rem;\n height: 1.125rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n color: currentColor;\n opacity: 0.7;\n transition: opacity var(--duration-fast) var(--ease-standard);\n}\n\n.rk-chip-remove:hover {\n opacity: 1;\n background: color-mix(in oklab, currentColor 15%, transparent);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A keyboard key, or a chord of them: `⌘ K`, `Ctrl Shift P`.\n *\n * `<kbd>` is the element the browser and assistive tech already understand,\n * so this is that element with the kit's surface on it. A chord is separate\n * keys with a joiner between them rather than one long key, which is how a\n * screen reader reads it as three things to press.\n *\n * The keys are the app's words — `⌘` on a Mac and `Ctrl` elsewhere is a\n * decision about the reader's machine, not about this component.\n */\nconst {\n keys,\n joiner = '',\n size = 'md',\n} = defineProps<{\n /** One key, or the keys of a chord: `['⌘', 'K']`. */\n keys: string | readonly string[]\n /** Drawn between the keys — \"+\", \"then\". Empty, they simply sit apart. */\n joiner?: string | undefined\n size?: 'sm' | 'md' | undefined\n}>()\n\nconst list = computed(() => (typeof keys === 'string' ? [keys] : keys))\n</script>\n\n<template>\n <span class=\"rk-kbd\" :class=\"`is-${size}`\">\n <template v-for=\"(key, index) in list\" :key=\"key\">\n <span v-if=\"index > 0 && joiner\" class=\"rk-kbd-joiner\" aria-hidden=\"true\">{{ joiner }}</span>\n <kbd class=\"rk-kbd-key control\">{{ key }}</kbd>\n </template>\n </span>\n</template>\n\n<style scoped>\n.rk-kbd {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.rk-kbd-key {\n display: inline-grid;\n min-width: 1.5rem;\n height: 1.5rem;\n place-items: center;\n border-radius: var(--radius-cell);\n padding: 0 0.375rem;\n font-family: inherit;\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1;\n color: var(--color-ink-soft);\n}\n\n.is-sm .rk-kbd-key {\n min-width: 1.25rem;\n height: 1.25rem;\n padding: 0 0.25rem;\n font-size: 0.6875rem;\n}\n\n.rk-kbd-joiner {\n font-size: 0.6875rem;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A keyboard key, or a chord of them: `⌘ K`, `Ctrl Shift P`.\n *\n * `<kbd>` is the element the browser and assistive tech already understand,\n * so this is that element with the kit's surface on it. A chord is separate\n * keys with a joiner between them rather than one long key, which is how a\n * screen reader reads it as three things to press.\n *\n * The keys are the app's words — `⌘` on a Mac and `Ctrl` elsewhere is a\n * decision about the reader's machine, not about this component.\n */\nconst {\n keys,\n joiner = '',\n size = 'md',\n} = defineProps<{\n /** One key, or the keys of a chord: `['⌘', 'K']`. */\n keys: string | readonly string[]\n /** Drawn between the keys — \"+\", \"then\". Empty, they simply sit apart. */\n joiner?: string | undefined\n size?: 'sm' | 'md' | undefined\n}>()\n\nconst list = computed(() => (typeof keys === 'string' ? [keys] : keys))\n</script>\n\n<template>\n <span class=\"rk-kbd\" :class=\"`is-${size}`\">\n <template v-for=\"(key, index) in list\" :key=\"key\">\n <span v-if=\"index > 0 && joiner\" class=\"rk-kbd-joiner\" aria-hidden=\"true\">{{ joiner }}</span>\n <kbd class=\"rk-kbd-key control\">{{ key }}</kbd>\n </template>\n </span>\n</template>\n\n<style scoped>\n.rk-kbd {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.rk-kbd-key {\n display: inline-grid;\n min-width: 1.5rem;\n height: 1.5rem;\n place-items: center;\n border-radius: var(--radius-cell);\n padding: 0 0.375rem;\n font-family: inherit;\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1;\n color: var(--color-ink-soft);\n}\n\n.is-sm .rk-kbd-key {\n min-width: 1.25rem;\n height: 1.25rem;\n padding: 0 0.25rem;\n font-size: 0.6875rem;\n}\n\n.rk-kbd-joiner {\n font-size: 0.6875rem;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ArrowUpRight } from 'lucide-vue-next'\nimport { computed } from 'vue'\nimport { RouterLink } from 'vue-router'\n\n/**\n * A link in a sentence — the one thing a button is not.\n *\n * `BaseButton` has a `link` variant for an action that should read as text;\n * this is the other way round: a real link, to a real place, that navigates.\n * If pressing it does something rather than goes somewhere, it is a button.\n *\n * `to` routes and `href` leaves. A link that leaves in a new tab carries the\n * mark that says so, and `rel=\"noopener\"`, which is not a nicety: without it\n * the page that opens can reach back through `window.opener`.\n */\nconst {\n to = undefined,\n href = undefined,\n external = undefined,\n tone = 'primary',\n underline = 'hover',\n} = defineProps<{\n /** A route. Uses `RouterLink`, so the app needs vue-router. */\n to?: string | Record<string, unknown> | undefined\n /** A URL. Anything not on this site should be `external`. */\n href?: string | undefined\n /** Opens in a new tab, with the mark and the `rel` that belong to that. */\n external?: boolean | undefined\n tone?: 'primary' | 'ink' | undefined\n underline?: 'always' | 'hover' | 'none' | undefined\n}>()\n\ndefineSlots<{ default: () => unknown }>()\n\nconst is = computed(() => (to !== undefined ? RouterLink : 'a'))\n</script>\n\n<template>\n <component\n :is=\"is\"\n class=\"rk-link focus-ring\"\n :class=\"[`tone-${tone}`, `underline-${underline}`]\"\n v-bind=\"\n to !== undefined\n ? { to }\n : {\n href,\n target: external ? '_blank' : undefined,\n rel: external ? 'noopener noreferrer' : undefined,\n }\n \"\n >\n <slot />\n <ArrowUpRight v-if=\"external\" class=\"rk-link-mark\" aria-hidden=\"true\" />\n </component>\n</template>\n\n<style scoped>\n.rk-link {\n display: inline;\n border-radius: var(--radius-cell);\n font-weight: 500;\n text-underline-offset: 0.2em;\n transition: color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-link.tone-primary {\n color: var(--color-primary);\n}\n\n.rk-link.tone-ink {\n color: var(--color-ink);\n}\n\n.rk-link.underline-always {\n text-decoration: underline;\n}\n\n.rk-link.underline-hover:hover,\n.rk-link.underline-none:hover {\n text-decoration: underline;\n}\n\n.rk-link.underline-none:hover {\n text-decoration: none;\n}\n\n.rk-link-mark {\n display: inline-block;\n width: 0.875em;\n height: 0.875em;\n vertical-align: -0.1em;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ArrowUpRight } from 'lucide-vue-next'\nimport { computed } from 'vue'\nimport { RouterLink } from 'vue-router'\n\n/**\n * A link in a sentence — the one thing a button is not.\n *\n * `BaseButton` has a `link` variant for an action that should read as text;\n * this is the other way round: a real link, to a real place, that navigates.\n * If pressing it does something rather than goes somewhere, it is a button.\n *\n * `to` routes and `href` leaves. A link that leaves in a new tab carries the\n * mark that says so, and `rel=\"noopener\"`, which is not a nicety: without it\n * the page that opens can reach back through `window.opener`.\n */\nconst {\n to = undefined,\n href = undefined,\n external = undefined,\n tone = 'primary',\n underline = 'hover',\n} = defineProps<{\n /** A route. Uses `RouterLink`, so the app needs vue-router. */\n to?: string | Record<string, unknown> | undefined\n /** A URL. Anything not on this site should be `external`. */\n href?: string | undefined\n /** Opens in a new tab, with the mark and the `rel` that belong to that. */\n external?: boolean | undefined\n tone?: 'primary' | 'ink' | undefined\n underline?: 'always' | 'hover' | 'none' | undefined\n}>()\n\ndefineSlots<{ default: () => unknown }>()\n\nconst is = computed(() => (to !== undefined ? RouterLink : 'a'))\n</script>\n\n<template>\n <component\n :is=\"is\"\n class=\"rk-link focus-ring\"\n :class=\"[`tone-${tone}`, `underline-${underline}`]\"\n v-bind=\"\n to !== undefined\n ? { to }\n : {\n href,\n target: external ? '_blank' : undefined,\n rel: external ? 'noopener noreferrer' : undefined,\n }\n \"\n >\n <slot />\n <ArrowUpRight v-if=\"external\" class=\"rk-link-mark\" aria-hidden=\"true\" />\n </component>\n</template>\n\n<style scoped>\n.rk-link {\n display: inline;\n border-radius: var(--radius-cell);\n font-weight: 500;\n text-underline-offset: 0.2em;\n transition: color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-link.tone-primary {\n color: var(--color-primary);\n}\n\n.rk-link.tone-ink {\n color: var(--color-ink);\n}\n\n.rk-link.underline-always {\n text-decoration: underline;\n}\n\n.rk-link.underline-hover:hover,\n.rk-link.underline-none:hover {\n text-decoration: underline;\n}\n\n.rk-link.underline-none:hover {\n text-decoration: none;\n}\n\n.rk-link-mark {\n display: inline-block;\n width: 0.875em;\n height: 0.875em;\n vertical-align: -0.1em;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Star } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nimport { horizontalStep } from '../utils/direction'\n\n/**\n * A score out of five, given or shown.\n *\n * Two components in one, and the difference is `readonly`: given, it is a\n * slider you can drag with the arrow keys; read-only, it is an image with\n * the score as its name, and nothing to Tab into. A row of five buttons that\n * do nothing is five stops in the tab order for a number.\n *\n * `valueLabel` builds the spoken name — \"4 out of 5\" — because the words and\n * their order are the app's language, not the kit's.\n */\nconst {\n max = 5,\n label,\n valueLabel,\n readonly = false,\n size = 'md',\n allowClear = true,\n} = defineProps<{\n max?: number | undefined\n /** What is being rated: \"Difficulty\", \"Your rating\". Already translated. */\n label: string\n /** The spoken value: `(value, max) => \\`${value} out of ${max}\\`.` */\n valueLabel: (value: number, max: number) => string\n /** Shows a score rather than asks for one. */\n readonly?: boolean | undefined\n size?: 'sm' | 'md' | 'lg' | undefined\n /** Pressing the current score again clears it. */\n allowClear?: boolean | undefined\n}>()\n\n/** The score, with `v-model`. `0` is none given. */\nconst model = defineModel<number>({ default: 0 })\n\nconst hovered = ref(0)\nconst shown = computed(() => hovered.value || model.value)\nconst stars = computed(() => Array.from({ length: max }, (_, i) => i + 1))\n\nfunction pick(value: number) {\n if (readonly) return\n model.value = allowClear && model.value === value ? 0 : value\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n /* The stars run the way the language does, so the one to the left is the\n higher score in Arabic. Up is always more. */\n const along = horizontalStep(event.key, event.currentTarget as Element)\n const moves: Record<string, number> = {\n ArrowRight: model.value + along,\n ArrowLeft: model.value + along,\n ArrowUp: model.value + 1,\n ArrowDown: model.value - 1,\n Home: 0,\n End: max,\n }\n const next = moves[event.key]\n if (next === undefined) return\n\n event.preventDefault()\n model.value = Math.min(max, Math.max(0, next))\n}\n</script>\n\n<template>\n <div\n class=\"rk-rating\"\n :class=\"[`is-${size}`, { 'is-readonly': readonly }]\"\n :role=\"readonly ? 'img' : 'slider'\"\n :aria-label=\"`${label}: ${valueLabel(model, max)}`\"\n :tabindex=\"readonly ? undefined : 0\"\n :aria-valuenow=\"readonly ? undefined : model\"\n :aria-valuemin=\"readonly ? undefined : 0\"\n :aria-valuemax=\"readonly ? undefined : max\"\n :aria-valuetext=\"readonly ? undefined : valueLabel(model, max)\"\n @keydown=\"readonly ? undefined : onKeydown($event)\"\n @pointerleave=\"hovered = 0\"\n >\n <!--\n Spans, never buttons, even though these are pressable.\n\n The slider above is the control: it is what takes focus, what the\n arrows move, and what a reader is told about. A `<button>` in here\n was a second interactive thing inside it, and `aria-hidden` did not\n undo that — a mouse press still moved focus onto an element hidden\n from the accessibility tree, taking the slider's own focus ring with\n it. A span has no such claim, and the pointer works exactly as before.\n -->\n <span\n v-for=\"star in stars\"\n :key=\"star\"\n class=\"rk-rating-star\"\n :class=\"{ 'is-on': star <= shown }\"\n aria-hidden=\"true\"\n @click=\"readonly ? undefined : pick(star)\"\n @pointerenter=\"readonly ? undefined : (hovered = star)\"\n >\n <Star class=\"rk-rating-icon\" />\n </span>\n </div>\n</template>\n\n<style scoped>\n.rk-rating {\n display: inline-flex;\n align-items: center;\n gap: 0.125rem;\n border-radius: var(--radius-cell);\n}\n\n.rk-rating:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-rating-star {\n display: grid;\n place-items: center;\n padding: 0.125rem;\n color: var(--color-hair);\n transition:\n color var(--duration-fast) var(--ease-standard),\n transform var(--duration-fast) var(--ease-standard);\n}\n\n.rk-rating:not(.is-readonly) .rk-rating-star {\n cursor: pointer;\n}\n\n.rk-rating-star.is-on {\n color: var(--color-warning);\n}\n\n.rk-rating:not(.is-readonly) .rk-rating-star:hover {\n transform: scale(1.12);\n}\n\n.rk-rating-icon {\n width: 1.25rem;\n height: 1.25rem;\n fill: currentColor;\n stroke-width: 1.25;\n}\n\n.is-sm .rk-rating-icon {\n width: 1rem;\n height: 1rem;\n}\n\n.is-lg .rk-rating-icon {\n width: 1.75rem;\n height: 1.75rem;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-rating-star {\n transition: none;\n }\n\n .rk-rating:not(.is-readonly) .rk-rating-star:hover {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Star } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nimport { horizontalStep } from '../utils/direction'\n\n/**\n * A score out of five, given or shown.\n *\n * Two components in one, and the difference is `readonly`: given, it is a\n * slider you can drag with the arrow keys; read-only, it is an image with\n * the score as its name, and nothing to Tab into. A row of five buttons that\n * do nothing is five stops in the tab order for a number.\n *\n * `valueLabel` builds the spoken name — \"4 out of 5\" — because the words and\n * their order are the app's language, not the kit's.\n */\nconst {\n max = 5,\n label,\n valueLabel,\n readonly = false,\n size = 'md',\n allowClear = true,\n} = defineProps<{\n max?: number | undefined\n /** What is being rated: \"Difficulty\", \"Your rating\". Already translated. */\n label: string\n /** The spoken value: `(value, max) => \\`${value} out of ${max}\\`.` */\n valueLabel: (value: number, max: number) => string\n /** Shows a score rather than asks for one. */\n readonly?: boolean | undefined\n size?: 'sm' | 'md' | 'lg' | undefined\n /** Pressing the current score again clears it. */\n allowClear?: boolean | undefined\n}>()\n\n/** The score, with `v-model`. `0` is none given. */\nconst model = defineModel<number>({ default: 0 })\n\nconst hovered = ref(0)\nconst shown = computed(() => hovered.value || model.value)\nconst stars = computed(() => Array.from({ length: max }, (_, i) => i + 1))\n\nfunction pick(value: number) {\n if (readonly) return\n model.value = allowClear && model.value === value ? 0 : value\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n /* The stars run the way the language does, so the one to the left is the\n higher score in Arabic. Up is always more. */\n const along = horizontalStep(event.key, event.currentTarget as Element)\n const moves: Record<string, number> = {\n ArrowRight: model.value + along,\n ArrowLeft: model.value + along,\n ArrowUp: model.value + 1,\n ArrowDown: model.value - 1,\n Home: 0,\n End: max,\n }\n const next = moves[event.key]\n if (next === undefined) return\n\n event.preventDefault()\n model.value = Math.min(max, Math.max(0, next))\n}\n</script>\n\n<template>\n <div\n class=\"rk-rating\"\n :class=\"[`is-${size}`, { 'is-readonly': readonly }]\"\n :role=\"readonly ? 'img' : 'slider'\"\n :aria-label=\"`${label}: ${valueLabel(model, max)}`\"\n :tabindex=\"readonly ? undefined : 0\"\n :aria-valuenow=\"readonly ? undefined : model\"\n :aria-valuemin=\"readonly ? undefined : 0\"\n :aria-valuemax=\"readonly ? undefined : max\"\n :aria-valuetext=\"readonly ? undefined : valueLabel(model, max)\"\n @keydown=\"readonly ? undefined : onKeydown($event)\"\n @pointerleave=\"hovered = 0\"\n >\n <!--\n Spans, never buttons, even though these are pressable.\n\n The slider above is the control: it is what takes focus, what the\n arrows move, and what a reader is told about. A `<button>` in here\n was a second interactive thing inside it, and `aria-hidden` did not\n undo that — a mouse press still moved focus onto an element hidden\n from the accessibility tree, taking the slider's own focus ring with\n it. A span has no such claim, and the pointer works exactly as before.\n -->\n <span\n v-for=\"star in stars\"\n :key=\"star\"\n class=\"rk-rating-star\"\n :class=\"{ 'is-on': star <= shown }\"\n aria-hidden=\"true\"\n @click=\"readonly ? undefined : pick(star)\"\n @pointerenter=\"readonly ? undefined : (hovered = star)\"\n >\n <Star class=\"rk-rating-icon\" />\n </span>\n </div>\n</template>\n\n<style scoped>\n.rk-rating {\n display: inline-flex;\n align-items: center;\n gap: 0.125rem;\n border-radius: var(--radius-cell);\n}\n\n.rk-rating:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-rating-star {\n display: grid;\n place-items: center;\n padding: 0.125rem;\n color: var(--color-hair);\n transition:\n color var(--duration-fast) var(--ease-standard),\n transform var(--duration-fast) var(--ease-standard);\n}\n\n.rk-rating:not(.is-readonly) .rk-rating-star {\n cursor: pointer;\n}\n\n.rk-rating-star.is-on {\n color: var(--color-warning);\n}\n\n.rk-rating:not(.is-readonly) .rk-rating-star:hover {\n transform: scale(1.12);\n}\n\n.rk-rating-icon {\n width: 1.25rem;\n height: 1.25rem;\n fill: currentColor;\n stroke-width: 1.25;\n}\n\n.is-sm .rk-rating-icon {\n width: 1rem;\n height: 1rem;\n}\n\n.is-lg .rk-rating-icon {\n width: 1.75rem;\n height: 1.75rem;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-rating-star {\n transition: none;\n }\n\n .rk-rating:not(.is-readonly) .rk-rating-star:hover {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * A line between things — with, when it helps, a word on it.\n *\n * `role=\"separator\"` when it only divides, and nothing at all to assistive\n * tech when it carries a label, because then the text is the point and the\n * line is decoration around it.\n *\n * Vertical needs a height from its parent: inside a flex row, that is\n * `align-items: stretch`, which is the default.\n */\nconst {\n orientation = 'horizontal',\n label = '',\n spacing = 'md',\n} = defineProps<{\n orientation?: 'horizontal' | 'vertical' | undefined\n /** A word in the middle of the line: \"or\", \"Today\". Already translated. */\n label?: string | undefined\n /** Room around it. `none` for a divider inside a list that has its own. */\n spacing?: 'none' | 'sm' | 'md' | undefined\n}>()\n</script>\n\n<template>\n <div\n v-if=\"label\"\n class=\"rk-sep-labelled\"\n :class=\"[`is-${orientation}`, `space-${spacing}`]\"\n aria-hidden=\"true\"\n >\n <span class=\"rk-sep-line\" />\n <span class=\"rk-sep-label\">{{ label }}</span>\n <span class=\"rk-sep-line\" />\n </div>\n\n <div\n v-else\n class=\"rk-sep\"\n :class=\"[`is-${orientation}`, `space-${spacing}`]\"\n role=\"separator\"\n :aria-orientation=\"orientation\"\n />\n</template>\n\n<style scoped>\n.rk-sep,\n.rk-sep-labelled {\n --rk-sep-space: 1rem;\n}\n\n.space-sm {\n --rk-sep-space: 0.5rem;\n}\n\n.space-none {\n --rk-sep-space: 0px;\n}\n\n.rk-sep.is-horizontal {\n height: 1px;\n width: 100%;\n margin-block: var(--rk-sep-space);\n background: var(--color-hair);\n}\n\n.rk-sep.is-vertical {\n width: 1px;\n align-self: stretch;\n min-height: 1rem;\n margin-inline: var(--rk-sep-space);\n background: var(--color-hair);\n}\n\n.rk-sep-labelled {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin-block: var(--rk-sep-space);\n}\n\n.rk-sep-labelled.is-vertical {\n flex-direction: column;\n align-self: stretch;\n margin-block: 0;\n margin-inline: var(--rk-sep-space);\n}\n\n.rk-sep-line {\n flex: 1;\n background: var(--color-hair);\n}\n\n.is-horizontal .rk-sep-line {\n height: 1px;\n}\n\n.is-vertical .rk-sep-line {\n width: 1px;\n}\n\n.rk-sep-label {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * A line between things — with, when it helps, a word on it.\n *\n * `role=\"separator\"` when it only divides, and nothing at all to assistive\n * tech when it carries a label, because then the text is the point and the\n * line is decoration around it.\n *\n * Vertical needs a height from its parent: inside a flex row, that is\n * `align-items: stretch`, which is the default.\n */\nconst {\n orientation = 'horizontal',\n label = '',\n spacing = 'md',\n} = defineProps<{\n orientation?: 'horizontal' | 'vertical' | undefined\n /** A word in the middle of the line: \"or\", \"Today\". Already translated. */\n label?: string | undefined\n /** Room around it. `none` for a divider inside a list that has its own. */\n spacing?: 'none' | 'sm' | 'md' | undefined\n}>()\n</script>\n\n<template>\n <div\n v-if=\"label\"\n class=\"rk-sep-labelled\"\n :class=\"[`is-${orientation}`, `space-${spacing}`]\"\n aria-hidden=\"true\"\n >\n <span class=\"rk-sep-line\" />\n <span class=\"rk-sep-label\">{{ label }}</span>\n <span class=\"rk-sep-line\" />\n </div>\n\n <div\n v-else\n class=\"rk-sep\"\n :class=\"[`is-${orientation}`, `space-${spacing}`]\"\n role=\"separator\"\n :aria-orientation=\"orientation\"\n />\n</template>\n\n<style scoped>\n.rk-sep,\n.rk-sep-labelled {\n --rk-sep-space: 1rem;\n}\n\n.space-sm {\n --rk-sep-space: 0.5rem;\n}\n\n.space-none {\n --rk-sep-space: 0px;\n}\n\n.rk-sep.is-horizontal {\n height: 1px;\n width: 100%;\n margin-block: var(--rk-sep-space);\n background: var(--color-hair);\n}\n\n.rk-sep.is-vertical {\n width: 1px;\n align-self: stretch;\n min-height: 1rem;\n margin-inline: var(--rk-sep-space);\n background: var(--color-hair);\n}\n\n.rk-sep-labelled {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin-block: var(--rk-sep-space);\n}\n\n.rk-sep-labelled.is-vertical {\n flex-direction: column;\n align-self: stretch;\n margin-block: 0;\n margin-inline: var(--rk-sep-space);\n}\n\n.rk-sep-line {\n flex: 1;\n background: var(--color-hair);\n}\n\n.is-horizontal .rk-sep-line {\n height: 1px;\n}\n\n.is-vertical .rk-sep-line {\n width: 1px;\n}\n\n.rk-sep-label {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport FormField from './FormField.vue'\n\nexport interface ColorSwatch {\n /** A hex value, `#rgb` or `#rrggbb`. */\n value: string\n /** What to call it. Already translated. */\n label: string\n}\n\n/**\n * A colour, as a hex value.\n *\n * ## A native `input[type=\"color\"]`, painted\n *\n * The same decision as `BaseSlider`: the platform's own picker is better\n * than anything a page can build. It is the one the reader already knows, it\n * has the eyedropper on the desktops that have one, and on a phone it is a\n * full-screen control no web page matches. What it does not have is a look\n * that matches the rest of the kit, so the look is all that is replaced.\n *\n * ## What the kit supplies and what the app does\n *\n * `swatches` are the app's, values **and** names. A kit that shipped a row\n * of colours would be shipping a product decision, and one that shipped\n * unnamed colours would be shipping a set of buttons a screen reader reads\n * as nothing. `PALETTES` is a ready source for an app that wants the kit's\n * own ten.\n *\n * The hex field appears only when `hexLabel` is given, for the same reason\n * `BaseChip` grows a remove button only when it is told what to call it: a\n * control whose name the kit had to invent speaks a language the app does\n * not.\n *\n * ## The value contract\n *\n * In and out as `#rrggbb`, lowercase — the way dates are `YYYY-MM-DD` and\n * times are `HH:mm`. Short hex (`#abc`) and capitals are accepted from a\n * reader typing and normalised on the way out, so an app never has to\n * compare two spellings of the same colour.\n */\nconst {\n label,\n modelValue,\n swatches = [],\n hexLabel = '',\n hint = '',\n error = '',\n disabled = false,\n labelHidden = false,\n fieldId = undefined,\n} = defineProps<{\n /** Names the control. Already translated. */\n label: string\n /** The colour, as `#rrggbb`. Required: a picker with no colour shows none. */\n modelValue: string\n /** Colours to offer beside the picker. The app's values and names. */\n swatches?: readonly ColorSwatch[] | undefined\n /** Names the hex field. Without it, there is no hex field. */\n hexLabel?: string | undefined\n hint?: string | undefined\n error?: string | undefined\n disabled?: boolean | undefined\n labelHidden?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\n/** `#abc` and `#AABBCC` both mean the same colour; this is the spelling. */\nfunction normalise(value: string): string | undefined {\n const text = value.trim().toLowerCase()\n const short = /^#?([0-9a-f])([0-9a-f])([0-9a-f])$/.exec(text)\n if (short) return `#${short[1]!}${short[1]!}${short[2]!}${short[2]!}${short[3]!}${short[3]!}`\n\n const long = /^#?([0-9a-f]{6})$/.exec(text)\n\n return long ? `#${long[1]!}` : undefined\n}\n\n/**\n * The value, or nothing when it cannot be read.\n *\n * No fallback colour: a hex written here would be a colour the kit chose,\n * and the kit chooses none — a test enforces that, and it is right to.\n * Unreadable input is handed to the native control as an empty value, and\n * whatever it shows then is the platform's decision rather than ours.\n */\nconst current = computed(() => normalise(modelValue))\n\nfunction set(value: string) {\n const next = normalise(value)\n if (next && next !== current.value) emit('update:modelValue', next)\n}\n\n/**\n * What the hex field shows while it is being typed in.\n *\n * Not the value: \"#ab\" is not a colour, and rewriting the field on every\n * keystroke would make it impossible to type the third character. It\n * catches up with the value whenever the value changes from elsewhere — a\n * swatch, the native picker — and commits what it holds on blur and Enter.\n */\nconst draft = ref(current.value ?? '')\nwatch(current, (value) => (draft.value = value ?? ''))\n\nfunction commit() {\n const next = normalise(draft.value)\n if (next) set(next)\n // Nothing recognisable: put back what the value actually is, rather than\n // leaving a field that says one thing while the colour is another.\n else draft.value = current.value ?? ''\n}\n\nconst chosen = (value: string) => normalise(value) === current.value\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :hint=\"hint\"\n :error=\"error\"\n :label-hidden=\"labelHidden\"\n class=\"rk-color\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"rk-color-row\">\n <span class=\"rk-color-well\" :style=\"current ? { '--rk-color': current } : undefined\">\n <input\n :id=\"id\"\n type=\"color\"\n class=\"rk-color-native focus-ring\"\n :value=\"current ?? ''\"\n :disabled=\"disabled\"\n :aria-describedby=\"describedBy\"\n :aria-invalid=\"invalid\"\n @input=\"set(($event.target as HTMLInputElement).value)\"\n />\n </span>\n\n <input\n v-if=\"hexLabel\"\n v-model=\"draft\"\n type=\"text\"\n class=\"rk-color-hex control\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n :aria-label=\"hexLabel\"\n :disabled=\"disabled\"\n @blur=\"commit\"\n @keydown.enter.prevent=\"commit\"\n />\n\n <ul v-if=\"swatches.length > 0\" class=\"rk-color-swatches\">\n <li v-for=\"swatch in swatches\" :key=\"swatch.value\">\n <button\n type=\"button\"\n class=\"rk-color-swatch focus-ring\"\n :class=\"{ 'is-chosen': chosen(swatch.value) }\"\n :style=\"{ '--rk-color': swatch.value }\"\n :aria-label=\"swatch.label\"\n :aria-pressed=\"chosen(swatch.value)\"\n :disabled=\"disabled\"\n @click=\"set(swatch.value)\"\n />\n </li>\n </ul>\n </div>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-color-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem;\n}\n\n/* The well is what is seen; the input inside it is the whole target. A\n native colour input cannot be styled past its swatch in every browser, so\n it is stretched over a box that can be. */\n.rk-color-well {\n position: relative;\n display: block;\n width: 2.75rem;\n height: 2.75rem;\n overflow: hidden;\n border-radius: var(--radius-card);\n border: 1px solid var(--color-hair);\n background: var(--rk-color);\n}\n\n.rk-color-native {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n opacity: 0;\n}\n\n/* The ring goes on the well, since the input it belongs to is invisible. */\n.rk-color-well:has(.rk-color-native:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-color-native:disabled {\n cursor: not-allowed;\n}\n\n.rk-color-hex {\n width: 7.5rem;\n height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0 0.75rem;\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n /* 16px like every other text control here: iOS zooms the viewport when it\n focuses a field under 16px and never zooms back. */\n font-size: 1rem;\n color: var(--color-ink);\n}\n\n.rk-color-hex:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -1px;\n}\n\n.rk-color-hex:disabled {\n opacity: 0.5;\n}\n\n.rk-color-swatches {\n display: flex;\n flex-wrap: wrap;\n gap: 0.375rem;\n}\n\n.rk-color-swatch {\n display: block;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 9999px;\n border: 1px solid var(--color-hair);\n background: var(--rk-color);\n transition: transform var(--duration-fast) var(--ease-standard);\n}\n\n.rk-color-swatch:hover:not(:disabled) {\n transform: scale(1.1);\n}\n\n/* A ring around the chosen one rather than a tick: a tick has to be dark or\n light to be seen, and the swatch beneath it is whatever the app chose. */\n.rk-color-swatch.is-chosen {\n box-shadow:\n 0 0 0 2px var(--color-surface),\n 0 0 0 4px var(--color-primary);\n}\n\n.rk-color-swatch:disabled {\n opacity: 0.5;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-color-swatch {\n transition: none;\n }\n\n .rk-color-swatch:hover:not(:disabled) {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport FormField from './FormField.vue'\n\nexport interface ColorSwatch {\n /** A hex value, `#rgb` or `#rrggbb`. */\n value: string\n /** What to call it. Already translated. */\n label: string\n}\n\n/**\n * A colour, as a hex value.\n *\n * ## A native `input[type=\"color\"]`, painted\n *\n * The same decision as `BaseSlider`: the platform's own picker is better\n * than anything a page can build. It is the one the reader already knows, it\n * has the eyedropper on the desktops that have one, and on a phone it is a\n * full-screen control no web page matches. What it does not have is a look\n * that matches the rest of the kit, so the look is all that is replaced.\n *\n * ## What the kit supplies and what the app does\n *\n * `swatches` are the app's, values **and** names. A kit that shipped a row\n * of colours would be shipping a product decision, and one that shipped\n * unnamed colours would be shipping a set of buttons a screen reader reads\n * as nothing. `PALETTES` is a ready source for an app that wants the kit's\n * own ten.\n *\n * The hex field appears only when `hexLabel` is given, for the same reason\n * `BaseChip` grows a remove button only when it is told what to call it: a\n * control whose name the kit had to invent speaks a language the app does\n * not.\n *\n * ## The value contract\n *\n * In and out as `#rrggbb`, lowercase — the way dates are `YYYY-MM-DD` and\n * times are `HH:mm`. Short hex (`#abc`) and capitals are accepted from a\n * reader typing and normalised on the way out, so an app never has to\n * compare two spellings of the same colour.\n */\nconst {\n label,\n modelValue,\n swatches = [],\n hexLabel = '',\n hint = '',\n error = '',\n disabled = false,\n labelHidden = false,\n fieldId = undefined,\n} = defineProps<{\n /** Names the control. Already translated. */\n label: string\n /** The colour, as `#rrggbb`. Required: a picker with no colour shows none. */\n modelValue: string\n /** Colours to offer beside the picker. The app's values and names. */\n swatches?: readonly ColorSwatch[] | undefined\n /** Names the hex field. Without it, there is no hex field. */\n hexLabel?: string | undefined\n hint?: string | undefined\n error?: string | undefined\n disabled?: boolean | undefined\n labelHidden?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\n/** `#abc` and `#AABBCC` both mean the same colour; this is the spelling. */\nfunction normalise(value: string): string | undefined {\n const text = value.trim().toLowerCase()\n const short = /^#?([0-9a-f])([0-9a-f])([0-9a-f])$/.exec(text)\n if (short) return `#${short[1]!}${short[1]!}${short[2]!}${short[2]!}${short[3]!}${short[3]!}`\n\n const long = /^#?([0-9a-f]{6})$/.exec(text)\n\n return long ? `#${long[1]!}` : undefined\n}\n\n/**\n * The value, or nothing when it cannot be read.\n *\n * No fallback colour: a hex written here would be a colour the kit chose,\n * and the kit chooses none — a test enforces that, and it is right to.\n * Unreadable input is handed to the native control as an empty value, and\n * whatever it shows then is the platform's decision rather than ours.\n */\nconst current = computed(() => normalise(modelValue))\n\nfunction set(value: string) {\n const next = normalise(value)\n if (next && next !== current.value) emit('update:modelValue', next)\n}\n\n/**\n * What the hex field shows while it is being typed in.\n *\n * Not the value: \"#ab\" is not a colour, and rewriting the field on every\n * keystroke would make it impossible to type the third character. It\n * catches up with the value whenever the value changes from elsewhere — a\n * swatch, the native picker — and commits what it holds on blur and Enter.\n */\nconst draft = ref(current.value ?? '')\nwatch(current, (value) => (draft.value = value ?? ''))\n\nfunction commit() {\n const next = normalise(draft.value)\n if (next) set(next)\n // Nothing recognisable: put back what the value actually is, rather than\n // leaving a field that says one thing while the colour is another.\n else draft.value = current.value ?? ''\n}\n\nconst chosen = (value: string) => normalise(value) === current.value\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :hint=\"hint\"\n :error=\"error\"\n :label-hidden=\"labelHidden\"\n class=\"rk-color\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"rk-color-row\">\n <span class=\"rk-color-well\" :style=\"current ? { '--rk-color': current } : undefined\">\n <input\n :id=\"id\"\n type=\"color\"\n class=\"rk-color-native focus-ring\"\n :value=\"current ?? ''\"\n :disabled=\"disabled\"\n :aria-describedby=\"describedBy\"\n :aria-invalid=\"invalid\"\n @input=\"set(($event.target as HTMLInputElement).value)\"\n />\n </span>\n\n <input\n v-if=\"hexLabel\"\n v-model=\"draft\"\n type=\"text\"\n class=\"rk-color-hex control\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n :aria-label=\"hexLabel\"\n :disabled=\"disabled\"\n @blur=\"commit\"\n @keydown.enter.prevent=\"commit\"\n />\n\n <ul v-if=\"swatches.length > 0\" class=\"rk-color-swatches\">\n <li v-for=\"swatch in swatches\" :key=\"swatch.value\">\n <button\n type=\"button\"\n class=\"rk-color-swatch focus-ring\"\n :class=\"{ 'is-chosen': chosen(swatch.value) }\"\n :style=\"{ '--rk-color': swatch.value }\"\n :aria-label=\"swatch.label\"\n :aria-pressed=\"chosen(swatch.value)\"\n :disabled=\"disabled\"\n @click=\"set(swatch.value)\"\n />\n </li>\n </ul>\n </div>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-color-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem;\n}\n\n/* The well is what is seen; the input inside it is the whole target. A\n native colour input cannot be styled past its swatch in every browser, so\n it is stretched over a box that can be. */\n.rk-color-well {\n position: relative;\n display: block;\n width: 2.75rem;\n height: 2.75rem;\n overflow: hidden;\n border-radius: var(--radius-card);\n border: 1px solid var(--color-hair);\n background: var(--rk-color);\n}\n\n.rk-color-native {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n opacity: 0;\n}\n\n/* The ring goes on the well, since the input it belongs to is invisible. */\n.rk-color-well:has(.rk-color-native:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-color-native:disabled {\n cursor: not-allowed;\n}\n\n.rk-color-hex {\n width: 7.5rem;\n height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0 0.75rem;\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n /* 16px like every other text control here: iOS zooms the viewport when it\n focuses a field under 16px and never zooms back. */\n font-size: 1rem;\n color: var(--color-ink);\n}\n\n.rk-color-hex:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -1px;\n}\n\n.rk-color-hex:disabled {\n opacity: 0.5;\n}\n\n.rk-color-swatches {\n display: flex;\n flex-wrap: wrap;\n gap: 0.375rem;\n}\n\n.rk-color-swatch {\n display: block;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 9999px;\n border: 1px solid var(--color-hair);\n background: var(--rk-color);\n transition: transform var(--duration-fast) var(--ease-standard);\n}\n\n.rk-color-swatch:hover:not(:disabled) {\n transform: scale(1.1);\n}\n\n/* A ring around the chosen one rather than a tick: a tick has to be dark or\n light to be seen, and the swatch beneath it is whatever the app chose. */\n.rk-color-swatch.is-chosen {\n box-shadow:\n 0 0 0 2px var(--color-surface),\n 0 0 0 4px var(--color-primary);\n}\n\n.rk-color-swatch:disabled {\n opacity: 0.5;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-color-swatch {\n transition: none;\n }\n\n .rk-color-swatch:hover:not(:disabled) {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Check, Copy } from 'lucide-vue-next'\nimport { onBeforeUnmount, ref } from 'vue'\n\n/**\n * Copies a piece of text, and says that it did.\n *\n * The saying is the part that is usually missing: a copy button that changes\n * nothing leaves the reader pressing it twice. This swaps its icon and its\n * accessible name for two seconds, and announces the change politely — which\n * is what tells somebody who cannot see the tick.\n *\n * A refusal is reported too, through `error`: a browser without clipboard\n * permission fails silently otherwise, and the next paste is whatever was\n * there before.\n */\nconst {\n text,\n copyLabel,\n copiedLabel,\n errorLabel = undefined,\n withText = false,\n variant = 'default',\n} = defineProps<{\n /** What lands on the clipboard. */\n text: string\n /** The button's name at rest, e.g. \"Copy the key\". */\n copyLabel: string\n /** Its name for the two seconds after, e.g. \"Copied\". */\n copiedLabel: string\n /** Said when the browser refuses. Unset, a refusal only leaves it unchanged. */\n errorLabel?: string | undefined\n /** Show the label beside the icon, rather than only to assistive tech. */\n withText?: boolean | undefined\n /**\n * `unstyled` keeps the copying and drops the surface and the icon.\n *\n * The announcement is the part that is laborious and the part that is\n * dropped: a copy button that says nothing leaves somebody who cannot see\n * the tick pressing it twice. Three places on this kit's own site wrote\n * their own copy button to get a different shape — a pill in a code block's\n * bar, a whole install command — and all three lost the announcement on the\n * way. That is the gap this closes: the behaviour without the paint, the\n * same answer `BaseButton` and `BaseInput` give.\n *\n * Unstyled brings no focus ring either, so give it one.\n */\n variant?: 'default' | 'unstyled' | undefined\n}>()\n\n/**\n * The button's content, for a shape the icon-and-label pair does not cover.\n *\n * Given one, set `withText` as well: the `aria-label` exists to name a button\n * whose only content is an icon, and a slot that renders words does not need\n * naming twice.\n */\ndefineSlots<{ default?: (props: { copied: boolean; failed: boolean }) => unknown }>()\n\nconst emit = defineEmits<{ copied: []; failed: [] }>()\n\nconst state = ref<'idle' | 'copied' | 'failed'>('idle')\nlet timer: ReturnType<typeof setTimeout> | null = null\n\nasync function copy() {\n if (timer) clearTimeout(timer)\n\n try {\n await navigator.clipboard.writeText(text)\n state.value = 'copied'\n emit('copied')\n } catch {\n state.value = 'failed'\n emit('failed')\n }\n\n timer = setTimeout(() => (state.value = 'idle'), 2000)\n}\n\nonBeforeUnmount(() => {\n if (timer) clearTimeout(timer)\n})\n</script>\n\n<template>\n <button\n type=\"button\"\n :class=\"\n variant === 'unstyled'\n ? ''\n : ['rk-copy control focus-ring', { 'is-copied': state === 'copied', 'with-text': withText }]\n \"\n :aria-label=\"withText ? undefined : state === 'copied' ? copiedLabel : copyLabel\"\n @click=\"copy\"\n >\n <slot :copied=\"state === 'copied'\" :failed=\"state === 'failed'\">\n <Check v-if=\"state === 'copied'\" class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <Copy v-else class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <span v-if=\"withText\">{{ state === 'copied' ? copiedLabel : copyLabel }}</span>\n </slot>\n\n <!-- Said once, when it changes: a live region the button itself owns. -->\n <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n {{ state === 'copied' ? copiedLabel : state === 'failed' ? (errorLabel ?? '') : '' }}\n </span>\n </button>\n</template>\n\n<style scoped>\n.rk-copy {\n display: inline-flex;\n height: 2.25rem;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0 0.625rem;\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--color-ink);\n transition:\n color var(--duration-fast) var(--ease-standard),\n background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-copy:hover {\n background: var(--color-muted);\n}\n\n.rk-copy.is-copied {\n color: var(--color-positive);\n}\n\n.rk-copy:not(.with-text) {\n width: 2.25rem;\n padding: 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Check, Copy } from 'lucide-vue-next'\nimport { onBeforeUnmount, ref } from 'vue'\n\n/**\n * Copies a piece of text, and says that it did.\n *\n * The saying is the part that is usually missing: a copy button that changes\n * nothing leaves the reader pressing it twice. This swaps its icon and its\n * accessible name for two seconds, and announces the change politely — which\n * is what tells somebody who cannot see the tick.\n *\n * A refusal is reported too, through `error`: a browser without clipboard\n * permission fails silently otherwise, and the next paste is whatever was\n * there before.\n */\nconst {\n text,\n copyLabel,\n copiedLabel,\n errorLabel = undefined,\n withText = false,\n variant = 'default',\n} = defineProps<{\n /** What lands on the clipboard. */\n text: string\n /** The button's name at rest, e.g. \"Copy the key\". */\n copyLabel: string\n /** Its name for the two seconds after, e.g. \"Copied\". */\n copiedLabel: string\n /** Said when the browser refuses. Unset, a refusal only leaves it unchanged. */\n errorLabel?: string | undefined\n /** Show the label beside the icon, rather than only to assistive tech. */\n withText?: boolean | undefined\n /**\n * `unstyled` keeps the copying and drops the surface and the icon.\n *\n * The announcement is the part that is laborious and the part that is\n * dropped: a copy button that says nothing leaves somebody who cannot see\n * the tick pressing it twice. Three places on this kit's own site wrote\n * their own copy button to get a different shape — a pill in a code block's\n * bar, a whole install command — and all three lost the announcement on the\n * way. That is the gap this closes: the behaviour without the paint, the\n * same answer `BaseButton` and `BaseInput` give.\n *\n * Unstyled brings no focus ring either, so give it one.\n */\n variant?: 'default' | 'unstyled' | undefined\n}>()\n\n/**\n * The button's content, for a shape the icon-and-label pair does not cover.\n *\n * Given one, set `withText` as well: the `aria-label` exists to name a button\n * whose only content is an icon, and a slot that renders words does not need\n * naming twice.\n */\ndefineSlots<{ default?: (props: { copied: boolean; failed: boolean }) => unknown }>()\n\nconst emit = defineEmits<{ copied: []; failed: [] }>()\n\nconst state = ref<'idle' | 'copied' | 'failed'>('idle')\nlet timer: ReturnType<typeof setTimeout> | null = null\n\nasync function copy() {\n if (timer) clearTimeout(timer)\n\n try {\n await navigator.clipboard.writeText(text)\n state.value = 'copied'\n emit('copied')\n } catch {\n state.value = 'failed'\n emit('failed')\n }\n\n timer = setTimeout(() => (state.value = 'idle'), 2000)\n}\n\nonBeforeUnmount(() => {\n if (timer) clearTimeout(timer)\n})\n</script>\n\n<template>\n <button\n type=\"button\"\n :class=\"\n variant === 'unstyled'\n ? ''\n : ['rk-copy control focus-ring', { 'is-copied': state === 'copied', 'with-text': withText }]\n \"\n :aria-label=\"withText ? undefined : state === 'copied' ? copiedLabel : copyLabel\"\n @click=\"copy\"\n >\n <slot :copied=\"state === 'copied'\" :failed=\"state === 'failed'\">\n <Check v-if=\"state === 'copied'\" class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <Copy v-else class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <span v-if=\"withText\">{{ state === 'copied' ? copiedLabel : copyLabel }}</span>\n </slot>\n\n <!-- Said once, when it changes: a live region the button itself owns. -->\n <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n {{ state === 'copied' ? copiedLabel : state === 'failed' ? (errorLabel ?? '') : '' }}\n </span>\n </button>\n</template>\n\n<style scoped>\n.rk-copy {\n display: inline-flex;\n height: 2.25rem;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0 0.625rem;\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--color-ink);\n transition:\n color var(--duration-fast) var(--ease-standard),\n background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-copy:hover {\n background: var(--color-muted);\n}\n\n.rk-copy.is-copied {\n color: var(--color-positive);\n}\n\n.rk-copy:not(.with-text) {\n width: 2.25rem;\n padding: 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport CopyButton from './CopyButton.vue'\n\n/**\n * A sample of code, as written.\n *\n * ## No highlighting, and no `v-html`\n *\n * A code sample is the one place where what is written is exactly what is\n * meant, so the text goes in as text. Highlighting would mean either a\n * parser in the bundle of every app that shows one line of shell, or\n * `v-html` and a promise the app cannot keep about where the string came\n * from. An app that wants colour can highlight on its own and put the\n * result in the default slot; the frame, the scrolling and the copying\n * stay here.\n *\n * ## The scroll is the accessibility problem\n *\n * A long line makes this scroll sideways, and a scrolling box that cannot\n * take focus cannot be scrolled by a keyboard at all — the end of the line\n * is simply unreachable, with nothing on screen to say so. So when it can\n * scroll it is focusable and named, which is also what makes a screen\n * reader announce it as a region rather than dropping the reader into loose\n * text.\n *\n * `wrap` is the other answer: no scrolling, no focus stop, and long lines\n * broken instead. Which one is right depends on the code — a shell command\n * wraps well, a table of output does not — so it is the app's to choose.\n */\nconst {\n code,\n label,\n language = undefined,\n wrap = false,\n copyLabel = undefined,\n copiedLabel = undefined,\n} = defineProps<{\n /** The sample itself. Shown exactly as given. */\n code: string\n /**\n * Names the block, e.g. \"Installing the package\".\n *\n * Required because this is a region a reader can land in, and an unnamed\n * one is announced as nothing at all.\n */\n label: string\n /** Shown in the corner, e.g. `bash`, `ts`. Not used to highlight anything. */\n language?: string | undefined\n /** Break long lines instead of scrolling sideways. */\n wrap?: boolean | undefined\n /** Given together with `copiedLabel`, adds a copy button. Already translated. */\n copyLabel?: string | undefined\n copiedLabel?: string | undefined\n}>()\n\ndefineSlots<{\n /** The body, when the app has highlighted it itself. Plain text otherwise. */\n default?: () => unknown\n}>()\n\nconst copyable = computed(() => copyLabel !== undefined && copiedLabel !== undefined)\n\n/*\n * Only a box that actually scrolls becomes a tab stop.\n *\n * A focus stop that scrolls nothing is a stop somebody has to Tab past for\n * no reason, and on a page of samples that is one per sample.\n */\nconst scrolls = computed(() => !wrap)\n</script>\n\n<template>\n <figure class=\"rk-code\" :class=\"{ 'is-wrapped': wrap }\">\n <figcaption v-if=\"language || copyable\" class=\"rk-code-bar\">\n <span v-if=\"language\" class=\"rk-code-lang\">{{ language }}</span>\n <CopyButton\n v-if=\"copyable\"\n class=\"rk-code-copy\"\n :text=\"code\"\n :copy-label=\"copyLabel!\"\n :copied-label=\"copiedLabel!\"\n />\n </figcaption>\n\n <pre\n class=\"rk-code-pre\"\n :tabindex=\"scrolls ? 0 : undefined\"\n :role=\"scrolls ? 'region' : undefined\"\n :aria-label=\"scrolls ? label : undefined\"\n ><code><slot>{{ code }}</slot></code></pre>\n </figure>\n</template>\n\n<style scoped>\n.rk-code {\n position: relative;\n overflow: hidden;\n border: 1px solid var(--color-hair);\n border-radius: var(--radius-card);\n background: color-mix(in oklab, var(--color-muted) 50%, transparent);\n}\n\n.rk-code-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.375rem 0.5rem 0.375rem 1rem;\n border-block-end: 1px solid var(--color-hair);\n color: var(--color-ink-soft);\n font-size: 0.75rem;\n}\n\n.rk-code-lang {\n font-family: ui-monospace, monospace;\n letter-spacing: 0.04em;\n}\n\n/* Pushes the button to the end when there is no language beside it. */\n.rk-code-copy {\n margin-inline-start: auto;\n}\n\n.rk-code-pre {\n margin: 0;\n overflow-x: auto;\n padding: 1rem 1.25rem;\n color: var(--color-ink);\n font-size: 0.875rem;\n line-height: 1.75;\n}\n\n.rk-code-pre:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n.is-wrapped .rk-code-pre {\n overflow-x: visible;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.rk-code-pre code {\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport CopyButton from './CopyButton.vue'\n\n/**\n * A sample of code, as written.\n *\n * ## No highlighting, and no `v-html`\n *\n * A code sample is the one place where what is written is exactly what is\n * meant, so the text goes in as text. Highlighting would mean either a\n * parser in the bundle of every app that shows one line of shell, or\n * `v-html` and a promise the app cannot keep about where the string came\n * from. An app that wants colour can highlight on its own and put the\n * result in the default slot; the frame, the scrolling and the copying\n * stay here.\n *\n * ## The scroll is the accessibility problem\n *\n * A long line makes this scroll sideways, and a scrolling box that cannot\n * take focus cannot be scrolled by a keyboard at all — the end of the line\n * is simply unreachable, with nothing on screen to say so. So when it can\n * scroll it is focusable and named, which is also what makes a screen\n * reader announce it as a region rather than dropping the reader into loose\n * text.\n *\n * `wrap` is the other answer: no scrolling, no focus stop, and long lines\n * broken instead. Which one is right depends on the code — a shell command\n * wraps well, a table of output does not — so it is the app's to choose.\n */\nconst {\n code,\n label,\n language = undefined,\n wrap = false,\n copyLabel = undefined,\n copiedLabel = undefined,\n} = defineProps<{\n /** The sample itself. Shown exactly as given. */\n code: string\n /**\n * Names the block, e.g. \"Installing the package\".\n *\n * Required because this is a region a reader can land in, and an unnamed\n * one is announced as nothing at all.\n */\n label: string\n /** Shown in the corner, e.g. `bash`, `ts`. Not used to highlight anything. */\n language?: string | undefined\n /** Break long lines instead of scrolling sideways. */\n wrap?: boolean | undefined\n /** Given together with `copiedLabel`, adds a copy button. Already translated. */\n copyLabel?: string | undefined\n copiedLabel?: string | undefined\n}>()\n\ndefineSlots<{\n /** The body, when the app has highlighted it itself. Plain text otherwise. */\n default?: () => unknown\n}>()\n\nconst copyable = computed(() => copyLabel !== undefined && copiedLabel !== undefined)\n\n/*\n * Only a box that actually scrolls becomes a tab stop.\n *\n * A focus stop that scrolls nothing is a stop somebody has to Tab past for\n * no reason, and on a page of samples that is one per sample.\n */\nconst scrolls = computed(() => !wrap)\n</script>\n\n<template>\n <figure class=\"rk-code\" :class=\"{ 'is-wrapped': wrap }\">\n <figcaption v-if=\"language || copyable\" class=\"rk-code-bar\">\n <span v-if=\"language\" class=\"rk-code-lang\">{{ language }}</span>\n <CopyButton\n v-if=\"copyable\"\n class=\"rk-code-copy\"\n :text=\"code\"\n :copy-label=\"copyLabel!\"\n :copied-label=\"copiedLabel!\"\n />\n </figcaption>\n\n <pre\n class=\"rk-code-pre\"\n :tabindex=\"scrolls ? 0 : undefined\"\n :role=\"scrolls ? 'region' : undefined\"\n :aria-label=\"scrolls ? label : undefined\"\n ><code><slot>{{ code }}</slot></code></pre>\n </figure>\n</template>\n\n<style scoped>\n.rk-code {\n position: relative;\n overflow: hidden;\n border: 1px solid var(--color-hair);\n border-radius: var(--radius-card);\n background: color-mix(in oklab, var(--color-muted) 50%, transparent);\n}\n\n.rk-code-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.375rem 0.5rem 0.375rem 1rem;\n border-block-end: 1px solid var(--color-hair);\n color: var(--color-ink-soft);\n font-size: 0.75rem;\n}\n\n.rk-code-lang {\n font-family: ui-monospace, monospace;\n letter-spacing: 0.04em;\n}\n\n/* Pushes the button to the end when there is no language beside it. */\n.rk-code-copy {\n margin-inline-start: auto;\n}\n\n.rk-code-pre {\n margin: 0;\n overflow-x: auto;\n padding: 1rem 1.25rem;\n color: var(--color-ink);\n font-size: 0.875rem;\n line-height: 1.75;\n}\n\n.rk-code-pre:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n.is-wrapped .rk-code-pre {\n overflow-x: visible;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.rk-code-pre code {\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n</style>\n","<script setup lang=\"ts\">\nexport interface DescriptionItem {\n /** What it is: \"Status\", \"Created\". Already translated. */\n term: string\n /** What it says. Use the slot named after `key` for anything but text. */\n description?: string | undefined\n /** Names the slot that draws this row's value. */\n key?: string | undefined\n}\n\n/**\n * Pairs of \"what it is\" and \"what it says\": the summary at the top of a\n * detail page, the facts under an invoice.\n *\n * A `<dl>`, which is the element for exactly this and almost never used: a\n * grid of divs says nothing about which text names which value, and a\n * screen reader reads it as a wall. Here each pair is a `dt` and a `dd`, so\n * \"Status: paid\" is heard as one thing.\n *\n * Values that are not plain text — a badge, a link, a date — come from the\n * slot named after the row's `key`.\n */\nconst { items, layout = 'stacked' } = defineProps<{\n items: readonly DescriptionItem[]\n /** `inline` puts the term beside its value; `stacked` puts it above. */\n layout?: 'stacked' | 'inline' | undefined\n}>()\n\ndefineSlots<{\n /** A row's value, named for its `key`. */\n [key: string]: (props: { item: DescriptionItem }) => unknown\n}>()\n</script>\n\n<template>\n <dl class=\"rk-dl\" :class=\"`is-${layout}`\">\n <div v-for=\"item in items\" :key=\"item.key ?? item.term\" class=\"rk-dl-row\">\n <dt class=\"rk-dl-term\">{{ item.term }}</dt>\n <dd class=\"rk-dl-value\">\n <slot :name=\"item.key ?? item.term\" :item=\"item\">{{ item.description }}</slot>\n </dd>\n </div>\n </dl>\n</template>\n\n<style scoped>\n.rk-dl {\n display: grid;\n gap: 0.75rem;\n}\n\n.rk-dl.is-inline {\n gap: 0.5rem;\n}\n\n.rk-dl-row {\n display: grid;\n gap: 0.125rem;\n}\n\n/* Inline from a tablet up: below that a term and its value side by side\n leave neither enough room to read. */\n@media (min-width: 40rem) {\n .is-inline .rk-dl-row {\n grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr);\n gap: 1rem;\n align-items: baseline;\n }\n}\n\n.rk-dl-term {\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--color-ink-soft);\n}\n\n.rk-dl-value {\n font-size: 0.875rem;\n color: var(--color-ink);\n}\n</style>\n","<script setup lang=\"ts\">\nexport interface DescriptionItem {\n /** What it is: \"Status\", \"Created\". Already translated. */\n term: string\n /** What it says. Use the slot named after `key` for anything but text. */\n description?: string | undefined\n /** Names the slot that draws this row's value. */\n key?: string | undefined\n}\n\n/**\n * Pairs of \"what it is\" and \"what it says\": the summary at the top of a\n * detail page, the facts under an invoice.\n *\n * A `<dl>`, which is the element for exactly this and almost never used: a\n * grid of divs says nothing about which text names which value, and a\n * screen reader reads it as a wall. Here each pair is a `dt` and a `dd`, so\n * \"Status: paid\" is heard as one thing.\n *\n * Values that are not plain text — a badge, a link, a date — come from the\n * slot named after the row's `key`.\n */\nconst { items, layout = 'stacked' } = defineProps<{\n items: readonly DescriptionItem[]\n /** `inline` puts the term beside its value; `stacked` puts it above. */\n layout?: 'stacked' | 'inline' | undefined\n}>()\n\ndefineSlots<{\n /** A row's value, named for its `key`. */\n [key: string]: (props: { item: DescriptionItem }) => unknown\n}>()\n</script>\n\n<template>\n <dl class=\"rk-dl\" :class=\"`is-${layout}`\">\n <div v-for=\"item in items\" :key=\"item.key ?? item.term\" class=\"rk-dl-row\">\n <dt class=\"rk-dl-term\">{{ item.term }}</dt>\n <dd class=\"rk-dl-value\">\n <slot :name=\"item.key ?? item.term\" :item=\"item\">{{ item.description }}</slot>\n </dd>\n </div>\n </dl>\n</template>\n\n<style scoped>\n.rk-dl {\n display: grid;\n gap: 0.75rem;\n}\n\n.rk-dl.is-inline {\n gap: 0.5rem;\n}\n\n.rk-dl-row {\n display: grid;\n gap: 0.125rem;\n}\n\n/* Inline from a tablet up: below that a term and its value side by side\n leave neither enough room to read. */\n@media (min-width: 40rem) {\n .is-inline .rk-dl-row {\n grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr);\n gap: 1rem;\n align-items: baseline;\n }\n}\n\n.rk-dl-term {\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--color-ink-soft);\n}\n\n.rk-dl-value {\n font-size: 0.875rem;\n color: var(--color-ink);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Paperclip, Upload, X } from 'lucide-vue-next'\nimport { computed, ref, useId } from 'vue'\n\n/**\n * Files, dropped on or chosen from a real file input.\n *\n * The input is the control; the box around it is a label. That is not a\n * detail: a `<div>` with a click handler cannot be reached with Tab, opened\n * with Enter, or announced as \"choose file\", and dragging is a pointer\n * gesture that a keyboard has no version of. Everything here works without a\n * drag.\n *\n * It holds files, not uploads. Sending them, the progress and the failures\n * are the app's — the kit does not know your endpoint, and a component that\n * guessed it would be wrong everywhere.\n */\nconst {\n label,\n hint = '',\n browseLabel,\n removeLabel,\n accept = undefined,\n multiple = false,\n maxSize = undefined,\n tooLargeLabel = undefined,\n disabled = false,\n} = defineProps<{\n /** The instruction in the box: \"Drop a receipt here\". Already translated. */\n label: string\n /** A line under it: what is accepted, how big. */\n hint?: string | undefined\n /** The button inside the box, e.g. \"Browse\". */\n browseLabel: string\n /** Accessible name of each file's remove button. */\n removeLabel: string\n /** Passed to the input: `image/*`, `.pdf`. */\n accept?: string | undefined\n multiple?: boolean | undefined\n /** In bytes. Anything larger is refused and reported through `rejected`. */\n maxSize?: number | undefined\n /** Shown under the box when a file was too large. */\n tooLargeLabel?: string | undefined\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{\n /** Files that were too large, so the app can say more than the kit can. */\n rejected: [files: File[]]\n}>()\n\n/** The files held, with `v-model`. */\nconst model = defineModel<File[]>({ default: () => [] })\n\nconst id = useId()\nconst over = ref(false)\nconst refused = ref(false)\n\nconst tooBig = (file: File) => maxSize !== undefined && file.size > maxSize\n\nfunction take(list: FileList | null) {\n if (!list || disabled) return\n\n const incoming = Array.from(list)\n const rejected = incoming.filter(tooBig)\n const accepted = incoming.filter((file) => !tooBig(file))\n\n refused.value = rejected.length > 0\n if (rejected.length) emit('rejected', rejected)\n\n model.value = multiple ? [...model.value, ...accepted] : accepted.slice(0, 1)\n}\n\nfunction onDrop(event: DragEvent) {\n over.value = false\n take(event.dataTransfer?.files ?? null)\n}\n\nfunction onInput(event: Event) {\n const input = event.target as HTMLInputElement\n take(input.files)\n // Cleared, so choosing the same file twice in a row still fires.\n input.value = ''\n}\n\nfunction remove(index: number) {\n model.value = model.value.filter((_, at) => at !== index)\n}\n\n/** KB and MB by hand: `Intl` has no file sizes, and the unit is not a word. */\nconst size = (bytes: number) =>\n bytes >= 1024 * 1024\n ? `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n : `${Math.max(1, Math.round(bytes / 1024))} KB`\n\nconst count = computed(() => model.value.length)\n</script>\n\n<template>\n <div class=\"rk-drop\">\n <label\n class=\"rk-drop-box control\"\n :class=\"{ 'is-over': over, 'is-disabled': disabled }\"\n :for=\"id\"\n @dragover.prevent=\"over = !disabled\"\n @dragleave=\"over = false\"\n @drop.prevent=\"onDrop\"\n >\n <input\n :id=\"id\"\n type=\"file\"\n class=\"sr-only\"\n :accept=\"accept\"\n :multiple=\"multiple\"\n :disabled=\"disabled\"\n @change=\"onInput\"\n />\n <Upload class=\"text-ink-soft size-6\" aria-hidden=\"true\" />\n <span class=\"rk-drop-label\">{{ label }}</span>\n <span v-if=\"hint\" class=\"rk-drop-hint\">{{ hint }}</span>\n <span class=\"rk-drop-browse\">{{ browseLabel }}</span>\n </label>\n\n <p v-if=\"refused && tooLargeLabel\" class=\"rk-drop-error\" role=\"alert\">{{ tooLargeLabel }}</p>\n\n <ul v-if=\"count\" class=\"rk-drop-files\">\n <li\n v-for=\"(file, index) in model\"\n :key=\"`${file.name}-${index}`\"\n class=\"rk-drop-file control\"\n >\n <Paperclip class=\"text-ink-soft size-4 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ file.name }}</span>\n <span class=\"rk-drop-size\">{{ size(file.size) }}</span>\n <button\n type=\"button\"\n class=\"rk-drop-remove focus-ring\"\n :aria-label=\"`${removeLabel}: ${file.name}`\"\n :disabled=\"disabled\"\n @click=\"remove(index)\"\n >\n <X class=\"size-3.5\" aria-hidden=\"true\" />\n </button>\n </li>\n </ul>\n </div>\n</template>\n\n<style scoped>\n.rk-drop-box {\n display: flex;\n cursor: pointer;\n flex-direction: column;\n align-items: center;\n gap: 0.375rem;\n border-radius: var(--radius-card);\n border-style: dashed;\n border-width: 2px;\n padding: 1.5rem 1rem;\n text-align: center;\n transition:\n border-color var(--duration-fast) var(--ease-standard),\n background-color var(--duration-fast) var(--ease-standard);\n}\n\n/* The box is a label, so the ring belongs to the input it names. */\n.rk-drop-box:has(input:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-drop-box.is-over {\n border-color: var(--color-primary);\n background: color-mix(in oklab, var(--color-primary) 8%, transparent);\n}\n\n.rk-drop-box.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.rk-drop-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-drop-hint {\n font-size: 0.75rem;\n color: var(--color-ink-soft);\n}\n\n.rk-drop-browse {\n margin-top: 0.25rem;\n border-radius: 9999px;\n background: var(--color-muted);\n padding: 0.25rem 0.75rem;\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-drop-error {\n margin-top: 0.5rem;\n font-size: 0.8125rem;\n color: var(--color-negative);\n}\n\n.rk-drop-files {\n margin-top: 0.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n}\n\n.rk-drop-file {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0.5rem 0.5rem 0.5rem 0.75rem;\n font-size: 0.8125rem;\n color: var(--color-ink);\n}\n\n.rk-drop-size {\n margin-inline-start: auto;\n flex-shrink: 0;\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink-soft);\n}\n\n.rk-drop-remove {\n display: grid;\n width: 1.5rem;\n height: 1.5rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink-soft);\n}\n\n.rk-drop-remove:hover {\n background: var(--color-muted);\n color: var(--color-ink);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Paperclip, Upload, X } from 'lucide-vue-next'\nimport { computed, ref, useId } from 'vue'\n\n/**\n * Files, dropped on or chosen from a real file input.\n *\n * The input is the control; the box around it is a label. That is not a\n * detail: a `<div>` with a click handler cannot be reached with Tab, opened\n * with Enter, or announced as \"choose file\", and dragging is a pointer\n * gesture that a keyboard has no version of. Everything here works without a\n * drag.\n *\n * It holds files, not uploads. Sending them, the progress and the failures\n * are the app's — the kit does not know your endpoint, and a component that\n * guessed it would be wrong everywhere.\n */\nconst {\n label,\n hint = '',\n browseLabel,\n removeLabel,\n accept = undefined,\n multiple = false,\n maxSize = undefined,\n tooLargeLabel = undefined,\n disabled = false,\n} = defineProps<{\n /** The instruction in the box: \"Drop a receipt here\". Already translated. */\n label: string\n /** A line under it: what is accepted, how big. */\n hint?: string | undefined\n /** The button inside the box, e.g. \"Browse\". */\n browseLabel: string\n /** Accessible name of each file's remove button. */\n removeLabel: string\n /** Passed to the input: `image/*`, `.pdf`. */\n accept?: string | undefined\n multiple?: boolean | undefined\n /** In bytes. Anything larger is refused and reported through `rejected`. */\n maxSize?: number | undefined\n /** Shown under the box when a file was too large. */\n tooLargeLabel?: string | undefined\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{\n /** Files that were too large, so the app can say more than the kit can. */\n rejected: [files: File[]]\n}>()\n\n/** The files held, with `v-model`. */\nconst model = defineModel<File[]>({ default: () => [] })\n\nconst id = useId()\nconst over = ref(false)\nconst refused = ref(false)\n\nconst tooBig = (file: File) => maxSize !== undefined && file.size > maxSize\n\nfunction take(list: FileList | null) {\n if (!list || disabled) return\n\n const incoming = Array.from(list)\n const rejected = incoming.filter(tooBig)\n const accepted = incoming.filter((file) => !tooBig(file))\n\n refused.value = rejected.length > 0\n if (rejected.length) emit('rejected', rejected)\n\n model.value = multiple ? [...model.value, ...accepted] : accepted.slice(0, 1)\n}\n\nfunction onDrop(event: DragEvent) {\n over.value = false\n take(event.dataTransfer?.files ?? null)\n}\n\nfunction onInput(event: Event) {\n const input = event.target as HTMLInputElement\n take(input.files)\n // Cleared, so choosing the same file twice in a row still fires.\n input.value = ''\n}\n\nfunction remove(index: number) {\n model.value = model.value.filter((_, at) => at !== index)\n}\n\n/** KB and MB by hand: `Intl` has no file sizes, and the unit is not a word. */\nconst size = (bytes: number) =>\n bytes >= 1024 * 1024\n ? `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n : `${Math.max(1, Math.round(bytes / 1024))} KB`\n\nconst count = computed(() => model.value.length)\n</script>\n\n<template>\n <div class=\"rk-drop\">\n <label\n class=\"rk-drop-box control\"\n :class=\"{ 'is-over': over, 'is-disabled': disabled }\"\n :for=\"id\"\n @dragover.prevent=\"over = !disabled\"\n @dragleave=\"over = false\"\n @drop.prevent=\"onDrop\"\n >\n <input\n :id=\"id\"\n type=\"file\"\n class=\"sr-only\"\n :accept=\"accept\"\n :multiple=\"multiple\"\n :disabled=\"disabled\"\n @change=\"onInput\"\n />\n <Upload class=\"text-ink-soft size-6\" aria-hidden=\"true\" />\n <span class=\"rk-drop-label\">{{ label }}</span>\n <span v-if=\"hint\" class=\"rk-drop-hint\">{{ hint }}</span>\n <span class=\"rk-drop-browse\">{{ browseLabel }}</span>\n </label>\n\n <p v-if=\"refused && tooLargeLabel\" class=\"rk-drop-error\" role=\"alert\">{{ tooLargeLabel }}</p>\n\n <ul v-if=\"count\" class=\"rk-drop-files\">\n <li\n v-for=\"(file, index) in model\"\n :key=\"`${file.name}-${index}`\"\n class=\"rk-drop-file control\"\n >\n <Paperclip class=\"text-ink-soft size-4 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ file.name }}</span>\n <span class=\"rk-drop-size\">{{ size(file.size) }}</span>\n <button\n type=\"button\"\n class=\"rk-drop-remove focus-ring\"\n :aria-label=\"`${removeLabel}: ${file.name}`\"\n :disabled=\"disabled\"\n @click=\"remove(index)\"\n >\n <X class=\"size-3.5\" aria-hidden=\"true\" />\n </button>\n </li>\n </ul>\n </div>\n</template>\n\n<style scoped>\n.rk-drop-box {\n display: flex;\n cursor: pointer;\n flex-direction: column;\n align-items: center;\n gap: 0.375rem;\n border-radius: var(--radius-card);\n border-style: dashed;\n border-width: 2px;\n padding: 1.5rem 1rem;\n text-align: center;\n transition:\n border-color var(--duration-fast) var(--ease-standard),\n background-color var(--duration-fast) var(--ease-standard);\n}\n\n/* The box is a label, so the ring belongs to the input it names. */\n.rk-drop-box:has(input:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-drop-box.is-over {\n border-color: var(--color-primary);\n background: color-mix(in oklab, var(--color-primary) 8%, transparent);\n}\n\n.rk-drop-box.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.rk-drop-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-drop-hint {\n font-size: 0.75rem;\n color: var(--color-ink-soft);\n}\n\n.rk-drop-browse {\n margin-top: 0.25rem;\n border-radius: 9999px;\n background: var(--color-muted);\n padding: 0.25rem 0.75rem;\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-drop-error {\n margin-top: 0.5rem;\n font-size: 0.8125rem;\n color: var(--color-negative);\n}\n\n.rk-drop-files {\n margin-top: 0.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n}\n\n.rk-drop-file {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0.5rem 0.5rem 0.5rem 0.75rem;\n font-size: 0.8125rem;\n color: var(--color-ink);\n}\n\n.rk-drop-size {\n margin-inline-start: auto;\n flex-shrink: 0;\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink-soft);\n}\n\n.rk-drop-remove {\n display: grid;\n width: 1.5rem;\n height: 1.5rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink-soft);\n}\n\n.rk-drop-remove:hover {\n background: var(--color-muted);\n color: var(--color-ink);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport BaseChip from './BaseChip.vue'\nimport FormField from './FormField.vue'\n\n/**\n * A field that holds several short values: recipients, labels, skills.\n *\n * Enter and a comma commit what has been typed; Backspace on an empty field\n * takes the last one back, which is the shortcut everybody tries. The chips\n * are before the field rather than beside it, so the caret is always at the\n * end of the line the way it is in a mail client.\n *\n * A pasted \"vue, html, css\" becomes three tags rather than one: whatever is\n * pasted is split on commas and line breaks, which is the shape every list\n * copied from somewhere else arrives in.\n *\n * `removeLabel` builds each chip's remove button name from the tag, so a\n * screen reader hears \"Remove: design\" rather than five buttons called \"×\".\n */\nconst {\n label,\n removeLabel,\n placeholder = '',\n hint = '',\n error = '',\n max = undefined,\n allowDuplicates = false,\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n /** `(tag) => \\`Remove ${tag}\\`` — already translated. */\n removeLabel: (tag: string) => string\n placeholder?: string | undefined\n hint?: string | undefined\n error?: string | undefined\n /** How many tags at most. The field stops taking them at the limit. */\n max?: number | undefined\n /** By default the same tag twice is ignored. */\n allowDuplicates?: boolean | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/** The tags, with `v-model`. */\nconst model = defineModel<string[]>({ default: () => [] })\n\nconst draft = ref('')\n\n/** Commits one or many: \"vue, html\" is two tags however it arrived. */\nfunction commit(text: string) {\n const parts = text\n .split(/[\\n,]/)\n .map((part) => part.trim())\n .filter(Boolean)\n\n if (parts.length === 0) return\n\n const next = [...model.value]\n for (const value of parts) {\n if (max !== undefined && next.length >= max) break\n if (!allowDuplicates && next.includes(value)) continue\n next.push(value)\n }\n\n if (next.length !== model.value.length) model.value = next\n}\n\nfunction add() {\n const text = draft.value\n draft.value = ''\n commit(text)\n}\n\nfunction onPaste(event: ClipboardEvent) {\n const text = event.clipboardData?.getData('text') ?? ''\n // Only when there is something to split on; a single word is left to the\n // field so the caret stays where the reader put it.\n if (!/[\\n,]/.test(text)) return\n\n event.preventDefault()\n commit(`${draft.value}${text}`)\n draft.value = ''\n}\n\nfunction remove(index: number) {\n model.value = model.value.filter((_, at) => at !== index)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ',') {\n // Enter here commits a tag; it must not also submit the form around it.\n event.preventDefault()\n add()\n return\n }\n\n if (event.key === 'Backspace' && draft.value === '' && model.value.length) {\n event.preventDefault()\n remove(model.value.length - 1)\n }\n}\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div\n class=\"rk-tags control\"\n :class=\"{ 'is-invalid': invalid, 'is-disabled': disabled }\"\n @click=\"!disabled && ($el as HTMLElement).querySelector('input')?.focus()\"\n >\n <BaseChip\n v-for=\"(tag, index) in model\"\n :key=\"`${tag}-${index}`\"\n :label=\"tag\"\n :remove-label=\"removeLabel(tag)\"\n :disabled=\"disabled\"\n @remove=\"remove(index)\"\n />\n\n <input\n :id=\"id\"\n v-model=\"draft\"\n type=\"text\"\n class=\"rk-tags-field\"\n autocomplete=\"off\"\n :placeholder=\"model.length ? '' : placeholder\"\n :aria-describedby=\"describedBy\"\n :aria-invalid=\"invalid\"\n :disabled=\"disabled || (max !== undefined && model.length >= max)\"\n @keydown=\"onKeydown\"\n @paste=\"onPaste\"\n @blur=\"add\"\n />\n </div>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-tags {\n display: flex;\n min-height: 2.75rem;\n cursor: text;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.375rem;\n border-radius: var(--radius-card);\n padding: 0.375rem 0.5rem;\n}\n\n/* `:has(input:focus-visible)` rather than `:focus-within`: the ring belongs\n to the field, not to the chips' remove buttons, which carry their own. */\n.rk-tags:has(.rk-tags-field:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n\n.rk-tags.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-tags.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.rk-tags-field {\n min-width: 6rem;\n flex: 1;\n background: transparent;\n /* 16px, like every other field: below it iOS zooms the page in on focus\n and never zooms back. */\n font-size: 1rem;\n color: var(--color-ink);\n outline: none;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport BaseChip from './BaseChip.vue'\nimport FormField from './FormField.vue'\n\n/**\n * A field that holds several short values: recipients, labels, skills.\n *\n * Enter and a comma commit what has been typed; Backspace on an empty field\n * takes the last one back, which is the shortcut everybody tries. The chips\n * are before the field rather than beside it, so the caret is always at the\n * end of the line the way it is in a mail client.\n *\n * A pasted \"vue, html, css\" becomes three tags rather than one: whatever is\n * pasted is split on commas and line breaks, which is the shape every list\n * copied from somewhere else arrives in.\n *\n * `removeLabel` builds each chip's remove button name from the tag, so a\n * screen reader hears \"Remove: design\" rather than five buttons called \"×\".\n */\nconst {\n label,\n removeLabel,\n placeholder = '',\n hint = '',\n error = '',\n max = undefined,\n allowDuplicates = false,\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n /** `(tag) => \\`Remove ${tag}\\`` — already translated. */\n removeLabel: (tag: string) => string\n placeholder?: string | undefined\n hint?: string | undefined\n error?: string | undefined\n /** How many tags at most. The field stops taking them at the limit. */\n max?: number | undefined\n /** By default the same tag twice is ignored. */\n allowDuplicates?: boolean | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/** The tags, with `v-model`. */\nconst model = defineModel<string[]>({ default: () => [] })\n\nconst draft = ref('')\n\n/** Commits one or many: \"vue, html\" is two tags however it arrived. */\nfunction commit(text: string) {\n const parts = text\n .split(/[\\n,]/)\n .map((part) => part.trim())\n .filter(Boolean)\n\n if (parts.length === 0) return\n\n const next = [...model.value]\n for (const value of parts) {\n if (max !== undefined && next.length >= max) break\n if (!allowDuplicates && next.includes(value)) continue\n next.push(value)\n }\n\n if (next.length !== model.value.length) model.value = next\n}\n\nfunction add() {\n const text = draft.value\n draft.value = ''\n commit(text)\n}\n\nfunction onPaste(event: ClipboardEvent) {\n const text = event.clipboardData?.getData('text') ?? ''\n // Only when there is something to split on; a single word is left to the\n // field so the caret stays where the reader put it.\n if (!/[\\n,]/.test(text)) return\n\n event.preventDefault()\n commit(`${draft.value}${text}`)\n draft.value = ''\n}\n\nfunction remove(index: number) {\n model.value = model.value.filter((_, at) => at !== index)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ',') {\n // Enter here commits a tag; it must not also submit the form around it.\n event.preventDefault()\n add()\n return\n }\n\n if (event.key === 'Backspace' && draft.value === '' && model.value.length) {\n event.preventDefault()\n remove(model.value.length - 1)\n }\n}\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div\n class=\"rk-tags control\"\n :class=\"{ 'is-invalid': invalid, 'is-disabled': disabled }\"\n @click=\"!disabled && ($el as HTMLElement).querySelector('input')?.focus()\"\n >\n <BaseChip\n v-for=\"(tag, index) in model\"\n :key=\"`${tag}-${index}`\"\n :label=\"tag\"\n :remove-label=\"removeLabel(tag)\"\n :disabled=\"disabled\"\n @remove=\"remove(index)\"\n />\n\n <input\n :id=\"id\"\n v-model=\"draft\"\n type=\"text\"\n class=\"rk-tags-field\"\n autocomplete=\"off\"\n :placeholder=\"model.length ? '' : placeholder\"\n :aria-describedby=\"describedBy\"\n :aria-invalid=\"invalid\"\n :disabled=\"disabled || (max !== undefined && model.length >= max)\"\n @keydown=\"onKeydown\"\n @paste=\"onPaste\"\n @blur=\"add\"\n />\n </div>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-tags {\n display: flex;\n min-height: 2.75rem;\n cursor: text;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.375rem;\n border-radius: var(--radius-card);\n padding: 0.375rem 0.5rem;\n}\n\n/* `:has(input:focus-visible)` rather than `:focus-within`: the ring belongs\n to the field, not to the chips' remove buttons, which carry their own. */\n.rk-tags:has(.rk-tags-field:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n\n.rk-tags.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-tags.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.rk-tags-field {\n min-width: 6rem;\n flex: 1;\n background: transparent;\n /* 16px, like every other field: below it iOS zooms the page in on focus\n and never zooms back. */\n font-size: 1rem;\n color: var(--color-ink);\n outline: none;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport { useAnchoredPanel } from '../composables/use-anchored-panel'\nimport { FOCUSABLE } from '../utils/focusable'\n\n/**\n * A panel of anything — a form, a picker, a few settings — anchored to the\n * control that opened it.\n *\n * Not a menu and not a modal. A menu is a list of actions and moves with the\n * arrow keys; a modal takes the whole page. A popover is a small non-modal\n * dialog: focus moves into it on open and back to the trigger on Escape, a\n * click outside or a Tab out of it closes it, and the page behind stays\n * usable.\n *\n * The trigger is yours. The `trigger` slot hands you the attributes and the\n * click handler to bind on whatever you render — usually a `BaseButton` —\n * instead of wrapping it in a button of the kit's, which would nest one\n * button inside another.\n *\n * It opens below the trigger and flips above when there is no room below,\n * and slides sideways rather than off the edge of the screen.\n */\nconst {\n label,\n side = 'bottom',\n align = 'start',\n} = defineProps<{\n /** The panel's accessible name — what a screen reader announces on open. */\n label: string\n /** Where it prefers to open. It flips when there is no room there. */\n side?: 'bottom' | 'top' | undefined\n /** Which edge of the trigger the panel lines up with. */\n align?: 'start' | 'center' | 'end' | undefined\n}>()\n\nexport interface PopoverTriggerProps {\n 'aria-expanded': boolean\n 'aria-controls': string\n 'aria-haspopup': 'dialog'\n 'data-rk-popover-trigger': ''\n onClick: () => void\n}\n\ndefineSlots<{\n /** The control that opens it. Bind `props` on it: `v-bind=\"props\"`. */\n trigger: (props: { open: boolean; props: PopoverTriggerProps }) => unknown\n /** The panel's content. `close` for a Done or Apply button inside it. */\n default: (props: { close: () => void }) => unknown\n}>()\n\n/** Open or closed, with `v-model`. Optional: it manages itself. */\nconst open = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst root = ref<HTMLElement | null>(null)\nconst panel = ref<HTMLElement | null>(null)\n\nconst { placed, shift } = useAnchoredPanel({ root, panel, open, side })\n\nconst triggerProps = computed<PopoverTriggerProps>(() => ({\n 'aria-expanded': open.value,\n 'aria-controls': id,\n 'aria-haspopup': 'dialog',\n 'data-rk-popover-trigger': '',\n onClick: () => (open.value = !open.value),\n}))\n\nfunction close() {\n open.value = false\n}\n\nfunction trigger(): HTMLElement | null {\n return root.value?.querySelector<HTMLElement>('[data-rk-popover-trigger]') ?? null\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n if (event.key !== 'Escape' || !open.value) return\n\n event.preventDefault()\n close()\n trigger()?.focus()\n}\n\n/* Tab out of it, and it closes — it is not a trap. Focus that moved to\n nowhere (a click on empty page) is left to the pointer handler. */\nfunction onFocusout(event: FocusEvent) {\n const next = event.relatedTarget as Node | null\n if (next && root.value && !root.value.contains(next)) close()\n}\n\nfunction onDocumentPointer(event: Event) {\n if (root.value && !root.value.contains(event.target as Node)) close()\n}\n\nwatch(\n open,\n async (isOpen) => {\n if (typeof document === 'undefined') return\n\n if (!isOpen) {\n document.removeEventListener('pointerdown', onDocumentPointer)\n return\n }\n\n document.addEventListener('pointerdown', onDocumentPointer)\n await nextTick()\n const first = panel.value?.querySelector<HTMLElement>(FOCUSABLE)\n ;(first ?? panel.value)?.focus()\n },\n { immediate: true },\n)\n\nonBeforeUnmount(() => {\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointerdown', onDocumentPointer)\n }\n})\n</script>\n\n<template>\n <div ref=\"root\" class=\"rk-popover\" @keydown=\"onKeydown\" @focusout=\"onFocusout\">\n <slot name=\"trigger\" :open=\"open\" :props=\"triggerProps\" />\n\n <Transition name=\"rk-popover\">\n <div\n v-if=\"open\"\n :id=\"id\"\n ref=\"panel\"\n class=\"rk-popover-panel surface-overlay\"\n :class=\"[`is-${placed}`, `is-${align}`]\"\n :style=\"shift ? { '--rk-popover-shift': `${shift}px` } : undefined\"\n role=\"dialog\"\n :aria-label=\"label\"\n tabindex=\"-1\"\n >\n <slot :close=\"close\" />\n </div>\n </Transition>\n </div>\n</template>\n\n<style scoped>\n.rk-popover {\n position: relative;\n display: inline-flex;\n}\n\n.rk-popover-panel {\n position: absolute;\n z-index: 50;\n min-width: 14rem;\n max-width: min(24rem, calc(100vw - 1rem));\n border-radius: var(--radius-card);\n padding: 0.75rem;\n translate: var(--rk-popover-shift, 0) 0;\n}\n\n.rk-popover-panel:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-popover-panel.is-bottom {\n top: calc(100% + 0.5rem);\n}\n\n.rk-popover-panel.is-top {\n bottom: calc(100% + 0.5rem);\n}\n\n.rk-popover-panel.is-start {\n inset-inline-start: 0;\n}\n\n.rk-popover-panel.is-end {\n inset-inline-end: 0;\n}\n\n.rk-popover-panel.is-center {\n left: 50%;\n translate: calc(-50% + var(--rk-popover-shift, 0px)) 0;\n}\n\n.rk-popover-enter-active,\n.rk-popover-leave-active {\n transition:\n opacity var(--duration-fast) var(--ease-standard),\n transform var(--duration-fast) var(--ease-standard);\n}\n\n.rk-popover-enter-from,\n.rk-popover-leave-to {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n}\n\n.rk-popover-panel.is-top.rk-popover-enter-from,\n.rk-popover-panel.is-top.rk-popover-leave-to {\n transform: translateY(4px) scale(0.98);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport { useAnchoredPanel } from '../composables/use-anchored-panel'\nimport { FOCUSABLE } from '../utils/focusable'\n\n/**\n * A panel of anything — a form, a picker, a few settings — anchored to the\n * control that opened it.\n *\n * Not a menu and not a modal. A menu is a list of actions and moves with the\n * arrow keys; a modal takes the whole page. A popover is a small non-modal\n * dialog: focus moves into it on open and back to the trigger on Escape, a\n * click outside or a Tab out of it closes it, and the page behind stays\n * usable.\n *\n * The trigger is yours. The `trigger` slot hands you the attributes and the\n * click handler to bind on whatever you render — usually a `BaseButton` —\n * instead of wrapping it in a button of the kit's, which would nest one\n * button inside another.\n *\n * It opens below the trigger and flips above when there is no room below,\n * and slides sideways rather than off the edge of the screen.\n */\nconst {\n label,\n side = 'bottom',\n align = 'start',\n} = defineProps<{\n /** The panel's accessible name — what a screen reader announces on open. */\n label: string\n /** Where it prefers to open. It flips when there is no room there. */\n side?: 'bottom' | 'top' | undefined\n /** Which edge of the trigger the panel lines up with. */\n align?: 'start' | 'center' | 'end' | undefined\n}>()\n\nexport interface PopoverTriggerProps {\n 'aria-expanded': boolean\n 'aria-controls': string\n 'aria-haspopup': 'dialog'\n 'data-rk-popover-trigger': ''\n onClick: () => void\n}\n\ndefineSlots<{\n /** The control that opens it. Bind `props` on it: `v-bind=\"props\"`. */\n trigger: (props: { open: boolean; props: PopoverTriggerProps }) => unknown\n /** The panel's content. `close` for a Done or Apply button inside it. */\n default: (props: { close: () => void }) => unknown\n}>()\n\n/** Open or closed, with `v-model`. Optional: it manages itself. */\nconst open = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst root = ref<HTMLElement | null>(null)\nconst panel = ref<HTMLElement | null>(null)\n\nconst { placed, shift } = useAnchoredPanel({ root, panel, open, side })\n\nconst triggerProps = computed<PopoverTriggerProps>(() => ({\n 'aria-expanded': open.value,\n 'aria-controls': id,\n 'aria-haspopup': 'dialog',\n 'data-rk-popover-trigger': '',\n onClick: () => (open.value = !open.value),\n}))\n\nfunction close() {\n open.value = false\n}\n\nfunction trigger(): HTMLElement | null {\n return root.value?.querySelector<HTMLElement>('[data-rk-popover-trigger]') ?? null\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n if (event.key !== 'Escape' || !open.value) return\n\n event.preventDefault()\n close()\n trigger()?.focus()\n}\n\n/* Tab out of it, and it closes — it is not a trap. Focus that moved to\n nowhere (a click on empty page) is left to the pointer handler. */\nfunction onFocusout(event: FocusEvent) {\n const next = event.relatedTarget as Node | null\n if (next && root.value && !root.value.contains(next)) close()\n}\n\nfunction onDocumentPointer(event: Event) {\n if (root.value && !root.value.contains(event.target as Node)) close()\n}\n\nwatch(\n open,\n async (isOpen) => {\n if (typeof document === 'undefined') return\n\n if (!isOpen) {\n document.removeEventListener('pointerdown', onDocumentPointer)\n return\n }\n\n document.addEventListener('pointerdown', onDocumentPointer)\n await nextTick()\n const first = panel.value?.querySelector<HTMLElement>(FOCUSABLE)\n ;(first ?? panel.value)?.focus()\n },\n { immediate: true },\n)\n\nonBeforeUnmount(() => {\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointerdown', onDocumentPointer)\n }\n})\n</script>\n\n<template>\n <div ref=\"root\" class=\"rk-popover\" @keydown=\"onKeydown\" @focusout=\"onFocusout\">\n <slot name=\"trigger\" :open=\"open\" :props=\"triggerProps\" />\n\n <Transition name=\"rk-popover\">\n <div\n v-if=\"open\"\n :id=\"id\"\n ref=\"panel\"\n class=\"rk-popover-panel surface-overlay\"\n :class=\"[`is-${placed}`, `is-${align}`]\"\n :style=\"shift ? { '--rk-popover-shift': `${shift}px` } : undefined\"\n role=\"dialog\"\n :aria-label=\"label\"\n tabindex=\"-1\"\n >\n <slot :close=\"close\" />\n </div>\n </Transition>\n </div>\n</template>\n\n<style scoped>\n.rk-popover {\n position: relative;\n display: inline-flex;\n}\n\n.rk-popover-panel {\n position: absolute;\n z-index: 50;\n min-width: 14rem;\n max-width: min(24rem, calc(100vw - 1rem));\n border-radius: var(--radius-card);\n padding: 0.75rem;\n translate: var(--rk-popover-shift, 0) 0;\n}\n\n.rk-popover-panel:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-popover-panel.is-bottom {\n top: calc(100% + 0.5rem);\n}\n\n.rk-popover-panel.is-top {\n bottom: calc(100% + 0.5rem);\n}\n\n.rk-popover-panel.is-start {\n inset-inline-start: 0;\n}\n\n.rk-popover-panel.is-end {\n inset-inline-end: 0;\n}\n\n.rk-popover-panel.is-center {\n left: 50%;\n translate: calc(-50% + var(--rk-popover-shift, 0px)) 0;\n}\n\n.rk-popover-enter-active,\n.rk-popover-leave-active {\n transition:\n opacity var(--duration-fast) var(--ease-standard),\n transform var(--duration-fast) var(--ease-standard);\n}\n\n.rk-popover-enter-from,\n.rk-popover-leave-to {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n}\n\n.rk-popover-panel.is-top.rk-popover-enter-from,\n.rk-popover-panel.is-top.rk-popover-leave-to {\n transform: translateY(4px) scale(0.98);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Clock } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nimport BaseListbox from './BaseListbox.vue'\nimport BasePopover from './BasePopover.vue'\nimport FormField from './FormField.vue'\nimport { formatDate } from '../utils/format'\n\n/**\n * A time of day, chosen from two columns.\n *\n * The value is `HH:mm` on a 24-hour clock, the same way dates are\n * `YYYY-MM-DD`: one shape in and out, whatever the reader's locale does on\n * screen. What they see is `Intl` — \"14:30\" in Istanbul and \"2:30 PM\" in\n * Chicago — and neither of those is what the app stores.\n *\n * Two listboxes rather than a text field, for the reason the date picker is\n * a button: a typed time is a parsing problem in every locale at once, and\n * the two columns are one Tab stop each with the arrows inside them.\n */\nconst {\n label,\n hoursLabel,\n minutesLabel,\n placeholder = '',\n step = 15,\n min = undefined,\n max = undefined,\n error = '',\n hint = '',\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n /** The hour column's accessible name, e.g. \"Hour\". */\n hoursLabel: string\n /** The minute column's accessible name. */\n minutesLabel: string\n /** What the field shows while nothing is chosen. */\n placeholder?: string | undefined\n /** Minutes between the choices in the second column. */\n step?: number | undefined\n /** The earliest time that can be chosen, as `HH:mm`. */\n min?: string | undefined\n max?: string | undefined\n error?: string | undefined\n hint?: string | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/** The time as `HH:mm`, with `v-model`. */\nconst model = defineModel<string | undefined>()\n\nconst open = ref(false)\n\nconst pad = (value: number) => String(value).padStart(2, '0')\n\n/** A real date, only so `Intl` can say the time in the reader's own clock. */\nconst asDate = (time: string) => {\n const [hour = '0', minute = '0'] = time.split(':')\n return new Date(2000, 0, 1, Number(hour), Number(minute))\n}\n\nconst shown = computed(() =>\n model.value === undefined\n ? ''\n : formatDate(asDate(model.value), { hour: '2-digit', minute: '2-digit' }),\n)\n\nconst inRange = (time: string) => {\n if (min !== undefined && time < min) return false\n if (max !== undefined && time > max) return false\n return true\n}\n\nconst chosenHour = computed(() => model.value?.split(':')[0] ?? '')\nconst chosenMinute = computed(() => model.value?.split(':')[1] ?? '')\n\nconst hours = computed(() =>\n Array.from({ length: 24 }, (_, index) => {\n const value = pad(index)\n // An hour is offered when any minute in it can be chosen.\n const usable = minutes.value.some((one) => inRange(`${value}:${one.value}`))\n\n return {\n value,\n // The hour alone: the minutes are the column beside it. In a 12-hour\n // locale this is \"2 PM\", in a 24-hour one \"14\".\n label: formatDate(asDate(`${value}:00`), { hour: 'numeric' }),\n disabled: !usable,\n }\n }),\n)\n\nconst minutes = computed(() =>\n Array.from({ length: Math.ceil(60 / step) }, (_, index) => {\n const value = pad(index * step)\n\n return {\n value,\n label: value,\n disabled: chosenHour.value !== '' && !inRange(`${chosenHour.value}:${value}`),\n }\n }),\n)\n\nfunction pickHour(next: string | undefined) {\n if (next === undefined) return\n model.value = `${next}:${chosenMinute.value || pad(0)}`\n}\n\nfunction pickMinute(next: string | undefined) {\n if (next === undefined) return\n model.value = `${chosenHour.value || pad(0)}:${next}`\n open.value = false\n}\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <BasePopover v-model=\"open\" class=\"rk-time\" :label=\"label\">\n <template #trigger=\"{ props }\">\n <button\n :id=\"id\"\n type=\"button\"\n class=\"rk-time-field control focus-ring\"\n :class=\"{ 'is-invalid': invalid, 'is-empty': !shown }\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n v-bind=\"props\"\n >\n <Clock class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ shown || placeholder }}</span>\n </button>\n </template>\n\n <div class=\"rk-time-columns\">\n <BaseListbox\n :model-value=\"chosenHour\"\n :options=\"hours\"\n :label=\"hoursLabel\"\n height=\"12rem\"\n @update:model-value=\"pickHour\"\n />\n <BaseListbox\n :model-value=\"chosenMinute\"\n :options=\"minutes\"\n :label=\"minutesLabel\"\n height=\"12rem\"\n @update:model-value=\"pickMinute\"\n />\n </div>\n </BasePopover>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-time {\n display: block;\n}\n\n.rk-time-field {\n display: flex;\n width: 100%;\n height: 2.75rem;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0 0.75rem;\n text-align: start;\n font-size: 1rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n}\n\n.rk-time-field.is-empty {\n color: var(--color-ink-soft);\n}\n\n.rk-time-field.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-time-field:disabled {\n opacity: 0.5;\n}\n\n.rk-time-columns {\n display: grid;\n grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);\n gap: 0.5rem;\n width: 14rem;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Clock } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nimport BaseListbox from './BaseListbox.vue'\nimport BasePopover from './BasePopover.vue'\nimport FormField from './FormField.vue'\nimport { formatDate } from '../utils/format'\n\n/**\n * A time of day, chosen from two columns.\n *\n * The value is `HH:mm` on a 24-hour clock, the same way dates are\n * `YYYY-MM-DD`: one shape in and out, whatever the reader's locale does on\n * screen. What they see is `Intl` — \"14:30\" in Istanbul and \"2:30 PM\" in\n * Chicago — and neither of those is what the app stores.\n *\n * Two listboxes rather than a text field, for the reason the date picker is\n * a button: a typed time is a parsing problem in every locale at once, and\n * the two columns are one Tab stop each with the arrows inside them.\n */\nconst {\n label,\n hoursLabel,\n minutesLabel,\n placeholder = '',\n step = 15,\n min = undefined,\n max = undefined,\n error = '',\n hint = '',\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n /** The hour column's accessible name, e.g. \"Hour\". */\n hoursLabel: string\n /** The minute column's accessible name. */\n minutesLabel: string\n /** What the field shows while nothing is chosen. */\n placeholder?: string | undefined\n /** Minutes between the choices in the second column. */\n step?: number | undefined\n /** The earliest time that can be chosen, as `HH:mm`. */\n min?: string | undefined\n max?: string | undefined\n error?: string | undefined\n hint?: string | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/** The time as `HH:mm`, with `v-model`. */\nconst model = defineModel<string | undefined>()\n\nconst open = ref(false)\n\nconst pad = (value: number) => String(value).padStart(2, '0')\n\n/** A real date, only so `Intl` can say the time in the reader's own clock. */\nconst asDate = (time: string) => {\n const [hour = '0', minute = '0'] = time.split(':')\n return new Date(2000, 0, 1, Number(hour), Number(minute))\n}\n\nconst shown = computed(() =>\n model.value === undefined\n ? ''\n : formatDate(asDate(model.value), { hour: '2-digit', minute: '2-digit' }),\n)\n\nconst inRange = (time: string) => {\n if (min !== undefined && time < min) return false\n if (max !== undefined && time > max) return false\n return true\n}\n\nconst chosenHour = computed(() => model.value?.split(':')[0] ?? '')\nconst chosenMinute = computed(() => model.value?.split(':')[1] ?? '')\n\nconst hours = computed(() =>\n Array.from({ length: 24 }, (_, index) => {\n const value = pad(index)\n // An hour is offered when any minute in it can be chosen.\n const usable = minutes.value.some((one) => inRange(`${value}:${one.value}`))\n\n return {\n value,\n // The hour alone: the minutes are the column beside it. In a 12-hour\n // locale this is \"2 PM\", in a 24-hour one \"14\".\n label: formatDate(asDate(`${value}:00`), { hour: 'numeric' }),\n disabled: !usable,\n }\n }),\n)\n\nconst minutes = computed(() =>\n Array.from({ length: Math.ceil(60 / step) }, (_, index) => {\n const value = pad(index * step)\n\n return {\n value,\n label: value,\n disabled: chosenHour.value !== '' && !inRange(`${chosenHour.value}:${value}`),\n }\n }),\n)\n\nfunction pickHour(next: string | undefined) {\n if (next === undefined) return\n model.value = `${next}:${chosenMinute.value || pad(0)}`\n}\n\nfunction pickMinute(next: string | undefined) {\n if (next === undefined) return\n model.value = `${chosenHour.value || pad(0)}:${next}`\n open.value = false\n}\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <BasePopover v-model=\"open\" class=\"rk-time\" :label=\"label\">\n <template #trigger=\"{ props }\">\n <button\n :id=\"id\"\n type=\"button\"\n class=\"rk-time-field control focus-ring\"\n :class=\"{ 'is-invalid': invalid, 'is-empty': !shown }\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n v-bind=\"props\"\n >\n <Clock class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ shown || placeholder }}</span>\n </button>\n </template>\n\n <div class=\"rk-time-columns\">\n <BaseListbox\n :model-value=\"chosenHour\"\n :options=\"hours\"\n :label=\"hoursLabel\"\n height=\"12rem\"\n @update:model-value=\"pickHour\"\n />\n <BaseListbox\n :model-value=\"chosenMinute\"\n :options=\"minutes\"\n :label=\"minutesLabel\"\n height=\"12rem\"\n @update:model-value=\"pickMinute\"\n />\n </div>\n </BasePopover>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-time {\n display: block;\n}\n\n.rk-time-field {\n display: flex;\n width: 100%;\n height: 2.75rem;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0 0.75rem;\n text-align: start;\n font-size: 1rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n}\n\n.rk-time-field.is-empty {\n color: var(--color-ink-soft);\n}\n\n.rk-time-field.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-time-field:disabled {\n opacity: 0.5;\n}\n\n.rk-time-columns {\n display: grid;\n grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);\n gap: 0.5rem;\n width: 14rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends TimelineEvent\">\nimport type { Component } from 'vue'\n\nexport interface TimelineEvent {\n /** Identity, and the name of this event's own body slot. */\n key: string\n /**\n * When it happened, **already formatted for the active locale**.\n *\n * A string rather than a date key, because only the app knows whether this\n * line should read \"12 September\", \"2 hours ago\" or \"09:42\" — and\n * `formatDate` is right there for the first of those.\n */\n time: string\n /** Already translated. Omit when the body says it. */\n title?: string | undefined\n /** A line under the title. Already translated. */\n description?: string | undefined\n /**\n * Background utility for the marker, e.g. `bg-positive`.\n *\n * A class rather than a category, the same contract as `ToneDot`: an app\n * keys it off whatever its own domain calls a kind — habit types, order\n * states, priorities — without this component knowing about any of them.\n */\n fill?: string | undefined\n /** Drawn inside the marker instead of a plain dot. */\n icon?: Component | undefined\n}\n\n/**\n * What happened, in order, on a rail.\n *\n * ## `Timeline` or `BaseStepper`\n *\n * A stepper is a process you are *in*: it has a current step, steps ahead\n * that have not happened, and — when it is interactive — steps behind you\n * can go back to. A timeline is a record of what already happened. It is\n * not a control, nothing in it is pressable unless the app puts a control\n * in the body, and there is no \"next\".\n *\n * Reaching for the wrong one shows: a stepper drawn from history implies\n * the reader can move through it, and a timeline drawn for a checkout\n * leaves them with no idea where they are.\n *\n * ## The rail is decoration\n *\n * The line and the dots are `aria-hidden`. What carries the meaning is that\n * this is an ordered list — `<ol>`, so a screen reader says \"list, 5 items\"\n * and numbers them — with each event's time read before its title. A rail\n * drawn with divs says nothing at all, which is what every hand-written one\n * does.\n *\n * The order is the app's. Newest first suits a note feed, because that is\n * the one somebody came back to read; oldest first suits a status trail.\n * The kit sorts nothing.\n *\n * ## The events are yours\n *\n * This is generic over whatever objects you pass, the way `BaseTable` is\n * generic over its rows: add your own fields and the slots hand them back\n * typed. That is what the body is for — a note, a card, a quote — and it\n * saves mapping your data into a shape that then has to be looked up again\n * by key.\n */\nconst { events, label } = defineProps<{\n events: readonly T[]\n /** Names the list. Already translated. */\n label: string\n}>()\n\ndefineSlots<{\n /** The body of every event — a note, a card, a quote. */\n default?: (props: { event: T }) => unknown\n /** The body of one event, named for its key. Wins over `default`. */\n [key: string]: ((props: { event: T }) => unknown) | undefined\n /** The marker for every event, when a dot is not enough. */\n marker?: (props: { event: T }) => unknown\n}>()\n</script>\n\n<template>\n <ol class=\"rk-timeline\" :aria-label=\"label\">\n <!-- One line behind the whole list rather than a segment per row: a\n segment per row leaves a hairline gap at every join. -->\n <span class=\"rk-timeline-rail\" aria-hidden=\"true\" />\n\n <li v-for=\"event in events\" :key=\"event.key\" class=\"rk-timeline-event\">\n <span class=\"rk-timeline-marker\" aria-hidden=\"true\">\n <slot name=\"marker\" :event=\"event\">\n <span class=\"rk-timeline-dot\" :class=\"event.fill ?? 'bg-primary'\">\n <component :is=\"event.icon\" v-if=\"event.icon\" class=\"size-3\" />\n </span>\n </slot>\n </span>\n\n <p class=\"rk-timeline-time\">{{ event.time }}</p>\n <p v-if=\"event.title\" class=\"rk-timeline-title\">{{ event.title }}</p>\n <p v-if=\"event.description\" class=\"rk-timeline-description\">{{ event.description }}</p>\n\n <!-- Its own slot if it has one, the shared body if not: a feed has\n one shape for every row, and one odd row should not cost a slot\n per row. -->\n <div v-if=\"$slots[event.key] || $slots.default\" class=\"rk-timeline-body\">\n <slot v-if=\"$slots[event.key]\" :name=\"event.key\" :event=\"event\" />\n <slot v-else :event=\"event\" />\n </div>\n </li>\n </ol>\n</template>\n\n<style scoped>\n.rk-timeline {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding-inline-start: 1.5rem;\n}\n\n/* Stops short of both ends: a line running past the first and last dots\n reads as a sequence that continues out of view. */\n.rk-timeline-rail {\n position: absolute;\n top: 0.5rem;\n bottom: 0.75rem;\n inset-inline-start: 0.25rem;\n width: 1px;\n background: var(--color-hair);\n}\n\n.rk-timeline-event {\n position: relative;\n}\n\n.rk-timeline-marker {\n position: absolute;\n top: 0.125rem;\n inset-inline-start: -1.5rem;\n display: grid;\n place-items: center;\n}\n\n/* The ring is the page's own ground, so the dot sits on the rail rather\n than being crossed by it. */\n.rk-timeline-dot {\n display: grid;\n width: 0.625rem;\n height: 0.625rem;\n place-items: center;\n border-radius: 9999px;\n border: 2px solid var(--color-canvas);\n color: var(--color-on-primary);\n}\n\n.rk-timeline-time {\n font-size: 0.75rem;\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink-soft);\n}\n\n.rk-timeline-title {\n margin-top: 0.125rem;\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-ink);\n}\n\n.rk-timeline-description {\n margin-top: 0.125rem;\n font-size: 0.875rem;\n line-height: 1.5;\n color: var(--color-ink-soft);\n}\n\n.rk-timeline-body {\n margin-top: 0.5rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends TimelineEvent\">\nimport type { Component } from 'vue'\n\nexport interface TimelineEvent {\n /** Identity, and the name of this event's own body slot. */\n key: string\n /**\n * When it happened, **already formatted for the active locale**.\n *\n * A string rather than a date key, because only the app knows whether this\n * line should read \"12 September\", \"2 hours ago\" or \"09:42\" — and\n * `formatDate` is right there for the first of those.\n */\n time: string\n /** Already translated. Omit when the body says it. */\n title?: string | undefined\n /** A line under the title. Already translated. */\n description?: string | undefined\n /**\n * Background utility for the marker, e.g. `bg-positive`.\n *\n * A class rather than a category, the same contract as `ToneDot`: an app\n * keys it off whatever its own domain calls a kind — habit types, order\n * states, priorities — without this component knowing about any of them.\n */\n fill?: string | undefined\n /** Drawn inside the marker instead of a plain dot. */\n icon?: Component | undefined\n}\n\n/**\n * What happened, in order, on a rail.\n *\n * ## `Timeline` or `BaseStepper`\n *\n * A stepper is a process you are *in*: it has a current step, steps ahead\n * that have not happened, and — when it is interactive — steps behind you\n * can go back to. A timeline is a record of what already happened. It is\n * not a control, nothing in it is pressable unless the app puts a control\n * in the body, and there is no \"next\".\n *\n * Reaching for the wrong one shows: a stepper drawn from history implies\n * the reader can move through it, and a timeline drawn for a checkout\n * leaves them with no idea where they are.\n *\n * ## The rail is decoration\n *\n * The line and the dots are `aria-hidden`. What carries the meaning is that\n * this is an ordered list — `<ol>`, so a screen reader says \"list, 5 items\"\n * and numbers them — with each event's time read before its title. A rail\n * drawn with divs says nothing at all, which is what every hand-written one\n * does.\n *\n * The order is the app's. Newest first suits a note feed, because that is\n * the one somebody came back to read; oldest first suits a status trail.\n * The kit sorts nothing.\n *\n * ## The events are yours\n *\n * This is generic over whatever objects you pass, the way `BaseTable` is\n * generic over its rows: add your own fields and the slots hand them back\n * typed. That is what the body is for — a note, a card, a quote — and it\n * saves mapping your data into a shape that then has to be looked up again\n * by key.\n */\nconst { events, label } = defineProps<{\n events: readonly T[]\n /** Names the list. Already translated. */\n label: string\n}>()\n\ndefineSlots<{\n /** The body of every event — a note, a card, a quote. */\n default?: (props: { event: T }) => unknown\n /** The body of one event, named for its key. Wins over `default`. */\n [key: string]: ((props: { event: T }) => unknown) | undefined\n /** The marker for every event, when a dot is not enough. */\n marker?: (props: { event: T }) => unknown\n}>()\n</script>\n\n<template>\n <ol class=\"rk-timeline\" :aria-label=\"label\">\n <!-- One line behind the whole list rather than a segment per row: a\n segment per row leaves a hairline gap at every join. -->\n <span class=\"rk-timeline-rail\" aria-hidden=\"true\" />\n\n <li v-for=\"event in events\" :key=\"event.key\" class=\"rk-timeline-event\">\n <span class=\"rk-timeline-marker\" aria-hidden=\"true\">\n <slot name=\"marker\" :event=\"event\">\n <span class=\"rk-timeline-dot\" :class=\"event.fill ?? 'bg-primary'\">\n <component :is=\"event.icon\" v-if=\"event.icon\" class=\"size-3\" />\n </span>\n </slot>\n </span>\n\n <p class=\"rk-timeline-time\">{{ event.time }}</p>\n <p v-if=\"event.title\" class=\"rk-timeline-title\">{{ event.title }}</p>\n <p v-if=\"event.description\" class=\"rk-timeline-description\">{{ event.description }}</p>\n\n <!-- Its own slot if it has one, the shared body if not: a feed has\n one shape for every row, and one odd row should not cost a slot\n per row. -->\n <div v-if=\"$slots[event.key] || $slots.default\" class=\"rk-timeline-body\">\n <slot v-if=\"$slots[event.key]\" :name=\"event.key\" :event=\"event\" />\n <slot v-else :event=\"event\" />\n </div>\n </li>\n </ol>\n</template>\n\n<style scoped>\n.rk-timeline {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding-inline-start: 1.5rem;\n}\n\n/* Stops short of both ends: a line running past the first and last dots\n reads as a sequence that continues out of view. */\n.rk-timeline-rail {\n position: absolute;\n top: 0.5rem;\n bottom: 0.75rem;\n inset-inline-start: 0.25rem;\n width: 1px;\n background: var(--color-hair);\n}\n\n.rk-timeline-event {\n position: relative;\n}\n\n.rk-timeline-marker {\n position: absolute;\n top: 0.125rem;\n inset-inline-start: -1.5rem;\n display: grid;\n place-items: center;\n}\n\n/* The ring is the page's own ground, so the dot sits on the rail rather\n than being crossed by it. */\n.rk-timeline-dot {\n display: grid;\n width: 0.625rem;\n height: 0.625rem;\n place-items: center;\n border-radius: 9999px;\n border: 2px solid var(--color-canvas);\n color: var(--color-on-primary);\n}\n\n.rk-timeline-time {\n font-size: 0.75rem;\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink-soft);\n}\n\n.rk-timeline-title {\n margin-top: 0.125rem;\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-ink);\n}\n\n.rk-timeline-description {\n margin-top: 0.125rem;\n font-size: 0.875rem;\n line-height: 1.5;\n color: var(--color-ink-soft);\n}\n\n.rk-timeline-body {\n margin-top: 0.5rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"M extends 'single' | 'range' = 'single'\">\nimport { CalendarDays, X } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nimport BaseCalendar from './BaseCalendar.vue'\nimport type { DateRange } from './BaseCalendar.vue'\nimport BasePopover from './BasePopover.vue'\nimport FormField from './FormField.vue'\nimport { fromDateKey } from '../utils/date'\nimport type { WeekStart } from '../utils/date'\nimport { formatDate } from '../utils/format'\n\nexport interface DatePreset {\n /** Already translated: \"Last 7 days\", \"This month\". */\n label: string\n /** The days it stands for, built when it is pressed — so \"today\" is today. */\n value: () => string | DateRange\n}\n\n/**\n * A date, or a stretch of dates, chosen from a calendar in a popover.\n *\n * The field is a button rather than a text input: a typed date is a parsing\n * problem in every locale at once — \"03/04\" is two different days either\n * side of the Atlantic — and the calendar is the part people reach for\n * anyway. What it shows is `Intl` in the app's locale; what it hands back\n * is the kit's date keys.\n *\n * `presets` are the ready-made answers a report offers: last seven days,\n * this month. They are the app's words and the app's arithmetic, built when\n * pressed so that \"today\" is today.\n */\nconst {\n label,\n mode = 'single' as M,\n placeholder = '',\n format = { dateStyle: 'medium' },\n presets = undefined,\n clearLabel = undefined,\n min = undefined,\n max = undefined,\n isDisabled = undefined,\n weekStartsOn = 1,\n previousLabel,\n nextLabel,\n today = undefined,\n error = '',\n hint = '',\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n /** One day, or a stretch from one day to another. */\n mode?: M | undefined\n /** What the field shows while nothing is chosen. */\n placeholder?: string | undefined\n /** How the chosen date reads, through `Intl.DateTimeFormat`. */\n format?: Intl.DateTimeFormatOptions | undefined\n /** Ready-made answers beside the calendar: \"Last 7 days\", \"This month\". */\n presets?: readonly DatePreset[] | undefined\n /** Given, the field grows a button that empties it. Its accessible name. */\n clearLabel?: string | undefined\n min?: string | undefined\n max?: string | undefined\n isDisabled?: ((key: string) => boolean) | undefined\n weekStartsOn?: WeekStart | undefined\n /** Accessible name of the calendar's back arrow. */\n previousLabel: string\n /** Accessible name of the calendar's forward arrow. */\n nextLabel: string\n /** Which day the calendar marks as today. Given, so a demo or a test can fix it. */\n today?: string | undefined\n error?: string | undefined\n hint?: string | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/* `| undefined` outside the condition, not inside each branch: TypeScript\n can then see that `Value | undefined` is `Value`, which it cannot while\n `M` is still open. */\ntype Value = (M extends 'range' ? DateRange : string) | undefined\n\n/** The chosen day, or range, with `v-model`. */\nconst model = defineModel<Value>()\n\nconst open = ref(false)\n\nconst shown = computed(() => {\n const value = model.value\n if (value === undefined) return ''\n if (typeof value === 'string') return formatDate(fromDateKey(value), format)\n\n const start = formatDate(fromDateKey(value.start), format)\n if (value.start === value.end) return start\n\n // An en dash, not a hyphen: it is a span, and it reads as one.\n return `${start} – ${formatDate(fromDateKey(value.end), format)}`\n})\n\nfunction onPicked(next: Value | undefined) {\n model.value = next as Value\n // Single: chosen is done. Range: only once both ends are in, which is the\n // only time the calendar reports one.\n if (mode === 'single' || (next && typeof next === 'object')) open.value = false\n}\n\nfunction applyPreset(preset: DatePreset) {\n model.value = preset.value() as Value\n open.value = false\n}\n\nfunction clear() {\n model.value = undefined as Value\n open.value = false\n}\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <BasePopover v-model=\"open\" class=\"rk-date\" :label=\"label\">\n <!-- Two buttons side by side rather than one inside the other: a\n button nested in a button is not a control a browser or a screen\n reader can make sense of. -->\n <template #trigger=\"{ props }\">\n <div class=\"rk-date-wrap control\" :class=\"{ 'is-invalid': invalid }\">\n <button\n :id=\"id\"\n type=\"button\"\n class=\"rk-date-field focus-ring\"\n :class=\"{ 'is-empty': !shown }\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n v-bind=\"props\"\n >\n <CalendarDays class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ shown || placeholder }}</span>\n </button>\n\n <button\n v-if=\"clearLabel && shown\"\n type=\"button\"\n class=\"rk-date-clear focus-ring\"\n :aria-label=\"clearLabel\"\n :disabled=\"disabled\"\n @click=\"clear\"\n >\n <X class=\"size-3.5\" aria-hidden=\"true\" />\n </button>\n </div>\n </template>\n\n <div class=\"rk-date-panel\">\n <ul v-if=\"presets?.length\" class=\"rk-date-presets\">\n <li v-for=\"preset in presets\" :key=\"preset.label\">\n <button type=\"button\" class=\"rk-date-preset focus-ring\" @click=\"applyPreset(preset)\">\n {{ preset.label }}\n </button>\n </li>\n </ul>\n\n <BaseCalendar\n :model-value=\"model\"\n :mode=\"mode\"\n :min=\"min\"\n :max=\"max\"\n :is-disabled=\"isDisabled\"\n :week-starts-on=\"weekStartsOn\"\n :previous-label=\"previousLabel\"\n :next-label=\"nextLabel\"\n v-bind=\"today ? { today } : {}\"\n @update:model-value=\"onPicked\"\n />\n </div>\n </BasePopover>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-date {\n display: block;\n}\n\n/* Wider than a popover's default: a calendar and a column of presets side by\n side do not fit in 24rem, and the month title wraps in two. */\n.rk-date :deep(.rk-popover-panel) {\n max-width: min(34rem, calc(100vw - 1rem));\n}\n\n.rk-date-wrap {\n display: flex;\n width: 100%;\n height: 2.75rem;\n align-items: center;\n border-radius: var(--radius-card);\n padding-inline-end: 0.375rem;\n}\n\n.rk-date-field {\n display: flex;\n min-width: 0;\n flex: 1;\n height: 100%;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0 0.75rem;\n text-align: start;\n font-size: 1rem;\n color: var(--color-ink);\n}\n\n.rk-date-field.is-empty {\n color: var(--color-ink-soft);\n}\n\n.rk-date-wrap.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-date-field:disabled {\n opacity: 0.5;\n}\n\n.rk-date-clear {\n display: grid;\n width: 1.375rem;\n height: 1.375rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink-soft);\n}\n\n.rk-date-clear:hover {\n background: var(--color-muted);\n color: var(--color-ink);\n}\n\n.rk-date-clear:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n\n/* As wide as its contents rather than as narrow as they will go: in a flex\n panel the calendar shrinks, and a squeezed month title wraps in two. */\n.rk-date-panel {\n display: flex;\n width: max-content;\n max-width: 100%;\n gap: 0.75rem;\n}\n\n.rk-date-panel :deep(.rk-cal) {\n width: 17rem;\n}\n\n.rk-date-presets {\n display: flex;\n min-width: 8rem;\n flex-direction: column;\n gap: 2px;\n border-inline-end: 1px solid var(--surface-border-color);\n padding-inline-end: 0.75rem;\n}\n\n.rk-date-preset {\n width: 100%;\n border-radius: var(--radius-cell);\n padding: 0.375rem 0.5rem;\n text-align: start;\n font-size: 0.8125rem;\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-date-preset:hover {\n background: var(--color-muted);\n}\n\n@media (max-width: 30rem) {\n .rk-date-panel {\n flex-direction: column;\n }\n\n .rk-date-presets {\n flex-direction: row;\n flex-wrap: wrap;\n border-inline-end: 0;\n border-bottom: 1px solid var(--surface-border-color);\n padding-inline-end: 0;\n padding-bottom: 0.5rem;\n }\n\n .rk-date-preset {\n width: auto;\n }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"M extends 'single' | 'range' = 'single'\">\nimport { CalendarDays, X } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nimport BaseCalendar from './BaseCalendar.vue'\nimport type { DateRange } from './BaseCalendar.vue'\nimport BasePopover from './BasePopover.vue'\nimport FormField from './FormField.vue'\nimport { fromDateKey } from '../utils/date'\nimport type { WeekStart } from '../utils/date'\nimport { formatDate } from '../utils/format'\n\nexport interface DatePreset {\n /** Already translated: \"Last 7 days\", \"This month\". */\n label: string\n /** The days it stands for, built when it is pressed — so \"today\" is today. */\n value: () => string | DateRange\n}\n\n/**\n * A date, or a stretch of dates, chosen from a calendar in a popover.\n *\n * The field is a button rather than a text input: a typed date is a parsing\n * problem in every locale at once — \"03/04\" is two different days either\n * side of the Atlantic — and the calendar is the part people reach for\n * anyway. What it shows is `Intl` in the app's locale; what it hands back\n * is the kit's date keys.\n *\n * `presets` are the ready-made answers a report offers: last seven days,\n * this month. They are the app's words and the app's arithmetic, built when\n * pressed so that \"today\" is today.\n */\nconst {\n label,\n mode = 'single' as M,\n placeholder = '',\n format = { dateStyle: 'medium' },\n presets = undefined,\n clearLabel = undefined,\n min = undefined,\n max = undefined,\n isDisabled = undefined,\n weekStartsOn = 1,\n previousLabel,\n nextLabel,\n today = undefined,\n error = '',\n hint = '',\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n /** One day, or a stretch from one day to another. */\n mode?: M | undefined\n /** What the field shows while nothing is chosen. */\n placeholder?: string | undefined\n /** How the chosen date reads, through `Intl.DateTimeFormat`. */\n format?: Intl.DateTimeFormatOptions | undefined\n /** Ready-made answers beside the calendar: \"Last 7 days\", \"This month\". */\n presets?: readonly DatePreset[] | undefined\n /** Given, the field grows a button that empties it. Its accessible name. */\n clearLabel?: string | undefined\n min?: string | undefined\n max?: string | undefined\n isDisabled?: ((key: string) => boolean) | undefined\n weekStartsOn?: WeekStart | undefined\n /** Accessible name of the calendar's back arrow. */\n previousLabel: string\n /** Accessible name of the calendar's forward arrow. */\n nextLabel: string\n /** Which day the calendar marks as today. Given, so a demo or a test can fix it. */\n today?: string | undefined\n error?: string | undefined\n hint?: string | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/* `| undefined` outside the condition, not inside each branch: TypeScript\n can then see that `Value | undefined` is `Value`, which it cannot while\n `M` is still open. */\ntype Value = (M extends 'range' ? DateRange : string) | undefined\n\n/** The chosen day, or range, with `v-model`. */\nconst model = defineModel<Value>()\n\nconst open = ref(false)\n\nconst shown = computed(() => {\n const value = model.value\n if (value === undefined) return ''\n if (typeof value === 'string') return formatDate(fromDateKey(value), format)\n\n const start = formatDate(fromDateKey(value.start), format)\n if (value.start === value.end) return start\n\n // An en dash, not a hyphen: it is a span, and it reads as one.\n return `${start} – ${formatDate(fromDateKey(value.end), format)}`\n})\n\nfunction onPicked(next: Value | undefined) {\n model.value = next as Value\n // Single: chosen is done. Range: only once both ends are in, which is the\n // only time the calendar reports one.\n if (mode === 'single' || (next && typeof next === 'object')) open.value = false\n}\n\nfunction applyPreset(preset: DatePreset) {\n model.value = preset.value() as Value\n open.value = false\n}\n\nfunction clear() {\n model.value = undefined as Value\n open.value = false\n}\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <BasePopover v-model=\"open\" class=\"rk-date\" :label=\"label\">\n <!-- Two buttons side by side rather than one inside the other: a\n button nested in a button is not a control a browser or a screen\n reader can make sense of. -->\n <template #trigger=\"{ props }\">\n <div class=\"rk-date-wrap control\" :class=\"{ 'is-invalid': invalid }\">\n <button\n :id=\"id\"\n type=\"button\"\n class=\"rk-date-field focus-ring\"\n :class=\"{ 'is-empty': !shown }\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n v-bind=\"props\"\n >\n <CalendarDays class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ shown || placeholder }}</span>\n </button>\n\n <button\n v-if=\"clearLabel && shown\"\n type=\"button\"\n class=\"rk-date-clear focus-ring\"\n :aria-label=\"clearLabel\"\n :disabled=\"disabled\"\n @click=\"clear\"\n >\n <X class=\"size-3.5\" aria-hidden=\"true\" />\n </button>\n </div>\n </template>\n\n <div class=\"rk-date-panel\">\n <ul v-if=\"presets?.length\" class=\"rk-date-presets\">\n <li v-for=\"preset in presets\" :key=\"preset.label\">\n <button type=\"button\" class=\"rk-date-preset focus-ring\" @click=\"applyPreset(preset)\">\n {{ preset.label }}\n </button>\n </li>\n </ul>\n\n <BaseCalendar\n :model-value=\"model\"\n :mode=\"mode\"\n :min=\"min\"\n :max=\"max\"\n :is-disabled=\"isDisabled\"\n :week-starts-on=\"weekStartsOn\"\n :previous-label=\"previousLabel\"\n :next-label=\"nextLabel\"\n v-bind=\"today ? { today } : {}\"\n @update:model-value=\"onPicked\"\n />\n </div>\n </BasePopover>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-date {\n display: block;\n}\n\n/* Wider than a popover's default: a calendar and a column of presets side by\n side do not fit in 24rem, and the month title wraps in two. */\n.rk-date :deep(.rk-popover-panel) {\n max-width: min(34rem, calc(100vw - 1rem));\n}\n\n.rk-date-wrap {\n display: flex;\n width: 100%;\n height: 2.75rem;\n align-items: center;\n border-radius: var(--radius-card);\n padding-inline-end: 0.375rem;\n}\n\n.rk-date-field {\n display: flex;\n min-width: 0;\n flex: 1;\n height: 100%;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0 0.75rem;\n text-align: start;\n font-size: 1rem;\n color: var(--color-ink);\n}\n\n.rk-date-field.is-empty {\n color: var(--color-ink-soft);\n}\n\n.rk-date-wrap.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-date-field:disabled {\n opacity: 0.5;\n}\n\n.rk-date-clear {\n display: grid;\n width: 1.375rem;\n height: 1.375rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink-soft);\n}\n\n.rk-date-clear:hover {\n background: var(--color-muted);\n color: var(--color-ink);\n}\n\n.rk-date-clear:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n\n/* As wide as its contents rather than as narrow as they will go: in a flex\n panel the calendar shrinks, and a squeezed month title wraps in two. */\n.rk-date-panel {\n display: flex;\n width: max-content;\n max-width: 100%;\n gap: 0.75rem;\n}\n\n.rk-date-panel :deep(.rk-cal) {\n width: 17rem;\n}\n\n.rk-date-presets {\n display: flex;\n min-width: 8rem;\n flex-direction: column;\n gap: 2px;\n border-inline-end: 1px solid var(--surface-border-color);\n padding-inline-end: 0.75rem;\n}\n\n.rk-date-preset {\n width: 100%;\n border-radius: var(--radius-cell);\n padding: 0.375rem 0.5rem;\n text-align: start;\n font-size: 0.8125rem;\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-date-preset:hover {\n background: var(--color-muted);\n}\n\n@media (max-width: 30rem) {\n .rk-date-panel {\n flex-direction: column;\n }\n\n .rk-date-presets {\n flex-direction: row;\n flex-wrap: wrap;\n border-inline-end: 0;\n border-bottom: 1px solid var(--surface-border-color);\n padding-inline-end: 0;\n padding-bottom: 0.5rem;\n }\n\n .rk-date-preset {\n width: auto;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport BasePopover from './BasePopover.vue'\nimport type { PopoverTriggerProps } from './BasePopover.vue'\n\n/**\n * \"Are you sure?\", asked beside the button that asked it.\n *\n * A modal for a one-word question takes the whole page away from what it is\n * about; this keeps the thing being deleted on screen and the question next\n * to it. Reach for `BaseModal` or `ResponsiveDialog` when the answer needs\n * explaining, and for a toast with an undo when it does not need asking at\n * all — an undo is kinder than a confirmation, and this component is the\n * middle of those two.\n *\n * The trigger is yours, as it is in `BasePopover`: bind `props` to whatever\n * you render.\n */\nconst {\n message,\n confirmLabel,\n cancelLabel,\n title = '',\n tone = 'danger',\n} = defineProps<{\n /** The question. Already translated. */\n message: string\n /** The button that goes ahead, e.g. \"Delete\". */\n confirmLabel: string\n /** The button that does not, e.g. \"Cancel\". */\n cancelLabel: string\n /** A heading over the question, and the panel's accessible name. */\n title?: string | undefined\n /** The confirming button's variant. */\n tone?: 'danger' | 'primary' | undefined\n}>()\n\nconst emit = defineEmits<{ confirm: []; cancel: [] }>()\n\ndefineSlots<{\n /** The control that asks. Bind `props` on it: `v-bind=\"props\"`. */\n trigger: (props: { open: boolean; props: PopoverTriggerProps }) => unknown\n}>()\n\n/** Open or closed, with `v-model`. */\nconst open = defineModel<boolean>({ default: false })\n\nfunction confirm(close: () => void) {\n close()\n emit('confirm')\n}\n\nfunction cancel(close: () => void) {\n close()\n emit('cancel')\n}\n</script>\n\n<template>\n <BasePopover v-model=\"open\" :label=\"title || message\" align=\"end\">\n <template #trigger=\"slotProps\">\n <slot name=\"trigger\" v-bind=\"slotProps\" />\n </template>\n\n <template #default=\"{ close }\">\n <div class=\"rk-confirm\">\n <p v-if=\"title\" class=\"rk-confirm-title\">{{ title }}</p>\n <p class=\"rk-confirm-message\">{{ message }}</p>\n\n <div class=\"rk-confirm-actions\">\n <BaseButton size=\"sm\" variant=\"secondary\" @click=\"cancel(close)\">\n {{ cancelLabel }}\n </BaseButton>\n <BaseButton size=\"sm\" :variant=\"tone\" @click=\"confirm(close)\">\n {{ confirmLabel }}\n </BaseButton>\n </div>\n </div>\n </template>\n </BasePopover>\n</template>\n\n<style scoped>\n.rk-confirm {\n max-width: 17rem;\n}\n\n.rk-confirm-title {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-ink);\n}\n\n.rk-confirm-message {\n margin-top: 0.125rem;\n font-size: 0.8125rem;\n line-height: 1.5;\n color: var(--color-ink-soft);\n}\n\n/* The confirming button last, where the eye and the thumb finish. */\n.rk-confirm-actions {\n margin-top: 0.75rem;\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n</style>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport BasePopover from './BasePopover.vue'\nimport type { PopoverTriggerProps } from './BasePopover.vue'\n\n/**\n * \"Are you sure?\", asked beside the button that asked it.\n *\n * A modal for a one-word question takes the whole page away from what it is\n * about; this keeps the thing being deleted on screen and the question next\n * to it. Reach for `BaseModal` or `ResponsiveDialog` when the answer needs\n * explaining, and for a toast with an undo when it does not need asking at\n * all — an undo is kinder than a confirmation, and this component is the\n * middle of those two.\n *\n * The trigger is yours, as it is in `BasePopover`: bind `props` to whatever\n * you render.\n */\nconst {\n message,\n confirmLabel,\n cancelLabel,\n title = '',\n tone = 'danger',\n} = defineProps<{\n /** The question. Already translated. */\n message: string\n /** The button that goes ahead, e.g. \"Delete\". */\n confirmLabel: string\n /** The button that does not, e.g. \"Cancel\". */\n cancelLabel: string\n /** A heading over the question, and the panel's accessible name. */\n title?: string | undefined\n /** The confirming button's variant. */\n tone?: 'danger' | 'primary' | undefined\n}>()\n\nconst emit = defineEmits<{ confirm: []; cancel: [] }>()\n\ndefineSlots<{\n /** The control that asks. Bind `props` on it: `v-bind=\"props\"`. */\n trigger: (props: { open: boolean; props: PopoverTriggerProps }) => unknown\n}>()\n\n/** Open or closed, with `v-model`. */\nconst open = defineModel<boolean>({ default: false })\n\nfunction confirm(close: () => void) {\n close()\n emit('confirm')\n}\n\nfunction cancel(close: () => void) {\n close()\n emit('cancel')\n}\n</script>\n\n<template>\n <BasePopover v-model=\"open\" :label=\"title || message\" align=\"end\">\n <template #trigger=\"slotProps\">\n <slot name=\"trigger\" v-bind=\"slotProps\" />\n </template>\n\n <template #default=\"{ close }\">\n <div class=\"rk-confirm\">\n <p v-if=\"title\" class=\"rk-confirm-title\">{{ title }}</p>\n <p class=\"rk-confirm-message\">{{ message }}</p>\n\n <div class=\"rk-confirm-actions\">\n <BaseButton size=\"sm\" variant=\"secondary\" @click=\"cancel(close)\">\n {{ cancelLabel }}\n </BaseButton>\n <BaseButton size=\"sm\" :variant=\"tone\" @click=\"confirm(close)\">\n {{ confirmLabel }}\n </BaseButton>\n </div>\n </div>\n </template>\n </BasePopover>\n</template>\n\n<style scoped>\n.rk-confirm {\n max-width: 17rem;\n}\n\n.rk-confirm-title {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-ink);\n}\n\n.rk-confirm-message {\n margin-top: 0.125rem;\n font-size: 0.8125rem;\n line-height: 1.5;\n color: var(--color-ink-soft);\n}\n\n/* The confirming button last, where the eye and the thumb finish. */\n.rk-confirm-actions {\n margin-top: 0.75rem;\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"V extends string, M extends 'single' | 'multiple' = 'single'\">\nimport { computed, ref } from 'vue'\nimport type { Component } from 'vue'\n\nimport { horizontalStep } from '../utils/direction'\n\n/**\n * A row of buttons that stay pressed — one at a time, or several at once.\n *\n * Next to `SegmentedControl` on purpose, and not the same thing. A segmented\n * control is a set of radios: there is always exactly one answer, and it is\n * a form value. A toggle group is pressed and unpressed buttons: in `single`\n * mode pressing the pressed one lets go (a filter that can be off), in\n * `multiple` mode any number can be down at once (bold and italic, or three\n * categories out of five).\n *\n * One Tab stop for the whole group, and the arrow keys move between the\n * buttons — the toolbar pattern, so a row of twelve does not cost twelve\n * presses of Tab to get past.\n */\nconst {\n options,\n label,\n mode = 'single' as M,\n required = false,\n size = 'md',\n} = defineProps<{\n options: readonly {\n value: V\n /** Visible text — or, with an icon and `iconOnly`, the accessible name. */\n label: string\n icon?: Component | undefined\n /** Show the icon alone. The label becomes the button's accessible name. */\n iconOnly?: boolean | undefined\n disabled?: boolean | undefined\n }[]\n /** The group's accessible name. */\n label: string\n /** `single`: at most one pressed. `multiple`: any number. */\n mode?: M | undefined\n /** In `single` mode, never let the last pressed button go. */\n required?: boolean | undefined\n size?: 'sm' | 'md' | undefined\n}>()\n\n/** The pressed value — or, in `multiple` mode, the pressed values. */\nconst model = defineModel<M extends 'multiple' ? V[] : V | undefined>()\n\nconst buttons = ref<HTMLButtonElement[]>([])\n\nconst pressed = computed(() => {\n const value = model.value\n if (Array.isArray(value)) return new Set<V>(value)\n return new Set<V>(value === undefined ? [] : [value as V])\n})\n\nfunction toggle(value: V) {\n if (mode === 'multiple') {\n const next = new Set(pressed.value)\n if (next.has(value)) next.delete(value)\n else next.add(value)\n // In the order of the options, not the order of the presses, so the\n // value reads the same however the reader got there.\n model.value = options\n .map((option) => option.value)\n .filter((v) => next.has(v)) as typeof model.value\n return\n }\n\n const isPressed = pressed.value.has(value)\n if (isPressed && required) return\n model.value = (isPressed ? undefined : value) as typeof model.value\n}\n\n/* The one button Tab lands on: the first pressed one, else the first that\n can be pressed at all. */\nconst tabStop = computed(() => {\n const enabled = options.filter((option) => !option.disabled)\n return (enabled.find((option) => pressed.value.has(option.value)) ?? enabled[0])?.value\n})\n\nfunction onKeydown(event: KeyboardEvent, index: number) {\n /* Down and up are absolute; left and right are not, and in a\n right-to-left row the left-hand button is the next one. */\n const step =\n { ArrowDown: 1, ArrowUp: -1 }[event.key] ??\n (horizontalStep(event.key, event.currentTarget as Element) || undefined)\n const enabled = buttons.value.filter((button) => !button.disabled)\n let target: HTMLButtonElement | undefined\n\n if (step !== undefined) {\n const at = enabled.indexOf(buttons.value[index]!)\n target = enabled[(at + step + enabled.length) % enabled.length]\n } else if (event.key === 'Home') target = enabled[0]\n else if (event.key === 'End') target = enabled[enabled.length - 1]\n else return\n\n event.preventDefault()\n target?.focus()\n}\n</script>\n\n<template>\n <div class=\"rk-toggles control\" :class=\"`is-${size}`\" role=\"group\" :aria-label=\"label\">\n <button\n v-for=\"(option, index) in options\"\n :key=\"option.value\"\n ref=\"buttons\"\n type=\"button\"\n class=\"rk-toggle focus-ring\"\n :aria-pressed=\"pressed.has(option.value)\"\n :aria-label=\"option.iconOnly ? option.label : undefined\"\n :disabled=\"option.disabled\"\n :tabindex=\"option.value === tabStop ? 0 : -1\"\n @click=\"toggle(option.value)\"\n @keydown=\"onKeydown($event, index)\"\n >\n <component :is=\"option.icon\" v-if=\"option.icon\" class=\"rk-toggle-icon\" aria-hidden=\"true\" />\n <span v-if=\"!option.iconOnly\">{{ option.label }}</span>\n </button>\n </div>\n</template>\n\n<style scoped>\n.rk-toggles {\n display: inline-flex;\n flex-wrap: wrap;\n gap: 2px;\n border-radius: var(--radius-card);\n padding: 3px;\n}\n\n.rk-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n min-width: 2.25rem;\n height: 2.25rem;\n border-radius: calc(var(--radius-card) - 3px);\n padding: 0 0.75rem;\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink-soft);\n transition:\n background-color var(--duration-fast) var(--ease-standard),\n color var(--duration-fast) var(--ease-standard);\n}\n\n.is-sm .rk-toggle {\n min-width: 2rem;\n height: 2rem;\n padding: 0 0.625rem;\n font-size: 0.8125rem;\n}\n\n.rk-toggle:hover:not(:disabled) {\n background: var(--color-muted);\n color: var(--color-ink);\n}\n\n.rk-toggle[aria-pressed='true'] {\n background: var(--color-primary);\n color: var(--color-on-primary);\n}\n\n.rk-toggle:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n}\n\n.rk-toggle-icon {\n width: 1rem;\n height: 1rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"V extends string, M extends 'single' | 'multiple' = 'single'\">\nimport { computed, ref } from 'vue'\nimport type { Component } from 'vue'\n\nimport { horizontalStep } from '../utils/direction'\n\n/**\n * A row of buttons that stay pressed — one at a time, or several at once.\n *\n * Next to `SegmentedControl` on purpose, and not the same thing. A segmented\n * control is a set of radios: there is always exactly one answer, and it is\n * a form value. A toggle group is pressed and unpressed buttons: in `single`\n * mode pressing the pressed one lets go (a filter that can be off), in\n * `multiple` mode any number can be down at once (bold and italic, or three\n * categories out of five).\n *\n * One Tab stop for the whole group, and the arrow keys move between the\n * buttons — the toolbar pattern, so a row of twelve does not cost twelve\n * presses of Tab to get past.\n */\nconst {\n options,\n label,\n mode = 'single' as M,\n required = false,\n size = 'md',\n} = defineProps<{\n options: readonly {\n value: V\n /** Visible text — or, with an icon and `iconOnly`, the accessible name. */\n label: string\n icon?: Component | undefined\n /** Show the icon alone. The label becomes the button's accessible name. */\n iconOnly?: boolean | undefined\n disabled?: boolean | undefined\n }[]\n /** The group's accessible name. */\n label: string\n /** `single`: at most one pressed. `multiple`: any number. */\n mode?: M | undefined\n /** In `single` mode, never let the last pressed button go. */\n required?: boolean | undefined\n size?: 'sm' | 'md' | undefined\n}>()\n\n/** The pressed value — or, in `multiple` mode, the pressed values. */\nconst model = defineModel<M extends 'multiple' ? V[] : V | undefined>()\n\nconst buttons = ref<HTMLButtonElement[]>([])\n\nconst pressed = computed(() => {\n const value = model.value\n if (Array.isArray(value)) return new Set<V>(value)\n return new Set<V>(value === undefined ? [] : [value as V])\n})\n\nfunction toggle(value: V) {\n if (mode === 'multiple') {\n const next = new Set(pressed.value)\n if (next.has(value)) next.delete(value)\n else next.add(value)\n // In the order of the options, not the order of the presses, so the\n // value reads the same however the reader got there.\n model.value = options\n .map((option) => option.value)\n .filter((v) => next.has(v)) as typeof model.value\n return\n }\n\n const isPressed = pressed.value.has(value)\n if (isPressed && required) return\n model.value = (isPressed ? undefined : value) as typeof model.value\n}\n\n/* The one button Tab lands on: the first pressed one, else the first that\n can be pressed at all. */\nconst tabStop = computed(() => {\n const enabled = options.filter((option) => !option.disabled)\n return (enabled.find((option) => pressed.value.has(option.value)) ?? enabled[0])?.value\n})\n\nfunction onKeydown(event: KeyboardEvent, index: number) {\n /* Down and up are absolute; left and right are not, and in a\n right-to-left row the left-hand button is the next one. */\n const step =\n { ArrowDown: 1, ArrowUp: -1 }[event.key] ??\n (horizontalStep(event.key, event.currentTarget as Element) || undefined)\n const enabled = buttons.value.filter((button) => !button.disabled)\n let target: HTMLButtonElement | undefined\n\n if (step !== undefined) {\n const at = enabled.indexOf(buttons.value[index]!)\n target = enabled[(at + step + enabled.length) % enabled.length]\n } else if (event.key === 'Home') target = enabled[0]\n else if (event.key === 'End') target = enabled[enabled.length - 1]\n else return\n\n event.preventDefault()\n target?.focus()\n}\n</script>\n\n<template>\n <div class=\"rk-toggles control\" :class=\"`is-${size}`\" role=\"group\" :aria-label=\"label\">\n <button\n v-for=\"(option, index) in options\"\n :key=\"option.value\"\n ref=\"buttons\"\n type=\"button\"\n class=\"rk-toggle focus-ring\"\n :aria-pressed=\"pressed.has(option.value)\"\n :aria-label=\"option.iconOnly ? option.label : undefined\"\n :disabled=\"option.disabled\"\n :tabindex=\"option.value === tabStop ? 0 : -1\"\n @click=\"toggle(option.value)\"\n @keydown=\"onKeydown($event, index)\"\n >\n <component :is=\"option.icon\" v-if=\"option.icon\" class=\"rk-toggle-icon\" aria-hidden=\"true\" />\n <span v-if=\"!option.iconOnly\">{{ option.label }}</span>\n </button>\n </div>\n</template>\n\n<style scoped>\n.rk-toggles {\n display: inline-flex;\n flex-wrap: wrap;\n gap: 2px;\n border-radius: var(--radius-card);\n padding: 3px;\n}\n\n.rk-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n min-width: 2.25rem;\n height: 2.25rem;\n border-radius: calc(var(--radius-card) - 3px);\n padding: 0 0.75rem;\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink-soft);\n transition:\n background-color var(--duration-fast) var(--ease-standard),\n color var(--duration-fast) var(--ease-standard);\n}\n\n.is-sm .rk-toggle {\n min-width: 2rem;\n height: 2rem;\n padding: 0 0.625rem;\n font-size: 0.8125rem;\n}\n\n.rk-toggle:hover:not(:disabled) {\n background: var(--color-muted);\n color: var(--color-ink);\n}\n\n.rk-toggle[aria-pressed='true'] {\n background: var(--color-primary);\n color: var(--color-on-primary);\n}\n\n.rk-toggle:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n}\n\n.rk-toggle-icon {\n width: 1rem;\n height: 1rem;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, useId } from 'vue'\n\nimport { horizontalStep } from '../utils/direction'\n\n/**\n * A short code typed one character per box — a sign-in code, a PIN.\n *\n * No `maxlength` on the boxes: iOS fills a one-time code into the first box\n * in one go, and a limit of one would cut it to its first digit.\n *\n * The boxes are a way of showing the length, not of splitting the work:\n * typing moves to the next box on its own, Backspace on an empty box goes\n * back and clears, the arrows move, and pasting \"482913\" anywhere fills all\n * six. The first box carries `autocomplete=\"one-time-code\"`, so a phone\n * offers the code from the message it just received.\n *\n * `complete` fires once when the last box is filled — the moment to submit,\n * so nobody has to find a button after typing six digits.\n */\nconst {\n length = 6,\n label,\n cellLabel,\n type = 'numeric',\n mask = false,\n error = '',\n disabled = false,\n} = defineProps<{\n /** How many characters. */\n length?: number | undefined\n /** The group's accessible name, e.g. \"Verification code\". */\n label: string\n /** Each box's accessible name, from its 1-based position: `(n, total) => \\`Digit ${n} of ${total}\\``. */\n cellLabel: (position: number, total: number) => string\n /** `numeric` takes digits and opens the number pad; `alphanumeric` takes letters too. */\n type?: 'numeric' | 'alphanumeric' | undefined\n /** Show dots instead of the characters, for a PIN. */\n mask?: boolean | undefined\n /** A message under the boxes; also marks them invalid. */\n error?: string | undefined\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ complete: [code: string] }>()\n\n/** The code so far, with `v-model`. Always shorter than or as long as `length`. */\nconst model = defineModel<string>({ default: '' })\n\nconst cells = ref<HTMLInputElement[]>([])\nconst errorId = useId()\n\nconst allowed = computed(() => (type === 'numeric' ? /[0-9]/ : /[0-9a-z]/i))\nconst chars = computed(() => Array.from({ length }, (_, i) => model.value[i] ?? ''))\n\nfunction clean(text: string) {\n return Array.from(text)\n .filter((char) => allowed.value.test(char))\n .join('')\n}\n\nfunction write(next: string) {\n const code = next.slice(0, length)\n const wasComplete = model.value.length === length\n model.value = code\n if (code.length === length && !wasComplete) emit('complete', code)\n}\n\nfunction focusCell(index: number) {\n const cell = cells.value[Math.max(0, Math.min(length - 1, index))]\n cell?.focus()\n cell?.select()\n}\n\nfunction onInput(event: Event, index: number) {\n const input = event.target as HTMLInputElement\n const typed = clean(input.value)\n\n // More than one character arrived: autofill or a paste the browser routed\n // through input. Either way it is the code, from this box on.\n if (typed.length > 1) {\n write(model.value.slice(0, index) + typed)\n focusCell(index + typed.length)\n return\n }\n\n input.value = typed\n if (!typed) return\n\n // The code has no gaps: a character typed into a box past the end lands at\n // the end, and focus follows it.\n const at = Math.min(index, model.value.length)\n write(model.value.slice(0, at) + typed + model.value.slice(at + 1))\n focusCell(at + 1)\n}\n\nfunction onPaste(event: ClipboardEvent, index: number) {\n const text = clean(event.clipboardData?.getData('text') ?? '')\n if (!text) return\n\n event.preventDefault()\n write(model.value.slice(0, index) + text)\n focusCell(index + text.length)\n}\n\nfunction onKeydown(event: KeyboardEvent, index: number) {\n if (event.key === 'Backspace') {\n event.preventDefault()\n const target = chars.value[index] ? index : index - 1\n if (target < 0) return\n write(model.value.slice(0, target) + model.value.slice(target + 1))\n focusCell(target)\n } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n event.preventDefault()\n /* The boxes are laid out the way the language runs, so in Arabic the\n box to the left of this one is the next digit. */\n focusCell(index + horizontalStep(event.key, event.currentTarget as Element))\n }\n}\n</script>\n\n<template>\n <div class=\"rk-pin\">\n <div class=\"rk-pin-cells\" role=\"group\" :aria-label=\"label\">\n <input\n v-for=\"(char, index) in chars\"\n :key=\"index\"\n ref=\"cells\"\n class=\"rk-pin-cell control focus-ring\"\n :class=\"{ 'is-invalid': error }\"\n :value=\"char\"\n :type=\"mask ? 'password' : 'text'\"\n :inputmode=\"type === 'numeric' ? 'numeric' : 'text'\"\n :autocomplete=\"index === 0 ? 'one-time-code' : 'off'\"\n :aria-label=\"cellLabel(index + 1, length)\"\n :aria-invalid=\"Boolean(error)\"\n :aria-describedby=\"error ? errorId : undefined\"\n :disabled=\"disabled\"\n @input=\"onInput($event, index)\"\n @paste=\"onPaste($event, index)\"\n @keydown=\"onKeydown($event, index)\"\n @focus=\"($event.target as HTMLInputElement).select()\"\n />\n </div>\n <p v-if=\"error\" :id=\"errorId\" class=\"rk-pin-error\" role=\"alert\">{{ error }}</p>\n </div>\n</template>\n\n<style scoped>\n.rk-pin-cells {\n display: flex;\n gap: 0.5rem;\n}\n\n.rk-pin-cell {\n width: 2.75rem;\n height: 3.25rem;\n border-radius: var(--radius-card);\n text-align: center;\n font-size: 1.375rem;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n caret-color: var(--color-primary);\n}\n\n.rk-pin-cell.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-pin-cell:disabled {\n opacity: 0.5;\n}\n\n.rk-pin-error {\n margin-top: 0.5rem;\n font-size: 0.8125rem;\n color: var(--color-negative);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, useId } from 'vue'\n\nimport { horizontalStep } from '../utils/direction'\n\n/**\n * A short code typed one character per box — a sign-in code, a PIN.\n *\n * No `maxlength` on the boxes: iOS fills a one-time code into the first box\n * in one go, and a limit of one would cut it to its first digit.\n *\n * The boxes are a way of showing the length, not of splitting the work:\n * typing moves to the next box on its own, Backspace on an empty box goes\n * back and clears, the arrows move, and pasting \"482913\" anywhere fills all\n * six. The first box carries `autocomplete=\"one-time-code\"`, so a phone\n * offers the code from the message it just received.\n *\n * `complete` fires once when the last box is filled — the moment to submit,\n * so nobody has to find a button after typing six digits.\n */\nconst {\n length = 6,\n label,\n cellLabel,\n type = 'numeric',\n mask = false,\n error = '',\n disabled = false,\n} = defineProps<{\n /** How many characters. */\n length?: number | undefined\n /** The group's accessible name, e.g. \"Verification code\". */\n label: string\n /** Each box's accessible name, from its 1-based position: `(n, total) => \\`Digit ${n} of ${total}\\``. */\n cellLabel: (position: number, total: number) => string\n /** `numeric` takes digits and opens the number pad; `alphanumeric` takes letters too. */\n type?: 'numeric' | 'alphanumeric' | undefined\n /** Show dots instead of the characters, for a PIN. */\n mask?: boolean | undefined\n /** A message under the boxes; also marks them invalid. */\n error?: string | undefined\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ complete: [code: string] }>()\n\n/** The code so far, with `v-model`. Always shorter than or as long as `length`. */\nconst model = defineModel<string>({ default: '' })\n\nconst cells = ref<HTMLInputElement[]>([])\nconst errorId = useId()\n\nconst allowed = computed(() => (type === 'numeric' ? /[0-9]/ : /[0-9a-z]/i))\nconst chars = computed(() => Array.from({ length }, (_, i) => model.value[i] ?? ''))\n\nfunction clean(text: string) {\n return Array.from(text)\n .filter((char) => allowed.value.test(char))\n .join('')\n}\n\nfunction write(next: string) {\n const code = next.slice(0, length)\n const wasComplete = model.value.length === length\n model.value = code\n if (code.length === length && !wasComplete) emit('complete', code)\n}\n\nfunction focusCell(index: number) {\n const cell = cells.value[Math.max(0, Math.min(length - 1, index))]\n cell?.focus()\n cell?.select()\n}\n\nfunction onInput(event: Event, index: number) {\n const input = event.target as HTMLInputElement\n const typed = clean(input.value)\n\n // More than one character arrived: autofill or a paste the browser routed\n // through input. Either way it is the code, from this box on.\n if (typed.length > 1) {\n write(model.value.slice(0, index) + typed)\n focusCell(index + typed.length)\n return\n }\n\n input.value = typed\n if (!typed) return\n\n // The code has no gaps: a character typed into a box past the end lands at\n // the end, and focus follows it.\n const at = Math.min(index, model.value.length)\n write(model.value.slice(0, at) + typed + model.value.slice(at + 1))\n focusCell(at + 1)\n}\n\nfunction onPaste(event: ClipboardEvent, index: number) {\n const text = clean(event.clipboardData?.getData('text') ?? '')\n if (!text) return\n\n event.preventDefault()\n write(model.value.slice(0, index) + text)\n focusCell(index + text.length)\n}\n\nfunction onKeydown(event: KeyboardEvent, index: number) {\n if (event.key === 'Backspace') {\n event.preventDefault()\n const target = chars.value[index] ? index : index - 1\n if (target < 0) return\n write(model.value.slice(0, target) + model.value.slice(target + 1))\n focusCell(target)\n } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n event.preventDefault()\n /* The boxes are laid out the way the language runs, so in Arabic the\n box to the left of this one is the next digit. */\n focusCell(index + horizontalStep(event.key, event.currentTarget as Element))\n }\n}\n</script>\n\n<template>\n <div class=\"rk-pin\">\n <div class=\"rk-pin-cells\" role=\"group\" :aria-label=\"label\">\n <input\n v-for=\"(char, index) in chars\"\n :key=\"index\"\n ref=\"cells\"\n class=\"rk-pin-cell control focus-ring\"\n :class=\"{ 'is-invalid': error }\"\n :value=\"char\"\n :type=\"mask ? 'password' : 'text'\"\n :inputmode=\"type === 'numeric' ? 'numeric' : 'text'\"\n :autocomplete=\"index === 0 ? 'one-time-code' : 'off'\"\n :aria-label=\"cellLabel(index + 1, length)\"\n :aria-invalid=\"Boolean(error)\"\n :aria-describedby=\"error ? errorId : undefined\"\n :disabled=\"disabled\"\n @input=\"onInput($event, index)\"\n @paste=\"onPaste($event, index)\"\n @keydown=\"onKeydown($event, index)\"\n @focus=\"($event.target as HTMLInputElement).select()\"\n />\n </div>\n <p v-if=\"error\" :id=\"errorId\" class=\"rk-pin-error\" role=\"alert\">{{ error }}</p>\n </div>\n</template>\n\n<style scoped>\n.rk-pin-cells {\n display: flex;\n gap: 0.5rem;\n}\n\n.rk-pin-cell {\n width: 2.75rem;\n height: 3.25rem;\n border-radius: var(--radius-card);\n text-align: center;\n font-size: 1.375rem;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n caret-color: var(--color-primary);\n}\n\n.rk-pin-cell.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-pin-cell:disabled {\n opacity: 0.5;\n}\n\n.rk-pin-error {\n margin-top: 0.5rem;\n font-size: 0.8125rem;\n color: var(--color-negative);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Eye, EyeOff } from 'lucide-vue-next'\nimport { ref, type InputHTMLAttributes } from 'vue'\n\nimport FormField from './FormField.vue'\nimport { useFieldAttrs } from '../composables/use-field-attrs'\n\ndefineOptions({ inheritAttrs: false })\n\nconst { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs()\n\n/**\n * A password field you can look at.\n *\n * The kit already ships `AuthForm` and `BaseInput type=\"password\"`, which is\n * to say it ships the field and not the one thing every app then adds to it.\n * A password is the only field in a form whose value is hidden from the\n * person typing it, on the device where typing is least reliable — and a\n * generated password pasted into a phone is unverifiable without this. WCAG\n * 3.3.8 asks that authentication not depend on a cognitive function test;\n * being unable to see what you typed is one.\n *\n * The half that breaks, three ways, and all three compile:\n *\n * - **A `<button>` with no `type`.** Inside a form, its default is `submit`,\n * so looking at the password submits the form — usually with a password\n * half typed, which then arrives as a failed sign-in attempt.\n * - **A `<span>` or a bare icon.** Not focusable, not pressable by keyboard,\n * and named nothing.\n * - **A change nobody is told about.** The characters appearing is the whole\n * feedback, and it is visual only.\n *\n * The third is answered as a toggle button — one name, `aria-pressed` for\n * the state — rather than the swapped \"Show\"/\"Hide\" name that is the more\n * common shape. Two reasons. A name that changes under a focus that has not\n * moved is not reliably re-read, which is why every implementation of the\n * swapped-name version ends up adding a live region and two more sentences\n * on top of it; a pressed state on the focused control is announced by every\n * screen reader without one. And the kit has no language of its own, so the\n * cheaper pattern is also the one that asks the app for one string instead\n * of four.\n *\n * The field is never revealed by default and reverts to hidden on nothing:\n * that is deliberate. A component that hid it again on blur would be hiding\n * it at the exact moment the reader moved to the confirmation field to check\n * it against.\n */\nconst {\n modelValue = '',\n label,\n toggleLabel,\n error = '',\n hint = '',\n labelHidden = false,\n fieldId = undefined,\n size = 'md',\n controlClass = undefined,\n} = defineProps<\n {\n /** The value, with `v-model`. */\n modelValue?: string | undefined\n label: string\n /**\n * The toggle's name, e.g. \"Show password\". It does not change: the\n * control is pressed while the password is visible, and that state is\n * what a screen reader reads out.\n */\n toggleLabel: string\n error?: string | undefined\n hint?: string | undefined\n labelHidden?: boolean | undefined\n /** The input's `id`, for an `ErrorSummary` that links to this field. */\n fieldId?: string | undefined\n size?: 'sm' | 'md' | undefined\n /* The input's own attributes — `autocomplete`, `placeholder`, `required` —\n typed for strictTemplates. Not `type`, which is this component's whole\n subject, and not `size`. */\n /**\n * Classes for the control itself, rather than for the field around it.\n *\n * `class` lands on the field, because that is where Vue puts a\n * component's class and because a layout class means \"space this field\".\n * That leaves `variant=\"unstyled\"` with no way to paint the control it\n * just stripped — the point of stripping it — which is why an app with a\n * large amount field wrote the whole thing by hand instead.\n *\n * It appends, so with the default variant a conflict is settled by\n * Tailwind's own order rather than by writing it here; reach for it with\n * `unstyled`, where there is nothing to settle.\n */\n controlClass?: string | undefined\n } & /* @vue-ignore */ Omit<InputHTMLAttributes, 'size' | 'type'>\n>()\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string]; toggle: [visible: boolean] }>()\n\nconst visible = ref(false)\n\nfunction toggle() {\n visible.value = !visible.value\n emit('toggle', visible.value)\n}\n\n/* The same 16px rule as `BaseInput`: iOS zooms the viewport for a focused\n field under it and never zooms back. */\nconst CONTROL_CLASS = 'h-11 text-base'\nconst control = ref<HTMLInputElement | null>(null)\n\n/**\n * Focus the control, for a caller that owns when it happens.\n *\n * A `ref` on a component gives the component and not the element, so without\n * this a field cannot be focused at all — which is why an app that focuses\n * its amount field when a sheet opens, and again when the amount is\n * rejected, wrote the whole field by hand instead and said so in a comment.\n * That is the gap test, with the reason already written down.\n *\n * `ErrorSummary` has exposed `focus` since it existed, for the same need\n * from the other end.\n */\nfunction focus() {\n control.value?.focus()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <FormField\n :class=\"fieldClass\"\n :style=\"fieldStyle\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :label-hidden=\"labelHidden\"\n :field-id=\"fieldId\"\n :size=\"size\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"relative\">\n <input\n :id=\"id\"\n ref=\"control\"\n :type=\"visible ? 'text' : 'password'\"\n :value=\"modelValue\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n autocapitalize=\"none\"\n :spellcheck=\"false\"\n v-bind=\"controlAttrs\"\n class=\"control text-ink rounded-card focus-visible:outline-primary w-full ps-3 pe-11 focus-visible:outline-2 focus-visible:outline-offset-1\"\n :class=\"[CONTROL_CLASS, invalid ? 'border-negative' : '', controlClass]\"\n @input=\"emit('update:modelValue', ($event.target as HTMLInputElement).value)\"\n />\n\n <button\n type=\"button\"\n class=\"focus-ring text-ink-soft hover:text-ink rounded-card absolute end-1 top-1/2 flex size-9 -translate-y-1/2 items-center justify-center\"\n :aria-label=\"toggleLabel\"\n :aria-pressed=\"visible\"\n @click=\"toggle\"\n >\n <EyeOff v-if=\"visible\" class=\"size-4\" aria-hidden=\"true\" />\n <Eye v-else class=\"size-4\" aria-hidden=\"true\" />\n </button>\n </div>\n </template>\n </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport { Eye, EyeOff } from 'lucide-vue-next'\nimport { ref, type InputHTMLAttributes } from 'vue'\n\nimport FormField from './FormField.vue'\nimport { useFieldAttrs } from '../composables/use-field-attrs'\n\ndefineOptions({ inheritAttrs: false })\n\nconst { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs()\n\n/**\n * A password field you can look at.\n *\n * The kit already ships `AuthForm` and `BaseInput type=\"password\"`, which is\n * to say it ships the field and not the one thing every app then adds to it.\n * A password is the only field in a form whose value is hidden from the\n * person typing it, on the device where typing is least reliable — and a\n * generated password pasted into a phone is unverifiable without this. WCAG\n * 3.3.8 asks that authentication not depend on a cognitive function test;\n * being unable to see what you typed is one.\n *\n * The half that breaks, three ways, and all three compile:\n *\n * - **A `<button>` with no `type`.** Inside a form, its default is `submit`,\n * so looking at the password submits the form — usually with a password\n * half typed, which then arrives as a failed sign-in attempt.\n * - **A `<span>` or a bare icon.** Not focusable, not pressable by keyboard,\n * and named nothing.\n * - **A change nobody is told about.** The characters appearing is the whole\n * feedback, and it is visual only.\n *\n * The third is answered as a toggle button — one name, `aria-pressed` for\n * the state — rather than the swapped \"Show\"/\"Hide\" name that is the more\n * common shape. Two reasons. A name that changes under a focus that has not\n * moved is not reliably re-read, which is why every implementation of the\n * swapped-name version ends up adding a live region and two more sentences\n * on top of it; a pressed state on the focused control is announced by every\n * screen reader without one. And the kit has no language of its own, so the\n * cheaper pattern is also the one that asks the app for one string instead\n * of four.\n *\n * The field is never revealed by default and reverts to hidden on nothing:\n * that is deliberate. A component that hid it again on blur would be hiding\n * it at the exact moment the reader moved to the confirmation field to check\n * it against.\n */\nconst {\n modelValue = '',\n label,\n toggleLabel,\n error = '',\n hint = '',\n labelHidden = false,\n fieldId = undefined,\n size = 'md',\n controlClass = undefined,\n} = defineProps<\n {\n /** The value, with `v-model`. */\n modelValue?: string | undefined\n label: string\n /**\n * The toggle's name, e.g. \"Show password\". It does not change: the\n * control is pressed while the password is visible, and that state is\n * what a screen reader reads out.\n */\n toggleLabel: string\n error?: string | undefined\n hint?: string | undefined\n labelHidden?: boolean | undefined\n /** The input's `id`, for an `ErrorSummary` that links to this field. */\n fieldId?: string | undefined\n size?: 'sm' | 'md' | undefined\n /* The input's own attributes — `autocomplete`, `placeholder`, `required` —\n typed for strictTemplates. Not `type`, which is this component's whole\n subject, and not `size`. */\n /**\n * Classes for the control itself, rather than for the field around it.\n *\n * `class` lands on the field, because that is where Vue puts a\n * component's class and because a layout class means \"space this field\".\n * That leaves `variant=\"unstyled\"` with no way to paint the control it\n * just stripped — the point of stripping it — which is why an app with a\n * large amount field wrote the whole thing by hand instead.\n *\n * It appends, so with the default variant a conflict is settled by\n * Tailwind's own order rather than by writing it here; reach for it with\n * `unstyled`, where there is nothing to settle.\n */\n controlClass?: string | undefined\n } & /* @vue-ignore */ Omit<InputHTMLAttributes, 'size' | 'type'>\n>()\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string]; toggle: [visible: boolean] }>()\n\nconst visible = ref(false)\n\nfunction toggle() {\n visible.value = !visible.value\n emit('toggle', visible.value)\n}\n\n/* The same 16px rule as `BaseInput`: iOS zooms the viewport for a focused\n field under it and never zooms back. */\nconst CONTROL_CLASS = 'h-11 text-base'\nconst control = ref<HTMLInputElement | null>(null)\n\n/**\n * Focus the control, for a caller that owns when it happens.\n *\n * A `ref` on a component gives the component and not the element, so without\n * this a field cannot be focused at all — which is why an app that focuses\n * its amount field when a sheet opens, and again when the amount is\n * rejected, wrote the whole field by hand instead and said so in a comment.\n * That is the gap test, with the reason already written down.\n *\n * `ErrorSummary` has exposed `focus` since it existed, for the same need\n * from the other end.\n */\nfunction focus() {\n control.value?.focus()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <FormField\n :class=\"fieldClass\"\n :style=\"fieldStyle\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :label-hidden=\"labelHidden\"\n :field-id=\"fieldId\"\n :size=\"size\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"relative\">\n <input\n :id=\"id\"\n ref=\"control\"\n :type=\"visible ? 'text' : 'password'\"\n :value=\"modelValue\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n autocapitalize=\"none\"\n :spellcheck=\"false\"\n v-bind=\"controlAttrs\"\n class=\"control text-ink rounded-card focus-visible:outline-primary w-full ps-3 pe-11 focus-visible:outline-2 focus-visible:outline-offset-1\"\n :class=\"[CONTROL_CLASS, invalid ? 'border-negative' : '', controlClass]\"\n @input=\"emit('update:modelValue', ($event.target as HTMLInputElement).value)\"\n />\n\n <button\n type=\"button\"\n class=\"focus-ring text-ink-soft hover:text-ink rounded-card absolute end-1 top-1/2 flex size-9 -translate-y-1/2 items-center justify-center\"\n :aria-label=\"toggleLabel\"\n :aria-pressed=\"visible\"\n @click=\"toggle\"\n >\n <EyeOff v-if=\"visible\" class=\"size-4\" aria-hidden=\"true\" />\n <Eye v-else class=\"size-4\" aria-hidden=\"true\" />\n </button>\n </div>\n </template>\n </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * Progress as a ring — for a small space, a card's corner, a goal.\n *\n * With a `value`, a promise about how far: the ring fills and, with\n * `showValue`, the percentage sits inside it. Without one, it says only\n * \"working\" and turns — the same distinction as `ProgressBar` and\n * `BaseSpinner`, in one shape. For a reader who asked for less motion the\n * turning ring breathes instead of spinning.\n *\n * The inside is a slot, so a ring can hold \"3/7\", an icon or nothing.\n */\nconst {\n value = undefined,\n max = 100,\n label,\n size = 'md',\n showValue = false,\n tone = 'primary',\n} = defineProps<{\n /** How far. Leave it out while there is nothing to measure. */\n value?: number | undefined\n max?: number | undefined\n /** The accessible name, e.g. \"Upload\". Required: a ring says nothing aloud on its own. */\n label: string\n size?: 'sm' | 'md' | 'lg' | undefined\n /** The rounded percentage inside the ring. */\n showValue?: boolean | undefined\n tone?: 'primary' | 'accent' | 'positive' | 'warning' | 'negative' | undefined\n}>()\n\ndefineSlots<{\n /** Inside the ring, instead of the percentage. */\n default?: () => unknown\n}>()\n\nconst RADIUS = 20\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nconst indeterminate = computed(() => value === undefined)\n\n/* Clamped like ProgressBar: a negative, an overshoot and a zero `max` all\n stay inside the ring. */\nconst portion = computed(() => {\n if (value === undefined || max <= 0) return 0\n return Math.min(1, Math.max(0, value / max))\n})\n\nconst percent = computed(() => Math.round(portion.value * 100))\nconst offset = computed(() => CIRCUMFERENCE * (1 - (indeterminate.value ? 0.28 : portion.value)))\n</script>\n\n<template>\n <div\n class=\"rk-ring\"\n :class=\"[`is-${size}`, `is-${tone}`, { 'is-indeterminate': indeterminate }]\"\n role=\"progressbar\"\n :aria-label=\"label\"\n :aria-valuenow=\"indeterminate ? undefined : percent\"\n :aria-valuemin=\"indeterminate ? undefined : 0\"\n :aria-valuemax=\"indeterminate ? undefined : 100\"\n >\n <svg viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n <circle class=\"rk-ring-track\" cx=\"24\" cy=\"24\" :r=\"RADIUS\" />\n <circle\n class=\"rk-ring-bar\"\n cx=\"24\"\n cy=\"24\"\n :r=\"RADIUS\"\n :stroke-dasharray=\"CIRCUMFERENCE\"\n :stroke-dashoffset=\"offset\"\n />\n </svg>\n <span v-if=\"$slots.default || (showValue && !indeterminate)\" class=\"rk-ring-inside\">\n <slot>{{ percent }}%</slot>\n </span>\n </div>\n</template>\n\n<style scoped>\n.rk-ring {\n position: relative;\n display: inline-grid;\n place-items: center;\n width: var(--rk-ring-size);\n height: var(--rk-ring-size);\n --rk-ring-size: 3rem;\n --rk-ring-colour: var(--color-primary);\n}\n\n.rk-ring.is-sm {\n --rk-ring-size: 1.75rem;\n}\n\n.rk-ring.is-lg {\n --rk-ring-size: 5rem;\n}\n\n.rk-ring.is-accent {\n --rk-ring-colour: var(--color-accent);\n}\n\n.rk-ring.is-positive {\n --rk-ring-colour: var(--color-positive);\n}\n\n.rk-ring.is-warning {\n --rk-ring-colour: var(--color-warning);\n}\n\n.rk-ring.is-negative {\n --rk-ring-colour: var(--color-negative);\n}\n\n.rk-ring svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n /* The ring starts at twelve o'clock, like a clock face, not at three. */\n rotate: -90deg;\n}\n\n.rk-ring-track,\n.rk-ring-bar {\n fill: none;\n stroke-width: 4;\n}\n\n.rk-ring-track {\n stroke: var(--color-muted);\n}\n\n.rk-ring-bar {\n stroke: var(--rk-ring-colour);\n stroke-linecap: round;\n transition: stroke-dashoffset var(--duration-slow) var(--ease-standard);\n}\n\n.rk-ring.is-indeterminate svg {\n animation: rk-ring-spin 0.9s linear infinite;\n}\n\n.rk-ring-inside {\n position: relative;\n font-size: calc(var(--rk-ring-size) * 0.26);\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n}\n\n@keyframes rk-ring-spin {\n from {\n rotate: -90deg;\n }\n to {\n rotate: 270deg;\n }\n}\n\n@keyframes rk-ring-breathe {\n 50% {\n opacity: 0.4;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-ring.is-indeterminate svg {\n animation: rk-ring-breathe 1.6s ease-in-out infinite;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * Progress as a ring — for a small space, a card's corner, a goal.\n *\n * With a `value`, a promise about how far: the ring fills and, with\n * `showValue`, the percentage sits inside it. Without one, it says only\n * \"working\" and turns — the same distinction as `ProgressBar` and\n * `BaseSpinner`, in one shape. For a reader who asked for less motion the\n * turning ring breathes instead of spinning.\n *\n * The inside is a slot, so a ring can hold \"3/7\", an icon or nothing.\n */\nconst {\n value = undefined,\n max = 100,\n label,\n size = 'md',\n showValue = false,\n tone = 'primary',\n} = defineProps<{\n /** How far. Leave it out while there is nothing to measure. */\n value?: number | undefined\n max?: number | undefined\n /** The accessible name, e.g. \"Upload\". Required: a ring says nothing aloud on its own. */\n label: string\n size?: 'sm' | 'md' | 'lg' | undefined\n /** The rounded percentage inside the ring. */\n showValue?: boolean | undefined\n tone?: 'primary' | 'accent' | 'positive' | 'warning' | 'negative' | undefined\n}>()\n\ndefineSlots<{\n /** Inside the ring, instead of the percentage. */\n default?: () => unknown\n}>()\n\nconst RADIUS = 20\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nconst indeterminate = computed(() => value === undefined)\n\n/* Clamped like ProgressBar: a negative, an overshoot and a zero `max` all\n stay inside the ring. */\nconst portion = computed(() => {\n if (value === undefined || max <= 0) return 0\n return Math.min(1, Math.max(0, value / max))\n})\n\nconst percent = computed(() => Math.round(portion.value * 100))\nconst offset = computed(() => CIRCUMFERENCE * (1 - (indeterminate.value ? 0.28 : portion.value)))\n</script>\n\n<template>\n <div\n class=\"rk-ring\"\n :class=\"[`is-${size}`, `is-${tone}`, { 'is-indeterminate': indeterminate }]\"\n role=\"progressbar\"\n :aria-label=\"label\"\n :aria-valuenow=\"indeterminate ? undefined : percent\"\n :aria-valuemin=\"indeterminate ? undefined : 0\"\n :aria-valuemax=\"indeterminate ? undefined : 100\"\n >\n <svg viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n <circle class=\"rk-ring-track\" cx=\"24\" cy=\"24\" :r=\"RADIUS\" />\n <circle\n class=\"rk-ring-bar\"\n cx=\"24\"\n cy=\"24\"\n :r=\"RADIUS\"\n :stroke-dasharray=\"CIRCUMFERENCE\"\n :stroke-dashoffset=\"offset\"\n />\n </svg>\n <span v-if=\"$slots.default || (showValue && !indeterminate)\" class=\"rk-ring-inside\">\n <slot>{{ percent }}%</slot>\n </span>\n </div>\n</template>\n\n<style scoped>\n.rk-ring {\n position: relative;\n display: inline-grid;\n place-items: center;\n width: var(--rk-ring-size);\n height: var(--rk-ring-size);\n --rk-ring-size: 3rem;\n --rk-ring-colour: var(--color-primary);\n}\n\n.rk-ring.is-sm {\n --rk-ring-size: 1.75rem;\n}\n\n.rk-ring.is-lg {\n --rk-ring-size: 5rem;\n}\n\n.rk-ring.is-accent {\n --rk-ring-colour: var(--color-accent);\n}\n\n.rk-ring.is-positive {\n --rk-ring-colour: var(--color-positive);\n}\n\n.rk-ring.is-warning {\n --rk-ring-colour: var(--color-warning);\n}\n\n.rk-ring.is-negative {\n --rk-ring-colour: var(--color-negative);\n}\n\n.rk-ring svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n /* The ring starts at twelve o'clock, like a clock face, not at three. */\n rotate: -90deg;\n}\n\n.rk-ring-track,\n.rk-ring-bar {\n fill: none;\n stroke-width: 4;\n}\n\n.rk-ring-track {\n stroke: var(--color-muted);\n}\n\n.rk-ring-bar {\n stroke: var(--rk-ring-colour);\n stroke-linecap: round;\n transition: stroke-dashoffset var(--duration-slow) var(--ease-standard);\n}\n\n.rk-ring.is-indeterminate svg {\n animation: rk-ring-spin 0.9s linear infinite;\n}\n\n.rk-ring-inside {\n position: relative;\n font-size: calc(var(--rk-ring-size) * 0.26);\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n}\n\n@keyframes rk-ring-spin {\n from {\n rotate: -90deg;\n }\n to {\n rotate: 270deg;\n }\n}\n\n@keyframes rk-ring-breathe {\n 50% {\n opacity: 0.4;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-ring.is-indeterminate svg {\n animation: rk-ring-breathe 1.6s ease-in-out infinite;\n }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { Check, X } from 'lucide-vue-next'\nimport { computed } from 'vue'\n\nexport interface StepperStep<K extends string> {\n key: K\n /** Already translated. */\n label: string\n /** A line under the label: what the step asks for. */\n description?: string | undefined\n /** Marks a step that needs fixing — a form page with errors on it. */\n error?: boolean | undefined\n}\n\n/**\n * Where someone is in a process of several steps — a sign-up, a checkout, a\n * form split into pages.\n *\n * It shows the way, it does not drive it: the current step is a `v-model`,\n * and the pages and the Next and Back buttons are the app's. With\n * `interactive`, a step already done can be clicked to go back to it; steps\n * ahead never can, because skipping ahead is how a form arrives half filled.\n *\n * An ordered list, with `aria-current=\"step\"` on the step in progress, so a\n * screen reader hears \"step 2 of 4, current\" without the kit inventing a\n * sentence. The words for done and needs-fixing are the app's, passed in\n * `stateLabels`, and read only to assistive tech.\n */\nconst {\n steps,\n label,\n orientation = 'horizontal',\n interactive = false,\n stateLabels = undefined,\n} = defineProps<{\n steps: readonly StepperStep<K>[]\n /** The list's accessible name, e.g. \"Checkout\". */\n label: string\n orientation?: 'horizontal' | 'vertical' | undefined\n /** Completed steps become buttons that go back to them. */\n interactive?: boolean | undefined\n /** Read to a screen reader after a step's label: `{ complete: 'done', error: 'needs attention' }`. */\n stateLabels?: { complete: string; error: string } | undefined\n}>()\n\n/** The step in progress, by key, with `v-model`. */\nconst current = defineModel<K>({ required: true })\n\nconst currentIndex = computed(() => steps.findIndex((step) => step.key === current.value))\n\n/* Only back: a step ahead is never a way in, or a form arrives half filled. */\nconst canGoTo = (index: number) => interactive && index < currentIndex.value\n\nfunction goTo(index: number) {\n if (canGoTo(index)) current.value = steps[index]!.key\n}\n\nfunction state(index: number) {\n const step = steps[index]!\n if (step.error) return 'error'\n if (index < currentIndex.value) return 'complete'\n if (index === currentIndex.value) return 'current'\n return 'upcoming'\n}\n</script>\n\n<template>\n <nav :aria-label=\"label\">\n <ol class=\"rk-steps\" :class=\"`is-${orientation}`\">\n <li\n v-for=\"(step, index) in steps\"\n :key=\"step.key\"\n class=\"rk-step\"\n :class=\"`is-${state(index)}`\"\n :aria-current=\"index === currentIndex ? 'step' : undefined\"\n >\n <component\n :is=\"canGoTo(index) ? 'button' : 'div'\"\n :type=\"canGoTo(index) ? 'button' : undefined\"\n class=\"rk-step-body\"\n :class=\"{ 'focus-ring is-clickable': canGoTo(index) }\"\n @click=\"goTo(index)\"\n >\n <span class=\"rk-step-mark\" aria-hidden=\"true\">\n <X v-if=\"state(index) === 'error'\" class=\"size-3.5\" />\n <Check v-else-if=\"state(index) === 'complete'\" class=\"size-3.5\" />\n <template v-else>{{ index + 1 }}</template>\n </span>\n <span class=\"rk-step-text\">\n <span class=\"rk-step-label\">{{ step.label }}</span>\n <span v-if=\"step.description\" class=\"rk-step-description\">{{ step.description }}</span>\n <span\n v-if=\"stateLabels && (state(index) === 'complete' || state(index) === 'error')\"\n class=\"sr-only\"\n >\n — {{ state(index) === 'error' ? stateLabels.error : stateLabels.complete }}\n </span>\n </span>\n </component>\n </li>\n </ol>\n </nav>\n</template>\n\n<style scoped>\n.rk-steps {\n display: flex;\n gap: 0.5rem;\n}\n\n.rk-steps.is-horizontal {\n align-items: flex-start;\n}\n\n.rk-steps.is-vertical {\n flex-direction: column;\n gap: 0;\n}\n\n.rk-step {\n position: relative;\n flex: 1;\n min-width: 0;\n}\n\n/* The connecting line, drawn from each step to the next. */\n.rk-step:not(:last-child)::after {\n content: '';\n position: absolute;\n background: var(--color-hair);\n transition: background-color var(--duration-base) var(--ease-standard);\n}\n\n.is-horizontal .rk-step:not(:last-child)::after {\n top: 0.875rem;\n inset-inline-start: calc(1.75rem + 0.5rem);\n inset-inline-end: 0.5rem;\n height: 2px;\n}\n\n.is-vertical .rk-step:not(:last-child)::after {\n top: 2.125rem;\n bottom: 0.25rem;\n inset-inline-start: 0.8125rem;\n width: 2px;\n}\n\n.rk-step.is-complete::after {\n background: var(--color-primary);\n}\n\n.rk-step-body {\n display: flex;\n align-items: flex-start;\n gap: 0.625rem;\n width: 100%;\n border-radius: var(--radius-cell);\n text-align: start;\n}\n\n.is-horizontal .rk-step-body {\n flex-direction: column;\n}\n\n.is-vertical .rk-step-body {\n padding-bottom: 1.5rem;\n}\n\n.rk-step-body.is-clickable {\n cursor: pointer;\n}\n\n.rk-step-mark {\n position: relative;\n z-index: 1;\n display: grid;\n width: 1.75rem;\n height: 1.75rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n border: 2px solid var(--color-hair);\n background: var(--color-surface);\n font-size: 0.75rem;\n font-weight: 700;\n color: var(--color-ink-soft);\n transition:\n background-color var(--duration-base) var(--ease-standard),\n border-color var(--duration-base) var(--ease-standard),\n color var(--duration-base) var(--ease-standard);\n}\n\n.is-current .rk-step-mark {\n border-color: var(--color-primary);\n color: var(--color-primary);\n}\n\n.is-complete .rk-step-mark {\n border-color: var(--color-primary);\n background: var(--color-primary);\n color: var(--color-on-primary);\n}\n\n.is-error .rk-step-mark {\n border-color: var(--color-negative);\n background: var(--color-negative);\n color: var(--color-on-negative);\n}\n\n.is-clickable:hover .rk-step-mark {\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 18%, transparent);\n}\n\n.rk-step-text {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: 0.125rem;\n padding-top: 0.25rem;\n}\n\n.rk-step-label {\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--color-ink-soft);\n}\n\n.is-current .rk-step-label,\n.is-complete .rk-step-label {\n color: var(--color-ink);\n}\n\n.is-error .rk-step-label {\n color: var(--color-negative);\n}\n\n.rk-step-description {\n font-size: 0.75rem;\n line-height: 1.4;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { Check, X } from 'lucide-vue-next'\nimport { computed } from 'vue'\n\nexport interface StepperStep<K extends string> {\n key: K\n /** Already translated. */\n label: string\n /** A line under the label: what the step asks for. */\n description?: string | undefined\n /** Marks a step that needs fixing — a form page with errors on it. */\n error?: boolean | undefined\n}\n\n/**\n * Where someone is in a process of several steps — a sign-up, a checkout, a\n * form split into pages.\n *\n * It shows the way, it does not drive it: the current step is a `v-model`,\n * and the pages and the Next and Back buttons are the app's. With\n * `interactive`, a step already done can be clicked to go back to it; steps\n * ahead never can, because skipping ahead is how a form arrives half filled.\n *\n * An ordered list, with `aria-current=\"step\"` on the step in progress, so a\n * screen reader hears \"step 2 of 4, current\" without the kit inventing a\n * sentence. The words for done and needs-fixing are the app's, passed in\n * `stateLabels`, and read only to assistive tech.\n */\nconst {\n steps,\n label,\n orientation = 'horizontal',\n interactive = false,\n stateLabels = undefined,\n} = defineProps<{\n steps: readonly StepperStep<K>[]\n /** The list's accessible name, e.g. \"Checkout\". */\n label: string\n orientation?: 'horizontal' | 'vertical' | undefined\n /** Completed steps become buttons that go back to them. */\n interactive?: boolean | undefined\n /** Read to a screen reader after a step's label: `{ complete: 'done', error: 'needs attention' }`. */\n stateLabels?: { complete: string; error: string } | undefined\n}>()\n\n/** The step in progress, by key, with `v-model`. */\nconst current = defineModel<K>({ required: true })\n\nconst currentIndex = computed(() => steps.findIndex((step) => step.key === current.value))\n\n/* Only back: a step ahead is never a way in, or a form arrives half filled. */\nconst canGoTo = (index: number) => interactive && index < currentIndex.value\n\nfunction goTo(index: number) {\n if (canGoTo(index)) current.value = steps[index]!.key\n}\n\nfunction state(index: number) {\n const step = steps[index]!\n if (step.error) return 'error'\n if (index < currentIndex.value) return 'complete'\n if (index === currentIndex.value) return 'current'\n return 'upcoming'\n}\n</script>\n\n<template>\n <nav :aria-label=\"label\">\n <ol class=\"rk-steps\" :class=\"`is-${orientation}`\">\n <li\n v-for=\"(step, index) in steps\"\n :key=\"step.key\"\n class=\"rk-step\"\n :class=\"`is-${state(index)}`\"\n :aria-current=\"index === currentIndex ? 'step' : undefined\"\n >\n <component\n :is=\"canGoTo(index) ? 'button' : 'div'\"\n :type=\"canGoTo(index) ? 'button' : undefined\"\n class=\"rk-step-body\"\n :class=\"{ 'focus-ring is-clickable': canGoTo(index) }\"\n @click=\"goTo(index)\"\n >\n <span class=\"rk-step-mark\" aria-hidden=\"true\">\n <X v-if=\"state(index) === 'error'\" class=\"size-3.5\" />\n <Check v-else-if=\"state(index) === 'complete'\" class=\"size-3.5\" />\n <template v-else>{{ index + 1 }}</template>\n </span>\n <span class=\"rk-step-text\">\n <span class=\"rk-step-label\">{{ step.label }}</span>\n <span v-if=\"step.description\" class=\"rk-step-description\">{{ step.description }}</span>\n <span\n v-if=\"stateLabels && (state(index) === 'complete' || state(index) === 'error')\"\n class=\"sr-only\"\n >\n — {{ state(index) === 'error' ? stateLabels.error : stateLabels.complete }}\n </span>\n </span>\n </component>\n </li>\n </ol>\n </nav>\n</template>\n\n<style scoped>\n.rk-steps {\n display: flex;\n gap: 0.5rem;\n}\n\n.rk-steps.is-horizontal {\n align-items: flex-start;\n}\n\n.rk-steps.is-vertical {\n flex-direction: column;\n gap: 0;\n}\n\n.rk-step {\n position: relative;\n flex: 1;\n min-width: 0;\n}\n\n/* The connecting line, drawn from each step to the next. */\n.rk-step:not(:last-child)::after {\n content: '';\n position: absolute;\n background: var(--color-hair);\n transition: background-color var(--duration-base) var(--ease-standard);\n}\n\n.is-horizontal .rk-step:not(:last-child)::after {\n top: 0.875rem;\n inset-inline-start: calc(1.75rem + 0.5rem);\n inset-inline-end: 0.5rem;\n height: 2px;\n}\n\n.is-vertical .rk-step:not(:last-child)::after {\n top: 2.125rem;\n bottom: 0.25rem;\n inset-inline-start: 0.8125rem;\n width: 2px;\n}\n\n.rk-step.is-complete::after {\n background: var(--color-primary);\n}\n\n.rk-step-body {\n display: flex;\n align-items: flex-start;\n gap: 0.625rem;\n width: 100%;\n border-radius: var(--radius-cell);\n text-align: start;\n}\n\n.is-horizontal .rk-step-body {\n flex-direction: column;\n}\n\n.is-vertical .rk-step-body {\n padding-bottom: 1.5rem;\n}\n\n.rk-step-body.is-clickable {\n cursor: pointer;\n}\n\n.rk-step-mark {\n position: relative;\n z-index: 1;\n display: grid;\n width: 1.75rem;\n height: 1.75rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n border: 2px solid var(--color-hair);\n background: var(--color-surface);\n font-size: 0.75rem;\n font-weight: 700;\n color: var(--color-ink-soft);\n transition:\n background-color var(--duration-base) var(--ease-standard),\n border-color var(--duration-base) var(--ease-standard),\n color var(--duration-base) var(--ease-standard);\n}\n\n.is-current .rk-step-mark {\n border-color: var(--color-primary);\n color: var(--color-primary);\n}\n\n.is-complete .rk-step-mark {\n border-color: var(--color-primary);\n background: var(--color-primary);\n color: var(--color-on-primary);\n}\n\n.is-error .rk-step-mark {\n border-color: var(--color-negative);\n background: var(--color-negative);\n color: var(--color-on-negative);\n}\n\n.is-clickable:hover .rk-step-mark {\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 18%, transparent);\n}\n\n.rk-step-text {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: 0.125rem;\n padding-top: 0.25rem;\n}\n\n.rk-step-label {\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--color-ink-soft);\n}\n\n.is-current .rk-step-label,\n.is-complete .rk-step-label {\n color: var(--color-ink);\n}\n\n.is-error .rk-step-label {\n color: var(--color-negative);\n}\n\n.rk-step-description {\n font-size: 0.75rem;\n line-height: 1.4;\n color: var(--color-ink-soft);\n}\n</style>\n","import { computed, ref, watchEffect } from 'vue'\nimport { createI18n } from 'vue-i18n'\n\nimport { textDirection } from '../utils/direction'\nimport { setFormatLocale } from '../utils/format'\n\n/** What the user picked. `system` re-reads the browser on every launch. */\nexport type LocalePreference<L extends string> = 'system' | L\n\nexport interface I18nRuntimeOptions<L extends string, Schema> {\n /** Languages the app ships, in no particular order. */\n locales: readonly L[]\n /** The one that is always loaded, and the fallback when a load fails. */\n fallback: L\n /**\n * BCP 47 tag per locale, for `Intl`.\n *\n * Message lookup only needs the base language, but dates and numbers need a\n * region to be right — `zh` alone would leave the formatter to guess.\n */\n intlTags: Record<L, string>\n /** The fallback's messages, bundled. */\n messages: Schema\n /** The rest, fetched only when they are the one in use. */\n loaders?: Partial<Record<L, () => Promise<{ default: Schema }>>>\n /** Where the choice is stored. Namespace it per app. */\n storageKey?: string\n}\n\n/**\n * Builds an i18n runtime around an app's own catalogue.\n *\n * A factory rather than a module singleton because the schema is the app's:\n * typing every locale as `typeof en` is what makes a missing key a build error,\n * and this package has no `en` of its own to type against.\n *\n * @example\n * ```ts\n * export const { i18n, t, useLocalePreference, loadActiveLocale } =\n * createI18nRuntime({\n * locales: ['en', 'tr'] as const,\n * fallback: 'en',\n * intlTags: { en: 'en-GB', tr: 'tr-TR' },\n * messages: en,\n * loaders: { tr: () => import('./locales/tr') },\n * storageKey: 'myapp-locale',\n * })\n * ```\n */\nexport function createI18nRuntime<L extends string, Schema extends Record<string, unknown>>(\n options: I18nRuntimeOptions<L, Schema>,\n) {\n const { locales, fallback, intlTags, messages, storageKey = 'rei-locale' } = options\n\n // Typed rather than defaulted to `{}`, which erases the locale keys and makes\n // `loaders[locale]` an index into an empty object.\n const loaders: Partial<Record<L, () => Promise<{ default: Schema }>>> = options.loaders ?? {}\n\n function isSupported(value: string): value is L {\n return (locales as readonly string[]).includes(value)\n }\n\n /**\n * First browser language the app can actually speak.\n *\n * `navigator.languages` is ordered by the user's own preference, so the first\n * match is the best one — not simply the first entry.\n */\n function detectSystemLocale(): L {\n // No browser to ask. The fallback is the right answer on a server: it is\n // the locale whose messages are bundled, so it is the only one that could\n // render without a load.\n //\n // The test is `document`, not `navigator`. Node has shipped a global\n // `navigator` since v21, so `typeof navigator === 'undefined'` is false on\n // a server and this would read the *build machine's* language and bake it\n // into every prerendered page. `document` is the only one of the two that\n // still means \"a browser\".\n if (typeof document === 'undefined') return fallback\n\n for (const tag of navigator.languages ?? [navigator.language]) {\n const base = tag.split('-')[0]?.toLowerCase()\n if (base && isSupported(base)) return base\n }\n\n return fallback\n }\n\n function readStored(): LocalePreference<L> {\n try {\n const stored = localStorage.getItem(storageKey)\n if (stored === 'system' || (stored && isSupported(stored))) return stored\n } catch {\n // Storage blocked; fall through to the system language.\n }\n\n return 'system'\n }\n\n const preference = ref<LocalePreference<L>>(readStored())\n\n const activeLocale = computed<L>(() =>\n preference.value === 'system' ? detectSystemLocale() : (preference.value as L),\n )\n\n const intlLocale = computed(() => intlTags[activeLocale.value])\n\n // Only the fallback at construction; the rest arrive through\n // setLocaleMessage.\n const initial = { [fallback]: messages } as Record<string, Record<string, unknown>>\n\n const i18n = createI18n({\n legacy: false,\n locale: activeLocale.value as string,\n fallbackLocale: fallback as string,\n messages: initial,\n } as unknown as Parameters<typeof createI18n>[0])\n\n /**\n * A narrow view of the instance.\n *\n * vue-i18n infers its own generics from the messages it is handed, which\n * fights a runtime that is generic over the app's schema. Casting once, here,\n * keeps that fight out of every call site — and the surface below is the\n * whole of what this runtime uses.\n */\n const core = i18n.global as unknown as {\n locale: { value: string }\n setLocaleMessage: (locale: string, messages: Schema) => void\n t: (key: string, named?: Record<string, unknown>) => string\n }\n\n const loaded = new Set<L>([fallback])\n\n /**\n * Makes sure a locale's messages are in place before it becomes active.\n *\n * Awaited rather than fired and forgotten: setting the locale first paints one\n * frame of the fallback at every other user, which is the flash a fallback\n * exists to prevent, not cause.\n */\n async function ensureMessages(locale: L): Promise<void> {\n if (loaded.has(locale)) return\n\n const load = loaders[locale]\n if (!load) return\n\n try {\n const module = await load()\n core.setLocaleMessage(locale, module.default)\n loaded.add(locale)\n } catch {\n // Offline, or a stale chunk after a deploy. The fallback is loaded and\n // will carry the UI, which beats a blank screen.\n }\n }\n\n /** Loads whatever the stored preference resolves to. Call before mounting. */\n function loadActiveLocale(): Promise<void> {\n return ensureMessages(activeLocale.value)\n }\n\n // Keeps vue-i18n, `Intl` and the document in step. `lang` matters beyond\n // tidiness: it drives hyphenation, font fallback and screen readers.\n //\n // `dir` matters more. The kit is built on logical properties and\n // `start`/`end` props the whole way through, and every one of them is\n // inert until the document says which way the language runs — so an app\n // that adds Arabic would get the entire layout mirrored the wrong way\n // while every check stayed green.\n watchEffect(() => {\n core.locale.value = activeLocale.value\n setFormatLocale(intlLocale.value)\n\n if (typeof document !== 'undefined') {\n document.documentElement.lang = activeLocale.value\n document.documentElement.dir = textDirection(intlLocale.value)\n }\n })\n\n /** Read and write the language preference. */\n function useLocalePreference() {\n return computed<LocalePreference<L>>({\n get: () => preference.value,\n set: (next) => {\n const resolved = next === 'system' ? detectSystemLocale() : (next as L)\n\n // Messages first, then the switch — the other order shows the fallback\n // for a frame on the way to the language the user just picked.\n void ensureMessages(resolved).then(() => {\n preference.value = next\n })\n\n try {\n localStorage.setItem(storageKey, next)\n } catch {\n // Storage blocked; the choice lasts for this session only.\n }\n },\n })\n }\n\n return {\n i18n,\n /** `t` for code outside a component. Tracks the locale inside a computed. */\n t: core.t,\n activeLocale,\n intlLocale,\n ensureMessages,\n loadActiveLocale,\n useLocalePreference,\n }\n}\n","/**\n * rei-kit — the layer every app starts from.\n *\n * Everything here is free of any backend, router or i18n choice. Components\n * take strings rather than calling a translator, and utilities take the clock\n * rather than reading it, so nothing in this package can force a decision on\n * the app that installs it.\n *\n * @see https://github.com/ramazandogna/rei-kit\n */\n\n/**\n * The published version, replaced at build time from `package.json`.\n *\n * It was a literal `'0.0.0'` and nothing ever rewrote it, so every consumer\n * that imported this — and the showcase, which is how it was noticed — was\n * told the kit was at 0.0.0 whatever it actually was. A symbol in a public API\n * that reports something false is worse than one that is missing: nobody\n * checks a value that looks like it works.\n *\n * The fallback keeps `vitest` and `vite dev` honest, where no define runs.\n */\nexport const VERSION: string =\n typeof __REI_KIT_VERSION__ === 'string' ? __REI_KIT_VERSION__ : '0.0.0-dev'\n\n// ── Utilities ──────────────────────────────────────────────────────────────\nexport {\n addDays,\n eachDayOfYear,\n fromDateKey,\n lastNDays,\n leadingBlanks,\n startOfWeek,\n toDateKey,\n todayKey,\n} from './utils/date'\nexport type { WeekStart } from './utils/date'\n\nexport { formatDate, formatNumber, setFormatLocale } from './utils/format'\nexport { relativeDayLabel } from './utils/day-label'\nexport type { DayLabels } from './utils/day-label'\n\nexport { downloadJson } from './utils/download'\nexport {\n MATERIALS,\n PALETTES,\n applyMaterial,\n applyPalette,\n isMaterial,\n isPaletteName,\n setMaterialStorageKey,\n setPaletteStorageKey,\n useMaterial,\n usePalette,\n} from './utils/appearance'\nexport type { Material, Palette, PaletteName, PaletteRoles } from './utils/appearance'\nexport { ensureSheetRoot, SHEET_ROOT_ID } from './utils/sheet-root'\nexport { safeRedirect, toRedirectPath } from './utils/redirect'\nexport type { QueryValue } from './utils/redirect'\nexport { tapFeedback } from './utils/haptics'\nexport { isApplePortable, isInstalled, needsIosInstall } from './utils/platform'\n\nexport { AppError, registerErrorMapper, toAppError } from './utils/app-error'\nexport type { AppErrorKind, ErrorMapper } from './utils/app-error'\n\n// ── Composables ────────────────────────────────────────────────────────────\nexport {\n applyTheme,\n isThemePreference,\n readStoredTheme,\n setThemeStorageKey,\n useTheme,\n} from './composables/use-theme'\nexport type { ThemePreference } from './composables/use-theme'\n\nexport { useToday } from './composables/use-today'\nexport { useOnline } from './composables/use-online'\nexport { useDebouncedCallback } from './composables/use-debounced-callback'\nexport { useDragScroll } from './composables/use-drag-scroll'\nexport { useMediaQuery } from './composables/use-media-query'\nexport { useVisualViewport } from './composables/use-visual-viewport'\nexport { useToast } from './composables/use-toast'\nexport type { Toast, ToastAction, ToastOptions, ToastTone } from './composables/use-toast'\nexport type { VisualViewportRect } from './composables/use-visual-viewport'\n\n// ── Components ─────────────────────────────────────────────────────────────\n/**\n * The person, in the corner where the account lives.\n *\n * @example\n * ```vue\n * <BaseAvatar name=\"Aiko Tanaka\" fallback=\"initials\" size=\"lg\" />\n * ```\n */\nexport { default as BaseAvatar } from './components/BaseAvatar.vue'\n/**\n * A message the reader has to take in before carrying on.\n *\n * @example\n * ```vue\n * <BaseAlert tone=\"warning\">\n * <template #title>Unsaved changes</template>\n * Leave now and the last edit is lost.\n * </BaseAlert>\n * ```\n */\nexport { default as BaseAlert } from './components/BaseAlert.vue'\n/**\n * A small standing label: a level, a state, a count.\n *\n * @example\n * ```vue\n * <BaseBadge tone=\"success\">Paid</BaseBadge>\n * ```\n *\n * @see {@link BaseChip} — the near-neighbour this is mistaken for\n */\nexport { default as BaseBadge } from './components/BaseBadge.vue'\n/**\n * The kit's button, and — when asked — its link.\n *\n * @example\n * ```vue\n * <div class=\"flex flex-wrap gap-2\">\n * <BaseButton @click=\"save\">Save</BaseButton>\n * <BaseButton variant=\"secondary\">Cancel</BaseButton>\n * <BaseButton variant=\"danger\" :loading=\"deleting\">Delete</BaseButton>\n * <BaseButton as=\"a\" href=\"/docs\" variant=\"ghost\">Read the docs</BaseButton>\n * </div>\n * ```\n *\n * @see {@link BaseLink} — the near-neighbour this is mistaken for\n */\nexport { default as BaseButton } from './components/BaseButton.vue'\n/**\n * A text field with its label, hint and error already wired to it.\n *\n * @example\n * ```vue\n * <BaseInput v-model=\"email\" label=\"Email\" type=\"email\" hint=\"We never share it.\" />\n *\n * <!-- A unit attached to the field. It is `aria-hidden` because the label\n * already says what the number is; a mark that is the only place the\n * unit appears belongs in the label instead. -->\n * <BaseInput v-model=\"weight\" label=\"Weight in kilograms\" type=\"number\">\n * <template #suffix><span aria-hidden=\"true\">kg</span></template>\n * </BaseInput>\n * ```\n *\n * @see {@link PasswordInput} — the near-neighbour this is mistaken for\n */\nexport { default as BaseInput } from './components/BaseInput.vue'\n/**\n * A list of actions behind one control.\n *\n * @example\n * ```vue\n * <BaseMenu label=\"Account\">\n * <template #trigger>\n * <BaseAvatar name=\"Aiko Tanaka\" fallback=\"initials\" />\n * </template>\n *\n * <a href=\"/profile\" role=\"menuitem\">Profile</a>\n * <button type=\"button\" role=\"menuitem\" @click=\"signOut\">Sign out</button>\n * </BaseMenu>\n * ```\n *\n * @see {@link BaseModal}, {@link BasePopover}, {@link CommandMenu}, {@link MegaMenu}, {@link NavLinks} — the near-neighbours this is mistaken for\n */\nexport { default as BaseMenu } from './components/BaseMenu.vue'\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * @example\n * ```vue\n * <BaseButton @click=\"open = true\">New entry</BaseButton>\n *\n * <BaseSheet v-model=\"open\" title=\"New entry\" close-label=\"Close\">\n * <p>Anything that belongs to a thumb.</p>\n * </BaseSheet>\n * ```\n *\n * @see {@link BaseDrawer}, {@link BaseModal} — the near-neighbours this is mistaken for\n */\nexport { default as BaseSheet } from './components/BaseSheet.vue'\n/**\n * A surface with a border, and optionally a head and a foot.\n *\n * @example\n * ```vue\n * <BaseCard>\n * <template #head>This month</template>\n * Spent less than last month.\n * <template #foot>Updated today</template>\n * </BaseCard>\n * ```\n */\nexport { default as BaseCard } from './components/BaseCard.vue'\n/**\n * A field you type into to narrow a list, then choose from it.\n *\n * @example\n * ```vue\n * <BaseCombobox\n * v-model=\"country\"\n * label=\"Country\"\n * :options=\"countries\"\n * placeholder=\"Start typing\"\n * empty-label=\"No country matches\"\n * />\n *\n * <BaseCombobox\n * v-model=\"recipients\"\n * mode=\"multiple\"\n * label=\"Recipients\"\n * :options=\"countries\"\n * :remove-label=\"(name) => `Remove ${name}`\"\n * placeholder=\"Add someone\"\n * empty-label=\"Nobody matches\"\n * />\n *\n * <BaseCombobox\n * label=\"City\"\n * :options=\"results\"\n * :loading=\"loading\"\n * loading-label=\"Searching…\"\n * filter=\"none\"\n * placeholder=\"Type at least two letters\"\n * empty-label=\"No city matches\"\n * @search=\"search\"\n * />\n * ```\n *\n * @see {@link BaseSelect}, {@link TagsInput}, {@link TransferList} — the near-neighbours this is mistaken for\n */\nexport { default as BaseCombobox } from './components/BaseCombobox.vue'\nexport type { ComboboxOption } from './components/BaseCombobox.vue'\n/**\n * A single checkbox, with its label beside it.\n *\n * @example\n * ```vue\n * <BaseCheckbox v-model=\"remember\" label=\"Remember me\" />\n * ```\n *\n * @see {@link BaseSwitch} — the near-neighbour this is mistaken for\n */\nexport { default as BaseCheckbox } from './components/BaseCheckbox.vue'\n/**\n * A set of radios, and the reason there is no `BaseRadio`.\n *\n * @example\n * ```vue\n * <BaseRadioGroup v-model=\"plan\" legend=\"Plan\" :options=\"plans\" />\n * ```\n *\n * @see {@link BaseListbox}, {@link BaseSelect} — the near-neighbours this is mistaken for\n */\nexport { default as BaseRadioGroup } from './components/BaseRadioGroup.vue'\n/**\n * A native `<select>`, wearing the kit's field.\n *\n * @example\n * ```vue\n * <BaseSelect v-model=\"currency\" label=\"Currency\" :options=\"options\" placeholder=\"Choose one\" />\n * ```\n *\n * @see {@link BaseCombobox}, {@link BaseListbox}, {@link BaseRadioGroup} — the near-neighbours this is mistaken for\n */\nexport { default as BaseSelect } from './components/BaseSelect.vue'\n/**\n * A value picked from a range, where roughly right is the point.\n *\n * @example\n * ```vue\n * <BaseSlider v-model=\"goal\" label=\"Daily goal\" :min=\"5\" :max=\"60\" :step=\"5\" show-value />\n * ```\n *\n * @see {@link NumberInput}, {@link SliderField} — the near-neighbours this is mistaken for\n */\nexport { default as BaseSlider } from './components/BaseSlider.vue'\n\n/**\n * A slider and a number field on one value: drag to find it, type to land\n * on it. See `SliderField.vue` for why both carry the same name.\n *\n * @example\n * ```vue\n * <SliderField\n * v-model=\"opacity\"\n * label=\"Opacity\"\n * :min=\"0\"\n * :max=\"100\"\n * :step=\"5\"\n * decrement-label=\"Less opaque\"\n * increment-label=\"More opaque\"\n * :format=\"(value) => `${value}%`\"\n * hint=\"Drag for roughly right, type for exactly right.\"\n * />\n * ```\n *\n * @see {@link BaseSlider}, {@link NumberInput} — the near-neighbours this is mistaken for\n */\nexport { default as SliderField } from './components/SliderField.vue'\n/**\n * Work in progress, with no idea how much is left.\n *\n * @example\n * ```vue\n * <BaseSpinner label=\"Loading entries\" />\n * ```\n *\n * @see {@link ProgressBar} — the near-neighbour this is mistaken for\n */\nexport { default as BaseSpinner } from './components/BaseSpinner.vue'\n/**\n * A setting that takes effect the moment it is touched.\n *\n * @example\n * ```vue\n * <BaseSwitch v-model=\"reminders\" label=\"Daily reminder\" hint=\"Every evening at 21:00\" />\n * ```\n *\n * @see {@link BaseCheckbox} — the near-neighbour this is mistaken for\n */\nexport { default as BaseSwitch } from './components/BaseSwitch.vue'\n/**\n * Rows of data, with the parts a hand-written `<table>` leaves out.\n *\n * @example\n * ```vue\n * <BaseTable :columns=\"columns\" :rows=\"rows\" caption=\"Recent payments\" row-key=\"id\">\n * <template #amount=\"{ value }\">{{ value }} ₺</template>\n * </BaseTable>\n * ```\n *\n * @see {@link DataTable} — the near-neighbour this is mistaken for\n */\nexport { default as BaseTable } from './components/BaseTable.vue'\nexport type { Column } from './components/BaseTable.vue'\n/**\n * A multi-line field.\n *\n * @example\n * ```vue\n * <BaseTextarea v-model=\"note\" label=\"Note\" :rows=\"4\" />\n * ```\n */\nexport { default as BaseTextarea } from './components/BaseTextarea.vue'\n/**\n * A list with nothing in it yet, said kindly.\n *\n * @example\n * ```vue\n * <EmptyState title=\"No entries yet\" description=\"Your first one takes ten seconds.\">\n * <template #action>\n * <BaseButton>Write one</BaseButton>\n * </template>\n * </EmptyState>\n * ```\n */\nexport { default as EmptyState } from './components/EmptyState.vue'\n/**\n * A label, a hint, an error, and the wiring between them.\n *\n * @example\n * ```vue\n * <FormField label=\"Username\" hint=\"Letters and numbers only\" :error=\"error\">\n * <template #default=\"{ id, describedBy, invalid }\">\n * <input\n * :id=\"id\"\n * v-model=\"name\"\n * class=\"control rounded-card px-3 py-2\"\n * :aria-describedby=\"describedBy\"\n * :aria-invalid=\"invalid\"\n * />\n * </template>\n * </FormField>\n * ```\n */\nexport { default as FormField } from './components/FormField.vue'\n/**\n * Keeps one broken screen from taking the whole app down.\n *\n * @example\n * ```vue\n * <ErrorBoundary @error=\"report\">\n * <RouterView />\n *\n * <template #fallback=\"{ reset }\">\n * <p>That part of the page failed.</p>\n * <BaseButton @click=\"reset\">Try again</BaseButton>\n * </template>\n * </ErrorBoundary>\n * ```\n */\nexport { default as ErrorBoundary } from './components/ErrorBoundary.vue'\n/**\n * One measure, centred, with the page's gutters.\n *\n * @example\n * ```vue\n * <PageContainer width=\"reading\" as=\"article\">\n * <h1>A long read</h1>\n * <p>Set at about 68 characters a line.</p>\n * </PageContainer>\n * ```\n */\nexport { default as PageContainer } from './components/PageContainer.vue'\n/**\n * The bar at the top of a screen: a title with room either side of it.\n *\n * @example\n * ```vue\n * <PageHeader title=\"Settings\">\n * <template #right>\n * <BaseButton size=\"sm\" variant=\"ghost\">Done</BaseButton>\n * </template>\n * </PageHeader>\n * ```\n */\nexport { default as PageHeader } from './components/PageHeader.vue'\n/**\n * How far through something somebody is.\n *\n * @example\n * ```vue\n * <ProgressBar :value=\"18\" :max=\"28\" label=\"Course progress\" />\n * ```\n *\n * @see {@link BaseSpinner} — the near-neighbour this is mistaken for\n */\nexport { default as ProgressBar } from './components/ProgressBar.vue'\n/**\n * One plan in a pricing table.\n *\n * @example\n * ```vue\n * <PriceCard\n * name=\"Pro\"\n * price=\"₺49\"\n * period=\"/ month\"\n * :features=\"['Unlimited entries', 'Export', 'Sync']\"\n * recommended\n * badge=\"Popular\"\n * >\n * <template #action>\n * <BaseButton block>Choose Pro</BaseButton>\n * </template>\n * </PriceCard>\n * ```\n */\nexport { default as PriceCard } from './components/PriceCard.vue'\n/**\n * A pill heading for a group of things.\n *\n * @example\n * ```vue\n * <SectionHeading :tone=\"income\" label=\"Income\" :count=\"3\" />\n * ```\n */\nexport { default as SectionHeading } from './components/SectionHeading.vue'\n/**\n * A row of mutually exclusive choices.\n *\n * @example\n * ```vue\n * <SegmentedControl v-model=\"range\" :options=\"ranges\" />\n * ```\n *\n * @see {@link ToggleGroup} — the near-neighbour this is mistaken for\n */\nexport { default as SegmentedControl } from './components/SegmentedControl.vue'\n/**\n * A titled run of settings rows.\n *\n * @example\n * ```vue\n * <SettingsGroup title=\"Notifications\">\n * <SettingsRow label=\"Daily reminder\">\n * <BaseSwitch v-model=\"reminders\" label=\"Daily reminder\" label-hidden />\n * </SettingsRow>\n * </SettingsGroup>\n * ```\n */\nexport { default as SettingsGroup } from './components/SettingsGroup.vue'\n/**\n * One line in a settings card.\n *\n * @example\n * ```vue\n * <SettingsGroup title=\"Account\">\n * <SettingsRow\n * label=\"Language\"\n * description=\"English\"\n * :icon=\"Languages\"\n * interactive\n * @click=\"openLanguages\"\n * />\n * </SettingsGroup>\n * ```\n */\nexport { default as SettingsRow } from './components/SettingsRow.vue'\n/**\n * A length starts with a digit, a dot, or opens a CSS function.\n *\n * @example\n * ```vue\n * <SkeletonList :rows=\"4\" label=\"Loading entries\" />\n * ```\n *\n * @see {@link BaseSkeleton} — the near-neighbour this is mistaken for\n */\nexport { default as SkeletonList } from './components/SkeletonList.vue'\n/**\n * One number, with what it means and which way it is going.\n *\n * @example\n * ```vue\n * <StatCard value=\"¥48,200\" label=\"This month\" trend=\"down\" />\n * ```\n */\nexport { default as StatCard } from './components/StatCard.vue'\n/**\n * Where the toasts land. One of these, at the app root.\n *\n * @example\n * ```vue\n * <!-- Once, near the root of the app. -->\n * <ToastHost close-label=\"Close\" />\n *\n * <BaseButton @click=\"toast.success('Saved')\">Save</BaseButton>\n * ```\n */\nexport { default as ToastHost } from './components/ToastHost.vue'\n/**\n * A small coloured dot, optionally labelled.\n *\n * @example\n * ```vue\n * <ToneDot fill=\"bg-positive\" label=\"Income\" />\n * ```\n */\nexport { default as ToneDot } from './components/ToneDot.vue'\nexport type { Tone } from './components/SectionHeading.vue'\n/**\n * A flat language switcher for screens with no Settings behind them.\n *\n * @example\n * ```vue\n * <LocaleLinks v-model=\"locale\" :locales=\"['en', 'tr']\" :labels=\"{ en: 'English', tr: 'Türkçe' }\" />\n * ```\n */\nexport { default as LocaleLinks } from './components/LocaleLinks.vue'\n/**\n * Sign in with Google, in Google's own clothes.\n *\n * @example\n * ```vue\n * <GoogleButton label=\"Continue with Google\" @click=\"signInWithGoogle\" />\n * ```\n */\nexport { default as GoogleButton } from './components/GoogleButton.vue'\n/**\n * The floating bottom bar.\n *\n * @example\n * ```vue\n * <TabBar :items=\"tabs\" :active=\"active\" label=\"Main\" />\n * ```\n *\n * @see {@link BaseTabs}, {@link NavLinks} — the near-neighbours this is mistaken for\n */\nexport { default as TabBar } from './components/TabBar.vue'\nexport type { TabItem } from './components/TabBar.vue'\n/**\n * `ActivityGrid`, a year at a glance — a real table, so the DOM order is\n * the picture's order, and one tab stop rather than three hundred odd.\n *\n * @example\n * ```vue\n * <ActivityGrid\n * :days=\"days\"\n * label=\"Your year\"\n * :level-for=\"levelFor\"\n * :day-label=\"dayLabel\"\n * :is-selectable=\"isSelectable\"\n * @select=\"toast.info($event)\"\n * />\n * ```\n *\n * @see {@link BaseCalendar} — the near-neighbour this is mistaken for\n */\nexport { default as ActivityGrid } from './components/ActivityGrid.vue'\n/**\n * `BarChart` and `DonutChart`: the two shapes the kit's own dashboard\n * vocabulary — `StatCard`, `ProgressBar`, `ActivityGrid` — creates a need\n * for and did not answer. Both are the data as text with a picture beside\n * it, rather than a picture with a sentence describing it.\n *\n * @example\n * ```vue\n * <BarChart\n * :series=\"SIZES\"\n * label=\"Bundle size, ten components\"\n * :value-label=\"(kb) => `${kb.toFixed(1)} KB`\"\n * :fill=\"(item) => (item.key === 'rei' ? 'bg-positive' : 'bg-muted')\"\n * />\n * ```\n *\n * @see {@link DonutChart} — the near-neighbour this is mistaken for\n */\nexport { default as BarChart } from './components/BarChart.vue'\n/**\n * Parts of a whole.\n *\n * @example\n * ```vue\n * <DonutChart\n * :slices=\"PARTS\"\n * label=\"What the stylesheet is made of\"\n * :value-label=\"(kb) => `${kb.toFixed(1)} KB`\"\n * :fill=\"(_, index) => TONES[index % TONES.length]!\"\n * />\n * ```\n *\n * @see {@link BarChart} — the near-neighbour this is mistaken for\n */\nexport { default as DonutChart } from './components/DonutChart.vue'\n/**\n * `ScrollArea`, a scrolling box with the two things a hand-written one\n * leaves out: a fade at whichever edge has more content past it, and a\n * focus stop — but only when nothing inside it can take focus.\n *\n * @example\n * ```vue\n * <!-- Nothing inside takes focus, so this becomes a named focus stop on its\n * own and the far end stays reachable with a keyboard. -->\n * <ScrollArea axis=\"x\" scrollbar=\"hidden\" label=\"The year so far\" class=\"max-w-sm\">\n * <p class=\"flex gap-3 whitespace-nowrap\">\n * <span v-for=\"month in MONTHS\" :key=\"month\" class=\"text-ink-soft text-sm\">{{ month }}</span>\n * </p>\n * </ScrollArea>\n * ```\n */\nexport { default as ScrollArea } from './components/ScrollArea.vue'\n/**\n * `VirtualList`, a long list where only the rows near the viewport exist —\n * and every one of them states its place in the whole, which is the half\n * that is usually dropped.\n *\n * @example\n * ```vue\n * <VirtualList\n * :items=\"ROWS\"\n * :row-height=\"36\"\n * label=\"Five thousand rows\"\n * class=\"border-hair max-h-56 rounded-xl border\"\n * >\n * <template #default=\"{ item }\">\n * <span class=\"text-ink flex h-full items-center px-3 text-sm\">{{ item.name }}</span>\n * </template>\n * </VirtualList>\n * ```\n */\nexport { default as VirtualList } from './components/VirtualList.vue'\n/**\n * `AnnounceHost` and `useAnnounce`, for saying something to a reader when\n * nothing on screen has changed enough to say it: a filter that narrowed a\n * list, a route that changed, a draft that saved itself.\n *\n * @example\n * ```vue\n * <div class=\"flex items-center gap-3\">\n * <!-- Rendered once per app. Nothing here is ever visible. -->\n * <AnnounceHost />\n *\n * <BaseButton variant=\"secondary\" @click=\"filter\">Filter</BaseButton>\n * <span class=\"text-ink-soft text-sm\">{{ count }} results</span>\n * </div>\n * ```\n */\nexport { default as AnnounceHost } from './components/AnnounceHost.vue'\n/**\n * `ErrorSummary`, the answer to \"did that work?\" at the top of a rejected\n * form — and a way from there into each field in one press.\n *\n * @example\n * ```vue\n * <form class=\"flex flex-col gap-3\" novalidate @submit.prevent=\"submit\">\n * <!-- Takes focus itself the first time the form is rejected, so the\n * reader is not left on a button that appeared to do nothing. -->\n * <ErrorSummary\n * :errors=\"errors\"\n * title=\"There are fields to fix\"\n * :label-for=\"(field) => LABELS[field] ?? field\"\n * :field-id=\"fieldId\"\n * :fields=\"['email', 'password']\"\n * />\n *\n * <!-- The same function on both sides: the summary builds the href from it\n * and each field takes its id from it, so the link lands on the field. -->\n * <BaseInput\n * v-model=\"email\"\n * label=\"Email\"\n * type=\"email\"\n * autocomplete=\"email\"\n * :error=\"errors['email']\"\n * :field-id=\"fieldId('email')\"\n * />\n *\n * <PasswordInput\n * v-model=\"password\"\n * label=\"Password\"\n * toggle-label=\"Show password\"\n * autocomplete=\"new-password\"\n * :error=\"errors['password']\"\n * :field-id=\"fieldId('password')\"\n * />\n *\n * <BaseButton type=\"submit\" class=\"self-start\">Sign up</BaseButton>\n * </form>\n * ```\n */\nexport { default as ErrorSummary } from './components/ErrorSummary.vue'\nexport { useAnnounce, announce } from './composables/use-announce'\n/**\n * `textDirection`, because every logical property and every `start`/`end`\n * prop in the kit is inert until the document says which way the language\n * runs. The i18n runtime sets `dir` from it; this is for an app that has\n * no i18n runtime and still has more than one direction.\n */\nexport { textDirection } from './utils/direction'\n/**\n * `elementDirection` and `horizontalStep`, for an app writing the keyboard\n * behaviour the kit does not cover. `ArrowLeft` means \"back through the\n * list\" only where the language runs left to right; read as a step, it\n * means the same thing in both.\n */\nexport { elementDirection, horizontalStep } from './utils/direction'\nexport type { TextDirection } from './utils/direction'\nexport type { AnnounceOptions } from './composables/use-announce'\n/**\n * The people on a thing, overlapped: who is in a conversation, who shares\n * a list.\n *\n * @example\n * ```vue\n * <AvatarStack :people=\"people\" :max=\"3\" label=\"Shared with 5 people\" />\n * ```\n */\nexport { default as AvatarStack } from './components/AvatarStack.vue'\n/**\n * A month of days, for choosing one or a stretch of them.\n *\n * @example\n * ```vue\n * <BaseCalendar\n * v-model=\"day\"\n * previous-label=\"Previous month\"\n * next-label=\"Next month\"\n * :min=\"todayKey()\"\n * />\n * ```\n *\n * @see {@link ActivityGrid}, {@link BaseDatePicker} — the near-neighbours this is mistaken for\n */\nexport { default as BaseCalendar } from './components/BaseCalendar.vue'\n/**\n * A short label with, when it is one of a set someone assembled, a way to\n * take it off: a filter, a recipient, a tag.\n *\n * @example\n * ```vue\n * <div class=\"flex flex-wrap gap-2\">\n * <BaseChip\n * v-for=\"tag in tags\"\n * :key=\"tag\"\n * :label=\"tag\"\n * :remove-label=\"`Remove ${tag}`\"\n * @remove=\"remove(tag)\"\n * />\n * </div>\n * ```\n *\n * @see {@link BaseBadge} — the near-neighbour this is mistaken for\n */\nexport { default as BaseChip } from './components/BaseChip.vue'\n/**\n * A keyboard key, or a chord of them: `⌘ K`, `Ctrl Shift P`.\n *\n * @example\n * ```vue\n * <p>Press <BaseKbd :keys=\"['⌘', 'K']\" joiner=\"+\" /> to search.</p>\n * ```\n */\nexport { default as BaseKbd } from './components/BaseKbd.vue'\n/**\n * A list you choose from, open on the page.\n *\n * @example\n * ```vue\n * <BaseListbox v-model=\"chosen\" mode=\"multiple\" :options=\"people\" label=\"People with access\" />\n * ```\n *\n * @see {@link BaseRadioGroup}, {@link BaseSelect}, {@link TransferList} — the near-neighbours this is mistaken for\n */\nexport { default as BaseListbox } from './components/BaseListbox.vue'\nexport type { ListboxOption } from './components/BaseListbox.vue'\n/**\n * A link in a sentence — the one thing a button is not.\n *\n * @example\n * ```vue\n * <p>\n * Read the <BaseLink to=\"/docs\">documentation</BaseLink>, or the\n * <BaseLink href=\"https://vuejs.org\" external>Vue guide</BaseLink>.\n * </p>\n * ```\n *\n * @see {@link BaseButton} — the near-neighbour this is mistaken for\n */\nexport { default as BaseLink } from './components/BaseLink.vue'\n/**\n * A score out of five, given or shown.\n *\n * @example\n * ```vue\n * <BaseRating\n * v-model=\"score\"\n * label=\"Your rating\"\n * :value-label=\"(value, max) => `${value} out of ${max}`\"\n * />\n * ```\n */\nexport { default as BaseRating } from './components/BaseRating.vue'\n/**\n * A line between things — with, when it helps, a word on it.\n *\n * @example\n * ```vue\n * <p>Signed in already?</p>\n * <BaseSeparator label=\"or\" />\n * <p>Create an account.</p>\n * ```\n */\nexport { default as BaseSeparator } from './components/BaseSeparator.vue'\n/**\n * One grey box standing in for content that has not arrived.\n *\n * @example\n * ```vue\n * <div class=\"flex items-center gap-3\" aria-busy=\"true\">\n * <BaseSkeleton shape=\"circle\" height=\"2.5rem\" />\n * <div class=\"flex-1\">\n * <BaseSkeleton shape=\"text\" width=\"40%\" height=\"0.75rem\" />\n * <BaseSkeleton class=\"mt-2\" shape=\"text\" width=\"70%\" height=\"0.75rem\" />\n * </div>\n * </div>\n * ```\n *\n * @see {@link SkeletonList} — the near-neighbour this is mistaken for\n */\nexport { default as BaseSkeleton } from './components/BaseSkeleton.vue'\n/**\n * A colour, as a hex value.\n *\n * @example\n * ```vue\n * <ColorPicker\n * v-model=\"brand\"\n * label=\"Brand colour\"\n * hex-label=\"Hex value\"\n * :swatches=\"swatches\"\n * hint=\"Used for buttons, links and the active state.\"\n * />\n * ```\n */\nexport { default as ColorPicker } from './components/ColorPicker.vue'\nexport type { ColorSwatch } from './components/ColorPicker.vue'\n/**\n * `CodeBlock`, a sample as written — no highlighting and no `v-html`, and\n * focusable when it scrolls, or the end of a long line is unreachable.\n *\n * @example\n * ```vue\n * <CodeBlock\n * :code=\"INSTALL\"\n * label=\"Installing the package\"\n * language=\"bash\"\n * copy-label=\"Copy the snippet\"\n * copied-label=\"Copied\"\n * />\n * ```\n */\nexport { default as CodeBlock } from './components/CodeBlock.vue'\n/**\n * Copies a piece of text, and says that it did.\n *\n * @example\n * ```vue\n * <CopyButton\n * text=\"pnpm add rei-kit\"\n * copy-label=\"Copy the command\"\n * copied-label=\"Copied\"\n * error-label=\"Could not copy\"\n * with-text\n * />\n * ```\n */\nexport { default as CopyButton } from './components/CopyButton.vue'\n/**\n * Pairs of \"what it is\" and \"what it says\": the summary at the top of a\n * detail page, the facts under an invoice.\n *\n * @example\n * ```vue\n * <DescriptionList :items=\"items\" layout=\"inline\">\n * <template #status><BaseBadge tone=\"success\">Paid</BaseBadge></template>\n * </DescriptionList>\n * ```\n */\nexport { default as DescriptionList } from './components/DescriptionList.vue'\nexport type { DescriptionItem } from './components/DescriptionList.vue'\n/**\n * Files, dropped on or chosen from a real file input.\n *\n * @example\n * ```vue\n * <FileDrop\n * v-model=\"files\"\n * label=\"Drop a receipt here\"\n * hint=\"PDF or an image, up to 5 MB\"\n * browse-label=\"Browse\"\n * remove-label=\"Remove\"\n * too-large-label=\"That file is over 5 MB\"\n * accept=\"image/*,.pdf\"\n * :max-size=\"5 * 1024 * 1024\"\n * multiple\n * />\n * ```\n */\nexport { default as FileDrop } from './components/FileDrop.vue'\n/**\n * A field that holds several short values: recipients, labels, skills.\n *\n * @example\n * ```vue\n * <TagsInput\n * v-model=\"tags\"\n * label=\"Tags\"\n * placeholder=\"Type and press Enter\"\n * :remove-label=\"(tag) => `Remove ${tag}`\"\n * :max=\"5\"\n * />\n * ```\n *\n * @see {@link BaseCombobox}, {@link TransferList} — the near-neighbours this is mistaken for\n */\nexport { default as TagsInput } from './components/TagsInput.vue'\n/**\n * A time of day, chosen from two columns.\n *\n * @example\n * ```vue\n * <TimePicker\n * v-model=\"at\"\n * label=\"Reminder\"\n * hours-label=\"Hour\"\n * minutes-label=\"Minute\"\n * placeholder=\"Choose a time\"\n * :step=\"15\"\n * min=\"07:00\"\n * max=\"22:00\"\n * hint=\"Stored as HH:mm, shown in your own clock.\"\n * />\n * ```\n *\n * @see {@link BaseDatePicker} — the near-neighbour this is mistaken for\n */\nexport { default as TimePicker } from './components/TimePicker.vue'\n/**\n * What happened, in order, on a rail.\n *\n * @example\n * ```vue\n * <BaseTimeline :events=\"notes\" label=\"Notes on this habit\">\n * <template #default=\"{ event }\">\n * <BaseCard as=\"blockquote\" padding=\"sm\" class=\"text-ink text-sm leading-relaxed\">\n * {{ event.body }}\n * </BaseCard>\n * </template>\n * </BaseTimeline>\n * ```\n *\n * @see {@link BaseStepper} — the near-neighbour this is mistaken for\n */\nexport { default as BaseTimeline } from './components/BaseTimeline.vue'\nexport type { TimelineEvent } from './components/BaseTimeline.vue'\nexport type { DateRange } from './components/BaseCalendar.vue'\n/**\n * A date, or a stretch of dates, chosen from a calendar in a popover.\n *\n * @example\n * ```vue\n * <BaseDatePicker\n * v-model=\"span\"\n * mode=\"range\"\n * label=\"Report period\"\n * placeholder=\"Choose a period\"\n * clear-label=\"Clear the period\"\n * :presets=\"presets\"\n * previous-label=\"Previous month\"\n * next-label=\"Next month\"\n * />\n * ```\n *\n * @see {@link BaseCalendar}, {@link TimePicker} — the near-neighbours this is mistaken for\n */\nexport { default as BaseDatePicker } from './components/BaseDatePicker.vue'\nexport type { DatePreset } from './components/BaseDatePicker.vue'\n/**\n * \"Are you sure?\", asked beside the button that asked it.\n *\n * @example\n * ```vue\n * <BasePopconfirm\n * message=\"This entry will be deleted.\"\n * confirm-label=\"Delete\"\n * cancel-label=\"Cancel\"\n * @confirm=\"remove\"\n * >\n * <template #trigger=\"{ props }\">\n * <BaseButton variant=\"danger\" size=\"sm\" v-bind=\"props\">Delete</BaseButton>\n * </template>\n * </BasePopconfirm>\n * ```\n *\n * @see {@link ResponsiveDialog} — the near-neighbour this is mistaken for\n */\nexport { default as BasePopconfirm } from './components/BasePopconfirm.vue'\n/**\n * A panel of anything — a form, a picker, a few settings — anchored to the\n * control that opened it.\n *\n * @example\n * ```vue\n * <BasePopover label=\"Filters\">\n * <template #trigger=\"{ props }\">\n * <BaseButton variant=\"secondary\" v-bind=\"props\">Filters</BaseButton>\n * </template>\n *\n * <template #default=\"{ close }\">\n * <BaseSwitch v-model=\"unpaid\" label=\"Only unpaid\" />\n * <BaseButton class=\"mt-3\" size=\"sm\" block @click=\"close\">Done</BaseButton>\n * </template>\n * </BasePopover>\n * ```\n *\n * @see {@link BaseMenu}, {@link BaseModal} — the near-neighbours this is mistaken for\n */\nexport { default as BasePopover } from './components/BasePopover.vue'\nexport type { PopoverTriggerProps } from './components/BasePopover.vue'\n/**\n * A row of buttons that stay pressed — one at a time, or several at once.\n *\n * @example\n * ```vue\n * <ToggleGroup v-model=\"marks\" mode=\"multiple\" :options=\"marksOptions\" label=\"Text style\" />\n * ```\n *\n * @see {@link SegmentedControl} — the near-neighbour this is mistaken for\n */\nexport { default as ToggleGroup } from './components/ToggleGroup.vue'\n/**\n * A number, typed or stepped — a quantity, a price, a count of minutes.\n *\n * @example\n * ```vue\n * <NumberInput\n * v-model=\"guests\"\n * label=\"Guests\"\n * :min=\"1\"\n * :max=\"12\"\n * decrement-label=\"Fewer guests\"\n * increment-label=\"More guests\"\n * />\n * ```\n *\n * @see {@link BaseSlider}, {@link SliderField} — the near-neighbours this is mistaken for\n */\nexport { default as NumberInput } from './components/NumberInput.vue'\n/**\n * A short code typed one character per box — a sign-in code, a PIN.\n *\n * @example\n * ```vue\n * <PinInput\n * v-model=\"code\"\n * label=\"Verification code\"\n * :cell-label=\"(n, total) => `Digit ${n} of ${total}`\"\n * @complete=\"verify\"\n * />\n * ```\n */\nexport { default as PinInput } from './components/PinInput.vue'\n/**\n * A password field you can look at.\n *\n * @example\n * ```vue\n * <PasswordInput\n * v-model=\"password\"\n * label=\"Password\"\n * toggle-label=\"Show password\"\n * hint=\"At least 12 characters.\"\n * autocomplete=\"new-password\"\n * />\n * ```\n *\n * @see {@link BaseInput} — the near-neighbour this is mistaken for\n */\nexport { default as PasswordInput } from './components/PasswordInput.vue'\n/**\n * Progress as a ring — for a small space, a card's corner, a goal.\n *\n * @example\n * ```vue\n * <div class=\"flex items-center gap-4\">\n * <CircularProgress :value=\"72\" label=\"Upload\" show-value size=\"lg\" />\n * <CircularProgress label=\"Loading\" />\n * </div>\n * ```\n */\nexport { default as CircularProgress } from './components/CircularProgress.vue'\n/**\n * Where someone is in a process of several steps — a sign-up, a checkout,\n * a form split into pages.\n *\n * @example\n * ```vue\n * <BaseStepper\n * v-model=\"step\"\n * :steps=\"steps\"\n * label=\"Sign-up\"\n * interactive\n * :state-labels=\"{ complete: 'done', error: 'needs attention' }\"\n * />\n * <BaseButton class=\"mt-4\" @click=\"step = 'payment'\">Next</BaseButton>\n * ```\n *\n * @see {@link BaseTimeline} — the near-neighbour this is mistaken for\n */\nexport { default as BaseStepper } from './components/BaseStepper.vue'\nexport type { StepperStep } from './components/BaseStepper.vue'\n\n// ── i18n ───────────────────────────────────────────────────────────────────\nexport { createI18nRuntime } from './i18n/runtime'\nexport type { I18nRuntimeOptions, LocalePreference } from './i18n/runtime'\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["$slots","$slots","$slots","$el","$slots","$slots"],"sources":["../src/utils/day-label.ts","../src/utils/download.ts","../src/palettes/palettes.generated.json","../src/utils/appearance.ts","../src/composables/use-today.ts","../src/composables/use-debounced-callback.ts","../src/components/BaseAvatar.vue","../src/components/BaseAvatar.vue","../src/components/BaseBadge.vue","../src/components/BaseBadge.vue","../src/components/BaseMenu.vue","../src/components/BaseMenu.vue","../src/components/BaseCard.vue","../src/components/BaseCard.vue","../src/composables/use-virtual-window.ts","../src/components/BaseCombobox.vue","../src/components/BaseCombobox.vue","../src/components/BaseRadioGroup.vue","../src/components/BaseRadioGroup.vue","../src/components/BaseSelect.vue","../src/components/BaseSelect.vue","../src/components/BaseSlider.vue","../src/components/BaseSlider.vue","../src/components/NumberInput.vue","../src/components/NumberInput.vue","../src/components/SliderField.vue","../src/components/SliderField.vue","../src/components/BaseSpinner.vue","../src/components/BaseSpinner.vue","../src/components/BaseSwitch.vue","../src/components/BaseSwitch.vue","../src/components/BaseTable.vue","../src/components/BaseTable.vue","../src/components/BaseTextarea.vue","../src/components/BaseTextarea.vue","../src/components/EmptyState.vue","../src/components/EmptyState.vue","../src/components/ErrorBoundary.vue","../src/components/ErrorBoundary.vue","../src/components/PageContainer.vue","../src/components/PageContainer.vue","../src/components/PageHeader.vue","../src/components/PageHeader.vue","../src/components/ProgressBar.vue","../src/components/ProgressBar.vue","../src/components/PriceCard.vue","../src/components/PriceCard.vue","../src/components/ToneDot.vue","../src/components/ToneDot.vue","../src/components/SectionHeading.vue","../src/components/SectionHeading.vue","../src/components/SegmentedControl.vue","../src/components/SegmentedControl.vue","../src/components/SkeletonList.vue","../src/components/SkeletonList.vue","../src/components/StatCard.vue","../src/components/StatCard.vue","../src/components/ToastHost.vue","../src/components/ToastHost.vue","../src/components/LocaleLinks.vue","../src/components/LocaleLinks.vue","../src/components/TabBar.vue","../src/components/TabBar.vue","../src/components/ActivityGrid.vue","../src/components/ActivityGrid.vue","../src/components/BarChart.vue","../src/components/BarChart.vue","../src/components/DonutChart.vue","../src/components/DonutChart.vue","../src/components/VirtualList.vue","../src/components/VirtualList.vue","../src/components/AnnounceHost.vue","../src/components/AnnounceHost.vue","../src/components/ErrorSummary.vue","../src/components/ErrorSummary.vue","../src/components/AvatarStack.vue","../src/components/AvatarStack.vue","../src/components/BaseCalendar.vue","../src/components/BaseCalendar.vue","../src/components/BaseChip.vue","../src/components/BaseChip.vue","../src/components/BaseKbd.vue","../src/components/BaseKbd.vue","../src/components/BaseLink.vue","../src/components/BaseLink.vue","../src/components/BaseRating.vue","../src/components/BaseRating.vue","../src/components/BaseSeparator.vue","../src/components/BaseSeparator.vue","../src/components/ColorPicker.vue","../src/components/ColorPicker.vue","../src/components/CopyButton.vue","../src/components/CopyButton.vue","../src/components/CodeBlock.vue","../src/components/CodeBlock.vue","../src/components/DescriptionList.vue","../src/components/DescriptionList.vue","../src/components/FileDrop.vue","../src/components/FileDrop.vue","../src/components/TagsInput.vue","../src/components/TagsInput.vue","../src/components/BasePopover.vue","../src/components/BasePopover.vue","../src/components/TimePicker.vue","../src/components/TimePicker.vue","../src/components/BaseTimeline.vue","../src/components/BaseTimeline.vue","../src/components/BaseDatePicker.vue","../src/components/BaseDatePicker.vue","../src/components/BasePopconfirm.vue","../src/components/BasePopconfirm.vue","../src/components/ToggleGroup.vue","../src/components/ToggleGroup.vue","../src/components/PinInput.vue","../src/components/PinInput.vue","../src/components/PasswordInput.vue","../src/components/PasswordInput.vue","../src/components/CircularProgress.vue","../src/components/CircularProgress.vue","../src/components/BaseStepper.vue","../src/components/BaseStepper.vue","../src/i18n/runtime.ts","../src/index.ts"],"sourcesContent":["import { addDays, fromDateKey } from './date'\nimport { formatDate } from './format'\n\n/** The two days worth naming rather than numbering. */\nexport interface DayLabels {\n today: string\n yesterday: string\n}\n\n/**\n * A short name for a day, relative to today.\n *\n * \"Today\" and \"Yesterday\" are worth spelling out — they are the two a user\n * actually reaches for. Anything older gets its weekday, which inside a\n * five-day window is unambiguous and stays two or three characters in every\n * language.\n *\n * The two words are arguments rather than translated here: a library that calls\n * `t()` forces every consumer onto one i18n setup.\n *\n * @param dateKey - The day to label (`YYYY-MM-DD`).\n * @param today - Today's key, passed in so the caller controls the clock.\n * @param labels - What to call today and yesterday.\n *\n * @example\n * ```ts\n * relativeDayLabel('2026-08-28', '2026-08-31', { today: 'Today', yesterday: 'Yesterday' })\n * // 'Fri'\n * ```\n */\nexport function relativeDayLabel(dateKey: string, today: string, labels: DayLabels): string {\n if (dateKey === today) return labels.today\n if (dateKey === addDays(today, -1)) return labels.yesterday\n\n return formatDate(fromDateKey(dateKey), { weekday: 'short' })\n}\n","/**\n * Hands the user a file without a server round trip.\n *\n * @param data - Anything `JSON.stringify` can serialise.\n * @param filename - Suggested name, e.g. `hibi-export-2026-08-24.json`.\n */\nexport function downloadJson(data: unknown, filename: string): void {\n const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })\n const url = URL.createObjectURL(blob)\n const link = document.createElement('a')\n\n link.href = url\n link.download = filename\n link.click()\n\n URL.revokeObjectURL(url)\n}\n","[\n {\n \"name\": \"rei\",\n \"label\": \"Rei\",\n \"origin\": \"rei-kit\",\n \"light\": {\n \"primary\": \"#26667f\",\n \"accent\": \"#124170\",\n \"positive\": \"#67c090\",\n \"negative\": \"#c7453a\",\n \"warning\": \"#d89a3e\",\n \"canvas\": \"#f4faf8\",\n \"surface\": \"#ffffff\",\n \"muted\": \"#ddf4e7\",\n \"ink\": \"#0f2229\",\n \"inkSoft\": \"#586f7b\",\n \"hair\": \"#e1edea\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#07141a\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#07141a\"\n },\n \"dark\": {\n \"primary\": \"#5fb0c9\",\n \"accent\": \"#8cb8e0\",\n \"positive\": \"#67c090\",\n \"negative\": \"#f07a6f\",\n \"warning\": \"#e6ad58\",\n \"canvas\": \"#07141a\",\n \"surface\": \"#102630\",\n \"muted\": \"#12303a\",\n \"ink\": \"#e6f0ee\",\n \"inkSoft\": \"#8fa8b2\",\n \"hair\": \"#1c3945\",\n \"onPrimary\": \"#07141a\",\n \"onAccent\": \"#07141a\",\n \"onPositive\": \"#07141a\",\n \"onNegative\": \"#07141a\",\n \"onWarning\": \"#07141a\"\n },\n \"swatch\": [\n \"#26667f\",\n \"#124170\",\n \"#67c090\",\n \"#d89a3e\"\n ]\n },\n {\n \"name\": \"nord\",\n \"label\": \"Nord\",\n \"origin\": \"Arctic Ice Studio\",\n \"light\": {\n \"primary\": \"#506e93\",\n \"accent\": \"#b48ead\",\n \"positive\": \"#a3be8c\",\n \"negative\": \"#a6545c\",\n \"warning\": \"#ebcb8b\",\n \"canvas\": \"#eceff4\",\n \"surface\": \"#ffffff\",\n \"muted\": \"#e5e9f0\",\n \"ink\": \"#2e3440\",\n \"inkSoft\": \"#4c566a\",\n \"hair\": \"#d8dee9\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#111111\",\n \"onPositive\": \"#2e3440\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#2e3440\"\n },\n \"dark\": {\n \"primary\": \"#88c0d0\",\n \"accent\": \"#b48ead\",\n \"positive\": \"#a3be8c\",\n \"negative\": \"#d89fa4\",\n \"warning\": \"#ebcb8b\",\n \"canvas\": \"#2e3440\",\n \"surface\": \"#3b4252\",\n \"muted\": \"#434c5e\",\n \"ink\": \"#eceff4\",\n \"inkSoft\": \"#d8dee9\",\n \"hair\": \"#4c566a\",\n \"onPrimary\": \"#2e3440\",\n \"onAccent\": \"#111111\",\n \"onPositive\": \"#2e3440\",\n \"onNegative\": \"#2e3440\",\n \"onWarning\": \"#2e3440\"\n },\n \"swatch\": [\n \"#506e93\",\n \"#b48ead\",\n \"#a3be8c\",\n \"#ebcb8b\"\n ]\n },\n {\n \"name\": \"dracula\",\n \"label\": \"Dracula\",\n \"origin\": \"Dracula Theme\",\n \"swatch\": [\n \"#bd93f9\",\n \"#ff79c6\",\n \"#50fa7b\",\n \"#282a36\"\n ],\n \"light\": {\n \"primary\": \"#644ac9\",\n \"accent\": \"#a3144d\",\n \"positive\": \"#14710a\",\n \"negative\": \"#cb3a2a\",\n \"warning\": \"#a34d14\",\n \"canvas\": \"#fffbeb\",\n \"surface\": \"#ffffff\",\n \"muted\": \"#f3eeda\",\n \"ink\": \"#1f1f1f\",\n \"inkSoft\": \"#635d4f\",\n \"hair\": \"#e6e0c8\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#ffffff\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#ffffff\"\n },\n \"dark\": {\n \"primary\": \"#bd93f9\",\n \"accent\": \"#ff79c6\",\n \"positive\": \"#50fa7b\",\n \"negative\": \"#ff5555\",\n \"warning\": \"#ffb86c\",\n \"canvas\": \"#21222c\",\n \"surface\": \"#282a36\",\n \"muted\": \"#343746\",\n \"ink\": \"#f8f8f2\",\n \"inkSoft\": \"#b6b9cf\",\n \"hair\": \"#44475a\",\n \"onPrimary\": \"#1f1f1f\",\n \"onAccent\": \"#1f1f1f\",\n \"onPositive\": \"#1f1f1f\",\n \"onNegative\": \"#1f1f1f\",\n \"onWarning\": \"#1f1f1f\"\n }\n },\n {\n \"name\": \"catppuccin\",\n \"label\": \"Catppuccin\",\n \"origin\": \"Catppuccin\",\n \"light\": {\n \"primary\": \"#8839ef\",\n \"accent\": \"#1e66f5\",\n \"positive\": \"#40a02b\",\n \"negative\": \"#d20f39\",\n \"warning\": \"#df8e1d\",\n \"canvas\": \"#eff1f5\",\n \"surface\": \"#ffffff\",\n \"muted\": \"#e6e9ef\",\n \"ink\": \"#4c4f69\",\n \"inkSoft\": \"#5c5f77\",\n \"hair\": \"#ccd0da\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#1e1e2e\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#1e1e2e\"\n },\n \"dark\": {\n \"primary\": \"#cba6f7\",\n \"accent\": \"#89b4fa\",\n \"positive\": \"#a6e3a1\",\n \"negative\": \"#f38ba8\",\n \"warning\": \"#f9e2af\",\n \"canvas\": \"#1e1e2e\",\n \"surface\": \"#24273a\",\n \"muted\": \"#313244\",\n \"ink\": \"#cdd6f4\",\n \"inkSoft\": \"#a6adc8\",\n \"hair\": \"#45475a\",\n \"onPrimary\": \"#1e1e2e\",\n \"onAccent\": \"#1e1e2e\",\n \"onPositive\": \"#1e1e2e\",\n \"onNegative\": \"#1e1e2e\",\n \"onWarning\": \"#1e1e2e\"\n },\n \"swatch\": [\n \"#8839ef\",\n \"#1e66f5\",\n \"#40a02b\",\n \"#df8e1d\"\n ]\n },\n {\n \"name\": \"solarized\",\n \"label\": \"Solarized\",\n \"origin\": \"Ethan Schoonover\",\n \"light\": {\n \"primary\": \"#2075b2\",\n \"accent\": \"#6a6fc0\",\n \"positive\": \"#859900\",\n \"negative\": \"#d5312e\",\n \"warning\": \"#b58900\",\n \"canvas\": \"#fdf6e3\",\n \"surface\": \"#fffcf3\",\n \"muted\": \"#eee8d5\",\n \"ink\": \"#073642\",\n \"inkSoft\": \"#566c73\",\n \"hair\": \"#e4dcc4\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#002b36\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#002b36\"\n },\n \"dark\": {\n \"primary\": \"#4b9fda\",\n \"accent\": \"#6a6fc0\",\n \"positive\": \"#859900\",\n \"negative\": \"#e87674\",\n \"warning\": \"#b58900\",\n \"canvas\": \"#002b36\",\n \"surface\": \"#073642\",\n \"muted\": \"#0b3f4c\",\n \"ink\": \"#eee8d5\",\n \"inkSoft\": \"#97a5a5\",\n \"hair\": \"#16505e\",\n \"onPrimary\": \"#002b36\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#002b36\",\n \"onNegative\": \"#002b36\",\n \"onWarning\": \"#002b36\"\n },\n \"swatch\": [\n \"#2075b2\",\n \"#6a6fc0\",\n \"#859900\",\n \"#b58900\"\n ]\n },\n {\n \"name\": \"gruvbox\",\n \"label\": \"Gruvbox\",\n \"origin\": \"morhetz\",\n \"light\": {\n \"primary\": \"#076678\",\n \"accent\": \"#8f3f71\",\n \"positive\": \"#79740e\",\n \"negative\": \"#9d0006\",\n \"warning\": \"#b57614\",\n \"canvas\": \"#fbf1c7\",\n \"surface\": \"#fdf7dd\",\n \"muted\": \"#ebdbb2\",\n \"ink\": \"#3c3836\",\n \"inkSoft\": \"#665c54\",\n \"hair\": \"#e2cfa4\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#ffffff\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#111111\"\n },\n \"dark\": {\n \"primary\": \"#83a598\",\n \"accent\": \"#d3869b\",\n \"positive\": \"#b8bb26\",\n \"negative\": \"#fc6857\",\n \"warning\": \"#fabd2f\",\n \"canvas\": \"#282828\",\n \"surface\": \"#32302f\",\n \"muted\": \"#3c3836\",\n \"ink\": \"#ebdbb2\",\n \"inkSoft\": \"#bdae93\",\n \"hair\": \"#504945\",\n \"onPrimary\": \"#282828\",\n \"onAccent\": \"#282828\",\n \"onPositive\": \"#282828\",\n \"onNegative\": \"#282828\",\n \"onWarning\": \"#282828\"\n },\n \"swatch\": [\n \"#076678\",\n \"#8f3f71\",\n \"#79740e\",\n \"#b57614\"\n ]\n },\n {\n \"name\": \"tokyo-night\",\n \"label\": \"Tokyo Night\",\n \"origin\": \"enkia\",\n \"swatch\": [\n \"#7aa2f7\",\n \"#bb9af7\",\n \"#9ece6a\",\n \"#1a1b26\"\n ],\n \"light\": {\n \"primary\": \"#2463b8\",\n \"accent\": \"#9351ea\",\n \"positive\": \"#587539\",\n \"negative\": \"#c0214f\",\n \"warning\": \"#8c6c3e\",\n \"canvas\": \"#e1e2e7\",\n \"surface\": \"#f5f5f8\",\n \"muted\": \"#d5d6db\",\n \"ink\": \"#2e51a3\",\n \"inkSoft\": \"#4d5b8c\",\n \"hair\": \"#c4c8da\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#ffffff\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#ffffff\"\n },\n \"dark\": {\n \"primary\": \"#7aa2f7\",\n \"accent\": \"#bb9af7\",\n \"positive\": \"#9ece6a\",\n \"negative\": \"#f7768e\",\n \"warning\": \"#e0af68\",\n \"canvas\": \"#16161e\",\n \"surface\": \"#1a1b26\",\n \"muted\": \"#292e42\",\n \"ink\": \"#c0caf5\",\n \"inkSoft\": \"#a9b1d6\",\n \"hair\": \"#2f3549\",\n \"onPrimary\": \"#16161e\",\n \"onAccent\": \"#16161e\",\n \"onPositive\": \"#16161e\",\n \"onNegative\": \"#16161e\",\n \"onWarning\": \"#16161e\"\n }\n },\n {\n \"name\": \"rose-pine\",\n \"label\": \"Rosé Pine\",\n \"origin\": \"Rosé Pine\",\n \"light\": {\n \"primary\": \"#286983\",\n \"accent\": \"#907aa9\",\n \"positive\": \"#56949f\",\n \"negative\": \"#a45a6f\",\n \"warning\": \"#ea9d34\",\n \"canvas\": \"#faf4ed\",\n \"surface\": \"#fffaf3\",\n \"muted\": \"#f2e9e1\",\n \"ink\": \"#575279\",\n \"inkSoft\": \"#6a6681\",\n \"hair\": \"#dfdad9\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#191724\",\n \"onPositive\": \"#191724\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#191724\"\n },\n \"dark\": {\n \"primary\": \"#9ccfd8\",\n \"accent\": \"#c4a7e7\",\n \"positive\": \"#31748f\",\n \"negative\": \"#eb6f92\",\n \"warning\": \"#f6c177\",\n \"canvas\": \"#191724\",\n \"surface\": \"#1f1d2e\",\n \"muted\": \"#26233a\",\n \"ink\": \"#e0def4\",\n \"inkSoft\": \"#908caa\",\n \"hair\": \"#403d52\",\n \"onPrimary\": \"#191724\",\n \"onAccent\": \"#191724\",\n \"onPositive\": \"#ffffff\",\n \"onNegative\": \"#191724\",\n \"onWarning\": \"#191724\"\n },\n \"swatch\": [\n \"#286983\",\n \"#907aa9\",\n \"#56949f\",\n \"#ea9d34\"\n ]\n },\n {\n \"name\": \"sakura\",\n \"label\": \"Sakura\",\n \"origin\": \"rei-kit\",\n \"light\": {\n \"primary\": \"#c2415d\",\n \"accent\": \"#7a3b4f\",\n \"positive\": \"#3f8f6a\",\n \"negative\": \"#c43d3d\",\n \"warning\": \"#c98a2a\",\n \"canvas\": \"#fdf6f7\",\n \"surface\": \"#ffffff\",\n \"muted\": \"#fbe4e8\",\n \"ink\": \"#2a1b1f\",\n \"inkSoft\": \"#6f5a5f\",\n \"hair\": \"#f0dde1\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#1a1013\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#1a1013\"\n },\n \"dark\": {\n \"primary\": \"#f08aa0\",\n \"accent\": \"#d7a1b3\",\n \"positive\": \"#6fc39a\",\n \"negative\": \"#f07a7a\",\n \"warning\": \"#e6b060\",\n \"canvas\": \"#1a1013\",\n \"surface\": \"#24171b\",\n \"muted\": \"#321f25\",\n \"ink\": \"#f6e8eb\",\n \"inkSoft\": \"#c3a9b0\",\n \"hair\": \"#3d2930\",\n \"onPrimary\": \"#1a1013\",\n \"onAccent\": \"#1a1013\",\n \"onPositive\": \"#1a1013\",\n \"onNegative\": \"#1a1013\",\n \"onWarning\": \"#1a1013\"\n },\n \"swatch\": [\n \"#c2415d\",\n \"#7a3b4f\",\n \"#3f8f6a\",\n \"#c98a2a\"\n ]\n },\n {\n \"name\": \"matcha\",\n \"label\": \"Matcha\",\n \"origin\": \"rei-kit\",\n \"light\": {\n \"primary\": \"#5a7a2e\",\n \"accent\": \"#3d5a3a\",\n \"positive\": \"#4a8a4f\",\n \"negative\": \"#b8473a\",\n \"warning\": \"#b8862c\",\n \"canvas\": \"#f6f7f0\",\n \"surface\": \"#ffffff\",\n \"muted\": \"#e7ecd6\",\n \"ink\": \"#1e2418\",\n \"inkSoft\": \"#5b6450\",\n \"hair\": \"#e1e6d3\",\n \"onPrimary\": \"#ffffff\",\n \"onAccent\": \"#ffffff\",\n \"onPositive\": \"#111111\",\n \"onNegative\": \"#ffffff\",\n \"onWarning\": \"#11140d\"\n },\n \"dark\": {\n \"primary\": \"#a8c77a\",\n \"accent\": \"#8fb58a\",\n \"positive\": \"#7cc281\",\n \"negative\": \"#e8826f\",\n \"warning\": \"#e0b35c\",\n \"canvas\": \"#11140d\",\n \"surface\": \"#191d13\",\n \"muted\": \"#242a1b\",\n \"ink\": \"#eef1e6\",\n \"inkSoft\": \"#aab39e\",\n \"hair\": \"#2e3525\",\n \"onPrimary\": \"#11140d\",\n \"onAccent\": \"#11140d\",\n \"onPositive\": \"#11140d\",\n \"onNegative\": \"#11140d\",\n \"onWarning\": \"#11140d\"\n },\n \"swatch\": [\n \"#5a7a2e\",\n \"#3d5a3a\",\n \"#4a8a4f\",\n \"#b8862c\"\n ]\n }\n]\n","import { ref, watch } from 'vue'\nimport type { Ref } from 'vue'\n\nimport generated from '../palettes/palettes.generated.json'\n\n/* ---------------------------------------------------------------------------\n Materials.\n\n How a surface is made — its fill, its edge, its depth — independent of what\n colour it is. The kit's own components never ask which one is active; they\n read the tokens, and the material redefines the tokens.\n --------------------------------------------------------------------------- */\n\nexport const MATERIALS = ['quiet', 'glass', 'brutal', 'soft'] as const\nexport type Material = (typeof MATERIALS)[number]\n\nexport function isMaterial(value: unknown): value is Material {\n return typeof value === 'string' && (MATERIALS as readonly string[]).includes(value)\n}\n\n/**\n * Switches the material for everything under `root`.\n *\n * `quiet` removes the attribute rather than writing it, because quiet is what\n * the tokens already are — there is nothing to override.\n *\n * Needs `rei-kit/materials.css` (or the one material file) imported after\n * `tokens.css`, or the attribute changes nothing.\n */\nexport function applyMaterial(material: Material, root?: HTMLElement): void {\n const el = root ?? (typeof document === 'undefined' ? undefined : document.documentElement)\n if (!el) return\n\n if (material === 'quiet') delete el.dataset['material']\n else el.dataset['material'] = material\n}\n\n/* ---------------------------------------------------------------------------\n Palettes.\n\n Generated from `src/palettes/palettes.source.json`, with the on-colours\n chosen by contrast and every text pairing measured against WCAG AA in both\n modes before a palette is allowed to ship.\n --------------------------------------------------------------------------- */\n\n/** The eleven colour roles plus the five on-colours, for one mode. */\nexport interface PaletteRoles {\n primary: string\n accent: string\n positive: string\n negative: string\n warning: string\n canvas: string\n surface: string\n muted: string\n ink: string\n inkSoft: string\n hair: string\n onPrimary: string\n onAccent: string\n onPositive: string\n onNegative: string\n onWarning: string\n}\n\nexport interface Palette {\n /** The value for `data-palette`. */\n name: string\n /** A display name. */\n label: string\n /** Who made it. Several are well-known open palettes, credited here. */\n origin: string\n /** Four colours for a picker to show at a glance. */\n swatch: readonly [string, string, string, string]\n light: PaletteRoles\n dark: PaletteRoles\n}\n\nexport const PALETTES = generated as unknown as readonly Palette[]\n\nexport type PaletteName = string\n\nexport function isPaletteName(value: unknown): value is PaletteName {\n return typeof value === 'string' && PALETTES.some((p) => p.name === value)\n}\n\n/**\n * Switches the palette for everything under `root`.\n *\n * `rei` is the tokens' own palette, so it removes the attribute. Needs\n * `rei-kit/palettes.css` imported after `tokens.css`.\n */\nexport function applyPalette(name: PaletteName, root?: HTMLElement): void {\n const el = root ?? (typeof document === 'undefined' ? undefined : document.documentElement)\n if (!el) return\n\n if (name === 'rei') delete el.dataset['palette']\n else el.dataset['palette'] = name\n}\n\n/* ---------------------------------------------------------------------------\n Persisted preferences.\n\n The same shape as `useTheme`: a module-level ref, so every caller shares one\n answer, written through to storage and applied on every change.\n --------------------------------------------------------------------------- */\n\nfunction stored<T extends string>(key: string, accept: (v: unknown) => v is T, fallback: T): T {\n try {\n const value = localStorage.getItem(key)\n return accept(value) ? value : fallback\n } catch {\n return fallback\n }\n}\n\nfunction store(key: string, value: string): void {\n try {\n localStorage.setItem(key, value)\n } catch {\n // Private mode or blocked storage: the choice just will not persist.\n }\n}\n\nlet materialKey = 'rei-material'\nlet materialRef: Ref<Material> | null = null\n\n/** Call once at startup, before `useMaterial`, to namespace the stored value. */\nexport function setMaterialStorageKey(key: string): void {\n materialKey = key\n if (materialRef) materialRef.value = stored(key, isMaterial, 'quiet')\n}\n\n/**\n * The active material, as a writable ref. Assigning it stores and applies it.\n *\n * @example\n * ```ts\n * const material = useMaterial()\n * material.value = 'glass'\n * ```\n */\nexport function useMaterial(): Ref<Material> {\n if (materialRef) return materialRef\n\n materialRef = ref<Material>(stored(materialKey, isMaterial, 'quiet'))\n watch(\n materialRef,\n (next) => {\n store(materialKey, next)\n applyMaterial(next)\n },\n { immediate: true },\n )\n\n return materialRef\n}\n\nlet paletteKey = 'rei-palette'\nlet paletteRef: Ref<PaletteName> | null = null\n\n/** Call once at startup, before `usePalette`, to namespace the stored value. */\nexport function setPaletteStorageKey(key: string): void {\n paletteKey = key\n if (paletteRef) paletteRef.value = stored(key, isPaletteName, 'rei')\n}\n\n/** The active palette's name, as a writable ref. Assigning it stores and applies it. */\nexport function usePalette(): Ref<PaletteName> {\n if (paletteRef) return paletteRef\n\n paletteRef = ref<PaletteName>(stored(paletteKey, isPaletteName, 'rei'))\n watch(\n paletteRef,\n (next) => {\n store(paletteKey, next)\n applyPalette(next)\n },\n { immediate: true },\n )\n\n return paletteRef\n}\n","import { readonly, ref } from 'vue'\n\nimport { todayKey } from '../utils/date'\n\n/**\n * Today's date key, kept current while the app stays open.\n *\n * `todayKey()` called once in `setup` freezes the date for the lifetime of the\n * component. Nobody notices in a session that lasts minutes, but a phone left\n * on the Today screen overnight would keep marking yesterday, and the Week grid\n * would disable the column that just became today.\n */\nconst current = ref(todayKey())\n\nlet timer: ReturnType<typeof setTimeout> | undefined\nlet watching = false\n\n/** A second past midnight, so a fast timer cannot fire on the old date. */\nfunction msUntilMidnight(): number {\n const now = new Date()\n const next = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 1)\n\n return next.getTime() - now.getTime()\n}\n\nfunction refresh() {\n current.value = todayKey()\n}\n\nfunction schedule() {\n clearTimeout(timer)\n timer = setTimeout(() => {\n refresh()\n schedule()\n }, msUntilMidnight())\n}\n\n/**\n * Starts the clock, once, and only where there is a clock to watch.\n *\n * This used to run at import time, which made the module impossible to load on\n * a server: `document` is not defined there, and a barrel export means one\n * `import { BaseButton } from 'rei-kit'` pulls this file in. Deferring it to\n * the first `useToday()` also means an app that never asks for today never\n * arms a timer.\n */\nfunction watchTheClock() {\n if (watching || typeof document === 'undefined') return\n\n watching = true\n schedule()\n\n // A sleeping phone does not run timers reliably, so the tab also re-checks\n // the moment it comes back — which is when the user would see a stale date.\n document.addEventListener('visibilitychange', () => {\n if (document.visibilityState !== 'visible') return\n\n refresh()\n schedule()\n })\n}\n\n/**\n * @returns Read-only ref holding today's `YYYY-MM-DD` key.\n *\n * Rendered on a server this is the *server's* today, which is a different day\n * from the visitor's either side of midnight. Anything prerendered from it\n * would hydrate to a different value; render it on the client.\n *\n * @example\n * ```ts\n * const today = useToday()\n * const isFuture = computed(() => day > today.value)\n * ```\n */\nexport function useToday() {\n watchTheClock()\n\n return readonly(current)\n}\n","import { onScopeDispose } from 'vue'\n\n/**\n * Delays a callback until the caller stops calling it.\n *\n * Used for note autosave: a request per keystroke would be wasteful, but losing\n * the last keystrokes when the user navigates away would be worse — so the\n * pending call is flushed on dispose, and `flush` is exposed for route guards.\n *\n * @param callback - Runs with the arguments of the most recent call.\n * @param delay - Quiet period in milliseconds.\n * @returns `run` to schedule, `flush` to run now, `cancel` to drop.\n *\n * @example\n * ```ts\n * const save = useDebouncedCallback((body: string) => mutate(body), 800)\n * watch(text, (value) => save.run(value))\n * onBeforeRouteLeave(() => save.flush())\n * ```\n */\nexport function useDebouncedCallback<A extends unknown[]>(\n callback: (...args: A) => void,\n delay = 800,\n) {\n let timer: ReturnType<typeof setTimeout> | null = null\n let pending: A | null = null\n\n /** Runs the pending call right now, if there is one. */\n function flush() {\n if (timer !== null) clearTimeout(timer)\n timer = null\n\n if (pending !== null) {\n const args = pending\n pending = null\n callback(...args)\n }\n }\n\n /** Drops the pending call without running it. */\n function cancel() {\n if (timer !== null) clearTimeout(timer)\n timer = null\n pending = null\n }\n\n function run(...args: A) {\n pending = args\n if (timer !== null) clearTimeout(timer)\n timer = setTimeout(flush, delay)\n }\n\n // A closing sheet or an unmounting view must not eat the last keystrokes.\n onScopeDispose(flush)\n\n return { run, flush, cancel }\n}\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\n/**\n * The person, in the corner where the account lives.\n *\n * ## Why the default is a glyph and not an initial\n *\n * An initial in a circle reads as a profile picture that failed to load, and it\n * says nothing at all to somebody who has never seen an avatar in that spot\n * before — which is most people, the first time. A drawn person says \"this is\n * you\" without knowing your name. So `fallback` defaults to the figure, and\n * initials are available for the places where the name is the point: a list of\n * members, a comment thread, anywhere several people appear at once and telling\n * them apart is the job.\n *\n * An image that fails is caught and falls back rather than leaving a broken\n * frame, because a missing avatar is normal and a broken image is an error.\n */\nconst {\n name = '',\n src = '',\n size = 'md',\n fallback = 'figure',\n label = '',\n} = defineProps<{\n /** Used for the initials and, failing a `label`, as the accessible name. */\n name?: string | undefined\n src?: string | undefined\n size?: 'sm' | 'md' | 'lg' | undefined\n fallback?: 'figure' | 'initials' | undefined\n /** Overrides the accessible name. For \"Your account\" rather than a person's name. */\n label?: string | undefined\n}>()\n\nconst broken = ref(false)\nwatch(\n () => src,\n () => (broken.value = false),\n)\n\nconst showImage = computed(() => Boolean(src) && !broken.value)\n\n/**\n * Two letters at most, from the first and last word.\n *\n * `Array.from` rather than `slice`, so a name written in a script outside the\n * basic plane is cut between characters rather than through one.\n */\nconst initials = computed(() => {\n const words = name.trim().split(/\\s+/).filter(Boolean)\n if (words.length === 0) return ''\n\n const first = Array.from(words[0]!)[0] ?? ''\n const last = words.length > 1 ? (Array.from(words[words.length - 1]!)[0] ?? '') : ''\n\n return (first + last).toUpperCase()\n})\n\nconst accessibleName = computed(() => label || name)\n</script>\n\n<template>\n <span\n class=\"rk-avatar\"\n :class=\"`is-${size}`\"\n :role=\"accessibleName ? 'img' : undefined\"\n :aria-label=\"accessibleName || undefined\"\n :aria-hidden=\"accessibleName ? undefined : 'true'\"\n >\n <img v-if=\"showImage\" :src=\"src\" alt=\"\" class=\"rk-avatar-img\" @error=\"broken = true\" />\n\n <span v-else-if=\"fallback === 'initials' && initials\" class=\"rk-avatar-initials\">\n {{ initials }}\n </span>\n\n <svg v-else viewBox=\"0 0 20 20\" class=\"rk-avatar-figure\" fill=\"none\" stroke=\"currentColor\">\n <circle cx=\"10\" cy=\"6.75\" r=\"3.25\" stroke-width=\"1.5\" />\n <path\n d=\"M3.75 17c0-3.05 2.8-5.25 6.25-5.25S16.25 13.95 16.25 17\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </span>\n</template>\n\n<style scoped>\n.rk-avatar {\n display: grid;\n place-items: center;\n flex-shrink: 0;\n overflow: hidden;\n border-radius: var(--radius-cell);\n border: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n background: var(--color-surface);\n color: var(--color-ink-soft);\n}\n\n.is-sm {\n width: 1.75rem;\n height: 1.75rem;\n}\n\n.is-md {\n width: 2.25rem;\n height: 2.25rem;\n}\n\n.is-lg {\n width: 3rem;\n height: 3rem;\n}\n\n.rk-avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.rk-avatar-initials {\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1;\n color: var(--color-ink);\n}\n\n.is-lg .rk-avatar-initials {\n font-size: 1rem;\n}\n\n.rk-avatar-figure {\n width: 65%;\n height: 65%;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\n/**\n * The person, in the corner where the account lives.\n *\n * ## Why the default is a glyph and not an initial\n *\n * An initial in a circle reads as a profile picture that failed to load, and it\n * says nothing at all to somebody who has never seen an avatar in that spot\n * before — which is most people, the first time. A drawn person says \"this is\n * you\" without knowing your name. So `fallback` defaults to the figure, and\n * initials are available for the places where the name is the point: a list of\n * members, a comment thread, anywhere several people appear at once and telling\n * them apart is the job.\n *\n * An image that fails is caught and falls back rather than leaving a broken\n * frame, because a missing avatar is normal and a broken image is an error.\n */\nconst {\n name = '',\n src = '',\n size = 'md',\n fallback = 'figure',\n label = '',\n} = defineProps<{\n /** Used for the initials and, failing a `label`, as the accessible name. */\n name?: string | undefined\n src?: string | undefined\n size?: 'sm' | 'md' | 'lg' | undefined\n fallback?: 'figure' | 'initials' | undefined\n /** Overrides the accessible name. For \"Your account\" rather than a person's name. */\n label?: string | undefined\n}>()\n\nconst broken = ref(false)\nwatch(\n () => src,\n () => (broken.value = false),\n)\n\nconst showImage = computed(() => Boolean(src) && !broken.value)\n\n/**\n * Two letters at most, from the first and last word.\n *\n * `Array.from` rather than `slice`, so a name written in a script outside the\n * basic plane is cut between characters rather than through one.\n */\nconst initials = computed(() => {\n const words = name.trim().split(/\\s+/).filter(Boolean)\n if (words.length === 0) return ''\n\n const first = Array.from(words[0]!)[0] ?? ''\n const last = words.length > 1 ? (Array.from(words[words.length - 1]!)[0] ?? '') : ''\n\n return (first + last).toUpperCase()\n})\n\nconst accessibleName = computed(() => label || name)\n</script>\n\n<template>\n <span\n class=\"rk-avatar\"\n :class=\"`is-${size}`\"\n :role=\"accessibleName ? 'img' : undefined\"\n :aria-label=\"accessibleName || undefined\"\n :aria-hidden=\"accessibleName ? undefined : 'true'\"\n >\n <img v-if=\"showImage\" :src=\"src\" alt=\"\" class=\"rk-avatar-img\" @error=\"broken = true\" />\n\n <span v-else-if=\"fallback === 'initials' && initials\" class=\"rk-avatar-initials\">\n {{ initials }}\n </span>\n\n <svg v-else viewBox=\"0 0 20 20\" class=\"rk-avatar-figure\" fill=\"none\" stroke=\"currentColor\">\n <circle cx=\"10\" cy=\"6.75\" r=\"3.25\" stroke-width=\"1.5\" />\n <path\n d=\"M3.75 17c0-3.05 2.8-5.25 6.25-5.25S16.25 13.95 16.25 17\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </span>\n</template>\n\n<style scoped>\n.rk-avatar {\n display: grid;\n place-items: center;\n flex-shrink: 0;\n overflow: hidden;\n border-radius: var(--radius-cell);\n border: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n background: var(--color-surface);\n color: var(--color-ink-soft);\n}\n\n.is-sm {\n width: 1.75rem;\n height: 1.75rem;\n}\n\n.is-md {\n width: 2.25rem;\n height: 2.25rem;\n}\n\n.is-lg {\n width: 3rem;\n height: 3rem;\n}\n\n.rk-avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.rk-avatar-initials {\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1;\n color: var(--color-ink);\n}\n\n.is-lg .rk-avatar-initials {\n font-size: 1rem;\n}\n\n.rk-avatar-figure {\n width: 65%;\n height: 65%;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A small standing label: a level, a state, a count.\n *\n * Not a button and never clickable — the moment one of these needs a click it\n * is a chip, which is a different component with focus, a hit area and a way\n * to be removed. Keeping that line drawn is most of the value.\n */\nconst { tone = 'neutral' } = defineProps<{\n tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined\n}>()\n\n/*\n * The role paints the ground and the edge; `ink` paints the words.\n *\n * These used to write the role on a tint of itself — `text-positive` on\n * `bg-positive/12` — which is the obvious way to build a coloured badge and\n * is unreadable by construction. A twelve per cent tint of a colour is\n * always close to that colour, so the pair measured 1.89:1 at worst across\n * the ten palettes and failed WCAG AA in twelve of the twenty\n * palette-and-mode combinations. Nothing caught it: the palette check\n * measures token against token and this ground is neither, and the jsdom\n * audit has contrast switched off because there is no layout to measure. A\n * real browser found it.\n *\n * `text-ink` on the same tint is 4.56:1 at worst, because a faint wash of\n * anything over a surface is still nearly that surface. The colour has not\n * gone anywhere — it is the ground and the border, which is what `BaseAlert`\n * already did, and a badge was the odd one out rather than the rule.\n */\nconst TONES = {\n neutral: 'border-hair bg-muted text-ink',\n primary: 'border-primary/30 bg-primary/10 text-ink',\n success: 'border-positive/35 bg-positive/12 text-ink',\n warning: 'border-warning/40 bg-warning/15 text-ink',\n danger: 'border-negative/35 bg-negative/12 text-ink',\n} as const\n\nconst skin = computed(() => TONES[tone])\n</script>\n\n<template>\n <span\n class=\"rounded-cell inline-flex items-center gap-1 border px-2.5 py-1 text-xs font-medium whitespace-nowrap\"\n :class=\"skin\"\n >\n <slot />\n </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A small standing label: a level, a state, a count.\n *\n * Not a button and never clickable — the moment one of these needs a click it\n * is a chip, which is a different component with focus, a hit area and a way\n * to be removed. Keeping that line drawn is most of the value.\n */\nconst { tone = 'neutral' } = defineProps<{\n tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined\n}>()\n\n/*\n * The role paints the ground and the edge; `ink` paints the words.\n *\n * These used to write the role on a tint of itself — `text-positive` on\n * `bg-positive/12` — which is the obvious way to build a coloured badge and\n * is unreadable by construction. A twelve per cent tint of a colour is\n * always close to that colour, so the pair measured 1.89:1 at worst across\n * the ten palettes and failed WCAG AA in twelve of the twenty\n * palette-and-mode combinations. Nothing caught it: the palette check\n * measures token against token and this ground is neither, and the jsdom\n * audit has contrast switched off because there is no layout to measure. A\n * real browser found it.\n *\n * `text-ink` on the same tint is 4.56:1 at worst, because a faint wash of\n * anything over a surface is still nearly that surface. The colour has not\n * gone anywhere — it is the ground and the border, which is what `BaseAlert`\n * already did, and a badge was the odd one out rather than the rule.\n */\nconst TONES = {\n neutral: 'border-hair bg-muted text-ink',\n primary: 'border-primary/30 bg-primary/10 text-ink',\n success: 'border-positive/35 bg-positive/12 text-ink',\n warning: 'border-warning/40 bg-warning/15 text-ink',\n danger: 'border-negative/35 bg-negative/12 text-ink',\n} as const\n\nconst skin = computed(() => TONES[tone])\n</script>\n\n<template>\n <span\n class=\"rounded-cell inline-flex items-center gap-1 border px-2.5 py-1 text-xs font-medium whitespace-nowrap\"\n :class=\"skin\"\n >\n <slot />\n </span>\n</template>\n","<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport { useAnchoredPanel } from '../composables/use-anchored-panel'\nimport { useMenuKeys } from '../composables/use-menu-keys'\n\n/**\n * A list of actions behind one control.\n *\n * ## `role=\"menu\"` is a promise\n *\n * Declaring it tells a screen reader that the arrow keys move between the\n * items, that Escape closes, and that Tab leaves rather than walking through.\n * A div with `role=\"menu\"` and none of that is worse than a plain list of\n * links: it announces a contract and then breaks it, and the reader is left\n * pressing keys that do nothing.\n *\n * The hand-written menu this replaces declared the role and had none of the\n * behaviour. That is the usual shape of the bug — the roles are the part people\n * remember, because they are the part you can see in the markup.\n *\n * It opens above its trigger when there is no room below — a menu button\n * near the bottom of a window is the common case, not the awkward one, and\n * the panel that ran off the screen still rendered, still passed axe, and\n * still had every item in it.\n *\n * So: focus moves into the menu on open and back to the trigger on close,\n * ArrowUp/ArrowDown move and wrap, Home and End jump, Escape closes, and a\n * click outside closes. Items are found in the DOM rather than declared as\n * data, so a caller can mix links, buttons and separators freely.\n *\n * @example\n * ```vue\n * <BaseMenu :label=\"t('nav.account')\">\n * <template #trigger=\"{ open }\">\n * <BaseAvatar :label=\"t('nav.account')\" />\n * </template>\n *\n * <RouterLink to=\"/profil\" role=\"menuitem\">{{ t('nav.profile') }}</RouterLink>\n * <button type=\"button\" role=\"menuitem\" @click=\"signOut\">{{ t('auth.signOut') }}</button>\n * </BaseMenu>\n * ```\n */\nconst { label, align = 'end' } = defineProps<{\n /** Accessible name for the trigger. Required: the trigger is usually a glyph. */\n label: string\n /** Which edge the panel lines up with. */\n align?: 'start' | 'end' | undefined\n}>()\n\ndefineSlots<{\n /** The control that opens it. Receives the open state for its own styling. */\n trigger?: (props: { open: boolean }) => unknown\n /** The items. Anything with `role=\"menuitem\"` joins the keyboard order. */\n default: () => unknown\n}>()\n\nconst open = defineModel<boolean>({ default: false })\n\nconst root = ref<HTMLElement | null>(null)\nconst panel = ref<HTMLElement | null>(null)\nconst trigger = ref<HTMLElement | null>(null)\n\nconst id = useId()\n\nconst { placed, shift } = useAnchoredPanel({ root, panel, open })\n\nconst { items: menuItems, onKeydown: onMenuKeydown } = useMenuKeys({\n panel,\n onClose: () => (open.value = false),\n})\n\nfunction onKeydown(event: KeyboardEvent) {\n if (!open.value) {\n // The arrows open the menu from the trigger, which is what makes it\n // reachable without a mouse in the first place.\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault()\n open.value = true\n }\n\n return\n }\n\n onMenuKeydown(event)\n}\n\nfunction onDocumentPointer(event: Event) {\n if (root.value && !root.value.contains(event.target as Node)) open.value = false\n}\n\n/* `immediate`, because a menu can be mounted already open -- a caller driving\n it from a route, or a test. Without it that menu has no outside-click\n listener and never moves focus, and nothing says so: it looks open and\n behaves like a div. The closed case is a no-op, since removing a listener\n that was never added is free and focus is only taken back from inside. */\nwatch(\n open,\n async (isOpen) => {\n if (typeof document === 'undefined') return\n\n if (isOpen) {\n document.addEventListener('pointerdown', onDocumentPointer)\n await nextTick()\n menuItems()[0]?.focus()\n } else {\n document.removeEventListener('pointerdown', onDocumentPointer)\n // Only take focus back if it is still inside the menu; otherwise the menu\n // is closing *because* the reader went somewhere else, and dragging them\n // back is the rudest thing it could do.\n if (root.value?.contains(document.activeElement)) trigger.value?.focus()\n }\n },\n { immediate: true },\n)\n\nonBeforeUnmount(() => {\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointerdown', onDocumentPointer)\n }\n})\n</script>\n\n<template>\n <div ref=\"root\" class=\"rk-menu\" @keydown=\"onKeydown\">\n <button\n ref=\"trigger\"\n type=\"button\"\n class=\"rk-menu-trigger\"\n :aria-label=\"label\"\n :aria-expanded=\"open\"\n :aria-haspopup=\"true\"\n :aria-controls=\"open ? id : undefined\"\n @click=\"open = !open\"\n >\n <slot name=\"trigger\" :open=\"open\" />\n </button>\n\n <div\n v-if=\"open\"\n :id=\"id\"\n ref=\"panel\"\n class=\"rk-menu-panel surface-overlay\"\n :class=\"[`is-${align}`, `is-${placed}`]\"\n :style=\"shift ? { '--rk-menu-shift': `${shift}px` } : undefined\"\n role=\"menu\"\n >\n <slot />\n </div>\n </div>\n</template>\n\n<style scoped>\n.rk-menu {\n position: relative;\n display: inline-flex;\n}\n\n.rk-menu-trigger {\n display: inline-flex;\n border-radius: var(--radius-cell);\n}\n\n.rk-menu-trigger:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-menu-panel {\n position: absolute;\n z-index: 50;\n /* The slide is a translate rather than an inset, so it composes with the\n `is-start`/`is-end` edge the caller asked for instead of replacing it. */\n transform: translateX(var(--rk-menu-shift, 0px));\n min-width: 12rem;\n overflow: hidden;\n border-radius: var(--radius-card);\n padding: 0.375rem;\n}\n\n.rk-menu-panel.is-bottom {\n top: calc(100% + 0.5rem);\n}\n\n.rk-menu-panel.is-top {\n bottom: calc(100% + 0.5rem);\n}\n\n.rk-menu-panel.is-end {\n inset-inline-end: 0;\n}\n\n.rk-menu-panel.is-start {\n inset-inline-start: 0;\n}\n\n/* The items belong to the caller, so this styles them by role rather than by\n class: whatever they render, it lines up. */\n.rk-menu-panel :deep([role='menuitem']) {\n display: block;\n width: 100%;\n border-radius: var(--radius-cell);\n padding: 0.5rem 0.75rem;\n text-align: start;\n font-size: 0.875rem;\n color: var(--color-ink);\n transition: background-color var(--duration-fast);\n}\n\n.rk-menu-panel :deep([role='menuitem']:hover) {\n background: var(--color-muted);\n}\n\n.rk-menu-panel :deep([role='menuitem']:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n.rk-menu-panel :deep(hr) {\n margin: 0.375rem 0;\n height: 1px;\n border: 0;\n background: color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport { useAnchoredPanel } from '../composables/use-anchored-panel'\nimport { useMenuKeys } from '../composables/use-menu-keys'\n\n/**\n * A list of actions behind one control.\n *\n * ## `role=\"menu\"` is a promise\n *\n * Declaring it tells a screen reader that the arrow keys move between the\n * items, that Escape closes, and that Tab leaves rather than walking through.\n * A div with `role=\"menu\"` and none of that is worse than a plain list of\n * links: it announces a contract and then breaks it, and the reader is left\n * pressing keys that do nothing.\n *\n * The hand-written menu this replaces declared the role and had none of the\n * behaviour. That is the usual shape of the bug — the roles are the part people\n * remember, because they are the part you can see in the markup.\n *\n * It opens above its trigger when there is no room below — a menu button\n * near the bottom of a window is the common case, not the awkward one, and\n * the panel that ran off the screen still rendered, still passed axe, and\n * still had every item in it.\n *\n * So: focus moves into the menu on open and back to the trigger on close,\n * ArrowUp/ArrowDown move and wrap, Home and End jump, Escape closes, and a\n * click outside closes. Items are found in the DOM rather than declared as\n * data, so a caller can mix links, buttons and separators freely.\n *\n * @example\n * ```vue\n * <BaseMenu :label=\"t('nav.account')\">\n * <template #trigger=\"{ open }\">\n * <BaseAvatar :label=\"t('nav.account')\" />\n * </template>\n *\n * <RouterLink to=\"/profil\" role=\"menuitem\">{{ t('nav.profile') }}</RouterLink>\n * <button type=\"button\" role=\"menuitem\" @click=\"signOut\">{{ t('auth.signOut') }}</button>\n * </BaseMenu>\n * ```\n */\nconst { label, align = 'end' } = defineProps<{\n /** Accessible name for the trigger. Required: the trigger is usually a glyph. */\n label: string\n /** Which edge the panel lines up with. */\n align?: 'start' | 'end' | undefined\n}>()\n\ndefineSlots<{\n /** The control that opens it. Receives the open state for its own styling. */\n trigger?: (props: { open: boolean }) => unknown\n /** The items. Anything with `role=\"menuitem\"` joins the keyboard order. */\n default: () => unknown\n}>()\n\nconst open = defineModel<boolean>({ default: false })\n\nconst root = ref<HTMLElement | null>(null)\nconst panel = ref<HTMLElement | null>(null)\nconst trigger = ref<HTMLElement | null>(null)\n\nconst id = useId()\n\nconst { placed, shift } = useAnchoredPanel({ root, panel, open })\n\nconst { items: menuItems, onKeydown: onMenuKeydown } = useMenuKeys({\n panel,\n onClose: () => (open.value = false),\n})\n\nfunction onKeydown(event: KeyboardEvent) {\n if (!open.value) {\n // The arrows open the menu from the trigger, which is what makes it\n // reachable without a mouse in the first place.\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault()\n open.value = true\n }\n\n return\n }\n\n onMenuKeydown(event)\n}\n\nfunction onDocumentPointer(event: Event) {\n if (root.value && !root.value.contains(event.target as Node)) open.value = false\n}\n\n/* `immediate`, because a menu can be mounted already open -- a caller driving\n it from a route, or a test. Without it that menu has no outside-click\n listener and never moves focus, and nothing says so: it looks open and\n behaves like a div. The closed case is a no-op, since removing a listener\n that was never added is free and focus is only taken back from inside. */\nwatch(\n open,\n async (isOpen) => {\n if (typeof document === 'undefined') return\n\n if (isOpen) {\n document.addEventListener('pointerdown', onDocumentPointer)\n await nextTick()\n menuItems()[0]?.focus()\n } else {\n document.removeEventListener('pointerdown', onDocumentPointer)\n // Only take focus back if it is still inside the menu; otherwise the menu\n // is closing *because* the reader went somewhere else, and dragging them\n // back is the rudest thing it could do.\n if (root.value?.contains(document.activeElement)) trigger.value?.focus()\n }\n },\n { immediate: true },\n)\n\nonBeforeUnmount(() => {\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointerdown', onDocumentPointer)\n }\n})\n</script>\n\n<template>\n <div ref=\"root\" class=\"rk-menu\" @keydown=\"onKeydown\">\n <button\n ref=\"trigger\"\n type=\"button\"\n class=\"rk-menu-trigger\"\n :aria-label=\"label\"\n :aria-expanded=\"open\"\n :aria-haspopup=\"true\"\n :aria-controls=\"open ? id : undefined\"\n @click=\"open = !open\"\n >\n <slot name=\"trigger\" :open=\"open\" />\n </button>\n\n <div\n v-if=\"open\"\n :id=\"id\"\n ref=\"panel\"\n class=\"rk-menu-panel surface-overlay\"\n :class=\"[`is-${align}`, `is-${placed}`]\"\n :style=\"shift ? { '--rk-menu-shift': `${shift}px` } : undefined\"\n role=\"menu\"\n >\n <slot />\n </div>\n </div>\n</template>\n\n<style scoped>\n.rk-menu {\n position: relative;\n display: inline-flex;\n}\n\n.rk-menu-trigger {\n display: inline-flex;\n border-radius: var(--radius-cell);\n}\n\n.rk-menu-trigger:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-menu-panel {\n position: absolute;\n z-index: 50;\n /* The slide is a translate rather than an inset, so it composes with the\n `is-start`/`is-end` edge the caller asked for instead of replacing it. */\n transform: translateX(var(--rk-menu-shift, 0px));\n min-width: 12rem;\n overflow: hidden;\n border-radius: var(--radius-card);\n padding: 0.375rem;\n}\n\n.rk-menu-panel.is-bottom {\n top: calc(100% + 0.5rem);\n}\n\n.rk-menu-panel.is-top {\n bottom: calc(100% + 0.5rem);\n}\n\n.rk-menu-panel.is-end {\n inset-inline-end: 0;\n}\n\n.rk-menu-panel.is-start {\n inset-inline-start: 0;\n}\n\n/* The items belong to the caller, so this styles them by role rather than by\n class: whatever they render, it lines up. */\n.rk-menu-panel :deep([role='menuitem']) {\n display: block;\n width: 100%;\n border-radius: var(--radius-cell);\n padding: 0.5rem 0.75rem;\n text-align: start;\n font-size: 0.875rem;\n color: var(--color-ink);\n transition: background-color var(--duration-fast);\n}\n\n.rk-menu-panel :deep([role='menuitem']:hover) {\n background: var(--color-muted);\n}\n\n.rk-menu-panel :deep([role='menuitem']:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n.rk-menu-panel :deep(hr) {\n margin: 0.375rem 0;\n height: 1px;\n border: 0;\n background: color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * A surface with a border, and optionally a head and a foot.\n *\n * Every app here had written this div. That is not a crisis on its own — it is\n * four classes — but it is four classes that were slightly different in each,\n * so a card on one screen had a heavier border than a card on the next and\n * nobody could say why.\n *\n * With no head and no foot there is no wrapper div: the padding lands on the\n * card itself and the card *is* the element. That matters more than a saved\n * node — most cards in the apps lay their contents out (`flex items-center\n * gap-4`, `flex flex-col gap-3`), and with a wrapper in the way those classes\n * reach the border and not the content, so the app has to add back the div\n * this component exists to remove. One that makes you do that is one you skip.\n *\n * `interactive` is for a card that is a link or a button: it adds the lift and\n * the press, and it is opt-in because a card holding a form should not move\n * when the pointer crosses it.\n */\nconst {\n interactive = false,\n as = 'div',\n padding = 'md',\n} = defineProps<{\n interactive?: boolean | undefined\n as?: string | undefined\n /**\n * How much room the card gives its contents.\n *\n * This component shipped with `px-5 py-4` baked in and was then used by\n * nobody, across three apps and thirty-five hand-written card surfaces —\n * which used `p-3` six times, `p-4` six times, `p-5` five times and `p-1`\n * four times, and not once the pair this insisted on. A card that fixes its\n * padding cannot be reached for, which is the same mistake `PageContainer`\n * made with its width and `size=\"sm\"` made with its height.\n *\n * `none` is for a card that holds a list: the rows own the padding, and the\n * dividers have to reach the border.\n */\n padding?: 'none' | 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst BODY = {\n none: '',\n sm: 'p-3',\n md: 'p-4',\n lg: 'p-5',\n} as const\n\n/* The head and the foot follow the body, so a card cannot be tight around its\n contents and loose around its title. */\nconst HEAD = {\n none: '',\n sm: 'px-3 py-2.5',\n md: 'px-4 py-3',\n lg: 'px-5 py-4',\n} as const\n</script>\n\n<template>\n <component\n :is=\"as\"\n class=\"surface rounded-card\"\n :class=\"[\n interactive\n ? 'ease-standard transition-[transform,box-shadow] duration-(--duration-slow) hover:-translate-y-0.5 hover:[--surface-shadow:var(--shadow-raised)] active:translate-y-0 active:[--surface-shadow:var(--shadow-card)]'\n : '',\n $slots.head || $slots.foot ? '' : BODY[padding],\n ]\"\n >\n <div v-if=\"$slots.head\" class=\"border-hair/70 border-b\" :class=\"HEAD[padding]\">\n <slot name=\"head\" />\n </div>\n\n <div v-if=\"$slots.head || $slots.foot\" :class=\"BODY[padding]\"><slot /></div>\n <slot v-else />\n\n <div v-if=\"$slots.foot\" class=\"border-hair/70 bg-muted/30 border-t\" :class=\"HEAD[padding]\">\n <slot name=\"foot\" />\n </div>\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * A surface with a border, and optionally a head and a foot.\n *\n * Every app here had written this div. That is not a crisis on its own — it is\n * four classes — but it is four classes that were slightly different in each,\n * so a card on one screen had a heavier border than a card on the next and\n * nobody could say why.\n *\n * With no head and no foot there is no wrapper div: the padding lands on the\n * card itself and the card *is* the element. That matters more than a saved\n * node — most cards in the apps lay their contents out (`flex items-center\n * gap-4`, `flex flex-col gap-3`), and with a wrapper in the way those classes\n * reach the border and not the content, so the app has to add back the div\n * this component exists to remove. One that makes you do that is one you skip.\n *\n * `interactive` is for a card that is a link or a button: it adds the lift and\n * the press, and it is opt-in because a card holding a form should not move\n * when the pointer crosses it.\n */\nconst {\n interactive = false,\n as = 'div',\n padding = 'md',\n} = defineProps<{\n interactive?: boolean | undefined\n as?: string | undefined\n /**\n * How much room the card gives its contents.\n *\n * This component shipped with `px-5 py-4` baked in and was then used by\n * nobody, across three apps and thirty-five hand-written card surfaces —\n * which used `p-3` six times, `p-4` six times, `p-5` five times and `p-1`\n * four times, and not once the pair this insisted on. A card that fixes its\n * padding cannot be reached for, which is the same mistake `PageContainer`\n * made with its width and `size=\"sm\"` made with its height.\n *\n * `none` is for a card that holds a list: the rows own the padding, and the\n * dividers have to reach the border.\n */\n padding?: 'none' | 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst BODY = {\n none: '',\n sm: 'p-3',\n md: 'p-4',\n lg: 'p-5',\n} as const\n\n/* The head and the foot follow the body, so a card cannot be tight around its\n contents and loose around its title. */\nconst HEAD = {\n none: '',\n sm: 'px-3 py-2.5',\n md: 'px-4 py-3',\n lg: 'px-5 py-4',\n} as const\n</script>\n\n<template>\n <component\n :is=\"as\"\n class=\"surface rounded-card\"\n :class=\"[\n interactive\n ? 'ease-standard transition-[transform,box-shadow] duration-(--duration-slow) hover:-translate-y-0.5 hover:[--surface-shadow:var(--shadow-raised)] active:translate-y-0 active:[--surface-shadow:var(--shadow-card)]'\n : '',\n $slots.head || $slots.foot ? '' : BODY[padding],\n ]\"\n >\n <div v-if=\"$slots.head\" class=\"border-hair/70 border-b\" :class=\"HEAD[padding]\">\n <slot name=\"head\" />\n </div>\n\n <div v-if=\"$slots.head || $slots.foot\" :class=\"BODY[padding]\"><slot /></div>\n <slot v-else />\n\n <div v-if=\"$slots.foot\" class=\"border-hair/70 bg-muted/30 border-t\" :class=\"HEAD[padding]\">\n <slot name=\"foot\" />\n </div>\n </component>\n</template>\n","import { computed, ref } from 'vue'\nimport type { Ref } from 'vue'\n\n/** Rows of slack each way, so a fast scroll does not show a gap before the\n * next frame fills it. */\nconst OVERSCAN_ROWS = 3\n\nexport interface VirtualWindowOptions {\n /** How many rows there are in total. */\n count: Ref<number>\n /** Every row is this tall, in pixels. Fixed — that is what makes the\n * arithmetic possible without measuring each one. */\n rowHeight: Ref<number>\n /**\n * Below this many rows the window is the whole list and the padding is\n * zero, so a short list renders exactly as it would without any of this.\n */\n threshold: Ref<number>\n}\n\n/**\n * The arithmetic behind a windowed list: which rows are near the viewport,\n * and how much empty space stands in for the rest.\n *\n * This is the part `BaseCombobox` and `VirtualList` share. It was written\n * inside the combobox first, and pulling it out here is the reason there is\n * one copy of it rather than two — the second would have drifted, and the\n * half that drifts silently is the padding, which is what keeps the\n * scrollbar honest about how long the list is.\n *\n * There is no clock and no observer in here: it is a function of the scroll\n * position, and the component that owns the element is what tells it where\n * that is. That is also what makes it testable without a layout.\n */\nexport function useVirtualWindow({ count, rowHeight, threshold }: VirtualWindowOptions) {\n /** How far down the list is scrolled. Set by the owner from a scroll event. */\n const scrollTop = ref(0)\n /** How tall the viewport is. Measured by the owner, never guessed here. */\n const viewportHeight = ref(0)\n\n const active = computed(() => count.value > threshold.value)\n\n const window_ = computed(() => {\n if (!active.value) return { start: 0, end: count.value }\n\n const first = Math.max(0, Math.floor(scrollTop.value / rowHeight.value) - OVERSCAN_ROWS)\n const rows = Math.ceil(viewportHeight.value / rowHeight.value) + OVERSCAN_ROWS * 2\n\n return { start: first, end: Math.min(count.value, first + rows) }\n })\n\n /** The empty space standing in for the rows above and below the window. */\n const padTop = computed(() => (active.value ? window_.value.start * rowHeight.value : 0))\n const padBottom = computed(() =>\n active.value ? (count.value - window_.value.end) * rowHeight.value : 0,\n )\n\n /** Takes the scroll position straight off the event the owner received. */\n function onScroll(event: Event) {\n scrollTop.value = (event.target as HTMLElement).scrollTop\n }\n\n return { active, window: window_, padTop, padBottom, scrollTop, viewportHeight, onScroll }\n}\n","<script setup lang=\"ts\" generic=\"V extends string, M extends 'single' | 'multiple' = 'single'\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport { useBoundValue } from '../composables/use-bound-value'\nimport { useAnchoredPanel } from '../composables/use-anchored-panel'\nimport { useVirtualWindow } from '../composables/use-virtual-window'\nimport BaseSkeleton from './BaseSkeleton.vue'\n\nexport interface ComboboxOption<V extends string> {\n value: V\n /** Already translated. */\n label: string\n}\n\n/**\n * A field you type into to narrow a list, then choose from it.\n *\n * ## When to reach for this instead of `BaseSelect`\n *\n * A native select is better up to a few dozen options: it uses the platform's\n * own picker, which on a phone is a wheel the reader already knows and which no\n * web control can match. This is for when the list is long enough that reading\n * it is the problem — a country, a currency, a course — and typing three\n * letters beats scrolling.\n *\n * ## What the pattern requires\n *\n * The ARIA combobox is prescribed down to which element owns which attribute,\n * and hand-written ones get the same three things wrong:\n *\n * - **`aria-activedescendant`, not focus.** Focus stays in the text field while\n * the arrows move a highlight through the list. Moving real focus into the\n * list means typing stops working, which is the entire point of the control.\n * - **`aria-expanded` on the input**, not the wrapper. A screen reader looks for\n * it on the element with `role=\"combobox\"`.\n * - **Escape closes before it clears.** One press shuts the list, a second\n * empties the field. Clearing on the first press throws away what was typed\n * when somebody only wanted the list out of the way.\n *\n * The highlighted option is scrolled into view, because a highlight below the\n * fold is a selection nobody can see.\n *\n * ## A list that comes from a server\n *\n * `@search` is the typed text, debounced — the kit holds the timer so every\n * app does not write the same one, and it is cancelled on unmount so a\n * request is never fired at a component that has gone. Set `filter=\"none\"`\n * alongside it: when the server has already narrowed the list, narrowing it\n * again here hides rows that matched for a reason the client cannot see.\n *\n * `loading` marks the list `aria-busy` while the answer is on its way, which\n * is the part that is heard. `loadingLabel` is the part that is read, and it\n * is optional for the same reason every other visible string here is a prop:\n * the kit has no language of its own.\n *\n * ## More than one answer\n *\n * `mode=\"multiple\"` keeps the chosen ones as chips in the field, and choosing\n * an option again takes it back off. Backspace on an empty field removes the\n * last one. The chips carry a remove button only when `removeLabel` is given,\n * because a button whose name the kit had to invent would be a button that\n * speaks a language the app does not.\n *\n * ## A list too long to render\n *\n * Past `virtualizeAfter` options only the rows near the viewport are in the\n * DOM, with a spacer above and below standing in for the rest. Every row\n * still states `aria-setsize` and `aria-posinset`, so what a screen reader\n * hears is the whole list — \"3 of 4000\" — rather than the window.\n */\nconst {\n modelValue = undefined,\n label,\n options,\n placeholder = '',\n hint = '',\n error = '',\n disabled = false,\n emptyLabel,\n mode = 'single' as M,\n removeLabel = undefined,\n loading = false,\n loadingLabel = '',\n filter = 'local',\n debounce = 200,\n virtualizeAfter = 150,\n rowHeight = 36,\n} = defineProps<{\n /** The chosen value, or values in `multiple` mode, with `v-model`. */\n modelValue?: Value | undefined\n label: string\n options: readonly ComboboxOption<V>[]\n placeholder?: string | undefined\n hint?: string | undefined\n error?: string | undefined\n disabled?: boolean | undefined\n /** Shown when nothing matches. Already translated. */\n emptyLabel: string\n /** `multiple` keeps the chosen ones as chips in the field. */\n mode?: M | undefined\n /** Names a chip's remove button. Without it, chips carry no button. */\n removeLabel?: ((label: string) => string) | undefined\n /** Marks the list busy while an answer is on its way. */\n loading?: boolean | undefined\n /** Read while `loading`. Already translated. */\n loadingLabel?: string | undefined\n /** `none` when the server has already narrowed the list. */\n filter?: 'local' | 'none' | undefined\n /** How long typing settles before `search`, in milliseconds. */\n debounce?: number | undefined\n /** Past this many options, only the rows near the viewport are rendered. */\n virtualizeAfter?: number | undefined\n /** A row's height in pixels; the virtual window is measured in these. */\n rowHeight?: number | undefined\n}>()\n\n/** Multiple always hands back an array; a single choice is the value or ''. */\ntype Value = M extends 'multiple' ? V[] : V | ''\n\n/* Declared by hand rather than with defineModel, which cannot both accept\n `undefined` and promise never to emit it -- and an app whose model is\n `ref('')` is exactly the one that breaks. See `use-bound-value.ts`. */\nconst emit = defineEmits<{\n 'update:modelValue': [value: Value]\n /** The typed text, once it has settled. For a list that lives on a server. */\n search: [query: string]\n}>()\n\nconst model = useBoundValue<Value>(\n () => modelValue as Value | undefined,\n (value) => emit('update:modelValue', value),\n)\n\nconst multiple = computed(() => mode === 'multiple')\n\n/** The chosen values, however many there are, as a plain array. */\nconst chosen = computed<V[]>(() => {\n const value = model.value as V | V[] | '' | undefined\n if (Array.isArray(value)) return value\n return value === undefined || value === '' ? [] : [value]\n})\n\nconst chosenOptions = computed(() =>\n chosen.value.map(\n (value) => options.find((option) => option.value === value) ?? { value, label: value },\n ),\n)\n\nconst id = useId()\nconst listId = `${id}-list`\nconst hintId = `${id}-hint`\nconst errorId = `${id}-error`\nconst optionId = (index: number) => `${id}-opt-${index}`\n\nconst open = ref(false)\nconst query = ref('')\nconst highlighted = ref(0)\nconst root = ref<HTMLElement | null>(null)\nconst list = ref<HTMLElement | null>(null)\n\n/* A field near the bottom of a form is where a combobox usually is — the\n last question before the button — so the list opens above it when that\n is where the room is. */\nconst { placed, shift } = useAnchoredPanel({ root, panel: list, open })\n\nconst single = computed(() => (multiple.value ? undefined : chosenOptions.value[0]))\n\n/**\n * What the input shows.\n *\n * In multiple mode it is always the query: the answers are the chips beside\n * it, and writing one of them into the field would mean deleting it to search\n * for the next.\n */\nconst text = computed({\n get: () => (multiple.value || open.value ? query.value : (single.value?.label ?? '')),\n set: (value: string) => {\n query.value = value\n open.value = true\n highlighted.value = 0\n announce(value)\n },\n})\n\nconst matches = computed(() => {\n const needle = query.value.trim().toLowerCase()\n // `none` is for a list the server has already narrowed: filtering again\n // here would hide rows that matched for a reason this side cannot see.\n if (filter === 'none' || !open.value || needle === '') return options\n\n return options.filter((option) => option.label.toLowerCase().includes(needle))\n})\n\nconst describedBy = computed(() => {\n if (error) return errorId\n if (hint) return hintId\n return undefined\n})\n\n/* ─── A list that comes from a server ─── */\n\nlet timer: ReturnType<typeof setTimeout> | undefined\n\nfunction announce(value: string) {\n if (timer) clearTimeout(timer)\n timer = setTimeout(() => emit('search', value.trim()), debounce)\n}\n\n/* ─── Virtualisation ─── */\n\n/* The windowing arithmetic lives in `useVirtualWindow`, which `VirtualList`\n shares: one copy, so the padding that keeps the scrollbar honest about\n the length of the list cannot drift between them. */\nconst {\n active: virtual,\n window: window_,\n padTop,\n padBottom,\n viewportHeight: viewport,\n onScroll,\n} = useVirtualWindow({\n count: computed(() => matches.value.length),\n rowHeight: computed(() => rowHeight),\n threshold: computed(() => virtualizeAfter),\n})\n\n/** How tall the list box is; read once it is open, and this until then. */\nviewport.value = 224\n\nconst rows = computed(() =>\n matches.value.slice(window_.value.start, window_.value.end).map((option, index) => ({\n option,\n /** The row's place in the whole list, not in the window. */\n index: window_.value.start + index,\n })),\n)\n\n/* ─── Choosing ─── */\n\nfunction choose(option: ComboboxOption<V> | undefined) {\n if (!option) return\n\n if (multiple.value) {\n const next = chosen.value.includes(option.value)\n ? chosen.value.filter((one) => one !== option.value)\n : [...chosen.value, option.value]\n\n model.value = next as Value\n // The field stays open: choosing several means choosing again.\n query.value = ''\n return\n }\n\n model.value = option.value as Value\n query.value = ''\n open.value = false\n}\n\nfunction remove(value: V) {\n if (!multiple.value) return\n model.value = chosen.value.filter((one) => one !== value) as Value\n}\n\nfunction move(delta: number) {\n const count = matches.value.length\n if (count === 0) return\n\n open.value = true\n highlighted.value = (highlighted.value + delta + count) % count\n void scrollHighlightIntoView()\n}\n\nasync function scrollHighlightIntoView() {\n await nextTick()\n\n // A virtual row may not be in the DOM at all, so the scroller is moved by\n // arithmetic rather than by asking an element that is not there.\n if (virtual.value && list.value) {\n const top = highlighted.value * rowHeight\n const bottom = top + rowHeight\n if (top < list.value.scrollTop) list.value.scrollTop = top\n else if (bottom > list.value.scrollTop + viewport.value) {\n list.value.scrollTop = bottom - viewport.value\n }\n return\n }\n\n // By position rather than by selector: `CSS.escape` does not exist in jsdom\n // or on a server, and the rows are the only children here -- the spacers\n // are rendered only in the virtual case, which returned above.\n const el = list.value?.children[highlighted.value] as HTMLElement | undefined\n // A highlight below the fold is a selection nobody can see. Feature-detected\n // rather than called: `scrollIntoView` is missing in jsdom and in more than\n // one embedded webview, and a keyboard that throws is worse than a list that\n // does not scroll.\n el?.scrollIntoView?.({ block: 'nearest' })\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault()\n move(1)\n break\n case 'ArrowUp':\n event.preventDefault()\n move(-1)\n break\n case 'Enter':\n if (!open.value) return\n event.preventDefault()\n choose(matches.value[highlighted.value])\n break\n case 'Backspace':\n // Only with nothing to delete in the field, or it would eat a letter\n // and a chip with the same press.\n if (multiple.value && query.value === '' && chosen.value.length > 0) {\n event.preventDefault()\n remove(chosen.value[chosen.value.length - 1]!)\n }\n break\n case 'Escape':\n // Close first, clear second. One press to get the list out of the way\n // without losing what was typed.\n event.preventDefault()\n if (open.value) {\n open.value = false\n query.value = ''\n } else if (!multiple.value) {\n model.value = '' as Value\n }\n break\n case 'Tab':\n open.value = false\n break\n }\n}\n\nfunction onDocumentPointer(event: Event) {\n if (root.value && !root.value.contains(event.target as Node)) {\n open.value = false\n query.value = ''\n }\n}\n\nwatch(\n open,\n async (isOpen) => {\n if (typeof document === 'undefined') return\n\n if (isOpen) {\n document.addEventListener('pointerdown', onDocumentPointer)\n await nextTick()\n // Measured, not assumed: the height is a CSS value an app may change.\n if (list.value) viewport.value = list.value.clientHeight || viewport.value\n } else document.removeEventListener('pointerdown', onDocumentPointer)\n },\n { immediate: true },\n)\n\n/* A shorter list can leave the highlight past its end. */\nwatch(matches, () => {\n if (highlighted.value >= matches.value.length) highlighted.value = 0\n})\n\nonBeforeUnmount(() => {\n if (timer) clearTimeout(timer)\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointerdown', onDocumentPointer)\n }\n})\n</script>\n\n<template>\n <div ref=\"root\" class=\"rk-combo\">\n <label :for=\"id\" class=\"rk-combo-label\">{{ label }}</label>\n\n <!-- With chips the whole box is the control, so it is the box that\n carries the `control` surface and the focus ring; the input inside\n it is plain text. Leaving `control` on the input drew a second\n field inside the first. -->\n <div class=\"rk-combo-field\" :class=\"multiple ? 'is-multiple control' : ''\">\n <span\n v-for=\"option in multiple ? chosenOptions : []\"\n :key=\"option.value\"\n class=\"rk-combo-chip\"\n >\n <span>{{ option.label }}</span>\n <button\n v-if=\"removeLabel\"\n type=\"button\"\n class=\"rk-combo-chip-x focus-ring\"\n :aria-label=\"removeLabel(option.label)\"\n :disabled=\"disabled\"\n @click=\"remove(option.value)\"\n >\n ×\n </button>\n </span>\n\n <input\n :id=\"id\"\n v-model=\"text\"\n type=\"text\"\n role=\"combobox\"\n class=\"rk-combo-input\"\n :class=\"{ control: !multiple }\"\n autocomplete=\"off\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-expanded=\"open\"\n :aria-controls=\"listId\"\n aria-autocomplete=\"list\"\n :aria-activedescendant=\"open ? optionId(highlighted) : undefined\"\n :aria-invalid=\"Boolean(error)\"\n :aria-describedby=\"describedBy\"\n @keydown=\"onKeydown\"\n @focus=\"open = true\"\n />\n\n <button\n type=\"button\"\n class=\"rk-combo-toggle\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :disabled=\"disabled\"\n @click=\"open = !open\"\n >\n ▾\n </button>\n </div>\n\n <ul\n v-show=\"open\"\n :id=\"listId\"\n ref=\"list\"\n role=\"listbox\"\n class=\"rk-combo-list surface-overlay\"\n :class=\"`is-${placed}`\"\n :style=\"shift ? { '--rk-combo-shift': `${shift}px` } : undefined\"\n :aria-label=\"label\"\n :aria-multiselectable=\"multiple ? true : undefined\"\n :aria-busy=\"loading ? true : undefined\"\n @scroll=\"onScroll\"\n >\n <li v-if=\"padTop > 0\" :style=\"{ height: `${padTop}px` }\" aria-hidden=\"true\" />\n\n <li\n v-for=\"row in rows\"\n :id=\"optionId(row.index)\"\n :key=\"row.option.value\"\n role=\"option\"\n class=\"rk-combo-option\"\n :class=\"{\n 'is-highlighted': row.index === highlighted,\n 'is-selected': chosen.includes(row.option.value),\n }\"\n :style=\"virtual ? { height: `${rowHeight}px` } : undefined\"\n :aria-selected=\"chosen.includes(row.option.value)\"\n :aria-setsize=\"matches.length\"\n :aria-posinset=\"row.index + 1\"\n @pointerdown.prevent=\"choose(row.option)\"\n @pointermove=\"highlighted = row.index\"\n >\n {{ row.option.label }}\n </li>\n\n <li v-if=\"padBottom > 0\" :style=\"{ height: `${padBottom}px` }\" aria-hidden=\"true\" />\n\n <!-- Rows in the shape of the rows that are coming, rather than a\n spinner: the list keeps its height, so the page under it does not\n jump when the answer lands. The list says `aria-busy`, which is\n what is heard; `loadingLabel` is what is read, when given. -->\n <li v-if=\"loading\" class=\"rk-combo-status\">\n <span v-if=\"loadingLabel\">{{ loadingLabel }}</span>\n <span class=\"rk-combo-status-rows\" aria-hidden=\"true\">\n <BaseSkeleton v-for=\"n in 3\" :key=\"n\" shape=\"text\" height=\"0.75rem\" />\n </span>\n </li>\n\n <li v-else-if=\"matches.length === 0\" class=\"rk-combo-empty\">{{ emptyLabel }}</li>\n </ul>\n\n <p v-if=\"error\" :id=\"errorId\" class=\"rk-combo-error\">{{ error }}</p>\n <p v-else-if=\"hint\" :id=\"hintId\" class=\"rk-combo-hint\">{{ hint }}</p>\n </div>\n</template>\n\n<style scoped>\n.rk-combo {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n}\n\n.rk-combo-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-combo-field {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n/* With chips the field is a box that wraps, and the input is one item in it\n that grows into whatever is left. */\n.rk-combo-field.is-multiple {\n flex-wrap: wrap;\n gap: 0.25rem;\n min-height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0.3125rem 2rem 0.3125rem 0.375rem;\n}\n\n.rk-combo-chip {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n border-radius: 9999px;\n background: var(--color-muted);\n padding: 0.125rem 0.25rem 0.125rem 0.5rem;\n font-size: 0.8125rem;\n color: var(--color-ink);\n}\n\n.rk-combo-chip-x {\n display: grid;\n width: 1.125rem;\n height: 1.125rem;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink-soft);\n line-height: 1;\n}\n\n.rk-combo-chip-x:hover {\n color: var(--color-ink);\n}\n\n/* 16px, like every other text control here: iOS zooms the viewport when it\n focuses a field under 16px and never zooms back. */\n.rk-combo-input {\n width: 100%;\n height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0 2rem 0 0.75rem;\n font-size: 1rem;\n color: var(--color-ink);\n}\n\n.is-multiple .rk-combo-input {\n width: auto;\n height: 1.75rem;\n min-width: 6rem;\n flex: 1;\n border: 0;\n border-radius: 0;\n padding: 0;\n background: transparent;\n box-shadow: none;\n}\n\n.rk-combo-input:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -1px;\n}\n\n.is-multiple .rk-combo-input:focus-visible {\n outline: none;\n}\n\n/* The ring belongs to the whole box once the box is the control. */\n.rk-combo-field.is-multiple:focus-within {\n outline: 2px solid var(--color-primary);\n outline-offset: -1px;\n}\n\n.rk-combo-input:disabled {\n opacity: 0.5;\n}\n\n.rk-combo-toggle {\n position: absolute;\n inset-inline-end: 0.5rem;\n color: var(--color-ink-soft);\n font-size: 0.75rem;\n}\n\n.rk-combo-list {\n position: absolute;\n z-index: 50;\n transform: translateX(var(--rk-combo-shift, 0px));\n max-height: 14rem;\n width: 100%;\n overflow-y: auto;\n border-radius: var(--radius-card);\n padding: 0.25rem;\n}\n\n.rk-combo-list.is-bottom {\n top: calc(100% - 1.25rem);\n}\n\n.rk-combo-list.is-top {\n bottom: calc(100% - 1.25rem);\n}\n\n.rk-combo-option {\n cursor: pointer;\n border-radius: var(--radius-cell);\n padding: 0.5rem 0.625rem;\n font-size: 0.875rem;\n color: var(--color-ink);\n}\n\n/* A virtual row's height is the arithmetic the spacers are built on, so it\n cannot be left to the text inside it. */\n.rk-combo-option[style] {\n display: flex;\n align-items: center;\n padding-block: 0;\n}\n\n.rk-combo-option.is-highlighted {\n background: var(--color-muted);\n}\n\n.rk-combo-option.is-selected {\n font-weight: 600;\n}\n\n.rk-combo-empty,\n.rk-combo-status {\n padding: 0.75rem 0.625rem;\n font-size: 0.875rem;\n color: var(--color-ink-soft);\n}\n\n.rk-combo-status {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-combo-status-rows {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-combo-error {\n font-size: 0.75rem;\n color: var(--color-negative);\n}\n\n.rk-combo-hint {\n font-size: 0.75rem;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\" generic=\"V extends string, M extends 'single' | 'multiple' = 'single'\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport { useBoundValue } from '../composables/use-bound-value'\nimport { useAnchoredPanel } from '../composables/use-anchored-panel'\nimport { useVirtualWindow } from '../composables/use-virtual-window'\nimport BaseSkeleton from './BaseSkeleton.vue'\n\nexport interface ComboboxOption<V extends string> {\n value: V\n /** Already translated. */\n label: string\n}\n\n/**\n * A field you type into to narrow a list, then choose from it.\n *\n * ## When to reach for this instead of `BaseSelect`\n *\n * A native select is better up to a few dozen options: it uses the platform's\n * own picker, which on a phone is a wheel the reader already knows and which no\n * web control can match. This is for when the list is long enough that reading\n * it is the problem — a country, a currency, a course — and typing three\n * letters beats scrolling.\n *\n * ## What the pattern requires\n *\n * The ARIA combobox is prescribed down to which element owns which attribute,\n * and hand-written ones get the same three things wrong:\n *\n * - **`aria-activedescendant`, not focus.** Focus stays in the text field while\n * the arrows move a highlight through the list. Moving real focus into the\n * list means typing stops working, which is the entire point of the control.\n * - **`aria-expanded` on the input**, not the wrapper. A screen reader looks for\n * it on the element with `role=\"combobox\"`.\n * - **Escape closes before it clears.** One press shuts the list, a second\n * empties the field. Clearing on the first press throws away what was typed\n * when somebody only wanted the list out of the way.\n *\n * The highlighted option is scrolled into view, because a highlight below the\n * fold is a selection nobody can see.\n *\n * ## A list that comes from a server\n *\n * `@search` is the typed text, debounced — the kit holds the timer so every\n * app does not write the same one, and it is cancelled on unmount so a\n * request is never fired at a component that has gone. Set `filter=\"none\"`\n * alongside it: when the server has already narrowed the list, narrowing it\n * again here hides rows that matched for a reason the client cannot see.\n *\n * `loading` marks the list `aria-busy` while the answer is on its way, which\n * is the part that is heard. `loadingLabel` is the part that is read, and it\n * is optional for the same reason every other visible string here is a prop:\n * the kit has no language of its own.\n *\n * ## More than one answer\n *\n * `mode=\"multiple\"` keeps the chosen ones as chips in the field, and choosing\n * an option again takes it back off. Backspace on an empty field removes the\n * last one. The chips carry a remove button only when `removeLabel` is given,\n * because a button whose name the kit had to invent would be a button that\n * speaks a language the app does not.\n *\n * ## A list too long to render\n *\n * Past `virtualizeAfter` options only the rows near the viewport are in the\n * DOM, with a spacer above and below standing in for the rest. Every row\n * still states `aria-setsize` and `aria-posinset`, so what a screen reader\n * hears is the whole list — \"3 of 4000\" — rather than the window.\n */\nconst {\n modelValue = undefined,\n label,\n options,\n placeholder = '',\n hint = '',\n error = '',\n disabled = false,\n emptyLabel,\n mode = 'single' as M,\n removeLabel = undefined,\n loading = false,\n loadingLabel = '',\n filter = 'local',\n debounce = 200,\n virtualizeAfter = 150,\n rowHeight = 36,\n} = defineProps<{\n /** The chosen value, or values in `multiple` mode, with `v-model`. */\n modelValue?: Value | undefined\n label: string\n options: readonly ComboboxOption<V>[]\n placeholder?: string | undefined\n hint?: string | undefined\n error?: string | undefined\n disabled?: boolean | undefined\n /** Shown when nothing matches. Already translated. */\n emptyLabel: string\n /** `multiple` keeps the chosen ones as chips in the field. */\n mode?: M | undefined\n /** Names a chip's remove button. Without it, chips carry no button. */\n removeLabel?: ((label: string) => string) | undefined\n /** Marks the list busy while an answer is on its way. */\n loading?: boolean | undefined\n /** Read while `loading`. Already translated. */\n loadingLabel?: string | undefined\n /** `none` when the server has already narrowed the list. */\n filter?: 'local' | 'none' | undefined\n /** How long typing settles before `search`, in milliseconds. */\n debounce?: number | undefined\n /** Past this many options, only the rows near the viewport are rendered. */\n virtualizeAfter?: number | undefined\n /** A row's height in pixels; the virtual window is measured in these. */\n rowHeight?: number | undefined\n}>()\n\n/** Multiple always hands back an array; a single choice is the value or ''. */\ntype Value = M extends 'multiple' ? V[] : V | ''\n\n/* Declared by hand rather than with defineModel, which cannot both accept\n `undefined` and promise never to emit it -- and an app whose model is\n `ref('')` is exactly the one that breaks. See `use-bound-value.ts`. */\nconst emit = defineEmits<{\n 'update:modelValue': [value: Value]\n /** The typed text, once it has settled. For a list that lives on a server. */\n search: [query: string]\n}>()\n\nconst model = useBoundValue<Value>(\n () => modelValue as Value | undefined,\n (value) => emit('update:modelValue', value),\n)\n\nconst multiple = computed(() => mode === 'multiple')\n\n/** The chosen values, however many there are, as a plain array. */\nconst chosen = computed<V[]>(() => {\n const value = model.value as V | V[] | '' | undefined\n if (Array.isArray(value)) return value\n return value === undefined || value === '' ? [] : [value]\n})\n\nconst chosenOptions = computed(() =>\n chosen.value.map(\n (value) => options.find((option) => option.value === value) ?? { value, label: value },\n ),\n)\n\nconst id = useId()\nconst listId = `${id}-list`\nconst hintId = `${id}-hint`\nconst errorId = `${id}-error`\nconst optionId = (index: number) => `${id}-opt-${index}`\n\nconst open = ref(false)\nconst query = ref('')\nconst highlighted = ref(0)\nconst root = ref<HTMLElement | null>(null)\nconst list = ref<HTMLElement | null>(null)\n\n/* A field near the bottom of a form is where a combobox usually is — the\n last question before the button — so the list opens above it when that\n is where the room is. */\nconst { placed, shift } = useAnchoredPanel({ root, panel: list, open })\n\nconst single = computed(() => (multiple.value ? undefined : chosenOptions.value[0]))\n\n/**\n * What the input shows.\n *\n * In multiple mode it is always the query: the answers are the chips beside\n * it, and writing one of them into the field would mean deleting it to search\n * for the next.\n */\nconst text = computed({\n get: () => (multiple.value || open.value ? query.value : (single.value?.label ?? '')),\n set: (value: string) => {\n query.value = value\n open.value = true\n highlighted.value = 0\n announce(value)\n },\n})\n\nconst matches = computed(() => {\n const needle = query.value.trim().toLowerCase()\n // `none` is for a list the server has already narrowed: filtering again\n // here would hide rows that matched for a reason this side cannot see.\n if (filter === 'none' || !open.value || needle === '') return options\n\n return options.filter((option) => option.label.toLowerCase().includes(needle))\n})\n\nconst describedBy = computed(() => {\n if (error) return errorId\n if (hint) return hintId\n return undefined\n})\n\n/* ─── A list that comes from a server ─── */\n\nlet timer: ReturnType<typeof setTimeout> | undefined\n\nfunction announce(value: string) {\n if (timer) clearTimeout(timer)\n timer = setTimeout(() => emit('search', value.trim()), debounce)\n}\n\n/* ─── Virtualisation ─── */\n\n/* The windowing arithmetic lives in `useVirtualWindow`, which `VirtualList`\n shares: one copy, so the padding that keeps the scrollbar honest about\n the length of the list cannot drift between them. */\nconst {\n active: virtual,\n window: window_,\n padTop,\n padBottom,\n viewportHeight: viewport,\n onScroll,\n} = useVirtualWindow({\n count: computed(() => matches.value.length),\n rowHeight: computed(() => rowHeight),\n threshold: computed(() => virtualizeAfter),\n})\n\n/** How tall the list box is; read once it is open, and this until then. */\nviewport.value = 224\n\nconst rows = computed(() =>\n matches.value.slice(window_.value.start, window_.value.end).map((option, index) => ({\n option,\n /** The row's place in the whole list, not in the window. */\n index: window_.value.start + index,\n })),\n)\n\n/* ─── Choosing ─── */\n\nfunction choose(option: ComboboxOption<V> | undefined) {\n if (!option) return\n\n if (multiple.value) {\n const next = chosen.value.includes(option.value)\n ? chosen.value.filter((one) => one !== option.value)\n : [...chosen.value, option.value]\n\n model.value = next as Value\n // The field stays open: choosing several means choosing again.\n query.value = ''\n return\n }\n\n model.value = option.value as Value\n query.value = ''\n open.value = false\n}\n\nfunction remove(value: V) {\n if (!multiple.value) return\n model.value = chosen.value.filter((one) => one !== value) as Value\n}\n\nfunction move(delta: number) {\n const count = matches.value.length\n if (count === 0) return\n\n open.value = true\n highlighted.value = (highlighted.value + delta + count) % count\n void scrollHighlightIntoView()\n}\n\nasync function scrollHighlightIntoView() {\n await nextTick()\n\n // A virtual row may not be in the DOM at all, so the scroller is moved by\n // arithmetic rather than by asking an element that is not there.\n if (virtual.value && list.value) {\n const top = highlighted.value * rowHeight\n const bottom = top + rowHeight\n if (top < list.value.scrollTop) list.value.scrollTop = top\n else if (bottom > list.value.scrollTop + viewport.value) {\n list.value.scrollTop = bottom - viewport.value\n }\n return\n }\n\n // By position rather than by selector: `CSS.escape` does not exist in jsdom\n // or on a server, and the rows are the only children here -- the spacers\n // are rendered only in the virtual case, which returned above.\n const el = list.value?.children[highlighted.value] as HTMLElement | undefined\n // A highlight below the fold is a selection nobody can see. Feature-detected\n // rather than called: `scrollIntoView` is missing in jsdom and in more than\n // one embedded webview, and a keyboard that throws is worse than a list that\n // does not scroll.\n el?.scrollIntoView?.({ block: 'nearest' })\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault()\n move(1)\n break\n case 'ArrowUp':\n event.preventDefault()\n move(-1)\n break\n case 'Enter':\n if (!open.value) return\n event.preventDefault()\n choose(matches.value[highlighted.value])\n break\n case 'Backspace':\n // Only with nothing to delete in the field, or it would eat a letter\n // and a chip with the same press.\n if (multiple.value && query.value === '' && chosen.value.length > 0) {\n event.preventDefault()\n remove(chosen.value[chosen.value.length - 1]!)\n }\n break\n case 'Escape':\n // Close first, clear second. One press to get the list out of the way\n // without losing what was typed.\n event.preventDefault()\n if (open.value) {\n open.value = false\n query.value = ''\n } else if (!multiple.value) {\n model.value = '' as Value\n }\n break\n case 'Tab':\n open.value = false\n break\n }\n}\n\nfunction onDocumentPointer(event: Event) {\n if (root.value && !root.value.contains(event.target as Node)) {\n open.value = false\n query.value = ''\n }\n}\n\nwatch(\n open,\n async (isOpen) => {\n if (typeof document === 'undefined') return\n\n if (isOpen) {\n document.addEventListener('pointerdown', onDocumentPointer)\n await nextTick()\n // Measured, not assumed: the height is a CSS value an app may change.\n if (list.value) viewport.value = list.value.clientHeight || viewport.value\n } else document.removeEventListener('pointerdown', onDocumentPointer)\n },\n { immediate: true },\n)\n\n/* A shorter list can leave the highlight past its end. */\nwatch(matches, () => {\n if (highlighted.value >= matches.value.length) highlighted.value = 0\n})\n\nonBeforeUnmount(() => {\n if (timer) clearTimeout(timer)\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointerdown', onDocumentPointer)\n }\n})\n</script>\n\n<template>\n <div ref=\"root\" class=\"rk-combo\">\n <label :for=\"id\" class=\"rk-combo-label\">{{ label }}</label>\n\n <!-- With chips the whole box is the control, so it is the box that\n carries the `control` surface and the focus ring; the input inside\n it is plain text. Leaving `control` on the input drew a second\n field inside the first. -->\n <div class=\"rk-combo-field\" :class=\"multiple ? 'is-multiple control' : ''\">\n <span\n v-for=\"option in multiple ? chosenOptions : []\"\n :key=\"option.value\"\n class=\"rk-combo-chip\"\n >\n <span>{{ option.label }}</span>\n <button\n v-if=\"removeLabel\"\n type=\"button\"\n class=\"rk-combo-chip-x focus-ring\"\n :aria-label=\"removeLabel(option.label)\"\n :disabled=\"disabled\"\n @click=\"remove(option.value)\"\n >\n ×\n </button>\n </span>\n\n <input\n :id=\"id\"\n v-model=\"text\"\n type=\"text\"\n role=\"combobox\"\n class=\"rk-combo-input\"\n :class=\"{ control: !multiple }\"\n autocomplete=\"off\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-expanded=\"open\"\n :aria-controls=\"listId\"\n aria-autocomplete=\"list\"\n :aria-activedescendant=\"open ? optionId(highlighted) : undefined\"\n :aria-invalid=\"Boolean(error)\"\n :aria-describedby=\"describedBy\"\n @keydown=\"onKeydown\"\n @focus=\"open = true\"\n />\n\n <button\n type=\"button\"\n class=\"rk-combo-toggle\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :disabled=\"disabled\"\n @click=\"open = !open\"\n >\n ▾\n </button>\n </div>\n\n <ul\n v-show=\"open\"\n :id=\"listId\"\n ref=\"list\"\n role=\"listbox\"\n class=\"rk-combo-list surface-overlay\"\n :class=\"`is-${placed}`\"\n :style=\"shift ? { '--rk-combo-shift': `${shift}px` } : undefined\"\n :aria-label=\"label\"\n :aria-multiselectable=\"multiple ? true : undefined\"\n :aria-busy=\"loading ? true : undefined\"\n @scroll=\"onScroll\"\n >\n <li v-if=\"padTop > 0\" :style=\"{ height: `${padTop}px` }\" aria-hidden=\"true\" />\n\n <li\n v-for=\"row in rows\"\n :id=\"optionId(row.index)\"\n :key=\"row.option.value\"\n role=\"option\"\n class=\"rk-combo-option\"\n :class=\"{\n 'is-highlighted': row.index === highlighted,\n 'is-selected': chosen.includes(row.option.value),\n }\"\n :style=\"virtual ? { height: `${rowHeight}px` } : undefined\"\n :aria-selected=\"chosen.includes(row.option.value)\"\n :aria-setsize=\"matches.length\"\n :aria-posinset=\"row.index + 1\"\n @pointerdown.prevent=\"choose(row.option)\"\n @pointermove=\"highlighted = row.index\"\n >\n {{ row.option.label }}\n </li>\n\n <li v-if=\"padBottom > 0\" :style=\"{ height: `${padBottom}px` }\" aria-hidden=\"true\" />\n\n <!-- Rows in the shape of the rows that are coming, rather than a\n spinner: the list keeps its height, so the page under it does not\n jump when the answer lands. The list says `aria-busy`, which is\n what is heard; `loadingLabel` is what is read, when given. -->\n <li v-if=\"loading\" class=\"rk-combo-status\">\n <span v-if=\"loadingLabel\">{{ loadingLabel }}</span>\n <span class=\"rk-combo-status-rows\" aria-hidden=\"true\">\n <BaseSkeleton v-for=\"n in 3\" :key=\"n\" shape=\"text\" height=\"0.75rem\" />\n </span>\n </li>\n\n <li v-else-if=\"matches.length === 0\" class=\"rk-combo-empty\">{{ emptyLabel }}</li>\n </ul>\n\n <p v-if=\"error\" :id=\"errorId\" class=\"rk-combo-error\">{{ error }}</p>\n <p v-else-if=\"hint\" :id=\"hintId\" class=\"rk-combo-hint\">{{ hint }}</p>\n </div>\n</template>\n\n<style scoped>\n.rk-combo {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n}\n\n.rk-combo-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-combo-field {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n/* With chips the field is a box that wraps, and the input is one item in it\n that grows into whatever is left. */\n.rk-combo-field.is-multiple {\n flex-wrap: wrap;\n gap: 0.25rem;\n min-height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0.3125rem 2rem 0.3125rem 0.375rem;\n}\n\n.rk-combo-chip {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n border-radius: 9999px;\n background: var(--color-muted);\n padding: 0.125rem 0.25rem 0.125rem 0.5rem;\n font-size: 0.8125rem;\n color: var(--color-ink);\n}\n\n.rk-combo-chip-x {\n display: grid;\n width: 1.125rem;\n height: 1.125rem;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink-soft);\n line-height: 1;\n}\n\n.rk-combo-chip-x:hover {\n color: var(--color-ink);\n}\n\n/* 16px, like every other text control here: iOS zooms the viewport when it\n focuses a field under 16px and never zooms back. */\n.rk-combo-input {\n width: 100%;\n height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0 2rem 0 0.75rem;\n font-size: 1rem;\n color: var(--color-ink);\n}\n\n.is-multiple .rk-combo-input {\n width: auto;\n height: 1.75rem;\n min-width: 6rem;\n flex: 1;\n border: 0;\n border-radius: 0;\n padding: 0;\n background: transparent;\n box-shadow: none;\n}\n\n.rk-combo-input:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -1px;\n}\n\n.is-multiple .rk-combo-input:focus-visible {\n outline: none;\n}\n\n/* The ring belongs to the whole box once the box is the control. */\n.rk-combo-field.is-multiple:focus-within {\n outline: 2px solid var(--color-primary);\n outline-offset: -1px;\n}\n\n.rk-combo-input:disabled {\n opacity: 0.5;\n}\n\n.rk-combo-toggle {\n position: absolute;\n inset-inline-end: 0.5rem;\n color: var(--color-ink-soft);\n font-size: 0.75rem;\n}\n\n.rk-combo-list {\n position: absolute;\n z-index: 50;\n transform: translateX(var(--rk-combo-shift, 0px));\n max-height: 14rem;\n width: 100%;\n overflow-y: auto;\n border-radius: var(--radius-card);\n padding: 0.25rem;\n}\n\n.rk-combo-list.is-bottom {\n top: calc(100% - 1.25rem);\n}\n\n.rk-combo-list.is-top {\n bottom: calc(100% - 1.25rem);\n}\n\n.rk-combo-option {\n cursor: pointer;\n border-radius: var(--radius-cell);\n padding: 0.5rem 0.625rem;\n font-size: 0.875rem;\n color: var(--color-ink);\n}\n\n/* A virtual row's height is the arithmetic the spacers are built on, so it\n cannot be left to the text inside it. */\n.rk-combo-option[style] {\n display: flex;\n align-items: center;\n padding-block: 0;\n}\n\n.rk-combo-option.is-highlighted {\n background: var(--color-muted);\n}\n\n.rk-combo-option.is-selected {\n font-weight: 600;\n}\n\n.rk-combo-empty,\n.rk-combo-status {\n padding: 0.75rem 0.625rem;\n font-size: 0.875rem;\n color: var(--color-ink-soft);\n}\n\n.rk-combo-status {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-combo-status-rows {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-combo-error {\n font-size: 0.75rem;\n color: var(--color-negative);\n}\n\n.rk-combo-hint {\n font-size: 0.75rem;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\nimport { useBoundValue } from '../composables/use-bound-value'\n\n/**\n * A set of radios, and the reason there is no `BaseRadio`.\n *\n * One radio on its own is not a control — it is half of a choice that cannot\n * be unmade, and every real use is a group. So the group is the component.\n *\n * `fieldset` and `legend` rather than a label: a label points at one element,\n * and the thing being named here is the question, not any single answer. Left\n * as a plain label, a screen reader reads the options with no idea what they\n * are options for.\n */\nconst {\n modelValue = undefined,\n legend,\n options,\n error = '',\n hint = '',\n legendHidden = false,\n} = defineProps<{\n /** The chosen option's value, with `v-model`. */\n modelValue?: string | undefined\n legend: string\n options: readonly { value: string; label: string; disabled?: boolean | undefined }[]\n error?: string | undefined\n hint?: string | undefined\n legendHidden?: boolean | undefined\n}>()\n\n/* Declared by hand rather than with defineModel: it accepts `undefined` and\n emits only strings, which defineModel cannot type both ways. See\n `use-bound-value.ts`. */\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\nconst model = useBoundValue(\n () => modelValue,\n (value) => emit('update:modelValue', value),\n)\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n if (error) return errorId\n if (hint) return hintId\n return undefined\n})\n</script>\n\n<template>\n <fieldset class=\"flex flex-col gap-1.5\" :aria-describedby=\"describedBy\">\n <legend class=\"text-ink mb-1.5 text-sm font-medium\" :class=\"legendHidden ? 'sr-only' : ''\">\n {{ legend }}\n </legend>\n\n <label\n v-for=\"option in options\"\n :key=\"option.value\"\n class=\"flex items-center gap-3\"\n :class=\"option.disabled ? 'opacity-50' : 'cursor-pointer'\"\n >\n <input\n v-model=\"model\"\n type=\"radio\"\n :name=\"id\"\n :value=\"option.value\"\n :disabled=\"option.disabled\"\n class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n />\n <span class=\"text-ink text-sm\">{{ option.label }}</span>\n </label>\n\n <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n </fieldset>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\nimport { useBoundValue } from '../composables/use-bound-value'\n\n/**\n * A set of radios, and the reason there is no `BaseRadio`.\n *\n * One radio on its own is not a control — it is half of a choice that cannot\n * be unmade, and every real use is a group. So the group is the component.\n *\n * `fieldset` and `legend` rather than a label: a label points at one element,\n * and the thing being named here is the question, not any single answer. Left\n * as a plain label, a screen reader reads the options with no idea what they\n * are options for.\n */\nconst {\n modelValue = undefined,\n legend,\n options,\n error = '',\n hint = '',\n legendHidden = false,\n} = defineProps<{\n /** The chosen option's value, with `v-model`. */\n modelValue?: string | undefined\n legend: string\n options: readonly { value: string; label: string; disabled?: boolean | undefined }[]\n error?: string | undefined\n hint?: string | undefined\n legendHidden?: boolean | undefined\n}>()\n\n/* Declared by hand rather than with defineModel: it accepts `undefined` and\n emits only strings, which defineModel cannot type both ways. See\n `use-bound-value.ts`. */\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\nconst model = useBoundValue(\n () => modelValue,\n (value) => emit('update:modelValue', value),\n)\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n if (error) return errorId\n if (hint) return hintId\n return undefined\n})\n</script>\n\n<template>\n <fieldset class=\"flex flex-col gap-1.5\" :aria-describedby=\"describedBy\">\n <legend class=\"text-ink mb-1.5 text-sm font-medium\" :class=\"legendHidden ? 'sr-only' : ''\">\n {{ legend }}\n </legend>\n\n <label\n v-for=\"option in options\"\n :key=\"option.value\"\n class=\"flex items-center gap-3\"\n :class=\"option.disabled ? 'opacity-50' : 'cursor-pointer'\"\n >\n <input\n v-model=\"model\"\n type=\"radio\"\n :name=\"id\"\n :value=\"option.value\"\n :disabled=\"option.disabled\"\n class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n />\n <span class=\"text-ink text-sm\">{{ option.label }}</span>\n </label>\n\n <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n </fieldset>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { ref } from 'vue'\nimport { ChevronDown } from 'lucide-vue-next'\n\nimport FormField from './FormField.vue'\n\n/**\n * A native `<select>`, wearing the kit's field.\n *\n * Native on purpose. A custom listbox has to reimplement typeahead, the\n * keyboard, and the way a phone lifts the options into its own picker — and it\n * gets one of them wrong. What is worth replacing is the chrome, so the arrow\n * is drawn and the browser's own is removed.\n *\n * Options are passed rather than slotted so the label can be a translated\n * string the kit never sees.\n *\n * Generic over the value, because a select whose value must be a string makes\n * every consumer with numbered options write conversion glue on both sides of\n * it — and a component you have to wrap to use is one you write yourself\n * instead. A day of the month is a number.\n */\nconst {\n label,\n options,\n error = '',\n hint = '',\n labelHidden = false,\n placeholder = '',\n size = 'md',\n variant = 'default',\n fieldId = undefined,\n controlClass = undefined,\n} = defineProps<{\n label: string\n options: readonly { value: T; label: string; disabled?: boolean | undefined }[]\n error?: string | undefined\n hint?: string | undefined\n labelHidden?: boolean | undefined\n /**\n * An unselectable first row, for a field with no sensible default.\n *\n * Disabled rather than merely empty: an empty option that can be chosen lets\n * someone go back to having answered nothing, which no form wants.\n */\n placeholder?: string | undefined\n /**\n * `sm` for a select that filters or sorts rather than answers a form.\n *\n * Every hand-written select across the three consuming apps was this one.\n */\n size?: 'sm' | 'md' | undefined\n /**\n * `unstyled` keeps the wiring and drops the surface.\n *\n * The label, the generated id, `aria-describedby` and the error are what a\n * field is; the border and the height are what it looks like. A search box\n * inside a bordered row, a url field in an editor popover — those places\n * were hand-writing the whole thing to avoid the appearance, and losing the\n * wiring with it.\n *\n * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n * primitive is finished when the app can take its behaviour without its\n * paint.\n */\n variant?: 'default' | 'unstyled' | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n /**\n * Classes for the control itself, rather than for the field around it.\n *\n * `class` lands on the field, because that is where Vue puts a\n * component's class and because a layout class means \"space this field\".\n * That leaves `variant=\"unstyled\"` with no way to paint the control it\n * just stripped — the point of stripping it — which is why an app with a\n * large amount field wrote the whole thing by hand instead.\n *\n * It appends, so with the default variant a conflict is settled by\n * Tailwind's own order rather than by writing it here; reach for it with\n * `unstyled`, where there is nothing to settle.\n */\n controlClass?: string | undefined\n}>()\n\n/* The scale is typographic, not dimensional. Both sizes keep the 44px touch\n target — of the five hand-written controls this replaces, none was shorter\n than 40px and two were exactly 44, and a select that filters a list is\n pressed with the same thumb as one that answers a form. What changes is the\n type, and with it how loudly the field asks to be read. */\nconst SIZE_CLASS = {\n sm: 'h-11 text-sm',\n md: 'h-11 text-base',\n} as const\n\nconst model = defineModel<T | undefined>()\nconst control = ref<HTMLSelectElement | null>(null)\n\n/**\n * Focus the control, for a caller that owns when it happens.\n *\n * A `ref` on a component gives the component and not the element, so without\n * this a field cannot be focused at all — which is why an app that focuses\n * its amount field when a sheet opens, and again when the amount is\n * rejected, wrote the whole field by hand instead and said so in a comment.\n * That is the gap test, with the reason already written down.\n *\n * `ErrorSummary` has exposed `focus` since it existed, for the same need\n * from the other end.\n */\nfunction focus() {\n control.value?.focus()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :label-hidden=\"labelHidden\"\n :size=\"size\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"relative\">\n <select\n :id=\"id\"\n ref=\"control\"\n v-model=\"model\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n class=\"w-full appearance-none\"\n :class=\"[\n variant === 'unstyled'\n ? ''\n : 'control text-ink rounded-card focus-visible:outline-primary py-0 pr-10 pl-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n variant === 'unstyled' ? '' : SIZE_CLASS[size],\n variant !== 'unstyled' && invalid ? 'border-negative' : '',\n controlClass,\n ]\"\n >\n <option v-if=\"placeholder\" :value=\"undefined\" disabled>{{ placeholder }}</option>\n <option\n v-for=\"option in options\"\n :key=\"option.value\"\n :value=\"option.value\"\n :disabled=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <ChevronDown\n class=\"text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2\"\n aria-hidden=\"true\"\n />\n </div>\n </template>\n </FormField>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { ref } from 'vue'\nimport { ChevronDown } from 'lucide-vue-next'\n\nimport FormField from './FormField.vue'\n\n/**\n * A native `<select>`, wearing the kit's field.\n *\n * Native on purpose. A custom listbox has to reimplement typeahead, the\n * keyboard, and the way a phone lifts the options into its own picker — and it\n * gets one of them wrong. What is worth replacing is the chrome, so the arrow\n * is drawn and the browser's own is removed.\n *\n * Options are passed rather than slotted so the label can be a translated\n * string the kit never sees.\n *\n * Generic over the value, because a select whose value must be a string makes\n * every consumer with numbered options write conversion glue on both sides of\n * it — and a component you have to wrap to use is one you write yourself\n * instead. A day of the month is a number.\n */\nconst {\n label,\n options,\n error = '',\n hint = '',\n labelHidden = false,\n placeholder = '',\n size = 'md',\n variant = 'default',\n fieldId = undefined,\n controlClass = undefined,\n} = defineProps<{\n label: string\n options: readonly { value: T; label: string; disabled?: boolean | undefined }[]\n error?: string | undefined\n hint?: string | undefined\n labelHidden?: boolean | undefined\n /**\n * An unselectable first row, for a field with no sensible default.\n *\n * Disabled rather than merely empty: an empty option that can be chosen lets\n * someone go back to having answered nothing, which no form wants.\n */\n placeholder?: string | undefined\n /**\n * `sm` for a select that filters or sorts rather than answers a form.\n *\n * Every hand-written select across the three consuming apps was this one.\n */\n size?: 'sm' | 'md' | undefined\n /**\n * `unstyled` keeps the wiring and drops the surface.\n *\n * The label, the generated id, `aria-describedby` and the error are what a\n * field is; the border and the height are what it looks like. A search box\n * inside a bordered row, a url field in an editor popover — those places\n * were hand-writing the whole thing to avoid the appearance, and losing the\n * wiring with it.\n *\n * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n * primitive is finished when the app can take its behaviour without its\n * paint.\n */\n variant?: 'default' | 'unstyled' | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n /**\n * Classes for the control itself, rather than for the field around it.\n *\n * `class` lands on the field, because that is where Vue puts a\n * component's class and because a layout class means \"space this field\".\n * That leaves `variant=\"unstyled\"` with no way to paint the control it\n * just stripped — the point of stripping it — which is why an app with a\n * large amount field wrote the whole thing by hand instead.\n *\n * It appends, so with the default variant a conflict is settled by\n * Tailwind's own order rather than by writing it here; reach for it with\n * `unstyled`, where there is nothing to settle.\n */\n controlClass?: string | undefined\n}>()\n\n/* The scale is typographic, not dimensional. Both sizes keep the 44px touch\n target — of the five hand-written controls this replaces, none was shorter\n than 40px and two were exactly 44, and a select that filters a list is\n pressed with the same thumb as one that answers a form. What changes is the\n type, and with it how loudly the field asks to be read. */\nconst SIZE_CLASS = {\n sm: 'h-11 text-sm',\n md: 'h-11 text-base',\n} as const\n\nconst model = defineModel<T | undefined>()\nconst control = ref<HTMLSelectElement | null>(null)\n\n/**\n * Focus the control, for a caller that owns when it happens.\n *\n * A `ref` on a component gives the component and not the element, so without\n * this a field cannot be focused at all — which is why an app that focuses\n * its amount field when a sheet opens, and again when the amount is\n * rejected, wrote the whole field by hand instead and said so in a comment.\n * That is the gap test, with the reason already written down.\n *\n * `ErrorSummary` has exposed `focus` since it existed, for the same need\n * from the other end.\n */\nfunction focus() {\n control.value?.focus()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :label-hidden=\"labelHidden\"\n :size=\"size\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"relative\">\n <select\n :id=\"id\"\n ref=\"control\"\n v-model=\"model\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n class=\"w-full appearance-none\"\n :class=\"[\n variant === 'unstyled'\n ? ''\n : 'control text-ink rounded-card focus-visible:outline-primary py-0 pr-10 pl-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n variant === 'unstyled' ? '' : SIZE_CLASS[size],\n variant !== 'unstyled' && invalid ? 'border-negative' : '',\n controlClass,\n ]\"\n >\n <option v-if=\"placeholder\" :value=\"undefined\" disabled>{{ placeholder }}</option>\n <option\n v-for=\"option in options\"\n :key=\"option.value\"\n :value=\"option.value\"\n :disabled=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <ChevronDown\n class=\"text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2\"\n aria-hidden=\"true\"\n />\n </div>\n </template>\n </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A value picked from a range, where roughly right is the point.\n *\n * A native `input[type=\"range\"]`, painted. That is deliberate: the native\n * control already has the keyboard (arrows, Page Up/Down, Home/End), the\n * pointer, the touch target and the correct announcements, and every\n * hand-rolled slider gives some of that up. What it does not have is a look\n * that matches the rest of the kit, so the look is all that is replaced.\n *\n * `aria-valuetext` is the part worth stopping on. Without it a screen reader\n * reads the number alone — \"45\" — and a number with no unit is not an answer to\n * anything. Pass `format` and it reads \"45 minutes\".\n */\nconst {\n label,\n min = 0,\n max = 100,\n step = 1,\n hint = '',\n disabled = false,\n format,\n showValue = true,\n} = defineProps<{\n label: string\n min?: number | undefined\n max?: number | undefined\n step?: number | undefined\n hint?: string | undefined\n disabled?: boolean | undefined\n /**\n * Turns the number into something a person would say — \"45 minutes\", \"₺12\".\n *\n * Used for the visible readout and for `aria-valuetext`, so both say the same\n * thing and neither is a bare number.\n */\n format?: ((value: number) => string) | undefined\n showValue?: boolean | undefined\n}>()\n\nconst model = defineModel<number>({ default: 0 })\n\nconst id = useId()\nconst hintId = `${id}-hint`\n\nconst text = computed(() => (format ? format(model.value) : String(model.value)))\n/** Where the fill stops, as a percentage of the track. */\nconst filled = computed(() => {\n const span = max - min\n return span <= 0 ? 0 : ((model.value - min) / span) * 100\n})\n</script>\n\n<template>\n <div class=\"rk-slider\">\n <div class=\"rk-slider-head\">\n <label :for=\"id\" class=\"rk-slider-label\">{{ label }}</label>\n <output v-if=\"showValue\" :for=\"id\" class=\"rk-slider-value\">{{ text }}</output>\n </div>\n\n <input\n :id=\"id\"\n v-model.number=\"model\"\n type=\"range\"\n class=\"rk-slider-input\"\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :disabled=\"disabled\"\n :aria-valuetext=\"text\"\n :aria-describedby=\"hint ? hintId : undefined\"\n :style=\"{ '--rk-slider-filled': `${filled}%` }\"\n />\n\n <p v-if=\"hint\" :id=\"hintId\" class=\"rk-slider-hint\">{{ hint }}</p>\n </div>\n</template>\n\n<style scoped>\n.rk-slider {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-slider-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 1rem;\n}\n\n.rk-slider-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-slider-value {\n font-size: 0.875rem;\n color: var(--color-ink-soft);\n font-variant-numeric: tabular-nums;\n}\n\n.rk-slider-input {\n width: 100%;\n height: 1.25rem;\n appearance: none;\n background: transparent;\n cursor: pointer;\n}\n\n.rk-slider-input:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n/* The two engines will not accept these in one rule: an unknown pseudo-element\n invalidates the whole selector, so WebKit and Firefox are written twice. */\n.rk-slider-input::-webkit-slider-runnable-track {\n height: 0.375rem;\n border-radius: 9999px;\n background: linear-gradient(\n to right,\n var(--color-primary) var(--rk-slider-filled, 0%),\n var(--color-hair) var(--rk-slider-filled, 0%)\n );\n}\n\n/* A gradient has no logical direction, so the one hand-painted track in the\n kit is written twice. Firefox needs no counterpart: `::-moz-range-progress`\n is positioned by the engine, which already knows which way the input runs.\n Only WebKit's track is painted here, and it would have filled from the\n left while the thumb started on the right. */\n[dir='rtl'] .rk-slider-input::-webkit-slider-runnable-track {\n background: linear-gradient(\n to left,\n var(--color-primary) var(--rk-slider-filled, 0%),\n var(--color-hair) var(--rk-slider-filled, 0%)\n );\n}\n\n.rk-slider-input::-moz-range-track {\n height: 0.375rem;\n border-radius: 9999px;\n background: var(--color-hair);\n}\n\n.rk-slider-input::-moz-range-progress {\n height: 0.375rem;\n border-radius: 9999px;\n background: var(--color-primary);\n}\n\n.rk-slider-input::-webkit-slider-thumb {\n appearance: none;\n margin-top: -0.4375rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 9999px;\n background: var(--color-surface);\n border: 2px solid var(--color-primary);\n box-shadow: var(--shadow-control);\n}\n\n.rk-slider-input::-moz-range-thumb {\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid var(--color-primary);\n border-radius: 9999px;\n background: var(--color-surface);\n box-shadow: var(--shadow-control);\n}\n\n.rk-slider-input:focus-visible::-webkit-slider-thumb {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-slider-input:focus-visible::-moz-range-thumb {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-slider-hint {\n font-size: 0.75rem;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A value picked from a range, where roughly right is the point.\n *\n * A native `input[type=\"range\"]`, painted. That is deliberate: the native\n * control already has the keyboard (arrows, Page Up/Down, Home/End), the\n * pointer, the touch target and the correct announcements, and every\n * hand-rolled slider gives some of that up. What it does not have is a look\n * that matches the rest of the kit, so the look is all that is replaced.\n *\n * `aria-valuetext` is the part worth stopping on. Without it a screen reader\n * reads the number alone — \"45\" — and a number with no unit is not an answer to\n * anything. Pass `format` and it reads \"45 minutes\".\n */\nconst {\n label,\n min = 0,\n max = 100,\n step = 1,\n hint = '',\n disabled = false,\n format,\n showValue = true,\n} = defineProps<{\n label: string\n min?: number | undefined\n max?: number | undefined\n step?: number | undefined\n hint?: string | undefined\n disabled?: boolean | undefined\n /**\n * Turns the number into something a person would say — \"45 minutes\", \"₺12\".\n *\n * Used for the visible readout and for `aria-valuetext`, so both say the same\n * thing and neither is a bare number.\n */\n format?: ((value: number) => string) | undefined\n showValue?: boolean | undefined\n}>()\n\nconst model = defineModel<number>({ default: 0 })\n\nconst id = useId()\nconst hintId = `${id}-hint`\n\nconst text = computed(() => (format ? format(model.value) : String(model.value)))\n/** Where the fill stops, as a percentage of the track. */\nconst filled = computed(() => {\n const span = max - min\n return span <= 0 ? 0 : ((model.value - min) / span) * 100\n})\n</script>\n\n<template>\n <div class=\"rk-slider\">\n <div class=\"rk-slider-head\">\n <label :for=\"id\" class=\"rk-slider-label\">{{ label }}</label>\n <output v-if=\"showValue\" :for=\"id\" class=\"rk-slider-value\">{{ text }}</output>\n </div>\n\n <input\n :id=\"id\"\n v-model.number=\"model\"\n type=\"range\"\n class=\"rk-slider-input\"\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :disabled=\"disabled\"\n :aria-valuetext=\"text\"\n :aria-describedby=\"hint ? hintId : undefined\"\n :style=\"{ '--rk-slider-filled': `${filled}%` }\"\n />\n\n <p v-if=\"hint\" :id=\"hintId\" class=\"rk-slider-hint\">{{ hint }}</p>\n </div>\n</template>\n\n<style scoped>\n.rk-slider {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-slider-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 1rem;\n}\n\n.rk-slider-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-slider-value {\n font-size: 0.875rem;\n color: var(--color-ink-soft);\n font-variant-numeric: tabular-nums;\n}\n\n.rk-slider-input {\n width: 100%;\n height: 1.25rem;\n appearance: none;\n background: transparent;\n cursor: pointer;\n}\n\n.rk-slider-input:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n/* The two engines will not accept these in one rule: an unknown pseudo-element\n invalidates the whole selector, so WebKit and Firefox are written twice. */\n.rk-slider-input::-webkit-slider-runnable-track {\n height: 0.375rem;\n border-radius: 9999px;\n background: linear-gradient(\n to right,\n var(--color-primary) var(--rk-slider-filled, 0%),\n var(--color-hair) var(--rk-slider-filled, 0%)\n );\n}\n\n/* A gradient has no logical direction, so the one hand-painted track in the\n kit is written twice. Firefox needs no counterpart: `::-moz-range-progress`\n is positioned by the engine, which already knows which way the input runs.\n Only WebKit's track is painted here, and it would have filled from the\n left while the thumb started on the right. */\n[dir='rtl'] .rk-slider-input::-webkit-slider-runnable-track {\n background: linear-gradient(\n to left,\n var(--color-primary) var(--rk-slider-filled, 0%),\n var(--color-hair) var(--rk-slider-filled, 0%)\n );\n}\n\n.rk-slider-input::-moz-range-track {\n height: 0.375rem;\n border-radius: 9999px;\n background: var(--color-hair);\n}\n\n.rk-slider-input::-moz-range-progress {\n height: 0.375rem;\n border-radius: 9999px;\n background: var(--color-primary);\n}\n\n.rk-slider-input::-webkit-slider-thumb {\n appearance: none;\n margin-top: -0.4375rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 9999px;\n background: var(--color-surface);\n border: 2px solid var(--color-primary);\n box-shadow: var(--shadow-control);\n}\n\n.rk-slider-input::-moz-range-thumb {\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid var(--color-primary);\n border-radius: 9999px;\n background: var(--color-surface);\n box-shadow: var(--shadow-control);\n}\n\n.rk-slider-input:focus-visible::-webkit-slider-thumb {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-slider-input:focus-visible::-moz-range-thumb {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-slider-hint {\n font-size: 0.75rem;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { computed, ref, watch } from 'vue'\n\nimport FormField from './FormField.vue'\n\n/**\n * A number, typed or stepped — a quantity, a price, a count of minutes.\n *\n * `<input type=\"number\">` is what everyone reaches for and nearly everyone\n * regrets: it accepts \"e\", scrolls the value when the page is scrolled over\n * it, and hands back an empty string for anything it does not like. This is\n * a text field that only settles on numbers, with a minus and a plus beside\n * it, and the spin-button keyboard: arrows step, Page Up and Down step ten\n * at a time, Home and End go to the limits.\n *\n * Typing is free while the field has focus — \"-\", \"1.\" and \"\" are all fine\n * halfway through a number. On leaving it, the value is clamped to `min` and\n * `max` and rounded to the precision of `step`, so 0.1 + 0.2 lands on 0.3.\n */\nconst {\n label,\n min = -Infinity,\n max = Infinity,\n step = 1,\n decrementLabel,\n incrementLabel,\n error = '',\n hint = '',\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n min?: number | undefined\n max?: number | undefined\n /** One press of a button or an arrow key. Its decimals set the rounding. */\n step?: number | undefined\n /** Accessible name of the minus button, e.g. \"Decrease\". */\n decrementLabel: string\n /** Accessible name of the plus button, e.g. \"Increase\". */\n incrementLabel: string\n error?: string | undefined\n hint?: string | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/** The number, with `v-model`. `undefined` while the field is empty. */\nconst model = defineModel<number | undefined>()\n\nconst places = computed(() => (String(step).split('.')[1] ?? '').length)\n\nconst settle = (value: number) =>\n Number(Math.min(max, Math.max(min, value)).toFixed(Math.min(places.value, 20)))\n\n/* What the field shows. Kept apart from the model so a half-typed \"1.\" is\n not rewritten to \"1\" under the reader's cursor. */\nconst draft = ref(model.value === undefined ? '' : String(model.value))\n\nwatch(model, (value) => {\n const shown = draft.value === '' ? undefined : Number(draft.value)\n if (shown !== value) draft.value = value === undefined ? '' : String(value)\n})\n\nfunction onInput(event: Event) {\n const text = (event.target as HTMLInputElement).value.replace(',', '.')\n draft.value = text\n if (text.trim() === '') {\n model.value = undefined\n return\n }\n\n const value = Number(text)\n if (Number.isFinite(value)) model.value = value\n}\n\nfunction commit() {\n if (model.value === undefined) {\n draft.value = ''\n return\n }\n setTo(model.value)\n}\n\nfunction setTo(value: number) {\n model.value = settle(value)\n draft.value = String(model.value)\n}\n\nfunction stepBy(times: number) {\n if (disabled) return\n const start = model.value ?? (Number.isFinite(min) ? min : 0)\n setTo(start + step * times)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n const keys: Record<string, () => void> = {\n ArrowUp: () => stepBy(1),\n ArrowDown: () => stepBy(-1),\n PageUp: () => stepBy(10),\n PageDown: () => stepBy(-10),\n Home: () => {\n if (Number.isFinite(min)) setTo(min)\n },\n End: () => {\n if (Number.isFinite(max)) setTo(max)\n },\n }\n const action = keys[event.key]\n if (!action) return\n event.preventDefault()\n action()\n}\n\nconst atMin = computed(() => model.value !== undefined && model.value <= min)\nconst atMax = computed(() => model.value !== undefined && model.value >= max)\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"rk-number control\" :class=\"{ 'is-invalid': invalid, 'is-disabled': disabled }\">\n <button\n type=\"button\"\n class=\"rk-number-step focus-ring\"\n :aria-label=\"decrementLabel\"\n :disabled=\"disabled || atMin\"\n tabindex=\"-1\"\n @click=\"stepBy(-1)\"\n >\n <Minus class=\"size-4\" aria-hidden=\"true\" />\n </button>\n <input\n :id=\"id\"\n :value=\"draft\"\n type=\"text\"\n inputmode=\"decimal\"\n role=\"spinbutton\"\n autocomplete=\"off\"\n class=\"rk-number-field\"\n :aria-valuenow=\"model\"\n :aria-valuemin=\"Number.isFinite(min) ? min : undefined\"\n :aria-valuemax=\"Number.isFinite(max) ? max : undefined\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n @input=\"onInput\"\n @blur=\"commit\"\n @keydown=\"onKeydown\"\n />\n <button\n type=\"button\"\n class=\"rk-number-step focus-ring\"\n :aria-label=\"incrementLabel\"\n :disabled=\"disabled || atMax\"\n tabindex=\"-1\"\n @click=\"stepBy(1)\"\n >\n <Plus class=\"size-4\" aria-hidden=\"true\" />\n </button>\n </div>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n/* The buttons are out of the Tab order: the keyboard already has the arrows,\n and three stops for one number is two too many. They stay reachable by\n pointer and by touch, which is who they are for. */\n.rk-number {\n display: flex;\n align-items: center;\n height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0 0.25rem;\n}\n\n.rk-number:focus-within {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n\n.rk-number.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-number.is-disabled {\n opacity: 0.5;\n}\n\n.rk-number-field {\n min-width: 0;\n flex: 1;\n background: transparent;\n text-align: center;\n font-size: 1rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n outline: none;\n}\n\n.rk-number-step {\n display: grid;\n width: 2.25rem;\n height: 2.25rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: calc(var(--radius-card) - 4px);\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-number-step:hover:not(:disabled) {\n background: var(--color-muted);\n}\n\n.rk-number-step:disabled {\n opacity: 0.35;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { computed, ref, watch } from 'vue'\n\nimport FormField from './FormField.vue'\n\n/**\n * A number, typed or stepped — a quantity, a price, a count of minutes.\n *\n * `<input type=\"number\">` is what everyone reaches for and nearly everyone\n * regrets: it accepts \"e\", scrolls the value when the page is scrolled over\n * it, and hands back an empty string for anything it does not like. This is\n * a text field that only settles on numbers, with a minus and a plus beside\n * it, and the spin-button keyboard: arrows step, Page Up and Down step ten\n * at a time, Home and End go to the limits.\n *\n * Typing is free while the field has focus — \"-\", \"1.\" and \"\" are all fine\n * halfway through a number. On leaving it, the value is clamped to `min` and\n * `max` and rounded to the precision of `step`, so 0.1 + 0.2 lands on 0.3.\n */\nconst {\n label,\n min = -Infinity,\n max = Infinity,\n step = 1,\n decrementLabel,\n incrementLabel,\n error = '',\n hint = '',\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n min?: number | undefined\n max?: number | undefined\n /** One press of a button or an arrow key. Its decimals set the rounding. */\n step?: number | undefined\n /** Accessible name of the minus button, e.g. \"Decrease\". */\n decrementLabel: string\n /** Accessible name of the plus button, e.g. \"Increase\". */\n incrementLabel: string\n error?: string | undefined\n hint?: string | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/** The number, with `v-model`. `undefined` while the field is empty. */\nconst model = defineModel<number | undefined>()\n\nconst places = computed(() => (String(step).split('.')[1] ?? '').length)\n\nconst settle = (value: number) =>\n Number(Math.min(max, Math.max(min, value)).toFixed(Math.min(places.value, 20)))\n\n/* What the field shows. Kept apart from the model so a half-typed \"1.\" is\n not rewritten to \"1\" under the reader's cursor. */\nconst draft = ref(model.value === undefined ? '' : String(model.value))\n\nwatch(model, (value) => {\n const shown = draft.value === '' ? undefined : Number(draft.value)\n if (shown !== value) draft.value = value === undefined ? '' : String(value)\n})\n\nfunction onInput(event: Event) {\n const text = (event.target as HTMLInputElement).value.replace(',', '.')\n draft.value = text\n if (text.trim() === '') {\n model.value = undefined\n return\n }\n\n const value = Number(text)\n if (Number.isFinite(value)) model.value = value\n}\n\nfunction commit() {\n if (model.value === undefined) {\n draft.value = ''\n return\n }\n setTo(model.value)\n}\n\nfunction setTo(value: number) {\n model.value = settle(value)\n draft.value = String(model.value)\n}\n\nfunction stepBy(times: number) {\n if (disabled) return\n const start = model.value ?? (Number.isFinite(min) ? min : 0)\n setTo(start + step * times)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n const keys: Record<string, () => void> = {\n ArrowUp: () => stepBy(1),\n ArrowDown: () => stepBy(-1),\n PageUp: () => stepBy(10),\n PageDown: () => stepBy(-10),\n Home: () => {\n if (Number.isFinite(min)) setTo(min)\n },\n End: () => {\n if (Number.isFinite(max)) setTo(max)\n },\n }\n const action = keys[event.key]\n if (!action) return\n event.preventDefault()\n action()\n}\n\nconst atMin = computed(() => model.value !== undefined && model.value <= min)\nconst atMax = computed(() => model.value !== undefined && model.value >= max)\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"rk-number control\" :class=\"{ 'is-invalid': invalid, 'is-disabled': disabled }\">\n <button\n type=\"button\"\n class=\"rk-number-step focus-ring\"\n :aria-label=\"decrementLabel\"\n :disabled=\"disabled || atMin\"\n tabindex=\"-1\"\n @click=\"stepBy(-1)\"\n >\n <Minus class=\"size-4\" aria-hidden=\"true\" />\n </button>\n <input\n :id=\"id\"\n :value=\"draft\"\n type=\"text\"\n inputmode=\"decimal\"\n role=\"spinbutton\"\n autocomplete=\"off\"\n class=\"rk-number-field\"\n :aria-valuenow=\"model\"\n :aria-valuemin=\"Number.isFinite(min) ? min : undefined\"\n :aria-valuemax=\"Number.isFinite(max) ? max : undefined\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n @input=\"onInput\"\n @blur=\"commit\"\n @keydown=\"onKeydown\"\n />\n <button\n type=\"button\"\n class=\"rk-number-step focus-ring\"\n :aria-label=\"incrementLabel\"\n :disabled=\"disabled || atMax\"\n tabindex=\"-1\"\n @click=\"stepBy(1)\"\n >\n <Plus class=\"size-4\" aria-hidden=\"true\" />\n </button>\n </div>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n/* The buttons are out of the Tab order: the keyboard already has the arrows,\n and three stops for one number is two too many. They stay reachable by\n pointer and by touch, which is who they are for. */\n.rk-number {\n display: flex;\n align-items: center;\n height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0 0.25rem;\n}\n\n.rk-number:focus-within {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n\n.rk-number.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-number.is-disabled {\n opacity: 0.5;\n}\n\n.rk-number-field {\n min-width: 0;\n flex: 1;\n background: transparent;\n text-align: center;\n font-size: 1rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n outline: none;\n}\n\n.rk-number-step {\n display: grid;\n width: 2.25rem;\n height: 2.25rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: calc(var(--radius-card) - 4px);\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-number-step:hover:not(:disabled) {\n background: var(--color-muted);\n}\n\n.rk-number-step:disabled {\n opacity: 0.35;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport BaseSlider from './BaseSlider.vue'\nimport NumberInput from './NumberInput.vue'\n\n/**\n * One number, reached either way: dragged along a range or typed exactly.\n *\n * The pair exists because the two controls answer different halves of the\n * same question. A slider is for finding a value — you can see where you are\n * in the range and what \"a bit more\" looks like — and it is hopeless at\n * landing on 37 out of 500. A number field lands on 37 immediately and tells\n * you nothing about whether 37 is a lot. Anything with a wide range and an\n * exact answer somewhere in it — a price ceiling, an opacity, a timeout —\n * wants both, and apps kept building the pair by hand.\n *\n * ## Both controls carry the same name, and that is on purpose\n *\n * A screen reader announces two controls here, not one, because there are\n * two: each can be focused and each changes the value. Giving them one name\n * is what says they are the same answer rather than two settings that happen\n * to sit together. The number field's label is visually hidden, since the\n * slider's is right above it.\n *\n * ## Typing is allowed to be wrong on the way\n *\n * The field clamps on commit, not on every keystroke: clamping as you type\n * turns \"50\" into \"5\" and then into \"50\" again while you are still typing it\n * — for a range starting at 10, the 5 is rewritten before the 0 arrives.\n * `NumberInput` already holds that line; this passes the range through and\n * stays out of it.\n */\nconst {\n label,\n min = 0,\n max = 100,\n step = 1,\n decrementLabel,\n incrementLabel,\n hint = '',\n disabled = false,\n format,\n} = defineProps<{\n /** Names both controls. Already translated. */\n label: string\n min?: number | undefined\n max?: number | undefined\n step?: number | undefined\n /** Names the number field's step-down button. Already translated. */\n decrementLabel: string\n /** Names the number field's step-up button. Already translated. */\n incrementLabel: string\n hint?: string | undefined\n disabled?: boolean | undefined\n /**\n * Turns the number into something a person would say — \"45 minutes\", \"₺12\".\n *\n * The slider's readout is the number field here, so this is only what a\n * screen reader hears for the slider: `aria-valuetext`, which without it\n * is a bare number and a bare number is not an answer to anything.\n */\n format?: ((value: number) => string) | undefined\n}>()\n\nconst model = defineModel<number>({ default: 0 })\n\n/**\n * The field's own binding, which can be emptied; the pair's cannot.\n *\n * `NumberInput` hands back `undefined` while the field is empty, because\n * halfway through typing a number there is no number. A slider has no such\n * state — the thumb is always somewhere — so an empty field leaves the value\n * where it was until something is typed, rather than dragging the thumb to\n * zero the moment the last digit is deleted.\n */\nconst typed = computed<number | undefined>({\n get: () => model.value,\n set: (value) => {\n if (value !== undefined) model.value = value\n },\n})\n</script>\n\n<template>\n <div class=\"rk-slider-field\">\n <BaseSlider\n v-model=\"model\"\n :label=\"label\"\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :hint=\"hint\"\n :disabled=\"disabled\"\n :format=\"format\"\n :show-value=\"false\"\n />\n\n <NumberInput\n v-model=\"typed\"\n class=\"rk-slider-field-number\"\n :label=\"label\"\n label-hidden\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :decrement-label=\"decrementLabel\"\n :increment-label=\"incrementLabel\"\n :disabled=\"disabled\"\n size=\"sm\"\n />\n </div>\n</template>\n\n<style scoped>\n/* The slider takes the room; the field is as wide as its digits need and no\n wider, so the pair does not read as two fields of equal weight. */\n.rk-slider-field {\n display: flex;\n flex-wrap: wrap;\n /* Centred rather than bottom-aligned: the slider's block grows when its\n hint wraps to a second line, and aligning to the bottom edge sank the\n field down with it. */\n align-items: center;\n gap: 0.75rem;\n}\n\n/* It wraps rather than squeezing: a slider shorter than this is one nobody\n can aim with, and then the field belongs under it instead of beside it.\n Wrapping does that by itself, so it needs no container query -- which\n would have been a rule that silently never matched unless the app had\n declared a container above it. */\n.rk-slider-field > :first-child {\n min-width: 12rem;\n flex: 1 1 12rem;\n}\n\n.rk-slider-field-number {\n width: 7.5rem;\n flex: 0 1 7.5rem;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport BaseSlider from './BaseSlider.vue'\nimport NumberInput from './NumberInput.vue'\n\n/**\n * One number, reached either way: dragged along a range or typed exactly.\n *\n * The pair exists because the two controls answer different halves of the\n * same question. A slider is for finding a value — you can see where you are\n * in the range and what \"a bit more\" looks like — and it is hopeless at\n * landing on 37 out of 500. A number field lands on 37 immediately and tells\n * you nothing about whether 37 is a lot. Anything with a wide range and an\n * exact answer somewhere in it — a price ceiling, an opacity, a timeout —\n * wants both, and apps kept building the pair by hand.\n *\n * ## Both controls carry the same name, and that is on purpose\n *\n * A screen reader announces two controls here, not one, because there are\n * two: each can be focused and each changes the value. Giving them one name\n * is what says they are the same answer rather than two settings that happen\n * to sit together. The number field's label is visually hidden, since the\n * slider's is right above it.\n *\n * ## Typing is allowed to be wrong on the way\n *\n * The field clamps on commit, not on every keystroke: clamping as you type\n * turns \"50\" into \"5\" and then into \"50\" again while you are still typing it\n * — for a range starting at 10, the 5 is rewritten before the 0 arrives.\n * `NumberInput` already holds that line; this passes the range through and\n * stays out of it.\n */\nconst {\n label,\n min = 0,\n max = 100,\n step = 1,\n decrementLabel,\n incrementLabel,\n hint = '',\n disabled = false,\n format,\n} = defineProps<{\n /** Names both controls. Already translated. */\n label: string\n min?: number | undefined\n max?: number | undefined\n step?: number | undefined\n /** Names the number field's step-down button. Already translated. */\n decrementLabel: string\n /** Names the number field's step-up button. Already translated. */\n incrementLabel: string\n hint?: string | undefined\n disabled?: boolean | undefined\n /**\n * Turns the number into something a person would say — \"45 minutes\", \"₺12\".\n *\n * The slider's readout is the number field here, so this is only what a\n * screen reader hears for the slider: `aria-valuetext`, which without it\n * is a bare number and a bare number is not an answer to anything.\n */\n format?: ((value: number) => string) | undefined\n}>()\n\nconst model = defineModel<number>({ default: 0 })\n\n/**\n * The field's own binding, which can be emptied; the pair's cannot.\n *\n * `NumberInput` hands back `undefined` while the field is empty, because\n * halfway through typing a number there is no number. A slider has no such\n * state — the thumb is always somewhere — so an empty field leaves the value\n * where it was until something is typed, rather than dragging the thumb to\n * zero the moment the last digit is deleted.\n */\nconst typed = computed<number | undefined>({\n get: () => model.value,\n set: (value) => {\n if (value !== undefined) model.value = value\n },\n})\n</script>\n\n<template>\n <div class=\"rk-slider-field\">\n <BaseSlider\n v-model=\"model\"\n :label=\"label\"\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :hint=\"hint\"\n :disabled=\"disabled\"\n :format=\"format\"\n :show-value=\"false\"\n />\n\n <NumberInput\n v-model=\"typed\"\n class=\"rk-slider-field-number\"\n :label=\"label\"\n label-hidden\n :min=\"min\"\n :max=\"max\"\n :step=\"step\"\n :decrement-label=\"decrementLabel\"\n :increment-label=\"incrementLabel\"\n :disabled=\"disabled\"\n size=\"sm\"\n />\n </div>\n</template>\n\n<style scoped>\n/* The slider takes the room; the field is as wide as its digits need and no\n wider, so the pair does not read as two fields of equal weight. */\n.rk-slider-field {\n display: flex;\n flex-wrap: wrap;\n /* Centred rather than bottom-aligned: the slider's block grows when its\n hint wraps to a second line, and aligning to the bottom edge sank the\n field down with it. */\n align-items: center;\n gap: 0.75rem;\n}\n\n/* It wraps rather than squeezing: a slider shorter than this is one nobody\n can aim with, and then the field belongs under it instead of beside it.\n Wrapping does that by itself, so it needs no container query -- which\n would have been a rule that silently never matched unless the app had\n declared a container above it. */\n.rk-slider-field > :first-child {\n min-width: 12rem;\n flex: 1 1 12rem;\n}\n\n.rk-slider-field-number {\n width: 7.5rem;\n flex: 0 1 7.5rem;\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * Work in progress, with no idea how much is left.\n *\n * `ProgressBar` is the one to reach for when the amount is known; this is for\n * when it is not. Showing a bar that cannot move is worse than a spinner,\n * because a bar is a promise about how long.\n *\n * `role=\"status\"` and a label, so a screen reader says what is happening. A\n * spinner with no accessible name is a decoration that happens to be the only\n * thing on screen — which is why `label` is required and not defaulted to\n * \"Loading\" in a language the app may not speak.\n */\nconst { label, size = 'md' } = defineProps<{\n /** What is being waited for. Already translated. */\n label: string\n size?: 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst SIZES = { sm: '1rem', md: '1.5rem', lg: '2.5rem' } as const\n</script>\n\n<template>\n <span class=\"rk-spin-wrap\" role=\"status\">\n <span class=\"rk-spin\" :style=\"{ width: SIZES[size], height: SIZES[size] }\" aria-hidden=\"true\" />\n <!-- Off screen rather than hidden: `display: none` is not announced. -->\n <span class=\"rk-spin-label\">{{ label }}</span>\n </span>\n</template>\n\n<style scoped>\n.rk-spin-wrap {\n display: inline-flex;\n align-items: center;\n}\n\n.rk-spin {\n display: block;\n border-radius: 9999px;\n border: 2px solid color-mix(in srgb, currentColor 20%, transparent);\n border-top-color: currentColor;\n animation: rk-spin 700ms linear infinite;\n}\n\n.rk-spin-label {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n@keyframes rk-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Still moving, because a spinner that does not move says the app has hung --\n but a slow fade rather than a fast rotation. */\n@media (prefers-reduced-motion: reduce) {\n .rk-spin {\n animation: rk-pulse 1.4s ease-in-out infinite;\n }\n\n @keyframes rk-pulse {\n 50% {\n opacity: 0.35;\n }\n }\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * Work in progress, with no idea how much is left.\n *\n * `ProgressBar` is the one to reach for when the amount is known; this is for\n * when it is not. Showing a bar that cannot move is worse than a spinner,\n * because a bar is a promise about how long.\n *\n * `role=\"status\"` and a label, so a screen reader says what is happening. A\n * spinner with no accessible name is a decoration that happens to be the only\n * thing on screen — which is why `label` is required and not defaulted to\n * \"Loading\" in a language the app may not speak.\n */\nconst { label, size = 'md' } = defineProps<{\n /** What is being waited for. Already translated. */\n label: string\n size?: 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst SIZES = { sm: '1rem', md: '1.5rem', lg: '2.5rem' } as const\n</script>\n\n<template>\n <span class=\"rk-spin-wrap\" role=\"status\">\n <span class=\"rk-spin\" :style=\"{ width: SIZES[size], height: SIZES[size] }\" aria-hidden=\"true\" />\n <!-- Off screen rather than hidden: `display: none` is not announced. -->\n <span class=\"rk-spin-label\">{{ label }}</span>\n </span>\n</template>\n\n<style scoped>\n.rk-spin-wrap {\n display: inline-flex;\n align-items: center;\n}\n\n.rk-spin {\n display: block;\n border-radius: 9999px;\n border: 2px solid color-mix(in srgb, currentColor 20%, transparent);\n border-top-color: currentColor;\n animation: rk-spin 700ms linear infinite;\n}\n\n.rk-spin-label {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n@keyframes rk-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Still moving, because a spinner that does not move says the app has hung --\n but a slow fade rather than a fast rotation. */\n@media (prefers-reduced-motion: reduce) {\n .rk-spin {\n animation: rk-pulse 1.4s ease-in-out infinite;\n }\n\n @keyframes rk-pulse {\n 50% {\n opacity: 0.35;\n }\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A setting that takes effect the moment it is touched.\n *\n * Not `BaseCheckbox` with a rounder skin, and the difference is not visual. A\n * checkbox states an intention that something else commits — a form is\n * submitted, a dialog is confirmed. A switch *is* the commit: there is no Save\n * after it, which is why it belongs in a settings row and why a form full of\n * them is usually a form of checkboxes drawn wrong.\n *\n * `role=\"switch\"` rather than a styled checkbox, because a screen reader\n * announces \"on\"/\"off\" for a switch and \"checked\"/\"unchecked\" for a checkbox,\n * and those are different sentences about different things.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n label,\n hint = '',\n disabled = false,\n labelHidden = false,\n} = defineProps<{\n label: string\n hint?: string | undefined\n disabled?: boolean | undefined\n /** For a switch inside a row that already names it — it keeps its accessible name. */\n labelHidden?: boolean | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => (hint ? hintId : undefined))\n\nfunction toggle() {\n if (!disabled) model.value = !model.value\n}\n</script>\n\n<template>\n <div class=\"flex items-center justify-between gap-4\">\n <span v-if=\"!labelHidden\" class=\"min-w-0\">\n <span :id=\"id\" class=\"text-ink block text-sm\">{{ label }}</span>\n <span v-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft mt-0.5 block text-xs\">{{ hint }}</span>\n </span>\n\n <!--\n A button, not an <input type=\"checkbox\">. The native control cannot carry\n `role=\"switch\"` in every engine that matters, and the track has to be\n painted anyway; what a native input would have bought is the label\n association, and `aria-labelledby` buys that outright.\n -->\n <button\n type=\"button\"\n role=\"switch\"\n class=\"rk-switch\"\n :class=\"{ 'is-on': model }\"\n :aria-checked=\"model\"\n :aria-labelledby=\"labelHidden ? undefined : id\"\n :aria-label=\"labelHidden ? label : undefined\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n @click=\"toggle\"\n >\n <span class=\"rk-switch-knob\" aria-hidden=\"true\" />\n </button>\n </div>\n</template>\n\n<style scoped>\n.rk-switch {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n width: 2.75rem;\n height: 1.625rem;\n border-radius: 9999px;\n background: var(--color-hair);\n transition: background-color var(--duration-base) ease;\n}\n\n.rk-switch.is-on {\n background: var(--color-primary);\n}\n\n.rk-switch:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-switch:disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.rk-switch-knob {\n position: absolute;\n inset-inline-start: 0.1875rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 9999px;\n /* The on-colour, because the knob sits on the primary track when it is on,\n and that is exactly the pairing `on-primary` is tuned for. */\n background: var(--color-on-primary);\n box-shadow: var(--shadow-control);\n transition: transform var(--duration-base) var(--ease-sheet);\n}\n\n.rk-switch.is-on .rk-switch-knob {\n transform: translateX(1.125rem);\n}\n\n/* `translateX` has no logical form, so the one direction-dependent value in\n the kit that cannot be written logically is written twice. Without this\n the knob leaves the track entirely in a right-to-left layout. */\n[dir='rtl'] .rk-switch.is-on .rk-switch-knob {\n transform: translateX(-1.125rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-switch,\n .rk-switch-knob {\n transition: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A setting that takes effect the moment it is touched.\n *\n * Not `BaseCheckbox` with a rounder skin, and the difference is not visual. A\n * checkbox states an intention that something else commits — a form is\n * submitted, a dialog is confirmed. A switch *is* the commit: there is no Save\n * after it, which is why it belongs in a settings row and why a form full of\n * them is usually a form of checkboxes drawn wrong.\n *\n * `role=\"switch\"` rather than a styled checkbox, because a screen reader\n * announces \"on\"/\"off\" for a switch and \"checked\"/\"unchecked\" for a checkbox,\n * and those are different sentences about different things.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n label,\n hint = '',\n disabled = false,\n labelHidden = false,\n} = defineProps<{\n label: string\n hint?: string | undefined\n disabled?: boolean | undefined\n /** For a switch inside a row that already names it — it keeps its accessible name. */\n labelHidden?: boolean | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => (hint ? hintId : undefined))\n\nfunction toggle() {\n if (!disabled) model.value = !model.value\n}\n</script>\n\n<template>\n <div class=\"flex items-center justify-between gap-4\">\n <span v-if=\"!labelHidden\" class=\"min-w-0\">\n <span :id=\"id\" class=\"text-ink block text-sm\">{{ label }}</span>\n <span v-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft mt-0.5 block text-xs\">{{ hint }}</span>\n </span>\n\n <!--\n A button, not an <input type=\"checkbox\">. The native control cannot carry\n `role=\"switch\"` in every engine that matters, and the track has to be\n painted anyway; what a native input would have bought is the label\n association, and `aria-labelledby` buys that outright.\n -->\n <button\n type=\"button\"\n role=\"switch\"\n class=\"rk-switch\"\n :class=\"{ 'is-on': model }\"\n :aria-checked=\"model\"\n :aria-labelledby=\"labelHidden ? undefined : id\"\n :aria-label=\"labelHidden ? label : undefined\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n @click=\"toggle\"\n >\n <span class=\"rk-switch-knob\" aria-hidden=\"true\" />\n </button>\n </div>\n</template>\n\n<style scoped>\n.rk-switch {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n width: 2.75rem;\n height: 1.625rem;\n border-radius: 9999px;\n background: var(--color-hair);\n transition: background-color var(--duration-base) ease;\n}\n\n.rk-switch.is-on {\n background: var(--color-primary);\n}\n\n.rk-switch:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-switch:disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.rk-switch-knob {\n position: absolute;\n inset-inline-start: 0.1875rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 9999px;\n /* The on-colour, because the knob sits on the primary track when it is on,\n and that is exactly the pairing `on-primary` is tuned for. */\n background: var(--color-on-primary);\n box-shadow: var(--shadow-control);\n transition: transform var(--duration-base) var(--ease-sheet);\n}\n\n.rk-switch.is-on .rk-switch-knob {\n transform: translateX(1.125rem);\n}\n\n/* `translateX` has no logical form, so the one direction-dependent value in\n the kit that cannot be written logically is written twice. Without this\n the knob leaves the track entirely in a right-to-left layout. */\n[dir='rtl'] .rk-switch.is-on .rk-switch-knob {\n transform: translateX(-1.125rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-switch,\n .rk-switch-knob {\n transition: none;\n }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"Row extends Record<string, unknown>\">\nimport ScrollArea from './ScrollArea.vue'\n\nexport interface Column<Row> {\n /** Key into the row, and the slot name for a custom cell. */\n key: string & keyof Row\n /** Column heading. Already translated. */\n label: string\n /**\n * `end` for money and counts, which are read by their last digit.\n * The heading follows the cells, so the column reads as one column.\n */\n align?: 'start' | 'center' | 'end' | undefined\n /** Stops a column wrapping — dates, short codes. */\n nowrap?: boolean | undefined\n}\n\n/**\n * Rows of data, with the parts a hand-written `<table>` leaves out.\n *\n * ## The caption is required, and it is not a heading\n *\n * A table with no caption is announced as \"table\" and nothing else, so a screen\n * reader user landing in one has no idea what they are in. `captionHidden`\n * exists because the page usually already says it in a heading above — but the\n * table still has to carry its own name, because a heading is not attached to\n * anything.\n *\n * ## Scrolling belongs to the table, not the page\n *\n * A wide table inside a narrow column either overflows the page sideways —\n * which takes every other element with it — or is clipped. So the table sits in\n * its own scroller, and the scroller is focusable: a region you can only reach\n * by dragging is a region a keyboard cannot read at all. That is one line of\n * markup and it is the line everyone forgets.\n *\n * Headers carry `scope=\"col\"`, which is what lets a screen reader say the\n * column name before each cell instead of reading a wall of numbers.\n */\nconst {\n columns,\n rows,\n caption,\n captionHidden = false,\n rowKey,\n} = defineProps<{\n columns: readonly Column<Row>[]\n rows: readonly Row[]\n /** What this table is. Required — an unnamed table is a box of numbers. */\n caption: string\n /** Keeps the caption for assistive tech when the page already shows a heading. */\n captionHidden?: boolean | undefined\n /** Which field identifies a row. Falls back to the index. */\n rowKey?: (string & keyof Row) | undefined\n}>()\n\ndefineSlots<{\n /** Per-column cell override, named for the column key. */\n [key: string]: (props: { row: Row; value: unknown }) => unknown\n /** Shown instead of the body when there are no rows. */\n empty?: () => unknown\n}>()\n\nconst keyFor = (row: Row, index: number) => (rowKey ? String(row[rowKey]) : index)\n</script>\n\n<template>\n <!-- `ScrollArea` rather than a scroller written here: it makes this a\n named focus stop only when it overflows *and* holds nothing\n focusable. A table of links or buttons already moves under the\n keyboard, and the stop this used to have unconditionally was a press\n for nothing on every one of them. -->\n <ScrollArea axis=\"x\" :label=\"caption\" class=\"rk-table-scroll\">\n <table class=\"rk-table\">\n <caption :class=\"captionHidden ? 'rk-table-caption-hidden' : 'rk-table-caption'\">\n {{\n caption\n }}\n </caption>\n\n <thead>\n <tr>\n <th\n v-for=\"column in columns\"\n :key=\"column.key\"\n scope=\"col\"\n :class=\"[column.align && `is-${column.align}`, column.nowrap && 'is-nowrap']\"\n >\n {{ column.label }}\n </th>\n </tr>\n </thead>\n\n <tbody v-if=\"rows.length > 0\">\n <tr v-for=\"(row, index) in rows\" :key=\"keyFor(row, index)\">\n <td\n v-for=\"column in columns\"\n :key=\"column.key\"\n :class=\"[column.align && `is-${column.align}`, column.nowrap && 'is-nowrap']\"\n >\n <slot :name=\"column.key\" :row=\"row\" :value=\"row[column.key]\">\n {{ row[column.key] }}\n </slot>\n </td>\n </tr>\n </tbody>\n\n <tbody v-else>\n <tr>\n <td :colspan=\"columns.length\" class=\"rk-table-empty\">\n <slot name=\"empty\" />\n </td>\n </tr>\n </tbody>\n </table>\n </ScrollArea>\n</template>\n\n<style scoped>\n.rk-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.875rem;\n}\n\n.rk-table-caption {\n padding-bottom: 0.75rem;\n text-align: start;\n font-size: 0.8125rem;\n color: var(--color-ink-soft);\n}\n\n/* Off screen rather than `display: none`, which is not announced at all. */\n.rk-table-caption-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n.rk-table th {\n border-bottom: 1px solid var(--color-hair);\n padding: 0.625rem 0.75rem;\n text-align: start;\n font-weight: 500;\n color: var(--color-ink-soft);\n white-space: nowrap;\n}\n\n.rk-table td {\n border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 50%, transparent);\n padding: 0.75rem;\n color: var(--color-ink);\n vertical-align: top;\n}\n\n.rk-table tbody tr:last-child td {\n border-bottom: 0;\n}\n\n/* Numbers line up on their last digit, which is the one being compared.\n Both the heading and the cells, and named against `.rk-table th` rather\n than on its own: a bare `.is-end` loses to it, and the column then reads as\n two columns — a heading on the left and its numbers far off to the right. */\n.rk-table th.is-end,\n.rk-table td.is-end {\n text-align: end;\n font-variant-numeric: tabular-nums;\n}\n\n.rk-table th.is-center,\n.rk-table td.is-center {\n text-align: center;\n}\n\n.rk-table th.is-start,\n.rk-table td.is-start {\n text-align: start;\n}\n\n.is-nowrap {\n white-space: nowrap;\n}\n\n.rk-table-empty {\n padding: 2rem 0.75rem;\n text-align: center;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\" generic=\"Row extends Record<string, unknown>\">\nimport ScrollArea from './ScrollArea.vue'\n\nexport interface Column<Row> {\n /** Key into the row, and the slot name for a custom cell. */\n key: string & keyof Row\n /** Column heading. Already translated. */\n label: string\n /**\n * `end` for money and counts, which are read by their last digit.\n * The heading follows the cells, so the column reads as one column.\n */\n align?: 'start' | 'center' | 'end' | undefined\n /** Stops a column wrapping — dates, short codes. */\n nowrap?: boolean | undefined\n}\n\n/**\n * Rows of data, with the parts a hand-written `<table>` leaves out.\n *\n * ## The caption is required, and it is not a heading\n *\n * A table with no caption is announced as \"table\" and nothing else, so a screen\n * reader user landing in one has no idea what they are in. `captionHidden`\n * exists because the page usually already says it in a heading above — but the\n * table still has to carry its own name, because a heading is not attached to\n * anything.\n *\n * ## Scrolling belongs to the table, not the page\n *\n * A wide table inside a narrow column either overflows the page sideways —\n * which takes every other element with it — or is clipped. So the table sits in\n * its own scroller, and the scroller is focusable: a region you can only reach\n * by dragging is a region a keyboard cannot read at all. That is one line of\n * markup and it is the line everyone forgets.\n *\n * Headers carry `scope=\"col\"`, which is what lets a screen reader say the\n * column name before each cell instead of reading a wall of numbers.\n */\nconst {\n columns,\n rows,\n caption,\n captionHidden = false,\n rowKey,\n} = defineProps<{\n columns: readonly Column<Row>[]\n rows: readonly Row[]\n /** What this table is. Required — an unnamed table is a box of numbers. */\n caption: string\n /** Keeps the caption for assistive tech when the page already shows a heading. */\n captionHidden?: boolean | undefined\n /** Which field identifies a row. Falls back to the index. */\n rowKey?: (string & keyof Row) | undefined\n}>()\n\ndefineSlots<{\n /** Per-column cell override, named for the column key. */\n [key: string]: (props: { row: Row; value: unknown }) => unknown\n /** Shown instead of the body when there are no rows. */\n empty?: () => unknown\n}>()\n\nconst keyFor = (row: Row, index: number) => (rowKey ? String(row[rowKey]) : index)\n</script>\n\n<template>\n <!-- `ScrollArea` rather than a scroller written here: it makes this a\n named focus stop only when it overflows *and* holds nothing\n focusable. A table of links or buttons already moves under the\n keyboard, and the stop this used to have unconditionally was a press\n for nothing on every one of them. -->\n <ScrollArea axis=\"x\" :label=\"caption\" class=\"rk-table-scroll\">\n <table class=\"rk-table\">\n <caption :class=\"captionHidden ? 'rk-table-caption-hidden' : 'rk-table-caption'\">\n {{\n caption\n }}\n </caption>\n\n <thead>\n <tr>\n <th\n v-for=\"column in columns\"\n :key=\"column.key\"\n scope=\"col\"\n :class=\"[column.align && `is-${column.align}`, column.nowrap && 'is-nowrap']\"\n >\n {{ column.label }}\n </th>\n </tr>\n </thead>\n\n <tbody v-if=\"rows.length > 0\">\n <tr v-for=\"(row, index) in rows\" :key=\"keyFor(row, index)\">\n <td\n v-for=\"column in columns\"\n :key=\"column.key\"\n :class=\"[column.align && `is-${column.align}`, column.nowrap && 'is-nowrap']\"\n >\n <slot :name=\"column.key\" :row=\"row\" :value=\"row[column.key]\">\n {{ row[column.key] }}\n </slot>\n </td>\n </tr>\n </tbody>\n\n <tbody v-else>\n <tr>\n <td :colspan=\"columns.length\" class=\"rk-table-empty\">\n <slot name=\"empty\" />\n </td>\n </tr>\n </tbody>\n </table>\n </ScrollArea>\n</template>\n\n<style scoped>\n.rk-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.875rem;\n}\n\n.rk-table-caption {\n padding-bottom: 0.75rem;\n text-align: start;\n font-size: 0.8125rem;\n color: var(--color-ink-soft);\n}\n\n/* Off screen rather than `display: none`, which is not announced at all. */\n.rk-table-caption-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n.rk-table th {\n border-bottom: 1px solid var(--color-hair);\n padding: 0.625rem 0.75rem;\n text-align: start;\n font-weight: 500;\n color: var(--color-ink-soft);\n white-space: nowrap;\n}\n\n.rk-table td {\n border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 50%, transparent);\n padding: 0.75rem;\n color: var(--color-ink);\n vertical-align: top;\n}\n\n.rk-table tbody tr:last-child td {\n border-bottom: 0;\n}\n\n/* Numbers line up on their last digit, which is the one being compared.\n Both the heading and the cells, and named against `.rk-table th` rather\n than on its own: a bare `.is-end` loses to it, and the column then reads as\n two columns — a heading on the left and its numbers far off to the right. */\n.rk-table th.is-end,\n.rk-table td.is-end {\n text-align: end;\n font-variant-numeric: tabular-nums;\n}\n\n.rk-table th.is-center,\n.rk-table td.is-center {\n text-align: center;\n}\n\n.rk-table th.is-start,\n.rk-table td.is-start {\n text-align: start;\n}\n\n.is-nowrap {\n white-space: nowrap;\n}\n\n.rk-table-empty {\n padding: 2rem 0.75rem;\n text-align: center;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { useBoundValue } from '../composables/use-bound-value'\nimport FormField from './FormField.vue'\nimport { useFieldAttrs } from '../composables/use-field-attrs'\n\n/**\n * A multi-line field.\n *\n * `rows` rather than an auto-growing box: a textarea that resizes as it is\n * typed into moves everything below it, and in a form that means the button\n * the writer is heading for keeps sliding away. Growth is left to the browser's\n * own resize handle, which the writer controls.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs()\n\nconst {\n modelValue = undefined,\n label,\n error = '',\n hint = '',\n labelHidden = false,\n rows = 4,\n size = 'md',\n variant = 'default',\n fieldId = undefined,\n controlClass = undefined,\n} = defineProps<{\n /** The text, with `v-model`. */\n modelValue?: string | undefined\n label: string\n error?: string | undefined\n hint?: string | undefined\n labelHidden?: boolean | undefined\n rows?: number | undefined\n /**\n * `sm` tightens the label and the spacing. It does **not** shrink the text:\n * iOS zooms the viewport when it focuses a field under 16px and never zooms\n * back, which is why both phone apps force 16px on form elements in their\n * base layer.\n */\n size?: 'sm' | 'md' | undefined\n /**\n * `unstyled` keeps the wiring and drops the surface.\n *\n * The label, the generated id, `aria-describedby` and the error are what a\n * field is; the border and the height are what it looks like. A search box\n * inside a bordered row, a url field in an editor popover — those places\n * were hand-writing the whole thing to avoid the appearance, and losing the\n * wiring with it.\n *\n * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n * primitive is finished when the app can take its behaviour without its\n * paint.\n */\n variant?: 'default' | 'unstyled' | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n /**\n * Classes for the control itself, rather than for the field around it.\n *\n * `class` lands on the field, because that is where Vue puts a\n * component's class and because a layout class means \"space this field\".\n * That leaves `variant=\"unstyled\"` with no way to paint the control it\n * just stripped — the point of stripping it — which is why an app with a\n * large amount field wrote the whole thing by hand instead.\n *\n * It appends, so with the default variant a conflict is settled by\n * Tailwind's own order rather than by writing it here; reach for it with\n * `unstyled`, where there is nothing to settle.\n */\n controlClass?: string | undefined\n}>()\n\n/* Declared by hand rather than with defineModel: it accepts `undefined` and\n emits only strings, which defineModel cannot type both ways. See\n `use-bound-value.ts`. */\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\nconst model = useBoundValue(\n () => modelValue,\n (value) => emit('update:modelValue', value),\n)\nconst control = ref<HTMLTextAreaElement | null>(null)\n\n/**\n * Focus the control, for a caller that owns when it happens.\n *\n * A `ref` on a component gives the component and not the element, so without\n * this a field cannot be focused at all — which is why an app that focuses\n * its amount field when a sheet opens, and again when the amount is\n * rejected, wrote the whole field by hand instead and said so in a comment.\n * That is the gap test, with the reason already written down.\n *\n * `ErrorSummary` has exposed `focus` since it existed, for the same need\n * from the other end.\n */\nfunction focus() {\n control.value?.focus()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :class=\"fieldClass\"\n :style=\"fieldStyle\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :label-hidden=\"labelHidden\"\n :size=\"size\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <textarea\n :id=\"id\"\n ref=\"control\"\n v-model=\"model\"\n :rows=\"rows\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n v-bind=\"controlAttrs\"\n :class=\"[\n variant === 'unstyled'\n ? ''\n : 'control text-ink rounded-card focus-visible:outline-primary resize-y px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1',\n 'text-base',\n variant !== 'unstyled' && invalid ? 'border-negative' : '',\n controlClass,\n ]\"\n />\n </template>\n </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { useBoundValue } from '../composables/use-bound-value'\nimport FormField from './FormField.vue'\nimport { useFieldAttrs } from '../composables/use-field-attrs'\n\n/**\n * A multi-line field.\n *\n * `rows` rather than an auto-growing box: a textarea that resizes as it is\n * typed into moves everything below it, and in a form that means the button\n * the writer is heading for keeps sliding away. Growth is left to the browser's\n * own resize handle, which the writer controls.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs()\n\nconst {\n modelValue = undefined,\n label,\n error = '',\n hint = '',\n labelHidden = false,\n rows = 4,\n size = 'md',\n variant = 'default',\n fieldId = undefined,\n controlClass = undefined,\n} = defineProps<{\n /** The text, with `v-model`. */\n modelValue?: string | undefined\n label: string\n error?: string | undefined\n hint?: string | undefined\n labelHidden?: boolean | undefined\n rows?: number | undefined\n /**\n * `sm` tightens the label and the spacing. It does **not** shrink the text:\n * iOS zooms the viewport when it focuses a field under 16px and never zooms\n * back, which is why both phone apps force 16px on form elements in their\n * base layer.\n */\n size?: 'sm' | 'md' | undefined\n /**\n * `unstyled` keeps the wiring and drops the surface.\n *\n * The label, the generated id, `aria-describedby` and the error are what a\n * field is; the border and the height are what it looks like. A search box\n * inside a bordered row, a url field in an editor popover — those places\n * were hand-writing the whole thing to avoid the appearance, and losing the\n * wiring with it.\n *\n * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n * primitive is finished when the app can take its behaviour without its\n * paint.\n */\n variant?: 'default' | 'unstyled' | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n /**\n * Classes for the control itself, rather than for the field around it.\n *\n * `class` lands on the field, because that is where Vue puts a\n * component's class and because a layout class means \"space this field\".\n * That leaves `variant=\"unstyled\"` with no way to paint the control it\n * just stripped — the point of stripping it — which is why an app with a\n * large amount field wrote the whole thing by hand instead.\n *\n * It appends, so with the default variant a conflict is settled by\n * Tailwind's own order rather than by writing it here; reach for it with\n * `unstyled`, where there is nothing to settle.\n */\n controlClass?: string | undefined\n}>()\n\n/* Declared by hand rather than with defineModel: it accepts `undefined` and\n emits only strings, which defineModel cannot type both ways. See\n `use-bound-value.ts`. */\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\nconst model = useBoundValue(\n () => modelValue,\n (value) => emit('update:modelValue', value),\n)\nconst control = ref<HTMLTextAreaElement | null>(null)\n\n/**\n * Focus the control, for a caller that owns when it happens.\n *\n * A `ref` on a component gives the component and not the element, so without\n * this a field cannot be focused at all — which is why an app that focuses\n * its amount field when a sheet opens, and again when the amount is\n * rejected, wrote the whole field by hand instead and said so in a comment.\n * That is the gap test, with the reason already written down.\n *\n * `ErrorSummary` has exposed `focus` since it existed, for the same need\n * from the other end.\n */\nfunction focus() {\n control.value?.focus()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :class=\"fieldClass\"\n :style=\"fieldStyle\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :label-hidden=\"labelHidden\"\n :size=\"size\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <textarea\n :id=\"id\"\n ref=\"control\"\n v-model=\"model\"\n :rows=\"rows\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n v-bind=\"controlAttrs\"\n :class=\"[\n variant === 'unstyled'\n ? ''\n : 'control text-ink rounded-card focus-visible:outline-primary resize-y px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1',\n 'text-base',\n variant !== 'unstyled' && invalid ? 'border-negative' : '',\n controlClass,\n ]\"\n />\n </template>\n </FormField>\n</template>\n","<script lang=\"ts\" setup>\n/**\n * A list with nothing in it yet, said kindly.\n *\n * A blank area reads as a page that failed to load, and the reader's first\n * thought is that something is broken rather than that they have not started.\n * So there is always a sentence, and the slot below it is where the way out\n * goes — the button that creates the first one.\n */\nconst { title, description = '' } = defineProps<{\n title: string\n description?: string | undefined\n}>()\n</script>\n\n<template>\n <div class=\"flex flex-col items-center gap-3 px-6 py-10 text-center\">\n <div\n v-if=\"$slots.icon\"\n class=\"bg-muted text-primary rounded-card flex size-12 items-center justify-center\"\n >\n <slot name=\"icon\" />\n </div>\n\n <h3 class=\"text-ink text-base font-semibold\">{{ title }}</h3>\n <p v-if=\"description\" class=\"text-ink-soft max-w-[36ch] text-sm\">\n {{ description }}\n </p>\n\n <div v-if=\"$slots.action\" class=\"mt-2 flex w-full flex-col gap-2\">\n <slot name=\"action\" />\n </div>\n </div>\n</template>\n\n<style></style>\n","<script lang=\"ts\" setup>\n/**\n * A list with nothing in it yet, said kindly.\n *\n * A blank area reads as a page that failed to load, and the reader's first\n * thought is that something is broken rather than that they have not started.\n * So there is always a sentence, and the slot below it is where the way out\n * goes — the button that creates the first one.\n */\nconst { title, description = '' } = defineProps<{\n title: string\n description?: string | undefined\n}>()\n</script>\n\n<template>\n <div class=\"flex flex-col items-center gap-3 px-6 py-10 text-center\">\n <div\n v-if=\"$slots.icon\"\n class=\"bg-muted text-primary rounded-card flex size-12 items-center justify-center\"\n >\n <slot name=\"icon\" />\n </div>\n\n <h3 class=\"text-ink text-base font-semibold\">{{ title }}</h3>\n <p v-if=\"description\" class=\"text-ink-soft max-w-[36ch] text-sm\">\n {{ description }}\n </p>\n\n <div v-if=\"$slots.action\" class=\"mt-2 flex w-full flex-col gap-2\">\n <slot name=\"action\" />\n </div>\n </div>\n</template>\n\n<style></style>\n","<script setup lang=\"ts\">\nimport { onErrorCaptured, ref, watch } from 'vue'\n\n/**\n * Keeps one broken screen from taking the whole app down.\n *\n * An error thrown while a component renders unmounts the tree above it, and a\n * single-page app has nothing underneath — the tab goes white and whoever was\n * using it loses what they were in the middle of.\n *\n * What it does *not* do is decide what that looks like. All three apps in this\n * workshop had written this component, and the parts they had in common were\n * the mechanism — catch, report, reset when the route changes — while the\n * parts that differed were the ones that should: an icon, a sentence, a way\n * back. So the fallback is a slot, and the kit stays out of the wording.\n *\n * Only errors thrown while rendering a descendant reach `onErrorCaptured`.\n * Rejected promises and failed queries do not, and should not: those belong to\n * the code that owns the request.\n *\n * @example\n * ```vue\n * <ErrorBoundary :resetKey=\"route.fullPath\" @error=\"reportError\">\n * <template #fallback=\"{ reset }\">\n * <EmptyState :title=\"t('error.title')\">\n * <BaseButton @click=\"reset\">{{ t('error.retry') }}</BaseButton>\n * </EmptyState>\n * </template>\n * <RouterView />\n * </ErrorBoundary>\n * ```\n */\nconst { resetKey } = defineProps<{\n /**\n * Clears the error whenever it changes — a route path, usually.\n *\n * An error on one screen should not follow somebody to the next one, and\n * without this the boundary stays broken until a full reload.\n */\n resetKey?: string | number | undefined\n}>()\n\nconst emit = defineEmits<{ error: [cause: unknown] }>()\n\nconst failed = ref<unknown>(null)\n\nfunction reset() {\n failed.value = null\n}\n\nonErrorCaptured((cause) => {\n failed.value = cause\n emit('error', cause)\n\n // Swallowed on purpose: the fallback is now showing, and letting it travel\n // further up would unmount the boundary along with everything else.\n return false\n})\n\nwatch(\n () => resetKey,\n () => reset(),\n)\n</script>\n\n<template>\n <slot v-if=\"failed\" name=\"fallback\" :error=\"failed\" :reset=\"reset\" />\n <slot v-else />\n</template>\n","<script setup lang=\"ts\">\nimport { onErrorCaptured, ref, watch } from 'vue'\n\n/**\n * Keeps one broken screen from taking the whole app down.\n *\n * An error thrown while a component renders unmounts the tree above it, and a\n * single-page app has nothing underneath — the tab goes white and whoever was\n * using it loses what they were in the middle of.\n *\n * What it does *not* do is decide what that looks like. All three apps in this\n * workshop had written this component, and the parts they had in common were\n * the mechanism — catch, report, reset when the route changes — while the\n * parts that differed were the ones that should: an icon, a sentence, a way\n * back. So the fallback is a slot, and the kit stays out of the wording.\n *\n * Only errors thrown while rendering a descendant reach `onErrorCaptured`.\n * Rejected promises and failed queries do not, and should not: those belong to\n * the code that owns the request.\n *\n * @example\n * ```vue\n * <ErrorBoundary :resetKey=\"route.fullPath\" @error=\"reportError\">\n * <template #fallback=\"{ reset }\">\n * <EmptyState :title=\"t('error.title')\">\n * <BaseButton @click=\"reset\">{{ t('error.retry') }}</BaseButton>\n * </EmptyState>\n * </template>\n * <RouterView />\n * </ErrorBoundary>\n * ```\n */\nconst { resetKey } = defineProps<{\n /**\n * Clears the error whenever it changes — a route path, usually.\n *\n * An error on one screen should not follow somebody to the next one, and\n * without this the boundary stays broken until a full reload.\n */\n resetKey?: string | number | undefined\n}>()\n\nconst emit = defineEmits<{ error: [cause: unknown] }>()\n\nconst failed = ref<unknown>(null)\n\nfunction reset() {\n failed.value = null\n}\n\nonErrorCaptured((cause) => {\n failed.value = cause\n emit('error', cause)\n\n // Swallowed on purpose: the fallback is now showing, and letting it travel\n // further up would unmount the boundary along with everything else.\n return false\n})\n\nwatch(\n () => resetKey,\n () => reset(),\n)\n</script>\n\n<template>\n <slot v-if=\"failed\" name=\"fallback\" :error=\"failed\" :reset=\"reset\" />\n <slot v-else />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One measure, centred, with the page's gutters.\n *\n * The first thing a desktop app needs and the last thing a kit built for\n * phones thinks to provide — a 430 px shell has no use for a maximum width, so\n * this was missing, and the consuming app wrote `max-w-[1200px] mx-auto px-6`\n * into every layout instead. Written once it costs nothing; written eleven\n * times it is eleven chances for one page to be forty pixels narrower than the\n * rest, which is the kind of thing nobody can name and everybody can see.\n *\n * Two widths rather than one, because a page and a passage are different\n * problems: `wide` is the page, `reading` is a column of prose at the width\n * type wants to be read at. Both come from tokens, so an app that measures its\n * page at 1120 rather than 1200 can still use this.\n */\nconst { width = 'wide', as = 'div' } = defineProps<{\n /** `wide` for a page, `reading` for prose, `full` to opt out. */\n width?: 'wide' | 'reading' | 'full' | undefined\n /** The element to render. `main`, `section` and `article` all belong here. */\n as?: string | undefined\n}>()\n\n/**\n * From tokens, not from literals.\n *\n * A width is a role the same way a colour is, and baking one in makes the\n * component unusable by any app that measured its own page differently — which\n * the first consumer had, deliberately. Override `--measure-page` and\n * `--measure-reading` in the app's `@theme` and every container follows.\n */\nconst WIDTHS = {\n wide: 'var(--measure-page)',\n reading: 'var(--measure-reading)',\n full: 'none',\n} as const\n\nconst measure = computed(() => WIDTHS[width])\n</script>\n\n<template>\n <component :is=\"as\" class=\"mx-auto w-full px-5 sm:px-8\" :style=\"{ maxWidth: measure }\">\n <slot />\n </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One measure, centred, with the page's gutters.\n *\n * The first thing a desktop app needs and the last thing a kit built for\n * phones thinks to provide — a 430 px shell has no use for a maximum width, so\n * this was missing, and the consuming app wrote `max-w-[1200px] mx-auto px-6`\n * into every layout instead. Written once it costs nothing; written eleven\n * times it is eleven chances for one page to be forty pixels narrower than the\n * rest, which is the kind of thing nobody can name and everybody can see.\n *\n * Two widths rather than one, because a page and a passage are different\n * problems: `wide` is the page, `reading` is a column of prose at the width\n * type wants to be read at. Both come from tokens, so an app that measures its\n * page at 1120 rather than 1200 can still use this.\n */\nconst { width = 'wide', as = 'div' } = defineProps<{\n /** `wide` for a page, `reading` for prose, `full` to opt out. */\n width?: 'wide' | 'reading' | 'full' | undefined\n /** The element to render. `main`, `section` and `article` all belong here. */\n as?: string | undefined\n}>()\n\n/**\n * From tokens, not from literals.\n *\n * A width is a role the same way a colour is, and baking one in makes the\n * component unusable by any app that measured its own page differently — which\n * the first consumer had, deliberately. Override `--measure-page` and\n * `--measure-reading` in the app's `@theme` and every container follows.\n */\nconst WIDTHS = {\n wide: 'var(--measure-page)',\n reading: 'var(--measure-reading)',\n full: 'none',\n} as const\n\nconst measure = computed(() => WIDTHS[width])\n</script>\n\n<template>\n <component :is=\"as\" class=\"mx-auto w-full px-5 sm:px-8\" :style=\"{ maxWidth: measure }\">\n <slot />\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * The bar at the top of a screen: a title with room either side of it.\n *\n * Three fixed columns rather than a flex row, so the title is centred on the\n * screen rather than centred on what is left after the buttons. A back arrow on\n * one side and nothing on the other would otherwise push every title off centre\n * by exactly half a button, which is visible the moment two screens sit next to\n * each other.\n */\nconst { title } = defineProps<{ title: string }>()\n</script>\n\n<template>\n <header class=\"grid h-12 shrink-0 grid-cols-[2.5rem_1fr_2.5rem] items-center\">\n <div class=\"justify-self-start\"><slot name=\"left\" /></div>\n\n <h1 class=\"text-ink flex min-w-0 justify-center text-base font-semibold tabular-nums\">\n <slot name=\"title\">\n <span class=\"truncate\">{{ title }}</span>\n </slot>\n </h1>\n\n <div class=\"justify-self-end\"><slot name=\"right\" /></div>\n </header>\n</template>\n","<script setup lang=\"ts\">\n/**\n * The bar at the top of a screen: a title with room either side of it.\n *\n * Three fixed columns rather than a flex row, so the title is centred on the\n * screen rather than centred on what is left after the buttons. A back arrow on\n * one side and nothing on the other would otherwise push every title off centre\n * by exactly half a button, which is visible the moment two screens sit next to\n * each other.\n */\nconst { title } = defineProps<{ title: string }>()\n</script>\n\n<template>\n <header class=\"grid h-12 shrink-0 grid-cols-[2.5rem_1fr_2.5rem] items-center\">\n <div class=\"justify-self-start\"><slot name=\"left\" /></div>\n\n <h1 class=\"text-ink flex min-w-0 justify-center text-base font-semibold tabular-nums\">\n <slot name=\"title\">\n <span class=\"truncate\">{{ title }}</span>\n </slot>\n </h1>\n\n <div class=\"justify-self-end\"><slot name=\"right\" /></div>\n </header>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * How far through something somebody is.\n *\n * Clamped rather than trusted. A progress bar is always fed a computed number,\n * and computed numbers arrive as 101, as -0, and as NaN when the denominator\n * is zero — which is the ordinary state of a course nobody has started. Any of\n * those renders a bar that runs past its own track, and it is the sort of\n * thing that ships because the happy path was the only one anybody looked at.\n */\nconst {\n value,\n max = 100,\n label,\n size = 'md',\n} = defineProps<{\n value: number\n max?: number | undefined\n /**\n * How thick the track is. `sm` for a bar under a step counter, where it is a\n * hint rather than the subject; `lg` where the progress is the point.\n *\n * It shipped at one thickness and the two bars anybody wanted were `h-1`.\n */\n size?: 'sm' | 'md' | 'lg' | undefined\n /** For screen readers. Without it this is a rectangle that means nothing. */\n label?: string | undefined\n}>()\n\nconst TRACK = {\n sm: 'h-1',\n md: 'h-1.5',\n lg: 'h-2',\n} as const\n\nconst portion = computed(() => {\n if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0\n\n return Math.min(100, Math.max(0, (value / max) * 100))\n})\n</script>\n\n<template>\n <div\n class=\"bg-muted w-full overflow-hidden rounded-full\"\n :class=\"TRACK[size]\"\n role=\"progressbar\"\n :aria-valuenow=\"Math.round(portion)\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n :aria-label=\"label\"\n >\n <div\n class=\"bg-primary h-full rounded-full transition-[width] duration-700 ease-out\"\n :style=\"{ width: `${portion}%` }\"\n />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * How far through something somebody is.\n *\n * Clamped rather than trusted. A progress bar is always fed a computed number,\n * and computed numbers arrive as 101, as -0, and as NaN when the denominator\n * is zero — which is the ordinary state of a course nobody has started. Any of\n * those renders a bar that runs past its own track, and it is the sort of\n * thing that ships because the happy path was the only one anybody looked at.\n */\nconst {\n value,\n max = 100,\n label,\n size = 'md',\n} = defineProps<{\n value: number\n max?: number | undefined\n /**\n * How thick the track is. `sm` for a bar under a step counter, where it is a\n * hint rather than the subject; `lg` where the progress is the point.\n *\n * It shipped at one thickness and the two bars anybody wanted were `h-1`.\n */\n size?: 'sm' | 'md' | 'lg' | undefined\n /** For screen readers. Without it this is a rectangle that means nothing. */\n label?: string | undefined\n}>()\n\nconst TRACK = {\n sm: 'h-1',\n md: 'h-1.5',\n lg: 'h-2',\n} as const\n\nconst portion = computed(() => {\n if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0\n\n return Math.min(100, Math.max(0, (value / max) * 100))\n})\n</script>\n\n<template>\n <div\n class=\"bg-muted w-full overflow-hidden rounded-full\"\n :class=\"TRACK[size]\"\n role=\"progressbar\"\n :aria-valuenow=\"Math.round(portion)\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n :aria-label=\"label\"\n >\n <div\n class=\"bg-primary h-full rounded-full transition-[width] duration-700 ease-out\"\n :style=\"{ width: `${portion}%` }\"\n />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One plan in a pricing table.\n *\n * Every string arrives as a prop. A component in a kit that reaches for its\n * consumer's translations is not shared, it is one app's furniture parked\n * somewhere else — and the second app to want it would have to fork it.\n *\n * The tone is semantic rather than named after a colour. \"Gold\" and \"diamond\"\n * are one product's tiers; `warm` and `cool` are what a pricing table actually\n * needs, which is for three columns to be distinguishable at a glance without\n * any of them shouting. A table where every column is a different hue reads as\n * three products from three companies.\n */\nconst {\n name,\n lead,\n price,\n period,\n note,\n features,\n tone = 'neutral',\n badge,\n chip,\n recommended = false,\n} = defineProps<{\n name: string\n lead?: string | undefined\n /** Already formatted, or whatever stands in while there is no price. */\n price: string\n period?: string | undefined\n note?: string | undefined\n features: readonly string[]\n tone?: 'neutral' | 'warm' | 'cool' | undefined\n /** Rides on the card's edge, e.g. \"Recommended\". */\n badge?: string | undefined\n /** Sits inside, e.g. \"30% cheaper\" or \"Your plan\". */\n chip?: string | undefined\n /** Raises the card and lets the badge show. */\n recommended?: boolean | undefined\n}>()\n\n/* Roles, not hex values. This used to carry `#b8862c` and `#4a86a8` with\n hand-picked darker shades for text, which is the one thing the kit's rules\n forbid: a colour in a component cannot follow a palette, so a pricing table\n stayed amber and blue whatever the app had rebranded to.\n\n The ring is handed to the surface as a variable rather than set as a\n `border-color` class. The surface draws its own border, and two utilities\n setting the same property would be decided by stylesheet order. */\n/* The icon box takes the tone as its ground and `ink` for whatever is in\n it. The slot is the app's, so the kit cannot know whether it holds a\n decorative glyph or a letter somebody has to read — and a role written on\n a wash of itself is unreadable either way. The ring and the soft panel\n still carry the tone. */\nconst TONE = {\n neutral: {\n ring: '',\n soft: 'bg-muted text-ink-soft',\n icon: 'bg-primary/10 text-ink',\n },\n warm: {\n ring: '[--surface-border-color:color-mix(in_oklab,var(--color-warning)_40%,transparent)]',\n soft: 'bg-warning/15 text-ink',\n icon: 'bg-warning/15 text-ink',\n },\n cool: {\n ring: '[--surface-border-color:color-mix(in_oklab,var(--color-accent)_38%,transparent)]',\n soft: 'bg-accent/12 text-ink',\n icon: 'bg-accent/12 text-ink',\n },\n} as const\n\nconst palette = computed(() => TONE[tone])\n</script>\n\n<template>\n <article\n class=\"surface rounded-card ease-standard relative flex h-full flex-col p-7 transition-[border-color,box-shadow,transform] duration-(--duration-slower) hover:[--surface-border-color:color-mix(in_oklab,var(--color-primary)_60%,transparent)] hover:[--surface-shadow:var(--shadow-raised)] sm:p-8\"\n :class=\"[\n palette.ring,\n recommended ? '[--surface-shadow:var(--shadow-raised)]' : 'hover:-translate-y-0.5',\n ]\"\n >\n <!-- On the edge rather than inside, so it cannot be mistaken for one of\n the plan's own features. -->\n <span\n v-if=\"badge && recommended\"\n class=\"bg-primary rounded-cell text-on-primary absolute -top-3 left-7 px-3 py-1 text-[0.7rem] font-semibold\"\n >\n {{ badge }}\n </span>\n\n <div class=\"flex items-start justify-between gap-4\">\n <span\n v-if=\"$slots.icon\"\n class=\"rounded-card grid size-11 place-items-center text-xl\"\n :class=\"palette.icon\"\n >\n <slot name=\"icon\" />\n </span>\n\n <span\n v-if=\"chip\"\n class=\"rounded-cell ml-auto px-2.5 py-1 text-[0.7rem] font-medium\"\n :class=\"palette.soft\"\n >\n {{ chip }}\n </span>\n </div>\n\n <h3 class=\"text-ink mt-5 text-lg font-semibold\">{{ name }}</h3>\n <p v-if=\"lead\" class=\"text-ink-soft mt-1.5 text-sm leading-relaxed\">{{ lead }}</p>\n\n <p class=\"mt-6 flex items-baseline gap-1.5\">\n <span class=\"text-ink text-3xl font-semibold tracking-tight tabular-nums\">{{ price }}</span>\n <span v-if=\"period\" class=\"text-ink-soft text-sm\">{{ period }}</span>\n </p>\n <p v-if=\"note\" class=\"text-ink-soft mt-1 text-xs\">{{ note }}</p>\n\n <ul class=\"mt-7 flex-1 space-y-3\">\n <li v-for=\"feature in features\" :key=\"feature\" class=\"flex gap-3 text-sm\">\n <!-- The marker is a slot because a pricing table often uses it to say\n something the tone cannot: on the tier you already have, these are\n things you hold rather than things you would get. A consumer that\n had drawn that distinction should not have to give it up to reach\n for this component. -->\n <span v-if=\"$slots.bullet\" class=\"mt-[0.45rem] shrink-0\"><slot name=\"bullet\" /></span>\n <span\n v-else\n class=\"bg-primary/45 mt-[0.45rem] size-1.5 shrink-0 rounded-full\"\n aria-hidden=\"true\"\n />\n <span class=\"text-ink-soft leading-relaxed\">{{ feature }}</span>\n </li>\n </ul>\n\n <div v-if=\"$slots.action\" class=\"mt-8\"><slot name=\"action\" /></div>\n </article>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One plan in a pricing table.\n *\n * Every string arrives as a prop. A component in a kit that reaches for its\n * consumer's translations is not shared, it is one app's furniture parked\n * somewhere else — and the second app to want it would have to fork it.\n *\n * The tone is semantic rather than named after a colour. \"Gold\" and \"diamond\"\n * are one product's tiers; `warm` and `cool` are what a pricing table actually\n * needs, which is for three columns to be distinguishable at a glance without\n * any of them shouting. A table where every column is a different hue reads as\n * three products from three companies.\n */\nconst {\n name,\n lead,\n price,\n period,\n note,\n features,\n tone = 'neutral',\n badge,\n chip,\n recommended = false,\n} = defineProps<{\n name: string\n lead?: string | undefined\n /** Already formatted, or whatever stands in while there is no price. */\n price: string\n period?: string | undefined\n note?: string | undefined\n features: readonly string[]\n tone?: 'neutral' | 'warm' | 'cool' | undefined\n /** Rides on the card's edge, e.g. \"Recommended\". */\n badge?: string | undefined\n /** Sits inside, e.g. \"30% cheaper\" or \"Your plan\". */\n chip?: string | undefined\n /** Raises the card and lets the badge show. */\n recommended?: boolean | undefined\n}>()\n\n/* Roles, not hex values. This used to carry `#b8862c` and `#4a86a8` with\n hand-picked darker shades for text, which is the one thing the kit's rules\n forbid: a colour in a component cannot follow a palette, so a pricing table\n stayed amber and blue whatever the app had rebranded to.\n\n The ring is handed to the surface as a variable rather than set as a\n `border-color` class. The surface draws its own border, and two utilities\n setting the same property would be decided by stylesheet order. */\n/* The icon box takes the tone as its ground and `ink` for whatever is in\n it. The slot is the app's, so the kit cannot know whether it holds a\n decorative glyph or a letter somebody has to read — and a role written on\n a wash of itself is unreadable either way. The ring and the soft panel\n still carry the tone. */\nconst TONE = {\n neutral: {\n ring: '',\n soft: 'bg-muted text-ink-soft',\n icon: 'bg-primary/10 text-ink',\n },\n warm: {\n ring: '[--surface-border-color:color-mix(in_oklab,var(--color-warning)_40%,transparent)]',\n soft: 'bg-warning/15 text-ink',\n icon: 'bg-warning/15 text-ink',\n },\n cool: {\n ring: '[--surface-border-color:color-mix(in_oklab,var(--color-accent)_38%,transparent)]',\n soft: 'bg-accent/12 text-ink',\n icon: 'bg-accent/12 text-ink',\n },\n} as const\n\nconst palette = computed(() => TONE[tone])\n</script>\n\n<template>\n <article\n class=\"surface rounded-card ease-standard relative flex h-full flex-col p-7 transition-[border-color,box-shadow,transform] duration-(--duration-slower) hover:[--surface-border-color:color-mix(in_oklab,var(--color-primary)_60%,transparent)] hover:[--surface-shadow:var(--shadow-raised)] sm:p-8\"\n :class=\"[\n palette.ring,\n recommended ? '[--surface-shadow:var(--shadow-raised)]' : 'hover:-translate-y-0.5',\n ]\"\n >\n <!-- On the edge rather than inside, so it cannot be mistaken for one of\n the plan's own features. -->\n <span\n v-if=\"badge && recommended\"\n class=\"bg-primary rounded-cell text-on-primary absolute -top-3 left-7 px-3 py-1 text-[0.7rem] font-semibold\"\n >\n {{ badge }}\n </span>\n\n <div class=\"flex items-start justify-between gap-4\">\n <span\n v-if=\"$slots.icon\"\n class=\"rounded-card grid size-11 place-items-center text-xl\"\n :class=\"palette.icon\"\n >\n <slot name=\"icon\" />\n </span>\n\n <span\n v-if=\"chip\"\n class=\"rounded-cell ml-auto px-2.5 py-1 text-[0.7rem] font-medium\"\n :class=\"palette.soft\"\n >\n {{ chip }}\n </span>\n </div>\n\n <h3 class=\"text-ink mt-5 text-lg font-semibold\">{{ name }}</h3>\n <p v-if=\"lead\" class=\"text-ink-soft mt-1.5 text-sm leading-relaxed\">{{ lead }}</p>\n\n <p class=\"mt-6 flex items-baseline gap-1.5\">\n <span class=\"text-ink text-3xl font-semibold tracking-tight tabular-nums\">{{ price }}</span>\n <span v-if=\"period\" class=\"text-ink-soft text-sm\">{{ period }}</span>\n </p>\n <p v-if=\"note\" class=\"text-ink-soft mt-1 text-xs\">{{ note }}</p>\n\n <ul class=\"mt-7 flex-1 space-y-3\">\n <li v-for=\"feature in features\" :key=\"feature\" class=\"flex gap-3 text-sm\">\n <!-- The marker is a slot because a pricing table often uses it to say\n something the tone cannot: on the tier you already have, these are\n things you hold rather than things you would get. A consumer that\n had drawn that distinction should not have to give it up to reach\n for this component. -->\n <span v-if=\"$slots.bullet\" class=\"mt-[0.45rem] shrink-0\"><slot name=\"bullet\" /></span>\n <span\n v-else\n class=\"bg-primary/45 mt-[0.45rem] size-1.5 shrink-0 rounded-full\"\n aria-hidden=\"true\"\n />\n <span class=\"text-ink-soft leading-relaxed\">{{ feature }}</span>\n </li>\n </ul>\n\n <div v-if=\"$slots.action\" class=\"mt-8\"><slot name=\"action\" /></div>\n </article>\n</template>\n","<script setup lang=\"ts\">\n/**\n * A small coloured dot, optionally labelled.\n *\n * Takes the colour as a class rather than a category, so an app can key it off\n * whatever its own domain calls a category — habit kinds, expense types,\n * priorities — without this component knowing about any of them.\n */\nconst { fill, label = '' } = defineProps<{\n /** Background utility for the dot, e.g. `bg-positive`. */\n fill: string\n /** Optional text after the dot. Omit for a bare marker. */\n label?: string | undefined\n}>()\n</script>\n\n<template>\n <span class=\"inline-flex items-center gap-1.5\">\n <span class=\"size-2 rounded-full\" :class=\"fill\" />\n <span v-if=\"label\" class=\"text-ink-soft text-xs font-medium\">{{ label }}</span>\n </span>\n</template>\n","<script setup lang=\"ts\">\n/**\n * A small coloured dot, optionally labelled.\n *\n * Takes the colour as a class rather than a category, so an app can key it off\n * whatever its own domain calls a category — habit kinds, expense types,\n * priorities — without this component knowing about any of them.\n */\nconst { fill, label = '' } = defineProps<{\n /** Background utility for the dot, e.g. `bg-positive`. */\n fill: string\n /** Optional text after the dot. Omit for a bare marker. */\n label?: string | undefined\n}>()\n</script>\n\n<template>\n <span class=\"inline-flex items-center gap-1.5\">\n <span class=\"size-2 rounded-full\" :class=\"fill\" />\n <span v-if=\"label\" class=\"text-ink-soft text-xs font-medium\">{{ label }}</span>\n </span>\n</template>\n","<script setup lang=\"ts\">\nimport ToneDot from './ToneDot.vue'\n\n/** The three classes a category needs to colour a heading. */\nexport interface Tone {\n /** Solid background for the dot, e.g. `bg-positive`. */\n fill: string\n /** Tinted surface for the pill, e.g. `bg-positive/5 border-positive/25`. */\n card: string\n /** Foreground that pairs with the surface, e.g. `text-positive`. */\n text: string\n}\n\n/**\n * A pill heading for a group of things.\n *\n * The tone arrives as three class strings rather than a category name: Tailwind\n * reads source files as plain text, so a class assembled at runtime never\n * reaches the stylesheet — the app has to write them out, and it is the app\n * that knows its own categories anyway.\n */\nconst {\n tone,\n label,\n count = 0,\n} = defineProps<{\n /**\n * The colour classes for the dot and the label, as written-out class names.\n * `Tone` is a pair rather than a role token because the categories here are\n * the app's own, and Tailwind reads source as plain text: a class assembled\n * at runtime never reaches the stylesheet.\n */\n tone: Tone\n label: string\n /** Hidden when zero, so an empty group's heading stays quiet. */\n count?: number | undefined\n}>()\n</script>\n\n<template>\n <h2\n class=\"flex w-fit items-center gap-2 self-start rounded-full border px-3 py-1\"\n :class=\"tone.card\"\n >\n <ToneDot :fill=\"tone.fill\" />\n <span class=\"text-xs font-semibold tracking-wide uppercase\" :class=\"tone.text\">\n {{ label }}\n </span>\n <span v-if=\"count > 0\" class=\"text-ink-soft text-xs tabular-nums\">{{ count }}</span>\n </h2>\n</template>\n","<script setup lang=\"ts\">\nimport ToneDot from './ToneDot.vue'\n\n/** The three classes a category needs to colour a heading. */\nexport interface Tone {\n /** Solid background for the dot, e.g. `bg-positive`. */\n fill: string\n /** Tinted surface for the pill, e.g. `bg-positive/5 border-positive/25`. */\n card: string\n /** Foreground that pairs with the surface, e.g. `text-positive`. */\n text: string\n}\n\n/**\n * A pill heading for a group of things.\n *\n * The tone arrives as three class strings rather than a category name: Tailwind\n * reads source files as plain text, so a class assembled at runtime never\n * reaches the stylesheet — the app has to write them out, and it is the app\n * that knows its own categories anyway.\n */\nconst {\n tone,\n label,\n count = 0,\n} = defineProps<{\n /**\n * The colour classes for the dot and the label, as written-out class names.\n * `Tone` is a pair rather than a role token because the categories here are\n * the app's own, and Tailwind reads source as plain text: a class assembled\n * at runtime never reaches the stylesheet.\n */\n tone: Tone\n label: string\n /** Hidden when zero, so an empty group's heading stays quiet. */\n count?: number | undefined\n}>()\n</script>\n\n<template>\n <h2\n class=\"flex w-fit items-center gap-2 self-start rounded-full border px-3 py-1\"\n :class=\"tone.card\"\n >\n <ToneDot :fill=\"tone.fill\" />\n <span class=\"text-xs font-semibold tracking-wide uppercase\" :class=\"tone.text\">\n {{ label }}\n </span>\n <span v-if=\"count > 0\" class=\"text-ink-soft text-xs tabular-nums\">{{ count }}</span>\n </h2>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { useId } from 'vue'\n\n/**\n * A row of mutually exclusive choices.\n *\n * Radio inputs rather than buttons: it is a single choice out of a small set,\n * so arrow-key navigation and the \"one of N selected\" announcement come free.\n */\nconst { options } = defineProps<{\n options: readonly { value: T; label: string }[]\n}>()\n\nconst model = defineModel<T>({ required: true })\n\nconst name = useId()\n</script>\n\n<template>\n <div class=\"bg-muted rounded-card flex w-full gap-1 p-1\">\n <label v-for=\"option in options\" :key=\"String(option.value)\" class=\"flex-1 cursor-pointer\">\n <input v-model=\"model\" type=\"radio\" :value=\"option.value\" :name=\"name\" class=\"peer sr-only\" />\n <span\n class=\"peer-focus-visible:outline-primary rounded-control flex h-10 items-center justify-center px-2 text-sm font-medium transition-colors select-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2\"\n :class=\"model === option.value ? 'control text-ink' : 'text-ink-soft'\"\n >\n {{ option.label }}\n </span>\n </label>\n </div>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { useId } from 'vue'\n\n/**\n * A row of mutually exclusive choices.\n *\n * Radio inputs rather than buttons: it is a single choice out of a small set,\n * so arrow-key navigation and the \"one of N selected\" announcement come free.\n */\nconst { options } = defineProps<{\n options: readonly { value: T; label: string }[]\n}>()\n\nconst model = defineModel<T>({ required: true })\n\nconst name = useId()\n</script>\n\n<template>\n <div class=\"bg-muted rounded-card flex w-full gap-1 p-1\">\n <label v-for=\"option in options\" :key=\"String(option.value)\" class=\"flex-1 cursor-pointer\">\n <input v-model=\"model\" type=\"radio\" :value=\"option.value\" :name=\"name\" class=\"peer sr-only\" />\n <span\n class=\"peer-focus-visible:outline-primary rounded-control flex h-10 items-center justify-center px-2 text-sm font-medium transition-colors select-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2\"\n :class=\"model === option.value ? 'control text-ink' : 'text-ink-soft'\"\n >\n {{ option.label }}\n </span>\n </label>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst {\n rows = 3,\n rowHeight = 'h-14',\n label = 'Loading…',\n} = defineProps<{\n rows?: number | undefined\n /**\n * How tall each row is, as either a utility class (`h-20`) or a CSS length\n * (`5rem`, `72px`, `var(--row)`).\n *\n * Both are accepted because the class-only version failed silently: a length\n * passed here landed in `class` as `5rem`, which is not a class, so the rows\n * had no height and the placeholder rendered as nothing at all. A loading\n * state that shows an empty page is worse than no loading state, because it\n * looks like the page is finished and empty.\n */\n rowHeight?: string | undefined\n label?: string | undefined\n}>()\n\n/** A length starts with a digit, a dot, or opens a CSS function. */\nconst isLength = computed(() => /^(?:[.\\d]|calc\\(|var\\(|clamp\\(|min\\(|max\\()/.test(rowHeight))\n</script>\n\n<template>\n <div role=\"status\" class=\"flex flex-col gap-1\">\n <span class=\"sr-only\">{{ label }}</span>\n\n <div\n v-for=\"row in rows\"\n :key=\"row\"\n class=\"bg-muted rounded-card animate-pulse\"\n :class=\"isLength ? undefined : rowHeight\"\n :style=\"isLength ? { height: rowHeight } : undefined\"\n aria-hidden=\"true\"\n />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst {\n rows = 3,\n rowHeight = 'h-14',\n label = 'Loading…',\n} = defineProps<{\n rows?: number | undefined\n /**\n * How tall each row is, as either a utility class (`h-20`) or a CSS length\n * (`5rem`, `72px`, `var(--row)`).\n *\n * Both are accepted because the class-only version failed silently: a length\n * passed here landed in `class` as `5rem`, which is not a class, so the rows\n * had no height and the placeholder rendered as nothing at all. A loading\n * state that shows an empty page is worse than no loading state, because it\n * looks like the page is finished and empty.\n */\n rowHeight?: string | undefined\n label?: string | undefined\n}>()\n\n/** A length starts with a digit, a dot, or opens a CSS function. */\nconst isLength = computed(() => /^(?:[.\\d]|calc\\(|var\\(|clamp\\(|min\\(|max\\()/.test(rowHeight))\n</script>\n\n<template>\n <div role=\"status\" class=\"flex flex-col gap-1\">\n <span class=\"sr-only\">{{ label }}</span>\n\n <div\n v-for=\"row in rows\"\n :key=\"row\"\n class=\"bg-muted rounded-card animate-pulse\"\n :class=\"isLength ? undefined : rowHeight\"\n :style=\"isLength ? { height: rowHeight } : undefined\"\n aria-hidden=\"true\"\n />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ArrowDown, ArrowRight, ArrowUp } from 'lucide-vue-next'\n\n/**\n * One number, with what it means and which way it is going.\n *\n * The trend is an arrow and a colour, and neither is allowed to be the whole\n * message: the direction is also in the arrow's shape, so it survives a reader\n * who cannot separate the kit's positive and negative hues. `null` is a real\n * state rather than a missing one — a figure with no comparison yet is not a\n * flat figure.\n */\nconst {\n value,\n label,\n trend = null,\n} = defineProps<{\n /**\n * Already formatted — \"₺1.240\", \"68%\", \"12 days\". A number would make this\n * component choose a currency, a locale and a number of decimals, which are\n * three product decisions it has no way to be right about.\n */\n value: string\n label: string\n trend?: 'up' | 'down' | 'flat' | null | undefined\n}>()\n\nconst TREND_ICON = { up: ArrowUp, down: ArrowDown, flat: ArrowRight } as const\n</script>\n\n<template>\n <div class=\"surface rounded-card flex flex-1 flex-col gap-0.5 p-3\">\n <div class=\"flex items-baseline gap-1\">\n <span class=\"text-ink text-xl font-semibold tabular-nums\">{{ value }}</span>\n <component :is=\"TREND_ICON[trend]\" v-if=\"trend\" class=\"text-ink-soft size-3\" />\n </div>\n <span class=\"text-ink-soft text-xs\">{{ label }}</span>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ArrowDown, ArrowRight, ArrowUp } from 'lucide-vue-next'\n\n/**\n * One number, with what it means and which way it is going.\n *\n * The trend is an arrow and a colour, and neither is allowed to be the whole\n * message: the direction is also in the arrow's shape, so it survives a reader\n * who cannot separate the kit's positive and negative hues. `null` is a real\n * state rather than a missing one — a figure with no comparison yet is not a\n * flat figure.\n */\nconst {\n value,\n label,\n trend = null,\n} = defineProps<{\n /**\n * Already formatted — \"₺1.240\", \"68%\", \"12 days\". A number would make this\n * component choose a currency, a locale and a number of decimals, which are\n * three product decisions it has no way to be right about.\n */\n value: string\n label: string\n trend?: 'up' | 'down' | 'flat' | null | undefined\n}>()\n\nconst TREND_ICON = { up: ArrowUp, down: ArrowDown, flat: ArrowRight } as const\n</script>\n\n<template>\n <div class=\"surface rounded-card flex flex-1 flex-col gap-0.5 p-3\">\n <div class=\"flex items-baseline gap-1\">\n <span class=\"text-ink text-xl font-semibold tabular-nums\">{{ value }}</span>\n <component :is=\"TREND_ICON[trend]\" v-if=\"trend\" class=\"text-ink-soft size-3\" />\n </div>\n <span class=\"text-ink-soft text-xs\">{{ label }}</span>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { CheckCircle2, Info, TriangleAlert, X, XCircle } from 'lucide-vue-next'\n\nimport BaseButton from './BaseButton.vue'\nimport { useToast } from '../composables/use-toast'\nimport type { ToastTone } from '../composables/use-toast'\n\n/**\n * Where the toasts land. One of these, at the app root.\n *\n * @example\n * ```vue\n * <!-- App.vue -->\n * <ToastHost :close-label=\"$t('common.close')\" />\n * ```\n */\nconst { closeLabel, bottom = false } = defineProps<{\n /**\n * The accessible name of each dismiss button. Required, because the button\n * is an X and an X has no name — and the kit does not know the language.\n */\n closeLabel: string\n /**\n * Stack from the bottom instead of the top. For a phone shell, where the top\n * is a status bar and a header and the thumb is nowhere near it.\n */\n bottom?: boolean | undefined\n}>()\n\nconst { toasts, dismiss, pause, resume } = useToast()\n\n/* Dismissed first, so a handler that throws cannot leave the button on\n screen to be pressed twice. */\nfunction runAction(id: number, onClick: () => void) {\n dismiss(id)\n onClick()\n}\n\n/**\n * Teleport needs a `body`, and a server has none.\n *\n * Rendering nothing until mounted is also correct rather than merely safe: a\n * prerendered page has no toasts in it, so there is nothing to hydrate and\n * nothing to flash.\n */\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n\nconst ICON = {\n info: Info,\n success: CheckCircle2,\n warning: TriangleAlert,\n danger: XCircle,\n} as const satisfies Record<ToastTone, unknown>\n\n/* Roles, never colours. The app repaints these by redefining the token. */\nconst TONE_CLASS = {\n info: 'text-primary',\n success: 'text-positive',\n warning: 'text-warning',\n danger: 'text-negative',\n} as const satisfies Record<ToastTone, string>\n</script>\n\n<template>\n <Teleport v-if=\"mounted\" to=\"body\">\n <!--\n `polite`, not `assertive`, and it is a considered choice: a toast reports\n something that already happened, and interrupting a screen reader\n mid-sentence to say \"saved\" is ruder than waiting. A failure the reader\n must act on belongs in a `BaseAlert` beside the thing that failed.\n\n `role=\"status\"` rather than `role=\"log\"` so the whole region is read when\n it changes, not only the appended line.\n -->\n <div\n class=\"pointer-events-none fixed inset-x-0 z-[100] flex flex-col items-center gap-2 px-4\"\n :class=\"bottom ? 'bottom-0 pb-[max(1rem,env(safe-area-inset-bottom))]' : 'top-0 pt-4'\"\n role=\"status\"\n aria-live=\"polite\"\n >\n <TransitionGroup name=\"toast\">\n <div\n v-for=\"toast in toasts\"\n :key=\"toast.id\"\n class=\"surface-raised text-ink rounded-card pointer-events-auto flex w-full max-w-sm items-start gap-3 p-3\"\n @mouseenter=\"pause(toast.id)\"\n @mouseleave=\"resume(toast.id)\"\n @focusin=\"pause(toast.id)\"\n @focusout=\"resume(toast.id)\"\n >\n <component\n :is=\"ICON[toast.tone]\"\n class=\"mt-0.5 size-5 shrink-0\"\n :class=\"TONE_CLASS[toast.tone]\"\n aria-hidden=\"true\"\n />\n\n <p class=\"flex-1 text-sm leading-snug\">{{ toast.message }}</p>\n\n <BaseButton\n v-if=\"toast.action\"\n variant=\"link\"\n size=\"sm\"\n class=\"-my-1 shrink-0\"\n @click=\"runAction(toast.id, toast.action.onClick)\"\n >\n {{ toast.action.label }}\n </BaseButton>\n\n <BaseButton\n variant=\"quiet\"\n icon\n pill\n size=\"sm\"\n class=\"-my-1 shrink-0\"\n :aria-label=\"closeLabel\"\n @click=\"dismiss(toast.id)\"\n >\n <X class=\"size-4\" />\n </BaseButton>\n </div>\n </TransitionGroup>\n </div>\n </Teleport>\n</template>\n\n<style scoped>\n/* Movement is small and downward from the top, upward from the bottom — the\n direction it came from either way. */\n.toast-enter-active,\n.toast-leave-active {\n transition:\n opacity var(--duration-base) ease-out,\n transform var(--duration-base) ease-out;\n}\n\n.toast-enter-from,\n.toast-leave-to {\n opacity: 0;\n transform: translateY(-0.5rem);\n}\n\n/* Leaving is taken out of flow so the ones below close the gap smoothly\n instead of jumping when it unmounts. */\n.toast-leave-active {\n position: absolute;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .toast-enter-active,\n .toast-leave-active {\n transition-duration: 1ms;\n }\n\n .toast-enter-from,\n .toast-leave-to {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { CheckCircle2, Info, TriangleAlert, X, XCircle } from 'lucide-vue-next'\n\nimport BaseButton from './BaseButton.vue'\nimport { useToast } from '../composables/use-toast'\nimport type { ToastTone } from '../composables/use-toast'\n\n/**\n * Where the toasts land. One of these, at the app root.\n *\n * @example\n * ```vue\n * <!-- App.vue -->\n * <ToastHost :close-label=\"$t('common.close')\" />\n * ```\n */\nconst { closeLabel, bottom = false } = defineProps<{\n /**\n * The accessible name of each dismiss button. Required, because the button\n * is an X and an X has no name — and the kit does not know the language.\n */\n closeLabel: string\n /**\n * Stack from the bottom instead of the top. For a phone shell, where the top\n * is a status bar and a header and the thumb is nowhere near it.\n */\n bottom?: boolean | undefined\n}>()\n\nconst { toasts, dismiss, pause, resume } = useToast()\n\n/* Dismissed first, so a handler that throws cannot leave the button on\n screen to be pressed twice. */\nfunction runAction(id: number, onClick: () => void) {\n dismiss(id)\n onClick()\n}\n\n/**\n * Teleport needs a `body`, and a server has none.\n *\n * Rendering nothing until mounted is also correct rather than merely safe: a\n * prerendered page has no toasts in it, so there is nothing to hydrate and\n * nothing to flash.\n */\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n\nconst ICON = {\n info: Info,\n success: CheckCircle2,\n warning: TriangleAlert,\n danger: XCircle,\n} as const satisfies Record<ToastTone, unknown>\n\n/* Roles, never colours. The app repaints these by redefining the token. */\nconst TONE_CLASS = {\n info: 'text-primary',\n success: 'text-positive',\n warning: 'text-warning',\n danger: 'text-negative',\n} as const satisfies Record<ToastTone, string>\n</script>\n\n<template>\n <Teleport v-if=\"mounted\" to=\"body\">\n <!--\n `polite`, not `assertive`, and it is a considered choice: a toast reports\n something that already happened, and interrupting a screen reader\n mid-sentence to say \"saved\" is ruder than waiting. A failure the reader\n must act on belongs in a `BaseAlert` beside the thing that failed.\n\n `role=\"status\"` rather than `role=\"log\"` so the whole region is read when\n it changes, not only the appended line.\n -->\n <div\n class=\"pointer-events-none fixed inset-x-0 z-[100] flex flex-col items-center gap-2 px-4\"\n :class=\"bottom ? 'bottom-0 pb-[max(1rem,env(safe-area-inset-bottom))]' : 'top-0 pt-4'\"\n role=\"status\"\n aria-live=\"polite\"\n >\n <TransitionGroup name=\"toast\">\n <div\n v-for=\"toast in toasts\"\n :key=\"toast.id\"\n class=\"surface-raised text-ink rounded-card pointer-events-auto flex w-full max-w-sm items-start gap-3 p-3\"\n @mouseenter=\"pause(toast.id)\"\n @mouseleave=\"resume(toast.id)\"\n @focusin=\"pause(toast.id)\"\n @focusout=\"resume(toast.id)\"\n >\n <component\n :is=\"ICON[toast.tone]\"\n class=\"mt-0.5 size-5 shrink-0\"\n :class=\"TONE_CLASS[toast.tone]\"\n aria-hidden=\"true\"\n />\n\n <p class=\"flex-1 text-sm leading-snug\">{{ toast.message }}</p>\n\n <BaseButton\n v-if=\"toast.action\"\n variant=\"link\"\n size=\"sm\"\n class=\"-my-1 shrink-0\"\n @click=\"runAction(toast.id, toast.action.onClick)\"\n >\n {{ toast.action.label }}\n </BaseButton>\n\n <BaseButton\n variant=\"quiet\"\n icon\n pill\n size=\"sm\"\n class=\"-my-1 shrink-0\"\n :aria-label=\"closeLabel\"\n @click=\"dismiss(toast.id)\"\n >\n <X class=\"size-4\" />\n </BaseButton>\n </div>\n </TransitionGroup>\n </div>\n </Teleport>\n</template>\n\n<style scoped>\n/* Movement is small and downward from the top, upward from the bottom — the\n direction it came from either way. */\n.toast-enter-active,\n.toast-leave-active {\n transition:\n opacity var(--duration-base) ease-out,\n transform var(--duration-base) ease-out;\n}\n\n.toast-enter-from,\n.toast-leave-to {\n opacity: 0;\n transform: translateY(-0.5rem);\n}\n\n/* Leaving is taken out of flow so the ones below close the gap smoothly\n instead of jumping when it unmounts. */\n.toast-leave-active {\n position: absolute;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .toast-enter-active,\n .toast-leave-active {\n transition-duration: 1ms;\n }\n\n .toast-enter-from,\n .toast-leave-to {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"L extends string\">\n/**\n * A flat language switcher for screens with no Settings behind them.\n *\n * The list and the labels are props: only the app knows which languages it\n * ships, and endonyms — each language written in itself — are what make the\n * right option legible to someone who cannot read the current interface.\n */\nconst {\n locales,\n labels,\n label = '',\n} = defineProps<{\n locales: readonly L[]\n /** Endonyms, e.g. `{ en: 'English', tr: 'Türkçe' }`. */\n labels: Record<L, string>\n /** Accessible name for the group. */\n label?: string | undefined\n}>()\n\n/**\n * Two-way bound rather than taking the runtime's ref as a prop: props are not\n * unwrapped in a template and cannot be assigned to, so the ref would compare\n * against itself and the click handler would not compile.\n */\nconst preference = defineModel<'system' | L>({ required: true })\n</script>\n\n<template>\n <nav class=\"flex flex-wrap items-center justify-center gap-1\" :aria-label=\"label || undefined\">\n <button\n v-for=\"locale in locales\"\n :key=\"locale\"\n type=\"button\"\n :lang=\"locale\"\n class=\"focus-ring rounded-full px-2.5 py-1.5 text-xs transition-colors\"\n :class=\"\n preference === locale ? 'bg-muted text-ink font-semibold' : 'text-ink-soft hover:text-ink'\n \"\n :aria-pressed=\"preference === locale\"\n @click=\"preference = locale\"\n >\n {{ labels[locale] }}\n </button>\n </nav>\n</template>\n","<script setup lang=\"ts\" generic=\"L extends string\">\n/**\n * A flat language switcher for screens with no Settings behind them.\n *\n * The list and the labels are props: only the app knows which languages it\n * ships, and endonyms — each language written in itself — are what make the\n * right option legible to someone who cannot read the current interface.\n */\nconst {\n locales,\n labels,\n label = '',\n} = defineProps<{\n locales: readonly L[]\n /** Endonyms, e.g. `{ en: 'English', tr: 'Türkçe' }`. */\n labels: Record<L, string>\n /** Accessible name for the group. */\n label?: string | undefined\n}>()\n\n/**\n * Two-way bound rather than taking the runtime's ref as a prop: props are not\n * unwrapped in a template and cannot be assigned to, so the ref would compare\n * against itself and the click handler would not compile.\n */\nconst preference = defineModel<'system' | L>({ required: true })\n</script>\n\n<template>\n <nav class=\"flex flex-wrap items-center justify-center gap-1\" :aria-label=\"label || undefined\">\n <button\n v-for=\"locale in locales\"\n :key=\"locale\"\n type=\"button\"\n :lang=\"locale\"\n class=\"focus-ring rounded-full px-2.5 py-1.5 text-xs transition-colors\"\n :class=\"\n preference === locale ? 'bg-muted text-ink font-semibold' : 'text-ink-soft hover:text-ink'\n \"\n :aria-pressed=\"preference === locale\"\n @click=\"preference = locale\"\n >\n {{ labels[locale] }}\n </button>\n </nav>\n</template>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { RouterLink } from 'vue-router'\nimport type { Component } from 'vue'\n\nimport { tapFeedback } from '../utils/haptics'\n\nexport interface TabItem<K extends string> {\n /** Identity, compared against `active`. */\n key: K\n /** Router destination. */\n to: string\n /** Text under the icon. Already translated. */\n label: string\n icon: Component\n}\n\n/**\n * The floating bottom bar.\n *\n * Items and the active key are props: the package has no opinion about how an\n * app names its screens, and reading `route.meta` here would force one.\n */\nconst {\n items,\n active,\n label = '',\n} = defineProps<{\n items: readonly TabItem<K>[]\n /** Which item is current. Usually from `route.meta`. */\n active?: K | undefined\n /** Accessible name for the navigation landmark. */\n label?: string | undefined\n}>()\n</script>\n\n<template>\n <header class=\"tab-bar\">\n <nav class=\"tab-bar-inner\" :aria-label=\"label || undefined\">\n <RouterLink\n v-for=\"item in items\"\n :key=\"item.key\"\n :to=\"item.to\"\n class=\"tab-link\"\n :class=\"{ 'is-active': item.key === active }\"\n :aria-current=\"item.key === active ? 'page' : undefined\"\n @click=\"tapFeedback()\"\n >\n <span class=\"tab-icon-slot\">\n <component :is=\"item.icon\" class=\"tab-icon\" />\n </span>\n <span class=\"tab-label\">{{ item.label }}</span>\n </RouterLink>\n </nav>\n </header>\n</template>\n\n<style scoped>\n@reference \"../styles/_reference.css\";\n\n/* absolute, not fixed: the bar hangs inside the app shell. Fixed would pin it\n to the browser window, which on a desktop is nowhere near the app. */\n.tab-bar {\n @apply absolute left-1/2 z-40 w-full max-w-[360px] -translate-x-1/2 px-4;\n bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.tab-bar-inner {\n /* A raised surface that is always a little translucent: it floats over the\n content it navigates, and a solid bar would read as a wall at the bottom of\n the page. The material decides how much — glass makes it far more so. */\n @apply surface-raised flex items-center justify-between gap-1 p-1.5;\n background-color: color-mix(\n in oklab,\n var(--color-surface) min(var(--surface-opacity), 88%),\n transparent\n );\n backdrop-filter: var(--surface-backdrop, blur(12px));\n -webkit-backdrop-filter: var(--surface-backdrop, blur(12px));\n border-radius: var(--radius-shell);\n}\n\n.tab-link {\n @apply text-ink-soft focus-ring flex min-h-[52px] flex-1 cursor-pointer flex-col items-center justify-center gap-1 py-1.5;\n border-radius: calc(var(--radius-shell) - 6px);\n /* Only the icon reacts to a press. Scaling the whole link drags the label and\n the pill with it, which reads as the bar wobbling. */\n transition: color var(--duration-base) ease;\n}\n\n.tab-link:hover {\n @apply text-ink;\n}\n\n/* The pill sits behind the icon rather than the link, so the active tab grows a\n marker instead of the row changing shape. */\n.tab-icon-slot {\n @apply flex h-7 w-12 items-center justify-center rounded-full transition-all duration-(--duration-base) ease-out;\n}\n\n.tab-link:active .tab-icon-slot {\n transform: scale(0.88);\n}\n\n.is-active {\n @apply text-primary;\n}\n\n.is-active .tab-icon-slot {\n @apply bg-muted;\n}\n\n.tab-icon {\n @apply size-[18px] stroke-2 transition-transform duration-(--duration-base);\n}\n\n.is-active .tab-icon {\n @apply scale-110 stroke-[2.5px];\n}\n\n.tab-label {\n @apply text-[10px] leading-none font-medium;\n}\n\n.is-active .tab-label {\n @apply font-semibold;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .tab-icon-slot,\n .tab-icon {\n transition: none;\n }\n .tab-link:active .tab-icon-slot {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { RouterLink } from 'vue-router'\nimport type { Component } from 'vue'\n\nimport { tapFeedback } from '../utils/haptics'\n\nexport interface TabItem<K extends string> {\n /** Identity, compared against `active`. */\n key: K\n /** Router destination. */\n to: string\n /** Text under the icon. Already translated. */\n label: string\n icon: Component\n}\n\n/**\n * The floating bottom bar.\n *\n * Items and the active key are props: the package has no opinion about how an\n * app names its screens, and reading `route.meta` here would force one.\n */\nconst {\n items,\n active,\n label = '',\n} = defineProps<{\n items: readonly TabItem<K>[]\n /** Which item is current. Usually from `route.meta`. */\n active?: K | undefined\n /** Accessible name for the navigation landmark. */\n label?: string | undefined\n}>()\n</script>\n\n<template>\n <header class=\"tab-bar\">\n <nav class=\"tab-bar-inner\" :aria-label=\"label || undefined\">\n <RouterLink\n v-for=\"item in items\"\n :key=\"item.key\"\n :to=\"item.to\"\n class=\"tab-link\"\n :class=\"{ 'is-active': item.key === active }\"\n :aria-current=\"item.key === active ? 'page' : undefined\"\n @click=\"tapFeedback()\"\n >\n <span class=\"tab-icon-slot\">\n <component :is=\"item.icon\" class=\"tab-icon\" />\n </span>\n <span class=\"tab-label\">{{ item.label }}</span>\n </RouterLink>\n </nav>\n </header>\n</template>\n\n<style scoped>\n@reference \"../styles/_reference.css\";\n\n/* absolute, not fixed: the bar hangs inside the app shell. Fixed would pin it\n to the browser window, which on a desktop is nowhere near the app. */\n.tab-bar {\n @apply absolute left-1/2 z-40 w-full max-w-[360px] -translate-x-1/2 px-4;\n bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.tab-bar-inner {\n /* A raised surface that is always a little translucent: it floats over the\n content it navigates, and a solid bar would read as a wall at the bottom of\n the page. The material decides how much — glass makes it far more so. */\n @apply surface-raised flex items-center justify-between gap-1 p-1.5;\n background-color: color-mix(\n in oklab,\n var(--color-surface) min(var(--surface-opacity), 88%),\n transparent\n );\n backdrop-filter: var(--surface-backdrop, blur(12px));\n -webkit-backdrop-filter: var(--surface-backdrop, blur(12px));\n border-radius: var(--radius-shell);\n}\n\n.tab-link {\n @apply text-ink-soft focus-ring flex min-h-[52px] flex-1 cursor-pointer flex-col items-center justify-center gap-1 py-1.5;\n border-radius: calc(var(--radius-shell) - 6px);\n /* Only the icon reacts to a press. Scaling the whole link drags the label and\n the pill with it, which reads as the bar wobbling. */\n transition: color var(--duration-base) ease;\n}\n\n.tab-link:hover {\n @apply text-ink;\n}\n\n/* The pill sits behind the icon rather than the link, so the active tab grows a\n marker instead of the row changing shape. */\n.tab-icon-slot {\n @apply flex h-7 w-12 items-center justify-center rounded-full transition-all duration-(--duration-base) ease-out;\n}\n\n.tab-link:active .tab-icon-slot {\n transform: scale(0.88);\n}\n\n.is-active {\n @apply text-primary;\n}\n\n.is-active .tab-icon-slot {\n @apply bg-muted;\n}\n\n.tab-icon {\n @apply size-[18px] stroke-2 transition-transform duration-(--duration-base);\n}\n\n.is-active .tab-icon {\n @apply scale-110 stroke-[2.5px];\n}\n\n.tab-label {\n @apply text-[10px] leading-none font-medium;\n}\n\n.is-active .tab-label {\n @apply font-semibold;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .tab-icon-slot,\n .tab-icon {\n transition: none;\n }\n .tab-link:active .tab-icon-slot {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue'\n\nimport ScrollArea from './ScrollArea.vue'\nimport { fromDateKey } from '../utils/date'\nimport { elementDirection, horizontalStep } from '../utils/direction'\nimport type { WeekStart } from '../utils/date'\nimport { formatDate } from '../utils/format'\n\n/**\n * A year of days, as a grid you can read at a glance.\n *\n * ## It is a table, and that is not a detail\n *\n * Weekdays are the rows and weeks are the columns, so the markup is a\n * `<table>` and the visual layout falls out of it. The obvious way — one\n * CSS grid flowing column by column — puts the DOM in a different order\n * from the picture, and anything laid over that order afterwards\n * (`role=\"grid\"`, arrow keys, a reader's own table navigation) then\n * describes a shape that is not on screen.\n *\n * ## One stop, not three hundred and sixty-five\n *\n * Every day is reachable, and the whole grid is a single stop in the tab\n * order: the arrows move between days, Home and End go to the ends of a\n * week, and Enter chooses. A grid of focusable cells is the other way this\n * is written, and it costs somebody using a keyboard a year of presses to\n * get past a picture.\n *\n * ## The colours are yours\n *\n * `levelFor` returns a class, the same contract as `ToneDot`'s `fill` and\n * `BaseTimeline`'s: the kit does not know whether four of something is a\n * lot, or which hue your product uses for \"done\". `dayLabel` is the same\n * for words — the kit has no language, and a date reads differently in\n * every one.\n */\nconst {\n days,\n label,\n levelFor,\n dayLabel,\n isSelectable = undefined,\n weekStartsOn = 1,\n startAtEnd = true,\n} = defineProps<{\n /** The days to draw, as `YYYY-MM-DD`, oldest first. */\n days: readonly string[]\n /** Names the grid, e.g. \"Your year\". Already translated. */\n label: string\n /** A class for one day's square, e.g. `bg-positive/40`. */\n levelFor: (key: string) => string\n /** What a reader hears on a day: the date, and what happened. Translated. */\n dayLabel: (key: string) => string\n /** Which days lead somewhere. Unset, the grid is a picture and nothing else. */\n isSelectable?: ((key: string) => boolean) | undefined\n /** `1` Monday, `0` Sunday. */\n weekStartsOn?: WeekStart | undefined\n /** Open on the most recent weeks — a year otherwise starts far off-screen. */\n startAtEnd?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ select: [key: string] }>()\n\nconst scroller = useTemplateRef<InstanceType<typeof ScrollArea>>('scroller')\nconst grid = useTemplateRef<HTMLElement>('grid')\n\n/** Where the keyboard is: an index into `cells`, not a date. */\nconst focused = ref(0)\n\n/*\n * The days, padded out to whole weeks.\n *\n * A week is seven slots whatever the range starts on, so the first column\n * is short at the top and the last is short at the bottom. Those slots are\n * `null` rather than missing, because a row with fewer cells than the one\n * above it stops being a table.\n */\nconst weeks = computed<(string | null)[][]>(() => {\n if (days.length === 0) return []\n\n const first = days[0]!\n const lead = (fromDateKey(first).getDay() - weekStartsOn + 7) % 7\n const slots: (string | null)[] = [...Array.from({ length: lead }, () => null), ...days]\n\n while (slots.length % 7 !== 0) slots.push(null)\n\n return Array.from({ length: slots.length / 7 }, (_, week) => slots.slice(week * 7, week * 7 + 7))\n})\n\n/** The weekday names, in the app's locale, starting on the chosen day. */\nconst weekdays = computed(() =>\n Array.from({ length: 7 }, (_, row) => {\n // 2024-01-07 was a Sunday, so this walks a real week in the right order.\n const date = new Date(2024, 0, 7)\n date.setDate(date.getDate() + ((row + weekStartsOn) % 7))\n\n return formatDate(date, { weekday: 'long' })\n }),\n)\n\n/**\n * A month heading per run of weeks.\n *\n * A week is counted under the month its first real day falls in, so a week\n * split across two months does not give the later one a heading of its own\n * one column wide.\n */\nconst months = computed(() => {\n const runs: { key: string; label: string; span: number }[] = []\n\n for (const week of weeks.value) {\n const day = week.find((one): one is string => one !== null)\n if (!day) continue\n\n const key = day.slice(0, 7)\n const last = runs.at(-1)\n\n if (last?.key === key) last.span += 1\n else runs.push({ key, label: formatDate(fromDateKey(day), { month: 'short' }), span: 1 })\n }\n\n return runs\n})\n\n/** Every real day, in reading order, which is what the arrows walk. */\nconst cells = computed(() =>\n weeks.value.flatMap((week, column) =>\n week.flatMap((day, row) => (day === null ? [] : [{ day, column, row }])),\n ),\n)\n\n/* `data-day` through `v-bind` rather than as an attribute of its own:\n `strictTemplates` knows the real attributes of a `<td>` and rejects a\n `data-*` written directly, while an object of them is fine. It is the\n click delegation below that needs it on the element at all. */\nconst dayAttrs = (day: string) => ({ 'data-day': day })\n\nconst indexOf = (day: string) => cells.value.findIndex((cell) => cell.day === day)\n\nfunction moveTo(index: number) {\n const next = Math.max(0, Math.min(cells.value.length - 1, index))\n focused.value = next\n\n void nextTick(() => {\n grid.value?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus()\n })\n}\n\n/** Steps a whole column, which is a week, in reading order. */\nfunction step(by: number) {\n const here = cells.value[focused.value]\n if (!here) return\n\n const wanted = { column: here.column + by, row: here.row }\n const found = cells.value.findIndex(\n (cell) => cell.column === wanted.column && cell.row === wanted.row,\n )\n\n // Falling off the end of a short first or last week is a no-op rather\n // than a jump to some other weekday.\n if (found !== -1) moveTo(found)\n}\n\nfunction choose(day: string) {\n if (isSelectable?.(day)) emit('select', day)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n const here = cells.value[focused.value]\n if (!here) return\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault()\n moveTo(focused.value - 1)\n break\n case 'ArrowDown':\n event.preventDefault()\n moveTo(focused.value + 1)\n break\n /* Weeks run the way the language does, so in Arabic the column to the\n left of this one is the following week. */\n case 'ArrowLeft':\n case 'ArrowRight':\n event.preventDefault()\n step(horizontalStep(event.key, event.currentTarget as Element))\n break\n case 'Home':\n event.preventDefault()\n moveTo(0)\n break\n case 'End':\n event.preventDefault()\n moveTo(cells.value.length - 1)\n break\n case 'Enter':\n case ' ':\n event.preventDefault()\n choose(here.day)\n break\n }\n}\n\n/*\n * One listener for the whole grid.\n *\n * There are three hundred and sixty-five of these on screen. A handler each\n * is three hundred and sixty-five closures for markup that is a hit target\n * rather than a control, so the click is caught once and the day read off\n * the cell it landed in.\n */\nfunction onClick(event: MouseEvent) {\n const cell = (event.target as HTMLElement).closest<HTMLElement>('[data-day]')\n const day = cell?.dataset.day\n if (!day) return\n\n focused.value = indexOf(day)\n choose(day)\n}\n\nonMounted(() => {\n if (!startAtEnd) return\n\n const element = scroller.value?.viewport\n if (!element) return\n\n /*\n * A right-to-left box counts `scrollLeft` down from zero, so its far end\n * is the most negative value it takes rather than the largest. Assigning\n * `scrollWidth` there clamps to zero, which is the *start* — the grid\n * would have opened on the oldest week, which is the one thing this prop\n * exists to avoid, in the one direction nobody tests.\n */\n const rtl = elementDirection(element) === 'rtl'\n element.scrollLeft = rtl ? -element.scrollWidth : element.scrollWidth\n})\n</script>\n\n<template>\n <ScrollArea ref=\"scroller\" axis=\"x\" scrollbar=\"hidden\" :label=\"label\" class=\"rk-activity\">\n <table\n ref=\"grid\"\n class=\"rk-activity-table\"\n :aria-label=\"label\"\n @keydown=\"onKeydown\"\n @click=\"onClick\"\n >\n <thead>\n <tr>\n <!-- The weekday column is a spacer here: the headings below name\n their own rows, and a heading for the headings says nothing. -->\n <td class=\"rk-activity-corner\"></td>\n <th v-for=\"month in months\" :key=\"month.key\" :colspan=\"month.span\" scope=\"colgroup\">\n {{ month.label }}\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr v-for=\"(weekday, row) in weekdays\" :key=\"weekday\">\n <th scope=\"row\" class=\"rk-activity-weekday\">\n <span class=\"sr-only\">{{ weekday }}</span>\n </th>\n\n <template v-for=\"(week, column) in weeks\" :key=\"column\">\n <td\n v-if=\"week[row]\"\n class=\"rk-activity-cell\"\n v-bind=\"dayAttrs(week[row]!)\"\n :tabindex=\"cells[focused]?.day === week[row] ? 0 : -1\"\n :aria-label=\"dayLabel(week[row]!)\"\n :class=\"[levelFor(week[row]!), { 'is-pickable': isSelectable?.(week[row]!) }]\"\n />\n <!-- The padding at either end of the range. Empty, and skipped\n by the arrows, but present: a row with fewer cells than the\n one above it is no longer a table. -->\n <td v-else class=\"rk-activity-cell is-blank\" aria-hidden=\"true\" />\n </template>\n </tr>\n </tbody>\n </table>\n </ScrollArea>\n</template>\n\n<style scoped>\n.rk-activity-table {\n border-collapse: separate;\n border-spacing: 2px;\n}\n\n.rk-activity-corner,\n.rk-activity-weekday {\n width: 0;\n padding: 0;\n}\n\n.rk-activity-table th {\n color: var(--color-ink-soft);\n font-size: 0.5625rem;\n font-weight: 500;\n line-height: 1;\n text-align: start;\n}\n\n.rk-activity-cell {\n width: 0.625rem;\n height: 0.625rem;\n padding: 0;\n border-radius: var(--radius-cell);\n background: var(--color-muted);\n}\n\n.rk-activity-cell.is-blank {\n background: transparent;\n}\n\n.rk-activity-cell.is-pickable {\n cursor: pointer;\n}\n\n.rk-activity-cell:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue'\n\nimport ScrollArea from './ScrollArea.vue'\nimport { fromDateKey } from '../utils/date'\nimport { elementDirection, horizontalStep } from '../utils/direction'\nimport type { WeekStart } from '../utils/date'\nimport { formatDate } from '../utils/format'\n\n/**\n * A year of days, as a grid you can read at a glance.\n *\n * ## It is a table, and that is not a detail\n *\n * Weekdays are the rows and weeks are the columns, so the markup is a\n * `<table>` and the visual layout falls out of it. The obvious way — one\n * CSS grid flowing column by column — puts the DOM in a different order\n * from the picture, and anything laid over that order afterwards\n * (`role=\"grid\"`, arrow keys, a reader's own table navigation) then\n * describes a shape that is not on screen.\n *\n * ## One stop, not three hundred and sixty-five\n *\n * Every day is reachable, and the whole grid is a single stop in the tab\n * order: the arrows move between days, Home and End go to the ends of a\n * week, and Enter chooses. A grid of focusable cells is the other way this\n * is written, and it costs somebody using a keyboard a year of presses to\n * get past a picture.\n *\n * ## The colours are yours\n *\n * `levelFor` returns a class, the same contract as `ToneDot`'s `fill` and\n * `BaseTimeline`'s: the kit does not know whether four of something is a\n * lot, or which hue your product uses for \"done\". `dayLabel` is the same\n * for words — the kit has no language, and a date reads differently in\n * every one.\n */\nconst {\n days,\n label,\n levelFor,\n dayLabel,\n isSelectable = undefined,\n weekStartsOn = 1,\n startAtEnd = true,\n} = defineProps<{\n /** The days to draw, as `YYYY-MM-DD`, oldest first. */\n days: readonly string[]\n /** Names the grid, e.g. \"Your year\". Already translated. */\n label: string\n /** A class for one day's square, e.g. `bg-positive/40`. */\n levelFor: (key: string) => string\n /** What a reader hears on a day: the date, and what happened. Translated. */\n dayLabel: (key: string) => string\n /** Which days lead somewhere. Unset, the grid is a picture and nothing else. */\n isSelectable?: ((key: string) => boolean) | undefined\n /** `1` Monday, `0` Sunday. */\n weekStartsOn?: WeekStart | undefined\n /** Open on the most recent weeks — a year otherwise starts far off-screen. */\n startAtEnd?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ select: [key: string] }>()\n\nconst scroller = useTemplateRef<InstanceType<typeof ScrollArea>>('scroller')\nconst grid = useTemplateRef<HTMLElement>('grid')\n\n/** Where the keyboard is: an index into `cells`, not a date. */\nconst focused = ref(0)\n\n/*\n * The days, padded out to whole weeks.\n *\n * A week is seven slots whatever the range starts on, so the first column\n * is short at the top and the last is short at the bottom. Those slots are\n * `null` rather than missing, because a row with fewer cells than the one\n * above it stops being a table.\n */\nconst weeks = computed<(string | null)[][]>(() => {\n if (days.length === 0) return []\n\n const first = days[0]!\n const lead = (fromDateKey(first).getDay() - weekStartsOn + 7) % 7\n const slots: (string | null)[] = [...Array.from({ length: lead }, () => null), ...days]\n\n while (slots.length % 7 !== 0) slots.push(null)\n\n return Array.from({ length: slots.length / 7 }, (_, week) => slots.slice(week * 7, week * 7 + 7))\n})\n\n/** The weekday names, in the app's locale, starting on the chosen day. */\nconst weekdays = computed(() =>\n Array.from({ length: 7 }, (_, row) => {\n // 2024-01-07 was a Sunday, so this walks a real week in the right order.\n const date = new Date(2024, 0, 7)\n date.setDate(date.getDate() + ((row + weekStartsOn) % 7))\n\n return formatDate(date, { weekday: 'long' })\n }),\n)\n\n/**\n * A month heading per run of weeks.\n *\n * A week is counted under the month its first real day falls in, so a week\n * split across two months does not give the later one a heading of its own\n * one column wide.\n */\nconst months = computed(() => {\n const runs: { key: string; label: string; span: number }[] = []\n\n for (const week of weeks.value) {\n const day = week.find((one): one is string => one !== null)\n if (!day) continue\n\n const key = day.slice(0, 7)\n const last = runs.at(-1)\n\n if (last?.key === key) last.span += 1\n else runs.push({ key, label: formatDate(fromDateKey(day), { month: 'short' }), span: 1 })\n }\n\n return runs\n})\n\n/** Every real day, in reading order, which is what the arrows walk. */\nconst cells = computed(() =>\n weeks.value.flatMap((week, column) =>\n week.flatMap((day, row) => (day === null ? [] : [{ day, column, row }])),\n ),\n)\n\n/* `data-day` through `v-bind` rather than as an attribute of its own:\n `strictTemplates` knows the real attributes of a `<td>` and rejects a\n `data-*` written directly, while an object of them is fine. It is the\n click delegation below that needs it on the element at all. */\nconst dayAttrs = (day: string) => ({ 'data-day': day })\n\nconst indexOf = (day: string) => cells.value.findIndex((cell) => cell.day === day)\n\nfunction moveTo(index: number) {\n const next = Math.max(0, Math.min(cells.value.length - 1, index))\n focused.value = next\n\n void nextTick(() => {\n grid.value?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus()\n })\n}\n\n/** Steps a whole column, which is a week, in reading order. */\nfunction step(by: number) {\n const here = cells.value[focused.value]\n if (!here) return\n\n const wanted = { column: here.column + by, row: here.row }\n const found = cells.value.findIndex(\n (cell) => cell.column === wanted.column && cell.row === wanted.row,\n )\n\n // Falling off the end of a short first or last week is a no-op rather\n // than a jump to some other weekday.\n if (found !== -1) moveTo(found)\n}\n\nfunction choose(day: string) {\n if (isSelectable?.(day)) emit('select', day)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n const here = cells.value[focused.value]\n if (!here) return\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault()\n moveTo(focused.value - 1)\n break\n case 'ArrowDown':\n event.preventDefault()\n moveTo(focused.value + 1)\n break\n /* Weeks run the way the language does, so in Arabic the column to the\n left of this one is the following week. */\n case 'ArrowLeft':\n case 'ArrowRight':\n event.preventDefault()\n step(horizontalStep(event.key, event.currentTarget as Element))\n break\n case 'Home':\n event.preventDefault()\n moveTo(0)\n break\n case 'End':\n event.preventDefault()\n moveTo(cells.value.length - 1)\n break\n case 'Enter':\n case ' ':\n event.preventDefault()\n choose(here.day)\n break\n }\n}\n\n/*\n * One listener for the whole grid.\n *\n * There are three hundred and sixty-five of these on screen. A handler each\n * is three hundred and sixty-five closures for markup that is a hit target\n * rather than a control, so the click is caught once and the day read off\n * the cell it landed in.\n */\nfunction onClick(event: MouseEvent) {\n const cell = (event.target as HTMLElement).closest<HTMLElement>('[data-day]')\n const day = cell?.dataset.day\n if (!day) return\n\n focused.value = indexOf(day)\n choose(day)\n}\n\nonMounted(() => {\n if (!startAtEnd) return\n\n const element = scroller.value?.viewport\n if (!element) return\n\n /*\n * A right-to-left box counts `scrollLeft` down from zero, so its far end\n * is the most negative value it takes rather than the largest. Assigning\n * `scrollWidth` there clamps to zero, which is the *start* — the grid\n * would have opened on the oldest week, which is the one thing this prop\n * exists to avoid, in the one direction nobody tests.\n */\n const rtl = elementDirection(element) === 'rtl'\n element.scrollLeft = rtl ? -element.scrollWidth : element.scrollWidth\n})\n</script>\n\n<template>\n <ScrollArea ref=\"scroller\" axis=\"x\" scrollbar=\"hidden\" :label=\"label\" class=\"rk-activity\">\n <table\n ref=\"grid\"\n class=\"rk-activity-table\"\n :aria-label=\"label\"\n @keydown=\"onKeydown\"\n @click=\"onClick\"\n >\n <thead>\n <tr>\n <!-- The weekday column is a spacer here: the headings below name\n their own rows, and a heading for the headings says nothing. -->\n <td class=\"rk-activity-corner\"></td>\n <th v-for=\"month in months\" :key=\"month.key\" :colspan=\"month.span\" scope=\"colgroup\">\n {{ month.label }}\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr v-for=\"(weekday, row) in weekdays\" :key=\"weekday\">\n <th scope=\"row\" class=\"rk-activity-weekday\">\n <span class=\"sr-only\">{{ weekday }}</span>\n </th>\n\n <template v-for=\"(week, column) in weeks\" :key=\"column\">\n <td\n v-if=\"week[row]\"\n class=\"rk-activity-cell\"\n v-bind=\"dayAttrs(week[row]!)\"\n :tabindex=\"cells[focused]?.day === week[row] ? 0 : -1\"\n :aria-label=\"dayLabel(week[row]!)\"\n :class=\"[levelFor(week[row]!), { 'is-pickable': isSelectable?.(week[row]!) }]\"\n />\n <!-- The padding at either end of the range. Empty, and skipped\n by the arrows, but present: a row with fewer cells than the\n one above it is no longer a table. -->\n <td v-else class=\"rk-activity-cell is-blank\" aria-hidden=\"true\" />\n </template>\n </tr>\n </tbody>\n </table>\n </ScrollArea>\n</template>\n\n<style scoped>\n.rk-activity-table {\n border-collapse: separate;\n border-spacing: 2px;\n}\n\n.rk-activity-corner,\n.rk-activity-weekday {\n width: 0;\n padding: 0;\n}\n\n.rk-activity-table th {\n color: var(--color-ink-soft);\n font-size: 0.5625rem;\n font-weight: 500;\n line-height: 1;\n text-align: start;\n}\n\n.rk-activity-cell {\n width: 0.625rem;\n height: 0.625rem;\n padding: 0;\n border-radius: var(--radius-cell);\n background: var(--color-muted);\n}\n\n.rk-activity-cell.is-blank {\n background: transparent;\n}\n\n.rk-activity-cell.is-pickable {\n cursor: pointer;\n}\n\n.rk-activity-cell:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends { key: string; label: string; value: number }\">\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'\n\nimport { watchVisibility } from '../motion/environment'\n\n/**\n * A row of values, compared.\n *\n * ## It is a table, for the same reason `ActivityGrid` is\n *\n * The rows are `<tr>`, each label is a `<th>`, and each value is printed as\n * text beside its bar. That is not a concession bolted on afterwards — it\n * is the accessible form *and* the layout, and it means the data can be\n * read with the bars switched off entirely. The bars themselves are\n * `aria-hidden`, because a reader who has just been told \"element-plus,\n * 104.1 KB\" does not also need \"graphic\".\n *\n * The alternative every chart reaches for first is an SVG with a\n * `role=\"img\"` and a sentence describing it. That sentence is written once,\n * by hand, and is wrong the first time the data changes.\n *\n * ## The scale starts at zero, and there is no prop to change that\n *\n * A bar chart whose axis starts at 80 makes a five per cent difference look\n * like a doubling, and it is the single most common way a true set of\n * numbers is used to say something false. `max` raises the top of the scale\n * — for a fixed ceiling across several charts — and nothing lowers the\n * bottom.\n *\n * ## The colours are yours\n *\n * `fill` returns a class per row, the same contract as `ToneDot`'s and\n * `ActivityGrid`'s `levelFor`: the kit does not know which of your rows is\n * the one you are making a point about. It defaults to `bg-primary`, which\n * is a role rather than a colour, so a chart that makes no point still\n * follows the palette.\n */\nconst {\n series,\n label,\n valueLabel,\n fill = () => 'bg-primary',\n max = undefined,\n animate = true,\n} = defineProps<{\n /** The rows, in the order they should read. */\n series: readonly T[]\n /** Names the chart, e.g. \"Bundle size by kit\". Becomes its caption. */\n label: string\n /** How a value reads, e.g. `(kb) => `${kb} KB``. The kit has no units. */\n valueLabel: (value: number, item: T) => string\n /** A class for one row's bar, e.g. `bg-positive`. */\n fill?: ((item: T, index: number) => string) | undefined\n /** The top of the scale. Defaults to the largest value present. */\n max?: number | undefined\n /** Grow the bars when the chart first scrolls into view. */\n animate?: boolean | undefined\n}>()\n\ndefineSlots<{\n /** Overrides a row's printed value — a note beside the number, a link. */\n value?: (props: { item: T; index: number }) => unknown\n}>()\n\nconst root = useTemplateRef<HTMLElement>('root')\n\n/* Drawn flat until it is on screen, then grown. The duration is a token, so\n a reader who asked for less motion gets the finished chart with no branch\n here: `tokens.css` zeroes every duration under `prefers-reduced-motion`. */\nconst grown = ref(!animate)\n\nlet stopWatching: (() => void) | undefined\n\nonMounted(() => {\n if (grown.value || !root.value) return\n\n stopWatching = watchVisibility(root.value, (visible) => {\n if (!visible) return\n grown.value = true\n stopWatching?.()\n })\n})\n\nonBeforeUnmount(() => stopWatching?.())\n\n/* The top of the scale, never the bottom. A zero ceiling would divide by\n zero; an empty series has nothing to draw either way. */\nconst ceiling = computed(() => {\n const largest = Math.max(0, ...series.map((item) => item.value))\n\n return Math.max(max ?? largest, Number.EPSILON)\n})\n\nconst rows = computed(() =>\n series.map((item, index) => ({\n item,\n index,\n /* Clamped: a value past an explicit `max` would otherwise draw a bar\n wider than its own chart. */\n width: `${Math.min(100, Math.max(0, (item.value / ceiling.value) * 100))}%`,\n fill: fill(item, index),\n })),\n)\n</script>\n\n<template>\n <table ref=\"root\" class=\"rk-bars\">\n <caption class=\"sr-only\">\n {{\n label\n }}\n </caption>\n <tbody>\n <tr v-for=\"row in rows\" :key=\"row.item.key\" class=\"rk-bars-row\">\n <th scope=\"row\" class=\"rk-bars-label\">{{ row.item.label }}</th>\n <td class=\"rk-bars-track\">\n <!-- The number beside it is what a reader hears; this is the\n picture of it. -->\n <span\n class=\"rk-bars-fill\"\n :class=\"row.fill\"\n :style=\"{ width: grown ? row.width : '0%' }\"\n aria-hidden=\"true\"\n />\n </td>\n <td class=\"rk-bars-value\">\n <slot name=\"value\" :item=\"row.item\" :index=\"row.index\">\n {{ valueLabel(row.item.value, row.item) }}\n </slot>\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<style scoped>\n.rk-bars {\n width: 100%;\n border-collapse: collapse;\n}\n\n.rk-bars-label {\n padding-block: 0.3125rem;\n padding-inline-end: 0.75rem;\n color: var(--color-ink);\n font-size: 0.8125rem;\n font-weight: 500;\n text-align: start;\n white-space: nowrap;\n}\n\n.rk-bars-track {\n width: 100%;\n padding-block: 0.3125rem;\n}\n\n.rk-bars-fill {\n display: block;\n height: 0.625rem;\n border-radius: 9999px;\n transition: width var(--duration-slower) var(--ease-standard);\n}\n\n.rk-bars-value {\n padding-block: 0.3125rem;\n padding-inline-start: 0.75rem;\n color: var(--color-ink-soft);\n font-size: 0.8125rem;\n font-variant-numeric: tabular-nums;\n text-align: end;\n white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends { key: string; label: string; value: number }\">\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'\n\nimport { watchVisibility } from '../motion/environment'\n\n/**\n * A row of values, compared.\n *\n * ## It is a table, for the same reason `ActivityGrid` is\n *\n * The rows are `<tr>`, each label is a `<th>`, and each value is printed as\n * text beside its bar. That is not a concession bolted on afterwards — it\n * is the accessible form *and* the layout, and it means the data can be\n * read with the bars switched off entirely. The bars themselves are\n * `aria-hidden`, because a reader who has just been told \"element-plus,\n * 104.1 KB\" does not also need \"graphic\".\n *\n * The alternative every chart reaches for first is an SVG with a\n * `role=\"img\"` and a sentence describing it. That sentence is written once,\n * by hand, and is wrong the first time the data changes.\n *\n * ## The scale starts at zero, and there is no prop to change that\n *\n * A bar chart whose axis starts at 80 makes a five per cent difference look\n * like a doubling, and it is the single most common way a true set of\n * numbers is used to say something false. `max` raises the top of the scale\n * — for a fixed ceiling across several charts — and nothing lowers the\n * bottom.\n *\n * ## The colours are yours\n *\n * `fill` returns a class per row, the same contract as `ToneDot`'s and\n * `ActivityGrid`'s `levelFor`: the kit does not know which of your rows is\n * the one you are making a point about. It defaults to `bg-primary`, which\n * is a role rather than a colour, so a chart that makes no point still\n * follows the palette.\n */\nconst {\n series,\n label,\n valueLabel,\n fill = () => 'bg-primary',\n max = undefined,\n animate = true,\n} = defineProps<{\n /** The rows, in the order they should read. */\n series: readonly T[]\n /** Names the chart, e.g. \"Bundle size by kit\". Becomes its caption. */\n label: string\n /** How a value reads, e.g. `(kb) => `${kb} KB``. The kit has no units. */\n valueLabel: (value: number, item: T) => string\n /** A class for one row's bar, e.g. `bg-positive`. */\n fill?: ((item: T, index: number) => string) | undefined\n /** The top of the scale. Defaults to the largest value present. */\n max?: number | undefined\n /** Grow the bars when the chart first scrolls into view. */\n animate?: boolean | undefined\n}>()\n\ndefineSlots<{\n /** Overrides a row's printed value — a note beside the number, a link. */\n value?: (props: { item: T; index: number }) => unknown\n}>()\n\nconst root = useTemplateRef<HTMLElement>('root')\n\n/* Drawn flat until it is on screen, then grown. The duration is a token, so\n a reader who asked for less motion gets the finished chart with no branch\n here: `tokens.css` zeroes every duration under `prefers-reduced-motion`. */\nconst grown = ref(!animate)\n\nlet stopWatching: (() => void) | undefined\n\nonMounted(() => {\n if (grown.value || !root.value) return\n\n stopWatching = watchVisibility(root.value, (visible) => {\n if (!visible) return\n grown.value = true\n stopWatching?.()\n })\n})\n\nonBeforeUnmount(() => stopWatching?.())\n\n/* The top of the scale, never the bottom. A zero ceiling would divide by\n zero; an empty series has nothing to draw either way. */\nconst ceiling = computed(() => {\n const largest = Math.max(0, ...series.map((item) => item.value))\n\n return Math.max(max ?? largest, Number.EPSILON)\n})\n\nconst rows = computed(() =>\n series.map((item, index) => ({\n item,\n index,\n /* Clamped: a value past an explicit `max` would otherwise draw a bar\n wider than its own chart. */\n width: `${Math.min(100, Math.max(0, (item.value / ceiling.value) * 100))}%`,\n fill: fill(item, index),\n })),\n)\n</script>\n\n<template>\n <table ref=\"root\" class=\"rk-bars\">\n <caption class=\"sr-only\">\n {{\n label\n }}\n </caption>\n <tbody>\n <tr v-for=\"row in rows\" :key=\"row.item.key\" class=\"rk-bars-row\">\n <th scope=\"row\" class=\"rk-bars-label\">{{ row.item.label }}</th>\n <td class=\"rk-bars-track\">\n <!-- The number beside it is what a reader hears; this is the\n picture of it. -->\n <span\n class=\"rk-bars-fill\"\n :class=\"row.fill\"\n :style=\"{ width: grown ? row.width : '0%' }\"\n aria-hidden=\"true\"\n />\n </td>\n <td class=\"rk-bars-value\">\n <slot name=\"value\" :item=\"row.item\" :index=\"row.index\">\n {{ valueLabel(row.item.value, row.item) }}\n </slot>\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<style scoped>\n.rk-bars {\n width: 100%;\n border-collapse: collapse;\n}\n\n.rk-bars-label {\n padding-block: 0.3125rem;\n padding-inline-end: 0.75rem;\n color: var(--color-ink);\n font-size: 0.8125rem;\n font-weight: 500;\n text-align: start;\n white-space: nowrap;\n}\n\n.rk-bars-track {\n width: 100%;\n padding-block: 0.3125rem;\n}\n\n.rk-bars-fill {\n display: block;\n height: 0.625rem;\n border-radius: 9999px;\n transition: width var(--duration-slower) var(--ease-standard);\n}\n\n.rk-bars-value {\n padding-block: 0.3125rem;\n padding-inline-start: 0.75rem;\n color: var(--color-ink-soft);\n font-size: 0.8125rem;\n font-variant-numeric: tabular-nums;\n text-align: end;\n white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends { key: string; label: string; value: number }\">\nimport { computed } from 'vue'\n\n/**\n * Parts of a whole.\n *\n * ## Not for comparing things\n *\n * This is the chart people reach for when they mean the other one. Judging\n * the difference between two angles is measurably harder than judging the\n * difference between two lengths, so six values that need ranking belong in\n * a `BarChart` and not here. Reach for this when the point is that the\n * slices *add up* — where a budget went, what a bundle is made of — and\n * when there are few enough slices to tell apart.\n *\n * ## The legend is the chart\n *\n * The ring is `aria-hidden`, and every slice's name and value is real text\n * beside it. Same decision as `BarChart`'s table: the description of a\n * chart is not a sentence somebody writes once and forgets to update, it\n * is the data, rendered.\n *\n * ## The colours are yours\n *\n * `fill` returns a class per slice, like `ToneDot`'s and `ActivityGrid`'s\n * `levelFor`. It is required here rather than defaulted: a ring whose\n * slices are all one colour is not a chart, so there is no sensible\n * default to give it.\n */\nconst {\n slices,\n label,\n valueLabel,\n fill,\n thickness = 14,\n} = defineProps<{\n /** The parts, in the order they should read around the ring. */\n slices: readonly T[]\n /** Names the chart, e.g. \"What the stylesheet is made of\". */\n label: string\n /** How a value reads, e.g. `(kb) => `${kb} KB``. The kit has no units. */\n valueLabel: (value: number, item: T) => string\n /** A class for one slice, e.g. `text-primary` — it paints the stroke. */\n fill: (item: T, index: number) => string\n /** How thick the ring is, as a percentage of its radius. */\n thickness?: number | undefined\n}>()\n\n/* A 100-unit circumference, so every slice's length is its percentage and\n there is no arithmetic to get wrong twice. */\nconst CIRCUMFERENCE = 100\nconst RADIUS = CIRCUMFERENCE / (2 * Math.PI)\n\nconst total = computed(() => slices.reduce((sum, slice) => sum + Math.max(0, slice.value), 0))\n\nconst arcs = computed(() => {\n let travelled = 0\n\n return slices.map((item, index) => {\n const share = total.value === 0 ? 0 : (Math.max(0, item.value) / total.value) * CIRCUMFERENCE\n /* Drawn anticlockwise from twelve o'clock by the transform below, so\n the offset counts the slices already placed. */\n const offset = -travelled\n travelled += share\n\n return {\n item,\n index,\n share,\n offset,\n percent: total.value === 0 ? 0 : (item.value / total.value) * 100,\n fill: fill(item, index),\n }\n })\n})\n</script>\n\n<template>\n <div class=\"rk-donut\">\n <!-- The names and numbers beside it are what a reader hears. -->\n <svg class=\"rk-donut-ring\" viewBox=\"0 0 40 40\" aria-hidden=\"true\">\n <g transform=\"rotate(-90 20 20)\">\n <circle\n v-for=\"arc in arcs\"\n :key=\"arc.item.key\"\n :class=\"arc.fill\"\n cx=\"20\"\n cy=\"20\"\n :r=\"RADIUS\"\n fill=\"none\"\n stroke=\"currentColor\"\n :stroke-width=\"(thickness / 100) * RADIUS * 2\"\n :stroke-dasharray=\"`${arc.share} ${CIRCUMFERENCE - arc.share}`\"\n :stroke-dashoffset=\"arc.offset\"\n />\n </g>\n </svg>\n\n <ul class=\"rk-donut-legend\" :aria-label=\"label\">\n <li v-for=\"arc in arcs\" :key=\"arc.item.key\" class=\"rk-donut-item\">\n <span class=\"rk-donut-swatch\" :class=\"arc.fill\" aria-hidden=\"true\" />\n <span class=\"rk-donut-name\">{{ arc.item.label }}</span>\n <span class=\"rk-donut-value\">{{ valueLabel(arc.item.value, arc.item) }}</span>\n </li>\n </ul>\n </div>\n</template>\n\n<style scoped>\n.rk-donut {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 1.25rem;\n}\n\n.rk-donut-ring {\n width: 8.5rem;\n height: 8.5rem;\n flex: none;\n}\n\n.rk-donut-legend {\n margin: 0;\n padding: 0;\n min-width: 0;\n flex: 1 1 12rem;\n list-style: none;\n}\n\n.rk-donut-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding-block: 0.1875rem;\n font-size: 0.8125rem;\n}\n\n.rk-donut-swatch {\n width: 0.625rem;\n height: 0.625rem;\n flex: none;\n border-radius: 9999px;\n background: currentColor;\n}\n\n.rk-donut-name {\n min-width: 0;\n flex: 1 1 auto;\n color: var(--color-ink);\n}\n\n.rk-donut-value {\n color: var(--color-ink-soft);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends { key: string; label: string; value: number }\">\nimport { computed } from 'vue'\n\n/**\n * Parts of a whole.\n *\n * ## Not for comparing things\n *\n * This is the chart people reach for when they mean the other one. Judging\n * the difference between two angles is measurably harder than judging the\n * difference between two lengths, so six values that need ranking belong in\n * a `BarChart` and not here. Reach for this when the point is that the\n * slices *add up* — where a budget went, what a bundle is made of — and\n * when there are few enough slices to tell apart.\n *\n * ## The legend is the chart\n *\n * The ring is `aria-hidden`, and every slice's name and value is real text\n * beside it. Same decision as `BarChart`'s table: the description of a\n * chart is not a sentence somebody writes once and forgets to update, it\n * is the data, rendered.\n *\n * ## The colours are yours\n *\n * `fill` returns a class per slice, like `ToneDot`'s and `ActivityGrid`'s\n * `levelFor`. It is required here rather than defaulted: a ring whose\n * slices are all one colour is not a chart, so there is no sensible\n * default to give it.\n */\nconst {\n slices,\n label,\n valueLabel,\n fill,\n thickness = 14,\n} = defineProps<{\n /** The parts, in the order they should read around the ring. */\n slices: readonly T[]\n /** Names the chart, e.g. \"What the stylesheet is made of\". */\n label: string\n /** How a value reads, e.g. `(kb) => `${kb} KB``. The kit has no units. */\n valueLabel: (value: number, item: T) => string\n /** A class for one slice, e.g. `text-primary` — it paints the stroke. */\n fill: (item: T, index: number) => string\n /** How thick the ring is, as a percentage of its radius. */\n thickness?: number | undefined\n}>()\n\n/* A 100-unit circumference, so every slice's length is its percentage and\n there is no arithmetic to get wrong twice. */\nconst CIRCUMFERENCE = 100\nconst RADIUS = CIRCUMFERENCE / (2 * Math.PI)\n\nconst total = computed(() => slices.reduce((sum, slice) => sum + Math.max(0, slice.value), 0))\n\nconst arcs = computed(() => {\n let travelled = 0\n\n return slices.map((item, index) => {\n const share = total.value === 0 ? 0 : (Math.max(0, item.value) / total.value) * CIRCUMFERENCE\n /* Drawn anticlockwise from twelve o'clock by the transform below, so\n the offset counts the slices already placed. */\n const offset = -travelled\n travelled += share\n\n return {\n item,\n index,\n share,\n offset,\n percent: total.value === 0 ? 0 : (item.value / total.value) * 100,\n fill: fill(item, index),\n }\n })\n})\n</script>\n\n<template>\n <div class=\"rk-donut\">\n <!-- The names and numbers beside it are what a reader hears. -->\n <svg class=\"rk-donut-ring\" viewBox=\"0 0 40 40\" aria-hidden=\"true\">\n <g transform=\"rotate(-90 20 20)\">\n <circle\n v-for=\"arc in arcs\"\n :key=\"arc.item.key\"\n :class=\"arc.fill\"\n cx=\"20\"\n cy=\"20\"\n :r=\"RADIUS\"\n fill=\"none\"\n stroke=\"currentColor\"\n :stroke-width=\"(thickness / 100) * RADIUS * 2\"\n :stroke-dasharray=\"`${arc.share} ${CIRCUMFERENCE - arc.share}`\"\n :stroke-dashoffset=\"arc.offset\"\n />\n </g>\n </svg>\n\n <ul class=\"rk-donut-legend\" :aria-label=\"label\">\n <li v-for=\"arc in arcs\" :key=\"arc.item.key\" class=\"rk-donut-item\">\n <span class=\"rk-donut-swatch\" :class=\"arc.fill\" aria-hidden=\"true\" />\n <span class=\"rk-donut-name\">{{ arc.item.label }}</span>\n <span class=\"rk-donut-value\">{{ valueLabel(arc.item.value, arc.item) }}</span>\n </li>\n </ul>\n </div>\n</template>\n\n<style scoped>\n.rk-donut {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 1.25rem;\n}\n\n.rk-donut-ring {\n width: 8.5rem;\n height: 8.5rem;\n flex: none;\n}\n\n.rk-donut-legend {\n margin: 0;\n padding: 0;\n min-width: 0;\n flex: 1 1 12rem;\n list-style: none;\n}\n\n.rk-donut-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding-block: 0.1875rem;\n font-size: 0.8125rem;\n}\n\n.rk-donut-swatch {\n width: 0.625rem;\n height: 0.625rem;\n flex: none;\n border-radius: 9999px;\n background: currentColor;\n}\n\n.rk-donut-name {\n min-width: 0;\n flex: 1 1 auto;\n color: var(--color-ink);\n}\n\n.rk-donut-value {\n color: var(--color-ink-soft);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T\">\nimport { computed, onMounted, onScopeDispose, useTemplateRef, watch, watchEffect } from 'vue'\n\nimport { useVirtualWindow } from '../composables/use-virtual-window'\nimport ScrollArea from './ScrollArea.vue'\n\n/**\n * A long list where only the rows near the viewport are in the DOM.\n *\n * ## The part that is usually dropped\n *\n * Windowing is easy to get right visually and easy to get wrong for a\n * reader: a list of ten thousand names that renders twenty of them reads\n * as a list of twenty, and the twenty change under the reader as they\n * move. So every row states its place in the whole — `aria-setsize` is the\n * real length and `aria-posinset` is the real index, not the index in the\n * window. Without those two the list is a different list every time it\n * scrolls.\n *\n * ## Fixed rows, and why that is a prop rather than a measurement\n *\n * Every row is `rowHeight` tall. That is what lets the window be\n * arithmetic — a division rather than a measurement of every row — and it\n * is why the empty space above and below is exactly right, which is what\n * keeps the scrollbar honest about how long the list is. A list of rows\n * that are not all the same height is not this component.\n *\n * ## Below the threshold it is a plain list\n *\n * Under `virtualizeAfter` rows nothing is windowed, no padding is rendered\n * and the markup is what it would have been without any of this. The cost\n * of windowing is only paid by a list long enough to need it.\n */\nconst {\n items,\n rowHeight,\n label,\n virtualizeAfter = 50,\n scrollbar = 'auto',\n} = defineProps<{\n /** The whole list. Only the rows near the viewport are rendered. */\n items: readonly T[]\n /** Every row is this tall, in pixels. */\n rowHeight: number\n /** Names the list, e.g. \"Bütün kayıtlar\". Already translated. */\n label: string\n /** Below this many rows the list is not windowed at all. */\n virtualizeAfter?: number | undefined\n /** Passed to the scroll area: `hidden` takes the native bar away. */\n scrollbar?: 'auto' | 'hidden' | undefined\n}>()\n\ndefineSlots<{\n /** One row. `index` is its place in the whole list, not in the window. */\n default: (props: { item: T; index: number }) => unknown\n}>()\n\nconst area = useTemplateRef<InstanceType<typeof ScrollArea>>('area')\n\nconst {\n window: shown,\n padTop,\n padBottom,\n viewportHeight,\n onScroll,\n} = useVirtualWindow({\n count: computed(() => items.length),\n rowHeight: computed(() => rowHeight),\n threshold: computed(() => virtualizeAfter),\n})\n\nconst rows = computed(() =>\n items.slice(shown.value.start, shown.value.end).map((item, offset) => ({\n item,\n /** The row's place in the whole list, which is what a reader is told. */\n index: shown.value.start + offset,\n })),\n)\n\n/* How tall the viewport is, measured rather than guessed: it decides how\n many rows are in the window, and a guess that is too small leaves a gap\n at the bottom of a tall list. */\nfunction measure() {\n const element = area.value?.viewport\n if (element) viewportHeight.value = element.clientHeight\n}\n\nonMounted(measure)\n// A list that arrives after mount can change the box's height along with it.\nwatch(() => items.length, measure)\n\n/*\n * And again whenever the box itself changes size.\n *\n * `ScrollArea` observes the viewport for its own fades, but that answers a\n * different question and its result does not reach here. Without this, a\n * window resize, a sidebar opening, or a list mounted inside a panel that\n * is laid out a frame later leaves `viewportHeight` at whatever it was —\n * which renders too few rows and leaves a gap at the bottom, or too many.\n */\nlet observer: ResizeObserver | null = null\n\nwatchEffect(() => {\n observer?.disconnect()\n observer = null\n\n const element = area.value?.viewport\n if (!element || typeof ResizeObserver === 'undefined') return\n\n observer = new ResizeObserver(measure)\n observer.observe(element)\n})\n\nonScopeDispose(() => observer?.disconnect())\n\n/** Scrolls a row into view by its index, for an app driving the list itself. */\nfunction scrollToIndex(index: number) {\n const element = area.value?.viewport\n if (!element) return\n\n const top = Math.max(0, Math.min(items.length - 1, index)) * rowHeight\n if (top < element.scrollTop) element.scrollTop = top\n else if (top + rowHeight > element.scrollTop + element.clientHeight) {\n element.scrollTop = top + rowHeight - element.clientHeight\n }\n}\n\ndefineExpose({ scrollToIndex })\n</script>\n\n<template>\n <ScrollArea\n ref=\"area\"\n axis=\"y\"\n :label=\"label\"\n :scrollbar=\"scrollbar\"\n class=\"rk-vlist\"\n @scroll=\"onScroll\"\n >\n <ul class=\"rk-vlist-rows\" :aria-label=\"label\">\n <!-- The rows that are not rendered, as height. This is what makes the\n scrollbar the length of the whole list rather than the window. -->\n <li v-if=\"padTop > 0\" :style=\"{ height: `${padTop}px` }\" aria-hidden=\"true\" />\n\n <li\n v-for=\"row in rows\"\n :key=\"row.index\"\n class=\"rk-vlist-row\"\n :style=\"{ height: `${rowHeight}px` }\"\n :aria-setsize=\"items.length\"\n :aria-posinset=\"row.index + 1\"\n >\n <slot :item=\"row.item\" :index=\"row.index\" />\n </li>\n\n <li v-if=\"padBottom > 0\" :style=\"{ height: `${padBottom}px` }\" aria-hidden=\"true\" />\n </ul>\n </ScrollArea>\n</template>\n\n<style scoped>\n.rk-vlist-rows {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.rk-vlist-row {\n box-sizing: border-box;\n overflow: hidden;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T\">\nimport { computed, onMounted, onScopeDispose, useTemplateRef, watch, watchEffect } from 'vue'\n\nimport { useVirtualWindow } from '../composables/use-virtual-window'\nimport ScrollArea from './ScrollArea.vue'\n\n/**\n * A long list where only the rows near the viewport are in the DOM.\n *\n * ## The part that is usually dropped\n *\n * Windowing is easy to get right visually and easy to get wrong for a\n * reader: a list of ten thousand names that renders twenty of them reads\n * as a list of twenty, and the twenty change under the reader as they\n * move. So every row states its place in the whole — `aria-setsize` is the\n * real length and `aria-posinset` is the real index, not the index in the\n * window. Without those two the list is a different list every time it\n * scrolls.\n *\n * ## Fixed rows, and why that is a prop rather than a measurement\n *\n * Every row is `rowHeight` tall. That is what lets the window be\n * arithmetic — a division rather than a measurement of every row — and it\n * is why the empty space above and below is exactly right, which is what\n * keeps the scrollbar honest about how long the list is. A list of rows\n * that are not all the same height is not this component.\n *\n * ## Below the threshold it is a plain list\n *\n * Under `virtualizeAfter` rows nothing is windowed, no padding is rendered\n * and the markup is what it would have been without any of this. The cost\n * of windowing is only paid by a list long enough to need it.\n */\nconst {\n items,\n rowHeight,\n label,\n virtualizeAfter = 50,\n scrollbar = 'auto',\n} = defineProps<{\n /** The whole list. Only the rows near the viewport are rendered. */\n items: readonly T[]\n /** Every row is this tall, in pixels. */\n rowHeight: number\n /** Names the list, e.g. \"Bütün kayıtlar\". Already translated. */\n label: string\n /** Below this many rows the list is not windowed at all. */\n virtualizeAfter?: number | undefined\n /** Passed to the scroll area: `hidden` takes the native bar away. */\n scrollbar?: 'auto' | 'hidden' | undefined\n}>()\n\ndefineSlots<{\n /** One row. `index` is its place in the whole list, not in the window. */\n default: (props: { item: T; index: number }) => unknown\n}>()\n\nconst area = useTemplateRef<InstanceType<typeof ScrollArea>>('area')\n\nconst {\n window: shown,\n padTop,\n padBottom,\n viewportHeight,\n onScroll,\n} = useVirtualWindow({\n count: computed(() => items.length),\n rowHeight: computed(() => rowHeight),\n threshold: computed(() => virtualizeAfter),\n})\n\nconst rows = computed(() =>\n items.slice(shown.value.start, shown.value.end).map((item, offset) => ({\n item,\n /** The row's place in the whole list, which is what a reader is told. */\n index: shown.value.start + offset,\n })),\n)\n\n/* How tall the viewport is, measured rather than guessed: it decides how\n many rows are in the window, and a guess that is too small leaves a gap\n at the bottom of a tall list. */\nfunction measure() {\n const element = area.value?.viewport\n if (element) viewportHeight.value = element.clientHeight\n}\n\nonMounted(measure)\n// A list that arrives after mount can change the box's height along with it.\nwatch(() => items.length, measure)\n\n/*\n * And again whenever the box itself changes size.\n *\n * `ScrollArea` observes the viewport for its own fades, but that answers a\n * different question and its result does not reach here. Without this, a\n * window resize, a sidebar opening, or a list mounted inside a panel that\n * is laid out a frame later leaves `viewportHeight` at whatever it was —\n * which renders too few rows and leaves a gap at the bottom, or too many.\n */\nlet observer: ResizeObserver | null = null\n\nwatchEffect(() => {\n observer?.disconnect()\n observer = null\n\n const element = area.value?.viewport\n if (!element || typeof ResizeObserver === 'undefined') return\n\n observer = new ResizeObserver(measure)\n observer.observe(element)\n})\n\nonScopeDispose(() => observer?.disconnect())\n\n/** Scrolls a row into view by its index, for an app driving the list itself. */\nfunction scrollToIndex(index: number) {\n const element = area.value?.viewport\n if (!element) return\n\n const top = Math.max(0, Math.min(items.length - 1, index)) * rowHeight\n if (top < element.scrollTop) element.scrollTop = top\n else if (top + rowHeight > element.scrollTop + element.clientHeight) {\n element.scrollTop = top + rowHeight - element.clientHeight\n }\n}\n\ndefineExpose({ scrollToIndex })\n</script>\n\n<template>\n <ScrollArea\n ref=\"area\"\n axis=\"y\"\n :label=\"label\"\n :scrollbar=\"scrollbar\"\n class=\"rk-vlist\"\n @scroll=\"onScroll\"\n >\n <ul class=\"rk-vlist-rows\" :aria-label=\"label\">\n <!-- The rows that are not rendered, as height. This is what makes the\n scrollbar the length of the whole list rather than the window. -->\n <li v-if=\"padTop > 0\" :style=\"{ height: `${padTop}px` }\" aria-hidden=\"true\" />\n\n <li\n v-for=\"row in rows\"\n :key=\"row.index\"\n class=\"rk-vlist-row\"\n :style=\"{ height: `${rowHeight}px` }\"\n :aria-setsize=\"items.length\"\n :aria-posinset=\"row.index + 1\"\n >\n <slot :item=\"row.item\" :index=\"row.index\" />\n </li>\n\n <li v-if=\"padBottom > 0\" :style=\"{ height: `${padBottom}px` }\" aria-hidden=\"true\" />\n </ul>\n </ScrollArea>\n</template>\n\n<style scoped>\n.rk-vlist-rows {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.rk-vlist-row {\n box-sizing: border-box;\n overflow: hidden;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useAnnounce } from '../composables/use-announce'\n\n/**\n * The two live regions `announce()` speaks through. Render one per app,\n * anywhere — nothing here is ever visible.\n *\n * Both regions are rendered empty from mount and stay in the page for its\n * whole life. That is the point of the component: a live region inserted\n * along with its first message is usually not announced at all, because\n * the reader has nothing to notice a change *to*. Only the text inside\n * them ever changes.\n */\nconst { polite, assertive } = useAnnounce()\n</script>\n\n<template>\n <div class=\"rk-announcer\">\n <!-- `status` waits for a pause; `alert` interrupts. Two regions rather\n than one with a changing `aria-live`, because changing the\n politeness of a live region is not reliably picked up. -->\n <p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{ polite }}</p>\n <p role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">{{ assertive }}</p>\n </div>\n</template>\n\n<style scoped>\n/* Clipped rather than `display: none`: a hidden live region is not read at\n all, which is the quietest possible way for this to fail. */\n.rk-announcer {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useAnnounce } from '../composables/use-announce'\n\n/**\n * The two live regions `announce()` speaks through. Render one per app,\n * anywhere — nothing here is ever visible.\n *\n * Both regions are rendered empty from mount and stay in the page for its\n * whole life. That is the point of the component: a live region inserted\n * along with its first message is usually not announced at all, because\n * the reader has nothing to notice a change *to*. Only the text inside\n * them ever changes.\n */\nconst { polite, assertive } = useAnnounce()\n</script>\n\n<template>\n <div class=\"rk-announcer\">\n <!-- `status` waits for a pause; `alert` interrupts. Two regions rather\n than one with a changing `aria-live`, because changing the\n politeness of a live region is not reliably picked up. -->\n <p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{ polite }}</p>\n <p role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">{{ assertive }}</p>\n </div>\n</template>\n\n<style scoped>\n/* Clipped rather than `display: none`: a hidden live region is not read at\n all, which is the quietest possible way for this to fail. */\n.rk-announcer {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, useTemplateRef, watch } from 'vue'\n\nimport { focusTarget } from '../utils/focus-target'\n\n/**\n * What a rejected form says at the top of itself.\n *\n * ## Why a summary and not just the messages beside the fields\n *\n * `FormField` already puts the reason beside the field it belongs to, and\n * that is where it has to stay — it is where the reader's eye is and where\n * it stays until the field is fixed. What that does not do is tell anyone\n * the submission failed at all. On a long form the first rejected field\n * can be a screenful above or below, focus is still on the submit button,\n * and to a screen reader nothing happened when it was pressed.\n *\n * So this is not a second copy of the messages. It is the answer to \"did\n * that work?\", and a way to get from there to each field in one press.\n *\n * ## It is focused, not announced\n *\n * The obvious build gives this `role=\"alert\"`, and then a reader hears the\n * whole list read at it while focus stays on the button it cannot use. The\n * standard answer is better: move focus *into* the summary. Its heading\n * and list are read because the reader is now there, the links are one Tab\n * away rather than a search, and Escape is not needed because nothing was\n * taken over.\n *\n * Focus moves on its own the first time errors appear. It does not move\n * again on its own, because a form that re-validates as you type would\n * otherwise drag focus out of the field being corrected on every\n * keystroke. Call `focus()` from the submit handler for the second and\n * third attempts — the exposed method exists for exactly that.\n *\n * ## The order is the form's, not the object's\n *\n * Errors are read in the order the keys arrive, which is the order the\n * schema lists them, which is usually the order the fields are in. When it\n * is not, `fields` names the order explicitly — a list that reads bottom to\n * top sends the reader up and down the form instead of through it.\n */\nconst {\n errors,\n title,\n labelFor,\n fieldId = (field: string) => field,\n fields = undefined,\n} = defineProps<{\n /** Field name to message, as `fieldErrors` returns it. */\n errors: Readonly<Record<string, string>>\n /** Heads the summary, e.g. \"Düzeltilmesi gereken 2 alan var\". Already translated. */\n title: string\n /** A field's name as the reader knows it. The kit has no words of its own. */\n labelFor: (field: string) => string\n /**\n * A field's `id`, to link to. Pass the same one to that `FormField`'s\n * `fieldId`, or the link points at nothing and the reader is left at the\n * top of a form they cannot navigate.\n */\n fieldId?: ((field: string) => string) | undefined\n /** The order to read them in, when the object's own order is not the form's. */\n fields?: readonly string[] | undefined\n}>()\n\nconst panel = useTemplateRef<HTMLElement>('panel')\n\nconst listed = computed(() => {\n const names = fields ?? Object.keys(errors)\n\n return names\n .filter((field) => errors[field] !== undefined)\n .map((field) => ({ field, message: errors[field]!, id: fieldId(field) }))\n})\n\nconst hasErrors = computed(() => listed.value.length > 0)\n\n/** Moves focus into the summary. Call it on every failed submit. */\nfunction focus() {\n focusTarget(panel.value)\n}\n\n/* The fragment is left on the link so it still works without JavaScript,\n but a fragment alone scrolls without moving focus — the reader arrives\n at the field visually and is still up here for everything else. */\nfunction goToField(event: MouseEvent, id: string) {\n if (focusTarget(id)) event.preventDefault()\n}\n\n/*\n * Once, on the way from valid to not.\n *\n * The watched value is *whether* there are errors, not which — so a form\n * that re-validates while the reader types cannot fire this, and focus\n * stays in the field being corrected. Watching the messages instead would\n * pull focus out of it on every keystroke, which is worse than never\n * focusing at all.\n */\nwatch(hasErrors, async (now) => {\n if (!now) return\n\n // The panel does not exist until this change has rendered.\n await nextTick()\n focus()\n})\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <div v-if=\"hasErrors\" ref=\"panel\" class=\"rk-errsum\" tabindex=\"-1\">\n <p class=\"rk-errsum-title\">{{ title }}</p>\n\n <ul class=\"rk-errsum-list\">\n <li v-for=\"item in listed\" :key=\"item.field\">\n <a :href=\"`#${item.id}`\" class=\"rk-errsum-link\" @click=\"goToField($event, item.id)\">\n {{ labelFor(item.field) }}: {{ item.message }}\n </a>\n </li>\n </ul>\n </div>\n</template>\n\n<style scoped>\n.rk-errsum {\n border: 2px solid var(--color-negative);\n border-radius: var(--radius-card);\n padding: 0.875rem 1rem;\n}\n\n.rk-errsum:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-errsum-title {\n margin: 0;\n color: var(--color-negative);\n font-size: 0.875rem;\n font-weight: 600;\n}\n\n.rk-errsum-list {\n margin: 0.5rem 0 0;\n padding-inline-start: 1.125rem;\n color: var(--color-negative);\n font-size: 0.8125rem;\n}\n\n.rk-errsum-list li + li {\n margin-block-start: 0.25rem;\n}\n\n.rk-errsum-link {\n color: inherit;\n text-decoration: underline;\n}\n\n.rk-errsum-link:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, useTemplateRef, watch } from 'vue'\n\nimport { focusTarget } from '../utils/focus-target'\n\n/**\n * What a rejected form says at the top of itself.\n *\n * ## Why a summary and not just the messages beside the fields\n *\n * `FormField` already puts the reason beside the field it belongs to, and\n * that is where it has to stay — it is where the reader's eye is and where\n * it stays until the field is fixed. What that does not do is tell anyone\n * the submission failed at all. On a long form the first rejected field\n * can be a screenful above or below, focus is still on the submit button,\n * and to a screen reader nothing happened when it was pressed.\n *\n * So this is not a second copy of the messages. It is the answer to \"did\n * that work?\", and a way to get from there to each field in one press.\n *\n * ## It is focused, not announced\n *\n * The obvious build gives this `role=\"alert\"`, and then a reader hears the\n * whole list read at it while focus stays on the button it cannot use. The\n * standard answer is better: move focus *into* the summary. Its heading\n * and list are read because the reader is now there, the links are one Tab\n * away rather than a search, and Escape is not needed because nothing was\n * taken over.\n *\n * Focus moves on its own the first time errors appear. It does not move\n * again on its own, because a form that re-validates as you type would\n * otherwise drag focus out of the field being corrected on every\n * keystroke. Call `focus()` from the submit handler for the second and\n * third attempts — the exposed method exists for exactly that.\n *\n * ## The order is the form's, not the object's\n *\n * Errors are read in the order the keys arrive, which is the order the\n * schema lists them, which is usually the order the fields are in. When it\n * is not, `fields` names the order explicitly — a list that reads bottom to\n * top sends the reader up and down the form instead of through it.\n */\nconst {\n errors,\n title,\n labelFor,\n fieldId = (field: string) => field,\n fields = undefined,\n} = defineProps<{\n /** Field name to message, as `fieldErrors` returns it. */\n errors: Readonly<Record<string, string>>\n /** Heads the summary, e.g. \"Düzeltilmesi gereken 2 alan var\". Already translated. */\n title: string\n /** A field's name as the reader knows it. The kit has no words of its own. */\n labelFor: (field: string) => string\n /**\n * A field's `id`, to link to. Pass the same one to that `FormField`'s\n * `fieldId`, or the link points at nothing and the reader is left at the\n * top of a form they cannot navigate.\n */\n fieldId?: ((field: string) => string) | undefined\n /** The order to read them in, when the object's own order is not the form's. */\n fields?: readonly string[] | undefined\n}>()\n\nconst panel = useTemplateRef<HTMLElement>('panel')\n\nconst listed = computed(() => {\n const names = fields ?? Object.keys(errors)\n\n return names\n .filter((field) => errors[field] !== undefined)\n .map((field) => ({ field, message: errors[field]!, id: fieldId(field) }))\n})\n\nconst hasErrors = computed(() => listed.value.length > 0)\n\n/** Moves focus into the summary. Call it on every failed submit. */\nfunction focus() {\n focusTarget(panel.value)\n}\n\n/* The fragment is left on the link so it still works without JavaScript,\n but a fragment alone scrolls without moving focus — the reader arrives\n at the field visually and is still up here for everything else. */\nfunction goToField(event: MouseEvent, id: string) {\n if (focusTarget(id)) event.preventDefault()\n}\n\n/*\n * Once, on the way from valid to not.\n *\n * The watched value is *whether* there are errors, not which — so a form\n * that re-validates while the reader types cannot fire this, and focus\n * stays in the field being corrected. Watching the messages instead would\n * pull focus out of it on every keystroke, which is worse than never\n * focusing at all.\n */\nwatch(hasErrors, async (now) => {\n if (!now) return\n\n // The panel does not exist until this change has rendered.\n await nextTick()\n focus()\n})\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <div v-if=\"hasErrors\" ref=\"panel\" class=\"rk-errsum\" tabindex=\"-1\">\n <p class=\"rk-errsum-title\">{{ title }}</p>\n\n <ul class=\"rk-errsum-list\">\n <li v-for=\"item in listed\" :key=\"item.field\">\n <a :href=\"`#${item.id}`\" class=\"rk-errsum-link\" @click=\"goToField($event, item.id)\">\n {{ labelFor(item.field) }}: {{ item.message }}\n </a>\n </li>\n </ul>\n </div>\n</template>\n\n<style scoped>\n.rk-errsum {\n border: 2px solid var(--color-negative);\n border-radius: var(--radius-card);\n padding: 0.875rem 1rem;\n}\n\n.rk-errsum:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-errsum-title {\n margin: 0;\n color: var(--color-negative);\n font-size: 0.875rem;\n font-weight: 600;\n}\n\n.rk-errsum-list {\n margin: 0.5rem 0 0;\n padding-inline-start: 1.125rem;\n color: var(--color-negative);\n font-size: 0.8125rem;\n}\n\n.rk-errsum-list li + li {\n margin-block-start: 0.25rem;\n}\n\n.rk-errsum-link {\n color: inherit;\n text-decoration: underline;\n}\n\n.rk-errsum-link:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport BaseAvatar from './BaseAvatar.vue'\n\n/**\n * The people on a thing, overlapped: who is in a conversation, who shares a\n * list.\n *\n * Past `max` it stops drawing faces and says how many are left, because ten\n * overlapping circles are neither ten faces nor a number. The whole stack is\n * one thing to a screen reader — `label` names it, usually with the count in\n * it, which is what somebody listening actually needs.\n */\nconst {\n people,\n label,\n max = 4,\n size = 'md',\n} = defineProps<{\n /** Each person's name, and a picture where there is one. */\n people: readonly { name: string; src?: string | undefined }[]\n /** The stack's accessible name: \"Shared with 6 people\". Already translated. */\n label: string\n /** How many faces before the rest become a number. */\n max?: number | undefined\n size?: 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst shown = computed(() => people.slice(0, max))\nconst rest = computed(() => Math.max(0, people.length - shown.value.length))\n</script>\n\n<template>\n <div class=\"rk-stack\" :class=\"`is-${size}`\" role=\"img\" :aria-label=\"label\">\n <span v-for=\"person in shown\" :key=\"person.name\" class=\"rk-stack-item\" aria-hidden=\"true\">\n <BaseAvatar :name=\"person.name\" :src=\"person.src\" :size=\"size\" fallback=\"initials\" />\n </span>\n <span v-if=\"rest\" class=\"rk-stack-item rk-stack-rest\" aria-hidden=\"true\">+{{ rest }}</span>\n </div>\n</template>\n\n<style scoped>\n.rk-stack {\n display: inline-flex;\n align-items: center;\n}\n\n/* Overlapped by a third, with a ring in the page's own colour so each face\n keeps an edge against the one under it — on any material. */\n.rk-stack-item + .rk-stack-item {\n margin-inline-start: -0.5rem;\n}\n\n.rk-stack.is-sm .rk-stack-item + .rk-stack-item {\n margin-inline-start: -0.5rem;\n}\n\n.rk-stack.is-lg .rk-stack-item + .rk-stack-item {\n margin-inline-start: -0.875rem;\n}\n\n.rk-stack-item {\n display: inline-flex;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px var(--color-surface);\n}\n\n.rk-stack-rest {\n display: inline-grid;\n width: 2.25rem;\n height: 2.25rem;\n place-items: center;\n background: var(--color-muted);\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--color-ink-soft);\n font-variant-numeric: tabular-nums;\n}\n\n.rk-stack.is-sm .rk-stack-rest {\n width: 1.75rem;\n height: 1.75rem;\n font-size: 0.6875rem;\n}\n\n.rk-stack.is-lg .rk-stack-rest {\n width: 3rem;\n height: 3rem;\n font-size: 0.8125rem;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport BaseAvatar from './BaseAvatar.vue'\n\n/**\n * The people on a thing, overlapped: who is in a conversation, who shares a\n * list.\n *\n * Past `max` it stops drawing faces and says how many are left, because ten\n * overlapping circles are neither ten faces nor a number. The whole stack is\n * one thing to a screen reader — `label` names it, usually with the count in\n * it, which is what somebody listening actually needs.\n */\nconst {\n people,\n label,\n max = 4,\n size = 'md',\n} = defineProps<{\n /** Each person's name, and a picture where there is one. */\n people: readonly { name: string; src?: string | undefined }[]\n /** The stack's accessible name: \"Shared with 6 people\". Already translated. */\n label: string\n /** How many faces before the rest become a number. */\n max?: number | undefined\n size?: 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst shown = computed(() => people.slice(0, max))\nconst rest = computed(() => Math.max(0, people.length - shown.value.length))\n</script>\n\n<template>\n <div class=\"rk-stack\" :class=\"`is-${size}`\" role=\"img\" :aria-label=\"label\">\n <span v-for=\"person in shown\" :key=\"person.name\" class=\"rk-stack-item\" aria-hidden=\"true\">\n <BaseAvatar :name=\"person.name\" :src=\"person.src\" :size=\"size\" fallback=\"initials\" />\n </span>\n <span v-if=\"rest\" class=\"rk-stack-item rk-stack-rest\" aria-hidden=\"true\">+{{ rest }}</span>\n </div>\n</template>\n\n<style scoped>\n.rk-stack {\n display: inline-flex;\n align-items: center;\n}\n\n/* Overlapped by a third, with a ring in the page's own colour so each face\n keeps an edge against the one under it — on any material. */\n.rk-stack-item + .rk-stack-item {\n margin-inline-start: -0.5rem;\n}\n\n.rk-stack.is-sm .rk-stack-item + .rk-stack-item {\n margin-inline-start: -0.5rem;\n}\n\n.rk-stack.is-lg .rk-stack-item + .rk-stack-item {\n margin-inline-start: -0.875rem;\n}\n\n.rk-stack-item {\n display: inline-flex;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px var(--color-surface);\n}\n\n.rk-stack-rest {\n display: inline-grid;\n width: 2.25rem;\n height: 2.25rem;\n place-items: center;\n background: var(--color-muted);\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--color-ink-soft);\n font-variant-numeric: tabular-nums;\n}\n\n.rk-stack.is-sm .rk-stack-rest {\n width: 1.75rem;\n height: 1.75rem;\n font-size: 0.6875rem;\n}\n\n.rk-stack.is-lg .rk-stack-rest {\n width: 3rem;\n height: 3rem;\n font-size: 0.8125rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"M extends 'single' | 'range' = 'single'\">\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\n\nimport { addDays, fromDateKey, toDateKey, todayKey } from '../utils/date'\nimport type { WeekStart } from '../utils/date'\nimport { horizontalStep } from '../utils/direction'\nimport { formatDate } from '../utils/format'\n\nexport interface DateRange {\n /** `YYYY-MM-DD`, always local. */\n start: string\n end: string\n}\n\n/**\n * A month of days, for choosing one or a stretch of them.\n *\n * Dates are the kit's date keys — `YYYY-MM-DD`, always local — and never\n * `Date` objects across the boundary. `toISOString()` on a late evening in\n * Istanbul is tomorrow, which is the bug `toDateKey` exists to prevent, and\n * a component that handed back `Date`s would hand that bug to every app.\n *\n * The keyboard is the date-grid pattern: the arrows move a day and a week,\n * Home and End go to the ends of the week, Page Up and Down change the\n * month, and with Shift, the year. Only one day is in the Tab order at a\n * time, so a calendar is one stop rather than thirty-one.\n *\n * Every name a screen reader reads — the month, the weekdays, each day —\n * comes from `Intl` in the app's own locale. The two arrows are the only\n * words the app has to pass, because \"previous\" has no date to build it\n * from.\n */\nconst {\n mode = 'single' as M,\n min = undefined,\n max = undefined,\n isDisabled = undefined,\n weekStartsOn = 1,\n previousLabel,\n nextLabel,\n today = todayKey(),\n} = defineProps<{\n /** One day, or a stretch from one day to another. */\n mode?: M | undefined\n /** The earliest day that can be chosen, as `YYYY-MM-DD`. */\n min?: string | undefined\n max?: string | undefined\n /** Days to rule out inside the range — weekends, days already booked. */\n isDisabled?: ((key: string) => boolean) | undefined\n /** `1` Monday, `0` Sunday. */\n weekStartsOn?: WeekStart | undefined\n /** Accessible name of the back arrow, e.g. \"Previous month\". */\n previousLabel: string\n /** Accessible name of the forward arrow. */\n nextLabel: string\n /** Which day is marked as today. Given, so a test or a demo can fix it. */\n today?: string | undefined\n}>()\n\n/* `| undefined` outside the condition, not inside each branch: TypeScript\n can then see that `Value | undefined` is `Value`, which it cannot while\n `M` is still open. */\ntype Value = (M extends 'range' ? DateRange : string) | undefined\n\n/** The chosen day, or the chosen range, with `v-model`. */\nconst model = defineModel<Value>()\n\nconst single = computed(() => (mode === 'single' ? (model.value as string | undefined) : undefined))\nconst range = computed(() =>\n mode === 'range' ? (model.value as DateRange | undefined) : undefined,\n)\n\n/* Which month is on screen, and which day the keyboard is on. They move\n together: stepping off the edge of a month turns the page. */\nconst focused = ref(single.value ?? range.value?.start ?? today)\nconst view = ref<'days' | 'months' | 'years'>('days')\nconst grid = useTemplateRef<HTMLElement>('grid')\n\n/** Set while a range is half chosen, to paint what hovering would take. */\nconst pendingStart = ref<string | null>(null)\nconst hovered = ref<string | null>(null)\n\nconst focusedDate = computed(() => fromDateKey(focused.value))\nconst year = computed(() => focusedDate.value.getFullYear())\nconst month = computed(() => focusedDate.value.getMonth())\n\nconst monthTitle = computed(() => formatDate(focusedDate.value, { month: 'long', year: 'numeric' }))\n\n/** The weekday headings, in the app's locale, starting on the chosen day. */\nconst weekdays = computed(() => {\n // 2024-01-07 was a Sunday, so this walks a real week in the right order.\n const sunday = new Date(2024, 0, 7)\n return Array.from({ length: 7 }, (_, i) => {\n const date = new Date(sunday)\n date.setDate(sunday.getDate() + ((i + weekStartsOn) % 7))\n return {\n short: formatDate(date, { weekday: 'short' }),\n long: formatDate(date, { weekday: 'long' }),\n }\n })\n})\n\n/** Six weeks, always: a calendar that changes height as you page it jumps. */\nconst weeks = computed(() => {\n const first = new Date(year.value, month.value, 1)\n const offset = (first.getDay() - weekStartsOn + 7) % 7\n let cursor = addDays(toDateKey(first), -offset)\n\n return Array.from({ length: 6 }, () =>\n Array.from({ length: 7 }, () => {\n const key = cursor\n cursor = addDays(cursor, 1)\n return key\n }),\n )\n})\n\nconst months = computed(() =>\n Array.from({ length: 12 }, (_, i) => ({\n index: i,\n label: formatDate(new Date(year.value, i, 1), { month: 'short' }),\n long: formatDate(new Date(year.value, i, 1), { month: 'long' }),\n })),\n)\n\n/** A block of twelve years, the one the focused year falls in. */\nconst years = computed(() => {\n const start = Math.floor(year.value / 12) * 12\n return Array.from({ length: 12 }, (_, i) => start + i)\n})\n\nconst outside = (key: string) => fromDateKey(key).getMonth() !== month.value\n\nfunction disabled(key: string) {\n if (min !== undefined && key < min) return true\n if (max !== undefined && key > max) return true\n return isDisabled?.(key) ?? false\n}\n\n/* What a day looks like: chosen, an end of the range, or inside it —\n including the stretch the pointer is hovering over while a range is half\n made, which is what makes the second click land where it looks like it\n will. */\nconst edges = computed(() => {\n if (mode !== 'range') return null\n if (pendingStart.value) {\n const other = hovered.value ?? pendingStart.value\n return pendingStart.value <= other\n ? { start: pendingStart.value, end: other }\n : { start: other, end: pendingStart.value }\n }\n return range.value ?? null\n})\n\nfunction stateOf(key: string) {\n if (mode === 'single') return single.value === key ? 'selected' : ''\n const span = edges.value\n if (!span) return ''\n if (key === span.start || key === span.end) return 'selected'\n return key > span.start && key < span.end ? 'inside' : ''\n}\n\nfunction choose(key: string) {\n if (disabled(key)) return\n focused.value = key\n\n if (mode === 'single') {\n model.value = key as Value\n return\n }\n\n if (!pendingStart.value) {\n pendingStart.value = key\n return\n }\n\n const start = pendingStart.value <= key ? pendingStart.value : key\n const end = pendingStart.value <= key ? key : pendingStart.value\n pendingStart.value = null\n hovered.value = null\n model.value = { start, end } as Value\n}\n\nasync function moveTo(key: string) {\n focused.value = key\n await nextTick()\n grid.value?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus()\n}\n\nfunction shiftMonths(count: number) {\n const date = new Date(year.value, month.value + count, 1)\n // The same day of the month where it exists: the 31st of a 30-day month\n // lands on the 30th rather than spilling into the next one.\n const last = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()\n date.setDate(Math.min(focusedDate.value.getDate(), last))\n return toDateKey(date)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n const key = event.key\n /* A week runs the way the language does, so in Arabic the day to the left\n of today is tomorrow. Up and down cross whole weeks and are the same\n either way. */\n const along = horizontalStep(key, event.currentTarget as Element)\n const jumps: Record<string, () => string> = {\n ArrowLeft: () => addDays(focused.value, along),\n ArrowRight: () => addDays(focused.value, along),\n ArrowUp: () => addDays(focused.value, -7),\n ArrowDown: () => addDays(focused.value, 7),\n Home: () =>\n addDays(focused.value, -((fromDateKey(focused.value).getDay() - weekStartsOn + 7) % 7)),\n End: () =>\n addDays(focused.value, 6 - ((fromDateKey(focused.value).getDay() - weekStartsOn + 7) % 7)),\n PageUp: () => shiftMonths(event.shiftKey ? -12 : -1),\n PageDown: () => shiftMonths(event.shiftKey ? 12 : 1),\n }\n\n const next = jumps[key]\n if (!next) return\n\n event.preventDefault()\n void moveTo(next())\n}\n\n/** The arrows move a month, a year, or twelve years — whatever is on screen. */\nfunction step(direction: 1 | -1) {\n if (view.value === 'days') return moveTo(shiftMonths(direction))\n const years = view.value === 'months' ? 1 : 12\n return moveTo(toDateKey(new Date(year.value + direction * years, month.value, 1)))\n}\n\n/** Down one view: years pick a year, months pick a month and land on days. */\nfunction chooseYear(value: number) {\n void moveTo(toDateKey(new Date(value, month.value, 1)))\n view.value = 'months'\n}\n\nfunction chooseMonth(index: number) {\n void moveTo(toDateKey(new Date(year.value, index, 1)))\n view.value = 'days'\n}\n\nfunction cycleView() {\n view.value = view.value === 'days' ? 'months' : view.value === 'months' ? 'years' : 'days'\n}\n\n/* Following the value: a date chosen elsewhere — a preset, a text field —\n turns the page to it. */\nwatch(\n () => [single.value, range.value?.start] as const,\n ([day, start]) => {\n const next = day ?? start\n if (next) focused.value = next\n },\n)\n</script>\n\n<template>\n <div class=\"rk-cal\">\n <div class=\"rk-cal-head\">\n <button\n type=\"button\"\n class=\"rk-cal-arrow focus-ring\"\n :aria-label=\"previousLabel\"\n @click=\"step(-1)\"\n >\n <ChevronLeft class=\"size-4\" aria-hidden=\"true\" />\n </button>\n\n <button\n type=\"button\"\n class=\"rk-cal-title focus-ring\"\n :aria-expanded=\"view !== 'days'\"\n @click=\"cycleView\"\n >\n {{ view === 'years' ? `${years[0]} – ${years[11]}` : monthTitle }}\n </button>\n\n <button\n type=\"button\"\n class=\"rk-cal-arrow focus-ring\"\n :aria-label=\"nextLabel\"\n @click=\"step(1)\"\n >\n <ChevronRight class=\"size-4\" aria-hidden=\"true\" />\n </button>\n </div>\n\n <!-- Days -->\n <div v-if=\"view === 'days'\" class=\"rk-cal-weekdays\" aria-hidden=\"true\">\n <span v-for=\"day in weekdays\" :key=\"day.long\">{{ day.short }}</span>\n </div>\n\n <div\n v-if=\"view === 'days'\"\n ref=\"grid\"\n class=\"rk-cal-grid\"\n role=\"grid\"\n :aria-label=\"monthTitle\"\n @keydown=\"onKeydown\"\n @pointerleave=\"hovered = null\"\n >\n <div v-for=\"(week, index) in weeks\" :key=\"index\" class=\"rk-cal-week\" role=\"row\">\n <!-- Selection belongs to the cell, not to the button inside it:\n `role=\"button\"` does not support `aria-selected`, so a reader\n was told nothing at all about which day is chosen. -->\n <div\n v-for=\"key in week\"\n :key=\"key\"\n role=\"gridcell\"\n class=\"rk-cal-cell\"\n :aria-selected=\"stateOf(key) === 'selected'\"\n >\n <button\n type=\"button\"\n class=\"rk-cal-day\"\n :class=\"[stateOf(key) && `is-${stateOf(key)}`, { 'is-outside': outside(key) }]\"\n :tabindex=\"key === focused ? 0 : -1\"\n :disabled=\"disabled(key)\"\n :aria-label=\"formatDate(fromDateKey(key), { dateStyle: 'full' })\"\n :aria-current=\"key === today ? 'date' : undefined\"\n @click=\"choose(key)\"\n @pointerenter=\"hovered = key\"\n >\n {{ fromDateKey(key).getDate() }}\n </button>\n </div>\n </div>\n </div>\n\n <!-- Months and years: the way to a date two years out without paging. -->\n <div v-else-if=\"view === 'months'\" class=\"rk-cal-blocks\">\n <button\n v-for=\"entry in months\"\n :key=\"entry.index\"\n type=\"button\"\n class=\"rk-cal-block focus-ring\"\n :aria-label=\"entry.long\"\n @click=\"chooseMonth(entry.index)\"\n >\n {{ entry.label }}\n </button>\n </div>\n\n <div v-else class=\"rk-cal-blocks\">\n <button\n v-for=\"value in years\"\n :key=\"value\"\n type=\"button\"\n class=\"rk-cal-block focus-ring\"\n @click=\"chooseYear(value)\"\n >\n {{ value }}\n </button>\n </div>\n </div>\n</template>\n\n<style scoped>\n.rk-cal {\n display: flex;\n width: 100%;\n max-width: 19rem;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-cal-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.25rem;\n}\n\n.rk-cal-arrow {\n display: grid;\n width: 2rem;\n height: 2rem;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-cal-arrow:hover {\n background: var(--color-muted);\n}\n\n.rk-cal-title {\n border-radius: var(--radius-cell);\n padding: 0.25rem 0.625rem;\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-ink);\n}\n\n.rk-cal-title:hover {\n background: var(--color-muted);\n}\n\n.rk-cal-weekdays,\n.rk-cal-week {\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n\n.rk-cal-weekdays {\n gap: 2px;\n font-size: 0.6875rem;\n font-weight: 600;\n text-align: center;\n color: var(--color-ink-soft);\n}\n\n.rk-cal-grid {\n display: grid;\n gap: 2px;\n}\n\n.rk-cal-cell {\n display: grid;\n place-items: center;\n}\n\n.rk-cal-day {\n display: grid;\n width: 100%;\n height: 2.25rem;\n place-items: center;\n border-radius: var(--radius-cell);\n font-size: 0.8125rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n transition:\n background-color var(--duration-fast) var(--ease-standard),\n color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-cal-day:hover:not(:disabled) {\n background: var(--color-muted);\n}\n\n.rk-cal-day:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n/* A day from the month either side: still reachable, visibly not this month. */\n/* `ink-soft` and nothing else. It used to carry `opacity: 0.55` on top,\n which took a colour that clears AA down to 2.2:1 — and these are real\n buttons with real labels, reachable by script and read out by name, not\n decoration. The softer ink is already the difference between this month\n and the next. */\n.rk-cal-day.is-outside {\n color: var(--color-ink-soft);\n}\n\n.rk-cal-day.is-inside {\n background: color-mix(in oklab, var(--color-primary) 14%, transparent);\n border-radius: 0;\n}\n\n.rk-cal-day.is-selected {\n background: var(--color-primary);\n color: var(--color-on-primary);\n font-weight: 600;\n opacity: 1;\n}\n\n.rk-cal-day[aria-current='date']:not(.is-selected) {\n box-shadow: inset 0 0 0 1px var(--color-primary);\n}\n\n.rk-cal-day:disabled {\n cursor: not-allowed;\n opacity: 0.3;\n}\n\n.rk-cal-blocks {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0.375rem;\n}\n\n.rk-cal-block {\n height: 2.5rem;\n border-radius: var(--radius-cell);\n font-size: 0.8125rem;\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-cal-block:hover {\n background: var(--color-muted);\n}\n</style>\n","<script setup lang=\"ts\" generic=\"M extends 'single' | 'range' = 'single'\">\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\n\nimport { addDays, fromDateKey, toDateKey, todayKey } from '../utils/date'\nimport type { WeekStart } from '../utils/date'\nimport { horizontalStep } from '../utils/direction'\nimport { formatDate } from '../utils/format'\n\nexport interface DateRange {\n /** `YYYY-MM-DD`, always local. */\n start: string\n end: string\n}\n\n/**\n * A month of days, for choosing one or a stretch of them.\n *\n * Dates are the kit's date keys — `YYYY-MM-DD`, always local — and never\n * `Date` objects across the boundary. `toISOString()` on a late evening in\n * Istanbul is tomorrow, which is the bug `toDateKey` exists to prevent, and\n * a component that handed back `Date`s would hand that bug to every app.\n *\n * The keyboard is the date-grid pattern: the arrows move a day and a week,\n * Home and End go to the ends of the week, Page Up and Down change the\n * month, and with Shift, the year. Only one day is in the Tab order at a\n * time, so a calendar is one stop rather than thirty-one.\n *\n * Every name a screen reader reads — the month, the weekdays, each day —\n * comes from `Intl` in the app's own locale. The two arrows are the only\n * words the app has to pass, because \"previous\" has no date to build it\n * from.\n */\nconst {\n mode = 'single' as M,\n min = undefined,\n max = undefined,\n isDisabled = undefined,\n weekStartsOn = 1,\n previousLabel,\n nextLabel,\n today = todayKey(),\n} = defineProps<{\n /** One day, or a stretch from one day to another. */\n mode?: M | undefined\n /** The earliest day that can be chosen, as `YYYY-MM-DD`. */\n min?: string | undefined\n max?: string | undefined\n /** Days to rule out inside the range — weekends, days already booked. */\n isDisabled?: ((key: string) => boolean) | undefined\n /** `1` Monday, `0` Sunday. */\n weekStartsOn?: WeekStart | undefined\n /** Accessible name of the back arrow, e.g. \"Previous month\". */\n previousLabel: string\n /** Accessible name of the forward arrow. */\n nextLabel: string\n /** Which day is marked as today. Given, so a test or a demo can fix it. */\n today?: string | undefined\n}>()\n\n/* `| undefined` outside the condition, not inside each branch: TypeScript\n can then see that `Value | undefined` is `Value`, which it cannot while\n `M` is still open. */\ntype Value = (M extends 'range' ? DateRange : string) | undefined\n\n/** The chosen day, or the chosen range, with `v-model`. */\nconst model = defineModel<Value>()\n\nconst single = computed(() => (mode === 'single' ? (model.value as string | undefined) : undefined))\nconst range = computed(() =>\n mode === 'range' ? (model.value as DateRange | undefined) : undefined,\n)\n\n/* Which month is on screen, and which day the keyboard is on. They move\n together: stepping off the edge of a month turns the page. */\nconst focused = ref(single.value ?? range.value?.start ?? today)\nconst view = ref<'days' | 'months' | 'years'>('days')\nconst grid = useTemplateRef<HTMLElement>('grid')\n\n/** Set while a range is half chosen, to paint what hovering would take. */\nconst pendingStart = ref<string | null>(null)\nconst hovered = ref<string | null>(null)\n\nconst focusedDate = computed(() => fromDateKey(focused.value))\nconst year = computed(() => focusedDate.value.getFullYear())\nconst month = computed(() => focusedDate.value.getMonth())\n\nconst monthTitle = computed(() => formatDate(focusedDate.value, { month: 'long', year: 'numeric' }))\n\n/** The weekday headings, in the app's locale, starting on the chosen day. */\nconst weekdays = computed(() => {\n // 2024-01-07 was a Sunday, so this walks a real week in the right order.\n const sunday = new Date(2024, 0, 7)\n return Array.from({ length: 7 }, (_, i) => {\n const date = new Date(sunday)\n date.setDate(sunday.getDate() + ((i + weekStartsOn) % 7))\n return {\n short: formatDate(date, { weekday: 'short' }),\n long: formatDate(date, { weekday: 'long' }),\n }\n })\n})\n\n/** Six weeks, always: a calendar that changes height as you page it jumps. */\nconst weeks = computed(() => {\n const first = new Date(year.value, month.value, 1)\n const offset = (first.getDay() - weekStartsOn + 7) % 7\n let cursor = addDays(toDateKey(first), -offset)\n\n return Array.from({ length: 6 }, () =>\n Array.from({ length: 7 }, () => {\n const key = cursor\n cursor = addDays(cursor, 1)\n return key\n }),\n )\n})\n\nconst months = computed(() =>\n Array.from({ length: 12 }, (_, i) => ({\n index: i,\n label: formatDate(new Date(year.value, i, 1), { month: 'short' }),\n long: formatDate(new Date(year.value, i, 1), { month: 'long' }),\n })),\n)\n\n/** A block of twelve years, the one the focused year falls in. */\nconst years = computed(() => {\n const start = Math.floor(year.value / 12) * 12\n return Array.from({ length: 12 }, (_, i) => start + i)\n})\n\nconst outside = (key: string) => fromDateKey(key).getMonth() !== month.value\n\nfunction disabled(key: string) {\n if (min !== undefined && key < min) return true\n if (max !== undefined && key > max) return true\n return isDisabled?.(key) ?? false\n}\n\n/* What a day looks like: chosen, an end of the range, or inside it —\n including the stretch the pointer is hovering over while a range is half\n made, which is what makes the second click land where it looks like it\n will. */\nconst edges = computed(() => {\n if (mode !== 'range') return null\n if (pendingStart.value) {\n const other = hovered.value ?? pendingStart.value\n return pendingStart.value <= other\n ? { start: pendingStart.value, end: other }\n : { start: other, end: pendingStart.value }\n }\n return range.value ?? null\n})\n\nfunction stateOf(key: string) {\n if (mode === 'single') return single.value === key ? 'selected' : ''\n const span = edges.value\n if (!span) return ''\n if (key === span.start || key === span.end) return 'selected'\n return key > span.start && key < span.end ? 'inside' : ''\n}\n\nfunction choose(key: string) {\n if (disabled(key)) return\n focused.value = key\n\n if (mode === 'single') {\n model.value = key as Value\n return\n }\n\n if (!pendingStart.value) {\n pendingStart.value = key\n return\n }\n\n const start = pendingStart.value <= key ? pendingStart.value : key\n const end = pendingStart.value <= key ? key : pendingStart.value\n pendingStart.value = null\n hovered.value = null\n model.value = { start, end } as Value\n}\n\nasync function moveTo(key: string) {\n focused.value = key\n await nextTick()\n grid.value?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus()\n}\n\nfunction shiftMonths(count: number) {\n const date = new Date(year.value, month.value + count, 1)\n // The same day of the month where it exists: the 31st of a 30-day month\n // lands on the 30th rather than spilling into the next one.\n const last = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()\n date.setDate(Math.min(focusedDate.value.getDate(), last))\n return toDateKey(date)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n const key = event.key\n /* A week runs the way the language does, so in Arabic the day to the left\n of today is tomorrow. Up and down cross whole weeks and are the same\n either way. */\n const along = horizontalStep(key, event.currentTarget as Element)\n const jumps: Record<string, () => string> = {\n ArrowLeft: () => addDays(focused.value, along),\n ArrowRight: () => addDays(focused.value, along),\n ArrowUp: () => addDays(focused.value, -7),\n ArrowDown: () => addDays(focused.value, 7),\n Home: () =>\n addDays(focused.value, -((fromDateKey(focused.value).getDay() - weekStartsOn + 7) % 7)),\n End: () =>\n addDays(focused.value, 6 - ((fromDateKey(focused.value).getDay() - weekStartsOn + 7) % 7)),\n PageUp: () => shiftMonths(event.shiftKey ? -12 : -1),\n PageDown: () => shiftMonths(event.shiftKey ? 12 : 1),\n }\n\n const next = jumps[key]\n if (!next) return\n\n event.preventDefault()\n void moveTo(next())\n}\n\n/** The arrows move a month, a year, or twelve years — whatever is on screen. */\nfunction step(direction: 1 | -1) {\n if (view.value === 'days') return moveTo(shiftMonths(direction))\n const years = view.value === 'months' ? 1 : 12\n return moveTo(toDateKey(new Date(year.value + direction * years, month.value, 1)))\n}\n\n/** Down one view: years pick a year, months pick a month and land on days. */\nfunction chooseYear(value: number) {\n void moveTo(toDateKey(new Date(value, month.value, 1)))\n view.value = 'months'\n}\n\nfunction chooseMonth(index: number) {\n void moveTo(toDateKey(new Date(year.value, index, 1)))\n view.value = 'days'\n}\n\nfunction cycleView() {\n view.value = view.value === 'days' ? 'months' : view.value === 'months' ? 'years' : 'days'\n}\n\n/* Following the value: a date chosen elsewhere — a preset, a text field —\n turns the page to it. */\nwatch(\n () => [single.value, range.value?.start] as const,\n ([day, start]) => {\n const next = day ?? start\n if (next) focused.value = next\n },\n)\n</script>\n\n<template>\n <div class=\"rk-cal\">\n <div class=\"rk-cal-head\">\n <button\n type=\"button\"\n class=\"rk-cal-arrow focus-ring\"\n :aria-label=\"previousLabel\"\n @click=\"step(-1)\"\n >\n <ChevronLeft class=\"size-4\" aria-hidden=\"true\" />\n </button>\n\n <button\n type=\"button\"\n class=\"rk-cal-title focus-ring\"\n :aria-expanded=\"view !== 'days'\"\n @click=\"cycleView\"\n >\n {{ view === 'years' ? `${years[0]} – ${years[11]}` : monthTitle }}\n </button>\n\n <button\n type=\"button\"\n class=\"rk-cal-arrow focus-ring\"\n :aria-label=\"nextLabel\"\n @click=\"step(1)\"\n >\n <ChevronRight class=\"size-4\" aria-hidden=\"true\" />\n </button>\n </div>\n\n <!-- Days -->\n <div v-if=\"view === 'days'\" class=\"rk-cal-weekdays\" aria-hidden=\"true\">\n <span v-for=\"day in weekdays\" :key=\"day.long\">{{ day.short }}</span>\n </div>\n\n <div\n v-if=\"view === 'days'\"\n ref=\"grid\"\n class=\"rk-cal-grid\"\n role=\"grid\"\n :aria-label=\"monthTitle\"\n @keydown=\"onKeydown\"\n @pointerleave=\"hovered = null\"\n >\n <div v-for=\"(week, index) in weeks\" :key=\"index\" class=\"rk-cal-week\" role=\"row\">\n <!-- Selection belongs to the cell, not to the button inside it:\n `role=\"button\"` does not support `aria-selected`, so a reader\n was told nothing at all about which day is chosen. -->\n <div\n v-for=\"key in week\"\n :key=\"key\"\n role=\"gridcell\"\n class=\"rk-cal-cell\"\n :aria-selected=\"stateOf(key) === 'selected'\"\n >\n <button\n type=\"button\"\n class=\"rk-cal-day\"\n :class=\"[stateOf(key) && `is-${stateOf(key)}`, { 'is-outside': outside(key) }]\"\n :tabindex=\"key === focused ? 0 : -1\"\n :disabled=\"disabled(key)\"\n :aria-label=\"formatDate(fromDateKey(key), { dateStyle: 'full' })\"\n :aria-current=\"key === today ? 'date' : undefined\"\n @click=\"choose(key)\"\n @pointerenter=\"hovered = key\"\n >\n {{ fromDateKey(key).getDate() }}\n </button>\n </div>\n </div>\n </div>\n\n <!-- Months and years: the way to a date two years out without paging. -->\n <div v-else-if=\"view === 'months'\" class=\"rk-cal-blocks\">\n <button\n v-for=\"entry in months\"\n :key=\"entry.index\"\n type=\"button\"\n class=\"rk-cal-block focus-ring\"\n :aria-label=\"entry.long\"\n @click=\"chooseMonth(entry.index)\"\n >\n {{ entry.label }}\n </button>\n </div>\n\n <div v-else class=\"rk-cal-blocks\">\n <button\n v-for=\"value in years\"\n :key=\"value\"\n type=\"button\"\n class=\"rk-cal-block focus-ring\"\n @click=\"chooseYear(value)\"\n >\n {{ value }}\n </button>\n </div>\n </div>\n</template>\n\n<style scoped>\n.rk-cal {\n display: flex;\n width: 100%;\n max-width: 19rem;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.rk-cal-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.25rem;\n}\n\n.rk-cal-arrow {\n display: grid;\n width: 2rem;\n height: 2rem;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-cal-arrow:hover {\n background: var(--color-muted);\n}\n\n.rk-cal-title {\n border-radius: var(--radius-cell);\n padding: 0.25rem 0.625rem;\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-ink);\n}\n\n.rk-cal-title:hover {\n background: var(--color-muted);\n}\n\n.rk-cal-weekdays,\n.rk-cal-week {\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n\n.rk-cal-weekdays {\n gap: 2px;\n font-size: 0.6875rem;\n font-weight: 600;\n text-align: center;\n color: var(--color-ink-soft);\n}\n\n.rk-cal-grid {\n display: grid;\n gap: 2px;\n}\n\n.rk-cal-cell {\n display: grid;\n place-items: center;\n}\n\n.rk-cal-day {\n display: grid;\n width: 100%;\n height: 2.25rem;\n place-items: center;\n border-radius: var(--radius-cell);\n font-size: 0.8125rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n transition:\n background-color var(--duration-fast) var(--ease-standard),\n color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-cal-day:hover:not(:disabled) {\n background: var(--color-muted);\n}\n\n.rk-cal-day:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n/* A day from the month either side: still reachable, visibly not this month. */\n/* `ink-soft` and nothing else. It used to carry `opacity: 0.55` on top,\n which took a colour that clears AA down to 2.2:1 — and these are real\n buttons with real labels, reachable by script and read out by name, not\n decoration. The softer ink is already the difference between this month\n and the next. */\n.rk-cal-day.is-outside {\n color: var(--color-ink-soft);\n}\n\n.rk-cal-day.is-inside {\n background: color-mix(in oklab, var(--color-primary) 14%, transparent);\n border-radius: 0;\n}\n\n.rk-cal-day.is-selected {\n background: var(--color-primary);\n color: var(--color-on-primary);\n font-weight: 600;\n opacity: 1;\n}\n\n.rk-cal-day[aria-current='date']:not(.is-selected) {\n box-shadow: inset 0 0 0 1px var(--color-primary);\n}\n\n.rk-cal-day:disabled {\n cursor: not-allowed;\n opacity: 0.3;\n}\n\n.rk-cal-blocks {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0.375rem;\n}\n\n.rk-cal-block {\n height: 2.5rem;\n border-radius: var(--radius-cell);\n font-size: 0.8125rem;\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-cal-block:hover {\n background: var(--color-muted);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { X } from 'lucide-vue-next'\nimport type { Component } from 'vue'\n\n/**\n * A short label with, when it is one of a set someone assembled, a way to\n * take it off: a filter, a recipient, a tag.\n *\n * Next to `BaseBadge`, which is a standing label and never a control. A chip\n * is removable, or selectable, or both. If it neither removes nor selects,\n * reach for the badge.\n *\n * `removeLabel` is required when it can be removed, because \"×\" alone is a\n * button a screen reader reads as \"times\".\n *\n * A chip that both selects and removes is two buttons side by side, never\n * one inside the other: a button nested in a button is not a control a\n * browser or a screen reader can make sense of.\n */\nconst {\n label,\n icon = undefined,\n tone = 'neutral',\n removeLabel = undefined,\n selected = undefined,\n disabled = false,\n} = defineProps<{\n /** The text. Already translated. */\n label: string\n icon?: Component | undefined\n tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined\n /** Given, the chip grows a remove button. Its accessible name. */\n removeLabel?: string | undefined\n /** Given, the whole chip is a toggle and this is its state. */\n selected?: boolean | undefined\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ remove: []; select: [] }>()\n</script>\n\n<template>\n <span\n class=\"rk-chip\"\n :class=\"[`tone-${tone}`, { 'is-selected': selected, 'is-disabled': disabled }]\"\n >\n <component\n :is=\"selected === undefined ? 'span' : 'button'\"\n :type=\"selected === undefined ? undefined : 'button'\"\n class=\"rk-chip-body\"\n :class=\"{ 'focus-ring is-button': selected !== undefined }\"\n :aria-pressed=\"selected\"\n :disabled=\"selected === undefined ? undefined : disabled\"\n @click=\"selected === undefined ? undefined : emit('select')\"\n >\n <component :is=\"icon\" v-if=\"icon\" class=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ label }}</span>\n </component>\n\n <button\n v-if=\"removeLabel\"\n type=\"button\"\n class=\"rk-chip-remove focus-ring\"\n :aria-label=\"removeLabel\"\n :disabled=\"disabled\"\n @click=\"emit('remove')\"\n >\n <X class=\"size-3\" aria-hidden=\"true\" />\n </button>\n </span>\n</template>\n\n<style scoped>\n.rk-chip {\n display: inline-flex;\n max-width: 100%;\n align-items: center;\n gap: 0.375rem;\n border-radius: 9999px;\n border: 1px solid transparent;\n padding: 0.1875rem 0.5rem 0.1875rem 0.625rem;\n font-size: 0.8125rem;\n font-weight: 500;\n background: var(--color-muted);\n color: var(--color-ink);\n}\n\n.rk-chip-body {\n display: inline-flex;\n min-width: 0;\n align-items: center;\n gap: 0.375rem;\n border-radius: 9999px;\n color: inherit;\n}\n\n.rk-chip-body.is-button {\n cursor: pointer;\n}\n\n.rk-chip.is-selected {\n background: var(--color-primary);\n color: var(--color-on-primary);\n}\n\n.rk-chip.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* The tones tint rather than fill: a row of chips in five solid colours is a\n row where nothing stands out. The selected one fills, and that is the point\n of it.\n \n The ground and the edge carry the role; `ink` carries the words. Two of\n these used to write the role straight onto a tint of itself and the other\n two mixed it most of the way there, which is the same fault by degrees —\n a browser measured the warning chip at 4.13:1. There is one answer to\n this in the kit now, and `BaseBadge`, `BaseAlert` and `BaseListbox` give\n the same one. */\n.rk-chip.tone-primary {\n background: color-mix(in oklab, var(--color-primary) 12%, transparent);\n border-color: color-mix(in oklab, var(--color-primary) 25%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip.tone-success {\n background: color-mix(in oklab, var(--color-positive) 14%, transparent);\n border-color: color-mix(in oklab, var(--color-positive) 28%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip.tone-warning {\n background: color-mix(in oklab, var(--color-warning) 16%, transparent);\n border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip.tone-danger {\n background: color-mix(in oklab, var(--color-negative) 12%, transparent);\n border-color: color-mix(in oklab, var(--color-negative) 26%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip-remove {\n display: grid;\n width: 1.125rem;\n height: 1.125rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n color: currentColor;\n opacity: 0.7;\n transition: opacity var(--duration-fast) var(--ease-standard);\n}\n\n.rk-chip-remove:hover {\n opacity: 1;\n background: color-mix(in oklab, currentColor 15%, transparent);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { X } from 'lucide-vue-next'\nimport type { Component } from 'vue'\n\n/**\n * A short label with, when it is one of a set someone assembled, a way to\n * take it off: a filter, a recipient, a tag.\n *\n * Next to `BaseBadge`, which is a standing label and never a control. A chip\n * is removable, or selectable, or both. If it neither removes nor selects,\n * reach for the badge.\n *\n * `removeLabel` is required when it can be removed, because \"×\" alone is a\n * button a screen reader reads as \"times\".\n *\n * A chip that both selects and removes is two buttons side by side, never\n * one inside the other: a button nested in a button is not a control a\n * browser or a screen reader can make sense of.\n */\nconst {\n label,\n icon = undefined,\n tone = 'neutral',\n removeLabel = undefined,\n selected = undefined,\n disabled = false,\n} = defineProps<{\n /** The text. Already translated. */\n label: string\n icon?: Component | undefined\n tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined\n /** Given, the chip grows a remove button. Its accessible name. */\n removeLabel?: string | undefined\n /** Given, the whole chip is a toggle and this is its state. */\n selected?: boolean | undefined\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ remove: []; select: [] }>()\n</script>\n\n<template>\n <span\n class=\"rk-chip\"\n :class=\"[`tone-${tone}`, { 'is-selected': selected, 'is-disabled': disabled }]\"\n >\n <component\n :is=\"selected === undefined ? 'span' : 'button'\"\n :type=\"selected === undefined ? undefined : 'button'\"\n class=\"rk-chip-body\"\n :class=\"{ 'focus-ring is-button': selected !== undefined }\"\n :aria-pressed=\"selected\"\n :disabled=\"selected === undefined ? undefined : disabled\"\n @click=\"selected === undefined ? undefined : emit('select')\"\n >\n <component :is=\"icon\" v-if=\"icon\" class=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ label }}</span>\n </component>\n\n <button\n v-if=\"removeLabel\"\n type=\"button\"\n class=\"rk-chip-remove focus-ring\"\n :aria-label=\"removeLabel\"\n :disabled=\"disabled\"\n @click=\"emit('remove')\"\n >\n <X class=\"size-3\" aria-hidden=\"true\" />\n </button>\n </span>\n</template>\n\n<style scoped>\n.rk-chip {\n display: inline-flex;\n max-width: 100%;\n align-items: center;\n gap: 0.375rem;\n border-radius: 9999px;\n border: 1px solid transparent;\n padding: 0.1875rem 0.5rem 0.1875rem 0.625rem;\n font-size: 0.8125rem;\n font-weight: 500;\n background: var(--color-muted);\n color: var(--color-ink);\n}\n\n.rk-chip-body {\n display: inline-flex;\n min-width: 0;\n align-items: center;\n gap: 0.375rem;\n border-radius: 9999px;\n color: inherit;\n}\n\n.rk-chip-body.is-button {\n cursor: pointer;\n}\n\n.rk-chip.is-selected {\n background: var(--color-primary);\n color: var(--color-on-primary);\n}\n\n.rk-chip.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* The tones tint rather than fill: a row of chips in five solid colours is a\n row where nothing stands out. The selected one fills, and that is the point\n of it.\n \n The ground and the edge carry the role; `ink` carries the words. Two of\n these used to write the role straight onto a tint of itself and the other\n two mixed it most of the way there, which is the same fault by degrees —\n a browser measured the warning chip at 4.13:1. There is one answer to\n this in the kit now, and `BaseBadge`, `BaseAlert` and `BaseListbox` give\n the same one. */\n.rk-chip.tone-primary {\n background: color-mix(in oklab, var(--color-primary) 12%, transparent);\n border-color: color-mix(in oklab, var(--color-primary) 25%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip.tone-success {\n background: color-mix(in oklab, var(--color-positive) 14%, transparent);\n border-color: color-mix(in oklab, var(--color-positive) 28%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip.tone-warning {\n background: color-mix(in oklab, var(--color-warning) 16%, transparent);\n border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip.tone-danger {\n background: color-mix(in oklab, var(--color-negative) 12%, transparent);\n border-color: color-mix(in oklab, var(--color-negative) 26%, transparent);\n color: var(--color-ink);\n}\n\n.rk-chip-remove {\n display: grid;\n width: 1.125rem;\n height: 1.125rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n color: currentColor;\n opacity: 0.7;\n transition: opacity var(--duration-fast) var(--ease-standard);\n}\n\n.rk-chip-remove:hover {\n opacity: 1;\n background: color-mix(in oklab, currentColor 15%, transparent);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A keyboard key, or a chord of them: `⌘ K`, `Ctrl Shift P`.\n *\n * `<kbd>` is the element the browser and assistive tech already understand,\n * so this is that element with the kit's surface on it. A chord is separate\n * keys with a joiner between them rather than one long key, which is how a\n * screen reader reads it as three things to press.\n *\n * The keys are the app's words — `⌘` on a Mac and `Ctrl` elsewhere is a\n * decision about the reader's machine, not about this component.\n */\nconst {\n keys,\n joiner = '',\n size = 'md',\n} = defineProps<{\n /** One key, or the keys of a chord: `['⌘', 'K']`. */\n keys: string | readonly string[]\n /** Drawn between the keys — \"+\", \"then\". Empty, they simply sit apart. */\n joiner?: string | undefined\n size?: 'sm' | 'md' | undefined\n}>()\n\nconst list = computed(() => (typeof keys === 'string' ? [keys] : keys))\n</script>\n\n<template>\n <span class=\"rk-kbd\" :class=\"`is-${size}`\">\n <template v-for=\"(key, index) in list\" :key=\"key\">\n <span v-if=\"index > 0 && joiner\" class=\"rk-kbd-joiner\" aria-hidden=\"true\">{{ joiner }}</span>\n <kbd class=\"rk-kbd-key control\">{{ key }}</kbd>\n </template>\n </span>\n</template>\n\n<style scoped>\n.rk-kbd {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.rk-kbd-key {\n display: inline-grid;\n min-width: 1.5rem;\n height: 1.5rem;\n place-items: center;\n border-radius: var(--radius-cell);\n padding: 0 0.375rem;\n font-family: inherit;\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1;\n color: var(--color-ink-soft);\n}\n\n.is-sm .rk-kbd-key {\n min-width: 1.25rem;\n height: 1.25rem;\n padding: 0 0.25rem;\n font-size: 0.6875rem;\n}\n\n.rk-kbd-joiner {\n font-size: 0.6875rem;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A keyboard key, or a chord of them: `⌘ K`, `Ctrl Shift P`.\n *\n * `<kbd>` is the element the browser and assistive tech already understand,\n * so this is that element with the kit's surface on it. A chord is separate\n * keys with a joiner between them rather than one long key, which is how a\n * screen reader reads it as three things to press.\n *\n * The keys are the app's words — `⌘` on a Mac and `Ctrl` elsewhere is a\n * decision about the reader's machine, not about this component.\n */\nconst {\n keys,\n joiner = '',\n size = 'md',\n} = defineProps<{\n /** One key, or the keys of a chord: `['⌘', 'K']`. */\n keys: string | readonly string[]\n /** Drawn between the keys — \"+\", \"then\". Empty, they simply sit apart. */\n joiner?: string | undefined\n size?: 'sm' | 'md' | undefined\n}>()\n\nconst list = computed(() => (typeof keys === 'string' ? [keys] : keys))\n</script>\n\n<template>\n <span class=\"rk-kbd\" :class=\"`is-${size}`\">\n <template v-for=\"(key, index) in list\" :key=\"key\">\n <span v-if=\"index > 0 && joiner\" class=\"rk-kbd-joiner\" aria-hidden=\"true\">{{ joiner }}</span>\n <kbd class=\"rk-kbd-key control\">{{ key }}</kbd>\n </template>\n </span>\n</template>\n\n<style scoped>\n.rk-kbd {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.rk-kbd-key {\n display: inline-grid;\n min-width: 1.5rem;\n height: 1.5rem;\n place-items: center;\n border-radius: var(--radius-cell);\n padding: 0 0.375rem;\n font-family: inherit;\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1;\n color: var(--color-ink-soft);\n}\n\n.is-sm .rk-kbd-key {\n min-width: 1.25rem;\n height: 1.25rem;\n padding: 0 0.25rem;\n font-size: 0.6875rem;\n}\n\n.rk-kbd-joiner {\n font-size: 0.6875rem;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ArrowUpRight } from 'lucide-vue-next'\nimport { computed } from 'vue'\nimport { RouterLink } from 'vue-router'\n\n/**\n * A link in a sentence — the one thing a button is not.\n *\n * `BaseButton` has a `link` variant for an action that should read as text;\n * this is the other way round: a real link, to a real place, that navigates.\n * If pressing it does something rather than goes somewhere, it is a button.\n *\n * `to` routes and `href` leaves. A link that leaves in a new tab carries the\n * mark that says so, and `rel=\"noopener\"`, which is not a nicety: without it\n * the page that opens can reach back through `window.opener`.\n */\nconst {\n to = undefined,\n href = undefined,\n external = undefined,\n tone = 'primary',\n underline = 'hover',\n} = defineProps<{\n /** A route. Uses `RouterLink`, so the app needs vue-router. */\n to?: string | Record<string, unknown> | undefined\n /** A URL. Anything not on this site should be `external`. */\n href?: string | undefined\n /** Opens in a new tab, with the mark and the `rel` that belong to that. */\n external?: boolean | undefined\n tone?: 'primary' | 'ink' | undefined\n underline?: 'always' | 'hover' | 'none' | undefined\n}>()\n\ndefineSlots<{ default: () => unknown }>()\n\nconst is = computed(() => (to !== undefined ? RouterLink : 'a'))\n</script>\n\n<template>\n <component\n :is=\"is\"\n class=\"rk-link focus-ring\"\n :class=\"[`tone-${tone}`, `underline-${underline}`]\"\n v-bind=\"\n to !== undefined\n ? { to }\n : {\n href,\n target: external ? '_blank' : undefined,\n rel: external ? 'noopener noreferrer' : undefined,\n }\n \"\n >\n <slot />\n <ArrowUpRight v-if=\"external\" class=\"rk-link-mark\" aria-hidden=\"true\" />\n </component>\n</template>\n\n<style scoped>\n.rk-link {\n display: inline;\n border-radius: var(--radius-cell);\n font-weight: 500;\n text-underline-offset: 0.2em;\n transition: color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-link.tone-primary {\n color: var(--color-primary);\n}\n\n.rk-link.tone-ink {\n color: var(--color-ink);\n}\n\n.rk-link.underline-always {\n text-decoration: underline;\n}\n\n.rk-link.underline-hover:hover,\n.rk-link.underline-none:hover {\n text-decoration: underline;\n}\n\n.rk-link.underline-none:hover {\n text-decoration: none;\n}\n\n.rk-link-mark {\n display: inline-block;\n width: 0.875em;\n height: 0.875em;\n vertical-align: -0.1em;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ArrowUpRight } from 'lucide-vue-next'\nimport { computed } from 'vue'\nimport { RouterLink } from 'vue-router'\n\n/**\n * A link in a sentence — the one thing a button is not.\n *\n * `BaseButton` has a `link` variant for an action that should read as text;\n * this is the other way round: a real link, to a real place, that navigates.\n * If pressing it does something rather than goes somewhere, it is a button.\n *\n * `to` routes and `href` leaves. A link that leaves in a new tab carries the\n * mark that says so, and `rel=\"noopener\"`, which is not a nicety: without it\n * the page that opens can reach back through `window.opener`.\n */\nconst {\n to = undefined,\n href = undefined,\n external = undefined,\n tone = 'primary',\n underline = 'hover',\n} = defineProps<{\n /** A route. Uses `RouterLink`, so the app needs vue-router. */\n to?: string | Record<string, unknown> | undefined\n /** A URL. Anything not on this site should be `external`. */\n href?: string | undefined\n /** Opens in a new tab, with the mark and the `rel` that belong to that. */\n external?: boolean | undefined\n tone?: 'primary' | 'ink' | undefined\n underline?: 'always' | 'hover' | 'none' | undefined\n}>()\n\ndefineSlots<{ default: () => unknown }>()\n\nconst is = computed(() => (to !== undefined ? RouterLink : 'a'))\n</script>\n\n<template>\n <component\n :is=\"is\"\n class=\"rk-link focus-ring\"\n :class=\"[`tone-${tone}`, `underline-${underline}`]\"\n v-bind=\"\n to !== undefined\n ? { to }\n : {\n href,\n target: external ? '_blank' : undefined,\n rel: external ? 'noopener noreferrer' : undefined,\n }\n \"\n >\n <slot />\n <ArrowUpRight v-if=\"external\" class=\"rk-link-mark\" aria-hidden=\"true\" />\n </component>\n</template>\n\n<style scoped>\n.rk-link {\n display: inline;\n border-radius: var(--radius-cell);\n font-weight: 500;\n text-underline-offset: 0.2em;\n transition: color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-link.tone-primary {\n color: var(--color-primary);\n}\n\n.rk-link.tone-ink {\n color: var(--color-ink);\n}\n\n.rk-link.underline-always {\n text-decoration: underline;\n}\n\n.rk-link.underline-hover:hover,\n.rk-link.underline-none:hover {\n text-decoration: underline;\n}\n\n.rk-link.underline-none:hover {\n text-decoration: none;\n}\n\n.rk-link-mark {\n display: inline-block;\n width: 0.875em;\n height: 0.875em;\n vertical-align: -0.1em;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Star } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nimport { horizontalStep } from '../utils/direction'\n\n/**\n * A score out of five, given or shown.\n *\n * Two components in one, and the difference is `readonly`: given, it is a\n * slider you can drag with the arrow keys; read-only, it is an image with\n * the score as its name, and nothing to Tab into. A row of five buttons that\n * do nothing is five stops in the tab order for a number.\n *\n * `valueLabel` builds the spoken name — \"4 out of 5\" — because the words and\n * their order are the app's language, not the kit's.\n */\nconst {\n max = 5,\n label,\n valueLabel,\n readonly = false,\n size = 'md',\n allowClear = true,\n} = defineProps<{\n max?: number | undefined\n /** What is being rated: \"Difficulty\", \"Your rating\". Already translated. */\n label: string\n /** The spoken value: `(value, max) => \\`${value} out of ${max}\\`.` */\n valueLabel: (value: number, max: number) => string\n /** Shows a score rather than asks for one. */\n readonly?: boolean | undefined\n size?: 'sm' | 'md' | 'lg' | undefined\n /** Pressing the current score again clears it. */\n allowClear?: boolean | undefined\n}>()\n\n/** The score, with `v-model`. `0` is none given. */\nconst model = defineModel<number>({ default: 0 })\n\nconst hovered = ref(0)\nconst shown = computed(() => hovered.value || model.value)\nconst stars = computed(() => Array.from({ length: max }, (_, i) => i + 1))\n\nfunction pick(value: number) {\n if (readonly) return\n model.value = allowClear && model.value === value ? 0 : value\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n /* The stars run the way the language does, so the one to the left is the\n higher score in Arabic. Up is always more. */\n const along = horizontalStep(event.key, event.currentTarget as Element)\n const moves: Record<string, number> = {\n ArrowRight: model.value + along,\n ArrowLeft: model.value + along,\n ArrowUp: model.value + 1,\n ArrowDown: model.value - 1,\n Home: 0,\n End: max,\n }\n const next = moves[event.key]\n if (next === undefined) return\n\n event.preventDefault()\n model.value = Math.min(max, Math.max(0, next))\n}\n</script>\n\n<template>\n <div\n class=\"rk-rating\"\n :class=\"[`is-${size}`, { 'is-readonly': readonly }]\"\n :role=\"readonly ? 'img' : 'slider'\"\n :aria-label=\"`${label}: ${valueLabel(model, max)}`\"\n :tabindex=\"readonly ? undefined : 0\"\n :aria-valuenow=\"readonly ? undefined : model\"\n :aria-valuemin=\"readonly ? undefined : 0\"\n :aria-valuemax=\"readonly ? undefined : max\"\n :aria-valuetext=\"readonly ? undefined : valueLabel(model, max)\"\n @keydown=\"readonly ? undefined : onKeydown($event)\"\n @pointerleave=\"hovered = 0\"\n >\n <!--\n Spans, never buttons, even though these are pressable.\n\n The slider above is the control: it is what takes focus, what the\n arrows move, and what a reader is told about. A `<button>` in here\n was a second interactive thing inside it, and `aria-hidden` did not\n undo that — a mouse press still moved focus onto an element hidden\n from the accessibility tree, taking the slider's own focus ring with\n it. A span has no such claim, and the pointer works exactly as before.\n -->\n <span\n v-for=\"star in stars\"\n :key=\"star\"\n class=\"rk-rating-star\"\n :class=\"{ 'is-on': star <= shown }\"\n aria-hidden=\"true\"\n @click=\"readonly ? undefined : pick(star)\"\n @pointerenter=\"readonly ? undefined : (hovered = star)\"\n >\n <Star class=\"rk-rating-icon\" />\n </span>\n </div>\n</template>\n\n<style scoped>\n.rk-rating {\n display: inline-flex;\n align-items: center;\n gap: 0.125rem;\n border-radius: var(--radius-cell);\n}\n\n.rk-rating:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-rating-star {\n display: grid;\n place-items: center;\n padding: 0.125rem;\n color: var(--color-hair);\n transition:\n color var(--duration-fast) var(--ease-standard),\n transform var(--duration-fast) var(--ease-standard);\n}\n\n.rk-rating:not(.is-readonly) .rk-rating-star {\n cursor: pointer;\n}\n\n.rk-rating-star.is-on {\n color: var(--color-warning);\n}\n\n.rk-rating:not(.is-readonly) .rk-rating-star:hover {\n transform: scale(1.12);\n}\n\n.rk-rating-icon {\n width: 1.25rem;\n height: 1.25rem;\n fill: currentColor;\n stroke-width: 1.25;\n}\n\n.is-sm .rk-rating-icon {\n width: 1rem;\n height: 1rem;\n}\n\n.is-lg .rk-rating-icon {\n width: 1.75rem;\n height: 1.75rem;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-rating-star {\n transition: none;\n }\n\n .rk-rating:not(.is-readonly) .rk-rating-star:hover {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Star } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nimport { horizontalStep } from '../utils/direction'\n\n/**\n * A score out of five, given or shown.\n *\n * Two components in one, and the difference is `readonly`: given, it is a\n * slider you can drag with the arrow keys; read-only, it is an image with\n * the score as its name, and nothing to Tab into. A row of five buttons that\n * do nothing is five stops in the tab order for a number.\n *\n * `valueLabel` builds the spoken name — \"4 out of 5\" — because the words and\n * their order are the app's language, not the kit's.\n */\nconst {\n max = 5,\n label,\n valueLabel,\n readonly = false,\n size = 'md',\n allowClear = true,\n} = defineProps<{\n max?: number | undefined\n /** What is being rated: \"Difficulty\", \"Your rating\". Already translated. */\n label: string\n /** The spoken value: `(value, max) => \\`${value} out of ${max}\\`.` */\n valueLabel: (value: number, max: number) => string\n /** Shows a score rather than asks for one. */\n readonly?: boolean | undefined\n size?: 'sm' | 'md' | 'lg' | undefined\n /** Pressing the current score again clears it. */\n allowClear?: boolean | undefined\n}>()\n\n/** The score, with `v-model`. `0` is none given. */\nconst model = defineModel<number>({ default: 0 })\n\nconst hovered = ref(0)\nconst shown = computed(() => hovered.value || model.value)\nconst stars = computed(() => Array.from({ length: max }, (_, i) => i + 1))\n\nfunction pick(value: number) {\n if (readonly) return\n model.value = allowClear && model.value === value ? 0 : value\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n /* The stars run the way the language does, so the one to the left is the\n higher score in Arabic. Up is always more. */\n const along = horizontalStep(event.key, event.currentTarget as Element)\n const moves: Record<string, number> = {\n ArrowRight: model.value + along,\n ArrowLeft: model.value + along,\n ArrowUp: model.value + 1,\n ArrowDown: model.value - 1,\n Home: 0,\n End: max,\n }\n const next = moves[event.key]\n if (next === undefined) return\n\n event.preventDefault()\n model.value = Math.min(max, Math.max(0, next))\n}\n</script>\n\n<template>\n <div\n class=\"rk-rating\"\n :class=\"[`is-${size}`, { 'is-readonly': readonly }]\"\n :role=\"readonly ? 'img' : 'slider'\"\n :aria-label=\"`${label}: ${valueLabel(model, max)}`\"\n :tabindex=\"readonly ? undefined : 0\"\n :aria-valuenow=\"readonly ? undefined : model\"\n :aria-valuemin=\"readonly ? undefined : 0\"\n :aria-valuemax=\"readonly ? undefined : max\"\n :aria-valuetext=\"readonly ? undefined : valueLabel(model, max)\"\n @keydown=\"readonly ? undefined : onKeydown($event)\"\n @pointerleave=\"hovered = 0\"\n >\n <!--\n Spans, never buttons, even though these are pressable.\n\n The slider above is the control: it is what takes focus, what the\n arrows move, and what a reader is told about. A `<button>` in here\n was a second interactive thing inside it, and `aria-hidden` did not\n undo that — a mouse press still moved focus onto an element hidden\n from the accessibility tree, taking the slider's own focus ring with\n it. A span has no such claim, and the pointer works exactly as before.\n -->\n <span\n v-for=\"star in stars\"\n :key=\"star\"\n class=\"rk-rating-star\"\n :class=\"{ 'is-on': star <= shown }\"\n aria-hidden=\"true\"\n @click=\"readonly ? undefined : pick(star)\"\n @pointerenter=\"readonly ? undefined : (hovered = star)\"\n >\n <Star class=\"rk-rating-icon\" />\n </span>\n </div>\n</template>\n\n<style scoped>\n.rk-rating {\n display: inline-flex;\n align-items: center;\n gap: 0.125rem;\n border-radius: var(--radius-cell);\n}\n\n.rk-rating:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-rating-star {\n display: grid;\n place-items: center;\n padding: 0.125rem;\n color: var(--color-hair);\n transition:\n color var(--duration-fast) var(--ease-standard),\n transform var(--duration-fast) var(--ease-standard);\n}\n\n.rk-rating:not(.is-readonly) .rk-rating-star {\n cursor: pointer;\n}\n\n.rk-rating-star.is-on {\n color: var(--color-warning);\n}\n\n.rk-rating:not(.is-readonly) .rk-rating-star:hover {\n transform: scale(1.12);\n}\n\n.rk-rating-icon {\n width: 1.25rem;\n height: 1.25rem;\n fill: currentColor;\n stroke-width: 1.25;\n}\n\n.is-sm .rk-rating-icon {\n width: 1rem;\n height: 1rem;\n}\n\n.is-lg .rk-rating-icon {\n width: 1.75rem;\n height: 1.75rem;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-rating-star {\n transition: none;\n }\n\n .rk-rating:not(.is-readonly) .rk-rating-star:hover {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * A line between things — with, when it helps, a word on it.\n *\n * `role=\"separator\"` when it only divides, and nothing at all to assistive\n * tech when it carries a label, because then the text is the point and the\n * line is decoration around it.\n *\n * Vertical needs a height from its parent: inside a flex row, that is\n * `align-items: stretch`, which is the default.\n */\nconst {\n orientation = 'horizontal',\n label = '',\n spacing = 'md',\n} = defineProps<{\n orientation?: 'horizontal' | 'vertical' | undefined\n /** A word in the middle of the line: \"or\", \"Today\". Already translated. */\n label?: string | undefined\n /** Room around it. `none` for a divider inside a list that has its own. */\n spacing?: 'none' | 'sm' | 'md' | undefined\n}>()\n</script>\n\n<template>\n <div\n v-if=\"label\"\n class=\"rk-sep-labelled\"\n :class=\"[`is-${orientation}`, `space-${spacing}`]\"\n aria-hidden=\"true\"\n >\n <span class=\"rk-sep-line\" />\n <span class=\"rk-sep-label\">{{ label }}</span>\n <span class=\"rk-sep-line\" />\n </div>\n\n <div\n v-else\n class=\"rk-sep\"\n :class=\"[`is-${orientation}`, `space-${spacing}`]\"\n role=\"separator\"\n :aria-orientation=\"orientation\"\n />\n</template>\n\n<style scoped>\n.rk-sep,\n.rk-sep-labelled {\n --rk-sep-space: 1rem;\n}\n\n.space-sm {\n --rk-sep-space: 0.5rem;\n}\n\n.space-none {\n --rk-sep-space: 0px;\n}\n\n.rk-sep.is-horizontal {\n height: 1px;\n width: 100%;\n margin-block: var(--rk-sep-space);\n background: var(--color-hair);\n}\n\n.rk-sep.is-vertical {\n width: 1px;\n align-self: stretch;\n min-height: 1rem;\n margin-inline: var(--rk-sep-space);\n background: var(--color-hair);\n}\n\n.rk-sep-labelled {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin-block: var(--rk-sep-space);\n}\n\n.rk-sep-labelled.is-vertical {\n flex-direction: column;\n align-self: stretch;\n margin-block: 0;\n margin-inline: var(--rk-sep-space);\n}\n\n.rk-sep-line {\n flex: 1;\n background: var(--color-hair);\n}\n\n.is-horizontal .rk-sep-line {\n height: 1px;\n}\n\n.is-vertical .rk-sep-line {\n width: 1px;\n}\n\n.rk-sep-label {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * A line between things — with, when it helps, a word on it.\n *\n * `role=\"separator\"` when it only divides, and nothing at all to assistive\n * tech when it carries a label, because then the text is the point and the\n * line is decoration around it.\n *\n * Vertical needs a height from its parent: inside a flex row, that is\n * `align-items: stretch`, which is the default.\n */\nconst {\n orientation = 'horizontal',\n label = '',\n spacing = 'md',\n} = defineProps<{\n orientation?: 'horizontal' | 'vertical' | undefined\n /** A word in the middle of the line: \"or\", \"Today\". Already translated. */\n label?: string | undefined\n /** Room around it. `none` for a divider inside a list that has its own. */\n spacing?: 'none' | 'sm' | 'md' | undefined\n}>()\n</script>\n\n<template>\n <div\n v-if=\"label\"\n class=\"rk-sep-labelled\"\n :class=\"[`is-${orientation}`, `space-${spacing}`]\"\n aria-hidden=\"true\"\n >\n <span class=\"rk-sep-line\" />\n <span class=\"rk-sep-label\">{{ label }}</span>\n <span class=\"rk-sep-line\" />\n </div>\n\n <div\n v-else\n class=\"rk-sep\"\n :class=\"[`is-${orientation}`, `space-${spacing}`]\"\n role=\"separator\"\n :aria-orientation=\"orientation\"\n />\n</template>\n\n<style scoped>\n.rk-sep,\n.rk-sep-labelled {\n --rk-sep-space: 1rem;\n}\n\n.space-sm {\n --rk-sep-space: 0.5rem;\n}\n\n.space-none {\n --rk-sep-space: 0px;\n}\n\n.rk-sep.is-horizontal {\n height: 1px;\n width: 100%;\n margin-block: var(--rk-sep-space);\n background: var(--color-hair);\n}\n\n.rk-sep.is-vertical {\n width: 1px;\n align-self: stretch;\n min-height: 1rem;\n margin-inline: var(--rk-sep-space);\n background: var(--color-hair);\n}\n\n.rk-sep-labelled {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin-block: var(--rk-sep-space);\n}\n\n.rk-sep-labelled.is-vertical {\n flex-direction: column;\n align-self: stretch;\n margin-block: 0;\n margin-inline: var(--rk-sep-space);\n}\n\n.rk-sep-line {\n flex: 1;\n background: var(--color-hair);\n}\n\n.is-horizontal .rk-sep-line {\n height: 1px;\n}\n\n.is-vertical .rk-sep-line {\n width: 1px;\n}\n\n.rk-sep-label {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport FormField from './FormField.vue'\n\nexport interface ColorSwatch {\n /** A hex value, `#rgb` or `#rrggbb`. */\n value: string\n /** What to call it. Already translated. */\n label: string\n}\n\n/**\n * A colour, as a hex value.\n *\n * ## A native `input[type=\"color\"]`, painted\n *\n * The same decision as `BaseSlider`: the platform's own picker is better\n * than anything a page can build. It is the one the reader already knows, it\n * has the eyedropper on the desktops that have one, and on a phone it is a\n * full-screen control no web page matches. What it does not have is a look\n * that matches the rest of the kit, so the look is all that is replaced.\n *\n * ## What the kit supplies and what the app does\n *\n * `swatches` are the app's, values **and** names. A kit that shipped a row\n * of colours would be shipping a product decision, and one that shipped\n * unnamed colours would be shipping a set of buttons a screen reader reads\n * as nothing. `PALETTES` is a ready source for an app that wants the kit's\n * own ten.\n *\n * The hex field appears only when `hexLabel` is given, for the same reason\n * `BaseChip` grows a remove button only when it is told what to call it: a\n * control whose name the kit had to invent speaks a language the app does\n * not.\n *\n * ## The value contract\n *\n * In and out as `#rrggbb`, lowercase — the way dates are `YYYY-MM-DD` and\n * times are `HH:mm`. Short hex (`#abc`) and capitals are accepted from a\n * reader typing and normalised on the way out, so an app never has to\n * compare two spellings of the same colour.\n */\nconst {\n label,\n modelValue,\n swatches = [],\n hexLabel = '',\n hint = '',\n error = '',\n disabled = false,\n labelHidden = false,\n fieldId = undefined,\n} = defineProps<{\n /** Names the control. Already translated. */\n label: string\n /** The colour, as `#rrggbb`. Required: a picker with no colour shows none. */\n modelValue: string\n /** Colours to offer beside the picker. The app's values and names. */\n swatches?: readonly ColorSwatch[] | undefined\n /** Names the hex field. Without it, there is no hex field. */\n hexLabel?: string | undefined\n hint?: string | undefined\n error?: string | undefined\n disabled?: boolean | undefined\n labelHidden?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\n/** `#abc` and `#AABBCC` both mean the same colour; this is the spelling. */\nfunction normalise(value: string): string | undefined {\n const text = value.trim().toLowerCase()\n const short = /^#?([0-9a-f])([0-9a-f])([0-9a-f])$/.exec(text)\n if (short) return `#${short[1]!}${short[1]!}${short[2]!}${short[2]!}${short[3]!}${short[3]!}`\n\n const long = /^#?([0-9a-f]{6})$/.exec(text)\n\n return long ? `#${long[1]!}` : undefined\n}\n\n/**\n * The value, or nothing when it cannot be read.\n *\n * No fallback colour: a hex written here would be a colour the kit chose,\n * and the kit chooses none — a test enforces that, and it is right to.\n * Unreadable input is handed to the native control as an empty value, and\n * whatever it shows then is the platform's decision rather than ours.\n */\nconst current = computed(() => normalise(modelValue))\n\nfunction set(value: string) {\n const next = normalise(value)\n if (next && next !== current.value) emit('update:modelValue', next)\n}\n\n/**\n * What the hex field shows while it is being typed in.\n *\n * Not the value: \"#ab\" is not a colour, and rewriting the field on every\n * keystroke would make it impossible to type the third character. It\n * catches up with the value whenever the value changes from elsewhere — a\n * swatch, the native picker — and commits what it holds on blur and Enter.\n */\nconst draft = ref(current.value ?? '')\nwatch(current, (value) => (draft.value = value ?? ''))\n\nfunction commit() {\n const next = normalise(draft.value)\n if (next) set(next)\n // Nothing recognisable: put back what the value actually is, rather than\n // leaving a field that says one thing while the colour is another.\n else draft.value = current.value ?? ''\n}\n\nconst chosen = (value: string) => normalise(value) === current.value\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :hint=\"hint\"\n :error=\"error\"\n :label-hidden=\"labelHidden\"\n class=\"rk-color\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"rk-color-row\">\n <span class=\"rk-color-well\" :style=\"current ? { '--rk-color': current } : undefined\">\n <input\n :id=\"id\"\n type=\"color\"\n class=\"rk-color-native focus-ring\"\n :value=\"current ?? ''\"\n :disabled=\"disabled\"\n :aria-describedby=\"describedBy\"\n :aria-invalid=\"invalid\"\n @input=\"set(($event.target as HTMLInputElement).value)\"\n />\n </span>\n\n <input\n v-if=\"hexLabel\"\n v-model=\"draft\"\n type=\"text\"\n class=\"rk-color-hex control\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n :aria-label=\"hexLabel\"\n :disabled=\"disabled\"\n @blur=\"commit\"\n @keydown.enter.prevent=\"commit\"\n />\n\n <ul v-if=\"swatches.length > 0\" class=\"rk-color-swatches\">\n <li v-for=\"swatch in swatches\" :key=\"swatch.value\">\n <button\n type=\"button\"\n class=\"rk-color-swatch focus-ring\"\n :class=\"{ 'is-chosen': chosen(swatch.value) }\"\n :style=\"{ '--rk-color': swatch.value }\"\n :aria-label=\"swatch.label\"\n :aria-pressed=\"chosen(swatch.value)\"\n :disabled=\"disabled\"\n @click=\"set(swatch.value)\"\n />\n </li>\n </ul>\n </div>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-color-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem;\n}\n\n/* The well is what is seen; the input inside it is the whole target. A\n native colour input cannot be styled past its swatch in every browser, so\n it is stretched over a box that can be. */\n.rk-color-well {\n position: relative;\n display: block;\n width: 2.75rem;\n height: 2.75rem;\n overflow: hidden;\n border-radius: var(--radius-card);\n border: 1px solid var(--color-hair);\n background: var(--rk-color);\n}\n\n.rk-color-native {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n opacity: 0;\n}\n\n/* The ring goes on the well, since the input it belongs to is invisible. */\n.rk-color-well:has(.rk-color-native:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-color-native:disabled {\n cursor: not-allowed;\n}\n\n.rk-color-hex {\n width: 7.5rem;\n height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0 0.75rem;\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n /* 16px like every other text control here: iOS zooms the viewport when it\n focuses a field under 16px and never zooms back. */\n font-size: 1rem;\n color: var(--color-ink);\n}\n\n.rk-color-hex:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -1px;\n}\n\n.rk-color-hex:disabled {\n opacity: 0.5;\n}\n\n.rk-color-swatches {\n display: flex;\n flex-wrap: wrap;\n gap: 0.375rem;\n}\n\n.rk-color-swatch {\n display: block;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 9999px;\n border: 1px solid var(--color-hair);\n background: var(--rk-color);\n transition: transform var(--duration-fast) var(--ease-standard);\n}\n\n.rk-color-swatch:hover:not(:disabled) {\n transform: scale(1.1);\n}\n\n/* A ring around the chosen one rather than a tick: a tick has to be dark or\n light to be seen, and the swatch beneath it is whatever the app chose. */\n.rk-color-swatch.is-chosen {\n box-shadow:\n 0 0 0 2px var(--color-surface),\n 0 0 0 4px var(--color-primary);\n}\n\n.rk-color-swatch:disabled {\n opacity: 0.5;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-color-swatch {\n transition: none;\n }\n\n .rk-color-swatch:hover:not(:disabled) {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport FormField from './FormField.vue'\n\nexport interface ColorSwatch {\n /** A hex value, `#rgb` or `#rrggbb`. */\n value: string\n /** What to call it. Already translated. */\n label: string\n}\n\n/**\n * A colour, as a hex value.\n *\n * ## A native `input[type=\"color\"]`, painted\n *\n * The same decision as `BaseSlider`: the platform's own picker is better\n * than anything a page can build. It is the one the reader already knows, it\n * has the eyedropper on the desktops that have one, and on a phone it is a\n * full-screen control no web page matches. What it does not have is a look\n * that matches the rest of the kit, so the look is all that is replaced.\n *\n * ## What the kit supplies and what the app does\n *\n * `swatches` are the app's, values **and** names. A kit that shipped a row\n * of colours would be shipping a product decision, and one that shipped\n * unnamed colours would be shipping a set of buttons a screen reader reads\n * as nothing. `PALETTES` is a ready source for an app that wants the kit's\n * own ten.\n *\n * The hex field appears only when `hexLabel` is given, for the same reason\n * `BaseChip` grows a remove button only when it is told what to call it: a\n * control whose name the kit had to invent speaks a language the app does\n * not.\n *\n * ## The value contract\n *\n * In and out as `#rrggbb`, lowercase — the way dates are `YYYY-MM-DD` and\n * times are `HH:mm`. Short hex (`#abc`) and capitals are accepted from a\n * reader typing and normalised on the way out, so an app never has to\n * compare two spellings of the same colour.\n */\nconst {\n label,\n modelValue,\n swatches = [],\n hexLabel = '',\n hint = '',\n error = '',\n disabled = false,\n labelHidden = false,\n fieldId = undefined,\n} = defineProps<{\n /** Names the control. Already translated. */\n label: string\n /** The colour, as `#rrggbb`. Required: a picker with no colour shows none. */\n modelValue: string\n /** Colours to offer beside the picker. The app's values and names. */\n swatches?: readonly ColorSwatch[] | undefined\n /** Names the hex field. Without it, there is no hex field. */\n hexLabel?: string | undefined\n hint?: string | undefined\n error?: string | undefined\n disabled?: boolean | undefined\n labelHidden?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\n/** `#abc` and `#AABBCC` both mean the same colour; this is the spelling. */\nfunction normalise(value: string): string | undefined {\n const text = value.trim().toLowerCase()\n const short = /^#?([0-9a-f])([0-9a-f])([0-9a-f])$/.exec(text)\n if (short) return `#${short[1]!}${short[1]!}${short[2]!}${short[2]!}${short[3]!}${short[3]!}`\n\n const long = /^#?([0-9a-f]{6})$/.exec(text)\n\n return long ? `#${long[1]!}` : undefined\n}\n\n/**\n * The value, or nothing when it cannot be read.\n *\n * No fallback colour: a hex written here would be a colour the kit chose,\n * and the kit chooses none — a test enforces that, and it is right to.\n * Unreadable input is handed to the native control as an empty value, and\n * whatever it shows then is the platform's decision rather than ours.\n */\nconst current = computed(() => normalise(modelValue))\n\nfunction set(value: string) {\n const next = normalise(value)\n if (next && next !== current.value) emit('update:modelValue', next)\n}\n\n/**\n * What the hex field shows while it is being typed in.\n *\n * Not the value: \"#ab\" is not a colour, and rewriting the field on every\n * keystroke would make it impossible to type the third character. It\n * catches up with the value whenever the value changes from elsewhere — a\n * swatch, the native picker — and commits what it holds on blur and Enter.\n */\nconst draft = ref(current.value ?? '')\nwatch(current, (value) => (draft.value = value ?? ''))\n\nfunction commit() {\n const next = normalise(draft.value)\n if (next) set(next)\n // Nothing recognisable: put back what the value actually is, rather than\n // leaving a field that says one thing while the colour is another.\n else draft.value = current.value ?? ''\n}\n\nconst chosen = (value: string) => normalise(value) === current.value\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :hint=\"hint\"\n :error=\"error\"\n :label-hidden=\"labelHidden\"\n class=\"rk-color\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"rk-color-row\">\n <span class=\"rk-color-well\" :style=\"current ? { '--rk-color': current } : undefined\">\n <input\n :id=\"id\"\n type=\"color\"\n class=\"rk-color-native focus-ring\"\n :value=\"current ?? ''\"\n :disabled=\"disabled\"\n :aria-describedby=\"describedBy\"\n :aria-invalid=\"invalid\"\n @input=\"set(($event.target as HTMLInputElement).value)\"\n />\n </span>\n\n <input\n v-if=\"hexLabel\"\n v-model=\"draft\"\n type=\"text\"\n class=\"rk-color-hex control\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n :aria-label=\"hexLabel\"\n :disabled=\"disabled\"\n @blur=\"commit\"\n @keydown.enter.prevent=\"commit\"\n />\n\n <ul v-if=\"swatches.length > 0\" class=\"rk-color-swatches\">\n <li v-for=\"swatch in swatches\" :key=\"swatch.value\">\n <button\n type=\"button\"\n class=\"rk-color-swatch focus-ring\"\n :class=\"{ 'is-chosen': chosen(swatch.value) }\"\n :style=\"{ '--rk-color': swatch.value }\"\n :aria-label=\"swatch.label\"\n :aria-pressed=\"chosen(swatch.value)\"\n :disabled=\"disabled\"\n @click=\"set(swatch.value)\"\n />\n </li>\n </ul>\n </div>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-color-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem;\n}\n\n/* The well is what is seen; the input inside it is the whole target. A\n native colour input cannot be styled past its swatch in every browser, so\n it is stretched over a box that can be. */\n.rk-color-well {\n position: relative;\n display: block;\n width: 2.75rem;\n height: 2.75rem;\n overflow: hidden;\n border-radius: var(--radius-card);\n border: 1px solid var(--color-hair);\n background: var(--rk-color);\n}\n\n.rk-color-native {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n opacity: 0;\n}\n\n/* The ring goes on the well, since the input it belongs to is invisible. */\n.rk-color-well:has(.rk-color-native:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-color-native:disabled {\n cursor: not-allowed;\n}\n\n.rk-color-hex {\n width: 7.5rem;\n height: 2.75rem;\n border-radius: var(--radius-card);\n padding: 0 0.75rem;\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n /* 16px like every other text control here: iOS zooms the viewport when it\n focuses a field under 16px and never zooms back. */\n font-size: 1rem;\n color: var(--color-ink);\n}\n\n.rk-color-hex:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -1px;\n}\n\n.rk-color-hex:disabled {\n opacity: 0.5;\n}\n\n.rk-color-swatches {\n display: flex;\n flex-wrap: wrap;\n gap: 0.375rem;\n}\n\n.rk-color-swatch {\n display: block;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 9999px;\n border: 1px solid var(--color-hair);\n background: var(--rk-color);\n transition: transform var(--duration-fast) var(--ease-standard);\n}\n\n.rk-color-swatch:hover:not(:disabled) {\n transform: scale(1.1);\n}\n\n/* A ring around the chosen one rather than a tick: a tick has to be dark or\n light to be seen, and the swatch beneath it is whatever the app chose. */\n.rk-color-swatch.is-chosen {\n box-shadow:\n 0 0 0 2px var(--color-surface),\n 0 0 0 4px var(--color-primary);\n}\n\n.rk-color-swatch:disabled {\n opacity: 0.5;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-color-swatch {\n transition: none;\n }\n\n .rk-color-swatch:hover:not(:disabled) {\n transform: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Check, Copy } from 'lucide-vue-next'\nimport { onBeforeUnmount, ref } from 'vue'\n\n/**\n * Copies a piece of text, and says that it did.\n *\n * The saying is the part that is usually missing: a copy button that changes\n * nothing leaves the reader pressing it twice. This swaps its icon and its\n * accessible name for two seconds, and announces the change politely — which\n * is what tells somebody who cannot see the tick.\n *\n * A refusal is reported too, through `error`: a browser without clipboard\n * permission fails silently otherwise, and the next paste is whatever was\n * there before.\n */\nconst {\n text,\n copyLabel,\n copiedLabel,\n errorLabel = undefined,\n withText = false,\n variant = 'default',\n} = defineProps<{\n /** What lands on the clipboard. */\n text: string\n /** The button's name at rest, e.g. \"Copy the key\". */\n copyLabel: string\n /** Its name for the two seconds after, e.g. \"Copied\". */\n copiedLabel: string\n /** Said when the browser refuses. Unset, a refusal only leaves it unchanged. */\n errorLabel?: string | undefined\n /** Show the label beside the icon, rather than only to assistive tech. */\n withText?: boolean | undefined\n /**\n * `unstyled` keeps the copying and drops the surface and the icon.\n *\n * The announcement is the part that is laborious and the part that is\n * dropped: a copy button that says nothing leaves somebody who cannot see\n * the tick pressing it twice. Three places on this kit's own site wrote\n * their own copy button to get a different shape — a pill in a code block's\n * bar, a whole install command — and all three lost the announcement on the\n * way. That is the gap this closes: the behaviour without the paint, the\n * same answer `BaseButton` and `BaseInput` give.\n *\n * Unstyled brings no focus ring either, so give it one.\n */\n variant?: 'default' | 'unstyled' | undefined\n}>()\n\n/**\n * The button's content, for a shape the icon-and-label pair does not cover.\n *\n * Given one, set `withText` as well: the `aria-label` exists to name a button\n * whose only content is an icon, and a slot that renders words does not need\n * naming twice.\n */\ndefineSlots<{ default?: (props: { copied: boolean; failed: boolean }) => unknown }>()\n\nconst emit = defineEmits<{ copied: []; failed: [] }>()\n\nconst state = ref<'idle' | 'copied' | 'failed'>('idle')\nlet timer: ReturnType<typeof setTimeout> | null = null\n\nasync function copy() {\n if (timer) clearTimeout(timer)\n\n try {\n await navigator.clipboard.writeText(text)\n state.value = 'copied'\n emit('copied')\n } catch {\n state.value = 'failed'\n emit('failed')\n }\n\n timer = setTimeout(() => (state.value = 'idle'), 2000)\n}\n\nonBeforeUnmount(() => {\n if (timer) clearTimeout(timer)\n})\n</script>\n\n<template>\n <button\n type=\"button\"\n :class=\"\n variant === 'unstyled'\n ? ''\n : ['rk-copy control focus-ring', { 'is-copied': state === 'copied', 'with-text': withText }]\n \"\n :aria-label=\"withText ? undefined : state === 'copied' ? copiedLabel : copyLabel\"\n @click=\"copy\"\n >\n <slot :copied=\"state === 'copied'\" :failed=\"state === 'failed'\">\n <Check v-if=\"state === 'copied'\" class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <Copy v-else class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <span v-if=\"withText\">{{ state === 'copied' ? copiedLabel : copyLabel }}</span>\n </slot>\n\n <!-- Said once, when it changes: a live region the button itself owns. -->\n <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n {{ state === 'copied' ? copiedLabel : state === 'failed' ? (errorLabel ?? '') : '' }}\n </span>\n </button>\n</template>\n\n<style scoped>\n.rk-copy {\n display: inline-flex;\n height: 2.25rem;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0 0.625rem;\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--color-ink);\n transition:\n color var(--duration-fast) var(--ease-standard),\n background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-copy:hover {\n background: var(--color-muted);\n}\n\n.rk-copy.is-copied {\n color: var(--color-positive);\n}\n\n.rk-copy:not(.with-text) {\n width: 2.25rem;\n padding: 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Check, Copy } from 'lucide-vue-next'\nimport { onBeforeUnmount, ref } from 'vue'\n\n/**\n * Copies a piece of text, and says that it did.\n *\n * The saying is the part that is usually missing: a copy button that changes\n * nothing leaves the reader pressing it twice. This swaps its icon and its\n * accessible name for two seconds, and announces the change politely — which\n * is what tells somebody who cannot see the tick.\n *\n * A refusal is reported too, through `error`: a browser without clipboard\n * permission fails silently otherwise, and the next paste is whatever was\n * there before.\n */\nconst {\n text,\n copyLabel,\n copiedLabel,\n errorLabel = undefined,\n withText = false,\n variant = 'default',\n} = defineProps<{\n /** What lands on the clipboard. */\n text: string\n /** The button's name at rest, e.g. \"Copy the key\". */\n copyLabel: string\n /** Its name for the two seconds after, e.g. \"Copied\". */\n copiedLabel: string\n /** Said when the browser refuses. Unset, a refusal only leaves it unchanged. */\n errorLabel?: string | undefined\n /** Show the label beside the icon, rather than only to assistive tech. */\n withText?: boolean | undefined\n /**\n * `unstyled` keeps the copying and drops the surface and the icon.\n *\n * The announcement is the part that is laborious and the part that is\n * dropped: a copy button that says nothing leaves somebody who cannot see\n * the tick pressing it twice. Three places on this kit's own site wrote\n * their own copy button to get a different shape — a pill in a code block's\n * bar, a whole install command — and all three lost the announcement on the\n * way. That is the gap this closes: the behaviour without the paint, the\n * same answer `BaseButton` and `BaseInput` give.\n *\n * Unstyled brings no focus ring either, so give it one.\n */\n variant?: 'default' | 'unstyled' | undefined\n}>()\n\n/**\n * The button's content, for a shape the icon-and-label pair does not cover.\n *\n * Given one, set `withText` as well: the `aria-label` exists to name a button\n * whose only content is an icon, and a slot that renders words does not need\n * naming twice.\n */\ndefineSlots<{ default?: (props: { copied: boolean; failed: boolean }) => unknown }>()\n\nconst emit = defineEmits<{ copied: []; failed: [] }>()\n\nconst state = ref<'idle' | 'copied' | 'failed'>('idle')\nlet timer: ReturnType<typeof setTimeout> | null = null\n\nasync function copy() {\n if (timer) clearTimeout(timer)\n\n try {\n await navigator.clipboard.writeText(text)\n state.value = 'copied'\n emit('copied')\n } catch {\n state.value = 'failed'\n emit('failed')\n }\n\n timer = setTimeout(() => (state.value = 'idle'), 2000)\n}\n\nonBeforeUnmount(() => {\n if (timer) clearTimeout(timer)\n})\n</script>\n\n<template>\n <button\n type=\"button\"\n :class=\"\n variant === 'unstyled'\n ? ''\n : ['rk-copy control focus-ring', { 'is-copied': state === 'copied', 'with-text': withText }]\n \"\n :aria-label=\"withText ? undefined : state === 'copied' ? copiedLabel : copyLabel\"\n @click=\"copy\"\n >\n <slot :copied=\"state === 'copied'\" :failed=\"state === 'failed'\">\n <Check v-if=\"state === 'copied'\" class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <Copy v-else class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <span v-if=\"withText\">{{ state === 'copied' ? copiedLabel : copyLabel }}</span>\n </slot>\n\n <!-- Said once, when it changes: a live region the button itself owns. -->\n <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n {{ state === 'copied' ? copiedLabel : state === 'failed' ? (errorLabel ?? '') : '' }}\n </span>\n </button>\n</template>\n\n<style scoped>\n.rk-copy {\n display: inline-flex;\n height: 2.25rem;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0 0.625rem;\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--color-ink);\n transition:\n color var(--duration-fast) var(--ease-standard),\n background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-copy:hover {\n background: var(--color-muted);\n}\n\n.rk-copy.is-copied {\n color: var(--color-positive);\n}\n\n.rk-copy:not(.with-text) {\n width: 2.25rem;\n padding: 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport CopyButton from './CopyButton.vue'\n\n/**\n * A sample of code, as written.\n *\n * ## No highlighting, and no `v-html`\n *\n * A code sample is the one place where what is written is exactly what is\n * meant, so the text goes in as text. Highlighting would mean either a\n * parser in the bundle of every app that shows one line of shell, or\n * `v-html` and a promise the app cannot keep about where the string came\n * from. An app that wants colour can highlight on its own and put the\n * result in the default slot; the frame, the scrolling and the copying\n * stay here.\n *\n * ## The scroll is the accessibility problem\n *\n * A long line makes this scroll sideways, and a scrolling box that cannot\n * take focus cannot be scrolled by a keyboard at all — the end of the line\n * is simply unreachable, with nothing on screen to say so. So when it can\n * scroll it is focusable and named, which is also what makes a screen\n * reader announce it as a region rather than dropping the reader into loose\n * text.\n *\n * `wrap` is the other answer: no scrolling, no focus stop, and long lines\n * broken instead. Which one is right depends on the code — a shell command\n * wraps well, a table of output does not — so it is the app's to choose.\n */\nconst {\n code,\n label,\n language = undefined,\n wrap = false,\n copyLabel = undefined,\n copiedLabel = undefined,\n} = defineProps<{\n /** The sample itself. Shown exactly as given. */\n code: string\n /**\n * Names the block, e.g. \"Installing the package\".\n *\n * Required because this is a region a reader can land in, and an unnamed\n * one is announced as nothing at all.\n */\n label: string\n /** Shown in the corner, e.g. `bash`, `ts`. Not used to highlight anything. */\n language?: string | undefined\n /** Break long lines instead of scrolling sideways. */\n wrap?: boolean | undefined\n /** Given together with `copiedLabel`, adds a copy button. Already translated. */\n copyLabel?: string | undefined\n copiedLabel?: string | undefined\n}>()\n\ndefineSlots<{\n /** The body, when the app has highlighted it itself. Plain text otherwise. */\n default?: () => unknown\n}>()\n\nconst copyable = computed(() => copyLabel !== undefined && copiedLabel !== undefined)\n\n/*\n * Only a box that actually scrolls becomes a tab stop.\n *\n * A focus stop that scrolls nothing is a stop somebody has to Tab past for\n * no reason, and on a page of samples that is one per sample.\n */\nconst scrolls = computed(() => !wrap)\n</script>\n\n<template>\n <figure class=\"rk-code\" :class=\"{ 'is-wrapped': wrap }\">\n <figcaption v-if=\"language || copyable\" class=\"rk-code-bar\">\n <span v-if=\"language\" class=\"rk-code-lang\">{{ language }}</span>\n <CopyButton\n v-if=\"copyable\"\n class=\"rk-code-copy\"\n :text=\"code\"\n :copy-label=\"copyLabel!\"\n :copied-label=\"copiedLabel!\"\n />\n </figcaption>\n\n <pre\n class=\"rk-code-pre\"\n :tabindex=\"scrolls ? 0 : undefined\"\n :role=\"scrolls ? 'region' : undefined\"\n :aria-label=\"scrolls ? label : undefined\"\n ><code><slot>{{ code }}</slot></code></pre>\n </figure>\n</template>\n\n<style scoped>\n.rk-code {\n position: relative;\n overflow: hidden;\n border: 1px solid var(--color-hair);\n border-radius: var(--radius-card);\n background: color-mix(in oklab, var(--color-muted) 50%, transparent);\n}\n\n.rk-code-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.375rem 0.5rem 0.375rem 1rem;\n border-block-end: 1px solid var(--color-hair);\n color: var(--color-ink-soft);\n font-size: 0.75rem;\n}\n\n.rk-code-lang {\n font-family: ui-monospace, monospace;\n letter-spacing: 0.04em;\n}\n\n/* Pushes the button to the end when there is no language beside it. */\n.rk-code-copy {\n margin-inline-start: auto;\n}\n\n.rk-code-pre {\n margin: 0;\n overflow-x: auto;\n padding: 1rem 1.25rem;\n color: var(--color-ink);\n font-size: 0.875rem;\n line-height: 1.75;\n}\n\n.rk-code-pre:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n.is-wrapped .rk-code-pre {\n overflow-x: visible;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.rk-code-pre code {\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport CopyButton from './CopyButton.vue'\n\n/**\n * A sample of code, as written.\n *\n * ## No highlighting, and no `v-html`\n *\n * A code sample is the one place where what is written is exactly what is\n * meant, so the text goes in as text. Highlighting would mean either a\n * parser in the bundle of every app that shows one line of shell, or\n * `v-html` and a promise the app cannot keep about where the string came\n * from. An app that wants colour can highlight on its own and put the\n * result in the default slot; the frame, the scrolling and the copying\n * stay here.\n *\n * ## The scroll is the accessibility problem\n *\n * A long line makes this scroll sideways, and a scrolling box that cannot\n * take focus cannot be scrolled by a keyboard at all — the end of the line\n * is simply unreachable, with nothing on screen to say so. So when it can\n * scroll it is focusable and named, which is also what makes a screen\n * reader announce it as a region rather than dropping the reader into loose\n * text.\n *\n * `wrap` is the other answer: no scrolling, no focus stop, and long lines\n * broken instead. Which one is right depends on the code — a shell command\n * wraps well, a table of output does not — so it is the app's to choose.\n */\nconst {\n code,\n label,\n language = undefined,\n wrap = false,\n copyLabel = undefined,\n copiedLabel = undefined,\n} = defineProps<{\n /** The sample itself. Shown exactly as given. */\n code: string\n /**\n * Names the block, e.g. \"Installing the package\".\n *\n * Required because this is a region a reader can land in, and an unnamed\n * one is announced as nothing at all.\n */\n label: string\n /** Shown in the corner, e.g. `bash`, `ts`. Not used to highlight anything. */\n language?: string | undefined\n /** Break long lines instead of scrolling sideways. */\n wrap?: boolean | undefined\n /** Given together with `copiedLabel`, adds a copy button. Already translated. */\n copyLabel?: string | undefined\n copiedLabel?: string | undefined\n}>()\n\ndefineSlots<{\n /** The body, when the app has highlighted it itself. Plain text otherwise. */\n default?: () => unknown\n}>()\n\nconst copyable = computed(() => copyLabel !== undefined && copiedLabel !== undefined)\n\n/*\n * Only a box that actually scrolls becomes a tab stop.\n *\n * A focus stop that scrolls nothing is a stop somebody has to Tab past for\n * no reason, and on a page of samples that is one per sample.\n */\nconst scrolls = computed(() => !wrap)\n</script>\n\n<template>\n <figure class=\"rk-code\" :class=\"{ 'is-wrapped': wrap }\">\n <figcaption v-if=\"language || copyable\" class=\"rk-code-bar\">\n <span v-if=\"language\" class=\"rk-code-lang\">{{ language }}</span>\n <CopyButton\n v-if=\"copyable\"\n class=\"rk-code-copy\"\n :text=\"code\"\n :copy-label=\"copyLabel!\"\n :copied-label=\"copiedLabel!\"\n />\n </figcaption>\n\n <pre\n class=\"rk-code-pre\"\n :tabindex=\"scrolls ? 0 : undefined\"\n :role=\"scrolls ? 'region' : undefined\"\n :aria-label=\"scrolls ? label : undefined\"\n ><code><slot>{{ code }}</slot></code></pre>\n </figure>\n</template>\n\n<style scoped>\n.rk-code {\n position: relative;\n overflow: hidden;\n border: 1px solid var(--color-hair);\n border-radius: var(--radius-card);\n background: color-mix(in oklab, var(--color-muted) 50%, transparent);\n}\n\n.rk-code-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.375rem 0.5rem 0.375rem 1rem;\n border-block-end: 1px solid var(--color-hair);\n color: var(--color-ink-soft);\n font-size: 0.75rem;\n}\n\n.rk-code-lang {\n font-family: ui-monospace, monospace;\n letter-spacing: 0.04em;\n}\n\n/* Pushes the button to the end when there is no language beside it. */\n.rk-code-copy {\n margin-inline-start: auto;\n}\n\n.rk-code-pre {\n margin: 0;\n overflow-x: auto;\n padding: 1rem 1.25rem;\n color: var(--color-ink);\n font-size: 0.875rem;\n line-height: 1.75;\n}\n\n.rk-code-pre:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n.is-wrapped .rk-code-pre {\n overflow-x: visible;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.rk-code-pre code {\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n</style>\n","<script setup lang=\"ts\">\nexport interface DescriptionItem {\n /** What it is: \"Status\", \"Created\". Already translated. */\n term: string\n /** What it says. Use the slot named after `key` for anything but text. */\n description?: string | undefined\n /** Names the slot that draws this row's value. */\n key?: string | undefined\n}\n\n/**\n * Pairs of \"what it is\" and \"what it says\": the summary at the top of a\n * detail page, the facts under an invoice.\n *\n * A `<dl>`, which is the element for exactly this and almost never used: a\n * grid of divs says nothing about which text names which value, and a\n * screen reader reads it as a wall. Here each pair is a `dt` and a `dd`, so\n * \"Status: paid\" is heard as one thing.\n *\n * Values that are not plain text — a badge, a link, a date — come from the\n * slot named after the row's `key`.\n */\nconst { items, layout = 'stacked' } = defineProps<{\n items: readonly DescriptionItem[]\n /** `inline` puts the term beside its value; `stacked` puts it above. */\n layout?: 'stacked' | 'inline' | undefined\n}>()\n\ndefineSlots<{\n /** A row's value, named for its `key`. */\n [key: string]: (props: { item: DescriptionItem }) => unknown\n}>()\n</script>\n\n<template>\n <dl class=\"rk-dl\" :class=\"`is-${layout}`\">\n <div v-for=\"item in items\" :key=\"item.key ?? item.term\" class=\"rk-dl-row\">\n <dt class=\"rk-dl-term\">{{ item.term }}</dt>\n <dd class=\"rk-dl-value\">\n <slot :name=\"item.key ?? item.term\" :item=\"item\">{{ item.description }}</slot>\n </dd>\n </div>\n </dl>\n</template>\n\n<style scoped>\n.rk-dl {\n display: grid;\n gap: 0.75rem;\n}\n\n.rk-dl.is-inline {\n gap: 0.5rem;\n}\n\n.rk-dl-row {\n display: grid;\n gap: 0.125rem;\n}\n\n/* Inline from a tablet up: below that a term and its value side by side\n leave neither enough room to read. */\n@media (min-width: 40rem) {\n .is-inline .rk-dl-row {\n grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr);\n gap: 1rem;\n align-items: baseline;\n }\n}\n\n.rk-dl-term {\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--color-ink-soft);\n}\n\n.rk-dl-value {\n font-size: 0.875rem;\n color: var(--color-ink);\n}\n</style>\n","<script setup lang=\"ts\">\nexport interface DescriptionItem {\n /** What it is: \"Status\", \"Created\". Already translated. */\n term: string\n /** What it says. Use the slot named after `key` for anything but text. */\n description?: string | undefined\n /** Names the slot that draws this row's value. */\n key?: string | undefined\n}\n\n/**\n * Pairs of \"what it is\" and \"what it says\": the summary at the top of a\n * detail page, the facts under an invoice.\n *\n * A `<dl>`, which is the element for exactly this and almost never used: a\n * grid of divs says nothing about which text names which value, and a\n * screen reader reads it as a wall. Here each pair is a `dt` and a `dd`, so\n * \"Status: paid\" is heard as one thing.\n *\n * Values that are not plain text — a badge, a link, a date — come from the\n * slot named after the row's `key`.\n */\nconst { items, layout = 'stacked' } = defineProps<{\n items: readonly DescriptionItem[]\n /** `inline` puts the term beside its value; `stacked` puts it above. */\n layout?: 'stacked' | 'inline' | undefined\n}>()\n\ndefineSlots<{\n /** A row's value, named for its `key`. */\n [key: string]: (props: { item: DescriptionItem }) => unknown\n}>()\n</script>\n\n<template>\n <dl class=\"rk-dl\" :class=\"`is-${layout}`\">\n <div v-for=\"item in items\" :key=\"item.key ?? item.term\" class=\"rk-dl-row\">\n <dt class=\"rk-dl-term\">{{ item.term }}</dt>\n <dd class=\"rk-dl-value\">\n <slot :name=\"item.key ?? item.term\" :item=\"item\">{{ item.description }}</slot>\n </dd>\n </div>\n </dl>\n</template>\n\n<style scoped>\n.rk-dl {\n display: grid;\n gap: 0.75rem;\n}\n\n.rk-dl.is-inline {\n gap: 0.5rem;\n}\n\n.rk-dl-row {\n display: grid;\n gap: 0.125rem;\n}\n\n/* Inline from a tablet up: below that a term and its value side by side\n leave neither enough room to read. */\n@media (min-width: 40rem) {\n .is-inline .rk-dl-row {\n grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr);\n gap: 1rem;\n align-items: baseline;\n }\n}\n\n.rk-dl-term {\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--color-ink-soft);\n}\n\n.rk-dl-value {\n font-size: 0.875rem;\n color: var(--color-ink);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Paperclip, Upload, X } from 'lucide-vue-next'\nimport { computed, ref, useId } from 'vue'\n\n/**\n * Files, dropped on or chosen from a real file input.\n *\n * The input is the control; the box around it is a label. That is not a\n * detail: a `<div>` with a click handler cannot be reached with Tab, opened\n * with Enter, or announced as \"choose file\", and dragging is a pointer\n * gesture that a keyboard has no version of. Everything here works without a\n * drag.\n *\n * It holds files, not uploads. Sending them, the progress and the failures\n * are the app's — the kit does not know your endpoint, and a component that\n * guessed it would be wrong everywhere.\n */\nconst {\n label,\n hint = '',\n browseLabel,\n removeLabel,\n accept = undefined,\n multiple = false,\n maxSize = undefined,\n tooLargeLabel = undefined,\n disabled = false,\n} = defineProps<{\n /** The instruction in the box: \"Drop a receipt here\". Already translated. */\n label: string\n /** A line under it: what is accepted, how big. */\n hint?: string | undefined\n /** The button inside the box, e.g. \"Browse\". */\n browseLabel: string\n /** Accessible name of each file's remove button. */\n removeLabel: string\n /** Passed to the input: `image/*`, `.pdf`. */\n accept?: string | undefined\n multiple?: boolean | undefined\n /** In bytes. Anything larger is refused and reported through `rejected`. */\n maxSize?: number | undefined\n /** Shown under the box when a file was too large. */\n tooLargeLabel?: string | undefined\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{\n /** Files that were too large, so the app can say more than the kit can. */\n rejected: [files: File[]]\n}>()\n\n/** The files held, with `v-model`. */\nconst model = defineModel<File[]>({ default: () => [] })\n\nconst id = useId()\nconst over = ref(false)\nconst refused = ref(false)\n\nconst tooBig = (file: File) => maxSize !== undefined && file.size > maxSize\n\nfunction take(list: FileList | null) {\n if (!list || disabled) return\n\n const incoming = Array.from(list)\n const rejected = incoming.filter(tooBig)\n const accepted = incoming.filter((file) => !tooBig(file))\n\n refused.value = rejected.length > 0\n if (rejected.length) emit('rejected', rejected)\n\n model.value = multiple ? [...model.value, ...accepted] : accepted.slice(0, 1)\n}\n\nfunction onDrop(event: DragEvent) {\n over.value = false\n take(event.dataTransfer?.files ?? null)\n}\n\nfunction onInput(event: Event) {\n const input = event.target as HTMLInputElement\n take(input.files)\n // Cleared, so choosing the same file twice in a row still fires.\n input.value = ''\n}\n\nfunction remove(index: number) {\n model.value = model.value.filter((_, at) => at !== index)\n}\n\n/** KB and MB by hand: `Intl` has no file sizes, and the unit is not a word. */\nconst size = (bytes: number) =>\n bytes >= 1024 * 1024\n ? `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n : `${Math.max(1, Math.round(bytes / 1024))} KB`\n\nconst count = computed(() => model.value.length)\n</script>\n\n<template>\n <div class=\"rk-drop\">\n <label\n class=\"rk-drop-box control\"\n :class=\"{ 'is-over': over, 'is-disabled': disabled }\"\n :for=\"id\"\n @dragover.prevent=\"over = !disabled\"\n @dragleave=\"over = false\"\n @drop.prevent=\"onDrop\"\n >\n <input\n :id=\"id\"\n type=\"file\"\n class=\"sr-only\"\n :accept=\"accept\"\n :multiple=\"multiple\"\n :disabled=\"disabled\"\n @change=\"onInput\"\n />\n <Upload class=\"text-ink-soft size-6\" aria-hidden=\"true\" />\n <span class=\"rk-drop-label\">{{ label }}</span>\n <span v-if=\"hint\" class=\"rk-drop-hint\">{{ hint }}</span>\n <span class=\"rk-drop-browse\">{{ browseLabel }}</span>\n </label>\n\n <p v-if=\"refused && tooLargeLabel\" class=\"rk-drop-error\" role=\"alert\">{{ tooLargeLabel }}</p>\n\n <ul v-if=\"count\" class=\"rk-drop-files\">\n <li\n v-for=\"(file, index) in model\"\n :key=\"`${file.name}-${index}`\"\n class=\"rk-drop-file control\"\n >\n <Paperclip class=\"text-ink-soft size-4 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ file.name }}</span>\n <span class=\"rk-drop-size\">{{ size(file.size) }}</span>\n <button\n type=\"button\"\n class=\"rk-drop-remove focus-ring\"\n :aria-label=\"`${removeLabel}: ${file.name}`\"\n :disabled=\"disabled\"\n @click=\"remove(index)\"\n >\n <X class=\"size-3.5\" aria-hidden=\"true\" />\n </button>\n </li>\n </ul>\n </div>\n</template>\n\n<style scoped>\n.rk-drop-box {\n display: flex;\n cursor: pointer;\n flex-direction: column;\n align-items: center;\n gap: 0.375rem;\n border-radius: var(--radius-card);\n border-style: dashed;\n border-width: 2px;\n padding: 1.5rem 1rem;\n text-align: center;\n transition:\n border-color var(--duration-fast) var(--ease-standard),\n background-color var(--duration-fast) var(--ease-standard);\n}\n\n/* The box is a label, so the ring belongs to the input it names. */\n.rk-drop-box:has(input:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-drop-box.is-over {\n border-color: var(--color-primary);\n background: color-mix(in oklab, var(--color-primary) 8%, transparent);\n}\n\n.rk-drop-box.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.rk-drop-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-drop-hint {\n font-size: 0.75rem;\n color: var(--color-ink-soft);\n}\n\n.rk-drop-browse {\n margin-top: 0.25rem;\n border-radius: 9999px;\n background: var(--color-muted);\n padding: 0.25rem 0.75rem;\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-drop-error {\n margin-top: 0.5rem;\n font-size: 0.8125rem;\n color: var(--color-negative);\n}\n\n.rk-drop-files {\n margin-top: 0.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n}\n\n.rk-drop-file {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0.5rem 0.5rem 0.5rem 0.75rem;\n font-size: 0.8125rem;\n color: var(--color-ink);\n}\n\n.rk-drop-size {\n margin-inline-start: auto;\n flex-shrink: 0;\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink-soft);\n}\n\n.rk-drop-remove {\n display: grid;\n width: 1.5rem;\n height: 1.5rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink-soft);\n}\n\n.rk-drop-remove:hover {\n background: var(--color-muted);\n color: var(--color-ink);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Paperclip, Upload, X } from 'lucide-vue-next'\nimport { computed, ref, useId } from 'vue'\n\n/**\n * Files, dropped on or chosen from a real file input.\n *\n * The input is the control; the box around it is a label. That is not a\n * detail: a `<div>` with a click handler cannot be reached with Tab, opened\n * with Enter, or announced as \"choose file\", and dragging is a pointer\n * gesture that a keyboard has no version of. Everything here works without a\n * drag.\n *\n * It holds files, not uploads. Sending them, the progress and the failures\n * are the app's — the kit does not know your endpoint, and a component that\n * guessed it would be wrong everywhere.\n */\nconst {\n label,\n hint = '',\n browseLabel,\n removeLabel,\n accept = undefined,\n multiple = false,\n maxSize = undefined,\n tooLargeLabel = undefined,\n disabled = false,\n} = defineProps<{\n /** The instruction in the box: \"Drop a receipt here\". Already translated. */\n label: string\n /** A line under it: what is accepted, how big. */\n hint?: string | undefined\n /** The button inside the box, e.g. \"Browse\". */\n browseLabel: string\n /** Accessible name of each file's remove button. */\n removeLabel: string\n /** Passed to the input: `image/*`, `.pdf`. */\n accept?: string | undefined\n multiple?: boolean | undefined\n /** In bytes. Anything larger is refused and reported through `rejected`. */\n maxSize?: number | undefined\n /** Shown under the box when a file was too large. */\n tooLargeLabel?: string | undefined\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{\n /** Files that were too large, so the app can say more than the kit can. */\n rejected: [files: File[]]\n}>()\n\n/** The files held, with `v-model`. */\nconst model = defineModel<File[]>({ default: () => [] })\n\nconst id = useId()\nconst over = ref(false)\nconst refused = ref(false)\n\nconst tooBig = (file: File) => maxSize !== undefined && file.size > maxSize\n\nfunction take(list: FileList | null) {\n if (!list || disabled) return\n\n const incoming = Array.from(list)\n const rejected = incoming.filter(tooBig)\n const accepted = incoming.filter((file) => !tooBig(file))\n\n refused.value = rejected.length > 0\n if (rejected.length) emit('rejected', rejected)\n\n model.value = multiple ? [...model.value, ...accepted] : accepted.slice(0, 1)\n}\n\nfunction onDrop(event: DragEvent) {\n over.value = false\n take(event.dataTransfer?.files ?? null)\n}\n\nfunction onInput(event: Event) {\n const input = event.target as HTMLInputElement\n take(input.files)\n // Cleared, so choosing the same file twice in a row still fires.\n input.value = ''\n}\n\nfunction remove(index: number) {\n model.value = model.value.filter((_, at) => at !== index)\n}\n\n/** KB and MB by hand: `Intl` has no file sizes, and the unit is not a word. */\nconst size = (bytes: number) =>\n bytes >= 1024 * 1024\n ? `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n : `${Math.max(1, Math.round(bytes / 1024))} KB`\n\nconst count = computed(() => model.value.length)\n</script>\n\n<template>\n <div class=\"rk-drop\">\n <label\n class=\"rk-drop-box control\"\n :class=\"{ 'is-over': over, 'is-disabled': disabled }\"\n :for=\"id\"\n @dragover.prevent=\"over = !disabled\"\n @dragleave=\"over = false\"\n @drop.prevent=\"onDrop\"\n >\n <input\n :id=\"id\"\n type=\"file\"\n class=\"sr-only\"\n :accept=\"accept\"\n :multiple=\"multiple\"\n :disabled=\"disabled\"\n @change=\"onInput\"\n />\n <Upload class=\"text-ink-soft size-6\" aria-hidden=\"true\" />\n <span class=\"rk-drop-label\">{{ label }}</span>\n <span v-if=\"hint\" class=\"rk-drop-hint\">{{ hint }}</span>\n <span class=\"rk-drop-browse\">{{ browseLabel }}</span>\n </label>\n\n <p v-if=\"refused && tooLargeLabel\" class=\"rk-drop-error\" role=\"alert\">{{ tooLargeLabel }}</p>\n\n <ul v-if=\"count\" class=\"rk-drop-files\">\n <li\n v-for=\"(file, index) in model\"\n :key=\"`${file.name}-${index}`\"\n class=\"rk-drop-file control\"\n >\n <Paperclip class=\"text-ink-soft size-4 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ file.name }}</span>\n <span class=\"rk-drop-size\">{{ size(file.size) }}</span>\n <button\n type=\"button\"\n class=\"rk-drop-remove focus-ring\"\n :aria-label=\"`${removeLabel}: ${file.name}`\"\n :disabled=\"disabled\"\n @click=\"remove(index)\"\n >\n <X class=\"size-3.5\" aria-hidden=\"true\" />\n </button>\n </li>\n </ul>\n </div>\n</template>\n\n<style scoped>\n.rk-drop-box {\n display: flex;\n cursor: pointer;\n flex-direction: column;\n align-items: center;\n gap: 0.375rem;\n border-radius: var(--radius-card);\n border-style: dashed;\n border-width: 2px;\n padding: 1.5rem 1rem;\n text-align: center;\n transition:\n border-color var(--duration-fast) var(--ease-standard),\n background-color var(--duration-fast) var(--ease-standard);\n}\n\n/* The box is a label, so the ring belongs to the input it names. */\n.rk-drop-box:has(input:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-drop-box.is-over {\n border-color: var(--color-primary);\n background: color-mix(in oklab, var(--color-primary) 8%, transparent);\n}\n\n.rk-drop-box.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.rk-drop-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-drop-hint {\n font-size: 0.75rem;\n color: var(--color-ink-soft);\n}\n\n.rk-drop-browse {\n margin-top: 0.25rem;\n border-radius: 9999px;\n background: var(--color-muted);\n padding: 0.25rem 0.75rem;\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--color-ink);\n}\n\n.rk-drop-error {\n margin-top: 0.5rem;\n font-size: 0.8125rem;\n color: var(--color-negative);\n}\n\n.rk-drop-files {\n margin-top: 0.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n}\n\n.rk-drop-file {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0.5rem 0.5rem 0.5rem 0.75rem;\n font-size: 0.8125rem;\n color: var(--color-ink);\n}\n\n.rk-drop-size {\n margin-inline-start: auto;\n flex-shrink: 0;\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink-soft);\n}\n\n.rk-drop-remove {\n display: grid;\n width: 1.5rem;\n height: 1.5rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink-soft);\n}\n\n.rk-drop-remove:hover {\n background: var(--color-muted);\n color: var(--color-ink);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport BaseChip from './BaseChip.vue'\nimport FormField from './FormField.vue'\n\n/**\n * A field that holds several short values: recipients, labels, skills.\n *\n * Enter and a comma commit what has been typed; Backspace on an empty field\n * takes the last one back, which is the shortcut everybody tries. The chips\n * are before the field rather than beside it, so the caret is always at the\n * end of the line the way it is in a mail client.\n *\n * A pasted \"vue, html, css\" becomes three tags rather than one: whatever is\n * pasted is split on commas and line breaks, which is the shape every list\n * copied from somewhere else arrives in.\n *\n * `removeLabel` builds each chip's remove button name from the tag, so a\n * screen reader hears \"Remove: design\" rather than five buttons called \"×\".\n */\nconst {\n label,\n removeLabel,\n placeholder = '',\n hint = '',\n error = '',\n max = undefined,\n allowDuplicates = false,\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n /** `(tag) => \\`Remove ${tag}\\`` — already translated. */\n removeLabel: (tag: string) => string\n placeholder?: string | undefined\n hint?: string | undefined\n error?: string | undefined\n /** How many tags at most. The field stops taking them at the limit. */\n max?: number | undefined\n /** By default the same tag twice is ignored. */\n allowDuplicates?: boolean | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/** The tags, with `v-model`. */\nconst model = defineModel<string[]>({ default: () => [] })\n\nconst draft = ref('')\n\n/** Commits one or many: \"vue, html\" is two tags however it arrived. */\nfunction commit(text: string) {\n const parts = text\n .split(/[\\n,]/)\n .map((part) => part.trim())\n .filter(Boolean)\n\n if (parts.length === 0) return\n\n const next = [...model.value]\n for (const value of parts) {\n if (max !== undefined && next.length >= max) break\n if (!allowDuplicates && next.includes(value)) continue\n next.push(value)\n }\n\n if (next.length !== model.value.length) model.value = next\n}\n\nfunction add() {\n const text = draft.value\n draft.value = ''\n commit(text)\n}\n\nfunction onPaste(event: ClipboardEvent) {\n const text = event.clipboardData?.getData('text') ?? ''\n // Only when there is something to split on; a single word is left to the\n // field so the caret stays where the reader put it.\n if (!/[\\n,]/.test(text)) return\n\n event.preventDefault()\n commit(`${draft.value}${text}`)\n draft.value = ''\n}\n\nfunction remove(index: number) {\n model.value = model.value.filter((_, at) => at !== index)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ',') {\n // Enter here commits a tag; it must not also submit the form around it.\n event.preventDefault()\n add()\n return\n }\n\n if (event.key === 'Backspace' && draft.value === '' && model.value.length) {\n event.preventDefault()\n remove(model.value.length - 1)\n }\n}\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div\n class=\"rk-tags control\"\n :class=\"{ 'is-invalid': invalid, 'is-disabled': disabled }\"\n @click=\"!disabled && ($el as HTMLElement).querySelector('input')?.focus()\"\n >\n <BaseChip\n v-for=\"(tag, index) in model\"\n :key=\"`${tag}-${index}`\"\n :label=\"tag\"\n :remove-label=\"removeLabel(tag)\"\n :disabled=\"disabled\"\n @remove=\"remove(index)\"\n />\n\n <input\n :id=\"id\"\n v-model=\"draft\"\n type=\"text\"\n class=\"rk-tags-field\"\n autocomplete=\"off\"\n :placeholder=\"model.length ? '' : placeholder\"\n :aria-describedby=\"describedBy\"\n :aria-invalid=\"invalid\"\n :disabled=\"disabled || (max !== undefined && model.length >= max)\"\n @keydown=\"onKeydown\"\n @paste=\"onPaste\"\n @blur=\"add\"\n />\n </div>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-tags {\n display: flex;\n min-height: 2.75rem;\n cursor: text;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.375rem;\n border-radius: var(--radius-card);\n padding: 0.375rem 0.5rem;\n}\n\n/* `:has(input:focus-visible)` rather than `:focus-within`: the ring belongs\n to the field, not to the chips' remove buttons, which carry their own. */\n.rk-tags:has(.rk-tags-field:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n\n.rk-tags.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-tags.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.rk-tags-field {\n min-width: 6rem;\n flex: 1;\n background: transparent;\n /* 16px, like every other field: below it iOS zooms the page in on focus\n and never zooms back. */\n font-size: 1rem;\n color: var(--color-ink);\n outline: none;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport BaseChip from './BaseChip.vue'\nimport FormField from './FormField.vue'\n\n/**\n * A field that holds several short values: recipients, labels, skills.\n *\n * Enter and a comma commit what has been typed; Backspace on an empty field\n * takes the last one back, which is the shortcut everybody tries. The chips\n * are before the field rather than beside it, so the caret is always at the\n * end of the line the way it is in a mail client.\n *\n * A pasted \"vue, html, css\" becomes three tags rather than one: whatever is\n * pasted is split on commas and line breaks, which is the shape every list\n * copied from somewhere else arrives in.\n *\n * `removeLabel` builds each chip's remove button name from the tag, so a\n * screen reader hears \"Remove: design\" rather than five buttons called \"×\".\n */\nconst {\n label,\n removeLabel,\n placeholder = '',\n hint = '',\n error = '',\n max = undefined,\n allowDuplicates = false,\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n /** `(tag) => \\`Remove ${tag}\\`` — already translated. */\n removeLabel: (tag: string) => string\n placeholder?: string | undefined\n hint?: string | undefined\n error?: string | undefined\n /** How many tags at most. The field stops taking them at the limit. */\n max?: number | undefined\n /** By default the same tag twice is ignored. */\n allowDuplicates?: boolean | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/** The tags, with `v-model`. */\nconst model = defineModel<string[]>({ default: () => [] })\n\nconst draft = ref('')\n\n/** Commits one or many: \"vue, html\" is two tags however it arrived. */\nfunction commit(text: string) {\n const parts = text\n .split(/[\\n,]/)\n .map((part) => part.trim())\n .filter(Boolean)\n\n if (parts.length === 0) return\n\n const next = [...model.value]\n for (const value of parts) {\n if (max !== undefined && next.length >= max) break\n if (!allowDuplicates && next.includes(value)) continue\n next.push(value)\n }\n\n if (next.length !== model.value.length) model.value = next\n}\n\nfunction add() {\n const text = draft.value\n draft.value = ''\n commit(text)\n}\n\nfunction onPaste(event: ClipboardEvent) {\n const text = event.clipboardData?.getData('text') ?? ''\n // Only when there is something to split on; a single word is left to the\n // field so the caret stays where the reader put it.\n if (!/[\\n,]/.test(text)) return\n\n event.preventDefault()\n commit(`${draft.value}${text}`)\n draft.value = ''\n}\n\nfunction remove(index: number) {\n model.value = model.value.filter((_, at) => at !== index)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ',') {\n // Enter here commits a tag; it must not also submit the form around it.\n event.preventDefault()\n add()\n return\n }\n\n if (event.key === 'Backspace' && draft.value === '' && model.value.length) {\n event.preventDefault()\n remove(model.value.length - 1)\n }\n}\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div\n class=\"rk-tags control\"\n :class=\"{ 'is-invalid': invalid, 'is-disabled': disabled }\"\n @click=\"!disabled && ($el as HTMLElement).querySelector('input')?.focus()\"\n >\n <BaseChip\n v-for=\"(tag, index) in model\"\n :key=\"`${tag}-${index}`\"\n :label=\"tag\"\n :remove-label=\"removeLabel(tag)\"\n :disabled=\"disabled\"\n @remove=\"remove(index)\"\n />\n\n <input\n :id=\"id\"\n v-model=\"draft\"\n type=\"text\"\n class=\"rk-tags-field\"\n autocomplete=\"off\"\n :placeholder=\"model.length ? '' : placeholder\"\n :aria-describedby=\"describedBy\"\n :aria-invalid=\"invalid\"\n :disabled=\"disabled || (max !== undefined && model.length >= max)\"\n @keydown=\"onKeydown\"\n @paste=\"onPaste\"\n @blur=\"add\"\n />\n </div>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-tags {\n display: flex;\n min-height: 2.75rem;\n cursor: text;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.375rem;\n border-radius: var(--radius-card);\n padding: 0.375rem 0.5rem;\n}\n\n/* `:has(input:focus-visible)` rather than `:focus-within`: the ring belongs\n to the field, not to the chips' remove buttons, which carry their own. */\n.rk-tags:has(.rk-tags-field:focus-visible) {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n\n.rk-tags.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-tags.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.rk-tags-field {\n min-width: 6rem;\n flex: 1;\n background: transparent;\n /* 16px, like every other field: below it iOS zooms the page in on focus\n and never zooms back. */\n font-size: 1rem;\n color: var(--color-ink);\n outline: none;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport { useAnchoredPanel } from '../composables/use-anchored-panel'\nimport { FOCUSABLE } from '../utils/focusable'\n\n/**\n * A panel of anything — a form, a picker, a few settings — anchored to the\n * control that opened it.\n *\n * Not a menu and not a modal. A menu is a list of actions and moves with the\n * arrow keys; a modal takes the whole page. A popover is a small non-modal\n * dialog: focus moves into it on open and back to the trigger on Escape, a\n * click outside or a Tab out of it closes it, and the page behind stays\n * usable.\n *\n * The trigger is yours. The `trigger` slot hands you the attributes and the\n * click handler to bind on whatever you render — usually a `BaseButton` —\n * instead of wrapping it in a button of the kit's, which would nest one\n * button inside another.\n *\n * It opens below the trigger and flips above when there is no room below,\n * and slides sideways rather than off the edge of the screen.\n */\nconst {\n label,\n side = 'bottom',\n align = 'start',\n} = defineProps<{\n /** The panel's accessible name — what a screen reader announces on open. */\n label: string\n /** Where it prefers to open. It flips when there is no room there. */\n side?: 'bottom' | 'top' | undefined\n /** Which edge of the trigger the panel lines up with. */\n align?: 'start' | 'center' | 'end' | undefined\n}>()\n\nexport interface PopoverTriggerProps {\n 'aria-expanded': boolean\n 'aria-controls': string\n 'aria-haspopup': 'dialog'\n 'data-rk-popover-trigger': ''\n onClick: () => void\n}\n\ndefineSlots<{\n /** The control that opens it. Bind `props` on it: `v-bind=\"props\"`. */\n trigger: (props: { open: boolean; props: PopoverTriggerProps }) => unknown\n /** The panel's content. `close` for a Done or Apply button inside it. */\n default: (props: { close: () => void }) => unknown\n}>()\n\n/** Open or closed, with `v-model`. Optional: it manages itself. */\nconst open = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst root = ref<HTMLElement | null>(null)\nconst panel = ref<HTMLElement | null>(null)\n\nconst { placed, shift } = useAnchoredPanel({ root, panel, open, side })\n\nconst triggerProps = computed<PopoverTriggerProps>(() => ({\n 'aria-expanded': open.value,\n 'aria-controls': id,\n 'aria-haspopup': 'dialog',\n 'data-rk-popover-trigger': '',\n onClick: () => (open.value = !open.value),\n}))\n\nfunction close() {\n open.value = false\n}\n\nfunction trigger(): HTMLElement | null {\n return root.value?.querySelector<HTMLElement>('[data-rk-popover-trigger]') ?? null\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n if (event.key !== 'Escape' || !open.value) return\n\n event.preventDefault()\n close()\n trigger()?.focus()\n}\n\n/* Tab out of it, and it closes — it is not a trap. Focus that moved to\n nowhere (a click on empty page) is left to the pointer handler. */\nfunction onFocusout(event: FocusEvent) {\n const next = event.relatedTarget as Node | null\n if (next && root.value && !root.value.contains(next)) close()\n}\n\nfunction onDocumentPointer(event: Event) {\n if (root.value && !root.value.contains(event.target as Node)) close()\n}\n\nwatch(\n open,\n async (isOpen) => {\n if (typeof document === 'undefined') return\n\n if (!isOpen) {\n document.removeEventListener('pointerdown', onDocumentPointer)\n return\n }\n\n document.addEventListener('pointerdown', onDocumentPointer)\n await nextTick()\n const first = panel.value?.querySelector<HTMLElement>(FOCUSABLE)\n ;(first ?? panel.value)?.focus()\n },\n { immediate: true },\n)\n\nonBeforeUnmount(() => {\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointerdown', onDocumentPointer)\n }\n})\n</script>\n\n<template>\n <div ref=\"root\" class=\"rk-popover\" @keydown=\"onKeydown\" @focusout=\"onFocusout\">\n <slot name=\"trigger\" :open=\"open\" :props=\"triggerProps\" />\n\n <Transition name=\"rk-popover\">\n <div\n v-if=\"open\"\n :id=\"id\"\n ref=\"panel\"\n class=\"rk-popover-panel surface-overlay\"\n :class=\"[`is-${placed}`, `is-${align}`]\"\n :style=\"shift ? { '--rk-popover-shift': `${shift}px` } : undefined\"\n role=\"dialog\"\n :aria-label=\"label\"\n tabindex=\"-1\"\n >\n <slot :close=\"close\" />\n </div>\n </Transition>\n </div>\n</template>\n\n<style scoped>\n.rk-popover {\n position: relative;\n display: inline-flex;\n}\n\n.rk-popover-panel {\n position: absolute;\n z-index: 50;\n min-width: 14rem;\n max-width: min(24rem, calc(100vw - 1rem));\n border-radius: var(--radius-card);\n padding: 0.75rem;\n translate: var(--rk-popover-shift, 0) 0;\n}\n\n.rk-popover-panel:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-popover-panel.is-bottom {\n top: calc(100% + 0.5rem);\n}\n\n.rk-popover-panel.is-top {\n bottom: calc(100% + 0.5rem);\n}\n\n.rk-popover-panel.is-start {\n inset-inline-start: 0;\n}\n\n.rk-popover-panel.is-end {\n inset-inline-end: 0;\n}\n\n.rk-popover-panel.is-center {\n left: 50%;\n translate: calc(-50% + var(--rk-popover-shift, 0px)) 0;\n}\n\n.rk-popover-enter-active,\n.rk-popover-leave-active {\n transition:\n opacity var(--duration-fast) var(--ease-standard),\n transform var(--duration-fast) var(--ease-standard);\n}\n\n.rk-popover-enter-from,\n.rk-popover-leave-to {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n}\n\n.rk-popover-panel.is-top.rk-popover-enter-from,\n.rk-popover-panel.is-top.rk-popover-leave-to {\n transform: translateY(4px) scale(0.98);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport { useAnchoredPanel } from '../composables/use-anchored-panel'\nimport { FOCUSABLE } from '../utils/focusable'\n\n/**\n * A panel of anything — a form, a picker, a few settings — anchored to the\n * control that opened it.\n *\n * Not a menu and not a modal. A menu is a list of actions and moves with the\n * arrow keys; a modal takes the whole page. A popover is a small non-modal\n * dialog: focus moves into it on open and back to the trigger on Escape, a\n * click outside or a Tab out of it closes it, and the page behind stays\n * usable.\n *\n * The trigger is yours. The `trigger` slot hands you the attributes and the\n * click handler to bind on whatever you render — usually a `BaseButton` —\n * instead of wrapping it in a button of the kit's, which would nest one\n * button inside another.\n *\n * It opens below the trigger and flips above when there is no room below,\n * and slides sideways rather than off the edge of the screen.\n */\nconst {\n label,\n side = 'bottom',\n align = 'start',\n} = defineProps<{\n /** The panel's accessible name — what a screen reader announces on open. */\n label: string\n /** Where it prefers to open. It flips when there is no room there. */\n side?: 'bottom' | 'top' | undefined\n /** Which edge of the trigger the panel lines up with. */\n align?: 'start' | 'center' | 'end' | undefined\n}>()\n\nexport interface PopoverTriggerProps {\n 'aria-expanded': boolean\n 'aria-controls': string\n 'aria-haspopup': 'dialog'\n 'data-rk-popover-trigger': ''\n onClick: () => void\n}\n\ndefineSlots<{\n /** The control that opens it. Bind `props` on it: `v-bind=\"props\"`. */\n trigger: (props: { open: boolean; props: PopoverTriggerProps }) => unknown\n /** The panel's content. `close` for a Done or Apply button inside it. */\n default: (props: { close: () => void }) => unknown\n}>()\n\n/** Open or closed, with `v-model`. Optional: it manages itself. */\nconst open = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst root = ref<HTMLElement | null>(null)\nconst panel = ref<HTMLElement | null>(null)\n\nconst { placed, shift } = useAnchoredPanel({ root, panel, open, side })\n\nconst triggerProps = computed<PopoverTriggerProps>(() => ({\n 'aria-expanded': open.value,\n 'aria-controls': id,\n 'aria-haspopup': 'dialog',\n 'data-rk-popover-trigger': '',\n onClick: () => (open.value = !open.value),\n}))\n\nfunction close() {\n open.value = false\n}\n\nfunction trigger(): HTMLElement | null {\n return root.value?.querySelector<HTMLElement>('[data-rk-popover-trigger]') ?? null\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n if (event.key !== 'Escape' || !open.value) return\n\n event.preventDefault()\n close()\n trigger()?.focus()\n}\n\n/* Tab out of it, and it closes — it is not a trap. Focus that moved to\n nowhere (a click on empty page) is left to the pointer handler. */\nfunction onFocusout(event: FocusEvent) {\n const next = event.relatedTarget as Node | null\n if (next && root.value && !root.value.contains(next)) close()\n}\n\nfunction onDocumentPointer(event: Event) {\n if (root.value && !root.value.contains(event.target as Node)) close()\n}\n\nwatch(\n open,\n async (isOpen) => {\n if (typeof document === 'undefined') return\n\n if (!isOpen) {\n document.removeEventListener('pointerdown', onDocumentPointer)\n return\n }\n\n document.addEventListener('pointerdown', onDocumentPointer)\n await nextTick()\n const first = panel.value?.querySelector<HTMLElement>(FOCUSABLE)\n ;(first ?? panel.value)?.focus()\n },\n { immediate: true },\n)\n\nonBeforeUnmount(() => {\n if (typeof document !== 'undefined') {\n document.removeEventListener('pointerdown', onDocumentPointer)\n }\n})\n</script>\n\n<template>\n <div ref=\"root\" class=\"rk-popover\" @keydown=\"onKeydown\" @focusout=\"onFocusout\">\n <slot name=\"trigger\" :open=\"open\" :props=\"triggerProps\" />\n\n <Transition name=\"rk-popover\">\n <div\n v-if=\"open\"\n :id=\"id\"\n ref=\"panel\"\n class=\"rk-popover-panel surface-overlay\"\n :class=\"[`is-${placed}`, `is-${align}`]\"\n :style=\"shift ? { '--rk-popover-shift': `${shift}px` } : undefined\"\n role=\"dialog\"\n :aria-label=\"label\"\n tabindex=\"-1\"\n >\n <slot :close=\"close\" />\n </div>\n </Transition>\n </div>\n</template>\n\n<style scoped>\n.rk-popover {\n position: relative;\n display: inline-flex;\n}\n\n.rk-popover-panel {\n position: absolute;\n z-index: 50;\n min-width: 14rem;\n max-width: min(24rem, calc(100vw - 1rem));\n border-radius: var(--radius-card);\n padding: 0.75rem;\n translate: var(--rk-popover-shift, 0) 0;\n}\n\n.rk-popover-panel:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.rk-popover-panel.is-bottom {\n top: calc(100% + 0.5rem);\n}\n\n.rk-popover-panel.is-top {\n bottom: calc(100% + 0.5rem);\n}\n\n.rk-popover-panel.is-start {\n inset-inline-start: 0;\n}\n\n.rk-popover-panel.is-end {\n inset-inline-end: 0;\n}\n\n.rk-popover-panel.is-center {\n left: 50%;\n translate: calc(-50% + var(--rk-popover-shift, 0px)) 0;\n}\n\n.rk-popover-enter-active,\n.rk-popover-leave-active {\n transition:\n opacity var(--duration-fast) var(--ease-standard),\n transform var(--duration-fast) var(--ease-standard);\n}\n\n.rk-popover-enter-from,\n.rk-popover-leave-to {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n}\n\n.rk-popover-panel.is-top.rk-popover-enter-from,\n.rk-popover-panel.is-top.rk-popover-leave-to {\n transform: translateY(4px) scale(0.98);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Clock } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nimport BaseListbox from './BaseListbox.vue'\nimport BasePopover from './BasePopover.vue'\nimport FormField from './FormField.vue'\nimport { formatDate } from '../utils/format'\n\n/**\n * A time of day, chosen from two columns.\n *\n * The value is `HH:mm` on a 24-hour clock, the same way dates are\n * `YYYY-MM-DD`: one shape in and out, whatever the reader's locale does on\n * screen. What they see is `Intl` — \"14:30\" in Istanbul and \"2:30 PM\" in\n * Chicago — and neither of those is what the app stores.\n *\n * Two listboxes rather than a text field, for the reason the date picker is\n * a button: a typed time is a parsing problem in every locale at once, and\n * the two columns are one Tab stop each with the arrows inside them.\n */\nconst {\n label,\n hoursLabel,\n minutesLabel,\n placeholder = '',\n step = 15,\n min = undefined,\n max = undefined,\n error = '',\n hint = '',\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n /** The hour column's accessible name, e.g. \"Hour\". */\n hoursLabel: string\n /** The minute column's accessible name. */\n minutesLabel: string\n /** What the field shows while nothing is chosen. */\n placeholder?: string | undefined\n /** Minutes between the choices in the second column. */\n step?: number | undefined\n /** The earliest time that can be chosen, as `HH:mm`. */\n min?: string | undefined\n max?: string | undefined\n error?: string | undefined\n hint?: string | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/** The time as `HH:mm`, with `v-model`. */\nconst model = defineModel<string | undefined>()\n\nconst open = ref(false)\n\nconst pad = (value: number) => String(value).padStart(2, '0')\n\n/** A real date, only so `Intl` can say the time in the reader's own clock. */\nconst asDate = (time: string) => {\n const [hour = '0', minute = '0'] = time.split(':')\n return new Date(2000, 0, 1, Number(hour), Number(minute))\n}\n\nconst shown = computed(() =>\n model.value === undefined\n ? ''\n : formatDate(asDate(model.value), { hour: '2-digit', minute: '2-digit' }),\n)\n\nconst inRange = (time: string) => {\n if (min !== undefined && time < min) return false\n if (max !== undefined && time > max) return false\n return true\n}\n\nconst chosenHour = computed(() => model.value?.split(':')[0] ?? '')\nconst chosenMinute = computed(() => model.value?.split(':')[1] ?? '')\n\nconst hours = computed(() =>\n Array.from({ length: 24 }, (_, index) => {\n const value = pad(index)\n // An hour is offered when any minute in it can be chosen.\n const usable = minutes.value.some((one) => inRange(`${value}:${one.value}`))\n\n return {\n value,\n // The hour alone: the minutes are the column beside it. In a 12-hour\n // locale this is \"2 PM\", in a 24-hour one \"14\".\n label: formatDate(asDate(`${value}:00`), { hour: 'numeric' }),\n disabled: !usable,\n }\n }),\n)\n\nconst minutes = computed(() =>\n Array.from({ length: Math.ceil(60 / step) }, (_, index) => {\n const value = pad(index * step)\n\n return {\n value,\n label: value,\n disabled: chosenHour.value !== '' && !inRange(`${chosenHour.value}:${value}`),\n }\n }),\n)\n\nfunction pickHour(next: string | undefined) {\n if (next === undefined) return\n model.value = `${next}:${chosenMinute.value || pad(0)}`\n}\n\nfunction pickMinute(next: string | undefined) {\n if (next === undefined) return\n model.value = `${chosenHour.value || pad(0)}:${next}`\n open.value = false\n}\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <BasePopover v-model=\"open\" class=\"rk-time\" :label=\"label\">\n <template #trigger=\"{ props }\">\n <button\n :id=\"id\"\n type=\"button\"\n class=\"rk-time-field control focus-ring\"\n :class=\"{ 'is-invalid': invalid, 'is-empty': !shown }\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n v-bind=\"props\"\n >\n <Clock class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ shown || placeholder }}</span>\n </button>\n </template>\n\n <div class=\"rk-time-columns\">\n <BaseListbox\n :model-value=\"chosenHour\"\n :options=\"hours\"\n :label=\"hoursLabel\"\n height=\"12rem\"\n @update:model-value=\"pickHour\"\n />\n <BaseListbox\n :model-value=\"chosenMinute\"\n :options=\"minutes\"\n :label=\"minutesLabel\"\n height=\"12rem\"\n @update:model-value=\"pickMinute\"\n />\n </div>\n </BasePopover>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-time {\n display: block;\n}\n\n.rk-time-field {\n display: flex;\n width: 100%;\n height: 2.75rem;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0 0.75rem;\n text-align: start;\n font-size: 1rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n}\n\n.rk-time-field.is-empty {\n color: var(--color-ink-soft);\n}\n\n.rk-time-field.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-time-field:disabled {\n opacity: 0.5;\n}\n\n.rk-time-columns {\n display: grid;\n grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);\n gap: 0.5rem;\n width: 14rem;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Clock } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nimport BaseListbox from './BaseListbox.vue'\nimport BasePopover from './BasePopover.vue'\nimport FormField from './FormField.vue'\nimport { formatDate } from '../utils/format'\n\n/**\n * A time of day, chosen from two columns.\n *\n * The value is `HH:mm` on a 24-hour clock, the same way dates are\n * `YYYY-MM-DD`: one shape in and out, whatever the reader's locale does on\n * screen. What they see is `Intl` — \"14:30\" in Istanbul and \"2:30 PM\" in\n * Chicago — and neither of those is what the app stores.\n *\n * Two listboxes rather than a text field, for the reason the date picker is\n * a button: a typed time is a parsing problem in every locale at once, and\n * the two columns are one Tab stop each with the arrows inside them.\n */\nconst {\n label,\n hoursLabel,\n minutesLabel,\n placeholder = '',\n step = 15,\n min = undefined,\n max = undefined,\n error = '',\n hint = '',\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n /** The hour column's accessible name, e.g. \"Hour\". */\n hoursLabel: string\n /** The minute column's accessible name. */\n minutesLabel: string\n /** What the field shows while nothing is chosen. */\n placeholder?: string | undefined\n /** Minutes between the choices in the second column. */\n step?: number | undefined\n /** The earliest time that can be chosen, as `HH:mm`. */\n min?: string | undefined\n max?: string | undefined\n error?: string | undefined\n hint?: string | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/** The time as `HH:mm`, with `v-model`. */\nconst model = defineModel<string | undefined>()\n\nconst open = ref(false)\n\nconst pad = (value: number) => String(value).padStart(2, '0')\n\n/** A real date, only so `Intl` can say the time in the reader's own clock. */\nconst asDate = (time: string) => {\n const [hour = '0', minute = '0'] = time.split(':')\n return new Date(2000, 0, 1, Number(hour), Number(minute))\n}\n\nconst shown = computed(() =>\n model.value === undefined\n ? ''\n : formatDate(asDate(model.value), { hour: '2-digit', minute: '2-digit' }),\n)\n\nconst inRange = (time: string) => {\n if (min !== undefined && time < min) return false\n if (max !== undefined && time > max) return false\n return true\n}\n\nconst chosenHour = computed(() => model.value?.split(':')[0] ?? '')\nconst chosenMinute = computed(() => model.value?.split(':')[1] ?? '')\n\nconst hours = computed(() =>\n Array.from({ length: 24 }, (_, index) => {\n const value = pad(index)\n // An hour is offered when any minute in it can be chosen.\n const usable = minutes.value.some((one) => inRange(`${value}:${one.value}`))\n\n return {\n value,\n // The hour alone: the minutes are the column beside it. In a 12-hour\n // locale this is \"2 PM\", in a 24-hour one \"14\".\n label: formatDate(asDate(`${value}:00`), { hour: 'numeric' }),\n disabled: !usable,\n }\n }),\n)\n\nconst minutes = computed(() =>\n Array.from({ length: Math.ceil(60 / step) }, (_, index) => {\n const value = pad(index * step)\n\n return {\n value,\n label: value,\n disabled: chosenHour.value !== '' && !inRange(`${chosenHour.value}:${value}`),\n }\n }),\n)\n\nfunction pickHour(next: string | undefined) {\n if (next === undefined) return\n model.value = `${next}:${chosenMinute.value || pad(0)}`\n}\n\nfunction pickMinute(next: string | undefined) {\n if (next === undefined) return\n model.value = `${chosenHour.value || pad(0)}:${next}`\n open.value = false\n}\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <BasePopover v-model=\"open\" class=\"rk-time\" :label=\"label\">\n <template #trigger=\"{ props }\">\n <button\n :id=\"id\"\n type=\"button\"\n class=\"rk-time-field control focus-ring\"\n :class=\"{ 'is-invalid': invalid, 'is-empty': !shown }\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n v-bind=\"props\"\n >\n <Clock class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ shown || placeholder }}</span>\n </button>\n </template>\n\n <div class=\"rk-time-columns\">\n <BaseListbox\n :model-value=\"chosenHour\"\n :options=\"hours\"\n :label=\"hoursLabel\"\n height=\"12rem\"\n @update:model-value=\"pickHour\"\n />\n <BaseListbox\n :model-value=\"chosenMinute\"\n :options=\"minutes\"\n :label=\"minutesLabel\"\n height=\"12rem\"\n @update:model-value=\"pickMinute\"\n />\n </div>\n </BasePopover>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-time {\n display: block;\n}\n\n.rk-time-field {\n display: flex;\n width: 100%;\n height: 2.75rem;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0 0.75rem;\n text-align: start;\n font-size: 1rem;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n}\n\n.rk-time-field.is-empty {\n color: var(--color-ink-soft);\n}\n\n.rk-time-field.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-time-field:disabled {\n opacity: 0.5;\n}\n\n.rk-time-columns {\n display: grid;\n grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);\n gap: 0.5rem;\n width: 14rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends TimelineEvent\">\nimport type { Component } from 'vue'\n\nexport interface TimelineEvent {\n /** Identity, and the name of this event's own body slot. */\n key: string\n /**\n * When it happened, **already formatted for the active locale**.\n *\n * A string rather than a date key, because only the app knows whether this\n * line should read \"12 September\", \"2 hours ago\" or \"09:42\" — and\n * `formatDate` is right there for the first of those.\n */\n time: string\n /** Already translated. Omit when the body says it. */\n title?: string | undefined\n /** A line under the title. Already translated. */\n description?: string | undefined\n /**\n * Background utility for the marker, e.g. `bg-positive`.\n *\n * A class rather than a category, the same contract as `ToneDot`: an app\n * keys it off whatever its own domain calls a kind — habit types, order\n * states, priorities — without this component knowing about any of them.\n */\n fill?: string | undefined\n /** Drawn inside the marker instead of a plain dot. */\n icon?: Component | undefined\n}\n\n/**\n * What happened, in order, on a rail.\n *\n * ## `Timeline` or `BaseStepper`\n *\n * A stepper is a process you are *in*: it has a current step, steps ahead\n * that have not happened, and — when it is interactive — steps behind you\n * can go back to. A timeline is a record of what already happened. It is\n * not a control, nothing in it is pressable unless the app puts a control\n * in the body, and there is no \"next\".\n *\n * Reaching for the wrong one shows: a stepper drawn from history implies\n * the reader can move through it, and a timeline drawn for a checkout\n * leaves them with no idea where they are.\n *\n * ## The rail is decoration\n *\n * The line and the dots are `aria-hidden`. What carries the meaning is that\n * this is an ordered list — `<ol>`, so a screen reader says \"list, 5 items\"\n * and numbers them — with each event's time read before its title. A rail\n * drawn with divs says nothing at all, which is what every hand-written one\n * does.\n *\n * The order is the app's. Newest first suits a note feed, because that is\n * the one somebody came back to read; oldest first suits a status trail.\n * The kit sorts nothing.\n *\n * ## The events are yours\n *\n * This is generic over whatever objects you pass, the way `BaseTable` is\n * generic over its rows: add your own fields and the slots hand them back\n * typed. That is what the body is for — a note, a card, a quote — and it\n * saves mapping your data into a shape that then has to be looked up again\n * by key.\n */\nconst { events, label } = defineProps<{\n events: readonly T[]\n /** Names the list. Already translated. */\n label: string\n}>()\n\ndefineSlots<{\n /** The body of every event — a note, a card, a quote. */\n default?: (props: { event: T }) => unknown\n /** The body of one event, named for its key. Wins over `default`. */\n [key: string]: ((props: { event: T }) => unknown) | undefined\n /** The marker for every event, when a dot is not enough. */\n marker?: (props: { event: T }) => unknown\n}>()\n</script>\n\n<template>\n <ol class=\"rk-timeline\" :aria-label=\"label\">\n <!-- One line behind the whole list rather than a segment per row: a\n segment per row leaves a hairline gap at every join. -->\n <span class=\"rk-timeline-rail\" aria-hidden=\"true\" />\n\n <li v-for=\"event in events\" :key=\"event.key\" class=\"rk-timeline-event\">\n <span class=\"rk-timeline-marker\" aria-hidden=\"true\">\n <slot name=\"marker\" :event=\"event\">\n <span class=\"rk-timeline-dot\" :class=\"event.fill ?? 'bg-primary'\">\n <component :is=\"event.icon\" v-if=\"event.icon\" class=\"size-3\" />\n </span>\n </slot>\n </span>\n\n <p class=\"rk-timeline-time\">{{ event.time }}</p>\n <p v-if=\"event.title\" class=\"rk-timeline-title\">{{ event.title }}</p>\n <p v-if=\"event.description\" class=\"rk-timeline-description\">{{ event.description }}</p>\n\n <!-- Its own slot if it has one, the shared body if not: a feed has\n one shape for every row, and one odd row should not cost a slot\n per row. -->\n <div v-if=\"$slots[event.key] || $slots.default\" class=\"rk-timeline-body\">\n <slot v-if=\"$slots[event.key]\" :name=\"event.key\" :event=\"event\" />\n <slot v-else :event=\"event\" />\n </div>\n </li>\n </ol>\n</template>\n\n<style scoped>\n.rk-timeline {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding-inline-start: 1.5rem;\n}\n\n/* Stops short of both ends: a line running past the first and last dots\n reads as a sequence that continues out of view. */\n.rk-timeline-rail {\n position: absolute;\n top: 0.5rem;\n bottom: 0.75rem;\n inset-inline-start: 0.25rem;\n width: 1px;\n background: var(--color-hair);\n}\n\n.rk-timeline-event {\n position: relative;\n}\n\n.rk-timeline-marker {\n position: absolute;\n top: 0.125rem;\n inset-inline-start: -1.5rem;\n display: grid;\n place-items: center;\n}\n\n/* The ring is the page's own ground, so the dot sits on the rail rather\n than being crossed by it. */\n.rk-timeline-dot {\n display: grid;\n width: 0.625rem;\n height: 0.625rem;\n place-items: center;\n border-radius: 9999px;\n border: 2px solid var(--color-canvas);\n color: var(--color-on-primary);\n}\n\n.rk-timeline-time {\n font-size: 0.75rem;\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink-soft);\n}\n\n.rk-timeline-title {\n margin-top: 0.125rem;\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-ink);\n}\n\n.rk-timeline-description {\n margin-top: 0.125rem;\n font-size: 0.875rem;\n line-height: 1.5;\n color: var(--color-ink-soft);\n}\n\n.rk-timeline-body {\n margin-top: 0.5rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T extends TimelineEvent\">\nimport type { Component } from 'vue'\n\nexport interface TimelineEvent {\n /** Identity, and the name of this event's own body slot. */\n key: string\n /**\n * When it happened, **already formatted for the active locale**.\n *\n * A string rather than a date key, because only the app knows whether this\n * line should read \"12 September\", \"2 hours ago\" or \"09:42\" — and\n * `formatDate` is right there for the first of those.\n */\n time: string\n /** Already translated. Omit when the body says it. */\n title?: string | undefined\n /** A line under the title. Already translated. */\n description?: string | undefined\n /**\n * Background utility for the marker, e.g. `bg-positive`.\n *\n * A class rather than a category, the same contract as `ToneDot`: an app\n * keys it off whatever its own domain calls a kind — habit types, order\n * states, priorities — without this component knowing about any of them.\n */\n fill?: string | undefined\n /** Drawn inside the marker instead of a plain dot. */\n icon?: Component | undefined\n}\n\n/**\n * What happened, in order, on a rail.\n *\n * ## `Timeline` or `BaseStepper`\n *\n * A stepper is a process you are *in*: it has a current step, steps ahead\n * that have not happened, and — when it is interactive — steps behind you\n * can go back to. A timeline is a record of what already happened. It is\n * not a control, nothing in it is pressable unless the app puts a control\n * in the body, and there is no \"next\".\n *\n * Reaching for the wrong one shows: a stepper drawn from history implies\n * the reader can move through it, and a timeline drawn for a checkout\n * leaves them with no idea where they are.\n *\n * ## The rail is decoration\n *\n * The line and the dots are `aria-hidden`. What carries the meaning is that\n * this is an ordered list — `<ol>`, so a screen reader says \"list, 5 items\"\n * and numbers them — with each event's time read before its title. A rail\n * drawn with divs says nothing at all, which is what every hand-written one\n * does.\n *\n * The order is the app's. Newest first suits a note feed, because that is\n * the one somebody came back to read; oldest first suits a status trail.\n * The kit sorts nothing.\n *\n * ## The events are yours\n *\n * This is generic over whatever objects you pass, the way `BaseTable` is\n * generic over its rows: add your own fields and the slots hand them back\n * typed. That is what the body is for — a note, a card, a quote — and it\n * saves mapping your data into a shape that then has to be looked up again\n * by key.\n */\nconst { events, label } = defineProps<{\n events: readonly T[]\n /** Names the list. Already translated. */\n label: string\n}>()\n\ndefineSlots<{\n /** The body of every event — a note, a card, a quote. */\n default?: (props: { event: T }) => unknown\n /** The body of one event, named for its key. Wins over `default`. */\n [key: string]: ((props: { event: T }) => unknown) | undefined\n /** The marker for every event, when a dot is not enough. */\n marker?: (props: { event: T }) => unknown\n}>()\n</script>\n\n<template>\n <ol class=\"rk-timeline\" :aria-label=\"label\">\n <!-- One line behind the whole list rather than a segment per row: a\n segment per row leaves a hairline gap at every join. -->\n <span class=\"rk-timeline-rail\" aria-hidden=\"true\" />\n\n <li v-for=\"event in events\" :key=\"event.key\" class=\"rk-timeline-event\">\n <span class=\"rk-timeline-marker\" aria-hidden=\"true\">\n <slot name=\"marker\" :event=\"event\">\n <span class=\"rk-timeline-dot\" :class=\"event.fill ?? 'bg-primary'\">\n <component :is=\"event.icon\" v-if=\"event.icon\" class=\"size-3\" />\n </span>\n </slot>\n </span>\n\n <p class=\"rk-timeline-time\">{{ event.time }}</p>\n <p v-if=\"event.title\" class=\"rk-timeline-title\">{{ event.title }}</p>\n <p v-if=\"event.description\" class=\"rk-timeline-description\">{{ event.description }}</p>\n\n <!-- Its own slot if it has one, the shared body if not: a feed has\n one shape for every row, and one odd row should not cost a slot\n per row. -->\n <div v-if=\"$slots[event.key] || $slots.default\" class=\"rk-timeline-body\">\n <slot v-if=\"$slots[event.key]\" :name=\"event.key\" :event=\"event\" />\n <slot v-else :event=\"event\" />\n </div>\n </li>\n </ol>\n</template>\n\n<style scoped>\n.rk-timeline {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding-inline-start: 1.5rem;\n}\n\n/* Stops short of both ends: a line running past the first and last dots\n reads as a sequence that continues out of view. */\n.rk-timeline-rail {\n position: absolute;\n top: 0.5rem;\n bottom: 0.75rem;\n inset-inline-start: 0.25rem;\n width: 1px;\n background: var(--color-hair);\n}\n\n.rk-timeline-event {\n position: relative;\n}\n\n.rk-timeline-marker {\n position: absolute;\n top: 0.125rem;\n inset-inline-start: -1.5rem;\n display: grid;\n place-items: center;\n}\n\n/* The ring is the page's own ground, so the dot sits on the rail rather\n than being crossed by it. */\n.rk-timeline-dot {\n display: grid;\n width: 0.625rem;\n height: 0.625rem;\n place-items: center;\n border-radius: 9999px;\n border: 2px solid var(--color-canvas);\n color: var(--color-on-primary);\n}\n\n.rk-timeline-time {\n font-size: 0.75rem;\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink-soft);\n}\n\n.rk-timeline-title {\n margin-top: 0.125rem;\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-ink);\n}\n\n.rk-timeline-description {\n margin-top: 0.125rem;\n font-size: 0.875rem;\n line-height: 1.5;\n color: var(--color-ink-soft);\n}\n\n.rk-timeline-body {\n margin-top: 0.5rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"M extends 'single' | 'range' = 'single'\">\nimport { CalendarDays, X } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nimport BaseCalendar from './BaseCalendar.vue'\nimport type { DateRange } from './BaseCalendar.vue'\nimport BasePopover from './BasePopover.vue'\nimport FormField from './FormField.vue'\nimport { fromDateKey } from '../utils/date'\nimport type { WeekStart } from '../utils/date'\nimport { formatDate } from '../utils/format'\n\nexport interface DatePreset {\n /** Already translated: \"Last 7 days\", \"This month\". */\n label: string\n /** The days it stands for, built when it is pressed — so \"today\" is today. */\n value: () => string | DateRange\n}\n\n/**\n * A date, or a stretch of dates, chosen from a calendar in a popover.\n *\n * The field is a button rather than a text input: a typed date is a parsing\n * problem in every locale at once — \"03/04\" is two different days either\n * side of the Atlantic — and the calendar is the part people reach for\n * anyway. What it shows is `Intl` in the app's locale; what it hands back\n * is the kit's date keys.\n *\n * `presets` are the ready-made answers a report offers: last seven days,\n * this month. They are the app's words and the app's arithmetic, built when\n * pressed so that \"today\" is today.\n */\nconst {\n label,\n mode = 'single' as M,\n placeholder = '',\n format = { dateStyle: 'medium' },\n presets = undefined,\n clearLabel = undefined,\n min = undefined,\n max = undefined,\n isDisabled = undefined,\n weekStartsOn = 1,\n previousLabel,\n nextLabel,\n today = undefined,\n error = '',\n hint = '',\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n /** One day, or a stretch from one day to another. */\n mode?: M | undefined\n /** What the field shows while nothing is chosen. */\n placeholder?: string | undefined\n /** How the chosen date reads, through `Intl.DateTimeFormat`. */\n format?: Intl.DateTimeFormatOptions | undefined\n /** Ready-made answers beside the calendar: \"Last 7 days\", \"This month\". */\n presets?: readonly DatePreset[] | undefined\n /** Given, the field grows a button that empties it. Its accessible name. */\n clearLabel?: string | undefined\n min?: string | undefined\n max?: string | undefined\n isDisabled?: ((key: string) => boolean) | undefined\n weekStartsOn?: WeekStart | undefined\n /** Accessible name of the calendar's back arrow. */\n previousLabel: string\n /** Accessible name of the calendar's forward arrow. */\n nextLabel: string\n /** Which day the calendar marks as today. Given, so a demo or a test can fix it. */\n today?: string | undefined\n error?: string | undefined\n hint?: string | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/* `| undefined` outside the condition, not inside each branch: TypeScript\n can then see that `Value | undefined` is `Value`, which it cannot while\n `M` is still open. */\ntype Value = (M extends 'range' ? DateRange : string) | undefined\n\n/** The chosen day, or range, with `v-model`. */\nconst model = defineModel<Value>()\n\nconst open = ref(false)\n\nconst shown = computed(() => {\n const value = model.value\n if (value === undefined) return ''\n if (typeof value === 'string') return formatDate(fromDateKey(value), format)\n\n const start = formatDate(fromDateKey(value.start), format)\n if (value.start === value.end) return start\n\n // An en dash, not a hyphen: it is a span, and it reads as one.\n return `${start} – ${formatDate(fromDateKey(value.end), format)}`\n})\n\nfunction onPicked(next: Value | undefined) {\n model.value = next as Value\n // Single: chosen is done. Range: only once both ends are in, which is the\n // only time the calendar reports one.\n if (mode === 'single' || (next && typeof next === 'object')) open.value = false\n}\n\nfunction applyPreset(preset: DatePreset) {\n model.value = preset.value() as Value\n open.value = false\n}\n\nfunction clear() {\n model.value = undefined as Value\n open.value = false\n}\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <BasePopover v-model=\"open\" class=\"rk-date\" :label=\"label\">\n <!-- Two buttons side by side rather than one inside the other: a\n button nested in a button is not a control a browser or a screen\n reader can make sense of. -->\n <template #trigger=\"{ props }\">\n <div class=\"rk-date-wrap control\" :class=\"{ 'is-invalid': invalid }\">\n <button\n :id=\"id\"\n type=\"button\"\n class=\"rk-date-field focus-ring\"\n :class=\"{ 'is-empty': !shown }\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n v-bind=\"props\"\n >\n <CalendarDays class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ shown || placeholder }}</span>\n </button>\n\n <button\n v-if=\"clearLabel && shown\"\n type=\"button\"\n class=\"rk-date-clear focus-ring\"\n :aria-label=\"clearLabel\"\n :disabled=\"disabled\"\n @click=\"clear\"\n >\n <X class=\"size-3.5\" aria-hidden=\"true\" />\n </button>\n </div>\n </template>\n\n <div class=\"rk-date-panel\">\n <ul v-if=\"presets?.length\" class=\"rk-date-presets\">\n <li v-for=\"preset in presets\" :key=\"preset.label\">\n <button type=\"button\" class=\"rk-date-preset focus-ring\" @click=\"applyPreset(preset)\">\n {{ preset.label }}\n </button>\n </li>\n </ul>\n\n <BaseCalendar\n :model-value=\"model\"\n :mode=\"mode\"\n :min=\"min\"\n :max=\"max\"\n :is-disabled=\"isDisabled\"\n :week-starts-on=\"weekStartsOn\"\n :previous-label=\"previousLabel\"\n :next-label=\"nextLabel\"\n v-bind=\"today ? { today } : {}\"\n @update:model-value=\"onPicked\"\n />\n </div>\n </BasePopover>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-date {\n display: block;\n}\n\n/* Wider than a popover's default: a calendar and a column of presets side by\n side do not fit in 24rem, and the month title wraps in two. */\n.rk-date :deep(.rk-popover-panel) {\n max-width: min(34rem, calc(100vw - 1rem));\n}\n\n.rk-date-wrap {\n display: flex;\n width: 100%;\n height: 2.75rem;\n align-items: center;\n border-radius: var(--radius-card);\n padding-inline-end: 0.375rem;\n}\n\n.rk-date-field {\n display: flex;\n min-width: 0;\n flex: 1;\n height: 100%;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0 0.75rem;\n text-align: start;\n font-size: 1rem;\n color: var(--color-ink);\n}\n\n.rk-date-field.is-empty {\n color: var(--color-ink-soft);\n}\n\n.rk-date-wrap.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-date-field:disabled {\n opacity: 0.5;\n}\n\n.rk-date-clear {\n display: grid;\n width: 1.375rem;\n height: 1.375rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink-soft);\n}\n\n.rk-date-clear:hover {\n background: var(--color-muted);\n color: var(--color-ink);\n}\n\n.rk-date-clear:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n\n/* As wide as its contents rather than as narrow as they will go: in a flex\n panel the calendar shrinks, and a squeezed month title wraps in two. */\n.rk-date-panel {\n display: flex;\n width: max-content;\n max-width: 100%;\n gap: 0.75rem;\n}\n\n.rk-date-panel :deep(.rk-cal) {\n width: 17rem;\n}\n\n.rk-date-presets {\n display: flex;\n min-width: 8rem;\n flex-direction: column;\n gap: 2px;\n border-inline-end: 1px solid var(--surface-border-color);\n padding-inline-end: 0.75rem;\n}\n\n.rk-date-preset {\n width: 100%;\n border-radius: var(--radius-cell);\n padding: 0.375rem 0.5rem;\n text-align: start;\n font-size: 0.8125rem;\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-date-preset:hover {\n background: var(--color-muted);\n}\n\n@media (max-width: 30rem) {\n .rk-date-panel {\n flex-direction: column;\n }\n\n .rk-date-presets {\n flex-direction: row;\n flex-wrap: wrap;\n border-inline-end: 0;\n border-bottom: 1px solid var(--surface-border-color);\n padding-inline-end: 0;\n padding-bottom: 0.5rem;\n }\n\n .rk-date-preset {\n width: auto;\n }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"M extends 'single' | 'range' = 'single'\">\nimport { CalendarDays, X } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nimport BaseCalendar from './BaseCalendar.vue'\nimport type { DateRange } from './BaseCalendar.vue'\nimport BasePopover from './BasePopover.vue'\nimport FormField from './FormField.vue'\nimport { fromDateKey } from '../utils/date'\nimport type { WeekStart } from '../utils/date'\nimport { formatDate } from '../utils/format'\n\nexport interface DatePreset {\n /** Already translated: \"Last 7 days\", \"This month\". */\n label: string\n /** The days it stands for, built when it is pressed — so \"today\" is today. */\n value: () => string | DateRange\n}\n\n/**\n * A date, or a stretch of dates, chosen from a calendar in a popover.\n *\n * The field is a button rather than a text input: a typed date is a parsing\n * problem in every locale at once — \"03/04\" is two different days either\n * side of the Atlantic — and the calendar is the part people reach for\n * anyway. What it shows is `Intl` in the app's locale; what it hands back\n * is the kit's date keys.\n *\n * `presets` are the ready-made answers a report offers: last seven days,\n * this month. They are the app's words and the app's arithmetic, built when\n * pressed so that \"today\" is today.\n */\nconst {\n label,\n mode = 'single' as M,\n placeholder = '',\n format = { dateStyle: 'medium' },\n presets = undefined,\n clearLabel = undefined,\n min = undefined,\n max = undefined,\n isDisabled = undefined,\n weekStartsOn = 1,\n previousLabel,\n nextLabel,\n today = undefined,\n error = '',\n hint = '',\n size = 'md',\n labelHidden = false,\n disabled = false,\n fieldId = undefined,\n} = defineProps<{\n label: string\n /** One day, or a stretch from one day to another. */\n mode?: M | undefined\n /** What the field shows while nothing is chosen. */\n placeholder?: string | undefined\n /** How the chosen date reads, through `Intl.DateTimeFormat`. */\n format?: Intl.DateTimeFormatOptions | undefined\n /** Ready-made answers beside the calendar: \"Last 7 days\", \"This month\". */\n presets?: readonly DatePreset[] | undefined\n /** Given, the field grows a button that empties it. Its accessible name. */\n clearLabel?: string | undefined\n min?: string | undefined\n max?: string | undefined\n isDisabled?: ((key: string) => boolean) | undefined\n weekStartsOn?: WeekStart | undefined\n /** Accessible name of the calendar's back arrow. */\n previousLabel: string\n /** Accessible name of the calendar's forward arrow. */\n nextLabel: string\n /** Which day the calendar marks as today. Given, so a demo or a test can fix it. */\n today?: string | undefined\n error?: string | undefined\n hint?: string | undefined\n size?: 'sm' | 'md' | undefined\n labelHidden?: boolean | undefined\n disabled?: boolean | undefined\n /**\n * Ties the generated id to a name you choose, so `ErrorSummary` can link\n * to this field. Its links point at nothing without it, and the kit's\n * own `FormField` has taken one since 2.22.0 while the fields built on\n * it did not — which left building a form out of these and summarising\n * its errors impossible without hand-writing the control.\n */\n fieldId?: string | undefined\n}>()\n\n/* `| undefined` outside the condition, not inside each branch: TypeScript\n can then see that `Value | undefined` is `Value`, which it cannot while\n `M` is still open. */\ntype Value = (M extends 'range' ? DateRange : string) | undefined\n\n/** The chosen day, or range, with `v-model`. */\nconst model = defineModel<Value>()\n\nconst open = ref(false)\n\nconst shown = computed(() => {\n const value = model.value\n if (value === undefined) return ''\n if (typeof value === 'string') return formatDate(fromDateKey(value), format)\n\n const start = formatDate(fromDateKey(value.start), format)\n if (value.start === value.end) return start\n\n // An en dash, not a hyphen: it is a span, and it reads as one.\n return `${start} – ${formatDate(fromDateKey(value.end), format)}`\n})\n\nfunction onPicked(next: Value | undefined) {\n model.value = next as Value\n // Single: chosen is done. Range: only once both ends are in, which is the\n // only time the calendar reports one.\n if (mode === 'single' || (next && typeof next === 'object')) open.value = false\n}\n\nfunction applyPreset(preset: DatePreset) {\n model.value = preset.value() as Value\n open.value = false\n}\n\nfunction clear() {\n model.value = undefined as Value\n open.value = false\n}\n</script>\n\n<template>\n <FormField\n :field-id=\"fieldId\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :size=\"size\"\n :label-hidden=\"labelHidden\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <BasePopover v-model=\"open\" class=\"rk-date\" :label=\"label\">\n <!-- Two buttons side by side rather than one inside the other: a\n button nested in a button is not a control a browser or a screen\n reader can make sense of. -->\n <template #trigger=\"{ props }\">\n <div class=\"rk-date-wrap control\" :class=\"{ 'is-invalid': invalid }\">\n <button\n :id=\"id\"\n type=\"button\"\n class=\"rk-date-field focus-ring\"\n :class=\"{ 'is-empty': !shown }\"\n :aria-describedby=\"describedBy\"\n :disabled=\"disabled\"\n v-bind=\"props\"\n >\n <CalendarDays class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n <span class=\"truncate\">{{ shown || placeholder }}</span>\n </button>\n\n <button\n v-if=\"clearLabel && shown\"\n type=\"button\"\n class=\"rk-date-clear focus-ring\"\n :aria-label=\"clearLabel\"\n :disabled=\"disabled\"\n @click=\"clear\"\n >\n <X class=\"size-3.5\" aria-hidden=\"true\" />\n </button>\n </div>\n </template>\n\n <div class=\"rk-date-panel\">\n <ul v-if=\"presets?.length\" class=\"rk-date-presets\">\n <li v-for=\"preset in presets\" :key=\"preset.label\">\n <button type=\"button\" class=\"rk-date-preset focus-ring\" @click=\"applyPreset(preset)\">\n {{ preset.label }}\n </button>\n </li>\n </ul>\n\n <BaseCalendar\n :model-value=\"model\"\n :mode=\"mode\"\n :min=\"min\"\n :max=\"max\"\n :is-disabled=\"isDisabled\"\n :week-starts-on=\"weekStartsOn\"\n :previous-label=\"previousLabel\"\n :next-label=\"nextLabel\"\n v-bind=\"today ? { today } : {}\"\n @update:model-value=\"onPicked\"\n />\n </div>\n </BasePopover>\n </template>\n </FormField>\n</template>\n\n<style scoped>\n.rk-date {\n display: block;\n}\n\n/* Wider than a popover's default: a calendar and a column of presets side by\n side do not fit in 24rem, and the month title wraps in two. */\n.rk-date :deep(.rk-popover-panel) {\n max-width: min(34rem, calc(100vw - 1rem));\n}\n\n.rk-date-wrap {\n display: flex;\n width: 100%;\n height: 2.75rem;\n align-items: center;\n border-radius: var(--radius-card);\n padding-inline-end: 0.375rem;\n}\n\n.rk-date-field {\n display: flex;\n min-width: 0;\n flex: 1;\n height: 100%;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-card);\n padding: 0 0.75rem;\n text-align: start;\n font-size: 1rem;\n color: var(--color-ink);\n}\n\n.rk-date-field.is-empty {\n color: var(--color-ink-soft);\n}\n\n.rk-date-wrap.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-date-field:disabled {\n opacity: 0.5;\n}\n\n.rk-date-clear {\n display: grid;\n width: 1.375rem;\n height: 1.375rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n color: var(--color-ink-soft);\n}\n\n.rk-date-clear:hover {\n background: var(--color-muted);\n color: var(--color-ink);\n}\n\n.rk-date-clear:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n}\n\n/* As wide as its contents rather than as narrow as they will go: in a flex\n panel the calendar shrinks, and a squeezed month title wraps in two. */\n.rk-date-panel {\n display: flex;\n width: max-content;\n max-width: 100%;\n gap: 0.75rem;\n}\n\n.rk-date-panel :deep(.rk-cal) {\n width: 17rem;\n}\n\n.rk-date-presets {\n display: flex;\n min-width: 8rem;\n flex-direction: column;\n gap: 2px;\n border-inline-end: 1px solid var(--surface-border-color);\n padding-inline-end: 0.75rem;\n}\n\n.rk-date-preset {\n width: 100%;\n border-radius: var(--radius-cell);\n padding: 0.375rem 0.5rem;\n text-align: start;\n font-size: 0.8125rem;\n color: var(--color-ink);\n transition: background-color var(--duration-fast) var(--ease-standard);\n}\n\n.rk-date-preset:hover {\n background: var(--color-muted);\n}\n\n@media (max-width: 30rem) {\n .rk-date-panel {\n flex-direction: column;\n }\n\n .rk-date-presets {\n flex-direction: row;\n flex-wrap: wrap;\n border-inline-end: 0;\n border-bottom: 1px solid var(--surface-border-color);\n padding-inline-end: 0;\n padding-bottom: 0.5rem;\n }\n\n .rk-date-preset {\n width: auto;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport BasePopover from './BasePopover.vue'\nimport type { PopoverTriggerProps } from './BasePopover.vue'\n\n/**\n * \"Are you sure?\", asked beside the button that asked it.\n *\n * A modal for a one-word question takes the whole page away from what it is\n * about; this keeps the thing being deleted on screen and the question next\n * to it. Reach for `BaseModal` or `ResponsiveDialog` when the answer needs\n * explaining, and for a toast with an undo when it does not need asking at\n * all — an undo is kinder than a confirmation, and this component is the\n * middle of those two.\n *\n * The trigger is yours, as it is in `BasePopover`: bind `props` to whatever\n * you render.\n */\nconst {\n message,\n confirmLabel,\n cancelLabel,\n title = '',\n tone = 'danger',\n} = defineProps<{\n /** The question. Already translated. */\n message: string\n /** The button that goes ahead, e.g. \"Delete\". */\n confirmLabel: string\n /** The button that does not, e.g. \"Cancel\". */\n cancelLabel: string\n /** A heading over the question, and the panel's accessible name. */\n title?: string | undefined\n /** The confirming button's variant. */\n tone?: 'danger' | 'primary' | undefined\n}>()\n\nconst emit = defineEmits<{ confirm: []; cancel: [] }>()\n\ndefineSlots<{\n /** The control that asks. Bind `props` on it: `v-bind=\"props\"`. */\n trigger: (props: { open: boolean; props: PopoverTriggerProps }) => unknown\n}>()\n\n/** Open or closed, with `v-model`. */\nconst open = defineModel<boolean>({ default: false })\n\nfunction confirm(close: () => void) {\n close()\n emit('confirm')\n}\n\nfunction cancel(close: () => void) {\n close()\n emit('cancel')\n}\n</script>\n\n<template>\n <BasePopover v-model=\"open\" :label=\"title || message\" align=\"end\">\n <template #trigger=\"slotProps\">\n <slot name=\"trigger\" v-bind=\"slotProps\" />\n </template>\n\n <template #default=\"{ close }\">\n <div class=\"rk-confirm\">\n <p v-if=\"title\" class=\"rk-confirm-title\">{{ title }}</p>\n <p class=\"rk-confirm-message\">{{ message }}</p>\n\n <div class=\"rk-confirm-actions\">\n <BaseButton size=\"sm\" variant=\"secondary\" @click=\"cancel(close)\">\n {{ cancelLabel }}\n </BaseButton>\n <BaseButton size=\"sm\" :variant=\"tone\" @click=\"confirm(close)\">\n {{ confirmLabel }}\n </BaseButton>\n </div>\n </div>\n </template>\n </BasePopover>\n</template>\n\n<style scoped>\n.rk-confirm {\n max-width: 17rem;\n}\n\n.rk-confirm-title {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-ink);\n}\n\n.rk-confirm-message {\n margin-top: 0.125rem;\n font-size: 0.8125rem;\n line-height: 1.5;\n color: var(--color-ink-soft);\n}\n\n/* The confirming button last, where the eye and the thumb finish. */\n.rk-confirm-actions {\n margin-top: 0.75rem;\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n</style>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport BasePopover from './BasePopover.vue'\nimport type { PopoverTriggerProps } from './BasePopover.vue'\n\n/**\n * \"Are you sure?\", asked beside the button that asked it.\n *\n * A modal for a one-word question takes the whole page away from what it is\n * about; this keeps the thing being deleted on screen and the question next\n * to it. Reach for `BaseModal` or `ResponsiveDialog` when the answer needs\n * explaining, and for a toast with an undo when it does not need asking at\n * all — an undo is kinder than a confirmation, and this component is the\n * middle of those two.\n *\n * The trigger is yours, as it is in `BasePopover`: bind `props` to whatever\n * you render.\n */\nconst {\n message,\n confirmLabel,\n cancelLabel,\n title = '',\n tone = 'danger',\n} = defineProps<{\n /** The question. Already translated. */\n message: string\n /** The button that goes ahead, e.g. \"Delete\". */\n confirmLabel: string\n /** The button that does not, e.g. \"Cancel\". */\n cancelLabel: string\n /** A heading over the question, and the panel's accessible name. */\n title?: string | undefined\n /** The confirming button's variant. */\n tone?: 'danger' | 'primary' | undefined\n}>()\n\nconst emit = defineEmits<{ confirm: []; cancel: [] }>()\n\ndefineSlots<{\n /** The control that asks. Bind `props` on it: `v-bind=\"props\"`. */\n trigger: (props: { open: boolean; props: PopoverTriggerProps }) => unknown\n}>()\n\n/** Open or closed, with `v-model`. */\nconst open = defineModel<boolean>({ default: false })\n\nfunction confirm(close: () => void) {\n close()\n emit('confirm')\n}\n\nfunction cancel(close: () => void) {\n close()\n emit('cancel')\n}\n</script>\n\n<template>\n <BasePopover v-model=\"open\" :label=\"title || message\" align=\"end\">\n <template #trigger=\"slotProps\">\n <slot name=\"trigger\" v-bind=\"slotProps\" />\n </template>\n\n <template #default=\"{ close }\">\n <div class=\"rk-confirm\">\n <p v-if=\"title\" class=\"rk-confirm-title\">{{ title }}</p>\n <p class=\"rk-confirm-message\">{{ message }}</p>\n\n <div class=\"rk-confirm-actions\">\n <BaseButton size=\"sm\" variant=\"secondary\" @click=\"cancel(close)\">\n {{ cancelLabel }}\n </BaseButton>\n <BaseButton size=\"sm\" :variant=\"tone\" @click=\"confirm(close)\">\n {{ confirmLabel }}\n </BaseButton>\n </div>\n </div>\n </template>\n </BasePopover>\n</template>\n\n<style scoped>\n.rk-confirm {\n max-width: 17rem;\n}\n\n.rk-confirm-title {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--color-ink);\n}\n\n.rk-confirm-message {\n margin-top: 0.125rem;\n font-size: 0.8125rem;\n line-height: 1.5;\n color: var(--color-ink-soft);\n}\n\n/* The confirming button last, where the eye and the thumb finish. */\n.rk-confirm-actions {\n margin-top: 0.75rem;\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"V extends string, M extends 'single' | 'multiple' = 'single'\">\nimport { computed, ref } from 'vue'\nimport type { Component } from 'vue'\n\nimport { horizontalStep } from '../utils/direction'\n\n/**\n * A row of buttons that stay pressed — one at a time, or several at once.\n *\n * Next to `SegmentedControl` on purpose, and not the same thing. A segmented\n * control is a set of radios: there is always exactly one answer, and it is\n * a form value. A toggle group is pressed and unpressed buttons: in `single`\n * mode pressing the pressed one lets go (a filter that can be off), in\n * `multiple` mode any number can be down at once (bold and italic, or three\n * categories out of five).\n *\n * One Tab stop for the whole group, and the arrow keys move between the\n * buttons — the toolbar pattern, so a row of twelve does not cost twelve\n * presses of Tab to get past.\n */\nconst {\n options,\n label,\n mode = 'single' as M,\n required = false,\n size = 'md',\n} = defineProps<{\n options: readonly {\n value: V\n /** Visible text — or, with an icon and `iconOnly`, the accessible name. */\n label: string\n icon?: Component | undefined\n /** Show the icon alone. The label becomes the button's accessible name. */\n iconOnly?: boolean | undefined\n disabled?: boolean | undefined\n }[]\n /** The group's accessible name. */\n label: string\n /** `single`: at most one pressed. `multiple`: any number. */\n mode?: M | undefined\n /** In `single` mode, never let the last pressed button go. */\n required?: boolean | undefined\n size?: 'sm' | 'md' | undefined\n}>()\n\n/** The pressed value — or, in `multiple` mode, the pressed values. */\nconst model = defineModel<M extends 'multiple' ? V[] : V | undefined>()\n\nconst buttons = ref<HTMLButtonElement[]>([])\n\nconst pressed = computed(() => {\n const value = model.value\n if (Array.isArray(value)) return new Set<V>(value)\n return new Set<V>(value === undefined ? [] : [value as V])\n})\n\nfunction toggle(value: V) {\n if (mode === 'multiple') {\n const next = new Set(pressed.value)\n if (next.has(value)) next.delete(value)\n else next.add(value)\n // In the order of the options, not the order of the presses, so the\n // value reads the same however the reader got there.\n model.value = options\n .map((option) => option.value)\n .filter((v) => next.has(v)) as typeof model.value\n return\n }\n\n const isPressed = pressed.value.has(value)\n if (isPressed && required) return\n model.value = (isPressed ? undefined : value) as typeof model.value\n}\n\n/* The one button Tab lands on: the first pressed one, else the first that\n can be pressed at all. */\nconst tabStop = computed(() => {\n const enabled = options.filter((option) => !option.disabled)\n return (enabled.find((option) => pressed.value.has(option.value)) ?? enabled[0])?.value\n})\n\nfunction onKeydown(event: KeyboardEvent, index: number) {\n /* Down and up are absolute; left and right are not, and in a\n right-to-left row the left-hand button is the next one. */\n const step =\n { ArrowDown: 1, ArrowUp: -1 }[event.key] ??\n (horizontalStep(event.key, event.currentTarget as Element) || undefined)\n const enabled = buttons.value.filter((button) => !button.disabled)\n let target: HTMLButtonElement | undefined\n\n if (step !== undefined) {\n const at = enabled.indexOf(buttons.value[index]!)\n target = enabled[(at + step + enabled.length) % enabled.length]\n } else if (event.key === 'Home') target = enabled[0]\n else if (event.key === 'End') target = enabled[enabled.length - 1]\n else return\n\n event.preventDefault()\n target?.focus()\n}\n</script>\n\n<template>\n <div class=\"rk-toggles control\" :class=\"`is-${size}`\" role=\"group\" :aria-label=\"label\">\n <button\n v-for=\"(option, index) in options\"\n :key=\"option.value\"\n ref=\"buttons\"\n type=\"button\"\n class=\"rk-toggle focus-ring\"\n :aria-pressed=\"pressed.has(option.value)\"\n :aria-label=\"option.iconOnly ? option.label : undefined\"\n :disabled=\"option.disabled\"\n :tabindex=\"option.value === tabStop ? 0 : -1\"\n @click=\"toggle(option.value)\"\n @keydown=\"onKeydown($event, index)\"\n >\n <component :is=\"option.icon\" v-if=\"option.icon\" class=\"rk-toggle-icon\" aria-hidden=\"true\" />\n <span v-if=\"!option.iconOnly\">{{ option.label }}</span>\n </button>\n </div>\n</template>\n\n<style scoped>\n.rk-toggles {\n display: inline-flex;\n flex-wrap: wrap;\n gap: 2px;\n border-radius: var(--radius-card);\n padding: 3px;\n}\n\n.rk-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n min-width: 2.25rem;\n height: 2.25rem;\n border-radius: calc(var(--radius-card) - 3px);\n padding: 0 0.75rem;\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink-soft);\n transition:\n background-color var(--duration-fast) var(--ease-standard),\n color var(--duration-fast) var(--ease-standard);\n}\n\n.is-sm .rk-toggle {\n min-width: 2rem;\n height: 2rem;\n padding: 0 0.625rem;\n font-size: 0.8125rem;\n}\n\n.rk-toggle:hover:not(:disabled) {\n background: var(--color-muted);\n color: var(--color-ink);\n}\n\n.rk-toggle[aria-pressed='true'] {\n background: var(--color-primary);\n color: var(--color-on-primary);\n}\n\n.rk-toggle:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n}\n\n.rk-toggle-icon {\n width: 1rem;\n height: 1rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"V extends string, M extends 'single' | 'multiple' = 'single'\">\nimport { computed, ref } from 'vue'\nimport type { Component } from 'vue'\n\nimport { horizontalStep } from '../utils/direction'\n\n/**\n * A row of buttons that stay pressed — one at a time, or several at once.\n *\n * Next to `SegmentedControl` on purpose, and not the same thing. A segmented\n * control is a set of radios: there is always exactly one answer, and it is\n * a form value. A toggle group is pressed and unpressed buttons: in `single`\n * mode pressing the pressed one lets go (a filter that can be off), in\n * `multiple` mode any number can be down at once (bold and italic, or three\n * categories out of five).\n *\n * One Tab stop for the whole group, and the arrow keys move between the\n * buttons — the toolbar pattern, so a row of twelve does not cost twelve\n * presses of Tab to get past.\n */\nconst {\n options,\n label,\n mode = 'single' as M,\n required = false,\n size = 'md',\n} = defineProps<{\n options: readonly {\n value: V\n /** Visible text — or, with an icon and `iconOnly`, the accessible name. */\n label: string\n icon?: Component | undefined\n /** Show the icon alone. The label becomes the button's accessible name. */\n iconOnly?: boolean | undefined\n disabled?: boolean | undefined\n }[]\n /** The group's accessible name. */\n label: string\n /** `single`: at most one pressed. `multiple`: any number. */\n mode?: M | undefined\n /** In `single` mode, never let the last pressed button go. */\n required?: boolean | undefined\n size?: 'sm' | 'md' | undefined\n}>()\n\n/** The pressed value — or, in `multiple` mode, the pressed values. */\nconst model = defineModel<M extends 'multiple' ? V[] : V | undefined>()\n\nconst buttons = ref<HTMLButtonElement[]>([])\n\nconst pressed = computed(() => {\n const value = model.value\n if (Array.isArray(value)) return new Set<V>(value)\n return new Set<V>(value === undefined ? [] : [value as V])\n})\n\nfunction toggle(value: V) {\n if (mode === 'multiple') {\n const next = new Set(pressed.value)\n if (next.has(value)) next.delete(value)\n else next.add(value)\n // In the order of the options, not the order of the presses, so the\n // value reads the same however the reader got there.\n model.value = options\n .map((option) => option.value)\n .filter((v) => next.has(v)) as typeof model.value\n return\n }\n\n const isPressed = pressed.value.has(value)\n if (isPressed && required) return\n model.value = (isPressed ? undefined : value) as typeof model.value\n}\n\n/* The one button Tab lands on: the first pressed one, else the first that\n can be pressed at all. */\nconst tabStop = computed(() => {\n const enabled = options.filter((option) => !option.disabled)\n return (enabled.find((option) => pressed.value.has(option.value)) ?? enabled[0])?.value\n})\n\nfunction onKeydown(event: KeyboardEvent, index: number) {\n /* Down and up are absolute; left and right are not, and in a\n right-to-left row the left-hand button is the next one. */\n const step =\n { ArrowDown: 1, ArrowUp: -1 }[event.key] ??\n (horizontalStep(event.key, event.currentTarget as Element) || undefined)\n const enabled = buttons.value.filter((button) => !button.disabled)\n let target: HTMLButtonElement | undefined\n\n if (step !== undefined) {\n const at = enabled.indexOf(buttons.value[index]!)\n target = enabled[(at + step + enabled.length) % enabled.length]\n } else if (event.key === 'Home') target = enabled[0]\n else if (event.key === 'End') target = enabled[enabled.length - 1]\n else return\n\n event.preventDefault()\n target?.focus()\n}\n</script>\n\n<template>\n <div class=\"rk-toggles control\" :class=\"`is-${size}`\" role=\"group\" :aria-label=\"label\">\n <button\n v-for=\"(option, index) in options\"\n :key=\"option.value\"\n ref=\"buttons\"\n type=\"button\"\n class=\"rk-toggle focus-ring\"\n :aria-pressed=\"pressed.has(option.value)\"\n :aria-label=\"option.iconOnly ? option.label : undefined\"\n :disabled=\"option.disabled\"\n :tabindex=\"option.value === tabStop ? 0 : -1\"\n @click=\"toggle(option.value)\"\n @keydown=\"onKeydown($event, index)\"\n >\n <component :is=\"option.icon\" v-if=\"option.icon\" class=\"rk-toggle-icon\" aria-hidden=\"true\" />\n <span v-if=\"!option.iconOnly\">{{ option.label }}</span>\n </button>\n </div>\n</template>\n\n<style scoped>\n.rk-toggles {\n display: inline-flex;\n flex-wrap: wrap;\n gap: 2px;\n border-radius: var(--radius-card);\n padding: 3px;\n}\n\n.rk-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n min-width: 2.25rem;\n height: 2.25rem;\n border-radius: calc(var(--radius-card) - 3px);\n padding: 0 0.75rem;\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--color-ink-soft);\n transition:\n background-color var(--duration-fast) var(--ease-standard),\n color var(--duration-fast) var(--ease-standard);\n}\n\n.is-sm .rk-toggle {\n min-width: 2rem;\n height: 2rem;\n padding: 0 0.625rem;\n font-size: 0.8125rem;\n}\n\n.rk-toggle:hover:not(:disabled) {\n background: var(--color-muted);\n color: var(--color-ink);\n}\n\n.rk-toggle[aria-pressed='true'] {\n background: var(--color-primary);\n color: var(--color-on-primary);\n}\n\n.rk-toggle:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n}\n\n.rk-toggle-icon {\n width: 1rem;\n height: 1rem;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, useId } from 'vue'\n\nimport { horizontalStep } from '../utils/direction'\n\n/**\n * A short code typed one character per box — a sign-in code, a PIN.\n *\n * No `maxlength` on the boxes: iOS fills a one-time code into the first box\n * in one go, and a limit of one would cut it to its first digit.\n *\n * The boxes are a way of showing the length, not of splitting the work:\n * typing moves to the next box on its own, Backspace on an empty box goes\n * back and clears, the arrows move, and pasting \"482913\" anywhere fills all\n * six. The first box carries `autocomplete=\"one-time-code\"`, so a phone\n * offers the code from the message it just received.\n *\n * `complete` fires once when the last box is filled — the moment to submit,\n * so nobody has to find a button after typing six digits.\n */\nconst {\n length = 6,\n label,\n cellLabel,\n type = 'numeric',\n mask = false,\n error = '',\n disabled = false,\n} = defineProps<{\n /** How many characters. */\n length?: number | undefined\n /** The group's accessible name, e.g. \"Verification code\". */\n label: string\n /** Each box's accessible name, from its 1-based position: `(n, total) => \\`Digit ${n} of ${total}\\``. */\n cellLabel: (position: number, total: number) => string\n /** `numeric` takes digits and opens the number pad; `alphanumeric` takes letters too. */\n type?: 'numeric' | 'alphanumeric' | undefined\n /** Show dots instead of the characters, for a PIN. */\n mask?: boolean | undefined\n /** A message under the boxes; also marks them invalid. */\n error?: string | undefined\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ complete: [code: string] }>()\n\n/** The code so far, with `v-model`. Always shorter than or as long as `length`. */\nconst model = defineModel<string>({ default: '' })\n\nconst cells = ref<HTMLInputElement[]>([])\nconst errorId = useId()\n\nconst allowed = computed(() => (type === 'numeric' ? /[0-9]/ : /[0-9a-z]/i))\nconst chars = computed(() => Array.from({ length }, (_, i) => model.value[i] ?? ''))\n\nfunction clean(text: string) {\n return Array.from(text)\n .filter((char) => allowed.value.test(char))\n .join('')\n}\n\nfunction write(next: string) {\n const code = next.slice(0, length)\n const wasComplete = model.value.length === length\n model.value = code\n if (code.length === length && !wasComplete) emit('complete', code)\n}\n\nfunction focusCell(index: number) {\n const cell = cells.value[Math.max(0, Math.min(length - 1, index))]\n cell?.focus()\n cell?.select()\n}\n\nfunction onInput(event: Event, index: number) {\n const input = event.target as HTMLInputElement\n const typed = clean(input.value)\n\n // More than one character arrived: autofill or a paste the browser routed\n // through input. Either way it is the code, from this box on.\n if (typed.length > 1) {\n write(model.value.slice(0, index) + typed)\n focusCell(index + typed.length)\n return\n }\n\n input.value = typed\n if (!typed) return\n\n // The code has no gaps: a character typed into a box past the end lands at\n // the end, and focus follows it.\n const at = Math.min(index, model.value.length)\n write(model.value.slice(0, at) + typed + model.value.slice(at + 1))\n focusCell(at + 1)\n}\n\nfunction onPaste(event: ClipboardEvent, index: number) {\n const text = clean(event.clipboardData?.getData('text') ?? '')\n if (!text) return\n\n event.preventDefault()\n write(model.value.slice(0, index) + text)\n focusCell(index + text.length)\n}\n\nfunction onKeydown(event: KeyboardEvent, index: number) {\n if (event.key === 'Backspace') {\n event.preventDefault()\n const target = chars.value[index] ? index : index - 1\n if (target < 0) return\n write(model.value.slice(0, target) + model.value.slice(target + 1))\n focusCell(target)\n } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n event.preventDefault()\n /* The boxes are laid out the way the language runs, so in Arabic the\n box to the left of this one is the next digit. */\n focusCell(index + horizontalStep(event.key, event.currentTarget as Element))\n }\n}\n</script>\n\n<template>\n <div class=\"rk-pin\">\n <div class=\"rk-pin-cells\" role=\"group\" :aria-label=\"label\">\n <input\n v-for=\"(char, index) in chars\"\n :key=\"index\"\n ref=\"cells\"\n class=\"rk-pin-cell control focus-ring\"\n :class=\"{ 'is-invalid': error }\"\n :value=\"char\"\n :type=\"mask ? 'password' : 'text'\"\n :inputmode=\"type === 'numeric' ? 'numeric' : 'text'\"\n :autocomplete=\"index === 0 ? 'one-time-code' : 'off'\"\n :aria-label=\"cellLabel(index + 1, length)\"\n :aria-invalid=\"Boolean(error)\"\n :aria-describedby=\"error ? errorId : undefined\"\n :disabled=\"disabled\"\n @input=\"onInput($event, index)\"\n @paste=\"onPaste($event, index)\"\n @keydown=\"onKeydown($event, index)\"\n @focus=\"($event.target as HTMLInputElement).select()\"\n />\n </div>\n <p v-if=\"error\" :id=\"errorId\" class=\"rk-pin-error\" role=\"alert\">{{ error }}</p>\n </div>\n</template>\n\n<style scoped>\n.rk-pin-cells {\n display: flex;\n gap: 0.5rem;\n}\n\n.rk-pin-cell {\n width: 2.75rem;\n height: 3.25rem;\n border-radius: var(--radius-card);\n text-align: center;\n font-size: 1.375rem;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n caret-color: var(--color-primary);\n}\n\n.rk-pin-cell.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-pin-cell:disabled {\n opacity: 0.5;\n}\n\n.rk-pin-error {\n margin-top: 0.5rem;\n font-size: 0.8125rem;\n color: var(--color-negative);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, useId } from 'vue'\n\nimport { horizontalStep } from '../utils/direction'\n\n/**\n * A short code typed one character per box — a sign-in code, a PIN.\n *\n * No `maxlength` on the boxes: iOS fills a one-time code into the first box\n * in one go, and a limit of one would cut it to its first digit.\n *\n * The boxes are a way of showing the length, not of splitting the work:\n * typing moves to the next box on its own, Backspace on an empty box goes\n * back and clears, the arrows move, and pasting \"482913\" anywhere fills all\n * six. The first box carries `autocomplete=\"one-time-code\"`, so a phone\n * offers the code from the message it just received.\n *\n * `complete` fires once when the last box is filled — the moment to submit,\n * so nobody has to find a button after typing six digits.\n */\nconst {\n length = 6,\n label,\n cellLabel,\n type = 'numeric',\n mask = false,\n error = '',\n disabled = false,\n} = defineProps<{\n /** How many characters. */\n length?: number | undefined\n /** The group's accessible name, e.g. \"Verification code\". */\n label: string\n /** Each box's accessible name, from its 1-based position: `(n, total) => \\`Digit ${n} of ${total}\\``. */\n cellLabel: (position: number, total: number) => string\n /** `numeric` takes digits and opens the number pad; `alphanumeric` takes letters too. */\n type?: 'numeric' | 'alphanumeric' | undefined\n /** Show dots instead of the characters, for a PIN. */\n mask?: boolean | undefined\n /** A message under the boxes; also marks them invalid. */\n error?: string | undefined\n disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ complete: [code: string] }>()\n\n/** The code so far, with `v-model`. Always shorter than or as long as `length`. */\nconst model = defineModel<string>({ default: '' })\n\nconst cells = ref<HTMLInputElement[]>([])\nconst errorId = useId()\n\nconst allowed = computed(() => (type === 'numeric' ? /[0-9]/ : /[0-9a-z]/i))\nconst chars = computed(() => Array.from({ length }, (_, i) => model.value[i] ?? ''))\n\nfunction clean(text: string) {\n return Array.from(text)\n .filter((char) => allowed.value.test(char))\n .join('')\n}\n\nfunction write(next: string) {\n const code = next.slice(0, length)\n const wasComplete = model.value.length === length\n model.value = code\n if (code.length === length && !wasComplete) emit('complete', code)\n}\n\nfunction focusCell(index: number) {\n const cell = cells.value[Math.max(0, Math.min(length - 1, index))]\n cell?.focus()\n cell?.select()\n}\n\nfunction onInput(event: Event, index: number) {\n const input = event.target as HTMLInputElement\n const typed = clean(input.value)\n\n // More than one character arrived: autofill or a paste the browser routed\n // through input. Either way it is the code, from this box on.\n if (typed.length > 1) {\n write(model.value.slice(0, index) + typed)\n focusCell(index + typed.length)\n return\n }\n\n input.value = typed\n if (!typed) return\n\n // The code has no gaps: a character typed into a box past the end lands at\n // the end, and focus follows it.\n const at = Math.min(index, model.value.length)\n write(model.value.slice(0, at) + typed + model.value.slice(at + 1))\n focusCell(at + 1)\n}\n\nfunction onPaste(event: ClipboardEvent, index: number) {\n const text = clean(event.clipboardData?.getData('text') ?? '')\n if (!text) return\n\n event.preventDefault()\n write(model.value.slice(0, index) + text)\n focusCell(index + text.length)\n}\n\nfunction onKeydown(event: KeyboardEvent, index: number) {\n if (event.key === 'Backspace') {\n event.preventDefault()\n const target = chars.value[index] ? index : index - 1\n if (target < 0) return\n write(model.value.slice(0, target) + model.value.slice(target + 1))\n focusCell(target)\n } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n event.preventDefault()\n /* The boxes are laid out the way the language runs, so in Arabic the\n box to the left of this one is the next digit. */\n focusCell(index + horizontalStep(event.key, event.currentTarget as Element))\n }\n}\n</script>\n\n<template>\n <div class=\"rk-pin\">\n <div class=\"rk-pin-cells\" role=\"group\" :aria-label=\"label\">\n <input\n v-for=\"(char, index) in chars\"\n :key=\"index\"\n ref=\"cells\"\n class=\"rk-pin-cell control focus-ring\"\n :class=\"{ 'is-invalid': error }\"\n :value=\"char\"\n :type=\"mask ? 'password' : 'text'\"\n :inputmode=\"type === 'numeric' ? 'numeric' : 'text'\"\n :autocomplete=\"index === 0 ? 'one-time-code' : 'off'\"\n :aria-label=\"cellLabel(index + 1, length)\"\n :aria-invalid=\"Boolean(error)\"\n :aria-describedby=\"error ? errorId : undefined\"\n :disabled=\"disabled\"\n @input=\"onInput($event, index)\"\n @paste=\"onPaste($event, index)\"\n @keydown=\"onKeydown($event, index)\"\n @focus=\"($event.target as HTMLInputElement).select()\"\n />\n </div>\n <p v-if=\"error\" :id=\"errorId\" class=\"rk-pin-error\" role=\"alert\">{{ error }}</p>\n </div>\n</template>\n\n<style scoped>\n.rk-pin-cells {\n display: flex;\n gap: 0.5rem;\n}\n\n.rk-pin-cell {\n width: 2.75rem;\n height: 3.25rem;\n border-radius: var(--radius-card);\n text-align: center;\n font-size: 1.375rem;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n caret-color: var(--color-primary);\n}\n\n.rk-pin-cell.is-invalid {\n --surface-border-color: var(--color-negative);\n}\n\n.rk-pin-cell:disabled {\n opacity: 0.5;\n}\n\n.rk-pin-error {\n margin-top: 0.5rem;\n font-size: 0.8125rem;\n color: var(--color-negative);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { Eye, EyeOff } from 'lucide-vue-next'\nimport { ref, type InputHTMLAttributes } from 'vue'\n\nimport FormField from './FormField.vue'\nimport { useFieldAttrs } from '../composables/use-field-attrs'\n\ndefineOptions({ inheritAttrs: false })\n\nconst { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs()\n\n/**\n * A password field you can look at.\n *\n * The kit already ships `AuthForm` and `BaseInput type=\"password\"`, which is\n * to say it ships the field and not the one thing every app then adds to it.\n * A password is the only field in a form whose value is hidden from the\n * person typing it, on the device where typing is least reliable — and a\n * generated password pasted into a phone is unverifiable without this. WCAG\n * 3.3.8 asks that authentication not depend on a cognitive function test;\n * being unable to see what you typed is one.\n *\n * The half that breaks, three ways, and all three compile:\n *\n * - **A `<button>` with no `type`.** Inside a form, its default is `submit`,\n * so looking at the password submits the form — usually with a password\n * half typed, which then arrives as a failed sign-in attempt.\n * - **A `<span>` or a bare icon.** Not focusable, not pressable by keyboard,\n * and named nothing.\n * - **A change nobody is told about.** The characters appearing is the whole\n * feedback, and it is visual only.\n *\n * The third is answered as a toggle button — one name, `aria-pressed` for\n * the state — rather than the swapped \"Show\"/\"Hide\" name that is the more\n * common shape. Two reasons. A name that changes under a focus that has not\n * moved is not reliably re-read, which is why every implementation of the\n * swapped-name version ends up adding a live region and two more sentences\n * on top of it; a pressed state on the focused control is announced by every\n * screen reader without one. And the kit has no language of its own, so the\n * cheaper pattern is also the one that asks the app for one string instead\n * of four.\n *\n * The field is never revealed by default and reverts to hidden on nothing:\n * that is deliberate. A component that hid it again on blur would be hiding\n * it at the exact moment the reader moved to the confirmation field to check\n * it against.\n */\nconst {\n modelValue = '',\n label,\n toggleLabel,\n error = '',\n hint = '',\n labelHidden = false,\n fieldId = undefined,\n size = 'md',\n controlClass = undefined,\n} = defineProps<\n {\n /** The value, with `v-model`. */\n modelValue?: string | undefined\n label: string\n /**\n * The toggle's name, e.g. \"Show password\". It does not change: the\n * control is pressed while the password is visible, and that state is\n * what a screen reader reads out.\n */\n toggleLabel: string\n error?: string | undefined\n hint?: string | undefined\n labelHidden?: boolean | undefined\n /** The input's `id`, for an `ErrorSummary` that links to this field. */\n fieldId?: string | undefined\n size?: 'sm' | 'md' | undefined\n /* The input's own attributes — `autocomplete`, `placeholder`, `required` —\n typed for strictTemplates. Not `type`, which is this component's whole\n subject, and not `size`. */\n /**\n * Classes for the control itself, rather than for the field around it.\n *\n * `class` lands on the field, because that is where Vue puts a\n * component's class and because a layout class means \"space this field\".\n * That leaves `variant=\"unstyled\"` with no way to paint the control it\n * just stripped — the point of stripping it — which is why an app with a\n * large amount field wrote the whole thing by hand instead.\n *\n * It appends, so with the default variant a conflict is settled by\n * Tailwind's own order rather than by writing it here; reach for it with\n * `unstyled`, where there is nothing to settle.\n */\n controlClass?: string | undefined\n } & /* @vue-ignore */ Omit<InputHTMLAttributes, 'size' | 'type'>\n>()\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string]; toggle: [visible: boolean] }>()\n\nconst visible = ref(false)\n\nfunction toggle() {\n visible.value = !visible.value\n emit('toggle', visible.value)\n}\n\n/* The same 16px rule as `BaseInput`: iOS zooms the viewport for a focused\n field under it and never zooms back. */\nconst CONTROL_CLASS = 'h-11 text-base'\nconst control = ref<HTMLInputElement | null>(null)\n\n/**\n * Focus the control, for a caller that owns when it happens.\n *\n * A `ref` on a component gives the component and not the element, so without\n * this a field cannot be focused at all — which is why an app that focuses\n * its amount field when a sheet opens, and again when the amount is\n * rejected, wrote the whole field by hand instead and said so in a comment.\n * That is the gap test, with the reason already written down.\n *\n * `ErrorSummary` has exposed `focus` since it existed, for the same need\n * from the other end.\n */\nfunction focus() {\n control.value?.focus()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <FormField\n :class=\"fieldClass\"\n :style=\"fieldStyle\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :label-hidden=\"labelHidden\"\n :field-id=\"fieldId\"\n :size=\"size\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"relative\">\n <input\n :id=\"id\"\n ref=\"control\"\n :type=\"visible ? 'text' : 'password'\"\n :value=\"modelValue\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n autocapitalize=\"none\"\n :spellcheck=\"false\"\n v-bind=\"controlAttrs\"\n class=\"control text-ink rounded-card focus-visible:outline-primary w-full ps-3 pe-11 focus-visible:outline-2 focus-visible:outline-offset-1\"\n :class=\"[CONTROL_CLASS, invalid ? 'border-negative' : '', controlClass]\"\n @input=\"emit('update:modelValue', ($event.target as HTMLInputElement).value)\"\n />\n\n <button\n type=\"button\"\n class=\"focus-ring text-ink-soft hover:text-ink rounded-card absolute end-1 top-1/2 flex size-9 -translate-y-1/2 items-center justify-center\"\n :aria-label=\"toggleLabel\"\n :aria-pressed=\"visible\"\n @click=\"toggle\"\n >\n <EyeOff v-if=\"visible\" class=\"size-4\" aria-hidden=\"true\" />\n <Eye v-else class=\"size-4\" aria-hidden=\"true\" />\n </button>\n </div>\n </template>\n </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport { Eye, EyeOff } from 'lucide-vue-next'\nimport { ref, type InputHTMLAttributes } from 'vue'\n\nimport FormField from './FormField.vue'\nimport { useFieldAttrs } from '../composables/use-field-attrs'\n\ndefineOptions({ inheritAttrs: false })\n\nconst { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs()\n\n/**\n * A password field you can look at.\n *\n * The kit already ships `AuthForm` and `BaseInput type=\"password\"`, which is\n * to say it ships the field and not the one thing every app then adds to it.\n * A password is the only field in a form whose value is hidden from the\n * person typing it, on the device where typing is least reliable — and a\n * generated password pasted into a phone is unverifiable without this. WCAG\n * 3.3.8 asks that authentication not depend on a cognitive function test;\n * being unable to see what you typed is one.\n *\n * The half that breaks, three ways, and all three compile:\n *\n * - **A `<button>` with no `type`.** Inside a form, its default is `submit`,\n * so looking at the password submits the form — usually with a password\n * half typed, which then arrives as a failed sign-in attempt.\n * - **A `<span>` or a bare icon.** Not focusable, not pressable by keyboard,\n * and named nothing.\n * - **A change nobody is told about.** The characters appearing is the whole\n * feedback, and it is visual only.\n *\n * The third is answered as a toggle button — one name, `aria-pressed` for\n * the state — rather than the swapped \"Show\"/\"Hide\" name that is the more\n * common shape. Two reasons. A name that changes under a focus that has not\n * moved is not reliably re-read, which is why every implementation of the\n * swapped-name version ends up adding a live region and two more sentences\n * on top of it; a pressed state on the focused control is announced by every\n * screen reader without one. And the kit has no language of its own, so the\n * cheaper pattern is also the one that asks the app for one string instead\n * of four.\n *\n * The field is never revealed by default and reverts to hidden on nothing:\n * that is deliberate. A component that hid it again on blur would be hiding\n * it at the exact moment the reader moved to the confirmation field to check\n * it against.\n */\nconst {\n modelValue = '',\n label,\n toggleLabel,\n error = '',\n hint = '',\n labelHidden = false,\n fieldId = undefined,\n size = 'md',\n controlClass = undefined,\n} = defineProps<\n {\n /** The value, with `v-model`. */\n modelValue?: string | undefined\n label: string\n /**\n * The toggle's name, e.g. \"Show password\". It does not change: the\n * control is pressed while the password is visible, and that state is\n * what a screen reader reads out.\n */\n toggleLabel: string\n error?: string | undefined\n hint?: string | undefined\n labelHidden?: boolean | undefined\n /** The input's `id`, for an `ErrorSummary` that links to this field. */\n fieldId?: string | undefined\n size?: 'sm' | 'md' | undefined\n /* The input's own attributes — `autocomplete`, `placeholder`, `required` —\n typed for strictTemplates. Not `type`, which is this component's whole\n subject, and not `size`. */\n /**\n * Classes for the control itself, rather than for the field around it.\n *\n * `class` lands on the field, because that is where Vue puts a\n * component's class and because a layout class means \"space this field\".\n * That leaves `variant=\"unstyled\"` with no way to paint the control it\n * just stripped — the point of stripping it — which is why an app with a\n * large amount field wrote the whole thing by hand instead.\n *\n * It appends, so with the default variant a conflict is settled by\n * Tailwind's own order rather than by writing it here; reach for it with\n * `unstyled`, where there is nothing to settle.\n */\n controlClass?: string | undefined\n } & /* @vue-ignore */ Omit<InputHTMLAttributes, 'size' | 'type'>\n>()\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string]; toggle: [visible: boolean] }>()\n\nconst visible = ref(false)\n\nfunction toggle() {\n visible.value = !visible.value\n emit('toggle', visible.value)\n}\n\n/* The same 16px rule as `BaseInput`: iOS zooms the viewport for a focused\n field under it and never zooms back. */\nconst CONTROL_CLASS = 'h-11 text-base'\nconst control = ref<HTMLInputElement | null>(null)\n\n/**\n * Focus the control, for a caller that owns when it happens.\n *\n * A `ref` on a component gives the component and not the element, so without\n * this a field cannot be focused at all — which is why an app that focuses\n * its amount field when a sheet opens, and again when the amount is\n * rejected, wrote the whole field by hand instead and said so in a comment.\n * That is the gap test, with the reason already written down.\n *\n * `ErrorSummary` has exposed `focus` since it existed, for the same need\n * from the other end.\n */\nfunction focus() {\n control.value?.focus()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <FormField\n :class=\"fieldClass\"\n :style=\"fieldStyle\"\n :label=\"label\"\n :error=\"error\"\n :hint=\"hint\"\n :label-hidden=\"labelHidden\"\n :field-id=\"fieldId\"\n :size=\"size\"\n >\n <template #default=\"{ id, describedBy, invalid }\">\n <div class=\"relative\">\n <input\n :id=\"id\"\n ref=\"control\"\n :type=\"visible ? 'text' : 'password'\"\n :value=\"modelValue\"\n :aria-invalid=\"invalid\"\n :aria-describedby=\"describedBy\"\n autocapitalize=\"none\"\n :spellcheck=\"false\"\n v-bind=\"controlAttrs\"\n class=\"control text-ink rounded-card focus-visible:outline-primary w-full ps-3 pe-11 focus-visible:outline-2 focus-visible:outline-offset-1\"\n :class=\"[CONTROL_CLASS, invalid ? 'border-negative' : '', controlClass]\"\n @input=\"emit('update:modelValue', ($event.target as HTMLInputElement).value)\"\n />\n\n <button\n type=\"button\"\n class=\"focus-ring text-ink-soft hover:text-ink rounded-card absolute end-1 top-1/2 flex size-9 -translate-y-1/2 items-center justify-center\"\n :aria-label=\"toggleLabel\"\n :aria-pressed=\"visible\"\n @click=\"toggle\"\n >\n <EyeOff v-if=\"visible\" class=\"size-4\" aria-hidden=\"true\" />\n <Eye v-else class=\"size-4\" aria-hidden=\"true\" />\n </button>\n </div>\n </template>\n </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * Progress as a ring — for a small space, a card's corner, a goal.\n *\n * With a `value`, a promise about how far: the ring fills and, with\n * `showValue`, the percentage sits inside it. Without one, it says only\n * \"working\" and turns — the same distinction as `ProgressBar` and\n * `BaseSpinner`, in one shape. For a reader who asked for less motion the\n * turning ring breathes instead of spinning.\n *\n * The inside is a slot, so a ring can hold \"3/7\", an icon or nothing.\n */\nconst {\n value = undefined,\n max = 100,\n label,\n size = 'md',\n showValue = false,\n tone = 'primary',\n} = defineProps<{\n /** How far. Leave it out while there is nothing to measure. */\n value?: number | undefined\n max?: number | undefined\n /** The accessible name, e.g. \"Upload\". Required: a ring says nothing aloud on its own. */\n label: string\n size?: 'sm' | 'md' | 'lg' | undefined\n /** The rounded percentage inside the ring. */\n showValue?: boolean | undefined\n tone?: 'primary' | 'accent' | 'positive' | 'warning' | 'negative' | undefined\n}>()\n\ndefineSlots<{\n /** Inside the ring, instead of the percentage. */\n default?: () => unknown\n}>()\n\nconst RADIUS = 20\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nconst indeterminate = computed(() => value === undefined)\n\n/* Clamped like ProgressBar: a negative, an overshoot and a zero `max` all\n stay inside the ring. */\nconst portion = computed(() => {\n if (value === undefined || max <= 0) return 0\n return Math.min(1, Math.max(0, value / max))\n})\n\nconst percent = computed(() => Math.round(portion.value * 100))\nconst offset = computed(() => CIRCUMFERENCE * (1 - (indeterminate.value ? 0.28 : portion.value)))\n</script>\n\n<template>\n <div\n class=\"rk-ring\"\n :class=\"[`is-${size}`, `is-${tone}`, { 'is-indeterminate': indeterminate }]\"\n role=\"progressbar\"\n :aria-label=\"label\"\n :aria-valuenow=\"indeterminate ? undefined : percent\"\n :aria-valuemin=\"indeterminate ? undefined : 0\"\n :aria-valuemax=\"indeterminate ? undefined : 100\"\n >\n <svg viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n <circle class=\"rk-ring-track\" cx=\"24\" cy=\"24\" :r=\"RADIUS\" />\n <circle\n class=\"rk-ring-bar\"\n cx=\"24\"\n cy=\"24\"\n :r=\"RADIUS\"\n :stroke-dasharray=\"CIRCUMFERENCE\"\n :stroke-dashoffset=\"offset\"\n />\n </svg>\n <span v-if=\"$slots.default || (showValue && !indeterminate)\" class=\"rk-ring-inside\">\n <slot>{{ percent }}%</slot>\n </span>\n </div>\n</template>\n\n<style scoped>\n.rk-ring {\n position: relative;\n display: inline-grid;\n place-items: center;\n width: var(--rk-ring-size);\n height: var(--rk-ring-size);\n --rk-ring-size: 3rem;\n --rk-ring-colour: var(--color-primary);\n}\n\n.rk-ring.is-sm {\n --rk-ring-size: 1.75rem;\n}\n\n.rk-ring.is-lg {\n --rk-ring-size: 5rem;\n}\n\n.rk-ring.is-accent {\n --rk-ring-colour: var(--color-accent);\n}\n\n.rk-ring.is-positive {\n --rk-ring-colour: var(--color-positive);\n}\n\n.rk-ring.is-warning {\n --rk-ring-colour: var(--color-warning);\n}\n\n.rk-ring.is-negative {\n --rk-ring-colour: var(--color-negative);\n}\n\n.rk-ring svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n /* The ring starts at twelve o'clock, like a clock face, not at three. */\n rotate: -90deg;\n}\n\n.rk-ring-track,\n.rk-ring-bar {\n fill: none;\n stroke-width: 4;\n}\n\n.rk-ring-track {\n stroke: var(--color-muted);\n}\n\n.rk-ring-bar {\n stroke: var(--rk-ring-colour);\n stroke-linecap: round;\n transition: stroke-dashoffset var(--duration-slow) var(--ease-standard);\n}\n\n.rk-ring.is-indeterminate svg {\n animation: rk-ring-spin 0.9s linear infinite;\n}\n\n.rk-ring-inside {\n position: relative;\n font-size: calc(var(--rk-ring-size) * 0.26);\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n}\n\n@keyframes rk-ring-spin {\n from {\n rotate: -90deg;\n }\n to {\n rotate: 270deg;\n }\n}\n\n@keyframes rk-ring-breathe {\n 50% {\n opacity: 0.4;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-ring.is-indeterminate svg {\n animation: rk-ring-breathe 1.6s ease-in-out infinite;\n }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * Progress as a ring — for a small space, a card's corner, a goal.\n *\n * With a `value`, a promise about how far: the ring fills and, with\n * `showValue`, the percentage sits inside it. Without one, it says only\n * \"working\" and turns — the same distinction as `ProgressBar` and\n * `BaseSpinner`, in one shape. For a reader who asked for less motion the\n * turning ring breathes instead of spinning.\n *\n * The inside is a slot, so a ring can hold \"3/7\", an icon or nothing.\n */\nconst {\n value = undefined,\n max = 100,\n label,\n size = 'md',\n showValue = false,\n tone = 'primary',\n} = defineProps<{\n /** How far. Leave it out while there is nothing to measure. */\n value?: number | undefined\n max?: number | undefined\n /** The accessible name, e.g. \"Upload\". Required: a ring says nothing aloud on its own. */\n label: string\n size?: 'sm' | 'md' | 'lg' | undefined\n /** The rounded percentage inside the ring. */\n showValue?: boolean | undefined\n tone?: 'primary' | 'accent' | 'positive' | 'warning' | 'negative' | undefined\n}>()\n\ndefineSlots<{\n /** Inside the ring, instead of the percentage. */\n default?: () => unknown\n}>()\n\nconst RADIUS = 20\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nconst indeterminate = computed(() => value === undefined)\n\n/* Clamped like ProgressBar: a negative, an overshoot and a zero `max` all\n stay inside the ring. */\nconst portion = computed(() => {\n if (value === undefined || max <= 0) return 0\n return Math.min(1, Math.max(0, value / max))\n})\n\nconst percent = computed(() => Math.round(portion.value * 100))\nconst offset = computed(() => CIRCUMFERENCE * (1 - (indeterminate.value ? 0.28 : portion.value)))\n</script>\n\n<template>\n <div\n class=\"rk-ring\"\n :class=\"[`is-${size}`, `is-${tone}`, { 'is-indeterminate': indeterminate }]\"\n role=\"progressbar\"\n :aria-label=\"label\"\n :aria-valuenow=\"indeterminate ? undefined : percent\"\n :aria-valuemin=\"indeterminate ? undefined : 0\"\n :aria-valuemax=\"indeterminate ? undefined : 100\"\n >\n <svg viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n <circle class=\"rk-ring-track\" cx=\"24\" cy=\"24\" :r=\"RADIUS\" />\n <circle\n class=\"rk-ring-bar\"\n cx=\"24\"\n cy=\"24\"\n :r=\"RADIUS\"\n :stroke-dasharray=\"CIRCUMFERENCE\"\n :stroke-dashoffset=\"offset\"\n />\n </svg>\n <span v-if=\"$slots.default || (showValue && !indeterminate)\" class=\"rk-ring-inside\">\n <slot>{{ percent }}%</slot>\n </span>\n </div>\n</template>\n\n<style scoped>\n.rk-ring {\n position: relative;\n display: inline-grid;\n place-items: center;\n width: var(--rk-ring-size);\n height: var(--rk-ring-size);\n --rk-ring-size: 3rem;\n --rk-ring-colour: var(--color-primary);\n}\n\n.rk-ring.is-sm {\n --rk-ring-size: 1.75rem;\n}\n\n.rk-ring.is-lg {\n --rk-ring-size: 5rem;\n}\n\n.rk-ring.is-accent {\n --rk-ring-colour: var(--color-accent);\n}\n\n.rk-ring.is-positive {\n --rk-ring-colour: var(--color-positive);\n}\n\n.rk-ring.is-warning {\n --rk-ring-colour: var(--color-warning);\n}\n\n.rk-ring.is-negative {\n --rk-ring-colour: var(--color-negative);\n}\n\n.rk-ring svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n /* The ring starts at twelve o'clock, like a clock face, not at three. */\n rotate: -90deg;\n}\n\n.rk-ring-track,\n.rk-ring-bar {\n fill: none;\n stroke-width: 4;\n}\n\n.rk-ring-track {\n stroke: var(--color-muted);\n}\n\n.rk-ring-bar {\n stroke: var(--rk-ring-colour);\n stroke-linecap: round;\n transition: stroke-dashoffset var(--duration-slow) var(--ease-standard);\n}\n\n.rk-ring.is-indeterminate svg {\n animation: rk-ring-spin 0.9s linear infinite;\n}\n\n.rk-ring-inside {\n position: relative;\n font-size: calc(var(--rk-ring-size) * 0.26);\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--color-ink);\n}\n\n@keyframes rk-ring-spin {\n from {\n rotate: -90deg;\n }\n to {\n rotate: 270deg;\n }\n}\n\n@keyframes rk-ring-breathe {\n 50% {\n opacity: 0.4;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .rk-ring.is-indeterminate svg {\n animation: rk-ring-breathe 1.6s ease-in-out infinite;\n }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { Check, X } from 'lucide-vue-next'\nimport { computed } from 'vue'\n\nexport interface StepperStep<K extends string> {\n key: K\n /** Already translated. */\n label: string\n /** A line under the label: what the step asks for. */\n description?: string | undefined\n /** Marks a step that needs fixing — a form page with errors on it. */\n error?: boolean | undefined\n}\n\n/**\n * Where someone is in a process of several steps — a sign-up, a checkout, a\n * form split into pages.\n *\n * It shows the way, it does not drive it: the current step is a `v-model`,\n * and the pages and the Next and Back buttons are the app's. With\n * `interactive`, a step already done can be clicked to go back to it; steps\n * ahead never can, because skipping ahead is how a form arrives half filled.\n *\n * An ordered list, with `aria-current=\"step\"` on the step in progress, so a\n * screen reader hears \"step 2 of 4, current\" without the kit inventing a\n * sentence. The words for done and needs-fixing are the app's, passed in\n * `stateLabels`, and read only to assistive tech.\n */\nconst {\n steps,\n label,\n orientation = 'horizontal',\n interactive = false,\n stateLabels = undefined,\n} = defineProps<{\n steps: readonly StepperStep<K>[]\n /** The list's accessible name, e.g. \"Checkout\". */\n label: string\n orientation?: 'horizontal' | 'vertical' | undefined\n /** Completed steps become buttons that go back to them. */\n interactive?: boolean | undefined\n /** Read to a screen reader after a step's label: `{ complete: 'done', error: 'needs attention' }`. */\n stateLabels?: { complete: string; error: string } | undefined\n}>()\n\n/** The step in progress, by key, with `v-model`. */\nconst current = defineModel<K>({ required: true })\n\nconst currentIndex = computed(() => steps.findIndex((step) => step.key === current.value))\n\n/* Only back: a step ahead is never a way in, or a form arrives half filled. */\nconst canGoTo = (index: number) => interactive && index < currentIndex.value\n\nfunction goTo(index: number) {\n if (canGoTo(index)) current.value = steps[index]!.key\n}\n\nfunction state(index: number) {\n const step = steps[index]!\n if (step.error) return 'error'\n if (index < currentIndex.value) return 'complete'\n if (index === currentIndex.value) return 'current'\n return 'upcoming'\n}\n</script>\n\n<template>\n <nav :aria-label=\"label\">\n <ol class=\"rk-steps\" :class=\"`is-${orientation}`\">\n <li\n v-for=\"(step, index) in steps\"\n :key=\"step.key\"\n class=\"rk-step\"\n :class=\"`is-${state(index)}`\"\n :aria-current=\"index === currentIndex ? 'step' : undefined\"\n >\n <component\n :is=\"canGoTo(index) ? 'button' : 'div'\"\n :type=\"canGoTo(index) ? 'button' : undefined\"\n class=\"rk-step-body\"\n :class=\"{ 'focus-ring is-clickable': canGoTo(index) }\"\n @click=\"goTo(index)\"\n >\n <span class=\"rk-step-mark\" aria-hidden=\"true\">\n <X v-if=\"state(index) === 'error'\" class=\"size-3.5\" />\n <Check v-else-if=\"state(index) === 'complete'\" class=\"size-3.5\" />\n <template v-else>{{ index + 1 }}</template>\n </span>\n <span class=\"rk-step-text\">\n <span class=\"rk-step-label\">{{ step.label }}</span>\n <span v-if=\"step.description\" class=\"rk-step-description\">{{ step.description }}</span>\n <span\n v-if=\"stateLabels && (state(index) === 'complete' || state(index) === 'error')\"\n class=\"sr-only\"\n >\n — {{ state(index) === 'error' ? stateLabels.error : stateLabels.complete }}\n </span>\n </span>\n </component>\n </li>\n </ol>\n </nav>\n</template>\n\n<style scoped>\n.rk-steps {\n display: flex;\n gap: 0.5rem;\n}\n\n.rk-steps.is-horizontal {\n align-items: flex-start;\n}\n\n.rk-steps.is-vertical {\n flex-direction: column;\n gap: 0;\n}\n\n.rk-step {\n position: relative;\n flex: 1;\n min-width: 0;\n}\n\n/* The connecting line, drawn from each step to the next. */\n.rk-step:not(:last-child)::after {\n content: '';\n position: absolute;\n background: var(--color-hair);\n transition: background-color var(--duration-base) var(--ease-standard);\n}\n\n.is-horizontal .rk-step:not(:last-child)::after {\n top: 0.875rem;\n inset-inline-start: calc(1.75rem + 0.5rem);\n inset-inline-end: 0.5rem;\n height: 2px;\n}\n\n.is-vertical .rk-step:not(:last-child)::after {\n top: 2.125rem;\n bottom: 0.25rem;\n inset-inline-start: 0.8125rem;\n width: 2px;\n}\n\n.rk-step.is-complete::after {\n background: var(--color-primary);\n}\n\n.rk-step-body {\n display: flex;\n align-items: flex-start;\n gap: 0.625rem;\n width: 100%;\n border-radius: var(--radius-cell);\n text-align: start;\n}\n\n.is-horizontal .rk-step-body {\n flex-direction: column;\n}\n\n.is-vertical .rk-step-body {\n padding-bottom: 1.5rem;\n}\n\n.rk-step-body.is-clickable {\n cursor: pointer;\n}\n\n.rk-step-mark {\n position: relative;\n z-index: 1;\n display: grid;\n width: 1.75rem;\n height: 1.75rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n border: 2px solid var(--color-hair);\n background: var(--color-surface);\n font-size: 0.75rem;\n font-weight: 700;\n color: var(--color-ink-soft);\n transition:\n background-color var(--duration-base) var(--ease-standard),\n border-color var(--duration-base) var(--ease-standard),\n color var(--duration-base) var(--ease-standard);\n}\n\n.is-current .rk-step-mark {\n border-color: var(--color-primary);\n color: var(--color-primary);\n}\n\n.is-complete .rk-step-mark {\n border-color: var(--color-primary);\n background: var(--color-primary);\n color: var(--color-on-primary);\n}\n\n.is-error .rk-step-mark {\n border-color: var(--color-negative);\n background: var(--color-negative);\n color: var(--color-on-negative);\n}\n\n.is-clickable:hover .rk-step-mark {\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 18%, transparent);\n}\n\n.rk-step-text {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: 0.125rem;\n padding-top: 0.25rem;\n}\n\n.rk-step-label {\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--color-ink-soft);\n}\n\n.is-current .rk-step-label,\n.is-complete .rk-step-label {\n color: var(--color-ink);\n}\n\n.is-error .rk-step-label {\n color: var(--color-negative);\n}\n\n.rk-step-description {\n font-size: 0.75rem;\n line-height: 1.4;\n color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { Check, X } from 'lucide-vue-next'\nimport { computed } from 'vue'\n\nexport interface StepperStep<K extends string> {\n key: K\n /** Already translated. */\n label: string\n /** A line under the label: what the step asks for. */\n description?: string | undefined\n /** Marks a step that needs fixing — a form page with errors on it. */\n error?: boolean | undefined\n}\n\n/**\n * Where someone is in a process of several steps — a sign-up, a checkout, a\n * form split into pages.\n *\n * It shows the way, it does not drive it: the current step is a `v-model`,\n * and the pages and the Next and Back buttons are the app's. With\n * `interactive`, a step already done can be clicked to go back to it; steps\n * ahead never can, because skipping ahead is how a form arrives half filled.\n *\n * An ordered list, with `aria-current=\"step\"` on the step in progress, so a\n * screen reader hears \"step 2 of 4, current\" without the kit inventing a\n * sentence. The words for done and needs-fixing are the app's, passed in\n * `stateLabels`, and read only to assistive tech.\n */\nconst {\n steps,\n label,\n orientation = 'horizontal',\n interactive = false,\n stateLabels = undefined,\n} = defineProps<{\n steps: readonly StepperStep<K>[]\n /** The list's accessible name, e.g. \"Checkout\". */\n label: string\n orientation?: 'horizontal' | 'vertical' | undefined\n /** Completed steps become buttons that go back to them. */\n interactive?: boolean | undefined\n /** Read to a screen reader after a step's label: `{ complete: 'done', error: 'needs attention' }`. */\n stateLabels?: { complete: string; error: string } | undefined\n}>()\n\n/** The step in progress, by key, with `v-model`. */\nconst current = defineModel<K>({ required: true })\n\nconst currentIndex = computed(() => steps.findIndex((step) => step.key === current.value))\n\n/* Only back: a step ahead is never a way in, or a form arrives half filled. */\nconst canGoTo = (index: number) => interactive && index < currentIndex.value\n\nfunction goTo(index: number) {\n if (canGoTo(index)) current.value = steps[index]!.key\n}\n\nfunction state(index: number) {\n const step = steps[index]!\n if (step.error) return 'error'\n if (index < currentIndex.value) return 'complete'\n if (index === currentIndex.value) return 'current'\n return 'upcoming'\n}\n</script>\n\n<template>\n <nav :aria-label=\"label\">\n <ol class=\"rk-steps\" :class=\"`is-${orientation}`\">\n <li\n v-for=\"(step, index) in steps\"\n :key=\"step.key\"\n class=\"rk-step\"\n :class=\"`is-${state(index)}`\"\n :aria-current=\"index === currentIndex ? 'step' : undefined\"\n >\n <component\n :is=\"canGoTo(index) ? 'button' : 'div'\"\n :type=\"canGoTo(index) ? 'button' : undefined\"\n class=\"rk-step-body\"\n :class=\"{ 'focus-ring is-clickable': canGoTo(index) }\"\n @click=\"goTo(index)\"\n >\n <span class=\"rk-step-mark\" aria-hidden=\"true\">\n <X v-if=\"state(index) === 'error'\" class=\"size-3.5\" />\n <Check v-else-if=\"state(index) === 'complete'\" class=\"size-3.5\" />\n <template v-else>{{ index + 1 }}</template>\n </span>\n <span class=\"rk-step-text\">\n <span class=\"rk-step-label\">{{ step.label }}</span>\n <span v-if=\"step.description\" class=\"rk-step-description\">{{ step.description }}</span>\n <span\n v-if=\"stateLabels && (state(index) === 'complete' || state(index) === 'error')\"\n class=\"sr-only\"\n >\n — {{ state(index) === 'error' ? stateLabels.error : stateLabels.complete }}\n </span>\n </span>\n </component>\n </li>\n </ol>\n </nav>\n</template>\n\n<style scoped>\n.rk-steps {\n display: flex;\n gap: 0.5rem;\n}\n\n.rk-steps.is-horizontal {\n align-items: flex-start;\n}\n\n.rk-steps.is-vertical {\n flex-direction: column;\n gap: 0;\n}\n\n.rk-step {\n position: relative;\n flex: 1;\n min-width: 0;\n}\n\n/* The connecting line, drawn from each step to the next. */\n.rk-step:not(:last-child)::after {\n content: '';\n position: absolute;\n background: var(--color-hair);\n transition: background-color var(--duration-base) var(--ease-standard);\n}\n\n.is-horizontal .rk-step:not(:last-child)::after {\n top: 0.875rem;\n inset-inline-start: calc(1.75rem + 0.5rem);\n inset-inline-end: 0.5rem;\n height: 2px;\n}\n\n.is-vertical .rk-step:not(:last-child)::after {\n top: 2.125rem;\n bottom: 0.25rem;\n inset-inline-start: 0.8125rem;\n width: 2px;\n}\n\n.rk-step.is-complete::after {\n background: var(--color-primary);\n}\n\n.rk-step-body {\n display: flex;\n align-items: flex-start;\n gap: 0.625rem;\n width: 100%;\n border-radius: var(--radius-cell);\n text-align: start;\n}\n\n.is-horizontal .rk-step-body {\n flex-direction: column;\n}\n\n.is-vertical .rk-step-body {\n padding-bottom: 1.5rem;\n}\n\n.rk-step-body.is-clickable {\n cursor: pointer;\n}\n\n.rk-step-mark {\n position: relative;\n z-index: 1;\n display: grid;\n width: 1.75rem;\n height: 1.75rem;\n flex-shrink: 0;\n place-items: center;\n border-radius: 9999px;\n border: 2px solid var(--color-hair);\n background: var(--color-surface);\n font-size: 0.75rem;\n font-weight: 700;\n color: var(--color-ink-soft);\n transition:\n background-color var(--duration-base) var(--ease-standard),\n border-color var(--duration-base) var(--ease-standard),\n color var(--duration-base) var(--ease-standard);\n}\n\n.is-current .rk-step-mark {\n border-color: var(--color-primary);\n color: var(--color-primary);\n}\n\n.is-complete .rk-step-mark {\n border-color: var(--color-primary);\n background: var(--color-primary);\n color: var(--color-on-primary);\n}\n\n.is-error .rk-step-mark {\n border-color: var(--color-negative);\n background: var(--color-negative);\n color: var(--color-on-negative);\n}\n\n.is-clickable:hover .rk-step-mark {\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 18%, transparent);\n}\n\n.rk-step-text {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: 0.125rem;\n padding-top: 0.25rem;\n}\n\n.rk-step-label {\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--color-ink-soft);\n}\n\n.is-current .rk-step-label,\n.is-complete .rk-step-label {\n color: var(--color-ink);\n}\n\n.is-error .rk-step-label {\n color: var(--color-negative);\n}\n\n.rk-step-description {\n font-size: 0.75rem;\n line-height: 1.4;\n color: var(--color-ink-soft);\n}\n</style>\n","import { computed, ref, watchEffect } from 'vue'\nimport { createI18n } from 'vue-i18n'\n\nimport { textDirection } from '../utils/direction'\nimport { setFormatLocale } from '../utils/format'\n\n/** What the user picked. `system` re-reads the browser on every launch. */\nexport type LocalePreference<L extends string> = 'system' | L\n\nexport interface I18nRuntimeOptions<L extends string, Schema> {\n /** Languages the app ships, in no particular order. */\n locales: readonly L[]\n /** The one that is always loaded, and the fallback when a load fails. */\n fallback: L\n /**\n * BCP 47 tag per locale, for `Intl`.\n *\n * Message lookup only needs the base language, but dates and numbers need a\n * region to be right — `zh` alone would leave the formatter to guess.\n */\n intlTags: Record<L, string>\n /** The fallback's messages, bundled. */\n messages: Schema\n /** The rest, fetched only when they are the one in use. */\n loaders?: Partial<Record<L, () => Promise<{ default: Schema }>>>\n /** Where the choice is stored. Namespace it per app. */\n storageKey?: string\n}\n\n/**\n * Builds an i18n runtime around an app's own catalogue.\n *\n * A factory rather than a module singleton because the schema is the app's:\n * typing every locale as `typeof en` is what makes a missing key a build error,\n * and this package has no `en` of its own to type against.\n *\n * @example\n * ```ts\n * export const { i18n, t, useLocalePreference, loadActiveLocale } =\n * createI18nRuntime({\n * locales: ['en', 'tr'] as const,\n * fallback: 'en',\n * intlTags: { en: 'en-GB', tr: 'tr-TR' },\n * messages: en,\n * loaders: { tr: () => import('./locales/tr') },\n * storageKey: 'myapp-locale',\n * })\n * ```\n */\nexport function createI18nRuntime<L extends string, Schema extends Record<string, unknown>>(\n options: I18nRuntimeOptions<L, Schema>,\n) {\n const { locales, fallback, intlTags, messages, storageKey = 'rei-locale' } = options\n\n // Typed rather than defaulted to `{}`, which erases the locale keys and makes\n // `loaders[locale]` an index into an empty object.\n const loaders: Partial<Record<L, () => Promise<{ default: Schema }>>> = options.loaders ?? {}\n\n function isSupported(value: string): value is L {\n return (locales as readonly string[]).includes(value)\n }\n\n /**\n * First browser language the app can actually speak.\n *\n * `navigator.languages` is ordered by the user's own preference, so the first\n * match is the best one — not simply the first entry.\n */\n function detectSystemLocale(): L {\n // No browser to ask. The fallback is the right answer on a server: it is\n // the locale whose messages are bundled, so it is the only one that could\n // render without a load.\n //\n // The test is `document`, not `navigator`. Node has shipped a global\n // `navigator` since v21, so `typeof navigator === 'undefined'` is false on\n // a server and this would read the *build machine's* language and bake it\n // into every prerendered page. `document` is the only one of the two that\n // still means \"a browser\".\n if (typeof document === 'undefined') return fallback\n\n for (const tag of navigator.languages ?? [navigator.language]) {\n const base = tag.split('-')[0]?.toLowerCase()\n if (base && isSupported(base)) return base\n }\n\n return fallback\n }\n\n function readStored(): LocalePreference<L> {\n try {\n const stored = localStorage.getItem(storageKey)\n if (stored === 'system' || (stored && isSupported(stored))) return stored\n } catch {\n // Storage blocked; fall through to the system language.\n }\n\n return 'system'\n }\n\n const preference = ref<LocalePreference<L>>(readStored())\n\n const activeLocale = computed<L>(() =>\n preference.value === 'system' ? detectSystemLocale() : (preference.value as L),\n )\n\n const intlLocale = computed(() => intlTags[activeLocale.value])\n\n // Only the fallback at construction; the rest arrive through\n // setLocaleMessage.\n const initial = { [fallback]: messages } as Record<string, Record<string, unknown>>\n\n const i18n = createI18n({\n legacy: false,\n locale: activeLocale.value as string,\n fallbackLocale: fallback as string,\n messages: initial,\n } as unknown as Parameters<typeof createI18n>[0])\n\n /**\n * A narrow view of the instance.\n *\n * vue-i18n infers its own generics from the messages it is handed, which\n * fights a runtime that is generic over the app's schema. Casting once, here,\n * keeps that fight out of every call site — and the surface below is the\n * whole of what this runtime uses.\n */\n const core = i18n.global as unknown as {\n locale: { value: string }\n setLocaleMessage: (locale: string, messages: Schema) => void\n t: (key: string, named?: Record<string, unknown>) => string\n }\n\n const loaded = new Set<L>([fallback])\n\n /**\n * Makes sure a locale's messages are in place before it becomes active.\n *\n * Awaited rather than fired and forgotten: setting the locale first paints one\n * frame of the fallback at every other user, which is the flash a fallback\n * exists to prevent, not cause.\n */\n async function ensureMessages(locale: L): Promise<void> {\n if (loaded.has(locale)) return\n\n const load = loaders[locale]\n if (!load) return\n\n try {\n const module = await load()\n core.setLocaleMessage(locale, module.default)\n loaded.add(locale)\n } catch {\n // Offline, or a stale chunk after a deploy. The fallback is loaded and\n // will carry the UI, which beats a blank screen.\n }\n }\n\n /** Loads whatever the stored preference resolves to. Call before mounting. */\n function loadActiveLocale(): Promise<void> {\n return ensureMessages(activeLocale.value)\n }\n\n // Keeps vue-i18n, `Intl` and the document in step. `lang` matters beyond\n // tidiness: it drives hyphenation, font fallback and screen readers.\n //\n // `dir` matters more. The kit is built on logical properties and\n // `start`/`end` props the whole way through, and every one of them is\n // inert until the document says which way the language runs — so an app\n // that adds Arabic would get the entire layout mirrored the wrong way\n // while every check stayed green.\n watchEffect(() => {\n core.locale.value = activeLocale.value\n setFormatLocale(intlLocale.value)\n\n if (typeof document !== 'undefined') {\n document.documentElement.lang = activeLocale.value\n document.documentElement.dir = textDirection(intlLocale.value)\n }\n })\n\n /** Read and write the language preference. */\n function useLocalePreference() {\n return computed<LocalePreference<L>>({\n get: () => preference.value,\n set: (next) => {\n const resolved = next === 'system' ? detectSystemLocale() : (next as L)\n\n // Messages first, then the switch — the other order shows the fallback\n // for a frame on the way to the language the user just picked.\n void ensureMessages(resolved).then(() => {\n preference.value = next\n })\n\n try {\n localStorage.setItem(storageKey, next)\n } catch {\n // Storage blocked; the choice lasts for this session only.\n }\n },\n })\n }\n\n return {\n i18n,\n /** `t` for code outside a component. Tracks the locale inside a computed. */\n t: core.t,\n activeLocale,\n intlLocale,\n ensureMessages,\n loadActiveLocale,\n useLocalePreference,\n }\n}\n","/**\n * rei-kit — the layer every app starts from.\n *\n * Everything here is free of any backend, router or i18n choice. Components\n * take strings rather than calling a translator, and utilities take the clock\n * rather than reading it, so nothing in this package can force a decision on\n * the app that installs it.\n *\n * @see https://github.com/ramazandogna/rei-kit\n */\n\n/**\n * The published version, replaced at build time from `package.json`.\n *\n * It was a literal `'0.0.0'` and nothing ever rewrote it, so every consumer\n * that imported this — and the showcase, which is how it was noticed — was\n * told the kit was at 0.0.0 whatever it actually was. A symbol in a public API\n * that reports something false is worse than one that is missing: nobody\n * checks a value that looks like it works.\n *\n * The fallback keeps `vitest` and `vite dev` honest, where no define runs.\n */\nexport const VERSION: string =\n typeof __REI_KIT_VERSION__ === 'string' ? __REI_KIT_VERSION__ : '0.0.0-dev'\n\n// ── Utilities ──────────────────────────────────────────────────────────────\nexport {\n addDays,\n eachDayOfYear,\n fromDateKey,\n lastNDays,\n leadingBlanks,\n startOfWeek,\n toDateKey,\n todayKey,\n} from './utils/date'\nexport type { WeekStart } from './utils/date'\n\nexport { formatDate, formatNumber, setFormatLocale } from './utils/format'\nexport { relativeDayLabel } from './utils/day-label'\nexport type { DayLabels } from './utils/day-label'\n\nexport { downloadJson } from './utils/download'\nexport {\n MATERIALS,\n PALETTES,\n applyMaterial,\n applyPalette,\n isMaterial,\n isPaletteName,\n setMaterialStorageKey,\n setPaletteStorageKey,\n useMaterial,\n usePalette,\n} from './utils/appearance'\nexport type { Material, Palette, PaletteName, PaletteRoles } from './utils/appearance'\nexport { ensureSheetRoot, SHEET_ROOT_ID } from './utils/sheet-root'\nexport { safeRedirect, toRedirectPath } from './utils/redirect'\nexport type { QueryValue } from './utils/redirect'\nexport { tapFeedback } from './utils/haptics'\nexport { isApplePortable, isInstalled, needsIosInstall } from './utils/platform'\n\nexport { AppError, registerErrorMapper, toAppError } from './utils/app-error'\nexport type { AppErrorKind, ErrorMapper } from './utils/app-error'\n\n// ── Composables ────────────────────────────────────────────────────────────\nexport {\n applyTheme,\n isThemePreference,\n readStoredTheme,\n setThemeStorageKey,\n useTheme,\n} from './composables/use-theme'\nexport type { ThemePreference } from './composables/use-theme'\n\nexport { useToday } from './composables/use-today'\nexport { useOnline } from './composables/use-online'\nexport { useDebouncedCallback } from './composables/use-debounced-callback'\nexport { useDragScroll } from './composables/use-drag-scroll'\nexport { useMediaQuery } from './composables/use-media-query'\nexport { useVisualViewport } from './composables/use-visual-viewport'\nexport { useToast } from './composables/use-toast'\nexport type { Toast, ToastAction, ToastOptions, ToastTone } from './composables/use-toast'\nexport type { VisualViewportRect } from './composables/use-visual-viewport'\n\n// ── Components ─────────────────────────────────────────────────────────────\n/**\n * The person, in the corner where the account lives.\n *\n * @example\n * ```vue\n * <BaseAvatar name=\"Aiko Tanaka\" fallback=\"initials\" size=\"lg\" />\n * ```\n */\nexport { default as BaseAvatar } from './components/BaseAvatar.vue'\n/**\n * A message the reader has to take in before carrying on.\n *\n * @example\n * ```vue\n * <BaseAlert tone=\"warning\">\n * <template #title>Unsaved changes</template>\n * Leave now and the last edit is lost.\n * </BaseAlert>\n * ```\n */\nexport { default as BaseAlert } from './components/BaseAlert.vue'\n/**\n * A small standing label: a level, a state, a count.\n *\n * @example\n * ```vue\n * <BaseBadge tone=\"success\">Paid</BaseBadge>\n * ```\n *\n * @see {@link BaseChip} — the near-neighbour this is mistaken for\n */\nexport { default as BaseBadge } from './components/BaseBadge.vue'\n/**\n * The kit's button, and — when asked — its link.\n *\n * @example\n * ```vue\n * <div class=\"flex flex-wrap gap-2\">\n * <BaseButton @click=\"save\">Save</BaseButton>\n * <BaseButton variant=\"secondary\">Cancel</BaseButton>\n * <BaseButton variant=\"danger\" :loading=\"deleting\">Delete</BaseButton>\n * <BaseButton as=\"a\" href=\"/docs\" variant=\"ghost\">Read the docs</BaseButton>\n * </div>\n * ```\n *\n * @see {@link BaseLink} — the near-neighbour this is mistaken for\n */\nexport { default as BaseButton } from './components/BaseButton.vue'\n/**\n * A text field with its label, hint and error already wired to it.\n *\n * @example\n * ```vue\n * <BaseInput v-model=\"email\" label=\"Email\" type=\"email\" hint=\"We never share it.\" />\n *\n * <!-- A unit attached to the field. It is `aria-hidden` because the label\n * already says what the number is; a mark that is the only place the\n * unit appears belongs in the label instead. -->\n * <BaseInput v-model=\"weight\" label=\"Weight in kilograms\" type=\"number\">\n * <template #suffix><span aria-hidden=\"true\">kg</span></template>\n * </BaseInput>\n * ```\n *\n * @see {@link PasswordInput} — the near-neighbour this is mistaken for\n */\nexport { default as BaseInput } from './components/BaseInput.vue'\n/**\n * A list of actions behind one control.\n *\n * @example\n * ```vue\n * <BaseMenu label=\"Account\">\n * <template #trigger>\n * <BaseAvatar name=\"Aiko Tanaka\" fallback=\"initials\" />\n * </template>\n *\n * <a href=\"/profile\" role=\"menuitem\">Profile</a>\n * <button type=\"button\" role=\"menuitem\" @click=\"signOut\">Sign out</button>\n * </BaseMenu>\n * ```\n *\n * @see {@link BaseModal}, {@link BasePopover}, {@link CommandMenu}, {@link MegaMenu}, {@link NavLinks} — the near-neighbours this is mistaken for\n */\nexport { default as BaseMenu } from './components/BaseMenu.vue'\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * @example\n * ```vue\n * <BaseButton @click=\"open = true\">New entry</BaseButton>\n *\n * <BaseSheet v-model=\"open\" title=\"New entry\" close-label=\"Close\">\n * <p>Anything that belongs to a thumb.</p>\n * </BaseSheet>\n * ```\n *\n * @see {@link BaseDrawer}, {@link BaseModal} — the near-neighbours this is mistaken for\n */\nexport { default as BaseSheet } from './components/BaseSheet.vue'\n/**\n * A surface with a border, and optionally a head and a foot.\n *\n * @example\n * ```vue\n * <BaseCard>\n * <template #head>This month</template>\n * Spent less than last month.\n * <template #foot>Updated today</template>\n * </BaseCard>\n * ```\n */\nexport { default as BaseCard } from './components/BaseCard.vue'\n/**\n * A field you type into to narrow a list, then choose from it.\n *\n * @example\n * ```vue\n * <BaseCombobox\n * v-model=\"country\"\n * label=\"Country\"\n * :options=\"countries\"\n * placeholder=\"Start typing\"\n * empty-label=\"No country matches\"\n * />\n *\n * <BaseCombobox\n * v-model=\"recipients\"\n * mode=\"multiple\"\n * label=\"Recipients\"\n * :options=\"countries\"\n * :remove-label=\"(name) => `Remove ${name}`\"\n * placeholder=\"Add someone\"\n * empty-label=\"Nobody matches\"\n * />\n *\n * <BaseCombobox\n * label=\"City\"\n * :options=\"results\"\n * :loading=\"loading\"\n * loading-label=\"Searching…\"\n * filter=\"none\"\n * placeholder=\"Type at least two letters\"\n * empty-label=\"No city matches\"\n * @search=\"search\"\n * />\n * ```\n *\n * @see {@link BaseSelect}, {@link TagsInput}, {@link TransferList} — the near-neighbours this is mistaken for\n */\nexport { default as BaseCombobox } from './components/BaseCombobox.vue'\nexport type { ComboboxOption } from './components/BaseCombobox.vue'\n/**\n * A single checkbox, with its label beside it.\n *\n * @example\n * ```vue\n * <BaseCheckbox v-model=\"remember\" label=\"Remember me\" />\n * ```\n *\n * @see {@link BaseSwitch} — the near-neighbour this is mistaken for\n */\nexport { default as BaseCheckbox } from './components/BaseCheckbox.vue'\n/**\n * A set of radios, and the reason there is no `BaseRadio`.\n *\n * @example\n * ```vue\n * <BaseRadioGroup v-model=\"plan\" legend=\"Plan\" :options=\"plans\" />\n * ```\n *\n * @see {@link BaseListbox}, {@link BaseSelect} — the near-neighbours this is mistaken for\n */\nexport { default as BaseRadioGroup } from './components/BaseRadioGroup.vue'\n/**\n * A native `<select>`, wearing the kit's field.\n *\n * @example\n * ```vue\n * <BaseSelect v-model=\"currency\" label=\"Currency\" :options=\"options\" placeholder=\"Choose one\" />\n * ```\n *\n * @see {@link BaseCombobox}, {@link BaseListbox}, {@link BaseRadioGroup} — the near-neighbours this is mistaken for\n */\nexport { default as BaseSelect } from './components/BaseSelect.vue'\n/**\n * A value picked from a range, where roughly right is the point.\n *\n * @example\n * ```vue\n * <BaseSlider v-model=\"goal\" label=\"Daily goal\" :min=\"5\" :max=\"60\" :step=\"5\" show-value />\n * ```\n *\n * @see {@link NumberInput}, {@link SliderField} — the near-neighbours this is mistaken for\n */\nexport { default as BaseSlider } from './components/BaseSlider.vue'\n\n/**\n * A slider and a number field on one value: drag to find it, type to land\n * on it. See `SliderField.vue` for why both carry the same name.\n *\n * @example\n * ```vue\n * <SliderField\n * v-model=\"opacity\"\n * label=\"Opacity\"\n * :min=\"0\"\n * :max=\"100\"\n * :step=\"5\"\n * decrement-label=\"Less opaque\"\n * increment-label=\"More opaque\"\n * :format=\"(value) => `${value}%`\"\n * hint=\"Drag for roughly right, type for exactly right.\"\n * />\n * ```\n *\n * @see {@link BaseSlider}, {@link NumberInput} — the near-neighbours this is mistaken for\n */\nexport { default as SliderField } from './components/SliderField.vue'\n/**\n * Work in progress, with no idea how much is left.\n *\n * @example\n * ```vue\n * <BaseSpinner label=\"Loading entries\" />\n * ```\n *\n * @see {@link ProgressBar} — the near-neighbour this is mistaken for\n */\nexport { default as BaseSpinner } from './components/BaseSpinner.vue'\n/**\n * A setting that takes effect the moment it is touched.\n *\n * @example\n * ```vue\n * <BaseSwitch v-model=\"reminders\" label=\"Daily reminder\" hint=\"Every evening at 21:00\" />\n * ```\n *\n * @see {@link BaseCheckbox} — the near-neighbour this is mistaken for\n */\nexport { default as BaseSwitch } from './components/BaseSwitch.vue'\n/**\n * Rows of data, with the parts a hand-written `<table>` leaves out.\n *\n * @example\n * ```vue\n * <BaseTable :columns=\"columns\" :rows=\"rows\" caption=\"Recent payments\" row-key=\"id\">\n * <template #amount=\"{ value }\">{{ value }} ₺</template>\n * </BaseTable>\n * ```\n *\n * @see {@link DataTable} — the near-neighbour this is mistaken for\n */\nexport { default as BaseTable } from './components/BaseTable.vue'\nexport type { Column } from './components/BaseTable.vue'\n/**\n * A multi-line field.\n *\n * @example\n * ```vue\n * <BaseTextarea v-model=\"note\" label=\"Note\" :rows=\"4\" />\n * ```\n */\nexport { default as BaseTextarea } from './components/BaseTextarea.vue'\n/**\n * A list with nothing in it yet, said kindly.\n *\n * @example\n * ```vue\n * <EmptyState title=\"No entries yet\" description=\"Your first one takes ten seconds.\">\n * <template #action>\n * <BaseButton>Write one</BaseButton>\n * </template>\n * </EmptyState>\n * ```\n */\nexport { default as EmptyState } from './components/EmptyState.vue'\n/**\n * A label, a hint, an error, and the wiring between them.\n *\n * @example\n * ```vue\n * <FormField label=\"Username\" hint=\"Letters and numbers only\" :error=\"error\">\n * <template #default=\"{ id, describedBy, invalid }\">\n * <input\n * :id=\"id\"\n * v-model=\"name\"\n * class=\"control rounded-card px-3 py-2\"\n * :aria-describedby=\"describedBy\"\n * :aria-invalid=\"invalid\"\n * />\n * </template>\n * </FormField>\n * ```\n */\nexport { default as FormField } from './components/FormField.vue'\n/**\n * Keeps one broken screen from taking the whole app down.\n *\n * @example\n * ```vue\n * <ErrorBoundary @error=\"report\">\n * <RouterView />\n *\n * <template #fallback=\"{ reset }\">\n * <p>That part of the page failed.</p>\n * <BaseButton @click=\"reset\">Try again</BaseButton>\n * </template>\n * </ErrorBoundary>\n * ```\n */\nexport { default as ErrorBoundary } from './components/ErrorBoundary.vue'\n/**\n * One measure, centred, with the page's gutters.\n *\n * @example\n * ```vue\n * <PageContainer width=\"reading\" as=\"article\">\n * <h1>A long read</h1>\n * <p>Set at about 68 characters a line.</p>\n * </PageContainer>\n * ```\n */\nexport { default as PageContainer } from './components/PageContainer.vue'\n/**\n * The bar at the top of a screen: a title with room either side of it.\n *\n * @example\n * ```vue\n * <PageHeader title=\"Settings\">\n * <template #right>\n * <BaseButton size=\"sm\" variant=\"ghost\">Done</BaseButton>\n * </template>\n * </PageHeader>\n * ```\n */\nexport { default as PageHeader } from './components/PageHeader.vue'\n/**\n * How far through something somebody is.\n *\n * @example\n * ```vue\n * <ProgressBar :value=\"18\" :max=\"28\" label=\"Course progress\" />\n * ```\n *\n * @see {@link BaseSpinner} — the near-neighbour this is mistaken for\n */\nexport { default as ProgressBar } from './components/ProgressBar.vue'\n/**\n * One plan in a pricing table.\n *\n * @example\n * ```vue\n * <PriceCard\n * name=\"Pro\"\n * price=\"₺49\"\n * period=\"/ month\"\n * :features=\"['Unlimited entries', 'Export', 'Sync']\"\n * recommended\n * badge=\"Popular\"\n * >\n * <template #action>\n * <BaseButton block>Choose Pro</BaseButton>\n * </template>\n * </PriceCard>\n * ```\n */\nexport { default as PriceCard } from './components/PriceCard.vue'\n/**\n * A pill heading for a group of things.\n *\n * @example\n * ```vue\n * <SectionHeading :tone=\"income\" label=\"Income\" :count=\"3\" />\n * ```\n */\nexport { default as SectionHeading } from './components/SectionHeading.vue'\n/**\n * A row of mutually exclusive choices.\n *\n * @example\n * ```vue\n * <SegmentedControl v-model=\"range\" :options=\"ranges\" />\n * ```\n *\n * @see {@link ToggleGroup} — the near-neighbour this is mistaken for\n */\nexport { default as SegmentedControl } from './components/SegmentedControl.vue'\n/**\n * A titled run of settings rows.\n *\n * @example\n * ```vue\n * <SettingsGroup title=\"Notifications\">\n * <SettingsRow label=\"Daily reminder\">\n * <BaseSwitch v-model=\"reminders\" label=\"Daily reminder\" label-hidden />\n * </SettingsRow>\n * </SettingsGroup>\n * ```\n */\nexport { default as SettingsGroup } from './components/SettingsGroup.vue'\n/**\n * One line in a settings card.\n *\n * @example\n * ```vue\n * <SettingsGroup title=\"Account\">\n * <SettingsRow\n * label=\"Language\"\n * description=\"English\"\n * :icon=\"Languages\"\n * interactive\n * @click=\"openLanguages\"\n * />\n * </SettingsGroup>\n * ```\n */\nexport { default as SettingsRow } from './components/SettingsRow.vue'\n/**\n * A length starts with a digit, a dot, or opens a CSS function.\n *\n * @example\n * ```vue\n * <SkeletonList :rows=\"4\" label=\"Loading entries\" />\n * ```\n *\n * @see {@link BaseSkeleton} — the near-neighbour this is mistaken for\n */\nexport { default as SkeletonList } from './components/SkeletonList.vue'\n/**\n * One number, with what it means and which way it is going.\n *\n * @example\n * ```vue\n * <StatCard value=\"¥48,200\" label=\"This month\" trend=\"down\" />\n * ```\n */\nexport { default as StatCard } from './components/StatCard.vue'\n/**\n * Where the toasts land. One of these, at the app root.\n *\n * @example\n * ```vue\n * <!-- Once, near the root of the app. -->\n * <ToastHost close-label=\"Close\" />\n *\n * <BaseButton @click=\"toast.success('Saved')\">Save</BaseButton>\n * ```\n */\nexport { default as ToastHost } from './components/ToastHost.vue'\n/**\n * A small coloured dot, optionally labelled.\n *\n * @example\n * ```vue\n * <ToneDot fill=\"bg-positive\" label=\"Income\" />\n * ```\n */\nexport { default as ToneDot } from './components/ToneDot.vue'\nexport type { Tone } from './components/SectionHeading.vue'\n/**\n * A flat language switcher for screens with no Settings behind them.\n *\n * @example\n * ```vue\n * <LocaleLinks v-model=\"locale\" :locales=\"['en', 'tr']\" :labels=\"{ en: 'English', tr: 'Türkçe' }\" />\n * ```\n */\nexport { default as LocaleLinks } from './components/LocaleLinks.vue'\n/**\n * Sign in with Google, in Google's own clothes.\n *\n * @example\n * ```vue\n * <GoogleButton label=\"Continue with Google\" @click=\"signInWithGoogle\" />\n * ```\n */\nexport { default as GoogleButton } from './components/GoogleButton.vue'\n/**\n * The floating bottom bar.\n *\n * @example\n * ```vue\n * <TabBar :items=\"tabs\" :active=\"active\" label=\"Main\" />\n * ```\n *\n * @see {@link BaseTabs}, {@link NavLinks} — the near-neighbours this is mistaken for\n */\nexport { default as TabBar } from './components/TabBar.vue'\nexport type { TabItem } from './components/TabBar.vue'\n/**\n * `ActivityGrid`, a year at a glance — a real table, so the DOM order is\n * the picture's order, and one tab stop rather than three hundred odd.\n *\n * @example\n * ```vue\n * <ActivityGrid\n * :days=\"days\"\n * label=\"Your year\"\n * :level-for=\"levelFor\"\n * :day-label=\"dayLabel\"\n * :is-selectable=\"isSelectable\"\n * @select=\"toast.info($event)\"\n * />\n * ```\n *\n * @see {@link BaseCalendar} — the near-neighbour this is mistaken for\n */\nexport { default as ActivityGrid } from './components/ActivityGrid.vue'\n/**\n * `BarChart` and `DonutChart`: the two shapes the kit's own dashboard\n * vocabulary — `StatCard`, `ProgressBar`, `ActivityGrid` — creates a need\n * for and did not answer. Both are the data as text with a picture beside\n * it, rather than a picture with a sentence describing it.\n *\n * @example\n * ```vue\n * <BarChart\n * :series=\"SIZES\"\n * label=\"Bundle size, ten components\"\n * :value-label=\"(kb) => `${kb.toFixed(1)} KB`\"\n * :fill=\"(item) => (item.key === 'rei' ? 'bg-positive' : 'bg-muted')\"\n * />\n * ```\n *\n * @see {@link DonutChart} — the near-neighbour this is mistaken for\n */\nexport { default as BarChart } from './components/BarChart.vue'\n/**\n * Parts of a whole.\n *\n * @example\n * ```vue\n * <DonutChart\n * :slices=\"PARTS\"\n * label=\"What the stylesheet is made of\"\n * :value-label=\"(kb) => `${kb.toFixed(1)} KB`\"\n * :fill=\"(_, index) => TONES[index % TONES.length]!\"\n * />\n * ```\n *\n * @see {@link BarChart} — the near-neighbour this is mistaken for\n */\nexport { default as DonutChart } from './components/DonutChart.vue'\n/**\n * `ScrollArea`, a scrolling box with the two things a hand-written one\n * leaves out: a fade at whichever edge has more content past it, and a\n * focus stop — but only when nothing inside it can take focus.\n *\n * @example\n * ```vue\n * <!-- Nothing inside takes focus, so this becomes a named focus stop on its\n * own and the far end stays reachable with a keyboard. -->\n * <ScrollArea axis=\"x\" scrollbar=\"hidden\" label=\"The year so far\" class=\"max-w-sm\">\n * <p class=\"flex gap-3 whitespace-nowrap\">\n * <span v-for=\"month in MONTHS\" :key=\"month\" class=\"text-ink-soft text-sm\">{{ month }}</span>\n * </p>\n * </ScrollArea>\n * ```\n */\nexport { default as ScrollArea } from './components/ScrollArea.vue'\n/**\n * `VirtualList`, a long list where only the rows near the viewport exist —\n * and every one of them states its place in the whole, which is the half\n * that is usually dropped.\n *\n * @example\n * ```vue\n * <VirtualList\n * :items=\"ROWS\"\n * :row-height=\"36\"\n * label=\"Five thousand rows\"\n * class=\"border-hair max-h-56 rounded-xl border\"\n * >\n * <template #default=\"{ item }\">\n * <span class=\"text-ink flex h-full items-center px-3 text-sm\">{{ item.name }}</span>\n * </template>\n * </VirtualList>\n * ```\n */\nexport { default as VirtualList } from './components/VirtualList.vue'\n/**\n * `AnnounceHost` and `useAnnounce`, for saying something to a reader when\n * nothing on screen has changed enough to say it: a filter that narrowed a\n * list, a route that changed, a draft that saved itself.\n *\n * @example\n * ```vue\n * <div class=\"flex items-center gap-3\">\n * <!-- Rendered once per app. Nothing here is ever visible. -->\n * <AnnounceHost />\n *\n * <BaseButton variant=\"secondary\" @click=\"filter\">Filter</BaseButton>\n * <span class=\"text-ink-soft text-sm\">{{ count }} results</span>\n * </div>\n * ```\n */\nexport { default as AnnounceHost } from './components/AnnounceHost.vue'\n/**\n * `ErrorSummary`, the answer to \"did that work?\" at the top of a rejected\n * form — and a way from there into each field in one press.\n *\n * @example\n * ```vue\n * <form class=\"flex flex-col gap-3\" novalidate @submit.prevent=\"submit\">\n * <!-- Takes focus itself the first time the form is rejected, so the\n * reader is not left on a button that appeared to do nothing. -->\n * <ErrorSummary\n * :errors=\"errors\"\n * title=\"There are fields to fix\"\n * :label-for=\"(field) => LABELS[field] ?? field\"\n * :field-id=\"fieldId\"\n * :fields=\"['email', 'password']\"\n * />\n *\n * <!-- The same function on both sides: the summary builds the href from it\n * and each field takes its id from it, so the link lands on the field. -->\n * <BaseInput\n * v-model=\"email\"\n * label=\"Email\"\n * type=\"email\"\n * autocomplete=\"email\"\n * :error=\"errors['email']\"\n * :field-id=\"fieldId('email')\"\n * />\n *\n * <PasswordInput\n * v-model=\"password\"\n * label=\"Password\"\n * toggle-label=\"Show password\"\n * autocomplete=\"new-password\"\n * :error=\"errors['password']\"\n * :field-id=\"fieldId('password')\"\n * />\n *\n * <BaseButton type=\"submit\" class=\"self-start\">Sign up</BaseButton>\n * </form>\n * ```\n */\nexport { default as ErrorSummary } from './components/ErrorSummary.vue'\nexport { useAnnounce, announce } from './composables/use-announce'\n/**\n * `textDirection`, because every logical property and every `start`/`end`\n * prop in the kit is inert until the document says which way the language\n * runs. The i18n runtime sets `dir` from it; this is for an app that has\n * no i18n runtime and still has more than one direction.\n */\nexport { textDirection } from './utils/direction'\n/**\n * `elementDirection` and `horizontalStep`, for an app writing the keyboard\n * behaviour the kit does not cover. `ArrowLeft` means \"back through the\n * list\" only where the language runs left to right; read as a step, it\n * means the same thing in both.\n */\nexport { elementDirection, horizontalStep } from './utils/direction'\nexport type { TextDirection } from './utils/direction'\nexport type { AnnounceOptions } from './composables/use-announce'\n/**\n * The people on a thing, overlapped: who is in a conversation, who shares\n * a list.\n *\n * @example\n * ```vue\n * <AvatarStack :people=\"people\" :max=\"3\" label=\"Shared with 5 people\" />\n * ```\n */\nexport { default as AvatarStack } from './components/AvatarStack.vue'\n/**\n * A month of days, for choosing one or a stretch of them.\n *\n * @example\n * ```vue\n * <BaseCalendar\n * v-model=\"day\"\n * previous-label=\"Previous month\"\n * next-label=\"Next month\"\n * :min=\"todayKey()\"\n * />\n * ```\n *\n * @see {@link ActivityGrid}, {@link BaseDatePicker} — the near-neighbours this is mistaken for\n */\nexport { default as BaseCalendar } from './components/BaseCalendar.vue'\n/**\n * A short label with, when it is one of a set someone assembled, a way to\n * take it off: a filter, a recipient, a tag.\n *\n * @example\n * ```vue\n * <div class=\"flex flex-wrap gap-2\">\n * <BaseChip\n * v-for=\"tag in tags\"\n * :key=\"tag\"\n * :label=\"tag\"\n * :remove-label=\"`Remove ${tag}`\"\n * @remove=\"remove(tag)\"\n * />\n * </div>\n * ```\n *\n * @see {@link BaseBadge} — the near-neighbour this is mistaken for\n */\nexport { default as BaseChip } from './components/BaseChip.vue'\n/**\n * A keyboard key, or a chord of them: `⌘ K`, `Ctrl Shift P`.\n *\n * @example\n * ```vue\n * <p>Press <BaseKbd :keys=\"['⌘', 'K']\" joiner=\"+\" /> to search.</p>\n * ```\n */\nexport { default as BaseKbd } from './components/BaseKbd.vue'\n/**\n * A list you choose from, open on the page.\n *\n * @example\n * ```vue\n * <BaseListbox v-model=\"chosen\" mode=\"multiple\" :options=\"people\" label=\"People with access\" />\n * ```\n *\n * @see {@link BaseRadioGroup}, {@link BaseSelect}, {@link TransferList} — the near-neighbours this is mistaken for\n */\nexport { default as BaseListbox } from './components/BaseListbox.vue'\nexport type { ListboxOption } from './components/BaseListbox.vue'\n/**\n * A link in a sentence — the one thing a button is not.\n *\n * @example\n * ```vue\n * <p>\n * Read the <BaseLink to=\"/docs\">documentation</BaseLink>, or the\n * <BaseLink href=\"https://vuejs.org\" external>Vue guide</BaseLink>.\n * </p>\n * ```\n *\n * @see {@link BaseButton} — the near-neighbour this is mistaken for\n */\nexport { default as BaseLink } from './components/BaseLink.vue'\n/**\n * A score out of five, given or shown.\n *\n * @example\n * ```vue\n * <BaseRating\n * v-model=\"score\"\n * label=\"Your rating\"\n * :value-label=\"(value, max) => `${value} out of ${max}`\"\n * />\n * ```\n */\nexport { default as BaseRating } from './components/BaseRating.vue'\n/**\n * A line between things — with, when it helps, a word on it.\n *\n * @example\n * ```vue\n * <p>Signed in already?</p>\n * <BaseSeparator label=\"or\" />\n * <p>Create an account.</p>\n * ```\n */\nexport { default as BaseSeparator } from './components/BaseSeparator.vue'\n/**\n * One grey box standing in for content that has not arrived.\n *\n * @example\n * ```vue\n * <div class=\"flex items-center gap-3\" aria-busy=\"true\">\n * <BaseSkeleton shape=\"circle\" height=\"2.5rem\" />\n * <div class=\"flex-1\">\n * <BaseSkeleton shape=\"text\" width=\"40%\" height=\"0.75rem\" />\n * <BaseSkeleton class=\"mt-2\" shape=\"text\" width=\"70%\" height=\"0.75rem\" />\n * </div>\n * </div>\n * ```\n *\n * @see {@link SkeletonList} — the near-neighbour this is mistaken for\n */\nexport { default as BaseSkeleton } from './components/BaseSkeleton.vue'\n/**\n * A colour, as a hex value.\n *\n * @example\n * ```vue\n * <ColorPicker\n * v-model=\"brand\"\n * label=\"Brand colour\"\n * hex-label=\"Hex value\"\n * :swatches=\"swatches\"\n * hint=\"Used for buttons, links and the active state.\"\n * />\n * ```\n */\nexport { default as ColorPicker } from './components/ColorPicker.vue'\nexport type { ColorSwatch } from './components/ColorPicker.vue'\n/**\n * `CodeBlock`, a sample as written — no highlighting and no `v-html`, and\n * focusable when it scrolls, or the end of a long line is unreachable.\n *\n * @example\n * ```vue\n * <CodeBlock\n * :code=\"INSTALL\"\n * label=\"Installing the package\"\n * language=\"bash\"\n * copy-label=\"Copy the snippet\"\n * copied-label=\"Copied\"\n * />\n * ```\n */\nexport { default as CodeBlock } from './components/CodeBlock.vue'\n/**\n * Copies a piece of text, and says that it did.\n *\n * @example\n * ```vue\n * <CopyButton\n * text=\"pnpm add rei-kit\"\n * copy-label=\"Copy the command\"\n * copied-label=\"Copied\"\n * error-label=\"Could not copy\"\n * with-text\n * />\n * ```\n */\nexport { default as CopyButton } from './components/CopyButton.vue'\n/**\n * Pairs of \"what it is\" and \"what it says\": the summary at the top of a\n * detail page, the facts under an invoice.\n *\n * @example\n * ```vue\n * <DescriptionList :items=\"items\" layout=\"inline\">\n * <template #status><BaseBadge tone=\"success\">Paid</BaseBadge></template>\n * </DescriptionList>\n * ```\n */\nexport { default as DescriptionList } from './components/DescriptionList.vue'\nexport type { DescriptionItem } from './components/DescriptionList.vue'\n/**\n * Files, dropped on or chosen from a real file input.\n *\n * @example\n * ```vue\n * <FileDrop\n * v-model=\"files\"\n * label=\"Drop a receipt here\"\n * hint=\"PDF or an image, up to 5 MB\"\n * browse-label=\"Browse\"\n * remove-label=\"Remove\"\n * too-large-label=\"That file is over 5 MB\"\n * accept=\"image/*,.pdf\"\n * :max-size=\"5 * 1024 * 1024\"\n * multiple\n * />\n * ```\n */\nexport { default as FileDrop } from './components/FileDrop.vue'\n/**\n * A field that holds several short values: recipients, labels, skills.\n *\n * @example\n * ```vue\n * <TagsInput\n * v-model=\"tags\"\n * label=\"Tags\"\n * placeholder=\"Type and press Enter\"\n * :remove-label=\"(tag) => `Remove ${tag}`\"\n * :max=\"5\"\n * />\n * ```\n *\n * @see {@link BaseCombobox}, {@link TransferList} — the near-neighbours this is mistaken for\n */\nexport { default as TagsInput } from './components/TagsInput.vue'\n/**\n * A time of day, chosen from two columns.\n *\n * @example\n * ```vue\n * <TimePicker\n * v-model=\"at\"\n * label=\"Reminder\"\n * hours-label=\"Hour\"\n * minutes-label=\"Minute\"\n * placeholder=\"Choose a time\"\n * :step=\"15\"\n * min=\"07:00\"\n * max=\"22:00\"\n * hint=\"Stored as HH:mm, shown in your own clock.\"\n * />\n * ```\n *\n * @see {@link BaseDatePicker} — the near-neighbour this is mistaken for\n */\nexport { default as TimePicker } from './components/TimePicker.vue'\n/**\n * What happened, in order, on a rail.\n *\n * @example\n * ```vue\n * <BaseTimeline :events=\"notes\" label=\"Notes on this habit\">\n * <template #default=\"{ event }\">\n * <BaseCard as=\"blockquote\" padding=\"sm\" class=\"text-ink text-sm leading-relaxed\">\n * {{ event.body }}\n * </BaseCard>\n * </template>\n * </BaseTimeline>\n * ```\n *\n * @see {@link BaseStepper} — the near-neighbour this is mistaken for\n */\nexport { default as BaseTimeline } from './components/BaseTimeline.vue'\nexport type { TimelineEvent } from './components/BaseTimeline.vue'\nexport type { DateRange } from './components/BaseCalendar.vue'\n/**\n * A date, or a stretch of dates, chosen from a calendar in a popover.\n *\n * @example\n * ```vue\n * <BaseDatePicker\n * v-model=\"span\"\n * mode=\"range\"\n * label=\"Report period\"\n * placeholder=\"Choose a period\"\n * clear-label=\"Clear the period\"\n * :presets=\"presets\"\n * previous-label=\"Previous month\"\n * next-label=\"Next month\"\n * />\n * ```\n *\n * @see {@link BaseCalendar}, {@link TimePicker} — the near-neighbours this is mistaken for\n */\nexport { default as BaseDatePicker } from './components/BaseDatePicker.vue'\nexport type { DatePreset } from './components/BaseDatePicker.vue'\n/**\n * \"Are you sure?\", asked beside the button that asked it.\n *\n * @example\n * ```vue\n * <BasePopconfirm\n * message=\"This entry will be deleted.\"\n * confirm-label=\"Delete\"\n * cancel-label=\"Cancel\"\n * @confirm=\"remove\"\n * >\n * <template #trigger=\"{ props }\">\n * <BaseButton variant=\"danger\" size=\"sm\" v-bind=\"props\">Delete</BaseButton>\n * </template>\n * </BasePopconfirm>\n * ```\n *\n * @see {@link ResponsiveDialog} — the near-neighbour this is mistaken for\n */\nexport { default as BasePopconfirm } from './components/BasePopconfirm.vue'\n/**\n * A panel of anything — a form, a picker, a few settings — anchored to the\n * control that opened it.\n *\n * @example\n * ```vue\n * <BasePopover label=\"Filters\">\n * <template #trigger=\"{ props }\">\n * <BaseButton variant=\"secondary\" v-bind=\"props\">Filters</BaseButton>\n * </template>\n *\n * <template #default=\"{ close }\">\n * <BaseSwitch v-model=\"unpaid\" label=\"Only unpaid\" />\n * <BaseButton class=\"mt-3\" size=\"sm\" block @click=\"close\">Done</BaseButton>\n * </template>\n * </BasePopover>\n * ```\n *\n * @see {@link BaseMenu}, {@link BaseModal} — the near-neighbours this is mistaken for\n */\nexport { default as BasePopover } from './components/BasePopover.vue'\nexport type { PopoverTriggerProps } from './components/BasePopover.vue'\n/**\n * A row of buttons that stay pressed — one at a time, or several at once.\n *\n * @example\n * ```vue\n * <ToggleGroup v-model=\"marks\" mode=\"multiple\" :options=\"marksOptions\" label=\"Text style\" />\n * ```\n *\n * @see {@link SegmentedControl} — the near-neighbour this is mistaken for\n */\nexport { default as ToggleGroup } from './components/ToggleGroup.vue'\n/**\n * A number, typed or stepped — a quantity, a price, a count of minutes.\n *\n * @example\n * ```vue\n * <NumberInput\n * v-model=\"guests\"\n * label=\"Guests\"\n * :min=\"1\"\n * :max=\"12\"\n * decrement-label=\"Fewer guests\"\n * increment-label=\"More guests\"\n * />\n * ```\n *\n * @see {@link BaseSlider}, {@link SliderField} — the near-neighbours this is mistaken for\n */\nexport { default as NumberInput } from './components/NumberInput.vue'\n/**\n * A short code typed one character per box — a sign-in code, a PIN.\n *\n * @example\n * ```vue\n * <PinInput\n * v-model=\"code\"\n * label=\"Verification code\"\n * :cell-label=\"(n, total) => `Digit ${n} of ${total}`\"\n * @complete=\"verify\"\n * />\n * ```\n */\nexport { default as PinInput } from './components/PinInput.vue'\n/**\n * A password field you can look at.\n *\n * @example\n * ```vue\n * <PasswordInput\n * v-model=\"password\"\n * label=\"Password\"\n * toggle-label=\"Show password\"\n * hint=\"At least 12 characters.\"\n * autocomplete=\"new-password\"\n * />\n * ```\n *\n * @see {@link BaseInput} — the near-neighbour this is mistaken for\n */\nexport { default as PasswordInput } from './components/PasswordInput.vue'\n/**\n * Progress as a ring — for a small space, a card's corner, a goal.\n *\n * @example\n * ```vue\n * <div class=\"flex items-center gap-4\">\n * <CircularProgress :value=\"72\" label=\"Upload\" show-value size=\"lg\" />\n * <CircularProgress label=\"Loading\" />\n * </div>\n * ```\n */\nexport { default as CircularProgress } from './components/CircularProgress.vue'\n/**\n * Where someone is in a process of several steps — a sign-up, a checkout,\n * a form split into pages.\n *\n * @example\n * ```vue\n * <BaseStepper\n * v-model=\"step\"\n * :steps=\"steps\"\n * label=\"Sign-up\"\n * interactive\n * :state-labels=\"{ complete: 'done', error: 'needs attention' }\"\n * />\n * <BaseButton class=\"mt-4\" @click=\"step = 'payment'\">Next</BaseButton>\n * ```\n *\n * @see {@link BaseTimeline} — the near-neighbour this is mistaken for\n */\nexport { default as BaseStepper } from './components/BaseStepper.vue'\nexport type { StepperStep } from './components/BaseStepper.vue'\n\n// ── i18n ───────────────────────────────────────────────────────────────────\nexport { createI18nRuntime } from './i18n/runtime'\nexport type { I18nRuntimeOptions, LocalePreference } from './i18n/runtime'\n"],"mappings":"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"}