@studiolxd/brand 49.24.1 → 49.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.24.1",
+  "version": "49.26.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
@@ -283,6 +283,16 @@
       "import": "./dist/empty-state.js",
       "default": "./dist/empty-state.js"
     },
+    "./loading-state": {
+      "types": "./dist/_types/molecules/LoadingState/LoadingState.d.ts",
+      "import": "./dist/loading-state.js",
+      "default": "./dist/loading-state.js"
+    },
+    "./loading-region": {
+      "types": "./dist/_types/molecules/LoadingRegion/LoadingRegion.d.ts",
+      "import": "./dist/loading-region.js",
+      "default": "./dist/loading-region.js"
+    },
     "./fieldset": {
       "types": "./dist/_types/atoms/Fieldset/Fieldset.d.ts",
       "import": "./dist/fieldset.js",

package/src/tokens/components/button.css

@@ -10,6 +10,7 @@
   --button-white-space: nowrap; /** White space */
   --button-text-decoration: none; /** Text decoration */
   --button-disabled-cursor: not-allowed; /** Cursor when disabled */
+  --button-loading-spinner-size: 1em; /** Con `loading`: lado del girador. `1em` es el cuerpo de cada talla (sm 14, md 16, lg 20), como el icono que acompaña al texto */
   --button-focus-ring-style: solid; /** Focus ring border style */
   --button-block-width: 100%; /** Width when block modifier is applied */
   --button-outline-bg: rgba(0, 0, 0, 0); /** Background */
@@ -34,6 +35,7 @@
   --button-height: var(--size-component-md); /** Altura fija del botón (talla md): el contenido se centra, no se hace por padding */
   --button-sm-height: var(--size-component-sm); /** Altura — sm */
   --button-lg-height: var(--size-component-lg); /** Altura — lg */
+  --button-loading-gap: var(--spacing-2); /** Con `loading`: aire entre el girador y el texto. El girador va delante del texto y el texto no se pierde */
   --button-padding-inline: var(--spacing-6); /** Inline (horizontal) padding */
   --button-focus-ring-offset: var(--spacing-1); /** Separación entre el botón y el anillo de foco (4px): el hueco es el fondo de la superficie, y eso lo hace leerse como foco y no como un borde más */
   --button-sm-padding-inline: var(--spacing-5); /** Inline padding — sm */

package/src/tokens/index.css

@@ -121,6 +121,8 @@
 @import "./components/progress-bar.css";
 @import "./components/spinner.css";
 @import "./components/skeleton.css";
+@import "./molecules/loading-state.css";
+@import "./molecules/loading-region.css";
 @import "./molecules/alert.css";
 @import "./molecules/banner.css";
 @import "./molecules/toast.css";

package/src/tokens/molecules/loading-region.css

@@ -0,0 +1,16 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --loading-region-text-last-line-width: 60%; /** SkeletonText: ancho de la última línea, más corta, para que se lea como párrafo y no como bloque */
+  --loading-region-grid-item-height: 6rem; /** SkeletonGrid: alto de una celda (una miniatura, una tarjeta corta) */
+  --loading-region-gap: var(--spacing-5); /** Aire entre los bloques que envuelve la región (un título, un párrafo, una tabla) */
+  --loading-region-text-gap: var(--spacing-2); /** SkeletonText: aire entre líneas */
+  --loading-region-list-gap: var(--spacing-2); /** SkeletonList: aire entre filas */
+  --loading-region-list-row-height: var(--size-component-md); /** SkeletonList: alto de una fila — el de un control de una línea */
+  --loading-region-table-gap: var(--spacing-2); /** SkeletonTable: aire entre la cabecera y las filas */
+  --loading-region-table-header-height: var(--size-component-md); /** SkeletonTable: alto de la cabecera */
+  --loading-region-table-row-height: var(--size-component-sm); /** SkeletonTable: alto de una fila */
+  --loading-region-grid-gap: var(--spacing-4); /** SkeletonGrid: aire entre celdas */
+}

package/src/tokens/molecules/loading-region.ts

@@ -0,0 +1,4 @@
+import loadingRegion from '../../../tokens/component/loading-region.json';
+import { flattenTokens } from '../utils';
+
+export const loadingRegionTokens = flattenTokens(loadingRegion as never);

