@openwarelabs/ui 0.1.1 → 0.3.0

package/README.md

@@ -50,10 +50,11 @@ import { Button, Field, Input, Toaster, toast } from "@openwarelabs/ui";
 
 ## Components
 
-70 components, each with a page in the docs.
+71 components, each with a page in the docs.
 
 | Group | Components |
 | --- | --- |
+| Typography | `Text` (each style on the Typography page as a variant: hero to caption, code and kbd; tones, `truncate`, `as`) |
 | Buttons | `Button` (primary, secondary, ghost, danger; sm, md, lg; `loading`; `shape="pill"`), `buttonClassName()` for links, `ButtonGroup`, `ToggleButton`, `CloseButton`, `CopyButton`, `SegmentedControl`, `ChoiceCard` |
 | Forms | `Field`, `Fieldset`, `Input` (start and end content), `SearchField`, `NumberField`, `InputOTP`, `Textarea` (`autoGrow`), `Select`, `Combobox`, `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Slider` (one value or a range), `ColorPicker`, `ColorField`, `FileDropZone` |
 | Dates | `Calendar`, `DatePicker` |

package/dist/components/Avatar/Avatar.d.cts

@@ -1,14 +1,25 @@
+import { type CSSProperties } from "react";
 export interface AvatarProps {
     /** The person's name; its initials show when there's no image. */
     name: string;
     /** A photo URL. If it fails to load, the initials show instead. */
     src?: string;
-    /** sm 24px, md 28px, lg 36px.
+    /** sm 24px, md 28px, lg 36px, xl 48px, or any size in pixels, such as 96 for a team page. The initials scale with it.
      * @default "md" */
-    size?: "sm" | "md" | "lg";
+    size?: AvatarSize;
     /** Give it when the avatar stands alone; beside the name, leave it out and it's hidden from screen readers. */
     label?: string;
     className?: string;
 }
