@studiolxd/brand 49.19.0 → 49.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.19.0",
+  "version": "49.21.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
@@ -94,6 +94,16 @@
       "import": "./dist/async-select-field.js",
       "default": "./dist/async-select-field.js"
     },
+    "./autocomplete": {
+      "types": "./dist/_types/atoms/Autocomplete/Autocomplete.d.ts",
+      "import": "./dist/autocomplete.js",
+      "default": "./dist/autocomplete.js"
+    },
+    "./autocomplete-field": {
+      "types": "./dist/_types/molecules/AutocompleteField/AutocompleteField.d.ts",
+      "import": "./dist/autocomplete-field.js",
+      "default": "./dist/autocomplete-field.js"
+    },
     "./avatar": {
       "types": "./dist/_types/atoms/Avatar/Avatar.d.ts",
       "import": "./dist/avatar.js",

package/src/tokens/components/autocomplete.css

@@ -0,0 +1,40 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --autocomplete-border-style: var(--async-select-border-style); /** Hereda de `async-select.border-style`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-disabled-cursor: var(--async-select-disabled-cursor); /** Hereda de `async-select.disabled-cursor`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-content-max-height: var(--async-select-content-max-height); /** Hereda de `async-select.content-max-height`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-bg: var(--async-select-bg); /** Hereda de `async-select.bg`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-content-bg: var(--async-select-content-bg); /** Hereda de `async-select.content-bg`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-content-gap: var(--async-select-content-gap); /** Hereda de `async-select.content-gap`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-content-z-index: var(--async-select-content-z-index); /** Hereda de `async-select.content-z-index`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-font-family: var(--async-select-font-family); /** Hereda de `async-select.font-family`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-font-size: var(--async-select-font-size); /** Hereda de `async-select.font-size`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-height: var(--async-select-height); /** Hereda de `async-select.height`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-item-padding-block: var(--async-select-item-padding-block); /** Hereda de `async-select.item-padding-block`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-lg-font-size: var(--async-select-lg-font-size); /** Hereda de `async-select.lg-font-size`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-lg-height: var(--async-select-lg-height); /** Hereda de `async-select.lg-height`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-lg-item-padding-block: var(--async-select-lg-item-padding-block); /** Hereda de `async-select.lg-item-padding-block`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-lg-padding-inline: var(--async-select-lg-padding-inline); /** Hereda de `async-select.lg-padding-inline`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-sm-font-size: var(--async-select-sm-font-size); /** Hereda de `async-select.sm-font-size`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-sm-height: var(--async-select-sm-height); /** Hereda de `async-select.sm-height`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-sm-item-padding-block: var(--async-select-sm-item-padding-block); /** Hereda de `async-select.sm-item-padding-block`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-sm-padding-inline: var(--async-select-sm-padding-inline); /** Hereda de `async-select.sm-padding-inline`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-item-selected-font-weight: var(--async-select-item-selected-font-weight); /** Peso de la sugerencia que coincide con el texto escrito */
+  --autocomplete-border-color: var(--async-select-border-color); /** Hereda de `async-select.border-color`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-border-radius: var(--async-select-border-radius); /** Hereda de `async-select.border-radius`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-border-width: var(--async-select-border-width); /** Hereda de `async-select.border-width`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-color: var(--async-select-color); /** Hereda de `async-select.color`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-content-border-color: var(--async-select-content-border-color); /** Hereda de `async-select.content-border-color`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-error-border-color: var(--async-select-error-border-color); /** Hereda de `async-select.error-border-color`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-focus-ring-color: var(--async-select-focus-ring-color); /** Hereda de `async-select.focus-ring-color`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-focus-ring-width: var(--async-select-focus-ring-width); /** Hereda de `async-select.focus-ring-width`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-font-weight: var(--async-select-font-weight); /** Hereda de `async-select.font-weight`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-item-highlighted-bg: var(--async-select-item-highlighted-bg); /** Hereda de `async-select.item-highlighted-bg`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-item-highlighted-color: var(--async-select-item-highlighted-color); /** Hereda de `async-select.item-highlighted-color`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-line-height: var(--async-select-line-height); /** Hereda de `async-select.line-height`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-padding-inline: var(--async-select-padding-inline); /** Hereda de `async-select.padding-inline`: el autocompletado tiene la misma cara que el buscador y el Select */
+  --autocomplete-placeholder-color: var(--async-select-placeholder-color); /** Hereda de `async-select.placeholder-color`: el autocompletado tiene la misma cara que el buscador y el Select */
+}

