@jirawatpyk/aura-react 5.58.0 → 5.60.0

package/README.md

@@ -186,6 +186,19 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.60 — Chamber-OS addenda 74–76 (#173, #174, #175)
+
+- **`linkClass` lays a link out at every width:** a link with `touchHeight` — and any `<button>` or `<summary>` with the class — is now `inline-flex` with a mouse too, not only under the touch query: vertically centred, a 4px gap before an icon, `min-width: 0` and `max-width: 100%`, so `<a className={linkClass({ touchHeight: true })}><span className="truncate">…</span><Icon/></a>` truncates inside its parent with a visible gap, and a `<summary>` is as wide as its content (its marker is hidden; add your own chevron). Under the touch query it is still at least 44×44. A plain `<a>` without `touchHeight` stays inline, so it still wraps in a sentence; a `touchHeight` link whose label wraps now wraps inside its own box (its second line starts under the link, not at the line's start), as it already did on touch. The layout is one class strong, so it beats an element reset (`summary { display: list-item }`) and your own `hidden` / `block` class wins when it comes later (or in a later layer, e.g. with `styles.layer.css` under Tailwind v4). A link with an icon as a direct child is centred on the line (within 2px; an icon inside a wrapper span isn't detected). The `<button>` reset is one class strong too, so a margin, padding or font class of yours on the button wins when it comes later. In a DataTable grid cell a touch link stays inline (no icon gap) so the cell keeps its ellipsis; in DataTable cards it is laid out under the touch query.
+- **Label at the start:** the 44px box keeps its label at the start (`justify-content: flex-start`, was centred), so a link stretched by a flex column or a grid cell no longer centres its text away from the column. A short label in its own 44px box sits at the box's start.
+- **A type class on the link applies:** `font: inherit` and the other resets now apply to the `<button>` form only, so `<a className={linkClass() + ' aura-text-label'}>` keeps the label scale (13px/500). On a `<button>`, a type class of yours wins when it comes after AURA's styles (or in a later layer); otherwise put it on a child.
+- Drop the hand-written `inline-flex items-center`, `min-w-0`, `self-start` / `justify-start` and `flex w-fit` added for 5.59.
+- **Table cells wrap words whole** (#174): a static Table's cells use `overflow-wrap: break-word` instead of `anywhere`, which made every cell's min-content one character wide, so an auto-layout table squeezed a text column until "Diamond Partnership" broke inside a word. Words now wrap whole. **Change:** in a table a long unbroken string (an email, a URL) widens its column instead of breaking — the table then scrolls sideways in its box (in stacked cards it still breaks to fit). A `stickyHeader` table that starts scrolling sideways this way also stops pinning its header to the page (see #175). Give such a cell `wrap="anywhere"` (new on `Td` and `Th`) for the old behaviour, or `wrap="none"` to keep a cell on one line (a document number; stacked cards still wrap). Drop `[overflow-wrap:normal]` stand-ins.
+- **A wide sticky header sits above the first row** (#175): with `stickyHeader`, a Table wider than its box (it scrolls sideways there) pinned its header to that box with the page's offset (`--aura-shell-bar-height`), so the header covered the first row. Such a table can't pin to the page anyway; its header now sits in flow above the first row.
+
+## 5.59 — Chamber-OS addendum 73 (#172)
+
+- **`linkClass()` — a text link with the touch rule:** the class list for a link that reads as text, not a button, from the root and `/server` (as `buttonClass`): `<Link href={url} className={linkClass({ touchHeight: true })}>INV-2041</Link>`. `tone`: `accent` (default, the link colour) or `inherit`; `underline`: `always` (default) or `hover`; `className` is appended. With `touchHeight` the link is at least 44×44 below 640px or on a coarse pointer (`'always'`: at every width) — `inline-flex`, the label centred — with no fill, border or padding, so it looks the same; with a mouse from 640px its size and line height don't change. It works on a `<button>` too (an action that opens a modal rather than navigating): the button's chrome is reset — no fill, border or padding, the surrounding font and line height, a pointer — so a button and an `<a>` with the class look the same at rest, on hover (the underline thickens, or appears with `underline: 'hover'`) and on keyboard focus (Button's focus ring). The button form is for an action on its own line: a `<button>` never wraps mid-sentence the way an `<a>` does. In a DataTable's grid cells (any `rowHeight`) the row is the tap target and the cell truncates with an ellipsis, so there the link stays inline whatever `touchHeight` says (and a utility class can't override it); in its stacked cards (`stackBelow`) the 44px target applies again. Use it on a link that stands on its own line (a row title, a "View all"); in the middle of a sentence a 44px box would open up the line, so leave `touchHeight` off there. Drop hand-written `inline-flex items-center max-sm:min-h-11 pointer-coarse:min-h-11`.
+
 ## 5.58 — Chamber-OS addendum 72 (#171)
 
 - **A short touchHeight tab is a 44×44 target:** with `touchHeight`, below 640px or on a coarse pointer (or always, with `'always'`) each tab is now at least 44px wide as well as 44px tall, its label centred, so a one-word tab such as "Tax" is 44×44. Tabs with longer labels keep their width and the gap between tabs is unchanged; a short tab's underline spans its 44px. With a mouse from 640px nothing changes. Inside its breakpoint a `fullWidth` row sizes its own tabs (equal shares, 12px either side of the label), so it is unchanged there; a one-letter tab in a full-width row that overflows and scrolls can stay under 44px wide.

package/dist/aura.bundle.js

@@ -134,6 +134,7 @@ window.Aura = (() => {
     formatBytes: () => formatBytes,
     formatDate: () => formatDate,
     iconNames: () => iconNames,
+    linkClass: () => linkClass,
     parseDate: () => parseDate,
     parseTime: () => parseTime,
     registerIcons: () => registerIcons,
@@ -883,6 +884,15 @@ window.Aura = (() => {
       opts.className
     );
   }
+  function linkClass(opts = {}) {
+    return cx(
+      "aura-link",
+      opts.tone === "inherit" && "aura-link--inherit",
+      opts.underline === "hover" && "aura-link--hover-underline",
+      opts.touchHeight === "always" ? "aura-link--touch-always" : opts.touchHeight && "aura-link--touch",
+      opts.className
+    );
+  }
 
   // src/locale.tsx
   var React5 = __toESM(require_react(), 1);
@@ -8999,12 +9009,15 @@ window.Aura = (() => {
       align === "end" && "is-end",
       align === "center" && "is-center",
       p.numeric && "is-numeric",
+      /* 5.60 (Chamber-OS 174) */
+      p.wrap === "anywhere" && "is-wrap-anywhere",
+      p.wrap === "none" && "is-nowrap",
       p.mono && "aura-table__mono",
       p.className
     );
   }
   var Th = React52.forwardRef(function Th2(props, ref) {
-    const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, ...rest } = props;
+    const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, wrap, ...rest } = props;
     const stacked = React52.useContext(StackLabels) != null;
     return /* @__PURE__ */ React52.createElement(
       "th",
@@ -9019,7 +9032,7 @@ window.Aura = (() => {
     );
   });
   var Td = React52.forwardRef(function Td2(props, ref) {
-    const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, ...rest } = props;
+    const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, wrap, ...rest } = props;
     const labels = React52.useContext(StackLabels), col = React52.useContext(ColumnIndex);
     const slot = labels && (card === "title" || card === "action") ? card : void 0;
     const shown = labels && !slot ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;

package/dist/cjs/index.cjs

@@ -115,6 +115,7 @@ __export(index_exports, {
   formatBytes: () => formatBytes,
   formatDate: () => formatDate,
   iconNames: () => iconNames,
+  linkClass: () => linkClass,
   parseDate: () => parseDate,
   parseTime: () => parseTime,
   registerIcons: () => registerIcons,
@@ -865,6 +866,15 @@ function buttonClass(opts = {}) {
     opts.className
   );
 }
+function linkClass(opts = {}) {
+  return cx(
+    "aura-link",
+    opts.tone === "inherit" && "aura-link--inherit",
+    opts.underline === "hover" && "aura-link--hover-underline",
+    opts.touchHeight === "always" ? "aura-link--touch-always" : opts.touchHeight && "aura-link--touch",
+    opts.className
+  );
+}
 
 // src/locale.tsx
 var React5 = __toESM(require("react"), 1);
@@ -8981,12 +8991,15 @@ function cellClass(base, p) {
     align === "end" && "is-end",
     align === "center" && "is-center",
     p.numeric && "is-numeric",
+    /* 5.60 (Chamber-OS 174) */
+    p.wrap === "anywhere" && "is-wrap-anywhere",
+    p.wrap === "none" && "is-nowrap",
     p.mono && "aura-table__mono",
     p.className
   );
 }
 var Th = React52.forwardRef(function Th2(props, ref) {
-  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, wrap, ...rest } = props;
   const stacked = React52.useContext(StackLabels) != null;
   return /* @__PURE__ */ React52.createElement(
     "th",
@@ -9001,7 +9014,7 @@ var Th = React52.forwardRef(function Th2(props, ref) {
   );
 });
 var Td = React52.forwardRef(function Td2(props, ref) {
-  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, wrap, ...rest } = props;
   const labels = React52.useContext(StackLabels), col = React52.useContext(ColumnIndex);
   const slot = labels && (card === "title" || card === "action") ? card : void 0;
   const shown = labels && !slot ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;

package/dist/esm/Table.js

@@ -234,12 +234,15 @@ function cellClass(base, p) {
     align === "end" && "is-end",
     align === "center" && "is-center",
     p.numeric && "is-numeric",
+    /* 5.60 (Chamber-OS 174) */
+    p.wrap === "anywhere" && "is-wrap-anywhere",
+    p.wrap === "none" && "is-nowrap",
     p.mono && "aura-table__mono",
     p.className
   );
 }
 const Th = React.forwardRef(function Th2(props, ref) {
-  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, wrap, ...rest } = props;
   const stacked = React.useContext(StackLabels) != null;
   return /* @__PURE__ */ React.createElement(
     "th",
@@ -254,7 +257,7 @@ const Th = React.forwardRef(function Th2(props, ref) {
   );
 });
 const Td = React.forwardRef(function Td2(props, ref) {
-  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, wrap, ...rest } = props;
   const labels = React.useContext(StackLabels), col = React.useContext(ColumnIndex);
   const slot = labels && (card === "title" || card === "action") ? card : void 0;
   const shown = labels && !slot ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;

package/dist/esm/display.js

@@ -255,6 +255,15 @@ function buttonClass(opts = {}) {
     opts.className
   );
 }
+function linkClass(opts = {}) {
+  return cx(
+    "aura-link",
+    opts.tone === "inherit" && "aura-link--inherit",
+    opts.underline === "hover" && "aura-link--hover-underline",
+    opts.touchHeight === "always" ? "aura-link--touch-always" : opts.touchHeight && "aura-link--touch",
+    opts.className
+  );
+}
 function ServerAlert(props) {
   return alertElement(props, void 0, null);
 }
@@ -291,6 +300,7 @@ export {
   buttonClass,
   cardElement,
   emptyStateElement,
+  linkClass,
   statElement,
   statusPillElement
 };

package/dist/esm/index.js

@@ -27,7 +27,7 @@ import { Tooltip } from "./Tooltip.js";
 import { Dialog, Drawer, useDialogClose } from "./Dialog.js";
 import { DataTable } from "./DataTable.js";
 import { Card } from "./Card.js";
-import { buttonClass } from "./display.js";
+import { buttonClass, linkClass } from "./display.js";
 import { Tabs } from "./Tabs.js";
 import { SideNav } from "./SideNav.js";
 import { Breadcrumb } from "./Breadcrumb.js";
@@ -149,6 +149,7 @@ export {
   formatBytes,
   formatDate,
   iconNames,
+  linkClass,
   parseDate,
   parseTime,
   registerIcons,

package/dist/index.d.cts

@@ -1435,6 +1435,11 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	numeric?: boolean | undefined;
 	/** IDs and codes in the mono face. */
 	mono?: boolean | undefined;
+	/** How the cell's text wraps (5.60, Chamber-OS 174). Default `word` (`overflow-wrap: break-word`): between words; a
+	 * long unbroken string widens its column (the table then scrolls sideways; in stacked cards it breaks to fit).
+	 * `anywhere`: may break inside a word, so the column can shrink (URLs, emails; the rule before 5.60). `none`: on one
+	 * line (a document number); stacked cards still wrap. */
+	wrap?: "word" | "anywhere" | "none" | undefined;
 	/** Th only. Default `col`. */
 	scope?: "col" | "row" | "colgroup" | "rowgroup" | undefined;
 	/** The label this cell shows when its table is stacked (`stackBelow`, 5.8). Default: the matching header's text. */
@@ -1946,6 +1951,20 @@ export declare function buttonClass(opts?: {
 	touchHeight?: boolean | undefined;
 	className?: string | undefined;
 }): string;
+/** The class list of a text link (5.59, Chamber-OS 172) — a link that reads as text, not a button. Put it on your own
+ * `<a>` or `<Link>`, also in a Server Component: `<Link href={url} className={linkClass({ touchHeight: true })}>`.
+ * `tone`: `accent` (default) or `inherit` (the surrounding colour). `underline`: `always` (default) or `hover`.
+ * `touchHeight`: at least 44×44 below 640px or on a coarse pointer (`true`) or at every width (`'always'`), the label
+ * at the start and its look unchanged — for a link on its own line, not mid-sentence. 5.60: with `touchHeight` (and
+ * on a `<button>` or `<summary>`) it is `inline-flex` at every width — a 4px gap before an icon, `min-width: 0` so a
+ * truncating child ends in an ellipsis. On a `<button>` (an action that opens something) the button's chrome is
+ * reset, so it looks like the link; put a type class on a child there. Hover and Button's focus ring included. */
+export declare function linkClass(opts?: {
+	tone?: "accent" | "inherit" | undefined;
+	underline?: "always" | "hover" | undefined;
+	touchHeight?: boolean | "always" | undefined;
+	className?: string | undefined;
+}): string;
 export declare const Alert: React$1.ForwardRefExoticComponent<AlertProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Show a toast; returns its id. Needs `<Toaster />` mounted once. */
 export declare function toast(opts: ToastOptions | string): string;

package/dist/index.d.ts

@@ -1435,6 +1435,11 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	numeric?: boolean | undefined;
 	/** IDs and codes in the mono face. */
 	mono?: boolean | undefined;
+	/** How the cell's text wraps (5.60, Chamber-OS 174). Default `word` (`overflow-wrap: break-word`): between words; a
+	 * long unbroken string widens its column (the table then scrolls sideways; in stacked cards it breaks to fit).
+	 * `anywhere`: may break inside a word, so the column can shrink (URLs, emails; the rule before 5.60). `none`: on one
+	 * line (a document number); stacked cards still wrap. */
+	wrap?: "word" | "anywhere" | "none" | undefined;
 	/** Th only. Default `col`. */
 	scope?: "col" | "row" | "colgroup" | "rowgroup" | undefined;
 	/** The label this cell shows when its table is stacked (`stackBelow`, 5.8). Default: the matching header's text. */
@@ -1946,6 +1951,20 @@ export declare function buttonClass(opts?: {
 	touchHeight?: boolean | undefined;
 	className?: string | undefined;
 }): string;
+/** The class list of a text link (5.59, Chamber-OS 172) — a link that reads as text, not a button. Put it on your own
+ * `<a>` or `<Link>`, also in a Server Component: `<Link href={url} className={linkClass({ touchHeight: true })}>`.
+ * `tone`: `accent` (default) or `inherit` (the surrounding colour). `underline`: `always` (default) or `hover`.
+ * `touchHeight`: at least 44×44 below 640px or on a coarse pointer (`true`) or at every width (`'always'`), the label
+ * at the start and its look unchanged — for a link on its own line, not mid-sentence. 5.60: with `touchHeight` (and
+ * on a `<button>` or `<summary>`) it is `inline-flex` at every width — a 4px gap before an icon, `min-width: 0` so a
+ * truncating child ends in an ellipsis. On a `<button>` (an action that opens something) the button's chrome is
+ * reset, so it looks like the link; put a type class on a child there. Hover and Button's focus ring included. */
+export declare function linkClass(opts?: {
+	tone?: "accent" | "inherit" | undefined;
+	underline?: "always" | "hover" | undefined;
+	touchHeight?: boolean | "always" | undefined;
+	className?: string | undefined;
+}): string;
 export declare const Alert: React$1.ForwardRefExoticComponent<AlertProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Show a toast; returns its id. Needs `<Toaster />` mounted once. */
 export declare function toast(opts: ToastOptions | string): string;

package/dist/server/index.cjs

@@ -54,6 +54,7 @@ __export(server_exports, {
   formatBytes: () => formatBytes,
   formatDate: () => formatDate,
   fromISO: () => fromISO,
+  linkClass: () => linkClass,
   parseDate: () => parseDate,
   parseTime: () => parseTime,
   registerIcons: () => registerIcons,
@@ -1411,6 +1412,15 @@ function buttonClass(opts = {}) {
     opts.className
   );
 }
+function linkClass(opts = {}) {
+  return cx(
+    "aura-link",
+    opts.tone === "inherit" && "aura-link--inherit",
+    opts.underline === "hover" && "aura-link--hover-underline",
+    opts.touchHeight === "always" ? "aura-link--touch-always" : opts.touchHeight && "aura-link--touch",
+    opts.className
+  );
+}
 function ServerAlert(props) {
   return alertElement(props, void 0, null);
 }

package/dist/server/index.d.cts

@@ -496,6 +496,20 @@ export declare function buttonClass(opts?: {
 	touchHeight?: boolean | undefined;
 	className?: string | undefined;
 }): string;
+/** The class list of a text link (5.59, Chamber-OS 172) — a link that reads as text, not a button. Put it on your own
+ * `<a>` or `<Link>`, also in a Server Component: `<Link href={url} className={linkClass({ touchHeight: true })}>`.
+ * `tone`: `accent` (default) or `inherit` (the surrounding colour). `underline`: `always` (default) or `hover`.
+ * `touchHeight`: at least 44×44 below 640px or on a coarse pointer (`true`) or at every width (`'always'`), the label
+ * at the start and its look unchanged — for a link on its own line, not mid-sentence. 5.60: with `touchHeight` (and
+ * on a `<button>` or `<summary>`) it is `inline-flex` at every width — a 4px gap before an icon, `min-width: 0` so a
+ * truncating child ends in an ellipsis. On a `<button>` (an action that opens something) the button's chrome is
+ * reset, so it looks like the link; put a type class on a child there. Hover and Button's focus ring included. */
+export declare function linkClass(opts?: {
+	tone?: "accent" | "inherit" | undefined;
+	underline?: "always" | "hover" | undefined;
+	touchHeight?: boolean | "always" | undefined;
+	className?: string | undefined;
+}): string;
 declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;
 declare function ServerCard(props: CardProps): React$1.ReactElement;
 declare function ServerStatusPill(props: StatusPillProps): React$1.ReactElement;

package/dist/server/index.d.ts

@@ -496,6 +496,20 @@ export declare function buttonClass(opts?: {
 	touchHeight?: boolean | undefined;
 	className?: string | undefined;
 }): string;
+/** The class list of a text link (5.59, Chamber-OS 172) — a link that reads as text, not a button. Put it on your own
+ * `<a>` or `<Link>`, also in a Server Component: `<Link href={url} className={linkClass({ touchHeight: true })}>`.
+ * `tone`: `accent` (default) or `inherit` (the surrounding colour). `underline`: `always` (default) or `hover`.
+ * `touchHeight`: at least 44×44 below 640px or on a coarse pointer (`true`) or at every width (`'always'`), the label
+ * at the start and its look unchanged — for a link on its own line, not mid-sentence. 5.60: with `touchHeight` (and
+ * on a `<button>` or `<summary>`) it is `inline-flex` at every width — a 4px gap before an icon, `min-width: 0` so a
+ * truncating child ends in an ellipsis. On a `<button>` (an action that opens something) the button's chrome is
+ * reset, so it looks like the link; put a type class on a child there. Hover and Button's focus ring included. */
+export declare function linkClass(opts?: {
+	tone?: "accent" | "inherit" | undefined;
+	underline?: "always" | "hover" | undefined;
+	touchHeight?: boolean | "always" | undefined;
+	className?: string | undefined;
+}): string;
 declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;
 declare function ServerCard(props: CardProps): React$1.ReactElement;
 declare function ServerStatusPill(props: StatusPillProps): React$1.ReactElement;

package/dist/server/index.js

@@ -1346,6 +1346,15 @@ function buttonClass(opts = {}) {
     opts.className
   );
 }
+function linkClass(opts = {}) {
+  return cx(
+    "aura-link",
+    opts.tone === "inherit" && "aura-link--inherit",
+    opts.underline === "hover" && "aura-link--hover-underline",
+    opts.touchHeight === "always" ? "aura-link--touch-always" : opts.touchHeight && "aura-link--touch",
+    opts.className
+  );
+}
 function ServerAlert(props) {
   return alertElement(props, void 0, null);
 }
@@ -1858,6 +1867,7 @@ export {
   formatBytes,
   formatDate,
   fromISO,
+  linkClass,
   parseDate,
   parseTime,
   registerIcons,

package/dist/styles.css

@@ -184,7 +184,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   .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)); }
+  .aura-table__td :focus-visible, .aura-table__td .aura-link: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
@@ -1101,6 +1101,63 @@ a.aura-tab { text-decoration: none; }
   .aura-actionbar__start > .aura-icon-btn, .aura-actionbar__start > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
 }
 
+/* ---------- Text link (5.59, Chamber-OS 172; 5.60, 173) ---------- */
+/* linkClass(): a link that reads as text. accent (default) or inherit colour; underlined, or only on hover; hover
+ * thickens an underline that is always there. Focus is Button's ring.
+ * 5.60 (Chamber-OS 173): a link with touchHeight — and any <button> or <summary> with the class — is laid out at every
+ * width, not only under the touch query: inline-flex, centred vertically, a 4px gap before an icon, label at the start,
+ * and min-width 0 / max-width 100% so a truncating child ends in an ellipsis inside its parent. Under the touch query
+ * (or always) it is at least 44×44; a box stretched by its parent keeps its label at the start. A plain <a> without
+ * touchHeight stays inline, so it can wrap in a sentence. The type of an <a> is its own (a type class such as
+ * aura-text-label on it applies); a <button> takes the surrounding font — put a type class on a child there. */
+.aura-link {
+  color: var(--aura-fg-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
+  border-radius: var(--aura-radius-xs); cursor: pointer;
+}
+/* the <button> form: its chrome reset so it looks like the <a>. One class strong (0,1,0), so an app's own margin,
+ * padding or font class on the button wins when it comes later. */
+.aura-link:where(button) {
+  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none;
+  font: inherit; line-height: inherit; letter-spacing: inherit; word-spacing: inherit; text-align: inherit;
+  text-transform: inherit; text-indent: inherit; text-shadow: inherit;
+}
+/* One class's worth of specificity (0,1,0): it beats an element reset (summary { display: list-item }) and ties with
+ * an app's own class (hidden, block), which wins when it comes later or in a later layer. */
+.aura-link:where(.aura-link--touch, .aura-link--touch-always, button, summary) {
+  display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--aura-space-1);
+  min-width: 0; max-width: 100%;
+}
+/* A leading icon would give the box its baseline (the icon's bottom); centre the box on the line instead (about 1px
+ * either way at any line height). */
+.aura-link:where(.aura-link--touch, .aura-link--touch-always, button, summary):has(> svg:first-child) { vertical-align: middle; }
+summary.aura-link { list-style: none; }
+summary.aura-link::-webkit-details-marker { display: none; }
+.aura-link:hover { text-decoration-thickness: 2px; }
+.aura-link--inherit { color: inherit; }
+.aura-link--hover-underline { text-decoration: none; }
+.aura-link--hover-underline:hover { text-decoration: underline; text-decoration-thickness: 1px; }
+.aura-link:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
+.aura-link:disabled, .aura-link[aria-disabled="true"] { opacity: var(--aura-disabled-opacity); cursor: not-allowed; text-decoration-thickness: 1px; }
+.aura-link--hover-underline:is(:disabled, [aria-disabled="true"]):hover { text-decoration: none; }
+/* Forced colours: a <button> would take ButtonText; both forms read as a link. */
+@media (forced-colors: active) {
+  .aura-link { color: LinkText; }
+  .aura-link:is(:disabled, [aria-disabled="true"]) { color: GrayText; }
+}
+.aura-link.aura-link--touch-always { min-height: var(--aura-touch-target); min-width: var(--aura-touch-target); }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-link.aura-link--touch { min-height: var(--aura-touch-target); min-width: var(--aura-touch-target); }
+}
+/* In a DataTable grid cell the row is the target and the cell clips with an ellipsis: the link stays inline there.
+ * In DataTable's stacked cards nothing clips, so the 44px target comes back (container query: right before hydration). */
+.aura-table__td .aura-link.aura-link:is(.aura-link--touch, .aura-link--touch-always) { display: inline; min-height: 0; min-width: 0; }
+@container aura-stack (width < 9999.5px) {
+  .aura-table__td .aura-link.aura-link.aura-link--touch-always { display: inline-flex; min-height: var(--aura-touch-target); min-width: var(--aura-touch-target); }
+  @media (max-width: 639.98px), (pointer: coarse) {
+    .aura-table__td .aura-link.aura-link.aura-link--touch { display: inline-flex; min-height: var(--aura-touch-target); min-width: var(--aura-touch-target); }
+  }
+}
+
 /* ---------- Dropdown ---------- */
 .aura-dropdown { display: inline-flex; }
 
@@ -2214,7 +2271,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .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. */
-.aura-tbl__th, .aura-tbl__td { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+.aura-tbl__th, .aura-tbl__td { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); text-align: left; vertical-align: top; overflow-wrap: break-word; }
+/* 5.60 (Chamber-OS 174): break-word, not anywhere — `anywhere` made every cell's min-content one character wide, so an
+ * auto-layout table squeezed a text column until "Diamond Partnership" broke inside a word. With break-word words wrap
+ * whole; a long unbroken string widens its column (the table scrolls sideways; stacked cards still break it). Td/Th
+ * `wrap`: `anywhere` (the old rule, for URLs and emails that may shrink the column) or `none` (one line; stacked cards
+ * wrap as usual). */
+.aura-tbl__th.is-wrap-anywhere, .aura-tbl__td.is-wrap-anywhere { overflow-wrap: anywhere; }
+.aura-tbl__th.is-nowrap, .aura-tbl__td.is-nowrap { white-space: nowrap; }
 @media (min-width: 640px) { .aura-tbl__th, .aura-tbl__td { min-width: 10ch; } }
 .aura-tbl__th:first-child, .aura-tbl__td:first-child { padding-left: var(--aura-space-6); }
 .aura-tbl__th:last-child, .aura-tbl__td:last-child { padding-right: var(--aura-space-6); }
@@ -2248,6 +2312,10 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   }
 }
 .aura-tbl-wrap.is-sticky-box > .aura-tbl > .aura-tbl__head .aura-tbl__th { top: 0; }
+/* 5.60 (Chamber-OS 175): a table wider than its box scrolls sideways inside it, and that scroll box is what a sticky
+ * header pins to — so the page offset (the shell bar) pushed the header down over the first row. Such a table can't
+ * pin to the page: its header sits in flow (top 0 in a box that doesn't scroll down). */
+.aura-tbl-wrap.is-sticky-page.is-wide > .aura-tbl > .aura-tbl__head .aura-tbl__th { top: 0; }
 .aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
 /* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
  * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */

package/dist/styles.layer.css

@@ -186,7 +186,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   .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)); }
+  .aura-table__td :focus-visible, .aura-table__td .aura-link: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
@@ -1103,6 +1103,63 @@ a.aura-tab { text-decoration: none; }
   .aura-actionbar__start > .aura-icon-btn, .aura-actionbar__start > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
 }
 
