@studiolxd/brand 49.12.0 → 49.14.0

package/CHANGELOG.md

@@ -7,6 +7,42 @@ 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.14.0] — 2026-09-20
+
+> **Minor.** El buscador, repasado con la página real delante. Seis cambios pedidos por
+> quien lo iba a usar después de verlo en producción, que es cuando se ven las cosas.
+
+### `SiteSearch` — lo que cambia
+
+Ocupa el ancho de su contenedor y ya no se encoge dentro de una fila flexible o una
+celda de retícula. Entre resultados hay aire de verdad, 32 píxeles, y dentro de cada
+uno 8. **Fuera la línea separadora**: la separación la hace el espacio.
+
+El título de cada resultado ya era un `h2`, pero leía al cuerpo de texto y no se
+distinguía; ahora sube un peldaño y lleva interlineado de título. El rastro de
+sección, el extracto y la dirección usan el cuerpo de las páginas públicas.
+
+**El campo pasa a ser `SearchForm`**, el mismo del menú, no una copia de su CSS: la
+flecha vive dentro del borde y no hay botón aparte. `SearchForm` gana `className`,
+`describedBy` y `controls`, que no cambian su dibujo. Como consecuencia buscada, el
+campo de la página y el del menú ya no pueden separarse.
+
+## [49.13.0] — 2026-09-19
+
+> **Minor.** El buscador del sitio. Existían el campo del menú y el autocompletar de la
+> documentación; faltaba la página de resultados entera, que es lo que entra aquí.
+
+### `SiteSearch` — campo, estado y resultados
+
+Un organismo con los seis estados que de verdad tiene un buscador: en reposo, escribiendo,
+buscando, con resultados, **sin resultados** y **con error**. Los dos últimos son dos estados
+y no uno: hasta ahora la página de marketing se tragaba el fallo del índice y pintaba un
+vacío, que es mentirle a quien busca — no es que no haya nada, es que no hemos podido mirar.
+
+**No busca nada.** El estado se le pasa por prop, y la paginación y los filtros son ranuras
+que rellena quien lo use. Teclado y lectores de pantalla desde el principio: foco visible,
+recorrido con tabulador y el número de resultados anunciado.
+
 ## [49.12.0] — 2026-09-19
 
 > **Minor.** Las seis piezas que pedían People, Projects y Finance al partir el ERP interno en

package/dist/_shared/tokens.js

