@jirawatpyk/aura-react 5.58.0 → 5.59.0

package/README.md

@@ -186,6 +186,10 @@ 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.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);

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);

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

@@ -1946,6 +1946,18 @@ 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
+ * centred and its look unchanged — for a link on its own line, not mid-sentence. On a `<button>` (an action that
+ * opens something) the button's chrome is reset, so it looks like the link; 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

@@ -1946,6 +1946,18 @@ 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
+ * centred and its look unchanged — for a link on its own line, not mid-sentence. On a `<button>` (an action that
+ * opens something) the button's chrome is reset, so it looks like the link; 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,18 @@ 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
+ * centred and its look unchanged — for a link on its own line, not mid-sentence. On a `<button>` (an action that
+ * opens something) the button's chrome is reset, so it looks like the link; 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,18 @@ 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
+ * centred and its look unchanged — for a link on its own line, not mid-sentence. On a `<button>` (an action that
+ * opens something) the button's chrome is reset, so it looks like the link; 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,45 @@ 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) ---------- */
+/* linkClass(): a link that reads as text — on an <a> or a <button> alike (a button's chrome is reset: no fill, border
+ * or padding, the surrounding font and line height, a pointer). accent (default) or inherit colour; underlined, or
+ * only on hover; hover thickens an underline that is always there. Focus is Button's ring. With touchHeight it is at
+ * least 44×44 below 640px or on a coarse pointer (or always), the text unchanged — the box grows around the label,
+ * centred. For a link on its own line (a row title, "+ Create new event"), not mid-sentence. */
+.aura-link {
+  -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; cursor: pointer;
+  color: var(--aura-fg-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
+  border-radius: var(--aura-radius-xs);
+}
+.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 { display: inline-flex; align-items: center; justify-content: center; min-height: var(--aura-touch-target); min-width: var(--aura-touch-target); }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-link.aura-link--touch { display: inline-flex; align-items: center; justify-content: center; 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; }
 

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,45 @@ 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) ---------- */
+/* linkClass(): a link that reads as text — on an <a> or a <button> alike (a button's chrome is reset: no fill, border
+ * or padding, the surrounding font and line height, a pointer). accent (default) or inherit colour; underlined, or
+ * only on hover; hover thickens an underline that is always there. Focus is Button's ring. With touchHeight it is at
+ * least 44×44 below 640px or on a coarse pointer (or always), the text unchanged — the box grows around the label,
+ * centred. For a link on its own line (a row title, "+ Create new event"), not mid-sentence. */
+.aura-link {
+  -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; cursor: pointer;
+  color: var(--aura-fg-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
+  border-radius: var(--aura-radius-xs);
+}
+.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 { display: inline-flex; align-items: center; justify-content: center; min-height: var(--aura-touch-target); min-width: var(--aura-touch-target); }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-link.aura-link--touch { display: inline-flex; align-items: center; justify-content: center; 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; }
 

package/package.json

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