@imfusion/web-ui 0.8.1-dev.52.g0818e1db → 0.8.1-dev.58.g0912b389

package/CHANGELOG.md

@@ -1,9 +1,41 @@
 # Changelog
 
-## [Unreleased]
+## `0.9.0`          TBD
 
 ### Highlights
 
+#### A reworked AppShell
+
+The navbar runs the full height of the screen on the support background, and Header and Footer start beside it.
+`AppShell.Main` is the one scroll container, with a thin scrollbar, so the header, navbar, and
+aside stay put while the content scrolls. Sections drop their dividers and are set apart by their backgrounds
+([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)).
+
+- `variant="branded"` fills the navbar with the primary color and switches its text to on-color.
+- `AppShell.NavItem` is a navbar link with an icon, a label, and a description, in the navbar's text color.
+- `AppShell.Burger` opens the navbar as a drawer below its breakpoint. The aside opens as a bottom sheet on phones and a side
+  drawer on tablets, and both report through `onOpenChange`.
+- The docked aside has a drag handle that resizes it; a double-click or Home resets it. `resizable`, `onWidthChange`, and
+  `resizeLabel` configure it.
+- `AppShell.Root` is an inline-size container. The navbar, the aside, and Main size against it, and Main keeps at least 45%
+  of the shell.
+
+![Desktop: the navbar runs the full height, and Main scrolls between the fixed sections](docs/assets/changelog/0.9.0-appshell-desktop.webp)
+![Branded navbar filled with the primary color](docs/assets/changelog/0.9.0-appshell-branded.webp)
+![Dark color scheme](docs/assets/changelog/0.9.0-appshell-dark.webp)
+![Phone: the navbar and aside open as drawers](docs/assets/changelog/0.9.0-appshell-phone.webp)
+
+#### Medical imaging icons
+
+`@imfusion/web-ui/icons` has 65 Medical Imaging icons from the ImFusion design team, such as `ToolBrush`, `ToolWindowLevel`,
+and `DefineRoiAction`. Every icon now has square corners, line caps, and joins to match them; letters, digits, stars, and
+badges keep Iconoir's round shapes. The package generates its icons from Iconoir's SVG source, so `iconoir-react` is no longer
+a dependency, and `strokeWidth` reaches every part of an icon, circles and rectangles included
+([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)).
+
+The Iconography catalog filters by origin, `iconoir` or `imfusion`, and gives every icon its own page with a shareable link
+and an SVG download. `imf-web-ui-update` proposes catalog icons for project-local icons they now cover.
+
 #### Built with Vite+
 
 Web UI builds, tests, lints, and formats with [Vite+](https://viteplus.dev/), a single `vp` toolchain over Vite, Vitest,
@@ -25,6 +57,102 @@ Someone new to npm gets a plain sentence before each command and a short gloss f
 gets the short version. You can ask for a pause after each step or after each finished piece, and the approvals the
 workflows already ask for stay as they are. Say "change my profile" to answer again.
 
+#### New and updated components
+
+- `Avatar` is new. It shows a person's photo, their initials, or a person glyph, in three sizes and an on-color context.
+
+  ![Avatar sizes, light](docs/assets/changelog/0.9.0-avatar-light.webp)
+  ![Avatar sizes, dark](docs/assets/changelog/0.9.0-avatar-dark.webp)
+
+- `AccountCard` is new. It links to the signed-in person's account, with an action such as Log out in its top row, and
+  `AccountCard.Group` lists several cards with the current one marked. `splitEmail` and `initialsFromEmail` fill an
+  `AccountCard` or `Avatar` before the person's name is known.
+
+  ![AccountCard group, light](docs/assets/changelog/0.9.0-account-card-light.webp)
+  ![AccountCard group, dark](docs/assets/changelog/0.9.0-account-card-dark.webp)
+
+- `Skeleton` is new. It holds the place of loading data, one text line or a sized block at a time.
+
+  ![Skeleton, light](docs/assets/changelog/0.9.0-skeleton-light.webp)
+  ![Skeleton, dark](docs/assets/changelog/0.9.0-skeleton-dark.webp)
+
+- `Meter` is new. It shows a measured amount within a range, such as seats in use, as a read-only bar
+  ([WEBSDK-250](https://imfusion.atlassian.net/browse/WEBSDK-250)).
+
+  ![Meter, light](docs/assets/changelog/0.9.0-meter-light.webp)
+  ![Meter, dark](docs/assets/changelog/0.9.0-meter-dark.webp)
+
+- `IconButton` is new. It is a square `Button` with a single icon, named by its `label`.
+
+  ![IconButton variants and sizes, light](docs/assets/changelog/0.9.0-icon-button-light.webp)
+  ![IconButton variants and sizes, dark](docs/assets/changelog/0.9.0-icon-button-dark.webp)
+
+- `FrameSelection` is new, from `@imfusion/web-ui/integrations/frame-selection`. It steps through the frames of ImFusion Web
+  SDK image sets with a position slider and a current-of-total readout.
+
+  ![FrameSelection, light](docs/assets/changelog/0.9.0-frame-selection-light.webp)
+  ![FrameSelection, dark](docs/assets/changelog/0.9.0-frame-selection-dark.webp)
+
+- `Slider.Root` has `variant="position"`, a scrollbar-like trough and thumb for picking one position in a range.
+
+  ![Slider position variant, light](docs/assets/changelog/0.9.0-slider-position-light.webp)
+  ![Slider position variant, dark](docs/assets/changelog/0.9.0-slider-position-dark.webp)
+
+- `Card.Status` marks a card's outcome with a tinted column or band and the matching `Callout` glyph.
+
+  ![Card statuses, light](docs/assets/changelog/0.9.0-card-status-light.webp)
+  ![Card statuses, dark](docs/assets/changelog/0.9.0-card-status-dark.webp)
+
+- `Table.RowLink` links a row to its detail page from inside a cell and takes `render` for router links.
+
+  ![Table with row links, light](docs/assets/changelog/0.9.0-table-row-link-light.webp)
+  ![Table with row links, dark](docs/assets/changelog/0.9.0-table-row-link-dark.webp)
+
+- `Typo.Eyebrow` sets a short mono label above a heading, and the `Typo` body members take a `weight` of `regular`,
+  `medium`, or `strong`.
+
+  ![Typo weights, light](docs/assets/changelog/0.9.0-typo-weight-light.webp)
+  ![Typo weights, dark](docs/assets/changelog/0.9.0-typo-weight-dark.webp)
+
+- `Button` centers its icons and label when a container stretches it; `justify="spread"` pins the icons to the edges.
+
+  ![Button justify, light](docs/assets/changelog/0.9.0-button-justify-light.webp)
+  ![Button justify, dark](docs/assets/changelog/0.9.0-button-justify-dark.webp)
+
+#### Important fixes
+
+- Screen readers announce `Field.Error` when its message appears.
+- `WebUIProvider` and the components under it render on React 18.
+- `data-imf-ui-color-scheme` on a nested element switches the semantic colors for that subtree.
+- The `@imfusion/sdk` and `@imfusion/sdk-react` peers accept any version, SDK dev builds included.
+
+#### Migrating from 0.8
+
+Web UI needs Safari 17.5, Chrome 123, or Firefox 120. Older browsers show no semantic colors.
+
+The document no longer scrolls inside an `AppShell`. Move window scroll listeners onto `AppShell.Main`:
+
+```diff
+- window.addEventListener("scroll", onScroll);
+- <AppShell.Main>…</AppShell.Main>
++ <AppShell.Main onScroll={onScroll}>…</AppShell.Main>
+```
+
+Scroll restoration and `scrollTo` take Main's element through a `ref`:
+
+```diff
+- window.scrollTo({ top: 0 });
++ mainRef.current?.scrollTo({ top: 0 });
++ <AppShell.Main ref={mainRef}>…</AppShell.Main>
+```
+
+AppShell sections draw no dividers. Delete overrides of the border properties, which no longer apply:
+
+```diff
+- --imf-ui-appshell-border-color: var(--imf-ui-color-bg-brand);
+- --imf-ui-appshell-border-width: var(--imf-ui-border-size-2);
+```
+
 ### Breaking
 
 - **Breaking:** The library supports Safari 17.5, Chrome 123, and Firefox 120 or newer. — Nikolaus Brunner <brunner@imfusion.com>
@@ -45,26 +173,6 @@ workflows already ask for stay as they are. Say "change my profile" to answer ag
     ([CP-202](https://imfusion.atlassian.net/browse/CP-202)).
   - `web-ui-dev-new-icon` adds custom icons from an SVG, a Figma link, a Claude Design project, or a description. It checks the icon catalog
     first, and codegen validates the SVGs in `src/icons/svg/` and exports them beside the Iconoir set ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)).
-- Components — Nikolaus Brunner <brunner@imfusion.com>
-  - `Avatar` shows a person's photo, their initials, or a person glyph, in three sizes and an on-color context.
-  - `AccountCard` links to the signed-in person's account: a large title over a quiet subtitle, then the organization and a
-    mono role under a rule, with an action such as Log out in its top row. Emails wrap at the `@` and at dots, and
-    `AccountCard.Group` lists several cards with the current one marked.
-  - `Typo.Eyebrow` sets a short mono, uppercase label above a heading, in the quiet `support` color by default.
-  - `Card.Status` marks a card's outcome with a tinted column or band and the `info`, `positive`, `warning`, or `negative`
-    glyph that `Callout` uses for the same status.
-  - `Typo` body members (`P`, `Lead`, `Detail`, `Small`, `Blockquote`, `Highlight`, `Link`, and the lists) take an
-    optional `weight` of `regular`, `medium`, or `strong`, for short body text on cards that reads thin at the regular weight.
-  - `Table.RowLink` links a row to its detail page from inside a cell. It reads as row text without an underline, wraps long
-    values such as emails anywhere, and takes a `render` prop for router links.
-  - `Skeleton` holds the place of loading data: `Skeleton.Text` is one line of its parent's font tall, `Skeleton.Block`
-    takes a size or a circle, and `Skeleton.Root` announces the load once and can hold its scan line still.
-  - `Button` has a `justify` prop: `center` or `spread`, which pins the icons to the edges of a stretched button.
-  - `Meter` shows a measured amount within a range, such as seats in use, as a read-only bar with an optional label and
-    value readout. ([WEBSDK-250](https://imfusion.atlassian.net/browse/WEBSDK-250))
-- Utilities — Nikolaus Brunner <brunner@imfusion.com>
-  - `splitEmail` splits an email into its local part and domain, and `initialsFromEmail` derives up to two initials from
-    the local part, for an `AccountCard` or `Avatar` before the person's name is known.
 - Components — Stephan Wenninger <wenninger@imfusion.com>
   - `Slider.Root` has a `variant="position"` that draws a scrollbar-like trough and bar thumb for picking one position in a
     range.
@@ -73,48 +181,29 @@ workflows already ask for stay as they are. Say "change my profile" to answer ag
   - `IconButton` is a square `Button` that shows a single icon and no visible text. `label` sets its accessible name, the
     glyph size follows the button size, and `iconProps` passes props such as `strokeWidth` to the icon.
 - AppShell ([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)) — Nikolaus Brunner <brunner@imfusion.com>
-  - `AppShell.Navbar` has a `variant` prop: `default` or `branded`, a rail filled with the primary color.
-  - `AppShell.Burger` toggles the navbar drawer with three sheared bands that align on hover and cross when open.
-  - `AppShell.NavItem` is a navbar link with icon, label, and description that follows the navbar's color.
-  - `AppShell.Navbar` and `AppShell.Aside` take `onOpenChange` for their drawers.
-  - `AppShell.Aside` has a drag handle that resizes it and resets on double-click or Home. It is on by default; `resizable`, `onWidthChange`, and `resizeLabel` configure it.
   - `--imf-ui-appshell-aside-min-width` (`max(20rem, 20cqi)`) is the narrowest the docked aside gets, dragged or not.
   - `--imf-ui-appshell-main-min-width` (`max(24rem, 45cqi)`) caps the docked aside so Main keeps at least 45% of the shell.
   - `--imf-ui-appshell-main-max-width` caps Main's content at `100rem` on wide screens, aligned to the start.
+  - `--imf-ui-appshell-navbar-padding` sets one gutter for the navbar's sections. Nav items and an `AccountCard` widen
+    their surface past it, so the logo, icons, and avatar share one edge, and the first section is a header-height row.
 - Storybook — Nikolaus Brunner <brunner@imfusion.com>
   - The toolbar has Full HD, QHD, and Ultrawide viewports for previews past `xl`.
   - The floating token button is hidden by default; `parameters.tokenDrawer.show` shows it for a story, and a toolbar toggle overrides either way.
   - Sidebar labels stay in the sidebar text color when a story has test warnings or errors; the status icon carries the state.
   - `All` matrices and stories with a fixed render hide the controls panel; stories that log actions keep it without the Controls tab.
 
-- Icons ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)) — Nikolaus Brunner <brunner@imfusion.com>
-  - 65 Medical Imaging icons from the ImFusion design team, such as `ToolBrush`, `ToolWindowLevel`, and `DefineRoiAction`.
-
-- Storybook ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)) — Nikolaus Brunner <brunner@imfusion.com>
-  - Every icon has its own Iconography page with a shareable link, and both the page and the catalog tile download the icon as
-    an SVG under its source file name.
-
 ### Changed
 
 - Icons ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)) — Nikolaus Brunner <brunner@imfusion.com>
