@imfusion/web-ui 0.9.1-dev.9.gdfff1530 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +41 -22
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,40 +1,59 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## `0.10.0` 2026.10.15
|
|
4
|
+
|
|
5
|
+
### Highlights
|
|
6
|
+
|
|
7
|
+
#### New and updated components
|
|
8
|
+
|
|
9
|
+
- `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
|
|
10
|
+
optional description, and a trailing arrow that `endGlyph` replaces. It renders a plain anchor, so TanStack Router's
|
|
11
|
+
`createLink` can wrap it. `imf-web-ui-ux` picks it for a link that fills its own row, and `ChipLink` for one inside text
|
|
12
|
+
([WEBSDK-272](https://imfusion.atlassian.net/browse/WEBSDK-272)).
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
- `Skeleton.Root` takes `loading` and fades the data in over the bones when it turns false.
|
|
18
|
+
|
|
19
|
+
- The `variant="position"` `Slider` thumb is primary at rest and gray on hover. It is opaque, so a `Slider.Indicator` under
|
|
20
|
+
it stays hidden. Every Slider thumb now draws its focus ring on keyboard focus.
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
#### A type hierarchy that holds at every width
|
|
26
|
+
|
|
27
|
+
Every fluid font size grows across the same viewport range, 360px to 1920px, so a heading never ends up smaller than the one
|
|
28
|
+
below it. `--imf-ui-font-size-fluid-0` to `fluid-2` follow one ratio scale above `--imf-ui-font-size-body`: `fluid-0` runs
|
|
29
|
+
from 19.2px to 25px, `fluid-1` from 23px to 31.25px, and `fluid-2` from 27.6px to 39px.
|
|
30
|
+
|
|
31
|
+
Headings change with it, so check your pages. `Typo.H3` uses `fluid-1` and `Typo.H4` uses `fluid-0`, both at the regular
|
|
32
|
+
weight. `Typo.H2` is medium weight, `Typo.Blockquote` uses `fluid-0`, and `--imf-ui-font-lineheight-title` follows the larger
|
|
33
|
+
H2 range. The Typo page has a Hierarchy story that shows every member at 360px, 768px, 1440px, and 1920px side by side.
|
|
4
34
|
|
|
5
35
|
### Added
|
|
6
36
|
|
|
7
|
-
- `RichLink` is a link that fills a row: an optional icon on a tile tinted in the primary color, a label, an optional
|
|
8
|
-
description line, and a trailing arrow for where it leads, which `endGlyph` replaces. It renders a plain anchor, so
|
|
9
|
-
TanStack Router's `createLink` can wrap it
|
|
10
|
-
([WEBSDK-272](https://imfusion.atlassian.net/browse/WEBSDK-272)) — Nikolaus Brunner <brunner@imfusion.com>
|
|
11
37
|
- Agent skills — Nikolaus Brunner <brunner@imfusion.com>
|
|
12
38
|
- `imf-web-ui-conventions` puts a stand-in for a missing Web UI component in `components/web-ui-pending/`, built as
|
|
13
39
|
the library would ship it and deleted once it does.
|
|
14
|
-
-
|
|
15
|
-
-
|
|
40
|
+
- Storybook — Nikolaus Brunner <brunner@imfusion.com>
|
|
41
|
+
- A click on a screenshot in a docs carousel opens it full width in a dialog.
|
|
16
42
|
|
|
17
43
|
### Changed
|
|
18
44
|
|
|
19
45
|
- Agent skills — Nikolaus Brunner <brunner@imfusion.com>
|
|
20
|
-
- `
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
-
|
|
24
|
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
|
|
28
|
-
`fluid-0` runs from 19.2px to 25px, `fluid-1` from 23px to 31.25px, and `fluid-2` from 27.6px to 39px.
|
|
29
|
-
- `Typo.H3` uses `--imf-ui-font-size-fluid-1` and `Typo.H4` uses `--imf-ui-font-size-fluid-0`, both at the regular
|
|
30
|
-
weight. `Typo.H2` uses the medium weight, and `Typo.Blockquote` uses `--imf-ui-font-size-fluid-0`.
|
|
31
|
-
- `--imf-ui-font-lineheight-title` follows the larger H2 range.
|
|
32
|
-
- The Typo page has a Hierarchy story that renders every member at 360px, 768px, 1440px, and 1920px side by side.
|
|
46
|
+
- The `web-ui-dev-new-component` interview asks where the design comes from: a new Claude Design canvas, a local HTML
|
|
47
|
+
sketch when the session has no Claude Design, an existing design or placeholder, or a sibling to copy. The plan links
|
|
48
|
+
the design source, and verification checks the built stories against it.
|
|
49
|
+
- `web-ui-dev-update-component` and `web-ui-dev-design-component` ask how to preview a visual change when the session has
|
|
50
|
+
Claude Design, and recommend a canvas for a bigger change. A canvas is made in the Claude app before plan mode.
|
|
51
|
+
- Documentation — Nikolaus Brunner <brunner@imfusion.com>
|
|
52
|
+
- `docs/design-system.md` says to start new designs in the Claude app and when an agent session has Claude Design. The
|
|
53
|
+
standalone project's README marks it as legacy.
|
|
33
54
|
|
|
34
55
|
### Fixed
|
|
35
56
|
|
|
36
|
-
- Components — Nikolaus Brunner <brunner@imfusion.com>
|
|
37
|
-
- Slider thumbs draw their focus ring on keyboard focus.
|
|
38
57
|
- Storybook — Nikolaus Brunner <brunner@imfusion.com>
|
|
39
58
|
- The Slider `All` story renders the position variant without an indicator, as the `Position` story does.
|
|
40
59
|
|
package/package.json
CHANGED