@jirawatpyk/aura-react 5.25.0 → 5.26.0

package/dist/esm/Accordion.js

@@ -49,6 +49,8 @@ const Accordion = React.forwardRef(function Accordion2(props, ref) {
       {
         type: "button",
         id: bid,
+        "aria-labelledby": it.description ? bid + "-title" : void 0,
+        "aria-describedby": it.description ? bid + "-desc" : void 0,
         "aria-expanded": on,
         "aria-controls": pid,
         disabled: it.disabled,
@@ -57,9 +59,19 @@ const Accordion = React.forwardRef(function Accordion2(props, ref) {
         }
       },
       it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
-      /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__title" }, it.title, it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__desc" }, it.description) : null),
+      /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__title" }, /* @__PURE__ */ React.createElement("span", { id: it.description ? bid + "-title" : void 0 }, it.title), it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__desc", id: bid + "-desc" }, it.description) : null),
       /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-accordion__chevron" })
-    )), /* @__PURE__ */ React.createElement("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content));
+    )), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        id: pid,
+        role: "region",
+        "aria-labelledby": it.description ? bid + "-title" : bid,
+        className: "aura-accordion__panel",
+        hidden: !on
+      },
+      it.content
+    ));
   }));
 });
 export {

package/dist/esm/Checkbox.js

@@ -33,6 +33,7 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
       "Checkbox `label` is only the accessible name: it is not shown. In 6.0 it will be shown beside the box, like Switch and TextField. For visible text now pass it as children; for a bare box (a table row) add `hideLabel`."
     );
   const descId = props.description ? (props.id || auto) + "-desc" : void 0;
+  const labelId = labelled && descId && !props["aria-label"] && !props["aria-labelledby"] ? (props.id || auto) + "-label" : void 0;
   const ha = props.hitArea;
   const hit = !labelled && ha && ha !== "box" ? ha === "target" ? { x: 4, y: 4 } : ha : null;
   return /* @__PURE__ */ React.createElement(
@@ -61,7 +62,8 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
         tabIndex: props.tabIndex,
         disabled: props.disabled,
         "aria-describedby": cx(props["aria-describedby"], descId) || void 0,
-        "aria-label": labelled ? void 0 : props.label,
+        "aria-label": (labelled ? void 0 : props.label) || props["aria-label"] || void 0,
+        "aria-labelledby": labelId || props["aria-labelledby"],
         onChange: function(e) {
           st[1](e.target.checked);
         }
@@ -69,7 +71,7 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
     ),
     /* @__PURE__ */ React.createElement("span", { className: "aura-check__box", "aria-hidden": true }, props.indeterminate ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconMinus, null), size: 12, strokeWidth: 3 }) : on ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 12, strokeWidth: 3 }) : null),
     !labelled && props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", id: descId }, props.description) : null,
-    labelled ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-check__label" }, text), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__desc", id: descId }, props.description) : null) : null
+    labelled ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-check__label", id: labelId }, text), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__desc", id: descId }, props.description) : null) : null
   );
 });
 export {

package/dist/esm/Combobox.js

@@ -234,6 +234,8 @@ const Combobox = React.forwardRef(
           id: optId(i),
           role: "option",
           "data-idx": i,
+          "aria-labelledby": o.description ? optId(i) + "-label" : void 0,
+          "aria-describedby": o.description ? optId(i) + "-desc" : void 0,
           "aria-selected": isSel,
           "aria-disabled": blocked || void 0,
           className: cx(
@@ -253,7 +255,7 @@ const Combobox = React.forwardRef(
           }
         },
         o.icon ? /* @__PURE__ */ React.createElement(Icon, { name: o.icon }) : null,
-        /* @__PURE__ */ React.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-combo__label" }, o.label), o.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-combo__desc" }, o.description) : null),
+        /* @__PURE__ */ React.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-combo__label", id: o.description ? optId(i) + "-label" : void 0 }, o.label), o.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-combo__desc", id: optId(i) + "-desc" }, o.description) : null),
         isSel ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), className: "aura-combo__check" }) : null
       );
     }