-  - Icons from `@imfusion/web-ui/icons` have square corners, line caps, and line joins. Letters, digits, stars, and
-    badges keep Iconoir's round geometry.
-  - The package generates its icons from Iconoir's SVG source and has no `iconoir-react` dependency.
-  - `strokeWidth` set on `Icon` or through `WebUIProvider` reaches every part of an icon, circles and rectangles included.
-  - Every record in the icon catalog names its `origin`, `iconoir` or `imfusion`, and its source `file`. The Iconography
-    catalog filters by origin and badges every icon with it. While no category filter is set, each tile also names the
-    icon's category.
-
+  - Every record in the icon catalog names its `origin`, `iconoir` or `imfusion`, and its source `file`. While no category
+    filter is set, each Iconography tile names the icon's category.
 - Components — Nikolaus Brunner <brunner@imfusion.com>
-  - `Button` centers its icons and label when a container stretches it wider than its content; `justify="spread"`
-    keeps the icons at the edges.
+  - Parts that render a plain element, such as `AppShell.Main`, `Stack`, and `Card.Root`, accept a `ref`.
 - Documentation — Nikolaus Brunner <brunner@imfusion.com>
   - The `CodeHighlight` install section names TanStack Highlight 0.1.x and the 0.1.0 build it is tested against.
   - The consumer agent tooling diagram groups the skills you run in one lane, so the router and the profile each reach them
     with a single edge.
 - Agent skills — Nikolaus Brunner <brunner@imfusion.com>
