@botiverse/raft-ui 0.9.5 → 0.10.0

package/dist/style.css

@@ -148,7 +148,7 @@
     transform: var(--r-float-button-transform-active);
   }
 
-  &:focus-visible {
+  &:focus-visible:not(:where(:root[data-input-modality="pointer"] *)) {
     outline: var(--r-float-button-outline);
     outline-offset: var(--r-float-button-outline-offset);
   }
@@ -269,10 +269,10 @@
 }
 .r-timeline {
   --r-timeline-icon-size: var(--r-timeline-custom-icon-size, 9px);
-  --r-timeline-title-font-size: 14px;
-  --r-timeline-content-font-size: 12px;
-  --r-timeline-time-font-size: 12px;
-  --r-timeline-line-height: 20px;
+  --r-timeline-title-font-size: var(--text-callout);
+  --r-timeline-content-font-size: var(--text-mono-meta);
+  --r-timeline-time-font-size: var(--text-mono-meta);
+  --r-timeline-line-height: var(--text-callout--line-height);
   --r-timeline-item-inner-gap: 2px;
   --r-timeline-title-font-family: var(--font-sans);
   --r-timeline-title-font-weight: 400;
@@ -285,7 +285,7 @@
   --r-timeline-marker-radius: 2px;
   --r-timeline-marker-fill: 100%;
   --r-timeline-marker-border-color: var(--sticker-ink);
-  --r-timeline-axis-offset: calc((20px - var(--r-timeline-icon-size)) / 2);
+  --r-timeline-axis-offset: calc((var(--r-timeline-line-height) - var(--r-timeline-icon-size)) / 2);
 
   &.r-timeline--lg {
     --r-timeline-title-font-size: 16px;
@@ -430,8 +430,8 @@
   color: var(--foreground-hint);
   font-family: var(--font-mono);
   font-size: var(--r-timeline-content-font-size);
+  line-height: var(--text-mono-meta--line-height);
   overflow-wrap: anywhere;
-  line-height: 16px;
 }
 
 .r-timeline-time {
@@ -501,9 +501,9 @@
   --r-steps-indicator-size: 20px;
   --r-steps-indicator-font-size: 12px;
   --r-steps-icon-size: 14px;
-  --r-steps-title-font-size: 13px;
-  --r-steps-description-font-size: 12px;
-  --r-steps-line-height: calc(18 / 13);
+  --r-steps-title-font-size: var(--text-footnote);
+  --r-steps-description-font-size: var(--text-caption);
+  --r-steps-line-height: var(--text-footnote--line-height);
   --r-steps-gap: 8px;
   --r-steps-connector-gap: 8px;
   --r-steps-connector-min-width: 16px;
@@ -655,8 +655,7 @@
 
 .r-step__content {
   min-width: 0;
-  padding-top: calc((var(--r-steps-indicator-size) - var(--r-steps-title-font-size) * var(--r-steps-line-height)) /
-      2);
+  padding-top: calc((var(--r-steps-indicator-size) - var(--r-steps-line-height)) / 2);
 }
 
 .r-step__title {
@@ -672,6 +671,7 @@
 .r-step__description {
   color: var(--r-step-description-color);
   font-size: var(--r-steps-description-font-size);
+  line-height: var(--text-caption--line-height);
   margin-top: 2px;
 }
 
@@ -705,7 +705,7 @@
     outline: none;
   }
 
-  &:focus-visible:after {
+  &:focus-visible:not(:where(:root[data-input-modality="pointer"] *)):after {
     outline: var(--r-steps-focus-outline);
   }
 
@@ -1011,27 +1011,22 @@
 
 .r-combobox-select__control {
   box-sizing: border-box;
-  border: 1.5px solid var(--line-strong);
-  background: var(--layer-card);
   min-width: 0;
-  min-height: 44px;
+  min-height: var(--control-height);
+  border: 1px solid var(--line-field);
+  background: var(--layer-card);
   color: var(--foreground);
-  box-shadow: none;
+  font-size: var(--field-font-size);
+  line-height: var(--field-line-height);
   border-radius: 8px;
   outline: 0;
   align-items: center;
   gap: .5rem;
   padding: 0 6px 0 12px;
-  font-size: 16px;
-  line-height: 24px;
   transition: box-shadow 90ms ease-out;
   display: flex;
 }
 
-.r-combobox-select__control:focus-within {
-  box-shadow: var(--focus-ring);
-}
-
 .r-combobox-select__input {
   box-sizing: border-box;
   width: 100%;
@@ -1072,13 +1067,13 @@
   max-width: 100%;
   min-height: 28px;
   color: var(--foreground);
+  font-size: var(--text-footnote);
+  line-height: var(--text-footnote--line-height);
   border-radius: 6px;
   align-items: center;
   gap: 6px;
   padding: 0 2px 0 8px;
-  font-size: 13px;
   font-weight: 600;
-  line-height: 18px;
   display: inline-flex;
   overflow: hidden;
 }
@@ -1187,15 +1182,15 @@
   width: 100%;
   min-height: 36px;
   color: var(--foreground);
+  font-size: var(--text-callout);
+  line-height: var(--text-callout--line-height);
   border-radius: 8px;
   outline: 0;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   padding: 0 10px;
-  font-size: 14px;
   font-weight: 500;
-  line-height: 20px;
   transition: background-color .12s, color .12s;
   display: flex;
   overflow: hidden;
@@ -1240,25 +1235,25 @@
 
 .r-combobox-select__group-label {
   color: var(--foreground-hint);
+  font-size: var(--text-caption);
+  line-height: var(--text-caption--line-height);
   padding: 8px 10px 4px;
-  font-size: 12px;
   font-weight: 700;
-  line-height: 16px;
 }
 
 .r-combobox-select__message {
   color: var(--foreground-hint);
+  font-size: var(--text-callout);
+  line-height: var(--text-callout--line-height);
   text-align: start;
   padding: 14px 16px;
-  font-size: 14px;
-  line-height: 20px;
 }
 
 .r-combobox-select__overflow {
   color: var(--foreground-hint);
   font-family: var(--mono-font, ui-monospace, monospace);
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--text-caption);
+  line-height: var(--text-caption--line-height);
 }
 
 .r-combobox-select__spinner {
@@ -1269,8 +1264,8 @@
 
 .r-combobox-select--sm.r-combobox-select__control {
   min-height: 1.75rem;
-  font-size: 13px;
-  line-height: 18px;
+  font-size: var(--text-control);
+  line-height: var(--text-control--line-height);
 }
 
 .r-combobox-select--sm .r-combobox-select__chips {

package/dist/styles.css

@@ -23,6 +23,26 @@
   }
 }
 
+/* Focus indicators show only after keyboard navigation
+   (design/foundations/states.md#focus). installInputModality, which
+   ThemeProvider runs, keeps `data-input-modality` on the root: "pointer" after
+   a click or a tap, "keyboard" after a navigation key. While it says "pointer"
+   the focus ring is empty; with no attribute at all (no script, or the tracker
+   not installed) every ring shows. Each selector outranks a scope that declares
+   --focus-ring in foundation.css: a mode class on the root, the system-dark
+   fallback (:root:not(.light):not(.dark)), and a light or dark island. */
+:root[data-input-modality="pointer"],
+:root[data-input-modality="pointer"]:not(.light):not(.dark),
+:root[data-input-modality="pointer"] :is(.light, .dark) {
+  --focus-ring: 0 0 transparent;
+}
+
+/* The same gate for a focus indicator not drawn with --focus-ring (an outline,
+   an inset ring): it matches unless the last input was a pointer. Stack it on
+   the state, `focus-visible:keyboard:outline-2`. Anchored on the element's own
+   class, so it costs WebKit no ancestor dependency on unrelated elements. */
+@custom-variant keyboard (&:not(:where(:root[data-input-modality="pointer"] *)));
+
 @theme {
   --color-black: oklch(0 0 0);
   --color-white: oklch(1 0 0);
@@ -55,7 +75,9 @@
 
   /* Raft Design System type styles (size / line-height / weight). Grotesk is
      what people say; pair the mono styles with `font-mono` for what machines
-     write (ids, times, counts, events, code). */
+     write (ids, times, counts, events, code). These are the phone values; the
+     desktop block below the theme sets the working sizes again on a desktop
+     (from 768px with a mouse or trackpad). */
   --text-hero: 40px;
   --text-hero--line-height: 44px;
   --text-hero--font-weight: 700;
@@ -89,6 +111,11 @@
   --text-mono-meta--line-height: 16px;
   --text-mono-code: 13px;
   --text-mono-code--line-height: 20px;
+  /* The label of a 32px control: a Button at `md`, a panel action, a filter
+     trigger. Its own style, because on a phone it is footnote's 13px and on a
+     desktop it is 14px, where footnote drops to 12. */
+  --text-control: 13px;
+  --text-control--line-height: 18px;
 
   /* Deprecated utility names, kept until raft-ui 1.0 (see codemods/token-names.mjs). */
   --color-brutal-yellow: var(--palette-yellow-400);
@@ -103,6 +130,43 @@
   --color-brutal-cream: var(--palette-cream-200);
 }
 
+/* Desktop type: from 768px (Tailwind's `md`, where the desktop layout begins)
+   with a mouse or trackpad, the same query as the desktop metrics in
+   foundation.css. Feishu's PC scale, 14/22 for reading, 12px for notes (on an
+   18px line, see typography.md), 16/24 for titles. A phone, and a touch
+   screen at any width, keep the theme's values, Feishu's mobile scale. The
+   type utilities read these variables (`font-size: var(--text-body)`), so
+   every component follows without a breakpoint of its own. This block comes
+   after Tailwind's theme output, so it also wins over an app's own `@theme`
+   values for these names: an app that changes one sets it inside this query
+   as well. Hero, display, title and label stay as they are: setup pages and
+   the phone tab bar. */
+@layer theme {
+  @media (width >= 48rem) and (pointer: fine) {
+    :root,
+    :host {
+      --text-headline: 16px;
+      --text-headline--line-height: 24px;
+      --text-body: 14px;
+      --text-body--line-height: 22px;
+      --text-subhead: 14px;
+      --text-subhead--line-height: 22px;
+      --text-callout: 14px;
+      --text-callout--line-height: 22px;
+      --text-footnote: 12px;
+      --text-footnote--line-height: 18px;
+      --text-caption: 12px;
+      --text-caption--line-height: 18px;
+      --text-mono-meta: 12px;
+      --text-mono-meta--line-height: 18px;
+      --text-mono-code: 13px;
+      --text-mono-code--line-height: 20px;
+      --text-control: 14px;
+      --text-control--line-height: 22px;
+    }
+  }
+}
+
 @theme inline {
   --color-foreground: var(--foreground);
   --color-foreground-muted: var(--foreground-muted);
@@ -287,6 +351,20 @@
   --text-card-title: var(--card-title-font-size);
   --text-card-title--line-height: var(--card-title-line-height);
   --font-weight-card-title: var(--card-title-font-weight);
+  /* ─── Control metric axis ───────────────────────────────────────────────────
+     The height of a default control: 44px on a phone and on a touch screen,
+     32px from 768px with a mouse or trackpad (Feishu's PC default). The
+     tokens switch in foundation.css, so a recipe writes `h-control` /
+     `size-control` and never a breakpoint. A button at this height keeps a 44px hit area with
+     `after:-inset-y-control-hit`, which is 0 on a phone.
+
+     Consumers: `Input`, `InputGroup`, `SelectTrigger`,
+     `ComboboxControl`, `ComboboxChips`, `ComboboxSelect`, and Button at `lg`,
+     `xl` (`h-control-cta`) and `icon-lg` (`size-control-icon` for its icon). */
+  --spacing-control: var(--control-height);
+  --spacing-control-cta: var(--control-height-cta);
+  --spacing-control-icon: var(--control-icon-size);
+  --spacing-control-hit: var(--control-hit-inset);
 
   /* Deprecated utility names, kept until raft-ui 1.0 (see codemods/token-names.mjs). */
   --color-foreground-strong: var(--foreground);

package/dist/tokens.json

@@ -1588,6 +1588,7 @@
     },
     "field": {
       "$value": "{line.strong}",
+      "$description": "The frame of a field and the composer: the ink of line-strong, drawn 1px.",
       "$extensions": {
         "build.botiverse.raft": {
           "scope": "every-mode"
@@ -2496,6 +2497,7 @@
     "$type": "shadow",
     "ring": {
       "$value": "0 0 0 2px oklch(1 0 0), 0 0 0 4px oklch(0.1813 0.005 17.62)",
+      "$description": "The focus indicator. It shows only after keyboard navigation: styles.css empties it while the root carries data-input-modality=\"pointer\", which installInputModality sets after a click or a tap.",
       "$extensions": {
         "build.botiverse.raft": {
           "css": true,
@@ -2512,7 +2514,15 @@
         "value": 16,
         "unit": "px"
       },
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 14,
+            "unit": "px"
+          }
+        }
+      }
     },
     "font-weight": {
       "$value": 400,
@@ -2523,7 +2533,15 @@
         "value": 24,
         "unit": "px"
       },
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 22,
+            "unit": "px"
+          }
+        }
+      }
     }
   },
   "card-title": {
@@ -2532,7 +2550,15 @@
         "value": 16,
         "unit": "px"
       },
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 14,
+            "unit": "px"
+          }
+        }
+      }
     },
     "font-weight": {
       "$value": 600,
@@ -2543,7 +2569,78 @@
         "value": 24,
         "unit": "px"
       },
