@dxos/react-ui 0.8.2-main.30e4dbb → 0.8.2-main.4c6cf53

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,qBAAqB,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAEC,qBAAqB;;;;;;;;AAuDtD,wBAME;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}
+{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,qBAAqB,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAEH,qBAAqB;;;;;;;;AAuDlD,wBAME;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

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

@@ -50,7 +50,6 @@ type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
 type TooltipTriggerProps = PrimitiveButtonProps & Pick<TooltipProps, 'delayDuration'> & {
     content?: string;
     side?: TooltipSide;
-    suppressNextTooltip?: MutableRefObject<boolean>;
     onInteract?: (event: SyntheticEvent) => void;
 };
 interface TooltipContentProps extends TooltipContentImplProps {
@@ -88,7 +87,6 @@ export declare const Tooltip: {
     }, "ref"> & Pick<TooltipProps, "delayDuration"> & {
         content?: string;
         side?: TooltipSide;
-        suppressNextTooltip?: MutableRefObject<boolean>;
         onInteract?: (event: SyntheticEvent) => void;
     } & React.RefAttributes<HTMLButtonElement>>;
 };

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

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

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

@@ -1,6 +1,6 @@
 import '@dxos-theme';
 import React from 'react';
-type StoryTooltipProps = {
+type StoryProps = {
     tooltips: {
         label: string;
         content: string;
@@ -18,11 +18,10 @@ declare const _default: {
         }, "ref"> & Pick<import("@radix-ui/react-tooltip").TooltipProps, "delayDuration"> & {
             content?: string;
             side?: import("./Tooltip").TooltipSide;
-            suppressNextTooltip?: React.MutableRefObject<boolean>;
             onInteract?: (event: React.SyntheticEvent) => void;
         } & React.RefAttributes<HTMLButtonElement>>;
     };
-    render: ({ tooltips, defaultOpen }: StoryTooltipProps) => React.JSX.Element;
+    render: ({ tooltips, defaultOpen }: StoryProps) => React.JSX.Element;
     decorators: import("@storybook/react").Decorator[];
     parameters: {
         chromatic: {

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;;;;;;;;;;;;;;;;wCAE+C,iBAAiB;;;;;;;;AAYlE,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CActB,CAAC"}
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;;;;;;;;;;;;;;;wCAE+C,UAAU;;;;;;;;AAY3D,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CActB,CAAC"}

package/dist/types/src/testing/decorators/index.d.ts

@@ -1,3 +1,3 @@
 export * from './withTheme';
-export * from './withVariants';
+export * from './withSurfaceVariantsLayout';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/decorators/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC"}

package/dist/types/src/testing/decorators/{withVariants.d.ts → withSurfaceVariantsLayout.d.ts}

@@ -1,4 +1,3 @@
-import '@dxos-theme';
 import { type Decorator } from '@storybook/react';
 import { type Density, type Elevation } from '@dxos/react-ui-types';
 type Config = {
@@ -8,6 +7,6 @@ type Config = {
     }[];
     densities?: Density[];
 };
-export declare const withVariants: ({ elevations, densities, }?: Config) => Decorator;
+export declare const withSurfaceVariantsLayout: ({ elevations, densities, }?: Config) => Decorator;
 export {};
-//# sourceMappingURL=withVariants.d.ts.map
+//# sourceMappingURL=withSurfaceVariantsLayout.d.ts.map

package/dist/types/src/testing/decorators/withSurfaceVariantsLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withSurfaceVariantsLayout.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/withSurfaceVariantsLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEpE,KAAK,MAAM,GAAG;IACZ,UAAU,CAAC,EAAE;QAAE,SAAS,EAAE,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1D,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;CACvB,CAAC;AAyBF,eAAO,MAAM,yBAAyB,GAAI,6BAOvC,MAAW,KAAG,SAOhB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.2-main.30e4dbb",
+  "version": "0.8.2-main.4c6cf53",
   "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",
@@ -13,11 +13,20 @@
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./testing": {
+      "types": "./dist/types/src/testing/index.d.ts",
+      "browser": "./dist/lib/browser/testing/index.mjs",
+      "node": "./dist/lib/node-esm/testing/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
-    "*": {}
+    "*": {
+      "testing": [
+        "./dist/types/src/testing/index.d.ts"
+      ]
+    }
   },
   "files": [
     "dist",
@@ -26,7 +35,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@fluentui/react-tabster": "^9.24.2",
-    "@lit/react": "^1.0.5",
+    "@preact-signals/safe-react": "^0.9.0",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-alert-dialog": "1.1.6",
     "@radix-ui/react-avatar": "1.1.3",
@@ -63,14 +72,14 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.2-main.30e4dbb",
-    "@dxos/lit-ui": "0.8.2-main.30e4dbb",
-    "@dxos/react-hooks": "0.8.2-main.30e4dbb",
-    "@dxos/react-input": "0.8.2-main.30e4dbb",
-    "@dxos/react-list": "0.8.2-main.30e4dbb",
-    "@dxos/react-ui-types": "0.8.2-main.30e4dbb",
-    "@dxos/log": "0.8.2-main.30e4dbb",
-    "@dxos/util": "0.8.2-main.30e4dbb"
+    "@dxos/debug": "0.8.2-main.4c6cf53",
+    "@dxos/lit-ui": "0.8.2-main.4c6cf53",
+    "@dxos/log": "0.8.2-main.4c6cf53",
+    "@dxos/react-hooks": "0.8.2-main.4c6cf53",
+    "@dxos/react-input": "0.8.2-main.4c6cf53",
+    "@dxos/react-list": "0.8.2-main.4c6cf53",
+    "@dxos/util": "0.8.2-main.4c6cf53",
+    "@dxos/react-ui-types": "0.8.2-main.4c6cf53"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -82,15 +91,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui-theme": "0.8.2-main.30e4dbb",
-    "@dxos/random": "0.8.2-main.30e4dbb",
-    "@dxos/util": "0.8.2-main.30e4dbb"
+    "@dxos/react-ui-theme": "0.8.2-main.4c6cf53",
+    "@dxos/random": "0.8.2-main.4c6cf53",
+    "@dxos/util": "0.8.2-main.4c6cf53"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.2-main.30e4dbb"
+    "@dxos/react-ui-theme": "0.8.2-main.4c6cf53"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.stories.tsx

@@ -12,7 +12,7 @@ import { hexToFallback } from '@dxos/util';
 import { Avatar, type AvatarVariant, type AvatarStatus, type AvatarAnimation } from './Avatar';
 import { withTheme } from '../../testing';
 
-type StorybookAvatarProps = {
+type StoryProps = {
   id?: string;
   imgSrc?: string;
   fallbackText?: string;
@@ -25,7 +25,7 @@ type StorybookAvatarProps = {
   hue?: HuePalette;
 };
 
-const StorybookAvatar = (props: PropsWithChildren<StorybookAvatarProps>) => {
+const DefaultStory = (props: PropsWithChildren<StoryProps>) => {
   const {
     id = '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
     status,
@@ -58,7 +58,7 @@ const StorybookAvatar = (props: PropsWithChildren<StorybookAvatarProps>) => {
 export default {
   title: 'ui/react-ui-core/Avatar',
   component: Avatar,
-  render: StorybookAvatar,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
@@ -68,9 +68,9 @@ const sampleImage =
 
 const row = (size: Size) => (
   <>
-    <StorybookAvatar size={size} status='inactive' description='Offline' />
-    <StorybookAvatar size={size} status='active' />
-    <StorybookAvatar size={size} status='active' imgSrc={sampleImage} />
+    <DefaultStory size={size} status='inactive' description='Offline' />
+    <DefaultStory size={size} status='active' />
+    <DefaultStory size={size} status='active' imgSrc={sampleImage} />
   </>
 );
 
@@ -93,48 +93,48 @@ export const Default = () => (
 
 export const Image = () => (
   <div>
-    <StorybookAvatar variant='circle' imgSrc={sampleImage} />
+    <DefaultStory variant='circle' imgSrc={sampleImage} />
   </div>
 );
 
 export const Square = () => (
   <div className='flex flex-row gap-4'>
-    <StorybookAvatar variant='square' status='inactive' description='Offline' />
-    <StorybookAvatar variant='square' status='active' />
-    <StorybookAvatar variant='square' status='error' />
-    <StorybookAvatar variant='square' status='warning' />
+    <DefaultStory variant='square' status='inactive' description='Offline' />
+    <DefaultStory variant='square' status='active' />
+    <DefaultStory variant='square' status='error' />
+    <DefaultStory variant='square' status='warning' />
   </div>
 );
 
 export const DefaultEmoji = () => (
   <div className='flex flex-row gap-4'>
-    <StorybookAvatar fallbackText='🦄' status='active' animation='pulse' />
-    <StorybookAvatar fallbackText='🐒' status='warning' animation='pulse' />
-    <StorybookAvatar fallbackText='🪲' status='inactive' />
-    <StorybookAvatar fallbackText='🦁' />
+    <DefaultStory fallbackText='🦄' status='active' animation='pulse' />
+    <DefaultStory fallbackText='🐒' status='warning' animation='pulse' />
+    <DefaultStory fallbackText='🪲' status='inactive' />
+    <DefaultStory fallbackText='🦁' />
   </div>
 );
 
-export const SquareEmoji = () => <StorybookAvatar variant='square' fallbackText='🦄' />;
+export const SquareEmoji = () => <DefaultStory variant='square' fallbackText='🦄' />;
 
 export const DefaultText = () => (
   <div className='flex flex-row gap-4'>
-    <StorybookAvatar fallbackText='PT' />
-    <StorybookAvatar fallbackText='AP' />
-    <StorybookAvatar fallbackText='Z' />
-    <StorybookAvatar fallbackText='pt' />
-    <StorybookAvatar fallbackText='ap' />
-    <StorybookAvatar fallbackText='z' />
+    <DefaultStory fallbackText='PT' />
+    <DefaultStory fallbackText='AP' />
+    <DefaultStory fallbackText='Z' />
+    <DefaultStory fallbackText='pt' />
+    <DefaultStory fallbackText='ap' />
+    <DefaultStory fallbackText='z' />
   </div>
 );
 
-export const Error = () => <StorybookAvatar status='error' description='Errored' />;
+export const Error = () => <DefaultStory status='error' description='Errored' />;
 
 export const Pulse = () => (
   <div className='flex flex-row gap-4'>
-    <StorybookAvatar description='Online' status='active' animation='pulse' />
-    <StorybookAvatar description='Offline' status='inactive' animation='pulse' />
-    <StorybookAvatar description='Error' status='error' animation='pulse' />
-    <StorybookAvatar description='Warning' status='warning' animation='pulse' />
+    <DefaultStory description='Online' status='active' animation='pulse' />
+    <DefaultStory description='Offline' status='inactive' animation='pulse' />
+    <DefaultStory description='Error' status='error' animation='pulse' />
+    <DefaultStory description='Warning' status='warning' animation='pulse' />
   </div>
 );

package/src/components/Avatars/Avatar.tsx

@@ -4,13 +4,18 @@
 
 import '@dxos/lit-ui/dx-avatar.pcss';
 
-import { createComponent } from '@lit/react';
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentProps, type ComponentPropsWithRef, forwardRef, type PropsWithChildren } from 'react';
 
-import { type AvatarVariant, type AvatarStatus, type AvatarAnimation, DxAvatar as NaturalDxAvatar } from '@dxos/lit-ui';
+import {
+  type AvatarVariant,
+  type AvatarStatus,
+  type AvatarAnimation,
+  type DxAvatar as NaturalDxAvatar,
+} from '@dxos/lit-ui';
+import { DxAvatar } from '@dxos/lit-ui/react';
 import { useId } from '@dxos/react-hooks';
 import { mx } from '@dxos/react-ui-theme';
 
@@ -33,12 +38,6 @@ const AvatarRoot = ({ children, labelId: propsLabelId, descriptionId: propsDescr
   return <AvatarProvider {...{ labelId, descriptionId }}>{children}</AvatarProvider>;
 };
 
-const DxAvatar = createComponent({
-  tagName: 'dx-avatar',
-  elementClass: NaturalDxAvatar,
-  react: React,
-});
-
 type AvatarContentProps = ThemedClassName<Omit<ComponentProps<typeof DxAvatar>, 'children'>>;
 
 const AvatarContent = forwardRef<NaturalDxAvatar, AvatarContentProps>(

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -13,7 +13,7 @@ import { withTheme } from '../../testing';
 
 const hues = ['lime', 'teal', 'purple', 'pink'];
 
-const StorybookAvatarGroupItem = ({ n }: { n: number }) => {
+const AvatarItem = ({ n }: { n: number }) => {
   const emoji = toEmoji(n);
   return (
     <Avatar.Root>
@@ -22,12 +22,12 @@ const StorybookAvatarGroupItem = ({ n }: { n: number }) => {
   );
 };
 
-const StorybookAvatarGroup = () => {
+const DefaultStory = () => {
   const labelId = useId('sb-avatar-group');
   return (
     <div className='dx-avatar-group' aria-labelledby={labelId}>
       {[0, 1, 2, 3].map((n) => (
-        <StorybookAvatarGroupItem key={n} n={n} />
+        <AvatarItem key={n} n={n} />
       ))}
       <span className='sr-only' id={labelId}>
         23
@@ -38,8 +38,7 @@ const StorybookAvatarGroup = () => {
 
 export default {
   title: 'ui/react-ui-core/AvatarGroup',
-  component: StorybookAvatarGroup,
-  render: StorybookAvatarGroup,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -10,7 +10,7 @@ import { Breadcrumb } from './Breadcrumb';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-const StorybookBreadcrumb = () => {
+const DefaultStory = () => {
   return (
     <Breadcrumb.Root aria-label='Breadcrumb'>
       <Breadcrumb.List>
@@ -41,7 +41,7 @@ const StorybookBreadcrumb = () => {
 export default {
   title: 'ui/react-ui-core/Breadcrumb',
   component: Breadcrumb,
-  render: StorybookBreadcrumb,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Buttons/Button.stories.tsx

@@ -9,7 +9,7 @@ import { type StoryObj, type Meta } from '@storybook/react';
 import React from 'react';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';
-import { withVariants, withTheme } from '../../testing';
+import { withSurfaceVariantsLayout, withTheme } from '../../testing';
 
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
@@ -36,7 +36,7 @@ const meta: Meta<typeof Button> = {
   title: 'ui/react-ui-core/Button',
   component: Button,
   render: DefaultStory,
-  decorators: [withVariants(), withTheme],
+  decorators: [withSurfaceVariantsLayout(), withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 

package/src/components/Buttons/IconButton.stories.tsx

@@ -6,22 +6,18 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { IconButton } from './IconButton';
+import { IconButton, type IconButtonProps } from './IconButton';
 import { withTheme } from '../../testing';
 import { Tooltip } from '../Tooltip';
 
-type StorybookIconButtonProps = {
-  iconOnly?: boolean;
-};
-
-const StorybookIconButton = (props: StorybookIconButtonProps) => {
+const DefaultStory = (props: IconButtonProps) => {
   return (
     <Tooltip.Provider>
       <div className='mbe-4'>
-        <IconButton label='Bold' icon='ph--text-b--regular' {...props} />
+        <IconButton {...props} />
       </div>
       <div className='mbe-4'>
-        <IconButton iconOnly label='Bold' icon='ph--text-b--regular' {...props} />
+        <IconButton iconOnly {...props} />
       </div>
     </Tooltip.Provider>
   );
@@ -30,11 +26,14 @@ const StorybookIconButton = (props: StorybookIconButtonProps) => {
 export default {
   title: 'ui/react-ui-core/IconButton',
   component: IconButton,
-  render: StorybookIconButton,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {
-  args: {},
+  args: {
+    label: 'Bold',
+    icon: 'ph--text-b--regular',
+  },
 };

package/src/components/Buttons/IconButton.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef, type MutableRefObject } from 'react';
+import React, { forwardRef } from 'react';
 
 import { Button, type ButtonProps } from './Button';
 import { useThemeContext } from '../../hooks';
@@ -19,16 +19,15 @@ type IconButtonProps = Omit<ButtonProps, 'children'> &
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipPortal?: boolean;
     tooltipSide?: TooltipSide;
-    suppressNextTooltip?: MutableRefObject<boolean>;
   };
 
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ noTooltip, tooltipPortal = true, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
+  ({ noTooltip, tooltipPortal = true, tooltipSide, ...props }, forwardedRef) => {
     if (noTooltip) {
       return <LabelledIconButton {...props} ref={forwardedRef} />;
     }
     return (
-      <Tooltip.Trigger asChild content={props.label} side={tooltipSide} suppressNextTooltip={suppressNextTooltip}>
+      <Tooltip.Trigger asChild content={props.label} side={tooltipSide}>
         <LabelledIconButton {...props} ref={forwardedRef} />
       </Tooltip.Trigger>
     );
@@ -36,10 +35,7 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 );
 
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (
-    { icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props },
-    forwardedRef,
-  ) => {
+  ({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
       <Button {...props} classNames={tx('iconButton.root', 'iconButton', {}, classNames)} ref={forwardedRef}>

package/src/components/Buttons/Toggle.stories.tsx

@@ -12,7 +12,7 @@ import { withTheme } from '../../testing';
 
 type StorybookToggleProps = {};
 
-const StorybookToggle = (props: StorybookToggleProps) => {
+const DefaultStory = (props: StorybookToggleProps) => {
   return (
     <Toggle {...props}>
       <TextB />
@@ -23,7 +23,7 @@ const StorybookToggle = (props: StorybookToggleProps) => {
 export default {
   title: 'ui/react-ui-core/Toggle',
   component: Toggle,
-  render: StorybookToggle,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Buttons/ToggleGroup.stories.tsx

@@ -10,12 +10,8 @@ import React from 'react';
 import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
 import { withTheme } from '../../testing';
 
-type StorybookToggleGroupProps = {
-  type: ToggleGroupProps['type'];
-};
-
-// TODO(burdon): ToggleGroup.Item.
-const StorybookToggleGroup = (props: StorybookToggleGroupProps) => {
+// TODO(burdon): Create Radix-style Root, Item, etc?
+const DefaultStory = (props: ToggleGroupProps) => {
   return (
     <ToggleGroup {...props}>
       <ToggleGroupItem value='textb'>
@@ -31,7 +27,7 @@ const StorybookToggleGroup = (props: StorybookToggleGroupProps) => {
 export default {
   title: 'ui/react-ui-core/ToggleGroup',
   component: ToggleGroup,
-  render: StorybookToggleGroup,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Dialogs/AlertDialog.stories.tsx

@@ -11,23 +11,16 @@ import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 import { Toolbar } from '../Toolbar';
 
-type StorybookAlertDialogProps = Partial<{
+type StoryProps = Partial<{
   title: string;
   description: string;
   body: string;
-  cancelTrigger: string; // TODO(burdon): Why trigger?
+  cancelTrigger: string;
   actionTrigger: string;
   openTrigger: string;
 }>;
 
-const StorybookAlertDialog = ({
-  title,
-  openTrigger,
-  description,
-  body,
-  cancelTrigger,
-  actionTrigger,
-}: StorybookAlertDialogProps) => {
+const DefaultStory = ({ title, openTrigger, description, body, cancelTrigger, actionTrigger }: StoryProps) => {
   return (
     <AlertDialog.Root defaultOpen>
       <AlertDialog.Trigger asChild>
@@ -56,7 +49,7 @@ const StorybookAlertDialog = ({
 export default {
   title: 'ui/react-ui-core/AlertDialog',
   component: AlertDialog,
-  render: StorybookAlertDialog,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Dialogs/Dialog.stories.tsx

@@ -10,7 +10,7 @@ import { Dialog } from './Dialog';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-type StorybookDialogProps = Partial<{
+type StoryProps = Partial<{
   title: string;
   description: string;
   body: string;
@@ -19,7 +19,7 @@ type StorybookDialogProps = Partial<{
   blockAlign: 'center' | 'start';
 }>;
 
-const StorybookDialog = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: StorybookDialogProps) => {
+const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: StoryProps) => {
   return (
     <Dialog.Root defaultOpen>
       <Dialog.Trigger asChild>
@@ -42,7 +42,7 @@ const StorybookDialog = ({ title, openTrigger, description, body, closeTrigger,
 export default {
   title: 'ui/react-ui-core/Dialog',
   component: Dialog,
-  render: StorybookDialog,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Dialogs/Dialog.tsx

@@ -78,7 +78,7 @@ type DialogCloseProps = DialogClosePrimitiveProps;
 
 const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
 
-type OverlayLayoutContextValue = { descriptionId?: string; inOverlayLayout?: boolean };
+type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
 const DIALOG_OVERLAY_NAME = 'DialogOverlay';
 const DIALOG_CONTENT_NAME = 'DialogContent';
 const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
@@ -86,10 +86,7 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   {},
 );
 
-type DialogOverlayProps = ThemedClassName<
-  DialogOverlayPrimitiveProps &
-    Pick<OverlayLayoutContextValue, 'descriptionId'> & { blockAlign?: 'center' | 'start' | 'end' }
->;
+type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps & { blockAlign?: 'center' | 'start' | 'end' }>;
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
@@ -115,12 +112,13 @@ type DialogContentProps = ThemedClassName<DialogContentPrimitiveProps> & { inOve
 const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
   ({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const { inOverlayLayout, descriptionId } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
+    const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
 
     return (
       <DialogContentPrimitive
-        // NOTE: Radix warning unless set.
-        aria-describedby={descriptionId ?? 'unknown'}
+        // NOTE: Radix warning unless set to undefined.
+        // https://www.radix-ui.com/primitives/docs/components/dialog#description
+        aria-describedby={undefined}
         {...props}
         className={tx(
           'dialog.content',