@studiolxd/brand 45.0.0 → 45.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "45.0.0",
+  "version": "45.1.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/control.css

@@ -6,7 +6,7 @@
   --control-border-style: solid; /** Estilo del borde */
   --control-cursor: text; /** Cursor por defecto */
   --control-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
-  --control-height: var(--size-component-md); /** Altura del control de una línea: la talla md del sistema */
+  --control-height: var(--size-component-md); /** Altura del control de una línea: la talla md del sistema. Es la talla de PARTIDA, y la superficie pública la apunta a `lg-height` */
   --control-font-family: var(--font-family-sans); /** Familia tipográfica */
   --control-font-size: var(--font-size-2); /** Tamaño de fuente */
   --control-line-height: var(--line-height-none); /** Interlineado */
@@ -14,6 +14,9 @@
   --control-transition-easing: var(--motion-easing-default); /** Curva de animación */
   --control-padding-inline: var(--spacing-4); /** Padding inline — compartido por controles y elementos de formulario */
   --control-padding-block: var(--spacing-4); /** Padding block — solo para lo multilínea (Textarea) y para el aire de las filas de formulario. Los controles de una línea fijan su altura a la talla (`height`) con padding vertical 0 */
+  --control-lg-height: var(--size-component-lg); /** Altura del control en talla lg: la talla lg del sistema. Es lo que la superficie pública pone como talla de partida (`.site-shell`) */
+  --control-lg-font-size: var(--font-size-3); /** Tamaño de fuente en talla lg (20px), el cuerpo de la superficie pública */
+  --control-lg-padding-inline: var(--spacing-5); /** Padding inline en talla lg */
   --control-border-radius: var(--border-radius-default); /** Radio del borde */
   --control-border-width: var(--border-width-default); /** Grosor del borde */
   --control-font-weight: var(--font-weight-default); /** Peso tipográfico */

package/src/tokens/components/multi-select.css

@@ -33,6 +33,9 @@
   --multi-select-item-padding-block: var(--select-item-padding-block); /** Padding block de cada opción */
   --multi-select-pill-bg: var(--color-primary); /** Fondo de la pill de valor seleccionado */
   --multi-select-pill-border-radius: var(--border-radius-round); /** Radio de la pill */
+  --multi-select-icon-size: var(--select-icon-size); /** Glifo del chevron del trigger — el del Select */
+  --multi-select-sm-icon-size: var(--select-sm-icon-size); /** Glifo del chevron — variante sm */
+  --multi-select-lg-icon-size: var(--select-lg-icon-size); /** Glifo del chevron — variante lg */
   --multi-select-sm-font-size: var(--select-sm-font-size); /** Tamaño de fuente — variante sm */
   --multi-select-sm-padding-inline: var(--select-sm-padding-inline); /** Padding inline del trigger — variante sm */
   --multi-select-sm-item-padding-block: var(--select-sm-item-padding-block); /** Padding block de cada opción — variante sm */

package/src/tokens/components/select.css

@@ -16,6 +16,9 @@
   --select-content-bg: var(--color-white); /** Fondo del dropdown */
   --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-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 */
   --select-sm-item-padding-block: var(--spacing-1); /** Padding block de cada opción — variante sm */

package/src/tokens/molecules/filter-bar.css

@@ -8,6 +8,6 @@
   --filter-bar-column-gap: var(--field-row-column-gap); /** Aire entre las columnas de filtros — el de las celdas de una fila de campos */
   --filter-bar-row-gap: var(--field-row-row-gap); /** Aire entre las filas de filtros cuando la rejilla envuelve, y entre los filtros apilados en móvil */
   --filter-bar-actions-gap: var(--form-actions-gap); /** Aire entre las acciones de la barra — el de los botones de un formulario: la fila de acciones del sistema es una sola */
-  --filter-bar-label-offset: calc(var(--label-font-size) * var(--label-line-height) + var(--input-field-gap)); /** El renglón que ocupa un rótulo sobre su control: cuerpo × interlineado del `Label` más el aire que los separa en un campo (29px). Es lo que la barra reserva sobre lo que NO lleva rótulo —un interruptor, el botón de limpiar— para que no se suba a la línea de las etiquetas */
-  --filter-bar-control-block-size: var(--control-height); /** La caja de un campo de una línea (40px, la talla md del sistema). Es la referencia contra la que se centra lo que no lleva rótulo: el interruptor queda a la altura óptica del recuadro que tiene al lado, no del renglón entero —que con un control alto al lado sería otra altura cada vez— */
+  --filter-bar-label-offset: calc(var(--label-font-size) * var(--label-line-height) + var(--input-field-gap)); /** El renglón que ocupa un rótulo sobre su control: cuerpo × interlineado del `Label` más el aire que los separa en un campo (29px en la aplicación; en la superficie pública el rótulo es mayor y el renglón sube con él). Es lo que la barra reserva sobre lo que NO lleva rótulo —un interruptor, el botón de limpiar— para que no se suba a la línea de las etiquetas */
+  --filter-bar-control-block-size: var(--control-height); /** La caja de un campo de una línea (40px, la talla md del sistema; 48px en la superficie pública, que parte de lg). Es la referencia contra la que se centra lo que no lleva rótulo: el interruptor queda a la altura óptica del recuadro que tiene al lado, no del renglón entero —que con un control alto al lado sería otra altura cada vez— */
 }

