@dreamtree-org/twreact-ui 1.3.9 → 1.3.10

package/README.md

@@ -913,6 +913,8 @@ function App() {
 
 Surfaces such as `Card`, `Sidebar`, `Navbar`, `Table`, `FootNav` and `Dropdown` use the semantic `bg-surface` / `bg-background` / `border-line` / `text-foreground` / `text-muted` tokens, which switch under `.dark` (or `[data-theme="dark"]`). Re-theme them by overriding the `--dt-surface`, `--dt-background`, `--dt-line`, … variables.
 
+> **Accessibility fixes (1.4.x):** Radio groups keep a single selection when uncontrolled, Rate and DatePicker use one tab stop with arrow-key focus, Dialog/Sidebar/AppShell drawers share one focus trap and scroll lock, Toast announces via `role="status"`, Alert's dismiss button is labelled, and Input shows a visible focus ring in its default state. No props changed.
+
 ## Examples
 
 ### Complete Form Example

package/dist/ai-schema.json

@@ -728,7 +728,8 @@
       },
       "label": {
         "type": "string",
-        "required": false
+        "required": false,
+        "default": "\"Pick a color\""
       }
     }
   },
@@ -1195,7 +1196,8 @@
       },
       "onSubmit": {
         "type": "(data: any) => void",
-        "required": false
+        "required": false,
+        "default": "Promise<void>"
       },
       "defaultValues": {
         "type": "Record",
@@ -1800,7 +1802,7 @@
       "colorClass": {
         "type": "string",
         "required": false,
-        "default": "\"bg-pink-500\""
+        "default": "\"bg-primary-600\""
       },
       "ariaLabel": {
         "type": "string",
@@ -2164,8 +2166,7 @@
       },
       "ariaLabel": {
         "type": "string",
-        "required": false,
-        "default": "\"tag\""
+        "required": false
       },
       "avatarPosition": {
         "type": "enum",
@@ -3118,7 +3119,7 @@
   "TextToSpeech": {
     "group": "core",
     "import": "@dreamtree-org/twreact-ui",
-    "forwardRef": false,
+    "forwardRef": true,
     "props": {
       "text": {
         "type": "string",
@@ -3140,6 +3141,16 @@
         "required": false,
         "default": "() => {}"
       },
+      "onError": {
+        "type": "(error: Error) => void",
+        "required": false,
+        "default": "() => {}"
+      },
+      "disabled": {
+        "type": "boolean",
+        "required": false,
+        "default": "false"
+      },
       "renderButton": {
         "type": "(state: TextToSpeechState) => ReactNode",
         "required": false
@@ -3347,12 +3358,12 @@
       "textClass": {
         "type": "string",
         "required": false,
-        "default": "\"text-black\""
+        "default": "\"text-foreground\""
       },
       "bgClass": {
         "type": "string",
         "required": false,
-        "default": "\"bg-white\""
+        "default": "\"bg-surface\""
       },
       "portal": {
         "type": "boolean",

package/dist/components/blocks/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/AppShell.jsx"],"names":[],"mappings":";AAmDA,kFAgEG;kBAnH6D,OAAO"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/AppShell.jsx"],"names":[],"mappings":";AAqDA,kFA+EG;kBApIkD,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/core/Accordion.jsx"],"names":[],"mappings":";AAIA;;;;GAIG;AAEH,mFA+OG;kBAzP8E,OAAO"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/core/Accordion.jsx"],"names":[],"mappings":";AAKA;;;;GAIG;AAEH,mFA+QG;kBA1RqF,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/ColorPicker.jsx"],"names":[],"mappings":";AA0FA,qFAkKG;kBA5PkD,OAAO"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/ColorPicker.jsx"],"names":[],"mappings":";AA0FA,qFAiLG;kBA3QyD,OAAO"}

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":";AA8BA,oFA+dE;kBArfK,OAAO"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/DatePicker.jsx"],"names":[],"mappings":";AAgCA,oFAqhBE;kBA7iBK,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/core/Form.jsx"],"names":[],"mappings":";AAwCA,8EA2hBG;kBAnkB6D,OAAO"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/core/Form.jsx"],"names":[],"mappings":";AAuDA,8EAyiBG;kBAhmB6D,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/core/Input.jsx"],"names":[],"mappings":";AAIA,+EA+NG;kBAnOqE,OAAO"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/core/Input.jsx"],"names":[],"mappings":";AAIA,+EAmOG;kBAvOqE,OAAO"}

package/dist/components/core/PriceRangePicker.d.ts

