themelia-ui 1.0.0

package/dist/components/layout/auth/auth.d.cts

@@ -0,0 +1,78 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ComponentProps, ReactNode } from 'react';
+import { LayoutNavigationAdapter } from '../layout.types.cjs';
+import { AuthBrand, AuthLink, AuthShellSize, AuthShellVariant, AuthSplitMobile, AuthSplitSide } from './auth.types.cjs';
+import { AuthShellStrings } from './auth.strings.cjs';
+export interface AuthShellProps extends LayoutNavigationAdapter, Omit<ComponentProps<"div">, "title"> {
+    /**
+     * Replaces the element the shell is drawn as. It is a `<main>` by default.
+     *
+     * A page may hold exactly one main landmark, so an auth shell embedded in a host page —
+     * a documentation example, a screen inside someone else's frame — needs to say that the
+     * host owns that role: `contentRender={<div />}`.
+     */
+    contentRender?: useRender.ComponentProps<"main">["render"];
+    /** A rendered mark, or the parts for the shell to arrange. */
+    brand?: AuthBrand;
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** A control at the end of the card's header row — a locale switcher, a step count. */
+    headerEnd?: ReactNode;
+    /** A notice above the form — an expired link, a required invitation. */
+    banner?: ReactNode;
+    /** A strip above the card's header. */
+    cardMedia?: ReactNode;
+    /** A band under the card's content, inside the frame. */
+    cardFooter?: ReactNode;
+    /** Content between the card and the link rows — "Don't have an account?" */
+    postCard?: ReactNode;
+    /** Free content at the very bottom, after every link row. */
+    footer?: ReactNode;
+    /** Help, status, contact. Data, so the separators are decided once. */
+    footerLinks?: AuthLink[];
+    /** Terms, privacy, cookies. Rendered as its own row so screen readers can skip it. */
+    policyLinks?: AuthLink[];
+    languageLinks?: AuthLink[];
+    /** A rendered control, when a link row is not the right shape for it. */
+    languageSwitcher?: ReactNode;
+    size?: AuthShellSize;
+    /**
+     * `card` puts the content on a raised surface; `bare` does not; `split` puts a panel
+     * beside it.
+     *
+     * `card` is the default because a form floating on a plain background reads as
+     * unfinished — the surface is what makes it look like something to fill in.
+     */
+    variant?: AuthShellVariant;
+    /** `center` fills the viewport; `start` is for a surface taller than the screen. */
+    align?: "center" | "start";
+    /** The panel, for `variant="split"`. */
+    splitPanel?: ReactNode;
+    /** Which side the panel is drawn on. The form stays first in the DOM either way. */
+    splitSide?: AuthSplitSide;
+    /** What the panel does below `lg`. Hidden by default — see the note on the panel. */
+    splitMobile?: AuthSplitMobile;
+    /** Heading level for the title. */
+    level?: 1 | 2 | 3;
+    /** Overrides this shell's own copy — the three link rows' names. */
+    strings?: Partial<AuthShellStrings>;
+}
+export declare function AuthShell({ brand, eyebrow, title, description, headerEnd, banner, cardMedia, cardFooter, postCard, footer, footerLinks, policyLinks, languageLinks, languageSwitcher, size, variant, align, splitPanel, splitSide, splitMobile, level, contentRender, strings, renderLink, className, children, ...props }: AuthShellProps): import("react").JSX.Element;
+export interface AuthSplitPanelProps extends ComponentProps<"div"> {
+    /** The sign-in surface. Usually an AuthShell with `variant="bare"`. */
+    form: ReactNode;
+    /** Marketing copy, a testimonial, an illustration. Hidden below `lg`. */
+    panel?: ReactNode;
+    /** Which side the panel is drawn on. The form stays first in the DOM either way. */
+    panelPosition?: AuthSplitSide;
+    /** What the panel does below `lg`. */
+    panelMobile?: AuthSplitMobile;
+}
+/**
+ * Form beside a panel, for a caller composing the two halves itself.
+ *
+ * `AuthShell variant="split"` is the same arrangement with the shell's own card inside it;
+ * this one takes both halves as given, for a page whose form is not an AuthCard at all.
+ */
+export declare function AuthSplitPanel({ form, panel, panelPosition, panelMobile, className, ...props }: AuthSplitPanelProps): import("react").JSX.Element;

package/dist/components/layout/auth/auth.d.ts

