# Modo de color según la hora del día

Añade la hora del día al modo de color: quien lee elige un momento que declaras o arrastra un deslizador por las horas, y Automático sigue al sistema.

### Problemas conocidos
Qué puedes esperar:

- El [script de la cabecera](https://nandovejer.github.io/luz/es/docs/catalog/theme-time/#boot) ignora `latitude` y `longitude`: con un lugar, el elemento corrige el momento después del primer pintado, así que puede cambiar una vez cerca del amanecer o del atardecer.
- Los momentos se escriben dos veces: en el marcado y en `data-moments` del [script de la cabecera](https://nandovejer.github.io/luz/es/docs/catalog/theme-time/#boot). Nada comprueba que coincidan, así que cambia ambos a la vez.
- Sin `data-luz-label-scrub` el deslizador no tiene nombre y sin `data-luz-label-saved` la nota queda en silencio: no hay texto de reserva en inglés.
- Solo el primer `<luz-theme-time>` con momentos gobierna la página.
- No se ha probado con un lector de pantalla.

### Copiar el marcado
Envuelve el [`<luz-theme-mode>`](https://nandovejer.github.io/luz/es/docs/components/theme-mode/) de core en `<luz-theme-time>` y añade detrás los momentos del día, un botón de opción cada uno, en el orden del día. Su `value` es el nombre del momento; su etiqueta es lo que lee quien visita la página.

Markup
```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js"></script>

<luz-theme-time>
  <luz-theme-mode>
    …the fieldset and the four radios of core's page…
  </luz-theme-mode>
  <fieldset class="luz-theme-time__moments">
    <legend class="luz-theme-time__legend">Time of day</legend>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="dawn" data-from="05:00" data-theme="dark">Dawn</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="morning" data-from="07:30" data-theme="light">Morning</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="afternoon" data-from="12:00" data-theme="light" data-default>Afternoon</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="sunset" data-from="17:30" data-theme="light">Sunset</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="dusk" data-from="20:30" data-theme="dark">Dusk</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="night" data-from="22:30" data-theme="dark" data-default>Night</label>
  </fieldset>
</luz-theme-time>
```

`catalog.min.js` carga `theme-time.min.js` cuando el navegador está inactivo y la página tiene el elemento. Para cargarlo por su cuenta, importa `@luz-ds/catalog/theme-time` y enlaza `components/theme-time.css` después del de core.

### Variantes y opciones
Una barra con un lugar y los textos que necesita:

Bar markup
```html
<luz-theme-time variant="bar" show="time place saved" place="Madrid" latitude="40.42" longitude="-3.7"
                 data-luz-label-scrub="Hour of the day" data-luz-label-saved="Saved">
  <luz-theme-mode inline>
    …the fieldset and the four radios of core's page…
  </luz-theme-mode>
</luz-theme-time>
```

- `variant="bar"`: Añade el deslizador de las 24 horas: por defecto, solo el deslizador.
- `show`: Palabras que añaden partes a la barra: `time` (la hora en letra grande), `place` (el lugar y el momento), `saved` (la nota «Guardado»; sin ella la nota se escribe igualmente, para un lector de pantalla) y `moments` (los momentos declarados como opciones bajo el deslizador; elegir uno fija su hora).
- `place`: El nombre del lugar para `show="place"`; es una etiqueta, no fija el sol.
- `latitude`, `longitude`: Grados al norte y al este del lugar cuyo amanecer y atardecer fijan los cambios del día.
- `no-remember`: Una hora fijada no se guarda en `luz-light`.
- En un momento: `value`, `data-from`, `data-theme`, `data-default`: Su nombre (se escribe en `data-moment`); dónde empieza, HH:MM según el reloj de quien visita; la base sobre la que se pinta, `light` o `dark`; y el que muestra un modo elegido (claro, el momento claro por defecto; oscuro y alto contraste, el oscuro por defecto).
- `data-luz-label-scrub`, `data-luz-label-saved`: En el elemento o un ancestro: el nombre del deslizador y la nota «Guardado».

#### Propiedades, métodos y evento

- `el.hour`, `el.moments`, `el.moment`, `el.dayMoment`, `el.pinned`, `el.place`: Solo lectura: la hora que muestra el deslizador (0 a 24: la fijada o previsualizada, si no la del reloj); los momentos declarados, `{ name, from, theme, input }`; el nombre del momento que muestra la página; el nombre del momento a esa hora, se muestre o no; la hora fijada (`null` si no hay); el atributo `place`.
- `preview(hour)`, `pin(hour)`, `unpin()`: La página muestra el momento de esa hora, y no se guarda nada (`preview(null)` vuelve); la página conserva el momento de esa hora, guardado en `luz-light` salvo con `no-remember`; suelta la hora fijada y vuelve al sistema.
- `luz-theme-time:change`: Sube por el árbol tras la mejora y cuando cambia el momento o la hora fijada. `detail`: `moment` y `pinned` (cada uno `null` si no hay).

Un método devuelve false cuando no hace nada: no hay momentos, o la hora está fuera de 0 a 24.

### Cómo funciona
`theme-time.js` añade a [`<luz-theme-mode>`](https://nandovejer.github.io/luz/es/docs/components/theme-mode/) los momentos del día, como una elección de quien lee. Core hace el resto, y el botón solo si el catálogo no carga.

- **Automático es el del sistema,** como en core: oscuro, alto contraste o claro. El reloj no mueve nada. `data-moment` toma el momento por defecto de ese modo (`data-default`) y no se marca ningún botón de opción de momento. El botón de opción de modo marcado es el que está en uso, Claro u Oscuro, y el botón lleva su nombre; no se guarda nada, y la elección sigue siendo Automático. Automático solo se marca mientras hay una hora o un momento elegido. Automático no sigue la hora: la página que quiere un momento lo fija, con el deslizador, una opción de momento o `pin(hour)`.
- **Un momento elegido** es el último que ha empezado a esa hora (la noche pasa por la medianoche): su nombre va a `data-moment`, se marca su botón de opción y la página toma su base. Nunca se pide la ubicación.
- **Un modo elegido** muestra su momento por defecto. **El alto contraste siempre gana:** `data-theme` es `high-contrast`, así que una regla para `"light"` o `"dark"` no coincide.
- **Con un lugar,** `latitude` y `longitude` dan el amanecer y el atardecer reales de hoy, calculados en la página sin red, en lugar de los dos cambios del día; si el sol no sale o no se pone allí, valen las horas declaradas.
- **Una hora fijada** es el momento de esa hora conservado en Automático, guardado en `luz-light` con precisión de cinco minutos; elegir un modo, o Automático, en `<luz-theme-mode>` la suelta y vuelve al sistema.
- **El deslizador** (`variant="bar"`): al arrastrar se previsualiza la hora; al soltar se fija, se guarda y se escribe la nota «Guardado». Su pista se pinta con `--luz-theme-time-sky-<value>`, una por momento: [Pintar la pista](https://nandovejer.github.io/luz/es/docs/catalog/theme-time/#sky).
- **Dos archivos:** `theme-time.min.js` y `theme-time-bar.min.js`, que solo carga `variant="bar"`. Para una barra añadida después del análisis, importa `@luz-ds/catalog/theme-time-bar` y llama a `initThemeTimeBar(root)`.

### Sin JavaScript
No hay barra y los momentos no se muestran. Los botones de opción de core siguen cambiando el modo; Automático sigue al sistema y no se escribe `data-moment`.

### Teclado y ARIA
- **Deslizador:** un rango nativo en pasos de 5 minutos: se llega con Tab, las flechas mueven un paso, Inicio va a las 00:00 y Fin a las 23:55. Cada pulsación previsualiza la hora.
- **Escape** en el deslizador suelta una hora fijada y entonces no cierra un diálogo que rodee la barra.
- **Nombre y valor:** el nombre es `data-luz-label-scrub`; `aria-valuetext` es el momento y la hora, «Tarde, 13:00». Cuando hay una hora fijada, una región `role="status"` dice tu `data-luz-label-saved`, se vea o no.
- **Los momentos como opciones** (`show="moments"`) son botones de opción en un fieldset: las flechas eligen uno. El botón de modo es el de core: [su teclado y ARIA](https://nandovejer.github.io/luz/es/docs/components/theme-mode/#keyboard). Con el sistema en uso, avanza desde el modo mostrado, de modo que la primera pulsación nunca lo repite.

### Cuándo usarlo
Úsalo cuando el sitio tiene un aspecto para cada momento del día, o cuando la gente debe poder probar la luz a otra hora.

- Solo los momentos, en un pie de página o una barra de navegación, para un sitio que cambia su aspecto a lo largo del día.
- La barra, donde la luz forma parte de la página, como una página de inicio.

### Cuándo no usarlo
No lo uses cuando el sitio tiene un solo aspecto en un modo: basta con el [modo de color de core](https://nandovejer.github.io/luz/es/docs/components/theme-mode/).

- No prometas el amanecer real sin un lugar: las horas declaradas son fijas.
- No uses la barra como único control: conserva el botón de core.
- No pidas la ubicación de quien visita la página: escribe tú el lugar.