package/src/tokens/components/autocomplete.ts

@@ -0,0 +1,7 @@
+import tokens from '../../../tokens/component/autocomplete.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tokens as never);
+
+export const autocompleteFaceTokens = all.filter(t => !t.name.startsWith('--autocomplete-surface-dark-'));
+export const autocompleteDarkTokens = all.filter(t => t.name.startsWith('--autocomplete-surface-dark-'));

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

@@ -7,6 +7,10 @@
   --number-input-btn-bg: transparent; /** Fondo de los botones */
   --number-input-btn-width: var(--spacing-6); /** Ancho de los botones +/− */
   --number-input-disabled-cursor: var(--input-disabled-cursor); /** Cursor cuando deshabilitado */
+  --number-input-compact-height: var(--size-component-sm); /** Altura — compacto (fila de lista): la talla mínima del sistema */
+  --number-input-compact-btn-width: var(--spacing-5); /** Ancho de los botones +/− — compacto. En nativo la zona táctil se amplía a 44 pt / 48 dp sin cambiar este ancho */
+  --number-input-compact-field-width: var(--size-component-md); /** Ancho de la cifra — compacto: lo justo para 2–3 dígitos. El control no se estira */
+  --number-input-compact-padding-inline: var(--spacing-1); /** Padding horizontal de la cifra — compacto */
   --number-input-bg: var(--input-bg); /** Fondo del contenedor */
   --number-input-font-family: var(--input-font-family); /** Font family */
   --number-input-font-size: var(--input-font-size); /** Font size */
@@ -24,6 +28,7 @@
   --number-input-lg-font-size: var(--input-lg-font-size); /** Font size — lg */
   --number-input-lg-height: var(--input-lg-height); /** Altura — lg */
   --number-input-lg-padding-inline: var(--input-lg-padding-inline); /** Padding horizontal — lg */
+  --number-input-compact-font-size: var(--input-sm-font-size); /** Font size — compacto */
   --number-input-border-radius: var(--input-border-radius); /** Border radius del contenedor */
   --number-input-border-width: var(--input-border-width); /** Grosor del borde */
   --number-input-border-color: var(--input-border-color); /** Color del borde */

package/src/tokens/components/number-input.ts

@@ -3,9 +3,9 @@ import { flattenTokens } from '../utils';
 
 const all = flattenTokens(numberInput as never);
 
-export const numberInputBaseTokens     = all.filter(t => !t.name.match(/--number-input-(focus|error|disabled|sm|lg|btn-hover|btn-separator|disabled)/));
+export const numberInputBaseTokens     = all.filter(t => !t.name.match(/--number-input-(focus|error|disabled|sm|lg|btn-hover|btn-separator|disabled|compact)/));
 export const numberInputBtnTokens      = all.filter(t => t.name.includes('btn'));
 export const numberInputFocusTokens    = all.filter(t => t.name.includes('focus'));
 export const numberInputErrorTokens    = all.filter(t => t.name.includes('error'));
 export const numberInputDisabledTokens = all.filter(t => t.name.includes('disabled'));
-export const numberInputSizeTokens     = all.filter(t => t.name.match(/--number-input-(sm|lg)-/));
+export const numberInputSizeTokens     = all.filter(t => t.name.match(/--number-input-(sm|lg|compact)-/));

package/src/tokens/components/text-inline.css

@@ -7,12 +7,15 @@
   --text-inline-muted-color: var(--color-text-muted-on-light); /** Texto secundario en línea: una aclaración, un metadato */
   --text-inline-destructive-color: var(--color-destructive-text-on-light); /** Énfasis en línea con intención destructiva: la palabra que dice que algo se pierde. Es tinta sobre la superficie, nunca un relleno */
   --text-inline-success-color: var(--color-success-text-on-light); /** Énfasis en línea con intención de logro */