@@ -0,0 +1,78 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ComponentProps, ReactNode } from 'react';
+import { LayoutNavigationAdapter } from '../layout.types.js';
+import { AuthBrand, AuthLink, AuthShellSize, AuthShellVariant, AuthSplitMobile, AuthSplitSide } from './auth.types.js';
+import { AuthShellStrings } from './auth.strings.js';
+export interface AuthShellProps extends LayoutNavigationAdapter, Omit<ComponentProps<"div">, "title"> {
+    /**
+     * Replaces the element the shell is drawn as. It is a `<main>` by default.
+     *
+     * A page may hold exactly one main landmark, so an auth shell embedded in a host page —
+     * a documentation example, a screen inside someone else's frame — needs to say that the
+     * host owns that role: `contentRender={<div />}`.
+     */
+    contentRender?: useRender.ComponentProps<"main">["render"];
+    /** A rendered mark, or the parts for the shell to arrange. */
+    brand?: AuthBrand;
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** A control at the end of the card's header row — a locale switcher, a step count. */
+    headerEnd?: ReactNode;
+    /** A notice above the form — an expired link, a required invitation. */
+    banner?: ReactNode;
+    /** A strip above the card's header. */
+    cardMedia?: ReactNode;
+    /** A band under the card's content, inside the frame. */
+    cardFooter?: ReactNode;
+    /** Content between the card and the link rows — "Don't have an account?" */
+    postCard?: ReactNode;
+    /** Free content at the very bottom, after every link row. */
+    footer?: ReactNode;
+    /** Help, status, contact. Data, so the separators are decided once. */
+    footerLinks?: AuthLink[];
+    /** Terms, privacy, cookies. Rendered as its own row so screen readers can skip it. */
+    policyLinks?: AuthLink[];
+    languageLinks?: AuthLink[];
+    /** A rendered control, when a link row is not the right shape for it. */
+    languageSwitcher?: ReactNode;
+    size?: AuthShellSize;
+    /**
+     * `card` puts the content on a raised surface; `bare` does not; `split` puts a panel
+     * beside it.
+     *
+     * `card` is the default because a form floating on a plain background reads as
+     * unfinished — the surface is what makes it look like something to fill in.
+     */
+    variant?: AuthShellVariant;
+    /** `center` fills the viewport; `start` is for a surface taller than the screen. */
+    align?: "center" | "start";
+    /** The panel, for `variant="split"`. */
+    splitPanel?: ReactNode;
+    /** Which side the panel is drawn on. The form stays first in the DOM either way. */
+    splitSide?: AuthSplitSide;
+    /** What the panel does below `lg`. Hidden by default — see the note on the panel. */
+    splitMobile?: AuthSplitMobile;
+    /** Heading level for the title. */
+    level?: 1 | 2 | 3;
+    /** Overrides this shell's own copy — the three link rows' names. */
+    strings?: Partial<AuthShellStrings>;
+}
+export declare function AuthShell({ brand, eyebrow, title, description, headerEnd, banner, cardMedia, cardFooter, postCard, footer, footerLinks, policyLinks, languageLinks, languageSwitcher, size, variant, align, splitPanel, splitSide, splitMobile, level, contentRender, strings, renderLink, className, children, ...props }: AuthShellProps): import("react").JSX.Element;
+export interface AuthSplitPanelProps extends ComponentProps<"div"> {
+    /** The sign-in surface. Usually an AuthShell with `variant="bare"`. */
+    form: ReactNode;
+    /** Marketing copy, a testimonial, an illustration. Hidden below `lg`. */
+    panel?: ReactNode;
+    /** Which side the panel is drawn on. The form stays first in the DOM either way. */
+    panelPosition?: AuthSplitSide;
+    /** What the panel does below `lg`. */
+    panelMobile?: AuthSplitMobile;
+}
+/**
+ * Form beside a panel, for a caller composing the two halves itself.
+ *
+ * `AuthShell variant="split"` is the same arrangement with the shell's own card inside it;
+ * this one takes both halves as given, for a page whose form is not an AuthCard at all.
+ */
+export declare function AuthSplitPanel({ form, panel, panelPosition, panelMobile, className, ...props }: AuthSplitPanelProps): import("react").JSX.Element;

package/dist/components/layout/auth/auth.strings.d.cts

