@dxos/react-ui 0.7.5-main.9d2a38b → 0.7.5-main.ff8607b

package/dist/types/src/components/Main/Main.d.ts

@@ -1,44 +1,57 @@
 import { DialogContent } from '@radix-ui/react-dialog';
 import { Primitive } from '@radix-ui/react-primitive';
-import React, { type ComponentPropsWithRef, type Dispatch, type PropsWithChildren, type SetStateAction } from 'react';
+import React, { type ComponentPropsWithRef, type Dispatch, type PropsWithChildren, type SetStateAction, type KeyboardEvent, type ComponentPropsWithoutRef } from 'react';
 import { type ThemedClassName } from '../../util';
+type SidebarState = 'expanded' | 'collapsed' | 'closed';
 type MainContextValue = {
     resizing: boolean;
-    navigationSidebarOpen: boolean;
-    setNavigationSidebarOpen: Dispatch<SetStateAction<boolean | undefined>>;
-    complementarySidebarOpen: boolean;
-    setComplementarySidebarOpen: Dispatch<SetStateAction<boolean | undefined>>;
+    navigationSidebarState: SidebarState;
+    setNavigationSidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
+    complementarySidebarState: SidebarState;
+    setComplementarySidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
+};
+/**
+ * Facilitates moving focus between landmarks.
+ * Ref https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role
+ */
+declare const useLandmarkMover: (propsOnKeyDown: ComponentPropsWithoutRef<"div">["onKeyDown"], landmark: string) => {
+    "data-tabster": string | undefined;
+    onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+    "data-main-landmark": string;
+    tabIndex: number;
 };
 declare const useMainContext: (consumerName: string) => MainContextValue;
 declare const useSidebars: (consumerName?: string) => {
-    navigationSidebarOpen: boolean;
-    setNavigationSidebarOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+    navigationSidebarState: SidebarState;
+    setNavigationSidebarState: React.Dispatch<React.SetStateAction<SidebarState | undefined>>;
     toggleNavigationSidebar: () => void;
     openNavigationSidebar: () => void;
+    collapseNavigationSidebar: () => void;
     closeNavigationSidebar: () => void;
-    complementarySidebarOpen: boolean;
-    setComplementarySidebarOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+    complementarySidebarState: SidebarState;
+    setComplementarySidebarState: React.Dispatch<React.SetStateAction<SidebarState | undefined>>;
     toggleComplementarySidebar: () => void;
     openComplementarySidebar: () => void;
+    collapseComplementarySidebar: () => void;
     closeComplementarySidebar: () => void;
 };
 type MainRootProps = PropsWithChildren<{
-    navigationSidebarOpen?: boolean;
-    defaultNavigationSidebarOpen?: boolean;
-    onNavigationSidebarOpenChange?: (nextOpen: boolean) => void;
-    complementarySidebarOpen?: boolean;
-    defaultComplementarySidebarOpen?: boolean;
-    onComplementarySidebarOpenChange?: (nextOpen: boolean) => void;
+    navigationSidebarState?: SidebarState;
+    defaultNavigationSidebarState?: SidebarState;
+    onNavigationSidebarStateChange?: (nextState: SidebarState) => void;
+    complementarySidebarState?: SidebarState;
+    defaultComplementarySidebarState?: SidebarState;
+    onComplementarySidebarStateChange?: (nextState: SidebarState) => void;
 }>;
 type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContent>> & {
     swipeToDismiss?: boolean;
-    open: boolean;
+    state?: SidebarState;
     resizing?: boolean;
-    setOpen: Dispatch<SetStateAction<boolean | undefined>>;
+    onStateChange?: (nextState: SidebarState) => void;
     side: 'inline-start' | 'inline-end';
 };
-type MainNavigationSidebarProps = Omit<MainSidebarProps, 'open' | 'setOpen' | 'side'>;
-type MainComplementarySidebarProps = Omit<MainSidebarProps, 'open' | 'setOpen' | 'side'>;
+type MainNavigationSidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
+type MainComplementarySidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
 type MainProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
     asChild?: boolean;
     bounce?: boolean;
