@studiolxd/brand 38.12.4 → 38.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +59 -0
  2. package/README.md +127 -60
  3. package/dist/_types/atoms/Inline/Inline.d.ts +10 -1
  4. package/dist/banner.css +1 -1
  5. package/dist/consent.css +1 -1
  6. package/dist/conversation-thread.css +1 -1
  7. package/dist/description-list.css +1 -1
  8. package/dist/filter-bar.css +1 -1
  9. package/dist/highlight.js +1 -0
  10. package/dist/inline.css +1 -1
  11. package/dist/inline.js +5 -4
  12. package/dist/message-bubble.css +1 -1
  13. package/dist/recovery-codes.js +1 -0
  14. package/package.json +7 -1
package/CHANGELOG.md CHANGED
@@ -7,6 +7,65 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
7
7
  regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
8
8
  para breaking changes.
9
9
 
10
+ ## [38.14.0] — 2026-09-15
11
+
12
+ > **Minor.** En móvil, las acciones ocupan la línea porque lo decide el sitio
13
+ > donde viven, no cada botón. Ninguna prop cambia; el dibujo sí, en cinco
14
+ > componentes.
15
+
16
+ ### La norma: el ancho lo decide el contenedor
17
+
18
+ `.form__actions` ya lo hacía y los otros catorce contenedores de acciones no,
19
+ así que un botón suelto solo se estiraba si alguien se acordaba de pedírselo
20
+ pieza por pieza. Ahora la norma es del sistema y está escrita en
21
+ `Foundations/Breakpoints`, con el patrón, dónde se aplica y —sobre todo—
22
+ dónde NO.
23
+
24
+ Entran `Banner`, `ConsentBanner`, `FilterBar`, `Highlight` y
25
+ `RecoveryCodes`. Se quedan fuera, a propósito, las acciones que viven DENTRO
26
+ de una fila y no son un pie: las de `NotificationList`, `TreeView` y
27
+ `MessageComposer` —estirarlas rompería la fila que les da sentido— y las de
28
+ `SiteHeader`, que en móvil ni se pintan. `AnnotationThread` queda anotado
29
+ como dudoso: vive en un panel estrecho también en escritorio, así que su caso
30
+ es de consulta de contenedor, no de anchura de ventana.
31
+
32
+ ### `DescriptionList` mide su hueco
33
+
34
+ No fijaba su ancho, así que dependía de dónde se pusiera: dentro de un
35
+ contenedor que alinea al principio se encogía al contenido y los filetes
36
+ salían a media línea, en móvil y en escritorio. Ahora el ancho es de la ficha.
37
+
38
+ ## [38.13.0] — 2026-09-15
39
+
40
+ > **Minor.** Las burbujas del chat parten el texto que no cabe, una fila puede
41
+ > apilarse en móvil, y el paquete estrena README de verdad.
42
+
43
+ ### `MessageBubble` — una URL ya no se come el pico
44
+
45
+ `.message-bubble` no declaraba `overflow-wrap`, así que una URL o una palabra
46
+ larga sin espacios no partía: el texto se salía por la derecha, cruzaba el
47
+ borde del globo, tapaba su cola y abría scroll horizontal en el hilo. Medido a
48
+ 390px, un globo de 273px con 431px de contenido. Ahora es `anywhere`, que
49
+ además encoge el tamaño mínimo intrínseco de la caja y hace que el globo
50
+ respete su `max-width`. De cinturón, `ConversationThread` recorta el eje
51
+ horizontal (`overflow-x: clip`, que no crea contexto de desplazamiento): un
52
+ bloque que aun así desborde —un `<pre>`, una tabla— no abre una barra.
53
+
54
+ ### `Inline` — `stack="mobile"`
55
+
56
+ Por debajo de `md` la fila pasa a columna y cada pieza ocupa el ancho. Es lo
57
+ que quiere una fila de un control con su acción —un campo de mes y
58
+ «Descargar», un selector y un botón— en una pantalla estrecha, donde repartir
59
+ dos piezas deja a las dos sin sitio. La envoltura de `flex-wrap` no servía:
60
+ baja la pieza de línea pero la deja a su ancho natural.
61
+
62
+ ### El README
63
+
64
+ Era literalmente la plantilla de Vite. Ahora cuenta qué es el paquete, cómo se
65
+ instala y se importa, qué trae, de dónde salen los tokens y qué NO es. Con él,
66
+ `description`, `repository` y `homepage`, que es lo que la página de npm
67
+ enseña.
68
+
10
69
  ## [38.12.4] — 2026-09-14
11
70
 
12
71
  > **Patch.** El paquete queda listo para publicarse en npm. Nada de código.
