@dreamtree-org/twreact-ui 2.0.3 → 2.0.4

package/README.md

@@ -285,7 +285,7 @@ Advanced select component with search, multi-select, and grouping support.
 - `options`: Array<{value: any, label: string, disabled?: boolean, group?: string}> (with `grouped`: also `[{ label, options }]` groups)
 - `value`: any | Array<any>
 - `onChange`: (value: any) => void
-- `placeholder`: string (default: 'Select an option...')
+- `placeholder`: string (default: 'Select an option...') — shown muted (`text-muted`) with `data-empty` on the trigger while nothing is selected
 - `label`: string — associated with the trigger (accessible name = label + value)
 - `error`: string
 - `helperText`: ReactNode — hint below the control; replaced by `error` while shown
@@ -432,7 +432,7 @@ Calendar-based date selection with keyboard navigation.
 **Props:**
 - `value`: Date | string
 - `onChange`: (date: Date | null) => void
-- `placeholder`: string (default: 'Select date...')
+- `placeholder`: string (default: 'Select date...') — shown muted (`text-muted`) with `data-empty` on the trigger while empty (same for DateRangePicker)
 - `label`: string
 - `error`: string
 - `helperText`: ReactNode — hint below the trigger; replaced by `error` while shown
@@ -464,6 +464,7 @@ Collapsible sidebar navigation with nested items.
 **Props:**
 - `items`: Array<SidebarItem>
 - `collapsed`: boolean (default: false)
+- `collapsible`: boolean (default: true) — `false` removes the md+ collapse/expand toggle; the phone drawer keeps its 44px "Close navigation" button
 - `onToggle`: () => void
 - `logo`: ReactNode
 - `user`: {name: string, email: string, avatar?: string, menuItems?: Array<MenuItem>}
@@ -518,7 +519,9 @@ Top navigation bar with user menu and notifications.
 - `onNotificationClick`: (notifications: Array<Notification>) => void
 - `onUserClick`: (user: object) => void
 - `leftIcon`: ReactNode | false
