@jirawatpyk/aura-react 5.34.0 → 5.36.0

package/dist/esm/ActionBar.js

@@ -35,6 +35,7 @@ const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
       },
       role: "region",
       "aria-label": props.label || t.actions,
+      "data-aura-hide-bottomnav": props.hidesBottomNav && !idle ? "" : void 0,
       className: cx(
         "aura-actionbar",
         "aura-actionbar--" + (props.position || "viewport"),

package/dist/esm/AppShell.js

@@ -5,6 +5,7 @@ import { IconButton } from "./IconButton.js";
 import { cx, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { useBreakpoint } from "./responsive.js";
+import { useHideOnScroll } from "./scrollHide.js";
 import { IconMenu } from "./icons.js";
 const AppShell = React.forwardRef(function AppShell2(props, ref) {
   const t = useStrings();
@@ -29,13 +30,24 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
   const mergedRef = useMergedRef(ref, rootRef);
   const hasBar = !!(props.header || props.nav);
   const barH = React.useState(null);
+  const away = useHideOnScroll(!!props.headerHideOnScroll && hasBar, barRef, "(max-width: 1023.98px)", barH[0] || 56);
+  const awayRef = React.useRef(away);
+  awayRef.current = away;
+  useIsoLayoutEffect(
+    function() {
+      const root = rootRef.current, bar = barRef.current;
+      if (!root || !bar) return;
+      root.style.setProperty("--aura-shell-bar-height", away ? "0px" : bar.getBoundingClientRect().height + "px");
+    },
+    [away]
+  );
   useIsoLayoutEffect(
     function() {
       const root = rootRef.current, bar = barRef.current;
       if (!root || !bar) return;
       function sync() {
         const h = bar.getBoundingClientRect().height;
-        root.style.setProperty("--aura-shell-bar-height", h + "px");
+        root.style.setProperty("--aura-shell-bar-height", awayRef.current ? "0px" : h + "px");
         if (h > 0) barH[1](Math.round(h));
       }
       sync();
@@ -103,7 +115,9 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
         ref: barRef,
         className: cx(
           "aura-shell__bar",
-          (!props.header || props.headerHideFrom === "lg") && "aura-shell__bar--menu-only"
+          (!props.header || props.headerHideFrom === "lg") && "aura-shell__bar--menu-only",
+          props.headerHideOnScroll && "aura-shell__bar--hides",
+          away && "is-away"
         )
       },
       props.nav ? /* @__PURE__ */ React.createElement(

package/dist/esm/BottomNav.js

@@ -3,6 +3,8 @@ import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, devWarnOnce, plainClick, useMaybeControlled } from "./internal.js";
 import { useLinkComponent, useStrings } from "./locale.js";
+import { useHideOnScroll } from "./scrollHide.js";
+import { breakpoints } from "./breakpoints.js";
 const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
   const t = useStrings();
   const Link = useLinkComponent(props.linkComponent);
@@ -13,11 +15,33 @@ const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
   );
   const active = st[0];
   const hide = props.hideFrom === false ? "always" : "below-" + (props.hideFrom || "lg");
+  const own = React.useRef(null);
+  const hf = props.hideFrom === false ? null : props.hideFrom || "lg";
+  const away = useHideOnScroll(
+    !!props.hideOnScroll,
+    own,
+    hf ? "(max-width: " + (breakpoints[hf] - 0.02) + "px)" : "all",
+    64
+  );
+  const setRef = React.useCallback(
+    function(el) {
+      own.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref]
+  );
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: cx("aura-bottomnav-spacer", "aura-bottomnav--" + hide), "aria-hidden": "true" }), /* @__PURE__ */ React.createElement(
     "nav",
     {
-      ref,
-      className: cx("aura-bottomnav", "aura-bottomnav--" + hide, props.className),
+      ref: setRef,
+      className: cx(
+        "aura-bottomnav",
+        "aura-bottomnav--" + hide,
+        props.hideOnScroll && "aura-bottomnav--hides",
+        away && "is-away",
+        props.className
+      ),
       "aria-label": props.label || t.mainNav
     },
     /* @__PURE__ */ React.createElement("ul", { className: "aura-bottomnav__list" }, props.items.map(function(it) {

package/dist/esm/scrollHide.js

@@ -0,0 +1,96 @@
+'use client';
+import * as React from "react";
+const STEP = 8;
+function useHideOnScroll(enabled, el, media, from) {
+  const st = React.useState(false), hidden = st[0], setHidden = st[1];
+  React.useEffect(
+    function() {
+      if (!enabled || typeof window === "undefined") {
+        setHidden(false);
+        return;
+      }
+      const mq = window.matchMedia ? window.matchMedia(media) : null;
+      let last = window.scrollY, lastH = window.innerHeight, resizedAt = -1e9, run = 0;
+      let restore = null;
+      function update() {
+        if (restore) {
+          const r = restore;
+          if (performance.now() > r.until || window.scrollY >= r.y - 1) restore = null;
+          else {
+            restore = null;
+            last = r.y;
+            window.scrollTo(window.scrollX, r.y);
+            return;
+          }
+        }
+        const y = window.scrollY, dy = y - last;
+        last = y;
+        const node2 = el.current;
+        if (mq && !mq.matches || y <= from || node2 && document.activeElement && node2.contains(document.activeElement)) {
+          run = 0;
+          setHidden(false);
+          return;
+        }
+        if (window.innerHeight !== lastH || performance.now() - resizedAt < 150) {
+          lastH = window.innerHeight;
+          resizedAt = performance.now();
+          run = 0;
+          return;
+        }
+        if (y + window.innerHeight > document.documentElement.scrollHeight + 1) return;
+        run = dy > 0 === run > 0 ? run + dy : dy;
+        if (run > STEP) setHidden(true);
+        else if (run < -STEP) setHidden(false);
+      }
+      let tabbing = false;
+      function disarm() {
+        restore = null;
+      }
+      function onKey(e) {
+        if (e.key !== "Tab" && e.code !== "Tab") {
+          if (e.key !== "Shift") restore = null;
+          return;
+        }
+        tabbing = true;
+        requestAnimationFrame(function() {
+          tabbing = false;
+        });
+      }
+      function reveal() {
+        const n = el.current;
+        if (n && n.classList.contains("is-away")) {
+          n.classList.remove("is-away");
+          if (tabbing) {
+            if (window.scrollY < last) window.scrollTo(window.scrollX, last);
+            else restore = { y: last, until: performance.now() + 400 };
+          }
+        }
+        setHidden(false);
+      }
+      window.addEventListener("scroll", update, { passive: true });
+      window.addEventListener("resize", update);
+      document.addEventListener("keydown", onKey, true);
+      window.addEventListener("wheel", disarm, { passive: true, capture: true });
+      window.addEventListener("touchstart", disarm, { passive: true, capture: true });
+      window.addEventListener("pointerdown", disarm, true);
+      const node = el.current;
+      if (node) node.addEventListener("focusin", reveal);
+      if (mq && mq.addEventListener) mq.addEventListener("change", update);
+      return function() {
+        window.removeEventListener("scroll", update);
+        window.removeEventListener("resize", update);
+        document.removeEventListener("keydown", onKey, true);
+        window.removeEventListener("wheel", disarm, true);
+        window.removeEventListener("touchstart", disarm, true);
+        window.removeEventListener("pointerdown", disarm, true);
+        if (node) node.removeEventListener("focusin", reveal);
+        if (mq && mq.removeEventListener) mq.removeEventListener("change", update);
+      };
+    },
+    [enabled, el, media, from]
+  );
+  return enabled && hidden;
+}
+export {
+  useHideOnScroll
+};

package/dist/esm/strings.js

@@ -131,6 +131,7 @@ const STRINGS = {
     statusProblem: "Problem",
     statusMaintenance: "Maintenance",
     statusOk: "OK",
+    statusUnknown: "No data",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }

package/dist/esm/strings.sv.js

@@ -127,6 +127,7 @@ const sv = {
   statusProblem: "Problem",
   statusMaintenance: "Underh\xE5ll",
   statusOk: "OK",
+  statusUnknown: "Ingen data",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }

package/dist/esm/strings.th.js

@@ -127,6 +127,7 @@ const th = {
   statusProblem: "\u0E21\u0E35\u0E1B\u0E31\u0E0D\u0E2B\u0E32",
   statusMaintenance: "\u0E1B\u0E34\u0E14\u0E1B\u0E23\u0E31\u0E1A\u0E1B\u0E23\u0E38\u0E07",
   statusOk: "\u0E1B\u0E01\u0E15\u0E34",
+  statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }

package/dist/esm/tiles.js

@@ -1,28 +1,31 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx } from "./classes.js";
+import { cx, devWarnOnce } from "./classes.js";
 import { respVars } from "./breakpoints.js";
 import { STRINGS } from "./strings.js";
-import { IconCircleAlert, IconCircleCheck, IconTriangleAlert, IconWrench } from "./icons.js";
+import { IconCircleAlert, IconCircleCheck, IconCircleDotDashed, IconTriangleAlert, IconWrench } from "./icons.js";
 const h = React.createElement;
 const STATUS_ICON = {
   down: IconCircleAlert,
   problem: IconTriangleAlert,
   maintenance: IconWrench,
-  ok: IconCircleCheck
+  ok: IconCircleCheck,
+  unknown: IconCircleDotDashed
 };
 const STATUS_TONE = {
   down: "danger",
   problem: "warning",
   maintenance: "accent",
-  ok: "default"
+  ok: "default",
+  unknown: "default"
 };
 const STATUS_WORD = {
   down: "statusDown",
   problem: "statusProblem",
   maintenance: "statusMaintenance",
-  ok: "statusOk"
+  ok: "statusOk",
+  unknown: "statusUnknown"
 };
 function statusWord(status, t) {
   return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
@@ -37,7 +40,12 @@ function attrs(props) {
 }
 const comma = h("span", { className: "aura-status-tile__sep" }, ",");
 function statusTileElement(props, ref, Link, t, titleRef) {
-  const status = STATUS_ICON[props.status] ? props.status : "ok";
+  const status = STATUS_ICON[props.status] ? props.status : "unknown";
+  if (status !== props.status)
+    devWarnOnce(
+      "status-tile-status-" + String(props.status),
+      'StatusTile status="' + String(props.status) + '" is not down, problem, maintenance, ok or unknown: it shows as unknown ("No data"). Map your value first.'
+    );
   const valueTone = props.valueTone || STATUS_TONE[status];
   const word = props.statusLabel || statusWord(status, t);
   const markers = (props.markers || []).filter(Boolean);

package/dist/index.d.cts

@@ -1214,6 +1214,10 @@ export interface AppShellProps {
 	 * as when there is no `header`: from lg up it is hidden and `--aura-shell-bar-height` is 0. For apps whose phone
 	 * pages have a top bar (brand, avatar) and whose desktop pages don't. Default: the bar shows at every width. */
 	headerHideFrom?: "lg" | undefined;
+	/** 5.35 (DxT Monitor #13): below 1024px the top bar slides up while the page scrolls down and comes back on the way
+	 * up, near the top, and when focus enters it; `--aura-shell-bar-height` is 0 while it is away, so headers pinned
+	 * under it follow. No motion with reduced motion. Default false. */
+	headerHideOnScroll?: boolean | undefined;
 	children?: React$1.ReactNode | undefined;
 	navLabel?: string | undefined;
 	menuLabel?: string | undefined;
@@ -1324,6 +1328,10 @@ export interface ActionBarProps {
 	 * parent, so they never cover the last field. Make it the last child of the form or card it belongs to: like any
 	 * `position: sticky` element it sticks only while that parent is on screen. */
 	position?: "viewport" | "container" | undefined;
+	/** 5.35 (DxT Monitor #14): while this bar is on the page, a BottomNav (and its spacer) is hidden and the bar takes the
+	 * bottom edge — for a page whose own actions (Acknowledge, Visit site) replace the tab bar. Any element can do the
+	 * same with the `data-aura-hide-bottomnav` attribute. */
+	hidesBottomNav?: boolean | undefined;
 	/** Bulk actions: the number of selected rows. Shows "N selected" in the status; at 0 the bar hides (its live region
 	 * stays, so the next selection is announced) and its actions leave the tab order. */
 	selected?: number | undefined;
@@ -1365,6 +1373,10 @@ export interface BottomNavProps {
 	linkComponent?: React$1.ElementType | undefined;
 	/** Hidden from this breakpoint up, in CSS (so the server's HTML is right). Default `lg` (1024px); `false` never hides. */
 	hideFrom?: "md" | "lg" | "xl" | false | undefined;
+	/** 5.35 (DxT Monitor #14): slides down out of view while the page scrolls down and comes back on the way up, near the
+	 * top, and when focus enters it. Viewport ActionBars and toasts follow it down. Default false. To keep it away on a
+	 * page with its own bottom bar, see ActionBar `hidesBottomNav` (or `data-aura-hide-bottomnav` on your own bar). */
+	hideOnScroll?: boolean | undefined;
 	className?: string | undefined;
 }
 export interface StatChange {
@@ -1615,7 +1627,7 @@ export interface Theme {
 	css(selector?: string): string;
 }
 /** A monitored thing's state on a StatusTile. */
-export type StatusTileStatus = "down" | "problem" | "maintenance" | "ok";
+export type StatusTileStatus = "down" | "problem" | "maintenance" | "ok" | "unknown";
 /** A colour for a tile's value or a marker: `danger`, `warning`, `accent` (violet), `neutral` (grey) or `default`
  * (the text colour). */
 export type TileTone = "danger" | "warning" | "accent" | "neutral" | "default";
@@ -1629,14 +1641,15 @@ export interface StatusTileMarker {
 	tone?: TileTone | undefined;
 }
 export interface StatusTileProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
-	/** down (red), problem (amber), maintenance (violet) or ok (grey). Each has its own icon too, so colour is never the
-	 * only sign. */
+	/** down (red), problem (amber), maintenance (violet), ok (grey) or unknown (5.35: no data yet — a dashed circle on
+	 * the plain surface). Each has its own icon too, so colour is never the only sign. */
 	status: StatusTileStatus;
 	/** The name. Wraps to two lines at most, then ends with "…"; a cut name shows in full in a tip on hover. */
 	title: React$1.ReactNode;
 	/** Top right, tabular figures: "12m", "99.98%", "240 ms". */
 	value?: React$1.ReactNode | undefined;
-	/** The value's colour. Default: the status's (down → danger, problem → warning, maintenance → accent, ok → default). */
+	/** The value's colour. Default: the status's (down → danger, problem → warning, maintenance → accent, ok and
+	 * unknown → default). */
 	valueTone?: TileTone | undefined;
 	/** A short second line: "since 09:41", "3 of 4 checks". */
 	meta?: React$1.ReactNode | undefined;
@@ -1646,7 +1659,7 @@ export interface StatusTileProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	href?: string | undefined;
 	/** Your router's link (e.g. `next/link`); defaults to AuraProvider's `linkComponent`, then `<a>`. */
 	linkComponent?: React$1.ElementType | undefined;
-	/** The status word read out after the title. Default: the locale's (Down, Problem, Maintenance, OK). */
+	/** The status word read out after the title. Default: the locale's (Down, Problem, Maintenance, OK, No data). */
 	statusLabel?: string | undefined;
 	className?: string | undefined;
 }
@@ -1986,6 +1999,8 @@ export interface AuraStrings {
 	statusProblem: string;
 	statusMaintenance: string;
 	statusOk: string;
+	/** StatusTile `unknown` (5.35). */
+	statusUnknown: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/index.d.ts

@@ -1214,6 +1214,10 @@ export interface AppShellProps {
 	 * as when there is no `header`: from lg up it is hidden and `--aura-shell-bar-height` is 0. For apps whose phone
 	 * pages have a top bar (brand, avatar) and whose desktop pages don't. Default: the bar shows at every width. */
 	headerHideFrom?: "lg" | undefined;
+	/** 5.35 (DxT Monitor #13): below 1024px the top bar slides up while the page scrolls down and comes back on the way
+	 * up, near the top, and when focus enters it; `--aura-shell-bar-height` is 0 while it is away, so headers pinned
+	 * under it follow. No motion with reduced motion. Default false. */
+	headerHideOnScroll?: boolean | undefined;
 	children?: React$1.ReactNode | undefined;
 	navLabel?: string | undefined;
 	menuLabel?: string | undefined;
@@ -1324,6 +1328,10 @@ export interface ActionBarProps {
 	 * parent, so they never cover the last field. Make it the last child of the form or card it belongs to: like any
 	 * `position: sticky` element it sticks only while that parent is on screen. */
 	position?: "viewport" | "container" | undefined;
+	/** 5.35 (DxT Monitor #14): while this bar is on the page, a BottomNav (and its spacer) is hidden and the bar takes the
+	 * bottom edge — for a page whose own actions (Acknowledge, Visit site) replace the tab bar. Any element can do the
+	 * same with the `data-aura-hide-bottomnav` attribute. */
+	hidesBottomNav?: boolean | undefined;
 	/** Bulk actions: the number of selected rows. Shows "N selected" in the status; at 0 the bar hides (its live region
 	 * stays, so the next selection is announced) and its actions leave the tab order. */
 	selected?: number | undefined;
@@ -1365,6 +1373,10 @@ export interface BottomNavProps {
 	linkComponent?: React$1.ElementType | undefined;
 	/** Hidden from this breakpoint up, in CSS (so the server's HTML is right). Default `lg` (1024px); `false` never hides. */
 	hideFrom?: "md" | "lg" | "xl" | false | undefined;
+	/** 5.35 (DxT Monitor #14): slides down out of view while the page scrolls down and comes back on the way up, near the
+	 * top, and when focus enters it. Viewport ActionBars and toasts follow it down. Default false. To keep it away on a
+	 * page with its own bottom bar, see ActionBar `hidesBottomNav` (or `data-aura-hide-bottomnav` on your own bar). */
+	hideOnScroll?: boolean | undefined;
 	className?: string | undefined;
 }
 export interface StatChange {
@@ -1615,7 +1627,7 @@ export interface Theme {
 	css(selector?: string): string;
 }
 /** A monitored thing's state on a StatusTile. */
-export type StatusTileStatus = "down" | "problem" | "maintenance" | "ok";
+export type StatusTileStatus = "down" | "problem" | "maintenance" | "ok" | "unknown";
 /** A colour for a tile's value or a marker: `danger`, `warning`, `accent` (violet), `neutral` (grey) or `default`
  * (the text colour). */
 export type TileTone = "danger" | "warning" | "accent" | "neutral" | "default";
@@ -1629,14 +1641,15 @@ export interface StatusTileMarker {
 	tone?: TileTone | undefined;
 }
 export interface StatusTileProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
-	/** down (red), problem (amber), maintenance (violet) or ok (grey). Each has its own icon too, so colour is never the
-	 * only sign. */
+	/** down (red), problem (amber), maintenance (violet), ok (grey) or unknown (5.35: no data yet — a dashed circle on
+	 * the plain surface). Each has its own icon too, so colour is never the only sign. */
 	status: StatusTileStatus;
 	/** The name. Wraps to two lines at most, then ends with "…"; a cut name shows in full in a tip on hover. */
 	title: React$1.ReactNode;
 	/** Top right, tabular figures: "12m", "99.98%", "240 ms". */
 	value?: React$1.ReactNode | undefined;
-	/** The value's colour. Default: the status's (down → danger, problem → warning, maintenance → accent, ok → default). */
+	/** The value's colour. Default: the status's (down → danger, problem → warning, maintenance → accent, ok and
+	 * unknown → default). */
 	valueTone?: TileTone | undefined;
 	/** A short second line: "since 09:41", "3 of 4 checks". */
 	meta?: React$1.ReactNode | undefined;
@@ -1646,7 +1659,7 @@ export interface StatusTileProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	href?: string | undefined;
 	/** Your router's link (e.g. `next/link`); defaults to AuraProvider's `linkComponent`, then `<a>`. */
 	linkComponent?: React$1.ElementType | undefined;
-	/** The status word read out after the title. Default: the locale's (Down, Problem, Maintenance, OK). */
+	/** The status word read out after the title. Default: the locale's (Down, Problem, Maintenance, OK, No data). */
 	statusLabel?: string | undefined;
 	className?: string | undefined;
 }
@@ -1986,6 +1999,8 @@ export interface AuraStrings {
 	statusProblem: string;
 	statusMaintenance: string;
 	statusOk: string;
+	/** StatusTile `unknown` (5.35). */
+	statusUnknown: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/sv.cjs

@@ -152,6 +152,7 @@ var sv = {
   statusProblem: "Problem",
   statusMaintenance: "Underh\xE5ll",
   statusOk: "OK",
+  statusUnknown: "Ingen data",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }

package/dist/locales/sv.d.cts

@@ -94,6 +94,8 @@ export interface AuraStrings {
 	statusProblem: string;
 	statusMaintenance: string;
 	statusOk: string;
+	/** StatusTile `unknown` (5.35). */
+	statusUnknown: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/sv.d.ts

@@ -94,6 +94,8 @@ export interface AuraStrings {
 	statusProblem: string;
 	statusMaintenance: string;
 	statusOk: string;
+	/** StatusTile `unknown` (5.35). */
+	statusUnknown: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/th.cjs

@@ -152,6 +152,7 @@ var th = {
   statusProblem: "\u0E21\u0E35\u0E1B\u0E31\u0E0D\u0E2B\u0E32",
   statusMaintenance: "\u0E1B\u0E34\u0E14\u0E1B\u0E23\u0E31\u0E1A\u0E1B\u0E23\u0E38\u0E07",
   statusOk: "\u0E1B\u0E01\u0E15\u0E34",
+  statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }

package/dist/locales/th.d.cts

@@ -94,6 +94,8 @@ export interface AuraStrings {
 	statusProblem: string;
 	statusMaintenance: string;
 	statusOk: string;
+	/** StatusTile `unknown` (5.35). */
+	statusUnknown: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/th.d.ts

@@ -94,6 +94,8 @@ export interface AuraStrings {
 	statusProblem: string;
 	statusMaintenance: string;
 	statusOk: string;
+	/** StatusTile `unknown` (5.35). */
+	statusUnknown: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/server/index.cjs

@@ -341,6 +341,7 @@ var th = {
   statusProblem: "\u0E21\u0E35\u0E1B\u0E31\u0E0D\u0E2B\u0E32",
   statusMaintenance: "\u0E1B\u0E34\u0E14\u0E1B\u0E23\u0E31\u0E1A\u0E1B\u0E23\u0E38\u0E07",
   statusOk: "\u0E1B\u0E01\u0E15\u0E34",
+  statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }
@@ -476,6 +477,7 @@ var sv = {
   statusProblem: "Problem",
   statusMaintenance: "Underh\xE5ll",
   statusOk: "OK",
+  statusUnknown: "Ingen data",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }
@@ -612,6 +614,7 @@ var STRINGS = {
     statusProblem: "Problem",
     statusMaintenance: "Maintenance",
     statusOk: "OK",
+    statusUnknown: "No data",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }
@@ -1444,19 +1447,22 @@ var STATUS_ICON = {
   down: IconCircleAlert,
   problem: IconTriangleAlert,
   maintenance: IconWrench,
-  ok: IconCircleCheck
+  ok: IconCircleCheck,
+  unknown: IconCircleDotDashed
 };
 var STATUS_TONE = {
   down: "danger",
   problem: "warning",
   maintenance: "accent",
-  ok: "default"
+  ok: "default",
+  unknown: "default"
 };
 var STATUS_WORD = {
   down: "statusDown",
   problem: "statusProblem",
   maintenance: "statusMaintenance",
-  ok: "statusOk"
+  ok: "statusOk",
+  unknown: "statusUnknown"
 };
 function statusWord(status, t) {
   return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
@@ -1471,7 +1477,12 @@ function attrs(props) {
 }
 var comma = h5("span", { className: "aura-status-tile__sep" }, ",");
 function statusTileElement(props, ref, Link, t, titleRef) {
-  const status = STATUS_ICON[props.status] ? props.status : "ok";
+  const status = STATUS_ICON[props.status] ? props.status : "unknown";
+  if (status !== props.status)
+    devWarnOnce(
+      "status-tile-status-" + String(props.status),
+      'StatusTile status="' + String(props.status) + '" is not down, problem, maintenance, ok or unknown: it shows as unknown ("No data"). Map your value first.'
+    );
   const valueTone = props.valueTone || STATUS_TONE[status];
   const word = props.statusLabel || statusWord(status, t);
   const markers = (props.markers || []).filter(Boolean);

package/dist/server/index.d.cts

@@ -202,7 +202,7 @@ export interface Theme {
 	css(selector?: string): string;
 }
 /** A monitored thing's state on a StatusTile. */
-export type StatusTileStatus = "down" | "problem" | "maintenance" | "ok";
+export type StatusTileStatus = "down" | "problem" | "maintenance" | "ok" | "unknown";
 /** A colour for a tile's value or a marker: `danger`, `warning`, `accent` (violet), `neutral` (grey) or `default`
  * (the text colour). */
 export type TileTone = "danger" | "warning" | "accent" | "neutral" | "default";
@@ -216,14 +216,15 @@ export interface StatusTileMarker {
 	tone?: TileTone | undefined;
 }
 export interface StatusTileProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
-	/** down (red), problem (amber), maintenance (violet) or ok (grey). Each has its own icon too, so colour is never the
-	 * only sign. */
+	/** down (red), problem (amber), maintenance (violet), ok (grey) or unknown (5.35: no data yet — a dashed circle on
+	 * the plain surface). Each has its own icon too, so colour is never the only sign. */
 	status: StatusTileStatus;
 	/** The name. Wraps to two lines at most, then ends with "…"; a cut name shows in full in a tip on hover. */
 	title: React$1.ReactNode;
 	/** Top right, tabular figures: "12m", "99.98%", "240 ms". */
 	value?: React$1.ReactNode | undefined;
-	/** The value's colour. Default: the status's (down → danger, problem → warning, maintenance → accent, ok → default). */
+	/** The value's colour. Default: the status's (down → danger, problem → warning, maintenance → accent, ok and
+	 * unknown → default). */
 	valueTone?: TileTone | undefined;
 	/** A short second line: "since 09:41", "3 of 4 checks". */
 	meta?: React$1.ReactNode | undefined;
@@ -233,7 +234,7 @@ export interface StatusTileProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	href?: string | undefined;
 	/** Your router's link (e.g. `next/link`); defaults to AuraProvider's `linkComponent`, then `<a>`. */
 	linkComponent?: React$1.ElementType | undefined;
-	/** The status word read out after the title. Default: the locale's (Down, Problem, Maintenance, OK). */
+	/** The status word read out after the title. Default: the locale's (Down, Problem, Maintenance, OK, No data). */
 	statusLabel?: string | undefined;
 	className?: string | undefined;
 }
@@ -380,6 +381,8 @@ export interface AuraStrings {
 	statusProblem: string;
 	statusMaintenance: string;
 	statusOk: string;
+	/** StatusTile `unknown` (5.35). */
+	statusUnknown: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/server/index.d.ts

@@ -202,7 +202,7 @@ export interface Theme {
 	css(selector?: string): string;
 }
 /** A monitored thing's state on a StatusTile. */
-export type StatusTileStatus = "down" | "problem" | "maintenance" | "ok";
+export type StatusTileStatus = "down" | "problem" | "maintenance" | "ok" | "unknown";
 /** A colour for a tile's value or a marker: `danger`, `warning`, `accent` (violet), `neutral` (grey) or `default`
  * (the text colour). */
 export type TileTone = "danger" | "warning" | "accent" | "neutral" | "default";
@@ -216,14 +216,15 @@ export interface StatusTileMarker {
 	tone?: TileTone | undefined;
 }
 export interface StatusTileProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
-	/** down (red), problem (amber), maintenance (violet) or ok (grey). Each has its own icon too, so colour is never the
-	 * only sign. */
+	/** down (red), problem (amber), maintenance (violet), ok (grey) or unknown (5.35: no data yet — a dashed circle on
+	 * the plain surface). Each has its own icon too, so colour is never the only sign. */
 	status: StatusTileStatus;
 	/** The name. Wraps to two lines at most, then ends with "…"; a cut name shows in full in a tip on hover. */
 	title: React$1.ReactNode;
 	/** Top right, tabular figures: "12m", "99.98%", "240 ms". */
 	value?: React$1.ReactNode | undefined;
-	/** The value's colour. Default: the status's (down → danger, problem → warning, maintenance → accent, ok → default). */
+	/** The value's colour. Default: the status's (down → danger, problem → warning, maintenance → accent, ok and
+	 * unknown → default). */
 	valueTone?: TileTone | undefined;
 	/** A short second line: "since 09:41", "3 of 4 checks". */
 	meta?: React$1.ReactNode | undefined;
@@ -233,7 +234,7 @@ export interface StatusTileProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	href?: string | undefined;
 	/** Your router's link (e.g. `next/link`); defaults to AuraProvider's `linkComponent`, then `<a>`. */
 	linkComponent?: React$1.ElementType | undefined;
-	/** The status word read out after the title. Default: the locale's (Down, Problem, Maintenance, OK). */
+	/** The status word read out after the title. Default: the locale's (Down, Problem, Maintenance, OK, No data). */
 	statusLabel?: string | undefined;
 	className?: string | undefined;
 }
@@ -380,6 +381,8 @@ export interface AuraStrings {
 	statusProblem: string;
 	statusMaintenance: string;
 	statusOk: string;
+	/** StatusTile `unknown` (5.35). */
+	statusUnknown: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */