8f075f1792
Skeleton, Breadcrumbs, Link, Button, Image, Meter, NumberField Floating components: Tooltip (hover/focus), Popover (click, with focus trap and dismiss), HoverCard (hover with safe area). Simple components: Alert (role=alert), Badge (role=status), Skeleton (loading placeholder with data attributes). Navigation: Breadcrumbs (nav>ol>li with separators), Link (accessible anchor with disabled), Button (with disabled click suppression). Data/Form: Image (Img+Fallback with loading status), Meter (like Progress for known ranges), NumberField (spinbutton with inc/dec). 302 tests across 46 files, typecheck clean, build produces 176 files.
24 lines
729 B
TypeScript
24 lines
729 B
TypeScript
import type { JSX } from "solid-js";
|
|
import { splitProps } from "solid-js";
|
|
|
|
/** Props for the root breadcrumbs navigation container. */
|
|
export interface BreadcrumbsRootProps extends JSX.HTMLAttributes<HTMLElement> {
|
|
/** Accessible label for the navigation landmark. @default "Breadcrumbs" */
|
|
"aria-label"?: string | undefined;
|
|
children: JSX.Element;
|
|
}
|
|
|
|
/**
|
|
* Root navigation container for breadcrumbs.
|
|
* Renders a `<nav>` with an `<ol>` list inside.
|
|
*/
|
|
export function BreadcrumbsRoot(props: BreadcrumbsRootProps): JSX.Element {
|
|
const [local, rest] = splitProps(props, ["aria-label", "children"]);
|
|
|
|
return (
|
|
<nav aria-label={local["aria-label"] ?? "Breadcrumbs"} {...rest}>
|
|
<ol>{local.children}</ol>
|
|
</nav>
|
|
);
|
|
}
|