+/* ---------- Text link (5.59, Chamber-OS 172; 5.60, 173) ---------- */
+/* linkClass(): a link that reads as text. accent (default) or inherit colour; underlined, or only on hover; hover
+ * thickens an underline that is always there. Focus is Button's ring.
+ * 5.60 (Chamber-OS 173): a link with touchHeight — and any <button> or <summary> with the class — is laid out at every
+ * width, not only under the touch query: inline-flex, centred vertically, a 4px gap before an icon, label at the start,
+ * and min-width 0 / max-width 100% so a truncating child ends in an ellipsis inside its parent. Under the touch query
+ * (or always) it is at least 44×44; a box stretched by its parent keeps its label at the start. A plain <a> without
+ * touchHeight stays inline, so it can wrap in a sentence. The type of an <a> is its own (a type class such as
+ * aura-text-label on it applies); a <button> takes the surrounding font — put a type class on a child there. */
+.aura-link {
+  color: var(--aura-fg-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
+  border-radius: var(--aura-radius-xs); cursor: pointer;
+}
+/* the <button> form: its chrome reset so it looks like the <a>. One class strong (0,1,0), so an app's own margin,
+ * padding or font class on the button wins when it comes later. */
+.aura-link:where(button) {
+  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none;
+  font: inherit; line-height: inherit; letter-spacing: inherit; word-spacing: inherit; text-align: inherit;
+  text-transform: inherit; text-indent: inherit; text-shadow: inherit;
+}
+/* One class's worth of specificity (0,1,0): it beats an element reset (summary { display: list-item }) and ties with
+ * an app's own class (hidden, block), which wins when it comes later or in a later layer. */
+.aura-link:where(.aura-link--touch, .aura-link--touch-always, button, summary) {
+  display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--aura-space-1);
+  min-width: 0; max-width: 100%;
+}
+/* A leading icon would give the box its baseline (the icon's bottom); centre the box on the line instead (about 1px
+ * either way at any line height). */
+.aura-link:where(.aura-link--touch, .aura-link--touch-always, button, summary):has(> svg:first-child) { vertical-align: middle; }
+summary.aura-link { list-style: none; }
+summary.aura-link::-webkit-details-marker { display: none; }
+.aura-link:hover { text-decoration-thickness: 2px; }
+.aura-link--inherit { color: inherit; }
+.aura-link--hover-underline { text-decoration: none; }
+.aura-link--hover-underline:hover { text-decoration: underline; text-decoration-thickness: 1px; }
+.aura-link:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
+.aura-link:disabled, .aura-link[aria-disabled="true"] { opacity: var(--aura-disabled-opacity); cursor: not-allowed; text-decoration-thickness: 1px; }
+.aura-link--hover-underline:is(:disabled, [aria-disabled="true"]):hover { text-decoration: none; }
+/* Forced colours: a <button> would take ButtonText; both forms read as a link. */
+@media (forced-colors: active) {
+  .aura-link { color: LinkText; }
+  .aura-link:is(:disabled, [aria-disabled="true"]) { color: GrayText; }
+}
+.aura-link.aura-link--touch-always { min-height: var(--aura-touch-target); min-width: var(--aura-touch-target); }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-link.aura-link--touch { min-height: var(--aura-touch-target); min-width: var(--aura-touch-target); }
+}
+/* In a DataTable grid cell the row is the target and the cell clips with an ellipsis: the link stays inline there.
+ * In DataTable's stacked cards nothing clips, so the 44px target comes back (container query: right before hydration). */
+.aura-table__td .aura-link.aura-link:is(.aura-link--touch, .aura-link--touch-always) { display: inline; min-height: 0; min-width: 0; }
+@container aura-stack (width < 9999.5px) {
+  .aura-table__td .aura-link.aura-link.aura-link--touch-always { display: inline-flex; min-height: var(--aura-touch-target); min-width: var(--aura-touch-target); }
+  @media (max-width: 639.98px), (pointer: coarse) {
+    .aura-table__td .aura-link.aura-link.aura-link--touch { display: inline-flex; min-height: var(--aura-touch-target); min-width: var(--aura-touch-target); }
+  }
+}
+
 /* ---------- Dropdown ---------- */
 .aura-dropdown { display: inline-flex; }
 
