@particle-academy/react-fancy 6.0.0 → 6.1.0

package/dist/magic-wand.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkND5SBHGH_cjs = require('./chunk-ND5SBHGH.cjs');
+var chunkFKZB27OM_cjs = require('./chunk-FKZB27OM.cjs');
 require('./chunk-MAZEX4EZ.cjs');
 require('./chunk-MRZXTL46.cjs');
 require('./chunk-P53432AK.cjs');
@@ -11,9 +11,10 @@ require('./chunk-L3V3BYVS.cjs');
 require('./chunk-MKHYENKR.cjs');
 require('./chunk-TI7D4QDM.cjs');
 require('./chunk-VBWRH4UW.cjs');
-require('./chunk-MOU6O324.cjs');
+require('./chunk-OCHUZ7J3.cjs');
+require('./chunk-X6LGRB4H.cjs');
 require('./chunk-M5MUGSON.cjs');
-require('./chunk-BX6ZVWTO.cjs');
+require('./chunk-NZHVDWOM.cjs');
 require('./chunk-XCZZVRBY.cjs');
 require('./chunk-MXWR3T3N.cjs');
 require('./chunk-ZU5Q77OT.cjs');
@@ -22,7 +23,7 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "MagicWand", {
   enumerable: true,
-  get: function () { return chunkND5SBHGH_cjs.MagicWand; }
+  get: function () { return chunkFKZB27OM_cjs.MagicWand; }
 });
 //# sourceMappingURL=magic-wand.cjs.map
 //# sourceMappingURL=magic-wand.cjs.map

package/dist/magic-wand.js

@@ -1,4 +1,4 @@
-export { MagicWand } from './chunk-VZ7IDHUY.js';
+export { MagicWand } from './chunk-F4OYQ2XZ.js';
 import './chunk-UVUBV4VZ.js';
 import './chunk-KXYMMNNV.js';
 import './chunk-WX5XYDVN.js';
@@ -9,9 +9,10 @@ import './chunk-NRXK42LO.js';
 import './chunk-5VMILVWD.js';
 import './chunk-RBCMKPBX.js';
 import './chunk-IQ4KQJAO.js';
-import './chunk-6FCQD2KQ.js';
+import './chunk-OZ4QFJ7N.js';
+import './chunk-S53A6JIE.js';
 import './chunk-LQ4ICCN2.js';
-import './chunk-WLDDGIGC.js';
+import './chunk-4GPH7HOR.js';
 import './chunk-45BBNJQD.js';
 import './chunk-J3A4Z2P7.js';
 import './chunk-MMW2JGKZ.js';

package/dist/prompt-input.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkBGRVHPGP_cjs = require('./chunk-BGRVHPGP.cjs');
+var chunkOUNGGQIS_cjs = require('./chunk-OUNGGQIS.cjs');
 require('./chunk-OASSZI6M.cjs');
 require('./chunk-I27K6NLX.cjs');
 require('./chunk-JKD6CFIP.cjs');
@@ -15,7 +15,7 @@ require('./chunk-TI7D4QDM.cjs');
 require('./chunk-57FQGQJK.cjs');
 require('./chunk-OUYC6EIL.cjs');
 require('./chunk-M5MUGSON.cjs');
-require('./chunk-BX6ZVWTO.cjs');
+require('./chunk-NZHVDWOM.cjs');
 require('./chunk-XCZZVRBY.cjs');
 require('./chunk-MXWR3T3N.cjs');
 require('./chunk-SNHU2AI4.cjs');
@@ -25,15 +25,15 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "PromptInput", {
   enumerable: true,
-  get: function () { return chunkBGRVHPGP_cjs.PromptInput; }
+  get: function () { return chunkOUNGGQIS_cjs.PromptInput; }
 });
 Object.defineProperty(exports, "promptDataUrlToFile", {
   enumerable: true,
-  get: function () { return chunkBGRVHPGP_cjs.promptDataUrlToFile; }
+  get: function () { return chunkOUNGGQIS_cjs.promptDataUrlToFile; }
 });
 Object.defineProperty(exports, "promptFileToDataUrl", {
   enumerable: true,
-  get: function () { return chunkBGRVHPGP_cjs.promptFileToDataUrl; }
+  get: function () { return chunkOUNGGQIS_cjs.promptFileToDataUrl; }
 });
 //# sourceMappingURL=prompt-input.cjs.map
 //# sourceMappingURL=prompt-input.cjs.map

