rei-kit 2.6.0 → 2.7.0

package/README.md

@@ -1,6 +1,6 @@
 # rei-kit
 
-**One kit. Every look.** 67 accessible components for Vue 3 and Tailwind 4.
+**One kit. Every look.** 77 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 67 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 77 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.6.0 — three consumers.**
+**v2.7.0 — three consumers.**
 
 |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Components   | 67 (`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   | 77 (`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/AvatarStack.vue.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The people on a thing, overlapped: who is in a conversation, who shares a
+ * list.
+ *
+ * Past `max` it stops drawing faces and says how many are left, because ten
+ * overlapping circles are neither ten faces nor a number. The whole stack is
+ * one thing to a screen reader — `label` names it, usually with the count in
+ * it, which is what somebody listening actually needs.
+ */
+type __VLS_Props = {
+    /** Each person's name, and a picture where there is one. */
+    people: readonly {
+        name: string;
+        src?: string | undefined;
+    }[];
+    /** The stack's accessible name: "Shared with 6 people". Already translated. */
+    label: string;
+    /** How many faces before the rest become a number. */
+    max?: number | undefined;
+    size?: 'sm' | 'md' | 'lg' | 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/components/BaseChip.vue.d.ts

@@ -0,0 +1,32 @@
+import { Component } from 'vue';
+/**
+ * A short label with, when it is one of a set someone assembled, a way to
+ * take it off: a filter, a recipient, a tag.
+ *
+ * Next to `BaseBadge`, which is a standing label and never a control. A chip
+ * is removable, or selectable, or both. If it neither removes nor selects,
+ * reach for the badge.
+ *
+ * `removeLabel` is required when it can be removed, because "×" alone is a
+ * button a screen reader reads as "times".
+ */
+type __VLS_Props = {
+    /** The text. Already translated. */
+    label: string;
+    icon?: Component | undefined;
+    tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined;
+    /** Given, the chip grows a remove button. Its accessible name. */
+    removeLabel?: string | undefined;
+    /** Given, the whole chip is a toggle and this is its state. */
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: () => any;
+    remove: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: () => any;
+    onRemove?: () => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,21 @@
+/**
+ * A keyboard key, or a chord of them: `⌘ K`, `Ctrl Shift P`.
+ *
+ * `<kbd>` is the element the browser and assistive tech already understand,
+ * so this is that element with the kit's surface on it. A chord is separate
+ * keys with a joiner between them rather than one long key, which is how a
+ * screen reader reads it as three things to press.
+ *
+ * The keys are the app's words — `⌘` on a Mac and `Ctrl` elsewhere is a
+ * decision about the reader's machine, not about this component.
+ */
+type __VLS_Props = {
+    /** One key, or the keys of a chord: `['⌘', 'K']`. */
+    keys: string | readonly string[];
+    /** Drawn between the keys — "+", "then". Empty, they simply sit apart. */
+    joiner?: string | undefined;
+    size?: 'sm' | 'md' | 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/components/BaseLink.vue.d.ts

@@ -0,0 +1,33 @@
+/**
+ * A link in a sentence — the one thing a button is not.
+ *
+ * `BaseButton` has a `link` variant for an action that should read as text;
+ * this is the other way round: a real link, to a real place, that navigates.
+ * If pressing it does something rather than goes somewhere, it is a button.
+ *
+ * `to` routes and `href` leaves. A link that leaves in a new tab carries the
+ * mark that says so, and `rel="noopener"`, which is not a nicety: without it
+ * the page that opens can reach back through `window.opener`.
+ */
+type __VLS_Props = {
+    /** A route. Uses `RouterLink`, so the app needs vue-router. */
+    to?: string | Record<string, unknown> | undefined;
+    /** A URL. Anything not on this site should be `external`. */
+    href?: string | undefined;
+    /** Opens in a new tab, with the mark and the `rel` that belong to that. */
+    external?: boolean | undefined;
+    tone?: 'primary' | 'ink' | undefined;
+    underline?: 'always' | 'hover' | 'none' | undefined;
+};
+type __VLS_Slots = {
+    default: () => 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/components/BaseRating.vue.d.ts

@@ -0,0 +1,35 @@
+/**
+ * A score out of five, given or shown.
+ *
+ * Two components in one, and the difference is `readonly`: given, it is a
+ * slider you can drag with the arrow keys; read-only, it is an image with
+ * the score as its name, and nothing to Tab into. A row of five buttons that
+ * do nothing is five stops in the tab order for a number.
+ *
+ * `valueLabel` builds the spoken name — "4 out of 5" — because the words and
+ * their order are the app's language, not the kit's.
+ */
+type __VLS_Props = {
+    max?: number | undefined;
+    /** What is being rated: "Difficulty", "Your rating". Already translated. */
+    label: string;
+    /** The spoken value: `(value, max) => \`${value} out of ${max}\`.` */
+    valueLabel: (value: number, max: number) => string;
+    /** Shows a score rather than asks for one. */
+    readonly?: boolean | undefined;
+    size?: 'sm' | 'md' | 'lg' | undefined;
+    /** Pressing the current score again clears it. */
+    allowClear?: boolean | undefined;
+};
+type __VLS_ModelProps = {
+    /** The score, with `v-model`. `0` is none given. */
+    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/components/BaseSeparator.vue.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A line between things — with, when it helps, a word on it.
+ *
+ * `role="separator"` when it only divides, and nothing at all to assistive
+ * tech when it carries a label, because then the text is the point and the
+ * line is decoration around it.
+ *
+ * Vertical needs a height from its parent: inside a flex row, that is
+ * `align-items: stretch`, which is the default.
+ */
+type __VLS_Props = {
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /** A word in the middle of the line: "or", "Today". Already translated. */
+    label?: string | undefined;
+    /** Room around it. `none` for a divider inside a list that has its own. */
+    spacing?: 'none' | 'sm' | 'md' | 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/components/BaseSkeleton.vue.d.ts

@@ -0,0 +1,25 @@
+/**
+ * One grey box standing in for content that has not arrived.
+ *
+ * `SkeletonList` is rows of these for a list; this is the primitive, for the
+ * shapes a list does not cover — an avatar, a heading, a chart.
+ *
+ * A height is a CSS length, never a class: `h-4` inside a component the app
+ * does not control would render at zero the day that utility is not in the
+ * app's stylesheet, which is exactly how every skeleton in one app came out
+ * invisible.
+ *
+ * It is hidden from assistive tech. The thing that is loading says so —
+ * through `aria-busy`, or a status message — and a screen reader reading
+ * "blank, blank, blank" helps nobody.
+ */
+type __VLS_Props = {
+    /** Any CSS length: `12rem`, `60%`, `8ch`. */
+    width?: string | undefined;
+    height?: string | undefined;
+    /** `circle` makes a round one and squares the width to the height. */
+    shape?: 'block' | 'text' | 'circle' | 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/components/CopyButton.vue.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copies a piece of text, and says that it did.
+ *
+ * The saying is the part that is usually missing: a copy button that changes
+ * nothing leaves the reader pressing it twice. This swaps its icon and its
+ * accessible name for two seconds, and announces the change politely — which
+ * is what tells somebody who cannot see the tick.
+ *
+ * A refusal is reported too, through `error`: a browser without clipboard
+ * permission fails silently otherwise, and the next paste is whatever was
+ * there before.
+ */
+type __VLS_Props = {
+    /** What lands on the clipboard. */
+    text: string;
+    /** The button's name at rest, e.g. "Copy the key". */
+    copyLabel: string;
+    /** Its name for the two seconds after, e.g. "Copied". */
+    copiedLabel: string;
+    /** Said when the browser refuses. Unset, a refusal only leaves it unchanged. */
+    errorLabel?: string | undefined;
+    /** Show the label beside the icon, rather than only to assistive tech. */
+    withText?: boolean | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    failed: () => any;
+    copied: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFailed?: () => any;
+    onCopied?: () => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,45 @@
+/**
+ * Files, dropped on or chosen from a real file input.
+ *
+ * The input is the control; the box around it is a label. That is not a
+ * detail: a `<div>` with a click handler cannot be reached with Tab, opened
+ * with Enter, or announced as "choose file", and dragging is a pointer
+ * gesture that a keyboard has no version of. Everything here works without a
+ * drag.
+ *
+ * It holds files, not uploads. Sending them, the progress and the failures
+ * are the app's — the kit does not know your endpoint, and a component that
+ * guessed it would be wrong everywhere.
+ */
+type __VLS_Props = {
+    /** The instruction in the box: "Drop a receipt here". Already translated. */
+    label: string;
+    /** A line under it: what is accepted, how big. */
+    hint?: string | undefined;
+    /** The button inside the box, e.g. "Browse". */
+    browseLabel: string;
+    /** Accessible name of each file's remove button. */
+    removeLabel: string;
+    /** Passed to the input: `image/*`, `.pdf`. */
+    accept?: string | undefined;
+    multiple?: boolean | undefined;
+    /** In bytes. Anything larger is refused and reported through `rejected`. */
+    maxSize?: number | undefined;
+    /** Shown under the box when a file was too large. */
+    tooLargeLabel?: string | undefined;
+    disabled?: boolean | undefined;
+};
+type __VLS_ModelProps = {
+    /** The files held, with `v-model`. */
+    modelValue?: File[];
+};
+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: File[]) => any;
+    rejected: (files: File[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: File[]) => any;
+    onRejected?: (files: File[]) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,38 @@
+/**
+ * A field that holds several short values: recipients, labels, skills.
+ *
+ * Enter and a comma commit what has been typed; Backspace on an empty field
+ * takes the last one back, which is the shortcut everybody tries. The chips
+ * are before the field rather than beside it, so the caret is always at the
+ * end of the line the way it is in a mail client.
+ *
+ * `removeLabel` builds each chip's remove button name from the tag, so a
+ * screen reader hears "Remove: design" rather than five buttons called "×".
+ */
+type __VLS_Props = {
+    label: string;
+    /** `(tag) => \`Remove ${tag}\`` — already translated. */
+    removeLabel: (tag: string) => string;
+    placeholder?: string | undefined;
+    hint?: string | undefined;
+    error?: string | undefined;
+    /** How many tags at most. The field stops taking them at the limit. */
+    max?: number | undefined;
+    /** By default the same tag twice is ignored. */
+    allowDuplicates?: boolean | undefined;
+    size?: 'sm' | 'md' | undefined;
+    labelHidden?: boolean | undefined;
+    disabled?: boolean | undefined;
+};
+type __VLS_ModelProps = {
+    /** The tags, with `v-model`. */
+    modelValue?: string[];
+};
+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: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: string[]) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.d.ts

@@ -85,7 +85,17 @@ export { default as LocaleLinks } from './components/LocaleLinks.vue';
 export { default as GoogleButton } from './components/GoogleButton.vue';
 export { default as TabBar } from './components/TabBar.vue';
 export type { TabItem } from './components/TabBar.vue';
+export { default as AvatarStack } from './components/AvatarStack.vue';
 export { default as BaseCalendar } from './components/BaseCalendar.vue';
+export { default as BaseChip } from './components/BaseChip.vue';
+export { default as BaseKbd } from './components/BaseKbd.vue';
+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 CopyButton } from './components/CopyButton.vue';
+export { default as FileDrop } from './components/FileDrop.vue';
+export { default as TagsInput } from './components/TagsInput.vue';
 export type { DateRange } from './components/BaseCalendar.vue';
 export { default as BaseDatePicker } from './components/BaseDatePicker.vue';
 export type { DatePreset } from './components/BaseDatePicker.vue';