@imfusion/web-ui 0.11.1-dev.74.g7422f7b2 → 0.11.1-dev.83.g3251cc92

package/dist/{tabs-Bl3YlG5t.js → tabs-BNz_OiWn.js}

@@ -112,7 +112,7 @@ function D(e) {
 	});
 }
 D.displayName = "Select.Backdrop";
-function O({ align: e = "start", alignItemWithTrigger: t = !1, sideOffset: n = 4, ...r }) {
+function O({ align: e = "start", alignItemWithTrigger: t = !1, sideOffset: n = 8, ...r }) {
 	return /* @__PURE__ */ l(d.Positioner, {
 		...r,
 		align: e,

package/dist/tokens/control-registry.d.ts

@@ -2,8 +2,8 @@ import { TokenControl } from './token-registry';
 import { TokenOverrides } from './types';
 /**
  * Every {@link TokenControl}: a token with a live adjuster, spreading its data from
- * `TOKEN_REGISTRY`. Semantic font aliases (`font-family-heading`/`-body`/`-ui`/`-code`) are
- * `var()` indirections with no direct control, so they have no entry here.
+ * `TOKEN_REGISTRY`. Semantic font aliases (`font-family-heading`/`-body`/`-ui`) are `var()`
+ * indirections with no direct control, so they have no entry here.
  */
 export declare const TOKEN_CONTROLS: readonly TokenControl[];
 /** Storybook drops URL globals whose value holds quotes or commas, so select overrides travel as option ids. */

package/package.json

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

package/src/docgen/doc.gen.json

@@ -48,7 +48,7 @@
           {
             "name": "size",
             "required": false,
-            "type": "\"sm\" | \"md\" | \"lg\" | null",
+            "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | null",
             "defaultValue": "sm",
             "description": "The avatar size."
           },
@@ -1272,7 +1272,7 @@
             "name": "sideOffset",
             "required": false,
             "type": "number | OffsetFunction",
-            "defaultValue": "4",
+            "defaultValue": "8",
             "description": "Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"
           },
           {
@@ -1491,7 +1491,7 @@
         {
           "name": "size",
           "required": false,
-          "type": "\"sm\" | \"md\" | \"lg\" | null",
+          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | null",
           "defaultValue": "md",
           "description": ""
         },
@@ -3677,7 +3677,7 @@
             "name": "sideOffset",
             "required": false,
             "type": "number | OffsetFunction",
-            "defaultValue": "4",
+            "defaultValue": "8",
             "description": "Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"
           },
           {
@@ -7765,7 +7765,7 @@
             "name": "sideOffset",
             "required": false,
             "type": "number | OffsetFunction",
-            "defaultValue": "4",
+            "defaultValue": "8",
             "description": "Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"
           },
           {
@@ -10552,7 +10552,7 @@
             "name": "sideOffset",
             "required": false,
             "type": "number | OffsetFunction",
-            "defaultValue": "4",
+            "defaultValue": "8",
             "description": "Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"
           },
           {
@@ -12122,7 +12122,7 @@
             "name": "sideOffset",
             "required": false,
             "type": "number | OffsetFunction",
-            "defaultValue": "4",
+            "defaultValue": "8",
             "description": "Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```"
           },
           {

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

@@ -108,6 +108,19 @@ slots. Override a high-level control when a whole family should change; consume
 Foreground roles are for text, icons, borders, and focus rings. Background roles are for fills. The provider sets
 `data-imf-ui-color-scheme="light" | "dark"` on `<html>`, from the OS preference unless its `colorScheme` prop pins one.
 
+## Type
+
+Text set in capitals (`text-transform: uppercase`) uses `--imf-ui-font-family-mono`, the display mono (CoFo Sans Mono), as
+labels, buttons, eyebrows, and table headers do. Code and identifiers shown as code use `--imf-ui-font-family-code` (Paper
+Mono). Entered values and running text stay in the sans families.
+
+```css
+.status {
+  font-family: var(--imf-ui-font-family-mono);
+  text-transform: uppercase;
+}
+```
+
 ## Browser floor
 
 The library targets Safari 17.5, Chrome 123, and Firefox 120 or newer, the first versions with native `light-dark()`.

package/src/llms/tokens.gen.json

@@ -487,7 +487,7 @@
       },
       {
         "name": "--imf-ui-font-family-code",
-        "value": "var(--imf-ui-font-family-mono)"
+        "value": "\"Paper Mono\", ui-monospace, monospace"
       },
       {
         "name": "--imf-ui-font-family-heading",
@@ -495,7 +495,7 @@
       },
       {
         "name": "--imf-ui-font-family-mono",
-        "value": "\"Paper Mono\", ui-monospace, monospace"
+        "value": "\"CoFo Sans Mono\", ui-monospace, monospace"
       },
       {
         "name": "--imf-ui-font-family-sans",
@@ -577,6 +577,10 @@
         "name": "--imf-ui-font-lineheight-display",
         "value": "clamp(2rem, 1.4231rem + 2.5641vw, 4.5rem)"
       },
+      {
+        "name": "--imf-ui-font-lineheight-h1",
+        "value": "1.05"
+      },
       {
         "name": "--imf-ui-font-lineheight-hero",
         "value": "1"
@@ -657,6 +661,10 @@
         "name": "--imf-ui-font-size-fluid-3",
         "value": "clamp(2rem, 1.4231rem + 2.5641vw, 4.5rem)"
       },
+      {
+        "name": "--imf-ui-font-size-h1",
+        "value": "clamp(2.5rem, 5.5cqi, 4rem)"
+      },
       {
         "name": "--imf-ui-font-size-hero",
         "value": "clamp(3rem, 1.6154rem + 6.1538vw, 9rem)"
@@ -973,5 +981,5 @@
       }
     ]
   },
-  "count": 237
+  "count": 239
 }