@openwarelabs/ui 0.10.0 → 0.11.0

package/dist/components/ListBox/ListBox.d.cts

@@ -1,64 +1,6 @@
-import { type ReactElement, type ReactNode, type RefAttributes } from "react";
-import type { SelectOption } from "../Select/Select.cjs";
-/** An option, shaped like Select's, with an optional icon. */
-export interface ListBoxOption extends SelectOption {
-    /** A 16px icon between the checkmark and the label. */
-    icon?: ReactNode;
-    /** Plain text for type-to-find, when `label` isn't a string. */
-    textValue?: string;
-}
-/** Options under a heading, like a Select's groups. */
-export interface ListBoxGroup {
-    /** The heading, shown in uppercase above the options and read out as the group's name. */
-    label: string;
-    options: ListBoxOption[];
-}
-export type ListBoxItem = ListBoxOption | ListBoxGroup;
-export type ListBoxSelectionMode = "single" | "multiple";
-/** ListBox's props for one selection mode: `value` is a string in single mode and an array in multiple mode. */
-export interface ListBoxModeProps<Mode extends ListBoxSelectionMode> {
-    /** The options, and groups of options under a heading. */
-    options: ListBoxItem[];
-    /** `single` chooses one option; `multiple` any number.
-     * @default "single" */
-    selectionMode?: Mode;
-    /** The selected option's value in single mode ("" for none), or the selected values in multiple mode. */
-    value?: Mode extends "multiple" ? string[] : string;
-    /** The starting value when uncontrolled.
-     * @default "" or [] */
-    defaultValue?: Mode extends "multiple" ? string[] : string;
-    /** Called with the new value: a string in single mode, the selected values in the options' order in multiple mode. */
-    onChange?(value: Mode extends "multiple" ? string[] : string): void;
-    /** Keeps at least one option selected: choosing the selected option again doesn't clear it.
-     * @default false */
-    disallowEmptySelection?: boolean;
-    /** Shown in the list when there are no options.
-     * @default "No options" */
-    emptyMessage?: ReactNode;
-    /** Scrolls the options past this height, e.g. 240 or "40vh". */
-    maxHeight?: number | string;
-    /** md rows are 36px; sm rows are 32px with 12px text, like a small Select's list.
-     * @default "md" */
-    size?: "sm" | "md";
-    /** Shows the list as wrong: a red border, and a red halo when focused. Also sets aria-invalid. Field passes it.
-     * @default false */
-    isInvalid?: boolean;
-    /** The options can be moved through and read, but the selection can't change.
-     * @default false */
-    isReadOnly?: boolean;
-    /** Fades the list and takes it out of the tab order.
-     * @default false */
-    disabled?: boolean;
-    id?: string;
-    /** Names the list for screen readers when it isn't in a Field. */
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-    className?: string;
-}
-/** ListBox's props. `value`, `defaultValue` and `onChange` take a string in single mode and an array in multiple mode. */
-export interface ListBoxProps extends ListBoxModeProps<ListBoxSelectionMode> {
-}
+import { type ReactElement, type RefAttributes } from "react";
+import type { ListBoxModeProps, ListBoxSelectionMode } from "./ListBox.types.cjs";
+export type { ListBoxGroup, ListBoxItem, ListBoxModeProps, ListBoxOption, ListBoxProps, ListBoxSelectionMode } from "./ListBox.types.cjs";
 /**
  * Select's list of options on its own: a choice that stays on the page. `selectionMode="multiple"` makes `value` an array.
  */

package/dist/components/ListBox/ListBox.d.ts

