@jirawatpyk/aura-react 5.67.0 → 5.69.0

package/README.md

@@ -186,6 +186,17 @@ 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.69 — Chamber-OS addendum 86 (#185)
+
+- **ActionBar's edge look:** a `position="viewport"` bar takes `look="edge"` (every width) or `edgeBelow="sm"` / `"md"` (the strip below 640px / 768px, the card at and above it — as PageHeader's `actionsBarBelow`) and draws PageHeader's edge strip: the screen's full width, on the bottom edge or directly on a BottomNav, a top border only (no radius, shadow or top margin), the home-indicator inset as padding inside it. `look="floating"` (default) is the inset card, unchanged; a `container` bar ignores both props.
+- **Its promises hold:** the strip is `position: fixed`, so it stays on screen for the whole page, not only while its form is. As PageHeader's bar, `<html>` gets its measured height as `--aura-actionbar-height` (60px before hydration; the home-indicator padding counts), the page's end is padded by it (AppShell's content, else the `body`) and `scroll-padding-bottom` keeps a focused field clear — so the last field, and anything after the form, scroll clear. The ActionBar root is the strip, so `getBoundingClientRect()` on it measures the strip. On a screen 30rem tall or less it is static, in the flow, as every bar. An idle bulk bar (`selected={0}`) stays folded away and adds no room. Drop your own clearance (a hook adding the bar's height to `scroll-padding-bottom` or page padding) when you adopt `look` / `edgeBelow`, or it is counted twice. Buttons stay 44px on a phone; `start`, `status`, `children`, the region and its label are unchanged.
+- **Mind:** a transform, filter, `will-change` or paint containment on an ancestor places a fixed strip against that ancestor instead of the screen (a dev warning says so), and `look="edge"` at desktop widths spans the screen under a side nav — use `edgeBelow` for a phone-only strip. Passing both `look="edge"` and `edgeBelow` warns in development (`look` wins). Replace a hand-built `position: fixed` pay band with `<ActionBar edgeBelow="sm">`.
+
+## 5.68 — Chamber-OS addendum 85 (#184)
+
+- **A disabled group dims its legend:** `RadioGroup` and `CheckboxGroup` with `disabled` add `is-disabled` to the fieldset, so the legend takes the disabled colour (`fg-secondary`) a disabled `Field`'s label has — a form that disables its fields while submitting no longer shows group legends at full contrast over dimmed controls.
+- **`errorLive` — an error line that announces:** on `CheckboxGroup`, `RadioGroup` and `Field`, `errorLive` gives the error line `aria-live="polite"` and keeps it in the page, empty and taking no room, while there is no error (the hint shows), so a message that appears as the user changes the field ("Choose at least one membership category" the moment the last box is unticked) is read once. Off by default: an error shown on submit, with focus moved to the field, is read already. Under a `Field`, your own control should still point at `{id}-error` in its `aria-describedby` while there is an error, so the message stays its description. Not on TextField and the other controls. Hand-written markup with an empty `.aura-field__error` placeholder is now hidden until it has content. Drop a hand-made `sr-only` `role="status"` beside the group.
+
 ## 5.67 — Chamber-OS addendum 84 (#183)
 
 - **`CheckboxGroup` — RadioGroup's many-choice twin:** one `fieldset` named by its `legend`, with RadioGroup's props — `label`, `hint`, `error`, `required` (the same `*` marker), `disabled` (every box), `orientation`, `touchHeight` (44px rows), `options` (`{ value, label, description?, disabled? }` or strings), `name` — and a set of values: `value: string[]` / `defaultValue` / `onChange(values)`, always in option order whatever order they were ticked in. The group is described by the hint, or by the error line, which also marks every box `aria-invalid` and edges the empty ones. `required` shows the `*` and adds a hidden "(required)" to the group's name (localised), since a group can't take `aria-required` and a native `required` on each box would demand all of them; "at least one" is yours to check (pass `error`, which each box then also points at). Values not among the options (archived, still loading) are kept, after the others. `focus()` on the ref lands on the first ticked enabled box. Replaces a hand-made fieldset of Checkboxes.

package/dist/aura.bundle.js

@@ -409,6 +409,14 @@ window.Aura = (() => {
     return !e.defaultPrevented && e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
   }
   var FilterSheet = React3.createContext(false);
+  function fixedTrapped(el) {
+    for (let p = el.parentElement; p && p !== document.documentElement; p = p.parentElement) {
+      const s = getComputedStyle(p);
+      if (s.transform !== "none" || s.filter !== "none" || (s.backdropFilter || "none") !== "none" || s.contentVisibility === "auto" || s.perspective !== "none" || /transform|filter|perspective/.test(s.willChange) || /paint|layout|strict|content/.test(s.contain))
+        return true;
+    }
+    return false;
+  }
 
   // src/display.tsx
   var React4 = __toESM(require_react(), 1);
@@ -2081,12 +2089,19 @@ window.Aura = (() => {
       ) : null,
       hasAddon(props.labelAddon) ? /* @__PURE__ */ React13.createElement("div", { className: "aura-field__addon", id: props.id + "-addon" }, props.labelAddon) : null,
       props.children,
-      props.error ? /* @__PURE__ */ React13.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React13.createElement(Icon, { name: /* @__PURE__ */ React13.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React13.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
+      fieldNote(props.id, props.error, props.hint, props.errorLive)
     );
   });
   function describedBy(id, p) {
     return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
   }
+  function fieldNote(id, error, hint, live) {
+    const err = error ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Icon, { name: /* @__PURE__ */ React13.createElement(IconCircleAlert, null), size: 14 }), error) : null;
+    const hintLine = hint ? /* @__PURE__ */ React13.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, hint) : null;
+    if (!live)
+      return err ? /* @__PURE__ */ React13.createElement("p", { className: "aura-field__error", id: id + "-error" }, err) : hintLine;
+    return /* @__PURE__ */ React13.createElement(React13.Fragment, null, err ? null : hintLine, /* @__PURE__ */ React13.createElement("p", { className: "aura-field__error", id: id == null ? void 0 : id + "-error", "aria-live": "polite" }, err));
+  }
   function hasAddon(n3) {
     return n3 != null && typeof n3 !== "boolean" && n3 !== "";
   }