package/src/tokens/scss/components/_control.scss

@@ -4,7 +4,7 @@
 $lxd-control-border-style: solid; // Estilo del borde
 $lxd-control-border-radius: 0px; // Radio del borde
 $lxd-control-border-width: 1px; // Grosor del borde
-$lxd-control-height: 2.5rem; // Altura del control de una línea: la talla md del sistema
+$lxd-control-height: 2.5rem; // Altura del control de una línea: la talla md del sistema. Es la talla de PARTIDA, y la superficie pública la apunta a `lg-height`
 $lxd-control-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica
 $lxd-control-font-size: 1rem; // Tamaño de fuente
 $lxd-control-font-weight: 300; // Peso tipográfico
@@ -17,3 +17,6 @@ $lxd-control-focus-ring-width: 2px; // Grosor del anillo de foco
 $lxd-control-focus-ring-inset-offset: 1px; // Separación entre borde y anillo de foco
 $lxd-control-padding-inline: 1rem; // Padding inline — compartido por controles y elementos de formulario
 $lxd-control-padding-block: 1rem; // Padding block — solo para lo multilínea (Textarea) y para el aire de las filas de formulario. Los controles de una línea fijan su altura a la talla (`height`) con padding vertical 0
+$lxd-control-lg-height: 3rem; // Altura del control en talla lg: la talla lg del sistema. Es lo que la superficie pública pone como talla de partida (`.site-shell`)
+$lxd-control-lg-font-size: 1.25rem; // Tamaño de fuente en talla lg (20px), el cuerpo de la superficie pública
+$lxd-control-lg-padding-inline: 1.5rem; // Padding inline en talla lg

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

@@ -41,6 +41,9 @@ $lxd-multi-select-pill-remove-hover-opacity: 1; // Opacidad del aspa bajo el pun
 $lxd-multi-select-item-selected-font-weight: 700; // Peso de la opción ya elegida en la lista: lo elegido se dice con peso, no con relleno
 $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-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
 $lxd-multi-select-sm-item-padding-block: 0.25rem; // Padding block de cada opción — variante sm

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

@@ -30,6 +30,9 @@ $lxd-select-item-padding-block: 0.5rem; // Padding block de cada opción
 $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-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
 $lxd-select-sm-item-padding-block: 0.25rem; // Padding block de cada opción — variante sm

package/src/tokens/scss/molecules/_filter-bar.scss

@@ -6,5 +6,5 @@ $lxd-filter-bar-column-gap: 1rem; // Aire entre las columnas de filtros — el d
 $lxd-filter-bar-row-gap: 0.75rem; // Aire entre las filas de filtros cuando la rejilla envuelve, y entre los filtros apilados en móvil
 $lxd-filter-bar-column-min-inline-size: 12rem; // Ancho mínimo de una columna de filtros (192px, el de una celda normal de `FieldRow`): es lo que decide cuántas caben por fila —tres o cuatro en una tabla de administración— antes de apilarse
 $lxd-filter-bar-actions-gap: 0.75rem; // Aire entre las acciones de la barra — el de los botones de un formulario: la fila de acciones del sistema es una sola
-$lxd-filter-bar-label-offset: calc(0.875rem * 1.5 + 0.5rem); // El renglón que ocupa un rótulo sobre su control: cuerpo × interlineado del `Label` más el aire que los separa en un campo (29px). Es lo que la barra reserva sobre lo que NO lleva rótulo —un interruptor, el botón de limpiar— para que no se suba a la línea de las etiquetas
-$lxd-filter-bar-control-block-size: 2.5rem; // La caja de un campo de una línea (40px, la talla md del sistema). Es la referencia contra la que se centra lo que no lleva rótulo: el interruptor queda a la altura óptica del recuadro que tiene al lado, no del renglón entero —que con un control alto al lado sería otra altura cada vez—
+$lxd-filter-bar-label-offset: calc(0.875rem * 1.5 + 0.5rem); // El renglón que ocupa un rótulo sobre su control: cuerpo × interlineado del `Label` más el aire que los separa en un campo (29px en la aplicación; en la superficie pública el rótulo es mayor y el renglón sube con él). Es lo que la barra reserva sobre lo que NO lleva rótulo —un interruptor, el botón de limpiar— para que no se suba a la línea de las etiquetas
+$lxd-filter-bar-control-block-size: 2.5rem; // La caja de un campo de una línea (40px, la talla md del sistema; 48px en la superficie pública, que parte de lg). Es la referencia contra la que se centra lo que no lleva rótulo: el interruptor queda a la altura óptica del recuadro que tiene al lado, no del renglón entero —que con un control alto al lado sería otra altura cada vez—

