@jirawatpyk/aura-react 5.50.0 → 5.52.0

package/dist/server/index.d.ts

@@ -46,6 +46,9 @@ export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked
 export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
 	/** The status word shown, e.g. "In Progress". Other attributes (`id`, `data-*`, `aria-*`) go on the pill (5.8). */
 	children: React$1.ReactNode;
+	/** 5.51 (Chamber-OS 158): in a box narrower than the words, the text wraps inside the pill (still rounded, the icon
+	 * on the first line) instead of running out of it. Without it a pill stays on one line. */
+	wrap?: boolean | undefined;
 	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
@@ -114,6 +117,43 @@ export type DataAttributes = {
 };
 export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";
 export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+/** 5.52 (Chamber-OS 164): what a loading column's placeholder cell looks like. */
+export interface TableSkeletonHint {
+	/** Text lines: 2 for a value over its caption. Default 1. */
+	lines?: 1 | 2 | undefined;
+	/** `text` (default) bars, a status `pill`, or an `action` block as tall as a small Button (44px on a phone card or a
+	 * touch screen with `touch`). */
+	kind?: "text" | "pill" | "action" | undefined;
+	/** An `action` block 44px below 640px and on a coarse pointer, as `touchHeight` buttons are. */
+	touch?: boolean | undefined;
+}
+/** 5.52 (Chamber-OS 164): one column of a `TableSkeleton` — the same facts a header cell gives a loading Table. */
+export interface TableSkeletonColumn {
+	/** Header text (and the stacked card's field label). */
+	label?: string | undefined;
+	/** Column width: a share such as `'22%'`, or px. Columns without one split what is left evenly. */
+	width?: string | number | undefined;
+	align?: "start" | "center" | "end" | undefined;
+	numeric?: boolean | undefined;
+	/** Its place in a stacked row: `title`, `action` or `field` (default), as on a Td. */
+	card?: "title" | "action" | "field" | undefined;
+	skeleton?: TableSkeletonHint | undefined;
+}
+/** 5.52 (Chamber-OS 164): a loading Table for Server Components. Same frame, density, stacking and cards as Table. */
+export interface TableSkeletonProps {
+	columns: TableSkeletonColumn[];
+	/** Placeholder rows (default 5). */
+	rows?: number | undefined;
+	density?: "comfortable" | "compact" | undefined;
+	stackBelow?: "sm" | "md" | undefined;
+	stackStyle?: "list" | "cards" | undefined;
+	bordered?: boolean | undefined;
+	bleed?: boolean | undefined;
+	bleedEnd?: boolean | undefined;
+	rowHeight?: "density" | undefined;
+	align?: "top" | "middle" | undefined;
+	className?: string | undefined;
+}
 export interface StatChange {
 	/** Shown as written, e.g. "+12%" or "−3". */
 	value: React$1.ReactNode;
@@ -484,6 +524,9 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** A loading Table (5.52, Chamber-OS 164), for Server Components — e.g. a route's loading.tsx. `aria-hidden` and
+ * `inert`: announce the load in the page's own status line. */
+export declare function TableSkeleton(props: TableSkeletonProps): React$1.ReactElement;
 /** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
  * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
  * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from

package/dist/server/index.js

@@ -576,14 +576,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h6 = String(hex).trim().replace("#", "");
-  if (h6.length === 3)
-    h6 = h6.split("").map(function(c) {
+  let h7 = String(hex).trim().replace("#", "");
+  if (h7.length === 3)
+    h7 = h7.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h6)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h7)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h6.slice(i, i + 2), 16) / 255;
+    return parseInt(h7.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1176,8 +1176,17 @@ var PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone2 = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children"]);
-  return /* @__PURE__ */ React3.createElement("span", { ...rest, ref, className: cx("aura-pill", "aura-pill--" + tone2, props.className) }, /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }), props.children);
+  const rest = omit(props, ["tone", "className", "children", "wrap"]);
+  return /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx("aura-pill", "aura-pill--" + tone2, props.wrap && "is-wrap", props.className)
+    },
+    /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
+    props.wrap ? /* @__PURE__ */ React3.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
+  );
 }
 function badgeElement(props, ref) {
   const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
@@ -1366,10 +1375,171 @@ var Container = React4.forwardRef(function Container2(props, ref) {
   );
 });
 
