@crewlethq/ui 0.12.0 → 0.14.0

package/dist/MarkdownEditor/MarkdownEditor.d.ts

@@ -0,0 +1,93 @@
+import { type ReactNode, type Ref } from 'react';
+import { type MarkdownFormat } from './format.js';
+export type MarkdownEditorMode = 'write' | 'preview';
+/** Every string the editor draws on its own. */
+export interface MarkdownEditorLabels {
+    /** The formatting bar's name. */
+    toolbar: string;
+    /** The Write and Preview switch's name. */
+    view: string;
+    write: string;
+    preview: string;
+    /** What Preview shows for an empty body. */
+    empty: string;
+    /** Each control's name, which is also its tooltip. */
+    formats: Record<MarkdownFormat, string>;
+}
+/** The strings a caller may change; each format's name can be changed alone. */
+export type MarkdownEditorLabelOverrides = Partial<Omit<MarkdownEditorLabels, 'formats'>> & {
+    formats?: Partial<MarkdownEditorLabels['formats']> | undefined;
+};
+/** What a control the caller adds to the bar may do to the editor. */
+export interface MarkdownEditorApi {
+    /**
+     * Which view is showing. A control that edits the source is disabled in
+     * Preview, as the bar's own controls are, because there is no caret there.
+     */
+    readonly mode: MarkdownEditorMode;
+    /** Replaces the selection with `text` and leaves the caret after it, as a paste would. */
+    insert(text: string): void;
+    /** Applies a format, exactly as the bar's own control for it does. */
+    format(format: MarkdownFormat): void;
+    /** Moves focus into the field. */
+    focus(): void;
+}
+export interface MarkdownEditorProps {
+    /** The markdown being edited. */
+    value: string;
+    onChange: (value: string) => void;
+    /** The field's accessible name: "The page, in markdown". */
+    label: string;
+    /**
+     * Draws the preview of `value`. The renderer is the application's, because
+     * what a body may contain is a decision about its own content; wrap what it
+     * returns in `Document` and the preview is set exactly as the page will be.
+     */
+    renderPreview: (value: string) => ReactNode;
+    placeholder?: string | undefined;
+    /** The view, when the caller holds it. Uncontrolled, the editor opens on Write. */
+    mode?: MarkdownEditorMode | undefined;
+    defaultMode?: MarkdownEditorMode | undefined;
+    onModeChange?: ((mode: MarkdownEditorMode) => void) | undefined;
+    /**
+     * Controls of the caller's own, drawn on the bar after the formatting
+     * controls: a "Link a page" picker, say. They are handed the editor, so a
+     * picker inserts at the writer's caret rather than at the end.
+     */
+    actions?: ((editor: MarkdownEditorApi) => ReactNode) | undefined;
+    /** The strip under the field: a word count, a size against a limit. */
+    footer?: ReactNode;
+    /** Command+Enter (Control+Enter elsewhere), the shortcut every composer in the system saves on. */
+    onSubmit?: (() => void) | undefined;
+    disabled?: boolean | undefined;
+    /** Draws the field as refused, for a body over its limit. */
+    invalid?: boolean | undefined;
+    /** How many lines the field stands at before it scrolls. */
+    rows?: number | undefined;
+    /** The field's id, for a label or a description elsewhere on the screen. */
+    id?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    labels?: MarkdownEditorLabelOverrides | undefined;
+    ref?: Ref<MarkdownEditorApi> | undefined;
+    className?: string | undefined;
+}
+/**
+ * Writing markdown: a formatting bar, the source in a monospace field, and a
+ * Preview that draws it as the reader will see it.
+ *
+ * THE SOURCE IS WHAT IS EDITED, never a rich-text model of it. The engine
+ * stores markdown and nothing else, so a writer sees exactly what will be
+ * saved, a paste of markdown stays markdown, and nothing converts between two
+ * formats on the way to a save.
+ *
+ * THE BAR WRITES MARKDOWN AT THE CARET, the way a person would type it, and
+ * every control is a toggle (see format.ts). A press keeps the field's own
+ * selection: the control never takes focus from the field, and the field gets
+ * focus back with the selection where the format left it, so pressing Bold
+ * and carrying on typing types inside the bold.
+ *
+ * ONE TAB STOP FOR THE BAR. It is a `Toolbar`: Tab reaches it once, the arrows
+ * walk its controls, and Write and Preview are the last stop, a tab list whose
+ * panel is the field or the preview.
+ */
+export declare function MarkdownEditor({ value, onChange, label, renderPreview, placeholder, mode: controlled, defaultMode, onModeChange, actions, footer, onSubmit, disabled, invalid, rows, id, 'aria-describedby': describedBy, labels, ref, className, }: MarkdownEditorProps): import("react").JSX.Element;