+  --text-inline-strikethrough-color: var(--color-text-muted-on-light); /** Texto tachado: lo que ya está hecho (un producto en el carrito) o ya no vale. Atenuado como el texto secundario; con un `tone` manda el tono */
+  --text-inline-strikethrough-thickness: var(--border-width-default); /** Grosor de la línea del tachado: el de los demás trazos del sistema */
 }
 
 .surface-dark,
 .surface-invert,
 [data-theme="dark"],
 html.dark {
+  --text-inline-strikethrough-color: var(--color-text-muted-on-dark); /** Texto tachado — surface-dark */
   --text-inline-muted-color: var(--color-text-muted-on-dark); /** Texto secundario en línea — surface-dark */
   --text-inline-destructive-color: var(--color-destructive-text-on-dark); /** Énfasis destructivo — surface-dark */
   --text-inline-success-color: var(--color-success-text-on-dark); /** Énfasis de logro — surface-dark */

package/src/tokens/index.css

@@ -58,6 +58,7 @@
 @import "./molecules/select-field.css";
 @import "./molecules/multi-select-field.css";
 @import "./molecules/async-select-field.css";
+@import "./molecules/autocomplete-field.css";
 @import "./molecules/async-multi-select-field.css";
 @import "./molecules/input-phone-field.css";
 @import "./components/otp-input.css";
@@ -67,6 +68,7 @@
 @import "./components/select.css";
 @import "./components/multi-select.css";
 @import "./components/async-select.css";
+@import "./components/autocomplete.css";
 @import "./components/async-multi-select.css";
 @import "./components/avatar.css";
 @import "./components/input-phone.css";

package/src/tokens/molecules/autocomplete-field.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --autocomplete-field-gap: var(--async-select-field-gap); /** Espacio entre label, control, helper y error */
+  --autocomplete-field-error-font-family: var(--async-select-field-error-font-family); /** Font family del mensaje de error */
+  --autocomplete-field-error-line-height: var(--async-select-field-error-line-height); /** Line height del mensaje de error */
+  --autocomplete-field-helper-font-family: var(--async-select-field-helper-font-family); /** Font family del texto de ayuda */
+  --autocomplete-field-helper-line-height: var(--async-select-field-helper-line-height); /** Line height del texto de ayuda */
+  --autocomplete-field-error-font-size: var(--async-select-field-error-font-size); /** Font size del mensaje de error */
+  --autocomplete-field-error-font-weight: var(--async-select-field-error-font-weight); /** Font weight del mensaje de error */
+  --autocomplete-field-error-color: var(--async-select-field-error-color); /** Color del mensaje de error */
+  --autocomplete-field-helper-font-size: var(--async-select-field-helper-font-size); /** Font size del texto de ayuda */
+  --autocomplete-field-helper-font-weight: var(--async-select-field-helper-font-weight); /** Font weight del texto de ayuda */
+  --autocomplete-field-helper-color: var(--async-select-field-helper-color); /** Color del texto de ayuda */
+}

package/src/tokens/molecules/autocomplete-field.ts

@@ -0,0 +1,8 @@
+import tokens from '../../../tokens/molecule/autocomplete-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tokens as never);
+
+export const autocompleteFieldBaseTokens   = all.filter(t => t.name === '--autocomplete-field-gap');
+export const autocompleteFieldErrorTokens  = all.filter(t => t.name.startsWith('--autocomplete-field-error-'));
+export const autocompleteFieldHelperTokens = all.filter(t => t.name.startsWith('--autocomplete-field-helper-'));

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

@@ -43,6 +43,7 @@
 @import 'components/select';
 @import 'components/multi-select';
 @import 'components/async-select';
+@import 'components/autocomplete';
 @import 'components/async-multi-select';
 @import 'components/avatar';
 @import 'components/input-phone';
@@ -147,6 +148,7 @@
 @import 'components/otp-input';
 @import 'molecules/otp-field';
 @import 'molecules/async-select-field';
+@import 'molecules/autocomplete-field';
 @import 'molecules/async-multi-select-field';
 @import 'molecules/chart';
 @import 'components/sparkline';

package/src/tokens/scss/_index.scss

@@ -43,6 +43,7 @@
 @forward 'components/select';
 @forward 'components/multi-select';
 @forward 'components/async-select';
+@forward 'components/autocomplete';
 @forward 'components/async-multi-select';
 @forward 'components/avatar';
 @forward 'components/input-phone';
@@ -147,6 +148,7 @@
 @forward 'components/otp-input';
 @forward 'molecules/otp-field';
 @forward 'molecules/async-select-field';
+@forward 'molecules/autocomplete-field';
 @forward 'molecules/async-multi-select-field';
 @forward 'molecules/chart';
 @forward 'components/sparkline';

