Add the Avatar primitive with Root, Image and Fallback. The image loads off the screen first, and the <img> renders once it is there, thus a broken image icon never shows. The fallback shows while the image is not on the screen, at once for a failure or a missing src, and after delay milliseconds while a slow image loads. The root has data-status and onStatusChange for loading, loaded and error. The fallback takes the name of the image as a role="img", and loading="lazy" starts the load when the avatar comes into view. Avatar.Group is a named role="group" with a max, and Avatar.Count says how many avatars are past it, as +N on the screen and "N more" for the screen reader.
Add the Breadcrumbs primitive with Root, List, Item, Link and Separator. The root is a <nav> landmark named "Breadcrumb" in the locale of LocaleProvider, the list is an <ol> of <li>, and current gives the last link aria-current="page". A link without an href, or with disabled, is a <span> out of the tab order. The separator is aria-hidden, in the item after the link, thus the list holds pages only. maxItems folds the middle of a long trail behind Breadcrumbs.Ellipsis, a button named "Show N more pages" that unfolds it and moves the focus to the first page that comes into view.
Add the Progress primitive with Root, Label, Track, Indicator and Value. The root is the role="progressbar" element with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext; value={null} makes it indeterminate, with no number for the screen reader. The label names the bar through aria-labelledby, the value is aria-hidden because the bar already gives it, and the text follows the locale of LocaleProvider as a percentage of the range or in a unit through format. The indicator fills from the start edge of the text direction, or from the bottom of a vertical track, and bind:context gives percent and status for a shape of your own.
Add the Select primitive with Root, Label, Trigger, Value, Popover, List, Item and ItemIndicator: a form field with one value from a list of options, or more than one with selectionMode="multiple". The trigger is a role="combobox" button named by the label and the value together, the list is a ListBox in a popover that takes the focus on the selected option, and a hidden native <select> sends the value with the form. It has the keyboard of the WAI-ARIA select-only combobox: the arrows, Home, End, PageUp, PageDown and typed characters open the list and move through it, Enter, Space and Alt+ArrowUp select, and Escape and Tab close. Includes documentation and demo coverage.
\n
The keyboard-navigation primitive gains a typeahead(char) method, for a widget that opens on a character typed outside the list.
Add the Separator primitive: a role="separator" line with aria-orientation="vertical" for a vertical one, and role="none" with decorative for a line the content already makes. With a value, it is a window splitter: a tab stop with aria-valuenow, which the arrow keys, Home, End, Enter and a pointer drag move.
Add the Slider component: a number, or a range of numbers, on a track. Each thumb holds a native range input for the form and for screen readers, the keyboard follows the text direction, and the text of the value comes from Intl.NumberFormat in the locale.
Add the Tooltip component: a short description of a control on hover or on keyboard focus, with role="tooltip" and aria-describedby on the trigger, a delay that the next tooltip in a row skips, content the pointer can cross to and rest on, a long press for touch that openOnLongPress={false} turns off, a panel that follows the pointer with followPointer, and an arrow. The floating primitive learned to position an arrow.
After an outside press on nothing focusable, Popover, Menu, Dialog, Drawer, DatePicker and Select return the focus to the trigger, with no focus ring. Dialog and Drawer restored it too early: the press moved the focus to the body right after. The focus fell to the body before, and a keyboard user had nowhere to continue from. A press on a focusable element keeps the focus there, and the trigger no longer shows a data-focused it does not have.
"
+ }
+ ]
+ }
+ ]
+ },
{
"version": "1.0.0-beta.7",
- "date": "2026-09-08T00:51:56.519Z",
+ "date": "2026-09-07T21:57:34-03:00",
"sections": [
{
"type": "Minor",
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index e7f07596..eb598473 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,29 @@
# @human-kit/ui
+## 1.0.0-beta.8
+
+### Minor Changes
+
+- [#101](https://github.com/human-kit/ui/pull/101) [`d9ab263`](https://github.com/human-kit/ui/commit/d9ab26362be045437a3fb46ae968a7d39000ac5d) Thanks [@Agustin-Delgado](https://github.com/Agustin-Delgado)! - Add the Avatar primitive with `Root`, `Image` and `Fallback`. The image loads off the screen first, and the `` renders once it is there, thus a broken image icon never shows. The fallback shows while the image is not on the screen, at once for a failure or a missing `src`, and after `delay` milliseconds while a slow image loads. The root has `data-status` and `onStatusChange` for `loading`, `loaded` and `error`. The fallback takes the name of the image as a `role="img"`, and `loading="lazy"` starts the load when the avatar comes into view. `Avatar.Group` is a named `role="group"` with a `max`, and `Avatar.Count` says how many avatars are past it, as `+N` on the screen and "N more" for the screen reader.
+
+- [#101](https://github.com/human-kit/ui/pull/101) [`d9ab263`](https://github.com/human-kit/ui/commit/d9ab26362be045437a3fb46ae968a7d39000ac5d) Thanks [@Agustin-Delgado](https://github.com/Agustin-Delgado)! - Add the Breadcrumbs primitive with `Root`, `List`, `Item`, `Link` and `Separator`. The root is a `