@jirawatpyk/aura-react 5.26.0 → 5.28.0

package/dist/esm/DataTable.js

@@ -1321,6 +1321,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         /* 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.bleed && props.bleedEnd && !levels.length && "aura-bleed-end",
         props.bordered === false && "aura-table--borderless",
         stacked && "aura-table--stacked",
         noCardSel && "aura-table--cards-nosel",
@@ -1419,7 +1420,19 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       out
     );
   }
-  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-table-box", props.bleed && "aura-bleed", props.className) }, out);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cx(
+        "aura-table-box",
+        props.bleed && "aura-bleed",
+        props.bleed && props.bleedEnd && "aura-bleed-end",
+        props.className
+      )
+    },
+    out
+  );
 });
 const DataTable2 = DataTableImpl;
 export {

package/dist/esm/Table.js

@@ -56,6 +56,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
     align,
     bordered,
     bleed,
+    bleedEnd,
     stickyHeader,
     maxHeight,
     stackStyle,
@@ -109,6 +110,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
         /* 5.26 (Chamber-OS 127): the frame that bleeds; the outermost element carries aura-bleed. */
         bleed && "aura-bleed-frame",
         bleed && !cards && "aura-bleed",
+        bleed && bleedEnd && !cards && "aura-bleed-end",
         /* 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",
@@ -141,7 +143,17 @@ 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: cx("aura-tbl-cards aura-tbl-cards--" + stackBelow, bleed && "aura-bleed") }, table) : table;
+  return cards ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cx(
+        "aura-tbl-cards aura-tbl-cards--" + stackBelow,
+        bleed && "aura-bleed",
+        bleed && bleedEnd && "aura-bleed-end"
+      )
+    },
+    table
+  ) : table;
 });
 function section(tag, cls) {
   const C = React.forwardRef(function TableSection(props, ref) {

package/dist/esm/Tag.js

@@ -1,16 +1,20 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, devWarnOnce, omit } from "./internal.js";
+import { cx, devWarnOnce, omit, useIsoLayoutEffect } from "./internal.js";
+import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./locale.js";
 import { IconCheck, IconX } from "./icons.js";
-function textOf(node) {
+function textOf(node, all) {
   if (node == null || typeof node === "boolean") return "";
   if (typeof node === "string" || typeof node === "number") return String(node);
-  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (Array.isArray(node))
+    return node.map(function(n) {
+      return textOf(n, all);
+    }).join("");
   if (React.isValidElement(node)) {
     const p = node.props;
-    return p["aria-hidden"] === true || p["aria-hidden"] === "true" ? "" : textOf(p.children);
+    return !all && (p["aria-hidden"] === true || p["aria-hidden"] === "true") ? "" : textOf(p.children, all);
   }
   return "";
 }
@@ -27,9 +31,29 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
     "removeLabel",
     "touchHeight"
   ]);
+  const textRef = React.useRef(null);
+  const cutState = React.useState(false), isCut = cutState[0];
+  const check = React.useCallback(function() {
+    const el = textRef.current;
+    if (el) cutState[1](el.scrollWidth > el.clientWidth + 1);
+  }, []);
+  useIsoLayoutEffect(check);
+  useIsoLayoutEffect(
+    function() {
+      const el = textRef.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(check);
+      ro.observe(el);
+      return function() {
+        ro.disconnect();
+      };
+    },
+    [check]
+  );
+  const fullText = isCut ? textOf(props.children, true).replace(/\s+/g, " ").trim() : "";
   const inner = [
     props.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
-    /* @__PURE__ */ React.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
+    /* @__PURE__ */ React.createElement("span", { key: "t", ref: textRef, className: "aura-tag__text", title: fullText || void 0 }, props.children)
   ];
   if (selectable) {
     return /* @__PURE__ */ React.createElement(
@@ -57,16 +81,19 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
       "tag-remove-label",
       'Tag: the remove button has no name \u2014 its children have no text. Pass removeLabel (e.g. "Remove Acme AB").'
     );
-  return /* @__PURE__ */ React.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      className: "aura-tag__remove",
-      "aria-label": props.removeLabel || t.remove(name),
-      onClick: props.onRemove
-    },
-    /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 12 })
-  ) : null);
+  return /* @__PURE__ */ React.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? function() {
+    const btn = /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "aura-tag__remove",
+        "aria-label": props.removeLabel || t.remove(name),
+        onClick: props.onRemove
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 12 })
+    );
+    return /* @__PURE__ */ React.createElement(Tooltip, { content: fullText, open: fullText ? void 0 : false }, btn);
+  }() : null);
 });
 export {
   Tag

package/dist/index.d.cts

@@ -236,11 +236,15 @@ 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
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): anywhere in a Card's content — also inside your own wrappers,
+	 * as long as they add no padding or frame and don't clip or scroll (5.27, 130) — the table spans the card's full inner width, no side borders
+	 * or radius, keeping its header band and top rule. As a direct child that is the card's last content (no footer,
+	 * nothing after it), or with `bleedEnd`, 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;
+	/** With `bleed`: the table ends the card even though it sits inside your wrappers — no bottom rule, the card's radius
+	 * closes it. Only when nothing follows it in the card and the Card has no `footer` (5.27). */
+	bleedEnd?: 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;
@@ -433,6 +437,8 @@ export interface FormErrorSummaryProps {
 /** An applied filter, shown as a removable chip. */
 export interface ActiveFilter {
 	id: string;
+	/** The chip's text, "{filter}: {value}". It takes its own width in the chips row; only a chip wider than the row is
+	 * cut, and then its full text shows on hover and on the remove button's focus (5.28). */
 	label: React$1.ReactNode;
 	onRemove: () => void;
 }
@@ -1195,12 +1201,16 @@ 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. */
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): anywhere in a Card's content — also inside your own wrappers,
+	 * as long as they add no padding or frame and don't clip or scroll (5.27, 130) — the table spans the card's full inner width, no side borders
+	 * or radius, keeping its header band and top rule, and its 24px outer cells keep the text level with the card's
+	 * content. As a direct child that is the card's last content, or with `bleedEnd`, 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;
+	/** With `bleed`: the table ends the card even though it sits inside your wrappers — only when nothing follows it in
+	 * the card and the Card has no `footer` (5.27). */
+	bleedEnd?: 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
@@ -1720,8 +1730,9 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 	 * 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). */
+	/** Utilities that set `max-width`, `margin` or `padding` (e.g. `max-w-[672px] mx-0`, your own gutter) are supported
+	 * with `styles.layer.css`, where a utility beats `.aura-container` (5.26; padding 5.27). Also exported from
+	 * `/server` for Server Components (5.27). */
 	className?: string | undefined;
 	style?: React$1.CSSProperties | undefined;
 	children?: React$1.ReactNode | undefined;