+export type AvatarSize = "sm" | "md" | "lg" | "xl" | number;
+/**
+ * The class and style that size an avatar: a named size's class, or a pixel size through --ow-avatar-size.
+ * @internal
+ */
+export declare function avatarSize(size: AvatarSize): {
+    className: string;
+    style?: CSSProperties;
+    pixels: number;
+};
 /** A round picture of a person: their photo, else their initials on the brand colour, else a person icon. */
 export declare function Avatar({ name, src, size, label, className }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar/Avatar.d.ts

@@ -1,14 +1,25 @@
+import { type CSSProperties } from "react";
 export interface AvatarProps {
     /** The person's name; its initials show when there's no image. */
     name: string;
     /** A photo URL. If it fails to load, the initials show instead. */
     src?: string;
-    /** sm 24px, md 28px, lg 36px.
+    /** sm 24px, md 28px, lg 36px, xl 48px, or any size in pixels, such as 96 for a team page. The initials scale with it.
      * @default "md" */
-    size?: "sm" | "md" | "lg";
+    size?: AvatarSize;
     /** Give it when the avatar stands alone; beside the name, leave it out and it's hidden from screen readers. */
     label?: string;
     className?: string;
 }
+export type AvatarSize = "sm" | "md" | "lg" | "xl" | number;
+/**
+ * The class and style that size an avatar: a named size's class, or a pixel size through --ow-avatar-size.
+ * @internal
+ */
+export declare function avatarSize(size: AvatarSize): {
+    className: string;
+    style?: CSSProperties;
+    pixels: number;
+};
 /** A round picture of a person: their photo, else their initials on the brand colour, else a person icon. */
 export declare function Avatar({ name, src, size, label, className }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar/AvatarGroup.d.cts

@@ -1,14 +1,14 @@
 import { type ReactNode } from "react";
-import { type AvatarProps } from "./Avatar.cjs";
+import { type AvatarSize } from "./Avatar.cjs";
 export interface AvatarGroupProps {
     /** Avatars. */
     children: ReactNode;
     /** Shows this many, then a "+3" count.
      * @default 4 */
     max?: number;
-    /** Applied to every avatar in the group.
+    /** Applied to every avatar in the group: a named size or pixels.
      * @default "md" */
-    size?: AvatarProps["size"];
+    size?: AvatarSize;
     /** Names the group for screen readers, e.g. "5 people on this project". */
     label?: string;
     className?: string;
@@ -20,8 +20,9 @@ export interface UserProps {
     /** A second line: an email, a role. */
     description?: ReactNode;
     src?: string;
-    /** @default "md" */
-    size?: AvatarProps["size"];
+    /** The avatar's size; the name and gap grow with it from xl (48px) up.
+     * @default "md" */
+    size?: AvatarSize;
     className?: string;
 }
 /** A person: avatar, name and a line about them, as in an account menu. */

package/dist/components/Avatar/AvatarGroup.d.ts

@@ -1,14 +1,14 @@
 import { type ReactNode } from "react";
-import { type AvatarProps } from "./Avatar.js";
+import { type AvatarSize } from "./Avatar.js";
 export interface AvatarGroupProps {
     /** Avatars. */
     children: ReactNode;
     /** Shows this many, then a "+3" count.
      * @default 4 */
     max?: number;
-    /** Applied to every avatar in the group.
+    /** Applied to every avatar in the group: a named size or pixels.
      * @default "md" */
-    size?: AvatarProps["size"];
+    size?: AvatarSize;
     /** Names the group for screen readers, e.g. "5 people on this project". */
     label?: string;
     className?: string;
@@ -20,8 +20,9 @@ export interface UserProps {
     /** A second line: an email, a role. */
     description?: ReactNode;
     src?: string;
-    /** @default "md" */
-    size?: AvatarProps["size"];
+    /** The avatar's size; the name and gap grow with it from xl (48px) up.
+     * @default "md" */
+    size?: AvatarSize;
     className?: string;
 }
 /** A person: avatar, name and a line about them, as in an account menu. */

package/dist/components/Steps/Steps.d.cts

@@ -3,7 +3,7 @@ export interface StepItem {
     title: ReactNode;
     /** A line under the title. Hidden once the step is done, in the vertical layout. */
     description?: ReactNode;
-    /** A control on the right of the current step, such as a small Button. */
+    /** A control on the right of the step while it's the current one, such as a small Button. Other steps don't show it. */
     action?: ReactNode;
     /** Overrides the status worked out from `current`. */
     status?: "done" | "current" | "upcoming";

package/dist/components/Steps/Steps.d.ts

@@ -3,7 +3,7 @@ export interface StepItem {
     title: ReactNode;
     /** A line under the title. Hidden once the step is done, in the vertical layout. */
     description?: ReactNode;
-    /** A control on the right of the current step, such as a small Button. */
+    /** A control on the right of the step while it's the current one, such as a small Button. Other steps don't show it. */
     action?: ReactNode;
     /** Overrides the status worked out from `current`. */
     status?: "done" | "current" | "upcoming";

package/dist/components/Table/Table.d.cts

@@ -41,6 +41,11 @@ export interface TableProps<Row> {
     selectedKeys?: Key[];
     defaultSelectedKeys?: Key[];
     onSelectionChange?(keys: Key[]): void;
+    /**
+     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
+     * first column's value when it's text or a number, else "row 3".
+     */
+    rowLabel?(row: Row): string;
     /** Shown in place of the rows when there are none, such as an EmptyState. */
     emptyContent?: ReactNode;
     /** `compact` rows are 36px; `comfortable` 44px.
@@ -52,4 +57,4 @@ export interface TableProps<Row> {
     className?: string;
 }
 /** Rows of records with sortable columns and optional selection, in a bordered card. */
-export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -41,6 +41,11 @@ export interface TableProps<Row> {
     selectedKeys?: Key[];
     defaultSelectedKeys?: Key[];
     onSelectionChange?(keys: Key[]): void;
+    /**
+     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
+     * first column's value when it's text or a number, else "row 3".
+     */
+    rowLabel?(row: Row): string;
     /** Shown in place of the rows when there are none, such as an EmptyState. */
     emptyContent?: ReactNode;
     /** `compact` rows are 36px; `comfortable` 44px.
@@ -52,4 +57,4 @@ export interface TableProps<Row> {
     className?: string;
 }
 /** Rows of records with sortable columns and optional selection, in a bordered card. */
-export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/Text/Text.d.cts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+/** The text styles on the Typography page, by the same names: `lead` is the class ow-type-lead. */
+export type TextVariant = "hero" | "page-title" | "section-title" | "heading" | "lead" | "prose" | "dialog-title" | "card-title" | "body" | "copy" | "label" | "button" | "caption" | "badge" | "overline" | "code" | "kbd";
+export type TextTone = "default" | "soft" | "muted" | "primary" | "danger" | "success" | "warning";
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    /** Which text style: size, leading, weight and tracking from the Typography page. The display styles shrink on phones.
+     * @default "body" */
+    variant?: TextVariant;
+    /** The element, for the page's outline. Defaults to one that suits the variant: h1 for hero and page-title, h2 for
+     * section-title, h3 for heading and the titles, p for running text, span for the rest. */
+    as?: keyof JSX.IntrinsicElements;
+    /** The colour. Left out, lead, copy, caption and overline are muted, as the styles ask, and the rest take the
+     * colour around them. */
+    tone?: TextTone;
+    /** @default "start" */
+    align?: "start" | "center" | "end";
+    /** One line, cut off with an ellipsis.
+     * @default false */
+    truncate?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Text in one of Openware's styles: `<Text variant="lead">`. The variant sets the look and a sensible element;
+ * `as` changes the element without changing the look, so the outline stays right.
+ */
+export declare function Text({ variant, as, tone, align, truncate, className, children, ...props }: TextProps): JSX.Element;

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+/** The text styles on the Typography page, by the same names: `lead` is the class ow-type-lead. */
+export type TextVariant = "hero" | "page-title" | "section-title" | "heading" | "lead" | "prose" | "dialog-title" | "card-title" | "body" | "copy" | "label" | "button" | "caption" | "badge" | "overline" | "code" | "kbd";
+export type TextTone = "default" | "soft" | "muted" | "primary" | "danger" | "success" | "warning";
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    /** Which text style: size, leading, weight and tracking from the Typography page. The display styles shrink on phones.
+     * @default "body" */
+    variant?: TextVariant;
+    /** The element, for the page's outline. Defaults to one that suits the variant: h1 for hero and page-title, h2 for
+     * section-title, h3 for heading and the titles, p for running text, span for the rest. */
+    as?: keyof JSX.IntrinsicElements;
+    /** The colour. Left out, lead, copy, caption and overline are muted, as the styles ask, and the rest take the
+     * colour around them. */
+    tone?: TextTone;
+    /** @default "start" */
+    align?: "start" | "center" | "end";
+    /** One line, cut off with an ellipsis.
+     * @default false */
+    truncate?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Text in one of Openware's styles: `<Text variant="lead">`. The variant sets the look and a sensible element;
+ * `as` changes the element without changing the look, so the outline stays right.
+ */
+export declare function Text({ variant, as, tone, align, truncate, className, children, ...props }: TextProps): JSX.Element;

package/dist/components/Tooltip/Tooltip.d.cts

@@ -4,15 +4,15 @@ export interface TooltipProps {
     label: ReactNode;
     /** The thing it explains: usually an icon-only Button with the same words as its aria-label. */
     children: ReactNode;
-    /** Which side it prefers; it flips when there's no room.
+    /** Which side it prefers; it flips to the opposite side when there's no room. `right` suits icons in a folded sidebar.
      * @default "top" */
-    placement?: "top" | "bottom";
+    placement?: "top" | "bottom" | "left" | "right";
     /** Milliseconds of hovering before it shows. Moving to a neighbour while one is showing skips the wait.
      * @default 400 */
     delay?: number;
 }
 /**
- * A small dark label above its child on hover or keyboard focus. It's for sighted users only: the child
+ * A small dark label beside its child (above, unless `placement` says otherwise) on hover or keyboard focus. It's for sighted users only: the child
  * carries the same words for screen readers (an aria-label, or visually hidden text), so they aren't read twice.
  * It sits in the top layer, so scroll areas and dialogs can't clip it.
  */

package/dist/components/Tooltip/Tooltip.d.ts

@@ -4,15 +4,15 @@ export interface TooltipProps {
     label: ReactNode;
     /** The thing it explains: usually an icon-only Button with the same words as its aria-label. */
     children: ReactNode;
-    /** Which side it prefers; it flips when there's no room.
+    /** Which side it prefers; it flips to the opposite side when there's no room. `right` suits icons in a folded sidebar.
      * @default "top" */
-    placement?: "top" | "bottom";
+    placement?: "top" | "bottom" | "left" | "right";
     /** Milliseconds of hovering before it shows. Moving to a neighbour while one is showing skips the wait.
      * @default 400 */
     delay?: number;
 }
 /**
- * A small dark label above its child on hover or keyboard focus. It's for sighted users only: the child
+ * A small dark label beside its child (above, unless `placement` says otherwise) on hover or keyboard focus. It's for sighted users only: the child
  * carries the same words for screen readers (an aria-label, or visually hidden text), so they aren't read twice.
  * It sits in the top layer, so scroll areas and dialogs can't clip it.
  */

package/dist/components.css

@@ -39,6 +39,7 @@
    back into it. useFloating sets data-side and --ow-floating-origin; usePresence sets data-state. */
 .ow-floating {
     --ow-floating-shift: -4px;
+    --ow-floating-shift-x: 0px;
     transform-origin: var(--ow-floating-origin, top center);
 }
 
@@ -46,6 +47,16 @@
     --ow-floating-shift: 4px;
 }
 
+.ow-floating[data-side="left"] {
+    --ow-floating-shift: 0px;
+    --ow-floating-shift-x: 4px;
+}
+
+.ow-floating[data-side="right"] {
+    --ow-floating-shift: 0px;
+    --ow-floating-shift-x: -4px;
+}
+
 .ow-floating[data-state="open"] {
     animation: ow-floating-in var(--ow-duration-base) var(--ow-ease-emphasized);
 }
@@ -58,14 +69,14 @@
 @keyframes ow-floating-in {
     from {
         opacity: 0;
-        transform: translateY(var(--ow-floating-shift)) scale(0.96);
+        transform: translate(var(--ow-floating-shift-x), var(--ow-floating-shift)) scale(0.96);
     }
 }
 
 @keyframes ow-floating-out {
     to {
         opacity: 0;
-        transform: translateY(var(--ow-floating-shift)) scale(0.97);
+        transform: translate(var(--ow-floating-shift-x), var(--ow-floating-shift)) scale(0.97);
     }
 }
 
@@ -94,6 +105,104 @@
     }
 }
 
+/* components/Text/Text.css */
+/* Text: the type styles from tokens.css as a component, with colours and the sizes the display styles take on phones. */
+.ow-text {
+    margin: 0;
+}
+
+/* Titles balance their lines; running text avoids a lone last word. */
+.ow-text--hero,
+.ow-text--page-title,
+.ow-text--section-title,
+.ow-text--heading {
+    text-wrap: balance;
+}
+
+.ow-text--lead,
+.ow-text--prose,
+.ow-text--copy {
+    text-wrap: pretty;
+}
+
+.ow-text--lead {
+    max-width: 560px;
+}
+
+.ow-text--overline {
+    text-transform: uppercase;
+}
+
+.ow-text--code,
+.ow-text--kbd {
+    font-variant-ligatures: none;
+}
+
+.ow-text--default {
+    color: var(--ow-text);
+}
+
+.ow-text--soft {
+    color: var(--ow-text-soft);
+}
+
+.ow-text--muted {
+    color: var(--ow-text-muted);
+}
+
+.ow-text--primary {
+    color: var(--ow-primary-text);
+}
+
+.ow-text--danger {
+    color: var(--ow-danger-text);
+}
+
+.ow-text--success {
+    color: var(--ow-success-text);
+}
+
+.ow-text--warning {
+    color: var(--ow-warning-text);
+}
+
+.ow-text--center {
+    text-align: center;
+}
+
+.ow-text--center.ow-text--lead {
+    margin-inline: auto;
+}
+
+.ow-text--end {
+    text-align: end;
+}
+
+.ow-text--truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* The display styles on phones, as the Typography page gives them. */
+@media (max-width: 760px) {
+    .ow-text--hero {
+        font-size: 42px;
+        line-height: 1.02;
+    }
+    .ow-text--page-title {
+        font-size: 40px;
+        line-height: 1.06;
+    }
+    .ow-text--section-title {
+        font-size: 32px;
+        line-height: 1.12;
+    }
+    .ow-text--heading {
+        font-size: 21px;
+    }
+}
+
 /* components/Spinner/Spinner.css */
 /* Spinner: a ring with one coloured quarter, turning. */
 .ow-spinner {
@@ -494,6 +603,8 @@
     border-radius: var(--ow-radius-container);
     background: var(--ow-track);
     padding: var(--ow-space-2xs);
+    /* A hairline edge, so the well shows on the canvas as well as on a surface. */
+    box-shadow: inset 0 0 0 1px var(--ow-border);
 }
 
 .ow-segmented--full {
@@ -797,6 +908,8 @@
 .ow-input-group {
     display: flex;
     width: 100%;
+    /* Shrink in a narrow grid or flex column instead of pushing past it. */
+    min-width: 0;
     height: 40px;
     align-items: center;
     gap: var(--ow-space-sm);
@@ -843,6 +956,8 @@
 }
 
 .ow-input-group__input {
+    /* A percentage width lets the field's minimum size come from its start and end content alone. */
+    width: 100%;
     min-width: 0;
     height: 100%;
     flex: 1;
@@ -1031,19 +1146,22 @@
 
 .ow-option {
     display: flex;
-    min-height: 32px;
+    min-height: 36px;
     align-items: flex-start;
     gap: var(--ow-space-sm);
     border-radius: var(--ow-radius-lg);
-    padding: var(--ow-space-xs) var(--ow-space-sm);
+    /* 10 + a 16px line + 10: one line sits centred in the 36px row; a description just makes the row taller. */
+    padding: var(--ow-space-md);
     color: var(--ow-text);
     font-size: 14px;
-    line-height: 1.1;
+    line-height: 16px;
     text-align: left;
     cursor: pointer;
 }
 
 .ow-listbox--sm .ow-option {
+    min-height: 32px;
+    padding-block: var(--ow-space-sm);
     font-size: 12px;
 }
 
@@ -1064,11 +1182,11 @@
 .ow-option__check {
     display: flex;
     width: 16px;
+    /* As tall as the label's first line, so the tick sits level with it. */
     height: 16px;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    padding-top: 2px;
     color: var(--ow-primary-text);
 }
 
@@ -1076,7 +1194,7 @@
     display: grid;
     min-width: 0;
     flex: 1;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-option__label {
@@ -1252,12 +1370,13 @@
     cursor: pointer;
 }
 
+/* Centred on the label's first line, whatever its line height. */
 .ow-check-label .ow-checkbox--md {
-    margin-top: 2px;
+    margin-top: calc((1lh - 16px) / 2);
 }
 
 .ow-check-label .ow-checkbox--sm {
-    margin-top: 3px;
+    margin-top: calc((1lh - 14px) / 2);
 }
 
 .ow-check-label--disabled {
@@ -1267,7 +1386,7 @@
 
 .ow-check-label__text {
     display: grid;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-check-label__description {
@@ -1449,7 +1568,7 @@
     width: 16px;
     height: 16px;
     border-radius: var(--ow-radius-pill);
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: var(--ow-shadow-control);
     transform: translateX(2px);
     transition:
@@ -1471,7 +1590,7 @@
 }
 
 /* components/Slider/Slider.css */
-/* Slider: native range inputs over a drawn track. The thumb is the switch's knob: white, round, with a soft shadow. */
+/* Slider: native range inputs over a drawn track. The thumb is the switch's knob (ow-knob): round, with a soft shadow. */
 .ow-slider {
     display: grid;
     gap: var(--ow-space-sm);
@@ -1562,7 +1681,7 @@
     appearance: none;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
     pointer-events: auto;
     cursor: grab;
@@ -1575,7 +1694,7 @@
     height: 18px;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
     pointer-events: auto;
     cursor: grab;
@@ -2185,7 +2304,7 @@
 }
 
 /* components/Tooltip/Tooltip.css */
-/* Tooltip: a small dark label in the top layer, above the child (or below when there's no room). */
+/* Tooltip: a small dark label in the top layer, on the side of the child it prefers (or the other side when there's no room). */
 .ow-tooltip {
     display: inline-flex;
 }
@@ -2197,7 +2316,7 @@
     border: 0;
     border-radius: var(--ow-radius-md);
     background: var(--ow-tooltip);
-    padding: var(--ow-space-3xs) var(--ow-space-sm);
+    padding: var(--ow-space-2xs) var(--ow-space-sm);
     color: var(--ow-on-tooltip);
     font-family: var(--ow-font-sans);
     font-size: 12px;
@@ -2655,7 +2774,7 @@
     display: grid;
     min-width: 0;
     flex: 1;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
     padding-top: 5px;
 }
 
@@ -3180,7 +3299,7 @@
 }
 
 .ow-palette__group {
-    padding: var(--ow-space-sm) var(--ow-space-sm) var(--ow-space-3xs);
+    padding: var(--ow-space-sm) var(--ow-space-sm) var(--ow-space-2xs);
     color: var(--ow-text-muted);
     font-size: 11px;
     font-weight: var(--ow-weight-control);
@@ -3439,7 +3558,7 @@
 .ow-disclosure__titles {
     display: grid;
     min-width: 0;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-disclosure__title {
@@ -3784,7 +3903,7 @@
     display: grid;
     min-width: 0;
     flex: 1 1 160px;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-steps__title {
@@ -3933,7 +4052,7 @@
 
 .ow-choice__text {
     display: grid;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-choice__title {
@@ -3989,6 +4108,19 @@
     font-size: 13px;
 }
 
+.ow-avatar--xl {
+    width: 48px;
+    height: 48px;
+    font-size: 17px;
+}
+
+/* Any size in pixels, through --ow-avatar-size: the initials stay in proportion. */
+.ow-avatar--custom {
+    width: var(--ow-avatar-size);
+    height: var(--ow-avatar-size);
+    font-size: calc(var(--ow-avatar-size) * 0.36);
+}
+
 .ow-avatar__image {
     width: 100%;
     height: 100%;
@@ -4025,6 +4157,18 @@
     gap: var(--ow-space-md);
 }
 
+.ow-user--xl {
+    gap: var(--ow-space-lg);
+}
+
+.ow-user--xl .ow-user__name {
+    font-size: 15px;
+}
+
+.ow-user--xl .ow-user__description {
+    font-size: 13px;
+}
+
 .ow-user__text {
     display: grid;
     min-width: 0;
@@ -4869,7 +5013,7 @@
     display: grid;
     min-width: 0;
     flex: 1 1 192px;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-settings-row__label {