@imfusion/web-ui 0.11.1-dev.56.gc2cf627a → 0.11.1-dev.58.ge2daec34

package/CHANGELOG.md

@@ -4,6 +4,11 @@
 
 ### Added
 
+- `Dialog.Alert` composes a confirmation from props like `Dialog.Simple`, on Base UI's Alert Dialog: screen readers announce
+  it as an `alertdialog`, it is always modal, and a click on the overlay leaves it open. `actions` is required, the header has
+  no close button, and `status` takes any variant. It replaces a `Dialog.Simple` or a hand-composed `Dialog.Root` that asks
+  the user to confirm a step, such as removing a member or discarding changes. [Dialog](src/components/dialog/dialog.mdx)
+  ([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)) — Nikolaus Brunner <brunner@imfusion.com>
 - `Progress` is a new bar for the completion of a running task, adapted from Base UI. `size` runs from `xs` (a 2px hairline) to
   `lg`, `layout` is `stacked` or `inline`, `value={null}` sweeps while the amount is unknown, and the fill turns positive at the
   maximum. [Progress](src/components/progress/progress.mdx) — Nikolaus Brunner <brunner@imfusion.com>
@@ -59,6 +64,9 @@
 
 ### Changed
 
+- `Dialog.Simple` and `Dialog.Inline` without children render no `Dialog.Body`, so the header sits directly on the footer
+  without the body's padding between them. [Dialog](src/components/dialog/dialog.mdx)
+  ([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)) — Nikolaus Brunner <brunner@imfusion.com>
 - `initialsFromEmail` gives the first two letters of a single-segment local part, `jkeller@…` gives `JK`, and `?` for an
   empty one, the same rule as `initialsFromName`. [Avatar](src/components/avatar/avatar.mdx) — Nikolaus Brunner
   <brunner@imfusion.com>
@@ -139,6 +147,7 @@
   - Combobox and Autocomplete stories start at the same top-left corner, so clicking through them does not shift the
     layout. A story resizes its frame with `parameters.frame`, which `withFrame` reads.
   - The Autocomplete interaction test reads the popup's height after it reopens, so it passes on every run.
+- `RichLink` sets every label in the strong weight, with or without a `description`. [RichLink](src/components/rich-link/rich-link.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 
 ### Fixed
 

package/dist/components/dialog/dialog.d.ts

@@ -1,3 +1,4 @@
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import { VariantProps } from 'class-variance-authority';
 import * as ScrollArea from '../scroll-area/scroll-area';
@@ -102,7 +103,7 @@ export declare function Close(props: React.ComponentProps<typeof DialogPrimitive
 export declare namespace Close {
     var displayName: string;
 }
-type ComposedProps = Omit<React.ComponentProps<typeof DialogPrimitive.Root>, "children"> & {
+type ContentProps = {
     /** Heading of the dialog. */
     title: React.ReactNode;
     /** Short uppercase label above the title. */
@@ -127,6 +128,7 @@ type ComposedProps = Omit<React.ComponentProps<typeof DialogPrimitive.Root>, "ch
     /** Content of the body. */
     children?: React.ReactNode;
 };
+type ComposedProps = Omit<React.ComponentProps<typeof DialogPrimitive.Root>, "children"> & ContentProps;
 type SimpleProps = ComposedProps & {
     /** Element rendered as the trigger, such as a `Button`. Omit it for a controlled dialog. */
     trigger?: React.ReactElement;
@@ -135,7 +137,7 @@ type SimpleProps = ComposedProps & {
  * Dialog.Simple — pre-composed dialog: trigger, header with title, description, and optional status, a scrolling body,
  * and either a close button in the header or a footer of `actions`. Root props pass through.
  */
-export declare function Simple({ trigger, headerVariant, size, ...props }: SimpleProps): import("react/jsx-runtime").JSX.Element;
+export declare function Simple({ trigger, headerVariant, size, eyebrow, title, description, status, actions, children, ...rootProps }: SimpleProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Simple {
     var displayName: string;
 }
@@ -144,8 +146,26 @@ type InlineProps = ComposedProps & {
     trigger: React.ReactNode;
 };
 /** Dialog.Inline — like Dialog.Simple, but the trigger is text inside a sentence. */
-export declare function Inline({ trigger, headerVariant, size, ...props }: InlineProps): import("react/jsx-runtime").JSX.Element;
+export declare function Inline({ trigger, headerVariant, size, eyebrow, title, description, status, actions, children, ...rootProps }: InlineProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Inline {
     var displayName: string;
 }
+type AlertProps = Omit<React.ComponentProps<typeof AlertDialogPrimitive.Root>, "children"> & Omit<ContentProps, "headerVariant" | "actions"> & {
+    /** Element rendered as the trigger, such as a `Button`. Omit it for a controlled dialog. */
+    trigger?: React.ReactElement;
+    /** Buttons of the footer, the only way out. Include a Cancel `Dialog.Close`. */
+    actions: React.ReactNode;
+};
+/**
+ * Dialog.Alert — pre-composed confirmation that interrupts the user, announced as an `alertdialog`. Always modal; a click
+ * on the overlay does not close it, Escape does. Like Dialog.Simple, without a header close button. Root props pass
+ * through.
+ *
+ * @see https://base-ui.com/react/components/alert-dialog
+ * @llm https://base-ui.com/react/components/alert-dialog.md
+ */
+export declare function Alert({ trigger, size, eyebrow, title, description, status, actions, children, ...rootProps }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Alert {
+    var displayName: string;
+}
 export {};

package/dist/components/rich-link/rich-link.d.ts

@@ -2,7 +2,7 @@ import { IconComponent } from '../icon';
 type Props = React.ComponentProps<"a"> & {
     /** Leading icon from `@imfusion/web-ui/icons`, shown on a tile in the primary color. */
     glyph?: IconComponent;
-    /** Second line under the label. When set, the label turns bold. */
+    /** Second line under the label. */
     description?: React.ReactNode;
     /** Link target scope. `"external"` (default) opens in a new tab with a diagonal `ArrowUpRight` icon; `"internal"` stays in the current tab with a horizontal `ArrowRight` icon. */
     kind?: "external" | "internal";