@@ -1,33 +1,4 @@
 export default PriceRangePicker;
-/**
- * PriceRangeSlider - UI library component (Tailwind)
- *
- * Props
- * - min: number (default 0)
- * - max: number (default 1000)
- * - step: number (default 1)
- * - minGap: number (minimum distance between thumbs, default 5)
- * - value: { min: number, max: number } | null (controlled)
- * - defaultValue: { min: number, max: number } (uncontrolled initial)
- * - onChange: (value) => void
- * - onFinalChange: (value) => void // called on mouseup/touchend or Enter in inputs
- * - showInputs: boolean (default true)
- * - showTooltips: boolean (default true)
- * - disabled: boolean
- * - presets: Array<{ id: string|number, label: string, value: {min:number,max:number} }>
- * - formatValue: (n) => string (formatting callback, default: n => n)
- * - className: string (container custom classes)
- * - size: 'sm' | 'md' | 'lg' (affects thumb size & spacing)
- * - colorClass: Tailwind class for active track/thumb, default 'bg-pink-500'
- * - ariaLabel: string
- *
- * Usage notes
- * - Controlled mode: pass `value` and handle updates via onChange.
- * - Uncontrolled mode: omit `value` and use `defaultValue`.
- *
- * Accessibility
- * - Inputs are labelled and thumbs are keyboard-focusable
- */
 declare const PriceRangePicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";
 //# sourceMappingURL=PriceRangePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PriceRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/PriceRangePicker.jsx"],"names":[],"mappings":";AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,0FA8TG;kBA/V6D,OAAO"}
+{"version":3,"file":"PriceRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/PriceRangePicker.jsx"],"names":[],"mappings":";AAqCA,0FAoQG;kBAzSqE,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,+EAsIG;kBAjJgD,OAAO"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/core/Radio.jsx"],"names":[],"mappings":";AAmBA,+EAwKG;kBAnLI,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Rate.d.ts","sourceRoot":"","sources":["../../../src/components/core/Rate.jsx"],"names":[],"mappings":";AA0CA,8EAuJG;kBAhMyC,OAAO"}
+{"version":3,"file":"Rate.d.ts","sourceRoot":"","sources":["../../../src/components/core/Rate.jsx"],"names":[],"mappings":";AA2CA,8EAyJG;kBAnMiD,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"RoundedTag.d.ts","sourceRoot":"","sources":["../../../src/components/core/RoundedTag.jsx"],"names":[],"mappings":";AAGA,oFAoIG;kBAvI+B,OAAO"}
+{"version":3,"file":"RoundedTag.d.ts","sourceRoot":"","sources":["../../../src/components/core/RoundedTag.jsx"],"names":[],"mappings":";AAIA,oFAgKG;kBApK+B,OAAO"}

package/dist/components/core/Table/ColumnMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/ColumnMenu.jsx"],"names":[],"mappings":";AAKA;;GAEG;AACH;;;;;;4CAmCC"}
+{"version":3,"file":"ColumnMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/ColumnMenu.jsx"],"names":[],"mappings":";AAMA;;GAEG;AACH;;;;;;4CAmCC"}

package/dist/components/core/Table/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/Pagination.jsx"],"names":[],"mappings":"AAiBA;;;;;4CAkDC;AAGD;;;;;;4CA4HC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/Pagination.jsx"],"names":[],"mappings":"AAoBA;;;;;4CAkDC;AAGD;;;;;;4CAmIC"}

package/dist/components/core/Table/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/TableRow.jsx"],"names":[],"mappings":";AAYA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CA+RC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/TableRow.jsx"],"names":[],"mappings":";AAaA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CA+RC"}

package/dist/components/core/Table/helpers.d.ts

@@ -18,4 +18,6 @@ export function resolveActions(actions: any[] | Function, row: object, index: nu
     inlineActions: any[];
     menuActions: any[];
 };
+export const DEFAULT_HOVER_CLASS: string;
+export function getHoverClass(rowHover: any): any;
 //# sourceMappingURL=helpers.d.ts.map