package/dist/MarkdownEditor/format.d.ts

@@ -0,0 +1,34 @@
+/**
+ * What a formatting control does to markdown source, as pure functions over a
+ * value and a selection.
+ *
+ * WHY PURE. A formatting bar that edits a textarea by hand is a bar whose
+ * rules can only be tested by driving a browser, and the rules are where it
+ * goes wrong: a bold applied to " word " that CommonMark refuses to read as
+ * bold, a list applied twice that nests a marker inside a marker, a heading
+ * that stacks `## ### `. Each control here answers the new value and where
+ * the selection lands, and the component only applies the answer.
+ *
+ * EVERY CONTROL IS A TOGGLE. Pressed on text that already carries its format,
+ * it takes the format off, which is what a writer expects of a bar and what
+ * keeps a second press from writing `****word****`.
+ */
+/** The formats the bar offers, in the order it draws them. */
+export declare const MARKDOWN_FORMATS: readonly ["heading2", "heading3", "bold", "italic", "code", "bulletList", "numberedList", "checklist", "table"];
+export type MarkdownFormat = (typeof MARKDOWN_FORMATS)[number];
+/** A selection in the source, as the textarea reports it. `start === end` is a caret. */
+export interface MarkdownSelection {
+    start: number;
+    end: number;
+}
+/** What a control answers: the new source, and the selection to leave in it. */
+export interface MarkdownEdit {
+    value: string;
+    selection: MarkdownSelection;
+}
+/** Replaces the selection with `text` and leaves the caret after it. */
+export declare function insertMarkdown(value: string, { start, end }: MarkdownSelection, text: string): MarkdownEdit;
+/** The format applied to the selection, or taken off it when it is already there. */
+export declare function formatMarkdown(value: string, selection: MarkdownSelection, format: MarkdownFormat): MarkdownEdit;
+/** How many words a body holds, counted the way a writer would. */
+export declare function markdownWords(value: string): number;

package/dist/MarkdownEditor/index.d.ts

@@ -0,0 +1,5 @@
+import './MarkdownEditor.css';
+export { MarkdownEditor } from './MarkdownEditor.js';
+export type { MarkdownEditorApi, MarkdownEditorLabelOverrides, MarkdownEditorLabels, MarkdownEditorMode, MarkdownEditorProps, } from './MarkdownEditor.js';
+export { MARKDOWN_FORMATS, formatMarkdown, insertMarkdown, markdownWords } from './format.js';
+export type { MarkdownEdit, MarkdownFormat, MarkdownSelection } from './format.js';

package/dist/MarkdownEditor/index.js

@@ -0,0 +1,12 @@
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-77IEHFY4.js';
+import '../chunk-VYY56AMX.js';
+import '../chunk-PGRPNDWM.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-26PEPONN.js';
+import '../chunk-4LDTQWS7.js';
+import '../chunk-CBOICT64.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/MarkdownEditor-ZLSHTOIZ.css

