@imfusion/web-ui 0.9.0 → 0.9.1-dev.7.g0a2385ef

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [Unreleased]
+
+### Added
+
+- `RichLink` is a link that fills a row: an optional icon on a tile tinted in the primary color, a label, an optional
+  description line, and a trailing arrow for where it leads, which `endGlyph` replaces. It renders a plain anchor, so
+  TanStack Router's `createLink` can wrap it
+  ([WEBSDK-272](https://imfusion.atlassian.net/browse/WEBSDK-272)) — Nikolaus Brunner <brunner@imfusion.com>
+- Agent skills — Nikolaus Brunner <brunner@imfusion.com>
+  - `imf-web-ui-conventions` puts a stand-in for a missing Web UI component in `components/web-ui-pending/`, built as
+    the library would ship it and deleted once it does.
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - `Skeleton.Root` takes `loading` and fades the data in over the bones when it turns false.
+
+### Changed
+
+- Agent skills — Nikolaus Brunner <brunner@imfusion.com>
+  - `imf-web-ui-ux` picks `ChipLink` for a link inside text or a row of chips and `RichLink` for a link that fills its own
+    row ([WEBSDK-272](https://imfusion.atlassian.net/browse/WEBSDK-272)).
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - The `variant="position"` Slider thumb is primary at rest and gray on hover, with an outline ring on keyboard focus. It is
+    opaque, so a `Slider.Indicator` under it stays hidden.
+- Typography — Nikolaus Brunner <brunner@imfusion.com>
+  - Every fluid font size grows across the same viewport range, 360px to 1920px, so the type hierarchy keeps its order at
+    every width. `--imf-ui-font-size-fluid-0` to `fluid-2` follow one ratio scale above `--imf-ui-font-size-body`:
+    `fluid-0` runs from 19.2px to 25px, `fluid-1` from 23px to 31.25px, and `fluid-2` from 27.6px to 39px.
+  - `Typo.H3` uses `--imf-ui-font-size-fluid-1` and `Typo.H4` uses `--imf-ui-font-size-fluid-0`, both at the regular
+    weight. `Typo.H2` uses the medium weight, and `Typo.Blockquote` uses `--imf-ui-font-size-fluid-0`.
+  - `--imf-ui-font-lineheight-title` follows the larger H2 range.
+  - The Typo page has a Hierarchy story that renders every member at 360px, 768px, 1440px, and 1920px side by side.
+
+### Fixed
+
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - Slider thumbs draw their focus ring on keyboard focus.
+- Storybook — Nikolaus Brunner <brunner@imfusion.com>
+  - The Slider `All` story renders the position variant without an indicator, as the `Position` story does.
+
+---
+
 ## `0.9.0` &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2026.10.14
 
 ### Highlights

package/dist/components/rich-link/index.d.ts

@@ -0,0 +1,2 @@
+export { RichLink } from './rich-link';
+export { richLinkMeta } from './rich-link.meta';

package/dist/components/rich-link/rich-link.d.ts

@@ -0,0 +1,18 @@
+import { IconComponent } from '../icon';
+type Props = React.ComponentProps<"a"> & {
+    /** Leading icon from `@imfusion/web-ui/icons`, shown on a tile in the primary color. */
+    glyph?: IconComponent;
+    /** Second line under the label. When set, the label turns bold. */
+    description?: React.ReactNode;
+    /** Link target scope. `"external"` (default) opens in a new tab with a diagonal `ArrowUpRight` icon; `"internal"` stays in the current tab with a horizontal `ArrowRight` icon. */
+    kind?: "external" | "internal";
+    /** Trailing icon from `@imfusion/web-ui/icons`, replacing the arrow `kind` picks, such as `Download` for a file. */
+    endGlyph?: IconComponent;
+};
+/**
+ * RichLink — a link as a whole row: an optional leading icon on a tinted tile, the label with an optional description
+ * line, and a trailing icon for where it leads. Draws no divider; stacked links get their spacing from the layout. Wrap it
+ * with TanStack Router's `createLink` to use it as a router link.
+ */
+export declare function RichLink({ glyph, description, kind, endGlyph, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/rich-link/rich-link.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const richLinkMeta: ComponentMeta;

package/dist/components/skeleton/skeleton.d.ts

@@ -2,14 +2,17 @@ import { useRender } from '@base-ui/react/use-render';
 type RootProps = useRender.ComponentProps<"div"> & {
     /** Announced once through a visually hidden status. Pass `""` when something else already speaks for the region. */
     label: string;
-    /** `none` holds every bone inside still. */
+    /** Whether the region is still loading. Root stays mounted and reveals the data when this turns false. */
+    loading?: boolean;
+    /** `none` holds every bone inside still and swaps in the data without a reveal. */
     animation?: "shimmer" | "none";
 };
 /**
- * Skeleton.Root — marks a region as loading. The view inside renders for real; bones stand in for the data. Sets
- * `aria-busy` and announces `label` once, however many bones it holds.
+ * Skeleton.Root — marks a region as loading. The view inside renders for real; bones stand in for the data. While
+ * `loading`, sets `aria-busy` and announces `label` once, however many bones it holds. When `loading` turns false, the
+ * data fades in over the bones.
  */
-declare function Root({ label, animation, render, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+declare function Root({ label, loading, animation, render, children, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { Button, buttonMeta } from './components/button';
 export { ChipLink, chipLinkMeta } from './components/chip-link';
 export { CopyButton, copyButtonMeta } from './components/copy-button';
 export { IconButton, iconButtonMeta } from './components/icon-button';
+export { RichLink, richLinkMeta } from './components/rich-link';
 export { Checkbox, checkboxMeta } from './components/checkbox';
 export { Field, fieldMeta } from './components/field';
 export { Fieldset, fieldsetMeta } from './components/fieldset';