@jirawatpyk/aura-react 5.33.0 → 5.35.0

package/dist/styles.layer.css

@@ -866,8 +866,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 +1080,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; }
@@ -1166,6 +1176,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; }
@@ -1785,10 +1858,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.33.0",
+  "version": "5.35.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",