rei-kit 0.17.2 → 0.18.0

package/README.md

@@ -44,14 +44,14 @@ the app, and not a matter of taste.
 
 ## Status
 
-**v0.17.2 — three consumers.**
-
-|              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Components   | 37 (`AuthForm`, `TabShell`, `BaseModal`, `BaseAccordion`, `NavLinks`, `OfflineBanner`, `FabButton`, `BaseButton`, `BaseCard`, `BaseInput`, `BaseSelect`, `BaseTextarea`, `BaseCheckbox`, `BaseRadioGroup`, `BaseAlert`, `BaseBadge`, `BaseSheet`, `ProgressBar`, `PriceCard`, `ToastHost`, `TabBar`, `GoogleButton`, `LocaleLinks`, `LocaleSheet`, `AuthShell`, `TourShell`, `InstallPrompt`, `UpdatePrompt`, `InstallSettings`, `SkeletonList`, `PageContainer`, `ErrorBoundary`, etc.) |
-| Composables  | 14 (`useToast`, `useTheme`, `useToday`, `useMediaQuery`, `useInstall`, `watchInstallability`, `createTabTransition`, `useThemeSync`, `useVisualViewport`, etc.)                                                                                                                                                                                                                                                                                                                          |
-| Utilities    | 27 (`applyTheme`, `formatDate`, `fieldErrors`, `toAuthMessageKey`, `createAuthGuard`, `createQueryDefaults`, `createWriteReport`, `toRedirectPath`, `Supabase error mapper`, i18n runtime, etc.)                                                                                                                                                                                                                                                                                         |
-| Entry Points | `rei-kit`, `rei-kit/app`, `rei-kit/web`, `rei-kit/pwa`, `rei-kit/shell/mobile.css`, `rei-kit/shell/web.css`                                                                                                                                                                                                                                                                                                                                                                              |
+**v0.18.0 — three consumers.**
+
+|              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Components   | 42 (`AuthForm`, `TabShell`, `BaseModal`, `BaseTabs`, `BaseTooltip`, `BasePagination`, `BaseBreadcrumb`, `BaseDisclosure`, `BaseAccordion`, `NavLinks`, `OfflineBanner`, `FabButton`, `BaseButton`, `BaseCard`, `BaseInput`, `BaseSelect`, `BaseTextarea`, `BaseCheckbox`, `BaseRadioGroup`, `BaseAlert`, `BaseBadge`, `BaseSheet`, `ProgressBar`, `PriceCard`, `ToastHost`, `TabBar`, `GoogleButton`, `LocaleLinks`, `LocaleSheet`, `AuthShell`, `TourShell`, `InstallPrompt`, `UpdatePrompt`, `InstallSettings`, `SkeletonList`, `PageContainer`, `ErrorBoundary`, etc.) |
+| Composables  | 14 (`useToast`, `useTheme`, `useToday`, `useMediaQuery`, `useInstall`, `watchInstallability`, `createTabTransition`, `useThemeSync`, `useVisualViewport`, etc.)                                                                                                                                                                                                                                                                                                                                                                                                           |
+| Utilities    | 27 (`applyTheme`, `formatDate`, `fieldErrors`, `toAuthMessageKey`, `createAuthGuard`, `createQueryDefaults`, `createWriteReport`, `toRedirectPath`, `Supabase error mapper`, i18n runtime, etc.)                                                                                                                                                                                                                                                                                                                                                                          |
+| Entry Points | `rei-kit`, `rei-kit/app`, `rei-kit/web`, `rei-kit/pwa`, `rei-kit/shell/mobile.css`, `rei-kit/shell/web.css`                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 
 |             |                                                                                                                                                        |
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |

package/dist/index.js

@@ -1342,7 +1342,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "0.17.2";
+var VERSION = "0.18.0";
 //#endregion
 export { AppError, BaseAlert_default as BaseAlert, BaseBadge_default as BaseBadge, BaseButton_default as BaseButton, BaseCard_default as BaseCard, BaseCheckbox_default as BaseCheckbox, BaseInput_default as BaseInput, BaseRadioGroup_default as BaseRadioGroup, BaseSelect_default as BaseSelect, BaseSheet_default as BaseSheet, BaseTextarea_default as BaseTextarea, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SectionHeading_default as SectionHeading, SegmentedControl_default as SegmentedControl, SettingsGroup_default as SettingsGroup, SettingsRow_default as SettingsRow, SkeletonList_default as SkeletonList, StatCard_default as StatCard, TabBar_default as TabBar, ToastHost_default as ToastHost, ToneDot_default as ToneDot, VERSION, addDays, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, formatDate, fromDateKey, isApplePortable, isInstalled, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setThemeStorageKey, startOfWeek, tapFeedback, toAppError, toDateKey, toRedirectPath, todayKey, useDebouncedCallback, useDragScroll, useMediaQuery, useOnline, useTheme, useToast, useToday, useVisualViewport };
 

package/dist/styles.css

@@ -700,6 +700,115 @@
 }
 }
 
+.rk-crumbs[data-v-85ee4b4e] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+}
+.rk-crumb[data-v-85ee4b4e] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.rk-crumb-link[data-v-85ee4b4e] {
+  color: var(--color-ink-soft);
+  transition: color 150ms;
+}
+.rk-crumb-link[data-v-85ee4b4e]:hover {
+  color: var(--color-ink);
+}
+.rk-crumb-link[data-v-85ee4b4e]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.rk-crumb-current[data-v-85ee4b4e] {
+  color: var(--color-ink);
+  font-weight: 500;
+}
+.rk-crumb-sep[data-v-85ee4b4e] {
+  color: var(--color-hair);
+}
+
+.rk-disclosure-control[data-v-fef7de4d] {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 1.25rem 0;
+  text-align: left;
+  transition: color 150ms;
+}
+.rk-disclosure-control[data-v-fef7de4d]:hover {
+  color: var(--color-primary);
+}
+.rk-disclosure-control[data-v-fef7de4d]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.rk-disclosure-title[data-v-fef7de4d] {
+  color: var(--color-ink);
+  font-size: 1rem;
+  font-weight: 500;
+}
+.rk-disclosure-mark[data-v-fef7de4d] {
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.rk-disclosure-bar[data-v-fef7de4d] {
+  position: absolute;
+  height: 1px;
+  width: 0.875rem;
+  background: var(--color-ink-soft);
+}
+.rk-disclosure-turn[data-v-fef7de4d] {
+  transform: rotate(90deg);
+  transition: transform 420ms ease-out;
+}
+.rk-disclosure-turn.is-open[data-v-fef7de4d] {
+  transform: rotate(0deg);
+}
+
+/* 0fr to 1fr is the whole trick: a grid row can be animated to a height that
+   was never measured, which `height: auto` cannot do. */
+.rk-disclosure-panel[data-v-fef7de4d] {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 420ms ease-out;
+}
+.rk-disclosure-panel.is-open[data-v-fef7de4d] {
+  grid-template-rows: 1fr;
+}
+.rk-disclosure-clip[data-v-fef7de4d] {
+  overflow: hidden;
+}
+.rk-disclosure-body[data-v-fef7de4d] {
+  max-width: 68ch;
+  padding-bottom: 1.5rem;
+  color: var(--color-ink-soft);
+  line-height: 1.625;
+  opacity: 0;
+  transition: opacity 300ms;
+}
+.rk-disclosure-body.is-open[data-v-fef7de4d] {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+.rk-disclosure-panel[data-v-fef7de4d],
+  .rk-disclosure-turn[data-v-fef7de4d],
+  .rk-disclosure-body[data-v-fef7de4d] {
+    transition: none;
+}
+}
+
 .rk-modal-scrim[data-v-e092f731] {
   position: fixed;
   inset: 0;
@@ -800,6 +909,133 @@
 }
 }
 
+.rk-pager[data-v-cc4bbb58] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.rk-pager-step[data-v-cc4bbb58],
+.rk-pager-page[data-v-cc4bbb58] {
+  display: grid;
+  place-items: center;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.5rem;
+  border-radius: var(--radius-cell);
+  font-size: 0.875rem;
+  color: var(--color-ink-soft);
+  transition:
+    background-color 150ms,
+    color 150ms;
+}
+.rk-pager-step[data-v-cc4bbb58]:hover:not(:disabled),
+.rk-pager-page[data-v-cc4bbb58]:hover {
+  background: var(--color-muted);
+  color: var(--color-ink);
+}
+.rk-pager-step[data-v-cc4bbb58]:focus-visible,
+.rk-pager-page[data-v-cc4bbb58]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.rk-pager-step[data-v-cc4bbb58]:disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.rk-pager-page.is-active[data-v-cc4bbb58] {
+  background: var(--color-primary);
+  color: #fff;
+  font-weight: 500;
+}
+.rk-pager-gap[data-v-cc4bbb58] {
+  display: grid;
+  place-items: center;
+  min-width: 2rem;
+  height: 2rem;
+  color: var(--color-ink-soft);
+}
+
+.rk-tabs[data-v-b854e7f5] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);
+}
+.rk-tab[data-v-b854e7f5] {
+  position: relative;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  color: var(--color-ink-soft);
+  transition: color 150ms;
+}
+.rk-tab[data-v-b854e7f5]:hover {
+  color: var(--color-ink);
+}
+.rk-tab[data-v-b854e7f5]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+  border-radius: var(--radius-cell);
+}
+.rk-tab.is-active[data-v-b854e7f5] {
+  color: var(--color-ink);
+  font-weight: 500;
+}
+.rk-tab.is-active[data-v-b854e7f5]::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0.5rem;
+  bottom: -1px;
+  height: 2px;
+  border-radius: 9999px;
+  background: var(--color-primary);
+}
+.rk-tabpanel[data-v-b854e7f5] {
+  padding-top: 1rem;
+}
+.rk-tabpanel[data-v-b854e7f5]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.rk-tip[data-v-3ed61bd4] {
+  position: relative;
+  display: inline-flex;
+}
+.rk-tip-bubble[data-v-3ed61bd4] {
+  position: absolute;
+  left: 50%;
+  z-index: 60;
+  width: max-content;
+  max-width: 16rem;
+  transform: translateX(-50%);
+  border-radius: var(--radius-cell);
+  background: var(--color-ink);
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--color-canvas);
+  opacity: 0;
+  /* Out of the hit area while hidden, or it would swallow the pointer on its
+     way to the control it describes. */
+  pointer-events: none;
+  transition: opacity 150ms ease;
+}
+.rk-tip-bubble.is-top[data-v-3ed61bd4] {
+  bottom: calc(100% + 0.375rem);
+}
+.rk-tip-bubble.is-bottom[data-v-3ed61bd4] {
+  top: calc(100% + 0.375rem);
+}
+.rk-tip:hover .rk-tip-bubble[data-v-3ed61bd4],
+.rk-tip:focus-within .rk-tip-bubble[data-v-3ed61bd4] {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+.rk-tip-bubble[data-v-3ed61bd4] {
+    transition: none;
+}
+}
+
 /* The root carries no layout of its own, and that is the fix for a real bug
    rather than a style preference.
 

package/dist/web/BaseBreadcrumb.vue.d.ts

@@ -0,0 +1,26 @@
+export interface Crumb {
+    /** Already translated. */
+    label: string;
+    /** Omitted for the current page, which is not a link to itself. */
+    to?: string | undefined;
+}
+/**
+ * Where this page sits, and the way back up.
+ *
+ * An ordered list inside a `nav`, because the order is the meaning. The last
+ * crumb is the current page and is deliberately not a link: a link to the page
+ * you are on is a control that does nothing, and `aria-current="page"` is what
+ * says so to everyone else.
+ *
+ * The separators are `aria-hidden`. A screen reader announces a list and its
+ * position in it; reading "slash" between every item is noise on top of
+ * information the reader already has.
+ */
+type __VLS_Props = {
+    items: readonly Crumb[];
+    /** Accessible name for the landmark. */
+    label?: string | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/web/BaseDisclosure.vue.d.ts

@@ -0,0 +1,59 @@
+/**
+ * One section that opens and closes.
+ *
+ * `BaseAccordion` is a list of these with the rule that only one stays open.
+ * This is the same row on its own, for the common case where the list belongs
+ * to the app — because it is staggered as it scrolls in, or interleaved with
+ * something else, or rendered from a source the accordion cannot know about.
+ *
+ * That case is not hypothetical: the first list this kit met decorated every
+ * row with a reveal directive, which has to sit on the element the accordion
+ * would have owned. Shipping only the list would have meant choosing between
+ * the component and the design.
+ *
+ * ## Why not `<details>`
+ *
+ * A browser removes `<details>` content from layout entirely when closed, so
+ * there is nothing to animate between — the panel can only appear. Faking it by
+ * leaving `open` set and hiding with CSS tells a screen reader the section is
+ * expanded while a sighted reader sees it shut, which is worse than no
+ * animation.
+ *
+ * So: a button carrying `aria-expanded`, the content always in the markup —
+ * which is what a crawler and a reader without JavaScript get — and a grid row
+ * travelling from `0fr` to `1fr`, the one way to animate to a height nobody has
+ * measured.
+ */
+type __VLS_Props = {
+    /** The question. Already translated. */
+    title: string;
+    /**
+     * Which heading the control sits inside.
+     *
+     * A heading, always — it is how a screen reader user moves between sections
+     * without opening any of them. The level depends on what is above it on the
+     * page, and getting it wrong breaks the outline.
+     */
+    headingLevel?: 2 | 3 | 4 | undefined;
+};
+type __VLS_Slots = {
+    /** The answer. */
+    default: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: boolean) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/web/BasePagination.vue.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Moving between pages of a list.
+ *
+ * A `nav` of buttons rather than links, because this component does not know
+ * whether the app pages by route, by query or in memory. It emits a number and
+ * the app decides what that means.
+ *
+ * ## The ellipsis
+ *
+ * Every page number is unusable past about a dozen, and cutting to
+ * "1 … 7 8 9 … 40" is what every list does. The window is a fixed size around
+ * the current page and the first and last are always present, so the control
+ * never changes width as you move through it — a row of numbers that reflows
+ * under the pointer is a row you have to re-aim at.
+ *
+ * The gap is a `<span>`, not a disabled button: it is not a control, and
+ * announcing it as one gives a screen reader something to try to press.
+ */
+type __VLS_Props = {
+    /** Current page, 1-based. */
+    page: number;
+    /** How many there are. */
+    pages: number;
+    /** How many numbers to show either side of the current one. */
+    siblings?: number | undefined;
+    /** Accessible name for the landmark. */
+    label?: string | undefined;
+    /**
+     * Names for the arrows, already translated.
+     *
+     * Required, because `‹` is a glyph and not a word: a screen reader reading
+     * the arrow announces nothing a person can act on.
+     */
+    previousLabel: string;
+    nextLabel: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (page: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: (page: number) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/web/BaseTabs.vue.d.ts

@@ -0,0 +1,37 @@
+export interface TabPanel<K extends string> {
+    key: K;
+    /** Already translated. */
+    label: string;
+}
+declare const __VLS_export: <K extends string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<({
+        items: readonly TabPanel<K>[];
+        /** Accessible name for the tablist. */
+        label?: string | undefined;
+    } & {
+        modelValue: K;
+    }) & {
+        "onUpdate:modelValue"?: (value: K) => any;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        /** The panel for the selected tab. */
+        default: (props: {
+            item: TabPanel<K>;
+            active: K;
+        }) => unknown;
+    };
+    emit: (event: "update:modelValue", value: K) => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/web/BaseTooltip.vue.d.ts

@@ -0,0 +1,45 @@
+/**
+ * A short label that appears beside a control.
+ *
+ * ## CSS, not JavaScript, and that is a decision
+ *
+ * The bubble is shown by `:hover` and `:focus-within` in the stylesheet. No
+ * listener, no state, no positioning library. That costs collision detection —
+ * a tooltip near the right edge is clipped rather than flipped — and buys the
+ * only thing that matters more: it works in a prerendered page, before the
+ * bundle has arrived, and with JavaScript switched off entirely.
+ *
+ * `:focus-within` rather than `:hover` alone is the part people leave out. A
+ * tooltip that only answers a mouse is a tooltip that does not exist for anyone
+ * using a keyboard, and the content is usually the only explanation of what the
+ * control does.
+ *
+ * The bubble is wired with `aria-describedby`, so a screen reader reads it as a
+ * description of the control rather than as loose text nearby. That is why the
+ * trigger goes in a slot: the component has to own the id on both ends.
+ *
+ * ## When not to use it
+ *
+ * For anything the reader must have. A tooltip is unreachable on a touch screen
+ * without a hover state, so text that changes a decision belongs on the page.
+ */
+type __VLS_Props = {
+    /** The description. Already translated. */
+    label: string;
+    placement?: 'top' | 'bottom' | undefined;
+};
+type __VLS_Slots = {
+    /** The control being described. */
+    default: (props: {
+        describedBy: string;
+    }) => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/web/index.d.ts

@@ -5,19 +5,26 @@
  * assume a page with a header, a mouse and room to spare. A phone app importing
  * the kit should not download them.
  *
- * Smaller than it was meant to be, and deliberately. The plan for this release
- * listed eight components; four of them had no user anywhere — `Pagination` was
- * not written once in any consumer, and `Tabs` and `Breadcrumb` appear only in
- * prose. A kit that ships a component nobody reached for is a kit guessing at
- * a shape, and `BaseRadioGroup` is already one standing reminder of that.
- *
- * `Tooltip` is missing for a better reason: the one consumer's tooltip is
- * CSS-only on purpose, because a tooltip that needs JavaScript to appear does
- * not appear in a prerendered page. Shipping a JavaScript one would have been
- * shipping the wrong answer in a nicer package.
+ * Everything a wide site is normally built from is here whether or not a
+ * consumer has reached for it yet. That is the rule in `AGENTS.md` — no waiting
+ * for a second consumer and no counting of call sites — and 0.17.0 broke it by
+ * shipping three of eight planned components on the grounds that the other five
+ * had no users. A kit is a separate project: somebody installing it should not
+ * have to hand-write a pagination control because the apps that happen to exist
+ * today do not paginate.
  */
 export { default as BaseAccordion } from './BaseAccordion.vue';
 export type { AccordionItem } from './BaseAccordion.vue';
+export { default as BaseBreadcrumb } from './BaseBreadcrumb.vue';
+export type { Crumb } from './BaseBreadcrumb.vue';
+/**
+ * One accordion row on its own.
+ *
+ * For the common case where the list belongs to the app — staggered as it
+ * scrolls in, interleaved with something else, or built from a source the
+ * accordion cannot know about.
+ */
+export { default as BaseDisclosure } from './BaseDisclosure.vue';
 /**
  * `BaseModal`, beside `BaseSheet` rather than named `Modal` on its own.
  *
@@ -26,5 +33,9 @@ export type { AccordionItem } from './BaseAccordion.vue';
  * to make somebody reaching for one notice the other exists.
  */
 export { default as BaseModal } from './BaseModal.vue';
+export { default as BasePagination } from './BasePagination.vue';
+export { default as BaseTabs } from './BaseTabs.vue';
+export type { TabPanel } from './BaseTabs.vue';
+export { default as BaseTooltip } from './BaseTooltip.vue';
 export { default as NavLinks } from './NavLinks.vue';
 export type { NavLinkItem } from './NavLinks.vue';

package/dist/web.js

@@ -1,20 +1,20 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
-import { Fragment, Teleport, Transition, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, onBeforeUnmount, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useModel, watch, withCtx, withModifiers } from "vue";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, onBeforeUnmount, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useModel, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 import { RouterLink } from "vue-router";
 //#region src/web/BaseAccordion.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = { class: "rk-accordion" };
-var _hoisted_2$2 = [
+var _hoisted_1$7 = { class: "rk-accordion" };
+var _hoisted_2$7 = [
 	"aria-expanded",
 	"aria-controls",
 	"onClick"
 ];
-var _hoisted_3$1 = { class: "rk-accordion-title" };
-var _hoisted_4$1 = {
+var _hoisted_3$5 = { class: "rk-accordion-title" };
+var _hoisted_4$4 = {
 	class: "rk-accordion-mark",
 	"aria-hidden": "true"
 };
-var _hoisted_5$1 = ["id"];
-var _hoisted_6$1 = { class: "rk-accordion-clip" };
+var _hoisted_5$3 = ["id"];
+var _hoisted_6$2 = { class: "rk-accordion-clip" };
 //#endregion
 //#region src/web/BaseAccordion.vue
 var BaseAccordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -36,7 +36,7 @@ var BaseAccordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			else open.value = __props.multiple ? [...open.value, key] : [key];
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("ul", _hoisted_1$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+			return openBlock(), createElementBlock("ul", _hoisted_1$7, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
 				return openBlock(), createElementBlock("li", {
 					key: item.key,
 					class: "rk-accordion-item"
@@ -47,26 +47,112 @@ var BaseAccordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 						"aria-expanded": isOpen(item.key),
 						"aria-controls": `${unref(uid)}-${item.key}`,
 						onClick: ($event) => toggle(item.key)
-					}, [createElementVNode("span", _hoisted_3$1, toDisplayString(item.title), 1), createElementVNode("span", _hoisted_4$1, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "rk-accordion-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-accordion-bar rk-accordion-bar-turn", { "is-open": isOpen(item.key) }]) }, null, 2)])], 8, _hoisted_2$2)]),
+					}, [createElementVNode("span", _hoisted_3$5, toDisplayString(item.title), 1), createElementVNode("span", _hoisted_4$4, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "rk-accordion-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-accordion-bar rk-accordion-bar-turn", { "is-open": isOpen(item.key) }]) }, null, 2)])], 8, _hoisted_2$7)]),
 					_: 2
 				}, 1024)), createElementVNode("div", {
 					id: `${unref(uid)}-${item.key}`,
 					class: normalizeClass(["rk-accordion-panel", { "is-open": isOpen(item.key) }])
-				}, [createElementVNode("div", _hoisted_6$1, [createElementVNode("div", { class: normalizeClass(["rk-accordion-body", { "is-open": isOpen(item.key) }]) }, [renderSlot(_ctx.$slots, "default", {
+				}, [createElementVNode("div", _hoisted_6$2, [createElementVNode("div", { class: normalizeClass(["rk-accordion-body", { "is-open": isOpen(item.key) }]) }, [renderSlot(_ctx.$slots, "default", {
 					item,
 					open: isOpen(item.key)
-				}, void 0, true)], 2)])], 10, _hoisted_5$1)]);
+				}, void 0, true)], 2)])], 10, _hoisted_5$3)]);
 			}), 128))]);
 		};
 	}
 }), [["__scopeId", "data-v-00091812"]]);
 //#endregion
