@dreamtree-org/twreact-ui 1.3.4 → 1.3.5

package/README.md

@@ -214,12 +214,16 @@ Versatile button component with multiple variants and states.
 - `leftIcon`: ReactNode
 - `rightIcon`: ReactNode
 - `fullWidth`: boolean
+- `as`: ElementType — render as a link or router `Link` with the Button's look (a bare `href` renders an `<a>`)
+- `href`: string
 - `className`: string
 
 ```jsx
 <Button variant="primary" size="lg" loading>
   Loading...
 </Button>
+<Button href="tel:+919800000000" variant="outline">Call</Button>
+<Button as={Link} to="/move-in">Move in</Button>
 ```
 
 #### Input
@@ -279,6 +283,7 @@ Advanced select component with search, multi-select, and grouping support.
 - `closeOnSelect`: boolean
 - `maxTagCount`: number (default: 3)
 - `allowClear`: boolean (default: false; set it when the field may be emptied)
+- `size`: 'sm' | 'md' | 'lg' (default: 'md') — `md` grows to the 44px touch target on coarse pointers; `lg` is 44px everywhere
 
 ```jsx
 <Select
@@ -510,10 +515,10 @@ Top navigation bar with user menu and notifications.
 Fixed bottom tab bar for phones (`md:hidden`). Uses the semantic `bg-surface` / `border-line` tokens, so it follows dark mode.
 
 **Props:**
-- `items`: Array<{ id, label, icon, onClick?, active?, badge? }>
+- `items`: Array<{ id, label, icon, onClick?, active?, badge?, variant?, 'aria-*'?, 'data-*'? }>
 - `className`: string
 
-The `active` item gets a tinted primary background, `text-primary-700` and `aria-current="page"` (inactive tabs are neutral `text-muted`). Badges sit on their own item's icon. Items share the width and labels truncate, so five tabs fit a 375px screen.
+`variant: 'action'` renders the item as a raised circular primary button (FAB), e.g. a centre "+" that opens a sheet. `aria-*` and `data-*` item keys reach the button, so an item can carry `aria-haspopup="dialog"` and `aria-expanded`. The `active` item gets a tinted primary background, `text-primary-700` and `aria-current="page"` (inactive tabs are neutral `text-muted`). Badges sit on their own item's icon. Items share the width and labels truncate, so five tabs fit a 375px screen.
 
 ```jsx
 <FootNav
@@ -665,7 +670,7 @@ Status indicators and labels with different variants.
 
 **Props:**
 - `children`: ReactNode
-- `variant`: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'outline' (default: 'default')
+- `variant`: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'outline' (default: 'default')
 - `size`: 'sm' | 'md' | 'lg' (default: 'md')
 - `rounded`: boolean (default: true)
 
@@ -708,7 +713,7 @@ Interaction primitives that products used to compose by hand. All are `forwardRe
 
 | Component | Group | Use for |
 |---|---|---|
-| [`Drawer`](doc/Drawer.md) | Feedback | Side/edge sheet (`placement` right/left/top/bottom, `size` sm–full) — record peeks and editors. Same `isOpen`/`onClose` contract as `Dialog`; focus trap, Escape/backdrop close, focus restore, scroll lock; `Drawer.Header/Body/Footer` |
+| [`Drawer`](doc/Drawer.md) | Feedback | Side/edge sheet (`placement` right/left/top/bottom, `size` sm–full) — record peeks and editors. `placement="bottom"` is a phone bottom sheet (grab `handle`, `swipeToClose`, rounded top, safe-area padding). Same `isOpen`/`onClose` contract as `Dialog`; focus trap, Escape/backdrop close, focus restore, scroll lock; `Drawer.Header/Body/Footer` |
 | [`Popover`](doc/Popover.md) | Core | Anchored, click-triggered panel with interactive content (unlike `Tooltip`). Controlled/uncontrolled `open`, `placement` with flip, Escape/outside-click close, `aria-expanded`/`aria-controls`/`aria-haspopup="dialog"` |
 | [`Textarea`](doc/Textarea.md) | Core | Multi-line input mirroring `Input`: `label`, `error`, `helperText`, `required`, `showCount`/`maxLength`, `autoResize`/`maxRows` |
 | [`Slider`](doc/Slider.md) | Core | Single value or `[low, high]` range; `min`/`max`/`step`, arrows/PageUp/PageDown/Home/End, `role="slider"` with full `aria-value*` |
@@ -872,7 +877,7 @@ module.exports = {
 @source "../node_modules/@dreamtree-org/twreact-ui/dist/index.esm.js";
 ```
 