@@ -1,64 +1,6 @@
-import { type ReactElement, type ReactNode, type RefAttributes } from "react";
-import type { SelectOption } from "../Select/Select.js";
-/** An option, shaped like Select's, with an optional icon. */
-export interface ListBoxOption extends SelectOption {
-    /** A 16px icon between the checkmark and the label. */
-    icon?: ReactNode;
-    /** Plain text for type-to-find, when `label` isn't a string. */
-    textValue?: string;
-}
-/** Options under a heading, like a Select's groups. */
-export interface ListBoxGroup {
-    /** The heading, shown in uppercase above the options and read out as the group's name. */
-    label: string;
-    options: ListBoxOption[];
-}
-export type ListBoxItem = ListBoxOption | ListBoxGroup;
-export type ListBoxSelectionMode = "single" | "multiple";
-/** ListBox's props for one selection mode: `value` is a string in single mode and an array in multiple mode. */
-export interface ListBoxModeProps<Mode extends ListBoxSelectionMode> {
-    /** The options, and groups of options under a heading. */
-    options: ListBoxItem[];
-    /** `single` chooses one option; `multiple` any number.
-     * @default "single" */
-    selectionMode?: Mode;
-    /** The selected option's value in single mode ("" for none), or the selected values in multiple mode. */
-    value?: Mode extends "multiple" ? string[] : string;
-    /** The starting value when uncontrolled.
-     * @default "" or [] */
-    defaultValue?: Mode extends "multiple" ? string[] : string;
-    /** Called with the new value: a string in single mode, the selected values in the options' order in multiple mode. */
-    onChange?(value: Mode extends "multiple" ? string[] : string): void;
-    /** Keeps at least one option selected: choosing the selected option again doesn't clear it.
-     * @default false */
-    disallowEmptySelection?: boolean;
-    /** Shown in the list when there are no options.
-     * @default "No options" */
-    emptyMessage?: ReactNode;
-    /** Scrolls the options past this height, e.g. 240 or "40vh". */
-    maxHeight?: number | string;
-    /** md rows are 36px; sm rows are 32px with 12px text, like a small Select's list.
-     * @default "md" */
-    size?: "sm" | "md";
-    /** Shows the list as wrong: a red border, and a red halo when focused. Also sets aria-invalid. Field passes it.
-     * @default false */
-    isInvalid?: boolean;
-    /** The options can be moved through and read, but the selection can't change.
-     * @default false */
-    isReadOnly?: boolean;
-    /** Fades the list and takes it out of the tab order.
-     * @default false */
-    disabled?: boolean;
-    id?: string;
-    /** Names the list for screen readers when it isn't in a Field. */
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-    className?: string;
-}
-/** ListBox's props. `value`, `defaultValue` and `onChange` take a string in single mode and an array in multiple mode. */
-export interface ListBoxProps extends ListBoxModeProps<ListBoxSelectionMode> {
-}
+import { type ReactElement, type RefAttributes } from "react";
+import type { ListBoxModeProps, ListBoxSelectionMode } from "./ListBox.types.js";
+export type { ListBoxGroup, ListBoxItem, ListBoxModeProps, ListBoxOption, ListBoxProps, ListBoxSelectionMode } from "./ListBox.types.js";
 /**
  * Select's list of options on its own: a choice that stays on the page. `selectionMode="multiple"` makes `value` an array.
  */