-- `onLeftIconClick`: () => void
+- `onLeftIconClick`: (event) => void
+- `leftIconLabel`: string (default: "Go back") — the left button's accessible name, e.g. "Open navigation" when it opens a Sidebar drawer
+- `leftIconProps`: ButtonHTMLAttributes — spread onto the left button (e.g. `aria-expanded`, `aria-controls`); `className` merges last
 
 ```jsx
 <Navbar

package/ai-skills/dreamtree-ui.md

@@ -204,7 +204,7 @@ When suggesting a component or new variant value, use this exact vocabulary.
 **Blocks** are page-level patterns extracted from the products, so screens stop re-inventing them:
 
 - `AppShell` — sidebar + top bar + mobile drawer (a left `Sheet`); pass `nav` items and `linkAs={Link}` in Next.js. `bottomNav={<FootNav … />}` adds a phone tab bar (below `md`, spacer included). Fills `min-h-dvh` and pads safe areas.
-- `Sidebar` — every item renders as an `<a>`; give items an `href` (and `linkAs={Link}` in Next.js) so Ctrl/Cmd-click opens a new tab. Parents with `href` navigate + expand; the chevron toggles. Mark the current page `active: true` and its group opens on load (control groups with `expandedIds`/`defaultExpandedIds`/`onExpandedChange`). Top-level `group: 'Name'` adds section headings; `badge` (+ `badgeLabel: '3 unread'`) shows counts; `footer` pins links above the user block; `stickyOffset={64}` when a top bar sits above it. The mobile drawer (`isMobileOpen`/`setIsMobileOpen`) is inert when shut, closes on Escape, and opens/closes with an edge swipe (`swipeable`, default on). The content renders once (column on `md`+, drawer below), so don't render a second Sidebar for phones.
+- `Sidebar` — every item renders as an `<a>`; give items an `href` (and `linkAs={Link}` in Next.js) so Ctrl/Cmd-click opens a new tab. Parents with `href` navigate + expand; the chevron toggles. Mark the current page `active: true` and its group opens on load (control groups with `expandedIds`/`defaultExpandedIds`/`onExpandedChange`). Top-level `group: 'Name'` adds section headings; `badge` (+ `badgeLabel: '3 unread'`) shows counts; `footer` pins links above the user block; `stickyOffset={64}` when a top bar sits above it. The mobile drawer (`isMobileOpen`/`setIsMobileOpen`) is inert when shut, closes on Escape, and opens/closes with an edge swipe (`swipeable`, default on). `collapsible={false}` drops the desktop collapse toggle (the drawer keeps "Close navigation"). Hide drawer items with real CSS if you must — the focus trap skips `display:none` / `visibility:hidden` elements. The content renders once (column on `md`+, drawer below), so don't render a second Sidebar for phones.
 - `PageHeader` — the page's only `h1`, subtitle, one primary action, optional `back` link. `actionsPlacement="bottom"` pins the actions in a `BottomActionBar` on phones (inline on desktop).
 - `BottomActionBar` — sticky bottom bar for a form's / checkout's primary action (`pb-safe`, `z-sticky`, rides above the on-screen keyboard via `visualViewport`). Children are the actions; `fullWidth` / `stackOnMobile` for phone layouts, `align`, `position="fixed" | "sticky"`. Put `<BottomActionBar.Spacer />` at the end of the page. Never hand-roll a `fixed bottom-0` action bar.
 - `StatCard` — KPI tile (`label`, `value`, `icon`, `tone`, `change`).
@@ -312,7 +312,13 @@ with a `group` key (`{ value, label, group: 'Code' }`) — no need to pre-group.
 `user.name` initials when `user.avatar` is missing; it fits a 390px phone.
 `sticky` makes it a translucent sticky bar with the top safe area; `largeTitle="Inbox"`
 adds an iOS large title that collapses on scroll. With `searchable`, phones get a
-Search button that opens a `SearchField` sheet wired to `onSearch`.
+Search button that opens a `SearchField` sheet wired to `onSearch`. When the left
+button opens your Sidebar drawer (`leftIcon={<Menu />}`), name it with
+`leftIconLabel="Open navigation"` (default "Go back") and pass
+`leftIconProps={{ 'aria-expanded': open, 'aria-controls': 'app-sidebar' }}`.
+
+**Select / DatePicker / DateRangePicker** show their placeholder muted (`text-muted`)
+and set `data-empty` on the trigger while empty — don't add a muted `className` yourself.
 
 **Tooltip** around a component (e.g. `<Button>`) in a row/grid: use
 `customTrigger={<Button>…</Button>}` so there is one tab stop, not two. A lone

package/dist/ai-schema.json

@@ -1785,7 +1785,16 @@
         "default": "false"
       },
       "onLeftIconClick": {
-        "type": "() => void",
+        "type": "(event: React.MouseEvent<HTMLButtonElement>) => void",
+        "required": false
+      },
+      "leftIconLabel": {
+        "type": "string",
+        "required": false,
+        "default": "\"Go back\""
+      },
+      "leftIconProps": {
+        "type": "ButtonHTMLAttributes<HTMLButtonElement> & Record<`data-${string}`, string | undefined>",
         "required": false
       },
       "onLoginClick": {
@@ -2811,6 +2820,11 @@
         "required": false,
         "default": "false"
       },
+      "collapsible": {
+        "type": "boolean",
+        "required": false,
+        "default": "true"
+      },
       "onToggle": {
         "type": "() => void",
         "required": false

package/dist/components/core/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/DatePicker.jsx"],"names":[],"mappings":";AAsBA,oFAoSE;kBAlTK,OAAO"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/DatePicker.jsx"],"names":[],"mappings":";AAsBA,oFAuSE;kBArTK,OAAO"}

package/dist/components/core/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/DateRangePicker.jsx"],"names":[],"mappings":";AAoCA,yFA0aG;kBAtcI,OAAO"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/DateRangePicker.jsx"],"names":[],"mappings":";AAoCA,yFA6aG;kBAzcI,OAAO"}

package/dist/components/core/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/core/Select.jsx"],"names":[],"mappings":";AA8HA,gFAuzBE;kBA76BK,OAAO"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/core/Select.jsx"],"names":[],"mappings":";AA8HA,gFA0zBE;kBAh7BK,OAAO"}

package/dist/components/navigation/Navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Navbar.jsx"],"names":[],"mappings":"AAmQA,+EAiYG;;kBAnoBmF,OAAO"}
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Navbar.jsx"],"names":[],"mappings":"AAmQA,+EAkZG;;kBAppBmF,OAAO"}

package/dist/components/navigation/Sidebar.d.ts

@@ -12,6 +12,8 @@ export default Sidebar;
  * - linkAs: element type used for items with `href` (default "a"; pass Next.js Link etc.)
  * - collapsed: boolean (desktop collapsed)
  * - onToggle: function to toggle collapse
+ * - collapsible: boolean (default true) — false hides the md+ collapse/expand
+ *   toggle (the drawer keeps its "Close navigation" button)
  * - expandedIds / defaultExpandedIds / onExpandedChange: open groups (ids)
  * - className, containerClassName, stickyOffset, logo, footer, user, onUserClick
  * - drawerPosition: 'left' | 'right'

package/dist/components/navigation/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":"AAqBA,oCAAqC,oBAAoB,CAAC;;AAoJ1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iFA0kBG;kBAlwBI,OAAO"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":"AAqBA,oCAAqC,oBAAoB,CAAC;;AAoJ1D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iFAglBG;kBA1wBI,OAAO"}

package/dist/esm/components/core/DatePicker.js

@@ -210,10 +210,13 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !selected,
+          // Empty: the placeholder reads muted, like Input's
+          // ::placeholder (#159). `className` still merges last.
+          "text-muted": !selected,
           // leave room for the sibling clear button overlaid on the field
           "pr-16": showClear && selected
         }, className),
+        "data-empty": selected ? undefined : "",
         onClick: function onClick() {
           return setIsOpen(function (open) {
             return !open;

package/dist/esm/components/core/DateRangePicker.js

@@ -279,7 +279,8 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
     }));
   };
   // Display placeholder until both start and end are committed (mandatory range).
-  var triggerText = committed.start && committed.end ? formatRange(committed.start, committed.end) : placeholder;
+  var isEmpty = !committed.start || !committed.end;
+  var triggerText = isEmpty ? placeholder : formatRange(committed.start, committed.end);
   var draftText = localStart && localEnd ? formatRange(localStart, localEnd) : placeholder;
   var presetList = Array.isArray(presets) && presets.length > 0 ? presets : null;
   var presetChips = presetList ? jsx("div", {
@@ -359,9 +360,12 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !committed.start || !committed.end,
+          // Empty: the placeholder reads muted, like Input's
+          // ::placeholder (#159). `className` still merges last.
+          "text-muted": isEmpty,
           "pr-16": showClearButton
         }, className),
+        "data-empty": isEmpty ? "" : undefined,
         onClick: function onClick() {
           // The trigger always toggles, even mid-pick (DTUI-35): closing
           // drops the uncommitted start, reopening starts from the last

package/dist/esm/components/core/Select.js

@@ -495,7 +495,8 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       return document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  var showClearButton = allowClear && !disabled && selectedOptions.length > 0;
+  var isEmpty = selectedOptions.length === 0;
+  var showClearButton = allowClear && !disabled && !isEmpty;
   var displayValue = function displayValue() {
     var _selectedOptions$;
     if (multiSelect) {
@@ -753,9 +754,12 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", SIZE_CLASSES[size] || SIZE_CLASSES.md, {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !selectedOptions.length,
+          // Empty: the placeholder reads muted, like Input's
+          // ::placeholder (#159). `className` still merges last.
+          "text-muted": isEmpty,
           "pr-14": showClearButton
         }, className),
+        "data-empty": isEmpty ? "" : undefined,
         onClick: function onClick() {
           if (!disabled) {
             setIsOpen(function (prev) {

package/dist/esm/components/navigation/Navbar.js

@@ -12,7 +12,8 @@ import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 import PropTypes from '../../_vendor/prop-types/index.js';
 
 var _excluded = ["emitter", "content", "notifications"],
-  _excluded2 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen", "sticky", "largeTitle"];
+  _excluded2 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "leftIconLabel", "leftIconProps", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen", "sticky", "largeTitle"],
+  _excluded3 = ["className", "onClick"];
 var NO_NOTIFICATIONS = [];
 // Icon-only bar buttons: 36px on desktop, the 44px touch target on coarse pointers.
 var ICON_BUTTON = cn("inline-flex items-center justify-center rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET);
@@ -241,6 +242,9 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     leftIcon = _ref3$leftIcon === void 0 ? jsx(ChevronLeft, {}) : _ref3$leftIcon,
     RightMenuContentProp = _ref3.rightMenuContent,
     onLeftIconClick = _ref3.onLeftIconClick,
+    _ref3$leftIconLabel = _ref3.leftIconLabel,
+    leftIconLabel = _ref3$leftIconLabel === void 0 ? "Go back" : _ref3$leftIconLabel,
+    leftIconProps = _ref3.leftIconProps,
     _ref3$onLoginClick = _ref3.onLoginClick,
     onLoginClick = _ref3$onLoginClick === void 0 ? function () {
       return console.log("invoked onLoginClick");
@@ -287,6 +291,18 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
       window.removeEventListener("resize", handleResize);
     };
   }, [handleResize]);
+  // Left button: `leftIconLabel` names it ("Go back" by default; e.g. "Open
+  // menu" when it opens a Sidebar drawer). `leftIconProps` lands on the
+  // <button> (aria-expanded, aria-controls, data-*, …); its className merges
+  // last and its onClick runs after `onLeftIconClick`.
+  var _ref4 = leftIconProps || {},
+    leftIconClassName = _ref4.className,
+    leftIconOnClick = _ref4.onClick,
+    leftIconRest = _objectWithoutProperties(_ref4, _excluded3);
+  var handleLeftIconClick = function handleLeftIconClick(e) {
+    onLeftIconClick === null || onLeftIconClick === void 0 || onLeftIconClick(e);
+    leftIconOnClick === null || leftIconOnClick === void 0 || leftIconOnClick(e);
+  };
   // Handle search submit
   var handleSearch = function handleSearch(e) {
     e.preventDefault();
@@ -356,13 +372,14 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
           "aria-hidden": true
         }), jsxs("div", {
           className: "flex min-w-0 items-center",
-          children: [leftIcon !== false && jsx("button", {
-            onClick: onLeftIconClick,
+          children: [leftIcon !== false && jsx("button", _objectSpread2(_objectSpread2({
             type: "button",
-            className: cn(ICON_BUTTON, "shrink-0 md:hidden"),
-            "aria-label": "Go back",
+            "aria-label": leftIconLabel
+          }, leftIconRest), {}, {
+            onClick: handleLeftIconClick,
+            className: cn(ICON_BUTTON, "shrink-0 md:hidden", leftIconClassName),
             children: leftIcon
-          }), logo && jsx("div", {
+          })), logo && jsx("div", {
             className: "ml-2 min-w-0 truncate sm:ml-4 md:ml-0",
             children: logo
           })]

package/dist/esm/components/navigation/Sidebar.js

@@ -11,7 +11,7 @@ import { useScrollLock } from '../../hooks/useScrollLock.js';
 import { useMediaQuery } from '../../hooks/useMediaQuery.js';
 import { useSheetDrag, FLICK_VELOCITY } from '../../hooks/useSheetDrag.js';
 
-var _excluded = ["items", "collapsed", "onToggle", "className", "containerClassName", "stickyOffset", "logo", "footer", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions", "linkAs", "expandedIds", "defaultExpandedIds", "onExpandedChange", "swipeable"];
+var _excluded = ["items", "collapsed", "collapsible", "onToggle", "className", "containerClassName", "stickyOffset", "logo", "footer", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions", "linkAs", "expandedIds", "defaultExpandedIds", "onExpandedChange", "swipeable"];
 // From `md` up the sidebar is an in-flow sticky column; below it, the same
 // tree becomes an off-canvas drawer (modal dialog while open).
 var SIDEBAR_DESKTOP_QUERY = "(min-width: 768px)";
@@ -178,6 +178,8 @@ var hasBadge = function hasBadge(item) {
  * - linkAs: element type used for items with `href` (default "a"; pass Next.js Link etc.)
  * - collapsed: boolean (desktop collapsed)
  * - onToggle: function to toggle collapse
+ * - collapsible: boolean (default true) — false hides the md+ collapse/expand
+ *   toggle (the drawer keeps its "Close navigation" button)
  * - expandedIds / defaultExpandedIds / onExpandedChange: open groups (ids)
  * - className, containerClassName, stickyOffset, logo, footer, user, onUserClick
  * - drawerPosition: 'left' | 'right'
@@ -194,6 +196,8 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     items = _ref2$items === void 0 ? [] : _ref2$items,
     _ref2$collapsed = _ref2.collapsed,
     collapsed = _ref2$collapsed === void 0 ? false : _ref2$collapsed,
+    _ref2$collapsible = _ref2.collapsible,
+    collapsible = _ref2$collapsible === void 0 ? true : _ref2$collapsible,
     onToggle = _ref2.onToggle,
     className = _ref2.className,
     containerClassName = _ref2.containerClassName,
@@ -525,6 +529,9 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     if (drawerMode && mobileOpen && setIsMobileOpen) setIsMobileOpen(false);else onToggle === null || onToggle === void 0 || onToggle();
   };
   var toggleLabel = drawerMode ? "Close navigation" : effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar";
+  // `collapsible={false}`: no collapse/expand toggle on md+. The drawer keeps
+  // its close button (44px touch target, the drawer's only visible close).
+  var showToggle = drawerMode || collapsible;
   var CloseChevron = isRight ? ChevronRight : ChevronLeft;
   var toggleIcon = drawerMode ? jsx(CloseChevron, {
     className: "h-5 w-5",
@@ -591,7 +598,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         children: [!effectiveCollapsed && logo && jsx("div", {
           className: "flex min-w-0 items-center",
           children: logo
-        }), jsx("button", {
+        }), showToggle && jsx("button", {
           type: "button",
           onClick: handleToggleClick,
           className: cn("inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md", "hover:bg-gray-100 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"),

package/dist/esm/hooks/useFocusTrap.js

@@ -5,9 +5,29 @@ import { useLatestRef } from './useLatestRef.js';
 // Internal (not exported from the package). Shared focus management for the
 // overlay primitives (Drawer, Dialog, Popover, Tour, Sidebar, AppShell).
 var FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "textarea:not([disabled])", "input:not([disabled])", "select:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(",");
+// A responsive drawer (Sidebar's `md:hidden`, AppShell's `lg:hidden`) can be
+// "open" while CSS hides it on wide viewports; there is nothing to trap then.
+// `stopAt` (exclusive) bounds the walk, so getFocusable checks only the
+// elements between a candidate and its root.
+var isDisplayNone = function isDisplayNone(el) {
+  var stopAt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  for (var node = el; node && node.nodeType === 1 && node !== stopAt; node = node.parentElement) {
+    if (window.getComputedStyle(node).display === "none") return true;
+  }
+  return false;
+};
+// `.focus()` silently fails on an element that is not rendered (`display:none`
+// on it or an ancestor) or is `visibility:hidden` (inherited, so the element's
+// own computed value covers its ancestors). getClientRects() is not used:
+// jsdom reports empty rects for every element.
+var isRendered = function isRendered(el, root) {
+  return window.getComputedStyle(el).visibility !== "hidden" && !isDisplayNone(el, root);
+};
+// Tabbable, rendered descendants of `root`, in DOM order. Used for the initial
+// focus and for the Tab trap's first/last items.
 var getFocusable = function getFocusable(root) {
   return root ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
-    return el.getAttribute("aria-hidden") !== "true";
+    return el.getAttribute("aria-hidden") !== "true" && isRendered(el, root);
   }) : [];
 };
 // Only the most recently opened overlay reacts to Escape / Tab, so a Popover
@@ -16,14 +36,6 @@ var layerStack = [];
 var isTopLayer = function isTopLayer(token) {
   return layerStack[layerStack.length - 1] === token;
 };
-// A responsive drawer (Sidebar's `md:hidden`, AppShell's `lg:hidden`) can be
-// "open" while CSS hides it on wide viewports; there is nothing to trap then.
-var isDisplayNone = function isDisplayNone(el) {
-  for (var node = el; node && node.nodeType === 1; node = node.parentElement) {
-    if (window.getComputedStyle(node).display === "none") return true;
-  }
-  return false;
-};
 function cycleFocus(e, panel) {
   if (isDisplayNone(panel)) return;
   var focusables = getFocusable(panel);

package/dist/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.js"],"names":[],"mappings":"AAyDA;;;;GAIG;AACH;;;;;;SAmCC;AA3FD,wCAOY;AAEL,+CAKC"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.js"],"names":[],"mappings":"AAoEA;;;;GAIG;AACH;;;;;;SAmCC;AAtGD,wCAOY;AAsBL,+CAKC"}

package/dist/index.esm.js

@@ -5976,9 +5976,29 @@ function Portal(_ref) {
 // Internal (not exported from the package). Shared focus management for the
 // overlay primitives (Drawer, Dialog, Popover, Tour, Sidebar, AppShell).
 var FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "textarea:not([disabled])", "input:not([disabled])", "select:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(",");
+// A responsive drawer (Sidebar's `md:hidden`, AppShell's `lg:hidden`) can be
+// "open" while CSS hides it on wide viewports; there is nothing to trap then.
+// `stopAt` (exclusive) bounds the walk, so getFocusable checks only the
+// elements between a candidate and its root.
+var isDisplayNone = function isDisplayNone(el) {
+  var stopAt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  for (var node = el; node && node.nodeType === 1 && node !== stopAt; node = node.parentElement) {
+    if (window.getComputedStyle(node).display === "none") return true;
+  }
+  return false;
+};
+// `.focus()` silently fails on an element that is not rendered (`display:none`
+// on it or an ancestor) or is `visibility:hidden` (inherited, so the element's
+// own computed value covers its ancestors). getClientRects() is not used:
+// jsdom reports empty rects for every element.
+var isRendered = function isRendered(el, root) {
+  return window.getComputedStyle(el).visibility !== "hidden" && !isDisplayNone(el, root);
+};
+// Tabbable, rendered descendants of `root`, in DOM order. Used for the initial
+// focus and for the Tab trap's first/last items.
 var getFocusable = function getFocusable(root) {
   return root ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
-    return el.getAttribute("aria-hidden") !== "true";
+    return el.getAttribute("aria-hidden") !== "true" && isRendered(el, root);
   }) : [];
 };
 // Only the most recently opened overlay reacts to Escape / Tab, so a Popover
@@ -5987,14 +6007,6 @@ var layerStack = [];
 var isTopLayer = function isTopLayer(token) {
   return layerStack[layerStack.length - 1] === token;
 };
-// A responsive drawer (Sidebar's `md:hidden`, AppShell's `lg:hidden`) can be
-// "open" while CSS hides it on wide viewports; there is nothing to trap then.
-var isDisplayNone = function isDisplayNone(el) {
-  for (var node = el; node && node.nodeType === 1; node = node.parentElement) {
-    if (window.getComputedStyle(node).display === "none") return true;
-  }
-  return false;
-};
 function cycleFocus(e, panel) {
   if (isDisplayNone(panel)) return;
   var focusables = getFocusable(panel);
@@ -6899,7 +6911,7 @@ var SheetCloseButton = function SheetCloseButton(_ref5) {
 
 var _excluded$Y = ["open", "isOpen", "placement", "title", "description", "showCloseButton", "haptics", "onSnapChange"],
   _excluded2$9 = ["className"],
-  _excluded3$4 = ["className"],
+  _excluded3$5 = ["className"],
   _excluded4$3 = ["className"];
 function ownKeys$16(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$16(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$16(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -6987,7 +6999,7 @@ var SheetHeader = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
 });
 var SheetBody = /*#__PURE__*/React__default.forwardRef(function (_ref4, _ref5) {
   var className = _ref4.className,
-    props = _objectWithoutProperties$1(_ref4, _excluded3$4);
+    props = _objectWithoutProperties$1(_ref4, _excluded3$5);
   var ctx = useContext(SheetContext);
   var dragProps = ctx ? mergeHandlers(ctx.bodyDragProps, props) : {};
   return jsx("div", _objectSpread$16(_objectSpread$16(_objectSpread$16({
@@ -7497,7 +7509,8 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
       return document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  var showClearButton = allowClear && !disabled && selectedOptions.length > 0;
+  var isEmpty = selectedOptions.length === 0;
+  var showClearButton = allowClear && !disabled && !isEmpty;
   var displayValue = function displayValue() {
     var _selectedOptions$;
     if (multiSelect) {
@@ -7755,9 +7768,12 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", SIZE_CLASSES$3[size] || SIZE_CLASSES$3.md, {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !selectedOptions.length,
+          // Empty: the placeholder reads muted, like Input's
+          // ::placeholder (#159). `className` still merges last.
+          "text-muted": isEmpty,
           "pr-14": showClearButton
         }, className),
+        "data-empty": isEmpty ? "" : undefined,
         onClick: function onClick() {
           if (!disabled) {
             setIsOpen(function (prev) {
@@ -18201,10 +18217,13 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, forwarde
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !selected,
+          // Empty: the placeholder reads muted, like Input's
+          // ::placeholder (#159). `className` still merges last.
+          "text-muted": !selected,
           // leave room for the sibling clear button overlaid on the field
           "pr-16": showClear && selected
         }, className),
+        "data-empty": selected ? undefined : "",
         onClick: function onClick() {
           return setIsOpen(function (open) {
             return !open;
@@ -19172,7 +19191,7 @@ ColorPicker.displayName = "ColorPicker";
 
 var _excluded$P = ["fields", "onSubmit", "defaultValues", "validationSchema", "className", "submitText", "resetText", "submitButtonClass", "resetButtonClass", "showReset", "submitDisabled"],
   _excluded2$7 = ["type", "name", "label", "required", "options", "placeholder", "helperText"],
-  _excluded3$3 = ["onChange", "ref", "value"];
+  _excluded3$4 = ["onChange", "ref", "value"];
 function ownKeys$U(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$U(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$U(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$U(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -19502,7 +19521,7 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
               _onChange3 = _ref9$field.onChange,
               ref = _ref9$field.ref,
               value = _ref9$field.value,
-              field = _objectWithoutProperties$1(_ref9$field, _excluded3$3);
+              field = _objectWithoutProperties$1(_ref9$field, _excluded3$4);
             return jsxs("div", {
               className: "w-full",
               children: [label && jsxs("label", {
@@ -20468,7 +20487,8 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
     }));
   };
   // Display placeholder until both start and end are committed (mandatory range).
-  var triggerText = committed.start && committed.end ? formatRange(committed.start, committed.end) : placeholder;
+  var isEmpty = !committed.start || !committed.end;
+  var triggerText = isEmpty ? placeholder : formatRange(committed.start, committed.end);
   var draftText = localStart && localEnd ? formatRange(localStart, localEnd) : placeholder;
   var presetList = Array.isArray(presets) && presets.length > 0 ? presets : null;
   var presetChips = presetList ? jsx("div", {
@@ -20548,9 +20568,12 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !committed.start || !committed.end,
+          // Empty: the placeholder reads muted, like Input's
+          // ::placeholder (#159). `className` still merges last.
+          "text-muted": isEmpty,
           "pr-16": showClearButton
         }, className),
+        "data-empty": isEmpty ? "" : undefined,
         onClick: function onClick() {
           // The trigger always toggles, even mid-pick (DTUI-35): closing
           // drops the uncommitted start, reopening starts from the last
@@ -25467,7 +25490,7 @@ var SearchField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 });
 SearchField.displayName = "SearchField";
 
-var _excluded$u = ["items", "collapsed", "onToggle", "className", "containerClassName", "stickyOffset", "logo", "footer", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions", "linkAs", "expandedIds", "defaultExpandedIds", "onExpandedChange", "swipeable"];
+var _excluded$u = ["items", "collapsed", "collapsible", "onToggle", "className", "containerClassName", "stickyOffset", "logo", "footer", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions", "linkAs", "expandedIds", "defaultExpandedIds", "onExpandedChange", "swipeable"];
 function ownKeys$z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // From `md` up the sidebar is an in-flow sticky column; below it, the same
@@ -25636,6 +25659,8 @@ var hasBadge$1 = function hasBadge(item) {
  * - linkAs: element type used for items with `href` (default "a"; pass Next.js Link etc.)
  * - collapsed: boolean (desktop collapsed)
  * - onToggle: function to toggle collapse
+ * - collapsible: boolean (default true) — false hides the md+ collapse/expand
+ *   toggle (the drawer keeps its "Close navigation" button)
  * - expandedIds / defaultExpandedIds / onExpandedChange: open groups (ids)
  * - className, containerClassName, stickyOffset, logo, footer, user, onUserClick
  * - drawerPosition: 'left' | 'right'
@@ -25652,6 +25677,8 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
     items = _ref2$items === void 0 ? [] : _ref2$items,
     _ref2$collapsed = _ref2.collapsed,
     collapsed = _ref2$collapsed === void 0 ? false : _ref2$collapsed,
+    _ref2$collapsible = _ref2.collapsible,
+    collapsible = _ref2$collapsible === void 0 ? true : _ref2$collapsible,
     onToggle = _ref2.onToggle,
     className = _ref2.className,
     containerClassName = _ref2.containerClassName,
@@ -25983,6 +26010,9 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
     if (drawerMode && mobileOpen && setIsMobileOpen) setIsMobileOpen(false);else onToggle === null || onToggle === void 0 || onToggle();
   };
   var toggleLabel = drawerMode ? "Close navigation" : effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar";
+  // `collapsible={false}`: no collapse/expand toggle on md+. The drawer keeps
+  // its close button (44px touch target, the drawer's only visible close).
+  var showToggle = drawerMode || collapsible;
   var CloseChevron = isRight ? ChevronRight : ChevronLeft;
   var toggleIcon = drawerMode ? jsx(CloseChevron, {
     className: "h-5 w-5",
@@ -26049,7 +26079,7 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
         children: [!effectiveCollapsed && logo && jsx("div", {
           className: "flex min-w-0 items-center",
           children: logo
-        }), jsx("button", {
+        }), showToggle && jsx("button", {
           type: "button",
           onClick: handleToggleClick,
           className: cn("inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md", "hover:bg-gray-100 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"),
@@ -26274,7 +26304,8 @@ var Avatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 Avatar.displayName = 'Avatar';
 
 var _excluded$r = ["emitter", "content", "notifications"],
-  _excluded2$5 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen", "sticky", "largeTitle"];
+  _excluded2$5 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "leftIconLabel", "leftIconProps", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen", "sticky", "largeTitle"],
+  _excluded3$3 = ["className", "onClick"];
 function ownKeys$w(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$w(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var NO_NOTIFICATIONS = [];
@@ -26505,6 +26536,9 @@ var Navbar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
     leftIcon = _ref3$leftIcon === void 0 ? jsx(ChevronLeft, {}) : _ref3$leftIcon,
     RightMenuContentProp = _ref3.rightMenuContent,
     onLeftIconClick = _ref3.onLeftIconClick,
+    _ref3$leftIconLabel = _ref3.leftIconLabel,
+    leftIconLabel = _ref3$leftIconLabel === void 0 ? "Go back" : _ref3$leftIconLabel,
+    leftIconProps = _ref3.leftIconProps,
     _ref3$onLoginClick = _ref3.onLoginClick,
     onLoginClick = _ref3$onLoginClick === void 0 ? function () {
       return console.log("invoked onLoginClick");
@@ -26551,6 +26585,18 @@ var Navbar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
       window.removeEventListener("resize", handleResize);
     };
   }, [handleResize]);
+  // Left button: `leftIconLabel` names it ("Go back" by default; e.g. "Open
+  // menu" when it opens a Sidebar drawer). `leftIconProps` lands on the
+  // <button> (aria-expanded, aria-controls, data-*, …); its className merges
+  // last and its onClick runs after `onLeftIconClick`.
+  var _ref4 = leftIconProps || {},
+    leftIconClassName = _ref4.className,
+    leftIconOnClick = _ref4.onClick,
+    leftIconRest = _objectWithoutProperties$1(_ref4, _excluded3$3);
+  var handleLeftIconClick = function handleLeftIconClick(e) {
+    onLeftIconClick === null || onLeftIconClick === void 0 || onLeftIconClick(e);
+    leftIconOnClick === null || leftIconOnClick === void 0 || leftIconOnClick(e);
+  };
   // Handle search submit
   var handleSearch = function handleSearch(e) {
     e.preventDefault();
@@ -26620,13 +26666,14 @@ var Navbar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
           "aria-hidden": true
         }), jsxs("div", {
           className: "flex min-w-0 items-center",
-          children: [leftIcon !== false && jsx("button", {
-            onClick: onLeftIconClick,
+          children: [leftIcon !== false && jsx("button", _objectSpread$w(_objectSpread$w({
             type: "button",
-            className: cn(ICON_BUTTON, "shrink-0 md:hidden"),
-            "aria-label": "Go back",
+            "aria-label": leftIconLabel
+          }, leftIconRest), {}, {
+            onClick: handleLeftIconClick,
+            className: cn(ICON_BUTTON, "shrink-0 md:hidden", leftIconClassName),
             children: leftIcon
-          }), logo && jsx("div", {
+          })), logo && jsx("div", {
             className: "ml-2 min-w-0 truncate sm:ml-4 md:ml-0",
             children: logo
           })]