@@ -47,7 +60,7 @@ type MainProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> &
 type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.div>, 'children'>>;
 export declare const Main: {
     Root: {
-        ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavigationSidebarOpen, onNavigationSidebarOpenChange, complementarySidebarOpen: propsComplementarySidebarOpen, defaultComplementarySidebarOpen, onComplementarySidebarOpenChange, children, ...props }: MainRootProps): React.JSX.Element;
+        ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }: MainRootProps): React.JSX.Element;
         displayName: string;
     };
     Content: React.ForwardRefExoticComponent<Omit<MainProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -55,6 +68,6 @@ export declare const Main: {
     NavigationSidebar: React.ForwardRefExoticComponent<Omit<MainNavigationSidebarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     ComplementarySidebar: React.ForwardRefExoticComponent<Omit<MainComplementarySidebarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
-export { useMainContext, useSidebars };
-export type { MainRootProps, MainProps, MainOverlayProps, MainNavigationSidebarProps };
+export { useMainContext, useSidebars, useLandmarkMover };
+export type { MainRootProps, MainProps, MainOverlayProps, MainNavigationSidebarProps, SidebarState };
 //# sourceMappingURL=Main.d.ts.map

package/dist/types/src/components/Main/Main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../../../src/components/Main/Main.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAsB,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,KAAK,EAAE,EACZ,KAAK,qBAAqB,EAC1B,KAAK,QAAQ,EAEb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EAOpB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAQlD,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,wBAAwB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC;IACxE,wBAAwB,EAAE,OAAO,CAAC;IAClC,2BAA2B,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC;CAC5E,CAAC;AA8BF,QAAA,MAAqB,cAAc,4CAYjC,CAAC;AAEH,QAAA,MAAM,WAAW;;;;;;;;;;;CAqBhB,CAAC;AAEF,KAAK,aAAa,GAAG,iBAAiB,CAAC;IACrC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,6BAA6B,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C,gCAAgC,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChE,CAAC,CAAC;AAmEH,KAAK,gBAAgB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,aAAa,CAAC,CAAC,GAAG;IACrF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC;IACvD,IAAI,EAAE,cAAc,GAAG,YAAY,CAAC;CACrC,CAAC;AA4CF,KAAK,0BAA0B,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;AAoBtF,KAAK,6BAA6B,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;AAqBzF,KAAK,SAAS,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AA4BF,KAAK,gBAAgB,GAAG,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;AA2BvG,eAAO,MAAM,IAAI;;6QA5Md,aAAa;;;;;;;CAkNf,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC;AAEvC,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,CAAC"}
+{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../../../src/components/Main/Main.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAsB,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,KAAK,EAAE,EACZ,KAAK,qBAAqB,EAC1B,KAAK,QAAQ,EAEb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EAKnB,KAAK,aAAa,EAClB,KAAK,wBAAwB,EAC9B,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAQlD,KAAK,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAC;AAExD,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,sBAAsB,EAAE,YAAY,CAAC;IACrC,yBAAyB,EAAE,QAAQ,CAAC,cAAc,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC;IAC9E,yBAAyB,EAAE,YAAY,CAAC;IACxC,4BAA4B,EAAE,QAAQ,CAAC,cAAc,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC;CAClF,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,gBAAgB,mBAAoB,wBAAwB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,YAAY,MAAM;;uBAE5F,aAAa,CAAC,cAAc,CAAC;;;CAkBxC,CAAC;AAEF,QAAA,MAAqB,cAAc,4CAYjC,CAAC;AAEH,QAAA,MAAM,WAAW;;;;;;;;;;;;;CAuBhB,CAAC;AAEF,KAAK,aAAa,GAAG,iBAAiB,CAAC;IACrC,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC,6BAA6B,CAAC,EAAE,YAAY,CAAC;IAC7C,8BAA8B,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,KAAK,IAAI,CAAC;IACnE,yBAAyB,CAAC,EAAE,YAAY,CAAC;IACzC,gCAAgC,CAAC,EAAE,YAAY,CAAC;IAChD,iCAAiC,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,KAAK,IAAI,CAAC;CACvE,CAAC,CAAC;AAqEH,KAAK,gBAAgB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,aAAa,CAAC,CAAC,GAAG;IACrF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD,IAAI,EAAE,cAAc,GAAG,YAAY,CAAC;CACrC,CAAC;AA4CF,KAAK,0BAA0B,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAoB9E,KAAK,6BAA6B,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAqBjF,KAAK,SAAS,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AA4BF,KAAK,gBAAgB,GAAG,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;AA2BvG,eAAO,MAAM,IAAI;;qRA9Md,aAAa;;;;;;;CAoNf,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC;AAEzD,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,YAAY,EAAE,CAAC"}

package/dist/types/src/components/Main/Main.stories.d.ts

@@ -4,7 +4,7 @@ type StoryMainArgs = {};
 declare const _default: {
     title: string;
     component: {
-        ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavigationSidebarOpen, onNavigationSidebarOpenChange, complementarySidebarOpen: propsComplementarySidebarOpen, defaultComplementarySidebarOpen, onComplementarySidebarOpenChange, children, ...props }: import("./Main").MainRootProps): React.JSX.Element;
+        ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }: import("./Main").MainRootProps): React.JSX.Element;
         displayName: string;
     };
     render: (_args: StoryMainArgs) => React.JSX.Element;

