@studiolxd/brand 49.15.1 → 49.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.15.1",
+  "version": "49.16.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",

package/src/tokens/components/icon.css

@@ -3,7 +3,7 @@
  */
 
 :root {
-  --icon-size-xs: 8px; /** Marca: el punto de estado, el chevron de un desplegable */
+  --icon-size-xs: 8px; /** Marca: el punto de estado */
   --icon-size-sm: 16px; /** Dentro de un control: junto al texto de un botón, en una celda */
   --icon-size-md: 24px; /** Por defecto: iconos-botón, navegación, listas */
   --icon-size-lg: 48px; /** Destacado: cabecera de un estado vacío, un aviso */

package/src/tokens/components/input-phone.css

@@ -6,11 +6,12 @@
   --input-phone-country-width: 4.5rem; /** Ancho del selector de país */
   --input-phone-country-border-style: solid; /** Estilo del separador */
   --input-phone-content-max-height: 17.5rem; /** Altura máxima del dropdown de país */
-  --input-phone-country-icon-size: 0.625rem; /** Ancho del icono chevron en el selector de país */
   --input-phone-sm-country-width: 3.5rem; /** Ancho del selector de país — variante sm */
+  --input-phone-sm-country-icon-size: 0.625rem; /** Ancho de la caja del chevron — variante sm: el prefijo es estrecho y a la caja de md el chevron se pega al separador (el glifo queda en 7,5×3,75) */
   --input-phone-lg-country-width: 5.5rem; /** Ancho del selector de país — variante lg */
   --input-phone-content-z-index: var(--z-index-floating); /** Z-index del dropdown de país */
   --input-phone-country-gap: var(--spacing-1); /** Separación entre bandera/código y chevron en el selector de país */
+  --input-phone-country-icon-size: var(--icon-size-sm); /** Ancho de la caja del chevron en el selector de país: la talla sm de icono, la del chevron del Select md (el glifo mide 8×4 a cualquier talla del campo) */
   --input-phone-country-border-width: var(--border-width-default); /** Grosor del separador entre país y número */
   --input-phone-country-border-color: var(--color-primary); /** Color del separador */
   --input-phone-country-icon-transition-easing: var(--input-transition-easing); /** Curva del giro del chevron: la de los campos */

package/src/tokens/components/select.css

@@ -17,7 +17,7 @@
   --select-content-z-index: var(--z-index-floating); /** Capa del desplegable: flotante */
   --select-item-padding-block: var(--spacing-2); /** Padding block de cada opción */
   --select-icon-size: var(--icon-size-sm); /** Glifo del chevron del trigger: la talla de icono que va con la talla de partida del control. Es un token y no la prop `size` del `Icon` para que suba con el control cuando lo hace la superficie (la pública parte de lg) */
-  --select-sm-icon-size: var(--icon-size-xs); /** Glifo del chevron — variante sm */
+  --select-sm-icon-size: var(--icon-size-sm); /** Glifo del chevron — variante sm: la misma caja que md; a xs el chevron (6×12 en la retícula) no se lee */
   --select-lg-icon-size: var(--icon-size-md); /** Glifo del chevron — variante lg */
   --select-sm-font-size: var(--font-size-1); /** Cuerpo — sm */
   --select-sm-padding-inline: var(--spacing-2); /** Padding inline del trigger — variante sm */

package/src/tokens/scss/components/_icon.scss

@@ -1,7 +1,7 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$lxd-icon-size-xs: 8px; // Marca: el punto de estado, el chevron de un desplegable
+$lxd-icon-size-xs: 8px; // Marca: el punto de estado
 $lxd-icon-size-sm: 16px; // Dentro de un control: junto al texto de un botón, en una celda
 $lxd-icon-size-md: 24px; // Por defecto: iconos-botón, navegación, listas
 $lxd-icon-size-lg: 48px; // Destacado: cabecera de un estado vacío, un aviso

package/src/tokens/scss/components/_input-phone.scss

@@ -8,10 +8,11 @@ $lxd-input-phone-country-border-color: #111e30; // Color del separador
 $lxd-input-phone-content-z-index: 400; // Z-index del dropdown de país
 $lxd-input-phone-country-gap: 0.25rem; // Separación entre bandera/código y chevron en el selector de país
 $lxd-input-phone-content-max-height: 17.5rem; // Altura máxima del dropdown de país
-$lxd-input-phone-country-icon-size: 0.625rem; // Ancho del icono chevron en el selector de país
+$lxd-input-phone-country-icon-size: 16px; // Ancho de la caja del chevron en el selector de país: la talla sm de icono, la del chevron del Select md (el glifo mide 8×4 a cualquier talla del campo)
 $lxd-input-phone-country-icon-transition-easing: ease; // Curva del giro del chevron: la de los campos
 $lxd-input-phone-country-item-padding-block: 0.5rem; // Aire vertical de cada país en la lista: el de las opciones del Select
 $lxd-input-phone-sm-country-width: 3.5rem; // Ancho del selector de país — variante sm
+$lxd-input-phone-sm-country-icon-size: 0.625rem; // Ancho de la caja del chevron — variante sm: el prefijo es estrecho y a la caja de md el chevron se pega al separador (el glifo queda en 7,5×3,75)
 $lxd-input-phone-lg-country-width: 5.5rem; // Ancho del selector de país — variante lg
 $lxd-input-phone-country-item-highlighted-bg: #111e30; // Relleno del país resaltado en la lista — el del Select: la inversión de marca
 $lxd-input-phone-country-item-highlighted-color: #ffffff; // Texto del país resaltado — el del Select: el prefijo lo hereda por `currentColor`

package/src/tokens/scss/components/_multi-select.scss

@@ -42,7 +42,7 @@ $lxd-multi-select-item-selected-font-weight: 700; // Peso de la opción ya elegi
 $lxd-multi-select-icon-transition-easing: ease; // Curva del giro del chevron al abrir
 $lxd-multi-select-selection-gap: 0.25rem; // Separación entre pills. Nombrado `selection-gap`, no `values-gap`: Style Dictionary 4.4.0 confunde un segmento de ruta que empieza por «value» (`values-gap`) con el sufijo `.value`/`.$value` del propio alias DTCG (`getReferences.js`, `variable.replace('.value', '')` con un `String.replace` de texto plano, no una regex anclada) y no resuelve la referencia encadenada — ver `surface-dark-derived.css`/release-check § tokens sin resolver
 $lxd-multi-select-icon-size: 16px; // Glifo del chevron del trigger — el del Select
-$lxd-multi-select-sm-icon-size: 8px; // Glifo del chevron — variante sm
+$lxd-multi-select-sm-icon-size: 16px; // Glifo del chevron — variante sm
 $lxd-multi-select-lg-icon-size: 24px; // Glifo del chevron — variante lg
 $lxd-multi-select-sm-font-size: 0.875rem; // Tamaño de fuente — variante sm
 $lxd-multi-select-sm-padding-inline: 0.5rem; // Padding inline del trigger — variante sm

package/src/tokens/scss/components/_select.scss

@@ -31,7 +31,7 @@ $lxd-select-item-selected-font-weight: 500; // La opción elegida, en énfasis
 $lxd-select-item-highlighted-bg: #111e30; // Relleno de la opción bajo el puntero o el teclado (`[data-highlighted]`): la inversión de marca. Excepción declarada a «los estados no se rellenan» (Foundations → Colores): en una lista de opciones densa el relleno es lo único que se lee de un vistazo mientras el teclado recorre la lista
 $lxd-select-item-highlighted-color: #ffffff; // Texto de la opción resaltada: invierte con el relleno — el glifo de marcado lo hereda por `currentColor`
 $lxd-select-icon-size: 16px; // Glifo del chevron del trigger: la talla de icono que va con la talla de partida del control. Es un token y no la prop `size` del `Icon` para que suba con el control cuando lo hace la superficie (la pública parte de lg)
-$lxd-select-sm-icon-size: 8px; // Glifo del chevron — variante sm
+$lxd-select-sm-icon-size: 16px; // Glifo del chevron — variante sm: la misma caja que md; a xs el chevron (6×12 en la retícula) no se lee
 $lxd-select-lg-icon-size: 24px; // Glifo del chevron — variante lg
 $lxd-select-sm-font-size: 0.875rem; // Cuerpo — sm
 $lxd-select-sm-padding-inline: 0.5rem; // Padding inline del trigger — variante sm

package/src/tokens/tokens.json

@@ -964,10 +964,11 @@
   "--input-phone-content-z-index": "400",
   "--input-phone-country-gap": "0.25rem",
   "--input-phone-content-max-height": "17.5rem",
-  "--input-phone-country-icon-size": "0.625rem",
+  "--input-phone-country-icon-size": "16px",
   "--input-phone-country-icon-transition-easing": "ease",
   "--input-phone-country-item-padding-block": "0.5rem",
   "--input-phone-sm-country-width": "3.5rem",
+  "--input-phone-sm-country-icon-size": "0.625rem",
   "--input-phone-lg-country-width": "5.5rem",
   "--input-phone-country-item-highlighted-bg": "#111e30",
   "--input-phone-country-item-highlighted-color": "#ffffff",
@@ -1208,7 +1209,7 @@
   "--multi-select-icon-transition-easing": "ease",
   "--multi-select-selection-gap": "0.25rem",
   "--multi-select-icon-size": "16px",
-  "--multi-select-sm-icon-size": "8px",
+  "--multi-select-sm-icon-size": "16px",
   "--multi-select-lg-icon-size": "24px",
   "--multi-select-sm-font-size": "0.875rem",
   "--multi-select-sm-padding-inline": "0.5rem",
@@ -1484,7 +1485,7 @@
   "--select-item-highlighted-bg": "#111e30",
   "--select-item-highlighted-color": "#ffffff",
   "--select-icon-size": "16px",
-  "--select-sm-icon-size": "8px",
+  "--select-sm-icon-size": "16px",
   "--select-lg-icon-size": "24px",
   "--select-sm-font-size": "0.875rem",
   "--select-sm-padding-inline": "0.5rem",