@botiverse/raft-ui 0.18.0 → 0.20.0

package/CHANGELOG.md

@@ -1,3 +1,129 @@
+## [0.20.0](https://github.com/botiverse/raft-design/compare/v0.19.0...v0.20.0) (2026-10-22)
+
+### Design System
+
+- **Hover and press**: hover and press are one translucent ink layer over the resting colour, never a fill swap, in two tiers sized by what is under the pointer. Subtle for rows, messages, readable cards and a row whose menu is open; medium for small controls and for pressing anything clickable. A colour sticker and the frame get their own medium alphas. Selected items and fields don't hover, a message has no press, and every hover sits under `(hover: hover)`. It applies to every row, card, button, badge, tab, segment, sidebar and rail item, table row, inbox item and menu. ([#681](https://github.com/botiverse/raft-design/pull/681))
+  - Why: the same hover looked different on paper, the sidebar and a card, rows and messages used three different steps, and some clickable parts gave no feedback on press; one layer in two tiers reads the same everywhere.
+  - Affects: subtle `fill-subtle` 4% light / 3% dark; medium `fill-medium` 7.8% light / 6.5% dark (was 7.8%); `sticker-medium` 10% (was 12.2%); `fill-frame-medium` 10% light (was 12.2%) / 6% dark (was 7.8%); dark `brand-soft` 16% → 20%; colour `-hover` / `-active` pairs mix 10% ink (was 12%).
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
+- **Inside a frame**: a control embedded in another component's frame (a field, the composer, a toolbar, a card or media corner) wears `radius-chip` (6px) and sits the same distance from every side of the frame and from its siblings; frames themselves don't change. It applies to ComboboxSelect, Combobox, InputGroup, the composer, the message hover and text-selection toolbars, the lightbox and multi-select bars, CodeBlock, media and file card actions, popover close, menus and SegmentedControl / ToggleGroup. ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: embedded buttons at the free-standing 8px corner read nearly round at 20px, and their offsets differed per component; one corner and one even inset make them read as one kind of thing.
+  - Affects: new tokens `control-embedded-inset` 6px and `control-embedded-size` 20px desktop / 32px phone (utilities `embedded-inset`, `control-embedded`); insets 6px in a field, the composer and a corner, 4px in a floating toolbar and for a popup's highlight, 3px between segments.
+  - Docs: https://raft-design.botiverse.build/foundations/shape/#inside-a-frame
+
+### Breaking Changes
+
+- **Dialog** `size`: `sm` is 400px (was 384) and `lg` is 640px (was 512); `md` 448 and `wide` 896 are unchanged. Sizes are chosen by content: `sm` for a decision, `md` for a small task, `lg` for content that needs width. ([#676](https://github.com/botiverse/raft-design/pull/676))
+  - Why: the steps between sizes were too small to mean anything, and a confirmation could be 384 or 400 wide depending on the component; now every confirmation is 400, the same as AlertDialog.
+  - Affects: `sm` `max-w-sm` (384px) → 400px; `lg` `max-w-lg` (512px) → 640px.
+  - Migrate: dialogs with `size="sm"` grow 16px and `size="lg"` 128px; check their content and pick the size by content. Set width with `size` only, not your own `max-w-*`.
+  - Docs: https://raft-design.botiverse.build/components/dialog/#variants
+- **Hover tokens**: renamed to their tier. The old names stay as deprecated aliases until 1.0, but they now resolve to the tier values, so some hovers change. ([#681](https://github.com/botiverse/raft-design/pull/681))
+  - Why: names that said where a fill was used (row hover, message hover, row open, pressed) could not describe two tiers that apply everywhere.
+  - Affects: `fill-row-hover`, `fill-row-open`, `fill-message-hover` → `fill-subtle` (row open 5% → 4%, message hover 3% → 4%); `fill-pressed` → `fill-medium`; `fill-frame-pressed` → `fill-frame-medium`; `sticker-pressed` → `sticker-medium`; utilities `row-hover-overlay`, `row-open-overlay` → `overlay-subtle`, `press-overlay` → `overlay-medium`, `press-overlay-sticker` → `overlay-sticker-medium`. Overlays are registered with the `cn` helper as background images, so a later `hover:bg-none` or another tier replaces them.
+  - Migrate: run `node node_modules/@botiverse/raft-ui/codemods/token-names.mjs <paths>`; it renames classes, `var(--…)` and `var(--color-…)` forms. Then move readable cards that used `press-overlay` for hover to `overlay-subtle`. Tests that assert a token name in a class (for example `var(--fill-row-open)` on a message) look for the new name.
+  - Docs: https://raft-design.botiverse.build/foundations/color/#hover-overlays
+- **MessageItemToolbar** and **MessageTextSelectionToolbar**: 36px tall (was 32), buttons 4px from the frame and 4px apart (was 2px), at `radius-chip`. The hover toolbar rides 18px above the row (was 16). ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: at a 2px inset the buttons' hover fill nearly touched the frame; see Inside a frame above.
+  - Affects: toolbar height 32 → 36px; inset and gap 2 → 4px; the message header's default reserve `--mi-toolbar-reserve` 6.5rem → 7rem (three buttons).
+  - Migrate: if you set `--mi-toolbar-reserve` yourself, compute it as `1rem + 2rem × buttons` (was `1.25rem + 1.75rem × buttons`). Leave at least 18px above the first message of a scroll area and above a thread's root message.
+  - Docs: https://raft-design.botiverse.build/components/message-item/
+- **MessageMultiSelectToolbar**: 36px tall (was 48) with 28px buttons (was 32) 4px from the frame; on a touch screen each button takes a 44px tap. The buttons go in the new `MessageMultiSelectToolbarActions`. ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: every floating toolbar is now 36px with 28px buttons; the touch hit area keeps the smaller buttons easy to tap.
+  - Affects: height 48 → 36px; buttons 32 → 28px; inset 8 / 10 → 4px; gap 6 → 4px.
+  - Migrate: wrap the toolbar's buttons in `MessageMultiSelectToolbarActions`, which owns their 4px gap and the touch hit areas; remove your own gap or padding there.
+  - Docs: https://raft-design.botiverse.build/components/message-item/
+- **ComboboxSelect**, **Combobox** and **InputGroup** chips and end buttons: chips and embedded buttons in a field are 20px on a desktop and 32px on a phone (chips were 28px, end buttons 32px), 6px from the field's edge and from each other, at `radius-chip`, so a field with chips stays 32 / 44px tall (it grew to 42). ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: 28px chips made a field with chips taller than one without, and the embedded buttons sat at different offsets per component.
+  - Affects: chips 28 → 20px desktop / 32px phone; chip remove 16 / 28px at `radius-sticker`; InputGroup end-addon Button 32 → 20 / 32px with a 16px icon; ComboboxSelect `sm` keeps 22px chips at 3px, `lg` uses 40px chips in a 52px field.
+  - Migrate: remove size, offset or radius overrides on chips and end-addon buttons in fields. In an InputGroup end addon, put a Kbd before the Button, so on a phone (Kbd hidden) the button is the last child and ends 6px from the edge.
+  - Docs: https://raft-design.botiverse.build/components/combobox-select/
+
+### Added
+
+- **CodeBlockPre**: renders the code's `pre`. While the code overflows it is a keyboard-reachable named region (`tabindex=0`, `role=region`, `aria-label` "Code" by default), so it can be scrolled from the keyboard; code that fits adds no Tab stop. ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: a scrolling code block could not be reached from the keyboard in Safari.
+  - Docs: https://raft-design.botiverse.build/components/code-block/
+- **MessageMultiSelectToolbarActions**: the multi-select toolbar's actions at its end, 4px apart, with touch hit areas. ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: see MessageMultiSelectToolbar above.
+  - Docs: https://raft-design.botiverse.build/components/message-item/
+- **Press feedback**: Badge, the mention sticker, InboxItem, Table rows, the system-message disclosure and the selected SidebarItem now press with the medium tier. ([#681](https://github.com/botiverse/raft-design/pull/681))
+  - Why: anything clickable presses with the medium tier; these gave no feedback on press.
+  - Affects: solid Badge `sticker-medium`; soft and outline Badge, InboxItem, Table row, system-message disclosure `fill-medium`; selected SidebarItem `sticker-medium`.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
+
+### Changed
+
+- **MessageItem**, **MessageAttachmentCard**, **MessageReplies**, **TaskCard** and menu-open rows: hover with the subtle tier. ([#681](https://github.com/botiverse/raft-design/pull/681))
+  - Why: a message, a readable card and a row whose menu is open are large things people read; one subtle step keeps text contrast and never stacks with the menu-open fill.
+  - Affects: message hover 3% / 2.2% → 4% / 3%; menu-open row 5% / 4% → 4% / 3%; attachment card, replies bar and task card 7.8% → 4% / 3%. Press stays medium.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
+- **SegmentedControl**, **ToggleGroup** and **Select**: a selected segment or toggle no longer darkens on hover and presses with `sticker-medium`; the Select trigger and the top-bar SearchTrigger don't hover, only press. SegmentedControl and ToggleGroup items are 3px apart (was 2). ([#681](https://github.com/botiverse/raft-design/pull/681), [#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: selected items and fields don't hover, like selected tabs and the active sidebar item.
+  - Affects: segment gap 2 → 3px.
+  - Docs: https://raft-design.botiverse.build/components/segmented-control/
+- **DropdownMenu**, **ContextMenu**, **Select**, **Combobox**, **ComboboxSelect**, the suggestion list and quick reactions: the highlighted item sits 4px inside the popup at `radius-chip`, and separators take 4px. ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: see Inside a frame above.
+  - Affects: highlight inset 6px (quick reactions 8px) → 4px; highlight radius 8 → 6px; separator margins 6 → 4px.
+  - Docs: https://raft-design.botiverse.build/components/dropdown-menu/
+- **CodeBlock**: the copy and other actions sit 6px from the corner at `radius-chip`, and without a header they take a column of their own instead of covering the first line; the code scrolls beside them. With a header, the actions sit 6px from its end, centred in it, 4px apart. ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: on a phone the copy button covered the first line of code.
+  - Affects: action offset 9px (no header) / 5px (header) → 6px; radius 8 → 6px; a one-line block keeps 6px under the button.
+  - Docs: https://raft-design.botiverse.build/components/code-block/
+- **Composer**, **MessageActionCard**, **Popover** header close, **Lightbox** info bar, video preview, gallery and file card actions: embedded buttons at `radius-chip`, 6px from the frame's sides (4px in the lightbox bar, whose buttons are 28px with a 44px touch target). ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: see Inside a frame above.
+  - Affects: composer buttons 8 / 13px from the sides and 9px from the bottom → 6px; media and file card actions 9 / 7 / 5px → 6px; lightbox buttons 32 → 28px.
+  - Docs: https://raft-design.botiverse.build/foundations/shape/#inside-a-frame
+
+### Fixed
+
+- **ComboboxSelect** and **FloatButton**: hover no longer sticks after a tap on a touch screen; their `:hover` rules are under `(hover: hover)`, and the ghost FloatButton hovers and presses with the overlay instead of a fill swap. ([#681](https://github.com/botiverse/raft-design/pull/681))
+  - Why: ungated `:hover` rules stayed applied after a tap.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
+
+## [0.19.0](https://github.com/botiverse/raft-design/compare/v0.18.0...v0.19.0) (2026-10-21)
+
+### Design System
+
+- **Collapsing the sidebar**: on desktop the sidebar toggle is the first item of the rail's footer, above Help and Settings. Its icon shows what pressing it does (`panel-left-close` while the sidebar is shown, `panel-left-open` while it is hidden), its tooltip says Collapse Sidebar or Expand Sidebar with the shortcut (⌘\ on macOS, Ctrl+\ elsewhere), and the state is remembered on the device. It applies to AppShellSidebarTrigger. ([#674](https://github.com/botiverse/raft-design/pull/674))
+  - Why: the toggle belongs to the frame rather than to a page, so it needs one fixed place and one behavior whatever the main area shows.
+  - Docs: https://raft-design.botiverse.build/patterns/navigation/#collapsing-the-sidebar
+
+### Breaking Changes
+
+- **BannerAction**: the buttons sit at the bottom right, at the end of the last line of text and centered on it, while the text fits beside them on one line. When the text would wrap beside them, or the banner is narrower than 480px, they take a line of their own under the text, aligned to the end. `BannerAction` places itself; it sets `data-wrap` when it takes its own line. ([#672](https://github.com/botiverse/raft-design/pull/672))
+  - Why: the button sat in a start-aligned row under the text, away from where the eye ends; it now comes after what it acts on and ends where reading ends, as a dialog's commit button does.
+  - Affects: action placement from a row under the text (start-aligned, `mt-2`) → the end of the last line from 452px of banner content (a 480px banner at `md`), otherwise its own line under the text, end-aligned; `size="sm"` banners with an action get vertical padding that centers a 32px button on the line.
+  - Migrate: remove layout overrides on `BannerAction`, such as `col-span-full`, `col-start-*`, `row-start-*` or `mt-*`, which now fight its placement. Give `Banner` a width (or let it fill its parent); never `w-fit`. Use `variant="default" size="sm"` for the button, and put a ghost Dismiss (`variant="ghost" size="sm"`) before it when the banner can be dismissed; move a × out of `BannerAction` into `BannerClose`, on a banner with no button.
+  - Docs: https://raft-design.botiverse.build/components/banner/
+- **AppShellSidebarTrigger**: the trigger is a disclosure button. It has `aria-expanded` and `aria-controls` naming the sidebar slot, instead of `aria-pressed`, and its labels are Title Case: "Collapse Sidebar" and "Expand Sidebar". ([#674](https://github.com/botiverse/raft-design/pull/674))
+  - Why: the trigger shows and hides a region, which assistive technology announces as expanded or collapsed, not as a pressed toggle.
+  - Affects: `aria-pressed` → `aria-expanded`; new `aria-controls`; `AppShellSidebarSlot` gets a generated `id` when the root is `sidebarCollapsible` and none is passed; label and `title` "Collapse sidebar" / "Expand sidebar" → "Collapse Sidebar" / "Expand Sidebar".
+  - Migrate: update tests and selectors that read `aria-pressed` or the old labels to `aria-expanded` and the Title Case labels. When you wrap the trigger in a Tooltip, pass `title={undefined}` and repeat the label in the tooltip; to translate it, pass your own `aria-label`.
+  - Docs: https://raft-design.botiverse.build/components/app-shell/
+- **AppShellMainSlot** and **AppShellSidebarSlot**: in a collapsible shell, the main area has a z-index only while it slides over the sidebar, and the collapsed sidebar is `inert`. ([#674](https://github.com/botiverse/raft-design/pull/674))
+  - Why: the main area sat at z-index 45 at rest and covered the app's own fixed layers, such as a bar at z-40, and a collapsed sidebar's controls stayed in the tab order while hidden.
+  - Affects: main slot `z-45` always → `z-2` with `data-sliding` only during the slide, none at rest; the expanded sidebar slot is `relative z-1`, so a resize handle past its edge stays grabbable; the collapsed sidebar slot adds `inert` to `aria-hidden`.
+  - Migrate: remove workarounds that lowered the app's own layers below z-45 or raised them over the main slot, and any code or test that reads an inline or computed z-index on the main slot at rest. Don't make the collapsed sidebar focusable yourself; a shortcut that collapses it while focus is inside should move focus to the trigger first.
+  - Docs: https://raft-design.botiverse.build/components/app-shell/
+
+### Added
+
+- **BannerClose**: the × of a banner that has no button, a frameless icon button at the end of the first line whose icon box ends on the banner's padding. Its label defaults to "Dismiss". ([#672](https://github.com/botiverse/raft-design/pull/672))
+  - Why: a × put in `BannerAction` read as one of the actions and sat on the wrong line; the close control now has a place of its own.
+  - Affects: `variant="ghost"`, `size="icon-sm"` (32px), centered on the first line. With `BannerAction` in the same banner, raft-ui warns in development and moves the actions to a line of their own.
+  - Docs: https://raft-design.botiverse.build/components/banner/
+
+### Fixed
+
+- **BannerTitle** and **BannerDescription**: a long word or URL breaks onto the next line instead of pushing the banner wider. ([#672](https://github.com/botiverse/raft-design/pull/672))
+  - Why: an unbroken string, such as a URL, ran out of the text column and under the actions; the text now wraps inside its column.
+  - Docs: https://raft-design.botiverse.build/components/banner/
+- **ResizableHandle**: under a coarse pointer, such as a finger on a tablet, the handle is easier to grab. ([#667](https://github.com/botiverse/raft-design/pull/667))
+  - Why: a 12px handle was too narrow to hit with a finger.
+  - Affects: handle hit area 12px → 24px under `pointer: coarse`, still centered on the boundary; mouse and pen keep 12px.
+  - Docs: https://raft-design.botiverse.build/components/resizable/
+
 ## [0.18.0](https://github.com/botiverse/raft-design/compare/v0.17.0...v0.18.0) (2026-10-21)
 
 ### Design System
@@ -122,7 +248,7 @@
 - **Row hover**: rows hover with their own lightest visible step, not the press overlay; a row whose menu is open is marked with one slightly stronger step. ([#641](https://github.com/botiverse/raft-design/pull/641), [#643](https://github.com/botiverse/raft-design/pull/643))
   - Why: the press fill made hovered messages and list rows read as grey and heavy, and on a phone a long-press menu left no mark of which row it belonged to.
   - Affects: hover `fill-pressed` 7.8% → `fill-row-hover` 4% (dark 3%), messages `fill-message-hover` 3% (dark 2.2%), menu-open `fill-row-open` 5% (dark 4%). Press and selection are unchanged; hover stays lighter than selection.
-  - Docs: https://raft-design.botiverse.build/foundations/states/#row-hover
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
 
 ### Added
 
@@ -136,11 +262,11 @@
 - **Message, SidebarItem, List, Inbox, Search, Table and File rows**: hover with `fill-row-hover` (messages with `fill-message-hover`) instead of `fill-pressed`. ([#641](https://github.com/botiverse/raft-design/pull/641))
   - Why: see Row hover above.
   - Affects: hover background 7.8% → 4% (messages 3%).
-  - Docs: https://raft-design.botiverse.build/foundations/states/#row-hover
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
 - **Rows with a menu open** (right-click, ⋯ menu, phone long-press): take `fill-row-open` while the menu is open; selection still wins. **Comment cards** hover with `fill-row-hover`. ([#643](https://github.com/botiverse/raft-design/pull/643))
   - Why: the open menu needs one marker of which row it belongs to, including on a phone where there is no hover.
   - Affects: menu-open background `fill-row-open` 5% / 4%.
-  - Docs: https://raft-design.botiverse.build/foundations/states/#row-hover
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
 - **Select, Combobox**: `collisionPadding` defaults to 8px. ([#642](https://github.com/botiverse/raft-design/pull/642))
   - Why: popups touched the screen edge on phones.
   - Affects: popup inset from the screen edge, 8px.

package/codemods/token-names.mjs

@@ -32,6 +32,12 @@ export const TOKEN_RENAMES = {
   "theme-shadow-sticker": "elevation-sticker",
   "theme-focus-ring": "focus-ring",
   "soft-signal": "palette-yellow",
+  "fill-pressed": "fill-medium",
+  "fill-frame-pressed": "fill-frame-medium",
+  "fill-row-hover": "fill-subtle",
+  "fill-row-open": "fill-subtle",
+  "fill-message-hover": "fill-subtle",
+  "sticker-pressed": "sticker-medium",
 };
 
 /** Families renamed with every step: `primary-soft` -> `brand-soft`. */
@@ -61,6 +67,10 @@ export const UTILITY_RENAMES = {
   "shadow-raft-xl": "shadow-float",
   "shadow-raft-sticker": "shadow-sticker",
   "shadow-raft-focus": "shadow-focus",
+  "press-overlay": "overlay-medium",
+  "press-overlay-sticker": "overlay-sticker-medium",
+  "row-hover-overlay": "overlay-subtle",
+  "row-open-overlay": "overlay-subtle",
 };
 
 const COLOR_UTILITY =
@@ -83,6 +93,8 @@ function rules() {
   for (const [from, to] of tokens) {
     list.push([new RegExp(`(?<![\\w-])(${COLOR_UTILITY})-${escape(from)}${END}`, "g"), `$1-${to}`]);
     list.push([new RegExp(`${VAR}${escape(from)}${REF_END}`, "g"), `--${to}`]);
+    // The Tailwind theme variable of the same token: `var(--color-fill-pressed)`.
+    list.push([new RegExp(`${VAR}color-${escape(from)}${REF_END}`, "g"), `--color-${to}`]);
   }
   for (const [from, to] of Object.entries(FAMILY_RENAMES)) {
     list.push([
@@ -90,6 +102,10 @@ function rules() {
       `$1-${to}$2`,
     ]);
     list.push([new RegExp(`${VAR}${from}((?:-[a-z0-9]+)*)${REF_END}`, "g"), `--${to}$1`]);
+    list.push([
+      new RegExp(`${VAR}color-${from}((?:-[a-z0-9]+)*)${REF_END}`, "g"),
+      `--color-${to}$1`,
+    ]);
   }
   for (const [from, to] of Object.entries(PALETTE_COLORS)) {
     list.push([

package/dist/cn.mjs

@@ -7,6 +7,8 @@ const twMerge = extendTailwindMerge({ extend: {
 		"control-cta",
 		"control-icon",
 		"control-hit",
+		"control-embedded",
+		"embedded-inset",
 		"option",
 		"option-inset",
 		"icon-inset"
@@ -50,7 +52,19 @@ const twMerge = extendTailwindMerge({ extend: {
 			"mono-code",
 			"control"
 		] }],
-		"font-weight": [{ font: ["field", "card-title"] }]
+		"font-weight": [{ font: ["field", "card-title"] }],
+		"bg-image": [
+			{ overlay: [
+				"subtle",
+				"medium",
+				"sticker-medium",
+				"frame-medium"
+			] },
+			"press-overlay",
+			"press-overlay-sticker",
+			"row-hover-overlay",
+			"row-open-overlay"
+		]
 	}
 } });
 function cn(...inputs) {

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

@@ -3,16 +3,24 @@
   min-width: 0;
   position: relative;
 }
+/* The chips, the clear button and the toggle are embedded in the field: they
+   sit --control-embedded-inset inside its outer edge and as far apart, and
+   are as tall as the field less that inset on both sides, so the field keeps
+   its height with chips in it. They wear the chip radius
+   (design/foundations/shape.md#inside-a-frame). Across the field the inset is
+   counted over the 1px Chromium draws the 1.5px border at (WebKit draws
+   1.5px: half a pixel more); down it the chips are centred in the field's
+   height, which holds on both. */
 .r-combobox-select__control {
   box-sizing: border-box;
   min-width: 0;
   min-height: var(--control-height);
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0 6px 0 12px;
+  gap: var(--control-embedded-inset);
+  padding: 0 calc(var(--control-embedded-inset) - 1px) 0 12px;
   border: 1.5px solid var(--line-field);
-  border-radius: 8px;
+  border-radius: var(--radius-control);
   outline: 0;
   background: var(--layer-card);
   color: var(--foreground);
@@ -38,30 +46,30 @@
   color: var(--foreground-hint);
 }
 .r-combobox-select__chips {
-  min-height: 28px;
+  min-height: var(--control-embedded-size);
   min-width: 0;
-  margin-inline-start: -6px;
-  padding: 6px 0;
+  margin-inline-start: calc(var(--control-embedded-inset) - 13px);
+  padding: calc(var(--control-embedded-inset) - 1.5px) 0;
   display: flex;
   flex: 1;
   flex-wrap: wrap;
   align-items: center;
-  gap: 6px;
+  gap: var(--control-embedded-inset);
   border: 0;
 }
 .r-combobox-select__chips .r-combobox-select__input {
-  min-height: 28px;
+  height: var(--control-embedded-size);
   padding: 0 4px;
 }
 .r-combobox-select__chip {
   max-width: 100%;
-  min-height: 28px;
+  height: var(--control-embedded-size);
   padding: 0 2px 0 8px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   overflow: hidden;
-  border-radius: 6px;
+  border-radius: var(--radius-chip);
   background: var(--fill-muted);
   color: var(--foreground);
   font-size: var(--text-footnote);
@@ -89,7 +97,7 @@
 .r-combobox-select__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.125rem;
+  gap: var(--control-embedded-inset);
   flex: 0 0 auto;
 }
 .r-combobox-select__action,
@@ -107,15 +115,15 @@
     background-color 150ms ease;
 }
 .r-combobox-select__remove {
-  width: 22px;
-  height: 22px;
-  border-radius: 4px;
+  width: calc(var(--control-embedded-size) - 4px);
+  height: calc(var(--control-embedded-size) - 4px);
+  border-radius: var(--radius-sticker);
   color: var(--foreground-hint);
 }
 .r-combobox-select__action {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
+  width: var(--control-embedded-size);
+  height: var(--control-embedded-size);
+  border-radius: var(--radius-chip);
   color: var(--foreground-hint);
 }
 .r-combobox-select__action > svg,
@@ -130,15 +138,28 @@
   width: 0.875rem;
   height: 0.875rem;
 }
-.r-combobox-select__action:hover,
-.r-combobox-select__remove:hover {
-  background: var(--fill-pressed);
+/* Hover only where there is a pointer that hovers: on a touch screen a
+   :hover would stay on the last button tapped. */
+@media (hover: hover) {
+  .r-combobox-select__action:hover,
+  .r-combobox-select__remove:hover {
+    background: var(--fill-medium);
+    color: var(--foreground);
+  }
+}
+.r-combobox-select__action:active,
+.r-combobox-select__remove:active {
+  background: var(--fill-medium);
   color: var(--foreground);
 }
-.r-combobox-select__action:focus-visible,
-.r-combobox-select__remove:focus-visible {
+.r-combobox-select__action:focus-visible {
   box-shadow: var(--focus-ring);
 }
+/* The chip clips anything outside it, so the remove button's ring is drawn
+   inside, after keyboard navigation only (styles.css, the keyboard variant). */
+.r-combobox-select__remove:focus-visible:not(:where(:root[data-input-modality="pointer"] *)) {
+  box-shadow: inset 0 0 0 2px var(--foreground);
+}
 .r-combobox-select__positioner {
   z-index: 50;
   isolation: isolate;
@@ -152,7 +173,7 @@
   max-height: min(var(--available-height), max(24rem, var(--combobox-select-list-max-height, 0px)));
   overflow: hidden;
   border: 0;
-  border-radius: 10px;
+  border-radius: var(--radius-container);
   background: var(--layer-popover);
   color: var(--foreground);
   box-shadow:
@@ -165,8 +186,8 @@
   max-height: var(--combobox-select-list-max-height, 16rem);
   overflow-y: auto;
   overscroll-behavior: contain;
-  scroll-padding-block: 6px;
-  padding: 6px;
+  scroll-padding-block: 4px;
+  padding: 4px;
 }
 .r-combobox-select__option {
   box-sizing: border-box;
@@ -180,7 +201,7 @@
   justify-content: space-between;
   gap: 10px;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: var(--radius-chip);
   cursor: default;
   user-select: none;
   color: var(--foreground);
@@ -192,7 +213,12 @@
     background-color 120ms ease,
     color 120ms ease;
 }
-.r-combobox-select__option:hover,
+@media (hover: hover) {
+  .r-combobox-select__option:hover {
+    background: var(--brand-soft);
+    color: var(--foreground);
+  }
+}
 .r-combobox-select__option[data-highlighted] {
   background: var(--brand-soft);
   color: var(--foreground);
@@ -250,23 +276,15 @@
   animation: r-combobox-select-spin 700ms linear infinite;
 }
 .r-combobox-select--sm.r-combobox-select__control {
-  min-height: 1.75rem;
+  --control-height: 1.75rem;
+  --control-embedded-inset: 3px;
+  --control-embedded-size: 22px;
   font-size: var(--text-control);
   line-height: var(--text-control--line-height);
 }
-.r-combobox-select--sm .r-combobox-select__chips {
-  min-height: 1.5rem;
-  padding: 1px 0;
-}
-.r-combobox-select--sm .r-combobox-select__chip {
-  min-height: 1.375rem;
-}
-.r-combobox-select--sm .r-combobox-select__action {
-  width: 1.5rem;
-  height: 1.5rem;
-}
 .r-combobox-select--lg.r-combobox-select__control {
-  min-height: 52px;
+  --control-height: 52px;
+  --control-embedded-size: 40px;
 }
 .r-combobox-select__control[data-status="error"] {
   border-color: var(--danger-strong);

package/dist/components/float-button/float-button.css

@@ -20,7 +20,7 @@
   --r-float-button-border-color: var(--line-strong);
   --r-float-button-bg: var(--layer-card);
   --r-float-button-bg-hover: var(--layer-card);
-  --r-float-button-press: var(--fill-pressed);
+  --r-float-button-press: var(--fill-medium);
   --r-float-button-text-color: var(--foreground);
   --r-float-button-text-hover-color: var(--foreground);
   --r-float-button-text-disabled-color: var(--foreground-disabled);
@@ -87,7 +87,7 @@
     --r-float-button-border-color: var(--sticker-ink);
     --r-float-button-bg: var(--attention-400);
     --r-float-button-bg-hover: var(--attention-400);
-    --r-float-button-press: var(--sticker-pressed);
+    --r-float-button-press: var(--sticker-medium);
     --r-float-button-text-color: var(--sticker-ink);
     --r-float-button-text-hover-color: var(--sticker-ink);
   }
@@ -95,7 +95,7 @@
     --r-float-button-border-color: var(--sticker-ink);
     --r-float-button-bg: var(--warning);
     --r-float-button-bg-hover: var(--warning);
-    --r-float-button-press: var(--sticker-pressed);
+    --r-float-button-press: var(--sticker-medium);
     --r-float-button-text-color: var(--sticker-ink);
     --r-float-button-text-hover-color: var(--sticker-ink);
   }
@@ -103,15 +103,15 @@
     --r-float-button-border-color: var(--sticker-ink);
     --r-float-button-bg: var(--danger);
     --r-float-button-bg-hover: var(--danger);
-    --r-float-button-press: var(--sticker-pressed);
+    --r-float-button-press: var(--sticker-medium);
     --r-float-button-text-color: var(--sticker-ink);
     --r-float-button-text-hover-color: var(--sticker-ink);
   }
   &.r-float-button--ghost {
     --r-float-button-border-color: transparent;
     --r-float-button-bg: transparent;
-    --r-float-button-bg-hover: var(--fill-pressed);
-    --r-float-button-press: transparent;
+    --r-float-button-bg-hover: transparent;
+    --r-float-button-press: var(--fill-medium);
   }
 }
 
@@ -159,11 +159,15 @@
     padding-right: var(--r-float-button-padding-x);
   }
 
-  &:hover:not(:disabled) {
-    background-color: var(--r-float-button-bg-hover);
-    color: var(--r-float-button-text-hover-color);
-    box-shadow: var(--r-float-button-shadow-hover);
-    transform: var(--r-float-button-transform-hover);
+  /* Hover only where there is a pointer that hovers: on a touch screen a
+     :hover would stay on the button after the tap. */
+  @media (hover: hover) {
+    &:hover:not(:disabled) {
+      background-color: var(--r-float-button-bg-hover);
+      color: var(--r-float-button-text-hover-color);
+      box-shadow: var(--r-float-button-shadow-hover);
+      transform: var(--r-float-button-transform-hover);
+    }
   }
 
   &:active:not(:disabled) {
@@ -179,7 +183,12 @@
 
   /* Press feedback lays one overlay over the resting fill instead of
      swapping it. */
-  &:is(:hover, :active):not(:disabled) {
+  @media (hover: hover) {
+    &:hover:not(:disabled) {
+      background-image: linear-gradient(var(--r-float-button-press), var(--r-float-button-press));
+    }
+  }
+  &:active:not(:disabled) {
     background-image: linear-gradient(var(--r-float-button-press), var(--r-float-button-press));
   }