@@ -3404,6 +3404,44 @@ var e = {
 	"--planning-grid-pending-opacity": "0.4",
 	"--public-page-shell-preferences-padding-block": "1.5rem",
 	"--public-page-shell-preferences-gap": "0.75rem",
+	"--site-search-inline-size": "100%",
+	"--site-search-gap": "1.5rem",
+	"--site-search-block-gap": "0.75rem",
+	"--site-search-status-font-size": "0.875rem",
+	"--site-search-status-line-height": "1.5",
+	"--site-search-status-color": "#4a4a4a",
+	"--site-search-status-gap": "0.5rem",
+	"--site-search-status-query-font-weight": "500",
+	"--site-search-results-gap": "2rem",
+	"--site-search-result-gap": "0.5rem",
+	"--site-search-result-title-font-size": "1.25rem",
+	"--site-search-result-title-line-height": "1.3",
+	"--site-search-result-title-font-weight": "500",
+	"--site-search-result-title-color": "#111e30",
+	"--site-search-result-section-font-size": "1rem",
+	"--site-search-result-section-line-height": "1.5",
+	"--site-search-result-section-color": "#4a4a4a",
+	"--site-search-result-excerpt-font-size": "1rem",
+	"--site-search-result-excerpt-line-height": "1.5",
+	"--site-search-result-excerpt-color": "#111e30",
+	"--site-search-result-measure": "70ch",
+	"--site-search-result-url-font-size": "1rem",
+	"--site-search-result-url-line-height": "1.5",
+	"--site-search-result-url-color": "#4a4a4a",
+	"--site-search-result-link-hover-line-width": "1px",
+	"--site-search-result-link-hover-line-offset": "0.25rem",
+	"--site-search-result-focus-ring-color": "#111e30",
+	"--site-search-result-focus-ring-width": "2px",
+	"--site-search-result-focus-ring-offset": "1px",
+	"--site-search-result-mark-bg": "#ffcd00",
+	"--site-search-result-mark-color": "#111e30",
+	"--site-search-suggestions-gap": "0.5rem",
+	"--site-search-suggestions-label-font-size": "0.75rem",
+	"--site-search-suggestions-label-color": "#4a4a4a",
+	"--site-search-ghost-section-inline-size": "30%",
+	"--site-search-ghost-title-inline-size": "70%",
+	"--site-search-ghost-url-inline-size": "45%",
+	"--site-search-skeleton-gap": "0.5rem",
 	"--steps-gap": "1.5rem",
 	"--steps-marker-gap": "1rem",
 	"--steps-body-gap": "0.5rem",

package/dist/_types/messages/BrandMessages.d.ts

@@ -12,6 +12,7 @@ import type { AsyncSelectMessages } from '../atoms/AsyncSelect/AsyncSelect';
 import type { AsyncMultiSelectMessages } from '../atoms/AsyncMultiSelect/AsyncMultiSelect';
 import type { DocsSearchMessages } from '../molecules/DocsSearch/DocsSearch';
 import type { SearchFormMessages } from '../molecules/SearchForm/SearchForm';
+import type { SiteSearchMessages } from '../organisms/SiteSearch/SiteSearch';
 import type { FilterBarMessages } from '../molecules/FilterBar/FilterBar';
 import type { CalendarMessages } from '../molecules/Calendar/Calendar';
 import type { DatePickerMessages } from '../molecules/DatePicker/DatePicker';
@@ -116,6 +117,7 @@ export interface BrandMessages {
     asyncMultiSelect: AsyncMultiSelectMessages;
     docsSearch: DocsSearchMessages;
     searchForm: SearchFormMessages;
+    siteSearch: SiteSearchMessages;
     filterBar: FilterBarMessages;
     calendar: CalendarMessages;
     datePicker: DatePickerMessages;
@@ -185,4 +187,4 @@ export interface BrandMessages {
     connectorExternalSignIn: ConnectorExternalSignInMessages;
     connectorRejection: ConnectorRejectionMessages;
 }
-export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, };
+export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, SiteSearchMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, };

package/dist/_types/messages/index.d.ts

@@ -2,4 +2,4 @@ export { BrandMessagesProvider } from './BrandMessagesProvider';
 export type { BrandMessagesProviderProps } from './BrandMessagesProvider';
 export { useBrandMessages } from './BrandMessagesContext';
 export type { BrandMessagesReader } from './BrandMessagesContext';
-export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, } from './BrandMessages';
+export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, SiteSearchMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, } from './BrandMessages';

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

@@ -15,6 +15,8 @@ export interface SearchFormMessages {
 export interface SearchFormProps {
     /** `id` del campo. Si no se pasa, el componente genera uno estable. */
     id?: string;
+    /** Clase del `<form>`, para que quien lo monte lo coloque en su retícula. */
+    className?: string;
     /**
      * Nombre del parámetro con el que viaja la consulta en el envío sin JS.
      * @default 'q'
@@ -67,6 +69,17 @@ export interface SearchFormProps {
     size?: 'sm' | 'md' | 'lg' | 'xl';
     /** Deshabilita el campo y el botón. */
     disabled?: boolean;
+    /**
+     * `id` de lo que describe al campo: el aviso vivo de una página de
+     * resultados («23 resultados para «factura»»). El campo lo referencia con
+     * `aria-describedby`.
+     */
+    describedBy?: string;
+    /**
+     * `id` de la región que el campo gobierna: la lista de resultados que
+     * cambia al buscar. El campo lo referencia con `aria-controls`.
+     */
+    controls?: string;
 }
 /**
  * Buscador de sitio: un campo y un botón de envío que llevan a una página de

package/dist/_types/organisms/SiteSearch/SiteSearch.d.ts

@@ -0,0 +1,171 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { HeadingLevel } from '../../atoms/Heading/Heading';
+import './SiteSearch.css';
+/**
+ * En qué punto está la búsqueda. **Lo decide quien busca**, no el componente:
+ * aquí no hay `fetch`, ni rebote, ni filtrado, así que nada de esto se puede
+ * deducir de las props.
+ *
+ * - `idle` — todavía no se ha preguntado nada. Es el estado de partida.
+ * - `typing` — hay algo escrito pero aún no se ha buscado: la consulta no
+ *   llega a `minLength`, o el rebote está en marcha.
+ * - `loading` — la consulta está en vuelo.
+ * - `ready` — la respuesta llegó. Con `results` vacío, esto es el «sin
+ *   resultados»: un buscador que respondió y no encontró nada.
+ * - `error` — la consulta falló. **No es lo mismo que no encontrar nada**, y
+ *   por eso son dos estados: el vacío invita a reformular, el error a
+ *   reintentar.
+ */
+export type SiteSearchStatus = 'idle' | 'typing' | 'loading' | 'ready' | 'error';
+/** Un resultado. Lo que trae el índice, ya formateado por quien busca. */
+export interface SiteSearchResult {
+    /** URL del documento. Es también la clave del resultado. */
+    href: string;
+    /** Título del documento, en texto plano. */
+    title: string;
+    /**
+     * El trozo del documento donde está la coincidencia. Es `ReactNode` para
+     * que quien busca pueda resaltarla con `<mark>`, que la hoja ya viste.
+     */
+    excerpt?: ReactNode;
+    /** Dónde vive el documento («Documentación › Creator»). */
+    section?: string;
+    /** La dirección tal y como se le enseña a quien lee, sin protocolo. */
+    displayUrl?: string;
+}
+export type SiteSearchRenderLinkProps = ComponentPropsWithoutRef<'a'> & {
+    href: string;
+    className: string;
+};
+/**
+ * Los textos que el buscador emite por su cuenta. Todos son **cromo**: cómo se
+ * llama el campo, cómo se dice que está buscando y cómo se avisa de que no
+ * hay nada. Los resultados no están aquí — son datos que llegan por
+ * `results`.
+ *
+ * El campo es el `SearchForm` del menú del sitio, así que el buscador no
+ * emite ningún texto más: la flecha de envío se nombra con `submit`, y su
+ * rótulo ya no se ve — es el nombre accesible del adorno dentro del campo.
+ */
+export interface SiteSearchMessages {
+    /** Etiqueta del campo, que nombra también la región de búsqueda. */
+    label: string;
+    /** Pista dentro del campo. */
+    placeholder: string;
+    /** Nombre accesible de la flecha de envío, dentro del campo. */
+    submit: string;
+    /** Lo que se dice antes de la primera búsqueda. */
+    idle: string;
+    /** Cuántos caracteres hacen falta para buscar. Función del mínimo. */
+    minLength: (min: number) => string;
+    /** Lo que se dice con la consulta escrita y la búsqueda aún sin lanzar. */
+    pending: string;
+    /** Lo que se dice mientras se busca. */
+    loading: string;
+    /** El recuento: cuántos resultados hay para qué consulta. */
+    results: (count: number, query: string) => string;
+    /** Nombre accesible de la lista de resultados. */
+    resultsLabel: string;
+    /**
+     * Rótulo del vacío. **No lleva la consulta**: la consulta ya la dice el
+     * recuento de arriba («0 resultados para «x»»), y repetirla debajo es la
+     * misma frase dos veces.
+     */
+    emptyTitle: string;
+    /** Qué hacer cuando no hay nada. */
+    emptyDescription: string;
+    /** Rótulo de las sugerencias de búsqueda. */
+    suggestionsLabel: string;
+    /** Rótulo del error. */
+    errorTitle: string;
+    /** Qué ha pasado y qué se puede hacer. */
+    errorDescription: string;
+    /** Rótulo del botón que vuelve a intentarlo. */
+    retry: string;
+}
+export interface SiteSearchProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSubmit' | 'onSelect' | 'results'> {
+    /** Lo escrito en el campo. El componente es controlado: no guarda estado. */
+    query: string;
+    /** Se llama en cada tecla. Quien lo recibe decide cuándo y cómo buscar. */
+    onQueryChange: (query: string) => void;
+    /**
+     * Se llama al enviar el formulario, con la consulta **recortada**. Con el
+     * campo vacío no se llama: un buscador sin consulta no tiene a dónde ir.
+     */
+    onSubmit?: (query: string) => void;
+    /**
+     * Destino del envío sin JavaScript. Una búsqueda es una lectura, así que
+     * viaja por `get`. Solo se usa cuando no hay `onSubmit`.
+     */
+    action?: string;
+    /**
+     * Nombre del parámetro con el que viaja la consulta en el envío sin JS.
+     * @default 'q'
+     */
+    name?: string;
+    /** En qué punto está la búsqueda. @default 'idle' */
+    status?: SiteSearchStatus;
+    /** Los resultados de la página que se está viendo. */
+    results?: SiteSearchResult[];
+    /**
+     * Cuántos resultados hay **en total**, para el recuento. Sin él se cuenta
+     * lo que llega en `results`, que con paginación es solo la página actual.
+     */
+    total?: number;
+    /**
+     * Cuántos caracteres hacen falta para buscar. Solo se usa para redactar la
+     * pista de `typing`: el componente no busca, así que tampoco corta nada.
+     * @default 2
+     */
+    minLength?: number;
+    /** Búsquedas propuestas en reposo. Se pintan como botones. */
+    suggestions?: string[];
+    /** Se llama al pulsar una sugerencia. Sin él, la sugerencia no se pinta como acción. */
+    onSuggestionSelect?: (suggestion: string) => void;
+    /** Se llama al pulsar «Reintentar». Sin él, el error no ofrece el botón. */
+    onRetry?: () => void;
+    /** Lo que va entre el campo y los resultados: los filtros de la búsqueda. */
+    toolbar?: ReactNode;
+    /** Lo que va al pie de los resultados: la paginación. */
+    footer?: ReactNode;
+    /** Nivel del título de cada resultado. @default 2 */
+    headingLevel?: HeadingLevel;
+    /** Talla del campo y de su flecha. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Cuántos resultados fantasma se pintan durante la carga. @default 3 */
+    loadingRows?: number;
+    /** Se llama al activar un resultado, además de seguir el enlace. */
+    onSelect?: (result: SiteSearchResult) => void;
+    /**
+     * Elemento sobre el que renderizar cada resultado: el `Link` del router del
+     * producto. Debe **propagar todas** las props que recibe.
+     */
+    renderLink?: (props: SiteSearchRenderLinkProps) => ReactNode;
+    /** Etiqueta del campo. Sin ella, sale de `siteSearch.label`. */
+    label?: string;
+    /** Oculta la etiqueta a la vista; el lector la sigue leyendo. @default true */
+    labelHidden?: boolean;
+    /** Pista dentro del campo. Sin ella, sale de `siteSearch.placeholder`. */
+    placeholder?: string;
+    /** Nombre accesible de la flecha de envío. Sin él, sale de `siteSearch.submit`. */
+    submitLabel?: string;
+    /** Nombre accesible de la lista. Sin él, sale de `siteSearch.resultsLabel`. */
+    resultsLabel?: string;
+}
+/**
+ * El buscador del sitio: el campo, lo que está pasando y los resultados.
+ *
+ * **No busca nada.** No hace `fetch`, no filtra, no rebota y no pagina:
+ * recibe `query`, `status` y `results`, y los pinta. El índice —Pagefind,
+ * Algolia, una ruta propia— es del producto, y con él la cancelación de
+ * respuestas tardías y el reparto en páginas (que se monta con `footer`).
+ *
+ * Los cinco estados son explícitos porque ninguno se puede deducir desde
+ * aquí, y **el vacío y el error son dos**: «no hay nada para esto» invita a
+ * reformular, «no se ha podido buscar» invita a reintentar, y un buscador que
+ * los confunde le dice a quien busca que su pregunta no tiene respuesta
+ * cuando lo que pasa es que el índice está caído.
+ *
+ * El `ref` va al `<input>`.
+ */
+export declare const SiteSearch: import("react").ForwardRefExoticComponent<SiteSearchProps & import("react").RefAttributes<HTMLInputElement>>;