rei-kit 2.13.0 → 2.15.0

package/dist/styles.css

@@ -632,6 +632,79 @@
   color: var(--color-ink-soft);
 }
 
+/* The buttons are out of the Tab order: the keyboard already has the arrows,
+   and three stops for one number is two too many. They stay reachable by
+   pointer and by touch, which is who they are for. */
+.rk-number[data-v-082bd3d7] {
+  display: flex;
+  align-items: center;
+  height: 2.75rem;
+  border-radius: var(--radius-card);
+  padding: 0 0.25rem;
+}
+.rk-number[data-v-082bd3d7]:focus-within {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 1px;
+}
+.rk-number.is-invalid[data-v-082bd3d7] {
+  --surface-border-color: var(--color-negative);
+}
+.rk-number.is-disabled[data-v-082bd3d7] {
+  opacity: 0.5;
+}
+.rk-number-field[data-v-082bd3d7] {
+  min-width: 0;
+  flex: 1;
+  background: transparent;
+  text-align: center;
+  font-size: 1rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-ink);
+  outline: none;
+}
+.rk-number-step[data-v-082bd3d7] {
+  display: grid;
+  width: 2.25rem;
+  height: 2.25rem;
+  flex-shrink: 0;
+  place-items: center;
+  border-radius: calc(var(--radius-card) - 4px);
+  color: var(--color-ink);
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.rk-number-step[data-v-082bd3d7]:hover:not(:disabled) {
+  background: var(--color-muted);
+}
+.rk-number-step[data-v-082bd3d7]:disabled {
+  opacity: 0.35;
+}
+
+/* The slider takes the room; the field is as wide as its digits need and no
+   wider, so the pair does not read as two fields of equal weight. */
+.rk-slider-field[data-v-6ec3163a] {
+  display: flex;
+  flex-wrap: wrap;
+  /* Centred rather than bottom-aligned: the slider's block grows when its
+     hint wraps to a second line, and aligning to the bottom edge sank the
+     field down with it. */
+  align-items: center;
+  gap: 0.75rem;
+}
+
+/* It wraps rather than squeezing: a slider shorter than this is one nobody
+   can aim with, and then the field belongs under it instead of beside it.
+   Wrapping does that by itself, so it needs no container query -- which
+   would have been a rule that silently never matched unless the app had
+   declared a container above it. */
+.rk-slider-field[data-v-6ec3163a] > :first-child {
+  min-width: 12rem;
+  flex: 1 1 12rem;
+}
+.rk-slider-field-number[data-v-6ec3163a] {
+  width: 7.5rem;
+  flex: 0 1 7.5rem;
+}
+
 .rk-spin-wrap[data-v-842da62c] {
   display: inline-flex;
   align-items: center;
@@ -1827,53 +1900,6 @@ to {
   height: 1rem;
 }
 
-/* The buttons are out of the Tab order: the keyboard already has the arrows,
-   and three stops for one number is two too many. They stay reachable by
-   pointer and by touch, which is who they are for. */
-.rk-number[data-v-082bd3d7] {
-  display: flex;
-  align-items: center;
-  height: 2.75rem;
-  border-radius: var(--radius-card);
-  padding: 0 0.25rem;
-}
-.rk-number[data-v-082bd3d7]:focus-within {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 1px;
-}
-.rk-number.is-invalid[data-v-082bd3d7] {
-  --surface-border-color: var(--color-negative);
-}
-.rk-number.is-disabled[data-v-082bd3d7] {
-  opacity: 0.5;
-}
-.rk-number-field[data-v-082bd3d7] {
-  min-width: 0;
-  flex: 1;
-  background: transparent;
-  text-align: center;
-  font-size: 1rem;
-  font-variant-numeric: tabular-nums;
-  color: var(--color-ink);
-  outline: none;
-}
-.rk-number-step[data-v-082bd3d7] {
-  display: grid;
-  width: 2.25rem;
-  height: 2.25rem;
-  flex-shrink: 0;
-  place-items: center;
-  border-radius: calc(var(--radius-card) - 4px);
-  color: var(--color-ink);
-  transition: background-color var(--duration-fast) var(--ease-standard);
-}
-.rk-number-step[data-v-082bd3d7]:hover:not(:disabled) {
-  background: var(--color-muted);
-}
-.rk-number-step[data-v-082bd3d7]:disabled {
-  opacity: 0.35;
-}
-
 .rk-pin-cells[data-v-ba322d9c] {
   display: flex;
   gap: 0.5rem;
@@ -3068,11 +3094,11 @@ to {
   outline-offset: 2px;
 }
 
-.rk-tip[data-v-3a572640] {
+.rk-tip[data-v-c31426f8] {
   position: relative;
   display: inline-flex;
 }
-.rk-tip-bubble[data-v-3a572640] {
+.rk-tip-bubble[data-v-c31426f8] {
   position: absolute;
   left: 50%;
   z-index: 60;
@@ -3091,22 +3117,138 @@ to {
   pointer-events: none;
   transition: opacity var(--duration-fast) ease;
 }
-.rk-tip-bubble.is-top[data-v-3a572640] {
+.rk-tip-bubble.is-top[data-v-c31426f8] {
   bottom: calc(100% + 0.375rem);
 }
-.rk-tip-bubble.is-bottom[data-v-3a572640] {
+.rk-tip-bubble.is-bottom[data-v-c31426f8] {
   top: calc(100% + 0.375rem);
 }
-.rk-tip:hover .rk-tip-bubble[data-v-3a572640],
-.rk-tip:focus-within .rk-tip-bubble[data-v-3a572640] {
+
+/* Following: placed from the pointer rather than from the trigger's edges,
+   so `top` and `bottom` both have to give way to the inline style. */
+.rk-tip-bubble.is-following[data-v-c31426f8] {
+  bottom: auto;
+  /* No transition on the position, or the bubble lags the pointer it is
+     supposed to be under. */
+  transition: opacity var(--duration-fast) ease;
+}
+.rk-tip-bubble.is-following.is-top[data-v-c31426f8] {
+  transform: translate(-50%, -100%);
+}
+.rk-tip:hover .rk-tip-bubble[data-v-c31426f8],
+.rk-tip:focus-within .rk-tip-bubble[data-v-c31426f8] {
   opacity: 1;
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-tip-bubble[data-v-3a572640] {
+.rk-tip-bubble[data-v-c31426f8] {
     transition: none;
 }
 }
 
+.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/BaseTooltip.vue.d.ts

@@ -18,6 +18,19 @@
  * description of the control rather than as loose text nearby. That is why the
  * trigger goes in a slot: the component has to own the id on both ends.
  *
+ * ## `follow`, and what it costs
+ *
+ * With `follow` the bubble tracks the pointer across the trigger, which is
+ * what a large target wants — a chart, a map, a calendar cell — where a
+ * bubble pinned to the middle can be nowhere near what is under the cursor.
+ *
+ * It is opt-in because it is the one thing here that needs JavaScript: a
+ * `follow` tooltip does nothing until the bundle arrives, while the default
+ * works in a prerendered page with scripting switched off. It also stops
+ * following for a reader who asked their system for less motion, and for a
+ * keyboard, which has no cursor to follow — both fall back to the anchored
+ * position, so the tooltip is never lost, only still.
+ *
  * ## When not to use it
  *
  * For anything the reader must have. A tooltip is unreachable on a touch screen
@@ -27,6 +40,10 @@ type __VLS_Props = {
     /** The description. Already translated. */
     label: string;
     placement?: 'top' | 'bottom' | undefined;
+    /** Track the pointer across the trigger instead of pinning to its middle. */
+    follow?: boolean | undefined;
+    /** How far the bubble sits from the pointer, in pixels. */
+    offset?: number | undefined;
 };
 type __VLS_Slots = {
     /** The control being described. */

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';