@@ -0,0 +1,12 @@
+export interface AuthShellStrings {
+    /**
+     * Captions for the three link rows below the card.
+     *
+     * Each row is its own `<nav>` so a screen reader can skip one, and a nav needs a name
+     * to be worth skipping — these were the three English words that gave them one.
+     */
+    languageLabel: string;
+    helpLabel: string;
+    legalLabel: string;
+}
+export declare const defaultAuthShellStrings: AuthShellStrings;

package/dist/components/layout/auth/auth.strings.d.ts

@@ -0,0 +1,12 @@
+export interface AuthShellStrings {
+    /**
+     * Captions for the three link rows below the card.
+     *
+     * Each row is its own `<nav>` so a screen reader can skip one, and a nav needs a name
+     * to be worth skipping — these were the three English words that gave them one.
+     */
+    languageLabel: string;
+    helpLabel: string;
+    legalLabel: string;
+}
+export declare const defaultAuthShellStrings: AuthShellStrings;

package/dist/components/layout/auth/auth.types.d.cts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { LayoutNavigationAdapter } from '../layout.types.cjs';
+/** A mark, a wordmark, and optionally a line under it. */
+export interface AuthBrandConfig {
+    logo?: ReactNode;
+    label?: ReactNode;
+    description?: ReactNode;
+    href?: string;
+    /** Accessible name when the mark is a link and the label is a graphic. */
+    ariaLabel?: string;
+}
+/** Either a fully-rendered mark, or the parts for the shell to arrange. */
+export type AuthBrand = ReactNode | AuthBrandConfig;
+/** One entry in a footer, policy, or language row. */
+export interface AuthLink {
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    external?: boolean;
+    /** Hides the entry without the caller filtering the array. */
+    visible?: boolean;
+    key?: string;
+}
+export interface AuthFooterLinksProps extends LayoutNavigationAdapter {
+    links: AuthLink[];
+    /** Names the row for assistive technology — "Legal", "Language". */
+    label?: string;
+    /** A glyph before the row, for a language selector. */
+    leadingIcon?: ReactNode;
+    className?: string;
+}
+export type AuthShellVariant = "card" | "bare" | "split";
+export type AuthShellSize = "sm" | "md" | "lg";
+export type AuthSplitSide = "start" | "end";
+/** What the panel does below `lg`: disappear, or fall under the form. */
+export type AuthSplitMobile = "hidden" | "stacked";

package/dist/components/layout/auth/auth.types.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { LayoutNavigationAdapter } from '../layout.types.js';
+/** A mark, a wordmark, and optionally a line under it. */
+export interface AuthBrandConfig {
+    logo?: ReactNode;
+    label?: ReactNode;
+    description?: ReactNode;
+    href?: string;
+    /** Accessible name when the mark is a link and the label is a graphic. */
+    ariaLabel?: string;
+}
+/** Either a fully-rendered mark, or the parts for the shell to arrange. */
+export type AuthBrand = ReactNode | AuthBrandConfig;
+/** One entry in a footer, policy, or language row. */
+export interface AuthLink {
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    external?: boolean;
+    /** Hides the entry without the caller filtering the array. */
+    visible?: boolean;
+    key?: string;
+}
+export interface AuthFooterLinksProps extends LayoutNavigationAdapter {
+    links: AuthLink[];
+    /** Names the row for assistive technology — "Legal", "Language". */
+    label?: string;
+    /** A glyph before the row, for a language selector. */
+    leadingIcon?: ReactNode;
+    className?: string;
+}
+export type AuthShellVariant = "card" | "bare" | "split";
+export type AuthShellSize = "sm" | "md" | "lg";
+export type AuthSplitSide = "start" | "end";
+/** What the panel does below `lg`: disappear, or fall under the form. */
+export type AuthSplitMobile = "hidden" | "stacked";

package/dist/components/layout/auth/index.d.cts

@@ -0,0 +1,5 @@
+export { AuthShell, AuthSplitPanel, type AuthShellProps, type AuthSplitPanelProps } from './auth.cjs';
+export { AuthCard, type AuthCardProps } from './auth-card.cjs';
+export { AuthFooterLinks } from './auth-footer-links.cjs';
+export type { AuthBrand, AuthBrandConfig, AuthLink, AuthFooterLinksProps, AuthShellVariant, AuthShellSize, AuthSplitSide, AuthSplitMobile, } from './auth.types.cjs';
+export { defaultAuthShellStrings, type AuthShellStrings } from './auth.strings.cjs';

package/dist/components/layout/auth/index.d.ts

