@jirawatpyk/aura-react 5.33.0 → 5.35.0

package/dist/server/index.js

@@ -268,11 +268,16 @@ var th = {
   pageN: function(p) {
     return "\u0E2B\u0E19\u0E49\u0E32 " + p;
   },
-  progressReserved: function(v, r, max) {
-    return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
+  progressReserved: function(v, r2, max) {
+    return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r2);
   },
   breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
   stepError: "\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14",
+  statusDown: "\u0E25\u0E48\u0E21",
+  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 ");
   }
@@ -399,11 +404,16 @@ var sv = {
   pageN: function(p) {
     return "Sida " + p;
   },
-  progressReserved: function(v, r, max) {
-    return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
+  progressReserved: function(v, r2, max) {
+    return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r2) + " reserverade";
   },
   breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
   stepError: "har fel",
+  statusDown: "Nere",
+  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(", ");
   }
@@ -531,11 +541,16 @@ var STRINGS = {
     pageN: function(p) {
       return "Page " + p;
     },
-    progressReserved: function(v, r, max) {
-      return n2(v) + " of " + n2(max) + " used, " + n2(r) + " reserved";
+    progressReserved: function(v, r2, max) {
+      return n2(v) + " of " + n2(max) + " used, " + n2(r2) + " reserved";
     },
     breadcrumbMore: "Show the full path",
     stepError: "has errors",
+    statusDown: "Down",
+    statusProblem: "Problem",
+    statusMaintenance: "Maintenance",
+    statusOk: "OK",
+    statusUnknown: "No data",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }
@@ -546,14 +561,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h5 = String(hex).trim().replace("#", "");
-  if (h5.length === 3)
-    h5 = h5.split("").map(function(c) {
+  let h6 = String(hex).trim().replace("#", "");
+  if (h6.length === 3)
+    h6 = h6.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h5)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h6)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h5.slice(i, i + 2), 16) / 255;
+    return parseInt(h6.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -569,10 +584,10 @@ function delin(c) {
   return c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
 }
 function rgbToOklch(rgb) {
-  const r = lin(rgb[0]), g = lin(rgb[1]), b = lin(rgb[2]);
-  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
-  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
-  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const r2 = lin(rgb[0]), g = lin(rgb[1]), b = lin(rgb[2]);
+  const l = Math.cbrt(0.4122214708 * r2 + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r2 + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r2 + 0.2817188376 * g + 0.6299787005 * b);
   const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
   const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
   const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
@@ -732,13 +747,13 @@ function createTheme(opts) {
   D["card-shadow-creative"] = "8px 8px 0px " + shadowDark;
   const checks = [];
   function check(theme, fg, bg, target, fgHex, bgHex) {
-    const r = contrast(fgHex, bgHex);
+    const r2 = contrast(fgHex, bgHex);
     checks.push({
       theme,
       pair: fg + " on " + bg,
-      ratio: Math.round(r * 100) / 100,
+      ratio: Math.round(r2 * 100) / 100,
       target,
-      pass: r >= target - 5e-3
+      pass: r2 >= target - 5e-3
     });
   }
   [
@@ -858,6 +873,18 @@ function colorSchemeScript(options) {
 
 // src/breakpoints.ts
 var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+var ORDER = ["base", "sm", "md", "lg", "xl"];
+function respVars(prefix, value, map2) {
+  const style = {};
+  if (value == null) return style;
+  if (typeof value !== "object") value = { base: value };
+  let byBp = value, cur;
+  ORDER.forEach(function(k) {
+    if (byBp[k] !== void 0) cur = map2 ? map2(byBp[k]) : byBp[k];
+    if (cur !== void 0) style["--" + prefix + "-" + k] = cur;
+  });
+  return style;
+}
 
 // src/display.tsx
 import * as React3 from "react";
@@ -921,9 +948,9 @@ function iconSvg(shapes, props, ref) {
       ...a11y
     },
     shapes.map(function(s, i) {
-      const attrs = { key: i };
-      for (const k in s[1]) attrs[k === "stroke-width" ? "strokeWidth" : k] = s[1][k];
-      return h(s[0], attrs);
+      const attrs2 = { key: i };
+      for (const k in s[1]) attrs2[k === "stroke-width" ? "strokeWidth" : k] = s[1][k];
+      return h(s[0], attrs2);
     })
   );
 }
@@ -1055,6 +1082,14 @@ var IconTrendingDown = /* @__PURE__ */ defineIcon("trending-down", [
   ["path", { d: "M16 17h6v-6" }],
   ["path", { d: "m22 17-8.5-8.5-5 5L2 7" }]
 ]);
+var IconWrench = /* @__PURE__ */ defineIcon("wrench", [
+  [
+    "path",
+    {
+      d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"
+    }
+  ]
+]);
 
 // src/display.tsx
 var h2 = React3.createElement;
@@ -1295,14 +1330,14 @@ function ServerAvatar(props) {
 import * as React4 from "react";
 var h3 = React4.createElement;
 var Container = React4.forwardRef(function Container2(props, ref) {
-  const attrs = {};
+  const attrs2 = {};
   Object.keys(props).forEach(function(k) {
     if (k === "id" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k))
-      attrs[k] = props[k];
+      attrs2[k] = props[k];
   });
   return h3(
     props.as || "div",
-    Object.assign(attrs, {
+    Object.assign(attrs2, {
       ref,
       className: cx(
         "aura-container",
@@ -1320,15 +1355,15 @@ var Container = React4.forwardRef(function Container2(props, ref) {
 import * as React5 from "react";
 var h4 = React5.createElement;
 var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
-  const attrs = {};
+  const attrs2 = {};
   Object.keys(props).forEach(function(k) {
     if (k === "id" || k === "lang" || k === "dir" || k === "role" || /^(aria|data)-/.test(k))
-      attrs[k] = props[k];
+      attrs2[k] = props[k];
   });
   const level = props.headingLevel || 1;
   return h4(
     "div",
-    Object.assign(attrs, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    Object.assign(attrs2, { ref, className: cx("aura-page-header", props.className), style: props.style }),
     h4(
       "div",
       { className: "aura-page-header__text" },
@@ -1340,6 +1375,215 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
     props.actions != null && props.actions !== false ? h4("div", { className: "aura-page-header__actions" }, props.actions) : null
   );
 });
+
+// src/tiles.tsx
+import * as React6 from "react";
+var h5 = React6.createElement;
+var STATUS_ICON = {
+  down: IconCircleAlert,
+  problem: IconTriangleAlert,
+  maintenance: IconWrench,
+  ok: IconCircleCheck,
+  unknown: IconCircleDotDashed
+};
+var STATUS_TONE = {
+  down: "danger",
+  problem: "warning",
+  maintenance: "accent",
+  ok: "default",
+  unknown: "default"
+};
+var STATUS_WORD = {
+  down: "statusDown",
+  problem: "statusProblem",
+  maintenance: "statusMaintenance",
+  ok: "statusOk",
+  unknown: "statusUnknown"
+};
+function statusWord(status, t) {
+  return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
+}
+function attrs(props) {
+  const out = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "style" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k))
+      out[k] = props[k];
+  });
+  return out;
+}
+var comma = h5("span", { className: "aura-status-tile__sep" }, ",");
+function statusTileElement(props, ref, Link, t, titleRef) {
+  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);
+  const has = function(v) {
+    return v != null && v !== false && v !== "";
+  };
+  const hasValue = has(props.value), hasMeta = has(props.meta);
+  const Tag = props.href ? Link : "div";
+  return h5(
+    Tag,
+    Object.assign(attrs(props), {
+      ref,
+      href: props.href,
+      className: cx("aura-status-tile", "aura-status-tile--" + status, props.href && "is-interactive", props.className)
+    }),
+    h5(
+      "span",
+      { className: "aura-status-tile__head" },
+      h5(Icon, { name: h5(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
+      h5("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h5("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
+      hasValue ? h5(
+        "span",
+        { className: cx("aura-status-tile__value", "is-" + valueTone) },
+        props.value,
+        hasMeta || markers.length ? comma : null
+      ) : null
+    ),
+    hasMeta || markers.length ? h5(
+      "span",
+      { className: "aura-status-tile__foot" },
+      hasMeta ? h5("span", { className: "aura-status-tile__meta" }, props.meta, markers.length ? comma : null) : null,
+      markers.length ? h5(
+        "span",
+        { className: "aura-status-tile__markers" },
+        markers.map(function(m, i) {
+          return h5(
+            "span",
+            {
+              key: i,
+              className: cx("aura-status-tile__marker", "is-" + (m.tone || "neutral")),
+              "data-aura-tip": m.label
+            },
+            h5(Icon, { name: m.icon, size: 14 }),
+            h5("span", { className: "aura-sr-only" }, m.label + (i < markers.length - 1 ? "," : ""))
+          );
+        })
+      ) : null
+    ) : null
+  );
+}
+function ServerStatusTile(props) {
+  return statusTileElement(props, void 0, props.linkComponent || "a", STRINGS.en);
+}
+var TileGrid = React6.forwardRef(function TileGrid2(props, ref) {
+  const style = Object.assign(
+    {},
+    respVars("aura-grid-cols", props.columns == null ? { base: 2, md: 3 } : props.columns),
+    props.style
+  );
+  return h5(
+    "ul",
+    Object.assign(attrs(props), {
+      ref,
+      role: "list",
+      className: cx("aura-grid-layout", "aura-tile-grid", props.className),
+      style
+    }),
+    /* toArray drops null and booleans and keys each element; a Fragment's children are items too. */
+    flat(props.children).map(function(c, i) {
+      return h5("li", { key: React6.isValidElement(c) && c.key != null ? c.key : i }, c);
+    })
+  );
+});
+function flat(children) {
+  const out = [];
+  React6.Children.toArray(children).forEach(function(c) {
+    if (React6.isValidElement(c) && c.type === React6.Fragment)
+      flat(c.props.children).forEach(function(x) {
+        out.push(React6.isValidElement(x) ? React6.cloneElement(x, { key: String(c.key) + "/" + String(x.key) }) : x);
+      });
+    else if (c !== "") out.push(c);
+  });
+  return out;
+}
+var SIZES2 = { sm: [80, 24], md: [120, 32] };
+var PAD = 2;
+function r(n3) {
+  return Math.round(n3 * 100) / 100;
+}
+function num(v) {
+  return typeof v === "number" && isFinite(v) ? v : null;
+}
+var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
+  const wh = SIZES2[props.size || "sm"] || SIZES2.sm;
+  const W = wh[0], H = wh[1];
+  const data = (props.data || []).map(num);
+  const n3 = data.length;
+  const vals = data.filter(function(v) {
+    return v != null;
+  });
+  let lo = num(props.min), hi = num(props.max);
+  if (lo == null) lo = vals.length ? Math.min.apply(null, vals) : 0;
+  if (hi == null) hi = vals.length ? Math.max.apply(null, vals) : 0;
+  if (lo > hi) {
+    const s = lo;
+    lo = hi;
+    hi = s;
+  }
+  const step = n3 > 1 ? (W - 2 * PAD) / (n3 - 1) : 0;
+  const x = function(i) {
+    return n3 > 1 ? PAD + i * step : W / 2;
+  };
+  const y = function(v) {
+    if (hi === lo) return H / 2;
+    const k = Math.max(0, Math.min(1, (v - lo) / (hi - lo)));
+    return H - PAD - k * (H - 2 * PAD);
+  };
+  let d = "";
+  const dots = [];
+  data.forEach(function(v, i) {
+    if (v == null) return;
+    const prev = i > 0 && data[i - 1] != null, next = i < n3 - 1 && data[i + 1] != null;
+    if (!prev && !next) dots.push(h5("circle", { key: "d" + i, cx: r(x(i)), cy: r(y(v)), r: 1.5 }));
+    else d += (prev ? "L" : "M") + r(x(i)) + " " + r(y(v));
+  });
+  const mode = props.failures || "none";
+  const fails = [];
+  if (mode !== "none" && props.failed)
+    data.forEach(function(_v, i) {
+      if (!props.failed[i]) return;
+      if (mode === "band") {
+        const w = Math.max(2, step || W), left = Math.max(0, x(i) - w / 2), right = Math.min(W, x(i) + w / 2);
+        fails.push(h5("rect", { key: "f" + i, x: r(left), y: 0, width: r(right - left), height: H }));
+      } else
+        fails.push(
+          h5("rect", {
+            key: "f" + i,
+            x: r(Math.max(0, Math.min(W - 1.5, x(i) - 0.75))),
+            y: H - 6,
+            width: 1.5,
+            height: 6
+          })
+        );
+    });
+  const named = !!props.label;
+  return h5(
+    "svg",
+    Object.assign(attrs(props), {
+      ref,
+      className: cx("aura-sparkline", "is-" + (props.tone || "neutral"), props.className),
+      width: W,
+      height: H,
+      viewBox: "0 0 " + W + " " + H,
+      role: named ? "img" : void 0,
+      "aria-label": named ? props.label : void 0,
+      "aria-hidden": named ? void 0 : true,
+      focusable: "false"
+    }),
+    fails.length && mode === "band" ? h5("g", { className: "aura-sparkline__band" }, fails) : null,
+    d ? h5("path", { className: "aura-sparkline__line", d }) : null,
+    dots.length ? h5("g", { className: "aura-sparkline__dots" }, dots) : null,
+    fails.length && mode === "ticks" ? h5("g", { className: "aura-sparkline__ticks" }, fails) : null
+  );
+});
 export {
   ServerAlert as Alert,
   ServerAvatar as Avatar,
@@ -1350,8 +1594,11 @@ export {
   Icon,
   PageHeader,
   STRINGS,
+  Sparkline,
   ServerStat as Stat,
   ServerStatusPill as StatusPill,
+  ServerStatusTile as StatusTile,
+  TileGrid,
   scale as brandScale,
   breakpoints,
   buttonClass,

package/dist/styles.css

@@ -864,8 +864,14 @@ a.aura-tab { text-decoration: none; }
 .aura-crumbs li.aura-crumbs__more { display: none; }
 /* "…" is the only way to the hidden items: a 24px target, 44px on touch screens. */
 .aura-crumbs__more > button { position: relative; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
+/* 5.35 (DxT Monitor 11): on a touch screen every crumb link and button (and "…") gets a 44px-tall hit area; the text
+ * doesn't move. The area reaches 12px into the gutter on each side (the gutter is 28px, so neighbours never overlap)
+ * and only 4px below the text, so it stops short of a PageHeader title 4px under the crumbs; the rest of the 44px is
+ * above. Wrapped rows sit 24px apart on touch screens so one row's areas never cover the next. */
 @media (pointer: coarse) {
-  .aura-crumbs__more > button::after { content: ''; position: absolute; top: 50%; left: 50%; width: var(--aura-touch-target); height: var(--aura-touch-target); transform: translate(-50%, -50%); }
+  .aura-crumbs ol { row-gap: 24px; }
+  .aura-crumbs li > a, .aura-crumbs li > button { position: relative; }
+  .aura-crumbs li > a::after, .aura-crumbs li > button::after { content: ''; position: absolute; left: -12px; right: -12px; bottom: -4px; height: max(100% + 4px, var(--aura-touch-target)); }
 }
 @media (max-width: 639.98px) {
   .aura-crumbs--collapse-sm li.aura-crumbs__more { display: inline-flex; }
@@ -1072,6 +1078,10 @@ a.aura-tab { text-decoration: none; }
   --aura-shell-bar-height: 56px; /* 5.14 (Chamber-OS 104): the top bar's height, for sticky offsets under it */
 }
 .aura-shell--no-bar { --aura-shell-bar-height: 0px; }
+/* 5.35 (DxT Monitor 13): headerHideOnScroll — below lg the bar slides up out of view while the page scrolls down (its
+ * shadow too); AppShell sets the bar-height token to 0 meanwhile. */
+.aura-shell__bar--hides { transition: transform var(--aura-duration-base) var(--aura-ease); }
+@media (max-width: 1023.98px) { .aura-shell__bar.is-away { transform: translateY(calc(-100% - 8px)); } }
 @media (min-width: 1024px) { .aura-shell--menu-bar { --aura-shell-bar-height: 0px; } }
 .aura-shell__nav { position: sticky; top: 0; height: 100vh; height: 100dvh; flex: none; }
 .aura-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@@ -1164,6 +1174,69 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 /* Anything else interactive in the tile sits above the stretched link. No specificity, so a control's own position wins. */
 :where(.aura-stat--label-link) :where(a, button, input, select, textarea, label, summary, [tabindex]):not(:where(.aura-stat__link)) { position: relative; z-index: 1; }
 
+/* ---------- StatusTile, TileGrid, Sparkline (5.34, DxT Monitor S06) ---------- */
+.aura-tile-grid { list-style: none; margin: 0; padding: 0; --aura-grid-gap-base: var(--aura-space-2); --aura-grid-gap-sm: var(--aura-space-2); --aura-grid-gap-md: var(--aura-space-2); --aura-grid-gap-lg: var(--aura-space-2); --aura-grid-gap-xl: var(--aura-space-2); }
+.aura-tile-grid > li { display: flex; min-width: 0; container: aura-status-tile / inline-size; } /* the narrow-tile query reads the cell: a grid cell has a definite width */
+.aura-tile-grid > li > * { flex: 1; min-width: 0; }
+.aura-status-tile {
+  position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; min-width: 0;
+  padding: var(--aura-space-2) var(--aura-space-3); background: var(--aura-bg-surface); color: var(--aura-fg-primary);
+  border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-sm);
+  font-family: var(--font-sans); font-size: 13px; line-height: 18px; text-align: start; text-decoration: none;
+  --aura-hover: var(--aura-bg-surface-hover);
+}
+.aura-status-tile--down { background: var(--aura-alert-danger-bg); border-color: var(--aura-alert-danger-border); }
+.aura-status-tile--problem { background: var(--aura-alert-warning-bg); border-color: var(--aura-alert-warning-border); }
+.aura-status-tile--maintenance { background: var(--aura-alert-info-bg); border-color: var(--aura-alert-info-border); }
+.aura-status-tile.is-interactive { cursor: pointer; transition: border-color var(--aura-duration-fast) var(--aura-ease); }
+.aura-status-tile.is-interactive:hover { border-color: var(--aura-border-strong); }
+.aura-status-tile.is-interactive:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
+.aura-status-tile__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--aura-space-2); min-width: 0; }
+.aura-status-tile__sep { font-size: 0; }
+.aura-status-tile__icon { flex: none; margin-top: 1px; color: var(--aura-fg-secondary); }
+.aura-status-tile--down .aura-status-tile__icon { color: var(--aura-alert-danger-fg); }
+.aura-status-tile--problem .aura-status-tile__icon { color: var(--aura-alert-warning-fg); }
+.aura-status-tile--maintenance .aura-status-tile__icon { color: var(--aura-alert-info-fg); }
+.aura-status-tile--unknown .aura-status-tile__icon { color: var(--aura-fg-tertiary); } /* 5.35: no data yet */
+/* Two lines at most: similar names stay apart. */
+.aura-status-tile__title {
+  flex: 1 1 0; min-width: 0; font-weight: 600; overflow-wrap: break-word;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
+}
+.aura-status-tile__value { flex: none; margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.aura-status-tile__value.is-danger, .aura-status-tile__marker.is-danger { color: var(--aura-fg-danger); }
+.aura-status-tile__value.is-warning, .aura-status-tile__marker.is-warning { color: var(--aura-fg-warning); }
+.aura-status-tile__value.is-accent, .aura-status-tile__marker.is-accent { color: var(--aura-fg-accent); }
+.aura-status-tile__value.is-neutral, .aura-status-tile__marker.is-neutral { color: var(--aura-fg-secondary); }
+.aura-status-tile--down .aura-status-tile__value.is-danger { color: var(--aura-alert-danger-fg); }
+.aura-status-tile--problem .aura-status-tile__value.is-warning { color: var(--aura-alert-warning-fg); }
+.aura-status-tile--maintenance .aura-status-tile__value.is-accent { color: var(--aura-alert-info-fg); }
+/* A narrow tile in a TileGrid (two columns on a phone) puts the value on its own line under the title, in every tile
+ * alike, rather than squeezing the title to a word. The grid's cells are the containers: on the tile itself, inline-size
+ * containment would collapse a tile in a flex row or an inline block to nothing. */
+@container aura-status-tile (max-width: 225.98px) {
+  .aura-status-tile__value { flex-basis: 100%; margin-inline-start: 0; padding-inline-start: 24px; }
+}
+/* The second line starts under the title. */
+.aura-status-tile__foot { display: flex; align-items: center; gap: var(--aura-space-2); min-width: 0; padding-inline-start: 24px; font-size: 12px; color: var(--aura-fg-secondary); }
+.aura-status-tile__meta { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.aura-status-tile__markers { display: inline-flex; align-items: center; gap: var(--aura-space-1); margin-inline-start: auto; flex: none; }
+.aura-status-tile__marker { display: inline-flex; }
+.aura-status-tile:lang(th) { line-height: 20px; }
+.aura-sparkline { display: inline-block; flex: none; vertical-align: middle; overflow: visible; color: var(--aura-fg-secondary); }
+.aura-sparkline.is-accent { color: var(--aura-fg-accent); }
+.aura-sparkline.is-danger { color: var(--aura-fg-danger); }
+.aura-sparkline.is-warning { color: var(--aura-fg-warning); }
+.aura-sparkline.is-positive { color: var(--aura-fg-positive); }
+.aura-sparkline__line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
+.aura-sparkline__dots { fill: currentColor; }
+.aura-sparkline__band { fill: var(--aura-fg-danger); opacity: 0.16; }
+.aura-sparkline__ticks { fill: var(--aura-fg-danger); }
+@media (forced-colors: active) {
+  .aura-sparkline { color: CanvasText; }
+  .aura-sparkline__band, .aura-sparkline__ticks { fill: Highlight; }
+}
+
 /* ---------- TimePicker ---------- */
 .aura-time__popover { min-width: 160px; }
 .aura-time__option { min-height: 36px; font-variant-numeric: tabular-nums; }
@@ -1783,10 +1856,18 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @media (min-width: 1024px) { .aura-bottomnav.aura-bottomnav--below-lg, .aura-bottomnav-spacer.aura-bottomnav--below-lg { display: none; } }
 @media (min-width: 1280px) { .aura-bottomnav.aura-bottomnav--below-xl, .aura-bottomnav-spacer.aura-bottomnav--below-xl { display: none; } }
 /* While a BottomNav shows, viewport ActionBars and phone toasts sit on top of it. */
-:root:has(.aura-bottomnav--always) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); }
-@media (max-width: 767.98px) { :root:has(.aura-bottomnav--below-md) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
-@media (max-width: 1023.98px) { :root:has(.aura-bottomnav--below-lg) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
-@media (max-width: 1279.98px) { :root:has(.aura-bottomnav--below-xl) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
+/* 5.35: not while it has slid away on scroll, nor on a page that hides it (data-aura-hide-bottomnav). */
+:root:has(nav.aura-bottomnav--always:not(.is-away)):not(:has([data-aura-hide-bottomnav])) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); }
+@media (max-width: 767.98px) { :root:has(nav.aura-bottomnav--below-md:not(.is-away)):not(:has([data-aura-hide-bottomnav])) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
+@media (max-width: 1023.98px) { :root:has(nav.aura-bottomnav--below-lg:not(.is-away)):not(:has([data-aura-hide-bottomnav])) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
+@media (max-width: 1279.98px) { :root:has(nav.aura-bottomnav--below-xl:not(.is-away)):not(:has([data-aura-hide-bottomnav])) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
+/* 5.35 (DxT Monitor 14): hideOnScroll slides it down out of view (the spacer stays, so nothing shifts); a page with its
+ * own bottom bar (ActionBar hidesBottomNav, or data-aura-hide-bottomnav on any element) has no BottomNav or spacer. */
+.aura-bottomnav--hides { transition: transform var(--aura-duration-base) var(--aura-ease); }
+.aura-bottomnav.is-away { transform: translateY(100%); }
+:root:has([data-aura-hide-bottomnav]) .aura-bottomnav, :root:has([data-aura-hide-bottomnav]) .aura-bottomnav-spacer { display: none; }
+.aura-actionbar--viewport { transition: bottom var(--aura-duration-base) var(--aura-ease); }
+@media (prefers-reduced-motion: reduce) { .aura-bottomnav--hides, .aura-actionbar--viewport, .aura-shell__bar--hides { transition: none; } }
 /* Toasts clear a BottomNav wherever it shows (phones and tablets), else the bottom safe-area inset (5.6). */
 .aura-toaster:not(.is-top) { bottom: calc(var(--aura-toaster-offset, var(--aura-space-6)) + var(--aura-bottomnav-offset, env(safe-area-inset-bottom, 0px))); }
 @media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-toaster-offset, var(--aura-space-4)) + var(--aura-bottomnav-offset, env(safe-area-inset-bottom, 0px))); } }