@studiolxd/brand 49.28.0 → 51.0.0

package/dist/_types/sections/AppShell/AppShell.d.ts

@@ -41,6 +41,11 @@ export interface AppShellProps {
      * él, sale de `appShell.skipToContent` del `BrandMessagesProvider`.
      */
     skipLabel?: string;
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * Va al contenedor `.app-shell`, no al enlace de salto que lo precede.
+     */
+    className?: string;
 }
 /**
  * El único texto que el armazón dice por su cuenta, y es **cromo**: el enlace
@@ -59,4 +64,4 @@ export interface AppShellMessages {
  * modo y su asa) y `SidebarNav` (rail). Persistir el estado es del producto:
  * `onSidebarChange` / `onSidebarWidthChange` avisan de cada cambio.
  */
-export declare function AppShell({ banner, header, sidebar, children, contentFlush, defaultSidebar, sidebarState, onSidebarChange, defaultSidebarWidth, onSidebarWidthChange, skipLabel, }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShell({ banner, header, sidebar, children, contentFlush, defaultSidebar, sidebarState, onSidebarChange, defaultSidebarWidth, onSidebarWidthChange, skipLabel, className, }: AppShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/Hero/Hero.d.ts

@@ -5,7 +5,7 @@ export interface HeroProps {
     /** El título de la portada: un `Heading` de nivel 1 a talla 10 (display). */
     title: ReactNode;
     /**
-     * La frase bajo el título, opcional: `Paragraph size="large"`. Termina en
+     * La frase bajo el título, opcional: `Paragraph size="lg"`. Termina en
      * punto (ver Foundations → Redacción).
      */
     description?: ReactNode;

package/dist/_types/sections/LegalFooter/LegalFooter.d.ts

@@ -35,6 +35,12 @@ export interface LegalFooterProps {
     width?: ContainerWidth;
     /** Pie sobre superficie oscura. */
     surface?: 'dark';
+    /**
+     * Elemento raíz (default `'footer'`, el `contentinfo` de la página). `'div'`
+     * cuando va dentro de otro pie: un `<footer>` no puede contener otro, y la
+     * página tendría dos `contentinfo`. `SiteFooter` lo pone solo en su `legal`.
+     */
+    as?: 'footer' | 'div';
     className?: string;
 }
 /**
@@ -44,4 +50,4 @@ export interface LegalFooterProps {
  * interior. Es el pie de las aplicaciones de la suite; la web tiene su pie
  * propio con más cosas.
  */
-export declare function LegalFooter({ label, title, links, renderLink, width, surface, className, }: LegalFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function LegalFooter({ label, title, links, renderLink, width, surface, as: Root, className, }: LegalFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/Sidebar/Sidebar.d.ts

@@ -41,6 +41,8 @@ export interface SidebarProps {
     resizerValueText?: (width: number) => string;
     /** Fuerza el modo sin `AppShell` (Storybook, pruebas). Con shell, lo decide el shell. */
     mode?: 'open' | 'rail';
+    /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
+    className?: string;
 }
 /**
  * La barra lateral de la aplicación. En escritorio es una columna con tres
@@ -49,7 +51,7 @@ export interface SidebarProps {
  * grupos de navegación se abren como menú) y cerrada. En móvil es un cajón
  * que entra por la izquierda y se cierra al navegar.
  */
-export declare function Sidebar({ logo, children, footer, id, label, resizerLabel, resizerValueText, mode, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ logo, children, footer, id, label, resizerLabel, resizerValueText, mode, className, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
 export interface SidebarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }

package/dist/_types/sections/SiteFooter/SiteFooter.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type ContainerWidth } from '../../atoms/Container/Container';
 import { type HeadingLevel } from '../../atoms/Heading/Heading';
 import './SiteFooter.css';
@@ -39,7 +39,11 @@ export interface SiteFooterProps {
      * componentes del sistema; el pie solo le reserva el sitio.
      */
     aside?: ReactNode;
-    /** Bloque legal bajo el pie, separado por una línea. Se espera un `LegalFooter`. */
+    /**
+     * Bloque legal bajo el pie, separado por una línea. Se espera un
+     * `LegalFooter`, que aquí se monta como `<div>` (`as="div"`): dentro de este
+     * `<footer>` no puede ir otro, ni la página tener dos `contentinfo`.
+     */
     legal?: ReactNode;
     /** Nivel semántico del título de cada columna. Por defecto `2`. */
     columnTitleLevel?: HeadingLevel;

package/dist/_types/sections/SiteHeader/SiteHeader.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import { type ContainerWidth } from '../../atoms/Container/Container';
-import { type LogoSize } from '../../atoms/Logo/Logo';
+import { type LogoSize, type LogoSizeDeprecated } from '../../atoms/Logo/Logo';
 import './SiteHeader.css';
 export type SiteHeaderLogoLinkProps = {
     href: string;
@@ -28,8 +28,8 @@ export interface SiteHeaderProps {
     menuCloseLabel?: string;
     /** La marca. Por defecto el `Logo` de Studio LXD a `logoSize`; un producto de la suite pone la suya. */
     logo?: ReactNode;
-    /** Talla del logotipo por defecto. `xxl` (85px): la cabecera es el sitio de la marca. */
-    logoSize?: LogoSize;
+    /** Talla del logotipo por defecto. `2xl` (85px): la cabecera es el sitio de la marca. `xxl` es el alias obsoleto de `2xl` (se retira en la v52). */
+    logoSize?: LogoSize | LogoSizeDeprecated;
     /** Talla del botón de menú. `lg` (48px) acompaña al logotipo grande. */
     menuButtonSize?: 'sm' | 'md' | 'lg';
     /**
@@ -47,7 +47,7 @@ export interface SiteHeaderProps {
     children?: ReactNode;
     /** Ajustes del sitio al final del panel (el selector de tema). */
     settings?: ReactNode;
-    /** id del panel — `aria-controls` del botón de menú. */
+    /** id del panel — `aria-controls` del botón de menú. Por defecto, uno único por instancia (`useId`). */
     panelId?: string;
     /** Controles del producto en la barra (acceso, CTA…). */
     actions?: ReactNode;
@@ -74,4 +74,4 @@ export interface SiteHeaderMessages {
     /** Texto accesible del enlace del logotipo. */
     logo: string;
 }
-export declare function SiteHeader({ logoHref, logoLabel, menuLabel, menuCloseLabel, logoSize, logo, menuButtonSize, renderLogoLink, width, open, onOpenChange, children, settings, panelId, actions, language, }: SiteHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SiteHeader({ logoHref, logoLabel, menuLabel, menuCloseLabel, logoSize, logo, menuButtonSize, renderLogoLink, width, open, onOpenChange, children, settings, panelId: panelIdProp, actions, language, }: SiteHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/ConnectorAuth/ConnectorAuthShell.d.ts

@@ -38,6 +38,11 @@ export interface ConnectorAuthChromeProps {
      * aplican —ni el `ref`, porque no hay marco al que engancharlo.
      */
     shell?: boolean;
+    /**
+     * Se añade DESPUÉS de las clases propias. Va al contenido de la pantalla
+     * (las dos columnas), con marco y sin él.
+     */
+    className?: string;
 }
 export interface ConnectorAuthShellProps extends ConnectorAuthChromeProps {
     /** El título de la pantalla: `Heading` de nivel 1 vía `PageIntro`, columna izquierda. */
@@ -50,8 +55,6 @@ export interface ConnectorAuthShellProps extends ConnectorAuthChromeProps {
     aside?: ReactNode;
     /** La columna de la derecha: la decisión —el formulario, la ficha, los botones—. */
     children: ReactNode;
-    /** Se añade DESPUÉS de las clases propias. */
-    className?: string;
 }
 /**
  * El marco de las pantallas del conector: **el mismo que el de acceso**.

package/dist/_types/templates/ConnectorAuth/ConnectorConsentPage.d.ts

@@ -160,4 +160,4 @@ export interface ConnectorConsentPageProps extends ConnectorAuthChromeProps {
  * `action` es una pantalla de React con dos callbacks. Las dos formas pintan
  * exactamente lo mismo.
  */
-export declare function ConnectorConsentPage({ clientName, productName, accountEmail, scope, redirectHost, action, hiddenFields, decisionName, approveValue, denyValue, onApprove, onDeny, denyHref, initialFocus, title, intro, redirectNotice, approveLabel, denyLabel, scopeReadLabel, scopeWriteLabel, expandLabel, collapseLabel, valueQuotes, summaryLabels, links, header, footer, preferences, preferencesLabel, id, shell, }: ConnectorConsentPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectorConsentPage({ clientName, productName, accountEmail, scope, redirectHost, action, hiddenFields, decisionName, approveValue, denyValue, onApprove, onDeny, denyHref, initialFocus, title, intro, redirectNotice, approveLabel, denyLabel, scopeReadLabel, scopeWriteLabel, expandLabel, collapseLabel, valueQuotes, summaryLabels, links, header, footer, preferences, preferencesLabel, id, shell, className, }: ConnectorConsentPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/ConnectorAuth/ConnectorExternalSignInPage.d.ts

@@ -124,4 +124,4 @@ export interface ConnectorExternalSignInPageProps extends ConnectorAuthChromePro
  * `Card` dentro de una columna estrecha, sin cabecera pública ni pie: al
  * cablearla, ese molde propio se retira y lo pone la plantilla.
  */
-export declare function ConnectorExternalSignInPage({ platformName, organization, organizationDefaultValue, organizationName, action, onSubmit, hiddenFields, error, title, intro, signingInTo, valueQuotes, organizationLabel, submitLabel, extra, links, header, footer, preferences, preferencesLabel, id, shell, }: ConnectorExternalSignInPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectorExternalSignInPage({ platformName, organization, organizationDefaultValue, organizationName, action, onSubmit, hiddenFields, error, title, intro, signingInTo, valueQuotes, organizationLabel, submitLabel, extra, links, header, footer, preferences, preferencesLabel, id, shell, className, }: ConnectorExternalSignInPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/ConnectorAuth/ConnectorRejectionPage.d.ts

@@ -110,4 +110,4 @@ export interface ConnectorRejectionPageProps extends ConnectorAuthChromeProps {
  * hecho su trabajo —y en `access-denied`, ni siquiera eso: es lo que se ha
  * pedido—. La página lo cuenta como cuenta cualquier otra cosa.
  */
-export declare function ConnectorRejectionPage({ title, description, hint, code, codeLabel, retryHref, onRetry, retryLabel, retryAction, aside, header, footer, preferences, preferencesLabel, id, shell, }: ConnectorRejectionPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectorRejectionPage({ title, description, hint, code, codeLabel, retryHref, onRetry, retryLabel, retryAction, aside, header, footer, preferences, preferencesLabel, id, shell, className, }: ConnectorRejectionPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/ConnectorAuth/ConnectorSignInPage.d.ts

@@ -100,4 +100,4 @@ export interface ConnectorSignInPageProps extends ConnectorAuthChromeProps {
  * refresco de sesión del hub— y la que hace falta en cuanto la vuelta falla o
  * el usuario se planta en medio del camino.
  */
-export declare function ConnectorSignInPage({ clientName, productName, scope, redirectHost, signInHref, onSignIn, action, hiddenFields, title, intro, fallbackProductName, signInLabel, scopeReadLabel, scopeWriteLabel, expandLabel, collapseLabel, valueQuotes, summaryLabels, links, header, footer, preferences, preferencesLabel, id, shell, }: ConnectorSignInPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectorSignInPage({ clientName, productName, scope, redirectHost, signInHref, onSignIn, action, hiddenFields, title, intro, fallbackProductName, signInLabel, scopeReadLabel, scopeWriteLabel, expandLabel, collapseLabel, valueQuotes, summaryLabels, links, header, footer, preferences, preferencesLabel, id, shell, className, }: ConnectorSignInPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/ErrorPage/ErrorPage.d.ts

@@ -22,6 +22,12 @@ export interface ErrorPageProps {
      * Por defecto `true`. Sin marco, `header`, `footer` e `id` no aplican.
      */
     shell?: boolean;
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * Va al contenido propio de la plantilla —las dos columnas—, con marco y
+     * sin él, como en `OnboardingShell` y `ConnectorAuthShell`.
+     */
+    className?: string;
 }
 /**
  * Plantilla de «algo ha salido mal»: dos columnas, mismo molde que `AuthPage`
@@ -32,4 +38,4 @@ export interface ErrorPageProps {
  * del layout que pudo fallar. Con `shell={false}` devuelve solo el contenido,
  * para una app que ya tiene su `main`.
  */
-export declare function ErrorPage({ title, description, homeAction, retryDescription, retryAction, header, footer, id, shell }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorPage({ title, description, homeAction, retryDescription, retryAction, header, footer, id, shell, className }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/NotFoundPage/NotFoundPage.d.ts

@@ -19,6 +19,12 @@ export interface NotFoundPageProps {
      * no aplican.
      */
     shell?: boolean;
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * Va al contenido propio de la plantilla (título, frase y enlace), con marco
+     * y sin él, como en `OnboardingShell` y `ConnectorAuthShell`.
+     */
+    className?: string;
 }
 /**
  * Plantilla de 404: el marco público (`PublicPageShell`) con cabecera y pie
@@ -27,4 +33,4 @@ export interface NotFoundPageProps {
  * roto no se lleva por delante el mensaje. Con `shell={false}` devuelve solo
  * el contenido, para una app que ya tiene su `main`.
  */
-export declare function NotFoundPage({ title, description, homeLink, header, footer, id, shell }: NotFoundPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotFoundPage({ title, description, homeLink, header, footer, id, shell, className }: NotFoundPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/PublicPageShell/PublicPageShell.d.ts

@@ -66,6 +66,12 @@ export interface PublicPageShellProps {
      * aplican —y tampoco el `ref`, porque no hay marco al que engancharlo.
      */
     shell?: boolean;
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * Va al nodo raíz del marco (`.site-shell`). Con `shell={false}` no aplica:
+     * no hay nodo propio, solo los `children`.
+     */
+    className?: string;
 }
 /**
  * El marco de una página pública, en una sola pieza: `SiteShell` con cabecera

package/dist/accordion.css

@@ -1 +1 @@
-.accordion{width:100%}.accordion__item{border-block-start:var(--accordion-border-width) solid var(--accordion-border-color)}.accordion__header{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin-block:0}.accordion__trigger{all:unset;box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--accordion-trigger-gap);width:100%;padding-block:var(--accordion-trigger-padding-block);padding-inline:var(--accordion-trigger-padding-inline);cursor:var(--accordion-trigger-cursor);text-align:start;display:flex}.accordion__trigger:focus-visible{outline:var(--accordion-focus-ring-width) solid var(--accordion-focus-ring-color);outline-offset:var(--accordion-focus-ring-offset)}.accordion__trigger[data-disabled]{cursor:default}.accordion__trigger-text{flex:1;min-width:0}.accordion__index{min-inline-size:var(--accordion-index-min-inline-size);font-family:var(--accordion-index-font-family);font-size:var(--accordion-index-font-size);color:var(--accordion-index-color);flex-shrink:0}.accordion--numbered .accordion__content-inner{padding-inline-start:calc(var(--accordion-index-min-inline-size) + var(--accordion-trigger-gap))}.accordion__chevron{transition:transform var(--accordion-transition-duration) var(--accordion-transition-easing);flex-shrink:0;transform:rotate(90deg)}.accordion__trigger[data-panel-open] .accordion__chevron{transform:rotate(-90deg)}.accordion__content{overflow:hidden}.accordion__content[data-open]{animation:accordion-open var(--accordion-transition-duration) var(--accordion-transition-easing)}.accordion__content[data-closed]{animation:accordion-close var(--accordion-transition-duration) var(--accordion-transition-easing)}@keyframes accordion-open{0%{height:0}to{height:var(--collapsible-panel-height)}}@keyframes accordion-close{0%{height:var(--collapsible-panel-height)}to{height:0}}.accordion__content-inner{padding-block-end:var(--accordion-content-padding-block);padding-inline:var(--accordion-content-padding-inline)}
+.accordion{inline-size:100%}.accordion__item{border-block-start:var(--accordion-border-width) solid var(--accordion-border-color)}.accordion__header{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin-block:0}.accordion__trigger{all:unset;box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--accordion-trigger-gap);inline-size:100%;padding-block:var(--accordion-trigger-padding-block);padding-inline:var(--accordion-trigger-padding-inline);cursor:var(--accordion-trigger-cursor);text-align:start;display:flex}.accordion__trigger:focus-visible{outline:var(--accordion-focus-ring-width) solid var(--accordion-focus-ring-color);outline-offset:var(--accordion-focus-ring-offset)}.accordion__trigger[data-disabled]{cursor:default}.accordion__trigger-text{flex:1;min-inline-size:0}.accordion__index{min-inline-size:var(--accordion-index-min-width);font-family:var(--accordion-index-font-family);font-size:var(--accordion-index-font-size);color:var(--accordion-index-color);flex-shrink:0}.accordion--numbered .accordion__content-inner{padding-inline-start:calc(var(--accordion-index-min-width) + var(--accordion-trigger-gap))}.accordion__chevron{transition:transform var(--accordion-transition-duration) var(--accordion-transition-easing);flex-shrink:0;transform:rotate(90deg)}.accordion__trigger[data-panel-open] .accordion__chevron{transform:rotate(-90deg)}.accordion__content{overflow:hidden}.accordion__content[data-open]{animation:accordion-open var(--accordion-transition-duration) var(--accordion-transition-easing)}.accordion__content[data-closed]{animation:accordion-close var(--accordion-transition-duration) var(--accordion-transition-easing)}@keyframes accordion-open{0%{height:0}to{height:var(--collapsible-panel-height)}}@keyframes accordion-close{0%{height:var(--collapsible-panel-height)}to{height:0}}.accordion__content-inner{padding-block-end:var(--accordion-content-padding-block);padding-inline:var(--accordion-content-padding-inline)}

package/dist/accordion.js

@@ -52,20 +52,21 @@ function f({ className: e, children: t, ...n }) {
 		children: t
 	});
 }
-function p({ className: t, chevronSize: n = "sm", children: r }) {
-	let s = c();
+function p({ className: t, chevronSize: n = "sm", headingLevel: r = 3, children: s }) {
+	let l = c(), u = `h${r}`;
 	return /* @__PURE__ */ i(o.Header, {
 		className: "accordion__header",
+		render: /* @__PURE__ */ i(u, {}),
 		children: /* @__PURE__ */ a(o.Trigger, {
 			className: ["accordion__trigger", t].filter(Boolean).join(" "),
 			children: [
-				s && /* @__PURE__ */ i("span", {
+				l && /* @__PURE__ */ i("span", {
 					className: "accordion__index",
-					children: s.formatIndex(s.index)
+					children: l.formatIndex(l.index)
 				}),
 				/* @__PURE__ */ i("span", {
 					className: "accordion__trigger-text",
-					children: r
+					children: s
 				}),
 				/* @__PURE__ */ i(e, {
 					name: "chevron",

package/dist/alert.css

@@ -1 +1 @@
-:root{--alert-padding-block:var(--spacing-4);--alert-padding-inline:var(--spacing-5);--alert-gap:var(--spacing-3);--alert-content-gap:var(--spacing-2);--alert-actions-margin-block-start:var(--spacing-3);--alert-title-line-height:var(--line-height-snug);--alert-close-size:var(--size-component-sm);--alert-close-inset:var(--spacing-2);--alert-border-radius:var(--border-radius-default);--alert-border-width:var(--border-width-default);--alert-actions-gap:var(--form-actions-gap);--alert-bg:var(--color-primary);--alert-border-color:var(--color-text-on-dark);--alert-title-font-size:var(--text-font-size);--alert-title-font-weight:var(--font-weight-emphasis);--alert-title-color:var(--color-text-on-dark);--alert-description-font-size:var(--text-font-size);--alert-description-line-height:var(--text-line-height);--alert-description-color:var(--color-text-on-dark);--alert-success-bg:var(--color-success-fill);--alert-success-border-color:var(--color-success-fill);--alert-success-title-color:var(--color-success-fill-text);--alert-success-description-color:var(--color-success-fill-text);--alert-error-bg:var(--color-error-fill);--alert-error-border-color:var(--color-error-fill);--alert-error-title-color:var(--color-error-fill-text);--alert-error-description-color:var(--color-error-fill-text);--alert-warning-bg:var(--color-warning-fill);--alert-warning-border-color:var(--color-warning-fill);--alert-warning-title-color:var(--color-warning-fill-text);--alert-warning-description-color:var(--color-warning-fill-text);--alert-warning-close-color:var(--color-warning-fill-text)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--alert-bg:var(--color-text-on-dark);--alert-border-color:var(--color-text-on-dark);--alert-title-color:var(--color-primary);--alert-description-color:var(--color-primary)}.alert{background-color:var(--alert-bg);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-border-radius);padding-block:var(--alert-padding-block);padding-inline:var(--alert-padding-inline);align-items:flex-start;gap:var(--alert-gap);box-sizing:border-box;--alert-title-ink:var(--alert-title-color);--alert-description-ink:var(--alert-description-color);display:flex;position:relative}.alert.alert--dismissible{padding-inline-end:calc(var(--alert-close-inset) * 2 + var(--alert-close-size))}.alert__content{flex:1;min-width:0}.alert__title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);color:var(--alert-title-ink);line-height:var(--alert-title-line-height);margin:0}.alert__description{font-size:var(--alert-description-font-size);color:var(--alert-description-ink);line-height:var(--alert-description-line-height);margin:0;align-items:start;gap:var(--alert-content-gap);flex-direction:column;margin-block-start:var(--alert-content-gap);display:flex}.alert__actions{align-items:stretch;gap:var(--alert-actions-gap);flex-direction:column;margin-block-start:var(--alert-actions-margin-block-start);display:flex}.alert__actions>*{inline-size:100%}@media (width>=768px){.alert__actions{flex-flow:wrap;align-items:center}.alert__actions>*{inline-size:auto}}.alert .link,.alert a:not(.button){color:var(--alert-description-ink);box-shadow:inset 0 calc(-1 * var(--link-ink-underline-width)) 0 0 currentColor}.alert .link:hover,.alert a:not(.button):hover{color:var(--alert-description-ink);box-shadow:inset 0 calc(-1 * var(--link-ink-hover-underline-width)) 0 0 currentColor}.alert .link:focus-visible,.alert a:not(.button):focus-visible{outline-color:var(--alert-description-ink)}.alert .alert__close{--close-button-size:var(--alert-close-size);position:absolute;inset-block-start:var(--alert-close-inset);inset-inline-end:var(--alert-close-inset)}.alert.alert--success{--alert-bg:var(--alert-success-bg);--alert-border-color:var(--alert-success-border-color);--alert-title-color:var(--alert-success-title-color);--alert-description-color:var(--alert-success-description-color)}.alert.alert--error{--alert-bg:var(--alert-error-bg);--alert-border-color:var(--alert-error-border-color);--alert-title-color:var(--alert-error-title-color);--alert-description-color:var(--alert-error-description-color)}.alert.alert--warning{--alert-bg:var(--alert-warning-bg);--alert-border-color:var(--alert-warning-border-color);--alert-title-color:var(--alert-warning-title-color);--alert-description-color:var(--alert-warning-description-color);--close-button-color:var(--alert-warning-close-color);--close-button-focus-ring-color:var(--alert-warning-close-color)}
+:root{--alert-padding-block:var(--spacing-4);--alert-padding-inline:var(--spacing-5);--alert-gap:var(--spacing-3);--alert-content-gap:var(--spacing-2);--alert-actions-margin-block-start:var(--spacing-3);--alert-title-line-height:var(--line-height-snug);--alert-close-size:var(--size-component-sm);--alert-close-inset:var(--spacing-2);--alert-border-radius:var(--border-radius-default);--alert-border-width:var(--border-width-default);--alert-actions-gap:var(--form-actions-gap);--alert-bg:var(--color-primary);--alert-border-color:var(--color-text-on-dark);--alert-title-font-size:var(--text-font-size);--alert-title-font-weight:var(--font-weight-emphasis);--alert-title-color:var(--color-text-on-dark);--alert-description-font-size:var(--text-font-size);--alert-description-line-height:var(--text-line-height);--alert-description-color:var(--color-text-on-dark);--alert-success-bg:var(--color-success-fill);--alert-success-border-color:var(--color-success-fill);--alert-success-title-color:var(--color-success-fill-text);--alert-success-description-color:var(--color-success-fill-text);--alert-error-bg:var(--color-error-fill);--alert-error-border-color:var(--color-error-fill);--alert-error-title-color:var(--color-error-fill-text);--alert-error-description-color:var(--color-error-fill-text);--alert-warning-bg:var(--color-warning-fill);--alert-warning-border-color:var(--color-warning-fill);--alert-title-letter-spacing:var(--text-h2-letter-spacing);--alert-warning-title-color:var(--color-warning-fill-text);--alert-warning-description-color:var(--color-warning-fill-text);--alert-warning-close-color:var(--color-warning-fill-text)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--alert-bg:var(--color-text-on-dark);--alert-border-color:var(--color-text-on-dark);--alert-title-color:var(--color-primary);--alert-description-color:var(--color-primary)}.alert{background-color:var(--alert-bg);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-border-radius);padding-block:var(--alert-padding-block);padding-inline:var(--alert-padding-inline);align-items:flex-start;gap:var(--alert-gap);box-sizing:border-box;--alert-title-ink:var(--alert-title-color);--alert-description-ink:var(--alert-description-color);display:flex;position:relative}.alert.alert--dismissible{padding-inline-end:calc(var(--alert-close-inset) * 2 + var(--alert-close-size))}.alert__content{flex:1;min-inline-size:0}.alert__title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);color:var(--alert-title-ink);line-height:var(--alert-title-line-height);letter-spacing:var(--alert-title-letter-spacing);margin:0}.alert__description{font-size:var(--alert-description-font-size);color:var(--alert-description-ink);line-height:var(--alert-description-line-height);margin:0;align-items:start;gap:var(--alert-content-gap);flex-direction:column;margin-block-start:var(--alert-content-gap);display:flex}.alert__actions{align-items:stretch;gap:var(--alert-actions-gap);flex-direction:column;margin-block-start:var(--alert-actions-margin-block-start);display:flex}.alert__actions>*{inline-size:100%}@media (width>=768px){.alert__actions{flex-flow:wrap;align-items:center}.alert__actions>*{inline-size:auto}}.alert .link,.alert a:not(.button){color:var(--alert-description-ink);-webkit-text-decoration-line:var(--link-ink-decoration-line);text-decoration-line:var(--link-ink-decoration-line);text-decoration-thickness:var(--link-ink-underline-width);text-underline-offset:calc(var(--link-underline-offset) - var(--link-ink-underline-width))}.alert .link:hover,.alert a:not(.button):hover{color:var(--alert-description-ink);-webkit-text-decoration-line:var(--link-ink-hover-decoration-line);text-decoration-line:var(--link-ink-hover-decoration-line);text-decoration-thickness:var(--link-ink-hover-underline-width);text-underline-offset:calc(var(--link-underline-offset) - var(--link-ink-hover-underline-width))}.alert .link:focus-visible,.alert a:not(.button):focus-visible{outline-color:var(--alert-description-ink)}.alert .alert__close{--close-button-size:var(--alert-close-size);position:absolute;inset-block-start:var(--alert-close-inset);inset-inline-end:var(--alert-close-inset)}.alert.alert--success{--alert-bg:var(--alert-success-bg);--alert-border-color:var(--alert-success-border-color);--alert-title-color:var(--alert-success-title-color);--alert-description-color:var(--alert-success-description-color)}.alert.alert--error{--alert-bg:var(--alert-error-bg);--alert-border-color:var(--alert-error-border-color);--alert-title-color:var(--alert-error-title-color);--alert-description-color:var(--alert-error-description-color)}.alert.alert--warning{--alert-bg:var(--alert-warning-bg);--alert-border-color:var(--alert-warning-border-color);--alert-title-color:var(--alert-warning-title-color);--alert-description-color:var(--alert-warning-description-color);--close-button-color:var(--alert-warning-close-color);--close-button-focus-ring-color:var(--alert-warning-close-color)}

package/dist/alert.js

@@ -1,96 +1,4 @@
 'use client';
 import './alert.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { CloseButton as t } from "./close-button.js";
-import { forwardRef as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/stories/molecules/Alert/Alert.tsx
-var o = {
-	default: "status",
-	success: "status",
-	error: "alert",
-	warning: "alert"
-}, s = {
-	default: " surface-invert",
-	warning: " surface-light",
-	success: "",
-	error: ""
-}, c = n(function({ className: e, children: t, ...n }, r) {
-	return /* @__PURE__ */ i("p", {
-		ref: r,
-		className: ["alert__title", e ?? ""].filter(Boolean).join(" "),
-		...n,
-		children: t
-	});
-}), l = n(function({ className: e, children: t, ...n }, r) {
-	return /* @__PURE__ */ i("div", {
-		ref: r,
-		className: ["alert__description", e ?? ""].filter(Boolean).join(" "),
-		...n,
-		children: t
-	});
-}), u = n(function({ className: e, children: t, ...n }, r) {
-	return /* @__PURE__ */ i("div", {
-		ref: r,
-		className: ["alert__actions", e ?? ""].filter(Boolean).join(" "),
-		...n,
-		children: t
-	});
-}), d = n(function({ variant: n = "default", title: c, description: l, actions: u, dismissible: d = !1, onDismiss: f, finalFocus: p, closeLabel: m, className: h, children: g, role: _, ...v }, y) {
-	let b = e("alert"), [x, S] = r(!1);
-	if (x) return null;
-	let C = [
-		"alert",
-		n === "default" ? "" : `alert--${n}`,
-		n === "success" || n === "error" ? "surface-dark" : "",
-		d ? "alert--dismissible" : "",
-		h ?? ""
-	].filter(Boolean).join(" "), w = s[n];
-	function T() {
-		if (typeof document > "u") return;
-		let e = p?.current;
-		if (e) {
-			e.focus();
-			return;
-		}
-		let t = document.body, n = t.hasAttribute("tabindex");
-		n || t.setAttribute("tabindex", "-1"), t.focus(), n || t.removeAttribute("tabindex");
-	}
-	function E() {
-		T(), f ? f() : S(!0);
-	}
-	return /* @__PURE__ */ a("div", {
-		ref: y,
-		role: _ ?? o[n],
-		className: C,
-		...v,
-		children: [/* @__PURE__ */ a("div", {
-			className: `alert__content${w}`,
-			children: [
-				c && /* @__PURE__ */ i("p", {
-					className: "alert__title",
-					children: c
-				}),
-				l && /* @__PURE__ */ i("div", {
-					className: "alert__description",
-					children: l
-				}),
-				g,
-				u && /* @__PURE__ */ i("div", {
-					className: "alert__actions",
-					children: u
-				})
-			]
-		}), d && /* @__PURE__ */ i(t, {
-			className: `alert__close${w}`,
-			label: b("close", m),
-			onClick: E
-		})]
-	});
-}), f = Object.assign(d, {
-	Title: c,
-	Description: l,
-	Actions: u
-});
-//#endregion
-export { f as Alert, u as AlertActions, l as AlertDescription, c as AlertTitle };
+import { i as e, n as t, r as n, t as r } from "./_shared/alert.js";
+export { r as Alert, t as AlertActions, n as AlertDescription, e as AlertTitle };

package/dist/annotation-thread.css

@@ -1 +1 @@
-.annotation-thread{gap:var(--annotation-thread-gap);padding-block:var(--annotation-thread-padding-block);padding-inline:var(--annotation-thread-padding-inline);border:var(--annotation-thread-border-width) var(--annotation-thread-border-style) var(--annotation-thread-border-color);flex-direction:column;display:flex}.annotation-thread.annotation-thread--acknowledged{opacity:var(--annotation-thread-acknowledged-opacity)}.annotation-thread.annotation-thread--resolved{opacity:var(--annotation-thread-resolved-opacity)}.annotation-thread__status{display:flex}.annotation-thread__item{gap:var(--annotation-thread-item-gap);flex-direction:column;display:flex}.annotation-thread__header{align-items:center;gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__avatar{flex-shrink:0;display:inline-flex}.annotation-thread__author{font-family:var(--annotation-thread-author-font-family);font-size:var(--annotation-thread-author-font-size);font-weight:var(--annotation-thread-author-font-weight);color:var(--annotation-thread-author-color)}.annotation-thread__date,.annotation-thread__edited{font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color)}.annotation-thread__meta{align-items:center;gap:var(--annotation-thread-header-gap);overflow-wrap:anywhere;min-inline-size:0;font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color);flex-wrap:wrap;display:inline-flex}.annotation-thread__body{font-size:var(--annotation-thread-body-font-size);line-height:var(--annotation-thread-body-line-height);color:var(--annotation-thread-body-color)}.annotation-thread__item-actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__replies{gap:var(--annotation-thread-items-gap);border-inline-start:var(--annotation-thread-reply-guide-width) var(--annotation-thread-reply-guide-style) var(--annotation-thread-reply-guide-color);flex-direction:column;padding-inline-start:var(--annotation-thread-reply-indent);display:flex}.annotation-thread__replies-label{font-size:var(--annotation-thread-replies-label-font-size);color:var(--annotation-thread-replies-label-color);margin-block:0}.annotation-thread__actions{align-items:stretch;gap:var(--annotation-thread-actions-gap);flex-direction:column;display:flex}.annotation-thread__actions>*{inline-size:100%}
+.annotation-thread{gap:var(--annotation-thread-gap);padding-block:var(--annotation-thread-padding-block);padding-inline:var(--annotation-thread-padding-inline);border:var(--annotation-thread-border-width) var(--annotation-thread-border-style) var(--annotation-thread-border-color);flex-direction:column;display:flex}.annotation-thread__status{display:flex}.annotation-thread__item{gap:var(--annotation-thread-item-gap);flex-direction:column;display:flex}.annotation-thread__header{align-items:center;gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__avatar{flex-shrink:0;display:inline-flex}.annotation-thread__author{font-family:var(--annotation-thread-author-font-family);font-size:var(--annotation-thread-author-font-size);font-weight:var(--annotation-thread-author-font-weight);color:var(--annotation-thread-author-color)}.annotation-thread__date,.annotation-thread__edited{font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color)}.annotation-thread__meta{align-items:center;gap:var(--annotation-thread-header-gap);overflow-wrap:anywhere;min-inline-size:0;font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color);flex-wrap:wrap;display:inline-flex}.annotation-thread__body{font-size:var(--annotation-thread-body-font-size);line-height:var(--annotation-thread-body-line-height);color:var(--annotation-thread-body-color)}.annotation-thread__item-actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__replies{gap:var(--annotation-thread-items-gap);border-inline-start:var(--annotation-thread-reply-guide-width) var(--annotation-thread-reply-guide-style) var(--annotation-thread-reply-guide-color);flex-direction:column;padding-inline-start:var(--annotation-thread-reply-indent);display:flex}.annotation-thread__replies-label{font-size:var(--annotation-thread-replies-label-font-size);color:var(--annotation-thread-replies-label-color);margin-block:0}.annotation-thread__actions{align-items:stretch;gap:var(--annotation-thread-actions-gap);flex-direction:column;display:flex}.annotation-thread__actions>*{inline-size:100%}

package/dist/annotation-thread.js

@@ -1,21 +1,28 @@
 'use client';
 import './annotation-thread.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { Tag as t } from "./tag.js";
 import "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/stories/organisms/AnnotationThread/AnnotationThread.tsx
+//#region src/stories/messages/es/annotationThread.ts
 var i = {
+	label: "Hilo de anotaciones",
+	open: "Abierta",
+	acknowledged: "Atendida",
+	resolved: "Resuelta",
+	edited: "editada",
+	replies: (e) => e === 1 ? "1 respuesta" : `${e} respuestas`
+}, a = {
 	open: "warning",
 	acknowledged: "info",
 	resolved: "success"
-}, a = {
+}, o = {
 	day: "numeric",
 	month: "short",
 	hour: "2-digit",
 	minute: "2-digit"
 };
-function o({ entry: e, locale: t, dateFormat: i, editedLabel: a }) {
+function s({ entry: e, locale: t, dateFormat: i, editedLabel: a }) {
 	let o = e.date instanceof Date ? e.date : new Date(e.date), s = new Intl.DateTimeFormat(t, i).format(o);
 	return /* @__PURE__ */ r("article", {
 		className: "annotation-thread__item",
@@ -57,56 +64,56 @@ function o({ entry: e, locale: t, dateFormat: i, editedLabel: a }) {
 		]
 	});
 }
-function s({ annotation: s, replies: c = [], status: l = "open", actions: u, reply: d, locale: f = "es-ES", dateFormat: p = a, openLabel: m, acknowledgedLabel: h, resolvedLabel: g, editedLabel: _, repliesLabel: v, label: y, className: b, ...x }) {
-	let S = e("annotationThread");
+function c({ annotation: c, replies: l = [], status: u = "open", actions: d, reply: f, locale: p = "es-ES", dateFormat: m = o, openLabel: h, acknowledgedLabel: g, resolvedLabel: _, editedLabel: v, repliesLabel: y, label: b, className: x, ...S }) {
+	let C = e("annotationThread", i);
 	return /* @__PURE__ */ r("article", {
 		className: [
 			"annotation-thread",
-			l === "open" ? "" : `annotation-thread--${l}`,
-			b ?? ""
+			u === "open" ? "" : `annotation-thread--${u}`,
+			x ?? ""
 		].filter(Boolean).join(" "),
-		"aria-label": S("label", y),
-		...x,
+		"aria-label": C("label", b),
+		...S,
 		children: [
 			/* @__PURE__ */ n("div", {
 				className: "annotation-thread__status",
 				children: /* @__PURE__ */ n(t, {
-					variant: i[l],
+					tone: a[u],
 					children: {
-						open: () => S("open", m),
-						acknowledged: () => S("acknowledged", h),
-						resolved: () => S("resolved", g)
-					}[l]()
+						open: () => C("open", h),
+						acknowledged: () => C("acknowledged", g),
+						resolved: () => C("resolved", _)
+					}[u]()
 				})
 			}),
-			/* @__PURE__ */ n(o, {
-				entry: s,
-				locale: f,
-				dateFormat: p,
-				editedLabel: () => S("edited", _)
+			/* @__PURE__ */ n(s, {
+				entry: c,
+				locale: p,
+				dateFormat: m,
+				editedLabel: () => C("edited", v)
 			}),
-			c.length > 0 && /* @__PURE__ */ r("div", {
+			l.length > 0 && /* @__PURE__ */ r("div", {
 				className: "annotation-thread__replies",
 				children: [/* @__PURE__ */ n("p", {
 					className: "annotation-thread__replies-label",
-					children: S("replies", v)(c.length)
-				}), c.map((e) => /* @__PURE__ */ n(o, {
+					children: C("replies", y)(l.length)
+				}), l.map((e) => /* @__PURE__ */ n(s, {
 					entry: e,
-					locale: f,
-					dateFormat: p,
-					editedLabel: () => S("edited", _)
+					locale: p,
+					dateFormat: m,
+					editedLabel: () => C("edited", v)
 				}, e.id))]
 			}),
-			d && /* @__PURE__ */ n("div", {
+			f && /* @__PURE__ */ n("div", {
 				className: "annotation-thread__reply",
-				children: d
+				children: f
 			}),
-			u && /* @__PURE__ */ n("footer", {
+			d && /* @__PURE__ */ n("footer", {
 				className: "annotation-thread__actions",
-				children: u
+				children: d
 			})
 		]
 	});
 }
 //#endregion
-export { s as AnnotationThread };
+export { c as AnnotationThread };

package/dist/app-header.css

@@ -1 +1 @@
-.app-header{align-items:center;gap:var(--app-header-gap);block-size:var(--app-header-height);padding-inline:var(--app-header-padding-inline);box-sizing:content-box;background-color:var(--app-header-bg);box-shadow:0 var(--app-header-border-width) 0 var(--app-header-border-color);z-index:var(--app-header-z-index);flex-shrink:0;padding-block-start:env(safe-area-inset-top);display:flex;position:sticky;inset-block-start:0}.app-header__start{flex:1;align-items:center;min-inline-size:0;display:flex}.app-header__notifications,.app-header__end{flex-shrink:0;align-items:center;display:flex}.app-header__logo{box-shadow:none;color:inherit;--logo-height-sm:var(--app-header-content-height);--logo-height-md:var(--app-header-content-height);--logo-height-lg:var(--app-header-content-height);--logo-height-xl:var(--app-header-content-height);--logo-height-xxl:var(--app-header-content-height);flex-shrink:0;align-items:center;padding-block-end:0;display:flex}.app-header__logo:hover{box-shadow:none;color:inherit}.app-header__logo>*{block-size:var(--app-header-content-height);inline-size:auto}
+.app-header{align-items:center;gap:var(--app-header-gap);block-size:var(--app-header-height);padding-inline:var(--app-header-padding-inline);box-sizing:content-box;background-color:var(--app-header-bg);box-shadow:0 var(--app-header-border-width) 0 var(--app-header-border-color);z-index:var(--app-header-z-index);flex-shrink:0;padding-block-start:env(safe-area-inset-top);display:flex;position:sticky;inset-block-start:0}.app-header__start{flex:1;align-items:center;min-inline-size:0;display:flex}.app-header__notifications,.app-header__end{flex-shrink:0;align-items:center;display:flex}.app-header__logo{color:inherit;--logo-height-sm:var(--app-header-content-height);--logo-height-md:var(--app-header-content-height);--logo-height-lg:var(--app-header-content-height);--logo-height-xl:var(--app-header-content-height);--logo-height-2xl:var(--app-header-content-height);flex-shrink:0;align-items:center;padding-block-end:0;text-decoration-line:none;display:flex}.app-header__logo:hover{color:inherit;text-decoration-line:none}.app-header__logo>*{block-size:var(--app-header-content-height);inline-size:auto}

package/dist/app-header.js

@@ -1,50 +1,48 @@
 'use client';
 import './app-header.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { MenuButton as t } from "./menu-button.js";
-import { t as n } from "./_shared/appshellcontext.js";
-import { useContext as r, useState as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { r as e } from "./_shared/brandmessagescontext.js";
+import { t } from "./_shared/menubutton.js";
+import { t as n } from "./_shared/default-render-link.js";
+import { t as r } from "./_shared/appshellcontext.js";
+import { useContext as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/stories/messages/es/appHeader.ts
+var c = { logo: "Ir al inicio" };
+//#endregion
 //#region src/stories/sections/AppHeader/AppHeader.tsx
-function s({ children: e, ...t }) {
-	return /* @__PURE__ */ a("a", {
-		...t,
-		children: e
-	});
-}
-function c({ logo: c, logoHref: l = "/", logoLabel: u, renderLogoLink: d = s, start: f, notifications: p, end: m, menuLabel: h, menuCloseLabel: g, sidebarId: _ }) {
-	let v = r(n), [y, b] = i(!1), x = v ? v.sidebar === "open" : y, S = v ? v.toggleSidebar : () => b((e) => !e), C = e("appHeader");
-	return /* @__PURE__ */ o("header", {
-		className: "app-header",
+function l({ logo: l, logoHref: u = "/", logoLabel: d, renderLogoLink: f = n, start: p, notifications: m, end: h, menuLabel: g, menuCloseLabel: _, sidebarId: v, className: y }) {
+	let b = i(r), [x, S] = a(!1), C = b ? b.sidebar === "open" : x, w = b ? b.toggleSidebar : () => S((e) => !e), T = e("appHeader", c);
+	return /* @__PURE__ */ s("header", {
+		className: ["app-header", y].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ a(t, {
-				isOpen: x,
-				onClick: S,
-				label: h,
-				closeLabel: g,
-				"aria-controls": _,
-				"aria-expanded": x
+			/* @__PURE__ */ o(t, {
+				isOpen: C,
+				onClick: w,
+				label: g,
+				closeLabel: _,
+				"aria-controls": v,
+				"aria-expanded": C
 			}),
-			c && d({
-				href: l,
+			l && f({
+				href: u,
 				className: "app-header__logo",
-				"aria-label": C("logo", u),
-				children: c
+				"aria-label": T("logo", d),
+				children: l
 			}),
-			/* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("div", {
 				className: "app-header__start",
-				children: f
+				children: p
 			}),
-			p && /* @__PURE__ */ a("div", {
+			m && /* @__PURE__ */ o("div", {
 				className: "app-header__notifications",
-				children: p
+				children: m
 			}),
-			m && /* @__PURE__ */ a("div", {
+			h && /* @__PURE__ */ o("div", {
 				className: "app-header__end",
-				children: m
+				children: h
 			})
 		]
 	});
 }
 //#endregion
-export { c as AppHeader };
+export { l as AppHeader };