-This adds semantic utilities next to the palettes: `bg-surface`, `bg-background`, `text-foreground`, `text-muted`, `border-line`, `bg-shell`, `text-micro`, `rounded-control` and `rounded-card`. Add a brand by creating `tokens/brands/<name>.json`; it overrides only the steps and roles you list.
+The palettes are `primary`, `secondary`, `success`, `warning`, `error`, `info` and `gray` (steps 50–950), so `bg-info-50` / `text-info-600` work out of the box; `info` is for informational and scheduled states that are not the brand accent. This adds semantic utilities next to the palettes: `bg-surface`, `bg-background`, `text-foreground`, `text-muted`, `border-line`, `bg-shell`, `text-micro`, `rounded-control` and `rounded-card`. Add a brand by creating `tokens/brands/<name>.json`; it overrides only the steps and roles you list.
 
 **Design rules:** [`DESIGN.md`](DESIGN.md) is the rule set for product screens and AI agents: tokens only, blocks first, loading, empty and error states, 390 px, no native dialogs. It is generated from the tokens (`npm run build:tokens`).
 

package/ai-skills/dreamtree-ui.md

@@ -193,7 +193,11 @@ When suggesting a component or new variant value, use this exact vocabulary.
 
 **Interaction primitives** — reach for these before hand-rolling the pattern:
 
-- `Drawer` — side/edge sheet for record peeks and editors (`isOpen`, `onClose`, `title`, `placement`, `size`, `footer`); don't fake one with `Dialog size="lg"`.
+- `Drawer` — side/edge sheet for record peeks and editors (`isOpen`, `onClose`, `title`, `placement`, `size`, `footer`); don't fake one with `Dialog size="lg"`. On phones use `placement="bottom"` (+ `swipeToClose`) as the bottom sheet: it already has a grab `handle`, rounded top and safe-area padding — don't add them with `className`.
+- `FootNav` — phone tab bar. A centre "+" is an item with `variant: 'action'` (raised primary circle); give it `'aria-haspopup': 'dialog'` and `'aria-expanded'` when it opens a sheet.
+- `Button` as a link — `<Button href="tel:…">` or `<Button as={Link} to="/x">`; never copy Button's class string onto an `<a>`.
+- `Select size="lg"` — 44px trigger for phone forms (`md` already grows to 44px on touch screens).
+- `Stepper` steps take `title` (or its alias `label`). `Radio` follows the primary token by default — don't pass `radioColor` to match the brand.
 - `Popover` — click-triggered panel with controls (`trigger={<Button>…</Button>}`, children or `({ close }) => …`); `Tooltip` is for read-only hover text only.
 - `Textarea` — same API as `Input` plus `autoResize`/`maxRows`; never a raw `<textarea>`.
 - `Slider` — `defaultValue={40}` for one thumb, `[low, high]` for a range; `onChangeEnd` to save after a drag.

package/dist/ai-schema.json

@@ -304,6 +304,7 @@
           "success",
           "warning",
           "error",
+          "info",
           "outline"
         ],
         "default": "\"default\""
@@ -527,6 +528,27 @@
           "submit",
           "reset"
         ]
+      },
+      "as": {
+        "type": "ElementType",
+        "required": false,
+        "default": "\"button\""
+      },
+      "href": {
+        "type": "string",
+        "required": false
+      },
+      "target": {
+        "type": "string",
+        "required": false
+      },
+      "rel": {
+        "type": "string",
+        "required": false
+      },
+      "to": {
+        "type": "string | Record<string, unknown>",
+        "required": false
       }
     }
   },
@@ -1098,6 +1120,16 @@
       "initialFocusRef": {
         "type": "RefObject",
         "required": false
+      },
+      "handle": {
+        "type": "boolean",
+        "required": false,
+        "default": "true for placement=\"bottom\", else false"
+      },
+      "swipeToClose": {
+        "type": "boolean",
+        "required": false,
+        "default": "false"
       }
     }
   },