package/src/tokens/scss/components/_autocomplete.scss

@@ -0,0 +1,37 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-autocomplete-bg: #ffffff; // Hereda de `async-select.bg`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-border-color: #111e30; // Hereda de `async-select.border-color`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-border-radius: 0px; // Hereda de `async-select.border-radius`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-border-style: solid; // Hereda de `async-select.border-style`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-border-width: 1px; // Hereda de `async-select.border-width`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-disabled-cursor: not-allowed; // Hereda de `async-select.disabled-cursor`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-color: #111e30; // Hereda de `async-select.color`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-content-bg: #ffffff; // Hereda de `async-select.content-bg`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-content-border-color: #111e30; // Hereda de `async-select.content-border-color`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-content-gap: 0.5rem; // Hereda de `async-select.content-gap`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-content-z-index: 400; // Hereda de `async-select.content-z-index`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-content-max-height: var(--available-height); // Hereda de `async-select.content-max-height`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-error-border-color: #b30000; // Hereda de `async-select.error-border-color`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-focus-ring-color: #111e30; // Hereda de `async-select.focus-ring-color`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-focus-ring-width: 2px; // Hereda de `async-select.focus-ring-width`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-font-family: "Google Sans Flex", system-ui, sans-serif; // Hereda de `async-select.font-family`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-font-size: 1rem; // Hereda de `async-select.font-size`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-font-weight: 300; // Hereda de `async-select.font-weight`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-height: 2.5rem; // Hereda de `async-select.height`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-item-highlighted-bg: #111e30; // Hereda de `async-select.item-highlighted-bg`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-item-highlighted-color: #ffffff; // Hereda de `async-select.item-highlighted-color`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-item-padding-block: 0.5rem; // Hereda de `async-select.item-padding-block`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-lg-font-size: 1.25rem; // Hereda de `async-select.lg-font-size`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-lg-height: 3rem; // Hereda de `async-select.lg-height`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-lg-item-padding-block: 0.75rem; // Hereda de `async-select.lg-item-padding-block`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-lg-padding-inline: 1.5rem; // Hereda de `async-select.lg-padding-inline`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-line-height: 1; // Hereda de `async-select.line-height`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-padding-inline: 1rem; // Hereda de `async-select.padding-inline`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-placeholder-color: #4a4a4a; // Hereda de `async-select.placeholder-color`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-sm-font-size: 0.875rem; // Hereda de `async-select.sm-font-size`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-sm-height: 2rem; // Hereda de `async-select.sm-height`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-sm-item-padding-block: 0.25rem; // Hereda de `async-select.sm-item-padding-block`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-sm-padding-inline: 0.5rem; // Hereda de `async-select.sm-padding-inline`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-item-selected-font-weight: 500; // Peso de la sugerencia que coincide con el texto escrito

package/src/tokens/scss/components/_number-input.scss

@@ -41,3 +41,8 @@ $lxd-number-input-sm-padding-inline: 0.75rem; // Padding horizontal — sm
 $lxd-number-input-lg-font-size: 1.25rem; // Font size — lg
 $lxd-number-input-lg-height: 3rem; // Altura — lg
 $lxd-number-input-lg-padding-inline: 1.5rem; // Padding horizontal — lg
+$lxd-number-input-compact-height: 2rem; // Altura — compacto (fila de lista): la talla mínima del sistema
+$lxd-number-input-compact-font-size: 0.875rem; // Font size — compacto
+$lxd-number-input-compact-btn-width: 1.5rem; // Ancho de los botones +/− — compacto. En nativo la zona táctil se amplía a 44 pt / 48 dp sin cambiar este ancho
+$lxd-number-input-compact-field-width: 2.5rem; // Ancho de la cifra — compacto: lo justo para 2–3 dígitos. El control no se estira
+$lxd-number-input-compact-padding-inline: 0.25rem; // Padding horizontal de la cifra — compacto

package/src/tokens/scss/components/_text-inline.scss

@@ -5,3 +5,5 @@ $lxd-text-inline-emphasis-font-weight: 500; // Peso del énfasis fuerte en líne
 $lxd-text-inline-muted-color: #4a4a4a; // Texto secundario en línea: una aclaración, un metadato
 $lxd-text-inline-destructive-color: #b30000; // Énfasis en línea con intención destructiva: la palabra que dice que algo se pierde. Es tinta sobre la superficie, nunca un relleno
 $lxd-text-inline-success-color: #006616; // Énfasis en línea con intención de logro
