@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.14

package/DS1/0-face/tooltips.ts

@@ -1,11 +1,59 @@
 /**
  * One tooltip for a whole page: any element with `data-tooltip="…"` shows its text in Design system 1's tooltip,
- * Ezo's label: 16px high, black with white text (white on black in dark mode), 4px corners, 14px regular, 2.5px at
+ * a small label: 16px high, black with white text (white on black in dark mode), 4px corners, 14px regular, 2.5px at
  * the sides, two pixels above the element, shown at once. `data-tooltip-colour` gives it a colour of its own. The same look as `<ds-tooltip>`, without wrapping each element in a component, so a table of
  * hundreds of cells can carry one each. Long text wraps at 320px on 20px lines.
+ * Elements inside a component's open shadow root are found as well (`ds-sidebar`
+ * marks its cut-short labels this way); the description link is set only on
+ * elements in the document itself, since an id cannot reach across a shadow root.
+ *
+ * It shows on hover with a mouse or pen, and on focus only when the focus is
+ * the keyboard's (`:focus-visible`), so a menu that moves focus into its first
+ * row does not raise one. A showing tooltip follows its text as
+ * `data-tooltip` changes. On touch, a long press shows it, and a tap does on
+ * an element marked `data-tooltip-press`; it goes at the next touch or after
+ * a moment. `showTooltip(element)` and `hideTooltip()` show and hide it from
+ * code.
  */
