rei-kit 2.23.0 → 2.25.0

package/dist/tokens.css

@@ -22,7 +22,7 @@
   --color-surface: #ffffff;
   --color-muted: #ddf4e7;
   --color-ink: #0f2229;
-  --color-ink-soft: #5c7480;
+  --color-ink-soft: #586f7b;
   --color-hair: #e1edea;
 
   /* ---------------------------------------------------------------------
@@ -72,7 +72,7 @@
   --color-primary: #26667f;
   --color-accent: #124170;
   --color-positive: #67c090;
-  --color-negative: #c9463b;
+  --color-negative: #c7453a;
   --color-warning: #d89a3e;
 
   --color-on-primary: #ffffff;
@@ -87,7 +87,7 @@
     --color-primary: #26667f;
     --color-accent: #124170;
     --color-positive: #67c090;
-    --color-negative: #c9463b;
+    --color-negative: #c7453a;
     --color-warning: #d89a3e;
 
     --color-on-primary: #ffffff;

package/dist/utils/focusable.d.ts

@@ -0,0 +1,25 @@
+/**
+ * What the keyboard can reach, as one selector.
+ *
+ * Three parts of the kit ask this question and each had written its own
+ * answer, which is how three answers came to differ: the dialog trap and
+ * the popover agreed, and `ScrollArea` left out `:not([disabled])`, so a
+ * box holding nothing but disabled buttons counted as reachable and was
+ * denied the focus stop that would have been its only way in.
+ *
+ * `summary` belongs here for the same reason it belonged in `ScrollArea`:
+ * a `<details>` heading takes focus, and a dialog whose trap skipped one
+ * would let Tab out of itself.
+ *
+ * Two things it deliberately does not do. It does not check whether an
+ * element is visible or inside an `inert` subtree — a selector cannot, and
+ * every caller here is already scoped to something on screen. And it is
+ * not what a roving-tabindex container should use to find its own
+ * controls: `[tabindex]:not([tabindex="-1"])` matches exactly the one
+ * control such a container has already put in the tab order, so it would
+ * find one item and then stop. `BaseToolbar` says so where it keeps its
+ * own.
+ */
+export declare const FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex=\"-1\"])";
+/** The reachable elements inside `root`, in document order. */
+export declare function focusableWithin(root: Element | null | undefined): HTMLElement[];

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

