rei-kit 2.23.0 → 2.24.0

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

@@ -0,0 +1,33 @@
+declare const __VLS_export: <T extends {
+    key: string;
+    label: string;
+    value: number;
+}>(__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<{
+        /** The parts, in the order they should read around the ring. */
+        slices: readonly T[];
+        /** Names the chart, e.g. "What the stylesheet is made of". */
+        label: string;
+        /** How a value reads, e.g. `(kb) => `${kb} KB``. The kit has no units. */
+        valueLabel: (value: number, item: T) => string;
+        /** A class for one slice, e.g. `text-primary` — it paints the stroke. */
+        fill: (item: T, index: number) => string;
+        /** How thick the ring is, as a percentage of its radius. */
+        thickness?: number | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    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/composables/use-anchored-panel.d.ts

@@ -0,0 +1,48 @@
+import { Ref } from 'vue';
+/** Above the anchor or below it. */
+export type PanelSide = 'top' | 'bottom';
+export interface AnchoredPanelOptions {
+    /** The element the panel is positioned against. */
+    root: Ref<HTMLElement | null>;
+    /** The panel itself, measured once it is on screen. */
+    panel: Ref<HTMLElement | null>;
+    /** Whether it is showing. */
+    open: Ref<boolean>;
+    /** Which way it opens before anything is measured. */
+    side?: PanelSide;
+    /** How close to the window edge it may come, in pixels. */
+    margin?: number;
+}
+/**
+ * Keeping a panel on screen.
+ *
+ * Two corrections, in this order, because they are not equal. **Flip**: a
+ * panel that does not fit below its anchor opens above it when there is
+ * more room there. **Shift**: whatever is left of it past the side of the
+ * window is slid back in.
+ *
+ * A panel taller than the window fits neither way, and then the rule is
+ * still "more room wins" — which shows more of it, and leaves the rest
+ * scrolled to rather than gone. `BasePopover` carried a comment saying it
+ * kept the side it asked for in that case; it never did, and nothing
+ * checked, because the arithmetic had never been given a layout to work
+ * on. The comment is gone and the behaviour is the one under test.
+ *
+ * This was written inside `BasePopover`, which is how the kit came to ship
+ * a popover that flips and a menu that does not. `BaseMenu`'s panel was
+ * pinned under its trigger with `top: 100%`, so a menu button near the
+ * bottom of a window — a row action, the `…` on a card, anything on a
+ * phone — opened a list that ran off the bottom of the screen. Nothing said
+ * so: it rendered, it passed axe, and the items were all there.
+ *
+ * Re-measured while open, because the page can scroll or the window change
+ * size underneath, and a panel that stays where it opened ends up attached
+ * to nothing. The scroll listener captures, so a scroll in any ancestor
+ * counts, and it is passive-by-omission: it only reads.
+ */
+export declare function useAnchoredPanel({ root, panel, open, side, margin, }: AnchoredPanelOptions): {
+    placed: Ref<PanelSide, PanelSide>;
+    shift: Ref<number, number>;
+    place: () => void;
+    reset: () => void;
+};

package/dist/composables/use-dialog-shell.d.ts

@@ -1,4 +1,21 @@
 import { Ref } from 'vue';
+/**
+ * What every modal surface has to do, in one place.
+ *
+ * A dialog, a drawer and anything else that takes the whole page share a
+ * list that is easy to get nearly right: trap Tab, stop Escape, make the
+ * rest of the page inert, stop it scrolling underneath, and hand focus back
+ * to whatever opened it. Each of those has an order that matters, and the
+ * orders are not obvious — releasing `inert` *after* restoring focus drops
+ * it on the body, because an inert element cannot take focus. That was
+ * written once, correctly, in `BaseModal`; a drawer that copied it would be
+ * a second copy to keep correct.
+ *
+ * The Tab wrap has to be done by hand: the browser's own Tab order is the
+ * whole document, and a dialog is only part of it. `inert` is what also
+ * stops a screen reader's virtual cursor, which walks straight past a
+ * keydown handler.
+ */
 export interface DialogShellOptions {
     /** Whether Escape and the scrim close it. */
     dismissible?: () => boolean;

package/dist/{format-BEvBK1SJ.js → environment-Cz5KiC1t.js}

@@ -75,6 +75,49 @@ function formatNumber(value, options = {}, tag = locale.value) {
 	return formatter.format(value);
 }
 //#endregion
-export { formatNumber as n, setFormatLocale as r, formatDate as t };
+//#region src/motion/environment.ts
+/**
+* What every moving part asks before it moves.
+*
+* Kept in one place so the answers cannot drift apart: a counter that honoured
+* reduced motion beside a marquee that did not would be worse than neither.
+* Each is safe to call on a server, where the answer is "do not move" — the
+* server renders the final state, and that is what a reader without
+* JavaScript should see.
+*/
+/** Whether the reader has asked the operating system for less motion. */
+function prefersReducedMotion() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return true;
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/** One frame from now, or the nearest thing to it where frames do not exist. */
+function nextFrame(callback) {
+	if (typeof requestAnimationFrame === "function") {
+		const id = requestAnimationFrame(callback);
+		return () => cancelAnimationFrame(id);
+	}
+	const id = setTimeout(callback, 16);
+	return () => clearTimeout(id);
+}
+/**
+* Calls `callback` with whether `element` is on screen, each time that
+* changes. Returns the function that stops watching.
+*
+* Without `IntersectionObserver` the element counts as visible straight away:
+* an animation that never starts is a missing number, not a missing flourish.
+*/
+function watchVisibility(element, callback, threshold = .25) {
+	if (typeof IntersectionObserver === "undefined") {
+		callback(true);
+		return () => {};
+	}
+	const observer = new IntersectionObserver((entries) => {
+		for (const entry of entries) callback(entry.isIntersecting);
+	}, { threshold });
+	observer.observe(element);
+	return () => observer.disconnect();
+}
+//#endregion
+export { formatNumber as a, formatDate as i, prefersReducedMotion as n, setFormatLocale as o, watchVisibility as r, nextFrame as t };
 
-//# sourceMappingURL=format-BEvBK1SJ.js.map
+//# sourceMappingURL=environment-Cz5KiC1t.js.map

package/dist/environment-Cz5KiC1t.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"environment-Cz5KiC1t.js","names":[],"sources":["../src/utils/format.ts","../src/motion/environment.ts"],"sourcesContent":["import { ref } from 'vue'\n\n/**\n * The locale `Intl` formatting uses.\n *\n * Held here rather than imported from an i18n runtime so the utilities have no\n * i18n dependency at all: an app that never installs vue-i18n still gets dates\n * in the right language. `createI18nRuntime` sets this when it is used.\n */\nconst locale = ref<string>(typeof navigator === 'undefined' ? 'en' : (navigator.language ?? 'en'))\n\n/**\n * Points every formatter at a new locale.\n *\n * @example\n * ```ts\n * setFormatLocale('tr-TR')\n * ```\n */\nexport function setFormatLocale(next: string): void {\n  locale.value = next\n}\n\n/**\n * `Intl.DateTimeFormat` is expensive to construct, so instances are cached per\n * locale and option set. The key includes the locale, which is what lets the\n * cache survive a language change instead of returning stale formatters.\n */\nconst cache = new Map<string, Intl.DateTimeFormat>()\n\n/**\n * Formats a date in the active locale.\n *\n * Reading the locale ref here is deliberate: called from a `computed`, the\n * result re-evaluates when the language changes.\n *\n * @param date - Date to format.\n * @param options - Passed straight to `Intl.DateTimeFormat`.\n *\n * @example\n * ```ts\n * formatDate(new Date(), { weekday: 'narrow' }) // 'T'\n * ```\n */\nexport function formatDate(date: Date, options: Intl.DateTimeFormatOptions): string {\n  const tag = locale.value\n  const key = `${tag}:${JSON.stringify(options)}`\n\n  let formatter = cache.get(key)\n  if (!formatter) {\n    formatter = new Intl.DateTimeFormat(tag, options)\n    cache.set(key, formatter)\n  }\n\n  return formatter.format(date)\n}\n\nconst numberCache = new Map<string, Intl.NumberFormat>()\n\n/**\n * Formats a number in the active locale, or in `tag` when one is given.\n *\n * The same cache and the same locale as `formatDate`, so a counter and the\n * date beside it change language together.\n *\n * @param value - Number to format.\n * @param options - Passed straight to `Intl.NumberFormat`: currency, percent, decimals.\n * @param tag - A BCP 47 tag that overrides the active locale for this call.\n *\n * @example\n * ```ts\n * formatNumber(48200, { style: 'currency', currency: 'JPY' }) // '¥48,200'\n * ```\n */\nexport function formatNumber(\n  value: number,\n  options: Intl.NumberFormatOptions = {},\n  tag: string = locale.value,\n): string {\n  const key = `${tag}:${JSON.stringify(options)}`\n\n  let formatter = numberCache.get(key)\n  if (!formatter) {\n    formatter = new Intl.NumberFormat(tag, options)\n    numberCache.set(key, formatter)\n  }\n\n  return formatter.format(value)\n}\n","/**\n * What every moving part asks before it moves.\n *\n * Kept in one place so the answers cannot drift apart: a counter that honoured\n * reduced motion beside a marquee that did not would be worse than neither.\n * Each is safe to call on a server, where the answer is \"do not move\" — the\n * server renders the final state, and that is what a reader without\n * JavaScript should see.\n */\n\n/** Whether the reader has asked the operating system for less motion. */\nexport function prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return true\n\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n}\n\n/** One frame from now, or the nearest thing to it where frames do not exist. */\nexport function nextFrame(callback: () => void): () => void {\n  if (typeof requestAnimationFrame === 'function') {\n    const id = requestAnimationFrame(callback)\n\n    return () => cancelAnimationFrame(id)\n  }\n\n  const id = setTimeout(callback, 16)\n\n  return () => clearTimeout(id)\n}\n\n/**\n * Calls `callback` with whether `element` is on screen, each time that\n * changes. Returns the function that stops watching.\n *\n * Without `IntersectionObserver` the element counts as visible straight away:\n * an animation that never starts is a missing number, not a missing flourish.\n */\nexport function watchVisibility(\n  element: Element,\n  callback: (visible: boolean) => void,\n  threshold = 0.25,\n): () => void {\n  if (typeof IntersectionObserver === 'undefined') {\n    callback(true)\n\n    return () => {}\n  }\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      for (const entry of entries) callback(entry.isIntersecting)\n    },\n    { threshold },\n  )\n  observer.observe(element)\n\n  return () => observer.disconnect()\n}\n"],"mappings":";;;;;;;;;AASA,IAAM,SAAS,IAAY,OAAO,cAAc,cAAc,OAAQ,UAAU,YAAY,IAAK;;;;;;;;;AAUjG,SAAgB,gBAAgB,MAAoB;CAClD,OAAO,QAAQ;AACjB;;;;;;AAOA,IAAM,wBAAQ,IAAI,IAAiC;;;;;;;;;;;;;;;AAgBnD,SAAgB,WAAW,MAAY,SAA6C;CAClF,MAAM,MAAM,OAAO;CACnB,MAAM,MAAM,GAAG,IAAI,GAAG,KAAK,UAAU,OAAO;CAE5C,IAAI,YAAY,MAAM,IAAI,GAAG;CAC7B,IAAI,CAAC,WAAW;EACd,YAAY,IAAI,KAAK,eAAe,KAAK,OAAO;EAChD,MAAM,IAAI,KAAK,SAAS;CAC1B;CAEA,OAAO,UAAU,OAAO,IAAI;AAC9B;AAEA,IAAM,8BAAc,IAAI,IAA+B;;;;;;;;;;;;;;;;AAiBvD,SAAgB,aACd,OACA,UAAoC,CAAC,GACrC,MAAc,OAAO,OACb;CACR,MAAM,MAAM,GAAG,IAAI,GAAG,KAAK,UAAU,OAAO;CAE5C,IAAI,YAAY,YAAY,IAAI,GAAG;CACnC,IAAI,CAAC,WAAW;EACd,YAAY,IAAI,KAAK,aAAa,KAAK,OAAO;EAC9C,YAAY,IAAI,KAAK,SAAS;CAChC;CAEA,OAAO,UAAU,OAAO,KAAK;AAC/B;;;;;;;;;;;;;AC7EA,SAAgB,uBAAgC;CAC9C,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAAY,OAAO;CAErF,OAAO,OAAO,WAAW,kCAAkC,CAAC,CAAC;AAC/D;;AAGA,SAAgB,UAAU,UAAkC;CAC1D,IAAI,OAAO,0BAA0B,YAAY;EAC/C,MAAM,KAAK,sBAAsB,QAAQ;EAEzC,aAAa,qBAAqB,EAAE;CACtC;CAEA,MAAM,KAAK,WAAW,UAAU,EAAE;CAElC,aAAa,aAAa,EAAE;AAC9B;;;;;;;;AASA,SAAgB,gBACd,SACA,UACA,YAAY,KACA;CACZ,IAAI,OAAO,yBAAyB,aAAa;EAC/C,SAAS,IAAI;EAEb,aAAa,CAAC;CAChB;CAEA,MAAM,WAAW,IAAI,sBAClB,YAAY;EACX,KAAK,MAAM,SAAS,SAAS,SAAS,MAAM,cAAc;CAC5D,GACA,EAAE,UAAU,CACd;CACA,SAAS,QAAQ,OAAO;CAExB,aAAa,SAAS,WAAW;AACnC"}

package/dist/index.d.ts

@@ -95,6 +95,14 @@ export type { TabItem } from './components/TabBar.vue';
  * the picture's order, and one tab stop rather than three hundred odd.
  */
 export { default as ActivityGrid } from './components/ActivityGrid.vue';
+/**
+ * `BarChart` and `DonutChart`: the two shapes the kit's own dashboard
+ * vocabulary — `StatCard`, `ProgressBar`, `ActivityGrid` — creates a need
+ * for and did not answer. Both are the data as text with a picture beside
+ * it, rather than a picture with a sentence describing it.
+ */
+export { default as BarChart } from './components/BarChart.vue';
+export { default as DonutChart } from './components/DonutChart.vue';
 /**
  * `ScrollArea`, a scrolling box with the two things a hand-written one
  * leaves out: a fade at whichever edge has more content past it, and a