+$lxd-text-inline-strikethrough-color: #4a4a4a; // Texto tachado: lo que ya está hecho (un producto en el carrito) o ya no vale. Atenuado como el texto secundario; con un `tone` manda el tono
+$lxd-text-inline-strikethrough-thickness: 1px; // Grosor de la línea del tachado: el de los demás trazos del sistema

package/src/tokens/scss/molecules/_autocomplete-field.scss

@@ -0,0 +1,14 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-autocomplete-field-gap: 0.5rem; // Espacio entre label, control, helper y error
+$lxd-autocomplete-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
+$lxd-autocomplete-field-error-font-size: 0.875rem; // Font size del mensaje de error
+$lxd-autocomplete-field-error-font-weight: 300; // Font weight del mensaje de error
+$lxd-autocomplete-field-error-line-height: 1.5; // Line height del mensaje de error
+$lxd-autocomplete-field-error-color: #b30000; // Color del mensaje de error
+$lxd-autocomplete-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
+$lxd-autocomplete-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
+$lxd-autocomplete-field-helper-font-weight: 300; // Font weight del texto de ayuda
+$lxd-autocomplete-field-helper-line-height: 1.5; // Line height del texto de ayuda
+$lxd-autocomplete-field-helper-color: #111e30; // Color del texto de ayuda

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