@@ -3872,6 +3887,7 @@ window.Aura = (() => {
         className: cx(
           "aura-field aura-radio-group",
           props.error && "is-invalid",
+          props.disabled && "is-disabled",
           touchClass(props.touchHeight),
           props.className
         ),
@@ -3901,7 +3917,7 @@ window.Aura = (() => {
           }
         ), /* @__PURE__ */ React20.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React20.createElement("span", { className: "aura-choice__label", id: oid ? oid + "-label" : void 0 }, v.label), v.description ? /* @__PURE__ */ React20.createElement("span", { className: "aura-choice__desc", id: oid + "-desc" }, v.description) : null));
       })),
-      props.error ? /* @__PURE__ */ React20.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React20.createElement(Icon, { name: /* @__PURE__ */ React20.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React20.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
+      fieldNote(id, props.error, props.hint, props.errorLive)
     );
   });
 
@@ -3936,6 +3952,7 @@ window.Aura = (() => {
           className: cx(
             "aura-field aura-radio-group aura-checkbox-group",
             props.error && "is-invalid",
+            props.disabled && "is-disabled",
             touchClass(props.touchHeight),
             props.className
           ),
@@ -3973,7 +3990,7 @@ window.Aura = (() => {
             v.label
           );
         })),
-        props.error ? /* @__PURE__ */ React21.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React21.createElement(Icon, { name: /* @__PURE__ */ React21.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React21.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
+        fieldNote(id, props.error, props.hint, props.errorLive)
       );
     }
   );