@@ -0,0 +1,5 @@
+export { AuthShell, AuthSplitPanel, type AuthShellProps, type AuthSplitPanelProps } from './auth.js';
+export { AuthCard, type AuthCardProps } from './auth-card.js';
+export { AuthFooterLinks } from './auth-footer-links.js';
+export type { AuthBrand, AuthBrandConfig, AuthLink, AuthFooterLinksProps, AuthShellVariant, AuthShellSize, AuthSplitSide, AuthSplitMobile, } from './auth.types.js';
+export { defaultAuthShellStrings, type AuthShellStrings } from './auth.strings.js';

package/dist/components/layout/containers/containers.d.cts

@@ -0,0 +1,84 @@
+/**
+ * Layout containers — the blocks a page is assembled from.
+ *
+ * Four components, one responsibility each:
+ *
+ *   PageViewport      owns page scroll and the page-level container query
+ *   Container         owns content width and the inline gutter
+ *   Section           owns vertical rhythm between groups
+ *   TwoColumnLayout   owns the main/aside grid
+ *
+ * Splitting them this way is what stops a page growing three competing scroll containers
+ * and two different content widths. When the gutter is wrong there is exactly one
+ * component to look at, and when a page scrolls in two places at once it is because
+ * something other than PageViewport took the job.
+ */
+import * as React from "react";
+export interface PageViewportProps extends React.ComponentProps<"div"> {
+}
+/**
+ * The single page-scroll owner.
+ *
+ * `tabIndex={0}` by default, because a scrollable region that cannot be focused cannot be
+ * scrolled by keyboard — the arrow keys go to whatever else has focus, and a reader who
+ * cannot use a pointer simply cannot reach the bottom of the page.
+ */
+export declare const PageViewport: React.ForwardRefExoticComponent<Omit<PageViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ContainerMaxWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+export type ContainerGutter = "none" | "sm" | "md" | "lg";
+export interface ContainerProps extends React.ComponentProps<"div"> {
+    /** The reading measure. Defaults to `xl`. */
+    maxWidth?: ContainerMaxWidth;
+    /** The inline gutter. Defaults to `md`. */
+    gutter?: ContainerGutter;
+}
+/** The single owner of centred content width and the inline gutter. */
+export declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SectionProps extends React.ComponentProps<"section"> {
+}
+/**
+ * A semantic group inside a page, and the vertical rhythm between its children.
+ *
+ * A real `<section>`, so the document outline reflects the page's structure rather than
+ * being one undifferentiated run of divs.
+ *
+ * It owns a single rhythm token rather than re-exposing the whole spacing scale. A page
+ * whose sections each pick their own gap has no rhythm — that is the thing this component
+ * exists to prevent, so the knob is `--layout-section-gap`, set once for the scope.
+ */
+export declare const Section: React.ForwardRefExoticComponent<Omit<SectionProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface TwoColumnLayoutProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /** Spans both columns, before the work regions. */
+    header?: React.ReactNode;
+    /** Primary detail, form, or index content. */
+    main: React.ReactNode;
+    /** Secondary summary, support, or action rail. */
+    aside: React.ReactNode;
+    /** Spans both columns, after the work regions. */
+    footer?: React.ReactNode;
+    /**
+     * Keeps the aside in view while the page scrolls.
+     *
+     * Opt-in, because an aside taller than the viewport must be allowed to scroll away —
+     * pinned, its own overflow becomes unreachable.
+     */
+    stickyAside?: boolean;
+    /**
+     * Which side the aside is DRAWN on. Default `end`.
+     *
+     * Only the grid columns move. The aside stays second in the DOM at every setting, so a
+     * reader tabbing through still meets the primary content first — reordering by moving
+     * the element would trade a layout preference for an accessibility regression, which is
+     * precisely the trade this component exists to refuse.
+     */
+    asidePosition?: "start" | "end";
+}
+/**
+ * Main and aside, in a stable DOM order.
+ *
+ * The aside is second in the DOM at every width, so a reader tabbing through — or a screen
+ * reader traversing — meets the primary content first. Any visual reordering is done by
+ * the grid rather than by moving the element, which is what keeps that true when the
+ * columns stack.
+ */
+export declare const TwoColumnLayout: React.ForwardRefExoticComponent<Omit<TwoColumnLayoutProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/containers/containers.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Layout containers — the blocks a page is assembled from.
+ *
+ * Four components, one responsibility each:
+ *
+ *   PageViewport      owns page scroll and the page-level container query
+ *   Container         owns content width and the inline gutter
+ *   Section           owns vertical rhythm between groups
+ *   TwoColumnLayout   owns the main/aside grid
+ *
+ * Splitting them this way is what stops a page growing three competing scroll containers
+ * and two different content widths. When the gutter is wrong there is exactly one
+ * component to look at, and when a page scrolls in two places at once it is because
+ * something other than PageViewport took the job.
+ */
+import * as React from "react";
+export interface PageViewportProps extends React.ComponentProps<"div"> {
+}
+/**
+ * The single page-scroll owner.
+ *
+ * `tabIndex={0}` by default, because a scrollable region that cannot be focused cannot be
+ * scrolled by keyboard — the arrow keys go to whatever else has focus, and a reader who
+ * cannot use a pointer simply cannot reach the bottom of the page.
+ */
+export declare const PageViewport: React.ForwardRefExoticComponent<Omit<PageViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ContainerMaxWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+export type ContainerGutter = "none" | "sm" | "md" | "lg";
+export interface ContainerProps extends React.ComponentProps<"div"> {
+    /** The reading measure. Defaults to `xl`. */
+    maxWidth?: ContainerMaxWidth;
+    /** The inline gutter. Defaults to `md`. */
+    gutter?: ContainerGutter;
+}
+/** The single owner of centred content width and the inline gutter. */
+export declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SectionProps extends React.ComponentProps<"section"> {
+}
+/**
+ * A semantic group inside a page, and the vertical rhythm between its children.
+ *
+ * A real `<section>`, so the document outline reflects the page's structure rather than
+ * being one undifferentiated run of divs.
+ *
+ * It owns a single rhythm token rather than re-exposing the whole spacing scale. A page
+ * whose sections each pick their own gap has no rhythm — that is the thing this component
+ * exists to prevent, so the knob is `--layout-section-gap`, set once for the scope.
+ */
+export declare const Section: React.ForwardRefExoticComponent<Omit<SectionProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface TwoColumnLayoutProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /** Spans both columns, before the work regions. */
+    header?: React.ReactNode;
+    /** Primary detail, form, or index content. */
+    main: React.ReactNode;
+    /** Secondary summary, support, or action rail. */
+    aside: React.ReactNode;
+    /** Spans both columns, after the work regions. */
+    footer?: React.ReactNode;
+    /**
+     * Keeps the aside in view while the page scrolls.
+     *
+     * Opt-in, because an aside taller than the viewport must be allowed to scroll away —
+     * pinned, its own overflow becomes unreachable.
+     */
+    stickyAside?: boolean;
+    /**
+     * Which side the aside is DRAWN on. Default `end`.
+     *
+     * Only the grid columns move. The aside stays second in the DOM at every setting, so a
+     * reader tabbing through still meets the primary content first — reordering by moving
+     * the element would trade a layout preference for an accessibility regression, which is
+     * precisely the trade this component exists to refuse.
+     */
+    asidePosition?: "start" | "end";
+}
+/**
+ * Main and aside, in a stable DOM order.
+ *
+ * The aside is second in the DOM at every width, so a reader tabbing through — or a screen
+ * reader traversing — meets the primary content first. Any visual reordering is done by
+ * the grid rather than by moving the element, which is what keeps that true when the
+ * columns stack.
+ */
+export declare const TwoColumnLayout: React.ForwardRefExoticComponent<Omit<TwoColumnLayoutProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/containers/index.d.cts