@@ -28,6 +28,16 @@ html.dark {
   --async-select-error-border-color: var(--select-error-border-color);
   --async-select-focus-ring-color: var(--select-focus-ring-color);
   --async-select-placeholder-color: var(--multi-select-placeholder-color);
+  --autocomplete-bg: var(--async-select-bg);
+  --autocomplete-border-color: var(--async-select-border-color);
+  --autocomplete-color: var(--async-select-color);
+  --autocomplete-content-bg: var(--async-select-content-bg);
+  --autocomplete-content-border-color: var(--async-select-content-border-color);
+  --autocomplete-error-border-color: var(--async-select-error-border-color);
+  --autocomplete-focus-ring-color: var(--async-select-focus-ring-color);
+  --autocomplete-item-highlighted-bg: var(--async-select-item-highlighted-bg);
+  --autocomplete-item-highlighted-color: var(--async-select-item-highlighted-color);
+  --autocomplete-placeholder-color: var(--async-select-placeholder-color);
   --card-selectable-focus-ring-color: var(--button-primary-focus-ring-color);
   --code-bg: var(--code-block-bg);
   --code-color: var(--code-block-color);
@@ -60,6 +70,8 @@ html.dark {
   --popover-border-color: var(--floating-panel-border-color);
   --user-menu-content-bg: var(--floating-panel-bg);
   --user-menu-content-border-color: var(--floating-panel-border-color);
+  --autocomplete-field-error-color: var(--async-select-field-error-color);
+  --autocomplete-field-helper-color: var(--async-select-field-helper-color);
   --calendar-year-color: var(--calendar-day-color);
   --calendar-year-current-color: var(--calendar-today-color);
   --calendar-year-selected-bg: var(--calendar-selected-bg);

package/src/tokens/surface-invert.css

@@ -55,6 +55,16 @@ html.dark .surface-invert {
   --async-select-item-highlighted-color: var(--select-item-highlighted-color);
   --async-select-placeholder-color: var(--multi-select-placeholder-color);
   --async-select-empty-color: var(--color-text-muted-on-light);
+  --autocomplete-bg: var(--async-select-bg);
+  --autocomplete-border-color: var(--async-select-border-color);
+  --autocomplete-color: var(--async-select-color);
+  --autocomplete-content-bg: var(--async-select-content-bg);
+  --autocomplete-content-border-color: var(--async-select-content-border-color);
+  --autocomplete-error-border-color: var(--async-select-error-border-color);
+  --autocomplete-focus-ring-color: var(--async-select-focus-ring-color);
+  --autocomplete-item-highlighted-bg: var(--async-select-item-highlighted-bg);
+  --autocomplete-item-highlighted-color: var(--async-select-item-highlighted-color);
+  --autocomplete-placeholder-color: var(--async-select-placeholder-color);
   --avatar-initials-bg: var(--color-primary);
   --avatar-initials-color: var(--color-text-on-dark);
   --breadcrumb-separator-color: var(--color-text-on-light);
@@ -382,6 +392,7 @@ html.dark .surface-invert {
   --text-inline-muted-color: var(--color-text-muted-on-light);
   --text-inline-destructive-color: var(--color-destructive-text-on-light);
   --text-inline-success-color: var(--color-success-text-on-light);
+  --text-inline-strikethrough-color: var(--color-text-muted-on-light);
   --text-color: var(--color-text-on-light);
   --text-background: var(--color-background-light);
   --text-h1-color: var(--text-heading-color);
@@ -438,6 +449,8 @@ html.dark .surface-invert {
   --async-multi-select-field-helper-color: var(--form-helper-color);
   --async-select-field-error-color: var(--form-error-color);
   --async-select-field-helper-color: var(--form-helper-color);
+  --autocomplete-field-error-color: var(--async-select-field-error-color);
+  --autocomplete-field-helper-color: var(--async-select-field-helper-color);
   --avatar-upload-ring-color: var(--color-primary);
   --avatar-upload-hint-color: var(--form-helper-color);
   --avatar-upload-error-color: var(--form-error-color);

package/src/tokens/surface-light.css

@@ -56,6 +56,16 @@ html.dark .surface-light {
   --async-select-item-highlighted-color: var(--select-item-highlighted-color);
   --async-select-placeholder-color: var(--multi-select-placeholder-color);
   --async-select-empty-color: var(--color-text-muted-on-light);
+  --autocomplete-bg: var(--async-select-bg);
+  --autocomplete-border-color: var(--async-select-border-color);
+  --autocomplete-color: var(--async-select-color);
+  --autocomplete-content-bg: var(--async-select-content-bg);
+  --autocomplete-content-border-color: var(--async-select-content-border-color);
+  --autocomplete-error-border-color: var(--async-select-error-border-color);
+  --autocomplete-focus-ring-color: var(--async-select-focus-ring-color);
+  --autocomplete-item-highlighted-bg: var(--async-select-item-highlighted-bg);
+  --autocomplete-item-highlighted-color: var(--async-select-item-highlighted-color);
+  --autocomplete-placeholder-color: var(--async-select-placeholder-color);
   --avatar-initials-bg: var(--color-primary);
   --avatar-initials-color: var(--color-text-on-dark);
   --breadcrumb-separator-color: var(--color-text-on-light);
@@ -383,6 +393,7 @@ html.dark .surface-light {
   --text-inline-muted-color: var(--color-text-muted-on-light);
   --text-inline-destructive-color: var(--color-destructive-text-on-light);
   --text-inline-success-color: var(--color-success-text-on-light);
+  --text-inline-strikethrough-color: var(--color-text-muted-on-light);
   --text-color: var(--color-text-on-light);
   --text-background: var(--color-background-light);
   --text-h1-color: var(--text-heading-color);
@@ -439,6 +450,8 @@ html.dark .surface-light {
   --async-multi-select-field-helper-color: var(--form-helper-color);
   --async-select-field-error-color: var(--form-error-color);
   --async-select-field-helper-color: var(--form-helper-color);
+  --autocomplete-field-error-color: var(--async-select-field-error-color);
+  --autocomplete-field-helper-color: var(--async-select-field-helper-color);
   --avatar-upload-ring-color: var(--color-primary);
   --avatar-upload-hint-color: var(--form-helper-color);
   --avatar-upload-error-color: var(--form-error-color);

package/src/tokens/surface-public.css

@@ -16,6 +16,10 @@
   --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);
+  --autocomplete-font-size: var(--autocomplete-lg-font-size);
+  --autocomplete-height: var(--autocomplete-lg-height);
+  --autocomplete-item-padding-block: var(--autocomplete-lg-item-padding-block);
+  --autocomplete-padding-inline: var(--autocomplete-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);
@@ -184,6 +188,8 @@
   --async-multi-select-field-helper-font-size: var(--form-helper-font-size);
   --async-select-field-error-font-size: var(--form-error-font-size);
   --async-select-field-helper-font-size: var(--form-helper-font-size);
+  --autocomplete-field-error-font-size: var(--async-select-field-error-font-size);
+  --autocomplete-field-helper-font-size: var(--async-select-field-helper-font-size);
   --avatar-upload-hint-font-size: var(--form-helper-font-size);
   --avatar-upload-error-font-size: var(--form-error-font-size);
   --banner-font-size: var(--text-font-size);

package/src/tokens/tokens.json

@@ -314,6 +314,40 @@
   "--async-select-empty-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
   "--async-select-empty-font-size": "1rem",
   "--async-select-empty-color": "#4a4a4a",
+  "--autocomplete-bg": "#ffffff",
+  "--autocomplete-border-color": "#111e30",
+  "--autocomplete-border-radius": "0px",
+  "--autocomplete-border-style": "solid",
+  "--autocomplete-border-width": "1px",
+  "--autocomplete-disabled-cursor": "not-allowed",
+  "--autocomplete-color": "#111e30",
+  "--autocomplete-content-bg": "#ffffff",
+  "--autocomplete-content-border-color": "#111e30",
+  "--autocomplete-content-gap": "0.5rem",
+  "--autocomplete-content-z-index": "400",
+  "--autocomplete-content-max-height": "var(--available-height)",
+  "--autocomplete-error-border-color": "#b30000",
+  "--autocomplete-focus-ring-color": "#111e30",
+  "--autocomplete-focus-ring-width": "2px",
+  "--autocomplete-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--autocomplete-font-size": "1rem",
+  "--autocomplete-font-weight": "300",
+  "--autocomplete-height": "2.5rem",
+  "--autocomplete-item-highlighted-bg": "#111e30",
+  "--autocomplete-item-highlighted-color": "#ffffff",
+  "--autocomplete-item-padding-block": "0.5rem",
+  "--autocomplete-lg-font-size": "1.25rem",
+  "--autocomplete-lg-height": "3rem",
+  "--autocomplete-lg-item-padding-block": "0.75rem",
+  "--autocomplete-lg-padding-inline": "1.5rem",
+  "--autocomplete-line-height": "1",
+  "--autocomplete-padding-inline": "1rem",
+  "--autocomplete-placeholder-color": "#4a4a4a",
+  "--autocomplete-sm-font-size": "0.875rem",
+  "--autocomplete-sm-height": "2rem",
+  "--autocomplete-sm-item-padding-block": "0.25rem",
+  "--autocomplete-sm-padding-inline": "0.5rem",
+  "--autocomplete-item-selected-font-weight": "500",
   "--avatar-size-sm": "2rem",
   "--avatar-size-md": "2.5rem",
   "--avatar-size-lg": "3rem",
@@ -1282,6 +1316,11 @@
   "--number-input-lg-font-size": "1.25rem",
   "--number-input-lg-height": "3rem",
   "--number-input-lg-padding-inline": "1.5rem",
+  "--number-input-compact-height": "2rem",
+  "--number-input-compact-font-size": "0.875rem",
+  "--number-input-compact-btn-width": "1.5rem",
+  "--number-input-compact-field-width": "2.5rem",
+  "--number-input-compact-padding-inline": "0.25rem",
   "--org-switcher-trigger-padding-block": "0.5rem",
   "--org-switcher-trigger-padding-inline": "0.75rem",
   "--org-switcher-trigger-gap": "0.75rem",
@@ -1833,6 +1872,8 @@
   "--text-inline-muted-color": "#4a4a4a",
   "--text-inline-destructive-color": "#b30000",
   "--text-inline-success-color": "#006616",
+  "--text-inline-strikethrough-color": "#4a4a4a",
+  "--text-inline-strikethrough-thickness": "1px",
   "--text-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
   "--text-font-size": "1rem",
   "--text-font-weight": "300",
@@ -2123,6 +2164,17 @@
   "--async-select-field-helper-font-weight": "300",
   "--async-select-field-helper-line-height": "1.5",
   "--async-select-field-helper-color": "#111e30",
+  "--autocomplete-field-gap": "0.5rem",
+  "--autocomplete-field-error-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--autocomplete-field-error-font-size": "0.875rem",
+  "--autocomplete-field-error-font-weight": "300",
+  "--autocomplete-field-error-line-height": "1.5",
+  "--autocomplete-field-error-color": "#b30000",
+  "--autocomplete-field-helper-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+  "--autocomplete-field-helper-font-size": "0.875rem",
+  "--autocomplete-field-helper-font-weight": "300",
+  "--autocomplete-field-helper-line-height": "1.5",
+  "--autocomplete-field-helper-color": "#111e30",
   "--avatar-upload-gap": "1rem",
   "--avatar-upload-body-gap": "0.5rem",
   "--avatar-upload-ring-width": "2px",