@jirawatpyk/aura-react 5.52.0 → 5.53.0

package/README.md

@@ -186,6 +186,16 @@ 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.53 — Chamber-OS addendum 66 (#165)
+
+- **A phone sheet's footer buttons wrap and are 44px:** below 640px a Dialog's footer stacks its buttons full width, and now they behave as `fullWidth` there (a Button directly in `footer`, or the only Button in a wrapper such as a Tooltip or a menu trigger); a Drawer's footer buttons stay in their row but wrap and are 44px too — a long label (Swedish, Thai) wraps instead of running out, and each is at least 44px tall whatever the density or pointer, with no `touchHeight` needed. From 640px the footer is unchanged: right-aligned, the density's height, one line. Drop any `touchHeight` you added to footer buttons only for this.
+- **`fullWidth="below-sm"` / `"below-md"`** on Button, a link Button and `buttonClass` (so in Server Components too): full width and wrapping, at least 44px tall, only below 640px / 768px (the viewport's); its natural width above — for action rows that stack on phones and sit inline on a desktop. `fullWidth` (`true`) is unchanged. Inside a PageHeader's `actionsFullWidthBelow` row with an IconButton, that row's own sizing wins.
+
+```jsx
+<Button fullWidth="below-sm">Skicka för godkännande igen</Button>
+<Link href="/renew" className={buttonClass({ variant: 'secondary', fullWidth: 'below-sm' })}>Renew</Link>
+```
+
 ## 5.52 — Chamber-OS addendum 65 (#164)
 
 - **`Table loading`** (with `loadingRows`, default 5): the head as given, then placeholder rows in its columns — and below `stackBelow`, the same cards (title and action slots kept). Each column follows its head cell: `skeleton={{ lines: 1 | 2, kind: 'text' | 'pill' | 'action', touch }}` (two lines for a value over its caption, a status pill, or a block as tall as a small Button — 44px on a phone card with `touch`), its width from `skeletonWidth`, else the cell's `width` or `style.width`, else an even share of what is left. The THead must be a direct child (call your head as a function, not your own component) — a dev notice says so — and its first row must be the column row (with grouped headers, columns come from that first row). A head cell whose content isn't plain text (an icon, a sort button) needs `label` for the cards' field labels. TBody and TFoot aren't rendered while loading, so a totals row appears with the data.

package/dist/aura.bundle.js

@@ -831,7 +831,9 @@ window.Aura = (() => {
       "aura-btn",
       "aura-btn--" + (opts.variant || "primary"),
       opts.size === "sm" && "aura-btn--sm",
-      opts.fullWidth && "aura-btn--full",
+      opts.fullWidth && opts.fullWidth !== "below-sm" && opts.fullWidth !== "below-md" && "aura-btn--full",
+      /* 5.53 (Chamber-OS 165): full width on phones only. */
+      (opts.fullWidth === "below-sm" || opts.fullWidth === "below-md") && "aura-btn--full-" + opts.fullWidth,
       opts.touchHeight && "aura-btn--touch",
       opts.loading && "is-loading",
       opts.className

package/dist/cjs/index.cjs

@@ -813,7 +813,9 @@ function buttonClass(opts = {}) {
     "aura-btn",
     "aura-btn--" + (opts.variant || "primary"),
     opts.size === "sm" && "aura-btn--sm",
-    opts.fullWidth && "aura-btn--full",
+    opts.fullWidth && opts.fullWidth !== "below-sm" && opts.fullWidth !== "below-md" && "aura-btn--full",
+    /* 5.53 (Chamber-OS 165): full width on phones only. */
+    (opts.fullWidth === "below-sm" || opts.fullWidth === "below-md") && "aura-btn--full-" + opts.fullWidth,
     opts.touchHeight && "aura-btn--touch",
     opts.loading && "is-loading",
     opts.className

package/dist/esm/display.js

@@ -231,7 +231,9 @@ function buttonClass(opts = {}) {
     "aura-btn",
     "aura-btn--" + (opts.variant || "primary"),
     opts.size === "sm" && "aura-btn--sm",
-    opts.fullWidth && "aura-btn--full",
+    opts.fullWidth && opts.fullWidth !== "below-sm" && opts.fullWidth !== "below-md" && "aura-btn--full",
+    /* 5.53 (Chamber-OS 165): full width on phones only. */
+    (opts.fullWidth === "below-sm" || opts.fullWidth === "below-md") && "aura-btn--full-" + opts.fullWidth,
     opts.touchHeight && "aura-btn--touch",
     opts.loading && "is-loading",
     opts.className

package/dist/index.d.cts

@@ -16,8 +16,10 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	iconRight?: IconInput | undefined;
 	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
 	loading?: boolean | undefined;
-	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels. */
-	fullWidth?: boolean | undefined;
+	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels.
+	 * `'below-sm'` / `'below-md'` (5.53, Chamber-OS 165): only below 640px / 768px (the viewport's), at least 44px tall
+	 * there whatever the density, its natural width above — for action rows that stack on phones and sit inline above. */
+	fullWidth?: boolean | "below-sm" | "below-md" | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
 	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
@@ -38,8 +40,9 @@ export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLA
 	iconRight?: IconInput | undefined;
 	/** Looks unavailable and can't be followed: no href, `aria-disabled`, out of the Tab order. */
 	disabled?: boolean | undefined;
-	/** Fills its container and lets a long label wrap (at least 44px tall). */
-	fullWidth?: boolean | undefined;
+	/** Fills its container and lets a long label wrap (at least 44px tall). `'below-sm'` / `'below-md'` (5.53): only
+	 * below 640px / 768px. */
+	fullWidth?: boolean | "below-sm" | "below-md" | undefined;
 	/** `sm` is 32px with tighter padding. Default `md` (44px). */
 	size?: ButtonSize | undefined;
 	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
@@ -1932,7 +1935,7 @@ export declare const DateRangePicker: React$1.ForwardRefExoticComponent<DateRang
 export declare function buttonClass(opts?: {
 	variant?: ButtonProps["variant"];
 	size?: ButtonProps["size"];
-	fullWidth?: boolean | undefined;
+	fullWidth?: boolean | "below-sm" | "below-md" | undefined;
 	loading?: boolean | undefined;
 	touchHeight?: boolean | undefined;
 	className?: string | undefined;

package/dist/index.d.ts

@@ -16,8 +16,10 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	iconRight?: IconInput | undefined;
 	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
 	loading?: boolean | undefined;
-	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels. */
-	fullWidth?: boolean | undefined;
+	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels.
+	 * `'below-sm'` / `'below-md'` (5.53, Chamber-OS 165): only below 640px / 768px (the viewport's), at least 44px tall
+	 * there whatever the density, its natural width above — for action rows that stack on phones and sit inline above. */
+	fullWidth?: boolean | "below-sm" | "below-md" | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
 	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
@@ -38,8 +40,9 @@ export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLA
 	iconRight?: IconInput | undefined;
 	/** Looks unavailable and can't be followed: no href, `aria-disabled`, out of the Tab order. */
 	disabled?: boolean | undefined;
-	/** Fills its container and lets a long label wrap (at least 44px tall). */
-	fullWidth?: boolean | undefined;
+	/** Fills its container and lets a long label wrap (at least 44px tall). `'below-sm'` / `'below-md'` (5.53): only
+	 * below 640px / 768px. */
+	fullWidth?: boolean | "below-sm" | "below-md" | undefined;
 	/** `sm` is 32px with tighter padding. Default `md` (44px). */
 	size?: ButtonSize | undefined;
 	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
@@ -1932,7 +1935,7 @@ export declare const DateRangePicker: React$1.ForwardRefExoticComponent<DateRang
 export declare function buttonClass(opts?: {
 	variant?: ButtonProps["variant"];
 	size?: ButtonProps["size"];
-	fullWidth?: boolean | undefined;
+	fullWidth?: boolean | "below-sm" | "below-md" | undefined;
 	loading?: boolean | undefined;
 	touchHeight?: boolean | undefined;
 	className?: string | undefined;

package/dist/server/index.cjs

@@ -1387,7 +1387,9 @@ function buttonClass(opts = {}) {
     "aura-btn",
     "aura-btn--" + (opts.variant || "primary"),
     opts.size === "sm" && "aura-btn--sm",
-    opts.fullWidth && "aura-btn--full",
+    opts.fullWidth && opts.fullWidth !== "below-sm" && opts.fullWidth !== "below-md" && "aura-btn--full",
+    /* 5.53 (Chamber-OS 165): full width on phones only. */
+    (opts.fullWidth === "below-sm" || opts.fullWidth === "below-md") && "aura-btn--full-" + opts.fullWidth,
     opts.touchHeight && "aura-btn--touch",
     opts.loading && "is-loading",
     opts.className

package/dist/server/index.d.cts

@@ -16,8 +16,10 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	iconRight?: IconInput | undefined;
 	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
 	loading?: boolean | undefined;
-	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels. */
-	fullWidth?: boolean | undefined;
+	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels.
+	 * `'below-sm'` / `'below-md'` (5.53, Chamber-OS 165): only below 640px / 768px (the viewport's), at least 44px tall
+	 * there whatever the density, its natural width above — for action rows that stack on phones and sit inline above. */
+	fullWidth?: boolean | "below-sm" | "below-md" | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
 	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
@@ -484,7 +486,7 @@ export type AuraIcon = React$1.ForwardRefExoticComponent<Omit<IconProps, "name">
 export declare function buttonClass(opts?: {
 	variant?: ButtonProps["variant"];
 	size?: ButtonProps["size"];
-	fullWidth?: boolean | undefined;
+	fullWidth?: boolean | "below-sm" | "below-md" | undefined;
 	loading?: boolean | undefined;
 	touchHeight?: boolean | undefined;
 	className?: string | undefined;

package/dist/server/index.d.ts

@@ -16,8 +16,10 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	iconRight?: IconInput | undefined;
 	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
 	loading?: boolean | undefined;
-	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels. */
-	fullWidth?: boolean | undefined;
+	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels.
+	 * `'below-sm'` / `'below-md'` (5.53, Chamber-OS 165): only below 640px / 768px (the viewport's), at least 44px tall
+	 * there whatever the density, its natural width above — for action rows that stack on phones and sit inline above. */
+	fullWidth?: boolean | "below-sm" | "below-md" | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
 	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
@@ -484,7 +486,7 @@ export type AuraIcon = React$1.ForwardRefExoticComponent<Omit<IconProps, "name">
 export declare function buttonClass(opts?: {
 	variant?: ButtonProps["variant"];
 	size?: ButtonProps["size"];
-	fullWidth?: boolean | undefined;
+	fullWidth?: boolean | "below-sm" | "below-md" | undefined;
 	loading?: boolean | undefined;
 	touchHeight?: boolean | undefined;
 	className?: string | undefined;

package/dist/server/index.js

@@ -1322,7 +1322,9 @@ function buttonClass(opts = {}) {
     "aura-btn",
     "aura-btn--" + (opts.variant || "primary"),
     opts.size === "sm" && "aura-btn--sm",
-    opts.fullWidth && "aura-btn--full",
+    opts.fullWidth && opts.fullWidth !== "below-sm" && opts.fullWidth !== "below-md" && "aura-btn--full",
+    /* 5.53 (Chamber-OS 165): full width on phones only. */
+    (opts.fullWidth === "below-sm" || opts.fullWidth === "below-md") && "aura-btn--full-" + opts.fullWidth,
     opts.touchHeight && "aura-btn--touch",
     opts.loading && "is-loading",
     opts.className

package/dist/styles.css

@@ -33,6 +33,12 @@ a.aura-btn { text-decoration: none; }
   width: 100%; height: auto; min-height: var(--aura-button-height); white-space: normal; flex-shrink: 1;
   padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere;
 }
+/* 5.53 (Chamber-OS 165): fullWidth="below-md" — the same, only below 768px, and at least 44px tall there, touchHeight
+ * or not (hence the doubled class); its natural width above. "below-sm" is with the phone rules (max-width 639.98px). */
+@media (max-width: 767.98px) {
+  .aura-btn.aura-btn.aura-btn--full-below-md { width: 100%; height: auto; min-height: var(--aura-touch-target); white-space: normal; flex-shrink: 1;
+    padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
+}
 .aura-btn.is-loading { cursor: progress; }
 /* 5.14: a button gated with aria-disabled looks unavailable but stays focusable (no pointer-events: none, so the
  * not-allowed cursor and a tooltip still work). */
@@ -1756,6 +1762,15 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding-bottom: calc(var(--aura-space-6) + env(safe-area-inset-bottom)); animation-name: aura-sheet-in; }
   .aura-dialog__foot { flex-direction: column-reverse; }
   .aura-dialog__foot > * { width: 100%; }
+  /* 5.53 (Chamber-OS 165): a phone sheet's or drawer's footer button (or one a Tooltip or menu wraps) behaves as
+   * fullWidth — a long label wraps instead of running out, at least 44px tall whatever the density or pointer; so does
+   * fullWidth="below-sm" (the doubled class beats touchHeight's height). Drawer footers stay in their row. */
+  .aura-dialog__foot > .aura-btn, .aura-dialog__foot > * > .aura-btn:only-child,
+  .aura-drawer__foot > .aura-btn, .aura-drawer__foot > * > .aura-btn:only-child, .aura-btn.aura-btn.aura-btn--full-below-sm {
+    height: auto; min-height: var(--aura-touch-target); white-space: normal; flex-shrink: 1;
+    padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
+  .aura-dialog__foot > * > .aura-btn:only-child, .aura-btn.aura-btn.aura-btn--full-below-sm { width: 100%; }
+  .aura-drawer__foot > * { max-width: 100%; }
   .aura-drawer:not(.aura-drawer--nav) { max-width: none; }
   .aura-toaster { left: var(--aura-space-4); right: var(--aura-space-4); bottom: var(--aura-space-4); width: auto; }
   .aura-toaster.is-center { left: var(--aura-space-4); right: var(--aura-space-4); transform: none; }

package/dist/styles.layer.css

@@ -35,6 +35,12 @@ a.aura-btn { text-decoration: none; }
   width: 100%; height: auto; min-height: var(--aura-button-height); white-space: normal; flex-shrink: 1;
   padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere;
 }
+/* 5.53 (Chamber-OS 165): fullWidth="below-md" — the same, only below 768px, and at least 44px tall there, touchHeight
+ * or not (hence the doubled class); its natural width above. "below-sm" is with the phone rules (max-width 639.98px). */
+@media (max-width: 767.98px) {
+  .aura-btn.aura-btn.aura-btn--full-below-md { width: 100%; height: auto; min-height: var(--aura-touch-target); white-space: normal; flex-shrink: 1;
+    padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
+}
 .aura-btn.is-loading { cursor: progress; }
 /* 5.14: a button gated with aria-disabled looks unavailable but stays focusable (no pointer-events: none, so the
  * not-allowed cursor and a tooltip still work). */
@@ -1758,6 +1764,15 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding-bottom: calc(var(--aura-space-6) + env(safe-area-inset-bottom)); animation-name: aura-sheet-in; }
   .aura-dialog__foot { flex-direction: column-reverse; }
   .aura-dialog__foot > * { width: 100%; }
+  /* 5.53 (Chamber-OS 165): a phone sheet's or drawer's footer button (or one a Tooltip or menu wraps) behaves as
+   * fullWidth — a long label wraps instead of running out, at least 44px tall whatever the density or pointer; so does
+   * fullWidth="below-sm" (the doubled class beats touchHeight's height). Drawer footers stay in their row. */
+  .aura-dialog__foot > .aura-btn, .aura-dialog__foot > * > .aura-btn:only-child,
+  .aura-drawer__foot > .aura-btn, .aura-drawer__foot > * > .aura-btn:only-child, .aura-btn.aura-btn.aura-btn--full-below-sm {
+    height: auto; min-height: var(--aura-touch-target); white-space: normal; flex-shrink: 1;
+    padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
+  .aura-dialog__foot > * > .aura-btn:only-child, .aura-btn.aura-btn.aura-btn--full-below-sm { width: 100%; }
+  .aura-drawer__foot > * { max-width: 100%; }
   .aura-drawer:not(.aura-drawer--nav) { max-width: none; }
   .aura-toaster { left: var(--aura-space-4); right: var(--aura-space-4); bottom: var(--aura-space-4); width: auto; }
   .aura-toaster.is-center { left: var(--aura-space-4); right: var(--aura-space-4); transform: none; }

package/package.json

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