package/dist/esm/Command.js

@@ -202,6 +202,8 @@ function Command(props) {
                     key: it.id,
                     id: optId(n),
                     role: "option",
+                    "aria-labelledby": it.description ? optId(n) + "-label" + (it.shortcut ? " " + optId(n) + "-kbd" : "") : void 0,
+                    "aria-describedby": it.description ? optId(n) + "-desc" : void 0,
                     "aria-selected": n === active,
                     "aria-disabled": it.disabled || void 0,
                     className: cx(
@@ -220,8 +222,8 @@ function Command(props) {
                     }
                   },
                   it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : null,
-                  /* @__PURE__ */ React.createElement("span", { className: "aura-command__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-command__label" }, it.label), it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-command__desc" }, it.description) : null),
-                  it.shortcut ? /* @__PURE__ */ React.createElement("kbd", { className: "aura-command__kbd" }, it.shortcut) : null
+                  /* @__PURE__ */ React.createElement("span", { className: "aura-command__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-command__label", id: it.description ? optId(n) + "-label" : void 0 }, it.label), it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-command__desc", id: optId(n) + "-desc" }, it.description) : null),
+                  it.shortcut ? /* @__PURE__ */ React.createElement("kbd", { className: "aura-command__kbd", id: it.description ? optId(n) + "-kbd" : void 0 }, it.shortcut) : null
                 );
               })
             );

package/dist/esm/Container.js

@@ -3,13 +3,23 @@ import * as React from "react";
 import { cx } from "./internal.js";
 const h = React.createElement;
 const Container = React.forwardRef(function Container2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
   return h(
     props.as || "div",
-    {
+    Object.assign(attrs, {
       ref,
-      className: cx("aura-container", props.size === "narrow" && "is-narrow", props.className),
+      className: cx(
+        "aura-container",
+        props.size === "narrow" && "is-narrow",
+        props.align === "start" && "is-start",
+        props.className
+      ),
       style: props.style
-    },
+    }),
     props.children
   );
 });

package/dist/esm/DataTable.js

@@ -1318,6 +1318,10 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       "data-density": props.density,
       className: cx(
         "aura-table",
+        /* 5.26 (Chamber-OS 127): bleed and bordered={false}; the outermost element carries aura-bleed. */
+        props.bleed && "aura-bleed-frame",
+        props.bleed && !levels.length && "aura-bleed",
+        props.bordered === false && "aura-table--borderless",
         stacked && "aura-table--stacked",
         noCardSel && "aura-table--cards-nosel",
         scrolledX[0] && "is-scrolled-x",
@@ -1415,7 +1419,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       out
     );
   }
