@botiverse/raft-ui 0.67.0 → 0.69.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [0.69.0](https://github.com/botiverse/raft-design/compare/v0.68.0...v0.69.0) (2026-11-06)
+
+### Added
+
+- **InputGroup** `size`: `md` for a field in a toolbar or a filter row, `lg` (the default, unchanged) for a field on its own. At `md` the field is the row's button height: 32px on a phone and a touch screen, like the `md` Buttons and PickerTriggerButtons beside it, with its input taking a 44px tap area, 6px past the box above and below; with a mouse it stays the control height, 34px. The root carries `data-size`. A Button in an `md` field's end addon is 20px by touch (22px with a mouse), 6px inside the box. ([#1039](https://github.com/botiverse/raft-design/pull/1039))
+  - Why: on a tablet held landscape, a 44px search field beside 32px filter triggers and a view switch read taller and heavier than the rest of the filter row; a field in a row now takes the row's button height.
+  - Affects: nothing until a field opts in with `size="md"`; every InputGroup without it renders as before.
+  - Docs: https://raft-design.botiverse.build/components/input-group/#sizes
+
+## [0.68.0](https://github.com/botiverse/raft-design/compare/v0.67.0...v0.68.0) (2026-11-06)
+
+### Changed
+
+- **MobileNavServerPopoverDestinations** (`@botiverse/raft-ui/wip`): more than 4 destinations take 3 columns, rows of 3 with the last row from the left (`data-layout="grid"`); each button keeps its height, icon, label size and hit area. 4 or fewer stay in one row (`data-layout="row"`). The count is of the element children, looking inside fragments. ([#1037](https://github.com/botiverse/raft-design/pull/1037))
+  - Why: a server tab that holds Artifacts, Members, Computers, Apps and Settings put five in a row, which truncated labels such as "Computadoras" at 360px; a third of the popover keeps them whole in every language.
+  - Affects: a server tab popover with more than 4 destinations; up to 4 are unchanged.
+  - Docs: https://raft-design.botiverse.build/components/mobile-nav/#the-server-tab
+
 ## [0.67.0](https://github.com/botiverse/raft-design/compare/v0.66.0...v0.67.0) (2026-11-06)
 
 ### Added

package/dist/components/input-group/input-group.d.mts

@@ -7,6 +7,12 @@ import { ComponentPropsWithRef } from "react";
 import { Input } from "@base-ui/react/input";
 //#region src/components/input-group/input-group.d.ts
 declare const inputGroup: import("tailwind-variants/lite").TVReturnType<{
+  size: {
+    md: {
+      root: string[];
+    };
+    lg: {};
+  };
   align: {
     "inline-start": {
       addon: string;
@@ -31,6 +37,12 @@ declare const inputGroup: import("tailwind-variants/lite").TVReturnType<{
   textInner: string[];
   control: string[];
 }, undefined, {
+  size: {
+    md: {
+      root: string[];
+    };
+    lg: {};
+  };
   align: {
     "inline-start": {
       addon: string;
@@ -55,6 +67,12 @@ declare const inputGroup: import("tailwind-variants/lite").TVReturnType<{
   textInner: string[];
   control: string[];
 }, import("tailwind-variants/lite").TVReturnTypeLike<{
+  size: {
+    md: {
+      root: string[];
+    };
+    lg: {};
+  };
   align: {
     "inline-start": {
       addon: string;
@@ -79,8 +97,16 @@ declare const inputGroup: import("tailwind-variants/lite").TVReturnType<{
   textInner: string[];
   control: string[];
 }>>;
-export type InputGroupProps = ComponentPropsWithRef<"div">;
-export declare function InputGroup({ className, ...props }: InputGroupProps): import("react").JSX.Element;
+export type InputGroupProps = ComponentPropsWithRef<"div"> & {
+  /**
+   * `lg` (default): the control height, for a field on its own in a form or a
+   * dialog. `md`: a field in a toolbar or a filter row, as high as the row's
+   * `md` buttons and filter triggers (32px by touch, with a 44px tap area; the
+   * control height with a mouse).
+   */
+  size?: "md" | "lg";
+};
+export declare function InputGroup({ size, className, ...props }: InputGroupProps): import("react").JSX.Element;
 export type InputGroupAddonProps = ComponentPropsWithRef<"div"> & Pick<VariantProps<typeof inputGroup>, "align" | "variant">;
 declare function InputGroupAddonRoot({ align, variant, className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
 export type InputGroupAddonTextProps = ComponentPropsWithRef<"span"> & Pick<VariantProps<typeof inputGroup>, "align" | "variant">;

package/dist/components/input-group/input-group.mjs

@@ -37,6 +37,18 @@ const inputGroup = tv({
 		]
 	},
 	variants: {
+		size: {
+			md: { root: [
+				"h-8 md:pointer-fine:h-control rounded-control overflow-visible",
+				"[--ig-hit:calc(--spacing(1.5)+1.5px)] md:pointer-fine:[--ig-hit:0px]",
+				"*:data-[slot=input-group-control]:-my-(--ig-hit) *:data-[slot=input-group-control]:h-[calc(100%+2*var(--ig-hit))]",
+				"[--control-embedded-size:calc(2rem-2*var(--control-embedded-inset))]",
+				"md:pointer-fine:[--control-embedded-size:calc(var(--control-height)-2*var(--control-embedded-inset))]",
+				"*:data-[variant=container]:data-[align=inline-start]:rounded-s-[calc(var(--radius-control)-1.5px)]",
+				"*:data-[variant=container]:data-[align=inline-end]:rounded-e-[calc(var(--radius-control)-1.5px)]"
+			] },
+			lg: {}
+		},
 		align: {
 			"inline-start": {
 				addon: "order-first",
@@ -111,14 +123,16 @@ const inputGroup = tv({
 		}
 	],
 	defaultVariants: {
+		size: "lg",
 		align: "inline-start",
 		variant: "default"
 	}
 });
-function InputGroup({ className, ...props }) {
-	const { root } = inputGroup();
+function InputGroup({ size = "lg", className, ...props }) {
+	const { root } = inputGroup({ size });
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
+		"data-size": size,
 		className: root({ className }),
 		...props
 	});

package/dist/components/mobile-nav/mobile-nav-server.d.mts

@@ -47,8 +47,17 @@ export type MobileNavServerPopoverRowLabelProps = ComponentPropsWithRef<"span">;
 /** A row's label: takes the room and truncates. */
 export declare function MobileNavServerPopoverRowLabel({ className, ...props }: MobileNavServerPopoverRowLabelProps): import("react").JSX.Element;
 export type MobileNavServerPopoverDestinationsProps = ComponentPropsWithRef<"div">;
-/** The server's own pages, side by side in equal cells; a `group`, named with `aria-label`. */
-export declare function MobileNavServerPopoverDestinations({ className, ...props }: MobileNavServerPopoverDestinationsProps): import("react").JSX.Element;
+/**
+ * The server's own pages in equal cells; a `group`, named with `aria-label`.
+ * Up to 4 sit side by side in one row (`data-layout="row"`). More than 4
+ * take 3 columns, rows of 3 with the last row starting at the left
+ * (`data-layout="grid"`), so each label keeps a third of the popover and
+ * stays whole in every language. The count is of the element children, taken
+ * in React, looking inside fragments (a product puts the pages a guest lacks
+ * in one): counting them in CSS would take a structural pseudo-class on the
+ * children, which the WebKit selector rules in CLAUDE.md forbid.
+ */
+export declare function MobileNavServerPopoverDestinations({ className, children, ...props }: MobileNavServerPopoverDestinationsProps): import("react").JSX.Element;
 export type MobileNavServerPopoverDestinationProps = ComponentPropsWithRef<"button">;
 /**
  * One of the server's pages: a 20px icon over a short label in a `span`, which

package/dist/components/mobile-nav/mobile-nav-server.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 import { MobileNavItem } from "./mobile-nav.mjs";
 import "../../lib/touch-drag.mjs";
 import { PopoverContent } from "../popover/popover.mjs";
-import { createContext, use, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Children, Fragment, createContext, isValidElement, use, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region src/components/mobile-nav/mobile-nav-server.tsx
@@ -33,7 +33,7 @@ const mobileNavServer = tv({ slots: {
 	rowLabel: ["min-w-0 flex-1 truncate"],
 	rowBody: ["flex min-w-0 flex-1 flex-col"],
 	rowDescription: ["min-w-0 truncate", "font-mono text-mono-meta font-normal text-foreground-hint"],
-	destinations: ["grid shrink-0 grid-flow-col auto-cols-fr gap-1 p-1"],
+	destinations: ["grid shrink-0 grid-flow-col auto-cols-fr gap-1 p-1", "data-[layout=grid]:grid-flow-row data-[layout=grid]:grid-cols-3"],
 	destination: [
 		"relative flex min-w-0 cursor-default select-none flex-col items-center justify-center",
 		"outline-none transition-colors",
@@ -231,14 +231,28 @@ function MobileNavServerPopoverRowLabel({ className, ...props }) {
 		...props
 	});
 }
-/** The server's own pages, side by side in equal cells; a `group`, named with `aria-label`. */
-function MobileNavServerPopoverDestinations({ className, ...props }) {
+/** Past this many pages, the row becomes a grid of 3 columns. */
+const DESTINATIONS_IN_ONE_ROW = 4;
+/**
+* The server's own pages in equal cells; a `group`, named with `aria-label`.
+* Up to 4 sit side by side in one row (`data-layout="row"`). More than 4
+* take 3 columns, rows of 3 with the last row starting at the left
+* (`data-layout="grid"`), so each label keeps a third of the popover and
+* stays whole in every language. The count is of the element children, taken
+* in React, looking inside fragments (a product puts the pages a guest lacks
+* in one): counting them in CSS would take a structural pseudo-class on the
+* children, which the WebKit selector rules in CLAUDE.md forbid.
+*/
+function MobileNavServerPopoverDestinations({ className, children, ...props }) {
 	const { destinations } = mobileNavServer();
+	const count = countElements(children);
 	return /* @__PURE__ */ jsx("div", {
 		role: "group",
 		"data-slot": "mobile-nav-server-popover-destinations",
+		"data-layout": count > DESTINATIONS_IN_ONE_ROW ? "grid" : "row",
 		className: destinations({ className }),
-		...props
+		...props,
+		children
 	});
 }
 /**
@@ -279,6 +293,15 @@ function MobileNavServerPopoverRowDescription({ className, ...props }) {
 		...props
 	});
 }
+/** The element children, counting a fragment's elements rather than the fragment. */
+function countElements(children) {
+	let count = 0;
+	for (const child of Children.toArray(children)) {
+		if (!isValidElement(child)) continue;
+		count += child.type === Fragment ? countElements(child.props.children) : 1;
+	}
+	return count;
+}
 function assignRef(ref, value) {
 	if (typeof ref === "function") ref(value);
 	else if (ref) ref.current = value;

package/package.json

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