package/dist/prompt-input.js

@@ -1,4 +1,4 @@
-export { PromptInput, promptDataUrlToFile, promptFileToDataUrl } from './chunk-LWOA2ET6.js';
+export { PromptInput, promptDataUrlToFile, promptFileToDataUrl } from './chunk-B6WTCAGY.js';
 import './chunk-GR2WKBER.js';
 import './chunk-SV5BW3IA.js';
 import './chunk-J6IQHJET.js';
@@ -13,7 +13,7 @@ import './chunk-RBCMKPBX.js';
 import './chunk-RGANGU7X.js';
 import './chunk-YX6FTJ6N.js';
 import './chunk-LQ4ICCN2.js';
-import './chunk-WLDDGIGC.js';
+import './chunk-4GPH7HOR.js';
 import './chunk-45BBNJQD.js';
 import './chunk-J3A4Z2P7.js';
 import './chunk-EDYAXGUM.js';

package/dist/reason-tag.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkZXGX5RI5_cjs = require('./chunk-ZXGX5RI5.cjs');
+var chunkI2VAGZXY_cjs = require('./chunk-I2VAGZXY.cjs');
 require('./chunk-MKGWHSNV.cjs');
 require('./chunk-J2DI6RMR.cjs');
 require('./chunk-MKHYENKR.cjs');
@@ -8,7 +8,7 @@ require('./chunk-TI7D4QDM.cjs');
 require('./chunk-57FQGQJK.cjs');
 require('./chunk-OUYC6EIL.cjs');
 require('./chunk-M5MUGSON.cjs');
-require('./chunk-BX6ZVWTO.cjs');
+require('./chunk-NZHVDWOM.cjs');
 require('./chunk-XCZZVRBY.cjs');
 require('./chunk-MXWR3T3N.cjs');
 require('./chunk-ZU5Q77OT.cjs');
@@ -17,7 +17,7 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "ReasonTag", {
   enumerable: true,
-  get: function () { return chunkZXGX5RI5_cjs.ReasonTag; }
+  get: function () { return chunkI2VAGZXY_cjs.ReasonTag; }
 });
 //# sourceMappingURL=reason-tag.cjs.map
 //# sourceMappingURL=reason-tag.cjs.map

package/dist/reason-tag.js

@@ -1,4 +1,4 @@
-export { ReasonTag } from './chunk-KOECVLC4.js';
+export { ReasonTag } from './chunk-GSMD5NK5.js';
 import './chunk-QTS4Q2NK.js';
 import './chunk-MQ6VGG62.js';
 import './chunk-5VMILVWD.js';
@@ -6,7 +6,7 @@ import './chunk-RBCMKPBX.js';
 import './chunk-RGANGU7X.js';
 import './chunk-YX6FTJ6N.js';
 import './chunk-LQ4ICCN2.js';
-import './chunk-WLDDGIGC.js';
+import './chunk-4GPH7HOR.js';
 import './chunk-45BBNJQD.js';
 import './chunk-J3A4Z2P7.js';
 import './chunk-MMW2JGKZ.js';

package/dist/sidebar.cjs

@@ -1,12 +1,13 @@
 'use strict';
 
-var chunkEZA6GWZL_cjs = require('./chunk-EZA6GWZL.cjs');
+var chunkGK7IGL7N_cjs = require('./chunk-GK7IGL7N.cjs');
 require('./chunk-A2JUTNE6.cjs');
 require('./chunk-T6YELZPJ.cjs');
 require('./chunk-4GOOSZEK.cjs');
 require('./chunk-TXTRTTG7.cjs');
 require('./chunk-FQZE5N2N.cjs');
 require('./chunk-J2DI6RMR.cjs');
+require('./chunk-X6LGRB4H.cjs');
 require('./chunk-57FQGQJK.cjs');
 require('./chunk-OUYC6EIL.cjs');
 require('./chunk-SNHU2AI4.cjs');
@@ -16,11 +17,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Sidebar", {
   enumerable: true,
-  get: function () { return chunkEZA6GWZL_cjs.Sidebar; }
+  get: function () { return chunkGK7IGL7N_cjs.Sidebar; }
 });
 Object.defineProperty(exports, "useSidebar", {
   enumerable: true,
-  get: function () { return chunkEZA6GWZL_cjs.useSidebar; }
+  get: function () { return chunkGK7IGL7N_cjs.useSidebar; }
 });
 //# sourceMappingURL=sidebar.cjs.map
 //# sourceMappingURL=sidebar.cjs.map

