@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-topbar-user/README.md

@@ -24,15 +24,15 @@ nombre y un menú (perfil, cambiar de rol, salir). Dentro de `sui-topbar` sale d
 ## Qué variante usar
 
 > **La guía del DS no tiene página de este chip.** Sale del Figma de SUI (User Profile [Topbar],
-> set 3814:24667: Default, Hover, Active). Uso medido el 03-10-2026: **0 usos** en la app. Lo de
-> abajo es **propuesta, falta aprobación**, salvo lo que es canon de la app.
+> set 3814:24667: Default, Hover, Active). Uso medido el 03-10-2026: **0 usos** en la app. Las reglas
+> marcadas canon están aprobadas (05-10-2026) y no queda ninguna en propuesta.
 
 | prop | cuándo | fuente |
 |---|---|---|
 | `avatar` (string) | La URL de la foto. Siempre de `avatarUrl`, nunca de `photoURL`. | canon (CLAUDE.md, «Fotos de otra persona») |
-| `avatar` (objeto) | Sin foto: `{ initials, color }` para que las iniciales tengan contraste. | propuesta, falta aprobación |
+| `avatar` (objeto) | Sin foto: `{ initials, color }` con el color del rol: `orange` local, `green` repartidor, `blue` cliente. | canon (decisión del dueño, color de avatar sin foto por rol; README de `sui-avatar`, 03-10-2026) |
 | `name` | El nombre corto («Sophia», no el correo). Vacío = chip solo con la foto, para barras angostas. | Figma (name=false) |
-| `verified` | No usar hoy: la app no verifica cuentas de personas. | propuesta, falta aprobación |
+| `verified` | No usar hoy: la app no verifica cuentas de personas. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 | `open` | Mientras el menú de la cuenta está abierto (flecha hacia arriba, `aria-expanded`). | Figma (State=Active) |
 
 ## Tamaño en mobile y en web
@@ -42,7 +42,20 @@ topbar, que hoy es solo de escritorio.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| cuenta en la barra superior | no usar (en mobile la cuenta va en el cajón del sidebar) | con nombre | propuesta, falta aprobación |
+| cuenta en la barra superior | no usar (en mobile la cuenta va en el cajón del sidebar) | con nombre | canon (aprobado por el dueño, 05-10-2026, bloque B7) |
+
+### Por dispositivo (D16)
+
+No aplica una tabla: no tiene input `size`; mide 40 de alto con el avatar en `md` (32) fijo, en
+todos los dispositivos. Como se toca y no tiene un size que llegue a 44, B7 lo saca de todo lo
+táctil: en el celular chico, el celular y la tablet táctil **no se usa** (la cuenta va en el cajón
+del sidebar); solo en la computadora (`pointer: fine`) y en el ultrawide, igual que en la
+computadora. La columna «mobile» de D16 incluye la tablet en lo que se toca, así que el «no usar en
+mobile» de B7 la cubre. El avatar no se pasa por `bp.sizeAvatar()`.
+
+En master-pedidos: sin `[size]` ni helper; si algún día se monta, va detrás de `@if (!bp.tactil())`
+(`isMobile() || toque()`: todo celular por ancho y toda pantalla táctil). No `!bp.isMobile()`: ese
+es solo por ancho (≤ 768) y deja pasar un iPad de 769 a 1024 con `pointer: coarse`.
 
 ## API
 
@@ -72,6 +85,49 @@ topbar, que hoy es solo de escritorio.
   barra de quien mira funciona, pero sigue siendo regla usar `avatarUrl`.
 - Ya trae el arreglo de iOS para el `:active` pegado.
 
