@openwarelabs/ui 0.10.0 → 0.10.1

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.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);

package/dist/index.cjs

@@ -3431,7 +3431,7 @@ function ListBoxWithRef({
     );
   };
   const isEmpty = flat.length === 0;
-  const describedBy = [ariaDescribedBy, isEmpty ? emptyId : void 0].filter(Boolean).join(" ") || void 0;
+  const describedBy = ariaDescribedBy;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
@@ -3474,7 +3474,10 @@ function ListBoxWithRef({
             item.options.map(renderOption)
           ] }, `group-${item.label}-${groupIndex}`) : renderOption(item)
         ),
-        isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { id: emptyId, className: "ow-listbox__empty", role: "presentation", children: emptyMessage }) : null
+        isEmpty ? (
+          // A listbox holds options, so an empty one says so with one that can't be chosen.
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { id: emptyId, className: "ow-listbox__empty", role: "option", "aria-disabled": "true", "aria-selected": "false", children: emptyMessage })
+        ) : null
       ]
     }
   );
@@ -4235,9 +4238,9 @@ var DatePicker = /* @__PURE__ */ (0, import_react32.forwardRef)(function DatePic
         "aria-haspopup": "dialog",
         "aria-expanded": isOpen,
         "aria-controls": isOpen ? panelId : void 0,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": [`${panelId}-value`, ariaDescribedBy].filter(Boolean).join(" "),
+        "aria-label": ariaLabel && !ariaLabelledBy ? `${ariaLabel}, ${label}` : void 0,
+        "aria-labelledby": ariaLabelledBy ? `${ariaLabelledBy} ${panelId}-value` : void 0,
+        "aria-describedby": ariaDescribedBy,
         "aria-invalid": isInvalid || void 0,
         disabled,
         className: cx(
@@ -4540,9 +4543,9 @@ var DateRangePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(function Da
               "aria-haspopup": "dialog",
               "aria-expanded": isOpen,
               "aria-controls": isOpen ? panelId : void 0,
-              "aria-label": ariaLabel,
-              "aria-labelledby": ariaLabelledBy,
-              "aria-describedby": [`${panelId}-value`, ariaDescribedBy].filter(Boolean).join(" "),
+              "aria-label": ariaLabel && !ariaLabelledBy ? `${ariaLabel}, ${label}` : void 0,
+              "aria-labelledby": ariaLabelledBy ? `${ariaLabelledBy} ${panelId}-value` : void 0,
+              "aria-describedby": ariaDescribedBy,
               "aria-invalid": isInvalid || void 0,
               disabled,
               className: cx("ow-select", "ow-date-range-picker__trigger", `ow-select--${size2}`, {
@@ -6256,7 +6259,8 @@ function Avatar({ name, src, size: size2 = "md", label, className }) {
       className: cx("ow-avatar", sizing.className, !initials && !showImage && "ow-avatar--empty", className),
       style: sizing.style,
       ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
-      children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials || /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
+      "data-initials": !showImage && initials ? initials : void 0,
+      children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
     }
   );
 }
@@ -6484,10 +6488,27 @@ var import_react57 = require("react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var Prose = /* @__PURE__ */ (0, import_react57.forwardRef)(function Prose2({ size: size2 = "md", fullWidth = false, as = "div", className, children, ...props }, ref) {
   const Element2 = as;
+  const root = (0, import_react57.useRef)(null);
+  (0, import_react57.useEffect)(() => {
+    const element = root.current;
+    if (!element) return;
+    for (const scroller of element.querySelectorAll("pre, .ow-table-wrap")) {
+      if (scroller.scrollWidth > scroller.clientWidth && !scroller.hasAttribute("tabindex")) scroller.tabIndex = 0;
+    }
+    for (const box of element.querySelectorAll('li > input[type="checkbox"], li > p > input[type="checkbox"]')) {
+      if (box.labels?.length || box.hasAttribute("aria-label") || box.hasAttribute("aria-labelledby")) continue;
+      const text = box.closest("li")?.textContent?.trim();
+      if (text) box.setAttribute("aria-label", text);
+    }
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     Element2,
     {
-      ref,
+      ref: (node) => {
+        root.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
       className: cx("ow-prose", `ow-prose--${size2}`, size2 === "md" ? "ow-type-prose" : "ow-type-copy", fullWidth && "ow-prose--full", className),
       ...props,
       children
@@ -8065,9 +8086,9 @@ var ColorField = /* @__PURE__ */ (0, import_react65.forwardRef)(function ColorFi
         "aria-haspopup": "dialog",
         "aria-expanded": isOpen,
         "aria-controls": isOpen ? panelId : void 0,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": [`${panelId}-value`, ariaDescribedBy].filter(Boolean).join(" "),
+        "aria-label": ariaLabel && !ariaLabelledBy ? `${ariaLabel}, ${color.toUpperCase()}` : void 0,
+        "aria-labelledby": ariaLabelledBy ? `${ariaLabelledBy} ${panelId}-value` : void 0,
+        "aria-describedby": ariaDescribedBy,
         "aria-invalid": isInvalid || void 0,
         disabled,
         className: cx(