@botiverse/raft-ui 0.47.0 → 0.48.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [0.48.0](https://github.com/botiverse/raft-design/compare/v0.47.1...v0.48.0) (2026-10-28)
+
+### Design System
+
+- **Hover and press on an ink sticker:** the server tile (rail header, sidebar header) is ink, and ink over ink doesn't show, so it hovers, presses and shows its open list with 6% paper, in light and dark. ([#875](https://github.com/botiverse/raft-design/pull/875))
+  - Docs: https://raft-design.botiverse.build/foundations/states/
+
+### Added
+
+- Token **`sticker-ink-medium`** (6% paper in both modes) and the utility `overlay-sticker-ink-medium`. ([#875](https://github.com/botiverse/raft-design/pull/875))
+
+## [0.47.1](https://github.com/botiverse/raft-design/compare/v0.47.0...v0.47.1) (2026-10-28)
+
+### Fixed
+
+- **SelectActionItem:** when its action adds items above the row and the list stays open, the row keeps the highlight, so the next arrow key goes on from the row instead of from whatever item now sits at its old position. ([#873](https://github.com/botiverse/raft-design/pull/873))
+- **SelectActionItem:** the docs no longer ask for `aria-expanded`, which ARIA does not allow on an option; remove it where you added it. ([#873](https://github.com/botiverse/raft-design/pull/873))
+  - Docs: https://raft-design.botiverse.build/components/select/
+
 ## [0.47.0](https://github.com/botiverse/raft-design/compare/v0.46.0...v0.47.0) (2026-10-28)
 
 ### Changed

package/dist/foundation.css

@@ -364,6 +364,10 @@
      colour badges, the selected segment on press): hover and press, 10% ink in
      both modes. */
   --sticker-medium: oklch(0.1813 0.005 17.62 / 0.1);
+  /* Hover tier medium on an ink sticker (the server tile in the rail or the
+     sidebar header): hover, press and open, 6% paper in both modes, since ink
+     laid over ink doesn't show. */
+  --sticker-ink-medium: oklch(1 0 0 / 0.06);
   --presence-online: oklch(0.8272 0.1354 130.07);
   /* Yellow for an agent at work, and for Status variant="primary". The value of
      brand in Raft Yellow, but its own, so a theme that grays the brand (Boring

package/dist/index.d.mts

@@ -1157,8 +1157,9 @@ type SelectActionItemProps = StyledProps<Omit<Select$1.Item.Props, "value" | "la
 /**
  * An action row inside the list, placed last after a `SelectSeparator`, such as
  * Show All. It is reached by the arrow keys and typeahead like an item, but
- * pressing it runs `onAction` instead of choosing a value. Pass `aria-expanded`
- * when it shows or hides more of the list.
+ * pressing it runs `onAction` instead of choosing a value. It is an option to
+ * assistive technology, so it takes no `aria-expanded`: its label says what it
+ * does.
  */
 export declare function SelectActionItem({ className, onAction, closeOnAction, ...props }: SelectActionItemProps): import("react").JSX.Element;
 type SelectLabelProps = StyledProps<Select$1.Label.Props>;

package/dist/index.mjs

@@ -4211,7 +4211,7 @@ const select = tv({
 		itemText: ["min-w-0 flex-1 line-clamp-2 wrap-anywhere"],
 		itemDescription: [
 			"order-last min-w-0 basis-full wrap-anywhere",
-			"[[data-slot=select-item-leading]~&]:ps-[calc(--spacing(4)+--spacing(2.5))]",
+			"[[data-slot=select-item-leading]~&]:ps-[calc(--spacing(4)+(--spacing(2.5)))]",
 			"font-sans text-caption font-normal text-foreground-hint"
 		],
 		label: ["m-0", "font-sans text-footnote font-semibold text-foreground-muted"],
@@ -4277,6 +4277,24 @@ function findActionValue(value) {
 	if (value instanceof SelectActionValue) return value;
 	if (Array.isArray(value)) return value.find((entry) => entry instanceof SelectActionValue);
 }
+/**
+* Base UI keeps the highlight by position. When an action adds items above its
+* row, the same position then holds another item while focus stays on the row,
+* and the next arrow key starts from the wrong place. Once the list has
+* re-rendered, focus the list and then the row again: the row's focus handler
+* re-reads its position and moves the highlight back to it.
+*/
+function keepActionHighlighted(event) {
+	const target = event.target;
+	if (!(target instanceof Element)) return;
+	const row = target.closest("[data-slot=\"select-action-item\"]");
+	if (!row) return;
+	requestAnimationFrame(() => {
+		if (!row.isConnected || row.hasAttribute("data-highlighted")) return;
+		row.closest("[role=\"listbox\"]")?.focus({ preventScroll: true });
+		row.focus({ preventScroll: true });
+	});
+}
 function Select({ chrome = "default", onValueChange, onOpenChange, isItemEqualToValue, itemToStringLabel, itemToStringValue, ...props }) {
 	const pendingActionClose = useRef(void 0);
 	const handleValueChange = useCallback((next, details) => {
@@ -4290,6 +4308,7 @@ function Select({ chrome = "default", onValueChange, onOpenChange, isItemEqualTo
 		if (details.reason !== "item-press") return;
 		pendingActionClose.current = action.closeOnActionRef.current;
 		action.onActionRef.current?.(details.event);
+		if (!action.closeOnActionRef.current) keepActionHighlighted(details.event);
 	}, [onValueChange]);
 	const handleOpenChange = useCallback((open, details) => {
 		const closeOnAction = pendingActionClose.current;
@@ -4505,8 +4524,9 @@ function SelectItemDescription({ className, id, ...props }) {
 /**
 * An action row inside the list, placed last after a `SelectSeparator`, such as
 * Show All. It is reached by the arrow keys and typeahead like an item, but
-* pressing it runs `onAction` instead of choosing a value. Pass `aria-expanded`
-* when it shows or hides more of the list.
+* pressing it runs `onAction` instead of choosing a value. It is an option to
+* assistive technology, so it takes no `aria-expanded`: its label says what it
+* does.
 */
 function SelectActionItem({ className, onAction, closeOnAction = false, ...props }) {
 	const chrome = useSelectChrome();

package/dist/styles.css

@@ -305,6 +305,7 @@
   --color-sticker-paper: var(--sticker-paper);
   --color-sticker-edge: var(--sticker-edge);
   --color-sticker-medium: var(--sticker-medium);
+  --color-sticker-ink-medium: var(--sticker-ink-medium);
   --color-presence-online: var(--presence-online);
   --color-presence-busy: var(--presence-busy);
   --color-presence-busy-soft: var(--presence-busy-soft);
@@ -830,6 +831,10 @@ textarea:-webkit-autofill:disabled {
   background-image: linear-gradient(var(--sticker-medium), var(--sticker-medium));
 }
 
+@utility overlay-sticker-ink-medium {
+  background-image: linear-gradient(var(--sticker-ink-medium), var(--sticker-ink-medium));
+}
+
 @utility overlay-frame-medium {
   background-image: linear-gradient(var(--fill-frame-medium), var(--fill-frame-medium));
 }

package/dist/tokens.json

@@ -2849,6 +2849,14 @@
         "components": [0.1813, 0.005, 17.62],
         "alpha": 0.1
       }
+    },
+    "ink-medium": {
+      "$description": "Hover tier medium on an ink sticker (the server tile in the rail or the sidebar header): hover, press and open, 6% paper in both modes, since ink laid over ink doesn't show.",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [1, 0, 0],
+        "alpha": 0.06
+      }
     }
   },
   "presence": {

package/package.json

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