@neo-design/foundations 1.0.0-rc.4

package/css/toggle.css

@@ -0,0 +1,53 @@
+/* packages/foundations/css/toggle.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.toggle__track {
+  display: inline-flex;
+  align-items: center;
+  width: 48px;
+  height: 24px;
+  padding-inline: var(--neo-space-xs-rem);
+  border-radius: var(--neo-radius-pill);
+  background: var(--fill--base--strong);
+  transition: background 120ms ease-out;
+}
+
+.toggle__thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--neo-radius-pill);
+  background: var(--fill--base--default);
+  transition: transform 120ms ease-out;
+}
+
+.toggle[aria-checked="true"] .toggle__track { background: var(--fill--semantic--success--solid); }
+.toggle[aria-checked="true"] .toggle__thumb { transform: translateX(var(--neo-switch-thumb-travel-rem)); }
+
+.toggle:focus-visible { outline: none; }
+.toggle:focus-visible .toggle__track {
+  box-shadow:
+    0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--gap--default),
+    0 0 0 calc(2 * var(--neo-stroke-focus-ring-width)) var(--focus--ring--default);
+}
+
+.toggle:disabled { cursor: not-allowed; }
+.toggle:disabled .toggle__track {
+  background: var(--fill--base--disabled);
+  border: var(--neo-stroke-xs) solid var(--border--base--disabled);
+}
+.toggle:disabled .toggle__thumb { background: var(--fill--base--medium); }
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle__track, .toggle__thumb { transition: none; }
+}

package/css/tooltip.css

@@ -0,0 +1,32 @@
+/* packages/foundations/css/tooltip.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.tooltip {
+  display: inline-block;
+  max-width: 40ch;
+  padding-inline: var(--neo-space-sm-rem);
+  padding-block: var(--neo-space-xs-rem);
+  border-radius: var(--neo-radius-xs);
+  background: var(--fill--semantic--info--solid);
+  color: var(--text--base--contrast);
+  font-size: var(--neo-type-body-md-regular-size-rem);
+  font-weight: var(--neo-type-body-md-regular-weight);
+  line-height: var(--neo-type-body-md-regular-line-height-rem);
+  position: relative;
+}
+
+.tooltip[hidden] { display: none; }
+
+.tooltip::before {
+  content: none;
+  position: absolute;
+  border: 6px solid transparent;
+}
+
+.tooltip--top::before    { content: ""; bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: var(--fill--semantic--info--solid); }
+.tooltip--bottom::before  { content: ""; top: 100%;    left: 50%; transform: translateX(-50%); border-top-color: var(--fill--semantic--info--solid); }
+.tooltip--left::before  { content: ""; right: 100%; top: 50%; transform: translateY(-50%); border-right-color: var(--fill--semantic--info--solid); }
+.tooltip--right::before { content: ""; left: 100%;  top: 50%; transform: translateY(-50%); border-left-color: var(--fill--semantic--info--solid); }
+.tooltip--top-start::before    { content: ""; bottom: 100%; left: var(--neo-space-md-rem); border-bottom-color: var(--fill--semantic--info--solid); }
+.tooltip--top-end::before   { content: ""; bottom: 100%; right: var(--neo-space-md-rem); border-bottom-color: var(--fill--semantic--info--solid); }
+.tooltip--bottom-start::before  { content: ""; top: 100%; left: var(--neo-space-md-rem); border-top-color: var(--fill--semantic--info--solid); }
+.tooltip--bottom-end::before { content: ""; top: 100%; right: var(--neo-space-md-rem); border-top-color: var(--fill--semantic--info--solid); }

package/icon-aliases.mjs

@@ -0,0 +1,57 @@
+// packages/foundations/icon-aliases.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+
+export const approved = true;
+export const appliedInFigma = '2026-09-06';
+export const mirroredInCode = true;
+export const mirroredOn = '2026-09-06';
+
+export const SYSTEM = {
+  advertencia: 'warning', agregar: 'add', 'agregar-circulo': 'add-circle', alarma: 'alarm', ayuda: 'help',
+  'bandeja-entrada': 'inbox', 'bandeja-salida': 'outbox', bano: 'restroom', 'bano-mujeres': 'restroom-women',
+  billetera: 'wallet', bolsa: 'bag', bombilla: 'lightbulb', brujula: 'compass', buscar: 'search',
+  'buscar-circulo': 'search-circle', 'buzon-voz': 'voicemail', 'buzon-voz-silencio': 'voicemail-off',
+  calendario: 'calendar', 'calendario-agregar': 'calendar-add', campana: 'bell', 'campana-agregar': 'bell-add',
+  'campana-bloquear': 'bell-block', 'campana-silencio': 'bell-off', 'campana-timbrar': 'bell-ring', candado: 'lock',
+  carrito: 'cart', 'carrito-agregar': 'cart-add', 'carrito-verificar': 'cart-check', celular: 'mobile',
+  cerrar: 'close', 'cerrar-sesion': 'logout', 'chat-burbujas': 'chat', 'chat-escribiendo': 'chat-typing',
+  'chevron-abajo': 'chevron-down', 'chevron-arriba': 'chevron-up', 'chevron-derecha': 'chevron-right',
+  'chevron-izquierda': 'chevron-left', configuracion: 'settings', copiar: 'copy', corazon: 'heart',
+  'corazon-desactivar': 'heart-off', correo: 'mail', 'correo-enviar': 'mail-send', 'derivacion-out': 'referral-out',
+  descargar: 'download', diccionario: 'dictionary', editar: 'edit', enlace: 'link', 'enlace-roto': 'link-broken',
+  error: 'error', escaner: 'scanner', escudo: 'shield', 'escudo-verificar': 'shield-check', estrella: 'star',
+  'flecha-abajo': 'arrow-down', 'flecha-arriba': 'arrow-up', 'flecha-derecha': 'arrow-right',
+  'flecha-izquierda': 'arrow-left', 'grafico-baja': 'chart-down', imagen: 'image', informacion: 'info',
+  inicio: 'home', kebab: 'kebab', lista: 'list', 'lista-tareas': 'checklist', 'llamada-entrante': 'call-incoming',
+  'llamada-entrante-alt': 'call-incoming-alt', mapa: 'map', marcador: 'bookmark', 'media-anterior': 'media-previous',
+  'media-avanzar': 'media-forward', 'media-pausa': 'media-pause', 'media-reproducir': 'media-play',
+  'media-retroceder': 'media-rewind', 'media-siguiente': 'media-next', megafono: 'megaphone', menos: 'minus',
+  'menu-puntos': 'menu-dots', moneda: 'coin', 'nav-derecha': 'nav-right', 'nav-izquierda': 'nav-left',
+  navegar: 'navigate', 'navegar-desactivar': 'navigate-off', nube: 'cloud', 'nube-actualizar': 'cloud-refresh',
+  'nube-agregar': 'cloud-add', 'nube-alerta': 'cloud-alert', 'nube-bloquear': 'cloud-block',
+  'nube-compartir': 'cloud-share', 'nube-transferir': 'cloud-transfer', 'nube-verificar': 'cloud-check',
+  'nube-video': 'cloud-video', ojo: 'eye', 'ojo-oculto': 'eye-off', 'papelera-reciclaje': 'trash',
+  'portapapeles-agregar': 'clipboard-add', 'portapapeles-eliminar': 'clipboard-remove',
+  'portapapeles-verificar': 'clipboard-check', regalo: 'gift', 'reloj-circulo': 'clock', senal: 'signal',
+  'silla-ruedas': 'wheelchair', 'sincronizar-alerta': 'sync-alert', soporte: 'support', 'tarjeta-credito': 'credit-card',
+  telefono: 'phone', ubicacion: 'location', 'usuario-agregar': 'user-add', 'usuario-circulo': 'user-circle',
+  'usuario-id': 'user-id', 'usuario-perfil': 'user-profile', 'usuario-proteger': 'user-shield',
+  'usuario-verificar': 'user-check', verificar: 'check', 'verificar-cuadro': 'check-box', 'volumen-alto': 'volume-high',
+  'volumen-apagar': 'volume-off', 'volumen-bajar': 'volume-down', 'volumen-bajo': 'volume-low',
+  'volumen-mudo': 'volume-mute', wifi: 'wifi', 'wifi-desactivar': 'wifi-off',
+};
+
+export const BRAND = {
+  ambulancia: 'ambulance', bienestar: 'wellness', brillos: 'sparkles', 'call-center': 'call-center', capsula: 'capsule',
+  chequeo: 'checkup', contacto: 'contact', conversacion: 'conversation', cruz: 'cross', desktop: 'desktop',
+  diente: 'tooth', dinero: 'money', 'donar-sangre': 'blood-donation', enfermero: 'nurse', estetoscopio: 'stethoscope',
+  garantia: 'warranty', 'gorro-enfermero': 'nurse-cap', 'gota-sangre': 'blood-drop', 'historial-medico': 'medical-record',
+  hospital: 'hospital', hospitalsymbol: 'hospital-symbol', 'maletin-medico': 'medical-bag', mascarilla: 'mask',
+  oido: 'ear', ojo: 'eye', pelota: 'ball', 'ritmo-cardiaco': 'heart-rate', salud: 'health', seguro: 'insurance',
+  'silla-ruedas': 'wheelchair', 'tarjeta-credito': 'credit-card', telemedicina: 'telemedicine',
+};
+
+
+export const ALIASES = Object.fromEntries([
+  ...Object.entries(SYSTEM).map(([v, n]) => [`system-${v}`, `system-${n}`]),
+  ...Object.entries(BRAND).map(([v, n]) => [`brand-${v}`, `brand-${n}`]),
+].filter(([oldName, newName]) => oldName !== newName));

package/icons/README.md

@@ -0,0 +1,84 @@
+# Neo — Icons
+
+167 icons in 3 families —`system`, `semantic` and `brand`, all three compared against the library—, generated from the Figma **Icons** library, which is the source of truth.
+They are not edited by hand: they are regenerated from there.
+
+**The set defines no colors of its own: it consumes the color variables of the token system.**
+
+| Family | How many | What it is | Color |
+|---|---|---|---|
+| `system` | 125 | **interface** icons: actions, navigation, neutral states | `icon/base/default` by default — **can vary** within the `icon/base/*` base |
+| `semantic` | 10 (5 + 5 `-inverse`) | **feedback** icons: info, alert, success, warning, error | already defined, `icon/semantic/*`. **Not modified** |
+| `brand` | 32 | **brand identity** icons | its own duality, already defined. **Not modified** |
+
+> The error state ships **two drawings**: `semantic-error` ("✕") and `semantic-alert` ("!"). Both are
+> painted by `icon/semantic/error`. In the Figma library the first one is named `danger`; the package
+> renames it to `error`, so `danger` is not an id you can use here.
+
+## Usage
+
+It needs the CSS vars on `:root` — the theme's `<CssBaseline/>` injects them, or the two CSS files in `tokens/` are loaded.
+
+The sprite is injected once into the document, and each icon is then requested by its id
+(`<family>-<name>`):
+
+```html
+<svg class="icon"><use href="#system-close"/></svg>
+<svg class="icon icon--lg"><use href="#brand-health"/></svg>
+```
+
+```css
+/* icons.css brings the base class and the sizes */
+.icon          /* 24px · color icon/base/default */
+.icon--xs|sm|md|lg|xl
+.icon--secondary|disabled|inverse
+```
+
+### Which can change color and which cannot
+
+**Only the `system` ones.** They come in `icon/base/default` and can take another token **from the same
+base family** as the context requires — `secondary` for lower hierarchy, `disabled` in a
+disabled control, `contrast` on a dark background. The handoff says which one goes on each screen.
+
+Since they are exported with `fill="currentColor"`, it is applied by setting `color` on the container:
+
+```css
+.mi-componente__icono { color: var(--icon--base--secondary); }
+```
+
+The `.icon--secondary|disabled|inverse` classes cover those cases.
+
+> **`semantic` and `brand` are not recolored.** They carry their color inside on purpose: an error icon
+> is red wherever it is, and the brand ones keep their duality. Neither `color` nor `currentColor`
+> affects them — and changing them would break the meaning the icon conveys.
+
+> A `system` icon **does not take semantic colors**: if something has to convey error or success, the
+> right icon is the one from the `semantic` family, not a `system` painted red.
+
+`index.json` lists the 167 icons by family, with their `viewBox` and their color type — useful to
+populate a picker or validate names at build time.
+
+## How they are consumed from the package
+
+```js
+import '@neo-design/foundations/icons.css';
+import { sprite } from '@neo-design/foundations/sprite';
+```
+
+**The sprite is injected into the document and each icon is requested by id:**
+
+```html
+<svg class="icon"><use href="#system-add" /></svg>
+```
+
+**It is not referenced as a file** —`<use href="icons.svg#id">`— because the browser blocks it by
+CORS. Injecting the sprite once, as high up the tree as possible, avoids the whole case. That is why
+it ships as a string module and not as a file: `import { sprite }` resolves in any bundler and in
+Node, with nothing to configure.
+
+And the three families behave differently: **`system`** inherits the context's color (or the
+`.icon` class sets it), **`semantic`** already carries it bound to its token and needs no class, and **`brand`** is
+its own multicolor — it only accepts a size change. The integration guide repeats it with examples.
+
+> **Only `icons.css`, `sprite` and `icons.json` are exported**, not the loose SVG files nor the
+> sprite as a file: an `exports` map is an allowlist, and consumption is by sprite, not by file.

package/icons/icons.css

@@ -0,0 +1,16 @@
+/* packages/foundations/icons/icons.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.icon { display: inline-flex; flex-shrink: 0; width: var(--neo-icon-size-md); height: var(--neo-icon-size-md); }
+.icon--xs { width: var(--neo-icon-size-xs); height: var(--neo-icon-size-xs); }
+.icon--sm { width: var(--neo-icon-size-sm); height: var(--neo-icon-size-sm); }
+.icon--md { width: var(--neo-icon-size-md); height: var(--neo-icon-size-md); }
+.icon--lg { width: var(--neo-icon-size-lg); height: var(--neo-icon-size-lg); }
+.icon--xl { width: var(--neo-icon-size-xl); height: var(--neo-icon-size-xl); }
+.icon--2xl { width: var(--neo-icon-size-2xl); height: var(--neo-icon-size-2xl); }
+.icon--3xl { width: var(--neo-icon-size-3xl); height: var(--neo-icon-size-3xl); }
+.icon--4xl { width: var(--neo-icon-size-4xl); height: var(--neo-icon-size-4xl); }
+
+.icon { color: var(--icon--base--default); }
+.icon--secondary { color: var(--icon--base--secondary); }
+.icon--disabled  { color: var(--icon--base--disabled); }
+.icon--inverse   { color: var(--icon--base--contrast); }