@dxos/react-ui 0.8.4-main.d05673bc65 → 0.8.4-main.d9fc60f731

package/src/components/Menu/DropdownMenu.tsx

@@ -17,9 +17,9 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
   type ComponentPropsWithRef,
   type ComponentPropsWithoutRef,
-  type ElementRef,
+  type ComponentRef,
   type FC,
-  type MutableRefObject,
+  PropsWithChildren,
   type ReactNode,
   type RefObject,
   forwardRef,
@@ -47,7 +47,7 @@ const useMenuScope: (scope?: Scope) => any = createMenuScope();
 
 type DropdownMenuContextValue = {
   triggerId: string;
-  triggerRef: MutableRefObject<HTMLButtonElement | null>;
+  triggerRef: RefObject<HTMLButtonElement | null>;
   contentId: string;
   open: boolean;
   onOpenChange(open: boolean): void;
@@ -58,17 +58,23 @@ type DropdownMenuContextValue = {
 const [DropdownMenuProvider, useDropdownMenuContext] =
   createDropdownMenuContext<DropdownMenuContextValue>(DROPDOWN_MENU_NAME);
 
-interface DropdownMenuRootProps {
-  children?: ReactNode;
+type DropdownMenuRootProps = PropsWithChildren<{
   dir?: Direction;
+  modal?: boolean;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?(open: boolean): void;
-  modal?: boolean;
-}
-
-const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<DropdownMenuRootProps>) => {
-  const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
+}>;
+
+const DropdownMenuRoot = ({
+  __scopeDropdownMenu,
+  children,
+  dir,
+  modal = true,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+}: ScopedProps<DropdownMenuRootProps>) => {
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const [open = false, setOpen] = useControllableState({
@@ -81,14 +87,14 @@ const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<Dropdown
     <DropdownMenuProvider
       scope={__scopeDropdownMenu}
       triggerId={useId()}
-      triggerRef={triggerRef as MutableRefObject<HTMLButtonElement | null>}
+      triggerRef={triggerRef}
       contentId={useId()}
       open={open}
       onOpenChange={setOpen}
       onOpenToggle={useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}
       modal={modal}
     >
-      <MenuPrimitive.Root {...menuScope} open={open} onOpenChange={setOpen} dir={dir} modal={modal}>
+      <MenuPrimitive.Root {...menuScope} dir={dir} modal={modal} open={open} onOpenChange={setOpen}>
         {children}
       </MenuPrimitive.Root>
     </DropdownMenuProvider>
@@ -101,11 +107,11 @@ DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 // DropdownMenuTrigger
 //
 
-const TRIGGER_NAME = 'DropdownMenuTrigger';
+const TRIGGER_NAME = 'DropdownMenu.Trigger';
 
-type DropdownMenuTriggerElement = ElementRef<typeof Primitive.button>;
+type DropdownMenuTriggerElement = ComponentRef<typeof Primitive.button>;
 type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
-interface DropdownMenuTriggerProps extends PrimitiveButtonProps {}
+type DropdownMenuTriggerProps = PrimitiveButtonProps;
 
 const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(
   (props: ScopedProps<DropdownMenuTriggerProps>, forwardedRef) => {
@@ -166,11 +172,11 @@ DropdownMenuTrigger.displayName = TRIGGER_NAME;
 // DropdownMenuVirtualTrigger
 //
 
-const VIRTUAL_TRIGGER_NAME = 'DropdownMenuVirtualTrigger';
+const VIRTUAL_TRIGGER_NAME = 'DropdownMenu.VirtualTrigger';
 
-interface DropdownMenuVirtualTriggerProps {
+type DropdownMenuVirtualTriggerProps = {
   virtualRef: RefObject<DropdownMenuTriggerElement | null>;
-}
+};
 
 const DropdownMenuVirtualTrigger = (props: ScopedProps<DropdownMenuVirtualTriggerProps>) => {
   const { __scopeDropdownMenu, virtualRef } = props;
@@ -190,10 +196,10 @@ DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 // DropdownMenuPortal
 //
 
-const PORTAL_NAME = 'DropdownMenuPortal';
+const PORTAL_NAME = 'DropdownMenu.Portal';
 
 type MenuPortalProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;
-interface DropdownMenuPortalProps extends MenuPortalProps {}
+type DropdownMenuPortalProps = MenuPortalProps;
 
 const DropdownMenuPortal: FC<DropdownMenuPortalProps> = (props: ScopedProps<DropdownMenuPortalProps>) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
@@ -227,11 +233,11 @@ const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProp
 // DropdownMenuContent
 //
 
-const CONTENT_NAME = 'DropdownMenuContent';
+const CONTENT_NAME = 'DropdownMenu.Content';
 
-type DropdownMenuContentElement = ElementRef<typeof MenuPrimitive.Content>;
+type DropdownMenuContentElement = ComponentRef<typeof MenuPrimitive.Content>;
 type MenuContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Content>>;
-interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'> {}
+type DropdownMenuContentProps = Omit<MenuContentProps, 'onEntryFocus'>;
 
 const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
   (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {
@@ -306,11 +312,11 @@ DropdownMenuContent.displayName = CONTENT_NAME;
 // DropdownMenuGroup
 //
 
-const GROUP_NAME = 'DropdownMenuGroup';
+const GROUP_NAME = 'DropdownMenu.Group';
 
-type DropdownMenuGroupElement = ElementRef<typeof MenuPrimitive.Group>;
+type DropdownMenuGroupElement = ComponentRef<typeof MenuPrimitive.Group>;
 type MenuGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;
-interface DropdownMenuGroupProps extends MenuGroupProps {}
+type DropdownMenuGroupProps = MenuGroupProps;
 
 const DropdownMenuGroup = forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(
   (props: ScopedProps<DropdownMenuGroupProps>, forwardedRef) => {
@@ -326,11 +332,11 @@ DropdownMenuGroup.displayName = GROUP_NAME;
 // DropdownMenuLabel
 //
 
-const LABEL_NAME = 'DropdownMenuLabel';
+const LABEL_NAME = 'DropdownMenu.Label';
 
-type DropdownMenuLabelElement = ElementRef<typeof MenuPrimitive.Label>;
+type DropdownMenuLabelElement = ComponentRef<typeof MenuPrimitive.Label>;
 type MenuLabelProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Label>>;
-interface DropdownMenuLabelProps extends MenuLabelProps {}
+type DropdownMenuLabelProps = MenuLabelProps;
 
 const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(
   (props: ScopedProps<DropdownMenuLabelProps>, forwardedRef) => {
@@ -354,11 +360,11 @@ DropdownMenuGroupLabel.displayName = LABEL_NAME;
 // DropdownMenuItem
 //
 
-const ITEM_NAME = 'DropdownMenuItem';
+const ITEM_NAME = 'DropdownMenu.Item';
 
-type DropdownMenuItemElement = ElementRef<typeof MenuPrimitive.Item>;
+type DropdownMenuItemElement = ComponentRef<typeof MenuPrimitive.Item>;
 type MenuItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Item>>;
-interface DropdownMenuItemProps extends MenuItemProps {}
+type DropdownMenuItemProps = MenuItemProps;
 
 const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(
   (props: ScopedProps<DropdownMenuItemProps>, forwardedRef) => {
@@ -382,11 +388,11 @@ DropdownMenuItem.displayName = ITEM_NAME;
 // DropdownMenuCheckboxItem
 //
 
-const CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem';
+const CHECKBOX_ITEM_NAME = 'DropdownMenu.CheckboxItem';
 
-type DropdownMenuCheckboxItemElement = ElementRef<typeof MenuPrimitive.CheckboxItem>;
+type DropdownMenuCheckboxItemElement = ComponentRef<typeof MenuPrimitive.CheckboxItem>;
 type MenuCheckboxItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>>;
-interface DropdownMenuCheckboxItemProps extends MenuCheckboxItemProps {}
+type DropdownMenuCheckboxItemProps = MenuCheckboxItemProps;
 
 const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, DropdownMenuCheckboxItemProps>(
   (props: ScopedProps<DropdownMenuCheckboxItemProps>, forwardedRef) => {
@@ -410,11 +416,11 @@ DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 // DropdownMenuRadioGroup
 //
 
-const RADIO_GROUP_NAME = 'DropdownMenuRadioGroup';
+const RADIO_GROUP_NAME = 'DropdownMenu.RadioGroup';
 
-type DropdownMenuRadioGroupElement = ElementRef<typeof MenuPrimitive.RadioGroup>;
+type DropdownMenuRadioGroupElement = ComponentRef<typeof MenuPrimitive.RadioGroup>;
 type MenuRadioGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;
-interface DropdownMenuRadioGroupProps extends MenuRadioGroupProps {}
+type DropdownMenuRadioGroupProps = MenuRadioGroupProps;
 
 const DropdownMenuRadioGroup = forwardRef<DropdownMenuRadioGroupElement, DropdownMenuRadioGroupProps>(
   (props: ScopedProps<DropdownMenuRadioGroupProps>, forwardedRef) => {
@@ -430,9 +436,9 @@ DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 // DropdownMenuRadioItem
 //
 
-const RADIO_ITEM_NAME = 'DropdownMenuRadioItem';
+const RADIO_ITEM_NAME = 'DropdownMenu.RadioItem';
 
-type DropdownMenuRadioItemElement = ElementRef<typeof MenuPrimitive.RadioItem>;
+type DropdownMenuRadioItemElement = ComponentRef<typeof MenuPrimitive.RadioItem>;
 type MenuRadioItemProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;
 type DropdownMenuRadioItemProps = ThemedClassName<MenuRadioItemProps>;
 
@@ -458,11 +464,11 @@ DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 // DropdownMenuItemIndicator
 //
 
-const INDICATOR_NAME = 'DropdownMenuItemIndicator';
+const INDICATOR_NAME = 'DropdownMenu.ItemIndicator';
 
-type DropdownMenuItemIndicatorElement = ElementRef<typeof MenuPrimitive.ItemIndicator>;
+type DropdownMenuItemIndicatorElement = ComponentRef<typeof MenuPrimitive.ItemIndicator>;
 type MenuItemIndicatorProps = ComponentPropsWithoutRef<typeof MenuPrimitive.ItemIndicator>;
-interface DropdownMenuItemIndicatorProps extends MenuItemIndicatorProps {}
+type DropdownMenuItemIndicatorProps = MenuItemIndicatorProps;
 
 const DropdownMenuItemIndicator = forwardRef<DropdownMenuItemIndicatorElement, DropdownMenuItemIndicatorProps>(
   (props: ScopedProps<DropdownMenuItemIndicatorProps>, forwardedRef) => {
@@ -478,11 +484,11 @@ DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 // DropdownMenuSeparator
 //
 
-const SEPARATOR_NAME = 'DropdownMenuSeparator';
+const SEPARATOR_NAME = 'DropdownMenu.Separator';
 
-type DropdownMenuSeparatorElement = ElementRef<typeof MenuPrimitive.Separator>;
+type DropdownMenuSeparatorElement = ComponentRef<typeof MenuPrimitive.Separator>;
 type MenuSeparatorProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>>;
-interface DropdownMenuSeparatorProps extends MenuSeparatorProps {}
+type DropdownMenuSeparatorProps = MenuSeparatorProps;
 
 const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(
   (props: ScopedProps<DropdownMenuSeparatorProps>, forwardedRef) => {
@@ -506,11 +512,11 @@ DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 // DropdownMenuArrow
 //
 
-const ARROW_NAME = 'DropdownMenuArrow';
+const ARROW_NAME = 'DropdownMenu.Arrow';
 
-type DropdownMenuArrowElement = ElementRef<typeof MenuPrimitive.Arrow>;
+type DropdownMenuArrowElement = ComponentRef<typeof MenuPrimitive.Arrow>;
 type MenuArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>>;
-interface DropdownMenuArrowProps extends MenuArrowProps {}
+type DropdownMenuArrowProps = MenuArrowProps;
 
 const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrowProps>(
   (props: ScopedProps<DropdownMenuArrowProps>, forwardedRef) => {
@@ -534,12 +540,12 @@ DropdownMenuArrow.displayName = ARROW_NAME;
 // DropdownMenuSub
 //
 
-interface DropdownMenuSubProps {
+type DropdownMenuSubProps = {
   children?: ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?(open: boolean): void;
-}
+};
 
 const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMenuSubProps>) => {
   const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
@@ -561,11 +567,11 @@ const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMe
 // DropdownMenuSubTrigger
 //
 
-const SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger';
+const SUB_TRIGGER_NAME = 'DropdownMenu.SubTrigger';
 
-type DropdownMenuSubTriggerElement = ElementRef<typeof MenuPrimitive.SubTrigger>;
+type DropdownMenuSubTriggerElement = ComponentRef<typeof MenuPrimitive.SubTrigger>;
 type MenuSubTriggerProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger>;
-interface DropdownMenuSubTriggerProps extends MenuSubTriggerProps {}
+type DropdownMenuSubTriggerProps = MenuSubTriggerProps;
 
 const DropdownMenuSubTrigger = forwardRef<DropdownMenuSubTriggerElement, DropdownMenuSubTriggerProps>(
   (props: ScopedProps<DropdownMenuSubTriggerProps>, forwardedRef) => {
@@ -581,11 +587,11 @@ DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 // DropdownMenuSubContent
 //
 
-const SUB_CONTENT_NAME = 'DropdownMenuSubContent';
+const SUB_CONTENT_NAME = 'DropdownMenu.SubContent';
 
-type DropdownMenuSubContentElement = ElementRef<typeof MenuPrimitive.Content>;
+type DropdownMenuSubContentElement = ComponentRef<typeof MenuPrimitive.Content>;
 type MenuSubContentProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;
-interface DropdownMenuSubContentProps extends MenuSubContentProps {}
+type DropdownMenuSubContentProps = MenuSubContentProps;
 
 const DropdownMenuSubContent = forwardRef<DropdownMenuSubContentElement, DropdownMenuSubContentProps>(
   (props: ScopedProps<DropdownMenuSubContentProps>, forwardedRef) => {

package/src/components/Menu/Menu.theme.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { dataDisabled } from '@dxos/ui-theme';
+import { mx, surfaceShadow, surfaceZIndex } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+export type MenuStyleProps = Partial<{
+  constrainBlockSize: boolean;
+  elevation: Elevation;
+}>;
+
+const content: ComponentFunction<MenuStyleProps> = ({ elevation }, ...etc) =>
+  mx(
+    'dx-popover-surface w-48 rounded-sm md:w-56 border border-separator',
+    surfaceZIndex({ elevation, level: 'menu' }),
+    surfaceShadow({ elevation: 'positioned' }),
+    ...etc,
+  );
+
+const viewport: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx('rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto', ...etc);
+
+const item: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx(
+    'flex cursor-pointer select-none items-center gap-2 rounded-xs px-2 py-2 text-sm',
+    'hover:bg-hover-surface data-[highlighted]:bg-hover-surface',
+    'dx-focus-subdued',
+    dataDisabled,
+    ...etc,
+  );
+
+const separator: ComponentFunction<MenuStyleProps> = (_props, ...etc) => mx('my-1 mx-2 h-px bg-separator', ...etc);
+
+const groupLabel: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx('text-description', 'select-none px-2 py-2', ...etc);
+
+const arrow: ComponentFunction<MenuStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
+
+export const menuTheme: Theme<MenuStyleProps> = {
+  content,
+  viewport,
+  item,
+  separator,
+  groupLabel,
+  arrow,
+};

package/src/components/Message/Message.stories.tsx

@@ -5,26 +5,34 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
-
+import { Button } from '../Button';
 import { Message } from './Message';
 
-faker.seed(123);
+random.seed(123);
 
-type StoryProps = {
+type DefaultStoryProps = {
   valence: MessageValence;
   title: string;
   body: string;
+  button?: boolean;
 };
 
-const DefaultStory = ({ valence, title, body }: StoryProps) => (
+const DefaultStory = ({ valence, title, body, button }: DefaultStoryProps) => (
   <div className='w-[30rem]'>
     <Message.Root valence={valence}>
-      {title && <Message.Title>{title}</Message.Title>}
-      {body && <Message.Content>{body}</Message.Content>}
+      {title && <Message.Title onClose={() => console.log('close')}>{title}</Message.Title>}
+      {body && (
+        <Message.Content asChild classNames='gap-2'>
+          <div>
+            <p>{body}</p>
+            {button && <Button>Test</Button>}
+          </div>
+        </Message.Content>
+      )}
     </Message.Root>
   </div>
 );
@@ -52,15 +60,44 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     valence: 'neutral',
-    title: 'Alert title',
-    body: faker.lorem.paragraphs(1),
+    title: 'Default',
+    body: random.lorem.paragraphs(1),
+    button: true,
+  },
+};
+
+export const Success: Story = {
+  args: {
+    valence: 'success',
+    title: 'Success',
+    body: random.lorem.paragraphs(1),
+    button: true,
+  },
+};
+
+export const Info: Story = {
+  args: {
+    valence: 'info',
+    title: 'Info',
+    body: random.lorem.paragraphs(1),
+    button: true,
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    valence: 'warning',
+    title: 'Warning',
+    body: random.lorem.paragraphs(1),
+    button: true,
   },
 };
 
 export const Error: Story = {
   args: {
     valence: 'error',
-    title: 'Error title',
-    body: faker.lorem.paragraphs(1),
+    title: 'Error',
+    body: random.lorem.paragraphs(1),
+    button: true,
   },
 };

package/src/components/Message/Message.theme.ts

@@ -0,0 +1,44 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx, messageValence } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type MessageValence, type Theme } from '@dxos/ui-types';
+
+export type MessageStyleProps = {
+  valence?: MessageValence;
+  elevation?: Elevation;
+};
+
+const root: ComponentFunction<MessageStyleProps> = ({ valence }, etc) => {
+  return mx('p-1 rounded-sm', messageValence(valence), etc);
+};
+
+const header: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('items-center', etc);
+};
+
+const title: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-2 overflow-hidden truncate', etc);
+};
+
+const icon: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-1 grid place-items-center', etc);
+};
+
+const close: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-3', etc);
+};
+
+const content: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-2 flex flex-col first:font-medium pb-1.5', etc);
+};
+
+export const messageTheme: Theme<MessageStyleProps> = {
+  root,
+  header,
+  icon,
+  title,
+  close,
+  content,
+};

package/src/components/Message/Message.tsx

@@ -5,13 +5,18 @@
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type CSSProperties, type ComponentPropsWithRef, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useId } from '@dxos/react-hooks';
 import { type Elevation, type MessageValence } from '@dxos/ui-types';
 
+import { translationKey } from '#translations';
+
 import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { IconButton } from '../Button';
+import { Column } from '../Column';
 import { Icon } from '../Icon';
 
 const messageIcons: Record<MessageValence, string> = {
@@ -34,6 +39,42 @@ type MessageContextValue = { titleId?: string; descriptionId: string; valence: M
 
 const MESSAGE_NAME = 'Message';
 
+// CSS custom properties for valence color inheritance — consumed by Button variant='valence'.
+// Extending CSSProperties so entries satisfy the style prop type without a cast at the use site.
+type ValenceCSSVars = CSSProperties & {
+  '--dx-valence-bg': string;
+  '--dx-valence-bg-hover': string;
+  '--dx-valence-text': string;
+};
+
+const valenceVars: Record<MessageValence, ValenceCSSVars> = {
+  success: {
+    '--dx-valence-bg': 'var(--color-success-bg)',
+    '--dx-valence-bg-hover': 'var(--color-success-bg-hover)',
+    '--dx-valence-text': 'var(--color-success-text)',
+  },
+  info: {
+    '--dx-valence-bg': 'var(--color-info-bg)',
+    '--dx-valence-bg-hover': 'var(--color-info-bg-hover)',
+    '--dx-valence-text': 'var(--color-info-text)',
+  },
+  warning: {
+    '--dx-valence-bg': 'var(--color-warning-bg)',
+    '--dx-valence-bg-hover': 'var(--color-warning-bg-hover)',
+    '--dx-valence-text': 'var(--color-warning-text)',
+  },
+  error: {
+    '--dx-valence-bg': 'var(--color-error-bg)',
+    '--dx-valence-bg-hover': 'var(--color-error-bg-hover)',
+    '--dx-valence-text': 'var(--color-error-text)',
+  },
+  neutral: {
+    '--dx-valence-bg': 'var(--color-neutral-bg)',
+    '--dx-valence-bg-hover': 'var(--color-neutral-bg-hover)',
+    '--dx-valence-text': 'var(--color-neutral-text)',
+  },
+};
+
 const [MessageProvider, useMessageContext] = createContext<MessageContextValue>(MESSAGE_NAME);
 
 //
@@ -58,20 +99,21 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
     const titleId = useId('message__title', propsTitleId);
     const descriptionId = useId('message__description', propsDescriptionId);
     const elevation = useElevationContext(propsElevation);
-    const Comp = asChild ? Slot : Primitive.div;
 
     return (
       <MessageProvider {...{ titleId, descriptionId, valence }}>
-        <Comp
+        <Column.Root
+          asChild={asChild}
           role={valence === 'neutral' ? 'paragraph' : 'alert'}
-          {...props}
-          className={tx('message.root', { valence, elevation }, classNames)}
           aria-labelledby={titleId}
           aria-describedby={descriptionId}
+          {...props}
+          style={{ ...valenceVars[valence], ...(props.style || {}) }}
+          classNames={tx('message.root', { valence, elevation }, classNames)}
           ref={forwardedRef}
         >
           {children}
-        </Comp>
+        </Column.Root>
       </MessageProvider>
     );
   },
@@ -84,27 +126,41 @@ MessageRoot.displayName = MESSAGE_NAME;
 //
 
 type MessageTitleProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
-  asChild?: boolean;
   icon?: string;
+  onClose?: () => void;
 };
 
-const MESSAGE_TITLE_NAME = 'MessageTitle';
+const MESSAGE_TITLE_NAME = 'Message.Title';
 
-const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
-  ({ asChild, classNames, children, icon: iconProp, ...props }, forwardedRef) => {
+const MessageTitle = forwardRef<HTMLDivElement, MessageTitleProps>(
+  ({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
     const { tx } = useThemeContext();
     const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-    const Comp = asChild ? Slot : Primitive.h2;
     const icon = iconProp ?? messageIcons[valence];
     return (
-      <Comp {...props} className={tx('message.header', {}, classNames)} id={titleId} ref={forwardedRef}>
-        {!icon && valence === 'neutral' ? (
-          <div />
-        ) : (
-          <Icon size={5} icon={icon} classNames={tx('message.icon', { valence })} />
+      <Column.Row classNames={tx('message.header', {}, classNames)} ref={forwardedRef}>
+        {icon && (
+          <div className={tx('message.icon', { valence })}>
+            <Icon icon={icon} size={5} />
+          </div>
         )}
-        <span className={tx('message.title', {}, classNames)}>{children}</span>
-      </Comp>
+        <h2 className={tx('message.title', {}, classNames)} id={titleId}>
+          {children}
+        </h2>
+        {onClose && (
+          <div className={tx('message.close', {})}>
+            <IconButton
+              variant='ghost'
+              icon='ph--x--regular'
+              iconOnly
+              density='sm'
+              label={t('toolbar-close.label')}
+              onClick={onClose}
+            />
+          </div>
+        )}
+      </Column.Row>
     );
   },
 );
@@ -119,7 +175,7 @@ type MessageContentProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Pri
   asChild?: boolean;
 };
 
-const MESSAGE_CONTENT_NAME = 'MessageContent';
+const MESSAGE_CONTENT_NAME = 'Message.Content';
 
 const MessageContent = forwardRef<HTMLParagraphElement, MessageContentProps>(
   ({ asChild, classNames, children, ...props }, forwardedRef) => {