+
+/** How long a tooltip raised by touch stays, in milliseconds. */
+export const TOUCH_TOOLTIP_DURATION = 2000;
+/** How long a finger rests before a long press shows the tooltip, in milliseconds. */
+export const LONG_PRESS_DELAY = 500;
+/** How far a finger may move, in pixels, before a press is a scroll instead. */
+const PRESS_SLOP = 10;
+
+export type ShowTooltipOptions = {
+  /** Hide it after this many milliseconds; it stays until hidden by default. */
+  duration?: number;
+};
+
+type Controller = {
+  show(target: HTMLElement, options?: ShowTooltipOptions): void;
+  hide(): void;
+};
+
+// Shared through the window, so two copies of this module on a page share one tooltip.
+const KEY = Symbol.for("ds-one:tooltips");
+type TooltipWindow = Window & { [KEY]?: Controller };
+
+function controller(): Controller | undefined {
+  return typeof window === "undefined" ? undefined : (window as TooltipWindow)[KEY];
+}
+
+/** Show an element's `data-tooltip` now, as a press would: it stays until `hideTooltip()`, or for `duration`. */
+export function showTooltip(target: HTMLElement, options?: ShowTooltipOptions): void {
+  initTooltips();
+  controller()?.show(target, options);
+}
+
+/** Hide the tooltip, however it was shown. */
+export function hideTooltip(): void {
+  controller()?.hide();
+}
+
 export function initTooltips(): void {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined" || !document.body) return;
   const root = document.documentElement;
   if (root.hasAttribute("data-ds-tooltips-ready")) return;
   root.setAttribute("data-ds-tooltips-ready", "");
@@ -32,6 +80,7 @@ export function initTooltips(): void {
   document.body.appendChild(bubble);
 
   let current: HTMLElement | null = null;
+  let timer: ReturnType<typeof setTimeout> | undefined;
   const place = (target: HTMLElement) => {
     const box = target.getBoundingClientRect();
     const width = bubble.offsetWidth;
@@ -41,39 +90,132 @@ export function initTooltips(): void {
     const top = box.top - height - 2 >= 4 ? box.top - height - 2 : box.bottom + 2;
     bubble.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
   };
-  const show = (target: HTMLElement) => {
+  /** Draws the target's text and colour; false when it has no text. */
+  const draw = (target: HTMLElement): boolean => {
     const text = target.dataset.tooltip;
-    if (!text) return;
-    current = target;
+    if (!text) return false;
     bubble.textContent = text;
-    // A colour of its own, as Ezo's labels take the accent: data-tooltip-colour="#f5aad1", lettered in the ink.
+    // A colour of its own, such as the accent: data-tooltip-colour="#f5aad1", lettered in the ink.
     const colour = target.dataset.tooltipColour;
-    bubble.style.setProperty("--ds-tooltip-background", colour || "");
-    bubble.style.setProperty("--ds-tooltip-color", colour ? "#1e1e1e" : "");
-    if (!colour) { bubble.style.removeProperty("--ds-tooltip-background"); bubble.style.removeProperty("--ds-tooltip-color"); }
-    // One line, as Ezo's; a long text wraps at 320px instead of running off the page.
+    if (colour) {
+      bubble.style.setProperty("--ds-tooltip-background", colour);
+      bubble.style.setProperty("--ds-tooltip-color", "#1e1e1e");
+    } else {
+      bubble.style.removeProperty("--ds-tooltip-background");
+      bubble.style.removeProperty("--ds-tooltip-color");
+    }
+    // One line; a long text wraps at 320px instead of running off the page.
     bubble.classList.remove("is-wide");
     if (bubble.scrollWidth > 320) bubble.classList.add("is-wide");
-    target.setAttribute("aria-describedby", bubble.id);
     place(target);
+    return true;
+  };
+  // A showing tooltip follows its element's text and colour, and goes when the text does.
+  const watcher = typeof MutationObserver === "function"
+    ? new MutationObserver(() => { if (current && (!current.isConnected || !draw(current))) hide(); })
+    : null;
+  const show = (target: HTMLElement, options: ShowTooltipOptions = {}) => {
+    clearTimeout(timer);
+    timer = undefined;
+    if (current && current !== target) hide();
+    if (!draw(target)) return;
+    current = target;
+    if (target.getRootNode() === document) target.setAttribute("aria-describedby", bubble.id);
+    watcher?.disconnect();
+    watcher?.observe(target, { attributes: true, attributeFilter: ["data-tooltip", "data-tooltip-colour"] });
     bubble.classList.add("is-visible");
+    if (options.duration !== undefined && options.duration >= 0) timer = setTimeout(hide, options.duration);
   };
-  const hide = () => {
+  function hide() {
+    clearTimeout(timer);
+    timer = undefined;
+    watcher?.disconnect();
     current?.removeAttribute("aria-describedby");
     current = null;
     bubble.classList.remove("is-visible");
+  }
+  (window as TooltipWindow)[KEY] = { show, hide };
+
+  // The composed path crosses open shadow roots, where `closest` stops at the host.
+  const find = (event: Event): HTMLElement | null => {
+    for (const node of event.composedPath()) {
+      if (node === document || node === window) break;
+      if ((node as Element).hasAttribute?.("data-tooltip")) return node as HTMLElement;
+    }
+    return (event.target as Element | null)?.closest?.<HTMLElement>("[data-tooltip]") ?? null;
   };
-  const find = (event: Event) => (event.target as Element | null)?.closest?.<HTMLElement>("[data-tooltip]") ?? null;
+  const keyboardFocus = (event: Event): boolean => {
+    const focused = event.composedPath()[0] as Element | undefined;
+    try {
+      return Boolean(focused?.matches?.(":focus-visible"));
+    } catch {
+      // A browser without :focus-visible cannot tell, and a pointer's focus must not raise one.
+      return false;
+    }
+  };
+  const touch = (event: Event) => (event as PointerEvent).pointerType === "touch";
 
   document.addEventListener("pointerover", (event) => {
+    // A finger has no hover: on touch a press shows the tooltip.
+    if (touch(event)) return;
     const target = find(event);
     if (target !== current) target ? show(target) : hide();
   }, { passive: true });
-  document.addEventListener("pointerleave", hide, { passive: true });
-  document.addEventListener("focusin", (event) => { const target = find(event); if (target) show(target); });
+  document.addEventListener("pointerleave", (event) => { if (!touch(event)) hide(); }, { passive: true });
+  document.addEventListener("focusin", (event) => {
+    const target = find(event);
+    if (target && keyboardFocus(event)) show(target);
+  });
   document.addEventListener("focusout", hide);
   document.addEventListener("keydown", (event) => { if (event.key === "Escape") hide(); });
   window.addEventListener("scroll", hide, { passive: true, capture: true });
+
+  // Touch: a long press shows the label, a tap does where the element asks for it, and the next touch dismisses it.
+  let press: { target: HTMLElement; id: number; x: number; y: number; timer: ReturnType<typeof setTimeout> } | null = null;
+  let swallowClick = false;
+  const release = () => {
+    if (press) clearTimeout(press.timer);
+    press = null;
+  };
+  document.addEventListener("pointerdown", (event) => {
+    swallowClick = false;
+    if (!touch(event)) return;
+    release();
+    hide();
+    const target = find(event);
+    if (!target?.dataset.tooltip) return;
+    const pointer = event as PointerEvent;
+    press = {
+      target,
+      id: pointer.pointerId,
+      x: pointer.clientX,
+      y: pointer.clientY,
+      timer: setTimeout(() => {
+        if (!press) return;
+        // The press was for the label: the click its release makes is not the element's.
+        swallowClick = true;
+        show(press.target, { duration: TOUCH_TOOLTIP_DURATION });
+        press = null;
+      }, LONG_PRESS_DELAY),
+    };
+  }, { passive: true, capture: true });
+  document.addEventListener("pointermove", (event) => {
+    const pointer = event as PointerEvent;
+    if (press && pointer.pointerId === press.id && Math.hypot(pointer.clientX - press.x, pointer.clientY - press.y) > PRESS_SLOP) release();
+  }, { passive: true, capture: true });
+  document.addEventListener("pointerup", (event) => {
+    if (!press || (event as PointerEvent).pointerId !== press.id) return;
+    const { target } = press;
+    release();
+    if (target.hasAttribute("data-tooltip-press")) show(target, { duration: TOUCH_TOOLTIP_DURATION });
+  }, { passive: true, capture: true });
+  document.addEventListener("pointercancel", release, { passive: true, capture: true });
+  document.addEventListener("click", (event) => {
+    if (!swallowClick) return;
+    swallowClick = false;
+    event.preventDefault();
+    event.stopPropagation();
+  }, { capture: true });
 }
 
 if (typeof document !== "undefined") {

package/DS1/0-face/translations/da.json

@@ -17,6 +17,10 @@
     "Email": "E-mail",
     "Password": "Adgangskode",
     "Nothing here yet": "Intet her endnu",
+    "Loading": "Indlæser",
+    "{value} of {max}": "{value} af {max}",
+    "{value} of {max}, over by {over}": "{value} af {max}, {over} for meget",
+    "Failed": "Mislykkedes",
     "Today": "I dag",
     "Yesterday": "I går",
     "Tomorrow": "I morgen",
@@ -25,6 +29,7 @@
     "Theme": "Tema",
     "Light": "Lys",
     "Dark": "Mørk",
+    "System": "System",
     "Note": "Note",
     "Page": "Side",
     "Red": "Rød",
@@ -58,6 +63,60 @@
     "Swedish": "Svensk",
     "Chinese": "Kinesisk",
     "Show password": "Vis adgangskode",
-    "Hide password": "Skjul adgangskode"
+    "Hide password": "Skjul adgangskode",
+    "OK": "OK",
+    "Copied": "Kopieret",
+    "Could not copy": "Kunne ikke kopiere",
+    "Notifications": "Notifikationer",
+    "Try again": "Prøv igen",
+    "Undo": "Fortryd",
+    "Redo": "Gentag",
+    "Copy": "Kopiér",
+    "Copy link": "Kopiér link",
+    "Remove": "Fjern",
+    "Rename": "Omdøb",
+    "Duplicate": "Dupliker",
+    "Download": "Hent",
+    "Refresh": "Opdater",
+    "Open": "Åbn",
+    "Send": "Send",
+    "Clear": "Ryd",
+    "Saved": "Gemt",
+    "Saving…": "Gemmer…",
+    "Untitled": "Uden titel",
+    "Account": "Konto",
+    "Carousel": "Karrusel",
+    "Slide": "Dias",
+    "Slides": "Dias",
+    "Slide {index}": "Dias {index}",
+    "{index} of {count}": "{index} af {count}",
+    "Previous slide": "Forrige dias",
+    "Next slide": "Næste dias",
+    "Pause": "Pause",
+    "Play": "Afspil",
+    "Menu": "Menu",
+    "Contents": "Indhold",
+    "key.ctrl": "Ctrl",
+    "key.shift": "Skift",
+    "key.alt": "Alt",
+    "key.enter": "Enter",
+    "key.escape": "Esc",
+    "key.tab": "Tab",
+    "key.space": "Mellemrum",
+    "key.backspace": "Backspace",
+    "key.delete": "Delete",
+    "key.home": "Home",
+    "key.end": "End",
+    "key.pageup": "Page Up",
+    "key.pagedown": "Page Down",
+    "Previous month": "Forrige måned",
+    "Next month": "Næste måned",
+    "Choose a date": "Vælg en dato",
+    "Date": "Dato",
+    "W{week}": "U{week}",
+    "Total": "I alt",
+    "End date": "Slutdato",
+    "Include time": "Medtag klokkeslæt",
+    "Time": "Klokkeslæt"
   }
 }

package/DS1/0-face/translations/de.json

@@ -17,6 +17,10 @@
     "Email": "E-Mail",
     "Password": "Passwort",
     "Nothing here yet": "Hier ist noch nichts",
+    "Loading": "Wird geladen",
+    "{value} of {max}": "{value} von {max}",
+    "{value} of {max}, over by {over}": "{value} von {max}, {over} darüber",
+    "Failed": "Fehlgeschlagen",
     "Today": "Heute",
     "Yesterday": "Gestern",
     "Tomorrow": "Morgen",
@@ -25,6 +29,7 @@
     "Theme": "Thema",
     "Light": "Hell",
     "Dark": "Dunkel",
+    "System": "System",
     "Note": "Notiz",
     "Page": "Seite",
     "Red": "Rot",
@@ -58,6 +63,60 @@
     "Swedish": "Schwedisch",
     "Chinese": "Chinesisch",
     "Show password": "Passwort anzeigen",
-    "Hide password": "Passwort verbergen"
+    "Hide password": "Passwort verbergen",
+    "OK": "OK",
+    "Copied": "Kopiert",
+    "Could not copy": "Kopieren fehlgeschlagen",
+    "Notifications": "Mitteilungen",
+    "Try again": "Erneut versuchen",
+    "Undo": "Widerrufen",
+    "Redo": "Wiederholen",
+    "Copy": "Kopieren",
+    "Copy link": "Link kopieren",
+    "Remove": "Entfernen",
+    "Rename": "Umbenennen",
+    "Duplicate": "Duplizieren",
+    "Download": "Herunterladen",
+    "Refresh": "Aktualisieren",
+    "Open": "Öffnen",
+    "Send": "Senden",
+    "Clear": "Leeren",
+    "Saved": "Gespeichert",
+    "Saving…": "Wird gespeichert …",
+    "Untitled": "Ohne Titel",
+    "Account": "Konto",
+    "Carousel": "Karussell",
+    "Slide": "Folie",
+    "Slides": "Folien",
+    "Slide {index}": "Folie {index}",
+    "{index} of {count}": "{index} von {count}",
+    "Previous slide": "Vorherige Folie",
+    "Next slide": "Nächste Folie",
+    "Pause": "Pause",
+    "Play": "Abspielen",
+    "Menu": "Menü",
+    "Contents": "Inhalt",
+    "key.ctrl": "Strg",
+    "key.shift": "Umschalt",
+    "key.alt": "Alt",
+    "key.enter": "Eingabe",
+    "key.escape": "Esc",
+    "key.tab": "Tab",
+    "key.space": "Leertaste",
+    "key.backspace": "Rücktaste",
+    "key.delete": "Entf",
+    "key.home": "Pos1",
+    "key.end": "Ende",
+    "key.pageup": "Bild auf",
+    "key.pagedown": "Bild ab",
+    "Previous month": "Vorheriger Monat",
+    "Next month": "Nächster Monat",
+    "Choose a date": "Datum wählen",
+    "Date": "Datum",
+    "W{week}": "KW{week}",
+    "Total": "Gesamt",
+    "End date": "Enddatum",
+    "Include time": "Uhrzeit hinzufügen",
+    "Time": "Uhrzeit"
   }
 }

package/DS1/0-face/translations/en.json

@@ -17,6 +17,10 @@
     "Email": "Email",
     "Password": "Password",
     "Nothing here yet": "Nothing here yet",
+    "Loading": "Loading",
+    "{value} of {max}": "{value} of {max}",
+    "{value} of {max}, over by {over}": "{value} of {max}, over by {over}",
+    "Failed": "Failed",
     "Today": "Today",
     "Yesterday": "Yesterday",
     "Tomorrow": "Tomorrow",
@@ -25,6 +29,7 @@
     "Theme": "Theme",
     "Light": "Light",
     "Dark": "Dark",
+    "System": "System",
     "Note": "Note",
     "Page": "Page",
     "Red": "Red",
@@ -58,6 +63,60 @@
     "Swedish": "Swedish",
     "Chinese": "Chinese",
     "Show password": "Show password",
-    "Hide password": "Hide password"
+    "Hide password": "Hide password",
+    "OK": "OK",
+    "Copied": "Copied",
+    "Could not copy": "Could not copy",
+    "Notifications": "Notifications",
+    "Try again": "Try again",
+    "Undo": "Undo",
+    "Redo": "Redo",
+    "Copy": "Copy",
+    "Copy link": "Copy link",
+    "Remove": "Remove",
+    "Rename": "Rename",
+    "Duplicate": "Duplicate",
+    "Download": "Download",
+    "Refresh": "Refresh",
+    "Open": "Open",
+    "Send": "Send",
+    "Clear": "Clear",
+    "Saved": "Saved",
+    "Saving…": "Saving…",
+    "Untitled": "Untitled",
+    "Account": "Account",
+    "Carousel": "Carousel",
+    "Slide": "Slide",
+    "Slides": "Slides",
+    "Slide {index}": "Slide {index}",
+    "{index} of {count}": "{index} of {count}",
+    "Previous slide": "Previous slide",
+    "Next slide": "Next slide",
+    "Pause": "Pause",
+    "Play": "Play",
+    "Menu": "Menu",
+    "Contents": "Contents",
+    "key.ctrl": "Ctrl",
+    "key.shift": "Shift",
+    "key.alt": "Alt",
+    "key.enter": "Enter",
+    "key.escape": "Esc",
+    "key.tab": "Tab",
+    "key.space": "Space",
+    "key.backspace": "Backspace",
+    "key.delete": "Del",
+    "key.home": "Home",
+    "key.end": "End",
+    "key.pageup": "PgUp",
+    "key.pagedown": "PgDn",
+    "Previous month": "Previous month",
+    "Next month": "Next month",
+    "Choose a date": "Choose a date",
+    "Date": "Date",
+    "W{week}": "W{week}",
+    "Total": "Total",
+    "End date": "End date",
+    "Include time": "Include time",
+    "Time": "Time"
   }
 }

