@botiverse/raft-ui 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## [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
+
+- `ComboboxSelect` always takes typing on a phone, as on a desktop: tapping the field focuses it and typing filters; `create` and remote search work in the field. The phone-only pick-only mode and bottom sheet from 0.10.5 are gone, with their props `sheetThreshold`, `sheetTitle` and `messages.search` / `done` / `close`. A pick-only field uses `Select`. The list still picks its side once and doesn't flip while the keyboard opens. ([#635](https://github.com/botiverse/raft-design/pull/635))
+
+### Added
+
+- `ComboboxSelect` takes `listMaxHeight` (a CSS length or pixels, default `16rem`, the whole list's height); the side the list opens on follows it. ([#635](https://github.com/botiverse/raft-design/pull/635))
+- Jump controls that float over a conversation, from `@botiverse/raft-ui/wip`: `MessageListJumpControls`, `MessageListJumpPill` (a Button `outline md`), `MessageListJumpPillGroup` and `MessageListJumpPillDismiss`. ([#637](https://github.com/botiverse/raft-design/pull/637))
+- A message an assistant sent for its owner, from `@botiverse/raft-ui/wip`: `MessageItemDelegatedBy`, `MessageItemDelegatedByName`, `MessageItemDelegatedByButton`, `MessageItemDelegatedAvatar` (with `deleted`) and `MessageQuotedPreviewAuthorDelegatedBy`. ([#633](https://github.com/botiverse/raft-design/pull/633))
+
+### Fixed
+
+- The 32px and 36px buttons' hit area reaches 44px; the overhang now counts the 1.5px border. ([#637](https://github.com/botiverse/raft-design/pull/637))
+- Toast title and description use `text-callout` (desktop line height 20 to 22px). ([#637](https://github.com/botiverse/raft-design/pull/637))
+- In a message header the name, notes (model, role, badge text) and time stand on one baseline. ([#639](https://github.com/botiverse/raft-design/pull/639))
+- `MessageItemSenderGroup`: the gap before a role squeezed to nothing collapses with it. ([#633](https://github.com/botiverse/raft-design/pull/633))
+- `VirtualList`: a jump holds its target row by key, so rows prepended while it settles don't move it; the focused row stays mounted across a window switch. ([#636](https://github.com/botiverse/raft-design/pull/636))
+
 ## [0.11.0](https://github.com/botiverse/raft-design/compare/v0.10.7...v0.11.0) (2026-10-21)
 
 ### Added

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;
@@ -140,7 +149,7 @@
   width: var(--anchor-width, max-content);
   min-width: 13.75rem;
   max-width: var(--available-width);
-  max-height: min(var(--available-height), 24rem);
+  max-height: min(var(--available-height), max(24rem, var(--combobox-select-list-max-height, 0px)));
   overflow: hidden;
   border: 0;
   border-radius: 10px;
@@ -152,7 +161,8 @@
   outline: 0;
 }
 .r-combobox-select__list {
-  max-height: 16rem;
+  box-sizing: border-box;
+  max-height: var(--combobox-select-list-max-height, 16rem);
   overflow-y: auto;
   overscroll-behavior: contain;
   scroll-padding-block: 6px;
@@ -162,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;
@@ -270,120 +280,14 @@
   background: var(--fill-muted);
   color: var(--foreground-disabled);
 }
-/* On a phone the field is a trigger, not a text input: a select-like button
-   that shows the value. Its hit area covers the whole field; the clear button
-   sits above it. */
-.r-combobox-select__trigger {
-  box-sizing: border-box;
-  min-width: 0;
-  min-height: inherit;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: start;
-  cursor: default;
-  -webkit-tap-highlight-color: transparent;
-}
-.r-combobox-select__trigger::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-}
-.r-combobox-select__trigger:disabled {
-  color: inherit;
-}
-.r-combobox-select__value {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.r-combobox-select__placeholder {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--foreground-hint);
-}
-.r-combobox-select__trigger .r-combobox-select__chips {
-  margin-inline-start: -6px;
-}
-.r-combobox-select__trigger .r-combobox-select__chip {
-  padding-inline-end: 8px;
-}
-.r-combobox-select__clear {
-  position: relative;
-  z-index: 1;
-}
-.r-combobox-select__arrow {
-  pointer-events: none;
-}
-.r-combobox-select__control--trigger[data-popup-open] .r-combobox-select__arrow > svg {
-  transform: rotate(180deg);
-}
-/* The phone's anchored list fits the room on its side instead of flipping. */
+/* On a phone the list keeps the side it opened on and fits the room there
+   instead of flipping (combobox-select.tsx), and the input stays at 16px or
+   more at every size: iOS zooms into a smaller one as it takes focus. */
 .r-combobox-select__popup--anchored .r-combobox-select__list {
-  box-sizing: border-box;
-  max-height: min(calc(16rem + 12px), var(--available-height, 100vh));
-}
-/* The phone's bottom sheet: the field's label as its title, the search input
-   at its top, then the whole list, scrolling in the rest of the sheet. */
-.r-combobox-select__sheet-popup {
-  height: 82dvh;
-}
-.r-combobox-select__sheet {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
-}
-.r-combobox-select__sheet-header {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding-inline-end: 8px;
-}
-.r-combobox-select__sheet-title {
-  min-width: 0;
-  flex: 1;
-}
-.r-combobox-select__sheet-search {
-  flex: 0 0 auto;
-  padding: 4px 16px 8px;
-}
-.r-combobox-select__search-icon {
-  width: 16px;
-  height: 16px;
-  flex: 0 0 auto;
-  color: var(--foreground-hint);
-}
-.r-combobox-select__sheet-body {
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: 0 8px calc(16px + env(safe-area-inset-bottom, 0px));
-}
-.r-combobox-select__sheet .r-combobox-select__list {
-  max-height: none;
-  overflow: visible;
-  padding: 0;
-}
-.r-combobox-select__sheet .r-combobox-select__option {
-  min-height: 52px;
-  padding: 0 12px;
-  font-size: var(--text-body);
-  line-height: var(--text-body--line-height);
+  max-height: min(var(--combobox-select-list-max-height, 16rem), var(--available-height, 100vh));
 }
-.r-combobox-select__sheet .r-combobox-select__group-label {
-  padding: 12px 12px 4px;
+.r-combobox-select__control--phone .r-combobox-select__input {
+  font-size: max(1em, 16px);
 }
 @keyframes r-combobox-select-spin {
   to {

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);