package/src/tokens/surface-public.css

@@ -8,6 +8,99 @@
  */
 
 .site-shell {
+  --async-multi-select-font-size: var(--async-multi-select-lg-font-size);
+  --async-multi-select-height: var(--async-multi-select-lg-height);
+  --async-multi-select-item-padding-block: var(--async-multi-select-lg-item-padding-block);
+  --async-multi-select-padding-inline: var(--async-multi-select-lg-padding-inline);
+  --async-select-font-size: var(--async-select-lg-font-size);
+  --async-select-height: var(--async-select-lg-height);
+  --async-select-item-padding-block: var(--async-select-lg-item-padding-block);
+  --async-select-padding-inline: var(--async-select-lg-padding-inline);
+  --button-height: var(--button-lg-height);
+  --button-padding-inline: var(--button-lg-padding-inline);
+  --button-font-size: var(--button-lg-font-size);
+  --checkbox-size: var(--checkbox-lg-size);
+  --checkbox-check-size: var(--checkbox-lg-check-size);
+  --control-height: var(--control-lg-height);
+  --control-font-size: var(--control-lg-font-size);
+  --control-padding-inline: var(--control-lg-padding-inline);
+  --file-upload-padding-block: var(--file-upload-lg-padding-block);
+  --file-upload-padding-inline: var(--file-upload-lg-padding-inline);
+  --file-upload-text-font-size: var(--file-upload-lg-text-font-size);
+  --file-upload-subtext-font-size: var(--file-upload-lg-subtext-font-size);
+  --file-upload-thumb-size: var(--file-upload-lg-thumb-size);
+  --file-upload-item-name-font-size: var(--file-upload-lg-item-name-font-size);
+  --input-phone-country-width: var(--input-phone-lg-country-width);
+  --input-height: var(--input-lg-height);
+  --input-padding-inline: var(--input-lg-padding-inline);
+  --input-font-size: var(--input-lg-font-size);
+  --kbd-font-size: var(--kbd-lg-font-size);
+  --kbd-padding-block: var(--kbd-lg-padding-block);
+  --kbd-padding-inline: var(--kbd-lg-padding-inline);
+  --kbd-min-size: var(--kbd-lg-min-size);
+  --label-font-size: var(--label-lg-font-size);
+  --menu-item-icon-size: var(--menu-lg-item-icon-size);
+  --menu-item-font-size: var(--menu-lg-item-font-size);
+  --menu-item-padding-block: var(--menu-lg-item-padding-block);
+  --multi-select-height: var(--multi-select-lg-height);
+  --multi-select-icon-size: var(--multi-select-lg-icon-size);
+  --multi-select-font-size: var(--multi-select-lg-font-size);
+  --multi-select-padding-inline: var(--multi-select-lg-padding-inline);
+  --multi-select-item-padding-block: var(--multi-select-lg-item-padding-block);
+  --number-input-font-size: var(--number-input-lg-font-size);
+  --number-input-height: var(--number-input-lg-height);
+  --number-input-padding-inline: var(--number-input-lg-padding-inline);
+  --pagination-font-size: var(--pagination-lg-font-size);
+  --pagination-btn-height: var(--pagination-lg-btn-height);
+  --pagination-btn-font-size: var(--pagination-lg-btn-font-size);
+  --pagination-btn-padding-inline: var(--pagination-lg-btn-padding-inline);
+  --password-field-toggle-icon-size: var(--password-field-lg-toggle-icon-size);
+  --password-field-toggle-size: var(--password-field-lg-toggle-size);
+  --radio-size: var(--radio-lg-size);
+  --radio-dot-size: var(--radio-lg-dot-size);
+  --select-height: var(--select-lg-height);
+  --select-icon-size: var(--select-lg-icon-size);
+  --select-font-size: var(--select-lg-font-size);
+  --select-padding-inline: var(--select-lg-padding-inline);
+  --select-item-padding-block: var(--select-lg-item-padding-block);
+  --star-rating-star-size: var(--star-rating-lg-star-size);
+  --switcher-track-width: var(--switcher-lg-track-width);
+  --switcher-track-height: var(--switcher-lg-track-height);
+  --switcher-thumb-size: var(--switcher-lg-thumb-size);
+  --textarea-padding-block: var(--textarea-lg-padding-block);
+  --textarea-padding-inline: var(--textarea-lg-padding-inline);
+  --textarea-font-size: var(--textarea-lg-font-size);
+  --textarea-min-height: var(--textarea-lg-min-height);
+  --toggle-height: var(--toggle-lg-height);
+  --toggle-padding-inline: var(--toggle-lg-padding-inline);
+  --toggle-font-size: var(--toggle-lg-font-size);
+  --calendar-planner-cell-min-height: var(--calendar-planner-lg-cell-min-height);
+  --calendar-day-size: var(--calendar-lg-day-size);
+  --calendar-title-font-size: var(--calendar-lg-title-font-size);
+  --calendar-day-font-size: var(--calendar-lg-day-font-size);
+  --calendar-year-grid-min-inline-size: var(--calendar-lg-year-grid-min-inline-size);
+  --calendar-year-height: var(--calendar-lg-year-height);
+  --calendar-year-font-size: var(--calendar-lg-year-font-size);
+  --checkbox-field-gap: var(--checkbox-field-lg-gap);
+  --checkbox-field-padding-block: var(--checkbox-field-lg-padding-block);
+  --date-picker-button-slot-size: var(--date-picker-button-lg-slot-size);
+  --date-picker-button-icon-size: var(--date-picker-button-lg-icon-size);
+  --dropdown-field-height: var(--dropdown-field-lg-height);
+  --dropdown-field-value-icon-size: var(--dropdown-field-lg-value-icon-size);
+  --dropdown-field-font-size: var(--dropdown-field-lg-font-size);
+  --dropdown-field-padding-inline: var(--dropdown-field-lg-padding-inline);
+  --field-row-cell-sm: var(--field-row-lg-cell-sm);
+  --field-row-cell-md: var(--field-row-lg-cell-md);
+  --field-row-cell-lg: var(--field-row-lg-cell-lg);
+  --field-row-label-font-size: var(--field-row-lg-label-font-size);
+  --input-field-search-slot-size: var(--input-field-search-lg-slot-size);
+  --input-field-search-icon-size: var(--input-field-search-lg-icon-size);
+  --radio-field-gap: var(--radio-field-lg-gap);
+  --radio-field-padding-block: var(--radio-field-lg-padding-block);
+  --search-form-submit-slot-size: var(--search-form-submit-lg-slot-size);
+  --search-form-submit-icon-size: var(--search-form-submit-lg-icon-size);
+  --switcher-field-gap: var(--switcher-field-lg-gap);
+  --switcher-field-padding-block: var(--switcher-field-lg-padding-block);
   --text-font-size: var(--site-shell-text-font-size);
   --text-line-height: var(--site-shell-text-line-height);
   --text-paragraph-small-font-size: var(--site-shell-paragraph-small-font-size);
@@ -28,17 +121,36 @@
   --alert-title-font-size: var(--text-font-size);
   --alert-description-font-size: var(--text-font-size);
   --alert-description-line-height: var(--text-line-height);
+  --app-launcher-tile-padding-block: var(--menu-item-padding-block);
+  --async-multi-select-loading-padding-block: var(--multi-select-item-padding-block);
+  --async-multi-select-loading-padding-inline: var(--multi-select-padding-inline);
+  --async-multi-select-empty-padding-block: var(--multi-select-item-padding-block);
+  --async-multi-select-empty-padding-inline: var(--multi-select-padding-inline);
+  --async-multi-select-empty-font-size: var(--multi-select-font-size);
+  --async-select-loading-padding-block: var(--select-item-padding-block);
+  --async-select-loading-padding-inline: var(--select-padding-inline);
+  --async-select-empty-padding-block: var(--select-item-padding-block);
+  --async-select-empty-padding-inline: var(--select-padding-inline);
+  --async-select-empty-font-size: var(--select-font-size);
   --breadcrumb-font-size: var(--text-paragraph-small-font-size);
+  --button-primary-font-size: var(--button-font-size);
+  --button-primary-padding-inline: var(--button-padding-inline);
+  --button-destructive-font-size: var(--button-font-size);
+  --button-destructive-padding-inline: var(--button-padding-inline);
+  --button-outline-font-size: var(--button-font-size);
+  --button-outline-padding-inline: var(--button-padding-inline);
+  --button-text-font-size: var(--button-font-size);
+  --button-ghost-font-size: var(--button-font-size);
+  --button-ghost-padding-inline: var(--button-padding-inline);
   --code-block-font-size: var(--text-paragraph-small-font-size);
   --code-font-size: var(--code-block-font-size);
+  --collapsible-trigger-font-size: var(--control-font-size);
   --description-list-term-font-size: var(--text-paragraph-small-font-size);
   --description-list-value-font-size: var(--text-font-size);
   --description-list-value-line-height: var(--text-line-height);
   --empty-state-description-font-size: var(--text-font-size);
   --figure-caption-font-size: var(--text-paragraph-small-font-size);
   --figure-caption-line-height: var(--text-line-height);
-  --file-upload-item-name-font-size: var(--text-font-size);
-  --file-upload-text-font-size: var(--text-font-size);
   --file-upload-sm-text-font-size: var(--text-paragraph-small-font-size);
   --file-upload-lg-text-font-size: var(--text-paragraph-large-font-size);
   --file-upload-lg-subtext-font-size: var(--text-font-size);
@@ -49,8 +161,11 @@
   --form-error-font-size: var(--text-paragraph-small-font-size);
   --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);
   --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);
