@studiolxd/brand 49.19.0 → 49.20.0

package/CHANGELOG.md

@@ -7,6 +7,83 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
 regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
 para breaking changes.
 
+## [49.20.0] — 2026-10-04
+
+> **Minor.** `Autocomplete` y `AutocompleteField` (sugerencias con texto libre), tachado en `Text`, y `NumberInput`
+> con `commitMode` (avisar al terminar) y `compact` (para filas de lista), en React, SwiftUI y Compose donde hay
+> versión nativa. Arreglos: color del texto de las filas en Compose y pruebas estables. Todo opcional: sin las props
+> nuevas el HTML no cambia.
+
+### Arreglos previos a 49.20.0 (patch)
+
+- **Compose · `BrandListItem(text, subtitle)`** pintaba su texto con `BasicText(style = LocalBrandTextStyle.current)`, cuyo
+  color es `Unspecified` (negro de Compose): fuera de un `BrandList` salía oscuro sobre fondo oscuro. Ahora la fila fija
+  su propia tinta y tipografía (`text.list.*`, `ProvideBrandContent`), como `BrandList`, SwiftUI y React. `BrandSheet`,
+  `BrandEmptyState` y `BrandConfirmDialog` no tenían el fallo: pintan sus textos con tokens explícitos y `BrandText`
+  cae a la tinta del esquema. Captura nueva `listItemOutsideList` (claro y oscuro).
+- **Storybook · pruebas del Toast** («Test — tintas del aviso en claro/oscuro»): la prueba, no el componente, estaba mal.
+  Tras `toast.dismiss()` buscaba `.toast` y recogía el aviso anterior, aún montado mientras sale; al desmontarse
+  `getComputedStyle` devolvía `''` en fondo y tinta. Ahora localiza el aviso por su título y mide las tintas de una vez.
+- **Storybook · `test:stories`**: el proyecto `storybook` declara `testTimeout`/`hookTimeout` de 60 s. «Trigger de
+  icono» del `Menu` (una story solo de render) agotó los 20 s por carga de la máquina, sin fallo real.
+- **SwiftUI · captura `phrase-mismatch` en macOS** inestable: el `onAppear` daba el foco al campo de la frase y, según
+  llegara antes o después de la fotografía, salían el anillo de foco y el cursor. Las capturas ya no piden foco
+  (`autofocus: false` en el `init` interno con estado); el componente público lo sigue haciendo.
+  Las referencias de iOS de esa captura se regrabaron sin foco (antes llevaban el anillo).
+- **Compose · captura `NumberInputField` `compact`** desfasada (1 px de desplazamiento vertical respecto al render actual;
+  regrabada dos veces con bytes idénticos, así que es determinista): referencia actualizada.
+- **Compose · título de `BrandSheet`**: comparado con React y SwiftUI, los tres leen el mismo token
+  (`sheet.title-font-size` → `modal.title-font-size`, 32 px, peso 500): no hay diferencia y no se cambia nada.
+
+### NumberInput — confirmar al terminar, compacto y etiquetas tipadas (minor)
+
+Todo opcional y en las tres plataformas a la vez (React, SwiftUI y Compose): sin las props nuevas, el comportamiento y
+el HTML son los de 49.19.0 (pruebas en `NumberInput.test.tsx` y `NumberInputField.test.tsx`).
+
+- **`commitMode: 'change' | 'blur'`** (por defecto `'change'`). Con `'blur'`, lo escrito a mano se avisa **una sola
+  vez**, al salir del campo o con Enter (y solo si cambia el valor); Escape descarta lo escrito y vuelve al último
+  valor. Los botones − y + avisan al momento en los dos modos. Con `onEmpty`, vaciar y confirmar es «sin valor». Motivo:
+  una fila de lista donde cada aviso es una escritura en un servidor. Nativo: `commitMode: .blur` (SwiftUI, al perder el
+  foco o con «intro»; Escape con teclado físico) y `NumberInputCommitMode.Blur` (Compose, al perder el foco o «Hecho»).
+- **`compact`** (booleano). Variante para filas de lista, `trailing` de `ListItem`: 32 de alto, botones de 24 y cifra
+  de 40 de ancho, sin estirarse; manda sobre `size`. En nativo la zona táctil sigue llegando a 44 pt / 48 dp. Tokens
+  nuevos `number-input.compact-*` (`height`, `font-size`, `btn-width`, `field-width`, `padding-inline`).
+- **`decrementLabel` / `incrementLabel`** declaradas en `NumberInputFieldProps` (ya llegaban al control en ejecución
+  pero no estaban en el tipo). En nativo ya existían.
+- Fichas de paridad, capturas y pareja con Storybook (`native/apple/Comparisons/NumberInputField/compacto.*`) al día.
+
+> **Minor.** Dos piezas de la primera app web (Homenize): un autocompletado que admite texto libre y el tachado en
+> `Text` (React, SwiftUI y Compose). Todo opcional: sin las props nuevas, el HTML de `Text` es idéntico al anterior.
+
+### React — `Autocomplete` y `AutocompleteField` (minor)
+
+Campo de texto con sugerencias donde **el valor es el texto escrito**: se elige una sugerencia o se queda lo que no
+coincide con ninguna. Componente propio y no una prop de `AsyncSelect` porque el modelo de valor es otro
+(`AsyncSelect` guarda un identificador y pide `selectedOption`; aquí `value` es un `string`).
+
+- **API**: `value`/`defaultValue`/`onValueChange` (texto), `onSelect(option)` (solo al elegir: para saber cuál fue),
+  sugerencias síncronas con `options` (filtradas por el control, sin mayúsculas ni tildes) o síncronas/asíncronas con
+  `onSearch` (con `debounceMs`, descarte de respuestas fuera de orden y `minChars`). `name` y `required` nativos en el
+  propio `<input>`.
+- **Combobox ARIA con lista**: `aria-activedescendant`, `aria-expanded`, `aria-controls` solo con la lista abierta;
+  flechas, Enter (sin sugerencia marcada se queda con lo escrito y deja enviar el formulario), Escape (no sube al
+  `Modal`) y Tab.
+- **Sin texto propio**: sin sugerencias no hay lista ni «sin resultados». No toca el catálogo de mensajes.
+- Misma cara que `AsyncSelect`/`SelectField` por tokens nuevos `autocomplete.*` y `autocomplete-field.*` que apuntan a
+  los de `async-select*` (el par oscuro llega por `surface-dark-derived.css`). Sin `surface-dark-*` propios.
+- Registrados: `entry-points.mjs` (+ `clientComponents`), `package.json › exports` (`./autocomplete`,
+  `./autocomplete-field`) y `src/index.ts`. Historias, docs `.mdx` y pruebas con teclado.
+- Anotado en `native/README.md` como candidato a versión nativa si una app lo pide.
+
+### `Text` — tachado (minor)
+
+- **React**: prop `strikethrough` y `as="del"`/`as="s"` (que tachan por sí solos). Clase nueva `text--strikethrough`,
+  tinta atenuada (`text-inline.strikethrough-color`, la del texto secundario) y grosor del sistema
+  (`text-inline.strikethrough-thickness`); con un `tone` manda el del tono. Sin la prop, el HTML es idéntico
+  (prueba en `Text.test.tsx`).
+- **SwiftUI y Compose**: `strikethrough:` / `TextElement.del` y `.s` en `BrandText` / `Text.brand(…)` /
+  `brandSpanStyle`, con la ficha de paridad al día.
+
 ## [49.19.0] — 2026-10-04
 
 > **Minor.** Primera versión con **Brand nativo**: tokens, fuentes y componentes para SwiftUI (iOS 17 y macOS 14) y

