rei-kit 2.12.0 → 2.14.0

package/dist/styles.css

@@ -218,6 +218,34 @@
   opacity: 0;
 }
 
+.rk-skeleton[data-v-37327de6] {
+  display: block;
+  flex-shrink: 0;
+  background: var(--color-muted);
+  animation: rk-skeleton-pulse-37327de6 1.6s ease-in-out infinite;
+}
+.rk-skeleton.is-block[data-v-37327de6] {
+  border-radius: var(--radius-cell);
+}
+
+/* A line of text, rounded like one and a little short of its box. */
+.rk-skeleton.is-text[data-v-37327de6] {
+  border-radius: 9999px;
+}
+.rk-skeleton.is-circle[data-v-37327de6] {
+  border-radius: 9999px;
+}
+@keyframes rk-skeleton-pulse-37327de6 {
+50% {
+    opacity: 0.55;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.rk-skeleton[data-v-37327de6] {
+    animation: none;
+}
+}
+
 .rk-listbox[data-v-7f8cd788] {
   overflow-y: auto;
   border-radius: var(--radius-card);
@@ -276,34 +304,6 @@
   padding: 1rem;
 }
 
-.rk-skeleton[data-v-37327de6] {
-  display: block;
-  flex-shrink: 0;
-  background: var(--color-muted);
-  animation: rk-skeleton-pulse-37327de6 1.6s ease-in-out infinite;
-}
-.rk-skeleton.is-block[data-v-37327de6] {
-  border-radius: var(--radius-cell);
-}
-
-/* A line of text, rounded like one and a little short of its box. */
-.rk-skeleton.is-text[data-v-37327de6] {
-  border-radius: 9999px;
-}
-.rk-skeleton.is-circle[data-v-37327de6] {
-  border-radius: 9999px;
-}
-@keyframes rk-skeleton-pulse-37327de6 {
-50% {
-    opacity: 0.55;
-}
-}
-@media (prefers-reduced-motion: reduce) {
-.rk-skeleton[data-v-37327de6] {
-    animation: none;
-}
-}
-
 .rk-avatar[data-v-47586bec] {
   display: grid;
   place-items: center;
@@ -399,26 +399,58 @@
   background: color-mix(in srgb, var(--color-hair) 70%, transparent);
 }
 
-.rk-combo[data-v-ce4c503f] {
+.rk-combo[data-v-aa2335fa] {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
 }
-.rk-combo-label[data-v-ce4c503f] {
+.rk-combo-label[data-v-aa2335fa] {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--color-ink);
 }
-.rk-combo-field[data-v-ce4c503f] {
+.rk-combo-field[data-v-aa2335fa] {
   position: relative;
   display: flex;
   align-items: center;
 }
 
+/* With chips the field is a box that wraps, and the input is one item in it
+   that grows into whatever is left. */
+.rk-combo-field.is-multiple[data-v-aa2335fa] {
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  min-height: 2.75rem;
+  border-radius: var(--radius-card);
+  padding: 0.3125rem 2rem 0.3125rem 0.375rem;
+}
+.rk-combo-chip[data-v-aa2335fa] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  background: var(--color-muted);
+  padding: 0.125rem 0.25rem 0.125rem 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--color-ink);
+}
+.rk-combo-chip-x[data-v-aa2335fa] {
+  display: grid;
+  width: 1.125rem;
+  height: 1.125rem;
+  place-items: center;
+  border-radius: 9999px;
+  color: var(--color-ink-soft);
+  line-height: 1;
+}
+.rk-combo-chip-x[data-v-aa2335fa]:hover {
+  color: var(--color-ink);
+}
+
 /* 16px, like every other text control here: iOS zooms the viewport when it
    focuses a field under 16px and never zooms back. */
-.rk-combo-input[data-v-ce4c503f] {
+.rk-combo-input[data-v-aa2335fa] {
   width: 100%;
   height: 2.75rem;
   border-radius: var(--radius-card);
@@ -426,20 +458,40 @@
   font-size: 1rem;
   color: var(--color-ink);
 }
-.rk-combo-input[data-v-ce4c503f]:focus-visible {
+.is-multiple .rk-combo-input[data-v-aa2335fa] {
+  width: auto;
+  height: 1.75rem;
+  min-width: 6rem;
+  flex: 1;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.rk-combo-input[data-v-aa2335fa]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -1px;
+}
+.is-multiple .rk-combo-input[data-v-aa2335fa]:focus-visible {
+  outline: none;
+}
+
+/* The ring belongs to the whole box once the box is the control. */
+.rk-combo-field.is-multiple[data-v-aa2335fa]:focus-within {
   outline: 2px solid var(--color-primary);
   outline-offset: -1px;
 }
-.rk-combo-input[data-v-ce4c503f]:disabled {
+.rk-combo-input[data-v-aa2335fa]:disabled {
   opacity: 0.5;
 }
-.rk-combo-toggle[data-v-ce4c503f] {
+.rk-combo-toggle[data-v-aa2335fa] {
   position: absolute;
   right: 0.5rem;
   color: var(--color-ink-soft);
   font-size: 0.75rem;
 }
-.rk-combo-list[data-v-ce4c503f] {
+.rk-combo-list[data-v-aa2335fa] {
   position: absolute;
   top: calc(100% - 1.25rem);
   z-index: 50;
@@ -449,29 +501,48 @@
   border-radius: var(--radius-card);
   padding: 0.25rem;
 }
-.rk-combo-option[data-v-ce4c503f] {
+.rk-combo-option[data-v-aa2335fa] {
   cursor: pointer;
   border-radius: var(--radius-cell);
   padding: 0.5rem 0.625rem;
   font-size: 0.875rem;
   color: var(--color-ink);
 }
-.rk-combo-option.is-highlighted[data-v-ce4c503f] {
+
+/* A virtual row's height is the arithmetic the spacers are built on, so it
+   cannot be left to the text inside it. */
+.rk-combo-option[style][data-v-aa2335fa] {
+  display: flex;
+  align-items: center;
+  padding-block: 0;
+}
+.rk-combo-option.is-highlighted[data-v-aa2335fa] {
   background: var(--color-muted);
 }
-.rk-combo-option.is-selected[data-v-ce4c503f] {
+.rk-combo-option.is-selected[data-v-aa2335fa] {
   font-weight: 600;
 }
-.rk-combo-empty[data-v-ce4c503f] {
+.rk-combo-empty[data-v-aa2335fa],
+.rk-combo-status[data-v-aa2335fa] {
   padding: 0.75rem 0.625rem;
   font-size: 0.875rem;
   color: var(--color-ink-soft);
 }
-.rk-combo-error[data-v-ce4c503f] {
+.rk-combo-status[data-v-aa2335fa] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.rk-combo-status-rows[data-v-aa2335fa] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.rk-combo-error[data-v-aa2335fa] {
   font-size: 0.75rem;
   color: var(--color-negative);
 }
-.rk-combo-hint[data-v-ce4c503f] {
+.rk-combo-hint[data-v-aa2335fa] {
   font-size: 0.75rem;
   color: var(--color-ink-soft);
 }
@@ -3036,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';