+  --slider-value-font-size: var(--control-font-size);
   --table-font-size: var(--text-font-size);
   --table-line-height: var(--text-line-height);
   --text-h1-font-size: var(--text-size-8);
@@ -71,6 +186,7 @@
   --avatar-upload-error-font-size: var(--form-error-font-size);
   --banner-font-size: var(--text-font-size);
   --banner-line-height: var(--text-line-height);
+  --calendar-planner-title-font-size: var(--calendar-title-font-size);
   --checkbox-field-label-font-size: var(--text-font-size);
   --checkbox-field-label-line-height: var(--text-line-height);
   --checkbox-field-error-font-size: var(--form-error-font-size);
@@ -91,6 +207,11 @@
   --field-row-empty-font-size: var(--text-paragraph-small-font-size);
   --file-upload-field-error-font-size: var(--form-error-font-size);
   --file-upload-field-helper-font-size: var(--form-helper-font-size);
+  --filter-bar-column-min-inline-size: var(--field-row-cell-md);
+  --filter-bar-label-offset: calc(var(--label-font-size) * var(--label-line-height) + var(--input-field-gap));
+  --filter-bar-control-block-size: var(--control-height);
+  --input-field-search-input-padding-inline-start: var(--input-field-search-slot-size);
+  --input-field-search-input-padding-inline-end: var(--input-field-search-slot-size);
   --input-field-error-font-size: var(--form-error-font-size);
   --input-field-helper-font-size: var(--form-helper-font-size);
   --input-phone-field-error-font-size: var(--form-error-font-size);