@@ -0,0 +1 @@
+export { PageViewport, Container, Section, TwoColumnLayout, type PageViewportProps, type ContainerProps, type ContainerMaxWidth, type ContainerGutter, type SectionProps, type TwoColumnLayoutProps, } from './containers.cjs';

package/dist/components/layout/containers/index.d.ts

@@ -0,0 +1 @@
+export { PageViewport, Container, Section, TwoColumnLayout, type PageViewportProps, type ContainerProps, type ContainerMaxWidth, type ContainerGutter, type SectionProps, type TwoColumnLayoutProps, } from './containers.js';

package/dist/components/layout/header/header.d.cts

@@ -0,0 +1,45 @@
+import { Crumb } from '../../base/navigation/index.cjs';
+import { LayoutNavigationAdapter } from '../layout.types.cjs';
+import { HeaderBreadcrumbsStrings } from './header.strings.cjs';
+/**
+ * Header — the shell's sticky top bar.
+ *
+ * Slot-driven rather than prop-driven for its contents: every product puts something
+ * different up here, and a header that enumerated them would grow a prop per feature. What
+ * it DOES own is the arrangement — which regions exist, which one shrinks, and which stay
+ * fixed — because that is the part every hand-built header gets wrong the first time a
+ * search field and an account menu have to share a row.
+ *
+ * Breadcrumbs are built in rather than left to a slot, because they are the one region
+ * whose position is not negotiable: a trail that moves between screens stops being a trail.
+ */
+import * as React from "react";
+export interface HeaderSlots {
+    /** Product mark. Hidden below `md`, where the sidebar trigger stands in for it. */
+    brand?: React.ReactNode;
+    /** Replaces the built-in breadcrumbs entirely. */
+    breadcrumbs?: React.ReactNode;
+    left?: React.ReactNode;
+    /** Shrinks before the right cluster — put a search field here. */
+    center?: React.ReactNode;
+    /** Fixed-size controls: notifications, account, theme. Never shrinks. */
+    right?: React.ReactNode;
+}
+export interface HeaderProps extends React.ComponentProps<"header">, LayoutNavigationAdapter {
+    showBreadcrumbs?: boolean;
+    /** Renders the sidebar collapse control before the trail. */
+    showSidebarTrigger?: boolean;
+    breadcrumbs?: Crumb[];
+    /**
+     * Prepended to the trail, for a root that is not part of the route.
+     *
+     * `null` omits it, which is different from not passing it: a product whose shell has no
+     * home destination should say so rather than get a default one.
+     */
+    homeCrumb?: Crumb | null;
+    /** Overrides the trail's copy — its landmark name, for a page carrying two headers. */
+    breadcrumbsStrings?: Partial<HeaderBreadcrumbsStrings>;
+    slots?: HeaderSlots;
+    contentClassName?: string;
+}
+export declare function Header({ showBreadcrumbs, showSidebarTrigger, breadcrumbs, homeCrumb, breadcrumbsStrings, slots, renderLink, className, contentClassName, children, ...props }: HeaderProps): React.JSX.Element;

