@webority/ui-react 0.88.0 → 0.89.0

package/dist/types/components/AppLogoPicker.d.ts

@@ -5,56 +5,121 @@ import "@webority/ui-elements/elements/image-crop";
  * (optimistic) while the caller uploads and reflects it back via `value`.
  *
  * @param {object} props
- * @param {string|null} [props.value] Current image URL, or null.
- * @param {import('react').ReactNode} [props.fallback] Shown when there is no image, e.g. initials.
- * @param {string} [props.name] Form field name, so an uncontrolled form can post the file.
+ * @param {string|null} [props.value]
+ * @param {import('react').ReactNode} [props.fallback]
+ * @param {string} [props.name]
  * @param {(file: File) => void} props.onPick Receives a validated File, the cropped one when `crop` is set.
  * @param {() => void} [props.onRemove] Called when the × clears the logo. A just-picked image always shows the ×; an existing `value` needs onRemove for its × to appear, because the parent owns it.
- * @param {boolean} [props.loading=false] Spinner and blocked interaction while the pick uploads.
- * @param {boolean} [props.disabled=false] Non-busy, non-interactive state.
- * @param {string} [props.accept="image/png,image/jpeg,image/webp"] The file types the picker accepts.
- * @param {number} [props.maxSizeMb=5] Largest accepted file in MB, the shared DEFAULT_MAX_SIZE_MB unless set. 0 means no size limit: nothing is rejected for its size.
- * @param {number|'free'} [props.crop] Opt-in crop step before upload. After the person chooses a file, a dialog lets them drag and zoom a frame over it, and `onPick` receives the cropped File (same image type, kept under `maxSizeMb`). A number is the frame's width divided by its height (`1` for an avatar); `'free'` lets them resize the frame. SVG files skip the dialog, and `maxSizeMb` then applies to the cropped result, not the original.
- * @param {string} [props.overlayIcon="image"] Icon name for the hover overlay.
- * @param {string} [props.overlayLabel="Update photo"] Text of the hover overlay.
- * @param {string} [props.ariaLabel="Upload photo"] Accessible name of the upload button.
- * @param {string} [props.removeLabel="Remove photo"] Accessible name and tooltip of the × control (`Remove logo` on a logo picker).
- * @param {string} [props.label] Optional field label above the ring.
- * @param {string} [props.hint] Optional helper text: below the ring when stacked, in the side column when inline or profile.
- * @param {string} [props.error] Caller-supplied inline error. It wins over an automatic rejection reason.
- * @param {'stacked'|'inline'|'profile'} [props.layout='stacked'] Ring only with the hint below (stacked); a profile row with the ring on the left and a title, subtitle and hint column beside it (inline); or the same identity block stacked and centred beneath the ring (profile).
- * @param {import('react').ReactNode} [props.title] Bold primary text with the ring (inline and profile only).
- * @param {import('react').ReactNode} [props.subtitle] Muted secondary text with the ring (inline and profile only).
- * @param {boolean} [props.required=false] Marks the field as required.
- * @param {'initials'|'avatar'} [props.variant='initials'] Placeholder style: initials text, or a standard avatar (a muted disc and a person icon when there are no initials).
- * @param {'sm'|'md'|'lg'|number} [props.size='md'] A preset, or an exact ring diameter in px. The whole control (ring, initials font, overlay and placeholder icon) scales from it.
- * @param {'circle'|'rounded'|'square'} [props.shape='circle'] Ring shape.
- * @param {string} [props.className=""] Extra class on the field wrapper.
+ * @param {boolean} [props.loading]
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.accept]
+ * @param {number} [props.maxSizeMb]
+ * @param {number|'free'} [props.crop]
+ * @param {string} [props.overlayIcon]
+ * @param {string} [props.overlayLabel]
+ * @param {string} [props.ariaLabel]
+ * @param {string} [props.removeLabel]
+ * @param {string} [props.label]
+ * @param {string} [props.hint]
+ * @param {string} [props.error]
+ * @param {'stacked'|'inline'|'profile'} [props.layout]
+ * @param {import('react').ReactNode} [props.title]
+ * @param {import('react').ReactNode} [props.subtitle]
+ * @param {boolean} [props.required]
+ * @param {'initials'|'avatar'} [props.variant]
+ * @param {'sm'|'md'|'lg'|number} [props.size]
+ * @param {'circle'|'rounded'|'square'} [props.shape]
+ * @param {string} [props.className]
  */
 export default function AppLogoPicker(props: {
+    /** The current image URL. Null and absent both mean no image. */
     value?: string | null;
+    /** Shown when there is no image, for example initials. */
     fallback?: import('react').ReactNode;
+    /** The form field name, so an uncontrolled form can post the file. */
     name?: string;
     onPick: (file: File) => void;
     onRemove?: () => void;
+    /**
+     * Shows a spinner and blocks interaction while the picked file uploads.
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * A non-busy, non-interactive state.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * The file types the picker accepts.
+     * @default "image/png,image/jpeg,image/webp"
+     */
     accept?: string;
+    /**
+     * The largest accepted file in megabytes. 0 means no size limit.
+     * @default 5
+     */
     maxSizeMb?: number;
+    /** Adds a crop step before upload: a dialog lets the person drag and zoom a frame, and the picked file is the cropped one. A number is the frame's width divided by its height, such as 1 for an avatar; free lets them resize the frame. */
     crop?: number | 'free';
+    /**
+     * The icon name for the hover overlay.
+     * @default "image"
+     */
     overlayIcon?: string;
+    /**
+     * The text of the hover overlay.
+     * @default "Update photo"
+     */
     overlayLabel?: string;
+    /**
+     * The accessible name of the upload button.
+     * @default "Upload photo"
+     */
     ariaLabel?: string;
+    /**
+     * The accessible name and tooltip of the remove control. Use Remove logo on a logo picker.
+     * @default "Remove photo"
+     */
     removeLabel?: string;
+    /** An optional field label above the ring. */
     label?: string;
+    /** Optional helper text: below the ring when stacked, in the side column when inline or profile. */
     hint?: string;
+    /** An inline error from the caller. It wins over an automatic rejection reason. */
     error?: string;
+    /**
+     * Stacked is the ring with the hint below. Inline is a profile row with the ring on the left and a title, subtitle and hint column beside it. Profile stacks the same identity block, centred, beneath the ring.
+     * @default "stacked"
+     */
     layout?: 'stacked' | 'inline' | 'profile';
+    /** Bold primary text beside the ring. Inline and profile layouts only. */
     title?: import('react').ReactNode;
+    /** Muted secondary text beside the ring. Inline and profile layouts only. */
     subtitle?: import('react').ReactNode;
+    /**
+     * Marks the field as required.
+     * @default false
+     */
     required?: boolean;
+    /**
+     * The placeholder style: initials text, or a standard avatar with a muted disc and a person icon when there are no initials.
+     * @default "initials"
+     */
     variant?: 'initials' | 'avatar';
+    /**
+     * A preset (sm 72, md 120, lg 160 pixels) or an exact ring diameter in pixels. The whole control scales from it.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | 'lg' | number;
+    /**
+     * The ring shape.
+     * @default "circle"
+     */
     shape?: 'circle' | 'rounded' | 'square';
+    /**
+     * Extra classes on the field wrapper.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppMarkdown.d.ts

@@ -9,7 +9,7 @@ import "@webority/ui-elements/elements/markdown";
  * The root is the shared `<wui-markdown>` element that Razor `<app-markdown>` writes, so both draw the same markup.
  *
  * @param {object} props
- * @param {string} [props.value] The Markdown source. Missing text renders nothing.
+ * @param {string} [props.value]
  * @param {(href: string) => string|null|undefined} [props.resolveLink] Maps a `scheme:kind/id` link
  *   to an in-app route such as "/support?ticket=3f2a", or null to show its label as text.
  * @param {import('react').ElementType} [props.linkComponent] A router link. It receives `to` for an
@@ -17,8 +17,10 @@ import "@webority/ui-elements/elements/markdown";
  * @param {string} [props.className]
  */
 export default function AppMarkdown(props: {
+    /** The Markdown source. Missing text renders nothing. */
     value?: string;
     resolveLink?: (href: string) => string | null | undefined;
     linkComponent?: import('react').ElementType;
+    /** Extra classes on the root element. */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppMentionInput.d.ts

@@ -1,5 +1,6 @@
 import "@webority/ui-elements/elements/mention-input";
 declare const AppMentionInput: import("react").ForwardRefExoticComponent<{
+    /** The stored value, plain text with each mention written as @[Asha Rao](u-12). */
     value?: string;
     onChange?: (value: string, meta: {
         mentions: {
@@ -7,6 +8,7 @@ declare const AppMentionInput: import("react").ForwardRefExoticComponent<{
             label: string;
         }[];
     }) => void;
+    /** The people to offer when the person types @. */
     people?: {
         value: string;
         label: string;
@@ -21,21 +23,54 @@ declare const AppMentionInput: import("react").ForwardRefExoticComponent<{
         description?: string;
         src?: string;
     }[]>;
+    /**
+     * How many letters after @ before the lookup runs.
+     * @default 1
+     */
     minChars?: number;
+    /**
+     * Milliseconds to wait for typing to pause before the lookup runs.
+     * @default 250
+     */
     debounce?: number;
     onSubmit?: () => void;
+    /**
+     * The number of visible lines.
+     * @default 3
+     */
     rows?: number;
+    /** Hint text shown while the box is empty. */
     placeholder?: string;
+    /**
+     * Turns the box off.
+     * @default false
+     */
     disabled?: boolean;
+    /** Posts the stored value under this name in a form. */
     name?: string;
+    /** The element id. The text box is the id plus -text, which is the label's target. */
     id?: string;
+    /** Shown above the box. A string label also names the box. */
     label?: import('react').ReactNode;
+    /** An error message shown under the box. */
     error?: string;
+    /** Helper text shown under the box when there is no error. */
     hint?: string;
+    /**
+     * Marks the field as required.
+     * @default false
+     */
     required?: boolean;
+    /** Help content shown in an info tip beside the label. */
     help?: import('react').ReactNode;
+    /**
+     * The accessible name of that info tip.
+     * @default "More information"
+     */
     helpLabel?: string;
+    /** Extra classes on the element. */
     className?: string;
+    /** Extra classes on the field wrapper. */
     fieldClassName?: string;
 } & import("react").RefAttributes<HTMLElement>>;
 export default AppMentionInput;

package/dist/types/components/AppMenubar.d.ts

@@ -12,16 +12,13 @@ import "@webority/ui-elements/elements/menubar";
  * the parity check reads the first signature it finds as the component's public props.
  *
  * @param {object} props
- * @param {{ key: string, label: string, disabled?: boolean, items: { key: string, label?: string, icon?: string|import('react').ReactNode, to?: string, onClick?: () => void, shortcut?: string, danger?: boolean, disabled?: boolean, divider?: true, items?: object[] }[] }[]} props.menus
- *   The menus, left to right. A row is an action (`onClick`) or a link (`to`); `items` makes it a
- *   submenu opener (`onClick` and `to` are then ignored); `divider: true` is a separator and needs
- *   only a unique `key`. `icon` is a glyph name or a node. A `disabled` row is listed but skipped by
- *   the arrow keys and cannot be chosen.
- * @param {string} [props.ariaLabel='Application menu'] Accessible name of the bar.
+ * @param {{ key: string, label: string, disabled?: boolean, items: { key: string, label?: string, icon?: string|import('react').ReactNode, to?: string, onClick?: () => void, shortcut?: string, danger?: boolean, disabled?: boolean, divider?: boolean, items?: object[] }[] }[]} props.menus
+ * @param {string} [props.ariaLabel]
  * @param {import('react').ElementType} [props.linkComponent] Component for `to` rows (e.g. Link).
  * @param {string} [props.className]
  */
 export default function AppMenubar(props: {
+    /** The menus, left to right. A row is an action or a link; a row with items opens a submenu; a divider row is a separator. */
     menus: {
         key: string;
         label: string;
@@ -35,11 +32,16 @@ export default function AppMenubar(props: {
             shortcut?: string;
             danger?: boolean;
             disabled?: boolean;
-            divider?: true;
+            divider?: boolean;
             items?: object[];
         }[];
     }[];
+    /**
+     * The accessible name of the bar.
+     * @default "Application menu"
+     */
     ariaLabel?: string;
     linkComponent?: import('react').ElementType;
+    /** Extra classes on the bar. */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppMeter.d.ts

@@ -5,28 +5,57 @@
  * bar, and renders identically to the Razor `<app-meter>`.
  *
  * @param {object} props
- * @param {number} props.value The measurement (min…max); clamped into range.
- * @param {number} [props.min=0]
- * @param {number} [props.max=100]
- * @param {'info'|'success'|'warning'|'danger'|'neutral'} [props.tone='info'] Fallback fill when no thresholds.
- * @param {'high'|'low'} [props.optimum='high'] Which end is good — `high` = bigger is better.
- * @param {number} [props.low] At-or-below this value is the low zone.
- * @param {number} [props.high] At-or-above this value is the high zone.
- * @param {'sm'|'md'} [props.size='md'] Bar thickness.
- * @param {string} [props.label] Accessible name; also shown above the bar when `showLabel`.
- * @param {boolean} [props.showLabel=false] Render the label text above the bar.
+ * @param {number} props.value
+ * @param {number} [props.min]
+ * @param {number} [props.max]
+ * @param {'info'|'success'|'warning'|'danger'|'neutral'} [props.tone]
+ * @param {'high'|'low'} [props.optimum]
+ * @param {number} [props.low]
+ * @param {number} [props.high]
+ * @param {'sm'|'md'} [props.size]
+ * @param {string} [props.label]
+ * @param {boolean} [props.showLabel]
  * @param {string} [props.className]
  */
 export default function AppMeter(props: {
+    /** The measurement, from min to max. It is clamped into range. */
     value: number;
+    /**
+     * The low end of the range.
+     * @default 0
+     */
     min?: number;
+    /**
+     * The high end of the range.
+     * @default 100
+     */
     max?: number;
+    /**
+     * The fill colour when no thresholds are set.
+     * @default "info"
+     */
     tone?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+    /**
+     * Which end is good. High means bigger is better.
+     * @default "high"
+     */
     optimum?: 'high' | 'low';
+    /** A value at or below this is the low zone. */
     low?: number;
+    /** A value at or above this is the high zone. */
     high?: number;
+    /**
+     * The bar thickness.
+     * @default "md"
+     */
     size?: 'sm' | 'md';
+    /** The accessible name of the bar. It is also shown above the bar when showLabel is set. */
     label?: string;
+    /**
+     * Shows the label text above the bar.
+     * @default false
+     */
     showLabel?: boolean;
+    /** Extra classes on the component. */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppMetricStrip.d.ts

@@ -4,11 +4,12 @@
  *
  * @param {object} props
  * @param {{ label: string, value: import('react').ReactNode, note?: string, href?: string, tone?: 'neutral'|'success'|'warning'|'danger'|'info' }[]} props.items
- * @param {3|4|5} [props.columns=4] How many values sit in a row.
- * @param {'sm'|'md'} [props.size='md'] The value and label scale.
+ * @param {3|4|5} [props.columns]
+ * @param {'sm'|'md'} [props.size]
  * @param {string} [props.className]
  */
 export default function AppMetricStrip(props: {
+    /** The values in the strip, three to five of them. */
     items: {
         label: string;
         value: import('react').ReactNode;
@@ -16,7 +17,15 @@ export default function AppMetricStrip(props: {
         href?: string;
         tone?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
     }[];
+    /**
+     * How many values sit in a row.
+     * @default 4
+     */
     columns?: 3 | 4 | 5;
+    /**
+     * The value and label scale.
+     * @default "md"
+     */
     size?: 'sm' | 'md';
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppModal.d.ts

@@ -3,47 +3,76 @@
  *
  * @param {object} props
  * @param {boolean} props.open
- * @param {import('react').ReactNode} [props.eyebrow] A small kicker label above the title.
+ * @param {import('react').ReactNode} [props.eyebrow]
  * @param {import('react').ReactNode} [props.title]
  * @param {import('react').ReactNode} [props.subtitle]
- * @param {string} [props.headerIcon] library icon name
- * @param {'default'|'danger'|'success'|'warning'} [props.tone='default'] Tints the header icon
- *   and eyebrow to signal intent — a destructive or a success dialog reads it from the header.
- * @param {boolean} [props.dismissible=true] Show the header close (×) button. Pair with
- *   `staticBackdrop` for a forced-choice dialog with no way out but an explicit action.
+ * @param {string} [props.headerIcon]
+ * @param {'default'|'danger'|'success'|'warning'} [props.tone]
+ * @param {boolean} [props.dismissible]
  * @param {() => void} props.onClose
  * @param {import('react').ReactNode} [props.footer]
- * @param {'sm'|'md'|'lg'|'xl'|'fullscreen'|number} [props.size='md'] Card width — a preset, an
- *   exact max-width in px for a custom size, or fullscreen (the whole viewport, header and footer
- *   pinned).
- * @param {'center'|'top'} [props.placement='center'] Vertical placement of the card —
- *   centred (default) or pinned near the top of the viewport.
- * @param {boolean} [props.hideHeader=false]
- * @param {string} [props.ariaLabel] Accessible dialog name when `title` isn't a plain string
- *   (a node title, or a hideHeader dialog) — without one the dialog is unnamed to AT.
- * @param {boolean} [props.staticBackdrop=false] When true, the backdrop click and Escape
- *   key no longer close the dialog — only an explicit close action can.
- * @param {string} [props.confirmDiscard] Ask before closing while dirty: this text, with Discard and Keep editing in the footer.
- * @param {boolean} [props.dirty=false] True while a field differs from its loaded value; the caller owns it.
- * @param {string} [props.className] Extra classes on the modal card.
+ * @param {'sm'|'md'|'lg'|'xl'|'fullscreen'|number} [props.size]
+ * @param {'center'|'top'} [props.placement]
+ * @param {boolean} [props.hideHeader]
+ * @param {string} [props.ariaLabel]
+ * @param {boolean} [props.staticBackdrop]
+ * @param {string} [props.confirmDiscard]
+ * @param {boolean} [props.dirty]
+ * @param {string} [props.className]
  * @param {import('react').ReactNode} props.children
  */
 export default function AppModal(props: {
+    /** Whether the dialog is shown. */
     open: boolean;
+    /** A small kicker label above the title. */
     eyebrow?: import('react').ReactNode;
+    /** The dialog title, shown in the header. */
     title?: import('react').ReactNode;
+    /** A quieter line under the title. */
     subtitle?: import('react').ReactNode;
+    /** A library icon name drawn in the header. */
     headerIcon?: string;
+    /**
+     * Tints the header icon and eyebrow to signal intent, such as a destructive or a success dialog.
+     * @default "default"
+     */
     tone?: 'default' | 'danger' | 'success' | 'warning';
+    /**
+     * Shows the close button in the header. Pair it with staticBackdrop for a forced-choice dialog.
+     * @default true
+     */
     dismissible?: boolean;
     onClose: () => void;
+    /** Content pinned at the bottom, usually the action buttons. */
     footer?: import('react').ReactNode;
+    /**
+     * The card width: a preset, fullscreen for the whole viewport with header and footer pinned, or a number for an exact max width in pixels.
+     * @default "md"
+     */
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen' | number;
+    /**
+     * Vertical placement of the card: centred, or pinned near the top of the viewport.
+     * @default "center"
+     */
     placement?: 'center' | 'top';
+    /**
+     * Hides the header, leaving the body and footer.
+     * @default false
+     */
     hideHeader?: boolean;
+    /** The accessible name when the title is not plain text, or when the header is hidden. */
     ariaLabel?: string;
+    /**
+     * When true, a backdrop click and the Escape key no longer close the dialog.
+     * @default false
+     */
     staticBackdrop?: boolean;
+    /** Asks before closing while dirty, with this text and Discard and Keep editing in the footer. */
     confirmDiscard?: string;
+    /**
+     * True while a field differs from its loaded value. The caller owns it.
+     * @default false
+     */
     dirty?: boolean;
     className?: string;
     children: import('react').ReactNode;

package/dist/types/components/AppMultiSelect.d.ts

@@ -1,7 +1,9 @@
 import "@webority/ui-elements/elements/multiselect";
 declare const AppMultiSelect: import("react").ForwardRefExoticComponent<{
+    /** The values of the chosen options. */
     values?: string[];
     onChange?: (values: string[]) => void;
+    /** The choices. A label may be a node; search, typeahead and the accessible names use its text. */
     options?: Array<{
         value: string;
         label: import('react').ReactNode;
@@ -11,24 +13,66 @@ declare const AppMultiSelect: import("react").ForwardRefExoticComponent<{
         disabled?: boolean;
         disabledHint?: string;
     }>;
+    /**
+     * Shown while nothing is chosen.
+     * @default "Select…"
+     */
     placeholder?: string;
+    /**
+     * Placeholder of the search box inside the menu.
+     * @default "Search…"
+     */
     searchPlaceholder?: string;
+    /**
+     * Shows a search box in the menu. Ignored when allowCustom is on, because the inline input is the search.
+     * @default true
+     */
     searchable?: boolean;
+    /**
+     * Accepts typed entries that are not options.
+     * @default false
+     */
     allowCustom?: boolean;
     validateCustom?: (value: string) => boolean | string;
+    /** A regular expression a typed entry must match in full. */
     customPattern?: string;
+    /** The message for a refused typed entry. Without it the message is Enter a valid value. */
     customInvalidMessage?: string;
+    /**
+     * Stops the control from opening or changing.
+     * @default false
+     */
     disabled?: boolean;
+    /** A library icon name drawn at the start of the control. */
     icon?: string;
+    /** The control size around the default. */
     size?: 'sm' | 'lg';
+    /**
+     * Keeps the chosen chips on one row and folds the overflow into a +N counter.
+     * @default false
+     */
     collapseChips?: boolean;
+    /** The field name posted with the form. */
     name?: string;
+    /** The DOM id of the control and the target of the label. */
     id?: string;
+    /** The field label. */
     label?: import('react').ReactNode;
+    /** An error message shown under the control. */
     error?: string;
+    /** A hint shown under the control. */
     hint?: string;
+    /**
+     * Marks the field as required.
+     * @default false
+     */
     required?: boolean;
+    /** Help content shown in an info tip beside the label. */
     help?: import('react').ReactNode;
+    /**
+     * The accessible name of that info tip.
+     * @default "More information"
+     */
     helpLabel?: string;
     fieldClassName?: string;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/types/components/AppNavigationMenu.d.ts

@@ -14,13 +14,12 @@ import "@webority/ui-elements/elements/navigation-menu";
  *
  * @param {object} props
  * @param {{ key: string, label: string, to?: string, current?: boolean, links?: { key: string, label: string, to: string, description?: string, icon?: string|import('react').ReactNode, current?: boolean }[] }[]} props.items
- *   The entries, left to right. An entry with `links` is a button that opens them; without, it is a
- *   link to `to`. `current` marks the page the visitor is on (`aria-current="page"`).
- * @param {string} [props.ariaLabel='Main'] Accessible name of the navigation landmark.
+ * @param {string} [props.ariaLabel]
  * @param {import('react').ElementType} [props.linkComponent] Component for `to` links (e.g. Link).
  * @param {string} [props.className]
  */
 export default function AppNavigationMenu(props: {
+    /** The entries, left to right. An entry with links is a button that opens them; without links it is a link to its target. */
     items: {
         key: string;
         label: string;
@@ -35,6 +34,10 @@ export default function AppNavigationMenu(props: {
             current?: boolean;
         }[];
     }[];
+    /**
+     * The accessible name of the navigation landmark.
+     * @default "Main"
+     */
     ariaLabel?: string;
     linkComponent?: import('react').ElementType;
     className?: string;

package/dist/types/components/AppNotificationCenter.d.ts

@@ -53,26 +53,41 @@ export type NotificationItem = {
  * `<wui-notification-center>`, which Razor `<app-notification-center>` renders too.
  *
  * @param {object} props
- * @param {NotificationItem[]} props.items Newest first.
- * @param {number} [props.unread] The badge count when it is larger than the items listed (the latest
- *   twenty of 120). Defaults to the number of unread items.
- * @param {string} [props.label="Notifications"] The bell's name and the panel heading.
- * @param {string} [props.emptyText="You are all caught up."] Shown when there are no items.
- * @param {string} [props.viewAllHref] A "View all" link under the list. Absent: no link.
- * @param {boolean} [props.defaultOpen=false] Start with the panel open; the element owns it after that.
- * @param {string|number|Date} [props.now] The clock for Today and Yesterday; the current time by default.
+ * @param {NotificationItem[]} props.items
+ * @param {number} [props.unread]
+ * @param {string} [props.label]
+ * @param {string} [props.emptyText]
+ * @param {string} [props.viewAllHref]
+ * @param {boolean} [props.defaultOpen]
+ * @param {string|number|Date} [props.now]
  * @param {() => void} [props.onMarkAllRead] Called by "Mark all read". Absent: no button.
  * @param {(item: NotificationItem, event: import('react').MouseEvent) => void} [props.onItemClick] Called when an item is chosen, before its link is followed.
  * @param {(open: boolean) => void} [props.onOpenChange] Called when the panel opens or closes.
  * @param {string} [props.className]
  */
 export default function AppNotificationCenter(props: {
+    /** The notifications, newest first. Read state is the caller's: pass the new items after marking some read. */
     items: NotificationItem[];
+    /** The badge count when it is larger than the items listed, for example the latest twenty of 120. Without it the count is the number of unread items. */
     unread?: number;
+    /**
+     * The bell's name and the panel heading.
+     * @default "Notifications"
+     */
     label?: string;
+    /**
+     * Shown when there are no items.
+     * @default "You are all caught up."
+     */
     emptyText?: string;
+    /** A View all link under the list. Without it there is no link. */
     viewAllHref?: string;
+    /**
+     * Starts with the panel open. The element owns the state after that.
+     * @default false
+     */
     defaultOpen?: boolean;
+    /** The clock for Today and Yesterday, as ISO text or epoch milliseconds. The current time when omitted. */
     now?: string | number | Date;
     onMarkAllRead?: () => void;
     onItemClick?: (item: NotificationItem, event: import('react').MouseEvent) => void;