@@ -122,6 +243,7 @@
   --radio-field-error-font-size: var(--form-error-font-size);
   --radio-field-helper-font-size: var(--form-helper-font-size);
   --recovery-codes-font-size: var(--text-paragraph-small-font-size);
+  --search-form-submit-input-padding-inline-end: var(--search-form-submit-slot-size);
   --select-field-error-font-size: var(--form-error-font-size);
   --select-field-helper-font-size: var(--form-helper-font-size);
   --sheet-description-font-size: var(--modal-description-font-size);

package/src/tokens/tokens.json

@@ -682,6 +682,9 @@
   "--control-focus-ring-inset-offset": "1px",
   "--control-padding-inline": "1rem",
   "--control-padding-block": "1rem",
+  "--control-lg-height": "3rem",
+  "--control-lg-font-size": "1.25rem",
+  "--control-lg-padding-inline": "1.5rem",
   "--copyable-value-gap": "0.75rem",
   "--description-list-border-width": "1px",
   "--description-list-border-style": "solid",
@@ -1200,6 +1203,9 @@
   "--multi-select-item-selected-font-weight": "700",
   "--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-lg-icon-size": "24px",
   "--multi-select-sm-font-size": "0.875rem",
   "--multi-select-sm-padding-inline": "0.5rem",
   "--multi-select-sm-item-padding-block": "0.25rem",
@@ -1473,6 +1479,9 @@
   "--select-item-selected-font-weight": "500",
   "--select-item-highlighted-bg": "#111e30",
   "--select-item-highlighted-color": "#ffffff",
+  "--select-icon-size": "16px",
+  "--select-sm-icon-size": "8px",
+  "--select-lg-icon-size": "24px",
   "--select-sm-font-size": "0.875rem",
   "--select-sm-padding-inline": "0.5rem",
   "--select-sm-item-padding-block": "0.25rem",