package/dist/index.d.ts

@@ -236,11 +236,15 @@ 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
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): anywhere in a Card's content — also inside your own wrappers,
+	 * as long as they add no padding or frame and don't clip or scroll (5.27, 130) — the table spans the card's full inner width, no side borders
+	 * or radius, keeping its header band and top rule. As a direct child that is the card's last content (no footer,
+	 * nothing after it), or with `bleedEnd`, 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;
+	/** With `bleed`: the table ends the card even though it sits inside your wrappers — no bottom rule, the card's radius
+	 * closes it. Only when nothing follows it in the card and the Card has no `footer` (5.27). */
+	bleedEnd?: 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;
@@ -433,6 +437,8 @@ export interface FormErrorSummaryProps {
 /** An applied filter, shown as a removable chip. */
 export interface ActiveFilter {
 	id: string;
+	/** The chip's text, "{filter}: {value}". It takes its own width in the chips row; only a chip wider than the row is
+	 * cut, and then its full text shows on hover and on the remove button's focus (5.28). */
 	label: React$1.ReactNode;
 	onRemove: () => void;
 }
@@ -1195,12 +1201,16 @@ 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. */
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): anywhere in a Card's content — also inside your own wrappers,
+	 * as long as they add no padding or frame and don't clip or scroll (5.27, 130) — the table spans the card's full inner width, no side borders
+	 * or radius, keeping its header band and top rule, and its 24px outer cells keep the text level with the card's
+	 * content. As a direct child that is the card's last content, or with `bleedEnd`, 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;
+	/** With `bleed`: the table ends the card even though it sits inside your wrappers — only when nothing follows it in
+	 * the card and the Card has no `footer` (5.27). */
+	bleedEnd?: 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
@@ -1720,8 +1730,9 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 	 * 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). */
+	/** Utilities that set `max-width`, `margin` or `padding` (e.g. `max-w-[672px] mx-0`, your own gutter) are supported
+	 * with `styles.layer.css`, where a utility beats `.aura-container` (5.26; padding 5.27). Also exported from
+	 * `/server` for Server Components (5.27). */
 	className?: string | undefined;
 	style?: React$1.CSSProperties | undefined;
 	children?: React$1.ReactNode | undefined;