@@ -8104,14 +8121,6 @@ window.Aura = (() => {
   // src/PageHeaderClient.tsx
   var NAME = "--aura-page-actions-height";
   var bars = [];
-  function trapped(el) {
-    for (let p = el.parentElement; p && p !== document.documentElement; p = p.parentElement) {
-      const s = getComputedStyle(p);
-      if (s.transform !== "none" || s.filter !== "none" || (s.backdropFilter || "none") !== "none" || s.contentVisibility === "auto" || s.perspective !== "none" || /transform|filter|perspective/.test(s.willChange) || /paint|layout|strict|content/.test(s.contain))
-        return true;
-    }
-    return false;
-  }
   var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
     const own = React45.useRef(null);
     const merged = useMergedRef(ref, own);
@@ -8128,7 +8137,7 @@ window.Aura = (() => {
           if (bars[bars.length - 1] !== sync) return;
           if (getComputedStyle(el).position === "fixed") {
             root.style.setProperty(NAME, el.offsetHeight + "px");
-            if (!checked && (checked = true, trapped(el)))
+            if (!checked && (checked = true, fixedTrapped(el)))
               devWarnOnce(
                 "pageheader-bar-trapped",
                 "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
@@ -8671,6 +8680,17 @@ window.Aura = (() => {
 
   // src/ActionBar.tsx
   var React50 = __toESM(require_react(), 1);
+  var HEIGHT = "--aura-actionbar-height";
+  var edges = [];
+  function writeHeight() {
+    const root = document.documentElement;
+    for (let i = edges.length - 1; i >= 0; i--)
+      if (getComputedStyle(edges[i]).position === "fixed") {
+        root.style.setProperty(HEIGHT, edges[i].offsetHeight + "px");
+        return;
+      }
+    root.style.removeProperty(HEIGHT);
+  }
   var ActionBar = React50.forwardRef(function ActionBar2(props, ref) {
     const t = useStrings();
     const bulk = props.selected != null;
@@ -8681,6 +8701,40 @@ window.Aura = (() => {
     });
     const cameFrom = React50.useRef(null);
     const own = React50.useRef(null);
+    const viewport = (props.position || "viewport") === "viewport";
+    const edge = !viewport ? null : props.look === "edge" ? "all" : props.edgeBelow || null;
+    if (props.look === "edge" && props.edgeBelow && viewport)
+      devWarnOnce(
+        "actionbar-edge-both",
+        'ActionBar: look="edge" draws the edge strip at every width, so edgeBelow does nothing. Pass edgeBelow alone for a strip on a phone and the floating card above it.'
+      );
+    React50.useEffect(
+      function() {
+        const el = own.current;
+        if (!edge || !el) return;
+        let checked = false;
+        function sync() {
+          writeHeight();
+          if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
+            devWarnOnce(
+              "actionbar-edge-trapped",
+              `ActionBar look="edge": an ancestor has a transform, filter, will-change or paint containment, so the fixed strip is placed against it instead of the screen. Remove it from the bar's ancestors.`
+            );
+        }
+        edges.push(el);
+        const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
+        if (ro) ro.observe(el, { box: "border-box" });
+        window.addEventListener("resize", sync);
+        sync();
+        return function() {
+          if (ro) ro.disconnect();
+          window.removeEventListener("resize", sync);
+          edges.splice(edges.indexOf(el), 1);
+          writeHeight();
+        };
+      },
+      [edge, idle]
+    );
     function clear() {
       props.onClearSelection();
       setTimeout(function() {
@@ -8707,6 +8761,7 @@ window.Aura = (() => {
         className: cx(
           "aura-actionbar",
           "aura-actionbar--" + (props.position || "viewport"),
+          edge && (edge === "all" ? "aura-actionbar--edge" : "aura-actionbar--edge-below-" + edge),
           idle && "is-idle",
           props.className
         )

package/dist/cjs/index.cjs

@@ -391,6 +391,14 @@ function plainClick(e) {
   return !e.defaultPrevented && e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
 }
 var FilterSheet = React3.createContext(false);
+function fixedTrapped(el) {
+  for (let p = el.parentElement; p && p !== document.documentElement; p = p.parentElement) {
+    const s = getComputedStyle(p);
+    if (s.transform !== "none" || s.filter !== "none" || (s.backdropFilter || "none") !== "none" || s.contentVisibility === "auto" || s.perspective !== "none" || /transform|filter|perspective/.test(s.willChange) || /paint|layout|strict|content/.test(s.contain))
+      return true;
+  }
+  return false;
+}
 
 // src/display.tsx
 var React4 = __toESM(require("react"), 1);
@@ -2063,12 +2071,19 @@ var Field = React13.forwardRef(function Field2(props, ref) {
     ) : null,
     hasAddon(props.labelAddon) ? /* @__PURE__ */ React13.createElement("div", { className: "aura-field__addon", id: props.id + "-addon" }, props.labelAddon) : null,
     props.children,
-    props.error ? /* @__PURE__ */ React13.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React13.createElement(Icon, { name: /* @__PURE__ */ React13.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React13.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
+    fieldNote(props.id, props.error, props.hint, props.errorLive)
   );
 });
 function describedBy(id, p) {
   return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
 }
+function fieldNote(id, error, hint, live) {
+  const err = error ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Icon, { name: /* @__PURE__ */ React13.createElement(IconCircleAlert, null), size: 14 }), error) : null;
+  const hintLine = hint ? /* @__PURE__ */ React13.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, hint) : null;
+  if (!live)
+    return err ? /* @__PURE__ */ React13.createElement("p", { className: "aura-field__error", id: id + "-error" }, err) : hintLine;
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, err ? null : hintLine, /* @__PURE__ */ React13.createElement("p", { className: "aura-field__error", id: id == null ? void 0 : id + "-error", "aria-live": "polite" }, err));
+}
 function hasAddon(n3) {
   return n3 != null && typeof n3 !== "boolean" && n3 !== "";
 }
@@ -3854,6 +3869,7 @@ var RadioGroup = React20.forwardRef(function RadioGroup2(props, ref) {
       className: cx(
         "aura-field aura-radio-group",
         props.error && "is-invalid",
+        props.disabled && "is-disabled",
         touchClass(props.touchHeight),
         props.className
       ),
@@ -3883,7 +3899,7 @@ var RadioGroup = React20.forwardRef(function RadioGroup2(props, ref) {
         }
       ), /* @__PURE__ */ React20.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React20.createElement("span", { className: "aura-choice__label", id: oid ? oid + "-label" : void 0 }, v.label), v.description ? /* @__PURE__ */ React20.createElement("span", { className: "aura-choice__desc", id: oid + "-desc" }, v.description) : null));
     })),
-    props.error ? /* @__PURE__ */ React20.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React20.createElement(Icon, { name: /* @__PURE__ */ React20.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React20.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
+    fieldNote(id, props.error, props.hint, props.errorLive)
   );
 });
 
@@ -3918,6 +3934,7 @@ var CheckboxGroup = React21.forwardRef(
         className: cx(
           "aura-field aura-radio-group aura-checkbox-group",
           props.error && "is-invalid",
+          props.disabled && "is-disabled",
           touchClass(props.touchHeight),
           props.className
         ),
@@ -3955,7 +3972,7 @@ var CheckboxGroup = React21.forwardRef(
           v.label
         );
       })),
-      props.error ? /* @__PURE__ */ React21.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React21.createElement(Icon, { name: /* @__PURE__ */ React21.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React21.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
+      fieldNote(id, props.error, props.hint, props.errorLive)
     );
   }
 );
@@ -8086,14 +8103,6 @@ var PageHeader = React44.forwardRef(function PageHeader2(props, ref) {
 // src/PageHeaderClient.tsx
 var NAME = "--aura-page-actions-height";
 var bars = [];
-function trapped(el) {
-  for (let p = el.parentElement; p && p !== document.documentElement; p = p.parentElement) {
-    const s = getComputedStyle(p);
-    if (s.transform !== "none" || s.filter !== "none" || (s.backdropFilter || "none") !== "none" || s.contentVisibility === "auto" || s.perspective !== "none" || /transform|filter|perspective/.test(s.willChange) || /paint|layout|strict|content/.test(s.contain))
-      return true;
-  }
-  return false;
-}
 var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
   const own = React45.useRef(null);
   const merged = useMergedRef(ref, own);
@@ -8110,7 +8119,7 @@ var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
         if (bars[bars.length - 1] !== sync) return;
         if (getComputedStyle(el).position === "fixed") {
           root.style.setProperty(NAME, el.offsetHeight + "px");
-          if (!checked && (checked = true, trapped(el)))
+          if (!checked && (checked = true, fixedTrapped(el)))
             devWarnOnce(
               "pageheader-bar-trapped",
               "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
@@ -8653,6 +8662,17 @@ var AppShell = React49.forwardRef(function AppShell2(props, ref) {
 
 // src/ActionBar.tsx
 var React50 = __toESM(require("react"), 1);
+var HEIGHT = "--aura-actionbar-height";
+var edges = [];
+function writeHeight() {
+  const root = document.documentElement;
+  for (let i = edges.length - 1; i >= 0; i--)
+    if (getComputedStyle(edges[i]).position === "fixed") {
+      root.style.setProperty(HEIGHT, edges[i].offsetHeight + "px");
+      return;
+    }
+  root.style.removeProperty(HEIGHT);
+}
 var ActionBar = React50.forwardRef(function ActionBar2(props, ref) {
   const t = useStrings();
   const bulk = props.selected != null;
@@ -8663,6 +8683,40 @@ var ActionBar = React50.forwardRef(function ActionBar2(props, ref) {
   });
   const cameFrom = React50.useRef(null);
   const own = React50.useRef(null);
+  const viewport = (props.position || "viewport") === "viewport";
+  const edge = !viewport ? null : props.look === "edge" ? "all" : props.edgeBelow || null;
+  if (props.look === "edge" && props.edgeBelow && viewport)
+    devWarnOnce(
+      "actionbar-edge-both",
+      'ActionBar: look="edge" draws the edge strip at every width, so edgeBelow does nothing. Pass edgeBelow alone for a strip on a phone and the floating card above it.'
+    );
+  React50.useEffect(
+    function() {
+      const el = own.current;
+      if (!edge || !el) return;
+      let checked = false;
+      function sync() {
+        writeHeight();
+        if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
+          devWarnOnce(
+            "actionbar-edge-trapped",
+            `ActionBar look="edge": an ancestor has a transform, filter, will-change or paint containment, so the fixed strip is placed against it instead of the screen. Remove it from the bar's ancestors.`
+          );
+      }
+      edges.push(el);
+      const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
+      if (ro) ro.observe(el, { box: "border-box" });
+      window.addEventListener("resize", sync);
+      sync();
+      return function() {
+        if (ro) ro.disconnect();
+        window.removeEventListener("resize", sync);
+        edges.splice(edges.indexOf(el), 1);
+        writeHeight();
+      };
+    },
+    [edge, idle]
+  );
   function clear() {
     props.onClearSelection();
     setTimeout(function() {
@@ -8689,6 +8743,7 @@ var ActionBar = React50.forwardRef(function ActionBar2(props, ref) {
       className: cx(
         "aura-actionbar",
         "aura-actionbar--" + (props.position || "viewport"),
+        edge && (edge === "all" ? "aura-actionbar--edge" : "aura-actionbar--edge-below-" + edge),
         idle && "is-idle",
         props.className
       )

package/dist/esm/ActionBar.js

@@ -1,8 +1,19 @@
 'use client';
 import * as React from "react";
 import { Button } from "./Button.js";
-import { cx } from "./internal.js";
+import { cx, devWarnOnce, fixedTrapped } from "./internal.js";
 import { useStrings } from "./locale.js";
+const HEIGHT = "--aura-actionbar-height";
+const edges = [];
+function writeHeight() {
+  const root = document.documentElement;
+  for (let i = edges.length - 1; i >= 0; i--)
+    if (getComputedStyle(edges[i]).position === "fixed") {
+      root.style.setProperty(HEIGHT, edges[i].offsetHeight + "px");
+      return;
+    }
+  root.style.removeProperty(HEIGHT);
+}
 const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
   const t = useStrings();
   const bulk = props.selected != null;
@@ -13,6 +24,40 @@ const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
   });
   const cameFrom = React.useRef(null);
   const own = React.useRef(null);
+  const viewport = (props.position || "viewport") === "viewport";
+  const edge = !viewport ? null : props.look === "edge" ? "all" : props.edgeBelow || null;
+  if (props.look === "edge" && props.edgeBelow && viewport)
+    devWarnOnce(
+      "actionbar-edge-both",
+      'ActionBar: look="edge" draws the edge strip at every width, so edgeBelow does nothing. Pass edgeBelow alone for a strip on a phone and the floating card above it.'
+    );
+  React.useEffect(
+    function() {
+      const el = own.current;
+      if (!edge || !el) return;
+      let checked = false;
+      function sync() {
+        writeHeight();
+        if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
+          devWarnOnce(
+            "actionbar-edge-trapped",
+            `ActionBar look="edge": an ancestor has a transform, filter, will-change or paint containment, so the fixed strip is placed against it instead of the screen. Remove it from the bar's ancestors.`
+          );
+      }
+      edges.push(el);
+      const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
+      if (ro) ro.observe(el, { box: "border-box" });
+      window.addEventListener("resize", sync);
+      sync();
+      return function() {
+        if (ro) ro.disconnect();
+        window.removeEventListener("resize", sync);
+        edges.splice(edges.indexOf(el), 1);
+        writeHeight();
+      };
+    },
+    [edge, idle]
+  );
   function clear() {
     props.onClearSelection();
     setTimeout(function() {
@@ -39,6 +84,7 @@ const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
       className: cx(
         "aura-actionbar",
         "aura-actionbar--" + (props.position || "viewport"),
+        edge && (edge === "all" ? "aura-actionbar--edge" : "aura-actionbar--edge-below-" + edge),
         idle && "is-idle",
         props.className
       )

package/dist/esm/CheckboxGroup.js

@@ -1,11 +1,9 @@
 'use client';
 import * as React from "react";
 import { Checkbox } from "./Checkbox.js";
-import { describedBy } from "./Field.js";
-import { Icon } from "./Icon.js";
+import { describedBy, fieldNote } from "./Field.js";
 import { cx, touchClass, uid, useMaybeControlled } from "./internal.js";
 import { useStrings } from "./locale.js";
-import { IconCircleAlert } from "./icons.js";
 const CheckboxGroup = React.forwardRef(
   function CheckboxGroup2(props, ref) {
     const t = useStrings();
@@ -35,6 +33,7 @@ const CheckboxGroup = React.forwardRef(
         className: cx(
           "aura-field aura-radio-group aura-checkbox-group",
           props.error && "is-invalid",
+          props.disabled && "is-disabled",
           touchClass(props.touchHeight),
           props.className
         ),
@@ -72,7 +71,7 @@ const CheckboxGroup = React.forwardRef(
           v.label
         );
       })),
-      props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
+      fieldNote(id, props.error, props.hint, props.errorLive)
     );
   }
 );

package/dist/esm/Field.js

@@ -27,12 +27,19 @@ const Field = React.forwardRef(function Field2(props, ref) {
     ) : null,
     hasAddon(props.labelAddon) ? /* @__PURE__ */ React.createElement("div", { className: "aura-field__addon", id: props.id + "-addon" }, props.labelAddon) : null,
     props.children,
-    props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
+    fieldNote(props.id, props.error, props.hint, props.errorLive)
   );
 });
 function describedBy(id, p) {
   return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
 }
+function fieldNote(id, error, hint, live) {
+  const err = error ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null), size: 14 }), error) : null;
+  const hintLine = hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, hint) : null;
+  if (!live)
+    return err ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: id + "-error" }, err) : hintLine;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, err ? null : hintLine, /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: id == null ? void 0 : id + "-error", "aria-live": "polite" }, err));
+}
 function hasAddon(n) {
   return n != null && typeof n !== "boolean" && n !== "";
 }
@@ -68,6 +75,7 @@ export {
   FIELD_KEYS,
   Field,
   describedBy,
+  fieldNote,
   hasAddon,
   joinDescribedBy
 };

package/dist/esm/PageHeaderClient.js

@@ -1,17 +1,9 @@
 'use client';
 import * as React from "react";
 import { PageHeader as StaticPageHeader } from "./PageHeader.js";
-import { devWarnOnce, useMergedRef } from "./internal.js";
+import { devWarnOnce, fixedTrapped as trapped, useMergedRef } from "./internal.js";
 const NAME = "--aura-page-actions-height";
 const bars = [];
-function trapped(el) {
-  for (let p = el.parentElement; p && p !== document.documentElement; p = p.parentElement) {
-    const s = getComputedStyle(p);
-    if (s.transform !== "none" || s.filter !== "none" || (s.backdropFilter || "none") !== "none" || s.contentVisibility === "auto" || s.perspective !== "none" || /transform|filter|perspective/.test(s.willChange) || /paint|layout|strict|content/.test(s.contain))
-      return true;
-  }
-  return false;
-}
 const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
   const own = React.useRef(null);
   const merged = useMergedRef(ref, own);

package/dist/esm/RadioGroup.js

@@ -1,9 +1,7 @@
 'use client';
 import * as React from "react";
-import { describedBy } from "./Field.js";
-import { Icon } from "./Icon.js";
+import { describedBy, fieldNote } from "./Field.js";
 import { cx, touchClass, uid, useMaybeControlled } from "./internal.js";
-import { IconCircleAlert } from "./icons.js";
 const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const st = useMaybeControlled(
@@ -31,6 +29,7 @@ const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
       className: cx(
         "aura-field aura-radio-group",
         props.error && "is-invalid",
+        props.disabled && "is-disabled",
         touchClass(props.touchHeight),
         props.className
       ),
@@ -60,7 +59,7 @@ const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
         }
       ), /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-choice__label", id: oid ? oid + "-label" : void 0 }, v.label), v.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc", id: oid + "-desc" }, v.description) : null));
     })),