package/dist/components/ListBox/ListBox.types.d.cts

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import type { SelectOption } from "../Select/Select.cjs";
+/** An option, shaped like Select's, with an optional icon. */
+export interface ListBoxOption extends SelectOption {
+    /** A 16px icon between the checkmark and the label. */
+    icon?: ReactNode;
+    /** Plain text for type-to-find, when `label` isn't a string. */
+    textValue?: string;
+}
+/** Options under a heading, like a Select's groups. */
+export interface ListBoxGroup {
+    /** The heading, shown in uppercase above the options and read out as the group's name. */
+    label: string;
+    options: ListBoxOption[];
+}
+export type ListBoxItem = ListBoxOption | ListBoxGroup;
+export type ListBoxSelectionMode = "single" | "multiple";
+/** ListBox's props for one selection mode: `value` is a string in single mode and an array in multiple mode. */
+export interface ListBoxModeProps<Mode extends ListBoxSelectionMode> {
+    /** The options, and groups of options under a heading. */
+    options: ListBoxItem[];
+    /** `single` chooses one option; `multiple` any number.
+     * @default "single" */
+    selectionMode?: Mode;
+    /** The selected option's value in single mode ("" for none), or the selected values in multiple mode. */
+    value?: Mode extends "multiple" ? string[] : string;
+    /** The starting value when uncontrolled.
+     * @default "" or [] */
+    defaultValue?: Mode extends "multiple" ? string[] : string;
+    /** Called with the new value: a string in single mode, the selected values in the options' order in multiple mode. */
+    onChange?(value: Mode extends "multiple" ? string[] : string): void;
+    /** Keeps at least one option selected: choosing the selected option again doesn't clear it.
+     * @default false */
+    disallowEmptySelection?: boolean;
+    /** Shown in the list when there are no options.
+     * @default "No options" */
+    emptyMessage?: ReactNode;
+    /** Scrolls the options past this height, e.g. 240 or "40vh". */
+    maxHeight?: number | string;
+    /** md rows are 36px; sm rows are 32px with 12px text, like a small Select's list.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Shows the list as wrong: a red border, and a red halo when focused. Also sets aria-invalid. Field passes it.
+     * @default false */
+    isInvalid?: boolean;
+    /** The options can be moved through and read, but the selection can't change.
+     * @default false */
+    isReadOnly?: boolean;
+    /** Fades the list and takes it out of the tab order.
+     * @default false */
+    disabled?: boolean;
+    id?: string;
+    /** Names the list for screen readers when it isn't in a Field. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+}
+/** ListBox's props. `value`, `defaultValue` and `onChange` take a string in single mode and an array in multiple mode. */
+export interface ListBoxProps extends ListBoxModeProps<ListBoxSelectionMode> {
+}

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

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import type { SelectOption } from "../Select/Select.js";
+/** An option, shaped like Select's, with an optional icon. */
+export interface ListBoxOption extends SelectOption {
+    /** A 16px icon between the checkmark and the label. */
+    icon?: ReactNode;
+    /** Plain text for type-to-find, when `label` isn't a string. */
+    textValue?: string;
+}
+/** Options under a heading, like a Select's groups. */
+export interface ListBoxGroup {
+    /** The heading, shown in uppercase above the options and read out as the group's name. */
+    label: string;
+    options: ListBoxOption[];
+}
+export type ListBoxItem = ListBoxOption | ListBoxGroup;
+export type ListBoxSelectionMode = "single" | "multiple";
+/** ListBox's props for one selection mode: `value` is a string in single mode and an array in multiple mode. */
+export interface ListBoxModeProps<Mode extends ListBoxSelectionMode> {
+    /** The options, and groups of options under a heading. */
+    options: ListBoxItem[];
+    /** `single` chooses one option; `multiple` any number.
+     * @default "single" */
+    selectionMode?: Mode;
+    /** The selected option's value in single mode ("" for none), or the selected values in multiple mode. */
+    value?: Mode extends "multiple" ? string[] : string;
+    /** The starting value when uncontrolled.
+     * @default "" or [] */
+    defaultValue?: Mode extends "multiple" ? string[] : string;
+    /** Called with the new value: a string in single mode, the selected values in the options' order in multiple mode. */
+    onChange?(value: Mode extends "multiple" ? string[] : string): void;
+    /** Keeps at least one option selected: choosing the selected option again doesn't clear it.
+     * @default false */
+    disallowEmptySelection?: boolean;
+    /** Shown in the list when there are no options.
+     * @default "No options" */
+    emptyMessage?: ReactNode;
+    /** Scrolls the options past this height, e.g. 240 or "40vh". */
+    maxHeight?: number | string;
+    /** md rows are 36px; sm rows are 32px with 12px text, like a small Select's list.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Shows the list as wrong: a red border, and a red halo when focused. Also sets aria-invalid. Field passes it.
+     * @default false */
+    isInvalid?: boolean;
+    /** The options can be moved through and read, but the selection can't change.
+     * @default false */
+    isReadOnly?: boolean;
+    /** Fades the list and takes it out of the tab order.
+     * @default false */
+    disabled?: boolean;
+    id?: string;
+    /** Names the list for screen readers when it isn't in a Field. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+}
+/** ListBox's props. `value`, `defaultValue` and `onChange` take a string in single mode and an array in multiple mode. */
+export interface ListBoxProps extends ListBoxModeProps<ListBoxSelectionMode> {
+}

package/dist/components/Prose/Prose.d.cts

@@ -1,19 +1,5 @@
-import { type HTMLAttributes, type ReactNode } from "react";
-export interface ProseProps extends HTMLAttributes<HTMLElement> {
-    /** sm sets 14px interface text with a tight rhythm and modest headings, for chat answers and comments. md sets the prose
-     * style (16.5px, 1.7 leading) with headings from the type scale, for articles and docs.
-     * @default "md" */
-    size?: "sm" | "md";
-    /** Drops the readable width (about 68 characters a line at md) so the text runs the full width of its container. sm has no
-     * maximum width to drop.
-     * @default false */
-    fullWidth?: boolean;
-    /** The element: article for a post, section for part of a page.
-     * @default "div" */
-    as?: "div" | "article" | "section" | "main" | "aside";
-    /** Plain HTML elements to style: what a Markdown renderer, a CMS or a server gives back. */
-    children?: ReactNode;
-}
+import type { ProseProps } from "./Prose.types.cjs";
+export type { ProseProps } from "./Prose.types.cjs";
 /**
  * Styles content you don't write element by element: Markdown rendered to HTML, a CMS body, an agent's answer. It sets
  * the plain elements inside it (headings, paragraphs, lists, quotes, code, tables, images, details) in Openware's type

package/dist/components/Prose/Prose.d.ts

@@ -1,19 +1,5 @@
-import { type HTMLAttributes, type ReactNode } from "react";
-export interface ProseProps extends HTMLAttributes<HTMLElement> {
-    /** sm sets 14px interface text with a tight rhythm and modest headings, for chat answers and comments. md sets the prose
-     * style (16.5px, 1.7 leading) with headings from the type scale, for articles and docs.
-     * @default "md" */
-    size?: "sm" | "md";
-    /** Drops the readable width (about 68 characters a line at md) so the text runs the full width of its container. sm has no
-     * maximum width to drop.
-     * @default false */
-    fullWidth?: boolean;
-    /** The element: article for a post, section for part of a page.
-     * @default "div" */
-    as?: "div" | "article" | "section" | "main" | "aside";
-    /** Plain HTML elements to style: what a Markdown renderer, a CMS or a server gives back. */
-    children?: ReactNode;
-}
+import type { ProseProps } from "./Prose.types.js";
+export type { ProseProps } from "./Prose.types.js";
 /**
  * Styles content you don't write element by element: Markdown rendered to HTML, a CMS body, an agent's answer. It sets
  * the plain elements inside it (headings, paragraphs, lists, quotes, code, tables, images, details) in Openware's type

package/dist/components/Prose/Prose.types.d.cts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface ProseProps extends HTMLAttributes<HTMLElement> {
+    /** sm sets 14px interface text with a tight rhythm and modest headings, for chat answers and comments. md sets the prose
+     * style (16.5px, 1.7 leading) with headings from the type scale, for articles and docs.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Drops the readable width (about 68 characters a line at md) so the text runs the full width of its container. sm has no
+     * maximum width to drop.
+     * @default false */
+    fullWidth?: boolean;
+    /** The element: article for a post, section for part of a page.
+     * @default "div" */
+    as?: "div" | "article" | "section" | "main" | "aside";
+    /** Plain HTML elements to style: what a Markdown renderer, a CMS or a server gives back. */
+    children?: ReactNode;
+}

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

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface ProseProps extends HTMLAttributes<HTMLElement> {
+    /** sm sets 14px interface text with a tight rhythm and modest headings, for chat answers and comments. md sets the prose
+     * style (16.5px, 1.7 leading) with headings from the type scale, for articles and docs.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Drops the readable width (about 68 characters a line at md) so the text runs the full width of its container. sm has no
+     * maximum width to drop.
+     * @default false */
+    fullWidth?: boolean;
+    /** The element: article for a post, section for part of a page.
+     * @default "div" */
+    as?: "div" | "article" | "section" | "main" | "aside";
+    /** Plain HTML elements to style: what a Markdown renderer, a CMS or a server gives back. */
+    children?: ReactNode;
+}

