rei-kit 3.0.0 → 3.2.0

package/README.md

@@ -56,9 +56,17 @@ users. There is no hex value inside a component, and a test fails if one
 appears. That is what lets a phone journal, a phone ledger and a wide
 course site share one kit and look nothing alike.
 
+One component can leave the system without forking it: set the token on that
+element. `[--radius-card:0px]` squares one card, `[--spacing:0.35rem]`
+tightens one, `[--surface-shadow:var(--shadow-raised)]` lifts one. A class
+cannot do this — `class="rounded-[2px]"` against the kit's `rounded-card`
+silently renders at 16px, because two utilities of equal specificity are
+resolved by Tailwind's output order rather than by you. The showcase
+demonstrates both, including the one that does not work.
+
 ### 2. The smallest of six, measured, with the trade stated
 
-At ten components — a real screen — **31.3 KB against 104 to 195** for the
+At ten components — a real screen — **31.7 KB against 104 to 195** for the
 five kits measured beside it. The gap is not the total, it is the slope:
 seven components past the first three cost this kit 5 KB and cost them 60 to
 125, because the stylesheet here is flat and theirs is inside the JavaScript.
@@ -157,7 +165,7 @@ app, and the case *least* favourable to this kit:
 
 | Kit                  |         JS |         CSS |       Total |
 | -------------------- | ---------: | ----------: | ----------: |
-| **rei-kit 3.0.0**    | **3.4 KB** | **23.1 KB** | **26.5 KB** |
+| **rei-kit 3.2.0**    | **3.6 KB** | **23.1 KB** | **26.8 KB** |
 | element-plus 2.14.6  |    27.3 KB |      6.0 KB |     33.3 KB |
 | naive-ui 2.45.3      |    51.2 KB |           — |     51.2 KB |
 | primevue 5.0.1       |    53.6 KB |           — |     53.6 KB |
@@ -169,7 +177,7 @@ a data table, a tooltip and a card. A screen rather than a demo:
 
 | Kit                  |         JS |         CSS |        Total |
 | -------------------- | ---------: | ----------: | -----------: |
-| **rei-kit 3.0.0**    | **8.4 KB** | **23.1 KB** | **31.4 KB**  |
+| **rei-kit 3.2.0**    | **8.6 KB** | **23.1 KB** | **31.7 KB**  |
 | element-plus 2.14.6  |    90.1 KB |     14.0 KB |    104.1 KB  |
 | naive-ui 2.45.3      |   132.4 KB |           — |    132.4 KB  |
 | primevue 5.0.1       |   135.8 KB |           — |    135.8 KB  |
@@ -177,7 +185,7 @@ a data table, a tooltip and a card. A screen rather than a demo:
 | ant-design-vue 4.2.6 |   195.4 KB |           — |    195.4 KB  |
 
 **The slope is the point, not the total.** Seven more components cost this kit
-**5.0 KB**, because the stylesheet does not move and only the JavaScript grows.
+**4.9 KB**, because the stylesheet does not move and only the JavaScript grows.
 The kits that put their styles in the JavaScript have no flat part at all, so
 the same seven cost them **60 to 125 KB**. A quarter smaller at three
 components; **3.3× smaller at ten**.
@@ -226,7 +234,7 @@ Each claim here is enforced by something that fails, not by a promise.
 
 ## Status
 
-**v3.0.0 — three consumers.**
+**v3.2.0 — three consumers.**
 
 |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

package/dist/app/TourShell.vue.d.ts

