rei-kit 0.17.1 → 0.18.0

package/README.md

@@ -44,14 +44,14 @@ the app, and not a matter of taste.
 
 ## Status
 
-**v0.17.1 — 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.1";
+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,19 +909,150 @@
 }
 }
 
-/* `:where()` on purpose, and it is the whole fix for a real bug.
-   A component that sets `display: flex` on its own root ties with a utility
-   class like Tailwind's `hidden` on specificity, and the component's scoped
-   stylesheet ships after the utilities -- so the nav won, and appeared on a
-   phone on top of the call to action. `:where()` has zero specificity, so any
-   class the caller puts on the root wins outright. The layout is a default
-   here, not a rule. */
-:where(.rk-nav[data-v-85e7ac48]) {
+.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.
+
+   A rule on the root loses to nothing: Vue's scoped CSS compiles `.rk-nav` to
+   `.rk-nav[data-v-hash]`, which outranks a utility class like Tailwind's
+   `hidden` outright — so `class="hidden sm:flex"` did nothing and the nav
+   appeared on a phone, on top of the call to action. `:where()` does not save
+   it either; the scoping attribute puts the specificity back.
+
+   So the flex row lives on an element the caller does not own, and the root is
+   left for them to style. `TabBar` is built the same way for the same reason. */
+.rk-nav-inner[data-v-5e640548] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }
-.rk-nav-link[data-v-85e7ac48] {
+.rk-nav-link[data-v-5e640548] {
   position: relative;
   border-radius: var(--radius-cell);
   padding: 0.5rem 0.75rem;
@@ -820,18 +1060,18 @@
   color: var(--color-ink-soft);
   transition: color 150ms;
 }
-.rk-nav-link[data-v-85e7ac48]:hover {
+.rk-nav-link[data-v-5e640548]:hover {
   color: var(--color-ink);
 }
-.rk-nav-link[data-v-85e7ac48]:focus-visible {
+.rk-nav-link[data-v-5e640548]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-nav-link.is-active[data-v-85e7ac48] {
+.rk-nav-link.is-active[data-v-5e640548] {
   color: var(--color-ink);
   font-weight: 500;
 }
-.rk-nav-rule[data-v-85e7ac48] {
+.rk-nav-rule[data-v-5e640548] {
   position: absolute;
   inset-inline: 0.75rem;
   bottom: -1px;
@@ -842,11 +1082,11 @@
   transform-origin: left;
   transition: transform 300ms;
 }
-.rk-nav-link.is-active .rk-nav-rule[data-v-85e7ac48] {
+.rk-nav-link.is-active .rk-nav-rule[data-v-5e640548] {
   transform: scaleX(1);
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-nav-rule[data-v-85e7ac48] {
+.rk-nav-rule[data-v-5e640548] {
     transition: none;
 }
 }

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';