package/DS1/0-face/translations/es.json

@@ -17,6 +17,10 @@
     "Email": "Correo electrónico",
     "Password": "Contraseña",
     "Nothing here yet": "Aún no hay nada aquí",
+    "Loading": "Cargando",
+    "{value} of {max}": "{value} de {max}",
+    "{value} of {max}, over by {over}": "{value} de {max}, {over} de más",
+    "Failed": "Fallido",
     "Today": "Hoy",
     "Yesterday": "Ayer",
     "Tomorrow": "Mañana",
@@ -25,6 +29,7 @@
     "Theme": "Tema",
     "Light": "Claro",
     "Dark": "Oscuro",
+    "System": "Sistema",
     "Note": "Nota",
     "Page": "Página",
     "Red": "Rojo",
@@ -58,6 +63,60 @@
     "Swedish": "Sueco",
     "Chinese": "Chino",
     "Show password": "Mostrar contraseña",
-    "Hide password": "Ocultar contraseña"
+    "Hide password": "Ocultar contraseña",
+    "OK": "Aceptar",
+    "Copied": "Copiado",
+    "Could not copy": "No se pudo copiar",
+    "Notifications": "Notificaciones",
+    "Try again": "Reintentar",
+    "Undo": "Deshacer",
+    "Redo": "Rehacer",
+    "Copy": "Copiar",
+    "Copy link": "Copiar enlace",
+    "Remove": "Quitar",
+    "Rename": "Renombrar",
+    "Duplicate": "Duplicar",
+    "Download": "Descargar",
+    "Refresh": "Actualizar",
+    "Open": "Abrir",
+    "Send": "Enviar",
+    "Clear": "Borrar",
+    "Saved": "Guardado",
+    "Saving…": "Guardando…",
+    "Untitled": "Sin título",
+    "Account": "Cuenta",
+    "Carousel": "Carrusel",
+    "Slide": "Diapositiva",
+    "Slides": "Diapositivas",
+    "Slide {index}": "Diapositiva {index}",
+    "{index} of {count}": "{index} de {count}",
+    "Previous slide": "Diapositiva anterior",
+    "Next slide": "Diapositiva siguiente",
+    "Pause": "Pausar",
+    "Play": "Reproducir",
+    "Menu": "Menú",
+    "Contents": "Contenido",
+    "key.ctrl": "Ctrl",
+    "key.shift": "Mayús",
+    "key.alt": "Alt",
+    "key.enter": "Entrar",
+    "key.escape": "Esc",
+    "key.tab": "Tab",
+    "key.space": "Espacio",
+    "key.backspace": "Retroceso",
+    "key.delete": "Supr",
+    "key.home": "Inicio",
+    "key.end": "Fin",
+    "key.pageup": "Re Pág",
+    "key.pagedown": "Av Pág",
+    "Previous month": "Mes anterior",
+    "Next month": "Mes siguiente",
+    "Choose a date": "Elegir una fecha",
+    "Date": "Fecha",
+    "W{week}": "S{week}",
+    "Total": "Total",
+    "End date": "Fecha de fin",
+    "Include time": "Incluir hora",
+    "Time": "Hora"
   }
 }