-  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-table-box", props.className) }, out);
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-table-box", props.bleed && "aura-bleed", props.className) }, out);
 });
 const DataTable2 = DataTableImpl;
 export {

package/dist/esm/DatePicker.js

@@ -663,7 +663,9 @@ export {
   Calendar,
   DatePicker,
   DateRangePicker,
+  allowedDate,
   formatDate,
   parseDate2 as parseDate,
+  useCalendarPopover,
   useFormatDate
 };

package/dist/esm/FilterDateRange.js

@@ -0,0 +1,157 @@
+'use client';
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { Calendar, allowedDate, useCalendarPopover } from "./DatePicker.js";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+import { IconChevronDown } from "./icons.js";
+import { cx, trapTab, uid, useMaybeControlled, useMergedRef } from "./internal.js";
+import { useAuraLocale } from "./locale.js";
+import { dateText, defaultCalendar, formatDateRange } from "./dates.js";
+const NONE = { start: null, end: null };
+const FilterDateRange = React.forwardRef(
+  function FilterDateRange2(props, ref) {
+    const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
+    const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
+    const st = useMaybeControlled(props.value, props.defaultValue || NONE, props.onChange);
+    const raw = st[0] || NONE;
+    const v = raw.start && raw.end ? raw.start <= raw.end ? raw : { start: raw.end, end: raw.start } : NONE;
+    const draft = React.useState(null);
+    const boxRef = React.useRef(null), faceRef = React.useRef(null);
+    const pop = useCalendarPopover(boxRef);
+    const anyLabel = props.anyLabel || dt.anyTime;
+    const value = v.start && v.end ? formatDateRange(v.start, v.end, { locale, calendar }) : anyLabel;
+    const setFace = useMergedRef(ref, faceRef);
+    const limits = {
+      min: props.min,
+      max: props.max,
+      today: props.today,
+      timeZone: props.timeZone || ctx.timeZone,
+      isDateDisabled: props.isDateDisabled
+    };
+    function close() {
+      pop.setOpen(false);
+      draft[1](null);
+      if (faceRef.current) faceRef.current.focus();
+    }
+    function choose(r) {
+      if (r.start !== raw.start || r.end !== raw.end) st[1](r);
+      close();
+    }
+    function pick(iso) {
+      if (!iso) return;
+      if (!draft[0]) {
+        draft[1](iso);
+        return;
+      }
+      const a = draft[0];
+      choose(a <= iso ? { start: a, end: iso } : { start: iso, end: a });
+    }
+    const isAny = !v.start || !v.end;
+    const attrs = {};
+    Object.keys(props).forEach(function(k) {
+      if (k === "style" || /^(aria|data)-/.test(k) && k !== "aria-label")
+        attrs[k] = props[k];
+    });
+    const presetBtn = function(label, r, on, key) {
+      return /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          key,
+          size: "sm",
+          variant: "ghost",
+          touchHeight: true,
+          disabled: !!r.start && !!r.end && !(allowedDate(r.start, limits) && allowedDate(r.end, limits)),
+          className: cx("aura-filterdate__preset", on && "is-selected"),
+          "aria-pressed": on,
+          onClick: function() {
+            choose(r);
+          }
+        },
+        label
+      );
+    };
+    const cal = pop.open && pop.mounted && pop.pos ? createPortal(
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: pop.popRef,
+          id: dialogId,
+          role: "dialog",
+          "aria-modal": false,
+          "aria-label": props.label,
+          className: "aura-cal__popover aura-filterdate__pop",
+          style: Object.assign({}, pop.pos, {
+            maxHeight: window.innerHeight - (pop.pos.top != null ? pop.pos.top : pop.pos.bottom) - 8
+          }),
+          onKeyDown: function(e) {
+            if (e.key === "Escape") {
+              e.stopPropagation();
+              close();
+            } else trapTab(e, pop.popRef.current);
+          }
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "aura-filterdate__presets" }, presetBtn(anyLabel, NONE, isAny, "__any"), (props.presets || []).map(function(p, i) {
+          return presetBtn(
+            p.label,
+            p.range,
+            !isAny && p.range.start === v.start && p.range.end === v.end,
+            "p" + i
+          );
+        })),
+        /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "aura-cal__hint", "aria-live": "polite" }, draft[0] ? dt.chooseEnd : dt.chooseStart), /* @__PURE__ */ React.createElement(
+          Calendar,
+          {
+            range: true,
+            locale,
+            calendar,
+            weekStartsOn: props.weekStartsOn,
+            min: props.min,
+            max: props.max,
+            timeZone: props.timeZone,
+            today: props.today,
+            isDateDisabled: props.isDateDisabled,
+            start: draft[0] || v.start,
+            end: draft[0] ? null : v.end,
+            focus: draft[0] || v.start,
+            footer: false,
+            onSelect: pick
+          }
+        ))
+      ),
+      document.body
+    ) : null;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: boxRef,
+        className: cx("aura-filterselect", pop.open && "is-open", props.disabled && "is-disabled", props.className)
+      },
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          ...attrs,
+          ref: setFace,
+          id,
+          type: "button",
+          className: "aura-filterselect__face",
+          disabled: props.disabled,
+          "aria-label": props["aria-label"] || props.label + ": " + value,
+          "aria-haspopup": "dialog",
+          "aria-expanded": pop.open,
+          "aria-controls": pop.open ? dialogId : void 0,
+          onClick: function() {
+            pop.setOpen(!pop.open);
+            draft[1](null);
+          }
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__name" }, props.label),
+        /* @__PURE__ */ React.createElement("span", { className: "aura-filterselect__value" }, value),
+        /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-filterselect__chevron" })
+      )
+    ), cal);
+  }
+);
+export {
+  FilterDateRange
+};