package/README.md CHANGED
@@ -1,73 +1,140 @@
1
- # React + TypeScript + Vite
1
+ # @studiolxd/brand
2
2
 
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3
+ El sistema de diseño de Studio LXD: los componentes React, los tokens y la
4
+ documentación con los que se visten las doce aplicaciones de la suite SLXD.
5
+ No es un tema ni una hoja de estilos suelta — es la capa de interfaz completa,
6
+ y el catálogo de Storybook es su fuente de verdad.
4
7
 
5
- Currently, two official plugins are available:
8
+ ## Instalación
6
9
 
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
10
+ ```sh
11
+ pnpm add @studiolxd/brand
12
+ ```
13
+
14
+ El paquete declara como peer dependencies `react` y `react-dom` (>=18) y
15
+ `react-hook-form` (>=7), del que dependen el `Form` y todos los campos que se
16
+ atan a él. `react-email` (>=6) es un peer **opcional**: solo hace falta si se
17
+ consume el subpath `@studiolxd/brand/email`.
18
+
19
+ ## Uso
20
+
21
+ Los estilos se importan una vez, en el layout raíz. `brand.css` trae el
22
+ normalize, los tokens y la base tipográfica; `fonts.css` es la hoja de
23
+ `@font-face` con las tres familias de la marca, que el paquete sirve por su
24
+ cuenta —no hace falta `next/font` ni un `<link>` a Google Fonts.
25
+
26
+ ```ts
27
+ import '@studiolxd/brand/brand.css';
28
+ import '@studiolxd/brand/fonts.css';
29
+ ```
30
+
31
+ No hay barril: cada componente se importa por su propia subruta, y el CSS de
32
+ ese componente viaja con él.
33
+
34
+ ```tsx
35
+ import { Button } from '@studiolxd/brand/button';
36
+ import { InputField } from '@studiolxd/brand/input-field';
37
+
38
+ export function Ejemplo() {
39
+ return (
40
+ <form>
41
+ <InputField id="correo" name="correo" label="Correo electrónico" type="email" />
42
+ <Button type="submit">Entrar</Button>
43
+ </form>
44
+ );
45
+ }
46
+ ```
47
+
48
+ La subruta es el nombre del componente en kebab-case. El bloque `exports` del
49
+ `package.json` las lista todas.
50
+
51
+ ## Qué trae
9
52
 
10
- ## React Compiler
53
+ Los componentes se organizan en Atomic Design, y el paquete publica 164
54
+ subrutas de componente repartidas así:
11
55
 
12
- The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
56
+ - **64 átomos** — los elementos básicos: `Button`, `Input`, `Link`, `Heading`,
57
+ `Tabs`, `Tooltip`, `Icon` (77 glifos dibujados en el propio repo)…
58
+ - **73 moléculas** — combinaciones de átomos: `InputField`, `Form`, `Modal`,
59
+ `Table`, `Menu`, `Calendar`, `Pagination`…
60
+ - **5 organismos** — piezas complejas con lógica propia: `Chart`, `DataTable`,
61
+ `Steps`, `ConversationThread`, `AnnotationThread`.
62
+ - **11 secciones** — bloques de página: `AppHeader`, `SiteHeader`, `Sidebar`,
63
+ `SiteShell`, `Hero`…
64
+ - **11 plantillas** — páginas enteras listas para envolver contenido:
65
+ `PublicPageShell`, `OnboardingShell`, `ChatShell`, `ErrorPage`,
66
+ `NotFoundPage` y las seis piezas del consentimiento de conectores.
13
67
 
14
- ## Expanding the ESLint configuration
68
+ Cada uno de los 159 componentes tiene sus stories en el catálogo, y 155 llevan
69
+ además una página propia de documentación en MDX con su API y sus reglas de
70
+ uso.
15
71
 
16
- If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
72
+ Fuera del Atomic Design hay tres subpaths más: `@studiolxd/brand/email`, con
73
+ las primitivas de correo sobre `react-email`; `@studiolxd/brand/og`, para las
74
+ tarjetas sociales; y `@studiolxd/brand/brand-assets`, con el logotipo y las
75
+ marcas.
17
76
 