package/dist/components/Section/Section.d.cts

@@ -0,0 +1,7 @@
+import type { SectionProps } from "./Section.types.cjs";
+export type { SectionProps } from "./Section.types.cjs";
+/**
+ * A full-width band of a page, with the blocks' space above and below and their width and side margins inside (a
+ * Container). Your own sections then sit in line with the blocks around them.
+ */
+export declare function Section({ tone, spacing, size, as: Element, className, children, ...props }: SectionProps): import("react").JSX.Element;

package/dist/components/Section/Section.d.ts

@@ -0,0 +1,7 @@
+import type { SectionProps } from "./Section.types.js";
+export type { SectionProps } from "./Section.types.js";
+/**
+ * A full-width band of a page, with the blocks' space above and below and their width and side margins inside (a
+ * Container). Your own sections then sit in line with the blocks around them.
+ */
+export declare function Section({ tone, spacing, size, as: Element, className, children, ...props }: SectionProps): import("react").JSX.Element;

package/dist/components/Section/Section.types.d.cts

@@ -0,0 +1,16 @@
+import type { ElementType, HTMLAttributes } from "react";
+import type { ContainerSize } from "../Container/Container.types.cjs";
+export interface SectionProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The band's ground: `paper` for marketing pages, as the blocks use; `canvas` for the app's grey; `surface` for a
+     * white band that stands out from the paper; `none` to show what's behind it.
+     * @default "paper"
+     */
+    tone?: "paper" | "canvas" | "surface" | "none";
+    /** The space above and below: `md` is a block's (96px, 72px on phones), `sm` half that. @default "md" */
+    spacing?: "sm" | "md" | "none";
+    /** How wide the content inside can get, as for Container. `false` leaves the content full width, without one. @default "page" */
+    size?: ContainerSize | false;
+    /** The element to render. @default "section" */
+    as?: ElementType;
+}

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

