@moldable-ai/ui 0.2.31 → 0.2.32

package/dist/components/ui/toolbar-controls.js

@@ -6,16 +6,34 @@ import { cn } from '../../lib/utils.js';
 import { Button } from './button.js';
 import { DropdownMenu, DropdownMenuTrigger } from './dropdown-menu.js';
 import { IconButton, } from './icon-button.js';
+import { Material } from './material.js';
 import { Separator } from './separator.js';
 const ToolbarControlGroupContext = React.createContext(null);
-function ToolbarButton({ appearance = 'chrome', className, size, variant, ...props }) {
+function ToolbarButton({ appearance = 'chrome', className, material, size, variant, ...props }) {
     const group = React.useContext(ToolbarControlGroupContext);
     const groupedSize = group?.size === 'xl' ? 'lg' : 'sm';
     const emphasis = variant === 'prominent' ? 'primary' : 'standard';
-    const resolvedVariant = variant === 'prominent'
-        ? 'toolbar'
-        : (variant ?? (group || appearance === 'quiet' ? 'ghost' : 'toolbar'));
-    return (_jsx(Button, { "data-slot": "toolbar-button", "data-emphasis": emphasis, size: size ?? (group ? groupedSize : 'xl'), variant: resolvedVariant, className: cn('rounded-pill gap-[var(--m-ui-toolbar-action-gap,var(--density-control-gap))] px-[var(--m-ui-toolbar-action-padding-inline,var(--density-control-padding-inline))] [&_svg:not([class*="size-"])]:size-[var(--m-ui-toolbar-action-icon-size,13px)]', emphasis === 'primary' && 'font-semibold', group && 'shadow-none', className), ...props }));
+    const usesToolbarChrome = variant === undefined || variant === 'prominent' || variant === 'toolbar';
+    const resolvedMaterial = group || appearance === 'quiet'
+        ? 'none'
+        : (material ??
+            (usesToolbarChrome
+                ? variant === 'prominent'
+                    ? 'thick'
+                    : 'regular'
+                : 'none'));
+    const resolvedVariant = resolvedMaterial !== 'none'
+        ? 'ghost'
+        : usesToolbarChrome &&
+            (group || appearance === 'quiet' || material === 'none')
+            ? 'ghost'
+            : variant === 'prominent'
+                ? 'toolbar'
+                : (variant ?? 'toolbar');
+    const button = (_jsx(Button, { "data-slot": "toolbar-button", "data-emphasis": emphasis, size: size ?? (group ? groupedSize : 'xl'), variant: resolvedVariant, className: cn('rounded-pill gap-[var(--m-ui-toolbar-action-gap,var(--density-control-gap))] px-[var(--m-ui-toolbar-action-padding-inline,var(--density-control-padding-inline))] [&_svg:not([class*="size-"])]:size-[var(--m-ui-toolbar-action-icon-size,13px)]', emphasis === 'primary' && 'font-semibold', group && 'shadow-none', className), ...props }));
+    if (resolvedMaterial === 'none')
+        return button;
+    return (_jsx(Material, { asChild: true, variant: resolvedMaterial, shape: "capsule", elevation: "panel", interactive: true, children: button }));
 }
 function ToolbarIconButton({ appearance = 'chrome', className, size, variant, ...props }) {
     const group = React.useContext(ToolbarControlGroupContext);
@@ -38,8 +56,8 @@ function ToolbarSidebarToggle({ expanded, hideLabel = 'Hide sidebar', onExpanded
     const label = expanded ? hideLabel : showLabel;
     return (_jsx(ToolbarIconButton, { "aria-pressed": expanded, "data-state": expanded ? 'on' : 'off', label: label, tooltip: tooltip, onClick: () => onExpandedChange(!expanded), ...props, children: _jsx(PanelLeftIcon, {}) }));
 }
-function ToolbarOverflowMenu({ items, label = 'More actions', onSelectItem, tooltip = true, ...props }) {
-    return (_jsx(DropdownMenu, { items: items, onSelectItem: onSelectItem, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ToolbarIconButton, { label: label, tooltip: tooltip, ...props, children: _jsx(EllipsisIcon, {}) }) }) }));
+function ToolbarOverflowMenu({ items, label = 'More actions', nativeMenu = false, onSelectItem, tooltip = true, ...props }) {
+    return (_jsx(DropdownMenu, { items: items, nativeMenu: nativeMenu, onSelectItem: onSelectItem, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ToolbarIconButton, { label: label, tooltip: tooltip, ...props, children: _jsx(EllipsisIcon, {}) }) }) }));
 }
 function ToolbarTitleField({ 'aria-label': ariaLabel, className, label = 'Document title', type = 'text', ...props }) {
     return (_jsx("input", { "data-slot": "toolbar-title-field", "aria-label": ariaLabel ?? label, type: type, className: cn('text-foreground hover:bg-control-hover focus:bg-control-hover focus-visible:ring-ring h-control-md rounded-control min-w-0 max-w-[min(24rem,32vw)] bg-transparent px-2 text-[13px] font-bold outline-none transition-colors focus-visible:ring-1', className), ...props }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moldable-ai/ui",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "description": "Shared UI components for Moldable applications",
   "author": "Desiderata LLC",
   "license": "SEE LICENSE IN LICENSE",

package/src/components/ui/button.md

@@ -56,8 +56,9 @@ For links that should look like buttons:
 - `variant`: `default`, `prominent`, `bordered`, `borderless`, `tinted`,
   `toolbar`, `destructive`, `destructive-tinted`, `outline`, `secondary`,
   `ghost`, or `link`. Defaults to `default`; `default` and `prominent` share
-  the prominent recipe. Prefer the toolbar-control wrappers instead of
-  applying `toolbar` directly.
+  the prominent recipe. `borderless` uses the neutral foreground color without
+  a border or fill, then dims slightly on hover and press. Prefer the
+  toolbar-control wrappers instead of applying `toolbar` directly.
 - `size`: `default`, `xs`, `sm`, `lg`, `xl`, `mini`, `small`, `medium`,
   `large`, `icon`, `icon-xs`, `icon-sm`, `icon-lg`, or `icon-xl`. Defaults to
   `default`.

package/src/components/ui/dropdown-menu.md

@@ -4,7 +4,8 @@
 
 `DropdownMenu` presents a compact list of commands from a visible trigger. Use
 it for overflow actions, view commands, and small command groups. Its
-declarative item API automatically adopts the host-native menu when available.
+declarative item API uses the portable menu by default and can opt into the
+host-native menu when needed.
 
 Use `Select` for a form value, `Combobox` for searchable selection,
 `ContextMenu` for commands attached to the pointer target, and `Popover` when
@@ -91,9 +92,9 @@ shortcuts, and submenus are available when the command set needs structure.
 
 ## API summary
 
-- `DropdownMenu` supports `items?: MenuItems[]`,
-  `onSelectItem?: (id: string) => void`, `open`, `defaultOpen`,
-  `onOpenChange`, `dir`, and `modal`.
+- `DropdownMenu` supports `items?: MenuItems[]`, `nativeMenu?: boolean`,
+  `onSelectItem?: (id: string) => void`, `open`, `defaultOpen`, `onOpenChange`,
+  `dir`, and `modal`.
 - A `MenuItems` value supports `id`, `kind`, `label`, portable `icon`, reserved
   `sfSymbol`, `enabled`, `checked`, `shortcut`, `destructive`, and `submenu`.
 - Do not provide `DropdownMenuContent` together with `items`. In development
@@ -128,16 +129,17 @@ menu item; use `Popover` or `Dialog`.
 
 ## Platform behavior
 
-With `items`, pointer and keyboard trigger activation automatically opens the
-host-native menu when `nativeMenu` is advertised. The trigger rectangle is its
-anchor, `selectedId` is delivered to `onSelectItem`, and dismissal is a no-op.
-No portable menu is rendered while that native request is open.
-
-Without the advertisement, including web and iOS, the same items automatically
-render through the existing Radix anatomy. A stale advertisement that returns
-fallback opens the portable menu as well. Icons and destructive styling are
-portable in v1; `sfSymbol` is reserved and is not posted to or rendered by the
-native service.
+With `items`, pointer and keyboard trigger activation opens the portable Radix
+menu by default, including when the host advertises `nativeMenu`.
+
+Set `nativeMenu` explicitly on `DropdownMenu` to opt into the host-native menu.
+The trigger rectangle is its anchor, `selectedId` is delivered to
+`onSelectItem`, and dismissal is a no-op. No portable menu is rendered while
+that native request is open. Without the host advertisement, including web and
+iOS, the same items render through the existing Radix anatomy. A stale
+advertisement that returns fallback opens the portable menu as well. Icons and
+destructive styling are portable in v1; `sfSymbol` is reserved and is not
+posted to or rendered by the native service.
 
 Shortcuts are display metadata only. They do not register keyboard handlers;
 keep command execution keyed by `onSelectItem`. See

package/src/components/ui/menu-items.md

@@ -45,6 +45,8 @@ import { Button, DropdownMenu, DropdownMenuTrigger } from '@moldable-ai/ui'
 - `useDeclarativeMenuState` supports controlled or uncontrolled portable-open
   state. While a native request is active, `nativeOpen` is true and
   `portableOpen` is forced false.
+- Native requests are gated by an explicit component policy. `DropdownMenu`
+  exposes that policy as its opt-in `nativeMenu` prop.
 - A completed native request passes `selectedId` to `onSelectItem`.
   Cancellation does nothing. A fallback result or request failure opens the
   portable menu unless the caller supplies its own `onFallback`.

package/src/components/ui/message-scroller.md

@@ -62,9 +62,12 @@ import {
 
 ## Hooks and behavior
 
-- `useMessageScroller()` returns `scrollToStart`, `scrollToEnd`, and
-  `scrollToMessage`. Targeted scrolls accept `align`, `behavior`, and
-  `scrollMargin`; alignment defaults to `start` and behavior to `auto`.
+- `useMessageScroller()` returns `scrollToStart`, `scrollToEnd`,
+  `scrollToMessage`, `beginHistoryLoad`, and `finishHistoryLoad`. Bracket an
+  asynchronous older-history request with the last two methods so prepends and
+  stale-page replacements preserve distance from the bottom before paint.
+  Targeted scrolls accept `align`, `behavior`, and `scrollMargin`; alignment
+  defaults to `start` and behavior to `auto`.
 - `useMessageScrollerScrollable()` returns `{ start, end }`.
 - `useMessageScrollerVisibility()` returns `currentAnchorId` and ordered
   `visibleMessageIds`.

package/src/components/ui/sidebar.md

@@ -25,8 +25,11 @@ import {
 } from '@moldable-ai/ui'
 
 ;<SidebarProvider className="h-full min-h-0">
-  <Sidebar collapsible="icon">
-    <SidebarContent className="pb-[calc(var(--chat-safe-padding,0px)+1rem)]">
+  <Sidebar collapsible="icon" material="medium">
+    <SidebarContent
+      edgeFade
+      className="scrollbar-hide pb-[calc(var(--chat-safe-padding,0px)+1rem)]"
+    >
       <SidebarGroup>
         <SidebarGroupLabel>Mailboxes</SidebarGroupLabel>
         <SidebarGroupContent>
@@ -65,14 +68,14 @@ icon tint, and text truncation.
 
 - `SidebarProvider`: required context. Supports uncontrolled `defaultOpen`, controlled `open`/`onOpenChange`, and CSS variable overrides through `style`.
 - `useSidebar()`: returns `state`, `open`, `setOpen`, `openMobile`, `setOpenMobile`, `isMobile`, and `toggleSidebar`.
-- `Sidebar`: `side="left" | "right"`, `variant="sidebar" | "floating" | "inset"`, `sidebarStyle="platform" | "floating" | "edge-to-edge"`, and `collapsible="offcanvas" | "icon" | "none"`.
+- `Sidebar`: `side="left" | "right"`, `variant="sidebar" | "floating" | "inset"`, `sidebarStyle="platform" | "floating" | "edge-to-edge"`, `material="ultra-thick" | "thick" | "medium" | "thin" | "ultra-thin"` (plus the compatibility aliases `regular` and `clear`), and `collapsible="offcanvas" | "icon" | "none"`.
 - `SidebarInset`: main content surface paired with the sidebar.
 - `SidebarTrigger`: compact toggle button.
 - `SidebarRail`: pointer target along the sidebar edge.
 
 ### Structure
 
-- `SidebarHeader`, `SidebarFooter`, `SidebarContent`, and `SidebarSeparator` divide the vertical shell.
+- `SidebarHeader`, `SidebarFooter`, `SidebarContent`, and `SidebarSeparator` divide the vertical shell. `SidebarContent edgeFade` composes the shared top and bottom `EdgeFade` cues around its scroll viewport; it defaults off.
 - `SidebarInput` is a compact search/filter input.
 - `SidebarGroup`, `SidebarGroupLabel`, `SidebarGroupAction`, and `SidebarGroupContent` organize sections.
 
@@ -120,7 +123,10 @@ Choose the visual anatomy independently from the application's base platform:
 
 - `edge-to-edge` is the default.
 - `floating` uses the macOS inset, material-backed shell and forces the
-  component's resolved variant to `floating`.
+  component's resolved variant to `floating`. Its shell clips scrolling
+  content to the rounded material edge. Set `material` when the surface needs
+  an explicit adaptive-material thickness; thinner values are more
+  transparent without changing the standard blur.
 - `edge-to-edge` uses the macOS joined window/sidebar anatomy and forces the
   resolved variant to `sidebar`.
   It has no independent fill, blur, shadow, or internal divider and reveals

package/src/components/ui/toolbar-controls.md

@@ -39,15 +39,17 @@ keeping app toolbars visually consistent.
 
 ## Components
 
-- `ToolbarButton` — text or mixed-content action. Defaults to 36px native
-  chrome; use `variant="prominent"` for the one primary action.
+- `ToolbarButton` — text or mixed-content action. Standalone chrome is a real
+  adaptive material surface: `material="regular"` by default and
+  `material="thick"` for `variant="prominent"`. Set `material="none"` or
+  `appearance="quiet"` to remove it.
 - `ToolbarIconButton` — required accessible label and optional tooltip.
 - `ToolbarBackButton` — single chevron Back affordance for root-to-detail
   navigation.
 - `ToolbarSidebarToggle` — controlled sidebar visibility button with accurate
   pressed state and dynamic label.
 - `ToolbarOverflowMenu` — an ellipsis button backed by Moldable's declarative
-  menu API, including the native host menu when available.
+  portable menu API. Set `nativeMenu` to opt into the native host menu.
 - `ToolbarControlGroup` — a shared surface for closely related actions such as
   Undo/Redo. It defaults to `size="xl"`, supports `size="medium"`, and makes
   children compact quiet controls.
@@ -55,10 +57,12 @@ keeping app toolbars visually consistent.
 - `ToolbarTitleField` — an accessible, inline-editable contextual title.
 
 `ToolbarButton` and `ToolbarIconButton` accept `appearance="quiet"` when a
-standalone action should not have raised chrome. The default `chrome`
-appearance uses the `toolbar` Button variant. `ToolbarControlGroup` also
-accepts `appearance="quiet"` when related controls should not share a raised
-surface. Raised controls use these semantic tokens:
+standalone action should not have raised chrome. `ToolbarButton` uses the
+shared adaptive `Material` layer; `ToolbarIconButton` uses the compact toolbar
+control treatment. `ToolbarControlGroup` also accepts `appearance="quiet"`
+when related controls should not share a raised surface. Grouped buttons do
+not add a nested material layer. Raised compact controls use these semantic
+tokens:
 
 - `--toolbar-control-background`
 - `--toolbar-control-hover`

package/src/styles/index.css

@@ -1037,7 +1037,7 @@
 }
 
 .dark {
-  --background: #1d1f1f;
+  --background: #181818;
   --foreground: rgb(255 255 255 / 85%);
   --card: #242424;
   --card-foreground: rgb(255 255 255 / 85%);
@@ -1437,6 +1437,133 @@
         saturate(var(--material-active-saturation));
     }
   }
+
+  /*
+   * Popovers keep the quieter material treatment used before the general
+   * surface-material expansion. They are compact menus, not floating windows.
+   */
+  .moldable-popover {
+    --shape-overlay: 0.75rem;
+    --density-pane-padding: 0.75rem;
+    --popover-material-fill: color-mix(
+      in oklch,
+      var(--background) 76%,
+      transparent
+    );
+    --popover-material-fallback: color-mix(
+      in oklch,
+      var(--background) 94%,
+      var(--foreground) 6%
+    );
+    --popover-material-border: color-mix(
+      in oklch,
+      var(--foreground) 10%,
+      transparent
+    );
+    --popover-material-highlight: oklch(1 0 0 / 42%);
+    --popover-material-blur: 20px;
+    --popover-material-saturation: 1.18;
+    --popover-material-shadow:
+      0 8px 24px oklch(0.15 0.005 285 / 12%),
+      0 2px 6px oklch(0.15 0.005 285 / 8%);
+
+    border: 1px solid var(--popover-material-border);
+    background-color: var(--popover-material-fallback);
+    box-shadow:
+      inset 0 1px 0 var(--popover-material-highlight),
+      var(--popover-material-shadow);
+  }
+
+  .moldable-popover[data-material='clear'] {
+    --popover-material-fill: color-mix(
+      in oklch,
+      var(--background) 24%,
+      transparent
+    );
+    --popover-material-fallback: color-mix(
+      in oklch,
+      var(--background) 88%,
+      var(--foreground) 12%
+    );
+    --popover-material-border: color-mix(
+      in oklch,
+      var(--foreground) 14%,
+      transparent
+    );
+    --popover-material-highlight: oklch(1 0 0 / 28%);
+    --popover-material-blur: 12px;
+    --popover-material-saturation: 1.24;
+  }
+
+  .dark .moldable-popover {
+    --popover-material-fill: color-mix(
+      in oklch,
+      var(--background) 68%,
+      transparent
+    );
+    --popover-material-fallback: color-mix(
+      in oklch,
+      var(--background) 88%,
+      var(--foreground) 12%
+    );
+    --popover-material-border: oklch(1 0 0 / 14%);
+    --popover-material-highlight: oklch(1 0 0 / 12%);
+    --popover-material-shadow:
+      0 12px 32px oklch(0 0 0 / 34%), 0 2px 8px oklch(0 0 0 / 24%);
+  }
+
+  .dark .moldable-popover[data-material='clear'] {
+    --popover-material-fill: color-mix(
+      in oklch,
+      var(--background) 20%,
+      transparent
+    );
+    --popover-material-fallback: color-mix(
+      in oklch,
+      var(--background) 78%,
+      var(--foreground) 22%
+    );
+    --popover-material-border: oklch(1 0 0 / 18%);
+    --popover-material-highlight: oklch(1 0 0 / 10%);
+  }
+
+  :where([data-transparency='reduced']) .moldable-popover {
+    --popover-material-fill: var(--popover-material-fallback);
+    --popover-material-blur: 0px;
+    --popover-material-saturation: 1;
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .moldable-popover {
+      --popover-material-fill: var(--popover-material-fallback);
+      --popover-material-blur: 0px;
+      --popover-material-saturation: 1;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .moldable-popover {
+      --popover-material-fill: Canvas;
+      --popover-material-fallback: Canvas;
+      --popover-material-border: ButtonBorder;
+      --popover-material-highlight: transparent;
+      --popover-material-shadow: none;
+      --popover-material-blur: 0px;
+      --popover-material-saturation: 1;
+    }
+  }
+
+  @supports (
+    (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
+  ) {
+    .moldable-popover {
+      background-color: var(--popover-material-fill);
+      -webkit-backdrop-filter: blur(var(--popover-material-blur))
+        saturate(var(--popover-material-saturation));
+      backdrop-filter: blur(var(--popover-material-blur))
+        saturate(var(--popover-material-saturation));
+    }
+  }
 }
 
 @layer utilities {

package/src/tokens/moldable/brand.css

@@ -8,15 +8,132 @@
 }
 
 /*
- * Moldable's dark canvas stays close to the macOS window surface while
- * carrying a subtle cool cast. Keep these product colors in the brand layer
- * instead of changing the immutable platform source values.
+ * Moldable's dark canvas stays close to the macOS window surface with a
+ * neutral tone. Keep these product colors in the brand layer instead of
+ * changing the immutable platform source values.
  */
 [data-ui-theme='moldable'][data-ui-appearance='dark'] {
-  --m-ui-surface-window: #1d1f1f;
-  --m-ui-surface-content: #1d1f1f;
-  --background: #1d1f1f;
-  --surface-canvas: #1d1f1f;
+  --m-ui-surface-window: #181818;
+  --m-ui-surface-content: #181818;
+  --background: #181818;
+  --surface-canvas: #181818;
+}
+
+/*
+ * Renderer-owned selects and dropdowns keep Moldable's compact web styling.
+ * Native menu geometry belongs only to the explicit host-native menu path.
+ * These values preserve the component treatment from 94f11aa without
+ * changing the platform source pack used by native integrations.
+ */
+[data-ui-theme='moldable'] [data-slot='select-trigger'] {
+  --shape-control: calc(0.65rem - 2px);
+  --density-control-height-sm: 2rem;
+  --density-control-height-md: 2.25rem;
+  --density-control-gap: 0.5rem;
+  --density-control-padding-inline: 0.75rem;
+  --type-body-size: 0.875rem;
+  --type-body-line-height: 1.25rem;
+}
+
+[data-ui-theme='moldable']
+  :is(
+    [data-slot='select-content'],
+    [data-slot='dropdown-menu-content'],
+    [data-slot='dropdown-menu-sub-content']
+  ) {
+  --shape-overlay: calc(0.65rem - 2px);
+  --m-ui-menu-padding-block: 0.25rem;
+  --m-ui-menu-item-radius: calc(0.65rem - 4px);
+  --type-body-size: 0.875rem;
+  --type-body-line-height: 1.25rem;
+  --type-caption-size: 0.75rem;
+  --type-caption-line-height: 1rem;
+  --material-shadow-overlay: var(--shadow-md);
+}
+
+[data-ui-theme='moldable'] [data-slot='dropdown-menu-sub-content'] {
+  --material-shadow-overlay: var(--shadow-lg);
+}
+
+[data-ui-theme='moldable'][data-ui-appearance='light']
+  :is(
+    [data-slot='select-content'],
+    [data-slot='dropdown-menu-content'],
+    [data-slot='dropdown-menu-sub-content']
+  ) {
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --border: oklch(0.92 0.004 286.32);
+}
+
+[data-ui-theme='moldable'][data-ui-appearance='dark']
+  :is(
+    [data-slot='select-content'],
+    [data-slot='dropdown-menu-content'],
+    [data-slot='dropdown-menu-sub-content']
+  ) {
+  --popover: oklch(0.269 0.0018 286.28);
+  --popover-foreground: oklch(0.985 0 0);
+  --accent: oklch(0.3375 0.0035 286.21);
+  --accent-foreground: oklch(0.985 0 0);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --border: oklch(1 0 0 / 10%);
+}
+
+/*
+ * Keep Moldable tooltips on the compact material recipe from 94f11aa. The
+ * selected platform kit now maps generic overlays to its larger popover
+ * geometry, so the product theme reasserts the tooltip's own smaller recipe.
+ */
+[data-ui-theme='moldable'] [data-slot='tooltip-content'] {
+  --shape-overlay: 0.75rem;
+  --type-caption-size: 0.75rem;
+  --type-caption-line-height: 1rem;
+  --surface-overlay: color-mix(in oklch, var(--popover) 92%, transparent);
+  --material-regular-fill: color-mix(
+    in oklch,
+    var(--background) 76%,
+    transparent
+  );
+  --material-regular-fallback: color-mix(
+    in oklch,
+    var(--background) 94%,
+    var(--foreground) 6%
+  );
+  --material-regular-blur: 20px;
+  --material-regular-saturation: 1.18;
+  --material-shadow-overlay:
+    0 8px 24px oklch(0.15 0.005 285 / 12%),
+    0 2px 6px oklch(0.15 0.005 285 / 8%);
+  box-shadow:
+    inset 0 1px 0 oklch(1 0 0 / 42%),
+    var(--material-shadow-overlay);
+}
+
+[data-ui-theme='moldable'][data-ui-appearance='dark']
+  [data-slot='tooltip-content'] {
+  --material-regular-fill: color-mix(
+    in oklch,
+    var(--background) 68%,
+    transparent
+  );
+  --material-regular-fallback: color-mix(
+    in oklch,
+    var(--background) 88%,
+    var(--foreground) 12%
+  );
+  --material-shadow-overlay:
+    0 12px 32px oklch(0 0 0 / 34%), 0 2px 8px oklch(0 0 0 / 24%);
+  box-shadow:
+    inset 0 1px 0 oklch(1 0 0 / 12%),
+    var(--material-shadow-overlay);
+}
+
+[data-ui-theme='moldable'] [data-slot='tooltip-shortcut'] {
+  font-size: 0.625rem;
 }
 
 /*

package/src/tokens/platform-contract.test.ts

@@ -278,7 +278,11 @@ describe('platform token contract', () => {
     expect(brand).not.toMatch(
       /\[data-ui-sidebar-style='floating'\]\s+\[data-ui-appearance='dark'\]/,
     )
-    expect(brand).toContain('--m-ui-surface-content: #1d1f1f;')
+    expect(brand).toContain('--m-ui-surface-content: #181818;')
+    expect(brand).toContain("[data-slot='select-trigger']")
+    expect(brand).toContain("[data-slot='select-content']")
+    expect(brand).toContain("[data-slot='dropdown-menu-content']")
+    expect(brand).toContain('--material-shadow-overlay: var(--shadow-md);')
     expect(brand).toContain('--m-ui-sidebar-material-fill: #1b1d1e;')
     expect(brand).toContain('--m-ui-sidebar-border-color: #394043;')
     expect(brand).toContain(