rei-kit 2.18.0 → 2.19.0

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

@@ -0,0 +1,77 @@
+/**
+ * The menu a right-click opens, on whatever it was opened over.
+ *
+ * ## The keyboard is the whole difficulty
+ *
+ * A right-click menu is trivial to draw and easy to ship broken, because
+ * the thing that breaks is invisible to the person writing it: there is no
+ * mouse in it. The platform's own answer is **Shift+F10**, and on keyboards
+ * that have one, the **Menu** key — both of which this listens for, on the
+ * area itself. A context menu without them is a set of actions that simply
+ * do not exist for anyone not holding a mouse, and nothing on screen says
+ * so.
+ *
+ * Opened that way there is no pointer to anchor to, so it opens at the
+ * focused element instead of at coordinates nobody chose.
+ *
+ * ## It is a menu, with everything that promises
+ *
+ * `role="menu"` is a contract: the arrows move, Home and End go to the
+ * ends, Escape closes, and Tab *leaves*. That is `useMenuKeys`, the same
+ * one `BaseMenu` uses — a menu hung off a pointer and a menu hung off a
+ * button are the same keyboard and two different positions, and only the
+ * position is worth writing twice.
+ *
+ * ## The items are yours
+ *
+ * The kit draws no actions: they arrive in the slot as
+ * `<button role="menuitem">`, because their words, their order and what
+ * they do are the app's, and a kit that guessed them would be wrong in
+ * every app.
+ */
+type __VLS_Props = {
+    /** Names the menu for a screen reader. Already translated. */
+    label: string;
+    /** Leaves the browser's own menu alone — for a text field, or a link. */
+    disabled?: boolean | undefined;
+};
+type __VLS_Slots = {
+    /**
+     * What the menu belongs to: a row, a canvas, a card.
+     *
+     * `props` carries the ARIA that says a menu is here. Spread it onto the
+     * element a reader actually lands on, the same way `BasePopover` hands a
+     * trigger its props.
+     *
+     * That element has to be one whose role takes these attributes — a
+     * `button`, or a `row`, `gridcell`, `treeitem`, `tab`. It is not the
+     * wrapper, and `tabindex` on a `div` does not make it one: focusable and
+     * "has a role that supports `aria-expanded`" are different things, and
+     * the second is what a reader is told. Writing them anywhere else puts
+     * an attribute on the page that a browser is entitled to ignore, which
+     * is worse than leaving them off, because it looks done.
+     */
+    default: (props: {
+        props: {
+            'aria-haspopup'?: 'menu';
+            'aria-expanded'?: boolean;
+            'aria-controls'?: string;
+        };
+    }) => unknown;
+    /** The actions, each a `[role="menuitem"]`. */
+    items: (props: {
+        close: () => void;
+    }) => unknown;
+};
+declare function close(): void;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    close: typeof close;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,68 @@
+type __VLS_Props = {
+    /** Names the dialog. Already translated. */
+    title: string;
+    /** Accessible name of the close button. Already translated. */
+    closeLabel: string;
+    /** Which edge it comes from. `start` and `end` follow the writing direction. */
+    side?: 'start' | 'end' | 'top' | 'bottom' | undefined;
+    /**
+     * How far it reaches in from that edge — a width on the sides, a height on
+     * the top and bottom. Any CSS length.
+     */
+    size?: string | undefined;
+    /** Escape and the scrim close it. Off for something half filled in. */
+    dismissible?: boolean | undefined;
+};
+type __VLS_ModelProps = {
+    /**
+     * A panel that comes in from the edge of a wide screen.
+     *
+     * ## `BaseDrawer`, `BaseSheet` or `BaseModal`
+     *
+     * A sheet belongs to a thumb: it arrives from the bottom edge and is pinned
+     * to the 430px shell column, so on a desktop it is narrow, and that is
+     * correct. A drawer is the wide screen's version — it comes from the side,
+     * it is as tall as the window, and it is the shape for the things a site
+     * keeps beside the page rather than on top of it: filters, a cart, a
+     * navigation menu that outgrew its bar, a record's details.
+     *
+     * A modal interrupts and wants an answer. A drawer does not ask anything —
+     * it is somewhere to work, and the page is still behind it.
+     *
+     * ## It is still a dialog
+     *
+     * Coming from the side changes where it is, not what it owes. Focus moves
+     * in, Tab cannot leave, Escape closes, the page behind goes inert and stops
+     * scrolling, and focus goes back to whatever opened it. All of that is
+     * `useDialogShell`, shared with `BaseModal`, because a drawer that
+     * reimplemented it would be a second copy to keep correct.
+     *
+     * ## `side` is logical, not left and right
+     *
+     * `start` and `end` follow the writing direction, so a drawer that opens
+     * from the left in English opens from the right in Arabic without the app
+     * asking. `top` and `bottom` are there for a command bar or a filter strip,
+     * and they are the same component because the contract is identical.
+     */
+    modelValue: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_26: {}, __VLS_28: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_26) => any;
+} & {
+    actions?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: boolean) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,67 @@
+/**
+ * A card that appears beside something when you rest on it.
+ *
+ * ## `BaseHoverCard` or `BaseTooltip`
+ *
+ * A tooltip is a sentence naming what a control does, and it is wired with
+ * `aria-describedby` — which flattens whatever is inside it to text. That
+ * is right for a sentence and wrong for anything else: a card holding a
+ * name, an avatar and a link would be read as one run-on string, and the
+ * link inside it could not be reached at all.
+ *
+ * So this is not a described-by bubble. The trigger says a popup is there
+ * with `aria-expanded` and `aria-controls`; the card is an ordinary region
+ * of the page that happens to be revealed, and everything inside it stays
+ * reachable.
+ *
+ * Reach for the tooltip when the answer is a sentence. Reach for this when
+ * the answer is a *thing* — a profile, a preview of what a link leads to, a
+ * definition with a source.
+ *
+ * ## The pointer has to be able to get there
+ *
+ * A card that vanishes the moment the pointer leaves the trigger is a card
+ * whose contents can never be used: the gap between the two is enough to
+ * close it. So leaving starts a delay rather than closing, and entering the
+ * card cancels it. That delay is the whole reason this is a component
+ * instead of two CSS rules.
+ *
+ * ## It opens without a pointer too
+ *
+ * Focus opens it, with no delay — waiting makes sense for a pointer sweeping
+ * across a page, and no sense for somebody who deliberately tabbed onto it.
+ * Escape closes it while leaving focus where it is, so a keyboard is never
+ * stuck with a card in the way.
+ *
+ * A hover card is supplementary by definition: everything in it has to be
+ * reachable some other way, because a touch screen has no hover at all.
+ */
+type __VLS_Props = {
+    /** Names the card for a screen reader. Already translated. */
+    label: string;
+    /** How long a pointer has to rest before it opens, in ms. */
+    openDelay?: number | undefined;
+    /** How long it survives the pointer leaving, so the card can be reached. */
+    closeDelay?: number | undefined;
+    placement?: 'top' | 'bottom' | undefined;
+};
+type __VLS_Slots = {
+    /** The thing being rested on. `props` says a popup is here. */
+    default: (props: {
+        props: {
+            'aria-expanded': boolean;
+            'aria-controls': string | undefined;
+        };
+    }) => unknown;
+    /** What appears: a profile, a preview, a definition. */
+    card: () => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/web/index.d.ts

@@ -24,7 +24,22 @@ export type { Crumb } from './BaseBreadcrumb.vue';
  * scrolls in, interleaved with something else, or built from a source the
  * accordion cannot know about.
  */
+/**
+ * `BaseContextMenu`, the right-click menu — which is also Shift+F10 and the
+ * Menu key, or it is a set of actions a keyboard cannot reach at all.
+ */
+export { default as BaseContextMenu } from './BaseContextMenu.vue';
 export { default as BaseDisclosure } from './BaseDisclosure.vue';
+/**
+ * `BaseHoverCard`, for when the answer is a thing rather than a sentence —
+ * which is where `aria-describedby`, and so `BaseTooltip`, stops working.
+ */
+export { default as BaseHoverCard } from './BaseHoverCard.vue';
+/**
+ * `BaseDrawer`, the wide screen's answer to `BaseSheet`: a panel from the
+ * edge, for what a site keeps beside the page rather than on top of it.
+ */
+export { default as BaseDrawer } from './BaseDrawer.vue';
 /**
  * `BaseModal`, beside `BaseSheet` rather than named `Modal` on its own.
  *