rei-kit 2.13.0 → 2.14.0

package/README.md

@@ -1,6 +1,6 @@
 # rei-kit
 
-**One kit. Every look.** 88 accessible components for Vue 3 and Tailwind 4.
+**One kit. Every look.** 89 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 88 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 89 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.13.0 — three consumers.**
+**v2.14.0 — three consumers.**
 
 |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Components   | 88 (`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   | 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.) |
 | 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/index.js

@@ -4174,7 +4174,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "2.13.0";
+var VERSION = "2.14.0";
 //#endregion
 export { AppError, AvatarStack_default as AvatarStack, BaseAlert_default as BaseAlert, BaseAvatar_default as BaseAvatar, BaseBadge_default as BaseBadge, BaseButton_default as BaseButton, BaseCalendar_default as BaseCalendar, BaseCard_default as BaseCard, BaseCheckbox_default as BaseCheckbox, BaseChip_default as BaseChip, BaseCombobox_default as BaseCombobox, BaseDatePicker_default as BaseDatePicker, BaseInput_default as BaseInput, BaseKbd_default as BaseKbd, BaseLink_default as BaseLink, BaseListbox_default as BaseListbox, BaseMenu_default as BaseMenu, BasePopconfirm_default as BasePopconfirm, BasePopover_default as BasePopover, BaseRadioGroup_default as BaseRadioGroup, BaseRating_default as BaseRating, BaseSelect_default as BaseSelect, BaseSeparator_default as BaseSeparator, BaseSheet_default as BaseSheet, BaseSkeleton_default as BaseSkeleton, BaseSlider_default as BaseSlider, BaseSpinner_default as BaseSpinner, BaseStepper_default as BaseStepper, BaseSwitch_default as BaseSwitch, BaseTable_default as BaseTable, BaseTextarea_default as BaseTextarea, CircularProgress_default as CircularProgress, CopyButton_default as CopyButton, DescriptionList_default as DescriptionList, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, FileDrop_default as FileDrop, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, MATERIALS, NumberInput_default as NumberInput, PALETTES, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PinInput_default as PinInput, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SHEET_ROOT_ID, 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, TagsInput_default as TagsInput, TimePicker_default as TimePicker, ToastHost_default as ToastHost, ToggleGroup_default as ToggleGroup, ToneDot_default as ToneDot, VERSION, addDays, applyMaterial, applyPalette, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, ensureSheetRoot, formatDate, formatNumber, fromDateKey, isApplePortable, isInstalled, isMaterial, isPaletteName, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setMaterialStorageKey, setPaletteStorageKey, setThemeStorageKey, startOfWeek, tapFeedback, toAppError, toDateKey, toRedirectPath, todayKey, useDebouncedCallback, useDragScroll, useMaterial, useMediaQuery, useOnline, usePalette, useTheme, useToast, useToday, useVisualViewport };
 

package/dist/styles.css

@@ -3107,6 +3107,110 @@ to {
 }
 }
 
+.rk-mega[data-v-343f9362] {
+  position: relative;
+}
+.rk-mega-bar[data-v-343f9362] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.rk-mega-item[data-v-343f9362] {
+  position: static;
+}
+.rk-mega-top[data-v-343f9362] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: var(--radius-cell);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-ink-soft);
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+.rk-mega-top[data-v-343f9362]:hover,
+.rk-mega-top[aria-expanded='true'][data-v-343f9362] {
+  color: var(--color-ink);
+}
+.rk-mega-top.is-active[data-v-343f9362] {
+  color: var(--color-primary);
+}
+.rk-mega-twist[data-v-343f9362] {
+  width: 0.875rem;
+  height: 0.875rem;
+  transition: rotate var(--duration-fast) var(--ease-standard);
+}
+.rk-mega-twist.is-open[data-v-343f9362] {
+  rotate: 180deg;
+}
+
+/* Full width of the bar rather than of the button: that is what makes it a
+   mega menu and not a dropdown. */
+.rk-mega-panel[data-v-343f9362] {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  z-index: 50;
+  width: 100%;
+  border-radius: var(--radius-card);
+  padding: 1.25rem;
+}
+.rk-mega-panel[hidden][data-v-343f9362] {
+  display: none;
+}
+.rk-mega-columns[data-v-343f9362] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: 1.5rem;
+}
+.rk-mega-column-title[data-v-343f9362] {
+  margin-bottom: 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+}
+.rk-mega-links[data-v-343f9362] {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.rk-mega-link[data-v-343f9362] {
+  display: block;
+  border-radius: var(--radius-cell);
+  padding: 0.375rem 0.5rem;
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.rk-mega-link[data-v-343f9362]:hover {
+  background: var(--color-muted);
+}
+.rk-mega-link-label[data-v-343f9362] {
+  display: block;
+  font-size: 0.875rem;
+  color: var(--color-ink);
+}
+.rk-mega-link-note[data-v-343f9362] {
+  display: block;
+  margin-top: 0.125rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--color-ink-soft);
+}
+
+/* On a narrow screen the panel is the page width and the columns stack,
+   because a four-column grid in a 390px column is four unreadable columns. */
+@media (max-width: 48rem) {
+.rk-mega-panel[data-v-343f9362] {
+    padding: 1rem;
+}
+.rk-mega-columns[data-v-343f9362] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1rem;
+}
+}
+
 /* The root carries no layout of its own, and that is the fix for a real bug
    rather than a style preference.
 

package/dist/web/MegaMenu.vue.d.ts

@@ -0,0 +1,53 @@
+export interface MegaMenuLink {
+    key: string;
+    /** Router destination. */
+    to: string;
+    /** Already translated. */
+    label: string;
+    /** A line under the label, for a link whose name is not enough. */
+    description?: string | undefined;
+}
+export interface MegaMenuColumn {
+    key: string;
+    /** A heading over the column. Already translated. */
+    title?: string | undefined;
+    links: readonly MegaMenuLink[];
+}
+export interface MegaMenuItem<K extends string> {
+    /** Identity, compared against `active`. */
+    key: K;
+    /** Already translated. */
+    label: string;
+    /** A plain link, for a top-level item with nothing under it. */
+    to?: string | undefined;
+    /** What the panel holds. With none, the item is just a link. */
+    columns?: readonly MegaMenuColumn[] | undefined;
+}
+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 MegaMenuItem<K>[];
+        /** Which section is current. Usually derived from the route. */
+        active?: K | undefined;
+        /** Accessible name for the navigation landmark. */
+        label?: string | undefined;
+        /** Whether a pointer opens a panel as well as a click. */
+        openOnHover?: boolean | undefined;
+        /** How long the pointer has to leave before the panel closes, in ms. */
+        hoverDelay?: number | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: { [K_1 in K]?: (props: {}) => any; };
+    emit: {};
+}>) => 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/index.d.ts

@@ -65,5 +65,7 @@ export { default as ResponsiveDialog } from './ResponsiveDialog.vue';
 export { default as BaseTabs } from './BaseTabs.vue';
 export type { TabPanel } from './BaseTabs.vue';
 export { default as BaseTooltip } from './BaseTooltip.vue';
+export { default as MegaMenu } from './MegaMenu.vue';
+export type { MegaMenuColumn, MegaMenuItem, MegaMenuLink } from './MegaMenu.vue';
 export { default as NavLinks } from './NavLinks.vue';
 export type { NavLinkItem } from './NavLinks.vue';