@imfusion/web-ui 0.11.1-dev.37.gdba3f9f4 → 0.11.1-dev.42.ge966e634

package/CHANGELOG.md

@@ -99,6 +99,8 @@
 
 - `Drawer.Title` wraps a long title instead of running past the panel edge.
   [Drawer](src/components/drawer/drawer.stories.tsx#LongTitle) — Nikolaus Brunner <brunner@imfusion.com>
+- `Card` describes its coloured fills correctly: they set the background, and their content takes `oncolor` variants. —
+  Nikolaus Brunner <brunner@imfusion.com>
 - Typo inside `Callout.Description`, such as `Typo.UnorderedList` or `Typo.P`, matches the description's size and takes
   the variant's colour. [Callout](src/components/callout/callout.stories.tsx#WithList) — Nikolaus Brunner <brunner@imfusion.com>
 - A `Select` option with `Select.ItemDescription` is named by its text alone and reads the description as its accessible
@@ -113,6 +115,13 @@
 - Components — Nikolaus Brunner <brunner@imfusion.com>
   - A `Drawer.Close` or `Popover.Close` rendered as another component, such as a `Button`, keeps that component's styles.
   - A `Popover.Trigger` rendered as another component keeps that component's styles, so `render={<Button />}` looks like a Button.
+- `dist/style.css` opens with the layer order statement (`imf-ui.tokens`, `imf-ui.base`, `imf-ui.components`), so each
+  component's own focus style beats the base focus ring and a focused field shows only its primary border.
+  ([WEBSDK-274](https://imfusion.atlassian.net/browse/WEBSDK-274)) — Nikolaus Brunner <brunner@imfusion.com>
+- `Popover.Positioner` sets the popup 4px away from its trigger by default, as `Select` does, on whichever side it opens.
+  — Nikolaus Brunner <brunner@imfusion.com>
+- `Button variant="primary"` hovers to a blue outline on any surface. Its hover fill was the `main` background, which showed as a
+  white box on a `support` card. [Button](src/components/button/button.stories.tsx#OnSupportCard) — Nikolaus Brunner <brunner@imfusion.com>
 
 ---
 

package/dist/components/card/card.d.ts

@@ -17,8 +17,9 @@ type RootProps = React.ComponentProps<"div"> & VariantProps<typeof root> & {
  * `Card.Footer`. `density` sets one scale that drives both each slot's padding
  * and the gap between slots. `variant` picks the look — neutral tonal surfaces
  * (`main`/`support`/`minor`) carry a hairline border; coloured intent fills
- * (`primary`/`brand`) flip to contrast text and drop the border. `shadow` and
- * `radius` layer on top. Also called a panel, tile, or paper.
+ * (`primary`/`brand`) set the background only and are borderless. Put `oncolor`
+ * content inside them, e.g. `Typo variant="oncolor"` and `Button context="oncolor"`.
+ * `shadow` and `radius` layer on top. Also called a panel, tile, or paper.
  *
  * The image is always the first entry in the stack, so `orientation` just
  * switches the stack between a column and a row without reordering slots.

package/dist/components/popover/popover.d.ts

@@ -35,7 +35,7 @@ export declare namespace Backdrop {
     var displayName: string;
 }
 /** Popover.Positioner — positions the popup relative to the trigger via floating-point layout. */
-export declare function Positioner(props: React.ComponentProps<typeof PopoverPrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
+export declare function Positioner({ sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Positioner {
     var displayName: string;
 }

package/dist/index.js

@@ -3569,11 +3569,12 @@ function Sc(t) {
 	});
 }
 Sc.displayName = "Popover.Backdrop";
-function Cc(t) {
+function Cc({ sideOffset: t = 4, ...n }) {
 	return /* @__PURE__ */ _(O.Positioner, {
-		...t,
+		...n,
+		sideOffset: t,
 		"data-imf-ui-component": "Popover.Positioner",
-		className: (n) => uc({ className: e(t.className, n) })
+		className: (t) => uc({ className: e(n.className, t) })
 	});
 }
 Cc.displayName = "Popover.Positioner";