@imfusion/web-ui 0.11.1-dev.31.gb80c710e → 0.11.1-dev.35.g0028b4dd

package/CHANGELOG.md

@@ -4,6 +4,12 @@
 
 ### Added
 
+- `TabNav` is a new row of links to routes with a bar under the current one, in the underline look of `Tabs`. `TabNav.Item`
+  renders an `<a>`, takes a router link as `render`, and sets `aria-current="page"` from `current`.
+  [TabNav](src/components/tab-nav/tab-nav.stories.tsx#InAProjectHeader) — Nikolaus Brunner <brunner@imfusion.com>
+- `Tabs.Root` takes `appearance`: `"boxed"` (the default, unchanged) or `"underline"`, with mono labels, a 2px bar under the
+  active tab on a hairline rule, and an unframed panel. Underline is horizontal only; a vertical Tabs stays boxed.
+  [Tabs](src/components/tabs/tabs.stories.tsx#Underline) — Nikolaus Brunner <brunner@imfusion.com>
 - `Textarea` is a new multi-line input adapted from Base UI, with the `Input` variants and sizes, a drag-to-resize corner, and
   validation state from `Field`. [Textarea](src/components/textarea/textarea.mdx)
   ([WEBSDK-244](https://imfusion.atlassian.net/browse/WEBSDK-244)) — Nikolaus Brunner <brunner@imfusion.com>
@@ -22,6 +28,9 @@
   — Stephan Wenninger <wenninger@imfusion.com>
 - `Typo.UnorderedList` takes `markerVariant` to colour its dash apart from the text, such as the brand dash on main text.
   [Typo](src/components/typo/typo.stories.tsx#MarkerVariant) — Nikolaus Brunner <brunner@imfusion.com>
+- Focus ring tokens: `--imf-ui-focus-ring-width`, `--imf-ui-focus-ring-color`, and two offsets for a ring outside the
+  element or inside it (`-offset`, `-offset-inset`).
+  ([WEBSDK-274](https://imfusion.atlassian.net/browse/WEBSDK-274)) — Nikolaus Brunner <brunner@imfusion.com>
 
 ### Changed
 
@@ -29,6 +38,21 @@
   primary, with no outline. [Input](src/components/input/input.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `Drawer` draws no border by default; `borderColor` adds one, such as `borderColor="primary"` for the previous look.
   [Drawer](src/components/drawer/drawer.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- Focus ring ([WEBSDK-274](https://imfusion.atlassian.net/browse/WEBSDK-274)) — Nikolaus Brunner <brunner@imfusion.com>
+  - Every component draws the same focus ring from the focus ring tokens, and popups draw none.
+  - Navigation items and toasts draw the ring fully inside the item.
+  - A focused `Toggle` draws no box: its icon turns bolder and its label underlined, in primary unless pressed.
+  - An open `Select` trigger keeps its surface and turns its border primary instead of filling with primary.
+  - A focused `Tabs.Tab` underlines its label instead of drawing a box that looks like the active indicator. A focused
+    `Tabs.Panel` tints together with the active tab instead of drawing a second line inside its border.
+  - The branded `AppShell` header and navbar draw a light ring. A focused `AppShell.NavItem` shows its active underline at
+    double thickness instead of an outline.
+  - A light ring shows on blue fills: an active or open `NavigationMenu` link or trigger, and the `oncolor` context of
+    `Button`, `AccountCard`, and `Typo`.
+  - `AppShell.Burger` draws the primary ring on default surfaces, where it used the text colour.
+  - A focused chamfered `Button` shows its hover state, and `Code.Block`'s copy button colours its icon; a ring cannot
+    show through their clip-path.
+  - `Code`'s inline copy button shows the ring in place of the browser default.
 - `Typo.UnorderedList` draws its dash in the text colour by default; `markerVariant="primary"` gives the brand dash.
   — Nikolaus Brunner <brunner@imfusion.com>
 - `Callout.Root` defaults to `maxWidth="lg"`, keeps a minimum width of 15rem, and spaces its title, description, and list
@@ -66,6 +90,7 @@
     as `docs/story-conventions.md` describes.
   - Combobox and Autocomplete stories start at the same top-left corner, so clicking through them does not shift the
     layout. A story resizes its frame with `parameters.frame`, which `withFrame` reads.
+  - The Autocomplete interaction test reads the popup's height after it reopens, so it passes on every run.
 
 ### Fixed
 

package/dist/components/tab-nav/index.d.ts

@@ -0,0 +1,2 @@
+export * as TabNav from './tab-nav';
+export { tabNavMeta } from './tab-nav.meta';

package/dist/components/tab-nav/tab-nav.d.ts

@@ -0,0 +1,26 @@
+import { useRender } from '@base-ui/react/use-render';
+interface RootProps extends React.ComponentProps<"nav"> {
+    /** Names the navigation for screen readers, such as "Project". */
+    "aria-label": string;
+}
+/**
+ * TabNav.Root — a `<nav>` of links that draws the hairline under its items. Give it an `aria-label` that names the
+ * navigation, such as "Project".
+ * Not based on any upstream component.
+ */
+export declare function Root(props: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+type ItemProps = useRender.ComponentProps<"a"> & {
+    /** Marks the item as the page the user is on: sets `aria-current="page"` and `data-current`, and draws the bar. */
+    current?: boolean;
+};
+/**
+ * TabNav.Item — a link in the row. Renders an `<a>`; pass a router link as `render` to navigate without a page load.
+ */
+export declare function Item({ current, render, ...props }: ItemProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare namespace Item {
+    var displayName: string;
+}
+export {};

package/dist/components/tab-nav/tab-nav.meta.d.ts

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

package/dist/components/tabs/tabs-underline.cva.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The underline look shared by `Tabs` (appearance `"underline"`) and `TabNav`, which renders it on links. Keeping it here
+ * avoids cross-component imports between the two.
+ */
+export declare const tabsUnderlineRule: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const tabsUnderlineItem: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

@@ -2,18 +2,27 @@ import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
 import { VariantProps } from 'class-variance-authority';
 declare const tabsList: (props?: ({
     fill?: boolean | null | undefined;
+    appearance?: "underline" | "boxed" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type TabsAppearance = "boxed" | "underline";
+interface RootProps extends React.ComponentProps<typeof TabsPrimitive.Root> {
+    /**
+     * `"boxed"` outlines the active tab in a box that fuses into a framed panel. `"underline"` marks it with a bar under
+     * its label on a hairline rule, with an unframed panel. Underline is horizontal only: a vertical Tabs stays boxed.
+     */
+    appearance?: TabsAppearance;
+}
 /**
  * Tabs.Root — container that manages the active tab value and orientation context.
  *
  * @see https://base-ui.com/react/components/tabs
  * @llm https://base-ui.com/react/components/tabs.md
  */
-export declare function Root(props: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ appearance, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }
-interface ListProps extends React.ComponentProps<typeof TabsPrimitive.List>, VariantProps<typeof tabsList> {
+interface ListProps extends React.ComponentProps<typeof TabsPrimitive.List>, Pick<VariantProps<typeof tabsList>, "fill"> {
     /**
      * Give every tab an equal share of the list's length (equal width when
      * horizontal). When vertical, this only takes effect if the list is stretched
@@ -32,7 +41,7 @@ export declare namespace Tab {
     var displayName: string;
 }
 /**
- * Tabs.Indicator — the bordered box marking the active tab, positioned via
+ * Tabs.Indicator — the bordered box (boxed) or bar (underline) marking the active tab, positioned via
  * the `--active-tab-*` CSS custom properties Base UI writes onto it. Render
  * once per Tabs.List, after the Tabs.Tab list.
  */
@@ -43,7 +52,7 @@ export declare namespace Indicator {
 /**
  * Tabs.PanelViewport — the shared frame Tabs.Panel elements render inside.
  * No Base UI equivalent exists; it's surfaced as a named part since its
- * hairline border is what Tabs.Indicator visually fuses into.
+ * hairline border is what the boxed Tabs.Indicator visually fuses into. The underline appearance draws no frame.
  */
 export declare function PanelViewport(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export declare namespace PanelViewport {

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { NavigationMenu, navigationMenuMeta } from './components/navigation-menu
 export { Skeleton, skeletonMeta } from './components/skeleton';
 export { Spinner, spinnerMeta } from './components/spinner';
 export { Table, tableMeta } from './components/table';
+export { TabNav, tabNavMeta } from './components/tab-nav';
 export { Tabs, tabsMeta } from './components/tabs';
 export { Toast, toastMeta } from './components/toast';
 export { Tooltip, tooltipMeta } from './components/tooltip';