package/dist/esm/RadioGroup.js

@@ -34,8 +34,9 @@ const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
       disabled: props.disabled
     },
     props.label ? /* @__PURE__ */ React.createElement("legend", { className: "aura-field__label" }, props.label, props.required ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null) : null,
-    /* @__PURE__ */ React.createElement("div", { className: cx("aura-radio-group__list", props.orientation === "horizontal" && "is-horizontal") }, (props.options || []).map(function(o) {
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-radio-group__list", props.orientation === "horizontal" && "is-horizontal") }, (props.options || []).map(function(o, i) {
       const v = typeof o === "object" ? o : { value: o, label: o };
+      const oid = v.description ? id + "-opt-" + i : "";
       return /* @__PURE__ */ React.createElement("label", { key: v.value, className: cx("aura-choice", v.disabled && "is-disabled") }, /* @__PURE__ */ React.createElement(
         "input",
         {
@@ -45,12 +46,14 @@ const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
           value: v.value,
           disabled: v.disabled,
           required: props.required || void 0,
+          "aria-labelledby": oid ? oid + "-label" : void 0,
+          "aria-describedby": oid ? oid + "-desc" : void 0,
           checked: st[0] === v.value,
           onChange: function() {
             st[1](v.value);
           }
         }
-      ), /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-choice__label" }, v.label), v.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc" }, v.description) : null));
+      ), /* @__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
   );

package/dist/esm/Table.js

@@ -55,6 +55,9 @@ const Table = React.forwardRef(function Table2(props, ref) {
     stackBelow,
     align,
     bordered,
+    bleed,
+    stickyHeader,
+    maxHeight,
     stackStyle,
     rowHeight,
     className,
@@ -62,6 +65,11 @@ const Table = React.forwardRef(function Table2(props, ref) {
     ...rest
   } = props;
   const cards = !!stackBelow && stackStyle === "cards";
+  if (maxHeight != null && caption == null && !rest["aria-label"] && !rest["aria-labelledby"])
+    devWarnOnce(
+      "tbl-max-name",
+      "Table maxHeight: the box scrolls, so keyboard users get it as a focusable region \u2014 give the table a `caption` (captionHidden keeps it for screen readers) or an `aria-label` to name it."
+    );
   const labels = stackBelow ? headerLabels(children) : null;
   if (labels && !labels.length)
     devWarnOnce(
@@ -73,15 +81,19 @@ const Table = React.forwardRef(function Table2(props, ref) {
   const capId = uid();
   const wrap = React.useRef(null);
   const sc = React.useState(false), scrolls = sc[0];
+  const wide = React.useState(false);
   useIsoLayoutEffect(function() {
     const el = wrap.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     function check() {
-      sc[1](el.scrollWidth > el.clientWidth + 1);
+      const sideways = el.scrollWidth > el.clientWidth + 1;
+      wide[1](sideways);
+      sc[1](sideways || el.scrollHeight > el.clientHeight + 1);
     }
     check();
     const ro = new ResizeObserver(check);
     ro.observe(el);
+    if (el.firstElementChild) ro.observe(el.firstElementChild);
     return function() {
       ro.disconnect();
     };
@@ -90,11 +102,23 @@ const Table = React.forwardRef(function Table2(props, ref) {
     "div",
     {
       ref: wrap,
-      className: cx("aura-tbl-wrap", stackBelow && "is-stackable", bordered === false && "is-flush"),
+      className: cx(
+        "aura-tbl-wrap",
+        stackBelow && "is-stackable",
+        bordered === false && "is-flush",
+        /* 5.26 (Chamber-OS 127): the frame that bleeds; the outermost element carries aura-bleed. */
+        bleed && "aura-bleed-frame",
+        bleed && !cards && "aura-bleed",
+        /* 5.26 (Chamber-OS 129): stickyHeader pins to the page, or inside the box when it has a maxHeight. */
+        stickyHeader && (maxHeight != null ? "is-sticky-box" : "is-sticky-page"),
+        maxHeight != null && "has-max",
+        wide[0] && "is-wide"
+      ),
+      style: maxHeight != null ? { maxHeight: typeof maxHeight === "number" ? maxHeight + "px" : maxHeight } : void 0,
       "data-density": density || pageDensity,
       tabIndex: scrolls ? 0 : void 0,