package/src/tokens/molecules/loading-state.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --loading-state-min-block-size: 16rem; /** Alto que reserva la espera de una página o una zona: la caja no colapsa a la altura del girador mientras el contenido no llega */
+  --loading-state-sm-min-block-size: 8rem; /** Alto que reserva la espera en talla sm — el cuerpo de un diálogo, una hoja o un popover */
+  --loading-state-sm-padding-block: var(--spacing-5); /** Padding vertical en talla sm: dentro de un diálogo el aire ya lo pone el diálogo */
+  --loading-state-gap: var(--empty-state-gap); /** Aire entre el girador y la acción — el mismo que EmptyState, porque ocupa su sitio */
+  --loading-state-padding-block: var(--empty-state-padding-block); /** Padding vertical — el de EmptyState */
+  --loading-state-padding-inline: var(--empty-state-padding-inline); /** Padding horizontal — el de EmptyState */
+  --loading-state-label-font-family: var(--empty-state-description-font-family); /** Familia del texto visible de la espera (labelVisible) — la de la descripción de EmptyState */
+  --loading-state-sm-label-font-size: var(--empty-state-description-font-size-sm); /** Tamaño del texto visible en talla sm — el de la descripción de EmptyState sm */
+  --loading-state-spinner-color: var(--empty-state-icon-color); /** Color del girador — el del icono de EmptyState (su par oscuro llega por el fichero derivado) */
+  --loading-state-label-font-size: var(--empty-state-description-font-size); /** Tamaño del texto visible de la espera — el de la descripción de EmptyState (cuerpo de la superficie) */
+  --loading-state-label-color: var(--empty-state-description-color); /** Color del texto visible de la espera — el de la descripción de EmptyState (texto atenuado, nunca grey-dark) */
+}

package/src/tokens/molecules/loading-state.ts

@@ -0,0 +1,4 @@
+import loadingState from '../../../tokens/component/loading-state.json';
+import { flattenTokens } from '../utils';
+
+export const loadingStateTokens = flattenTokens(loadingState as never);

package/src/tokens/scss/_index.legacy.scss

@@ -119,6 +119,8 @@
 @import 'components/progress-bar';
 @import 'components/spinner';
 @import 'components/skeleton';
+@import 'molecules/loading-state';
+@import 'molecules/loading-region';
 @import 'molecules/alert';
 @import 'molecules/banner';
 @import 'molecules/toast';

package/src/tokens/scss/_index.scss

@@ -119,6 +119,8 @@
 @forward 'components/progress-bar';
 @forward 'components/spinner';
 @forward 'components/skeleton';
+@forward 'molecules/loading-state';
+@forward 'molecules/loading-region';
 @forward 'molecules/alert';
 @forward 'molecules/banner';
 @forward 'molecules/toast';

package/src/tokens/scss/components/_button.scss

@@ -22,6 +22,8 @@ $lxd-button-disabled-border: #4a4a4a; // Border color when disabled — light su
 $lxd-button-height: 2.5rem; // Altura fija del botón (talla md): el contenido se centra, no se hace por padding
 $lxd-button-sm-height: 2rem; // Altura — sm
 $lxd-button-lg-height: 3rem; // Altura — lg
+$lxd-button-loading-gap: 0.5rem; // Con `loading`: aire entre el girador y el texto. El girador va delante del texto y el texto no se pierde
+$lxd-button-loading-spinner-size: 1em; // Con `loading`: lado del girador. `1em` es el cuerpo de cada talla (sm 14, md 16, lg 20), como el icono que acompaña al texto
 $lxd-button-padding-inline: 2rem; // Inline (horizontal) padding
 $lxd-button-focus-ring-width: 2px; // Focus ring width
 $lxd-button-focus-ring-style: solid; // Focus ring border style

package/src/tokens/scss/molecules/_loading-region.scss

@@ -0,0 +1,13 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-loading-region-gap: 1.5rem; // Aire entre los bloques que envuelve la región (un título, un párrafo, una tabla)
+$lxd-loading-region-text-gap: 0.5rem; // SkeletonText: aire entre líneas
+$lxd-loading-region-text-last-line-width: 60%; // SkeletonText: ancho de la última línea, más corta, para que se lea como párrafo y no como bloque
+$lxd-loading-region-list-gap: 0.5rem; // SkeletonList: aire entre filas
+$lxd-loading-region-list-row-height: 2.5rem; // SkeletonList: alto de una fila — el de un control de una línea
+$lxd-loading-region-table-gap: 0.5rem; // SkeletonTable: aire entre la cabecera y las filas
+$lxd-loading-region-table-header-height: 2.5rem; // SkeletonTable: alto de la cabecera
+$lxd-loading-region-table-row-height: 2rem; // SkeletonTable: alto de una fila
+$lxd-loading-region-grid-gap: 1rem; // SkeletonGrid: aire entre celdas
+$lxd-loading-region-grid-item-height: 6rem; // SkeletonGrid: alto de una celda (una miniatura, una tarjeta corta)

package/src/tokens/scss/molecules/_loading-state.scss