@@ -0,0 +1,146 @@
+/*
+ * Writing markdown (MarkdownEditor.tsx): the bar, the source or its preview,
+ * and the footer, in ONE box.
+ *
+ * THE BOX TAKES THE RING, and only for the field. It is the package's one ring
+ * for a field: the box's own hairline drawn in the focus colour, laid on the
+ * boundary (see Input.css). It is asked of the FIELD rather than of
+ * :focus-within, so a reader walking the bar's controls sees each control's
+ * own ring and not a second one round the whole editor.
+ */
+
+.crewlet-markdown-editor {
+  /* The height the field and the preview stand at, so switching between them
+     does not move what is under the editor. */
+  --crewlet-markdown-editor-height: calc(
+    var(--crewlet-markdown-editor-rows, 14) * var(--font-size-compact) * var(--font-line-height-relaxed) +
+      var(--spacing-3) * 2
+  );
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-markdown-editor:hover {
+  border-color: var(--color-border-hover);
+}
+
+.crewlet-markdown-editor:has(.crewlet-markdown-editor__field:focus-visible) {
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+/* A refused body keeps its colour while the writer is in it: the ring takes
+   the danger step, so "here" and "refused" stay one edge. */
+.crewlet-markdown-editor--invalid {
+  border-color: var(--color-feedback-danger);
+}
+
+.crewlet-markdown-editor--invalid:has(.crewlet-markdown-editor__field:focus-visible) {
+  outline-color: var(--color-feedback-danger);
+}
+
+.crewlet-markdown-editor--disabled {
+  opacity: 0.6;
+}
+
+/* The bar sits on the box's top edge, a hairline under it. Two classes, so it
+   outranks the toolbar's own padding whichever stylesheet loads first. */
+.crewlet-markdown-editor .crewlet-markdown-editor__bar {
+  gap: var(--spacing-1);
+  padding: var(--spacing-1) var(--spacing-2);
+  border-block-end: 1px solid var(--color-border-default);
+}
+
+.crewlet-markdown-editor__group {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) / 2);
+}
+
+/* A hairline between groups, so nine controls read as three ideas. */
+.crewlet-markdown-editor__group + .crewlet-markdown-editor__group {
+  padding-inline-start: var(--spacing-1);
+  border-inline-start: 1px solid var(--color-border-default);
+}
+
+.crewlet-markdown-editor__spacer {
+  flex: 1;
+}
+
+.crewlet-markdown-editor__panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/*
+ * THE SOURCE IS SET IN THE MONOSPACE FACE: a writer counts the hashes of a
+ * heading and lines up the bars of a table, and a proportional face makes
+ * both a guess.
+ */
+.crewlet-markdown-editor__field {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--crewlet-markdown-editor-height);
+  margin: 0;
+  padding: var(--spacing-3) var(--spacing-4);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-primary);
+  resize: vertical;
+}
+
+.crewlet-markdown-editor__field::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* The ring is the box's. A transparent outline stays, because forced colours
+   paints an outline where this would otherwise draw none. */
+.crewlet-markdown-editor__field:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.crewlet-markdown-editor__field:disabled {
+  cursor: not-allowed;
+}
+
+.crewlet-markdown-editor__preview {
+  min-height: var(--crewlet-markdown-editor-height);
+  padding: var(--spacing-3) var(--spacing-4);
+  min-width: 0;
+}
+
+.crewlet-markdown-editor__empty {
+  margin: 0;
+  font-size: var(--font-size-compact);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-markdown-editor__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-3);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-block-start: 1px solid var(--color-border-default);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-markdown-editor {
+    transition: none;
+  }
+}

package/dist/Modal/Modal.d.ts

@@ -21,8 +21,12 @@ export type ModalVariant = 'dialog' | 'sheet';
  *
  * `center` is kept for a surface that is the whole of what the reader is doing
  * and has nothing above it to stay in touch with, such as a full-bleed viewer.
