@botiverse/raft-ui 0.21.2 → 0.22.1

package/CHANGELOG.md

@@ -1,3 +1,93 @@
+## [0.22.1](https://github.com/botiverse/raft-design/compare/v0.22.0...v0.22.1) (2026-10-22)
+
+### Design System
+
+- **Located: one highlight for every jump**: the item a jump took someone to, such as a link to a message, a search result or Activity item that opens a message, Back to the list a result was opened from, a file comment's passage or the rows a bulk change touched, shows `info-soft` at once, holds it 1.2s and fades out with `ease-out`, gone at 2s. It is layered over the item's own fill and takes the item's corners; a stronger mark (selected, current, a search match, checked, an open menu) wins and the item isn't painted; a located item doesn't answer hover while it lasts, but a press still shows. With reduced motion it is held still for 2s and then goes off without a fade. It is only a look: a jump started from the keyboard also moves focus to the item. It applies to MessageItem. ([#719](https://github.com/botiverse/raft-design/pull/719))
+  - Why: the system had one line for a jumped-to message (`info-soft`, cleared after 2 seconds, listed under selection) and nothing shared to apply it, so each jump drew its own flash with its own timing and colour; every jump now shows one highlight that goes away by itself.
+  - Affects: `info-soft` cleared at 2s → held 0–1.2s, `ease-out` fade 1.2s–2s, gone at 2s (`LOCATED_MS` = 2000); the current match of a search inside a page is a selection and keeps `info-soft` while the search is open.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#located
+- **A status light beside text is 10px**: every status light and attention dot that sits beside text, in a chip, a badge, a panel header, a sidebar row or a list row, is 10px with a 1.5px ink edge and a 2px radius; none of them is 9px. A light on an avatar's corner still follows the avatar, and the 8px `Status` `sm` stays the attention dot on an icon's corner (the NotificationCenter bell's dot, a `Status` at the default size, is 10px). It applies to Status, Badge, PanelActivity, SidebarSectionAttention, LiveAgentActivityBarStatus, NotificationCenter and its trigger's dot, the task status icons (TaskStatusIcon, TaskChip, TaskCardStatus, TaskStatusBadge, TaskList, TaskBoard), InboxItem, MessageActionCard, Timeline and the `lead-dot` utility. ([#722](https://github.com/botiverse/raft-design/pull/722))
+  - Why: every line, chip and row a light sits in is an even number of pixels, so a 9px light had half a pixel left over and was drawn with one more device pixel above it than below (0.5px off center on a 1x screen, 0.17px on a 3x one); a 10px light centers on a whole pixel.
+  - Affects: light 9px → 10px, its colour 6px → 7px; the 1.5px ink edge and 2px radius are unchanged. Avatar corner badges (`AvatarBadge`) and `Status` `xs`, `sm` and `lg` are unchanged.
+  - Docs: https://raft-design.botiverse.build/foundations/alignment/#a-mark-that-leads-text
+- **Link blue: a deeper, quieter blue**: `foreground-link`, the blue used only for links in running text, is a deep, quiet blue: in light mode about half the chroma of a bright link blue, so it sits beside black ink and yellow without being the loudest thing on a page full of links, and still reads as a link at a glance; dark mode uses the same blue, lightened to read on the dark canvas. It applies to Markdown links and anything colored with `foreground-link`. ([#725](https://github.com/botiverse/raft-design/pull/725))
+  - Why: with the bright blue, a page full of links looked loud against the black-and-yellow brand; links keep their blue and their underline, in a deeper, quieter shade.
+  - Affects: light `oklch(0.4878 0.2432 264.4)` (#1447e6) → `oklch(0.4327 0.1282 256.54)` (#184f95); dark `oklch(0.8071 0.1007 250.45)` (#8ec5ff) → `oklch(0.717 0.1183 253.58)` (#6da7ec). Against the canvas 6.83:1 → 8.11:1 in light mode and 9.51:1 → 6.89:1 in dark mode; against `foreground` 2.75:1 → 2.32:1 and 1.44:1 → 1.98:1, still under 3:1, so the underline at rest still marks the link.
+  - Docs: https://raft-design.botiverse.build/foundations/color/#meanings-of-color
+
+### Added
+
+- **useLocated**, **LOCATED_MS** and **LocatedRequest**, with the `data-located` highlight in `styles.css`: `useLocated(request)` returns `true` while an item should show the located highlight; set `data-located` on the item while it does. Pass a new `request` (a counter or token, a string or number, not the item's id) for each jump once the item is on screen. The hook turns the highlight on two frames later, so a second jump to the same item restarts it, and off after `LOCATED_MS`. ([#719](https://github.com/botiverse/raft-design/pull/719))
+  - Why: see Located: one highlight for every jump, above.
+  - Affects: `[data-located]` runs a 2s animation of the registered `--located-fill` colour (`info-soft` → transparent), painted as a `background-image` layer over the item's own fill; not painted while the item is `:active`, selected (`data-selected`, `data-active="true"`, `aria-selected="true"`), current (`aria-current`) or has `data-popup-open`. The `animation` shorthand replaces the item's own animation while it is located. Don't set `data-located` by hand: left on, it keeps hiding hover.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#located
+- **MessageItem** `located`: shows the located highlight on the message row; pass `useLocated(request)`. ([#719](https://github.com/botiverse/raft-design/pull/719))
+  - Why: see Located: one highlight for every jump, above.
+  - Affects: the row's resting fill is `--located-fill` (transparent unless located), so a search match, a checked row or an open menu keeps its own fill, and the ring around a delegated face matches the row; a located row doesn't take the `fill-subtle` hover while the highlight lasts. A row without `located` renders as before.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#states
+
+### Changed
+
+- **Status** `size="md"` (the default) and the `lead-dot` utility, so also **SidebarSectionAttention**, **LiveAgentActivityBarStatus** and the **NotificationCenterTrigger** dot; **TaskStatusIcon** and the per-status task icons, so the status pixel in **TaskChip**, **TaskCardStatus**, **TaskStatusBadge**, **TaskList** and **TaskBoard**; the unread dots of **InboxItem** and **NotificationCenter**, the **MessageActionCard** status dot and the **Timeline** default marker: 9px → 10px; props and markup are unchanged. ([#722](https://github.com/botiverse/raft-design/pull/722))
+  - Why: see A status light beside text is 10px, above.
+  - Affects: `--lead-dot` 9px → 10px, so Badge and PanelActivity hold a `Status` at 10px; the task status pixel svg 9×9 → 10×10; `--r-timeline-icon-size` default 9px → 10px. A chip that holds a status pixel is 1px wider, its height unchanged. The Timeline axis column is 1px wider and a horizontal Timeline 1px taller. The NotificationCenter unread dot sits centered on the title line: top 17.5px → 17px on a phone, 18px on a desktop. The NotificationCenterTrigger dot keeps its top-right anchor and grows 1px down and left. The InboxItem unread dot takes its extra pixel out of the gap below it, so rows keep their height.
+  - Docs: https://raft-design.botiverse.build/components/status/#sizes
+- **`foreground-link`** token: light and dark values deepened to the quieter link blue, in `foundation.css` and `tokens.json`; the token name is unchanged. ([#725](https://github.com/botiverse/raft-design/pull/725))
+  - Why: see Link blue: a deeper, quieter blue, above.
+  - Affects: light #1447e6 → #184f95, dark #8ec5ff → #6da7ec (values above). Markdown links take the new blue, and so does their hover colour (the link blue mixed 20% toward `foreground`).
+  - Docs: https://raft-design.botiverse.build/foundations/color/#meanings-of-color
+
+## [0.22.0](https://github.com/botiverse/raft-design/compare/v0.21.2...v0.22.0) (2026-10-22)
+
+### Design System
+
+- **A mark that leads text: a notice leads with its intent's icon**: a toast, a banner or a panel notice never uses a status light to say what kind of notice it is (success, info, warning, error); it leads with its intent's Lucide icon, or the avatar of whoever it is about. A status light keeps its own meanings: whether an agent, a person or a computer is working or online, a task's status, and the square attention dot that marks something waiting or unread. A notice about one of those things may still show that thing's light inside it. It applies to Toast, Banner and PanelNotice. ([#709](https://github.com/botiverse/raft-design/pull/709))
+  - Why: the same square light said both what kind of notice it was and whether someone was online or a task was done, so one mark carried several meanings; notices now lead with their intent's icon and the light keeps its own meanings.
+  - Affects: a notice's leading mark, a 9px status light → the intent's icon: `Info`, `CircleCheck`, `TriangleAlert` (and `OctagonAlert` for a `destructive` banner), 16px in a toast and a `sm` banner, 20px in a banner.
+  - Docs: https://raft-design.botiverse.build/foundations/alignment/#a-mark-that-leads-text
+- **Chips in running text: one box**: every chip with a fill in a message's text, a reference chip, the yellow sticker of a mention of the person reading and an inline task chip, shares one box: 0.875em semibold type on a line 2px shorter than the body line, its words on the sentence's baseline, a leading mark centered on the chip, 6px at each end (4.5px with a leading mark, the mark 4px from the text) and `radius-sticker` corners. A chip never makes its line taller. In dark mode the sticker keeps its ink edge, drawn inside, and has no die-cut edge outside. Text marks without a fill, a mention of someone else and a web link, are unchanged. It applies to MessageReferenceChip, MessageReferencePending, MessageReferenceUnavailable, MessageReferenceText `primary` and TaskChip `inline`. ([#706](https://github.com/botiverse/raft-design/pull/706))
+  - Why: chips in one sentence had two sizes: a reference chip was 22px tall and made a desktop line 1px taller, while a task chip and the sticker took the sentence's own type on a shorter line, about 5px shorter than a reference chip with letters 2px larger; every filled chip in message text now takes the same box.
+  - Affects: chip height = body line − 2px: 20px on a desktop (body 14/22), 22px on a phone (body 16/24); type 12.25px on a desktop, 14px on a phone.
+  - Docs: https://raft-design.botiverse.build/foundations/alignment/#marks-in-running-text
+
+### Breaking Changes
+
+- **Banner**, **PanelNotice** and **ToastIcon**: a `Status` light placed as the leading mark is no longer laid out as one. ([#709](https://github.com/botiverse/raft-design/pull/709))
+  - Why: see A mark that leads text: a notice leads with its intent's icon, above.
+  - Affects: in a Banner, a `Status` that is a direct child no longer gets the 20px (16px at `sm`) icon column, so it drops to a row of its own under the text; in a PanelNotice it is no longer centered on the first line; in a ToastIcon it is no longer held at 9px whatever size it was given. An icon in any of them is unchanged.
+  - Migrate: replace the leading `Status` with the intent's Lucide icon, as listed in Banner's and Toast's Variants (`Info`, `CircleCheck`, `TriangleAlert`, and `OctagonAlert` for a `destructive` banner). For something still pending, put a `Spinner` in a `status="info"` banner instead (see Added). A `Status` that shows a person's, an agent's or a task's own state may stay inside the notice's text.
+  - Docs: https://raft-design.botiverse.build/components/banner/
+
+### Added
+
+- **Banner** with a `Spinner`: while something is still pending, such as a computer that hasn't connected yet, a `Spinner` placed as a direct child takes the icon's place. Banner puts it in the icon's column and centers it on the first line, so the text starts where it does after an icon. Use it in a `status="info"` banner. ([#709](https://github.com/botiverse/raft-design/pull/709))
+  - Why: a pending state had no leading mark but a warning light, and waiting is not a problem; a spinner in an info banner says it is still going without the warning tint or its icon.
+  - Affects: the spinner's column is 20px (16px at `sm`), one line tall, with the icon's gap before the text (10px, 8px at `sm`).
+  - Docs: https://raft-design.botiverse.build/components/banner/
+- **MessageReferenceChip** and **MessageReferencePending** `capped`: stops the chip at `min(100%, 24em)`, and a longer `MessageReferenceLabel` truncates at the end. For words Raft doesn't write, such as the title an app gives a link it previews. Give the pending chip the same `capped` as the chip that replaces it, so the line keeps its width when it loads. ([#696](https://github.com/botiverse/raft-design/pull/696))
+  - Why: an app's link is shown as a reference chip with the app's own title, and a long title could take the whole line; a capped chip keeps each link to at most one line.
+  - Affects: cap 24em of the chip's text: 294px on a desktop, 336px on a phone, or the line when it is narrower.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#app-links
+
+### Changed
+
+- **toast** command API: `toast.info`, `toast.success`, `toast.warning` and `toast.error` lead with their intent's icon in `ToastIcon` instead of a status pixel. The calls, `icon: false` and `leading` are unchanged, and a `leading` node still takes the icon's place. ([#709](https://github.com/botiverse/raft-design/pull/709))
+  - Why: see A mark that leads text: a notice leads with its intent's icon, above.
+  - Affects: 9px status pixel → 16px Lucide icon in the same 20px column, hidden from assistive technology as before: `info` `Info`, `success` `CircleCheck`, `warning` and `error` `TriangleAlert`.
+  - Docs: https://raft-design.botiverse.build/components/toast/
+- **MessageReferenceChip**, **MessageReferencePending**, **MessageReferenceUnavailable**, **MessageReferenceText** `variant="primary"` and **TaskChip** `variant="inline"` take the shared chip box in running text; props, variants and markup are unchanged. ([#706](https://github.com/botiverse/raft-design/pull/706))
+  - Why: see Chips in running text: one box, above.
+  - Affects: reference chips: 1px padding above and below → 0, height 22px → body line − 2px (20px desktop, 22px phone), gap after a leading icon or `Spinner` and before a `MessageReferenceSuffix` 2px → 4px, a chip led by a `Spinner` (a pending reference) 6px → 4.5px at each end, as a chip led by an icon. The sticker (`primary`): sentence-size type on a 1.2em line → 0.875em on the chip line, sides 3px → 6px, the outer 1.5px `ring-sticker-edge` removed (the 1.5px inset ink ring stays). TaskChip `inline`: sentence-size type on a 1.2em line → 0.875em on the chip line, status pixel to text 6px → 4px, a leading icon 12px → 14px, its −2px side margins removed. Text set on a line other than the body's can give its chips their own line height with `--chip-line-height` on a container. The default and `sm` TaskChip are unchanged.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#chips-in-running-text
+- **DialogFooter** and **AlertDialogFooter**: the buttons stay in one row at the end, Cancel then the commit button, at every width, and stack full width, the commit button on top, only when they don't fit on one line. In `DialogFooter`, a `TextLink` written first sits at the start in footnote text, and the buttons after it form one group (`data-slot="dialog-footer-actions"`) that stays beside the link when both fit and wraps under it, still at the end, when they don't. Props are unchanged. ([#673](https://github.com/botiverse/raft-design/pull/673))
+  - Why: a commit button with a long label pushed the row past the dialog's padding; the footer now measures its row and stacks only then, never because the window is narrow, so Cancel and the commit button sit in the same place on every screen.
+  - Affects: a row that doesn't fit gets `data-stacked`, a full-width column with the commit button on top; Tab order stays the markup's, Cancel then commit. A `TextLink` in `DialogFooter` takes `text-footnote`. A footer that sets its own layout with `className` keeps it while it fits on one line; give text that may give way `min-w-0`, so it shrinks before the footer stacks. With a leading `TextLink`, styles aimed at the footer's direct button children now need to target the `dialog-footer-actions` group.
+  - Docs: https://raft-design.botiverse.build/components/dialog/#the-footer
+- **Banner** `size="sm"`: the title and description keep the banner's 14px text (`text-callout`), as `md` and `lg`; `sm` tightens only its padding and its icon. ([#718](https://github.com/botiverse/raft-design/pull/718))
+  - Why: a `sm` banner's text was smaller than the label of its 32px button, which made the button look too big for the banner; a banner's text is now never smaller than its button's label.
+  - Affects: `sm` text `text-footnote` → `text-callout`: 12/18 → 14/22 on a desktop, 13/18 → 14/20 on a phone. The 16px icon and the 8px × 12px padding are unchanged. With a button, the button stays centered on the last line, 4px from the top and bottom edges, so the space above and below the text, (32px − one line) / 2 + 4px, goes 11px → 9px on a desktop and 11px → 10px on a phone; a one-line banner stays 40px tall.
+  - Docs: https://raft-design.botiverse.build/components/banner/#sizes
+
 ## [0.21.2](https://github.com/botiverse/raft-design/compare/v0.21.1...v0.21.2) (2026-10-22)
 
 ### Fixed

package/dist/components/timeline/timeline.css

@@ -2,7 +2,7 @@
    - Local CSS variables (--r-timeline-*) declared on the list; items inherit them
    - Modifier classes rebind local variables
    - Component styles strictly consume local variables
-   - Every marker is a status pixel: a 9px square in the item's colour with a
+   - Every marker is a status pixel: a 10px square in the item's colour with a
      1.5px sticker-ink edge, strung on a hairline. Titles are 14/20 ink,
      details and times Space Mono 12 in ink-3, the time on the right of the
      row. One scale for every size; `lg` only opens the title to 16/24.
@@ -13,7 +13,7 @@
    ───────────────────────────────────────────────────────────────────────── */
 
 .r-timeline {
-  --r-timeline-icon-size: var(--r-timeline-custom-icon-size, 9px);
+  --r-timeline-icon-size: var(--r-timeline-custom-icon-size, 10px);
   /* The type scale's callout and mono meta, so a desktop gets its sizes too. */
   --r-timeline-title-font-size: var(--text-callout);
   --r-timeline-content-font-size: var(--text-mono-meta);

package/dist/foundation.css

@@ -157,7 +157,7 @@
   --foreground-on-frame: var(--sticker-ink);
   --foreground-on-frame-muted: oklch(0.4082 0.0679 93.96);
   --foreground-on-frame-active: var(--sticker-ink);
-  --foreground-link: oklch(0.4878 0.2432 264.4);
+  --foreground-link: oklch(0.4327 0.1282 256.54);
   --layer-canvas: oklch(1 0 0);
   --layer-sidebar: oklch(0.986 0.0154 86.42);
   --layer-popover: oklch(1 0 0);
@@ -351,7 +351,7 @@
   --foreground-on-hud-muted: var(--foreground-muted);
   --foreground-on-frame: oklch(0.9211 0.004 106.48);
   --foreground-on-frame-muted: oklch(0.6984 0.0043 106.51);
-  --foreground-link: oklch(0.8071 0.1007 250.45);
+  --foreground-link: oklch(0.717 0.1183 253.58);
   --layer-canvas: oklch(0.2213 0.0038 106.71);
   --layer-sidebar: oklch(0.1582 0.0041 106.86);
   --layer-popover: oklch(0.2802 0.0036 106.63);
@@ -433,7 +433,7 @@
     --foreground-on-hud-muted: var(--foreground-muted);
     --foreground-on-frame: oklch(0.9211 0.004 106.48);
     --foreground-on-frame-muted: oklch(0.6984 0.0043 106.51);
-    --foreground-link: oklch(0.8071 0.1007 250.45);
+    --foreground-link: oklch(0.717 0.1183 253.58);
     --layer-canvas: oklch(0.2213 0.0038 106.71);
     --layer-sidebar: oklch(0.1582 0.0041 106.86);
     --layer-popover: oklch(0.2802 0.0036 106.63);