package/dist/_shared/tokens.js

@@ -316,6 +316,40 @@ var e = {
 	"--async-select-empty-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
 	"--async-select-empty-font-size": "1rem",
 	"--async-select-empty-color": "#4a4a4a",
+	"--autocomplete-bg": "#ffffff",
+	"--autocomplete-border-color": "#111e30",
+	"--autocomplete-border-radius": "0px",
+	"--autocomplete-border-style": "solid",
+	"--autocomplete-border-width": "1px",
+	"--autocomplete-disabled-cursor": "not-allowed",
+	"--autocomplete-color": "#111e30",
+	"--autocomplete-content-bg": "#ffffff",
+	"--autocomplete-content-border-color": "#111e30",
+	"--autocomplete-content-gap": "0.5rem",
+	"--autocomplete-content-z-index": "400",
+	"--autocomplete-content-max-height": "var(--available-height)",
+	"--autocomplete-error-border-color": "#b30000",
+	"--autocomplete-focus-ring-color": "#111e30",
+	"--autocomplete-focus-ring-width": "2px",
+	"--autocomplete-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--autocomplete-font-size": "1rem",
+	"--autocomplete-font-weight": "300",
+	"--autocomplete-height": "2.5rem",
+	"--autocomplete-item-highlighted-bg": "#111e30",
+	"--autocomplete-item-highlighted-color": "#ffffff",
+	"--autocomplete-item-padding-block": "0.5rem",
+	"--autocomplete-lg-font-size": "1.25rem",
+	"--autocomplete-lg-height": "3rem",
+	"--autocomplete-lg-item-padding-block": "0.75rem",
+	"--autocomplete-lg-padding-inline": "1.5rem",
+	"--autocomplete-line-height": "1",
+	"--autocomplete-padding-inline": "1rem",
+	"--autocomplete-placeholder-color": "#4a4a4a",
+	"--autocomplete-sm-font-size": "0.875rem",
+	"--autocomplete-sm-height": "2rem",
+	"--autocomplete-sm-item-padding-block": "0.25rem",
+	"--autocomplete-sm-padding-inline": "0.5rem",
+	"--autocomplete-item-selected-font-weight": "500",
 	"--avatar-size-sm": "2rem",
 	"--avatar-size-md": "2.5rem",
 	"--avatar-size-lg": "3rem",
@@ -1284,6 +1318,11 @@ var e = {
 	"--number-input-lg-font-size": "1.25rem",
 	"--number-input-lg-height": "3rem",
 	"--number-input-lg-padding-inline": "1.5rem",
+	"--number-input-compact-height": "2rem",
+	"--number-input-compact-font-size": "0.875rem",
+	"--number-input-compact-btn-width": "1.5rem",
+	"--number-input-compact-field-width": "2.5rem",
+	"--number-input-compact-padding-inline": "0.25rem",
 	"--org-switcher-trigger-padding-block": "0.5rem",
 	"--org-switcher-trigger-padding-inline": "0.75rem",
 	"--org-switcher-trigger-gap": "0.75rem",
@@ -1835,6 +1874,8 @@ var e = {
 	"--text-inline-muted-color": "#4a4a4a",
 	"--text-inline-destructive-color": "#b30000",
 	"--text-inline-success-color": "#006616",
+	"--text-inline-strikethrough-color": "#4a4a4a",
+	"--text-inline-strikethrough-thickness": "1px",
 	"--text-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
 	"--text-font-size": "1rem",
 	"--text-font-weight": "300",
@@ -2125,6 +2166,17 @@ var e = {
 	"--async-select-field-helper-font-weight": "300",
 	"--async-select-field-helper-line-height": "1.5",
 	"--async-select-field-helper-color": "#111e30",
+	"--autocomplete-field-gap": "0.5rem",
+	"--autocomplete-field-error-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--autocomplete-field-error-font-size": "0.875rem",
+	"--autocomplete-field-error-font-weight": "300",
+	"--autocomplete-field-error-line-height": "1.5",
+	"--autocomplete-field-error-color": "#b30000",
+	"--autocomplete-field-helper-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--autocomplete-field-helper-font-size": "0.875rem",
+	"--autocomplete-field-helper-font-weight": "300",
+	"--autocomplete-field-helper-line-height": "1.5",
+	"--autocomplete-field-helper-color": "#111e30",
 	"--avatar-upload-gap": "1rem",
 	"--avatar-upload-body-gap": "0.5rem",
 	"--avatar-upload-ring-width": "2px",

package/dist/_types/atoms/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,83 @@
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import './Autocomplete.css';
+export interface AutocompleteOption {
+    /** Identifica la sugerencia: es lo que recibe `onSelect` para saber cuál se eligió. */
+    value: string;
+    /** El texto de la sugerencia: es lo que se escribe en el campo al elegirla. */
+    label: string;
+}
+export interface AutocompleteProps {
+    /**
+     * El texto del campo (controlado). **El valor es el texto escrito**, haya o
+     * no una sugerencia que coincida: elegir una sugerencia solo lo rellena.
+     */
+    value?: string;
+    /** Texto inicial cuando el campo no está controlado. */
+    defaultValue?: string;
+    /** Se llama con el texto nuevo, tanto al escribir como al elegir una sugerencia. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Se llama, además de `onValueChange`, cuando el usuario **elige** una
+     * sugerencia: sirve para saber cuál fue (su `value`) frente a un texto libre.
+     */
+    onSelect?: (option: AutocompleteOption) => void;
+    /**
+     * Sugerencias **síncronas**: una lista fija que el propio control filtra por
+     * lo escrito (sin distinguir mayúsculas ni tildes). Es excluyente con
+     * `onSearch`.
+     */
+    options?: AutocompleteOption[];
+    /**
+     * Sugerencias **asíncronas** (o síncronas, calculadas por el consumidor): se
+     * llama con lo escrito, tras `debounceMs`, y devuelve la lista. Si lanza,
+     * simplemente no hay sugerencias: el texto escrito sigue valiendo.
+     */
+    onSearch?: (query: string) => AutocompleteOption[] | Promise<AutocompleteOption[]>;
+    /**
+     * Milisegundos de rebote entre la última tecla y `onSearch`. Default: 200.
+     * A 0 se busca en cada tecla. No afecta a `options`.
+     */
+    debounceMs?: number;
+    /**
+     * Caracteres mínimos para sugerir al escribir. Default: 1. La flecha abajo
+     * abre la lista aunque no se llegue al mínimo.
+     */
+    minChars?: number;
+    /** Pista dentro del campo. El control no emite más texto por su cuenta. */
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    id?: string;
+    /** Nombre del campo en el formulario: el propio `<input>` lleva el texto. */
+    name?: string;
+    /** Marca el estado de error: aplica la clase `autocomplete--error` y `aria-invalid`. */
+    error?: boolean;
+    /** Campo obligatorio: `required` nativo, porque lo que se envía es el propio texto. */
+    required?: boolean;
+    maxLength?: number;
+    /** Se llama al salir del control (react-hook-form lo usa para validar). */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /** Se añade DESPUÉS de las clases propias del componente. */
+    className?: string;
+    /**
+     * Nombre accesible cuando el control va suelto, y de la lista de
+     * sugerencias. En un campo lo nombra la etiqueta (`htmlFor`), que este
+     * atributo pisaría: no lo pongas ahí.
+     */
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    /**
+     * Nodo DOM donde montar el portal de la lista (reenviado a Base UI
+     * `Portal.container`). Mismo contrato que `AsyncSelect`: por defecto, el nodo
+     * de la superficie que llegue por contexto, o `document.body`.
+     */
+    container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>['container'];
+}
+/**
+ * Campo de texto con sugerencias. A diferencia de `AsyncSelect`, **no obliga a
+ * elegir**: el valor es el texto escrito y una sugerencia es solo una forma de
+ * escribirlo más deprisa. Patrón ARIA de combobox con lista (`aria-activedescendant`):
+ * el foco no sale nunca del `<input>`. El `ref` va a ese `<input>`.
+ */
+export declare const Autocomplete: import("react").ForwardRefExoticComponent<AutocompleteProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/_types/atoms/NumberInput/NumberInput.d.ts

@@ -10,6 +10,12 @@ export interface NumberInputMessages {
     /** Nombre accesible del botón que suma un paso. */
     increment: string;
 }
+/**
+ * Cuándo avisa `onChange` de lo escrito a mano: con cada tecla (`'change'`, lo de
+ * siempre) o una sola vez al confirmar (`'blur'`). Los botones − y + avisan al
+ * momento en los dos modos.
+ */
+export type NumberInputCommitMode = 'change' | 'blur';
 export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange'> {
     /**
      * Valor controlado. `null` es «sin valor»: el campo se muestra vacío (y el
@@ -25,6 +31,19 @@ export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<'input'>
     disabled?: boolean;
     readOnly?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Variante para filas de lista (`trailing` de `ListItem`): botones y cifra
+     * justos, del ancho de 2–3 dígitos, sin estirarse. Es una variante de la
+     * talla `sm`, no una talla más: manda sobre `size`.
+     */
+    compact?: boolean;
+    /**
+     * Cuándo se avisa de lo escrito a mano. `'change'` (por defecto): con cada
+     * tecla. `'blur'`: una sola vez al salir del campo o al pulsar Enter; Escape
+     * descarta lo escrito y vuelve al último valor. Con `onEmpty`, dejar el campo
+     * vacío se avisa igual, al confirmar. − y + avisan al momento en los dos modos.
+     */
+    commitMode?: NumberInputCommitMode;
     error?: boolean;
     id?: string;
     name?: string;

package/dist/_types/atoms/Text/Text.d.ts

@@ -5,13 +5,21 @@ export interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
      * `span` no añade significado, `em` marca énfasis de lectura (cambia cómo se
      * dice la frase) y `strong` marca importancia. No es una prop de estilo.
      */
-    as?: 'span' | 'em' | 'strong';
+    as?: 'span' | 'em' | 'strong' | 'del' | 's';
     /**
      * Intención del fragmento. `destructive` es la palabra que dice que algo se
      * pierde («esta acción **borra** el curso»); `success`, la que dice que salió
      * bien; `muted`, una aclaración secundaria.
      */
     tone?: 'default' | 'muted' | 'destructive' | 'success';
+    /**
+     * Tacha el fragmento con una línea y lo atenúa (tinta secundaria): lo que ya
+     * está hecho, como un producto que ya está en el carrito. Es **solo
+     * aspecto**: no dice nada al lector de pantalla. Si el tachado significa algo
+     * («este precio ya no vale»), usa `as="del"` o `as="s"`, que además lo tachan.
+     * Con un `tone` manda el color del tono.
+     */
+    strikethrough?: boolean;
     /**
      * Idioma de **este fragmento**, cuando no es el de la página: una cita, un
      * término sin traducir, un segmento de traducción. Marca el idioma para el
@@ -25,11 +33,13 @@ export interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
 }
 /**
  * Texto **en línea**: un trozo de una frase que hay que marcar sin salirse de
- * ella. Dos usos, y ningún otro:
+ * ella. Tres usos, y ningún otro:
  *
  * - **Otro idioma** (`lang`): el fragmento se anuncia con la voz correcta y se
  *   corta según sus reglas. Antes esto era un `<span lang>` a mano en cada
  *   producto.
+ * - **Tachado** (`strikethrough`, o `as="del"`/`as="s"`): lo hecho o lo que ya
+ *   no vale, en tinta atenuada.
  * - **Intención** (`tone`): énfasis con carga —destructiva o de logro— en tinta
  *   de feedback. Es color de texto sobre la superficie, **nunca un relleno**:
  *   una palabra resaltada dentro de un párrafo no lleva fondo.

package/dist/_types/molecules/AutocompleteField/AutocompleteField.d.ts

@@ -0,0 +1,57 @@
+import './AutocompleteField.css';
+import { Autocomplete } from '../../atoms/Autocomplete/Autocomplete';
+import type { AutocompleteOption } from '../../atoms/Autocomplete/Autocomplete';
+export type { AutocompleteOption };
+export interface AutocompleteFieldProps {
+    /** `id` del control. Si no se pasa, se genera con `useId`. */
+    id?: string;
+    label: string;
+    /**
+     * Oculta la etiqueta a la vista (sigue leyéndola el lector de pantalla).
+     * Por defecto `false`: la etiqueta se ve.
+     * Sin valor, lo decide quien lo envuelva: dentro de un `FieldRow` que no
+     * es la primera de la lista, la etiqueta se oculta sola.
+     */
+    labelHidden?: boolean;
+    /** El texto del campo (controlado). El valor es lo escrito, coincida o no con una sugerencia. */
+    value?: string;
+    /** Texto inicial cuando el campo no está controlado. */
+    defaultValue?: string;
+    /** Se llama con el texto nuevo, al escribir y al elegir una sugerencia. */
+    onValueChange?: (value: string) => void;
+    /** Se llama, además, cuando se elige una sugerencia: para saber cuál fue. */
+    onSelect?: (option: AutocompleteOption) => void;
+    /** Sugerencias síncronas: lista fija que el control filtra por lo escrito. Excluyente con `onSearch`. */
+    options?: AutocompleteOption[];
+    /** Sugerencias asíncronas (o calculadas por el consumidor), con rebote. */
+    onSearch?: (query: string) => AutocompleteOption[] | Promise<AutocompleteOption[]>;
+    /** Milisegundos de rebote antes de llamar a `onSearch`. Default: 200. */
+    debounceMs?: number;
+    /** Caracteres mínimos para sugerir al escribir. Default: 1. */
+    minChars?: number;
+    placeholder?: string;
+    /** Nombre del campo en el formulario: el propio `<input>` lleva el texto. */
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Campo obligatorio (`required` nativo). */
+    required?: boolean;
+    maxLength?: number;
+    /** Marca el control en error sin mensaje. Un `errorMessage` ya lo implica. */
+    error?: boolean;
+    /** Mensaje de error: se anuncia (`role="alert"`) y pone el control en error. */
+    errorMessage?: string;
+    /** Texto de ayuda, enlazado por `aria-describedby`. */
+    helperText?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
+    className?: string;
+    /** Nodo DOM donde montar el portal de la lista (ver `Autocomplete`). */
+    container?: React.ComponentProps<typeof Autocomplete>['container'];
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+/**
+ * El `Autocomplete` como campo de formulario: etiqueta, ayuda y error. El
+ * `ref` va al `<input>`; el `className`, al contenedor.
+ */
+export declare const AutocompleteField: import("react").ForwardRefExoticComponent<AutocompleteFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/_types/molecules/NumberInputField/NumberInputField.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithoutRef } from 'react';
 import './NumberInputField.css';
+import { type NumberInputCommitMode } from '../../atoms/NumberInput/NumberInput';
 export interface NumberInputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange'> {
     /** `id` del control. Si no se pasa, se genera con `useId`. */
     id?: string;
@@ -26,6 +27,14 @@ export interface NumberInputFieldProps extends Omit<ComponentPropsWithoutRef<'in
     /** Texto de ayuda, enlazado por `aria-describedby`. */
     helperText?: string;
     size?: 'sm' | 'md' | 'lg';
+    /** Variante para filas de lista: botones y cifra justos. Ver `NumberInput`. */
+    compact?: boolean;
+    /** Cuándo se avisa de lo escrito a mano: con cada tecla (`'change'`) o al salir/Enter (`'blur'`). Ver `NumberInput`. */
+    commitMode?: NumberInputCommitMode;
+    /** aria-label del botón que resta. Sin default: sale de `numberInput.decrement` del `BrandMessagesProvider`. */
+    decrementLabel?: string;
+    /** aria-label del botón que suma. Sin default: sale de `numberInput.increment` del `BrandMessagesProvider`. */
+    incrementLabel?: string;
     /** Recibe el valor ya normalizado, no el evento. */
     onChange?: (value: number) => void;
     /** Quien teclea dejó el campo vacío; con ella, vaciar es un valor (`null`). Ver `NumberInput`. */

package/dist/autocomplete-field.css

@@ -0,0 +1 @@
+.autocomplete-field{gap:var(--autocomplete-field-gap);flex-direction:column;display:flex}.autocomplete-field__helper{font-family:var(--autocomplete-field-helper-font-family);font-size:var(--autocomplete-field-helper-font-size);font-weight:var(--autocomplete-field-helper-font-weight);line-height:var(--autocomplete-field-helper-line-height);color:var(--autocomplete-field-helper-color)}

package/dist/autocomplete-field.js

@@ -0,0 +1,58 @@
+'use client';
+import './autocomplete-field.css';
+import { Autocomplete as e } from "./autocomplete.js";
+import { n as t } from "./_shared/form-size.js";
+import { ErrorText as n } from "./error-text.js";
+import { Label as r } from "./label.js";
+import { n as i } from "./_shared/field-labels.js";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/stories/molecules/AutocompleteField/AutocompleteField.tsx
+var l = a(function({ id: a, label: l, labelHidden: u, value: d, defaultValue: f, onValueChange: p, onSelect: m, options: h, onSearch: g, debounceMs: _, minChars: v, placeholder: y, name: b, disabled: x, readOnly: S, size: C, required: w, maxLength: T, error: E = !1, errorMessage: D, helperText: O, className: k, container: A, onBlur: j }, M) {
+	let N = i(u), P = t(C), F = o(), I = a ?? F, L = D ? `${I}-error` : void 0, R = O ? `${I}-helper` : void 0, z = [L, R].filter(Boolean).join(" ") || void 0, B = E || !!D;
+	return /* @__PURE__ */ c("div", {
+		className: ["autocomplete-field", k].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ s(r, {
+				htmlFor: I,
+				hidden: N,
+				size: P,
+				children: l
+			}),
+			/* @__PURE__ */ s(e, {
+				ref: M,
+				id: I,
+				name: b,
+				value: d,
+				defaultValue: f,
+				onValueChange: p,
+				onSelect: m,
+				options: h,
+				onSearch: g,
+				debounceMs: _,
+				minChars: v,
+				placeholder: y,
+				disabled: x,
+				readOnly: S,
+				size: P,
+				required: w,
+				maxLength: T,
+				error: B,
+				container: A,
+				"aria-describedby": z,
+				onBlur: j
+			}),
+			D && /* @__PURE__ */ s(n, {
+				id: L,
+				children: D
+			}),
+			O && /* @__PURE__ */ s("span", {
+				id: R,
+				className: "autocomplete-field__helper",
+				children: O
+			})
+		]
+	});
+});
+//#endregion
+export { l as AutocompleteField };

package/dist/autocomplete.css

@@ -0,0 +1 @@
+.autocomplete{align-items:center;gap:var(--autocomplete-content-gap);block-size:var(--autocomplete-height);padding-block:0;padding-inline:var(--autocomplete-padding-inline);font-family:var(--autocomplete-font-family);font-size:var(--autocomplete-font-size);line-height:var(--autocomplete-line-height);font-weight:var(--autocomplete-font-weight);color:var(--autocomplete-color);background-color:var(--autocomplete-bg);border-width:var(--autocomplete-border-width);border-style:var(--autocomplete-border-style);border-color:var(--autocomplete-border-color);border-radius:var(--autocomplete-border-radius);box-sizing:border-box;width:100%;display:inline-flex}.autocomplete:focus-within{outline:var(--autocomplete-focus-ring-width) solid var(--autocomplete-focus-ring-color);outline-offset:calc(-1 * (var(--autocomplete-focus-ring-width) + var(--autocomplete-border-width)))}.autocomplete.autocomplete--disabled{opacity:.5;cursor:var(--autocomplete-disabled-cursor);pointer-events:none}.autocomplete__input{all:unset;cursor:text;min-width:0;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;flex:1}.autocomplete__input::placeholder{color:var(--autocomplete-placeholder-color)}.autocomplete__input:disabled{cursor:var(--autocomplete-disabled-cursor)}.autocomplete__content{background-color:var(--autocomplete-content-bg);border-width:var(--autocomplete-border-width);border-style:var(--autocomplete-border-style);border-color:var(--autocomplete-content-border-color);min-width:var(--anchor-width);max-height:var(--autocomplete-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.autocomplete__content[data-side=bottom]{border-top:none}.autocomplete__content[data-side=top]{border-bottom:none}.autocomplete__item{all:unset;box-sizing:border-box;width:100%;padding-block:var(--autocomplete-item-padding-block);padding-inline:var(--autocomplete-padding-inline);font-size:var(--autocomplete-font-size);font-family:var(--autocomplete-font-family);color:var(--autocomplete-color);cursor:pointer;align-items:center;display:flex}.autocomplete__item:focus-visible,.autocomplete__item:hover{background-color:var(--autocomplete-item-highlighted-bg);color:var(--autocomplete-item-highlighted-color)}.autocomplete__item.autocomplete__item--selected{font-weight:var(--autocomplete-item-selected-font-weight)}.autocomplete__item.autocomplete__item--active{background-color:var(--autocomplete-item-highlighted-bg);color:var(--autocomplete-item-highlighted-color)}.autocomplete__content .autocomplete__item+.autocomplete__item,.autocomplete__content[data-side=bottom] .autocomplete__item:first-child{border-top:var(--autocomplete-border-width) var(--autocomplete-border-style) var(--autocomplete-content-border-color)}.autocomplete__content[data-side=top] .autocomplete__item:last-child{border-bottom:var(--autocomplete-border-width) var(--autocomplete-border-style) var(--autocomplete-content-border-color)}.autocomplete.autocomplete--sm{font-size:var(--autocomplete-sm-font-size);--autocomplete-height:var(--autocomplete-sm-height);padding-inline:var(--autocomplete-sm-padding-inline)}.autocomplete__content--sm .autocomplete__item{font-size:var(--autocomplete-sm-font-size);padding-block:var(--autocomplete-sm-item-padding-block)}.autocomplete.autocomplete--lg{font-size:var(--autocomplete-lg-font-size);--autocomplete-height:var(--autocomplete-lg-height);padding-inline:var(--autocomplete-lg-padding-inline)}.autocomplete__content--lg .autocomplete__item{font-size:var(--autocomplete-lg-font-size);padding-block:var(--autocomplete-lg-item-padding-block)}.autocomplete__positioner{z-index:var(--autocomplete-content-z-index)}.autocomplete.autocomplete--error{border-color:var(--autocomplete-error-border-color)}

package/dist/autocomplete.js

@@ -0,0 +1,145 @@
+'use client';
+import './autocomplete.css';
+import { Spinner as e } from "./spinner.js";
+import { n as t } from "./_shared/portal-container.js";
+import { forwardRef as n, useCallback as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Popover as u } from "@base-ui/react/popover";
+//#region src/stories/atoms/Autocomplete/Autocomplete.tsx
+function ee(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function d(e) {
+	return e.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+}
+var f = n(function({ value: n, defaultValue: f = "", onValueChange: p, onSelect: m, options: h, onSearch: g, debounceMs: _ = 200, minChars: v = 1, placeholder: y, disabled: b, readOnly: x, size: S = "md", id: C, name: w, error: T = !1, required: E, maxLength: D, onBlur: O, className: k, "aria-label": A, "aria-describedby": j, container: M }, N) {
+	let te = t(M), [ne, re] = s(f), [ie, P] = s(!1), [ae, F] = s(!1), [I, L] = s([]), [R, z] = s(-1), B = o(null), V = o(0), H = o(null), U = o(null), W = a(), G = a(), K = n === void 0 ? ne : n, q = ie && I.length > 0, J = (e) => `${G}-opt-${e}`, Y = r((e) => {
+		let t = ++V.current;
+		if (g) {
+			F(!0), Promise.resolve().then(() => g(e)).then((e) => e, () => []).then((e) => {
+				t === V.current && (L(e), z(-1), F(!1));
+			});
+			return;
+		}
+		let n = d(e);
+		L((h ?? []).filter((e) => d(e.label).includes(n))), z(-1);
+	}, [g, h]);
+	i(() => () => {
+		V.current += 1, B.current && clearTimeout(B.current);
+	}, []);
+	function X(e) {
+		B.current && clearTimeout(B.current), g && _ > 0 ? B.current = setTimeout(() => Y(e), _) : Y(e);
+	}
+	function Z() {
+		B.current && clearTimeout(B.current), V.current += 1, F(!1), P(!1), z(-1);
+	}
+	function Q(e) {
+		n === void 0 && re(e), p?.(e);
+	}
+	function oe(e) {
+		let t = e.target.value;
+		if (Q(t), t.length < v) {
+			Z();
+			return;
+		}
+		P(!0), X(t);
+	}
+	function $(e) {
+		Q(e.label), m?.(e), Z(), L([]);
+	}
+	function se(e) {
+		b || x || (e.key === "ArrowDown" ? (e.preventDefault(), q ? z((e) => Math.min(e + 1, I.length - 1)) : (P(!0), X(K))) : e.key === "ArrowUp" ? (e.preventDefault(), q && z((e) => Math.max(e - 1, -1))) : e.key === "Enter" ? q && R >= 0 && I[R] ? (e.preventDefault(), $(I[R])) : q && Z() : e.key === "Escape" ? q && (e.preventDefault(), e.stopPropagation(), Z()) : e.key === "Tab" && Z());
+	}
+	function ce(e, t) {
+		if (!e) {
+			if (t.reason === "outside-press") {
+				let e = t.event?.target;
+				if (e instanceof Node && U.current?.contains(e)) return;
+			}
+			Z();
+		}
+	}
+	let le = [
+		"autocomplete",
+		S === "md" ? "" : `autocomplete--${S}`,
+		b ? "autocomplete--disabled" : "",
+		T ? "autocomplete--error" : "",
+		k ?? ""
+	].filter(Boolean).join(" "), ue = ["autocomplete__content", S === "md" ? "" : `autocomplete__content--${S}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ l(u.Root, {
+		open: q,
+		onOpenChange: ce,
+		children: [/* @__PURE__ */ l("div", {
+			ref: U,
+			className: le,
+			"data-popup-open": q || void 0,
+			children: [/* @__PURE__ */ c("input", {
+				ref: (e) => {
+					H.current = e, ee(N, e);
+				},
+				id: C,
+				name: w,
+				type: "text",
+				className: "autocomplete__input",
+				value: K,
+				onChange: oe,
+				onKeyDown: se,
+				placeholder: y,
+				disabled: b,
+				readOnly: x,
+				required: E,
+				maxLength: D,
+				"aria-label": A,
+				"aria-describedby": j,
+				"aria-invalid": T || void 0,
+				"aria-expanded": q,
+				"aria-haspopup": "listbox",
+				"aria-controls": q ? W : void 0,
+				"aria-activedescendant": q && R >= 0 ? J(R) : void 0,
+				autoComplete: "off",
+				role: "combobox",
+				"aria-autocomplete": "list",
+				onBlur: O
+			}), ae && /* @__PURE__ */ c(e, {
+				size: "sm",
+				"aria-hidden": !0
+			})]
+		}), /* @__PURE__ */ c(u.Portal, {
+			container: te,
+			children: /* @__PURE__ */ c(u.Positioner, {
+				className: "autocomplete__positioner",
+				anchor: U,
+				align: "start",
+				sideOffset: -1,
+				children: /* @__PURE__ */ c(u.Popup, {
+					className: ue,
+					initialFocus: !1,
+					finalFocus: !1,
+					children: /* @__PURE__ */ c("div", {
+						role: "listbox",
+						"aria-label": A ?? y,
+						id: W,
+						children: I.map((e, t) => {
+							let n = e.label === K, r = R === t;
+							return /* @__PURE__ */ c("div", {
+								id: J(t),
+								role: "option",
+								"aria-selected": r,
+								className: [
+									"autocomplete__item",
+									n ? "autocomplete__item--selected" : "",
+									r ? "autocomplete__item--active" : ""
+								].filter(Boolean).join(" "),
+								onPointerDown: (e) => e.preventDefault(),
+								onClick: () => $(e),
+								children: e.label
+							}, e.value);
+						})
+					})
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { f as Autocomplete };