@botiverse/raft-ui 0.95.0 → 0.95.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [0.95.1](https://github.com/botiverse/raft-design/compare/v0.95.0...v0.95.1) (2026-11-12)
+
+### Added
+
+- **`SelectTrigger fit`: a select as wide as its longest option** ([Select › As wide as its longest option](https://raft-design.botiverse.build/components/select/#as-wide-as-its-longest-option)) ([#1206](https://github.com/botiverse/raft-design/pull/1206), [#1207](https://github.com/botiverse/raft-design/pull/1207)). With `fit`, the trigger is as wide as the longest label in the root's `items` or its placeholder, at least 11rem and at most 20rem; past 20rem the value ends in an ellipsis. `SelectValue` lays every label out in its own place, invisible, 0px high and hidden from screen readers, so the width needs no script and stays the same whichever value is chosen.
+  - Why: a settings row's select sits at the row's end, as wide as its longest option ([Forms › A setting's row](https://raft-design.botiverse.build/patterns/forms/#a-settings-row)); a trigger that only lays out its value would shrink to a short one and move the row's end with each choice.
+  - Affects: nothing until a trigger sets `fit`. It needs `items` on `Select` and a `SelectValue` in the trigger; without `items` it stays at 11rem. A trigger without `fit` renders as before.
+  - Docs: https://raft-design.botiverse.build/components/select/#as-wide-as-its-longest-option
+
+### Changed
+
+- **An attached row under a row that is a target keeps its hairline and top inset** ([ListRow › A row that belongs to the setting above](https://raft-design.botiverse.build/components/list-row/#a-row-that-belongs-to-the-setting-above)) ([#1201](https://github.com/botiverse/raft-design/pull/1201)). A display-only `attached` row (`interactive={false}`) right under an interactive row now draws the hairline above it and, as a `plain` row, keeps its top inset. `ListRow` decides this from the row above (it now sets `data-interactive`), so callers change nothing.
+  - Why: under a target, dropping them left the target's hover and press fill ending on an edge you couldn't see, right against the attached row's own buttons (a pinned item with Remove and Replace under it).
+  - Affects: only that pair. An attached row under a display-only setting (quiet hours' times), and attached rows that are targets themselves (a level's per-channel rows), look as before.
+  - Docs: https://raft-design.botiverse.build/components/list-row/#a-row-that-belongs-to-the-setting-above
+- **`ArtifactIcon` (`@botiverse/ricons` 0.1.1): its page is drawn 2 wider** ([#1210](https://github.com/botiverse/raft-design/pull/1210)). raft-ui 0.95.1 depends on ricons 0.1.1.
+  - Why: Lucide's portrait page is 16 wide where the icons beside it in a rail or a menu are 20, so at the same size it read one size smaller.
+  - Affects: the page spans x 3 to 21 of the 24 grid (was 4 to 20), same height; `FollowArtifactIcon` and `UnfollowArtifactIcon` use the same page. The `< >` is unchanged.
+  - Docs: https://raft-design.botiverse.build/components/icons/
+
 ## [0.95.0](https://github.com/botiverse/raft-design/compare/v0.94.0...v0.95.0) (2026-11-11)
 
 ### Breaking

package/dist/components/list-row/list-row.mjs

@@ -36,6 +36,7 @@ function ListRow({ variant = "default", tone = "default", selected = false, inte
 		"data-tone": tone === "default" ? void 0 : tone,
 		"data-selected": selected ? "" : void 0,
 		"data-attached": attached ? "" : void 0,
+		"data-interactive": interactive ? "" : void 0,
 		className: root({ className }),
 		...interactive && !render ? { type: "button" } : {}
 	};

package/dist/components/list-row/list-row.recipe.mjs

@@ -1,5 +1,9 @@
 import { listCell, listCellFocus, listCellStates } from "../../lib/list-cell.mjs";
 import { tv } from "../../lib/tv.mjs";
+// src/components/list-row/list-row.recipe.ts
+const hairlineLine = ["before:pointer-events-none before:absolute before:top-0 before:right-0 before:hidden", "before:left-(--list-row-rule-start) before:border-t before:border-line-hairline"];
+const hairline = [...hairlineLine, "[[data-slot=list-row]+&]:before:block [li+li>&]:before:block"];
+const attachedAfterTarget = [...hairlineLine, "[[data-slot=list-row][data-interactive]:not([data-attached])+&]:before:block"];
 const listRow = tv({
 	slots: {
 		group: ["flex min-w-0 flex-col overflow-hidden", "rounded-container border border-line-hairline bg-layer-card text-foreground"],
@@ -70,17 +74,26 @@ const listRow = tv({
 			cell: false,
 			attached: false,
 			variant: ["default", "plain"],
-			class: { root: [
-				"before:pointer-events-none before:absolute before:top-0 before:right-0 before:hidden",
-				"before:left-(--list-row-rule-start) before:border-t before:border-line-hairline",
-				"[[data-slot=list-row]+&]:before:block [li+li>&]:before:block"
-			] }
+			class: { root: hairline }
 		},
 		{
 			variant: "plain",
 			attached: true,
 			class: { root: "pt-0" }
 		},
+		{
+			cell: false,
+			attached: true,
+			interactive: false,
+			variant: ["default", "plain"],
+			class: { root: attachedAfterTarget }
+		},
+		{
+			variant: "plain",
+			attached: true,
+			interactive: false,
+			class: { root: "[[data-slot=list-row][data-interactive]:not([data-attached])+&]:pt-(--settings-row-inset)" }
+		},
 		{
 			variant: "plain",
 			attached: true,

package/dist/components/select/select.d.mts

@@ -11,9 +11,19 @@ export type SelectProps<Value, Multiple extends boolean | undefined = false> = S
    */
   chrome?: SelectChrome;
 };
-declare function Select$1<Value, Multiple extends boolean | undefined = false>({ chrome, onValueChange, onOpenChange, isItemEqualToValue, itemToStringLabel, itemToStringValue, ...props }: SelectProps<Value, Multiple>): import("react").JSX.Element;
-export type SelectTriggerProps = StyledProps<Select.Trigger.Props> & DataAttributes;
-export declare function SelectTrigger({ className, children, render, "data-invalid": dataInvalid, ...props }: SelectTriggerProps): import("react").JSX.Element;
+declare function Select$1<Value, Multiple extends boolean | undefined = false>({ chrome, onValueChange, onOpenChange, isItemEqualToValue, itemToStringLabel, itemToStringValue, items, ...props }: SelectProps<Value, Multiple>): import("react").JSX.Element;
+export type SelectTriggerProps = StyledProps<Select.Trigger.Props> & DataAttributes & {
+  /**
+   * Makes the trigger as wide as its longest option and its placeholder, at
+   * least 11rem and at most 20rem, past which the value ends in an ellipsis.
+   * The width comes from every label in the root's `items`, so it stays the
+   * same whichever value is chosen. For a select at the end of a settings
+   * row; needs `items` on `Select` and a `SelectValue` in the trigger.
+   * @default false
+   */
+  fit?: boolean;
+};
+export declare function SelectTrigger({ className, children, render, fit, "data-invalid": dataInvalid, ...props }: SelectTriggerProps): import("react").JSX.Element;
 export type SelectValueProps = StyledProps<Select.Value.Props>;
 export declare function SelectValue({ className, ref, title, ...props }: SelectValueProps): import("react").JSX.Element;
 export type SelectIconProps = StyledProps<Select.Icon.Props>;

package/dist/components/select/select.mjs

@@ -39,6 +39,10 @@ const select = tv({
 			"[&>svg]:size-4 [&>svg]:stroke-2 [&>svg_*]:stroke-2"
 		],
 		value: ["flex min-w-0 flex-1 truncate text-left"],
+		fitFrame: ["grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)]"],
+		sizer: ["col-start-1 row-start-1 flex h-0 flex-col overflow-hidden", "pointer-events-none invisible select-none"],
+		sizerLabel: ["whitespace-nowrap font-semibold"],
+		sizerPlaceholder: ["whitespace-nowrap font-medium"],
 		positioner: ["isolate z-popup outline-none"],
 		content: [
 			"relative max-h-(--available-height) min-w-[max(var(--anchor-width),220px)] overflow-hidden",
@@ -100,19 +104,24 @@ const select = tv({
 		],
 		empty: ["px-2.5 py-2 text-left text-callout text-foreground-hint"]
 	},
-	variants: { chrome: {
-		default: {},
-		field: {
-			trigger: [
-				"px-3 text-field font-field",
-				"**:data-[slot='button-content']:font-field **:data-[slot='select-value']:font-field",
-				"h-control rounded-(--control-radius) py-0",
-				"data-placeholder:font-field"
-			],
-			item: ["text-field font-field", "**:data-[slot='select-item-text']:font-field"],
-			actionItem: ["text-field font-field"]
-		}
-	} },
+	variants: {
+		chrome: {
+			default: {},
+			field: {
+				trigger: [
+					"px-3 text-field font-field",
+					"**:data-[slot='button-content']:font-field **:data-[slot='select-value']:font-field",
+					"h-control rounded-(--control-radius) py-0",
+					"data-placeholder:font-field"
+				],
+				item: ["text-field font-field", "**:data-[slot='select-item-text']:font-field"],
+				actionItem: ["text-field font-field"],
+				sizerLabel: ["font-field"],
+				sizerPlaceholder: ["font-field"]
+			}
+		},
+		fit: { true: { trigger: ["w-auto min-w-44 max-w-80"] } }
+	},
 	defaultVariants: { chrome: "default" }
 });
 /**
@@ -133,6 +142,19 @@ function useSelectChrome() {
 	return useContext(SelectChromeContext);
 }
 /**
+* The root's `items`, for a `fit` trigger's sizer: Base UI keeps them in a
+* store of its own that the trigger can't read.
+*/
+const SelectItemsContext = createContext(void 0);
+/** Whether the trigger around a `SelectValue` sizes to the longest option. */
+const SelectFitContext = createContext(false);
+/** Every label in `items`, groups flattened: what a `fit` trigger may show. */
+function itemLabels(items) {
+	if (items == null) return [];
+	if (!Array.isArray(items)) return Object.values(items);
+	return items.flatMap((entry) => Array.isArray(entry.items) ? entry.items : [entry]).map((item) => item.label);
+}
+/**
 * The value a `SelectActionItem` gives Base UI, so the row joins the list's
 * navigation and typeahead like any item. The root recognises it and never lets
 * it become the value: a list action changes what the list shows, never what is
@@ -174,7 +196,7 @@ function keepActionHighlighted(event) {
 		if (lent) list.removeAttribute("tabindex");
 	});
 }
-function Select$1({ chrome = "default", onValueChange, onOpenChange, isItemEqualToValue, itemToStringLabel, itemToStringValue, ...props }) {
+function Select$1({ chrome = "default", onValueChange, onOpenChange, isItemEqualToValue, itemToStringLabel, itemToStringValue, items, ...props }) {
 	const pendingActionClose = useRef(void 0);
 	const handleValueChange = useCallback((next, details) => {
 		const action = findActionValue(next);
@@ -203,21 +225,28 @@ function Select$1({ chrome = "default", onValueChange, onOpenChange, isItemEqual
 	const handleStringValue = useMemo(() => itemToStringValue && ((item) => item instanceof SelectActionValue ? "" : itemToStringValue(item)), [itemToStringValue]);
 	return /* @__PURE__ */ jsx(SelectChromeContext, {
 		value: chrome,
-		children: /* @__PURE__ */ jsx(Select.Root, {
-			"data-slot": "select",
-			"data-chrome": chrome,
-			onValueChange: handleValueChange,
-			onOpenChange: handleOpenChange,
-			isItemEqualToValue: handleItemEquality,
-			itemToStringLabel: handleStringLabel,
-			itemToStringValue: handleStringValue,
-			...props
+		children: /* @__PURE__ */ jsx(SelectItemsContext, {
+			value: items,
+			children: /* @__PURE__ */ jsx(Select.Root, {
+				"data-slot": "select",
+				"data-chrome": chrome,
+				onValueChange: handleValueChange,
+				onOpenChange: handleOpenChange,
+				isItemEqualToValue: handleItemEquality,
+				itemToStringLabel: handleStringLabel,
+				itemToStringValue: handleStringValue,
+				items,
+				...props
+			})
 		})
 	});
 }
-function SelectTrigger({ className, children, render, "data-invalid": dataInvalid, ...props }) {
+function SelectTrigger({ className, children, render, fit = false, "data-invalid": dataInvalid, ...props }) {
 	const chrome = useSelectChrome();
-	const { trigger } = select({ chrome });
+	const { trigger } = select({
+		chrome,
+		fit
+	});
 	return /* @__PURE__ */ jsx(Select.Trigger, {
 		"data-slot": "select-trigger",
 		render: render ?? /* @__PURE__ */ jsx(Button, {
@@ -232,20 +261,59 @@ function SelectTrigger({ className, children, render, "data-invalid": dataInvali
 			"data-slot": "select-trigger-content",
 			"data-picker-trigger-content": "select",
 			className: "flex min-w-0 flex-1 items-center gap-1.5",
-			children
+			children: /* @__PURE__ */ jsx(SelectFitContext, {
+				value: fit,
+				children
+			})
 		})
 	});
 }
 function SelectValue({ className, ref, title, ...props }) {
-	const { value } = select();
+	const fit = useContext(SelectFitContext);
+	const { value, fitFrame } = select();
 	const overflowRef = useOverflowTitle(ref, title);
-	return /* @__PURE__ */ jsx(Select.Value, {
+	const node = /* @__PURE__ */ jsx(Select.Value, {
 		ref: overflowRef,
 		title,
 		"data-slot": "select-value",
-		className: value({ className }),
+		className: value({ className: cn(fit && "col-start-1 row-start-1", className) }),
 		...props
 	});
+	if (!fit) return node;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "select-value-fit",
+		className: fitFrame(),
+		children: [node, /* @__PURE__ */ jsx(SelectValueSizer, { placeholder: props.placeholder })]
+	});
+}
+/**
+* Every option's label and the placeholder, stacked in the value's grid cell,
+* invisible and 0px high: the cell is as wide as the widest of them, so the
+* trigger is too, whichever value shows. Each takes the weight it shows at, so
+* the width doesn't change when the placeholder gives way to a value.
+*/
+function SelectValueSizer({ placeholder }) {
+	const chrome = useSelectChrome();
+	const items = useContext(SelectItemsContext);
+	const { sizer, sizerLabel, sizerPlaceholder } = select({ chrome });
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		"data-slot": "select-value-sizer",
+		className: sizer(),
+		children: [typeof placeholder === "string" ? /* @__PURE__ */ jsx("span", {
+			"data-label": placeholder,
+			className: sizerPlaceholder({ className: "after:content-[attr(data-label)]" })
+		}) : placeholder != null && /* @__PURE__ */ jsx("span", {
+			className: sizerPlaceholder(),
+			children: placeholder
+		}), itemLabels(items).map((label, index) => typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsx("span", {
+			"data-label": label,
+			className: sizerLabel({ className: "after:content-[attr(data-label)]" })
+		}, index) : /* @__PURE__ */ jsx("span", {
+			className: sizerLabel(),
+			children: label
+		}, index))]
+	});
 }
 function SelectIcon({ className, children, ...props }) {
 	const { icon } = select();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.95.0",
+  "version": "0.95.1",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
-    "@botiverse/ricons": "^0.1.0",
+    "@botiverse/ricons": "^0.1.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",