@vvedantb/ui 0.33.0 → 0.35.0

package/README.md

@@ -292,7 +292,7 @@ import {
 - `Button`: variants `flat`, `success` and `warning` (each is `ghost` plus an override). `loading` disables the button, sets `data-loading="true"` and shows a spinner in place of `startContent`; without `loading` there is no `data-loading` attribute. `endContent` renders after the children. Both are ignored with `asChild` (`loading` still disables).
 - `DropdownMenuContent`: `fitViewport` caps the height on small screens and scrolls. It reads the optional `--vv-height` CSS variable, which the app may set to the visual viewport height (falls back to `70dvh`). `suppressAltKey` stops a bare Alt press from moving focus. `restoreScrollLockOnClose` calls `restoreModalScrollLock` on close (now and on the next tick). `ContextMenuContent` takes `suppressAltKey` too.
 - `DropdownMenuItem` `endContent` and `ContextMenuItem` `startContent`, `description` and `endContent`: the label moves into a growing column (`min-w-0 flex-1`), the description sits under it and `endContent` sits at the end. `DropdownMenuSubTrigger` and `ContextMenuSubTrigger` take `startContent`.
-- `PopoverContent` `fitViewport`: grows from the trigger (`--radix-popper-transform-origin`), defaults `collisionPadding` to 8 (your value wins) and, on small screens, caps width to `100vw - 1.5rem` and height as above.
+- `PopoverContent` `fitViewport`: grows from the trigger (`--radix-popper-transform-origin`) and, on small screens, caps width to `100vw - 1.5rem` and height as above.
 - `CommandDialog`: `title` and `description` add a visually hidden dialog header. `className` merges onto the dialog content. `shouldFilter` goes to `Command`. `listLayout` is `"pinned"` (default, fixed list height) or `"auto"` (the list sizes itself and items keep your styling).
 - `restoreModalScrollLock()`: clears body `pointer-events`, and, when no dialog or alert dialog is open, the body and root `overflow` and body `padding-right` left by a modal menu.
 - `CardHeader`: `flex flex-col space-y-1.5 p-6`.
@@ -1434,9 +1434,10 @@ New props and exports:
 
 - `DialogContent` `viewportAware` (default `true`): the bottom sheet on compact viewports, visual-viewport sizing, keyboard-aware scrolling and the body pointer-events fix. `false` keeps a centred dialog at every size and leaves the viewport and body alone.
 - `PopoverAnchor` (Radix `Popover.Anchor`).
-- `HoverCardContent` and `TooltipContent` `portal`: render into `document.body`.
-- `ContextMenuSubContent` `portal`.
-- Config `Select.triggerSlot`: adds `data-slot="select-trigger"`, which the `ButtonGroup` selectors read.
+- `HoverCardContent` and `TooltipContent` `portal`: render into `document.body`. Default `true`; `false` renders inline.
+- `ContextMenuSubContent` `portal`. Default `true` (also `ContextMenu.subContentPortal`).
+- Config `Select.triggerSlot`: adds `data-slot="select-trigger"`, which the `ButtonGroup` selectors read. Default `true`.
+- `PopoverContent`, `DropdownMenuContent`, `ContextMenuContent` and `SelectContent` default `collisionPadding` to 8 (a prop or config value wins).
 - Config `Command.emptyClassNameReplaces`: a `className` on `CommandEmpty` (even `""`) replaces its classes instead of merging.
 
 `DialogTrigger`, `PopoverTrigger`, `DropdownMenuTrigger` and `ContextMenuTrigger` are now thin wrappers that read the config; `HoverCard` and `TooltipProvider` are function components that read the configured delays. Same DOM and props without config.
@@ -1541,14 +1542,14 @@ const config = {
 
   Outside a `StickToBottom` (for example a page outline) use `JumpRail` with `items` (`{ id, title, preview?, level? }`), a `scrollRef` or `getScrollElement`, and `targetAttribute="data-toc-id"` or `resolveTarget`. `onReveal` runs when a target is not in the DOM; `onBeforeScroll` runs just before it. `onSelect(id)` runs after a click or Enter/Space pick, once the scroll has started or `onReveal` has run, so an app can move focus to the target for keyboard users; `ChatJumpRail` accepts it too. `observeKey` re-observes when the rendered window changes. The geometry helpers (`resolveJumpRailTopPercent`, `resolveJumpRailIndexFromPointer`, `resolveJumpRailHeightStyle`, `resolveJumpRailTickWidthClass`, `resolveJumpRailTickLevelStyle`) are exported.
 - `Message`: `classes.root`, `classes.user`, `classes.assistant` (the role classes of `Message`), `classes.content` (all `MessageContent` classes), `classes.branchSelector`, `classes.branchIcon` (a class in place of the arrows' `size={14}`), and `lazyActionTooltips`: a `MessageAction` mounts its tooltip on first hover or focus (focus opens it), not with the button.
-- `PromptInput`: `classes.group` (the input group, default `overflow-hidden`), `classes.groupIdle` / `classes.groupDragOver` (added while no drag / an accepted drag is over the form), `classes.groupDefault` (added when no `containerClassName` is given), `classes.textarea`, `classes.footer`, `classes.submit`, `classes.tabItem`; `submitIcons.<send|submitted|streaming|error>`, `submitCrossfade` (cross-fade the submit icon on status change) and `menuTriggerAsChild` (`PromptInputActionMenuTrigger` becomes the Radix trigger instead of a button inside it). New `PromptInput` props: `dataDrop` (`{ type, onDrop }`: a non-file drag of that MIME type counts as a drag over the form and `onDrop` gets its string payload) and `inputGroupClassName` (same as `containerClassName`). The attachments context adds `replace(id, file)`; `accept` now matches extension patterns such as `.html` by file name; `useOptionalPromptInputController` is exported.
+- `PromptInput`: `classes.group` (the input group, default `overflow-hidden`), `classes.groupIdle` / `classes.groupDragOver` (added while no drag / an accepted drag is over the form), `classes.groupDefault` (added when no `containerClassName` is given), `classes.textarea`, `classes.footer`, `classes.submit`, `classes.tabItem`; `submitIcons.<send|submitted|streaming|error>`, `submitCrossfade` (cross-fade the submit icon on status change) and `menuTriggerAsChild` (default `true`: `PromptInputActionMenuTrigger` is the Radix trigger; `false` nests a button inside it). New `PromptInput` props: `dataDrop` (`{ type, onDrop }`: a non-file drag of that MIME type counts as a drag over the form and `onDrop` gets its string payload) and `inputGroupClassName` (same as `containerClassName`). The attachments context adds `replace(id, file)`; `accept` now matches extension patterns such as `.html` by file name; `useOptionalPromptInputController` is exported.
 - `PromptInputSubmit`: new prop `queued` (0.30.0). Set it when a send would join a queue (the agent is still working). The send icon becomes `SendQueueIcon`, an up arrow that morphs into a stack of bars while `queued` is `true`. Leave it unset to keep `submitIcons.send`. `SendQueueIcon` (`queued`, `className` default `size-4`) is exported for other send buttons. It uses `m`, so `queued` needs the app's `LazyMotion`.
 - `PromptInputSettings` (new): an overflow menu with a "Model" submenu (one radio list, or a submenu per provider). Entry: `providerLabel(provider)` (default the id), `providerIcon(provider)` (default none), `classes.trigger`.
 - `TraitsPanel` (new, with `isUltrathinkPrompt`, `applyUltrathinkPrefix`): reasoning, speed, context and thinking segments for a model picker; inside a `PromptInputProvider` it offers "Ultrathink" by editing the prompt. Entry: `classes.label`, `classes.empty`, `classes.option`, `classes.optionSelected`, `classes.optionIdle`, `classes.note`.
 - `PromptInputSpeech`, `useSpeechRecognition`, `getSpeechRecognition` (new): Web Speech API dictation; the button renders nothing without the API.
 - `Queue`: one family, used in one of two ways. The queued-messages widget is unchanged: `Queue` with `count`, `QueueHeader`, `QueueList` (`open`) and `QueueItem` with `text` (`model`, `personalityName`, `personaName`, `personaImage`, `onEdit`, `onRemove`). The composable parts (the AI Elements `Queue`, new): `Queue` without `count` (a plain root), `QueueSection`, `QueueSectionTrigger`, `QueueSectionLabel`, `QueueSectionContent`, `QueueList` (inside a composable `Queue`: a list capped at `max-h-48`), `QueueItem` without `text` (an `li`, takes `ref`), `QueueItemIndicator`, `QueueItemContent`, `QueueItemActions`, `QueueItemAction`. The composable parts render no `motion.*`, so they work under `<LazyMotion strict>`. Entry `Queue`: `classes.sectionTrigger`.
 - `Shimmer`: `mode`, `as`, `classes.base`, `classes.overlay`, `classes.band`, `classes.copy`. New prop `mode`: `"gradient"` (default) or `"mask"`, which sweeps a masked copy of the text with transforms only (no repaint, paused offscreen). `mask` needs the app to define `.shimmer-overlay`, `.shimmer-band` and `.shimmer-copy` (or the `classes` it names).
-- `CodeBlock`: `plain`, `copyButtonSize`, `copyLabel` (a screen-reader label on the copy button), `copyEveryClick` (the copy button copies on every click, also while it shows the check; by default those clicks do nothing until it resets after `timeout`), `classes.container`, `classes.pre`, `classes.copyButton`, `classes.copyIcon` (a class in place of `size={14}`). New props: `plain` (no shiki: a `pre` with the code, and `children` replace that `pre` instead of sitting above it); `language` is now optional.
+- `CodeBlock`: `plain`, `copyButtonSize`, `copyLabel` (a screen-reader label on the copy button; without it the icon-only button gets `aria-label="Copy code"`), `copyEveryClick` (the copy button copies on every click, also while it shows the check; by default those clicks do nothing until it resets after `timeout`), `classes.container`, `classes.pre`, `classes.copyButton`, `classes.copyIcon` (a class in place of `size={14}`). New props: `plain` (no shiki: a `pre` with the code, and `children` replace that `pre` instead of sitting above it); `language` is now optional.
 - `Artifact`: `classes.root`, `classes.header`, `classes.title`, `classes.description`, `classes.actions`, `classes.action` (`ArtifactAction` and `ArtifactClose`), `classes.actionIcon`, `classes.content`, `actionSize`, `actionLabel` (`"sr-only"` names actions with a hidden span instead of `aria-label`). `ArtifactAction`: `tooltip` is optional (no tooltip, no wrapper) and `icon` also takes an icon component (`icon={IconCopy}`). New `ArtifactClose` (an action with an X, `label` default `"Close"`).
 - `Attachments`: `classes.item.<variant>`, `classes.preview.<variant>`, `classes.remove.<variant>` replace the variant classes of `Attachment`, `AttachmentPreview` and `AttachmentRemove`.
 - `FileChip` (new, no entry): a file name chip that opens the file.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one main JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), a client entry without @vvedantb/server, convex or Clerk for Chrome extensions, design-token CSS, shared Tailwind v4 CSS, a Tailwind preset and packaged Instrument Sans fonts.",
   "type": "module",

package/src/ai-elements/activity-shared.tsx

@@ -41,7 +41,7 @@ export interface ActivityMarkdownProps {
 export interface ActivityTasksConfig {
   /** Agent name in the streaming header ("<name> is thinking..."). Default "Agent"; the `name` prop wins. */
   name?: string;
-  /** Renders reasoning and mid-turn reply text. Default: `Streamdown`. */
+  /** Renders reasoning and mid-turn reply text. Default: the package `Markdown` (smooth streaming). */
   markdown?: ComponentType<ActivityMarkdownProps>;
   /**
    * An image for `ActivityThinkingIcon` (for example the app's logo mark),

package/src/ai-elements/activity-tasks.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { createContext, memo, useCallback, useContext, useRef, useState } from "react";
-import type { ComponentProps, ReactNode, Ref } from "react";
+import type { ComponentProps, ComponentType, ReactNode, Ref } from "react";
 import { flushSync } from "react-dom";
 
 import { Collapsible, CollapsibleContent } from "../ui/collapsible";
@@ -14,11 +14,7 @@ import {
   IconSearch,
   IconTerminal2,
 } from "@tabler/icons-react";
-import { cjk } from "@streamdown/cjk";
-import { code } from "@streamdown/code";
-import { math } from "@streamdown/math";
-import { mermaid } from "@streamdown/mermaid";
-import { Streamdown } from "streamdown";
+import { Markdown as PackageMarkdown } from "../markdown/Markdown";
 import { useCn, useUiConfig } from "../ui/ui-config";
 import { Spinner } from "../ui/spinner";
 import { CrossfadeIconSlot } from "../ui/crossfade-icon";
@@ -65,19 +61,9 @@ import {
 import { useStreamingDisclosure } from "./use-streaming-disclosure";
 import { RollingNumber } from "../ui/rolling-number";
 
-const streamdownPlugins = { cjk, code, math, mermaid };
-
-function StreamdownMarkdown({ className, mode, children }: ActivityMarkdownProps) {
-  return (
-    <Streamdown className={className} mode={mode} plugins={streamdownPlugins}>
-      {children}
-    </Streamdown>
-  );
-}
-
-/** The app's Markdown renderer (`UiConfig.ActivityTasks.markdown`), or Streamdown. */
-function useActivityMarkdown() {
-  return useUiConfig("ActivityTasks")?.markdown ?? StreamdownMarkdown;
+/** The app's Markdown renderer (`UiConfig.ActivityTasks.markdown`), or the package `Markdown`. */
+function useActivityMarkdown(): ComponentType<ActivityMarkdownProps> {
+  return useUiConfig("ActivityTasks")?.markdown ?? PackageMarkdown;
 }
 
 const ActivityStreamingHeader = memo(function ActivityStreamingHeader({

package/src/ai-elements/attachments.tsx

@@ -317,12 +317,12 @@ export const AttachmentRemove = ({
         remove === undefined && variant === "grid" && [
           "absolute top-2 right-2 size-6 rounded-full p-0",
           cn(flatPanelSubtleClass, flatElevatedSurfaceHoverClass),
-          "opacity-0 transition-opacity group-hover:opacity-100",
+          "reveal-on-hover transition-opacity",
           "[&>svg]:size-3",
         ],
         remove === undefined && variant === "inline" && [
           "size-5 rounded p-0",
-          "opacity-0 transition-opacity group-hover:opacity-100",
+          "reveal-on-hover transition-opacity",
           "[&>svg]:size-2.5",
         ],
         remove === undefined && variant === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],

package/src/ai-elements/code-block.tsx

@@ -101,7 +101,8 @@ type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
 /**
  * `UiConfig.CodeBlock`: `plain` default, and classes that replace the
  * container, the plain-mode `pre`, the copy button and its icon. A
- * `copyLabel` adds a screen-reader label to the copy button.
+ * `copyLabel` adds a screen-reader label to the copy button. Without it, the
+ * icon-only button gets `aria-label="Copy code"`.
  * `copyEveryClick` makes the copy button copy again while it still shows
  * the check; by default those clicks do nothing until it resets.
  */
@@ -482,6 +483,7 @@ export const CodeBlockCopyButton = ({
       onClick={copyToClipboard}
       size={config?.copyButtonSize ?? "icon"}
       variant="ghost"
+      aria-label={config?.copyLabel || children !== undefined ? undefined : "Copy code"}
       {...props}
     >
       {children ?? (iconClass === undefined ? <Icon size={14} /> : <Icon className={iconClass} />)}

package/src/ai-elements/conversation.tsx

@@ -101,7 +101,7 @@ export const ConversationEmptyState = ({
   );
 };
 export type ConversationScrollButtonProps = ComponentProps<typeof Button> & {
-  /** Text after the icon; also the button's `aria-label` and `title`. */
+  /** Text after the icon; also the button's `aria-label` and `title`. Without it, the icon-only button's `aria-label` is "Scroll to bottom". */
   label?: string;
   /** Replaces the arrow icon. */
   icon?: ReactNode;
@@ -184,7 +184,9 @@ export const ConversationScrollButton = ({
     hide();
     scrollToBottom();
   };
-  const motionClass = classes?.scrollButtonMotion ?? "absolute bottom-4 left-0 right-0 z-10 flex justify-center";
+  // The full-width row lets clicks through to the messages; the button takes them.
+  const motionClass =
+    classes?.scrollButtonMotion ?? "pointer-events-none absolute bottom-4 left-0 right-0 z-10 flex justify-center";
   const presence = (
     <LazyMotion features={domAnimation}>
       <AnimatePresence initial={false}>
@@ -198,12 +200,16 @@ export const ConversationScrollButton = ({
             transition={defaults?.transition ?? fastTransition}
           >
             <Button
-              className={merge(classes?.scrollButton ?? [flatInteractiveClass, "rounded-full"], className)}
+              className={merge(
+                classes?.scrollButton ?? [flatInteractiveClass, "rounded-full"],
+                "pointer-events-auto",
+                className,
+              )}
               onClick={handleScrollToBottom}
               size={size ?? defaults?.size ?? "icon"}
               type="button"
               variant="outline"
-              {...(label ? { "aria-label": label, title: label } : {})}
+              {...(label ? { "aria-label": label, title: label } : { "aria-label": "Scroll to bottom" })}
               {...props}
             >
               {icon ?? <IconArrowDown className="size-4" />}

package/src/ai-elements/prompt-input.tsx

@@ -105,8 +105,9 @@ const convertBlobUrlToDataUrl = async (url: string): Promise<string | null> => {
  * (added when no `containerClassName` is given), `textarea`, `footer`,
  * `submit` and `tabItem`. `submitIcons` replace the submit
  * button's icon per status; `submitCrossfade` cross-fades between them.
- * `menuTriggerAsChild` makes `PromptInputActionMenuTrigger` the trigger
- * itself rather than a button inside the menu's trigger button.
+ * `menuTriggerAsChild` (default `true`) makes `PromptInputActionMenuTrigger`
+ * the trigger itself; `false` nests its button inside the menu's trigger
+ * button (invalid HTML).
  */
 export interface PromptInputConfig {
   classes?: {
@@ -823,7 +824,7 @@ export const PromptInputFooter = ({
   return (
     <InputGroupAddon
       align="block-end"
-      className={merge(footer ?? "justify-between gap-1", className)}
+      className={merge(footer ?? "justify-between gap-1 max-sm:flex-wrap", className)}
       {...props}
     />
   );
@@ -895,7 +896,7 @@ export const PromptInputActionMenuTrigger = ({
   children,
   ...props
 }: PromptInputActionMenuTriggerProps) => {
-  const asChild = useUiConfig("PromptInput")?.menuTriggerAsChild;
+  const asChild = useUiConfig("PromptInput")?.menuTriggerAsChild ?? true;
   const button = (
     <PromptInputButton className={className} {...props}>
       {children ?? <IconPlus className="size-4" />}

package/src/ui/_menu-parts.tsx

@@ -25,7 +25,7 @@ export interface MenuConfig {
     /** `RadioItem` indicator. */
     radio?: React.ReactNode;
   };
-  /** Default for `Content` `collisionPadding`. */
+  /** Default for `Content` `collisionPadding` (built-in: `8`). */
   collisionPadding?: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
 }
 

package/src/ui/button-group.tsx

@@ -16,7 +16,7 @@ export interface ButtonGroupConfig {
 }
 
 const buttonGroupBaseClasses =
-  "flex w-fit items-stretch focus-visible:*:z-10 focus-visible:*:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 [&>[data-slot=select-trigger]:last-of-type]:has-[select[aria-hidden=true]:last-child]:rounded-r-md has-[>[data-slot=button-group]]:gap-2";
+  "flex w-fit items-stretch focus-visible:*:z-10 focus-visible:*:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 [&>[data-slot=select-trigger]:last-of-type]:has-[select[aria-hidden=true]:last-child]:rounded-r-md has-[>[data-slot=button-group]]:gap-2 max-sm:[&>*]:after:content-none";
 
 const buttonGroupOrientationClasses = {
   horizontal:

package/src/ui/clear-input.tsx

@@ -49,10 +49,10 @@ export interface ClearInputProps extends Omit<
 }
 
 const inputClasses =
-  "flex h-10 w-full rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50";
+  "flex h-10 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50";
 
 const buttonClasses =
-  "absolute right-2 top-1/2 z-4 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.92] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring";
+  "absolute right-2 top-1/2 z-4 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.92] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring max-sm:hit-target";
 
 const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
   ({ animation, clearButton, classes, ...props }, ref) => {

package/src/ui/command.tsx

@@ -150,7 +150,7 @@ const CommandList = React.forwardRef<
   return (
     <CommandPrimitive.List
       ref={ref}
-      className={merge(list ?? "max-h-80 overflow-y-auto overflow-x-hidden pb-2", className)}
+      className={merge(list ?? "max-h-80 max-sm:max-h-[60dvh] overflow-y-auto overflow-x-hidden pb-2", className)}
       {...props}
     />
   );
@@ -225,7 +225,7 @@ const CommandItem = React.forwardRef<
       ref={ref}
       className={merge(
         item ??
-          "relative flex cursor-default gap-2 select-none items-center rounded-menu-item px-2.5 py-2 text-sm outline-none transition-colors data-[disabled=true]:pointer-events-none data-[selected=true]:bg-surface-tertiary/80 data-[selected=true]:text-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+          "relative flex cursor-default gap-2 select-none items-center rounded-menu-item px-2.5 py-2 max-sm:min-h-10 text-sm outline-none transition-colors data-[disabled=true]:pointer-events-none data-[selected=true]:bg-surface-tertiary/80 data-[selected=true]:text-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className,
       )}
       {...props}

package/src/ui/context-menu.tsx

@@ -24,7 +24,7 @@ import { useCn, useUiConfig } from "./ui-config";
 
 /** App defaults for `ContextMenu*` (see `UiConfigProvider`). */
 export interface ContextMenuConfig extends MenuConfig {
-  /** Default for `ContextMenuSubContent` `portal`. */
+  /** Default for `ContextMenuSubContent` `portal` (built-in: `true`). */
   subContentPortal?: boolean;
 }
 
@@ -88,7 +88,7 @@ const ContextMenuSubContent = React.forwardRef<
       {...props}
     />
   );
-  return (portal ?? config?.subContentPortal) ? (
+  return (portal ?? config?.subContentPortal ?? true) ? (
     <ContextMenuPrimitive.Portal>{content}</ContextMenuPrimitive.Portal>
   ) : (
     content
@@ -109,7 +109,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.Content
         ref={ref}
-        collisionPadding={collisionPadding ?? config?.collisionPadding}
+        collisionPadding={collisionPadding ?? config?.collisionPadding ?? 8}
         className={merge(config?.classes?.content ?? [menuContentClass, "w-40"], className)}
         onKeyDown={suppressAltKey ? suppressAltKeyDown(onKeyDown) : onKeyDown}
         {...props}

package/src/ui/dropdown-menu.tsx

@@ -127,7 +127,7 @@ const DropdownMenuContent = React.forwardRef<
         <DropdownMenuPrimitive.Content
           ref={ref}
           sideOffset={sideOffset ?? config?.sideOffset ?? 4}
-          collisionPadding={collisionPadding ?? config?.collisionPadding}
+          collisionPadding={collisionPadding ?? config?.collisionPadding ?? 8}
           className={merge(
             config?.classes?.content ?? menuContentClass,
             fitViewport && fitViewportClass,

package/src/ui/hover-card.tsx

@@ -16,7 +16,7 @@ export interface HoverCardConfig {
   closeDelay?: number;
   /** Default for `HoverCardContent` `sideOffset`. */
   sideOffset?: number;
-  /** Default for `HoverCardContent` `portal`. */
+  /** Default for `HoverCardContent` `portal` (built-in: `true`). */
   portal?: boolean;
 }
 
@@ -40,7 +40,7 @@ const HoverCardTrigger = HoverCardPrimitive.Trigger;
 const HoverCardContent = React.forwardRef<
   React.ComponentRef<typeof HoverCardPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> & {
-    /** Render into `document.body` so a clipping parent cannot cut it off. */
+    /** Render into `document.body` so a clipping parent cannot cut it off (default `true`). */
     portal?: boolean;
   }
 >(({ className, align = "center", sideOffset, portal, ...props }, ref) => {
@@ -62,7 +62,7 @@ const HoverCardContent = React.forwardRef<
       {...props}
     />
   );
-  return (portal ?? config?.portal) ? (
+  return (portal ?? config?.portal ?? true) ? (
     <HoverCardPrimitive.Portal>{content}</HoverCardPrimitive.Portal>
   ) : (
     content

package/src/ui/input-group.tsx

@@ -116,10 +116,10 @@ function InputGroupAddon({
 const inputGroupButtonBaseClasses = "text-sm shadow-none flex gap-2 items-center";
 
 const inputGroupButtonSizeClasses = {
-  xs: "h-7 gap-1 rounded-lg px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-  sm: "h-8 rounded-lg px-2.5 gap-1.5 text-xs has-[>svg]:px-2.5",
-  "icon-xs": "size-7 rounded-lg p-0 has-[>svg]:p-0",
-  "icon-sm": "size-8 rounded-lg p-0 has-[>svg]:p-0",
+  xs: "h-7 gap-1 rounded-lg px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2 max-sm:hit-target",
+  sm: "h-8 rounded-lg px-2.5 gap-1.5 text-xs has-[>svg]:px-2.5 max-sm:hit-target",
+  "icon-xs": "size-7 rounded-lg p-0 has-[>svg]:p-0 max-sm:hit-target",
+  "icon-sm": "size-8 rounded-lg p-0 has-[>svg]:p-0 max-sm:hit-target",
 };
 
 const inputGroupButtonVariants = cva(inputGroupButtonBaseClasses, {

package/src/ui/popover.tsx

@@ -15,7 +15,7 @@ export interface PopoverConfig {
   classes?: { trigger?: string; content?: string };
   /** Default for `PopoverContent` `sideOffset`. */
   sideOffset?: number;
-  /** Default for `PopoverContent` `collisionPadding`. */
+  /** Default for `PopoverContent` `collisionPadding` (built-in: `8`). */
   collisionPadding?: PopoverContentProps["collisionPadding"];
 }
 
@@ -40,22 +40,20 @@ const PopoverContent = React.forwardRef<
   React.ComponentRef<typeof PopoverPrimitive.Content>,
   PopoverContentProps & {
     /**
-     * Grow from the trigger, keep 8px from the viewport edge (unless
-     * `collisionPadding` is set) and, on small screens, cap width and height.
+     * Grow from the trigger and, on small screens, cap width and height.
      */
     fitViewport?: boolean;
   }
 >(({ className, align = "center", sideOffset, fitViewport, collisionPadding, ...props }, ref) => {
   const config = useUiConfig("Popover");
   const merge = useCn();
-  const padding = collisionPadding ?? config?.collisionPadding;
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
         ref={ref}
         align={align}
         sideOffset={sideOffset ?? config?.sideOffset ?? 6}
-        collisionPadding={fitViewport ? (padding ?? 8) : padding}
+        collisionPadding={collisionPadding ?? config?.collisionPadding ?? 8}
         className={merge(
           config?.classes?.content ?? [
             "z-50 w-72 max-sm:max-w-[calc(100vw-2rem)] max-sm:max-h-[85dvh] max-sm:overflow-y-auto p-4 outline-none",

package/src/ui/search-input.tsx

@@ -7,7 +7,7 @@ import { Kbd } from "./kbd";
 import { useCn, useUiConfig } from "./ui-config";
 
 const sizeClasses = {
-  sm: { input: "h-8 pl-8 text-sm", icon: "left-2" },
+  sm: { input: "h-8 pl-8 text-base sm:text-sm", icon: "left-2" },
   md: { input: "h-10 pl-9", icon: "left-3" },
 };
 

package/src/ui/select.tsx

@@ -33,9 +33,9 @@ export interface SelectConfig {
     /** `SelectItem` indicator. */
     check?: React.ReactNode;
   };
-  /** Adds `data-slot="select-trigger"` to the trigger, for parent selectors such as `ButtonGroup`'s. */
+  /** Adds `data-slot="select-trigger"` to the trigger, for parent selectors such as `ButtonGroup`'s (built-in: `true`). */
   triggerSlot?: boolean;
-  /** Default for `SelectContent` `collisionPadding`. */
+  /** Default for `SelectContent` `collisionPadding` (built-in: `8`). */
   collisionPadding?: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
 }
 
@@ -52,7 +52,7 @@ const SelectTrigger = React.forwardRef<
   return (
     <SelectPrimitive.Trigger
       ref={ref}
-      data-slot={config?.triggerSlot ? "select-trigger" : undefined}
+      data-slot={(config?.triggerSlot ?? true) ? "select-trigger" : undefined}
       className={merge(
         config?.classes?.trigger ?? [
           "flex h-10 w-full max-sm:min-w-0 items-center justify-between whitespace-nowrap rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm ring-offset-background placeholder:text-field-placeholder transition-[border-color,box-shadow,background-color] duration-200 ease-smooth disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
@@ -127,10 +127,10 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
         ref={ref}
-        collisionPadding={collisionPadding ?? config?.collisionPadding}
+        collisionPadding={collisionPadding ?? config?.collisionPadding ?? 8}
         className={merge(
           classes?.content ?? [
-            "relative z-50 max-h-96 min-w-32 overflow-hidden outline-none",
+            "relative z-50 max-h-96 max-sm:max-h-[85dvh] min-w-32 overflow-hidden outline-none",
             floatingSurfaceClass,
             floatingSurfaceAnimateClass,
           ],

package/src/ui/sonner.tsx

@@ -135,6 +135,9 @@ function createToasterClassNames({
     // `unstyled` drops sonner's `[data-content]` grow, so the text column grows
     // here and the action and cancel buttons sit at the right edge.
     content: "flex min-w-0 grow flex-col",
+    // `unstyled` also drops sonner's `position: relative` on `[data-icon]`, so
+    // the absolutely positioned `.sonner-loader` anchors here, not to the toast.
+    icon: "relative",
     title: titleLeading === "5" ? "font-medium leading-5" : "font-medium leading-snug",
     description: descriptionMuted
       ? `${descriptionSize} leading-snug text-muted-foreground!`

package/src/ui/tooltip.tsx

@@ -10,7 +10,7 @@ export interface TooltipConfig {
   delayDuration?: number;
   /** Default for `TooltipContent` `sideOffset`. */
   sideOffset?: number;
-  /** Default for `TooltipContent` `portal`. */
+  /** Default for `TooltipContent` `portal` (built-in: `true`). */
   portal?: boolean;
 }
 
@@ -32,7 +32,7 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipContent = React.forwardRef<
   React.ComponentRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
-    /** Render into `document.body` so a clipping parent cannot cut it off. */
+    /** Render into `document.body` so a clipping parent cannot cut it off (default `true`). */
     portal?: boolean;
   }
 >(({ className, sideOffset, portal, ...props }, ref) => {
@@ -50,7 +50,7 @@ const TooltipContent = React.forwardRef<
       {...props}
     />
   );
-  return (portal ?? config?.portal) ? (
+  return (portal ?? config?.portal ?? true) ? (
     <TooltipPrimitive.Portal>{content}</TooltipPrimitive.Portal>
   ) : (
     content

package/tokens/README.md

@@ -13,7 +13,7 @@ Design tokens and shared Tailwind v4 CSS for the vvedantb web apps. The CSS and
 | `@vvedantb/ui/tokens/css/modal.css` | `src/css/modal.css` | `.t-modal`, `.is-open`, `.is-closing` and `t-modal-presence-wait` (`@layer components`). |
 | `@vvedantb/ui/tokens/css/tabs.css` | `src/css/tabs.css` | `.t-tabs` container (0.15.0), `.t-tab` with its press scale, active colour, `.t-tabs-pill`, small-screen `.t-tabs` scrolling. |
 | `@vvedantb/ui/tokens/css/tabs-pills.css` | `src/css/tabs-pills.css` | `--tabs-*` colour variables, `.t-tabs--segmented`, `.t-tabs--pills` and pill hover / active fills. |
-| `@vvedantb/ui/tokens/css/utilities.css` | `src/css/utilities.css` | `@utility hit-target` and `@utility reveal-on-hover`. `rounded-surface` moved to `tokens.css` in 0.7.1. |
+| `@vvedantb/ui/tokens/css/utilities.css` | `src/css/utilities.css` | `@utility hit-target`, `reveal-on-hover`, `motion-press`, `motion-base`, `motion-emphasized` and `scrollbar-none`. The motion utilities read `--motion-fast`, `--motion-base`, `--motion-ease-out` and `--motion-ease-emphasized`, with defaults in the utility. `rounded-surface` moved to `tokens.css` in 0.7.1. |
 | `@vvedantb/ui/tokens/css/scrollbar-thin.css` | `src/css/scrollbar-thin.css` | `.scrollbar-thin` (`@layer utilities`, always emitted). Imported by `tokens.css` from 0.15.0. |
 | `@vvedantb/ui/tokens/css/clear-input.css` | `src/css/clear-input.css` | `ClearInput` layers (`.t-clear*`) and the `--clear-*` / `--glow-*` timings. Imported by `tokens.css`. From 0.15.1 the layers clip in `.t-clear-clip`, so `.t-clear` keeps the focus ring, and the placeholder layer only shows during `.is-clearing`. |
 | `@vvedantb/ui/tokens/css/motion.css` | `src/css/motion.css` | `.ui-page-enter`, `.ui-enter`, `.ui-enter-up`, `.ui-stagger`, their keyframes and reduced-motion rules, and the `html[data-page-motion="off"]` overrides for `PageMotionProvider`. Imported by `tokens.css`. |
@@ -72,7 +72,7 @@ Tailwind inlines an `@import` where it sits, even in the middle of a file (it mu
 | `modal.css` | `--modal-open-dur`, `--modal-close-dur`, `--modal-scale`, `--modal-scale-close`, `--modal-ease` | tokens.css (0.15.0), or app `:root` with the compat file |
 | `tabs.css` | `--tabs-dur`, `--tabs-ease` (tokens.css, or app `:root` with the compat file); `--tabs-text-muted`, `--tabs-text-active`, `--tabs-pill-bg` | colours: tabs-pills.css or the app theme |
 | `tabs-pills.css` | `--muted`, `--segment`, `--segment-foreground`, `--default` | tokens.css or the app theme |
-| `utilities.css` | `--breakpoint-sm` (Tailwind default or app theme) | Tailwind |
+| `utilities.css` | `--breakpoint-sm` (Tailwind default or app theme); optional `--motion-*` | Tailwind |
 | `scrollbar-thin.css` | `--scrollbar` | tokens.css or the app theme |
 | `clear-input.css`, `motion.css` | none (own `:root` defaults) | |
 | `type-scale.css` | none (own `@theme` values) | |

package/tokens/src/css/compat-shadcn-rgb.css

@@ -81,6 +81,16 @@
   border-radius: clamp(0.75rem, var(--radius), 1rem);
 }
 
+@utility rounded-t-surface {
+  border-radius: clamp(0.75rem, var(--radius), 1rem)
+    clamp(0.75rem, var(--radius), 1rem) 0 0;
+}
+
+@utility rounded-b-surface {
+  border-radius: 0 0 clamp(0.75rem, var(--radius), 1rem)
+    clamp(0.75rem, var(--radius), 1rem);
+}
+
 @utility rounded-menu-item {
   border-radius: min(var(--radius), 0.5rem);
 }

package/tokens/src/css/utilities.css

@@ -1,6 +1,13 @@
 /*
  * @vvedantb/ui/tokens/css/utilities.css: Tailwind `@utility` helpers. Generated
  * only when used, and they take variants (e.g. `max-sm:hit-target`).
+ *
+ * The motion utilities read these variables. Set them on :root to change
+ * (defaults shown):
+ *   --motion-fast: 150ms (press feedback)
+ *   --motion-base: 220ms (colour, shadow, opacity)
+ *   --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1)
+ *   --motion-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1)
  */
 
 /* Extends sub-40px controls to a 40x40px tap target without changing layout.
@@ -32,3 +39,52 @@
     }
   }
 }
+
+/* Each motion utility lists `scale`, `translate` and `rotate` as well as
+   `transform`. Tailwind v4 compiles `scale-[0.98]` to `scale: 0.98` and
+   `translate-x-*` to `translate: ...`, the individual transform properties.
+   `transition-property: transform` does not match them, so without them a
+   press or slide would not animate. */
+
+/* Hover and state changes: colour, shadow, opacity and transforms. */
+@utility motion-base {
+  transition-property:
+    color, background-color, border-color, box-shadow, transform, scale,
+    translate, rotate, opacity;
+  transition-duration: var(--motion-base, 220ms);
+  transition-timing-function: var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+/* Movement on screen: transforms, opacity and shadow on the emphasized curve. */
+@utility motion-emphasized {
+  transition-property: transform, scale, translate, rotate, opacity, box-shadow;
+  transition-duration: var(--motion-base, 220ms);
+  transition-timing-function: var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1));
+}
+
+/* Pressable controls: pair with `active:scale-[0.97]`. The press runs on
+   --motion-fast and colour trails on --motion-base. It covers colour too,
+   because Tailwind's `transition-colors` comes later in the sheet at the same
+   specificity and would replace this whole declaration. So call sites need no
+   separate `transition-*` class. */
+@utility motion-press {
+  transition-property:
+    transform, scale, translate, rotate, color, background-color, border-color,
+    box-shadow, opacity, fill, stroke;
+  transition-duration:
+    var(--motion-fast, 150ms), var(--motion-fast, 150ms),
+    var(--motion-fast, 150ms), var(--motion-fast, 150ms),
+    var(--motion-base, 220ms), var(--motion-base, 220ms),
+    var(--motion-base, 220ms), var(--motion-base, 220ms),
+    var(--motion-base, 220ms), var(--motion-base, 220ms),
+    var(--motion-base, 220ms);
+  transition-timing-function: var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+/* Hides the scrollbar. The element still scrolls (wheel, drag, script). */
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

package/tokens/src/tokens.css

@@ -118,6 +118,16 @@
   border-radius: clamp(0.75rem, var(--radius), 1rem);
 }
 
+@utility rounded-t-surface {
+  border-radius: clamp(0.75rem, var(--radius), 1rem)
+    clamp(0.75rem, var(--radius), 1rem) 0 0;
+}
+
+@utility rounded-b-surface {
+  border-radius: 0 0 clamp(0.75rem, var(--radius), 1rem)
+    clamp(0.75rem, var(--radius), 1rem);
+}
+
 @utility rounded-menu-item {
   border-radius: min(var(--radius), 0.5rem);
 }