@@ -0,0 +1,16 @@
+import type { ElementType, HTMLAttributes } from "react";
+import type { ContainerSize } from "../Container/Container.types.js";
+export interface SectionProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The band's ground: `paper` for marketing pages, as the blocks use; `canvas` for the app's grey; `surface` for a
+     * white band that stands out from the paper; `none` to show what's behind it.
+     * @default "paper"
+     */
+    tone?: "paper" | "canvas" | "surface" | "none";
+    /** The space above and below: `md` is a block's (96px, 72px on phones), `sm` half that. @default "md" */
+    spacing?: "sm" | "md" | "none";
+    /** How wide the content inside can get, as for Container. `false` leaves the content full width, without one. @default "page" */
+    size?: ContainerSize | false;
+    /** The element to render. @default "section" */
+    as?: ElementType;
+}

package/dist/components.css

@@ -1221,7 +1221,14 @@
 }
 
 .ow-date-field__segment {
+    /* At least 24px each way, the smallest a pointer target may be (WCAG 2.2, 2.5.8). */
+    box-sizing: border-box;
+    display: inline-flex;
+    min-width: 24px;
+    min-height: 24px;
     flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
     border-radius: var(--ow-radius-sm);
     padding: 2px;
     color: var(--ow-text);
@@ -1233,6 +1240,11 @@
     transition-timing-function: var(--ow-ease-standard);
 }
 
+.ow-date-field__segment[data-segment="0"] {
+    /* The first, often one digit ("6:12"), keeps to the separator after it; the spare width goes before it. */
+    justify-content: flex-end;
+}
+
 .ow-date-field__segment::selection {
     background: transparent;
 }
@@ -5080,6 +5092,10 @@
     line-height: 1;
 }
 
+.ow-avatar[data-initials]::before {
+    content: attr(data-initials);
+}
+
 .ow-avatar--empty {
     background: var(--ow-avatar-empty);
     color: var(--ow-on-avatar-empty);
@@ -6192,6 +6208,73 @@
     outline-offset: 2px;
 }
 
+/* components/Container/Container.css */
+/* The page's width and side margins, the same as every block's: the content is at most the size's width, inside a
+   32px gutter (the phone gutter under 760px). */
+
+.ow-container {
+    box-sizing: border-box;
+    width: 100%;
+    margin-inline: auto;
+    padding-inline: var(--ow-page-gutter-wide);
+}
+
+.ow-container--page {
+    max-width: calc(var(--ow-page-max) + 2 * var(--ow-page-gutter-wide));
+}
+
+.ow-container--narrow {
+    max-width: calc(var(--ow-page-narrow) + 2 * var(--ow-page-gutter-wide));
+}
+
+.ow-container--wide {
+    max-width: calc(var(--ow-page-wide) + 2 * var(--ow-page-gutter-wide));
+}
+
+@media (max-width: 760px) {
+    .ow-container {
+        padding-inline: var(--ow-page-gutter);
+    }
+}
+
+/* components/Section/Section.css */
+/* A band of the page: a block's vertical space and ground, full width. Its Container sets the width inside. */
+
+.ow-section {
+    box-sizing: border-box;
+    width: 100%;
+    color: var(--ow-text);
+}
+
+.ow-section--paper {
+    background: var(--ow-paper);
+}
+
+.ow-section--canvas {
+    background: var(--ow-canvas);
+}
+
+.ow-section--surface {
+    background: var(--ow-surface);
+}
+
+.ow-section--space-md {
+    padding-block: var(--ow-section-y);
+}
+
+.ow-section--space-sm {
+    padding-block: calc(var(--ow-section-y) / 2);
+}
+
+@media (max-width: 760px) {
+    .ow-section--space-md {
+        padding-block: 72px;
+    }
+    .ow-section--space-sm {
+        padding-block: 36px;
+    }
+}
+
 /* components/Marketing/Marketing.css */
 /* Marketing patterns from the site: Chip, SectionHeading, SiteHeader and the dot grid. */
 .ow-chip {