rei-kit 0.8.0 → 0.9.1

package/README.md

@@ -108,12 +108,13 @@ import { createSupabaseClient } from 'rei-kit/supabase'
 
 ### Wiring the styles
 
-Four lines, and all four are load-bearing:
+Four lines, and every one is load-bearing:
 
 ```css
 /* your app's main.css */
 @import 'tailwindcss';
 @import 'rei-kit/tokens.css'; /* colour roles, the dark variant, measures, utilities */
+@import 'rei-kit/shell/mobile.css'; /* or shell/web.css — see The shell, below */
 @import 'rei-kit/styles.css'; /* compiled component styles */
 
 /* Tailwind generates a utility only where it has seen the class, and it does
@@ -125,10 +126,10 @@ Four lines, and all four are load-bearing:
 The path is relative to the CSS file, so adjust the `../` depth to where your
 `main.css` sits.
 
-**Leaving any of the four out fails quietly:** the build succeeds, the
+**Leaving any of these out fails quietly:** the build succeeds, the
 components mount, and they come out unstyled. Nothing type-checks this, so it
 is worth a test — Hibi's `kit-styling.spec.ts` reads its own stylesheet and
-asserts all four, at unit-test speed. Copy it.
+asserts them, at unit-test speed. Copy it.
 
 That test exists because the failure is real: Hibi shipped with the tab bar
 invisible once, and separately spent three versions restating `tokens.css`
@@ -183,12 +184,22 @@ it — the same mistake as a hex inside a component, one axis over.
 }
 ```
 
-### The phone shell
+### The shell
 
-`tokens.css` also carries the geometry of a phone shell — `shell-frame`,
-`page-slide`, `page-auth` and the slide transitions between screens. All of it
-is opt-in: nothing applies unless you put the class on an element, so a wide
-app can ignore it. Two of the three consumers use it.
+Tokens are what every app needs. A shell is a decision about what shape the app
+is, so it is a separate import and there are two of them.
+
+|                            |                                                                                                                                                                      |
+| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `rei-kit/shell/mobile.css` | `shell-frame` (a 430px column at viewport height), `page-slide` and `page-auth` scroll containers, and the sliding transition between screens                        |
+| `rei-kit/shell/web.css`    | `.shell` — the page's column as a class, for a header or footer whose bar spans the window while its contents line up with the text — and a short fade between pages |
+
+Both are opt-in throughout: nothing applies until a class lands on an element,
+and both read `--measure-page` rather than declaring a width of their own.
+
+They were one file until 0.9.0, and it was `tokens.css` — so a wide course site
+downloaded a 430px column, a full-viewport height and an iOS sheet curve in
+order to ignore them, and had no counterpart of its own.
 
 ### Prerendering
 

package/dist/components/BaseInput.vue.d.ts

@@ -8,7 +8,12 @@ type __VLS_Props = {
      * leave the input with no accessible name at all.
      */
     labelHidden?: boolean | undefined;
-    type?: 'text' | 'email' | 'password' | 'number' | undefined;
+    /**
+     * Every type a text field can be, because the ones missing were the ones
+     * apps needed: `date` and `search` were hand-written three times each and
+     * `url` twice, in files that already imported this component.
+     */
+    type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local' | undefined;
     /** `sm` for a field inside a row rather than in a form of its own. */
     size?: 'sm' | 'md' | undefined;
 };

package/dist/components/BaseTextarea.vue.d.ts

@@ -4,7 +4,12 @@ type __VLS_Props = {
     hint?: string | undefined;
     labelHidden?: boolean | undefined;
     rows?: number | undefined;
-    /** `sm` for editing in place, inside a row that is already small. */
+    /**
+     * `sm` tightens the label and the spacing. It does **not** shrink the text:
+     * iOS zooms the viewport when it focuses a field under 16px and never zooms
+     * back, which is why both phone apps force 16px on form elements in their
+     * base layer.
+     */
     size?: 'sm' | 'md' | undefined;
 };
 type __VLS_ModelProps = {

package/dist/index.js

@@ -1093,6 +1093,7 @@ var _hoisted_1$20 = [
 	"aria-invalid",
 	"aria-describedby"
 ];
+var CONTROL_CLASS = "h-11 text-base";
 //#endregion
 //#region src/components/BaseInput.vue
 var BaseInput_default = /* @__PURE__ */ defineComponent({
@@ -1114,10 +1115,6 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 	}),
 	emits: ["update:modelValue"],
 	setup(__props) {
-		const SIZE_CLASS = {
-			sm: "h-11 text-sm",
-			md: "h-11 text-base"
-		};
 		const model = useModel(__props, "modelValue");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FormField_default, {
@@ -1133,7 +1130,7 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 					type: __props.type,
 					"aria-invalid": invalid,
 					"aria-describedby": describedBy
-				}, _ctx.$attrs, { class: ["border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border px-3 focus-visible:outline-2 focus-visible:outline-offset-1", [SIZE_CLASS[__props.size], invalid ? "border-negative" : ""]] }), null, 16, _hoisted_1$20), [[vModelDynamic, model.value]])]),
+				}, _ctx.$attrs, { class: ["border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border px-3 focus-visible:outline-2 focus-visible:outline-offset-1", [CONTROL_CLASS, invalid ? "border-negative" : ""]] }), null, 16, _hoisted_1$20), [[vModelDynamic, model.value]])]),
 				_: 1
 			}, 8, [
 				"label",
@@ -1567,7 +1564,7 @@ var BaseTextarea_default = /* @__PURE__ */ defineComponent({
 					rows: __props.rows,
 					"aria-invalid": invalid,
 					"aria-describedby": describedBy
-				}, _ctx.$attrs, { class: ["border-hair bg-surface text-ink rounded-card focus-visible:outline-primary resize-y border px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1", [__props.size === "sm" ? "text-sm" : "text-base", invalid ? "border-negative" : ""]] }), null, 16, _hoisted_1$14), [[vModelText, model.value]])]),
+				}, _ctx.$attrs, { class: ["border-hair bg-surface text-ink rounded-card focus-visible:outline-primary resize-y border px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1", ["text-base", invalid ? "border-negative" : ""]] }), null, 16, _hoisted_1$14), [[vModelText, model.value]])]),
 				_: 1
 			}, 8, [
 				"label",
@@ -2385,7 +2382,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "0.8.0";
+var VERSION = "0.9.1";
 //#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, todayKey, useDebouncedCallback, useDragScroll, useMediaQuery, useOnline, useTheme, useToast, useToday, useVisualViewport };