-    props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
+    fieldNote(id, props.error, props.hint, props.errorLive)
   );
 });
 export {

package/dist/esm/internal.js

@@ -109,6 +109,14 @@ function plainClick(e) {
   return !e.defaultPrevented && e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
 }
 const FilterSheet = React.createContext(false);
+function fixedTrapped(el) {
+  for (let p = el.parentElement; p && p !== document.documentElement; p = p.parentElement) {
+    const s = getComputedStyle(p);
+    if (s.transform !== "none" || s.filter !== "none" || (s.backdropFilter || "none") !== "none" || s.contentVisibility === "auto" || s.perspective !== "none" || /transform|filter|perspective/.test(s.willChange) || /paint|layout|strict|content/.test(s.contain))
+      return true;
+  }
+  return false;
+}
 export {
   FOCUSABLE,
   FilterSheet,
@@ -117,6 +125,7 @@ export {
   compare,
   cx,
   devWarnOnce,
+  fixedTrapped,
   focusFirst,
   inClosedDetails,
   isTabStop,

package/dist/index.d.cts

@@ -680,7 +680,12 @@ export interface RadioGroupProps extends FieldProps {
 	name?: string | undefined;
 	/** Default `vertical`. */
 	orientation?: "vertical" | "horizontal" | undefined;
+	/** Disables every option and (5.68) dims the legend, as Field does its label. */
 	disabled?: boolean | undefined;
+	/** 5.68 (Chamber-OS 184): announce the error line when it appears (`aria-live="polite"`) — for an error shown as
+	 * the user changes the group ("Choose at least one…" when the last box is unticked), not on submit. The error line
+	 * stays in the page, empty, while there is none, so the first message is read too. Off by default. */
+	errorLive?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
 	/** 44px rows (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a coarse pointer (touch
@@ -700,7 +705,12 @@ export interface CheckboxGroupProps extends FieldProps {
 	name?: string | undefined;
 	/** Default `vertical`. */
 	orientation?: "vertical" | "horizontal" | undefined;
+	/** Disables every option and (5.68) dims the legend, as Field does its label. */
 	disabled?: boolean | undefined;
+	/** 5.68 (Chamber-OS 184): announce the error line when it appears (`aria-live="polite"`) — for an error shown as
+	 * the user changes the group ("Choose at least one…" when the last box is unticked), not on submit. The error line
+	 * stays in the page, empty, while there is none, so the first message is read too. Off by default. */
+	errorLive?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
 	/** 44px rows, as RadioGroup: `true` below 640px or on a coarse pointer, `'always'` at every width. */
@@ -1504,6 +1514,16 @@ export interface ActionBarProps {
 	 * parent, so they never cover the last field. Make it the last child of the form or card it belongs to: like any
 	 * `position: sticky` element it sticks only while that parent is on screen. */
 	position?: "viewport" | "container" | undefined;
+	/** 5.69 (Chamber-OS 185), `position="viewport"` only. `floating` (default): the inset card, bordered all round,
+	 * rounded, with a shadow. `edge`: PageHeader's edge strip at every width — the screen's full width, on the bottom
+	 * edge or on a BottomNav, a top border only, the home-indicator inset inside it. The strip is `position: fixed` and
+	 * stays on screen for the whole page (not only while its form is), so, as PageHeader's bar, the page gains its height
+	 * at the end (`--aura-actionbar-height` on `<html>`) and a focused field scrolls clear; on a screen 30rem tall or
+	 * less it is static, in the flow. For a strip on a phone only, use `edgeBelow`. */
+	look?: "floating" | "edge" | undefined;
+	/** 5.69 (Chamber-OS 185), `position="viewport"` only: the edge strip below this width (`sm` 640px, `md` 768px),
+	 * the `look` card at and above it — as PageHeader's `actionsBarBelow`. */
+	edgeBelow?: "sm" | "md" | undefined;
 	/** 5.35 (DxT Monitor #14): while this bar is on the page, a BottomNav (and its spacer) is hidden and the bar takes the
 	 * bottom edge — for a page whose own actions (Acknowledge, Visit site) replace the tab bar. Any element can do the
 	 * same with the `data-aura-hide-bottomnav` attribute. */
@@ -1927,6 +1947,12 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 	/** The control's id: the label points at it, and the hint/error ids derive from it. */
 	id?: string | undefined;
 	children?: React$1.ReactNode | undefined;
+	/** 5.68 (Chamber-OS 184): announce the error line when it appears — for an error shown as the user types or ticks,
+	 * not on submit. The error `<p>` gets `aria-live="polite"` and stays in the page, empty, while there is no error, so
+	 * the first message is read too. Off by default: an error shown on submit, with focus moved to the field, is read
+	 * already, and a live line would read it twice. Your control should still point at `{id}-error` in its
+	 * `aria-describedby` while there is an error (TextField and the others do), so the message stays its description. */
+	errorLive?: boolean | undefined;
 	/** 5.31 (Chamber-OS addendum 41): a node between the label and the control, in a `.aura-field__addon` box with the
 	 * id `{id}-addon`. TextField and Textarea add that id to the input's `aria-describedby`; a custom control should too. */
 	labelAddon?: React$1.ReactNode | undefined;
@@ -2280,8 +2306,6 @@ export declare const STRINGS: {
 export declare const TileGrid: React$1.ForwardRefExoticComponent<TileGridProps & React$1.RefAttributes<HTMLUListElement>>;
 export declare const Sparkline: React$1.ForwardRefExoticComponent<SparklineProps & React$1.RefAttributes<SVGSVGElement>>;
 export declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
-/** ActionBar — a bar stuck to the bottom of the screen or of a card: a status line and the form's or selection's
- * actions. It is `position: sticky`, so it stays in the flow at the end of its parent and never covers the last field. */
 export declare const ActionBar: React$1.ForwardRefExoticComponent<ActionBarProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Separator — a 1px `aura-border-default` rule between groups of content (4.20). Decorative by default (hidden from
  * screen readers); `decorative={false}` makes it a `role="separator"` that is announced. */

package/dist/index.d.ts

@@ -680,7 +680,12 @@ export interface RadioGroupProps extends FieldProps {
 	name?: string | undefined;
 	/** Default `vertical`. */
 	orientation?: "vertical" | "horizontal" | undefined;
+	/** Disables every option and (5.68) dims the legend, as Field does its label. */
 	disabled?: boolean | undefined;
+	/** 5.68 (Chamber-OS 184): announce the error line when it appears (`aria-live="polite"`) — for an error shown as
+	 * the user changes the group ("Choose at least one…" when the last box is unticked), not on submit. The error line
+	 * stays in the page, empty, while there is none, so the first message is read too. Off by default. */
+	errorLive?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
 	/** 44px rows (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a coarse pointer (touch
@@ -700,7 +705,12 @@ export interface CheckboxGroupProps extends FieldProps {
 	name?: string | undefined;
 	/** Default `vertical`. */
 	orientation?: "vertical" | "horizontal" | undefined;
+	/** Disables every option and (5.68) dims the legend, as Field does its label. */
 	disabled?: boolean | undefined;
+	/** 5.68 (Chamber-OS 184): announce the error line when it appears (`aria-live="polite"`) — for an error shown as
+	 * the user changes the group ("Choose at least one…" when the last box is unticked), not on submit. The error line
+	 * stays in the page, empty, while there is none, so the first message is read too. Off by default. */
+	errorLive?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
 	/** 44px rows, as RadioGroup: `true` below 640px or on a coarse pointer, `'always'` at every width. */
@@ -1504,6 +1514,16 @@ export interface ActionBarProps {
 	 * parent, so they never cover the last field. Make it the last child of the form or card it belongs to: like any
 	 * `position: sticky` element it sticks only while that parent is on screen. */
 	position?: "viewport" | "container" | undefined;
+	/** 5.69 (Chamber-OS 185), `position="viewport"` only. `floating` (default): the inset card, bordered all round,
+	 * rounded, with a shadow. `edge`: PageHeader's edge strip at every width — the screen's full width, on the bottom
+	 * edge or on a BottomNav, a top border only, the home-indicator inset inside it. The strip is `position: fixed` and
+	 * stays on screen for the whole page (not only while its form is), so, as PageHeader's bar, the page gains its height
+	 * at the end (`--aura-actionbar-height` on `<html>`) and a focused field scrolls clear; on a screen 30rem tall or
+	 * less it is static, in the flow. For a strip on a phone only, use `edgeBelow`. */
+	look?: "floating" | "edge" | undefined;
+	/** 5.69 (Chamber-OS 185), `position="viewport"` only: the edge strip below this width (`sm` 640px, `md` 768px),
+	 * the `look` card at and above it — as PageHeader's `actionsBarBelow`. */
+	edgeBelow?: "sm" | "md" | undefined;
 	/** 5.35 (DxT Monitor #14): while this bar is on the page, a BottomNav (and its spacer) is hidden and the bar takes the
 	 * bottom edge — for a page whose own actions (Acknowledge, Visit site) replace the tab bar. Any element can do the
 	 * same with the `data-aura-hide-bottomnav` attribute. */
@@ -1927,6 +1947,12 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 	/** The control's id: the label points at it, and the hint/error ids derive from it. */
 	id?: string | undefined;
 	children?: React$1.ReactNode | undefined;
+	/** 5.68 (Chamber-OS 184): announce the error line when it appears — for an error shown as the user types or ticks,
+	 * not on submit. The error `<p>` gets `aria-live="polite"` and stays in the page, empty, while there is no error, so
+	 * the first message is read too. Off by default: an error shown on submit, with focus moved to the field, is read
+	 * already, and a live line would read it twice. Your control should still point at `{id}-error` in its
+	 * `aria-describedby` while there is an error (TextField and the others do), so the message stays its description. */
+	errorLive?: boolean | undefined;
 	/** 5.31 (Chamber-OS addendum 41): a node between the label and the control, in a `.aura-field__addon` box with the
 	 * id `{id}-addon`. TextField and Textarea add that id to the input's `aria-describedby`; a custom control should too. */
 	labelAddon?: React$1.ReactNode | undefined;
@@ -2280,8 +2306,6 @@ export declare const STRINGS: {
 export declare const TileGrid: React$1.ForwardRefExoticComponent<TileGridProps & React$1.RefAttributes<HTMLUListElement>>;
 export declare const Sparkline: React$1.ForwardRefExoticComponent<SparklineProps & React$1.RefAttributes<SVGSVGElement>>;
 export declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
-/** ActionBar — a bar stuck to the bottom of the screen or of a card: a status line and the form's or selection's
- * actions. It is `position: sticky`, so it stays in the flow at the end of its parent and never covers the last field. */
 export declare const ActionBar: React$1.ForwardRefExoticComponent<ActionBarProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Separator — a 1px `aura-border-default` rule between groups of content (4.20). Decorative by default (hidden from
  * screen readers); `decorative={false}` makes it a `role="separator"` that is announced. */

package/dist/styles.css

@@ -525,6 +525,9 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-field__hint, .aura-field__error { display: flex; align-items: flex-start; gap: var(--aura-space-1); margin: 0; font-size: max(12px, .75rem); line-height: 1.5; color: var(--aura-fg-secondary); }
 .aura-field__error { color: var(--aura-fg-danger); }
 .aura-field__error .aura-icon { margin-top: 2px; }
+/* 5.68 (Chamber-OS 184): an `errorLive` error line waits in the page, empty, until there is an error. Out of the
+ * flow (an absolute child takes no gap) and clipped; the screen reader still has the live region. */
+.aura-field__error:empty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 /* 5.31 (Chamber-OS addendum 41): TextField/Textarea `labelAddon`, between the label and the box, in the field's gap. */
 .aura-field__addon { min-width: 0; font-size: max(13px, .8125rem); line-height: 1.5; color: var(--aura-fg-primary); }
 .aura-field.is-disabled .aura-field__label { color: var(--aura-fg-secondary); }
@@ -2267,6 +2270,32 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-actionbar__start:empty { display: none; }
 @container aura-actionbar (min-width: 640px) { .aura-actionbar__start { order: -1; } }
 @container aura-actionbar (max-width: 639.98px) { .aura-actionbar__inner.has-start > .aura-actionbar__status:not(:empty) { flex-basis: 100%; } }
+/* 5.69 (Chamber-OS 185): look="edge" / edgeBelow — PageHeader's edge strip (5.48): the screen's full width, on the
+ * bottom edge or on a BottomNav, a top border only, the home-indicator inset inside it. Fixed, so it spans the screen
+ * and not its parent; as PageHeader's bar, the page gains its height at the end (the shell's content, else the body)
+ * and as scroll-padding — --aura-actionbar-height, measured on the client, 60px until then — so the page's end and a
+ * focused field scroll clear of it. On a screen 30rem tall or less it is static, in the flow, as every bar (5.48/5.49). */
+.aura-actionbar--edge:not(.is-idle) { border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; }
+@media (min-height: 30.00125rem) {
+  .aura-actionbar--edge:not(.is-idle) { position: fixed; left: 0; right: 0; width: auto; bottom: var(--aura-bottomnav-offset, 0px); margin: 0; padding-bottom: max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px)); }
+  :root:has(.aura-actionbar--edge:not(.is-idle)) { --aura-actionbar-space: calc(var(--aura-actionbar-height, 60px) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-actionbar-space); }
+  :root:has(.aura-actionbar--edge:not(.is-idle)) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-actionbar-space)); }
+  :root:has(.aura-actionbar--edge:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
+}
+@media (max-width: 639.98px) { .aura-actionbar--edge-below-sm:not(.is-idle) { border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; } }
+@media (max-width: 639.98px) and (min-height: 30.00125rem) {
+  .aura-actionbar--edge-below-sm:not(.is-idle) { position: fixed; left: 0; right: 0; width: auto; bottom: var(--aura-bottomnav-offset, 0px); margin: 0; padding-bottom: max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px)); }
+  :root:has(.aura-actionbar--edge-below-sm:not(.is-idle)) { --aura-actionbar-space: calc(var(--aura-actionbar-height, 60px) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-actionbar-space); }
+  :root:has(.aura-actionbar--edge-below-sm:not(.is-idle)) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-actionbar-space)); }
+  :root:has(.aura-actionbar--edge-below-sm:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
+}
+@media (max-width: 767.98px) { .aura-actionbar--edge-below-md:not(.is-idle) { border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; } }
+@media (max-width: 767.98px) and (min-height: 30.00125rem) {
+  .aura-actionbar--edge-below-md:not(.is-idle) { position: fixed; left: 0; right: 0; width: auto; bottom: var(--aura-bottomnav-offset, 0px); margin: 0; padding-bottom: max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px)); }
+  :root:has(.aura-actionbar--edge-below-md:not(.is-idle)) { --aura-actionbar-space: calc(var(--aura-actionbar-height, 60px) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-actionbar-space); }
+  :root:has(.aura-actionbar--edge-below-md:not(.is-idle)) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-actionbar-space)); }
+  :root:has(.aura-actionbar--edge-below-md:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
+}
 
 /* ---------- 4.20: Separator ---------- */
 .aura-separator { flex: none; align-self: stretch; height: 1px; margin: var(--aura-separator-space, 0) 0; background: var(--aura-border-default); border: 0; }

