@octane-xplat/ui 0.6.0 → 0.7.1

package/platforms/android/native-api-usage.json

@@ -0,0 +1,8 @@
+{
+    "uses": [
+        "com.caverock.androidsvg:SVG",
+        "com.caverock.androidsvg:SVGExternalFileResolver",
+        "com.caverock.androidsvg:PreserveAspectRatio",
+        "com.caverock.androidsvg:RenderOptions"
+    ]
+}

package/platforms/ios/Podfile

@@ -0,0 +1,2 @@
+# pod 'SVGgh'
+pod 'SVGKit', :git => 'https://github.com/Akylas/SVGKit.git', :branch => '3.x'

package/src/Absolute.tsrx

@@ -0,0 +1,22 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { AbsoluteProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props';
+
+export function Absolute(props: AbsoluteProps) @{
+	<absolutelayout
+		id={props.id}
+		ref={(view: any) => applyEscapeProps(view, props)}
+		className={cx('vx-absolute', props.className)}
+		style={props.style}
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+	>
+		{props.children}
+	</absolutelayout>
+}

package/src/Absolute.web.tsrx

@@ -0,0 +1,22 @@
+import type { AbsoluteProps } from './props';
+import { applyEscapeProps } from './escape-props';
+
+export function Absolute(props: AbsoluteProps) @{
+	<div
+		id={props.id}
+		className={['vx-absolute', props.className]}
+		style={props.style}
+		ref={(el: any) => applyEscapeProps(el, props)}
+		role={props.accessibilityRole}
+		aria-label={props.accessibilityLabel}
+		aria-hidden={props.accessible === false ? true : undefined}
+		aria-description={props.accessibilityHint}
+		aria-valuetext={props.accessibilityValue}
+		aria-disabled={props.accessibilityState?.disabled}
+		aria-selected={props.accessibilityState?.selected}
+		aria-checked={props.accessibilityState?.checked}
+		aria-live={props.accessibilityLiveRegion === 'none' ? 'off' : props.accessibilityLiveRegion}
+	>
+		{props.children}
+	</div>
+}

package/src/Accordion.macos.tsrx

@@ -0,0 +1,50 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useState } from 'octane';
+import type { AccordionProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Collapsible } from './Collapsible.macos.tsrx';
+
+/** Self-drawn accordion — a list of Collapsibles sharing one open-state.
+ *  Controlled via `open` (key, or keys with `multiple`), uncontrolled via
+ *  `defaultOpen`. */
+export function Accordion(props: AccordionProps) @{
+	const normalize = (v: string | string[] | undefined) =>
+		v === undefined ? [] : Array.isArray(v) ? v : [v];
+
+	const [internal, setInternal] = useState<string[]>(normalize(props.defaultOpen));
+	const controlled = props.open !== undefined;
+	const openKeys = controlled ? normalize(props.open) : internal;
+
+	const report = (keys: string[]) => {
+		if (!controlled) setInternal(keys);
+		props.onOpenChange?.(props.multiple ? keys : keys[0]);
+	};
+
+	const toggle = (key: string, next: boolean) => {
+		if (props.multiple) {
+			report(next ? [...openKeys, key] : openKeys.filter((k) => k !== key));
+		} else {
+			report(next ? [key] : []);
+		}
+	};
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-accordion', props.className)}
+		style={props.style}
+	>
+		@for (const item of props.items; key item.key) {
+			<Collapsible
+				className="vx-accordion-item"
+				trigger={item.header}
+				disabled={item.disabled}
+				open={openKeys.includes(item.key)}
+				onOpenChange={(next: boolean) => toggle(item.key, next)}
+			>
+				{item.content}
+			</Collapsible>
+		}
+	</flexboxlayout>
+}

package/src/Accordion.tsrx