-  - `imf-web-ui-update` proposes catalog icons for project-local icons they now cover, above all icons a release added
-    ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)).
   - `imf-web-ui-conventions` declares named functions, local component helpers included, with `function`, and keeps
     inline callbacks as arrows.
   - `imf-web-ui-conventions` loads route data with `queryClient.query({ ...options, staleTime: "static" })` in place of the
@@ -130,35 +219,25 @@ workflows already ask for stay as they are. Say "change my profile" to answer ag
   - `web-ui-dev-eval-consumer-skills` records every run's benchmark, and skips the record only when the user asks for it.
   - `web-ui-dev-claude-design-sync-legacy` uploads to the standalone Claude Design site until it closes on 2026-12-14
     ([CP-202](https://imfusion.atlassian.net/browse/CP-202)).
-  - `imf-web-ui-conventions` recommends the Vite+ toolchain: `vp dev`, `vp build`, `vp test`, Oxfmt through `vp fmt`, Oxlint
-    through `vp lint`, and a pre-commit hook that runs `vp staged`.
   - `web-ui install` formats the files it writes, skill version markers and hook settings, with the project's `vp fmt` when
     the project has it, and with its Prettier otherwise.
   - `imf-web-ui-audit` searches the frontend for `TODO`, `FIXME`, `HACK`, and similar markers. A marker that admits a
     convention gap backs that topic's finding, and the rest go under `Suggestions`.
 - CI and verification — Nikolaus Brunner <brunner@imfusion.com>
-  - The toolchain is Vite+: `vp build` and `vp test` replace the Vite and Vitest scripts, and Oxlint and Oxfmt replace ESLint and Prettier.
-  - The pre-commit hook runs `vp staged` against the staged state and never rewrites or stages files.
   - `verify:generated` checks every committed `*.gen.*` file against the sources that produce it. It runs in the pre-commit hook, in `verify:full`, and as a TeamCity step.
   - The pre-push hook runs `verify:fast`, the `verify:full` suite without the builds and tests.
 - AppShell ([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)) — Nikolaus Brunner <brunner@imfusion.com>
-  - The navbar sits on the support background by default.
-  - The navbar variants set the navbar's text color: `fg-main` by default, `fg-oncolor` when branded.
-  - The navbar runs the full height of the screen; Header and Footer start beside it.
-  - `AppShell.Main` scrolls with a thin scrollbar.
   - Below their breakpoints the navbar opens as a drawer from the inline end and the aside as a bottom sheet on phones or a side drawer on tablets.
   - `AppShell.Root` is an inline-size container; the navbar is `clamp(16rem, 18cqi, 20rem)` and the aside `clamp(20rem, 30cqi, 40rem)` wide.
+  - Main and aside padding grow with the shell, from `1.25rem` up to `3rem` and `2rem`, and the header is `4rem` tall.
 
 ### Fixed
 
 - Components — Nikolaus Brunner <brunner@imfusion.com>
-  - Screen readers announce `Field.Error` when its message appears; it has `role="alert"` by default.
-  - `WebUIProvider` and the components under it render on React 18, the runtime Claude's design canvases use.
   - On-color `ghost` and `outline` Buttons invert to a white fill on hover instead of near-black.
   - `Button`'s `startIcon` sits level with the label.
 - Peer dependencies — Nikolaus Brunner <brunner@imfusion.com>
-  - The `@imfusion/sdk` and `@imfusion/sdk-react` peers accept any version, SDK dev builds included. The
-    `FrameSelection` and `ImageDisplayOptions` install sections name SDK 1.x and the 1.0.0 build they are tested against.
+  - The `FrameSelection` and `ImageDisplayOptions` install sections name SDK 1.x and the 1.0.0 build they are tested against.
 - CI and verification — Nikolaus Brunner <brunner@imfusion.com>
   - The dev skill eval report scores the dev scenarios and lists only the `web-ui-dev-*` skills.
   - `verify:icons` fails when a one-icon import bundles any other icon ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)).