@@ -43,6 +43,7 @@ type __VLS_Props = {
     openDelay?: number | undefined;
     /** How long it survives the pointer leaving, so the card can be reached. */
     closeDelay?: number | undefined;
+    /** Which side it prefers. It opens on the other when there is more room there. */
     placement?: 'top' | 'bottom' | undefined;
 };
 type __VLS_Slots = {

package/dist/web/index.d.ts

@@ -15,6 +15,7 @@
  */
 export { default as BaseAccordion } from './BaseAccordion.vue';
 export type { AccordionItem } from './BaseAccordion.vue';
+/** Where this page sits, and the way back up. */
 export { default as BaseBreadcrumb } from './BaseBreadcrumb.vue';
 export type { Crumb } from './BaseBreadcrumb.vue';
 /**
@@ -29,6 +30,7 @@ export type { Crumb } from './BaseBreadcrumb.vue';
  * Menu key, or it is a set of actions a keyboard cannot reach at all.
  */
 export { default as BaseContextMenu } from './BaseContextMenu.vue';
+/** One section that opens and closes. */
 export { default as BaseDisclosure } from './BaseDisclosure.vue';
 /**
  * `BaseHoverCard`, for when the answer is a thing rather than a sentence —
@@ -48,6 +50,7 @@ export { default as BaseDrawer } from './BaseDrawer.vue';
  * to make somebody reaching for one notice the other exists.
  */
 export { default as BaseModal } from './BaseModal.vue';
+/** Moving between pages of a list. */
 export { default as BasePagination } from './BasePagination.vue';
 /**
  * Everything the app can do, behind ⌘K. In the wide entry because it is a
@@ -67,9 +70,18 @@ export type { DataColumn, TableSort } from './DataTable.vue';
  * a desk-sized screen is arranged with, and that a phone never shows.
  */
 export { default as BaseSplitter } from './BaseSplitter.vue';
+/**
+ * A row of controls that belong together: a formatting bar, a row of view
+ * switches, the actions over a table.
+ */
 export { default as BaseToolbar } from './BaseToolbar.vue';
+/**
+ * A tree of things that contain things: folders, a category list, a table
+ * of contents.
+ */
 export { default as BaseTree } from './BaseTree.vue';
 export type { TreeNode } from './BaseTree.vue';
+/** Two lists and the way between them: what is available, what is chosen. */
 export { default as TransferList } from './TransferList.vue';
 /**
  * One question, asked the way the screen expects: a modal on a wide screen,
@@ -77,11 +89,18 @@ export { default as TransferList } from './TransferList.vue';
  * app that only ever shows the sheet should reach for `BaseSheet` itself.
  */
 export { default as ResponsiveDialog } from './ResponsiveDialog.vue';
+/** Sections of one page, one visible at a time. */
 export { default as BaseTabs } from './BaseTabs.vue';
 export type { TabPanel } from './BaseTabs.vue';
+/** A short label that appears beside a control. */
 export { default as BaseTooltip } from './BaseTooltip.vue';
+/**
+ * A wide site's navigation, where a section has more in it than a row can
+ * hold: columns of links under a heading, opened from the bar.
+ */
 export { default as MegaMenu } from './MegaMenu.vue';
 export type { MegaMenuColumn, MegaMenuItem, MegaMenuLink } from './MegaMenu.vue';
+/** The primary navigation of a wide site. */
 export { default as NavLinks } from './NavLinks.vue';
 export type { NavLinkItem } from './NavLinks.vue';
 /**

package/dist/web.js

@@ -1,5 +1,5 @@
 import { a as BaseCheckbox_default, c as useBoundValue, d as ensureSheetRoot, n as elementDirection, o as BaseSheet_default, r as horizontalStep, s as inertOutside, t as focusTarget } from "./focus-target-DRgd8UnQ.js";
-import { a as useMediaQuery, i as useMenuKeys, n as ScrollArea_default, r as BaseSkeleton_default, t as BaseListbox_default } from "./BaseListbox-BrIZxUmx.js";
+import { a as BaseSkeleton_default, c as useMediaQuery, i as focusableWithin, n as ScrollArea_default, o as useMenuKeys, s as useAnchoredPanel, t as BaseListbox_default } from "./BaseListbox-DvZ7IhNn.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
 import { t as BaseButton_default } from "./BaseButton-RN2an975.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useModel, useTemplateRef, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
@@ -310,6 +310,14 @@ var BaseHoverCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 	setup(__props) {
 		const id = useId();
 		const open = ref(false);
+		const root = ref(null);
+		const panel = ref(null);
+		const { placed, shift } = useAnchoredPanel({
+			root,
+			panel,
+			open,
+			side: __props.placement
+		});
 		let timer;
 		function clear() {
 			if (timer !== void 0) clearTimeout(timer);
@@ -349,6 +357,8 @@ var BaseHoverCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		onBeforeUnmount(clear);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
 				class: "rk-hovercard",
 				onPointerenter: show,
 				onPointerleave: hide,
@@ -358,37 +368,22 @@ var BaseHoverCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, [renderSlot(_ctx.$slots, "default", { props: triggerProps.value }, void 0, true), open.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				id: unref(id),
-				class: normalizeClass(["rk-hovercard-panel surface-raised", `is-${__props.placement}`]),
+				ref_key: "panel",
+				ref: panel,
+				class: normalizeClass(["rk-hovercard-panel surface-raised", `is-${unref(placed)}`]),
+				style: normalizeStyle(unref(shift) ? { "--rk-hovercard-shift": `${unref(shift)}px` } : void 0),
 				role: "group",
 				"aria-label": __props.label
-			}, [renderSlot(_ctx.$slots, "card", {}, void 0, true)], 10, _hoisted_1$15)) : createCommentVNode("", true)], 32);
+			}, [renderSlot(_ctx.$slots, "card", {}, void 0, true)], 14, _hoisted_1$15)) : createCommentVNode("", true)], 544);
 		};
 	}
-}), [["__scopeId", "data-v-70c09916"]]);
+}), [["__scopeId", "data-v-d3c3b40f"]]);
 //#endregion
 //#region src/composables/use-dialog-shell.ts
-/**
-* 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.
-*/
-var FOCUSABLE$1 = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
 function useDialogShell(open, panel, { dismissible = () => true, onClose }) {
 	let releaseInert = null;
 	let restoreTo = null;
-	const focusable = () => panel.value ? Array.from(panel.value.querySelectorAll(FOCUSABLE$1)) : [];
+	const focusable = () => panel.value ? focusableWithin(panel.value) : [];
 	function onKeydown(event) {
 		if (event.key === "Escape" && dismissible()) {
 			event.stopPropagation();
@@ -1271,7 +1266,7 @@ var BaseToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 42, _hoisted_1$8);
 		};
 	}
-}), [["__scopeId", "data-v-d49198bf"]]);
+}), [["__scopeId", "data-v-ad876ad1"]]);
 //#endregion
 //#region src/web/BaseTree.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$7 = ["aria-label", "aria-multiselectable"];