+ *
+ * `bottom` is a sheet that rises from the bottom edge, the full width of the
+ * window, rounded on its top corners only: a list a phone's thumb reaches,
+ * such as a switcher opened on a narrow screen.
  */
-export type ModalPlacement = 'center' | 'top';
+export type ModalPlacement = 'center' | 'top' | 'bottom';
 /**
  * How much chrome the surface carries.
  *

package/dist/Modal/index.js

@@ -1,4 +1,4 @@
-export { ConfirmModal, Modal } from '../chunk-TEEJSTFG.js';
+export { ConfirmModal, Modal } from '../chunk-TFMJH2E6.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{Modal-BNT3TDV2.css → Modal-RQAYGG4L.css}

@@ -84,6 +84,28 @@
   padding-top: var(--spacing-10);
 }
 
+/*
+ * THE BOTTOM SHEET: pinned to the bottom edge with no inset, so it rises from
+ * where a thumb already is. Its frame takes the window's width and keeps a
+ * corner on its top edge only, and its foot stays clear of a phone's home
+ * indicator.
+ */
+.crewlet-modal-overlay--dialog.crewlet-modal-overlay--bottom {
+  align-items: flex-end;
+  padding: 0;
+}
+
+.crewlet-modal-overlay--bottom > .crewlet-modal--dialog {
+  width: 100%;
+  max-height: calc(100dvh - var(--spacing-10));
+  border-bottom: none;
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  /* It rises further and sooner than a dialog drops in: a sheet arrives from
+     the edge it is pinned to, and a thumb is waiting on it. */
+  animation: crewlet-modal-lift var(--motion-duration-moderate) var(--motion-easing-emphasized);
+}
+
 /*
  * The sheet's veil fades over the same span the sheet itself travels, so the
  * two are one movement rather than a ground that lands and a panel that
@@ -267,7 +289,7 @@
  * padding is only the least it keeps when a title wraps. It was the 16px step
  * while the bar was 64px, which a full control step filled exactly; at 52px
  * the same padding stood the head 12px past the bar behind it. At the 4px step
- * the head is the bar's height with the control step at every density, 36.48px
+ * the head is the bar's height with the control step at every density, 37.12px
  * at comfortable included, and with a subtitle under the title.
  *
  * It used to be the tighter band, 49px with a close control alone, and the
@@ -479,6 +501,13 @@
   }
 }
 
+@keyframes crewlet-modal-lift {
+  from {
+    opacity: 0;
+    transform: translateY(var(--spacing-6));
+  }
+}
+
 /*
  * A SHEET TRAVELS ITS OWN WIDTH, which is what makes the motion read as a
  * sheet rather than as a box appearing beside the page: the frame starts
@@ -502,4 +531,8 @@
   .crewlet-modal--sheet {
     animation: none;
   }
+
+  .crewlet-modal-overlay--bottom > .crewlet-modal--dialog {
+    animation: none;
+  }
 }

package/dist/OrgLabel/index.js

@@ -1,4 +1,4 @@
 export { OrgLabel } from '../chunk-6OF2DBKY.js';
-import '../chunk-3UK4VFSK.js';
+import '../chunk-6NIZCQUM.js';
 import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgNode/index.js

@@ -1,5 +1,5 @@
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-IHGKPEEV.js';
 import '../chunk-6OF2DBKY.js';
-import '../chunk-3UK4VFSK.js';
+import '../chunk-6NIZCQUM.js';
 import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -1,11 +1,11 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-ZMJHK7DR.js';
-import '../chunk-MCPKHYMC.js';
-import '../chunk-S3BCVWTU.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-75WOCYGC.js';
+import '../chunk-6LXMLQUM.js';
+import '../chunk-MY374UUD.js';
 import '../chunk-6OF2DBKY.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-74WGARJE.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-3UK4VFSK.js';
+import '../chunk-6NIZCQUM.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Outline/Outline.d.ts

@@ -0,0 +1,72 @@
+import { type HTMLAttributes } from 'react';
+/** One heading of a document, as an outline lists it. */
+export interface OutlineItem {
+    /** The `id` of the heading this entry moves to. */
+    id: string;
+    /** What the reader sees: the heading's own text. */
+    label: string;
+    /** The heading's level, from 1. Each level deeper than the shallowest entry is indented one step. */
+    level: number;
+}
+export interface OutlineProps extends Omit<HTMLAttributes<HTMLElement>, 'onSelect'> {
+    /** The landmark's name, drawn as the outline's own heading: "On this page". */
+    label: string;
+    items: readonly OutlineItem[];
+    /**
+     * The entry whose section the reader is in, usually `useActiveHeading`'s
+     * answer. Drawn with the accent edge and `aria-current="location"`.
+     */
+    activeId?: string | null | undefined;
+    /**
+     * Called with an entry's id when it is pressed. `scrollToHeading` by default,
+     * which brings the heading into view and moves focus to it.
+     */
+    onSelect?: ((id: string) => void) | undefined;
+}
+/**
+ * The headings of the document beside it, as a list a reader moves through
+ * the document with: "On this page".
+ *
+ * BUTTONS, NOT ANCHORS. An application with a hash router keeps its own route
+ * in the fragment, so `href="#section"` would navigate away from the page the
+ * outline belongs to. A press moves to the heading instead, and the address
+ * stays the page's.
+ *
+ * THE CURRENT ENTRY IS MARKED BY ITS OWN EDGE, the accent rule every current
+ * row in the system takes, and by `aria-current="location"`, so a screen reader
+ * hears where in the document the reader is rather than a colour standing for
+ * it.
+ */
+export declare function Outline({ label, items, activeId, onSelect, className, ...rest }: OutlineProps): import("react").JSX.Element;
+/**
+ * Brings the element with `id` into view and moves focus to it, so a keyboard
+ * carries on reading from the heading it chose rather than from the outline.
+ *
+ * A heading is not focusable, so it is given `tabindex="-1"`: focusable by
+ * script, never a tab stop. The scroll is smooth unless the reader asked for
+ * less motion, and focus is moved without a second, instant scroll. Answers
+ * false when nothing has that id.
+ */
+export declare function scrollToHeading(id: string, ownerDocument?: Document): boolean;
+export interface ActiveHeadingOptions {
+    /** The element that scrolls the headings, or `null` for the window. */
+    root?: HTMLElement | null | undefined;
+    /**
+     * How far below the top of the scroller a heading counts as reached, in
+     * pixels. The heading the reader has scrolled past last is the current one.
+     */
+    offset?: number | undefined;
+}
+/**
+ * Which of the headings `ids` the reader is in: the last one scrolled past
+ * the top of `root`, the first while none has been, and the LAST once the
+ * scroller can go no further, because a closing section shorter than the
+ * view would otherwise never become current at all.
+ *
+ * MEASURED ON A FRAME, never on every scroll event: a scroll fires faster than
+ * a screen draws, and reading every heading's box on each one is a layout per
+ * event. A heading the document does not hold is skipped rather than fatal,
+ * so an outline built a moment before its body renders settles on the next
+ * frame instead of throwing.
+ */
+export declare function useActiveHeading(ids: readonly string[], { root, offset }?: ActiveHeadingOptions): string | null;

