@sincpro/web-ui 1.6.0 → 1.7.1

package/dist/foundations/copy.d.ts

@@ -122,6 +122,22 @@ export type UiCopy = {
         none: string;
         /** Next to the label of a field whose value changed and is not saved yet. */
         changed: string;
+        /** The eye button of a password: show it… */
+        showSecret: string;
+        /** …and hide it again. */
+        hideSecret: string;
+        /** Under a password while Caps Lock is on: the most common reason a right password fails. */
+        capsLock: string;
+        /** What a stored password says in read mode, for a screen reader: there is one, not which. */
+        secretSet: string;
+        /** Said after a link that leaves for another tab — a website, WhatsApp. */
+        newTab: string;
+        /** The unit after a duration: «8:30 h». */
+        hours: string;
+        /** The name of the unit (or currency) chooser inside a number field. */
+        unit: string;
+        /** The row of colours a colour field offers. */
+        palette: string;
     };
     /** The choice controls: combo boxes, selects, suggestion lists. */
     choice: {
@@ -343,6 +359,32 @@ export type UiCopy = {
         /** A field with nothing in it: said, not a silent success. */
         empty: string;
     };
+    /** The rich-text editor: its toolbar, its link form, its list of people to mention. */
+    richText: {
+        toolbar: string;
+        bold: string;
+        italic: string;
+        underline: string;
+        strike: string;
+        heading: string;
+        subheading: string;
+        bulletList: string;
+        orderedList: string;
+        quote: string;
+        link: string;
+        linkUrl: string;
+        applyLink: string;
+        removeLink: string;
+        /** Said when the address is not a website, an email or a phone: what to write instead. */
+        badLink: string;
+        table: string;
+        undo: string;
+        redo: string;
+        clear: string;
+        /** The list that opens on «@»: people to mention. */
+        mentions: string;
+        noMatches: string;
+    };
     /** Ordenar, cuando la presentación no tiene encabezados donde hacer clic. */
     sorting: {
         label: string;
@@ -350,6 +392,24 @@ export type UiCopy = {
         asc: string;
         desc: string;
         clear: string;
+        /** On a sortable header: how to add it as a tie-breaker instead of replacing the order. */
+        addHint: string;
+        /** What a tie-breaker header says of itself: «sort 2, descending». */
+        place: string;
+        /** Adds one more criterion at the end of the order. */
+        add: string;
+        /** Where the criteria are listed when there are none: the rows go as they came. */
+        none: string;
+        /** The direction button of a criterion, named by its field. */
+        flip: string;
+        /** Takes one criterion out, named by its field. */
+        remove: string;
+        /** The handle a criterion is dragged by, named by its field. */
+        move: string;
+        /** The trigger with more than one criterion: «Fecha +2». */
+        more: string;
+        /** The second and later criteria: they only decide between rows the first leaves equal. */
+        then: string;
     };
     /** Los recortes de fecha RELATIVOS. Las unidades van en singular y plural
      *  porque «1 mes» y «3 meses» no se resuelven con una `s` en todos los
@@ -470,6 +530,26 @@ export type UiCopy = {
         finish: string;
         busy: string;
     };
+    /** A multi-step operation done in one sitting (`StepFlow`): where you are, what is left,
+     *  and its own buttons. */
+    stepFlow: {
+        /** The accessible name of the strip of steps. */
+        steps: string;
+        /** Over the step's title: «Step 2 of 3». */
+        position: string;
+        /** Read by the live region on every move: `{position}` is the line above, `{title}`
+         *  the step's. */
+        announce: string;
+        /** The state of a step on the strip, said to a screen reader — never only a colour. */
+        done: string;
+        pending: string;
+        cancel: string;
+        back: string;
+        next: string;
+        finish: string;
+        /** Read by the live region while the operation runs. */
+        working: string;
+    };
     report: {
         open: string;
         close: string;
@@ -701,6 +781,28 @@ export type UiCopy = {
         /** The accessible name of an editable cell. `{column}` is the column's header. */
         editCell: string;
     };
+    /** The files of a record (`Attachments`): listing, adding, removing and their states. */
+    attachments: {
+        /** The accessible name of the list. */
+        label: string;
+        /** An empty list in read mode. */
+        empty: string;
+        /** The drop zone's sentence when there is no file yet… */
+        emptyAdd: string;
+        /** …and when there already are some. */
+        add: string;
+        download: string;
+        remove: string;
+        /** The notice after removing. `{name}` is the file. */
+        removed: string;
+        undo: string;
+        /** The name of an upload's progress bar. `{name}` is the file. */
+        uploading: string;
+        cancelUpload: string;
+        /** A failed upload, when the server did not say why. */
+        failed: string;
+        retry: string;
+    };
     /** The theme switch: the three choices an app offers for the palette. */
     theme: {
         /** The name of the control — what a screen reader says for the group. */
@@ -763,6 +865,35 @@ export type UiCopy = {
         /** A value that was empty before the change. */
         empty: string;
     };
+    /** The media controls: an image chosen and cropped (`ImageInput`), a signature drawn or
+     *  typed (`SignatureInput`). */
+    media: {
+        /** What the empty image zone says. */
+        dropImage: string;
+        chooseImage: string;
+        changeImage: string;
+        removeImage: string;
+        /** A file that is not an image: what to choose instead. */
+        notImage: string;
+        /** The name of the crop area, and how it is moved from the keyboard. */
+        crop: string;
+        cropHelp: string;
+        zoomIn: string;
+        zoomOut: string;
+        applyCrop: string;
+        cancel: string;
+        /** The name of the drawing pad, and what to do there. */
+        signaturePad: string;
+        signatureHelp: string;
+        clear: string;
+        /** The way in for whoever cannot draw: type the name, and it is written as the signature. */
+        typeName: string;
+        drawInstead: string;
+        /** The label of the box the name is typed in. */
+        typedName: string;
+        /** The image of a signature, when the form does not say whose it is. */
+        signature: string;
+    };
 };
 export declare const ENGLISH_COPY: UiCopy;
 /** What changes of web-ui's words, at any depth: `{ search: { joins: { any: "o" } } }`. */

package/dist/foundations/copy.es.js

@@ -110,6 +110,14 @@ export const SPANISH_COPY = {
         unset: "sin definir",
         none: "Ninguna",
         changed: "modificado",
+        showSecret: "Mostrar contraseña",
+        hideSecret: "Ocultar contraseña",
+        capsLock: "Bloq Mayús está activado",
+        secretSet: "contraseña establecida",
+        newTab: "se abre en otra pestaña",
+        hours: "h",
+        unit: "Unidad",
+        palette: "Paleta",
     },
     choice: {
         noResults: "Sin resultados",
@@ -260,12 +268,44 @@ export const SPANISH_COPY = {
         field: "Copiar «{label}»",
         empty: "No hay nada que copiar",
     },
+    richText: {
+        toolbar: "Formato del texto",
+        bold: "Negrita",
+        italic: "Cursiva",
+        underline: "Subrayado",
+        strike: "Tachado",
+        heading: "Título",
+        subheading: "Subtítulo",
+        bulletList: "Lista con viñetas",
+        orderedList: "Lista numerada",
+        quote: "Cita",
+        link: "Enlace",
+        linkUrl: "Dirección del enlace",
+        applyLink: "Aplicar",
+        removeLink: "Quitar enlace",
+        badLink: "Escribí una web (empresa.bo), un correo o un teléfono.",
+        table: "Insertar tabla",
+        undo: "Deshacer",
+        redo: "Rehacer",
+        clear: "Quitar formato",
+        mentions: "Personas",
+        noMatches: "No coincide nadie",
+    },
     sorting: {
         label: "Ordenar",
         by: "ordenar por",
         asc: "ascendente",
         desc: "descendente",
         clear: "sin orden",
+        addHint: "Mayús+clic para agregarla como desempate",
+        place: "orden {place}, {direction}",
+        add: "Agregar criterio",
+        none: "Sin orden: las filas van como llegaron.",
+        flip: "Invertir el orden por {field}",
+        remove: "Quitar el orden por {field}",
+        move: "Mover el orden por {field}",
+        more: "{label} +{count}",
+        then: "luego por",
     },
     time: { justNow: "recién", invalid: "fecha inválida", noDate: "sin fecha" },
     calendar: {
@@ -324,6 +364,18 @@ export const SPANISH_COPY = {
         finish: "Terminar",
         busy: "Procesando…",
     },
+    stepFlow: {
+        steps: "Pasos",
+        position: "Paso {index} de {total}",
+        announce: "{position}: {title}",
+        done: "hecho",
+        pending: "pendiente",
+        cancel: "Cancelar",
+        back: "Atrás",
+        next: "Siguiente",
+        finish: "Terminar",
+        working: "Procesando…",
+    },
     report: { open: "Abrir {name}", close: "Cerrar {name}", concept: "Concepto" },
     builder: {
         filter: "Filtro",
@@ -478,6 +530,20 @@ export const SPANISH_COPY = {
         createTag: "Crear «{name}»",
         editCell: "Editar {column}",
     },
+    attachments: {
+        label: "Adjuntos",
+        empty: "Todavía no hay archivos adjuntos.",
+        emptyAdd: "Todavía no hay archivos adjuntos. Soltá uno acá o elegilo.",
+        add: "Soltá otro archivo acá o elegilo.",
+        download: "Descargar",
+        remove: "Quitar el archivo",
+        removed: "Se quitó «{name}».",
+        undo: "Deshacer",
+        uploading: "Subiendo {name}",
+        cancelUpload: "Cancelar la subida",
+        failed: "No se pudo subir el archivo.",
+        retry: "Reintentar",
+    },
     theme: {
         label: "Tema",
         system: "Sistema",
@@ -517,4 +583,24 @@ export const SPANISH_COPY = {
         to: "a",
         empty: "vacío",
     },
+    media: {
+        dropImage: "Soltá una imagen acá, pegala o elegila.",
+        chooseImage: "Elegir imagen",
+        changeImage: "Cambiar imagen",
+        removeImage: "Quitar imagen",
+        notImage: "El archivo no es una imagen. Elegí un PNG, JPG o WebP.",
+        crop: "Recorte de la imagen",
+        cropHelp: "Arrastrá la imagen o movela con las flechas; + y − acercan y alejan.",
+        zoomIn: "Acercar",
+        zoomOut: "Alejar",
+        applyCrop: "Aplicar recorte",
+        cancel: "Cancelar",
+        signaturePad: "Área de firma",
+        signatureHelp: "Firmá con el mouse o con el dedo sobre la línea.",
+        clear: "Limpiar",
+        typeName: "Escribir mi nombre",
+        drawInstead: "Dibujar la firma",
+        typedName: "Nombre para la firma",
+        signature: "Firma",
+    },
 };

package/dist/foundations/copy.js

@@ -86,6 +86,14 @@ export const ENGLISH_COPY = {
         unset: "not set",
         none: "None",
         changed: "changed",
+        showSecret: "Show password",
+        hideSecret: "Hide password",
+        capsLock: "Caps Lock is on",
+        secretSet: "password set",
+        newTab: "opens in a new tab",
+        hours: "h",
+        unit: "Unit",
+        palette: "Palette",
     },
     choice: {
         noResults: "No results",
@@ -208,12 +216,44 @@ export const ENGLISH_COPY = {
         field: "Copy «{label}»",
         empty: "Nothing to copy",
     },
+    richText: {
+        toolbar: "Text formatting",
+        bold: "Bold",
+        italic: "Italic",
+        underline: "Underline",
+        strike: "Strikethrough",
+        heading: "Heading",
+        subheading: "Subheading",
+        bulletList: "Bulleted list",
+        orderedList: "Numbered list",
+        quote: "Quote",
+        link: "Link",
+        linkUrl: "Link address",
+        applyLink: "Apply",
+        removeLink: "Remove link",
+        badLink: "Write a website (example.com), an email or a phone number.",
+        table: "Insert table",
+        undo: "Undo",
+        redo: "Redo",
+        clear: "Clear formatting",
+        mentions: "People",
+        noMatches: "Nobody matches",
+    },
     sorting: {
         label: "Sort",
         by: "sort by",
         asc: "ascending",
         desc: "descending",
         clear: "no order",
+        addHint: "Shift+click to add as a tie-breaker",
+        place: "sort {place}, {direction}",
+        add: "Add a criterion",
+        none: "No order: the rows go as they came.",
+        flip: "Flip the order by {field}",
+        remove: "Remove the order by {field}",
+        move: "Move the order by {field}",
+        more: "{label} +{count}",
+        then: "then by",
     },
     dates: {
         last: "last {count} {unit}",
@@ -310,6 +350,18 @@ export const ENGLISH_COPY = {
         finish: "Finish",
         busy: "Working…",
     },
+    stepFlow: {
+        steps: "Steps",
+        position: "Step {index} of {total}",
+        announce: "{position}: {title}",
+        done: "done",
+        pending: "to do",
+        cancel: "Cancel",
+        back: "Back",
+        next: "Next",
+        finish: "Finish",
+        working: "Working…",
+    },
     report: {
         open: "Open {name}",
         close: "Close {name}",
@@ -473,6 +525,20 @@ export const ENGLISH_COPY = {
         createTag: "Create «{name}»",
         editCell: "Edit {column}",
     },
+    attachments: {
+        label: "Attachments",
+        empty: "No files attached yet.",
+        emptyAdd: "No files attached yet. Drop one here, or choose it.",
+        add: "Drop another file here, or choose one.",
+        download: "Download",
+        remove: "Remove the file",
+        removed: "Removed «{name}».",
+        undo: "Undo",
+        uploading: "Uploading {name}",
+        cancelUpload: "Cancel the upload",
+        failed: "The file could not be uploaded.",
+        retry: "Try again",
+    },
     theme: {
         label: "Theme",
         system: "System",
@@ -512,6 +578,26 @@ export const ENGLISH_COPY = {
         to: "to",
         empty: "empty",
     },
+    media: {
+        dropImage: "Drop an image here, paste it, or choose one.",
+        chooseImage: "Choose image",
+        changeImage: "Change image",
+        removeImage: "Remove image",
+        notImage: "That file is not an image. Choose a PNG, JPG or WebP.",
+        crop: "Image crop",
+        cropHelp: "Drag the image, or move it with the arrow keys; + and − zoom in and out.",
+        zoomIn: "Zoom in",
+        zoomOut: "Zoom out",
+        applyCrop: "Apply crop",
+        cancel: "Cancel",
+        signaturePad: "Signature pad",
+        signatureHelp: "Sign with the mouse or a finger over the line.",
+        clear: "Clear",
+        typeName: "Type my name instead",
+        drawInstead: "Draw the signature",
+        typedName: "Name for the signature",
+        signature: "Signature",
+    },
 };
 /* The mechanism is `catalog.tsx`, the same one an application uses for its own words. */
 const ui = createCopy(ENGLISH_COPY);

package/dist/foundations/form.d.ts

@@ -34,6 +34,19 @@ export type ControlState = {
     invalid?: boolean;
 };
 export declare const ControlStateContext: import("react").Context<ControlState | null>;
+/**
+ * Where a `Field` stops reaching: what is inside belongs to no field.
+ *
+ * Context: a `Field` hands its id and its label to the control inside it through context —
+ * and context goes all the way down. An editable table placed inside a field (the lines of a
+ * one2many under its label) gave EVERY cell's control the field's id and `aria-labelledby`:
+ * forty inputs with the same id, all named «Líneas». A collection is many controls, each
+ * named by its column, so the tables put this around themselves; an application's own
+ * composite control does the same.
+ */
+export declare function FieldBoundary({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
 /** The ids of the enclosing `Field` — or, outside one, the state of the place the control
  *  sits in (a cell) — resolved against the control's own props. */
 export declare function useFieldIds(own: {
@@ -46,6 +59,18 @@ export declare function useFieldIds(own: {
     describedBy: string | undefined;
     invalid: boolean;
 };
+/**
+ * The `aria-label` a control puts on itself: none inside a `Field` — the field's label names
+ * it — and outside one the control's own, or as a last resort its placeholder (what a browser
+ * reads for a bare `<input placeholder>` anyway, so a control outside a form is never
+ * nameless).
+ *
+ * Context: a control inside a `Field` used to keep its `aria-label` too. With both, React Aria
+ * names the control by the label AND itself («Cliente Cliente», «Cantidad cantidad»), so the
+ * name was read twice. The field wins: an `aria-label` is for a control that has no label
+ * on screen — a table cell, a search box — and inside a field it is ignored.
+ */
+export declare function controlName(labelledBy: string | undefined, ariaLabel: string | undefined, fallback?: string): string | undefined;
 export type FormMode = "edit" | "read";
 export declare function FormModeProvider({ value, children, }: {
     value: FormMode;

package/dist/foundations/form.js

@@ -3,6 +3,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 export const FieldIdsContext = createContext(null);
 export const ControlStateContext = createContext(null);
+/**
+ * Where a `Field` stops reaching: what is inside belongs to no field.
+ *
+ * Context: a `Field` hands its id and its label to the control inside it through context —
+ * and context goes all the way down. An editable table placed inside a field (the lines of a
+ * one2many under its label) gave EVERY cell's control the field's id and `aria-labelledby`:
+ * forty inputs with the same id, all named «Líneas». A collection is many controls, each
+ * named by its column, so the tables put this around themselves; an application's own
+ * composite control does the same.
+ */
+export function FieldBoundary({ children }) {
+    return _jsx(FieldIdsContext.Provider, { value: null, children: children });
+}
 /** The ids of the enclosing `Field` — or, outside one, the state of the place the control
  *  sits in (a cell) — resolved against the control's own props. */
 export function useFieldIds(own) {
@@ -15,6 +28,20 @@ export function useFieldIds(own) {
         invalid: own.invalid ?? field?.invalid ?? place?.invalid ?? false,
     };
 }
+/**
+ * The `aria-label` a control puts on itself: none inside a `Field` — the field's label names
+ * it — and outside one the control's own, or as a last resort its placeholder (what a browser
+ * reads for a bare `<input placeholder>` anyway, so a control outside a form is never
+ * nameless).
+ *
+ * Context: a control inside a `Field` used to keep its `aria-label` too. With both, React Aria
+ * names the control by the label AND itself («Cliente Cliente», «Cantidad cantidad»), so the
+ * name was read twice. The field wins: an `aria-label` is for a control that has no label
+ * on screen — a table cell, a search box — and inside a field it is ignored.
+ */
+export function controlName(labelledBy, ariaLabel, fallback) {
+    return labelledBy === undefined ? (ariaLabel ?? fallback) : undefined;
+}
 const Ctx = createContext("edit");
 export function FormModeProvider({ value, children, }) {
     return _jsx(Ctx.Provider, { value: value, children: children });

package/dist/foundations/index.d.ts

@@ -1,7 +1,7 @@
 export { type CopyCatalog, type CopyOverride, createCopy, mergeCopyOver, } from "./catalog.js";
 export { currentCopy, currentCopyLocale, ENGLISH_COPY, fillCopy, installCopy, mergeCopy, type UiCopy, type UiCopyOverride, UiCopyProvider, useUiCopy, } from "./copy.js";
 export { byDensity, type Density, DensityProvider, useDensity, } from "./density.js";
-export { type FieldIds, type FormMode, FormModeProvider, useFieldIds, useFormMode, } from "./form.js";
+export { controlName, FieldBoundary, type FieldIds, type FormMode, FormModeProvider, useFieldIds, useFormMode, } from "./form.js";
 export { bySurface, SurfaceProvider, useSurface } from "./surface.js";
 export { applyTheme, isTheme, type ResolvedTheme, resolveTheme, type Theme, THEME_ATTRIBUTE, ThemeProvider, type ThemeProviderProps, THEMES, useTheme, } from "./theme.js";
 export type { OpenTarget, Size, Surface, Tone } from "./types.js";

package/dist/foundations/index.js

@@ -5,7 +5,7 @@ export { currentCopy, currentCopyLocale, ENGLISH_COPY, fillCopy, installCopy, me
 export { byDensity, DensityProvider, useDensity, } from "./density.js";
 /* EL CONTRATO DE UN CONTROL — los ids que le da su `Field` y si se mira o se escribe. Lo
    hablan los controles del paquete y los de la aplicación por igual. */
-export { FormModeProvider, useFieldIds, useFormMode, } from "./form.js";
+export { controlName, FieldBoundary, FormModeProvider, useFieldIds, useFormMode, } from "./form.js";
 /* EL TEMA — claro, oscuro o el del sistema operativo. Las paletas viven en `tokens.css`; esto
    sólo escribe `data-theme`. */
 export { bySurface, SurfaceProvider, useSurface } from "./surface.js";

package/dist/primitives/button/Button.js

@@ -195,7 +195,9 @@ const TONE = {
         chrome: "text-chrome-bad hover:bg-chrome-bad/12",
     },
 };
-const BOX = "inline-flex shrink-0 items-center justify-center rounded-pill transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+/* `aria-pressed` is a TOGGLE's state — bold on, a filter applied: it reads as the action
+   tint, the same as a chosen option, so «on» is seen and not only heard. */
+const BOX = "inline-flex shrink-0 items-center justify-center rounded-pill transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-pressed:bg-primary/12 aria-pressed:text-primary";
 const SQUARE = {
     sm: "size-(--size-control-sm)",
     md: "size-(--size-control-md)",

package/dist/primitives/choice/ComboBox.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { labelOf } from "./options.js";
 import { FieldButton, FieldGroup, listOptionStyles, } from "../field/aria.js";
@@ -48,7 +48,7 @@ function EditableComboBox({ value, onChange, options, placeholder, disabled = fa
         invalid: ownInvalid,
     });
     const { contains } = useFilter({ sensitivity: "base" });
-    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, 
+    return (_jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, 
         /* `defaultItems` and not `items`: with `items` React Aria hands the filtering to the
            consumer. These are the same options every render — only the filtering is React
            Aria's. */

package/dist/primitives/choice/SearchField.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { FieldButton, FieldGroup } from "../field/aria.js";
 import { Search, X } from "lucide-react";
 import { Input, SearchField as AriaSearchField } from "react-aria-components";
@@ -38,9 +38,6 @@ export function SearchField({ value, onChange, placeholder, onSubmit, disabled =
         describedBy: ownDescribedBy,
     });
     /* A `Field` names it through its label; anything else falls back so it always has one. */
-    const name = ariaLabel ??
-        (labelledBy === undefined
-            ? (nameFromPlaceholder(placeholder) ?? copy.choice.search)
-            : undefined);
+    const name = controlName(labelledBy, ariaLabel, nameFromPlaceholder(placeholder) ?? copy.choice.search);
     return (_jsx(AriaLocale, { children: _jsx(AriaSearchField, { id: id, "aria-labelledby": labelledBy, "aria-label": name, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), onSubmit: onSubmit, isDisabled: disabled, className: "group w-full min-w-0", children: _jsxs(FieldGroup, { children: [_jsx(Search, { "aria-hidden": true, className: "ml-2.5 size-(--size-icon-md) shrink-0 text-muted forced-colors:text-[ButtonText]", strokeWidth: 2 }), _jsx(Input, { placeholder: placeholder, className: "h-full min-w-0 flex-1 bg-transparent px-2 text-meta text-ink outline-0 placeholder:text-muted disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden" }), _jsx(FieldButton, { className: "mr-1 group-data-empty:invisible", children: _jsx(X, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }) }) }));
 }

package/dist/primitives/choice/SegmentedControl.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { tv } from "../../foundations/variants.js";
 import { labelOf } from "./options.js";
@@ -56,7 +56,7 @@ export function SegmentedControl({ value, onChange, options, size = "md", disabl
     const inForm = mode !== undefined || labelledBy !== undefined;
     if (inForm && formMode === "read")
         return _jsx(ReadValue, { value: labelOf(options, value) });
-    return (_jsx(ToggleButtonGroup, { "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, selectionMode: "single", 
+    return (_jsx(ToggleButtonGroup, { "aria-label": controlName(labelledBy, ariaLabel), "aria-labelledby": labelledBy, "aria-describedby": describedBy, selectionMode: "single", 
         /* Always one: a period switcher with nothing pressed shows a report of no period. */
         disallowEmptySelection: true, selectedKeys: [value], onSelectionChange: (keys) => {
             const [next] = keys;

package/dist/primitives/choice/Slider.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { tv } from "../../foundations/variants.js";
 import { ReadValue } from "../field/Field.js";
@@ -42,5 +42,5 @@ export function Slider({ value, onChange, min, max, step = 1, format, disabled =
     if (useFormMode(mode) === "read") {
         return _jsx(ReadValue, { value: new Intl.NumberFormat(copy.locale, format).format(value) });
     }
-    return (_jsx(AriaLocale, { children: _jsxs(AriaSlider, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), minValue: min, maxValue: max, step: step, formatOptions: format, isDisabled: disabled, className: "flex h-(--size-control-md) w-full min-w-0 items-center gap-3 disabled:opacity-45", children: [_jsxs(SliderTrack, { className: "relative flex h-(--size-control-md) min-w-0 flex-1 cursor-pointer items-center disabled:cursor-not-allowed", children: [_jsx("span", { className: "relative h-1 w-full rounded-pill bg-line-strong forced-colors:bg-[ButtonBorder]", children: _jsx(SliderFill, { className: "rounded-pill bg-primary disabled:bg-muted forced-colors:bg-[Highlight]" }) }), _jsx(SliderThumb, { "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, className: thumb })] }), output ? (_jsx(SliderOutput, { className: "w-14 shrink-0 text-right text-meta text-ink tabular-nums" })) : null] }) }));
+    return (_jsx(AriaLocale, { children: _jsxs(AriaSlider, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, value: value, onChange: (next) => onChange?.(next), minValue: min, maxValue: max, step: step, formatOptions: format, isDisabled: disabled, className: "flex h-(--size-control-md) w-full min-w-0 items-center gap-3 disabled:opacity-45", children: [_jsxs(SliderTrack, { className: "relative flex h-(--size-control-md) min-w-0 flex-1 cursor-pointer items-center disabled:cursor-not-allowed", children: [_jsx("span", { className: "relative h-1 w-full rounded-pill bg-line-strong forced-colors:bg-[ButtonBorder]", children: _jsx(SliderFill, { className: "rounded-pill bg-primary disabled:bg-muted forced-colors:bg-[Highlight]" }) }), _jsx(SliderThumb, { "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, className: thumb })] }), output ? (_jsx(SliderOutput, { className: "w-14 shrink-0 text-right text-meta text-ink tabular-nums" })) : null] }) }));
 }

package/dist/primitives/date/DatePicker.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DateFormatter, parseDate } from "@internationalized/date";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
-import { useFieldIds } from "../../foundations/form.js";
+import { controlName, useFieldIds } from "../../foundations/form.js";
 import { useFormMode } from "../../foundations/form.js";
 import { tv } from "../../foundations/variants.js";
 import { Calendar, RangeCalendar } from "./Calendar.js";
@@ -71,7 +71,7 @@ export function DateField({ value, onChange, id: ownId, describedBy: ownDescribe
     const read = useReadDate();
     if (useFormMode(mode) === "read")
         return _jsx(ReadValue, { value: read(value) });
-    return (_jsx(AriaLocale, { children: _jsx(AriaDateField, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: parse(value), onChange: (next) => onChange?.(next === null ? null : next.toString()), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: _jsx(FieldGroup, { children: _jsx(Segments, {}) }) }) }));
+    return (_jsx(AriaLocale, { children: _jsx(AriaDateField, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, value: parse(value), onChange: (next) => onChange?.(next === null ? null : next.toString()), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: _jsx(FieldGroup, { children: _jsx(Segments, {}) }) }) }));
 }
 /** A date typed by segments, or picked on a calendar from the button. */
 export function DatePicker({ value, onChange, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, min, max, mode, "aria-label": ariaLabel, }) {
@@ -83,7 +83,7 @@ export function DatePicker({ value, onChange, id: ownId, describedBy: ownDescrib
     const read = useReadDate();
     if (useFormMode(mode) === "read")
         return _jsx(ReadValue, { value: read(value) });
-    return (_jsx(AriaLocale, { children: _jsxs(AriaDatePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: parse(value), onChange: (next) => onChange?.(next === null ? null : next.toString()), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, {}), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(Calendar, {}) }) })] }) }));
+    return (_jsx(AriaLocale, { children: _jsxs(AriaDatePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, value: parse(value), onChange: (next) => onChange?.(next === null ? null : next.toString()), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, {}), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(Calendar, {}) }) })] }) }));
 }
 /** A span of days — a period of a report, the validity of a contract — typed or picked on
  *  two months at once. */
@@ -99,5 +99,5 @@ export function DateRangePicker({ value, onChange, id: ownId, describedBy: ownDe
     }
     const start = parse(value?.start);
     const end = parse(value?.end);
-    return (_jsx(AriaLocale, { children: _jsxs(AriaDateRangePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, value: start === null || end === null ? null : { start, end }, onChange: (next) => onChange?.(next === null ? null : { start: next.start.toString(), end: next.end.toString() }), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, { slot: "start" }), _jsx("span", { "aria-hidden": true, className: "text-muted", children: "\u2013" }), _jsx(Segments, { slot: "end" }), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(RangeCalendar, { months: 2 }) }) })] }) }));
+    return (_jsx(AriaLocale, { children: _jsxs(AriaDateRangePicker, { id: id, "aria-labelledby": labelledBy, "aria-label": controlName(labelledBy, ariaLabel), "aria-describedby": describedBy, value: start === null || end === null ? null : { start, end }, onChange: (next) => onChange?.(next === null ? null : { start: next.start.toString(), end: next.end.toString() }), minValue: parse(min) ?? undefined, maxValue: parse(max) ?? undefined, isInvalid: invalid, isDisabled: disabled, className: "w-full", children: [_jsxs(FieldGroup, { children: [_jsx(Segments, { slot: "start" }), _jsx("span", { "aria-hidden": true, className: "text-muted", children: "\u2013" }), _jsx(Segments, { slot: "end" }), _jsx(FieldButton, { className: "mr-1 ml-auto", children: _jsx(CalendarDays, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsx(Popover, { placement: "bottom end", children: _jsx(Dialog, { className: "p-3 outline-0", children: _jsx(RangeCalendar, { months: 2 }) }) })] }) }));
 }