rei-kit 2.14.0 → 2.16.0

package/README.md

@@ -1,6 +1,6 @@
 # rei-kit
 
-**One kit. Every look.** 89 accessible components for Vue 3 and Tailwind 4.
+**One kit. Every look.** 91 accessible components for Vue 3 and Tailwind 4.
 Change the **material** with one attribute and the **palette** with another —
 every component follows, and none of them knows your brand.
 
@@ -112,7 +112,7 @@ Each claim here is enforced by something that fails, not by a promise.
 
 | Standard                                 | How it is held                                                                                                                                                                                                                                                                                                                          |
 | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Open for extension, closed for edits** | A new look is a token, a material or a palette — never an edit to a component. Materials and palettes restyle all 89 without touching one, and a test fails if a component holds a colour.                                                                                                                                              |
+| **Open for extension, closed for edits** | A new look is a token, a material or a palette — never an edit to a component. Materials and palettes restyle all 91 without touching one, and a test fails if a component holds a colour.                                                                                                                                              |
 | **Single responsibility**                | One part, one job. Label-and-error wiring lives in `FormField`, not in five inputs; taking the page behind a layer out of reach lives in one helper the modal, the sheet and the guide share.                                                                                                                                           |
 | **Depend on roles, not values**          | Components read `primary`, `surface`, `--shadow-card` — never a hex or a pixel shadow. An app's brand wins in both modes, tested.                                                                                                                                                                                                       |
 | **WAI-ARIA Authoring Practices**         | Menus, comboboxes, tabs, sliders, dialogs and accordions follow their APG pattern: arrows move, Tab leaves, Escape closes, focus returns. Behaviour tests drive each with the keyboard.                                                                                                                                                 |
@@ -124,11 +124,11 @@ Each claim here is enforced by something that fails, not by a promise.
 
 ## Status
 
-**v2.14.0 — three consumers.**
+**v2.16.0 — three consumers.**
 
 |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Components   | 89 (`AuthForm`, `BaseTable`, `BaseCombobox`, `BaseSlider`, `TabShell`, `BaseModal`, `BaseTabs`, `BaseTooltip`, `BasePagination`, `BaseBreadcrumb`, `BaseDisclosure`, `BaseAccordion`, `NavLinks`, `OfflineBanner`, `FabButton`, `BaseButton`, `BaseCard`, `BaseInput`, `BaseSelect`, `BaseTextarea`, `BaseCheckbox`, `BaseSwitch`, `BaseRadioGroup`, `BaseMenu`, `BaseAvatar`, `BaseSpinner`, `BaseAlert`, `BaseBadge`, `BaseSheet`, `ProgressBar`, `PriceCard`, `ToastHost`, `TabBar`, `GoogleButton`, `LocaleLinks`, `LocaleSheet`, `AuthShell`, `TourShell`, `InstallPrompt`, `UpdatePrompt`, `InstallSettings`, `SkeletonList`, `PageContainer`, `ErrorBoundary`, etc.) |