-// src/PageHeader.tsx
+// src/TableSkeleton.tsx
 import * as React5 from "react";
 var h4 = React5.createElement;
-var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
+function inertProps() {
+  return { inert: parseInt(React5.version, 10) >= 19 ? true : "", "aria-hidden": true };
+}
+function widthOf(w) {
+  return w == null || w === "" ? void 0 : typeof w === "number" ? w + "px" : w;
+}
+function skeletonColgroup(cols) {
+  return h4(
+    "colgroup",
+    null,
+    cols.map(function(c, i) {
+      const w = widthOf(c.width);
+      return h4("col", { key: i, style: w ? { width: w } : void 0 });
+    })
+  );
+}
+function placeholder(c) {
+  const s = c.skeleton || {};
+  if (s.kind === "pill") return h4("span", { className: "aura-skel aura-skel--pill" });
+  if (s.kind === "action") return h4("span", { className: cx("aura-skel aura-skel--action", s.touch && "is-touch") });
+  if (s.lines === 2)
+    return h4(
+      "span",
+      { className: "aura-skel-lines" },
+      h4("span", { className: "aura-skel aura-skel--text", style: { width: "100%" } }),
+      h4("span", { className: "aura-skel aura-skel--text", style: { width: "60%" } })
+    );
+  return h4("span", { className: "aura-skel aura-skel--text", style: { width: "80%" } });
+}
+function cellCls(base, c) {
+  const align = c.align || (c.numeric ? "end" : void 0);
+  return cx(base, align === "end" && "is-end", align === "center" && "is-center", c.numeric && "is-numeric");
+}
+function skeletonBody(cols, n3, stacked) {
+  const rows = [];
+  for (let r2 = 0; r2 < n3; r2++)
+    rows.push(
+      h4(
+        "tr",
+        { key: r2, className: "aura-tbl__row aura-tbl__row--skeleton", role: stacked ? "row" : void 0 },
+        cols.map(function(c, i) {
+          const slot = stacked && (c.card === "title" || c.card === "action") ? c.card : void 0;
+          return h4(
+            "td",
+            {
+              key: i,
+              className: cellCls("aura-tbl__td", c),
+              role: stacked ? "cell" : void 0,
+              "data-label": stacked && !slot && c.label ? c.label : void 0,
+              "data-card": slot
+            },
+            placeholder(c)
+          );
+        })
+      )
+    );
+  return h4(
+    "tbody",
+    { key: "aura-skeleton", className: "aura-tbl__body", role: stacked ? "rowgroup" : void 0 },
+    rows
+  );
+}
+function tableWrapClass(p) {
+  return cx(
+    "aura-tbl-wrap",
+    p.stackBelow && "is-stackable",
+    p.bordered === false && "is-flush",
+    p.bleed && "aura-bleed-frame",
+    p.bleed && !p.cards && "aura-bleed",
+    p.bleed && p.bleedEnd && !p.cards && "aura-bleed-end"
+  );
+}
+function tableClass(p) {
+  return cx(
+    "aura-tbl",
+    p.stackBelow && "aura-tbl--stack-" + p.stackBelow,
+    (p.align === "middle" || p.rowHeight === "density" && p.align !== "top") && "aura-tbl--middle",
+    p.rowHeight === "density" && "aura-tbl--row-density",
+    p.cards && "aura-tbl--cards",
+    p.className
+  );
+}
+function cardsFrame(el, p) {
+  return p.cards ? h4(
+    "div",
+    {
+      className: cx(
+        "aura-tbl-cards aura-tbl-cards--" + p.stackBelow,
+        p.bleed && "aura-bleed",
+        p.bleed && p.bleedEnd && "aura-bleed-end"
+      )
+    },
+    el
+  ) : el;
+}
+function TableSkeleton(props) {
+  const cols = props.columns || [];
+  const n3 = props.rows != null ? Math.max(0, props.rows) : 5;
+  const stacked = !!props.stackBelow;
+  const cards = stacked && props.stackStyle === "cards";
+  const head = h4(
+    "thead",
+    { className: "aura-tbl__head", role: stacked ? "rowgroup" : void 0 },
+    h4(
+      "tr",
+      { className: "aura-tbl__row", role: stacked ? "row" : void 0 },
+      cols.map(function(c, i) {
+        return h4(
+          "th",
+          { key: i, scope: "col", className: cellCls("aura-tbl__th", c), role: stacked ? "columnheader" : void 0 },
+          c.label
+        );
+      })
+    )
+  );
+  const table = h4(
+    "div",
+    Object.assign(
+      {
+        className: tableWrapClass({
+          stackBelow: props.stackBelow,
+          bordered: props.bordered,
+          bleed: props.bleed,
+          bleedEnd: props.bleedEnd,
+          cards
+        }),
+        "data-density": props.density || "comfortable"
+      },
+      inertProps()
+    ),
+    h4(
+      "table",
+      {
+        className: cx(
+          tableClass({
+            stackBelow: props.stackBelow,
+            align: props.align,
+            rowHeight: props.rowHeight,
+            cards,
+            className: props.className
+          }),
+          "aura-tbl--skeleton"
+        ),
+        role: stacked ? "table" : void 0
+      },
+      skeletonColgroup(cols),
+      head,
+      skeletonBody(cols, n3, stacked)
+    )
+  );
+  return cardsFrame(table, {
+    stackBelow: props.stackBelow,
+    bleed: props.bleed,
+    bleedEnd: props.bleedEnd,
+    cards
+  });
+}
+
+// src/PageHeader.tsx
+import * as React6 from "react";
+var h5 = React6.createElement;
+var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const attrs2 = {};
   Object.keys(props).forEach(function(k) {
     if (k === "id" || k === "lang" || k === "dir" || k === "role" || /^(aria|data)-/.test(k))
@@ -1385,7 +1555,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
-  const heading = h4(
+  const heading = h5(
     "h" + level,
     {
       className: "aura-page-header__title",
@@ -1397,7 +1567,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
   );
   const hasActions = props.actions != null && props.actions !== false;
   const bar = hasActions && (props.actionsBarBelow === "sm" || props.actionsBarBelow === "md") ? props.actionsBarBelow : null;
-  return h4(
+  return h5(
     "div",
     Object.assign(attrs2, {
       ref,
@@ -1414,32 +1584,32 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
       ),
       style: props.style
     }),
-    h4(
+    h5(
       "div",
       { className: "aura-page-header__text" },
-      props.breadcrumb != null && props.breadcrumb !== false ? h4("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
-      shown(eyebrow) ? plainEyebrow ? h4("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h4("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
-      shown(props.titleAddon) ? h4(
+      props.breadcrumb != null && props.breadcrumb !== false ? h5("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
+      shown(eyebrow) ? plainEyebrow ? h5("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h5("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
+      shown(props.titleAddon) ? h5(
         "div",
         { className: "aura-page-header__title-row" },
         heading,
-        h4("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
+        h5("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
       ) : heading,
-      shown(props.subtitle) ? h4("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-      props.meta != null && props.meta !== false ? h4("div", { className: "aura-page-header__meta" }, props.meta) : null
+      shown(props.subtitle) ? h5("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
+      props.meta != null && props.meta !== false ? h5("div", { className: "aura-page-header__meta" }, props.meta) : null
     ),
-    props.actions != null && props.actions !== false ? h4(
+    props.actions != null && props.actions !== false ? h5(
       "div",
       { className: "aura-page-header__actions" },
-      bar && props.actionsStatus != null && props.actionsStatus !== false ? h4("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
+      bar && props.actionsStatus != null && props.actionsStatus !== false ? h5("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
       props.actions
     ) : null
   );
 });
 
 // src/tiles.tsx
-import * as React6 from "react";
-var h5 = React6.createElement;
+import * as React7 from "react";
+var h6 = React7.createElement;
 var STATUS_ICON = {
   down: IconCircleAlert,
   problem: IconTriangleAlert,
@@ -1472,7 +1642,7 @@ function attrs(props) {
   });
   return out;
 }
-var comma = h5("span", { className: "aura-status-tile__sep" }, ",");
+var comma = h6("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)
@@ -1488,43 +1658,43 @@ function statusTileElement(props, ref, Link, t, titleRef) {
   };
   const hasValue = has(props.value), hasMeta = has(props.meta);
   const Tag = props.href ? Link : "div";
-  return h5(
+  return h6(
     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(
+    h6(
       "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(
+      h6(Icon, { name: h6(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
+      h6("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h6("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
+      hasValue ? h6(
         "span",
         { className: cx("aura-status-tile__value", "is-" + valueTone) },
         props.value,
         hasMeta || markers.length ? comma : null
       ) : null
     ),
-    hasMeta || markers.length ? h5(
+    hasMeta || markers.length ? h6(
       "span",
       { className: "aura-status-tile__foot" },
-      hasMeta ? h5("span", { className: "aura-status-tile__meta" }, props.meta, markers.length ? comma : null) : null,
-      markers.length ? h5(
+      hasMeta ? h6("span", { className: "aura-status-tile__meta" }, props.meta, markers.length ? comma : null) : null,
+      markers.length ? h6(
         "span",
         { className: "aura-status-tile__markers" },
         markers.map(function(m, i) {
-          return h5(
+          return h6(
             "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 ? "," : ""))
+            h6(Icon, { name: m.icon, size: 14 }),
+            h6("span", { className: "aura-sr-only" }, m.label + (i < markers.length - 1 ? "," : ""))
           );
         })
       ) : null
@@ -1534,13 +1704,13 @@ function statusTileElement(props, ref, Link, t, titleRef) {
 function ServerStatusTile(props) {
   return statusTileElement(props, void 0, props.linkComponent || "a", STRINGS.en);
 }
-var TileGrid = React6.forwardRef(function TileGrid2(props, ref) {
+var TileGrid = React7.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(
+  return h6(
     "ul",
     Object.assign(attrs(props), {
       ref,
@@ -1550,16 +1720,16 @@ var TileGrid = React6.forwardRef(function TileGrid2(props, ref) {
     }),
     /* 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);
+      return h6("li", { key: React7.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)
+  React7.Children.toArray(children).forEach(function(c) {
+    if (React7.isValidElement(c) && c.type === React7.Fragment)
       flat(c.props.children).forEach(function(x) {
-        out.push(React6.isValidElement(x) ? React6.cloneElement(x, { key: String(c.key) + "/" + String(x.key) }) : x);
+        out.push(React7.isValidElement(x) ? React7.cloneElement(x, { key: String(c.key) + "/" + String(x.key) }) : x);
       });
     else if (c !== "") out.push(c);
   });
@@ -1573,7 +1743,7 @@ function r(n3) {
 function num(v) {
   return typeof v === "number" && isFinite(v) ? v : null;
 }
-var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
+var Sparkline = React7.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);
@@ -1603,7 +1773,7 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
   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 }));
+    if (!prev && !next) dots.push(h6("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";
@@ -1613,10 +1783,10 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
       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 }));
+        fails.push(h6("rect", { key: "f" + i, x: r(left), y: 0, width: r(right - left), height: H }));
       } else
         fails.push(
-          h5("rect", {
+          h6("rect", {
             key: "f" + i,
             x: r(Math.max(0, Math.min(W - 1.5, x(i) - 0.75))),
             y: H - 6,
@@ -1626,7 +1796,7 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
         );
     });
   const named = !!props.label;
-  return h5(
+  return h6(
     "svg",
     Object.assign(attrs(props), {
       ref,
@@ -1639,10 +1809,10 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
       "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
+    fails.length && mode === "band" ? h6("g", { className: "aura-sparkline__band" }, fails) : null,
+    d ? h6("path", { className: "aura-sparkline__line", d }) : null,
+    dots.length ? h6("g", { className: "aura-sparkline__dots" }, dots) : null,
+    fails.length && mode === "ticks" ? h6("g", { className: "aura-sparkline__ticks" }, fails) : null
   );
 });
 export {
@@ -1659,6 +1829,7 @@ export {
   ServerStat as Stat,
   ServerStatusPill as StatusPill,
   ServerStatusTile as StatusTile,
+  TableSkeleton,
   TileGrid,
   scale as brandScale,
   breakpoints,

package/dist/styles.css

@@ -105,7 +105,10 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   background: var(--aura-bg-surface);
   color: var(--aura-fg-primary);
 }
-.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; height: var(--aura-table-h, auto); }
+/* 5.51 (Chamber-OS 163): only the sideways axis is contained (a trackpad swipe in a wide grid never goes back a page);
+ * a vertical wheel over a grid that scrolls sideways still scrolls the page, and a fixed-height grid scrolls inside
+ * first, then chains to the page at its end. */
+.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; height: var(--aura-table-h, auto); }
 /* 5.30: more columns past the end edge — a soft shadow over the grid's end edge (not over its scrollbars, its footer
  * or the column button), so it reads as scrolling sideways. JavaScript places it (top, height, scrollbar inset). */
 .aura-table__edge {
@@ -440,6 +443,13 @@ a.aura-icon-btn { text-decoration: none; }
   background: var(--aura-status-neutral-bg);
   color: var(--aura-status-neutral-fg);
 }
+/* 5.51 (Chamber-OS 158, addendum 61): wrap — the words break inside the pill when its box is narrower; the icon stays
+ * beside the first line. Corners are aura-radius-lg (16px), not full: on one line (20px tall) that still clamps to fully
+ * round ends, and a wrapped pill is a rounded rectangle, not a tall lozenge. */
+.aura-pill.is-wrap { align-items: flex-start; white-space: normal; border-radius: var(--aura-radius-lg); }
+.aura-pill.is-wrap > .aura-icon { margin-top: calc((max(16px, 1rem) - 12px) / 2); }
+.aura-pill.is-wrap:lang(th) > .aura-icon { margin-top: calc((max(18px, 1.125rem) - 12px) / 2); }
+.aura-pill__text { min-width: 0; overflow-wrap: anywhere; }
 .aura-pill--progress { background: var(--aura-status-progress-bg); color: var(--aura-status-progress-fg); }
 .aura-pill--ready { background: var(--aura-status-ready-bg); color: var(--aura-status-ready-fg); }
 .aura-pill--warning { background: var(--aura-status-warning-bg); color: var(--aura-status-warning-fg); }
@@ -529,9 +539,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-input__suffix { padding: 0 var(--aura-space-3) 0 0; color: var(--aura-fg-secondary); font-size: max(13px, .8125rem); white-space: nowrap; }
 .aura-field.is-invalid .aura-input, .aura-field.is-invalid .aura-textarea { border-color: var(--aura-border-danger); }
 /* 5.50 (Chamber-OS 156): a control the page marks aria-invalid="true" itself gets the same edge, message or not (a
- * disabled field keeps its disabled edge, as with is-invalid). */
-.aura-field:not(.is-disabled) .aura-input:has(> .aura-input__control[aria-invalid="true"]),
-.aura-field:not(.is-disabled) .aura-textarea[aria-invalid="true"] { border-color: var(--aura-border-danger); }
+ * disabled field keeps its disabled edge, as with is-invalid; 5.51: so does a disabled control inside an enabled custom
+ * Field). */
+.aura-field:not(.is-disabled) .aura-input:has(> .aura-input__control[aria-invalid="true"]:not(:disabled)),
+.aura-field:not(.is-disabled) .aura-textarea[aria-invalid="true"]:not(:disabled) { border-color: var(--aura-border-danger); }
 .aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); }
 .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
 /* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
@@ -1864,6 +1875,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
  * (So a FilterBar with only chips needs a width from its parent — it is full width in a block.) */
 .aura-filterbar__chips { contain: inline-size; }
 .aura-filterbar__chips > .aura-tag .aura-tag__text { max-width: none; min-width: 0; }
+/* 5.51 (Chamber-OS 160): a toggle Tag among FilterBar's controls (or in its sheet) is a filter, not a label to cut:
+ * from 640px it shows its whole text, cut only when wider than the bar. Below 640px (outside the sheet) the 24ch cap
+ * and its tip stay. */
+@media (min-width: 640px) {
+  .aura-filterbar .aura-tag.is-selectable { max-width: 100%; min-width: 0; }
+  .aura-filterbar .aura-tag.is-selectable .aura-tag__text { max-width: none; min-width: 0; }
+}
+/* …and in the Filters sheet at any width: it is full width, with every control labelled. */
+.aura-filterbar--sheet .aura-tag.is-selectable { max-width: 100%; min-width: 0; }
+.aura-filterbar--sheet .aura-tag.is-selectable .aura-tag__text { max-width: none; min-width: 0; }
 .aura-filterbar__clear {
   border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
   font: inherit; font-size: max(13px, .8125rem); font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
@@ -2147,6 +2168,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     var(--aura-tbl-bg, var(--aura-bg-surface));
 }
 .aura-tbl { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: max(13px, .8125rem); line-height: max(20px, 1.25rem); }
+/* 5.52 (Chamber-OS 164): a loading Table has no content to size its columns from, so they take the head's widths
+ * (or even shares); each placeholder bar sits on the row's 20px line, so a skeleton row is as tall as a text row. */
+.aura-tbl--skeleton { table-layout: fixed; }
+.aura-tbl__row--skeleton .aura-skel--text { display: block; margin: 5px 0; margin: calc((1lh - 10px) / 2) 0; }
+.aura-tbl__row--skeleton .aura-tbl__td.is-end > .aura-skel--text { margin-inline-start: auto; }
+.aura-tbl__row--skeleton .aura-tbl__td.is-end > .aura-skel-lines { align-items: flex-end; }
 .aura-tbl__caption { caption-side: top; padding: var(--aura-space-4) var(--aura-space-6) var(--aura-space-3); text-align: left; font-size: max(14px, .875rem); font-weight: 600; }
 /* 5.30: from 640px a cell is at least 10ch wide, so the table never squeezes a column to one letter; a longer word (an
  * email, a URL) still breaks to fit instead of widening the table. Phones keep fitting the box: use stackBelow there. */

package/dist/styles.layer.css

@@ -107,7 +107,10 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   background: var(--aura-bg-surface);
   color: var(--aura-fg-primary);
 }
-.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; height: var(--aura-table-h, auto); }
+/* 5.51 (Chamber-OS 163): only the sideways axis is contained (a trackpad swipe in a wide grid never goes back a page);
+ * a vertical wheel over a grid that scrolls sideways still scrolls the page, and a fixed-height grid scrolls inside
+ * first, then chains to the page at its end. */
+.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; height: var(--aura-table-h, auto); }
 /* 5.30: more columns past the end edge — a soft shadow over the grid's end edge (not over its scrollbars, its footer
  * or the column button), so it reads as scrolling sideways. JavaScript places it (top, height, scrollbar inset). */
 .aura-table__edge {
@@ -442,6 +445,13 @@ a.aura-icon-btn { text-decoration: none; }
   background: var(--aura-status-neutral-bg);
   color: var(--aura-status-neutral-fg);
 }
+/* 5.51 (Chamber-OS 158, addendum 61): wrap — the words break inside the pill when its box is narrower; the icon stays
+ * beside the first line. Corners are aura-radius-lg (16px), not full: on one line (20px tall) that still clamps to fully
+ * round ends, and a wrapped pill is a rounded rectangle, not a tall lozenge. */
+.aura-pill.is-wrap { align-items: flex-start; white-space: normal; border-radius: var(--aura-radius-lg); }
+.aura-pill.is-wrap > .aura-icon { margin-top: calc((max(16px, 1rem) - 12px) / 2); }
+.aura-pill.is-wrap:lang(th) > .aura-icon { margin-top: calc((max(18px, 1.125rem) - 12px) / 2); }
+.aura-pill__text { min-width: 0; overflow-wrap: anywhere; }
 .aura-pill--progress { background: var(--aura-status-progress-bg); color: var(--aura-status-progress-fg); }
 .aura-pill--ready { background: var(--aura-status-ready-bg); color: var(--aura-status-ready-fg); }
 .aura-pill--warning { background: var(--aura-status-warning-bg); color: var(--aura-status-warning-fg); }
@@ -531,9 +541,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-input__suffix { padding: 0 var(--aura-space-3) 0 0; color: var(--aura-fg-secondary); font-size: max(13px, .8125rem); white-space: nowrap; }
 .aura-field.is-invalid .aura-input, .aura-field.is-invalid .aura-textarea { border-color: var(--aura-border-danger); }
 /* 5.50 (Chamber-OS 156): a control the page marks aria-invalid="true" itself gets the same edge, message or not (a
- * disabled field keeps its disabled edge, as with is-invalid). */
-.aura-field:not(.is-disabled) .aura-input:has(> .aura-input__control[aria-invalid="true"]),
-.aura-field:not(.is-disabled) .aura-textarea[aria-invalid="true"] { border-color: var(--aura-border-danger); }
+ * disabled field keeps its disabled edge, as with is-invalid; 5.51: so does a disabled control inside an enabled custom
+ * Field). */
+.aura-field:not(.is-disabled) .aura-input:has(> .aura-input__control[aria-invalid="true"]:not(:disabled)),
+.aura-field:not(.is-disabled) .aura-textarea[aria-invalid="true"]:not(:disabled) { border-color: var(--aura-border-danger); }
 .aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); }
 .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
 /* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
@@ -1866,6 +1877,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
  * (So a FilterBar with only chips needs a width from its parent — it is full width in a block.) */
 .aura-filterbar__chips { contain: inline-size; }
 .aura-filterbar__chips > .aura-tag .aura-tag__text { max-width: none; min-width: 0; }
+/* 5.51 (Chamber-OS 160): a toggle Tag among FilterBar's controls (or in its sheet) is a filter, not a label to cut:
+ * from 640px it shows its whole text, cut only when wider than the bar. Below 640px (outside the sheet) the 24ch cap
+ * and its tip stay. */
+@media (min-width: 640px) {
+  .aura-filterbar .aura-tag.is-selectable { max-width: 100%; min-width: 0; }
+  .aura-filterbar .aura-tag.is-selectable .aura-tag__text { max-width: none; min-width: 0; }
+}
+/* …and in the Filters sheet at any width: it is full width, with every control labelled. */
+.aura-filterbar--sheet .aura-tag.is-selectable { max-width: 100%; min-width: 0; }
+.aura-filterbar--sheet .aura-tag.is-selectable .aura-tag__text { max-width: none; min-width: 0; }
 .aura-filterbar__clear {
   border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
   font: inherit; font-size: max(13px, .8125rem); font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
@@ -2149,6 +2170,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     var(--aura-tbl-bg, var(--aura-bg-surface));
 }
 .aura-tbl { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: max(13px, .8125rem); line-height: max(20px, 1.25rem); }
+/* 5.52 (Chamber-OS 164): a loading Table has no content to size its columns from, so they take the head's widths
+ * (or even shares); each placeholder bar sits on the row's 20px line, so a skeleton row is as tall as a text row. */
+.aura-tbl--skeleton { table-layout: fixed; }
+.aura-tbl__row--skeleton .aura-skel--text { display: block; margin: 5px 0; margin: calc((1lh - 10px) / 2) 0; }
+.aura-tbl__row--skeleton .aura-tbl__td.is-end > .aura-skel--text { margin-inline-start: auto; }
+.aura-tbl__row--skeleton .aura-tbl__td.is-end > .aura-skel-lines { align-items: flex-end; }
 .aura-tbl__caption { caption-side: top; padding: var(--aura-space-4) var(--aura-space-6) var(--aura-space-3); text-align: left; font-size: max(14px, .875rem); font-weight: 600; }
 /* 5.30: from 640px a cell is at least 10ch wide, so the table never squeezes a column to one letter; a longer word (an
  * email, a URL) still breaks to fit instead of widening the table. Phones keep fitting the box: use stackBelow there. */

package/package.json

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