@@ -170,8 +249,6 @@ workflows already ask for stay as they are. Say "change my profile" to answer ag
   - The Iconography catalog shows solid icons as drawn, and its Copy JSX snippet adds no fill or stroke override.
   - Long icon names in the Iconography catalog break between words instead of being cut off.
   - Button's controls list `variant`, `size`, and its other variant props before the inherited Base UI props.
-- Token defaults — Nikolaus Brunner <brunner@imfusion.com>
-  - `data-imf-ui-color-scheme` on a nested element switches the semantic colors for that element's subtree.
 
 ---
 

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

@@ -4,7 +4,7 @@ import * as AvatarParts from '../avatar/avatar';
 declare const root: (props?: ({
     context?: "default" | "oncolor" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type RootProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root>;
+type RootProps = React.ComponentProps<"div"> & VariantProps<typeof root>;
 /**
  * AccountCard.Root — the signed-in person's card: `AccountCard.Link` and, in its top row, `AccountCard.Action`. The
  * action sits beside the link, not inside it, since a link cannot contain a button.
@@ -24,7 +24,7 @@ declare function Link({ render, ...props }: useRender.ComponentProps<"a">): impo
 declare namespace Link {
     var displayName: string;
 }
-type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
+type AvatarProps = React.ComponentProps<"span"> & {
     /** The person's photo. Until it loads, and when it fails, the initials or the person glyph show instead. */
     src?: string;
     /** The avatar size. */
@@ -42,7 +42,7 @@ declare namespace Avatar {
  * AccountCard.Title — the account's name, or the email's local part until a name exists. Set large; text wraps before
  * an `@` and after a dot.
  */
-declare function Title({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare function Title({ children, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare namespace Title {
     var displayName: string;
 }
@@ -50,17 +50,17 @@ declare namespace Title {
  * AccountCard.Subtitle — the quiet line under the title: the email's domain, or the whole email once the title is a
  * name. Text wraps before an `@` and after a dot.
  */
-declare function Subtitle({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare function Subtitle({ children, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare namespace Subtitle {
     var displayName: string;
 }
 /** AccountCard.Description — the organization, under a rule at the foot of the card. */
-declare function Description(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare function Description(props: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare namespace Description {
     var displayName: string;
 }
 /** AccountCard.Role — a mono uppercase label beside the description, such as the person's role. */
-declare function Role(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare function Role(props: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare namespace Role {
     var displayName: string;
 }
@@ -68,7 +68,7 @@ declare namespace Role {
  * AccountCard.Action — a slot in the card's top row, beside the link, such as a ghost icon `Button` that logs out. The
  * button carries its own `aria-label` and its own `context`.
  */
-declare function Action(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function Action(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare namespace Action {
     var displayName: string;
 }
@@ -76,7 +76,7 @@ declare namespace Action {
  * AccountCard.Group — a list of cards, such as accounts to switch between. Inside it a link with `aria-current="page"`
  * shows as current; a standalone card is always the signed-in account and shows no current state.
  */
-declare function Group(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function Group(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare namespace Group {
     var displayName: string;
 }

package/dist/components/app-shell/app-shell.d.ts

@@ -8,7 +8,7 @@ declare function Root({ ref, ...props }: React.ComponentProps<"div">): import("r
 declare namespace Root {
     var displayName: string;
 }
-declare function Header(props: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+declare function Header(props: React.ComponentProps<"header">): import("react/jsx-runtime").JSX.Element;
 declare namespace Header {
     var displayName: string;
 }
@@ -18,7 +18,7 @@ type DrawerProps = {
     /** Called when the drawer asks to open or close: scrim, swipe, or Escape. */
     onOpenChange?: (open: boolean) => void;
 };
-type NavbarProps = React.HTMLAttributes<HTMLElement> & VariantProps<typeof navbarSurface> & DrawerProps;
+type NavbarProps = React.ComponentProps<"nav"> & VariantProps<typeof navbarSurface> & DrawerProps;
 /**
  * `variant="branded"` paints the primary color; children opt into on-color themselves. Below `md` the navbar opens as a
  * drawer from the inline end.
@@ -27,7 +27,7 @@ declare function Navbar({ variant, open, onOpenChange, ...props }: NavbarProps):
 declare namespace Navbar {
     var displayName: string;
 }
-type AsideProps = React.HTMLAttributes<HTMLElement> & DrawerProps & {
+type AsideProps = React.ComponentProps<"aside"> & DrawerProps & {
     /** Adds a drag handle on the inline-start edge from the `lg` breakpoint up. Double-click or Home restores the default width. */
     resizable?: boolean;
     /** Called with the new width in px when a drag ends, on each arrow-key step, and on reset. */
@@ -40,15 +40,15 @@ declare function Aside({ open, onOpenChange, resizable, onWidthChange, resizeLab
 declare namespace Aside {
     var displayName: string;
 }
-declare function Footer(props: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+declare function Footer(props: React.ComponentProps<"footer">): import("react/jsx-runtime").JSX.Element;
 declare namespace Footer {
     var displayName: string;
 }
-declare function Main(props: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+declare function Main(props: React.ComponentProps<"main">): import("react/jsx-runtime").JSX.Element;
 declare namespace Main {
     var displayName: string;
 }
-type SectionProps = React.HTMLAttributes<HTMLDivElement> & {
+type SectionProps = React.ComponentProps<"div"> & {
     /** If set, the section expands to fill the remaining space in its sidebar. */
     grow?: boolean;
 };

package/dist/components/callout/callout.d.ts

@@ -9,7 +9,7 @@ declare const root: (props?: ({
  * the banner so it reads as a block region, not full container width. A persistent content-flow
  * element — not a transient Toast, not a modal Alert Dialog.
  */
-declare function Root({ variant, maxWidth, children, ...props }: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root>): import("react/jsx-runtime").JSX.Element;
+declare function Root({ variant, maxWidth, children, ...props }: React.ComponentProps<"div"> & VariantProps<typeof root>): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
     var displayName: string;
 }
@@ -18,17 +18,17 @@ declare namespace Root {
  * are passed; pass a custom icon as children to override. `aria-hidden` (variant is conveyed by
  * copy) and inherits colour via `currentColor`.
  */
-declare function Icon({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare function Icon({ children, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare namespace Icon {
     var displayName: string;
 }
 /** Callout.Title — an optional short heading, set in the semi-mono UPPERCASE technical voice. */
-declare function Title(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function Title(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare namespace Title {
     var displayName: string;
 }
 /** Callout.Description — the message body, set in the editorial (grotesk) body voice. */
-declare function Description(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function Description(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare namespace Description {
     var displayName: string;
 }

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

@@ -6,7 +6,7 @@ declare const root: (props?: ({
     radius?: "sm" | "md" | "lg" | "brand" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type RootProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root> & {
+type RootProps = React.ComponentProps<"div"> & VariantProps<typeof root> & {
     /** Draws the hairline border. Applies to the neutral variants only — coloured variants are always borderless. */
     /** @default true */
     withBorder?: boolean;
@@ -30,7 +30,7 @@ declare function Root({ density, variant, shadow, radius, orientation, withBorde
 declare namespace Root {
     var displayName: string;
 }
-type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+type ImageProps = React.ComponentProps<"img"> & {
     /** Width divided by height, or "auto" to use the image's intrinsic ratio. */
     aspectRatio?: number | "auto";
 };
@@ -45,7 +45,7 @@ declare namespace Image {
 declare const status: (props?: ({
     variant?: "positive" | "negative" | "warning" | "info" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type StatusProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof status>;
+type StatusProps = React.ComponentProps<"div"> & VariantProps<typeof status>;
 /**
  * Card.Status — a tinted slot that marks the card's status with the variant's glyph. Pass
  * children to replace the glyph. Like `Card.Image`, place it first among the slots: a column
@@ -56,7 +56,7 @@ declare function Status({ variant, children, ...props }: StatusProps): import("r
 declare namespace Status {
     var displayName: string;
 }
-type SlotProps = React.HTMLAttributes<HTMLDivElement>;
+type SlotProps = React.ComponentProps<"div">;
 /** Card.Header — the padded title region at the top of the card body. */
 declare function Header(props: SlotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Header {

package/dist/components/chip/chip.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { chip } from './chip.cva';
-type Props = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof chip> & {
+type Props = React.ComponentProps<"span"> & VariantProps<typeof chip> & {
     children: React.ReactNode;
 };
 /**

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

@@ -1,7 +1,7 @@
 import { chip } from '../chip/chip.cva';
 import { VariantProps } from 'class-variance-authority';
 export type ChipLinkKind = "external" | "internal";
-type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & VariantProps<typeof chip> & {
+type Props = React.ComponentProps<"a"> & VariantProps<typeof chip> & {
     href: string;
     /** 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?: ChipLinkKind;

package/dist/components/code/code.d.ts

@@ -30,7 +30,7 @@ export declare function InlineLink({ kind, ...props }: InlineLinkProps): import(
 export declare namespace InlineLink {
     var displayName: string;
 }
-type BlockProps = Omit<React.HTMLAttributes<HTMLPreElement>, "children"> & {
+type BlockProps = Omit<React.ComponentProps<"pre">, "children"> & {
     /** Code content shown in the block. The copy button copies its rendered text. */
     children: React.ReactNode;
     /** Language label shown in the corner notch. Omit to hide the notch. */

package/dist/components/logo/logo.d.ts

@@ -4,7 +4,7 @@ declare const logo: (props?: ({
     size?: "sm" | "md" | "lg" | "hero" | "xl" | "xs" | "fit" | null | undefined;
     variant?: "oncolor" | "main" | "inherit" | "support" | "minor" | "brand" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & VariantProps<typeof logo> & {
+type Props = Omit<React.ComponentProps<"span">, "children"> & VariantProps<typeof logo> & {
     /** Logo source — an image URL or inline SVG node. No brand default; see `ImFusionLogo` for the ImFusion mark. */
     src: string | ReactNode;
     alt: string;

package/dist/components/navigation-menu/subs/link.d.ts

@@ -15,7 +15,7 @@ export declare namespace Link {
  * Owns the flyout list layout so consumers wrap each card in an `<li>` and add no
  * layout styling of their own. Renders a `<ul>`.
  */
-export declare function LinkList(props: React.HTMLAttributes<HTMLUListElement>): import("react/jsx-runtime").JSX.Element;
+export declare function LinkList(props: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
 export declare namespace LinkList {
     var displayName: string;
 }

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

@@ -59,7 +59,7 @@ export declare namespace Viewport {
     var displayName: string;
 }
 /** Popover.Eyebrow — small uppercase label above Title, for a category or kicker (e.g. "Glossary definition"). */
-export declare function Eyebrow(props: React.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Eyebrow(props: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
 export declare namespace Eyebrow {
     var displayName: string;
 }

package/dist/components/prose/prose.d.ts

@@ -1 +1 @@
-export declare function Prose(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Prose(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/row/row.d.ts

@@ -5,7 +5,7 @@ declare const row: (props?: ({
     justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
     wrap?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof row> & {
+type Props = React.ComponentProps<"div"> & VariantProps<typeof row> & {
     /**
      * Cross-axis alignment. Sets both `align-items` (item alignment within a
      * row) and `align-content` (row distribution when `wrap` is on). `"stretch"`

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

@@ -13,7 +13,7 @@ declare function Root({ label, animation, render, ...props }: RootProps): import
 declare namespace Root {
     var displayName: string;
 }
-type TextProps = React.HTMLAttributes<HTMLSpanElement> & {
+type TextProps = React.ComponentProps<"span"> & {
     /** Width of the bar, capped at the container width. */
     width?: React.CSSProperties["width"];
     /** Number of stacked lines. The last of several is 60% wide. */
@@ -27,7 +27,7 @@ declare function Text({ width, lines, style, ...props }: TextProps): import("rea
 declare namespace Text {
     var displayName: string;
 }
-type BlockProps = React.HTMLAttributes<HTMLSpanElement> & ({
+type BlockProps = React.ComponentProps<"span"> & ({
     /** `circle` takes its size from `width`, for avatars. */
     shape?: "rect";
     /** Width of the block, capped at the container width. A circle uses it for both sides. */

package/dist/components/spinner/spinner.d.ts

@@ -7,7 +7,7 @@ declare const sources: {
 declare const spinner: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "role"> & VariantProps<typeof spinner> & {
+type Props = Omit<React.ComponentProps<"span">, "role"> & VariantProps<typeof spinner> & {
     /** Accessible label announced by assistive tech. */
     label?: string;
     /**

package/dist/components/stack/stack.d.ts

@@ -4,7 +4,7 @@ declare const stack: (props?: ({
     align?: "center" | "end" | "start" | "stretch" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof stack>;
+type Props = React.ComponentProps<"div"> & VariantProps<typeof stack>;
 /**
  * Stack — vertical layout primitive.
  *

package/dist/components/table/table.d.ts

@@ -1,22 +1,22 @@
 import { useRender } from '@base-ui/react/use-render';
-type HeaderCellProps = React.ThHTMLAttributes<HTMLTableCellElement>;
+type HeaderCellProps = React.ComponentProps<"th">;
 /** Table.Root — the `<table>` element. */
-export declare function Root(props: React.TableHTMLAttributes<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }
 /** Table.Header — the `<thead>` section. */
-export declare function Header(props: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Header(props: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
 export declare namespace Header {
     var displayName: string;
 }
 /** Table.Body — the `<tbody>` section. */
-export declare function Body(props: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Body(props: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
 export declare namespace Body {
     var displayName: string;
 }
 /** Table.Row — a `<tr>` in header or body. */
-export declare function Row(props: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Row(props: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
 export declare namespace Row {
     var displayName: string;
 }
@@ -26,7 +26,7 @@ export declare namespace HeaderCell {
     var displayName: string;
 }
 /** Table.Cell — a `<td>` data cell. */
-export declare function Cell(props: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Cell(props: React.ComponentProps<"td">): import("react/jsx-runtime").JSX.Element;
 export declare namespace Cell {
     var displayName: string;
 }
@@ -43,7 +43,7 @@ export declare namespace RowLink {
  * design: sorting toggles, filter toggles, column menus all render through it
  * rather than each inventing a button. Icon/indicator goes in `children`.
  */
-export declare function HeaderButton({ type, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderButton({ type, ...props }: React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
 export declare namespace HeaderButton {
     var displayName: string;
 }

package/dist/components/tabs/tabs.d.ts

@@ -45,7 +45,7 @@ export declare namespace Indicator {
  * No Base UI equivalent exists; it's surfaced as a named part since its
  * hairline border is what Tabs.Indicator visually fuses into.
  */
-export declare function PanelViewport(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function PanelViewport(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export declare namespace PanelViewport {
     var displayName: string;
 }