@@ -2216,7 +2273,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .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. */
-.aura-tbl__th, .aura-tbl__td { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+.aura-tbl__th, .aura-tbl__td { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); text-align: left; vertical-align: top; overflow-wrap: break-word; }
+/* 5.60 (Chamber-OS 174): break-word, not anywhere — `anywhere` made every cell's min-content one character wide, so an
+ * auto-layout table squeezed a text column until "Diamond Partnership" broke inside a word. With break-word words wrap
+ * whole; a long unbroken string widens its column (the table scrolls sideways; stacked cards still break it). Td/Th
+ * `wrap`: `anywhere` (the old rule, for URLs and emails that may shrink the column) or `none` (one line; stacked cards
+ * wrap as usual). */
+.aura-tbl__th.is-wrap-anywhere, .aura-tbl__td.is-wrap-anywhere { overflow-wrap: anywhere; }
+.aura-tbl__th.is-nowrap, .aura-tbl__td.is-nowrap { white-space: nowrap; }
 @media (min-width: 640px) { .aura-tbl__th, .aura-tbl__td { min-width: 10ch; } }
 .aura-tbl__th:first-child, .aura-tbl__td:first-child { padding-left: var(--aura-space-6); }
 .aura-tbl__th:last-child, .aura-tbl__td:last-child { padding-right: var(--aura-space-6); }
@@ -2250,6 +2314,10 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   }
 }
 .aura-tbl-wrap.is-sticky-box > .aura-tbl > .aura-tbl__head .aura-tbl__th { top: 0; }
+/* 5.60 (Chamber-OS 175): a table wider than its box scrolls sideways inside it, and that scroll box is what a sticky
+ * header pins to — so the page offset (the shell bar) pushed the header down over the first row. Such a table can't
+ * pin to the page: its header sits in flow (top 0 in a box that doesn't scroll down). */
+.aura-tbl-wrap.is-sticky-page.is-wide > .aura-tbl > .aura-tbl__head .aura-tbl__th { top: 0; }
 .aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
 /* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
  * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */

package/package.json

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