package/dist/server/index.cjs

@@ -34,6 +34,7 @@ __export(server_exports, {
   Avatar: () => ServerAvatar,
   Badge: () => ServerBadge,
   Card: () => ServerCard,
+  Container: () => Container,
   EmptyState: () => ServerEmptyState,
   Icon: () => Icon,
   STRINGS: () => STRINGS,
@@ -605,14 +606,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h3 = String(hex).trim().replace("#", "");
-  if (h3.length === 3)
-    h3 = h3.split("").map(function(c) {
+  let h4 = String(hex).trim().replace("#", "");
+  if (h4.length === 3)
+    h4 = h4.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h3)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h4)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h3.slice(i, i + 2), 16) / 255;
+    return parseInt(h4.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1318,3 +1319,28 @@ function ServerStat(props) {
 function ServerAvatar(props) {
   return avatarElement(props, void 0, null, void 0);
 }
+
+// src/Container.tsx
+var React4 = __toESM(require("react"), 1);
+var h3 = React4.createElement;
+var Container = React4.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 h3(
+    props.as || "div",
+    Object.assign(attrs, {
+      ref,
+      className: cx(
+        "aura-container",
+        props.size === "narrow" && "is-narrow",
+        props.align === "start" && "is-start",
+        props.className
+      ),
+      style: props.style
+    }),
+    props.children
+  );
+});

package/dist/server/index.d.cts

@@ -386,6 +386,24 @@ declare function ServerAvatar(props: AvatarProps): React$1.ReactElement;
  * render names with `/server`'s Icon (the two entries keep separate registries). */
 export declare function registerIcons(icons: readonly AuraIcon[]): void;
 export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
+/** 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`, `margin` or `padding` (e.g. `max-w-[672px] mx-0`, your own gutter) are supported
+	 * with `styles.layer.css`, where a utility beats `.aura-container` (5.26; padding 5.27). Also exported from
+	 * `/server` for Server Components (5.27). */
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+	children?: React$1.ReactNode | undefined;
+}
+/** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
+export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
 
 export {
 	ServerAlert as Alert,

package/dist/server/index.d.ts

@@ -386,6 +386,24 @@ declare function ServerAvatar(props: AvatarProps): React$1.ReactElement;
  * render names with `/server`'s Icon (the two entries keep separate registries). */
 export declare function registerIcons(icons: readonly AuraIcon[]): void;
 export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