package/dist/components/layout/header/header.d.ts

@@ -0,0 +1,45 @@
+import { Crumb } from '../../base/navigation/index.js';
+import { LayoutNavigationAdapter } from '../layout.types.js';
+import { HeaderBreadcrumbsStrings } from './header.strings.js';
+/**
+ * Header — the shell's sticky top bar.
+ *
+ * Slot-driven rather than prop-driven for its contents: every product puts something
+ * different up here, and a header that enumerated them would grow a prop per feature. What
+ * it DOES own is the arrangement — which regions exist, which one shrinks, and which stay
+ * fixed — because that is the part every hand-built header gets wrong the first time a
+ * search field and an account menu have to share a row.
+ *
+ * Breadcrumbs are built in rather than left to a slot, because they are the one region
+ * whose position is not negotiable: a trail that moves between screens stops being a trail.
+ */
+import * as React from "react";
+export interface HeaderSlots {
+    /** Product mark. Hidden below `md`, where the sidebar trigger stands in for it. */
+    brand?: React.ReactNode;
+    /** Replaces the built-in breadcrumbs entirely. */
+    breadcrumbs?: React.ReactNode;
+    left?: React.ReactNode;
+    /** Shrinks before the right cluster — put a search field here. */
+    center?: React.ReactNode;
+    /** Fixed-size controls: notifications, account, theme. Never shrinks. */
+    right?: React.ReactNode;
+}
+export interface HeaderProps extends React.ComponentProps<"header">, LayoutNavigationAdapter {
+    showBreadcrumbs?: boolean;
+    /** Renders the sidebar collapse control before the trail. */
+    showSidebarTrigger?: boolean;
+    breadcrumbs?: Crumb[];
+    /**
+     * Prepended to the trail, for a root that is not part of the route.
+     *
+     * `null` omits it, which is different from not passing it: a product whose shell has no
+     * home destination should say so rather than get a default one.
+     */
+    homeCrumb?: Crumb | null;
+    /** Overrides the trail's copy — its landmark name, for a page carrying two headers. */
+    breadcrumbsStrings?: Partial<HeaderBreadcrumbsStrings>;
+    slots?: HeaderSlots;
+    contentClassName?: string;
+}
+export declare function Header({ showBreadcrumbs, showSidebarTrigger, breadcrumbs, homeCrumb, breadcrumbsStrings, slots, renderLink, className, contentClassName, children, ...props }: HeaderProps): React.JSX.Element;

