@jirawatpyk/aura-react 5.34.0 → 5.36.0

package/dist/server/index.js

@@ -277,6 +277,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 ");
   }
@@ -412,6 +413,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(", ");
   }
@@ -548,6 +550,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(", ");
     }
@@ -1380,19 +1383,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]);
@@ -1407,7 +1413,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/styles.css

@@ -161,6 +161,22 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
+/* 5.36 (DxT Monitor 15): the cell clips its text, not the focus ring of a link or button in it (2px wide, 2px out,
+ * so 4px). A cell's start edge is its content edge, so a ring there lost its start side. In the first data column the
+ * row's sticky start gutter (or pinned checkbox column) painted over it too: there a focused link or button is lifted
+ * just above them — not while the table is scrolled sideways (it would cover the pinned columns), and never above the
+ * sticky header or totals (z-index 3). Where the browser can't give the clip a margin (Safari), rings in cells are
+ * drawn inside instead. */
+.aura-table:not(.is-scrolled-x) :is(.aura-table__gutter, .aura-table__sel) + .aura-table__td :is(a, button, [role="button"]):focus-visible { position: relative; z-index: 2; }
+/* A plain link or button of yours in a cell gets AURA's ring rather than the browser's (no specificity: your own focus
+ * style wins). */
+:where(.aura-table__td) :where(a, button):focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
+@supports (overflow-clip-margin: 1px) {
+  .aura-table__td { overflow: clip; overflow-clip-margin: var(--aura-space-1); }
+}
+@supports not (overflow-clip-margin: 1px) {
+  .aura-table__td :focus-visible { outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+}
 /* 5.11 rowHeight="auto" (never virtualized): a row grows to fit what wraps in it; each cell centres its content.
  * The padding only shows once content is taller than the row: a small Button or IconButton (32px), a pill or one line
  * still fits the density's row height (7.5px above and below at 48px, 3.5px compact). */
@@ -864,8 +880,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 +1094,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; }
@@ -1187,6 +1213,7 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .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;
@@ -1845,10 +1872,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))); } }

package/dist/styles.layer.css

@@ -163,6 +163,22 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
+/* 5.36 (DxT Monitor 15): the cell clips its text, not the focus ring of a link or button in it (2px wide, 2px out,
+ * so 4px). A cell's start edge is its content edge, so a ring there lost its start side. In the first data column the
+ * row's sticky start gutter (or pinned checkbox column) painted over it too: there a focused link or button is lifted
+ * just above them — not while the table is scrolled sideways (it would cover the pinned columns), and never above the
+ * sticky header or totals (z-index 3). Where the browser can't give the clip a margin (Safari), rings in cells are
+ * drawn inside instead. */
+.aura-table:not(.is-scrolled-x) :is(.aura-table__gutter, .aura-table__sel) + .aura-table__td :is(a, button, [role="button"]):focus-visible { position: relative; z-index: 2; }
+/* A plain link or button of yours in a cell gets AURA's ring rather than the browser's (no specificity: your own focus
+ * style wins). */
+:where(.aura-table__td) :where(a, button):focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
+@supports (overflow-clip-margin: 1px) {
+  .aura-table__td { overflow: clip; overflow-clip-margin: var(--aura-space-1); }
+}
+@supports not (overflow-clip-margin: 1px) {
+  .aura-table__td :focus-visible { outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+}
 /* 5.11 rowHeight="auto" (never virtualized): a row grows to fit what wraps in it; each cell centres its content.
  * The padding only shows once content is taller than the row: a small Button or IconButton (32px), a pill or one line
  * still fits the density's row height (7.5px above and below at 48px, 3.5px compact). */
@@ -866,8 +882,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; }
@@ -1074,6 +1096,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; }
@@ -1189,6 +1215,7 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .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;
@@ -1847,10 +1874,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))); } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.34.0",
+  "version": "5.36.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",