+/** 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`, `margin` or `padding` (e.g. `max-w-[672px] mx-0`, your own gutter) are supported
+	 * with `styles.layer.css`, where a utility beats `.aura-container` (5.26; padding 5.27). Also exported from
+	 * `/server` for Server Components (5.27). */
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+	children?: React$1.ReactNode | undefined;
+}
+/** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
+export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
 
 export {
 	ServerAlert as Alert,

package/dist/server/index.js

@@ -546,14 +546,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h3 = String(hex).trim().replace("#", "");
-  if (h3.length === 3)
-    h3 = h3.split("").map(function(c) {
+  let h4 = String(hex).trim().replace("#", "");
+  if (h4.length === 3)
+    h4 = h4.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h3)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h4)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h3.slice(i, i + 2), 16) / 255;
+    return parseInt(h4.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1259,11 +1259,37 @@ function ServerStat(props) {
 function ServerAvatar(props) {
   return avatarElement(props, void 0, null, void 0);
 }
+
+// src/Container.tsx
+import * as React4 from "react";
+var h3 = React4.createElement;
+var Container = React4.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 h3(
+    props.as || "div",
+    Object.assign(attrs, {
+      ref,
+      className: cx(
+        "aura-container",
+        props.size === "narrow" && "is-narrow",
+        props.align === "start" && "is-start",
+        props.className
+      ),
+      style: props.style
+    }),
+    props.children
+  );
+});
 export {
   ServerAlert as Alert,
   ServerAvatar as Avatar,
   ServerBadge as Badge,
   ServerCard as Card,
+  Container,
   ServerEmptyState as EmptyState,
   Icon,
   STRINGS,

package/dist/styles.css

@@ -321,6 +321,7 @@ a.aura-icon-btn { text-decoration: none; }
   .aura-btn.aura-btn--touch.aura-btn--full { height: auto; min-height: var(--aura-touch-target); }
   .aura-icon-btn.aura-icon-btn--touch { width: var(--aura-touch-target); height: var(--aura-touch-target); }
   .aura-tag.aura-tag--touch { min-height: var(--aura-touch-target); }
+  .aura-filterbar__clear { min-height: var(--aura-touch-target); } /* 5.28 (Chamber-OS 133) */
 }
 /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
 @media (pointer: coarse) {
@@ -662,21 +663,22 @@ a.aura-icon-btn { text-decoration: none; }
 @media (max-width: 639.98px) { .aura-card.aura-card--flush-below-sm, .aura-card.aura-card--flush-below-sm:hover { border-color: transparent; background: transparent; box-shadow: none; --aura-card-bleed: 0px; } }
 @media (max-width: 767.98px) { .aura-card.aura-card--flush-below-md, .aura-card.aura-card--flush-below-md:hover { border-color: transparent; background: transparent; box-shadow: none; --aura-card-bleed: 0px; } }
 @media (max-width: 1023.98px) { .aura-card.aura-card--flush-below-lg, .aura-card.aura-card--flush-below-lg:hover { border-color: transparent; background: transparent; box-shadow: none; --aura-card-bleed: 0px; } }
-/* 5.26 (Chamber-OS 127): bleed — a table that is a direct child of a Card's content spans its inner width; the side
+/* 5.26 (Chamber-OS 127): bleed — a table anywhere in a Card's content (5.27, 130: through the app's own unpadded
+ * wrappers; a nested Card resets the reach) spans its inner width; the side
  * borders and radius go (a 0px bleed — a flush card — keeps them: 1px - min(1px, 0) = 1px). As the card's last content
  * it also drops its bottom rule and the card's radius closes it. */
 /* Two classes deep so it beats a stackable Table's width: 100%. `* 1000` turns any bleed into a 0 radius; 0 keeps it. */
-.aura-card .aura-card__body > .aura-bleed { margin-inline: calc(-1 * var(--aura-card-bleed)); width: auto; }
+.aura-card .aura-card__body .aura-bleed { margin-inline: calc(-1 * var(--aura-card-bleed)); width: auto; }
 /* A Table with bordered={false} too: its outer cells take the bleed (0 where the card is flush, as before). */
-.aura-card__body > .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child,
-.aura-card__body > .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: var(--aura-card-bleed); }
-.aura-card__body > .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child,
-.aura-card__body > .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: var(--aura-card-bleed); }
-.aura-card__body > .aura-bleed.aura-bleed-frame, .aura-card__body > .aura-bleed .aura-bleed-frame {
+.aura-card__body .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child,
+.aura-card__body .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: var(--aura-card-bleed); }
+.aura-card__body .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child,
+.aura-card__body .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: var(--aura-card-bleed); }
+.aura-card__body .aura-bleed.aura-bleed-frame, .aura-card__body .aura-bleed .aura-bleed-frame {
   border-inline-width: calc(1px - min(1px, var(--aura-card-bleed))); border-radius: max(0px, var(--aura-card-radius) - var(--aura-card-bleed) * 1000);
 }