@@ -23,6 +23,8 @@
 type __VLS_Props = {
     /** Which slide, zero-based. */
     index: number;
+    /** How many slides there are, so the shell can say "3 of 5" and know when it
+     * is on the last one. */
     total: number;
     /** The dialog's accessible name. */
     dialogLabel: string;

package/dist/app/index.d.ts

@@ -9,20 +9,110 @@
  * `AuthShell` was thirty-seven lines with no difference at all between them,
  * the tab transition thirty-four. What differs between two phone apps is the
  * product; this is the part underneath it.
+ *
+ * @example
+ * ```vue
+ * <AuthForm
+ *   v-model:remember="remember"
+ *   mode="signUp"
+ *   :labels="labels"
+ *   :busy="busy"
+ *   @submit="signUp"
+ *   @google="signInWithGoogle"
+ * />
+ * ```
  */
 export { default as AuthForm } from './AuthForm.vue';
 export type { AuthFormLabels, AuthFormValues } from './auth-form';
-/** The frame every sign-in screen sits in. */
+/**
+ * The frame every sign-in screen sits in.
+ *
+ * @example
+ * ```vue
+ * <AuthShell>
+ *   <template #brand>My app</template>
+ *
+ *   <AuthForm mode="signIn" :labels="labels" @submit="signIn" />
+ * </AuthShell>
+ * ```
+ */
 export { default as AuthShell } from './AuthShell.vue';
-/** The one action the app is built around, reachable from every screen. */
+/**
+ * The one action the app is built around, reachable from every screen.
+ *
+ * @example
+ * ```vue
+ * <FabButton label="New entry" @click="create">+</FabButton>
+ * ```
+ */
 export { default as FabButton } from './FabButton.vue';
-/** Choosing the interface language, from a settings row. */
+/**
+ * Choosing the interface language, from a settings row.
+ *
+ * @example
+ * ```vue
+ * <LocaleSheet
+ *   v-model="locale"
+ *   label="Language"
+ *   system-label="Same as device"
+ *   :options="[
+ *     { value: 'en', label: 'English' },
+ *     { value: 'tr', label: 'Türkçe' },
+ *   ]"
+ *   close-label="Close"
+ * />
+ * ```
+ */
 export { default as LocaleSheet } from './LocaleSheet.vue';
-/** A floating note that the connection has gone. */
+/**
+ * A floating note that the connection has gone.
+ *
+ * @example
+ * ```vue
+ * <OfflineBanner label="You are offline. Changes will sync when you are back." />
+ * ```
+ */
 export { default as OfflineBanner } from './OfflineBanner.vue';
-/** The phone frame the whole app sits inside. */
+/**
+ * The phone frame the whole app sits inside.
+ *
+ * @example
+ * ```vue
+ * <TabShell>
+ *   <RouterView />
+ *
+ *   <template #aside>
+ *     <p>© 2026 My app</p>
+ *   </template>
+ * </TabShell>
+ * ```
+ */
 export { default as TabShell } from './TabShell.vue';
-/** The frame an onboarding guide runs inside. */
+/**
+ * The frame an onboarding guide runs inside.
+ *
+ * @example
+ * ```vue
+ * <TourShell
+ *   v-model="open"
+ *   :index="step"
+ *   :total="3"
+ *   dialog-label="Welcome tour"
+ *   skip-label="Skip"
+ *   back-label="Back"
+ *   next-label="Next"
+ *   last-label="Start"
+ *   :step-label="(n) => `Step ${n}`"
+ *   @next="step++"
+ *   @back="step--"
+ *   @dismiss="open = false"
+ * >
+ *   <template #default="{ index }">
+ *     <h2>Step {{ index + 1 }}</h2>
+ *   </template>
+ * </TourShell>
+ * ```
+ */
 export { default as TourShell } from './TourShell.vue';
 export { createAuthGuard, createRouteAnnouncer, createTitleGuard } from './guards';
 export type { AuthGuardOptions } from './guards';

package/dist/app.js

@@ -1,5 +1,5 @@
 import { a as BaseCheckbox_default, o as BaseSheet_default, r as horizontalStep, s as inertOutside, t as focusTarget } from "./focus-target-BtcoJdmz.js";
-import { _ as toRedirectPath, c as useToast, d as isThemePreference, g as safeRedirect, h as tapFeedback, i as BaseInput_default, l as useOnline, m as useTheme, r as GoogleButton_default, s as BaseAlert_default, t as announce } from "./use-announce-B_JGTXHZ.js";
+import { _ as toRedirectPath, c as useToast, d as isThemePreference, g as safeRedirect, h as tapFeedback, i as BaseInput_default, l as useOnline, m as useTheme, r as GoogleButton_default, s as BaseAlert_default, t as announce } from "./use-announce-D8SKsiqn.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
 import { t as BaseButton_default } from "./BaseButton-BD2HKB1L.js";
 import { t as SettingsRow_default } from "./SettingsRow-C6Spi7Np.js";
@@ -511,7 +511,7 @@ var TourShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			})], 8, ["to"]);
 		};
 	}
-}), [["__scopeId", "data-v-8c293eec"]]);
+}), [["__scopeId", "data-v-8daef303"]]);
 //#endregion
 //#region src/app/guards.ts
 /**