@botiverse/raft-ui 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [0.18.0](https://github.com/botiverse/raft-design/compare/v0.17.0...v0.18.0) (2026-10-21)
+
+### Design System
+
+- **Field frames**: a field's ink frame is 1.5px, the same weight as a button's. It applies to Input, Textarea, InputGroup, Select, Combobox, ComboboxSelect, SearchTrigger, the composer and an option card. Read-only fields keep their light, thin edge. ([#661](https://github.com/botiverse/raft-design/pull/661))
+  - Why: a field sits next to its send button, its submit button and the selected row, all 1.5px ink; at 1px it was the one thin control among them and read as a lighter style rather than the same system.
+  - Affects: `line-field` width 1px → 1.5px.
+  - Docs: https://raft-design.botiverse.build/foundations/shape/
+- **Autofill**: a field the browser filled in looks like any other field, `layer-card` with ink text. ([#661](https://github.com/botiverse/raft-design/pull/661))
+  - Why: Chrome's pale blue and Safari's yellow made the filled field the one field on the page that matched nothing else, and the colour tells a person nothing.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#autofill
+
+### Fixed
+
+- **Input, Textarea, Select and every other field**: browser autofill no longer paints a field pale blue or yellow. raft-ui's `styles.css` handles every `input`, `textarea` and `select` on the page; a disabled autofilled field keeps the disabled ink. ([#661](https://github.com/botiverse/raft-design/pull/661))
+  - Why: see Autofill above.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#autofill
+
 ## [0.17.0](https://github.com/botiverse/raft-design/compare/v0.16.0...v0.17.0) (2026-10-21)
 
 ### Design System

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

@@ -11,7 +11,7 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0 6px 0 12px;
-  border: 1px solid var(--line-field);
+  border: 1.5px solid var(--line-field);
   border-radius: 8px;
   outline: 0;
   background: var(--layer-card);

package/dist/index.mjs

@@ -880,7 +880,7 @@ const card = tv({
 		*  in the control plane, and its title drops from the card-title scale
 		*  to the field scale so it cannot outrank the field label above it. */
 		option: {
-			root: ["rounded-control border border-line-field bg-layer-card", "shadow-none"],
+			root: ["rounded-control border-[1.5px] border-line-field bg-layer-card", "shadow-none"],
 			header: ["gap-x-3 p-3"],
 			content: ["px-3 pb-3"],
 			title: ["font-sans text-callout font-semibold"],
@@ -3682,7 +3682,7 @@ const Label = Object.assign(LabelRoot, {
 //#region src/components/input/input.recipe.ts
 const input = tv({ slots: { root: [
 	"h-control w-full px-3 py-0 font-heading text-field font-field outline-none",
-	"rounded-control border border-line-field bg-layer-card",
+	"rounded-control border-[1.5px] border-line-field bg-layer-card",
 	"text-foreground placeholder:text-foreground-hint",
 	"shadow-none transition-shadow duration-90 ease-out focus-visible:shadow-focus",
 	"data-invalid:border-danger-strong",
@@ -3806,7 +3806,7 @@ const inputGroup = tv({
 		root: [
 			"group/input-group relative flex w-full min-w-0 items-center",
 			"has-data-[input-group-trim=inline-end]:[--ig-control-pr:0]",
-			"h-control overflow-hidden rounded-control border border-line-field bg-layer-card text-foreground",
+			"h-control overflow-hidden rounded-control border-[1.5px] border-line-field bg-layer-card text-foreground",
 			"shadow-none transition-shadow duration-90 ease-out has-focus-visible:shadow-focus",
 			"has-[[data-slot=input-group-control][data-invalid]]:border-danger-strong",
 			"has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:border-line-hairline has-[[data-slot=input-group-control]:disabled]:bg-fill-muted",
@@ -4002,7 +4002,7 @@ const combobox = tv({
 			"[&_[data-slot='combobox-clear']]:size-5 [&_[data-slot='combobox-clear']]:min-w-5 **:data-[slot='combobox-clear']:shrink-0",
 			"[&_[data-slot='combobox-trigger-indicator']]:size-4",
 			"[&_[data-slot='combobox-trigger-indicator']>svg]:shrink-0",
-			"min-h-control rounded-control border border-line-field bg-layer-card px-3 py-0",
+			"min-h-control rounded-control border-[1.5px] border-line-field bg-layer-card px-3 py-0",
 			"font-sans text-body text-foreground",
 			"transition-shadow duration-90 ease-out has-focus-visible:shadow-focus",
 			"[&>svg]:text-foreground-hint [&>svg:not([class*='size-'])]:size-4.5",
@@ -4056,7 +4056,7 @@ const combobox = tv({
 		groupLabel: ["py-2", "px-2.5 pt-2 pb-1 text-caption font-bold text-foreground-hint"],
 		chips: [
 			"flex flex-wrap items-center",
-			"min-h-control gap-1.5 rounded-control border border-line-field bg-layer-card py-1.5 pr-3 pl-1.5",
+			"min-h-control gap-1.5 rounded-control border-[1.5px] border-line-field bg-layer-card py-1.5 pr-3 pl-1.5",
 			"transition-shadow duration-90 ease-out has-focus-visible:shadow-focus"
 		],
 		chip: [
@@ -4433,7 +4433,7 @@ const select = tv({
 			"[&>span[data-slot='select-trigger-content']]:min-w-0 [&>span[data-slot='select-trigger-content']]:flex-1",
 			"[&_[data-slot='select-trigger-content']_svg]:shrink-0",
 			"h-control w-full gap-2 pr-3 pl-3.5",
-			"border border-line-field",
+			"border-[1.5px] border-line-field",
 			"text-subhead font-semibold text-foreground",
 			"data-placeholder:font-medium data-placeholder:text-foreground-hint",
 			"data-invalid:border-danger-strong data-invalid:hover:border-danger-strong",
@@ -5029,7 +5029,7 @@ const textarea = tv({ slots: { root: [
 	"scroll-pb-(--ta-scroll-pb,0)",
 	"font-heading text-field font-field outline-none",
 	"py-2.5",
-	"rounded-control border border-line-field bg-layer-card",
+	"rounded-control border-[1.5px] border-line-field bg-layer-card",
 	"text-foreground placeholder:text-foreground-hint",
 	"shadow-none transition-shadow duration-90 ease-out focus-visible:shadow-focus",
 	"data-invalid:border-danger-strong",
@@ -8582,7 +8582,7 @@ function FileAction({ variant, size = "icon-sm", ...props }) {
 const composer = tv({ slots: {
 	root: [
 		"flex w-full flex-col gap-2 p-2",
-		"rounded-container border px-3 pt-3 pb-2",
+		"rounded-container border-[1.5px] px-3 pt-3 pb-2",
 		"border-line-field bg-layer-card text-foreground shadow-none",
 		"has-focus-visible:shadow-focus"
 	],
@@ -16801,7 +16801,7 @@ function SearchThreadResultMessages({ className, render, ...props }) {
 const searchTrigger = tv({ slots: {
 	root: [
 		"relative inline-flex h-9 w-[clamp(360px,32vw,520px)] max-w-full min-w-0 shrink-0 items-center gap-2 px-3",
-		"rounded-control border border-line-field bg-layer-card",
+		"rounded-control border-[1.5px] border-line-field bg-layer-card",
 		"text-left font-sans text-body font-normal text-foreground-hint",
 		"select-none outline-none transition-colors duration-100",
 		"hover:press-overlay active:press-overlay focus-visible:shadow-focus",

package/dist/style.css

@@ -1062,7 +1062,7 @@
   box-sizing: border-box;
   min-width: 0;
   min-height: var(--control-height);
-  border: 1px solid var(--line-field);
+  border: 1.5px solid var(--line-field);
   background: var(--layer-card);
   color: var(--foreground);
   font-size: var(--field-font-size);

package/dist/styles.css

@@ -479,6 +479,30 @@ body {
   position: relative;
 }
 
+/* Browser autofill paints its own fill over a field (Chrome's pale blue,
+   Safari's yellow), so a filled-in login form showed fields that matched no
+   other field (design/foundations/states.md#autofill). The browser sets that
+   fill !important, so it can't be overridden; delaying the transition into it
+   keeps the field on its own surface, and the text keeps the field's ink.
+   box-shadow keeps the fields' own transition (the focus ring). The delay
+   also holds the field's own background while it stays autofilled: switching
+   light and dark mode then keeps the old surface until the field is edited. */
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-text-fill-color: var(--foreground);
+  caret-color: var(--foreground);
+  transition:
+    background-color 0s 600000s,
+    color 0s 600000s,
+    box-shadow 90ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+input:-webkit-autofill:disabled,
+textarea:-webkit-autofill:disabled {
+  -webkit-text-fill-color: var(--foreground-disabled);
+}
+
 /* The passages comments are on, painted with the CSS Custom Highlight API so
    the document's DOM is never changed (setCommentHighlights registers the
    ranges; design/patterns/comments.md). Every commented passage gets the soft

package/dist/tokens.json

@@ -1645,7 +1645,7 @@
     },
     "field": {
       "$value": "{line.strong}",
-      "$description": "The frame of a field and the composer: the ink of line-strong, drawn 1px.",
+      "$description": "The frame of a field and the composer: the ink and width of line-strong, drawn 1.5px.",
       "$extensions": {
         "build.botiverse.raft": {
           "scope": "every-mode"

package/package.json

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