package/dist/types/src/components/Menus/DropdownMenu.d.ts

@@ -104,12 +104,8 @@ export declare const DropdownMenu: {
     SubTrigger: React.ForwardRefExoticComponent<DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
     SubContent: React.ForwardRefExoticComponent<DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
 };
-declare const useDropdownMenuMenuScope: (scope: {
-    [scopeName: string]: React.Context<any>[];
-} | undefined) => {
-    [__scopeProp: string]: {
-        [scopeName: string]: React.Context<any>[];
-    } | undefined;
+declare const useDropdownMenuMenuScope: (scope: Scope) => {
+    [__scopeProp: string]: Scope;
 };
 export { createDropdownMenuScope, useDropdownMenuContext, useDropdownMenuMenuScope };
 export type { DropdownMenuRootProps, DropdownMenuTriggerProps, DropdownMenuVirtualTriggerProps, DropdownMenuPortalProps, DropdownMenuContentProps, DropdownMenuViewportProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuItemIndicatorProps, DropdownMenuSeparatorProps, DropdownMenuArrowProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, };

package/dist/types/src/components/Menus/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menus/DropdownMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menus/DropdownMenu.tsx"],"names":[],"mappings":"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"}

package/dist/types/src/components/Tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGvG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG;IACrF,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,GAAG,cAAc,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,GAAG,+FAId,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGvG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG;IACrF,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,GAAG,cAAc,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,GAAG,+FAaf,CAAC"}

package/dist/types/src/components/Tag/Tag.stories.d.ts

@@ -1,10 +1,17 @@
+import React from 'react';
 import '@dxos-theme';
-declare const _default: any;
+declare const _default: {
+    readonly title: "ui/react-ui-core/Tag";
+    readonly component: React.ForwardRefExoticComponent<Omit<import("./Tag").TagProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    readonly decorators: readonly [import("@storybook/react/*").Decorator];
+    readonly parameters: {
+        readonly chromatic: {
+            readonly disableSnapshot: false;
+        };
+    };
+};
 export default _default;
 export declare const Default: {
-    args: {
-        children: string;
-        palette: string;
-    };
+    render: () => React.JSX.Element;
 };
 //# sourceMappingURL=Tag.stories.d.ts.map

package/dist/types/src/components/Tag/Tag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;wBAuChB,GAAG;AAlCR,wBAkCS;AAET,eAAO,MAAM,OAAO;;;;;CAAsD,CAAC"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,aAAa,CAAC;;;;;;;;;;;AAWrB,wBAKW;AAEX,eAAO,MAAM,OAAO;;CAUnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.7.5-main.9d2a38b",
+  "version": "0.7.5-main.ff8607b",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -24,49 +24,49 @@
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@fluentui/react-tabster": "^9.19.0",
-    "@radix-ui/primitive": "^1.0.0",
-    "@radix-ui/react-alert-dialog": "^1.0.3",
-    "@radix-ui/react-avatar": "^1.0.2",
-    "@radix-ui/react-checkbox": "^1.0.3",
-    "@radix-ui/react-collapsible": "^1.0.2",
-    "@radix-ui/react-compose-refs": "^1.0.0",
-    "@radix-ui/react-context": "^1.0.0",
-    "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.0.3",
-    "@radix-ui/react-dismissable-layer": "^1.1.1",
-    "@radix-ui/react-focus-guards": "^1.1.1",
-    "@radix-ui/react-focus-scope": "^1.1.0",
-    "@radix-ui/react-id": "^1.1.0",
-    "@radix-ui/react-menu": "^2.0.6",
-    "@radix-ui/react-popper": "^1.1.2",
-    "@radix-ui/react-portal": "^1.1.2",
-    "@radix-ui/react-presence": "^1.1.1",
-    "@radix-ui/react-primitive": "^1.0.2",
-    "@radix-ui/react-scroll-area": "^1.0.3",
-    "@radix-ui/react-select": "^1.2.1",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slot": "^1.0.1",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-toast": "^1.2.1",
-    "@radix-ui/react-toggle": "^1.0.2",
-    "@radix-ui/react-toggle-group": "^1.0.3",
-    "@radix-ui/react-toolbar": "^1.0.3",
-    "@radix-ui/react-tooltip": "^1.1.2",
-    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "@fluentui/react-tabster": "9.23.3",
+    "@radix-ui/primitive": "1.1.1",
+    "@radix-ui/react-alert-dialog": "1.1.6",
+    "@radix-ui/react-avatar": "1.1.3",
+    "@radix-ui/react-checkbox": "1.1.4",
+    "@radix-ui/react-collapsible": "1.1.3",
+    "@radix-ui/react-compose-refs": "1.1.1",
+    "@radix-ui/react-context": "1.1.1",
+    "@radix-ui/react-context-menu": "2.2.6",
+    "@radix-ui/react-dialog": "1.1.6",
+    "@radix-ui/react-dismissable-layer": "1.1.5",
+    "@radix-ui/react-focus-guards": "1.1.1",
+    "@radix-ui/react-focus-scope": "1.1.2",
+    "@radix-ui/react-id": "1.1.0",
+    "@radix-ui/react-menu": "2.1.6",
+    "@radix-ui/react-popper": "1.2.2",
+    "@radix-ui/react-portal": "1.1.4",
+    "@radix-ui/react-presence": "1.1.2",
+    "@radix-ui/react-primitive": "2.0.2",
+    "@radix-ui/react-scroll-area": "1.2.3",
+    "@radix-ui/react-select": "2.1.6",
+    "@radix-ui/react-separator": "1.1.2",
+    "@radix-ui/react-slot": "1.1.2",
+    "@radix-ui/react-switch": "1.1.3",
+    "@radix-ui/react-toast": "1.2.6",
+    "@radix-ui/react-toggle": "1.1.2",
+    "@radix-ui/react-toggle-group": "1.1.2",
+    "@radix-ui/react-toolbar": "1.1.2",
+    "@radix-ui/react-tooltip": "1.1.8",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
     "aria-hidden": "^1.2.4",
     "date-fns": "^3.3.1",
     "i18next": "^21.10.0",
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.7.5-main.9d2a38b",
-    "@dxos/log": "0.7.5-main.9d2a38b",
-    "@dxos/react-input": "0.7.5-main.9d2a38b",
-    "@dxos/react-hooks": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-types": "0.7.5-main.9d2a38b",
-    "@dxos/react-list": "0.7.5-main.9d2a38b",
-    "@dxos/util": "0.7.5-main.9d2a38b"
+    "@dxos/debug": "0.7.5-main.ff8607b",
+    "@dxos/log": "0.7.5-main.ff8607b",
+    "@dxos/react-input": "0.7.5-main.ff8607b",
+    "@dxos/react-hooks": "0.7.5-main.ff8607b",
+    "@dxos/react-list": "0.7.5-main.ff8607b",
+    "@dxos/util": "0.7.5-main.ff8607b",
+    "@dxos/react-ui-types": "0.7.5-main.ff8607b"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -78,15 +78,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b",
-    "@dxos/util": "0.7.5-main.9d2a38b"
+    "@dxos/random": "0.7.5-main.ff8607b",
+    "@dxos/react-ui-theme": "0.7.5-main.ff8607b",
+    "@dxos/util": "0.7.5-main.ff8607b"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b"
+    "@dxos/react-ui-theme": "0.7.5-main.ff8607b"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.tsx

@@ -5,8 +5,8 @@
 import {
   Root as AvatarRootPrimitive,
   type AvatarProps as AvatarRootPrimitiveProps,
-  type ImageLoadingStatus,
   Fallback as AvatarFallbackPrimitive,
+  type AvatarImageProps as AvatarImagePrimitiveProps,
 } from '@radix-ui/react-avatar';
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
@@ -243,9 +243,7 @@ const AvatarMaskedText = (props: AvatarMaskedTextProps) => {
   );
 };
 