@@ -1906,7 +1938,7 @@
       "radioColor": {
         "type": "string",
         "required": false,
-        "default": "\"blue\""
+        "default": "\"rgb(var(--dt-primary-600))\""
       },
       "ariaLabel": {
         "type": "string",
@@ -2264,6 +2296,16 @@
       "renderGroupLabel": {
         "type": "(label: string) => ReactNode",
         "required": false
+      },
+      "size": {
+        "type": "enum",
+        "required": false,
+        "values": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "default": "\"md\""
       }
     }
   },
@@ -2692,7 +2734,7 @@
     "forwardRef": true,
     "props": {
       "steps": {
-        "type": "StepperStep[]",
+        "type": "Array",
         "required": true,
         "default": "[]"
       },

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/core/Button.jsx"],"names":[],"mappings":";AAIA,gFAmDG;kBAvD+B,OAAO"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/core/Button.jsx"],"names":[],"mappings":";AAIA,gFAkEG;kBAtE+B,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/core/Radio.jsx"],"names":[],"mappings":";AAYA,+EAqIG;kBAhJgD,OAAO"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/core/Radio.jsx"],"names":[],"mappings":";AAYA,+EAsIG;kBAjJgD,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":";AAqGA,gFAszBE;kBAn5BK,OAAO"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/core/Select.jsx"],"names":[],"mappings":";AA8GA,gFAwzBE;kBA95BK,OAAO"}

package/dist/components/feedback/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Dialog.jsx"],"names":[],"mappings":";AAmCA,gFAuJG;kBA1LsC,OAAO"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Dialog.jsx"],"names":[],"mappings":";AAoCA,gFA0JG;kBA9LsC,OAAO"}

package/dist/components/feedback/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Drawer.jsx"],"names":[],"mappings":";AAiCA,gFAyFG;kBA1HkC,OAAO"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Drawer.jsx"],"names":[],"mappings":";AAqCA,gFAqHG;kBA1JkC,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"FootNav.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/FootNav.jsx"],"names":[],"mappings":";AAKA,iFA8CG;kBAnDe,OAAO"}
+{"version":3,"file":"FootNav.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/FootNav.jsx"],"names":[],"mappings":";AAmBA,iFA0DG;kBA7Ee,OAAO"}

package/dist/components/utility/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Badge.jsx"],"names":[],"mappings":";AAGA,+EA6CG;kBAhDe,OAAO"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Badge.jsx"],"names":[],"mappings":";AAGA,+EA8CG;kBAjDe,OAAO"}

package/dist/components/utility/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Stepper.jsx"],"names":[],"mappings":";AAIA,iFAoIG;kBAxIe,OAAO"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Stepper.jsx"],"names":[],"mappings":";AAIA,iFAuIG;kBA3Ie,OAAO"}

package/dist/esm/components/blocks/StatusPill.js