package/dist/Outline/index.d.ts

@@ -0,0 +1,3 @@
+import './Outline.css';
+export { Outline, scrollToHeading, useActiveHeading } from './Outline.js';
+export type { ActiveHeadingOptions, OutlineItem, OutlineProps } from './Outline.js';

package/dist/Outline/index.js

@@ -0,0 +1,2 @@
+export { Outline, scrollToHeading, useActiveHeading } from '../chunk-A5YKNRG6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Outline-VCXKKU3E.css

@@ -0,0 +1,78 @@
+/*
+ * A document's outline, "On this page" (Outline.tsx).
+ *
+ * QUIET UNTIL IT IS CURRENT. The entries are the tertiary ink at the caption
+ * step, so the column beside a page reads as a map rather than as a second
+ * page, and the entry the reader is in takes the primary ink and the accent
+ * edge every current row in the system takes.
+ */
+
+.crewlet-outline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/* The outline's name in the register of a group label: sentence case at the
+   caption step, the 4.5:1 ink. */
+.crewlet-outline__title {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-tight);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-outline__list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/*
+ * One entry: the heading's text, wrapped rather than cut, because a heading
+ * cut to fit is a section the reader cannot tell from its neighbour. The edge
+ * the current entry draws is held on every entry in its resting colour, so
+ * nothing moves when the current entry changes.
+ */
+.crewlet-outline__item {
+  display: block;
+  width: 100%;
+  min-height: var(--size-target-min);
+  margin: 0;
+  padding: calc(var(--spacing-1) / 2) var(--spacing-2);
+  padding-inline-start: calc(var(--spacing-3) + var(--spacing-3) * var(--crewlet-outline-depth, 0));
+  border: 0;
+  border-inline-start: 2px solid var(--color-border-default);
+  border-radius: 0;
+  background: none;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-snug);
+  text-align: start;
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.crewlet-outline__item:hover {
+  color: var(--color-text-primary);
+}
+
+/* The ring lies on the entry's own edge, never a second line beside it. */
+.crewlet-outline__item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The weight stays the resting one: a bolder entry is a wider one, and a
+   wider entry can wrap onto a second line as the reader scrolls past it. */
+.crewlet-outline__item--current {
+  border-inline-start-color: var(--color-brand-accent);
+  color: var(--color-text-primary);
+}