-type AvatarImageProps = ComponentPropsWithRef<'image'> & {
-  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
-};
+type AvatarImageProps = ComponentPropsWithRef<'image'> & Pick<AvatarImagePrimitiveProps, 'onLoadingStatusChange'>;
 
 const AvatarImage = forwardRef<SVGImageElement, AvatarImageProps>(
   ({ onLoadingStatusChange, ...props }, forwardedRef) => {
@@ -264,8 +262,7 @@ const AvatarImage = forwardRef<SVGImageElement, AvatarImageProps>(
 
 type AvatarIconProps = {
   icon: string;
-  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
-};
+} & Pick<AvatarImagePrimitiveProps, 'onLoadingStatusChange'>;
 
 const AvatarIcon = forwardRef<SVGSVGElement, AvatarIconProps>(({ onLoadingStatusChange, ...props }, forwardedRef) => {
   const { size } = useAvatarContext('AvatarIcon');

package/src/components/Buttons/IconButton.tsx

@@ -8,7 +8,7 @@ import { Button, type ButtonProps } from './Button';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Icon, type IconProps } from '../Icon';
-import { Tooltip } from '../Tooltip';
+import { Tooltip, type TooltipContentProps } from '../Tooltip';
 
 type IconButtonProps = Omit<ButtonProps, 'children'> &
   Pick<IconProps, 'icon' | 'size'> & {
@@ -19,14 +19,15 @@ type IconButtonProps = Omit<ButtonProps, 'children'> &
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipPortal?: boolean;
     tooltipZIndex?: string;
+    tooltipSide?: TooltipContentProps['side'];
     suppressNextTooltip?: MutableRefObject<boolean>;
   };
 
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ tooltipPortal = true, tooltipZIndex: zIndex, suppressNextTooltip, ...props }, forwardedRef) => {
+  ({ tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
     const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
     const content = (
-      <Tooltip.Content {...(zIndex && { style: { zIndex } })}>
+      <Tooltip.Content {...(zIndex && { style: { zIndex } })} side={tooltipSide}>
         {props.label}
         <Tooltip.Arrow />
       </Tooltip.Content>

package/src/components/Input/Input.tsx

@@ -307,7 +307,7 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
     return (
       <input
         type='checkbox'
-        className='ch-checkbox--switch ch-focus-ring'
+        className='dx-checkbox--switch dx-focus-ring'
         checked={checked}
         onChange={(event) => {
           onCheckedChange(event.target.checked);

package/src/components/Lists/ListDropIndicator.tsx

@@ -15,8 +15,10 @@ const edgeToOrientationMap: Record<Edge, Orientation> = {
 };
 
 const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
-  horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',
-  vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',
+  horizontal:
+    'h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]',
+  vertical:
+    'w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]',
 };
 
 const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {
@@ -33,14 +35,19 @@ const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
 export type DropIndicatorProps = {
   edge: Edge;
   gap?: number;
+  terminalInset?: number;
+  lineInset?: number;
 };
 
 /**
  * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
  */
-export const ListDropIndicator = ({ edge, gap = 0 }: DropIndicatorProps) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
-
+export const ListDropIndicator = ({
+  edge,
+  gap = 0,
+  lineInset = 0,
+  terminalInset = lineInset - terminalSize,
+}: DropIndicatorProps) => {
   const orientation = edgeToOrientationMap[edge];
 
   return (
@@ -49,10 +56,11 @@ export const ListDropIndicator = ({ edge, gap = 0 }: DropIndicatorProps) => {
       style={
         {
           '--line-thickness': `${strokeSize}px`,
-          '--line-offset': `${lineOffset}`,
+          '--line-offset': `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
+          '--line-inset': `${lineInset}px`,
           '--terminal-size': `${terminalSize}px`,
           '--terminal-radius': `${terminalSize / 2}px`,
-          '--negative-terminal-size': `-${terminalSize}px`,
+          '--terminal-inset': `${terminalInset}px`,
           '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
         } as CSSProperties
       }

package/src/components/Main/Main.stories.tsx

@@ -24,7 +24,7 @@ const ComplementarySidebarToggle = () => {
 
 const StoryMain = (_args: StoryMainArgs) => {
   return (
-    <Main.Root defaultComplementarySidebarOpen>
+    <Main.Root>
       <Main.Overlay />
       <Main.NavigationSidebar classNames='p-4'>
         <p>Navigation sidebar content, hi!</p>