18
- ```js
19
- export default defineConfig([
20
- globalIgnores(['dist']),
21
- {
22
- files: ['**/*.{ts,tsx}'],
23
- extends: [
24
- // Other configs...
77
+ ## Los tokens
25
78
 
26
- // Remove tseslint.configs.recommended and replace with this
27
- tseslint.configs.recommendedTypeChecked,
28
- // Alternatively, use this for stricter rules
29
- tseslint.configs.strictTypeChecked,
30
- // Optionally, add this for stylistic rules
31
- tseslint.configs.stylisticTypeChecked,
79
+ Toda propiedad visual del sistema sale de un token. Las definiciones viven en
80
+ `tokens/`, en ficheros JSON con el formato del Design Tokens Community Group
81
+ (`$value`, `$type`, `$description`), y Style Dictionary las compila a cuatro
82
+ salidas. Hoy son 3.265 tokens.
32
83
 
33
- // Other configs...
34
- ],
35
- languageOptions: {
36
- parserOptions: {
37
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
38
- tsconfigRootDir: import.meta.dirname,
39
- },
40
- // other options...
41
- },
42
- },
43
- ])
84
+ Una aplicación React ya los tiene: `brand.css` los declara en `:root`, así que
85
+ se consumen como custom properties.
86
+
87
+ ```css
88
+ .mi-bloque {
89
+ color: var(--color-primary);
90
+ padding-block: var(--spacing-4);
91
+ }
92
+ ```
93
+
94
+ Una aplicación que no use React —PHP, un servidor, una herramienta de diseño—
95
+ recibe los mismos tokens en SCSS, con los valores ya resueltos y prefijo
96
+ `$lxd-`. Hay un entrypoint moderno con `@forward` y otro legacy con `@import`,
97
+ para compiladores sin `@use`.
98
+
99
+ ```scss
100
+ @use '@studiolxd/brand/scss' as brand;
101
+
102
+ .mi-bloque { color: brand.$lxd-color-primary; }
44
103
  ```
45
104
 
46
- You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
47
-
48
- ```js
49
- // eslint.config.js
50
- import reactX from 'eslint-plugin-react-x'
51
- import reactDom from 'eslint-plugin-react-dom'
52
-
53
- export default defineConfig([
54
- globalIgnores(['dist']),
55
- {
56
- files: ['**/*.{ts,tsx}'],
57
- extends: [
58
- // Other configs...
59
- // Enable lint rules for React
60
- reactX.configs['recommended-typescript'],
61
- // Enable lint rules for React DOM
62
- reactDom.configs.recommended,
63
- ],
64
- languageOptions: {
65
- parserOptions: {
66
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
67
- tsconfigRootDir: import.meta.dirname,
68
- },
69
- // other options...
70
- },
71
- },
72
- ])
105
+ Y quien necesite el valor como dato y no como CSS —un correo, un canvas, un
106
+ PDF— tiene `@studiolxd/brand/tokens`, un mapa plano con los valores resueltos
107
+ y dos ayudas, `token()` y `tokenPx()`.
108
+
109
+ El sistema tiene tema claro y oscuro. El oscuro no se escribe a mano: se
110
+ deriva de los propios tokens y se activa con `data-theme="dark"`, `html.dark`
111
+ o la clase `.surface-dark` en cualquier contenedor.
112
+
113
+ ## El catálogo
114
+
115
+ ```sh
116
+ pnpm install
117
+ pnpm storybook
73
118
  ```