package/dist/Popover/Popover.d.ts

@@ -19,6 +19,26 @@ interface PopoverBaseProps {
     side?: PopoverSide | undefined;
     /** `match` sizes the panel to the anchor, which is what a Select wants. */
     width?: PopoverWidth | undefined;
+    /**
+     * Moves the panel along the anchor's edge after it is aligned, in pixels; a
+     * negative shift moves it toward the start. A function is asked on every
+     * placement, with the panel and the anchor, for a shift measured from what
+     * the two draw: lining a list's first column up under the anchor's own text
+     * is a distance in the panel's padding and the anchor's, both of which move
+     * with the density.
+     */
+    alignOffset?: number | ((panel: HTMLElement, anchor: HTMLElement) => number) | undefined;
+    /**
+     * How far the panel stands off the anchor's edge, in pixels: the layer's own
+     * gap unless a design measures the space under its anchor differently.
+     */
+    sideOffset?: number | undefined;
+    /**
+     * Where a dialog panel's focus starts, if not its first control. A search
+     * field focused on a touch screen raises a keyboard over the list it
+     * searches, so a panel opened by a tap can start on itself instead.
+     */
+    initialFocus?: (() => HTMLElement | null) | undefined;
     className?: string | undefined;
     /** Controlled. Leave it out for a panel that owns its own open state. */
     open?: boolean | undefined;
@@ -87,5 +107,5 @@ export type PopoverReason = DismissReason | 'trigger' | 'content' | 'anchor-gone
  *   on them at the document, and so does a chord with Control, Command or Alt,
  *   which is an application shortcut rather than a key of the panel's.
  */
-export declare function Popover({ trigger, children, align, side, width, role, label, className, open: controlled, defaultOpen, onOpenChange, }: PopoverProps): import("react").JSX.Element;
+export declare function Popover({ trigger, children, align, side, width, alignOffset, sideOffset, initialFocus, role, label, className, open: controlled, defaultOpen, onOpenChange, }: PopoverProps): import("react").JSX.Element;
 export {};

package/dist/Popover/index.js

@@ -1,4 +1,4 @@
-export { Popover } from '../chunk-PDUZO35I.js';
+export { Popover } from '../chunk-O2ZDZZS7.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';