@@ -0,0 +1,14 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-loading-state-min-block-size: 16rem; // Alto que reserva la espera de una página o una zona: la caja no colapsa a la altura del girador mientras el contenido no llega
+$lxd-loading-state-sm-min-block-size: 8rem; // Alto que reserva la espera en talla sm — el cuerpo de un diálogo, una hoja o un popover
+$lxd-loading-state-gap: 1rem; // Aire entre el girador y la acción — el mismo que EmptyState, porque ocupa su sitio
+$lxd-loading-state-padding-block: 3rem; // Padding vertical — el de EmptyState
+$lxd-loading-state-padding-inline: 1.5rem; // Padding horizontal — el de EmptyState
+$lxd-loading-state-sm-padding-block: 1.5rem; // Padding vertical en talla sm: dentro de un diálogo el aire ya lo pone el diálogo
+$lxd-loading-state-spinner-color: #6b6b6b; // Color del girador — el del icono de EmptyState (su par oscuro llega por el fichero derivado)
+$lxd-loading-state-label-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia del texto visible de la espera (labelVisible) — la de la descripción de EmptyState
+$lxd-loading-state-label-font-size: 1rem; // Tamaño del texto visible de la espera — el de la descripción de EmptyState (cuerpo de la superficie)
+$lxd-loading-state-sm-label-font-size: 0.875rem; // Tamaño del texto visible en talla sm — el de la descripción de EmptyState sm
+$lxd-loading-state-label-color: #4a4a4a; // Color del texto visible de la espera — el de la descripción de EmptyState (texto atenuado, nunca grey-dark)

package/src/tokens/surface-dark-derived.css

@@ -47,6 +47,8 @@ html.dark {
   --floating-dock-description-color: var(--modal-description-color);
   --floating-dock-close-color: var(--modal-close-color);
   --floating-dock-close-focus-ring-color: var(--modal-close-focus-ring-color);
+  --loading-state-spinner-color: var(--empty-state-icon-color);
+  --loading-state-label-color: var(--empty-state-description-color);
   --menu-bg: var(--floating-panel-bg);
   --menu-border-color: var(--floating-panel-border-color);
   --number-input-border-color: var(--input-border-color);

package/src/tokens/surface-invert.css

@@ -209,6 +209,8 @@ html.dark .surface-invert {
   --link-hover-underline-width: 0px;
   --link-focus-ring-color: var(--color-primary);
   --link-ink-color: var(--color-text-on-light);
+  --loading-state-spinner-color: var(--empty-state-icon-color);
+  --loading-state-label-color: var(--empty-state-description-color);
   --logo-color: var(--color-text-on-light);
   --logomark-color: var(--color-text-on-light);
   --menu-button-color: var(--color-text-on-light);

package/src/tokens/surface-light.css

@@ -210,6 +210,8 @@ html.dark .surface-light {
   --link-hover-underline-width: 0px;
   --link-focus-ring-color: var(--color-primary);
   --link-ink-color: var(--color-text-on-light);
+  --loading-state-spinner-color: var(--empty-state-icon-color);
+  --loading-state-label-color: var(--empty-state-description-color);
   --logo-color: var(--color-text-on-light);
   --logomark-color: var(--color-text-on-light);
   --menu-button-color: var(--color-text-on-light);

package/src/tokens/surface-public.css

@@ -168,6 +168,7 @@
   --form-helper-font-size: var(--text-paragraph-small-font-size);
   --form-success-font-size: var(--text-font-size);
   --input-phone-country-item-padding-block: var(--select-item-padding-block);
+  --loading-state-label-font-size: var(--empty-state-description-font-size);
   --message-bubble-font-size: var(--text-font-size);
   --modal-description-font-size: var(--text-font-size);
   --password-field-input-padding-inline-end: var(--password-field-toggle-size);

package/src/tokens/tokens.json

@@ -405,6 +405,8 @@
   "--button-height": "2.5rem",
   "--button-sm-height": "2rem",
   "--button-lg-height": "3rem",
+  "--button-loading-gap": "0.5rem",
+  "--button-loading-spinner-size": "1em",
   "--button-padding-inline": "2rem",
   "--button-focus-ring-width": "2px",
   "--button-focus-ring-style": "solid",
@@ -1101,6 +1103,27 @@
   "--link-accent-1-hover-color": "#baabff",
   "--link-accent-1-underline-width": "1px",
   "--link-accent-1-hover-underline-width": "0px",
+  "--loading-region-gap": "1.5rem",
+  "--loading-region-text-gap": "0.5rem",
+  "--loading-region-text-last-line-width": "60%",
+  "--loading-region-list-gap": "0.5rem",
+  "--loading-region-list-row-height": "2.5rem",
+  "--loading-region-table-gap": "0.5rem",
+  "--loading-region-table-header-height": "2.5rem",
+  "--loading-region-table-row-height": "2rem",
+  "--loading-region-grid-gap": "1rem",
+  "--loading-region-grid-item-height": "6rem",
+  "--loading-state-min-block-size": "16rem",
+  "--loading-state-sm-min-block-size": "8rem",
+  "--loading-state-gap": "1rem",
+  "--loading-state-padding-block": "3rem",
+  "--loading-state-padding-inline": "1.5rem",
+  "--loading-state-sm-padding-block": "1.5rem",
+  "--loading-state-spinner-color": "#6b6b6b",
+  "--loading-state-label-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--loading-state-label-font-size": "1rem",
+  "--loading-state-sm-label-font-size": "0.875rem",
+  "--loading-state-label-color": "#4a4a4a",
   "--logo-height-sm": "2rem",
   "--logo-height-md": "2.5rem",
   "--logo-height-lg": "3rem",