+## Bien y mal
+
+La foto y el nombre de la cuenta
+
+```html
+<!-- ❌ mal: el correo empuja la barra y photoURL puede ser la foto de Google -->
+<sui-topbar-user [name]="usuario().email" [avatar]="usuario().photoURL"
+  (clicked)="menuCuenta.set(!menuCuenta())" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-topbar-user [name]="usuario().nombre"
+  [avatar]="usuario().avatarUrl || { initials: usuario().iniciales, color: 'orange' }"
+  [open]="menuCuenta()" (clicked)="menuCuenta.set(!menuCuenta())" />
+```
+
+Sin foto
+
+```html
+<!-- ❌ mal: sin avatar sale la silueta gris, y verified no se usa en esta app -->
+<sui-topbar-user name="Sophia" [verified]="true" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-topbar-user name="Sophia" [avatar]="{ initials: 'S', color: 'orange' }" />
+```
+
+El repartidor de un pedido
+
+```html
+<!-- ❌ mal: es otra persona; la flecha promete un menú que no existe -->
+<sui-topbar-user [name]="pedido().repartidorNombre" [avatar]="pedido().repartidorFoto" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-avatar [size]="bp.sizeAvatar('md')" [src]="pedido().repartidorFoto"
+  [alt]="pedido().repartidorNombre" />
+<span>{{ pedido().repartidorNombre }}</span>
+```
+
 ## Ejemplo
 
 ```html

package/fesm2022/ajuarezso-sui-design-system.mjs

@@ -4105,8 +4105,8 @@ class SuiColorPicker {
      * Default `null` = sin valor seleccionado.
      */
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /** Label visible cuando no hay color seleccionado. */
-    placeholder = input('Elegir color', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Label visible cuando no hay color seleccionado. Imperativo con tuteo (dueño, 05-10-2026, P4 a). */
+    placeholder = input('Elige un color', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** Etiqueta de la sección Recommended Colors dentro del panel. */
     recommendedLabel = input('Colores recomendados', ...(ngDevMode ? [{ debugName: "recommendedLabel" }] : /* istanbul ignore next */ []));
     /** Si true, oculta el HSV spectrum + sliders + hex input — solo grid de presets. */
@@ -7296,8 +7296,9 @@ class SuiDatepicker {
     inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
     /** Alto del campo: small 36 · medium 40 (default) · large 48 · xlarge 52 con días de 44 (ver SuiDatepickerSize). */
     size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /** Placeholder del input cuando no hay valor seleccionado. */
-    placeholder = input('Seleccionar fecha', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Placeholder del campo cuando no hay valor. Sin pasarlo: «Elige una fecha» (`date`) o
+     *  «Elige el período» (`range`), en imperativo con tuteo (dueño, 05-10-2026, P4 a). */
+    placeholder = input(null, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** Si true, muestra Cancel/Apply en el footer. Range siempre lo muestra. */
     showFooter = input(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -7463,11 +7464,13 @@ class SuiDatepicker {
     /** Preset «Todo el tiempo» aplicado: su valor es `{ start: null, end: null }`,
      *  igual que «nada elegido», así que se recuerda aparte para el trigger. */
     _todoElTiempoAplicado = signal(false, ...(ngDevMode ? [{ debugName: "_todoElTiempoAplicado" }] : /* istanbul ignore next */ []));
+    /** El placeholder que se ve: el que se pasó o, si no, el de fábrica según `mode`. */
+    resolvedPlaceholder = computed(() => this.placeholder() ?? (this.mode() === 'range' ? 'Elige el período' : 'Elige una fecha'), ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
     /** Texto del trigger input. */
     triggerText = computed(() => {
         const v = this.value();
         if (!v)
-            return this.placeholder();
+            return this.resolvedPlaceholder();
         if (v instanceof Date)
             return formatDateInput(v);
         if (v.start && v.end)
@@ -7477,12 +7480,12 @@ class SuiDatepicker {
         // Fix 04-10-2026: con «Todo el tiempo» el campo mostraba el placeholder,
         // como si estuviera vacío.
         if (this._todoElTiempoAplicado()) {
-            return this.presets().find(p => p.id === 'all-time')?.label ?? this.placeholder();
+            return this.presets().find(p => p.id === 'all-time')?.label ?? this.resolvedPlaceholder();
         }
-        return this.placeholder();
+        return this.resolvedPlaceholder();
     }, ...(ngDevMode ? [{ debugName: "triggerText" }] : /* istanbul ignore next */ []));
     /** ¿El trigger muestra un valor (no el placeholder)? Pinta el texto oscuro. */
-    hasDisplayValue = computed(() => this.triggerText() !== this.placeholder(), ...(ngDevMode ? [{ debugName: "hasDisplayValue" }] : /* istanbul ignore next */ []));
+    hasDisplayValue = computed(() => this.triggerText() !== this.resolvedPlaceholder(), ...(ngDevMode ? [{ debugName: "hasDisplayValue" }] : /* istanbul ignore next */ []));
     /** Nombre del panel para el lector de pantalla (role dialog / group). */
     panelAriaLabel = computed(() => this.mode() === 'range' ? 'Elegir período' : 'Elegir fecha', ...(ngDevMode ? [{ debugName: "panelAriaLabel" }] : /* istanbul ignore next */ []));
     /** «martes 7 de octubre de 2026» para cada celda (antes «Día 7»). */
@@ -9630,7 +9633,8 @@ class SuiImageUpload {
     resolvedTitle = computed(() => {
         if (this.title())
             return this.title();
-        return this.shape() === 'circle' ? 'Subir foto' : 'Subir logo';
+        // Imperativo con tuteo (dueño, 05-10-2026, P4 a).
+        return this.shape() === 'circle' ? 'Sube tu foto' : 'Sube tu logo';
     }, ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : /* istanbul ignore next */ []));
     resolvedSubtitle = computed(() => {
         if (this.subtitle())
@@ -19826,7 +19830,8 @@ class SuiTimePicker {
     hint = input(null, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     errorMessage = input(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    placeholder = input('Seleccionar hora', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Texto del campo sin hora. Imperativo con tuteo (dueño, 05-10-2026, P4 a). */
+    placeholder = input('Elige una hora', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /**
      * Alto del campo: small 36 · medium 40 (default) · large 48 (extensión SUI,