@@ -0,0 +1,50 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane';
+import type { AccordionProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Collapsible } from './Collapsible.tsrx';
+
+/** Self-drawn accordion — a list of Collapsibles sharing one open-state.
+ *  Controlled via `open` (key, or keys with `multiple`), uncontrolled via
+ *  `defaultOpen`. */
+export function Accordion(props: AccordionProps) @{
+	const normalize = (v: string | string[] | undefined) =>
+		v === undefined ? [] : Array.isArray(v) ? v : [v];
+
+	const [internal, setInternal] = useState<string[]>(normalize(props.defaultOpen));
+	const controlled = props.open !== undefined;
+	const openKeys = controlled ? normalize(props.open) : internal;
+
+	const report = (keys: string[]) => {
+		if (!controlled) setInternal(keys);
+		props.onOpenChange?.(props.multiple ? keys : keys[0]);
+	};
+
+	const toggle = (key: string, next: boolean) => {
+		if (props.multiple) {
+			report(next ? [...openKeys, key] : openKeys.filter((k) => k !== key));
+		} else {
+			report(next ? [key] : []);
+		}
+	};
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-accordion', props.className)}
+		style={props.style}
+	>
+		@for (const item of props.items; key item.key) {
+			<Collapsible
+				className="vx-accordion-item"
+				trigger={item.header}
+				disabled={item.disabled}
+				open={openKeys.includes(item.key)}
+				onOpenChange={(next: boolean) => toggle(item.key, next)}
+			>
+				{item.content}
+			</Collapsible>
+		}
+	</flexboxlayout>
+}

package/src/Accordion.web.tsrx

@@ -0,0 +1,43 @@
+import { useState } from 'octane';
+import type { AccordionProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Collapsible } from './Collapsible.web.tsrx';
+
+/** Self-drawn accordion — a list of Collapsibles sharing one open-state.
+ *  Controlled via `open` (key, or keys with `multiple`), uncontrolled via
+ *  `defaultOpen`. */
+export function Accordion(props: AccordionProps) @{
+	const normalize = (v: string | string[] | undefined) =>
+		v === undefined ? [] : Array.isArray(v) ? v : [v];
+
+	const [internal, setInternal] = useState<string[]>(normalize(props.defaultOpen));
+	const controlled = props.open !== undefined;
+	const openKeys = controlled ? normalize(props.open) : internal;
+
+	const report = (keys: string[]) => {
+		if (!controlled) setInternal(keys);
+		props.onOpenChange?.(props.multiple ? keys : keys[0]);
+	};
+
+	const toggle = (key: string, next: boolean) => {
+		if (props.multiple) {
+			report(next ? [...openKeys, key] : openKeys.filter((k) => k !== key));
+		} else {
+			report(next ? [key] : []);
+		}
+	};
+
+	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-accordion', props.className]} style={props.style}>
+		@for (const item of props.items; key item.key) {
+			<Collapsible
+				className="vx-accordion-item"
+				trigger={item.header}
+				disabled={item.disabled}
+				open={openKeys.includes(item.key)}
+				onOpenChange={(next: boolean) => toggle(item.key, next)}
+			>
+				{item.content}
+			</Collapsible>
+		}
+	</div>
+}

package/src/ActivityIndicator.tsrx

@@ -0,0 +1,29 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ActivityIndicatorProps } from './props';
+import { cx } from './cx';
+import { applyNativeProps } from './platformProps';
+
+/** Self-drawn spinner — a bordered ring (.vx-spinner, same class as web)
+ *  rotated by an infinite `animate` loop. Identical pixels across targets;
+ *  the platform widget (UIActivityIndicatorView/CircularProgressIndicator)
+ *  lives in `ui/ios` + `ui/android`. */
+export function ActivityIndicator(props: ActivityIndicatorProps) @{
+	if (props.busy === false) return null;
+
+	<flexboxlayout
+		id={props.id}
+		className={cx('vx-spinner', props.className)}
+		style={props.style}
+		ref={(el: any) => {
+			if (!el) return;
+			applyNativeProps(el, props);
+			el.once('loaded', () => {
+				el.animate({
+					rotate: 360,
+					duration: 800,
+					iterations: Number.POSITIVE_INFINITY,
+				});
+			});
+		}}
+	/>
+}

package/src/ActivityIndicator.web.tsrx

@@ -0,0 +1,14 @@
+import type { ActivityIndicatorProps } from './props';
+import { applyWebProps } from './platformProps.web';
+
+export function ActivityIndicator(props: ActivityIndicatorProps) @{
+	if (props.busy === false) return null;
+
+	<div
+		id={props.id}
+		className={['vx-spinner', props.className]}
+		style={props.style}
+		role="progressbar"
+		ref={(el: any) => applyWebProps(el, props.web)}
+	/>
+}

package/src/Alert.macos.tsrx