package/dist/components/layout/header/header.strings.d.cts

@@ -0,0 +1,48 @@
+export interface HeaderBreadcrumbsStrings {
+    /**
+     * Names the trail, which is a navigation landmark.
+     *
+     * It was fixed at "Breadcrumb" with no way through, so a page carrying two headers — a
+     * page header and an embedded panel's — produced two landmarks a reader could not tell
+     * apart. Every other accessible string in the kit is overridable; `Breadcrumbs` itself
+     * has taken a `label` all along and the header that wraps it never passed one.
+     */
+    label: string;
+}
+export declare const defaultHeaderBreadcrumbsStrings: HeaderBreadcrumbsStrings;
+export interface HeaderSearchStrings {
+    /** Shown in the trigger, and announced as its name. */
+    placeholder: string;
+    /** The shortcut hint. Two, because the modifier differs by platform. */
+    shortcutMac: string;
+    shortcutPc: string;
+}
+export declare const defaultHeaderSearchStrings: HeaderSearchStrings;
+export interface HeaderNotificationsStrings {
+    /** Names the bell, which is icon-only. */
+    trigger: string;
+    /** Heading inside the surface. */
+    heading: string;
+    markAllRead: string;
+    empty: string;
+    viewAll: string;
+    /** Announced count on the trigger, so the badge is not read as a bare number. */
+    unread: (count: number) => string;
+    /**
+     * Said on an unread ROW.
+     *
+     * Unread is drawn as a tint and a dot, and neither reaches a screen reader — colour
+     * alone is not a state. This was a literal `<VisuallyHidden>Unread</VisuallyHidden>`,
+     * which no `strings` override could reach and no consumer could translate.
+     */
+    unreadItem: string;
+}
+export declare const defaultHeaderNotificationsStrings: HeaderNotificationsStrings;
+export interface HeaderUserMenuStrings {
+    profile: string;
+    settings: string;
+    logout: string;
+    /** Names the trigger when the caller hides the name — an avatar alone has none. */
+    trigger: string;
+}
+export declare const defaultHeaderUserMenuStrings: HeaderUserMenuStrings;

package/dist/components/layout/header/header.strings.d.ts

@@ -0,0 +1,48 @@
+export interface HeaderBreadcrumbsStrings {
+    /**
+     * Names the trail, which is a navigation landmark.
+     *
+     * It was fixed at "Breadcrumb" with no way through, so a page carrying two headers — a
+     * page header and an embedded panel's — produced two landmarks a reader could not tell
+     * apart. Every other accessible string in the kit is overridable; `Breadcrumbs` itself
+     * has taken a `label` all along and the header that wraps it never passed one.
+     */
+    label: string;
+}
+export declare const defaultHeaderBreadcrumbsStrings: HeaderBreadcrumbsStrings;
+export interface HeaderSearchStrings {
+    /** Shown in the trigger, and announced as its name. */
+    placeholder: string;
+    /** The shortcut hint. Two, because the modifier differs by platform. */
+    shortcutMac: string;
+    shortcutPc: string;
+}
+export declare const defaultHeaderSearchStrings: HeaderSearchStrings;
+export interface HeaderNotificationsStrings {
+    /** Names the bell, which is icon-only. */
+    trigger: string;
+    /** Heading inside the surface. */
+    heading: string;
+    markAllRead: string;
+    empty: string;
+    viewAll: string;
+    /** Announced count on the trigger, so the badge is not read as a bare number. */
+    unread: (count: number) => string;
+    /**
+     * Said on an unread ROW.
+     *
+     * Unread is drawn as a tint and a dot, and neither reaches a screen reader — colour
+     * alone is not a state. This was a literal `<VisuallyHidden>Unread</VisuallyHidden>`,
+     * which no `strings` override could reach and no consumer could translate.
+     */
+    unreadItem: string;
+}
+export declare const defaultHeaderNotificationsStrings: HeaderNotificationsStrings;
+export interface HeaderUserMenuStrings {
+    profile: string;
+    settings: string;
+    logout: string;
+    /** Names the trigger when the caller hides the name — an avatar alone has none. */
+    trigger: string;
+}
+export declare const defaultHeaderUserMenuStrings: HeaderUserMenuStrings;