@@ -10,7 +10,7 @@ var _excluded = ["status", "map", "tone", "icon", "children", "className"];
 // One map from domain state to tone + human label; unknown states are humanized, never shown raw.
 var TONE_TO_VARIANT = {
   neutral: 'secondary',
-  info: 'primary',
+  info: 'info',
   success: 'success',
   warning: 'warning',
   danger: 'error',

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

@@ -5,7 +5,7 @@ import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
 import { Loader2 } from 'lucide-react';
 
-var _excluded = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth"];
+var _excluded = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth", "as", "onClick"];
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$variant = _ref.variant,
@@ -18,12 +18,19 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     leftIcon = _ref.leftIcon,
     rightIcon = _ref.rightIcon,
     fullWidth = _ref.fullWidth,
+    as = _ref.as,
+    onClick = _ref.onClick,
     props = _objectWithoutProperties(_ref, _excluded);
-  var baseClasses = cn('inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none', {
+  // `as` renders any element or component (an <a>, a router Link) with the
+  // Button's look; a bare `href` implies an <a>.
+  var Component = as || (props.href !== undefined ? 'a' : 'button');
+  var isNativeButton = Component === 'button';
+  var isDisabled = disabled || loading;
+  var baseClasses = cn('inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none', {
     // Variants
     'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500': variant === 'primary',
     'bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus:ring-secondary-500': variant === 'secondary',
-    'bg-transparent border border-gray-300 hover:bg-gray-50 focus:ring-primary-500': variant === 'outline',
+    'bg-transparent border border-gray-300 hover:bg-gray-50 focus:ring-primary-500 dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus:ring-offset-gray-900': variant === 'outline',
     'bg-transparent text-primary-600 hover:bg-primary-50 focus:ring-primary-500': variant === 'ghost',
     'bg-error-600 text-white hover:bg-error-700 focus:ring-error-500': variant === 'destructive',
     'bg-success-600 text-white hover:bg-success-700 focus:ring-success-500': variant === 'success',
@@ -38,10 +45,20 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // Full width
     'w-full': fullWidth
   }, className);
-  return jsxs("button", _objectSpread2(_objectSpread2({
+  return jsxs(Component, _objectSpread2(_objectSpread2(_objectSpread2({
     ref: ref,
-    className: baseClasses,
-    disabled: disabled || loading
+    className: baseClasses
+  }, isNativeButton ? {
+    disabled: isDisabled
+  }
+  // Links can't be `disabled`: announce it and swallow the click instead.
+  : isDisabled && {
+    'aria-disabled': true,
+    tabIndex: -1
+  }), {}, {
+    onClick: !isNativeButton && isDisabled ? function (e) {
+      return e.preventDefault();
+    } : onClick
   }, props), {}, {
     children: [loading && jsx(Loader2, {
       className: "mr-2 h-4 w-4 animate-spin"

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

@@ -51,7 +51,8 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var autoId = useId();
   var inputId = id || "".concat(autoId, "-radio");
-  var accentColor = radioColor || "blue";
+  // Default to the brand's primary token so the radio follows theming.
+  var accentColor = radioColor || "rgb(var(--dt-primary-600))";
   var _useState = useState(!!defaultChecked),
     _useState2 = _slicedToArray(_useState, 2),
     internalChecked = _useState2[0],
@@ -109,7 +110,7 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
         "--radio-accent": accentColor
       },
       children: jsx("span", {
-        className: cn("flex items-center justify-center rounded-full border transition-colors duration-150 ease-in-out border-slate-300", sizeClasses.outer, disabled ? "bg-slate-100" : "bg-white", isChecked ? "shadow-inner" : ""),
+        className: cn("flex items-center justify-center rounded-full border transition-colors duration-150 ease-in-out border-slate-300 dark:border-gray-600", sizeClasses.outer, disabled ? "bg-slate-100 dark:bg-gray-800" : "bg-white dark:bg-gray-900", isChecked ? "shadow-inner" : ""),
         children: jsx("span", {
           "aria-hidden": true,
           className: cn("rounded-full transform transition-all duration-200 ease-out", sizeClasses.dot),

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

@@ -7,7 +7,7 @@ import { cn } from '../../utils/cn.js';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
 import { ChevronDown, X, Check, Search, Plus } from 'lucide-react';
 
-var _excluded = ["options", "value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name"];
+var _excluded = ["options", "value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name", "size"];
 /**
  * Enhanced Select component (debounce removed)
  * - Supports single and multi select
@@ -106,6 +106,14 @@ var highlight = function highlight() {
     }), label.slice(idx + term.length)]
   });
 };
+// Trigger sizes. min-h (not h) so multi-select tags can wrap. `md` keeps its
+// desktop look but grows to the 44px touch target on coarse pointers; `lg` is
+// 44px everywhere.
+var SIZE_CLASSES = {
+  sm: "min-h-8 px-2.5 py-1 text-xs",
+  md: "min-h-[38px] px-3 py-2 text-sm [@media(pointer:coarse)]:min-h-11",
+  lg: "min-h-11 px-4 py-2.5 text-base"
+};
 var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
@@ -142,6 +150,8 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     maxTagCount = _ref$maxTagCount === void 0 ? 3 : _ref$maxTagCount,
     renderGroupLabel = _ref.renderGroupLabel,
     name = _ref.name,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -712,7 +722,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
         "aria-describedby": describedBy,
         "aria-invalid": error ? true : undefined,
-        className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 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", {
+        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,
           "pr-14": showClearButton

package/dist/esm/components/feedback/Dialog.js

@@ -6,6 +6,7 @@ import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn.js';
 import { X } from 'lucide-react';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
 var _excluded = ["isOpen", "onClose", "title", "children", "size", "dismissible", "showCloseButton", "footer", "className", "onOpen"],
   _excluded2 = ["children", "className"],
@@ -141,11 +142,12 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
           children: title
         }), showCloseButton && jsx("button", {
           type: "button",
-          className: "rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100",
+          className: cn('inline-flex items-center justify-center rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100', TOUCH_TARGET),
           onClick: onClose,
           "aria-label": "Close dialog",
           children: jsx(X, {
-            className: "h-5 w-5"
+            className: "h-5 w-5",
+            "aria-hidden": "true"
           })
         })]
       }), jsx("div", {

package/dist/esm/components/feedback/Drawer.js

@@ -8,8 +8,10 @@ import { cn } from '../../utils/cn.js';
 import { setRefs } from '../../utils/position.js';
 import { useFocusTrap } from '../../hooks/useFocusTrap.js';
 import { useScrollLock } from '../../hooks/useScrollLock.js';
+import { useSwipeToClose } from '../../hooks/useSwipeToClose.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
-var _excluded = ["isOpen", "onClose", "title", "description", "children", "placement", "size", "dismissible", "showCloseButton", "footer", "initialFocusRef", "className"],
+var _excluded = ["isOpen", "onClose", "title", "description", "children", "placement", "size", "dismissible", "showCloseButton", "footer", "initialFocusRef", "handle", "swipeToClose", "className", "style"],
   _excluded2 = ["className"],
   _excluded3 = ["className"],
   _excluded4 = ["className"];
@@ -17,7 +19,8 @@ var PLACEMENT_CLASSES = {
   right: "inset-y-0 right-0 h-full w-full border-l",
   left: "inset-y-0 left-0 h-full w-full border-r",
   top: "inset-x-0 top-0 w-full border-b",
-  bottom: "inset-x-0 bottom-0 w-full border-t"
+  // Bottom sheet: rounded top and room for the home indicator (safe area).
+  bottom: "inset-x-0 bottom-0 w-full overflow-hidden rounded-t-2xl border-t pb-[env(safe-area-inset-bottom)]"
 };
 var SIDE_SIZES = {
   sm: "max-w-xs",
@@ -40,7 +43,7 @@ var CloseButton = function CloseButton(_ref) {
     type: "button",
     onClick: onClose,
     "aria-label": "Close drawer",
-    className: cn("rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2", "dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:ring-offset-gray-900", className),
+    className: cn("inline-flex items-center justify-center rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2", "dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:ring-offset-gray-900", TOUCH_TARGET, className),
     children: jsx(X, {
       className: "h-5 w-5",
       "aria-hidden": "true"
@@ -63,7 +66,11 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
     showCloseButton = _ref2$showCloseButton === void 0 ? true : _ref2$showCloseButton,
     footer = _ref2.footer,
     initialFocusRef = _ref2.initialFocusRef,
+    handle = _ref2.handle,
+    _ref2$swipeToClose = _ref2.swipeToClose,
+    swipeToClose = _ref2$swipeToClose === void 0 ? false : _ref2$swipeToClose,
     className = _ref2.className,
+    style = _ref2.style,
     props = _objectWithoutProperties(_ref2, _excluded);
   var panelRef = useRef(null);
   var titleId = "drawer-title-".concat(useId());
@@ -73,6 +80,17 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
   // Without title/description/footer the children are the panel content, so
   // Drawer.Header / Drawer.Body / Drawer.Footer compose without double padding.
   var composed = !title && !description && !footer;
+  var showHandle = handle !== null && handle !== void 0 ? handle : side === "bottom";
+  var swipe = useSwipeToClose({
+    enabled: swipeToClose && side === "bottom" && dismissible,
+    onClose: onClose
+  });
+  // The grab zone (handle + header) starts a swipe; the scrolling body never does.
+  var grabProps = swipeToClose && side === "bottom" && dismissible ? _objectSpread2(_objectSpread2({}, swipe.dragProps), {}, {
+    className: "touch-none cursor-grab"
+  }) : {
+    className: ""
+  };
   useScrollLock(isOpen);
   useFocusTrap(panelRef, {
     active: isOpen,
@@ -91,7 +109,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
       onClick: function onClick() {
         return dismissible && (onClose === null || onClose === void 0 ? void 0 : onClose());
       }
-    }), jsx("div", _objectSpread2(_objectSpread2({
+    }), jsxs("div", _objectSpread2(_objectSpread2({
       ref: function ref(node) {
         return setRefs(node, panelRef, _ref3);
       },
@@ -101,16 +119,27 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
       "aria-describedby": description ? descriptionId : undefined,
       tabIndex: -1,
       "data-placement": side,
-      className: cn("absolute flex flex-col border-gray-200 bg-white text-gray-900 shadow-xl focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "animate-fade-in motion-reduce:animate-none", PLACEMENT_CLASSES[side], (isEdge ? EDGE_SIZES : SIDE_SIZES)[size] || (isEdge ? EDGE_SIZES.md : SIDE_SIZES.md), className)
+      className: cn("absolute flex flex-col border-gray-200 bg-white text-gray-900 shadow-xl focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "animate-fade-in motion-reduce:animate-none", PLACEMENT_CLASSES[side], (isEdge ? EDGE_SIZES : SIDE_SIZES)[size] || (isEdge ? EDGE_SIZES.md : SIDE_SIZES.md), !swipe.dragging && "transition-transform duration-200 ease-out motion-reduce:transition-none", className),
+      style: swipe.offset ? _objectSpread2(_objectSpread2({}, style), {}, {
+        transform: "translateY(".concat(swipe.offset, "px)")
+      }) : style
     }, props), {}, {
-      children: composed ? jsxs(Fragment, {
+      children: [showHandle && jsx("div", _objectSpread2(_objectSpread2({
+        "aria-hidden": "true",
+        "data-testid": "drawer-handle"
+      }, grabProps), {}, {
+        className: cn("flex shrink-0 justify-center pb-1 pt-3", grabProps.className),
+        children: jsx("span", {
+          className: "h-1.5 w-10 rounded-full bg-gray-300 dark:bg-gray-600"
+        })
+      })), composed ? jsxs(Fragment, {
         children: [showCloseButton && jsx(CloseButton, {
           onClose: onClose,
           className: "absolute right-3 top-3"
         }), children]
       }) : jsxs(Fragment, {
-        children: [jsxs("div", {
-          className: "flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-4 dark:border-gray-700",
+        children: [jsxs("div", _objectSpread2(_objectSpread2({}, grabProps), {}, {
+          className: cn("flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-4 dark:border-gray-700", showHandle && "pt-2", grabProps.className),
           children: [jsxs("div", {
             className: "min-w-0",
             children: [title && jsx("h2", {
@@ -125,14 +154,14 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
           }), showCloseButton && jsx(CloseButton, {
             onClose: onClose
           })]
-        }), jsx("div", {
+        })), jsx("div", {
           className: "min-h-0 flex-1 overflow-y-auto px-6 py-4",
           children: children
         }), footer && jsx("div", {
           className: "flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700",
           children: footer
         })]
-      })
+      })]
     }))]
   }), document.body);
 });

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

@@ -1,5 +1,5 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { cn } from '../../utils/cn.js';
@@ -8,11 +8,28 @@ var _excluded = ["items", "className"];
 var hasBadge = function hasBadge(badge) {
   return badge === 0 || Boolean(badge);
 };
-var FootNav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items,
-    className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded);
+// Only aria-* and data-* item keys reach the DOM (e.g. aria-haspopup="dialog"
+// on an item that opens a sheet); the rest of the item is data, not attributes.
+var passthrough = function passthrough(item) {
+  return Object.fromEntries(Object.entries(item).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+      key = _ref2[0];
+    return /^(aria|data)-/.test(key);
+  }));
+};
+var Badge = function Badge(_ref3) {
+  var badge = _ref3.badge;
+  return jsx("span", {
+    className: "absolute -top-1.5 left-full -ml-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-600 px-1 text-micro font-semibold text-white",
+    "data-slot": "badge",
+    children: badge
+  });
+};
+var FootNav = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
+  var _ref4$items = _ref4.items,
+    items = _ref4$items === void 0 ? [] : _ref4$items,
+    className = _ref4.className,
+    props = _objectWithoutProperties(_ref4, _excluded);
   return jsx("nav", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn('fixed bottom-0 left-0 right-0 bg-surface border-t border-line px-2 py-2 md:hidden', className)
@@ -21,27 +38,37 @@ var FootNav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "flex items-stretch justify-around gap-1",
       children: items.map(function (item, index) {
         var _item$id;
-        return jsxs("button", {
+        var isAction = item.variant === 'action';
+        return jsxs("button", _objectSpread2(_objectSpread2({
           type: "button",
           "aria-current": item.active ? 'page' : undefined,
-          className: cn('relative flex min-w-0 flex-1 flex-col items-center gap-1 rounded-md px-1 py-2 text-xs transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 motion-reduce:transition-none', item.active ? 'bg-primary-50 font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300' : 'font-medium text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800'),
+          "data-variant": isAction ? 'action' : undefined
+        }, passthrough(item)), {}, {
+          className: cn('relative flex min-w-0 flex-1 flex-col items-center gap-1 rounded-md px-1 py-2 text-xs transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 motion-reduce:transition-none', isAction ? 'group justify-start py-0 font-medium text-muted' : item.active ? 'bg-primary-50 font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300' : 'font-medium text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800'),
           onClick: function onClick() {
             var _item$onClick;
             return (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, item);
           },
-          children: [jsxs("span", {
+          children: [isAction ?
+          // Raised primary circle (FAB): 56px, lifted above the bar and
+          // ringed in the surface colour so it reads as cut out of the bar.
+          jsxs("span", {
+            className: "relative -mt-7 inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary-600 text-2xl text-white shadow-lg ring-4 ring-surface transition-colors group-hover:bg-primary-700 motion-reduce:transition-none",
+            "data-slot": "icon",
+            children: [item.icon, hasBadge(item.badge) && jsx(Badge, {
+              badge: item.badge
+            })]
+          }) : jsxs("span", {
             className: "relative inline-flex text-lg",
             "data-slot": "icon",
-            children: [item.icon, hasBadge(item.badge) && jsx("span", {
-              className: "absolute -top-1.5 left-full -ml-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-600 px-1 text-micro font-semibold text-white",
-              "data-slot": "badge",
-              children: item.badge
+            children: [item.icon, hasBadge(item.badge) && jsx(Badge, {
+              badge: item.badge
             })]
           }), jsx("span", {
             className: "block max-w-full truncate",
             children: item.label
           })]
-        }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index);
+        }), (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index);
       })
     })
   }));

package/dist/esm/components/utility/Badge.js

@@ -22,6 +22,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     success: 'bg-success-100 text-success-800',
     warning: 'bg-warning-100 text-warning-800',
     error: 'bg-error-100 text-error-800',
+    info: 'bg-info-100 text-info-800',
     outline: 'border border-gray-300'
   };
   var sizes = {

package/dist/esm/components/utility/Stepper.js

@@ -48,9 +48,12 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-label": "Progress"
   }, props), {}, {
     children: steps.map(function (step, stepIndex) {
+      var _step$title;
       var status = getStepStatus(stepIndex);
       var isLast = stepIndex === steps.length - 1;
       var colors = statusColors[status];
+      // `label` is accepted as an alias for `title` (the docs used `label`).
+      var stepTitle = (_step$title = step.title) !== null && _step$title !== void 0 ? _step$title : step.label;
       return jsxs("div", {
         className: cn('flex items-center', {
           'flex-col': orientation === 'horizontal',
@@ -70,7 +73,7 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             },
             disabled: !onStepClick || stepIndex > currentStep,
             "aria-current": status === 'current' ? 'step' : undefined,
-            "aria-label": "Step ".concat(stepIndex + 1).concat(step.title ? ": ".concat(step.title) : '').concat(status === 'completed' ? ' (completed)' : ''),
+            "aria-label": "Step ".concat(stepIndex + 1).concat(stepTitle ? ": ".concat(stepTitle) : '').concat(status === 'completed' ? ' (completed)' : ''),
             children: status === 'completed' ? jsx(Check, {
               className: "h-4 w-4",
               "aria-hidden": "true"
@@ -88,7 +91,7 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           }),
           children: [jsx("span", {
             className: cn('text-sm font-medium', colors.text),
-            children: step.title
+            children: stepTitle
           }), step.description && jsx("span", {
             className: "text-xs text-muted",
             children: step.description