+//#region src/web/BaseBreadcrumb.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$6 = ["aria-label"];
+var _hoisted_2$6 = { class: "rk-crumbs" };
+var _hoisted_3$4 = {
+	key: 1,
+	class: "rk-crumb-current",
+	"aria-current": "page"
+};
+var _hoisted_4$3 = {
+	key: 2,
+	class: "rk-crumb-sep",
+	"aria-hidden": "true"
+};
+//#endregion
+//#region src/web/BaseBreadcrumb.vue
+var BaseBreadcrumb_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseBreadcrumb",
+	props: {
+		items: {},
+		label: { default: "" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", { "aria-label": __props.label || void 0 }, [createElementVNode("ol", _hoisted_2$6, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				return openBlock(), createElementBlock("li", {
+					key: item.label,
+					class: "rk-crumb"
+				}, [item.to ? (openBlock(), createBlock(unref(RouterLink), {
+					key: 0,
+					to: item.to,
+					class: "rk-crumb-link"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+					_: 2
+				}, 1032, ["to"])) : (openBlock(), createElementBlock("span", _hoisted_3$4, toDisplayString(item.label), 1)), index < __props.items.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$3, "/")) : createCommentVNode("", true)]);
+			}), 128))])], 8, _hoisted_1$6);
+		};
+	}
+}), [["__scopeId", "data-v-85ee4b4e"]]);
+//#endregion
+//#region src/web/BaseDisclosure.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$5 = { class: "rk-disclosure" };
+var _hoisted_2$5 = ["aria-expanded", "aria-controls"];
+var _hoisted_3$3 = { class: "rk-disclosure-title" };
+var _hoisted_4$2 = {
+	class: "rk-disclosure-mark",
+	"aria-hidden": "true"
+};
+var _hoisted_5$2 = ["id"];
+var _hoisted_6$1 = { class: "rk-disclosure-clip" };
+//#endregion
+//#region src/web/BaseDisclosure.vue
+var BaseDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseDisclosure",
+	props: /*@__PURE__*/ mergeModels({
+		title: {},
+		headingLevel: { default: 3 }
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const open = useModel(__props, "modelValue");
+		const id = useId();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$5, [(openBlock(), createBlock(resolveDynamicComponent(`h${__props.headingLevel}`), null, {
+				default: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					class: "rk-disclosure-control",
+					"aria-expanded": open.value,
+					"aria-controls": unref(id),
+					onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
+				}, [createElementVNode("span", _hoisted_3$3, toDisplayString(__props.title), 1), createElementVNode("span", _hoisted_4$2, [_cache[1] || (_cache[1] = createElementVNode("span", { class: "rk-disclosure-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-disclosure-bar rk-disclosure-turn", { "is-open": open.value }]) }, null, 2)])], 8, _hoisted_2$5)]),
+				_: 1
+			})), createElementVNode("div", {
+				id: unref(id),
+				class: normalizeClass(["rk-disclosure-panel", { "is-open": open.value }])
+			}, [createElementVNode("div", _hoisted_6$1, [createElementVNode("div", { class: normalizeClass(["rk-disclosure-body", { "is-open": open.value }]) }, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 2)])], 10, _hoisted_5$2)]);
+		};
+	}
+}), [["__scopeId", "data-v-fef7de4d"]]);
+//#endregion
 //#region src/web/BaseModal.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = ["role", "aria-label"];
-var _hoisted_2$1 = { class: "rk-modal-head" };
-var _hoisted_3 = { class: "rk-modal-title" };
-var _hoisted_4 = ["aria-label"];
-var _hoisted_5 = { class: "rk-modal-body" };
+var _hoisted_1$4 = ["role", "aria-label"];
+var _hoisted_2$4 = { class: "rk-modal-head" };
+var _hoisted_3$2 = { class: "rk-modal-title" };
+var _hoisted_4$1 = ["aria-label"];
+var _hoisted_5$1 = { class: "rk-modal-body" };
 var _hoisted_6 = {
 	key: 0,
 	class: "rk-modal-actions"
@@ -180,7 +266,7 @@ var BaseModal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					"aria-label": __props.title,
 					tabindex: "-1"
 				}, [
-					createElementVNode("div", _hoisted_2$1, [createElementVNode("h2", _hoisted_3, toDisplayString(__props.title), 1), __props.dismissible ? (openBlock(), createElementBlock("button", {
+					createElementVNode("div", _hoisted_2$4, [createElementVNode("h2", _hoisted_3$2, toDisplayString(__props.title), 1), __props.dismissible ? (openBlock(), createElementBlock("button", {
 						key: 0,
 						type: "button",
 						class: "rk-modal-close",
@@ -194,16 +280,219 @@ var BaseModal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					}, [createElementVNode("path", {
 						d: "M18 6 6 18M6 6l12 12",
 						"stroke-linecap": "round"
-					})], -1)])], 8, _hoisted_4)) : createCommentVNode("", true)]),
-					createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+					})], -1)])], 8, _hoisted_4$1)) : createCommentVNode("", true)]),
+					createElementVNode("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 					_ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])) : createCommentVNode("", true)
-				], 8, _hoisted_1$1)], 32)) : createCommentVNode("", true)]),
+				], 8, _hoisted_1$4)], 32)) : createCommentVNode("", true)]),
 				_: 3
 			})]);
 		};
 	}
 }), [["__scopeId", "data-v-e092f731"]]);
 //#endregion
+//#region src/web/BasePagination.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = ["aria-label"];
+var _hoisted_2$3 = ["disabled", "aria-label"];
+var _hoisted_3$1 = {
+	key: 0,
+	class: "rk-pager-gap",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = ["aria-current", "onClick"];
+var _hoisted_5 = ["disabled", "aria-label"];
+/**
+* Moving between pages of a list.
+*
+* A `nav` of buttons rather than links, because this component does not know
+* whether the app pages by route, by query or in memory. It emits a number and
+* the app decides what that means.
+*
+* ## The ellipsis
+*
+* Every page number is unusable past about a dozen, and cutting to
+* "1 … 7 8 9 … 40" is what every list does. The window is a fixed size around
+* the current page and the first and last are always present, so the control
+* never changes width as you move through it — a row of numbers that reflows
+* under the pointer is a row you have to re-aim at.
+*
+* The gap is a `<span>`, not a disabled button: it is not a control, and
+* announcing it as one gives a screen reader something to try to press.
+*/
+var GAP = "gap";
+//#endregion
+//#region src/web/BasePagination.vue
+var BasePagination_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BasePagination",
+	props: {
+		page: {},
+		pages: {},
+		siblings: { default: 1 },
+		label: { default: "" },
+		previousLabel: {},
+		nextLabel: {}
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const slots = computed(() => {
+			if (__props.pages <= 1) return [1];
+			const first = 1;
+			const last = __props.pages;
+			if (__props.pages <= __props.siblings * 2 + 5) return Array.from({ length: __props.pages }, (_, i) => i + 1);
+			const from = Math.max(2, __props.page - __props.siblings);
+			const to = Math.min(last - 1, __props.page + __props.siblings);
+			const out = [first];
+			if (from > 2) out.push(GAP);
+			for (let n = from; n <= to; n++) out.push(n);
+			if (to < last - 1) out.push(GAP);
+			if (last > first) out.push(last);
+			return out;
+		});
+		const go = (next) => {
+			if (next >= 1 && next <= __props.pages && next !== __props.page) emit("change", next);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", {
+				class: "rk-pager",
+				"aria-label": __props.label || void 0
+			}, [
+				createElementVNode("button", {
+					type: "button",
+					class: "rk-pager-step",
+					disabled: __props.page <= 1,
+					"aria-label": __props.previousLabel,
+					onClick: _cache[0] || (_cache[0] = ($event) => go(__props.page - 1))
+				}, " ‹ ", 8, _hoisted_2$3),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(slots.value, (slot, index) => {
+					return openBlock(), createElementBlock(Fragment, { key: `${slot}-${index}` }, [slot === "gap" ? (openBlock(), createElementBlock("span", _hoisted_3$1, "…")) : (openBlock(), createElementBlock("button", {
+						key: 1,
+						type: "button",
+						class: normalizeClass(["rk-pager-page", { "is-active": slot === __props.page }]),
+						"aria-current": slot === __props.page ? "page" : void 0,
+						onClick: ($event) => go(slot)
+					}, toDisplayString(slot), 11, _hoisted_4))], 64);
+				}), 128)),
+				createElementVNode("button", {
+					type: "button",
+					class: "rk-pager-step",
+					disabled: __props.page >= __props.pages,
+					"aria-label": __props.nextLabel,
+					onClick: _cache[1] || (_cache[1] = ($event) => go(__props.page + 1))
+				}, " › ", 8, _hoisted_5)
+			], 8, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-cc4bbb58"]]);
+//#endregion
+//#region src/web/BaseTabs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = ["aria-label"];
+var _hoisted_2$2 = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"tabindex",
+	"onClick"
+];
+var _hoisted_3 = ["id", "aria-labelledby"];
+//#endregion
+//#region src/web/BaseTabs.vue
+var BaseTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseTabs",
+	props: /*@__PURE__*/ mergeModels({
+		items: {},
+		label: { default: "" }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const active = useModel(__props, "modelValue");
+		const uid = useId();
+		const tabs = ref([]);
+		const tabId = (key) => `${uid}-tab-${key}`;
+		const panelId = (key) => `${uid}-panel-${key}`;
+		function select(key, focus = false) {
+			active.value = key;
+			if (!focus) return;
+			const index = __props.items.findIndex((item) => item.key === key);
+			requestAnimationFrame(() => tabs.value[index]?.focus());
+		}
+		function onKeydown(event) {
+			const index = __props.items.findIndex((item) => item.key === active.value);
+			if (index < 0) return;
+			const last = __props.items.length - 1;
+			let next;
+			if (event.key === "ArrowRight") next = index === last ? 0 : index + 1;
+			else if (event.key === "ArrowLeft") next = index === 0 ? last : index - 1;
+			else if (event.key === "Home") next = 0;
+			else if (event.key === "End") next = last;
+			else return;
+			event.preventDefault();
+			const item = __props.items[next];
+			if (item) select(item.key, true);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [createElementVNode("div", {
+				class: "rk-tabs",
+				role: "tablist",
+				"aria-label": __props.label || void 0,
+				onKeydown
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+				return openBlock(), createElementBlock("button", {
+					key: item.key,
+					ref_for: true,
+					ref_key: "tabs",
+					ref: tabs,
+					type: "button",
+					role: "tab",
+					class: normalizeClass(["rk-tab", { "is-active": item.key === active.value }]),
+					id: tabId(item.key),
+					"aria-selected": item.key === active.value,
+					"aria-controls": panelId(item.key),
+					tabindex: item.key === active.value ? 0 : -1,
+					onClick: ($event) => select(item.key)
+				}, toDisplayString(item.label), 11, _hoisted_2$2);
+			}), 128))], 40, _hoisted_1$2), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+				return withDirectives((openBlock(), createElementBlock("div", {
+					key: item.key,
+					role: "tabpanel",
+					class: "rk-tabpanel",
+					id: panelId(item.key),
+					"aria-labelledby": tabId(item.key),
+					tabindex: "0"
+				}, [renderSlot(_ctx.$slots, "default", {
+					item,
+					active: active.value
+				}, void 0, true)], 8, _hoisted_3)), [[vShow, item.key === active.value]]);
+			}), 128))]);
+		};
+	}
+}), [["__scopeId", "data-v-b854e7f5"]]);
+//#endregion
+//#region src/web/BaseTooltip.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "rk-tip" };
+var _hoisted_2$1 = ["id"];
+//#endregion
+//#region src/web/BaseTooltip.vue
+var BaseTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseTooltip",
+	props: {
+		label: {},
+		placement: { default: "top" }
+	},
+	setup(__props) {
+		const id = useId();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", _hoisted_1$1, [renderSlot(_ctx.$slots, "default", { describedBy: unref(id) }, void 0, true), createElementVNode("span", {
+				id: unref(id),
+				role: "tooltip",
+				class: normalizeClass(["rk-tip-bubble", `is-${__props.placement}`])
+			}, toDisplayString(__props.label), 11, _hoisted_2$1)]);
+		};
+	}
+}), [["__scopeId", "data-v-3ed61bd4"]]);
+//#endregion
 //#region src/web/NavLinks.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
 var _hoisted_2 = { class: "rk-nav-inner" };
