@botiverse/raft-ui 0.68.0 → 0.70.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [0.70.0](https://github.com/botiverse/raft-design/compare/v0.69.0...v0.70.0) (2026-11-06)
+
+### Fixed
+
+- **PickerTriggerButton** and **SegmentedControlItem**: on a phone and a touch screen they still look 32px but take a 44px tap area, as a Button at `md` does, through a transparent `::after` 6px past the box above and below. A segment's reaches up and down only (3px past its track), so the tap areas of segments 3px apart don't overlap; while the segments scroll inside the track (`data-overflowing`), the track scrolls sideways only and the tap area stops at its edge. ([#1041](https://github.com/botiverse/raft-design/pull/1041))
+  - Why: they were the two controls of a toolbar or filter row whose tap area stayed 32px by touch, beside an `md` Button and an `md` InputGroup that reach 44px.
+  - Affects: touch screens, and windows narrower than 768px; with a mouse on a desktop they are the control height, 34px, and take no taps past the box, as before. Keep 6px between them and the controls above and below, as with a Button at `md`.
+  - Docs: https://raft-design.botiverse.build/foundations/spacing/#heights
+
+## [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

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/picker-trigger-button/picker-trigger-button.mjs

@@ -5,6 +5,7 @@ import { Button } from "@base-ui/react/button";
 //#region src/components/picker-trigger-button/picker-trigger-button.tsx
 const pickerTriggerButton = tv({ base: [
 	"relative inline-flex h-8 md:pointer-fine:h-control shrink-0 items-center justify-center",
+	"after:absolute after:inset-x-0 after:-inset-y-1.5 md:pointer-fine:after:hidden",
 	"whitespace-nowrap select-none",
 	"outline-[1px] outline-offset-2 outline-transparent transition-colors duration-100 focus-visible:outline-transparent",
 	"disabled:pointer-events-none disabled:transform-none",

package/dist/components/segmented-control/segmented-control.mjs

@@ -13,13 +13,14 @@ const segmentedControl = tv({
 			"inline-flex min-w-0 items-center",
 			"w-fit max-w-full flex-nowrap gap-[3px] rounded-[11px] bg-fill-muted p-[3px]",
 			"[--segment-size:2rem] md:pointer-fine:[--segment-size:var(--control-height)]",
-			"data-overflowing:overflow-x-auto data-overflowing:overscroll-x-contain data-overflowing:scrollbar-none"
+			"data-overflowing:overflow-x-auto data-overflowing:overflow-y-hidden data-overflowing:overscroll-x-contain data-overflowing:scrollbar-none"
 		],
 		item: [
 			"inline-flex min-w-0 shrink-0 items-center gap-1.5",
 			"outline-none disabled:pointer-events-none",
 			"[&_svg]:pointer-events-none [&_svg]:shrink-0",
 			"h-(--segment-size) justify-center rounded-control border-[1.5px] border-transparent bg-transparent px-3",
+			"relative after:absolute after:inset-x-0 after:-inset-y-[calc(--spacing(1.5)+1.5px)] md:pointer-fine:after:hidden",
 			"font-sans text-callout font-semibold text-foreground-muted",
 			"[&_svg:not([class*='size-'])]:size-4",
 			"hover:bg-fill-medium active:bg-fill-medium",

package/package.json

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