@imfusion/web-ui 0.11.1-dev.30.g5f35727d → 0.11.1-dev.33.gefbd75be

package/CHANGELOG.md

@@ -22,6 +22,9 @@
   — Stephan Wenninger <wenninger@imfusion.com>
 - `Typo.UnorderedList` takes `markerVariant` to colour its dash apart from the text, such as the brand dash on main text.
   [Typo](src/components/typo/typo.stories.tsx#MarkerVariant) — Nikolaus Brunner <brunner@imfusion.com>
+- Focus ring tokens: `--imf-ui-focus-ring-width`, `--imf-ui-focus-ring-color`, and two offsets for a ring outside the
+  element or inside it (`-offset`, `-offset-inset`).
+  ([WEBSDK-274](https://imfusion.atlassian.net/browse/WEBSDK-274)) — Nikolaus Brunner <brunner@imfusion.com>
 
 ### Changed
 
@@ -29,6 +32,21 @@
   primary, with no outline. [Input](src/components/input/input.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `Drawer` draws no border by default; `borderColor` adds one, such as `borderColor="primary"` for the previous look.
   [Drawer](src/components/drawer/drawer.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- Focus ring ([WEBSDK-274](https://imfusion.atlassian.net/browse/WEBSDK-274)) — Nikolaus Brunner <brunner@imfusion.com>
+  - Every component draws the same focus ring from the focus ring tokens, and popups draw none.
+  - Navigation items and toasts draw the ring fully inside the item.
+  - A focused `Toggle` draws no box: its icon turns bolder and its label underlined, in primary unless pressed.
+  - An open `Select` trigger keeps its surface and turns its border primary instead of filling with primary.
+  - A focused `Tabs.Tab` underlines its label instead of drawing a box that looks like the active indicator. A focused
+    `Tabs.Panel` tints together with the active tab instead of drawing a second line inside its border.
+  - The branded `AppShell` header and navbar draw a light ring. A focused `AppShell.NavItem` shows its active underline at
+    double thickness instead of an outline.
+  - A light ring shows on blue fills: an active or open `NavigationMenu` link or trigger, and the `oncolor` context of
+    `Button`, `AccountCard`, and `Typo`.
+  - `AppShell.Burger` draws the primary ring on default surfaces, where it used the text colour.
+  - A focused chamfered `Button` shows its hover state, and `Code.Block`'s copy button colours its icon; a ring cannot
+    show through their clip-path.
+  - `Code`'s inline copy button shows the ring in place of the browser default.
 - `Typo.UnorderedList` draws its dash in the text colour by default; `markerVariant="primary"` gives the brand dash.
   — Nikolaus Brunner <brunner@imfusion.com>
 - `Callout.Root` defaults to `maxWidth="lg"`, keeps a minimum width of 15rem, and spaces its title, description, and list
@@ -48,6 +66,8 @@
   - Agents verify visual work on their own Storybook, started with `npm run dev`, against the approved canvas design.
   - `web-ui-dev-teardown-worktree` lands local base-branch commits together with the worktree branch, and Bitbucket pull
     requests merge with rebase and fast-forward.
+  - `web-ui-dev-new-component` and `web-ui-dev-update-component` open a drafts-canvas block with an API table and short
+    usage snippets.
   - The `imf-web-ui-conventions` `styling` topic shows a container setting a custom property that its child reads with
     its own default as the fallback.
   - `web-ui-dev-release` syncs the Claude Design system once npm serves the stable version.
@@ -64,6 +84,7 @@
     as `docs/story-conventions.md` describes.
   - Combobox and Autocomplete stories start at the same top-left corner, so clicking through them does not shift the
     layout. A story resizes its frame with `parameters.frame`, which `withFrame` reads.
+  - The Autocomplete interaction test reads the popup's height after it reopens, so it passes on every run.
 
 ### Fixed