+| Components   | 91 (`AuthForm`, `BaseTable`, `BaseCombobox`, `BaseSlider`, `TabShell`, `BaseModal`, `BaseTabs`, `BaseTooltip`, `BasePagination`, `BaseBreadcrumb`, `BaseDisclosure`, `BaseAccordion`, `NavLinks`, `OfflineBanner`, `FabButton`, `BaseButton`, `BaseCard`, `BaseInput`, `BaseSelect`, `BaseTextarea`, `BaseCheckbox`, `BaseSwitch`, `BaseRadioGroup`, `BaseMenu`, `BaseAvatar`, `BaseSpinner`, `BaseAlert`, `BaseBadge`, `BaseSheet`, `ProgressBar`, `PriceCard`, `ToastHost`, `TabBar`, `GoogleButton`, `LocaleLinks`, `LocaleSheet`, `AuthShell`, `TourShell`, `InstallPrompt`, `UpdatePrompt`, `InstallSettings`, `SkeletonList`, `PageContainer`, `ErrorBoundary`, etc.) |
 | Composables  | 16 (`useToast`, `useTheme`, `useMaterial`, `usePalette`, `useToday`, `useMediaQuery`, `useInstall`, `watchInstallability`, `createTabTransition`, `useThemeSync`, `useVisualViewport`, etc.)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | Utilities    | 33 (`applyTheme`, `applyMaterial`, `applyPalette`, `MATERIALS`, `PALETTES`, `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/supabase`, `rei-kit/mobile.css`, `rei-kit/web.css`, and each stylesheet on its own                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |

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

@@ -0,0 +1,58 @@
+export interface ColorSwatch {
+    /** A hex value, `#rgb` or `#rrggbb`. */
+    value: string;
+    /** What to call it. Already translated. */
+    label: string;
+}
+/**
+ * A colour, as a hex value.
+ *
+ * ## A native `input[type="color"]`, painted
+ *
+ * The same decision as `BaseSlider`: the platform's own picker is better
+ * than anything a page can build. It is the one the reader already knows, it
+ * has the eyedropper on the desktops that have one, and on a phone it is a
+ * full-screen control no web page matches. What it does not have is a look
+ * that matches the rest of the kit, so the look is all that is replaced.
+ *
+ * ## What the kit supplies and what the app does
+ *
+ * `swatches` are the app's, values **and** names. A kit that shipped a row
+ * of colours would be shipping a product decision, and one that shipped
+ * unnamed colours would be shipping a set of buttons a screen reader reads
+ * as nothing. `PALETTES` is a ready source for an app that wants the kit's
+ * own ten.
+ *
+ * The hex field appears only when `hexLabel` is given, for the same reason
+ * `BaseChip` grows a remove button only when it is told what to call it: a
+ * control whose name the kit had to invent speaks a language the app does
+ * not.
+ *
+ * ## The value contract
+ *
+ * In and out as `#rrggbb`, lowercase — the way dates are `YYYY-MM-DD` and
+ * times are `HH:mm`. Short hex (`#abc`) and capitals are accepted from a
+ * reader typing and normalised on the way out, so an app never has to
+ * compare two spellings of the same colour.
+ */
+type __VLS_Props = {
+    /** Names the control. Already translated. */
+    label: string;
+    /** The colour, as `#rrggbb`. Required: a picker with no colour shows none. */
+    modelValue: string;
+    /** Colours to offer beside the picker. The app's values and names. */
+    swatches?: readonly ColorSwatch[] | undefined;
+    /** Names the hex field. Without it, there is no hex field. */
+    hexLabel?: string | undefined;
+    hint?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    labelHidden?: boolean | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,59 @@
+/**
+ * One number, reached either way: dragged along a range or typed exactly.
+ *
+ * The pair exists because the two controls answer different halves of the
+ * same question. A slider is for finding a value — you can see where you are
+ * in the range and what "a bit more" looks like — and it is hopeless at
+ * landing on 37 out of 500. A number field lands on 37 immediately and tells
+ * you nothing about whether 37 is a lot. Anything with a wide range and an
+ * exact answer somewhere in it — a price ceiling, an opacity, a timeout —
+ * wants both, and apps kept building the pair by hand.
+ *
+ * ## Both controls carry the same name, and that is on purpose
+ *
+ * A screen reader announces two controls here, not one, because there are
+ * two: each can be focused and each changes the value. Giving them one name
+ * is what says they are the same answer rather than two settings that happen
+ * to sit together. The number field's label is visually hidden, since the
+ * slider's is right above it.
+ *
+ * ## Typing is allowed to be wrong on the way
+ *
+ * The field clamps on commit, not on every keystroke: clamping as you type
+ * turns "50" into "5" and then into "50" again while you are still typing it
+ * — for a range starting at 10, the 5 is rewritten before the 0 arrives.
+ * `NumberInput` already holds that line; this passes the range through and
+ * stays out of it.
+ */
+type __VLS_Props = {
+    /** Names both controls. Already translated. */
+    label: string;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    /** Names the number field's step-down button. Already translated. */
+    decrementLabel: string;
+    /** Names the number field's step-up button. Already translated. */
+    incrementLabel: string;
+    hint?: string | undefined;
+    disabled?: boolean | undefined;
+    /**
+     * Turns the number into something a person would say — "45 minutes", "₺12".
+     *
+     * The slider's readout is the number field here, so this is only what a
+     * screen reader hears for the slider: `aria-valuetext`, which without it
+     * is a bare number and a bare number is not an answer to anything.
+     */
+    format?: ((value: number) => string) | undefined;
+};
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: number) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.d.ts

@@ -60,6 +60,11 @@ export { default as BaseCheckbox } from './components/BaseCheckbox.vue';
 export { default as BaseRadioGroup } from './components/BaseRadioGroup.vue';
 export { default as BaseSelect } from './components/BaseSelect.vue';
 export { default as BaseSlider } from './components/BaseSlider.vue';
+/**
+ * A slider and a number field on one value: drag to find it, type to land
+ * on it. See `SliderField.vue` for why both carry the same name.
+ */
+export { default as SliderField } from './components/SliderField.vue';
 export { default as BaseSpinner } from './components/BaseSpinner.vue';
 export { default as BaseSwitch } from './components/BaseSwitch.vue';
 export { default as BaseTable } from './components/BaseTable.vue';
@@ -95,6 +100,8 @@ export { default as BaseLink } from './components/BaseLink.vue';
 export { default as BaseRating } from './components/BaseRating.vue';
 export { default as BaseSeparator } from './components/BaseSeparator.vue';
 export { default as BaseSkeleton } from './components/BaseSkeleton.vue';
+export { default as ColorPicker } from './components/ColorPicker.vue';
+export type { ColorSwatch } from './components/ColorPicker.vue';
 export { default as CopyButton } from './components/CopyButton.vue';
 export { default as DescriptionList } from './components/DescriptionList.vue';
 export type { DescriptionItem } from './components/DescriptionList.vue';