@jirawatpyk/aura-react 4.13.0 → 4.15.0

package/dist/esm/Popover.js

@@ -11,7 +11,7 @@ import {
   useMergedRef,
   useMounted
 } from "./internal.js";
-import { useStrings } from "./locale.js";
+import { useDensity, useStrings } from "./locale.js";
 import { createPortal } from "react-dom";
 function position(anchor, pop, placement) {
   const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
@@ -24,6 +24,7 @@ function position(anchor, pop, placement) {
 }
 const Popover = React.forwardRef(function Popover2(props, ref) {
   const t = useStrings();
+  const density = useDensity();
   const auto = uid(), id = props.id || auto;
   const st = useMaybeControlled(props.open, !!props.defaultOpen, props.onOpenChange);
   const open = !!st[0];
@@ -81,6 +82,7 @@ const Popover = React.forwardRef(function Popover2(props, ref) {
       {
         ref: popMerged,
         id,
+        "data-density": density,
         role: "dialog",
         "aria-modal": false,
         "aria-label": props.title ? void 0 : props.label,

package/dist/esm/SideNav.js

@@ -1,6 +1,8 @@
 'use client';
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
 import { cx, uid, useMaybeControlled } from "./internal.js";
 import { useLinkComponent, useStrings } from "./locale.js";
 function contains(it, id) {
@@ -18,6 +20,39 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
     props.onChange
   );
   const active = st[0];
+  const col = useMaybeControlled(props.collapsed, !!props.defaultCollapsed, props.onCollapsedChange);
+  const collapsed = col[0];
+  const tipState = React.useState(null), tip = tipState[0], setTip = tipState[1];
+  React.useEffect(
+    function() {
+      if (!collapsed) setTip(null);
+    },
+    [collapsed]
+  );
+  React.useEffect(
+    function() {
+      if (!tip) return;
+      function esc(e) {
+        if (e.key === "Escape") setTip(null);
+      }
+      document.addEventListener("keydown", esc);
+      return function() {
+        document.removeEventListener("keydown", esc);
+      };
+    },
+    [tip]
+  );
+  function tipHandlers(label) {
+    if (!collapsed) return {};
+    function show(e) {
+      const r = e.currentTarget.getBoundingClientRect();
+      setTip({ text: label, top: r.top + r.height / 2, left: r.right + 8 });
+    }
+    function hide() {
+      setTip(null);
+    }
+    return { onMouseEnter: show, onFocus: show, onMouseLeave: hide, onBlur: hide };
+  }
   const sections = props.sections || [{ items: props.items || [] }];
   const openState = React.useState({}), toggled = openState[0], setToggled = openState[1];
   function isOpen(it) {
@@ -63,8 +98,10 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
     visible[j].focus();
   }
   function inner(it, group, open) {
+    const marked = it.count != null && it.count > 0 || it.badge != null;
     return [
-      it.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: it.icon }) : null,
+      it.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: it.icon }) : collapsed ? /* @__PURE__ */ React.createElement("span", { key: "i", className: "aura-nav__initial", "aria-hidden": "true" }, it.label.charAt(0)) : null,
+      collapsed && marked ? /* @__PURE__ */ React.createElement("span", { key: "d", className: "aura-nav__dot", "aria-hidden": "true" }) : null,
       /* @__PURE__ */ React.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
       it.badge != null ? /* @__PURE__ */ React.createElement("span", { key: "b", className: "aura-nav__badge" }, it.badge) : null,
       it.count != null ? /* @__PURE__ */ React.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null,
@@ -73,7 +110,7 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
   }
   function item(it, depth) {
     if (it.children) {
-      const open = isOpen(it);
+      const open = !collapsed && isOpen(it);
       const listId = base + "-" + it.id;
       const holdsActive = contains(it, active);
       return /* @__PURE__ */ React.createElement("li", { key: it.id, className: "aura-nav__group" }, /* @__PURE__ */ React.createElement(
@@ -84,10 +121,15 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
           "aria-expanded": open,
           "aria-controls": listId,
           style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
+          ...tipHandlers(it.label),
           onClick: function() {
             const next = Object.assign({}, toggled);
             next[it.id] = !open;
             setToggled(next);
+            if (collapsed) {
+              setTip(null);
+              col[1](false);
+            }
           },
           onKeyDown: function(e) {
             if (e.key === "ArrowRight" && !open) {
@@ -106,6 +148,7 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
     }
     const on = active === it.id;
     const common = {
+      ...tipHandlers(it.label),
       className: cx("aura-nav__item", on && "is-active"),
       "aria-current": on ? "page" : void 0,
       style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
@@ -124,7 +167,8 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
         if (typeof ref === "function") ref(el);
         else if (ref) ref.current = el;
       },
-      className: cx("aura-nav", props.className),
+      className: cx("aura-nav", collapsed && "aura-nav--collapsed", props.className),
+      "data-collapsed": collapsed ? "" : void 0,
       "aria-label": props.label || t.mainNav,
       onKeyDown
     },
@@ -134,7 +178,31 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
         return item(it, 0);
       })));
     })),