package/dist/sidebar.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { N as NavigableProps } from './types-DJI492iY.cjs';
+import { N as NavigableProps, C as Color } from './types-DJI492iY.cjs';
 
 type SidebarCollapseMode = "icons" | "letters";
 interface SidebarProps {
@@ -29,14 +29,57 @@ interface SidebarProps {
      * @default "icons"
      */
     collapseMode?: SidebarCollapseMode;
+    /**
+     * Wrap the children in `<nav aria-label={navLabel}>`, so the items form a
+     * navigation landmark. The root stays an `<aside>`; the `<nav>` sits inside
+     * it and takes over the column layout. Omitted (or empty), no `<nav>` is
+     * rendered and the markup is exactly what it was before this prop existed.
+     */
+    navLabel?: string;
+    /**
+     * Arrow-key movement between items with a roving tabindex: the rail becomes
+     * ONE tab stop (the active item, else the first enabled one), and
+     * ArrowUp / ArrowDown / Home / End move focus within it. Disabled items and
+     * items inside a closed `Sidebar.Submenu` are skipped; a submenu's trigger
+     * is part of the sequence. Keys pressed in an input, textarea, select or
+     * contenteditable inside the sidebar are never intercepted, and
+     * `Sidebar.Toggle` keeps its own tab stop.
+     *
+     * Opt-in because it changes Tab order: without it every item is its own
+     * tab stop, as before.
+     * @default false
+     */
+    keyboardNav?: boolean;
     className?: string;
 }
+/** Colour of a {@link SidebarItemProps.dot}. `dot={true}` is red. */
+type SidebarDotColor = Color;
 interface SidebarItemProps extends NavigableProps {
     children: ReactNode;
     icon?: ReactNode;
     active?: boolean;
     disabled?: boolean;
     badge?: ReactNode;
+    /**
+     * Also render `badge` when the sidebar is collapsed, as an overlay at the
+     * corner of the icon (or of the letters). Off by default: a collapsed rail
+     * has never shown badges, and a wide badge ("Beta") over a 20px icon is not
+     * something to switch on for every existing consumer. Best for short counts.
+     * Handle: `data-react-fancy-sidebar-badge`.
+     */
+    collapsedBadge?: boolean;
+    /**
+     * A small attention dot at the icon's corner (unread, warning, "needs
+     * you"), shown expanded AND collapsed. `true` is red; pass any Badge colour
+     * for another. Purely visual: pair it with `dotLabel`. Handle:
+     * `data-react-fancy-sidebar-dot`, with `data-color`.
+     */
+    dot?: boolean | SidebarDotColor;
+    /**
+     * Screen-reader text for the dot ("3 unread"), rendered visually hidden and
+     * appended to the item's accessible name. Ignored without `dot`.
+     */
+    dotLabel?: string;
     onClick?: () => void;
     className?: string;
 }
@@ -59,9 +102,11 @@ interface SidebarContextValue {
     collapsed: boolean;
     collapseMode: SidebarCollapseMode;
     setCollapsed: (collapsed: boolean) => void;
+    /** Whether the root has `keyboardNav` on. */
+    keyboardNav?: boolean;
 }
 
-declare function SidebarItem({ children, href, as: As, icon, active, disabled, badge, onClick, className, ...rest }: SidebarItemProps): react.JSX.Element;
+declare function SidebarItem({ children, href, as: As, icon, active, disabled, badge, collapsedBadge, dot, dotLabel, onClick, className, ...rest }: SidebarItemProps): react.JSX.Element;
 declare namespace SidebarItem {
     var displayName: string;
 }
@@ -81,7 +126,7 @@ declare namespace SidebarToggle {
     var displayName: string;
 }
 
-declare function SidebarRoot({ children, collapsed: controlledCollapsed, defaultCollapsed, onCollapsedChange, collapseMode, embedded, className, }: SidebarProps): react.JSX.Element;
+declare function SidebarRoot({ children, collapsed: controlledCollapsed, defaultCollapsed, onCollapsedChange, collapseMode, embedded, navLabel, keyboardNav, className, }: SidebarProps): react.JSX.Element;
 declare const Sidebar: typeof SidebarRoot & {
     Item: typeof SidebarItem;
     Group: typeof SidebarGroup;
@@ -91,4 +136,4 @@ declare const Sidebar: typeof SidebarRoot & {
 
 declare function useSidebar(): SidebarContextValue;
 
-export { Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, useSidebar };
+export { Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarDotColor, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, useSidebar };

package/dist/sidebar.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { N as NavigableProps } from './types-DJI492iY.js';
+import { N as NavigableProps, C as Color } from './types-DJI492iY.js';
 
 type SidebarCollapseMode = "icons" | "letters";
 interface SidebarProps {
@@ -29,14 +29,57 @@ interface SidebarProps {
      * @default "icons"
      */
     collapseMode?: SidebarCollapseMode;
+    /**
+     * Wrap the children in `<nav aria-label={navLabel}>`, so the items form a
+     * navigation landmark. The root stays an `<aside>`; the `<nav>` sits inside
+     * it and takes over the column layout. Omitted (or empty), no `<nav>` is
+     * rendered and the markup is exactly what it was before this prop existed.
+     */
+    navLabel?: string;
+    /**
+     * Arrow-key movement between items with a roving tabindex: the rail becomes
+     * ONE tab stop (the active item, else the first enabled one), and
+     * ArrowUp / ArrowDown / Home / End move focus within it. Disabled items and
+     * items inside a closed `Sidebar.Submenu` are skipped; a submenu's trigger
+     * is part of the sequence. Keys pressed in an input, textarea, select or
+     * contenteditable inside the sidebar are never intercepted, and
+     * `Sidebar.Toggle` keeps its own tab stop.
+     *
+     * Opt-in because it changes Tab order: without it every item is its own
+     * tab stop, as before.
+     * @default false
+     */
+    keyboardNav?: boolean;
     className?: string;
 }
+/** Colour of a {@link SidebarItemProps.dot}. `dot={true}` is red. */
+type SidebarDotColor = Color;
 interface SidebarItemProps extends NavigableProps {
     children: ReactNode;
     icon?: ReactNode;
     active?: boolean;
     disabled?: boolean;
     badge?: ReactNode;
+    /**
+     * Also render `badge` when the sidebar is collapsed, as an overlay at the
+     * corner of the icon (or of the letters). Off by default: a collapsed rail
+     * has never shown badges, and a wide badge ("Beta") over a 20px icon is not
+     * something to switch on for every existing consumer. Best for short counts.
+     * Handle: `data-react-fancy-sidebar-badge`.
+     */
+    collapsedBadge?: boolean;
+    /**
+     * A small attention dot at the icon's corner (unread, warning, "needs
+     * you"), shown expanded AND collapsed. `true` is red; pass any Badge colour
+     * for another. Purely visual: pair it with `dotLabel`. Handle:
+     * `data-react-fancy-sidebar-dot`, with `data-color`.
+     */
+    dot?: boolean | SidebarDotColor;
+    /**
+     * Screen-reader text for the dot ("3 unread"), rendered visually hidden and
+     * appended to the item's accessible name. Ignored without `dot`.
+     */
+    dotLabel?: string;
     onClick?: () => void;
     className?: string;
 }
@@ -59,9 +102,11 @@ interface SidebarContextValue {
     collapsed: boolean;
     collapseMode: SidebarCollapseMode;
     setCollapsed: (collapsed: boolean) => void;
+    /** Whether the root has `keyboardNav` on. */
+    keyboardNav?: boolean;
 }
 
-declare function SidebarItem({ children, href, as: As, icon, active, disabled, badge, onClick, className, ...rest }: SidebarItemProps): react.JSX.Element;
+declare function SidebarItem({ children, href, as: As, icon, active, disabled, badge, collapsedBadge, dot, dotLabel, onClick, className, ...rest }: SidebarItemProps): react.JSX.Element;
 declare namespace SidebarItem {
     var displayName: string;
 }
@@ -81,7 +126,7 @@ declare namespace SidebarToggle {
     var displayName: string;
 }
 
-declare function SidebarRoot({ children, collapsed: controlledCollapsed, defaultCollapsed, onCollapsedChange, collapseMode, embedded, className, }: SidebarProps): react.JSX.Element;
+declare function SidebarRoot({ children, collapsed: controlledCollapsed, defaultCollapsed, onCollapsedChange, collapseMode, embedded, navLabel, keyboardNav, className, }: SidebarProps): react.JSX.Element;
 declare const Sidebar: typeof SidebarRoot & {
     Item: typeof SidebarItem;
     Group: typeof SidebarGroup;
@@ -91,4 +136,4 @@ declare const Sidebar: typeof SidebarRoot & {
 
 declare function useSidebar(): SidebarContextValue;
 
-export { Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, useSidebar };
+export { Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarDotColor, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, useSidebar };

package/dist/sidebar.js

@@ -1,10 +1,11 @@
-export { Sidebar, useSidebar } from './chunk-YJHP5FVA.js';
+export { Sidebar, useSidebar } from './chunk-MTDOFZIB.js';
 import './chunk-2BXMMVQS.js';
 import './chunk-CPY7NHXM.js';
 import './chunk-ZQ3VXRUY.js';
 import './chunk-5U2DZ7AV.js';
 import './chunk-3K2CEAI7.js';
 import './chunk-MQ6VGG62.js';
+import './chunk-S53A6JIE.js';
 import './chunk-RGANGU7X.js';
 import './chunk-YX6FTJ6N.js';
 import './chunk-EDYAXGUM.js';

package/dist/toast.cjs

@@ -1,10 +1,11 @@
 'use strict';
 
-var chunkH2YRZYKK_cjs = require('./chunk-H2YRZYKK.cjs');
+var chunkKFA7B6WP_cjs = require('./chunk-KFA7B6WP.cjs');
 require('./chunk-MKHYENKR.cjs');
 require('./chunk-TI7D4QDM.cjs');
 require('./chunk-VBWRH4UW.cjs');
-require('./chunk-MOU6O324.cjs');
+require('./chunk-OCHUZ7J3.cjs');
+require('./chunk-X6LGRB4H.cjs');
 require('./chunk-SNHU2AI4.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
@@ -12,11 +13,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Toast", {
   enumerable: true,
-  get: function () { return chunkH2YRZYKK_cjs.Toast; }
+  get: function () { return chunkKFA7B6WP_cjs.Toast; }
 });
 Object.defineProperty(exports, "useToast", {
   enumerable: true,
-  get: function () { return chunkH2YRZYKK_cjs.useToast; }
+  get: function () { return chunkKFA7B6WP_cjs.useToast; }
 });
 //# sourceMappingURL=toast.cjs.map
 //# sourceMappingURL=toast.cjs.map

package/dist/toast.js

@@ -1,8 +1,9 @@
-export { Toast, useToast } from './chunk-BQFPC5FL.js';
+export { Toast, useToast } from './chunk-ESCIXKFT.js';
 import './chunk-5VMILVWD.js';
 import './chunk-RBCMKPBX.js';
 import './chunk-IQ4KQJAO.js';
-import './chunk-6FCQD2KQ.js';
+import './chunk-OZ4QFJ7N.js';
+import './chunk-S53A6JIE.js';
 import './chunk-EDYAXGUM.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=toast.js.map

package/docs/Button.md

@@ -102,3 +102,11 @@ should submit says so:
 <Button variant="ghost" color="red" icon="trash-2">Delete</Button>
 <Button variant="ghost" icon="download">Export</Button>
 ```
+
+## Focus ring
+
+The ring shows on `:focus-visible` only, so it appears when someone reaches the
+Button by keyboard and not after a mouse click. It uses the focus token
+(`--fancy-focus`, blue-500 by default; `--fancy-focus-dark`, blue-400, in dark
+mode) and is offset against the surface token, so dark mode gets no white gap.
+Override it with `focus-visible:ring-*` classes in `className`.

package/docs/Sidebar.md

@@ -34,6 +34,9 @@ import { Sidebar, Icon } from "@particle-academy/react-fancy";
 | defaultCollapsed | `boolean` | `false` | Default collapsed state (uncontrolled) |
 | onCollapsedChange | `(collapsed: boolean) => void` | - | Callback when collapsed state changes |
 | collapseMode | `"icons" \| "letters"` | `"icons"` | How items display when collapsed: icons only, or first 3 letters |
+| embedded | `boolean` | `false` | Drop the app-shell chrome (right border, background, fixed `w-60`) for a sidebar inside a card, panel or drawer |
+| navLabel | `string` | - | Wrap the children in `<nav aria-label={navLabel}>` so the items form a navigation landmark. Omitted, no `<nav>` is rendered |
+| keyboardNav | `boolean` | `false` | ArrowUp / ArrowDown / Home / End between items, with a roving tabindex (the rail becomes one tab stop). See [Keyboard navigation](#keyboard-navigation) |
 | className | `string` | - | Additional CSS classes |
 
 ### Sidebar.Item
@@ -45,7 +48,10 @@ import { Sidebar, Icon } from "@particle-academy/react-fancy";
 | icon | `ReactNode` | - | Leading icon |
 | active | `boolean` | - | Active state highlight |
 | disabled | `boolean` | - | Disable the item |
-| badge | `ReactNode` | - | Trailing badge element |
+| badge | `ReactNode` | - | Trailing badge element (expanded only, unless `collapsedBadge`) |
+| collapsedBadge | `boolean` | `false` | Also show `badge` on a collapsed rail, as an overlay at the icon's corner. Best for short counts |
+| dot | `boolean \| Color` | - | Attention dot at the icon's corner, shown expanded and collapsed. `true` is red; any Badge colour otherwise |
+| dotLabel | `string` | - | Screen-reader text for the dot ("3 unread"), visually hidden and added to the item's accessible name |
 | onClick | `() => void` | - | Click handler |
 | className | `string` | - | Additional CSS classes |
 
@@ -94,6 +100,74 @@ const [collapsed, setCollapsed] = useState(false);
 - `"icons"` (default) — only the icon is shown when collapsed; falls back to the first 3 letters if no icon is provided
 - `"letters"` — the first 3 letters of the label are always shown
 
+## Attention marks on a compact rail
+
+A collapsed rail shows only icons, so `badge` is hidden there by default. Use
+`dot` for an unread, warning or "needs you" mark: it renders at the icon's
+corner in both modes. A dot is only colour, so give it a `dotLabel` for screen
+readers.
+
+```tsx
+<Sidebar collapsed navLabel="Main">
+  <Sidebar.Item icon={<Icon name="inbox" size="sm" />} dot dotLabel="3 unread">
+    Inbox
+  </Sidebar.Item>
+  <Sidebar.Item icon={<Icon name="triangle-alert" size="sm" />} dot="amber" dotLabel="needs you">
+    Deploys
+  </Sidebar.Item>
+  <Sidebar.Item
+    icon={<Icon name="message-square" size="sm" />}
+    badge={<Badge size="sm" color="blue" variant="solid">12</Badge>}
+    collapsedBadge
+  >
+    Messages
+  </Sidebar.Item>
+</Sidebar>
+```
+
+- The collapsed item is still named by its label (`title` and a visually
+  hidden copy of the label), so the dot label or a badge count never replaces
+  the name: a screen reader hears "Inbox 3 unread".
+- With both `dot` and `collapsedBadge` on a collapsed item, the badge takes the
+  top corner and the dot moves to the bottom one (`data-position="bottom"`).
+- Handles: `data-react-fancy-sidebar-dot` (with `data-color` and
+  `data-position`), `data-react-fancy-sidebar-dot-label`,
+  `data-react-fancy-sidebar-badge` for the collapsed badge overlay.
+
+## Navigation landmark
+
+`Sidebar` renders an `<aside>`. Pass `navLabel` to wrap its children in a
+labelled `<nav>`, so the items appear in a screen reader's landmark list:
+
+```tsx
+<Sidebar navLabel="Main">…</Sidebar>
+```
+
+The `<nav>` (`data-react-fancy-sidebar-nav`) takes over the column layout and
+fills the rail, so a footer pushed down with `mt-auto` still reaches the
+bottom. Without `navLabel` the markup is unchanged.
+
+## Keyboard navigation
+
+`keyboardNav` turns the rail into one tab stop with a roving tabindex:
+
+- **Tab** lands on the active item (the one with `active`), or the first
+  enabled item when none is active. `Sidebar.Toggle` keeps its own tab stop.
+- **ArrowDown / ArrowUp** move to the next / previous item; **Home / End** to
+  the first / last. No wrap at the ends.
+- Disabled items are skipped. An open `Sidebar.Submenu`'s trigger and its items
+  are in the sequence; a closed submenu's items are skipped (its trigger gets
+  `aria-expanded`). Enter / Space on a trigger opens it as usual.
+- Keys pressed in an input, textarea, select or contenteditable inside the
+  sidebar are never intercepted, nor are arrows with a modifier key.
+
+It is opt-in because it changes Tab order: without it, every item is its own
+tab stop, exactly as before.
+
+```tsx
+<Sidebar keyboardNav navLabel="Main">…</Sidebar>
+```
+
 ## useSidebar Hook
 
 Access collapsed state from any child component:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
   "repository": {
     "type": "git",

package/dist/chunk-6FCQD2KQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Badge/Badge.colors.ts","../src/components/Badge/Badge.tsx"],"names":[],"mappings":"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","file":"chunk-6FCQD2KQ.js","sourcesContent":["// AUTO-GENERATED by scripts/gen-badge-colors — do not edit by hand.\n// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Regenerate after changing the palette.\nimport type { Color } from \"../../utils/types\";\n\nexport const badgeSolid: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"bg-brand text-brand-contrast\",\n  slate: \"bg-slate-600 text-white dark:bg-slate-500\",\n  gray: \"bg-gray-600 text-white dark:bg-gray-500\",\n  zinc: \"bg-zinc-600 text-white dark:bg-zinc-500\",\n  neutral: \"bg-neutral-600 text-white dark:bg-neutral-500\",\n  stone: \"bg-stone-600 text-white dark:bg-stone-500\",\n  red: \"bg-red-600 text-white dark:bg-red-500\",\n  orange: \"bg-orange-600 text-white dark:bg-orange-500\",\n  amber: \"bg-amber-400 text-amber-950 dark:bg-amber-300 dark:text-amber-950\",\n  yellow: \"bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950\",\n  lime: \"bg-lime-400 text-lime-950 dark:bg-lime-300 dark:text-lime-950\",\n  green: \"bg-green-600 text-white dark:bg-green-500\",\n  emerald: \"bg-emerald-600 text-white dark:bg-emerald-500\",\n  teal: \"bg-teal-600 text-white dark:bg-teal-500\",\n  cyan: \"bg-cyan-600 text-white dark:bg-cyan-500\",\n  sky: \"bg-sky-600 text-white dark:bg-sky-500\",\n  blue: \"bg-blue-600 text-white dark:bg-blue-500\",\n  indigo: \"bg-indigo-600 text-white dark:bg-indigo-500\",\n  violet: \"bg-violet-600 text-white dark:bg-violet-500\",\n  purple: \"bg-purple-600 text-white dark:bg-purple-500\",\n  fuchsia: \"bg-fuchsia-600 text-white dark:bg-fuchsia-500\",\n  pink: \"bg-pink-600 text-white dark:bg-pink-500\",\n  rose: \"bg-rose-600 text-white dark:bg-rose-500\",\n};\n\nexport const badgeOutline: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"border border-brand/40 text-brand\",\n  slate: \"border border-slate-300 text-slate-700 dark:border-slate-600 dark:text-slate-300\",\n  gray: \"border border-gray-300 text-gray-700 dark:border-gray-600 dark:text-gray-300\",\n  zinc: \"border border-zinc-300 text-zinc-700 dark:border-zinc-600 dark:text-zinc-300\",\n  neutral: \"border border-neutral-300 text-neutral-700 dark:border-neutral-600 dark:text-neutral-300\",\n  stone: \"border border-stone-300 text-stone-700 dark:border-stone-600 dark:text-stone-300\",\n  red: \"border border-red-300 text-red-700 dark:border-red-600 dark:text-red-300\",\n  orange: \"border border-orange-300 text-orange-700 dark:border-orange-600 dark:text-orange-300\",\n  amber: \"border border-amber-300 text-amber-700 dark:border-amber-600 dark:text-amber-300\",\n  yellow: \"border border-yellow-300 text-yellow-700 dark:border-yellow-600 dark:text-yellow-300\",\n  lime: \"border border-lime-300 text-lime-700 dark:border-lime-600 dark:text-lime-300\",\n  green: \"border border-green-300 text-green-700 dark:border-green-600 dark:text-green-300\",\n  emerald: \"border border-emerald-300 text-emerald-700 dark:border-emerald-600 dark:text-emerald-300\",\n  teal: \"border border-teal-300 text-teal-700 dark:border-teal-600 dark:text-teal-300\",\n  cyan: \"border border-cyan-300 text-cyan-700 dark:border-cyan-600 dark:text-cyan-300\",\n  sky: \"border border-sky-300 text-sky-700 dark:border-sky-600 dark:text-sky-300\",\n  blue: \"border border-blue-300 text-blue-700 dark:border-blue-600 dark:text-blue-300\",\n  indigo: \"border border-indigo-300 text-indigo-700 dark:border-indigo-600 dark:text-indigo-300\",\n  violet: \"border border-violet-300 text-violet-700 dark:border-violet-600 dark:text-violet-300\",\n  purple: \"border border-purple-300 text-purple-700 dark:border-purple-600 dark:text-purple-300\",\n  fuchsia: \"border border-fuchsia-300 text-fuchsia-700 dark:border-fuchsia-600 dark:text-fuchsia-300\",\n  pink: \"border border-pink-300 text-pink-700 dark:border-pink-600 dark:text-pink-300\",\n  rose: \"border border-rose-300 text-rose-700 dark:border-rose-600 dark:text-rose-300\",\n};\n\nexport const badgeSoft: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"bg-brand/10 text-brand\",\n  slate: \"bg-slate-100 text-slate-700 dark:bg-slate-900/30 dark:text-slate-300\",\n  gray: \"bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300\",\n  zinc: \"bg-zinc-100 text-zinc-700 dark:bg-zinc-900/30 dark:text-zinc-300\",\n  neutral: \"bg-neutral-100 text-neutral-700 dark:bg-neutral-900/30 dark:text-neutral-300\",\n  stone: \"bg-stone-100 text-stone-700 dark:bg-stone-900/30 dark:text-stone-300\",\n  red: \"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300\",\n  orange: \"bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300\",\n  amber: \"bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300\",\n  yellow: \"bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300\",\n  lime: \"bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-300\",\n  green: \"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300\",\n  emerald: \"bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300\",\n  teal: \"bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-300\",\n  cyan: \"bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300\",\n  sky: \"bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300\",\n  blue: \"bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300\",\n  indigo: \"bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300\",\n  violet: \"bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300\",\n  purple: \"bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300\",\n  fuchsia: \"bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-900/30 dark:text-fuchsia-300\",\n  pink: \"bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300\",\n  rose: \"bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300\",\n};\n\nexport const badgeDot: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"bg-brand\",\n  slate: \"bg-slate-500\",\n  gray: \"bg-gray-500\",\n  zinc: \"bg-zinc-500\",\n  neutral: \"bg-neutral-500\",\n  stone: \"bg-stone-500\",\n  red: \"bg-red-500\",\n  orange: \"bg-orange-500\",\n  amber: \"bg-amber-500\",\n  yellow: \"bg-yellow-500\",\n  lime: \"bg-lime-500\",\n  green: \"bg-green-500\",\n  emerald: \"bg-emerald-500\",\n  teal: \"bg-teal-500\",\n  cyan: \"bg-cyan-500\",\n  sky: \"bg-sky-500\",\n  blue: \"bg-blue-500\",\n  indigo: \"bg-indigo-500\",\n  violet: \"bg-violet-500\",\n  purple: \"bg-purple-500\",\n  fuchsia: \"bg-fuchsia-500\",\n  pink: \"bg-pink-500\",\n  rose: \"bg-rose-500\",\n};\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { BadgeProps } from \"./Badge.types\";\nimport { badgeSolid, badgeOutline, badgeSoft, badgeDot } from \"./Badge.colors\";\n\ntype BadgeVariant = NonNullable<BadgeProps[\"variant\"]>;\ntype BadgeSize = NonNullable<BadgeProps[\"size\"]>;\n\n// Full Tailwind v4 palette — see Badge.colors.ts (generated literal class maps).\nconst variantMap: Record<BadgeVariant, typeof badgeSoft> = {\n  solid: badgeSolid,\n  outline: badgeOutline,\n  soft: badgeSoft,\n};\n\nconst sizeClasses: Record<BadgeSize, string> = {\n  sm: \"text-xs px-1.5 py-0.5\",\n  md: \"text-sm px-2 py-0.5\",\n  lg: \"text-base px-2.5 py-1\",\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      color = \"zinc\",\n      variant = \"soft\",\n      size = \"md\",\n      dot = false,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <span\n        ref={ref}\n        data-react-fancy-badge=\"\"\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded-full font-medium\",\n          sizeClasses[size],\n          variantMap[variant][color],\n          className,\n        )}\n        {...props}\n      >\n        {dot && (\n          <span\n            className={cn(\n              \"inline-block h-1.5 w-1.5 rounded-full\",\n              badgeDot[color],\n            )}\n          />\n        )}\n        {children}\n      </span>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n"]}