@@ -240,6 +529,6 @@ var NavLinks_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	}
 }), [["__scopeId", "data-v-5e640548"]]);
 //#endregion
-export { BaseAccordion_default as BaseAccordion, BaseModal_default as BaseModal, NavLinks_default as NavLinks };
+export { BaseAccordion_default as BaseAccordion, BaseBreadcrumb_default as BaseBreadcrumb, BaseDisclosure_default as BaseDisclosure, BaseModal_default as BaseModal, BasePagination_default as BasePagination, BaseTabs_default as BaseTabs, BaseTooltip_default as BaseTooltip, NavLinks_default as NavLinks };
 
 //# sourceMappingURL=web.js.map

package/dist/web.js.map

@@ -1 +1 @@
-{"version":3,"file":"web.js","names":["$slots"],"sources":["../src/web/BaseAccordion.vue","../src/web/BaseAccordion.vue","../src/web/BaseModal.vue","../src/web/BaseModal.vue","../src/web/NavLinks.vue","../src/web/NavLinks.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"K extends string\">\nimport { shallowRef, useId } from 'vue'\n\nexport interface AccordionItem<K extends string> {\n  key: K\n  /** The question. Already translated. */\n  title: string\n}\n\n/**\n * A list that opens one section at a time.\n *\n * ## Why not `<details>`\n *\n * `<details>` is the honest element for this and it was the first choice. A\n * browser removes its content from layout entirely when closed, so there is\n * nothing to animate between — the panel can only appear. Faking it by leaving\n * `open` set and hiding with CSS tells a screen reader the section is expanded\n * while a sighted reader sees it shut, which is worse than no animation.\n *\n * So: a button carrying `aria-expanded`, the answer always in the markup — the\n * prerendered HTML carries every answer, which is what a crawler and a reader\n * without JavaScript get — and a grid row that travels from `0fr` to `1fr`,\n * which is the one way to animate to a height nobody has measured.\n *\n * The content is always present, so anything expensive in it is paid for on\n * first paint. That is the trade: a section a crawler can read costs a section\n * that is never lazy.\n */\nconst {\n  items,\n  multiple = false,\n  headingLevel = 3,\n} = defineProps<{\n  items: readonly AccordionItem<K>[]\n  /** Allow several open at once. Off by default, which is what makes it an accordion. */\n  multiple?: boolean | undefined\n  /**\n   * Which heading the control sits inside.\n   *\n   * A heading, always — it is how a screen reader user moves between sections\n   * without opening any of them. The level is a prop because it depends on what\n   * is above it on the page, and getting it wrong breaks the outline.\n   */\n  headingLevel?: 2 | 3 | 4 | undefined\n}>()\n\ndefineSlots<{\n  /** The answer, per item. */\n  default: (props: { item: AccordionItem<K>; open: boolean }) => unknown\n}>()\n\nconst uid = useId()\n/* `shallowRef` because the list is replaced wholesale rather than mutated, and\n   because a deep ref unwraps a generic key type into something TypeScript can\n   no longer match against `K`. */\nconst open = shallowRef<K[]>([])\n\nconst isOpen = (key: K) => open.value.includes(key)\n\nfunction toggle(key: K) {\n  if (isOpen(key)) {\n    open.value = open.value.filter((k) => k !== key)\n  } else {\n    open.value = multiple ? [...open.value, key] : [key]\n  }\n}\n</script>\n\n<template>\n  <ul class=\"rk-accordion\">\n    <li v-for=\"item in items\" :key=\"item.key\" class=\"rk-accordion-item\">\n      <component :is=\"`h${headingLevel}`\">\n        <button\n          type=\"button\"\n          class=\"rk-accordion-control\"\n          :aria-expanded=\"isOpen(item.key)\"\n          :aria-controls=\"`${uid}-${item.key}`\"\n          @click=\"toggle(item.key)\"\n        >\n          <span class=\"rk-accordion-title\">{{ item.title }}</span>\n\n          <!-- A plus that becomes a minus: one stroke turns, so the control\n               keeps its place while it changes meaning. -->\n          <span class=\"rk-accordion-mark\" aria-hidden=\"true\">\n            <span class=\"rk-accordion-bar\" />\n            <span\n              class=\"rk-accordion-bar rk-accordion-bar-turn\"\n              :class=\"{ 'is-open': isOpen(item.key) }\"\n            />\n          </span>\n        </button>\n      </component>\n\n      <div\n        :id=\"`${uid}-${item.key}`\"\n        class=\"rk-accordion-panel\"\n        :class=\"{ 'is-open': isOpen(item.key) }\"\n      >\n        <div class=\"rk-accordion-clip\">\n          <div class=\"rk-accordion-body\" :class=\"{ 'is-open': isOpen(item.key) }\">\n            <slot :item=\"item\" :open=\"isOpen(item.key)\" />\n          </div>\n        </div>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<style scoped>\n.rk-accordion {\n  border-top: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n\n.rk-accordion-item {\n  border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n\n.rk-accordion-control {\n  display: flex;\n  width: 100%;\n  cursor: pointer;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1.5rem;\n  padding: 1.25rem 0;\n  text-align: left;\n  transition: color 150ms;\n}\n\n.rk-accordion-control:hover {\n  color: var(--color-primary);\n}\n\n.rk-accordion-control:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-accordion-title {\n  color: var(--color-ink);\n  font-size: 1rem;\n  font-weight: 500;\n}\n\n.rk-accordion-mark {\n  position: relative;\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.rk-accordion-bar {\n  position: absolute;\n  height: 1px;\n  width: 0.875rem;\n  background: var(--color-ink-soft);\n}\n\n.rk-accordion-bar-turn {\n  transform: rotate(90deg);\n  transition: transform 420ms ease-out;\n}\n\n.rk-accordion-bar-turn.is-open {\n  transform: rotate(0deg);\n}\n\n/* 0fr to 1fr is the whole trick: a grid row can be animated to a height that\n   was never measured, which is what `height: auto` cannot do. */\n.rk-accordion-panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 420ms ease-out;\n}\n\n.rk-accordion-panel.is-open {\n  grid-template-rows: 1fr;\n}\n\n.rk-accordion-clip {\n  overflow: hidden;\n}\n\n.rk-accordion-body {\n  max-width: 68ch;\n  padding-bottom: 1.5rem;\n  color: var(--color-ink-soft);\n  line-height: 1.625;\n  opacity: 0;\n  transition: opacity 300ms;\n}\n\n.rk-accordion-body.is-open {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-accordion-panel,\n  .rk-accordion-bar-turn,\n  .rk-accordion-body {\n    transition: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { shallowRef, useId } from 'vue'\n\nexport interface AccordionItem<K extends string> {\n  key: K\n  /** The question. Already translated. */\n  title: string\n}\n\n/**\n * A list that opens one section at a time.\n *\n * ## Why not `<details>`\n *\n * `<details>` is the honest element for this and it was the first choice. A\n * browser removes its content from layout entirely when closed, so there is\n * nothing to animate between — the panel can only appear. Faking it by leaving\n * `open` set and hiding with CSS tells a screen reader the section is expanded\n * while a sighted reader sees it shut, which is worse than no animation.\n *\n * So: a button carrying `aria-expanded`, the answer always in the markup — the\n * prerendered HTML carries every answer, which is what a crawler and a reader\n * without JavaScript get — and a grid row that travels from `0fr` to `1fr`,\n * which is the one way to animate to a height nobody has measured.\n *\n * The content is always present, so anything expensive in it is paid for on\n * first paint. That is the trade: a section a crawler can read costs a section\n * that is never lazy.\n */\nconst {\n  items,\n  multiple = false,\n  headingLevel = 3,\n} = defineProps<{\n  items: readonly AccordionItem<K>[]\n  /** Allow several open at once. Off by default, which is what makes it an accordion. */\n  multiple?: boolean | undefined\n  /**\n   * Which heading the control sits inside.\n   *\n   * A heading, always — it is how a screen reader user moves between sections\n   * without opening any of them. The level is a prop because it depends on what\n   * is above it on the page, and getting it wrong breaks the outline.\n   */\n  headingLevel?: 2 | 3 | 4 | undefined\n}>()\n\ndefineSlots<{\n  /** The answer, per item. */\n  default: (props: { item: AccordionItem<K>; open: boolean }) => unknown\n}>()\n\nconst uid = useId()\n/* `shallowRef` because the list is replaced wholesale rather than mutated, and\n   because a deep ref unwraps a generic key type into something TypeScript can\n   no longer match against `K`. */\nconst open = shallowRef<K[]>([])\n\nconst isOpen = (key: K) => open.value.includes(key)\n\nfunction toggle(key: K) {\n  if (isOpen(key)) {\n    open.value = open.value.filter((k) => k !== key)\n  } else {\n    open.value = multiple ? [...open.value, key] : [key]\n  }\n}\n</script>\n\n<template>\n  <ul class=\"rk-accordion\">\n    <li v-for=\"item in items\" :key=\"item.key\" class=\"rk-accordion-item\">\n      <component :is=\"`h${headingLevel}`\">\n        <button\n          type=\"button\"\n          class=\"rk-accordion-control\"\n          :aria-expanded=\"isOpen(item.key)\"\n          :aria-controls=\"`${uid}-${item.key}`\"\n          @click=\"toggle(item.key)\"\n        >\n          <span class=\"rk-accordion-title\">{{ item.title }}</span>\n\n          <!-- A plus that becomes a minus: one stroke turns, so the control\n               keeps its place while it changes meaning. -->\n          <span class=\"rk-accordion-mark\" aria-hidden=\"true\">\n            <span class=\"rk-accordion-bar\" />\n            <span\n              class=\"rk-accordion-bar rk-accordion-bar-turn\"\n              :class=\"{ 'is-open': isOpen(item.key) }\"\n            />\n          </span>\n        </button>\n      </component>\n\n      <div\n        :id=\"`${uid}-${item.key}`\"\n        class=\"rk-accordion-panel\"\n        :class=\"{ 'is-open': isOpen(item.key) }\"\n      >\n        <div class=\"rk-accordion-clip\">\n          <div class=\"rk-accordion-body\" :class=\"{ 'is-open': isOpen(item.key) }\">\n            <slot :item=\"item\" :open=\"isOpen(item.key)\" />\n          </div>\n        </div>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<style scoped>\n.rk-accordion {\n  border-top: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n\n.rk-accordion-item {\n  border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n\n.rk-accordion-control {\n  display: flex;\n  width: 100%;\n  cursor: pointer;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1.5rem;\n  padding: 1.25rem 0;\n  text-align: left;\n  transition: color 150ms;\n}\n\n.rk-accordion-control:hover {\n  color: var(--color-primary);\n}\n\n.rk-accordion-control:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-accordion-title {\n  color: var(--color-ink);\n  font-size: 1rem;\n  font-weight: 500;\n}\n\n.rk-accordion-mark {\n  position: relative;\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.rk-accordion-bar {\n  position: absolute;\n  height: 1px;\n  width: 0.875rem;\n  background: var(--color-ink-soft);\n}\n\n.rk-accordion-bar-turn {\n  transform: rotate(90deg);\n  transition: transform 420ms ease-out;\n}\n\n.rk-accordion-bar-turn.is-open {\n  transform: rotate(0deg);\n}\n\n/* 0fr to 1fr is the whole trick: a grid row can be animated to a height that\n   was never measured, which is what `height: auto` cannot do. */\n.rk-accordion-panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 420ms ease-out;\n}\n\n.rk-accordion-panel.is-open {\n  grid-template-rows: 1fr;\n}\n\n.rk-accordion-clip {\n  overflow: hidden;\n}\n\n.rk-accordion-body {\n  max-width: 68ch;\n  padding-bottom: 1.5rem;\n  color: var(--color-ink-soft);\n  line-height: 1.625;\n  opacity: 0;\n  transition: opacity 300ms;\n}\n\n.rk-accordion-body.is-open {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-accordion-panel,\n  .rk-accordion-bar-turn,\n  .rk-accordion-body {\n    transition: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, ref, watch } from 'vue'\n\n/**\n * A dialog that arrives from nowhere.\n *\n * Not `BaseSheet` with different padding. A sheet slides up from the bottom\n * edge, is dismissed by dragging it back down, and belongs to a thumb; a modal\n * appears in the middle of what you were reading and is dismissed by leaving\n * it. They are two answers to two questions and merging them would give a\n * component that is wrong on a phone and wrong on a desktop.\n *\n * ## The parts that are easy to get wrong\n *\n * This is why it exists rather than being written per dialog, which is what the\n * one wide consumer was doing in two places. None of the following is visible\n * on screen when it is missing:\n *\n * - **Focus moves in and comes back.** Opening without moving focus leaves a\n *   keyboard user behind the dialog, operating a page they cannot see. Closing\n *   without restoring it drops them at the top of the document.\n * - **Tab does not leave.** A dialog you can Tab out of is a dialog that is\n *   modal only to somebody using a mouse.\n * - **Escape closes.** Every dialog in every application does this.\n * - **The page underneath does not scroll.** Otherwise dismissing the dialog\n *   returns you somewhere else.\n * - **The backdrop closes it, the panel does not.** A click that starts inside\n *   the panel and ends on the backdrop is not a click on the backdrop, which is\n *   why this listens for a press on the backdrop itself rather than any click\n *   that reaches it.\n */\nconst {\n  title,\n  closeLabel,\n  tone = 'default',\n  dismissible = true,\n} = defineProps<{\n  /** Names the dialog for assistive tech. Required; an unnamed dialog is a box. */\n  title: string\n  /** Accessible name for the close button. */\n  closeLabel: string\n  /**\n   * `alert` marks it as a decision that interrupts — `role=\"alertdialog\"`,\n   * which a screen reader announces immediately rather than on arrival.\n   */\n  tone?: 'default' | 'alert' | undefined\n  /**\n   * Whether Escape and the backdrop close it.\n   *\n   * Off for a dialog that must be answered — but never off as a way of forcing\n   * a reader to a decision they have not been given the information for.\n   */\n  dismissible?: boolean | undefined\n}>()\n\nconst open = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The body. */\n  default: () => unknown\n  /** Buttons, at the foot. */\n  actions?: () => unknown\n}>()\n\nconst panel = ref<HTMLElement | null>(null)\n/** Who had focus before this opened, so it can be given back. */\nlet restoreTo: HTMLElement | null = null\n\nconst FOCUSABLE =\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n\nfunction focusable(): HTMLElement[] {\n  if (!panel.value) return []\n\n  return Array.from(panel.value.querySelectorAll<HTMLElement>(FOCUSABLE))\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && dismissible) {\n    event.stopPropagation()\n    open.value = false\n\n    return\n  }\n\n  if (event.key !== 'Tab') return\n\n  const items = focusable()\n  if (items.length === 0) return event.preventDefault()\n\n  const first = items[0]!\n  const last = items[items.length - 1]!\n  const active = document.activeElement\n\n  // The wrap has to be done by hand: the browser's own Tab order is the whole\n  // document, and the dialog is only part of it.\n  if (event.shiftKey && (active === first || !panel.value?.contains(active))) {\n    event.preventDefault()\n    last.focus()\n  } else if (!event.shiftKey && active === last) {\n    event.preventDefault()\n    first.focus()\n  }\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    restoreTo = document.activeElement as HTMLElement | null\n    document.body.style.overflow = 'hidden'\n    await nextTick()\n    // The panel itself when it holds nothing focusable, so focus is at least\n    // inside the dialog rather than behind it.\n    ;(focusable()[0] ?? panel.value)?.focus()\n  } else {\n    document.body.style.overflow = ''\n    restoreTo?.focus()\n    restoreTo = null\n  }\n})\n\n// A dialog unmounted while open would otherwise leave the page unscrollable,\n// with nothing on screen to explain why.\nonBeforeUnmount(() => {\n  if (open.value) document.body.style.overflow = ''\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"rk-modal\">\n      <div\n        v-if=\"open\"\n        class=\"rk-modal-scrim\"\n        @keydown=\"onKeydown\"\n        @mousedown.self=\"dismissible && (open = false)\"\n      >\n        <div\n          ref=\"panel\"\n          class=\"rk-modal-panel\"\n          :role=\"tone === 'alert' ? 'alertdialog' : 'dialog'\"\n          aria-modal=\"true\"\n          :aria-label=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"rk-modal-head\">\n            <h2 class=\"rk-modal-title\">{{ title }}</h2>\n\n            <button\n              v-if=\"dismissible\"\n              type=\"button\"\n              class=\"rk-modal-close\"\n              :aria-label=\"closeLabel\"\n              @click=\"open = false\"\n            >\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M18 6 6 18M6 6l12 12\" stroke-linecap=\"round\" />\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"rk-modal-body\"><slot /></div>\n\n          <div v-if=\"$slots.actions\" class=\"rk-modal-actions\"><slot name=\"actions\" /></div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.rk-modal-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: grid;\n  place-items: center;\n  padding: 1.5rem;\n  background: color-mix(in srgb, var(--color-ink) 70%, transparent);\n  backdrop-filter: blur(4px);\n}\n\n.rk-modal-panel {\n  width: 100%;\n  max-width: 28rem;\n  max-height: 85vh;\n  overflow-y: auto;\n  border-radius: var(--radius-card);\n  background: var(--color-surface);\n  padding: 1.5rem;\n  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2);\n}\n\n.rk-modal-panel:focus {\n  outline: none;\n}\n\n.rk-modal-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.rk-modal-title {\n  font-size: 1.0625rem;\n  font-weight: 600;\n  color: var(--color-ink);\n}\n\n.rk-modal-close {\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 9999px;\n  color: var(--color-ink-soft);\n  transition: background-color 150ms;\n}\n\n.rk-modal-close:hover {\n  background: var(--color-muted);\n}\n\n.rk-modal-close:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-modal-close svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n.rk-modal-body {\n  margin-top: 0.75rem;\n  color: var(--color-ink-soft);\n  font-size: 0.875rem;\n  line-height: 1.625;\n}\n\n.rk-modal-actions {\n  margin-top: 1.5rem;\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n\n.rk-modal-enter-active,\n.rk-modal-leave-active {\n  transition: opacity 180ms ease;\n}\n\n.rk-modal-enter-active .rk-modal-panel,\n.rk-modal-leave-active .rk-modal-panel {\n  transition:\n    transform 180ms cubic-bezier(0.32, 0.72, 0, 1),\n    opacity 180ms ease;\n}\n\n.rk-modal-enter-from,\n.rk-modal-leave-to {\n  opacity: 0;\n}\n\n/* From nowhere, not from an edge: a scale is what separates this from a sheet. */\n.rk-modal-enter-from .rk-modal-panel,\n.rk-modal-leave-to .rk-modal-panel {\n  transform: scale(0.96);\n  opacity: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-modal-enter-active .rk-modal-panel,\n  .rk-modal-leave-active .rk-modal-panel {\n    transition: opacity 180ms ease;\n    transform: none;\n  }\n\n  .rk-modal-enter-from .rk-modal-panel,\n  .rk-modal-leave-to .rk-modal-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, ref, watch } from 'vue'\n\n/**\n * A dialog that arrives from nowhere.\n *\n * Not `BaseSheet` with different padding. A sheet slides up from the bottom\n * edge, is dismissed by dragging it back down, and belongs to a thumb; a modal\n * appears in the middle of what you were reading and is dismissed by leaving\n * it. They are two answers to two questions and merging them would give a\n * component that is wrong on a phone and wrong on a desktop.\n *\n * ## The parts that are easy to get wrong\n *\n * This is why it exists rather than being written per dialog, which is what the\n * one wide consumer was doing in two places. None of the following is visible\n * on screen when it is missing:\n *\n * - **Focus moves in and comes back.** Opening without moving focus leaves a\n *   keyboard user behind the dialog, operating a page they cannot see. Closing\n *   without restoring it drops them at the top of the document.\n * - **Tab does not leave.** A dialog you can Tab out of is a dialog that is\n *   modal only to somebody using a mouse.\n * - **Escape closes.** Every dialog in every application does this.\n * - **The page underneath does not scroll.** Otherwise dismissing the dialog\n *   returns you somewhere else.\n * - **The backdrop closes it, the panel does not.** A click that starts inside\n *   the panel and ends on the backdrop is not a click on the backdrop, which is\n *   why this listens for a press on the backdrop itself rather than any click\n *   that reaches it.\n */\nconst {\n  title,\n  closeLabel,\n  tone = 'default',\n  dismissible = true,\n} = defineProps<{\n  /** Names the dialog for assistive tech. Required; an unnamed dialog is a box. */\n  title: string\n  /** Accessible name for the close button. */\n  closeLabel: string\n  /**\n   * `alert` marks it as a decision that interrupts — `role=\"alertdialog\"`,\n   * which a screen reader announces immediately rather than on arrival.\n   */\n  tone?: 'default' | 'alert' | undefined\n  /**\n   * Whether Escape and the backdrop close it.\n   *\n   * Off for a dialog that must be answered — but never off as a way of forcing\n   * a reader to a decision they have not been given the information for.\n   */\n  dismissible?: boolean | undefined\n}>()\n\nconst open = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The body. */\n  default: () => unknown\n  /** Buttons, at the foot. */\n  actions?: () => unknown\n}>()\n\nconst panel = ref<HTMLElement | null>(null)\n/** Who had focus before this opened, so it can be given back. */\nlet restoreTo: HTMLElement | null = null\n\nconst FOCUSABLE =\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n\nfunction focusable(): HTMLElement[] {\n  if (!panel.value) return []\n\n  return Array.from(panel.value.querySelectorAll<HTMLElement>(FOCUSABLE))\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && dismissible) {\n    event.stopPropagation()\n    open.value = false\n\n    return\n  }\n\n  if (event.key !== 'Tab') return\n\n  const items = focusable()\n  if (items.length === 0) return event.preventDefault()\n\n  const first = items[0]!\n  const last = items[items.length - 1]!\n  const active = document.activeElement\n\n  // The wrap has to be done by hand: the browser's own Tab order is the whole\n  // document, and the dialog is only part of it.\n  if (event.shiftKey && (active === first || !panel.value?.contains(active))) {\n    event.preventDefault()\n    last.focus()\n  } else if (!event.shiftKey && active === last) {\n    event.preventDefault()\n    first.focus()\n  }\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    restoreTo = document.activeElement as HTMLElement | null\n    document.body.style.overflow = 'hidden'\n    await nextTick()\n    // The panel itself when it holds nothing focusable, so focus is at least\n    // inside the dialog rather than behind it.\n    ;(focusable()[0] ?? panel.value)?.focus()\n  } else {\n    document.body.style.overflow = ''\n    restoreTo?.focus()\n    restoreTo = null\n  }\n})\n\n// A dialog unmounted while open would otherwise leave the page unscrollable,\n// with nothing on screen to explain why.\nonBeforeUnmount(() => {\n  if (open.value) document.body.style.overflow = ''\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"rk-modal\">\n      <div\n        v-if=\"open\"\n        class=\"rk-modal-scrim\"\n        @keydown=\"onKeydown\"\n        @mousedown.self=\"dismissible && (open = false)\"\n      >\n        <div\n          ref=\"panel\"\n          class=\"rk-modal-panel\"\n          :role=\"tone === 'alert' ? 'alertdialog' : 'dialog'\"\n          aria-modal=\"true\"\n          :aria-label=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"rk-modal-head\">\n            <h2 class=\"rk-modal-title\">{{ title }}</h2>\n\n            <button\n              v-if=\"dismissible\"\n              type=\"button\"\n              class=\"rk-modal-close\"\n              :aria-label=\"closeLabel\"\n              @click=\"open = false\"\n            >\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M18 6 6 18M6 6l12 12\" stroke-linecap=\"round\" />\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"rk-modal-body\"><slot /></div>\n\n          <div v-if=\"$slots.actions\" class=\"rk-modal-actions\"><slot name=\"actions\" /></div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.rk-modal-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: grid;\n  place-items: center;\n  padding: 1.5rem;\n  background: color-mix(in srgb, var(--color-ink) 70%, transparent);\n  backdrop-filter: blur(4px);\n}\n\n.rk-modal-panel {\n  width: 100%;\n  max-width: 28rem;\n  max-height: 85vh;\n  overflow-y: auto;\n  border-radius: var(--radius-card);\n  background: var(--color-surface);\n  padding: 1.5rem;\n  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2);\n}\n\n.rk-modal-panel:focus {\n  outline: none;\n}\n\n.rk-modal-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.rk-modal-title {\n  font-size: 1.0625rem;\n  font-weight: 600;\n  color: var(--color-ink);\n}\n\n.rk-modal-close {\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 9999px;\n  color: var(--color-ink-soft);\n  transition: background-color 150ms;\n}\n\n.rk-modal-close:hover {\n  background: var(--color-muted);\n}\n\n.rk-modal-close:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-modal-close svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n.rk-modal-body {\n  margin-top: 0.75rem;\n  color: var(--color-ink-soft);\n  font-size: 0.875rem;\n  line-height: 1.625;\n}\n\n.rk-modal-actions {\n  margin-top: 1.5rem;\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n\n.rk-modal-enter-active,\n.rk-modal-leave-active {\n  transition: opacity 180ms ease;\n}\n\n.rk-modal-enter-active .rk-modal-panel,\n.rk-modal-leave-active .rk-modal-panel {\n  transition:\n    transform 180ms cubic-bezier(0.32, 0.72, 0, 1),\n    opacity 180ms ease;\n}\n\n.rk-modal-enter-from,\n.rk-modal-leave-to {\n  opacity: 0;\n}\n\n/* From nowhere, not from an edge: a scale is what separates this from a sheet. */\n.rk-modal-enter-from .rk-modal-panel,\n.rk-modal-leave-to .rk-modal-panel {\n  transform: scale(0.96);\n  opacity: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-modal-enter-active .rk-modal-panel,\n  .rk-modal-leave-active .rk-modal-panel {\n    transition: opacity 180ms ease;\n    transform: none;\n  }\n\n  .rk-modal-enter-from .rk-modal-panel,\n  .rk-modal-leave-to .rk-modal-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { RouterLink } from 'vue-router'\n\nexport interface NavLinkItem<K extends string> {\n  /** Identity, compared against `active`. */\n  key: K\n  /** Router destination. */\n  to: string\n  /** Already translated. */\n  label: string\n}\n\n/**\n * The primary navigation of a wide site.\n *\n * The same contract as `TabBar` minus the icon, so moving an app between a\n * bottom bar and a top one is a change of component and not of data. That is\n * the whole reason the shapes match.\n *\n * A rule under the current section rather than a filled pill: at this size a\n * pill reads as a button, and these are not buttons — they are where you are.\n * The rule is a scaled element rather than a border so it can travel, and it is\n * `aria-hidden` because `aria-current` already says the same thing to anyone not\n * looking at it.\n */\nconst {\n  items,\n  active,\n  label = '',\n} = defineProps<{\n  items: readonly NavLinkItem<K>[]\n  /** Which item is current. Usually derived from the route. */\n  active?: K | undefined\n  /** Accessible name for the navigation landmark. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <nav :aria-label=\"label || undefined\">\n    <div class=\"rk-nav-inner\">\n      <RouterLink\n        v-for=\"item in items\"\n        :key=\"item.key\"\n        :to=\"item.to\"\n        class=\"rk-nav-link\"\n        :class=\"{ 'is-active': item.key === active }\"\n        :aria-current=\"item.key === active ? 'page' : undefined\"\n      >\n        {{ item.label }}\n        <span class=\"rk-nav-rule\" aria-hidden=\"true\" />\n      </RouterLink>\n    </div>\n  </nav>\n</template>\n\n<style scoped>\n/* The root carries no layout of its own, and that is the fix for a real bug\n   rather than a style preference.\n\n   A rule on the root loses to nothing: Vue's scoped CSS compiles `.rk-nav` to\n   `.rk-nav[data-v-hash]`, which outranks a utility class like Tailwind's\n   `hidden` outright — so `class=\"hidden sm:flex\"` did nothing and the nav\n   appeared on a phone, on top of the call to action. `:where()` does not save\n   it either; the scoping attribute puts the specificity back.\n\n   So the flex row lives on an element the caller does not own, and the root is\n   left for them to style. `TabBar` is built the same way for the same reason. */\n.rk-nav-inner {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.rk-nav-link {\n  position: relative;\n  border-radius: var(--radius-cell);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  color: var(--color-ink-soft);\n  transition: color 150ms;\n}\n\n.rk-nav-link:hover {\n  color: var(--color-ink);\n}\n\n.rk-nav-link:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-nav-link.is-active {\n  color: var(--color-ink);\n  font-weight: 500;\n}\n\n.rk-nav-rule {\n  position: absolute;\n  inset-inline: 0.75rem;\n  bottom: -1px;\n  height: 2px;\n  border-radius: 9999px;\n  background: var(--color-primary);\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 300ms;\n}\n\n.rk-nav-link.is-active .rk-nav-rule {\n  transform: scaleX(1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-nav-rule {\n    transition: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { RouterLink } from 'vue-router'\n\nexport interface NavLinkItem<K extends string> {\n  /** Identity, compared against `active`. */\n  key: K\n  /** Router destination. */\n  to: string\n  /** Already translated. */\n  label: string\n}\n\n/**\n * The primary navigation of a wide site.\n *\n * The same contract as `TabBar` minus the icon, so moving an app between a\n * bottom bar and a top one is a change of component and not of data. That is\n * the whole reason the shapes match.\n *\n * A rule under the current section rather than a filled pill: at this size a\n * pill reads as a button, and these are not buttons — they are where you are.\n * The rule is a scaled element rather than a border so it can travel, and it is\n * `aria-hidden` because `aria-current` already says the same thing to anyone not\n * looking at it.\n */\nconst {\n  items,\n  active,\n  label = '',\n} = defineProps<{\n  items: readonly NavLinkItem<K>[]\n  /** Which item is current. Usually derived from the route. */\n  active?: K | undefined\n  /** Accessible name for the navigation landmark. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <nav :aria-label=\"label || undefined\">\n    <div class=\"rk-nav-inner\">\n      <RouterLink\n        v-for=\"item in items\"\n        :key=\"item.key\"\n        :to=\"item.to\"\n        class=\"rk-nav-link\"\n        :class=\"{ 'is-active': item.key === active }\"\n        :aria-current=\"item.key === active ? 'page' : undefined\"\n      >\n        {{ item.label }}\n        <span class=\"rk-nav-rule\" aria-hidden=\"true\" />\n      </RouterLink>\n    </div>\n  </nav>\n</template>\n\n<style scoped>\n/* The root carries no layout of its own, and that is the fix for a real bug\n   rather than a style preference.\n\n   A rule on the root loses to nothing: Vue's scoped CSS compiles `.rk-nav` to\n   `.rk-nav[data-v-hash]`, which outranks a utility class like Tailwind's\n   `hidden` outright — so `class=\"hidden sm:flex\"` did nothing and the nav\n   appeared on a phone, on top of the call to action. `:where()` does not save\n   it either; the scoping attribute puts the specificity back.\n\n   So the flex row lives on an element the caller does not own, and the root is\n   left for them to style. `TabBar` is built the same way for the same reason. */\n.rk-nav-inner {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.rk-nav-link {\n  position: relative;\n  border-radius: var(--radius-cell);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  color: var(--color-ink-soft);\n  transition: color 150ms;\n}\n\n.rk-nav-link:hover {\n  color: var(--color-ink);\n}\n\n.rk-nav-link:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-nav-link.is-active {\n  color: var(--color-ink);\n  font-weight: 500;\n}\n\n.rk-nav-rule {\n  position: absolute;\n  inset-inline: 0.75rem;\n  bottom: -1px;\n  height: 2px;\n  border-radius: 9999px;\n  background: var(--color-primary);\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 300ms;\n}\n\n.rk-nav-link.is-active .rk-nav-rule {\n  transform: scaleX(1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-nav-rule {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"web.js","names":["$slots"],"sources":["../src/web/BaseAccordion.vue","../src/web/BaseAccordion.vue","../src/web/BaseBreadcrumb.vue","../src/web/BaseBreadcrumb.vue","../src/web/BaseDisclosure.vue","../src/web/BaseDisclosure.vue","../src/web/BaseModal.vue","../src/web/BaseModal.vue","../src/web/BasePagination.vue","../src/web/BasePagination.vue","../src/web/BaseTabs.vue","../src/web/BaseTabs.vue","../src/web/BaseTooltip.vue","../src/web/BaseTooltip.vue","../src/web/NavLinks.vue","../src/web/NavLinks.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"K extends string\">\nimport { shallowRef, useId } from 'vue'\n\nexport interface AccordionItem<K extends string> {\n  key: K\n  /** The question. Already translated. */\n  title: string\n}\n\n/**\n * A list that opens one section at a time.\n *\n * ## Why not `<details>`\n *\n * `<details>` is the honest element for this and it was the first choice. A\n * browser removes its content from layout entirely when closed, so there is\n * nothing to animate between — the panel can only appear. Faking it by leaving\n * `open` set and hiding with CSS tells a screen reader the section is expanded\n * while a sighted reader sees it shut, which is worse than no animation.\n *\n * So: a button carrying `aria-expanded`, the answer always in the markup — the\n * prerendered HTML carries every answer, which is what a crawler and a reader\n * without JavaScript get — and a grid row that travels from `0fr` to `1fr`,\n * which is the one way to animate to a height nobody has measured.\n *\n * The content is always present, so anything expensive in it is paid for on\n * first paint. That is the trade: a section a crawler can read costs a section\n * that is never lazy.\n */\nconst {\n  items,\n  multiple = false,\n  headingLevel = 3,\n} = defineProps<{\n  items: readonly AccordionItem<K>[]\n  /** Allow several open at once. Off by default, which is what makes it an accordion. */\n  multiple?: boolean | undefined\n  /**\n   * Which heading the control sits inside.\n   *\n   * A heading, always — it is how a screen reader user moves between sections\n   * without opening any of them. The level is a prop because it depends on what\n   * is above it on the page, and getting it wrong breaks the outline.\n   */\n  headingLevel?: 2 | 3 | 4 | undefined\n}>()\n\ndefineSlots<{\n  /** The answer, per item. */\n  default: (props: { item: AccordionItem<K>; open: boolean }) => unknown\n}>()\n\nconst uid = useId()\n/* `shallowRef` because the list is replaced wholesale rather than mutated, and\n   because a deep ref unwraps a generic key type into something TypeScript can\n   no longer match against `K`. */\nconst open = shallowRef<K[]>([])\n\nconst isOpen = (key: K) => open.value.includes(key)\n\nfunction toggle(key: K) {\n  if (isOpen(key)) {\n    open.value = open.value.filter((k) => k !== key)\n  } else {\n    open.value = multiple ? [...open.value, key] : [key]\n  }\n}\n</script>\n\n<template>\n  <ul class=\"rk-accordion\">\n    <li v-for=\"item in items\" :key=\"item.key\" class=\"rk-accordion-item\">\n      <component :is=\"`h${headingLevel}`\">\n        <button\n          type=\"button\"\n          class=\"rk-accordion-control\"\n          :aria-expanded=\"isOpen(item.key)\"\n          :aria-controls=\"`${uid}-${item.key}`\"\n          @click=\"toggle(item.key)\"\n        >\n          <span class=\"rk-accordion-title\">{{ item.title }}</span>\n\n          <!-- A plus that becomes a minus: one stroke turns, so the control\n               keeps its place while it changes meaning. -->\n          <span class=\"rk-accordion-mark\" aria-hidden=\"true\">\n            <span class=\"rk-accordion-bar\" />\n            <span\n              class=\"rk-accordion-bar rk-accordion-bar-turn\"\n              :class=\"{ 'is-open': isOpen(item.key) }\"\n            />\n          </span>\n        </button>\n      </component>\n\n      <div\n        :id=\"`${uid}-${item.key}`\"\n        class=\"rk-accordion-panel\"\n        :class=\"{ 'is-open': isOpen(item.key) }\"\n      >\n        <div class=\"rk-accordion-clip\">\n          <div class=\"rk-accordion-body\" :class=\"{ 'is-open': isOpen(item.key) }\">\n            <slot :item=\"item\" :open=\"isOpen(item.key)\" />\n          </div>\n        </div>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<style scoped>\n.rk-accordion {\n  border-top: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n\n.rk-accordion-item {\n  border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n\n.rk-accordion-control {\n  display: flex;\n  width: 100%;\n  cursor: pointer;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1.5rem;\n  padding: 1.25rem 0;\n  text-align: left;\n  transition: color 150ms;\n}\n\n.rk-accordion-control:hover {\n  color: var(--color-primary);\n}\n\n.rk-accordion-control:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-accordion-title {\n  color: var(--color-ink);\n  font-size: 1rem;\n  font-weight: 500;\n}\n\n.rk-accordion-mark {\n  position: relative;\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.rk-accordion-bar {\n  position: absolute;\n  height: 1px;\n  width: 0.875rem;\n  background: var(--color-ink-soft);\n}\n\n.rk-accordion-bar-turn {\n  transform: rotate(90deg);\n  transition: transform 420ms ease-out;\n}\n\n.rk-accordion-bar-turn.is-open {\n  transform: rotate(0deg);\n}\n\n/* 0fr to 1fr is the whole trick: a grid row can be animated to a height that\n   was never measured, which is what `height: auto` cannot do. */\n.rk-accordion-panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 420ms ease-out;\n}\n\n.rk-accordion-panel.is-open {\n  grid-template-rows: 1fr;\n}\n\n.rk-accordion-clip {\n  overflow: hidden;\n}\n\n.rk-accordion-body {\n  max-width: 68ch;\n  padding-bottom: 1.5rem;\n  color: var(--color-ink-soft);\n  line-height: 1.625;\n  opacity: 0;\n  transition: opacity 300ms;\n}\n\n.rk-accordion-body.is-open {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-accordion-panel,\n  .rk-accordion-bar-turn,\n  .rk-accordion-body {\n    transition: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { shallowRef, useId } from 'vue'\n\nexport interface AccordionItem<K extends string> {\n  key: K\n  /** The question. Already translated. */\n  title: string\n}\n\n/**\n * A list that opens one section at a time.\n *\n * ## Why not `<details>`\n *\n * `<details>` is the honest element for this and it was the first choice. A\n * browser removes its content from layout entirely when closed, so there is\n * nothing to animate between — the panel can only appear. Faking it by leaving\n * `open` set and hiding with CSS tells a screen reader the section is expanded\n * while a sighted reader sees it shut, which is worse than no animation.\n *\n * So: a button carrying `aria-expanded`, the answer always in the markup — the\n * prerendered HTML carries every answer, which is what a crawler and a reader\n * without JavaScript get — and a grid row that travels from `0fr` to `1fr`,\n * which is the one way to animate to a height nobody has measured.\n *\n * The content is always present, so anything expensive in it is paid for on\n * first paint. That is the trade: a section a crawler can read costs a section\n * that is never lazy.\n */\nconst {\n  items,\n  multiple = false,\n  headingLevel = 3,\n} = defineProps<{\n  items: readonly AccordionItem<K>[]\n  /** Allow several open at once. Off by default, which is what makes it an accordion. */\n  multiple?: boolean | undefined\n  /**\n   * Which heading the control sits inside.\n   *\n   * A heading, always — it is how a screen reader user moves between sections\n   * without opening any of them. The level is a prop because it depends on what\n   * is above it on the page, and getting it wrong breaks the outline.\n   */\n  headingLevel?: 2 | 3 | 4 | undefined\n}>()\n\ndefineSlots<{\n  /** The answer, per item. */\n  default: (props: { item: AccordionItem<K>; open: boolean }) => unknown\n}>()\n\nconst uid = useId()\n/* `shallowRef` because the list is replaced wholesale rather than mutated, and\n   because a deep ref unwraps a generic key type into something TypeScript can\n   no longer match against `K`. */\nconst open = shallowRef<K[]>([])\n\nconst isOpen = (key: K) => open.value.includes(key)\n\nfunction toggle(key: K) {\n  if (isOpen(key)) {\n    open.value = open.value.filter((k) => k !== key)\n  } else {\n    open.value = multiple ? [...open.value, key] : [key]\n  }\n}\n</script>\n\n<template>\n  <ul class=\"rk-accordion\">\n    <li v-for=\"item in items\" :key=\"item.key\" class=\"rk-accordion-item\">\n      <component :is=\"`h${headingLevel}`\">\n        <button\n          type=\"button\"\n          class=\"rk-accordion-control\"\n          :aria-expanded=\"isOpen(item.key)\"\n          :aria-controls=\"`${uid}-${item.key}`\"\n          @click=\"toggle(item.key)\"\n        >\n          <span class=\"rk-accordion-title\">{{ item.title }}</span>\n\n          <!-- A plus that becomes a minus: one stroke turns, so the control\n               keeps its place while it changes meaning. -->\n          <span class=\"rk-accordion-mark\" aria-hidden=\"true\">\n            <span class=\"rk-accordion-bar\" />\n            <span\n              class=\"rk-accordion-bar rk-accordion-bar-turn\"\n              :class=\"{ 'is-open': isOpen(item.key) }\"\n            />\n          </span>\n        </button>\n      </component>\n\n      <div\n        :id=\"`${uid}-${item.key}`\"\n        class=\"rk-accordion-panel\"\n        :class=\"{ 'is-open': isOpen(item.key) }\"\n      >\n        <div class=\"rk-accordion-clip\">\n          <div class=\"rk-accordion-body\" :class=\"{ 'is-open': isOpen(item.key) }\">\n            <slot :item=\"item\" :open=\"isOpen(item.key)\" />\n          </div>\n        </div>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<style scoped>\n.rk-accordion {\n  border-top: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n\n.rk-accordion-item {\n  border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n\n.rk-accordion-control {\n  display: flex;\n  width: 100%;\n  cursor: pointer;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1.5rem;\n  padding: 1.25rem 0;\n  text-align: left;\n  transition: color 150ms;\n}\n\n.rk-accordion-control:hover {\n  color: var(--color-primary);\n}\n\n.rk-accordion-control:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-accordion-title {\n  color: var(--color-ink);\n  font-size: 1rem;\n  font-weight: 500;\n}\n\n.rk-accordion-mark {\n  position: relative;\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.rk-accordion-bar {\n  position: absolute;\n  height: 1px;\n  width: 0.875rem;\n  background: var(--color-ink-soft);\n}\n\n.rk-accordion-bar-turn {\n  transform: rotate(90deg);\n  transition: transform 420ms ease-out;\n}\n\n.rk-accordion-bar-turn.is-open {\n  transform: rotate(0deg);\n}\n\n/* 0fr to 1fr is the whole trick: a grid row can be animated to a height that\n   was never measured, which is what `height: auto` cannot do. */\n.rk-accordion-panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 420ms ease-out;\n}\n\n.rk-accordion-panel.is-open {\n  grid-template-rows: 1fr;\n}\n\n.rk-accordion-clip {\n  overflow: hidden;\n}\n\n.rk-accordion-body {\n  max-width: 68ch;\n  padding-bottom: 1.5rem;\n  color: var(--color-ink-soft);\n  line-height: 1.625;\n  opacity: 0;\n  transition: opacity 300ms;\n}\n\n.rk-accordion-body.is-open {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-accordion-panel,\n  .rk-accordion-bar-turn,\n  .rk-accordion-body {\n    transition: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { RouterLink } from 'vue-router'\n\nexport interface Crumb {\n  /** Already translated. */\n  label: string\n  /** Omitted for the current page, which is not a link to itself. */\n  to?: string | undefined\n}\n\n/**\n * Where this page sits, and the way back up.\n *\n * An ordered list inside a `nav`, because the order is the meaning. The last\n * crumb is the current page and is deliberately not a link: a link to the page\n * you are on is a control that does nothing, and `aria-current=\"page\"` is what\n * says so to everyone else.\n *\n * The separators are `aria-hidden`. A screen reader announces a list and its\n * position in it; reading \"slash\" between every item is noise on top of\n * information the reader already has.\n */\nconst { items, label = '' } = defineProps<{\n  items: readonly Crumb[]\n  /** Accessible name for the landmark. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <nav :aria-label=\"label || undefined\">\n    <ol class=\"rk-crumbs\">\n      <li v-for=\"(item, index) in items\" :key=\"item.label\" class=\"rk-crumb\">\n        <RouterLink v-if=\"item.to\" :to=\"item.to\" class=\"rk-crumb-link\">\n          {{ item.label }}\n        </RouterLink>\n        <span v-else class=\"rk-crumb-current\" aria-current=\"page\">{{ item.label }}</span>\n\n        <span v-if=\"index < items.length - 1\" class=\"rk-crumb-sep\" aria-hidden=\"true\">/</span>\n      </li>\n    </ol>\n  </nav>\n</template>\n\n<style scoped>\n.rk-crumbs {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.8125rem;\n}\n\n.rk-crumb {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.rk-crumb-link {\n  color: var(--color-ink-soft);\n  transition: color 150ms;\n}\n\n.rk-crumb-link:hover {\n  color: var(--color-ink);\n}\n\n.rk-crumb-link:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n.rk-crumb-current {\n  color: var(--color-ink);\n  font-weight: 500;\n}\n\n.rk-crumb-sep {\n  color: var(--color-hair);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { RouterLink } from 'vue-router'\n\nexport interface Crumb {\n  /** Already translated. */\n  label: string\n  /** Omitted for the current page, which is not a link to itself. */\n  to?: string | undefined\n}\n\n/**\n * Where this page sits, and the way back up.\n *\n * An ordered list inside a `nav`, because the order is the meaning. The last\n * crumb is the current page and is deliberately not a link: a link to the page\n * you are on is a control that does nothing, and `aria-current=\"page\"` is what\n * says so to everyone else.\n *\n * The separators are `aria-hidden`. A screen reader announces a list and its\n * position in it; reading \"slash\" between every item is noise on top of\n * information the reader already has.\n */\nconst { items, label = '' } = defineProps<{\n  items: readonly Crumb[]\n  /** Accessible name for the landmark. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <nav :aria-label=\"label || undefined\">\n    <ol class=\"rk-crumbs\">\n      <li v-for=\"(item, index) in items\" :key=\"item.label\" class=\"rk-crumb\">\n        <RouterLink v-if=\"item.to\" :to=\"item.to\" class=\"rk-crumb-link\">\n          {{ item.label }}\n        </RouterLink>\n        <span v-else class=\"rk-crumb-current\" aria-current=\"page\">{{ item.label }}</span>\n\n        <span v-if=\"index < items.length - 1\" class=\"rk-crumb-sep\" aria-hidden=\"true\">/</span>\n      </li>\n    </ol>\n  </nav>\n</template>\n\n<style scoped>\n.rk-crumbs {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.8125rem;\n}\n\n.rk-crumb {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.rk-crumb-link {\n  color: var(--color-ink-soft);\n  transition: color 150ms;\n}\n\n.rk-crumb-link:hover {\n  color: var(--color-ink);\n}\n\n.rk-crumb-link:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n.rk-crumb-current {\n  color: var(--color-ink);\n  font-weight: 500;\n}\n\n.rk-crumb-sep {\n  color: var(--color-hair);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n/**\n * One section that opens and closes.\n *\n * `BaseAccordion` is a list of these with the rule that only one stays open.\n * This is the same row on its own, for the common case where the list belongs\n * to the app — because it is staggered as it scrolls in, or interleaved with\n * something else, or rendered from a source the accordion cannot know about.\n *\n * That case is not hypothetical: the first list this kit met decorated every\n * row with a reveal directive, which has to sit on the element the accordion\n * would have owned. Shipping only the list would have meant choosing between\n * the component and the design.\n *\n * ## Why not `<details>`\n *\n * A browser removes `<details>` content from layout entirely when closed, so\n * there is nothing to animate between — the panel can only appear. Faking it by\n * leaving `open` set and hiding with CSS tells a screen reader the section is\n * expanded while a sighted reader sees it shut, which is worse than no\n * animation.\n *\n * So: a button carrying `aria-expanded`, the content always in the markup —\n * which is what a crawler and a reader without JavaScript get — and a grid row\n * travelling from `0fr` to `1fr`, the one way to animate to a height nobody has\n * measured.\n */\nconst { title, headingLevel = 3 } = defineProps<{\n  /** The question. Already translated. */\n  title: string\n  /**\n   * Which heading the control sits inside.\n   *\n   * A heading, always — it is how a screen reader user moves between sections\n   * without opening any of them. The level depends on what is above it on the\n   * page, and getting it wrong breaks the outline.\n   */\n  headingLevel?: 2 | 3 | 4 | undefined\n}>()\n\nconst open = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The answer. */\n  default: () => unknown\n}>()\n\nconst id = useId()\n</script>\n\n<template>\n  <div class=\"rk-disclosure\">\n    <component :is=\"`h${headingLevel}`\">\n      <button\n        type=\"button\"\n        class=\"rk-disclosure-control\"\n        :aria-expanded=\"open\"\n        :aria-controls=\"id\"\n        @click=\"open = !open\"\n      >\n        <span class=\"rk-disclosure-title\">{{ title }}</span>\n\n        <!-- A plus that becomes a minus: one stroke turns, so the control keeps\n             its place while it changes meaning. -->\n        <span class=\"rk-disclosure-mark\" aria-hidden=\"true\">\n          <span class=\"rk-disclosure-bar\" />\n          <span class=\"rk-disclosure-bar rk-disclosure-turn\" :class=\"{ 'is-open': open }\" />\n        </span>\n      </button>\n    </component>\n\n    <div :id=\"id\" class=\"rk-disclosure-panel\" :class=\"{ 'is-open': open }\">\n      <div class=\"rk-disclosure-clip\">\n        <div class=\"rk-disclosure-body\" :class=\"{ 'is-open': open }\"><slot /></div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.rk-disclosure-control {\n  display: flex;\n  width: 100%;\n  cursor: pointer;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1.5rem;\n  padding: 1.25rem 0;\n  text-align: left;\n  transition: color 150ms;\n}\n\n.rk-disclosure-control:hover {\n  color: var(--color-primary);\n}\n\n.rk-disclosure-control:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-disclosure-title {\n  color: var(--color-ink);\n  font-size: 1rem;\n  font-weight: 500;\n}\n\n.rk-disclosure-mark {\n  position: relative;\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.rk-disclosure-bar {\n  position: absolute;\n  height: 1px;\n  width: 0.875rem;\n  background: var(--color-ink-soft);\n}\n\n.rk-disclosure-turn {\n  transform: rotate(90deg);\n  transition: transform 420ms ease-out;\n}\n\n.rk-disclosure-turn.is-open {\n  transform: rotate(0deg);\n}\n\n/* 0fr to 1fr is the whole trick: a grid row can be animated to a height that\n   was never measured, which `height: auto` cannot do. */\n.rk-disclosure-panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 420ms ease-out;\n}\n\n.rk-disclosure-panel.is-open {\n  grid-template-rows: 1fr;\n}\n\n.rk-disclosure-clip {\n  overflow: hidden;\n}\n\n.rk-disclosure-body {\n  max-width: 68ch;\n  padding-bottom: 1.5rem;\n  color: var(--color-ink-soft);\n  line-height: 1.625;\n  opacity: 0;\n  transition: opacity 300ms;\n}\n\n.rk-disclosure-body.is-open {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-disclosure-panel,\n  .rk-disclosure-turn,\n  .rk-disclosure-body {\n    transition: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n/**\n * One section that opens and closes.\n *\n * `BaseAccordion` is a list of these with the rule that only one stays open.\n * This is the same row on its own, for the common case where the list belongs\n * to the app — because it is staggered as it scrolls in, or interleaved with\n * something else, or rendered from a source the accordion cannot know about.\n *\n * That case is not hypothetical: the first list this kit met decorated every\n * row with a reveal directive, which has to sit on the element the accordion\n * would have owned. Shipping only the list would have meant choosing between\n * the component and the design.\n *\n * ## Why not `<details>`\n *\n * A browser removes `<details>` content from layout entirely when closed, so\n * there is nothing to animate between — the panel can only appear. Faking it by\n * leaving `open` set and hiding with CSS tells a screen reader the section is\n * expanded while a sighted reader sees it shut, which is worse than no\n * animation.\n *\n * So: a button carrying `aria-expanded`, the content always in the markup —\n * which is what a crawler and a reader without JavaScript get — and a grid row\n * travelling from `0fr` to `1fr`, the one way to animate to a height nobody has\n * measured.\n */\nconst { title, headingLevel = 3 } = defineProps<{\n  /** The question. Already translated. */\n  title: string\n  /**\n   * Which heading the control sits inside.\n   *\n   * A heading, always — it is how a screen reader user moves between sections\n   * without opening any of them. The level depends on what is above it on the\n   * page, and getting it wrong breaks the outline.\n   */\n  headingLevel?: 2 | 3 | 4 | undefined\n}>()\n\nconst open = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The answer. */\n  default: () => unknown\n}>()\n\nconst id = useId()\n</script>\n\n<template>\n  <div class=\"rk-disclosure\">\n    <component :is=\"`h${headingLevel}`\">\n      <button\n        type=\"button\"\n        class=\"rk-disclosure-control\"\n        :aria-expanded=\"open\"\n        :aria-controls=\"id\"\n        @click=\"open = !open\"\n      >\n        <span class=\"rk-disclosure-title\">{{ title }}</span>\n\n        <!-- A plus that becomes a minus: one stroke turns, so the control keeps\n             its place while it changes meaning. -->\n        <span class=\"rk-disclosure-mark\" aria-hidden=\"true\">\n          <span class=\"rk-disclosure-bar\" />\n          <span class=\"rk-disclosure-bar rk-disclosure-turn\" :class=\"{ 'is-open': open }\" />\n        </span>\n      </button>\n    </component>\n\n    <div :id=\"id\" class=\"rk-disclosure-panel\" :class=\"{ 'is-open': open }\">\n      <div class=\"rk-disclosure-clip\">\n        <div class=\"rk-disclosure-body\" :class=\"{ 'is-open': open }\"><slot /></div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.rk-disclosure-control {\n  display: flex;\n  width: 100%;\n  cursor: pointer;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1.5rem;\n  padding: 1.25rem 0;\n  text-align: left;\n  transition: color 150ms;\n}\n\n.rk-disclosure-control:hover {\n  color: var(--color-primary);\n}\n\n.rk-disclosure-control:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-disclosure-title {\n  color: var(--color-ink);\n  font-size: 1rem;\n  font-weight: 500;\n}\n\n.rk-disclosure-mark {\n  position: relative;\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.rk-disclosure-bar {\n  position: absolute;\n  height: 1px;\n  width: 0.875rem;\n  background: var(--color-ink-soft);\n}\n\n.rk-disclosure-turn {\n  transform: rotate(90deg);\n  transition: transform 420ms ease-out;\n}\n\n.rk-disclosure-turn.is-open {\n  transform: rotate(0deg);\n}\n\n/* 0fr to 1fr is the whole trick: a grid row can be animated to a height that\n   was never measured, which `height: auto` cannot do. */\n.rk-disclosure-panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 420ms ease-out;\n}\n\n.rk-disclosure-panel.is-open {\n  grid-template-rows: 1fr;\n}\n\n.rk-disclosure-clip {\n  overflow: hidden;\n}\n\n.rk-disclosure-body {\n  max-width: 68ch;\n  padding-bottom: 1.5rem;\n  color: var(--color-ink-soft);\n  line-height: 1.625;\n  opacity: 0;\n  transition: opacity 300ms;\n}\n\n.rk-disclosure-body.is-open {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-disclosure-panel,\n  .rk-disclosure-turn,\n  .rk-disclosure-body {\n    transition: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, ref, watch } from 'vue'\n\n/**\n * A dialog that arrives from nowhere.\n *\n * Not `BaseSheet` with different padding. A sheet slides up from the bottom\n * edge, is dismissed by dragging it back down, and belongs to a thumb; a modal\n * appears in the middle of what you were reading and is dismissed by leaving\n * it. They are two answers to two questions and merging them would give a\n * component that is wrong on a phone and wrong on a desktop.\n *\n * ## The parts that are easy to get wrong\n *\n * This is why it exists rather than being written per dialog, which is what the\n * one wide consumer was doing in two places. None of the following is visible\n * on screen when it is missing:\n *\n * - **Focus moves in and comes back.** Opening without moving focus leaves a\n *   keyboard user behind the dialog, operating a page they cannot see. Closing\n *   without restoring it drops them at the top of the document.\n * - **Tab does not leave.** A dialog you can Tab out of is a dialog that is\n *   modal only to somebody using a mouse.\n * - **Escape closes.** Every dialog in every application does this.\n * - **The page underneath does not scroll.** Otherwise dismissing the dialog\n *   returns you somewhere else.\n * - **The backdrop closes it, the panel does not.** A click that starts inside\n *   the panel and ends on the backdrop is not a click on the backdrop, which is\n *   why this listens for a press on the backdrop itself rather than any click\n *   that reaches it.\n */\nconst {\n  title,\n  closeLabel,\n  tone = 'default',\n  dismissible = true,\n} = defineProps<{\n  /** Names the dialog for assistive tech. Required; an unnamed dialog is a box. */\n  title: string\n  /** Accessible name for the close button. */\n  closeLabel: string\n  /**\n   * `alert` marks it as a decision that interrupts — `role=\"alertdialog\"`,\n   * which a screen reader announces immediately rather than on arrival.\n   */\n  tone?: 'default' | 'alert' | undefined\n  /**\n   * Whether Escape and the backdrop close it.\n   *\n   * Off for a dialog that must be answered — but never off as a way of forcing\n   * a reader to a decision they have not been given the information for.\n   */\n  dismissible?: boolean | undefined\n}>()\n\nconst open = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The body. */\n  default: () => unknown\n  /** Buttons, at the foot. */\n  actions?: () => unknown\n}>()\n\nconst panel = ref<HTMLElement | null>(null)\n/** Who had focus before this opened, so it can be given back. */\nlet restoreTo: HTMLElement | null = null\n\nconst FOCUSABLE =\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n\nfunction focusable(): HTMLElement[] {\n  if (!panel.value) return []\n\n  return Array.from(panel.value.querySelectorAll<HTMLElement>(FOCUSABLE))\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && dismissible) {\n    event.stopPropagation()\n    open.value = false\n\n    return\n  }\n\n  if (event.key !== 'Tab') return\n\n  const items = focusable()\n  if (items.length === 0) return event.preventDefault()\n\n  const first = items[0]!\n  const last = items[items.length - 1]!\n  const active = document.activeElement\n\n  // The wrap has to be done by hand: the browser's own Tab order is the whole\n  // document, and the dialog is only part of it.\n  if (event.shiftKey && (active === first || !panel.value?.contains(active))) {\n    event.preventDefault()\n    last.focus()\n  } else if (!event.shiftKey && active === last) {\n    event.preventDefault()\n    first.focus()\n  }\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    restoreTo = document.activeElement as HTMLElement | null\n    document.body.style.overflow = 'hidden'\n    await nextTick()\n    // The panel itself when it holds nothing focusable, so focus is at least\n    // inside the dialog rather than behind it.\n    ;(focusable()[0] ?? panel.value)?.focus()\n  } else {\n    document.body.style.overflow = ''\n    restoreTo?.focus()\n    restoreTo = null\n  }\n})\n\n// A dialog unmounted while open would otherwise leave the page unscrollable,\n// with nothing on screen to explain why.\nonBeforeUnmount(() => {\n  if (open.value) document.body.style.overflow = ''\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"rk-modal\">\n      <div\n        v-if=\"open\"\n        class=\"rk-modal-scrim\"\n        @keydown=\"onKeydown\"\n        @mousedown.self=\"dismissible && (open = false)\"\n      >\n        <div\n          ref=\"panel\"\n          class=\"rk-modal-panel\"\n          :role=\"tone === 'alert' ? 'alertdialog' : 'dialog'\"\n          aria-modal=\"true\"\n          :aria-label=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"rk-modal-head\">\n            <h2 class=\"rk-modal-title\">{{ title }}</h2>\n\n            <button\n              v-if=\"dismissible\"\n              type=\"button\"\n              class=\"rk-modal-close\"\n              :aria-label=\"closeLabel\"\n              @click=\"open = false\"\n            >\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M18 6 6 18M6 6l12 12\" stroke-linecap=\"round\" />\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"rk-modal-body\"><slot /></div>\n\n          <div v-if=\"$slots.actions\" class=\"rk-modal-actions\"><slot name=\"actions\" /></div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.rk-modal-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: grid;\n  place-items: center;\n  padding: 1.5rem;\n  background: color-mix(in srgb, var(--color-ink) 70%, transparent);\n  backdrop-filter: blur(4px);\n}\n\n.rk-modal-panel {\n  width: 100%;\n  max-width: 28rem;\n  max-height: 85vh;\n  overflow-y: auto;\n  border-radius: var(--radius-card);\n  background: var(--color-surface);\n  padding: 1.5rem;\n  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2);\n}\n\n.rk-modal-panel:focus {\n  outline: none;\n}\n\n.rk-modal-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.rk-modal-title {\n  font-size: 1.0625rem;\n  font-weight: 600;\n  color: var(--color-ink);\n}\n\n.rk-modal-close {\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 9999px;\n  color: var(--color-ink-soft);\n  transition: background-color 150ms;\n}\n\n.rk-modal-close:hover {\n  background: var(--color-muted);\n}\n\n.rk-modal-close:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-modal-close svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n.rk-modal-body {\n  margin-top: 0.75rem;\n  color: var(--color-ink-soft);\n  font-size: 0.875rem;\n  line-height: 1.625;\n}\n\n.rk-modal-actions {\n  margin-top: 1.5rem;\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n\n.rk-modal-enter-active,\n.rk-modal-leave-active {\n  transition: opacity 180ms ease;\n}\n\n.rk-modal-enter-active .rk-modal-panel,\n.rk-modal-leave-active .rk-modal-panel {\n  transition:\n    transform 180ms cubic-bezier(0.32, 0.72, 0, 1),\n    opacity 180ms ease;\n}\n\n.rk-modal-enter-from,\n.rk-modal-leave-to {\n  opacity: 0;\n}\n\n/* From nowhere, not from an edge: a scale is what separates this from a sheet. */\n.rk-modal-enter-from .rk-modal-panel,\n.rk-modal-leave-to .rk-modal-panel {\n  transform: scale(0.96);\n  opacity: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-modal-enter-active .rk-modal-panel,\n  .rk-modal-leave-active .rk-modal-panel {\n    transition: opacity 180ms ease;\n    transform: none;\n  }\n\n  .rk-modal-enter-from .rk-modal-panel,\n  .rk-modal-leave-to .rk-modal-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, ref, watch } from 'vue'\n\n/**\n * A dialog that arrives from nowhere.\n *\n * Not `BaseSheet` with different padding. A sheet slides up from the bottom\n * edge, is dismissed by dragging it back down, and belongs to a thumb; a modal\n * appears in the middle of what you were reading and is dismissed by leaving\n * it. They are two answers to two questions and merging them would give a\n * component that is wrong on a phone and wrong on a desktop.\n *\n * ## The parts that are easy to get wrong\n *\n * This is why it exists rather than being written per dialog, which is what the\n * one wide consumer was doing in two places. None of the following is visible\n * on screen when it is missing:\n *\n * - **Focus moves in and comes back.** Opening without moving focus leaves a\n *   keyboard user behind the dialog, operating a page they cannot see. Closing\n *   without restoring it drops them at the top of the document.\n * - **Tab does not leave.** A dialog you can Tab out of is a dialog that is\n *   modal only to somebody using a mouse.\n * - **Escape closes.** Every dialog in every application does this.\n * - **The page underneath does not scroll.** Otherwise dismissing the dialog\n *   returns you somewhere else.\n * - **The backdrop closes it, the panel does not.** A click that starts inside\n *   the panel and ends on the backdrop is not a click on the backdrop, which is\n *   why this listens for a press on the backdrop itself rather than any click\n *   that reaches it.\n */\nconst {\n  title,\n  closeLabel,\n  tone = 'default',\n  dismissible = true,\n} = defineProps<{\n  /** Names the dialog for assistive tech. Required; an unnamed dialog is a box. */\n  title: string\n  /** Accessible name for the close button. */\n  closeLabel: string\n  /**\n   * `alert` marks it as a decision that interrupts — `role=\"alertdialog\"`,\n   * which a screen reader announces immediately rather than on arrival.\n   */\n  tone?: 'default' | 'alert' | undefined\n  /**\n   * Whether Escape and the backdrop close it.\n   *\n   * Off for a dialog that must be answered — but never off as a way of forcing\n   * a reader to a decision they have not been given the information for.\n   */\n  dismissible?: boolean | undefined\n}>()\n\nconst open = defineModel<boolean>({ default: false })\n\ndefineSlots<{\n  /** The body. */\n  default: () => unknown\n  /** Buttons, at the foot. */\n  actions?: () => unknown\n}>()\n\nconst panel = ref<HTMLElement | null>(null)\n/** Who had focus before this opened, so it can be given back. */\nlet restoreTo: HTMLElement | null = null\n\nconst FOCUSABLE =\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n\nfunction focusable(): HTMLElement[] {\n  if (!panel.value) return []\n\n  return Array.from(panel.value.querySelectorAll<HTMLElement>(FOCUSABLE))\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && dismissible) {\n    event.stopPropagation()\n    open.value = false\n\n    return\n  }\n\n  if (event.key !== 'Tab') return\n\n  const items = focusable()\n  if (items.length === 0) return event.preventDefault()\n\n  const first = items[0]!\n  const last = items[items.length - 1]!\n  const active = document.activeElement\n\n  // The wrap has to be done by hand: the browser's own Tab order is the whole\n  // document, and the dialog is only part of it.\n  if (event.shiftKey && (active === first || !panel.value?.contains(active))) {\n    event.preventDefault()\n    last.focus()\n  } else if (!event.shiftKey && active === last) {\n    event.preventDefault()\n    first.focus()\n  }\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    restoreTo = document.activeElement as HTMLElement | null\n    document.body.style.overflow = 'hidden'\n    await nextTick()\n    // The panel itself when it holds nothing focusable, so focus is at least\n    // inside the dialog rather than behind it.\n    ;(focusable()[0] ?? panel.value)?.focus()\n  } else {\n    document.body.style.overflow = ''\n    restoreTo?.focus()\n    restoreTo = null\n  }\n})\n\n// A dialog unmounted while open would otherwise leave the page unscrollable,\n// with nothing on screen to explain why.\nonBeforeUnmount(() => {\n  if (open.value) document.body.style.overflow = ''\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"rk-modal\">\n      <div\n        v-if=\"open\"\n        class=\"rk-modal-scrim\"\n        @keydown=\"onKeydown\"\n        @mousedown.self=\"dismissible && (open = false)\"\n      >\n        <div\n          ref=\"panel\"\n          class=\"rk-modal-panel\"\n          :role=\"tone === 'alert' ? 'alertdialog' : 'dialog'\"\n          aria-modal=\"true\"\n          :aria-label=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"rk-modal-head\">\n            <h2 class=\"rk-modal-title\">{{ title }}</h2>\n\n            <button\n              v-if=\"dismissible\"\n              type=\"button\"\n              class=\"rk-modal-close\"\n              :aria-label=\"closeLabel\"\n              @click=\"open = false\"\n            >\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M18 6 6 18M6 6l12 12\" stroke-linecap=\"round\" />\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"rk-modal-body\"><slot /></div>\n\n          <div v-if=\"$slots.actions\" class=\"rk-modal-actions\"><slot name=\"actions\" /></div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.rk-modal-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: grid;\n  place-items: center;\n  padding: 1.5rem;\n  background: color-mix(in srgb, var(--color-ink) 70%, transparent);\n  backdrop-filter: blur(4px);\n}\n\n.rk-modal-panel {\n  width: 100%;\n  max-width: 28rem;\n  max-height: 85vh;\n  overflow-y: auto;\n  border-radius: var(--radius-card);\n  background: var(--color-surface);\n  padding: 1.5rem;\n  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2);\n}\n\n.rk-modal-panel:focus {\n  outline: none;\n}\n\n.rk-modal-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.rk-modal-title {\n  font-size: 1.0625rem;\n  font-weight: 600;\n  color: var(--color-ink);\n}\n\n.rk-modal-close {\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 9999px;\n  color: var(--color-ink-soft);\n  transition: background-color 150ms;\n}\n\n.rk-modal-close:hover {\n  background: var(--color-muted);\n}\n\n.rk-modal-close:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-modal-close svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n.rk-modal-body {\n  margin-top: 0.75rem;\n  color: var(--color-ink-soft);\n  font-size: 0.875rem;\n  line-height: 1.625;\n}\n\n.rk-modal-actions {\n  margin-top: 1.5rem;\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n\n.rk-modal-enter-active,\n.rk-modal-leave-active {\n  transition: opacity 180ms ease;\n}\n\n.rk-modal-enter-active .rk-modal-panel,\n.rk-modal-leave-active .rk-modal-panel {\n  transition:\n    transform 180ms cubic-bezier(0.32, 0.72, 0, 1),\n    opacity 180ms ease;\n}\n\n.rk-modal-enter-from,\n.rk-modal-leave-to {\n  opacity: 0;\n}\n\n/* From nowhere, not from an edge: a scale is what separates this from a sheet. */\n.rk-modal-enter-from .rk-modal-panel,\n.rk-modal-leave-to .rk-modal-panel {\n  transform: scale(0.96);\n  opacity: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-modal-enter-active .rk-modal-panel,\n  .rk-modal-leave-active .rk-modal-panel {\n    transition: opacity 180ms ease;\n    transform: none;\n  }\n\n  .rk-modal-enter-from .rk-modal-panel,\n  .rk-modal-leave-to .rk-modal-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * Moving between pages of a list.\n *\n * A `nav` of buttons rather than links, because this component does not know\n * whether the app pages by route, by query or in memory. It emits a number and\n * the app decides what that means.\n *\n * ## The ellipsis\n *\n * Every page number is unusable past about a dozen, and cutting to\n * \"1 … 7 8 9 … 40\" is what every list does. The window is a fixed size around\n * the current page and the first and last are always present, so the control\n * never changes width as you move through it — a row of numbers that reflows\n * under the pointer is a row you have to re-aim at.\n *\n * The gap is a `<span>`, not a disabled button: it is not a control, and\n * announcing it as one gives a screen reader something to try to press.\n */\nconst {\n  page,\n  pages,\n  siblings = 1,\n  label = '',\n  previousLabel,\n  nextLabel,\n} = defineProps<{\n  /** Current page, 1-based. */\n  page: number\n  /** How many there are. */\n  pages: number\n  /** How many numbers to show either side of the current one. */\n  siblings?: number | undefined\n  /** Accessible name for the landmark. */\n  label?: string | undefined\n  /**\n   * Names for the arrows, already translated.\n   *\n   * Required, because `‹` is a glyph and not a word: a screen reader reading\n   * the arrow announces nothing a person can act on.\n   */\n  previousLabel: string\n  nextLabel: string\n}>()\n\nconst emit = defineEmits<{ change: [page: number] }>()\n\nconst GAP = 'gap' as const\n\nconst slots = computed<(number | typeof GAP)[]>(() => {\n  if (pages <= 1) return [1]\n\n  const first = 1\n  const last = pages\n\n  /* The widest the windowed form ever gets: first, last, the current page, its\n     siblings either side, and the two gaps. Below that the window saves\n     nothing, and \"1 2 … 5\" is a worse control than \"1 2 3 4 5\" — so short lists\n     are shown whole rather than cut on principle. */\n  if (pages <= siblings * 2 + 5) {\n    return Array.from({ length: pages }, (_, i) => i + 1)\n  }\n  const from = Math.max(first + 1, page - siblings)\n  const to = Math.min(last - 1, page + siblings)\n\n  const out: (number | typeof GAP)[] = [first]\n  // A gap standing in for a single page is longer than the page it replaces.\n  if (from > first + 1) out.push(GAP)\n  for (let n = from; n <= to; n++) out.push(n)\n  if (to < last - 1) out.push(GAP)\n  if (last > first) out.push(last)\n\n  return out\n})\n\nconst go = (next: number) => {\n  if (next >= 1 && next <= pages && next !== page) emit('change', next)\n}\n</script>\n\n<template>\n  <nav class=\"rk-pager\" :aria-label=\"label || undefined\">\n    <button\n      type=\"button\"\n      class=\"rk-pager-step\"\n      :disabled=\"page <= 1\"\n      :aria-label=\"previousLabel\"\n      @click=\"go(page - 1)\"\n    >\n      ‹\n    </button>\n\n    <template v-for=\"(slot, index) in slots\" :key=\"`${slot}-${index}`\">\n      <span v-if=\"slot === 'gap'\" class=\"rk-pager-gap\" aria-hidden=\"true\">…</span>\n      <button\n        v-else\n        type=\"button\"\n        class=\"rk-pager-page\"\n        :class=\"{ 'is-active': slot === page }\"\n        :aria-current=\"slot === page ? 'page' : undefined\"\n        @click=\"go(slot)\"\n      >\n        {{ slot }}\n      </button>\n    </template>\n\n    <button\n      type=\"button\"\n      class=\"rk-pager-step\"\n      :disabled=\"page >= pages\"\n      :aria-label=\"nextLabel\"\n      @click=\"go(page + 1)\"\n    >\n      ›\n    </button>\n  </nav>\n</template>\n\n<style scoped>\n.rk-pager {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.rk-pager-step,\n.rk-pager-page {\n  display: grid;\n  place-items: center;\n  min-width: 2rem;\n  height: 2rem;\n  padding: 0 0.5rem;\n  border-radius: var(--radius-cell);\n  font-size: 0.875rem;\n  color: var(--color-ink-soft);\n  transition:\n    background-color 150ms,\n    color 150ms;\n}\n\n.rk-pager-step:hover:not(:disabled),\n.rk-pager-page:hover {\n  background: var(--color-muted);\n  color: var(--color-ink);\n}\n\n.rk-pager-step:focus-visible,\n.rk-pager-page:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-pager-step:disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n.rk-pager-page.is-active {\n  background: var(--color-primary);\n  color: #fff;\n  font-weight: 500;\n}\n\n.rk-pager-gap {\n  display: grid;\n  place-items: center;\n  min-width: 2rem;\n  height: 2rem;\n  color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * Moving between pages of a list.\n *\n * A `nav` of buttons rather than links, because this component does not know\n * whether the app pages by route, by query or in memory. It emits a number and\n * the app decides what that means.\n *\n * ## The ellipsis\n *\n * Every page number is unusable past about a dozen, and cutting to\n * \"1 … 7 8 9 … 40\" is what every list does. The window is a fixed size around\n * the current page and the first and last are always present, so the control\n * never changes width as you move through it — a row of numbers that reflows\n * under the pointer is a row you have to re-aim at.\n *\n * The gap is a `<span>`, not a disabled button: it is not a control, and\n * announcing it as one gives a screen reader something to try to press.\n */\nconst {\n  page,\n  pages,\n  siblings = 1,\n  label = '',\n  previousLabel,\n  nextLabel,\n} = defineProps<{\n  /** Current page, 1-based. */\n  page: number\n  /** How many there are. */\n  pages: number\n  /** How many numbers to show either side of the current one. */\n  siblings?: number | undefined\n  /** Accessible name for the landmark. */\n  label?: string | undefined\n  /**\n   * Names for the arrows, already translated.\n   *\n   * Required, because `‹` is a glyph and not a word: a screen reader reading\n   * the arrow announces nothing a person can act on.\n   */\n  previousLabel: string\n  nextLabel: string\n}>()\n\nconst emit = defineEmits<{ change: [page: number] }>()\n\nconst GAP = 'gap' as const\n\nconst slots = computed<(number | typeof GAP)[]>(() => {\n  if (pages <= 1) return [1]\n\n  const first = 1\n  const last = pages\n\n  /* The widest the windowed form ever gets: first, last, the current page, its\n     siblings either side, and the two gaps. Below that the window saves\n     nothing, and \"1 2 … 5\" is a worse control than \"1 2 3 4 5\" — so short lists\n     are shown whole rather than cut on principle. */\n  if (pages <= siblings * 2 + 5) {\n    return Array.from({ length: pages }, (_, i) => i + 1)\n  }\n  const from = Math.max(first + 1, page - siblings)\n  const to = Math.min(last - 1, page + siblings)\n\n  const out: (number | typeof GAP)[] = [first]\n  // A gap standing in for a single page is longer than the page it replaces.\n  if (from > first + 1) out.push(GAP)\n  for (let n = from; n <= to; n++) out.push(n)\n  if (to < last - 1) out.push(GAP)\n  if (last > first) out.push(last)\n\n  return out\n})\n\nconst go = (next: number) => {\n  if (next >= 1 && next <= pages && next !== page) emit('change', next)\n}\n</script>\n\n<template>\n  <nav class=\"rk-pager\" :aria-label=\"label || undefined\">\n    <button\n      type=\"button\"\n      class=\"rk-pager-step\"\n      :disabled=\"page <= 1\"\n      :aria-label=\"previousLabel\"\n      @click=\"go(page - 1)\"\n    >\n      ‹\n    </button>\n\n    <template v-for=\"(slot, index) in slots\" :key=\"`${slot}-${index}`\">\n      <span v-if=\"slot === 'gap'\" class=\"rk-pager-gap\" aria-hidden=\"true\">…</span>\n      <button\n        v-else\n        type=\"button\"\n        class=\"rk-pager-page\"\n        :class=\"{ 'is-active': slot === page }\"\n        :aria-current=\"slot === page ? 'page' : undefined\"\n        @click=\"go(slot)\"\n      >\n        {{ slot }}\n      </button>\n    </template>\n\n    <button\n      type=\"button\"\n      class=\"rk-pager-step\"\n      :disabled=\"page >= pages\"\n      :aria-label=\"nextLabel\"\n      @click=\"go(page + 1)\"\n    >\n      ›\n    </button>\n  </nav>\n</template>\n\n<style scoped>\n.rk-pager {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.rk-pager-step,\n.rk-pager-page {\n  display: grid;\n  place-items: center;\n  min-width: 2rem;\n  height: 2rem;\n  padding: 0 0.5rem;\n  border-radius: var(--radius-cell);\n  font-size: 0.875rem;\n  color: var(--color-ink-soft);\n  transition:\n    background-color 150ms,\n    color 150ms;\n}\n\n.rk-pager-step:hover:not(:disabled),\n.rk-pager-page:hover {\n  background: var(--color-muted);\n  color: var(--color-ink);\n}\n\n.rk-pager-step:focus-visible,\n.rk-pager-page:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-pager-step:disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n.rk-pager-page.is-active {\n  background: var(--color-primary);\n  color: #fff;\n  font-weight: 500;\n}\n\n.rk-pager-gap {\n  display: grid;\n  place-items: center;\n  min-width: 2rem;\n  height: 2rem;\n  color: var(--color-ink-soft);\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { ref, useId } from 'vue'\n\nexport interface TabPanel<K extends string> {\n  key: K\n  /** Already translated. */\n  label: string\n}\n\n/**\n * Sections of one page, one visible at a time.\n *\n * Not `TabBar` and not `NavLinks`: those navigate, and the browser's back\n * button undoes them. These switch a panel inside a page that does not change,\n * so there is no history entry and no route.\n *\n * ## The keyboard, which is the whole reason this is a component\n *\n * The pattern is prescribed and it is not what a row of buttons does by\n * default. Tab enters the tablist once and leaves it once — it does not walk\n * through every tab — and the arrow keys move between them. That is roving\n * tabindex: exactly one tab is reachable by Tab at a time, and moving the\n * selection moves it. Home and End jump to the ends, and the selection wraps,\n * because a list with no edges is faster than one you can fall off.\n *\n * Hand-written tabs almost always get this wrong in the same way: every tab is\n * tabbable, so a keyboard user presses Tab six times to reach the content.\n */\nconst { items, label = '' } = defineProps<{\n  items: readonly TabPanel<K>[]\n  /** Accessible name for the tablist. */\n  label?: string | undefined\n}>()\n\ndefineSlots<{\n  /** The panel for the selected tab. */\n  default: (props: { item: TabPanel<K>; active: K }) => unknown\n}>()\n\nconst active = defineModel<K>({ required: true })\n\nconst uid = useId()\nconst tabs = ref<HTMLElement[]>([])\n\nconst tabId = (key: K) => `${uid}-tab-${key}`\nconst panelId = (key: K) => `${uid}-panel-${key}`\n\nfunction select(key: K, focus = false) {\n  active.value = key\n  if (!focus) return\n\n  // Focus follows selection, which is what the arrow keys are for. The element\n  // is looked up after the update so the new tab is the one that is reachable.\n  const index = items.findIndex((item) => item.key === key)\n  requestAnimationFrame(() => tabs.value[index]?.focus())\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  const index = items.findIndex((item) => item.key === active.value)\n  if (index < 0) return\n\n  const last = items.length - 1\n  let next: number | undefined\n\n  if (event.key === 'ArrowRight') next = index === last ? 0 : index + 1\n  else if (event.key === 'ArrowLeft') next = index === 0 ? last : index - 1\n  else if (event.key === 'Home') next = 0\n  else if (event.key === 'End') next = last\n  else return\n\n  event.preventDefault()\n  const item = items[next]\n  if (item) select(item.key, true)\n}\n</script>\n\n<template>\n  <div>\n    <div class=\"rk-tabs\" role=\"tablist\" :aria-label=\"label || undefined\" @keydown=\"onKeydown\">\n      <button\n        v-for=\"item in items\"\n        :key=\"item.key\"\n        ref=\"tabs\"\n        type=\"button\"\n        role=\"tab\"\n        class=\"rk-tab\"\n        :class=\"{ 'is-active': item.key === active }\"\n        :id=\"tabId(item.key)\"\n        :aria-selected=\"item.key === active\"\n        :aria-controls=\"panelId(item.key)\"\n        :tabindex=\"item.key === active ? 0 : -1\"\n        @click=\"select(item.key)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n\n    <div\n      v-for=\"item in items\"\n      v-show=\"item.key === active\"\n      :key=\"item.key\"\n      role=\"tabpanel\"\n      class=\"rk-tabpanel\"\n      :id=\"panelId(item.key)\"\n      :aria-labelledby=\"tabId(item.key)\"\n      tabindex=\"0\"\n    >\n      <!-- Every panel is rendered and hidden rather than swapped, so the page\n           keeps its height and a crawler sees all of it. -->\n      <slot :item=\"item\" :active=\"active\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.rk-tabs {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n\n.rk-tab {\n  position: relative;\n  padding: 0.625rem 0.875rem;\n  font-size: 0.875rem;\n  color: var(--color-ink-soft);\n  transition: color 150ms;\n}\n\n.rk-tab:hover {\n  color: var(--color-ink);\n}\n\n.rk-tab:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: -2px;\n  border-radius: var(--radius-cell);\n}\n\n.rk-tab.is-active {\n  color: var(--color-ink);\n  font-weight: 500;\n}\n\n.rk-tab.is-active::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0.5rem;\n  bottom: -1px;\n  height: 2px;\n  border-radius: 9999px;\n  background: var(--color-primary);\n}\n\n.rk-tabpanel {\n  padding-top: 1rem;\n}\n\n.rk-tabpanel:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { ref, useId } from 'vue'\n\nexport interface TabPanel<K extends string> {\n  key: K\n  /** Already translated. */\n  label: string\n}\n\n/**\n * Sections of one page, one visible at a time.\n *\n * Not `TabBar` and not `NavLinks`: those navigate, and the browser's back\n * button undoes them. These switch a panel inside a page that does not change,\n * so there is no history entry and no route.\n *\n * ## The keyboard, which is the whole reason this is a component\n *\n * The pattern is prescribed and it is not what a row of buttons does by\n * default. Tab enters the tablist once and leaves it once — it does not walk\n * through every tab — and the arrow keys move between them. That is roving\n * tabindex: exactly one tab is reachable by Tab at a time, and moving the\n * selection moves it. Home and End jump to the ends, and the selection wraps,\n * because a list with no edges is faster than one you can fall off.\n *\n * Hand-written tabs almost always get this wrong in the same way: every tab is\n * tabbable, so a keyboard user presses Tab six times to reach the content.\n */\nconst { items, label = '' } = defineProps<{\n  items: readonly TabPanel<K>[]\n  /** Accessible name for the tablist. */\n  label?: string | undefined\n}>()\n\ndefineSlots<{\n  /** The panel for the selected tab. */\n  default: (props: { item: TabPanel<K>; active: K }) => unknown\n}>()\n\nconst active = defineModel<K>({ required: true })\n\nconst uid = useId()\nconst tabs = ref<HTMLElement[]>([])\n\nconst tabId = (key: K) => `${uid}-tab-${key}`\nconst panelId = (key: K) => `${uid}-panel-${key}`\n\nfunction select(key: K, focus = false) {\n  active.value = key\n  if (!focus) return\n\n  // Focus follows selection, which is what the arrow keys are for. The element\n  // is looked up after the update so the new tab is the one that is reachable.\n  const index = items.findIndex((item) => item.key === key)\n  requestAnimationFrame(() => tabs.value[index]?.focus())\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  const index = items.findIndex((item) => item.key === active.value)\n  if (index < 0) return\n\n  const last = items.length - 1\n  let next: number | undefined\n\n  if (event.key === 'ArrowRight') next = index === last ? 0 : index + 1\n  else if (event.key === 'ArrowLeft') next = index === 0 ? last : index - 1\n  else if (event.key === 'Home') next = 0\n  else if (event.key === 'End') next = last\n  else return\n\n  event.preventDefault()\n  const item = items[next]\n  if (item) select(item.key, true)\n}\n</script>\n\n<template>\n  <div>\n    <div class=\"rk-tabs\" role=\"tablist\" :aria-label=\"label || undefined\" @keydown=\"onKeydown\">\n      <button\n        v-for=\"item in items\"\n        :key=\"item.key\"\n        ref=\"tabs\"\n        type=\"button\"\n        role=\"tab\"\n        class=\"rk-tab\"\n        :class=\"{ 'is-active': item.key === active }\"\n        :id=\"tabId(item.key)\"\n        :aria-selected=\"item.key === active\"\n        :aria-controls=\"panelId(item.key)\"\n        :tabindex=\"item.key === active ? 0 : -1\"\n        @click=\"select(item.key)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n\n    <div\n      v-for=\"item in items\"\n      v-show=\"item.key === active\"\n      :key=\"item.key\"\n      role=\"tabpanel\"\n      class=\"rk-tabpanel\"\n      :id=\"panelId(item.key)\"\n      :aria-labelledby=\"tabId(item.key)\"\n      tabindex=\"0\"\n    >\n      <!-- Every panel is rendered and hidden rather than swapped, so the page\n           keeps its height and a crawler sees all of it. -->\n      <slot :item=\"item\" :active=\"active\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.rk-tabs {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  border-bottom: 1px solid color-mix(in srgb, var(--color-hair) 70%, transparent);\n}\n\n.rk-tab {\n  position: relative;\n  padding: 0.625rem 0.875rem;\n  font-size: 0.875rem;\n  color: var(--color-ink-soft);\n  transition: color 150ms;\n}\n\n.rk-tab:hover {\n  color: var(--color-ink);\n}\n\n.rk-tab:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: -2px;\n  border-radius: var(--radius-cell);\n}\n\n.rk-tab.is-active {\n  color: var(--color-ink);\n  font-weight: 500;\n}\n\n.rk-tab.is-active::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0.5rem;\n  bottom: -1px;\n  height: 2px;\n  border-radius: 9999px;\n  background: var(--color-primary);\n}\n\n.rk-tabpanel {\n  padding-top: 1rem;\n}\n\n.rk-tabpanel:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n/**\n * A short label that appears beside a control.\n *\n * ## CSS, not JavaScript, and that is a decision\n *\n * The bubble is shown by `:hover` and `:focus-within` in the stylesheet. No\n * listener, no state, no positioning library. That costs collision detection —\n * a tooltip near the right edge is clipped rather than flipped — and buys the\n * only thing that matters more: it works in a prerendered page, before the\n * bundle has arrived, and with JavaScript switched off entirely.\n *\n * `:focus-within` rather than `:hover` alone is the part people leave out. A\n * tooltip that only answers a mouse is a tooltip that does not exist for anyone\n * using a keyboard, and the content is usually the only explanation of what the\n * control does.\n *\n * The bubble is wired with `aria-describedby`, so a screen reader reads it as a\n * description of the control rather than as loose text nearby. That is why the\n * trigger goes in a slot: the component has to own the id on both ends.\n *\n * ## When not to use it\n *\n * For anything the reader must have. A tooltip is unreachable on a touch screen\n * without a hover state, so text that changes a decision belongs on the page.\n */\nconst { label, placement = 'top' } = defineProps<{\n  /** The description. Already translated. */\n  label: string\n  placement?: 'top' | 'bottom' | undefined\n}>()\n\ndefineSlots<{\n  /** The control being described. */\n  default: (props: { describedBy: string }) => unknown\n}>()\n\nconst id = useId()\n</script>\n\n<template>\n  <span class=\"rk-tip\">\n    <slot :described-by=\"id\" />\n\n    <!-- `role=\"tooltip\"` and the id, so the control can point at it. Not\n         `aria-hidden`: it is the description, not decoration. -->\n    <span :id=\"id\" role=\"tooltip\" class=\"rk-tip-bubble\" :class=\"`is-${placement}`\">\n      {{ label }}\n    </span>\n  </span>\n</template>\n\n<style scoped>\n.rk-tip {\n  position: relative;\n  display: inline-flex;\n}\n\n.rk-tip-bubble {\n  position: absolute;\n  left: 50%;\n  z-index: 60;\n  width: max-content;\n  max-width: 16rem;\n  transform: translateX(-50%);\n  border-radius: var(--radius-cell);\n  background: var(--color-ink);\n  padding: 0.375rem 0.5rem;\n  font-size: 0.75rem;\n  line-height: 1.4;\n  color: var(--color-canvas);\n  opacity: 0;\n  /* Out of the hit area while hidden, or it would swallow the pointer on its\n     way to the control it describes. */\n  pointer-events: none;\n  transition: opacity 150ms ease;\n}\n\n.rk-tip-bubble.is-top {\n  bottom: calc(100% + 0.375rem);\n}\n\n.rk-tip-bubble.is-bottom {\n  top: calc(100% + 0.375rem);\n}\n\n.rk-tip:hover .rk-tip-bubble,\n.rk-tip:focus-within .rk-tip-bubble {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-tip-bubble {\n    transition: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n/**\n * A short label that appears beside a control.\n *\n * ## CSS, not JavaScript, and that is a decision\n *\n * The bubble is shown by `:hover` and `:focus-within` in the stylesheet. No\n * listener, no state, no positioning library. That costs collision detection —\n * a tooltip near the right edge is clipped rather than flipped — and buys the\n * only thing that matters more: it works in a prerendered page, before the\n * bundle has arrived, and with JavaScript switched off entirely.\n *\n * `:focus-within` rather than `:hover` alone is the part people leave out. A\n * tooltip that only answers a mouse is a tooltip that does not exist for anyone\n * using a keyboard, and the content is usually the only explanation of what the\n * control does.\n *\n * The bubble is wired with `aria-describedby`, so a screen reader reads it as a\n * description of the control rather than as loose text nearby. That is why the\n * trigger goes in a slot: the component has to own the id on both ends.\n *\n * ## When not to use it\n *\n * For anything the reader must have. A tooltip is unreachable on a touch screen\n * without a hover state, so text that changes a decision belongs on the page.\n */\nconst { label, placement = 'top' } = defineProps<{\n  /** The description. Already translated. */\n  label: string\n  placement?: 'top' | 'bottom' | undefined\n}>()\n\ndefineSlots<{\n  /** The control being described. */\n  default: (props: { describedBy: string }) => unknown\n}>()\n\nconst id = useId()\n</script>\n\n<template>\n  <span class=\"rk-tip\">\n    <slot :described-by=\"id\" />\n\n    <!-- `role=\"tooltip\"` and the id, so the control can point at it. Not\n         `aria-hidden`: it is the description, not decoration. -->\n    <span :id=\"id\" role=\"tooltip\" class=\"rk-tip-bubble\" :class=\"`is-${placement}`\">\n      {{ label }}\n    </span>\n  </span>\n</template>\n\n<style scoped>\n.rk-tip {\n  position: relative;\n  display: inline-flex;\n}\n\n.rk-tip-bubble {\n  position: absolute;\n  left: 50%;\n  z-index: 60;\n  width: max-content;\n  max-width: 16rem;\n  transform: translateX(-50%);\n  border-radius: var(--radius-cell);\n  background: var(--color-ink);\n  padding: 0.375rem 0.5rem;\n  font-size: 0.75rem;\n  line-height: 1.4;\n  color: var(--color-canvas);\n  opacity: 0;\n  /* Out of the hit area while hidden, or it would swallow the pointer on its\n     way to the control it describes. */\n  pointer-events: none;\n  transition: opacity 150ms ease;\n}\n\n.rk-tip-bubble.is-top {\n  bottom: calc(100% + 0.375rem);\n}\n\n.rk-tip-bubble.is-bottom {\n  top: calc(100% + 0.375rem);\n}\n\n.rk-tip:hover .rk-tip-bubble,\n.rk-tip:focus-within .rk-tip-bubble {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-tip-bubble {\n    transition: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { RouterLink } from 'vue-router'\n\nexport interface NavLinkItem<K extends string> {\n  /** Identity, compared against `active`. */\n  key: K\n  /** Router destination. */\n  to: string\n  /** Already translated. */\n  label: string\n}\n\n/**\n * The primary navigation of a wide site.\n *\n * The same contract as `TabBar` minus the icon, so moving an app between a\n * bottom bar and a top one is a change of component and not of data. That is\n * the whole reason the shapes match.\n *\n * A rule under the current section rather than a filled pill: at this size a\n * pill reads as a button, and these are not buttons — they are where you are.\n * The rule is a scaled element rather than a border so it can travel, and it is\n * `aria-hidden` because `aria-current` already says the same thing to anyone not\n * looking at it.\n */\nconst {\n  items,\n  active,\n  label = '',\n} = defineProps<{\n  items: readonly NavLinkItem<K>[]\n  /** Which item is current. Usually derived from the route. */\n  active?: K | undefined\n  /** Accessible name for the navigation landmark. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <nav :aria-label=\"label || undefined\">\n    <div class=\"rk-nav-inner\">\n      <RouterLink\n        v-for=\"item in items\"\n        :key=\"item.key\"\n        :to=\"item.to\"\n        class=\"rk-nav-link\"\n        :class=\"{ 'is-active': item.key === active }\"\n        :aria-current=\"item.key === active ? 'page' : undefined\"\n      >\n        {{ item.label }}\n        <span class=\"rk-nav-rule\" aria-hidden=\"true\" />\n      </RouterLink>\n    </div>\n  </nav>\n</template>\n\n<style scoped>\n/* The root carries no layout of its own, and that is the fix for a real bug\n   rather than a style preference.\n\n   A rule on the root loses to nothing: Vue's scoped CSS compiles `.rk-nav` to\n   `.rk-nav[data-v-hash]`, which outranks a utility class like Tailwind's\n   `hidden` outright — so `class=\"hidden sm:flex\"` did nothing and the nav\n   appeared on a phone, on top of the call to action. `:where()` does not save\n   it either; the scoping attribute puts the specificity back.\n\n   So the flex row lives on an element the caller does not own, and the root is\n   left for them to style. `TabBar` is built the same way for the same reason. */\n.rk-nav-inner {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.rk-nav-link {\n  position: relative;\n  border-radius: var(--radius-cell);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  color: var(--color-ink-soft);\n  transition: color 150ms;\n}\n\n.rk-nav-link:hover {\n  color: var(--color-ink);\n}\n\n.rk-nav-link:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-nav-link.is-active {\n  color: var(--color-ink);\n  font-weight: 500;\n}\n\n.rk-nav-rule {\n  position: absolute;\n  inset-inline: 0.75rem;\n  bottom: -1px;\n  height: 2px;\n  border-radius: 9999px;\n  background: var(--color-primary);\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 300ms;\n}\n\n.rk-nav-link.is-active .rk-nav-rule {\n  transform: scaleX(1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-nav-rule {\n    transition: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { RouterLink } from 'vue-router'\n\nexport interface NavLinkItem<K extends string> {\n  /** Identity, compared against `active`. */\n  key: K\n  /** Router destination. */\n  to: string\n  /** Already translated. */\n  label: string\n}\n\n/**\n * The primary navigation of a wide site.\n *\n * The same contract as `TabBar` minus the icon, so moving an app between a\n * bottom bar and a top one is a change of component and not of data. That is\n * the whole reason the shapes match.\n *\n * A rule under the current section rather than a filled pill: at this size a\n * pill reads as a button, and these are not buttons — they are where you are.\n * The rule is a scaled element rather than a border so it can travel, and it is\n * `aria-hidden` because `aria-current` already says the same thing to anyone not\n * looking at it.\n */\nconst {\n  items,\n  active,\n  label = '',\n} = defineProps<{\n  items: readonly NavLinkItem<K>[]\n  /** Which item is current. Usually derived from the route. */\n  active?: K | undefined\n  /** Accessible name for the navigation landmark. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <nav :aria-label=\"label || undefined\">\n    <div class=\"rk-nav-inner\">\n      <RouterLink\n        v-for=\"item in items\"\n        :key=\"item.key\"\n        :to=\"item.to\"\n        class=\"rk-nav-link\"\n        :class=\"{ 'is-active': item.key === active }\"\n        :aria-current=\"item.key === active ? 'page' : undefined\"\n      >\n        {{ item.label }}\n        <span class=\"rk-nav-rule\" aria-hidden=\"true\" />\n      </RouterLink>\n    </div>\n  </nav>\n</template>\n\n<style scoped>\n/* The root carries no layout of its own, and that is the fix for a real bug\n   rather than a style preference.\n\n   A rule on the root loses to nothing: Vue's scoped CSS compiles `.rk-nav` to\n   `.rk-nav[data-v-hash]`, which outranks a utility class like Tailwind's\n   `hidden` outright — so `class=\"hidden sm:flex\"` did nothing and the nav\n   appeared on a phone, on top of the call to action. `:where()` does not save\n   it either; the scoping attribute puts the specificity back.\n\n   So the flex row lives on an element the caller does not own, and the root is\n   left for them to style. `TabBar` is built the same way for the same reason. */\n.rk-nav-inner {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.rk-nav-link {\n  position: relative;\n  border-radius: var(--radius-cell);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  color: var(--color-ink-soft);\n  transition: color 150ms;\n}\n\n.rk-nav-link:hover {\n  color: var(--color-ink);\n}\n\n.rk-nav-link:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.rk-nav-link.is-active {\n  color: var(--color-ink);\n  font-weight: 500;\n}\n\n.rk-nav-rule {\n  position: absolute;\n  inset-inline: 0.75rem;\n  bottom: -1px;\n  height: 2px;\n  border-radius: 9999px;\n  background: var(--color-primary);\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 300ms;\n}\n\n.rk-nav-link.is-active .rk-nav-rule {\n  transform: scaleX(1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-nav-rule {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rei-kit",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "description": "Vue 3 and Tailwind 4 design system and shared runtime. Extracted from Hibi.",
   "license": "MIT",
   "author": "Ramazan Doğan",