-      role: scrolls && (caption != null || rest["aria-label"]) ? "region" : void 0,
-      "aria-labelledby": scrolls && caption != null ? capId : void 0,
+      role: scrolls && (caption != null || rest["aria-label"] || rest["aria-labelledby"]) ? "region" : void 0,
+      "aria-labelledby": scrolls ? caption != null ? capId : rest["aria-labelledby"] : void 0,
       "aria-label": scrolls && caption == null ? rest["aria-label"] : void 0
     },
     /* @__PURE__ */ React.createElement(
@@ -117,7 +141,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
       labels ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: labels }, children) : outer ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: null }, children) : children
     )
   );
-  return cards ? /* @__PURE__ */ React.createElement("div", { className: "aura-tbl-cards aura-tbl-cards--" + stackBelow }, table) : table;
+  return cards ? /* @__PURE__ */ React.createElement("div", { className: cx("aura-tbl-cards aura-tbl-cards--" + stackBelow, bleed && "aura-bleed") }, table) : table;
 });
 function section(tag, cls) {
   const C = React.forwardRef(function TableSection(props, ref) {

package/dist/esm/dates.js

@@ -56,6 +56,7 @@ const DATE_TEXT = {
     clearDates: "\u0E25\u0E49\u0E32\u0E07\u0E0A\u0E48\u0E27\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
     chooseStart: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19",
     chooseEnd: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14",
+    anyTime: "\u0E17\u0E38\u0E01\u0E0A\u0E48\u0E27\u0E07\u0E40\u0E27\u0E25\u0E32",
     dateUnavailable: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E19\u0E35\u0E49\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49 \u0E25\u0E2D\u0E07\u0E40\u0E1B\u0E34\u0E14\u0E1B\u0E0F\u0E34\u0E17\u0E34\u0E19\u0E14\u0E39\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E14\u0E49"
   },
   en: {
@@ -74,6 +75,7 @@ const DATE_TEXT = {
     clearDates: "Clear dates",
     chooseStart: "Choose the start date",
     chooseEnd: "Choose the end date",
+    anyTime: "Any time",
     dateUnavailable: "That date can't be chosen. Open the calendar to see the dates you can pick."
   },
   sv: {
@@ -92,6 +94,7 @@ const DATE_TEXT = {
     clearDates: "Rensa datumen",
     chooseStart: "V\xE4lj startdatum",
     chooseEnd: "V\xE4lj slutdatum",
+    anyTime: "N\xE4r som helst",
     dateUnavailable: "Det datumet g\xE5r inte att v\xE4lja. \xD6ppna kalendern f\xF6r att se vilka datum som g\xE5r."
   }
 };
@@ -116,6 +119,16 @@ function formatDate(iso, opts) {
   const loc = o.locale || "en";
   return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
 }
+function formatDateRange(start, end, opts) {
+  const o = opts || {}, a = fromISO(start), b = fromISO(end);
+  if (!a || !b) return "";
+  if (start > end) return formatDateRange(end, start, opts);
+  const loc = o.locale || "en", tag = localeTag(loc, o.calendar || defaultCalendar(loc)), f = PRESETS.short;
+  const k = tag + JSON.stringify(f);
+  if (!fmtCache[k]) fmtCache[k] = new Intl.DateTimeFormat(tag, f);
+  const F = fmtCache[k];
+  return F.formatRange ? F.formatRange(a, b).replace(/\s?(พ\.ศ\.|\bBE\b)\s?/g, " ").replace(/[\s\u2009\u202f]*[–-][\s\u2009\u202f]*/g, " \u2013 ").trim() : start === end ? formatDate(start, o) : formatDate(start, o) + " \u2013 " + formatDate(end, o);
+}
 let MONTHS = null;
 function monthIndex(word) {
   if (!MONTHS) {
@@ -188,6 +201,7 @@ export {
   fmt,
   fmtCache,
   formatDate,
+  formatDateRange,
   fromISO,
   localeTag,
   makeDate,

package/dist/esm/index.js

@@ -11,6 +11,7 @@ import { TextField } from "./TextField.js";
 import { Textarea } from "./Textarea.js";
 import { Select } from "./Select.js";
 import { FilterSelect } from "./FilterSelect.js";
+import { FilterDateRange } from "./FilterDateRange.js";
 import { RadioGroup } from "./RadioGroup.js";
 import { Switch } from "./Switch.js";
 import { Combobox, defaultFilter } from "./Combobox.js";
@@ -88,6 +89,7 @@ export {
   Field,
   FileUpload,
   FilterBar,
+  FilterDateRange,
   FilterSelect,
   FormErrorSummary,
   Grid,

package/dist/index.d.cts

@@ -236,6 +236,14 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	density?: "comfortable" | "compact" | undefined;
 	/** Table width in px below which rows render as stacked cards (phones). Try 640. It follows the table's own width, not the window. Since 4.20 the cards are the same markup as the grid, laid out by a container query, so any width is right before hydration and each row is in the HTML once. With `height` (virtual rows) the server can only send the first screenful; the rest of the cards arrive on hydration. */
 	stackBelow?: number | undefined;
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): as a direct child of a Card's content, the table spans the
+	 * card's full inner width — no side borders, no radius — keeping its header band and top rule; as the card's last
+	 * content (no footer, nothing after it) it drops its bottom rule and the card's radius closes it. Below the Card's
+	 * `flushBelow` width, and outside a Card, it does nothing. */
+	bleed?: boolean | undefined;
+	/** `false` drops the frame — border and radius — keeping the header band and the 24px gutter, for a table that sits
+	 * in a section without bleeding (5.26). Default `true`. */
+	bordered?: boolean | undefined;
 	className?: string | undefined;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
@@ -300,7 +308,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 	hideLabel?: boolean | undefined;
 	/** The visible label beside the box. */
 	children?: React$1.ReactNode | undefined;
-	/** Second line under the visible label, linked by `aria-describedby` after any id you pass there (5.11). */
+	/** Second line under the visible label, linked by `aria-describedby` after any id you pass there (5.11). Since 5.26
+	 * it is not part of the name: the box is named by the visible label alone, or by your `aria-label` /
+	 * `aria-labelledby` (Chamber-OS 125). */
 	description?: React$1.ReactNode | undefined;
 	onChange?: ((checked: boolean) => void) | undefined;
 	disabled?: boolean | undefined;
@@ -468,6 +478,7 @@ export interface CommandItem {
 	/** Items with the same group are listed together under its heading, in first-seen order. */
 	group?: string | undefined;
 	icon?: IconInput | undefined;
+	/** A second line; read after the item's name (label and shortcut), not as part of it (5.26). */
 	description?: string | undefined;
 	/** Extra words that find it ("invoice" → Billing). */
 	keywords?: string[] | undefined;
@@ -542,6 +553,8 @@ export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTM
 	 * readers keep the option's own text. */
 	allLabel?: string | undefined;
 }
+/** A RadioGroup option. `description` is a second line under the label; since 5.26 the radio is named by `label`
+ * alone and the description is read after it (`aria-describedby`), also when the option is disabled (Chamber-OS 125). */
 export type ChoiceOption = string | {
 	value: string;
 	label: string;
@@ -841,7 +854,7 @@ export interface DropdownMenuProps {
 export interface ComboboxOption {
 	value: string;
 	label: string;
-	/** Second line in the list; also searched. */
+	/** Second line in the list; also searched. Read after the option's name, not as part of it (5.26). */
 	description?: string | undefined;
 	/** Extra search terms (English name, phone, code…). */
 	keywords?: string[] | undefined;
@@ -1035,6 +1048,39 @@ export interface DateRange {
 	start: ISODate | null;
 	end: ISODate | null;
 }
+/** A FilterDateRange preset: a name and the range it sets (5.26). */
+export interface DateRangePreset {
+	label: string;
+	range: DateRange;
+}
+/** A compact date-range filter for FilterBar (5.26, Chamber-OS 128): "Submitted Any time ▾", one click to the range
+ * calendar. Dates as DateRangePicker: `locale` / `calendar` from the provider (Thai shows Buddhist-era years), `min`,
+ * `max`, `timeZone`, `weekStartsOn`. */
+export interface FilterDateRangeProps extends DateDisplayOptions, Pick<React$1.HTMLAttributes<HTMLButtonElement>, "style">, React$1.AriaAttributes, DataAttributes {
+	/** The filter's name: first on the face ("Submitted"), the popover's name, and the start of the face's accessible
+	 * name ("Submitted: Any time"). */
+	label: string;
+	value?: DateRange | undefined;
+	defaultValue?: DateRange | undefined;
+	/** Runs once a range is complete, a preset is picked, or "Any time" clears it — never on a lone start day, and
+	 * not when the same range is picked again. There is no form field: write the range to the URL or state here. */
+	onChange?: ((value: DateRange) => void) | undefined;
+	/** Choices beside the calendar (Last 7 days, This month…), each setting a whole range; one that reaches past
+	 * `min` / `max` or onto an `isDateDisabled` day is shown disabled. */
+	presets?: DateRangePreset[] | undefined;
+	/** The empty value and the choice that clears it. Default "Any time" in the date locale. */
+	anyLabel?: string | undefined;
+	min?: ISODate | "today" | undefined;
+	max?: ISODate | "today" | undefined;
+	isDateDisabled?: ((iso: ISODate) => boolean) | undefined;
+	weekStartsOn?: 0 | 1 | undefined;
+	timeZone?: string | undefined;
+	/** Today, given outright (ISO); wins over `timeZone`. */
+	today?: ISODate | undefined;
+	disabled?: boolean | undefined;
+	id?: string | undefined;
+	className?: string | undefined;
+}
 export interface DateRangePickerProps extends DateFieldProps {
 	value?: DateRange | undefined;
 	defaultValue?: DateRange | undefined;
@@ -1149,6 +1195,22 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	/** `false` (5.13) drops the frame — border, radius, background — and the outer cells' side padding, so the table
 	 * lines up with the content around it, e.g. flush inside a Card under its heading. Default `true`. */
 	bordered?: boolean | undefined;
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): as a direct child of a Card's content, the table spans the
+	 * card's full inner width — no side borders, no radius — keeping its header band and top rule, and its outer
+	 * cells' 24px padding keeps the text level with the card's content. As the card's last content it drops its
+	 * bottom rule and the card's radius closes it. Below the Card's `flushBelow` width, and outside a Card, it does
+	 * nothing. With `bordered={false}` too, the outer cells take the card's padding while it bleeds. */
+	bleed?: boolean | undefined;
+	/** Keep the header row in view while the rows scroll (5.26, Chamber-OS 129), with its band, its bottom rule and
+	 * above the body. Without `maxHeight` it pins to the page's scroll, under an AppShell's top bar
+	 * (`--aura-shell-bar-height`; set `--aura-table-sticky-top` for another offset). A table wider than its box
+	 * scrolls sideways instead and its header can't pin to the page then: give it `maxHeight`. Inside your own scroll
+	 * container within an AppShell set `--aura-table-sticky-top: 0px` or use `maxHeight`. With `maxHeight` the box
+	 * scrolls both ways and the header pins to its top. One header row. Stacked rows (`stackBelow`) have no visible header, so it
+	 * does nothing there. Default off. */
+	stickyHeader?: boolean | undefined;
+	/** Caps the table's box (px, or any CSS length such as `60vh`); the rows scroll inside it. (5.26) */
+	maxHeight?: number | string | undefined;
 	/** How stacked rows look (5.15, Chamber-OS 85): `list` (default) — one frame, rows divided by rules; `cards` —
 	 * each row its own framed card, spaced like DataTable's cards, with no frame around them. From the `stackBelow`
 	 * width up the table is unchanged. The table then sits in one more `div` (`.aura-tbl-cards`). */
@@ -1421,6 +1483,7 @@ export interface PaginationProps {
 export interface AccordionItem {
 	id: string;
 	title: React$1.ReactNode;
+	/** A second line under the title; read as the header button's description, not its name (5.26). */
 	description?: React$1.ReactNode | undefined;
 	content: React$1.ReactNode;
 	icon?: IconInput | undefined;
@@ -1548,6 +1611,10 @@ export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & Rea
 /** A compact filter for FilterBar (5.12): a small button reading "Status All ▾" that opens Select's list. The name
  * is the accessible name, the chosen option its value; forms, refs and the keyboard work as in Select. */
 export declare const FilterSelect: React$1.ForwardRefExoticComponent<FilterSelectProps & React$1.RefAttributes<HTMLSelectElement>>;
+/** A compact date-range filter for FilterBar (5.26, Chamber-OS 128): a face like FilterSelect's — "Submitted Any
+ * time ▾" — that opens the range calendar, with optional presets, in one click. `onChange` runs once a range is
+ * complete, a preset is picked or the range is cleared; never on a lone start day. */
+export declare const FilterDateRange: React$1.ForwardRefExoticComponent<FilterDateRangeProps & React$1.RefAttributes<HTMLButtonElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** One value, or with `multiple` any number (chips). Two call signatures so value/onChange are typed for each. */
@@ -1644,11 +1711,17 @@ export declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & Rea
 export declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLElement>>;
 /** Grid — equal columns. columns may be responsive ({ base: 1, md: 2, lg: 3 }), or use minItemWidth to fit as many as fit. */
 export declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLElement>>;
-/** Centred page column. */
-export interface ContainerProps {
+/** Centred page column. To name it (`aria-label`), render a landmark with `as="section"` (or `main`, `nav`): a
+ * plain `div` may not carry a name. */
+export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
 	/** `narrow` caps it at aura-container-narrow (720px). Default `default` (1280px). */
 	size?: "default" | "narrow" | undefined;
+	/** `start` puts the column at the start edge (left; right in RTL) instead of centring it — a form board beside
+	 * the page's start (5.26, Chamber-OS 126). Default `center`. */
+	align?: "center" | "start" | undefined;
 	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	/** Utilities that set `max-width` or `margin` (e.g. `max-w-[672px] mx-0`) are supported with `styles.layer.css`,
+	 * where a utility beats `.aura-container` (5.26). */
 	className?: string | undefined;
 	style?: React$1.CSSProperties | undefined;
 	children?: React$1.ReactNode | undefined;