@toteat-eng/ds-react 2026.7.9 → 2026.7.10

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

@@ -4,11 +4,24 @@ import { type ReactNode } from "react";
  * `aria-controls` so assistive tech associates the hamburger with the drawer.
  */
 export declare const SIDEBAR_DRAWER_ID = "ds-sidebar-drawer";
+export type SidebarMode = "overlay" | "push";
 export interface SidebarProps {
     isOpen: boolean;
     onClose: () => void;
+    /**
+     * "overlay" (default, mobile): fixed drawer over content, dimming scrim, modal
+     * focus-trap + Escape + focus-return. "push" (desktop): in-flow drawer that
+     * pushes content, no scrim, non-modal (no focus-trap / Escape).
+     */
+    mode?: SidebarMode;
     isPinLocked?: boolean;
     isModal?: boolean;
+    /**
+     * In overlay (modal) mode, provide at least one focusable child. If none
+     * are focusable (e.g. a loading state or icon-only content), focus rests
+     * on the drawer container itself and Tab/Shift+Tab stay trapped there —
+     * the modal focus-trap never leaks into the background content.
+     */
     children: ReactNode;
 }
-export declare function Sidebar({ isOpen, onClose, isPinLocked, isModal, children, }: SidebarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Sidebar({ isOpen, onClose, mode, isPinLocked, isModal, children, }: SidebarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Sidebar/__stories__/Sidebar.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Open: Story;
 export declare const Closed: Story;
 export declare const PinLocked: Story;
 export declare const Modal: Story;
+export declare const Push: Story;