-      "$type": "dimension"
+      "$type": "dimension",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 22,
+            "unit": "px"
+          }
+        }
+      }
+    }
+  },
+  "control": {
+    "$type": "dimension",
+    "height": {
+      "$value": {
+        "value": 44,
+        "unit": "px"
+      },
+      "$description": "A default control: a field, a Button at lg, an icon button at icon-lg. A finger's 44px on a phone, Feishu's 32px on a desktop.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 32,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "height-cta": {
+      "$value": {
+        "value": 52,
+        "unit": "px"
+      },
+      "$description": "The full-width call to action across a sign-in, sign-up or setup form (Button xl).",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 40,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "icon-size": {
+      "$value": {
+        "value": 22,
+        "unit": "px"
+      },
+      "$description": "The icon in a control-height icon button.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 18,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "hit-inset": {
+      "$value": {
+        "value": 0,
+        "unit": "px"
+      },
+      "$description": "How far a control-height button's hit area reaches past its top and bottom, to keep 44px.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 6,
+            "unit": "px"
+          }
+        }
+      }
     }
   },
   "sticker": {

package/dist/wip.d.mts

@@ -1,4 +1,4 @@
-import { O as ButtonProps, T as DialogTrigger, i as DialogClose, s as DialogContentProps, t as Dialog, w as DialogTitleProps } from "./index-DG62I-YM.mjs";
+import { O as ButtonProps, T as DialogTrigger, i as DialogClose, s as DialogContentProps, t as Dialog, w as DialogTitleProps } from "./index-CDHLWJtB.mjs";
 import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
 import { Combobox } from "@base-ui/react/combobox";
 //#region src/components/combobox-select/combobox-select.types.d.ts

package/dist/wip.mjs

@@ -1,4 +1,4 @@
-import { S as useTheme, f as DialogTitle, i as DialogContent, m as Button, p as DialogTrigger, r as DialogClose, t as Dialog, w as tv, x as useThemeScopeProps } from "./dialog-BYH5ojYr.mjs";
+import { S as useTheme, f as DialogTitle, i as DialogContent, m as Button, p as DialogTrigger, r as DialogClose, t as Dialog, w as tv, x as useThemeScopeProps } from "./dialog-CDPAT3DH.mjs";
 import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
 import { useCallback, useId, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -170,7 +170,7 @@ function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange,
 	const inputClassName = ["r-combobox-select__input", typeof inputProps?.className === "string" ? inputProps.className : null].filter(Boolean).join(" ");
 	const controlClassName = [
 		css,
-		"r-combobox-select__control",
+		"r-combobox-select__control has-focus-visible:shadow-focus",
 		className
 	].filter(Boolean).join(" ");
 	const positionerClassName = ["r-combobox-select__positioner", typeof positionerProps?.className === "string" ? positionerProps.className : null].filter(Boolean).join(" ");

package/package.json

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

package/skills/raft-ui-critique/references/theme-lenses.md

@@ -36,7 +36,7 @@ Judge whether the surface speaks Raft's material language:
 - Corners follow the shape scale in `styles.css`: sticker, chip, control, container, dialog; fully round only for switches and radios. Flag corners off the scale or mixed within one group.
 - Space Grotesk is what people say; Space Mono is what machines write (ids, times, counts, events, code). Flag machine output set in sans and prose set in mono.
 - Yellow and pink must carry semantic roles. Flag decorative yellow/pink fields that compete with primary actions or status.
-- Hover and pressed keep a control's resting color under an ink wash; focus-visible is the ink ring. Flag a state that swaps a sticker's color or that is indistinguishable from rest.
+- Hover and pressed keep a control's resting color under an ink wash; focus-visible is the ink ring, shown only after keyboard navigation. Flag a state that swaps a sticker's color or that is indistinguishable from rest, and a ring that appears after a click or a tap.
 - Stickers, ink edges, and bold type create high baseline intensity. Require a clear entry point and quieter secondary information so the surface does not shout uniformly.
 
 Ask: does every sticker, line, and shadow carry a role, or is the surface merely loud?

package/skills/raft-ui-guide/rules/technical-overview.md

@@ -63,7 +63,7 @@ Custom fonts use `--heading-font`, `--sans-font`, and `--mono-font`.
 
 | Provider          | Responsibility                                                                                                        |
 | ----------------- | --------------------------------------------------------------------------------------------------------------------- |
-| `ThemeProvider`   | Color mode, persistence, and document mode synchronization                                                            |
+| `ThemeProvider`   | Color mode, persistence, document mode synchronization, and the input modality that keeps focus rings to the keyboard |
 | `TooltipProvider` | Shared tooltip behavior when using Tooltip                                                                            |
 | `ToastProvider`   | Toast manager when using the toast API; see the [Toast](https://raft-design.botiverse.build/components/toast.md) page |
 
@@ -74,6 +74,7 @@ Custom fonts use `--heading-font`, `--sans-font`, and `--mono-font`.
 ## Mode and portal boundaries
 
 - `ThemeProvider` synchronizes `document.documentElement` by default. Nested scopes need `syncDom={false}` and the matching `light`/`dark` class on their root.
+- Focus rings show only after keyboard navigation, not after a click, a tap or typing. `ThemeProvider` installs the tracker (`data-input-modality` on `document.documentElement`); an app without it calls `installInputModality()` once on the client. Draw an indicator with `focus-visible:shadow-focus` (`has-focus-visible:shadow-focus` on a group); one that is not the token takes the `keyboard:` variant (`focus-visible:keyboard:outline-2`). See [States](https://raft-design.botiverse.build/foundations/states.md#focus).
 - Base UI overlays portal to `document.body`. An app root with `isolation: isolate` keeps its stacking contexts below those surfaces. Embedded previews can use `portalProps.container` (toasts: `ToastProvider portalContainer`) to keep overlays inside their scope.
 - SSR apps with persisted mode need to restore it before first paint to avoid a theme flash.