@ajuarezso/sui-design-system 0.24.1 → 0.25.0

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

@@ -25,18 +25,18 @@ igual.
 ## Qué variante usar
 
 > **La guía del DS no tiene página de este item.** Sale del Figma de SUI (Topbar Items [Topbar],
-> set 3802:24588: Default, Hover, Active). Uso medido el 03-10-2026: **0 usos** en la app. Lo de
-> abajo es **propuesta, falta aprobación**.
+> set 3802:24588: 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 |
 |---|---|---|
-| solo `label` | El caso normal. Una o dos palabras, sentence case. | propuesta, falta aprobación |
-| `icon` | Si **todos** los items de la barra lo llevan. | propuesta, falta aprobación |
+| solo `label` | El caso normal. Una o dos palabras, sentence case. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `icon` | Si **todos** los items de la barra lo llevan. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `rightIcon: 'arrow-down-s-line'` | El item abre un menú («Más ⌄»). El menú lo pones tú. | Figma |
 | `count` | Pendientes que piden acción («3» pedidos por aceptar). Número rojo. | Figma (notification=true) |
 | `badge` | Un «Nuevo» temporal en una sección recién lanzada. String = badge naranja `light` `small`. | Figma (badge=true) |
-| `href` | El item es un link: con ruta interna navega por el router; con `target="_blank"` abre otra pestaña con `rel` seguro. | propuesta, falta aprobación |
-| sin `href` | Es un `<button>`: navegas tú en `(clicked)`. | propuesta, falta aprobación |
+| `href` | El item es un link: con ruta interna navega por el router; con `target="_blank"` abre otra pestaña con `rel` seguro. | según el código |
+| sin `href` | Es un `<button>`: navegas tú en `(clicked)`. | según el código |
 | `active` | La sección actual (fondo gris, texto oscuro, ícono naranja y `aria-current="page"`). Uno solo por barra. | Figma (State=Active) |
 
 ## Tamaño en mobile y en web
@@ -46,7 +46,7 @@ topbar, que hoy es solo de escritorio.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| sección de la barra superior | no usar (no hay topbar en mobile) | tamaño único | propuesta, falta aprobación |
+| sección de la barra superior | no usar (no hay topbar en mobile) | tamaño único | canon (aprobado por el dueño, 05-10-2026, bloque B7) |
 
 En mobile, 36 de alto queda por debajo del área táctil cómoda (44): si algún día se usa ahí, la
 barra tendría que darle más aire.

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,7 @@ 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) |
 
 ## API
 

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,