@jirawatpyk/aura-tokens 5.6.0 → 5.7.1

package/aura-tailwind.css

@@ -1,4 +1,4 @@
-/* AURA v5.6.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand.
+/* AURA v5.7.1 — Tailwind v4 theme. GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand.
  *   @import "tailwindcss";
  *   @import "@jirawatpyk/aura-tokens/tailwind.css";
  * Gives bg-bg-surface, text-fg-primary, border-border-strong, p-aura-6, rounded-aura-xl, shadow-aura-overlay,

package/aura-tailwind.prefixed.css

@@ -1,4 +1,4 @@
-/* AURA v5.6.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.mts. Do not edit by hand.
+/* AURA v5.7.1 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.mts. Do not edit by hand.
  * For apps that already have a Tailwind theme (shadcn): nothing here redefines an existing name.
  *   @layer aura-tokens, theme, base, aura, components, utilities;
  *   @import "tailwindcss";

package/aura.css

@@ -1,4 +1,4 @@
-/* AURA v5.6.0 — GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand. */
+/* AURA v5.7.1 — GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand. */
 /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
 
 :root, [data-theme="light"] {

package/components/aura.bundle.js

@@ -828,6 +828,8 @@ window.Aura = (() => {
     const pos = posState[0], setPos = posState[1];
     const items2 = props.items || [];
     const mounted = useMounted();
+    const headerId = uid();
+    const hasHeader = props.header != null && props.header !== false && props.header !== "";
     const Link = useLinkComponent(props.linkComponent);
     useIsoLayoutEffect(
       function() {
@@ -845,7 +847,20 @@ window.Aura = (() => {
         const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
         setPos({ top, left, maxHeight });
       },
-      [props.anchor, mounted]
+      [props.anchor, mounted, hasHeader]
+    );
+    const hadHeader = React6.useRef(hasHeader);
+    React6.useEffect(
+      function() {
+        if (hadHeader.current === hasHeader) return;
+        hadHeader.current = hasHeader;
+        const a = document.activeElement;
+        if (own.current && (!a || a === document.body)) {
+          const first = own.current.querySelector('[role^="menuitem"]:not([disabled])');
+          if (first) first.focus();
+        }
+      },
+      [hasHeader]
     );
     React6.useEffect(
       function() {
@@ -871,22 +886,22 @@ window.Aura = (() => {
       [mounted]
     );
     function onKeyDown(e) {
-      const list = Array.prototype.slice.call(
+      const list2 = Array.prototype.slice.call(
         own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
       );
-      const i = list.indexOf(document.activeElement);
+      const i = list2.indexOf(document.activeElement);
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        list[(i + 1) % list.length].focus();
+        list2[(i + 1) % list2.length].focus();
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        list[(i - 1 + list.length) % list.length].focus();
+        list2[(i - 1 + list2.length) % list2.length].focus();
       } else if (e.key === "Home") {
         e.preventDefault();
-        list[0].focus();
+        list2[0].focus();
       } else if (e.key === "End") {
         e.preventDefault();
-        list[list.length - 1].focus();
+        list2[list2.length - 1].focus();
       } else if (e.key === " " && document.activeElement && document.activeElement.tagName === "A") {
         e.preventDefault();
         document.activeElement.click();
@@ -898,9 +913,9 @@ window.Aura = (() => {
       }
       e.stopPropagation();
     }
-    function groupItems(list) {
+    function groupItems(list2) {
       const out = [];
-      list.forEach(function(it, i) {
+      list2.forEach(function(it, i) {
         const g = it.type === "radio" && it.group ? it.group : null;
         const last = out[out.length - 1];
         if (last && last.group === g && g !== null) last.items.push({ it, i });
@@ -955,27 +970,28 @@ window.Aura = (() => {
         body
       );
     }
-    const el = /* @__PURE__ */ React6.createElement(
+    const style = {
+      top: pos ? pos.top : -9999,
+      left: pos ? pos.left : -9999,
+      maxHeight: pos && pos.maxHeight ? pos.maxHeight : void 0
+    };
+    const list = groupItems(items2).map(function(block, bi) {
+      const rendered = block.items.map(function(x) {
+        return renderItem(x.it, x.i);
+      });
+      return block.group ? /* @__PURE__ */ React6.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React6.createElement(React6.Fragment, { key: "f" + bi }, rendered);
+    });
+    const el = hasHeader ? /* @__PURE__ */ React6.createElement("div", { ref: merged, className: "aura-menu has-header", onKeyDown, style }, /* @__PURE__ */ React6.createElement(
       "div",
       {
-        ref: merged,
-        role: "menu",
-        "aria-label": props.label,
-        className: "aura-menu",
-        onKeyDown,
-        style: {
-          top: pos ? pos.top : -9999,
-          left: pos ? pos.left : -9999,
-          maxHeight: pos && pos.maxHeight ? pos.maxHeight : void 0
+        className: "aura-menu__header",
+        id: headerId,
+        onMouseDown: function(e) {
+          e.preventDefault();
         }
       },
-      groupItems(items2).map(function(block, bi) {
-        const rendered = block.items.map(function(x) {
-          return renderItem(x.it, x.i);
-        });
-        return block.group ? /* @__PURE__ */ React6.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React6.createElement(React6.Fragment, { key: "f" + bi }, rendered);
-      })
-    );
+      props.header
+    ), /* @__PURE__ */ React6.createElement("div", { role: "menu", "aria-label": props.label, "aria-describedby": headerId, className: "aura-menu__list" }, list)) : /* @__PURE__ */ React6.createElement("div", { ref: merged, role: "menu", "aria-label": props.label, className: "aura-menu", onKeyDown, style }, list);
     return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
   });
 
@@ -1015,6 +1031,7 @@ window.Aura = (() => {
         label: props.label,
         items: props.items,
         linkComponent: props.linkComponent,
+        header: props.header,
         onClose: function(restore) {
           setAnchor(null);
           if (restore && typeof anchor.focus === "function") anchor.focus();
@@ -4014,6 +4031,7 @@ window.Aura = (() => {
     function close() {
       if (props.dismissible !== false && props.onClose) props.onClose();
     }
+    const scrimCloses = props.dismissible !== false && (props.dismissOnScrim !== void 0 ? props.dismissOnScrim : props.role !== "alertdialog");
     const modal = useModal(props.open, own, {
       autoFocus: props.autoFocus,
       onEscape: close,
@@ -4022,7 +4040,17 @@ window.Aura = (() => {
     });
     if (!modal.ready) return null;
     return (0, import_react_dom8.createPortal)(
-      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React27.createElement(
+      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement(
+        "div",
+        {
+          className: "aura-scrim",
+          onClick: scrimCloses ? close : void 0,
+          onMouseDown: scrimCloses ? void 0 : function(e) {
+            e.preventDefault();
+          },
+          "aria-hidden": true
+        }
+      ), /* @__PURE__ */ React27.createElement(
         "div",
         {
           ref: merged,
@@ -4056,8 +4084,19 @@ window.Aura = (() => {
     });
     if (!modal.ready) return null;
     const side = props.side === "left" ? "left" : "right";
+    const drawerScrimCloses = props.dismissible !== false && props.dismissOnScrim !== false;
     return (0, import_react_dom8.createPortal)(
-      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React27.createElement(
+      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement(
+        "div",
+        {
+          className: "aura-scrim",
+          onClick: drawerScrimCloses ? close : void 0,
+          onMouseDown: !drawerScrimCloses ? function(e) {
+            e.preventDefault();
+          } : void 0,
+          "aria-hidden": true
+        }
+      ), /* @__PURE__ */ React27.createElement(
         "div",
         {
           ref: merged,
@@ -5726,7 +5765,10 @@ window.Aura = (() => {
     const items2 = props.items || [];
     return /* @__PURE__ */ React32.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React32.createElement("ol", null, items2.map(function(it, i) {
       const last = i === items2.length - 1;
-      return /* @__PURE__ */ React32.createElement("li", { key: i }, last ? /* @__PURE__ */ React32.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React32.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React32.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React32.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
+      return /* @__PURE__ */ React32.createElement("li", { key: i }, last ? /* @__PURE__ */ React32.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React32.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : it.onClick ? /* @__PURE__ */ React32.createElement("button", { type: "button", onClick: it.onClick }, it.label) : (
+        /* 5.7: a segment with no page and no action is text, not a button that does nothing. */
+        /* @__PURE__ */ React32.createElement("span", { className: "aura-crumbs__text" }, it.label)
+      ), last ? null : /* @__PURE__ */ React32.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
     })));
   });
 
@@ -5921,7 +5963,7 @@ window.Aura = (() => {
         },
         "aria-expanded": open
       }
-    ) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React38.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children), props.bottomNav || null));
+    ) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React38.createElement("main", { className: "aura-shell__content", id: props.mainId || "main", tabIndex: -1 }, props.children), props.bottomNav || null));
   });
 
   // src/ActionBar.tsx
@@ -6076,8 +6118,11 @@ window.Aura = (() => {
       /* @__PURE__ */ React42.createElement("ul", { className: "aura-bottomnav__list" }, props.items.map(function(it) {
         const on = active === it.id;
         const count = it.count != null && it.count > 0 ? it.count > 99 ? "99+" : String(it.count) : null;
+        const suffix = count || it.badge && it.badgeLabel ? " (" + (count || it.badgeLabel) + ")" : "";
         const common = {
           className: cx("aura-bottomnav__item", on && "is-active"),
+          /* 5.7: a full name when the label is shortened; the count / badge words still follow. */
+          "aria-label": it.ariaLabel ? it.ariaLabel + suffix : void 0,
           "aria-current": on ? "page" : void 0,
           onClick: function(e) {
             if (!it.href) e.preventDefault();
@@ -6088,7 +6133,7 @@ window.Aura = (() => {
         const inner = [
           /* @__PURE__ */ React42.createElement("span", { key: "i", className: "aura-bottomnav__icon" }, /* @__PURE__ */ React42.createElement(Icon, { name: it.icon, size: "md" }), count ? /* @__PURE__ */ React42.createElement("span", { className: "aura-bottomnav__count", "aria-hidden": "true" }, count) : it.badge ? /* @__PURE__ */ React42.createElement("span", { className: "aura-bottomnav__dot", "aria-hidden": "true" }) : null),
           /* @__PURE__ */ React42.createElement("span", { key: "l", className: "aura-bottomnav__label" }, it.label),
-          count || it.badge && it.badgeLabel ? /* @__PURE__ */ React42.createElement("span", { key: "s", className: "aura-sr-only" }, " (" + (count || it.badgeLabel) + ")") : null
+          suffix && !it.ariaLabel ? /* @__PURE__ */ React42.createElement("span", { key: "s", className: "aura-sr-only" }, suffix) : null
         ];
         return /* @__PURE__ */ React42.createElement("li", { key: it.id, className: "aura-bottomnav__cell" }, it.href ? /* @__PURE__ */ React42.createElement(Link, { href: it.href, ...common }, inner) : /* @__PURE__ */ React42.createElement("button", { type: "button", ...common }, inner));
       }))

package/components/aura.components.css

@@ -247,6 +247,12 @@ a.aura-menu__item { text-decoration: none; box-sizing: border-box; }
 }
 .aura-menu__radio.is-on { border-color: var(--aura-button-primary-bg); }
 .aura-menu__radio.is-on::after { content: ''; width: 8px; height: 8px; border-radius: var(--aura-radius-full); background: var(--aura-button-primary-bg); }
+/* 5.7: a header above the items (who is signed in), set off by a hairline like a separator. */
+.aura-menu__header { margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-1)) var(--aura-space-1); padding: var(--aura-space-3); border-bottom: 1px solid var(--aura-border-default); color: var(--aura-fg-secondary); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
+.aura-menu__header > * { margin: 0; }
+/* Stays in view when a long menu scrolls. */
+.aura-menu.has-header .aura-menu__header { position: sticky; top: calc(-1 * var(--aura-space-1)); z-index: 1; background: var(--aura-bg-surface); }
+.aura-menu__header strong, .aura-menu__header b { color: var(--aura-fg-primary); font-weight: 500; font-size: 13px; }
 .aura-menu__sep { height: 1px; margin: var(--aura-space-1) calc(-1 * var(--aura-space-1)); background: var(--aura-border-default); }
 
 /* Footer + pager */
@@ -635,7 +641,7 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
 .aura-nav__item {
   box-sizing: border-box; display: flex; align-items: center; gap: var(--aura-space-3); width: 100%;
-  height: 36px; padding: 0 var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
+  min-height: 36px; padding: var(--aura-space-1) var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
   background: transparent; color: var(--aura-fg-secondary); font: inherit; font-size: 13px; font-weight: 500;
   text-decoration: none; text-align: left; cursor: pointer;
   transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
@@ -644,7 +650,14 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__item.is-active { background: var(--aura-bg-selected); color: var(--aura-fg-primary); }
 .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
 .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
-.aura-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
+@media (pointer: coarse) { .aura-nav__item { min-height: var(--aura-touch-target); } }
+/* 5.7.1: a long label wraps to a second line (the row grows; one-line rows stay 36px) instead of an ellipsis with no
+ * way to read the rest — Thai and Swedish names in a 240px nav or the phone drawer. Beyond two lines it clamps. */
+.aura-nav__label {
+  flex: 1; min-width: 0; line-height: 18px; overflow: hidden; overflow-wrap: anywhere;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
+}
 .aura-nav__count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--aura-fg-secondary); }
 .aura-nav__badge { display: inline-flex; align-items: center; flex: none; }
 /* Groups: a disclosure button, its items indented one step per level. */
@@ -689,6 +702,8 @@ a.aura-tab { text-decoration: none; }
 .aura-crumbs a:hover, .aura-crumbs button:hover { color: var(--aura-fg-primary); text-decoration: underline; text-underline-offset: 3px; }
 .aura-crumbs a:focus-visible, .aura-crumbs button:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
 .aura-crumbs__current { color: var(--aura-fg-primary); font-weight: 500; }
+/* 5.7: a segment with no page of its own — the links' colour, not interactive. */
+.aura-crumbs__text { color: var(--aura-fg-secondary); }
 .aura-crumbs__sep { color: var(--aura-fg-tertiary); }
 
 /* ---------- Avatar ---------- */
@@ -884,6 +899,8 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-shell__bar-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--aura-space-3); }
 .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
+/* 5.7: <main> takes focus (tabIndex -1) for skip links and "the row you acted on is gone"; a landmark gets no ring. */
+.aura-shell__content:focus { outline: none; }
 @media (min-width: 640px) { .aura-shell__content { padding: var(--aura-space-6); } }
 @media (min-width: 1024px) { .aura-shell__content { padding: var(--aura-space-8); } }
 /* The shell already pads its content: a Container directly inside only caps the width. */

package/components/index.d.ts

@@ -310,6 +310,9 @@ export interface MenuProps {
 	autoFocus?: boolean | undefined;
 	/** Router link for items with `href`; defaults to AuraProvider's `linkComponent`, then `<a>`. (4.19) */
 	linkComponent?: React$1.ElementType | undefined;
+	/** Content above the items (5.7), e.g. who is signed in. Not an item: arrow keys skip it; it is the menu's
+	 * accessible description, read once when the menu opens. */
+	header?: React$1.ReactNode | undefined;
 }
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
@@ -547,6 +550,9 @@ export interface DialogProps {
 	size?: "sm" | "md" | "lg" | undefined;
 	/** Default true. False hides the close button and ignores Escape and scrim clicks. */
 	dismissible?: boolean | undefined;
+	/** Whether a click on the scrim closes it (5.7). Default true, false for `role="alertdialog"`: a stray click
+	 * outside shouldn't throw away a typed reason. Escape and the close button still close it. */
+	dismissOnScrim?: boolean | undefined;
 	/** Use `alertdialog` for destructive confirmations. */
 	role?: "dialog" | "alertdialog" | undefined;
 	/** Default true. Turn off only for static demos. */
@@ -638,6 +644,7 @@ export interface SideNavProps {
 }
 export interface BreadcrumbProps {
 	/** Root first; the last item is the current page. */
+	/** An item with neither `href` nor `onClick` is plain text (5.7), for a segment with no page of its own. */
 	items: Array<{
 		label: string;
 		href?: string | undefined;
@@ -665,6 +672,9 @@ export interface DropdownMenuProps {
 	label?: string | undefined;
 	/** Router link for items with `href`. (4.19) */
 	linkComponent?: React$1.ElementType | undefined;
+	/** Content above the items (5.7), e.g. name, email and role in an account menu. Not an item: arrow keys skip
+	 * it; it is the menu's accessible description (`aria-describedby`). */
+	header?: React$1.ReactNode | undefined;
 }
 export interface ComboboxOption {
 	value: string;
@@ -865,6 +875,8 @@ export interface DrawerProps {
 	footer?: React$1.ReactNode | undefined;
 	/** Scrim click and Escape close it. Default true. */
 	dismissible?: boolean | undefined;
+	/** Whether a click on the scrim closes it (5.7). Default true; Escape and the close button still close it. */
+	dismissOnScrim?: boolean | undefined;
 	/** Default true: focus moves to the element with `data-autofocus`, else the first control in the body. False only for static demos. */
 	autoFocus?: boolean | undefined;
 	/** Needed when there is no title. */
@@ -905,7 +917,8 @@ export interface AppShellProps {
 	children?: React$1.ReactNode | undefined;
 	navLabel?: string | undefined;
 	menuLabel?: string | undefined;
-	/** id of `<main>`, for a skip link. Default `main`. */
+	/** id of `<main>`, for a skip link. Default `main`. `<main>` has `tabIndex={-1}` (5.7), so a skip link or
+	 * `document.getElementById(mainId).focus()` moves focus there (no ring is drawn on it). */
 	mainId?: string | undefined;
 	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
 	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
@@ -979,6 +992,9 @@ export interface BottomNavItem {
 	badge?: boolean | undefined;
 	/** Read after the label when `badge` is set, e.g. "new". */
 	badgeLabel?: string | undefined;
+	/** The full name for screen readers when `label` is shortened to fit (5.7), e.g. label "Konto", ariaLabel
+	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3). The count or badge is still appended. */
+	ariaLabel?: string | undefined;
 }
 export interface BottomNavProps {
 	/** 2–5 items. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-tokens",
-  "version": "5.6.0",
+  "version": "5.7.1",
   "description": "AURA Design System — tokens (CSS variables, Tailwind preset, Figma variables), theme contrast checks and token lint.",
   "main": "tailwind.tokens.cjs",
   "types": "components/index.d.ts",

package/tokens.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.6.0",
+  "version": "5.7.1",
   "meta": {
     "name": "AURA Design System",
     "tier": "3-tier",