package/dist/components/core/Table/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/helpers.js"],"names":[],"mappings":"AAGO,8DAMN;AAOM;;;;;;;;;;;EAKN;AAaM,8EACqE;AAMrE,qDAGG;AAcH,8EAmBN;AAuBM,wCALI,gBAAc,OACd,MAAM,SACN,MAAM,GACJ;IAAE,aAAa,QAAQ;IAAC,WAAW,QAAO;CAAE,CAyBxD"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/helpers.js"],"names":[],"mappings":"AAGO,8DAMN;AAOM;;;;;;;;;;;EAKN;AAaM,8EACqE;AAMrE,qDAGG;AAcH,8EAmBN;AAuBM,wCALI,gBAAc,OACd,MAAM,SACN,MAAM,GACJ;IAAE,aAAa,QAAQ;IAAC,WAAW,QAAO;CAAE,CAyBxD;AAgBD,yCAAqE;AAU9D,kDAUN"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/core/Tabs.jsx"],"names":[],"mappings":"AA0GA;;;4CAuBC;AAGD;;;;;;;;4CAkHC;AAGD;;;4CAcC;AAED;;;;;mDA8BC;;AAnPD,8EAiDG;kBA7FI,OAAO"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/core/Tabs.jsx"],"names":[],"mappings":"AA0GA;;;4CAuBC;AAGD;;;;;;;;4CAmHC;AAGD;;;4CAcC;AAED;;;;;mDAyBC;;AA/OD,8EAiDG;kBA7FI,OAAO"}

package/dist/components/core/TextToSpeech.d.ts

@@ -1,9 +1,4 @@
 export default TextToSpeech;
-declare function TextToSpeech({ text, rate, pitch, onSpeak, renderButton, }: {
-    text?: string | undefined;
-    rate?: number | undefined;
-    pitch?: number | undefined;
-    onSpeak?: (() => void) | undefined;
-    renderButton: any;
-}): import("react/jsx-runtime").JSX.Element;
+declare const TextToSpeech: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
 //# sourceMappingURL=TextToSpeech.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextToSpeech.d.ts","sourceRoot":"","sources":["../../../src/components/core/TextToSpeech.jsx"],"names":[],"mappings":";AAEA;;;;;;4CA4CC"}
+{"version":3,"file":"TextToSpeech.d.ts","sourceRoot":"","sources":["../../../src/components/core/TextToSpeech.jsx"],"names":[],"mappings":";AAgBA,sFA6IE;kBA7J0E,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/core/Tooltip.jsx"],"names":[],"mappings":";AAoCA;;;;;;;;;;;;;;;;GAgBG;AACH,iFAqVG;kBAjYI,OAAO"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/core/Tooltip.jsx"],"names":[],"mappings":";AAwDA;;;;;;;;;;;;;;;;GAgBG;AACH,iFAwZG;kBAxdI,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Alert.jsx"],"names":[],"mappings":";AAIA,+EAwFG;kBA5Fe,OAAO"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Alert.jsx"],"names":[],"mappings":";AASA,+EA0FG;kBAnGe,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":";AAoCA,gFA0JG;kBA9LsC,OAAO"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Dialog.jsx"],"names":[],"mappings":";AAUA,gFA6GG;kBAvH6C,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Toast.jsx"],"names":[],"mappings":";AAmDA,8EA4NG;AA6CH,2FAOC;AA6CD;;;;4CAkBC;;;;AAMD;;;;;;;;;;;;EAIC;kBA5Y+G,OAAO"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Toast.jsx"],"names":[],"mappings":";AA4DA,8EAgOG;AA+CH,2FAOC;AA6CD;;;;4CAkBC;;;;AAMD;;;;;;;;;;;;EAIC;kBA3Z+G,OAAO"}

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":";AAiGA;;;;;;;;;;;;;;;;;GAiBG;AACH,iFA2kBG;kBAtrBI,OAAO"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":";AAkFA;;;;;;;;;;;;;;;;;GAiBG;AACH,iFAohBG;kBAhnBI,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Avatar.jsx"],"names":[],"mappings":";AAIA,gFA6GG;kBAjHe,OAAO"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Avatar.jsx"],"names":[],"mappings":";AAIA,gFAoHG;kBAxHe,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Carousel.jsx"],"names":[],"mappings":"AAIA,iFAsFE;;kBA1FgB,OAAO"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Carousel.jsx"],"names":[],"mappings":"AAUA,iFAoGE;;kBA9GgB,OAAO"}

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

@@ -1,9 +1,11 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, createForOfIteratorHelper as _createForOfIteratorHelper } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import { X, Menu } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { useFocusTrap } from '../../hooks/useFocusTrap.js';
+import { useScrollLock } from '../../hooks/useScrollLock.js';
 
 var _excluded = ["brand", "nav", "sidebarFooter", "topbar", "pageTitle", "linkAs", "children", "className"];
 // Extracted from procurementpro/components/app-shell.tsx (12 of 13 products hand-roll a shell).
@@ -105,23 +107,22 @@ var AppShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     open = _useState2[0],
     setOpen = _useState2[1];
   var menuButton = useRef(null);
