@ajuarezso/sui-design-system 0.24.0 → 0.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/sui-accordion/README.md +4 -4
- package/docs/sui-activity-feed/README.md +11 -11
- package/docs/sui-activity-filter/README.md +5 -5
- package/docs/sui-app-store-badge/README.md +7 -7
- package/docs/sui-avatar/README.md +26 -23
- package/docs/sui-avatar-group/README.md +11 -7
- package/docs/sui-badge/README.md +7 -7
- package/docs/sui-banner/README.md +15 -15
- package/docs/sui-brand-logo/README.md +24 -23
- package/docs/sui-breadcrumb-item/README.md +3 -3
- package/docs/sui-breadcrumbs/README.md +6 -6
- package/docs/sui-button/README.md +9 -7
- package/docs/sui-button-group/README.md +25 -22
- package/docs/sui-button-group-item/README.md +16 -13
- package/docs/sui-card/README.md +8 -8
- package/docs/sui-chart-legend/README.md +10 -10
- package/docs/sui-chart-legend-dot/README.md +10 -10
- package/docs/sui-checkbox/README.md +4 -4
- package/docs/sui-checkbox-card/README.md +12 -12
- package/docs/sui-checkbox-label/README.md +3 -3
- package/docs/sui-circular-progress-bar/README.md +19 -16
- package/docs/sui-color-dot/README.md +13 -9
- package/docs/sui-color-picker/README.md +9 -9
- package/docs/sui-command-menu-footer/README.md +1 -1
- package/docs/sui-command-menu-item/README.md +13 -12
- package/docs/sui-command-menu-search/README.md +3 -2
- package/docs/sui-compact-avatar-group/README.md +14 -11
- package/docs/sui-compact-button/README.md +16 -11
- package/docs/sui-compact-select/README.md +5 -5
- package/docs/sui-compact-select-for-input/README.md +1 -1
- package/docs/sui-content-card/README.md +12 -12
- package/docs/sui-content-divider/README.md +18 -15
- package/docs/sui-content-label/README.md +17 -17
- package/docs/sui-counter-input/README.md +12 -12
- package/docs/sui-date-selector/README.md +8 -8
- package/docs/sui-datepicker/README.md +14 -14
- package/docs/sui-day-cell/README.md +15 -14
- package/docs/sui-day-label/README.md +4 -4
- package/docs/sui-divider/README.md +9 -6
- package/docs/sui-drawer-header/README.md +9 -9
- package/docs/sui-dropdown-caption/README.md +5 -5
- package/docs/sui-dropdown-item/README.md +5 -5
- package/docs/sui-dropdown-menu/README.md +10 -10
- package/docs/sui-dropdown-search/README.md +3 -3
- package/docs/sui-emoji/README.md +13 -13
- package/docs/sui-empty-state/README.md +4 -4
- package/docs/sui-fancy-button/README.md +15 -13
- package/docs/sui-file-icon/README.md +14 -11
- package/docs/sui-file-upload/README.md +10 -10
- package/docs/sui-file-upload-card/README.md +11 -10
- package/docs/sui-filter/README.md +12 -12
- package/docs/sui-flag/README.md +11 -7
- package/docs/sui-form-hint/README.md +2 -2
- package/docs/sui-form-label/README.md +4 -4
- package/docs/sui-icon/README.md +19 -16
- package/docs/sui-image-upload/README.md +20 -19
- package/docs/sui-image-upload-profile/README.md +12 -11
- package/docs/sui-img-retry/README.md +1 -1
- package/docs/sui-inline-input/README.md +6 -6
- package/docs/sui-inline-select/README.md +2 -2
- package/docs/sui-input/README.md +14 -14
- package/docs/sui-integration-switch/README.md +15 -15
- package/docs/sui-kbd/README.md +3 -3
- package/docs/sui-key-icon/README.md +22 -19
- package/docs/sui-link-button/README.md +21 -18
- package/docs/sui-logo/README.md +20 -19
- package/docs/sui-modal/README.md +11 -11
- package/docs/sui-modal-footer/README.md +3 -3
- package/docs/sui-modal-header/README.md +1 -1
- package/docs/sui-modal-sheet/README.md +4 -4
- package/docs/sui-notification/README.md +11 -11
- package/docs/sui-notification-footer/README.md +4 -4
- package/docs/sui-notification-tab-menu/README.md +4 -4
- package/docs/sui-otp-input/README.md +5 -5
- package/docs/sui-page-header/README.md +14 -12
- package/docs/sui-pagination/README.md +13 -13
- package/docs/sui-payment-icon/README.md +16 -13
- package/docs/sui-period-range/README.md +5 -5
- package/docs/sui-popover/README.md +10 -10
- package/docs/sui-product-card/README.md +15 -15
- package/docs/sui-progress-bar/README.md +12 -9
- package/docs/sui-progress-bar-label/README.md +14 -10
- package/docs/sui-radio/README.md +2 -2
- package/docs/sui-radio-card/README.md +12 -12
- package/docs/sui-radio-label/README.md +3 -3
- package/docs/sui-rating/README.md +22 -19
- package/docs/sui-rich-editor/README.md +2 -2
- package/docs/sui-segmented-control/README.md +9 -9
- package/docs/sui-select/README.md +9 -9
- package/docs/sui-sidebar/README.md +7 -7
- package/docs/sui-slider/README.md +7 -7
- package/docs/sui-social-button/README.md +8 -8
- package/docs/sui-status-badge/README.md +13 -10
- package/docs/sui-stepper/README.md +18 -18
- package/docs/sui-store-card/README.md +16 -16
- package/docs/sui-switch/README.md +2 -2
- package/docs/sui-switch-card/README.md +10 -10
- package/docs/sui-switch-label/README.md +1 -1
- package/docs/sui-tab-chips/README.md +17 -15
- package/docs/sui-tab-menu-horizontal/README.md +6 -6
- package/docs/sui-tab-menu-vertical/README.md +8 -8
- package/docs/sui-table/README.md +13 -13
- package/docs/sui-tag/README.md +14 -11
- package/docs/sui-tag-input/README.md +6 -6
- package/docs/sui-textarea/README.md +8 -8
- package/docs/sui-time-picker/README.md +25 -25
- package/docs/sui-toast/README.md +16 -15
- package/docs/sui-tooltip/README.md +19 -18
- package/docs/sui-topbar/README.md +7 -7
- package/docs/sui-topbar-button/README.md +4 -4
- package/docs/sui-topbar-item/README.md +7 -7
- package/docs/sui-topbar-user/README.md +5 -5
- package/fesm2022/ajuarezso-sui-design-system.mjs +17 -12
- package/fesm2022/ajuarezso-sui-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ajuarezso-sui-design-system.d.ts +27 -23
|
@@ -39,8 +39,8 @@ panel (header + items + footer) · un filtro suelto → compact-select.**
|
|
|
39
39
|
## Qué variante usar
|
|
40
40
|
|
|
41
41
|
> **La guía del DS no tiene página de filtros**: estas piezas salen solo del Figma del DS
|
|
42
|
-
> («Filters»: HorizontalFilter y VerticalFilter).
|
|
43
|
-
>
|
|
42
|
+
> («Filters»: HorizontalFilter y VerticalFilter). Las reglas marcadas canon están aprobadas; lo
|
|
43
|
+
> que sigue en **propuesta** (la barra y el item en mobile) espera decisión.
|
|
44
44
|
>
|
|
45
45
|
> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
|
|
46
46
|
> **0 usos**. Solo aparecen en la vitrina `master-preview`.
|
|
@@ -49,8 +49,8 @@ panel (header + items + footer) · un filtro suelto → compact-select.**
|
|
|
49
49
|
|
|
50
50
|
| variant | cuándo | fuente |
|
|
51
51
|
|---|---|---|
|
|
52
|
-
| `table` (default) | Arriba de una tabla: a la izquierda la vista (`sui-segmented-control`), a la derecha el buscador (`sui-input type="search"`) y el orden (`sui-select` o `sui-compact-select`). |
|
|
53
|
-
| `calendar` | Arriba de una vista por fechas: a la izquierda «Hoy» + el rango (`sui-button-group`), a la derecha el buscador. |
|
|
52
|
+
| `table` (default) | Arriba de una tabla: a la izquierda la vista (`sui-segmented-control`), a la derecha el buscador (`sui-input type="search"`) y el orden (`sui-select` o `sui-compact-select`). | canon (aprobado por el dueño, 05-10-2026, bloque B9), composición del Figma |
|
|
53
|
+
| `calendar` | Arriba de una vista por fechas: a la izquierda «Hoy» + el rango (`sui-button-group`), a la derecha el buscador. | canon (aprobado por el dueño, 05-10-2026, bloque B9), composición del Figma |
|
|
54
54
|
|
|
55
55
|
`variant` solo marca el host (`data-sui-variant`): **no cambia el layout**. Lo que se ve lo deciden
|
|
56
56
|
los controles que se proyectan.
|
|
@@ -59,12 +59,12 @@ los controles que se proyectan.
|
|
|
59
59
|
|
|
60
60
|
| pieza | regla | fuente |
|
|
61
61
|
|---|---|---|
|
|
62
|
-
| `sui-filter-item` `active` | La categoría abierta (la que muestra sus opciones al lado): fondo gris, texto negro, flecha a la derecha. |
|
|
63
|
-
| `sui-filter-item` `leftIcon` | Un ícono por categoría si ayuda a ubicarla («Estado», «Local», «Repartidor»). |
|
|
62
|
+
| `sui-filter-item` `active` | La categoría abierta (la que muestra sus opciones al lado): fondo gris, texto negro, flecha a la derecha. | según el código (estados del Figma) |
|
|
63
|
+
| `sui-filter-item` `leftIcon` | Un ícono por categoría si ayuda a ubicarla («Estado», «Local», «Repartidor»). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
64
64
|
| `sui-filter-panel-header` `clear` | `clear=true` dice «Limpiar» (en español desde el 04-10-2026); un string lo cambia. | canon (CANON-SUI §5: copy en español) |
|
|
65
65
|
| `sui-filter-panel-footer` | «Limpiar» a la izquierda (`stroke neutral`), «Aplicar» a la derecha (`filled primary`), mitad y mitad. | canon (orden de `sui-modal-footer`, CLAUDE.md «Botones») |
|
|
66
|
-
| «Limpiar» en header **y** footer | Elegir uno. Con el footer, el header va sin link. |
|
|
67
|
-
| `applyButton` deshabilitado | `{ label: 'Aplicar', disabled: !cambio() }` mientras no se toca nada. |
|
|
66
|
+
| «Limpiar» en header **y** footer | Elegir uno. Con el footer, el header va sin link. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
67
|
+
| `applyButton` deshabilitado | `{ label: 'Aplicar', disabled: !cambio() }` mientras no se toca nada. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
|
|
68
68
|
|
|
69
69
|
## Tamaño en mobile y en web
|
|
70
70
|
|
|
@@ -72,16 +72,16 @@ Ninguna pieza cambia sola en mobile, salvo la barra, que apila sus dos lados por
|
|
|
72
72
|
|
|
73
73
|
| pieza | mobile | web | fuente |
|
|
74
74
|
|---|---|---|---|
|
|
75
|
-
| `sui-filter-bar` | sin tamaño; los controles adentro van `large` (48) | sin tamaño; los controles `
|
|
75
|
+
| `sui-filter-bar` | sin tamaño; los controles adentro van `large` (48) | sin tamaño; los controles `medium` (40) | web: canon (dueño, 05-10-2026, D16) · mobile: propuesta (igual que `sui-compact-select` en una barra) |
|
|
76
76
|
| `sui-filter-item` | 36 de alto, no se puede cambiar: debajo de los 44 del dedo | 36 | propuesta |
|
|
77
|
-
| `sui-filter-panel-footer` | `medium` (40) es lo más grande que tiene; en mobile, mejor `sui-modal-footer` (48) dentro de un `sui-modal-sheet` | `
|
|
77
|
+
| `sui-filter-panel-footer` | `medium` (40) es lo más grande que tiene; en mobile, mejor `sui-modal-footer` (48) dentro de un `sui-modal-sheet` | `medium` (40) | canon para el 48 de mobile (CLAUDE.md: footer de modal `large`); web `medium` (40): canon (dueño, 05-10-2026, D16), reemplaza el `small` del bloque B1 (`small` es el default del componente: hay que pasarlo) |
|
|
78
78
|
| `sui-filter-panel-header` | sin tamaño | sin tamaño | — |
|
|
79
79
|
|
|
80
80
|
```html
|
|
81
81
|
<sui-filter-bar>
|
|
82
82
|
<sui-segmented-control slot="start" … />
|
|
83
83
|
<div slot="end">
|
|
84
|
-
<sui-input type="search" [size]="bp.isMobile() ? 'large' : '
|
|
84
|
+
<sui-input type="search" [size]="bp.isMobile() ? 'large' : 'medium'" placeholder="Buscar pedido…" … />
|
|
85
85
|
</div>
|
|
86
86
|
</sui-filter-bar>
|
|
87
87
|
```
|
|
@@ -164,7 +164,7 @@ de `sui-drawer-footer`).
|
|
|
164
164
|
```html
|
|
165
165
|
<!-- Panel de filtros en web, anclado a un botón «Filtros» -->
|
|
166
166
|
<sui-dropdown-menu #filtros="suiDropdownMenu" [minWidth]="320">
|
|
167
|
-
<sui-button trigger variant="stroke" color="neutral" size="
|
|
167
|
+
<sui-button trigger variant="stroke" color="neutral" size="medium">Filtros</sui-button>
|
|
168
168
|
<ng-template suiDropdownPanel>
|
|
169
169
|
<sui-filter-panel-header label="Filtros" leftIcon="equalizer-line" />
|
|
170
170
|
<div role="listbox" aria-label="Categorías de filtro">
|
package/docs/sui-flag/README.md
CHANGED
|
@@ -19,7 +19,8 @@ nada a nadie.
|
|
|
19
19
|
|
|
20
20
|
## Qué variante usar
|
|
21
21
|
|
|
22
|
-
> **La guía del DS no tiene este componente.**
|
|
22
|
+
> **La guía del DS no tiene este componente.** Las reglas marcadas canon están aprobadas y las de
|
|
23
|
+
> «según el código» describen el componente; lo que sigue en **propuesta** espera decisión.
|
|
23
24
|
>
|
|
24
25
|
> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
|
|
25
26
|
> `sui-select`, `sui-compact-select`, `sui-compact-select-for-input`, `sui-inline-select`,
|
|
@@ -32,17 +33,17 @@ nada a nadie.
|
|
|
32
33
|
|---|---|---|---|
|
|
33
34
|
| `xs` | 16 | Dentro de un select o un tag (así lo usa el DS). | propuesta |
|
|
34
35
|
| `sm` | 20 | El prefijo de un teléfono. | propuesta |
|
|
35
|
-
| `md` (default) | 24 | Fila de una lista. |
|
|
36
|
+
| `md` (default) | 24 | Fila de una lista. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
|
|
36
37
|
| `lg` | 32 | Dentro de una card. | propuesta |
|
|
37
|
-
| `xl` | 48 | No usar hoy. |
|
|
38
|
-
| `full` | 100 % | Llena su caja (la caja manda). |
|
|
38
|
+
| `xl` | 48 | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
|
|
39
|
+
| `full` | 100 % | Llena su caja (la caja manda). | según el código |
|
|
39
40
|
|
|
40
41
|
### `name` y `ariaLabel`
|
|
41
42
|
|
|
42
43
|
| input | cuándo | fuente |
|
|
43
44
|
|---|---|---|
|
|
44
|
-
| `name` | El slug en inglés y en kebab-case: `peru`, `venezuela`, `united-states`. Son 262. |
|
|
45
|
-
| `ariaLabel` | El nombre del país en español, si no está escrito al lado. Sin él, es decorativa. |
|
|
45
|
+
| `name` | El slug en inglés y en kebab-case: `peru`, `venezuela`, `united-states`. Son 262. | según el código |
|
|
46
|
+
| `ariaLabel` | El nombre del país en español, si no está escrito al lado. Sin él, es decorativa. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
|
|
46
47
|
|
|
47
48
|
Usos de hoy que rompen la regla: **0**.
|
|
48
49
|
|
|
@@ -51,7 +52,10 @@ Usos de hoy que rompen la regla: **0**.
|
|
|
51
52
|
En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
|
|
52
53
|
pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
|
|
53
54
|
breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
|
|
54
|
-
el celular (cliente, repartidor) va directo el valor de mobile.
|
|
55
|
+
el celular (cliente, repartidor) va directo el valor de mobile. No se toca, así que la tablet va
|
|
56
|
+
con el valor de web, y el celular chico (< 380 px) también (D16).
|
|
57
|
+
Es **canon (dueño, 05-10-2026, P1 b)**: un paso más grande en el celular que en computadora, y
|
|
58
|
+
se migra todo ahora, no solo al tocar cada pantalla.
|
|
55
59
|
|
|
56
60
|
| uso | mobile | web |
|
|
57
61
|
|---|---|---|
|
|
@@ -51,8 +51,8 @@ Regla corta: **ayuda o error de un control sin hint propio → form-hint · camp
|
|
|
51
51
|
|---|---|---|
|
|
52
52
|
| `message` | Hasta 8 palabras (mediana 6). Si no cabe, es un `sui-alert`. Sin punto final si es una frase corta; con punto si son dos oraciones. | canon (`docs/CANON-SUI.md` §5.4 el largo; `docs/VOZ-Y-ESCRITURA.md` el punto) |
|
|
53
53
|
| `icon` sin pasar | El de la variante (ninguno en `neutral`, info en `error` y `disabled`). | según la guía del DS (ícono opcional); default de SUI |
|
|
54
|
-
| `icon="…"` en `neutral` | Solo cuando la ayuda es una advertencia que conviene notar («No reconocimos el distrito…»). |
|
|
55
|
-
| `[icon]="null"` | Quita el ícono también en `error`. No usar: el error necesita algo más que el color. |
|
|
54
|
+
| `icon="…"` en `neutral` | Solo cuando la ayuda es una advertencia que conviene notar («No reconocimos el distrito…»). | canon (aprobado por el dueño, 05-10-2026, bloque B9) (2 usos hoy) |
|
|
55
|
+
| `[icon]="null"` | Quita el ícono también en `error`. No usar: el error necesita algo más que el color. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
|
|
56
56
|
|
|
57
57
|
**Usos de hoy que rompen las reglas:**
|
|
58
58
|
|
|
@@ -48,8 +48,8 @@ Regla corta: **campo de texto → su propio `[label]` · grupo o control sin lab
|
|
|
48
48
|
| `label` | Siempre. Una a tres palabras, sentence case, sin dos puntos ni punto final. | según la guía del DS (pieza); largo y forma según `docs/CANON-SUI.md` §5.4 |
|
|
49
49
|
| `required` | Campo obligatorio: asterisco **rojo** (`state-error-base`). | según la guía del DS (asterisco = obligatorio); el color es canon (`docs/CANON-SUI.md` §4: excepción documentada) |
|
|
50
50
|
| `sublabel` | «(Opcional)» en un formulario donde casi todo es obligatorio. Nunca el «opcional» dentro del `label`. | según la guía del DS (ejemplo «(Optional)») |
|
|
51
|
-
| `tooltip` | Ayuda corta que no cabe en la pantalla y no hace falta para llenar el campo. Si hace falta, va visible en `sui-form-hint`. |
|
|
52
|
-
| `link` | Una acción sobre el campo, a la derecha: «Cambiar» (el distrito). |
|
|
51
|
+
| `tooltip` | Ayuda corta que no cabe en la pantalla y no hace falta para llenar el campo. Si hace falta, va visible en `sui-form-hint`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
52
|
+
| `link` | Una acción sobre el campo, a la derecha: «Cambiar» (el distrito). | canon (aprobado por el dueño, 05-10-2026, bloque B9); ya es práctica de la app: 2 usos |
|
|
53
53
|
| `disabled` | El campo de abajo está deshabilitado. | según la guía del DS |
|
|
54
54
|
| `for` | Siempre que el control de abajo tenga `id`. | propuesta, falta aprobación |
|
|
55
55
|
|
|
@@ -59,7 +59,7 @@ Regla corta: **campo de texto → su propio `[label]` · grupo o control sin lab
|
|
|
59
59
|
|---|---|---|
|
|
60
60
|
| `medium` (default) | Lo normal. | según la guía del DS (único tamaño) |
|
|
61
61
|
| `small` | Es **idéntico** a `medium` (mismo CSS). No aporta. | — |
|
|
62
|
-
| `xsmall` |
|
|
62
|
+
| `xsmall` | No usar: con D16 no hay campos `xsmall`; en una tabla o filtro va `medium`. | canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B1 |
|
|
63
63
|
|
|
64
64
|
La regla de controles grandes del dueño (28-09-2026) no aplica aquí: el `size` del label es
|
|
65
65
|
tipografía, no área táctil.
|
|
@@ -85,7 +85,7 @@ tipografía, no área táctil.
|
|
|
85
85
|
| uso | mobile | web |
|
|
86
86
|
|---|---|---|
|
|
87
87
|
| rótulo de un grupo o control | `medium` (14 px) | `medium` (14 px) |
|
|
88
|
-
| junto a un campo
|
|
88
|
+
| junto a un campo de una tabla o filtro | no aplica | `medium` (14 px): ya no hay campos `xsmall` (D16) |
|
|
89
89
|
|
|
90
90
|
No necesita `bp`: es texto, no se toca. Lo único tocable es el `link` («Cambiar»), un
|
|
91
91
|
`sui-link-button` de 12 px **sin tamaño para mobile**: su área táctil es la del texto. Si en
|
package/docs/sui-icon/README.md
CHANGED
|
@@ -26,8 +26,8 @@ propios del DS (`info-custom-fill`, `heart-half-fill`…) también pasan por aqu
|
|
|
26
26
|
|
|
27
27
|
> **La guía del DS no tiene página para el ícono**: usa RemixIcon en todos sus ejemplos, sin
|
|
28
28
|
> reglas de tamaño. La escala de abajo sale de los tokens del DS (`--sui-icon-size-*` y
|
|
29
|
-
> `--sui-icon-*` en `sui-tokens.scss`). Lo marcado «canon» ya es regla del proyecto;
|
|
30
|
-
> **propuesta
|
|
29
|
+
> `--sui-icon-*` en `sui-tokens.scss`). Lo marcado «canon» ya es regla del proyecto; lo que sigue
|
|
30
|
+
> en **propuesta** espera decisión.
|
|
31
31
|
>
|
|
32
32
|
> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 406 íconos en 95 archivos, sin contar
|
|
33
33
|
> prototipos ni vitrinas. 331 `-line`, 43 `-fill`. Ninguno usa el input `color`.
|
|
@@ -36,14 +36,14 @@ propios del DS (`info-custom-fill`, `heart-half-fill`…) también pasan por aqu
|
|
|
36
36
|
|
|
37
37
|
| valor | tamaño de hoy | cuándo | fuente |
|
|
38
38
|
|---|---|---|---|
|
|
39
|
-
| `12` | 5 | Dentro de un badge `small`. |
|
|
40
|
-
| `16` | 69 | Junto a texto chico: metadatos, botones `2xsmall`/`xsmall`, dentro de un kbd. |
|
|
41
|
-
| `20` (default) | 114 | El normal: botones, inputs, filas, navegación. |
|
|
42
|
-
| `24` | 5 | Cabeceras y acciones sueltas. |
|
|
43
|
-
| `32` | 2 | Ícono protagonista. Si va dentro de un círculo, es `sui-key-icon`. |
|
|
39
|
+
| `12` | 5 | Dentro de un badge `small`. | canon (aprobado por el dueño, 05-10-2026, bloque B1), token `--sui-icon-size-xs` |
|
|
40
|
+
| `16` | 69 | Junto a texto chico: metadatos, botones `2xsmall`/`xsmall`, dentro de un kbd. | canon (aprobado por el dueño, 05-10-2026, bloque B1), token `--sui-icon-size-sm` |
|
|
41
|
+
| `20` (default) | 114 | El normal: botones, inputs, filas, navegación. | canon (aprobado por el dueño, 05-10-2026, bloque B1), token `--sui-icon-size-md` |
|
|
42
|
+
| `24` | 5 | Cabeceras y acciones sueltas. | canon (aprobado por el dueño, 05-10-2026, bloque B1), token `--sui-icon-size-lg` |
|
|
43
|
+
| `32` | 2 | Ícono protagonista. Si va dentro de un círculo, es `sui-key-icon`. | canon (aprobado por el dueño, 05-10-2026, bloque B1), token `--sui-icon-size-xl` |
|
|
44
44
|
| `26` | 7 | Solo el ícono del hero de los onboarding (`ob__hero-icon`). | canon (`CLAUDE.md`, patrón de los pasos de onboarding) |
|
|
45
45
|
| `14`, `18` | 149 | Fuera de la escala, pero el DS mismo los usa (tabs, product-card). **A discutir**: no migrar en masa. | propuesta |
|
|
46
|
-
| `13`, `22`, `28`, `44`… | 49 | Sin regla: van al más cercano de la escala. |
|
|
46
|
+
| `13`, `22`, `28`, `44`… | 49 | Sin regla: van al más cercano de la escala. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
|
|
47
47
|
|
|
48
48
|
**Usos de hoy fuera de la escala sin regla: 49.** `22` (20 usos: `components/ota-quick-fab/ota-quick-fab.html:11`,
|
|
49
49
|
`pages/schedule/schedule.html:10`), `13` (14: `pages/super-admin/master-drivers/master-drivers.html:359`, `:419`),
|
|
@@ -56,18 +56,18 @@ propios del DS (`info-custom-fill`, `heart-half-fill`…) también pasan por aqu
|
|
|
56
56
|
|
|
57
57
|
| valor | cuándo | fuente |
|
|
58
58
|
|---|---|---|
|
|
59
|
-
| `-line` | El normal. |
|
|
60
|
-
| `-fill` | El seleccionado (el tab activo) o un glifo chico sobre color. |
|
|
61
|
-
| propios del DS (`info-custom-fill`, `heart-half-fill`, `building-skyline`, `avatar-placeholder`) | Los usan componentes del DS; en la app no hacen falta. |
|
|
59
|
+
| `-line` | El normal. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
60
|
+
| `-fill` | El seleccionado (el tab activo) o un glifo chico sobre color. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
61
|
+
| propios del DS (`info-custom-fill`, `heart-half-fill`, `building-skyline`, `avatar-placeholder`) | Los usan componentes del DS; en la app no hacen falta. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
|
|
62
62
|
|
|
63
63
|
### `color`
|
|
64
64
|
|
|
65
65
|
| valor | cuándo | fuente |
|
|
66
66
|
|---|---|---|
|
|
67
|
-
| sin `color` (default) | El normal: hereda el color del texto. Casi siempre es lo que se quiere. |
|
|
68
|
-
| `var(--sui-icon-sub-600)` | Ícono de apoyo junto a un texto principal. |
|
|
69
|
-
| `var(--sui-icon-soft-400)` | Decorativo, metadatos. |
|
|
70
|
-
| `var(--sui-icon-disabled-300)` | Deshabilitado. |
|
|
67
|
+
| sin `color` (default) | El normal: hereda el color del texto. Casi siempre es lo que se quiere. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
|
|
68
|
+
| `var(--sui-icon-sub-600)` | Ícono de apoyo junto a un texto principal. | canon (CANON-SUI §4.1: los íconos siguen la semántica del texto; sub-600 = secundario que igual se lee) |
|
|
69
|
+
| `var(--sui-icon-soft-400)` | Decorativo, metadatos. | canon (CANON-SUI §4.1: soft-400 = lo que no es contenido, metadata terciaria) |
|
|
70
|
+
| `var(--sui-icon-disabled-300)` | Deshabilitado. | canon (CANON-SUI §4.1: disabled-300 solo para disabled) |
|
|
71
71
|
| `var(--sui-icon-white-0)` | Sobre fondo oscuro o de color. | propuesta |
|
|
72
72
|
| un hex o un color de estado | No usar: si el ícono dice un estado, va en `sui-key-icon` `lighter`. | propuesta |
|
|
73
73
|
|
|
@@ -76,7 +76,10 @@ propios del DS (`info-custom-fill`, `heart-half-fill`…) también pasan por aqu
|
|
|
76
76
|
En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
|
|
77
77
|
pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
|
|
78
78
|
breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
|
|
79
|
-
el celular (cliente, repartidor) va directo el valor de mobile.
|
|
79
|
+
el celular (cliente, repartidor) va directo el valor de mobile. No se toca, así que la tablet va
|
|
80
|
+
con el valor de web, y el celular chico (< 380 px) también (D16).
|
|
81
|
+
Es **canon (dueño, 05-10-2026, P1 b)**: un paso más grande en el celular que en computadora, y
|
|
82
|
+
se migra todo ahora, no solo al tocar cada pantalla.
|
|
80
83
|
|
|
81
84
|
| uso | mobile | web |
|
|
82
85
|
|---|---|---|
|
|
@@ -27,8 +27,9 @@ El archivo que entrega **no se sube tal cual**: pasa por `ImageCompressorService
|
|
|
27
27
|
## Qué variante usar
|
|
28
28
|
|
|
29
29
|
> **La guía del DS no tiene página para este componente** (el «Image Upload» del Figma de origen
|
|
30
|
-
> es otra cosa: la foto con botones, que en SUI es `sui-image-upload-profile`).
|
|
31
|
-
>
|
|
30
|
+
> es otra cosa: la foto con botones, que en SUI es `sui-image-upload-profile`). Las reglas
|
|
31
|
+
> marcadas canon están aprobadas y las de «según el código» describen el componente; lo que sigue
|
|
32
|
+
> en **propuesta** espera decisión.
|
|
32
33
|
>
|
|
33
34
|
> Uso medido el 03-10-2026 en `master-pedidos/src/app` (sin prototipos ni vitrinas): **13 usos en
|
|
34
35
|
> 10 pantallas**. `shape`: 11 `rect`, 2 `circle`. `size`: 7 `xl`, 3 `lg`, 3 sin size (fluidos).
|
|
@@ -38,16 +39,16 @@ El archivo que entrega **no se sube tal cual**: pasa por `ImageCompressorService
|
|
|
38
39
|
|
|
39
40
|
| valor | cuándo | fuente |
|
|
40
41
|
|---|---|---|
|
|
41
|
-
| `circle` (default) | **Solo la foto de una persona** (perfil del cliente, del repartidor, del usuario del local). Así se ve después en `sui-avatar`. |
|
|
42
|
-
| `rect` | **Todo lo demás**: el logo del local (en el home se ve como cuadrado redondeado), la portada, la foto del producto, comprobantes, QR, banners. |
|
|
42
|
+
| `circle` (default) | **Solo la foto de una persona** (perfil del cliente, del repartidor, del usuario del local). Así se ve después en `sui-avatar`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
43
|
+
| `rect` | **Todo lo demás**: el logo del local (en el home se ve como cuadrado redondeado), la portada, la foto del producto, comprobantes, QR, banners. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
43
44
|
|
|
44
45
|
### `size` y `fluid` — según la forma de la imagen
|
|
45
46
|
|
|
46
47
|
| valor | px | cuándo | fuente |
|
|
47
48
|
|---|---|---|---|
|
|
48
|
-
| `fluid` | ancho del contenedor, alto hasta 320 | **Capturas y documentos** (comprobante, Yape, QR) y **imágenes apaisadas** (portada 16:9, banner). Una captura de celular es vertical: en un cuadrado se recorta. |
|
|
49
|
-
| `xl` | 200 | **Imágenes cuadradas**: logo, foto del producto, foto de perfil. |
|
|
50
|
-
| `lg` (default) | 160 | Imagen cuadrada al lado de otra cosa en la misma fila (el logo junto al nombre del local en web). |
|
|
49
|
+
| `fluid` | ancho del contenedor, alto hasta 320 | **Capturas y documentos** (comprobante, Yape, QR) y **imágenes apaisadas** (portada 16:9, banner). Una captura de celular es vertical: en un cuadrado se recorta. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
50
|
+
| `xl` | 200 | **Imágenes cuadradas**: logo, foto del producto, foto de perfil. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
|
|
51
|
+
| `lg` (default) | 160 | Imagen cuadrada al lado de otra cosa en la misma fila (el logo junto al nombre del local en web). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
|
|
51
52
|
| `md` | 120 | No usar: chico para ver si la foto quedó bien. | no usar |
|
|
52
53
|
| `sm` | 80 | No usar: no entra el texto (el subtítulo se esconde). | no usar |
|
|
53
54
|
|
|
@@ -55,25 +56,25 @@ El archivo que entrega **no se sube tal cual**: pasa por `ImageCompressorService
|
|
|
55
56
|
|
|
56
57
|
| valor | cuándo | fuente |
|
|
57
58
|
|---|---|---|
|
|
58
|
-
| `true` | **Siempre.** Con imagen muestra dos botones a la vista: lápiz y tacho. El lápiz emite `editRequested`: si la pantalla tiene recortador, lo abre (`app-image-cropper`); si no, llama a `abrirSelector()` para elegir otra (como el Yape del repartidor). |
|
|
59
|
+
| `true` | **Siempre.** Con imagen muestra dos botones a la vista: lápiz y tacho. El lápiz emite `editRequested`: si la pantalla tiene recortador, lo abre (`app-image-cropper`); si no, llama a `abrirSelector()` para elegir otra (como el Yape del repartidor). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
|
|
59
60
|
| `false` (default) | No usar: con imagen, el lápiz aparece **solo al pasar el mouse** (en el celular no se ve) y el «Quitar» de abajo es un botón aparte (32 px). | no usar |
|
|
60
61
|
|
|
61
62
|
### Textos: `title`, `subtitle`
|
|
62
63
|
|
|
63
64
|
| input | cuándo | fuente |
|
|
64
65
|
|---|---|---|
|
|
65
|
-
| `title` | Verbo + qué: «
|
|
66
|
-
| `subtitle` | Formatos y tamaño, **solo los que el componente acepta** (JPG, PNG, WebP, GIF o HEIC), o el encuadre que se va a aplicar («se recorta a 16:9»). Mientras procesa: «Procesando…». |
|
|
66
|
+
| `title` | Verbo en imperativo con tuteo + qué: «Sube tu logo», «Sube el comprobante», «Sube la captura del pago». Sin `title`: «Sube tu foto» (`circle`) o «Sube tu logo» (`rect`). | canon (dueño, 05-10-2026, P4 a); el default cambió en la 0.25.0 (antes «Subir foto» / «Subir logo») |
|
|
67
|
+
| `subtitle` | Formatos y tamaño, **solo los que el componente acepta** (JPG, PNG, WebP, GIF o HEIC), o el encuadre que se va a aplicar («se recorta a 16:9»). Mientras procesa: «Procesando…». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
|
|
67
68
|
|
|
68
69
|
### `maxSize`, `disabled`, `src`
|
|
69
70
|
|
|
70
71
|
| input | cuándo | fuente |
|
|
71
72
|
|---|---|---|
|
|
72
|
-
| `maxSize` | Siempre, en **bytes**. 10 MB para capturas y comprobantes, 20–50 MB para fotos que se van a comprimir. |
|
|
73
|
-
| `disabled` | Mientras se comprime o se sube (`subiendo()`), para que no se elija otra encima. |
|
|
74
|
-
| `src` (model) | La URL guardada, o la vista previa local mientras se sube. Con `[(src)]` el componente la pone solo al elegir. |
|
|
73
|
+
| `maxSize` | Siempre, en **bytes**. 10 MB para capturas y comprobantes, 20–50 MB para fotos que se van a comprimir. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
74
|
+
| `disabled` | Mientras se comprime o se sube (`subiendo()`), para que no se elija otra encima. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
|
|
75
|
+
| `src` (model) | La URL guardada, o la vista previa local mientras se sube. Con `[(src)]` el componente la pone solo al elegir. | según el código |
|
|
75
76
|
|
|
76
|
-
### Usos de hoy que rompen la
|
|
77
|
+
### Usos de hoy que rompen la regla
|
|
77
78
|
|
|
78
79
|
- **5 subtítulos prometen HEIC**: hasta el 03-10-2026 el componente lo rechazaba; desde la 0.22.0
|
|
79
80
|
(la que usa la app) ya lo acepta, así que **ya no rompen nada**. Lo que queda es la vista previa en
|
|
@@ -108,14 +109,14 @@ que se toca a 44 sin cambiar el dibujo ni los sizes de hoy.
|
|
|
108
109
|
|
|
109
110
|
| uso | mobile | web | fuente |
|
|
110
111
|
|---|---|---|---|
|
|
111
|
-
| comprobante, captura, QR, portada, banner | `fluid` | `fluid` (en una columna de ≤ 480 px) |
|
|
112
|
-
| logo, foto de producto, foto de perfil | `xl` (200) | `xl` (200), o `lg` (160) al lado del nombre |
|
|
112
|
+
| comprobante, captura, QR, portada, banner | `fluid` | `fluid` (en una columna de ≤ 480 px) | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
|
|
113
|
+
| logo, foto de producto, foto de perfil | `xl` (200) | `xl` (200), o `lg` (160) al lado del nombre | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
|
|
113
114
|
| lápiz y tacho (`editable`) | se ven de 40 (32 en `sm`), se tocan en 44 de alto; a los lados el área crece la mitad del espacio entre los dos (3; 2 en `sm`) para no pisarse | 40 px | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (área) · canon (aprobado por el dueño, 03-10-2026), extensión SUI (40) |
|
|
114
115
|
| «Quitar» (sin `editable`) | se ve de 32 (`sui-button` `xsmall`), se toca en 44 de alto: crece 4 hacia la foto (la mitad del gap de 8) y 8 hacia abajo | 32 px | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (área) · canon (aprobado por el dueño, 03-10-2026) |
|
|
115
116
|
|
|
116
117
|
```html
|
|
117
118
|
<sui-image-upload shape="rect" [size]="bp.isMobile() ? 'xl' : 'lg'" [editable]="true"
|
|
118
|
-
[src]="logo()" [maxSize]="50 * 1024 * 1024" title="
|
|
119
|
+
[src]="logo()" [maxSize]="50 * 1024 * 1024" title="Sube tu logo"
|
|
119
120
|
subtitle="JPG, PNG o WebP — máx 50 MB"
|
|
120
121
|
(imageSelected)="alElegirLogo($event)" (editRequested)="abrirRecortador()"
|
|
121
122
|
(removed)="quitarLogo()" />
|
|
@@ -200,13 +201,13 @@ recortador; se llama con una referencia: `#qr` → `qr.abrirSelector()`).
|
|
|
200
201
|
<!-- Comprobante: ancho completo, el lápiz elige otra captura -->
|
|
201
202
|
<sui-image-upload #comprobante shape="rect" [fluid]="true" [editable]="true"
|
|
202
203
|
[src]="vistaPrevia()" [maxSize]="10 * 1024 * 1024"
|
|
203
|
-
title="
|
|
204
|
+
title="Sube el comprobante" subtitle="Captura del Yape o del banco — máx 10 MB"
|
|
204
205
|
(imageSelected)="alElegir($event)" (editRequested)="comprobante.abrirSelector()"
|
|
205
206
|
(removed)="quitar()" />
|
|
206
207
|
|
|
207
208
|
<!-- Foto del producto: cuadrada, el lápiz abre el recortador -->
|
|
208
209
|
<sui-image-upload shape="rect" size="xl" [editable]="true" [src]="foto()"
|
|
209
|
-
title="
|
|
210
|
+
title="Sube tu foto" subtitle="JPG, PNG o WebP — se comprime sola"
|
|
210
211
|
(imageSelected)="alElegir($event)" (editRequested)="abrirRecortador()"
|
|
211
212
|
(removed)="quitarFoto()" />
|
|
212
213
|
```
|
|
@@ -27,7 +27,8 @@ chico (56–64 px) con su texto y los botones al lado, en una fila de un formula
|
|
|
27
27
|
## Qué variante usar
|
|
28
28
|
|
|
29
29
|
> **La guía del DS no tiene página para este componente** (existe en el Figma de origen, sin
|
|
30
|
-
> texto de uso).
|
|
30
|
+
> texto de uso). Las reglas marcadas canon están aprobadas y las de «según el código» describen
|
|
31
|
+
> el componente; lo que sigue en **propuesta** espera decisión.
|
|
31
32
|
>
|
|
32
33
|
> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. La foto de perfil va con
|
|
33
34
|
> `app-avatar-editor` (3 pantallas).
|
|
@@ -36,27 +37,27 @@ chico (56–64 px) con su texto y los botones al lado, en una fila de un formula
|
|
|
36
37
|
|
|
37
38
|
| valor | cuándo | fuente |
|
|
38
39
|
|---|---|---|
|
|
39
|
-
| `avatar` (default) | La foto de una persona. Vacío muestra una silueta. |
|
|
40
|
-
| `company` | Un negocio. Vacío muestra edificios. Ojo: lo muestra en círculo. |
|
|
40
|
+
| `avatar` (default) | La foto de una persona. Vacío muestra una silueta. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
41
|
+
| `company` | Un negocio. Vacío muestra edificios. Ojo: lo muestra en círculo. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
41
42
|
|
|
42
43
|
### `alignment`
|
|
43
44
|
|
|
44
45
|
| valor | cuándo | fuente |
|
|
45
46
|
|---|---|---|
|
|
46
|
-
| `vertical` (default) | Con texto: título y requisitos («Mín. 400 × 400 px, PNG o JPEG»), avatar de 64. |
|
|
47
|
-
| `horizontal` | Sin texto, solo los botones al lado del avatar de 56. Cuando el label ya está arriba (`sui-form-label`). |
|
|
47
|
+
| `vertical` (default) | Con texto: título y requisitos («Mín. 400 × 400 px, PNG o JPEG»), avatar de 64. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
48
|
+
| `horizontal` | Sin texto, solo los botones al lado del avatar de 56. Cuando el label ya está arriba (`sui-form-label`). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
48
49
|
|
|
49
50
|
### Textos y estados
|
|
50
51
|
|
|
51
52
|
| input | cuándo | fuente |
|
|
52
53
|
|---|---|---|
|
|
53
|
-
| `title` | Qué es: «Tu foto», «Foto de perfil». Solo se ve en `vertical`. |
|
|
54
|
-
| `subtitle` | Requisitos reales: formatos que se aceptan y para qué se usa («La ve el cliente cuando llevas su pedido»). |
|
|
54
|
+
| `title` | Qué es: «Tu foto», «Foto de perfil». Solo se ve en `vertical`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
|
|
55
|
+
| `subtitle` | Requisitos reales: formatos que se aceptan y para qué se usa («La ve el cliente cuando llevas su pedido»). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
|
|
55
56
|
| `labels` | Ya vienen en español con tuteo (Subir, Eliminar, Cambiar). Cambiarlos solo si el contexto pide otro verbo («Quitar»). | propuesta |
|
|
56
|
-
| `imageUrl` | La URL guardada. Con imagen muestra Eliminar + Cambiar. |
|
|
57
|
-
| `companyLogoSrc` | Solo con `type="company"`: el logo, que gana sobre `imageUrl`. |
|
|
58
|
-
| `loading` | **Siempre** mientras se comprime y se sube: deshabilita los botones y atenúa la foto. |
|
|
59
|
-
| `disabled` | La persona no puede cambiarla (cuenta verificada con foto bloqueada). |
|
|
57
|
+
| `imageUrl` | La URL guardada. Con imagen muestra Eliminar + Cambiar. | según el código |
|
|
58
|
+
| `companyLogoSrc` | Solo con `type="company"`: el logo, que gana sobre `imageUrl`. | según el código |
|
|
59
|
+
| `loading` | **Siempre** mientras se comprime y se sube: deshabilita los botones y atenúa la foto. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
|
|
60
|
+
| `disabled` | La persona no puede cambiarla (cuenta verificada con foto bloqueada). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
|
|
60
61
|
|
|
61
62
|
Usos de hoy que rompen la regla: **0**.
|
|
62
63
|
|
|
@@ -45,7 +45,7 @@ No tiene variantes ni inputs. Lo que hace:
|
|
|
45
45
|
|
|
46
46
|
| dónde | regla | fuente |
|
|
47
47
|
|---|---|---|
|
|
48
|
-
| imágenes del Storage en el home y los listados del cliente | siempre con la directiva |
|
|
48
|
+
| imágenes del Storage en el home y los listados del cliente | siempre con la directiva | canon (aprobado por el dueño, 05-10-2026, bloque B9) — es donde está hoy, y donde se vio el bug del 10-07-2026: portadas grises tras un corte |
|
|
49
49
|
| el resto de `<img>` remotos | sumarla cuando la imagen sea parte de la decisión (la foto del producto en la carta) | propuesta |
|
|
50
50
|
|
|
51
51
|
## Tamaño en mobile y en web
|
|
@@ -28,7 +28,7 @@ Regla corta: **un dato, en su lugar, que se corrige rápido → inline · varios
|
|
|
28
28
|
## Qué variante usar
|
|
29
29
|
|
|
30
30
|
> **La guía del DS no tiene página para este componente.** Viene del Figma («Inline Input»).
|
|
31
|
-
>
|
|
31
|
+
> Las reglas de abajo son **canon (aprobado por el dueño, 05-10-2026)**; las filas «API» describen el componente.
|
|
32
32
|
>
|
|
33
33
|
> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Hay listas con campos siempre
|
|
34
34
|
> abiertos que se parecen (`pages/super-admin/master-settings/master-settings.html:101`, nombre de
|
|
@@ -38,11 +38,11 @@ Regla corta: **un dato, en su lugar, que se corrige rápido → inline · varios
|
|
|
38
38
|
| prop / evento | cuándo | fuente |
|
|
39
39
|
|---|---|---|
|
|
40
40
|
| `value` | El dato. `[(value)]` o `formControlName`, nunca los dos. | API |
|
|
41
|
-
| `placeholder` | Lo que se ve si está vacío: «Sin nombre». **Siempre**: el default genérico es «Escribe aquí…» (en español desde el 04-10-2026). |
|
|
42
|
-
| `leftIcon` | Un ícono que dice qué dato es (`price-tag-3-line` para una categoría). `false` si el texto se explica solo. El default es `user-3-line`. |
|
|
43
|
-
| `editLabel` | Nombre accesible del lápiz: «Editar nombre». |
|
|
44
|
-
| `error` | El valor escrito no sirve (vacío, repetido). Solo se ve en edición; no trae mensaje. |
|
|
45
|
-
| `disabled` | Mientras se guarda. |
|
|
41
|
+
| `placeholder` | Lo que se ve si está vacío: «Sin nombre». **Siempre**: el default genérico es «Escribe aquí…» (en español desde el 04-10-2026). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
|
|
42
|
+
| `leftIcon` | Un ícono que dice qué dato es (`price-tag-3-line` para una categoría). `false` si el texto se explica solo. El default es `user-3-line`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
|
|
43
|
+
| `editLabel` | Nombre accesible del lápiz: «Editar nombre». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
|
|
44
|
+
| `error` | El valor escrito no sirve (vacío, repetido). Solo se ve en edición; no trae mensaje. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
|
|
45
|
+
| `disabled` | Mientras se guarda. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
|
|
46
46
|
| `(confirm)` | Guardar. Llega el texto nuevo. | API |
|
|
47
47
|
| `(cancel)` · `(edit)` | Volver atrás sin guardar · avisar que se empezó a editar. | API |
|
|
48
48
|
|
|
@@ -50,8 +50,8 @@ entera.
|
|
|
50
50
|
|
|
51
51
|
| uso | mobile | web | fuente |
|
|
52
52
|
|---|---|---|---|
|
|
53
|
-
| dentro de una frase | evitar: usar `sui-select` | 20 px, en línea con el texto |
|
|
54
|
-
| al final de un `sui-input` | el alto lo da el input (`large`) | el alto lo da el input (`medium`) |
|
|
53
|
+
| dentro de una frase | evitar: usar `sui-select` | 20 px, en línea con el texto | canon (aprobado por el dueño, 05-10-2026, bloque B7) |
|
|
54
|
+
| al final de un `sui-input` | el alto lo da el input (`large`) | el alto lo da el input (`medium`) | mobile (input `large`): canon (decisión del dueño 04-10-2026, piso táctil 44; ver `sui-input`) · web (input `medium`): canon (aprobado por el dueño, 05-10-2026, bloque B1) |
|
|
55
55
|
|
|
56
56
|
Las opciones del menú miden **36 px también en mobile**: a diferencia de `sui-select` y de los
|
|
57
57
|
compactos, este no tiene la regla de 44 en ≤ 767 px (`sui-inline-select.scss` no la trae).
|
package/docs/sui-input/README.md
CHANGED
|
@@ -33,7 +33,7 @@ Regla corta: **una línea → input · varias → textarea · de una lista → s
|
|
|
33
33
|
> escribir un valor de una sola línea y muestra ejemplos (ícono, tamaños, afijos, label y hint,
|
|
34
34
|
> contraseña con ojo, contraseña con niveles, error, con botón, tarjeta, con select, con tags,
|
|
35
35
|
> fecha y contador) sin do/don't. Lo marcado «según la guía del DS» sale de esos ejemplos; el
|
|
36
|
-
> resto es
|
|
36
|
+
> resto es canon (CLAUDE.md, CANON-SUI o aprobado por el dueño el 05-10-2026); lo que sigue en **propuesta** espera decisión.
|
|
37
37
|
>
|
|
38
38
|
> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
|
|
39
39
|
> `master-ejercicios`): **195 usos en 61 archivos**. Tipos: 42 `text`, 36 sin `type` (`text`),
|
|
@@ -52,10 +52,10 @@ El `type` decide el teclado del teléfono y el filtro de teclas. Por dentro, `nu
|
|
|
52
52
|
| `email` | Correo. Pide el teclado con `@`. Va con `autocomplete="email"`. | según la guía del DS (ejemplo con label y hint) |
|
|
53
53
|
| `tel` | Celular peruano de 9 dígitos, con `[maxlength]="9"` y placeholder `987 654 321`. | según la guía del DS (tipo nativo); el formato es propuesta |
|
|
54
54
|
| `amount` | **Todo monto en soles**, siempre con `prefix="S/"` y placeholder `0.00`. Pone comas de miles y dos decimales al salir. | canon (CANON-SUI §5.5, 27-07-2026) |
|
|
55
|
-
| `number` | Un entero que no es dinero: minutos, kilómetros, cupos, porcentaje. Si es dinero, `amount`. |
|
|
55
|
+
| `number` | Un entero que no es dinero: minutos, kilómetros, cupos, porcentaje. Si es dinero, `amount`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
56
56
|
| `search` | **Todo buscador.** Pide la lupa en el teclado sola (y no lleva `inputmode`). | canon (CLAUDE.md «La lupa del teclado», 14-08-2026) |
|
|
57
57
|
| `password-toggle` | **Toda contraseña**: login y registro. El ojo deja revisar lo escrito en el teléfono. | según la guía del DS (sus dos ejemplos de contraseña traen el ojo) |
|
|
58
|
-
| `password` | No usar: sin ojo, en el teléfono no se puede revisar lo tipeado. |
|
|
58
|
+
| `password` | No usar: sin ojo, en el teléfono no se puede revisar lo tipeado. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
59
59
|
| `date` / `datetime-local` | Una fecha suelta en un formulario del panel («Válido hasta», «Fecha del gasto»). Abre el selector nativo. Para un calendario propio, ver `sui-datepicker`. | propuesta, falta aprobación |
|
|
60
60
|
| `url` | Un enlace (imagen de campaña). | según la guía del DS (ejemplo con afijo `https://`) |
|
|
61
61
|
| `card` | No usar hoy: no hay pago con tarjeta. | según la guía del DS (ejemplo «Payment Input») |
|
|
@@ -74,21 +74,21 @@ El `type` decide el teclado del teléfono y el filtro de teclas. Por dentro, `nu
|
|
|
74
74
|
| `sublabel` | **«(Opcional)»**, entre paréntesis, en un campo que no es obligatorio, en vez de escribir «(opcional)» en el label. También «(No editable)». El componente no pone los paréntesis: sin ellos queda pegado («ReferenciaOpcional»). | según la guía del DS (`(Optional)`) y canon (README de `sui-form-label`) |
|
|
75
75
|
| `tooltip` | Una aclaración que no entra en el hint. Hoy sin uso. | según la guía del DS (ícono de info del label) |
|
|
76
76
|
| `hint` | Una línea que ayuda a llenar bien: «9 dígitos, empezando con 9», «Mínimo 6 caracteres». | según la guía del DS |
|
|
77
|
-
| `hintIcon` | No usar hoy: el hint se lee solo; el ícono suma ruido en formularios largos. |
|
|
77
|
+
| `hintIcon` | No usar hoy: el hint se lee solo; el ícono suma ruido en formularios largos. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
|
|
78
78
|
| `error` + `errorMessage` | El error va **con** su mensaje, que reemplaza al hint. `error` solo pinta el borde. | según la guía del DS (`Has Error`) |
|
|
79
79
|
| `placeholder` | Un ejemplo del formato, no el nombre del campo: «987 654 321», «Ej: Av. Perú 224», «0.00». Elipsis `…`, no `...`. | canon (CANON-SUI §5.2 y §5.5) |
|
|
80
80
|
| `prefix` | `S/` en los montos. Nada más hoy. | canon (CANON-SUI §5.5) |
|
|
81
|
-
| `icon` + `iconPosition` | `search-line` a la izquierda en buscadores; `map-pin-2-line` en un campo de dirección de solo lectura. `right` no tiene caso hoy. | según la guía del DS (ejemplo con ícono); el «cuándo
|
|
81
|
+
| `icon` + `iconPosition` | `search-line` a la izquierda en buscadores; `map-pin-2-line` en un campo de dirección de solo lectura. `right` no tiene caso hoy. | según la guía del DS (ejemplo con ícono); el «cuándo»: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
82
82
|
| `showClear` | Buscadores: la X borra la búsqueda de un toque. | propuesta, falta aprobación (ya lo hacen los 3 buscadores del cliente) |
|
|
83
|
-
| `fullRadius` | Solo el buscador principal del cliente (home, carta del local, rubro), que va encima de chips redondos. Los formularios, con el radio normal. |
|
|
83
|
+
| `fullRadius` | Solo el buscador principal del cliente (home, carta del local, rubro), que va encima de chips redondos. Los formularios, con el radio normal. | canon (aprobado por el dueño, 05-10-2026, bloque B9) (ya es práctica: `pages/customer/store-browser/store-browser.html:43`) |
|
|
84
84
|
| `maxlength` | Teléfono (9), nombres con tope, códigos. | propuesta, falta aprobación |
|
|
85
85
|
| `inputmode` | Solo cuando el `type` no pide el teclado correcto: un DNI o un número de cuenta en `type="text"` → `numeric`. **Nunca `search`.** | canon (CLAUDE.md «La lupa del teclado», 14-08-2026) |
|
|
86
86
|
| `enterkeyhint` | `next` en formularios de varios pasos, `send` en un chat, `done` en el último campo. El buscador ya pide `search` solo. | propuesta, falta aprobación |
|
|
87
|
-
| `autocomplete` | Siempre en datos de la persona: `name`, `given-name`, `email`, `tel`, `current-password`, `new-password`. `off` en buscadores. |
|
|
88
|
-
| `readonly` | Un dato que se muestra en forma de campo pero se elige en otro lado (el distrito que sale del mapa). |
|
|
87
|
+
| `autocomplete` | Siempre en datos de la persona: `name`, `given-name`, `email`, `tel`, `current-password`, `new-password`. `off` en buscadores. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
|
|
88
|
+
| `readonly` | Un dato que se muestra en forma de campo pero se elige en otro lado (el distrito que sale del mapa). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
|
|
89
89
|
| `disabled` | Mientras se envía, o cuando el campo no aplica todavía. | según la guía del DS |
|
|
90
90
|
| `min` / `max` | **No hacen nada** (el `<input>` real es `text`). Validar en el componente que lo usa. | código del DS |
|
|
91
|
-
| `paste` | `false` solo si pegar un monto armaría un valor equivocado. Hoy sin uso. |
|
|
91
|
+
| `paste` | `false` solo si pegar un monto armaría un valor equivocado. Hoy sin uso. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
|
|
92
92
|
| `closeOnOutsideClick` | Déjalo en `true`: tocar fuera baja el teclado. `false` solo si la pantalla maneja el foco a mano (1 uso). | código del DS |
|
|
93
93
|
| `leadingControl` / `trailingControl` / `leadingDivider` / `trailingDivider` | Componer un control adentro: el país del teléfono (`sui-compact-select-for-input` en `[data-slot=start]`) o una acción al lado. Hoy sin uso. | según la guía del DS (ejemplos «With Select» y «With Button») |
|
|
94
94
|
|
|
@@ -114,10 +114,10 @@ teléfono también va en 16 en todos los tamaños (antes se quedaba en 14 al lad
|
|
|
114
114
|
|
|
115
115
|
| uso | mobile | web | fuente |
|
|
116
116
|
|---|---|---|---|
|
|
117
|
-
| campo de formulario | `large` (48), igual que el botón del footer | `medium` (40) |
|
|
118
|
-
| buscador principal del cliente (home, carta, rubro) | `xlarge` (52) + `fullRadius` | `xlarge` + `fullRadius` |
|
|
119
|
-
| buscador o filtro de una lista del panel | `large` (48) | `
|
|
120
|
-
| campo dentro de una tabla o fila densa | no aplica | `
|
|
117
|
+
| campo de formulario | `large` (48), igual que el botón del footer | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: `medium` 40 no llega y `large` 48 es el primer size que sí) · web `medium`: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
|
|
118
|
+
| buscador principal del cliente (home, carta, rubro) | `xlarge` (52) + `fullRadius` | `xlarge` + `fullRadius` | canon (aprobado por el dueño, 05-10-2026, bloque B1) (ya es práctica en las 3 pantallas) |
|
|
119
|
+
| buscador o filtro de una lista del panel | `large` (48) | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: `large` 48 es el primer size que llega) · web `medium`: canon (dueño, 05-10-2026, D16) (hoy `pages/orders/orders.html:72` va en `small`: se migra) |
|
|
120
|
+
| campo dentro de una tabla o fila densa | no aplica | `medium` (40) | canon (dueño, 05-10-2026, D16): nada en `xsmall` (la guía del DS lo usa ahí) |
|
|
121
121
|
|
|
122
122
|
```html
|
|
123
123
|
<sui-input [size]="bp.isMobile() ? 'large' : 'medium'" label="Teléfono" type="tel" … />
|
|
@@ -148,7 +148,7 @@ en la columna de la derecha, se usa.
|
|
|
148
148
|
| `iconPosition="right"` | el ícono de la derecha se confunde con una acción | un dato con unidad visual (un ícono de moto en «Placa») |
|
|
149
149
|
| `paste=false` | pegar ayuda más de lo que rompe | un monto que llega con formato raro desde otra app |
|
|
150
150
|
| afijos con control (`leadingControl`…) | solo hay teléfonos de Perú (+51) | teléfono con código de país, o monto con moneda (ver `sui-compact-select-for-input`) |
|
|
151
|
-
| `size="xsmall"` |
|
|
151
|
+
| `size="xsmall"` | es chico (D16, 05-10-2026) | nunca: la edición rápida de un precio dentro de una tabla va `medium` |
|
|
152
152
|
|
|
153
153
|
## API
|
|
154
154
|
|
|
@@ -38,26 +38,26 @@ Regla corta: **servicio externo que se prende y se configura → integration-swi
|
|
|
38
38
|
|
|
39
39
|
| combinación | cuándo | fuente |
|
|
40
40
|
|---|---|---|
|
|
41
|
-
| `horizontal` · `card` (default) | Una integración suelta en una pantalla de ajustes de web. |
|
|
42
|
-
| `vertical` · `card` | Una grilla de integraciones, o la misma en mobile (el «Administrar» baja a ancho completo). |
|
|
43
|
-
| `horizontal` · `list` | Una lista de integraciones dentro de una card que ya pone el borde. |
|
|
44
|
-
| `vertical` · `list` | Ver «No usar». |
|
|
41
|
+
| `horizontal` · `card` (default) | Una integración suelta en una pantalla de ajustes de web. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
42
|
+
| `vertical` · `card` | Una grilla de integraciones, o la misma en mobile (el «Administrar» baja a ancho completo). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
43
|
+
| `horizontal` · `list` | Una lista de integraciones dentro de una card que ya pone el borde. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
44
|
+
| `vertical` · `list` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
45
45
|
|
|
46
46
|
### Las piezas
|
|
47
47
|
|
|
48
48
|
| prop | cuándo | fuente |
|
|
49
49
|
|---|---|---|
|
|
50
|
-
| `title` | Siempre. El nombre del servicio: «WhatsApp Business». |
|
|
51
|
-
| `description` | Qué hace conectarlo, en una línea: «Avisa al cliente por WhatsApp cuando su pedido sale del local.» |
|
|
52
|
-
| `brandIconSrc` | El logo del servicio (`assets/brand/brand-logos/<marca>-original.svg`). |
|
|
53
|
-
| `brandIcon` | Un ícono Remix cuando no hay logo. |
|
|
54
|
-
| logo proyectado `[sui-integration-brand]` | Un `sui-brand-logo` u otro elemento propio. |
|
|
55
|
-
| `manage` (`true`, dice «Administrar») | Siempre que el servicio tenga configuración. El default ya está en español (03-10-2026). |
|
|
56
|
-
| `[manage]="false"` | El servicio no se configura: solo se prende. |
|
|
57
|
-
| `showToggle=false` | Se administra pero no se apaga desde aquí. |
|
|
58
|
-
| `badge` | Integración nueva. Con string sale naranja `light`; pasa el objeto (`purple` para lo nuevo, según el badge). |
|
|
59
|
-
| `disabled` | Falta un dato para conectarla (el RUC, la cuenta). |
|
|
60
|
-
| `[active]` + `(activeChange)` | El estado. |
|
|
50
|
+
| `title` | Siempre. El nombre del servicio: «WhatsApp Business». | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
51
|
+
| `description` | Qué hace conectarlo, en una línea: «Avisa al cliente por WhatsApp cuando su pedido sale del local.» | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
52
|
+
| `brandIconSrc` | El logo del servicio (`assets/brand/brand-logos/<marca>-original.svg`). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
53
|
+
| `brandIcon` | Un ícono Remix cuando no hay logo. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
54
|
+
| logo proyectado `[sui-integration-brand]` | Un `sui-brand-logo` u otro elemento propio. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
55
|
+
| `manage` (`true`, dice «Administrar») | Siempre que el servicio tenga configuración. El default ya está en español (03-10-2026). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
56
|
+
| `[manage]="false"` | El servicio no se configura: solo se prende. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
57
|
+
| `showToggle=false` | Se administra pero no se apaga desde aquí. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
58
|
+
| `badge` | Integración nueva. Con string sale naranja `light`; pasa el objeto (`purple` para lo nuevo, según el badge). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
59
|
+
| `disabled` | Falta un dato para conectarla (el RUC, la cuenta). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
60
|
+
| `[active]` + `(activeChange)` | El estado. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
|
|
61
61
|
|
|
62
62
|
**Usos de hoy que rompen las reglas:** 0 (no hay usos).
|
|
63
63
|
|
package/docs/sui-kbd/README.md
CHANGED
|
@@ -23,7 +23,7 @@ cerrar, las flechas y el enter al pie de un menú.
|
|
|
23
23
|
|
|
24
24
|
> **La guía del DS tiene una sola variante** (la tecla con texto) y la muestra dentro del
|
|
25
25
|
> buscador del command menu. Lo marcado «según la guía del DS» sale de ahí; el resto es
|
|
26
|
-
> **
|
|
26
|
+
> **canon (aprobado por el dueño, 05-10-2026)**.
|
|
27
27
|
>
|
|
28
28
|
> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
|
|
29
29
|
> `sui-command-menu-search`, `sui-command-menu-item`, `sui-command-menu-footer`, `sui-filter`,
|
|
@@ -40,7 +40,7 @@ cerrar, las flechas y el enter al pie de un menú.
|
|
|
40
40
|
| valor | cuándo | fuente |
|
|
41
41
|
|---|---|---|
|
|
42
42
|
| `default` | Tecla con texto: ⌘K, Esc. | según la guía del DS |
|
|
43
|
-
| `subtle` | Tecla con un ícono de 16 px (flechas, enter) al pie de un menú. Extensión de SUI (sale del Figma del command menu). |
|
|
43
|
+
| `subtle` | Tecla con un ícono de 16 px (flechas, enter) al pie de un menú. Extensión de SUI (sale del Figma del command menu). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
|
|
44
44
|
|
|
45
45
|
Usos de hoy que rompen la regla: **0**.
|
|
46
46
|
|
|
@@ -49,7 +49,7 @@ Usos de hoy que rompen la regla: **0**.
|
|
|
49
49
|
No es táctil: es una tecla dibujada. En mobile no hay teclado físico, así que no se muestra; en
|
|
50
50
|
web tiene un solo tamaño. Donde la pantalla existe en los dos (panel del local, super admin) se
|
|
51
51
|
oculta con el servicio de breakpoints de la app (`bp`, en `services/breakpoints.service.ts`). Todo
|
|
52
|
-
es **
|
|
52
|
+
es **canon (aprobado por el dueño, 05-10-2026, bloque B7)**.
|
|
53
53
|
|
|
54
54
|
| uso | mobile | web |
|
|
55
55
|
|---|---|---|
|