@webority/ui-react 0.53.0 → 0.54.0

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

@@ -0,0 +1,37 @@
+/**
+ * What a product does: a grid of short points with an icon each, or rows that pair each point
+ * with an image (`layout="rows"`, the image side alternating). Renders the same markup as the
+ * Razor `<app-section-features>`.
+ *
+ * Each point's title is a heading one level under the section's (h3 under the default h2). An
+ * item's `media` image must carry `width` and `height` so its box is reserved before it loads.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.title The section's heading.
+ * @param {{ key?: string, title: string, description?: import('react').ReactNode, icon?: string, media?: import('react').ReactNode }[]} [props.items]
+ *   The points: a title, a description, a library icon name and an image.
+ * @param {"grid"|"rows"} [props.layout="grid"] Short points in columns, or one row per point with its image beside it.
+ * @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as="h2"] The heading element; each point's title is one level under it.
+ * @param {import('react').ReactNode} [props.eyebrow] A short label above the heading.
+ * @param {import('react').ReactNode} [props.subtitle] One or two sentences under the heading.
+ * @param {"start"|"center"} [props.align="center"] Where the heading block sits.
+ * @param {"default"|"muted"} [props.variant="default"] The section's background.
+ * @param {string} [props.className]
+ */
+export default function AppSectionFeatures({ title, items, layout, as, eyebrow, subtitle, align, variant, className, ...rest }: {
+    title: import('react').ReactNode;
+    items?: {
+        key?: string;
+        title: string;
+        description?: import('react').ReactNode;
+        icon?: string;
+        media?: import('react').ReactNode;
+    }[];
+    layout?: "grid" | "rows";
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    eyebrow?: import('react').ReactNode;
+    subtitle?: import('react').ReactNode;
+    align?: "start" | "center";
+    variant?: "default" | "muted";
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+/**
+ * The opening section of a public page: an eyebrow, the page's heading (an h1 by default), a
+ * subtitle, the calls to action and an optional image beside them (below them when centred).
+ * Renders the same markup as the Razor `<app-section-hero>`.
+ *
+ * The `media` image must carry `width` and `height`: the kit sizes it to its column with
+ * `height: auto`, so those two attributes are what reserve its box before it loads. On the page's
+ * main image add `fetchPriority="high"` and leave `loading` unset. Pass an `id` to label the
+ * section by its heading (`{id}-title`).
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.title The page's heading.
+ * @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as="h1"] The heading element. Keep one h1 per page.
+ * @param {import('react').ReactNode} [props.eyebrow] A short label above the heading.
+ * @param {import('react').ReactNode} [props.subtitle] One or two sentences under the heading.
+ * @param {"start"|"center"} [props.align="start"] Centred copy with the media under it.
+ * @param {"default"|"muted"} [props.variant="default"] The section's background.
+ * @param {import('react').ReactNode} [props.actions] The calls to action, usually one or two `AppButton`s.
+ * @param {import('react').ReactNode} [props.media] An `<img>` with `width` and `height`, beside the copy.
+ * @param {string} [props.className]
+ */
+export default function AppSectionHero({ title, as, eyebrow, subtitle, align, variant, actions, media, className, ...rest }: {
+    title: import('react').ReactNode;
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    eyebrow?: import('react').ReactNode;
+    subtitle?: import('react').ReactNode;
+    align?: "start" | "center";
+    variant?: "default" | "muted";
+    actions?: import('react').ReactNode;
+    media?: import('react').ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,36 @@
+/**
+ * A row of customer or partner logos under a short heading ("Trusted by 200+ teams"). The logos
+ * sit in a wrapping row at one height, muted until hovered. Renders the same markup as the Razor
+ * `<app-section-logos>`.
+ *
+ * Every logo needs `src`, `alt` (the company's name), `width` and `height`; one without them
+ * throws, because a logo with no size moves the page when it loads.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.title The section's heading, set small above the logos.
+ * @param {{ key?: string, src: string, alt: string, width: number, height: number, href?: string }[]} [props.items]
+ *   The logos, each with its intrinsic size in px and an optional link.
+ * @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as="h2"] The heading element.
+ * @param {import('react').ReactNode} [props.eyebrow] A short label above the heading.
+ * @param {import('react').ReactNode} [props.subtitle] A sentence under the heading.
+ * @param {"start"|"center"} [props.align="center"] Where the heading and the logos sit.
+ * @param {"default"|"muted"} [props.variant="default"] The section's background.
+ * @param {string} [props.className]
+ */
+export default function AppSectionLogos({ title, items, as, eyebrow, subtitle, align, variant, className, ...rest }: {
+    title: import('react').ReactNode;
+    items?: {
+        key?: string;
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+        href?: string;
+    }[];
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    eyebrow?: import('react').ReactNode;
+    subtitle?: import('react').ReactNode;
+    align?: "start" | "center";
+    variant?: "default" | "muted";
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+/**
+ * The pricing section of a public page: a heading block over a row of `AppPricingCard` tiers
+ * (`children`; one column on a phone, two, then three). Renders the same markup as the Razor
+ * `<app-section-pricing>`.
+ *
+ * The section writes no structured data: a page with prices adds its `Product` and `Offer`
+ * through its SEO layer, from the same figures it renders here.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.title The section's heading.
+ * @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as="h2"] The heading element.
+ * @param {import('react').ReactNode} [props.eyebrow] A short label above the heading.
+ * @param {import('react').ReactNode} [props.subtitle] One or two sentences under the heading (a tax note, a trial offer).
+ * @param {"start"|"center"} [props.align="center"] Where the heading block sits.
+ * @param {"default"|"muted"} [props.variant="default"] The section's background.
+ * @param {import('react').ReactNode} [props.children] The `AppPricingCard` tiers.
+ * @param {string} [props.className]
+ */
+export default function AppSectionPricing({ title, as, eyebrow, subtitle, align, variant, children, className, ...rest }: {
+    title: import('react').ReactNode;
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    eyebrow?: import('react').ReactNode;
+    subtitle?: import('react').ReactNode;
+    align?: "start" | "center";
+    variant?: "default" | "muted";
+    children?: import('react').ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,34 @@
+/**
+ * Customers' words: each a quote with the person's name, role and photo, in columns that wrap on
+ * a phone. Renders the same markup as the Razor `<app-section-testimonials>`.
+ *
+ * The photo is drawn as a 48px circle with `width` and `height` set, so any square image fits
+ * without moving the page; it is decorative (empty `alt`) because the name sits beside it.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.title The section's heading.
+ * @param {{ key?: string, quote: import('react').ReactNode, name?: string, role?: string, avatar?: string }[]} [props.items]
+ *   The quotes, each with the person's name, role and a square photo URL.
+ * @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as="h2"] The heading element.
+ * @param {import('react').ReactNode} [props.eyebrow] A short label above the heading.
+ * @param {import('react').ReactNode} [props.subtitle] One or two sentences under the heading.
+ * @param {"start"|"center"} [props.align="center"] Where the heading block sits.
+ * @param {"default"|"muted"} [props.variant="default"] The section's background.
+ * @param {string} [props.className]
+ */
+export default function AppSectionTestimonials({ title, items, as, eyebrow, subtitle, align, variant, className, ...rest }: {
+    title: import('react').ReactNode;
+    items?: {
+        key?: string;
+        quote: import('react').ReactNode;
+        name?: string;
+        role?: string;
+        avatar?: string;
+    }[];
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    eyebrow?: import('react').ReactNode;
+    subtitle?: import('react').ReactNode;
+    align?: "start" | "center";
+    variant?: "default" | "muted";
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,34 @@
+import "@webority/ui-elements/elements/shortcuts";
+/**
+ * The keyboard shortcut list of a screen: a "? Keyboard shortcuts" button that opens a sheet of
+ * every shortcut, also opened with `?` and closed with Esc or a click outside. Put it under a
+ * list people work through, and show each key on its action too (`shortcut` on AppButton,
+ * AppTooltip and AppDropdown items).
+ *
+ * Each entry with `onPress` is a working shortcut: pressing its key calls it. An entry without
+ * one only lists a key the page binds itself (with `useListShortcuts`). `items` and `search` add
+ * the list keys: J and K move focus through the elements matching `items`, X ticks the checkbox
+ * in the focused item's row, `/` focuses `search`. Keys typed into a field, held with Ctrl, Cmd or
+ * Alt, or pressed while `<html data-wui-shortcuts="off">` is set do nothing. Inside an element
+ * marked `data-shortcut-scope` the keys count while focus is in it (or, with nothing focused, in
+ * the first scope on the page). Wraps `<wui-shortcuts>`, which Razor `<app-shortcut-legend>`
+ * renders too. A phone has no keyboard, so leave the legend out of phone-only screens.
+ *
+ * @param {object} props
+ * @param {{ key: string, label: string, onPress?: (itemKey: string|null) => void }[]} [props.shortcuts]
+ *   The rows, in order ("?" is always the last row). `key` is one character or Enter, Esc, `/`;
+ *   `onPress` gets the `data-key` of the item marked `aria-current="true"` in the scope, or null.
+ * @param {string} [props.items] CSS selector of the items J and K move between (inside the scope).
+ * @param {string} [props.search] CSS selector of the field `/` focuses.
+ * @param {string} [props.className]
+ */
+export default function AppShortcutLegend({ shortcuts, items, search, className, ...rest }: {
+    shortcuts?: {
+        key: string;
+        label: string;
+        onPress?: (itemKey: string | null) => void;
+    }[];
+    items?: string;
+    search?: string;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,29 @@
+import "@webority/ui-elements/elements/show-more";
+/**
+ * A long text block clamped to a few lines with a Show more toggle, for a description or a note
+ * that would otherwise push the rest of a detail page down. The toggle shows only when the text
+ * overflows `lines`. The clamp is visual: the full text stays in the page for screen readers, and
+ * the toggle announces its state (`aria-expanded`). Without script the text shows in full. Wraps
+ * `<wui-show-more>`, which Razor `<app-show-more>` renders too.
+ *
+ * Open and close state belongs to the element; `defaultExpanded` only sets where it starts, and a
+ * change of it after mount is ignored. Listen for `wui:show-more:toggle` on the root to follow it.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.children The text (or markup) to clamp.
+ * @param {number} [props.lines=3] How many lines show while collapsed.
+ * @param {string} [props.moreLabel="Show more"] The toggle's text while collapsed.
+ * @param {string} [props.lessLabel="Show less"] The toggle's text while expanded.
+ * @param {boolean} [props.defaultExpanded=false] Start with the whole text showing.
+ * @param {string} [props.id] The root's id; the body's is `{id}-body`. Generated when omitted.
+ * @param {string} [props.className]
+ */
+export default function AppShowMore({ children, lines, moreLabel, lessLabel, defaultExpanded, id, className, ...rest }: {
+    children: import('react').ReactNode;
+    lines?: number;
+    moreLabel?: string;
+    lessLabel?: string;
+    defaultExpanded?: boolean;
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,53 @@
+/**
+ * A button with a menu of related actions beside it: the main action runs on one click, the
+ * chevron opens the rest ("Save" and "Save and close", "Reply" and "Reply all"). The main button
+ * is an `AppButton` (so `shortcut`, `loading` and `leftIcon` work as there) and the menu is an
+ * `AppDropdown`, with the same keyboard behaviour: Enter or Space on the chevron opens it, arrows
+ * move, Esc closes and returns focus to the chevron. The two halves are one `role="group"` named
+ * by `label`. Razor counterpart: `<app-split-button>` with `<app-split-button-item>` children.
+ *
+ * @param {object} props
+ * @param {string} props.label The main button's text, also the group's accessible name.
+ * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, shortcut?: string, divider?: true }[]} [props.items]
+ *   The menu, as `AppDropdown` takes it.
+ * @param {() => void} [props.onClick] Called when the main button is pressed.
+ * @param {string} [props.href] Make the main button a link.
+ * @param {'button'|'submit'|'reset'} [props.type='button'] The main button's type.
+ * @param {'primary'|'secondary'|'outline'|'ghost'|'danger'|'success'|'secondary-danger'|'outline-danger'|'light'|'warning'|'subtle'|'outline-light'} [props.variant='primary'] Both halves share it.
+ * @param {'sm'|'md'|'lg'} [props.size='md']
+ * @param {boolean} [props.disabled=false] Disables both halves.
+ * @param {boolean} [props.loading=false] Shows the spinner on the main button and disables both halves.
+ * @param {string} [props.leftIcon] Icon name before the main label.
+ * @param {string} [props.shortcut] The key that runs the main action, drawn as a key chip after the label.
+ * @param {string} [props.menuLabel='More actions'] Accessible name of the chevron.
+ * @param {'start'|'end'} [props.align='end'] Which edge the menu lines up with.
+ * @param {import('react').ElementType} [props.linkComponent] Component for items with `to` (e.g. a router Link).
+ * @param {string} [props.className]
+ */
+export default function AppSplitButton({ label, items, onClick, href, type, variant, size, disabled, loading, leftIcon, shortcut, menuLabel, align, linkComponent, className, ...rest }: {
+    label: string;
+    items?: {
+        key: string;
+        label?: string;
+        icon?: string | import('react').ReactNode;
+        image?: string;
+        to?: string;
+        onClick?: () => void;
+        danger?: boolean;
+        shortcut?: string;
+        divider?: true;
+    }[];
+    onClick?: () => void;
+    href?: string;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'secondary-danger' | 'outline-danger' | 'light' | 'warning' | 'subtle' | 'outline-light';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    loading?: boolean;
+    leftIcon?: string;
+    shortcut?: string;
+    menuLabel?: string;
+    align?: 'start' | 'end';
+    linkComponent?: import('react').ElementType;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,85 @@
+/**
+ * A list beside a reading pane: a queue on the left, the open item on the right, for inbox,
+ * approval and drafts screens that should not change page for every item. The open item carries
+ * `aria-current="true"` and the subtle primary background, the same treatment as the open row of
+ * `AppDataTable`. J and K move between items, Enter opens the focused one, X ticks it (with
+ * `selectable`), `?` lists every shortcut (the list footer is an `AppShortcutLegend`). The pane
+ * header carries an `AppRecordPager` ("3 of 12", previous and next) for the open item.
+ *
+ * Below `stackBelow` the list and the pane are two screens: the list shows until an item is open
+ * (`currentKey` set), then the pane does. There an item with an `href` follows it, so the item's own
+ * route renders the pane screen; put a link back to the list in `paneHeader`. At or above it a click
+ * calls `onSelect` instead (Ctrl/Cmd or middle click still opens the `href` in a new tab).
+ *
+ * Both columns scroll inside a height-capped box (`--wui-split-height` sets the cap). Razor
+ * counterpart: `<app-split-view>` with `<app-split-item>` children, whose `pane-src` loads each item
+ * into the pane without a page load.
+ *
+ * @param {object} props
+ * @param {{ key: string|number, title: import('react').ReactNode, href?: string,
+ *   meta?: import('react').ReactNode, trailing?: import('react').ReactNode, badge?: string|number }[]} [props.items]
+ *   The list. `meta` is the line under the title (sender, excerpt), `trailing` sits at the end (a
+ *   date), `badge` is a short count or label. Keep links and buttons out of all three: the item is
+ *   itself a link (with `href`) or a button.
+ * @param {string|number} [props.currentKey] The key of the open item.
+ * @param {(key: string|number) => void} [props.onSelect] Called with an item's key when it is opened in place.
+ * @param {boolean} [props.selectable=false] A checkbox on each item and a select-all box in the header.
+ * @param {Set<string|number>} [props.selectedKeys] The ticked items' keys.
+ * @param {(key: string|number) => void} [props.onToggle] Called when an item's checkbox changes.
+ * @param {(checked: boolean) => void} [props.onToggleAll] Called when the select-all box changes.
+ * @param {import('react').ReactNode} [props.bulkActions] Buttons shown in place of the header while
+ *   items are ticked, beside "N selected", as `AppTableToolbar` does over a table.
+ * @param {import('react').ReactNode} [props.header] The list header: a count, a sort label, a filter trigger.
+ * @param {import('react').ReactNode} [props.chips] A row under the header for the active filters.
+ * @param {import('react').ReactNode} [props.pane] The open item's content.
+ * @param {import('react').ReactNode} [props.paneHeader] Above the pane, before the pager: the open
+ *   item's title or status, a link back to the list for phones.
+ * @param {boolean} [props.pager=true] The record pager at the end of the pane header: "3 of 12"
+ *   over the items on screen, and previous and next, which open the item before or after the open
+ *   one as a click on it would. Turn it off to put your own `AppRecordPager` in `paneHeader` (a
+ *   paged list whose total is larger than the items on screen).
+ * @param {{ key: string, label: string, onPress: (currentKey?: string|number) => void }[]} [props.shortcuts]
+ *   Extra single-key shortcuts (archive, approve); `onPress` gets the open item's key. They are
+ *   listed in the `?` sheet. J, K, Enter, `?` (and X with `selectable`) are built in and win over an
+ *   extra with the same key.
+ * @param {boolean} [props.shortcutsEnabled=true] The keyboard shortcuts and their legend. They listen
+ *   while focus is in the view, or nowhere (the page body) for the first view on the page.
+ * @param {import('react').ReactNode} [props.empty="Nothing here yet."] Shown when there are no items.
+ * @param {boolean} [props.loading=false] Placeholder items instead of the list.
+ * @param {3|4|5|6|7|8} [props.listWidth=5] The list's share of 12 columns when side by side.
+ * @param {'sm'|'md'|'lg'|'xl'|'xxl'} [props.stackBelow='xl'] Below this tier the list and pane are two screens.
+ * @param {string} [props.className]
+ */
+export default function AppSplitView({ items, currentKey, onSelect, selectable, selectedKeys, onToggle, onToggleAll, bulkActions, header, chips, pane, paneHeader, pager, shortcuts, shortcutsEnabled, empty, loading, listWidth, stackBelow, className, ...rest }: {
+    items?: {
+        key: string | number;
+        title: import('react').ReactNode;
+        href?: string;
+        meta?: import('react').ReactNode;
+        trailing?: import('react').ReactNode;
+        badge?: string | number;
+    }[];
+    currentKey?: string | number;
+    onSelect?: (key: string | number) => void;
+    selectable?: boolean;
+    selectedKeys?: Set<string | number>;
+    onToggle?: (key: string | number) => void;
+    onToggleAll?: (checked: boolean) => void;
+    bulkActions?: import('react').ReactNode;
+    header?: import('react').ReactNode;
+    chips?: import('react').ReactNode;
+    pane?: import('react').ReactNode;
+    paneHeader?: import('react').ReactNode;
+    pager?: boolean;
+    shortcuts?: {
+        key: string;
+        label: string;
+        onPress: (currentKey?: string | number) => void;
+    }[];
+    shortcutsEnabled?: boolean;
+    empty?: import('react').ReactNode;
+    loading?: boolean;
+    listWidth?: 3 | 4 | 5 | 6 | 7 | 8;
+    stackBelow?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -3,12 +3,15 @@
  *
  * @param {object} props
  * @param {string|import('react').ReactNode} props.icon Icon name, or a custom node.
+ * @param {"no-results"|"no-data"|"empty-inbox"|"no-notifications"|"no-files"|"no-access"|"offline"|"error"} [props.illustration]
+ *   Decorative drawing by name, in theme colours. Replaces the icon bubble when set.
  * @param {import('react').ReactNode} props.title
  * @param {import('react').ReactNode} [props.text]
  * @param {import('react').ReactNode} [props.action]
  */
-export default function AppTableEmptyState({ icon, title, text, action, ...rest }: {
+export default function AppTableEmptyState({ icon, illustration, title, text, action, ...rest }: {
     icon: string | import('react').ReactNode;
+    illustration?: "no-results" | "no-data" | "empty-inbox" | "no-notifications" | "no-files" | "no-access" | "offline" | "error";
     title: import('react').ReactNode;
     text?: import('react').ReactNode;
     action?: import('react').ReactNode;

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

@@ -13,13 +13,25 @@
  * @param {number} [props.selectedCount=0] Selected rows. Above 0, the bulk bar replaces the toolbar.
  * @param {import('react').ReactNode} [props.bulkActions] Buttons shown in the bulk bar.
  * @param {() => void} [props.onClearSelection] Shows a Clear button in the bulk bar that calls this.
+ * @param {number} [props.totalCount] Rows matching across every page. With `onSelectAllMatching`, the bulk
+ *   bar offers "Select all 1,284 matching" once the page is selected and more rows match than it shows.
+ * @param {number} [props.pageCount] Rows on the current page. The offer waits until `selectedCount`
+ *   reaches it; without it, any selection qualifies.
+ * @param {() => void} [props.onSelectAllMatching] Called when the offer is taken; the screen then runs
+ *   its action on the query rather than on ids, and sets `allMatchingSelected`.
+ * @param {boolean} [props.allMatchingSelected=false] Every matching row is selected: the bar reads
+ *   "All 1,284 selected" and Clear becomes "Clear selection". The screen resets it on any row change.
  * @param {string} [props.className]
  */
-export default function AppTableToolbar({ filters, actions, selectedCount, bulkActions, onClearSelection, className, ...rest }: {
+export default function AppTableToolbar({ filters, actions, selectedCount, bulkActions, onClearSelection, totalCount, pageCount, onSelectAllMatching, allMatchingSelected, className, ...rest }: {
     filters?: import('react').ReactNode;
     actions?: import('react').ReactNode;
     selectedCount?: number;
     bulkActions?: import('react').ReactNode;
     onClearSelection?: () => void;
+    totalCount?: number;
+    pageCount?: number;
+    onSelectAllMatching?: () => void;
+    allMatchingSelected?: boolean;
     className?: string;
 }): import("react").JSX.Element;

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

@@ -1,13 +1,13 @@
+import "@webority/ui-elements/elements/overflow";
 /**
  * Shared tab strip (.app-tabs). A controlled component: the caller owns `value` +
  * `onChange` and renders the panels. Razor's <app-tabs> renders the same strip markup
  * (plus Bootstrap panels), so both surfaces look and behave alike.
  *
  * The active state is a sliding "ink bar" (`.app-tab-indicator`) — one element that is
- * JS-measured against the active tab and animates between tabs with an elastic overshoot
- * (`--wui-ease-elastic`). It becomes a moving pill in the `pills` variant and a moving
- * left edge when `orientation="vertical"`, and it snaps (no slide) under
- * `prefers-reduced-motion`.
+ * JS-measured against the active tab and slides between tabs with an ease-out (no overshoot).
+ * It becomes a moving pill in the `pills` variant and a moving left edge when
+ * `orientation="vertical"`, and it snaps (no slide) under `prefers-reduced-motion`.
  *
  * Keyboard (WAI-ARIA tablist): Arrow (Left/Right, or Up/Down when vertical) / Home / End
  * roam the strip skipping disabled tabs. `activation="automatic"` (default) selects as
@@ -24,7 +24,7 @@
  *
  * @param {object} props
  * @param {{ key: string, label: import('react').ReactNode, count?: number, tone?: string, icon?: string|import('react').ReactNode, image?: string, imageAlt?: string, tooltip?: import('react').ReactNode, danger?: boolean, disabled?: boolean, href?: string, to?: string, target?: string, rel?: string }[]} props.tabs
- *   `icon` is a Bootstrap-Icons name OR a custom node (e.g. an iconsax glyph); `image` is a
+ *   `icon` is an iconsax name from the library catalogue OR a custom node (e.g. an iconsax glyph); `image` is a
  *   picture URL (logo/avatar) rendered before the label — `image` wins over `icon`. `tooltip`
  *   is a hover/focus hint (text or node) shown on the tab via AppTooltip — the same branded
  *   tip the Razor `<app-tab tooltip="…">` renders. `href`/`to` turn the tab into a link (see
@@ -36,13 +36,17 @@
  * @param {"horizontal"|"vertical"} [props.orientation="horizontal"] Vertical renders a side rail.
  * @param {"sm"|"md"|"lg"} [props.size="md"]
  * @param {boolean} [props.fitted=false] Tabs share the width equally instead of scrolling.
+ * @param {"scroll"|"menu"} [props.overflow="scroll"] What a horizontal strip does when the tabs do not fit:
+ *   `scroll` scrolls it (chevrons and edge fades); `menu` moves the tabs that do not fit into a More menu
+ *   (`<wui-overflow>`), always keeping the selected tab visible. Ignored when `orientation="vertical"`.
+ * @param {string} [props.moreLabel="More"] The More button's text when `overflow="menu"`.
  * @param {"automatic"|"manual"} [props.activation="automatic"] Whether arrow keys also select.
  * @param {string} [props.ariaLabel]
  * @param {string} [props.className]
  * @param {import('react').CSSProperties} [props.style]
  * @param {"success"|"warning"|"danger"|"info"} [props.tone] Per-tab count-pill tint (set as `tabs[].tone`).
  */
-export default function AppTabs({ tabs, value, onChange, linkComponent, variant, orientation, size, fitted, activation, ariaLabel, className, style, ...rest }: {
+export default function AppTabs({ tabs, value, onChange, linkComponent, variant, orientation, size, fitted, overflow, moreLabel, activation, ariaLabel, className, style, ...rest }: {
     tabs: {
         key: string;
         label: import('react').ReactNode;
@@ -66,6 +70,8 @@ export default function AppTabs({ tabs, value, onChange, linkComponent, variant,
     orientation?: "horizontal" | "vertical";
     size?: "sm" | "md" | "lg";
     fitted?: boolean;
+    overflow?: "scroll" | "menu";
+    moreLabel?: string;
     activation?: "automatic" | "manual";
     ariaLabel?: string;
     className?: string;

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

@@ -19,13 +19,16 @@
  * @param {'sm'|'md'|'lg'} [props.size='md'] Preset size (font-size + padding + max-width). For a
  *   fully custom size, pass a `className` that sets the `--wui-tooltip-font-size` /
  *   `--wui-tooltip-padding-y` / `--wui-tooltip-padding-x` / `--wui-tooltip-max-width` CSS vars.
+ * @param {string} [props.shortcut] The key that runs the action ("A", "E", "/"), drawn as a key chip
+ *   after the text ("Approve A"). One character is written in upper case.
  * @param {string} [props.className] Extra class on the tooltip element.
  */
-export default function AppTooltip({ content, children, placement, tone, size, className, ...rest }: {
+export default function AppTooltip({ content, children, placement, tone, size, shortcut, className, ...rest }: {
     content: import('react').ReactNode;
     children: import('react').ReactElement;
     placement?: 'auto' | 'top' | 'bottom' | 'start' | 'end';
     tone?: 'default' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
     size?: 'sm' | 'md' | 'lg';
+    shortcut?: string;
     className?: string;
 }): import("react").JSX.Element;

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

@@ -0,0 +1,21 @@
+import "@webority/ui-elements/elements/truncate";
+/**
+ * Cuts long text with an ellipsis, by the width it has or by a number of lines, and gives the
+ * whole text on hover and on keyboard focus. Text that fits shows no tooltip and takes no tab
+ * stop. Put it where the width is set by the layout (a table cell, a card, a flex child with
+ * `.min-w-0`), or pass `width`. Wraps `<wui-truncate>`, which Razor `<app-truncate>` renders too.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.children The text.
+ * @param {number} [props.lines=1] How many lines show before the cut; 1 is a single line cut by width.
+ * @param {string} [props.width] A CSS length the text never exceeds ("12rem", "240px"); without it the text takes the width it is given.
+ * @param {import('react').CSSProperties} [props.style]
+ * @param {string} [props.className]
+ */
+export default function AppTruncate({ children, lines, width, style, className, ...rest }: {
+    children: import('react').ReactNode;
+    lines?: number;
+    width?: string;
+    style?: import('react').CSSProperties;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,44 @@
+import "@webority/ui-elements/elements/whats-new";
+/**
+ * A "what's new" entry point for a portal's top bar: a gift icon that carries a dot while there
+ * are release notes the person has not read, and a panel of dated entries under it, newest
+ * first as passed, each with an optional picture and link. Opening the panel marks everything
+ * read. Distinct from `AppPopover` (any floating content) and the shell's bell (notifications
+ * addressed to the person): this is the same list for everyone, read once per person.
+ *
+ * The newest date the person has seen is kept in the browser under `storageKey`, so build the
+ * key with the user's id ("whats-new:" + userId): without an id two people on one browser
+ * share the state, and without a `storageKey` it lasts only until the page is left. To keep it
+ * on your server as well, save `onRead`'s date and pass only the entries newer than it. Wraps
+ * `<wui-whats-new>`, which Razor `<app-whats-new>` renders too.
+ *
+ * @param {object} props
+ * @param {{ id?: string, date: string, title: string, body?: string, imageSrc?: string,
+ *   imageAlt?: string, href?: string, linkLabel?: string }[]} [props.entries] The release notes.
+ *   `date` is the day it shipped, "YYYY-MM-DD", shown as DD-MMM-YYYY. `imageAlt` describes the
+ *   picture; leave it empty when the picture adds nothing. `linkLabel` defaults to "Learn more".
+ * @param {string} [props.storageKey] Names where read state is kept; include the user's id.
+ * @param {string} [props.label="What's new"] The trigger's name and the panel's heading.
+ * @param {string} [props.unreadLabel="unread"] Added to the trigger's name while there are unread entries.
+ * @param {string} [props.emptyText="Nothing new yet"] Shown when there are no entries.
+ * @param {(through: string) => void} [props.onRead] Called with the newest entry's date when opening marks entries read.
+ * @param {string} [props.className]
+ */
+export default function AppWhatsNew({ entries, storageKey, label, unreadLabel, emptyText, onRead, className, ...rest }: {
+    entries?: {
+        id?: string;
+        date: string;
+        title: string;
+        body?: string;
+        imageSrc?: string;
+        imageAlt?: string;
+        href?: string;
+        linkLabel?: string;
+    }[];
+    storageKey?: string;
+    label?: string;
+    unreadLabel?: string;
+    emptyText?: string;
+    onRead?: (through: string) => void;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -1 +1 @@
-export default function withTooltip(element: any, tooltip: any, placement: any): any;
+export default function withTooltip(element: any, tooltip: any, placement: any, shortcut: any): any;