@imfusion/web-ui 0.9.0 → 0.9.1-dev.11.g7c95abf5

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # Changelog
 
+## `0.10.0`          2026.10.15
+
+### Highlights
+
+#### A type hierarchy that holds at every width
+
+Every fluid font size grows across the same viewport range, 360px to 1920px, so a heading never ends up smaller than the one
+below it. `--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.
+
+Headings change with it, so check your pages. `Typo.H3` uses `fluid-1` and `Typo.H4` uses `fluid-0`, both at the regular
+weight. `Typo.H2` is medium weight, `Typo.Blockquote` uses `fluid-0`, and `--imf-ui-font-lineheight-title` follows the larger
+H2 range. The Typo page has a Hierarchy story that shows every member at 360px, 768px, 1440px, and 1920px side by side.
+
+![Typo hierarchy at 1440px, light](docs/assets/changelog/0.10.0-typo-hierarchy-light.webp)
+![Typo hierarchy at 1440px, dark](docs/assets/changelog/0.10.0-typo-hierarchy-dark.webp)
+
+#### New and updated components
+
+- `RichLink` is new. It is a link that fills a row: an optional icon on a tile tinted in the primary color, a label, an
+  optional description, and a trailing arrow that `endGlyph` replaces. It renders a plain anchor, so TanStack Router's
+  `createLink` can wrap it. `imf-web-ui-ux` picks it for a link that fills its own row, and `ChipLink` for one inside text
+  ([WEBSDK-272](https://imfusion.atlassian.net/browse/WEBSDK-272)).
+
+  ![RichLink in a stack, light](docs/assets/changelog/0.10.0-rich-link-light.webp)
+  ![RichLink in a stack, dark](docs/assets/changelog/0.10.0-rich-link-dark.webp)
+
+- `Skeleton.Root` takes `loading` and fades the data in over the bones when it turns false.
+
+- The `variant="position"` `Slider` thumb is primary at rest and gray on hover. It is opaque, so a `Slider.Indicator` under
+  it stays hidden. Every Slider thumb now draws its focus ring on keyboard focus.
+
+  ![Slider position variant, light](docs/assets/changelog/0.10.0-slider-position-light.webp)
+  ![Slider position variant, dark](docs/assets/changelog/0.10.0-slider-position-dark.webp)
+
+### Added
+
+- 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.
+
+### Changed
+
+- Agent skills — Nikolaus Brunner <brunner@imfusion.com>
+  - The `web-ui-dev-new-component` interview asks where the design comes from: a new Claude Design canvas, a local HTML
+    sketch when the session has no Claude Design, an existing design or placeholder, or a sibling to copy. The plan links
+    the design source, and verification checks the built stories against it.
+  - `web-ui-dev-update-component` and `web-ui-dev-design-component` ask how to preview a visual change when the session has
+    Claude Design, and recommend a canvas for a bigger change. A canvas is made in the Claude app before plan mode.
+- Documentation — Nikolaus Brunner <brunner@imfusion.com>
+  - `docs/design-system.md` says to start new designs in the Claude app and when an agent session has Claude Design. The
+    standalone project's README marks it as legacy.
+
+### Fixed
+
+- 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';