@imfusion/web-ui 0.11.1-dev.31.gb80c710e → 0.11.1-dev.33.gefbd75be

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.11.1-dev.31.gb80c710e",
+  "version": "0.11.1-dev.33.gefbd75be",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",

package/src/llms/skills/imf-web-ui-conventions/topics/styling.md

@@ -19,7 +19,8 @@ Use native CSS and Web UI's public seams. The library's CSS Modules and token na
   transition: opacity var(--imf-ui-duration-quick-2) var(--imf-ui-ease-2);
 
   &:focus-visible {
-    outline: var(--imf-ui-border-size-2) solid var(--imf-ui-color-fg-primary);
+    outline: var(--imf-ui-focus-ring-width) solid var(--imf-ui-focus-ring-color);
+    outline-offset: var(--imf-ui-focus-ring-offset);
   }
 
   &[data-disabled] {
@@ -28,6 +29,13 @@ Use native CSS and Web UI's public seams. The library's CSS Modules and token na
 }
 ```
 
+## Focus ring
+
+Web UI parts draw their own focus ring. Your own focusable elements draw the same one from the `--imf-ui-focus-ring-*`
+tokens: `width` and `color` for the outline, and one of two offsets: `offset` outside a standalone control and `offset-inset`
+for items inside a scrolling or tight container, which would clip an outside ring. A surface filled with a saturated color
+sets `--imf-ui-focus-ring-color` to `--imf-ui-color-fg-oncolor` for everything inside it.
+
 ## Build custom UI from tokens
 
 Use names from the shipped token index for colors, type, size, radius, and shadow. A literal beside a tokenized concept is a

package/src/llms/tokens.gen.json

@@ -462,6 +462,24 @@
         "value": "cubic-bezier(0, 0, 0.05, 1)"
       }
     ],
+    "focus": [
+      {
+        "name": "--imf-ui-focus-ring-color",
+        "value": "var(--imf-ui-color-fg-primary)"
+      },
+      {
+        "name": "--imf-ui-focus-ring-offset",
+        "value": "2px"
+      },
+      {
+        "name": "--imf-ui-focus-ring-offset-inset",
+        "value": "calc(var(--imf-ui-focus-ring-width) * -1)"
+      },
+      {
+        "name": "--imf-ui-focus-ring-width",
+        "value": "var(--imf-ui-border-size-2)"
+      }
+    ],
     "font": [
       {
         "name": "--imf-ui-font-family-body",
@@ -955,5 +973,5 @@
       }
     ]
   },
-  "count": 233
+  "count": 237
 }