package/dist/styles.layer.css

@@ -527,6 +527,9 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-field__hint, .aura-field__error { display: flex; align-items: flex-start; gap: var(--aura-space-1); margin: 0; font-size: max(12px, .75rem); line-height: 1.5; color: var(--aura-fg-secondary); }
 .aura-field__error { color: var(--aura-fg-danger); }
 .aura-field__error .aura-icon { margin-top: 2px; }
+/* 5.68 (Chamber-OS 184): an `errorLive` error line waits in the page, empty, until there is an error. Out of the
+ * flow (an absolute child takes no gap) and clipped; the screen reader still has the live region. */
+.aura-field__error:empty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 /* 5.31 (Chamber-OS addendum 41): TextField/Textarea `labelAddon`, between the label and the box, in the field's gap. */
 .aura-field__addon { min-width: 0; font-size: max(13px, .8125rem); line-height: 1.5; color: var(--aura-fg-primary); }
 .aura-field.is-disabled .aura-field__label { color: var(--aura-fg-secondary); }
@@ -2269,6 +2272,32 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-actionbar__start:empty { display: none; }
 @container aura-actionbar (min-width: 640px) { .aura-actionbar__start { order: -1; } }
 @container aura-actionbar (max-width: 639.98px) { .aura-actionbar__inner.has-start > .aura-actionbar__status:not(:empty) { flex-basis: 100%; } }