119
+
120
+ Storybook arranca en el puerto 6006 y es la fuente de verdad del sistema: las
121
+ props de un componente, sus variantes y sus reglas de uso son las que están
122
+ ahí, no las que uno supondría por el nombre. Junto a los componentes hay 17
123
+ páginas de fundamentos —color, tipografía, espaciado, bordes y radios,
124
+ iconografía, movimiento, capas, marca, internacionalización— que explican el
125
+ porqué de las decisiones; la documentación de cada componente explica su API
126
+ y remite a ellas.
127
+
128
+ La regresión visual se comprueba en Chromatic, con cada story capturada en
129
+ claro y en oscuro.
130
+
131
+ ## Qué no es
132
+
133
+ Esto no es una librería de propósito general ni pretende serlo. Es el sistema
134
+ de diseño de una suite concreta, y se publica porque las aplicaciones que lo
135
+ consumen lo instalan como cualquier otra dependencia. El código está a la
136
+ vista y se puede leer y estudiar; lo que no está abierto es el diseño: la
137
+ paleta, la escala tipográfica, las variantes de cada componente y las reglas
138
+ que las gobiernan responden a la marca de Studio LXD y se deciden aquí
139
+ dentro. Si el sistema le sirve tal cual a alguien más, encantados; si hace
140
+ falta que sea otra cosa, un fork es mejor camino que una petición.
package/dist/_types/atoms/Inline/Inline.d.ts CHANGED
@@ -14,6 +14,15 @@ export interface InlineProps extends React.ComponentPropsWithoutRef<'div'> {
14
14
  * separadas a los extremos.
15
15
  */
16
16
  justify?: 'start' | 'center' | 'end' | 'between';
17
+ /**
18
+ * `mobile`: por debajo de `md` la fila se apila y cada pieza ocupa el ancho.
19
+ * Es lo que quiere una fila de un control con su acción —un selector y un
20
+ * botón, un campo de mes y «Descargar»— en una pantalla estrecha, donde
21
+ * repartir dos piezas a lo ancho deja a las dos sin sitio. La envoltura de
22
+ * `flex-wrap` no vale: baja la pieza de línea, pero la deja a su ancho
23
+ * natural (2026-09-14).
24
+ */
25
+ stack?: 'mobile';
17
26
  children: ReactNode;
18
27
  /** Se añade DESPUÉS de las clases propias. */
19
28
  className?: string;
@@ -31,4 +40,4 @@ export interface InlineProps extends React.ComponentPropsWithoutRef<'div'> {
31
40
  * fila puede ser un grupo o una barra de herramientas con nombre accesible sin
32
41
  * envolverla en otro elemento.
33
42
  */
34
- export declare function Inline({ gap, align, justify, children, className, ...rest }: InlineProps): import("react/jsx-runtime").JSX.Element;
43
+ export declare function Inline({ gap, align, justify, stack, children, className, ...rest }: InlineProps): import("react/jsx-runtime").JSX.Element;
package/dist/banner.css CHANGED
@@ -1 +1 @@
1
- :root{--banner-padding-block:var(--spacing-3);--banner-padding-inline:var(--spacing-5);--banner-gap:var(--spacing-4);--banner-close-size:var(--size-component-sm);--banner-close-inset:var(--spacing-2);--banner-border-width:var(--border-width-default);--banner-font-size:var(--text-font-size);--banner-line-height:var(--text-line-height);--banner-info-bg:var(--color-primary);--banner-info-color:var(--color-text-on-dark);--banner-info-border-color:var(--color-text-on-dark);--banner-warning-bg:var(--color-warning-fill);--banner-warning-border-color:var(--color-warning-fill);--banner-warning-color:var(--color-warning-fill-text);--banner-warning-close-color:var(--color-warning-fill-text)}.banner{box-sizing:border-box;background-color:var(--banner-bg);inline-size:100%;color:var(--banner-color);border-block:var(--banner-border-width) solid var(--banner-border-color);padding-block:var(--banner-padding-block);padding-inline:var(--banner-padding-inline);font-size:var(--banner-font-size);line-height:var(--banner-line-height);align-items:flex-start;gap:var(--banner-gap);border-inline:0;flex-direction:column;display:flex;position:relative}.banner.banner--dismissible{padding-inline-end:calc(var(--banner-close-inset) * 2 + var(--banner-close-size))}.banner__content{min-inline-size:0}.banner__actions{align-items:center;gap:var(--banner-gap);flex-wrap:wrap;display:flex}.banner .banner__close{--close-button-size:var(--banner-close-size);position:absolute;inset-block-start:var(--banner-close-inset);inset-inline-end:var(--banner-close-inset)}@media (width>=768px){.banner{flex-direction:row;align-items:center}.banner__content{flex:1}}.banner.banner--info{--banner-bg:var(--banner-info-bg);--banner-color:var(--banner-info-color);--banner-border-color:var(--banner-info-border-color)}.banner.banner--warning{--banner-bg:var(--banner-warning-bg);--banner-color:var(--banner-warning-color);--banner-border-color:var(--banner-warning-border-color);--close-button-color:var(--banner-warning-close-color);--close-button-focus-ring-color:var(--banner-warning-close-color)}
1
+ :root{--banner-padding-block:var(--spacing-3);--banner-padding-inline:var(--spacing-5);--banner-gap:var(--spacing-4);--banner-close-size:var(--size-component-sm);--banner-close-inset:var(--spacing-2);--banner-border-width:var(--border-width-default);--banner-font-size:var(--text-font-size);--banner-line-height:var(--text-line-height);--banner-info-bg:var(--color-primary);--banner-info-color:var(--color-text-on-dark);--banner-info-border-color:var(--color-text-on-dark);--banner-warning-bg:var(--color-warning-fill);--banner-warning-border-color:var(--color-warning-fill);--banner-warning-color:var(--color-warning-fill-text);--banner-warning-close-color:var(--color-warning-fill-text)}.banner{box-sizing:border-box;background-color:var(--banner-bg);inline-size:100%;color:var(--banner-color);border-block:var(--banner-border-width) solid var(--banner-border-color);padding-block:var(--banner-padding-block);padding-inline:var(--banner-padding-inline);font-size:var(--banner-font-size);line-height:var(--banner-line-height);align-items:flex-start;gap:var(--banner-gap);border-inline:0;flex-direction:column;display:flex;position:relative}.banner.banner--dismissible{padding-inline-end:calc(var(--banner-close-inset) * 2 + var(--banner-close-size))}.banner__content{min-inline-size:0}.banner__actions{align-self:stretch;align-items:stretch;gap:var(--banner-gap);flex-direction:column;display:flex}.banner__actions>*{inline-size:100%}.banner .banner__close{--close-button-size:var(--banner-close-size);position:absolute;inset-block-start:var(--banner-close-inset);inset-inline-end:var(--banner-close-inset)}@media (width>=768px){.banner{flex-direction:row;align-items:center}.banner__content{flex:1}.banner__actions{flex-flow:wrap;align-self:auto;align-items:center}.banner__actions>*{inline-size:auto}}.banner.banner--info{--banner-bg:var(--banner-info-bg);--banner-color:var(--banner-info-color);--banner-border-color:var(--banner-info-border-color)}.banner.banner--warning{--banner-bg:var(--banner-warning-bg);--banner-color:var(--banner-warning-color);--banner-border-color:var(--banner-warning-border-color);--close-button-color:var(--banner-warning-close-color);--close-button-focus-ring-color:var(--banner-warning-close-color)}
package/dist/consent.css CHANGED
@@ -1 +1 @@
1
- .consent-banner{z-index:var(--consent-banner-z-index);background-color:var(--consent-banner-bg);color:var(--consent-banner-color);border-block-start:var(--consent-banner-border-width) solid var(--consent-banner-border-color);padding-block:var(--consent-banner-padding-block);padding-inline:var(--consent-banner-padding-inline);position:fixed;inset-block-end:0;inset-inline:0}.consent-banner__inner{justify-content:space-between;align-items:center;gap:var(--consent-banner-gap);max-inline-size:var(--consent-banner-max-inline-size);flex-wrap:wrap;margin-inline:auto;display:flex}.consent-banner__text{gap:var(--consent-banner-text-gap);flex-direction:column;flex:20rem;min-inline-size:0;display:flex}.consent-banner__title{font-size:var(--consent-banner-title-font-size);color:inherit;margin-block:0}.consent-banner__description{font-size:var(--consent-banner-description-font-size);color:inherit;margin-block:0}.consent-banner__actions{align-items:center;gap:var(--consent-banner-actions-gap);flex-wrap:wrap;display:flex}.consent-preferences{gap:var(--consent-preferences-gap);flex-direction:column;display:flex}.consent-preferences__list{gap:var(--consent-preferences-category-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}
1
+ .consent-banner{z-index:var(--consent-banner-z-index);background-color:var(--consent-banner-bg);color:var(--consent-banner-color);border-block-start:var(--consent-banner-border-width) solid var(--consent-banner-border-color);padding-block:var(--consent-banner-padding-block);padding-inline:var(--consent-banner-padding-inline);position:fixed;inset-block-end:0;inset-inline:0}.consent-banner__inner{justify-content:space-between;align-items:center;gap:var(--consent-banner-gap);max-inline-size:var(--consent-banner-max-inline-size);flex-wrap:wrap;margin-inline:auto;display:flex}.consent-banner__text{gap:var(--consent-banner-text-gap);flex-direction:column;flex:20rem;min-inline-size:0;display:flex}.consent-banner__title{font-size:var(--consent-banner-title-font-size);color:inherit;margin-block:0}.consent-banner__description{font-size:var(--consent-banner-description-font-size);color:inherit;margin-block:0}.consent-banner__actions{align-self:stretch;align-items:stretch;gap:var(--consent-banner-actions-gap);flex-direction:column;display:flex}.consent-banner__actions>*{inline-size:100%}@media (width>=768px){.consent-banner__actions{flex-flow:wrap;align-self:auto;align-items:center}.consent-banner__actions>*{inline-size:auto}}.consent-preferences{gap:var(--consent-preferences-gap);flex-direction:column;display:flex}.consent-preferences__list{gap:var(--consent-preferences-category-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}
package/dist/conversation-thread.css CHANGED
@@ -1 +1 @@
1
- .conversation-thread{gap:var(--conversation-thread-gap);min-block-size:0;padding-inline:var(--conversation-thread-padding-inline,calc(var(--message-bubble-tail-size) + var(--message-bubble-border-width)));flex-direction:column;flex:1;display:flex;overflow-y:auto}.conversation-thread[data-content=children]>:first-child:nth-last-child(2){margin-block:auto}
1
+ .conversation-thread{gap:var(--conversation-thread-gap);min-block-size:0;padding-inline:var(--conversation-thread-padding-inline,calc(var(--message-bubble-tail-size) + var(--message-bubble-border-width)));flex-direction:column;flex:1;display:flex;overflow:clip auto}.conversation-thread[data-content=children]>:first-child:nth-last-child(2){margin-block:auto}
package/dist/description-list.css CHANGED
@@ -1 +1 @@
1
- .description-list{border-width:var(--description-list-border-width);border-style:var(--description-list-border-style);border-color:var(--description-list-border-color);grid-template-columns:1fr;margin:0;display:grid}@media (width>=768px){.description-list{grid-template-columns:max-content 1fr}}.description-list>dt,.description-list>dd,.description-list>.description-list__term,.description-list>.description-list__details{padding-block:var(--description-list-cell-padding-block);padding-inline:var(--description-list-cell-padding-inline);margin:0}.description-list>dd,.description-list>.description-list__details{border-block-end-width:var(--description-list-border-width);border-block-end-style:var(--description-list-border-style);border-block-end-color:var(--description-list-border-color)}.description-list>dd:last-of-type,.description-list>.description-list__details:last-of-type{border-block-end:none}.description-list>dt,.description-list>.description-list__term{font-family:var(--description-list-term-font-family);font-size:var(--description-list-term-font-size);font-weight:var(--description-list-term-font-weight);line-height:var(--description-list-term-line-height);letter-spacing:var(--description-list-term-letter-spacing);color:var(--description-list-term-color);align-items:center;display:flex}@media (width>=768px){.description-list>dt,.description-list>.description-list__term{border-block-end-width:var(--description-list-border-width);border-block-end-style:var(--description-list-border-style);border-block-end-color:var(--description-list-border-color);border-inline-end-width:var(--description-list-border-width);border-inline-end-style:var(--description-list-border-style);border-inline-end-color:var(--description-list-border-color)}.description-list>dt:last-of-type,.description-list>.description-list__term:last-of-type{border-block-end:none}}.description-list>dd,.description-list>.description-list__details{font-family:var(--description-list-value-font-family);font-size:var(--description-list-value-font-size);font-weight:var(--description-list-value-font-weight);line-height:var(--description-list-value-line-height);color:var(--description-list-value-color)}
1
+ .description-list{border-width:var(--description-list-border-width);border-style:var(--description-list-border-style);border-color:var(--description-list-border-color);grid-template-columns:1fr;inline-size:100%;margin:0;display:grid}@media (width>=768px){.description-list{grid-template-columns:max-content 1fr}}.description-list>dt,.description-list>dd,.description-list>.description-list__term,.description-list>.description-list__details{padding-block:var(--description-list-cell-padding-block);padding-inline:var(--description-list-cell-padding-inline);margin:0}.description-list>dd,.description-list>.description-list__details{border-block-end-width:var(--description-list-border-width);border-block-end-style:var(--description-list-border-style);border-block-end-color:var(--description-list-border-color)}.description-list>dd:last-of-type,.description-list>.description-list__details:last-of-type{border-block-end:none}.description-list>dt,.description-list>.description-list__term{font-family:var(--description-list-term-font-family);font-size:var(--description-list-term-font-size);font-weight:var(--description-list-term-font-weight);line-height:var(--description-list-term-line-height);letter-spacing:var(--description-list-term-letter-spacing);color:var(--description-list-term-color);align-items:center;display:flex}@media (width>=768px){.description-list>dt,.description-list>.description-list__term{border-block-end-width:var(--description-list-border-width);border-block-end-style:var(--description-list-border-style);border-block-end-color:var(--description-list-border-color);border-inline-end-width:var(--description-list-border-width);border-inline-end-style:var(--description-list-border-style);border-inline-end-color:var(--description-list-border-color)}.description-list>dt:last-of-type,.description-list>.description-list__term:last-of-type{border-block-end:none}}.description-list>dd,.description-list>.description-list__details{font-family:var(--description-list-value-font-family);font-size:var(--description-list-value-font-size);font-weight:var(--description-list-value-font-weight);line-height:var(--description-list-value-line-height);color:var(--description-list-value-color)}
package/dist/filter-bar.css CHANGED
@@ -1 +1 @@
1
- .filter-bar{gap:var(--filter-bar-gap);flex-direction:column;display:flex}.filter-bar__search{inline-size:100%}.filter-bar__row{align-items:flex-end;column-gap:var(--filter-bar-column-gap);row-gap:var(--filter-bar-row-gap);flex-wrap:wrap;display:flex}.filter-bar__filters{flex:1 1 var(--filter-bar-column-min-inline-size);grid-template-columns:repeat(auto-fit, minmax(min(var(--filter-bar-column-min-inline-size), 100%), 1fr));column-gap:var(--filter-bar-column-gap);row-gap:var(--filter-bar-row-gap);min-inline-size:0;display:grid}.filter-bar__filter{min-inline-size:0}.filter-bar__actions{align-items:center;gap:var(--filter-bar-actions-gap);flex-wrap:wrap;flex:none;margin-inline-start:auto;display:flex}
1
+ .filter-bar{gap:var(--filter-bar-gap);flex-direction:column;display:flex}.filter-bar__search{inline-size:100%}.filter-bar__row{align-items:flex-end;column-gap:var(--filter-bar-column-gap);row-gap:var(--filter-bar-row-gap);flex-wrap:wrap;display:flex}.filter-bar__filters{flex:1 1 var(--filter-bar-column-min-inline-size);grid-template-columns:repeat(auto-fit, minmax(min(var(--filter-bar-column-min-inline-size), 100%), 1fr));column-gap:var(--filter-bar-column-gap);row-gap:var(--filter-bar-row-gap);min-inline-size:0;display:grid}.filter-bar__filter{min-inline-size:0}.filter-bar__actions{align-items:stretch;gap:var(--filter-bar-actions-gap);flex-direction:column;flex:100%;display:flex}.filter-bar__actions>*{inline-size:100%}@media (width>=768px){.filter-bar__actions{flex-flow:wrap;flex:none;align-items:center;margin-inline-start:auto}.filter-bar__actions>*{inline-size:auto}}
package/dist/highlight.js CHANGED
@@ -22,6 +22,7 @@ function c({ title: c, description: l, actions: u, media: d, mediaPosition: f =
22
22
  children: l
23
23
  }),
24
24
  u && /* @__PURE__ */ o(n, {
25
+ stack: "mobile",
25
26
  className: "highlight__actions",
26
27
  children: u
27
28
  })
package/dist/inline.css CHANGED
@@ -1 +1 @@
1
- .inline{align-items:center;gap:var(--inline-gap-md);flex-wrap:wrap;display:flex}.inline.inline--gap-sm{gap:var(--inline-gap-sm)}.inline.inline--gap-lg{gap:var(--inline-gap-lg)}.inline>:is(h1,h2,h3,h4,h5,h6){margin-block-end:0}.inline.inline--align-start{align-items:flex-start}.inline.inline--align-end{align-items:flex-end}.inline.inline--justify-center{justify-content:center}.inline.inline--justify-end{justify-content:flex-end}.inline.inline--justify-between{justify-content:space-between}
1
+ .inline{align-items:center;gap:var(--inline-gap-md);flex-wrap:wrap;display:flex}.inline.inline--gap-sm{gap:var(--inline-gap-sm)}.inline.inline--gap-lg{gap:var(--inline-gap-lg)}.inline>:is(h1,h2,h3,h4,h5,h6){margin-block-end:0}.inline.inline--align-start{align-items:flex-start}.inline.inline--align-end{align-items:flex-end}.inline.inline--justify-center{justify-content:center}.inline.inline--justify-end{justify-content:flex-end}.inline.inline--justify-between{justify-content:space-between}@media (width<=767.98px){.inline.inline--stack-mobile{flex-direction:column;align-items:stretch}}
package/dist/inline.js CHANGED
@@ -1,17 +1,18 @@
1
1
  import './inline.css';
2
2
  import { jsx as e } from "react/jsx-runtime";
3
3
  //#region src/stories/atoms/Inline/Inline.tsx
4
- function t({ gap: t = "md", align: n = "center", justify: r = "start", children: i, className: a, ...o }) {
4
+ function t({ gap: t = "md", align: n = "center", justify: r = "start", stack: i, children: a, className: o, ...s }) {
5
5
  return /* @__PURE__ */ e("div", {
6
6
  className: [
7
7
  "inline",
8
8
  t === "md" ? "" : `inline--gap-${t}`,
9
9
  n === "center" ? "" : `inline--align-${n}`,
10
10
  r === "start" ? "" : `inline--justify-${r}`,
11
- a
11
+ i === "mobile" ? "inline--stack-mobile" : "",
12
+ o
12
13
  ].filter(Boolean).join(" "),
13
- ...o,
14
- children: i
14
+ ...s,
15
+ children: a
15
16
  });
16
17
  }
17
18
  //#endregion
package/dist/message-bubble.css CHANGED
@@ -1 +1 @@
1
- .message-bubble{--_tail:var(--message-bubble-tail-size);--_border:var(--message-bubble-border-width);--_diagonal:calc(var(--_border) * 1.41421);padding-block:var(--message-bubble-padding-block);padding-inline:var(--message-bubble-padding-inline);border-radius:var(--message-bubble-border-radius);border-width:var(--message-bubble-border-width);border-style:var(--message-bubble-border-style);border-color:var(--message-bubble-border-color);color:var(--message-bubble-color);max-width:var(--message-bubble-max-width);font-family:var(--message-bubble-font-family);font-size:var(--message-bubble-font-size);font-weight:var(--message-bubble-font-weight);line-height:var(--message-bubble-line-height);position:relative}.message-bubble:before,.message-bubble:after{content:"";block-size:0;inline-size:0;position:absolute}.message-bubble--assistant{margin-inline-end:auto}.message-bubble--assistant:before{border-block-start:var(--_tail) solid transparent;border-inline-end:var(--_tail) solid var(--message-bubble-border-color);inset-block-end:calc(-1 * var(--_border));inset-inline-start:calc(-1 * (var(--_tail) + var(--_border)))}.message-bubble--assistant:after{border-block-start:calc(var(--_tail) - var(--_diagonal)) solid transparent;border-inline-end:calc(var(--_tail) - var(--_diagonal)) solid var(--message-bubble-tail-fill);inset-block-end:0;inset-inline-start:calc(var(--_diagonal) - var(--_tail))}.message-bubble--user{margin-inline-start:auto}.message-bubble--user:before{border-block-start:var(--_tail) solid transparent;border-inline-start:var(--_tail) solid var(--message-bubble-border-color);inset-block-end:calc(-1 * var(--_border));inset-inline-end:calc(-1 * (var(--_tail) + var(--_border)))}.message-bubble--user:after{border-block-start:calc(var(--_tail) - var(--_diagonal)) solid transparent;border-inline-start:calc(var(--_tail) - var(--_diagonal)) solid var(--message-bubble-tail-fill);inset-block-end:0;inset-inline-end:calc(var(--_diagonal) - var(--_tail))}
1
+ .message-bubble{--_tail:var(--message-bubble-tail-size);--_border:var(--message-bubble-border-width);--_diagonal:calc(var(--_border) * 1.41421);padding-block:var(--message-bubble-padding-block);padding-inline:var(--message-bubble-padding-inline);border-radius:var(--message-bubble-border-radius);border-width:var(--message-bubble-border-width);border-style:var(--message-bubble-border-style);border-color:var(--message-bubble-border-color);color:var(--message-bubble-color);max-width:var(--message-bubble-max-width);overflow-wrap:anywhere;font-family:var(--message-bubble-font-family);font-size:var(--message-bubble-font-size);font-weight:var(--message-bubble-font-weight);line-height:var(--message-bubble-line-height);position:relative}.message-bubble:before,.message-bubble:after{content:"";block-size:0;inline-size:0;position:absolute}.message-bubble--assistant{margin-inline-end:auto}.message-bubble--assistant:before{border-block-start:var(--_tail) solid transparent;border-inline-end:var(--_tail) solid var(--message-bubble-border-color);inset-block-end:calc(-1 * var(--_border));inset-inline-start:calc(-1 * (var(--_tail) + var(--_border)))}.message-bubble--assistant:after{border-block-start:calc(var(--_tail) - var(--_diagonal)) solid transparent;border-inline-end:calc(var(--_tail) - var(--_diagonal)) solid var(--message-bubble-tail-fill);inset-block-end:0;inset-inline-start:calc(var(--_diagonal) - var(--_tail))}.message-bubble--user{margin-inline-start:auto}.message-bubble--user:before{border-block-start:var(--_tail) solid transparent;border-inline-start:var(--_tail) solid var(--message-bubble-border-color);inset-block-end:calc(-1 * var(--_border));inset-inline-end:calc(-1 * (var(--_tail) + var(--_border)))}.message-bubble--user:after{border-block-start:calc(var(--_tail) - var(--_diagonal)) solid transparent;border-inline-start:calc(var(--_tail) - var(--_diagonal)) solid var(--message-bubble-tail-fill);inset-block-end:0;inset-inline-end:calc(var(--_diagonal) - var(--_tail))}
package/dist/recovery-codes.js CHANGED
@@ -21,6 +21,7 @@ function i({ codes: i, columns: a = 2, labels: o, actions: s, className: c, id:
21
21
  }, t))
22
22
  }), /* @__PURE__ */ r(e, {
23
23
  gap: "sm",
24
+ stack: "mobile",
24
25
  className: "recovery-codes__actions",
25
26
  children: [/* @__PURE__ */ n(t, {
26
27
  value: () => i.join("\n"),
package/package.json CHANGED
@@ -1,6 +1,12 @@
1
1
  {
2
2
  "name": "@studiolxd/brand",
3
- "version": "38.12.4",
3
+ "version": "38.14.0",
4
+ "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "git+https://github.com/studiolxd/brand.git"
8
+ },
9
+ "homepage": "https://github.com/studiolxd/brand#readme",
4
10
  "type": "module",
5
11
  "exports": {
6
12
  "./accordion": {