@@ -0,0 +1,42 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { AlertProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.macos.tsrx';
+
+/** Alert — status callout. `tone` picks a class modifier. */
+// Tone → border colors mirror .vx-alert--* in theme/tokens.css — the
+// AppKit host has no CSS layer, so the chrome metric lives inline.
+const TONE_BORDER: Record<string, string> = {
+	info: '#171717',
+	warning: '#d9a400',
+	error: '#dc2626',
+	success: '#2e9e5b',
+}
+
+export function Alert(props: AlertProps) @{
+	const tone = props.tone ?? 'info';
+	const toneColor = TONE_BORDER[tone] ?? '#171717';
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-alert', 'vx-alert--' + tone, props.className)}
+		style={{
+			borderWidth: 1,
+			borderTopWidth: 1,
+			borderColor: toneColor,
+			borderTopColor: toneColor,
+			borderRadius: 6,
+			borderTopLeftRadius: 6,
+			...props.style,
+		}}
+	>
+		{props.icon ? <Icon name={props.icon} className="vx-alert-icon" /> : null}
+		<flexboxlayout className="vx-alert-body">
+			{props.title != null ? <label className="vx-alert-title" text={props.title} /> : null}
+			{props.children}
+		</flexboxlayout>
+	</flexboxlayout>
+}

package/src/Alert.tsrx

@@ -0,0 +1,24 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { AlertProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.tsrx';
+
+/** Alert — status callout. `tone` picks a class modifier. */
+export function Alert(props: AlertProps) @{
+	const tone = props.tone ?? 'info';
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-alert', 'vx-alert--' + tone, props.className)}
+		style={props.style}
+	>
+		{props.icon ? <Icon name={props.icon} className="vx-alert-icon" /> : null}
+		<flexboxlayout className="vx-alert-body">
+			{props.title != null ? <label className="vx-alert-title" text={props.title} /> : null}
+			{props.children}
+		</flexboxlayout>
+	</flexboxlayout>
+}

package/src/Alert.web.tsrx

@@ -0,0 +1,23 @@
+import type { AlertProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.web.tsrx';
+
+/** Alert — status callout. `tone` picks a class modifier; error gets
+ *  role=alert, the rest role=status. */
+export function Alert(props: AlertProps) @{
+	const tone = props.tone ?? 'info';
+
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-alert', 'vx-alert--' + tone, props.className]}
+		style={props.style}
+		role={tone === 'error' ? 'alert' : 'status'}
+	>
+		{props.icon ? <Icon name={props.icon} className="vx-alert-icon" /> : null}
+		<div className="vx-alert-body">
+			{props.title != null ? <span className="vx-alert-title">{props.title}</span> : null}
+			{props.children}
+		</div>
+	</div>
+}

package/src/Avatar.macos.tsrx

@@ -0,0 +1,25 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { AvatarProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Image } from './Image.macos.tsrx';
+
+/** Avatar — circular image with a text fallback when `src` is absent.
+ *  `size` sets the square + border-radius inline so the circle is identical
+ *  across targets. */
+export function Avatar(props: AvatarProps) @{
+	const size = props.size ?? 32;
+	const box = { width: size, height: size, borderRadius: size / 2 };
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-avatar', props.className)}
+		style={{ ...props.style, ...box }}
+		accessibilityLabel={props.alt}
+	>
+		{props.src
+			? <Image className="vx-avatar-img" src={props.src} alt={props.alt} style={{ width: size, height: size, borderRadius: size / 2 }} />
+			: <label className="vx-avatar-fallback" text={props.fallback ?? ''} />}
+	</flexboxlayout>
+}

package/src/Avatar.tsrx

@@ -0,0 +1,25 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { AvatarProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Image } from './Image.tsrx';
+
+/** Avatar — circular image with a text fallback when `src` is absent.
+ *  `size` sets the square + border-radius inline so the circle is identical
+ *  across targets. */
+export function Avatar(props: AvatarProps) @{
+	const size = props.size ?? 32;
+	const box = { width: size, height: size, borderRadius: size / 2 };
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-avatar', props.className)}
+		style={{ ...props.style, ...box }}
+		accessibilityLabel={props.alt}
+	>
+		{props.src
+			? <Image className="vx-avatar-img" src={props.src} alt={props.alt} style={{ width: size, height: size, borderRadius: size / 2 }} />
+			: <label className="vx-avatar-fallback" text={props.fallback ?? ''} />}
+	</flexboxlayout>
+}

package/src/Avatar.web.tsrx

@@ -0,0 +1,24 @@
+import type { AvatarProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Avatar — circular image with a text fallback when `src` is absent.
+ *  `size` sets the square + border-radius inline so the circle is identical
+ *  across targets. Image load failures still show the fallback only when
+ *  `src` was never provided — no error detection, by design. */
+export function Avatar(props: AvatarProps) @{
+	const size = props.size ?? 32;
+	const box = { width: size, height: size, borderRadius: size / 2 };
+
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-avatar', props.className]}
+		style={{ ...props.style, ...box }}
+		role="img"
+		aria-label={props.alt}
+	>
+		{props.src
+			? <img className="vx-avatar-img" src={props.src} alt={props.alt} style={{ width: size, height: size, borderRadius: size / 2 }} />
+			: <span className="vx-avatar-fallback">{props.fallback ?? ''}</span>}
+	</div>
+}

package/src/AvatarGroup.macos.tsrx

@@ -0,0 +1,32 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { AvatarGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { toChildArray } from './child-array';
+import { Avatar } from './Avatar.macos.tsrx';
+
+/** AvatarGroup — row of overlapping avatars. `max` collapses the rest into
+ *  a `+N` avatar. Overlap is one-third of `size`, applied per-item so it
+ *  works identically without relying on sibling CSS selectors. */
+export function AvatarGroup(props: AvatarGroupProps) @{
+	const size = props.size ?? 32;
+	const children = toChildArray(props.children);
+	const shown = props.max != null ? children.slice(0, props.max) : children;
+	const overflow = children.length - shown.length;
+	const itemStyle = (i: number) => (i === 0 ? undefined : { marginLeft: -size / 3 });
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-avatar-group', props.className)}
+		style={props.style}
+	>
+		{shown.map((child: any, i: number) => (
+			<flexboxlayout key={i} className="vx-avatar-group-item" style={itemStyle(i)}>{child}</flexboxlayout>
+		))}
+		{overflow > 0
+			? <flexboxlayout className="vx-avatar-group-item" style={itemStyle(shown.length)}><Avatar fallback={`+${overflow}`} size={size} /></flexboxlayout>
+			: null}
+	</flexboxlayout>
+}

package/src/AvatarGroup.tsrx

@@ -0,0 +1,32 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { AvatarGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { toChildArray } from './child-array';
+import { Avatar } from './Avatar.tsrx';
+
+/** AvatarGroup — row of overlapping avatars. `max` collapses the rest into
+ *  a `+N` avatar. Overlap is one-third of `size`, applied per-item so it
+ *  works identically without relying on sibling CSS selectors. */
+export function AvatarGroup(props: AvatarGroupProps) @{
+	const size = props.size ?? 32;
+	const children = toChildArray(props.children);
+	const shown = props.max != null ? children.slice(0, props.max) : children;
+	const overflow = children.length - shown.length;
+	const itemStyle = (i: number) => (i === 0 ? undefined : { marginLeft: -size / 3 });
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-avatar-group', props.className)}
+		style={props.style}
+	>
+		{shown.map((child: any, i: number) => (
+			<flexboxlayout key={i} className="vx-avatar-group-item" style={itemStyle(i)}>{child}</flexboxlayout>
+		))}
+		{overflow > 0
+			? <flexboxlayout className="vx-avatar-group-item" style={itemStyle(shown.length)}><Avatar fallback={`+${overflow}`} size={size} /></flexboxlayout>
+			: null}
+	</flexboxlayout>
+}

package/src/AvatarGroup.web.tsrx

@@ -0,0 +1,29 @@
+import type { AvatarGroupProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { toChildArray } from './child-array';
+import { Avatar } from './Avatar.web.tsrx';
+
+/** AvatarGroup — row of overlapping avatars. `max` collapses the rest into
+ *  a `+N` avatar. Overlap is one-third of `size`, applied per-item so it
+ *  works identically without relying on sibling CSS selectors. */
+export function AvatarGroup(props: AvatarGroupProps) @{
+	const size = props.size ?? 32;
+	const children = toChildArray(props.children);
+	const shown = props.max != null ? children.slice(0, props.max) : children;
+	const overflow = children.length - shown.length;
+	const itemStyle = (i: number) => (i === 0 ? undefined : { marginLeft: -size / 3 });
+
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-avatar-group', props.className]}
+		style={props.style}
+	>
+		{shown.map((child: any, i: number) => (
+			<div key={i} className="vx-avatar-group-item" style={itemStyle(i)}>{child}</div>
+		))}
+		{overflow > 0
+			? <div className="vx-avatar-group-item" style={itemStyle(shown.length)}><Avatar fallback={`+${overflow}`} size={size} /></div>
+			: null}
+	</div>
+}

package/src/Badge.macos.tsrx

@@ -0,0 +1,12 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { BadgeProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Badge — inline label chip. Pure composition; `vx-badge` supplies only the
+ *  inline-flex row so apps own all visual styling. */
+export function Badge(props: BadgeProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-badge', props.className)} style={props.style}>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Badge.tsrx

@@ -0,0 +1,12 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { BadgeProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Badge — inline label chip. Pure composition; `vx-badge` supplies only the
+ *  inline-flex row so apps own all visual styling. */
+export function Badge(props: BadgeProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-badge', props.className)} style={props.style}>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Badge.web.tsrx

@@ -0,0 +1,10 @@
+import type { BadgeProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Badge — inline label chip. Pure composition; `vx-badge` supplies only the
+ *  inline-flex row so apps own all visual styling. */
+export function Badge(props: BadgeProps) @{
+	<span ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-badge', props.className]} style={props.style}>
+		{props.children}
+	</span>
+}

package/src/Banner.macos.tsrx

@@ -0,0 +1,20 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { BannerProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.macos.tsrx';
+
+/** Banner — inline notice strip with optional dismiss affordance. */
+export function Banner(props: BannerProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-banner', props.className)}
+		style={props.style}
+	>
+		{props.icon ? <Icon name={props.icon} className="vx-banner-icon" /> : null}
+		<flexboxlayout className="vx-banner-body">{props.children}</flexboxlayout>
+		{props.onDismiss ? <label className="vx-banner-dismiss" text="✕" style={{ marginLeft: 8, width: 12, height: 16, textAlign: 'center' }} onTap={props.onDismiss} /> : null}
+	</flexboxlayout>
+}

package/src/Banner.tsrx

@@ -0,0 +1,20 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { BannerProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.tsrx';
+
+/** Banner — inline notice strip with optional dismiss affordance. */
+export function Banner(props: BannerProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-banner', props.className)}
+		style={props.style}
+	>
+		{props.icon ? <Icon name={props.icon} className="vx-banner-icon" /> : null}
+		<flexboxlayout className="vx-banner-body">{props.children}</flexboxlayout>
+		{props.onDismiss ? <label className="vx-banner-dismiss" text="✕" onTap={props.onDismiss} /> : null}
+	</flexboxlayout>
+}

package/src/Banner.web.tsrx

@@ -0,0 +1,20 @@
+import type { BannerProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.web.tsrx';
+
+/** Banner — inline notice strip with optional dismiss affordance. */
+export function Banner(props: BannerProps) @{
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-banner', props.className]}
+		style={props.style}
+		role="status"
+	>
+		{props.icon ? <Icon name={props.icon} className="vx-banner-icon" /> : null}
+		<div className="vx-banner-body">{props.children}</div>
+		{props.onDismiss
+			? <span className="vx-banner-dismiss" role="button" aria-label="Dismiss" tabIndex={0} onClick={props.onDismiss} onKeyDown={(e: any) => { if (e.key === 'Enter') props.onDismiss?.(); }}>✕</span>
+			: null}
+	</div>
+}

package/src/Breadcrumb.macos.tsrx

@@ -0,0 +1,27 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { BreadcrumbProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Breadcrumb — ancestor trail. Every item with `onSelect` renders as a
+ *  tappable link; the last item is conventionally the current page. */
+export function Breadcrumb(props: BreadcrumbProps) @{
+	const sep = props.separator ?? '/';
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-breadcrumb', props.className)}
+		style={props.style}
+	>
+		@for (const e of props.items.map((item, i) => ({ item, i })); key e.i) {
+			<flexboxlayout className="vx-breadcrumb-item">
+				{e.i > 0 ? <label className="vx-breadcrumb-sep" text={sep} /> : null}
+				{e.item.onSelect
+					? <label className="vx-breadcrumb-link" text={e.item.label} onTap={e.item.onSelect} />
+					: <label className="vx-breadcrumb-text" text={e.item.label} />}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}