+/* 5.69 (Chamber-OS 185): look="edge" / edgeBelow — PageHeader's edge strip (5.48): the screen's full width, on the
+ * bottom edge or on a BottomNav, a top border only, the home-indicator inset inside it. Fixed, so it spans the screen
+ * and not its parent; as PageHeader's bar, the page gains its height at the end (the shell's content, else the body)
+ * and as scroll-padding — --aura-actionbar-height, measured on the client, 60px until then — so the page's end and a
+ * focused field scroll clear of it. On a screen 30rem tall or less it is static, in the flow, as every bar (5.48/5.49). */
+.aura-actionbar--edge:not(.is-idle) { border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; }
+@media (min-height: 30.00125rem) {
+  .aura-actionbar--edge:not(.is-idle) { position: fixed; left: 0; right: 0; width: auto; bottom: var(--aura-bottomnav-offset, 0px); margin: 0; padding-bottom: max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px)); }
+  :root:has(.aura-actionbar--edge:not(.is-idle)) { --aura-actionbar-space: calc(var(--aura-actionbar-height, 60px) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-actionbar-space); }
+  :root:has(.aura-actionbar--edge:not(.is-idle)) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-actionbar-space)); }
+  :root:has(.aura-actionbar--edge:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
+}
+@media (max-width: 639.98px) { .aura-actionbar--edge-below-sm:not(.is-idle) { border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; } }
+@media (max-width: 639.98px) and (min-height: 30.00125rem) {
+  .aura-actionbar--edge-below-sm:not(.is-idle) { position: fixed; left: 0; right: 0; width: auto; bottom: var(--aura-bottomnav-offset, 0px); margin: 0; padding-bottom: max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px)); }
+  :root:has(.aura-actionbar--edge-below-sm:not(.is-idle)) { --aura-actionbar-space: calc(var(--aura-actionbar-height, 60px) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-actionbar-space); }
+  :root:has(.aura-actionbar--edge-below-sm:not(.is-idle)) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-actionbar-space)); }
+  :root:has(.aura-actionbar--edge-below-sm:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
+}
+@media (max-width: 767.98px) { .aura-actionbar--edge-below-md:not(.is-idle) { border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; } }
+@media (max-width: 767.98px) and (min-height: 30.00125rem) {
+  .aura-actionbar--edge-below-md:not(.is-idle) { position: fixed; left: 0; right: 0; width: auto; bottom: var(--aura-bottomnav-offset, 0px); margin: 0; padding-bottom: max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px)); }
+  :root:has(.aura-actionbar--edge-below-md:not(.is-idle)) { --aura-actionbar-space: calc(var(--aura-actionbar-height, 60px) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-actionbar-space); }
+  :root:has(.aura-actionbar--edge-below-md:not(.is-idle)) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-actionbar-space)); }
+  :root:has(.aura-actionbar--edge-below-md:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
+}
 
 /* ---------- 4.20: Separator ---------- */
 .aura-separator { flex: none; align-self: stretch; height: 1px; margin: var(--aura-separator-space, 0) 0; background: var(--aura-border-default); border: 0; }

package/package.json

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