package/DS1/0-face/translations/fi.json

@@ -17,6 +17,10 @@
     "Email": "Sähköposti",
     "Password": "Salasana",
     "Nothing here yet": "Täällä ei ole vielä mitään",
+    "Loading": "Ladataan",
+    "{value} of {max}": "{value}/{max}",
+    "{value} of {max}, over by {over}": "{value}/{max}, {over} yli",
+    "Failed": "Epäonnistui",
     "Today": "Tänään",
     "Yesterday": "Eilen",
     "Tomorrow": "Huomenna",
@@ -25,6 +29,7 @@
     "Theme": "Teema",
     "Light": "Vaalea",
     "Dark": "Tumma",
+    "System": "Järjestelmä",
     "Note": "Muistiinpano",
     "Page": "Sivu",
     "Red": "Punainen",
@@ -58,6 +63,60 @@
     "Swedish": "Ruotsi",
     "Chinese": "Kiina",
     "Show password": "Näytä salasana",
-    "Hide password": "Piilota salasana"
+    "Hide password": "Piilota salasana",
+    "OK": "OK",
+    "Copied": "Kopioitu",
+    "Could not copy": "Kopiointi epäonnistui",
+    "Notifications": "Ilmoitukset",
+    "Try again": "Yritä uudelleen",
+    "Undo": "Kumoa",
+    "Redo": "Tee uudelleen",
+    "Copy": "Kopioi",
+    "Copy link": "Kopioi linkki",
+    "Remove": "Poista",
+    "Rename": "Nimeä uudelleen",
+    "Duplicate": "Monista",
+    "Download": "Lataa",
+    "Refresh": "Päivitä",
+    "Open": "Avaa",
+    "Send": "Lähetä",
+    "Clear": "Tyhjennä",
+    "Saved": "Tallennettu",
+    "Saving…": "Tallennetaan…",
+    "Untitled": "Nimetön",
+    "Account": "Tili",
+    "Carousel": "Karuselli",
+    "Slide": "Dia",
+    "Slides": "Diat",
+    "Slide {index}": "Dia {index}",
+    "{index} of {count}": "{index}/{count}",
+    "Previous slide": "Edellinen dia",
+    "Next slide": "Seuraava dia",
+    "Pause": "Tauko",
+    "Play": "Toista",
+    "Menu": "Valikko",
+    "Contents": "Sisällys",
+    "key.ctrl": "Ctrl",
+    "key.shift": "Vaihto",
+    "key.alt": "Alt",
+    "key.enter": "Enter",
+    "key.escape": "Esc",
+    "key.tab": "Sarkain",
+    "key.space": "Välilyönti",
+    "key.backspace": "Askelpalautin",
+    "key.delete": "Delete",
+    "key.home": "Home",
+    "key.end": "End",
+    "key.pageup": "Page Up",
+    "key.pagedown": "Page Down",
+    "Previous month": "Edellinen kuukausi",
+    "Next month": "Seuraava kuukausi",
+    "Choose a date": "Valitse päivämäärä",
+    "Date": "Päivämäärä",
+    "W{week}": "Vk{week}",
+    "Total": "Yhteensä",
+    "End date": "Päättymispäivä",
+    "Include time": "Sisällytä kellonaika",
+    "Time": "Kellonaika"
   }
 }