-.aura-card__body:last-child > .aura-bleed:last-child { margin-bottom: calc(-1 * var(--aura-card-bleed)); }
-.aura-card__body:last-child > .aura-bleed:last-child.aura-bleed-frame, .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame {
+:is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) { margin-bottom: calc(-1 * var(--aura-card-bleed)); }
+:is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end).aura-bleed-frame, :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame {
   border-bottom-width: calc(1px - min(1px, var(--aura-card-bleed)));
   border-bottom-left-radius: calc(var(--aura-card-radius) - min(1px, var(--aura-card-bleed)));
   border-bottom-right-radius: calc(var(--aura-card-radius) - min(1px, var(--aura-card-bleed)));
@@ -1502,6 +1504,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterbar__count { font-size: 13px; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
 .aura-filterbar__actions { display: flex; align-items: center; gap: var(--aura-space-2); }
 .aura-filterbar__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+/* 5.28 (Chamber-OS 132): an applied-filter chip takes its text's width, cut only when it is wider than the row. */
+.aura-filterbar__chips > .aura-tag { max-width: 100%; min-width: 0; }
+/* A long chip mustn't widen the bar or anything around it: the row's width comes from the bar, never from its chips.
+ * (So a FilterBar with only chips needs a width from its parent — it is full width in a block.) */
+.aura-filterbar__chips { contain: inline-size; }
+.aura-filterbar__chips > .aura-tag .aura-tag__text { max-width: none; min-width: 0; }
 .aura-filterbar__clear {
   border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
   font: inherit; font-size: 13px; font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
@@ -1788,7 +1796,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
   }
   /* 5.26: a bleeding list keeps its rows' text level with the Card's content (16px where it doesn't bleed). */
-  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
+  .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
 }
 @container aura-tbl (width < 640px) {
   .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
@@ -1812,7 +1820,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
   }
   /* 5.26: a bleeding list keeps its rows' text level with the Card's content (16px where it doesn't bleed). */
-  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
+  .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
 }
 
 /* 5.15 (Chamber-OS 85): stackStyle="cards" — each stacked row its own card (DataTable's card spacing), no outer frame.
@@ -1820,8 +1828,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl-cards { container: aura-tbl / inline-size; width: 100%; }
 @container aura-tbl (width < 768px) {
   .aura-tbl-cards--md > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
-  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-inline: var(--aura-card-bleed); }
-  .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-bottom: var(--aura-card-bleed); }
+  .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-inline: var(--aura-card-bleed); }
+  :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-bottom: var(--aura-card-bleed); }
   .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
   .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row {
     margin-bottom: var(--aura-space-2); padding: var(--aura-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
@@ -1833,8 +1841,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 @container aura-tbl (width < 640px) {
   .aura-tbl-cards--sm > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
-  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-inline: var(--aura-card-bleed); }
-  .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-bottom: var(--aura-card-bleed); }
+  .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-inline: var(--aura-card-bleed); }
+  :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-bottom: var(--aura-card-bleed); }
   .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
   .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row {
     margin-bottom: var(--aura-space-2); padding: var(--aura-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
@@ -1865,8 +1873,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @container aura-stack (width < 9999.5px) {
   .aura-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
   /* 5.26: stacked cards inside a framed Card keep its padding (0 where the Card is flush). */
-  .aura-card__body > .aura-bleed .aura-bleed-frame { padding-inline: var(--aura-card-bleed); }
-  .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame { padding-bottom: var(--aura-card-bleed); }
+  .aura-card__body .aura-bleed .aura-bleed-frame { padding-inline: var(--aura-card-bleed); }
+  :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame { padding-bottom: var(--aura-card-bleed); }
   .aura-table__scroll { overflow: visible; height: auto; }
   .aura-table__busy-bar { top: 0; }
   .aura-table__picker { display: none; }