rei-kit 2.18.1 → 2.19.0

package/dist/styles.css

@@ -345,19 +345,19 @@
   height: 65%;
 }
 
-.rk-menu[data-v-e57ec901] {
+.rk-menu[data-v-ee62de72] {
   position: relative;
   display: inline-flex;
 }
-.rk-menu-trigger[data-v-e57ec901] {
+.rk-menu-trigger[data-v-ee62de72] {
   display: inline-flex;
   border-radius: var(--radius-cell);
 }
-.rk-menu-trigger[data-v-e57ec901]:focus-visible {
+.rk-menu-trigger[data-v-ee62de72]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-menu-panel[data-v-e57ec901] {
+.rk-menu-panel[data-v-ee62de72] {
   position: absolute;
   top: calc(100% + 0.5rem);
   z-index: 50;
@@ -366,16 +366,16 @@
   border-radius: var(--radius-card);
   padding: 0.375rem;
 }
-.rk-menu-panel.is-end[data-v-e57ec901] {
+.rk-menu-panel.is-end[data-v-ee62de72] {
   right: 0;
 }
-.rk-menu-panel.is-start[data-v-e57ec901] {
+.rk-menu-panel.is-start[data-v-ee62de72] {
   left: 0;
 }
 
 /* The items belong to the caller, so this styles them by role rather than by
    class: whatever they render, it lines up. */
-.rk-menu-panel[data-v-e57ec901] [role='menuitem'] {
+.rk-menu-panel[data-v-ee62de72] [role='menuitem'] {
   display: block;
   width: 100%;
   border-radius: var(--radius-cell);
@@ -385,14 +385,14 @@
   color: var(--color-ink);
   transition: background-color var(--duration-fast);
 }
-.rk-menu-panel[data-v-e57ec901] [role='menuitem']:hover {
+.rk-menu-panel[data-v-ee62de72] [role='menuitem']:hover {
   background: var(--color-muted);
 }
-.rk-menu-panel[data-v-e57ec901] [role='menuitem']:focus-visible {
+.rk-menu-panel[data-v-ee62de72] [role='menuitem']:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -2px;
 }
-.rk-menu-panel[data-v-e57ec901] hr {
+.rk-menu-panel[data-v-ee62de72] hr {
   margin: 0.375rem 0;
   height: 1px;
   border: 0;
@@ -1582,6 +1582,53 @@ to {
   padding: 0;
 }
 
+.rk-code[data-v-b45043be] {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--color-hair);
+  border-radius: var(--radius-card);
+  background: color-mix(in oklab, var(--color-muted) 50%, transparent);
+}
+.rk-code-bar[data-v-b45043be] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem 0.375rem 1rem;
+  border-block-end: 1px solid var(--color-hair);
+  color: var(--color-ink-soft);
+  font-size: 0.75rem;
+}
+.rk-code-lang[data-v-b45043be] {
+  font-family: ui-monospace, monospace;
+  letter-spacing: 0.04em;
+}
+
+/* Pushes the button to the end when there is no language beside it. */
+.rk-code-copy[data-v-b45043be] {
+  margin-inline-start: auto;
+}
+.rk-code-pre[data-v-b45043be] {
+  margin: 0;
+  overflow-x: auto;
+  padding: 1rem 1.25rem;
+  color: var(--color-ink);
+  font-size: 0.875rem;
+  line-height: 1.75;
+}
+.rk-code-pre[data-v-b45043be]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+.is-wrapped .rk-code-pre[data-v-b45043be] {
+  overflow-x: visible;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.rk-code-pre code[data-v-b45043be] {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
 .rk-dl[data-v-831e205b] {
   display: grid;
   gap: 0.75rem;
@@ -2613,6 +2660,57 @@ to {
   color: var(--color-hair);
 }
 
+.rk-ctx-area[data-v-4888e5a2] {
+  /*
+   * A real box, not `display: contents`.
+   *
+   * `contents` would have kept the app's layout untouched, and it also
+   * drops the element from the accessibility tree in some browsers --
+   * taking `aria-haspopup` with it, silently. So this renders a plain
+   * block, and the class is the app's to change.
+   */
+  display: block;
+}
+.rk-ctx-panel[data-v-4888e5a2] {
+  position: fixed;
+  z-index: 60;
+  min-width: 11rem;
+  padding: 0.25rem;
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-overlay);
+}
+
+/* Unscoped: the items come from the app's slot, so a scoped rule would not
+   reach them. Named off the panel rather than on their own, so this cannot
+   paint a menu item somewhere else on the page. */
+.rk-ctx-panel [role='menuitem'] {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--radius-cell);
+  padding: 0.5rem 0.625rem;
+  text-align: start;
+  font-size: 0.875rem;
+  color: var(--color-ink);
+}
+.rk-ctx-panel [role='menuitem']:hover:not(:disabled),
+.rk-ctx-panel [role='menuitem']:focus-visible {
+  background: var(--color-muted);
+}
+.rk-ctx-panel [role='menuitem']:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+.rk-ctx-panel [role='menuitem']:disabled {
+  opacity: 0.45;
+}
+.rk-ctx-panel hr {
+  margin: 0.25rem 0;
+  border: 0;
+  border-block-start: 1px solid var(--color-hair);
+}
+
 .rk-disclosure-control[data-v-ad5c09f5] {
   display: flex;
   width: 100%;
@@ -2690,7 +2788,188 @@ to {
 }
 }
 
-.rk-modal-scrim[data-v-61956691] {
+.rk-hovercard[data-v-70c09916] {
+  position: relative;
+  display: inline-flex;
+}
+.rk-hovercard-panel[data-v-70c09916] {
+  position: absolute;
+  z-index: 40;
+  inset-inline-start: 0;
+  width: max-content;
+  max-width: 20rem;
+  padding: 0.875rem 1rem;
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-overlay);
+}
+
+/*
+ * The card sits a little off the trigger, and the gap is bridged.
+ *
+ * Crossing that gap leaves the trigger without yet entering the card, which
+ * starts the close. `closeDelay` already covers a pointer moving at any
+ * normal speed, but the bridge means the pointer never actually leaves:
+ * a transparent strip, part of the panel, fills the space. Belt and braces,
+ * because the failure it prevents -- a card whose contents cannot be
+ * reached -- is total rather than cosmetic.
+ */
+.rk-hovercard-panel[data-v-70c09916]::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  height: 0.5rem;
+}
+.rk-hovercard-panel.is-bottom[data-v-70c09916]::before {
+  top: -0.5rem;
+}
+.rk-hovercard-panel.is-top[data-v-70c09916]::before {
+  bottom: -0.5rem;
+}
+.rk-hovercard-panel.is-bottom[data-v-70c09916] {
+  top: 100%;
+  margin-block-start: 0.5rem;
+}
+.rk-hovercard-panel.is-top[data-v-70c09916] {
+  bottom: 100%;
+  margin-block-end: 0.5rem;
+}
+
+.rk-drawer-scrim[data-v-de2cccb9] {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+}
+.rk-drawer-veil[data-v-de2cccb9] {
+  position: absolute;
+  inset: 0;
+  background: color-mix(in oklab, var(--color-ink) 45%, transparent);
+  backdrop-filter: blur(2px);
+}
+.rk-drawer-panel[data-v-de2cccb9] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  max-height: 100%;
+  outline: none;
+  box-shadow: var(--shadow-overlay);
+}
+
+/* Logical, so the writing direction decides which edge this is. */
+.rk-drawer-panel.is-start[data-v-de2cccb9] {
+  margin-inline-end: auto;
+  height: 100%;
+  border-start-end-radius: var(--radius-card);
+  border-end-end-radius: var(--radius-card);
+}
+.rk-drawer-panel.is-end[data-v-de2cccb9] {
+  margin-inline-start: auto;
+  height: 100%;
+  border-start-start-radius: var(--radius-card);
+  border-end-start-radius: var(--radius-card);
+}
+.rk-drawer-panel.is-top[data-v-de2cccb9] {
+  margin-block-end: auto;
+  width: 100%;
+  border-end-start-radius: var(--radius-card);
+  border-end-end-radius: var(--radius-card);
+}
+.rk-drawer-panel.is-bottom[data-v-de2cccb9] {
+  margin-block-start: auto;
+  width: 100%;
+  border-start-start-radius: var(--radius-card);
+  border-start-end-radius: var(--radius-card);
+}
+.rk-drawer-head[data-v-de2cccb9] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  border-block-end: 1px solid var(--color-hair);
+}
+.rk-drawer-title[data-v-de2cccb9] {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-ink);
+}
+.rk-drawer-body[data-v-de2cccb9] {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.25rem;
+}
+.rk-drawer-actions[data-v-de2cccb9] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 1rem 1.25rem;
+  border-block-start: 1px solid var(--color-hair);
+}
+
+/* One pair per edge: a drawer that slid in from the wrong side reads as a
+   different component arriving. */
+.rk-drawer-start-enter-active[data-v-de2cccb9],
+.rk-drawer-start-leave-active[data-v-de2cccb9],
+.rk-drawer-end-enter-active[data-v-de2cccb9],
+.rk-drawer-end-leave-active[data-v-de2cccb9],
+.rk-drawer-top-enter-active[data-v-de2cccb9],
+.rk-drawer-top-leave-active[data-v-de2cccb9],
+.rk-drawer-bottom-enter-active[data-v-de2cccb9],
+.rk-drawer-bottom-leave-active[data-v-de2cccb9] {
+  transition: opacity var(--duration-base) var(--ease-standard);
+}
+.rk-drawer-start-enter-active .rk-drawer-panel[data-v-de2cccb9],
+.rk-drawer-start-leave-active .rk-drawer-panel[data-v-de2cccb9],
+.rk-drawer-end-enter-active .rk-drawer-panel[data-v-de2cccb9],
+.rk-drawer-end-leave-active .rk-drawer-panel[data-v-de2cccb9],
+.rk-drawer-top-enter-active .rk-drawer-panel[data-v-de2cccb9],
+.rk-drawer-top-leave-active .rk-drawer-panel[data-v-de2cccb9],
+.rk-drawer-bottom-enter-active .rk-drawer-panel[data-v-de2cccb9],
+.rk-drawer-bottom-leave-active .rk-drawer-panel[data-v-de2cccb9] {
+  transition: transform var(--duration-base) var(--ease-sheet);
+}
+.rk-drawer-start-enter-from[data-v-de2cccb9],
+.rk-drawer-start-leave-to[data-v-de2cccb9],
+.rk-drawer-end-enter-from[data-v-de2cccb9],
+.rk-drawer-end-leave-to[data-v-de2cccb9],
+.rk-drawer-top-enter-from[data-v-de2cccb9],
+.rk-drawer-top-leave-to[data-v-de2cccb9],
+.rk-drawer-bottom-enter-from[data-v-de2cccb9],
+.rk-drawer-bottom-leave-to[data-v-de2cccb9] {
+  opacity: 0;
+}
+.rk-drawer-start-enter-from .rk-drawer-panel[data-v-de2cccb9],
+.rk-drawer-start-leave-to .rk-drawer-panel[data-v-de2cccb9] {
+  transform: translateX(-100%);
+}
+.rk-drawer-end-enter-from .rk-drawer-panel[data-v-de2cccb9],
+.rk-drawer-end-leave-to .rk-drawer-panel[data-v-de2cccb9] {
+  transform: translateX(100%);
+}
+.rk-drawer-top-enter-from .rk-drawer-panel[data-v-de2cccb9],
+.rk-drawer-top-leave-to .rk-drawer-panel[data-v-de2cccb9] {
+  transform: translateY(-100%);
+}
+.rk-drawer-bottom-enter-from .rk-drawer-panel[data-v-de2cccb9],
+.rk-drawer-bottom-leave-to .rk-drawer-panel[data-v-de2cccb9] {
+  transform: translateY(100%);
+}
+@media (prefers-reduced-motion: reduce) {
+.rk-drawer-start-enter-active .rk-drawer-panel[data-v-de2cccb9],
+  .rk-drawer-start-leave-active .rk-drawer-panel[data-v-de2cccb9],
+  .rk-drawer-end-enter-active .rk-drawer-panel[data-v-de2cccb9],
+  .rk-drawer-end-leave-active .rk-drawer-panel[data-v-de2cccb9],
+  .rk-drawer-top-enter-active .rk-drawer-panel[data-v-de2cccb9],
+  .rk-drawer-top-leave-active .rk-drawer-panel[data-v-de2cccb9],
+  .rk-drawer-bottom-enter-active .rk-drawer-panel[data-v-de2cccb9],
+  .rk-drawer-bottom-leave-active .rk-drawer-panel[data-v-de2cccb9] {
+    transition: none;
+    transform: none;
+}
+}
+
+.rk-modal-scrim[data-v-92ea084c] {
   position: fixed;
   inset: 0;
   z-index: 50;
@@ -2700,7 +2979,7 @@ to {
   background: color-mix(in srgb, var(--color-ink) 70%, transparent);
   backdrop-filter: blur(4px);
 }
-.rk-modal-panel[data-v-61956691] {
+.rk-modal-panel[data-v-92ea084c] {
   width: 100%;
   max-width: 28rem;
   max-height: 85vh;
@@ -2708,21 +2987,21 @@ to {
   border-radius: var(--radius-card);
   padding: 1.5rem;
 }
-.rk-modal-panel[data-v-61956691]:focus {
+.rk-modal-panel[data-v-92ea084c]:focus {
   outline: none;
 }
-.rk-modal-head[data-v-61956691] {
+.rk-modal-head[data-v-92ea084c] {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 1rem;
 }
-.rk-modal-title[data-v-61956691] {
+.rk-modal-title[data-v-92ea084c] {
   font-size: 1.0625rem;
   font-weight: 600;
   color: var(--color-ink);
 }
-.rk-modal-close[data-v-61956691] {
+.rk-modal-close[data-v-92ea084c] {
   display: grid;
   place-items: center;
   flex-shrink: 0;
@@ -2732,58 +3011,58 @@ to {
   color: var(--color-ink-soft);
   transition: background-color var(--duration-fast);
 }
-.rk-modal-close[data-v-61956691]:hover {
+.rk-modal-close[data-v-92ea084c]:hover {
   background: var(--color-muted);
 }
-.rk-modal-close[data-v-61956691]:focus-visible {
+.rk-modal-close[data-v-92ea084c]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-modal-close svg[data-v-61956691] {
+.rk-modal-close svg[data-v-92ea084c] {
   width: 1rem;
   height: 1rem;
 }
-.rk-modal-body[data-v-61956691] {
+.rk-modal-body[data-v-92ea084c] {
   margin-top: 0.75rem;
   color: var(--color-ink-soft);
   font-size: 0.875rem;
   line-height: 1.625;
 }
-.rk-modal-actions[data-v-61956691] {
+.rk-modal-actions[data-v-92ea084c] {
   margin-top: 1.5rem;
   display: flex;
   justify-content: flex-end;
   gap: 0.5rem;
 }
-.rk-modal-enter-active[data-v-61956691],
-.rk-modal-leave-active[data-v-61956691] {
+.rk-modal-enter-active[data-v-92ea084c],
+.rk-modal-leave-active[data-v-92ea084c] {
   transition: opacity var(--duration-base) ease;
 }
-.rk-modal-enter-active .rk-modal-panel[data-v-61956691],
-.rk-modal-leave-active .rk-modal-panel[data-v-61956691] {
+.rk-modal-enter-active .rk-modal-panel[data-v-92ea084c],
+.rk-modal-leave-active .rk-modal-panel[data-v-92ea084c] {
   transition:
     transform var(--duration-base) var(--ease-sheet),
     opacity var(--duration-base) ease;
 }
-.rk-modal-enter-from[data-v-61956691],
-.rk-modal-leave-to[data-v-61956691] {
+.rk-modal-enter-from[data-v-92ea084c],
+.rk-modal-leave-to[data-v-92ea084c] {
   opacity: 0;
 }
 
 /* From nowhere, not from an edge: a scale is what separates this from a sheet. */
-.rk-modal-enter-from .rk-modal-panel[data-v-61956691],
-.rk-modal-leave-to .rk-modal-panel[data-v-61956691] {
+.rk-modal-enter-from .rk-modal-panel[data-v-92ea084c],
+.rk-modal-leave-to .rk-modal-panel[data-v-92ea084c] {
   transform: scale(0.96);
   opacity: 0;
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-modal-enter-active .rk-modal-panel[data-v-61956691],
-  .rk-modal-leave-active .rk-modal-panel[data-v-61956691] {
+.rk-modal-enter-active .rk-modal-panel[data-v-92ea084c],
+  .rk-modal-leave-active .rk-modal-panel[data-v-92ea084c] {
     transition: opacity var(--duration-base) ease;
     transform: none;
 }
-.rk-modal-enter-from .rk-modal-panel[data-v-61956691],
-  .rk-modal-leave-to .rk-modal-panel[data-v-61956691] {
+.rk-modal-enter-from .rk-modal-panel[data-v-92ea084c],
+  .rk-modal-leave-to .rk-modal-panel[data-v-92ea084c] {
     transform: none;
 }
 }

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;
+    };
+};