-    props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__footer" }, props.footer) : null
+    props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__footer" }, props.footer) : null,
+    props.collapsible ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__toggle" }, /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        icon: collapsed ? "panel-left-open" : "panel-left-close",
+        label: collapsed ? t.expandNav : t.collapseNav,
+        size: "md",
+        onClick: function() {
+          setTip(null);
+          col[1](!collapsed);
+        }
+      }
+    )) : null,
+    tip && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "aura-tooltip aura-tooltip--right",
+          "aria-hidden": "true",
+          style: { top: tip.top, left: tip.left }
+        },
+        tip.text
+      ),
+      document.body
+    ) : null
   );
 });
 export {

package/dist/esm/index.js

@@ -34,7 +34,7 @@ import { Container } from "./Container.js";
 import { AppShell } from "./AppShell.js";
 import { useBreakpoint, useResponsive, breakpoints } from "./responsive.js";
 import { Surface } from "./Surface.js";
-import { AuraProvider, useAuraLocale, STRINGS } from "./locale.js";
+import { AuraProvider, useAuraLocale, useDensity, STRINGS } from "./locale.js";
 import { Stat } from "./Stat.js";
 import { TimePicker, parseTime } from "./TimePicker.js";
 import { FileUpload, formatBytes } from "./FileUpload.js";
@@ -126,6 +126,7 @@ export {
   useAuraLocale,
   useBreakpoint,
   useColorScheme,
+  useDensity,
   useFormatDate,
   useResponsive
 };

package/dist/esm/locale.js

@@ -29,6 +29,8 @@ const STRINGS = {
     breadcrumb: "Breadcrumb",
     navigation: "Navigation",
     openNav: "Open navigation",
+    collapseNav: "Collapse sidebar",
+    expandNav: "Expand sidebar",
     searching: "Searching\u2026",
     noMatches: "No matches",
     clear: function(what) {
@@ -140,6 +142,8 @@ const STRINGS = {
     breadcrumb: "\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07",
     navigation: "\u0E40\u0E21\u0E19\u0E39",
     openNav: "\u0E40\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39",
+    collapseNav: "\u0E22\u0E48\u0E2D\u0E41\u0E16\u0E1A\u0E40\u0E21\u0E19\u0E39",
+    expandNav: "\u0E02\u0E22\u0E32\u0E22\u0E41\u0E16\u0E1A\u0E40\u0E21\u0E19\u0E39",
     searching: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E04\u0E49\u0E19\u0E2B\u0E32\u2026",
     noMatches: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E15\u0E23\u0E07\u0E01\u0E31\u0E19",
     clear: function(what) {
@@ -251,6 +255,8 @@ const STRINGS = {
     breadcrumb: "Br\xF6dsmulor",
     navigation: "Navigering",
     openNav: "\xD6ppna menyn",
+    collapseNav: "F\xE4ll ihop sidof\xE4ltet",
+    expandNav: "F\xE4ll ut sidof\xE4ltet",
     searching: "S\xF6ker\u2026",
     noMatches: "Inga tr\xE4ffar",
     clear: function(what) {
@@ -343,6 +349,8 @@ const STRINGS = {
 };
 const LocaleContext = React.createContext(null);
 function AuraProvider(props) {
+  const outer = React.useContext(LocaleContext);
+  const density = props.density || outer && outer.density || null;
   const value = React.useMemo(
     function() {
       const base = props.locale && STRINGS[props.locale] || STRINGS.en;
@@ -350,12 +358,13 @@ function AuraProvider(props) {
         locale: props.locale || "en",
         calendar: props.calendar || null,
         strings: props.strings ? Object.assign({}, base, props.strings) : base,
-        linkComponent: props.linkComponent || null
+        linkComponent: props.linkComponent || null,
+        density
       };
     },
-    [props.locale, props.calendar, props.strings, props.linkComponent]
+    [props.locale, props.calendar, props.strings, props.linkComponent, density]
   );
-  return /* @__PURE__ */ React.createElement(LocaleContext.Provider, { value }, props.children);
+  return /* @__PURE__ */ React.createElement(LocaleContext.Provider, { value }, props.density ? /* @__PURE__ */ React.createElement("div", { className: "aura-density", "data-density": props.density }, props.children) : props.children);
 }
 function useAuraLocale() {
   return React.useContext(LocaleContext) || { locale: null, calendar: null, strings: STRINGS.en };
@@ -364,6 +373,10 @@ function useLinkComponent(own) {
   const ctx = React.useContext(LocaleContext);
   return own || ctx && ctx.linkComponent || "a";
 }
+function useDensity() {
+  const ctx = React.useContext(LocaleContext);
+  return ctx && ctx.density || void 0;
+}
 function useStrings() {
   return useAuraLocale().strings;
 }
@@ -371,6 +384,7 @@ export {
   AuraProvider,
   STRINGS,
   useAuraLocale,
+  useDensity,
   useLinkComponent,
   useStrings
 };

package/dist/index.d.ts

@@ -149,13 +149,15 @@ export interface DataTableProps {
 	/** Controlled pinned columns (keys); pair with onPinnedColumnsChange. */
 	pinnedColumns?: string[];
 	onPinnedColumnsChange?: (keys: string[]) => void;
+	/** `compact` = 40px rows (48px on touch screens). Default: the surrounding density. */
+	density?: "comfortable" | "compact";
 	/** Container width in px below which rows render as stacked cards (phones). Try 640. Measured with ResizeObserver, so it follows the container, not the window. */
 	stackBelow?: number;
 	className?: string;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
 export type IconInput = IconName | React$1.ReactElement;
-export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file" | "sun" | "moon" | "monitor";
+export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file" | "sun" | "moon" | "monitor" | "panel-left-close" | "panel-left-open";
 /** Lucide stroke icon drawn inline in currentColor. */
 export interface IconProps {
 	/** A name from the set, or an icon element of your own (sized and styled the same way). */
@@ -184,6 +186,8 @@ export interface AuraProviderProps {
 	calendar?: "buddhist" | "gregory";
 	/** Override individual strings. */
 	strings?: Partial<Record<string, string | ((...args: any[]) => string)>>;
+	/** `compact`: 36px fields and buttons, 40px table rows — dense admin screens. Touch screens keep 44px. Default: comfortable (or an ancestor's `data-density`). */
+	density?: "comfortable" | "compact";
 	/** Your router's link (e.g. `Link` from `next/link`), used by every AURA component that renders a link: Button with `href`, SideNav, Breadcrumb, Stat, Pagination, DataTable row links. It gets `href`, `className`, `aria-current`, the children and the ref. A component's own `linkComponent` wins. */
 	linkComponent?: React$1.ElementType;
 	children?: React$1.ReactNode;
@@ -525,6 +529,15 @@ export interface SideNavProps {
 	label?: string;
 	/** Router link for items with `href`; defaults to the AuraProvider's `linkComponent`, then `<a>`. */
 	linkComponent?: React$1.ElementType;
+	/** Icon-only rail (`aura-sidenav-rail-width`, 64px). Labels show as tooltips and stay the accessible names; a group
+	 * expands the rail when clicked. Controlled; pair with `onCollapsedChange`. */
+	collapsed?: boolean;
+	/** Starting state when `collapsed` isn't controlled. Default false. */
+	defaultCollapsed?: boolean;
+	/** Called by the toggle button, and by a group clicked in the rail (with `false`). Save it to keep the choice. */
+	onCollapsedChange?: (collapsed: boolean) => void;
+	/** Adds a collapse / expand button at the bottom. AppShell hides it in its phone drawer. */
+	collapsible?: boolean;
 	className?: string;
 }
 export interface BreadcrumbProps {
@@ -1147,6 +1160,8 @@ export interface AuraStrings {
 	breadcrumb: string;
 	navigation: string;
 	openNav: string;
+	collapseNav: string;
+	expandNav: string;
 	searching: string;
 	noMatches: string;
 	clear: (what?: string) => string;
@@ -1216,11 +1231,15 @@ export interface AuraLocaleValue {
 	strings: AuraStrings;
 	/** The router link set on AuraProvider, if any. */
 	linkComponent?: React$1.ElementType | null;
+	/** The density set on the nearest AuraProvider that sets one (null: none, i.e. comfortable unless an ancestor's data-density says otherwise). */
+	density?: "comfortable" | "compact" | null;
 }
 /** Sets the language of built-in labels (and the default date locale) for everything inside. */
 export declare function AuraProvider(props: AuraProviderProps): React$1.ReactElement;
 /** { locale, calendar, strings } from the nearest AuraProvider (English strings when there is none). */
 export declare function useAuraLocale(): AuraLocaleValue;
+/** The provider's density, for portals that render outside its wrapper. */
+export declare function useDensity(): "comfortable" | "compact" | undefined;
 export declare const Stat: React$1.ForwardRefExoticComponent<StatProps & React$1.RefAttributes<HTMLElement>>;
 /** Parse typed time: 9 · 09 · 930 · 0930 · 9:30 · 9.30 · 09.30 น. · 9:30 pm → "HH:mm" (24-hour) or null. */
 export declare function parseTime(text: string | null | undefined): string | null;

package/dist/styles.css

@@ -7,7 +7,7 @@
   box-sizing: border-box;
   height: var(--aura-button-height);
   white-space: nowrap; flex-shrink: 0;   /* a pill never wraps its label */
-  padding: 0 var(--aura-space-6);
+  padding: 0 var(--aura-button-padding-x, var(--aura-space-6));
   border-radius: var(--aura-button-radius);
   border: 0;
   background: transparent;
@@ -74,14 +74,14 @@ a.aura-btn { text-decoration: none; }
 }
 .aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; }
 .aura-table__head {
-  position: sticky; top: 0; z-index: 3;
-  display: flex; height: var(--aura-space-12);
+  position: sticky; top: 0; z-index: 3; box-sizing: border-box;   /* the hairline is inside the row height */
+  display: flex; height: var(--aura-table-row-height);
   background: var(--aura-bg-canvas);
   border-bottom: 1px solid var(--aura-border-default);
   font-family: var(--font-mono); font-size: 12px; color: var(--aura-fg-secondary);
 }
 .aura-table__row {
-  display: flex; height: var(--aura-space-12);
+  box-sizing: border-box; display: flex; height: var(--aura-table-row-height);   /* exactly the virtual row height */
   background: var(--aura-bg-surface);
   border-bottom: 1px solid var(--aura-border-default);
   font-size: 13px;
@@ -105,7 +105,7 @@ a.aura-btn { text-decoration: none; }
 /* Server mode refresh: the previous page stays, inactive, under a progress bar until the next one arrives */
 .aura-table.is-refreshing .aura-table__row, .aura-table.is-refreshing .aura-table__card { opacity: 0.6; pointer-events: none; }
 .aura-table__busy-bar {
-  position: absolute; z-index: 6; top: calc(var(--aura-space-12) - 2px); left: 0; right: 0; height: 2px; overflow: hidden;
+  position: absolute; z-index: 6; top: calc(var(--aura-table-row-height) - 2px); left: 0; right: 0; height: 2px; overflow: hidden;
   border-radius: var(--aura-radius-full); pointer-events: none;
 }
 .aura-table--stacked .aura-table__busy-bar { top: 0; }
@@ -117,7 +117,7 @@ a.aura-btn { text-decoration: none; }
 
 /* Cells: text cells stay block so long values end in an ellipsis */
 .aura-table__td {
-  box-sizing: border-box; height: 100%; line-height: calc(var(--aura-space-12) - 1px);
+  box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
 .aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn { vertical-align: middle; }
@@ -130,7 +130,7 @@ a.aura-btn { text-decoration: none; }
 .aura-table__gutter { flex: none; width: var(--aura-space-6); position: sticky; left: 0; z-index: 2; background: inherit; }
 .aura-table__gutter--end { position: static; }
 .aura-table__picker {
-  position: absolute; top: 0; right: 0; z-index: 5; width: var(--aura-space-12); height: calc(var(--aura-space-12) - 1px);
+  position: absolute; top: 0; right: 0; z-index: 5; width: var(--aura-space-12); height: calc(var(--aura-table-row-height) - 1px);
   display: flex; align-items: center; justify-content: center; background: var(--aura-bg-canvas); border-top-right-radius: calc(var(--aura-card-radius) - 1px);
 }
 .aura-table__gutter--end.has-picker {
@@ -228,7 +228,7 @@ a.aura-btn { text-decoration: none; }
 
 /* Footer + pager */
 .aura-table__foot {
-  height: var(--aura-space-12); display: flex; align-items: center; justify-content: space-between;
+  height: var(--aura-table-row-height); display: flex; align-items: center; justify-content: space-between;
   padding: 0 var(--aura-space-3) 0 var(--aura-space-6);
   border-top: 1px solid var(--aura-border-default); background: var(--aura-bg-surface);
   font-size: 13px; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums;
@@ -596,6 +596,30 @@ a.aura-btn { text-decoration: none; }
 .aura-nav__sub { margin-top: 2px; }
 .aura-nav__sub[hidden] { display: none; }
 .aura-nav__footer { padding: var(--aura-space-3); border-top: 1px solid var(--aura-border-default); }
+/* Collapse toggle and the icon-only rail (4.15). */
+.aura-nav { transition: width var(--aura-duration-base) var(--aura-ease); }
+.aura-nav__toggle { display: flex; padding: var(--aura-space-2) var(--aura-space-3); border-top: 1px solid var(--aura-border-default); }
+.aura-nav--collapsed { width: var(--aura-sidenav-rail-width); }
+.aura-nav--collapsed .aura-nav__toggle { justify-content: center; }
+.aura-nav--collapsed .aura-nav__header, .aura-nav--collapsed .aura-nav__footer { padding-left: var(--aura-space-2); padding-right: var(--aura-space-2); overflow: hidden; }
+.aura-nav--collapsed .aura-nav__item { position: relative; justify-content: center; gap: 0; padding: 0; }
+.aura-nav--collapsed .aura-nav__label, .aura-nav--collapsed .aura-nav__count, .aura-nav--collapsed .aura-nav__badge, .aura-nav--collapsed .aura-nav__title {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+.aura-nav--collapsed .aura-nav__chevron { display: none; }
+.aura-nav--collapsed .aura-nav__section + .aura-nav__section { margin-top: var(--aura-space-3); padding-top: var(--aura-space-3); border-top: 1px solid var(--aura-border-default); }
+.aura-nav--collapsed .aura-nav__item--group.has-active { background: var(--aura-bg-selected); }
+.aura-nav--collapsed .aura-nav__item--group.has-active .aura-icon { color: var(--aura-fg-accent); }
+.aura-nav__initial {
+  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--aura-radius-sm);
+  background: var(--aura-status-neutral-bg); color: var(--aura-status-neutral-fg); font-size: 12px; font-weight: 600; text-transform: uppercase;
+}
+.aura-nav__dot {
+  position: absolute; top: 6px; left: calc(50% + 5px); width: 8px; height: 8px; border-radius: var(--aura-radius-full);
+  background: var(--aura-fg-accent); box-shadow: 0 0 0 2px var(--aura-bg-canvas);
+}
+.aura-tooltip--right { transform: translateY(-50%); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .aura-nav { transition: none; } }
 
 /* ---------- Breadcrumb ---------- */
 .aura-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-2); list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); font-size: 13px; }
@@ -1241,3 +1265,19 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 @media (prefers-reduced-motion: reduce) { .aura-command { animation: none; } }
 
+/* Density. data-density="compact" on <html> or any container (AuraProvider density="compact" and DataTable
+ * density do it for you): 36px fields and buttons, 40px table rows, less button padding — for dense admin screens.
+ * Touch screens keep 44px targets whatever the density. "comfortable" inside compact switches back. */
+[data-density='compact'] {
+  --aura-input-height: 36px; --aura-button-height: 36px; --aura-table-row-height: 40px;
+  --aura-button-padding-x: var(--aura-space-4);
+}
+[data-density='comfortable'] {
+  --aura-input-height: 44px; --aura-button-height: 44px; --aura-table-row-height: 48px;
+  --aura-button-padding-x: var(--aura-space-6);
+}
+@media (pointer: coarse) {
+  [data-density='compact'] { --aura-input-height: 44px; --aura-button-height: 44px; --aura-table-row-height: 48px; --aura-button-padding-x: var(--aura-space-6); }
+}
+.aura-density { display: contents; }
+

package/package.json

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