+  var drawer = useRef(null);
   var close = useCallback(function () {
     return setOpen(false);
   }, []);
-  useEffect(function () {
-    if (!open) return undefined;
-    var onKey = function onKey(e) {
-      if (e.key === 'Escape') {
-        var _menuButton$current;
-        setOpen(false);
-        (_menuButton$current = menuButton.current) === null || _menuButton$current === void 0 || _menuButton$current.focus();
-      }
-    };
-    document.addEventListener('keydown', onKey);
-    return function () {
-      return document.removeEventListener('keydown', onKey);
-    };
-  }, [open]);
+  // Mobile drawer is a modal dialog: focus moves in, Tab is trapped, Escape
+  // closes, focus returns to the menu button, and the page behind is locked.
+  useScrollLock(open);
+  useFocusTrap(drawer, {
+    active: open,
+    onEscape: function onEscape() {
+      var _menuButton$current;
+      close();
+      // Some browsers (Safari) don't focus a clicked button, so the opener may be <body>.
+      (_menuButton$current = menuButton.current) === null || _menuButton$current === void 0 || _menuButton$current.focus();
+    }
+  });
   var sidebar = jsxs(Fragment, {
     children: [jsxs("div", {
       className: "flex items-center justify-between px-5 pb-4 pt-5 text-white",
@@ -134,7 +135,8 @@ var AppShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         onClick: close,
         "aria-label": "Close navigation",
         children: jsx(X, {
-          className: "h-5 w-5"
+          className: "h-5 w-5",
+          "aria-hidden": "true"
         })
       })]
     }), jsx(NavList, {
@@ -165,8 +167,12 @@ var AppShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         onClick: close,
         "aria-hidden": "true"
       }), jsx("aside", {
-        className: "absolute inset-y-0 left-0 flex w-72 max-w-[85%] flex-col bg-shell",
-        "aria-label": "Sidebar",
+        ref: drawer,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Navigation",
+        tabIndex: -1,
+        className: "absolute inset-y-0 left-0 flex w-72 max-w-[85%] flex-col bg-shell focus:outline-none",
         children: sidebar
       })]
     }), jsxs("div", {

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

@@ -1,9 +1,10 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { forwardRef, useState, useRef, useEffect, useId, useLayoutEffect } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
 
 var _excluded = ["items", "allowMultiple", "defaultOpenIndexes", "onChange", "className", "headerClassName", "contentClassName", "chevronPosition", "chevronIcon", "bordered", "rounded", "size", "transitionDuration"];
 /**
@@ -65,15 +66,45 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
   useEffect(function () {
     if (typeof onChangeRef.current === "function") onChangeRef.current(openIndexes);
   }, [openIndexes, onChangeRef]);
-  // Size panels from their measured content before paint. Done imperatively
-  // (not via the style prop) so render never reads refs / the DOM.
+  // Unique per instance so two accordions on one page never share ids.
+  var uid = useId();
+  var reducedMotion = useReducedMotion();
+  var duration = reducedMotion ? 0 : transitionDuration;
+  // Which panels were open on the previous layout pass (null = first mount).
+  var prevOpenRef = useRef(null);
+  // Size panels imperatively (not via the style prop) so render never reads
+  // refs / the DOM. An open panel settles on `max-height: none` so content
+  // that grows after opening is never clipped; closed panels are `inert` so
+  // Tab cannot land inside collapsed content.
   useLayoutEffect(function () {
+    var prevOpen = prevOpenRef.current;
+    var timers = [];
     panelRefs.current.forEach(function (panelEl, idx) {
       if (!panelEl) return;
       var open = openIndexes.includes(idx);
-      panelEl.style.maxHeight = open ? panelEl.scrollHeight + "px" : "0px";
+      var wasOpen = prevOpen ? prevOpen.includes(idx) : open;
+      if (open) panelEl.removeAttribute("inert");else panelEl.setAttribute("inert", "");
+      if (open === wasOpen || duration === 0) {
+        panelEl.style.maxHeight = open ? "none" : "0px";
+        return;
+      }
+      if (open) {
+        panelEl.style.maxHeight = panelEl.scrollHeight + "px";
+        timers.push(setTimeout(function () {
+          if (panelEl.getAttribute("inert") === null) panelEl.style.maxHeight = "none";
+        }, duration));
+      } else {
+        // Collapse from a concrete height; `none` -> 0 cannot be transitioned.
+        panelEl.style.maxHeight = panelEl.scrollHeight + "px";
+        void panelEl.offsetHeight; // force reflow so the transition starts
+        panelEl.style.maxHeight = "0px";
+      }
     });
-  }, [openIndexes, items]);
+    prevOpenRef.current = openIndexes;
+    return function () {
+      return timers.forEach(clearTimeout);
+    };
+  }, [openIndexes, items, duration]);
   var isOpen = function isOpen(index) {
     return openIndexes.includes(index);
   };
@@ -166,8 +197,8 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
       var _item$id;
       var id = (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index;
       var open = isOpen(index);
-      var headerId = "accordion-header-".concat(id);
-      var panelId = "accordion-panel-".concat(id);
+      var headerId = "".concat(uid, "accordion-header-").concat(id);
+      var panelId = "".concat(uid, "accordion-panel-").concat(id);
       var leftIconEl = renderLeftIcon(item, index);
       return jsxs("div", {
         className: "bg-white",
@@ -187,7 +218,7 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
               return handleHeaderKeyDown(e, index);
             },
             type: "button",
-            className: "w-full flex items-center ".concat(sizeMap[size].header, " justify-between focus:outline-none focus:ring-2 focus:ring-indigo-500 ").concat(headerClassName, " ").concat(item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+            className: "w-full flex items-center ".concat(sizeMap[size].header, " justify-between focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 ").concat(headerClassName, " ").concat(item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
             children: jsxs("div", {
               className: "flex items-center gap-3 w-full",
               children: [chevronPosition === "left" ? jsx("span", {
@@ -242,7 +273,7 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
             return panelRefs.current[index] = el;
           },
           style: {
-            transition: "max-height ".concat(transitionDuration, "ms ease"),
+            transition: duration ? "max-height ".concat(duration, "ms ease") : "none",
             overflow: "hidden"
           },
           className: "".concat(contentClassName, " ").concat(sizeMap[size].content),

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

@@ -1,7 +1,7 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo, useState } from 'react';
+import { forwardRef, useId, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 
 var _excluded = ["value", "defaultValue", "onChange", "swatches", "showAlpha", "size", "disabled", "className", "label", "id"];
@@ -150,6 +150,12 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
     label = _props$label === void 0 ? "Pick a color" : _props$label,
     id = props.id,
     rest = _objectWithoutProperties(props, _excluded);
+  // The visible <label> must point at a real control: the text value input
+  // takes the caller's `id` (or a generated one).
+  var autoId = useId();
+  var inputId = id !== null && id !== void 0 ? id : "".concat(autoId, "color-input");
+  var labelId = "".concat(inputId, "-label");
+  var valueLabelId = "".concat(inputId, "-value-label");
   var parsedControlled = useMemo(function () {
     return parseColor(value !== null && value !== void 0 ? value : null);
   }, [value]);
@@ -212,8 +218,9 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
     className: cn("inline-block", className)
   }, rest), {}, {
     children: [jsx("label", {
+      id: labelId,
       className: "block mb-2 ".concat(sizeMap.font),
-      htmlFor: id,
+      htmlFor: inputId,
       children: label
     }), jsxs("div", {
       className: "flex ".concat(sizeMap.gap, " items-start flex-col"),
@@ -234,7 +241,7 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
             onClick: function onClick() {
               return pushChange(c);
             },
-            className: "rounded-md border border-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 ".concat(sizeMap.swatch, " overflow-hidden"),
+            className: "rounded-md border border-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary-500 ".concat(sizeMap.swatch, " overflow-hidden"),
             style: {
               background: "rgba(".concat(c.r, ",").concat(c.g, ",").concat(c.b, ",").concat(c.a, ")")
             },
@@ -274,9 +281,14 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
             },
             className: "w-10 h-10 p-0 border-none bg-transparent",
             "aria-label": "Native color input"
-          }), jsx("div", {
+          }), jsxs("div", {
             className: "flex-1",
-            children: jsx("input", {
+            children: [jsx("span", {
+              id: valueLabelId,
+              className: "sr-only",
+              children: "Color value"
+            }), jsx("input", {
+              id: inputId,
               type: "text",
               disabled: disabled,
               value: showAlpha ? rgbaToString(internal) : rgbaToHex(internal, showAlpha),
@@ -292,8 +304,8 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
                 }
               },
               className: "w-full rounded-md border border-gray-200 px-2 py-1 font-mono",
-              "aria-label": "Color value"
-            })
+              "aria-labelledby": "".concat(labelId, " ").concat(valueLabelId)
+            })]
           })]
         }), jsx("div", {
           className: "mt-3 space-y-2",