@botiverse/raft-ui 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [0.13.0](https://github.com/botiverse/raft-design/compare/v0.12.0...v0.13.0) (2026-10-21)
+
+### Added
+
+- Tokens `fill-row-hover` (4% ink light, 3% dark), `fill-message-hover` (3% / 2.2%) and `fill-row-open` (5% / 4%), with utilities `row-hover-overlay` and `row-open-overlay`. ([#641](https://github.com/botiverse/raft-design/pull/641), [#643](https://github.com/botiverse/raft-design/pull/643))
+
+### Changed
+
+- Rows hover with their own light step instead of the press overlay (`fill-pressed`, 7.8%): messages with `fill-message-hover`; sidebar items, list, inbox, search, table and file rows with `fill-row-hover`. Hover stays lighter than selection; press is unchanged. ([#641](https://github.com/botiverse/raft-design/pull/641))
+- A row with its menu open (right-click, ⋯ menu, phone long-press) takes `fill-row-open`, the one marker of which row the menu belongs to; selection still wins. Comment cards hover with `fill-row-hover`. ([#643](https://github.com/botiverse/raft-design/pull/643))
+- Select and Combobox default `collisionPadding` to 8px. ([#642](https://github.com/botiverse/raft-design/pull/642))
+
+### Fixed
+
+- Long values stay inside form fields on narrow screens: Field labels, descriptions and errors wrap; a FieldItem label next to a checkbox, radio or switch shrinks; an InputGroup text prefix takes at most half the field and truncates; SelectValue, ComboboxSelect values and chips truncate with the full value as `title`; options wrap to 2 lines then clamp; Select and Combobox popups never get wider than the screen less 8px each side. ([#642](https://github.com/botiverse/raft-design/pull/642))
+
 ## [0.12.0](https://github.com/botiverse/raft-design/compare/v0.11.0...v0.12.0) (2026-10-21)
 
 ### Breaking

package/dist/components/combobox-select/combobox-select.css

@@ -77,6 +77,15 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* An option wraps onto a second line before it is cut off, so two long values
+   that share a beginning can still be told apart (forms.md#long-values-in-fields). */
+.r-combobox-select__option .r-combobox-select__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
 .r-combobox-select__actions {
   display: inline-flex;
   align-items: center;
@@ -163,7 +172,7 @@
   box-sizing: border-box;
   width: 100%;
   min-height: 36px;
-  padding: 0 10px;
+  padding: 6px 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;

package/dist/foundation.css

@@ -11,7 +11,10 @@
                  hairline < seam < strong for line
      layer = places on the elevation ladder; fill = neutral interaction fills
      (resting/hover/active/disabled surfaces): fill-muted and fill-strong are
-     opaque, the -pressed overlays are translucent ink laid over a surface.
+     opaque, the -pressed and -hover overlays are translucent ink laid over a
+     surface (a row hovers with fill-row-hover or fill-message-hover, and a
+     row with its menu open takes fill-row-open, all lighter than any
+     selection tint; press keeps fill-pressed).
    Families:  {family}(-{slot})
      family = brand | attention | info | success | warning | danger | inactive
      slot   = -strong (deep shade: readable text, rings) > bare (solid fill)
@@ -21,8 +24,8 @@
                 an opted-in family always gets both)
    Washes:    ink-{alpha%} (2..40) — neutral overlays, hairlines, hover fills.
    Opacity rule: layer tokens are opaque in every theme, except the two
-   backdrops (overlays by contract); among fills only the -pressed overlays are
-   translucent.
+   backdrops (overlays by contract); among fills only the -pressed and -hover
+   overlays are translucent.
    Interaction fills: transparent resting → ink-N directly; solid family fill →
    the family's -hover/-active pair; neutral or tinted surface → step up its ladder.
    Escape hatches: ink ramp for one-off washes; inline oklch() literals for
@@ -168,6 +171,19 @@
   --fill-strong: oklch(0.936 0.0006 17.62);
   --fill-frame-pressed: oklch(0.1813 0.005 17.62 / 0.122);
   --fill-pressed: oklch(0.1813 0.005 17.62 / 0.078);
+  /* Hover on a whole row (sidebar, list, inbox, search result, table, file row):
+     one perceptible step (OKLab dE about 2.8 in both modes), below every
+     selection tint, so text keeps its contrast. */
+  --fill-row-hover: oklch(0.1813 0.005 17.62 / 0.04);
+  /* Hover on a message: the lightest perceptible step (OKLab dE about 2.1 in
+     both modes), because a message is a large block someone reads with the
+     pointer resting on it. */
+  --fill-message-hover: oklch(0.1813 0.005 17.62 / 0.03);
+  /* Any row with its menu open (right-click, its menu button, press and hold):
+     one step over a hover (OKLab dE 3.4 to 4.3 on every row surface), because on
+     a phone, which has no hover, it is the only sign of which row the menu acts
+     on. Still under info-soft and brand-soft on every surface. */
+  --fill-row-open: oklch(0.1813 0.005 17.62 / 0.05);
   --line-strong: oklch(0.1813 0.005 17.62);
   --line-seam: oklch(0.1813 0.005 17.62 / 0.451);
   --line-hairline: oklch(0.1813 0.005 17.62 / 0.149);
@@ -326,6 +342,9 @@
   --fill-strong: oklch(0.3474 0.0051 106.66);
   --fill-frame-pressed: oklch(0.9843 0.004 106.47 / 0.078);
   --fill-pressed: oklch(0.9843 0.004 106.47 / 0.078);
+  --fill-row-hover: oklch(0.9843 0.004 106.47 / 0.03);
+  --fill-message-hover: oklch(0.9843 0.004 106.47 / 0.022);
+  --fill-row-open: oklch(0.9843 0.004 106.47 / 0.04);
   --line-strong: oklch(0.9211 0.004 106.48);
   --line-seam: oklch(0.9843 0.004 106.47 / 0.259);
   --line-hairline: oklch(0.9843 0.004 106.47 / 0.102);
@@ -407,6 +426,9 @@
     --fill-strong: oklch(0.3474 0.0051 106.66);
     --fill-frame-pressed: oklch(0.9843 0.004 106.47 / 0.078);
     --fill-pressed: oklch(0.9843 0.004 106.47 / 0.078);
+    --fill-row-hover: oklch(0.9843 0.004 106.47 / 0.03);
+    --fill-message-hover: oklch(0.9843 0.004 106.47 / 0.022);
+    --fill-row-open: oklch(0.9843 0.004 106.47 / 0.04);
     --line-strong: oklch(0.9211 0.004 106.48);
     --line-seam: oklch(0.9843 0.004 106.47 / 0.259);
     --line-hairline: oklch(0.9843 0.004 106.47 / 0.102);

package/dist/index.d.mts

@@ -1254,7 +1254,7 @@ export declare function InputGroup({ className, ...props }: InputGroupProps): im
 type InputGroupAddonProps = ComponentPropsWithRef<"div"> & Pick<VariantProps<typeof inputGroup>, "align" | "variant">;
 declare function InputGroupAddonRoot({ align, variant, className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
 type InputGroupAddonTextProps = ComponentPropsWithRef<"span"> & Pick<VariantProps<typeof inputGroup>, "align" | "variant">;
-declare function TextAddon({ align, variant, className, ...props }: InputGroupAddonTextProps): import("react").JSX.Element;
+declare function TextAddon({ align, variant, className, ref, title, ...props }: InputGroupAddonTextProps): import("react").JSX.Element;
 export declare const InputGroupAddon: typeof InputGroupAddonRoot & {
   Text: typeof TextAddon;
 };
@@ -1315,7 +1315,7 @@ export declare function ComboboxCollection(props: ComboboxCollectionProps): impo
 type ComboboxChipsProps = StyledProps<Combobox$1.Chips.Props>;
 export declare function ComboboxChips({ className, ...props }: ComboboxChipsProps): import("react").JSX.Element;
 type ComboboxChipProps = StyledProps<Combobox$1.Chip.Props>;
-export declare function ComboboxChip({ className, ...props }: ComboboxChipProps): import("react").JSX.Element;
+export declare function ComboboxChip({ className, ref, title, ...props }: ComboboxChipProps): import("react").JSX.Element;
 type ComboboxChipRemoveProps = StyledProps<Combobox$1.ChipRemove.Props>;
 export declare function ComboboxChipRemove({ className, children, ...props }: ComboboxChipRemoveProps): import("react").JSX.Element;
 //#endregion
@@ -1337,7 +1337,7 @@ export declare function Select<Value, Multiple extends boolean | undefined = fal
 type SelectTriggerProps = StyledProps<Select$1.Trigger.Props> & DataAttributes$1;
 export declare function SelectTrigger({ className, children, render, "data-invalid": dataInvalid, ...props }: SelectTriggerProps): import("react").JSX.Element;
 type SelectValueProps = StyledProps<Select$1.Value.Props>;
-export declare function SelectValue({ className, ...props }: SelectValueProps): import("react").JSX.Element;
+export declare function SelectValue({ className, ref, title, ...props }: SelectValueProps): import("react").JSX.Element;
 type SelectIconProps = StyledProps<Select$1.Icon.Props>;
 export declare function SelectIcon({ className, children, ...props }: SelectIconProps): import("react").JSX.Element;
 type SelectPortalProps = Select$1.Portal.Props;
@@ -1357,7 +1357,7 @@ export declare function SelectItemLeading({ className, ...props }: SelectItemLea
 type SelectItemIndicatorProps = StyledProps<Select$1.ItemIndicator.Props>;
 export declare function SelectItemIndicator({ className, children, ...props }: SelectItemIndicatorProps): import("react").JSX.Element;
 type SelectItemTextProps = StyledProps<Select$1.ItemText.Props>;
-export declare function SelectItemText({ className, id, ...props }: SelectItemTextProps): import("react").JSX.Element;
+export declare function SelectItemText({ className, id, ref, title, ...props }: SelectItemTextProps): import("react").JSX.Element;
 type SelectItemDescriptionProps = StyledProps<ComponentPropsWithRef<"span">>;
 /**
  * A second line under an option's label: what it means, not its name again.

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { cn } from "./cn.mjs";
-import { $ as MessageReactionTooltipNameText, $t as DropdownMenuShortcut, A as MessageTextSelectionToolbarButton, An as DialogClose, At as MessageItem, B as MessageReferenceUnavailable, Bn as DialogTrigger, Bt as DropdownMenuCheckboxItemIndicator, C as MessageQuotedPreviewUnavailable, Cn as TooltipContent, Ct as MessageItemEdited, D as MessageEmbedHeader, Dn as Badge, Dt as MessageItemAvatarSlot, E as MessageEmbedFooter, En as TooltipTrigger, Et as MessageItemSearchMatch, F as MessageReferenceChip, Fn as DialogNav, Ft as AvatarGroup, G as MessageReactionGlyph, Gn as useParentOverlayKind, Gt as DropdownMenuItemLabel, H as MessageReactionChip, Hn as buttonVariants, Ht as DropdownMenuFooter, I as MessageReferenceIndicator, In as DialogOverlay, It as AvatarGroupCount, J as MessageReactionQuickButton, Jn as useThemeScopeProps, Jt as DropdownMenuPortal, K as MessageReactionPickerContent, Kn as withOverlayLayer, Kt as DropdownMenuLabel, L as MessageReferenceLabel, Ln as DialogPortal, Lt as AvatarImage, M as MessageMultiSelect, Mn as DialogDescription, Mt as Avatar, N as MessageMultiSelectCheckbox, Nn as DialogFooter, Nt as AvatarBadge, O as messageEmbed, On as Dialog, Ot as MessageItemContinuationTime, P as MessageMultiSelectToolbar, Pn as DialogHeader, Pt as AvatarFallback, Q as MessageReactionTooltipName, Qt as DropdownMenuSeparator, R as MessageReferencePending, Rn as DialogSurface, Rt as DropdownMenu, S as MessageQuotedPreviewTimestamp, Sn as Tooltip, St as MessageItemContent, T as MessageEmbedContent, Tn as TooltipProvider, Tt as MessageItemFooter, U as MessageReactionCount, Un as Spinner, Ut as DropdownMenuItem, V as MessageReactionAddButton, Vn as Button, Vt as DropdownMenuContent, W as MessageReactionErrorIndicator, Wn as defaultNativeButton, Wt as DropdownMenuItemCount, X as MessageReactionTooltipContent, Xn as ThemeStateContext, Xt as DropdownMenuRadioItem, Y as MessageReactionQuickRow, Yn as useTheme, Yt as DropdownMenuRadioGroup, Z as MessageReactionTooltipMeta, Zn as tv, Zt as DropdownMenuRadioItemIndicator, _ as MessageQuotedPreviewContent, _n as ScrollAreaViewport, _t as MessageItemSenderButton, a as MessageListDateDivider, an as Panel, at as MessageItemSavedIndicator, b as MessageQuotedPreviewText, bn as CheckboxIndicator, bt as MessageItemAttachments, c as MessageList, cn as PanelHeaderRoot, d as MessageQuotedPreviewAttachments, dn as PanelSection, en as DropdownMenuSubmenu, et as MessageReactionTooltipNames, f as MessageQuotedPreviewAuthor, fn as ScrollArea, ft as MessageItemHeader, g as MessageQuotedPreviewChannel, gn as ScrollAreaThumb, gt as MessageItemSenderBadges, h as MessageQuotedPreviewAuthorName, hn as ScrollAreaScrollbar, ht as MessageItemSender, in as KbdGroup, it as MessageItemReadReceipt, j as MessageTextSelectionToolbarSeparator, jn as DialogContent, jt as searchHit, k as MessageTextSelectionToolbar, kn as DialogBody, kt as MessageItemGutter, l as MessageQuotedPreview, ln as PanelScrollContent, m as MessageQuotedPreviewAuthorMeta, mn as ScrollAreaCorner, mt as MessageItemMeta, nn as DropdownMenuTrigger, nt as MessageItemBadge, o as MessageListHistoryLimited, on as PanelBody, ot as MessageItemToolbar, pn as ScrollAreaContent, pt as MessageItemInlineStatus, q as MessageReactionPickerStatic, qn as resolveThemeScopeProps, qt as DropdownMenuPopup, rn as Kbd, rt as MessageItemBadgeSeparator, s as MessageListNotice, sn as PanelFooter, st as MessageItemToolbarButton, tn as DropdownMenuSubmenuTrigger, tt as MessageReactionTooltipSeparator, u as MessageQuotedPreviewAttachment, un as PanelScrollViewport, v as MessageQuotedPreviewHeader, vn as useMobileViewport, vt as MessageItemSenderGroup, w as MessageEmbed, wn as TooltipPortal, wt as MessageItemEmbedded, x as MessageQuotedPreviewThread, xn as PRESENCE_COLOR, xt as MessageItemBody, y as MessageQuotedPreviewLoading, yn as Checkbox, yt as MessageItemTime, z as MessageReferenceText, zn as DialogTitle, zt as DropdownMenuCheckboxItem } from "./message-list-CxawdwMF.mjs";
+import { $ as MessageReactionTooltipNameText, $t as DropdownMenuSeparator, A as MessageTextSelectionToolbarButton, An as DialogBody, At as MessageItem, B as MessageReferenceUnavailable, Bn as DialogTitle, Bt as DropdownMenuCheckboxItem, C as MessageQuotedPreviewUnavailable, Cn as Tooltip, Ct as MessageItemEdited, D as MessageEmbedHeader, Dn as TooltipTrigger, Dt as MessageItemAvatarSlot, E as MessageEmbedFooter, En as TooltipProvider, Et as MessageItemSearchMatch, F as MessageReferenceChip, Fn as DialogHeader, Ft as AvatarGroup, G as MessageReactionGlyph, Gn as defaultNativeButton, Gt as DropdownMenuItemCount, H as MessageReactionChip, Hn as Button, Ht as DropdownMenuContent, I as MessageReferenceIndicator, In as DialogNav, It as AvatarGroupCount, J as MessageReactionQuickButton, Jn as resolveThemeScopeProps, Jt as DropdownMenuPopup, K as MessageReactionPickerContent, Kn as useParentOverlayKind, Kt as DropdownMenuItemLabel, L as MessageReferenceLabel, Ln as DialogOverlay, Lt as AvatarImage, M as MessageMultiSelect, Mn as DialogContent, Mt as Avatar, N as MessageMultiSelectCheckbox, Nn as DialogDescription, Nt as AvatarBadge, O as messageEmbed, On as Badge, Ot as MessageItemContinuationTime, P as MessageMultiSelectToolbar, Pn as DialogFooter, Pt as AvatarFallback, Q as MessageReactionTooltipName, Qn as tv, Qt as DropdownMenuRadioItemIndicator, R as MessageReferencePending, Rn as DialogPortal, Rt as useOverflowTitle, S as MessageQuotedPreviewTimestamp, Sn as PRESENCE_COLOR, St as MessageItemContent, T as MessageEmbedContent, Tn as TooltipPortal, Tt as MessageItemFooter, U as MessageReactionCount, Un as buttonVariants, Ut as DropdownMenuFooter, V as MessageReactionAddButton, Vn as DialogTrigger, Vt as DropdownMenuCheckboxItemIndicator, W as MessageReactionErrorIndicator, Wn as Spinner, Wt as DropdownMenuItem, X as MessageReactionTooltipContent, Xn as useTheme, Xt as DropdownMenuRadioGroup, Y as MessageReactionQuickRow, Yn as useThemeScopeProps, Yt as DropdownMenuPortal, Z as MessageReactionTooltipMeta, Zn as ThemeStateContext, Zt as DropdownMenuRadioItem, _ as MessageQuotedPreviewContent, _n as ScrollAreaThumb, _t as MessageItemSenderButton, a as MessageListDateDivider, an as KbdGroup, at as MessageItemSavedIndicator, b as MessageQuotedPreviewText, bn as Checkbox, bt as MessageItemAttachments, c as MessageList, cn as PanelFooter, d as MessageQuotedPreviewAttachments, dn as PanelScrollViewport, en as DropdownMenuShortcut, et as MessageReactionTooltipNames, f as MessageQuotedPreviewAuthor, fn as PanelSection, ft as MessageItemHeader, g as MessageQuotedPreviewChannel, gn as ScrollAreaScrollbar, gt as MessageItemSenderBadges, h as MessageQuotedPreviewAuthorName, hn as ScrollAreaCorner, ht as MessageItemSender, in as Kbd, it as MessageItemReadReceipt, j as MessageTextSelectionToolbarSeparator, jn as DialogClose, jt as searchHit, k as MessageTextSelectionToolbar, kn as Dialog, kt as MessageItemGutter, l as MessageQuotedPreview, ln as PanelHeaderRoot, m as MessageQuotedPreviewAuthorMeta, mn as ScrollAreaContent, mt as MessageItemMeta, nn as DropdownMenuSubmenuTrigger, nt as MessageItemBadge, o as MessageListHistoryLimited, on as Panel, ot as MessageItemToolbar, pn as ScrollArea, pt as MessageItemInlineStatus, q as MessageReactionPickerStatic, qn as withOverlayLayer, qt as DropdownMenuLabel, rn as DropdownMenuTrigger, rt as MessageItemBadgeSeparator, s as MessageListNotice, sn as PanelBody, st as MessageItemToolbarButton, tn as DropdownMenuSubmenu, tt as MessageReactionTooltipSeparator, u as MessageQuotedPreviewAttachment, un as PanelScrollContent, v as MessageQuotedPreviewHeader, vn as ScrollAreaViewport, vt as MessageItemSenderGroup, w as MessageEmbed, wn as TooltipContent, wt as MessageItemEmbedded, x as MessageQuotedPreviewThread, xn as CheckboxIndicator, xt as MessageItemBody, y as MessageQuotedPreviewLoading, yn as useMobileViewport, yt as MessageItemTime, z as MessageReferenceText, zn as DialogSurface, zt as DropdownMenu } from "./message-list-DP03T8gF.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Copy, FileText, Image, Info, Upload, X, Zap } from "lucide-react";
 import { Children, cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -1056,9 +1056,9 @@ const listRow = tv({
 		},
 		interactive: {
 			true: { root: [
-				"not-disabled:not-aria-disabled:not-data-selected:hover:press-overlay",
+				"not-disabled:not-aria-disabled:not-data-selected:hover:row-hover-overlay",
 				"not-disabled:not-aria-disabled:not-data-selected:active:press-overlay",
-				"not-data-selected:data-popup-open:press-overlay"
+				"not-data-selected:data-popup-open:row-open-overlay not-disabled:not-aria-disabled:not-data-selected:data-popup-open:hover:row-open-overlay"
 			] },
 			false: {}
 		},
@@ -1972,7 +1972,7 @@ const sidebarItemRecipe = tv({
 	},
 	variants: {
 		interactive: {
-			true: { sidebarItem: ["hover:bg-fill-pressed active:bg-fill-pressed not-data-active:data-popup-open:bg-fill-pressed", "focus-visible:shadow-focus"] },
+			true: { sidebarItem: ["hover:bg-fill-row-hover active:bg-fill-pressed not-data-active:data-popup-open:bg-fill-row-open", "focus-visible:shadow-focus"] },
 			false: { sidebarItem: "cursor-default" }
 		},
 		wrap: {
@@ -3686,17 +3686,26 @@ const field = tv({
 		root: ["group/field flex flex-col gap-1.5"],
 		item: [
 			"group/field-item flex items-start gap-2",
+			"*:min-w-0",
 			"*:data-[slot=checkbox]:mt-[calc((1lh-1.25rem)/2)]",
 			"*:data-[slot=radio-group-item]:mt-[calc((1lh-1.25rem)/2)]",
 			"*:data-[slot=switch]:mt-[calc((1lh-1.875rem)/2)]"
 		],
 		label: [
-			"block",
+			"block wrap-anywhere",
 			"group-data-disabled/field:text-foreground-disabled",
 			"font-sans font-semibold text-foreground-muted"
 		],
-		description: ["group-data-disabled/field:text-foreground-disabled", "text-caption text-foreground-hint"],
-		error: ["group-data-disabled/field:text-foreground-disabled", "text-caption font-semibold text-danger-strong"]
+		description: [
+			"wrap-anywhere",
+			"group-data-disabled/field:text-foreground-disabled",
+			"text-caption text-foreground-hint"
+		],
+		error: [
+			"wrap-anywhere",
+			"group-data-disabled/field:text-foreground-disabled",
+			"text-caption font-semibold text-danger-strong"
+		]
 	},
 	variants: { size: {
 		sm: {
@@ -3786,8 +3795,8 @@ const inputGroup = tv({
 			"[&>svg:not([class*='size-'])]:size-4.5"
 		],
 		text: [
-			"flex shrink-0 items-center px-3",
-			"select-none whitespace-nowrap",
+			"block min-w-0 max-w-1/2 shrink-0 content-center truncate px-3",
+			"select-none",
 			"font-mono text-mono-code",
 			"text-(--ig-text-fg,var(--ig-text-fg-default,var(--foreground-hint)))"
 		],
@@ -3895,12 +3904,15 @@ function InputGroupAddonRoot({ align = "inline-start", variant = "default", clas
 		...props
 	});
 }
-function TextAddon({ align = "inline-start", variant = "default", className, ...props }) {
+function TextAddon({ align = "inline-start", variant = "default", className, ref, title, ...props }) {
 	const { text } = inputGroup({
 		align,
 		variant
 	});
+	const overflowRef = useOverflowTitle(ref, title);
 	return /* @__PURE__ */ jsx("span", {
+		ref: overflowRef,
+		title,
 		"data-slot": "input-group-text",
 		"data-align": align,
 		"data-variant": variant,
@@ -3977,6 +3989,7 @@ const combobox = tv({
 		positioner: ["isolate z-50 outline-none"],
 		content: [
 			"h-auto max-h-(--available-height) min-w-[220px] overflow-hidden",
+			"max-w-[min(var(--available-width),max(var(--anchor-width),24rem))]",
 			"outline-none",
 			"rounded-container bg-layer-popover text-foreground",
 			"shadow-float ring-1 ring-line-seam"
@@ -3987,8 +4000,8 @@ const combobox = tv({
 		item: [
 			"flex w-full shrink-0 cursor-default select-none items-center justify-between overflow-hidden",
 			"text-left outline-none transition-colors",
-			"min-h-9 gap-2.5 rounded-control px-2.5 py-0",
-			"font-sans text-callout font-medium text-foreground",
+			"min-h-9 gap-2.5 rounded-control px-2.5 py-1.5",
+			"font-sans text-callout font-medium text-foreground wrap-anywhere",
 			"bg-transparent hover:bg-brand-soft data-highlighted:bg-brand-soft",
 			"data-selected:font-bold",
 			"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
@@ -4016,12 +4029,13 @@ const combobox = tv({
 			"transition-shadow duration-90 ease-out has-focus-visible:shadow-focus"
 		],
 		chip: [
-			"inline-flex items-center",
+			"inline-flex min-w-0 max-w-full items-center overflow-hidden",
+			"[&>:not([data-slot=combobox-chip-remove])]:min-w-0 [&>:not([data-slot=combobox-chip-remove])]:truncate",
 			"h-7 gap-1.5 rounded-chip bg-fill-muted pr-0.5 pl-2",
 			"text-footnote font-semibold text-foreground"
 		],
 		chipRemove: [
-			"inline-flex items-center justify-center outline-none transition-colors",
+			"inline-flex shrink-0 items-center justify-center outline-none transition-colors",
 			"size-[22px] rounded-sticker text-foreground-hint",
 			"hover:bg-fill-pressed active:bg-fill-pressed focus-visible:shadow-focus",
 			"[&>svg]:size-3.5"
@@ -4202,7 +4216,7 @@ function ComboboxSeparator({ className, ...props }) {
 		...props
 	});
 }
-function ComboboxContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, initialFocus = false, finalFocus = false, ...props }) {
+function ComboboxContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding = 8, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, initialFocus = false, finalFocus = false, ...props }) {
 	const { positioner, content } = combobox();
 	return /* @__PURE__ */ jsx(ComboboxPortal, {
 		...portalProps,
@@ -4322,9 +4336,12 @@ function ComboboxChips({ className, ...props }) {
 		...props
 	});
 }
-function ComboboxChip({ className, ...props }) {
+function ComboboxChip({ className, ref, title, ...props }) {
 	const { chip } = combobox();
+	const overflowRef = useOverflowTitle(ref, title);
 	return /* @__PURE__ */ jsx(Combobox$1.Chip, {
+		ref: overflowRef,
+		title,
 		"data-slot": "combobox-chip",
 		className: chip({ className }),
 		...props
@@ -4403,6 +4420,7 @@ const select = tv({
 		positioner: ["isolate z-50 outline-none"],
 		content: [
 			"relative max-h-(--available-height) min-w-[max(var(--anchor-width),220px)] overflow-hidden",
+			"max-w-[min(var(--available-width),max(var(--anchor-width),24rem))]",
 			"outline-none",
 			"rounded-container bg-layer-popover p-1.5 text-foreground",
 			"shadow-float ring-1 ring-line-seam"
@@ -4429,9 +4447,9 @@ const select = tv({
 			"[&>svg:not([class*='stroke-'])]:stroke-2"
 		],
 		itemIndicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center", "text-foreground [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-2 [&>svg_*]:stroke-2"],
-		itemText: ["min-w-0 flex-1 truncate"],
+		itemText: ["min-w-0 flex-1 line-clamp-2 wrap-anywhere"],
 		itemDescription: [
-			"order-last min-w-0 basis-full",
+			"order-last min-w-0 basis-full wrap-anywhere",
 			"[[data-slot=select-item-leading]~&]:ps-[calc(--spacing(4)+--spacing(2.5))]",
 			"font-sans text-caption font-normal text-foreground-hint"
 		],
@@ -4510,9 +4528,12 @@ function SelectTrigger({ className, children, render, "data-invalid": dataInvali
 		})
 	});
 }
-function SelectValue({ className, ...props }) {
+function SelectValue({ className, ref, title, ...props }) {
 	const { value } = select();
+	const overflowRef = useOverflowTitle(ref, title);
 	return /* @__PURE__ */ jsx(Select$1.Value, {
+		ref: overflowRef,
+		title,
 		"data-slot": "select-value",
 		className: value({ className }),
 		...props
@@ -4545,7 +4566,7 @@ function SelectPopup({ className, ...props }) {
 		...props
 	});
 }
-function SelectContent({ align = "start", alignItemWithTrigger = false, alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, ...props }) {
+function SelectContent({ align = "start", alignItemWithTrigger = false, alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding = 8, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, ...props }) {
 	const { positioner, content } = select();
 	const positionerNode = /* @__PURE__ */ jsx(Select$1.Positioner, {
 		align,
@@ -4623,8 +4644,9 @@ function SelectItemIndicator({ className, children, ...props }) {
 		children: children ?? defaultIndicator
 	});
 }
-function SelectItemText({ className, id, ...props }) {
+function SelectItemText({ className, id, ref, title, ...props }) {
 	const { itemText } = select();
+	const overflowRef = useOverflowTitle(ref, title);
 	const generatedId = useId();
 	const textId = id ?? generatedId;
 	const setTextId = useContext(SelectItemPartsContext)?.setTextId;
@@ -4633,6 +4655,8 @@ function SelectItemText({ className, id, ...props }) {
 		return () => setTextId?.(void 0);
 	}, [setTextId, textId]);
 	return /* @__PURE__ */ jsx(Select$1.ItemText, {
+		ref: overflowRef,
+		title,
 		id: textId,
 		"data-slot": "select-item-text",
 		className: itemText({ className }),
@@ -8063,8 +8087,13 @@ function OtterIndicator({ status, className, ...props }) {
 const table = tv({ slots: {
 	root: ["w-full border-collapse caption-bottom", "font-sans text-callout text-foreground"],
 	header: [],
-	body: ["[&>tr:last-child>td]:border-b-0 [&>tr:last-child>th]:border-b-0", "[&>tr]:hover:bg-fill-pressed"],
-	row: ["aria-selected:bg-info-soft aria-selected:hover:bg-info-soft", "data-[selected=true]:bg-info-soft data-[selected=true]:hover:bg-info-soft"],
+	body: ["[&>tr:last-child>td]:border-b-0 [&>tr:last-child>th]:border-b-0", "[&>tr]:hover:bg-fill-row-hover"],
+	row: [
+		"not-aria-selected:not-data-[selected=true]:data-popup-open:bg-fill-row-open",
+		"not-aria-selected:not-data-[selected=true]:has-data-popup-open:bg-fill-row-open",
+		"aria-selected:bg-info-soft aria-selected:hover:bg-info-soft",
+		"data-[selected=true]:bg-info-soft data-[selected=true]:hover:bg-info-soft"
+	],
 	head: [
 		"text-left whitespace-nowrap",
 		"border-b border-line-hairline px-3 py-2",
@@ -8425,7 +8454,8 @@ const files = tv({ slots: {
 		"group/file-row flex w-full min-w-0 gap-3 px-3",
 		"transition-colors",
 		"items-center rounded-container border border-line-hairline bg-layer-card py-2.5 pr-1.5 pl-2.5 shadow-none",
-		"[@media(hover:hover)]:has-[[data-slot=file-row-open]:hover]:press-overlay has-[[data-slot=file-row-open]:active]:press-overlay",
+		"[@media(hover:hover)]:has-[[data-slot=file-row-open]:hover]:row-hover-overlay has-[[data-slot=file-row-open]:active]:press-overlay",
+		"has-data-popup-open:row-open-overlay",
 		"has-[[data-slot=file-row-open]:focus-visible]:shadow-focus"
 	],
 	rowOpen: [
@@ -15716,7 +15746,8 @@ const inboxItem = tv({
 			"[[data-slot=inbox-item]+&]:before:block has-data-[slot=inbox-item-selection]:before:left-11",
 			"has-data-[slot=inbox-item-leading]:before:left-16",
 			"has-data-[slot=inbox-item-selection]:has-data-[slot=inbox-item-leading]:before:left-23",
-			"hover:bg-fill-pressed",
+			"hover:bg-fill-row-hover",
+			"not-data-[active=true]:data-popup-open:bg-fill-row-open not-data-[active=true]:has-data-popup-open:bg-fill-row-open",
 			"data-[active=true]:bg-info-soft data-[active=true]:hover:bg-info-soft",
 			"data-disabled:pointer-events-none data-disabled:hover:bg-transparent",
 			"has-[[data-slot=inbox-item-open]:focus-visible]:keyboard:inset-ring-2 has-[[data-slot=inbox-item-open]:focus-visible]:keyboard:inset-ring-foreground",
@@ -16201,7 +16232,8 @@ const searchEntity = tv({ slots: {
 		"relative rounded-none border-0 bg-transparent px-4 py-3 text-foreground shadow-none",
 		"max-md:min-h-16",
 		"not-first:before:absolute not-first:before:top-0 not-first:before:right-0 not-first:before:left-[55px] not-first:before:border-t not-first:before:border-line-hairline",
-		"hover:bg-fill-pressed active:bg-fill-pressed",
+		"hover:bg-fill-row-hover active:bg-fill-pressed",
+		"not-data-[selected=true]:data-popup-open:bg-fill-row-open",
 		"disabled:cursor-default disabled:hover:bg-transparent disabled:active:bg-transparent",
 		"data-[selected=true]:bg-brand-soft data-[selected=true]:hover:bg-brand-soft",
 		"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"
@@ -16340,7 +16372,8 @@ const searchMessage = tv({ slots: {
 		"w-full text-left transition-colors",
 		"relative block rounded-none border-0 bg-transparent px-4 py-3 text-foreground shadow-none",
 		"not-first:before:absolute not-first:before:top-0 not-first:before:right-0 not-first:before:left-4 not-first:before:border-t not-first:before:border-line-hairline",
-		"hover:bg-fill-pressed active:bg-fill-pressed",
+		"hover:bg-fill-row-hover active:bg-fill-pressed",
+		"not-data-[selected=true]:data-popup-open:bg-fill-row-open",
 		"disabled:cursor-default disabled:hover:bg-transparent disabled:active:bg-transparent",
 		"data-[selected=true]:bg-brand-soft data-[selected=true]:hover:bg-brand-soft",
 		"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"

package/dist/{message-list-CxawdwMF.mjs → message-list-DP03T8gF.mjs}

@@ -1524,6 +1524,52 @@ function DropdownMenuCheckboxItemIndicator({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/lib/use-overflow-title.ts
+function cut(element) {
+	return element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1;
+}
+function assign(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
+/**
+* Gives a value that is cut off (an ellipsis, a clamp) its whole text as its
+* `title`, and takes it away again when the value fits: a value that shows in
+* full needs no tooltip repeating it (design/patterns/forms.md#long-values-in-fields).
+* It watches the element and its children, so a part whose text sits in a
+* child that truncates (a chip's label) is covered too. A `title` the caller
+* passes wins, and is never touched.
+*/
+function useOverflowTitle(ref, title) {
+	const cleanup = useRef(void 0);
+	const own = title !== void 0;
+	return useCallback((node) => {
+		cleanup.current?.();
+		cleanup.current = void 0;
+		assign(ref, node);
+		const view = node?.ownerDocument.defaultView;
+		if (!node || own || !view || !("ResizeObserver" in view)) return;
+		const update = () => {
+			const text = node.textContent?.trim() ?? "";
+			if (text && (cut(node) || Array.from(node.children).some(cut))) node.title = text;
+			else node.removeAttribute("title");
+		};
+		const resize = new view.ResizeObserver(update);
+		resize.observe(node);
+		for (const child of Array.from(node.children)) resize.observe(child);
+		const mutation = new view.MutationObserver(update);
+		mutation.observe(node, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+		cleanup.current = () => {
+			resize.disconnect();
+			mutation.disconnect();
+		};
+	}, [own, ref]);
+}
+//#endregion
 //#region src/components/avatar/avatar.tsx
 const avatar = tv$1({
 	slots: {
@@ -1817,7 +1863,8 @@ const messageItem = tv$1({
 			"min-h-0 px-2 py-1 border-t-8 border-transparent bg-clip-padding",
 			"hover:[--mi-ct-color:var(--foreground-hint)] has-data-popup-open:[--mi-ct-color:var(--foreground-hint)]",
 			"bg-(--mi-row-fill) [--mi-row-fill:initial]",
-			"hover:[--mi-row-fill:var(--fill-pressed)] data-popup-open:[--mi-row-fill:var(--fill-pressed)] has-data-popup-open:[--mi-row-fill:var(--fill-pressed)]",
+			"hover:[--mi-row-fill:var(--fill-message-hover)]",
+			"data-popup-open:[--mi-row-fill:var(--fill-row-open)] has-data-popup-open:[--mi-row-fill:var(--fill-row-open)]",
 			"has-data-[slot=message-item-search-match]:[--mi-row-fill:var(--info-soft)] has-data-[slot=message-item-search-match]:hover:[--mi-row-fill:var(--info-soft)]",
 			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:[--mi-row-fill:var(--info-soft)]",
 			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:hover:[--mi-row-fill:var(--info-soft)]"
@@ -3174,4 +3221,4 @@ function MessageListJumpPillDismiss({ className, children, render, nativeButton,
 	});
 }
 //#endregion
-export { MessageReactionTooltipNameText as $, DropdownMenuShortcut as $t, MessageTextSelectionToolbarButton as A, DialogClose as An, MessageItem as At, MessageReferenceUnavailable as B, DialogTrigger as Bn, DropdownMenuCheckboxItemIndicator as Bt, MessageQuotedPreviewUnavailable as C, TooltipContent as Cn, MessageItemEdited as Ct, MessageEmbedHeader as D, Badge as Dn, MessageItemAvatarSlot as Dt, MessageEmbedFooter as E, TooltipTrigger as En, MessageItemSearchMatch as Et, MessageReferenceChip as F, DialogNav as Fn, AvatarGroup as Ft, MessageReactionGlyph as G, useParentOverlayKind as Gn, DropdownMenuItemLabel as Gt, MessageReactionChip as H, buttonVariants as Hn, DropdownMenuFooter as Ht, MessageReferenceIndicator as I, DialogOverlay as In, AvatarGroupCount as It, MessageReactionQuickButton as J, useThemeScopeProps as Jn, DropdownMenuPortal as Jt, MessageReactionPickerContent as K, withOverlayLayer as Kn, DropdownMenuLabel as Kt, MessageReferenceLabel as L, DialogPortal as Ln, AvatarImage as Lt, MessageMultiSelect as M, DialogDescription as Mn, Avatar$1 as Mt, MessageMultiSelectCheckbox as N, DialogFooter as Nn, AvatarBadge as Nt, messageEmbed as O, Dialog$1 as On, MessageItemContinuationTime as Ot, MessageMultiSelectToolbar as P, DialogHeader as Pn, AvatarFallback as Pt, MessageReactionTooltipName as Q, DropdownMenuSeparator as Qt, MessageReferencePending as R, DialogSurface as Rn, DropdownMenu as Rt, MessageQuotedPreviewTimestamp as S, Tooltip$1 as Sn, MessageItemContent as St, MessageEmbedContent as T, TooltipProvider as Tn, MessageItemFooter as Tt, MessageReactionCount as U, Spinner as Un, DropdownMenuItem as Ut, MessageReactionAddButton as V, Button$1 as Vn, DropdownMenuContent as Vt, MessageReactionErrorIndicator as W, defaultNativeButton as Wn, DropdownMenuItemCount as Wt, MessageReactionTooltipContent as X, ThemeStateContext as Xn, DropdownMenuRadioItem as Xt, MessageReactionQuickRow as Y, useTheme as Yn, DropdownMenuRadioGroup as Yt, MessageReactionTooltipMeta as Z, tv$1 as Zn, DropdownMenuRadioItemIndicator as Zt, MessageQuotedPreviewContent as _, ScrollAreaViewport as _n, MessageItemSenderButton as _t, MessageListDateDivider as a, Panel as an, MessageItemSavedIndicator as at, MessageQuotedPreviewText as b, CheckboxIndicator as bn, MessageItemAttachments as bt, MessageList as c, PanelHeaderRoot as cn, MessageItemDelegatedAvatar as ct, MessageQuotedPreviewAttachments as d, PanelSection as dn, MessageItemDelegatedByName as dt, DropdownMenuSubmenu as en, MessageReactionTooltipNames as et, MessageQuotedPreviewAuthor as f, ScrollArea$1 as fn, MessageItemHeader as ft, MessageQuotedPreviewChannel as g, ScrollAreaThumb as gn, MessageItemSenderBadges as gt, MessageQuotedPreviewAuthorName as h, ScrollAreaScrollbar as hn, MessageItemSender as ht, MessageListJumpPillGroup as i, KbdGroup as in, MessageItemReadReceipt as it, MessageTextSelectionToolbarSeparator as j, DialogContent as jn, searchHit as jt, MessageTextSelectionToolbar as k, DialogBody as kn, MessageItemGutter as kt, MessageQuotedPreview as l, PanelScrollContent as ln, MessageItemDelegatedBy as lt, MessageQuotedPreviewAuthorMeta as m, ScrollAreaCorner as mn, MessageItemMeta as mt, MessageListJumpPill as n, DropdownMenuTrigger as nn, MessageItemBadge as nt, MessageListHistoryLimited as o, PanelBody as on, MessageItemToolbar as ot, MessageQuotedPreviewAuthorDelegatedBy as p, ScrollAreaContent as pn, MessageItemInlineStatus as pt, MessageReactionPickerStatic as q, resolveThemeScopeProps as qn, DropdownMenuPopup as qt, MessageListJumpPillDismiss as r, Kbd as rn, MessageItemBadgeSeparator as rt, MessageListNotice as s, PanelFooter as sn, MessageItemToolbarButton as st, MessageListJumpControls as t, DropdownMenuSubmenuTrigger as tn, MessageReactionTooltipSeparator as tt, MessageQuotedPreviewAttachment as u, PanelScrollViewport as un, MessageItemDelegatedByButton as ut, MessageQuotedPreviewHeader as v, useMobileViewport as vn, MessageItemSenderGroup as vt, MessageEmbed as w, TooltipPortal as wn, MessageItemEmbedded as wt, MessageQuotedPreviewThread as x, PRESENCE_COLOR as xn, MessageItemBody as xt, MessageQuotedPreviewLoading as y, Checkbox$1 as yn, MessageItemTime as yt, MessageReferenceText as z, DialogTitle as zn, DropdownMenuCheckboxItem as zt };
+export { MessageReactionTooltipNameText as $, DropdownMenuSeparator as $t, MessageTextSelectionToolbarButton as A, DialogBody as An, MessageItem as At, MessageReferenceUnavailable as B, DialogTitle as Bn, DropdownMenuCheckboxItem as Bt, MessageQuotedPreviewUnavailable as C, Tooltip$1 as Cn, MessageItemEdited as Ct, MessageEmbedHeader as D, TooltipTrigger as Dn, MessageItemAvatarSlot as Dt, MessageEmbedFooter as E, TooltipProvider as En, MessageItemSearchMatch as Et, MessageReferenceChip as F, DialogHeader as Fn, AvatarGroup as Ft, MessageReactionGlyph as G, defaultNativeButton as Gn, DropdownMenuItemCount as Gt, MessageReactionChip as H, Button$1 as Hn, DropdownMenuContent as Ht, MessageReferenceIndicator as I, DialogNav as In, AvatarGroupCount as It, MessageReactionQuickButton as J, resolveThemeScopeProps as Jn, DropdownMenuPopup as Jt, MessageReactionPickerContent as K, useParentOverlayKind as Kn, DropdownMenuItemLabel as Kt, MessageReferenceLabel as L, DialogOverlay as Ln, AvatarImage as Lt, MessageMultiSelect as M, DialogContent as Mn, Avatar$1 as Mt, MessageMultiSelectCheckbox as N, DialogDescription as Nn, AvatarBadge as Nt, messageEmbed as O, Badge as On, MessageItemContinuationTime as Ot, MessageMultiSelectToolbar as P, DialogFooter as Pn, AvatarFallback as Pt, MessageReactionTooltipName as Q, tv$1 as Qn, DropdownMenuRadioItemIndicator as Qt, MessageReferencePending as R, DialogPortal as Rn, useOverflowTitle as Rt, MessageQuotedPreviewTimestamp as S, PRESENCE_COLOR as Sn, MessageItemContent as St, MessageEmbedContent as T, TooltipPortal as Tn, MessageItemFooter as Tt, MessageReactionCount as U, buttonVariants as Un, DropdownMenuFooter as Ut, MessageReactionAddButton as V, DialogTrigger as Vn, DropdownMenuCheckboxItemIndicator as Vt, MessageReactionErrorIndicator as W, Spinner as Wn, DropdownMenuItem as Wt, MessageReactionTooltipContent as X, useTheme as Xn, DropdownMenuRadioGroup as Xt, MessageReactionQuickRow as Y, useThemeScopeProps as Yn, DropdownMenuPortal as Yt, MessageReactionTooltipMeta as Z, ThemeStateContext as Zn, DropdownMenuRadioItem as Zt, MessageQuotedPreviewContent as _, ScrollAreaThumb as _n, MessageItemSenderButton as _t, MessageListDateDivider as a, KbdGroup as an, MessageItemSavedIndicator as at, MessageQuotedPreviewText as b, Checkbox$1 as bn, MessageItemAttachments as bt, MessageList as c, PanelFooter as cn, MessageItemDelegatedAvatar as ct, MessageQuotedPreviewAttachments as d, PanelScrollViewport as dn, MessageItemDelegatedByName as dt, DropdownMenuShortcut as en, MessageReactionTooltipNames as et, MessageQuotedPreviewAuthor as f, PanelSection as fn, MessageItemHeader as ft, MessageQuotedPreviewChannel as g, ScrollAreaScrollbar as gn, MessageItemSenderBadges as gt, MessageQuotedPreviewAuthorName as h, ScrollAreaCorner as hn, MessageItemSender as ht, MessageListJumpPillGroup as i, Kbd as in, MessageItemReadReceipt as it, MessageTextSelectionToolbarSeparator as j, DialogClose as jn, searchHit as jt, MessageTextSelectionToolbar as k, Dialog$1 as kn, MessageItemGutter as kt, MessageQuotedPreview as l, PanelHeaderRoot as ln, MessageItemDelegatedBy as lt, MessageQuotedPreviewAuthorMeta as m, ScrollAreaContent as mn, MessageItemMeta as mt, MessageListJumpPill as n, DropdownMenuSubmenuTrigger as nn, MessageItemBadge as nt, MessageListHistoryLimited as o, Panel as on, MessageItemToolbar as ot, MessageQuotedPreviewAuthorDelegatedBy as p, ScrollArea$1 as pn, MessageItemInlineStatus as pt, MessageReactionPickerStatic as q, withOverlayLayer as qn, DropdownMenuLabel as qt, MessageListJumpPillDismiss as r, DropdownMenuTrigger as rn, MessageItemBadgeSeparator as rt, MessageListNotice as s, PanelBody as sn, MessageItemToolbarButton as st, MessageListJumpControls as t, DropdownMenuSubmenu as tn, MessageReactionTooltipSeparator as tt, MessageQuotedPreviewAttachment as u, PanelScrollContent as un, MessageItemDelegatedByButton as ut, MessageQuotedPreviewHeader as v, ScrollAreaViewport as vn, MessageItemSenderGroup as vt, MessageEmbed as w, TooltipContent as wn, MessageItemEmbedded as wt, MessageQuotedPreviewThread as x, CheckboxIndicator as xn, MessageItemBody as xt, MessageQuotedPreviewLoading as y, useMobileViewport as yn, MessageItemTime as yt, MessageReferenceText as z, DialogSurface as zn, DropdownMenu as zt };

package/dist/style.css

@@ -1138,6 +1138,14 @@
   overflow: hidden;
 }
 
+.r-combobox-select__option .r-combobox-select__text {
+  -webkit-line-clamp: 2;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+}
+
 .r-combobox-select__actions {
   flex: none;
   align-items: center;
@@ -1239,7 +1247,7 @@
   justify-content: space-between;
   align-items: center;
   gap: 10px;
-  padding: 0 10px;
+  padding: 6px 10px;
   font-weight: 500;
   transition: background-color .12s, color .12s;
   display: flex;

package/dist/styles.css

@@ -283,6 +283,9 @@
   --color-foreground-on-frame-active: var(--foreground-on-frame-active);
   --color-fill-frame-pressed: var(--fill-frame-pressed);
   --color-fill-pressed: var(--fill-pressed);
+  --color-fill-row-hover: var(--fill-row-hover);
+  --color-fill-message-hover: var(--fill-message-hover);
+  --color-fill-row-open: var(--fill-row-open);
   --color-layer-code: var(--layer-code);
   --color-foreground-link: var(--foreground-link);
   --color-sticker-ink: var(--sticker-ink);
@@ -490,6 +493,18 @@ body {
   background-image: linear-gradient(var(--fill-pressed), var(--fill-pressed));
 }
 
+/* A row laid over a solid surface (a list row on a card, a file row) hovers
+   with the lighter row step, as an overlay too, so press (press-overlay)
+   replaces it instead of stacking on it. */
+@utility row-hover-overlay {
+  background-image: linear-gradient(var(--fill-row-hover), var(--fill-row-hover));
+}
+
+/* The same row with its menu open: fill-row-open, as an overlay. */
+@utility row-open-overlay {
+  background-image: linear-gradient(var(--fill-row-open), var(--fill-row-open));
+}
+
 @utility press-overlay-sticker {
   background-image: linear-gradient(var(--sticker-pressed), var(--sticker-pressed));
 }

package/dist/tokens.json

@@ -1527,6 +1527,63 @@
           }
         }
       }
+    },
+    "row-hover": {
+      "$description": "Hover on a whole row (sidebar, list, inbox, search result, table, file row): one perceptible step (OKLab dE about 2.8 in both modes), below every selection tint, so text keeps its contrast.",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.1813, 0.005, 17.62],
+        "alpha": 0.04
+      },
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.03
+            }
+          }
+        }
+      }
+    },
+    "message-hover": {
+      "$description": "Hover on a message: the lightest perceptible step (OKLab dE about 2.1 in both modes), because a message is a large block someone reads with the pointer resting on it.",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.1813, 0.005, 17.62],
+        "alpha": 0.03
+      },
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.022
+            }
+          }
+        }
+      }
+    },
+    "row-open": {
+      "$description": "Any row with its menu open (right-click, its menu button, press and hold): one step over a hover (OKLab dE 3.4 to 4.3 on every row surface), because on a phone, which has no hover, it is the only sign of which row the menu acts on. Still under info-soft and brand-soft on every surface.",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.1813, 0.005, 17.62],
+        "alpha": 0.05
+      },
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.04
+            }
+          }
+        }
+      }
     }
   },
   "line": {

package/dist/wip.mjs

@@ -1,4 +1,4 @@
-import { An as DialogClose, Bn as DialogTrigger, Jn as useThemeScopeProps, On as Dialog, Vn as Button$1, Wn as defaultNativeButton, Yn as useTheme, Zn as tv, ct as MessageItemDelegatedAvatar, dt as MessageItemDelegatedByName, i as MessageListJumpPillGroup, jn as DialogContent, lt as MessageItemDelegatedBy, n as MessageListJumpPill, p as MessageQuotedPreviewAuthorDelegatedBy, r as MessageListJumpPillDismiss, t as MessageListJumpControls, ut as MessageItemDelegatedByButton, zn as DialogTitle } from "./message-list-CxawdwMF.mjs";
+import { Bn as DialogTitle, Gn as defaultNativeButton, Hn as Button$1, Mn as DialogContent, Qn as tv, Rt as useOverflowTitle, Vn as DialogTrigger, Xn as useTheme, Yn as useThemeScopeProps, ct as MessageItemDelegatedAvatar, dt as MessageItemDelegatedByName, i as MessageListJumpPillGroup, jn as DialogClose, kn as Dialog, lt as MessageItemDelegatedBy, n as MessageListJumpPill, p as MessageQuotedPreviewAuthorDelegatedBy, r as MessageListJumpPillDismiss, t as MessageListJumpControls, ut as MessageItemDelegatedByButton } from "./message-list-DP03T8gF.mjs";
 import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
 import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -70,19 +70,21 @@ const defaultMessages = {
 	remove: (label) => `Remove ${label}`
 };
 const defaultRenderCreateLabel = (query) => `Create “${query}”`;
+/** An option's or a chip's text, with its whole value as the title when it is cut off. */
+function OverflowText({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref: useOverflowTitle(),
+		className: "r-combobox-select__text",
+		children
+	});
+}
 function recordLabel(record, renderLabel) {
 	return record.option === void 0 ? record.label : renderLabel?.(record.option) ?? record.label;
 }
 function renderOptionContent({ record, selected, renderLabel, renderOption, renderCreateLabel }) {
-	if (record.createQuery !== void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Plus, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
-		className: "r-combobox-select__text",
-		children: renderCreateLabel(record.label)
-	})] });
+	if (record.createQuery !== void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Plus, { "aria-hidden": true }), /* @__PURE__ */ jsx(OverflowText, { children: renderCreateLabel(record.label) })] });
 	const content = record.option === void 0 ? record.label : renderOption?.(record.option, { selected }) ?? recordLabel(record, renderLabel);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-		className: "r-combobox-select__text",
-		children: content
-	}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OverflowText, { children: content }), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
 		className: "r-combobox-select__indicator",
 		children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true })
 	})] });
@@ -96,10 +98,7 @@ function renderSelectedChip({ record, index, tagLimit, strings, renderLabel, ren
 		"data-overflow": overflow || void 0,
 		"aria-label": record.label,
 		"aria-description": strings.chipDescription,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "r-combobox-select__text",
-			children: content
-		}), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+		children: [/* @__PURE__ */ jsx(OverflowText, { children: content }), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
 			className: "r-combobox-select__remove",
 			"aria-label": strings.remove(record.label),
 			children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
@@ -472,6 +471,7 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 			children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 				sideOffset: 4,
 				align: "start",
+				collisionPadding: 8,
 				...phone ? {
 					side: listSide,
 					collisionAvoidance: PHONE_LIST_COLLISION
@@ -634,7 +634,7 @@ const comment = tv({
 		cardTrigger: [
 			"absolute -inset-px z-10 cursor-pointer",
 			"rounded-container border-0 bg-transparent p-0",
-			"hover:bg-fill-pressed active:bg-fill-pressed",
+			"hover:bg-fill-row-hover active:bg-fill-pressed",
 			"outline-none focus-visible:shadow-focus"
 		],
 		cardQuote: ["sr-only"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",